מורה נבוכים: HTML5 מההתחלה

לכבוד כנס ה HTML5Fest שמארגנים איגוד האינטרנט הישראלי ו W3C ישראל, יוצא זהר ארד למסע קצר בנבכי תקן HTML5 המתהווה וחוזר עם מספר הבחנות והצעות מעשיות לשימוש יומיומי. אחד סוכר, בלי חלב בבקשה.

פוסט זה מפורסם בחסות איגוד האינטרנט הישראלי, המארגן את כנס HTML5FEST בנושא פיתוח אתרי אינטרנט בתקן HTML5.

כנס HTML5FEST יארח את מפתחי צד הלקוח המובילים בישראל וכן אנשי קהילת הווב והאינטרנט. בכנס שלושה מסלולים: Mobile Web, Browser & Desktop Apps ואינטרנט ציבורי וממשלתי. הוא יתקיים ביום ג’, 25 באוקטובר 2011 בכפר המכביה ברמת גן.

 

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

מקדימים

קצב התקדמות הטכנולוגיה תמיד הקדים בכמה צעדים את הדפדפנים מכיוון שלטוב ולרע פיתוח ואשרור תקני השפות לתכנים אינטרנטיים הוא תהליך ארוך ומורכב שאינו נתון בידיה של חברה מסחרית ומוגבל הן ע”י הבירוקרטיה והן ע”י תמיכת הדפדפנים המצויים בשוק בתקנים הללו. מכיוון שהצרכים והקדמה לא מחכים לאף אחד, התפתחו שלל טכנולוגיות קנייניות שבאו למלא את הריק שנוצר ע”י קצב התפתחות התקנים הסבוך הנ”ל. כך למשל תפס תוסף פלאש מקום של כבוד כטכנולוגיה המובילה לפתרונות מדיה עשירה ותסריטי חוויית משתמש עמוסי כל טוב. HTML וג’אווהסקריפט פשוט עדיין לא היו שם ואדובי, אימו של פלאש, יכלה לפתח ולשחרר פתרונות כאלו ללא סבך הבירוקרטיה ומבוך גרסאות הדפדפנים המוכר והמגביל.

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

כשאתם אומרים HTML5 למה אתם מתכוונים?

לאחר שכיתתנו את חרבותינו לתגיות נוכל לבחון את אוסף הטכנולוגיות הנכלל תחת מילת הבאזז HTML5.

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

אני אומר משמע אני קיים

HTML כשפה מהווה את שכבת התוכן של האינטרנט (טכנית ה Web אבל עברית קשה שפה) ועוסקת בהגדרת מבני תוכן בעלי משמעות סמנטית והקשרית באופן שאינו תלוי בפלטפורמה. במילים אחרות, HTML עוסקת במה אנחנו רוצים להגיד ולא באיך מה שאמרנו נראה. מכיוון שאת מה שאנו אומרים באמצעות HTML “שומעים” כמות וסוגים לא ידועים של צרכנים שונים (למשל מנוע החיפוש של גוגל), עלינו לומר את שעל ליבנו בצורה הבהירה והמדויקת ביותר תוך מתן דגש הן על המבנה (סמנטיות) והן על ההקשר (קישוריות למקורות מידע נוספים, wai-aria ועוד).

HTML5 באה להרחיב את אוצר המילים הסמנטיות וההקשריות שלנו כדי לאפשר לנו ליצור תכנים משמעותיים יותר, בהירים יותר ומדויקים יותר. כך למשל תגיות section, header, footer, nav, aside מאפשרות לנו להגדיר אזורי תוכן בעלי משמעות ספציפית התורמים ליצירת מבנה מידע היררכי ומשמעותי, ומאפיני role ו data-* מאפשרים לנו להגדיר תפקיד או לספק מידע אודות רכיב תוכן מסויים.

