Optimalizace webové prezentace

Mendelova zemědělská a lesnická univerzita v Brně Provozně ekonomická fakulta Optimalizace webové prezentace Bakalářská práce Vedoucí práce: Ing. František Dařena, Ph.D. Aleš Bžatek 2009

Rád bych touto cestou poděkoval vedoucímu práce panu Ing. Františkovi Dařenovi, Ph.D. za metodické vedení, cenné rady a připomínky, které mi poskytl během zpracovávání této bakalářské práce.

Prohlašuji, že jsem tuto bakalářskou práci na téma Optimalizace webové prezentace vyřešil samostatně s použitím zdrojů a literatury, které uvádím v závěru práce. V Brně dne......

5 Abstract Bžatek, A. Web site optimization. Bachelor thesis. Brno, 2009. This bachelor thesis describes the problem of web site optimization considering its usability and accessibility as well as suitability for marketing purposes (i.e. search engines). It maps common standards and recommendations every web designer should keep in mind. The thesis demonstrates the principles on a real web presentation as an example. Keywords web site optimization, internet marketing, SEO, SEM, accessability Abstrakt Bžatek, A. Optimalizace webové prezentace. Bakalářská práce. Brno, 2009. Závěrečná práce se zabývá problémem optimalizace webové prezentace nejen pro marketingové účely (zejména se jedná o různé vyhledávače), ale také hledisky usnadnění práce jejich uživatelům. Mapuje standardy a doporučení, kterých by se měl každý programátor při tvorbě moderního webu držet. Součástí práce je analýza vybrané webové prezentace na níž jsou demonstrovány optimalizační změny. Klíčová slova optimalizace webu, internetový marketing, SEO, SEM, přístupnost

OBSAH 6 Obsah 1 Úvod a cíl práce 7 1.1 Úvod do problematiky..................................... 7 1.2 Cíl práce............................................. 8 2 Přehled literatury a pramenů 9 2.1 Současný stav.......................................... 9 2.2 Webové standardy....................................... 9 2.3 Použitelnost........................................... 11 2.4 Přístupnost........................................... 12 2.5 Optimalizace pro vyhledávače................................ 15 2.5.1 Optimalizace stránky ve zdrojovém kódu (on-page optimalizace)...... 18 2.5.2 Optimalizace okolí (off-page optimalizace).................... 19 2.5.3 Nepovolené praktiky (Black Hat SEO)...................... 20 3 Metodika řešení 21 4 Vlastní řešení 23 4.1 Analýza.............................................. 23 4.2 Vzhled stránek......................................... 28 4.2 Standardy a zvolené technologie............................... 28 4.3 Přístupnost........................................... 29 4.4 Klíčová slova a jejich užití................................... 30 4.5 Optimalizace dalších faktorů ovlivňujících vyhledávání................ 32 4.6 Sémantika............................................ 33 4.7 Další optimalizace....................................... 35 5 Diskuse a závěr 37 6 Seznam použité literatury 38 Přílohy 40 A Ukázka zdrojového kódu 41 B Podrobné statistiky návštěvnosti 43 C Další vybrané statistiky 46

1 ÚVOD A CÍL PRÁCE 7 1 Úvod a cíl práce 1.1 Úvod do problematiky S rozvojem lidské společnosti v posledních dvou desetiletích můžeme sledovat i výrazný technický pokrok zejména v oblasti nových technologií. Bez současných informačních a komunikačních technologií si již málokdo dokáže představit svůj život. Mobilní telefony či počítače se staly naší každodenní součástí nejen díky rychlému přístupu k informacím, ale také snadné dostupnosti. Ještě před dvaceti lety byla komunikace na delší vzdálenosti jak časově, tak i finančně velice náročná. Dnes je tomu jinak. Velkou měrou se na rozvoji této skutečnosti podílel právě Internet. Internet je celosvětový systém navzájem propojených počítačových sítí, které spojují jeho jednotlivé síťové uzly. Uzlem může být počítač, ale i specializované zařízení, například router. Každý počítač připojený k Internetu má v rámci rodiny protokolů TCP/IP svoji IP adresu. Pro snadnější zapamatování se místo IP adres používají doménová jména. (Wikipedie, 2009). První zmínky o Internetu se datují od roku 1946, kdy Murray Leinster publikoval sci-fi povídku s názvem A Logic Named Joe, kde můžeme najít náznak počítače a s ním spojené centrální sítě informací. Avšak oficiální počátek Internetu se připisuje agentuře ministerstva obrany USA ARPA (Advanced Research Projects Agency), která 29. října 1969 zprovoznila síť ARPANET. Vznik decentralizované sítě, kdy výpadek jedné části neohrozil fungování celku, byl jedním z důvodů úspěchu a následného rozšíření o další uzly. Z počátku devadesátých let dvacátého století se objevuje Internet i v našich zemích. Od té doby prošel značným vývojem a dle výzkumu společností NetMonitor SPIR Mediaresearch & Gemius (2009, s. 1) čítala v únoru roku 2009 internetová populace ČR 1 téměř 5 milionů uživatelů. Asi nejvyužívanější v rámci celé sítě je protokol HTTP a jeho aplikace World Wide Web. Jedná se o systém dokumentů propojených pomocí hypertextových odkazů. Z marketingového hlediska se stal web silným mediem a společnosti prezentující se vhodným způsobem na Internetu získávají náskok před konkurencí. Důvodem zvyšující se popularity byla i jednoduchost původního jazyka pro tvorbu hypertextových dokumentů HTML a existence mnoha WYSIWYG 2 editorů, což mělo za následek, že i průměrný počítačový uživatel dokázal vytvořit a následně umístit webovou stránku na Internet. Bez znalosti základních pouček a standardů se Internet přeplnil nejrůznějšími paskvily omezující uživatele např. s odlišným internetovým prohlížečem než je Microsoft Internet Explorer, pomalejší konektivitou či jiným rozlišením obrazovky než měl tvůrce webu. 1 Počet návštěvníků (reálných uživatelů) vybraného média ve věku 12-79 let, kteří alespoň jednou v posledním měsíci navštívili Internet. 2 WYSIWYG je akronym anglické věty What you see is what you get, česky co vidíš, to dostaneš. Tato zkratka označuje způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu. WYSIWYG editory webových stránek umožňují jejich rychlejší tvorbu, aniž by vyžadovaly hlubší znalost jazyka HTML. (Wikipedie, 2009)

1 ÚVOD A CÍL PRÁCE 8 1.2 Cíl práce Tato bakalářská práce si klade za cíl navrhnout možnosti optimalizace webové prezentace z hlediska standardů, nových technologií a doporučení. Zaměří se zejména na postupy, které usnadňují nejen návštěvníkům práci s webovými stránkami, ale také vyhledávačům a jiným robotům v přístupu k požadovaným informacím. Součástí práce bude analýza vybrané webové prezentace na které budou demonstrovány nejčastější chyby, kterých se programátoři při tvorbě internetových stránek dopouštějí. V závěru práce proběhne zhodnocení zjištěných postupů a navržených změn.

2 Přehled literatury a pramenů 9 2 Přehled literatury a pramenů 2.1 Současný stav Tvorba webové prezentace je komplexní činnost, při které musí tvůrce dbát na dodržování standardů, obecných pouček či doporučení. Ne každý si je těchto postupů vědom a mnohdy vznikají stránky, které omezují určitou skupinu uživatelů. Návštěvník, kterému se špatně zobrazí webová prezentace, ztrácí zájem a stránky opouští. Chceme-li uživatele na našich stránkách udržet či přilákat další návštěvníky, je třeba prezentaci vhodně upravit. Každý tvůrce kvalitních webových stránek by měl znát a dodržovat postupy, které jsou v této práci prezentovány. 2.2 Webové standardy Konsorcium World Wide Web bylo vytvořeno v říjnu 1994 za účelem plného využití potenciálu World Wide Web pomocí vývoje společných protokolů, které prosazují jeho rozvoj a zajišťují jeho univerzálnost. W3C je organizace s okolo 400 členy na celém světě a pro své příspěvky k růstu webu si získala mezinárodní věhlas. Konsorcium, které založil Tim Berners-Lee, je zodpovědné za webové standardy, které tvoří dnešní web. (Cederholm, 2004, s. 17) Podle Cederholma (2004, s. 18) používání standardů vede k následujícím výhodám: Redukce rozsahu kódu méně kódu znamená rychlejší stránky. Méně kódu také znamená více kapacity na serveru, což zase znamená méně peněz vynaložených na místo na serveru a na šířku přenosového pásma. 3 Větší oddělení obsahu od vzhledu použitím CSS ke kontrole designu webového serveru se usnadní aktualizace a případné změny designu. Změny v rozsahu celých webových serverů lze učinit okamžitě pouhou aktualizací jediného seznamu stylů. Vylepšená přístupnost webové standardy nám umožňují dosáhnout zobrazení na největším možném počtu prohlížečů a zařízení. Obsah lze snadno přečíst v jakémkoliv prohlížeči, mobilním telefonu, PDA nebo pomocí jakéhokoliv pomocného softwaru. Dopředná kompatibilita vytvářením stránek za pomoci webových standardů zabezpečuje jejich čitelnost v budoucnosti. Nevýhodou při dodržování standardů neustále zůstává špatná podpora ve starších verzích nejpoužívanějších prohlížečů (zejména se jedná o Internet Explorer). S novými verzemi se situace zlepšuje, ale stále se ještě může stát, že validní kód se ve všech prohlížečích nezobrazí totožně. Stručný přehled doporučení, které W3C vydalo a které tedy tvoří normativní rámec standardizovaného webu (Prokop, 2002): (X)HTML značkovací jazyk HTML (Hypertext Markup Language), prodělal nejprve živelný vývoj završený verzí HTML 4 (poprvé publikována v prosinci 1997, poslední re- 3 CSS je zkratka pro anglický název Cascading Style Sheets, česky tabulky kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. (Wikipedie, 2009)

2 Přehled literatury a pramenů 10 vize pod označením HTML 4.01 je z prosince 1999). V HTML 4.01 se skrývají tři normy (přesněji tři typy dokumentů) striktní (Strict), přechodná (Transitional) a speciální definice rámců (Frameset). V lednu 2000 získala status doporučení verze 1.0 jazyka XHT- ML (extensible Hypertext Markup Language). Účelem i významovým rozsahem se jedná o HTML 4.01, řídí se však syntaktickými pravidly XML. Modularizovaná verze XHTML vstoupila v platnost v květnu 2001 pod označením XHTML 1.1. CSS zatímco (X)HTML je primárně určeno pro popis struktury dokumentu, CSS (Cascading Style Sheets) je jazyk pro definici stylu. Správnou kombinací obou lze tedy dosáhnout oddělení prezentace od struktury, což zjednodušuje tvorbu, správu a přístupnost webových dokumentů. Existují dvě verze CSS. První (CSS Level 1) byla uvedena v prosinci 1996 a je dnes již téměř stoprocentně podporována všemi moderními prohlížeči. Druhá verze (CSS Level 2, zkráceně CSS2) vyšla v květnu 1998 a kromě vizuální podoby dokumentů umožňuje definovat i styl dokumentu pro další média (hlasový výstup, tisk, atd.). XML (extensible Markup Language) bývá označováno za webový jazyk nové generace. DOM (Document Object Model) představuje standardizované programátorské rozhraní pro přístup ke struktuře, stylu a událostem dokumentu. MathML jazyk na bázi XML určený pro reprezentaci matematických výrazů na webu. PNG (Portable Network Graphics) rozšiřitelný souborový formát pro ukládání rastrových (bitmapových), neztrátově komprimovaných obrázků. Vznikl v roce 1996 jako volná náhrada populárního formátu GIF. WebCGM vychází z CGM (Computer Graphics Metafile), což je standardní ISO formát pro vektorové a složené vektorově rastrové obrázky. CGM se používá například pro technické výkresy. SVG (Scalable Vector Graphics) jazyk pro popis vektorové grafiky a animací. Je založen na XML, takže může být editován běžnými textovými editory a integrován do koncepce sémantického webu. SMIL (Synchronized Multimedia Integration Language) určen pro tvorbu synchronizovaných multimediálních webových prezentací. RDF (Resource Description Framework) na XML založený jazyk, poskytující základní aparát pro připojování metainformací k obecně jakémukoli informačnímu zdroji na webu. PICS (Platform for Internet Content Selection) popisuje mechanismus, s jehož pomocí mohou uživatelé vybírat a filtrovat příslušně označený webový obsah (například zabránit zobrazení nevhodného obsahu dětem). První verze specifikace pochází z října 1996, poslední z května 1998. XML-Signature definuje rámec pro elektronické podepisování dokumentů na webu. P3P (Platform for Privacy Preferences) poskytuje standardní, na XML založený rámec pro zajištění ochrany osobních informací na webu. WCAG (Web Content Accessibility Guidelines) metodika tvorby a testování webových stránek přístupných uživatelům se zdravotními či jinými hendikepy. V lednu roku 2008 byla zveřejněna nová verze HTML5 a jeho XHTML varianta XHT- ML5. Oproti předchozím verzím (HTML 4/XHTML 1.x) byly přidány nové elementy, tagy

