תיכנות ניוזלטר [טכני]

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

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

התחלתי לתכנת את הניוזלטר בעצמי, ראיתי שזה לא הולך לי טוב, מצאתי מתכנת אמיתי שיעשה את העבודה. גם שם היו בעיות (דווקא בג'ימייל!) ואז לקחתי על עצמי בחזרה את המשימה.

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

את הקוד כתבתי "ביד". לא נעזרתי בתוכנות לבניית דפים כגון Dreamweaver  או Microsoft Expression. עד שהייתי מתקין ולומד את התוכנות כבר הייתי צריך לגמור את הפרוייקט. כבר שנים שאני משתמש בעורך UltraEdit ואני רגיל אליו.

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

ניוזלטר מופץ באימייל ולא בהכרח מוצג בדפדפן.

לדוגמא, מאז גירסת אופיס 2007, כתיבה והצגת האימיילים באאוטלוק מתבצעת על ידי המנוע של Word. בדיוק מה ששמעתם. הנה דף באתר מיקרוסופט שמפרט את תכונות ה HTML של Word.

קוד ה HTML של הניוזלטר עובר בדרך עיבודים ושינויים.

ראשית, הקוד עובר שינויים במערכת המשלוח. במקרה שלנו, ActiveTrail. עורך הניוזלטר שלהם "מתקן" את הקוד שמדביקים בתוכו.

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

התדרדות נעימה

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

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

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

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

עקרונות התכנות

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

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

באימייל אין אפשרות להגדיר סגנונות בקוד נפרד. כל הסגנונות צריכים להיות כתובים Inline.

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

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

בדיקות

בדיקת ניוזלטר היא עבודה מתישה ובייחוד בדיקה של תצוגה נכונה ב Word. כאן נתקלתי בבעיה קשה.

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

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

עצבים!

בסוף מצאתי פיתרון.

יש אפשרות לפתוח  ב Word מסמך לקריאה בלבד אם הוא מסמך HTML שמוגש ב http.

הפעלתי את שרת האינטרנט על המחשב שלי – XAMPP

שמתי את קובץ הניוזלטר בתיקיה htdocs

בשורת הפקודה פתחתי את הדף לקריאה בלבד על ידי

"c:\Program Files\Microsoft Office\Office14\winword.exe" /h http://localhost/newsletter/newsletter.html

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

למרות העצבים על מיקרוסופט (שאותה אוהבים לשנוא), גוגל מעצבנים אותי יותר. ג'ימייל מציג את הניוזלטר באופן מעוות שלא הצלחתי להגבר עליו. הדוגמא הבולטת היא צבע טקסט "רגיל" מקושר. למרות שכתוב שם "שחור", הטקסט הוא כחול. ג'ימייל פשוט מוחק את הגדרת צבע הטקסט.

לסיכום

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

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

אני גם מקווה שבזכותו אוכל לקבל משובים שיעזרו לי לשפר את הגליונות הבאים.

ואחרי כל ההסברים, איך הוא נראה? ככה.