שלוש שכבות של עיצוב אתרים

למה כל אתרי האינטרנט בנויים בשילוב של מבנה, סגנון והתנהגויות

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

שלוש שכבות של פיתוח אינטרנט

• מבנה או שכבת תוכן
  • המבנה או שכבת התוכן של דף אינטרנט הוא קוד ה- HTML הבסיסי של הדף. כמו מסגרת של בית יוצר בסיס חזק שעליו בנויים שאר הבית, כך גם בסיס מוצק של HTML יוצר פלטפורמה שעליה ניתן ליצור אתר. מבנה HTML יכול להכיל טקסט או תמונות והוא כולל את הקישורים כי המבקרים ישתמשו כדי לנווט ברחבי האתר.
• סגנון או שכבת המצגת
  • שכבת הסגנון או המצגת מכתיבה כיצד מסמך HTML מובנה ייראה למבקרים באתר. שכבה זו מוגדרת על ידי CSS (גליונות סגנון מדורגים). קבצים אלה מכילים סגנונות המציינים את אופן הצגת המסמך בדפדפן אינטרנט. ברשת האינטרנט של היום, שכבת הסגנון יכולה לכלול גם שאילתות מדיה שיכולות לשנות את תצוגת האתר בהתאם לגדלים ולמכשירים שונים .
• התנהגות
  • שכבת ההתנהגות היא שכבת דף אינטרנט שיכול להגיב לפעולות משתמש שונות או לבצע שינויים בדף בהתבסס על קבוצת תנאים. עבור רוב דפי האינטרנט, רמת ההתנהגות תהיה האינטראקציות של JavaScript בדף.

למה אתה צריך להפריד את השכבות?

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

חלק מהיתרונות של הפרדת השכבות הן:

• משאבים משותפים
  • כאשר אתה כותב קובץ CSS חיצוני או קובץ JavaScript, תוכל להשתמש בקובץ זה בכל דף באתר שלך. אם אתה צריך לעשות שינוי לקובץ זה, אולי כדי לעדכן כמה סגנונות טיפוגרפיות באתר, כל דף המשתמש בגיליון סגנונות זה יקבל את השינוי. אין צורך לערוך כל דף של האתר בנפרד, אשר עבור אתר גדול יכול להיות התחייבות מפרך.
• הורדות מהירות יותר
  • לאחר סקריפט או stylesheet הורד על ידי הלקוח שלך בפעם הראשונה, הוא במטמון על ידי דפדפן האינטרנט שלהם. מאחר שמשאבים משותפים אלה נמצאים כעת במטמון, דפים אחרים המתבקשים בדפדפן נטענים במהירות רבה יותר, מה שמשפר את מהירות הדף וביצועיו.
• צוותים מרובי-אנשים
  • אם יש לך יותר מאדם אחד עובד באתר אינטרנט בו זמנית, אתה יכול להשתמש במערכות עבור "לבדוק" ו "לבדוק" של קבצים על מנת להבטיח כי כולם בצוות עובד עם הגרסאות העדכניות ביותר של קבצים אלה. זה הרבה יותר קשה לעשות אם סגנונות והתנהגויות משתלבים במסמכי מבנה.

• SEO
  • אתר שיש לו הפרדה ברורה בין סגנון ומבנה צפוי לבצע ביצועים טובים יותר עבור מנועי החיפוש, שכן אתרים אלה יכולים לסרוק בצורה יעילה יותר את התוכן ולהבין את הדף מבלי להסתבך עם סגנון חזותי או מידע התנהגותי.
• נְגִישׁוּת
  • דפי סגנון חיצוניים וקבצי Script זמינים יותר לאנשים ולדפדפנים. כי יש הפרדה בין סגנון ומבנה, תוכנה כמו קוראי מסך יכול בקלות רבה יותר לעבד תוכן משכבת ​​המבנה מבלי לקבל שקועה למטה על ידי סגנונות כי הם לא יכולים להשתמש בכל מקרה.
• תאימות לאחור
  • כאשר יש לך אתר המיועד לשכבות הפיתוח, הוא יהיה תואם יותר לאחור מכיוון שדפדפנים או מכשירים שאינם יכולים להשתמש בסגנונות CSS מסוימים או שעשויים להשבית JavaScript עדיין יכולים להציג את ה- HTML. אתר האינטרנט שלך יכול להיות משופר בהדרגה עם תכונות עבור דפדפנים התומכים בהם.

HTML - שכבת המבנה

שכבת המבנה היא המקום שבו אתה מאחסן את כל התוכן שהלקוחות שלך רוצים לקרוא או להסתכל עליו. זה יהיה מקודד HTML5 תואם סטנדרטים והוא יכול לכלול טקסט ותמונות, כמו גם מולטימדיה (וידאו, אודיו, וכו '). חשוב לוודא שכל היבט של תוכן האתר שלך מיוצג בשכבת המבנה. זה מאפשר לכל הלקוחות שיש להם JavaScript כבוי או שאינם יכולים להציג CSS עדיין יש גישה לאתר האינטרנט כולו, אם לא כל הפונקציונליות של האתר.

CSS - שכבת הסגנונות

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

JavaScript - שכבת ההתנהגות

JavaScript היא השפה הנפוצה ביותר עבור שכבת ההתנהגות, אבל כפי שציינתי קודם, CGI ו- PHP יכולים גם ליצור התנהגויות של דפי אינטרנט. עם זאת, כאשר רוב המפתחים מתייחסים לשכבת ההתנהגות, הם מתכוונים לשכבה המופעלת ישירות בדפדפן האינטרנט - כך ש- JavaScript כמעט תמיד היא שפת הבחירה. אתה משתמש בשכבה זו כדי לתקשר ישירות עם DOM או אובייקט אובייקט המודל. כתיבת HTML חוקי בשכבת התוכן חשובה גם לאינטראקציות של DOM בשכבת ההתנהגות.

כאשר אתה בונה את שכבת ההתנהגות, עליך להשתמש בקבצי Script חיצוניים בדיוק כמו ב- CSS. אתה מקבל את כל היתרונות של שימוש בגיליון סגנונות חיצוני.