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
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
Navigace........................................................................................................................... 25 3
4.1
5
6
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
Všeobecná struktura stránky ............................................................................................ 28 5.1
Kostra stránky .......................................................................................................... 28
5.2
Prázdné bloky........................................................................................................... 29
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 6.5
Obsah stránky................................................................................................... 36 Prodejny ................................................................................................................... 38
6.5.1
Stránka vyhledávání prodejny.......................................................................... 38
6.5.2
Stránka prodejny .............................................................................................. 39
6.6 7
Statické textové stránky ........................................................................................... 39
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 8
Profil uživatele ................................................................................................. 45
Administrační systém ....................................................................................................... 45 Zdroj dat ................................................................................................................... 45
8.2
Editovatelná data kostry stránky: ............................................................................. 45
8.3
Kontextové informace .............................................................................................. 46
8.4
Nastavení oprávnění ................................................................................................. 46
9
8.1
10
Závěr................................................................................................................................. 47 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
- všechny hlavní nadpisy označíme značkou
