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