Vyšší odborná škola a Střední škola, s.r.o. České Budějovice Pražská 3. Absolventská práce Michal Fouček

Transkript

1 Vyšší odborná škola a Střední škola, s.r.o. České Budějovice Pražská 3 Absolventská práce 2008 Michal Fouček

2 Prohlašuji, že jsem absolventskou práci vypracoval samostatně a že jsem veškerou použitou literaturu uvedl v seznamu použitých zdrojů. V Českých Budějovicích dne

3 Vyšší odborná škola a Střední škola, s.r.o. České Budějovice Pražská 3 Studijní obor: Výpočetní technika a programování Oficiální www prezentace obce Milejovice Webdesign Absolventská práce Autor: Michal Fouček Vedoucí absolventské práce: PaedDr. Petr Pexa

4 Tímto bych chtěl poděkovat PaedDr. Petru Pexovi za odborné vedení, připomínky a cenné rady při vypracování absolventské práce.

5 1.Obsah 1.Obsah Úvod Webdesign Co je to webdesign Působení stránek Zvyklosti na internetových stránkách Zacílení internetových stránek Grafický vzhled internetových stránek Účel grafiky na internetových stránkách Rozměry internetových stránek Pevné rozměry stránek Relativní rozměry stránek Prvky internetových stránek Záhlaví stránky Navigace stránky Globální navigace Subnavigace Drobečková navigace Umístění navigace Horizontální umístění Umístění vlevo Umístění vpravo Vyhledávání Obsahová část stránky Zápatí stránky Bezpečná oblast

6 3.10.Search Engine Optimization (SEO) Optimalizace na internetové stránce Klíčová slova Důležité tagy na stránkách URL adresa Odkazy na stránku Anchor text (link text) Kompozice internetových stránek Pravidla kompozice internetových stránek Kontrast Opakování Zarovnání Optický střed Umístění textu Prázdné místo Výběr barev Pravidla pro tvorbu přístupného webu Obsah internetových stránek je dostupný a čitelný Práci se stránkou řídí uživatel Informace jsou přehledné a srozumitelné Ovládání internetových stránek je jasné a pochopitelné Odkazy jsou zřetelné a návodné Kód je technicky způsobilý a strukturovaný Aby návštěvník nepřemýšlel Prohlížení internetových stránek návštěvníkem Stránky návštěvník nečte Návštěvník dělá kompromisy

7 4.Oficiální prezentace obce Milejovice Rozhraní pro návštěvníka stránek Přihlášení do administrace stránek Rozhraní pro administraci stránek Obecní úřad Informace o obci Dokumenty Novinky Odhlášení Závěr Použitá zdroje Literatura Internet

8 2.Úvod Webdesign je důležitý prvek při tvorbě internetových stránek. Autor stránek by si měl před samotnou tvorbou rozmyslet, jak vlastně bude rozvržení stránek vypadat. V této práci bych rád poskytl informace o tom, co hraje při navrhování internetových stránek velkou roli. To jak se vlastně chová návštěvník při návštěvě stránek a jak je vlastně vnímá. Občas se totiž to, jak si autor stránek myslí, že se bude návštěvník stránek na jeho stránkách chovat různí od toho, jak se opravdu chová. Dále zde čtenář nalezne informace o tom, jak návštěvník vnímá stránky a na co se jako první zaměří. Uvedu i to, jak působí na návštěvníka barvy stránek. V praktické části práce se zaměřím na oficiální prezentaci obce Milejovice. Na nich zveřejním informace, které zde musí být uvedeny a také to, co by na stránkách nemělo chybět. Tato prezentace obce bude zveřejněna na adrese: 8

9 3.Webdesign 3.1. Co je to webdesign Pojmem webdesign rozumíme činnost, při které se navrhuje vzhled a struktura internetových stránek. Pro jejich tvorbu se používá jazyk HTML, v dnešní době už povětšinou jazyk XHTML, a pro formátování stránek se používají kaskádové styly CSS. Ty umožňují naformátovat stránku pro různé druhy výstupních zařízení, kterými jsou v hlavní řadě obrazovky počítačů, tiskárny a mobilní zařízení. Design stránek je jednou z věcí, která návštěvníka internetový stránek osloví. Pro to, aby návštěvník na stránkách nějakou tu dobu zůstal, musí ho stránky zaujmout. Pro zaujetí návštěvníka stránek je důležitý právě jejich vzhled. Měl by zaujmout. Ať se to autorům internetových stránek líbí, či nelíbí, návštěvník stránky nečte, ale prohlíží. Obsah je mnohdy až ta druhá věc, která na návštěvníka zapůsobí Působení stránek O internetové stránce si návštěvník udělá názor už po několika zlomcích sekundy. Za tuto dobu si člověk nepřečte ani jeden nadpis, natož nějaké informace na stránce. Hlavní aspekt, který utváří návštěvníkův názor na stránku je její vzhled. Jakmile se návštěvníkovi zalíbí vzhled stránek, podvědomě si toto hodnocení přenese i na informace, které jsou obsaženy na internetové stránce, a jejich obsah zpracovává s vetší důvěrou. Design 9

10 stránek může podvědomě zvýšit u návštěvníka hodnověrnost informací na internetové stránce. Je to podobné tomu, jak člověk hodnotí druhé při setkání. Hodnotí podle zevnějšku a až po delší době podle obsahu Zvyklosti na internetových stránkách Návštěvníci internetových stránek jsou zvyklí na určité rozmístění prvků na stránce a její fungování. Na tyto zvyklosti si navykli při návštěvách stránek. Očekávají, že i ostatní internetové stránky se nebudou od těchto zvyklostí odlišovat a že bude i jejich obsluha podobná. V opačném případě hrozí to, že návštěvník o stránky ztratí zájem a opustí je. Člověk se nechce učit novým věcem, když nemusí. Zvyklosti na internetových stránkách: logo stránky je výrazné a většinou umístěné levém horním rohu stránky navigace stránky (menu) je umístěné v horní části stránky pod logem nebo po levé straně, ve výjimečném případě může být umístěno na pravé straně vyhledávání je umístěno v pravé horní části tlačítka by měla vypadat jako skutečná tlačítka odkazy mají být odlišené od okolního textu v navigaci by měla být označená stránka, na které se právě nacházíme kontaktní informace a informace o autorovy stránek by měli 10

11 být uvedeny ve spodní části stránky (v zápatí) Obr. č.1 Stránky Justice.cz - u těchto stránek na první pohled není jasné, kde je hlavní menu, mate návštěvníka 3.4. Zacílení internetových stránek Před tím než se začne s navrhováním vzhledu stránek, musíme si ujasnit pro koho tyto stránky budou zaměřeny. 11

