שימוש ב- HTML5 בד

אלמנט זה יש יתרונות על טכנולוגיה אחרת

HTML5 כולל אלמנט מרגש הנקרא CANVAS. יש לו הרבה שימושים, אבל כדי להשתמש בו אתה צריך ללמוד קצת JavaScript, HTML, ולפעמים CSS.

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

מה HTML5 בד משמש

אלמנט HTML5 CANVAS יכול לשמש עבור הרבה דברים בעבר, אתה צריך להשתמש ביישום מוטבע כמו Flash כדי ליצור:

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

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

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

על פי מפרט HTML5, רכיב CANVAS הוא:

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

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

ייתכן שאתה חושב שאנחנו כבר יכולים לעשות את זה עם פלאש, אבל יש שני הבדלים גדולים בין CANVAS ו- Flash:

• רכיב CANVAS מוטבע ישירות ב- HTML. הסקריפטים שמציירים עליו נמצאים ב- HTML או בקובץ חיצוני מקושר. משמעות הדבר היא שהרכיב CANVAS הוא חלק ממודל אובייקט המסמך, או DOM.
  • Flash הוא קובץ חיצוני מוטבע. היא משתמשת או EMBED או רכיב OBJECT להציג, ולא יכול לתקשר ישירות עם אלמנטים אחרים HTML. מכיוון שהרכיב CANVAS הוא חלק מה- DOM, הוא יכול לקיים אינטראקציה עם DOM בדרכים רבות.
  • לדוגמה, תוכל ליצור הנפשה שמשתנה כאשר חלק אחר של הדף מקיים אינטראקציה עם - כגון אלמנט טופס שמתמלא. עם Flash, הכי הרבה שאתה יכול לעשות הוא להתחיל את הסרט או האנימציה של Flash, אבל עם CANVAS אתה יכול ליצור אפקטים שונים, אפילו הוספת טקסט משדה הטופס לתוך האנימציה.
• רכיב CANVAS נתמך באופן מקורי על ידי דפדפני אינטרנט. כדי שמשתמשים באמת ישתמשו ב- Flash, הדפדפן שלהם חייב להתקין את הפלאגין. זה לעתים קרובות טרחה עבור רוב האנשים עקב מיושן התקנות פלאש או את העובדה כי מערכת ההפעלה שלהם פשוט לא תומך בו.
  • זה היה אמור להיות כי כל דפדפן היה plugin מותקן, אבל זה כבר לא המקרה, ורבים אפילו להסיר את plugin בשל קשיים. בנוסף, זה אפילו לא זמין על פלטפורמת iOS הפופולרי.

בד שימושי גם אם אתה אף פעם לא מתוכנן להשתמש פלאש

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

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

מתי לשקול להשתמש באלמנט בד

הקהל שלך צריך להיות השיקול הראשון שלך כאשר מחליטים אם להשתמש באלמנט CANVAS.

אם הקהל שלך משתמש בעיקר ב- Windows XP וב- IE 6, 7 או 8, אזי יצירת תכונת בד דינמית תהיה חסרת טעם מאחר שדפדפנים אלה אינם תומכים בה.

אם אתה בונה יישום שישמש במכונות Windows בלבד, ייתכן ש- Flash יהיה ההימור הטוב ביותר שלך. יישום לשימוש במחשבי Windows ו- Mac יכול להפיק תועלת מיישום Silverlight.

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

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

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

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

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