Proč jsou všechny webové stránky postaveny s kombinací struktury, stylu a chování
Obvyklá analogie, která se používá k popisu vývoje webových stránek na frontě, spočívá v tom, že je to jako 3-legged stolička. Tyto 3 nohy, které jsou také známé jako 3 vrstvy tvorby webových stránek, jsou struktura, styl a chování.
Tři vrstvy rozvoje webu
- Struktura nebo obsahová vrstva
- Struktura nebo obsahová vrstva webové stránky je základním kódem HTML této stránky. Stejně jako rám domu vytváří pevný základ, na němž je zbytek domu postaven, stejně jako pevný základ HTML vytváří platformu, na níž může být vytvořena webová stránka. Struktura HTML se může skládat z textu nebo obrázků a obsahuje hypertextové odkazy, které návštěvníci budou používat k procházení webových stránek.
- Stylová nebo prezentační vrstva
- Stylová nebo prezentační vrstva určuje, jak bude vypadat strukturovaný dokument HTML na návštěvníky webu. Tato vrstva je definována CSS (Cascading Style Sheets). Tyto soubory obsahují styly, které určují, jak má být dokument zobrazen ve webovém prohlížeči. Na dnešním webu může vrstva stylu obsahovat také dotazy médií, které mohou změnit zobrazení webu na základě různých velikostí a zařízení obrazovky .
- Chování
- Chování vrstvy je vrstva webové stránky, která může reagovat na různé akce uživatele nebo provádět změny stránky na základě souboru podmínek. Pro většinu webových stránek by úroveň chování byla interakce jazyka JavaScript na stránce.
Proč byste měli rozdělit vrstvy?
Při vytváření webové stránky je žádoucí udržovat vrstvy co možná nejlépe oddělené. Struktura by měla být svěřena vašemu HTML, vizuálním stylům do CSS a chování ke všem skriptům, které stránky používají.
Některé výhody dělení vrstev jsou:
- Sdílené zdroje
- Při psaní externího souboru CSS nebo souboru JavaScript můžete tento soubor použít libovolnou stránkou vašeho webu. Pokud potřebujete provést změnu tohoto souboru, možná aktualizovat některé typografické styly na webových stránkách, každá stránka, která používá tento stylový styl, získá změnu. Není třeba upravovat každou stránku webové stránky jednotlivě, což by mohlo být pro rozsáhlejší stránky vyčerpávajícím podnikem.
- Rychlejší stahování
- Jakmile skript nebo stylový list byl zákazníkem poprvé stažen, je ukládán do mezipaměti prostřednictvím webového prohlížeče. Protože tyto sdílené prostředky jsou nyní obsaženy v mezipaměti, další stránky, které jsou požadovány v prohlížeči, se načítají rychleji, což zlepšuje celkovou rychlost a výkon stránek.
- Týmy pro více osob
- Pokud máte více než jednu osobu pracující na webových stránkách najednou, můžete použít systémy, které pro "check in" a "check out" souborů zajistí, že všichni v týmu pracují s nejnovějšími verzemi těchto souborů. To je mnohem těžší udělat, pokud jsou styly a chování propojeny se strukturálními dokumenty.
- SEO
- Stránky, které mají jasné oddělení stylu a struktury, budou pravděpodobně lépe fungovat pro vyhledávače, protože tyto weby mohou efektivněji procházet tento obsah a porozumět stránce, aniž by byly zablokovány vizuálním stylem nebo informacemi o chování.
- Přístupnost
- Externí styly a soubory skriptů jsou přístupnější pro lidi a pro prohlížeče. Vzhledem k tomu, že existuje oddělení stylu a struktury, software, jako jsou čtečky obrazovky, může snadněji zpracovávat obsah z vrstvy struktury, aniž by byl zablokován styly, které stejně nemohou používat.
- Zpětná kompatibilita
- Pokud máte web, který je navržen s vývojovými vrstvami, bude více zpětně kompatibilní, protože prohlížeče nebo zařízení, které nemohou používat určité styly CSS nebo které mohou mít zakázaný JavaScript, mohou stále zobrazit HTML. Vaše webové stránky pak mohou být postupně rozšířeny o funkce pro prohlížeče, které je podporují.
HTML - struktura vrstvy
Vrstva struktury je místo, kde ukládáte veškerý obsah, který si zákazníci přejí číst nebo nahlížet. To bude kódováno v normě HTML5 a může obsahovat text a obrázky, stejně jako multimédia (video, audio atd.). Je důležité zajistit, aby každý aspekt obsahu vašeho webu byl zobrazen ve strukturové vrstvě. To umožňuje zákazníkům, kteří mají JavaScript vypnutý nebo kteří nemohou zobrazit CSS, aby měli stále přístup k celé webové stránce, ne-li ke všem funkcím tohoto webu.
CSS - Styly Layer
Vytvoříte všechny své vizuální styly pro své webové stránky v externím stylu. Můžete použít více stylů, ale nezapomeňte, že každý samostatný soubor CSS vyžaduje požadavek na načtení protokolu HTTP, který ovlivňuje výkon webu.
JavaScript - vrstva chování
JavaScript je nejčastěji používaným jazykem pro vrstvu chování, ale jak jsem již zmínil, CGI a PHP mohou také generovat chování webových stránek. To je řečeno, když většina vývojářů odkazuje na vrstvu chování, znamená to, že vrstvu, která je aktivována přímo ve webovém prohlížeči - takže JavaScript je téměř vždy zvoleným jazykem. Tuto vrstvu používáte k interakci přímo s DOM nebo objektovým modelem dokumentu. Psaní platného HTML ve vrstvě obsahu je také důležité pro interakce DOM ve vrstvě chování.
Při sestavování vrstvy chování byste měli používat externí soubory skriptů, stejně jako u CSS. Získáte všechny stejné výhody použití externího stylu.