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