سه لایه طراحی وب

چرا همه وب سایت ها با ترکیبی از ساختار، سبک و رفتار ساخته شده اند

یک تحلیل معمولی که برای توصیف توسعه وب سایت در انتهای آن استفاده می شود این است که آن را مانند مدفوع 3 پا است. این 3 پا، که همچنین به عنوان 3 لایه توسعه وب شناخته می شوند، ساختار، سبک و رفتار است.

سه لايه توسعه وب

• لایه ساختار یا محتوا
  • لایه ساختار یا محتوا یک صفحه وب کد HTML زیر آن صفحه است. چارچوب خانه یک بنیاد قوی ایجاد می کند که بقیه خانه ساخته می شود، بنابراین یک پایه جامد از HTML یک پلت فرم را ایجاد می کند که می توان یک وب سایت را ایجاد کرد. ساختار HTML می تواند شامل متن یا تصاویر باشد و شامل لینک هایی است که بازدیدکنندگان برای حرکت در اطراف آن وب سایت استفاده می کنند.
• لایه سبک یا ارائه
  • سبک یا لایه ارائه می دهد که چگونه یک سند HTML ساخت یافته به بازدیدکنندگان سایت نگاه می کند. این لایه توسط CSS (Cascading Style Sheets) تعریف شده است. این فایل ها حاوی سبک هایی هستند که نشان می دهد چگونه باید سند را در یک مرورگر وب نمایش داد. در وب امروز، لایه سبک همچنین می تواند شامل پرس و جو های رسانه ای باشد که می تواند یک صفحه وب را بر اساس اندازه های مختلف صفحه و دستگاه ها تغییر دهد .
• رفتار - اخلاق
  • لایه رفتار لایه ای از یک صفحه وب است که می تواند به اعمال مختلف کاربر پاسخ دهد یا تغییراتی در یک صفحه بر اساس مجموعه ای از شرایط انجام دهد. برای اکثر صفحات وب، سطح رفتار می تواند تعاملات جاوا اسکریپت در صفحه باشد.

چرا باید لايه ها را جدا کنی؟

هنگامی که شما یک صفحه وب ایجاد می کنید، مطلوب است که لایه ها را به صورت جداگانه حفظ کنید. ساختار باید به HTML شما، سبک های بصری به CSS و رفتارهای هر اسکریپتی که سایت استفاده می کند، اعتماد کند.

برخی از مزایای جداسازی لایه ها عبارتند از:

• منابع به اشتراک گذاشته شده
  • وقتی یک فایل خارجی CSS یا جاوا اسکریپت بنویسید، می توانید از آن فایل با هر صفحه ای در وب سایت خود استفاده کنید. اگر شما نیاز به تغییر در آن فایل داشته باشید، شاید برای به روزرسانی برخی از سبک های تایپوگرافی در وب سایت، هر صفحه ای که از این شیوه استفاده می کند این تغییر را دریافت می کند. بدون نیاز به ویرایش هر صفحه وب به صورت جداگانه وجود دارد، که برای سایت بزرگتر می تواند یک کار خسته کننده باشد.
• بارگیری سریعتر
  • هنگامی که اسکریپت یا شیوه اول توسط اولین مشتری بارگیری شده است، آن را توسط مرورگر وب ذخیره می شود. از آنجا که این منابع به اشتراک گذاشته شده در حال حاضر در حافظه پنهان قرار دارند، صفحات دیگری که در بار مرورگر درخواست می شوند سریعتر است، که سرعت کلی و عملکرد صفحه را بهبود می بخشد.
• تیم های چند نفره
  • اگر بیش از یک نفر در یک بار در یک وب سایت کار می کند، می توانید سیستم هایی را برای چک کردن و چک کردن فایل ها استفاده کنید تا اطمینان حاصل شود که همه افراد تیم در آخرین نسخه این فایل ها کار می کنند. اگر سبک ها و رفتارها با اسناد ساختاری در هم آمیخته شوند، این کار بسیار سخت تر است.

• جستجوگرها
  • یک سایت که دارای صراحت جدایی از سبک و ساختار است، احتمالا برای موتورهای جستجو بهتر خواهد بود، زیرا این سایت ها می توانند این محتوا را به طور مرتب ردیابی کنند و صفحه را درک کنند بدون آنکه با سبک بصری یا اطلاعات رفتار آشنا شوند.
• دسترسی
  • ورق های سبک و اسکریپت های خارجی برای افراد و مرورگرها بیشتر قابل دسترسی هستند. از آنجایی که تفکیک سبک و ساختار وجود دارد، نرم افزار مانند خوانندگان صفحه نمایش می تواند به آسانی محتوای محتوا را از لایه ساختار پردازش کند بدون آن که سبک های مورد استفاده را از بین ببرد.
• سازگاری با عقب
  • هنگامی که شما یک سایت دارید که با لایه های توسعه طراحی شده است، آن را به عقب سازگار خواهد شد، زیرا مرورگرها و یا دستگاه هایی که نمی توانند از برخی سبک های CSS استفاده کنند و یا ممکن است جاوا اسکریپت غیر فعال باشند می توانند HTML را مشاهده کنند. پس از آن وب سایت شما می تواند به صورت پیشرفته با ویژگی های مرورگرهایی که از آنها پشتیبانی می شود، پیشرفت کند.

HTML - ساختار لایه

لایه ساختاری، جایی است که شما تمام محتویاتی را که مشتریان شما میخواهند خواندن یا نگاه کردن آن را ذخیره کنند، ذخیره می کنند. این کد در HTML5 سازگار با استاندارد HTML5 کدگذاری شده و می تواند شامل متن و تصاویر و همچنین چند رسانه ای (ویدئو، صوتی و غیره) باشد. مهم است که مطمئن شوید که هر جنبه ای از محتوای سایت شما در لایه ساختار نشان داده شده است. این اجازه می دهد تا هر مشتری که دارای جاوا اسکریپت خاموش است و یا کسانی که نمی توانند CSS را مشاهده کنند تا هنوز تمام دسترسی به وب سایت را داشته باشند، اگر نه همه قابلیت های آن سایت.

CSS - لایه های سبک

شما می توانید تمام سبک های بصری خود را برای وب سایت خود در یک ورق سبک خارجی ایجاد کنید. شما می توانید از چندین شیوه استفاده کنید، اما به یاد داشته باشید که هر فایل CSS جداگانه نیاز به یک درخواست HTTP برای بازخوانی، که بر عملکرد سایت تاثیر می گذارد.

جاوا اسکریپت - لایه رفتار

جاوا اسکریپت زبان رایج ترین لایه رفتار است، اما همانطور که قبلا ذکر شد، CGI و PHP همچنین می توانند رفتار صفحات وب را ایجاد کنند. گفته می شود زمانی که اکثر توسعه دهندگان به لایه رفتار اشاره می کنند، به این معنی هستند که لایه ای که به طور مستقیم در مرورگر وب فعال می شود، بنابراین جاوا اسکریپت تقریبا همیشه زبان انتخابی است. شما از این لایه برای ارتباط مستقیم با مدل DOM یا Document Object استفاده می کنید. نوشتن HTML معتبر در لایه محتوا نیز برای تعاملات DOM در لایه رفتار مهم است.

هنگام ساخت در لایه رفتار، شما باید از فایل های اسکریپت خارجی مانند CSS استفاده کنید. شما از مزایای استفاده از یک ورق سبک خارجی استفاده می کنید.