Тези, които работят в индустрията за уеб дизайн, приличат на разработването на уебсайтове от край до край на трикраково столче. Тези три крака - трите слоя на уеб програмирането - включват структура, стил и поведение.
Защо трябва да отделите слоевете?
Когато създавате уеб страница, нейната структура трябва да бъде пренасочена към вашия HTML, визуални стилове към CSS и поведение към скриптове. Някои от предимствата на разделянето на слоевете са:
- Споделени ресурси: Когато пишете външен CSS или JavaScript файл, всяка страница в сайта може да използва този файл. Ако трябва да направите промяна в този файл, може би за да актуализирате някои типографски стилове в уебсайта, всяка страница, която използва тази стилова таблица, ще получи промяната. Не е необходимо да редактирате всяка страница на уеб сайта поотделно, което може да бъде изтощително предприятие за голям уебсайт.
- По-бързо изтегляне: След като скриптът или стиловата листа бъде изтеглена от клиента ви за първи път, той се кешира от уеб браузъра. Тъй като тези споделени ресурси сега се съдържат в кеша на браузъра, други страници, които се изискват в браузъра, се зареждат по-бързо, което подобрява общата скорост и ефективност на страницата.
- Екипи от няколко човека: Ако имате повече от един човек, работещ на уебсайт наведнъж, можете да използвате системи, които позволяват на файловете да се проверяват и излизат, за да се гарантира, че всеки работи с най-новите версии. Това е много по-трудно да се направи, ако стиловете и поведението са преплетени със структурни документи.
- SEO: Сайтът, който има ясно разграничение между стил и структура, вероятно ще работи по-добре за търсачките, защото те могат да обхождат по-ефективно съдържанието и да разбират страницата, без да се затрупват във визуален стил и информация за поведението.
- Достъпност: Външните стилови листове и файловете на скриптове са по-достъпни за хората и браузърите. Софтуерите като четци за екран могат по-лесно да обработват съдържанието от структурния слой, без да се занимават със стилове, които все още не могат да използват.
- Обратно съвместимост: Сайтовете, проектирани с отделни слоеве за разработка, е по-вероятно да бъдат обратно съвместими, тъй като браузърите и устройствата, които не могат да използват определени стилове на CSS или които имат деактивиран JavaScript, все още могат да видят HTML. След това можете да подобрите уебсайта си постепенно с функции за браузърите, които ги поддържат.
HTML: Структурният слой
Структурата или съдържателният слой на уеб страницата е основният HTML код на тази страница. Точно както рамката на къщата създава здрава основа, върху която се изгражда останалата част от къщата, солидна основа на HTML създава платформа, на която може да се създаде уебсайт.
Структурният слой е мястото, където съхранявате цялото съдържание, което вашите клиенти искат да четат или да гледат. HTML структурата може да се състои от текст и изображения и включва хипервръзките, които посетителите ще използват за навигация в уеб сайта. Това е кодирано в стандартен HTML5 и може да включва текст, изображения и мултимедия (видео, аудио и др.).
Всеки аспект от съдържанието на даден сайт трябва да бъде представен в структурния слой. Това позволява на клиентите, които са изключили JavaScript, или които не могат да виждат CSS достъп до целия уебсайт, ако не и цялата му функционалност.
CSS: Стилове
Този слой диктува как структурираният HTML документ ще изглежда за посетителите на сайта и се определя от CSS (Cascading Style Sheets). Тези файлове съдържат стилистични инструкции как документът трябва да се показва в уеб браузър. Стилът на слой обикновено включва мултимедийни заявки, които променят дисплея на сайта въз основа на размера на екрана и устройството.
Всички визуални стилове за даден уебсайт трябва да се намират във външна стилова таблица. Можете да използвате няколко стилове, но не забравяйте, че всеки CSS файл изисква заявка за HTTP, за да го извлече, което засяга ефективността на сайта.
JavaScript: Слоят за поведение
Стилът на поведение прави уебсайт интерактивен, позволявайки на страницата да реагира на действията на потребителите или да се променя въз основа на набор от условия. JavaScript е най-често използваният език за поведенческия слой, но CGI и PHP също се използват много често.
Когато разработчиците се отнасят към слоя за поведение, повечето от тях означават слоя, който се активира директно в уеб браузъра. Използвате този слой, за да взаимодействате директно с DOM (Document Object Model). Писането на валиден HTML в съдържателния слой е важно за DOM взаимодействията в слоя за поведение. Когато изграждате слоя за поведение, трябва да използвате външни скриптови файлове, точно както при CSS, за да оптимизирате скоростта и производителността.
