כל הדרכים (לאפיין) מובילות לרומא (דף HTML)

בכל פרוייקט אינטרנט ישנו תהליך של מעבר מהבנת הבקשה של הלקוח ליצירת דף (או דפי) HTML. לאחרונה נחתתי על כמה מאמרים שמתארים את התהליך הזה מזויות ראיה שונות, אז אקדיש לזה פוסט קצר.
המאמר הראשון והמקיף ביותר, הוא מדריך צעד-אחרי-צעד לתהליך הזה, כשהאפיון הוא קבצי PSD (פוטושופ). המאמר מתאר תהליך עיצוב של תבנית וורדפרס חדשה. מתחילים ב-4 PSD-ים, והמחבר מתאר שלב אחרי שלב איך הוא כתב את ה-HTML וה-CSS של כל דף. מעניין לראות ממה הוא בוחר להתחיל (בניית מבנה כללי לקבצים, הסתכלות כללית על מבנה האתר לפי ה-PSD), ואיך כל שלב מתבסס על השלב הקודם. המחבר גם מאפשר להוריד את קבצי ה-HTML וה-CSS של המדריך הזה. נראה שווה.
לפעמים הדרך ל-HTML עוברת דרך אב-טיפוס (prototype). למשל, אם אנחנו מתכננים מערכת – ולא רק אתר – עם פונקציונליות מורכבת. במקרה כזה, נרצה לראות את המימוש לפני שנממש אותו :-). אפשר למצוא ברשת הרבה דיונים על איך ליצור אבות-טיפוס – האם ליצור HTML כללי וגס, האם ליצור פלאש, האם להעזר באמצעים לא טכנולוגיים: דף ועפרון, או האם ליצור שלד של המערכת עצמה. כמובן שלכל טכניקת מימוש ישנם יתרונות וחסרונות. בסרטון הזה אפשר לראות מימוש של אופציית הדף והעפרון. הסרטון מראה אפליקציית דואל המצויירת על דף – הכפתורים, אזורי הקריאה, וכו’. איך משתמשים באב-טיפוס כזה? המפַתח מראה את אב-הטיפוס למשתמש. המשתמש לוחץ על כפתורים או אזורים בדף, והמפַתח מגיב בהתאם. אני חושבת שהסרטון מראה את זה בצורה מקסימה.
המאמר הזה (בעברית! הידד!) מציג קונספט לא מוכר באפיון: אפיון ע”י קומיקס. הרעיון הוא שקומיקס הוא כלי להעברת מסר פשוט, ולכן הוא מכריח את המשתמש בו לפשט את המסר שהוא רוצה להעביר. המאמר מתאר את התהליך של יצירת הקומיקס, לא מבחינה גרפית אלא מבחינה רעיונית: הגדרת המטרה, יצירת התסריט, ציור הריבועים. לי נראה ששימוש בקומיקס לא יכול להוות תחליף לאב-טיפוס כשמדובר במערכת מורכבת, אלא אם כן יוצרים קומיקס לכל תרחיש. נראה לי פשוט יותר להשתמש בו כשמדובר על תיאור תהליך קצר.
ויש גם כאלה שמשתמשים ב-PowerPoint לייצוג המערכת לפני שבונים אותה. המאמר מבית קופסאות וחיצים (BoxesAndArrows ) מאיר צד לא מוכר ב-PPT: האינטראקטיביות שלו. ב-PowerPoint אפשר ליצור קישורים, כפתורים, תמונות לחיצות, לסמלץ כפתור “חזרה”, ליצור אפקט של מעבר עכבר. המאמר מכיל עוד טיפים מצויינים לדברים שלא חשבנו שאפשר לעשות ב-PPT (למשל סרגל ניווט). יש גם דוגמה ניתנת להורדה. שווה קריאה – PPT הוא כלי שנמצא כמעט על כל מחשב, ומתברר שהוא צופן בחובו הפתעות נעימות רבות.
הדבר האחרון שנתקלתי בו הוא כלי חינמי ייעודי לייצור אב-טיפוס. (הסתייגות יחידה שלי: אני לא יכולה להמליץ עליו כי לא ניסיתי אותו, אבל הבלוג שממליץ עליו הוא בלוג שאני סומכת עליו לאור עניינים קודמים שמצאתי שם). אפשר להתקין אותו כתוסף לפיירפוקס, או כאפליקציה בלתי תלויה.
בקיצור, כאמור, ישנן דרכים רבות ליצור אפיון ויזואלי של אתר/מערכת.רחלי שלנו כתבה מאמר בבלוג של הצוות המסכם דיון שהתרחש לפני מספר חודשים ברשת לגבי השאלה האם בכלל צריך אפיון ויזואלי (במקרה הוא דיברו על PSD) לפני שמתחילים לעבוד. רחלי מצטטת כמה בלוגים שונים המביעים עמדה בנושא, ומוסיפה את הפן האישי שלה. שווה קריאה.