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

במאמר זה נעסוק:
1. מהי טכנולגיית ה-HTML5 שעתידה לתפוס את מקום הפלאש.
2. סקירת כלים שבאפשרותם להמיר קבצי פלאש ל-HTML5
3. סקירת תוכנות שניתן באמצעותן לבנות באנרים ב-HTML5
4. הפצה של באנרים ב-HTML5 למדיות הפרסום השונות.

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

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

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

* הצגת קבצי מולטימדיה ישירות בדפדפן.
עם הופעת התגיות <video> ו-<audio> ניתן היה לראשונה להציג בדפי HTML קבצי וידאו ואודיו. מה שלפני כן היה ניתן רק באמצעות שימוש בפלאגינים כמו פלאש. כך למשל אתר youtube שינה את כל הצגת הסרטים שבו מנגן המבוסס פלאש לנגן המבוסס על HTML5 בלבד.* הצגת גרפיקה וקטורית.
ה-HTML5 יכול להציג קבצי SVG וקטורים. אפשר גם להחיל אנימציה על אלמנטים גרפיים שנוצרו ב-SVG באמצעות שפת תגיות שנקראת SMIL, החסרון הגדול של השיטה הזו היא שהיא אינה נתמכת בדפדפן אינטרנט אקספלורר.
למי שמעצב באנרים ב-HTML5, מומלץ כשניתן, לייבא קבצי SVG על פני קבצי PNG אל כל פורמט אחר של קבצי מפת סיבית משום שקבצי ה-SVG שוקלים בדרך כלל משמעותית פחות.

* canvas.
משמעות המילה canvas בעברית הוא בד הציור, ובדפדפנים הכוונה ב- canvas היא לאלמנט המיועד ליצירת גרפיקה בשני ממדים בדף ה-HTML. ניתן ליצור איתו צורות גרפיות בדר"כ באמצעות שימוש ב-JavaScript

CSS3
ה-CSS בגרסתו השלישית הביא עמו מספר שיפורים משמעותיים, ביניהם:

* יכולות עיצוב מתקדמות שהביאו איתם את היכולת ליצור לראשונה אתרים שניתן לעבד עליהם תמונה ממש כמו פוטושופ כמו pixlr.com וכדומה.
א. כך למשל ניתן כיום לתת לאלמנטים בדף ה-HTML אפקט של drop shadow, פינות מעגולות (border-radius), תמיכה בפונטים שאינם פונטים של המערכת, שליטה על מראה סמן העכבר, אפקטים של שקיפות, מעברי צבע, יצירת עמודות וכו'.

ב. שליטה על הרספונסיביות של הדף. עם ה-CSS3 אפשר ממש בקלות ליצור סטיילים המותאמים ספציפית לגדלי חלון שונים באמצעות השימוש ב-media quairies

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

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

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

אך תחילה נסקור כמה מהכלים הקיימים היום להמרת קובץ SWF ל-HTML5

