کسانی که در صنعت طراحی وب کار می کنند، توسعه front-end  وب سایت را با یک سه پایه مقایسه می کنند. این سه پایه - سه لایه توسعه وب - ساختار ، سبک و رفتارها را تشکیل می دهند.

 

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

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

منابع اشتراكی: هنگام نوشتن پرونده CSS خارجی یا JavaScript ، هر صفحه در سایت می تواند از آن پرونده استفاده كند. اگر شما نیاز به ایجاد تغییر در آن پرونده داشته باشید، شاید برای به روزرسانی برخی از استایل های تایپوگرافی در وب سایت، هر صفحه ای که از آن شیوه نامه (stylesheet) استفاده می کند، تغییر خواهد کرد.  نیازی به ویرایش هر صفحه از وب سایت به صورت جداگانه نیست، که این، می تواند یک اقدام ناخوشایند برای یک وب سایت بزرگ باشد.

بارگیری سریعتر: هنگامی که اسکریپت یا استایل شیت برای اولین بار توسط مشتری شما بارگیری شد، توسط مرورگر وب ذخیره می شود.  از آنجا که این منابع اشتراکی اکنون در حافظه نهان یا کش (cache) مرورگر موجود است، صفحات دیگری که در مرورگر درخواست می شوند با سرعت بیشتری بارگذاری می شوند، که باعث بهبود سرعت کلی و عملکرد صفحه می شود.

تیم های چند نفره: اگر بیش از یک نفر در یک وب سایت به طور همزمان کار می کنید، می توانید از سیستمهایی استفاده کنید که اجازه می دهد پرونده ها در داخل و خارج بررسی شوند تا اطمینان حاصل شود که همه با آخرین نسخه ها کار می کنند. اگر سبک ها و رفتارها با اسناد ساختار در هم آمیخته شوند ، این کار بسیار سخت تر است.

 

 SEO :سایتی که تفکیک روشنی از سبک و ساختار دارد، احتمالاً عملکرد بهتری برای موتورهای جستجو دارد، زیرا آنها می توانند آن مطالب را به طور مؤثر زیر و رو کنند و صفحه را بدون گرفتار شدن در استایل بصری و اطلاعات رفتاری درک کنند.

 

قابلیت دسترسی: فایل های استایل شیت خارجی و پرونده های اسکریپت بیشتر در دسترس افراد و مرورگرها هستند. نرم افزاری مانند screen reader  ها می توانند محتوا را از لایه ساختار بدون برخورد با سبک هایی که به هر حال نمی توانند از آن استفاده کنند، راحت تر پردازش کنند.

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

 

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

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

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

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

 

CSS: لایه سبک

این لایه چگونگی نگاه یک سند HTML ساختار یافته را به بازدید کنندگان سایت نشان می دهد و توسط CSS (استایل شیت های آبشاری) تعریف می شود. این پرونده ها حاوی دستورالعمل های سبکی برای نحوه نمایش سند در یک مرورگر وب هستند. لایه استایل معمولاً شامل مدیا کوئری است که صفحه نمایش سایت را بر اساس اندازه صفحه و دستگاه تغییر می دهند.

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

 

JavaScript: لایه رفتاری

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

هنگامی که توسعه دهندگان به لایه رفتاری مراجعه می کنند، بیشتر آنها به معنای لایه ای است که به طور مستقیم در مرورگر وب فعال می شود. شما از این لایه برای تعامل مستقیم با DOM (Document Object Model) استفاده می کنید. نوشتن HTML معتبر در لایه محتوا برای تعامل DOM در لایه رفتار بسیار مهم است. وقتی در لایه رفتار قرار می گیرید، باید از فایلهای اسکریپت خارجی، دقیقاً مانند CSS ، برای بهینه سازی سرعت و عملکرد استفاده کنید.

 

منبع: lifewire