15.01.2015 Views

Návrh a analýza webových stránek pro neziskovou organizaci ...

Návrh a analýza webových stránek pro neziskovou organizaci ...

Návrh a analýza webových stránek pro neziskovou organizaci ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

SOUKROMÁ VYSOKÁ ŠKOLA EKONOMICKÁ ZNOJMO, s.r.o.<br />

Bakalářský studijní <strong>pro</strong>gram:<br />

Ekonomika a management<br />

Studijní obor:<br />

Ekonomika veřejné správy a sociálních služeb<br />

NÁVRH A ANALÝZA WEBOVÝCH<br />

STRÁNEK PRO NEZISKOVOU<br />

ORGANIZACI PIONÝR JEVIŠOVICE<br />

BAKALÁŘSKÁ PRÁCE<br />

Autor:<br />

Jaroslav NOVÁK<br />

Vedoucí bakalářské práce:<br />

Mgr. Tomáš JURMAN<br />

Znojmo, duben 2010


Poděkování:<br />

Na tomto místě bych rád poděkoval vedoucímu své bakalářské práce Mgr. Tomáši<br />

Jurmanovi za obětavý přístup, odborné konzultace a cenné připomínky, kterými přispěl<br />

k vypracování této bakalářské práce. Dále bych chtěl poděkovat své rodině, že mi svoji<br />

podporou umožnili studovat na této škole.


Abstrakt<br />

Bakalářská práce „<strong>Návrh</strong> a <strong>analýza</strong> <strong>webových</strong> <strong>stránek</strong> <strong>pro</strong> <strong>neziskovou</strong> <strong>organizaci</strong> Pionýr<br />

Jevišovice“ pojednává o možnostech, jakým způsobem se může dětská organizace sama<br />

<strong>pro</strong>pagovat. V bakalářské práci představuji dětskou <strong>organizaci</strong> Pionýr Jevišovice, její<br />

činnost, popisuji současnou situaci v <strong>organizaci</strong> a jaké marketingové nástroje používá.<br />

Dále popisuji základní náležitosti <strong>webových</strong> <strong>stránek</strong>, strukturu a design. Vysvětlím zásady<br />

přístupnosti a použitelnosti <strong>webových</strong> <strong>stránek</strong>. Předmětem bakalářské práce je vytvořit<br />

teoretický návrh <strong>pro</strong> vytvoření funkčních <strong>webových</strong> <strong>stránek</strong> dětské organizace. Tyto<br />

webové stránky budou po jejich aplikaci nejvhodnějším způsobem <strong>pro</strong>pagovat činnost<br />

organizace na veřejnosti.<br />

Klíčová slova<br />

WWW stránky, web, nezisková organizace, Pionýr, <strong>analýza</strong><br />

Abstract<br />

The bachelor thesis called “Web sites design and analysis for not-for-<strong>pro</strong>fit organization<br />

Pioneer Jevišovice” deals with possibilities in what way a children´ s organization can<br />

<strong>pro</strong>mote itself. In this bachelor thesis I present the children´ s organization Pioneer<br />

Jevišovice, its activity, I describe present circumstances in the organization and what<br />

marketing instruments it uses. I describe also some basic requirements of web sites, their<br />

structure and design. I explain principles of accessibility and applicability of web sites.<br />

To create a theoretical design for creating of children´ s organization functional web sites<br />

is the subject of this bachelor thesis. These web sites will <strong>pro</strong>mote this organization<br />

activity in public in the most ap<strong>pro</strong>priate manner after their application.<br />

Key words<br />

Web sites, web, not-for-<strong>pro</strong>fit organization, Pioneer, analysis.


Obsah<br />

1 Úvod .............................................................................................................................. 9<br />

2 Cíl práce a metodika .................................................................................................. 10<br />

3 Teoretická část ........................................................................................................... 12<br />

3.1 Vymezení pojmu nezisková organizace ................................................................ 12<br />

3.2 Definice neziskové organizace .............................................................................. 12<br />

3.3 Občanská sdružení ................................................................................................ 13<br />

3.3.1 Dobrovolnictví ............................................................................................... 14<br />

3.3.2 Motivace ........................................................................................................ 14<br />

3.3.3 Pionýr ............................................................................................................. 15<br />

4 Tvorba WWW. <strong>stránek</strong> ............................................................................................. 17<br />

4.1 Hierarchie .............................................................................................................. 17<br />

4.2 Zbytečná slova ...................................................................................................... 18<br />

4.3 Orientace na stránkách .......................................................................................... 18<br />

4.4 Důležitost navigace ............................................................................................... 19<br />

4.4.1 Perzistentní (globální) navigace ..................................................................... 20<br />

4.4.2 Prvky navigace ............................................................................................... 20<br />

4.4.3 Optimálně navržené stránky .......................................................................... 21<br />

4.5 Grafika a design .................................................................................................... 22<br />

4.5.1 Barvy .............................................................................................................. 22<br />

4.5.2 Text ................................................................................................................ 22<br />

4.5.3 Obrázky .......................................................................................................... 23<br />

4.6 Co je použitelnost <strong>stránek</strong> ..................................................................................... 23<br />

4.7 Přístupnost webu ................................................................................................... 24<br />

4.7.1 Kaskádové styly ............................................................................................. 24<br />

4.7.2 Obsah <strong>webových</strong> <strong>stránek</strong> je dostupný a čitelný ............................................. 25<br />

4.7.3 Ovládání webu je jasné a pochopitelné .......................................................... 25<br />

4.7.4 Rozvoj webu .................................................................................................. 26<br />

4.7.5 Webová prezentace ........................................................................................ 26<br />

5 Dětská organizace Pionýr Jevišovice ........................................................................ 27<br />

5.1 Jak pracujeme ...................................................................................................... 27<br />

5.2 Současný stav organizace ...................................................................................... 28<br />

6 Testování <strong>webových</strong> <strong>stránek</strong> ..................................................................................... 29<br />

6.1 Objektivní faktory testování .................................................................................. 29<br />

6.2 Analýza konkurence .............................................................................................. 29<br />

6.2.1 Analýza klíčových slov stránky ..................................................................... 29<br />

6.2.2 Analýza zdrojového kódu stránky ................................................................. 29<br />

6.2.3 Analýza síly webové stránky ......................................................................... 29<br />

6.2.4 Analýza pozice webové stránky ve vyhledávačích ........................................ 30<br />

6.3 Výsledky analýz .................................................................................................... 31<br />

6.4 Výsledky analýz klíčových slov a textu ................................................................ 31<br />

6.4.1 Analýza klíčových slov a textu webu koprivnice.pionyr.cz .......................... 31


6.4.2 Analýza klíčových slov a textu webu skautjevisovice.estranky.cz ............... 32<br />

6.4.3 Analýza klíčových slov a textu webu orlice.abahoa.cz ................................. 32<br />

6.5 Výsledky analýz zdrojového kódu ........................................................................ 33<br />

6.5.1 Analýza zdrojového kódu webu koprivnice.pionyr.cz .................................. 33<br />

6.5.2 Analýza zdrojového kódu webu skautjevisovice.estranky.cz ........................ 33<br />

6.5.3 Analýza zdrojového kódu webu orlice.abahoa.cz ......................................... 34<br />

6.6 Výsledky analýz síly webu .................................................................................... 34<br />

6.6.1 Síla webu koprivnice.pionyr.cz ..................................................................... 34<br />

6.6.2 Síla webu skautjevisovice.estranky.cz ........................................................... 35<br />

6.6.3 Síla webu orlice.abahoa.cz ............................................................................. 35<br />

6.7 Výsledky analýz pozice ve vyhledávačích ............................................................ 36<br />

6.7.1 Analýza pozice ve vyhledávačích webu koprivnice.pionyr.cz ...................... 36<br />

6.7.2 Analýza pozice ve vyhledávačích webu skautjevisovice.estranky.cz ........... 36<br />

6.7.3 Analýza pozice ve vyhledávačích webu orlice.abahoa.cz ............................. 36<br />

6.8 Vyhodnocení <strong>pro</strong>vedených analýz ........................................................................ 37<br />

6.8.1 Vyhodnocení na základě analýz klíčových slov ............................................ 37<br />

6.8.2 Vyhodnocení na základě analýz zdrojových kódů ........................................ 37<br />

6.8.3 Vyhodnocení na základě analýz síly webu .................................................... 38<br />

6.8.4 Vyhodnocení validace - porovnání ................................................................ 38<br />

6.8.5 Vyhodnocení na základě analýzy pozice ve vyhledávačích .......................... 39<br />

6.9 Subjektivní zhodnocení ......................................................................................... 40<br />

6.9.1 Subjektivní zhodnocení úvodní stránky webu Pionýra .................................. 40<br />

6.9.2 Subjektivní zhodnocení úvodní stránky webu Skauta ................................... 41<br />

6.9.3 Subjektivní zhodnocení úvodní stránky webu Junáka ................................... 42<br />

7 Vlastní návrh www <strong>stránek</strong> ...................................................................................... 43<br />

7.1 Strukturální část .................................................................................................... 43<br />

7.1.1 Verze <strong>pro</strong> mobily ........................................................................................... 44<br />

7.1.2 Sekce O nás .................................................................................................... 45<br />

7.1.3 Sekce Fotogalerie ........................................................................................... 46<br />

7.1.4 Sekce Schůzky ............................................................................................... 46<br />

7.1.5 Sekce Diskuse ................................................................................................ 46<br />

7.1.6 Sekce Kontakty .............................................................................................. 47<br />

7.2 Grafická část .......................................................................................................... 47<br />

7.2.1 Znak ............................................................................................................... 48<br />

7.3 Výběr domény a hostingu ..................................................................................... 48<br />

7.3.1 Vlastní doména .............................................................................................. 49<br />

7.3.2 Další možnosti ............................................................................................... 49<br />

7.3.3 Naše cesta ...................................................................................................... 50<br />

8 Závěr ........................................................................................................................... 51<br />

9 Použité zdroje ............................................................................................................. 53<br />

Seznam tabulek a obrázků ................................................................................................ 55<br />

Seznam použitých zkratek ................................................................................................ 56


1 Úvod<br />

S rozvojem Internetu a jeho snadné dostupnosti se většina organizací a firem začala stále<br />

více orientovat na prezentace své práce a činnosti pomocí <strong>webových</strong> <strong>stránek</strong>. Pro jejich<br />

zákazníky, partnery, sponzory, členy ale i nestranného člověka je to dobrý způsob, jak<br />

představit a <strong>pro</strong>pagovat svou <strong>organizaci</strong> nebo firmu. Lidé si mohou z pohodlí domova<br />

<strong>pro</strong>hlížet jednotlivé webové stránky a sami si mohou vybrat, co potřebují vědět<br />

a co je zajímá.<br />

V této práci se budu zabývat teoretickým návrhem <strong>webových</strong> <strong>stránek</strong>, které by měli sloužit<br />

dětské <strong>organizaci</strong> Pionýr Jevišovice, jako jedné z mnoha neziskových organizací,<br />

především jako nástroj <strong>pro</strong>pagace, <strong>pro</strong>stor <strong>pro</strong> oslovení uživatelů, členů, sponzorů<br />

a partnerů, případně jako <strong>pro</strong>středek <strong>pro</strong> zlepšení image dětské organizace.<br />

Popíši základní náležitosti <strong>webových</strong> <strong>stránek</strong>, strukturu a design. Vysvětlím zásady<br />

přístupnosti a použitelnosti <strong>webových</strong> <strong>stránek</strong>, <strong>pro</strong>tože se při vytváření <strong>stránek</strong> nesmí<br />

zapomínat na uživatele, kteří mají některý typ zdravotního postižení, nebo mají jinak<br />

omezené schopnosti, nedisponují skvělými znalostmi a zkušenostmi s používáním webu<br />

nebo <strong>pro</strong>stě jen nevlastní optimální zobrazovací zařízení.<br />

9


2 Cíl práce a metodika<br />

Hlavním cílem bakalářské práce je navrhnout vlastní webové stránky <strong>pro</strong> dětskou<br />

<strong>organizaci</strong> Pionýr Jevišovice, která tento druh <strong>pro</strong>pagace a komunikace v současné době<br />

nepoužívá.<br />

Tato práce je rozdělena na 8 kapitol. 3 kapitola představuje teoretickou část – vymezení<br />

pojmu a definice neziskové organizace, typy nestátních neziskových organizací.<br />

Vysvětlení pojmu občanské sdružení, které funguje především díky dobrovolnictví<br />

ze strany členů, kteří se podílejí na vedení a činnosti organizace.<br />

V kapitole 4 je teoretický návod na vytvoření <strong>webových</strong> <strong>stránek</strong>. Každý subjekt, který<br />

přemýšlí o tvorbě svých vlastních <strong>webových</strong> <strong>stránek</strong>, si musí především uvědomit,<br />

co konkrétně od tohoto kroku očekává. Z toho důvodu jsou zde vysvětleny pojmy<br />

hierarchie <strong>stránek</strong>, co je myšleno pojmem zbytečná slova. Je zde popsána důležitost<br />

navigace na stránkách a vyjmenovány samotné prvky navigace. Dále je zde popsána<br />

grafika a design <strong>webových</strong> <strong>stránek</strong>. Vysvětleny důležité podmínky <strong>pro</strong> splnění správné<br />

použitelnosti a přístupnosti <strong>webových</strong> <strong>stránek</strong> <strong>pro</strong> všechny skupiny uživatelů.<br />

V kapitole 5 představuji dětskou <strong>organizaci</strong> Pionýr Jevišovice, které jsem členem od jejího<br />

založení v roce 1990. Popisuji současný stav organizace, její způsob <strong>pro</strong>pagace<br />

na veřejnosti, činnost a aktivity. Současný způsob <strong>pro</strong>pagace byl vyhodnocen jako<br />

nedostačující. Vzhledem k dostupnosti velké části členů organizace k službám internetu,<br />

byla zaznamenána iniciativa především ze strany členů oddílu na vytvoření vlastních<br />

<strong>webových</strong> <strong>stránek</strong>, které naši komunikaci rozšíří o další moderní obzor.<br />

