Internetové publikování Webdesign, přístupnost Petr Zámostný místnost: A-72a tel.: Konzultační hodiny ZS: Úterý 13:00 – 14:30

Co si přečíst na WWW  10 Rad jak udělat „hloupou“ stránku

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

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 web.com/articles/principles_of_design/ web.com/articles/principles_of_design/

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

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

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

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

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

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:

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:

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

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

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

Hendikepovaní uživatelé  Zrakově postižení  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

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.

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

Nejdůležitější zásady (příklad)  W4D – Worth World Wide Web Dogma dex.html dex.html