12 Například jestli tyto stránky budou navštěvovány převážně muži či ženami. Muž je především zaměřen na cíl. Rád analyzuje a porovnává získané informace. Postupuje systematicky a logicky. Dobře se vizuálně orientuje, koncentruje na cíl a nezabývá se detaily. Očekává informace a fakta. Muže zajímají tabulky a grafy a stejně jako ženu i fotky a ilustrace. Žena se ráda řídí intuicí a vychází z dříve získaných zkušeností. Detaily pro ni hrají nemalou roli. Očekává přátelský a milý vzhled s bohatou grafikou. Má ráda jednoduchou cestu k informacím. Taktéž je důležité to, jak jsou informace na stránkách členěny. Informace na prvním místě mají úkol zaujmout a upoutat pozornost. Na stránkách bude návštěvník podnikatel upřednostňovat jiné informace než návštěvník důchodce. Proto by mělo být na počátku jasné, kdo má být cílová skupina uživatelů stránek. Cílová skupina je důležitá, protože se internetové stránky netvoří pro průměrného návštěvníka, ale pro průměrného návštěvníka z cílové skupiny. Tomu se přizpůsobuje vzhled a struktura informací Grafický vzhled internetových stránek Grafický vzhled internetových stránek je důležitý. První momenty, kdy návštěvník zavítá na stránky, se rozhoduje podvědomě a až posléze racionálně. Při racionálního rozhodování o setrvání na stránkách hraje hlavní roli informace, které jsou na stránkách uvedeny. Jenže návštěvníkovo podvědomí je ovlivňováno beze slov a to tím, jak stránky vypadají. 12

13 3.6. Účel grafiky na internetových stránkách Grafický vzhled stránek, nebo-li jejich design, plní různé účely: Design stránek je jejich doplňkem. Nepřebírá roli obsahu a nestaví se mezi obsah stránek a jeho návštěvníka. Design podtrhuje obsah internetových stránek. Design vyjadřuje účel a poslání stránek. Návštěvníka by měl rychle přivést na to, kde se vyskytuje, na jakých stránkách se nachází. Co mu stránky mohou nabídnout a za jakým účelem byli vytvořeny. Design rozčleňuje informace atraktivní a přehlednou formou. Snaží se informace prezentovat přehledně a atraktivně. Design působí na návštěvníkovo podvědomí a zvyšuje jeho důvěru k informacím uvedeným na stránkách. Jeho snahou je to, aby se návštěvník stránek při procházení cítil dobře, byl pozitivně naladěn a měl důvod pro budoucí návrat na stránky. Design usnadňuje orientaci a pohyb po stránkách. Návštěvník na první pohled ví, co je navigací stránek, kde se nachází jejich obsah. Design stránek by měl vycházet z toho, jakou vizuální identitu má firma, pro kterou jsou stránky vytvářeny. Jaké je například barevné schéma a styl loga. Design má učinit stránky unikátní a snadno identifikovatelné. Návštěvník by si je měl zapamatovat, aby se na ně v budoucnosti vrátil. Hlavní věc, která přiměje návštěvníka zabývat se stránkou delší dobu, je její grafické zpracování. Jestliže se návštěvníkovi líbí to, jak jsou informace vizuálně podávány, začne po stránce přejíždět očima po nejvýraznějších 13

14 prvcích stránky, čímž jsou logo, upoutávky, nadpisy, navigace, nadpisy, zvýrazněná slova a podobně. Jestliže je zaujat tím co viděl, začne se po stránce pohybovat i směrem dolů (začne rolovat) a půjde více do hloubky. Obr. č. 2 Stránky 31three.com jednoduchý a skvěle provedený design internetových stránek Vzhled internetových stránek může na druhou stranu být neadekvátní obsahu, grafika může být nadřazena obsahu stránek. V takovém případě se může stát i to, že než se načte celá grafika stránky, tak hektický návštěvník nevydrží, stránku opustí a informace, které zde chtěl nalézt, bude raději hledat na jiných stránkách. Pokud návštěvník zůstal i přes delší načítání stránek, může ho i nadále 14

15 odradit špatný vzhled stránek. Návštěvník totiž může při hledání informací o ně ztratit zájem, musí-li se pohybovat v záplavě spatně uspořádané grafiky. Raději stránky po chvíli opustí a zvolí jiné, z jasně strukturovaným vzhledem, na které se pak bude raději vracet pro získávání dalších informací. Vzhled internetových stránek tedy vyjadřuje účel a poslání. Slouží jako doplněk uveřejněných informací a dat. Utváří stejně jako při setkání s člověkem první dojem a důvěru k obsahu stránek. Ladí s vizuální podobou firmy a jejím logem. Vzhled nesmí mít vyšší důležitost než informace. Musí je doplňovat a efektivně předkládat Rozměry internetových stránek Rozměry internetových stránek by měli vycházet z toho, na jakém zařízení se stránky budou zobrazovat a při jakém rozlišení. Internetové stránky si z největší pravděpodobností bude jejich návštěvník prohlížet pomocí monitoru Pevné rozměry stránek V dnešní době se považuje jako za standart rozlišení monitoru 1024 x 768 pixelů. Podle statistiky návštěvníků internetových stránek používá rozlišení 1024 x 768 pixelů a vyšší 96 % návštěvníků. A právě 42 % používá rozlišení 1024 x 768 pixelů. 15

16 Rozlišení obrazovky v pixelech Počet uživatelů 800 x 600 4% 1024 x % 1152 x 864 5% 1280 x % 1280 x 960 2% 1280 x % 1400 x % 1440 x 900 4% 1600 x 1200 méně než 1 % 1680 x % 1920 x 1200 méně než 1 % Tab. č. 1 Rozlišení monitorů u návštěvníků internetových stránek - zdrojem této tabulky jsou statistiky na TOPlist.cz - zdroj [8] Z toho vyplývá, že by stránky měli být optimalizované právě pro rozlišení 1024 x 768 pixelů. Mnoho návštěvníků s vyšším rozlišením je stejně zvyklá na to, že mnoho internetových stránek je optimalizováno pro toto rozlišení, a tak má ve svém prohlížeči otevřené postranní panely například se záložkami nebo historií. Další důvod pro to, aby byly stránky optimalizované pro rozlišení 1024 x 768 pixelů je ten, že je to i příjemnější pro oko (pro čtení informací). Vytvořit design stránek pro vyšší rozlišení není dobré pro to, že se u návštěvníků, kteří mají rozlišení 1024 x 768 pixelů a nebo mají v prohlížeči otevřené panely, se zobrazí horizontální posuvník. Aby návštěvník mohl hledat všechny informace, bude muset rolovat a zároveň se posouvat po stránce i horizontálně. Po určité době návštěvníkovi dojde trpělivost a stránky nakonec opustí. Zatímco horizontální pohyb návštěvníkovi dělá problém, vertikální pohyb po stránce (rolování) ne. Je na něj zvyklí z ostatních stránek, 16

17 pootočení kolečkem na myši provádí uživatel intuitivně a nečiní uživateli žádný problém Relativní rozměry stránek Možností jak se vyhnout vytvoření stránek pro určité rozlišení, je použití relativních rozměrů pomocí relativních jednotek. To umožní obsahu stránek přizpůsobení velikosti okna prohlížeče. Využít celého okna prohlížeče při jakémkoliv rozlišení nebo velikosti. Obr. č. 3 Stránky Uxmag.com Design těchto stránek je tovřen pro relativní rozměry stránek, objekty se přeskládávají, zde jsou ve větším rozlišení (1024 x 768 pixelů) 17

