Они који раде у индустрији веб дизајна подразумевају развој фронт-енд веб-сајта на столицу са три ноге. Ове три ноге - три слоја веб развоја - садрже структуру, стил и понашање.
Зашто би требало да одвојите слојеве?
Када креирате веб страницу, њена структура би требала бити пренета на ХТМЛ, визуелне стилове у ЦСС и понашање на скрипте. Неке од предности одвајања слојева су:
- Заједнички ресурси: Када напишете вањски ЦСС или ЈаваСцрипт датотеку, свака страница на страници може користити ту датотеку. Ако желите да направите промену у тој датотеци, можда да бисте ажурирали неке типографске стилове на веб локацији, свака страница која користи тај стилесхеет добиће промјену. Не постоји потреба за уређивањем сваке странице веб странице појединачно, што би могло бити напорно предузеће за велику веб локацију.
- Бржи преузимања: Када први пут преузмете скрипту или стилесхеет, клијент га цацхед. Пошто су ови заједнички ресурси сада садржани у цацхе-у претраживача, друге странице које се захтевају у претраживачу учитавају брже, што побољшава укупну брзину и перформансе странице.
- Мулти-персон тимови: Ако имате више од једне особе која ради на веб локацији одједном, можете користити системе који омогућавају да се датотеке проверавају како би се осигурало да сви раде са најновијим верзијама. Ово је много теже учинити ако су стилови и понашања преплетени са документима структуре.
- СЕО: Сајт који има јасно раздвајање стила и структуре вероватно ће боље функционисати за претраживаче, јер они могу попуњавати тај садржај и разумјети страницу, а да се не заглави у визуелном стилу и информацијама о понашању.
- Доступност: Спољни листови стилова и датотеке скрипти су приступачнији људима и претраживачима. Софтвер, као што је читач екрана, може лакше обрађивати садржај са структурног слоја, без обзира на стилове које они уопће не могу користити.
- Компатибилност: Сајт који је дизајниран са одвојеним развојним слојевима, вероватније је да буде компатибилан уназад, јер претраживачи и уређаји који не могу користити одређене стилове ЦСС-а или који имају онемогућен ЈаваСцрипт, још увијек могу видети ХТМЛ. Затим можете побољшати своју веб локацију прогресивно са функцијама за прегледаче који их подржавају.
ХТМЛ: структурни слој
Структура или слој садржаја веб странице је основни ХТМЛ код те странице. Као што кућиште ствара снажну основу на којој се гради остатак куће, чврста основа ХТМЛ-а ствара платформу на којој се може креирати веб-сајт.
Структурни слој је где складиштите сав садржај који ваши купци желе да читају или гледају. ХТМЛ структура може се састојати од текста и слика, а укључује и хиперлинке које ће посјетитељи користити за навигацију око веб странице. Ово је кодирано у стандардним ХТМЛ5 стандардима и може садржавати текст, слике и мултимедије (видео, аудио, итд.).
Сваки аспект садржаја сајта треба да буде представљен у структурном слоју. Ово омогућава корисницима који су искључили ЈаваСцрипт или који не могу приступити ЦСС приступу читавој веб локацији, ако не и свим његовим функционалностима.
ЦСС: слој стилова
Овај слој диктира како ће структурирани ХТМЛ документ изгледати на посетиоцима сајта и дефинисан је ЦСС (Цасцадинг Стиле Схеетс). Ове датотеке садрже стилске инструкције како би документ требало да буде приказан у веб прегледачу. Стилни слој обично укључује медијске упите који мијењају приказ страница на основу величине екрана и уређаја.
Сви визуелни стилови за веб локацију требају пребивати у спољашњем стилу. Можете користити више стилова, али запамтите да свака ЦСС датотека захтијева ХТТП захтјев за преузимање, што утјече на перформансе сајта.
ЈаваСцрипт: слој понашања
Слој понашања чини веб локацију интерактивном, омогућавајући страницама да одговоре на радње корисника или да се мењају на основу скупа услова. ЈаваСцрипт је најчешће коришћени језик за слој понашања, али се и ЦГИ и ПХП веома често користе.
Када се програмери односе на слој понашања, већина њих означава слој који се активира директно у веб прегледачу. Овај слој користите за интеракцију директно са ДОМ (Модел предмета документа). Писање важећег ХТМЛ-а у слоју садржаја важно је за интеракције ДОМ-а у слоју понашања. Када изградите слој понашања, користите спољне датотеке скрипте, баш као и код ЦСС-а, како бисте оптимизирали брзину и перформансе.
