אנשים שעובדים ב עיצוב אתרים התעשייה משווה פיתוח אתרים חזיתיים לשרפרף בעל שלוש רגליים. שלוש הרגליים הללו - שלוש שכבות פיתוח האינטרנט - כוללות את המבנה, הסגנון וההתנהגויות של אתר.
מדוע כדאי להפריד בין השכבות?
כשאתה יוצר דף אינטרנט, המבנה שלו צריך להיות מועבר ל- HTML שלך, סגנונות חזותיים ל- CSS, והתנהגויות לתסריטים. חלק מהיתרונות בהפרדת השכבות הם:
- משאבים משותפים: כאשר אתה כותב קובץ CSS או JavaScript חיצוני, כל עמוד באתר יכול להשתמש בקובץ זה. אם אתה צריך לבצע שינוי בקובץ זה, אולי ל לעדכן כמה סגנונות טיפוגרפיים באתר, כל עמוד המשתמש בגליון סגנון זה יקבל את השינוי. אין צורך לערוך כל עמוד באתר בנפרד, מה שיכול להיות התחייבות מפרכת לאתר גדול.
- הורדות מהירות יותר: לאחר הורדת הסקריפט או גיליון הסגנונות על ידי הלקוח בפעם הראשונה, הוא נשמר במטמון באמצעות דפדפן האינטרנט. מכיוון שמשאבים משותפים אלה כלולים כעת ב מטמון הדפדפן, דפים אחרים שמתבקשים בדפדפן נטענים מהר יותר, מה שמשפר את מהירות העמוד ואת הביצועים הכוללים.
- צוותים מרובי אנשים: אם יש לך יותר מאדם אחד שעובד באתר בו זמנית, השתמש במערכות בקרת גרסאות המאפשרות לבצע צ'ק-אין והחוצה של קבצים כדי להבטיח שכולם עובדים עם הגרסאות האחרונות. הרבה יותר קשה לעשות תהליך זה אם סגנונות והתנהגויות משולבים במסמכי מבנה.
- קידום אתרים: אתר שמדגים הפרדה ברורה של סגנון ומבנה עשוי להניב ביצועים טובים יותר עבור מנועי החיפוש מכיוון שהם יכול לסרוק תוכן זה בצורה יעילה יותר ולהבין את הדף מבלי להיתקע בסגנון ויזואלי ובהתנהגות מֵידָע.
- נְגִישׁוּת: גיליונות סגנון חיצוניים וקבצי סקריפט נגישים יותר לאנשים ולדפדפנים. תוכנות כגון קוראי מסך יכולים לעבד תוכן משכבת המבנה ביתר קלות מבלי להתמודד עם סגנונות שהם ממילא לא יכולים להשתמש בהם.
- תאימות לאחור: אתר שתוכנן עם שכבות פיתוח נפרדות סביר יותר שיהיה תואם לאחור כי דפדפנים והתקנים שאינם יכולים להשתמש בסגנונות CSS מסוימים או שה JavaScript מושבת. עדיין יכולים להציג את HTML. לאחר מכן תוכל לשפר את האתר שלך בהדרגה עם תכונות עבור הדפדפנים התומכים בהם.
HTML: שכבת המבנה
המבנה או שכבת התוכן של דף אינטרנט הם הבסיס HTML קוד של דף זה. כשם שמסגרת הבית יוצרת בסיס חזק שעליו בנוי שאר הבית, בסיס יציב של HTML יוצר פלטפורמה עליה ניתן ליצור אתר.
שכבת המבנה היא המקום בו אתה מאחסן את כל התוכן שהלקוחות שלך רוצים לקרוא או להסתכל עליו. מבנה HTML יכול לכלול טקסט ותמונות, והוא כולל את קישורים שמבקרים ישתמשו בהם כדי לנווט ברחבי האתר. מידע זה מקודד בתואם לתקנים HTML5 ויכול לכלול טקסט, תמונות ומולטימדיה (וידאו, שמע וכו ').
כל היבט בתוכן האתר צריך להיות מיוצג בשכבת המבנה. הפרדה זו מאפשרת ללקוחות שה JavaScript מושבת או שאינם יכולים להציג גישה CSS לאתר כולו, אם לא לכל הפונקציונליות שלו.
CSS: שכבת הסגנונות
שכבה זו מכתיבה כיצד מסמך HTML מובנה ייראה למבקרי האתר ומוגדר על ידי CSS (גליונות סגנון מדורגים). קבצים אלה מכילים הוראות סגנוניות לאופן הצגת המסמך בדפדפן אינטרנט. שכבת הסגנון כוללת בדרך כלל שאילתות מדיה המשנים את תצוגת האתר על סמך גודל מסך ומכשיר.
כל הסגנונות החזותיים של אתר צריכים להיות ממוקמים בגיליון סגנונות חיצוני. אתה יכול להשתמש בגליונות סגנון מרובים, אך כל קובץ CSS דורש בקשת HTTP כדי להביא אותו, המשפיעים על ביצועי האתר.
JavaScript: שכבת ההתנהגות
שכבת ההתנהגות הופכת אתר לאינטראקטיבי, ומאפשר לדף להגיב לפעולות משתמש או לשנות על פי קבוצה של תנאים. JavaScript היא השפה הנפוצה ביותר עבור שכבת ההתנהגות, אך CGI ו PHP משמשים לעתים קרובות מאוד גם.
כאשר מפתחים מתייחסים לשכבת ההתנהגות, רובם מתכוונים לשכבה המופעלת ישירות בדפדפן האינטרנט. השתמש בשכבה זו כדי ליצור אינטראקציה ישירה עם מודל אובייקט המסמך. כותב HTML חוקי בשכבת התוכן חשוב לאינטראקציות של DOM בשכבת ההתנהגות. כאשר אתה בונה את שכבת ההתנהגות, עליך להשתמש בקובצי סקריפט חיצוניים, בדיוק כמו ב- CSS, כדי לייעל את המהירות והביצועים.