V kapitole 6 je <strong>pro</strong>vedena <strong>analýza</strong> <strong>webových</strong> <strong>stránek</strong> organizací, které se stejně jako naše<br />

organizace věnují práci s dětmi. Stránky, které byly <strong>pro</strong> účely analýzy této práce vybrány,<br />

jsou zástupci dětských organizací Junák, Skaut a Pionýr. Z každé této organizace byl<br />

vybrán jeden zástupce. Na těchto <strong>webových</strong> stránkách byly postupně <strong>pro</strong>vedeny analýzy<br />

klíčových slov, zdrojového kódu, síly webu a pozice ve vyhledávačích. Webové stránky<br />

byly také na závěr analýz podrobeny subjektivní analýze. Všechny tyto analýzy byly<br />

porovnány a vyhodnoceny v závěru této kapitoly. Zjištěné výsledky analýz jsou motivací<br />

<strong>pro</strong> samotný návrh vlastních <strong>webových</strong> <strong>stránek</strong>.<br />

10


Kapitola 7 obsahuje vlastní návrh internetové prezentace dětské organizace Pionýr<br />

Jevišovice. Tento návrh byl motivován některými pozitivními výsledky analýz v kapitole<br />

6. Prostřednictvím těchto analýz jsem získal představu o tom, co chci do <strong>stránek</strong><br />

organizace zapracovat. Vzhledem k tomu, že nemám s tvořením webu zatím žádné<br />

praktické zkušenosti, musím tento návrh v nejbližší době představit odborníkovi. Který<br />

díky samotnému návrhu získá reálnou představu o tom, jak si naše organizace vlastní<br />

webové stránky představuje. Tento odborník bude mít následně za úkol webové stránky<br />

po <strong>pro</strong>fesionální stránce dotvořit a uvést do <strong>pro</strong>vozu na hostingu www.pionyr.cz.<br />

Kapitola 8 je závěr, kde shrnuji nejdůležitější body své práce. Dále zde uvádím, jaký užitek<br />

a jaké výhody <strong>organizaci</strong> mohou vytvořené webové stránky v budoucnu přinést.<br />

11


3 Teoretická část<br />

3.1 Vymezení pojmu nezisková organizace<br />

Neziskové organizace představují velmi široký pojem, kterému řada lidí nerozumí. Z toho<br />

důvodu chci hned v úvodu vysvětlit, co tento pojem ve skutečnosti znamená.<br />

Nezisková organizace je charakterizována jako nevládní organizace nebo občanské<br />

sdružení, které je obecně <strong>pro</strong>spěšné společnosti. Je dobrovolným sdružováním občanů,<br />

kteří mají společné cíle a jsou ochotni spolupracovat na uspokojování potřeb a zájmů buď<br />

samotných členů, nebo druhých lidí. Občanskou společností jsou nazývány <strong>pro</strong>to, že plní<br />

a <strong>pro</strong>sazují obecný zájem společnosti.<br />

Nezisková organizace je sdružením členů nevládního sektoru, kteří rozhodují sami za sebe,<br />

zatímco ve veřejném sektoru se na rozhodování podílí více odborných pracovníků.<br />

Neziskové organizace pracují nezávisle na státu a jejich činnost <strong>pro</strong>spívá veřejnému blahu<br />

společnosti. Nestátní sektor, pod který neziskové organizace spadají, se zaměřuje<br />

na pomoc, která doposud nebyla zapotřebí. Snaží se nahradit nefungující činnost státu. 1<br />

3.2 Definice neziskové organizace<br />

Sdružení osob a majetku, jehož cílem není vytvářet ekonomický zisk. Neziskové<br />

organizace zisk sice vytvořit mohou, ale nerozdělují ho mezi vlastníky. Nejvýstižněji zní<br />

anglický přívlastek <strong>pro</strong> neziskové organizace: „not-for-<strong>pro</strong>fit“, což v přesném překladu<br />

znamená „ne <strong>pro</strong> zisk“. Přesně vyjadřuje skutečnost, že neziskové organizace fungují<br />

nikoli <strong>pro</strong> zisk a ne že se vyhýbají zisku, jak se může z českého ekvivalentu zdát. 2<br />

1 TUČKOVÁ Z., Ekonomika služeb, s. 93<br />

2 TUČKOVÁ Z., Ekonomika služeb, s. 93<br />

12


Typy nestátních neziskových organizací:<br />

Ze zákona v České republice rozeznáváme čtyři právní formy neziskové organizace:<br />

- občanská sdružení (včetně politických stran)<br />

- obecně <strong>pro</strong>spěšné společnosti<br />

- nadace<br />

- nadační fondy 3<br />

Neziskové organizace můžeme dále klasifikovat podle:<br />

• Zdrojů financování – jestli zdroje, kterými je organizace financována pocházejí<br />

z vládních dotací a grantů, dobrovolných příspěvků nebo jiných zdrojů;<br />

• Typu služby (výrobku) - zda se nezisková organizace zaměřuje na lidi a jejich<br />

chování, nebo zda vyrábí hmotné výrobky;<br />

• Organizační formy – rozlišujeme následující typy organizační formy neziskových<br />

organizací:<br />

dárcovská - hlavní příjmy organizace pocházejí především z darů,<br />

komerční – za služby, které organizace svým uživatelům poskytuje, od nich<br />

vyžaduje platby,<br />

vzájemná – <strong>organizaci</strong> řídí její uživatelé,<br />

podnikatelská – řízení neziskové organizace podléhá <strong>pro</strong>fesionálním<br />

manažerům. 4<br />

3.3 Občanská sdružení<br />

Sdružení se ustanovují podle zákona č. 83/1990 Sb., o sdružování občanů.<br />

Občanské sdružení je sdružením fyzických i právnických osob, které mají společný zájem,<br />

<strong>pro</strong> jehož uskutečnění je vhodné a praktické spojit svou činnost a případně i finanční<br />

<strong>pro</strong>středky. <strong>Návrh</strong> na registraci spolu se stanovami sdružení, ve kterém je vymezen<br />

pozitivní účel činnosti, musí podat nejméně tři občané České republiky. 5<br />

3 TUČKOVÁ Z., Ekonomika služeb, s. 95<br />

4 HANNAGAN T. J., Marketing <strong>pro</strong> neziskový sektor, s. 18<br />

5 TOMEŠ I. a kol., Sociální správa, s. 266<br />

13


3.3.1 Dobrovolnictví<br />

Činnost v neziskových organizacích vykonávají především dobrovolníci. Dobrovolníci<br />

jsou lidé, kteří tuto činnost vykonávají bez nároku na plat, nebo jinou finanční odměnu.<br />

Vykonávají ji z přesvědčení, že pomáhat, konkrétně v našem případě, dětem a mládeži<br />

se v budoucnosti vyplatí. Tak jak vychovává rodič své děti k tomu, aby z nich vyrostl<br />

slušný člověk, tak i naši dobrovolní pracovníci v dětech rozvíjejí především kladné<br />

vlastnosti osobnosti.<br />

Pro tento druh neziskových organizací má velký význam prvek dobrovolnictví. Toto<br />

dobrovolnictví je typickým ukazatelem toho, že jsou lidé ještě společenský druh.<br />

Jednou z typických charakteristik organizace, kterou řadíme do neziskového sektoru,<br />

je kriterium dobrovolnosti. 6<br />

O kriteriu dobrovolnosti se dá pochopitelně hovořit jen tehdy, když nezisková organizace<br />

pracuje s dobrovolníky i ve vedoucích funkcích. 7<br />

Dobrovolník je člověk, který nabízí <strong>organizaci</strong> své znalosti, schopnosti, dovednosti<br />

a zkušenosti za dohodnutých podmínek a není za tuto činnost finančně odměňován formou<br />

platu. Organizace mu může poskytnout nové zázemí, nové přátele, může zde uplatnit své<br />

dovednosti. 8<br />

3.3.2 Motivace<br />

Motivace pracovníků neziskových organizací můžeme mít různé důvody. Určitě to není<br />

motivace finančního rázu. Nejpodstatnějším motivačním faktorem je ve většině případů<br />

práce s dětmi.<br />

Nejpevnějším tmelem, který spojuje občany účastnící se právě nějakého občanského<br />

sdružení či iniciativy, je vzájemná důvěra. Vnitřní konflikt může být <strong>pro</strong> tyto organizace<br />

zničující. 9<br />

6 WILDMANNOVÁ, M., ŠELEŠOVSKÝ, J. a kol., Územní samospráva v ČR, Rakousku a SRN, s. 48<br />

7 BADELT, Ch., Handbuch der Non<strong>pro</strong>fit Organisation, s. 8<br />

8 BOUKAL, V., VÁVROVÁ, H. , NOVOTNÝ, J. Ekonomika a řízení neziskových organizací, s. 53<br />

9 FRIČ, P., GOULLI, R Neziskový sektor v ČR, s. 59<br />

14


Práce v neziskových organizacích nabízí široký <strong>pro</strong>stor <strong>pro</strong> uspokojování osobních<br />

potřeb:<br />

- náležet k nějaké skupině, v níž se cítím dobře a která je společností (nebo její<br />

částí) vnímána jako užitečná<br />

- navazovat sociální kontakt<br />

- smysluplně využívat svůj volný čas<br />

- být uznávaný a respektovaný<br />

- nalézt vlastní seberealizaci 10<br />

3.3.3 Pionýr<br />

Pionýr je občanské sdružení vzniklé podle zákona č. 83/1990 Sb. Rozhodnutí o obnově<br />

padlo na mimořádné konferenci pionýrských pracovníků v lednu roku 1990. Organizace<br />

vyšla z tradic pionýrského hnutí a navázala na činnost oddílů a skupin.<br />

S názvem Pionýr je stále spojena řada předsudků, mylných představ i podcenění. To,<br />

co však zůstalo stát, má základ v kvalitní a zajímavé činnosti oddílů a skupin. Fragmenty<br />

organizace pak daly vzniknout celé řadě sdružení. Projevem svrchované demokracie bylo<br />

svébytné rozhodování oddílů a skupin Pionýrské organizace Socialistického svazu mládeže<br />

v roce 1990 o jejich samostatné budoucí existenci, či v soužití v rámci Pionýra, či Junáka,<br />

Duhy nebo dalších sdružení.<br />

Pionýr usiluje o spojení přirozených dětských zájmů - mít dobré kamarády, zažít hodně<br />

legrace a dobrodružství, poznat neznámé věci, hrát si a soutěžit - s potřebami společnosti<br />

a s rozvíjením dětského talentu a schopností. Činnost pionýrských oddílů a skupin <strong>pro</strong>to<br />

nutně spojuje přání a zájmy dětí s potřebami a požadavky společnosti na pozitivní<br />

využívání volného času dětí a mládeže a rozvoj osobnosti občana demokratické<br />

společnosti, v níž každý má svá práva, ale i určité povinnosti.<br />

10 BOUKAL, V., VÁVROVÁ, H., NOVOTNÝ, J., Ekonomika a řízení neziskových organizací, s. 31.<br />

15


Poznávat dosud nepoznané, společně <strong>pro</strong>žívat dobrodružství i v tzv. všedním životě,<br />

přitom nečekat až vše jen spadne do klína. Spolupracovat, nebát se těžkostí a <strong>pro</strong>blémů,<br />

snažit se je překonávat čestně, hrdě se hlásit ke svým úkolům i průšvihům, nemít své slovo<br />

za cár papíru – to je Program Pionýra.<br />

Statut Pionýra vymezuje podstatu – co Pionýr dělá, <strong>pro</strong> koho je určený. V řadě ustanovení<br />

řeší základní organizační i ekonomická pravidla života celostátní organizace. Program<br />

Pionýra je dokument, který popisuje náplň činnosti. Jsou v něm zachycena východiska,<br />

zásady i kořeny pionýrského hnutí. Oba dokumenty jsou v mnoha směrech <strong>pro</strong>vázány. 11<br />

11 PIONÝR.cz Základní informace o Pionýru [online].<br />

16


4 Tvorba WWW. <strong>stránek</strong><br />

Každý subjekt, který uvažuje o tvorbě svých <strong>webových</strong> <strong>stránek</strong>, si musí především<br />

uvědomit, co konkrétně od tohoto kroku očekává. Po <strong>pro</strong>vedení podrobné analýzy by měl<br />

tato očekávání <strong>pro</strong>mítnout do vlastní webové prezentace. Vytvoření samotných<br />

internetových <strong>stránek</strong> může organizace svěřit odborníkům, jako např. různým reklamním<br />

agenturám, nebo webovým designérům apod. Odborníkům musíme přesně popsat<br />

a stanovit, případně i vysvětlit vlastní požadavky a představy, musíme s nimi po celou<br />

dobu vytváření <strong>stránek</strong> úzce spolupracovat.<br />

4.1 Hierarchie<br />

Má-li být stránka snadno a rychle pochopitelná, je především důležitý její vzhled,<br />

aby všechny vizuální podněty jasně a přesně vypovídaly o vztahu mezi objekty na stránce:<br />

co spolu souvisí a co je součástí něčeho jiného.<br />

Stránky s jasnou vizuální hierarchií mají tyto tři následující vlastnosti:<br />

Čím je (něco) informace důležitější, tím je to nápadnější. Nejdůležitější nápisy jsou<br />

buď větší, tučnější, nebo mají jinou barvu, případně kombinace těchto parametrů.<br />

Objekty, které spolu logicky souvisí, jsou <strong>pro</strong>pojeny také vizuálně.<br />

Objekty jsou vizuálně „zanořeny“, aby bylo zřejmé, co je částí čeho. 12<br />

Správně navržená a <strong>pro</strong>vedená vizuální hierarchie nám obsah otevřené stránky dobře<br />

nadefinuje, zorganizuje a určí priority. Díky těmto informacím stránku lépe a rychleji<br />

pochopíme. Pokud ji však stránka nemá a vše je stejné a vypadá stejně důležitě, jsme<br />

nuceni k mnohem většímu přemýšlení, abychom se na stránce správně zorientovali.<br />