עניין התגיות מוכר ונהיר. יש כאן הרחבה מבורכת של אוצר המילים בו נוכל להשתמש כדי להגדיר בצורה סמנטית ומדוייקת את היררכיית ומהות התוכן במסמך שלנו. השימוש במאפיינים כמו role או data-* דורש מעט יותר תשומת לב. מאפיין role מאפשר לנו לסמן רכיב במסמך כבעל “תפקיד” מסויים. כך למשל נוכל לציין רכיב ככפתור סגירה כדי לציין משמעות פונקציונלית ולא סמנטית. משפחת מאפייני data מאפשרת לנו לספק מידע נוסף אודות התוכן בו ניתן להשתמש בשכבה האינטראקטיבית של המסמך (למשל נוכל לסמן אוסף צלמיות באמצעות data-imagetype=”icon”.

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

שימושיות עשירה

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

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

המציאות היא שהיום, יותר מתמיד יש שונות רבה מאוד בתמיכה של הדפדפנים השונים בממשקי התכנות השונים של HTML5, מה שכמובן גורם לפריחה של ספריות תאימות ופריחה קלה בעורם של המפתחים.

זה יהיה מוכן כשזה יהיה מוכן

למרות שהסיסמה הנ”ל לקוחה מדביאן גנו/לינוקס, ברור לכל ש HTML5 עדיין לא מוכן לחלוטין. למרות זאת, השאלה החשובה ביותר שנשאלת ותשאל בהקשר הזה היא “מתי ובמה כבר אפשר להשתמש?”. זה כמובן תלוי מה אתם הולכים לפתח ועבור מי.

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

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

אז מה עושים?

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

שנית, לוקחים אוויר ונוקטים בגישת ה Graceful Degradation המציעה לפתח מכנה משותף רחב שעובד על כל הפלטפורמות ולהעשיר אותו עבור פלטפורמות תומכות. כך למשל, אם ברצונכם להשתמש בממשק המיקום הגיאוגרפי, תוכלו להסתמך על זיהוי ראשוני באמצעות השרת (כתובת IP ושירותי Geo-Location מקוונים) וזיהוי שניוני מדוייק יותר באמצעות ממשק ה GeoLocation של הדפדפן. כמובן, תוכלו להציע למשתמשיכם לעבור לפלטפורמה מתקדמת יותר כדי להנות משירות עשיר, מהיר או מדוייק יותר.

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

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

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

מקורות נוספים

מכיוון שהדברים משתנים בקצב מהיר יותר מקצב שחרור הגרסאות של שועל-האש, תוכלו להתעדכן במוכנות של חלקיו השונים של תקן HTML5 באתרים כמו html5readiness ו caniuse ולקרוא על דוגמאות שונות לשימוש בממשקי התכנות של HTML5 באתרים כמו diveintohtml5 ו html5rocks.

גילוי נאות

בכנס HTML5Fest המדובר, אכהן כיושב-ראש מסלול Browser & Desktop וכן כשופט בתחרות היישומים המתרחשת כחלק מהכנס. לשמחתי ולשמחת רבים (כך אני מקווה) יתמקד הכנס בשלושה תחומים שהוזכרו בסקירה – פיתוח לסלולר וטאבלטים, נגישות מידע ויישומים מבוססי דפדפן, כך שאם הסתקרנתם ואתם רוצים להעמיק את ידיעותיכם בתחומים הללו, הכנס הזה הוא גם בשבילכם. אמרו שיהיה קפה ושאולי יחלקו תגיות עם השם של כל משתתף שנתמכות גם באקספלורר.


בחסות כנס HTML5FEST של איגוד האינטרנט הישראלי


איגוד האינטרנט ומשרד ה-W3C הישראלי מכריזים על תחרות פיתוח אפליקציות מבוססות HTML5. הזוכים בתחרות יוכרזו בכנס המפתחים HTML5FEST שיערך בישראל ב-25 באוקטובר 2011, בהשתתפות אלן בירד, מנהל הפיתוח העסקי ב-W3C העולמי. מפתחי האפליקציות הנבחרות יזכו בפרסים כספיים בסך 10,000 ₪, 5,000 ₪ ו-2,000 ₪.

כנס HTML5FEST יארח את מפתחי צד הלקוח המובילים בישראל וכן אנשי קהילת הווב והאינטרנט. בכנס שלושה מסלולים: Mobile Web, Browser & Desktop Apps ואינטרנט ציבורי וממשלתי. הוא יתקיים ביום ג’, 25 באוקטובר 2011 בכפר המכביה ברמת גן.

 

זהר ארד

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

הגב

4 תגובות על "מורה נבוכים: HTML5 מההתחלה"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
Q4
Guest

כתבה יפה, הבעיה היא שכל עוד אנשים יעבדו עם איכספולרר ועוד בגרסאות ישנות כמו 7 תהיה בעיה לכתוב ב-html5.
ראיתי כמה דברים שהוא עושה והם נהדרים.

נ.ב.
יש עוד כאלה שעובדים עם IE6 ובזה בכלל ביזיון.

זהר ארד
Guest

ולכן ניתן לנקוט בגישה של Graceful Degradation איפה שמתאים ואיפה שלא מתאים אפשר בדר”כ למצוא פתרונות אחרים. זה כמובן בכל מה שנוגע לממשקי התכנות. ב HTML אין בעיה גם עם IE7

אלירן
Guest

כתבה מצויינת.

קרטמן
Guest

כתבה טובה ומקצועית, תודה! אני גם ממליץ לבדוק את הדפדפנים שבהם צריך לתמוך באתר כמו http://html5test.com מראה בצורה טובה מה נתמך ומה לא (בדפדפן שלך). התקן נוגע במספר *עצום* של תחומים וסטנדרטים: Web Workers, WebGL, microdata, WebSocket וזה לא נגמר, בהרבה מהם ניתן להשתמש כבר היום בכל הגרסאות האחרונות. מיקרוסופט יש בעיה עם WebGL בגלל שהם חושבים שהוא לא מאובטח, ולמרות שישנה בעייתיות מסויימת של אבטחה, מיקרוסופט רק רוצים ליצור תלות ב-silverlight 5, כי הבעיה קשורה לדרייברים של חברות הגרפיקה, ותהיה להם בדיוק אותה בעיה עם D3D ב-silverlight 5.

wpDiscuz

תגיות לכתבה: