Webová fotogalerie pro prezentaci a prodej fotografií

Bankovní institut vysoká škola Praha Katedra matematiky, statistiky a informačních technologií

Webová fotogalerie pro prezentaci a prodej fotografií Diplomová práce

Autor:

Bc. Michal Fic Informační technologie

Vedoucí práce:

Praha

Ing. Bohuslav Růţička, CSc.

Únor 2011

Prohlášení: Prohlašuji, ţe jsem diplomovou práci zpracoval samostatně a v seznamu uvedl veškerou pouţitou literaturu. Svým podpisem stvrzuji, ţe odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen se skutečností, ţe se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací. V Praze dne 15. 2. 2011 Bc. Michal Fic

Děkuji vedoucímu diplomové práce ing. Bohuslavu Růţičkovi, CSc. za jeho rady z praxe k této oblasti a vedení při psaní samotné práce.

Anotace Předloţená práce se zabývá problematikou spojenou s webovou prezentací jednotlivců i společností a všemi náleţitostmi, které je zapotřebí zvládnout pro vznik úspěšného webu. Teoretická část práce nejprve představuje základní stavební prvky, ze kterých můţe být webová prezentace tvořena. Probírá jednotlivé technologie, jejich moţnosti, technická specifika a jejich vyuţití. Přibliţuje přípravu designu stránek s jejich zákonitostmi. Poukazuje na testování pouţitelnosti vytvořených stránek tak, aby bylo vše před nahráním do prostoru hostingu plně funkční a uţivatelsky přívětivé. Nejsou zde opomenuty ani zásady pro výběr vhodného hostingu a doménového jména. Poslední kapitola teoretické části představuje čtenáři problematiku SEO optimalizace obsahu vytvořeného webu a analytické nástroje pomáhající pochopit chování návštěvníků na webu. Praktická část práce přibliţuje souhrn zjištění a finální výběr řešení pro námi realizovanou webovou prezentaci. Jednotlivé kapitoly praktické části kopírují svou strukturou teoretickou část a ke kaţdé z uvedených oblastí poskytují zkušenosti, které byly získány při vývoji a provozu webové prezentace VASFOTOGRAF.COM Annotation This thesis is focused in problematic connected with personal and company web presentation. And all that is needed for creation of successful web. Theoretical part firstly introduce basic parts from which could be web composed. It going through each technology their possibilities, technical specification and options of their deployment. It takes closer look on design of webpage’s and its law. Its show testing phase of building pages in way that before uploading to the hosting everything will works fine and be user friendly. It did not miss rules for choosing suitable hosting and domain name. The last chapter of theoretical part will introduce to reader problem connected with SEO optimalization of content from created web and also analytic tools which helps understand behavior of visitors on the website. Practical part takes closer look on summary and final solution which we chose for our web presentation. Each chapters of practical part are following structure of theoretical part and for each from noted field shows experience earned during development and maintenance of presentation VASFOTOGRAF.COM

Obsah 1

ÚVOD .............................................................................................................................. 7

2

ZÁKLADNÍ STAVEBNÍ PRVKY WEBOVÝCH STRÁNEK ............................... 9

2.1

HTML ............................................................................................................................. 9

2.2

XHTML (extensible hypertext markup language) .................................................. 10

2.3

CSS – kaskádové styly ................................................................................................. 11

2.4

Flash .............................................................................................................................. 12

2.5

Java Script .................................................................................................................... 14

2.6 3

PHP (Personal Home Page) ........................................................................................ 15 VÝBĚR ŘEŠENÍ PRO WEBOVOU PREZENTACI.............................................17

3.1 Website builder ............................................................................................................ 17 3.1.1 Tvorba prezentace s vyuţitím komplexní sluţby specializovaného serveru ........... 17 3.2

Redakční systémy ........................................................................................................ 18

3.3 Statické/dynamické stránky ....................................................................................... 20 3.3.1 Strukturní editory....................................................................................................... 21 3.3.2 Wysiwyg editory ....................................................................................................... 21 3.3.3 Prohlíţeče .................................................................................................................. 21 3.4 Fotogalerie .................................................................................................................... 22 3.4.1 Jalbum ........................................................................................................................ 23 4 STRUKTURA WEBU ................................................................................................25 4.1 Web design.................................................................................................................... 27 4.1.1 Vzhled a rozloţení stránky ........................................................................................ 27 4.1.2 Zásady správného designu ........................................................................................ 28 4.1.3 Rozloţení webové stránky ........................................................................................ 28 4.2 Barvy ............................................................................................................................. 33 4.2.1 Červená ...................................................................................................................... 34 4.2.2 Ţlutá ........................................................................................................................... 34 4.2.3 Zelená......................................................................................................................... 34 4.2.4 Modrá ......................................................................................................................... 34 4.2.5 Bílá ............................................................................................................................. 35 4.2.6 Černá .......................................................................................................................... 35 4.3 Rozlišení ........................................................................................................................ 38 4.3.1 Grid (mříţka) ............................................................................................................. 38 4.4 Fonty.............................................................................................................................. 40 4.4.1 Kontrast textu ............................................................................................................ 44 4.4.2 Velikost fontů ............................................................................................................ 44

5

TESTOVÁNÍ POUŢITELNOSTI.............................................................................46

6

DOMÉNA A HOSTING .............................................................................................47

7

JAK DÁT O STRÁNKÁCH VĚDĚT .......................................................................49

7.1 SEO optimalizace obsahu ........................................................................................... 49 7.1.1 Katalogy ..................................................................................................................... 49 7.1.2 Fulltextové vyhledávače ............................................................................................ 50 7.2 SEO metody .................................................................................................................. 51 7.2.1 On page faktory a jejich optimalizace ...................................................................... 51 7.2.2 Off page faktory a jejich optimalizace ...................................................................... 53 7.3 8

Analýza přístupu.......................................................................................................... 54 PRAKTICKÁ ČÁST ...................................................................................................56

8.1 Definování cílů ............................................................................................................. 56 8.1.1 Seznámení s cílovou skupinou .................................................................................. 56 8.1.2 Produkt – sluţba ........................................................................................................ 59 8.1.3 Analýza konkurenčních webů ................................................................................... 59 8.1.4 SWOT analýza.......................................................................................................... 63 8.2 Návrh struktury webu VASFOTOGRAF.COM ..................................................... 64 8.2.1 Uvítací stránka ........................................................................................................... 64 8.2.2 Úvodní stránka........................................................................................................... 64 8.2.3 Články ........................................................................................................................ 64 8.2.4 Galerie ........................................................................................................................ 65 8.2.5 Guestbook/kniha návštěv .......................................................................................... 65 8.2.6 Moje Technika ........................................................................................................... 65 8.2.7 Odkazy ....................................................................................................................... 66 8.2.8 Ke staţení................................................................................................................... 66 8.2.9 Kontakt....................................................................................................................... 67 8.2.10 Mapa webu ............................................................................................................ 67 8.3 Výběr doménového jména .......................................................................................... 68 8.3.1 Doména a hosting ...................................................................................................... 68 8.4

Návrh webového designu v podání VASFOTOGRAF.COM ................................ 70

8.5 Analýza přístupů - SEO optimalizace ....................................................................... 73 8.5.1 Optimalizace obsahu – zvýšení přístupů návštěvníků z vyhledávačů ..................... 73 8.5.2 Země návštěvníků – jazyková lokalizace VASFOTOGRAF.COM ........................ 75 8.5.3 Výsledky optimalizace SEO ..................................................................................... 77 8.6 Moţnost prodeje fotografií ......................................................................................... 77 8.6.1 Systém PayPal ........................................................................................................... 78 9 ZÁVĚR .........................................................................................................................79

1 Úvod Pro svou diplomovou práci jsem si vybral téma zaměřené na návrh a vývoj webové prezentace. Tato problematika mne oslovila a získané informace se snaţím uplatnit při provozu mých vlastních webových stránek VASFOTOGRAF.COM. Důvodem, proč jsem se začal zajímat o problematiku webové prezentace, byla má záliba v digitální fotografii. Tak jako ostatní fotografové, i já jsem se chtěl tímto způsobem prezentovat. Stál jsem o to mít svou vlastní webovou prezentaci. Ta měla přiblíţit návštěvníkům svět digitální fotografie, představit mou práci přátelům, kamarádům a ostatním, zajímajícím se o tuto problematiku. Dá se říci, ţe na začátku, kdy jsem se myšlenkou své vlastní webové prezentace zabýval, jsem nedisponoval patřičnými vědomostmi nutnými pro úspěšné zakončení tohoto snaţení, tj. kvalitní webové galerie se svými návštěvníky a svým vlastním ţivotem. Ale i přesto jsem se rozhodl věnovat svůj čas k získání potřebných informací a k nalezení řešení, které by mi umoţnilo navrhnout a vytvořit svůj první vlastní web. V dnešní době internetu, kdy nás ve virtuálním světě obklopují všemoţné webové prezentace napříč tematickým spektrem, jsem chtěl vytvořit něco víc neţ obyčejné stránky. Ale jak dosáhnout tohoto cíle, bez toho aniţ byste chtěli zaplatit nemalou částku vývojářské firmě, která toto řešení udělá na míru? Cílem mé diplomové práce je představit čtenáři proces vývoje webové stránky. Poukázat na všechny zákonitosti a záludnosti, představit nezbytné kroky, které musí být realizovány, aby vznikla fungující webová prezentace. Taková, kterou budou schopni návštěvníci nalézt v rámci vyhledávačů a nevytvořit tak další nudnou stránku, která dojde k zapomnění v zápětí, co je přivedena na svět. Vše se odvíjí od zaměření naší prezentace, od toho co od ní očekáváme. Někteří budou chtít získat prostřednictvím své webové prezentace nové zákazníky, jiní budou chtít představit své produkty, prezentovat svou práci, další jen získat prostor pro svou vlastní sebeprezentaci. Čeká nás stejná nebo podobná cesta, kterou musí absolvovat firma před tím, neţ bude chtít proniknout na trh. Internet představuje velké mnoţství konkurence v jednom prostoru, měli bychom znát anebo mít představu o konkurenčních webech s obdobnou problematikou, o tom co obsahují a na co lákají své návštěvníky. V mém případě to bude webová fotogalerie zaměřena na různé tematické celky. K bliţším specifikacím se dostaneme na dalších stránkách této práce, poté co si probereme teorii, moţná technická řešení, registrujeme si doménu, vybereme poskytovatele hostingu a do jeho prostoru nahrajeme naši prezentaci. Základem úspěchu je vytvořit si svou vlastní konkurenční výhodu, která nám umoţní získat

-7-

přízeň návštěvníků. Stejně tak se zaměříme na nástroje, které nám budou poskytovat důleţité informace o návštěvnících a jejich chování na našem webu. Přestavíme si základní kroky, které jsou nezbytné k tomu, abychom přivedli návštěvníky na náš web. Neţ se však pustíme do našeho snaţení, musíme strávit nějaký čas nad stolem s tuţkou a papírem, nebo u svého notebooku, a vytvořit si podklady pro zdravý základ našeho snaţení. Snahou této práce je pomoci čtenářům porozumět problematice webových stránek a usnadnit jim vstup do světa WWW (World Wide Web).

-8-

2 Základní stavební prvky webových stránek Webové stránky jsou rozdělovány na statické a dynamické. Základem statických webových aplikací jsou stavební prvky jako HTML, XHTML, CSS.

Statické stránky představují

jednoduché HTML stránky propojené prostřednictvím hypertextových odkazů. Oproti tomu dynamické webové stránky spolupracují s databázemi, se scripty a jejich obsah se mění dle poţadavků návštěvníků. Část HTML dokumentu je doplněna speciálními příkazy, které jsou webovým serverem nahrazeny částmi HTML kódu. V kaţdém dokumentu server vyhledává příkazy, ty provádí a výsledky vkládá do dokumentu, který je poté publikován návštěvníkovi jako odpověď na poţadavky. Na úvod si představíme jednotlivé stavební prvky s jejich historií vzniku.

2.1 HTML Jazyk HTML (HyperText Markup Language) je jedním ze základních jazyků vyuţívaných pro publikaci dokumentů na internetu. Tento jazyk pomocí značek (tagů) přiřazuje vlastnosti jednotlivým částem textu umístěným na stránce a tím ovlivňuje výsledný vzhled stránky. Byl vytvořen počátkem roku 1990 Timem Bernersem-Leem jako součást projektu WWW. Měl za úkol zprostředkovat vědcům sdílení výsledků výzkumů po celém světě. Tento projekt vznikal pod vedením CERNu (Centre Européenne de Rechere Nucléaire – Evropské centrum jaderného výzkumu). První verze tohoto jazyka byla označena jako HTML 0.9. Umoţňovala formátovat text do několika úrovní, zvýrazňovat text, vkládat do textu odkazy a obrázky. Popularizaci tohoto řešení podpořil vyvinutý internetový prohlíţeč Mosaic, který byl napsán pro operační systém NextStep. Jeho součástí byl jak samotný prohlíţeč, tak editor WWW stránek. Zobrazení těchto stránek bylo závislé na tom, zda autor pouţil ty samé obecné zásady při jejich psaní. To vedlo k vytvoření specifikací pro jazyk HTML. Standard HTML verze 2.0 vznikl z důvodu vzrůstajících poţadavků uţivatelů na WWW. Byl představen v červnu roku 1994. Vycházel z předešlé verze, kterou rozšiřoval o moţnost nasazení formulářů. Roku 1996 je představena HTML verze 3.0, která byla velkým krokem vpřed. Řady uţivatelů pracujících s HTML se rozrůstaly a s nimi i jejich poţadavky. Vyţadovali větší funkcionalitu a snahou bylo na jejich poţadavky reagovat rozšířením HTML o nové moţnosti. Nová verze měla být odpovědí na tyto poţadavky. Problém však nastal v prohlíţečích, které nebyly schopné zobrazit korektně a patřičně rychle HTML stránku. Bohuţel se nenašlo ani řešení, které by implementaci v dané době umoţňovalo. Proto bylo nezbytné odpovědět vydáním aktualizované verze. Koordinace vývoje mělo na starost -9-

konsorcium W3C (World Wide Web Consortium). To navrhlo vlastnosti, o které měl být rozšířen jazyk HTML. Tak vznikla počátkem roku 1997 nová verze HTML 3.2, která ovšem neobsahovala celou funkcionalitu verze HTML 3.0. Její funkcionalita vycházela z vlastností prohlíţečů té doby, jakým byl např. NetScape Navigator nebo Internet Explorer. Nová verze přinášela podporu tabulek, obrázků, rámů, zarovnání textu, většího výběru pouţitého písma a stylových elemetů ovlivňujících vzhled při plné kompatibilitě s verzí HTML 2.0. Vývoj HTML pokračoval dál, kdy v prosinci roku 1997 byla představena verze HTML 4.0. Ta rozšiřovala funcionalitu předešlých verzí o moţnosti vyuţívání scriptovacích jazyků, multimédií, hyperlinků a stylů. Také přinesla větší funkcionalitu moţností tisku webových stránek, vkládání objektů, rozšířený model tabulek včetně podpory vícejazyčných textů. Poslední verzí se mělo stát HTML verze 4.01, které uţ nemělo být dále modifikované. Bylo představeno v prosinci roku 1999. Změny přicházely v podobě kaskádových stylů CSS, rozšíření JavaScriptu, opravovaly nedostatky předešlých verzí. Nástupcem HTML se měl stát XHTML (rozšiřitelný hypertextový značkovací jazyk).1

2.2 XHTML (extensible hypertext markup language) V případě tohoto jazyka se jedná o kombinaci HTML verze 4.01 s jazykem XML. Jazyk XML (eXtensible Markup Language) je dosti podobný jazyku HTML a to včetně značek, parametrů a hodnot. Výhoda XML spočívá v tom, ţe autor můţe pouţívat pro tvorbu stránek svých vlastních tagů, které mu pomohou přiřadit publikovaným informacím poţadovaný význam. To je rozdíl oproti HTML, kde je nezbytné definovat, jak se má text zobrazit, bez toho aniţ bychom poskytovali informaci o významu obsahu. XML má napomoci autorům stránek pouţít větší mnoţství meta informací, které umoţní snaţší vyhledávání v internetových stránkách. Dojde-li prostřednictvím značky k indentifikaci klíčových slov (název produktu) v rámci stránky, můţeme vyhledávat v rámci internetu a zobrazovat jen sekce (části stránek) obsahující poţadované termíny (produkty). Nikoliv, jak je tomu v HTML, kde získáváme jako odpověď na naše hledání celou stránku. To, jakým způsobem, mají být jednotlivé oblasti zobrazeny, určuje v XML styl. Prostřednictvím stylu pak můţeme přiřadit jednotlivým elementům poţadované vlastnosti. To umoţňuje uloţit informace o vzhledu stránek do samostatného souboru, který je společný pro více stránek. Budeme-li pak chtít provést změnu vzhledu, stačí editovat a upravit pouze jediný soubor a realizovaná

1

Www.w3.org: Introduction to HTML [online]. 2011 [cit. 2011-01-30]. Introduction to HTML. Dostupné z WWW: .

- 10 -

změna se promítne do všech stránek, které daný styl pouţívají. Obdobné vlastnosti je vyuţíváno v HTML 4.01, kde jsou představeny Kaskádové styly CSS (Cascading Style Sheets). Ty zde však působí pouze jako doplněk umoţňující upravit vzhled. XML dokument, který nemá definován styl, nemůţe být zobrazen.2 Kombinací vlastností XML a HTML verze vzniká nový jazyk XHTML. Aktuální verzí tohoto jazyka je verze XHTML 1.1.3

2.3 CSS – kaskádové styly Kaskádové styly CSS slouţí k formátování textu. Definují typ pouţitého písma, jeho velikost, výšku řádku, barvu popředí a pozadí, umoţnují definovat vlastnosti jednotlivých sekcí HTML dokumentů. Na počátku, kdy začaly být pouţívány HTML soubory, nebylo moţné provádět ţádné definování stylů. Hlavní snahou bylo zprostředkovat informace prostřednictvím těchto strukturovaných dokumentů. Autoři definovali, která část textu je samotný nadpis, která odkaz a která má být zvýrazněna. Interpretace těchto poţadavků byla určována samotnými prohlíţeči. Výsledný vzhled stránek se v jednotlivých prohlíţečích lišil. Způsobem, jak provést rozloţení stránky, bylo nasazení tabulek. Tohoto způsobu bylo dlouhou dobu vyuţíváno. Poloha objektů byla definována pomocí tabulek. Docházelo tak k vkládání tabulek do tabulek, aby bylo moţné rozdělit stránku na sektory. Toto řešení však mělo své nevýhody. Obsah jednotlivých buněk se zobrazil aţ poté, co byla načtena celá tabulka. Docházelo k tomu, ţe velká část kódu definovala formátovací příkazy a jen jeho nepatrná část obsahovala poţadovaný obsah. Díky tomu se celá stránka načítala dlouho, obzvláště v době, kdy spojení s internetem bylo realizováno přes modem. Základním nedostatkem však byla ztráta strukturovatelnosti dokumentu od hlavního a důleţitého obsahu, k méně podstatnému. A to komplikovalo práci robotů, kteří potřebovali v obsahu vyhledávat a dále s ním nakládat, a znemoţňovalo zobrazovat obsah v negrafických prohlíţečích. Proto bylo zapotřebí najít řešení, které by tyto nedostatky odstranilo a poskytlo poţadovanou funkčnost. S tímto řešením přišlo opět Konsorcium W3C, které roku 1994 představilo první verzi CSS. Tento nástroj a jeho moţnosti se natolik zalíbil webovým designérům, ţe došlo k jeho rozšíření. Výrobci prohlíţečů toto řešení implementovali do nových verzí svých prohlíţečů a mohla tak začít nová éra webových stránek s CSS.

2

Kosek.cz : XML [online]. 1999 [cit. 2011-01-30]. XML. Dostupné z WWW: .

3

W3C : XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) [online]. Druhá aktualizace. 2002, srpen 2002 [cit. 2011-01-30]. XHTML 1.0. Dostupné z WWW: .

- 11 -

CSS mohou být umístěny do samostatného souboru, který obsahuje nezbytné informace pro vytvoření celého vzhledu stránek. Výhodou, která vzniká oddělením CSS od HTML, je zmenšení velikosti souboru, jenţ má za následek rychlejší načtení stránek v prohlíţeči. CSS stejně jako HTML, jsou definovány standardem, který nám zajišťuje, ţe naše stránky budou v prohlíţeči čitelné i do budoucna. Změnou určitých vlastností v CSS souboru promítneme změnu do všech stránek, které čerpají zdrojové informace pro formátování stránky. Pouţití CSS je moţné kdykoliv. Moţnosti, které poskytovaly dříve tabulky, je moţné dnes realizovat prostřednictvím CSS. A vyuţijeme-li místo tabulek CSS, získáme moţnost vytvářet strukturované dokumenty, kdy dojde k oddělení obsahu stránky od samotného vzhledu. Výsledný kód bude přehledný. Nevýhoda vyplývající z nasazení CSS je fakt, ţe některé prohlíţeče zobrazují stránky formátované prostřednictvím CSS rozdílným způsobem.4