Rozdělení stránky na jasně definované oblasti je důležité, <strong>pro</strong>tože návštěvník stránku<br />

především <strong>pro</strong>hlíží a sám se v ní orientuje. Díky správnému rozložení stránky se následně<br />

rozhodne, kterou oblast si otevře a <strong>pro</strong>hlédne a kterou případně vůbec nenavštíví.<br />

12 KRUG, S. Webdesign : Nenuťte uživatele přemýšlet! s. 34<br />

17


4.2 Zbytečná slova<br />

Vynechejte zbytečná slova. Ve stručnosti je síla. Věta by neměla obsahovat zbytečná slova<br />

a odstavce nadbytečné věty ze stejného důvodu, jako by kresba neměla obsahovat žádné<br />

zbytečné čáry a stroj zbytečné součástky. 13<br />

Pokud uživateli předložíme dlouhý článek na čtení, může se nám stát, že jej odradíme,<br />

zde je celkem reálné článek znovu podrobit kontrole a odstranit polovinu slov. Musíme dát<br />

pozor a odstranit slova, která stejně nikdo nebude číst. Z toho důvodu tím nijak neutrpí<br />

hodnota článku, jeho obsah se stane přehlednější, <strong>pro</strong>tože nepodstatné věci zmizí.<br />

I samotné stránky budou kratší a uživatelé uvidí více informací, aniž by je museli<br />

posunout.<br />

Abychom uživatele neodradili <strong>pro</strong>čítáním dlouhého textu hned na začátku, musíme<br />

se vyvarovat používání sebechvalných <strong>pro</strong>pagačních textů a textů, které nepřináší žádné<br />

užitečné informace, stejně tak informací, jak jsou naše stránky či organizace dokonalá.<br />

Nechme návštěvníka, ať si udělá obrázek sám a nic mu nepodsouvejme, nevnucujme.<br />

Tyto informace mohou naopak na čitatele působit opačným dojmem – kontra<strong>pro</strong>duktivně.<br />

4.3 Orientace na stránkách<br />

Uživatelé našich <strong>stránek</strong> nebudou používat web, pokud se v něm snadno a rychle<br />

nezorientují. Účelem našich <strong>stránek</strong> je prezentace dětské organizace Pionýr, účelem této<br />

prezentace je poskytnout návštěvníkům co nejrychlejší přístup k podstatným informacím<br />

o <strong>organizaci</strong>. Stejně jako účelem <strong>stránek</strong> virtuálního obchodu je <strong>pro</strong>dat zboží, naším<br />

účelem je dobře „<strong>pro</strong>dat“ naše zkušenosti. Chceme prezentovat naši činnost široké<br />

veřejnosti, aby se organizace dostala do povědomí místních obyvatel svou činností a svým<br />

kladným přístupem.<br />

Na stránkách bude umístěno vyhledávací pole. Pokud bude uživatel hledat něco<br />

konkrétního, postačí mu napsat vyhledávané slovo, případně název sekce do vyhledávače.<br />

13 STRUNK, W., WHITE, E.B. The Element sof Style, s. 47<br />

18


Tato praktická věc pomůže především těm návštěvníkům, kteří nejsou zvyklí <strong>pro</strong>hlížet<br />

jednotlivé odkazy a na hledanou věc se raději zeptají. Tyto vyhledávací pole mají své<br />

opodstatnění především na obsáhlejších stránkách, kde je široká struktura<br />

a hluboká hierarchie. Své místo nepochybně najdou i na přehledných stránkách.<br />

Je to služba <strong>pro</strong> klienty, která urychlí jejich hledání.<br />

Pokud se uživatel rozhodne <strong>pro</strong> <strong>pro</strong>cházení <strong>stránek</strong>, bude na hlavní (domovské) stránce<br />

hledat seznam hlavních sekcí, postupovat <strong>pro</strong>střednictvím ukazatelů a klepat na odkazy,<br />

které mu budou připadat nejvhodnější.<br />

Domovská stránka je v hierarchickém uspořádání na vrcholu žebříčku a všechny ostatní<br />

stránky webu by měly obsahovat přímý odkaz vedoucí zpět na tuto stránku. URL (Uniform<br />

Resource Locator formální termín <strong>pro</strong> adresy na Internetu) adresa domovské stránky<br />

je obvykle ta webová adresa, která odkazuje uživatele na daný web. Domovská stránka<br />

je nejnavštěvovanější stránka daného webu, a <strong>pro</strong>to je ideální <strong>pro</strong> umísťování<br />

nejdůležitějších zpráv a informací. 14<br />

4.4 Důležitost navigace<br />

O úspěchu či neúspěchu navržených <strong>webových</strong> <strong>stránek</strong> rozhoduje jejich jednoduchost,<br />

přehlednost a účelnost navigace. Navigačního systémy by měly být vytvořeny zodpovědně.<br />

Účely navigace nám mají pomoci najít to, co hledáme a říci, kde jsme.<br />

Poskytuje nám opěrné body – Nikdo se necítí dobře, když je ztracen. Dobrá navigace<br />

zajišťuje půdu pod nohama (i když jenom virtuální).<br />

Funkce navigace<br />

Říká nám, co všechno tady je. Odkrytím hierarchie nám říká, co server (myšlen webový<br />

portál organizace) obsahuje. Pokud rozumíme navigaci a pochopíme hierarchii, odkryje<br />

se nám obsah webu.<br />

Říká nám, jak máme stránky používat. Pokud navigace splňuje svůj úkol, pak implicitně<br />

říká, kde máme začít a jaké máme možnosti. Správně navržená navigace by v sobě měla<br />

obsahovat všechny instrukce, které potřebujeme. 15<br />

14 LYNCH, P., HORTONOVÁ, S. Základní průvodce webdesignem s. 55-56<br />

15 KRUG, S., Webdesign : Nenuťte uživatele přemýšlet! s. 52-53<br />

19


4.4.1 Perzistentní (globální) navigace<br />

Webový návrháři používají termín perzistentní navigace, jímž popisují řadu navigačních<br />

prvků, které se objevují na každé stránce serveru. Přítomnost navigace na stejném místě<br />

na každé stránce a její konzistentní vzhled nám dává neustále jistotu, že jsme na stejném<br />

serveru. Perzistentní navigace na každé stránce by měla obsahovat prvky, které<br />

potřebujeme mít po ruce (logo serveru, odkaz na domovskou stránku, vyhledávání,<br />

pomůcky a sekce). 16<br />

4.4.2 Prvky navigace<br />

1) Sekce – jedná se o primární navigace a jsou to odkazy na základní sekce serveru:<br />

nejvyšší úroveň serverové hierarchie. Většinou obsahuje perzistentní navigace místo<br />

<strong>pro</strong> zobrazení sekundární navigace: seznam podsekcí v aktuální sekci.<br />

2) Pomůcky – odkazy na důležité prvky serveru, které nejsou přímou součástí<br />

hierarchie (například Nápověda, Mapa serveru, Kontakt). Měly by být vyvedeny<br />

méně výrazným stylem než sekce. Pomůcky budou různé <strong>pro</strong> různé druhy serverů.<br />

3) Domovská stránka – tlačítko nebo odkaz Home nám dává jistotu, že bez ohledu<br />

na to, jak moc jsme se ztratili a kam jsme se při tom posunuli, nebo pokud se <strong>pro</strong>stě<br />

potřebujeme vrátit na výchozí stránku, nás na tuto stránku přenese okamžitě. Tuto<br />

funkci může dobře suplovat i samotné logo serveru (mimo domovskou stránku),<br />

je však dobré naznačit návštěvníkům přidáním slova Home přímo do loga, že na něj<br />

lze klepnout. Domovská stránka není jako ostatní stránky – má jiné poslání. Na této<br />

stránce, kterou návštěvník <strong>pro</strong>hlíží jako první, by měly být všechny nejdůležitější<br />

informace, všechny ostatní informace jsou dále z této strany snadno dostupné.<br />

4) Vyhledávání – velká část návštěvníků <strong>webových</strong> <strong>stránek</strong> dává přednost vyhledávání<br />

před <strong>pro</strong>hlížením a brouzdáním, <strong>pro</strong>to by mělo být na každé stránce vyhledávací<br />

pole, nebo alespoň odkaz na vyhledávací stránku. Nejlepší variantou je: textové<br />

pole, tlačítko a slovo Vyhledat.<br />

5) Zde se nacházíte – navigace může utlumit pocit ztracenosti v <strong>pro</strong>storu stejným<br />

způsobem, jako značka „zde se nacházíte“ na mapě v nákupním středisku nebo<br />

v národním parku. Na webu toho dosáhneme tím, že zvýrazníme aktuální pozici<br />

v navigačních panelech, seznamech nebo nabídkách, které se na stránce objevují.<br />

Aktuální pozici můžeme vyzdvihnout mnoha způsoby a umístit před ní ukazatel,<br />

16 KRUG, S. Webdesign : Nenuťte uživatele přemýšlet! s. 54-55<br />

20


změnit barvu textu, použít tučný text, inverzní tlačítko, změnit barvu tlačítka atd.<br />

Já osobně bych citlivě zkombinoval několik způsobů najednou. Šikovnou<br />

pomůckou v rámci <strong>stránek</strong> je cesta znázorňující směr od domovské stránky<br />

do aktuálního místa. Doporučoval bych ji umístit na začátek stránky nad všemi<br />

ostatními položkami. Nejvhodnějším oddělovačem jednotlivých úrovní je znak<br />

„větší než“ (>), který vizuálně naznačuje pohyb směrem od vyšších úrovní k nižším.<br />

Díky ní mohou uživatelé získat jasnou představu, kde se právě nyní nachází,<br />

nezávisle se vracet do vyšších úrovní a to i bez kompletní znalosti celé hierarchie<br />

serveru. Tuto navigaci bych spíše volil v případě, kdy není jedinou navigací.<br />

Provedení menším písmem, aby bylo patrné, že se jedná pouze o doplněk.<br />

6) Záložky - Záložky mohou stránky vylepšit a zároveň posloužit dobré věci bez<br />

nutnosti zvětšení fyzické velikosti stránky. Ouška záložky vytváří iluzi, že se aktivní<br />

stránka přesune dopředu. Je to sice laciný trik, nicméně efektní a hlavně efektivní.<br />

Výsledek budí silnější dojem, že je server rozdělen na více sekcí a že jsme právě<br />

v jedné z nich. Aby záložka fungovala k plné spokojenosti, musí jejich grafická<br />

podoba vytvářet dojem, že aktivní záložka je před ostatními. Abychom dosáhli<br />

tohoto dojmu, musí být aktivní záložka vyvedena v jiné barvě nebo kontrastním<br />

odstínu a musí být fyzicky <strong>pro</strong>pojena s listem pod sebou. 17<br />

4.4.3 Optimálně navržené stránky<br />

Jsou-li stránky dobře navrženy, měli byste být schopni (pokud se dostaneme náhodně<br />

na stránku nějakého webového serveru – kam jsme často vrženi, aniž bychom měli ponětí<br />

o tom, kde jsme, jelikož jsme předtím klepli na odkaz v nějakém vyhledávači nebo jiném<br />

serveru) bez váhání odpovědět na následující otázky:<br />

O jaký server se jedná (Logo serveru)<br />

Na jaké jste stránce (Název stránky)<br />

Jaké jsou hlavní sekce tohoto serveru (Sekce)<br />

Jaké na této úrovni máte možnosti (Lokální navigace)<br />

Kde se nacházíte v hierarchii serveru (Ukazatele „Zde se nacházíte“)<br />

Jakým způsobem můžeme vyhledávat 18<br />

17 KRUG, S. Webdesign : Nenuťte uživatele přemýšlet! s. 57-69<br />

18 KRUG, S. Webdesign : Nenuťte uživatele přemýšlet! s. 73<br />

21


4.5 Grafika a design<br />

Hlavním důvodem, <strong>pro</strong>č vytváříme www stránky, je obsah <strong>stránek</strong>. Textová a obrazová<br />

informace. Uživatelé na naše stránky přijdou nikoliv <strong>pro</strong>to, že by chtěli obdivovat<br />

úžasnou grafiku, ale <strong>pro</strong>tože hledají informace. 19<br />

Je ale pravda, že uživatele na našich <strong>webových</strong> stránkách většinou nejprve upoutá grafika<br />

a design <strong>stránek</strong>. Design naopak může kladně působit na čtenáře a může zvýšit jeho<br />

důvěru k danému webu.<br />

Grafika na stránce slouží jako <strong>pro</strong>středí, do něhož je informace zasazena. Vhodné, jemné<br />

a nenápadné grafické zpracování je tím, čeho chceme dosáhnout. 20<br />

Nevhodně zvolená grafika, nebo grafika animovaná může návštěvníka rozptylovat<br />

od skutečného důvodu, <strong>pro</strong>č na naše stránky přišel. Je velmi důležité na stránkách dobře<br />

vyvážit poměr textu a obrázků ve <strong>pro</strong>spěch uživatelů s pomalejším připojením. Nejprve<br />

a také nejrychleji se načte text – tedy základ stránky. Čím více obrázků a grafiky, tím<br />

je stahování pomalejší. V případě dodržení přiměřené velikosti <strong>stránek</strong> bude rychlost<br />

načítání uspokojivá.<br />

4.5.1 Barvy<br />

Barvy do značné míry určují první dojem, celkové vyznění <strong>stránek</strong> a jsou mocným<br />

nástrojem webového designu, ale jejich úloha není jen estetická. Vhodná volba barev totiž<br />

přímo ovlivňuje i použitelnost <strong>stránek</strong>. Barevně bych především upozornil na důležité<br />

informace. Text v jasné barvě dobře kontrastující s pozadím si každý přečte jako první.<br />

4.5.2 Text<br />

Hlavním předpokladem je, aby text na stránce byl snadno čitelný. Nejlepší barevná<br />

kombinace je černé písmo na bílém pozadí, jako text psaný na psacím stoji na bílý papír.<br />

Jsou možné různé barevné kombinace, ale je důležité, aby potom písmo v kontrastu<br />

