כיצד משתמשות חברות האינטרנט המובילות ב-HTML5

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

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

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

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

ראשית, קצת סטטיסטיקה

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

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

אז כמו בכל דבר, אנחנו הישראלים, אוהבים לבחון את הטכנולוגיות החדשות ולא לקנות משהו מבלי לבדוק אותו קודם ולכן דרוש קצת זמן כדי שנראה שהכל עובד טוב ורק אז נקדם את האתרים שלנו ל-HTML5 (רמז: הגיע הזמן…)

אז מה יש להם שאין לנו?

למה אותם אתרים גדולים התקדמו? מה יש להם לחפש ב-HTML5 שאין בטכנולוגיות הקודמות לו? כדי לחקור את חדירת HTML5 לעולם הקרוב אלינו ואת השימוש בטכנולוגיות החדשות שהיא מציעה, החלטתי לבדוק את חברות האינטרנט המובילות אשר מפעילות את אפליקציות האינטרנט הכי נצפות ברשת – Facebook ו-Google.

HTML5 ב-Facebook

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

  • HTML5 Video – סרטוני הוידאו שגולשים מעלים לפייסבוק מומרים לפורמט H.264 ומוצגים על בסיס יכולות הוידאו המובנות של HTML5 ונתמכות בכל הדפדפנים המודרנים גם על גבי המחשבים שלנו וגם על גבי הסמארטפונים והטאבלטים שלנו ללא צורך בפלאש או בכל פלאגין אחר כדי להציגם.

    Facebook Video Uploader. צילום מסך

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

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

HTML5 ב-Google

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

  • File API – בשירות הדואר Gmail, ניתן כבר זמן רב לגרור קובץ מהמחשב אל תוך הדפדפן וברגע שנשחרר את הקובץ באיזור המיועד בתוך האתר, הקובץ יעלה ויצורף למייל. השיטה של גרירה ושחרור נוחה ואינטואיטיבית הרבה יותר ומוכרת מאז ומעולם בממשקים החלונאים של מערכות ההפעלה השונות. השיטה הזאת, כמובן, מממשת את File API של HTML5 המאפשר, בין השאר, לגרור ולשחרר קבצים מהמחשב לדפדפן ולהיפך.

    Gmail Drag And Drop. צילום מסך

  • Offline & Local Storage – פעם גוגל ניסו לעשות את זה בעזרת Google Gears והיום עם HTML5 גוגל הזריקו לשלושת המוצרים השותפים שלהם – Mail, Calendar ו-Docs יכולות עבודה Offline. דמיינו מצב שהייתם כותבים מייל ארוך וחיבור האינטרנט שלכם היה מתנתק במהלך הכתיבה. באינטרנט הישן, כל מה שכתבתם היה הולך לטמיון. היום, באמצעות זיהוי מצב Offline ושימוש ב-Local Storage, אין הרבה הבדל בין אם אתם מחוברים או לא, למעט שהמייל ישלח בפועל רק כשתשובו להיות אונליין. כך גם לגבי מסמכים בגוגל דוקס ואירועים בגוגל קלנדר.

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

    Google Maps. צילום מסך

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

זוהי רק ההתחלה

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

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


הפוסט בחסות האקדמיה של נטקראפט


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

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

כתב אורח

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

הגב

10 תגובות על "כיצד משתמשות חברות האינטרנט המובילות ב-HTML5"

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

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

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

כתבה מעולה! תמשיכו להביא כותבים טובים.

Alex Wolkov
Guest

אחלה פוסט, לא מפתיע אבל…. :)

Eliyahu Lev
Guest

אחלה פוסט!

Nissan Hazzan
Guest

אני בונה ב-html 5 ויש לי בעיות עצומות של חוסר תמיכה של דפדפים נפוצים כמו אקפלורר 8 ומטה שהוא לצערי מהפופולרים שיש היום וכמו כן דפדפנים של אנדרואיד כמו דולפין ודומיו…

Michael Arenzon
Guest

גם אינטרנט אקספלורר 9 גרוע :)
צריך להכחיד את הדפדפן הזה.

Gal Goffer
Guest

מעניין ממש!
יופי של כתבה

קוקו
Guest

כתבה גרועה, אך אחת מהטכנולוגיות שצויינו כאן היא לא HTML5, ראה

https://developer.mozilla.org/en/HTML/HTML5

חלק מהטכנולוגיות גם הוסברו לא נכון

יוגב
Guest

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

כדאי להציץ בעמוד הגדרת התקן הרישמי של ארגון W3C:
http://dev.w3.org/html5/websockets/

או ב-whatwg.org (העמוד של מוזילה מקשר לשם בעצמו):
http://www.whatwg.org/specs/web-apps/current-work/multipage/

Roy Tertman
Guest

כתבה מעולה! למדתי המון…

פבל
Guest

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

wpDiscuz

תגיות לכתבה: