Internetové publikování Webdesign, přístupnost Petr Zámostný místnost: A-72a tel.: 4222 Konzultační.

Prezentace na téma: "Internetové publikování Webdesign, přístupnost Petr Zámostný místnost: A-72a tel.: 4222 Konzultační."— Transkript prezentace:

1 Internetové publikování Webdesign, přístupnost Petr Zámostný místnost: A-72a tel.: 4222 e-mail: petr.zamostny@vscht.czpetr.zamostny@vscht.cz Konzultační hodiny ZS: Úterý 13:00 – 14:30

2 Co si přečíst na WWW  10 Rad jak udělat „hloupou“ stránku http://jeffglover.com/sucky.html

3 Design stránky  Grafický design první dojem, rychlost stahování  Struktura stránek navigace, rozvržení plochy  Volba informací okruh čtenářů  Syntaktická správnost, validita  Metainformace pro snadnou indexaci vyhledávači

4 Grafický design - cíle  Přilákat a upoutat návštěvníka neměl by být odpudivý přiměřenost obsahu méně je někdy více - serióznost  Poskytnout webu jednotný vzhled a rámec  Principy designu http://www.digital- web.com/articles/principles_of_design/ http://www.digital- web.com/articles/principles_of_design/

5 Grafický design – výběr písma  Bezpatková písma jsou čitelnější  Kombinace max. 2 typů písma na jedné stránce  Řádka 40 – 60 znaků  Písmo raději větší, nastavitelné relativní jednotky %, em abs. velikosti xx-small,... xx-large

6 Typografie  Dodržování pravidel pravopisu  Dodržování typografických pravidel Typografie na internetu Webdesignerovy poznámky z typografie

7 Struktura stránek  Hypertext umožňuje provázat dokumenty zcela libovolně  Hierarchická (stromová) architektura je tradiční, dobře akceptovaná návštěvníky  Rozdělení příliš dlouhých stránek  Rolování první obrazovka "above fold" – musí upoutat zbytek

8 Odkazy  Musí být na první pohled zřejmé, že jde o odkaz, kliknutelnost podtrhávat a barevně odlišovat odkazy nepodtrhávat jiný text zkuste spočítat odkazy na jkrowling.comjkrowling.com  Odlišování navštívených odkazů  Atribut Title Ukázka Ukázka

9 Odkazy – choroba "vicezdemie"  Vicezdemie je choroba, která naštěstí není fatální. U webu ale může způsobovat chronickou ztrátu návštěvníků. Projevuje se zvýšeným výskytem odkazů typu více zde, které se na stránkách objevují ve více formách (pokračování zde, zde apod.). Zvláště rafinovaná forma byla pojmenována podle svého původce propokračováníkliknětezdemisus. zdroj: conBLOG

10 Kam šmejdí oči...  Typické pohyby očí návštěvníků po vstupu na stránku Nejčastěji se návštěvník zaměří na levý horní roh až po chvíli se dívá směrem dolů Zdroj: http://www.poynterextra.org

11 Prominentní zóny na stránce...  Rozdělení zón podle toho, jak rychle si návštěvník v nich umístěného elementu Zdroj: http://www.poynterextra.org

12 Metadata  Informace o dokumentu  Usnadňují automatické zpracování  Metadata na stránce název... metainformace relace

13 Přístupnost  Přístupnost obecně Pod pojmem přístupnost chápeme takový stav, kdy daná věc neklade svým uživatelům při používání žádné překážky. Přístupnou budovu mohou tedy např. používat vozíčkáři a přístupný web zase např. slabozrací. Přístupnost je tedy bezbariérovost.  Přístupnost webových stránek Pojem přístupnosti webových stránek je tedy oproti obecnému pojmu zúžen na funkčnost webových stránek. Přístupné stránky tedy nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat. Zdroj: PřístupnostPřístupnost

14 Proč má být web přístupný  Více návštěvníků  Přístupný web je přístupný i pro roboty vyhledávačů  Posilování značky  Zákonnost

15 Hendikepovaní uživatelé  Zrakově postižení http://www.sovavsiti.cz/kontrast/  Sluchově postižení  Pohybově postižení nefunguje myš  Uživatelé se zobrazovacími problémy handicap uživatelova počítače  Uživatelé s pouruchami učení a soustředění přehledná navigace, členění  Roboti

16 Přístupnost  Pravidla tvorby přístupného webu Pravidla tvorby přístupného webu  Testování přístupnosti Ruční kontrola  při vypnuté grafice,  bez povoleného skriptování,  v textovém prohlížeči (Lynx, Links apod.),  při ovládání klávesnicí,  při různých velikostech okna,  bez barev,  bez kaskádových stylů atp.

17 Přístupnost  Automatické testování Cynthia says Wave

18 Nejdůležitější zásady (příklad)  W4D – Worth World Wide Web Dogma http://www.pixy.cz/dogma/dogmaw41/cs/in dex.html http://www.pixy.cz/dogma/dogmaw41/cs/in dex.html