19 DOMES, M. Tvorba www <strong>stránek</strong> <strong>pro</strong> úplné začátečníky, s. 175<br />

20 DOMES, M. Tvorba www <strong>stránek</strong> <strong>pro</strong> úplné začátečníky, s. 175<br />

22


s pozadím bylo snadno čitelné. Kombinace s malým kontrastem barev jsou nevhodné.<br />

Na jedné stránce navrhuji nepoužívat příliš druhů písma.<br />

4.5.3 Obrázky<br />

Obrázky webové stránky velmi oživují a zpestřují. Na stránky můžeme umístit i různé<br />

interaktivní prvky. Ty se snaží zaujmout čtenáře webu. Možné je vytvořit i různé<br />

animované obrázky, kdy jeden soubor obsahuje několik obrázků, které se v zadaných<br />

intervalech střídavě zobrazují. Výsledný efekt pak budí dojem animace. Stránky mohou<br />

pak vypadat působivě a vždy je zajímavě oživí.<br />

4.6 Co je použitelnost <strong>stránek</strong><br />

Dobrá použitelnost <strong>stránek</strong> znamená, že:<br />

uživatelům (čtenářům) se podaří na webu udělat to, co chtějí. Např.<br />

o<br />

o<br />

o<br />

o<br />

o<br />

najít informaci, <strong>pro</strong> kterou přišli<br />

najít kontaktní e-mail<br />

přečíst si novinky<br />

zaregistrovat se<br />

objednat si zboží<br />

zvládnou to v rozumném čase a bez velkého přemýšlení<br />

zvládnou to bez chyb a zásadních zklamání<br />

Na první pohled to není nic podstatného. Ale dobré weby se <strong>pro</strong>sadily díky své<br />

použitelnosti, vezměte si třeba Google. Z nepoužitelných <strong>stránek</strong> naopak lidé raději<br />

odcházejí. 21<br />

21 JANOVSKÝ, D. Jak psát web [online].<br />

23


4.7 Přístupnost webu<br />

Přístupná webová stránka je použitelná <strong>pro</strong> každého uživatele internetu, a to nezávisle<br />

na jeho postižení, schopnostech, znalostech, zkušenostech nebo zobrazovacích<br />

možnostech. Vnímat obsah webové stránky a ovládat její funkce je zkrátka právem<br />

každého uživatele a nesmí mu být žádný obsah nebo funkce upřena jenom <strong>pro</strong>to, že trpí<br />

některým typem zdravotního postižení, má omezené schopnosti, nedisponuje skvělými<br />

znalostmi a zkušenostmi s používáním webu nebo nevlastní optimální zobrazovací<br />

zařízení. 22<br />

Kromě lidí může internetové stránky navštívit i samostatný internetový robot. Ve většině<br />

případů chceme, aby naše stránky byly ve vyhledávačích vidět, a my díky tomu měli<br />

možnost získat návštěvníky. Proto bychom si příchodu vyhledávacího robota měli cenit<br />

a nabídnout mu obsah <strong>stránek</strong> tak, aby byl schopný jej zpracovat, tzn. udělat <strong>pro</strong> něj web<br />

přístupný. Robot vyhledávače není schopný zpracovat obrázky, zvuky a také některé<br />

technologie (javascript, flash, ajax atd.). Pokud v sobě prvky obsahují informační hodnotu<br />

a jestliže její pomocí chceme nalákat i návštěvníky přicházející z vyhledávačů, měli<br />

bychom ji na webu nabídnout i v textové formě, kterou bude schopen vnímat i robot. 23<br />

4.7.1 Kaskádové styly<br />

Obsah <strong>stránek</strong> bude přístupnější, pokud budete požívat kaskádové styly (CSS – Cascading<br />

Style Sheets). Pokud budou stránky formátovány pomocí kaskádových stylů, mohou<br />

uživatelé používat vlastní formátování. Stránka, která používá červený text na zeleném<br />

pozadí, představuje <strong>pro</strong>blém <strong>pro</strong> uživatele, kteří nejsou schopni tyto barvy rozeznat.<br />

Při nastavení barev pomocí kaskádových stylů, může uživatel použít vlastní nastavení <strong>pro</strong><br />

nahrazení původních barev. Uživatelé mohou tedy formátovat obsah <strong>stránek</strong> způsobem,<br />

který jim vyhovuje. 24<br />

22 ŠPINAR, D. Tvoříme přístupné webové stránky s. 12<br />

23 PODLAHOVÁ, I. Dobrý web, Přístupný web. [online].<br />

24 LYNCH, P., HORTONOVÁ, S. Základní průvodce webdesignem s. 27<br />

24


4.7.2 Obsah <strong>webových</strong> <strong>stránek</strong> je dostupný a čitelný<br />

Každý netextový prvek nesoucí významové sdělení má svou textovou alternativu.<br />

Informace sdělované <strong>pro</strong>střednictvím skriptů, objektů, kaskádových stylů, obrázků<br />

a jiných doplňků na straně uživatele jsou dostupné i bez kteréhokoli<br />

z těchto doplňků.<br />

Informace sdělované barvou jsou dostupné i bez barevného rozlišení.<br />

Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není vzorek, který<br />

snižuje čitelnost.<br />

Předpisy určující velikost písma nepoužívají absolutní jednotky.<br />

Předpisy určující typ písma obsahují obecnou rodinu písem.<br />

4.7.3 Ovládání webu je jasné a pochopitelné<br />

Každá webová stránka má smysluplný název, vystihující její obsah.<br />

Navigační a obsahové informace jsou na webové stránce zřetelně odděleny.<br />

Navigace je srozumitelná a je konzistentní na všech <strong>webových</strong> stránkách.<br />

Každá webová stránka (kromě úvodní webové stránky) obsahuje odkaz na vyšší<br />

úroveň v hierarchii webu a odkaz na úvodní WWW stránku.<br />

Všechny webové stránky rozsáhlejšího webu obsahují odkaz na přehlednou mapu<br />

webu.<br />

Obsah ani kód webové stránky nepředpokládá, že uživatel již navštívil jinou<br />

stránku.<br />

Každý formulářový prvek má přiřazen výstižný nadpis.<br />

Každý rám má vhodné jméno či popis vyjadřující jeho smysl a funkčnost.<br />

25


Přístupný web je takový, který neklade uživateli žádné překážky v jeho používání a to bez<br />

ohledu na uživatelovo technické vybavení, jeho schopnosti, znalosti či aktuální zdravotní<br />

stav. Přístupnost webu si tedy klade za cíl poskytnout každému návštěvníkovi <strong>stránek</strong><br />

stejné (tj. všechny) informace, umožnit web používat všem. 25<br />

4.7.4 Rozvoj webu<br />

Stejně jako stavba nového webu má své opakující se kroky, i u rozvoje <strong>webových</strong> <strong>stránek</strong><br />

lze vymezit obvyklé činnosti. Mezi nejčastější úkony patří:<br />

Technická a funkční inovace webu – a to jak jeho veřejné části, tak administrace.<br />

Aktualizace obsahu, struktury informací a navigace.<br />

Úpravy stávajících a <strong>pro</strong>gramování nových funkcí na míru vašemu webu.<br />

Spolupráce v technologickém zajištění webu (webhosting, serverové statistiky<br />

apod.).<br />

Grafické práce, <strong>pro</strong>pagace a marketingová podpora webu.<br />

4.7.5 Webová prezentace<br />

Webová prezentace firmy, nebo organizace je základním kamenem její působnosti<br />

v oblasti Internetu. Jedná se prakticky o řadu vzájemně <strong>pro</strong>vázaných <strong>webových</strong> <strong>stránek</strong>,<br />

na kterých mohou být publikovány základní informace o firmě, jejím poslání, oboru<br />

činnosti, nabídce služeb a jejich specifikace a srovnání, seznam <strong>pro</strong>vozoven, kontakty<br />

na odpovědné osoby a podobně. Obecně se jedná o jednoduchý způsob, jakým zákazníkům<br />

sdělit to, co potřebují vědět. 26<br />

25 WEB TVORBA. Přístupnost webu. [online].<br />

26 FORET, M. Marketingová komunikace, s. 331<br />

26


5 Dětská organizace Pionýr Jevišovice<br />

Jsme nestátní nezisková organizace zaměřená na mimoškolní, volnočasové aktivity dětí<br />

a mládeže. Byli jsme založeni v roce 1990, plným názvem Pionýrská skupina Pionýr<br />

Jevišovice.<br />

Naše činnost se dělí na:<br />

pravidelné schůzky v klubovně,<br />

akce na jeden den nebo odpoledne,<br />

vícedenní převážně víkendové akce.<br />

Nabízíme dětem různorodé možnosti trávení volného času: rukodělná činnost, hry, kultura,<br />

sport, soutěže, turnaje, turistika, setkání, výlety, tábory (v rámci družby s jinými<br />

pionýrskými skupinami).<br />

5.1 Jak pracujeme<br />

V období školního vyučování – v měsících září až červen se děti jednou za týden (v pátek)<br />

schází v klubovně, kterou máme v nájmu od Městského úřadu Jevišovice. V klubovně<br />

se schází pravidelně 15 - 20 dětí oddílu. Naše akce jsou otevřené <strong>pro</strong> všechny děti (tedy<br />

i nečleny). Stačí pouze přijít a zúčastnit se. Za zcela zásadní považujeme to, že děti v době<br />

účasti na našich schůzkách a akcích nepobíhají po ulicích, nenudí se, ani se nepodílí<br />

na sociálně patologických jevech (drobná kriminalita, kouření a drogy). Prostě mají<br />

možnost příjemně a užitečně strávit svůj volný čas v kolektivu kamarádů.<br />

Dlouhodobě podporujeme talentované děti. Děti vyslané naší organizací už několikrát<br />

<strong>pro</strong>kázaly své schopnosti a dovednosti v celostátních kolech Sedmikvítku – obor divadlo,<br />

obor hudba, obor rukodělná, výtvarná činnost a keramika, clona.<br />

V roce 2003 jsme zvítězili v celostátním kole Sedmikvítku v Opavě v oborech výtvarná<br />

a rukodělná činnost a získali putovní Pohár předsedy vlády Vladimíra Špidly. V roce 2005<br />

jsme získali putovní Pohár předsedy vlády Jiřího Paroubka v oboru divadlo. V letošním<br />

roce jsme držiteli putovního Poháru předsedy vlády Jana Fišera v oborech výtvarná<br />

činnost, rukodělná činnost a keramika.<br />

27


V naší <strong>organizaci</strong> působí zkušení vedoucí s mnohaletou praxí práce s dětmi. Řada rodičů<br />

našich dětských členů se často zapojuje do činnosti při samotných schůzkách, ale i akcích<br />

pořádaných naší organizací. Vedení naší organizace <strong>pro</strong>chází školením vedeným ústředím<br />

Pionýra (psychologie skupin, zdravověda a první pomoc, bezpečnost při akcích s dětmi,<br />

hospodář, vedoucí PS apod.). Veškeré úsilí a náš volný čas věnujeme dětem zcela zdarma.<br />

5.2 Současný stav organizace<br />

V letech 1993-2005 jsme v naší <strong>organizaci</strong> hráli dětské ochotnické divadlo. Jako<br />

<strong>pro</strong>pagaci naší činnosti jsme o konání divadelního představení veřejnost informovali<br />

především vytvořenými plakáty a osobními pozvánkami, které jsme si sami vyrobili<br />

a členové oddílu je před představením roznesli a umístili na strategická místa v obci<br />

a do schránek občanů obce Jevišovice. Prostřednictvím místního rozhlasu jsme občany<br />

pozvali na toto představení. Podobně jako u divadelního představení <strong>pro</strong>bíhala a stále<br />

<strong>pro</strong>bíhá <strong>pro</strong>pagace dalších našich akcí a činností - sběr železa, čištění studánek, jarní úklid<br />

(to už ale bez osobních pozvánek do schránek).<br />

V posledních dvou letech se naše komunikace rozšířila o nový fenomén a to emailovou<br />

poštu, <strong>pro</strong>tože každý třetí člen uvedl do svých kontaktů vlastní email, nebo email rodiče,<br />

začala organizace využívat i této služby k informování členů a jejich rodičů o plánu akcí<br />

a schůzek. Tato činnost byla v minulosti řešena tak, že se napsaly <strong>pro</strong>pozice ke schůzkám,<br />

nebo plánovaným akcím a výletům. Tyto <strong>pro</strong>pozice se členům poté předaly na schůzce<br />

a podávaly informace o náplni činnosti s měsíčním předstihem.<br />

Z výše uvedeného je patrné že v dnešní době nejméně jedna třetina až plná polovina členů<br />

má přístup na internet. Další přístup na internet mají děti ve škole, nebo rodiče ve svém<br />

zaměstnání. Dá se říct, že kdo chce informace znát, má možnost si je zjistit a najít. Z toho<br />

důvodu vyvstal v naší <strong>organizaci</strong> požadavek, který byl iniciován převážně ze strany dětí,<br />

členů oddílu na vytvoření vlastních <strong>webových</strong> <strong>stránek</strong>, které naši komunikaci rozšíří<br />

o další moderní obzor.<br />

28


6 Testování <strong>webových</strong> <strong>stránek</strong><br />

Tvorba <strong>webových</strong> <strong>stránek</strong> je činnost poměrně náročná a celý <strong>pro</strong>ces od prvotního nápadu<br />

až po finální verzi stojí mnoho času a úsilí. Testování je velice důležitou součástí vývoje,<br />

může nás totiž ještě v době tvoření webu upozornit na chyby, které můžeme odstranit před<br />

samotným spuštěním webu do <strong>pro</strong>vozu.<br />

6.1 Objektivní faktory testování<br />

Výsledek testování objektivních faktorů se dá přesně vyhodnotit. Můžete tak určit, zda<br />

vaše stránky splňují nebo nesplňují požadovanou vlastnost. Mezi objektivní faktory patří<br />

validita zdrojového kódu a kaskádových stylů podle zvoleného standardu, funkčnost všech<br />

odkazů nebo splňování kritérií přístupnosti. Díky jednoznačnosti výsledků testování těchto<br />

