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