Embed Size (px)
DESCRIPTION
Diplomová práce
Citation preview
Česká zemědělská univerzita v Praze Provozně ekonomická fakulta Katedra informačních technologií
Diplomová práce
Současné přístupy tvorby website
Vypracovala: Bc. Ludmila Elsnerová Vedoucí práce: Ing. Pavel Šimek, Ph.D.
© Praha 2009
Čestné prohlášení Prohlašuji, že jsem diplomovou práci na téma „Současné přístupy tvorby website“
vypracovala samostatně s použitím uvedené literatury, konzultací s vedoucím práce a svých poznatků.
……….……….……….……….
Ludmila Elsnerová
Poděkování Děkuji vedoucímu diplomové práce Ing. Pavlu Šimkovi, Ph.D., za odborné vedení,
věcné připomínky a rady při zpracování této práce.
1
Diplomová práce
Diploma work
Současné přístupy tvorby website
Contemporary Approach of Website Development
2
Současné přístupy tvorby website
Souhrn
Diplomová práce se zabývá problematikou současných přístupů tvorby website. V práci je rozebrána hardwarová a softwarová problematika koncových zařízení a také specifické potřeby uživatelů. Jsou předloženy dílčí požadavky, které jsou v současnosti kladeny na webovou prezentaci, tedy konkrétně na layout, informační architekturu a strukturu webu, grafické řešení, rozmístění prvků v prezentaci, copywriting a typografii, validitu, bezbariérovost, vhodnost URL, SEO, SEM, SWOT analýzu či analýzu návštěvnosti. Uvedeny jsou také nástroje, které kontrolu některých požadavků umožňují.
Teoretické poznatky jsou využity při kompletní analýze webového portálu
„CeskyKutil.cz“ a především při navržení „metodiky tvorby a optimalizace webu“, která je demonstrována na tvorbě malého webového portálu sloužícího jako rozcestník pro zájemce o problematiku předloženou v této diplomové práci.
Klíčová slova
Internet, handicapovaný uživatel, informační architektura, grafika, copywriting, validita, bezbariérovost, URL, SEO, SEM, návštěvnost, tvorba webu
3
Contemporary Approach of Website Development
Summary Diploma work deals with the creation of the current website. The work is reader
hardware and software problems of the target device and the specific needs of users. There are put parts of the requirements that are currently placed on the website, namely the layout, information architecture and site structure, graphical solution, the deployment of elements in the presentation, copywriting and typography, the validity, barrier-free, the appropriateness of the URL, SEO, SEM, SWOT analysis or analysis of attendance. Given are also tools that allow control of certain requirements.
Theoretical knowledge is used for the complete analysis of the web portal
"CeskyKutil.cz" and especially proposing a "the methodology of creating and optimizing web site“, which is demonstrated in the formation of a small web portal serving as a guidepost for those interested in the issue presented in this thesis.
Key words
Internet, handicapped user, information architecture, graphic, copywriting, validity, barrier-free, URL, SEO, SEM, visit rate, creating website
4
Obsah Současné přístupy tvorby website .......................................................................................... 2 Contemporary Approach of Website Development ............................................................... 3 Obsah ..................................................................................................................................... 4
1 Úvod ............................................................................................................................. 8 2 Cíl práce a metodika ..................................................................................................... 9 3 HW a SW problematika ............................................................................................. 11
3.1 Hardwarové problémy na straně koncového zařízení..................................... 11
3.1.1 Vstupní zařízení ................................................................................ 11
3.1.1.1 Klávesnice ........................................................................ 11
3.1.1.2 Myš .................................................................................. 12
3.1.2 Výstupní zařízení .............................................................................. 13
3.1.2.1 Displej .............................................................................. 13 3.1.2.2 Tiskárna ........................................................................... 14 3.1.2.3 Braillský řádek ................................................................. 15
3.2 Softwarové problémy na straně koncového zařízení ...................................... 15
3.2.1 Operační systém ............................................................................... 15
3.2.2 Prohlížeč ........................................................................................... 16
3.2.3 Podpora technologií .......................................................................... 17
3.2.3.1 Flash ................................................................................. 17 3.2.3.2 JavaScript ......................................................................... 18 3.2.3.3 SVG ................................................................................. 18
3.2.4 Software pro handicapované uživatele ............................................. 19
4 Potřeby uživatelů ........................................................................................................ 20
4.1 Osoby .............................................................................................................. 20 4.1.1 Tělesně handicapovaní uživatelé ...................................................... 20
4.1.1.1 Pohybově handicapovaní uživatelé .................................. 20 4.1.1.2 Sluchově handicapovaní uživatelé ................................... 21 4.1.1.3 Zrakově handicapovaní uživatelé .................................... 21
4.1.2 Duševně handicapovaní uživatelé .................................................... 23 4.1.2.1 Uživatelé nervově postižení – epileptici .......................... 23 4.1.2.2 Uživatelé s poruchami učení a soustředění ...................... 24 4.1.2.3 Uživatelé s omezenou schopností porozumět textu ......... 24
4.2 Roboti ............................................................................................................. 24 5 Přizpůsobení webové prezentace současným požadavkům ....................................... 26
5.1 Layout, informační architektura a struktura webu.......................................... 26 5.1.1 Layout ............................................................................................... 26
5.1.2 Informační architektura webu .......................................................... 27
5.1.3 Struktura webu ................................................................................. 27
5.1.3.1 Navigace .......................................................................... 27 5.1.3.2 Hlavní navigace ............................................................... 28 5.1.3.3 Lokální navigace .............................................................. 28 5.1.3.4 Drobečková navigace ....................................................... 28 5.1.3.5 Kontextová navigace ........................................................ 29
5.2 Grafické řešení ................................................................................................ 29
5.2.1 Barvy ................................................................................................ 29
5.2.2 Logo .................................................................................................. 29
5.3 Rozmístění prvků v prezentaci ....................................................................... 30
5.4 Copywriting a typografie ................................................................................ 31
5
5.4.1 Copywriting ...................................................................................... 31
5.4.2 Typografie ........................................................................................ 32
5.5 Validita kódu HTML a CSS ........................................................................... 32
5.5.1 HTML ............................................................................................... 32
5.5.2 CSS ................................................................................................... 33
5.5.3 Validita ............................................................................................. 34
5.5.4 World Wide Web Consortium .......................................................... 34
5.5.5 WYSIWYG ...................................................................................... 35
5.6 Bezbariérovost ................................................................................................ 35 5.6.1 Použitelnost ...................................................................................... 35
5.6.2 Přístupnost ........................................................................................ 35
5.6.3 Přeskočení textu nebo navigace ....................................................... 36
5.6.4 Problémovost některých prvků ......................................................... 37 5.6.5 Mapa webu ....................................................................................... 37
5.6.6 Prohlášení o přístupnosti .................................................................. 38 5.7 Vhodná URL .................................................................................................. 38 5.8 SEO ................................................................................................................. 39
5.8.1 Vyhledávače ..................................................................................... 39
5.8.2 URL rewriter .................................................................................... 40
5.8.3 Meta tagy .......................................................................................... 40
5.8.4 Titulek stránky .................................................................................. 41
5.8.5 Analýza klíčových slov .................................................................... 41
5.8.6 Zpětné odkazy .................................................................................. 42
5.8.7 Důležitost webových stránek ............................................................ 42
5.8.7.1 Google PageRank ............................................................ 42 5.8.7.2 S-rank ............................................................................... 42 5.8.7.3 Další „ranky“ ................................................................... 43
5.9 SEM ................................................................................................................ 43 5.9.1 Grafická reklama .............................................................................. 43
5.9.2 Textová reklama ............................................................................... 44
5.9.3 Kontextová reklama ......................................................................... 44
5.9.4 Proklik .............................................................................................. 44
5.9.5 Modely platby za reklamu ................................................................ 45
5.9.6 Google AdWords .............................................................................. 45
5.9.7 Google AdSense ............................................................................... 46
5.10 SWOT analýza ................................................................................................ 46 5.11 Analýzy návštěvnosti ...................................................................................... 47
5.11.1 Ukazatele návštěvnosti ..................................................................... 47 5.11.2 Statistiky návštěvnosti ...................................................................... 48 5.11.3 Způsoby získávání dat ...................................................................... 48
5.11.4 Google Analytics .............................................................................. 48
6 Kontrola vybraných požadavků dostupnými nástroji ................................................. 49 6.1 Kontrola grafiky ............................................................................................. 49
6.1.1 Volba barevného schématu .............................................................. 49
6.1.2 Test kontrastu barev ......................................................................... 50
6.1.3 Funkce Vysoký kontrast ................................................................... 50
6.2 Kontrola validity ............................................................................................. 51 6.3 Kontrola bezbariérovosti ................................................................................ 51
6.3.1 Kontrola automatickými nástroji ...................................................... 51
6.3.2 Kontrola uživatelským testem .......................................................... 52
6
6.3.3 Kontrola proti bodům zvolené metodiky .......................................... 52 6.3.4 Spolupráce s odbornou organizací ................................................... 53
6.4 SEO ................................................................................................................. 53 6.4.1 Analýza klíčových slov .................................................................... 53
6.4.2 Důležitost webových stránek ............................................................ 54
6.5 SEM ................................................................................................................ 55 7 Analýza webového portálu „CeskyKutil.cz“ .............................................................. 56
7.1 Informační architektura a struktura webu ....................................................... 56
7.2 Grafické řešení ................................................................................................ 58
7.3 Rozmístění prvků v prezentaci ....................................................................... 59
7.4 Copywriting a typografie ................................................................................ 59
7.5 Validita kódu HTML a CSS ........................................................................... 60
7.6 Bezbariérovost ................................................................................................ 60 7.7 Vhodná URL .................................................................................................. 62 7.8 SEO ................................................................................................................. 62 7.9 SEM ................................................................................................................ 64 7.10 SWOT analýza ................................................................................................ 64 7.11 Analýza návštěvnosti ...................................................................................... 65
8 Realizace webového portálu ....................................................................................... 66 8.1 Metodika tvorby a optimalizace webové prezentace ...................................... 66
8.1.1 Analýza ............................................................................................. 69
8.1.2 Klíčová slova (keywords) ................................................................. 69
8.1.3 URL .................................................................................................. 69
8.1.4 Grafické prvky .................................................................................. 70
8.1.5 Obsah ................................................................................................ 70
8.1.6 Layout (rozmístění) .......................................................................... 70
8.1.7 Informační architektura .................................................................... 71
8.1.8 Struktura webu, navigace ................................................................. 71
8.1.9 Grafický návrh .................................................................................. 71
8.1.10 Realizace .......................................................................................... 72
8.1.11 Dodatečné prvky ............................................................................... 73
8.1.12 Testování .......................................................................................... 73
8.1.13 Marketing ......................................................................................... 73
8.1.14 Spuštění ............................................................................................ 74
8.1.15 Průběžná optimalizace ...................................................................... 74
8.2 Porovnání metodiky s jinými autory .............................................................. 75
8.3 Realizace webového portálu moderni-web.net ............................................... 76
8.3.1 Analýza ............................................................................................. 76
8.3.2 Klíčová slova (keywords) ................................................................. 77
8.3.3 URL .................................................................................................. 79
8.3.4 Grafické prvky .................................................................................. 79
8.3.5 Obsah ................................................................................................ 79
8.3.6 Layout (rozmístění) .......................................................................... 80
8.3.7 Informační architektura .................................................................... 81
8.3.8 Struktura webu, navigace ................................................................. 81
8.3.9 Grafický návrh .................................................................................. 82
8.3.10 Realizace .......................................................................................... 83
8.3.11 Dodatečné prvky ............................................................................... 83
8.3.12 Testování .......................................................................................... 84
8.3.13 Marketing ......................................................................................... 85
7
8.3.14 Spuštění ............................................................................................ 86
8.3.15 Průběžná optimalizace ...................................................................... 86
9 Závěr ........................................................................................................................... 88 10 Seznam literatury ........................................................................................................ 90 11 Přílohy ........................................................................................................................ 94
8
1 Úvod Internet jakožto celosvětová počítačová síť je největším zdrojem informací na Zemi.
V posledních letech dochází k jeho obrovskému rozvoji a počet jeho uživatelů dávno přesáhl jednu miliardu. Stále více platí, že „kdo není na Internetu, jako by nebyl“. Netýká se to však pouze velkých společností, ale také menších podnikatelů i milionů „obyčejných“ uživatelů Internetu.
Mnozí uživatelé mají ostatním co říci a Internet je jedinečnou příležitostí, jak své
názory publikovat. V souvislosti s touto touhou vzniká neuvěřitelné množství webových prezentací. Tyto weby jsou však ve velké většině případů tvořeny úplnými začátečníky, a tak nerespektují ani ty nejzákladnější potřeby uživatelů. Této situaci nahrává také možnost tvorby webových stránek bez jakékoli znalosti HTML kódu.
Nekvalitní webové prezentace však netvoří pouze samotní uživatelé Internetu, kteří
chtějí prostřednictvím svého vlastního webu publikovat své názory či fotografie, ale také webdesigneři, kteří jsou za takovou práci placeni. Nekvalitní weby pak prezentují i řadu vyhlášených společností.
Pro to, aby webová prezentace měla šanci na Internetu uspět, je nezbytně nutné
pochopit, jaké jsou potřeby a požadavky uživatelů Internetu. Tvůrci webů, obzvláště ti profesionální, musí pochopit, že není možné optimalizovat webovou prezentaci s předpokladem, že uživatel disponuje nějakým vstupním či výstupním zařízením. Tuto problematiku komplikuje také stále rostoucí počet uživatelů kapesních počítačů a „smartphonů“. Především je nutné odbourat zvyk webdesignerů optimalizovat web pro jeden konkrétní prohlížeč. Při tvorbě webové prezentace je také nezbytné brát ohledy na specifické potřeby handicapovaných uživatelů. Handicapovaným uživatelem je však také vyhledávací robot, díky kterému se dobře optimalizovaná webová stránka bude zobrazovat ve vyhledávačích na předních místech a webovou prezentaci tak navštíví více návštěvníků.
Úspěšnost webu může zvýšit například vhodně navržený layout, informační
architektura, struktura webu a grafika. Je nutné dbát na validitu kódu, bezbariérovost, copywriting nebo vhodnou URL (internetovou adresu). Návštěvnost pomůže zvýšit optimalizace pro vyhledávače (SEO), internetový marketing (SEM) nebo přizpůsobení webu výsledkům SWOT analýzy. Neméně důležitá je také analýza návštěvnosti webové prezentace, která odhalí chování uživatelů na webu a umožní přizpůsobit web „na míru“ uživatelům.
Veškerá výše uvedená problematika je podrobně rozebrána v této práci. Teoretické
poznatky jsou aplikovány na analýze webového portálu společnosti CeskyKutil.cz (www.ceskykutil.cz).
Součástí práce je také navržení metodiky tvorby a optimalizace webu, která
předkládá návod na tvorbu webu s ohledem na všechny výše uvedené faktory. Cílem je na základě metodiky vytvořit web co nejlépe optimalizovaný – především pro uživatele. Předložený postup je demonstrován na tvorbě webového portálu, který by měl co nejlépe splňovat všechny uvedené požadavky.
9
2 Cíl práce a metodika Primárním cílem diplomové práce je navržení metodiky tvorby a optimalizace webu
a její ověření v praxi. Důvodem pro tuto volbu je neexistence postupu pro tvorbu webové prezentace a také chyby, které tvůrci webů dělají.
K dosažení uvedeného cíle jsou použita teoretická východiska týkající se současných
přístupů tvorby website – hardwarové a softwarové problémy, potřeby uživatelů a požadavky, které jsou kladeny na současné webové prezentace. Také jsou předloženy důvody, proč je plnění těchto požadavků tak důležité, a představeny jsou též možnosti kontroly vybraných požadavků dostupnými nástroji.
Veškeré teoretické poznatky jsou aplikovány při analýze webového portálu
„CeskyKutil.cz“. Cílem analýzy je získat přehled o stavu portálu a o možnostech jeho vylepšení. Výsledky analýzy jsou předloženy v diplomové práci a prezentovány vedení společnosti „CeskyKutil.cz“.
Na základě teoretických poznatků a analýzy webového portálku CeskyKutil.cz“ je
navržena metodika tvorby a optimalizace webu. Na základě této metodiky má být tvořen web co nejlépe optimalizovaný již v průběhu tvorby. Metodika je ověřena při realizaci malého webového portálu, který slouží jako rozcestník pro zájemce o problematiku probíranou v této diplomové práci.
V první kapitole „HW a SW problematika“ jsou popsány hardwarové a softwarové
problémy na straně koncového zařízení. V případě hardwaru je kladen důraz na jednotlivá vstupní a některá výstupní zařízení. Ze softwarových problémů je zmíněn především operační systém, prohlížeč, software pro handicapované uživatele a vybrané technologie.
Kapitola „Potřeby uživatelů“ poukazuje na specifické potřeby uživatelů s různými
typy a stupni tělesného či duševního postižení. Jako jeden z handicapovaných uživatelů je zmíněn také vyhledávací robot.
Další kapitola nazvaná „Přizpůsobení webové prezentace současným požadavkům“
rozebírá jednotlivé aspekty současné tvorby webu. Je zde poukázáno na důležitost správné volby informační architektury a struktury webu, grafiky, rozmístění prvků v prezentaci, copywritingu, validity kódu, bezbariérovosti, vhodné URL, SEO, SEM, internetové reklamy nebo analýz návštěvnosti webu.
V kapitole „Kontrola vybraných požadavků dostupnými nástroji“ jsou předloženy
možnosti kontroly některých požadavků uvedených v předchozí kapitole. Zmíněny jsou jak možnosti ruční kontroly, tak různé další testy a nástroje.
V další kapitole nazvané „Analýza webového portálu „CeskyKutil.cz“ je
zanalyzován stávající web „CeskyKutil.cz – Internetový hobby magazín pro celou rodinu“. Analýza je předmětem diplomní praxe.
V poslední kapitole „Realizace webového portálu“ je popsána vlastní metodika
postupu tvorby a optimalizace webu s důrazem na všechny uvedené požadavky a provádění optimalizací již v průběhu tvorby webu. Zároveň je podle této metodiky vytvořena vlastní webová prezentace.
10
Vzhledem k povaze problematiky a s tím souvisejícímu nedostatku tištěných zdrojů, je jako primární zdroj informací využit Internet. Většina autorů zabývajících se tímto tématem totiž publikuje své odborné práce právě na Internetu.
V práci jsou uvedeny výsledky analýzy webového portálu „CeskyKutil.cz“, uvedena
metodika pro tvorbu webového portálu a předložena vlastní webová prezentace. Obrázky, které postup této praktické práce reprezentují, jsou dílem autora.
11
3 HW a SW problematika Při tvorbě webových prezentací je třeba si uvědomit, že uživatelům může způsobit
problémy předpoklad použití konkrétního hardwaru nebo softwaru. Tvůrce webové prezentace by se neměl spoléhat na to, že uživatel využívá konkrétní vstupní či výstupní zařízení, nebo operační systém a prohlížeč.
3.1 Hardwarové problémy na straně koncového zařízení Některé webové prezentace mohou uživatelům způsobit nemalé obtíže například tím,
že předpokládají využití některých vstupních či výstupních zařízení. Pro ovládání mnohých webů je nezbytná počítačová myš. Nejen pro nevidomé
uživatele, kteří ji používat nemohou, ale například také pro uživatele se zlomeninou horní končetiny se může takový web stát nepoužitelným. Obdobný problém nastává v případě klávesnice, displeje či Braillského řádku.
3.1.1 Vstupní zařízení Vstupní zařízení je hardware, kterým počítač pořizuje data. Jedná se nejen
o klávesnici nebo myš, které slouží k ovládání počítače, ale také o scanner, čtečky čárových kódů a další zařízení.
Některá důležitá vstupní zařízení, která mají vliv na tvorbu webové prezentace, jsou
dále podrobněji popsána.
3.1.1.1 Klávesnice Klávesnice je vstupní zařízení sestávající z tlačítek. Slouží k zadávání dat nebo
ovládání připojeného zařízení [1]. Většina návštěvníků webových prezentací využívá rozšířené klávesnice typu
QWERTY. Při tvorbě webových stránek je však nutné pamatovat také na uživatele, kteří používají jiné typy klávesnice nebo specializovaná vstupní zařízení, jakým je například klávesnice pro jednu ruku, kterou využívají tělesně handicapovaní uživatelé.
Ačkoliv v poslední době vzrůstá počet mobilních zařízení s hardwarovou klávesnicí
(např. numerická klávesnice mobilního telefonu), mnoho majitelů kapesních počítačů a mobilních telefonů jí stále k dispozici nemá. Jak znázorňuje Obr. 1, mají kapesní počítače často pouze kurzorové a potvrzovací klávesy. Tito uživatelé jako alternativu využívají softwarovou klávesnici nebo systém pro rozpoznávání psaného písma.
Z tohoto důvodu je vhodné koncipovat web také pro využití na dotykových
obrazovkách a pro nejdůležitější odkazy definovat klávesové zkratky, takzvané accesskeys nebo také „horké klávesy“, případně na web umístit pomocnou softwarovou klávesnici.
12
Obr. 1 – PDA – Pocket PC HP iPAQ 1940 s Microsoft Windows Mobile 2003. Zdroj: <http://www.portablegear.nl/images/productfotos-groot/hp-ipaq-h1930-01.gif>.
3.1.1.2 Myš
Počítačová myš je polohovací zařízení, které umožňuje přenášet pohyb ruky po
vodorovné podložce na obrazovku počítače, kde se změna pozice projevuje pohybem kurzoru [1]. Myš byla vynalezena již roku 1963 a v současnosti je nejpoužívanějším vstupním zařízením pro ovládání webových stránek.
Alternativou počítačové myši je trackball, což je větší kulička zabudovaná v zařízení,
se kterou se pohybuje. Představuje jakousi obrácenou myš. Přenosná zařízení většinou využívají dvě náhrady myši [1]:
• Touchpad (Obr. 2) – destička měřící elektrickou kapacitu. Uživatel po ní pohybuje prstem a pohyb je přenesen na obrazovku.
• Trackpoint (Obr. 3) – malý joystick umístěný mezi klávesami G, H a B. Uživatel jej naklání do požadovaného směru, který je poté přenášen na pohyb kurzoru.
Obr. 2 – Touchpad. Obr. 3 – Trackpoint.
Zdroj: <http://kubat.e-zpravy.cz/ UserFiles/Image/asus-m6va-
8013/touchpad_m6va_02.jpg>.
Zdroj: <http://www.51nb.com/tpimgs/ image004.jpg>.
13
Obr. 4 – Vyhledávač Google v PDA.
Zdroj: <http://www.pocketpcthoughts.com/
images/hansberry/2006/ 20060123-google06.gif>.
U kapesních počítačů jsou všechny alternativy myši nahrazeny tzv. stylusem, který svým tvarem připomíná tužku. Uživatel jím pohybuje po displeji a pohyb je snímán a přenášen na kurzor.
3.1.2 Výstupní zařízení Výstupní zařízení je hardware, který předává data z počítače uživateli. Jedná se
především o displeje nebo tiskárny, ale mezi výstupní zařízení patří také plotter, reproduktory nebo specializovaná výstupní zařízení pro handicapované uživatele, například braillský řádek nebo hlasový výstup.
3.1.2.1 Displej
Displej je výstupní elektronické zařízení, které slouží k zobrazování informací. Lze
je rozdělit na klasické lampové obrazovky typu CRT nebo displeje na principu tekutých krystalů (LCD). Dalšími méně častými typy jsou plazmové obrazovky či LED [1].
Poměrně velké množství uživatelů ještě stále používá starší monitory typu CRT
i s rozlišením 800×600 obrazových bodů (tzv. pixelů). Pro tyto uživatele je nutné optimalizovat webové stránky na toto rozlišení. Jednou z možností je stanovit pevnou šířku na 800 obrazových bodů, respektive 780, přičemž zbylých 20 pixelů je využito na případný vertikální posuvník prohlížeče.
V současnosti jsou však stále častější displeje typu LCD s rozlišením 1024×768
a více. Tvůrci webů proto často stránky optimalizují na standardní šířku 1024 pixelů s tím, že při menším rozlišení se buď využije horizontální posuvník, nebo se stránka zmenší.
Uživatelé se starými monitory mají také
často problémy s věrným zobrazováním barev. Starší monitory zobrazují některé podobné barvy téměř stejně a stále jsou mezi uživateli Internetu tací, kteří používají pouze černobílé monitory s malým rozlišením. Z tohoto důvodu není možné odlišovat text v prezentaci pouze pomocí barev.
Handicapovaní jsou však také uživatelé
mobilních zařízení, kteří webové stránky navštěvují pomocí kapesních počítačů PDA nebo mobilních telefonů Smartphones. Rozlišení displejů obou zařízení je velmi odlišené. Kapesní počítače mohou mít obdélný displej až do velikosti 640×480 pixelů, ale také čtvercový pouze o velikosti 320×320 nebo 160×160 pixelů. Displeje mobilních telefonů jsou ještě menší a mají více atypické rozměry – například 176×220 nebo 208×208 pixelů. Webovou stránku na malém displeji PDA znázorňuje Obr. 4.
14
Tvůrci webových stránek by měli počítat i se zobrazováním na těchto malých displejích. Pomocí atributu media=“handheld“ lze definovat pro zařízení s malým displejem jiné kaskádové styly než pro ostatní zařízení.
3.1.2.2 Tiskárna
Tiskárna je výstupní zařízení, které slouží k přenosu dat uložených v elektronické
podobě na papír [1]. Ačkoliv to na první pohled nemusí být zřejmé, poměrně velké množství uživatelů
si tiskne články z webových stránek. Uživatelé se však při tisku setkávají s mnoha problémy. Velmi častá je situace, kdy by se při správném tisku webová stránka vešla na jeden list formátu A4, ale využije jich zcela zbytečně více – například na první stránce se vytiskne pouze záhlaví s reklamními bannery, na další stránce text a reklamy a na poslední stránce samotné zápatí, to vše často hodně zpřeházeně.
Jak uvádí James Kalbach [2], existují dva způsoby, jak při tvorbě webové prezentace
problémům s tiskem předejít. V prvním případě můžeme k tisku připravit přímo webovou stránku, která se při pokusu o tisk zformátuje do požadovaného tvaru. Tohoto můžeme docílit tak, že verzi pro obrazovku budeme definovat pomocí media=“screen“ a variantu pro tisk s využitím media="print" .
Pomocí kaskádových stylů lze ve verzi pro tisk přizpůsobit šířku stránky sto
procentům šířky papíru. Na obrazovce je lépe čitelné bezpatkové písmo, ale pro tisk je vhodné nastavit pomocí příkazu serif písmo patkové. Stejně tak můžeme upravit vertikální mezery mezi řádky a zvýraznit odkazy. Hlavní výhodou těchto úprav je možnost skrytí nepotřebných grafických prvků pomocí příkazu display: none . Takto lze skrýt například obrázky na pozadí nebo reklamní panely. Samozřejmostí je odstranění tmavého pozadí a vhodné je i odstranění navigace [2].
Velkou výhodou CSS je vlastnost page-break-after , která určuje, zda a jak se
má při tisku za zvoleným prvkem ukončit stránka. Této vlastnosti lze přiřadit hodnotu auto , která je výchozí a zalomení neovlivňuje, always (stránka se zalomí vždy) nebo avoid (stránka se nezalomí nikdy). Tuto možnost oceníme například v případě, kdy požadujeme, aby nějaký nadpis s dalším textem začínal na samostatné stránce. Například pomocí h2 {page-break-after: avoid;} můžeme zakázat zalomení stránky za nadpisem druhé úrovně, takže nadpis, který by bez zadání této vlastnosti byl vytisknut na konci stránky, se vytiskne až na začátku stránky následující. Je však nutné zdůraznit, že hodnota avoid nefunguje v prohlížeči Internet Explorer [3].
Druhou možností, jak tisknout webovou stránku, je vytvořit samostatnou verzi
k tisku, angl. print-friendly version. Text k tisku připravíme stejným způsobem, jako v předchozím případě – odstraníme tmavé pozadí, bezpatkové písmo nahradíme patkovým, smažeme nadbytečnou grafiku atd. Taková verze dokumentu bývá často dostupná po kliknutí na tlačítko tiskárny v záhlaví či zápatí samotného textu. V souvislosti s tímto řešením však vyvstává jistý problém s vyhledávačem Google, který, pokud najde na témže webu dvě textově identické strany, jednu nebo obě penalizuje. Jednoznačně vhodnější je tedy využití prvního způsobu.
15
3.1.2.3 Braillský řádek Braillské písmo vymyslel nevidomý šestnáctiletý francouz Louis Braille v první
polovině 19. století. Toto písmo využívají zrakově handicapovaní dodnes [4]. Uživatelé Internetu se zrakovým handicapem využívají alternativní výstupní zařízení
– braillský řádek (Obr. 5). Jedná se o zařízení, které převádí text zobrazený na obrazovce do bodového písma. Umožňuje tak nevidomému přístup k počítači [5].
Obr. 5 – Braillský řádek.
Zdroj: <http://www.donat.cz/manual2.htm>. Zrakově handicapovaným uživatelům však znesnadňuje práci s Internetem
skutečnost, že mnohé webové stránky jsou pro převádění do braillova písma příliš komplikované.
Webdesigner by měl při tvorbě webové prezentace dbát na správnou sémantiku
kódu, vhodné rozvržení prvků na stránce nebo účelové využití tabulek.
3.2 Softwarové problémy na straně koncového zařízení Pokud bude webdesigner předpokládat, že uživatel používá nějaký konkrétní
operační systém, prohlížeč nebo technologii (Flash, Java Script), může mu způsobit nemalé obtíže s ovládáním webové prezentace.
3.2.1 Operační systém
Operační systém je základní software počítače, který umožňuje co nejefektivnější
využití hardwaru. Jeho hlavním úkolem je zabezpečit běh a programovou podporu aplikačních programů [6].
Nejrozšířenější je operační systém Windows od firmy Microsoft, ale existuje také
velké množství dalších. Z nejznámějších jmenujme například operační systém Linux z GNU větve Unixu, systém FreeBSD z BSD větve Unixu, Solaris z AT&T větve Unixu nebo zastaralé operační systémy CP/M, OS/2 či DOS. Z operačních systémů pro osobní počítače Apple je nejznámější MacOS [6].
V současné době jsou hojně rozšířená také různá alternativní zařízení, jako jsou PDA
nebo mobilní telefony. Pro tyto zařízení existují operační systémy, jakými jsou například PalmOS, Symbian, Windows Mobile nebo nově vyvíjený Android.
16
Při tvorbě webových stránek není možné předpokládat, že jejich návštěvník bude používat ten který operační systém. Některé méně obvyklé prvky totiž nefungují pod všemi operačními systémy.
3.2.2 Prohlížeč Webový prohlížeč, nazývaný také browser, je počítačový program, který slouží
k prohlížení WWW stránek. Umožňuje komunikaci s HTTP serverem a zpracovává přijatý kód. Kód v HTML, XHTML atd. zformátuje podle daných standardů a webovou stránku zobrazí uživateli [7].
Nejrozšířenější jsou grafické prohlížeče a z nich na renderovacím jádře Trident
postavený Microsoft Internet Explorer. Stále více rozšířené jsou prohlížeče vyvíjené organizací Mozilla Foundation a postavené na jádře Gecko – Mozilla Firefox a SeaMonkey. Oblíbeným browserem je též Opera a Google Chrome a mezi známé patří na jádře KHTML postavené prohlížeče Konqueror (MS Windows, Unix, Linux) a Safari (MacOS) [7].
Grafické prohlížeče umožňují zobrazit kromě textu také složitější formátování
stránek, obrázky či animace. Existují však také prohlížeče textové, které zobrazují stránky pouze jako velmi jednoduše formátovaný text. Známý je především textový browser Links a Lynx (Obr. 6). Textové prohlížeče jsou často využívané při kontrole přístupnosti webů – pokud se i v textovém prohlížeči ve správné struktuře zobrazí všechny informace, lze o daném webu říci, že je přístupný.
Webové stánky by neměly být optimalizovány pouze pro úzkou skupinu prohlížečů
nebo dokonce pro jeden browser. Webdesigner by proto měl web kontrolovat v různých prohlížečích.
Celý obsah webu by měl být dostupný i bez rozšiřujících programů, které jsou
nejčastěji ve formě zásuvných modulů, tzv. pluginů. Ty slouží pro přidání dodatečných funkcí prohlížeče, např. přehrávání multimedií. Problémy mohou nastat také s různými grafickými prvky, například světelnými efekty či průhledností, protože některé prohlížeče takovéto technologie vůbec nepodporují.
Obr. 6 – Prohlížeč Google zobrazený v textovém prohlížeči Lynx.
Zdroj: autor.
17
Další problém mohou způsobit takzvané zobrazovací modely, jelikož některé prohlížeče interpretují zapsaný HTML kód odlišně. První režim je „standardní“ a prohlížeč dodržuje v maximální míře postupy a formátování předepsané standardy konsorcia W3C. Existuje také takzvaný „pseudo-standardní“ režim, ve kterém však prohlížeč nedodržuje všechny standardy. Například standardní režim prohlížeče Microsoft Internet Explorer 7 odpovídá spíše tomuto pseudo-standardnímu režimu.
Druhým režimem je nestandardní „quirks“. Tento režim odpovídá postupům, které
jsou použity ve starších prohlížečích [8]. Podrobný přehled včetně příkladů zápisu je uveden v Příloze A.
3.2.3 Podpora technologií Při tvorbě webové prezentace je využívána řada prvků, které mohou způsobit
uživatelům problémy, většinou tím, že nejsou podporovány prohlížečem. Patří mezi ně například Ajax, Flash či JavaScript. Některé nejčastěji používané prvky jsou blíže popsány.
3.2.3.1 Flash
Adobe Flash (dříve Macromedia Flash) je grafický vektorový program, který se
používá pro tvorbu interaktivních animací, prezentací, různých her i rozsáhlých webových prezentací.
Flash exportuje soubory dvou základních formátů [7]:
• .swf – formát využívaný primárně pro webové prezentace, má malou velikost, k běhu je však nutný přehrávač Adobe Flash Player.
• .exe – formát určený přímo pro spuštění v MS Windows, má větší velikost, jelikož má v sobě implementovaný přehrávač. Flash umožňuje webovou prezentaci „rozhýbat a oživit“, díky čemuž jeho obliba
mezi webmastery v poslední době rychle stoupá. Ve velké většině případů se však jedná o technologii nepřístupnou a nevhodnou, která může způsobit komplikace nejen handicapovaným uživatelům, ale také všem ostatním – včetně vyhledávacích robotů.
Mnoho uživatelů Internetu tuto technologii odsuzuje či přímo odmítá. Jedním
z hlavních problémů je výše zmíněná nutnost speciálního přehrávače, bez kterého se flash ve formátu *.swf nepřehraje. Uživatelům často vadí přílišná interaktivita Flashe a mnozí blokují ve svých prohlížečích formát *.swf záměrně. Informace, které chtěl webmaster uživatelům prostřednictvím flashe sdělit, tak nedorazí ke svému cíli.
Web tedy musí být ovladatelný a všechen obsah dostupný, i když uživatel nemůže
nebo nechce z nějakého důvodu flash využít. V případě menšího flashového prvku je vhodné použít textový ekvivalent, který se zobrazí v případě, není-li flash dostupný.
Pokud webmaster vytvoří ve Flashi dokonce celý web, jaký je znázorněný na Obr. 7,
měl by pamatovat také na vytvoření HTML verze stránek, která by měla být obsahově i funkčně s flashovou verzí totožná. Uživatel by měl mít hned v úvodu možnost výběru, kterou verzi preferuje [9].
18
Obr. 7 – Web ve Flashi.
Zdroj: <http://www.ry-guy.com/>.
3.2.3.2 JavaScript JavaScript je multiplatformní objektově orientovaný skriptovací jazyk vycházející
z programovacího jazyka Java, který je používán jako interpretovaný programovací jazyk pro webové stránky a často se vkládá přímo do HTML kódu [9]. Slouží k ovládání interaktivních prvků nebo k tvorbě animací či jednoduchých grafických efektů.
Program v JavaScriptu se obvykle spouští na straně uživatele po stažení webové
stránky z Internetu. Pokud uživatel z jakéhokoli důvodu nemůže nebo nechce tuto technologii využít, zobrazí se mu pouze webová stránka bez JavaScriptu. Pomocí této technologie však bývá řešena navigace, odkazy a často je takto dokonce vypisován text.
Při využití JavaScriptu je tedy nezbytně nutné tuto situaci ošetřit. Rozbalovací
navigaci lze zpřístupnit vytvořením alternativní stránky s odkazy. Otevírání cílové stránky v novém okně je nutné ošetřit tak, že bez podpory JavaScriptu se stránka otevře ve stávajícím okně. Pokud pomocí JavaScriptu vypisujeme nějaký text, je potřeba ho zpřístupnit pomocí atributu <noscript> . Tím bude zajištěno, že se požadovaný text vypíše i bez podpory JavaScriptu [9].
3.2.3.3 SVG
Scalable Vector Graphics, tedy „škálovatelná vektorová grafika“ je značkovací jazyk
a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Jeho možnosti využití v budoucnu jsou zřejmé, neboť pro rastrovou grafiku se na Internetu dosud využívají především formáty GIF, JPEG nebo PNG [7].
19
SVG definuje tří základní typy grafických objektů [7]: • Vektorové tvary – obdélník, kružnice, elipsa, mnohoúhelník, úsečka, lomená čára
a křivka. • Rastrové obrazy. • Textové objekty.
Všechny tyto objekty mohou být různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací. SVG podporuje ořezávání, filtrování, interaktivitu i animaci.
Prohlížeč Mozilla Firefox od verze 1.5 a Opera od verze 8.0 umí SVG grafiku
interpretovat bez jakýchkoli dodatečných modulů. V některých dalších prohlížečích, především v často využívaném Microsoft Internet Exploreru, je však potřeba mít nainstalovaný zásuvný modul, což v současné době využití SVG komplikuje [7].
Při tvorbě webové prezentace je tedy využití tohoto formátu možné, ale webmaster
nemůže spoléhat na to, že grafický objekt bude zobrazen.
3.2.4 Software pro handicapované uživatele Handicapovaní uživatelé (především zrakově) využívají při práci s počítačem
software, který jim prohlížení webových stránek usnadňuje. Jedním z takových prostředků jsou screen-readery, které zpřístupňují práci s počítačem nevidomým. V České republice je nejrozšířenější pravděpodobně britský produkt Hal, který disponuje také braillským (hmatovým) i hlasovým výstupem. Jako další můžeme jmenovat Jaws nebo WindowEyes.
Dalším produktem je Lunar, tzv. elektronická lupa. Zpřístupňuje práci s počítačem
i slabozrakému uživateli a umožňuje zvětšit část obrazovky. Jeho vyvinutější verze Lunar Plus je více přizpůsobena silně slabozrakým uživatelům a disponuje i hlasovým výstupem.
Celá sada odečítacích a zvětšovacích programů, tedy programů Hal a Lunar, je
známá pod názvem Supernova [10]. Softwarová lupa je také integrována v operačním systému MS Windows. Najdeme ji
v Příslušenství ve složce Usnadnění. Screen-readerů a softwarových lup existuje celá řada a každý produkt může
interpretovat webovou prezentaci jinak. Při špatné sémantice webu tak nemusí být podpůrné softwarové prostředky uživatelům nápomocné.
20
4 Potřeby uživatelů Každý uživatel má své specifické potřeby, na které je nezbytné brát při tvorbě
webové prezentace ohled. Odlišné požadavky na web nemají pouze handicapovaní uživatelé, ale také vyhledávací roboti.
4.1 Osoby V souvislosti s tvorbou webové prezentace jsou často uváděny skupiny různě
handicapovaných uživatelů [11]. Tito uživatelé mají často u webů, které nejsou vhodně navrženy, problémy s ovládáním nebo zobrazováním. Specifické potřeby těchto skupin uživatelů jsou dále popsány.
4.1.1 Tělesně handicapovaní uživatelé Mezi tělesně handicapované uživatele lze zařadit početnou skupinu lidí
s pohybovými, sluchovými nebo zrakovými problémy. Pro uživatele je důležité, aby webové stránky byly přizpůsobeny jejich alternativním potřebám. Vhodnou metodiku poskytují Pravidla pro tvorbu přístupného webu vydaná Ministerstvem informatiky, která jsou uvedena v Příloze B této práce.
4.1.1.1 Pohybově handicapovaní uživatelé
Mezi pohybově handicapované uživatele řadíme nejen trvale, ale také dočasně
postižené, kteří například prodělali úraz horní končetiny. Pro uživatele, kteří i přes své postižení mohou používat k ovládání myš, je vhodné, aby ovládací prvky byly dostatečně velké.
Většina pohybově handicapovaných uživatelů však nemůže počítačovou myš při
ovládání webu používat a po stránce se často pohybují pouze pomocí klávesnice, která musí umožnit její plnohodnotné ovládání. Pro snadnější ovládání je dokonce možné používat speciální klávesnici pouze pro jednu ruku. Takové klávesnice jsou znázorněny na Obr. 8 a 9.
Obr. 8 – Klávesnice pro jednu ruku. Obr. 9 – Klávesnice pro jednu ruku.
Zdroj: <http://www.keytools-ergonomics.co.uk/keyboards/images/
maltron_onehand_left.jpg>
Zdroj: <http://www.keytools-ergonomics.co.uk/keyboards/images/
frogpad_right.jpg>.
21
Tvůrci webových stránek by proto měli zkusit své prezentace ovládat bez pomoci myši. Pro zjednodušení ovládání je vhodné pro nejdůležitější odkazy definovat klávesové zkratky, takzvané accesskeys nebo také „horké klávesy“. Aby nastavení zkratek nekolidovalo s nastavením internetového prohlížeče, zpravidla se umisťují klávesové kombinace na čísla.
Klávesové zkratky mají být definovány jednotně [12]:
• 0 – obsah stránky, odkaz vedoucí na začátek unikátního obsahu aktuální stránky. • 1 – nápověda ke klávesovým zkratkám, stránka s informací o použitých klávesových
zkratkách. • 2 – hlavní strana, odkaz na úvodní stránku. • 3 – mapa stránek (nepovinná), pokud je to možné, odkáže na mapu stránek. • 4 – vyhledávání (nepovinné), pokud je to možné, přenese kurzor do textového
políčka vyhledávacího formuláře. • 5 až 9 – volitelné funkce.
„Horké klávesy“ jsou aktivovány pomocí klávesové kombinace, která závisí na prohlížeči a operačním systému [12]: • Internet Explorer ve Windows – Levý Alt + Shift + číslo, pro potvrzení akce je
potřeba stisknout klávesu Enter. • Mozilla Firefox ve Windows a na Linuxu – Levý Alt + Shift + číslo • Mozilla Firefox na Mac OS X – Ctrl + přiřazené číslo. • Opera ve Windows – Shift + Esc + přiřazené číslo • Safari na Mac OS X – Ctrl + Alt + přiřazené číslo.
4.1.1.2 Sluchově handicapovaní uživatelé
Sluchově handicapovaní uživatelé jsou nejen ti zdravotně postižení, jejichž
mateřštinou je znaková řeč, ale také osoby s dočasně zhoršenou možností slyšet (například kvůli úrazu, nemoci či externímu hluku) a majitelé počítačů bez reproduktorů [13].
Jelikož Internet primárně není zvukové médium, nemají sluchově handicapovaní
většinou žádné výrazné problémy. Multimediální prezentace jsou však v poslední době stále častější, proto je potřeba uživatelům s tímto handicapem zajistit plnohodnotnou textovou alternativu. Tu zajistíme přidáním titulků k videozáznamu nebo přepsáním audio záznamu do textové podoby.
4.1.1.3 Zrakově handicapovaní uživatelé
Zrakově handicapovaní uživatelé jsou často mylně považováni za jedinou skupinu
postižených uživatelů Internetu. Ačkoliv svým počtem nepatří k většině, kvůli svému postižení na ně nepřístupnost webových stránek dopadá největší měrou. V České republice je okolo 100.000 osob s takovým postižením [11].
Sjednocená organizace nevidomých a slabozrakých ČR (SONS) zpracovala přehled
nejčastějších zrakových vad. U jednotlivých onemocnění jsou také popisy symptomů, díky nimž mohou tvůrci webů své prezentace těmto uživatelům lépe zpřístupnit [14].
22
Nevidomí Nevidomých uživatelů Internetu není příliš velké množství, ale toto médium je pro
ně jednou z mála možností, jak komunikovat s okolním světem. Tito uživatelé nemohou obsah webových stránek číst zrakem, proto pro získávání obsahu používají pomocná zařízení – hlasové a hmatové výstupy. Prvním jmenovaným se říká také hlasové čtečky, a jak název napovídá, toto zařízení interpretuje svému uživateli obsah webové prezentace prostřednictvím hlasu. Další možností jsou hmatové výstupy, které díky takzvanému braillskému řádku zobrazují text v braillově písmu. Informace o tom, co se bude předčítat či zobrazovat, předává hlasové syntéze nebo braillskému řádku takzvaná čtečka obrazovky [15].
Alternativní pomůcky dokáží nevidomým uživatelům interpretovat pouze text, nikoli
však grafické objekty. Informace na webové stránce jsou zpracovávány lineárně, a tak uživateli chybí globální pohled na zobrazované informace. Proto obsah webové prezentace musí být formou dobře strukturovaného textu a všechny grafické a multimediální prvky nesoucí informaci musí mít své textové alternativy. Jelikož tito uživatelé ovládají počítač pouze pomocí povelů z klávesnice, je nutné, aby navigace byla snadno použitelná.
Sjednocená organizace nevidomých a slabozrakých ČR vytvořila dokumentaci zásad
přístupnosti webových stránek pro uživatele s těžkým zrakovým postižením nazvanou Blind Friendly Web. Jedná se o pravidla, která jsou setříděna podle priority do tří kategorií a částečně se překrývají s Pravidly pro tvorbu přístupného webu. Jejich plné znění je uvedeno v Příloze C. Slabozrací
Další kategorií uživatelů se zrakovým postižením jsou slabozrací. K prohlížení webů
mohou používat vlastní zrak, ale pouze omezeně. Jejich základní potřebou je s textem manipulovat, především ho zvětšovat. Od webové prezentace tedy požadují, aby velikost textu byla definována pomocí relativních jednotek. Je pro ně důležitá také možnost zvětšit si takto definovaný text tak, aby zůstal vůči svému okolí i nadále čitelný [11].
K manipulaci s textem slouží funkce Page Zoom, která umožňuje zvětšovat
a zmenšovat prvky na webových stránkách, včetně obrázků. Je nutné dbát na výšku řádků a velikost obrázků. Textové informace by měly být
interpretovány jako text a nikoliv jako text v obrázku, protože bitmapové obrázky se při větším zvětšení stávají nečitelnými a nelze je interpretovat čtečkami. Obrázky samotné nesmí mít malé rozlišení, jinak pro uživatele s tímto postižením ztratí informační hodnotu. Je také podstatné, aby text byl vůči svému pozadí dostatečně kontrastní [13, 16]. Barvoslepí
Forem sníženého barevného citu je celá řada. Pokud pigmenty reagující na červenou,
zelenou nebo modrou barvu neplní svou funkci, postižená osoba tuto barvu hůře rozlišuje. Hlavním požadavkem barvoslepých uživatelů Internetu je proto vysoký kontrast
barev. Kontrast lze ověřit pomocí malých programů, které jsou online dostupné na Internetu. Vhodné také je, když si takto handicapovaní mohou individuálně upravit
23
barevnost stránek. U prezentace důležitého obsahu by se tvůrce webových stránek neměl spoléhat na konkrétní barvu, ale text by měl zvýraznit jinými prostředky.
Uživatelé s jiným zrakovým handicapem
Běžnými onemocněními jsou krátkozrakost (myopie) a dalekozrakost
(hypermetropie), kterými trpí velké množství populace. Obě vady způsobují neostré vidění a problémy s vnímáním hloubky. Různé druhy zákalu, především častý šedý (katarakta) a zelený (glaucoma), způsobují rozmlžení a rozostření pohledu. Takto postižené osoby poté vnímají okolí, jako by bylo v mlze. K častým onemocněním patří také nepravidelné zakřivení rohovky, diabetická retinopatie, která způsobuje malé výpadky v zorném poli, nebo degenerace sítnice, kvůli které se zorné pole zužuje [14].
Všichni tito uživatelé mají na vzhled webu podobné nároky jako slabozrací nebo
barvoslepí. Je pro ně nezbytná především možnost zvětšovat písmo nebo upravit barevný kontrast.
Uživatelé s omezenou schopností vidět
V posledních letech si mnoho lidí se zrakovými problémy nechává odstranit vady
laserovými operacemi. Mnozí se již druhý den mohou zapojit do běžného života, ale přesto mají ještě několik dní rozostřené vidění a jejich požadavky jsou poté shodné s těmi, jaké mají trvale handicapovaní uživatelé.
Někteří uživatelé mají také nekvalitní monitor, který zobrazuje některé barvy velmi
podobně a způsobuje nedostatečný kontrast barev. Velké množství uživatelů je také handicapováno aktuálními světelnými a zobrazovacími možnostmi. V této situaci může velké problémy způsobit odraz slunce v monitoru nebo nevhodné osvětlení místnosti [11].
4.1.2 Duševně handicapovaní uživatelé Duševně handicapovaní uživatelé jsou velmi početnou, ale zároveň často opomíjenou
skupinou při řešení problematiky bezbariérovosti webu. Martin Kopta [16] uvádí několik typů duševního postižení. Tito uživatelé mají některé specifické požadavky, jejichž dodržení však kladně zhodnotí většina uživatelů Internetu.
Uživatelé s duševním handicapem ocení především strukturované stránky,
přehlednou navigaci, kratší odstavce doplněné o vhodné nadpisy, větší písmo a vysvětlující obrázky. Naopak nevhodné je využití animovaného pozadí a videa nebo zvuků, které nelze vypnout. Lze tedy říci, že na stránce by se mělo nacházet co nejméně rušivých elementů.
4.1.2.1 Uživatelé nervově postižení – epileptici
Epilepsie, neodborně nazývaná také padoucnice, je záchvatovité onemocnění mozku,
které je provázené poruchami vědomí a křečemi. Touto nemocí trpí nejméně 1% populace [17].
Hlavním požadavkem těchto uživatelů je, aby na stránce nebylo velké množství
animovaných prvků a aby nic neblikalo rychleji, než jednou za sekundu. Z tohoto důvodu
24
je také nevhodná HTML značka <blink> nebo CSS deklarace text-decoration: blink , protože ani v jednom případě není možné nastavit rychlost blikání [18].
Vhodné by bylo, aby tvůrce webu od blikajících objektů zcela upustil, protože
u epileptiků může blikání v krajním případě způsobit epileptický záchvat.
4.1.2.2 Uživatelé s poruchami učení a soustředění Častou formou takového postižení je dyslexie, tedy porucha schopnosti číst. Takto
postižení lidé mají problémy s dlouhými souvislými texty, malými mezerami mezi odstavci a s texty psanými velkými písmeny (verzálkami).
Uživatelé s mentálními poruchami mají potíže udržet pozornost. Překážkou jsou pro
ně grafické a zvukové prvky, které na sebe poutají pozornost a nelze je vypnout. Problémem může být také písmo, které není možné zvětšit.
Lidé s poznávacími (kognitivními) problémy mají potíže s textem, který je
zarovnaný do bloku, a s textem, ve kterém jsou využity různé typy, velikosti a barvy písma.
4.1.2.3 Uživatelé s omezenou schopností porozumět textu
Uživatelé s intelektuálním deficitem mají problémy s cizími slovy a také se složitými
větnými konstrukcemi. Pro pochopení složitějšího textu je pro ně nutné použití vysvětlujících obrázků.
Je-li však web odborný nebo je psán hantýrkou či žargonem, může mít s obsahem
stránky problémy i uživatel, který není v dané oblasti dostatečně vzdělán. Omezenou schopnost porozumět textu mají především cizinci, které může daná
webová prezentace zaujmout, ale jazyková bariéra jim znemožní získat více informací. Web by proto měl obsahovat alespoň kontaktní formulář v různých jazycích.
4.2 Roboti Internetový robot je počítačový program, který pro svého majitele vykonává nějakou
rutinní činnost na Internetu. Nejčastější formou je vyhledávací robot, jinak nazývaný také bot nebo crawler. Robot má za úkol jednotlivě procházet webové stránky, hledat na nich odkazy na nové stránky, indexovat obsah těchto stránek a umožnit jejich následné prohledávání [7].
Při zahájení indexace začíná robot nejčastěji v katalogu, kde najde odkaz a sleduje
ho. Nalezenou stránku si stáhne pro zaindexování a zároveň hledá další odkazy, které případně opět sleduje. Robot tedy najde pouze takovou stránku, na kterou vede nějaký odkaz. Informace, které roboti vyhledají, jsou uloženy do databází. Uživatelé poté mohou informace vyhledat prostřednictvím vyhledávačů (například Google, nebo Seznam či Centrum) a dostat se tak na požadovanou stránku, aniž by předem znali její webovou adresu [19].
25
Robot čerpá informace pouze z čistého textu a odkazů. Tvůrci webů by proto měli robotům nabídnout web členěný pomocí nadpisů a seznamů, přičemž důležitý text by se měl nacházet na začátku stránky. Při tvorbě webu je proto vhodné zobrazit stránku v textovém prohlížeči, například Lynx, pomocí kterého je možné zjistit, jak ji „vidí“ robot.
Čím lépe robot bude dané webové stránce „rozumět“, tím lépe bude vyhledané
informace interpretovat a „přivede“ na webovou stránku více návštěvníků.
26
Obr. 10 – Příklady layoutu. Zdroj: <http://www.codinghorror.com/blog/images/css-grid-layout-samples.png>.
5 Přizpůsobení webové prezentace současným požadavkům Na webovou prezentaci jsou v současné době kladeny velké nároky. Při tvorbě webu
je nutné přizpůsobit ho co největšímu počtu známých požadavků. Úprava všech těchto dílčích částí přitom vede k lepší optimalizaci pro uživatele i vyhledavače, takže výsledná prezentace pak bude navštěvovanější a tím i úspěšnější.
5.1 Layout, informační architektura a struktura webu Layout, informační architektura a struktura webu jsou tři oblasti, které spolu úzce
souvisejí, navzájem se doplňují a jedna bez druhé nemůže existovat. Všechny tři oblasti jsou dále podrobněji popsány.
5.1.1 Layout Pojmem layout označují webdesignéři rozmístění základních prvků na stránce.
Layout je tedy jakési schéma, jež říká, kde bude umístěno logo, hlavní navigace, drobečková navigace a další obvyklé prvky stránky [20]. Příklady layoutu znázorňuje Obr. 10.
27
Uživatelé mají zažité určité zvyklosti, na které je potřeba při prvním návrhu layoutu brát ohled. Jedná se o následující webové konvence [7]: • Logo v levém horním rohu naznačuje návrat na domovskou stránku. • Sekundární navigační prvky, jako je mapa webu nebo vyhledávání jsou oddělené od
navigace mezi stránkami. • Na dlouhých stránkách se používají odkazy Nahoru. • Textové odkazy jsou zopakovány ve spodní části stránky. • Nákupní košík je v pravém horním rohu.
5.1.2 Informační architektura webu Informační architektura je obor zabývající se tříděním informací, jejich uspořádáním
a vhodným pojmenováním. Cílem informační architektury je usnadnit vyhledávání relevantních informací jejich vhodnou organizací, navigací a reprezentací. V současné době je informační architektura využívána nejen například v archivech a knihovnách, ale především při tvorbě webových stránek.
Hlavním úkolem informační architektury při tvorbě webové prezentace je navržení
celkové hierarchie informací a jejich rozdělení do jednotlivých stránek (struktura webu), navržení vazeb a vztahů mezi stránkami, volba vhodných typů navigace, pojmenování jednotlivých stránek, uspořádání informací v textovém obsahu a návrh rozložení stránek.
S informační architekturou je spojován grafický návrh webu, copywriting,
optimalizace pro vyhledávače nebo použitelnost [21].
5.1.3 Struktura webu Pod pojmem struktura webu se skrývá logické uspořádání a rozdělení jednotlivých
informací na stránky podle různých souvislostí. Kvalitní struktura napomáhá tomu, aby se uživatel lépe orientoval v informacích, které mu webová prezentace nabízí.
Nejvhodnější strukturou webu je stromová (též pyramidová), ve které mají informace
své jediné místo, jsou seřazené do kategorií a navzájem jsou si nadřazené a podřazené [22]. Informace můžeme třídit abecedně, chronologicky, geograficky, podle důležitosti,
podle tématu nebo třeba pro určitou cílovou skupinu [23].
5.1.3.1 Navigace Navigace funguje jako průvodce, který umožňuje návštěvníkům přistupovat
k informacím [30]. Pro ovládání webu je vhodně navržená navigace nezbytně nutná. Většinou odpovídá základní struktuře webu a nejčastěji je zobrazena jako kombinace hlavního a lokálního menu.
Nejčastější navigací je tzv. TLB – top, left, bottom, tedy navigace nahoře, vlevo
a dole. Většinou se jedná o kombinaci navigace hlavní a lokální.
28
5.1.3.2 Hlavní navigace Hlavní navigace, často označovaná také jako menu, je součástí každého
vícestránkového webu. Vyskytuje se na všech stránkách a obsahuje odkazy na hlavní sekce webu nebo na podsekce [22].
Hlavní navigace může být realizována jako horizontální nebo vertikální. Horizontální
navigace (top) se často nachází v záhlaví stránky a většinou zůstává, stejně jako grafické záhlaví, pro celý web neměnná. Vertikální navigace bývá nejčastěji řešena jako postranní a většinou je umístěna v levé části stránky. Stále častěji, obzvláště u blogů a obsahových stránek, bývá v pravém sloupci.
Oba typy navigace by měly být řešeny jako nečíslovaný seznam. Odsazení a odrážky
lze odstranit pomocí kaskádových stylů. 5.1.3.3 Lokální navigace
Lokální, jinak také místní, navigace bývá umístěna na podstránkách webu a obsahuje
odkazy na vnitřní stránky či podsekce tématu, kterému se uživatel právě věnuje. Navigace bývá nejčastěji umístěna na levé nebo pravé straně a je řešena jako součást
svislého hlavního menu. Alternativně může být také doplňkem horního hlavního menu. Lokální navigace bývá stále častěji řešena jako dynamické rozbalovací menu, které
se rozbaluje při najetí myši na zvolenou položku. V této podobě se nejčastěji objevuje v horizontální podobě. K zajištění funkčnosti tohoto menu se však používají technologie, například Flash nebo JavaScript, které v některých prohlížečích nefungují. K dynamické navigaci je pak potřeba vytvořit alternativu, která umožní používání webu i uživatelům s textovými prohlížeči, kapesními počítači nebo čtečkami handicapovaných uživatelů [22]. V současné době již je možné pomocí DHTML vytvořit validní a bezbariérovou stránku bez nutnosti použití textových alternativ.
5.1.3.4 Drobečková navigace
Drobečková navigace je dalším z navigačních prvků webu. Slouží k určení aktuální
stránky ve struktuře webu a zobrazuje aktuální cestu až na hlavní stránku. Zároveň usnadňuje pohyb po webu a rychlý přesun na stránky v rámci této hierarchie, protože není nutné používat tlačítko „zpět“ ani jiné navigační prvky [24].
Ačkoliv může být drobečková navigace umístěna téměř kdekoli, nejčastěji se nachází v horní části stránky pod záhlavím nebo horizontální navigací. Stejně jako hlavní navigace by měla být řešena pomocí seznamu.
Podle Keitha Instona [25] existují tři typy drobečků, anglicky breadcrumbs. Každý
z nich popisuje rozdílné charakteristiky webu: • Drobečky pozice (angl. location breadcrumbs) znázorňují pozici aktuální stránky
v hierarchii webu nezávisle na cestě, kterou se na danou stránku návštěvník dostal. • Drobečky cesty (angl. path breadcrumbs) ukazují cestu, kterou se uživatel dostal na
aktuální stránku. Stejný obsah webu tedy může mít různé drobečky, protože každý návštěvník mohl přijít jinou cestou.
29
• Drobečky vlastností (angl. atribute breadcrumbs) nesou základní informace o produktu, jako je například značka, předmět, kategorie nebo cena.
5.1.3.5 Kontextová navigace
Kontextová navigace je zvláštním typem navigace. Jedná se o odkazy, takzvané
kontextové, které se vyskytují přímo v textu obsahu a v souvislosti s ním odkazují na jiné místo na stránkách či na jiný web. Tento typ navigace uživateli pomáhá najít detailnější nebo příbuzné informace, o kterých se píše na jiné stránce.
Druhým používaným způsobem řešení kontextové navigace je umístění bloku
odkazů na závěr textu. Tyto odkazy jsou označovány jako související stránky [22].
5.2 Grafické řešení Grafika webových stránek by měla dokreslovat jejich obsah a zdůrazňovat základní
princip webu, kterým je předávání informací uživatelům. Často je grafická tvorba nesprávně nazývána webdesign, což je pojem zahrnující především návrh funkčního řešení a nikoli pouze návrh řešení grafického [26].
5.2.1 Barvy Při návrhu webových stránek je důležitým prvkem barevné schéma, tedy volba sady
barev. Barvy nejen vytváří grafickou podobu stránek, ale zpřehledňují strukturu a navigaci. Pro velké plochy není vhodné používat příliš syté barvy, jelikož unavují oči. Velké
nebezpečí hrozí při volbě poměru světlosti mezi pozadím a písmem [27]. Při tvorbě webové prezentace je taktéž nezbytně nutné mít na paměti, s ohledem na přístupnost, že barva nesmí sama o sobě vyjadřovat nějakou informaci.
Barvy by měly celkově působit příjemně a navzájem by měly ladit. Volba barev má
také vliv na chování či myšlení člověka a může výrazně ovlivnit návštěvnost webových stránek. Barvy, které uživatele nejvíce upoutají, například červená, oranžová a žlutá, mohou také stejně dobře působit rušivě.
Uživatele webových stránek může ovlivnit oblíbenost či neoblíbenost některé použité
barvy, její viditelnost nebo poutavost. S mnohými barvami bývá spojována nějaká věc či vlastnost – bílá barva představuje čistotu, černá smutek, červená lásku, žlutá slunce atd. Dalším problémem může být, že muži a ženy pohlížejí na některé barvy odlišně.
Při tvorbě webové prezentace je tedy vždy nutné dbát nejen na dostatečný barevný
kontrast, ale také na volbu vhodných barev podle toho, pro jaké návštěvníky je web určen.
5.2.2 Logo Slovo logo pochází z řeckého slova logos, což znamená pojem, slovo, řeč či zákon.
V současné době se tento výraz používá pro označení firmy, instituce, organizace nebo společnosti.
30
Logo bývá ztvárněno graficky, je uváděno na produktech dané společnosti, pomáhá identifikaci výrobku a vytváří povědomí o značce (tzv. image-building) [7]. Jak znázorňuje Obr. 11, může mít logo pro různé příležitosti různou podobu.
Obr. 11 – Oficiální logo vyhledávače Google a některé jeho modifikace.
Zdroj: <http://www.google.com/>
Graficky zpracované logo bývá často umístěno ve statickém záhlaví stránky. Jeho nejtypičtější pozice je v levém horním rohu webové prezentace. Nejvhodnějším formátem pro takto jednoduchou grafiku je formát GIF nebo PNG [28].
Logo by zároveň mělo zastupovat nadpis první úrovně a mělo by být odkazem, který
ze všech vnořených stránek odkazuje na stránku hlavní. Text takového odkazu je pro nehandicapované návštěvníky skrytý, ale pro vyhledávače nebo uživatele s alternativními zařízeními musí být zobrazen.
5.3 Rozmístění prvků v prezentaci V dubnu roku 2006 zveřejnila společnost Nielsen Norman Group (NNG) výsledky
průzkumu, ve kterém se zabývala zjišťováním, jaké části webové prezentace návštěvníka nejvíce zaujmou [29]. Výsledky průzkumu jsou zobrazeny na Obr. 12.
Bylo zjištěno, že pohyb očí po stránce připomíná tvar písmene F. Uživatelé se
nejdříve zaměří na horní část textu webových stránek, který sledují horizontálním pohybem očí. Stejný pohyb vykonávají o něco níže, ale čtení již zpravidla nedokončí a pohyb oproti předchozímu pokryje kratší prostor. Třetím hlavním pohybem očí je vertikální prohlédnutí navigace, čímž je dokončen tvar písmene F.
31
Obr. 12 – Pohyb očí uživatelů po webových stránkách.
Zdroj: <http://www.useit.com/alertbox/f_reading_pattern_eyetracking.jpg> Z výzkumu NNG byly odvozeny závěry [29]:
• Uživatelé nečtou celý text webové prezentace a její důkladné čtení je vzácné. • V prvních dvou informacích musí být obsažena základní informace. • Nadpisy, podsekce či body musí začínat slovy, která nesou informaci, aby si jich
uživatel všimnul.
5.4 Copywriting a typografie Obsah webu, nejčastěji tvořený textem, je nejdůležitějším prvkem webové
prezentace. Právě kvalita textu je však často opomíjena. Je tedy nezbytně nutné, aby se webdesigner seznámil se dvěma obory, které se prací s textem zabývají – copywritingem a typografií.
5.4.1 Copywriting
Web copywriting je umění, jak psát kvalitní texty pro web. Ačkoliv vzhled webové prezentace může zaujmout a vzbudit důvěru, text je to, co návštěvníka zajímá. Kvalitně napsaný text pomáhá zvyšovat návštěvnost webu, má vliv na úspěšnost prezentace a je v podstatě jedinou možností, jak na delší dobu upoutat návštěvníka [30, 31].
Internetový uživatel často přeskakuje mezi kapitolami, nesystematicky prochází
výraznější záchytné body a samotný text nečte. Záchytnými body v textu jsou především nadpisy, které musí být zajímavé, aby upoutaly pozornost. Vhodné je použití podnadpisů, časté členění do odstavců a využití seznamů.
Nevhodně napsaný text se může stát nepřekonatelnou bariérou. Vhodný je krátký
text s jasným cílem, který poskytne čtenářům konkrétní informace. Je dobré používat srozumitelný jazyk, vyhnout se cizím či odborným výrazům a samozřejmě hantýrce, nářečí a dalším nespisovným tvarům jazyka. Neméně důležitá je také gramatická správnost, tedy text bez chyb a překlepů [31, 32]. Nutné je dbát také na správný zápis interpunkčních a dalších znamének.
32
Samozřejmostí je, že text musí být pravdivý a všechny publikované informace ověřené, ideální je uvést zdroj informací. Vhodné je k převzatému textu přidat vlastní pohled na věc [33].
5.4.2 Typografie Typografie je umělecko-technický obor, který se zabývá písmem a tedy formou,
kterou je text prezentován. Podstatou typografie je volba písma. S psaním textů pro web souvisí jeho velikost,
typ nebo kontrast barvy písma vůči pozadí. Nevhodné zvolení těchto prvků může návštěvníky webu odradit.
Pro tištěné texty je vhodné patkové písmo, ale pro prezentování elektronickou
formou je doporučována bezpatková verze, která se na displeji lépe čte. Pro velikost textu i nadpisů je vhodné zvolit kompromis a zachovat možnost změny velikosti, tzn. velikost písma definovat pomocí relativních jednotek.
Výsledný vzhled dokumentu ovlivní grafická úprava textu. Důležité informace je
vhodné zvýraznit, například změnou řezu písma, ale nikoli pouze odlišením barvy. Text by měl být členěn do odstavců s krátkými nadpisy, které budou působit jako vizuální zarážky [32].
5.5 Validita kódu HTML a CSS K tvorbě webových prezentací je nejčastěji využíván značkovací jazyk HTML
a kaskádové styly. V obou případech je nezbytné dodržovat správnou syntaxi jazyka a výsledný web nesmí obsahovat žádné chyby.
5.5.1 HTML HTML je zkratka anglického termínu HyperText Markup Language, což lze přeložit
jako hypertextový značkovací jazyk pro popis stránek [34]. HTML je nejpoužívanějším jazykem pro vytváření stránek v systému WWW.
Jazyk HTML je charakteristický značkami, takzvanými tagy, které určují význam
obsaženého textu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky. Jako příklad uveďme značku pro odsazení řádku: <br /> . Část dokumentu uzavřená mezi značkami tvoří takzvaný prvek dokumentu, jehož součástí mohou být další vnořené prvky. Vlastnosti prvků určují atributy, které doplňují informace.
Tagy jsou párové a nepárové. Koncová značka párového tagu je totožná se
značkou úvodní, pouze před názvem koncové značky se uvádí lomítko. Příkladem je tag pro označení odstavce, který se zapisuje takto: <p>Text odstavce</p> . Nepárovým tagem je například výše zmíněné odsazení řádku, kde se lomítko uvádí před koncovou závorkou [7].
33
Dokument v jazyce HTML má předepsanou strukturu [7]. Jako první se uvádí definice typu dokumentu, následuje kořenový prvek <html> , dále hlavička dokumentu <head> a tělo dokumentu <body> .
Příklad klasického HTML souboru [35]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Titulek dokumentu</title> Obsah hlavi čky dokumentu </head> <body> Obsah t ěla dokumentu </body> </html>
Př. 1 – Ukázka HTML souboru. Dříve nebylo povinné nepárové tagy jazyka HTML ukončovat a například značka
pro odsazení řádku se zapisovala pouze <br> . Mnohé weby mají tagy stále uvedeny v těchto formátech, přičemž výsledný kód tak není validní a některým uživatelům se tak může webová stránka problematicky zobrazovat.
5.5.2 CSS
Zkratka CSS znamená Cascading Style Sheets, což lze přeložit jako kaskádové styly.
Zatímco dříve HTML tagy sloužily také k definování vzhledu stránky, v současnosti se používají především k určení její struktury. Vzhled dokumentu pak zajišťují CSS, které umožňují oddělit ho od jeho struktury a obsahu. Kaskádové styly umožňují širší formátovací možnosti, snadnější tvorbu a údržbu stylu, oddělení struktury a stylu nebo vyšší přístupnost dokumentů [36].
Kaskádové styly je možné definovat třemi způsoby [37]:
• Přímý styl umožňuje definování přímo v textu dokumentu, například: <p style="color: red">Tento odstavec bude červený.</p> . • Pomocí stylopisu (anglicky stylesheet) v hlavičce stránky, například: <style type="text/css"> p {color: red} </style> Všechny odstavce v dokumentu pak budou psány červeným písmem. • Použitím externího stylopisu zápisem do souboru *.css, na který se stránka odkazuje.
Do externího dokumentu se poté zapíše například p {color: red} a do hlavičky dokumentu například <link rel="stylesheet" type="text/css" href="styly.css" /> . Také v tomto případě budou všechny odstavce v dokumentu červené. V případě posledního uvedeného způsobu je obsah webu uložen v souboru *.html
a design a formátování se načítá z externího souboru *.css. Tento způsob umožní například
34
v případě nutnosti změny designu webu změnit pouze soubor CSS a změna se následně projeví na celém webu.
Také použití CSS může u některých prohlížečů způsobit problémy, protože každý
prohlížeč kód interpretuje jinak. Častým problémem je dědění – v případě nadefinování příliš globálního tagu může být tato vlastnost děděna například tabulkou, kde pak není možné tuto vlastnost přepsat.
Příklad využití CSS:
p {font-family: georgia; font-size: 0.8em; margin-top: 0px; text-align: justify;}
Př. 2 – Ukázka použití CSS.
5.5.3 Validita Pojem validita je často překládán jako platnost. Každý kódovací a programovací
jazyk má svojí syntaxi, kterou je nutné dodržovat. V souvislosti s Internetem pojem validita určuje, která webová stránka dodržuje syntaxi jazyka a odpovídá platným standardům [38].
Validní webová stránka je tedy taková, která je korektní po gramatické (syntaktické)
stránce. Taková stránka nesmí obsahovat žádné chyby, které mohou vzniknout jak nedokonalými znalostmi kodéra, tak omylem, například překlepem.
Validita je vhodná nejen z pohledu správné syntaxe. Při dodržování předepsaných
standardů je vyšší pravděpodobnost správného zobrazení ve všech prohlížečích a tedy i těch alternativních, zvyšuje se použitelnost webu, jelikož stránka by se měla rychleji načítat, a roste také přístupnost webu, protože validní stránka je vhodněji strukturovaná při vypnutí kaskádových stylů a lépe čitelná pro vyhledávací roboty i handicapované uživatele. Programátoři se v takovém kódu lépe zorientují a je snazší opravit chyby nebo zapracovat změny.
V souvislosti s korektním zobrazováním validní webové stránky ve všech
prohlížečích je nutné jako výjimku zmínit především prohlížeč Internet Explorer, který standardy nedodržuje. Tvůrce webu tedy v těchto případech musí použít nestandardní konstrukce kódu, aby případnou chybu obešel. V této souvislosti se hovoří o řízené nevaliditě [38].
5.5.4 World Wide Web Consortium
World Wide Web Consortium je známé pod zkratkou W3C. Jedná se o mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web. W3C se zabývá také vývojem softwaru, přístupností webů či otevřenou diskuzí o webu [7].
35
Konsorcium vydává standardy pro kontrolu validity stránky. Standardy existují pro různé jazyky, a tak také validitu lze kontrolovat například pro CSS, HTML nebo XHTML zvlášť. Ke kontrole validity stránek slouží oficiální online validator, který se nachází přímo na webu W3C.
5.5.5 WYSIWYG WYSIWYG je zkratka anglické věty „What You See Is What You Get“, což lze
přeložit jako „Co vidíte, to dostanete“. Jedná se o způsob editace dokumentů, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí webového dokumentu [34].
Jako WYSIWYG jsou označovány editory, které umožňují zformátovat text
a následně ho převést do HTML kódu. K takové práci není nutná znalost HTML kódu, proto textové editory využívají k tvorbě webu především úplní začátečníci.
Příkladem WYSIWYG editorů je 602Pro PC Suite, Adobe Dreamweaver, Adobe
GoLive, Microsoft FrontPage, Microsoft Word, Mozilla Editor, NVU nebo OpenOffice [39].
Z důvodu obtížnosti interpretace zformátovaného textu do HTML kódu však takové
editory generují nadbytečné prvky, které jsou buď nevhodně rozmístěny, nebo dokonce do kódu vůbec nepatří. Takový web je ve výsledku zcela nevalidní, „nabobtnalý“, obtížně editovatelný a ještě hůře interpretovatelný.
5.6 Bezbariérovost Bezbariérovost umožní uživatelům web dobře ovládat, tedy pracovat s ním, aniž by
jim kladl do cesty překážky, které by bránily dosažení cíle. Bezbariérovost zahrnuje použitelnost a přístupnost. Terminologie však není zcela
jednotná. Často je použitelnost zahrnována do přístupnosti a bezbariérovost je uváděna jako synonymum přístupnosti.
5.6.1 Použitelnost Použitelný web je takový, který se uživatelům dobře ovládá. Tedy web, na kterém se
dobře orientují a rychle najdou to, co hledají [9]. Použitelnost, anglicky usability, tedy vyjadřuje, jak je pro cílového uživatele snadné
či obtížné používat web.
5.6.2 Přístupnost Přístupnost, anglicky accessibility, představuje situaci, kdy daná věc neklade svým
uživatelům při používání žádné zásadní překážky. Synonymem pro přístupnost může být slovo bezbariérovost. Přístupnost je jednou ze složek použitelnosti [13].
36
Přístupné webové stránky jsou použitelné pro každého uživatele Internetu, a to nezávisle na jeho postižení, schopnostech, znalostech, zkušenostech či zobrazovacích možnostech. Jsou to tedy takové stránky, které nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat [40]. Jak uvádí David Špinar [9], je bezbariérovost definována několika zákony a metodikami.
V mnoha vyspělých zemích byla pro bezbariérový web přijata legislativní opatření.
V některých státech, například ve Spojených státech amerických nebo ve Velké Británii, existují zákony, které obecně upravují diskriminaci menšin. V USA je to zákon Americans with Disabilities Act (ADA) a ve Velké Británii zákon Disabilities Discrimination Act (DDA), který upravuje diskriminaci a byl rozšířen i na informační technologie.
Existují však také specifické právní normy, které upravují přístupnou formu
uveřejňování informací prostřednictvím www stránek. Tyto normy jsou většinou zaměřeny na instituce veřejné správy. Ve Spojených státech amerických je příkladem norma Section 508, která vznikla na základě zákona Americans with Disabilites Act. V České republice upravuje specifické potřeby uživatelů zákon 365/2000 Sb. o informačních systémech veřejné správy (ISVS), který udává povinnost publikovat informace tak, aby se s nimi mohli seznámit i zdravotně postižení.
Konsorcium W3C vytvořilo webový standard Web Content Accessibility Guidelines
(WCAG), který říká, jak tvořit weby přístupné také lidem s handicapem. Z tohoto standardu vychází americká norma Section 508.
Doporučením pro tvorbu bezbariérového webu v České republice jsou Pravidla pro
tvorbu přístupného webu vydaná Ministerstvem informatiky. Jejich plné znění je uvedeno v Příloze B.
Sjednocená organizace nevidomých a slabozrakých vytvořila metodiku Blind
Friendly Web, která se zabývá přístupností webových stránek pro zrakově postižené uživatele. Plné znění této metodiky je uvedeno v Příloze C.
5.6.3 Přeskočení textu nebo navigace Z hlediska bezbariérovosti může vyvstat problém s navigací. Stále častěji je totiž
součástí statického záhlaví webu také hlavní navigace. Tuto navigaci je možné pro alternativní zařízení zobrazit před textovým obsahem nebo až za ním. V případě, že je navigace před samotným obsahem webu, je vhodné do záhlaví umístit odkaz „Přeskočit navigaci“, abychom nenutili například uživatele hlasových čteček poslouchat stále dokola stejné informace.
Vhodnější variantou je zobrazit navigaci až za textovým obsahem webové
prezentace. Vzhledem k obtížnější implementaci však není tato metoda příliš často využívána. V případě jejího použití je však vhodné umístit do záhlaví odkaz „Skočit na navigaci“.
V obou případech je však nutné oba odkazy zobrazovat pouze pro handicapované
uživatele využívající alternativní zařízení, čehož dosáhneme absolutním negativním pozicováním.
37
5.6.4 Problémovost některých prvků Pro samotný obsah stránky, který je nepochybně hlavním důvodem tvorby webů,
bývá vyhrazen největší prostor. Zpravidla bývá shora ohraničen záhlavím s hlavní navigací, zleva nebo zprava místní navigací a zdola zápatím.
Ačkoliv nejčastěji bývá hlavním obsahem stránky text, mnoho webových prezentací se zaměřuje například na fotogalerie nebo počítačové hry. Některé prvky, které jsou součástí obsahu webu, však mohou handicapovaným uživatelům ztížit hledání informací.
Grafické objekty umístěné v obsahu stránky mají často informační hodnotu. Z tohoto
důvodu je nutné pro ně definovat alternativní text v podobě atributu alt . Tento atribut je v současnosti povinný, ale je možné ho nechat prázdný. U obrázků, které mají informační hodnotu je však nezbytné atribut vyplnit alternativním textem. Text se zobrazí tehdy, není-li z nějakého důvodu možné zobrazit samotný obrázek. Problémovost Flashe a JavaScriptu byla rozebrána v kapitole 4.2.3.
Součástí obsahu stránky jsou často také tabulky. Pro jejich používání existuje několik
pravidel, která je nutné dodržovat. Především by se do tabulek měla umísťovat pouze data, která to vyžadují. Je nutné zajistit, aby tabulky dávaly smysl při čtení po řádcích, protože právě tak je tabulka interpretována například hlasovými čtečkami. Zda je tabulka správně koncipována lze zjistit jednoduše tak, že výslednou tabulku označíme a vložíme do jednoduchého textového editoru, například do Poznámkového bloku. Pokud vložená data dávají smysl, je tabulka navržena správně.
Častým problémem jsou také klikací mapy, rámy nebo formuláře. Prvním dvěma je
vhodné se spíše vyhýbat, protože méně zkušený webmaster pravděpodobně tyto prvky nevyužije tak, aby byly přístupné. Oproti tomu formuláře jsou často nezbytným prvkem webové prezentace. Slouží pro zpětnou vazbu návštěvníka stránek a mohou mít například formu ankety, objednávky nebo kontaktního formuláře. U formulářů je nutné přiřadit jednotlivým prvkům výstižné popisky (značka label ), aby i handicapovaný uživatel věděl, co do kterého pole vepsat. Nutné je také přiřazení ID, podle kterého se formulářový prvek páruje s popiskem.
5.6.5 Mapa webu Mapa webu je strukturovaný seznam odkazů vedoucích na každou jednotlivou
stránku webové prezentace. Její existenci ocení jakýkoli uživatel především u rozsáhlých a obsahově bohatých webů. Užitečná může být jak běžnému uživateli, který v ní rychle nalezne stránku, jejíž téma hledá, tak uživateli, pro kterého je procházení webem složité a namáhavé. Jedná se především o uživatele hlasových čteček, pro něž je přehledná mapa webu velice užitečná.
Mapa webu musí splňovat dva základní požadavky. Především musí být realizována
skutečným seznamem, přičemž odsazení a odrážky je možné skrýt pomocí kaskádových stylů. Zároveň však je nutné, aby na mapu webu vedl odkaz z každé stránky [9].
38
5.6.6 Prohlášení o přístupnosti Prohlášení o přístupnosti, anglicky Accessibility Statement, má za úkol informovat
návštěvníka o přístupnosti webové prezentace. Touto formou by se měl dozvědět, zda je web bezbariérový a které prvky použité na webu přístupné nejsou, například animace.
David Špinar uvádí sedm bodů, které má prohlášení o přístupnosti obsahovat [9]:
• Informace o tom, že web byl vytvořen v souladu s pravidly přístupnosti a která pravidla to byla.
• Standardy, které web dodržuje, například kaskádové styly, specifikace značkovacího jazyka atd.
• Možnost personalizovaného prohlížení, například vypnutí CSS. • Které části webu nejsou ze své podstaty přístupné. • Informace o navigaci a pomocných navigačních metodách, například možnost
přeskočení navigace. • Použité klávesové zkratky, takzvané accesskeys. • Kontakt na technického správce.
5.7 Vhodná URL URL, tedy Uniform Resource Locator, česky „jednotný lokátor zdrojů“, je
adresovací systém webu. Bývá definován jako řetězec znaků s předem určenou strukturou, který slouží k přesné specifikaci umístění zdrojů informací na Internetu. URL definuje doménovou adresu serveru, umístění zdroje na serveru a protokol, kterým je možné zdroj zpřístupnit [41].
Na každý URL jsou kladeny základní požadavky. Jak uvádí Martin Snížek [42],
mělo by URL být: • Trvalé – pokud je nějaké stránce URL přiřazeno, nemělo by se měnit, jelikož
stávající odkaz pak bude nefunkční, což odradí uživatele a způsobí problémy s indexací a hodnocením vyhledávačů.
• Co nejkratší. • Co nejjednodušší a díky tomu snadné na zapamatování – každý by měl být schopen
URL opsat na papír i zpět do počítače a také nadiktovat do telefonu. • Psané malými písmeny.
Pro psaní URL existuje několik konkrétních pravidel, kterými je vhodné se řídit.
Jedním z nich je, že je vhodné uvádět doménu s www, jelikož je mezi uživateli mnohem více zažitá a v případě českých organizací, které mají příponu .cz ve svém názvu, poukazuje na spojitost s Internetem. Dalším z pravidel je psaní lomítka na konci adresy. Všeobecně je doporučováno lomítko uvádět, jelikož server obvykle automaticky přesměrovává na variantu s lomítkem.
V URL by neměl být uváděn výchozí soubor složky, tedy například index.html.
Součástí URL by také neměly být přípony souborů ani jména technologií. Dynamické parametry, tedy část za otazníkem, je nutné používat pouze pro účely, pro které jsou určeny, například pro změnu třídění údajů. Nevhodné je též použití číselného označení a především špatně dostupných znaků, jakými jsou například @, &, ~ nebo _. Místo podtržítka, které se často používá pro oddělování slov, je vhodnější používat pomlčku,
39
jelikož vyhledávače chápou slova oddělená pomlčkou jako více slov, zatímco slova oddělená podtržítkem jako jedno dlouhé slovo.
Naprostou samozřejmostí je, že obsah URL by měl korespondovat s obsahem webu
a měl by vypovídat o obsahu cílové webové stránky. Pro URL, které splňují výše uvedená pravidla, se používá anglický termín „Cool URI's“.
5.8 SEO SEO, anglicky Search Engine Optimalization, tedy optimalizace pro vyhledávače, je
metodologie vytváření a upravování webových stránek takovým způsobem, aby byly ve výsledcích vyhledávání v internetových vyhledávačích zobrazeny na nejlepších místech [7].
Cílem SEO je navrhnout stránku tak, aby byla pro relevantní dotazy hodnocena jako
kvalitní a byla zobrazována na nejvhodnějších místech, protože většina uživatelů při hledání věnuje pozornost jen několika prvním odkazům. K dosažení tohoto cíle se využívají jak metody etické, tak neetické.
Snahou etických metod je vylepšit webové stránky tak, aby se tímto vylepšením
zvýšila kvalita stránek z pohledu vyhledávacího robota. Mezi takové metody patří například krátká a neměnná URL adresa, vhodný titulek stránky, správné používání doporučených tagů (zvýrazněné nadpisy, klíčová slova atd.), kvalitní a unikátní obsah, analýza klíčových slov nebo budování zpětných odkazů. Některé z uvedených složek jsou podrobně popsány v jiných kapitolách této práce. Problematika vybraných etických metod je podrobně rozebrána v následujících podkapitolách.
Neetické metody jsou takové, které se snaží vylepšit pozici webové stránky
podvodnými metodami. Mezi takové metody patří spam (například umisťování odkazů do diskuzí), klamání robotů (zobrazování jiného obsahu pro roboty) nebo skrytý text. Vyhledávače se snaží proti takovým technikám bránit a webové stránce, která takové techniky používá, hrozí při odhalení postih, výrazný propad ve výsledcích vyhledávání nebo dokonce odstranění z databáze vyhledávače.
Kromě rozdělení na etické a neetické metody lze SEO rozdělit také na metody účinné
a neúčinné [7]. Jak je z uvedeného popisu zřejmé, při tvorbě webové prezentace se zabýváme mnoha
prvky, které mají vliv také na výsledky vyhledávání. Optimalizací těchto prvků, které jsou v předložené práci popisovány, zároveň optimalizujeme pro vyhledávače.
5.8.1 Vyhledávače Vyhledávače z pohledu optimalizace webové stránky rozlišujeme na katalogové
a fulltextové. Do katalogových může po jednoduché registraci přidat webovou stránku kdokoli
a jedinou podmínkou je schválení webu editorem. Z českých jmenujme například Centrum nebo Seznam.
40
Druhý typ vyhledavačů jsou fulltextové. Každý takový vyhledavač má robota, který prochází stránky na internetu a přidává si je do indexu. Pokud na webovou stránku nevede žádný odkaz, vyhledávací robot ji většinou nenajde. Přidání webu nelze nijak ovlivnit, některé fulltextové vyhledavače však obsahují příkaz „Přidat stránku“, který může indexaci urychlit. Z českých je nejznámější Jyxo, mezi zahraničními v současné době nemá konkurenci Google [43].
5.8.2 URL rewriter URL rewriter je komponenta, která zajišťuje, aby adresa webové stránky obsahovala
klíčová slova. Rewriter umožňuje překlad URL adres v adresním řádku podle nadpisu příslušné stránky, názvu kategorie, článku nebo produktu [44].
URL rewriter nejen činí web přehlednějším a usnadňuje orientaci uživatele na webu,
ale především přispívá k optimalizaci stránek pro vyhledavače. Více o vhodnosti URL bylo uvedeno v kapitole 6.7.
5.8.3 Meta tagy Metadata jsou informace o informacích, k jejich zápisu slouží meta tagy, což jsou
zvláštní značky, které se píší do hlavičky stránky. V každé stránce je potřeba použít tag pro kódování, ale vhodné je využití také některých dalších [45].
Jedním z důležitých meta tagů je description , tedy popisek obsahu stránky nejen
pro vyhledávače. Starší vyhledávače připojovaly ve výsledcích vyhledávání k titulku stránky také tento popis. V poslední době však vyhledávače této značce nepřikládají takový význam.
Dalším důležitou značkou je language . Tento tag zaručuje zobrazení ve správném
kódování. Tag keywords , tedy klíčová slova, obsahuje několik slov, která identifikují obsah
textu. V poslední době se však zdá, že některé vyhledávače, například Google, obsah tohoto tagu ignorují.
Značka robots určuje způsob, jakým bude vyhledávač pracovat se stránkou. Podle
hodnot tohoto tagu je možné vyhledávači povolit či zakázat indexování. Google uvedl svůj vlastní meta tag googlebot . Pomocí parametru snippet nebo
nosnippet lze povolit či zakázat vypisování ukázek textu ze stránky. Druhý parametr archive nebo noarchive umožňuje povolit či zakázat archivaci starších verzí stránek. Pokud je archivace povolena, budou stránky dostupné i poté, co budou odstraněny.
Existuje další množství meta tagů, které umožňují například automatické
přesměrování na jinou stránku, omezení ukládání v počítači uživatele nebo ve vyrovnávací paměti cache, datum omezení platnosti stránky a další [45].
41
5.8.4 Titulek stránky Titulek stránky je nejdůležitější částí stránky z pohledu vyhledávače. Roboti k němu
přikládají velkou váhu, proto by měl titulek obsahovat smysluplný text s pěti až sedmi klíčovými slovy.
Na každé stránce je nutné používat odlišný titulek, jelikož tak budou nejen posílena
klíčová slova u vyhledávače, ale také zlepšena orientace uživatelů [43]. Titulek je možné tvořit například jako drobečkovou navigaci nebo v jejím obráceném sledu.
5.8.5 Analýza klíčových slov Cílem analýzy klíčových slov je nalézt co nejvíce slov a frází, která si lidé spojují
s určitým tématem. Dále je potřeba vybrat slova, která se pro danou situaci nejlépe hodí. Analýza musí být relevantní, což znamená, že musí co nejlépe vystihovat obsah
webu. Po výběru co největšího počtu slov, která odpovídají tomuto kritériu, se z nich volí nejvhodnější slova, která uživatelé vyhledávají nejčastěji. Taková slova jsou lepší než ta, která nehledá nikdo. Roli hraje také srozumitelnost a četnost používání slov. U obchodních webů je důležitá také míra konkurenčnosti, což znamená, že pokud se vybrané slovo nachází na velkém množství konkurenčních stránek, bude obtížné uspět s novou stránkou [46].
Při volbě vhodných klíčových slov je nezbytné brát ohled také na „Long tail“, jinak
také „dlouhý ocas“. Jedná se o slova a víceslovná spojení zadávaná do vyhledávačů, přičemž takové výrazy jsou vyhledávané méně často než slova obecná a také jsou méně konkurenční. V celkovém souhrnu mohou být zdrojem vyšší návštěvnosti [47]. Tuto charakteristiku názorně zobrazuje Obr. 13.
Obr. 13 – Long tail.
Zdroj: <http://searchengineland.com/images/b2b_long_tail.gif>.
42
5.8.6 Zpětné odkazy Zpětný odkaz je každý odkaz, který míří na danou webovou stránku z každé jiné
stránky. Většinou jde pouze o zpětné odkazy z jiných internetových prezentací. Primární funkcí těchto odkazů je přivádět na webovou stránku nové návštěvníky. Zpětné odkazy tedy zvyšují viditelnost webu [48].
Nejvhodnější samozřejmě je, když na webovou stránku odkazují majitelé jiných
webů zcela spontánně. Existují však i další způsoby, jak získat zpětné odkazy. Takovým příkladem je registrace do katalogů, výměna odkazů, publikování na oborových webech nebo vydávání tiskových zpráv [49].
Zjišťování zpětných odkazů je jedna z nejdůležitějších technik SEO. Většina
zahraničních vyhledávačů umožňuje zpětné odkazy zjistit pomocí odkazu „backward links“, tedy „zpětné odkazy“. Například vyhledávač Google však zobrazí pouze odkazy ze stránek s hodnotou PageRank 4 a více [43].
5.8.7 Důležitost webových stránek Důležitost webových stránek určuje významnost sledovaného webu. Ta je určena
především strukturou hypertextových odkazů. V dalších podkapitolách jsou podrobněji vysvětleny vybrané algoritmy pro výpočet hodnoty důležitosti webu.
5.8.7.1 Google PageRank
Google PageRank je algoritmus pro ohodnocení důležitosti webových stránek, který
byl navržen Larry Pagem a Sergeyem Brinem [49]. PageRank tvoří základ vyhledávače Google. Využívá strukturu hypertextových
odkazů jako vzájemné doporučování stránek. Hodnocení stránky se však nepočítá pouze z prostého počtu odkazů, které na stránku vedou, ale bere v úvahu i hodnocení odkazujících stránek. Každá stránka tak v podstatě předává své hodnocení dál skrze odkazy [50]. Čím více odkazů stránka obsahuje, tím méně PageRanku každé stránce předá [51].
Dušan Janovský [51] uvádí způsob výpočtu
++×+−=
)(
)(...
)(
)(1)(
1
1
n
n
TC
TP
TC
TPd
m
daP ,
kde d je takzvaný dampening faktor nastavený na neznámou hodnotu (pravděpodobně 0,85), m je celkový počet zaindexovaných stránek, C(T) je počet odkazů vedoucích ze stránky T a T1 až Tn jsou jednotlivé stránky. Oficiální dokumentace společnosti Google uvádí vzoreček bez m [51] Google PageRank dosahuje hodnot 0 – 10. 5.8.7.2 S-rank
S-rank vyhledávače Seznam.cz je českou obdobou Google PageRanku a vyjadřuje
důležitost každé stránky na českém webu. Počítá se podobě jako PageRank z odkazové sítě algoritmem, který zohledňuje odkazy, které na stránku vedou, ale také jaké odkazy a kam ze stránky vedou. Čím více kvalitních odkazů, tím vyšší bude S-rank.
43
S-rank má rozsah hodnot od 1 do 100, přičemž 100 je nejlepší hodnota. Hodnota je přepočítaná, původní hodnoty jsou 0 – 225. Výsledná hodnota webové stránky je zohledňována ve fulltextovém vyhledávání Seznamu [52]. 5.8.7.3 Další „ranky“
Jedním z dalších algoritmů pro hodnocení důležitosti webových stránek je JyxoRank.
Každá webová stránka, kterou vyhledávač Jyxo zná, má vypočítaný JyxoRank. Význam tohoto čísla je podobný, jako u PageRanku nebo S-ranku [53].
Podobných algoritmů existuje velké množství, například v rámci webhosting-
domeny.info vytvořený WebRank. Nabývá hodnot 0 – 12 a vypočítává se z hodnoty PageRanku a S-ranku, přičemž se snaží hodnoty skloubit dohromady. Tento algoritmus však není zohledňován žádným vyhledávačem ani katalogem [54].
5.9 SEM Zkratka SEM, anglicky Search Engine Marketing, je překládána jako marketing
ve vyhledávačích. SEM se zaměřuje na propagaci webových stránek na vlastním webu, jiných webech i ve vyhledávačích.
Reklamní systém se dělí se podle toho, kdo reklamu používá, tedy kdo jí zobrazuje,
na [55]: • Výměnné – jsou veřejné, uživatelům se zobrazují jako reklamní bannery za to, že
sami zobrazují jiné bannery. • Agenturní – jsou otevřené pro velké a středně velké servery, platí se majitelům
stránek za to, že reklamu zobrazují. • Soukromé nebo firemní – slouží pro několik největších serverů. • Pro vyhledavače. SEM má významný vliv na návštěvnost webové prezentace. Příprava na propagaci by proto měla být zahrnuta již v tvorbě webu – určením, kde bude jaký typ reklamy umístěn na webu, nebo promyšlením, jak bude web samotný propagován.
5.9.1 Grafická reklama Grafická reklama je taková, která je zpracovaná pomocí technologie Flash,
JavaScript nebo jako obrázek, který může být i animovaný ve formátku GIF. Tento způsob reklamy je nejstarším typem reklamy na Internetu a v současné době je hojně využíván především k propagaci sezónních produktů či aktuálních nabídek. Nejčastější je tzv. banner, který bývá umístěn zcela v záhlaví stránky a většinou je animovaný [56].
Pro grafickou reklamu jsou typické určité formáty velikostí. Nejpoužívanější je
vodorovný banner, tzv. fullbanner, o rozměrech 468×60, případně halfbanner, jehož šířka je přesně poloviční. Hojně využívaný je také skyscaper, který má rozměry 120×600 nebo 160×600 pixelů. Je umístěn svisle nejčastěji u levého nebo pravého okraje stránky. Častá je malá ikonka o rozměrech 88×31 pixelů, která většinou odkazuje na jiný server. Při tvorbě webové prezentace je nezbytné brát ohled nejen na zvolený formát, ale také na umístění reklamy na webové stránce.
44
V souvislosti s formáty reklam, především s rozměrem fullbanneru, je potřeba zmínit pojem bannerová slepota. Jedná se o situaci, kdy jsou uživatelé na tradiční formát reklamy natolik zvyklí, že ho zcela podvědomě ignorují. Proti tomuto jevu lze bojovat pouze nápaditým provedením a vysokou informační hodnotou reklamy, nebo změnou formátu reklamy [57].
Mezi grafické reklamy patří kromě výše popisovaných pohyblivých také statické.
Jedná se nejčastěji o obrázky ve formátu JPG. Upoutávají pozornost uživatelů webu asi dvojnásobně a to i při zachování běžných reklamních formátů.
S největším úspěchem se však setkají reklamy atypické. Nejde však pouze o neběžný
formát banneru, ale také o interaktivní reklamní prvky, reklamní upoutávky či malé reklamní palety. Nevhodné je použití reklam, které překrývají obsah webu. Většina prokliků těchto reklam je provedena omylem při snaze se reklamy zbavit.
5.9.2 Textová reklama Textová reklama je taková, která neobsahuje grafické prvky, ale pouze text. Taková
reklama je většinou ve formátu, který uživatel očekává a není tedy přehlížena, na rozdíl od reklamy grafické. Pokud uživatel takovou reklamu přečte, může u něj vyvolat zájem o produkt a ten může vést až ke koupi.
Postup působení reklamy velmi dobře popisuje reklamní model AIDA. Písmeno „A“
znamená attention, tedy přitáhnutí pozornosti, „I“ je interest, což je vyvolání zájmu, „D“ jako desire znamená, že uživatel o produkt projeví zájem a „A“ značí action, tedy akci vedoucí ke koupi [58].
5.9.3 Kontextová reklama Kontextová reklama je taková, která zobrazuje sdělení zadavatele v kontextu
s obsahem webové stránky. Většinou je řešena jako textová a zobrazuje se na webových stránkách provozovatelů, kteří uzavřeli smlouvu s poskytovatelem systému pro správu kontextové reklamy [59].
5.9.4 Proklik Proklik je takové kliknutí na odkaz, které uživatele dovede na cílovou stránku. Tento
termín se používá především v oblasti internetové reklamy [60]. Nejznámějším pojmem, který s proklikem souvisí, je PPC, tedy Pay Per Click, což
lze přeložit jako platbu za proklik. Jedná se o model platby za internetovou reklamu, při kterém inzerent platí pouze za skutečné návštěvníky [61].
Jakousi jednotkou PPC je CPC. Jde o zkratku anglického Cost Per Click, tedy cena
za proklik. Existuje také maximální CPC, které lze spočítat pomocí konverzního poměru webových stránek [62]. Konverzní poměr přitom označuje podíl lidí, kteří na webu vykonají nějakou akci. Jedná se například o situaci, kdy se z návštěvníka webu stává zákazník.
45
Jedním z dalších ukazatelů je CTR, anglicky Click Through Rate, tedy míra prokliku. Jedná se o počet prokliků nutných k zobrazení reklamy a udává se v procentech. Vzorec pro výpočet je: CTR (%) = (počet prokliků / počet zobrazení) × 100 [63].
Nejznámějším PPC systémem je Google AdWords, v České republice pak Sklik
společnosti Seznam, AdFox společnosti Centrum a E-target. Tyto společnosti nabízejí také kontextovou reklamu.
5.9.5 Modely platby za reklamu Kromě výše zmíněného modelu PPC existuje také PPV, PPT a PPA. První zkratka
pochází z anglického Pay Per View a jedná se tedy o platbu za zhlédnutí. Objednatel platí za reklamu podle počtu jejího zobrazení. Tento způsob je poměrně starý a v současné době nepříliš efektivní [64]. S pojmem PPV souvisí také CPT, což je zkratka anglického Cost Per Thousand, tedy cena za tisíc. Jedná se o jednotku, která udává cenu reklamy placené podle počtu zobrazení [65].
Dalším z modelů je PPT, tedy Pay Per Time, česky platba za čas. Jedná se o model,
ve kterém zadavatel platí za zobrazování reklamy za určité časové období bez ohledu na počet prokliků či zobrazení. V současnosti již není uvedená metoda výhodná [66].
Posledním z modelů platby za reklamu je PPA. Jedná se o zkratku z anglického Pay
Per Action, tedy platba za akci či výkon. PPA v sobě zahrnuje další modely, například PPL (platba za registraci), PPS (platba za objednávku či prodej) atd. [67].
5.9.6 Google AdWords Google AdWords je reklama zobrazovaná ve výsledcích vyhledávání na Google.
Google reklamy zobrazuje na objednaná klíčová slova v pravém sloupku výsledků vyhledávání na Google. Reklama se zobrazí každému, kdo zadá dotaz odpovídající nastaveným klíčovým slovům. Uživatelé na reklamy klikají a Google za prokliky dostává zaplaceno od inzerentů [68]. Fungování Google AdWords znázorňuje Obr. 14.
Obr. 14 – Schéma Google AdWords.
Zdroj: <http://weblog.jakpsatweb.cz/images/adwords.gif>
Inzerent získává
objednávky
Google získává peníze
za prokliky
Uživatel využívá kvalitní
hledání
poskytuje vyhledávání
zadává reklamy, platí za prokliky
kliká na reklamy, nakupuje
46
Google AdWords využívají ti, kteří chtějí svůj produkt (nejčastěji web), prezentovat prostřednictvím reklamy. Reklama se může zobrazovat ve výsledcích vyhledávání Google, ale také na jiných obsahových stránkách.
5.9.7 Google AdSense Google AdSense je reklama na obsahových stránkách. Vznikla, protože Google
AdWords byl již tak populární, že se relevantní reklamy nevešly do výsledků vyhledávání Google.
Google posílá reklamy ze systému AdWords do různých obsahových stránek, jejichž
majitelé jsou zaregistrováni v AdSense. Jedná se tedy o tytéž reklamy, jaké jsou zobrazovány ve výsledcích vyhledávání Google, ale reklamy jsou zobrazovány na jiných stránkách než ve zmiňovaných výsledcích vyhledávání.
Google AdSense tedy umožňuje majitelům stránek umístit na své webové stránky
reklamy z Google. Reklamy jsou cíleny na klíčová slova, která jsou pro webovou stránku charakteristická. Jsou statické, textové a majitel webu si může upravit barvy tak, aby ladily s jeho webovou prezentací nebo upoutaly návštěvníka. Za každý proklik pak bude inzerent platit podle modelu PPC a o provizi se podělí Google s majitelem webu [80]. Schéma Google AdSense zobrazuje Obr. 15.
Obr. 15 – Schéma Google AdSense.
Zdroj: <http://weblog.jakpsatweb.cz/images/adsense.gif>
Pokud by se inzerentovi zobrazování na obsahových stránkách nevyplácelo a chtěl by svou reklamu zobrazovat pouze ve výsledcích vyhledávání Google, může si tuto možnost v systému AdWords zvolit.
5.10 SWOT analýza SWOT analýza je metoda, pomocí které je možné analyzovat vnitřní a vnější
prostředí. Součástí vnitřního prostředí jsou silné (Strengths) a slabé (Weaknesses) stránky, vnější prostředí zahrnuje příležitosti (Opportunities) a hrozby (Threats).
zadává reklamy, platí za prokliky
(i v rámci AdWords)
Majitel stránek udržuje obsahově zajímavé stránky
Google získává peníze
za prokliky
Uživatel na stránkách
získává informace
Inzerent získává
objednávky
posílá obsahově cílené reklamy
z AdWords
udržuje obsahově zajímavé stránky
kliká na reklamy, nakupuje
47
Základ metody spočívá v klasifikaci a ohodnocení jednotlivých faktorů, které jsou
rozděleny do čtyř výše uvedených skupin. Vzájemnou interakcí faktorů lze získat informace, které vedou ke zvolení nejvhodnější strategie [69].
Ačkoliv tento postup není v současné době zcela běžný, je možné SWOT analýzu aplikovat také na webovou prezentaci. Podstatou SWOT analýzy je prozkoumat všechny možnosti, které je možné využít na webu, ale také objevit slabiny, které je potřeba zamaskovat nebo eliminovat. Po této analýze lze stanovit příležitosti, které by bylo vhodné na webu využít, a hrozby, na které je nutné se připravit. V závislosti na tom je pak možné stanovit vhodnou strategii.
Silnou či slabou stránkou může být velikost značky, zázemí a logistika, velikost
sortimentu, ceny, finanční možnosti nebo schopnosti personálu. V dalším kroku se analyzují příležitosti a hrozby. Silné stránky nabízejí příležitosti, které je možné využít, a slabé stránky přinášejí hrozby, kterým je nutné čelit. Jako příležitosti lze označit situaci, kdy je značka známá, zázemí, logistika i pracovníci umožní zvládnout více práce, sortiment i ceny jsou lepší než konkurenční a pro tvorbu a správu webu je dostatek finančních prostředků. O hrozby se jedná, je-li tomu právě naopak [70].
5.11 Analýzy návštěvnosti Úkolem webmastera je přizpůsobit web ve spolupráci s analytikem nejen pro
vyhledávače, ale především potřebám uživatelů. Je tedy nezbytně nutné seznámit se s hlavními ukazateli návštěvnosti a naučit se získaná data zpracovat.
5.11.1 Ukazatele návštěvnosti Jedním z hlavních pojmů souvisejících s návštěvností je hit. Je to jeden požadavek
zaslaný na server. Může se jednat o požadavek na HTML stránku, obrázek, soubor atd. Počet hitů reprezentuje celkové množství požadavků, které bylo učiněno na server během nějakého časového období. Celkový počet hitů je tedy počet nějakých požadavků, které uživatelé učinili.
Důležitým ukazatelem je takzvaný unikátní návštěvník. Jedná se o takového
návštěvníka, který přišel na web poprvé. Takový návštěvník je zaznamenán do databáze systému, a pokud navštíví webovou stránku znovu, nebude již započítán.
Sledují se však také neunikátní návštěvy, což je počet všech návštěvníků – tedy
i těch, kteří přišli na web opakovaně. Lze zjišťovat také počet návštěv na jednoho návštěvníka.
Pro analýzy je podstatný také počet zobrazených stránek – a to jak v absolutním
počtu, tak počet zobrazených stránek na jednu návštěvu. Jedná se o velice relevantní ukazatel, který také naznačuje, jak intenzivně návštěvníci webovou prezentaci čtou [71].
48
5.11.2 Statistiky návštěvnosti Statistiky návštěvnosti jsou podstatným zdrojem informací o uživatelích, kteří web
navštíví. Hlavními ukazateli při hodnocení návštěvnosti je počet zobrazení stránky, počet návštěv a počet uživatelů.
Pomocí statistik návštěvnosti je možné zjistit, odkud uživatelé přišli, kolik z nich
opustilo web již na vstupní stránce, kolik stránek během návštěvy shlédli, kudy web procházeli, co hledali, z jaké stránky web opustili atd. [72]. Lze také zjistit, že pro nějaké návštěvníky nebyla stránka vhodně optimalizována.
Z hlediska přístupnosti je důležité sledovat také operační systém nebo prohlížeč.
Pomocí statistik lze optimalizovat webovou stránku pro výrazně převažující skupinu návštěvníků.
Analýza návštěvnosti také umožní odhalit chyby na webu nebo vyhodnotit efektivitu
reklamních kampaní [72]. Statistiky jsou důležité například pro analýzu klíčových slov a tím také pro SEO.
5.11.3 Způsoby získávání dat Data pro další analýzu je nutné nejprve získat. Nejběžnější způsob je pomocí tzv.
měřící tečky v HTML kódu. Skript přitom může být na stejné i jiné doméně. Výhodou tohoto způsobu je především nízká cena, automatické zpracování dat a získání informací o prohlížeči a počítači.
Měření tečkou lze realizovat pomocí TOPlistu, NAVRCHOLU.cz nebo
PHPMyVisites. V současné době je však bezkonkurenčně nejlepší Google Analytics [72]. Druhý způsob získávání dat je na základě access logu, který ukládá většina
webserverů. Tato varianta umožňuje provádět libovolné analýzy, získat informace o přístupu robotů a shromáždit data také zpětně. K takovým analýzám slouží například ClickTracks, WebTrends nebo Webalizer [72].
5.11.4 Google Analytics Google Analytics je statistický nástroj běžící na serverech Google. Registrovaným
uživatelům umožňuje umístit na stránky měřící kódy a získat tak pokročilé statistiky stránek.
Google Analytics poskytuje podrobné statistiky týkající se návštěvnosti webových
stránek. Lze tak vysledovat odkud návštěvníci na web přišli, jak se na stránkách pohybovali nebo kde web opustili. Pomocí Google Analytics je však možné sledovat také účinnost reklamních kampaní Google AdWords, e-mailových kampaní i různých dalších reklam [73].
V současné době je Google Analytics nejlepším nástrojem pro měření návštěvnosti
webových stránek.
49
6 Kontrola vybraných požadavků dostupnými nástroji Pro některé z požadavků, které jsou předloženy v předchozí kapitole, existují různé
způsoby, jak ověřit, zda webová stránka tyto požadavky splňuje.
6.1 Kontrola grafiky Grafická podoba webové prezentace hraje při tvorbě webu svou významnou roli.
Kromě volby barev je však také nezbytné kontrolovat, jak se web zobrazuje handicapovaným uživatelům. Pro tuto kontrolu existuje řada nástrojů. Některé z nich jsou dále podrobněji popsány.
6.1.1 Volba barevného schématu Jedním z nejdůležitějších kroků při tvorbě websites je volba vhodného barevného
schématu. Výběr vhodné kombinace barev usnadní generátor barevných schémat, například javascriptový program od Petra Staníčka. Jeho nejstarší verze je dostupná na adrese http://colorschemedesigner.com/previous/colorscheme1/index.html (Obr. 16), jeho novější verze pak na http://colorschemedesigner.com/previous/colorscheme2/index.html a poslední na http://colorschemedesigner.com/. Umožňuje nejen volbu barvy, ale také sytosti a jasu, typu schématu i náhled v případě zrakových vad.
Obr. 16 – Generátor barevných schémat.
Zdroj: <http://colorschemedesigner.com/previous/colorscheme1/index.html>. Volbu vhodných barev umožňuje například také Color Blender, který však nenabízí
tolik možností, ale při výběru dvou barev doplní třetí vhodnou. Je dostupný na adrese http://meyerweb.com/eric/tools/color-blend/. Existuje však velké množství dalších online nástrojů nebo softwaru.
50
6.1.2 Test kontrastu barev Jedním z nejčastějších prohřešků je nedostatečný kontrast mezi barvou písma
a pozadí. Pro kontrolu vhodné kombinace barev lze využít test kontrastu barev, který je umístěn na adrese http://www.sovavsiti.cz/kontrast/ (Obr. 17).
Obr. 17 – Test kontrastu barev.
Zdroj: <http://www.sovavsiti.cz/kontrast/>.
Test kontroluje rozdíl jasu a rozdíl barev. Číslo, které udává, jak se od sebe odlišuje jas jednotlivých barev, se pohybuje v rozmezí od 0 do 255, přičemž minimální hodnota pro dobrou čitelnost je 125. Podobně je tomu s rozdílem barvy. Čísla se však v tomto případě pohybují mezi 0 a 765, minimální hodnota je pak 500 [9].
Podobným testem kontrastu barev je Color Contrast Checker, který je dostupný na
adrese http://webaim.org/resources/contrastchecker/. Test však oproti předchozímu bere ohled také na velikost písma.
6.1.3 Funkce Vysoký kontrast Někteří uživatelé se zhoršeným zrakem používají v prostředí MS Windows funkci
Vysoký kontrast. V operačním systému MS Windows Vista jí lze zapnout ve Vzhledu a přizpůsobení, v MS Windows XP v Možnostech usnadnění nebo ve Vlastnostech zobrazení. Výsledkem je přebarvení do kontrastních barevných kombinací, kdy je podkladem černá barva. Pokud je funkce aktivována prvním způsobem, bude přizpůsobena také prohlížená webová stránka. Je-li však Vysoký kontrast zapnut druhým způsobem, bude webová stránka vypadat stejně, jako by funkce zapnuta nebyla a prohlížeče budou respektovat nastavení v kaskádových stylech.
S ohledem na tuto funkci je nutné barvu popředí a pozadí buď vůbec nedefinovat,
nebo nejlépe v kaskádových stylech definovat obě. Jakýkoli jiný způsob znemožní použití této funkce. Správnost lze ověřit zapnutím Vysokého kontrastu [9].
51
6.2 Kontrola validity Jedna z nejdůležitějších kontrol, která musí být při tvorbě website průběžně
prováděna, je kontrola validity. Kontrolu lze provádět pomocí online validatoru, který je umístěn na adrese http://validator.w3.org/.
Validitu je nutné kontrolovat i v případě kaskádových stylů. Online validator je na
adrese http://jigsaw.w3.org/css-validator/. Existuje také integrace HTML Tidy, která zajistí automatickou opravu chybného kódu.
6.3 Kontrola bezbariérovosti Přístupnost a použitelnost můžeme kontrolovat různými způsoby. Kvůli takřka
nulové časové náročnosti jsou nejvíce využívány automatické nástroje případně kontrola uživatelským testem. Nejspolehlivější je však kontrola proti bodům zvolené metodiky nebo ve spolupráci s odbornou organizací.
6.3.1 Kontrola automatickými nástroji Nejrychlejší možností, jak kontrolovat bezbariérovost, jsou automatické nástroje.
Jedná se o testy nejméně spolehlivé, ale zároveň rychlé, takže postačují pro rámcovou orientaci. K testování je využíván software nebo on-line webové aplikace, které po zadání adresy testované webové stránky a zvolení metodiky nabídnou výstup se seznamem případných chyb.
Nástroje obvykle označí místo, kde došlo k hrubé chybě. Neumí však posoudit, zda
je označení chyby oprávněné – například označí chybějící obsah atributu alt v případě, kdy není jeho uvedení nezbytně nutné. Některé nástroje umožňují označit na stránce místo, kde se chyba může vyskytnout, ale je nutná ruční kontrola. Příkladem může být zmiňovaný chybějící obsah atributu alt .
Pro testování je možné využít velké množství softwaru, jako příklad je možné uvést
program aDesigner. Častěji jsou využívané webové aplikace, například Bobby, Cynthia Says nebo Wave [9]. Aplikace Cynthia Says je dostupná na adrese http://www.cynthiasays.com/ a Wave na adrese http://wave.webaim.org/. Kontrolují přístupnost pomocí metodik Section 508 a WCAG, některé z nich umožňují zvolit také „přísnost“ metodiky.
Webový nástroj Browsershoots dostupný na adrese http://www.browsershots.org/
umožňuje vytvořit screenschoty webové prezentace v různých verzích jednotlivých prohlížečů, což umožňuje kontrolu webu bez nutnosti instalace požadovaných prohlížečů.
Pro prohlížeč Mozilla/Firefox existuje rozšíření Fangs v podobě simulátoru odčítače
obrazovky. Slouží ke zjištění, jak je stránka interpretována nevidomému. Ve zvláštním okně zobrazí stránku tak, jak by ji četly hlasové čtečky. Překládá čísla a zvláštní znaky, označuje nadpisy, odrážky v seznamech apod. Rozšíření je dostupné na adrese http://www.czilla.cz/doplnky/rozsireni/fangs/.
52
6.3.2 Kontrola uživatelským testem Podstatou uživatelských testů je simulace situací, kterým musí čelit handicapovaní
uživatelé. Při testování se ověřuje funkčnost webové prezentace různými způsoby [9]: • Vypnutí grafiky – poslouží k odhalení grafických objektů, které nemají definovaný
alternativní textový popisek. • Vypnutí prvků nad rámec HTML (např. CSS, Javy, JavaScriptu), díky kterému dojde
ke zjištění, zda je textový obsah dostupný i bez podpory těchto prvků. • Ovládání klávesnicí – slouží ke zjištění, zda je možné web plnohodnotně ovládat
i bez použití polohovacího zařízení (myši). • Změna velikosti okna a rozlišení obrazovky. Je nutné, aby se v takovém případě
zobrazily posuvníky, pomocí kterých bude dostupný celý rozsah stránky. • Změna velikosti textu – text musí být dobře čitelný i po zvětšení písma. • Zobrazení v textovém prohlížeči, například v prohlížeči Lynx – text musí být čitelný
a smysluplný. • Extrakce textového obsahu. Zkopírování celého obsahu stránky a jeho vložení do
jednoduchého editoru (např. Poznámkový blok) poslouží ke zjištění, zda je textový obsah strukturován ve správném pořadí.
• Nastavení nestandardní kombinace barev, například pomocí funkce „Vysoký kontrast“, kterou je možné zapnout v operačním systému. Některé zmíněné prvky přístupnosti je možné testovat pomocnými toolbary. Pro MS
Internet Explorer (resp. Windows Internet Explorer) se často využívá Web Accessibility Toolbar (Obr. 18) a v případě alternativního prohlížeče Mozilla Firefox dobře poslouží Web Developer Toolbar (Obr. 19).
Obr. 18 – Web Accessibility Toolbar.
Zdroj: Autor.
Obr. 19 – Web Developer Toolbar.
Zdroj: Autor.
6.3.3 Kontrola proti bodům zvolené metodiky Nejtěžším, ale zároveň nejspolehlivějším způsobem kontroly přístupnosti je kontrola
proti bodům zvolené metodiky. Spočívá ve zvolení metodiky a následném procházení kontrolních bodů, kdy se ručně bod po bodu kontroluje, zda je kontrolovaná zásada na webu splněna či nikoliv.
Tento způsob předpokládá znalost jednotlivých metodik, například českých Pravidel
pro tvorbu přístupného webu nebo metodiky Blind Friendly Web. Znění obou jmenovaných je uvedeno v Příloze B a C.
53
V případě zahraničních metodik lze jmenovat například Section 508, jejíž znění najdeme na adrese http://www.section508.gov/.
Další metodika WCAG pochází od konsorcia W3C. Starší metodika je dostupná na
adrese http://www.w3.org/tr/wai-webcontent/, ale na konci roku 2007 byla vydána nová verze, kterou najdeme na adrese http://www.w3.org/tr/wcag20/.
6.3.4 Spolupráce s odbornou organizací Jedním ze spolehlivých způsobů, které prověří webovou prezentaci v praxi, je
spolupráce s organizací, která zprostředkuje testování webových stránek přímo handicapovanými uživateli.
Pod hlavičkou projektu Blind Friendly Web nabízí takové služby přímo Sjednocená
organizace nevidomých a slabozrakých. Podobné testy nabízí také některé další společnosti.
6.4 SEO Také pro kontrolu některých dílčích částí optimalizace pro vyhledávače jsou
k dispozici rozličné nástroje, které mohou optimalizaci usnadnit. Nejčastější jsou programy nebo pomocné toolbary.
6.4.1 Analýza klíčových slov V analýze klíčových slov je nejprve nutné zvolit slovo nebo frázi, která web
vystihuje. V dalším kroku se hledají synonyma, tedy slova se stejným nebo podobným významem, a slova laterální, která s původním slovem souvisí. Ke stanovení vhodných synonym nebo laterálních slov postačí slovník, existují však také různé nástroje.
Návrh klíčových slov usnadní Google AdWords Keyword Suggestions, který
vyhledané výrazy seřadí podle frekvence hledání. Pro nalezení českých synonym je vhodný také vyhledavač Morfeo, kde je možné zvolením volby Synonyma vyhledat podobné výrazy hledaného slova. Nástrojů pro nalezení klíčových slov však najdeme na Internetu nepřeberném množství.
Pro slova v angličtině vyhledá synonyma i laterální slova program Wordtracker.
Pomůže také při nalezení nejčastěji hledaných slov a pro stanovení reálné míry konkurenčnosti. Zajímavým ukazatelem je Keyword Effectiveness Index, což je poměr četnosti hledání a míry konkurenčnosti.
Správné klíčové slovo musí být také relevantní. Tato vlastnost však nejde zjistit
jinak, než dlouhodobým sledováním a pořizováním statistik. Výsledkem takového pozorování v internetovém obchodě může být například skutečnost, že přes některá slova chodí na web z vyhledavačů hodně lidí, ale nic nenakupují, a naopak přes jiná slova chodí lidí málo a nakupují hodně [46].
54
6.4.2 Důležitost webových stránek Pro hodnocení důležitosti webových stránek existují různé algoritmy. Nejznámější je
Google PageRank, který byl popsán v kapitole 6.8.7.1. Hodnotu PageRanku lze zjistit pomocí Google Toolbaru (Obr. 20). Součástí této lišty je orientační měřítko PageRanku.
Google provádí aktualizace PageRanku přibližně každé tři měsíce. Nové stránky tedy
mají často dlouho PageRank roven nule. Problém může nastat s URL adresou, ve které Google ignoruje vše za otazníkem a není tedy možné změřit skutečný PageRank dynamické stránky.
Obr. 20 – Google Toolbar.
Zdroj: Autor. Jediný způsob, jak zvýšit PageRank sledované webové stránky, je zajistit, aby na ní
vedlo co nejvíce odkazů, které mají vysokou hodnotu PageRanku. Pomocí vyhledávače Google je možné zjistit, jaké weby na požadovanou stránku
odkazují. Pro zjištění zpětných odkazů lze do vyhledávacího políčka zadat příkaz ve tvaru „link:URL_adresa“ (bez mezery za dvojtečkou) nebo využít rozšířeného vyhledávání.
Obdobným způsobem je možné zkontrolovat také hodnotu S-ranku od vyhledávače
Seznam.cz. Obdobou Google Toolbaru je takzvaná Seznam Lištička (Obr. 21), která kromě měření S-ranku nabízí také online slovník nebo kontrolu překlepů.
Obr. 21 – Seznam Lištička.
Zdroj: Autor. Pro zjištění hodnoty JyxoRanku stačí si nainstalovat Jyxo Toolbar (Obr. 22), který,
stejně jako toolbar od Googlu a Seznamu, měřítko ranku obsahuje.
Obr. 22 – Jyxo Toolbar.
Zdroj: Autor.
55
6.5 SEM Úspěšnost reklamních produktů Google AdWords a Google AdSense je možné zjistit
v uživatelském rozhraní. Při propagaci webových stránek je využíván Google AdWords. Nastavují se zde
nejen klíčová slova, pro která se bude reklama zobrazovat, ale za provozu je možné analyzovat úspěšnost reklamní kampaně. Zpravidla se vyplácí zobrazování reklamy pro výsledky vyhledávání, ale neefektivní bývá zobrazování kontextové reklamy. Alternativou Google AdWords je Sklik od Seznam.cz, AdFox od Centrum.cz nebo Etarget.
Při umístění kontextové reklamy Google AdSense na webové stránky je nutné počítat
s tím, že některé inzeráty nebudou plně relevantní s obsahem webové prezentace. Statistiky, především výdělky, lze sledovat v uživatelském rozhraní.
56
7 Analýza webového portálu „CeskyKutil.cz“ Výše uvedená problematika je demonstrována na webovém portálu CeskyKutil.cz,
který byl zanalyzován na podzim roku 2008. Vzhledem k nedostupnosti některých informací nezbytných pro kompletní analýzu jsou zanalyzovány pouze některé dílčí části.
7.1 Informační architektura a struktura webu První verze webového portálu měla nevhodnou informační architekturu i strukturu,
která časem přestala postačovat vysokým nárokům na vhodné členění. Náhled staré verze webu znázorňuje Obr. 23.
Obr. 23 – Stará verze webového portálu CeskyKutil.cz.
Zdroj: Autor.
Informace byly roztříděny do sedmi hlavních kategorií, které představovaly hlavní navigaci. Nejdůležitější z nich byla sekce „Návody a inspirace“, která, jak napovídá lokální navigace, byla přeplněna informacemi a efektivní vyhledání požadovaného tématu bylo značně komplikované. K orientaci hodně napomáhala drobečková navigace, ale za zcela nedostatečné lze označit využití navigace kontextové.
57
Nová verze portálu má mnohem lépe zvolenou strukturu. Náhled webu znázorňuje Obr. 24. Jednotlivé položky lokální navigace z kategorie „Návody a inspirace“ se staly hlavní navigací a některé původní položky z hlavní navigace byly přesunuty na speciální lištu v záhlaví – zde se nachází odkazy na služby „Magazín“, „Diskuse“, „Fotogalerie“, „Adresář“ a „Uživatelský účet“. Služby rozdělují samotný obsah webu do přehledných částí.
Obr. 24 – Nová verze webového portálu CeskyKutil.cz.
Zdroj: Autor. Pro uživatele však může být problém se ve službách zorientovat, jelikož služba
„Magazín“ zahrnuje články, ale pokud návštěvník chce diskutovat či prohlížet fotografie, musí se přepnout mezi těmito záložkami, které, vzhledem k jejich umístění, může přehlédnout.
Hlavní navigace se nachází v liště pod záhlavím a obsahuje to, co původně navigace
lokální. V případě „Magazínu“ se tím značně rozšířily možnosti pro třídění článků, jelikož mohlo vzniknout zcela nové členění lokální navigace. Ta se zobrazuje vodorovně pod hlavní navigací. Vkládané články jsou nyní přehledně členěny do kategorií. Tímto členěním však došlo k tomu, že je hodně sekcí prázdných, tedy bez jediného článku.
Ovládání usnadňuje také drobečková navigace. Chybí však navigace kontextová, která by pomohla více prolinkovat web, ale kterou částečně nahrazují související články.
58
Několik odkazů se nachází také v zápatí stránky. Vhodnost jejich umístění nelze odhadnout, jelikož vzhledem k délce stránky se málokterý uživatel na zápatí vůbec dostane. Nacházejí se zde odkazy informující o webu, magazínu, kontaktech apod. Bylo by zřejmě vhodnější shrnout údaje do jedné sekce, kterou by bylo možné zařadit mezi služby do záhlaví stránky. Zde se naopak v záložce „Adresář“ nachází odkazy na ikonky a textové odkazy portálu. Je vhodné údaje sjednotit s údaji obsaženými pod odkazy v zápatí stránky a více je zviditelnit.
7.2 Grafické řešení Grafické řešení by mělo dokreslovat obsah webových stránek a neodvádět pozornost
od samotného obsahu. Nelze říci, že by vzhled portálu byl zvolen v tomto směru zcela vhodně. Je použito příliš velké množství barev (celkem 26 různých odstínů) zjevně bez volby barevného schématu, tedy bez výběru spolu ladící sady barev. Tyto barvy znázorňuje Obr. 25. Použité barvy by se měly na dalších místech zopakovat – některé jsou použity pouze jednou (např. barva #80bb25).
Obr. 25 – Barvy použité na webu.
Zdroj: Autor. Některé použité barvy mohou svou intenzitou nejen upoutat, ale také působit rušivě,
jejich vhodnost však závisí především na osobním cítění uživatele. Zřejmá je snaha zpřehlednit pomocí barev strukturu webu, přesto však web, vzhledem k množství použitých barev, působí trochu chaoticky.
Problémem je nedostatečný kontrast některých barev, např. v lokální navigaci (text
#ffffff na pozadí #f28504) nebo v zápatí (barva #a70f0e na #fdf1bf), jejich ukázka je uvedena na Obr. 26.
Obr. 26 – Nedostatečný kontrast barev.
Zdroj: Autor. Logo pomáhá nejen k identifikaci společnosti, ale vytváří také povědomí o značce.
V případě společnosti CeskyKutil.cz částečně zastupuje funkci loga postavička „Kutila Pepy“. Nejedná se však přímo o logo, neboť tato figurka je v různých grafických návrzích ztvárněna odlišně. S ohledem na význam loga by bylo vhodné vzhled Kutila Pepy sjednotit
59
a jeho obrázek častěji opakovat, například jako ikonku v diskuzi u odpovědí zaslaných redakcí.
Skutečné logo je zastoupeno graficky ztvárněným nápisem „Český Kutil.cz“, který
zastupuje také nadpis první úrovně. Zároveň představuje odkaz, který ze všech vnořených stránek odkazuje na hlavní stránku. Logo je využito také například v podobě ikonky.
Velký význam je dnes kladen také na propagaci webové prezentace, kterou nejčastěji
zastupuje výměna ikonek. Tyto ikonky by bylo vhodné zpracovat podle aktuální grafiky webu.
7.3 Rozmístění prvků v prezentaci Vzhledem k tomu, že některé části webových prezentací návštěvníky zaujmou více
jen díky svému umístění, je nutné klást důraz také na to, aby klíčové informace byly umístěny na požadovaných místech. Podle pravidla, že pohyb očí při prohlížení webové prezentace připomíná tvar písmene F, by nejprohlíženější byly přibližně první tři nadpisy článků s přilehlými texty a také několik prvních řádků v pravém sloupci se soutěžemi, novinkami či reklamou.
Předpokládáme-li tedy, že uživatelé se z článků nejvíce zaměřují na první tři, bylo by
vhodné umístit článek vybraný z archivu níže, aby byl až třetí – to z toho důvodu, že nové články by se měly prosadit více, než ty z archivu. Navíc je vhodné archivní článek výrazněji odlišit, aby se čtenáři nedomnívali, že se jedná o článek nový.
„Pravidla F“ lze využít také pro zdůraznění dílčích částí zobrazených v prostředním
sloupci. V horní části by se mělo nacházet to, co je nejvíce preferované. Vhodné je umístění e-mailového zpravodaje a soutěží, je možné do této části přidat i další prvky, na které chceme návštěvníky upozornit. Část tohoto „výhodného“ místa zabírá reklama, její posun dolů by však zřejmě znamenal pokles příjmů z ní. První reklama by tedy měla být viditelná při prvním pohledu na stránku bez sjíždění dolů.
7.4 Copywriting a typografie Obsah webu je nejdůležitějším prvkem webové prezentace. V případě portálu
CeskyKutil.cz je tvořen převážně články a návody na vlastnoruční výrobu. Články jsou psané nejen redakcí, ale také externími spolupracovníky z řad veřejnosti. Není tedy kladen žádný výrazný důraz na kvalitu textu.
Nadpisy jsou vhodně zvýrazněny a stávají se tak záchytnými body v textu. Také
v samotných článcích jsou používány podnadpisy, které působí jako vizuální zarážky. Nedostatečně je však řešeno zvýrazňování textu, podstatné části by měly být zvýrazněny změnou řezu písma.
Velký problém tvoří překlepy v článcích, které mohou návštěvníky odradit.
Typickým příkladem je článek „Létající kamarád“ zveřejněný 1. října 2008, jehož text i perex obsahuje menší překlepy:
60
„ Čas usychající bramborové nati a barevných západů slunce byl dříve také časem draků. Ale proč vlastně minulý čas? Udělat si vlastnoručně draka by měl umět každý správný kluk(a samozřejmě i šikovné děvče) i teď ,v době počítačů a elektronických her. Ten pocit,kdy vám „kus papíru a dřívek“ v rukou obživne, žádný počítač nenahradí.a pokud si na výrobu netroufnou děti samy, táta nebo máma určitě rádi pomohou.“
Př. 3 – Ukázka úvodního textu článku „Létající kamarád“.
Je vhodné zřídit či kontrolovat práci korektora a kontrolovat v článcích pravopisné chyby a překlepy, ale též dodržovat interpunkce (mezera za čárkou či tečkou atd.). Především v perexech článků, které se zobrazují na hlavní straně magazínu, by se chyby vyskytovat neměly.
7.5 Validita kódu HTML a CSS Při tvorbě website musí být prováděna kontrola validity kódu HTML i CSS. Kontrola
validity úvodní stránky nahlásila 18 chyb a 8 varování. Jak bylo zjištěno, kód webových stránek je validní a zjištěné chyby se týkají
vkládaných dat a reklamních bloků. V případě reklam je nutné odzkoušet, zda „zvalidnění“ kódu nebude mít za následek nefunkčnost reklamy.
Pokud není možné zajistit validitu dat již při jejich vkládání, například proto, že
články tvoří uživatelé bez znalosti kódu (X)HTML, je nutná dodatečná kontrola pověřeným pracovníkem.
7.6 Bezbariérovost Jelikož pro potřeby optimalizace webu nejsou nezbytné podrobné výstupy, je web
zanalyzován pomocí uživatelského testu. Při vypnutí grafiky nejsou zjištěny závažné nedostatky. Všechny větší obrázky mají
své textové alternativy, ale tímto atributem nedisponuje záhlaví a malé náhledové obrázky v rubrice „Soutěže“ nebo „Tiskové zprávy“. V případě článků vložené fotky tento atribut nemají, jistý zástupný text se zobrazuje pouze u „postupových“ fotek.
Pokud vypneme kaskádové styly, zjistíme, zda je obsah webu dostupný i bez nich.
Pod záhlavím se zobrazuje odkaz „Skočit na obsah“, čímž je možné přeskočit krátkou navigaci a vyhledávání. Odkaz však zřejmě nesměřuje na text, ale míří na hlavní navigaci. Článek i zbylý obsah webové stránky je zcela přehledný a logicky řazený.
JavaScriptem je řešeno otevírání odkazu v novém okně, posílání článku e-mailem,
tisk článku, odpovědi v diskuzích nebo reklamy. Po vypnutí JavaScriptu se na webové stránce nic nezmění, zobrazování obsahu tedy na tomto prvku nezávisí. Funkce, které jsou na JavaScriptu závislé, jsou dostupné i bez něj.
61
Pro ovládání webu klávesnicí jsou stanoveny klávesové zkratky: • [alt + 0] – prohlášení o přístupnosti • [alt + 1] – úvodní strana • [alt + 2] – kontakty • [alt + 3] – přihlásit • [alt + 4] – mapa webu
Klávesové zkratky jsou uvedeny v „Prohlášení o přístupnosti“, ale zřejmě nejsou
funkční. Ovládání celého webu pouze pomocí klávesnice funguje. Problém nastává pouze s hlavní navigací. Při využívání tabulátoru se nejprve nabízí záhlaví, poté odkazy na služby v záhlaví, pak samotný obsah celé webové stránky a až na samém konci se přeskočí na hlavní navigaci. Bylo by vhodné, aby se hlavní navigace prošla ještě předtím, než dojde k procházení stránky.
Při zmenšení okna se zobrazí horizontální posuvník a celý obsah webu je tak i nadále
přístupný. Pokud je okno zmenšeno na rozlišení 800×600, je v případě „Magazínu“ vidět celý sloupec s články a prostřední sloupec s emailovým zpravodajem, soutěžemi, anketou, tiskovými zprávami, reklamami atd. Pravý sloupec s reklamami je skrytý a je dostupný pomocí horizontálního posuvníku.
Zrakově handicapovaný uživatel má potřebu zvětšovat si text na webové stránce. Jinak takový uživatel využívá web zcela standardním způsobem. Pokud změníme velikost písma, nastává problém s překrytím textu, nezobrazováním části navigace atd. Názorně tento problém zobrazuje Obr. 27.
Obr. 27 – Překrývání hlavní navigace.
Zdroj: Autor.
Při extrakci textového obsahu byl zjištěn stejný problém jako při ovládání klávesnicí. Nejprve se zobrazí obsah záhlaví a záložky se službami, poté vyhledávání a následně obsah webu. Až poté je zobrazena hlavní a lokální navigace, přihlašovací a další údaje a následně zápatí. Uvedená posloupnost by byla logická, pokud by byl v záhlaví odkaz „Skočit na navigaci“. Zde je však pouze odkaz „Skočit na obsah“.
Kontrola webu v různých prohlížečích proběhla v pořádku, webová prezentace se
zobrazuje korektně v prohlížeči Internet Explorer, Mozilla Firefox i Opera – pro testování byl využit prohlížeč IE6, Firefox 3.0.3 a Opera 9.02.
62
V zápatí všech stránek webu je uvedena mapa webu, která je při tomto rozsahu webové prezentace nutností. Zveřejněno je také prohlášení o přístupnosti, které informuje o základních pravidlech přístupnosti.
Automatická kontrola validity pomocí nástroje Cynthia Says odhalila, že na webu se
nachází velké množství obrázků, které nemají definovanou textovou alternativu, respektive jejich atribut alt je prázdný. Při hlubší kontrole webu podle metodiky WCAG byly odhaleny ještě další menší nedostatky, které nejsou pro optimalizaci webu příliš významné.
7.7 Vhodná URL Pokud je URL uváděna v písemné formě, měla by obsahovat také www, jelikož tím
je odlišen název společnosti od URL. Společnost Český kutil.cz, s. r. o. toto pravidlo dodržuje.
URL by mělo být trvalé, co nejkratší a co nejjednodušší. Trvalost je z velké míry
zajištěna, jelikož při vkládání dat je vygenerována pro novou stránku nová URL. Výsledná adresa však nesplňuje požadavek délky, což však vzhledem k rozsahu portálu je možné očekávat.
URL http://www.ceskykutil.cz/ zcela výstižně vyjadřuje, co je obsahem webových
stránek a koresponduje s ním. Zcela jednoznačně by však jako primární tvar adresy měl být používán: http://www.cesky-kutil.cz/, jelikož vyhledávače chápou slova oddělená pomlčkou jako více slov, v tomto případě by vyhledávač v URL našel klíčové slovo „kutil“.
Jako nevýhodu lze uvést, že celá adresa cílové stránky obsahuje celou cestu včetně
stromové struktury, například: http://ceskykutil.cz/tvorime/ubrousky/africky-obrazek/. Ačkoliv je adresa příliš dlouhá a odporuje pravidlu, že má být co nejkratší, jen stěží si lze představit, že si takovou adresu bude někdo potřebovat pamatovat. Pro zkušenější uživatele může taková adresa sloužit také jako drobečková navigace. Vyhledávače navíc takovým adresám mnohem lépe rozumí a z tohoto pohledu jsou tedy lepší, než adresa obsahující jiné znaky nebo dokonce parametry. Vhodnější podobou této adresy by však byla: http://ceskykutil.cz/africky-obrazek/, lze však předpokládat, že by, vzhledem k rozsahu portálu, došlo ke kolizím v případě stejných názvů dvou článků a tím pádem stejné adresy.
7.8 SEO Cílem optimalizace pro vyhledávače je, aby webová prezentace byla umístěna
ve vyhledávačích na co nejvhodnějších místech. SEO pro společnost Český kutil.cz, s. r. o. zajišťuje společnost Anawe.
Při vyhledání slova „kutil“ je webový portál ve vyhledávači Google umístěn
na 1. místě, na portálu Seznam na 2. místě, ale například ve fulltextovém vyhledávači Jyxo se Český Kutil.cz vůbec nedostal na první stránku výsledků.
Ve výsledcích vyhledávání také není jednotný popis. Mělo by se zde objevit hlavní
heslo: „CeskyKutil.cz – Internetový hobby magazín pro celou rodinu“ a v bližším popisku by měly být podrobnosti o portálu. Ne u všech testovaných vyhledávačů tomu tak je.
63
Výsledek ve vyhledávači Google je ze všech nejlepší. Znázorňuje ho Obr. 28.
Obr. 28 – Výsledek vyhledávání ve vyhledávači Google.
Zdroj: Autor. Na Seznamu již není relevantní popisek, ale místo bližších informací jsou zde
zveřejněny údaje ze zápatí (Obr. 29).
Obr. 29 – Výsledek vyhledávání ve vyhledávači Seznam.
Zdroj: Autor. Totéž se týká výsledků vyhledávání na Jyxu (Obr. 30). Zde by například v popisce
neměl být začátek textu „Skočit na navigaci“.
Obr. 30 – Výsledek vyhledávání ve vyhledávači Jyxo.
Zdroj: Autor. Nepříliš dobré jsou výsledky vyhledávání jiných klíčových slov. Testována jsou
slova: bazén, zahrada, tvoříme a stavba ve vyhledávači Google a Seznam. Ani v jednom případě se portál neobjevil mezi výsledky vyhledávání na 1. stránce.
V titulku stránky by se neměly opakovat stejné výrazy. V „Magazínu“ má však
například „Antikutil“ stejný titulek, jaký má ve „Fotogaleriích“ stránka „Antikutil“. V obou případech je to „Antikutil – CeskyKutil.cz“.
Pro pozici ve vyhledávači je důležité budování zpětných odkazů, které přivedou nové
návštěvníky. Pomocí zpětných odkazů se vyjadřuje důležitost webových stránek. Tuto důležitost znázorňují různé ukazatele, u kterých uvedeme (Tab. 1), jak si portál CeskyKutil.cz stojí:
Ukazatel
Stránka Google
PageRank S-rank
http://ceskykutil.cz/ 5/10 86/100 http://ceskykutil.cz/tvorime/ 3/10 25/100 http://www.ceskykutil.cz/zahrada/okrasna-zahrada/ananas-aananas-comosusa/
0/10 2/100
http://ceskykutil.cz/diskuse/ 3/10 16/100 http://ceskykutil.cz/fotogalerie/ 3/10 20/100
Tab. 1 – Vybrané ukazatele u náhodně vybraných stránek portálu CeskyKutil.cz. Zdroj: Autor.
64
Jak z výsledků vyplývá, Google PageRank i S-rank si vzájemně odpovídají, S-rank však lépe znázorňuje výslednou hodnotu. Úvodní stránka dosahuje velmi dobrých hodnot, ale všechny další stránky na tom již tak dobře nejsou. Lepších hodnot by bylo možné dosáhnout tak, že by na danou stránku vedly odkazy z jiných webů.
Jako plus z pohledu SEO lze uvést neměnnost URL adresy, využívání nadpisů
i klíčových slov (v metatagu však pouze: kutil, stavebniny, domácnost), kvalitní obsah i budování zpětných odkazů. Vhodné je využití meta tagu description k bližšímu popisu webu – nyní pouze „Internetový hobby magazín pro celou rodinu“. Titulky stránek jsou dobře navržené, je však potřeba opravit menší nesrovnalosti v podobě stejných titulků u různých stránek.
7.9 SEM Marketing ve vyhledávačích není možné objektivně zhodnotit, jelikož k obecné
analýze chybí vstupní data. Ze sledování webu je však možné odvodit některé potenciální hrozby.
Především je to nebezpečí bannerové slepoty, které v případě portálu CeskyKutil.cz
hrozí. Využívané formáty reklam jsou natolik běžné, že je uživatelé mohou podvědomě ignorovat a pak není dosaženo takových výsledků, jaké byly očekávány. Jedinou obranou je nápadité provedení a vysoká informační hodnota reklamy. Možná je také změna formátů reklam na méně typické formáty, v případě portálu CeskyKutil.cz by byla vhodná kontextová reklama.
Jak je možné zjistit z výsledků vyhledávání pomocí Googlu (takto bylo vyhledáno
např. slovo „pergola“), využívá CeskyKutil.cz službu Google AdWords. Naopak z reklamního bloku umístěného v pravém sloupci všech stránek portálu vyplývá, že je využívána také služba Google AdSense. Jejich efektivitu však není možné posoudit.
7.10 SWOT analýza
Součástí analýzy je také stručná SWOT analýza. Nejprve jsou stanoveny silné a slabé stránky: • Silné stránky – obliba kutilství v ČR, známost značky, velikost portálu, kvalitní
technické zázemí, web šitý na míru, obchodní partneři, dobré vedení společnosti (zázemí), schopnosti redakce.
• Slabé stránky – nezahrnutí některé problematiky (některá témata jsou bez článků), malé reakce na aktuální dění v oboru kutilství, malé reakce na potřeby uživatelů, nebezpečí konkurence, omezená možnost získání finančních prostředků. Ze silných a slabých stránek lze určit příležitosti a hrozby. Příležitostí je především
možnost dalšího rozvoje portálu, jelikož kutilství je široká problematika a tedy vždy bude o čem psát. Vzhledem k oblibě tohoto koníčku v naší republice to znamená také stálost či zvýšení návštěvnosti portálu. Kvalitní články a jejich časté uveřejňování by však bylo vhodné doplnit častějšími reakcemi z řad redakce – odpovídat na dotazy v diskuzi atd. Jistou hrozbou může být nedostatek finančních prostředků a konkurenční portály se stejným či podobným zaměřením.
65
Zcela jednoznačně lze doporučit strategii S-O (silné stránky – příležitosti). Ta spočívá ve snaze využít silné stránky a příležitosti. Vzhledem ke konkurenci je možné zaujmout „útočnou“ pozici.
7.11 Analýza návštěvnosti Vzhledem k nedostupnosti dat potřebných pro analýzu návštěvnosti jí není možné
provést. Přesto je možné odhadnout tři modely chování návštěvníků, kterých se pravděpodobně nejčastěji drží: • Uživatel odněkud přijde na hlavní stránku, přečte několik článků a web opustí. • Uživatel se pomocí vyhledávače dostane na nějakou stránku webu, projde několik
článků a web opustí. • Uživatel vyhledá to, co potřebuje, pomocí vyhledávání a poté web opustí.
66
8 Realizace webového portálu V předchozích kapitolách jsou popsána hardwarová a softwarová rizika, potřeby
handicapovaných uživatelů i jednotlivé prvky, které je nezbytné kontrolovat. Tyto prvky jsou demonstrativně zanalyzovány na portálu CeskyKutil.cz.
Ačkoliv se však jedná o problematiku poměrně známou a stále rozšířenější, stále
přežívá mnoho předsudků. Při tvorbě webu i jeho optimalizaci tak dochází k několika velkým chybám: • Při tvorbě webu není dodržován žádný logický postup a jednotlivé činnosti na sebe
nenavazují. • Webmasteři se odmítají zabývat bezbariérovostí nebo optimalizací pro vyhledávače
a vznikají tak webové prezentace, které nesplňují ani základní požadavky kladené na současný web.
• Analytici častěji nabízejí optimalizaci pro vyhledávače, ačkoliv web slouží hlavně uživatelům.
• Analytici oddělují optimalizaci pro uživatele od optimalizace pro vyhledávače, protože uživatelé i vyhledávací roboti požadují něco jiného, ale tím může dojít ke kolizím. S ohledem na tyto nedostatky je vytvořena metodika pro tvorbu a optimalizaci
webové prezentace a to tak, aby na sebe jednotlivé části navazovaly. Podrobně je postup popsán v kapitole 9.1.
8.1 Metodika tvorby a optimalizace webové prezentace Předkládaná metodika tvorby a optimalizace webové prezentace vychází z výše
definovaných chyb a snaží se je odbourat. Hlavní charakteristikou je: • Logické navázání jednotlivých činností tvorby webu na sebe. • Spolupráce více členů týmu na dílčích krocích. • Optimalizace webu s ohledem na uživatele a až následně na vyhledávací roboty. • Možnost využít tuto metodiku také pro nezbytné úpravy vyplývající z průběžné
optimalizace webu. Je potřeba brát ohled na skutečnost, že vytvoření co nejkvalitnějšího webového
portálu má být cílem celého týmu. Ačkoliv se jednomu členovi týmu může některý krok jevit jako zbytečný, pro jiného je naopak klíčový.
Zároveň je třeba podotknout, že žádná z činností souvisejících s tvorbou webu není
nadstavbou, ale součástí tohoto procesu. Jedná se především o bezbariérovost webu a optimalizaci pro vyhledávače. Žádný z kroků také není možné z procesu vynechat, neboť by to vedlo k nekvalitně odvedené práci. Nerespektování těchto skutečností je v konečné fázi pouze špatnou vizitkou webdesignera.
Jednotlivé dílčí činnosti nezbytné pro zhotovení webové prezentace jsou
v předkládané metodice shrnuty do patnácti kroků, které znázorňuje Obr. 31. Všechny jednotlivé kroky předkládané metodiky jsou pak podrobně popsány v následujících podkapitolách.
Obr. 31 –
Posledním krokem p
případnými následnými úpravami. Jelikož se nejedná o skupinu souvisejících s tvorbou webu, lze proces vytvá
Při omezení metodiky
aplikace MS Project vytvoznázorněn na Obr. 32 pomocí Ganttova diagramu.
Obr. 32 – Ganttův diagram metodiky tvorby webové prezentace v
Metodika tvorby a optimalizace webové prezentace
Zdroj: Autor.
Posledním krokem předložené metodiky je průběžná optimalizace webu sípadnými následnými úpravami. Jelikož se nejedná o skupinu č
tvorbou webu, lze proces vytváření nového webu o tento bod zkrátit.
i omezení metodiky pouze na čtrnáct bodů tvorby webu je možné aplikace MS Project vytvořit rámcový harmonogram projektu tvorby webu
pomocí Ganttova diagramu.
ův diagram metodiky tvorby webové prezentace vZdroj: Autor.
1. • Analýza
2. • Klíčová slova (keywords)
3. • URL
4. • Grafické prvky
5. • Obsah
6. • Layout (rozmístění)
7. • Informační architektura
8. • Struktura webu, navigace
9. • Grafický návrh
10. • Realizace
11. • Dodatečné prvky
12. • Testování
13. • Marketing
14. • Spuštění
15. • Průběžná optimalizace
67
Metodika tvorby a optimalizace webové prezentace.
žná optimalizace webu s jeho ípadnými následnými úpravami. Jelikož se nejedná o skupinu činností bezprostředně
ení nového webu o tento bod zkrátit.
tvorby webu je možné s využitím tvorby webu. Ten je
v diagram metodiky tvorby webové prezentace v MS Project.
68
Jak z harmonogramu vyplývá, jednotlivé úkoly na sebe navazují a žádné dva neprobíhají paralelně. Dokončení projektu se tím prodlužuje na celkových 16 dní, což je však pro praxi délka akceptovatelná vzhledem k tomu, že výsledný web je plně optimalizován.
Sériový postup je vhodnější, neboť další činnost není zahájena, dokud není
bezchybně dokončen úkol předchozí. Jelikož v daný okamžik je plněn pouze jeden úkol, mohou se jednotlivé pracovní zdroje na tento úkol plně soustředit – lépe než v případě několika procesů probíhajících paralelně. Závislost jednotlivých úkolů a dobu trvání každého úkolu znázorňuje Obr. 33.
Obr. 33 – Harmonogram metodiky tvorby webové prezentace v MS Project.
Zdroj: Autor.
Je zřejmé, že některé z úkolů by bylo možné vykonávat paralelně a metodiku zpracovat do podoby hierarchického stromu. Tím je možné zkrátit celkovou délku trvání projektu, ale z výše uvedených důvodů není tento postup vhodný.
Pro vykonání všech činností uvedených v předložené metodice je zapotřebí sedm
pracovních profesí, přičemž ve výčtu chybí programátor, jehož přítomnost není nezbytná. Přehled pracovních zdrojů je uveden na Obr. 34.
Obr. 34 – Pracovní zdroje v MS Project.
Zdroj: Autor.
69
V praxi však zřejmě jeden pracovní zdroj zastoupí více činností, například testování nebude provádět uživatel, ale analytik, a předpokládaný počet pracovníků účastnících se tvorby webu podle předložené metodiky bude čtyři až pět.
8.1.1 Analýza Jestliže se vedení společnosti rozhodne pro novou webovou prezentaci, je prvním
krokem analýza. Jedná se o analýzu vnějšího (globálního) i vnitřního prostředí. Vhodným nástrojem je například již výše popisovaná SWOT analýza.
Nástrojem pro analýzu vnějšího prostředí může být například STEP analýza nebo
analýza hybných sil v odvětví. Výsledkem je pak například Porterův model pěti sil, který umožní vyhledat vhodnou pozici na trhu a zvolit co nejlepší přístup ke konkurenci.
Nástrojem analýzy vnitřního prostředí může být například analýza klíčových faktorů
úspěchu, evaluace dosavadní strategie nebo s ohledem na webovou prezentaci modifikovaná analýza exponovanosti podniku.
Analýzy samozřejmě zohlední, zda se jedná o novou společnost na trhu začínající
nebo o společnost zaběhnutou, která pouze vyžaduje nový webový portál. Posuzována je také kvalita konkurenčních webů i jejich umístění ve výsledcích vyhledávání.
8.1.2 Klíčová slova (keywords) Na základě výstupů z analýz je vhodné určit co nejvíce klíčových slov a frází, které
webovou prezentaci co nejlépe vystihují. Z nich je pak nutné vybrat ty, které uživatelé nejčastěji vyhledávají.
Důležité je brát ohled především na konkurenčnost těchto slov. Pokud se totiž vybrané klíčové slovo nachází na velkém množství konkurenčních webů, je velmi obtížné s novým webovým portálem uspět.
Vzhledem k tomu, že při analýze klíčových slov jsou brány ohledy na výstupy
předchozích analýz, a také na aktuální stav klíčových slov, spolupracuje v této fázi projektu marketingový manažer se SEO konzultantem.
Výsledkem analýzy klíčových slov je pak několik slov a frází, která co nejlépe
vystihují obsah vytvářené webové prezentace. Zvolená slova a fráze jsou také umístěna do tagu keywords kvůli optimalizaci pro vyhledávače.
8.1.3 URL Jsou-li zvolena klíčová slova, můžeme navrhnout vhodnou URL, která by měla brát
na keywords ohled. Do internetové adresy je vhodné umístit některé zvolené klíčové slovo. Je samozřejmé, že URL koresponduje s plánovaným obsahem webu. Zároveň je však potřeba brát ohled na název společnosti.
Jelikož internetová adresa je uváděna na všech firemních materiálech a je jedním
ze způsobů propagace společnosti, často vybírá vhodnou URL ředitel ve spolupráci
70
s marketingovým oddělením. Vzhledem k tomu, že URL ovlivňuje výsledky vyhledávání, účastní se tohoto procesu také SEO konzultant.
Z několika návrhů je pak vybrán ten nejvhodnější a zvolená URL je registrována.
Jedná-li se o víceslovné spojení, registruje se verze s jednotlivými slovy oddělenými pomlčkou i verze se všemi slovy psanými hned za sebou. Web by měl být s ohledem na vyhledávací roboty umístěný na adrese s pomlčkami a další verze adresy by pak měly být na tuto výchozí URL přesměrovány. Na uvážení marketingového oddělení je pak volba, kterou verzi zvolí jako vhodnější pro propagaci.
8.1.4 Grafické prvky Na základě názvu společnosti a zvolené URL připraví grafik návrh základních
grafických prvků. Pokud společnost nemá zvolené takzvané firemní barvy, předloží grafik vedení
společnosti ke konzultaci různé možné kombinace barev. Na základě zaměření společnosti či barevnosti konkurenčních webů pak vedení ve spolupráci s marketingovým manažerem vybere vhodnou kombinaci barev.
Pokud již má společnost vhodné logo, může grafik modifikovat pouze jeho
barevnost. Vyvstane-li však požadavek na logo nové, připraví několik návrhů s přihlédnutím ke zvoleným firemním barvám a loga předloží marketingu a vedení ke konzultaci.
Jelikož logo reprezentuje společnost navenek, vybírá to nejvhodnější marketingový
manažer s ohledem na názor vedení společnosti.
8.1.5 Obsah Dalším krokem tvorby webové prezentace je příprava obsahu. Psaní textů je úkolem
copywritera, který připraví obsah s ohledem na požadavky vedení společnosti. To mu buď dodá dostatečné podklady nebo s copywriterem na textech přímo spolupracuje.
Jelikož obsah je na webu to nejdůležitější, je nezbytné věnovat mu zvýšenou
pozornost. Copywriter musí připravit text krátký, srozumitelný, pravdivý a samozřejmě bez chyb a překlepů.
Úkolem copywritera je pak také typografie, tedy volba nadpisů a vhodné členění
textu do přehledných odstavců s podnadpisy. Pro upoutání uživatelovy pozornosti lze využít číslované nebo nečíslované seznamy.
8.1.6 Layout (rozmístění) Jestliže jsou vybrána klíčová slova, URL, připraveny texty pro web a vytvořeno
hlavní logo, je možné přistoupit k návrhu layoutu. Jedná se pouze o rozvržení základních prvků na stránce, tedy především loga a navigace.
71
Vedení společnosti chce mít většinou podobu webu ve své režii. Vzhledem k nenáročnosti tohoto kroku může první návrh layoutu vytvořit i ředitel společnosti. Jelikož sám je většinou uživatelem Internetu, má podvědomě zažité některé konvence a základní prvky při návrhu umístí na vhodná místa.
8.1.7 Informační architektura Na základě navrženého layoutu je připraven SEO konzultantem/analytikem návrh
informační architektury. Snaží se přitom zohlednit požadavky vedení společnosti znázorněné v layoutu.
V případě nejasností či nevhodnosti některého prvku konzultuje svou připomínku
s vedením společnosti a snaží se přizpůsobit jeho požadavkům, budoucím uživatelům i vyhledávacím robotům.
Konzultant by měl brát v potaz rozmístění prvků v prezentaci s ohledem na pohyb
očí po webové stránce, který připomíná písmeno F. Samozřejmostí je také kontrola zažitých webových konvencí.
Jakmile je ujasněno rozložení prvků na webové stránce, může být vyřešena otázka
týkající se technického způsobu řešení vybraných prvků. V této fázi je tedy například rozhodnuto, že menu bude řešeno pomocí JavaScriptu nebo že některý grafický prvek bude ve Flashi.
8.1.8 Struktura webu, navigace Jakmile je známa finální podoba informační architektury, je nutné připravit také
strukturu webu. To obnáší rozdělení připravených textů podle různých souvislostí do samostatných stránek a rozmyšlení jejich logického uspořádání.
V této fázi je určeno, zda bude spolu s hlavní navigací nutné využití také navigace
lokální. Dále je rozhodnuto o využití případných dalších typů navigace pro usnadnění orientace na webu – navigace drobečkové nebo kontextové.
Výsledkem této fáze je vypracování takzvané „mapy webu“, která bude sloužit
grafikovi při grafickém návrhu, při realizaci webového portálu webmasterovi a samozřejmě bude později umístěna také na webu jako jeden z prvků usnadňujících bezbariérovost.
8.1.9 Grafický návrh Nastává další důležitá část projektu, ve které grafik dostává ke zpracování návrh
informační architektury, mapu webu a připravené texty. S ohledem na informační architekturu připraví grafický návrh. Ten musí respektovat také požadavky dané strukturou webu, tedy musí znázorňovat skutečně vybrané položky menu.
Do ukázkových návrhů může grafik zakomponovat také připravené texty, které může
blíže typograficky zpracovat. Ve výsledku tak je lépe zřejmé, jak jsou řešeny nadpisy, podnadpisy, číslované a nečíslované seznamy, zvýraznění textu atd.
72
Nedílnou součástí grafického návrhu je také bezbariérovost. Je potřeba volit vhodné barvy, kontrolovat dostatečný kontrast barev a nevyjadřovat informaci pouze pomocí barvy – například povinné položky formuláře je vhodné odlišit barevně a navíc označit hvězdičkou s uvedením vysvětlení.
Pokud je předložený grafický návrh schválen vedením společnosti, může grafik
dotvořit doplňkové grafické prvky, jakými jsou reklamní bannery nebo ikonky. Ty mají korespondovat se vzhledem webu, dodržovat stejné barvy a použité grafické prvky.
8.1.10 Realizace Realizace je nepochybně nejdůležitější částí projektu. V této fázi webmaster vytváří
na základě již vytvořených podkladů webovou prezentaci. Neřídí se však pouze připravenou informační architekturu, strukturu webu a grafický návrh, ale také dalšími faktory.
Předně musí dodržovat pravidla bezbariérovosti podle vybrané metodiky. Mezi
nejdůležitější patří definování textových alternativ grafickým prvkům, zpřístupnění obsahu webu i bez podpory aktivních prvků (JavaScriptu, Flashe atd.), vhodné a správné používání tabulek, srozumitelné označení odkazů, využívání relativních jednotek pro určení velikosti písma, vhodné vyznačení nadpisů a seznamů nebo definování klávesových zkratek.
Práci webmasterovi usnadní software pro kontrolu podle vybraných metodik,
například online nástroj Cynthia Says, který umožní kontrolu webové stránky podle metodiky Section 508 nebo WCAG 1.0.
Naprostou samozřejmostí musí být fakt, že kód webových stránek (HTML a CSS)
neobsahuje syntaktické chyby – tedy že je validní. Validitu HTM je možné kontrolovat na adrese http://validator.w3.org/ a validitu CSS na http://jigsaw.w3.org/css-validator/. Pro budoucí úpravy webu je vhodné kód webu komentovat.
Při realizaci je nutné brát ohled na optimalizaci pro vyhledávače. Především je
důležité zvolit vhodnou internetovou adresu všech podstránek, nejlépe ve tvaru www.indexova-stranka.cz/vnorena-stranka/. Zároveň je nezbytné definovat všem stránkám vhodný titulek, který by měl obsahovat klíčová slova, například: Název stránky – Název společnosti. Samozřejmé je využití tagu keywords pro klíčová slova a description pro krátký popis.
Kvůli správnému zobrazování je velice důležitá kontrola webového portálu
v různých klíčových prohlížečích – v Mozilla Firefoxu, Google Chrome, Opeře a v posledních dvou verzích Internet Exploreru.
Webmaster by tedy měl vytvořit webový portál, který se bude ve všech prohlížečích
zobrazovat korektně, bude mít validní kód, bude optimalizovaný pro vyhledávací roboty a především bude zajímavý a dobře ovladatelný pro uživatele. Pokud si v některé fázi tvorby webu nebude jistý správným postupem, měl by mít možnost vyvstalý problém konzultovat s odborníkem.
73
8.1.11 Dodatečné prvky Do hotového webu webmaster na předem určená a připravená místa implementuje
kód doplňkových prvků. Jedná se například o technologii pro čtení novinek RSS, kontextové reklamy Google
AdSense nebo statistický nástroj Google Analytics. Implementace těchto prvků je vhodná až co nejpozději před závěrečným testováním
webového portálu, aby výsledné údaje nebyly zbytečně zatíženy nerelevantními daty.
8.1.12 Testování V dalším kroku následuje fáze testování, které je zaměřené na uživatele
a vyhledávací roboty. Především je testována uživatelská přívětivost webu a co nejdůkladněji také jeho
bezbariérovost, nejlépe nejen automatickými nástroji nebo uživatelským testem, ale také proti bodům zvolené metodiky. K testování je možné přizvat nezaujatou skupinku uživatelů, kteří mohou vykonat na webu nějakou činnost, nebo je možné ve spolupráci se Sjednocenou organizací nevidomých a slabozrakých provést důkladné testování, kterého se zúčastní také několik testerů s těžkým postižením zraku. Výsledkem testování je, zda se uživatelům web snadno ovládá a neklade jim žádné výrazné překážky, ale také zda je pro ně dostatečně zajímavý.
Na základě výsledků testování je vypracováno takzvané Prohlášení o přístupnosti,
které bude obsahovat informace o tom, kterou metodiku bezbariérovosti a v jaké míře web splňuje, které části webu mohou být problémové, proč není možné závady odstranit a uvedeny jsou také pokyny k ovládání webu, například klávesové zkratky.
Součástí testovací fáze je také závěrečná kontrola všech prvků, které mohou ovlivnit
výslednou pozici ve vyhledávačích.
8.1.13 Marketing Těsně před spuštěním webové prezentace je potřeba vyřešit problematiku propagace
webu. V této fázi tedy přichází čas na zprovoznění reklamních systémů typu Google AdWords, Sklik nebo Etarget.
Zajímavou oblastí, kterou je možné právě v této fázi uplatnit, je virální marketing.
Při tomto způsobu propagace šíří povědomí o webu, firmě či konkrétním produktu sami uživatelé. Toho lze docílit mnoha způsoby: • Nabízet něco originálního, například microsite se soutěží, zajímavý reklamní spot
nebo produkt s poukázkou na slevu, kterou je možné někomu přeposlat e-mailem. • Zvolit zajímavý způsob propagace, třeba pomocí příběhu. • Dát o sobě vědět pomocí různých serverů, například Facebook, Flickr nebo
YouTube. • Nabídnout uživatelům informace ze zákulisí – například psát neformální blog o dění
ve společnosti.
74
• Dát uživatelům možnost se realizovat – umožnit jim tvořit spolu s námi, hrát hry, psát příspěvky, vkládat fotky atd.
• Nechat uživatele odesílat e-mailové zprávy, jejichž součástí budou informace o webu, produktech či společnosti. V této fázi tvorby webového portálu přichází také poslední optimalizace pro
vyhledávače. Součástí je také registrujeme web do katalogů a budování zpětných odkazů.
8.1.14 Spuštění Spuštění webu představuje pouze nahrání webové prezentace na FTP server
a závěrečnou kontrolu funkčnosti. Přesto je klíčovou činností a jakýmsi cílem, ke kterému směřoval celý předkládaný postup tvorby webu.
Ačkoliv je spuštění webu završením úsilí celého týmu, je nutné mít na paměti, že
tímto okamžikem činnosti okolo webového portálu nekončí.
8.1.15 Průběžná optimalizace I po spuštění webového portálu je nezbytně nutné se vývoji webu věnovat.
Nejdůležitější jsou pravidelné aktualizace, protože pouze udržovaný web má šanci se v konkurenčním boji prosadit.
Již od spuštění je důležité sledovat statistiky návštěvnosti. Pro rozhodování ohledně
případných úprav webu nejsou klíčové pouze hodnoty, ale také další informace, které pokročilé sledování poskytuje. Jedná se především o sledování nejčastěji hledaných slov a frází, dosahování cílů nebo výstupní stránky. Takto je možné odhalit, jestli web navštěvují uživatelé, kteří měli o problematiku zájem, zda našli to, co hledali nebo není-li na webu něco, co by uživatele odradilo – například příliš obtížný formulář, kvůli kterému uživatelé nedokončí započatou registraci.
Dalším krokem je sledování kvality optimalizace pro vyhledávače a výsledků
vyhledávání. Nejsou-li výsledky uspokojivé, je potřeba najít příčinu a tu odstranit. Samozřejmostí je sledování efektivity reklamy, především minimalizace nákladů
na získání návštěvníka. Důležité je však především udělat z návštěvníka zákazníka, tedy zvýšit konverzní poměr. Toho lze dosáhnout například dobrým cílením reklamy.
Kontrola požadavků uživatelů, optimalizace pro vyhledávače i efektivnosti
reklamních kampaní musí probíhat pravidelně, například jednou měsíčně. Dříve nebo později zřejmě přinese neuspokojivé výsledky a bude nutné provést v závislosti na těchto zjištěních vhodné úpravy webu. Tyto aktualizace a optimalizace jsou často chápány jako „nutné zlo“, a proto jsou úmyslně opomíjeny. Ve skutečnosti však vedou k výraznému vylepšení webu a v krajních případech třeba i k získání konkurenční výhody.
75
8.2 Porovnání metodiky s jinými autory Předložená metodika je porovnána s postupy, které uvádí jiní autoři. Jeden z postupů
popisuje Marek Rolný takto [74]: • Vstupní marketingová analýza – SWOT analýza produktů či služeb, analýza
konkurence, definování cílů webové prezentace, stanovení potřeb cílové skupiny uživatelů, návrh vhodné strategie, cenová kalkulace, rozpočet webového projektu.
• Návrh informační architektury – návrh struktury webových stránek, návrh a optimalizace obsahu webu.
• Grafický návrh – vytvoření kreativního konceptu, rozkreslení jednotlivých typových stránek webu.
• Kódování, programování a naplnění – vytvoření šablony webu (X)HTML a CSS, programování webové aplikace, implementace obsahu webové prezentace, testování a zpětné ladění.
• Marketing webové prezentace – registrace do vyhledávačů a katalogů (SEM), budování zpětných odkazů, offline propagace a zapojení do komunikačního mixu, sledování a vyhodnocování návštěvnosti. Je zřejmé, že tento postup je podobný předkládané metodice. Nově navržená
metodika však podporuje větší vzájemnou spolupráci jednotlivých odborníků. Například přítomnost SEO konzultanta je vyžadována u mnoha dílčích kroků a nikoli pouze v analytické fázi.
Většina autorů se v prostředí internetu při specifikování postupu tvorby webu
orientuje přímo na zákazníka. Takto vytvořená metodika je zajímavým podkladem pro klienta, ale již není směrodatná pro webdesignera. Takový postup uvádí například Martin Felcman [75]: • Zadání, pohovor s klientem. • Vytvoření grafického návrhu. • Nakódování šablon a textu. • Programování redakčního systému, e-shopu apod. • Předání a prezentace webu.
Z postupu je zřejmé, že při takto tvořeném webu není brán ohled na problematiku
copywritingu, bezbariérovosti nebo na optimalizaci pro vyhledávače. Výsledný web pak zřejmě tyto požadavky nesplňuje.
Někteří autoři se dokonce omezují pouze na definování rolí jednotlivých pracovníků a dále se již nezabývají jejich spoluprací. Například Miloslav Lešetický [76] uvádí čtyři profese, které se na tvorbě webu podílí. Jsou to: • Grafik • Kodér (XHTML a CSS) • Programátor • Copywriter
V tomto návrhu profesního zastoupení chybí analytik, který má na starost kontrolu
bezbariérovosti a optimalizaci pro vyhledávače.
76
Občas je možné setkat se s návrhem, který výše uváděné postupy shrnuje do jednoho globálního problému. Taková metodika pak věrohodněji zachycuje skutečnost a při použití v praxi vede ve výsledku ke kvalitnějšímu webu.
Příklad takového postupu znázorňuje Obr. 35, na kterém jsou zobrazeny procesy,
výstupy těchto procesů i profesní zastoupení. Tento postup oproti předchozím věrohodněji zachycuje návaznost jednotlivých kroků na sebe i vzájemnou spolupráci jednotlivých členů týmu.
Obr. 35 – Postup při tvorbě webové aplikace.
Zdroj: <https://moodle.czu.cz/mod/resource/view.php?id=32757/>.
8.3 Realizace webového portálu moderni-web.net Kvůli ověření předložené metodiky v praxi je celý výše popsaný postup předveden
na tvorbě malého webového portálu. Cílem je vytvořit menší webový portál s několika podstránkami, který bude
informovat návštěvníky o nárocích na hardware a software, požadavcích uživatelů a bude odkazovat na vybrané nástroje a webové stránky.
S ohledem na demonstrativnost uváděného příkladu nemusí být všechny body
metodiky splněny do nejmenších podrobností. Taková situace je blíže vysvětlena a je předložen návod vhodného postupu.
8.3.1 Analýza V prvním kroku je provedena SWOT analýza, která vede k určení strategie tvorby
a následného rozvoje webového portálu. Nejprve jsou stanoveny silné a slabé stránky připravovaného webu:
• Silné stránky – jednoduchost grafiky, aktuálnost problematiky, ohled na uživatele i vyhledávací roboty, předložení nové metodiky tvorby webu.
77
• Slabé stránky – nezahrnutí celé problematiky, velká konkurence v oblasti, žádné zázemí, nevýdělečnost projektu. Na základě silných a slabých stránek jsou určeny příležitosti a hrozby. Za příležitost
lze považovat především možnost vytvořit zajímavý portál, který bude zájemcům představovat výše popsanou metodiku tvorby a optimalizace webu.
Největší hrozbou je silná konkurence s dlouhou tradicí na trhu a dobrým jménem.
Jde jak o obchodní společnosti zabývající se touto problematikou, tak i blogy jakožto prostředek pro vyjádření myšlenek a poznatků uznávaných autorů.
Jak z uvedeného vyplývá, zřejmě převažují silné stránky a hrozby. Vhodnou strategií
je tedy mírně ofenzivní S-T (strengths-threats). Strategie spočívá ve snaze využít případné silné pozice k blokování nebezpečí a k oslabení konkurence.
Součástí analýzy předcházející dalšímu postupu je také bližší analýza konkurenčních
webů. Jelikož výše popsaná metodika se týká tvorby webu, bylo sousloví „tvorba webu“ vyhledáno ve vyhledávači Google. Na předních místech výsledků vyhledávání se objevují weby: tvorba-webu.cz, tvorba-webu.zdarek.com, webtvorba.cz, jakpsatweb.cz, tvorbawebu.net nebo jaknaweb.com. Všechny tyto webové prezentace se zabývají také přístupností, optimalizací pro vyhledávače, různými analýzami a marketingem. Pochopitelně jsou tedy velmi kvalitní – z pohledu uživatele i vyhledávacího robota.
Výsledky analýz napovídají, že by od tvorby webu v plánované podobě mělo být
upuštěno. Jelikož se však jedná o demonstrativní příklad předložené metodiky tvorby a optimalizace webu, je web realizován.
8.3.2 Klíčová slova (keywords) Webové prezentace zabývající se problematikou této diplomové práce lze rozdělit
na ty, které nabízejí tvorbu webů a ty, které se zabývají jejich optimalizací. Pro naše potřeby postačí zaměřit se na weby, které nabízejí optimalizace či analýzy, nikoli samotnou tvorbu. Takových webů existuje jen v České republice nepřeberné množství. Analýza konkurence ukazuje na vysokou kvalitu většiny těchto webů.
Na základě bližšího poznání problematiky je zvoleno větší množství potenciálně
vhodných klíčových slov a frází: web, webová prezentace, webový portál, tvorba webu, tvorba webové prezentace, tvorba webového portálu, grafika, logo, barvy, copywriting, psaní pro web, layout, informační architektura, struktura webu, navigace, bezbariérovost, přístupnost, použitelnost, RSS, optimalizace, optimalizace pro vyhledávače, SEO, marketing, SEM, virální marketing, analýza, návštěvnost, analýza návštěvnosti, uživatel, testování.
Z těchto slov a frází jsou vyřazena ta, která přesně nevystihují obsah plánovaného
webu nebo se na něm vyskytují jen v malé míře. V tomto případě zbudou tato slova: web, tvorba webu, bezbariérovost, přístupnost, optimalizace, SEO, marketing, analýza.
Jednotlivá slova je pak možné postupně zadávat do příslušných nástrojů reklamních
systémů, například Google AdWords nebo Sklik. Pomocí nástrojů pro volbu klíčových slov lze vygenerovat jejich synonyma nebo homonyma. Pro nalezení dalších klíčových
78
slov a frází odvozených od slova „přístupnost“ je využit Google AdWords. Výpis vygenerovaných dat je uveden pouze formou seznamu (Obr. 36).
Obr. 36 – Klíčová slova „přístupnost“ v Google AdWords.
Zdroj: Autor. K nalezení klíčových slov a frází odvozených od zkratky „seo“ je použit příslušný
nástroj Skliku. Výstup je ponechán s grafickým znázorněním (Obr. 37).
Obr. 37 – Klíčová slova „seo“ v Skliku.
Zdroj: Autor. Jak je patrné, každý nástroj se chová trochu jinak. Je proto vhodné vyzkoušet
všechna zvolená slova v různých nástrojích a vyhodnotit výsledky. V našem případě není využito klíčových slov a frází, které nabízejí předkládané nástroje, jelikož tato se nejeví jako vhodná.
Při rozhodování je pochopitelně nezbytné vzít v úvahu také cenu, kterou to které
klíčové slovo má, což ovšem není nutné v našem demonstrativním případě zohlednit. V konečné fázi jsou tedy zvolena klíčová slova: web, tvorba webu, bezbariérovost, přístupnost, optimalizace pro vyhledávače, SEO, marketing, analýza návštěvnosti.
Po definování klíčových slov si můžeme připravit krátký popis, který bude umístěn
do tagu description : Webový rozcestník o správné tvorbě webu s ohledem na uživatele, bezbariérovost (přístupnost), obsah (copywriting), informační architekturu, strukturu a navigaci, SEO (optimalizaci pro vyhledávače) a analýzu návštěvnosti.
79
8.3.3 URL Na základě právě definovaných klíčových slov je nutné určit internetovou adresu,
což spočívá v přípravě různých alternativ a výběru té možnosti, která web nejlépe vystihuje.
Je-li preferována doména složená z více slov, je nezbytné registrovat verzi
s jednotlivými slovy oddělenými pomlčkou, i verzi bez pomlček. Vzhledem k problému s obsazeností domén byla zvolena jediná volná doména,
kterou je moderni-web.net.
8.3.4 Grafické prvky V dalším kroku jsou voleny barvy. V případě moderni-web.net je zvolena kombinace
bílé, černé a tmavě červené barvy. Důvodem je široká škála kombinovatelnosti a možnost kombinací barev i pro případné tištěné materiály.
Po volbě barev je připraveno vhodné logo. V našem případě je potřeba vytvořit logo
zcela nové. Při tom je vhodné vycházet z registrované URL moderni-web.net. První písmena slov „moderni“ a „web“ jsou zkombinována až do finální podoby dvou do sebe zaklesnutých písmen (Obr. 38). Logo je později barevně zakomponováno do záhlaví, jeho finální podoba tedy z úvodního konceptu dozná drobnějších změn.
Obr. 38 – Logo moderni-web.net.
Zdroj: Autor.
8.3.5 Obsah Text pro moderni-web.net je připravován vlastními silami a kvůli charakteru webu
nejsou využity služby copywritera. Hlavními požadavky je jednoduchost, srozumitelnost a vhodné členění. Z tohoto
důvodu je psán text krátký, důležité pasáže jsou zvýrazněny a je využíváno nečíslovaných seznamů.
Jako příklad je uveden připravený text na úvodní stránku webu, který vypadá takto:
80
Vítejte na rozcestníku moderni-web.net, který shromažďuje informace a odkazy týkající se tvorby webu podle nejmodernějších požadavků. Na toto téma jsem zaměřila také svou diplomku. Co? Portál shrnuje informace o požadavcích, které jsou v současnosti kladeny na webovou prezentaci a kterých je potřeba se držet. A na co je potřeba si dát pozor? Na: • Přizpůsobení hardwarovým a softwarovým požadavkům uživatelů • Technologie jako např. JavaScript, Flash atd. • Potřeby handicapovaných uživatelů • Layout, informační architekturu a strukturu webu, včetně volby vhodné navigace • Grafické řešení • Rozmístění prvků v prezentaci • Copywriting a typografii • Validitu kódu • Bezbariérovost – použitelnost a přístupnost • Vhodnost URL • SEO • SEM • Analýzy návštěvnosti Je důležité znát způsoby, jak správnost výše uvedených prvků zkontrolovat pomocí vhodných nástrojů, nebo vědět, na koho se obrátit s žádostí o tuto kontrolu.
Př. 4 – Ukázka strukturování a zvýraznění textu na úvodní stranu webu. Text je stručný, strukturovaný pomocí nadpisů i nečíslovaného seznamu. Klíčová
slova jsou v textu tučně zvýrazněna.
8.3.6 Layout (rozmístění) Jestliže je připravený obsah, lze načrtnout první verzi layoutu, tedy rozložení webu.
Vhodnou volbou je nejpoužívanější rozložení typu TLB (Top Left Bottom), které znázorňuje Obr. 39. Logo Graficky zpracované záhlaví Hlavní navigace Drobečková navigace Lokální navigace Ikonky Počítadlo
Obsah
Reklama
Copyright Mapa webu Prohlášení o přístupnosti
Obr. 39 – Návrh layoutu. Zdroj: Autor.
81
Pod graficky zpracované záhlaví je umístěna horní navigace (top), na levé straně navigace lokální a doplňkové prvky (left) a v zápatí případné další odkazy (bottom). Pro text zbývá vyhrazené místo ohraničené těmito třemi bloky. Pravý sloupec zůstává vyhrazen pro plánovanou reklamu Google AdSense.
8.3.7 Informační architektura Navržený layout je potřeba rozšířit o další informace týkající se technologického
řešení dílčích částí webu. Web je plánován jako statický s pevně graficky zpracovaným záhlavím, lištou hlavní
a drobečkové navigace, pravým sloupcem a zápatím. Tyto prvky se změnou stránky nemění. V levé části hlavní strany se nachází informace o kvalitě webu, ale na vnořených stránkách je na tomto místě lokální navigace.
K tvorbě webu je plánováno využít kaskádové styly (CSS) a skriptovací jazyk PHP
kvůli usnadnění správy. Žádný z prvků nemá být řešen pomocí jiných technologií, tedy například pomocí Flashe nebo JavaScriptu.
8.3.8 Struktura webu, navigace Po přípravě obsahu webu a informační architektury, je možné sestavit strukturu webu
a hierarchii navigace. Vzhledem k charakteru webu a připravenému obsahu stránek je zvoleno těchto 6 kategorií webu: diplomka, požadavky, nástroje, odkazy, služby, blog, o mně.
Lokální navigace je navržena takto:
Kategorie Podstránky Požadavky HW a SW, Potřeby uživatelů, Přizpůsobení požadavkům Nástroje Grafika, Validita, Bezbariérovost, SEO
Tab. 2 – Navržení lokální navigace. Zdroj: Autor.
V dalších sekcích je plánováno levé menu připravit, ale využíváno má být až
v souvislosti s rozvojem webu. Na základě navržené hlavní a lokální navigace je připravena základní mapa webu,
která může být při plnění webového portálu obsahem umístěna do zápatí: • Hlavní strana
o Diplomka o Požadavky
� HW a SW � Potřeby uživatelů � Přizpůsobení požadavkům
o Nástroje � Grafika � Validita � Bezbariérovost
82
Obr. 40 – Grafický návrh. Zdroj: Autor.
� SEO o Odkazy o Služby o Blog o O mně
• Mapa webu • Prohlášení o přístupnosti
Př. 5 – Mapa webu.
8.3.9 Grafický návrh Jak je uvedeno v metodice tvorby a optimalizace webu, posledním krokem před
realizací je příprava grafického návrhu. Návrh je připravován s ohledem na zpracovanou informační architekturu, mapu
webu, definované firemní barvy a jsou do něj zakomponovány již dříve připravené grafické prvky, především logo. Kvůli věrohodnosti jsou do návrhu vloženy i skutečné texty, ve kterých je možné povést příslušné typografické úpravy – zvýraznění, odrážky. Pochopitelně pro názornost v návrhu je zvýrazněn také vzorový odkaz.
Po rozvržení barev je možné graficky zpracovat záhlaví webu. Na zbylé části webové
prezentace jsou využity již použité barvy. Výsledný grafický návrh je zobrazen na Obr. 40.
.
83
8.3.10 Realizace Po úspěšném ukončení všech předchozích kroků nadchází fáze realizace. Z návrhu
informační architektury je zřejmé, jakým způsobem má být web řešen. Kvůli oddělení grafické podoby webu od obsahu jsou využity kaskádové styly. Správu webu usnadní skriptovací jazyk PHP, díky kterému není nutné opravovat údaj, který se nachází na všech stránkách webu ručně.
Při realizaci webu je průběžně kontrolována validita HTML i CSS. Web je tvořen
v souvislosti s metodikami bezbariérovosti a již v průběhu tvorby je kontrolován nástrojem Cynthia Says.
Již dříve připraveným popiskem je vyplněn tag description a klíčová slova jsou
zapsána do tagu keywords . Logo webu zastupuje nadpis první úrovně definovaný tagem h1. Nadpis 2. úrovně
(v tagu h2) představuje hlavní nadpis stránky a tento nadpis je zároveň uveden v tagu title . Text je dále strukturován pomocí nečíslovaného seznamu (tag li ) a důležité výrazy jsou v textu zvýrazněny tagem strong .
Jak již bylo definováno informační architekturou a strukturou webu je na web
umístěna také drobečková navigace a do zápatí mapa webu.
8.3.11 Dodatečné prvky Jako poslední se do hotového webu vloží kódy doplňkových prvků. Především je
zajištěn přístup do statistického nástroje Google Analytics a kód pro sledování webových stránek je vložen do kódu webu.
Též je do webu vložen kód kontextové reklama Google AdSense, která
návštěvníkům nabídne tematicky podobné nebo stejné weby a umožní našemu webu vydělávat.
RSS zdroje jsou řešeny manuálně pomocí souboru rss.xml a XML kódu, který je
znázorněn na Obr. 41.
Obr. 41 – XML kód v souboru rss.xml.
Zdroj: Autor.
84
Informace o RSS kanálu jsou dále vloženy do definice hlavičky stránky:
<link href="http://www.moderni-web.net/rss.xml" rel ="alternate" type="application/rss+xml" title="P řidat moderni-web.net ke sledovaným novinkám" />
Př. 6 – Zápis odkazující na RSS uvedený v hlavičce stránky. Informace o RSS kanálu se pak zobrazuje pomocí ikonky přímo v prohlížeči, jak
znázorňuje Obr. 42 a 43.
Obr. 42 – Zobrazení ikonky RSS zdroje v prohlížeči Internet Explorer.
Obr. 43 – Zobrazení ikonky RSS zdroje v prohlížeči Mozilla Firefox.
Pro případ, že by se ikonka z nějakého důvodu nezobrazovala, je obrázek s odkazem
na RSS zdroj vložen také přímo do kódu webových stránek.
8.3.12 Testování Před samotným spuštěním webu nastává fáze otestování webu. Nejprve je testována
validita webu. Kód HTML je validní podle deklarovaného DOCTYPE. Taktéž u kaskádových stylů nebyla objevena žádná chyba.
V dalším kroku je provedeno testování bezbariérovosti automatickým nástrojem
Cyntriha Says. Podle metodiky Section 508 i podle všech tří priorit WCAG 1.0 nebyla objevena žádná chyba.
Je tedy provedeno podrobnější uživatelské testování v těchto bodech:
• Vypnutí grafiky – místo obrázků se všude zobrazuje text uvedený v tagu alt . • Vypnutí kaskádových stylů – obsah je na začátku, následuje reklamní blok Google
AdSense, hlavní navigace, levý panel a zápatí. • Vypnutí aktivních prvků – žádné takové prvky na webu nejsou. • Ovládání klávesnicí – web lze ovládat pouze klávesnicí, pomohou klávesové zkratky. • Změna velikosti okna a rozlišení obrazovky – při změně velikosti okna se zobrazí
horizontální a vertikální posuvník, rozlišení obrazovky nemá na přístupnost vliv. • Změna velikosti textu – text je možné zvětšit, při extrémním zvětšení písma se však
začíná překrývat horní lišta s navigací, čemuž však prakticky nelze zabránit. • Zobrazení v textovém prohlížeči – všechny informace jsou dostupné i v textovém
prohlížeči. • Extrakce textového obsahu – webová stránka zkopírovaná do textového dokumentu
dává smysl, pořadí bloků je stejné jako v případě vypnutých kaskádových stylů. • Použití funkce Vysoký kontrast – nemá na vzhled webové stránky vliv.
Vzhledem k tomu, že web prošel všemi kontrolami bez problémů, není nutné
provádět kontrolu přístupnosti proti bodům zvolené metodiky ručně.
85
Na závěr je nutné zkontrolovat prvky, které mají vliv na optimalizaci pro vyhledávače: • URL – dvě slova v adrese jsou oddělená pomlčkou a podstránky mají adresu ve tvaru
http://www.moderni-web.net/diplomka.html. • Keywords – je definováno 8 klíčových slov a frází. • Description – je uveden krátký popisek vystihující web. • Titulek stránky – každá stránka má svůj unikátní titulek ve tvaru například:
„Diplomka – Moderní web“. • Nadpisy – tag h1 obsahuje název webu, tag h2 název strany a tag h3 definuje
podnadpisy strany. • Zdrojový kód – kód HTML i CSS je validní. • Obsah – texty jsou stručné a obsahují nadefinovaná klíčová slova. • Mapa webu – odkaz na mapu webu je uveden v zápatí.
8.3.13 Marketing Placená reklama typu Google AdWords, Sklik nebo Etarget není zřízena z důvodu
nenávratnosti této investice. Uplatněny však jsou některé způsoby virálního marketingu. Jednou ze sekcí webu je
blog, kde je možné publikovat informace ze „zákulisí“ i vlastní myšlenky, v budoucnu třeba s možností diskuze k článku. Webovému portál je také vytvořena vlastní stránka v sociální síti Facebook.com. Náhled této stránky zobrazuje Obr. 44.
Obr. 44 – Stránka na Facebook.com.
Zdroj: Autor.
86
Začínají se také budovat zpětné odkazy, v prvním kroku především vložením informací o webu do vyhledávačů a také registrací do katalogů, například seznam.cz nebo bezvaportal.cz.
8.3.14 Spuštění Oficiální spuštění představuje nahrání webové prezentace na FTP server. V tomto
případě to znamená přesunutí souborů a adresářů z vnořeného adresáře do rootu. Následuje ověření funkčnosti všech částí webu, především bezproblémového
přepisování internetových adres pomocí URL rewriteru.
8.3.15 Průběžná optimalizace Po spuštění webu je nutné počkat, až vyhledávací roboti zaindexují webovou stránku
a statistický nástroj bude obsahovat dostatečná data pro vyhodnocení. Sledovat pozice webu ve výsledcích vyhledávání a statistiky návštěvnosti je však možné začít relativně brzy po spuštění. Všechny ukazatele je nutné sledovat pravidelně, v našem případě jednou měsíčně.
Podrobnější analýza rámcově demonstrující postup popsaný v metodice tvorby
a optimalizace webu je provedena přibližně rok po spuštění webu. Kvůli SEO jsou sledovány pozice ve výsledcích vyhledávání na relevantní klíčová slova. Vzhledem k vysoké míře konkurence není pozice webu ve výsledcích vyhledávání příliš dobrá – Tab. 3. znázorňuje pozice ve výsledcích vyhledávání na vybraná klíčová slova:
Klíčové slovo Pozice
Google Seznam Moderní web 4. (3. neplacený) 3. Webový rozcestník 29. 49. Požadavky na web 1. 13. Bezbariérovost 16. 18.
Tab. 3 – Pozice ve výsledcích vyhledávání. Zdroj: Autor.
Sledovány jsou také podrobné statistiky návštěvnosti pomocí Google Analytics,
především počty návštěv. Dalšími důležitými ukazateli jsou absolutní návštěvníci, počty navštívených stránek, průměrný počet stránek na jednu návštěvu nebo čas strávený na stránce. Jednotlivé ukazatele je také možné porovnávat mezi sebou a sledovat, jak se navzájem ovlivňují. Graf návštěvníků a obecné statistiky za období od spuštění webu do konce února 2009 znázorňuje Obr. 45.
Jak z výsledků vyplývá, web nebyl ve sledovaném období příliš navštěvován. Vyšší
návštěvnost v některých dnech je tvořena především aktualizacemi webu a akcí WebExpo konanou v říjnu 2008, o které je na webu napsán krátký článek.
87
51 - 2009-03-10.pdf
Obr. 45 – Graf návštěvníků a obecné statistiky. Zdroj: Autor.
Google Analytics nabízí nepřeberné množství statistik. Jako nejdůležitější uveďme
například vyhledávaná klíčová slova, vstupní stránky, výstupní stránky nebo odkud návštěvníci přišli. Tabulku s přehledem klíčových slov (frází), na které návštěvníci na web přicházejí, znázorňuje Obr. 46.
Obr. 46 – Klíčová slova.
Zdroj: Autor. Vybrané statistiky by bylo vhodné blíže statisticky vyhodnotit. Již od pohledu je však
z výsledků zřejmé, že web neobsahuje pro návštěvníky zajímavé informace a je tedy vhodné upravit obsah. Jako rozumné řešení se jeví například častější psaní blogu.
Úspěšnost reklamy Google AdSense umístěné na webu nelze relevantně vyhodnotit,
jelikož je spojena s reklamní kampaní umístěnou na jiném webu.
88
9 Závěr V diplomové práci jsou předloženy hardwarové a softwarové požadavky, potřeby
uživatelů i faktory ovlivňující kvalitu webu. Na všechny tyto prvky je nezbytné brát ohled a tvořit web v souladu s nimi. To se však často neděje, při tvorbě webu není stanoven žádný postup a jednotlivé činnosti na sebe logicky nenavazují. Mnozí webmasteři se také odmítají zabývat bezbariérovostí nebo optimalizací pro vyhledávače, jelikož tyto činnosti považují za nadstavbu tvorby webu, která se jich netýká. Nově spouštěné weby pak nejsou kvalitní z pohledu uživatele ani vyhledávacího robota.
K úpravám webu často dochází až za provozu nebo vůbec. Pokud je provedena
kontrola stavu, která má vést k úpravě webu, je často vypracována analýza optimalizace pro vyhledávače a nikoliv analýza bezbariérovosti a „vhodnosti“ pro uživatele. Přitom webová prezentace je určena primárně uživatelům. Pokud jsou provedeny obě analýzy, téměř vždy jsou zpracovány odděleně a navzájem si protiřečí. Dochází tím k dvojímu pohledu na web a následně k jeho dvojím úpravám. To proto, že uživatel klade na web jiné nároky než vyhledávací robot a naopak.
V diplomové práci je předložena metodika tvorby a optimalizace webu, která logicky
navazuje jednotlivé kroky na sebe a zamezí i neúmyslnému vynechání některé důležité části. Metodika také předkládá možnosti spolupráce jednotlivých odborníků na dílčích krocích. Spolupráce je nezbytná proto, že nově vytvořený web musí být optimalizovaný již při svém spuštění. Předkládaná metodika upozorňuje i na nutnost pravidelných kontrol webu a je použitelná i pro úpravy z těchto kontrol vyplývající.
Ačkoliv předložená metodika byla ověřena na tvorbě webu, je zřejmé, že by při
uvedení do praxe doznala jistých změn. Hlavním problémem je rychlý vývoj celé oblasti tvorby webových prezentací. S tím souvisí také časté novinky nebo změny, které by bylo nutné do metodiky zapracovávat. Lze očekávat změny v metodikách vyhledávačů, zavedení nových postupů nebo zcela nových oborů. Je zřejmé, že v takové situaci je nezbytné udržovat metodiku aktuální.
Důležitým tématem k řešení jsou také náklady na web vytvářený podle předložené
metodiky. V této situaci automaticky vyvstává domněnka, že web tvořený podle této metodiky by byl dražší. Takové tvrzení je však mylné a dodavatel webů, který to tvrdí, buď chce na takové zakázce vydělat více peněz, nebo kvalitní web vyrábět neumí a chce se to naučit za peníze klienta. Jak již bylo řečeno, žádná z činností souvisejících s tvorbou webu podle předložené metodiky není nadstavbou, ale součástí procesu tvorby webové prezentace.
Opomenout nelze ani délku trvání projektu, která kvůli sériovému řazení úkolů
dosahuje 16 dní. Zkrátit tuto dobu by bylo možné s využitím stromové struktury metodiky a tedy paralelního řazení úkolů. Toto řešení však není vhodné, protože při plnění úkolů není jistota, že jsou souběžně vykonávané činnosti dokončeny bezchybně, a také není zajištěna plná soustředěnost a spolupráce pracovních zdrojů na všech úkolech. Vhodnější než hierarchická stromová struktura (paralelní procesy) se tedy jeví postup předložený v této práci. Délka trvání projektu je akceptovatelná vzhledem k tomu, že v procesu tvorby jsou zahrnuty také marketingové analýzy, testování přístupnosti a optimalizace pro vyhledávače.
89
Hlavním úskalím metodiky tvorby a optimalizace webové prezentace jsou tedy jednotlivci, kteří se na týmové tvorbě webu podílí. Všichni, především však webdesigneři musí pochopit, že zakomponování bezbariérovosti webu nebo optimalizace pro vyhledávače je v současné době součástí tvorby webu. Nerespektování těchto skutečností je v konečné fázi především špatnou vizitkou webdesignera, ale i celého pracovního týmu.
90
10 Seznam literatury [1] FORŠT, Jaroslav. Windows 95. Odpovědný redaktor: Zbyněk Žák. Praha: Grada
Publishing 1995. ISBN: 80-7169-249-2.
[2] KALBACH, James. Printing the Web. [online]. c2003. [citováno 2008-02-07]. Dostupné z: <http://www.boxesandarrows.com/view/printing_the_web/>.
[3] JANOVSKÝ, Dušan. Page-break-after. [online]. c2008. [citováno 2008-02-07]. Dostupné z: <http://www.jakpsatweb.cz/css/page-break-after.html>.
[4] Louis Braille. [online]. c2007. [citováno 2008-02-07]. Dostupné z: <http://cs.wikipedia.org/w/index.php?&oldid=3557808/>.
[5] OSTRODICKÝ, Jozef. Pohled do dějin slepeckého písma. [online]. [citováno 2008-02-07]. Dostupné z: <http://www.fi.muni.cz/usr/jkucera/pv109/2003/xostrod.htm>.
[6] VYSUŠIL, Jiří. ZRALÝ, Martin. Osobní počítače 1. díl. Praha: Dekon 1994. ISBN 80-85814-18-8
[7] POWEL, Thomas A. Web design – kompletní průvodce. Odpovědný redaktor: Libor Pácl. Brno: Computer Press 2004. ISBN: 80-722-6949-6.
[8] STANÍČEK, Petr. DOCTYPE a režimy prohlížečů. [online]. c2004. [citováno 2008-02-08].
Dostupné z: <http://wellstyled.com/html-doctype-and-browser-mode.html>.
[9] ŠPINAR, David. Tvoříme přístupné webové stránky. Odpovědný redaktor Miroslav Kučera. 1. vydání. Brno: Zonerpress 2004. 360 stran. ISBN 80-86815-11-0.
[10] Katalog – software pro zrakově postižené. [online]. [citováno 2008-02-07]. Dostupné z: <http://adaptech.cz/Katalog/katalog_software.php>.
[11] ŠPINAR, David. Hendikepovaní uživatelé Internetu. [online]. [citováno 2008-02-01]. Dostupné z: <http://pristupnost.nawebu.cz/texty/hendikepovani-uzivatele.php>.
[12] Standard klávesových zkratek. [online]. [citováno 2009-02-11]. Dostupné z: <http://www.ippi.cz/standard-klavesovych-zkratek/>.
[13] ŠPINAR, David. Školení tvorby přístupných webových stránek. [online]. c2005. [citováno 2008-02-01].
[14] SCHINDLER, Radek. Zrakové vady. [online]. c1999. [citováno 2008-02-01]. Dostupné z: <http://www.braillnet.cz/sons/docs/zrak/>.
[15] PAVLÍČEK, Radek. Blind Friendly Web – dokumentace zásad přístupnosti webových stránek pro uživatele s těžkým zdravotním postižením. [online]. c2005. [citováno 2008-02-01]. Dostupné z: <http://www.blindfriendly.cz/doc/bfw23.pdf>.
[16] KOPTA, Martin. Bezbariérový web. [online]. c2006. [citováno 2008-02-01].
[17] Epilepsie. [online]. c2008. [citováno 2008-02-01]. Dostupné z: <http://cs.wikipedia.org/w/index.php?&oldid=3786939/>.
[18] Blink. [online]. [citováno 2008-02-01]. Dostupné z: <http://www.jakpsatweb.cz/enc/blink.html>.
[19] Vyhledávače. [online]. c2008. [citováno 2008-02-01]. Dostupné z: <http://www.jakpsatweb.cz/vyhledavace.html>.
91
[20] Layout. [online]. [citováno 2009-02-01]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/layout.htm>.
[21] Informační architektura. [online]. [citováno 2008-02-08]. Dostupné z: <http://www.adaptic.cz/znalosti/informacni-architektura.htm>.
[22] APPELTAUER, Roman. Návrh struktury webu a navigace. [online]. c2007. [citováno 2008-02-05]. Dostupné z: <http://digiweb.ihned.cz/?&p=i00000_d&article [id]=20582460 &article[area_id]=10122300/>.
[23] WEINMANOVÁ, Lynda. Velká kniha webdesignu. Odpovědný redaktor: Miroslav Kučera. 1. vydání. Brno: Zoner Press 2004. ISBN: 80-86815-06-4.
[24] COLTER, Angela. Exploring User Mental Models of Breadcrumbs in Web Navigation. [online]. c2002. [citováno 2008-02-01].
[25] INSTONE, Keith. Location, Path and Attribute Breadcrumbs. [online]. c2004. [citováno 2008-02-01].Dostupné z: <http://user-experience.org/uefiles/ breadcrumbs/KEI-Breadcrumbs-IAS.pdf>.
[26] POLAKOVIČ, Jaroslav. Webdesign. [online]. [citováno 2008-02-01]. Dostupné z: <http://dero.name/webdesign.php>.
[27] HODBOĎ, Tomáš. Barvy a barevná schémata. [online]. [citováno 2008-02-08]. Dostupné z: <http://www.orisek.net/article/barvy-a-barevna-schemata/>.
[28] ŠIMEK, Pavel. Internet a web design. [online]. [citováno 2008-02-01]. Dostupné z: <http://kit.pef.czu.cz/~simek/ke_stazeni_netteacher/webdesign/ 01webdesign.ppt>.
[29] NIELSEN, Jakob. F-Shaped Pattern For Reading Web Content. [online]. c2006. [citováno 2008-02-05]. Dostupné z: <http://www.useit.com/alertbox/reading_pattern.html>.
[30] Copywriting – psaní textů pro web. [online]. [citováno 2008-02-05]. Dostupné z: <http://www.h1.cz/copywriting/>.
[31] Copywriting – úspěšné texty pro web a SEO. [online]. c2005. [citováno 2008-02-05]. Dostupné z: <http://www.artic-studio.net/internetovy-marketing/web-copywriting/>.
[32] ŠTRUPL, Václav. Píšeme texty pro web. [online]. c2004. [citováno 2008-02-05]. Dostupné z: <http://www.vaclavak.net/clanky/piseme-texty-pro-web/>.
[33] ŠTRUPL, Václav. Zvyšování návštěvnosti obsahem. [online]. c2005. [citováno 2008-02-05]. Dostupné z: <http://www.vaclavak.net/clanky/obsah-zvysovani-navstevnosti/>.
[34] PILAŘ, Alexander. Počítačové zkratky – kompletní kapesní průvodce. 1. vydání. Praha: Grada Publishing 1999. 236 stran. ISBN 80-7169-799-0.
[35] MIKLE, Pavel. DHTML – referenční příručka. 2. vydání. Brno: UNIS Publishing 2001. 168 stran. ISBN 80-86097-09-9.
[36] PROKOP, Marek. CSS pro webdesignery. Odpovědný redaktor: Miroslav Kučera. 1. vydání. Praha: Mobil Media 2003. ISBN 08-86593-35-5.
[37] JANOVSKÝ, Dušan. CSS styly – úvod. [online]. c2008. [citováno 2008-02-01]. Dostupné z: <http://www.jakpsatweb.cz/css/css-uvod.html>.
[38] Validita. [online]. [citováno 2008-02-08]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/validita.htm>.
92
[39] JANOVSKÝ, Dušan. Editory HTML stránek. [online]. c2008. [citováno 2008-02-08]. Dostupné z: <http://www.jakpsatweb.cz/editory.html>.
[40] MATĚJÍČEK, Vladimír. Co znamená přístupný web. [online]. c2006. [citováno 2008-02-05]. Dostupné z: <http://www.alfabet.cz:7783/pls/portal/AHS_ PROVIDER.rdh_apress_portlet.Show_Apress_Clanek?Id=36287/>.
[41] HOLZNER, Steven. ŠINDELÁŘ, Jan. RSS. Odpovědný redaktor: Martin Domes. 1. vydání. Brno: Computer Press 2006. ISBN 978-80-251-1479-7.
[42] SNÍŽEK, Martin. Jak navrhnout dobře použitelná URL. [online]. c2006. [citováno 2008-02-05]. Dostupné z: <http://www.snizekweb.cz/clanky/pouzitelna-url/>.
[43] WEIDA, Petr. SEO – Search Engine Optimalization. [online]. c2003. [citováno 2008-02-09].
Dostupné z: <http://interval.cz/clanky/seo-search-engine-optimization/>.
[44] Slovník pojmů. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.webmagazine.cz/slovnik-pojmu/>.
[45] JANOVSKÝ, Dušan. Meta tagy. [online]. c2005. [citováno 2008-02-09]. Dostupné z: <http://www.jakpsatweb.cz/meta-tagy.html>.
[46] PROKOP, Marek. Analyzujeme klíčová slova. [online]. c2003. [citováno 2008-02-05]. Dostupné z: <http://www.zive.cz/default.aspx?article=114974/>.
[47] Long tail (dlouhý ocas). [online]. [citováno 2009-02-28]. Dostupné z: <http://www.ataxo.cz/info/slovnik/long-tail/>.
[48] Zpětný odkaz. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/zpetny-odkaz.htm>.
[49] WEIDA, Petr. SEO – síla odkazů. [online]. c2005. [citováno 2008-02-09]. Dostupné z: <http://interval.cz/clanky/seo-sila-odkazu/>.
[50] PageRank. [online]. c2008. [citováno 2008-02-05]. Dostupné z: <http://cs.wikipedia.org/w/index.php?&oldid=3743147/>.
[51] JANOVSKÝ, Dušan. Google PageRank. [online]. [citováno 2008-02-05]. Dostupné z: <http://www.jakpsatweb.cz/seo/pagerank.html>.
[52] S-rank (Srank). [online]. [citováno 2008-02-09]. Dostupné z: <http://www.webhosting-domeny.info/seo/s-rank.php>.
[53] JANOVSKÝ, Dušan. K čemu je JyxoRank. [online]. c2003. [citováno 2008-02-09]. Dostupné z: <http://www.jakpsatweb.cz/clanky/jyxorank-vyznam.html>.
[54] WebRank. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.webhosting-domeny.info/seo/webrank.php>.
[55] JANOVSKÝ, Dušan. Reklamní systémy. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.jakpsatweb.cz/reklama/systemy.html>.
[56] HLAVENKA, Jiří. Internetový marketing. 1. vydání. Praha: Computer Press 2001. 158 stran. ISBN 80-7226-498.
[57] JANOVSKÝ, Dušan. Rozměry grafických reklamních formátů. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.jakpsatweb.cz/reklama/rozmery.html>.
93
[58] JANOVSKÝ, Dušan. Textové reklamy a model AIDA. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.jakpsatweb.cz/seo/aida.html>.
[59] Kontextová reklama. [online]. c2007. [citováno 2008-02-09]. Dostupné z: <http://cs.wikipedia.org/w/index.php?&oldid=3687716/>.
[60] Proklik. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/proklik.htm>.
[61] PPC. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ppc.htm>.
[62] CPC. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/cpc.htm>.
[63] CTR. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ctr.htm>.
[64] PPV. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ppv.htm>.
[65] CPT. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/cpt.htm>.
[66] PPT. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ppt.htm>.
[67] PPA. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ppa.htm>.
[68] JANOVSKÝ, Dušan. Úvod do Google AdSense. [online]. c2007. [citováno 2008-02-09]. Dostupné z: <http://www.adaptic.cz/znalosti/slovnicek/ppa.htm>.
[69] ŠVEC, Václav. Strategie. [online]. c2008. [citováno 2008-02-09]. Dostupné z: <https://moodle.czu.cz/file.php/1124/prednasky/7_8_prednaska.pdf>.
[70] ŠPINAR, David. SWOT analýza. [online]. c2007. [citováno 2008-02-09]. Dostupné z: <http://digiweb.ihned.cz/c4-10144100-20180250-i00000_d-firemni-
web-swot-analyza-7/>.
[71] HLAVENKA, Jiří. Dělejte byznys na Internetu. 1. vydání. Praha: Computer Press 2001. ISBN 80-7226-182-7.
[72] ŠPINAR, David. Analýzy návštěvnosti a efektivity webu. [online]. [citováno 2008-02-09]. Dostupné z: <http://www.h1.cz/att/MG427_4_navstevnost.ppt>.
[73] BRODSKÝ, Jan. Google Analytics v češtině. [online]. c2007. [citováno 2008-02-09]. Dostupné z: <http://google-cz.blogspot.com/2007/10/google-analytics-v-etin.html>.
[74] ROLNÝ, Marek. Jak postupovat při tvorbě webu. [online]. c2006. [citováno 2009-02-18]. Dostupné z: <http://www.web71.cz/clanky/10-jak-postupovat-pri-tvorbe-webu/>.
[87] FELCMAN, Martin. Postup při tvorbě webu. [online]. [citováno 2009-02-18]. Dostupné z: <http://www.felcman.cz/>.
[88] LEŠETICKÝ, Miloslav. Základní postup při tvorbě webu. [online]. c2005. [citováno 2009-02-18]. Dostupné z: <http://www.plavacek.net/webdesign.php>.
94
11 Přílohy
Příloha A – Zobrazovací modely prohlížečů
IE5/
Mac
Qui
rks
Qui
rks
ST
D
Qui
rks
ST
D
ST
D
ST
D
ST
D
IE6/
Win
Qui
rks
Qui
rks
ST
D
Qui
rks
ST
D
ST
D
ST
D
Qui
rks
NN
6,M
oz
Qui
rks
Qui
rks
ST
D
Qui
rks
Qui
rks
P-S
TD
ST
D
ST
D
Typ
dok
umen
tu p
odle
DT
D u
vede
né v
prv
ku D
OC
TY
PE
Bez
uve
dení
DT
D v
DO
CT
YP
E
HT
ML
3.2
a st
arší
, nap ř
. <
!DO
CT
YP
E H
TM
L P
UB
LIC
"-/
/W3C
//D
TD
HT
ML 3
.2 F
inal//
EN
">
Vše
chny
str
iktn
í HT
ML
4.x,
např
. <
!DO
CT
YP
E H
TM
L P
UB
LIC
"-/
/W3C
//D
TD
HT
ML 4
.01//E
N"
"h
ttp://w
ww
.w3.o
rg/T
R/h
tml4
/str
ict.dtd
">
Vše
chny
přec
hodo
vé H
TM
L 4.
x be
z ud
ání U
RL,
např.:
<!D
OC
TY
PE
HT
ML P
UB
LIC
"-/
/W3C
//D
TD
HT
ML 4
.0
Tra
nsi
tional//
EN
">
Pře
chod
ové
HT
ML
4.0
s U
RL,
např.
: <
!DO
CT
YP
E H
TM
L P
UB
LIC
"-/
/W3C
//D
TD
HT
ML 4
.0 T
ransi
tio
nal//
EN
" "h
ttp://w
ww
.w3.o
rg/T
R/h
tml4
/loose
.dtd
">
Pře
chod
ové
HT
ML
4.01
s U
RL,
např.
: <
!DO
CT
YP
E H
TM
L P
UB
LIC
"-/
/W3C
//D
TD
HT
ML 4
.01
Tra
nsi
tional//
EN
" "h
ttp://w
ww
.w3.o
rg/T
R/h
tml4
/loose
.dtd
">
Str
iktn
í XH
TM
L 1.
0 be
z de
klar
ace
XM
L, n
ap ř.:
<!D
OC
TY
PE
htm
l PU
BLIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 S
tric
t//E
N"
"http://w
ww
.w3.o
rg/T
R/x
htm
l1/D
TD
/xhtm
l1-s
tric
t.dtd
">
Str
iktn
í XH
TM
L 1.
0 s
dekl
arac
í XM
L, n
apř.:
<
?xm
l vers
ion=
"1.0
" enco
din
g=
"UT
F-8
"?>
<
!DO
CT
YP
E h
tml P
UB
LIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 S
tric
t//E
N"
"http://w
ww
.w3.o
rg/T
R/x
htm
l1/D
TD
/xhtm
l1-s
tric
t.dtd
">
95
IE5/
Mac
ST
D
ST
D
Zdr
oj: <
http
://w
ells
tyle
d.co
m/h
tml-d
octy
pe-a
nd-b
row
ser-
mod
e.ht
ml>
.
IE6/
Win
ST
D
Qui
rks
NN
6,M
oz
P-S
TD
P-S
TD
Typ
dok
umen
tu p
odle
DT
D u
vede
né v
prv
ku D
OC
TY
PE
Pře
chod
ové
XH
TM
L 1.
0 b
ez d
ekla
race
XM
L, n
apř.:
<!D
OC
TY
PE
htm
l PU
BLIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 T
ransi
tional//
EN
" "h
ttp://w
ww
.w3.o
rg/T
R/x
htm
l1/D
TD
/xhtm
l1-t
ransi
tiona
l.dtd
">
Pře
chod
ové
XH
TM
L 1.
0 s
dek
lara
cí X
ML,
např.:
<?xm
l vers
ion=
"1.0
" enco
din
g=
"UT
F-8
"?>
<
!DO
CT
YP
E h
tml P
UB
LIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 T
ransi
tional//
EN
" "h
ttp://w
ww
.w3.o
rg/T
R/x
htm
l1/D
TD
/xhtm
l1-t
ransi
tiona
l.dtd
">
96
Příloha B – Best Practice – Pravidla pro tvorbu přístupného webu Pravidla přístupného webu pro účely novely Zákona č. 365/2000 Sb. o informačních systémech veřejné správy, provedené zákonem č. 81/2006 Sb. Kapitola A: Obsah webových stránek je dostupný a čitelný 1. Každý netextový prvek nesoucí významové sdělení musí mít svou textovou
alternativu. 2. Multimediální prvky nesoucí významové sdělení musí být doplněny textovými
titulky, jestliže nejsou jen alternativou k existujícímu textovému obsahu. 3. Pokud to charakter webových stránek nevylučuje, informace sdělované
prostřednictvím skriptů, objektů, appletů, kaskádových stylů, cookies a jiných doplňků na straně uživatele, musí být dostupné i bez kteréhokoli z těchto doplňků a stránky musí být standardně ovladatelné. V opačném případě sdělí orgán veřejné správy tyto informace jiným způsobem.
4. Informace sdělované vizuální podobou webových stránek, tvary jednotlivých prvků, jejich velikostí, pořadím nebo umístěním musí být dostupné i v případě, že uživatel nemůže tyto aspekty vnímat.
5. Informace sdělované barvou musí být dostupné i bez barevného rozlišení. 6. Barvy popředí a pozadí textu (nebo textu v obrázku) musí být vůči sobě dostatečně
kontrastní, jestliže text nese významové sdělení. 7. Velikost písma musí být možné zvětšit alespoň na 200 % a zmenšit alespoň na 50 %
původní hodnoty pomocí standardních funkcí prohlížeče. Při takové změně velikosti nesmí docházet ke ztrátě obsahu nebo funkcionality.
Kapitola B: Práci s webovou stránkou řídí uživatel 8. Obsah ani kód webové stránky nesmí předpokládat ani vyžadovat konkrétní výstupní
či ovládací zařízení. 9. Obsah ani kód webové stránky nesmí předpokládat ani vyžadovat konkrétní způsob
použití ani konkrétní programové vybavení. Pokud je předpokládáno či vyžadováno konkrétní programové vybavení, může to být pouze z důvodu technické nerealizovatelnosti přizpůsobení obsahu a kódu webové stránky všem programovým vybavením.
10. Načtení nové webové stránky či přesměrování musí být možné jen po aktivaci odkazu nebo po odeslání formuláře.
11. Načtení nové webové stránky do nového okna prohlížeče musí být možné jen v odůvodněných případech a uživatel na to musí být předem upozorněn.
12. Na webové stránce nesmí docházet rychleji než třikrát za sekundu k výrazným změnám barevnosti, jasu, velikosti nebo umístění prvku.
13. Zvuk, který zní na webové stránce déle než tři sekundy, musí být možné na této webové stránce vypnout nebo upravit jeho hlasitost.
14. Časový limit pro práci s webovou stránkou musí být dostatečný. Pokud to nevylučuje charakter webové stránky, může uživatel časový limit prodloužit nebo vypnout.
Kapitola C: Informace jsou srozumitelné a přehledné 15. Webové stránky musí sdělovat informace jednoduchým jazykem a srozumitelnou
formou, pokud to charakter webové stránky nevylučuje.
97
16. Rozsáhlé obsahové bloky musí být rozděleny do menších výstižně nadepsaných celků.
17. Bloky obsahu, které se opakují na více webových stránkách daného orgánu veřejné správy, je možné přeskočit. Pokud webové stránky nemají velký rozsah, nemusí být zajištěno přeskočení opakujících se bloků obsahu.
Kapitola D: Ovládání webu je jasné a pochopitelné 18. Navigace musí být srozumitelná a konzistentní a na všech webových stránkách
orgánu veřejné správy obdobná. Od ostatního obsahu webové stránky musí být zřetelně oddělena.
19. Každá webová stránka (kromě úvodní webové stránky) musí obsahovat odkaz na vyšší úroveň v hierarchii webových stránek a odkaz na úvodní webovou stránku.
20. Pokud se jedná o rozsáhlejší webové stránky, musí být kromě navigace k dispozici rovněž vyhledávání nebo odkaz na mapu webových stránek. Odkaz na mapu webových stránek nebo vyhledávací formulář musí být k dispozici na každé webové stránce.
21. Každá webová stránka musí mít výstižný název odpovídající jejímu obsahu. 22. Každý formulářový prvek musí mít popisek vystihující požadovaný obsah. 23. Pokud uživatel učiní chybu při vyplňování webového formuláře, musí být k dispozici
informace o tom, ve které položce je chyba. Pokud to charakter webového formuláře nevylučuje, musí být k dispozici rovněž informace, jak tuto chybu odstranit.
24. Text odkazu nebo jeho přímo související text musí výstižně popisovat cíl odkazu. Jestliže odkaz vede na jiný typ souboru, než je webová stránka, musí být odkaz doplněn sdělením o typu, případně o velikosti tohoto souboru.
25. Každý rám musí mít vhodné jméno či popis vyjadřující jeho smysl a funkčnost. Kapitola E: Kód je technicky způsobilý a strukturovaný 26. Sémantické značky, které jsou použity pro formátování obsahu, musí být použity ve
zdrojovém kódu tak, aby odpovídaly významu obsahu. 27. Prvky značkovacího jazyka, které jsou párové, musí mít vždy uvedenu počáteční
a koncovou značku. Značky musí být správně zanořeny a nesmí docházet k jejich křížení.
28. Ve zdrojovém kódu musí být určen hlavní jazyk obsahu webové stránky. 29. Prvky tvořící nadpisy a seznamy musí být korektně vyznačeny ve zdrojovém kódu
a musí být výstižné. 30. Je-li tabulka použita pro zobrazení tabulkových dat, musí obsahovat značky pro
záhlaví řádků nebo sloupců. 31. Obsah všech tabulek musí dávat smysl čtený po řádcích zleva doprava. Kapitola F: Prohlášení o přístupnosti webových stránek 32. Každá webová stránka musí vždy obsahovat prohlášení o tom, že forma uveřejnění
informací je v souladu s touto vyhláškou (prohlášení o přístupnosti) nebo odkaz na toto prohlášení.
33. Pokud orgán veřejné správy některá z podmíněně povinných pravidel uvedených pod čísly položek 3, 9, 14, 15, 17, 20 a 23 v souladu s uvedenou podmínkou neuplatní, musí uveřejnit tuto informaci v prohlášení o přístupnosti, a to jejich číselným výčtem, včetně příslušného odůvodnění.
Zdroj: <http://www.pravidla-pristupnosti.cz/>.
98
Příloha C – Blind Friendly Web
Pravidla s nejvyšší prioritou 1. Grafické objekty, které slouží k ovládání stránky, mají definovanou textovou
alternativu. 2. Informace, sdělované prostřednictvím skriptů, objektů, appletů, kaskádových stylů,
obrázků a jiných doplňků na straně uživatele jsou dostupné i bez kteréhokoli z těchto doplňků.
3. Všechny tabulky dávají smysl čtené po řádcích. 4. Klikací mapy jsou vytvořeny tak, že jsou přístupné pro zrakově postižené. 5. Obsah WWW stránky se mění, jen když uživatel aktivuje nějaký prvek. 6. Rámy jsou vytvořeny tak, že jsou přístupné pro zrakově postižené. 7. Označení každého odkazu výstižně popisuje jeho cíl i bez okolního kontextu. 8. Informace sdělované barvou jsou dostupné i bez barevného rozlišení. 9. Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není použit vzorek,
který snižuje čitelnost. 10. Předpisy určující velikost písma nepoužívají absolutní jednotky. 11. Kód webových stránek odpovídá nějaké zveřejněné finální specifikaci jazyka HTML
či XHTML. Neobsahuje syntaktické chyby, které je správce webových stránek schopen odstranit.
12. Na webové stránce nebliká nic rychleji než jednou za sekundu. 13. Prvky tvořící nadpisy a seznamy jsou korektně vyznačeny ve zdrojovém kódu.
Prvky, které netvoří nadpisy či seznamy, naopak ve zdrojovém kódu takto vyznačeny nejsou.
14. Každý formulářový prvek má přiřazen výstižný nadpis.
Pravidla se střední prioritou 1. Všechny netextové prvky nesoucí významové sdělení mají textovou alternativu. 2. Webová stránka uvádí své hlavní sdělení na svém začátku. 3. Každá webová stránka má smysluplný název, vystihující její obsah. 4. Uživatel je předem jasně upozorněn, když odkaz vede na obsah jiného typu, než je
webová stránka. Takový odkaz je doplněn sdělením o typu a velikosti cílového souboru.
5. Nová okna se otevírají jen v odůvodněných případech a uživatel je na to předem upozorněn.
Pravidla s nejnižší prioritou 1. Důležité navigační prvky mají přiřazenu horkou klávesu. 2. Dokumenty, které jsou na webu v jiných formátech než HTML, jsou přístupné
i v tomto formátu. 3. Tabulky jsou zrakově postiženým lépe zpřístupněny. 4. ASCII art, zkratky a smajlíky jsou zrakově postiženým zpřístupněny. 5. Z každé stránky webu vede odkaz na prohlášení, vymezující míru přístupnosti
a obsahující popis ovládání webu. 6. V textu je vyznačena změna použitého jazyka.
99
Zběžná kontrola přístupnosti stránky 1. V prohlížeči vypněte zobrazování grafických objektů. 2. V prohlížeči vypněte zpracování prvků nad rámec HTML (Javascript, Java, CSS
atd.). 3. Načtěte stránku do prohlížeče pracujícím v textovém režimu (např. LYNX). 4. Pomocí schránky zkopírujte textový obsah stránky do jednoduchého editoru. 5. Zkuste provést navigaci pouze pomocí klávesnice. 6. Různým způsobem pozměňujte velikost okna prohlížeče a nastavené rozlišení
obrazovky. 7. Nastavte nestandardní kombinaci barev a velikosti písma systémového prostředí
a prohlížeče. Zdroj: <http://www.blindfriendly.cz/doc/bfw.php>.
