בואו לגלות את עמוד הכתבה החדש שלנו
${m.global.stripData.hideElement}
 

רשימת קריאה

רשימת הקריאה מאפשרת לך לשמור כתבות ולקרוא אותן במועד מאוחר יותר באתר,במובייל או באפליקציה.

לחיצה על כפתור "שמור", בתחילת הכתבה תוסיף את הכתבה לרשימת הקריאה שלך.
לחיצה על "הסר" תסיר את הכתבה מרשימת הקריאה.

ניצוצות ברשת

המלך מת, יחי המלך החדש

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

32תגובות

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

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

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

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

האלטרנטיבה המדוברת בעולם

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

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

זה לא פלאש, זה הקנבס

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

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

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

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

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

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

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

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

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

מחקרים שלא יביישו את פיתגורס ואת פרמה

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

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

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

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

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

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

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

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

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

לסיכום

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

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

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


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



תגובות

דלג על התגובות

בשליחת תגובה זו הנני מצהיר שאני מסכים/מסכימה עם תנאי השימוש של אתר הארץ

סדר את התגובות
*#
בואו לגלות את עמוד הכתבה החדש שלנו