faktorů by měla být jejich správnost u kvalitních <strong>webových</strong> <strong>stránek</strong> samozřejmostí.<br />

6.2 Analýza konkurence<br />

Analyzovat webové stránky jiných dětských organizací jsem se rozhodl uskutečnit podle:<br />

6.2.1 Analýza klíčových slov stránky<br />

Vyhodnotí četnosti slov a frází.<br />

6.2.2 Analýza zdrojového kódu stránky<br />

Odhalí většinu závažných chyb, <strong>pro</strong>tože <strong>pro</strong>věřuje: informace v hlavičce, chyby v HTML<br />

(Hyper Text Markup Language, je značkovací jazyk <strong>pro</strong> hypertext) kódu, sémantiku<br />

obsahu a přístupnost.<br />

6.2.3 Analýza síly webové stránky<br />

Analýza poskytne komplexní přehled o stavu, síle a potenciálu vašeho webu v globálním<br />

měřítku. Analýza <strong>pro</strong>věřuje: komplexně HTML kód, zpětné odkazy a jejich potenciál,<br />

pozice ve vyhledávačích, návštěvnost a potenciál domény.<br />

29


6.2.4 Analýza pozice webové stránky ve vyhledávačích<br />

Zjištění pozice analyzovaného webu ve vyhledávačích na zadané slovo.<br />

Pro analýzu byly vybrány následující 3 weby:<br />

http://koprivnice.pionyr.cz/<br />

http://www.skautjevisovice.estranky.cz/<br />

http://orlice.abahoa.cz/<br />

Tyto webové stránky byly vybrány záměrně, <strong>pro</strong>tože jde o neziskové organizace, které<br />

stejně jako naše organizace pracují s dětmi. Webové stránky Pionýra Kopřivnice byly<br />

vybrány z toho důvodu, že je to náš partner, kterého vzhledem k jeho vzdálenosti<br />

od Jevišovic nepovažujeme za konkurenta. Stránky Skauta Jevišovice byly vybrány<br />

především s přihlédnutím k tomu, že působí ve stejném městě jako naše organizace,<br />

je to tedy náš přímý konkurent. Stránky Junáka Moravské Budějovice byly vybrány<br />

jako další možný konkurent působící v nejbližším městě.<br />

První část analýzy byla zaměřena na klíčová slova. Na každém webu byla pomocí služby<br />

klíčová slova dostupné na webu http://www-seo-servis.cz zjištěna četnost výskytu<br />

klíčových slov. Mimo nejčastěji používaná slova, která <strong>analýza</strong> vyhodnotí automaticky,<br />

byla také testována tyto slova – děti, hry, akce, rodiče a název organizace – pionýr, skaut,<br />

junák (podle konkrétní analýzy – <strong>webových</strong> <strong>stránek</strong> organizace). Další části analýzy byly<br />

zaměřeny na analýzu zdrojového kódu, sílu webu a pozice ve vyhledávačích. Stejně jako<br />

v prvním případě byl nyní pomocí služby <strong>analýza</strong> zdrojového kódu, síla webu a pozice<br />

ve vyhledávačích dostupné na webu http://www-seo-servis.cz zjištěn výsledek <strong>pro</strong>vedené<br />

analýzy.<br />

Na závěr této kapitoly, testování <strong>webových</strong> <strong>stránek</strong>, jsem <strong>pro</strong>vedl i subjektivní analýzu<br />

<strong>webových</strong> <strong>stránek</strong> Pionýr Kopřivnice, Skaut Jevišovice a Junák Moravské Budějovice.<br />

30


6.3 Výsledky analýz<br />

V následujících podkapitolách jsem se rozhodl z důvodu větší přehlednosti a možnému<br />

okamžitému porovnání výsledků, zobrazit výsledky vždy jedné analýzy <strong>pro</strong>vedené<br />

postupně na všech <strong>webových</strong> stránkách. Řazení výsledků analýz jsem zachoval<br />

i v následujících kapitolách. Vždy jsou tedy výsledky analýz uvedené v následujícím<br />

pořadí:<br />

1. http://koprivnice.pionyr.cz/<br />

2. http://www.skautjevisovice.estranky.cz/<br />

3. http://orlice.abahoa.cz/<br />

6.4 Výsledky analýz klíčových slov a textu<br />

6.4.1 Analýza klíčových slov a textu webu koprivnice.pionyr.cz<br />

Orientační počet slov na stránce je 430<br />

Tabulka 1: Nejčetnější slova stránky webu Pionýra Kopřivnice<br />

Slovo Výskytů Zastoupení v %<br />

2010 22 5,09<br />

kopřivnice 6 1,38<br />

fotogalerie 6 1,38<br />

května 2010 5 1,15<br />

února 5 1,15<br />

května 5 1,15<br />

února 2010 4 0,92<br />

zimní tábor 4 0,92<br />

pionýr 3 0,75<br />

2010 so 3 0,75<br />

akce 0 0<br />

rodiče 0 0<br />

hry 0 0<br />

děti 0 0<br />

Zdroj: práce autora (7. 4. 2010)<br />

31


6.4.2 Analýza klíčových slov a textu webu skautjevisovice.estranky.cz<br />

Orientační počet slov na stránce je 130. Stránka obsahuje velice málo slov.<br />

Tabulka 2: Nejčetnější slova stránky webu Skauta Jevišovice<br />

Slovo Výskytů Zastoupení v %<br />

středisko 3 2,27<br />

jevišovická 3 2,27<br />

jevišovice 3 2,27<br />

akce 3 2,27<br />

čr středisko 2 1,51<br />

svaz skautů 2 1,51<br />

středisko jevišovice 2 1,51<br />

skautek čr 2 1,51<br />

<strong>pro</strong>běhlé akce 2 1,51<br />

anebo 2 1,51<br />

skaut 1 0,57<br />

rodiče 0 0<br />

hry 0 0<br />

děti 0 0<br />

Zdroj: práce autora (7. 4. 2010)<br />

6.4.3 Analýza klíčových slov a textu webu orlice.abahoa.cz<br />

Orientační počet slov na stránce je 1080.<br />

Tabulka 3: Nejčetnější slova stránky webu Junáka M. Budějovice<br />

Slovo Výskytů zastoupení v %<br />

akce 18 1,67<br />

2009 18 1,67<br />

2010 13 1,21<br />

orlice 11 1,02<br />

rubrika akce 10 0,93<br />

abahoa 10 0,93<br />

orlice abahoa 9 0,83<br />

http orlice 9 0,83<br />

rodiče 3 0,21<br />

junák 3 0,21<br />

hry 2 0,14<br />

děti 1 0,07<br />

Zdroj: práce autora (7. 4. 2010)<br />

32


6.5 Výsledky analýz zdrojového kódu<br />

6.5.1 Analýza zdrojového kódu webu koprivnice.pionyr.cz<br />

Celkové hodnocení: 69 %<br />

Příliš mnoho klíčových slov - děti, mládež, volný čas, víkendy, tábory, Kopřivnice,<br />

Olbramkostel, Sedmikvítek, Porta, Pionýr<br />

Chybí soubor robots.txt.<br />

Zdrojový kód má optimální velikost. Příliš velká stránka zatěžuje vyhledávač stahováním<br />

přebytečných dat, a ten pak těžko určuje relevantní obsah. Navíc ho návštěvníci dlouho<br />

stahují. Celková velikost HTML kódu: 14 kB. Stránka obsahuje 56 html chyb. Stránka<br />

by měla být validní a bez chyb, jinak se nemusí správně popř. vůbec zobrazit u uživatele.<br />

Stránka obsahuje příliš mnoho inline vložených CSS stylů, které by měly být ve zvláštním<br />

souboru. Velikost v CSS navíc: 1.97 kB<br />

Sémantika a přístupnost. Stránka neobsahuje vnořené tabulky. Netextové elementy mají<br />

alternativní obsah. Na stránce dochází k míchání sémantického zvýrazňování s fyzickým<br />

formátováním. Použité nesémantické značky: b. Stránka nemá strukturovaný text<br />

do odstavců. Řešením může být - zpřehlednit obsah použitím odstavců.<br />

6.5.2 Analýza zdrojového kódu webu skautjevisovice.estranky.cz<br />

Celkové hodnocení: 67 %<br />

Klíčová slova - Skaut, Jevišovice, Junák, skautský oddíl, tábor<br />

Chybí soubor robots.txt.<br />

Zdrojový kód má optimální velikost. Příliš velká stránka zatěžuje vyhledávač stahováním<br />

přebytečných dat, a ten pak těžko určuje relevantní obsah. Navíc ho návštěvníci dlouho<br />

stahují. Celková velikost HTML kódu: 7 kB. Stránka obsahuje 5 html chyb. Stránka<br />

by měla být validní a bez chyb, jinak se nemusí správně popř. vůbec zobrazit u uživatele.<br />

Stránka obsahuje příliš mnoho inline vložených CSS stylů, které by měly být ve zvláštním<br />

souboru. Velikost v CSS navíc: 0.06 kB<br />

33


Sémantika a přístupnost. Stránka neobsahuje vnořené tabulky. Netextové elementy mají<br />

alternativní obsah. Na stránce dochází k míchání sémantického zvýrazňování s fyzickým<br />

formátováním. Použité nesémantické značky: center. Text je kvalitně strukturovaný<br />

do odstavců.<br />

6.5.3 Analýza zdrojového kódu webu orlice.abahoa.cz<br />

Celkové hodnocení: 75 %<br />

Klíčová slova – neuvedena<br />

Chybí soubor robots.txt.<br />

Zdrojový kód má optimální velikost. Příliš velká stránka zatěžuje vyhledávač stahováním<br />

přebytečných dat, a ten pak těžko určuje relevantní obsah. Navíc ho návštěvníci dlouho<br />

stahují. Celková velikost HTML kódu: 28 kB. Stránka je validní podle deklarovaného<br />

XHTML 1.0 Transitional. Stránka obsahuje inline vložené CSS styly, které by měly být<br />

ve zvláštním souboru. Velikost v CSS navíc: 0.37 kB<br />

Sémantika a přístupnost. Stránka neobsahuje vnořené tabulky. Netextové elementy mají<br />

alternativní obsah. Na stránce dochází k míchání sémantického zvýrazňování s fyzickým<br />

formátováním. Použité nesémantické značky: center. Text je kvalitně strukturovaný<br />

do odstavců.<br />

6.6 Výsledky analýz síly webu<br />

6.6.1 Síla webu koprivnice.pionyr.cz<br />

Celková síla webu: 52 %<br />

Webová stránka Pionýr Kopřivnice je XHTML 1.0 Strict validní.<br />

Srank testované stránky: 50/100. Google Pagerank testované stránky: 3/10.<br />

Umístění webové stránky na Seznamu po zadání prvních 4 slov titulku: 1. (10/10)<br />

Umístění webové stránky na Google po zadání prvních 4 slov titulku: 1. (10/10)<br />

Počet zpětných odkazů vedoucích na testovanou doménu: 52. (3/10)<br />

Stáří testované domény: 4.162 dnů. (10/10)<br />

34


6.6.2 Síla webu skautjevisovice.estranky.cz<br />

Celková síla webu: 37 %<br />

Webová stránka Skaut Jevišovice je XHTML 1.0 Transitional validní.<br />

Srank testované stránky: 40/100. Google Pagerank testované stránky: 2/10.<br />

Umístění webové stránky na Seznamu po zadání prvních 4 slov titulku: 25. (1/10)<br />

Umístění webové stránky na Google po zadání prvních 4 slov titulku: 34. (1/10)<br />

Počet zpětných odkazů vedoucích na testovanou doménu: 13. (2/10)<br />

Stáří testované domény: 2.187 dnů. (10/10)<br />

6.6.3 Síla webu orlice.abahoa.cz<br />

Celková síla webu: 48 %<br />

Webová stránka Junák Moravské Budějovice je XHTML 1.0 Transitional validní.<br />

Srank testované stránky: 40/100. Google Pagerank testované stránky: 0/10.<br />

Umístění webové stránky na Seznamu po zadání prvních 4 slov titulku: 2. (8/10)<br />

Umístění webové stránky na Google po zadání prvních 4 slov titulku: 2. (8/10)<br />

Počet zpětných odkazů vedoucích na testovanou doménu: 3.549. (6/10)<br />

Stáří testované domény: 3.381 dnů. (10/10)<br />

Srank je algoritmus <strong>pro</strong> ohodnocení důležitosti <strong>webových</strong> <strong>stránek</strong>, tvořící základ<br />

vyhledávače Seznam. PageRank je algoritmus <strong>pro</strong> ohodnocení důležitosti <strong>webových</strong><br />

<strong>stránek</strong>, tvořící základ vyhledávače Google.<br />

35


6.7 Výsledky analýz pozice ve vyhledávačích<br />

6.7.1 Analýza pozice ve vyhledávačích webu koprivnice.pionyr.cz<br />

Tabulka 4: Pozice ve vyhledávačích na hledané slovo: pionýr<br />

Vyhledávač Pozice Odkaz vyhledávače<br />

Google Nenalezeno<br />

Bing 13 Dětská organizace - Pionýr Kopřivnice<br />

Jyxo Nenalezeno<br />

Seznam 7 Dětská organizace - Pionýr Kopřivnice<br />

Morfeo 7 Dětská organizace - Pionýr Kopřivnice<br />

Zdroj: práce autora (7. 4. 2010)<br />

6.7.2 Analýza pozice ve vyhledávačích webu skautjevisovice.estranky.cz<br />

Tabulka 5: Pozice ve vyhledávačích na hledané slovo: skaut<br />

Vyhledávač Pozice Odkaz vyhledávače<br />

Google Nenalezeno<br />

Bing Nenalezeno<br />

Jyxo Nenalezeno<br />

Seznam Nenalezeno<br />

Morfeo Nenalezeno<br />

Zdroj: práce autora (7. 4. 2010)<br />

6.7.3 Analýza pozice ve vyhledávačích webu orlice.abahoa.cz<br />

Tabulka 6: Pozice ve vyhledávačích na hledané slovo: junák<br />