18 Obr. č. 4 Stránky Uxmag.com Zde jsou stránky v nižším rozlišení, jelikož je zobrazen postranní panel Ovšem relativní rozměry stránek mají jednu velkou nevýhodu, pro kterou je velice neoblíbený u grafiků internetových stránek. Tou je, že nemůžou být celé prvky stránek, jako je hlavička nebo podobně široké části stránek, tvořeny graficky. Nemohli by se tyto prvky totiž rozšiřovat, respektive smršťovat, a tím přizpůsobovat velikosti okna prohlížeče. Relativních rozměrů stránek se dosahuje použitím relativních jednotek pro velikost. Těmito rozměry jsou procenta. Obr. č. 5 Zdrojový kód použití relativního rozměru stránky 18

19 3.8. Prvky internetových stránek Internetové stránky se skládají z několika prvků. Jedná se o hlavičku, navigaci (menu), vyhledávání, pokud ji stránka obsahuje, obsahovou část a zápatí Záhlaví stránky Záhlaví stránky je jednou z nejdůležitější částí internetových stránek spolu s navigací. Mělo by se snažit o vysokou viditelnost, jelikož záhlaví stránku v podstatě identifikuje. Z letmého pohledu na záhlaví stránky by mělo být návštěvníkovi jasné, čeho se tato stránka týká. Záhlaví spolu se zápatím sjednocuje celou stránku, podobně jako je tomu u v textovém dokumentu. Záhlaví stránky musí obsahovat název stránek, respektive název prezentované firmy. V levé horní části stránky by mělo býti umístěno logo firmy. Většina návštěvníků stránek logo na tomto místě očekává. Taktéž jsou návštěvníci zvyklí na to, že pro rychlý návrat na úvodní stránku prezentace stačí kliknout na logo. Tudíž by mělo být logo zároveň odkazem na titulní stránku Navigace stránky Navigace stránky, nebo-li menu, je důležitým prvkem internetových stránek. Slouží pro pohyb mezi stránkami internetové prezentace. Internetová prezentace o více jak jedné stránce nemůže být bez navigace. Spolu se záhlavím stránky hraje navigace nejdůležitější roli. K čemu je sebelepší obsah stránek, když se k němu návštěvník může dostat jen pomocí 19

20 strastiplného hledání a bádání. Kvalitní navigace tedy přináší efektivitu ve vyhledání cíle, za kterým návštěvník na stránky přišel. Čím je navigace kvalitnější, tím se rychleji návštěvník dostane k tomu, co hledá. Proto, aby byla navigace k něčemu dobrá, měla by splňovat některá pravidla: Navigace se nesmí hnout z místa. Tam kde ji návštěvník uvidí při příchodu na stránky musí zůstat. Navigace se nesmí měnit. Musí vypadat na každé stránce internetové prezentace stejně. Nesmí měnit svůj vzhled, protože by tím byl návštěvník stránek zaskočen. Navigace vypadá opravdu jako navigace. Odkazy jsou logicky strukturované, jednotně zbarvené a viditelné. Navigace se ráda ukazuje. Je dobře rozeznatelná na první pohled a nikdy se neschovává. Navigace se nachází v horní části stránky. Navigace by měla být viditelná bez nutnosti rolovat po stránce. Navigace odkazuje vždy na odkazuje na první stránku prezentace. Tento odkaz by měl být uveden jako první. Umožní návštěvníkovi hledat od začátku, je-li neúspěšný v hledání. Navigace používá zavedené a vžité termíny. Na ně jsou uživatelé zvyklí z ostatních stránek. Je dobré se vyhnout při vytváření navigace odborným výrazům a nezvyklým slovním spojením. Navigace logicky řadí své položky. Je logicky strukturovaná. Položky by měli být řazeny podle určitého systému a logiky, kterou většina návštěvníků stránek bez problému intuitivně pochopí. 20

21 Nejdůležitější odkazy jsou uvedeny nejblíže prvnímu odkazu. S klesající důležitostí odkazu klesá i jejich pořadí v navigaci Globální navigace Globální navigace internetových stránek je navigace, která odkazuje na základní sekce internetové prezentace. Těmito sekcemi jsou většinou úvod, výrobky, ceník, kontakt atd. Tyto sekce se nadále člení v subnavigaci. Globální navigace je nadřazena navigaci celých stránek. Většinou bývá zobrazena jako horizontální navigace hned pod záhlavím stránky. Obr. č. 6 Stránky T-zones.cz zde je v červené elipse vidět globální navigace a v modrém je vidět subnavigace 21

22 Subnavigace Subnavigace může být jak skrytou součástí globální navigace, která se po vybrání zobrazí pod globální navigací nebo je umístěna v levém sloupci stránky. Platí pro ní stejná pravidla, která jsou uvedeny výše Drobečková navigace Drobečková navigace slouží k tomu, aby návštěvník internetových stránek věděl, kde se momentálně nachází. Název drobečková navigace je odvozen od pohádky o Jeníčkovi a Mařence, kteří si cestu nazpátek k domovu značili pomocí drobečků, které nechávali za sebou. Při každém postup níže v hierarchii stránek si za sebou nechává návštěvník stopu, aby se mohl jednoduše vrátit o stupeň, respektive o stupně, výš. Zanechává si za sebou cestu od úvodní stránky až k té, na které se momentálně nachází. Obr. č. 7 Stránky Firmy.cz zde je vidět drobečková navigace, která znázorňuje to, kde se v hierarchii stránek právě nacházíme Drobečková navigace se umisťuje zásadně horizontálně nad obsah stránky. Je tvořena pouze textovou formou. Jednotlivá slova, respektive slovní spojení, slouží jako odkazy pro návrat na danou pozici v hierarchii stránek. Tyto odkazy by měli vypadat jako odkazy. Odkazy jsou tvořeny nejlépe menším písmem, zato ale v kontrastu s pozadím (například černé písmo na bílém pozadí) a jsou 22

23 podtržené. Drobečková navigace by se měla řídit několika pravidly: Jako první je v drobečkové navigaci uveden odkaz na úvodní stránku. Následuje cesta až ke stránce, na které se momentálně návštěvník nachází. Jednotlivé stupně v drobečkové navigaci jsou většinou odděleny symboly: Znak Symbol Frekvence výskytu na internetových stránkách Větší než > 47% Dvojtečka : 11% Lomítko / 9% Dvojité větší než >> 7% Šipka 6% Svislá čára 5% Tab. č. 2 Symboly použité v drobečkové navigaci čerpáno ze zdroje [9] Každý stupeň, část cesty, v drobečkové navigaci musí být odkazem na související stránku. Poslední část v drobečkové navigaci je název aktuální stránka. Je tedy nesmyslné, aby toto byl také odkaz, jelikož by jsme se odkazovali na aktuální stránku. Není tedy podtržená a neměla by být tak výrazná jako je zbytek drobečkové navigace. 23

24 Umístění navigace Při vytváření internetových stránek je důležité, rozhodnout se kam se umístí navigace stránek. Na výběr máme několik možností. Vlastně tři. Horizontálně pod záhlaví, do levého sloupce nebo do pravého sloupce. Každé umístění navigace se hodí pro jiný typ internetových stránek. Podle toho k čemu budou internetové stránky sloužit Horizontální umístění Horizontální, tedy vodorovné, umístění navigace se rozumí umístění hned pod záhlavím internetové stránky. Umístí-li se navigace horizontálně, má to jednu výhodu. Navigace nevytvoří hluché místo pod sebou a tvůrce internetových stránek se nemusí starat o vyplnění hluchého místa. Také se může plně využít celá šířka stránky pro textový a obrazový obsah prezentovaného dokumentu. Při vytváření internetových stránek, u nichž bude navigace umístěna horizontálně, je důležité, aby odkazy navigace nepřetékali za okraj stránky. Zobrazil by se horizontální posuvník a návštěvník byl nucen se po stránce pohybovat i do strany. Tím by se návštěvník odradil a opustil by stránky. Horizontálně umístěná navigace bývá především navigace globální, protože globální navigaci tvoří většinou jen pár odkazů. Součástí globální navigace je i subnavigace, které je buď zobrazena pod globální navigací, taktéž horizontálně, nebo je v levém sloupci. 24

25 Obr. č. 8 Stránky Idnes.cz na těchto stránkách je použita horizontální navigace Umístění vlevo Většina internetových stránek má navigaci umístěnou právě na levé straně. Na navigaci umístěnou v levém sloupci jsou návštěvníci zvyklí z jiných stránek. Pokud návštěvník uvidí v levém sloupci navigaci, nemusí přemýšlet a hned ví, že je to navigace stránek. Je-li navigace umístěna vlevo, má to jednu velkou výhodu. Pokud na tyto internetové stránky zamíří návštěvník, který má menší rozlišení obrazovky než pro které byly stránky navrženy, nemusí nikde navigaci hledat a vidí ji hned. Nemusí se nikam posunovat. Navigace je viditelná. 25

26 Umístění vpravo Navigace umístěná v pravém sloupci je méně obvyklá. Nejvíce se však vyskytuje u internetových stránek, které jsou zaměřeny na weblogy. Při vytváření stránek, kde se navigace nachází v pravém sloupci, musí jejich tvůrce dávat pozor na jejich rozlišení. Hrozí, že návštěvník, který nemá dostatečné rozlišení neuvidí navigaci, jelikož ta bude schována za pravým okrajem stránek. Umístění navigace v pravém sloupci stránek má několik výhod. Jako lidé, kteří čtou zleva doprava, tak návštěvník stránek uvidí jako první obsah stránek. Z toho, že čteme zleva doprava vyplývá také to, že oči jsou méně namáhané. Je-li obsah stránek založen především na obsáhlém textu, je výhodné, pokud je navigace stránek umístěna právě v pravém sloupci. Pokud je navigace stránek umístěna v levém sloupci, působí při čtení delšího textu jako rušivý element. Pravé umístění umožní při čtení nerušený přechod z jedné řádky textu na druhý. Umístění navigace na pravou stranu stránky dále zjednoduší užívání stránek pravákům. Ti jsou zvyklí ovládat pravou rukou. Aniž by si to uvědomovali, instinktivně posunují kurzor myši na pravou stranu stránky. Ať už nevědomky nebo jen proto, aby si nepřekrývali text stránky kurzorem. Když už mají kurzor na pravé straně, mají ho nad navigací. Právě uvedené výhody naznačují, že umístění navigace napravo vyhovuje internetovým stránkám, u nichž se nachází dlouhý text. Těmito stránkami jsou především weblogy. 26

27 Obr. č. 9 Stránky Pavouciveflasce.blogujeme.cz na tomto blogu je je navigace umístěna na pravé straně Vyhledávání Dalším významnějším prvkem internetových stránek, které jsou svým obsahem rozsáhlejší, je vyhledávací pole. Pro návštěvníka internetových stránek je to neocenitelná záležitost při hledání informací. Vyhledávání umožní návštěvníkovi co možná nejrychlejší způsob, jak se dostat k informacím, které na stránkách návštěvník hledá. Vyhledávací pole by mělo být pro návštěvníka stránek jasně viditelné. Návštěvník pole s vyhledáváním nesmí dlouho hledat, proto by mělo být podle zvyklostí umístěno v horní části internetových stránek. Na některých 27

28 internetových stránkách je dokonce vyhledávací pole zabudováno do záhlaví stránky. Obr. č. 10 Stránky Seznam.cz na stránkách seznam.cz je vyhledávací pole zakomponované do hlavičky stránky Pro vyhledávací pole je nejvhodnější variantou, když je zadávací textové pole umístěné vlevo od tlačítka. Ostatní varianty vzájemného umístění zadávacího pole a tlačítka by mohli návštěvníka stránek zmást a nutili by ho přemýšlet. Ovládání vyhledávacího pole by mělo být intuitivní Obsahová část stránky Další částí internetové stránky, kde se snažíme o zaujetí návštěvníka je obsahová část úvodní stránky. Je to podobné tomu, jaké jsou výkladní skříně nebo obálky časopisů. Snaží se o zaujetí. Textový obsah stránek spolu s grafickými doplňky jsou tady proto logicky a atraktivně uspořádány. Úvodní stránka podává přehled toho nejlepší, co dané internetové stránky mohou 28

29 poskytnout. Text by měl být v obsahové části čitelný s vysokým kontrastem barvy textu a neagresivní barvou podkladu. Struktura textu by měla být co možná nejjednodušší. Přehlednosti obsahové části stránek docílíme tím, že budeme používat tučné písmo, kurzívu, barvy, ikony, seznamy atd. V obsahové části by jsme se měli vyvarovat použití zarovnání odstavce na střed stránky Zápatí stránky Zápatí stránky, jinak také patička stránky, je grafické zakončení internetové stránky na jejím samotném konci. Úkol, který nese zápatí stránky, není pouze ukončení stránky, ale taktéž nese určité informace a odkazy. V zápatí stránky by tedy mělo správně býti uvedeno: copyright právní ujednání stáří internetové stránky kontaktní informace na autora a na správce stránek odkaz na prohlášení o přístupnosti stránek odkaz na RSS kanál odkaz na tisk stránky odkaz na mapu stránek odkaz na přesunutí k hlavní navigaci stránek, pokud délka stránek 29

30 přesahuje více než dvě obrazovky Obr. č. 11 Stránky T-mobile.cz ve spodní části je zápatí stránky Jsou-li internetové stránky složitější, je vhodné pro lepší ovládání stránek umístit do zápatí stránky textovou kopii globální navigace. Ovšem vzhled kopie globální navigace v zápatí se musí dobře promyslet. Tato kopie musí totiž na první pohled dávat návštěvníkovi stránek smysl Bezpečná oblast Bezpečnou oblastí se rozumí oblast internetové stránky, která je viditelná po načtení stránek do prohlížeče, bez nutnosti rolování po stránce. Jde o první věc, kterou návštěvník internetových stránek po zavítání na ně uvidí. Z toho, že je to první část internetové prezentace, kterou návštěvník uvidí, je jasné, že této oblasti se při tvorbě stránek musí věnovat zvýšená pozornost. Z toho vyplývá, že v horní části stránky by se měla nacházet většina grafiky 30

