Mpi cv02
- 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 …