n.likjn'/kij

1. © Dana Vynikarová
1
Moderní prostředky informatiky pro
administrativu, provoz a řízení
III. cvičení
Moderní prostředky informatiky pro administrativu, provoz a řízení
Zásady návrhu a tvorby webových stránek
Monitorování a statistiky webových stránek

2. © Dana Vynikarová
Webová prezentace
2
Význam webové prezentace:
 Rozšiřování dostupnosti Internetu = růst významu
internetové prezentace
 Náklady na toto médium neustále klesají – jeho schopnosti
neustále rostou
 Webové stránky – odlišné dle zaměření (firemní, osobní,
zájmové, komunitní, …)
 Tvorba účelné a viditelné webové prezentace:
 Zajištění kvalitního a hodnotného obsahu stránek
 Tvorba přehledného a strukturovaného webu
 Tvorba graficky hodnotného webu
 Tvorba přístupného webu
 Optimalizace webu pro vyhledávače
Moderní prostředky informatiky pro administrativu, provoz a řízení

3. © Dana Vynikarová
Před tvorbou webové prezentace
3
1. Analýza:
 Cíle a smyslu webu – rozdílné dle zaměření webu (např. pouze
informování, propagace, prodej, …)
 Cílové skupiny – materiál poskytující metodickou podporu pro
hledání běžného chování uživatelů webových stránek
 Výstup – databáze klíčových slov a frází, jejich umístění,
funkcionalita webových stránek, schéma celého webu
 Konkurence – nutné webovou prezentaci uzpůsobit vzhledem
k stránkám konkurence:
 Zjištění trendů v daném oboru
 Zmapování stránek konkurentů
 Vyhledání slabin konkurenčních stránek – návrh lepšího řešení
2. Vhodný výběr doménového jména
 Krátké a snadno zapamatovatelné, bez rušivých znaků (čísla,
speciální znaky), originální a nezaměnitelné
 České webové stránky – koncovka .cz
Moderní prostředky informatiky pro administrativu, provoz a řízení

4. © Dana Vynikarová
Tvorba struktury a navigace webu
4
 Struktura stránek – logicky uspořádává a rozděluje
informace na stránce dle různých souvislostí
 Napomáhá lepší orientaci uživatele na stránce
 Vhodná struktura – stromová struktura webu:
 Nadřazená kategorie – má jednu nebo více kategorií
podřazených
 Podřazená kategorie – má vždy jen jednu kategorii
nadřazenou
 Špatný návrh struktury – ztráta přehledu uživatele,
většinou znamená odchod uživatele ze stránky
 Do webové prezentace by měly být umístěny:
 Detaily – uživateli podají požadovanou informaci
 Rozcestníky – stránky sloužící ke zorientování se mezi
detaily
Moderní prostředky informatiky pro administrativu, provoz a řízení

5. © Dana Vynikarová
Tvorba struktury a navigace webu
5
 Navigace webu – měla by odpovídat struktuře webu,
nejčastěji je zobrazena jako kombinace:
1. Hlavní navigace – obvykle hlavní menu
 Jednotná pro celý web, výstižná a srozumitelná pro
laika
 Obsahuje odkazy na hlavní sekce menu (nebo podsekce)
 Horní – vodorovná navigace, postranní – svislá navigace
 Vhodná realizace záložkami – na hlavní stránce i
podstránkách:
 Uživatel je má stále na očích
 Má přehled, kde se právě nachází
 Má možnost změnit hlavní podkategorii jedním kliknutím
Moderní prostředky informatiky pro administrativu, provoz a řízení

6. © Dana Vynikarová
Tvorba struktury a navigace webu
6
2. Lokální navigace – součást svislého hlavního menu
(„rozbalená“ část menu)
 Obsahuje odkazy na vnitřní stránky sekce (podsekce), kde
se uživatel právě nachází
3. Nadpis – unikátní nadpis nejvyšší úrovně, nese klíčovou
informaci o obsahu stránky
4. Text webové stránky – nejdůležitější prvek webové
stránky
 Vhodné členění textu na odstavce, podnadpisy, odrážky, …
 Správně strukturovaný text zvýší přehlednost a oblíbenost
stránky
 Text musí být jasný a srozumitelný, dobře čitelný pro
všechny, strukturovaný, zvýrazněné klíčové informace
Moderní prostředky informatiky pro administrativu, provoz a řízení

7. © Dana Vynikarová
Tvorba struktury a navigace webu
7
5. Záhlaví – mělo by odkazovat na úvodní stránku
 Logo a další grafické prvky, využití k marketingovým
účelům (upozornění na pořádanou akci, nový výrobek)
6. Zápatí – standardně využíváno k umístění informací
o vlastníkovi stránek a legislativním upozorněním
7. Používání zvyklostí – komponenty webu, které jsou
časem zažité
 Uživatelé lehce rozpoznají jejich účel
 Grafické prvky (např. tlačítko s piktogramem)
 Zažité umístění komponent webu
 Piktogram lupy a košíku, které se
nacházejí například v e-shopech:
8. Další – mapa stránek, vyhledávání,…
Moderní prostředky informatiky pro administrativu, provoz a řízení

8. © Dana Vynikarová
Návrh kostry a funkčnosti webu
8
Moderní prostředky informatiky pro administrativu, provoz a řízení
1. textový drátěný model: 3. podrobný drátěný model:
2. blokový
drátěný
model:

9. © Dana Vynikarová
Tvorba grafického vzhledu
9
1. Navrhujte barevné schéma s ohledem na téma
stránek
 Barvy by měly být s tématem spojeny:
 Symbolicky – např. zelená - peníze, příroda; červená -
láska; modrá a žlutá - cestování
 Nebo přímo – firemní barvy
2. Použijte barvy k přilákání pozornosti na nejdůležitější
místo
 Text v jasné barvě dobře kontrastující s pozadím si
každý přečte jako první
 Plýtvání s tímto prostředkem – ztráta na účinnosti
Moderní prostředky informatiky pro administrativu, provoz a řízení

10. © Dana Vynikarová
Tvorba grafického vzhledu
10
3. Zdůrazněte barvami strukturu stránek
 Odlišné barevné ladění záhlaví, navigačního pruhu a
vlastního obsahu stránky
4. Čím menší počet barev, tím lépe
 Použití více než 6ti barev – snížení přehlednosti webu
5. Používejte barvy tam, kde jsou opravdu potřeba
 Pro oddělení částí stránek s různým významem, ke
zdůraznění, apod.
 Pokud je na stránce rovnoměrně použito mnoho barev,
uživatel na ní nenalezne to podstatné
 Vhodné použít monochromatickou
paletu a doplňkovou barvu:
Moderní prostředky informatiky pro administrativu, provoz a řízení

11. © Dana Vynikarová
Tvorba grafického vzhledu
11
5. Barvy mohou zrychlit vyhledávání důležitých míst
v textu
 Barevné zdůrazňování klíčových slov ve výsledcích
vyhledávání
 Odlišení jednou barvou zrychlí vyhledávání nejvíce – čím
více použitých barev, tím se rychlost hledání snižuje
6. Barvy jsou obvykle spojovány s nějakým významem
 Červená = stop, nebezpečí, chyba; modrá = barva pro
chlapce, studená barva techniky; růžová = barva pro dívky;
zelená = relaxace, volno
 Pozor na asociace v různých kulturách – bílá v Evropě
radost, svatební barva, na dálném východě smutek, smrt
Moderní prostředky informatiky pro administrativu, provoz a řízení

12. © Dana Vynikarová
Programová stránka webdesignu
12
 Před tvorbou stránek – nutné stanovit vhodné technologie a
postup pro naprogramování stránky
 Základem internetových stránek je jazyk HTML (verze 5)
 Takto psané stránky – často programátory doplněny pomocí
jiných jazyků, podle potřeby stránek:
 Jazyk CSS (Cascading Style Sheets) – určen k popisu způsobu
zobrazení jednotlivých značek HTML jazyka v internetovém
prohlížeči
 Jazyk PHP (Hypertext Preprocessor) – umožňuje dynamickou
změnu stránek na straně serveru, jejíž výsledek je přenášen
k uživateli (fóra, hodnocení příspěvků uživatelů,…)
 Jazyk SQL (Structured Query Language) – práce s databázemi
 JavaScript – jazyk využívaný při ovládání různých GUI prvků
(tlačítka, textová pole, pohyblivé animace, …)
Moderní prostředky informatiky pro administrativu, provoz a řízení

13. © Dana Vynikarová
Optimalizace pro vyhledávače - SEO
13
 SEO (Search Engine Optimization) – metodika vytváření a upravování
stránek, aby jejich forma a obsah byly vhodné pro automatizované
zpracování v internetových vyhledávačích
 Cíl – získat ve výsledku hledání ve vyhledávačích vyšší pozici a tím
četnější a zároveň cílené návštěvníky
 Vybrané metody SEO optimalizace:
 Klíčová slova – pokud na stránce nejsou, vyhledávač je nemůže
najít
 Kvalitní a unikátní obsah stránky, pravidelně aktualizovaný
 Používání titulku <title>, nadpisů <H1> – použití klíčových slov
v titulku stránky (místo obecných výrazů typu „Úvodní stránka“)
 Zpětné odkazy – pokud je na stránku odkazováno z jiných
webů, zvyšuje se její hodnocení vyhledávači
 URL adresa – většina vyhledávačů přikládá URL velký význam –
užitečné mít klíčové slovo v URL, např. http://seo-levouzadni.cz
Moderní prostředky informatiky pro administrativu, provoz a řízení

14. © Dana Vynikarová
Optimalizace pro vyhledávače - SEO
14
 Soubor robots.txt – textový
soubor, který umožňuje
správci webu zakázat nebo
povolit přístup většiny robotů
 Soubor Sitemap.xml – slouží
pro přidávání stránek do
vyhledávače
Moderní prostředky informatiky pro administrativu, provoz a řízení

15. © Dana Vynikarová
Analýza efektivnosti webu - Eye tracking
15
 Metoda zkoumající
efektivitu grafického
rozložení prvků stránky
 Respondentům nasazeny
senzory snímající pohyb
očí – zpracováno ve
formě spektogramu a
graficky naneseno na
webové stránky:
 Červená barva –
nejdelší doba sledování
dané komponenty webu
 Šedá barva – pouze
rychlé přelétnutí očima
 Účel – zjištění umístění
komponent webu s vyšší
prioritou sledovanosti
Moderní prostředky informatiky pro administrativu, provoz a řízení

16. © Dana Vynikarová
Google Analytics
16
 Goolge Analytics – měřící nástroj pro analýzu
webových stránek
 Analýza dat o počtu, cílech a činnostech návštěvníků
webu
 Jeden z nejkvalitnějších zástupců těchto nástrojů
 Pro přístup – nutné vytvoření Google účtu
 Možnosti sledování:
 Sledování návštěvnosti kategorií stránek
 Přehledů prodejů
 Přehled hledaných klíčových slov
 Přehled přístupů dle destinací
 Přehled použitých operačních systémů a prohlížečů, …
Moderní prostředky informatiky pro administrativu, provoz a řízení

17. © Dana Vynikarová
Google Analytics
17
1. Přihlášení – nutné vyplnění základních údajů o Vašich
stránkách:
 Website’s URL – adresu webu, např. http://www.vasefirma.cz
 Account name – název účtu, pod kterým jej uvidíte ve správě
analýz, vhodné použít shodný s adresou Vašeho webu –
vasefirma.cz
 Time zone country or territory – Czech Republic
2. Tlačítko Continue – přijmutí licenčních ujednání
3. Vložení měřícího kódu – kód, který je třeba vložit na
vaše stránky
 Soubor s kódem – nutné nahrát na váš server nebo přímo
do zdrojového kódu stránky
 Lze umístit hned za úvodní značku <head>
Moderní prostředky informatiky pro administrativu, provoz a řízení

18. © Dana Vynikarová
Google Analytics
18
 Až Google Analytics nashromáždí potřebný počet dat –
objeví se u názvu účtu zelená „fajfka“ a věta „Receiving
Data“
 Na shromáždění dat obvykle není nutné čekat déle než do
druhého dne
 Nabídka Reporting – stránka s výstupem analýzy
 Zobrazovaná data ve výchozím nastavení počítají s údaji
naměřenými za posledních sedm dní
 Změna období, ze kterého údaje pocházejí – lze
prostřednictvím malého kalendáře (pravý horní roh)
Moderní prostředky informatiky pro administrativu, provoz a řízení

19. © Dana Vynikarová
Google Analytics – příklad
19
 Přístup do Google Analytics
 http://www.google.com/analytics/
 Účet: czu.pef.mpi@gmail.com
 Heslo: czupefmpi
 Přístup do služby Analytics
 Dafis  http://ucto.dafis.eu ucto.dafis.eu
Moderní prostředky informatiky pro administrativu, provoz a řízení

20. © Dana Vynikarová
Další nástroje
20
 AWStats
 http://awstats.sourceforge.net/
 http://www.nltechno.com/awstats/awstats.pl?config=des
tailleur.fr – fungující demoverze
 TOPlist – globální statistika
 http://www.toplist.cz/global.html
 NetMonitor Online
 http://online.netmonitor.cz
Moderní prostředky informatiky pro administrativu, provoz a řízení

21. © Dana Vynikarová
21
Děkuji za pozornost !
Moderní prostředky informatiky pro administrativu, provoz a řízení
Dotazy …