Proč dodržet zásady správného návrhu webu?

Hned na začátku se pokusím vyzdvihnout výhody plynoucí ze správného psaní stránek. Bodově se jedná asi o toto:

• správné zobrazení stránky
• dobré indexování vyhledávači
• možnost zobrazení na rozličných zařízeních
• možnost použití stránek hendikepovanými uživateli
• tvorba je jednodušší
• jednodušší jsou změny a úpravy
• uživatelé se budou na web vracet

Samozřejmě, že dodržení těchto pravidel neslouží pouze k uspokojení tvůrce webu. To, zda je kód stránky napsaný správně, zaujme pouze odborníka. Pro normálního uživatele je důležité, aby se stránka dobře zobrazila. Ale právě správně zapsaný kód nám pomůže v správném zobrazení stránky a to v různých prohlížečích. Bohužel jsou zde problémy, kdy se například správný zápis zobrazí v Internet Exploreru nesprávně.

Když máme správně sémanticky napsaný web s využitím CSS, tak se na starších či mobilních zařízeních zobrazí bez stylů a při tom použitelně. Navíc vyhledávací robot bude našemu webu "rozumět" a proto jej dobře indexovat.

Při správném zápisu a oddělení obsahu a formátování, napíšeme mnohem méně kódu do HTML stránky a formátování bude jednotné. Také jednou úpravou CSS můžeme dosáhnout změny na všech prvcích. Jednoduše se dá měnit i celý layout (rozvržení) webu.

Samozřejmě, pro to, aby uživatelé často navštěvovali náš web, je hlavní jeho obsah. Ale nemalou roli hraje i to, jak se na webu bude uživatel cítit. Jestli rychle najde to, co hledá. Jestli bude zobrazení příjemné a přehledné.

Hlavní zásady tvorby webu

Co bychom měli dodržet při psaní webu:

• správnou syntaxi – validní kód
• správnou sémantiku
• oddělení obsahu a formátování – HTML a CSS
• optimalizaci pro vyhledávání – SEO

Jaké by stránky měli být:

• přístupné
• použitelné

Správná syntaxe – validní kód

• uvést korektní DOCTYPE
• určit jazyk obsahu
• používat pouze správné tagy a správné vnořování (řazení)

Pojem syntaxe znamená "skladba; nauka o vzájemných vztazích skladebných prvků jazyka; pravidla pro vytváření přípustné kombinace symbolů". A hovoří o tom "jak se to zapisuje", tedy popisuje jednotlivé elementy a atributy, řekněme jednoduše příkazy jazyka.

Validní kód označuje platný kód, který odpovídá dané syntaxi. Validace je způsob, jakým můžeme ověřit, zda náš kód odpovídá specifikaci a tudíž je správný. Validaci webové stránky můžeme provést pomocí různých validátorů na webu. Existují validátory pro HTML a CSS, ale také pro Feedy, odkazy, WAI (přístupnost) a další. Jako základ můžeme využít validátory organizace W3C, např. validator.w3.org. Pokud používáte prohlížeč Firefox, tak si můžete nainstalovat rozšíření HTML Validator, což je off line validátor (využívá W3C Tidy validátor) a pokud zobrazíte zdrojový kód stránky, tak provede základní kontrolu. Dalším velice užitečným rozšířením pro všechny tvůrce webu je Web Developer, který obsahuje ohromné množství výborných nástrojů a mimo jiné odkazy na řadu validátorů.

Co se týče specifikace, tak bych doporučil použít HTML 4.01 Strict nebo XHTML 1.0 Strict. Dnes máme na výběr (ostatní verze jsou zastaralé) buď specifikaci HTML 4.01 nebo XHTML 1.0, i když mezi nimi (verze Strict) není velký rozdíl (XHTML se více blíží ke XML). HTML 4.01 může být typu Frameset, ale používání rámů je dnes již dlouho historie (a doufám, že je nikdo nepoužívá), dále Transitional (přechod ze starší verze) nebo Strict (přísné dodržení specifikace). Pokud tvoříme nové stránky, tak není problém dodržet specifikaci Strict a nemá cenu používat verzi Transitional, ta slouží pouze při přetváření staršího webu (podporuje některé tagy, které byly zrušeny). U XHTML máme Transitional a Strict. Ještě existuje nepříliš používaná verze XHTML 1.1 (ač je to zvláštní, tak XHTML 1.0 je novější, neboť byla tato verze revidována).