Vyhledávač Pozice Odkaz vyhledávače<br />

Google 74<br />

Skautský svět - Junák - svaz skautů a<br />

skautek ČR, středisko ...<br />

Bing Nenalezeno<br />

Jyxo 99<br />

Roverská přespávačka Skautský svět -<br />

Junák...<br />

Seznam Nenalezeno<br />

Morfeo 26<br />

Skautský svět - Junák - svaz skautů a<br />

skautek ČR, středisko Moravské Budějovice<br />

Zdroj: práce autora (7. 4. 2010)<br />

36


6.8 Vyhodnocení <strong>pro</strong>vedených analýz<br />

V následujících podkapitolách jsem <strong>pro</strong>vedl vyhodnocení výsledků analýz.<br />

6.8.1 Vyhodnocení na základě analýz klíčových slov<br />

Podle výsledků tabulky č. 1. v kapitole 6.4.1 se na analyzované domovské stránce Pionýr<br />

Kopřivnice nevyskytlo žádné sledované slovo hry, děti, rodiče ani akce. Byl zde<br />

zaznamenán výskyt slova pionýr a náznak <strong>pro</strong>pagace zimního tábora. Na základě<br />

této analýzy lze předpokládat, že web patří pionýrské <strong>organizaci</strong>.<br />

Podle tabulky výskytů č. 2. v kapitole 6.4.2 se na domovské stránce Skaut Jevišovice<br />

nevyskytlo žádné sledované slovo hry, děti, rodiče. Byl zde ale zaznamenán výskyt slova<br />

skaut (i v jiných podobách) a akce. Dle výskytu slov blízkých skautu je tedy<br />

pravděpodobné, že stránky patří skautské <strong>organizaci</strong>, která pravděpodobně <strong>pro</strong>paguje svoje<br />

akce.<br />

Na domovské stránce Junák Moravské Budějovice podle tabulky výskytů č. 3. v kapitole<br />

6.4.3 se slovo akce velmi používá a také se nejlépe umístilo. Junák, hry, děti a rodiče mají<br />

také své zastoupení v četnostech. Podle těchto výsledků se dá nyní celkem logicky<br />

usuzovat, že stránky, které jsou analyzovány, pravděpodobně patří <strong>organizaci</strong> junáka, který<br />

ve své <strong>pro</strong>pagaci na akce, hry, děti ani rodiče nezapomněl. Stejně tak nezapomněl<br />

na <strong>pro</strong>pagaci své vlastní organizace.<br />

Na základě analýz klíčových slov, které byly <strong>pro</strong>vedeny 7. 4. 2010, je nejlépe hodnocena<br />

webová stránka Junáka Moravské Budějovice.<br />

6.8.2 Vyhodnocení na základě analýz zdrojových kódů<br />

Zde se nejlépe umístila webová stránka Junák Moravské Budějovice s hodnotou 75 %.<br />

Za ní se umístila webová stránka Pionýr Kopřivnice s hodnotou 69 % a také webová<br />

stránka Skaut Jevišovice s hodnotou 67 %. Analýzy zdrojových kódů byly <strong>pro</strong>vedeny<br />

7. 4. 2010.<br />

37


6.8.3 Vyhodnocení na základě analýz síly webu<br />

Zde se nejlépe umístila, webová stránka Pionýra Kopřivnice s hodnotou 52 %, tato stránka<br />

je validní podle XHTML 1.0 Strict. Za ní se umístila webová stránka Junáka Moravské<br />

Budějovice s hodnotou 48 %, tato stránka je validní podle XHTML 1.0 Transitional.<br />

I webová stránka Skauta Jevišovice s hodnotou 37 %, tato stránka je validní podle<br />

XHTML 1.0 Transitional. Analýzy síly webů byly <strong>pro</strong>vedeny 28. 4. 2010.<br />

Web Pionýra Kopřivnice byl vyhodnocen nejlépe v umístění webové stránky na Seznamu<br />

i na Google po zadání prvních 4 slov titulku. Zde se velmi vysoko umístil i web Junáka<br />

Moravské Budějovice. V počtu zpětných odkazů vedoucích na testovanou doménu byl<br />

nejlépe vyhodnocen web Junáka Moravské Budějovice. Hodnota Srank byla průměrná<br />

na všech testovaných <strong>webových</strong> stránkách. Hodnota PageRank nebyla u webu Junáka<br />

Moravské Budějovice vyhodnocena. U zbývajících webů má průměrnou hodnotu.<br />

6.8.4 Vyhodnocení validace - porovnání<br />

Validace je <strong>pro</strong>ces, při kterém jsou dokumenty ověřovány <strong>pro</strong>ti příslušným DTD<br />

(Document Type Definition). Zajišťuje, že struktura, použití elementů a atributů<br />

v dokumentech je ve shodě s definicemi v DTD, na které je odkaz v DOCTYPE. DTD<br />

obsahuje soubor pravidel, ta definují syntaxi, jaké elementy, atributy lze používat,<br />

možnosti jejich vzájemného zanoření, typ obsahu, jaké atributy jsou povoleny<br />

<strong>pro</strong> konkrétní elementy apod. Zjednodušeně řečeno, DTD jsou pravidla, jak může<br />

dokument vypadat a slouží i jako instrukce <strong>pro</strong> <strong>pro</strong>hlížeč, jak s dokumentem pracovat.<br />

Proces ověřování, zda dokument skutečně ctí pravidla <strong>pro</strong> daný jazyk, se nazývá validace<br />

a nástroj k ní užívaný je validátor. Dokument, který úspěšně <strong>pro</strong>jde validací, je validní.<br />

Z toho důvodu jsem <strong>pro</strong>vedl analýzu <strong>pro</strong>střednictvím http://validator.w3.cz/.<br />

Dokument http://koprivnice.pionyr.cz/ ne<strong>pro</strong>šel validací, 14 chyb a 66 varování. Stránka<br />

není validní XHTML 1.0 Strict. Dokument http://www.skautjevisovice.estranky.cz/<br />

ne<strong>pro</strong>šel validací, 13 chyb a 38 varování. Stránka není validní XHTML 1.0 Transitional.<br />

Dokument http://orlice.abahoa.cz/ ne<strong>pro</strong>šel validací, 3 chyby a 32 varování. Stránka není<br />

validní XHTML 1.0 Transitional.<br />

38


Nevalidní stránka může mít tu podstatnou vadu, že spoléhá na opravy chyb v <strong>pro</strong>hlížečích.<br />

Různé <strong>pro</strong>hlížeče (Internet Explorer, Firefox, Opera) mohou opravovat různý chybný kód<br />

různě a na výsledek se tudíž nelze tolik spoléhat. To je případ dokumentu<br />

http://orlice.abahoa.cz/, který byl vyhodnocen v analýze <strong>pro</strong>střednictvím http://www-seoservis.cz<br />

jako validní, ale <strong>pro</strong>střednictvím http://validator.w3.cz/ jako nevalidní.<br />

6.8.5 Vyhodnocení na základě analýzy pozice ve vyhledávačích<br />

Na základě analýzy pozice ve vyhledávačích jsem objevil, vážný <strong>pro</strong>blém u webu Skaut<br />

Jevišovice. Z tabulky č. 5. v kapitole 6.7.2 je patrné, že tento web není indexován<br />

v hlavních vyhledávačích jako Google, Seznam, Bing, Morfeo a Jyxo na hledané klíčové<br />

slovo skaut. Špatně nebo vůbec indexovaný web na Internetu nikdo nenajde.<br />

Web Pionýr Kopřivnice má podle tabulky č. 4. v kapitole 6.7.1 na hledané klíčové slovo<br />

pionýr velice silnou pozici ve vyhledávači Seznam, Morfeo a Bing. Ve vyhledávačích<br />

Google a Jyxo však žádnou pozici nemá.<br />

Web Junák Moravské Budějovice má podle tabulky č. 6. v kapitole 6.7.3 na hledané<br />

klíčové slovo junák slušnou pozici ve vyhledávači Morfeo. Má dále i pozici<br />

ve vyhledávačích Google a Jyxo. Ve vyhledávačích Seznam a Bing však žádnou pozici<br />

nemá.<br />

Řešením zjištěných nedostatků u všech webů by byla např. registrace webu<br />

do Internetových katalogů: Seznam, Atlas, Centrum. Dále podání žádosti o indexaci<br />

na stránkách Google a Jyxo. Jako další postup bych doporučil vybudovat síť zpětných<br />

odkazů na stránky s podobným zaměřením.<br />

Všechny tři weby byly dále analyzovány i na stejná klíčová slova: děti, akce, hry, volný<br />

čas, mládež, organizovaná mládež. Těmito <strong>analýza</strong>mi bylo ale zjištěno, že žádný web není<br />

indexován v hlavních vyhledávačích jako Google, Seznam, Bing, Morfeo a Jyxo na výše<br />

uvedená klíčová slova.<br />

39


6.9 Subjektivní zhodnocení<br />

6.9.1 Subjektivní zhodnocení úvodní stránky webu Pionýra<br />

Obrázek 1: Webová stránka, Pionýr Kopřivnice<br />

Zdroj: PIONÝR KOPŘIVNICE. Úvodní webová stránka. [online].<br />

http://koprivnice.pionyr.cz/ - zaměření <strong>stránek</strong> je zcela zjevné z hlavičky, kde je název<br />

organizace a ilustrační fotka. Stánka obsahuje dně menu: horizontální pod hlavičkou<br />

obsahuje hlavně statické informace o <strong>organizaci</strong>, vertikální menu vpravo je dynamické<br />

a upozorňuje na nejbližší akce a nabízí přímé linky na důležité informace. Dominantní<br />

částí úvodní stránky jsou odkazy na články o uskutečněných akcích, které obsahují<br />

i fotogalerie. Aktualizace informací je dostatečná. Barevné schéma stránky, obzvlášť<br />

kombinace žluté a oranžové, není úplně kontrastní a může působit <strong>pro</strong>blémy zrakově<br />

handicapovaným návštěvníkům. Funkce vyhledávání chybí. Pro formátování <strong>stránek</strong> jsou<br />

použity kaskádové styly.<br />

40


6.9.2 Subjektivní zhodnocení úvodní stránky webu Skauta<br />

Obrázek 2: Webová stránka, Skaut Jevišovice<br />

Zdroj: SKAUT JEVIŠOVICE. Úvodní webová stránka. [online].<br />

http://www.skautjevisovice.estranky.cz/ - vhodně pojatá hlavička, která zcela jasně<br />

ukazuje zaměření <strong>stránek</strong>. Menu se nachází vlevo a nabízí odkazy na aktivity organizace<br />

(minulé i budoucí). Barevné schéma, s ohledem na dětskou <strong>organizaci</strong>, považuji<br />

za nevhodnou. Dominantní hnědá barva nepůsobí příliš optimisticky. Jako nedostatek<br />

hodnotím málo fotografií, které návštěvníka zaujmou. Web působí hodně formálním<br />

dojmem. Stránku lze hodnotit jako minimalistickou. Zdrojový kód je napsaný čistě přes<br />

kaskádové styly s minimem chyb, což zajišťuje systém estranky.cz. Je zde funkce<br />

vyhledávání, kde se využívá systém e<strong>stránek</strong>. Výsledky vyhledávání mě ale moc<br />

nepřesvědčily o užitečnosti a funkčnosti. U tohoto webu je tak malý obsah informací, že<br />

zde funkce vyhledávání snad nemá ani smysl - není totiž co hledat.<br />

41


6.9.3 Subjektivní zhodnocení úvodní stránky webu Junáka<br />

Obrázek 3: Webová stránka, Junák Moravské Budějovice<br />

Zdroj: SKAUTSKÝ SVĚT. Úvodní webová stránka. [online].<br />

http://orlice.abahoa.cz/ - moderní odlehčený design ve světle šedé barvě. Možná trochu<br />

barevného oživení by neškodilo. Vždyť je to web dětské organizace. Kladně hodnotím širší<br />

layout. Hlavička obsahuje i logo mateřské organizace, což jasně ukazuje příslušnost k<br />

Junákům. Menu jsou vertikální a nachází se vpravo i vlevo. Jedná se o tří sloupcový layout<br />

<strong>stránek</strong>. Odkazy z něj vedou na očekávané informace o <strong>organizaci</strong> a její aktivitě. Vypadá<br />

to, že stránky jsou aktualizovány často, což je velký klad. Opět by asi neuškodily nějaké<br />

fotky, byť malé náhledy. Funkce vyhledávání chybí. Zdrojový kód je napsán čistě, zřejmě<br />

je zde nasazen systém Wordpress.<br />

Webové stránky Junáka Moravské Budějovice i Pionýra Kopřivnice dopadly velmi dobře<br />

ve všech analyzovaných kategoriích. Tyto stránky se tedy mohou stát dobrým zdrojem<br />

inspirace <strong>pro</strong> vlastní návrh <strong>webových</strong> <strong>stránek</strong> naší organizace.<br />

42


7 Vlastní návrh www <strong>stránek</strong><br />

Vlastní návrh jsem rozdělil na 2 části. Na strukturální a grafickou část<br />

7.1 Strukturální část<br />

Na úvodní stránce je jako obrázek znázorněno oficiální logo pionýra, s názvem Pionýr<br />

Jevišovice, který bude <strong>pro</strong>veden modrou barvou a bude umístěn nad logem. Pod logem<br />

bude přivítání návštěvníka na webu dětské organizace Pionýr Jevišovice, tento nápis bude<br />

<strong>pro</strong>veden červenou barvou. Pozadí zůstane bílé, z důvodu symboliky národní trikolóry.<br />

Dále zde budou umístěny dva odkazy. Normální verze <strong>stránek</strong> a mobilní verze <strong>stránek</strong> <strong>pro</strong><br />

mobilní zařízení.<br />

Obrázek 4: Úvodní stránka navrhovaného webu www.jevisovice.pionyr.cz<br />

Zdroj: vlastní návrh autora<br />

43


7.1.1 Verze <strong>pro</strong> mobily<br />

V dnešní moderní době, kdy se internet běžně rozšiřuje i do mobilních zařízení, je potřeba<br />