31 stránky, prvky s nejvyšší prioritou a nejvyšší hustota odkazů. Priorita prvků a odkazů se snižuje s tím, jak níže jsou umístěné na stránce. Bezpečná oblast je místo, které má návštěvník zaujmout a motivovat ho k tomu, aby byl ochoten na stránkách dále zůstat a prohlédl si i zbytek internetové prezentace Search Engine Optimization (SEO) Pro vyhledávání internetových stránek na internetu se používají internetové vyhledávače. Tím jak se dají zviditelnit internetové stránky ve vyhledávačích se zabývá Search Engine Marketing (SEM). Ten se skládá ze dvou částí, placené a neplacené. V placené části se za zviditelnění ve vyhledávačích platí samotným vyhledávačům, respektive firmám, které vyhledávače provozují, kdežto v neplacené části se neplatí vyhledávači nic. Tato neplacená část se nazývá Search Enigne Optimization (SEO), optimalizace pro vyhledávače, někdy také pouze přirozená optimalizace. Největšími vyhledávači na světě jsou Google, Yahoo! a MSN. V České republice jsou největšími internetovými vyhledávačemi Seznam, Google Morfeo a Jyxo. Vyhledávač Morfeo využívá pro své potřeby portál Centrum.cz. Vyhledávače používají pro získání informací ze stránek roboty, kteří sledují odkazy z jedné stránky na druhou a indexují je. Vyhledávače (roboti) vidí internetové stránky podobně jako textový prohlížeč Lynx. Z toho vyplývají potíže, které mohou mít některé vyhledávače, u používaných technologií (Javascript, Flash, rámce apod.). Některé vyhledávače u těchto technologií nedokáží zaindexovat celé internetové stránky. Netýká se to všech vyhledávačů. Některé vyhledávače dokáží bez 31

32 problému prohledávat dynamické URL, ale mají problémy například s prohledávání rámců, a naopak. Každý vyhledávač je jiný. Některé vyhledávače nemusí zaindexovat stránky, pokud je jejich navigace vytvořena technologií Javascriptu. Pro vyhledávač je totiž navigace schována za Javascriptem. Javascript byl vytvořen za účelem rozhýbat internetové stránky v prohlížeči. Může se tedy stát, že je u takovýchto stránek zaindexována pouze úvodní stránka, ale zbytek už ne. Flash je technologie vhodná pro stránky, kde je hlavním cílem zaujmout (prezentace, reklama, atd.). Je to něco na způsob obrázku vloženého na internetové stránky. Pro SEO je flash naprosto nevhodný, jelikož ho vyhledávače většinou neumí indexovat. Největší chybou na internetových stránkách je použití Flashe pro navigaci stránek. Opět by byla zaregistrována pouze úvodní stránka a zbytek by nebyl zaindexován. Při použití rámců na stránkách hrozí to, že některý vyhledávač zaindexuje pouze část stránek, která je uvedena v noframes. Pokud už vyhledávač zaindexuje obsah stránek v rámcích, je zde další problém ve zobrazení stránek uživateli, který klikne na odkaz. Ten totiž vede přímo na stránky a ne na rámce. Obvykle se tedy uživateli zobrazí stránka bez menu Optimalizace na internetové stránce Zviditelněný internetových stránek ve vyhledávači je možno dosáhnout několika způsoby. Ovlivnit to lze na samotné stránce její optimalizací nebo odkazy, které na tuto stránku vedou z jiných internetových stránek. Optimalizace obsahu stránky se provádí pomocí On page faktorů. On page faktor je to, co se vyskytuje na stránce. To znamená nadpisy, hlavičky, text stránky, interní i externí odkazy na stránce atd. Podle důležitosti je to sestupně: 32

33 obsah tagu title, meta description, h1, h2, h6, strong, em atd. Záleží i na tom, jak hustě se na stránce slova vyskytují, kde jsou umístěna v jakém tagu a jak daleko se nachází od začátečního tagu stránky Klíčová slova Slova, která se vyhledávají pomocí robotů na internetových stránkách, a slova, která uživatelé pro vyhledání určitých internetových stránek zadávají do vyhledávače, se nazývají klíčová slova. Výběr klíčových slov je to nejdůležitější v SEO. Pokud se totiž určité klíčové slovo na stránce nevyskytuje, tak uživatel tuto stránku pod tímto klíčovým slovem může ve vyhledávači těžko najít. Problém je i v českém jazyce se skloňováním slov. Některé vyhledávače totiž neumí skloňovat slova. Proto je dobré u klíčových slov myslet na skloňování. Je také dobré si rozmyslet, pod kterými klíčovými slovy by mohl uživatel stránky ve vyhledávači hledat. Používat slova která nenesou žádnou informaci pro klíčová slova je zbytečné. Těmto slovům, která nenesou žádnou nebo téměř žádnou informaci se říká stop slova. Těmi jsou spojky, předložky a podobná slova. V češtině se jedná o a, i, nebo, když, v na, pod, v angličtině zase and, or, but, the, a, an, about Roboti těmto slovům přikládají velmi malou váhu, pokud je rovnou neignorují. Dělají to pro zrychlení prohledávání. Je tedy zbytečné dávat stop slova do title, description nebo keywords. Škodící slova jsou slova, která snižují hodnocení internetové stránky. Jedná se většinou o slova spojená se sexem. Předpokládá se totiž, že uživatel, který něco hledá, obecně nechce stránky se sexem. Proto jsou na slova spojena se sexem uvaleny zvláštní filtry. 33

34 Důležité tagy na stránkách Na stránkách ve se přikládá určitá váha klíčovým slovům, která jsou uvedena v určitém tagu. Těmi mohou být: Titulek <title>titulek stránky</title> titulek je nejdůležitějším tagem, kterému přikládají velký význam všechny vyhledávače. Meta description <meta name= descritption content= Popis stránky /> obsah tohoto tagu některé vyhledávače zobrazují u popisu stránky. Proto je dobré zde uvést něco smysluplného. Meta keywords <meta name= keywords content= Klíčová slova /> tento tag není jednoznačný. Většina vyhledávačů tento tag nebere na vědomí. Přesto není na škodu ho vyplnit. Je dobré slova, která jsou uvedeny zde použít i v textu stránky. Většina vyhledávačů by totiž pak tuto stránku nenašla. Nadpisy h1.. h6 <h1>nadpis</h1> nadpis by měl být co možná nejvýstižnější a nejkratší. S délkou totiž klesá váha nadpisu. Nadpis h4 má nižší váhu než nadpis h3. Nadpis h1 se smí na stránce objevit pouze jednou, ostatní vícekrát. Tučný text <strong>tučný text</strong> doporučuje se mít na stránce jednou klíčové slovo uvedeno tučně. Některé vyhledávače mu přikládají nějakou váhu, například vyhledávač Yahoo!. Popis u obrázku <img src= obrazek.png alt= obsah 34

