Projektová analýza webu Calounik-a-dekorater.cz.

Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Aleš Rouček Projektová analýza webu Calounik-a-dekorater.cz. Bakalářská práce 2009

Prohlašuji, že jsem bakalářskou práci na téma Projektová analýza webu Calounik-adekorater.cz zpracoval samostatně a použil pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dne 5. 1. 2009 Podpis 2

1 OBSAH 1 Obsah... 3 2 Autorská anotace... 6 3 Technické provedení... 7 3.1 (X)HTML KÓD a CSS... 7 3.1.1 (X)HTML norma... 8 3.1.2 Rozvržení stránky... 8 3.1.3 Sémantické značky... 9 3.1.4 Kaskádové styly... 10 3.1.5 Podpora prohlížečů... 10 3.2 Optimalizace pro vyhledávače SEO... 11 3.2.1 Výběr nejvýstižnějších slov pro optimalizaci... 11 3.2.2 Optimálně volená klíčová slova... 12 3.2.3 Zacházení s tvary slov a synonymy... 13 3.2.4 Zaindexování našeho webu ve vyhledávačích... 14 3.2.5 Vliv kvality kódu (X)HTML na indexaci... 17 3.2.6 JavaScript... 17 3.2.7 Klientské přesměrování... 17 3.2.8 Závislost na typu a nastavení prohlížeče... 18 3.3 Faktory určující pozice stránek ve vyhledávačích... 18 3.3.1 Klíčová slova ve viditelném textovém obsahu... 18 3.3.2 Klíčová slova v elementu title... 19 3.3.3 Klíčová slova v URL stránky... 19 3.3.4 Množství a váha zpětných odkazů... 19 3.3.5 Text zpětných odkazů a téma dané stránky... 20 3.4 Doporučení pro zvýšení návštěvnosti z vyhledávačů... 20 3.4.1 Zvýšení počtu dotazů, na které má web dobré pozice... 20 3.4.2 Zvýšení míry prokliku nalezených stránek... 21 3.5 URL... 22 3.6 Chybová stránka (404)... 24 3.7 Neindexované stránky... 24 3.8 Základní zásady přístupnosti... 24 4 Navigace... 25 3

4.1 Základní menu... 26 4.1.1 Základní horizontální navigace... 26 4.1.2 Levé menu... 26 4.2 Drobečková navigace... 27 4.3 Kontextová navigace... 27 5 Všeobecná struktura stránky... 28 5.1 Kostra stránky... 28 5.2 Prázdné bloky... 29 6 Struktura webu... 30 6.1 Úvodní stránka... 30 6.2 Materiál... 32 6.2.1 Úvodní stránka... 33 6.2.2 Akce a novinky... 34 6.2.3 Hlavní kategorie... 34 6.2.4 Filtrování produktů ve výpisech produktů... 34 6.2.5 Řazení výrobků ve výpisu produktů... 35 6.3 Výrobci... 35 6.4 Stránka produktu... 35 6.4.1 Obsah stránky... 36 6.5 Prodejny... 38 6.5.1 Stránka vyhledávání prodejny... 38 6.5.2 Stránka prodejny... 39 6.6 Statické textové stránky... 39 7 Funkční prvky... 40 7.1 Fulltextové vyhledávání... 40 7.2 Tisk seznamu zboží... 41 7.3 Newsletter... 42 7.4 RSS... 42 7.5 Stránka objednávek... 43 7.6 Objednání zboží... 43 7.6.1 Objednávka... 43 7.6.2 Informace o zákazníkovi... 43 7.6.3 Odeslání objednávky... 44 7.6.4 Základní pravidla použitelnosti nákupu... 44 4

7.7 Sekce pro uživatele... 44 7.7.1 Profil uživatele... 45 8 Administrační systém... 45 8.1 Zdroj dat... 45 8.2 Editovatelná data kostry stránky:... 45 8.3 Kontextové informace... 46 8.4 Nastavení oprávnění... 46 9 Závěr... 47 10 Použitá literatura... 48 5

2 AUTORSKÁ ANOTACE Není to tak dlouho, co bylo obrovským trendem pro většinu firem a společností pořídit si svoji vlastní webovou stránku. V dnešní době, kdy téměř každý malý živnostník svoji prezentaci na internetu vlastní, začíná záviset více na kvalitním a estetickém zpracování. Ne každý, kdo se rozhodne si webovou prezentaci pořídit, se však v momentálních trendech vyzná. Z vlastní zkušenosti vím, že pokud se zadá projekt vývojářské firmě, obvykle se snaží přizpůsobit výsledné řešení svým zaběhlým praktikám, které se mohou od požadovaného výsledku více či méně lišit. Právě z tohoto důvodu vidím jako velmi výhodné nechat si vypracovat projektovou analýzu od třetí firmy. V mé bakalářské práci, projektové analýze internetové prezentace Calounik-a-dekorater.cz, se o jakýsi návod pro realizaci kvalitního webu snažím. Na začátku práce rozebírám technické provedení, kde se soustředím zejména na volbu správných norem, dodržení validity kódu a upřesňuji, pro které prohlížeče by měly být stránky validní. V dalších částech proberu formu navigace, strukturu stránky i celého webu, dostanu se i na vysvětlení základní funkčnosti dynamické sekce materiál. Ke konci práce vysvětlím funkční prvky na budoucí stránce a základní požadavky na administrativní systém. Právě administrativní systém si většinou nemůžeme moc volit, protože bývá závislý na realizátorovi dané prezentace. Jelikož jsem si vědom, že prezentace Calounik-a-dekorater.cz bude mít striktně obchodní cíl, nejvíce jsem se věnoval SEO optimalizaci pro vyhledávače a vhodnou volbu klíčových slov. Bezesporu právě internetové vyhledávače jsou dnes hlavním zdrojem návštěv webových prezentací menšího a středního rozměru. 6

3 TECHNICKÉ PROVEDENÍ V této kapitole shrnuji základní technické faktory, které by měly být dodrženy při tvorbě nové, moderní internetové prezentace. Právě správnou volbou těchto faktorů, ať už validního (X)HTML kódu, optimalizace pro vyhledávače, dodržení pravidel přístupnosti, či správných meta-tagů získáme z budoucí prezentace maximum. 3.1 (X)HTML KÓD a CSS Je nutné klást velký důraz na validitu výsledného kódu. Jako odpovídající normu pro validitu můžeme brát konsorcium W3C, které nám poskytuje na svých webových stránkách nástroj zvaný Validátor W3C, který po zadání příslušné adresy internetové stránky dokáže určit, zda je stránka napsána validním kódem, popřípadě zobrazit chyby, které se musí pro správnou validitu stránek opravit. Je třeba dát si záležet na přehledném, dobře strukturně i sémanticky stavěném kódu. Snažit se vyvarovat zbytečných tabulkových designů, přebytečných značek v kódu, u nestandardních programovacích metod daný postup vždy patřičně okomentovat. Ulehčí nám to případné budoucí implementace nových, či editace již stávajících vzhledů naší prezentace. Nutným předpokladem je i vyvarování se použití, dříve tak populárních, rámců (tzv. frames). Zajistíme, aby byl kód CSS umístěn do externího souboru (nevyskytoval se mezi HTML značkami). Tím dosáhneme oddělení obsahu od způsobu jeho prezentace a při budoucí editaci CSS kódu najdeme všechny CSS tagy na jednom místě a bude se nám soubor přehledněji editovat. Na každé stránce musí být jasně vyznačeno, jaká kódovací sada byla použita. Zde doporučuji použít kódování UTF-8. Vyvarujeme se pak potíží při nadstavbě internetové prezentace o další jazykové verze. 7

