מה ניתן לעשות עם HTML 5 כבר היום?

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

HTML5 הינו התקן החדש שכולם מצפים לו עבור עמודי אינטרנט אינטראקטיביים וחדשניים יותר. יורשם של התקנים הנוכחיים XHTML ו-HTML4 אמור להיות מוכן רשמית לשימוש מתישהו בין מועד סיום הטיוטה הרשמית בשלהי 2012 למועד סיום כתיבת התקן המשוער ב-2022. למרות שהתקן המלא עדיין לא אושר, מספר ניכר מהיכולות והפיצ’רים המצופים ניתנים לשימוש כבר היום בתנאי, כמובן, שהדפדפן בו צופים בעמוד האינטרנט תומך ביכולות אלה. חלקים משמעותיים כבר נתמכים בדפדפני ספארי, כרום ופיירפוקס כאשר אקספלורר הפופולארי צפוי להצטרף לחגיגה רק בגרסה הבאה שצפויה לצאת בגירסת בטא בחודש ספטמבר – IE9.

האתר caniuse.com מספק רשימה מלאה של תכונות שונות ותאימות דפדפנים שונים אליהם (כולל גרסאות עתידיות) כך שבמידה ויש ספק כלשהו אם דפדפן מסוים תומך בתכונה כזו או אחרת אפשר פשוט ללכת לבדוק.

וידאו לכולם

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

ניתן למצוא דוגמא לקוד שמטפל בתגית הוידאו באתר ‘וידאו לכולם‘  – אתר קוד פתוח שמדגים שימוש בתגית <video> לתמיכה בתכני וידאו ברשת ללא ג’אווה סקריפט או בדיקת דפדפנים.

תיוג סמנטי וטפסים חכמים

HTML5 מוסיף מספר ניכר של תגיות סמנטיות – כלומר תגיות שהשם שלהן מראה על תפקודן כמו <header> או <nav>. אלו שמות שהרבה מפתחים השתמשו בהם בכל מקרה, אולם עכשיו ניתן להשתמש בהם ישירות כתגיות וניתן להגדיר את התנהגותן באמצעות CSS. מאחר ו-IE אינו תומך בתגיות אלו אז במידה ורוצים להשתמש בהן בדפים הנקראים על ידי IE יש צורך לקרוא לספריית Shiv של HTML5 – ספרית קוד פתוח המנצלת את היכולת של IE להגדיר אובייקטים עצמאיים ב-DOM. כל האלמנטים הקיימים ב-HTML5 שאינטרנט אקספלורר (עדיין) לא מכיר מוגדרים בספריה זו כך שניתן להשתמש בהם כרגיל.

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

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

סיכום

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

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

ברק ברודו

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

הגב

11 תגובות על "מה ניתן לעשות עם HTML 5 כבר היום?"

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

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

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

שווה לעקוב אחרי הבלוג הזה שגם לו יש רשימה והדרכה מאד טובים לגבי שימוש ב HTML5 http://html5doctor.com

ולפני כמה ימים פורסם הדבר המדהים הזה – http://html5boilerplate.com, אני עדיין 48 שעות אחרי שחפרתי בקוד לומד שם טכניקות חדשות שלא הכרתי או שהייתי מודע אליהן אבל יישמתי אותן בצורה פחות נכונה.

ארז
Guest

רע מאוד. בדוק כמה overhead יש לטמפלט הזה עוד לפני שבכלל התחלת לעשות משהו. זה טוב רק ללימודים אולי.

lightpriest
Guest
אנונימי
Guest

ואם כבר הזכרת את webGL אז בפוסט הבא יש דוגמא ליישום של webGL
http://blog.graphtech.co.il/gtw-%E2%80%93-rich-user-interface-library-for-web-applications/

אלמוג בקו
Guest

התקן ישוחרר ב2022?!!??! זה לא קצת מוגזם?! העולם יראה אחרת לגמרי עוד עשר שנים

בלוגר
Guest

שאלה:
מה יקרה אם עכשיו בונים ב HTML5 כמו שמבינים, ובהמשך ישנו משהו עם התקן? אז נצטרך לשנות את הקוד נכון?

יגאל
Guest

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

בלוגר
Guest

אוקיי.
תודה :)

wpDiscuz

תגיות לכתבה: