Prečo sú všetky webové stránky postavené s kombináciou štruktúry, štýlu a správania
Bežná analógia, ktorá sa používa na popísanie vývoja webových stránok na front-end, je, že je to ako 3-legged stolička. Tieto 3 nohy, ktoré sú tiež známe ako tri vrstvy vývoja webu, sú štruktúra, štýl a správanie.
Tri vrstvy vývoja webu
- Štruktúra alebo obsahová vrstva
- Štruktúra alebo obsahová vrstva webovej stránky je základným kódom HTML tejto stránky. Rovnako ako rám domu vytvára pevný základ, na ktorom je postavený zvyšok domu, tak aj solídny základ HTML vytvára platformu, na ktorej je možné vytvárať webové stránky. Štruktúra HTML môže pozostávať z textu alebo obrázkov a zahŕňa hypertextové odkazy, ktoré návštevníci použijú na navigáciu okolo tejto webovej stránky.
- Štýl alebo prezentačná vrstva
- Štýl alebo prezentačná vrstva určuje, ako sa štruktúrovaný dokument HTML bude pozerať na návštevníkov daného webu. Táto vrstva je definovaná CSS (kaskádové štýly). Tieto súbory obsahujú štýly, ktoré určujú, ako sa má dokument zobrazovať vo webovom prehliadači. Na dnešnej webovej vrstve môže vrstva štýlu obsahovať aj dopyty médií, ktoré môžu zmeniť zobrazenie webu na základe rôznych veľkostí a zariadení obrazovky .
- správanie
- Vrstva správania je vrstva webovej stránky, ktorá môže reagovať na rôzne akcie používateľa alebo vykonať zmeny stránky na základe množiny podmienok. Pre väčšinu webových stránok by bola úroveň správania interaktívne na stránke JavaScript .
Prečo by ste mali oddeľovať vrstvy?
Pri vytváraní webovej stránky je žiaduce udržiavať vrstvy čo najviac oddelené. Štruktúra by mala byť priznaná vašim HTML, vizuálnym štýlam CSS a správaniu sa ku všetkým skriptom, ktoré stránky používajú.
Niektoré z výhod oddeľovania vrstiev sú:
- Zdieľané zdroje
- Pri písaní externého súboru CSS alebo súboru JavaScript môžete tento súbor použiť na ľubovoľnej stránke na vašej webovej lokalite. Ak potrebujete vykonať zmenu tohto súboru, možno aktualizovať niektoré typografické štýly na webovej stránke, každá stránka, ktorá používa tento štýl, dostane zmenu. Nie je potrebné upravovať každú stránku webovej lokality samostatne, čo by mohlo byť pre väčšiu lokalitu vyčerpávajúcim podnikom.
- Rýchlejšie sťahovanie
- Po prvom stiahnutí skriptu alebo štýlu šablón vášho zákazníka je vo vyrovnávacej pamäti uložený vo svojom webovom prehliadači. Keďže tieto zdieľané zdroje sú teraz obsiahnuté v cache, ďalšie stránky, ktoré sa vyžadujú v prehliadači, sa načítajú rýchlejšie, čo zlepšuje celkovú rýchlosť a výkonnosť stránky.
- Tímy viacerých osôb
- Ak máte na webovej stránke naraz viac ako jedna osoba, môžete použiť systémy, ktoré sa majú "skontrolovať" a "vyskúšať" zo súborov, aby sa zabezpečilo, že všetci v tíme pracujú s najnovšími verziami týchto súborov. Je to oveľa ťažšie, ak sa štýly a správanie navzájom spájajú so štruktúrovanými dokumentmi.
- SEO
- Stránky, ktoré majú jasné oddelenie štýlu a štruktúry, budú pravdepodobne lepšie fungovať vo vyhľadávačoch, keďže tieto stránky môžu efektívnejšie indexovo prehľadávať obsah a chápať stránku, bez toho, aby sa dostali do kontaktu s vizuálnym štýlom alebo informáciami o správaní.
- prístupnosť
- Externé štýly a súbory skriptov sú pre ľudí a prehliadače prístupnejšie. Vzhľadom na to, že existuje oddelenie štýlu a štruktúry, softvér, ako sú čítačky obrazovky, môže ľahšie spracovávať obsah z vrstvy štruktúry, bez toho, aby sa dostal zachytený štýly, ktoré nemôžu používať.
- Spätná kompatibilita
- Keď máte stránky, ktoré sú navrhnuté s vývojovými vrstvami, budú viac spätne kompatibilné, pretože prehliadače alebo zariadenia, ktoré nemôžu používať určité štýly CSS alebo ktoré môžu mať zakázaný JavaScript, môžu HTML stále zobrazovať. Vaše webové stránky potom môžu byť postupne vylepšené funkciami pre prehliadače, ktoré ich podporujú.
HTML - vrstva štruktúry
Vrstva štruktúry je miesto, kde ukladáte všetok obsah, ktorý si zákazníci chcú prečítať alebo pozrieť. Tento kód bude kódovaný v štandardnom HTML5 a môže obsahovať text a obrázky, ako aj multimédiá (video, audio atď.). Je dôležité zabezpečiť, aby každý aspekt obsahu vášho webu bol zastúpený vo vrstve štruktúry. To umožňuje ľubovoľným zákazníkom, ktorí majú vypnutý JavaScript alebo ktorí nemôžu zobraziť CSS, aby mali stále prístup k celej webovej stránke, ak nie k všetkým funkciám tejto stránky.
CSS - vrstva štýlov
Všetky vaše vizuálne štýly pre vašu webovú stránku vytvoríte v externom štýle. Môžete použiť viacero šablón štýlov, ale pamätajte, že každý samostatný súbor CSS vyžaduje vyžiadanie HTTP na načítanie a ovplyvňuje výkonnosť webu.
JavaScript - vrstva správania
JavaScript je najčastejšie používaný jazyk pre vrstvu správania, ale ako som už spomenul, CGI a PHP môžu tiež generovať správanie webových stránok. Keď sa hovorí, že väčšina vývojárov odkazuje na vrstvu správania, znamená to, že vrstva je aktivovaná priamo vo webovom prehliadači - takže JavaScript je skoro vždy zvolený jazyk. Táto vrstva používate na interakciu priamo s DOM alebo objektovým modelom dokumentu. Zápis platného kódu HTML do vrstvy obsahu je tiež dôležitý pre interakcie DOM v vrstve správania.
Pri vytváraní vrstvy správania by ste mali používať externé súbory skriptov rovnako ako s CSS. Získate všetky rovnaké výhody používania externého štýlu.