2 Přehled literatury a pramenů 11 a atributy usnadňující práci např. s multimedii. Vynechány byly problémové elementy center, font a strike. Bohužel tato verze ještě není v současné době podporována všemi prohlížeči, takže optimalizace webu pro jazyk (X)HTML5 nemá zatím opodstatnění. Nástupce posledních kaskádových stylů, CSS 3, je stále ještě ve fázi vývoje 4. Skutečnost zda je stránka vytvořena v souladu s výše uvedenými standardy lze ověřit např. pomocí W3C validátoru (http://validator.w3.org/). Existuje i česká verze (http:// validator.w3.cz/), která je nadstavbou W3C validátoru (zdrojový kód kontroluje důsledně a upozorňuje na více nedostatků), jehož nevýhodou je špatná analýza XHTML stránek. Chyba je především v použití HTML parseru na XHTML kód. 2.3 Použitelnost Použitelnost webových stránek určuje, jak snadno se na nich uživatelé orientují, jak rychle pochopí jejich uspořádání a ovládání a jaký dojem si z nich odnesou. Dobře použitelné stránky jsou přehledné, srozumitelné a intuitivní. Na špatně použitelných stránkách uživatelé tápou, nedokáží dosáhnout svého cíle a odcházejí z nich zklamaní. Použitelnost má největší význam u komerčních stránek. Návštěvníci sem přicházejí pro informace o zboží či službách a podle nich si vybírají a objednávají. Nejsou-li stránky perfektně použitelné, značná část uživatelů potřebné informace nenajde, nedokáže se v nabídce orientovat, nezvládne správně vyplnit a odeslat objednávku. I ty nejmenší detaily hrají svou roli - volba slov v navigačním menu, grafické odlišení odkazů, rozmístění obsahu na stránce, velikost písma a desítky dalších. (H1.cz, 2008) Dobrá použitelnost stránek znamená, že uživatelům (čtenářům) se podaří na webu udělat to, co chtějí (např. najít informaci, pro kterou přišli, přečíst si novinky, atd.), dokáží to v rozumném čase, dokáží to bez chyb a zásadních zklamání. Klíče použitelnosti: ( Janovský, 2003) Jednoduchost překombinované webové stránky ať už graficky či funkčně mnohdy návštěvníka odradí a odchází. Standardní ovládání, běžné na většině webů uživatel předpokládá umístění loga či hlavního nápisu v levém horním rohu, horizontální a vertikální navigaci v horní resp. levé části stránky apod. Nenucenost uživatele přemýšlet neví-li uživatel v jaké části stránek se nachází, na jaké odkazy klikl a ztratí se, zpravidla na stránky zanevře a příště se již nevrátí. Často se stává, že se návštěvníkovi otevře odkaz do nového okna, on si jej nevšimne a rychle ztrácí přehled. Testování použitelnosti obvykle provádí laická veřejnost, kdy je vybrána cílová skupina 5 10 uživatelů, kteří dostávají různé úkoly a na základě jejich pozorování se vyvodí závěry a následně se webové stránky přepracují. Je dokázáno, že 5 testovacích uživatelů odhalí více než 80 % možných problémů. 4 Aktuální stav prací na třetí verzi kaskádových stylů lze sledovat na webové adrese konsorcia W3C http://www.w3.org/style/css/current-work#table

2 Přehled literatury a pramenů 12 2.4 Přístupnost Přístupnost lze zařadit jako jednu z podsložek použitelnosti zaměřenou především na postižené uživatele. Dle Špinara (2004, s. 11 12) pod pojmem přístupnost (v angličtině accessibility ) lze chápat takový stav, kdy daná věc neklade svým uživatelům při používání žádné zásadní překážky. Přístupnou budovu mohou tedy například používat vozíčkáři a přístupný web zase například slabozrací. Synonymem pro přístupnost může být slovo bezbariérovost. Přístupná webová stránka je 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. Přístupnost vychází ze samotných základů webu a nejde o žádnou nadstavbu. Za to, že dnes mají bezbariérovost a web k sobě tak daleko, mohou jen a pouze tvůrci www stránek, kteří odvádějí špatně svoji práci. První významná pravidla tvorby přístupného webu vznikají na začátku roku 1999, kdy konsorcium W3C zveřejnilo metodiku Web Content Accessibility Guidelines 1.0 (WCAG 1.0). Specifikace obsahující 14 pravidel byla uznána za platný standard a doporučení při tvorbě webových stránek. Další metodika vzniká na americké půdě v roce 2000 a tím je prováděcí předpis Section 508 k zákonu Rehabilitation Act, jež stanovil povinnost federálních orgánů poskytovat bezbariérové informace. V České republice byla téhož roku sepsána Dokumentace zásad přístupnosti webových stránek pro těžce zrakově postižené uživatele (označována také jako Blind Friendly Web). Později, v roce 2004, vzniká metodika za přispění Ministerstva informatiky ČR, organizace SONS 5 a dalších specialistů s názvem Pravidla pro tvorbu přístupného webu. V současnosti je nejuznávanější metodikou tvorby bezbariérových webových stránek v ČR. O tři roky později se těmto pravidlům dostává aktualizace, byla zahrnuta nová celosvětová doporučení (WCAG 2.0) a na základě rozsáhlého výzkumu a zkušeností byly některé části přepracovány. Handicapových uživatelů, tedy všech uživatelů, u kterých existuje rozumný důvod se domnívat, že s některými bariérami na webu budou mít potíže, totiž může být až třetina z celkového počtu uživatelů. Je důležité si uvědomit, že handicapovaným uživatelem webu nejsou jen zdravotně postižení, ale všichni ti, kteří mohou mít problém vnímat obsah webu a ovládat jeho funkčnost (např. osoby s malou zkušeností s Internetem nebo s jiných technickým a programovým vybavením). Handicapované uživatele Internetu lze rozdělit do pěti skupin: (Špinar, 2004, s. 29) zrakově postižení uživatelé, sluchově postižení uživatelé, pohybově postižení uživatelé, uživatelé s poruchami učení a soustředění, uživatelé s alternativními zobrazovacími zařízeními. Důvodů proč je vhodné mít svůj web přístupný je hned několik: (Špinar, 2004, s. 14; Špinar, 2007; Matějíček, 2007) Více obchodních příležitostí víc uživatelů, kteří mohou danou webovou stránku použít, vytváří více obchodních příležitostí. Například v Evropské unii žije více než 37 miliónů lidí s handicapem a jejich počet se, díky stárnoucí populaci, neustále zvyšuje. 5 Sjednocená organizace nevidomých a slabozrakých

2 Přehled literatury a pramenů 13 Lepší viditelnost webu přístupný web je zároveň také tzv. robot-friendly. Je tedy přístupný i robotům, které používají vyhledávače při procházení a indexování webových stránek. Lepší použitelnost webu použitelný web ja takový web, který se návštěvníkům dobře používá. Kde se dobře orientují, rychle naleznou to, co hledají. Kde se neztrácí, nedělají zbytečné chyby. Jsou to weby, ze kterých mají uživatelé dobrý pocit. Posilování dobrého jména tento efekt vychází z toho, že v moderním západním typu společnosti je diskriminace kohokoliv amorální a ten, kdo se jí dopouští, bývá vnímán velmi negativně. Ačkoliv se v rámci naší republiky k tomuto modelu teprve blížíme, náznaky jsou patrné už nyní. Tím, že webová stránka jasně deklaruje, že nikoho nediskriminuje, dává velmi pozitivní signál o své solidnosti a vzbuzuje ve veřejnosti pozitivní emoce. Soulad se zákony mnoho zemí si již uvědomilo, že diskriminovat kohokoliv není etické a spolehnout se na komerční efekt přístupnosti je velmi nejisté, a přístupnost ukotvilo ve svých právních řádech. Zákony se v jednotlivých zemích samozřejmě liší. Příkladem takových zemí jsou např. Spojené státy, Velká Británie či Německo. V České republice nebyla do roku 2007 přístupnost webu řízena žádnou zákonnou úpravou. Podle zákona č. 106/1999 Sb. 6, o svobodném přístupu k informacím, jsou subjekty povinnými poskytovat informace vztahující se k jejich působnosti podle tohoto zákona státní orgány a orgány územní samosprávy. Strukturu informací zveřejňovaných povinnými subjekty stanovuje Vyhláška č. 442/2006 7. Takto poskytované informace jsou součástí standardizace v oblasti poskytování povinných informací. Od 1. 1. 2008 vstoupila v platnost novela zákona č. 365/2000 Sb. 8, o informačních systémech veřejné správy, která sice zmiňuje povinnost uveřejňování (informací povinných subjektů) ve formě, která umožňuje, aby se s těmito informacemi v nezbytném rozsahu mohly seznámit i osoby se zdravotním postižením, ale za nedodržení této povinnosti nedefinuje sankce, ani nestanovuje orgán provádějící kontrolu naplnění dikce zákona. Nová pravidla přístupného webu pro účely novely Zákona č. 365/2000 Sb. o informačních systémech veřejné správy, provedenou zákonem č. 81/2006 Sb.: (Špinar a Pavlíček, 2006) 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 6 http://portal.gov.cz/wps/portal/_s.155/701?kam=zakon&c=106/1999 7 http://portal.gov.cz/wps/portal/_s.155/701?kam=zakon&c=442/2006 8 http://portal.gov.cz/wps/portal/_s.155/701?number1=365%2f2000

2 Přehled literatury a pramenů 14 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. 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.

2 Přehled literatury a pramenů 15 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í. 2.5 Optimalizace pro vyhledávače Kurtiš (2007) definuje internetový marketing jako marketing, který se odehrává ve specifickém prostředí Internetu a vychází ze všech praktik klasického marketingu. Nástroje, které využívá, jsou v užším pojetí pouze internetová reklama a vlastní webové stránky. V širším pojetí pak i další nástroje marketingových komunikací, které se na Internetu také uplatňují. Internetový marketing neboli marketing na Internetu anebo také on-line marketing rozděluje Kubíček (2008, s. 19) do deseti základních oblastí bannery, mobilní marketing, multimédia, virální marketing, emailing, blogy, výměny odkazů, publikování v médiích, SEO, SEM (viz obrázek 1). Tmavě vyznačenými částmi (SEM a SEO) se budeme zabývat podrobněji. Search Engine Marketing (SEM) jinak také marketing ve vyhledávačích vychází z předpo-

2 Přehled literatury a pramenů 16 Mobilní marketing SMS, MMS, tapety na mobilní telefony, loga, vyzvánění, Flash Lite Multimédia CD, DVD prezentace, katalogy, elektronické kiosky, volně šiřitelné aplikace Bannery placené kampaně, výměné kampaně SEM přednostní výpisy, systémy PPC, registrace odkazů SEO on page optimalizace, off page optimalizace Publikování v médiích vlastní články, diskuse, komentáře, public relations (tiskové zprávy, sponzoring) Virální marketing spoty, reklamy, hry, vtipy emailing vyžádané zasílání informací, newslettery, reklamní patičky v e-mailech Blogy osobní blogy zaměstnanců, oficiální firemní, tematické (produktové) Výměny odkazů (link exchange) odborné servery, partneři, dodavatelé Obr. 1: Desetihran zobrazuje základní odvětví internetového marketingu. (Kubíček, 2008, s. 19) kladu, že nejdůležitější je být nalezen vyhledávačem a na dané klíčové slovo související s obsahem stránky se zobrazit hledajícímu uživateli (zákazníkovi). Jedná se o velmi efektivní marketingový nástroj. SEM využívá opačného principu, než je obvyklý v reklamě. Většina reklamních technik používá lineární strategii tlaku, tzv. push marketing, tlačí produkty k zákazníkům, kteří o ně často ani nestojí. Naopak SEM není tak agresivní, je totiž postaven na nelineární strategii tahu (pull marketing). Dává zákazníkům přesně to, co chtějí. Zákazník přichází na web se snahou a opravdovým zájmem najít výrobek, který potřebuje, dovolenou, na kterou chce jet. (Kubíček, 2008, s. 16) Search Engine Marketing lze rozdělit na dvě části placenou a neplacenou. Do placené části lze zahrnout např. PPC systémy 9, registrace odkazů či přednostní výpisy. Druhá, neplacená, část upravuje samotné webové stránky pro lepší práci s vyhledávači. Search Engine Optimization (SEO) neboli optimalizace pro vyhledávače je dle Wikipedie (2009) metodologie vytváření a upravování webových stránek takovým způsobem, aby jejich forma a obsah byly vhodné pro automatizované zpracování v internetových vyhledávačích. Cílem pak je získat ve výsledku hledání ve vyhledávačích pro danou webovou stránku vyšší pozici, která odpovídá obsahu a tím četnější a zároveň cílené návštěvníky. Protože většina používaných SEO technik není původní a vychází ze zásad publikování přístupného a bezbariérového webu, jsou tyto techniky přínosné nejen pro počítačové stroje, ale i pro běžné, odborné nebo handicapované uživatele. SEM i SEO je úzce spojeno s vyhledávači a z hlediska optimalizace je důležité vědět, jak takové vyhledávače fungují. Obecně se dělí na dvě kategorie katalogy a fulltextové vyhledávače. Katalog je ve své podstatě web, který obsahuje odkazy na jiné webové stránky rozdělené do různých kategorií. Odkazy jsou do katalogu na rozdíl od fulltextového vyhledávače vkládány ručně. Vyhledávání funguje na principu porovnání dotazu s textem nadpisu, popisku, klíčových 9 Pay-per-click forma reklamy, ve které inzerent specifikuje klíčová slova, pro která se mají jeho záznamy objevit ve výsledcích vyhledávání. Inzerent zaplatí vyhledávači určitý poplatek vždy, když někdo klikne na jeho záznam. (Grappone a Couzin, 2007, s. 312)

2 Přehled literatury a pramenů 17 slov a webové adresy stránek zaregistrovaných v katalogu. V úvahu se nebere obsah stránky. Mezi nejznámější katalogy ve světě patří např. Yahoo! (http://www.yahoo.com) a ODP Open Directory Project (http://www.dmoz.com). U nás jsou to např. Seznam (http://www.seznam. cz), Centrum (http://www.centrum.cz) a Atlas (http://www.atlas.cz). Na rozdíl od katalogu fulltextový vyhledávač získává a ukládá odkazy svépomocí. Využívá speciálních programů (někdy označovaných jako robot, spider, bot, crawler či pavouk), které jsou vysílány po síti a jejich úkolem je stahovat a indexovat webové stránky. Tento proces se nazývá procházení (anglicky crawling ) a má jasně stanovený algoritmus. Nejvyužívanějšími fulltextovými vyhledávači jsou u nás např. Jyxo (využívá např. Atlas), Morfeo (Centrum) a ve světě Google (http://www.google.com v ČR používá algoritmus Googlu např. Seznam). Tab. 1: Přehled podílu odkazujících vyhledávačů za posledních 10 měsíců dle serveru TOPlist (TOPlist a Chose.cz, 2009) Vyhledávač 07/08 08/08 09/08 10/08 11/08 12/08 01/09 02/09 03/09 04/09 Průměr 1. Seznam (Fulltext) 53.3% 53.4% 53.7% 53.5% 53.8% 54.3% 54.1% 52.9% 50.3% 49.9% 53.18% 2. Google.CZ 18.6% 19.1% 19.4% 20.0% 20.1% 19.8% 19.6% 19.8% 20.4% 19.9% 19.55% 3. Google.SK 7.1% 7.0% 6.8% 6.6% 6.9% 6.9% 7.2% 7.3% 7.2% 7.3% 7.01% 4. Google 6.8% 6.6% 6.5% 6.5% 6.4% 6.2% 6.2% 6.3% 6.6% 6.2% 6.50% 5. Seznam 3.1% 3.1% 3.0% 2.9% 2.9% 2.9% 3.1% 3.0% 3.0% 3.1% 3.01% 6. Centrum (Morfeo) 1.1% 1.0% 1.0% 1.0% 1.0% 0.9% 0.9% 0.6% 0.3% 0.89% 7. Seznam katalog 0.6% 0.7% 0.7% 0.7% 0.7% 0.7% 0.6% 0.6% 0.5% 0.5% 0.66% 8. Seznam - firmy 0.9% 0.8% 0.8% 0.9% 0.7% 0.49% 9. Google.PL 0.4% 0.4% 0.4% 0.3% 0.3% 0.3% 0.3% 0.4% 0.5% 0.5% 0.36% 10. Firmy.cz (Seznam) 0.6% 0.8% 0.9% 0.9% 0.7% 0.6% 0.36% Jak je vidět z tabulky 1, podíl odkazujících vyhledávačů za posledních 10 měsíců podle serveru TOPlist jasně vedou fulltextové vyhledávače konkrétně Seznam a Google s více jak 86% podílem. Proto je vhodné se při optimalizaci webu zaměřit na faktory ovlivňující umístění ve fulltextovém vyhledávači. Na základě dlouhodobého výzkumu, do kterého se zapojilo 37 leaderů v oblasti SEO po celém světě, Fishkin a Pollard (2007) sestavili 10 nejdůležitějších faktorů, které Google zohledňuje při vyhledávání: klíčové slovo použité v nadpisu, text odkazů odkazujících na stránky, počet odkazujících webů na stránky, stáří stránky, dobré hodnocení struktury uvnitř webu, obsahová důležitost příchozích odkazů, popularita stránek v rámci obsahově příbuzných stránek, klíčové slovo užité ve stránce, popularita odkazujících webů, vztah k odkazujícím stránkám.

2 Přehled literatury a pramenů 18 2.5.1 Optimalizace stránky ve zdrojovém kódu (on-page optimalizace) První fáze optimalizace pro vyhledávače spočívá v úpravě samotných stránek (tzv. on-page optimalizace). Je vhodné si uvědomit, že vyhledávací roboti neumí číst obrázky, složité JavaScripty či Flashe. Proto je dobré tvořit přístupný zdrojový kód, který je nejen vhodný pro handicapované návštěvníky, ale také pro vyhledávače. Klíčová slova Výběr klíčových slov je jednou z nejdůležitějších částí SEO. Výsledky hledání jsou ovlivněny právě pomocí klíčových slov a jestliže v obsahu stránky tato slova chybí, web ztrácí na umístění. Klíčová slova by měla být výstižná a přesně identifikovat, čím se stránky zabývají, popřípadě co nabízejí. Je dobré se vžít do role návštěvníka a zamyslet se nad tím, jaká slova by volil při vyhledávání našich stránek. Společnost OneStat.com (2008) která se zabývá real-time analýzou webu, provedla výzkum chování uživatelů: třetina uživatelů (33.65 %) zadává při vyhledávání 2 slova, čtvrtina uživatelů (26.27 %) používá při hledání 3 slova, dále uživatelé zadávají 1 slovo (15.52 %), následují dotazy složené ze 4 slov (13.81 %). Podle Kubíčka (2008, s. 121) je dobré umístit klíčová slova: V adrese URL ( www.klicova-slova.cz, www.domena.cz/klicove-slovo). Do titulku stránky. Do obsahových metaznaček <description>, <keywords>. V těle stránky (viz copywriting). Do alternativních popisků obrázků v parametru alt. Do nadpisů (h1, h2, h3, h4, h5, h6) a odstavců ( <p>). Do titulků odkazů ( <a title=... >). Do samotného textu odkazů tzv. anchor text ( <a href= http://www.vase-domena. cz/stranka.html >Klíčové slovo</a>). Do zvýrazněného textu ( <strong>, <em>, <b>, <i>). Do textu odstavců ( <p>). Do seznamů a definičních výčtů ( <ul>, <li>, <dd>, <dt>). Copywriting Psaní efektivních textů neboli copywriting má za úkol zaujmout návštěvníka webu. Srozumitelný text bez typografických a gramatických chyb pomáhá lepší prodejnosti a zvyšuje návštěvnost stránek. Copywriter by měl při psaní textu dbát na vhodné zapracování klíčových slov frekvence jednotlivých klíčových slov by se měla pohybovat v rozmezí 1 6 % (počet jednotlivých klíčových slov/počet všech slov). URL V souvislosti s optimalizací pro vyhledávače je také důležitý vzhled URL (neboli SEO friendly

2 Přehled literatury a pramenů 19 URL SEF). Roboti striktně rozlišují vzhled odkazů např. http://www.nazev-webu.cz, http://nazev-webu.cz, http://www.nazev-webu.cz/index.php nebo http://nazev-webu.cz/index.php berou jako čtyři rozdílné stránky. Je tedy dobré používat stále stejný zápis. Pro dynamicky generované weby pomocí programovacích jazyků pracujících na straně serveru (např. PHP, Perl nebo ASP) je dobré použít nástroj mod_rewrite 10, který složitou a často nevzhlednou URL adresu (např. http://www.nazev-webu.cz/index.php?kategorie=47&zbozi=54) zpracuje na sémanticky přehlednou adresu (např. http://www.nazev-webu.cz/nazev-kategorie/nazev-zbozi). robots.txt Soubor robots.txt se umísťuje do kořenového adresáře webu. Slouží k řízení informací o tom, které soubory a adresáře mají roboti při procházení vynechat. Používá se zejména pro skrytí interních či placených informací, stránek určených pro tisk apod. Obdobného výsledku lze dosáhnout také užitím příslušných meta značek v hlavičce HTML dokumentu, avšak tato možnost není natolik efektivní a přehledná jako užití souboru robots.txt (robot musí nejprve stránku načíst, rozkouskovat a teprve se dozví, že nemá dále pokračovat). Ani na jednu z výše uvedených metod nelze se stoprocentní určitostí spoléhat existují roboti tzv. spamerů, kteří záměrně soubor robots.txt i hlavičky ignorují a snaží se získat co nejvíce důvěrných informací (zejména e-mailové adresy). Proto je vhodné citlivé informace ochraňovat i jiným způsobem např. řádnou autorizací. 2.5.2 Optimalizace okolí (off-page optimalizace) Další fáze optimalizace (tzv. off-page optimalizace) se zabývá faktory, které se nenalézají na upravovaných stránkách a nelze je přímo ovlivnit. Optimalizace okolí se věnuje zejména budování zpětných odkazů. Kromě toho se do off-page faktorů řadí i text zpětného odkazu (anchor text). Zpětné odkazy Všechny odkazy směřující na jednu stránku jsou vyjádřeny rankingem stránky (např. Google používá PageRank, Seznam.cz zase S-rank). Čím vyšší ranking, tím oblíbenější je stránka a je také upřednostňována při výsledku vyhledávání. Zpětné odkazy je možné získávat přirozeným způsobem, koupí, registrací do katalogů nebo třeba výměnou. Nejvhodnějším způsobem pro zvyšovaní rankingu je přirozená cesta, kdy je důležitý kvalitní obsah, na který odkazují sami uživatelé. Anchor text Text zpětného odkazu je jeden z dalších faktorů, který je významný pro celkové hodnocení strá- 10 Mod_rewrite je jeden ze zásuvných modulů webového serveru Apache (http://www.apache. org). Umožňuje zpracovávat uživatelem zadanou URL adresu, která mnohdy fyzicky neexistuje a na základě skriptu/regulárního výrazu řídí další kroky nejčastěji přesměrování na dynamicky generovaný soubor.

2 Přehled literatury a pramenů 20 nek. Roboti analyzují text nacházející se mezi tagy <a> a </a>, který by měl udávat, co na dané stránce opravdu je. Tento text by měl odpovídat nadpisu a klíčovým slovům použitých ve stránce. Podle Kubíčka (2008, s. 192) o síle zpětných odkazů vypovídají i tzv. Google bomby. Jedná se v podstatě o soustředěnou snahu odkázat na danou stránku, na konkrétní fráze nebo klíčové slovo, a to především na takové, které se na dané stránce vůbec nenacházejí. V naprosté většině k tomu dochází bez vědomí majitele nebo provozovatele stránek. Ušetřen nebyl v minulosti ani Miroslav Kalousek, který byl k nalezení po zadání slova podrazák. Google se v poslední době snaží podobné snahy eliminovat kontrolou, zda obsah stránky skutečně odpovídá zpětným odkazům. 2.5.3 Nepovolené praktiky (Black Hat SEO) Kromě výše uvedených optimalizací existují i podvodné techniky nazývané Black Hat SEO, které mají za cíl získání lepšího místa ve vyhledávačích. Někteří lidé překračují etické hranice optimalizace a snaží se oklamat vyhledávače, což má neblahý vliv na celý systém. Za porušení pravidel hrozí mnohdy přímé vyřazení z databáze. Podle Kubíčka (2008) a Smičky (2007) mohou být důvody pro vyřazení následující (text autorů byl sloučen do jednoho výčtu): Duplicitní weby (kopie identických stránek na různých doménách WWW). Opakovaný, nesmyslný text nesouvisející s obsahem stránek. Příliš mnoho opakujících se slov a frází na stránkách (klíčová slova). Skrytý text na stránkách (pomocí CSS, shodná barva pozadí a fontu ). MFM stránky (Made for Money stránky bez informačního obsahu vytvořené jen pro účel získávání peněz z klepacích reklam). Podstrkávání jiného obsahu vyhledávači a jiného návštěvníkům (cloaking). Doorway stránky a linkfarmy (skupina stránek, jejichž jediným cílem je pouze odkazování na jednu konkrétní stránku). Kopírování cizích webů a obsahů z nich (mirror). Doménový spam (podobné jako duplicitní stránky, jen s tím rozdílem, že se vše odehrává v rámci jedné domény a na subdoménách). Podvodné odkazy (odkazy se tváří, že odkazují někam jinam, než kam se ve skutečnosti člověk dostane). Klamavé přesměrování (po vstupu na stránku jste přesměrováni na jinou). Cybersquatting (registrace doménového jména za spekulativním účelem).

3 Metodika řešení 21 3 Metodika řešení Každý programátor by měl před začátkem práce namyslet a vytvořit fáze, kterými se bude po dobu vývoje projektu držet. Bez toho se může stát, že se dostane do slepé uličky, nedodrží termín dodání, bude se zabývat zbytečnostmi a výsledek nebude vyhovovat zadání. Při plánování projektu by člověk měl dbát na dodržování zásady co nekratší doby trvání, co nejmenších nákladů a efektivního využití zdrojů při co nejmenším riziku. Zvolením vhodného kompromisu mezi těmito zásadami lze dosáhnout požadovaného výsledku při maximální efektivnosti. Podle Widemana (2004) se obecný životní cyklus projektu rozděluje na 4 části: zahájení, definice, implementace, uzavření. Obecný životní cyklus lze aplikovat i na tuto práci. Postup optimalizace webových stránek lze tedy shrnout do následujících kroků: důkladné prostudování problematiky, sběr informací a požadavků, zajištění všech potřebných přístupů a dat, analýza současného stavu prezentace, návštěvníků a konkurence, návrh změn v souladu s preferencemi a zaměřením projektu, realizace odsouhlasených změn, kontrola a vyhodnocení. Prvním krokem při tvoření kvalitního projektu je dobrá znalost problematiky. Bylo třeba nashromáždit a prostudovat co nejvíce literatury a protože v češtině není mnoho knížek zabývajících se optimalizací webových stránek, stal se zdrojem znalostí i Internet. Po vytvoření vhodné znalostní báze bylo nutné vybrat projekt, na kterém by se dobře demonstrovaly optimalizační změny. Pro tyto účely byl zvolen web s názvem CrazyGirl (http:// www.crazygirl.cz), který vytvořilo a zároveň spravuje FOREGROUND STUDIO (http:// www.4g.cz). Podle zjištěných informací se jedná se o internetový obchod, který se zabývá zejména prodejem dámského, ale i pánského spodního prádla a plavek. Nabízí výběr z více než 80 výrobců podprsenek, kalhotek, nočního a erotického prádla, pyžam, slipů, boxerek nebo také županů. Webová stránka byla uvedena do provozu v únoru 2009 a od této doby se potýká se stagnujícím počtem návštěvníků. Nízké procento zákazníků přichází z vyhledávačů a opětovně se jich málo vrací zpět, což je hlavním důvodem pro optimalizaci. Následovalo zajištění všech potřebných přístupů a dat. Pro účely práce stačily přístupy ke zdrojovým datům webu a do statistik. Protože optimalizace webových stránek je dlouhodobý proces, je třeba jej důkladně naplánovat. Dobrý plán se neobejde bez pečlivé analýzy. Ta by měla vést ke zjištění, zda stránky dodržují zaběhlé standardy, obsahují chyby (pokud ano, pak upozorní na důsledky těchto chyb), využívají vhodných technologií, a jak si vedou vzhledem ke konkurenci. Mnoho informací lze získat

3 Metodika řešení 22 přímo ze zdrojového kódu, avšak důležitou součástí analýzy jsou také statistiky návštěvnosti. Internetový obchod CrazyGirl využívá od svého spuštění službu Google Analytics (http://www. google.com/analytics/cs/), která je neocenitelným pomocníkem každého webmastera. Nabízí zdarma více než 80 přehledů a statistik, poskytuje informace o toku návštěvníků a umožňuje sledovat účinnost reklamních kampaní. Existuje mnoho metod jak zjistit, zda stránky vyhovují uvedeným standardům. Například pro testování a kontrolu přístupnosti na stránkách jsou podle Špinara (2004, s. 276) tři základní možnosti: Kontrola uživatelským testem podstatou kontroly je simulace situací, kterým musí čelit handicapovaní uživatelé. Jedná se o nejjednodušší formu kontroly, přesto dokáže odhalit podstatnou část prvků, které mohou z hlediska přístupnosti činit problémy. Kontrola automatickými nástroji pro ulehčení práce se nabízí několik šikovných on-line nástrojů. Nevýhodou je jejich výstup v angličtině a skutečnost, že kontrolují jenom některé prvky a to metodikou WCAG nebo Section 508. Kontrola proti bodům zvolené metodiky nejtěžší, avšak nejspolehlivější metoda, při které se prochází kontrolní body metodiky bod po bodu. Na základě analýzy je třeba následně navrhnout změny v souladu s preferencemi a zaměřením projektu. S tím souvisí i demonstrace nejčastějších chyb, kterých se tvůrci webových stránek dopouštějí. Jelikož je optimalizace webových stránek proces postupný, trvá několik měsíců (někdy dokonce až rok), než se změny projeví na návštěvnosti. Z tohoto důvodu se práce nebude podrobně zabývat posledními dvěma kroky.

4 Vlastní řešení 23 4 Vlastní řešení Vlastní práce je zaměřena na praktickou ukázku optimalizace webové stránky. Na základě zvolené metodiky se dělí na analýzu, návrh změn a jejich realizaci. 4.1 Analýza Aby mohla webová stránka efektivně plnit marketingové cíle, je dobré si ujasnit základní skutečnosti: Cíl webových stránek hlavním cílem námi analyzovaného internetového obchodu je prodej co největšího množství zboží co možná nejvíce zákazníkům. Web by měly oslovovat zákazníky po celé republice a tím rozšířit působnost mimo Brno a Olomouc, kde má firma svoje prodejny. Dalším cílem je spokojenost návštěvníka, který se bude v budoucnu na stránky znovu vracet. Cílová skupina zaměření webových stránek je zejména na ženy od 15 let. Je nabízeno i pánské a dětské zboží, ale z velké většiny převažují právě dámské produkty. Současný stav Základní informace a vlastnosti stránky v současném stavu, tedy v době před optimalizací, jsou seřazeny v následující tabulce číslo 2. Tab. 2: Současný stav stránek základní informace Použité technologie Kódování Jazykové mutace Rozměr stránek Velikost úvodní strany HTML 4.01 Transitional CSS level 2.1 PHP JavaScript Flash Windows-1250 česká 990 px (pevná šířka) 1 646 kb Podle W3C validátorů stránky nedodržují standardy W3C Markup Validator (http://validator.w3.org/) našel v HTML kódu úvodní strany 13 chyb a 52 varování, W3C CSS Validator (http://jigsaw.w3.org/css-validator/) zjistil, že v externím CSS souboru se nachází 24 chyb.

4 Vlastní řešení 24 Statistiky návštěvnosti Pro účely této práce byly vybrány nejdůležitější přehledy z období od 1. 2. 2009 do 1. 5. 2009 (grafy naleznete v příloze práce). Základní přehled v tabulce č. 3 jsou číselně vyjádřeny základní statistiky webu. Alarmující je poměr návštěvníků, kteří opustili web již na úvodní stránce, jež dosahuje 36,36 % z celkového počtu návštěv. Lze jen těžko odhadovat, jaký je hlavní důvod pro opuštění stránky ihned po vstupu cílem by mělo být snížení tohoto čísla na minimum a to hlavně vhodnou optimalizací pro co největší množství návštěvníků. Tab. 3: Statistiky návštěvnosti základní přehled (Google Analytics) Celkový počet návštěv 25 239 Průměrný počet návštěv za den 280,43 Celkový počet zobrazených stránek 229 358 Průměrný počet zobrazení stránek na návštěvníka 9,09 Poměr návštěvníků, kteří se na stránky vrátili 25,29 % Poměr nových návštěvníků 74,59 % Poměr návštěvníků, kteří opustili web již na úvodní stránce 36,36 % Průměrná doba strávená na stránce 00:04:16 Používané prohlížeče podle Google Analytics je nejvyužívanějším prohlížečem námi analyzovaného webu Internet Explorer (54,50 %). S více než třetinovým podílem (34,69 %) následuje Firefox a se čtyřmi procenty (konkrétně 4,36 %) uzavírá přehled Opera. Další prohlížeče a roboty je zbytečné uvádět, protože zaujímají zanedbatelné procento z celku. Při detailním pohledu na již zmíněné prohlížeče se těší oblibě zejména Internet Explorer verze 7, mnoho uživatelů ještě užívá starší verzi 6 a pomalu se dostává do statistik i nejnovější verze 8. U Firefoxu zaujímají největší procento verze 3.0.6, 3.0.8 a 3.0.7. Jedná-li se o Operu, nejrozšířenější verze jsou 9.63, 9.64 a 9.62. Postupem času budou novější verze prohlížečů vytlačovat ty starší, ale důležité je, aby se již nyní zobrazily webové stránky ve všech výše uvedených verzích prohlížečů stejně. Nemůžeme si dovolit ztratit např. více než 15 % zákazníků tím, že bychom stránky neoptimalizovali pro Internet Explorer verze 6. Barvy a rozlišení obrazovky jak je vidět z tabulky č. 4, nejpoužívanější rozlišení obrazovky je 1024 768 px. Nižší rozlišení jsou podle statistik využívány minimálně, proto lze 1024 768 px považovat za nejmenší doporučený rozměr na které by měly být webové stránky konstruovány. Co se týče barevnosti, tak převažuje hloubka 32-bit (90,36 %), kterou následuje barevná hloubka 24-bit (6,60 %). Rozdíl mezi těmito barevnostmi je v informaci o průhlednosti, která se využívá hlavně při překrývání a prolínání obrázků. V případě našeho webu nelze pozorovat při změně barevné hloubky žádný vizuální rozdíl a pevná šířka (viz tabulka č. 2) nepřesahuje velikost doporučeného rozlišení, takž lze říci, že stránky jsou z hlediska barevnosti a rozlišení obrazovky optimalizované.

4 Vlastní řešení 25 Tab. 4: Statistiky návštěvnosti nejpoužívanější rozlišení obrazovky (Google Analytics) 1024 768 px 29,81 % 1280 800 px 22,59 % 1280 1024 px 18,76 % 1680 1050 px 6,04 % 1440 900 px 5,59 % 1600 1200 px 5,50 % 1152 864 px 3,33 % 1280 960 px 1,64 % 800 600 px 1,15 % 1280 768 px 1,10 % Odkazující stránky ze statistik vyplývá, že 36,60 % návštěvníků vyvolá webové stránky přímo (zadáním webové adresy do prohlížeče), 27,39 % je přesměrováno z jiných stránek a zbytek, tedy 36,01 % návštěvníků, přichází z vyhledávačů (zejména ze Seznamu a Googlu). Google Analytics také zaznamenává klíčová slova zadaná do vyhledávačů, která návštěvníka dovedla na stránku (viz tabulka č. 5). Tato slova by měla odpovídat klíčovým slovům užitých ve stránce. Tab. 5: Statistiky návštěvnosti nejčastěji užitá klíčová slova (Google Analytics) plavky 2009 33,32% crazygirl.cz 2,31% plavky alena šeredová 2,04% dámské plavky 2009 1,83% crazy girl 1,25% alena šeredová plavky 1,22% esotiq 1,14% crazygirl 1,11% Přístupnost Pro účely této práce byla zvolena metoda kontroly uživatelským testem, který se skládá z devíti kroků. Postupně byly stránky podrobeny těmto krokům a prospěly jen v případě, pokud byly neustále čitelné a ovladatelné. Výsledky jsou prezentovány v následující tabulce č. 6.

4 Vlastní řešení 26 Tab. 6: Kontrola přístupnosti uživatelským testem 1. Vypnutá grafika NEVYHOVUJE popisky obrázků řádně neudávají jejich obsah 2. Vypnuté kaskádové styly NEVYHOVUJE obsahové informace po sobě sice následují a jsou smysluplné, ale obrázky mají nadměrnou velikost 3. Vypnuté aktivní prvky VYHOVUJE 4. Ovladatelnost klávesnicí VYHOVUJE 5. Velikost okna a rozlišení obrazovky VYHOVUJE 6. Velikost textu NEVYHOVUJE při změně velikosti písma v prohlížeči stránka zůstává neustále stejná 7. Textový prohlížeč VYHOVUJE 8. Extrakce textového obsahu VYHOVUJE 9. Vysoký kontrast NEVYHOVUJE vyskytuje se text, který není na pozadí zcela čitelný Užitá klíčová slova, umístění ve vyhledávačích, ranking Správný výběr klíčových slov má velký význam při optimalizaci pro vyhledávače. Podle analýzy webové stránky obsahují následující klíčová slova: podprsenky, kalhotky, pyzama, eroticke, push-up, kinga, ewa bien, lormar, lovelygirl, jiadea, obsessive, anais, styx, trenky, trenýrky, infiore, miran, wolbar, jane, volin, she, L&L, slight, livia corsetti, passion, župany, doplňky, julimex, plavky. Při porovnání s klíčovými slovy ze statistik návštěvnosti (tabulka č. 5) zjistíme, že se neshoduje ani jedna z variant. O tom, že jsou tato slova nevhodně zvolena, se můžeme přesvědčit i z tabulky č. 7, kde je testováno umístění stránek ve třech nejvýznamnějších fulltextových vyhledávačích v ČR. Tab. 7: Umístění stránek ve vyhledávačích při současných klíčových slovech klíčové slovo Google.com Google.cz Seznam.cz podprsenky 57 kalhotky 63 pyzama eroticke push-up 17 kinga ewa bien 16 lormar 69 lovelygirl 21 19 jiadea 17 1 5

4 Vlastní řešení 27 klíčové slovo Google.com Google.cz Seznam.cz obsessive anais styx trenky trenýrky 70 57 89 infiore 2 17 miran 33 89 wolbar 31 53 jane volin 18 32 she L&L 34 slight 86 livia corsetti 68 passion župany doplňky julimex 31 15 plavky 87 Oblíbenost stránky lze porovnávat také pomocí rankingu, který jak již bylo zmíněno je jedním z nejdůležitějších faktorů ovlivňujících výsledek vyhledávání. Vybrány byly 3 nejznámější Google PageRank, který dosahuje hodnoty pouze 3 z 10, dále Seznam S-Rank s celkovým hodnocením 70 ze 100 a Jyxo Rank s hodnotou 135 z 220. Neuspokojivého výsledku dosáhl Google PageRank v případě našich stránek by se měl ranking pohybovat někde kolem hodnoty 5, proto je důležité věnovat pozornost i zpětným odkazům. SWOT analýza Základní marketingové metody lze využít i pro webové projekty. SWOT analýza hodnotí silné a slabé stránky ze kterých vyplývají hrozby a příležitosti. Díky této metodě lze vyhodnotit fungování webu a nalézt problémy či využít předností. Silné stránky mezi silné stránky patří bezesporu moderní vizuální a přehledné zpracování stránek. Výhodou je prodej kvalitního a žádaného zboží. Za výhodu lze taktéž považovat zázemí firmy dvě prodejny v Brně a Olomouci. Slabé stránky webová prezentace není vhodně optimalizovaná, a proto se potýká se stagnující návštěvností. Příležitosti firma má možnost dalšího růstu (i do zahraničí), oslovení nových potencionálních zákazníků či získání stálé klientely. Hrozby zvyšující se konkurence. Za hrozbu lze považovat také ekonomická krize nebo změna v módních trendech.

4 Vlastní řešení 28 Analýza konkurence Každý dobrý obchodník má přehled, jak si vede jeho konkurence, v čem je lepší a v čem zaostává. Jinak tomu není ani v oblasti Internetu. Je třeba neustále sledovat vývoj okolí. Na českém trhu se spodním prádlem lze nalézt hodně internetových obchodů, ale zatím žádný není natolik silný, aby ovládl větší část trhu. Mezi přímé konkurenty lze zařadit např. http://www.astratex.cz, http://www.top-pradlo.cz, http://www.pradlospodni.cz, http://www.extra-pradlo. cz a nebo také http://www.krasnepradlo.cz. 4.2 Vzhled stránek První věci, které si návštěvník všimne při vstupu na stránky je vzhled. Celkový dojem ze stránky určuje, zda zákazník setrvá či odejde. Atraktivní vzhled a rozvržení je pro web CrazyGirl (obr. 2) určitě přínosem. Grafika internetového obchodu je vytvořena podle nejnovějších trendů a dle reakcí zákazníků lze usuzovat, že v tomto ohledu vede před konkurencí. Vzhled stránky je tedy zbytečné optimalizovat, a proto se pustíme přímo do optimalizace kódu. Obr. 2: Ukázka vzhledu internetového obchodu CrazyGirl 4.2 Standardy a zvolené technologie Co jsou standardy a proč je důležité se jimi řídit bylo popsáno v teoretické části. Nyní bychom se zaměřili na výběr jazyků doporučených konsorciem W3C. Z analýzy námi optimalizovaného webu víme, že hypertextové dokumenty jsou tvořeny pomocí HTML 4.01 Transitional. Jedná se o více než 10 let starou verzi jazyka, která je v současné době vytlačována novější a perspektivnější variantou XHTML jež je zpětně kompatibilní s předchozími HTML verzemi a plně vyhovuje XML specifikacím. Zároveň je striktnější při dodržování standardů. Na základě zkušeností jsem tedy zvolil pro projekt změnu jazyka na XHTML 1.0 Transitional. Kaskádové styly ve verzi 2.1 odpovídají mé představě o moderním webu. Kromě výběru jazyka je také důležitý výběr kódování. Pro správné zobrazení češtiny na webových stránkách se nejčastěji využívá ISO 8859-2, Windows-1250 nebo také UTF-8. Jiná

4 Vlastní řešení 29 kódování středoevropských jazyků není vhodné používat, protože je např. Seznam neindexuje. V analýze jsme zjistili, že web CrazyGirl je napsaný ve znakové sadě Windows-1250, která sice spadá do výše uvedených možností, přesto bych se přikláněl spíše k variantě s Unicode UTF-8. Důvod je jednoduchý. UTF-8 je univerzální kódování a podporuje většinu světových jazyků, takže rozhodne-li se majitel rozšířit stránky o další jazykové mutace, nebude mít problém. Zároveň je podporovaný všemi prohlížeči a doporučuje se používat pro XML dokumenty. 4.3 Přístupnost Pomocí kontroly uživatelským testem jsme zjistili, že webové stránky mají v oblasti přístupnosti určité rezervy. Nejlepším způsobem nápravy je kontrola stránek bod po bodu zda odpovídají pravidlům pro tvorbu přístupného webu. Protože rozsah bakalářské práce nedovoluje detailně 11 procházet všech 33 bodů, vypíši zde nejvýznamnější chyby, se kterými jsem se při úpravě stránek setkal. Obrázky Jelikož existují handicapovaní uživatelé, kteří nemají možnost vnímat obrázky či jiné animace, je důležité, aby se dbalo kromě obrazového i na významové sdělení. Toho se dosáhne řádným vyplněním atributu alt. Tito uživatelé totiž používají často hlasové čtečky, které tento atribut zpracovávají. Proto je důležité, aby byl každý obrázek, který má informační hodnotu, řádně popsán. U obrázků s dekoračními vlastnostmi se obvykle atribut alt nechává prázdný. Písmo Často se stává, že starší lidé či lidé se zrakovým postižením nemohou přečíst malá písmena a z tohoto důvodu používají v prohlížeči funkci pro zvětšení písma. U špatně konstruovaných stránek, kterých je na Internetu většina, písmo nemění velikost. Chyba je v užití absolutních jednotek (např. cm, in, pt, px), které je vhodné nahradit za jednotky relativní (např. em, ex, procenta). Formuláře Pro formuláře platí podobné vlastnosti jako u obrázků je tedy nutné každý formulářový prvek řádně popsat. Oproti obrázkům je možné popisek vytvořit dvěma způsoby (použití záleží na situaci obecně je doporučovaná spíše první varianta). Popis prvku pomocí značky label: <label for= jmeno >Jméno</label> <input type= text name=... id= jmeno /> Pomocí atributu title: <input type= text name=... title= Jméno /> 11 Pravidla tvorby přístupného webu i s jejich detailním popisem lze nalézt např. na adrese http:// www.pravidla-pristupnosti.cz

4 Vlastní řešení 30 Někdy se může stát, že stránka obsahuje složité formuláře, které je potřeba nějakým způsobem zpřehlednit či rozčlenit (např. u námi analyzovaného webu se jedná o stránku s registrací nového zákazníka). V takových případech se používají značky <fieldset> a <legend>, které seskupují prvky do menších celků a značka <optgroup>, která pomůže rozčlenit výběrové seznamy <input>. Barvy Webové stránky by měly být přizpůsobené i pro návštěvníky se špatným vnímáním barev. Mohlo by se stát, že postižený nenajde barevně odlišený odkaz (proto by se měl zvýraznit např. podtržením) či nepřečte málo kontrastní text. K vyhodnocení kontrastu barev existuje mnoho utilit (testovací skript lze nalézt např. na adrese http://www.sovavsiti.cz/kontrast/), které zjišťují, zda mají barvy dostatečný rozdíl jasu a rozdíl barev. Pěknou ukázkou málo kontrastních barev na námi optimalizovaných stránkách je tmavě růžový text na světle růžovém pozadí v menu či inverzní varianta v nadpisech. Ostatní Přístupnost se vztahuje i na doplňky webových stránek jako je JavaScript, Flash či kaskádové styly. Je třeba mít na paměti, že stránky musí být použitelné i v případě, kdy návštěvníkovi nedovolují okolnosti tyto doplňky zobrazit. Vhodným příkladem je Flash animace na úvodní straně webu. V prohlížeči bez podpory Flashe je vidět pouze velký nevyplněný prostor. Toho se lze při absenci zobrazovacího pluginu vyvarovat např. záměnou za obrázek (záměna lze provést i za jiné elementy např. za text): <object type= application/x-shockwave-flash data= crazy.swf width= 990 height= 323 > <param name= movie value= crazy.swf /> <img src= crazy_nonflash.jpg width= 990 height= 323 alt= Otevřena nová prodejna v Olomouc City! /> </object> Je vhodné upozornit na skutečnost, že tyto změny nejsou prospěšné jenom pro uživatele s postižením, ale také pro vyhledávače, jejichž roboti neumí interpretovat výše uvedené doplňky ani obrázky. 4.4 Klíčová slova a jejich užití O tom, že má optimalizovaná stránka špatně zvolená klíčová slova, jsme se mohli přesvědčit v analýze. Proto je potřeba zvolit úplně nová slova. Ze statistik vyplynulo, že na stránky přichází nejvíce lidí přes spojení plavky 2009, které tedy zvolíme za první klíčové slovo. Další slovo, které by nemělo ve výčtu chybět je název firmy, tedy CrazyGirl. Firma se musí zásadně pohybovat na předních místech po zadání tohoto řetězce. Následovat by mělo sousloví, které identifikuje hlavní záměr společnosti, tedy spodní prádlo. Jelikož v nabídce převažuje dámské spodní

4 Vlastní řešení 31 prádlo, bylo toto spojení také zvoleno za klíčové slovo. Další slova jsem vybral s pomocí programu Web CEO (zkušební verzi lze stáhnout na http://www.webceo.com/), Google Trends (http://www.google.com/trends) a Google AdWords Keyword Tool (https://adwords. google.com/select/keywordtoolexternal). Protože stránky už nějakou dobu fungují, musel jsem analyzovat i slova, která se na stránce vyskytují nejvíce a jsou důležitá. V úvahu jsem bral také četnost hledání klíčových slov ve vyhledávačích, počet výsledků a zvyklosti návštěvníků. Doporučovaný počet písmen všech klíčových slov by měl být maximálně 250, jedná-li se o konkurenční spojení, tak i méně. Následuje tedy výčet pečlivě vybraných slov: spodní prádlo; dámské spodní prádlo; noční prádlo; erotické prádlo; plavky; plavky 2009; dámské plavky; kalhotky; podprsenky; crazygirl; Dalším krokem je zapracování do obsahu stránky. Kde je vhodné umístit klíčová slova a co je copywriting jsme si už vysvětlili. Jedná se o zdlouhavý a manuální proces, který je zbytečný popisovat. Proto zde uvedu pro představu alespoň upravenou hlavičku stránek. <title>crazygirl dámské spodní prádlo, pánské spodní prádlo, plavky</ title> <meta name= description content= Internetový obchod CrazyGirl nabízí dámské spodní prádlo, pánské spodní prádlo a plavky. Naleznete zde kvalitní kalhotky, podprsenky, noční prádlo, erotické prádlo, dámské plavky a také plavky 2009. /> <meta name= keywords content= spodní prádlo, dámské spodní prádlo, noční prádlo, erotické prádlo, plavky, plavky 2009, dámské plavky, kalhotky, podprsenky, crazygirl /> <meta name= language content= czech /> <meta http-equiv= content-language content= cs /> <meta name= distribution content= Global /> <meta name= revisit-after content= 7 days /> <meta http-equiv= content-type content= text/html; charset=utf-8 /> <meta http-equiv= expires content= -1 /> <meta http-equiv= pragma content= no-cache /> <meta http-equiv= cache-control content= no-cache />

4 Vlastní řešení 32 4.5 Optimalizace dalších faktorů ovlivňujících vyhledávání Roboti Jak jsme si vysvětlili v teoretické části, můžeme roboty omezovat při jejich procházení webu. V případě našeho projektu by bylo nežádoucí, kdyby roboti procházeli administrační část a PDF soubory. Toho dosáhneme pokud vložíme do souboru robots.txt následující příkazy. User-agent: * Disallow: /admin/ Disallow: /*.pdf$ Nic nezkazíme ani tím, když do hlavičky HTML dokumentů vložíme níže uvedené meta tagy, které dávají robotům informaci, že stránku mohou indexovat a smí následovat odkazy zapsané ve stránce. <meta name= robots content= index, follow /> <meta name= googlebot content= index, follow /> SEO friendly URL Jelikož internetový obchod CrazyGirl běží na webovém serveru Apache, je možné použít modul mod_rewrite k dosažení pěkné URL adresy. Jako obyčejní zákazníci webhostingu nemáme přístup k hlavnímu konfiguračnímu souboru httpd.conf, proto jsme nuceni použít soubor.htaccess, který umístíme do kořenového adresáře webu. Do tohoto souboru vložíme níže uvedené příkazy, které zajistí, že po vyvolání např. adresy http://www.crazygirl.cz/plavky/jednodilne/damske-plavky-naomi-ii se spustí skript index.php?module=plavky&var1=jednodile&var2=damske-plavky-naomi-ii. RewriteEngine On RewriteBase / RewriteRule ^([^\/\.]*)?\/?([^\/\.]*)?\/?([^\/\.]*)?\/?([^\/\.]*)$ index.php?module=$1&var1=$2&var2=$3&var3=$4 [L,QSA] AddDefaultCharset utf-8 Chybová stránka 404 Čas od času se stane, že se návštěvníkovi při nenalezení požadovaného dokumentu zobrazí chybová stránka. Vzhled a obsah této stránky je ve většině případů přednastavena poskytovatelem webhostingu. Je proto lepší si vytvořit vlastní chybovou stránku, která vizuálně zapadá do konceptu webu. Toho dosáhneme jednoduše. Stačí přidat do souboru.htaccess následující příkaz, který přesměruje stránku po chybě na adresu http://www.crazygirl.cz/not-found. ErrorDocument 404 /not-found

4 Vlastní řešení 33 4.6 Sémantika Každý dobrý tvůrce webových stránek by měl kromě standardů myslet i na stylistickou úpravu tzv. sémantiku. Jedná se o určitá doporučení, která však nejsou závazná. Podle Havrlanta (2008) sémantika slouží ke správnému vyznačování jednotlivých úseků zdrojového kódu každé webové stránky. HTML zná mnoho značek (či tagů) a většina z nich má také svůj význam, který bychom měli dodržovat. A přitom existuje spousta webů, které toto jednoduché pravidlo nedodržují. Dá se říci, že sémantika doplňuje svými pravidly jak přístupnost, tak i optimalizaci pro vyhledávače. Zároveň podporuje současný trend, kterým je oddělení obsahu od vzhledu. Dalším důvodem proč dbát na tato doporučení je přehledný zdrojový kód, což je i dobrá vizitka programátora. Z vlastní zkušenosti sémantiku považuji za vhodnou nadstavbu webových stránek a snažím se její pravidla dodržovat. Při úpravě webu CrazyGirl jsem narazil na následující problémy, které lze také považovat za nejčastější chyby, jichž se webdesignéři dopouštějí. Nadpisy Pro vytváření nadpisů je nutné používat značek k tomu určených, tedy <h1> až <h6>, kdy <h1> je nejdůležitější (měla by se na stránce vyskytovat pouze jednou) a <h6> nejméně důležitá. Často se stává, že programátoři použijí pro nadpis tagy <div> nebo <span>, což je špatně. V případě, že je nadpisem obrázek, využívá se konstrukce uvedená níže. <h1><img src= nadpis.jpg alt= Zde přijde nadpis stránky ></h1> Odstavce Další obecně rozšířenou chybou je tvorba odstavců pomocí značky <br />. Znak zalomení řádky totiž nezačíná nový odstavec, ale pouze nový řádek. Správný zápis je pomocí párového tagu <p> a </p>. Zvýraznění textu Pro zvýraznění textu je možné použít několik možností. Například chceme-li zvýraznit řetězec tučným písmem, můžeme použít tag <b> nebo <strong>. Vizuálně je sice výsledek v obou případech stejný, rozdíl je ale v samotném významu. Značka <b> pouze změní řez písma na tučný, kdežto <strong> dává na vyznačený text důraz a zároveň jej zvýrazní. Z hlediska sémantiky je tedy vhodnější druhá varianta. Stejný rozdíl je i u kurzívy místo tagu <i> je lepší používat <em>. Kromě tučného písma a kurzívy lze zvýrazňovat text i pomocí následujících prvků: (Cederholm, 2004, s. 103) <cite> obsahuje citát nebo odkaz na jiné zdroje; <dfn> označuje definující instanci ohraničeného výrazu; <code> označuje prvek počítačového kódu; <samp> označuje vzorový výstup z programů skriptů atd.; <kbd> označuje text, který má vložit uživatel; <var> označuje instanci proměnné nebo argumentu programu; <abbr> označuje zkrácený tvar (např. WWW, HTTP, URI, Mass atd.); <acronym> označuje akronym (např. WAC, radar atd.);

4 Vlastní řešení 34 Seznamy Často se chybuje také v seznamech. Podle významu je vždy potřeba přiřadit vhodné párové značky. Seznamy můžeme rozlišit na 3 základní skupiny: Číslovaný (tříděný) seznam uvozuje se párovou značkou <ol>, jednotlivé položky jsou tvořeny tagem <li>. Nečíslovaný (netříděný) seznam začíná značkou <ul>, následují opět tagy <li>. Definiční seznam celá definice se uvozuje značkou <dl>, definované slovo tagem <dt> a vysvětlení definovaného slova do značek <dd>. Tabulky Tabulky jsou dalším kamenem úrazu. Jsou totiž určeny pro zápis tabulkových dat, ale hodně často jsou špatně používány (mnohdy dokonce i několikrát vnořené) v souvislosti s rozvržením stránky. Layout stránek by měl být podle moderního přístupu konstruován pomocí kaskádových stylů a ne pomocí přesně napozicovaných tabulek. Tabulka z hlediska sémantiky začíná klasickým párovým tagem <table> u kterého je důležitý atribut summary (detailní popis tabulky). Další tag <caption> lze považovat jako nadpis tabulky. Následuje značka <thead>, tedy záhlaví tabulky, která obsahuje sloupec a buňku <tr> a <th>. Po záhlaví přichází na řadu tělo tabulky, tedy <tbody> s klasickými tagy <tr> a <td>. Jako poslední můžeme použít tag <tfoot>, jakožto patičku se stejnými značkami jako v předchozím případě. Pro lepší pochopení je níže uvedený příklad jednoduché tabulky. <table summary= Detailní popis tabulky > <caption>nadpis tabulky</caption> <thead> <tr> <th>položka záhlaví</th> <th>další položka záhlaví</th> </tr> </thead> <tbody> <tr> <td>položka těla tabulky</td> <td>další položka těla tabulky</td> </tr> </tbody> <tfoot> <tr> <td>položka zápatí</td> <td>další položka zápatí</td> </tr> </tfoot> </table>

4 Vlastní řešení 35 Používání nesémantických značek Značky, které nemají žádný sémantický význam, jsou v poslední době velice oblíbené. Bohužel vytvořit pěkný CSS layout je bez těchto značek značně obtížné. Proto se používání těchto tagů (řeč je zejména o značkách <div> a <span>) nezakazuje, ale doporučuje se jejich omezení na minimum. Další nesémantické značky, které by se podle Havrlanta (2008) neměly vůbec používat jsou <u>, <tt>, <s>, <strike>, <small>, <big>, <blink> a <marquee>. 4.7 Další optimalizace Velikost webu Dle výzkumu NetMonitor SPIR Mediaresearch & Gemius (2009, s. 16) se v domácnostech stále používá dial-up (9,37 %) a připojení přes mobilní telefon (3,17 %). Tyto technologie mají omezený datový tok, takže je nutné optimalizovat webové stránky i z hlediska velikosti. Například úvodní stránka webu CrazyGirl má podle analýzy (tabulka č. 2) velikost 1 646 kb. Při připojení 64kbit/s by natažení této stránky trvalo zhruba 3 minuty a 26 sekund, což je nepřijatelné. Žádný uživatel nebude čekat tak dlouho a raději odejde na jiný web, který není tak náročný na velikost dat. U námi analyzovaného webu přitom stačilo zmenšit rozlišení obrázků a změnit komprimaci, protože fotografie měly zbytečně vysokou kvalitou. Po těchto změnách web několikanásobně snížil svou velikost. Podle Duyne, D. K. a Landay, J. A. (2005, s. 599) lze optimalizovat velikost webu i jinými způsoby: Odstraněním zbytečných obrázků, zvuků, miniaplikací a zásuvných modulů. Využitím HTML prvků místo grafických obrázků tam, kde je to opodstatněné. Opakovaným využitím obrázků. Tisk Upravit webové stránky lze také pro tisk. Protože není potřeba vždy tisknout všechny obrázky a jiné nedůležité objekty které se na stránce nacházejí, doporučují se vytvořit oddělené CSS soubory. Hlavička HTML dokumentu pak může obsahovat následující kód. <link rel= stylesheet type= text/css media= screen href= screen.css /> <link rel= stylesheet type= text/css media= print href= print.css /> Emailová adresa Ochrana proti robotům, kteří procházejí weby a shromažďují emailové adresy má také své opodstatnění. Chceme-li chránit svoji emailovou schránku před nevyžádanou poštou, máme několik možností: Pomocí opsání interpunkčních znamének a jiných znaků emailová adresa potom vypadá např. takto emailova(zavinac)adresa(tecka)cz. Nahrazením za obrázek roboti neumí číst obrázky, takže stačí text emailové adresy uložit jako bitmapu. JavaScript využití JavaScriptu nebo jiného programovacího jazyka na straně uživatele lze taktéž využít. Možností jak přelstít roboty je nespočet.

4 Vlastní řešení 36 Pomocí CSS Stu Nicholls publikoval na svých stránkách ( http://www.cssplay.co.uk/ menu/email.html) možnost, jak pomocí CSS znemožnit robotům nalezení adresy. Trik je v použití inverzního řetězce, kdy robot dokáže přečíst pouze emailovou adresu pozpátku, tedy nesmyslný text, a uživatel ji vidí správně. <a style= unicode-bidi:bidi-override; direction:rtl >zc.aserda@avoliame</a>

5 Závěr 37 5 Diskuse a závěr Cílem práce bylo prozkoumat možnosti optimalizace webové prezentace z hlediska standardů, nových technologií a doporučení. V práci jsou prezentovány nejzákladnější poznatky podložené dlouholetou praxí v oblasti webdesignu. Bohužel daný rozsah nedovoloval obsáhnout větší část problematiky, kdy by se mohla analyzovat použitelnost stránek, vzhled webu. Více prostoru se mohlo věnovat konkrétním postupům při tvorbě zpětných odkazů a zapracování klíčových slov do obsahu webu nebo také vedení PPC kampaní. Problém, který nastal při zpracování práce byla částečná nekompatibilita některých postupů. Byl tedy zvolen kompromis, který upřednostnil variantu vhodnou pro daný typ projektu. Lze tedy říci, že není možné zcela optimalizovat webové stránky pro všechny výše zmíněné metody, ale to neznamená, že by se neměly optimalizovat vůbec. V teoretické části byl čtenáři prezentován vývoj a současné možnosti využití standardů, dále byl čtenář obeznámen se základními možnostmi optimalizace pro handicapované uživatele, návštěvníky využívající rozdílných technologií, zmíněna byla také praktická použitelnost stránek a optimalizace zejména pro fulltextové vyhledávače. Následná analýza se zaměřila nejen na statistiky návštěvnosti a zvyklosti uživatelů, ale také na vyhodnocení slabých a silných stránek, postavení vzheldem ke konkurenci a umístění ve vyhledávačích. V praktické části jsou tyto poznatky aplikovány přímo na vybranou webovou stránku, na které jsou také prezentovány nejčastější chyby, kterých se tvůrci dopouštějí. Práce je podpořena nejrůznějšími statistickými údaji a mnoha studiemi, které dopomohly při formování optimálního výsledku. Optimalizace je dlouhodobý proces, kdy je potřeba neustále sledovat nové trendy, analyzovat dosažené výsledky a na jejich základě provádět úpravy. Lze jen těžko odhadovat, jak velký bude mít dopad optimalizace zvoleného inetrnetového obchodu, ale již je možné pozorovat ve statistikách zvýšený zájem o web. Doufám, že bakalářská práce přispěla k lepšímu pochopení procesu tvorby a optimalizace webových pezentací. Byl bych rád, kdyby tyto poznatky vedly ke zkvalitnění webových stránek.

6 Seznam použité literatury 38 6 Seznam použité literatury Cederholm, D. Webdesign s webovými standardy. J. Blažek. 1. vyd. Brno: Zoner Press, 2004. 256 s. ISBN 80-86815-15-3. Duyne, D. K., Landay, J. A. Návrh a tvorba webů : vytváříme zákaznicky orientovaný web. 1. vyd. Brno: CP Books, 2005. 672 s. ISBN 80-251-0508-3. Fishkin, R., Pollard, J. Google Search Engine Ranking Factors [online]. DEOmoz. c2007 [cit. 2009-04-30]. Dostupný z WWW: <http://www.seomoz.org/article/searchranking-factors>. Gemius SA. Rankings.cz [online]. c2000-2005 [cit. 2009-04-21]. Dostupný z WWW: <http://www.rankings.cz/>. Grappone, J., Couzin, G. SEO - Search Engine Optimization. R. Skřivánek, D. Balaštíková. 1. vyd. Brno : Zoner Press, 2007. 328 s. ISBN 978-80-86815-85-5. H1.cz Uživatelské testování použitelnosti (user testing). [online]. [2008] [cit. 2009-04-27]. Dostupný z WWW: <http://www.h1.cz/testovani-pouzitelnosti>. Havrlant, L. Sémantika - pravý význam html značek [online]. [2008] [cit. 2009-05-01]. Dostupný z WWW: <http://semantika.name/> Janovský, D. Použitelnost stránek. [online]. Jak psát web : o tvorbě internetových stránek. [2003] [cit. 2009-04-27]. Dostupný z WWW: <http://www.jakpsatweb.cz/pouzitelnost.html>. Kubíček, M. Velký průvodce SEO : jakdosáhnout nejlepších pozic ve vyhledávačích. 1. vyd. Brno: Computer Press, 2008. 318 s. ISBN 978-80-251-2195-5. Kurtiš, M. Co je to internetový marketing. [online]. 2007 [cit. 2009-04-30]. Dostupný z WWW: <http://www.krutis.com/co-je-to-internetovy-marketing/>. Matějíček, V. Legislativní úprava přístupnosti v České republice. [online]. 2007 [cit. 2009-04-27]. Dostupný z WWW: <http://pristupnost.inspirative.cz/legislativa-cr.html>. NetMonitor SPIR Mediaresearch & Gemius. Výzkum sociodemografie návštěvníků internetu v České Republice [online]. [cit. 2009-04-02]. Dostupný z WWW: <http://netmonitor.cz/outputs/2009_02_total.pdf>.

39 Prokop, M. Přehled standardů W3C. Interval.cz [online]. 2002 [cit. 2009-04-24]. Dostupný z WWW: <http://interval.cz/clanky/prehled-standardu-w3c/>. ISSN 1212-8651. Smička, R. Optimalizace pro vyhledávače - SEO. [online]. [2007] Kniha ve formátu PDF. [cit. 6. 3. 2009]. Dostupný z <http://seo.jasminka.cz/seo-kniha.pdf>. Špinar, D. Charakteristika a výhody přístupnosti. [online]. [2007] [cit. 2009-04-27]. Dostupný z WWW: <http://pristupnost.nawebu.cz/texty/charakteristika-vyhody.php>. Špinar, D. Tvoříme přístupné webové stránky. 1. vyd. Brno : Zoner Press, 2004. 360 s. ISBN 80-86815-11-0. Špinar, D., Pavlíček, R. Pravidla přístupnosti Seznam pravidel. [online]. H1.cz. [2006] [cit. 2009-04-30]. Dostupný z WWW: <http://www.pravidla-pristupnosti.cz/>. TOPlist, Chose.cz. Podíly vyhledávačů v referech [online]. c2009 [cit. 2009-04-30]. Dostupný z WWW: <http://vyhledavace.chose.cz/>. Wideman, M. Expert Project Management - The Role of the Project Life Cycle (Life Span) in Project Management. [online]. [2004] [cit. 2009-04-30]. Dostupný z WWW: <http://www. maxwideman.com/papers/plc-models/1990s.htm>. Wikipedie Cascading Style Sheets [online]. Wikipedie, otevřená encyklopedie. c2001, poslední změna 2. 4. 2009 [cit. 2009-04-22]. Dostupný z WWW: <http://cs.wikipedia.org/ wiki/css>. Wikipedie Internet [online]. Wikipedie, otevřená encyklopedie. c2001, poslední změna 20. 4. 2009 [cit. 2009-04-22]. Dostupný z WWW: <http://cs.wikipedia.org/wiki/ Internet>. Wikipedie Search Engine Optimization [online]. Wikipedie, otevřená encyklopedie. c2001, poslední změna 18. 4. 2009 [cit. 2009-04-30]. Dostupný z WWW: <http://cs.wikipedia.org/wiki/search_engine_optimization>. Wikipedie WYSIWYG [online]. Wikipedie, otevřená encyklopedie. c2001, poslední změna 11. 4. 2009 [cit. 2009-04-22]. Dostupný z WWW: <http://cs.wikipedia.org/wiki/ WYSIWYG>.

Přílohy

A Ukázka zdrojového kódu 41 A Ukázka zdrojového kódu <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/ DTD/xhtml1-transitional.dtd > <html xmlns= http://www.w3.org/1999/xhtml xml:lang= cs lang= cs > <title>crazygirl dámské spodní prádlo, pánské spodní prádlo, plavky</title> <meta name= description content= Internetový obchod CrazyGirl nabízí dámské spodní prádlo, pánské spodní prádlo a plavky. Naleznete zde kvalitní kalhotky, podprsenky, noční prádlo, erotické prádlo, dámské plavky a také plavky 2009. /> <meta name= keywords content= spodní prádlo, dámské spodní prádlo, noční prádlo, erotické prádlo, plavky, plavky 2009, dámské plavky, kalhotky, podprsenky, crazygirl /> <meta name= language content= czech /> <meta http-equiv= content-language content= cs /> <meta name= robots content= index, follow /> <meta name= googlebot content= index, follow /> <meta name= distribution content= Global /> <meta name= revisit-after content= 7 days /> <meta http-equiv= content-type content= text/html; charset=utf-8 /> <meta http-equiv= expires content= -1 /> <meta http-equiv= pragma content= no-cache /> <meta http-equiv= cache-control content= no-cache /> <link rel= stylesheet type= text/css media= screen href=./css/screen.css /> <link rel= stylesheet type= text/css media= print href=./css/print.css /> </head> <body> <div id= top-menu > <a href= http://www.crazygirl.cz/ title= Úvodní stránka CrazyGirl >home</a> <a href= http://www.crazygirl.cz/obchodni-reklamacni-zarucni-podminky/ title= obchodní podmínky >obchodní podmínky</a> <a href= http://www.crazygirl.cz/mapa-stranek.html title= mapa webu >mapa webu</a> </div> <a href= http://www.crazygirl.cz/ title= Úvodní stránka CrazyGirl ><img src=./img/ logo_crazygirl.gif alt= Logo CrazyGirl - odkaz na úvodní stranu /></a> <menu id= hlavni-rozcestnik > <li>

A Ukázka zdrojového kódu 42 <h1><a href= http://www.crazygirl.cz/podprsenky title= podprsenky >PODPRSENKY</a></h1> <a href= http://www.crazygirl.cz/podprsenky/push-up title= podprsenky - push-up >Push-up</a> <a href= http://www.crazygirl.cz/podprsenky/soft title= podprsenky - soft >Soft</a> <a href= http://www.crazygirl.cz/podprsenky title= podprsenky >Více...</a> </li> <li> <h1><a href= http://www.crazygirl.cz/kalhotky title= kalhotky >KALHOTKY</a></h1> <a href= http://www.crazygirl.cz/kalhotky/tanga title= kalhotky - tanga >Tanga</a> <a href= http://www.crazygirl.cz/kalhotky/boxerky title= kalhotky - boxerky >Boxerky </a> <a href= http://www.crazygirl.cz/kalhotky title= kalhotky >Více...</a> </li> <li> <h1><a href= http://www.crazygirl.cz/plavky-2009 title= plavky >PLAVKY</a></h1> <a href= http://www.crazygirl.cz/plavky-2009/dvoudilne title= plavky 2009 - dvoudílné >Dvoudílné</a> <a href= http://www.crazygirl.cz/plavky-2009 title= plavky 2009 >Více...</a> </li> <li> <h1><a href= http://www.crazygirl.cz/nocni-pradlo title= noční prádlo >NOČNÍ PRÁDLO</a></h1> <a href= http://www.crazygirl.cz/nocni-pradlo/kosilky title= noční prádlo - košilky >Košilky</a> <a href= http://www.crazygirl.cz/nocni-pradlo/pyzama title= noční prádlo - pyžama >Pyžama</a> <a href= http://www.crazygirl.cz/nocni-pradlo title= noční prádlo >Více...</a> </li> <li> <h1><a href= http://www.crazygirl.cz/doplnky title= doplňky >DOPLŇKY</a></h1> <a href= http://www.crazygirl.cz/doplnky/puncochy title= doplňky - punčochy >Punčochy</a> <a href= http://www.crazygirl.cz/doplnky title= doplňky >Více...</a> </li> <li> <h1><a href= http://www.crazygirl.cz/eroticke title= erotické prádlo >EROTICKÉ </a></h1> <a href= http://www.crazygirl.cz/eroticke/kosilky title= erotické prádlo - košilky >Košilky</a> <a href= http://www.crazygirl.cz/eroticke title= erotické prádlo >Více...</a> </li>

B Podrobné statistiky návštěvnosti 43 B Podrobné statistiky návštěvnosti Obr. 3: Statistiky návštěvnosti základní přehled (Google Analytics) Obr. 4: Statistiky návštěvnosti používané prohlížeče (Google Analytics) Obr. 5: Statistiky návštěvnosti používané prohlížeče Internet Explorer (Google Analytics)

B Podrobné statistiky návštěvnosti 44 Obr. 6: Statistiky návštěvnosti používané prohlížeče Firefox (Google Analytics) Obr. 7: Statistiky návštěvnosti používané prohlížeče Opera (Google Analytics) Obr. 8: Statistiky návštěvnosti odkazující stránky (Google Analytics)

B Podrobné statistiky návštěvnosti 45 Obr. 9: Statistiky návštěvnosti odkazující stránky klíčová slova (Google Analytics) Obr. 10: Statistiky návštěvnosti rozlišení obrazovky (Google Analytics) Obr. 11: Statistiky návštěvnosti užité počet barev (Google Analytics)

C Další vybrané statistiky 46 C Další vybrané statistiky Obr. 12: Způsob připojení doma (NetMonitor SPIR Mediaresearch & Gemius, 2009, s. 16) Obr. 13: Používané operační systémy (Gemius, 2009)