3.1.1 (X)HTML norma I když volba určité normy není pro správné vyhotovení výsledné prezentace rozhodující, doporučuji použít jednu z norem HTML 4.01 Strict, nebo XHTML 1.0 Strict. Při správné volbě normy musíme především myslet na to, abychom dosáhli co možná s nejmenším úsilím validní stránky, a to i přihlédnutím na uživatelská data, která budou uživatelé sami přidávat. Zde stojí za zmínku zejména uživatelské přidávání dat přes WYSIWYG (What You See Is What You Get volně přeloženo Co vidíš, to dostaneš ). Je to nástroj podobný textovému editoru, který nám živě zobrazuje náhled výsledné stránky. Problém je, že často ve svém kódu zanechává spoustu zbytečných značek, a tím kód ztrácí na validitě a nabírá na velikosti. I když není stoprocentní validita pro správné zobrazení v internetovém prohlížeči podmínkou, budeme ji brát do naší prezentace jako nutnost. Pokud jsou stránky validní, mnohem snadněji se pak odhalují chyby, které mohou být zásadní například pro roboty starající se o indexování stránek do databází vyhledávačů. Vhodnou aplikací pro kontrolu validity je výše zmíněný Validátor W3C (http://validator.w3c.org). 3.1.2 Rozvržení stránky Při základním rozvržení stránek je třeba myslet na dnešní nejrozšířenější rozlišení obrazovek uživatelů. V době psaní této bakalářské práce (3. čtvrtletí roku 2008) to jest standardní rozlišení 1024x768 pixelů (zjištěno pomocí statistik Google Analytics). Nesmíme si ovšem představit, že 1024 pixelů na šířku je možné zcela využít. Stačí, aby měl uživatel zapnutý postranní panel svého internetového prohlížeče a náhle máme o více než 50 pixelů méně. Proto se pro návrh naší prezentace budeme držet přizpůsobivé šířce stránek. Užší stránku jsme tím vyřešili, ale bystrého čtenáře určitě napadne, že stránka může být samozřejmě i mnohem širší než 1024 pixelů. Aby nevznikaly zbytečně dlouhé řádky, které mají podstatně horší čitelnost, omezíme přizpůsobivou šířku z obou stran na hodnoty 750 1000 pixelů. To nám zajistí, že naše prezentace bude dobře čitelná na rozlišení s šířkou 800, stejně tak jako na velikých širokoúhlých obrazovkách s rozlišeními 1680 pixelů a vyššími. Následující obrázek znázorňuje rozlišení monitorů návštěvníků internetového magazínu Drumandbass.cz. Tento magazín má denní návštěvnost přes 2000 unikátních návštěvníků, čili dá se považovat za reprezentativní vzorek rozlišení obrazovek. Je třeba ovšem podotknout, že 8

věkové složení návštěvníků se pohybuje mezi 16 až 28 lety. To je skupina lidí, kteří jsou otevření novým technologiím a ve většině případů právě oni mají ve svých domovech velmi moderní zařízení (rozuměj většími a výkonnějšími periferiemi než celkový vzorek). I tak zde vyhrává výše uvedené rozlišení 1024x768 pixelů. 1Google Analytics stav rozlišení návštěvníků Drumandbass.cz ke dni 16.12.2008 Stejně tak jako horizontální rozvržení stránky je důležité i vertikální. S tím již není tak lehké pracovat. Téměř na každé stránce se setkáme s posuvným jezdcem, který nám stránku posouvá směrem dolů. Bez toho se neobejdeme nejspíš ani my. Na co se ale zaměříme je takzvaný přelom stránky. Nahlédneme-li opět do výše vložené tabulky rozlišení monitorů návštěvníků, vidíme, že za průměrnou hodnotu výšky stránky můžeme brát zhruba 800 pixelů. Odmyslíme-li si horní a spodní panel prohlížeče, dostáváme se řádově kolem 650 pixelů. Právě tato hodnota nás bude nejvíce zajímat, protože zde dochází k takzvanému předělu stránky. To je přesně to místo, kde se stránka ztrácí a abychom ji viděli dál, musíme použít posuvný jezdec.v tomto místě stránky je důležité umístit výrazný objekt, který jasně napovídá, že stránka zde nekončí, nýbrž pokračuje dále. Z tohoto důvodu není vhodné na toto místo dávat výrazný přehyb stránky, protože v návštěvnících by to mohlo vzbuzovat dojem, že na tomto místě stránka končí. 3.1.3 Sémantické značky Správné použití sémantických značek mnoho lidí podceňuje, ale právě ty mohou hrát jednu z hlavních rolí při indexování prezentace roboty vyhledávačů. Dalším jejich velkým kladem je 9

použití v alternativních zobrazovacích zařízeních. Zpřehledňují tak obsah stránky, pokud dané zařízení nepodporuje například CSS styly. U naší prezentace Calounik-a-dekorater.cz je pro nás stěžejní dobré umístění ve vyhledávačích, proto budeme brát za nutné správné dodržení následujících značek: - každý nový odstavec textu označíme značkou <p> - všechny hlavní nadpisy označíme značkou <h1> - další nadpisy budeme správně značkovat pomocí <h2> - <h6> - všechny seznamy a odrážky označíme podle jejich druhu - <ul>, <ol>, <dl> 3.1.4 Kaskádové styly Kaskádové styly musí být uloženy výhradně v externích souborech (nebudou se vyskytovat mezi samotným (X)HTML kódem). Zvýší to přehlednost a pozdější úpravy stylu stránky. Je velice žádoucí, aby CSS soubory měly vhodně zvolenou HTTP hlavičku, aby je prohlížeče mohly ukládat do své cache paměti. Při opětovném načtení to výrazně zvýší rychlost zobrazení stránky. Pro definování stránky pro tisk se rovněž využijí kaskádové styly. Vhodně se označí elementy stránky, které se nemají tisknout (navigace, políčko pro vyhledávání, filtry, a další). Použitím kaskádových stylů se vyvarujeme generování dalších tiskových dokumentů, například ve formátu PDF. 3.1.5 Podpora prohlížečů I za té podmínky, že dodržíme stoprocentní validitu naší prezentace, nemáme zaručeno, že se stránka ve všech prohlížečích zobrazí správně. Proto bych zde rád vyjmenoval ty nejvíce používané prohlížeče, ve kterých prezentace musí vypadat přesně podle grafického návrhu (označeny jako nutné ). Dále uvádím další prohlížeče, u kterých již vzhled stránky nemusí stoprocentně odpovídat grafickému návrhu, ale zobrazené změny nesmějí nikterak rozhodit celkovou strukturu stránek a nesmí dojít k jakémukoliv porušení čitelnosti obsahu. 10

Nutné: - MS Windows (98, 2000, ME, XP, Vista) o Internet Explorer 6 o Internet Explorer 7 o FireFox (aktuální verze, momentálně FireFox 3) o Opera (aktuální verze, momentálně Opera 9.6) Ostatní: - Mac OS X o Safari (aktuální verze, momentálně Safari 3.1) o Camino (aktuální verze, momentálně 1.6) - Linux o Konqueror (aktuální verze, momentálně 3.5) 3.2 Optimalizace pro vyhledávače SEO Vzhledem k faktu, že stránky sítě čalounictví a prodejen dekorativního materiálu jsou stránkami, které nabízejí a prodávají služby, je pro nás kapitola SEO optimalizace velice důležitá. Pokud si dáme na optimalizaci pro vyhledávače skutečně záležet, pomocí silných vyhledávačů (jako jsou Google, Seznam, Yahoo a další) k nám přijde velké množství nových návštěvníků, tedy potencionálních zákazníků. 3.2.1 Výběr nejvýstižnějších slov pro optimalizaci Správná volba klíčových slov je jednou z nejdůležitějších faktorů ovlivňujících výskyt naší prezentace v nabídce internetových vyhledávačů. Při jejím sestavování bychom měli využít slova, která se nejvíce vyhledávají, ve spojení se slovy, která charakterizují naši firmu Calounik-a-dekorater.cz. Svoji analýzu těchto slov jsem provedl podle srovnání nejvyhledávanějších frází, které jsou spjaty s čalounictvím, za posledních 12 měsíců. 11

Přibližný průměr objem Klíčová slova vyhledávání látky 14800 křeslo 12100 křesla 9900 látka 5400 pohovka 4400 pohovky 4400 křeslo 1900 čalounictví 1900 rozkládací pohovka 1300 rozkládací pohovky 1300 potahové látky 880 rozkládací křeslo 720 polohovací křeslo 590 prodej látek 480 rozkládací pohovky 320 kožené křeslo 260 látky praha 260 čalouník 260 oprava nábytku 210 rohová pohovka 210 2 - četnost vyhledávání jednotlivých klíč. slov podle Google.cz Klíčová slova můžeme později přidávat a zesilovat tím pravděpodobnost vyhledání právě naší stránky přes určitý vyhledávač. Zejména nesmíme zapomenout na slova, která se obvykle vyskytují ve slovních spojeních. I když slova sama od sebe se příliš často nevyhledávají, právě v daném spojení nám mohou přivést velký počet potencionálních zákazníků. 3.2.2 Optimálně volená klíčová slova Existuje několik zásad, které by měly být při výběru klíčových slov dodržovány. - Klíčová slova by měla podporovat cíle webu. U webu čalounictví by měla podporovat zájem o službu, nebo o prodej. Cílem toho je přilákat zákazníky, kteří jsou ochotni objednat, či zaplatit službu. Nejen ty, kteří chtějí pouze bezplatné informace. 12

- Klíčová slova by měla co nejlépe vyjadřovat obsah cílových stránek. V našem případě tedy stručné a jasné informace o nabízených čalounických službách, včetně katalogu a informacích o síti prodejen. Není vhodné používat všeobecná slova, typu prodej, opravy. Tyto slova sice mohou na stránku přivést velký počet návštěvníků, ale nejedná se o návštěvníky, kteří hledají naše služby, a tak stránku opouštějí. - Klíčová slova by měla mít co nejmenší konkurenci měla by být originální. V opačném případě slovo opět přivede hodně návštěvníků, ovšem placená kampaň by se nám pak nemusela vyplatit. - Pokud máme slovo, které opravdu dobře vystihuje naše cíle, mělo by být toto slovo jedno z nejvyhledávanějších. [5.] 3.2.3 Zacházení s tvary slov a synonymy Uživatelé vyhledávačů používají pro hledání širokou škálu tvarů slov. Nejčastěji vyhledávaná slova si můžeme snadno ověřit například v aplikaci Našeptávač na Seznam.cz. Je velice žádoucí, aby v obsahu stránek, popřípadě i v navigaci, se tato klíčová slova vyskytovala. Výpis nejčastěji hledaných slov a jejich tvarů pro slovo Čalounictví Našeptávač (Seznam.cz a.s.). - čalounictví - čalouněné postele - čalouněná postel - čalounění dveří - čalounické potřeby - čalounění - čalounické látky - čalounictví ostrava 13

3.2.4 Zaindexování našeho webu ve vyhledávačích Dobré zaindexování webu pro vyhledávač je jedním z prvních úkolů, který bychom měli provést při optimalizaci našeho webu. Důležité je vyhnout se následujícím častým chybám. Zdvojený obsah Je velmi důležité předejít situaci, kdy stránky s dvěma různými URL obsahují stejný obsah. Jakmile vyhledávací robot takovou stránku nalezne, druhou již nezaindexuje a v některých případech se může stát, že nezaindexuje ani samotnou první stránku. Jedná se zejména o případy se zpětnými odkazy. Stránka tím přichází o výhodné mezistránkové odkazy, které jí mohouce vyhledávačích posunout směrem vzhůru. Obvykle nebývá velký problém uhlídat si jedinečnost URL v odkazech na našich stránkách. Jistě si však umíme představit, že na cizích stránkách je to nemožné. Pro úplnost níže uvádím nejčastější případy, kdy dochází ke zdvojenému obsahu, kterého se při tvorbě našeho nového webu musíme vyvarovat. 1. Stránky, které mají v sobě parametr, vedou na stejné stránky jako bez parametru. Vyvarovat se například, aby stránka http://www.calounik-a-dekorater.cz/index.php?paramter=true nesměrovala na stejnou stránku jako adresa http://www.calounik-a-dekorater.cz/ 2. Bude-li na naší prezentaci použito stránkování, je třeba zajistit, aby první stránka neměla duplicitní obsah jako stránka s parametrem stránkování. Tedy, aby například stránka http://www.calounik-a-dekorater.cz/index.php neměla stejný obsah jako http://www.calounik-a-dekorater.cz/index.php?parametr=true&page=1 14

3. Zajistit v celé prezentaci, aby se na hlavní stránku odkazovalo vždy bez udání přesného souboru. V našem případě všude používat odkaz http://www.calounik-a-dekorater.cz/, nikoliv však http://www.calounik-a-dekorater.cz/index.php. 4. Zajistit, aby stránky nebyly současně dostupné z více domén třetího řádu. 5. Je třeba myslet na to, že dynamicky generované URL jsou totožné, i když se pořadí jejich parametrů liší. Podobný obsah Další faktor, na který musíme dávat pozor, pokud chceme, aby nám roboti vyhledávačů bez problému zaindexovali všechny stránky, je podobný obsah. Podobný obsah může stejně jako duplicitní obsah přesvědčit vyhledávacího robota, aby podobné stránky ignoroval. Algoritmy, podle kterých robot vyhodnocuje podobný obsah, nejsou známy a neustále se vyvíjí. Níže uvádím několik rad, jak se tomuto problému budeme snažit vyhnout. 1. Budeme klást velký důraz na jedinečnost titulku. Každá stránka, která se bude v prezentaci nalézat, bude mít svůj jedinečný titulek, který bude ve formátu: Úvodní stránka Calounika-dekorater.cz, popřípadě bude-li se jednat o materiál, tak: Název materiálu kategorie výrobků Calounik-a-dekorater.cz. 2. Vyvarujeme se obrázkových nadpisů. Pokud budeme z důvodu hezčího vzhledu nuceni použít obrázkové nadpisy, dáme si extra záležet na tom, aby každý obrázek měl vyplněný HTML atribut alt. Jednak to rapidně pomůže vyhledávačům, jednak to znatelně pomůže lidem, kteří mají z jakéhokoliv důvodu vypnuté obrázky v prohlížeči (PDA, mobilu, atd.). 3. Vyvarovat se velkého množství stránek, které se liší jen maličkými detaily. V takovém případě je lepší se zamyslet a uvážit, zda-li by se to vhodnou kombinací nedalo spojit do jedné stránky. 4. Budeme se snažit, aby zdrojový kód stránek začínal hlavním obsahem, nikoliv hlavičkou, postranními sloupci atd. Zvýšíme tím rychlost i spolehlivost indexace. 15

Flash Pokud bude nutné některé stránky udělat pomocí technologie Flash, musíme přidat i HTML verzi stránek. Pokud by HTML verze nebyla, stránky by byly v podstatě neoptimalizovatelné. Vytvoření souboru Robots.txt Ne každý používá na stránkách soubor Robots txt 1. Je to velice důležitý soubor, který vyhledávač vyhledává jako první. Na stránkách čalounictví nastavíme soubor Robots.txt na následující parametry: User-agent: * Disallow: Tím říkáme, že vyhledávač má prohledat všechny naše stránky. Důležité shrnutí pro vývojáře: Pro lehčí orientaci přikládám stručné shrnutí standardů, které musí vývojáři při programování stránek dodržet, abychom vyšli co možná nejvíce vstříc vyhledávacím robotům. - URL snaha o co nejkratší URL adresy. Pokud musí obsahovat parametry, silně doporučuji nejvíce dva. - TEXT/HTML - vyhledávače indexují zpravidla jen takové dokumenty, které jsou napsány v typu text/html. Google indexuje například i PDF a DOC soubory, ale takovéto soubory prakticky nelze pro optimalizaci využít. - Vyvarovat se duplicitnímu obsahu (vysvětleno viz výše). - Přístupnost stránky musí vyhovovat pravidlům přístupnosti. - Správné nastavení souboru Robots.txt. - Správně zvolené úrovně v navigační struktuře. 1 Robots.txt je textový soubor, který slouží pro povolování, nebo zakazování botů (vyhledávacích robotů). 16

3.2.5 Vliv kvality kódu (X)HTML na indexaci Jak jsem v úvodu řekl, naše internetová prezentace by měla mít stoprocentně validní (X)HTML kód. Právě indexovací roboti vyhledávačů jsou na chyby v kódu velice citliví, mnohem více než například internetové prohlížeče. Pokud robot na své indexovací cestě nalezne závažnější chybu, může se stát, že se zaindexuje jen část stránky, v horším případě se nezaindexuje celá. Pro robota je rovněž velmi výhodné, pokud se do (X)HTML kódu neplete CSS formátování, popřípadě i JavaScript. Jak jsme si již řekli, ty mají své místo ve vlastním externím souboru. Otázkou zůstává mezní velikost kódu, který bude ochotný robot indexovat. Maximální velikost se pohybuje kolem 100 KB, ale nutno říci, že rozumná mez je do 30 KB. 3.2.6 JavaScript JavaScript je kód, který probíhá na straně klienta. Vyhledávače to, samozřejmě, nemohou procházet, proto pokud se rozhodneme použít JavaScriptový kód, měli bychom k tomu vyrobit i adekvátní statickou HTML stránku. 3.2.7 Klientské přesměrování Roboti obvykle nejsou schopni odhalit klientské přesměrování. To je takové, které se odehrává na straně klienta. Klasickým příkladem je javascriptové přesměrování, či meta refresh. Pokud nám to okolnosti dovolí, provedeme přesměrování pomocí HTTP hlavičky (301 nebo 302). Pokud z nějakých důvodů musíme přesměrování skutečně provést na straně klienta, je potřeba, abychom do těla kódu za znak <body> přidali odkaz s atributem <a> na přesměrovávanou stránku. 17

3.2.8 Závislost na typu a nastavení prohlížeče Prohledávací roboti se nechovají stejně jako internetové prohlížeče. Internetový prohlížeč často používá k prohlížení obsahu cookies, či má definovaný typ obsahu (content type). Je třeba myslet na to, že roboti tyto typy nepoužívají, a pokud je stránka přístupná pouze z cookies, robot se k ní nedostane, a tím pádem ani nezaindexuje. V horším případě by to mohl brát za podvod (tzv. Cloaking) a vyřadit celou stránku ze své databáze. 3.3 Faktory určující pozice stránek ve vyhledávačích Existuje mnoho faktorů, které ovlivňují pozici našich stránek ve vyhledávačích. Níže uvedu pět nejdůležitějších, na které se při sestavování naší webové stránky zkusíme zaměřit. 1. Do textového obsahu stránky umístíme klíčová slova 2. Pokusíme se umístit klíčová slova i do atributu title 3. Klíčová slova zakomponujeme i do URL adres stránek 4. Záleží na množství zpětných odkazů (a jejich váze) 5. Text zpětných odkazů a téma dané stránky, ze které se k nám odkazuje [5.] 3.3.1 Klíčová slova ve viditelném textovém obsahu Běžným obsahem se zde rozumí obsah HTML značek v sekci <body>. Viditelný nemusí být hnedka na přední stránce, ale rovněž se indexují například parametry alt u tagu <a>. Důležitým termínem u klíčových slov v obsahu je hustota klíčových slov. Ta vyjadřuje výskyt klíčových slov v poměru k celému textu. Ideální pro vyhledávače je hustota klíčových slov kolem 2 až 10 procent. Význam hustoty klíčových slov ovšem není až tak důležitý. Soustředit bychom se měli především na rovnoměrné rozmístění slov v textu a na to, aby se v textu objevily všechny tvary slova, které mohou být vyhledávány. Nejvyhledávanější varianta by měla být v textu preferována a měla by počtem převyšovat ostatní. S hustotou klíčových slov úzce souvisí také ideální délka obsahu. Pro vyhledávače je optimální délka hlavního obsahu 300 500 slov. I když vyhledávači delší obsah nevadí, 18

uživatel by se v něm mohl ztrácet. Texty kratší než výše zmíněný obsah se jen stěží optimalizují. 3.3.2 Klíčová slova v elementu title Pro vyhledávače je rovněž velice důležitý titulek stránka parametr <title>. Při jeho sestavování bychom měli dát pozor, aby byl dostatečně krátký, obsahoval hlavní klíčová slova a měl ve svém názvu název stránky. 3.3.3 Klíčová slova v URL stránky Jedním z nejdůležitějších faktorů ovlivňující pozici ve vyhledávání je URL. Při tvorbě URL bychom si měli dát pozor, aby nebyla delší než zhruba 70 znaků, aby obsahovala co nejvíce klíčových slov a byla celkově dobře čitelná. Vytvořit všem stránkám krátkou a jasnou URL adresu ovšem nebývá vždy lehký úkol. Mysleme však na to, že pro vyhledávač je mnohem lepší (a pro nás tím i optimálnější) kratší URL bez klíčových slov, než delší s klíčovými slovy. Nesmíme rovněž zapomenout na to, že za oddělovač považuje vyhledávač tečky, pomlčky, nebo lomítka. Podtržítka, znak _, vyhledávače za oddělovač neberou. 3.3.4 Množství a váha zpětných odkazů Důležitou roli při umístění našich stránek ve vyhledávači má rovněž počet a váha zpětných odkazů, a to jak na našich, tak na cizích stránkách. Někdy se tento faktor pojmenovává nesprávně PageRank. PageRank je název pouze od společnosti Google. Na našich stránkách bude tvořit nejvíce zpětných odkazů navigace. Logicky první úroveň bude mít na sebe umístěno nejvíce zpětných odkazů, a proto je dobré volit ty nejvýstižnější a klidně i hodně konkurenční klíčová slova. Zatímco jak půjdeme po hierarchickém stromu níže 19

(do druhé a nižší úrovně menu), stránky budou mít čím dál méně zpětných odkazů. Pro tyto odkazy můžeme volit specifická, méně konkurenční slova. 3.3.5 Text zpětných odkazů a téma dané stránky Mimo počtu zpětných odkazů je také velmi důležitým faktorem text zpětných odkazů. Ať už se jedná o samotný text obsahu, uvedený mezi značkami <a>, nebo text v parametru alt. Obecně můžeme říci, že optimálně by text odkazů měl být shodný, nebo alespoň hodně podobný jako fráze, pro kterou je optimalizován koncový web. Stejně tak jako text obsahu by měl souviset i text samotné stránky, která na naši stránku odkazuje. Tento fakt se nejlépe řeší pomocí kontextové navigace. Kontextovou navigací lze podpořit mimostránkové faktory ovlivňující umístění naší stránky ve vyhledávačích. Jedná se jak o slovní odkazy přímo v textu, tak i v poslední době velmi oblíbenou funkci související články. 3.4 Doporučení pro zvýšení návštěvnosti z vyhledávačů Čistě teoreticky lze doporučit pár způsobů, které by měly vést ke zvýšení návštěvnosti z neplacených odkazů internetových vyhledávačů. Jejich stoprocentní spolehlivost však nemůže být nikdy zaručena. Zvýšením pozic ve vyhledávačích jsme se zaobírali v předešlé kapitole, proto bych se nyní rád zaměřil na zvýšení počtu dotazů, na které bude mít web dobré pozice ve vyhledávačích, a na zvýšení míry prokliku nalezených odkazů. 3.4.1 Zvýšení počtu dotazů, na které má web dobré pozice Základní filozofií tohoto způsobu je vymyslet slovo, častěji slovní spojení, které samostatně nepatří mezi nejvyhledávanější výrazy, ovšem ve vhodném slovním spojením dokáží přivést poměrně velký počet jasně cílené návštěvnosti. 20

V naší prezentaci čalounictví se zaměříme na tyto způsoby: 1. Kontextová navigace jako velmi výhodný způsob vidím kontextovou navigaci. U naší prezentace se použije zejména u katalogu materiálu, kde plánujeme mít propojení zboží podle několika společných slov. Právě toto propojení (kontextová navigace) nám pomůže zvýšit počet dotazů. 2. Informační architektura webu na našem webu budeme používat několik typů navigace. Kromě primární, umístěné v horním menu, a sekundární, umístěné v levém sloupci na podstránkách, budeme používat i další navigační schémata. Například novinky přímo na úvodní stránce. 3. Komentáře jako velmi výhodné se jeví i komentáře uživatelů. Pomocí nich dostaneme do obsahu naší stránky i jiná slova, podle kterých nás může vyhledávač zaindexovat. I když se to na první pohled může zdát divné, budou pro nás prospěšná i mírně nespisovná slova, která bývají obvykle těžko umístitelná přímo do obsahu. 3.4.2 Zvýšení míry prokliku nalezených stránek Z vlastní zkušenosti víme, že po vyhledání stránky libovolným vyhledávačem pro nás není vždy tím nejdůležitějším to, co najdeme na první pozici, ale často se ještě díváme, jaký má výsledek vyhledávání titulek, či jaký k titulku nabízí popis. Právě na tyto dva parametry se nyní podíváme. Co se týče titulku, tak u něj máme situaci jednodušší. Všechny vyhledávače berou titulek z tagu <title>. Proto je důležité, aby v prezentaci čalounictví byl titulek vždy správně volen a to tak, že na začátku bude mít název dané stránky. V optimální situaci by tento název měl obsahovat nějaká klíčová slova, která jsou s čalounictvím spjata, měl by být dostatečně krátký, aby se ve vyhledávači zobrazil celý a na konci titulku vždy uvedeme název stránky. To už jen proto, aby se při výsledcích vyhledávání zobrazovalo vždy v titulku jméno naší společnosti (stránky) a tím zvyšovalo povědomí o firmě (stránce). U popisku máme situaci poněkud složitější. Vyhledávače totiž tvoří popisek různě. Některé vezmou prvních pár slov viditelného obsahu stránky, jiné zas sahají pro text i do tzv. Meta description. A když si k tomu připočteme, že rozdíly jsou nejen v různých vyhledávačích, ale 21

i na stejném vyhledávači v čase, těžko budeme tvořit určitý popisek. Ovšem i na to zde uvedu pár rad, jak se k vhodnému popisku alespoň přiblížit. 1. Pokud to bude v našich silách (záleží na počtu stránek), vložíme do každé stránky jednu až dvě věty (100 200 slov). Obstaráme, aby v dané větě bylo co nejvíce klíčových slov, která budou potencionální návštěvníci vyhledávat. 2. Samotný text stránky začneme hlavním nadpisem, který bude správně označen atributem <h1>, popřípadě <h2>, který bude obsahovat nejdůležitější klíčová slova. Opět jsou to slova, která budou návštěvníci nejvíce vyhledávat ve spojitosti s návštěvou našich stránek. 3. Použijeme stejná slova hned v prvním odstavci, který následuje za nadpisem. 4. Ostatní části stránky, by měly být umístěny ve zdrojovém kódu až za hlavním obsahem. 3.5 URL Jak bylo výše popsáno URL by měla být z hlediska dobrých pozic ve vyhledávačích dlouhá zhruba 60 70 znaků. Kdybychom museli volit mezi delší URL, která bude obsahovat všechna klíčová slova, a mezi URL, která bude splňovat výše popsanou délku, i když nebude obsahovat všechna klíčová slova, budeme volit kratší variantu. Ideálně bychom však měli co nejvíce klíčových slov do URL vměstnat. Na oddělování klíčových slov budeme používat pomlčku. Pomlčka je dobře naleznutelná na klávesnici, narozdíl například od znaků umístěných na klávesnici nad číslicemi. URL by měla být editovatelná přes administrátorské prostředí stránek a měla by se standardně generovat automaticky. Vhodné pole pro generování URL může být název stránky, či nadpis daného článku. Po automatickém vygenerování URL musí být možnost ruční editace. Ruční editace lze využít například na vymazání obecných slov, aby zbyl dostatek místa na slova klíčová. Administrační systém musí mít rovněž zabudovanou automatickou kontrolu jedinečnosti URL, aby se předešlo situaci, že by dvě různé stránky měly stejnou URL adresu. Správný způsob tvorby URL bude respektovat následující pravidla: - v URL sekci nesmí být přímo název souboru. Sekce materiál bude mít adresu http://www.calounik-a-dekorater.cz/material, nikoliv http://www.calounik-adekorater.cz/material/index.php 22

- v URL na daný soubor není koncovka souboru. Stránka s kontaktem, která je umístěna v souboru kontakt.php, bude mít adresu http://www.calouni-adekorater.cz/kontakt - adresa domovské stránky musí fungovat jak s www, tak bez. Adresa http://calounia-dekorater.cz bude přesměrována pomocí serverového přesměrování 301 na adresu http://www.calounik-a-dekorater.cz - pozor na pomlčky na konci. Stránka http://www.calounik-a-dekorater.cz/material/ bude pomocí serverového přesměrování přesměrována na http://www.calouni-adekorater.cz/material Doporučení struktury tvorby URL Doporučuji následující tvary URL: - Úvodní stránka webu: http://www.calounik-a-dekorater.cz/ - nedochází k žádnému přesměrování. - URL stránky s kontaktními informacemi bude mít adresu dostatečně krátkou a dobře zapamatovatelnou. Ideálně http://www.calouni-a-dekoratér.cz/kontakt. - URL hlavních sekcí se generují automaticky podle názvu sekce. Například sekce materiál bude mít URL http://www.calounik-a-dekorater.cz/materiál. - URL podsekcí se generují rovněž automaticky podle názvu sekce, a to následujícím stylem: http://www.calounik-a-dekorater.cz/materia/latky. - URL daného produktu nebude společně se sekcemi, do kterých patří, ale přímo za názvem domény. Čili produkt Látka Moss Zlatá bude mít URL http://www.calounik-a-dekorater.cz/latka-moss-zlata. - V případě, že bychom měli v budoucnu více jazykových verzí, URL jazykových verzí bude vypadat následujícím způsobem http://www.calounik-adekorater.cz/cs/. Pokud budou existovat nějaké alternativní domény, tj. domény s jiným názvem, které budou směrovat na naši stránku, je důležité zajistit přesměrování pomocí serverového přesměrování 301. 23

3.6 Chybová stránka (404) Pokud přistoupíme na stránku s neexistujícím obsahem, nebo na stránku s neplatným URL, server vrátí chybové hlášení kód 404. Na to musíme myslet a stránku, která se nám při tomto hlášení zobrazí, naplánovat. Tato stránka předchází stránkám s prázdným výpisem databáze. Chybová stránka by měla být vypracovaná v podobném designu, jako je naše stránka. Je vhodné, aby obsahovala vodítka, která ztracenému uživateli ukáží, kde obsah hledat. Vhodné je například políčko pro vyhledávání. Je také velmi výhodné, pokud chybová stránka po svém zobrazení automaticky upozorní správce webu. Podá informaci, že některý obsah není dostupný. 3.7 Neindexované stránky Existují stránky, které chceme záměrně vyloučit z vyhledáváni vyhledávači. Mohou to být například stránky různých formulářů, knih hostů či komentářů. Jako optimální varianta se jeví protokol robot exclusion. Soubor robots.txt, umístěný v rootu (kořenovém adresáři) stránek, obsahuje záznamy o stránkách, na kterých se nemá vyhledávat. Je třeba zmínit, že v některých případech se stránky neindexují například v JavaScriptu nebo flashových stránkách. 3.8 Základní zásady přístupnosti Jedním z velmi důležitých předpokladů při tvorbě moderního webu je dodržení zásad přístupnosti. Přístupný web nepřináší pouze ulehčení pro zdravotně handicapované, ale je připraven i pro neobvyklé prohlížeče, operační systémy či softwarové vybavení. Výhodným faktorem je, že vytvořit přístupný web obvykle nedá více práce, než vytvořit nepřístupný, ovšem musíme se již od začátku řídit určitými pravidly. V následujícím výčtu uvádím rady, 24

kterými bychom se měli řídit a nejsou ve větší míře rozebírány někde jinde v této bakalářské práci. - Každý netextový objekt na stránce by měl mít svůj textový ekvivalent. Například u všech obrázků by měl být vyplněn popisek alt. Právě ten vyhledávače hledají. - Myslet dopředu na dostatečnou velikost písma. Jen malé množství lidí používá možnost zvětšení písma v prohlížeči. Čím se nám text snáze čte, tím déle udržíme pozornost na stránce. Zároveň je žádoucí použít větší řádkování. - Velice důležité je zvolit dostatečně kontrastní barvy popředí a pozadí. Razantně to zvyšuje čitelnost a může to výrazně pomoci návštěvníkům, kteří mají starší monitory či sedí ve špatně osvětlených podmínkách. - Odkazy vedou do stejného okna prohlížeče. Pouze pokud odkazujeme na jinou stránku, tak abychom nepřišli o návštěvníka, otevřeme odkaz v novém okně. Je třeba ho ovšem na to upozornit. - Přehledně strukturovat text. Dlouhé bloky textu lze rozdělit pomocí nadpisů, seznamů atd. - Texty psát srozumitelným jazykem. Ne každý čtenář je odborník - Každá stránka by měla obsahovat dostatečně viditelný odkaz na mapu stránek. - Odkazy musí být v textu odlišeny nejen barvou, ale i podtržením. Je to silný zvyk na internetu, že odkazy jsou potržené. Samozřejmě dbát na to, aby jiný text podtržený nebyl. Pokud se odkaz bude otevírat v novém okně, dát k odkazu značku, že se tomu tak bude dít. [4.] 4 NAVIGACE Jednou z nejdůležitějších částí webu, na kterou se při programování musíme zaměřit, je navigace. Právě ta je na stránce nejdůležitějším prvekem, který nám pomáhá v pohybu a v celkové orientaci. Samozřejmě i pro tvorbu navigace existují určité normy, které se v této analýze objeví, doplněné o vlastní zkušenosti a názory na správnou tvorbu. Hlavní navigace by pro sebe měla mít vyhraněnou jednu z nejviditelnějších pozic webu a musí být jasně oddělena (ať už grafickým zpracováním, nebo místem) od okolního obsahu. 25

Důležité je, aby navigace byla konzistentní, tedy aby byla na celém webu umístěna na stejném místě. Tím výrazně přispějeme k tomu, aby uživatelé nemuseli přemýšlet při procházení našeho webu. Stejné, nebo alespoň podobné odkazy, by měly být umístěné v jedné části menu. Na naši prezentaci čalounictví budeme mít dvě hlavní sekce navigace. Horní navigaci a levé menu v sekci materiál. Dále budeme využívat kontextovou a drobečkovou navigaci. 4.1 Základní menu Základní, nebo chcete-li hlavní, navigace se bude skládat z horního horizontálního menu (viz wireframe úvodní stránky) a levého menu v sekci materiál. 4.1.1 Základní horizontální navigace Je tvořena horní horizontální lištou. Umístění je jasně dáno v nakresleném wireframu. Budeme klást důraz na to, aby byla co nejvíce viditelná, aby na právě zvolenou sekci webu již nešlo znova kliknout a aby právě zvolená sekce byla nějakým způsobem zviditelněna. Hlavně z toho důvodu, aby uživatel vždy jasně viděl, v které části webu se nachází. Odkazy budou graficky zpracovány, tudíž na tomto místě není důležité, aby byly odkazy podtrženy. 4.1.2 Levé menu Levé menu, k nalezení v sekci materiál, bude mít hierarchickou strukturu. Bude kopírovat produktový strom, který naše čalounictví bude nabízet. Bude dodržovat následující podmínky: - Vždy bude rozbalena pouze jedna větev. Bude to ta, která je zrovna aktivní. - Aktivní (rozbalená) větev produktového menu bude barevně rozlišena od ostatních, aby se návštěvníci dobře orientovali. Vhodné je rozlišit podsložky pomocí odsazení. - Jasně bude označena i aktuálně vybraná stránka. 26

4.2 Drobečková navigace Drobečková navigace je velmi dobrý pomocník u rozsáhlejších webů. Dokáže nám vždy ukázat přesnou podobu, kde se na stránkách nacházíme. Drobečková navigace by měla začínat úvodní stránkou, opisovat hierarchii webu a končit stránkou, na které se právě nacházíme. Ta jediná není odkazem. Standardním, nikoliv nutným, znakem, který se v drobečkové navigaci používá pro oddělení sekce webu, je znak >. Názorný příklad správné drobečkové navigace: Úvodní stránka > Materiál > Látky > Mosso Zlatá Umístění drobečkové navigace přenecháme grafikovi webových stránek. Je však třeba, aby myslel na dobrou viditelnost. Klasické umístění drobečkové navigace je někde pod hlavičkou webu. Drobečkovou navigaci můžeme použít i sofistikovaně pro klíčová slova do vyhledávačů. Podle internetového experta Steva Kruga jsou základními pravidly pro drobečkovou navigaci: - umístit dostatečně nahoru stránky - úrovně oddělovat znakem > - použít dostatečně malé písmo - použít slogan Zde se nacházíte - poslední položku uvést tučně - nepoužívat drobečkovou navigaci místo názvu [3.] 4.3 Kontextová navigace Kontextovou navigací se myslí zejména odkazy na stránky, které mají stejný obsah, jsou nějakým parametrem k sobě vázané. Jsou to odkazy, které však nejsou součástí hlavní navigace. Buď se vyskytují přímo v textu, nebo mají své pevné místo na stránce. 27

V našem případě budeme kontextovou navigaci používat pro podobný materiál. Všeobecně se dá použít pro další známe funkce, jako jsou související zboží, nejprodávanější zboží atd. 5 VŠEOBECNÁ STRUKTURA STRÁNKY V této kapitole si ukážeme, jak bude vypadat základní struktura stránky. Tato struktura bude pro všechny stránky společná. V další kapitole nazvané Struktura webu, probereme vnitřní stránky, které se budou od sebe v maličkostech lišit. 5.1 Kostra stránky Jako kostru stránky budeme brát takové prvky, které jsou viditelné téměř na každé stránce. Logicky je rozdělíme do několika bloků: - Logo logo čalounictví bude umístěno v levém horním rohu. U webových stránek je to jakýsi nepsaný standard. Na všech stránkách, kromě úvodní strany, bude logo sloužit i jako odkaz na úvodní stránku. Do popisku title bude umístěn krátký popis společnosti, popřípadě co klik na logo vyvolá (například Na úvodní stranu ). - Slogan stručné a výstižné vyjádření činnosti firmy. Měl by být dostatečně krátký, ale ne příliš obecný. - Kontaktní údaje nejdůležitější kontaktní údaj je uveden na každé stránce. Vhodný údaj je v případě hot linky telefon, popřípadě všeobecný email. - Vyhledávání fulltextové vyhledávání obsahuje na každé stránce pouze pole pro vložení vyhledávaného textu a tlačítko Vyhledej. Vyhledávání se budeme věnovat více v jedné z příštích kapitol. - Políčko pro přihlášení uživatele pouze dvě textová pole. Jedno pro uživatelské pole, druhé pro heslo. V poli pro heslo se objevují skryté znaky. Dále bude umístěno tlačítko Přihlásit. - Hlavní menu horizontální lišta: 28

o Úvodní stránka o Materiál o Služby o Historie o Prodejny o Kontakt - Odkazy na funkční typy stránek o Moje objednávky odkaz bude rovněž umístěn v hlavní navigaci, ale bude graficky rozlišen. - Levé menu levé menu se vyskytuje na stránkách s materiálem. V případě ostatních stránek, kdy levé menu nebude zobrazeno, se na jeho místě bude vyskytovat kontextová navigace. - Drobečková navigace bude se vyskytovat na všech stránkách, vyjma stránky úvodní. - Patička na všech stránkách podobná. Nese informaci o vlastnických právech a v případě potřeby může zobrazovat firmu, která web realizovala. 5.2 Prázdné bloky Na stránce by se neměly vyskytovat žádné prázdné bloky (logické části webu). Již při počátečním programování je třeba myslet na to, aby pokud jeden blok nebude použit, automaticky zmizel a nerozhodil tak okolní design stránek. 29

6 STRUKTURA WEBU V této kapitole postupně podrobně probereme každou stránku webu, jak z pohledu návrhu vzhledu, tak z funkčního hlediska. 6.1 Úvodní stránka Úvodní stránka je první stránkou, kterou návštěvník vidí. Pochopitelně je to právě ta, která má za úkol zaujmout a z které si návštěvník odnáší rozhodující pocit. Nabízí nám prostor pro umístění těch nejdůležitějších informací. Zejména takových, kterými vynikáme před konkurencí. Na úvodní stránce se budou vyskytovat následující bloky: - Hlavní nadpis webu - v našem případě poslouží logo společnosti. - Krátký popis krátký popis společnosti. Tento popis společnosti umístíme i do meta-description. - Blok Proč využívat naše služby přímo na titulní stránku umístíme blok s výhodami naší společnosti oproti konkurenci. Jedna z podstatných výhod naší společnosti je možnost registrace, objednávání a rezervace materiálu na prodejnách. Spolu s vedením čalounictví bude třeba pečlivě prodiskutovat, kolik takových výhod, o kterých stojí napsat, čalounictví má. V případě, že by jich bylo více a blok s výhodami by pak zabíral zbytečně moc místa, je možné udělat blok ve flashové variantě s tím, že by se jednotlivé výhody střídaly. Získali bychom tím podstatně více prostoru, z druhé strany, může docházet k jevu, že každý návštěvník uvidí jen pár výhod. Proto do té doby, než budou mít stránky vyšší návštěvnost bych se přiklonil k verzi napsat všechny výhody do jednoho bloku. - Blok prodejny obsahuje mapu České republiky, kde jsou nakresleny prodejny sítě čalounictví. Po kliknutí na vybraný kraj přejdeme na stránku s výpisem prodejen daného kraje. - Blok newsletter obsahuje jedno políčko pro vložení textového obsahu (čili e- mailovou adresu zájemce) a tlačítko přihlásit. Po kliknutí na tlačítko přihlásit bude automaticky vygenerován a poslán kontrolní email, ve kterém zájemci přijde 30

odkaz, který vede na dokončení registrace. Až po kliknutí na tento odkaz bude zájemce regulérně zaregistrován k odběru newsletteru. - Blok novinky Blok s novinkami obsahuje výpis produktů, na které chceme návštěvníky upozornit. Vždy nebývá žádoucí, aby systém nové produkty vyplňoval sám. Proto budeme striktně vyžadovat, aby systém umožnil i ruční volbu nového produktu. Součástí tohoto bloku je i odkaz na stránku s materiálem. - Aktuality Téměř vždy je zákazníkům co říci. Ať už jsou to tiskové zprávy společností, od kterých zboží bereme, naše vlastní tiskové zprávy či upozornění na akce, slevy atd. Právě pro tuto komunikaci se zákazníky využijeme blok Aktuality. Vzhledem k velikosti prezentace stojíme před rozhodnutím, zda dát odkazy na tři poslední novinky, kde by byly na úvodní stránce zobrazeny pouze nadpisy daných novinek, nebo zobrazit na úvodní stránce pouze jednu novinku, za to s nadpisem i anotací. Doporučuji zobrazit pouze jednu novinku s tím, že v bloku bude umístěno tlačítko na zobrazení všech aktualit. To povede na stránkovaný seznam všech zatím zveřejněných novinek. 6-1wireframe úvodní strany 31

6.2 Materiál Stránka materiálu je odlišná od ostatních stránek. Návštěvník si zde bude moci prohlédnout materiály, které čalounictví používá, popřípadě si materiál rezervovat a vyzvednout na své prodejně. Stránky materiálu obsahují: - Levé menu levé menu slouží jako sekundární navigace pro produktový strom materiálu. Dále se v levém menu objeví odkazy na stránku s novinkami a stránka s akčním zbožím. Přehledně je to vidět na obrázku wireframe materiál. Je důležité, aby administrační systém uměl plně spravovat produktový strom a aby layout webu byl připraven na rozšiřování či zužování produktového stromu. - Kontextové odkazy odkazy na související certifikáty a jiné zajímavosti budou umístěny na stránce s kategorií daných produktů. Ocenění konkrétního výrobku bude umístěno na stránce daného výrobku. - Newsletter blok pro přihlášení k odběru newsletteru se bude nacházet v levém sloupci. Bude obdobný tomu, co se nachází na hlavní stránce (popsáno výše). - Nadpis a úvodní odstavec každá stránka bude mít svůj vlastní nadpis a úvodní odstavec. Právě tento úvodní odstavec může být použit v meta description. - Flashová animace flashová animace v sekci materiál může být použita pro propagaci určitého druhu zboží či k jiným komerčním účelům. Na ostatních stránkách má animace pouze estetický charakter. 32

6-2wireframe stránky materiálu 6.2.1 Úvodní stránka Na úvodní stránce materiálu bude umístěn krátký odstavec, který bude co nejvýstižněji popisovat, co lze na stránce nalézt. Dále zde budou odkazy, které povedou na statické stránky, na kterých budou vysvětleny následující výhody: - Možnost registrace stránka popisující výhody registrace, a to možnost rezervace materiálu, možnost zobrazení aktuálních cen. - Možnost vyhledání nejbližší prodejny, kde se zákazník může zaregistrovat. - Možnost stažení kompletního seznamu materiálu ve verzi PDF soboru. 33

Na stránce se rovněž bude nelézat blok s novinkami a aktuálními akcemi. Administrační systém bude umět ohlídat, zda na tomto místě je platná novinka nebo akce a v případě, že zrovna žádná akce nebude, umístí na stránku blok Vybrané zboží. 6.2.2 Akce a novinky Tato sekce zobrazuje administrátorem vybrané akční zboží. Základní strukturou je shodná s ostatními stránkami ze sekce materiál až na následující rozdíly. - Produkty, které jsou v sekci uvedené, vlastní příznak akčního zboží. Jsou zobrazeny i v samotném seznamu materiálu. - Sekce může obsahovat jednak akce vyhlášené pro všechny návštěvníky, jednak akce vyhlášené jednotlivou prodejnou. V případě akce jedné prodejny musí být uživatel přihlášen, aby tuto akci viděl. - Filtrování produktů musí probíhat dynamicky, filtrování musí probíhat vždy jen na produkty, které jsou v akci. 6.2.3 Hlavní kategorie Kategorie jsou nejlépe vidět z přiloženého wireframu. 6.2.4 Filtrování produktů ve výpisech produktů Administrační systém musí povolovat editaci filtrů pro každou kategorii zvlášť. Každý filtr má svoji URL, a to ve tvaru http://www.calounik-a-dekorater.cz/url-sekce?nazev-filtru=x. Filtry jsou standardně všechny zaškrtnuté, pomocí odškrtnutí vynecháme daný parametr z výpisu. Vždy bude možné zaškrtnout vše pro odstranění všech filtrů. Názvy filtrů budou zároveň odkazy na aktivaci daného filtru. Nikdy nesmí odkaz směrovat sám na sebe, tudíž právě aktivní filtr není odkazem. Samozřejmostí je možnost volit více filtrů najednou. 34

Filtry výrobců se stanovují pro každou kategorii zvlášť. Každá kategorie výrobků, v naší sekci materiál, může a s největší pravděpodobností bude mít jiné výrobce. V případě většího počtu výrobců můžeme seznam JavaScriptem opticky zkrátit. Nabídneme prvních x výrobců a pod tím odkaz na zobrazení všech. Pokud by měl návštěvník vypnutý JavaScript, zobrazí se mu plný výpis výrobců. Tato volba je závislá na skutečném počtu výrobců, proto bych zvážení použitelnosti skrývání přenechal realizačnímu týmu. 6.2.5 Řazení výrobků ve výpisu produktů Řazení výrobků (materiálu) má výchozí hodnotu, a tou je abecední seřazení podle názvu zboží v dané kategorii. Řazení může být sestupné nebo vzestupné a provádí se pomocí kliku na šipku umístěnou vedle názvu filtru. Počet produktů ve výpisu je dělitelný počtem řádků, aby nedocházelo ke špatnému formátování. Procházení stránek výpisu je zajištěno pomocí tlačítek následující a předchozí. 6.3 Výrobci Stránka s výrobci obsahuje seznam textových odkazů na stránky výrobců umístěných do dvou sloupců seřazených podle abecedy. Nadpisem stránky bude Seznam výrobců a v krátkém popisu uvedeme, kam se uživatel dostane, pokud klikne na některý z odkazů. Na stránce konkrétního výrobce bude nadpisem název výrobce, potom krátký odstavec popisující stručně společnost výrobce, který se použije rovněž jako meta-description, dále pak odkazy na všechny kategorie, ve kterých máme nějaký materiál od daného výrobce. 6.4 Stránka produktu Stránka produktu obsahuje vyčerpávající informace o produktu a zároveň se snaží prodat co nejvíce důležitých informací. Extra záležet na viditelném umístění bychom si měli dát u následujících parametrů: 35

- Nadpis (název) produktu - Dostupnost produktu zobrazuje se pouze přihlášeným uživatelům - Cena produktu zobrazuje se pouze přihlášeným uživatelům - Tlačítko objednat zobrazuje se pouze přihlášeným uživatelům 6.4.1 Obsah stránky Na stránce se budou vyskytovat následující elementy: - Nadpis (název) produktu - Zmenšená fotografie po kliku na fotku se otevře lightbox s větší fotografií. Do fotek si budeme hromadně přidávat vodoznak. - Krátký popis zboží většinou obdržíme v importním souboru CSV od výrobce. Jedná se o marketingově nejzásadnější informaci o produktu. Často se zákazník právě podle této informace rozhoduje o tom, zda zapojí tento produkt do užšího výběru. - Tlačítko Objednat pomocí tohoto tlačítka uživatel si může rezervovat zboží na své prodejně. - Tlačítko Přidat do seznamu k vytištění toto tlačítko zajistí funkci přidání daného výrobku do seznamu k vytištění, který pak může na prodejně výrazně ulehčit nákup. - Cena bez DPH cena se zobrazuje pouze přihlášeným uživatelům a je závislá na tom, v které prodejně se zákazník registroval. o Uvedena je i cena s DPH, ale s menší vizuální prioritou. o Je třeba, aby někde blízko ceny bylo uvedeno tlačítko, které bude vysvětlovat, kde se cena bere a že je závislá na prodejně, ve které se zákazník registroval. - Dostupnost uvádí dostupnost zboží na dané prodejně, kde se zákazník registroval. Tato funkce je zobrazena pouze přihlášeným uživatelům. - Související dokumenty tato sekce obsahuje odkazy na související dokumenty, návody, manuály, které jsou k danému produktu svázány (jsou-li nahrané na webu). - Popis zboží delší text, který popisuje dané zboží. Může být editovatelný a musí být možnost na něm provádět základní strukturování textu (nadpisy, odstavce, 36