Tí, ktorí pracujú v priemysle dizajnu webových stránok, prirovnávajú vývoj webových stránok na trojnohé stoličky. Tieto tri nohy - tri vrstvy vývoja webu - zahŕňajú štruktúru, štýl a správanie.
Prečo by ste mali oddeľovať vrstvy?
Keď vytvárate webovú stránku, jej štruktúra by mala byť odsunutá do vášho HTML, vizuálnych štýlov do CSS a správania sa k skriptom. Niektoré z výhod oddeľovania vrstiev sú:
- Zdieľané zdroje: Keď píšete externý súbor CSS alebo JavaScript, môže použiť ľubovoľnú stránku na webe. 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 stránky samostatne, čo by mohlo byť vyčerpávajúcim podnikom pre veľké webové stránky.
- Rýchlejšie sťahovanie: Po prvom stiahnutí skriptu alebo štýlu šablón vášho zákazníka je webový prehliadač uložený vo vyrovnávacej pamäti. Keďže tieto zdieľané zdroje sú teraz obsiahnuté v vyrovnávacej pamäti prehliadača, ď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 jednej webovej stránke súčasne viac ako jednu osobu, môžete použiť systémy, ktoré umožňujú kontrolu a kontrolu súborov, aby sa zabezpečilo, že všetci pracujú s najnovšími verziami. 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, pretože môžu prehľadávať tento obsah efektívnejšie a porozumieť stránke bez toho, aby sa obťažovali vizuálnym štýlom a informáciami o správaní.
- dostupnosť: Externé štýly a súbory skriptov sú pre ľudí a prehliadače prístupnejšie. Softvér, ako sú čítačky obrazovky, môže spracovávať obsah z vrstvy štruktúry ľahšie bez toho, aby sa zaoberal štýlmi, ktoré nemôžu používať.
- Spätná kompatibilita: Stránky, ktoré sú navrhnuté so samostatnými vrstvami vývoja, budú s väčšou pravdepodobnosťou spätne kompatibilné, pretože prehliadače a zariadenia, ktoré nemôžu používať určité štýly CSS alebo ktoré majú zakázaný jazyk JavaScript, môžu HTML stále zobrazovať. Potom môžete webové stránky vylepšiť postupne pomocou funkcií pre prehliadače, ktoré ich podporujú.
HTML: Štruktúrna 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, pevný základ HTML vytvára platformu, na ktorej je možné vytvárať webové stránky.
Vrstva štruktúry je miesto, kde ukladáte všetok obsah, ktorý si zákazníci chcú prečítať alebo pozrieť. Štruktúra HTML sa môže skladať z textu a obrázkov a zahŕňa hypertextové odkazy, ktoré návštevníci použijú na navigáciu po webových stránkach. Tento kód je kódovaný v štandardnom HTML5 a môže obsahovať text, obrázky a multimédiá (video, audio atď.).
Každý aspekt obsahu stránky by mal byť zastúpený vo vrstve štruktúry. To umožňuje zákazníkom, ktorí majú vypnutý JavaScript alebo ktorí nemôžu zobraziť prístup CSS na celú webovú stránku, ak nie všetky jej funkcie.
CSS: Vrstva štýlov
Táto vrstva diktuje, ako štruktúrovaný dokument HTML bude vyzerať na návštevníkov webu a je definovaný CSS (Cascading Style Sheets). Tieto súbory obsahujú štylistické pokyny na zobrazenie dokumentu vo webovom prehliadači. Vrstva štýlu zvyčajne zahŕňa mediálne dopyty, ktoré menia zobrazenie stránky na základe veľkosti obrazovky a zariadenia.
Všetky vizuálne štýly pre webové stránky by mali byť umiestnené v externom štýle. Môžete použiť viacero štýlov, ale pamätajte si, že každý súbor CSS vyžaduje požiadavku HTTP na jeho načítanie a ovplyvňuje výkonnosť webu.
JavaScript: Vrstva správania
Vrstva správania robí webové stránky interaktívne, čo umožňuje stránke reagovať na akcie používateľa alebo zmeniť na základe množiny podmienok. JavaScript je najčastejšie používaný jazyk pre vrstvu správania, ale aj CGI a PHP sú veľmi často používané.
Keď vývojári odkazujú na vrstvu správania, väčšina z nich znamená vrstvu, ktorá je aktivovaná priamo vo webovom prehliadači. Táto vrstva používate na interakciu priamo s doménovým objektom (Document Object Model). Písanie platného kódu HTML v obsahovej vrstve je dôležité pre interakcie DOM vo vrstve správania. Pri vytváraní vrstvy správania by ste mali používať externé súbory skriptov, rovnako ako s CSS, aby ste optimalizovali rýchlosť a výkonnosť.