1. Swiffy
– Swiffy הינו כלי שפותח בגוגל המאפשר המרת קבצי swf לקובץ HTML אחד שבו מקודד כל הקוד כולל התמונות. היא עובדת ע"י המרת הגרפיקה הווקטורית ל-SVG. ומשתמשת בג'אווה סקריפט על מנת ליצור תנועה ואנימציה וממירה את פקודות ה-actionscript לג'אווה סקריפט.
ניתן להשתמש בשירות בשתי דרכים, או להעלות את הקובץ swf לאתר swiffy והוא ימיר לכם אותו. או באמצעות רכיב הרחבה לפלאש שניתן להוריד אותו מהלינק הזה. לאחר שמתקינים את ההרחבה ניתן לבצע המרה בקלות דרך הפלאש ע"י לחיצה על
(command → Export as HTML5 (Swiffy .

יתרונות
* swiffy מרנדר חזרה קובץ HTML בודד שניתן בקלות לשלוח אותו למדיות השונות. כך למשל את התמונות שבקובץ swf הוא ממיר לקידוד base64 ואת כל המידע שבקובץ swf הוא שותל בקובץ html אחד.
* יתרון נוסף הוא שהswiffy יחסית לכלים אחרים מכווץ יחסית טוב את המשקל של הקובץ ה-HTML המומר, אבל עדיין באנר HTML5 ישקול הרבה יותר מאשר אותו באנר בפלאש.

2. createJS
createJS הינו בעצם שילוב של מספר ספריות קוד פתוח בג'אווה סקריפט (EaselJS, TweenJS, SoundJS, PreloadJS). הייחוד של createJS הוא שהוא עובד על אובייקט ה-canvas, האובייקט ליצירת גרפיקת 2D ב-HTML
createJS נתמך בין היתר ע"י אדובי, מיקרוסופט, מוזילה ועוד.
למפתחים בפלאש הוציאה אדובי הרחבה לפלאש שמאפשרת לייצא את הקובץ fla ישירות ל-HTML5.

החיסרון של שימוש ב-createJS למעצבים הוא שהוא מייצא את כל התמונות שבבאנר לספרייה נפרדת. המשקל של סך הקבצים שהוא ממיר הוא גדול בהרבה מאשר השימוש בכלי swiffy. אך יש להדגיש שוב שם ה-swiffy מרנדר קובץ HTML שגדול משמעותית במשקל מקובץ SWF

3. ה- SWf Decompiler
ה-SWf Decompiler מוכרת לחלקינו בתור התוכנה המאפשרת להמיר קבצי swf ל-fla. בגרסאות האחרונות של התוכנה התווספה האפשרות גם לייצא קובץ swf בתור HTML5. יחסית היא עושה זאת באופן די סביר.

תוכנות ליצירת באנרים ב-HTML5

Adobe Edge
אדובי אדג' היא תוכנה לבניית תוכן אינטראקטיבי מבית היוצר של אדובי ובכך יתרונה הגדול כי הממשק של מזכיר את הממשק של כל התוכנות של אדובי כמו פלאש ופוטושופ.
האדג' משתמש ב-HTML5, JavaScript, CSS3 על מנת ליצור תוכן אינטראקטיבי אבל הוא בנוי בעיקר לשימוש ע"י מעצבים.

Google Web Designer
הווב דיזיינר של גוגל היא תוכנה שנוצרה בעיקר לשם יצירת באנרים בHTML5. מי שרוצה לפרסם באנר במערכת השותפים של גוגל חייב כיום ליצור את הבאנר רק בתוכנה זו. אנחנו נרחיב עליה בהמשך המאמר.

אז איך מפיצים לpublishers את הבאנרים החדשים שנעשו ב-HTML5?

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

שימו לב! ישנן פקודות actionscript מסוימות שאינן נתמכות. וכן לא מומלץ להשתמש בפלאש בתכונות כגון פילטרים, blend modes והתאמות צבע (color-adjusted) אם רוצים להמיר אותו ל-HTML5 משום שהוא מורידים את הביצועים בסמארטפונים. לכן מומלץ להעלות ל-swiffy ולבדוק בו את הנראות של הבאנר והאם יש הודעות שגיאה.

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

אז איך מפיצים לGOOGLE את הבאנרים החדשים שנעשו ב-HTML5?

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

google web designer מייצאת את הבאנר לקובץ zip הכולל את קובץ HTML אחד שמכיל את כל קבצי ה-css וה-JS שנוצרו בתהליך העבודה ולאחר שעברו תהליך שנקרא
Minify בו מוסרים מהקוד כל הערות וכל המחרוזות שאינם נחוצים להפעלת הקוד כך שהקובץ שוקל פחות מקובץ שעליו עורכים את הבאנר. בנוסף המשקל הקובע למגבלת המשקל להעלאה למערכת של גוגל הוא המשקל של קובץ ה-zip אותו מייצאת התוכנה. עדיין מומלץ לשים לב למשקלים תוך כדי העבודה על הבאנר ולייצא מדי פעם ולבדוק שאין חריגה. וכמובן להשתמש בקבצי SVG וקטורים ולא בתמונות כאשר הדבר אפשרי. או בגוגל פונט או בכל דרך על מנת שלא לעבור את הגבלת המשקל של גוגל.

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