Ľudia, ktorí pracujú v vzhľad stránky priemysel prirovnáva vývoj front-endových webových stránok k trojnohej stoličke. Tieto tri časti - tri vrstvy vývoja webu - zahŕňajú štruktúru, štýl a správanie webu.
Prečo by ste mali separovať vrstvy?
Pri vytváraní webovej stránky by mala byť jej štruktúra degradovaná na váš HTML, vizuálne štýly do CSSa správanie k skriptom. Niektoré z výhod oddelenia vrstiev sú:
- Zdieľané zdroje: Keď píšete externý súbor CSS alebo JavaScript, môže ho použiť ktorákoľvek stránka na webe. Ak potrebujete urobiť zmenu v tomto súbore, možno v aktualizovať niektoré typografické štýly na webe sa zmeny prejavia na každej stránke, ktorá používa uvedenú šablónu štýlov. Nie je potrebné upravovať každú stránku webu individuálne, čo by mohlo byť pre veľké webové stránky náročným záväzkom.
- Rýchlejšie sťahovanie: Keď si zákazník prvýkrát stiahne skript alebo šablónu so štýlmi, uloží sa do webového prehliadača. Pretože tieto zdieľané zdroje sú teraz obsiahnuté v vyrovnávacia pamäť prehliadača, ďalšie stránky, ktoré sa v prehliadači požadujú, sa načítajú rýchlejšie, čo zvyšuje celkovú rýchlosť a výkon stránky.
- Tímy pozostávajúce z viacerých osôb: Ak na webovej stránke pracuje viac osôb naraz, použite systémy riadenia verzií, ktoré umožňujú kontrolu a prihlasovanie súborov, aby ste zaistili, že všetci pracujú s najnovšie verzie. Tento proces je oveľa ťažšie vykonať, ak sú štýly a správanie prepojené s dokumentmi štruktúry.
- SEO: Stránka, ktorá demonštruje zreteľné oddelenie štýlu a štruktúry, bude pravdepodobne mať lepšiu výkonnosť pre vyhľadávače, pretože môže prehľadávať tento obsah efektívnejšie a pochopiť stránku bez toho, aby sa namotal na vizuálny štýl a správanie informácie.
- Prístupnosť: Externé šablóny štýlov a súbory skriptov sú prístupnejšie ľuďom a prehliadačom. Softvér ako napr čítačky obrazovky dokáže ľahšie spracovať obsah z vrstvy štruktúry bez toho, aby sa zaoberal štýlmi, ktoré aj tak nemôžu použiť.
- Spätná kompatibilita: Web, ktorý je navrhnutý so samostatnými vývojovými vrstvami, bude pravdepodobne spätne kompatibilný, pretože Prehliadače a zariadenia, ktoré nemôžu používať určité štýly CSS alebo majú zakázaný jazyk JavaScript, môžu súbor naďalej zobrazovať HTML. Svoj web potom môžete postupne vylepšovať funkciami pre prehľadávače, ktoré ich podporujú.
HTML: Štruktúrna vrstva
Štruktúra alebo obsahová vrstva webovej stránky je základom HTML kód tejto stránky. Rovnako ako rám domu vytvára silný základ, na ktorom je postavená zvyšok domu, pevný základ kódu HTML vytvára platformu, na ktorej je možné vytvoriť webovú stránku.
Na vrstve štruktúry sa ukladá všetok obsah, ktorý si zákazníci chcú prečítať alebo pozrieť. Štruktúra HTML môže pozostávať z textu a obrázkov a obsahuje hypertextové odkazy ktoré návštevníci použijú na navigáciu po webových stránkach. Tieto informácie sú kódované v súlade s normami HTML5 a môžu obsahovať text, obrázky a multimédiá (video, zvuk atď.).
Každý aspekt obsahu stránky by mal byť zastúpený vo vrstve štruktúry. Toto oddelenie 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 určuje, ako bude štruktúrovaný dokument HTML vyzerať pre návštevníkov stránky a ako ho definuje CSS (Kaskádové štýly). Tieto súbory obsahujú štylistické pokyny na zobrazenie dokumentu vo webovom prehliadači. Štýl vrstva zvyčajne obsahuje mediálne dotazy ktoré menia zobrazenie webu na základe veľkosť obrazovky a zariadenie.
Všetky vizuálne štýly pre web by sa mali nachádzať v externej šablóne so štýlmi. Môžete použiť viac šablón štýlov, ale každý súbor CSS vyžaduje na načítanie požiadavku HTTP, ovplyvňujúci výkon stránok.
JavaScript: Vrstva správania
Vďaka vrstve správania je webová stránka interaktívna, umožňuje stránke reagovať na akcie používateľov alebo sa meniť na základe súboru podmienok. JavaScript je najbežnejšie používaný jazyk pre vrstvu správania, ale CGI a PHP sú tiež veľmi často používané.
Keď vývojári odkazujú na vrstvu správania, väčšina z nich znamená vrstvu, ktorá sa aktivuje priamo vo webovom prehliadači. Túto vrstvu použite na priamu interakciu s objektovým modelom dokumentu. Zápis platného HTML vo vrstve obsahu je dôležitá pre interakcie DOM vo vrstve správania. Pri vytváraní vrstvy správania by ste mali optimalizovať rýchlosť a výkon rovnako ako v CSS externými súbormi skriptov.