בניית מדריך אפליקציה אינטראקטיבי
צוותי תמיכה מתקשים לעיתים קרובות עם אפליקציות שהם מעולם לא התקינו.
קובץ PDF עם צילומי מסך הוא הפתרון הסטנדרטי. רוב האנשים לא קוראים PDF. רציתי לבנות משהו טוב יותר. רציתי מדריך שמרגיש כמו האפליקציה האמיתית. רואים את מסך הבית, לוחצים על כפתור, והמסך הבא מופיע.
בניתי מדריך אינטראקטיבי באמצעות צילומי מסך אמיתיים ו-hotspots ניתנים ללחיצה.
איך זה עובד
השתמשתי ב-Firebase Storage עבור תמונות וב-vanilla JavaScript עבור הלוגיקה. ללא ספריות חיצוניות.
- כל מסך הוא תמונה אחת מלאה.
- אני מציב מלבנים בלתי נראים, הנקראים hotspots, מעל התמונה.
- ה-hotspots הללו משתמשים באחוזים במקום בפיקסלים. זה שומר עליהם מיושרים כאשר גודל החלון משתנה.
- מכונת מצבים (state machine) פשוטה מטפלת בניווט. לכל מסך יש ID, תמונה ורשימה של hotspots.
העורך
מדידת קואורדינטות ידנית היא תהליך איטי. בניתי עורך HTML עצמאי כדי להאיץ את התהליך.
- העלאת צילום מסך.
- גרירת העכבר כדי לצייר hotspot.
- קישור ה-hotspot למסך יעד.
- ייצוא הקוד ישירות.
בחירות עיצוב
לא לכל מסך יש ניווט מלא. כדי למנוע בלבול, הוספתי זוהר כחול פועם (pulsing blue glow) לאזורים הניתנים ללחיצה. זה מראה למשתמשים בדיוק איפה הם יכולים ללחוץ.
לקחים טכניים מרכזיים
- Firebase Storage: אל תבנו כתובות URL ידנית. השתמשו במתודת ה-SDK
getDownloadURL. זה כולל את ה-auth token הדרוש כדי לעקוף את כללי האבטחה. - CSS Flexbox: אם משתמשים ב-
flex: 1בפריסת עמודה (column layout), לאלמנט האב חייב להיות גובה מפורש. הגדירוmin-height: 0על האלמנט הבן כדי למנוע חריגה (overflow). - ביצועים: קריאה ל-Firebase בכל לחיצה מוסיפה השהיה (lag). יישמתי מטמון בזיכרון (in-memory cache) וטען מראש את כל התמונות כאשר ה-modal נפתח. זה הופך את הניווט למיידי.
- Scaling: השתמשו במאפיין ה-CSS
transform: scale(). זה מבטיח שהתמונה וה-hotspots יישארו מיושרים בצורה מושלמת ללא קשר לגודל המסך.
התוצאה
- 20 מסכים עם ניווט שנראה כמו טלפון אמיתי.
- 52 hotspots עם רמזים ויזואליים.
- טעינה מיידית באמצעות טעינה מראש (preloading) ושימוש במטמון (caching).
- עיצוב רספונסיבי שמתאים לכל גודל של modal.