2.4 Flash Flash je technologie, s jejíţ pomocí je moţné vytvářet sloţitější animace. Pracuje s vektorovou grafikou, která umoţnuje vytvořit datově malé soubory. Díky tomu je moţné tyto animace pouţít i na webových stránkách, které vyţadují rychlé načítání obsahu. Původně slouţil pro tvorbu reklamních bannerů. Dnes je moţné jeho prostřednictvím vytvářet celé webové prezentace, on-line hry, interaktivní aplikace anebo obohatit stránky psané (X)HTML o interaktivní obsah. Flashové animace mohou obsahovat i zvukovou stopu. Předchůdce Flashe se jmenoval SmartSketch a vytvořila jej společnost FutureWave Software ze San Diega. Jejich snahou bylo vytvořit nástroj, který by zjednodušil kreslení v počítači, které pak mělo být snadnější neţ na samotný papír. Byl zaloţen na Javě, od které se však následně ustoupilo z důvodu jejich vysokých nároků na rychlost a spolehlivost. Tento produkt vznikl koncem roku 1994. V roce 1996 byl přejmenován na FutureSplash Animator. První verze Flashe 1.0. vzniká v lednu roku 1997, kdy společnost Macromedia kupuje FutureSplash Animator. Ten umoţňoval vytvářet první Flashové animace. Dochází k jeho přejmenování na dnes ve světě internetu známé jméno Flash. Ten se stává klíčovým nástrojem na poli designových a animačních nástrojů, který v dnešní době ke své práci vyuţívají miliony profesionálů.5

4

STANÍČEK, Petr. Webtip.cz [online]. 6. 6. 2001 [cit. 2010-11-15]. Kaskádové styly CSS - 1. díl. Dostupné z WWW: . 5

Cold hard flash [online]. 18. 2. 2008 [cit. 2010-10-12]. Grandmasters of Flash: An Interview with the Creators of Flash. Dostupné z WWW: .

- 12 -

V roce 2005 byla uskutečněna největší akvizice v historii společnosti Adobe Systems, kdyţ došlo k odkoupení společnosti Macromedia, a tím k rozšíření portfolia společnosti Adobe Systems o technologii Flash. K tomu, aby byla zobrazena flashová animace na monituru návštěvníka webu, je zapotřebí aby měl ve svém počítači nainstalován program Adobe Flash Player od společnosti Adobe. V případě, ţe je vyţadován tento přehrávač k zobrazení obsahu stránky, moderní prohlíţeče si automaticky vyţádají od uţivatele doinstalování zásuvného modulu. V případě Internet Exploreru je vyuţíváno Active X, v případě Firefoxu NP API pluginu.(viz Seznam pouţitých symbolů a zkratek). Prostřednictvím Flashe je moţno vytvořit poutavé prezentace, které budou vybočovat z řady ostaních webových prezentací. Jsou schopné oţivit a rozhýbat statický design stránek. Bohuţel se však nehodí pro vše a je zapotřebí jeho nasazení a rozsah zváţit. Flash animace patří mezi tzv. prvky ActiveX, které jsou zneuţívány určitými jedinci k napadení a poškození počítače. Proto jsou tyto prvky některými uţivateli automaticky blokovány a nedojde k jejich zobrazení. Stejně tak se tímto způsobem chrání administrátoři na firemních sítích. Z toho vyplývá, ţe pouţijeme-li čistě tuto technologii, ochudíme se o určité procento návštěvníků, kteří navštíví náš web a neuvidí korektně celý jeho obsah. Flash můţe být doplněn o Action script díky němuţ získává další moţnosti uplatnění. Flash bez Action scriptu umoţňuje: zobrazovat a animovat vektorovou grafiku, křivkovým objektům poskytovat efekty stínování nebo rozmazávání, vyuţít přechodové a průsvitné výplně, zobrazovat text prostřednictvím fontů, které jsou součástí animace, vyuţívat pohybové a tvarové přeměny objektů. Flash vyuţívající Action script umoţňuje: manipulovat a reagovat na chování pouţitých objektů, přehrávat audio a video soubory, oboustranně komunikovat se serverem, načítáním externích dokumentů a médií. Tento výčet nezahrnuje veškeré moţnosti Flashe, ale poukazuje pouze na několik základních. K tomu, abychom byli schopni s Flash soubory pracovat, musíme mít nainstalován software Adobe Flash, který vytváří soubory s koncovkou FLA. V nich jsou uloţena všechna data, která před tím, neţ budou nahrána do webového prostředí, musí být převedena do formátu

- 13 -

SWF. Je důleţité si uvědomit, ţe převod z formátu FLA do SWF je nevratný proces a převod zpět do původního stavu není moţný. Proto je nutné animaci před exportem do SWF řádně uloţit, abychom měli k dispozici zdrojový soubor, který umoţní provádět změny, a my tak nemuseli začínat od začátku. Dostupné převodníky umoţňují získat soubor FLA, který však není shodný se zdrojovým souborem. Soubory SWF mohou být přehrávány prostřednictvím Flash Playeru. Stejně tak můţe být přehráván prostřednictvím desktopových aplikací, jakými jsou přehrávače podporující soubory formátu SWF (KMPlayer). 6

2.5 Java Script Jedná se o objektově orientovaný programovací jazyk. Občas bývá zaměňován za jiný programovací jazyk s podobným jménem, Javu. Prostřednictvím Java Skriptu je moţno na webových stránkách vykonávat úkoly jako manipulace a pohyb textu, reakce na událost jakou můţe být kliknutí na tlačítko nebo vykonání matematických výpočtů nad daty. Stejně tak, je moţné získávat pomocí tohoto jazyka informace o návštěvníkovi stránek, jako jsou rozlišení jeho monitoru, verzi pouţitého prohlíţeče, nebo vykonávat akce zaloţené na podmínkách varující návštěvníky o špatně zapsaných datech do formulářů. Moţností uplatnění tohoto jazyka je samozřejmě mnohem víc. Programovací jazyky umoţňují provádět různé druhy výpočtů nad různými typy dat. Kromě matematických operací je schopnýpracovat s textem, zjistit jak je dlouhá věta anebo kde se poprvé vyskytla specifikovaná část textu. Stejně tak je umí

porovnávat

určité

hodnoty,

vykonávat

akce,

které

vychází

z podmínek

a jejich plnění. Ve chvíli kdy je podmínka splněna jako například kliknutí na tlačítko, dochází ke spuštění scriptu.7 Vše začalo, kdyţ společnost Netscape najala Brendana Eiche, aby navrhl a implementoval nový jazyk do připravovaného prohlíţeče Netscape Navigator. Jazyk, který vznikl, byl nazván LiveScript. Byl funkční a rychlý. Před dokončením beta verze Netscape Navigator 2.0 byl přejmenován na JavaScript. V prosinci 1995 došlo k představení tohoto jazyka veřejnosti. Měl doplňovat moţnosti, které poskytovalo HTML a Java. Byl schopný manipulovat se znaky a s obsahem dokumentů lépe neţ Java aplety a přinášel interaktivitu a sofistikované uţivatelské rozhraní do statického webu. Nepotřeboval ţádné kompilátory, scripty mohly být 6

HOZÍK, Martin. Flash.jakpsatweb.cz . 7

[online].

2011

[cit.

2010-10-12].

Seznámení

s

Flashem.

Dostupné

z

WWW:

DUCKETT, Jon. Beginning HTML, XHTML,CSS, and JavaScript. Canada: Wiley publishing, 2010. 865 s. ISBN 978-0-470-54070-1.

- 14 -

vkládány přímo do HTML stránek. Tento silný scriptovací jazyk si získal přívlastek „jednoduchý”. Z počátku obsahoval mnoho bezpečnostních chyb a vyznačoval se nedostatkem vývojových a integračních nástrojů a podpory. Přesto se však roţšířil více neţ se předpokládálo. JavaScript byl terčem kritiky po mnoho let ať uţ z pohledu odlišnosti od programovacího jazyku Java či Perlu, případně jeho uţití webdesignery bez úvahy o budoucím pouţití a kompatibiltě. Přesto byl ve své době jedním z nejpopulárnějších programovacích jazyků na webu. Poskytl základ pro další generace klientsky orientovaných dynamických webových aplikací.8

2.6 PHP (Personal Home Page) PHP je interpretovaný scriptovací jazyk. Tyto jazyky vyuţívají externích programů (interpreter) pro spouštění scriptů (zdrojových textů). Scripty jsou vloţeny do HTML souboru. Interpretr PHP vytvoří čistý HTML kód, který se dostane klientovi jako výsledek původního scriptu. Předchůdcem úspěšného PHP byl produkt, který se jmenoval PHP/FI. Vytvořil jej Rasmus Lerdorf roku 1995. Původně slouţil pro sledování přístupů návštěvníků na jeho stránky pomocí scriptu, napsaném v Perlu (programovacím jazyku). Poté, co s ním přišli do styku i ostatní uţivatelé serveru, oblíbili si jej a začali pouţívat. Systém získaval nové a nové uţivatele, kteří si ţádali vylepšení celého systému. Vznikla tak komunita, která poloţila základ pro rozšíření tohoto řešení do počítačového světa. Autor systém vylepšil dle poţadavků uţivatelů, doplnil o dokumentaci a jeho aktualizovanou verzi uvolnil pod názvem Personal Home Page Tools veřejnosti. Vyuţíval jednoduchého programovacího jazyka, zapisovaného do HTML stránek. Syntaxe byla podobná Perlu avšak mnohem více omezená, jednodušší a nekonzistentní. Rok 1997 přinesl druhou verzi nazvanou PHP/FI 2.0. Pro rozšíření fukčnosti tohoto nástroje, vyuţil jazyka C. Díky tomuto kroku, bylo moţné komunikovat s databázemi a vytvářet jednoduché webové aplikace. Krátce poté následovala verze PHP 3.0, v červnu 1998, devět měsíců po veřejném testování zkušební verze. Tato verze svou podobou připomínala PHP, které známe dnes. Aby vznikla, muselo dojít k úplnému přepsání předešlé verze. Směr, kterým se měl další vývoj ubírat, představovaly aplikace zaměřené na elektonický obchod. Jedna z hlavních předností PHP 3.0 byla schopnost rozšiřitelnosti, zaloţená na stabilním základě. Tato schopnost byla lákavá pro velké mnoţství

8

CHAMPEON, Steve. Oreillynet [online]. 2001 [cit. 2011-10-10]. JavaScript: How Did We Get Here?. Dostupné z WWW: .

- 15 -

vývojářů, kteří rozšiřovali základnu uţivatelů vyuţívajících PHP. Dalším klíčem úspěchu byl objektově orientovaný přístup a konzistentní syntaxe tohoto jazyka. Do konce roku 1998 došlo k rozšíření základny uţivatelů vyuţívajících PHP na desítky tisíc a stovky tisíc webových stránek, které vyuţívaly reportingu. Krátce po uvedení verze PHP 3.0 v zimě roku 1998 začíná Andy Gutmans a Zeev Suraski pracovat na přepsání jádra. Důvodem byla snaha o zlepšení výkonu komplexních aplikací a dosaţení větší modularity jádra u nové verze PHP 4. Tato vylepšení umoţnila PHP komunikovat s různými databázemi, vyuţívat rozdílných protokolů a API rozhraní. Předešlá verze neumoţňovala efektivně pracovat s těmito aplikacemi. Nový engine byl pojmenovám 'Zend Engine' (sloţen z křestních jmen autorů). Jeho představení proběhlo v půli roku 1999 a díky novým moţnostem, které toto řešení poskytovalo, se setkalo s úspěchem. Oficiální verze byla uvolněna v květnu 2000, přibliţně dva roky po jeho předchůdci PHP 3.0. Vývoj PHP dále pokračoval. Následovala verze PHP 5 představená v červenci 2004. V průběhu vývoje bylo uvolněno několik modifikovaných verzí, základ však zůstával stejný, jádro Zend 2.0. Poslední verzí, která byla uvolněna v době psaní této práce, je verze PHP 5.3.3. Dnes dle odhadů PHP vyuţívají stovky tisíc vývojářů a jeho nasazení na webových stránkách odpovídá 20 % ze všech internetových domén. Nástroj, který v průběhu let vznikl, umoţňuje vyuţívat SQL dotazů vloţených do stránek, formulářů které prezentují výsledky dotazů atd. PHP je dnes nasazeno na platformách Linuxu, MS Windows a MacOS Macintosh. Vývojový tým je sloţen z desítky vývojářů a mnoha dalších, kteří se podílejí na nekončícím projektu PHP.9

9

CZ. PHP.net [online]. 2011, 2011-01-28 .

[cit.

2011-01-30].

- 16 -

History

of

PHP.

Dostupné

z

WWW:

3 Výběr řešení pro webovou prezentaci Webové stránky mohou být vytvářeny pomocí uvedených základních stavebních prvků. Můţe se však lišit prostředí, v kterém stránky vznikají a stejně tak se můţe lišit vyuţití jednotlivých stavebních prvků ve stránkách. Uplatnění jednotlivých prvků je také závislé na znalosti samotného autora. V této sekci budou čtenáři představeny jednotlivá řešení od těch jednodušších, aţ po ty sloţitější, s jejich kladnými i zápornými vlastnostmi.

3.1 Website builder Tyto nástroje vyuţívají pro tvorbu webu jazyky HTML a nebo Flash od společnosti Adobe. Mohou být rozděleny do dvou kategorií a to na nástroje provozované na webových serverech anebo programy, které jsou provozovány na uţivatelských stanicích, ze kterých je výsledný produkt (web) publikován do prostředí hostingu. Druhá moţnost nepotřebuje ke své činnosti on-line připojení, které je nezbytné pouze ve chvíli publikování finálního produktu a je určena spíše pro profesionální nasazení. 3.1.1

Tvorba prezentace s vyuţitím komplexní sluţby specializovaného serveru

Internetové servery jako www.wix.com, www.bluevoda.com aj. nabízejí kompletní sluţbu, jejíţ součástí je poskytnutí prostoru pro webovou prezentaci, včetně doménového jména a všech nutných nezbytností. Po úspěšné registraci a vytvoření účtu na stránkách můţe uţivatel vybírat z řady šablon (stovky vzorů vzhledů), které jsou řazeny do tematických celků jako Obchod, Hudba, Fotografie či Osobní stránky, vše záleţí na cílení vytvářených stránek. Poté, co si uţivatel vybere template, přichází na řadu osobní kreativita autora, díky níţ je moţné dále upravovat vzhled vybrané šablony dle vlastních poţadavků. Moţnosti úprav jsou široké. Následuje příklad z prostředí www.wix.com, které nabízí uţivateli flashové webové stránky. Stačí jen poţadovaný objekt uchopit a přetáhnout na místo kde má být umístěn. K modifikaci můţe být vyuţíto vlastních obrázků, videí, hudby, textů a animací, které se snadno implementují do prostředí editoru, respektive budoucího webu.

- 17 -

Obrázek 1. Základní šablona z kategorie Fotografie10

Výhoda tohoto řešení spočívá v jeho jednoduchosti, díky níţ je poţadovaný web vytvořen v krátkém čase bez potřebné znalosti kódu. Moţnosti snadné aktualizovatelnosti jsou také silnou stránkou tohoto řešení. Nevýhodou můţe být často diskutovaný problém celoflashových prezentací a jejich zobrazení (viz. kapitola 2.4 Flash) a neschopnost webových vyhledávačů procházet jejich obsah. I tato problematika je zde řešena a server www.wix.com slibuje SEO (Search Engine Optimization) optimalizaci vytvořeného webu. Při dodrţení definovaných kroků, by mělo dojít k zaindexování obsahu do vyhledávače Google během 1 aţ 3 měsíců.

3.2 Redakční systémy Redakční systémy představují jednoduchou variantu jak si vytvořit své vlastní internetové stránky bez znalosti programovacích jazyků (X)HTML, CSS, PHP a dalších. Tyto sytémy jsou také nazývány CMS (Content Management System), systémy pro správu obsahu, publikační systémy apod. Redakční sytémy jsou nabízeny jak komerčně, tak jsou k dispozici v podobě open source řešení, tj. volně dostupného software. Základním stavebním prvkem tohoto řešení je vývoj, modularita systému a stabilitu řešení. Součástí řešení jsou moduly pro tvorbu článků, správu souborů, galerií, fotografií, diskusních fór a mnoho dalších rozšiřujících pluginů. Na výběr zde máme z několika klíčových produktů, jejich zastoupení na internetu zachycuje tabulka 1. 10

Wix.com/ [online]. 2006 [cit. 2011-01-05]. Free Website Builder. Dostupné z WWW: .

- 18 -

Relativní počet k 10 000 doménám

Pořadí

Aplikace

1.

Joomla 1,5

1590

15,90 %

2.

Wordpress

660

6,60 %

3.

Drupal 6

622

6,22 %

4.

Phoca gallery

477

4,77 %

5.

VirtualMart

294

2,94 %

6.

PrestaShop

250

2,50 %

7.

jiná řešení

6107

61,07 %

10000

100,00 %

Celkem

Tabulka 1. Ţebříček nejrozšířenějších CMS11

V prostředí CMS je k dispozici administrátorské a uţivatelské rozhraní. Prostřednictvím administrátorského rozhraní dochází ke spravování obsahu webu. Vzhled webu určují předem definované šablony, které mohou být v určitém rozsahu modifikovány dle poţadavků správce. Práce s textem je realizována prostřednictvím jednoduchého editoru, který však nemá k dispozici takovou funcionalitu, kterou znají uţivatelé z MS Word nebo jiného textového editoru. Můţe zde být vyuţito odsazování textu, odráţek, kurzívy, tučného textu, a to vše bez znalosti kódu.

Obrázek 2. Prostředí redakčního systému Joomla

Vytvoření stránek obstará samotný redakční systém poté, co je nainstalován. Prostřednictvím administrátorského rozhraní můţe být jednoduchým způsobem vytvářeno vše co systém a nainstalované pluginy dovolí.

11

Návody pro C4 [online]. 2011, 2011-01-30- [cit. 2011-01-30]. Statistiky aplikací. Dostupné z WWW: .

- 19 -

Výhody redakčního systému spočívají v tom, ţe šetří čas nezbytný pro aktualizaci stránek. Snadnější editace, bez potřeby technických znalostí, umoţňují spravování stránek běţnému uţivateli. Aktualizace stránek můţe být prováděna součastně několika uţivateli najednou s tím, ţe kaţdý z nich můţe mít přístup pouze do určité sekce. To jistě ocení správci daného prostředí. Přesto má i toto řešení svá omezení. Jistě mezi ně patří zvýšené poţadavky na hosting, kde jsou stránky provozovány. Je nezbytné vybírat hosting, který podporuje umístění redakčních systémů. Stejně tak má k dispozici dostatečné mnoţství výkonu, který redakční systémy vyţadují, a proto s ním některé hostingy mohou mít problém a nemusí podporovat veškeré vlastnosti tohoto řešení. Větší mnoţství moţností tohoto řešení způsobuje i větší mnoţství problémů a proto je zapotřebí na tuto eventualitu být připraven. Většina z redakčních systémů má k dispozici znalostní fóra, kde se provozovatelé těchto systémů dělí o své zkušenosti a jsou schopni poskytnout fundované rady.

3.3 Statické/dynamické stránky HTML dokumenty jsou textové soubory obsahující text v kombinaci se speciálními značkami, které definují výsledný vzhled a určují význam jednotlivých částí textu a hypertextových odkazů, které jednotlivé sekce propojují. Podstata hypertextu vychází z toho, ţe se čtenář pohybuje v textu prostřednictvím odkazů a nemusí tak procházet text zaţitým způsobem od horní časti stránky aţ po spodní. Je na čtenáři, jakým směrem se bude pohybovat, bez toho aniţ by to byl autor textu schopný ovlivnit. Tato alternativa je náročnější na správu obsahu a samotnou aktualizaci, protoţe změny jsou realizovány přímo v HTML kódu. Coţ není samozřejmě vţdy ţádoucí a zvyšuje to náklady na provoz aktualizovaného obsahu. Tento způsob je vhodný převáţně pro jednotlivce a malé společnosti. Mezi hlavní klady této varianty patří nízké pořizovací náklady, jednoduchá a rychlá výstavba webu s moţností unikátního designu. Oproti tomu dynamické webové aplikace umoţňují měnit během prohlíţení stránky obsah nebo celý jeho styl. Dynamické webové aplikace vyuţívají navíc oproti statickým HTML stránkám PHP, JavaScripty a Flashové animace. Nabízejí moţnost úpravy obsahu v reálném čase, kdy dochází k okamţitému promítnutí změn do stránek. Hlavní devizou tohoto řešení je, ţe je moţné získat to, co je opravdu poţadováno za předpokladu nezbytných znalostí. Toto řešení je však více sofistikované a potřebuje k realizaci minimálně základní znalosti (X)HTML kódu.

- 20 -

3.3.1

