ניסויים ב-HTML5

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

סבב צבעים: דוגמא

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

צייר לי חדשנות

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

מי מכם שהיה משחק במשחקי מחשב לפני כ-20 שנה אולי זוכר טכנולוגיה שנקראה סבב צבעים (color cycling). זו הטכנולוגיה בה השתמשו מעצבי משחקים כשכל מה שהיה להם זה צבעי 8 ביט כדי ליצור אשליה של תנועה. המפתח ג’וסף הקבי (Joseph Huckaby) בנה מנוע המבצע סבב צבעים כזה תוך שימוש ביצירות של מעצב המשחקים מארק פרארי (Mark Ferrari). הקבי מאפשר לצופים לעבור על כל אחד מהצבעים בפלטה ולראות כיצד הוא משפיע על היצירה הסופית ומתי הוא מופיע בסבב. התוצאה מרהיבה ולדעתי שווה צפייה ולו רק בשביל הנוסטלגיה למשחקים מהילדות כמו ‘אי הקופים’ ו’לום’.

מגנטים וחלקיקים

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

לא פלאש אבל כמעט

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

למי שמתענינים בנושא חיפוש פשוט בנושא ‘HTML5 experiments’ יראה כמה נפוצים השימושים הקיימים כבר היום לתקן החדש. באתר chromeexperiments.com לדוגמא רשומות 115 דוגמאות שונות ליישומי HTML5 אולם רובן יעבדו רק בדפדפן כרום.

אם תתקלו ביישום מענין או שימושי במיוחד אתם מוזמנים לשתף את כולנו כאן בתגובות.

Avatar

ברק ברודו

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

הגב

9 תגובות על "ניסויים ב-HTML5"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
אלון שורץ
Guest

Arcade Fire’s new interactive HTML5 music experience, “The Wilderness Downtown” : http://bit.ly/a5qk2e

בן
Guest
השאלה היא איך מתכנת יכול להרשות לעצמו להשתמש בתקן החדש כאשר הוא לא נתמך בדפדפנים פחות מודרניים (IE 5,6,7 ואפילו בפירפוקס מיושן יותר). גם עבודה כיום על פי התקן לא מספקת על מנת להציג קוד תקין בכל הדפדפנים, אז שימוש בתקן החדש.. שמעתי כבר על פלאגינים כמו modernize שאמורים לתת לנו משוב אם הדפדפן תומך בתקן או לא ואז לייצר עבורו קבצים נפרדים שיהוו תמיכה אלטרנטיבית. אבל, זה לא מספיק לדעתי.. יקח זמן עד שתצא ספריה שתדע להוות תמיכה מלאה בדפדפנים שונים ועד אז – אנחנו ניצור לעצמנו ספריות מאולתרות ופחות חזקות שיהוו רק חיסרון אני צופה המון כאב ראש… Read more »
Avi
Guest
כמפתח ומעצב FLASH וSILVERLIGHT , אם כל הכבוד לעתיד הצפוי לHTML5 המבורך, הוא מעולם לא יהיה ברמה של פלאש, נכון לעכשיו אפילו סילברלייט שהוא מוצר מדהים עדיין לא שווה ערך לפלאש בשאר מישוריו… אנשים נוטים לחשוב שפלאש זה רק באנרים ווידאו, ממש ממש לא! פלאש מאפשרת ליצור אתרים, מיניסייטים, פרזנטציות אינטרקטיביות, משחקים, נגני וידאו, באנרים, אנימציות (שזה אחד הדברים שמייחדים אותה) ומגרסאת CS5 כבר יש 3D ווקטורי שזו המילה האחרונה, עוד לא פירטנו את הכל וזה ממש לא הכל, שלא לדבר על זה שבעתיד צפויים עוד המון הפתעות מבית אדובי. אבל כמובן, תחרות הא טובה לכולנו, אז בהצלחה לHTML5, מקווים… Read more »
יגאל
Guest
קודם כל כי 3D “וקטרי” זאת לא המילה האחרונה, זאת המילה האחרונה בפלאש אולי. וזה עצוב. מתוך התקן של HTML5 מה שמאפשר גרפיקה מהסוג הזה הוא אלמנט CANVAS ותמיכה ב-SVG. שניהם כבר קיימים בסטנדרט מזמן, ונתמכים על ידי כל הדפדפנים החדשים. אני לא חושב בכלל אפשר להשוות בין פלאש ל-HTML5, זה לא תחליף אחד לשני, זה שתי טכנולוגיות רחוקות שנות אור אחת מהשניה שמאפשרות יצירת דברים דומים בכמה מקרים. HTML5 היא סך הכל שפה של מבנה דף, אין בה אפילו שום דבר שעוסק בגרפיקה. כל האפקטים והדברים המגניבים הם תוצאה של עיבוד הגרפיקה על ידי הדפדפנים השונים. הקוד מאחורי הגרפיקה… Read more »
יגאל
Guest

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

בן
Guest

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

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

אליס
Guest

לא ברור לי על מה ברק מסתמך, אבל הניסוי עובד גם עובד בפיירפוקס 3.6.8.

wpDiscuz

תגיות לכתבה: