ב-Online
 
 
 
 
 
 
 
טרנדים 
Html5 - חידוש של פעם בעשור  
 
  צילום: GettyImages    
טרנדים |
 

מימי ראשית ה-Html ועד עתה: מדוע Html5 היא חידוש מרעיש, מה הייחוד שלה והאם היא תביס את אתרי הפלאש? יונית רושו מסבירה

 
 
 
 
 
 
 
 
 

 

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

 

תמיד ברקע

 

 

HTML, ר"ת של HyperText Markup Language, היא השפה העיקרית בה כותבים דפי אינטרנט, והיא למעשה מכלול פקודות, תגיות ומאפיינים, לעריכה ולעיצוב של עמוד האינטרנט. HTML מסבירה לדפדפן היכן וכיצד למקם את הטקסט, הקישורים, המדיה והתמונות על המסך, באיזה גודל, צבע, סוג פונט, וכן הלאה. השפה כה קלה ופשוטה לתפיסה, עד שהיא משמשת את מרבית בוני האתרים.

 

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

 

הבעיה: כל אחד ראה משהו אחר

כל דפדפן הציג משהו אחר
 כל דפדפן הציג משהו אחר 
 צילום: אימג' בנק / Getty Images 
 

 

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

 

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

 

השפה התרחבה ל-XHTML (היא eXtensible HyperText Markup Language), שפת תגיות מבוססת XML, המחייבת שימוש בחוקים מדוקדקים. החוקים והתקנים תרמו לתצוגה דומה יותר של האתר בכל סוגי הדפדפנים. המטרה היתה שכל הדפדפנים יראו את אותה התוצאה ושלא יהיה צורך בכתיבת קוד שונה לכל דפדפן.

 
 

HTML5: חושבים כבר עכשיו על העתיד

מעברי צבע
 מעברי צבע 
 צילום: צילומסך 
 

 

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

 

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

 

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

 
אינטראקטיביות: גררו את העכבר על המרקע כדי לגרום לעוד ועוד עיגולים להערם
 אינטראקטיביות: גררו את העכבר על המרקע כדי לגרום לעוד ועוד עיגולים להערם   צילום: צילומסך 
 

לא שואבת את כל משאבי המחשב האישי

 

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

 

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

 

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

 

HTML נגד פלאש: תבוא במקום?

 

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

 

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

 
חלקים של הוידאו מתפוצצים בלחיצת עכבר על ידי שימוש בתג canvas ובאלמנט הוידאו של Html5
 חלקים של הוידאו מתפוצצים בלחיצת עכבר על ידי שימוש בתג canvas ובאלמנט הוידאו של Html5   צילום: לחצו על התמונה כדי לעבור לאתר המלא 
 

אז איך זה נראה בפועל?

 

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

 

 

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

 
HTML5 - אתר שממחיש מדוע השפה החדשה תוכל להחליף את פלאש
 HTML5 - אתר שממחיש מדוע השפה החדשה תוכל להחליף את פלאש   צילום: צילומסך 
 

 

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

 
HTML5 - תמונת הרקע נשארת במקומה
 HTML5 - תמונת הרקע נשארת במקומה   צילום: צילומסך 
 

 

3. אפליקציה הכתובה ב-Html5 בשימוש האלמנט canvas, מציגה מספר תמונות ומאפשרת לגרור אותן על המסך, להקטין, להגדיל ולסובב אותן ולבסוף ליצור תמונה אישית מהתוצאה. היישום מרשים.

 
אינטראקטיביות: ליצור תמונה אישית
 אינטראקטיביות: ליצור תמונה אישית   צילום: צילומסך 
 

4.  כלי המתאר בסיס נתונים ואת הקשר בין האובייקטים שבו. כל אובייקט ניתן לגרירה ושאר התרשים מתאים את עצמו בהתאם למיקום החדש של האובייקט. הדינאמיות והאפשרות לגולש כאן יוצאת מגדר הרגיל. כל זאת בעזרת Html5:

 
אינטראקטיביות: בסיס נתונים והקשר בין אובייקטים
 אינטראקטיביות: בסיס נתונים והקשר בין אובייקטים   צילום: צילומסך 
 

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

 
 מעברים עדינים בין הטקסטים
  מעברים עדינים בין הטקסטים   צילום: צילומסך 
 

  

יונית רושו היא מרצה במסלול האינטראקטיבי במכללת שנקר ומנכ"לית דיינמיק-ווב, בוטיק להקמת אתרי אינטרנט.

 
 
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
@@@@@@@@@@@@@@@@@@@ ilan @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 
 
תגובות
הוסף תגובה0 תגובות
הוספת תגובה
מאת
 
נושא
 
תוכן
 
 
 
 
תודה! תגובתך התקבלה.
התגובה תתפרסם בכפוף לתנאי האתר.
 
 
 
 
 

כל הזכויות שמורות 2011 © נענע 10 בע"מ
 
 
 
 
כל הזכויות שמורות © Nana10 בע"מ
Video powered by