טייקו בלוג

בניית אתרים ב HTML5

בניית אתרים ב HTML5

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

מה זה HTML5?

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

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

אז למה בעצם חשוב לי לדעת?

שפת תיכנות HTML מיועדת לקביעת אופן הצגת תוכן הדף באינטרנט. כללי טכנולוגייה זו מוגדרים על ידי תקן בינלאומי שנקרא W3C.

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

ה-HTML כאן כבר 20 שנה, אז מה יש בגירסה החמישית שלו שמבשר על מהפכה ומרגש את כל העוסקים בתחום?

נתחיל את דרכינו בסריקה היסטורית קצרה של הדרך בה פותחה הטכנלוגיה.
פירוש ראשי התיבות של האותיות HTML זה: Hyper Text Markup Language - טכנולוגייה זו פותחה בתחילת שנות ה-90 ומהווה את עמוד השדרה של כמעט כל אתר באינטרנט עד היום. במקורה פותחה השפה לצורך הצגת תכנים טקסטואלים באינטרנט, כשעוד היה בחיתוליו. ככל שהדרישות והיכולות התקדמו, כך גם נמתחה ושודרגה שפת ה HTML כדי לתת מענה מתמיד לעולם האינטרנט המודרני והתובעני.

הקדמה ממש קצרה

שפת תיכנות HTML מיועדת לקביעת אופן הצגת תוכן הדף באינטרנט. כללי טכנולוגייה זו מוגדרים על ידי תקן בינלאומי שנקרא W3C.

הדפדפנים השונים (אקספלורר, פיירפוקס, כרום..) יודעים לקרוא את תגיות ה- HTML (נכתבת בתגיות,' סוגריים ומשולשים) וכך מפרשים בעצם את העמוד, כלומר כיצד יש להציג את העמוד.

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

מה כל כך מעניין בטכנולוגייה החדשה?

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

התכונות החדשות רבות מאד, אבל ננסה למנות כמה מהבולטות שבהן:

  • הצגת וידאו ואודיו ישירות מתוך הדפדפן, ללא תלות בהתקנת גורם חיצוני (כגון פלאש).
  • שימוש ברוחב פס קטן יותר
  • קוד קצר יותר ונקי יותר
  • קוד מכוון תוכן - נוספו המון תגיות חדשות שמתארות אזורים שונים בעמודי האתר, כגון: header, footer, aside, article ועוד. תגיות אלו עוזרות לדפדפן ולמי שצופה בו להבין טוב יותר את משמעות העמוד והתוכן שלו.
  • פעולות מותנות מכשירים, המאפשרות שימוש נרחב בעיקר בגלישה ממובייל (כגון מיקום GEO, כיוון החזקת המכשיר ועוד)
  • אנימציה מובנת (באמצעות תגית ה Canvas המהפכנית) - המסמר האחרון בארון הפלאש
  • תמיכה בדו ותלת מימד ואפקטים ייחודיים
  • תמיכה מלאה ב CSS3 על כל תכונותיו.
  • פלטפורמה לבניית אפליקציות לטלפונים חכמים
  • יצירת טפסי זרימה המאפשרים מילוי בצעד אחר צעד
  • יצירת תוכן עבור מסכי מולטי מגע
  • גרירת תמונה או תוכן ישירות אל דף האינטרנט
  • שמירת מידע במצב לא מקוון - אחסון ושמירת מידע גם כשאין חיבור לאינטרנט: אחסון לא מקוון

וזו רק נגיעה בקצה רשימה ארוכה מאד!

איך ניתן לנצל טכנלוגייה זו לטובתי כבר עכשיו?

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

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

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