Na začátku dokumentu je vždy třeba uvést DOCTYPE, ten určuje podle jaké specifikace je daná stránka napsána a říká prohlížeči jakou množinu tagů má použít. Stránka se vám zobrazí, i když tento DOCTYPE neuvedete, ale plyne z toho řada problémů. Prohlížeč použije nějakou výchozí specifikaci a např. Internet Explorer zobrazuje stránku v tzv. "Quirck modu", kdy dělá velkou řadu chyb oproti specifikaci (IE do verze 5.5 zobrazuje stránku vždy v Quirck modu, až od verze 6 se při uvedení DOCTYPE použije správný režim).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Po tom co si určíme, jakou specifikaci použijeme, tak samozřejmě musíme používat množinu tagů z této specifikace a u některých tagů správné atributy. Také je třeba dodržet správné vnořování, například do řádkového (inline) elementu se nesmí vnořit blokový element. V žádném dokumentu (HTML, XHTML, XML) není povoleno křížení elementů, tzn. překrytí začátku nebo konce tagu, př. <strong><em>text</strong></em>, správně <strong><em>text</em></strong>. Všechny tyto věci nám kontroluje validátor, takže při časté kontrole vyvíjené stránky se nebudeme dopouštět chyb a naučíme se správný zápis.

Správná sémantika

• sémantická správnost – užívání tagů h1, h2, p, code, abbr ...
• k obrázkům uvádět alternativní text (obrázky, které nemají obsahovou hodnotu, vkládat pomocí CSS)

Pojem sémantika znamená "nauka o významu jazykových jednotek". A vyjadřuje "co to znamená", tedy popisuje, jaký význam mají jednotlivé příkazy.

Správná sémantika je vedle dobré syntaxe asi druhá nejdůležitější věc na webu. Jde o to, abychom používali tagy pro správný účel. Takže například když píšu nadpis, tak jej uzavřu do tagu h1, h2 ... (podle úrovně), pro ukázku kódu použiji tag code. Nebo v globálnějším pohledu, pro rozmístění stránky – vytvoření layoutu, nepoužiji tabulky (jak se v dřívějších dobách, a bohužel někde i dodnes, používalo), ale sémanticky neutrální elementy – div a pro vytvoření menu použiji netříděný seznam.

V dnešní době se řada autorů dopouští chyby v opačném směru, snaží se vše stylovat pomocí CSS (to by bylo ještě dobře) a pro všechny prvky používá pouze div a span s třídou, což je opět špatně (například tvořit nadpis pomocí divu). Podrobně o layoutu, menu apod. bude další článek.

Musím říct, že správné užívání sémantiky není jednoduché. Já mám třeba problémy rozlišit použití značek abbr a acronym, které jsou podobné. Nebo zvolit správnou sémantickou reprezentaci pro určitý objekt, jako třeba netříděný seznam pro menu nebo tříděný seznam pro komentáře.

Ukázka obsahu dokumentu se sémantickými značkami:

<h1>Hlavní nadpis</h1>
<h2>První část</h2>
<p>Odstavec, který obsahuje <strong>důležité informace</strong>.
   <abbr title="By The Way - mimochodem">BTW</abbr>, také tu máme nějakou zkratku.</p>
<p>Můžeme popsat <code>příkaz</code>, třeba tímto obrázkem:
   <img alt="zobrazení příkazu" src="obr.gif"></p>

Oddělení obsahu a formátování

• obsah pouze s doplněním sémantického významu
• formátování pomocí CSS v samostatném souboru