při vytváření webu myslet i na tato mobilní zařízení a přemýšlet už trošku do budoucnosti,<br />

<strong>pro</strong>tože zobrazovací display mobilu má daleko menší rozlišení (počet zobrazovacích bodů)<br />

než klasické monitory. Proto musí vývojář webu pamatovat na to, aby tuto verzi <strong>stránek</strong><br />

přizpůsobil tak, aby i <strong>pro</strong> uživatele s mobilními zařízeními bylo <strong>pro</strong>hlížení jeho <strong>stránek</strong><br />

přívětivé. Časté a zdlouhavé posunování do stran je totiž nepohodlné (s posunováním<br />

nahoru a dolů se počítá).<br />

Srovnáme-li například obrazovku běžného stolního počítače s monitorem o rozlišení 1280<br />

x 1024 obrazových bodů a mobilní telefon s rozlišením 240 x 320 obrazových bodů,<br />

je zřejmé, že to, co se bez <strong>pro</strong>blémů zobrazí najednou na počítači, bude se muset na mobilu<br />

zobrazit pomocí posunování. Cílem je tedy napsat stránky s verzí <strong>pro</strong> mobily tak,<br />

aby uživatel přihlášený na web <strong>pro</strong>střednictvím mobilního telefonu nemusel pokud možno<br />

posunovat do stran vůbec a jen si plynule <strong>pro</strong>hlížel obsah <strong>stránek</strong> ze shora dolů.<br />

Pokud na webové stránce není k dispozici verze <strong>stránek</strong> <strong>pro</strong> mobily, pak se uživateli<br />

na mobilu zobrazí klasická verze <strong>stránek</strong> ve velkém rozlišení a bude muset pravděpodobně<br />

hodně posunovat do strany, <strong>pro</strong>tože klasická verze <strong>stránek</strong> <strong>pro</strong>zatím nepočítá<br />

s tím, že stránky budou <strong>pro</strong>hlíženy zařízením s nízkým rozlišením displeje, jakým je třeba<br />

mobilní telefon.<br />

Obě verze jsou obsahově totožné, liší se pouze uspořádáním obsahu na stránkách. Z tohoto<br />

důvodu budu v následujícím textu hovořit o popisu normální verze <strong>stránek</strong>.<br />

Domovská stránka webu Pionýr Jevišovice bude rozdělena do samostatných sekcí, které se<br />

volí z hlavního menu, tvořeného sadou tlačítek v horní části okna. V levém horním rohu<br />

okna bude umístěno loga Pionýra. Na úvodní stránce bude vytvořen text, který<br />

v minimálním rozsahu představí dětskou <strong>organizaci</strong> s uvítacím oslovením návštěvníka<br />

těchto <strong>stránek</strong>. Má představa je následující – Dobrý den vítejte na stránkách dětské<br />

organizace.<br />

44


Hlavní stránka webu bude strukturálně rozdělena do více částí (panelů):<br />

Hlavní titulní banner nahoře přes celou šířku stránky – obsah zleva: logo Pionýra, titulní<br />

text (např. Pionýr Jevišovice)<br />

Navigace (menu) – jsou 2 možnosti: horizontální (umístěné pod titulním bannerem)<br />

nebo vertikální (umístěné ve sloupci vlevo – začíná už pod titulním bannerem –<br />

v případě toho typu menu se pod položkami dá umístit formulář <strong>pro</strong> vyhledávání<br />

na stránkách)<br />

Reklamní sponzorský banner – umístěn ve sloupci napravo<br />

Plocha <strong>pro</strong> konkrétní stránku, která se mění podle zvoleného záznamu v menu<br />

(pokud se zvolí vertikální menu, pak bude umístěna mezi sloupcem menu<br />

a reklamním sloupcem, pokud bude menu horizontální, pak bude umístěna u levého<br />

okraje)<br />

Počítadlo návštěv, datum poslední aktualizace – umístěno bude až dole pod<br />

veškerým obsahem, <strong>pro</strong>tože to není nijak důležitá informace.<br />

Z úvodní stránky bude přes hlavní menu možné přejít do dalších sekcí<br />

O nás<br />

Fotogalerie<br />

Schůzky<br />

Diskusní fórum<br />

Kontakty<br />

7.1.2 Sekce O nás<br />

Po otevření okna O nás se zobrazí informace, které jsou zobrazeny jako souvislý text<br />

a členěny do odstavců k jednotlivým tématům. Tyto informace musí návštěvníkům podat<br />

základní informace o naší <strong>organizaci</strong>. Bude to výběr textu, který je uveden v kapitole 5<br />

a kapitole 5.1 této bakalářské práce (zde je dětská organizace představena).<br />

45


7.1.3 Sekce Fotogalerie<br />

Po otevření okna se objeví volba Nabídka fotek z akcí a Hledání podle zadaných<br />

parametrů, které se otevřou ve stejném okně. Po volbě Nabídka fotek z akcí se v okně<br />

otevře seznam uskutečněných akcí s možností filtrovat podle zadaných parametrů. Seznam<br />

akcí je <strong>pro</strong>veden po jednotlivých řádcích, které představují jednotlivé nabízené fotografie<br />

z akcí. Po kliknutí na jednotlivý řádek se otevře prezentace s fotografiemi zobrazenými<br />

v náhledu, po kliknutí na náhled se otevře vlastní okno se zvětšenou fotografií a s možností<br />

listovat ve fotografiích a s možností zavřít okno. Detailní výpis informací má možnost<br />

volby Zpět <strong>pro</strong> návrat na seznam akcí.<br />

Další možností je, že po zobrazení sekce se uživateli nabídne seznam akcí, které obsahují<br />

fotografie. Seznam bych volil seřazený od nejnovější po nejstarší, přičemž zobrazeno bude<br />

pouze např. 3-5 nejnovějších akcí; další starší budou dostupné např. pod odkazem archiv<br />

fotografií. Po kliknutí na odkaz akce se pod seznamem akcí zobrazí fotografie společně<br />

s navigačními tlačítky <strong>pro</strong> přesun na předchozí/další, první/poslední fotografii.<br />

7.1.4 Sekce Schůzky<br />

Po otevření okna Schůzky se zobrazí informace o možnostech navštívit <strong>pro</strong>pagovanou<br />

schůzku. Zde bude napsán termín, datum konání schůzky a činnost nebo aktivita, která<br />

se bude na samotné schůzce <strong>pro</strong>vádět. Nejlépe plánovat schůzky měsíc dopředu, aby<br />

si návštěvník našich <strong>stránek</strong>, stejně tak i náš člen mohl udělat představu o naší plánované<br />

činnosti.<br />

7.1.5 Sekce Diskuse<br />

Po otevření okna z hlavního menu s volbou Diskuse se otevře v okně přehled<br />

diskutovaných témat s možností podrobného výpisu příspěvků k jednotlivým tématům.<br />

Součástí okna Diskuse je volba Vstup do diskuse <strong>pro</strong> založení nového tématu, po zobrazení<br />

podrobného výpisu diskusních příspěvků je možné vkládat k jednotlivým příspěvkům<br />

odpovědi. V obou případech se otevře vkládací diskusní formulář <strong>pro</strong> zadání jména,<br />

případně emailové adresy a textu příspěvku. K jednotlivým příspěvkům má administrátor<br />

pomocí vlastního přístupu možnost vkládat odpovědi jménem dětské organizace a tyto<br />

odpovědi jsou graficky zvýrazněné. Administrátor bude mít také možnost nevhodné,<br />

46


především vulgární, osobní útoky na jednotlivce, nebo příspěvky diskreditující z diskuze<br />

vyjmout, tak jak je obvyklé na mnoha slušných diskusních fórech. Ten kdo se účastní<br />

diskuse, musí dodržet základní podmínky, které budou vymezeny úvodním textem diskuse.<br />

Tyto příspěvky mohou zefektivnit komunikaci mezi občany a organizací.<br />

7.1.6 Sekce Kontakty<br />

Po otevření okna Kontakt se zobrazí základní osobní informace o dobrovolných<br />

pracovnících dětské organizace Pionýr Jevišovice s jejich telefonním číslem a emailovou<br />

adresou. Dále se zde zobrazí i poštovní adresa sídla dětské organizace Pionýr Jevišovice<br />

a adresa klubovny.<br />

7.2 Grafická část<br />

Základní grafické schéma <strong>webových</strong> <strong>stránek</strong> bude vycházet z motivu loga Pionýr, které<br />

bude ve formě vodoznaku použito jako pozadí v otvíraných oknech. Barevné ladění celých<br />

<strong>stránek</strong> bude do světle modré, v kombinaci s bílou a černým textem.<br />

V tiráži, zobrazované v každém okně, bude uvedeno počítadlo návštěv <strong>webových</strong> <strong>stránek</strong><br />

a datum poslední celkové aktualizace <strong>stránek</strong>. Toto datum se aktualizuje podle aktuálního<br />

data přístupu přes administrátorský vstup do kterékoliv sekce <strong>webových</strong> <strong>stránek</strong>. Správce<br />

<strong>stránek</strong> bude mít možnost přístupu přes administrátorský vstup do všech sekcí <strong>stránek</strong>,<br />

s možností zadávání nabídky a vkládání fotografií do sekce Fotogalerie, vkládání odpovědí<br />

do diskusní sekce, případně změny a aktualizace textových informací v ostatních sekcích.<br />

47


7.2.1 Znak<br />

Tato kruhová stylizace znázorňuje planetu Zemi a vyjadřuje demokratický princip rovnosti<br />

práv a povinností členů Pionýra. Tvar znaku připomíná list národního stromu lípy.<br />

Vlaštovka je symbolem štěstí a jara, počátku nového života. Směr letu vzhůru znamená<br />

úsilí o naplnění ideálů Pionýra, pokrok a poznávání. Bílá barva spolu s červenou a modrou<br />

barvou národní trikolóry zdůrazňuje i myšlenku vlastenectví a občanství. Převažující bílá<br />

symbolizuje pravdu, mír a naději.<br />

Obrázek 5: Oficiální logo dětské organizace Pionýr<br />

Zdroj: PIONÝR.cz, grafické podklady Pionýra [online].<br />

7.3 Výběr domény a hostingu<br />

Nyní je důležité, když už máme navrhnutý web a strukturu webového sídla rozhodnout,<br />

kde budeme své stránky hostovat a zda nám stačí freehosting s doménou třetího řádu,<br />

nebo zvolíme placený webhosting s <strong>pro</strong>fesionálními službami.<br />

Freehostingy (domény třetího řádu) se staly v poslední době velmi oblíbenými. Především<br />

z toho důvodu, že cena služby je zdarma. Druhým faktorem je také rychlost,<br />

po zaregistrování můžete ihned spustit svůj nový web. Má ale i řadu nevýhod (např. slabá<br />

technická podpora).<br />

48


7.3.1 Vlastní doména<br />

Řešením je vlastní doména. Výše ceny se odvíjí od zvolené TLD (Top-Level Domain -<br />

doména nejvyšší úrovně - například .cz, .com nebo .net). Snadno zapamatovatelná doména<br />

je velkou výhodou.<br />

Rozeznáváme tyto typy domén:<br />

Doména I. řádu: Jedná se o nejvyšší úroveň domén. Top-level doménu (TLD) neboli<br />

národní doménu. Pro Česko je to .CZ, <strong>pro</strong> další státy například Slovensko je to .SK.<br />

Doména II. řádu: CZ doména II. řádu je doména ve tvaru například pionyr.cz.<br />

Doména III. řádu neboli subdoména: Subdoména je rozšíření doménového názvu o další<br />

úroveň. Je ve tvaru např. Jevišovice.pionyr.cz, kde Jevišovice je název domény III. řádu.<br />

Subdomény je možné vytvářet u domén II. řádu. Za domény III. řádu se správci domény<br />

zpravidla již neplatí.<br />

7.3.2 Další možnosti<br />

Jednou z dalších možností prezentace organizace je zvolit si tvorbu www <strong>stránek</strong><br />

na serveru e<strong>stránek</strong>.cz. Zde je možné si vytvořit vlastní prezentaci do předem vytvořených<br />

šablon. Do těchto šablon si můžeme sami vložit to, co potřebujeme. Jedná se o navržené<br />

stránky s jednoduchým ovládáním. Design je vytvořen <strong>pro</strong>fesionálními grafiky a je pouze<br />

na uživateli, jaký vzhled z nabízených šablon si vybere a které z navrhovaných funkcí<br />

ke své prezentaci využije.<br />

Zdarma nabízí estránky <strong>pro</strong> zájemce o web 100 MB <strong>pro</strong>storu. Přenos 1 GB za měsíc.<br />

Je zde, ale vložená reklama <strong>pro</strong>vozovatele a není určen firmám. Pro potřeby dětské<br />

organizace se dá plně využít. Pro nekomerční účely navíc nabízí zámek <strong>stránek</strong>, vlastní css<br />

a úpravu xhtml. Přenos 5 GB za měsíc. 1 GB <strong>pro</strong>storu. Přístup je zde umožněn přes FTP.<br />

Je bez reklam <strong>pro</strong>vozovatele a nelze umístit cizí reklamu. Cena 420,- Kč za rok (bez DPH<br />

20%). Pro komerční účely o<strong>pro</strong>ti nekomerčním účelům lze umístit cizí reklamu. Také<br />

nabízí větší kapacitu - 5 GB <strong>pro</strong>storu a přenos 10 GB / měsíc. Cena 1500,- Kč za rok (bez<br />

DPH 20%).<br />

Jako další možnost se nabízí vytvořit prezentaci v systému CMS. Po úspěšné instalaci není<br />

potřeba zasahovat do zdrojového kódu webové stránky. CMS je zkratka z anglických slov<br />

Content Management Systém, což v doslovném překladu znamená systém <strong>pro</strong> správu<br />

obsahu. Častěji se používá termín redakční systém. Redakční systém je <strong>pro</strong>gram, který<br />

49


umožňuje jednoduše vytvářet obsah <strong>stránek</strong> bez zásahu do zdrojového kódu stránky.<br />

