Lidé, kteří pracují v webový design průmysl přirovnává vývoj front-endových webových stránek k trojnohé stoličce. Tyto tři části - tři vrstvy vývoje webu - zahrnují strukturu, styl a chování webu.
Proč byste měli oddělit vrstvy?
Když vytváříte webovou stránku, její struktura by měla být odsunuta do vašeho HTML, vizuální styly do CSSa chování skriptů. Mezi výhody oddělování vrstev patří:
- Sdílené prostředky: Když píšete externí soubor CSS nebo JavaScript, může jej použít jakákoli stránka na webu. Pokud potřebujete provést změnu v tomto souboru, možná v aktualizovat některé typografické styly na webu získá změnu každá stránka, která tento styl používá. Není nutné upravovat každou stránku webu individuálně, což by mohlo být náročným úkolem pro velké webové stránky.
- Rychlejší stahování: Poté, co si zákazník poprvé stáhne skript nebo šablonu stylů, uloží je webový prohlížeč do mezipaměti. Protože tyto sdílené prostředky jsou nyní obsaženy v mezipaměť prohlížeče, další stránky, které jsou v prohlížeči požadovány, se načítají rychleji, což zlepšuje celkovou rychlost a výkon stránky.
- Týmy pro více osob: Pokud na webu pracuje více než jedna osoba najednou, použijte systémy pro správu verzí, které umožňují kontrolu a přihlašování souborů, aby bylo zajištěno, že každý pracuje s nejnovější verze. Tento proces je mnohem těžší provést, pokud jsou styly a chování propleteny s dokumenty struktury.
- SEO: Web, který prokazuje jasné oddělení stylu a struktury, bude pravděpodobně pro vyhledávače fungovat lépe, protože může tento obsah procházet efektivněji a porozumět stránce, aniž by se ponořil do vizuálního stylu a chování informace.
- Přístupnost: Externí šablony stylů a soubory skriptů jsou přístupnější lidem i prohlížečům. Software jako čtečky obrazovky může snáze zpracovávat obsah z vrstvy struktury, aniž by se zabýval styly, které stejně nemohou použít.
- Zpětná kompatibilita: Web, který je navržen se samostatnými vývojovými vrstvami, bude pravděpodobně zpětně kompatibilní, protože prohlížeče a zařízení, která nemohou používat určité styly CSS nebo mají zakázaný JavaScript, mohou soubor nadále prohlížet HTML. Poté můžete svůj web postupně vylepšovat funkcemi pro prohlížeče, které je podporují.
HTML: Vrstva struktury
Struktura nebo vrstva obsahu webové stránky je podkladem HTML kód této stránky. Stejně jako rám domu vytváří silný základ, na kterém je postaven zbytek domu, pevný základ HTML vytváří platformu, na které lze vytvářet webové stránky.
Ve vrstvě struktury je uložen veškerý obsah, který si vaši zákazníci chtějí přečíst nebo prohlédnout. Struktura HTML se může skládat z textu a obrázků a zahrnuje hypertextové odkazy které návštěvníci použijí k procházení webových stránek. Tyto informace jsou kódovány v souladu s normami HTML5 a může zahrnovat text, obrázky a multimédia (video, audio atd.).
Každý aspekt obsahu webu by měl být zastoupen ve vrstvě struktury. Toto oddělení umožňuje zákazníkům, kteří mají vypnutý JavaScript nebo kteří nemohou zobrazit přístup CSS na celý web, pokud ne všechny jeho funkce.
CSS: Vrstva stylů
Tato vrstva určuje, jak bude strukturovaný dokument HTML vypadat návštěvníkům webu a jak je definován CSS (Kaskádové styly). Tyto soubory obsahují stylistické pokyny, jak by měl být dokument zobrazen ve webovém prohlížeči. Vrstva stylu obvykle zahrnuje mediální dotazy které mění zobrazení webu na základě velikost obrazovky a zařízení.
Všechny vizuální styly pro web by se měly nacházet v externí šabloně stylů. Můžete použít více šablon stylů, ale každý soubor CSS vyžaduje načtení požadavku HTTP, ovlivňující výkon webu.
JavaScript: Vrstva chování
Díky vrstvě chování je web interaktivní, což umožňuje stránce reagovat na akce uživatelů nebo se měnit na základě souboru podmínek. JavaScript je nejčastěji používaný jazyk pro vrstvu chování, ale CGI a PHP jsou také velmi často používány.
Když vývojáři odkazují na vrstvu chování, většina z nich znamená vrstvu, která se aktivuje přímo ve webovém prohlížeči. Tuto vrstvu použijte k přímé interakci s objektovým modelem dokumentu. Psaní platného HTML ve vrstvě obsahu je důležité pro interakce DOM ve vrstvě chování. Když vytvoříte vrstvu chování, měli byste k optimalizaci rychlosti a výkonu použít externí soubory skriptů, stejně jako u CSS.