Зошто сите веб-страници се изградени со комбинација на структура, стил и однесување
Една заедничка аналогија што се користи за да се опише развојот на предниот дел на веб-страницата е дека тоа е како столче со 3 нозе. Овие 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 или Object Object Model. Пишувањето валиден HTML во слојот со содржини е исто така важно за DOM интеракции во однесувањето слој.
Кога ќе се изгради во однесувањето слој, треба да користите надворешни скриптни датотеки, исто како и со CSS. Ги добивате сите исти предности за користење на надворешен стилски лист.