35 obrázku title= shrnutí obsahu /> u každého obrázku by měl být vyplněn atribut alt, jelikož robot si obrázek neprohlídne, ale zjistí co je na obrázku díky atributu alt. Atribut title je o něco méně významný než atribut alt, ale i tak má nějakou váhu. Zde by mělo být uvedeno shrnutí obrázku URL adresa Většina vyhledávačů přikládá URL adresám velký význam. Větší význam má jméno domény než zbytek URL adresy. U zbytku URL adresy vyhledávače rozeznávají slova pomocí dvou oddělovačů. Těmito oddělovači jsou / (lomítko) a (pomlčka). Podtržítko slouží jako spojovací znak. Proto je rozdíl mezi těmito dvěma příklady: toto/jsou-ctyri-slova toto/jsou_tri-slova U URL adres dynamických stránek se můžeme u vyhledávačů setkat s tím, že ne celou URL adresu projdou. Například Google bere na vědomí pouze tři proměnné (dříve dokonce pouze dvě). Proto je dobré do jedné proměnné v URL adrese dát klíčové slovo název stránky Odkazy na stránku Vyhledávače hodnotí stránku také podle počtu odkazů a jejich důležitosti. To je vyjádřeno rankingem stránky. Tyto adresy mohou na konkrétní stránku vést z jiných stránek nebo ze stránek internetové prezentace. 35

36 PageRank je obchodní značka patřící firmě Google. Jedná se o číselné hodnocení relativní důležitosti internetových stránek. PR(A) = (1-d)/m + d * ( PR(T1)/C(T1) PR(Tn)/C(Tn) ) PR(A) je PageRank stránky d je faktor útlumu je zřejmě nastaven na hodnotu 0,85 m je celkový počet zaindexovaných stránek PR(T) je PageRank stránek, které na stránku odkazují C(T) je počet odkazů vedoucích ze stránky T Vzorec se dá zjednodušeně přetlumočit tak, že stránka předává část svého PageRanku stránkám, na které odkazuje. Čím víc obsahuje odkazů (hodnota C), tím méně každé stránce předá. Tím, že stránka obsahuje odkazy, o svůj PR nepřichází. Spíše než o předávání lze mluvit o kopírování nebo přeposílání PageRanku. Čím méně má stránka odkazů, tím víc PageRanku se každým odkazem přeposílá. PageRank nijak nezávisí na hledaném slově. PageRank má každá jednotlivá stránka, nikoliv celá internetová prezentace dohromady (doména). Čím má stránka vyšší PageRank, tím bude pravděpodobně výše ve výsledcích. Většina ostatních vyhledávačů využívá obdobu PageRanku Anchor text (link text) Vyhledávače neberou v úvahu jen to co je na stránce, ale i to co přichází 36

37 z odkazů. Stává se, že uživatel najde stránky i když se klíčové slovo vůbec nevyskytuje na stránce, ale pouze v odkazu na stránku. Je to způsobené právě Anchor textem. <a href= >zde je anchor text</a> U vyhledávačů má anchor text význam. Díky němu vznikla i takzvaná Google bomba. Pár bloggerů se rozhodlo že na životopis amerického prezidenta George W. Bushe použijí odkaz s anchor textem, který byl miserable failure osudové selhání. Tato bomba se vyskytla v prosinci 2003 a kdo do vyhledávače Google napsal miserable failure, dosatal odkaz na životopis Gerge W. Bushe. K tomu stačilo pouhých 32 odkazů Kompozice internetových stránek Rozmístění prvků stránek, nebo-li také vizuální logika, je velice důležitý aspekt při tvorbě internetových stránek, který tvoří dobrý dojem a snadné ovládání. Správné rozmístění a skloubení textu a grafiky na stránkách je důležité pro zaujetí návštěvníka a nasměrování jeho pozornosti. Správné rozmístění prvků stránky je důležité také proto, že vede oči návštěvníka po stránkách jako neviditelná ruka. Kvalitní kompozice stránky dokáže určit prioritu informací a rozlišit jednotlivé prvky stránky. Správná kompozice stránky zjednoduší hledání informací na stránkách i jejich prohlížení. 37

38 Pravidla kompozice internetových stránek Pro kompozici internetových stránek platí několik pravidel. Tyto pravidla by se autor internetových stránek měl pokusit při tvorbě dodržet Kontrast Prvním nepsaným pravidlem je u kompozice internetových stránek kontrast. Jedná se o to, aby bylo při první pohledu na stránku jasné rozvržení stránky. Kontrast umožňuje návštěvníkům přijít na to, kam jaké elementy patří. Do jakého celku. Například do obsahové části. Nebo to, že jsou rozdílné a například elementy obsahové části nepatří do navigace. Kontrast tedy odděluje hlavní elementy a oblasti stránky a celkově graficky organizuje vzhled internetových stránek. Jednotlivé prvky stránek tedy nesplývají do sebe v jeden obrovský nesourodý celek, ale jsou rozdělené kontrastem. 38

39 Obr. č. 12 Stránky Slunecnice.cz na těchto stránkách je pomocí kontrastu docíleno rozvržení stránky do celků Opakování Dalším nepsaným pravidlem pro tvorbu internetových stránek je opakování. Tím se nerozumí opakování informací, ale opakování vizuálního stylu elementů internetové stránky. To že stejné elementy, jimiž jsou odkazy, obrázky, odstavce, tabulky atd., internetové stránky budou mít stejnou vizuální podobu a umožní uživateli snazší orientaci na stránkách. Opakování vizuálního stylu elementů stránky podává taktéž informaci o jejich propojení. 39

40 Zarovnání Jednotlivé části obsahu internetových stránek by měli být připojeny vizuálně k některému prvku. Všechny související prvky stránky by správně měli udržovat jednotnou velikost mezer mezi sebou navzájem a i velikost odsazení od okrajů. V některých případech je žádoucí udržovat mezi jednotlivými elementy stránky i blízkost. Je to mezi elementy, které jsou si podobné. Ty by měli být seskupeny u sebe Optický střed Abychom mohl upoutat pozornost návštěvníka internetových stránek, měli bychom vědět, kam se podívá jako první. První místo, které uvidí, není geometrický střed stránky, jak bychom si mysleli, ale je to optický střed stránky. Optický střed je základní a dlouhodobě prověřený kompoziční poznatek. Jde o místo, kde spočine oko pozorovatele jako první. Jakýkoliv text nebo grafický prvek v tomto místě působí výrazněji a i vyrovnaněji. Prvek umístěný do optického středu stránky se jeví opticky jako více vzdušný a nepřitahovaný k okrajům stránky, na rozdíl od geometrického středu stránky. Aniž by si to lidé uvědomovali, intuitivně optický střed stránky využívají a velmi často s tímto středem také pracují. Řídí se svým citem. Prvek umístěný do optického středu stránky na rozdíl od středu geometrického vypadá přirozeněji. 40

