לאחר אישור עיצוב אתר על ידי הלקוח, יש צורך להמיר את העמודים המעוצבים מתוכנת פוטושופ לפורמט HTML תקני שיהיה קריא על ידי דפדפני אינטרנט. תהליך זה נקרא בשמות רבים (חיתוך אתר, פירוק אתר, גזירת אתר) ובאנגלית נהוג לכנות אותו PSD to HTML.
מה זה חיתוך אתרים?
HTML הינה שפת תגיות (MARKUP) עליה מבוסס תהליך עיצוב אתרים. זוהי שפה מוסכמת של עולם האינטרנט, לפיה בנויים אתרי אינטרנט. בשל מגוון הדפדפנים הקיים בשוק (אקספלורר, פיירפוקס, ספראי ועוד), נוצרו סטיות בתקן ה HTML, ולכל דפדפן דרך קצת שונה מהאחר בהבנת תגיות ה HTML. אי לכך, המשימה הקשה בתהליך חיתוך אתר ל HTML היא לדאוג לכך שתהיה תאימות לדפדפנים, ושהאתר יוצג באופן זהה בכל הדפדפנים ועל כל מערכות ההפעלה! על מנת להגיע לתוצאות שכאלה, נדרש בתהליך פירוק אתר להשתמש בתכסיסים שונים ומגוונים (hacks) על מנת להתגבר על המכשולים הרבים שמציגים הדפדפנים השונים בתהליך בניית אתר.
ישנם מספר תקנים אותם הציב ה W3C, איגוד האינטרנט העולמי, לאופן שבו עמוד HTML אמור להיכתב. אני מקפידה על תקן HTML 4.01 STRICT, הנחשב לתקן מחמיר ביותר. חיתוך אתר בתקן זה מבטיח את תקינותו בכל הדפדפנים, וחשוב מאד גם לתהליך קידום אתרים במנועי חיפוש.
עיצוב אתרים בתקן זה מבוסס על קובץ הנקרא CSS, שהם ראשי תיבות של Cascading Style Sheets. זהו קובץ הגדרות עיצוב עליו נשען עיצוב אתר, ובו מוגדרים הגופנים השונים על משקלם וגודלם, צבעים באתר, גבולות, מרווחים, תמונות רקע ועוד. שימוש בקובץ CSS מפריד בין האלמנטים העיצוביים של האתר לבין תגיות ה HTML (ה MARKUP) של האתר, ונחשב לחובה מקצועית בתהליך עיצוב אתרים.
בתהליך PSD to HTML, כל אלמנט בעיצוב נגזר למעשה מתוך תוכנת פוטושופ, ומוצא את מקומו באתר מחדש תחת הגדרות CSS. אלמנטים רבים מוגדרים בתהליך חיתוך אתר בקובץ ה CSS כצבעי רקע וגבולות של האלמנטים בעמוד, במקום כתמונות (JPG או GIF), אשר שוקלים הרבה יותר ומאיטים את טעינת האתר.
תהליך PSD to HTML מקצועי מוביל לאתר מקצועי, הנהנה מוולידציה של מנועי חיפוש. וולידציה זו היא אישור לתקינות הקוד בהתאם לתקן הנבחר לאתר. איגוד האינטרנט העולמי מאפשר לבדוק את תקינות חיתוך אתרים במנוע ייחודי למטרה זו בכתובת: http://validator.w3.org/. במנוע זה ניתן להזין את כתובת העמוד אותו מעוניינים לבדוק, ולקבל חיווי (רשימת שגיאות או חותמת אישור במקרה שאין בעיות) לאתר. וולידציה זו חשובה לא רק להתאמת האתר לדפדפנים השונים, אלא לדירוג שלו במנועי חיפוש שונים.