Strukturní editory

K tomu aby bylo moţno vytvořit HTML stránku, stačí mít k dispozici v počítači jednoduchý textový editor. V prostředí MS Windows je jím Poznámkový blok, do kterého je zapisován samotný kód. Pro větší kontrolu nad zapisovaným kódem, je moţné pouţít editory disponující funcemi, které usnadní práci s kódem. Jejich výhodou je schopnost vizuálně odlišit vlastní text od HTML kódu, snadnější zápis jednotlivých tagů a mnoţství funkcí ulehčující práci. Představiteli těchto editorů jsou PSPad, HomeSite, EasyPad apod. Tyto editory spadají do skupiny tzv. strukturních editorů. Nástupcem strukturních editorů se měly stát wysiwyg editory. V reakci na nasazení nových editorů byl očekáván zánik strukturních editorů. Strukturní editory ale přesto své uplatnění neztratily a jsou nadále hojně vyuţívány profesionálními tvůrci dynamických a jinak specifických stránek, kteří nechtějí přijít o plnou kontrolu nad vytvářeným kódem. 3.3.2

Wysiwyg editory

Představitelé wysiwyg editorů (z anglického „What you see is what you get“, tedy „co vidíš, to dostaneš“) jsou Dreamweaver, FrontPage či NVU. Tyto editory zobrazují stránku v průběhu psaní, tak jak bude vypadat v prohlíţeči. Aby bylo moţné ovlivnit výsledný vzhled stránky, poskytuje toto prostředí moţnost formátování textu, výběr fontu a jeho barvy. Je moţné vkládat objekty jako tabulky, pracovat s odkazy a vkládanými obrázky. Zde uvedené rozdíly zahrnují jen nepatrnou část z moţností tohoto řešení. Záleţí na rozhodnutí kodéra, které řešení zvolí. Výhodou wysiwyg editorů je, ţe není vyţadována znalost HTML, kód je generován automaticky. Dříve k nevýhodám wysiwyg editorů patřila kvalita vytvořeného kódu, ale tyto nedostatky byly v průběhu vývoje editorů odstraněny. Tento typ editorů je doporučován začínajícím kodérům, kteří díky studiu generovaného kódu mohou pochopit zákonitosti. Stejně tak je moţné vygenerovaný kód upravovat a sledovat dopady změn na formát stránky a jejího obsahu. 3.3.3

Prohlíţeče

Druhým nezbytným programem v počítači je prohlíţeč, který zobrazuje vzhled vytvořených stránek. Díky prohlíţeči je moţné posoudit, zda vzhled stránky odpovídá poţadované představě. Co se týká dnes dostupných prohlíţečů, tak mezi klíčové hráče patří Internet Explorer, Opera, Mozzila a Chrome. Kaţdý z těchto prohlíţečů podporujících standard W3C můţe stránky zobrazit odlišně a proto je zapotřebí brát tuto moţnost v potaz a v závěrečné

- 21 -

etapě vývoje, kdyţ přichází na řadu testování, provádět revizi stránek v rozdílných prohlíţečích.

Obrázek 3. Zastoupení pouţívaných prohlíţečů u návštěvníků VASFOTOGRAF.COM

Je vhodné také provést u napsaných stránek kontrolu HTML kódu prostřednictvím validátoru (W3C12 apod.), který je schopný odhalit případné nedostatky. To pomůţe eliminovat moţné problémy návštěvníků se správným zobrazením stránek a to i přesto, ţe většina ze součastných prohlíţečů je schopna zobrazit HTML kód obsahující velké mnoţství chyb. Pokud je v počítači k dispozici jeden z těchto prohlíţečů a editorů, nemělo by nic bránit ve vytváření webových stránek.

3.4 Fotogalerie Pro vytvoření samotné webové galerie, mohou být pouţita různá řešení. Vše závisí na poţadavcích. K dispozici jsou jednoduchá řešení od HTML galerií aţ po uţivatelsky zajímavější Flash galerie. Galerie mohou být vytvářeny ručně, disponuje-li kodér patřičnými znalostmi a chce-li vytvořit originální řešení, anebo můţe být vyuţito dostupných řešení. Programy pro práci a správu fotografií jako LightRoom 2 a vyšší, případně Zoner mají ve svém

prostředí

samostatné

sekce,

které

umoţňují

uţivatelům

vytvářet

galerie

z předdefinovaných vzorů. Zde je pak moţné prostřednictvím jednoduchých kroků omezeně modifikovat nabízené galerie.

12

Markup Validation Service [online]. 1994, 2011 [cit. 2010-10-12]. W3C. Dostupné z WWW: .

- 22 -

Obrázek 4. Webová galerie v prostředí Adobe Lightroom 2.6

Výhoda tohoto řešení spočívá v rychlosti. Galerie je k dispozici poté, co je upravena poslední fotografie. Vše nezabere víc jak pár minut a stačí nahrát galerii do webu. Další z moţností je vyuţití samostané aplikace určené pro tvorbu webových alb. Představitelem tohoto řešení je Jalbum (http://jalbum.net/software/) nebo Piccasa (http://picasa.google.com/#utm_medium=embed&utm_source=pwalogin), které jsou volně ke staţení včetně české lokalizace. Tato řešení jsou ideální pro všechny, kteří chtějí pouze publikovat své snímky, sdílet je mezi přáteli, bez toho aniţ by měli potřebu vytvářet plnohodnotný web. 3.4.1

Jalbum

V případě Jalbumu, můţe být vyuţito prostoru přímo na http://jalbum.net poté, co je provedena registrace do systému. K dispozici je velké mnoţství vzhledů galerií, které jsou hodnoceny samotnými uţivateli a stále aktualizovány o nové typy. Klienta (aplikaci) si uţivatel stáhne a nainstaluje ve svém počítači. K dispozici má základní mnoţství galerií, které můţe rozšířit o ty, které ho osloví z nabídky tohoto webu, a ty si pak stáhnout a nainstalovat. Pak jiţ jen stačí v otevřené aplikaci Jalbum vytvořit novou galerii, přetaţením snímků do okna aplikace určit její obsah a nadefinovat název. Dle zvoleného Vzhledu a Stylu jsou k dispozici

induviduální

vlastnosti

jednotlivých

galerií.

Je

moţné

sdílet

galerie

prostřednictvím sociálních sítí jako Facebook, Twitter, MySpace a nebo prostřednictvím e-mailu. Stejně tak mohou být fotografie prodávány prostřednictvím účtu PayPal, můţe být

- 23 -

vyuţíváno vlastností virtuálního obchodu, komentářů a hodnocení k jednotlivým snímkům apod. Nabízené funkce jsou široké a určitě si kaţdý najde to své. Je moţné toto řešení implementovat do (X)HTML stránek a stejně tak jej vyuţít u redakčních systémů, které jej implementují do svého prostředí prostřednictvím doplňkových modulů. 13

Obrázek 5. Prostředí programu Jalbum 8.9.3. pro tvorbu webových galerií

13

Jalbum.net [online]. 2011 [cit. 2010-11-15]. Create stunning web album. Dostupné z WWW: .

- 24 -

4 Struktura webu Poté co jsme si představili moţnosti jednotlivých řešení s jejich klady a zápory, závisí volba vhodné technologie na poţadavcích, které jsou kladeny na vytvářené webové stránky. Musíme si vybrat pro nás vhodné řešení, které nám poskytne vše, co pro své snaţení budeme potřebovat. Základem je uvědomit si: za jakým účelem jsou stránky vytvářeny, kdo jsou návštěvníci, co od webu očekávají (text, grafiku, foto), jaké mnoţství a jaká struktura stránek bude zapotřebí, navrhnout strukturu stránek (prostřednictvím grafického programu nebo na papír), pojmenovat jednotlivé stránky, obrázky, soubory, které budou pouţity. Jedno však mají tato řešení společné, je nutné připravit správnou strukturu budoucího webu. Základní potřebou je představa o rozsahu budoucího webu a počtu stránek, ze kterých se bude skládat. Obsah musí být rozdělen na hlavní sekce a podsekce. Snahou je vytvořit jednoduchou a přehlednou strukturu, kterou budou chápat návštěvníci. Je důleţité brát v potaz, ţe i samotná struktura URL (Uniform Resource Locator) je důleţitá. Správné názvy souborů a řazení do kategorií umoţní stránky nejen lépe uspořádat, ale také umoţní lépe vyhledávat v obsahu stránek vyhledávači. Jednodušší a srozumitelnější adresy jsou důvěryhodnější i pro samotné návštěvníky. Proto je dobré pro názvy sloţek, kde budou jednotlivé stránky uloţeny vyuţívat jednoduchého popisného textu, pokud moţno bez pouţití velkých a malých písmen, mezer a diakritiky. To vše zjednodušší budoucí práci s obsahem a nebude pak nutné přemýšlet při vytváření odkazů mezi jednotlivými stránkami, zda bylo pouţito velké či malé písmeno. V případě diakritiky dochází v adrese URL k nahrazení zástupnými znaky a celá adresa je pak mnohem hůře čitelná. http://www.vasfotograf.com/pages/uvod/titulka.html http://www.vasfotograf.com/folder1/75424/025.html Čím jednodušší adresa URL bude, tím snáze si ji mohou návštěvníci zapamatovat a na její obsah vytvořit odkaz. Bude-li naopak obsahovat velké mnoţství nepřehledných parametrů, mohou se domnívat, ţe určitá část není nezbytná, tu vynechají a naruší tak celý odkaz. Proto by měla vţdy kaţdá z vytvořených stránek obsahovat ve svém názvu relevantní slovo

- 25 -

odpovídající jejímu obsahu. Je vhodné vyvarovat se obecných názvů stránek jako „stranka1.html“, nadměrného pouţívání klíčových slov. Při vytváření jednoduché struktury adresářů, která usnadní orientaci návštěvníků, by nemělo docházet k hlubokému zanořování podadresářů „…/slozka1/slozka2/slozka3/slozka4/slozka5/slozka6/stranka.html“)

a pouţívání názvů, které nemají s obsahem ţádnou spojitost. Stejně tak je důleţité zajistit stabilitu URL. Proto musí být návrh struktury dostatečně promyšlený, aby nebylo nutné strukturu měnit. Důvod je prostý, dojde-li v budoucnu k odkazování na jednotlivé stránky, změnou a přesunutím přestanou odkazy fungovat. Nefunkční odkazy směřující zpět na web se nemusí opravit nikdy. Proto je nezbytné v případě nutnosti změny sruktury zajistit funčnost prostřednictvím přesměrování.

- 26 -

4.1 Web design Představuje proces, při kterém je navrhován vzhled webové stránky. Webový design je nedílnou součástí webových stránek a proto je zapotřebí ho nepodceňovat. Stránky mohou být plné lákavého obsahu, uţivatelsky přívětivé, ale nebudou-li se návštěvníkovi líbit, opustí je. Následující kapitola je věnována navrhování vzhledu stránek a všemu na co je zapotřebí dát při vytváření výsledného designu stránek pozor. 4.1.1

Vzhled a rozloţení stránky

Vzhled stránky by měl korespondovat s tváří společnosti, pro kterou jsou stránky navrhovány. Prvním vodítkem, které při návrhu můţe být pouţito, je vizitka. Na ní je ve většině případů pouţito dostatečné mnoţství vodítek, které by měly pro začátek stačit. Pro příklad logo společnosti, firemní barvy, text představující společnost, to čím se zabývá a v neposlední řadě kontaktní informace. Jak tedy začít? Proces, který bude následovat, můţe být rozdělen na dvě části, kterými jsou vývoj a implementace výsledného vzhledu. 4.1.1.1 Vývoj Vývoj komponent výsledného designu vychází ze setkání se zákazníkem a zjištění toho co zákazník chce. Jsme-li zákazníkem sami sobě, podstata se nemění. Moţná si kladete otázku, co mají informace o zákazníkovi společného s tím správným designem, ale tyto informace o zákazníkovi jsou nezbytné pro vytvoření účinného návrhu. Před tím, neţ poprvé dojde k setkání se zákazníkem, je dobré strávit pár minut sbíráním informací o tom, co zákazník dělá a jak to dělá. Pro získání informací o zákazníkovi by měl být dostatečným zdrojem internet. Pak jiţ jen stačí naslouchat, co nám zákazník říká. Důleţité je získat odpovědi na otázky jako: Co společnost/osoba dělá? Má společnost své vlastní logo, značku nebo grafický manuál? Co očekávají od vyvíjeného webu? Jaké informace chce zákazník publikovat? Zde uvedené otázky a odpovědi na ně jsou základním shrnutím toho, co je nezbytné pro správné pochopení zákazníka a jeho potřeb. Odpovědi nám budou vodítkem při následujícím vývoji.

- 27 -

4.1.1.2 Implementace Dalším krokem je získané informace zpracovat a pouţít k vytvoření správného designu. Poté, co jsou k dispozici nezbytné informace, následuje vytvoření návrhu budoucího webu za pomoci tuţky a papíru. Důvodem proč nepouţít k návrhu vzhledu softwarového prostředí je záměrné opomenutí technických limitů prohlíţečů a CSS. Výsledkem by měl být design, který opravdu budete chtít. Je důleţité vytvořit několik variant výsledného vzhledu. Pak se pro jeden z nich rozhodnout a přesunout snaţení do prostředí grafického programu jako Adobe Photoshop, Corel, Gimp a jim podobné, kde je moţné návrh přetvořit do grafické podoby. Pomocí nástroje pro výběr obdélníku, je moţné vytvořit a rozmístit jednotlivé sekce stránky. Pak uţ je moţné experimentovat s barvami jednotlivých sekcí, zkoušet implementovat různé odstíny aţ do chvíle, kdy barevné schéma a rozloţení odpovídá zadání či představám designera. Návrh a rozloţení musí být realizováno pro všechny zamýšlené stránky webu a další poţadované sekce. Je-li hotový finální návrh, můţe se budoucí web začít přivádět k ţivotu. 4.1.2

Zásady správného designu

Při posuzování webového designu existuje hledisko, jestli se návštěvníkovi líbí či nikoliv. Stejně tak je důleţitá kombinace vzhledu, uţivatelské přívětivosti, funkčnosti a kvalitního obsahu. Je zapotřebí, aby byl brán zřetel na všechny zde uvedené sloţky a samotný návrh a vývoj se drţel doporučovaných pravidel. Pouhá grafika bez funkčnosti a obsahu uţivatele dlouho bavit nebude a stejně tak funkční web s informacemi bez patřičného reprezentativního vzhledu také zákazníky nepřivede. Uţivatelé mají rádi kdyţ: grafika plynule přecházející do obsahu, je ovládání intuitivní a je pouţito přehledných navigačních prvků, je vzhled jednotlivých stránek webu identický a vyuţívá charakteristických prvků. Proto by měly být všechny tyto body zohledněny při samotném návrhu webu. 4.1.3

Rozloţení webové stránky

Kaţdá webová stránka se skládá z jednotlivých částí, které zachycuje obrázek č. 6. Tyto části mohou být umístěny do stránky dle uváţení designera, ale jen některá rozloţení jsou ta správná a efektivní. Následující text přibliţuje jednotlivé bloky.

- 28 -

Obrázek 6. Rozloţení webové stránky

4.1.3.1 Obsahový blok Nejdůleţitější částí webové stránky je hlavní blok. Do této sekce je umísťován obsah webové prezentace. Tento blok je definován v kódu (X)HTML prostřednictvím tagu body (slouţí k definici těla stránky do které se zapisuje celý obsah HTML stránky). Do něj můţe být obsah rozmísťován prostřednictvím tagu div nebo prostřednictvím tabulky, která dle poţadavků designera pomůţe s rozloţením těla stránky na jednotlivé sekce. Pomocí těchto nástrojů je moţné vytvořit hranice pro obsah, který by se jinak rozutekl mimo okno prohlíţeče. Můţe být nastaveno, zda bude pouţita pevná velikost těchto sekcí anebo plynule měnitelná dle rozlišení obrazovky jednotlivých návštěvníků. Bloky mohou být umístěny do stránky několika způsoby a to staticky (je umístěn v rámci běţného toku dokumentu), relativně (umoţňuje posunout objekt mimo normální pozici), absolutně (pozici udávají souřadnice bez ohledu na okolí) nebo fixovaně (objekt zůstává na jednom místě i při posunu stránky). Vlastnosti jednotlivých bloků bývají definovány prostřednictvím CSS. Bliţší informace o této problematice, která je rozsáhlá, můţe čtenář nálézt v publikacích zaobírajících se kaskádovými styly.

- 29 -

4.1.3.2 Logo Identita, která by měla být promítnuta do navrhovaných stránek, má spojitost s logem a barvami společnosti či jedince, pro kterého jsou stránky navrhovány, a které společnost či jedinec pouţívá jako svou charakteristickou značku, vizitky, hlavičky obálek, firemní materiály. Firemní logo nebo jméno společnosti by mělo být umístěno v horní části kaţdé webové stránky. Slouţí k identifikaci stránek a sděluje návštěvníkovi informaci, komu navštívené stránky patří. 4.1.3.3 Navigace Navigace stránek slouţí návštěvníkům k rychlé orientaci a moţnosti pohybu po stránkách. Její umístění by mělo být co nejblíţe k horní části webové stránky z důvodu, aby ji navštěvník snadno nalezl. Můţe být pouţita horizontální či vertikální navigace. Vertikální navigace bývá ve většině případů umístěna na levé straně stránek, a jelikoţ je toto umístění pro většinu návštěvníků v rámci webu zaţité, není doporučeno ji umísťovat jinam. Existuje několik skupin návštěvníků. Jedni, kteří vyuţívají vyhledávače a po vstupu na webové stránky hledají vyhledávací pole, prostřednictvím kterého získají seznam odkazů. Druhá skupina návštěvníků nejprve vyuţije prostředí k tomu, aby nalezla různé odkazy, které ji posunou k poţadovanému. Všichni ostatní budou zvaţovat, jaké moţnosti vyuţijí dle jejich aktuální nálady, času, který mají k dispozici a případně dle toho, jak jim daný web bude připadat přehledný. Navigace by měla také návštěvníky informovat o jejich aktuální poloze. Pokud jsou vyuţity všechny moţnosti navigace, slouţí návštěvníkům navigace jako hierarchické vodíko, které jim odkryje obsah a pomůţe pochopit rozvrţení webu. Správně navrţená navigace vzbuzuje v návštěvnících důvěru v navštívený web, v lidi, kteří jej vybudovali, a zanechává v nich dobrý dojem. 4.1.3.4 Obsah Hlavní částí stránky je obsah, proto by měl obsahovat všechny klíčové informace, které mají být návštěvníkům poskytnuty a které se snaţí návštěvníci najít. Pokud zde nenaleznou během krátké chvíle, co hledají, opustí web a budou hledat jinde. Proto je důleţité prostřednictvím této sekce udrţet návštěvníkovu pozornost a hlavně ji správně zakomponovat do celkového designu stránky. Při jeho vytváření by měl mít autor na paměti, jak se většina návštěvníků chová k obsahu. Většinou prochází stránku letmo a pozastavují se jen nad jednotlivými nadpisy (klíčovými slovy), u kterých pak dále zvaţují, zda je daná problematika zajímá. Výjimky zde představují weby zaměřené na zprávy, povídky, recenze produktů. Důvod, proč

- 30 -

návštěvníci stránky jen prohlíţí je prostý. Je jím nedostatek času a potřeba se neustále webem pohybovat. Stejně tak pocit, ţe není nutné vše číst. Pravdou je, ţe na většině stránek osloví návštěvníky pouze nepatrná část obsahu a zbytek je pro ně nezajímavý. Proto chceme-li napsat obsah, který návštěvníka zaujme a neunudí, měli bychom vynechat zbytečné informace. Není cílem umístit do webu velké mnoţství nic neříkajících slov. Návštěvník má pak dojem, ţe má-li pochopit celý obsah stránky, musí vše přečíst a to na něj působí skličujícím dojmem. Další z textů, které by měly být vynechány, jsou rozsáhlé úvodní texty. A to jak v rámci celého webu začínajícím slovy “Vítáme Vás“, tak texty představující a vyzvihující obsah sekce, kterou jste právě navštívili. Dalším textem, se kterým se můţeme setkat, bývají návody k obsluze. Ty by měly být napsány stručně a přehledně pokud jsou nezbytné pro pochopení chování na webu. Ale spíše neţ psát návod na web, je lepší se zamyslet, zda by nebylo vhodnější upravit samotný návrh tak, aby web působil jasným a intuitivním dojmem. 4.1.3.5 Zápatí (patka) Patka je umístěna na spodní části stránky a informuje návštěvníky o tom, ţe se nacházejí na jejím konci. Bývají do ní umístěny informaceo copyrightu, kontaktu případně pár odkazů do hlavních sekcí webu. Tato část ale nemusí být pouhým nudným zakončením. Můţe dotvářet originalitu návrhu a rozvádět návštěvníky dále po webu. Můţe obsahově kopírovat navigační panel a ušetřit tak návštěvníkům čas rolováním nazpět k navigačnímu panelu. Nevtíravým způsobem navrhnout směr pohybu návštěvníků, kteří nemusí přemýšlet nad tím kam dál, nebo zda svou návštěvu zde ukončit. Rozdíl zápatí oproti záhlaví je v tom, ţe záhlaví představuje návštěvníkovi hlavní sekce webu. Zápatí můţe více přiblíţit jednotlivé sekce s jejich podsekcemi. Je vhodné, aby tato část stránky byla identická pro celý web, a to jak po stránce designu, tak i obsahu. Publikování specifických informací k dané sekci není doporučováno, přesto i zde existují výjimky. Tato část by měla být navrţena poutavě, protoţe ze své podstaty bývá tato sekce většinou návštěvníků ignorována. Snaţí se přesunout zpět do horní části nebo opustit web. Proto při návrhu obsahu této sekce je zapotřebí zváţit otázky typu: Co z obsahu webu má být zdůrazněno? Co by mohlo návštěvníka ještě zajímat? Co je charakteristické pro tento web?

