תקציר
חלק אימצו אותו לחיקם, חלק התעלמו ממנו כדבר שבעתיד הרחוק מדי וחלק זנחו חבר ותיק שלא עמד בציפיות. לא משנה באיזה צד של המתרס אתם נמצאים, קרוב לוודאי שכבר שמעתם את רחשי הבלוגים המכרכרים סביב הלהיט החדש: HTML5. זה פה, זה מגיע, ותרצו לדעת כל פרט ופרט לפני שזה יהפוך לחדשות ישנות.
דברים כמו תוספי jQuery, טכניקות עיצוב ומגמות עיצוב משתנים מהר מאוד בכל קהילת הווב. ולרוב אנו מקבלים את האפשרות שחלק מהדברים שנלמד היום יכולים להפוך למיושנים כבר מחר, אבל זו טבעה של התעשייה שלנו.
כאשר מחפשים יציבות כלשהי, בדרך כלל נוכל לפנות לקוד עצמו, משום שהוא נוטה להישאר ללא שינוי במשך תקופה ארוכה (יחסית). ולכן כאשר מגיע דבר מה שמשנה לנו את הקוד, זה בהחלט משמעותי; ובהחלט יהיו גם כאבי התבגרות שנצטרך לעמוד בהם. למזלנו, השמועה אומרת,ששינוי אחד לפחות ירד מסדר היום.
במאמר זה, אני מקווה להעניק מספר עצות ותובנה ל- HTML5 על מנת להקל על הכאב הבלתי נמנע שמגיע עם המעבר לתחביר שונה אפילו במעט.
מהם היסודות ?
הגדרת המסמך – DOCTYPE
כאשר התחלתי לחקור את HTML5 לפני מספר חודשים, אחד הדברים הבולטים שהתקשיתי למצוא היה ה- doctype. דבר פשוט, שהיית מצפה שיופיע בכל מקום, אך לאחר תסכול רב, לבסוף מצאתי אותו קבור במעמקי w3.org והנה הוא:
<!DOCTYPE html>
הייתי גם סקרן לדעת למה הם בחרו ב "html" על פני “html5”, נראה היה שזו הדרך ההגיונית להגיד לדפדפן שהמסמך הנוכחי נכתב ב HTML5, וזה היה גם מאפשר תבנית טובה לעתיד. אך גיליתי ש <!DOCTYPE html5> מפעיל מצב תאימות (Quirks Mode) ב IE6, וכאשר לוקחים בחשבון את התאימות לאחור אז <!DOCTYPE html> זו בחירה נאה (לדעתי האישית).
בסך הכול, ה DOCTYPE החדש מאוד מצא חן בעיניי; הוא קטן, בעל משמעות, ואולי אנו באמת נוכל לזכור אותו ולא נצטרך להעתיק ולהדביק אותו מאתר לאתר.
אלמנטים חדשים שכדאי להכיר
כבר במבט ראשון ב- HTML5, האלמנטים החדשים זוכים להבלטה ודורשים תשומת לב. קונסורציום W3C הקשיב לקהילה ותכנן לעתיד כאשר יצר את שפע האלמנטים החדשים. יש לנו הכול החל מרכיבי מבנה בסיסיים כגון <header> ו- <footer> וכלה באחרים כגון <canvas> ו- <audio> אשר מתחברים למה שנראה כממשק פיתוח יישומים (API) חזק מאוד שמעניק לנו את החופש ליצור יישומים יותר ידידותיים למשתמש תוך התרחקות מהצורך להסתמך על פלאש לצורך שמירת נתונים ואנימציה מרובה.
- <header>
אלמנט ה- header מכיל מידע מקדים אודות מדור או דף. זה יכול להכיל כל דבר החל מכותרות המסמכים הרגילות שלנו (נתוני מיתוג) וכלהבתוכן עניינים שלם - <nav>
אלמנט ה- nav שמור עבור מדור במסמך אשר מכיל קישורים לדפים אחרים או קישורים למדורים אחרים באותו דף. לא כל קבוצות הקישורים חייבות להיות מוכלות בתוך ה nav אלא רק הניווט הראשי - <section>
אלמנט זה מייצג מדור כללי במסמך או ביישום. זה מתנהג בצורה דומה ל <div> על ידי הפרדת קטע ממסמך. - <article>
אלמנט ה- article מייצג קטע מדף אשר יכול להיות עצמאי כגון: כתבה בבלוג, רשומה בפורום, תגובות שנשלחו על ידי המשתמש או כל פריט תוכן עצמאי. - <aside>
aside מייצג תוכן הקשור לחלק הראשי של המסמך. בדרך כלל זה מתבטא בפאנל צדדי אשר מכיל אלמנטים כגון כתבות קשורות, ענני תגיות וכולי. ניתן גם להשתמש בהם עבור ציטוטי מפתח - <footer>
אלמנט ה- footer מיועד לסימון התחתית לא רק של הדף הנוכחי אלא גם של כל מדור המוכל בדף. כך, סביר מאוד שתשתמשו באלמנט <footer> מספר פעמים באותו הדף.
כאשר תעיפו מבט על האלמנטים החדשים הללו, זה נראה כאילו הם פשוט באים להחליף את "ה- DIV עם ה- ID " המצוי שלנו; ובצורה מסוימת, זה נכון. אך, התרשים שלהלן מציג שניתן להשתמש באלמנטים כמו <header> ו- <footer> יותר מפעם אחת בדף בודד כאשר הם מתנהגים יותר כמו מחלקות ומרכיבי HTML רגילים שניתן להשתמש בהם שוב ושוב כדי לשמור על מבנה סמנטי.
אלמנטים כגון <header> ו- <footer> לא נועדו רק כדי לייצג את החלק העליון והתחתון של המסמך הנוכחי, אלא הם באים גם לתאר את ה <header> ו- <footer> של כל מדור במסמך, בדומה לדרך בה השתמשנו ב- <thead> ו- <tfoot> בטבלאות נתונים.
היתרונות שבשימוש במרכיבי המבנה הללו טמונים בעיקר בעובדה שהם מוגדרים בצורה טובה מאוד ומאפשרים פתרון מצוין ליצירת מבנה סמנטי למסמך שלכם. עם זאת, כדאי להשתמש באלמנטים הללו תוך מחשבה זהירה משום שניתן, בקלות להשתמש בהם יתר על המידה.
לקריאה נוספת על HTML5 מבני:
- סטיב סמית' (Steve Smith) על תגי מבנה ב- HTML5
- סקירה מוקדמת של HTML5 מאת לחלן הנט (Lachlan Hunt)
- אליוט הרולד (Elliot Harold) על אלמנטים חדשים ב HTML5
- דוגמא לטופס HTML5 מאת ברוס לאווסון (Bruce Lawson)
מקלים על המעבר מ- XHTML
למרות ש- HTML 4.01 & XHTML 1.0 & HTML5 דומים ביותר, ישנם הבדלי סינטקס קטנים אשר יכולים לחמוק ולגרום לקוד לא תקין. תוך התחשבות בכך, יש ב- HTML5 מספר "הקלות" מובנות כדי לפשט את המעבר.
לדוגמא, כאשר מרכיבים טופס ב HTML5, זהו התחביר התקין לאלמנט הזנת טקסט:
<input type="text" id="name">
אך גם זה יתקבל כקוד תקין בתור ניסיון להקל על כאבם של המשתמשים הלהוטים של XHTML (כמוני) אשר התרגלו להשתמש באלמנטים עם סגירה עצמית:
<input type="text" id="name"/>
אותו הכלל תקף גם ל- <meta> ואלמנטים אחרים עם סגירה עצמית. גם אלמנטים מהמורשת, כגון <b> ו- <i> נותרו בחבילה כדי להקל על העוברים מ HTML 4.0.1.
מה התועלת?
לכל טכנולוגיה חדשה חייבת להיות תועלת כלשהי; אחרת למה שמישהו ישתמש בה ? אם הקוד הישן שלכם עובד בצורה טובה ויעילה כמו הקוד החדש אז אין שום סיבה לשדרג. שום סיבה בכלל, תסמכו עליי, אני בדקתי.
למזלנו HTML5 טעון באפשרויות חדשות ומגניבות, טכניקות להקטנת כמות הקוד והמון דברים שהייתי מסכם כתועלת רבה מאוד. רובם סובבים סביב ממשק פיתוח היישומים (ה API) החדש ועץ ה- DOM.
הרחבת ה- API
היתרון הבולט ביותר אשר מובנה ב- HTML5 הינו ממשקי פיתוח היישומים הרבים וההזדמנויות שזה פותח לעתיד אפליקציות האינטרנט עם הגביע הקדוש של מטמון יישומים ויכולות למצב עבודה לא מקוון. Google Gears נתן לנו את האחסון הלא מקוון ופלאש הציג בפנינו את הכוח שבמטמון יישומים (Pandora עושה בו שימוש לשמירת נתוני ההתחברות שלכם). עם HTML5, האפשרויות הללו זמינות ישירות בתוך השפה וניתנות להרחבה בקלות באמצעות JavaScript.
HTML5 מסתמך על סקריפטים קלילים כדי להפעיל את שריריו על האינטרנט; ייתכן מאוד שזוהי הפעם הראשונה, פרט ל- jQuery, שטכנולוגיה אחת (בממשק הקדמי) מודעת לקיומה של טכנולוגיה אחרת בצורה מלאה. כמובן, אנו מחברים בין הטכנולוגיות באמצעות מחלקות ו- ID אך עד כה, הן נתפסו כשכבות נפרדות, על פי העקרונות של שיפור הדרגתי. אך ככל שרשת האינטרנט גדלה נדרשת לנו אינטגרציה כזו על פני הרשת.
אחסון נתונים לא מקוון
החלק המרשים ביותר של HTML5 הוא בהחלט היכולות הלא מקוונות שלו. תוכנות כגון Thunderbird ו Outlook (וכעת Gmail עד לרמה מסוימת) מאפשרות לעיין בנתונים הישנים שלכם ולהישאר לא מקוונים תוך כדי. עם HTML5, תהיה לכם אותה פונקציונאליות, אך בתוך הדפדפן. זהו הצעד הרציני הראשון לקראת גישור הפער שבין שולחן העבודה ורשת האינטרנט, וזה פותח בפנינו כל מיני אפשרויות שונות לעתיד יישומי האינטרנט.
ה- W3C לקח את החלקים הטובים ביותר מטכנולוגיות אינטרנט שונות ואסף אותם למה שנחשב נכון להיום שפת הסימון (markup) החזקה ביותר.
חלק מממשקי פיתוח היישומים האחרים של HTML5
- גרור ושחרר ( drag & drop)
ה- API של "גרור ושחרר" מגדיר מערכת גרירה ושחרור המבוססת על אירועים. אך חסרה ההגדרה מהו "גרור ושחרר". ה- API דורש JavaScript על מנת לאפשר פונקציונאליות מלאה של גרירה ושחרור. - וידאו ואודיו
ממשקי פיתוח היישומים של וידאו ואודיו מהווים שדרוג עצום בתחום הטמעת המדיה. למרות שהתמיכה כרגע הינה מוגבלת, פעולת הטמעת וידאו מעולם לא הייתה פשוטה יותר:<video width="400" height="360" src="vid.mp4">
- מיקום גיאוגרפי (Geolocation)
מיקום גיאוגרפי הינו API שימושי מאוד המצוי ב- HTML5. ניתן להשתמש באובייקט שלו כדי לקבוע נתוני מיקום בקוד באמצעות סוכן (user agent) המכשיר (רמז רמז: מכשירים ניידים).
חומר קריאה נוסף על ה API של HTML5
- יישומי אינטרנט לא מקוונים
- מטמון יישומים לא מקוונים
- Remy Sharp על ממשק פיתוח היישומים של JavaScript ב HTML5 (מצגת)
- הדגמת חוף תלת מימדי ב O3D מאת Google
היכן אוכל להשתמש בזה ?
למרות התמיכה המאוד מוגבלת ב HTML5, כדאי כבר ליצור סביבת ניסוי לשחק איתה. כרגע, Safari הינה פלטפורמת הניסוי הטובה ביותר, משום שהיא שתומכת במירב האלמנטים וממשקי ה API החדשים. כמובן שהדבר יכול להשתנות בכל רגע וכדאי לשים עין על Opera, Chrome ו Firefox.
ניתן להניח שמאחר ו- Safari הינו דפדפן מבוסס Webkit, אזי כברירת מחדל כל הדפדפנים מבוססי Webkit יתמכו באותם האלמנטים, אך לצערי, אין זה כך. למרות שרוב התכונות של HTML5 אכן נתמכות בכל הדפדפנים הללו, ישנם כמה, כגון <video>, שאינם נתמכים עדין.
מכשירים ניידים
כדי להשתמש ב- HTML5 ביעילות כבר עכשיו, עלינו להיות מסוגלים לשלוט בסביבה שבה נעשה בו שימוש. מאחר ו- Webkit סולל את הדרך ל- HTML5, נוכל להתמקד בבטחה במכשירים המבוססים עליו.
שלושת המכשירים הניידים הלוהטים נכון לעכשיו: Palm Pre, iPhone 3G והטלפון החדש של Google Android כולם מכילים דפדפנים המבוססים על מנוע העיבוד של Webkit.
Safari אפילו מוביל את הדרך בחזית ה HTML5 הנייד; ה iPhone (עם עדכון התוכנה האחרון) הינו המכשיר היחיד שהצלחתי לגרום לו לעבד בצורה תקינה את אלמנט ה <audio>. משום שהמכשירים הללו הינם כה צעירים ומשום שהם משתמשים במנוע עיבוד זהה, הסיכוי שיציעו עדכון תוכנה במהירות הינו די גבוה.
כרגע, ניתן בבטחה להשתמש באפשרויות רבות של HTML5 בפיתוח יישומי אינטרנט עבור ה iPhone וקרוב לוודאי שניתן לצפות מ- Pre ו- Android שיבואו בעקבותיו.
חומר קריאה נוסף על היכן ניתן להשתמש ב- HTML5
- אפשרויות HTML5 ב iPhone
- יישום אינטרנט GMail עבור ה iPhone
- תמיכת GMail ב HTML5
- תכונות הנתמכות ב- HTML5
- דף עזר (Cheat Sheet) ל- HTML5
כיצד נוכל להתקדם ?
למרות כל ההמולה שסובבת את HTML5 ולמרות שכולנו רוצים להשתמש בו, המעבר הולך להיות מעבר איטי מאוד מ- HTML 4.01 ו- XHTML 1.0. ייקח זמן למפתחים להתעדכן ולבחון את האפשרויות החדשות, להמתין שכל הדפדפנים ידביקו את הפער, וייקח זמן רב במיוחד למשתמשים לעבור מהדפדפנים הישנים האלה. עם זאת, אנו יודעים מי אנחנו, כולנו קוראים את הכתבה הזו (אני אישית קראתי אותה כ 30 פעם עד כה) ואנו יודעים שעלינו למצוא דרך כשרה להתקדם הלאה מבלי לפגוע בעבר.
המעבר השלם עדיין אינו ניתן לביצוע וכרגע אין טעם להפנות אצבע מאשימה כלפי מי שמעכב את ההתקדמות. כולנו יודעים שאף מפתח אחראי לא יפסיק לתמוך בדפדפן שעדיין נמצא בשימוש נרחב. ולכן, במקום ללכת עם הראש בקיר להלן מספר דברים שמצאתי שייתכן ויעזרו לנו להתקדם בכיוון חיובי:
הענקת שמות סמנטיים ל- DIVים
אם תעניקו שמות סמנטיים ל DIVים שלכם תוך יישור קו מול האלמנטים החדשים ב HTML5 זה יעזור להתרגל לשמות עצמם וכן לפונקציונאליות החדשה והכינון הנדרש עם האלמנטים החדשים <header> ו- <footer>
לפני שניכנס בשיא העוצמה לאתרי ייצור ב HTML5, אני ממליץ לנסות את המעבר הרך, של התאמת שמות ה DIVים. לא מצאתי שום חיסרון לפעולה הזו, ותוכלו אפילו להשתמש ב DOCTYPE החדש כמעט מבלי לשאת בתוצאות.
לזייף באמצעות JavaScript
ראשית כל אני רוצה לציין: בבקשה אל תעשו את זה באתר פרודאקשן. אם הסקריפט בצד הלקוח ייכשל, זה לגמרי ימוטט את האתר בדפדפנים שלא מוכנים לקבל את החלת ה CSS על האלמנטים החדשים. זו פשוט לא אפשרות טובה. אך זו בכל זאת אפשרות ואני בעד להכיר את כל האפשרויות ולא משנה מה הן.
יצירת אלמנטים חדשים באמצעות JavaScript
לעבוד עם jQuery זה מגניב והכול, אבל מתברר שישנה פונקציה מובנית ב JavaScript לצורך טיפול ביצירת אלמנטים חדשים:
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('time');
שיטה זו תאפשר לכם לעצב את האלמנטים האלה ב- Internet Explorer. שוב, החיסרון של השימוש בטכניקה הנ"ל הוא, שללא JavaScript, לא רק שהאתר יהיה מחוסר עיצוב, גם כל האלמנטים הלא מזוהים יוצגו כ- inline כברירת מחדל. כך שהאתר שלכם פשוט יתמוטט.
JavaScript בצד הלקוח אינו הפתרון לשימוש ב HTML5. JavaScript בצד השרת, זה כבר סיפור אחר לגמרי…
פיתוח יישומים לדפדפנים נבחרים
תמיד קידמתי את הרעיון של פיתוח אתרים עבור קהל היעד שלכם, אז תלוי בקהל היעד שלכם, ייתכן ופיתוח יישומים לדפדפנים נבחרים זו אפשרות ממשית. כפי שציינתי קודם לכן, הכול תלוי בשליטה בסביבה, אם נוכל לשלוט בסביבה נוכל לשלוט גם באפשרויות המועברות למשתמש בצורה טובה הרבה יותר. Google כרגע מנסה לעשות את זה באמצעות Google Wave.
google wave screen
הרעיון שמאחורי המוצר המפלצתי החדש של Google הוא מהפך בתקשורת, וזאת עם הטכנולוגיה הכי חדשה. Google Wave בנוי ב HTML5 ועדיין אינו שמיש בכל הדפדפנים. אבל זה בסדר בגלל שהם שולטים בקהל היעד באמצעות הענקת גישה למפתחים נבחרים לצורך ניסוי.
עם Wave, גוגל מקדמת את HTML5 רחוק ככל האפשר (ואפילו עוד קצת) על ידי שילוב הבלוגים, מערכות ויקי, מסרים מיידיים, דואר אלקטרוני ותקשורת מסונכרנת במעבר לשלב מתקדם יותר.
העובדה ש Google Wave מונע על ידי HTML5 הינה בהחלט ההתקדמות הגדולה ביותר שראינו בתחום הזה. הם עשו עבודה מופלאה של הרכבת מוצר חדשני ויצירתי.
מתמקדים על הנייד
בדומה למה ש Google עושה עם ה Wave על ידי הענקת גישה בררנית למפתחים, גם אנו יכולים לשלוט בסביבת הצפייה כאשר עובדים עם מכשירים ניידים. על ידי בדיקת תוכנת התצוגה, אנו יכולים לעצב יישומים ספציפיים שיעשו שימוש ב HTML5 עבור מכשירים נתמכים.
נכון לעכשיו, הפלטפורמה הטובה ביותר לניסויים בנייד הינו ה iPhone. עם עדכוני התוכנה האחרונים האייפון קרוב מאוד למצב של תמיכה מלאה. אך, אם פשוט תרצו להשתמש באלמנטים החדשים, כל אחד משלושת הפלטפורמות הניידות הגדולות יעבדו בסדר גמור. אם אתם מחפשים תמיכה ב- API אני מציע לנסות את ה- iPhone עם התוכנה המעודכנת החדשה.
לסיכום
בעזרת היסודות החזקים שנוצקו על ידי הגרסאות הקודמות של (X)HTML והפעילות הקהילתית הרבה שמסביב לסטנדרטים ברשת, כולנו מגיעים לדור חדש של ידע עשיר ואפשרות ללמוד לקח משגיאות העבר (ולעשות גם שגיאות חדשות). HTML5 נבנה תוך ציפיה לשפת סימון (markup) בעלת עוצמה רבה ועלינו ליישם זאת בצורה שתועיל לכולנו.
ישנן אפשרויות מצוינות רבות שנוכל לצפות להן החל באלמנטים החדשים וכלה בהמון ממשקי פיתוח רצחניים API) ). נוכל להפוך את המידע לזמין במצב לא מקוון, לשלב טכנולוגיות בקלות רבה וליצור אנימציות מורכבות בתוך סביבה מוכרת. אם יש לכם את הזמן לכך, אני מפציר בכם לעיין במפרט המלא ולהכיר עוד יותר את כל התכונות, (וישנן רבות) כך שנוכל להשתמש ב HTML5 לפיתוח יישומי רשת חזקים יותר ועשירים יותר בשנים הבאות.
הבא נריע ל- HTML5, בתקווה שיצדיק את כל ההמולה שמסביב
משאבים
- 23 משאבים נחוצים ל- HTML5
- הדגמות HTML5
הדגמות HTML5 הוא משאב מצוין לבחינת ממשקי פיתוח היישומים של HTML5 כגון: מיקום גיאוגרפי, גרור ושחרר, זיהוי מצב לא מקוון ואחסון. זהו משאב מיוחד אשר מאפשר לנו לבחון מה בדיוק נוכל לעשות עם HTML5 - גלריית HTML5
גלריית HTML5, בדומה לכל גלריה, הינה פורטפוליו של אתרים שם ניתן לראות כיצד משתמשים ב HTML5 בפיתוח היומיומי. עברתי על האתר בעיון ועשיתי גם קצת בדיקות תאימות לדפדפנים שונים על חלק מהפריטים. רבים אינם עובדים בדפדפנים ישנים יותר, אך ישנם פריטים אשר מחזיקים מעמד בצורה די טובה. - רופא HTML5
משאב שמוגש במיוחד עבור אנשים שרוצים לגלות פרטים נוספים אודות הטמעת HTML5 וכיצד לנהוג בו. הבלוג הזה מפרסם כתבות הקשורותל ל- HTML5 והסמנטיקה שלו וכיצד לעשות בהם שימוש, כאן ועכשיו. - דף עזר (Cheat Sheet) ל- HTML5
דף עזר שימושי ל- HTML5, הניתן להדפסה, אשר מכיל רשימה של כל התגים הנתמכים, תיאורם, מאפייניהם והתמיכה בהם ב- HTML4. שוחרר לציבור ב- Smashing Magazine. - סקירה של האפיון של HTML5 ב- W3C
כאשר הינכם רוצים לדעת אודות משהו שאף אחד לא כתב עליו באינטרנט, ה W3C הינו הפתרון עבורכם. ביליתי שעות בסריקת האתר הזה תוך חקירת HTML5. זהו משאב מצוין ואני ממליץ לקרוא לעומק כל דבר שתוכלו. - בודק תקינות ל- HTML5
אפילו עם התמיכה המוגבלת, עדיין היינו רוצים לוודא שהקוד שלנו תקין. ביצוע בדיקת תקינות לקוד שלכם הינה דרך מעולה ללמוד ולהשתלב בקלות בפיתוח באמצעות HTML5. - ויקי WHATWG
קבוצת העבודה של HTML הרכיבה תיעוד מצוין שמאפשר לעקוב אחרי מה שקורה בעולם ה HTML5.
אזכורים
כן, אתה יכול להשתמש c- HTML5 היום!
הבדלים ב HTML5 ב W3C
5 אפשרויות HTML5 מרהיבות שכדאי לצפות להן
סקירה מוקדמת של HTML5
הכנה ל HTML5 עם שמות כיתות סמנטיים
XHTML2 מול HTML5
HTML4 מול HTML5
נגישות ב HTML5
רופא HTML5
