top of page

כיצד בונים אתר - חיתוך PSD ל HTML

עודכן: 28 בפבר׳ 2019




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

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


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

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


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


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


תהליך החיתוך כולל בתוכו את חיתוך כל אלמנט וכפתור בנפרד כאשר את כל האלמנטים הללו בסופו של דבר קובע כלי ה CSS, שהם ראשי תיבות של Cascading Style Sheet, זהו למעשה קובץ הגדרות עיצוב חיצוני אשר אפשרי שגם כל האתר יקבל ממנו את ההגדרות, שהוא כלי יעיל וחשוב ומאפשר גם לבצע שינויים עיצובים באתר ומכיל את כל השינויים על כל האתר בבת אחת.


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

חשוב תמיד לבצע וולידציה של החיתוך בכלים אשר ה w3c מציע לנו.

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

Comentários


bottom of page