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