החלקים החשובים ביותר ב-HTML5

קצת פרספקטיבה

הלידה של הווב

לפני 20 שנה (6 אוג', 1991), טים ברנס-לי שחרר את ה-World Wide Web לעולם, בזמן שעבד בCERN–. למעשה, מה שהוא שיחרר הייתה תוכנה שנקראה "WorldWideWeb" שלאחר מכן שונתה לשם "Nexus" על-מנת ליצור הבדלה בין הקונספט של World Wide Web והדפדפן.

הדפדפן ההתחלתי היה יכול לרנדר מסמכים אשר היו כתובים ב-HyperText Markup Language (HTML)‎. הHTML- הראשון תמך במספר מצומצם של פורמטי עיצוב ובהיפר-לינקים (כיום אנחנו פשוט קוראים להם לינקים) למסמכים אחרים. מוצג כאן צילום מסך, שנתיים לאחר מכן – כאשר התמיכה בצבעים ותמונות נוספה:

התקומה של הווב

במשך 10 השנים הבאות "הווב" הופצץ במונחים של חדשנות, תקינות¹, מספר משתמשים, דפדפנים (התקנות וגרסאות), שרתי ווב (התקנות וגרסאות), והשפעה כלכלית. יחד עם השחרור של Mosaic (ב-NCSA) ב-1993, עם שילוב החלק בין גרפיקה לטקסט, ה- World Wide Web החל במהרה להיות השימוש הדומיננטי ביותר של האינטרנט והכוח המניע לאימוץ האינטרנט. למעשה, לרוב משתמשי המחשב "הווב" ו"האינטרנט" הפכו להיות מילים נפרדות.

הנפילה של הווב

במפנה המאה, החדשנות בווב האטה בגלל הדפדפן Internet Explorer של מיקרוסופט, שיצר כמעט מונופול בשוק הדפדפנים. ברגע שמיקרוסופט השיגו שליטה רחבה בשוק הדפדפנים הם איבדו עניין בהנעת או בשיתוף פעולה לתקני אינטרנט חדשים וטכנולוגיות, מהסיבה שזה אולי יפגע ברווחיות של פלטפורמת Windows.

התקומה של הווב (בפעם השנייה)

במהלך שלוש השנים הבאות החלה הפצצה חדשה של חדשנות וובית. הווב יצא מתוך המערה שלו בגלל שלושה טרנדים מרכזיים: העלייה שלMozilla Firefox (צאצא רוחני של הדפדפן Mosaic), העלייה של Google Chrome והעלייה בשימוש במכשירים סלולאריים.

אחת התכונות של בני-אדם היא לתת לכל דבר שם, כולל מושגים מופשטים. האנרגיה החדשה והחדשנות שאפפו את פלטפורמת הווב לא יצרה מצב שונה – היה צריך לתת לזה שם. מה שמחזיר אותנו ל-"HTML5" …

"HTML5"

טכנית, HTML5 הוא מפרט של ה-²World Wide Web Consortium (W3C)‎. אנשים קפדנים רבים יטענו שזה השימוש היחידי שצריך להיות. לכל שאר האנשים, HTML5 הוא מושג שימושי לתיאור של השינויים המהירים שקורים בזמן הנוכחי לפלטפורמת הווב. לזה אני מתכוון כשאני משתמש במושג "HTML5". התייחסות למפרט של הW3C- תעשה באמצעות המושג "W3C HTML5".

W3C HTML5

למרות שמפרט הW3C HTML5- לא יהיה משוחרר רשמית עד 2014, כבר בתחילת חודש אוג' המפרט סיים את סיקור הקריאה האחרונה כך שככל הנראה לא יהיו שינויים מהותיים בשלוש השנים הבאות עד לשחרור התקן.

W3C HTML5 זה שעמום המחץ

ה-W3C HTML5 הוא מאוד חשוב מצד אחד, אבל מצד שני הוא גם דיי משעמם. זה למעשה תיאור רשמי של כל הדברים העדכניים בפלטפורמת הווב בשלוש השנים האחרונות. התוכן של המפרט כתוב בצורה דיי יומיומית (בשונה מהאופי הטכני של מפרטים בדר"כ). הAPI- המעניין ביותר בW3C HTML5- הוא Canvas 2D והוא מוגדר במסמך נפרד.

W3C HTML5 הוא חשוב

למרות זאת, הW3C HTML5- הוא חשוב בגלל שהוא גורם לכל הרעיונות הטובים שנלמדו במרוץ השנים להפוך לרשמיים, והוא מנסה לבטל את רוב הדברים שנחשבים כיום כטעויות. בנוסף הוא גם מעניק שכבה נוספת של עקביות ושלמות לDOM APIs- ולאלמנטי הHTML-. וכנראה הכי חשוב, הוא גרם ליצרניות הדפדפנים השונות להסכים ביניהן. הכוונה היא שמפתח ווב שמפתח כפי שמפורט במפרט הW3C HTML5- יוכל ליצור אפליקציה אחת שתעבוד בצורה הולמת בכל גרסאות הדפדפנים המודרניים בלי הצורך להתאים את קוד האפליקציה לכל שטיק של כל דפדפן.

W3C HTML5 נגד HTML5

אם נסכם את ההבדלים בין המפרט W3C HTML5 והקונספט הכללי של HTML5:

• הW3C HTML5- מקדם רבים מן האלמנטים דרג ב' כמו וידאו, אודיו, אנימציות, טפסים חכמים וכו' לאלמנטי דרג א'.
• HTML5 (בשימוש הנפוץ) לוקח את האלמנטים החדשים הללו ומוסיף להם כח ופונקציונאליות שלא היה אפשרי בעבר. HTML5 מייצר בנוסף סט שלם של אלמנטים מדרג א' מטכנולוגיות שלא היו חלק מהווב בהתחלה כמו גישה לחומרת מכשיר, מידע בינארי, גישה למערכת הקבצים,multiprocessing וכו'.

או בדרך אחרת נסכם את מערכת היחסים בין השניים:

מפרט הW3C HTML5- משמש כקרקע ומסגרת עליה כל פיתוחי ה-HTML5 המעניינים שקורים.

החלקים המעניינים ביותר בHTML5-

כעת הגענו לעיקר במאמר זה- לתת רשימה ולפרט את הAPIs- של HTML5, תקנים והטכנולוגיות החשובות ביותר (והמעניינות ביותר). ניסיתי לדמיין כיצד יראה הווב בעוד 5 שנים, ומנקודת המבט המקדימה הזאת להחליט איזה חלקים בHTML5- הם החיוניים ביותר על-מנת לקדם אותנו לעתיד הזה.

הרשימה הבאה מסודרת לפי סדר החשיבות מהחשוב ביותר לפחות חשוב. כמובן שזה רק הדעה הסובייקטיבית שלי. אני מפתח אפליקציות ווב (noVNC, websockify) ומשתתף בקבוצות העבודה והדיונים של HTML5, אבל כמובן שהעתיד הוא תמיד יותר מעניין (ופחות) ממה שכל מומחה יכול לחזות.

אז ללא הקדמה נוספת…

1. מנועי Javascript מהירים יותר

   הווב כפלטפורמת אפליקציות נבנה על זה יותר מכל דבר אחר. מנועי הJS החדשים הם טכנולוגיית ה"על-חלל" (Wrap Drive) של הווב. ללא טכנולוגיית ה"על-חלל", מסע בין כוכבים היה סיפור שמתרחש על כדור הארץ (או במקרה יותר טוב במערכת סולרית בודדה). ללא גידול המשמעותי בביצועי הJS- היינו היום עדיין מדברים על דפי ווב ולא אפליקציות ווב.

2. WebSockets

   וובסוקטס יקדמו את הדפדפן לעולם של אפליקציות רשת מתקדמות. אחרי שנוספו לנו מנועי Javascript מהירים, רשתות עם latency נמוך הם בעלי הפוטנציאל הגדול ביותר לאפשר לווב לשלוט בתחומי אפליקציות חדשים.

3. סוגי נתונים בינאריים (Typed Arrays ו-Blobs)

   Javascript התחילה את דרכה כדרך לביצוע אימות של נתונים טקסטואליים בטפסים. עם זאת, אלמנטים רבים מדרג א' שהוצגו לראשונה ב-HTML5 מכילים, מקבלים ו/או שולחים מידע בינארי ולכן נוצר הכרח ביצירת סוגי מידע בינאריים אשר מוגדרים ב-Javascript. מפתחים השתמשו במשך שנים רבות בכל מיני סוגי "האקים" על מנת לקודד מידע בינארי בסוגי הנתונים הישנים ב-Javascript. אבל השימושים ב"האקים" הללו הם מחסום רציני ולא נוכל לממש את הכוח המלא של HTML5 ללא תמיכה בנתונים בינאריים.

4. Web Audio API

   לא מדובר בתגית ה-<audio>, אלא בAPI-ים / הצעות לאפשר מניפולציות בסאונד ב-latency נמוך, באופן ישיר באמצעות Javascript. תגית <audio> (שהיא חלק מה-W3C HTML5) מאפשרת להטביע קובץ אודיו ישירות בדף האינטרנט ומציעה API להשמעה וסנכרון.

   ההצעות ל-Web Audio API מאפשרות יצירה ומניפולציה של סאונד באופן ישיר וגם מטפלות בבעיות של פסקול ב-latency גבוה שקיימות היום במימוש של תגית ה-<audio>.

   ההצעות הללו עדיין בשלבים ראשוניים ויתכן והפתרונות הסופיים יתאחדו לבסוף עם תגית ה-<audio>, אבל הבעיות שנפתרות ע"י ההצעות ל-Web Audio API יהיו חלק מעתיד הדפדפנים בצורה כזו או אחרת.

5. Canvas 2D Context

   מניפולציית פיקסלים בצורה ישירה. כולם מסכימים שזה חשוב אז אני לא אוסיף עוד הרבה. שמתי את זה מתחת ל-8iy-Web Audio APIמכיוון ורוב הדברים שניתן לעשות עם Canvas 2D ניתן לעשות עם מתודות אחרות (SVG, WebGL, CSS3).

6. CSS3 ו-WOFF

   גיליונות עיצוב מדורגים 3 (3 Cascading Style Sheets) ופורמט הפונט הווב הפתוח (Web Open Font Format) מביאים יחד את העוצמה המלאה של עיצוב, טיפוגרפיה, layout ותזוזה ויזואלית לווב. כמו כן, עם CSS3 (במיוחד מודל ה-Flexible Box), אפליקציות ווב יוכלו ליצור עיצוב לממשק משתמש בצורה פשוטה וחזקה ללא הבלאגן הנדרש בCSS2- במיקום אלמנטים.

7. Local Storage, אפליקציות Offline ו-APIs לקבצים

   יש הרבה תחומים של אפליקציות שלא יכולות להתקיים ללא אחסון מידע מהיר, מקומי וקבוע (לפחות עד שיהיה לכולם חיבור אינטרנט ג'יגהבייטי בזול). כמו-כן לכמה מהאפליקציות דרוש שיטת אחסון מידע מקומית למקרה בו אין חיבור אינטרנט זמין. ישנם מספר סטנדרטים/APIs שמפותחים בתחום הזה אבל כל אחד מהם מטפל באספקטים שונים של אותה מגבלה בסיסית של דפדפני הפרה-HTML5.

8. Web Workers

   חוק מור מת, יחי חוק מור! הגידול, שנה אחרי שנה, בCPU- בזכות חוק מור נגמר לפני מספר שנים. אבל חוק מור היה למעשה הצהרה של מחיר / צפיפות של טרנזיסטורים וזה לא השתנה, רק הנושא השתנה: ליבות מעבד לכל אינץ' של שבב. בעוד מספר שנים, אפילו למכשיר הסלולרי שלך יהיו יותר ליבות מעבד מאשר כמות האצבעות שלך.

   מודלים של תוכנה חדשים נדרשים כדי לנצל את מלוא היתרונות במציאות של חוק מור של ריבוי ליבות. למרבה המזל, למרות ש-Javascript הייתה תמיד שפת single-thread היא עוצבה מלכתחילה גם כשפה מונעת אירועים. זה אומר שלמרות שאי-אפשר להריץ כמה שורות של Javascript באפליקציית ווב בודדת בו-זמנית, הדפדפן יכול לעשות כמה דברים בו-זמנית בחסות קוד ה-Javascript שרץ.

   היכולת להיות מונע מאירועים מגיע לגבול מסוים. המפרט של Web Workers נוצר על-מנת לאפשר לאפליקציית ווב בודדת לקיים הרצות של מספר אשכולות של Javascript סימולטנית. על-מנת למנוע סיבוכיות שבדרך כלל מגיעה בתכנות בmulti-threaded (מנעולים, מבני נתונים מיוחדים וכ"ו), Web Workers הן יחידות Javascript עצמאיות והן יכולות לתקשר אחת עם השנייה ועם אשכול ה-Javascriptהראשי באמצעות הודעות מבוססות אירועים.

9. SVG 1.1/2.0

   פורמט ה-SVG (Scalable Vector Graphics) היה כאן בסביבה כבר הרבה זמן וכמה דפדפנים אפשרו הטמעה של תמונות SVG בתוך דפי אינטרנט. SVG מתחיל סוף סוף להיות מאומץ ע"י כל יצרני הדפדפנים בצורה של APIs חזקים אשר מאפשרים גישה מלאה ואפשרות למניפולציה לאלמנטים המוכלים בו (כלומר אלמנט מדרג א').

   היה קשה למקם את SVG ברשימה הזו. הרבה (עם לא רוב) השימושים ב-Canvas 2D Context הם למעשה מתאימים יותר ל-SVGובמובנים רבים SVG הוא הרבה יותר חזק. עם זאת, ל-SVG יש היסטוריה לא יציבה ואני חושש שהוא צבר סוג של מטען נפשי לא מוצדק שיפריע לו להיות אבן יסוד וחשוב כמו שהוא צריך להיות. אני אשמח לגלות שטעיתי ושהוא יהפוך לטכנולוגיה חשובה יותר ממה שחזיתי לו.

10. WebGL

    WebGL הוא ה-Canvas 3D Context וזה למעשה – האצת חומרה באמצעות OpenGL API בשביל הווב. בדומה לSVG, יש לו פוטנציאל להיות חלק חשוב מאוד מתוך ה-HTML5. אבל אמרתי פוטנציאלי מכיוון ומיקרוסופט מזלזלת בצורה מוסיימת ב-WebGL (יתכן מכיוון שהוא מוגדר במונחים של OpenGL ולא בAPI- שלהם – DirectX) ולכן קיימת אי-ודאות האם הטכנולוגיה תכנס לתוך Internet Explorer. אם לא היו האי-ודאויות הללו הייתי בוודאי ממקם את WebGL גבוה ברשימה מכיוון והטכנולוגיה הזו פותחת שער להרבה תחומי אפליקציות מעולמות חדשים (כמו משחקי 3D לדוגמא).

11. כל השאר

    החזון האולטימטיבי של אלה שדוחפים קדימה את פלטפורמת הווב היא להפוך את פלטפורמת הווב לחזקה, מסוגלת ומקיפה כמו אפליקציות נייטיב. כל אחד מ-10 הנושאים שהוצגו כאן פותח את פלטפורמת הווב להרבה תחומי אפליקציות חדשים שהיו קיימים עד היום רק באפליקציות נייטיב. אבל הם משאירים עוד פערים רבים שעוד נצטרך למלא לפני שיגיע היום העתידי בו מפתחים לא יצטרכו לשאול"האם אני יכול לפתח את זה כאפליקציית ווב?" אלא כ: "האם אני רוצה לפתח את זה כאפליקציית ווב?".

    ישנן אינספור טכנולוגיות אשר מנסות לענות על הפערים הללו בפונקציונאליות של אפליקציות ווב. חלקן היו מופיעות גבוה יותר ברשימה אם היו יותר בשלות או שהיה פחות חוסר ודאות לגבי מידת האימוץ שלהן ע"י יצרניות הדפדפנים. הנה רשימה חלקית של טכנולוגיות/APIsאשר מנסות להשלים את הפערים:

    • WebRTC/Stream API: שיחות וידאו Peer-to-peer.
    • Geolocation: איפה אני בעולם?
    • Orientation: איזה כיוון זה למעלה?
    • Crypto: הצפנה/פענוח יעילים ב-Javascript.
    • WebCL: גרסת האינטרנט של OpenCL. מי לא היה רוצה להשתמש בGPU ישירות דרך תכנות ב-Javascript?
    • WebNotifications: תגיד לי מה קורה, אבל בעדינות.
    • Web Intents: סוגי נתונים אסוציאטיביים עם פעולות ברירת מחדל והעברת נתונים הלוך חזור בין אפליקציות ווב. אפליקציית ווב המעודפת עליך לעריכת תמונות תוכל לשתף את המידע לאפליקציית הווב שלך ליצירת מצגת. ונאמר אמן.
    • נראות דף: נסו לדמיין כמה אנרגיה העולם יחסוך עם כל האנימציות והסרטים יפסיקו להתרנדר בזמן שאתם לא מסתכלים עליהם.
    • requestAnimationFrame: עם פקודת setTimeout אתה מקבל 100 FPS או 2FPS (לרוב באותה שנייה). עכשיו תוכל לקבל באופן קבוע 30FPS. ויש הרבה יותר שמחה בעולם.
    • Microdata: ניתוח חד-משמעי של מידע מוטבע באמצעות מידע מובן למכונה.
    • וכו'
    • וכו' ³
    

    Mac נגד PC נגד דפדפן (מתוך xkcd.com)

מה לגביי <video> ו- <audio>?

תגיות <video> ו-<audio> הן ככל הנראה התגיות של HTML5 שגרמו להכי הרבה התרגשות (וחרדה) בווב בהקשר של HTML5. למעשה, חלק מכם כבר סרקו מראש וחיפשו אותם ברשימה והיו מופתעים לגלות שהם לא היו #1 ו-#2. שני האלמנטים הללו הן חלק מ-W3C HTML5 ולמרות שהן הפכו את השימוש המסורתי באלמנטים מדרג ב' (לדוגמא מה שנעשה באמצעות פלאש) לשימוש באלמנטים מדרג א', הן עדיין רק דרך טובה יותר לעשות משהו שכבר נעשה בעבר. תגיות <video> ו-<audio> לא מרחיבות בצורה משמעותית היקף היכולות של אפליקציות ווב וזו סיבה ראשונה לחוסר הנוכחות שלהן ברשימה. בעיה נוספת שיש בתגיות הללו שהרשימה של פורמטי המדיה הנתמכים שונה מדפדפן לדפדפן. עד שהבעיה הזאת תיפטר האימוץ של התגיות הללו יהיה קלוש⁴.

הערות שוליים

מוצגת כאן רשימה של כמה סטנדרטים משמעותיים שפותחו סביב פלטפורמת הווב בשנים הראשונות לאחר שהדפדפן הראשון שוחרר ע"י טים ברנס-לי:

1. • 1995 – HTML 2.0 הופץ כסטנדרט הראשון של HTML.
   • 1995 – HTML עושה את צעדיו הראשונים לעבר הפיכתו לדינאמי ואינטראקטיבי כאשר Javascript נוצר ע"י ברנדן איך (Brendan Eich) ונוסף לדפדפן נטסקייפ (Netscape Navigator 2).
   • 1996 – ספציפקציית CSS1 (Cascading Style Sheets) מוכנה וחלקים ממנה מופיעים ב-Internet Explorer 3. חלק מהסיבה ל-CSS הוא ליצור הפרדה בין תצוגה של דף אינטרנט ומהתוכן והפונקציונאליות. בעקבות זה נוצר עיקרון במדעי המחשב של הפרדה בין חלקים.
   • 1998 – ספסיפיקציית DOM שלב 1 (DOM Level 1 – Document Object Model), ה-API של אלמנטי HTML בעמוד, שוחרר ע"י W3C.
2. אני צריך לציין עוד קבוצה חשובה (עם שם ארוך ונוטה לשיכחה) שמעורב בסטנדרט של HTML, הקבוצה Web Hypertext Application Technology Working Group (WHATWG). רבים (אולי כל) האנשים שנמצאים ב-WHATWG ומשתתפים בעבודה ב-W3C. ה-WHATWG יכול להיחשב כיותר דינאמי ופחות נוקשה מאשר ה-W3C.ה-WHATWG שומרת על מסמכי סטנדרטי-על. הראשון הוא HTML. רבים מהרעיונות שנמצאים ב-W3C HTML5 נכתבו לראשונה שם. המסמך הזה יכול להיחשב גם כ-HTML5+. הסטנדרט השני נקרא Web Apps 1.0. הוא מכיל את התוכן של מסמך ה-HTMLומוסיף רבים מה-APIs שנחשבים לאלה שגורמים לווב להיות פלטפורמה אפליקטיבית לכל דבר.מסמך WHATWG Web Apps 1.0 כבר הרבה יותר קרוב למה שאנשים מתכוונים כאשר הם משתמשים במושג "HTML5", עם זאת, אפילו זה לא מתמצת את כל המשמעות הטמונה בו. יש עוד APIs רבים והצעות שהם חלק מהאנרגיה החדשה של הווב שהם כבר עכשיו בדרך או עתידים להיות בדרך להיטמע ברוב הדפדפנים (באמצעות תהליך הסטנדרטיזציה או בלעדיה).
3. וכו'. אני עדיין לא מכיר הצעה/API עם שלושת האותיות האלה. השאלה היא האם המאמר הזה יגרום לכך שיהיה יותר סיכוי או פחות סיכוי שיהיה כן כזה בקרוב?
4. ע"י שילוב של Javascript מהיר, WebSockets, Canvas, Web Audio וסוגי מידע בינארי נוכל לקבל וידאו ואודיו ללא תגיות ה-<video>/<audio> וללא תוספים (Plugins). ה-frame rate והרזולוציה יכול להיות נמוכות מהרצוי אבל זה אפשרי.

מקורות

• Dive Into HTML5
• HTML5cheatsheet
• HTML5Rocks
• Excellent Presentation on HTML5 from HTML5Rocks
• When can I use… Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• HTML5 Readiness – Flower chart of HTML5 & CSS3 features in major browser versions
• The HTML5 Test – How well does your browser support HTML5?
• The Web Platform: Browser technologies ()
• HTML5 Tweets
• W3C Blog
• WHATWG Blog
• Google Chrome Blog
• Mozilla Firefox Blog
• Opera Developer Blog
• Microsoft Internet Explorer Blog
• "An Open Web" book
• "20 Things I Learned About Browsers and The Web" Google comic
• "What is HTML5"

לינקים

• Early History of the Web (W3C)
• Where the web was born (CERN)
• W3C
• W3C HTML5
• WHATWG
• WHATWG HTML
• WHATWG Web Apps 1.0
• 1. EcmaScript/Javascript: ECMA-262
• 2. WebSockets
  • API: W3C, WHATWG
  • Protocol: IETF/HyBi
• 3. Binary Data Types
  • Typed Arrays
  • Blob Type
• 4. Web Audio: Google, Mozilla, W3C
• 5. Canvas 2D Context: W3C, WHATWG
  • CSS3: W3C
  • WOFF: W3C
  • Web Storage: W3C
  • IndexedDB: W3C
  • Offline Applications: W3C, WHATWG
  • File/Reader: W3C
  • File Writer: W3C
  • File Dir/System: W3C
• 6. CSS and WOFF
  • W3C 1.1
  • SVG 2.0 W3C Roadmap
• 7. Local Storage, Offline Application and the File APIs
  • WebRTC/Stream API
  • Geolocation
  • Orientation
  • Crypto
  • WebCL
  • WebNotifications
  • Web Intents
  • Page Visibility
  • requestAnimationFrame
  • Microdata
• 8. Web Workers: W3C, WHATWG
• 9. SVG 1.1/2.0:
• 10. WebGL
• 11. All the Rest
• websockify – WebSocket to TCP socket proxy/bridge – https://github.com/kanaka/websockify
• noVNC – HTML5 VNC Client – https://github.com/kanaka/noVNC