Jazyk HTML byl vytvořen pro zápis obsahu – informací. Časem přišla potřeba "hezkého" zobrazení, tak byly přidány tagy pro formátování výstupu. Ovšem zápis obsahu i formátování do jednoho souboru má mnoho nevýhod. Je nejednotný, když chceme změnit zobrazení např. všech nadpisů, musíme měnit kód u každého nadpisu. Pro automatické nástroje, které zjišťují význam dokumentu (např. čtečky pro nevidomé), je nepřehledný (formátování přináší zmatek). Jsou problémy s výstupem na rozdílná zobrazovací zařízení, např. obrazovka a tiskárna. Proto byly tyto formátovací tagy z HTML ve verzi 4 odstraněny a formátování by se mělo provádět pomocí CSS – Cascade Style Sheet, nejlépe v samostatném souboru. Správné použití CSS odstraňuje všechny dříve popsané nevýhody.

Definice CSS stylů se dají vkládat přímo do HTML stránky nebo dokonce uplatnit přímo na element pomocí atributu style. Správně se však doporučuje uvádět definice stylů v externím souboru a přímé stylování používat minimálně (odporuje výše popsaným zásadám). Další možností je použít třídy pomocí atributu class, toto řešení je již lepší, ale jak již název napovídá CSS je kaskádní a doporučuje se v maximální míře využít kaskádnosti a definovat vlastnosti přímo na tagy. Toto bylo velice stručně o stylech, podrobněji o CSS bude další článek.

Optimalizace pro vyhledávání – SEO

• jazykově bohatý obsah
• dobře strukturovaný a přístupný
• smysluplné titulky stránek
• smysluplné nadpisy
• bohaté adresy
• zpětné odkazy

Tento bod se možná nezdá jako podstatný pro dobré stránky, ale většina lidí tvoří web pro to, aby jej navštěvovalo co nejvíce lidí. Navíc mnoho věcí, které se týkají SEO souvisí s již dříve uvedenými pravidly, čili dobře napsaný web je základ pro dobré SEO. Metodika, která se zabývá optimalizací pro vyhledávače se jmenuje SEO - Search Engine Optimalization.

Stránky musí být sémanticky (jazykově) bohaté. To znamená obsah určitého rozsahu s pestrým významem. Velice důležité je používání titulku title, aby odpovídal obsahu stránky a na každé stránce se měnil. Vhodná volba nadpisů a více úrovní h1, h2, h3 ... s dobrým významem. Užívání zvýraznění strong, korektní odkazy a s dobrým jménem a významem v atributu title, používání atributu alt u obrázků (vyhledávač obrázek nevidí), apod. Tyto vlastnosti ovlivňují, jak vyhledávací robot vidí náš web. S tím také souvisí užívání klíčových slov, hlavně v titulcích, nadpisech a pomocí meta tagů (poslední dobou význam meta tagu pro klíčová slova poklesl).

Bohaté adresy – to znamená, aby adresa vaší stránky měla významový obsah (byla zde uvedena klíčová slova). Je to první, a důležitá, věc, kterou vyhledávač registruje. Takže například na webu, který obsahuje různé články, není dobrá adresa www.mujweb.cz/index.php?i=1502, místo toho je dobré něco jako www.mujweb.cz/clanky/nejlepsi-clanek-o-webu. O problematice adres chystám další článek, bude o využití mod-rewrite u Apache.

Téměř nejdůležitější věcí pro vyhledávače je, jak je váš web oblíbený, tedy kolik na něj vede odkazů z jiných stránek. A to ještě, čím lépe je hodnocená stránka, z které vede odkaz, tím lépe se hodnotí tento odkaz. Takže je třeba, aby váš web měl bohatý obsah a jiní lidé uváděli odkazy dovnitř vašeho webu. Dobře musí být utvořena i struktura odkazů uvnitř vašeho webu.

Přístupnost

Webové stránky by měli být přístupné všem, ať mají libovolný operační systém, webový prohlížeč (i staré verze), či jiné zařízení (např. PDA), či změněné zdravotní dispozice. Proto existují určitá pravidla, co se týče použití grafiky, interaktivity a obsahu. Každá stránka by měla mít možnost zobrazení pomocí čistého textu, k obrázkům a jiným netextovým prvkům poskytovat alternativní text, jasně rozpoznatelné odkazy (a ne pouze barvou). Řešením je tvořit správně sémantický web s odděleným obsahem (HTML) a vzhledem (CSS).

