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