- 31 -

Výsledkem by mělo být správné zápatí, mělo by být veliké, obsahově zajímavé a mělo by mít osobitý styl. K samotnému návrhu můţe být přistupováno dvěma způsoby. Můţe být pouţit model vycházející z úvodní stránky, poskytující návštěvníkům informace o novinkách, o webu, a informacích. Anebo můţeme zvolit model doplňujícího obsahu, který návštěvníkům nabídne takový obsah, který by v rámci webu nikde jinde nenašli. Nemělo by však být opomenuto, ţe hlavním úkolem zápatí je informovat a bavit. Mělo by vypovídat o prioritách webu.14 4.1.3.6 White space Pod názvem White space je moţné si přestavit prázdné místo na stránce, které neobsahuje ţádný text ani ţádnou grafiku či obrázek. Tato část poskytuje stránce prostor, umoţňuje jí „dýchat“. Často je tato sekce opomíjena. Designéři-nováčci a klienti se snaţí zaplnit kaţdé volné místo obsahem. Tento postup však není ţádoucí.15

14

GREMILLION, Ben. WebdesignerDepot.com [online]. 2010 [cit. 2010-10-09]. How to Build a Footer That Doesn’t Stink. Dostupné z WWW: . 15

BEAIRD, Jason. The principles of beautiful web design. First Edition. Canada: SitePoin, 2007. 182 s. ISBN 0-9758419-6-3.

- 32 -

4.2 Barvy Správný výběr barev není jednoduchý a je zapotřebí mít na mysli estetičnost, identitu a pouţitelnost. Nevhodným výběrem barev můţe být zapříčiněno, ţe vyvíjený web neosloví budoucí návštěvníky. Barvy jsou děleny do základních tří skupin na primární, sekundární a terciální. Do primární skupiny patří barva červená, modrá a ţlutá. Smícháním základních barev dohromady vznikají sekundární barvy. Patří sem oranţová, zelená a fialová. Terciální barvy vznikají mícháním primárních a sekundárních barev. Výsledkem je ţluto-zelená, modro-zelená apod. Tím je k dispozici široké barevné spektrum, ze kterého mohou být vybírány barvy pro web. Díky moţnostem dnešních monitorů, které zobrazují více, neţ 16 miliónů barev tedy nejsme limitováni ani technickými omezeními. Vnímání jednotlivých barev lidmi je individuální, přesto však výsledky empirických výzkumů potvrzují obecné preference platné pro většinu populace. Toto vnímání se však můţe lišit dle jednotlivých kultur. Kaţdá má své vlastní barevné asociace. Jednotlivé barvy působí na lidskou populaci a ovlivňují její pocity a smýšlení. Rozeznáváme barvy teplé, studené a neutrální. Touto problematikou se zabývá psychologie barev, a její znalost pomáhá web

designérům

promlouvat

k

návštěvníkům

prostřednictvím

zvolených

barev.

V jednoduchosti zde budou představeny základní barvy a asociace, které mohou u lidské populace vyvolávat.

Obrázek 7. Barevný kruh16

16

Studijní materiály k e-learningovému kurzu Grafika a DTP od společnosti DTP studio

- 33 -

4.2.1

Červená

Barvy v červeném spektru jako rudá, oranţová, ţlutá působí jako varování a tato symbolika vychází ze samotné přírody. Zvířata vybavena barvami tohoto spektra varují své okolí „Pozor jsem zde a jsem nebezpečný“ (amazonské ţáby, ještěrky, ryby a jiné). Proto by tato barva měla být pouţívána pro všechny moţné výstrahy, upoutávky. Jedná se o teplou jasnou barvu evokující silné emoce. Bývá spojována s pocity tepla a lásky. 4.2.2

Ţlutá

Ţlutá barva je veselou barvou, která je schopná navodit teplo, je plná energie. Její uplatnění musí být obezřetné, protoţe unavuje čtenářovo oko kvůli světlu, které ve větší míře odráţí. Proto není vhodné její uplatnění na pozadí stránky. Je však vhodná k zvýraznění určitého textu, poutá pozornost. Můţe však také vyvolávat flustraci a hněv. Realizované studie potvrzují, ţe děti, které mají ţlutou barvou vymalovaný pokoj, více pláčí. Rodiče, kteří tuto barvu pouţili pro výmalbu svých pokojů, jsou více náchylní k vzájemným konfliktům. Proto je zapotřebí tuto barvu pouţívat opatrně a zvolit její správný odstín. 4.2.3

Zelená

Většina lidí si spojí zelenou barvu s přírodou. Navozuje pocit klidu, zdraví a štěstí. Přestavuje naději a čerstvost. Tato barva je méně aktivní neţ zmiňovaná ţlutá, oraţová nebo červená. Je příjemnější pro oči, nepůsobí tak agresivně. Mnoho webů tuto barvu pouţívá ve svém designu, aby navodili u návštěvníků pocit souznění s přírodou. I u této barvy výzkumy potvrzují blahodárné účinky na dětskou psychiku. U dětí zlepšuje jejich schopnost číst. 4.2.4

Modrá

Modrá barva bývá spojována s nebem nebo s mořskou hladinou. Bývá oblíbená, více ji však upřednostňují muţi neţ ţeny. Symbolizuje inteligenci, otevřenost, důvěru. Psychologicky působí uklidňujícím dojmem. U diváků sniţuje apetit, proto se určitě nehodí jako dominatní barva webu nabízejícím potraviny. Naopak je spíše pouţivána ve spojitosti s létáním, bazény nebo klimatizačními jednotkami.

- 34 -

4.2.5

Bílá

Bílá barva představuje čistotu, vzdušnost, eleganci, jednoduchost. Odráţí hodně světla, oslňuje a můţe unavovat oči. Je spojována se zimou, sněhem, sterilitou nemocničního prostředí a lékařských plášťů. Často je pouţívána jako barva pozadí. 4.2.6

Černá

Černá barva je ve své symbolice opakem bílé. Představuje hrozbu, agresi, zlo a smutek. V mnoha kulturách je povaţována také za barvu smrti. Stejně tak představuje eleganci a sílu, vše záleţí jen na jejím pouţití. Je schopná pohlcovat ostatní barvy. Spolu s bílou naopak vytváří nejkontrastnější kombinaci. Vyvolává dojem hloubky, vizuálně zmenšuje objem.17 Při výběru barevné palety je zapotřebí brát v potaz zařazení barvy, které můţe být realizováno dle jejího odstínu, jasu a sytosti. Barevné modely, se kterými se můţeme setkat, jsou CMYK (tisk), RGB (digitální zobrazení) a CIE lab (barevný model pouţívaný k převodu barev z jednoho prostoru do druhého). Nástroj, který je vyuţíván při výběru hlavních a vedlejších barev se nazývá barevný kruh (obr. č. 7.). Pomocí něj, je moţné získat několik moţných palet, mezi kterými si vybereme tu, co bude nejlépe vyhovovat naším účelům. a) Paleta tvoţená z jednoho odstínu vyuţívající různých hodnot jasů. Můţe působit málo výrazně. b) Paleta tvořená z vedlejších odstínů působí zajímavějším dojmem neţ první uvedená, přesto však se i ona vyznačuje malým kontrastem. c) Paleta z doplňkových barev vyuţívá většího kontrastu, který zvýrazní obsah. d) Paleta z vedlejších doplňkových barev vyuţívá menšího kontrastu, ale přesto působí dostatečně pro zvýraznění obsahu. e) Paleta ze širší škály doplňkových barev poskytuje k výběru velký počet tónů jednotlivých barev, ze kterých se snadno vybere ta nejvhodnější. f) Paleta z vedlejších odstínů a jedné doplňkové barvy umoţňuje díky doplňkové barvě zvýraznit to podstatné.

17

HANZLOVSKÝ, Michal. Celostnimedicina.cz [online]. 2008 [cit. 2010-02-11]. Psychologie barev. Dostupné z WWW:

.

- 35 -

Obrázek 8. Výběr barevné palety prostřednictvím barevného kruhu18

Největšího kontrastu je moţné dosáhnout, pokud bude při výběru pouţito barev, které leţí v barevném kruhu proti sobě. Všechny barvy, které jsou zobrazovány prostřednictvím obrazovky, jsou tvořeny ze tří sloţek RGB (červená, zelená a modrá). Pro publikování na internetu bylo dříve definováno 216 tzv. bezpečných barev. Tyto barvy garantovaly, ţe by při jejich zobrazování neměl nastat ţádný problém a grafická karta měla být schopna jejich korektního zobrazení. Dnes je výkon grafických karet vysoký a není zapotřebí se zaměřovat jen na těchto 216 bezpečných barev. Definovat barvu pro určitou část stránky nebo textu můţeme různými způsoby. První vyuţívá jmenného názvu barvy, ale tato moţnost je značně omezena (16 základních barev). Druhou moţností je vyuţít hexadecimálního zápisu, který

18

Studijní materiály k e-learningovému kurzu Grafika a DTP od společnosti DTP studio

- 36 -

vyuţívá kombinaci čísel a písmen pro definici barvy. Prostřednictvím tohoto zápisu je moţné získat barvy napříč celým barevným spektrem. Této moţnosti je vyuţíváno při psaní HTML kódu.19

Obrázek 9. Hexadecimální zápis 16 základních barev20

19

Studijní materiály k e-learningovému kurzu Grafika a DTP od společnosti DTP studio

20

W3C [online]. 2010, 2010-10-28 [cit. 2011-02-07]. CSS Colour Module Level 3. Dostupné z WWW:
css3-color-20101028/>.

- 37 -

4.3 Rozlišení Předtím neţ začnou být rozmísťovány jednotlivé prvky do stránky, musí být definována její celková šířka. Otázka rozlišení, pro které budou stránky normalizovány, je mezi designéry často diskutovaná a vyvolává spory. Doporučovaný standard šířky stránky pro rozlišení monitoru 1024 pixelů je 960 pixelů. Jedná se o moţný kompromis poskytující dostatečné mnoţství prostoru pro rozmístění všech poţadovaných prvků. Toto rozlišení bylo standardem dříve z důvodu nízkého rozlišení monitorů. V dnešní době, kdy se začínají pouţívat mini notebooky, PDA a jiná mobilní zařízení s menším rozlišením displeje, přichází toto rozlišení opět ke slovu. Proto by stránka s tímto rozlišením měla být bez problémů zobrazena i na těchto zařízeních. Uváděná šíře 960 pixelů je ale pouhým doporučením, proto by výsledný rozměr měl být specifický a závislý na typu kaţdého projektu a jeho uplatnění. Zbytek stránky, který bude přesahovat definovanou šířku, bude doplněn tzv. whitespace. Ten bývá tvořen celistvou barvou, barevným přechodem nebo texturou.

Zobrazovací rozlišení pořadí

rozlišení

1 2 3 4 5 6 7 8 9 10

1024x768 1280x800 1280x1024 1440x900 1366x768 1680x1050 1920x1080 800x600 1152x864 1920x1200

zastoupení v %

23,02 % 18,10 % 9,96 % 8,18 % 7,31 % 5,25 % 2,55 % 2,30 % 2,05 % 1,92 %

Tabulka 2. Statistiky konsorcia W3C k srpnu 201021

4.3.1

Grid (mříţka)

Pojem grid je spojován s tzv. mříţkou, která slouţí jako pomůcka při navrhování grafického layoutu webu. Prostřednictvím vodících čar je moţné snazší cestou zarovnávat jednotlivé prvky ve stránce. Tabulka, která rozděluje pracovní plochu na třetiny, vytváří zlatý řez, který 21

W3Counter.com [online]. 2010 [cit. 2010-02-10]. W3Counter .

- 38 -

-

Global

Web

Stats.

Dostupné

z

WWW:

působí estetickým dojmem na lidské oko. Vznikne rozdělením úsečky na dvě části tak, ţe poměr větší části k menší je stejný jako poměr celé úsečky k větší části. Hodnota tohoto poměru je rovna přibliţně 1,618. Zlatý řez představuje pojem kompozičního rozloţení, které bylo vyuţíváno jiţ starými mistry renesance, kteří jeho prostřednictvím byli schopni přenést proporce objektu z reálného světa na plátno v sochu nebo chrám. Bývá pokládán za ideální proporci mezi různými délkami. Tento nástroj slouţí i jako pomocník při rozmístění dominantních prvků do stránky a pomáhá při jejich logickém rozmístění. Také je jeho prostřednictvím moţné snáze stanovit poměr výšky a šířky sazby.22

Obrázek 10. Zlatý řez – pravidlo třetin

22

DANČO, Václav, et al. Kapesní průvodce počítačovou typografií. Vid. 1. Praha: Labyrint, 1995. 135 s. ISBN 80-85935-00-7.

- 39 -

4.4 Fonty Statistiky uvádějí, ţe celých 95 % informací na webu je v písemné podobě. Je proto nezbytné vědět, jakým způsobem pracovat s textem a znát základy typografie. Základním úkolem typografie je interpretovat písemnou informaci, optimalizovat její čitelnost, přístupnost a pouţitelnost, a dosáhnout grafické vyváţenosti celku. Kombinací správné výšky fontů, rozestupů mezi jednotlivými slovy a znaky, prázdného místa okolo a pouţitých barev je dosaţeno optimální čitelnosti.23 K tomu, abychom byli schopni korektně zobrazit text na stránce, je zapotřebí určit, jaká znaková sada má být pouţita pro zobrazení. Nejjednodušší znaková sada pouţívá 128 znaků (7 bitová) a nazývá se ASCII, její rozšířená 8 bitová verze pouţívá 256 znaků. Středoevropské země pouţívají kódování Latin 2 nebo ISO Latin 2. Oproti ASCII jsou zde vyuţity i volné pozice znakové tabulky, do kterých jsou umístěny diakritizované znaky. Microsoft nepřevzal tyto uvedené sady a navrhl svou vlastní alternativu, která je nazývána windows-1250. Novým trendem je unicodové kódování OTF (Open Type Font) vyuţívající znakovou sadu obsahující všechny znaky světových abeced včetně matematických a věděckých symbolů bez závislosti na platformě. Pro popis jednotlivých znaků pouţívá jeho názvu, nikoli jeho umístění jak tomu bylo u ASCII. Díky této moţnosti je moţné zobrazit korektně HTML dokument sloţený z více jazykových mutací. Z toho důvodu je zapotřebí při psaní HTML dokumentu uvést vţdy zvolené kódování pro korektní zobrazení obsahu prohlíţečem. Nerozšířenějším pouţívaným kódováním ve světě je UTF-8, pro český jazyk je vyuţíváno kódování středoevropského (iso-8859-2) a windows (windows 1250). Způsob jakým provést zápisy jednotlivých kódování v hlavičce HTML dokumentu je znázorněn níţe: Středoevropské: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Windows: <meta http-equiv="content-type" content="text/html; charset=windows1250">

Unicode: 24

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 23

REICHENSTEIN, Oliver. Information Architects [online]. 2006 [cit. 2010-17-10]. Web Design is 95% Typography. Dostupné z WWW: . 24

Typomil : Typografie na webu… [online]. 2005 [cit. 2011-02-01]. Dostupné z WWW: .

- 40 -

Aby mohl být text stránky zobrazen návštěvníkům, musí mít uvedený font ve svém počítači nainstalován. Běţný počítač s OS (operační systém) MS Windows má k dispozici kolem 40 fontů, oproti tomu Mac OS disponuje přibliţně 100 fonty. Mnoho z těchto fontů je seskupeno do tzv. font family (rodina fontů). Font family je skupina řezů vycházejících ze stejného druhu, mající společné kresebné vlastnosti. Jméno získává dle typu základního písma. Podle řezu písma (typeface, font-style) mohou být znaky zobrazovány v: základní podobě ( Normal, Regular, Plain, Roman), kurzívě (Italic, Cursive, Slanded), tučné podobě (Bold) polotučné (Semibold, Demibold) šířce znaků (Condensed, Compressed, Narrow, Wide, Large, Expanded, atd.). Písma, která se pouţívají ve webových prezentacích, dělíme na: Patková písma, která jsou ukončena patkami. Představiteli patkových písem jsou Times New Roman či Courier. Bezpatková písma nejsou ukončena patkami. Jedná se o vhodnou alternativu k patkovým písmům. Mezi písma, která jsou na webu pouţívána, patří Arial, MS Sans Serif, Helvetica či Verdana. Kaligrafická a volně psaná písma vycházející s kaligrafických skriptů s rozdíly v tloušce tahů a ze součastných rukopisných skriptů. Patří k nim Caslon Swa, Comic Sans, Mistral, Park Avenue DEE, Shelley Allegro Script.25 Další termíny, se kterými se v typografii setkáváme, jsou: proporcionální vychází z šířky jednotlivých znaků, kdy písma mají rozdílnou šířku neproporcionální pouţívá shodnou šířku u všech znaků odpovídající nejširšímu písmenu M (Courier). Tato kategorie je pozůstatkem dřívější doby a psacích strojů, kde mezera mezi písmeny byla daná krokem posuvu válce. minusky (small caps) - písmena malé abecedy verzálky (caps) - písmena velké abecedy stupeň písma (font-size) - udává velikost písma 25

KUČERA, Miroslav. Interval.cz [online]. 1999 [cit. 2010-17-10]. Kurz HTML - písma pro www stránky. Dostupné z WWW: .

- 41 -

řádkový proklad (leading, line-height) - mezera mezi jednotlivými řádky26 Při výběru fontů pro web je vhodné vyuţít doporučených fontů (viz. Tabulka 3), aby nevznikl problém se zobrazením a doplnit je o alternativní fonty. Ty přijdou na řadu ve chvíli, kdy hlavní font nemá návštěvník k dispozici. Můţe být také vyuţito stahovatelných nepodporovaných fontů, které jsou vhodné, kdyţ chceme zobrazit stránky v cizím jazyce se speciálními znaky anebo vyuţít specifického stylu písma pro originální design. Tyto fonty jsou uloţeny spolu s ostaními náleţitostmi na webový server. Do HTML stránky je zapsána cesta ke zdrojovému adresáři s fonty. Jednotlivé fonty však mohou být zobrazeny různě dle pouţitého prohlíţeče. Internet Explorer podporuje pouze fonty ve formátu.eot (Embedded Open Type). Je-li zadefinována cesta k adresáři s fonty, musí být ještě přiřazeno jméno fontu v CSS prostřednictvím descriptoru font-family a jeho velikost prostřednictvím descriptoru font-size. 27 @font-face { src: url("fonty/mujfont.eot"); font-family: muj_font; font.size: 12px; } Obrázek 11. Zápis CSS obsahující cestu k pouţitému fontu s jeho velikostí

Mezi nejčastěji pouţívaná písma na webových stránkách patří Arial CE, Times New Roman, MS Sans Serif, Verdana a s jejich zobrazováním nebývá v OS MS Windows ţádný problém. V případě jiných OS nebo různých výrobců bývá pouţíváno alternativních názvů fontů. Můţe však nastat situace, kdy návštěvník poţadovaný font k dispozici má, avšak ne v češtině. Poté dojde k zobrazení textu bez češtiny a alternativní písmo není pouţito.

26

OTT, Vlastimil. Scribus.cz [online]. 2010 [cit. 2011-01-25]. Základní typografické pojmy: Co byste měli vědět o písmu. Dostupné z WWW: . 27

DUDEK, Jan. Interval.cz [online]. 2003 .

[cit.

2010-10-17].

- 42 -

Stahovatelné

fonty

poprvé.

Dostupné

z

WWW:

Pod pojmem standardní fonty operačního systému máme na mysli fonty, které jsou součástí instalace OS. Většinou se jedná o fonty, které jsou obsaţeny v tabulce č. 3. Generic

Font

Windows Windows Mac Mac Linux 9x/2K/XP Vista Classic OS X Unix

Cambria Constantia serif

Times New Roman Times Georgia Andale Mono Arial Arial Black Calibri Candara

sans-serif Century Gothic Corbel Helvetica Impact Trebuchet MS Verdana cursive

Comic Sans MS Consolas

monospace Courier New Courier *Zelená barva představuje běţné fonty, ţlutá méně běţné avšak akceptovatelné pro pouţití ve webových prezentacích. 28

Tabulka 3. Bezpečné a vhodné fonty pro web

Ve chvíli, kdy je výbírán vhodný font pro web, musíme brát do úvahy členění stránky s pouţitými sekcemi. Není nutné ve všech sekcích pouţít ten samý font. Správná volba

28

BREWER, Dustin. DustinBrever [online]. 2007 [cit. 2011-10-17]. Fonts on the web and a list of web safe fonts. Dostupné z WWW: .

- 43 -

fontu můţe stránku oţivit a stejně tak zapříčinit při špatné volbě její strmý pád do zapomění. Nejdůleţitěší je zvolit vhodný font pro hlavní text (Body text). Tato sekce by měla obsahovat nejpodstatnější informace webu, a nebudou-li moci čtenáři tuto část jednoduše a snadno přečíst, nejspíš se uţ nevrátí. Naopak font pouţitý v titulku (Headlines), by měl celý vzhled oţivit, zapůsobit a upoutat návštěvníky. Další moţností jak oţivit vzhled textové sekce je pouţití citací (BlockQuotes) a ty jsou příleţitostí, jak přidat určitý styl stránce. Zvýrazněním určité části textu za pomoci jiného fontu, kdy celý obsah umístíte do uvozovek, můţeme narušit ucelenou plochu textu a vyzdvihnout ji. Stejně tak existují doporučení jak navzájem kombinovat různé fonty.

Obrázek 12. Citace29

4.4.1

Kontrast textu

