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

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

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!