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í verzePoslední revizeObě strany příští revize | ||
pristupnost:struktura_webu [2020/09/22 08:23] – linda | pristupnost:struktura_webu [2020/09/24 17:30] – [Nadpisy] eva | ||
---|---|---|---|
Řá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 vyjádřenou v **grafickém rozhraní stránky**, kterou vnímá běžný uživatel webu; | * strukturu vyjádřenou v **grafickém rozhraní stránky**, kterou vnímá běžný uživatel webu; | ||
* **zdrojový kód**, který je pro běžného návštěvníka webu neviditelný, | * **zdrojový kód**, který je pro běžného návštěvníka webu neviditelný, | ||
<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; | ||
Řádek 22: | Řádek 22: | ||
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 vymezeny | + | |
* %%< | * %%< | ||
* %%< | * %%< | ||
* %%< | * %%< | ||
- | Definice oblastí stránky | + | Tyto značky |
<WRAP center important> | <WRAP center important> | ||
Řádek 41: | Řádek 40: | ||
</ | </ | ||
- | 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:// | ||
Řádek 59: | Řádek 58: | ||
Název stránky: | Název stránky: | ||
* se zobrazí v prohlížeči v záhlaví okna, případně panelu; | * se zobrazí v prohlížeči v záhlaví okna, případně panelu; | ||
- | * přečte | + | * je údaj, který nevidomému uživateli |
* je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání. | * je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání. | ||
</ | </ | ||
Řádek 67: | Řádek 66: | ||
Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, a to bez ohledu na to, zda jde o uživatele s postižením nebo o 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, a to bez ohledu na to, zda jde o uživatele s postižením nebo o běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel: | ||
- | - 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 byly **nadpisy používány jednotně**. | - Snažte se, aby na všech stránkách webu byly **nadpisy používány jednotně**. | ||
- | - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřízený | + | - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřazený |
* nadpis 1 pro název stránky (na každé stránce by se měl vyskytovat pouze jednou); | * nadpis 1 pro název stránky (na každé stránce by se měl vyskytovat pouze jednou); | ||
- | * nadpis 2 pro názvy | + | * nadpis 2 pro názvy |
- | * nadpis 3 pro názvy článků; | + | * nadpis 3 až 6 pro názvy |
- | * nadpisy 4, 5 a 6 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 až H6 jsou značky používané v kódu HTML pro sémantické označení prvku heading, tedy nadpisu.)) označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese [[https:// | Na obr. 4 je pomocí značek H1 až H3 ((H1 až H6 jsou značky používané v kódu HTML pro sémantické označení prvku heading, tedy nadpisu.)) označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese [[https:// | ||
- | {{: | + | {{: |
//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žívání | + | * Správné používání nadpisů nejen ušetří práci (není nutné se starat o formátová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, |
</ | </ | ||
< | < | ||