Kontrast textu je nutný proto, aby návštěvníkovo oko mohlo snadno číst celý obsah. Dobrou pomůckou jak kontrolovat správný kontrast webu, je jeho zobrazení ve stupních šedi. Díky tomuto náhledu snadno odhalíte místa, která nebyla dostatečně kontrastní a mohla uniknout pozornosti. Pro tento jednoduchý test můţe být vyuţito nástroje GrayBit (dostupný z www: http://graybit.com/main.php), který online ověří kontrast webu a celý jeho obsah zobrazí ve stupních šedi. 4.4.2

Velikost fontů

Dalším důleţitým kritériem pro dobrou čitelnost textu je jeho správná velikost. Velikost písma na webové stránce můţe být definována dvěma způsoby. Můţe být definována prostřednictvím specifické velikosti anebo můţe být definována v závislosti na nadřazeném elementu (rodiči). Kaţdý operační systém a prohlíţeč vyuţívá svého standardního nastavení. Proto je vhodné testovat čitelnost textu v různých prohlíţečích a vyuţít moţnosti, které prohlíţeče poskytují, a měnit velikost textu na menší, střední, větší a největší, případně změnit

29

LENNARTZ, Swen. Smashing Magazine [online]. 2008 [cit. 2010-10-19]. Block Quotes and Pull Quotes: Examples and Good Practices. Dostupné z WWW: .

- 44 -

velikosti stránky prostřednictvím zoomu v rozsahu od 90 % do 120 %. Toto testování potvrdí, zda byla zvolena ta správná velikost fontu. Standardní textovou velikost, kterou prohlíţeče vyuţívají v základním nastavení je 16 px. Přesto však tato základní hodnota nemusí všem vyhovovat a můţe působit jako příliš velká pro hlavní text. Doporučená velikost textu pro hlavní obsah je 12–14px. Mají-li být šetřeny oči návštěvníků, bývá spíše pouţívána velikost fontu 14px. Velikost textu můţe být také definována v procentech, anebo prostřednictvím jednotky Em (relativní délková jednotka), která je typografickou jednotkou. Definice velikosti fontu prostřednictvím jednotky Em je doporučeno W3C. Modelový zápis těchto uvedených moţností znázorňuje obrázek č. 13.

Obrázek 13. Zápis velikosti textu

Kaţdá z těchto alternativ v dnešních prohlíţečích zobrazuje text bez problémů. Výsledná volba tedy závisí pouze na uváţení designéra.30

30

BOWEN, Robert. Pelfusion [online]. 2010 [cit. 2010-12-10]. A Guide To Typography On The Web. Dostupné z WWW: .

- 45 -

5 Testování pouţitelnosti Jedná se o jeden z finálních kroků předtím, neţ dojde k zpřístupnění webu veřejnosti. Prostřednictvím tohoto testování je moţné získat představu o tom, zda to, co bylo navrţeno a vyvinuto, je chápáno tak, jak bylo původně zamýšleno. Testování můţe být prováděno ve skupině nebo pouze jednotlivcem. Cílem je získat názor zúčastněných na to, co jim bylo představeno a v následné reakci zapracovat moţné připomínky do finálního řešení. V průběhu vývoje získávají návrháři falešný pocit, který je utvrzuje v tom, ţe je vše intuitivní a logické. Proto neočekávají, ţe návštěvníci na webu zabloudí nebo určité jeho části nepochopí, tak jak bylo zamýšleno. Při testování je moţné získat nový pohled na vyvíjený web prostřednictvím reakcí lidí podílejících se na testování. Jejich názory přinesou určitě mnohá vylepšení, která nebylo moţné pro zainteresovanost vyvíjejících vidět. Není nezbytné, aby samotné testy zabraly hodně času. Stačí sezvat přátele, ukázat jim web a nechat je vyjádřit ke stuktuře, vzhledu, názvům, pouţitým barvám. Během krátké chvíle získáte několik stránek poznámek moţného vylepšení. Samotné testování nemusí být vţdy realizováno aţ na konci projektu, můţe být vyuţito uţ při samém začátku, kdy jsou analyzovány konkurenční weby. Názory testujících mohou pomoci se vyvarovat případných chyb ještě před tím, neţ jsou udělány. Důleţité je provádět testování v dostatečném časovém předstihu před zakončením samotného projektu tak, aby bylo moţné zapracovat získané poznatky do finálního řešení. Při vyběru vhodných kandidátů pro testování, je dobré zvolit takové jedince, kteří budou podobní cílové skupině. Testování je iterační proces a proto je nezbytné provádět jej několikrát. Testování pouţitelnosti je vyuţívané jiţ dlouho. Probíhá tak, ţe je uţivateli předloţeno testované prostředí a sleduje se, jakým způsobem je uţivatel pouţívá a kde naráţí na problémy. Poté, co dojde k odstranění problémů, je opětovně prostředí předloţeno k testování. Dříve bylo testování pouţitelnosti velice nákladné. Byla pro něj vyuţívána testovací laboratoř a pozorovací místosti, které byly spolu spojeny prostřednictvím falešného zrcadla. Pozorovací místnost byla vybavena kamerami, které nahrávaly reakce uţivatelů a věci, které pouţívali. K tomu, aby bylo moţné získat statisticky platné výsledky, bylo zapotřebí najmout velké mnoţství lidí. Výsledná cena testu se pohybovala v rozmezí 20 000 aţ 50 000 dolarů. Kdyţ Jakob Nielsen představil veřejnosti svůj referát na téma „ Sleva na testování pouţitelnosti“, nastala změna v této oblasti. Ve svém referátu ukazuje, ţe není zapotřebí k testování pouţívat nákladného způsobu vyţadujícího zázemí testovací laboratoře a velkého počtu lidí. Tato moţnost byla velkým krokem vpřed v této oblasti.31 31

KRUG, Steven. Webdesign : Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006. 168 s. ISBN 80-251-1291-8.

- 46 -

6 Doména a hosting Poté, co byl věnován čas návrhu webu, byl připraven ten správný obsah, musí dojít k výběru správného doménového jména. Doména poskytuje vyvinutému webu jedinečné jméno, pod kterým bude webová prezentace vystupovat ve světě internetu. Pojem hosting představuje prostor, do kterého je umístěna webová prezentace tak, aby byla přístupná na internetu. Nabídka jednotlivých hostingů se můţe lišit a výběr závisí na poţadavcích, které jsou na hosting kladeny. Kromě placených hostingů, které se dle vynaloţených prostředků mohou lišit mnoţstvím poskytovaných sluţeb, můţe být vyuţito tzv. freehostingů. Toto řešení se stalo v dnešní době velice oblíbené a vyuţívají jej kromě velkého mnoţství nekomerčních webů i firmy. Hlavní předností tohoto řešení je samozřejmě cena za poskytovaný prostor. Cena „zadarmo“ osloví velké mnoţství potenciálních zákazníků a stejně tak i rychlost výsledného řešení, které je okamţitě k dispozici a není zapotřebí nic objednávat. Prostřednictvím registrace získává uţivatel k dispozici volný prostor pro web. Toto řešení však není vhodné z dlouhodobého hlediska, pokud plánujeme budoucnost našeho webu. Rozhodneme-li se v budoucnu vyuţít jiného poskytovatele hostingu, nemůţeme vyuţít svou stávající doménu. Coţ můţe znamenat ztrátu návštěvníků. Existuje moţnost přesměrování stránek, kdy návštěvník přistupuje na starou doménu, ze které je pak dále přesměrován na aktuální web, ale v prostředí freehostingů to nemusí být vţdy jednoduché. Ne vţdy je k dispozici patřičné mnoţství nástrojů, které toto řešení umoţní. Stejně tak není poskytovatelem freehostingu garantována dlouhodobá funkčnost a kromě krátkodobých výpadků je moţné se setkat i s ukončením poskytovaných sluţeb. V krátkém okamţiku je moţné ztratit celou vybudovanou práci. V případě technických problémů také nemůţe být očekávána plná technická podpora 24 hodin denně a 7 dní v týdnu. A v neposlední řadě bývá tato sluţba vykoupena umístěním reklamy do stránek, kterou není moţné ovlivnit. Je-li pouţita vlastní doména, je moţné se vyhnout většině z těchto uváděných nedostatků. Cena za poskytovanou doménu se liší dle TLD (Top-Level-Domain). Doména nejvyšší úrovně můţe být zakončena národní, evropskou, případně nadnárodní doménou.

- 47 -

Jednotlivé moţnosti si můţeme představit takto: Národní doménu. CZ Evropskou doménu. EU Nadnárodní domény. COM, .NET, .ORG, .INFO, .BIZ, .NAME, .MOBI, Evropské domény. AT, .BE, .DE, .ES, .HU, .CH, .IT, .ME, .NL, .PL, .RU, .SE, .SK Světové domény. BZ, .CC, .IN, .MN, .TV, .US, .WS32 Pokud jsou řádně hrazeny poplatky za doménu, nemusíme se ničeho obávat. Doména je naše a my nejsme vázáni na poskytovatele hostingu. Nebudeme-li spokojeni s jeho sluţbami, můţeme web přesunout k jinému poskytovateli a naši návštěvníci nás stále najdou pod naším jménem, naší doménou. Snaţíme se získat nové a nové návštěvníky našeho webu, budujeme jeho značku a nebylo by rozumné tuto naši snahu přivést k záhubě volbou freehostingu v případě, ţe to s naším webem myslíme váţně. Jedna ze sluţeb, která je k dispozici u placeného hostingu, je moţnost vyuţívat jednotnou hlavičku pro naše e-maily ([email protected]). Budeme-li vyuţívat této moţnosti, kaţdý, kdo narazí na náš e-mail můţe jednoduchou cestou odvodit adresu našeho webu. Toto řešení působí na naše zákazníky profesionálnějším dojmen, a ti získávají pocit, ţe komunikují s tím, s kým opravdu komunikovat chtějí.33 Výběr vhodné doménového jména můţe přivést mnoho návštěvníků, kteří původně neměli v úmyslu náš web navštívit. Proto by vhodné doménové jméno mělo být blízké obsahu webu a návštěvník by si měl být schopen pod jeho názvem představit obsah stránek. Název domény by měl být tvořen českými slovy, která se píší tak, jak vyslovují, aby nemohlo dojít k chybě v zápisu. Cízí slova nemusejí návštěvníci správně zapsat. Správný zápis by neměl obsahovat pomlčky ani čísla, neměl by být náročný pro zápis do adresového řádku. Název domény můţe vycházet ze subjektu, který jiţ nějaké jméno má (stránky firmy, instituce, osobní stránky). Pokud je doména.cz jiţ registrována, můţe být zvolena jiná koncovka, doména.com, případně můţe být pouţito předpony nebo přípony. Je ţádoucí vybrat takové jméno, které bude jedinečné. Poté, co dojde k zaregistraci vybrané domény, se stává plátce jejím vlastníkem. Je zapotřebí řádně provádět platby za doménu, aby nedošlo k její expiraci, coţ by mohlo zkomplikovat a prodraţit její zpětné nabytí. Kdyby nebylo moţné získat doménu zpět, došlo by ke ztrátě návštěvníků, kteří si ji zapamatovali a oblíbili. 32

Český hosting [online]. Praha: 2011 hosting.cz/#utm_source=adwords&utm_medium=cpc>.

[cit.

2011-01-01].

33

Dostupné

z

WWW:


WEIDA, Petr. Interval.cz [online]. 2004 [cit. 2011-01-02]. SEO - výběr domény a hostingu. Dostupné z WWW: .

- 48 -

7 Jak dát o stránkách vědět SEO (Search Engine Optimization, optimalizace pro vyhledávače) představuje metodiku určenou pro webové stránky, která postkytuje vodítko pro práci s obsahem stránky, tak aby ji mohly zpracovávat internetové vyhledávače. Cílem je dosáhnou co nejvyšší pozice v rámci hledání vyhledávači tak, aby byly stránky často zobrazovány ve výsledcích vyhledávání a díky tomu rostla návštěvnost webové stránky. 7.1

SEO optimalizace obsahu

Jedná se o velmi důleţitou část, která nesmí být opomíjena při samotném vývoji webu. Nebude-li vyvíjený web správně optimalizován, těţko na něj najdou návštěvníci cestu. Ani samotná optimalizace však nezajistí, ţe jej návštěvnící najdou. Nestačí vytvořit pohledný web s velkým mnoţství článků, produktů či fotografií. Takový web jsme sice umístili na internet prostřednictvím hostingu, ale přesto jsou naše stránky opuštěné. Návštěvník, který na stránky zavítá, musí znát naši adresu, jméno naší domény. A bohuţel nám těch pár známých, kterým jsme o webu řekli, nepomůţe v tom, abychom web dostali do podvědomí širší veřejnosti a vyhledávačů. Ke slovu přichází administrativní práce, kdy musí být web registrován do katalogů. 7.1.1

Katalogy

Katology představují webové stránky obsahující velké mnoţství odkazů, které jsou dle jejich tematického zařazení seskupeny do oblastí. Z českých katalogů jsou nejznámější Seznam, Centrum a Atlas, ze zahraničních Yahoo. Registrace stránek je moţné provést několika moţnými postupy, které jsou závislé na konkrétním katalogu. Jednodušší cesta vyţaduje zadat pouze adresu webu. Vše ostatní za nás zvládnou zdroje daného katalogu. Náročnější registrace vyţaduje zadání kategorie, do které budou stránky zařazeny. Dále pak adresu našeho webu, titulek stránek, popis definující obsah a hlavně administrátorský e-mail, na který budou zaslány potřebné údaje k proběhlé registraci. Doporučuji vytvořit si svou vlastní šablonu v textovém editoru (MS Word) s předdefinovanými poli. Tato pole doplnit o relevantní text, který bude pouţíván pro vkládání do dalších katalogů. Tento postup ušetří čas při registraci a umoţní vkládat identický text do všech katalogů. U kaţdé z uváděných poloţek jsou definována pravidla říkající, co je moţné v těchto polích pouţít a co nikoliv. Stejně tak je definován moţný rozsah vkládaných

- 49 -

informací. Obrázek č. 14. ukazuje prostředí katalogu Seznam.cz, kde je prováděna registrace webu do katalogu.

Obrázek 14. Registrační okno katalogu Seznam

Záznam je přidán do katalogu poté, co je zkontrolován editorem. Vyhledávání v prostředí katalogu je realizováno prostřednictvím jednoduchého dotazu, kdy jsou zobrazeny odpovídající výsledky nebo přímo procházením jednotlivých sekcí. Pozici stránky v katalogu ovlivňují pouţitá klíčová slova, na které byly webové stránky optimalizovány a také dle hodnocení fulltextového vyhledávače (S-Rank, JyxoRank, Ranking apod.). 7.1.2

Fulltextové vyhledávače

Fulltextové vyhledávače představují software, který pracuje s celým obsahem internetu (webové stránky, dokumenty textových editorů, PDF soubory apod). Zpracovaný obsah indexuje a ukládá do své databáze. Návštěvníci pak prostřednictvím této databáze mohou vyhledávat poţadovaný obsah prostřednicvím dotazů. Z prostředí čekého internetu je nejznámější Jyxo a Morfeo, ze zahraničních Google. Výraz fulltext u dnešních vyhledávačů představuje jejich schopnost prohledávat celý dokument. Vyhledávač se skládá ze dvou částí. Robot představuje první z nich, druhou je webové rozhraní. Robot se pohybuje samostaně po webu, kde prochází soubory a indexuje jejich obsah. Je naprogramován tak, aby věděl, kdy se má na stránky vrátit zpět. Registrace do vyhledávačů nemá smysl, robot vyhledávače nalezne

- 50 -

stránky sám. Oproti tomu registrace do správných sekcí katalogů přináší stránkám poţadované zpětné odkazy. Proto je vhodné věnovat čas registraci do katalogů a to i přesto, ţe v dnešní době většina uţivatelů internetu vyuţívá pro vyhledávání vyhledávačů. Samotné vyhledávače a katalogy však nestačí k tomu, aby se web dostal na čelo ţebříčku v rámci vyhledávání. Klíčem úspěchu je popularita. Ta se měří prostřednictvím zpětných odkazů z podobně tématicky zařazených stránek mířících na náš web. K tomu, abychom získali zpětné odkazy, můţeme vyuţít: tématicky příbuzných webů, které oslovíme a poţádáme o umístění zpětných odkazů, výměny odkazů s příbuznými weby, členství ve skupinách z tématicky blízké oblasti působení webu (diskuzní fóra) atd.34 7.2

SEO metody

SEO metody se dělí na dvě části. On page a Off page faktory. On page faktory vycházejí z jednotlivých prvků na stránce, Off page faktory vyhodnocují všechny odkazy z internetu na náš web. 7.2.1

On page faktory a jejich optimalizace

On page faktory vycházejí z celého obsahu webových stránek jako jeho struktura, URL a samotný kód. Nejdůleţitější při optimalizaci je pouţití správných klíčových slov, proto musí být výběru věnována velká pozornost. Základní vlastností úspěšného klíčového slova je, jak často jej uţivatelé internetu vyhledávají a jaká je jeho konkurence s ostatními pouţívanými klíčovými slovy. I zde existují nástroje, které mohou pomoci při výběru vhodných klíčových slov. Jedním z nich je našeptávač vyhledávače Seznam.cz. Prostřednictvím vyhledávacího pole můţeme získat zadáním části slova celé fráze seřazené sestupně dle hledanosti, které začínají na zadaný výraz a tím tedy zjistit, které fráze jsou často pouţívané pro vyhledávání. Stejně tak jsou na Seznamu k dispozici statistiky kaţdého vyhledávacího slova. Stačí jen nechat zobrazit výsledky hledání konkrétního slova a na spodní části stránky zvolit moţnost Statistika dotazu. Je ţádoucí volit slova se vzrůstající tendencí hledanosti, v budoucnu přivedou tato slova více návštěvníků. Stejně důleţitým faktorem je moţná konkurence klíčových slov. Tu je moţné zjistit dle počtu výsledků vyhledávání, případně analýzou webů, které se umístí na čele ţebříčku vyhledávače.

34

CASTRO, Elizabeth. HTML, XHTML a CSS : Názorný průvodce tvorbou WWW stránek. Vyd. 6. Praha: Computer Press, 2007. 440 s. ISBN 978-80-251-1531-2.

- 51 -

Je dobré vědět, zda byly zoptimalizovány na dané klíčové slovo. Pokud není k dispozici rozpočet pro nákup adekvátních zpětných odkazů a neexistuje ani jiná cesta jak překonat weby na prvních místech, které pouţívají ty nejvyhledávanější výrazy, musí být zvoleno méně konkurenční klíčové slovo. Počet klíčových slov v textu webu je důleţitý, měl by být přirozený a neměl by narušovat čitelnost samotného textu. Hustota klíčových slov v textu by se měla pohybovat v rozsahu 2–7 %. Při překročení této hranice můţe nastat opačný efekt, stránka je penalizována. I zde můţe být pouţito nástrojů pro analýzu výskytu počtu klíčových slov (např. http://analyzahustoty.seo-expert.cz/). Ty za nás vyhodnotí obsah celého textu. Další z faktorů, které nesmí být opomenuty při optimalizaci, je plně vyuţívat tagu Title. Tento tag je důleţitý pro vyhledávače. Kaţdá stránka by měla mít jedinečný Title. Měl by popisovat obsah kaţdé stránky. Stejně tak je vhodné pro budování značky na internetu umístit značku v atributu Title. Doporučená velikost pro tuto sekci je 70 znaků. Tag Meta description bývá zobrazován ve výsledcích vyhledávání a stejně jako Title i zde by se mělo jednat o text informující o obsahu stránky. Počet znaků by neměl překročit 250. Tag Keywords by měl obsahovat klíčová slova pro kaţdou stránku a to i přesto, ţe jej většina vyhledávačů nevyuţívá. Obsahově by zde uvedená slova měla korespondovat s vyskytujícími se slovy v samotném textu stránky. Je zbytečné zde pouţívat slova, která se na stráce nenacházejí. Další z moţností, které napomáhají optimalizaci, je vyuţívání nadpisů H1 aţ H6. Nadpis H1 se smí na stránce vyskytovat pouze jednou a měl by být co nejkratší, aby v něm obsaţená klíčová slova neztrácela na významu. Stejně tak vyuţívání tučného textu a kurzívy u klíčových slov můţe přidat na důleţitosti. Mnoţství takového textu, by však mělo být vyváţené. Základním předpokladem je přehlednost výsledného textu. Popisky obrázků nejenţe zastupují obrázek při jeho načítání do prohlíţeče a představují jeho obsah, ale také jsou důleţité pro vyhledávače. Proto by měl být atribut alt vţdy doplněn o odpovídající text k obrázku. Základem úspěchu je ale hlavně kvalitní obsah, čím kvalitnější obsah budou stránky obsahovat, tím méně času bude zapotřebí pro samotnou optimalizaci. Důvod je prostý, na stránky s kvalitním obsahem lidé více odkazují.35

35

ING. SMIČKA, Radim. Optimalizace pro vyhledávače – SEO : Jak zvýšit návštěvnost webu. Dubany : Jasmínka , 2004. 120 s s. Dostupné z WWW: . ISBN 80-239-2961-5.

- 52 -

7.2.2

Off page faktory a jejich optimalizace

Předtím neţ se pustíme do optimalizace Off page faktorů, je nutné mít správně optimalizované stránky na On page faktory. Off page faktory vychází z odkazů vedoucích na jednotlivé stránky. Nejedná se jen o odkazy z internetu na náš web, ale také o jednotlivé provázání našich stránek mezi sebou prostřednictvím odkazů. Tato problematika se nazývá ranking a vychází ze všech odkazů vedoucích na stránky a z jejich důleţitosti. Stejně tak sem patří URL odkazu a anchor text (viz. níţe). 7.2.2.1 PageRank Dnešní vyhledávače pouţívají k hodnocení nalezených výsledků vyhledávání systém rank (hodnocení). Google pouţívá PageRank (moţná hodnota ranku 0/10), Seznam S-Rank (0/100) a Jyxo Jyxorank (0/220). Rank představuje hodnotu popularity webu vycházející z myšlenky, ţe na kvalitní weby je častěji odkazováno neţ na ty nekvalitní. Rank stránky je moţné zjistit prostřednictvím toolbarů či jiných na webu dostupných nástrojů (http://ranky.cz/ranky). Skoro kaţdý externí odkaz předává webu, na který odkazuje, určitý rank. Výsledná hodnota předávaného ranku vychází z hodnoty ranku celé stránky děleného počtem umístěných odkazů ve stránce. Proto je důleţité provádět výměnu odkazů jen s takovými weby, které mají hodnotu ranku vyšší neţ 4. Této hodnoty lze dosáhnou prostřednictvím registrace stránek do katalogů (kapitola Katalogy a Fulltextové vyhledávače). Stejně tak je vhodné zkontrolovat hodnoty ranku stránky, kde má být odkaz umístěn, hodnota ranku se bude lišit od ranku hlavní stránky. 7.2.2.2 Anchor text (popis odkazů) Další moţností jak vylepšit optimalizaci Off page faktorů je vyuţívat moţností anchor textu. Popis odkazů (anchortext) umoţňuje do stránky umístit další text, který můţe obsahovat klíčová slova, která napomohou lepší vyhledávanosti. Měl by návštěvníka informovat o tom, co bude následovat po kliknutí, případně kam odkaz vede. I zde je zapotřebí dát pozor na zakázané techniky, které by mohly naopak hodnotu ranku negativně ovlivnit v případě, ţe by došlo k jejich odhalení. Patří mezi ně technika skrytého textu/odkazu pouţívající stejné barvy textu jako pozadí stránky, díky níţ není text na stránce viditelný. Stejně tak umístění malého textu na konci stránky, který je pro návštěvníky nečitelný a obsahuje velké mnoţství klíčových slov pro zlepšení pozice stránky při vyhledávání. Tyto techniky mohou odhalit samotné vyhledávače, případně na ně mohou

- 53 -

upozornit návštěvníci z řad konkurence, kteří budou chtít zaujmout naši pozici, v rámci vyhledávání penalizací našeho ranku.36 7.3

Analýza přístupu

K tomu, aby bylo moţné správně optimalizovat stránku, je zapotřebí získávat informace o jejich návštěvnících a měřit dopady realizovaných změn na její návštěvnost. Za tímto účelem vznikly webové nástroje typu Toplist, Navrcholu či Google analytics, které jsou schopny tyto informace poskytnout. Jsou určeny k měření a sběru dat, kontinuálnímu zlepšování obsahu webu a k lepšímu cílení a dosahování obchodních cílů. Tyto nástroje poskytují kvantitativní data, která popisují, co se na webu stalo. Pokud nejsou kvantitativní data dostačující, je vhodné se zaměřit na sběr kvalitativních dat. Ta říkají, proč se tak stalo. Kvalitativní data je moţné získávat z různých zdrojů dat, vhodné je pouţít rozhovor a test pouţitelnosti. Snazší cesta je prostřednicvím průzkumu, stačí poloţit návštěvníkům jednoduché otázky prostřednictvím anket, které pomohou porozumět, co návštěvníci chtějí (Proč dnes přišli? Zda našli, co hledali, pokud ne tak proč?). Proces průběţného zlepšování vychází z řízení vývoje na základě zjištěných skutečností a potřeb návštěvníků včetně potenciálu, který návštěvníci mohou poskytnout. Prostřednictvím dat získáme informace o tom, ţe není něco v pořádku, ale tyto nástroje nám nejsou schopny nabídnout řešení, které nám problém pomůţe vyřešit. Nalézt řešení, které odhalené nedostatky vyřeší, je na nás. Proto je vhodné provádět testování webové stránky různými nástroji jako Google´s Website Optimizer. Tento způsob testování není nákladný jak po finanční tak po časové stránce. Je vhodné jej pouţívat ve chvíli, kdy chceme provést určitou změnu, jako nový vzhled stránky a podobně. Můţeme nasadit do provozu nové stránky (více verzí vzhledu a obsahu) a testovat, jak na ně návštěvníci reagují a poté zvolit tu, co měla nejlepší výsledky. K tomu abychom byli schopni těchto nástrojů vyuţívat, je nezbytné umístit měřící kód do kaţdé stránky, o které chceme získávat informace. Výsledná zpětná vazba poskytuje informace o návštěvnících, jejich pohybu na webu a době, kterou zde strávili. Stejně tak jsou také k dispozici informace, z jakého vyhledávače přišli, jaké klíčové slovo či fráze je přivedla a podle času stráveného na webu i to zdali našli, co hledali. Moţností těchto nástrojů je mnoho a vyplatí se věnovat čas této problematice. V této práci na tuto moţnost pouze upozorňuji. Pro správné pochopení moţností těchto nástrojů a zvládnutí 36

MAŤOVKA, Marek. SWMAG [online]. 2008 [cit. 2011-01-21]. Optimalizace Off Page faktorů a podvodné techniky - SEO - díl 3. Dostupné z WWW: .

- 54 -

schopností s nimi pracovat by bylo zapotřebí rozebrat jednotlivé moţnosti do hloubky, na coţ zde není dostatek prostoru. Proto bych rád odkázal čtenáře na specializovanou literaturu zabývající se touto problematikou jako např. Google Analytics37. V rámci praktické části této práce budou čtenáři představeny ukázky jednotlivých reportů z nástroje Google Analytics.

37

CUTRONI, Justin. Google Analytics : Understanding visitor behavior. Vyd. 1. Cambridge: O´Reilly, 2010. 200 s. ISBN 978-0-59615800-2.

- 55 -

8 Praktická část V této praktické části se zaměříme na webovou prezentaci VASFOTOGRAF.COM. Jak jiţ sám název napovídá, jedná se o web zaměřený na digitální fotografii. Primárně vznikl jako potřeba prezentovat mé dílo veřejnosti. Tento způsob sebeprezentace vyuţívá většina fotografů, kteří se snaţí široké veřejnosti představit svou práci, a tento web neměl být výjimkou. Byť jsem se ve chvíli, kdy jsem tento web připravoval, nechtěl fotografií ţivit, bylo mojí snahou připravit si moţné pole působnosti v této oblasti. Zázemí tohoto webu mi mělo pomoci usnadnit vstup do této oblasti a představit se potenciálním zákazníkům. Dle reakcí návštěvníků na obsah jsem jednotlivé sekce upravoval a rozšiřoval tak, abych si získal přízeň co nejširšího publika. Zda se mi to povedlo, musí posoudit hlavně sami návštěvníci.

8.1 Definování cílů Cíle říkají, čeho má být určitou činností dosaţeno. V prostředí podniku definují, jaký podíl na trhu chce společnost zaujmout, o jaký zisk nebo růst značky stojí. Je nutné, abychom byli schopni naše cíle a jejich stupeň dosaţení měřit. V rámci kaţdého projektu je nezbytné definovat cíle, i v případě webové prezentace VASFOTOGRAF.COM tomu nebylo jinak. Cílem projektu bylo vytvořit web, který bude působit reprezentativním dojmem a osloví své návštěvníky jiţ po načtení první stránky v prohlíţeči. Snahou bylo získat věrné návštěvníky, které má práce oslovuje a zajistit vzrůstající trend návštěvnosti těchto stránek. Naplnění těchto cílů bude interpretováno v následující části této práce. 8.1.1

Seznámení s cílovou skupinou

Analýza zákazníka je nezbytným předpokladem pro úspěšný vstup na trh a rozšiřování pozice společnosti. V našem případě je trhem samotný internet a společností naše webová prezentace. Jako kaţdý produkt na trhu, tak i fotografie a foto weby mají svou cílovou skupinu. Kaţdý, kdo chce obstát ve vysoce konkurenčním prostředí, musí mít znalost o své cílové skupině, o jejich potřebách, chování, nestačí mít k dispozici jen schopnost pořizovat pěkné snímky, byť je to jeden ze základních předpokladů návštěvnosti foto webu. Znalost chování zákazníků je jedna z klíčových podmínek nezbytných pro efektivní vývoj produktů a sluţeb. Z této znalosti se dále odvíjí sestavení účinného programu na podporu produktu a je rovněţ nezbytná pro správné nastavení cenové a distribuční politiky.

- 56 -

Při samotné analýze zákazníků je nutné vycházet z: chování zákazníků, faktorů, které mohou chování zákazníka ovlivňovat, fází rozhodovacího procesu. Při analýze chování je nutné nalézt odpovědi na otázky jako: Kdo se o produkt anebo sluţbu zajímá, (identifikace cílové skupiny)? Co, jaký produkt, jakou sluţbu (identifikace produktu)? Proč se o daný typ sluţeb a produktů zajímá (identifikace potřeby)? Jak jej pouţívá (identifikace způsobu uţití)? Kdy se o produkt nebo sluţbu zajímá (identifikace času, sezónost)? Kde produkt anebo sluţbu poptává? O chování zákazníka se dnes zajímají ekonomové, biologové, sociologové a psychologové. Jedná se však o nesnadný úkol, není jednoduché předvídat lidské chování. Chování zákazníka mohou ovlivňovat: kulturní faktory, společenské faktory, individuální faktory, psychologické faktory. Kulturní postoje vycházejí z hodnot jednotlivců, jejich postojů a přístupu k ţivotu. Jsou dány mentalitou jednotlivých národů. Společenské faktory jednotlivců jsou ovlivňovány jejich rodinou, společenskou třídou, lidmi z okruhu známých nebo referenční skupinou. Individuální faktory vycházejí ze zaměstnání jednotlivců, jejich příjmu, osobnosti a ţivotního stylu, který je jim vlastní.38 Máte-li tyto informace k dispozici, můţete pruţněji reagovat a přizpůsobovat svou nabídku cílové skupině či svou cílovou skupinu naopak rozšiřovat prostřednictvím naší nabídky. Cílovou skupinou VAŠEHO FOTOGRAFA jsou muţi a ţeny se zájmem o digitální fotografii patřící ke skupině s průměrnými aţ vyššími příjmy. Tito jedinci mají přístup k internetu, vlastní PC nebo notebook. Dále pak vlastní nebo pouţívají digitální fotoaparát pro práci či 38

Interní materiály společnosti Gradua-CEGOS, s.r.o

- 57 -

zábavu. Můţe se jednat o začínající fotografy, pro které jsou zde kromě inspirace v galeriích připravovány tématické články zabývající se problematikou post procesu (zpracování fotografií), odkazy na jiné zajímavé foto weby apod. Také zvaţuji rozšíření nabídky o sluţby, a to jak v podobě pořizování fotografií na objednávku (akce, svatební fotografie), tak i prodej publikovaných fotografií v tištěné nebo elektronické podobě, případně online nákup fotografií pro reklamní agentury a produkční studia. Seznam níţe představuje moţné skupiny návštěvníků, kteří mohou zavítat na můj web. Cílová skupina návštěvníků VASFOTOGRAF.COM se můţe skládat z osob: kteří si zkracují volnou chvíli prohlíţením fotografií (Galerie), z řad začínajících fotografů hledající inspiraci (Galerie), zajímající se o náš web a novinky na něm (fanoušci), hledající fotografie na svou pracovní plochu počítače – široká veřejnost (Ke staţení), hledající informace k určité problematice (Články), hledající informace, fotografie z určitého místa (Galerie), hledající ispiraci pro svůj web (uspořádání, struktura, nápad), hledajících fotografa pro své potřeby (svatba, společenská akce, produktová fotografie), produkční studia, grafická, DTP studia, reklamní agentury, marketingová oddělení.

Obrázek 15. Statistika příznivců stránky VASFOTOGRAF.COM na soc. síti Facebook znázorňující pohlaví, věk a zemi původu ke dni 1. 11. 2010 - zdroj vlastní. (vlastní zdroj)39

39

Ve statistice příznivců stránky je pro autora z nepochopitelného hlediska opomenuta věková skupina návštěvníků 45-54 let.

- 58 -

8.1.2

Produkt – sluţba

Produktem VASFOTOGRAF.COM jsou fotografie, které mohou být zákazníkovi nabídnuty v digitální anebo v tištěné formě. Tyto fotografie mohou návštěvníci vyhledávat z mnoha důvodů, které byly uvedeny v kapitole o cílové skupině. Prostřednictvím těchto fotografií je moţné oslovit určitou skupinu lidí, vytvořit z nich kmen potenciálních zákazníků, kteří mohou v budoucnu vyuţívat sluţeb VASFOTOGRAF.COM. Lidé mají rádi pěkné snímky, rádi je pouţívají pro oţivení a zkrášlení interiérů svých domovů, kanceláří a veřejných prostor. Stejně tak rádi si nechají od fotografa zhotovit snímky, které budou podtrhovat jejich přednosti, budou zachycovat jejich zvířecí miláčky, partnery, události. Fotografů je mnoho, konkurence je vysoká, ale i přesto poptávka po nich převyšuje nabídku. Proto vidím potenciál v této fotografické sluţbě, kterou bych rád do budoucna nabízel. Základem musí být dobře technicky zvládnutá fotografie s patřičnou dávkou invence, která dokáţe zachytit fotografovaný objekt originálním způsobem. 8.1.3

Analýza konkurenčních webů

Analýzou konkurenčních webů je moţné získat představu o tom, jak vystupuje konkurence a co svým návštěvníkům nabízí. Výběr webů, které byly zařazeny do této analýzy, byl kombinací různých přístupů, které mohou návrháři zaujmout. Weby byly realizovány rozdílnými technologiemi (XHTML, JavaScript, Flash atd.) a fotografie v nich obsaţené jsou napříč tématickým spektrem. Dá se říci, ţe na většině z nich si je návštěvník schopen vybrat tématiku, která je mu nejblíţ (architektura, příroda, lidé, industrial atd.). Přesto jsem záměrně umístil do výběru i specializované weby na konkrétní tématiku, které mohou návštěvníka oslovit spíše jedinečností snímků neţ samotnou notoricky fotografovanou krásou západu slunce na opuštěné pláţi s palmami. K tomu, aby výsledky této analýzy nebyly zkresleny mou osobní zaujatostí případně zaţitou představou, kterou jsem v průběhu vývoje webu získal, rozhodl jsem se oslovit okruh známých a také fanoušky stránky VASFOTOGRAF.COM na sociální síti Facebook, kterou pro prezentaci mých webových stránek vyuţívám. Moţnost prezentace prostřednictvím sociální sítě Facebook jsem začal vyuţívat na začátku července roku 2010 a ke konci roku po necelých 6 měsících, se stalo fanoušky stránek na 90 uţivatelů této sítě, s tím, ţe se jejich řady pomalu rozrůstají. Průzkum mi měl pomoci porozumět smýšlení návštěvníků na webech této kategorie, co na nich vyhledávájí a čím je tyto weby jsou schopny zaujmout. Také získat zpětnou vazbu vyjadřující návštěvníkovi - 59 -

pocity při návštěvě webu VASFOTOGRAF.COM, tzv. testování pouţitelnosti a obsahu. Připravil jsem pro tento průzkum formulář, do kterého bylo zařazeno 10 webů včetně mého. Větší rozsah nebyl záměrně volen pro časovou náročnost na hodnotitele. Kritéria, podle kterých měly být jednotlivé weby hodnoceny, jsem rozdělil na dvě základní skupiny a to uţivatelská přívětivost a funkcionalita. Uţivatelská přívětivost: První dojem (jak web působí na návštěvníka po načtení úvodní stránky) Rychlost (rychlost reakcí webu na poţadavky návštěvníků, přechod ze stránky na stránku) Přehlednost (přehlednost obsahu, vhodnost jeho rozloţení) Intuitivnost (pohybování po stránkách je intuitivní, návštěvník se neztrácí) Obsah – kvalita fotografií (obsah webu a kvalita umístěných fotografií) Funkcionalita Vyhledávání (je moţné vyhledávat v obsahu prostřednictvím vyhledávacího pole) Tříditelnost obsahu (je moţné třídit dle poţadavků anebo je tématicky řazen) Aktuálnost webu (je moţné identifikovat provedené změny v čase, návštěvník pozná co je nového v obsahu webu) Moţnost získávat info o aktualizaci (e-mail, RSS, Facebook) Web poskytuje oproti konkurenci něco navíc (obsahuje něco, čím se odlišuje od konkurence a návštěvníci jsou si toho vědomi) Osobní postřeh hodnotitele (pocity a připomínky hodnotitele) Kaţdému z uvedených kritérií měl hodnotitel přiřadit známku v rozsahu 1 aţ 4. Nejlépe hodnocený web je ten, který získá nejniţší výsledný průměr. Výsledek by měl, poskytnout informace o smýšlení návštěvníků a o kritériích, které jsou pro ně důleţité. Tyto informace budou vodítkem při správě stávajícího webu a stejně tak na ně bude brán zřetel při návrhu nového vzhledu.

- 60 -

Obrázek 16. Graf výsledků hodnocení webů návštěvníky (vlastní zdroj)

Dotazník zpracovalo 35 návštěvníků. Výsledky dotazníků byly přeneseny do souhrnné tabulky, která interpretuje výsledky jako průměr všech získaných známek k jednotlivým kritériím. Vznikl tak ţebříţek hodnocených foto webů.

- 61 -

Tabulka 4. Ţebríček hodnocených foto webů (vlastní zdroj)

- 62 -

8.1.4

SWOT analýza

SWOT analýza představuje jeden z moţných nástrojů, který pomůţe odhalit silné a slabé stránky s moţnými příleţitostmi a hrozbami. Tato analýza můţe, poskytnout podklady pro zlepšení našeho produktu, naší společnosti. Silné a slabé stránky se vztahují k našemu webu a příleţitosti a hrozby vycházejí z okolního prostředí. Tato analýza nám pomůţe získat představu o moţném způsobu zlepšení našeho postavení. Vlastní SWOT analýza VASFOTOFRAF.COM: Silné stránky -

pozitivně hodnocený web návštěvníky

-

aktualizovatelnost a rozšiřování webu

-

nezávislost na dodavatelích obsahu a technického řešení

Slabé stránky -

SEO optimalizace

-

nerovnoměrně zastoupené všechny kategorie snímků

Příleţitosti -

rozšíření působnosti webu a nabídka sluţeb

-

optimalizace webu pro vyhledávače

Hrozby -

velká konkurence jak fotografů, tak foto webů

-

právní aspekty obsahu fotografií v případě jejich prodeje

- 63 -

8.2 Návrh struktury webu VASFOTOGRAF.COM Poté, co byli definováni moţní potenciální návštěvníci, a my víme, co bychom jim měli nabídnout, můţeme začít se samotným návrhem jednotlivých sekcí, které poskytnou návštěvníkům vše potřebné. 8.2.1

Uvítací stránka

Návrh struktury webu, pro který jsem se rozhodl, vycházel z předpokladu, ţe je zapotřebí upoutat pozornost nově příchozího návštěvníka. Jelikoţ mé webové stránky jsou primárně zaměřeny na fotografii a sekundárně na tématiku s fotografií spojenou, rozhodl jsem se zaujmout snímky. Proto jsem vybral takové, které mohou návštěvníka upoutat a donutit ho vstoupit hlouběji do Galerie, kde můţe být zaujat některou z mých prací. Původní verze uváděla návštěvníka přímo do Úvodní stránky, která však obsahuje větší mnoţství informací a dle mého dojmu, nemusí kaţdého motivovat vstoupit hlouběji. 8.2.2

Úvodní stránka

Úvodní stránka se dá povaţovat za jednu z nejdůleţitějších stránek celého webu. Jedná se o vstupní bránu, která uvádí návštěvníka dál. Představuje mu web, na kterém se návštěvník ocitl a také to, co od něj můţe očekávat. Měla by být poutavá a po jejím zhlédnutí by měl mít návštěvník chuť pokračovat v návštěvě dalších našich stránek. Také je tato sekce povaţována za výchozí místo, ze kterého začíná prohledávání webu. Ztratíme-li se v obsahu, volbou úvodní stránky, můţeme vţdy začít od začátku. 8.2.3

Články

Sekce Články, figurující v mém portfoliu, plní doplňkovou funkci. Její obsah byl původně zamýšlen jako textové okénko k jednotlivým galeriím. Měl písemnou formou doplnit informace, a přiblíţit způsob jakým publikované snímky vznikly. Postupem času, kdy mé fotografické aktivity narůstaly a s nimi i jednotlivé galerie, jsem dospěl k názoru, ţe mi nedostatek času nedovoluje tuto sekci tímto způsobem rozšiřovat. Proto další obsah, který do této oblasti směřoval, rozšířil sekci Články o Návody. Tento počin vzešel z častých dotazů, které jsem od svých návštěvníků dostával na téma, jakým způsobem jsem docílil konečného vzhledu, jak mohou řešit určitý problém, co si mohou představit pod určitým termínem. Aktualizace této sekce není častá a z toho důvodu také není tak rozsáhlá, přesto má své

- 64 -

návštěvníky, kteří se zde snaţí najít své odpovědi. Proto i nadále počítám s rozšiřováním této sekce, které je však závislé na mých získaných zkušenostech. 8.2.4

Galerie

Tato sekce by měla být tím hlavním, co návštěvníky upoutá. Její obsah by měl důvodem pro jejich opětovnou návštěvu tohoto webu. Pro lepší přehlednost a dostupnost jednotlivých galerií jsem zvolil cestu rozcestníku, který návštěvníky nasměruje do jednotlivých sekcí. Tak mohou jednoduchou cestou zvolit sekci, která je jim blízká. Základní dělení rozcestníku je na tématické celky jako Praha, Architektura, Cestování, Industrial, Lidé, Technika. Ty pak dále rozvádějí návštěvníky k jednotlivým fotogaleriím do konkrétních sérií (seriálů) fotografií. Do budoucna plánuji rozšířit galerie o fukcionalitu, která návštěvníkům umoţní hodnotit jednotlivé snímky a vytvářet tak ţebříčky nejlépe hodnocených a nejčastěji zobrazovaných snímků. 8.2.5

Guestbook/kniha návštěv

K získání zpětné vazby od návštěvníků, nám můţe slouţit několik nástrojů. Ty můţeme dělit na nástroje umoţňující přímou a nepřímou vazbu. Přímou vazbu nám zachycuje Návštěvní kniha alias Guestbook, kde mohou návštěvníci zanechat svůj názor na web či navštívenou galerii. Stejně tak mají k dispozici formulář v sekci Kontakt, kam mohou odeslat svůj názor, poptávku či dotaz bez toho aniţ by byl viditelný pro ostatní. V neposlední řadě mohou návštěvníci vyuţít prostoru na Facebooku, kde u kaţdé nově přidané galerie nebo článku je moţné přidat komentář nebo hodnocení „Líbí se mi“. Z nepřímých nástrojů má administrátor k dispozici různé monitorovací nástroje viz. kapitola Analýza přístupu. 8.2.6

Moje technika

Sekce Moje technika představuje návštěvníkům foto techniku, která byla pouţita při pořizování publikovaných snímků. Tyto informace jsou zajímavé pro všechny, kteří chtějí mít ucelenou informaci k uveřejněným snímkům, díky které budou schopni posoudit kvalitu fotografa a dopad techniky na pořízené snímky. Mohou být vodítkem pro všechny, kteří zvaţují nákup uvedené techniky, hledají informace o produktu, včetně vzorových snímků. Případné zkušenosti vlastníka jim mohou pomoci najít odpovědi na jejich otázky.

- 65 -

8.2.7

Odkazy

Tato sekce vznikla jako rozcestník po různých zajímavých webech, které mne svým obsahem zaujaly. Jednotlivé odkazy jsou umístěny dle jejich zařazení do tématických sekcí jako Fototechnika, Fotografování-post proces, Galerie, Webdesign a Ostatní. 8.2.8

Ke staţení

Další sekce, pro kterou jsem se na svých stránkách rozhodl, byla nazvána Ke stažení alias Wallpapers. I tato sekce nebyla původně plánována, ale rozšíření o ni bylo cílené a mělo přivést nové návštěvníky na web. Do této sekce jsem začal publikovat vybrané fotografie z mých galerií ve vysokém rolišení 1920×1280 pixelů. Ty jsou určené pro pracovní plochy počítačů všech zájemců, které mé snímky oslovily, a rádi by si jejich prostřednictvím zpříjemnili práci na počítači. Zároveň jsem tuto sekci pojal jako moţnou propagaci stránek, kdy jsem do kaţdé z fotografií umístil značku webu. Ta by měla být zpětným vodítkem pro moţné další návštěvníky. Dle referencí vyhledávaných slov jsem zjistil, ţe mnoho uţivatelů se baví tím, ţe různě tématicky situované snímky stahují a jednou za čas jimi obmění svou pracovní plochu. Nasazení této stránky se neminulo účinkem a v průběhu následujících měsíců opravdu tato sekce přivedla nové návštěvníky. Dle mého mínění tento výsledek vzešel z dobře pouţitých klíčových slov jako fotografie na plochu, fotografie ve vysokém rozlišení a z nápadu, který rozšířil stávající portfolio o to, co určitá skupina uţivatelů webu vyuţívá. Obdobným způsobem je zapotřebí se zamýšlet i nad dalšími sekcemi. Jak osloví případné další návštěvníky a co pouţitím nových sekcí získáme.

- 66 -

Obrázek 17. Statistiky klíčových slov Google Analytics (vlastní zdroj)

8.2.9

Kontakt

Touto sekcí bývá vybavena kaţdá webová prezentace. Její obsah informuje návštěvníka o autorovi webu, o kontaktních informacích. Stejně tak tato sekce seznamuje návštěvníka s autorem samotným a s cestou, která jej do světa digitální fotografie zavedla. V mém případě jsem tuto sekci rozšířil také o kontaktní formulář, který mohou návštěvnící vyuţít pro zaslání svého názoru, poptávky nebo dotazu v případě, ţe nechtějí vyuţít veřejné knihy návštěv. 8.2.10 Mapa webu Mapa webu je nástroj, který by měl návštěvníkovi pomoci pochopit strukturu webu a stejně tak mu umoţnit snadno se pohybovat do hlouběji zanořených částí webu. Dalším důvodem je snaha pomoci návštěvníkovi s orientací ve chvíli kdy na webu zabloudí, případně kdyţ něco konkrétního hledá.

- 67 -

8.3 Výběr doménového jména Ve chvíli, kdy jsem se zamýšlel nad jménem domény, které zvolím pro svůj web, jsem věděl, ţe nechci pouţít své vlastní jméno jako značku. Chtěl jsem pouţít takový název, který bude charakteristický pro obsah webu a který by sám o sobě přiváděl návštěvníky na můj web. Tím slovem, se pro mne stalo slovo „fotograf“. Při procházení volných domén za pouţití klíčových slov tématicky spojených s fotografováním jsem dospěl k zjištění, ţe je mnoho klíčových slov v rámci doménových jmen pouţito a stejně tak i samotné slovo fotograf. Proto přišla ke slovu předpona „váš“ o kterou jsem samotné slovo rozšířil. Záměrně jsem tato dvě slova spojil v jedno a odstranil diakritiku, která není v doménovém jméně ţádoucí. Mohu-li zde tento svůj výběr hodnotit zpětně, jsem za něj rád. Vnikla tak doména, která oţivila značku VASFOTOGRAF.COM. 8.3.1

Doména a hosting

Původně jsem pro umístění svého webu zvolil freehosting od společnosti Banán. Vše co bylo v kapitole Doména a Hosting řečeno se v průběhu provozování prvního webu naplnilo a já jsem se rozhodl opustit freehosting a přejít k placené sluţbě. Zásadní problém byl v umístěné reklamě na stránkách bez moţnosti ji ovlivnit. Ta narušovala celý design stránek a nepůsobila příznivě na návštěvníky. Stejně tak jsem si začal uvědomovat nebezpečí spojené s přesunutím webu na jiný hosting v případě technických problémů či ukončení sluţeb poskytovatele. Hrozba ztráty doménového jména a získaných návštěvníků mne přiměla vyměnit freehosting za plnohodnotnou komerční alternativu. Při výběru hostingu jsem bral v potaz kritéria jako cena za poskytovanou sluţbu, velikost poskytovaného prostoru, mnoţství zákazníků poskytovatele hostingu, dostupnost technické podpory apod. Výsledný výběr padl na společnost FORPSI.CZ. Po necelém roce vyuţívání jejich sluţeb mohu konstatovat, ţe jsem s jejich sluţbami spokojen a ţe za celou dobu nedošlo k ţádnému problému, který by mne nutil hledat nového poskytovatele hostingu. Následující tabulka obsahuje ţebříček top ten poskytovatelů hostingu na českém internetu.

- 68 -

Provozovatel

Název hostingu

Název služby

Velikost prostoru 5GB+mail+100MB databáze

Cena rok s DPH

Počet uživatelů

www

INTERNET CZ, a.s.

Forpsi

Normal Lite

Active 24 s.r.o.

Active24

Home

Ignum s.r.o

Ignum Master internet

Medium

5GB+mail+databáze 3GB+5GB mail+500MB databáze

…

…

Web4U Levný hosting Webhosting Czechia Super hosting

E-MAIL

10GB+mail+ databáze

1 440,00 Kč

23 162 http://www.web4u.cz/

Classic

1 200,00 Kč

22 280 http://www.levny-hosting.cz/

LinuxPHP5_CGI

3BG+mail+databáze 2GB+10GB mail+1GB databáze

4 296,00 Kč

20 203 http://www.zoner.eu/cs/

…

…

Pipni.cz Český hosting

Profi

10GB+mail+ databáze 2GB celkem+mail+databáze

Master Internet s.r.o. WEB4U - network NetHost s.r.o. ZONER software SuperNetwork s.r.o. PIPNI s.r.o. THINline interactive s.r.o.

Webhosting

1 440,00 Kč

68 711 https://www.forpsi.com/

1 860,00 Kč

58 409 http://www.active24.cz/

5 184,00 Kč

32 287 http://www.ignum.cz/

…

…

26 027 http://www.master.cz/

17 579 http://www.superhosting.cz/

1 200,00 Kč

15 815 http://pipni.cz/

1 000,00 Kč

13 575 http://www.cesky-hosting.cz/

40

Tabulka 5. Srovnávací tabulka poskytovatelů hostingu platná k datu 16. 1. 2011

40

Czechweb - webhosteři [online]. 16. 1. 2011 [cit. 2011-01-16]. Webhostingy. Dostupné z WWW: .

- 69 -

8.4 Návrh webového designu v podání VASFOTOGRAF.COM První z otázek, na kterou jsem při navrhování designu musel najít odpověď, byla, zda pouţít světlý či tmavý design stránek. V průběhu svého rozhodování jsem zúţil výběr barvy na černou a bílou. Ty se měli stát dominantními z důvodu, ţe se tyto barvy nejvíce hodí pro pozadí fotogalerií, které jsou plné různobarevných snímků. Otázku zda vyuţít jednoduchosti a čistoty bílé nebo agresivity a neotřelosti černé jsem zvaţoval dlouho. Nakonec jsem se rozhodl pro černou alternativu, které se mi v celkové koncepci více zamlouvala. Doménové jméno pro web bylo na světě, ale bylo zapotřebí vytvořit logo, které mělo být umístěno

v

hlavičce

stránky.

Zvolil

jsem

formu

textu

zachycující

doménu

VASFOTOGRAF.COM prostřednictvím neotřelého a zajímavého Adam´s fontu v kombinaci s červenou barvou (FF0000) pro název domény a bílou barvu pro jméno fotografa (#FFFFFF).

Obrázek 18. Logo webu VASFOTOGRAF.COM

Tohoto fontu jsem se rozhodl vyuţít i v rámci označení jednotlivých snímků v levém horním rohu rámečku fotografie tak, aby vţdy docházelo ke spojení snímků s webem, ze kterého pochází. Díky tomuto podpisu by mělo být omezeno umístění snímků na jiných webech, které by snímku uţily pro svou potřebu. Stejně tak by tato hlavička měl fungovat jako vizitka, přivádějící návštěvníka, který viděl snímek jinde neţ na našich stránkách zpět k nám. Moţnost vloţení vodoznaku nebo textu do obrázku nám umoţňuje provést většina komerčních programů určených pro zpracování digitálních fotografií jako Adobe Photoshop, Zoner nebo bezplatný Gimp. Společným znakem pro všechny stránky tohoto webu je Logo (obr. č. 18) umístěné v levé horní části stránky a v pravé části umístěné odkazy Kontakt a Mapa webu. Na ně navazuje sekce hlavička, ve které jsou pouţity snímky, která se obsahově liší dle konkrétního umístění (tematického zařazení architektura, industrial, lidé atd.) Pod touto sekcí se nachází horizontální navigační menu. Prostřednictvím něj vstupují návštěvníci do jednotlivých sekcí (viz. Kapitola Návrh struktury webu VASFOTOGRAF.COM). To je vyvedené v šedé barvě (#888888). Posledním společným charakteristickým bodem je šedé zápatí zakončující celou

- 70 -

stránku. Pod ním jsou umístěný informace o Copyrightu. Ostatní prvky umístěné do stránek se liší podle obsahu (fotografie/text).

Obrázek 19. Design Úvodní stránky VASFOTOGRAF.COM

- 71 -

Obrázek 20. Ukázka snímku z galerie se značkou VASFOTOGRAF.COM

Hlavní text stránek je realizován prostřednictvím fontu Verdana (Geneva, Arial, Helvetica, Sans-serif) o velikosti 12 pixelů v bílé barvě. Pro zvýrazněný text je pouţíváno opět červené barvy (FF0000). Poslední doplňkovou barvou textu byla zvolena šedá barva (#888888) pouţitá i pro navigační menu. Aby došlo k oddělení nadpisů a názvů sekcí bylo pouţito fontu Bebas. Jelikoţ tento font není uzpůsoben pro českou diakritiku, bylo vyuţito diakritizovaných znaků z jiných znakových sad. Jednotlivé nadpisy sekcí byly vytvořeny v prostředí grafického editoru Gimp a doplněny o diakritizované znaky, poté došlo k uloţení jednotlivých nadpisů jako obrázků. Ty byly vkládány přímo do HTML stránky a jejich pozicování bylo realizováno prostřednictvím CSS.

Obrázek 21. Nadpis sekce prostřednictvím fontu Bebas ve formátu JPG

Do budoucna se vzhled stránek bude i nadále vyvíjet s tím, ţe by nemělo dojít k odklonění od stávajícího rozloţení a struktury stránek. To je návštěvníky povaţováno za přehledné a dobře úzpůsobené pro potřeby tohoto webu.

- 72 -

8.5 Analýza přístupů - SEO optimalizace Jedním z cílů, které byly na tyto webové stránky kladeny, byl vzrůstající trend návštěvnosti. Obrázek č. 22 ukazuje graf zachycující roční statistiku přístupů návštěvníků na webové stránky VASFOTOGRAF.COM. Jsou zde zaznamenány vzrůstající hodnoty návštěvnosti s tím, ţe výkyvy, které jsou patrné v grafu v červenci, byly způsobeny událostí, která přitáhla velké mnoţství návštěvníků. Tou událostí byla svatba návštěvníků, kterým se zalíbily mé snímky, a poţádali mne o zachycení jejich svatebního dne. Pokud vezmeme v potaz nízké procento přístupů z vyhledávačů (21 % červená výseč), které je taktéţ viditelné na obr. č. 22 ve spodním levém rohu, můţe být očekáván nárůst návštěvnosti poté, co dojde k zoptimalizování obsahu s větším důrazem na SEO optimalizaci.

Obrázek 22. Roční přístup – návštěvnost (vlastní zdroj)

8.5.1

Optimalizace obsahu – zvýšení přístupů návštěvníků z vyhledávačů

K tomu, aby bylo moţné dosáhnout lepších výsledků v přístupech návštěvníků z vyhledávačů, bylo zapotřebí začít ze SEO optimalizací obsahu. Při vývoji stránek jsem tuto oblast opomenul a nyní se k ní vracím. Vybral jsem pro začátek nejnavštěvovanější stránky mého webu a na ně začal aplikovat uvedená doporučení z kapitoly „SEO optimalizace obsahu“.

- 73 -

Obrázek 23. Statistika přístupů přes vyhledávače (vlastní zdroj)

Jednalo se o Úvodní stránku, Galerie a sekci Ke stažení. Nejprve bylo zapotřebí pro tyto stránky vybrat ta správná nejvyhledávanější slova. K tomu účelu jsem pouţil nástroje Google Adwords. Ten je schopný ukázat statistiky vyhledávání k námi vybranému slovu s moţnými synonymi. Pak záleţí jen na autorovi obsahu, jak s klíčovými slovy naloţí a jak tato slova zakomponuje do obsahu stránky.

Obrázek 24. Analýza klíčových slov Google Adwords (https://adwords.google.com/)

- 74 -

Úvod

Objem vyhledávání za měsíc

Galerie

foto

37200000 industrial

wallpapers

16600000 Praha

industrial

13600000 HDR

Objem vyhledávání za měsíc

Ke stažení

Objem vyhledávání za měsíc

13600000 wallpapers

16600000

2740000 tapety wallpapers 2240000 free tapety na 1500000 plochu

2740000 122000

Praha

2740000 fotografie

fotograf

1830000 architektura

246000 hdr foto

60500

fotografie

1500000 portrét

201000 pozadí

33100

portrét

201000 fotogalerie

135000

fotogalerie tapeta na plochu

135000 cestování

22200

foto web fotografování svatební fotograf fotograf Praha

60500

60500 40500 8100 4400 3600

Tabulka 6. Optimalizace vybraných stránek na nejvyhledávanější slova v kategorii

Vybraná klíčová slova byla pouţita jak v samotném obsahu textu stránky, tak v anchor textu. Pro kontrolu hustoty klíčových slov ve stránce jsem pouţil nástroj společnosti SEO – Expert (dostupný z www: http://analyza-hustoty.seo-expert.cz/). Ten spočítá celkové mnoţství slov pouţitých ve stránce včetně počtu výskytů a procentního zastoupení. Tento postup je vhodný provést vţdy u nově přidané stránky do našeho webu. 8.5.2

Země návštěvníků – jazyková lokalizace VASFOTOGRAF.COM

Kdyţ jsem zvaţoval jakým způsobem rozšířit skupinu návštěvníků, přišla na řadu myšlenka anglické lokalizace obsahu webu. Díky ní by zahraniční návštěvníci, kteří zavítají na web, získali lepší moţnost orientace na něm, lépe by porozuměli obsahu a stejně tak by měly stránky větší návštěvnost ze stran zahraničních vyhledávačů. Poté co jsem si nechal zpracovat nástrojem Google Analytics statistiku přístupů (za 11 měsíců provozu stránek) dle země původu ze které návštěvníci přichází, rozhodl jsem se anglickou lokalizaci odloţit. Obrázek č. 25. ukazuje jednotlivé země návštěvníků, počet stránek, které navštívili a čas strávený na webu. Podle času, který věnovali prohlídce obsahu, je moţné usuzovat, ţe neznalost českého jazyka není důvodem pro opuštění tohoto webu, na kterém strávili obdobné mnoţství času (3 minuty a 23 sekund) jako domácí klientela (3 minuty a 9 sekund). Navíc dnes uţ mohou vyuţívat i automatický překlad stránek přímo v prohlíţeči.

- 75 -

Obrázek 25. Země původu návštěvníků (vlastní zdroj)

Potvrzuje se zde, ţe fotografie promlouvají v mezinárodní řeči k těm, co jim chtějí naslouchat. Ne vţdy jsou slova důleţitá pro pochopení obsahu, přesto mohou být nezbytná pro anglicky mluvící uţivatele internetu, kteří se snaţí vyhledávat v jiném jazyce, neţ ve kterém byly stránky napsány a optimalizovány. Proto i nadále počítám s nasazením anglické lokalizace. Její realizace přijde na řadu poté, co bude úspěšně dokončena SEO optimalizace české verze a zkušenosti z ní budou moci být přeneseny na novou jazykovou verzi.

Obrázek 26. Statistika počtu výskytů slov v textu

- 76 -

8.5.3

Výsledky optimalizace SEO

Výsledky, které optimalizace přinesla a jakým způsobem se promítla do zvýšené návštěvnosti ze strany vyhledávačů, se dále projeví aţ v průběhu následujících měsíců. Přesto je moţné dle výsledků návštěvnosti, které přinesly první dva měsíce roku 2011 (dva měsíce po optimalizaci SEO) usuzovat, ţe zvolená cesta je ta správná. Došlo k nárůstu návštěvnosti z vyhledádávačů na hodnotu 41 % z dlouhodobých 21 %. Tohoto výsledku bylo dosaţeno jak samotnou optimalizací vybraných stránek, tak přípravou článků na vybraná klíčová slova (viz. kapitola 8.5.4 Optimalizace obsahu – zvýšení přístupu návštěvníků z vyhledávačů). Došlo k rozšíření sekce Články o další návody, byla připravena recenze na nový fotoaparát NIKON D7000 a výsledkem těchto kroků byl nárůst přístupů z vyhledávačů na tento web. Dále je plánováno aplikovat tyto kroky na další stránky tohoto webu, aby i nadále docházelo k jeho zlepšování.

Obrázek 27. Statistika přístupů z vyhledávačů po optimalizaci (vlastní zdroj)

8.6 Moţnost prodeje fotografií Jedna ze zmiňovaných moţností jak rozšířit sluţby tohoto webu, je prostřednictvím prodeje fotografií. Zákazník si vybere poţadované snímky, vloţí je do košíku a prostřednictvím svého účtu v systému PayPal je zaplatí. Následně mu budou objednané snímky zaslány dle jeho specifikací (rozlišení snímku, tištěná podoba atd.). Systém PayPal je nástroj, který umoţňuje zůčastněným stranám realizovat elektronický platební styk. Uţivatel PayPalu disponuje obdobou bankovního účtu, který lze vyuţít při nákupu v internetových obchodech po celém světě a umoţňuje mu realizovat finanční transakce v daném okamţiku. Tento systém je moţné vyuţívat pro nákup a prodej zboţí za malé a střední částky. Začal se ve velké míře vyuţívat v aukční síni eBay, kde prostřednictvím tohoto systému bylo realizováno desetitisíce transakcí.

- 77 -

8.6.1

Systém PayPal

Účet v systému PayPal funguje tak, ţe na něj vlastník přesune finanční hotovost prostřednictvím své platební karty a finanční částka z tohoto účtu slouţí jako kredit pro nákup v libovolném internetovém obchodě. Částka za vybrané zboţí je odečtena z PayPalového účtu kupujícího na účet prodávajícího. Společnost provozující tuto sluţbu inkasuje za kaţdou realizovanou transakci určitý poplatek. Výběr finančních prostředků z účtu je taktéţ jednoduchý, stačí jen odeslat peníze zpět na účet. Je-li částka dostatečně vysoká, je převod zdarma. Výhoda tohoto řešení spočívá v rychlosti, za kterou jste schopni zprovoznit systém umoţňující přijímání platebních karet bez nutnosti komunikace s bankami. Zprovoznění PayPalového účtu je moţné provést na stránce http://www.paypal.com/. Při registraci nového účtu je na výběr ze tří dostupných účtů. První varianta Personal je určena pro všechny kteří chtějí realizovat nákup v internetových obchodech. Druhá varianta Premier je určena pro nákup a prodej na obchodních webech. Je vhodná pro fyzické osoby i OSVČ, umoţňuje příjímat všechny typy platebních moţností. Poslední variantou je varianta Business, která je určena pro firmy a právnické osoby.41/42

Inkasování plateb z ČR Měsíční prodej přes PayPal (Kč)

Cena (Kč)

0 – 70 000,– 70 001 – 280 000,– 280 001 – 1 500 000,– 1 500 001 – 3 000 000 > 3 000 000,–

3,4 % + 10,– 2,9 % + 10,– 2,7 % + 10,– 2,4 % + 10,– 1,9 % + 10,–

Převod na bankovní účet Částka (Kč)

Cena (Kč)

Převod na bankovní účet, více neţ 3000,–

Zdarma

Převod na bankovní účet, méně neţ 3000,–

30,–

Neúspěšný převod na bankovní účet (např. špatné číslo účtu)

200,–

Tabulka 7. Poplatky za platby k datu 29. 1. 201143 41

PayPal CZ [online]. 2008 [cit. 2011-01-08]. Jak systém funguje. Dostupné z WWW: .

42

BARANYK, Jan. Lupa.cz [online]. 2006 [cit. 2011-01-09]. PayPal v praxi: ţádný velký zázrak. Dostupné z WWW: . 43

PayPal CZ [online]. 2008 [cit. 2011-01-29]. Poplatky za platby. Dostupné z WWW: .

- 78 -

9 Závěr Tato diplomová práce se zabývá problematikou webové prezentace. Představuje základní stavební prvky, ze kterých můţe být webová prezentace tvořena. Jednotlivé technologie s jejich moţnostmi a technickými specifiky. Popisuje samotný přístup při grafickém návrhu stránky, souvislosti mezi jednotlivými sekcemi a jejich rozmístění ve stránce. Přibliţuje problematiku webové typografie a vše co je nezbytné pro výběr vhodných fontů pro webovou prezentaci tak, aby neměli návštěvníci problém se zobrazením a čitelností obsahu. Zaznívají zde doporučení, která mají být brána v potaz při samotném návrhu webových stránek vycházející ze zkušeností webových designerů. Jsou zde zmiňovány zákonitosti jednotlivých barev pouţitých pro návr vzhledu, stejně tak postup při výběru celé barevné palety tak, aby vznikl co nejpůsobivější vzhled vyvíjených stránek. Ve chvíli, kdy je hotov finální návrh budoucího webu je zapotřebí provést testování pouţitelnosti, kterým se zabývá stejnojmenná kapitola této práce. V té je popsán postup a zkušenosti z této oblasti. Ty by měli pomoci autorům provést správně tuto finální fázi a uzavřít tak celou tuto oblast zabývající se návrhem a realizací webových stránek. Poté co je úspěšně dokončeno testování pouţitelnosti, můţe dojít k umístění stránek pod vybranou doménu do prostoru hostingu. Kapitola Doména a hosting přináší informace o tom jak postupovat při výběru doménového jména a stejně tak se snaţí představit moţnosti hostingu, který je dostupný na trhu a je nezbytný pro fungování naší webové prezentace. Pak jiţ jen zbývá přivést návštěvníky na tento nový web. Tato problematika je přiblíţena v kapitole s názvem Jak dát o stránkách vědět. Zde jsou uvedeny postupy, které by měly pomoci přivést návštěvníky na web, bez toho aniţ by znali jeho adresu. Cestu by jim měli pomoci nalézt vyhledávače, katalogy a jiné zpětné odkazy směřující na náš web. A aby bylo moţné vše správně řídit a reagovat na poţadavky návštěvníků, nebyly opomenuty ani analytické nástroje, které se snaţí pomoci při analýze chování návštěvníků a jejich potřeb. Tyto nástroje zmiňuje kapitola Analýza přístupu. Čtenáři jsou zde představeny základní analytické nástroje, které můţe pouţít při sledování návštěvnosti a jejich efektivní vyuţívání mu můţe pomoci vylepšit pozice stránek na internetu. Praktická část této diplomové práce je zaměřena na webové stránky VASFOTOGRAF.COM. Tyto stránky, jak sám název napovídá, se zabývají digitální fotografií. Autor se prostřednictvím těchto stránek snaţí prezentovat svoji práci mezi příznivce této oblasti a získávat budoucí zákazníky. Snahou bylo vybrat vhodné technické řešení a realizovat všechny zde uvedené kroky z teoretické části tak, aby vznikl zajímavý web působící na

- 79 -

návštěvníky reprezentativním dojmem. Stejně tak vytvořit zajímavý obsah, který by osloval návštěvníky a ti by se rádi vraceli zpět. Posoudit zdali se záměr podařilo naplnit, ukáţe aţ čas a návštěvníci. Podle vzrůstajícího trendu návštěvnosti a reakcí návštěvníků však můţeme usuzovat, ţe se definované cíle daří plnit. Po necelém ročním provozu, bez předešlých zkušeností v této oblasti, vznikla webová galerie VASFOTOGRAF.COM, která poskytuje sluţbu, pro kterou byla vytvořena: Prezentace práce fotografa Michala Fice. Průměrná měsíční návštěvnost tohoto webu bez toho aniţ by doposud nabízel sluţbu nebo produkt činí cca 400 návštěvníků a vykazuje vzrůstající trend. Poté co dojde k plné SEO optimalizaci obsahu, můţe být očekáván nárůst přístupů návštěvníků z vyhledávačů. Ten je v tuto chvíli z dlouhodobých výsledků na necelých 21 %. První měsíce roku 2011 po SEO optimalizaci vybraných stránek dosahují přístupy návštěvníků z vyhledávačů hodnotu přes 40 %. Přímý přístup návštěvníků znajících adresu webu, mírně klesá na hodnotu 39 % a zbylých 21 % návštěvníků přichází z odkazujících stránek. Průměrný návštěvník stráví na webu 3 minuty a 13 sekund. Tyto získané výsledky měření poukazují na úspěšnou realizaci tohoto projektu, který se bude i nadále vyvíjet tak, aby plnil sluţbu autorovi a těšil svým obsahem a vzhledem návštěvníky. Díky této práci se podařilo odhalit nedostatky těchto stránek včetně moţných řešení, které by měli posunout tyto stránky blíţe návštěvníkům.

- 80 -

Pouţitá literatura 1

Www.w3.org : Introduction to HTML [online]. 2011 [cit. 2011-01-30]. Introduction to HTML. Dostupné z WWW: . 2 Kosek.cz : XML [online]. 1999 [cit. 2011-01-30]. XML. Dostupné z WWW: . 3

W3C : XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) [online]. Druhá aktualizace. 2002, srpen 2002 [cit. 2011-01-30]. XHTML 1.0. Dostupné z WWW: . 4

STANÍČEK, Petr. Webtip.cz [online]. 6. 6. 2001 [cit. 2010-11-15]. Kaskádové styly CSS 1. díl. Dostupné z WWW: . 5

Cold hard flash [online]. 18. 2. 2008 [cit. 2010-10-12]. Grandmasters of Flash: An Interview with the Creators of Flash. Dostupné z WWW: . 6

HOZÍK, Martin. Flash.jakpsatweb.cz [online]. 2011 [cit. 2010-10-12]. Seznámení s Flashem. Dostupné z WWW: . 7

DUCKETT, Jon. Beginning HTML, XHTML,CSS, and JavaScript. Canada: Wiley publishing, 2010. 865 s. ISBN 978-0-470-54070-1. 8

CHAMPEON, Steve. Oreillynet [online]. 2001 [cit. 2011-10-10]. JavaScript: How Did We Get Here?. Dostupné z WWW: . 9

CZ. PHP.net [online]. 2011, 2011-01-28 [cit. 2011-01-30]. History of PHP. Dostupné z WWW: . 10

Wix.com/ [online]. 2006 [cit. 2011-01-05]. Free Website Builder. Dostupné z WWW: . 11

Návody pro C4 [online]. 2011, 2011-01-30- [cit. 2011-01-30]. Statistiky aplikací. Dostupné z WWW: . 12

Markup Validation Service [online]. 1994, 2011 [cit. 2010-10-12]. W3C. Dostupné z WWW: . 13

Jalbum.net [online]. 2011 [cit. 2010-11-15]. Create stunning web album. Dostupné z WWW: . 14

GREMILLION, Ben. WebdesignerDepot.com [online]. 2010 [cit. 2010-10-09]. How to Build a Footer That Doesn’t Stink. Dostupné z WWW: http://www.webdesignerdepot.com/2010/03/how-to-build-a-footer-that-doesn%E2%80%99tstink/>. 15

BEAIRD, Jason. The principles of beautiful web design. First Edition. Canada: SitePoin, 2007. 182 s. ISBN 0-9758419-6-3. - 81 -

16

HANZLOVSKÝ, Michal. Celostnimedicina.cz [online]. 2008 [cit. 2010-02-11]. Psychologie barev. Dostupné z WWW: . 17

Studijní materiály k e-learningovému kurzu Jak se co dělá v Grafice a DTP od společnosti DTP studio, 2006 18

W3C [online]. 2010, 2010-10-28 [cit. 2011-02-07]. CSS Colour Module Level 3. Dostupné z WWW: . 19

W3Counter.com [online]. 2010 [cit. 2010-02-10]. W3Counter - Global Web Stats. Dostupné z WWW: . 20

DANČO, Václav, et al. Kapesní průvodce počítačovou typografií. Vid. 1. Praha: Labyrint, 1995. 135 s. ISBN 80-85935-00-7. 21

REICHENSTEIN, Oliver. Information Architects [online]. 2006 [cit. 2010-17-10]. Web Design is 95% Typography. Dostupné z WWW: . 22

Typomil : Typografie na webu… [online]. 2005 [cit. 2011-02-01]. Dostupné z WWW: . 23

KUČERA, Miroslav. Interval.cz [online]. 1999 [cit. 2010-17-10]. Kurz HTML - písma pro www stránky. Dostupné z WWW: . 24

OTT, Vlastimil. Scribus.cz [online]. 2010 [cit. 2011-01-25]. Základní typografické pojmy: Co byste měli vědět o písmu. Dostupné z WWW: . 25

DUDEK, Jan. Interval.cz [online]. 2003 [cit. 2010-10-17]. Stahovatelné fonty poprvé. Dostupné z WWW: . 26

BREWER, Dustin. DustinBrever [online]. 2007 [cit. 2011-10-17]. Fonts on the web and a list of web safe fonts. Dostupné z WWW: . 27

LENNARTZ, Swen. Smashing Magazine [online]. 2008 [cit. 2010-10-19]. Block Quotes and Pull Quotes: Examples and Good Practices. Dostupné z WWW:
BOWEN, Robert. Pelfusion [online]. 2010 [cit. 2010-12-10]. A Guide To Typography On The Web. Dostupné z WWW: . 29

KRUG, Steven. Webdesign : Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006. 168 s. ISBN 80-251-1291-8.

- 82 -

30

Český hosting [online]. Praha: 2011 [cit. 2011-01-01]. Dostupné z WWW: . 31

WEIDA, Petr. Interval.cz [online]. 2004 [cit. 2011-01-02]. SEO - výběr domény a hostingu. Dostupné z WWW: . 32

CASTRO, Elizabeth. HTML, XHTML a CSS : Názorný průvodce tvorbou WWW stránek. Vyd. 6. Praha: Computer Press, 2007. 440 s. ISBN 978-80-251-1531-2. 33

ING. SMIČKA, Radim. Optimalizace pro vyhledávače – SEO : Jak zvýšit návštěvnost webu. Dubany : Jasmínka , 2004. 120 s s. Dostupné z WWW: . ISBN 80-239-2961-5. 34

MAŤOVKA, Marek. SWMAG [online]. 2008 [cit. 2011-01-21]. Optimalizace Off Page faktorů a podvodné techniky - SEO - díl 3. Dostupné z WWW: . 35

CUTRONI, Justin. Google Analytics : Understanding visitor behavior. Vyd. 1. Cambridge: O´Reilly, 2010. 200 s s. ISBN 978-0-596-15800-2. 36

Interní materiály společnosti Gradua-CEGOS, s.r.o

37

Czechweb - webhosteři [online]. 16. 1. 2011 [cit. 2011-01-16]. Webhostingy. Dostupné z WWW:
PayPal CZ [online]. 2008 [cit. 2011-01-08]. Jak systém funguje. Dostupné z WWW: . 39

BARANYK, Jan. Lupa.cz [online]. 2006 [cit. 2011-01-09]. PayPal v praxi: ţádný velký zázrak. Dostupné z WWW: . 40

PayPal CZ [online]. 2008 [cit. 2011-01-29]. Poplatky za platby. Dostupné z WWW: .

- 83 -

Seznam obrázků Obrázek 1. Základní šablona z kategorie Fotografie ................................................................ 18 Obrázek 2. Prostředí redakčního systému Joomla .................................................................... 19 Obrázek 3. Zastoupení pouţívaných prohlíţečů u návštěvníků VASFOTOGRAF.COM ...... 22 Obrázek 4. Webová galerie v prostředí Adobe Lightroom 2.6................................................. 23 Obrázek 5. Prostředí programu Jalbum 8.9.3. pro tvorbu webových galerií ........................... 24 Obrázek 6. Rozloţení webové stránky ...................................................................................... 29 Obrázek 7. Barevný kruh ........................................................................................................... 33 Obrázek 8. Výběr barevné palety prostřednictvím barevného kruhu ....................................... 36 Obrázek 9. Hexadecimální zápis 16 základních barev ............................................................. 37 Obrázek 10. Zlatý řez – pravidlo třetin...................................................................................... 39 Obrázek 11. Zápis CSS obsahující cestu k pouţitému fontu s jeho velikostí .......................... 42 Obrázek 12. Citace ..................................................................................................................... 44 Obrázek 13. Zápis velikosti textu .............................................................................................. 45 Obrázek 14. Registrační okno katalogu Seznam....................................................................... 50 Obrázek 15. Statistika příznivců stránky VASFOTOGRAF.COM na soc. síti Facebook znázorňující pohlaví, věk a zemi původu ke dni 1. 11. 2010 - zdroj vlastní. (vlastní zdroj) ... 58 Obrázek 16. Graf výsledků hodnocení webů návštěvníky (vlastní zdroj) ............................... 61 Obrázek 17. Statistiky klíčových slov Google Analytics (vlastní zdroj) ................................. 67 Obrázek 18. Logo webu VASFOTOGRAF.COM ................................................................... 70 Obrázek 21. Design Úvodní stránky VASFOTOGRAF.COM ................................................ 71 Obrázek 19. Ukázka snímku z galerie se značkou VASFOTOGRAF.COM .......................... 72 Obrázek 20. Nadpis sekce prostřednictvím fontu Bebas ve formátu JPG................................ 72 Obrázek 22. Roční přístup – návštěvnost (vlastní zdroj) .......................................................... 73 Obrázek 23. Statistika přístupů přes vyhledávače (vlastní zdroj)............................................. 74 Obrázek 24. Analýza klíčových slov Google adwords (https://adwords.google.com/) ........... 74 Obrázek 25. Země původu návštěvníků (vlastní zdroj) ............................................................ 76 Obrázek 26. Statistika počtu výskytů slov v textu .................................................................... 76 Obrázek 27. Statistika přístupů z vyhledávačů po optimalizaci (vlastní zdroj) ....................... 77

- 84 -

Seznam tabulek Tab. č. 1. Ţebříček nejrozšířenějších CMS Tab. č. 2. Statistiky konsorcia W3C k srpnu 2010 Tab. č. 3. Bezpečné a vhodné fonty pro web Tab. č. 4. Ţebríček hodnocených foto webů Tab. č. 5. Srovnávací tabulka poskytovatelů hostingu platná k datu 16. 1. 2011 Tab. č. 6. Optimalizace vybraných stránek na nejvyhledávanější slova v kategorii Tab. č. 7. Poplatky za platby k datu 29. 1. 2011

- 85 -

Seznam pouţitých symbolů a zkratek HTML (HyperText Markup Language) značkovací jazyk pro hypertextové dokumenty XHTML (Extensible Hypertext Markup Language) nástupce jazyka HTML XML (eXtensible Markup Language) JavaScript objektově orientovaný skriptovací jazyk CSS Kaskádové styly Layout, temlate, vzhled, šablona Tag značka pouţívající se v (X)HTML W3C mezinárodní konsorcium vyvíjející standardy pro World Wide Web SEO (Search Engine Optimization) metodika pro vytváření webových stránek a obsahu umoţňující spolupráci s internetovými vyhledávači API (zkratka pro Application Programming Interface) označuje v informatice rozhraní pro programování aplikací NPAPI (celým jménem Netscape Plugin Application Programming Interface) je multiplatformní architektura zásuvných modulů pouţívána řadou webových prohlíţečů ActiveX je framework pro definici znovupouţitelných sofwarových komponent v programování. OTF (Open Type Font) Klíčová slova HTML XHTML XML Java Scipt Flash CSS Redakční systém Web Webová prezentace Web design SEO optimalizace Analýza přístupů VASFOTOGRAF.COM

- 86 -