41 Obr. č. 13 Konstrukce optického středu na listu papíru A4 v první část je geometrický střed, druhá zobrazuje optický střed, na konci je uvedena konstrukce optického středu na stránce A4 Obr. č. 14 Konstrukce optického středu na monitoru rozvržení obrázku je stejné jako u konstrukce optického středu stránky Na obrázku č.12 je vidět umístění nadpisu v geometrickém středu stránky, umístění v optickém středu stránky a nakonec je zde vidět konstrukce optického středu stránky A4, která má poměr stran 1:1,414. U listu papíru o velikosti A4 vznikne optický střed stránky protnutím úhlopříček a dvou čar, které vedou ze středu horní strany do spodních rohů stránky. Je vidět, že Nadpis stránky umístěný v optickém středu stránky 41

42 působí oproti Nadpisu stránky, jenž je umístěn v geometrickém středu stránky, přirozeněji a více zaujme. Na obrázku č. 13 je vidět umístěný bod, který je umístěn nejdříve v geometrickém středu stránky, následně je bod umístěn v optickém středu stránky a nakonec je zde znázorněna konstrukce optického středu stránky, která je zobrazena na monitoru. Monitor má poměr stran 4:3. Konstrukce optického středu stránky na monitoru je o drobet složitější než u konstrukce optického středu u listu papíru. Podobně jako u papíru si nejdříve zkonstruujeme úhlopříčky monitoru. Následně uděláme dvě čáry ze středu horní strany monitoru do dolních rohů. Vzniknou nám dva průsečíky, které spojíme. Dále uděláme další dvě čáry a to tentokrát ze středu levé strany monitoru do rohů na pravé straně monitoru. Vzniknou nám opět dva průsečíky, které opět spojíme. Vznikli nám dvě přímky, které se protínají v jednom bodě. Tento bod je optický střed stánky, která je zobrazena na monitoru Umístění textu Pro umístění textu v ploše stránky platí jednoduché pravidlo. Tímto pravidlem se dosáhne příjemného vizuálního účinku. Tímto pravidlem je pravidlo o tom, že by mezera mezi okrajem rámečku a textem nebo mezi textem a barevnou plochou mělo být o něco větší než je mezera mezi řádky nebo slovy. Měla by tedy být větší než takzvaný řádkový proklad. 42

43 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sit amet erat nec turpis pretium ultrices. Vestibulum quam leo, fringilla sit amet, lobortis at, tempor sed, dolor. Nunc pulvinar. Nulla ante. Aenean enim. Ut viverra. Duis adipiscing. Nullam vel tortor in augue rutrum eleifend. Ut viverra. Duis adipiscing. Nullam vel tortor in augue rutrum eleifend. Ut viverra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sit amet erat nec turpis pretium ultrices. Vestibulum quam leo, fringilla sit amet, lobortis at, tempor sed, dolor. Nunc pulvinar. Nulla ante. Aenean. Obr. č. 15 Sazba textu na stránce vlevo jsou špatně zvolená odsazení, vpravo dobře Prázdné místo I když se to nezdá, hraje prázdné místo v kompozici internetových stránek docela důležitou roli. Prázdné místo, nebo-li také white space, jde označit za grafický prvek internetových stránek. Spolu s kontrastem a volbou barev hraje na internetových stránkách důležitou roli při jejich zpřehledňování. Jde jak o prázdné místa okolo textu, jenž je patrné z umístění text, tak i při odsazení prvků stránek. Prázdná místa na internetových stránkách je zpřehledňují a nedělají z nich jeden velký celek textu a grafiky. Prázdné místo dodává internetovým stránkám vzdušnost. 43

44 3.12.Výběr barev Při tvorbě internetových stránek si musíme uvědomit, že barevná volba internetových stránek má zásadní vliv na vnímání stránek, jejich poutavost i oblíbenost. Ze života je známo to, že barvy mají vliv na toho, kdo se na ně dívá. Každá barva na pozorovatele má nějaký účinek. Barva působí na pozorovatele. Barvy mají na pozorovatele psychologické účinky. Čím je člověk více citově založený, tím více na tohoto člověka barvy působí. Extravagantní lidé dávají přednost teplým barvám jako jsou například žlutá a červená, zatímco lidé introvertní dávají přednost studeným barvám. Studené barvy jsou například zelená a modrá. Cílem autora internetových stránek je, abychom dosáhli určitým zvoleným barevným schématem požadovaného dojmu. Snažíme se vzhled stránek sladit s obsahem stránek, podbarvit pocity, které na nás internetová prezentace bude mít, a abychom zvýraznili emoce návštěvníka internetových stránek. Teplé barvy se obecně používají ke zvýšení důrazu. Studené barvy se naopak používají ke zmenšení důraznosti. Světlejší barvy v kontrastu s tmavšími zaujmou náš zrak jako první. 44

45 Barva Viditelnost Poutavost Oblíbenost muž žena Asociace bílá vysoká nízká nízká nízká čistota, nevinnost žlutá vysoká vysoká nízká nízká povzbuzuje, upozorňuje; vnáší štěstí a veselý růžová nízká nízká nízká vysoká ženskost, zranitelnost, klid, něha oranžová vysoká vysoká nízká nízká zdravá, slavnostní; vyvolává pocit radosti vysoká vzrušující, varující, energická, prudká; představa krve, nebezpečí, lásky, agrese, milosti a něhy vysoká přirozená, přírodní; představuje čerstvost, novotu, plodnost, vlhkost, ticho, rostliny nízká uklidňující, chránící, omezující, chladná; pocit bezpečí a naděje vysoká přívětivá, vzdušná; představa oblohy, vzduchu, ticha, touhy, myšlenky a inteligence nízká klidná, vážná, vůdčí; barva dálek, hloubky, rozjímání, smutku a byznysu červená světle zelená tmavě zelená světle modrá tmavě modrá vysoká vysoká nízká vysoká nízká vysoká vysoká nízká vysoká nízká vysoká vysoká nízká vysoká vysoká Tab. č. 3 Vnímání barev a jejich význam pokračování tabulky je na další stránce čerpáno ze zdroje [4] 45

46 Barva bílá Viditelnost Poutavost vysoká nízká Oblíbenost muž nízká Asociace žena nízká čistota, nevinnost hnědá nízká nízká vysoká vysoká solidní, vážná, střízlivá; představa jistoty, pořádku, domova, morálních hodnot, zeminy šedá nízká nízká vysoká nízká smutná, netečná, nečistá, chudá nízká bohatství, citlivost; představuje smrt, zlo, tajemství, vzdorování a nicotu černá nízká nízká vysoká Tab. č. 3 Dokončení tabulky č. 3 Ovšem i mezi návštěvníky internetových stránek jsou lidé, kteří trpí různou vadou zraku. Jejich něco okolo 15 %. A toto číslo není nejmenší. Tito lidé vnímají barvy odlišně od ostatních lidí s normálním zrakem. To jak tito lidé vnímají barvy si můžeme ověřit na internetových stránkách kde pan Petr Staníček vyrobil generátor barevných schémat. Simulaci zrakových vad se provádí rozbalovacím menu vpravo dole. 46

47 Obr. č. 16 Generátor barevného schéma internetových stránek v červené elipse je rozbalovací menu, kde lze zvolit vadu zraku, na tomto obrázku je normální vnímání barev 47