Základní pravidla pro zobrazení

Vzhled pro obrazovku

• jeden font (z typografie max. 3) - bezpatkový
• čitelný text (nepoužívat efekty na písmo)
• nízký počet barev, spíše kombinovat odstíny
• dostatečný kontrast (sovavsiti.cz/kontrast/)

Vzhled pro tiskárnu

• patkové písmo, velikost 100%
• černobílý vzhled
• odstranění grafiky a přebytečných částí
• linky bez podtržení

Použitelnost

• používat relativní velikost textu (%, em)
• layoutu pro různá zařízení (zatím jen obrazovka, tiskárna)
• přehledné a jasné ovládání a rozvržení stránky
• využívání chybových stránek 404
• zvýrazňování důležitých bodů v článku

Aby lidé používali určitý web, musí být použitelný. Úvodní stránka musí obsahovat přehledně a jasně informace o náplni webu. Orientace a ovládání musí být přehledné a na první pohled jasné i nezkušenému uživateli. Na stránkách musí návštěvník jednoduše najít odpovědi na otázky, kvůli kterým sem zavítal. Potom stránky splní svůj smysl a uživatel se na ně bude rád vracet.

Pár slov na závěr

Samozřejmě se neobejdeme bez toho, abychom náš web neoptimalizovali pro určitý prohlížeč, zařízení, apod. To neznamená, že nebude v jiných prohlížečích použitelný, ale pouze méně komfortní. Například můžeme využít vlastnosti, které podporují modernější verze prohlížečů, které používá většina uživatelů, a objekt se zobrazí hezčím způsobem. Pokud však přistoupíme na stránku ze starší verze prohlížeče, tak se tato vlastnost neuplatní, ale obsahová stránka se zobrazí.

Pro rozhodnutí, kterým směrem upírat svoji práci, mohou pomoci statistiky toho, co se dnes používá. Například na http://www.toplist.cz/global.html nebo http://www.w3schools.com/browsers/browsers_stats.asp.

Ještě příklad jak by měla vypadat taková kostra stránky (bez obsahu):

<!-- toto je komentář; dále je definováno DTD HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- kořenový element dokumentu s určením jazyka-->
<html lang="cs">
<!-- hlavička -->
  <head>
<!-- meta (informace) tagy - určení kódování a jazyka dokumentu  -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="cs">
<!-- další meta tagy - různé informace jako author, description, keywords, robots ...  -->
    <meta name="author" content="All: Samuraj - Petr Bouska; e-mail: bouskap@samuraj-cz.com">
    <meta name="description" content="Popis webu, používá jej i Google, když zobrazuje obecně Váš web.">
<!-- titulek stránky -->
    <title>Nadpis aktuální stránky</title>
<!-- připojení různých souborů, jako CSS, alternativního výstupu (RSS), ikony webu (favicon) ... -->
    <link rel="stylesheet" type="text/css" href="css_soubor.css" media="screen">
    <link rel="shortcut icon" href="favicon.ico">
  </head>
<!-- tělo dokumentu -->
  <body>
<!-- obsah stránky -->
  </body>
</html>

Odkazy

• Specifikace
  • W3C HTML, XHTML - http://www.w3.org/MarkUp/
  • W3C CSS - http://www.w3.org/Style/CSS/
• Validátory
  • W3C CSS validátor - http://jigsaw.w3.org/css-validator/
  • W3C HTML validátor - http://validator.w3.org/
  • WDG HTML validátor - http://www.htmlhelp.com/tools/validator/
  • Speed report - http://www.websiteoptimization.com/services/analyze/
  • Accessibility Report (WAI) - http://www.contentquality.com/
• Statistiky
  • TOPlist - http://www.toplist.cz/global.html
  • W3 schools - http://www.w3schools.com/browsers/browsers_stats.asp
• Přístupnost, použitelnost ...
  • Pravidla tvorby přístupného webu - http://pristupnost.nawebu.cz/texty/pravidla-standardy.php?full
  • Sémantika - http://www.semantika.name/
  • SEO - http://www.h1.cz/seo
  • Použitelnost - http://www.dobryweb.cz/metody/pouzitelnost.html