Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revizePředchozí verzeNásledující verze | Předchozí verzeNásledující verzeObě strany příští revize | ||
pristupnost:struktura_webu [2020/09/15 14:02] – ↷ Odkaz upraven z důvodu přesunutí linda | pristupnost:struktura_webu [2020/09/22 17:41] – linda | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
====== -#14 Struktura webu ====== | ====== -#14 Struktura webu ====== | ||
- | Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak hierarchickou strukturu stránky vyjádřenou | + | Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak |
- | Jak struktura | + | Jak hierarchie |
- | * Strukturu | + | * strukturu |
- | * **Zdrojový | + | * **zdrojový |
<WRAP center tip> | <WRAP center tip> | ||
- | Správná struktura webové stránky a informací, které | + | Správná struktura webové stránky a informací, které obsahuje, má nezanedbatelný vliv na optimalizaci webu pro webové vyhledávače. |
</ | </ | ||
Řádek 13: | Řádek 13: | ||
===== Funkční oblasti webové stránky ===== | ===== Funkční oblasti webové stránky ===== | ||
- | Funkční oblasti | + | Funkčními oblastmi webové |
- | * Záhlaví | + | * záhlaví; |
- | * vyhledávací lišta, | + | * vyhledávací lišta; |
- | * navigační prvky (např. hlavní menu, menu druhé úrovně, rychlá navigace), | + | * navigační prvky (např. hlavní menu, menu druhé úrovně, rychlá navigace); |
- | * hlavní obsah, | + | * hlavní obsah; |
- | * zápatí stránky | + | * zápatí stránky. |
- | Běžný uživatel se v této struktuře může orientovat vizuálně, protože jednotlivé části webu jsou prezentovány ve formě bloků, mají své specifické umístění, | + | Běžný uživatel se v této struktuře může orientovat vizuálně, protože jednotlivé části webu jsou prezentovány ve formě bloků, mají své specifické umístění, |
- | Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky případně i webový vyhledávač) se musí na stránce orientovat jinak. Využívá k tomu značek ve zdrojovém kódu stránky. | + | Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky, případně i webový vyhledávač), se musí na stránce orientovat jinak. Využívá k tomu značky ve zdrojovém kódu stránky. |
==== Vymezení funkčních oblastí ve zdrojovém kódu ==== | ==== Vymezení funkčních oblastí ve zdrojovém kódu ==== | ||
- | Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, | + | Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, |
- | Funkční oblasti jsou definovány strukturálními | + | * %%< |
- | * %%< | + | * %%< |
- | * %%< | + | * %%< |
- | * %%< | + | Tyto značky |
- | Definice oblastí stránky | + | |
<WRAP center important> | <WRAP center important> | ||
Z hlediska přístupnosti webu je velmi důležité, | Z hlediska přístupnosti webu je velmi důležité, | ||
- | * správně definovány jednotlivé **funkční oblasti**, | + | * správně definovány jednotlivé **funkční oblasti**; |
- | * správnou **strukturu**, | + | * správnou **strukturu**, |
* validní zdrojový kód **bez sémantických chyb**. | * validní zdrojový kód **bez sémantických chyb**. | ||
</ | </ | ||
- | Definice oblastí stránek, nastavení chování stránek při práci s nadpisy seznamy | + | Definice oblastí stránek |
===== Název stránky a nadpisy ===== | ===== Název stránky a nadpisy ===== | ||
- | Pro přístupnost webu je důležité, | + | Pro přístupnost webu je velmi důležité, |
==== Název stránky ==== | ==== Název stránky ==== | ||
Na každé webové stránce **je nutné uvést název stránky**. | Na každé webové stránce **je nutné uvést název stránky**. | ||
- | Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název | + | Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název |
- | {{: | + | {{: |
//Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: [[https:// | //Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: [[https:// | ||
- | {{: | + | {{: |
//Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: [[https:// | //Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: [[https:// | ||
<WRAP center info> | <WRAP center info> | ||
- | ==== Proč je důležité uvádět název stránky | + | === Proč je důležité uvádět název stránky === |
- | * Název | + | Název stránky: |
- | * Nevidomému | + | * se zobrazí v prohlížeči v záhlaví okna, případně panelu; |
- | * Název stránky | + | * je údaj, který nevidomému |
+ | * je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání. | ||
</ | </ | ||
==== Nadpisy ==== | ==== Nadpisy ==== | ||
- | Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, bez ohledu na to, zda jde o uživatele s postižením nebo o tzv. běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel: | + | Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, |
- | - Používejte **nadpisy, které vystihují, co daná stránka nebo její část obsahuje**. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli | + | - Používejte **nadpisy, které vystihují, co daná stránka nebo její část obsahuje**. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli |
- Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. **Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu**. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3). | - Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. **Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu**. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3). | ||
- | - Snažte se, aby na všech stránkách webu byl **jednotný způsob | + | - Snažte se, aby na všech stránkách webu byly **nadpisy |
- | - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže | + | - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže |
- | | + | |
- | | + | |
- | | + | |
- | * Nadpisy 4, 5 atd. pro nadpisy | + | |
- | Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí | + | Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí na požadovaný nadpis |
- | {{: | + | {{: |
- | //Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami | + | //Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami |
<WRAP center tip> | <WRAP center tip> | ||
- | Existuje také řada [[pristupnost: | + | Existuje také řada [[pristupnost: |
</ | </ | ||
- | Na obr. 4 je pomocí značek H1 až H3 ((H1, H2, H3 atd. je značka používaná | + | Na obr. 4 je pomocí značek H1 až H3 ((H1 až H6 jsou značky používané |
- | {{: | + | {{: |
//Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: [[https:// | //Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: [[https:// | ||
<WRAP center info> | <WRAP center info> | ||
- | === Proč je důležité vkládat nadpisy | + | === Proč je důležité |
- | * Používaní správné struktury pomocí | + | * Správné používání |
- | * Obzvláště důležité | + | * Nadpisy jsou obzvláště důležité pro nevidomé návštěvníky webu. Ti se díky nim efektivně |
- | * Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je např. | + | * Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je jedním z nástrojů optimalizace pro vyhledávače (search engine optimization, |
</ | </ | ||
+ | < | ||