הדרך מהסקיצה של המעצב אל אתר אינטרנט גמור היא ארוכה, מתישה ומצריכה מעורבות של לא מעט כלים – במיוחד עבור אלו מאיתנו שבחרו לחיות תחת כנפי הקוד הפתוח. אבל יש לא מעט קיצורי דרך או כלים שנועדו להקל על העבודה ושימוש נכון בהם יכול לחסוך זמן ותסכול רבים בזמן הפיתוח או אחריו.
לורם איפסום
כשאני בונה אתר, השלב הראשון הוא ליצר את השלד עם התוכן. כשהתחלתי, פשוט היכיתי את המקלדת והפיסקאות שלי היו מופת של kjsfdfdskjl sfrfsihn רנדומלי. ההכאה הזו היא ארוכה, מעיקה קצת והגרוע מכל, היא לרוב אינה מספיק מגוונת.
הלורם איפסום הראשון שאנחנו מכירים מגיע קרוב לוודאי מהוורד – כלי המיצר שורות על שורות של המשפט "דג סקרן שט לו בים זך ולפתע מצא חבורה נחמדה". זה נחמד כממלא טקסט, אבל כשצריכים לבדוק כיצד הטקסט יושב באתר אינטרנט, כיצד נראות פיסקאות ופיסוק אנחנו צריכים מחולל טקסט קצת יותר רציני ובשביל זה יש את מחוללי הלורם איפסום.
ספרייטס
אתה מתחיל לעבוד על השלד הכללי כשפתאום אתה פותח את ה PSD ומגלה את כמות הפינות המעוגלות, האיקונים והרקעים של הכפתורים שצריכים לשלב ב CSS. כל קובץ שכזה הוא תמונה בפני עצמה וכל אחת מצריכה פתיחה של חיבור אל השרת ומשפיעה על קצב הטעינה. הפיתרון – sprites – קובץ אחד המאחד בתוכו את כל התמונות הקטנות וקטע CSS תואם המאפשר התיחסות למקטע ספציפי בתוך העמוד.
יש שתי אפשרויות, הראשונה – להתחיל מראש עם הספריטס. הכלי הזה ייצר עבורכם ספריטס מקובץ זיפ המכיל את כל התמונות הנדרשות.
אופציה שניה – לאחר שמסיימים לעבוד על האתר, להשתמש בישומון של SpriteMe כדי לייצר את הקבצים הנדרשים מתוך העמוד הבנוי.
איך זה נראה
אני מפתח על לינוקס, זה אומר שאין לי אקספלורר בצורה נגישה. פעם עוד היה סקריפט שהתקין את IE6 על wine אבל האינטרנט זז רבות מאז וגם ככה זה לא ממש עבד טוב. אבל, גם אלו מאיתנו שעובדים על חלונות ומותקן אצלהם אקספלורר לא פעם ולא פעמיים נתקלו ב"אבל זה לא נראה טוב באקספלורר 6". אז הכי קל ופשוט להגיד שאין תמיכה באקספלורר 6, אבל אם אתם בכל זאת זקוקים לגירסה קודמת (או אפילו פיירפוקס 2.5 לצורך העניין) הנה אתר שיאפשר לכם לקבל צילומי מסך של האתרים שלכם בכל הדפדפנים הנפוצים לדורותיהם.
w3c Validator
בעמודים פשוטים רוב הדפדפנים יסלחו לכם אפילו על שגיאות קריטיות יחסית בקוד, אבל ברגע שמתחילים להכניס JS אל תוך העמוד מסמך לא תקני יכול לתסכל רבות בניסיון להבין בדיוק איפה הבעיה. כלי הואלידציה של ה W3c יספר לכם בדיוק מה אתם עושים לא נכון ואיפה.
כלי מצוין נוסף מבית W3C הוא הואלידאטור לCSS שייצר לכם בסוף התהליך קבצי CSS תקינים. רק כדאי לשים לב כי כללי CSS יחודיים של דפדפנים יוכרזו כלא תקינים, כך למשל האפשרות webkit-border-radius שאחראית על פינות מעוגלות בכרום וספארי יוגדר כשגיאה.
דחיסת קבצים
הסקריפט הזה נועד במקור לדחיסה של קבצי JS, אבל מהניסיון שלי הוא עושה עבודה לא רעה בכלל גם עם קבצי CSS. הסקריפט מנקה רווחים מיותרים ושבירות שורה ומצמצם בצורה ניכרת את משקל הקובץ. יתרון אחר (בעקיפין) של הסקריפט הזה הוא שברגע שדוחסים את הקבצים הופכים אותו ללא קריא בעין אנושית, זה אומר שהסיכוי שמישהו יגנוב את הסקריפט שלכם כ"עזר לימודי" קטן יותר.
הסדר של הכלים פורסם לפי הסדר שבו אני עובד איתו, לדעתי אין שום טעם לייצר ספרייטס לפני שהאתר גמור כי התמונות יכולות להשתנות במהלך העבודה. מאותה סיבה בדיוק אין שום טעם לדחוס קובץ CSS או JS בזמן שעובדים עליהם. ואם כבר דחיסה, למרות שמדובר פה בקוד פתוח והכל הדחיסה לא באמת מאפשרת עבודה על הקוד בשלב מאוחר יותר, לכן, מן הראוי שכשאתם מוסרים את הקוד ללקוח תתנו לו גם את הקוד הלא מכווץ.
כתיבת תגובה