Vzhled si vyberete pomocí tzv. šablony a do této šablony je pak převeden vytvořený obsah<br />

textu článku, ale i obrázky. Změna vzhledu webového sídla pak spočívá ve výměně<br />

šablony, na obsah pak nemusíte sáhnout, je přizpůsoben novému vzhledu automaticky.<br />

Redakční systém je pak určen také začátečníkům, neboť vkládání obsahu se podobá práci<br />

s textovým editorem, což lze v dnešní době považovat za nutné minimum každého<br />

uživatele osobního počítače. S redakčním systémem také nejste vázáni na konkrétní<br />

operační systém, vše se ovládá pomocí standardního internetového <strong>pro</strong>hlížeče. Mezi známé<br />

představitele CMS systémů patří Joomla, která podporuje používání českého <strong>pro</strong>středí,<br />

ale také umožňuje vkládat obsah článků v češtině, případně vytvářet obsah i ve více<br />

jazycích. Mezi další představitele patří Drupal, který má snadnou rozšiřitelnost pomocí<br />

modulů a navíc je zdarma i se zdrojovými kódy.<br />

Co je tedy šablona A jakou má funkci Jednou z hlavních výhod redakčních systémů<br />

je to, že ten, kdo zadává obsah - články, zprávy, dokumentaci apod., se nemusí starat o to,<br />

kam se daný článek vloží a jak zapadne do celkové koncepce <strong>stránek</strong>. O to se starají<br />

zmiňované šablony. Jedná se o jakýsi předpis vzhledu, který říká, kde a jak bude umístěno<br />

logo <strong>stránek</strong>, co se kde bude vypisovat apod.<br />

7.3.3 Naše cesta<br />

Vzhledem k tomu, že naše dětská organizace je součástí organizace Pionýr, která vlastní<br />

doménu druhého řádu i hosting je <strong>pro</strong> nás nejlepší a zároveň i nejlevnějším řešením využít<br />

možnosti zřízení domény tak i hostingu u své domovské organizace.<br />

Zřízením domény 3. řádu na serveru pionyr.cz získá naše organizace tyto výhody.<br />

Reprezentativní i lehce zapamatovatelná adresa <strong>stránek</strong> ve formátu: jevisovice.pionyr.cz.<br />

Bezplatný hosting a všechny služby s tím související. Vlastní FTP s <strong>pro</strong>storem 500 MB.<br />

Možnost zřízení až pěti e-mailových adres (každá s <strong>pro</strong>storem 20 MB). Možnost zřízení<br />

doménového koše, e-mailových konferencí a vlastní správy databází. Podpora správce<br />

serveru – pracovníka informační technologie Ústředí Pionýra.<br />

FTP (File Transfer Protocol - <strong>pro</strong>tokol <strong>pro</strong> přenos souborů)<br />

50


8 Závěr<br />

Hlavním cílem bakalářské práce bylo pomocí teoretických znalostí <strong>pro</strong>blematiky tvorby<br />

<strong>webových</strong> <strong>stránek</strong> navrhnout funkční a uživatelsky úspěšné webové stránky <strong>pro</strong> dětskou<br />

<strong>neziskovou</strong> <strong>organizaci</strong> Pionýr Jevišovice, která tento druh <strong>pro</strong>pagace a komunikace<br />

v současné době nepoužívá.<br />

Dříve než jsem začal vytvářet vlastní návrh <strong>webových</strong> <strong>stránek</strong>, tak jsem v teoretické části<br />

bakalářské práce vysvětlil základní pojmy, jako jsou nestátní nezisková organizace, typy<br />

neziskových organizací, občanské sdružení a organizace Pionýr. Teoretická část také<br />

popisuje základy tvorby www <strong>stránek</strong>, kde jsou vysvětleny pojmy hierarchie <strong>stránek</strong>,<br />

orientace na stránkách. Je zde popsána důležitost navigace a vyjmenovány samotné prvky<br />

navigace. Dále je zde popsána grafika a design <strong>webových</strong> <strong>stránek</strong>. Vysvětleny důležité<br />

podmínky <strong>pro</strong> splnění správné použitelnosti a přístupnosti <strong>webových</strong> <strong>stránek</strong> <strong>pro</strong> všechny<br />

skupiny uživatelů.<br />

V praktické části jsem nejdříve představil dětskou <strong>organizaci</strong> Pionýr Jevišovice, její<br />

činnost, zaměření a aktivity. Popisuji současný stav organizace a její způsob <strong>pro</strong>pagace<br />

na veřejnosti. Současný způsob <strong>pro</strong>pagace byl vyhodnocen jako nedostačující. Vzhledem<br />

k tomu, že organizace do dnešní doby nepoužívá ke své <strong>pro</strong>pagaci webové stránky, bylo<br />

členy a vedením rozhodnuto, že webové stránky organizace potřebuje. Nejdříve jsem tedy<br />

potřeboval získat představu o tom, jak by měli tyto vlastní stránky vypadat, jaké mají mít<br />

prvky a <strong>pro</strong>středky. Z toho důvodu bylo využito řady dostupných analýz, které byly<br />

<strong>pro</strong>vedeny na třech vybraných webech dětských organizací. Provedl jsem analýzy webů<br />

Pionýr Kopřivnice, Skaut Jevišovice a Junák Moravské Budějovice. Na těchto <strong>webových</strong><br />

stránkách byly postupně <strong>pro</strong>vedeny analýzy klíčových slov, zdrojového kódu, síly webu<br />

a pozice ve vyhledávačích. Webové stránky byly také na závěr analýz podrobeny<br />

subjektivní analýze. Všechny tyto analýzy byly porovnány a vyhodnoceny. V některých<br />

případech jsem uvedl i návrhy a doporučení na zlepšení zjištěné situace. Především jsem<br />

si díky zjištěným výsledkům analýz udělal jednotnější představu o webu, který jsem chtěl<br />

navrhovat, získal jsem inspiraci a motivaci. Z některých chyb jsem se poučil, abych tyto<br />

chyby konkurence neopakoval při vlastním návrhu <strong>webových</strong> <strong>stránek</strong>.<br />

51


Poslední kapitola praktické části obsahuje vlastní návrh internetové prezentace dětské<br />

organizace Pionýr Jevišovice. Tento návrh byl motivován některými pozitivními výsledky<br />

<strong>pro</strong>vedených analýz. Nyní tedy má organizace reálnou představu o tom, jak mají vlastní<br />

webové stránky vypadat. Je zde předložen návrh, který po konzultaci s odborníkem bude<br />

uveden do <strong>pro</strong>vozu na hostingu www.pionyr.cz.<br />

Co nám mohou vytvořené webové stránky v budoucnu přinést Jaký užitek a jaké výhody<br />

Mezi první bych zařadil to, že se dostaneme především do povědomí více lidí. Organizace<br />

má totiž možnost <strong>pro</strong>střednictvím svého webu komunikovat s širokou veřejností velmi<br />

jednoduchou a nenásilnou formou. Publikováním článků z akcí a činností přináší<br />

náhodným návštěvníkům <strong>stránek</strong> obrázek o naší dobrovolnické práci s dětmi. Vzniká<br />

tak širší povědomí o naší <strong>organizaci</strong>.<br />

Tato <strong>pro</strong>pagace publikováním článků a následným hodnocením dětí umístěná na vlastních<br />

stránkách může přinést úspěch i v podobě různých doporučení a odkazů našich sponzorů,<br />

partnerů, ale i třeba regionálních médií na naši webovou stránku. Tímto se povědomí o naší<br />

činnosti rozšíří do širšího okolí. Kvalitní webové stránky mohou přinést i nečekaný zisk<br />

<strong>pro</strong> <strong>organizaci</strong>. To se může stát v případě, když jejich obsah zaujme případné nové<br />

zájemce, kteří chtějí sponzorovat a podporovat <strong>neziskovou</strong> <strong>organizaci</strong>.<br />

Pokud budou webové stránky dostatečně kvalitní svojí strukturou i obsahem, tak se časem<br />

budou zobrazovat vysoko ve výsledcích vyhledávání fulltextových vyhledávačů. Už<br />

samotné takové zobrazení jim přinese slušnou publicitu. To může ovlivnit i početnost<br />

samotných přístupů na webovou stránku. Toto je <strong>pro</strong>stě reklama, kterou nemusí organizace<br />

nikde draze platit.<br />

V neposlední řadě nám může přinést nové zájemce o členství v <strong>organizaci</strong>. Svůj význam<br />

bude mít i <strong>pro</strong> samotné členy organizace. Stávající, ale i bývalé členy organizace bude<br />

<strong>pro</strong>střednictvím článků a galerií (fotografií a videí) informovat o uskutečněných, ale<br />

i plánovaných akcích. V budoucnu se <strong>pro</strong> ně samotný web stane hodnotným zdrojem<br />

informací, vzpomínek na dětství a mládí, především v době, kdy se již nebudou sami<br />

aktivně zapojovat do činnosti organizace.<br />

52


9 Použité zdroje<br />

Literatura<br />

BADELT, Ch. Handbuch der Non<strong>pro</strong>fit Organisation,Stutgart: Schäffer-Poeschel, 1997<br />

BOUKAL, V., VÁVROVÁ, H., NOVOTNÝ, J. Ekonomika a řízení neziskových<br />

organizací, 1. vyd. Praha: Oeconomicas, 1998. 103 s. ISBN 80-245-0604-1<br />

DOMES, M. Tvorba www <strong>stránek</strong> <strong>pro</strong> úplné začátečníky, 1.vyd. Brno: Computer Press,<br />

2008. 248 s. ISBN 978-80-251-2160-3<br />

FORET, M. Marketingová komunikace, 1.vyd. Brno: Computer Press, 2006. 443 s. ISBN<br />

80-251-1041-9<br />

FRIČ, P., GOULLI, R. Neziskový sektor v ČR: Výsledky mezinárodního srovnání sektoru<br />

John Hopkins university, 1. vyd. Praha: Eurolex Bohemia, 2001. 203 s. ISBN 80-8643-<br />

204-1.<br />

HANNAGAN, T. J. Marketing <strong>pro</strong> neziskový sektor, 1. vyd. Praha Management Press,<br />

1996. 205 s. ISBN 80-85943-07-7.<br />

KRUG, S. Webdesign : Nenuťte uživatele přemýšlet! 2. aktual. vyd. Brno : Computer<br />

Press, 2006. 168 s. ISBN 80-251-1291-8<br />

LYNCH, P., HORTONOVÁ, S. Základní průvodce webdesignem, 1. vyd. Brno: Zoner<br />

Prees, 2004. 224 s. ISBN 80-86815-05-6.<br />

STRUNK, W., WHITE, E. B. The Element sof Style, Allyn and Bacon 1979<br />

ŠPINAR, D. Tvoříme přístupné webové stránky, 1. vyd. Brno: Zoner Prees, 2004. 360 s.<br />

ISBN 80-86815-11-0.<br />

TOMEŠ, I. a kol., Sociální správa, 1. vyd. Praha: Portál, 2002. 304 s. ISBN 80-7178-560-1<br />

53


TUČKOVÁ, Z. Ekonomika služeb, SVŠE Znojmo 2009 110 s. ISBN 978-8087314-03-6<br />

WILDMANNOVÁ, M., ŠELEŠOVSKÝ, J. a kol. Územní samospráva v ČR, Rakousku a<br />

SRN, 1. vyd. MU Brno: 2001. 139 s. ISBN 80-210-2514-X<br />

Elektronické zdroje<br />

POINÝR.cz. Základní informace o Pionýru. [online]. [cit. 2009-12-23]. Dostupný<br />

z WWW: .<br />

JANOVSKÝ, D. Jak psát web [online]. Poslední revize 2010. [cit. 2009-03-24]. Dostupný<br />

z WWW: .<br />

WEB TVORBA. Přístupnost webu [online]. [cit. 2009-03-24]. Dostupný z WWW:<br />

<br />

PODLAHOVÁ, I. Přístupný web [online]. [cit. 2009-03-26]. Dostupný z WWW:<br />

<br />

PIONÝR KOPŘIVNICE. Úvodní webová stránka. [online]. Poslední revize 2010. [cit.<br />

2009-03-20]. Dostupný z WWW: .<br />

SKAUT JEVIŠOVICE. Úvodní webová stránka. [online]. [cit. 2009-03-20]. Dostupný<br />

z WWW: .<br />

SKAUTSKÝ SVĚT. Úvodní webová stránka. [online]. [cit. 2009-03-20]. Dostupný<br />

z WWW: .<br />

54


Seznam tabulek a obrázků<br />

Seznam tabulek:<br />

Tabulka 1: Nejčetnější slova stránky webu Pionýra Kopřivnice<br />

Tabulka 2: Nejčetnější slova stránky webu Skauta Jevišovice<br />

Tabulka 3: Nejčetnější slova stránky webu Junáka M. Budějovice<br />

Tabulka 4: Pozice ve vyhledávačích na hledané slovo: pionýr<br />

Tabulka 5: Pozice ve vyhledávačích na hledané slovo: skaut<br />

Tabulka 6: Pozice ve vyhledávačích na hledané slovo: junák<br />

Seznam obrázků:<br />

Obrázek 1: Webová stránka, Pionýr Kopřivnice<br />

Obrázek 2: Webová stránka, Skaut Jevišovice<br />

Obrázek 3: Webová stránka, Junák Moravské Budějovice<br />

Obrázek 4: Úvodní stránka navrhovaného webu www.jevisovice.pionyr.cz<br />

Obrázek 5: Oficiální logo dětské organizace Pionýr<br />

55


Seznam použitých zkratek<br />

CMS (Content Management Systém) systém <strong>pro</strong> správu obsahu<br />

FTP (File Transfer Protocol) <strong>pro</strong>tokol <strong>pro</strong> přenos souborů<br />

TLD (Top-Level Domain) doména nejvyšší úrovně<br />

URL (Uniform Resource Locator) termín <strong>pro</strong> adresy na Internetu<br />

WWW (World Wide Web, zkráceně web) ve volném překladu „celosvětová pavučina“<br />

56

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!