Uživatelské nástroje

Nástroje pro tento web


pristupnost:zjisteni_barev

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze
Předchozí verze
pristupnost:zjisteni_barev [2020/09/15 09:15] – ↷ Stránka přejmenována z 'pristupnost:colorzilla' na 'pristupnost:zjisteni_barev' lindapristupnost:zjisteni_barev [2020/09/24 13:47] (aktuální) epub
Řádek 3: Řádek 3:
 ===== Instalace doplňku ColorZilla ===== ===== Instalace doplňku ColorZilla =====
  
-  - Ve webovém prohlížeči Chrome nebo Firefox zadejte adresu **https://www.colorzilla.com/**+  - Ve webovém prohlížeči Chrome nebo Firefox zadejte adresu https://www.colorzilla.com/\\ \\  
-  - Z nabídky zvolte **ColorZilla for Chrome and Firefox**. Další nabídka se přizpůsobí Vašemu prohlížečiněkteré detaily se proto mohou lišit podle použitého prohlížeče+  - Z nabídky zvolte **ColorZilla for Chrome and Firefox**. Další nabídka se přizpůsobí vašemu prohlížečiněkteré detaily se proto mohou lišit.\\ \\  
-  - Klikněte na tlačítko **Install ColorZilla** (většinou je u tlačítka uvedena také verze rozšíření). +  - Klikněte na tlačítko **Install ColorZilla** (většinou je u tlačítka uvedena také verze rozšíření). \\ \\  
-  - Klikněte na tlačítko **Přidat do Chromu**, resp. **Přidat do Firefoxu**. +  - Klikněte na tlačítko **Přidat do Chromu**, resp. **Přidat do Firefoxu**.\\ \\  
-  - Dokončete instalaci doplňkuvčetně udělení potřebných oprávnění. +  - Dokončete instalaci doplňku (včetně udělení potřebných oprávnění).\\ \\  
-  - Po instalaci se v pravém horním rohu prohlížeče vedle adresního řádku objeví doplňku ColorZilla ve formě ikony kapátka, viz obr. 1. \\ {{:pristupnost:colorzilla_ikona.png|Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči}}//Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči (zdroj: archiv autorky)//+  - Po instalaci se v pravém horním rohu prohlížeče vedle adresního řádku objeví doplněk ColorZilla ve formě ikony se symbolem kapátka, viz obr. 1. \\ {{:pristupnost:colorzilla_ikona.png|Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči}} \\ //Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči (zdroj: archiv autorky)//
  
-===== Získání barvy z webové stránky pomocí volby Color picker ===== +===== Získání barvy z webové stránky pomocí volby Color Picker ===== 
-  - Klikněte na ikonu nástroje ColorZilla (na kapátko). Tím aktivujete nástroj pro výběr barev. Pod ikonou kapátka by se po kliknutí na ikonu měl zobrazit text **Page Color Picker Active**. V případě, že se tento text po kliknutí na ikonu nezobrazí, v otevřené nabídce klikněte na položku **Color Picker** (viz obr. 2). {{:pristupnost:color_picker_active.png|Obr. 2: Aktivace nástroje Color Picker}} \\ //Obr. 2: Aktivace nástroje Color Picker (zdroj: archiv autorky)// +  - Klikněte na ikonu nástroje ColorZilla (na kapátko). Tím aktivujete nástroj pro výběr barev. Pod ikonou kapátka by se po kliknutí na ikonu měl zobrazit text **Page Color Picker Active**. V případě, že se tento text po kliknutí na ikonu nezobrazí, v otevřené nabídce klikněte na položku **Color Picker** (viz obr. 2).\\  {{:pristupnost:color_picker_active.png|Obr. 2: Aktivace nástroje Color Picker}} \\ //Obr. 2: Aktivace nástroje Color Picker (zdroj: archiv autorky)// \\ \\  
-  - Kurzor se změní v křížek a v horní části prohlížeče pod adresním řádkem se vysune černá lišta. Čtvereček na liště zobrazuje barvu oblasti stránky, na které se právě nachází kurzor (viz obr. 3)((Jako příklad byl využit web Národní knihovny ČR.)). \\ \\ {{:pristupnost:color_picker_active2.png|Obr. 3: Výběr barvy z webové stránky}} \\ \\ //Obr. 3: Výběr barvy z webové stránky (zdroj: archiv autorky)//+  - Kurzor se změní v křížek a v horní části prohlížeče pod adresním řádkem se vysune černá lišta. Čtvereček na liště zobrazuje barvu oblasti stránky, na které se právě nachází kurzor (viz obr. 3)((Jako příklad byl použit web Národní knihovny ČR.)). \\ \\ {{:pristupnost:color_picker_active2.png?1100|Obr. 3: Výběr barvy z webové stránky}} \\ //Obr. 3: Výběr barvy z webové stránky (zdroj: archiv autorky)// \\ \\ 
   - Vyberte požadovanou oblast stránky a klikněte na ni myší. Vybraná barva se vloží do paměti (historie) nástroje ColorZilla. \\ \\ <WRAP center tip>   - Vyberte požadovanou oblast stránky a klikněte na ni myší. Vybraná barva se vloží do paměti (historie) nástroje ColorZilla. \\ \\ <WRAP center tip>
