מבוא
ב-7 באוגוסט 2010, deviantART חגגה 10 שנים. חגגנו את יום ההולדת שלנו בהשקת כלי ציור ב-HTML5 בשם deviantART muro. הכלי יכול לשמש כאפליקציית אינטרנט עצמאית וגם ככלי ציור קל להוספת תמונות לתגובות בפורום.
קהילת deviantART קיבלה את פני כלי השרטוט החדש בהתלהבות רבה, והכלי עצמו רואה כעת תנועה רבה כמו נכסי אינטרנט בגודל סביר. מאז ההשקה, שרטוט חדש נשלח באמצעות deviantART muro בערך פעם ב-5 שניות. אלה רק מספרי השרטוטים שהושלמו; שרטוטים רבים נוספים התחילו ולא נשמרו.
המאמר הבא מספק רקע מסוים על אופן השימוש ב-HTML5, על הסיבה שבגללה בחרנו להשתמש בטכנולוגיות שעשינו, ומה שגיליתי במהלך כתיבת אחד מיישומי HTML5 הראשונים בתפוצה רחבה לאתר גדול.
הרקע שלי
בסוף 2005 הייתי אחד מהמפתחים שאחראים לכלי השרטוט ששימש את Draw here. הכלי היה כלי 'גרפיטי באינטרנט' שהופעל באמצעות סימניה ברשת. הוא שימש לציור תמונות בדפי אינטרנט. הכלי 'צייר' נוצר לראשונה באמצעות SVG (גרסת הבטא של Firefox 1.5 הושקה ממש עכשיו; זה אחד מהדפדפנים הראשונים שתמכו ב-SVG).
ב-Internet Explorer יצרנו SVG ברקע, אבל עבדנו את השרטוט באמצעות VML. WebKit לא תמכה ב-SVG באותו זמן, ולכן העברתי את הקוד שלנו כדי לעבד את ה-SVG באמצעות קנבס (שהייתה טכנולוגיה חדשה שאפשר לראות רק ב-WebKit באותו זמן). בשלב מסוים, אפילו יצרתי יציאה כדי שאפשר יהיה לעבד את קוד ה-SVG בדפדפנים ישנים יותר באמצעות קבוצה של רכיבי div שהודבקו יחד. (כמובן, זו הייתה בדיחה רבה כדי להראות שאפשר לבצע את הפעולה הזו והשימוש בה היה אטי מאוד).
בשיא זמנו, השתמשנו ב'צייר' כדי ליצור כ-100 שרטוטים ביום. היא הייתה מלאה מספיק כדי לקרוא לה יותר מניסוי, למרות שלא היה בה הליטוש הסופי של אפליקציית אינטרנט גדולה. באמצע 2006 הפרויקט ננטש, אך האתר עדיין מתריע כיום – בעיקר כדי חיוך רחב.
טכנולוגיות שנעשה בהן שימוש ב-deviantART Muro
מכיוון שהשתמשתי בטכנולוגיות HTML5 שונות בתחילת הדרך, התבקשתי להיות המפתח הראשי ב-deviantART Muro. כל מי שקורא את המאמר הזה ודאי מבין למה החלטנו לעבור ל-HTML5, ולא לטכנולוגיה מבוססת-פלאגין כמו Silverlight או Flash. רצינו משהו שיהיה חזק וגם משהו שמשתמש בסטנדרטים פתוחים.
בחירה בין לוח הציור לבין SVG
החלטנו ליצור את שכבת השרטוט באמצעות קנבס. יש אנשים ששואלים לפעמים מתי כדאי להשתמש בלוח הציור ומתי כדאי להשתמש ב-SVG. יש הרבה חפיפה במה שאפשר לעשות עם שתי הטכנולוגיות – כפי שהוכיחו 'הציור כאן', ניתן להשתמש בשתי הטכנולוגיות כדי ליצור אפליקציה לשרטוט.
מצאתי שפורמט SVG הוא מעולה אם רוצים לשמור נקודות אחיזה לאובייקטים שציירתם. לדוגמה, אם אתם רוצים שהמשתמש יוכל לשרטט קו, ולאחר מכן לגרור ביטים של הקו כדי לשנות את הצורה שלו, שימוש ב-SVG יהיה טריוויאלי למדי. אבל אותו הדבר מאוד לא נוח כשמשתמשים בבד קנבס.
כשאתם משתמשים בבד קנבס, אתם מוסיפים חומר גמיש לקנבס ואז שוכחים ממנו. קנבס ריק ודף שציירנו עליו במשך שעה פועלים בדיוק כמו הקוד, וטביעת הרגל שלהם זהה לזכרון. אמנם תוכנת ציור רסטר בדרך כלל פועלת ממש טוב עם האש ושוכחת את הטכנולוגיה, אבל היא מקשה על דברים מסוימים. לדוגמה, יצירה של פונקציית ביטול מהיר הרבה יותר קשה בבד קנבס מאשר ב-SVG. בפורמט SVG אפשר פשוט לשמור את נקודת האחיזה לקווים האחרונים שהצבתם, וביטול הפעולה פשוט צריך פשוט להסיר את האובייקטים האלה. אחרי שנצבע על קו בד ציור, לא תוכלו לדעת מה היה מתחתיו, ולכן הסרת הקו מצריכה שרטוט מחדש של האזור שבו הוא היה.
אחרי שהחלטנו להשתמש ב-HTML5 לקנבס, החלטנו להשתמש פה ושם בדברים טובים אחרים של HTML5. דוגמה לדרך שבה השתמשנו ב-localStorage כדי לעקוב אחרי הגדרות המברשת של המשתמש. כך, ברגע שהמכחולים השונים יוגדרו בדיוק כמו שהם אוהבים, הם יוכלו לחזור להגדרות האלה בפעם הבאה שישתמשו בכלי שלנו. localStorage פירושו שאנחנו לא צריכים להשתמש בקובץ ה-cookie שלנו או לבצע נסיעות בשרת כדי לקבל את ההעדפות האלה.
שימוש בלוח הציור
בחמש השנים האחרונות, העיצוב של לוח הציור השתפר מאוד. באמצעות 'ציירו כאן', למעשה לא פרסמנו את היציאה של הקנבס כי הביצועים לא היו טובים. עכשיו, לדעתי, אפשר לומר בוודאות שהביצועים שלה טובים יותר ממה שציפיתם. ברוב המקרים, ניקוי חלק גדול משטח הציור וציור מחדש של צורות מורכבות מתבצעות במהירויות גבוהות יותר מאשר הדרך האנושית. הדבר היחיד שלפעמים שלפעמים נראה איטי מדי הוא השימוש ב-getImageData() כדי לדגום פיקסלים. מהירות הפעולה תלויה כמובן בגודל הקנבס, אבל בבד קנבס גדול, ביצוע getImageData() בזמן שגוי עשוי להימשך זמן רב מספיק כך שהמשתמש ירגיש שהאפליקציה מגיבה לאט.
אחרי שקראתי כמה מדריכים על קנבס, בהתחלה הרגשתי שזה פריט כבד שצריך להשתמש בו בכמות מצומצמת, אולי פעם או פעמיים בדף. אני לא יודע אם כולם מבינים את זה, אבל כן, אז השתמשתי בזה בצמצום כשהתחלנו לתכנת משחקי deviantART Muro. אבל אחרי לא מעט זמן, גיליתי שיש הרבה מקומות קטנים שבהם קנבס יכול לחסוך לכם הרבה מאמץ. לדוגמה, בדוגמאות של האפליקציה שלנו צריך להיות בוחר צבעים שכולל שני משולשים חופפים המציגים צבע ראשי וצבע משני:
האינסטינקט הראשון שלי היה להתחיל לחשוב על דרך ליצור את היצירתיות הקטנה הזו בממשק המשתמש באמצעות HTML ו-CSS מסורתיים. אנשים שמתמחים בפריצת CSS יציינו איך אפשר לעשות את כל זה באמצעות CSS, אבל צורת המשולש של שני החלקים שמשנים את הצבע לא מובנת כל כך.
כשחשבתי להשתמש רק באזור העריכה, יצרתי את הווידג'ט עם רכיב DOM בודד וכמה שורות של JavaScript. ה-deviantART Muro משתמש בצמתים של בד קנבס בכל מקום. כל שכבה היא בד ציור, ושינוי סדר השכבות הוא רק עניין של מעבר מ-z-index. לוח 'ניווט' לשינוי מרחק התצוגה, שבו מוצגת תצוגה מוקטנת של אזור השרטוט, הוא סתם סביבת עבודה נוספת שקוראת לפעמים ל-GuoutImage() באמצעות שכבות הציור כתמונות מקור. אפילו הסמן של אזור השרטוט (עיגול בעל שני גוונים שמתאים את הגודל בהתאם לגודל המברשת ולמרחק התצוגה) הוא קנבס שצף מתחת לעכבר.
הסיבה לכך שהקנבנו אותך יותר מאשר בטכנולוגיות HTML5 אחרות היא שספריית ExplorerCanvas של Google מאפשרת לדמות בד קנבס ב-Internet Explorer. זה מוביל אותי לקטע הבא.
Internet Explorer (IE)
הסיבה העיקרית לכך שיותר אתרים גדולים עדיין לא משתמשים ב-HTML5 היא שהם לא רוצים לאבד את המשתמשים שלהם ב-Internet Explorer. אני בטוח שהשאלה הראשונה שעלה בראש רוב המפתחים כשהם שומעים ש-deviantART יצר יישום ציור HTML5 היא 'מה נעשה לגבי IE?'
בהתחלה החלטנו לעשות כמיטב יכולתנו כשמדובר בפיתוח של דברים ב-Internet Explorer, אבל באמצעות שימוש בסגנון של פיתוח אתרים עם המכנה המשותף הנמוך ביותר. מכיוון שקהילת האינטרנט נקטה גישה שלפיה אתר לא יכול לפעול עד שהוא נראה זהה בכל דפדפן ידוע, המשתמשים לא יכולים לדעת מתי הדפדפן שלהם חסר. אצל המשתמש הממוצע, בעיות המהירות הן הגורם לבעיות בחיבור לאינטרנט, וכל דף מוצג פחות או יותר אותו הדבר. לכן הם מחליטים לבחור בדפדפן המועדף עליהם על סמך פרטים קטנים ושרירותיים בממשק המשתמש, כמו הצבע של לחצן 'הקודם'.
החלטנו שניצור כל תכונה מגניבה שעולה בחשבנו באמצעות מפרט ה-HTML5, וננסה לגרום לה לפעול ב-Internet Explorer, ואם היא לא תצליח, פשוט נקפץ חלון קופץ שיסביר שהתכונה לא זמינה מפני שהדפדפן שלהם עדיין לא הטמיע תקן אינטרנט.
בתחילה ניסינו לגרום לדברים לעבוד עם ExplorerCanvas של Google (exCanvas). למרבה הפלא, הוא טוב בחיקוי של קנבס לרוב הדברים. אבל יש לה חיסרון אחד. כל שרטוט שמתבצע באזור העריכה הוא אובייקט DOM בתרגום VML הבסיסי. זה בסדר בשביל רוב הפריטים שמנסים להשתמש בהדפסה על קנבס, אבל חלק מהמכחולים הדטורטיביים של muro יוצרים צורות משכבות רבות של משיכות ביחד. כש-Internet Explorer מתמודד עם VML שמכיל אלפי צמתים – גם במחשב מהיר – הוא נופל ומת. לכן, ברבות מקריאות השרטוט, נאלצנו להיכנס ולקודד ב-VML בפועל, ולהשתמש בטריקים שבהם משרשרים את הצמתים ומשתמשים בפקודת ההעברה כדי לציין איפה אמורים להיות פערים. חלק גדול מהפקדים ומהדברים הקטנים בממשק משתמשים בתג בד קנבס, כי השימושים הקטנים והקטנים האלה עבדו היטב עם exCanvas.
נוסף לביצוע פעולות מסוימות עם exCanvas, הצענו למשתמשים שיוכלו להמשיך להשתמש בגרסת Internet Explorer שלהם אם התקינו את הפלאגין של Google Chrome Frame. Google Chrome Frame הוא פלאגין שמטמיע את מנוע העיבוד של Google Chrome ב-Internet Explorer. מבחינת המשתמש, הוא עדיין משתמש בדפדפן שהוא מכיר. אבל מתחת לכריכה, הדף שלנו מעובד באמצעות יכולות ה-HTML5 של Chrome ו-JavaScript מהיר יותר.
ידעתי שצריך שיהיה קל להעביר דברים לעבוד עם Chrome Frame, אבל לא הבנתי עד כמה פשוט. פשוט מוסיפים מטא תג נוסף ו... וזהו, הכול מתחיל לעבוד ב-IE.
סיכום
שמחתי לעבוד עם הטכנולוגיות החדשות במפרט ה-HTML5, והייתי יכול לומר שכל מה שהשתמשתי בו בהחלט מוכן לפריים טיים. גם אם אתם צריכים שדברים יפעלו בצורה מושלמת ב-IE, יש כמות מפתיעה של דברים שאפשר לעשות בשילוב עם בד קנבס ו-exCanvas. מפתיע גם לכתוב שכבת תרגום בין SVG ל-VML. ברגע שמתחילים להשתמש בטכנולוגיה, זה סוג של כניסה לעולם חדש לגמרי.
קובצי עזר
- deviantART Muro
- הפורום של deviantART שבו אתה יכול לצייר (נדרשת התחברות)
- ExplorerCanvas
- Google Chrome Frame