אני לוקח את הפוסט הזה כדי לענות על שאלה ששאלת לאחרונה בתגובות המאמר:
מתי זמן טוב להתחיל לעצב באופן מלא עם HTML5?
ובכן, האמת, זה תלוי ביעד שאליו אתה מכוון. אם אינך מתכנן שהמבקרים שלך ישתמשו ב- Internet Explorer (למשל: דף תוכנת Mac) אז התחל מיד עם HTML5, אך אם אתה זקוק לאנשים עם IE שיראו את האתר שלך, מוטב שתמתין ...
בכניסה, הרבה אחרי הקפיצה 48 הדגמות של HTML5 מדהימות וראויות להיראות. נהדר זה קטן.
מקור | הונג קיאט
aאנימציה udioburst
אנימציה נוחה ופנטסטית שנוצרה עם קנבס ותג שמע של HTML5.
בריכת כדורים
מוצג באירוע הקלט / פלט האחרון של Google, הדגמה זו מראה לך עד כמה יכול להיות HTML5 דינמי.
בלוב סאלד
יצור שנוצר ב- HTML5 שיענג אותך.
בומומו
באמצעות Bomomo ניתן לצפות בתנועות אטומיות שונות המדומות עם HTML5.
כדור דפדפן
תתפלא עם כדור HTML5 'חוצה דפדפנים' זה.
בועות
תיהנו על ידי יצירת בועות צפות אינסופיות בצבעים שונים.
אנימציה מצוירת בד
סרט מצויר HTML5 פשוט ומצחיק שעוזר לכם להבין מה יכול אלמנט הקנבס של HTML5 לעשות.
קולקלוק
שעון אנלוגי נחמד וניתן להתאמה אישית שנבנה על ידי HTML5 ו- JavaScript.
Flickr PS3 מצגת
צפה בתמונות Flickr שלך עם שקופיות בסגנון PS3 בדפדפן האינטרנט.
פולארויד אינטראקטיבי
הדגמה אינטראקטיבית שעובדת די דומה לממשק מולטי טאץ '.
זיקוקים של JS
תיהנו מרגע הזיקוקים עם כוח המשיכה והמהירות המועדפים עליכם, מופעל באמצעות HTML5 ו- Javascript.
קלידוסקופ
קליידוסקופ HTML5 יפהפה מאוד ועתידני.
חלקיקים נוזליים
אנימציית חלקיקים רגישה המגיבה על בסיס תנועת העכבר שלך.
מסמרייזר
הדגמת HTML5 רגישה ומצטיינת נוספת המציגה כיצד אלמנטים קרובים מגיבים איתך בתנועת העכבר.
ענן ערפילית
ללכת לאיבוד עם ערפילית HTML5 המופלאה הזו.
Parallax
צפה בכל צורות הדו-ממד בפרספקטיבה מקבילה.
אנימציית חלקיקים
אנימציית חלקיקי HTML5 אלגנטית שיכולה להיווצר למסר המועדף עליכם.
להתפשט
ללכת לאיבוד עם אנימציית התפשטות אינסופית זו.
סטארפילד
אנימציה מגניבה מאוד של HTML5 Starfield שתשנה כיוון ומהירות בהתבסס על תנועת העכבר שלך.
הרס וידאו
לחיצה אחת לבום סרטון מנגן.
צורת גל
שימו לב כיצד גל הקנבס של HTML5 נע על ידי שינוי המשרעת, אורך הגל, הרוחב וכו '.
אפקט 3D
מתרשם מאנימציית קנבס? זה יותר שרכיב הקנבס של HTML5 יכול לעשות, וזה נקרא אפקט תלת ממדי. מפתח יכול להסתמך על אלמנט בד, DOM ו- JavaScript כדי ליצור אפקט תלת ממדי, אשר בהמשך ניתן לפתח לאנימציה או למשחק תלת ממדי.
Canvas3D ו- Flickr
חוו חוויה תלת ממדית חדשה לגמרי עם סרט הצילום של פליקר.
הדמיית בד
הדמיית בד מציאותית המבוססת על HTML5.
מפלצת מתפתחת
התבונן במפלצת המתפתחת ליצור מסובך, אחד מיוצריה הוא HTML5.
ארגז מתנות של גוגל
מנוע החיפוש הענק Google מוצג בתצוגה תלת-ממדית הניתנת להשמעה.
מגע JS
חלון ראווה איכותי וריאליסטי '3D on 2D Canvas'.
מצגת נתונים
אמנם ניתן להשתמש באלמנט הקנבס של HTML5 ליצירת אנימציה ואפקט תלת ממדי, אך ניתן ליישם אותו גם כדי להציג נתונים מתמטיים.
גנופלוט
Gnuplot, יישום לתכנון נתונים בגרסת HTML5.
RGraph
RGraph מספק מגוון רחב של הצגת נתונים כמו תרשים עמודות, סרגל התקדמות ותרשים מכ"ם מסורתי.
אפליקציית רשת
בסופו של דבר, תוך שימוש בכל האפשרויות המשולבות על ידי HTML5 ושפה אחרת, ניתן ליצור יישום או משחק אינטראקטיביים הקרובים ליישום Flash.
CanvasPaint
עד אחיו של מיקרוסופט פיינט נכנס לדפדפן האינטרנט שלך, ואביו הוא HTML5.
CanvasMol
יישום מדעי אשר נבנה כדי לעזור לך להבין את מבנה אלמנטים מסוימים של כדור הארץ.
בונה קריקטורות
צייר תמונה מצוירת מעניינת עם בונה קריקטורות מינימלי ואינטראקטיבי זה.
גרור הכל לכאן
גרור כל מה שאתה יכול לגרור בהדגמה כדי להציג פרטים.
מערכון גרטיק
יישום HTML5 מקורי המאפשר לך ליצור כמה שרטוטים בסיסיים שניתן לשמור בפורמט תמונה שונה כמו jpeg או png.
PhysicalSketch
צייר כל מה שתרצה ותראה כיצד הם מגיבים בכוח המשיכה המדומה.
לוח סקיצה
יישום רישום HTML5 רב עוצמה המאפשר לך לצייר ולערוך את התמונה שלך באופן מדויק.
שיחות חולין
יישום אינטרנט המאשר את המיקום הגאוגרפי של הודעה הקשורה למזג האוויר שנרכש מטוויטר, ובכך יוצר אותם למפת 'מזג אוויר חברתי' מבוסס בד, טריוויאלי למדי (כאמור המחבר) אך מעניין.
משחק
3 משועמם
לעולם לא תשתעמם אם תוכל להמשיך להתחמק ממאות כדורי HTML5 בשנייה הבאה.
להיפרד
להחזיר את הכדור כדי לשבור את כל הלבנים.
קנבסקייפ
לא ממש משחק, אבל זה מדגים כיצד ניתן להשתמש ב- HTML5 לפיתוח משחק דפדפן First Person Shooting.
תפוס את זה
כמה כדורים אתה יכול להתחמק כדי לקבל את הריבוע HTML5 המנצח שלך?
תגובת שרשרת
שרשר את הפיצוץ כדי להשיג את המטרה, אל תתמכר.
קובייה
שחק טטריס בתצוגה תלת ממדית, מלמעלה למטה.
etchaPhysics
צייר פריט כדי להעביר את הכדור לכוכב, אל תשכח מכוח המשיכה.
משחק הרכבה
לחץ, סובב ושחרר חלקי פאזל כדי לפתור את הפאזל מבוסס HTML5 זה.
חידה שקופית
החלק אל הניצחון, עוד משחק HTML5 שנבנה כדי לסחוט את מיץ המוח שלך.
אותו משחק
הסר קבוצה מסוימת כדי לזכות בקבוצה אחרת באותו צבע ובסופו של דבר תוענק לך ניצחון.
טטריס
אחד המשחק הקלאסי ביותר שהוחזר לחיים על ידי HTML5.
טורוס
עוד משחק טטריס בגרסת פסאודו תלת מימד.
הטטריס לא הולך, אני שם שני חלקים ועומד, אבל השאר מאוד שפעים מגניבים
אני אוהב את הדף הזה ... למעט המשחק הראשון. אני אוהב אותך פראן =)
ביי נשיקה לעולם toooodooooooo
מדהים, מרהיב. אני לא מאמין עד כמה פיתוח אתרים הגיע!
אני לא יודע למה משייכים את המשאבים האלה ל- HTML5, זה Javascript טהור, לפני עליית פלאש, עם Javascript ניתן היה לעשות את כל הדברים האלה, היה מחקר בברצלונה שגרם לכמה אתרים שבאותה תקופה נשפו לי את הראש, הכל בכתב javascript כל כך הרבה שלמדתי מהם ועיצבתי זוג עם כדורים מקפצים והכל, איבדתי אותם לחלוטין ועדיין מתחרט. אני לא זוכר את שם הסטודיו זה היה משהו כמוך 2 או 2 אתה שהיה בשנת 2 בערך.
ג'ו וגה ... זה מראה שאין לך מושג מזוין של HTML5 ... .lol
אולי אין לך שום רעיון HTML5 מדמם, זה נכון, אבל אתה מבלבל בין התרנגול ללול התרנגולות ולא מבדיל שפה מסביבה. אני מאתגר אותך להכין דוגמה כמו אלה בלי להשתמש ב- Javascript, רק עם html5, ותבין למה התכוונתי בפוסט שמחקתי. יתרה מכך, בחנתי את קוד המקור של הדוגמאות ויש כמה שניתן לעשות בקלות מבלי להרכיב אותו ב- html5.
ש- html5 מביא שיפורים רבים ודברים שמקלים הרבה זה נכון, אבל זרי הדפנה של הדבר הפנטסטי שמוצג בדף זה הם Javascript.
אני מעוניין לערוך מצגות מהסוג הזה ... יש לך הדרכה או דף עם משאבים ??? תודה!!!