-Pokud potřebujete zjistit barvu písma a písmo je příliš malé, takže je problém umístit na ně kurzor, můžete si zobrazení stránky zvětšit pomocí kombinace kláves **CTRL** **+**.+Pokud potřebujete zjistit barvu písma a písmo je příliš malé, takže je problém umístit na ně kurzor, můžete si zobrazení stránky zvětšit pomocí kombinace kláves ctrl a +.
 </WRAP>  </WRAP> 
-  - Kliknutím na ikonu ColorZilla otevřete nabídku a vyberte z ní položku **Color Picker**. Zobrazí se nástroj pro úpravu barev. +  - Kliknutím na ikonu nástroje ColorZilla otevřete nabídku a vyberte z ní položku **Color Picker**. Zobrazí se nástroj pro úpravu barev. \\ \\  
-  - Z historie uložených barev (Color History) napravo vyberte kliknutím čtvereček s požadovanou barvou a dole zkopírujte hodnotu hexadecimálního kódu barvy (viz obr. 4). Tento kód pak můžete zadat do validátoru kontrastu nebo do kódu webové stránky. \\ {{:pristupnost:color_history_vyber.png|Obr. 4: Historie vybraných barev}} //Obr. 4: Historie vybraných barev (zdroj: archiv autorky)//+  - Z historie uložených barev (**Color History**) napravo vyberte kliknutím čtvereček s požadovanou barvou a dole zkopírujte hodnotu hexadecimálního kódu barvy (viz obr. 4). Tento kód pak můžete zadat do validátoru kontrastu nebo do kódu webové stránky. \\ {{:pristupnost:color_history_vyber.png|Obr. 4: Historie vybraných barev}} \\ //Obr. 4: Historie vybraných barev (zdroj: archiv autorky)// \\ 
  
 ===== Získání barev pomocí volby Webpage Color Analyzer ===== ===== Získání barev pomocí volby Webpage Color Analyzer =====
 Využít lze také nástroj pro hromadnou analýzu barev v definici webové stránky, tzv. Webpage Color Analyzer. Využít lze také nástroj pro hromadnou analýzu barev v definici webové stránky, tzv. Webpage Color Analyzer.
-  - Klikněte na ikonu nástroje ColorZilla (na kapátko). +  - Klikněte na ikonu nástroje ColorZilla (na kapátko). \\ \\  
-  - Z rozbalovací nabídky zvolte položku **Webpage Color Analyzer**. V horní části stránky se zobrazí okno s přehledem použitých barev (viz obr. 5)((Jako příklad byl využit portál Knihovny.cz.)) \\ \\ {{:pristupnost:webpage_color_analyser.png?400|Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer}} \\ //Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer (zdroj: [[https://www.knihovny.cz/|Knihovny.cz]], získáno 2020-08-25)// +  - Z rozbalovací nabídky zvolte položku **Webpage Color Analyzer**. V horní části stránky se zobrazí okno s přehledem použitých barev (viz obr. 5).((Jako příklad byl použit portál Knihovny.cz.)) \\ \\ {{:pristupnost:webpage_color_analyser.png?900|Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer}} \\ //Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer (zdroj: [[https://www.knihovny.cz/|Knihovny.cz]], získáno 2020-08-25)// \\ \\  
-  - Pokud na některou z barev kliknete myší, zobrazí se informace o dané barvě a stylů na stránce, ve kterých je daná barva použita (viz obr. 6). \\ \\ {{:pristupnost:webpage_color_analyser2.png?400|Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer}} \\ //Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer (zdroj: archiv autorky)//+  - Pokud na některou z barev kliknete myší, zobrazí se informace o dané barvě a stylech na stránce, ve kterých je použita (viz obr. 6). \\ \\ {{:pristupnost:webpage_color_analyser2.png?900|Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer}} \\ //Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer (zdroj: archiv autorky)// 
 + 
 + 
 +<-overeni_kontrastu|Ověření kontrastu^obsah|Obsah^celkove_overeni_pristupnosti|Celkové ověření přístupnosti->
pristupnost/zjisteni_barev.1600154145.txt.gz · Poslední úprava: 2020/09/15 09:15 autor: linda