48 Obr. č. 17 Generátor barevného schéma internetových stránek vnímání barevného schéma z obrázku č. 14 u lidí trpících protanopií Při tvorbě internetových stránek se nemá nic přehánět. Proto by si autor stránek měl uvědomit i to, že používání něčeho přes příliš škodí. Je to i u používání barev na internetových stránkách. Jejich počet by neměl překročit určitou mez. Na internetových stránkách by proto nemělo být použito více jak pět barev. Měli bychom se do tohoto počtu vejít. Můžeme dále použít ještě lehké odstíny námi zvolených barev Pravidla pro tvorbu přístupného webu Mezi návštěvníky internetových stránek se vyskytují i lidé, kteří mají nějaké postižení. Jsou jimi například zrakově postižení lidé nebo lidé se motorikou horní končetin. Tito návštěvníci mají pro prohlížení internetových 48

49 stránek různé pomůcky. Například hlasové výstupy, braillské řádky a tak podobně. Tyto pomůcky jim zprostředkovávají informace z internetových stránek. Aby stránky fungovali, měli by být vytvořeny podle pravidel a zásad o přístupnosti internetových stránek. Tyto pravidla se nazývají BEST PRACTICE. Autor stránek by se jimi měl řídit, aby jeho vytvořené internetové stránky byli přístupné i lidem používající různé pomůcky Obsah internetových stránek je dostupný a čitelný Každý prvek, který nese významové zdělení má svou textovou alternativu. Proto by měli mít všechny obrázky na stránce v atributu alt uvedenou textovou alternativu významu obrázku. Pokud obrázek nenese žádnou informaci, atribut alt by neměl být vyplněn. Všechny informace sdělované pomocí skriptů, objektů, kaskádových stylů a jiných doplňků jsou dostupné i bez použití těchto doplňků. Internetové stránky jsou funkční i bez použití těchto doplňků a jsou k dispozici všechny stránky internetové prezentace. Informace sdělované barvou jsou dostupné i bez barevného rozlišení. Všechny informace musí zůstat srozumitelné i bez barevného rozlišení. Například odkaz na stránku musí být nadále odlišen od zbytku textu. Barvy popředí a pozadí jsou dostatečně kontrastní. Kombinace barev textu a pozadí je na tolik kontrastní, že nesplývají. Na pozadí stránky by se neměl vyskytovat vzor, který snižuje čitelnost, narušuje obsah stránky. 49

50 Velikost písma by se neměla uvádět v absolutních jednotkách. Při definování typu písma by měla být uvedena i rodina, do které použité písmo patří. Například písmo arial patří do rodiny bezpatkových písmen sans-serif. Ostatní rodiny písmen jsou serif (patkové), curisive (kurzivní), fantasy (ozdobné) a monospace (neproporcionální písmo) Práci se stránkou řídí uživatel Obsah internetových stránek se nemění sám od sebe, ale pokud uživatel aktivuje nějaký ovládací prvek. Obvyklé akce návštěvníka stránek mohou způsobit pouze takové akce, které stránku nepřeformátují neměl by se žádný prvek objevit nebo zmizet. Internetová stránka bez přímého příkazu nemanipuluje uživatelským prostředím. Internetová stránka nesmí bez příkazu například sama otevřít nové okno, měnit velikost okna nebo měnit ovládací prvky prohlížeče například zakazovat posuvníky. Otevření nového okna prohlížeče je možné jen když klikne návštěvník na odkaz nebo odešle formulář. Způsob otevírání oken by mělo zůstat na volbě návštěvníka stránek. Pakliže je nutné otevřít nové okno, musí být návštěvník včas a řádně informován. Na internetových stránkách by nemělo nic blikat rychleji než jednou za sekundu. Rychlejší blikání by mohlo způsobit potíže osobám s určitými psychickými potížemi. Internetová stránka nebrání posouvání obsahu. Internetová stránka nezakazuje zobrazení posuvníků. Návštěvník má vždy možnost zobrazený obsah posunout podle potřeby a dostat se k obsahu, který je skryt. 50

51 Obsah stránek a ani jejich kód nevyžaduje použití konkrétního výstupního nebo ovládacího zařízení. Návštěvník má právo používat vstupní a výstupní zařízení podle svého rozhodnutí. Nesmí mu být zakázána volba Informace jsou přehledné a srozumitelné Na stránkách je použit jednoduchý a srozumitelný jazyk. Nelze předpokládat, že návštěvník stránek je odborníkem na problematiku. Proto jsou informace podávány nejsrozumitelnějším způsobem. Pokud je nezbytně nutné použít odbornou terminologii, měli by být termíny vysvětleny. V textu se používají krátké věty místo dlouhých a komplikovaných souvětí. Na úvodní stránce se jasně shrne účel internetových stránek. Mělo by být jasné, jaké cíle si internetové stránky vybrali. Na úvodní stránce by dále mělo být uvedeno, kdo je provozovatelem stránek a kde najdu na provozovatele kontakt. Hlavní nebo nejdůležitější sdělení je uvedeno na začátku stránky, důležitost klesá s jeho umístěním níže na stránce. Dlouhé textové bloky jsou členěny na menší celky. Využívá se odstavců, které jsou vhodně a výstižně nadepsány. Nadpisy umožní snazší orientaci. Na stránce je uveden kontakt na správce internetových stránek. Dále zde má být uvedeno prohlášení o přístupnosti stránek a pokud nějaká část internetové prezentace nesplňuje pravidla přístupnosti, je to uvedeno. 51

52 Ovládání internetových stránek je jasné a pochopitelné Každá stránka internetové prezentace má název, který vystihuje její obsah. Název stránky je jakési návěští. To informuje návštěvníka o tom, co na stránce nalezne ještě před tím, než uvidí zbytek obsahu. Navigace stránky je zřetelně oddělena od obsahové části. Návštěvník si musí být jistý, které informace slouží navigaci a které informace patří samotnému obsahu stránky. Tyto dvě části mají být jednoznačně odděleny. Navigace stránky je stále stejná na všech stránkách internetové prezentace. Nemění svoji podobu ani své umístění. Odkazy v navigaci nejsou příliš dlouhé a jasně uvádějí kam tento odkaz směřuje. Jsou-li internetové stránky tvořeny stromovou strukturou, pak každá stránka obsahuje odkaz na stránku, která je v hierarchii výše. Pro návštěvníka je důležité, aby mohl pomocí odkazů pohodlně procházet hierarchií stránek vzhůru i dolů. Internetová prezentace, která je obsáhlejšího charakteru, by měla mít mapu svých stránek. Tato mapa stránek je strukturovaný seznam odkazů na každou stránku prezentace. Je dobrým pomocníkem pro orientaci v rozsáhlé struktuře stránek. Odkaz na tuto mapu stránek má být na každé stránce internetové prezentace, například v zápatí stánky. Obsah stránek by neměl předpokládat to, že návštěvník už navštívil jinou stránku. Je proto nevhodné, aby se v obsahu stránky vyskytovali věty typu: Jak jste viděli na předchozí stránce. a podobné. U formulářů musí mít každý prvek přiřazen výstižný popisek. Nemělo by návštěvníkovi dělat problém to, co má do uvedeného prvku formuláře 52