HTML5 – לשדרג את האתר שלך בכמה צעדים

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

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

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

כמה צעדים קטנים לשדרוג האתר

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

ברמה הטכנית:

– שפר את קוד התשתית (בצד הלקוח) של האתר: החלף XHTML ב- HTML5 והגדרות עיצוב CSS3

– החלף את גלריות הפלאש ואת התמונות המתחלפות מפלאש ל- JQuery

– שפר את הקוד האינטראקטיבי על ידי שימוש בספריות קוד מובנות המיועדות לכך

– שפר את הביצועים והמהירות של האתר

ברמה הגרפית:

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

– נקה צבעים, אלמנטים וגרפיקה מיותרת

– אל תפחד מגלילה: אם יש לך גלילות קטנות- המר אותן בעמוד ארוך

– התממשק לרשתות החברתיות שאתה פעיל בהן

– החלף פונטים בפונטים מעוצבים. הקדש תשומת לב לעיצוב שלהם

– הנגש את האתר למובייל: על ידי responsive design

– הוסף אינטראקטיביות לאתר שלך, חדשנות

שיפור טכנולוגי: HTML5 ו- CSS3

HTML5, בין היתר, מציעה השפה שדרוגים ופתרונות בתחומים הבאים:

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

אנימציה מעוצבת ונפלאה, אינטראקטיבית וייחודית זו נבנתה ונכתבה ב- HTML5 בשימוש התגיות החדשות canvas ו- audio:

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

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

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

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

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

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

החלפת גלריות הפלאש והתמונות המתחלפות מפלאש ל- JQuery

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

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

שתי מילים על JQuery:

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

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

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

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

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

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

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

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

דוגמה לאתר שמאפשר לבחור את סגנון האנימציה של החלפת התמונה:

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

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