České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce
Bakalářská práce
Obecný webový portál pro malou obec
Martin Křeček
Vedoucí práce Ing. Filip Hanzl
Studijní program: Softwarové technologie a management, Bakalářský Obor: Web a multimedia květen 2010
ii
Poděkování Děkuji Ing. Filipu Hanzlovi za odborné vedení mé bakalářské práce a poskytnutí cenných rad. Děkuji také své rodině za podporu a trpělivost, kterou se mnou měli.
iii
iv
Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). V Praze dne
………...………………. v
vi
Abstract This work deals with the creation of a universal web portal for small community with a simple content management system that allows residents of the village to get an overview of events in the village (eg, news, official board, etc.). The system also allows use of the life situations of public administration portal and their update.
Abstrakt Tato práce se zabývá vytvořením univerzálního webového portálu pro malou obec s jednoduchým redakčním systémem, který umožní obyvatelům obce získat přehled o dění v obci (např. aktuality, úřední deska, atd.). Systém dále umožní využití životních situací z portálu veřejné správy a jejich aktualizaci.
vii
viii
Obsah 1.
Úvod ............................................................................................................................................................. 1
2.
Analýza ....................................................................................................................................................... 3 2.1 Obecný popis problému ............................................................................................................................... 3 2.2 Problematika hledání životních situací ................................................................................................. 3 2.3 Obsah a funkce webu .................................................................................................................................... 3 2.3.1 Povinné informace .................................................................................................................................... 3 2.3.2 Nepovinné informace ............................................................................................................................... 4 2.4 Uživatelé ............................................................................................................................................................. 6 2.5 Použitelnost a přístupnost.......................................................................................................................... 6 2.5.1 Použitelnost webu ..................................................................................................................................... 7 2.5.2 Přístupnost webu....................................................................................................................................... 7
3.
Návrh řešení ........................................................................................................................................... 11 3.1 Případy užití .................................................................................................................................................. 11 3.1.1 Uživatelské role ....................................................................................................................................... 11 3.1.1.1 Nepřihlášený uživatel.................................................................................................................. 11 3.1.1.2 Přihlášený uživatel ....................................................................................................................... 12 3.1.1.3 Administrátor ................................................................................................................................. 12 3.2 Možnosti aplikace ........................................................................................................................................ 13 3.3 Diagram aktivit ............................................................................................................................................. 16 3.4 Návrh struktury databáze ........................................................................................................................ 17 3.5 Životní situace z portálu veřejné správy............................................................................................ 20 3.5.1 XML soubory z portálu veřejné správy .......................................................................................... 20 3.5.2 Aktualizace životních situací.............................................................................................................. 21 3.6 Návrh uživatelského rozhraní ................................................................................................................ 21 3.6.1 Layout webového portálu ................................................................................................................... 21 3.6.2 Layout administrace portálu.............................................................................................................. 22 3.7 Použité technologie .................................................................................................................................... 23 3.7.1 Databáze ..................................................................................................................................................... 23 3.7.2 Programovací jazyk – serverová část ............................................................................................. 24 3.7.3 Programovací jazyk – klientská část ............................................................................................... 24
4.
Implementace ........................................................................................................................................ 25 4.1 Stylování .......................................................................................................................................................... 25 4.2 Základní funkcionality ............................................................................................................................... 25 4.2.1 Registrace a přihlášení ......................................................................................................................... 25 4.2.2 Diskuze ........................................................................................................................................................ 26 4.2.3 Aktuality, Úřední deska, Fotografie................................................................................................. 27 4.3 Ověřování formulářů ................................................................................................................................. 28 4.4 Životní situace z portálu veřejné správy............................................................................................ 29 4.4.1 Aktualizace životních situací.............................................................................................................. 30 4.5 Nasazení systému ........................................................................................................................................ 32
5.
Testování ................................................................................................................................................. 33 5.1 Účastníci .......................................................................................................................................................... 34 ix
5.2 Nastavení testu ............................................................................................................................................. 34 5.3 Testovací úkoly ............................................................................................................................................. 35 5.4 Výsledky testování....................................................................................................................................... 36 5.4.1 Průběh testovacích úkolů se zaznamenanými problémy ....................................................... 37 5.5 Shrnutí .............................................................................................................................................................. 38 6.
Závěr ..........................................................................................................................................................39
Literatura .........................................................................................................................................................41 Příloha A – Seznam použitých zkratek...................................................................................................43 Příloha B – Uživatelská příručka..............................................................................................................45 B.1 Instalace a nastavení .................................................................................................................................. 45 B.2 Systém z pohledu uživatele...................................................................................................................... 46 B.2.1 Registrace ................................................................................................................................................... 46 B.2.2 Přihlášení .................................................................................................................................................... 46 B.2.3 Zapomenuté heslo................................................................................................................................... 47 B.2.4 Změna registračních údajů .................................................................................................................. 47 B.2.5 Diskuze – vložení příspěvku ............................................................................................................... 48 B.2.6 Kalendář událostí – vložení události ............................................................................................... 49 B.2.7 E-podatelna................................................................................................................................................ 50 B.2.8 Změna vzhledu ......................................................................................................................................... 50 B.2.9 Vyhledávání ............................................................................................................................................... 50 B.3 Systém z pohledu administrátora ......................................................................................................... 51 B.3.1 Aktuality (vložení, upravení, smazání) .......................................................................................... 51 B.3.2 Úřední deska (vložení, upravení, smazání) .................................................................................. 52 B.3.3 Diskuze ........................................................................................................................................................ 53 B.3.3.1 Témata (přidání, upravení, smazání) .................................................................................... 53 B.3.3.2 Příspěvky (vložení, upravení, smazání) ............................................................................... 53 B.3.4 Životní situace (aktualizace) .............................................................................................................. 53 B.3.5 Kalendář událostí (vložení události, upravení, smazání) ....................................................... 54 B.3.6 Fotogalerie ................................................................................................................................................. 54 B.3.6.1 Fotogalerie (vytvoření, upravení, smazání) ....................................................................... 54 B.3.6.2 Fotografie (nahrání, smazání) .................................................................................................. 54 B.3.7 Sekce webu (upravení) ......................................................................................................................... 54 B.3.8 Nastavení .................................................................................................................................................... 55 B.3.8.1 Změna nastavení webu ............................................................................................................... 55 B.3.8.2 Změna loga ....................................................................................................................................... 55 B.3.8.3 Změna mapy .................................................................................................................................... 55 Příloha C – Seznam tabulek a atributů ...................................................................................................57 Příloha D – Ukázky uživatelského rozhraní .........................................................................................61 Příloha E – Dotazníky + testování ............................................................................................................63 E.1 Dotazník – životní situace + informace ............................................................................................... 63 E.2 Analýza webových stránek malých obcí............................................................................................. 67 E.3 Pre-test dotazník .......................................................................................................................................... 68 E.4 Testovací úkoly ............................................................................................................................................. 69 Příloha F – Obsah přiloženého CD ...........................................................................................................71 x
Seznam obrázků Obrázek 2.1 Obrázek 2.2 Obrázek 2.3 Obrázek 2.4 Obrázek 2.5
Zobrazení obsahu – střední velikost textu ............................................................................... 8 Zobrazení obsahu – největší velikost textu.............................................................................. 8 Přihlášení – kontrola formuláře se zapnutým JavaScriptem ............................................ 9 Přihlášení – kontrola formuláře s vypnutým JavaScriptem .............................................. 9 Úřední deska – zobrazení typu a velikosti souboru .......................................................... 10
Obrázek 3.1 Obrázek 3.2 Obrázek 3.3 Obrázek 3.4 Obrázek 3.5 Obrázek 3.6 Obrázek 3.7 Obrázek 3.8 Obrázek 3.9
Aktéři .................................................................................................................................................... 11 Use case diagram nepřihlášeného uživatele......................................................................... 12 Use case diagram přihlášeného uživatele.............................................................................. 12 Use case diagram Administrátora ............................................................................................. 13 Diagram aktivit pro přihlášení uživatele ............................................................................... 16 Diagram aktivit pro nahrání fotografie................................................................................... 17 Diagram struktury databáze ....................................................................................................... 19 Navržený layout webového portálu ......................................................................................... 22 Navržený layout administrace portálu ................................................................................... 23
Obrázek 4.1 Obrázek 4.2
Fragment stromové struktury životních situací ................................................................. 30 Aktualizace životních situací....................................................................................................... 31
Obrázek 5.1
Výsledek Usabilla testu (vizualizace prostřednictvím tepelné mapy) ...................... 33
Obrázek B.1 Obrázek B.3 Obrázek B.2 Obrázek B.4 Obrázek B.6 Obrázek B.5 Obrázek B.8 Obrázek B.7 Obrázek B.9 Obrázek B.10 Obrázek B.11 Obrázek B.12 Obrázek B.13 Obrázek B.14 Obrázek B.15
Registrace ........................................................................................................................................... 46 Zapomenuté heslo ........................................................................................................................... 47 Přihlášení ............................................................................................................................................ 47 Změna registračních údajů .......................................................................................................... 48 Vložení příspěvku ............................................................................................................................ 49 Témata diskuze................................................................................................................................. 48 Přidání události ................................................................................................................................ 49 Kalendář událostí............................................................................................................................. 49 Elektronická podatelna ................................................................................................................. 50 Změna vzhledu .................................................................................................................................. 50 Vyhledávací políčko ........................................................................................................................ 51 Zobrazení výsledků hledání ........................................................................................................ 51 Vložení aktuality .............................................................................................................................. 52 Administrace - zobrazení příspěvků........................................................................................ 53 Smazání obrázku .............................................................................................................................. 54
Obrázek D.1 Obrázek D.2
Layout webového portálu – Aktuality ..................................................................................... 61 Layout administrace portálu....................................................................................................... 62
xi
xii
Seznam tabulek Tabulka 5.1 Tabulka 5.2
Výsledky Pre-test dotazníku ....................................................................................................... 34 Hodnocení obtížnosti testovaných úkolů .............................................................................. 36
Tabulka C.1 Tabulka C.2 Tabulka C.3 Tabulka C.4 Tabulka C.5 Tabulka C.6 Tabulka C.7 Tabulka C.8 Tabulka C.9 Tabulka C.10 Tabulka C.11 Tabulka C.12 Tabulka C.13
Databázová tabulka Uzivatel....................................................................................................... 57 Databázová tabulka Temata ........................................................................................................ 57 Databázová tabulka Vzkaz ........................................................................................................... 57 Databázová tabulka Udalost........................................................................................................ 58 Databázová tabulka Svatek .......................................................................................................... 58 Databázová tabulka Aktuality..................................................................................................... 58 Databázová tabulka Uredni_deska ........................................................................................... 58 Databázová tabulka Sekce............................................................................................................ 59 Databázová tabulka Fotogalerie ................................................................................................ 59 Databázová tabulka Fotografie .................................................................................................. 59 Databázová tabulka Zivotni_situace ........................................................................................ 59 Databázová tabulka Zivotni_situace_aktualizace ............................................................... 60 Databázová tabulka Nastaveni ................................................................................................... 60
Tabulka E.1
Analýza webových stránek malých obcí ................................................................................ 67
xiii
xiv
Seznam ukázek kódu Kód 3.1
Struktura XML souboru .......................................................................................................................... 20
Kód 4.1 Kód 4.2 Kód 4.3 Kód 4.4 Kód 4.5 Kód 4.6 Kód 4.7 Kód 4.8
Změna vzhledu ........................................................................................................................................... 25 Přihlášení - uložení loginu do session .............................................................................................. 26 SQL dotaz pro zobrazení témat a počtu příspěvků v nich ........................................................ 26 Úřední deska - kontrola souboru........................................................................................................ 27 Kontrola prázdného políčka ................................................................................................................. 28 Kontrola délky hesla ................................................................................................................................ 28 Kontrola formátu e-mailové adresy .................................................................................................. 28 SQL dotaz pro výpis životních situací ............................................................................................... 30
xv
xvi
1. Úvod V současné době je pro každou obec velmi důležité mít vlastní webové stránky, především pro komunikaci obce s jejími obyvateli. Používání internetu je již samozřejmostí, a proto by webová stránka měla (ze zákona i musí) být nezbytnou součástí každé obce. Webová stránka by měla předávat obyvatelům veškeré informace o dění v jejich obci a to v často aktualizované podobě, tudíž se všechny důležité informace dostanou k obyvatelům v pohodlí jejich domovů. Obsah stránek je tvořen povinnými (danými ze zákona) a nepovinnými informacemi (kultura, zdravotnictví, fotogalerie, diskuze, atd.). Jedním z důvodů, proč jsem se rozhodl vytvořit tuto aplikaci, je to, že stále existuje mnoho malých obcí, které vlastní webové stránky postrádají. Hlavním problémem je nedostatek financí potřebných k vytvoření profesionálních stránek. Aby obec webové stránky získala, musí kontaktovat některou z firem a nechat si „ušít“ stránky na míru. Další možností je univerzální řešení, které vyjde podstatně levněji, přesto bude funkčnost dostačující. Mezi tato řešení patří např. Portál města a obce online, který nabízí městům a obcím bezplatné zveřejňování povinně zveřejňovaných informací. Dalším ze způsobů zjištění informací o obci je např. portál veřejné správy České republiky [1]. O obci se tam však vyskytuje pouze omezené množství informací, a především chybí jakákoliv komunikace s obyvateli, jako jsou informace o aktualitách v obci, možnost diskuze nad danými tématy atd. Dalším důvodem je snaha umístit na webové stránky obce všechny podstatné a aktualizované informace, týkající se především životních situací, tj. aktuálnímu souhrnu praktických návodů na řešení některých problémů, např. jak vyřídit různá podání, kam se obrátit, v jakých lhůtách atd. Umístění životních situací přímo na stránkách obce ulehčí obyvatelům práci s jejich vyhledáváním a získáváním informací. Ve své práci jsem se rozhodl navrhnout jednoduché řešení, které bude respektovat potřeby malých obcí. Pro snazší porozumění problematiky a následnou lepší použitelnost stránek jsem prozkoumal potřeby návštěvníků i členů zastupitelstva, kteří budou na stránky přispívat nebo je budou spravovat. Cílem této práce je tedy navrhnout, implementovat a otestovat univerzální webový portál pro malou obec, který bude obyvatelům dané obce poskytovat informace o dění v jejich obci. Ať už to budou aktuality, úřední deska, diskuze nebo fotogalerie. Aplikace byla vytvářena s ohledem na přístupnost a použitelnost webu.
1
2
2. Analýza 2.1 Obecný popis problému Jak už jsem psal v úvodu, základní ideou mé práce, je umožnit malým obcím mít vlastní webové stránky se všemi podstatnými informacemi a funkcemi a zejména s životními situacemi, které aplikace umožní lehce aktualizovat. O těchto informacích se zmíním v následujících podkapitolách. Webové stránky by měly být co nejvíce intuitivní, jak pro administrátora webu, tak i pro návštěvníky, kteří by se na nich měli rychle zorientovat.
2.2 Problematika hledání životních situací Každý člověk potřebuje čas od času vyřídit různá podání, jako je např. vyřízení občanského průkazu, řidičského průkazu nebo třeba získat informace o rodičovském příspěvku, starobním důchodu atd. V tomto okamžiku nastávají otázky typu: „Kam se mám pro vyřešení mé situace obrátit? Co k tomu budu potřebovat?“ A další podobné. Kde ale tyto informace hledat? Možností je více. Obyvatelé malých obcí jsou většinou odkázáni na vývěsku na obecním úřadě nebo se na něm musí poptat. Jednodušším a hlavně rychlejším způsobem je použití internetu. Pro získání přehledu o tom, jak náročné je získat informace o životních situacích a způsobu jejich vyhledávání a také jestli by bylo vhodné mít všechny tyto informace na webových stránkách obce, jsem využil dotazníku. Na dotazník odpovídalo 13 respondentů různých věkových skupin (18-30, 31-54, 55-65). Výsledky tohoto dotazníku jsou uvedeny v příloze E.1. Z dotazníku vyplynulo, že hledání informací o životních situacích, není, především pro starší obyvatele malých obcí, až tak jednoduché (viz závěr v příloze E.1). Většina obyvatel vůbec netuší, kde tyto údaje na internetu hledat. To byl také jeden z hlavních motivů vývoje této aplikace. Proto jsem se rozhodl umístit vyhledávání nejdůležitějších životních situací přímo na webové stránky obce. Dalším úkolem bylo zjistit, jaké životní situace by na stránkách neměly chybět. Vytvořil jsem předběžný seznam situací (viz příloha E.1), které jsou podle mého názoru důležité, a pomocí dotazníku ověřil, že nic podstatného nechybí.
2.3 Obsah a funkce webu Obsah obecního webu je tvořen povinnými a nepovinnými informacemi. V této podkapitole rozeberu, co patří do povinných a co je vhodné zařadit do nepovinných informací.
2.3.1 Povinné informace Povinně zveřejňované informace jsou dané zákonem č. 106/1999 Sb., o svobodném přístupu k informacím a vyhláškou č. 442/2006, která udává strukturu informací zveřejňovaných o povinném subjektu.
3
Struktura informací: 1) 2) 3) 4) 5) 6) 7) 8) 9) 10) 11) 12) 13) 14) 15) 16) 17)
Název Důvod a způsob založení Organizační struktura Kontaktní spojení Případné platby lze poukázat IČ DIČ Rozpočet v tomto a předchozím roce Žádosti o informace Příjem žádostí a dalších podání Opravné prostředky Formuláře Popisy postupů – návody pro řešení životních situací Předpisy Úhrady za poskytování informací Licenční smlouvy Výroční zpráva podle zákona č. 106/1999 Sb.
Povinnost zveřejňovat úřední desku zavádí §26 zákona 500/2004 Sb.
2.3.2 Nepovinné informace Mezi nepovinné informace patří všechny informace, které nejsou přímo dané zákonem. Ke zjištění informací a funkcí jsem použil: 1) Dotazník Oslovil jsem skupinu lidí různého věku, abych získal představu o tom, jaké informace by na stránkách neměly chybět. Dotazník je v příloze E.1. 2) Analýza webových stránek malých obcí Abych zjistil, jaké informace a jaké funkce mají současné webové stránky, rozhodl jsem se analyzovat stránky několika obcí. Vybral jsem náhodných 30 obcí z různých regionů České republiky a rozdělil je podle počtu obyvatel (do 200, 500, 1000). Z analýzy vyplynulo, že nejmenší obce (do 200 obyvatel) vlastní webové stránky nemají vůbec nebo velmi jednoduché, které neobsahují mnoho funkcí. Obce, ve kterých žije více než 200 obyvatel, své stránky měly všechny. V analýze jsem se zaměřil na důležité funkce, které by podle mě, webové stránky měly obsahovat, a zjišťoval, v jakém rozsahu se u analyzovaných obcí vyskytují. Z náhodně vybraných 10 obcí do 200 obyvatel měly pouze 4 z nich vlastní webové stránky. Jak už jsem se zmínil, jejich funkčnost byla velmi malá. Jediné, co všechny tyto stránky obsahovaly, byla úřední deska a zobrazení fotografií obce. Za zmínku ještě stojí, že pouze jedna obec informuje své obyvatele pomocí aktualit o životě v obci. Obce nad 200 obyvatel měly vlastní webové stránky všechny. Většina stránek obsahovala úřední desku, aktuality a fotografie, polovina obcí navíc měla i e-podatelnu 4
a vyhledávací políčko. Další funkce jako registrace, diskuze a kalendář událostí se vyskytovaly ojediněle. Získaných poznatků z dotazníků a analýzy webových stránek malých obcí jsem využil při tvorbě jednotlivých sekcí a funkcí systému. Tabulka s výsledky analýzy je v příloze E.2.
Mezi jednotlivé sekce jsem zařadil: Úvod Do této sekce patří základní informace o obci např., kde se nachází, počet obyvatel atd. Aktuality Do aktualit lze zařadit veškeré informace a novinky o dění v obci. Obecní úřad Tato sekce slouží obyvatelům ke zjištění kontaktních informací a úředních hodin obecního úřadu. Patří do ní následující podsekce: o
Úřední deska Zde dochází ke zveřejňování dokumentů vyvěšených na úřední desce obecního úřadu způsobem umožňující dálkový přístup.
o
Zastupitelstvo Tato sekce slouží k vypsání všech členů zastupitelstva a výborů.
o
Organizace úřadu Do této sekce patří úřední hodiny obecního úřadu a příslušnost obce k jednotlivým úřadům.
o
Povinné informace Zde jsou obsaženy povinně zveřejňované informace, které stanovuje zákon č. 106/1999 Sb.
o
E-podatelna Pomocí elektronické podatelny je možno poslat zprávu nebo dotaz na obecní úřad.
o
Životní situace Tato sekce obsahuje aktuální souhrn praktických návodů na řešení některých problémů, např. jak vyřídit různá podání, kam se obrátit, v jakých lhůtách atd.
O obci Do této sekce patří jakékoliv informace o obci. Je rozdělena na následující podsekce: o
Historie Tato sekce obsahuje informace o historii obce.
o
Současnost Tato sekce obsahuje informace o současnosti obce.
o
Kultura Tato sekce obsahuje všechny informace o kultuře v obci.
5
o
Zdravotnictví Tato sekce obsahuje informace o zdravotnictví v obci např. ordinační hodiny a kontakty na lékaře.
o
Odpady Tato sekce obsahuje informace o svozu komunálního odpadu.
Fotogalerie Tato sekce slouží k prohlížení fotografií v jednotlivých fotogaleriích. Diskuze Tato sekce nabízí komunikaci obyvatelům obce prostřednictvím diskuze. Odkazy Pro umístění odkazů na různé stránky slouží tato sekce.
2.4 Uživatelé Uživateli systému v malých obcích budou na jedné straně návštěvníci webových stránek a na druhé straně starostové nebo někdo z členů zastupitelstva, kteří se budou především starat o jeho správu. Návštěvníci stránek mohou být buď obyvatelé obce, kteří budou pravidelně zjišťovat aktuální informace o obci nebo budou diskutovat o každodenních problémech v obci. Mezi další návštěvníky mohou patřit např. lidé vyhledávající zajímavosti v okolí nebo jen rady ohledně životních situací. Správci systému v malých obcích budou starostové nebo někdo z členů zastupitelstva. Jelikož lze předpokládat, že mají malé nebo spíše žádné zkušenosti s tvorbou webových stránek, je potřeba, aby systém byl velmi jednoduchý, intuitivní. Tito uživatelé pracují většinou s kancelářskými programy. V systému je proto pro vkládání aktualit nebo úpravu sekcí využit WYSIWYG editor [2], tudíž nebudou mít problémy s ovládáním tohoto systému. Zkratka WYSIWYG editor znamená doslova „What You See Is What You Get“, česky „co vidíš, to dostaneš“. WYSIWYG editory umožňují rychlejší tvorbu dokumentů, aniž by vyžadovaly hlubší znalost jazyka HTML. Při použití tohoto editoru přímo vidíme, jak bude vložený text na stránkách vypadat. Je to z toho důvodu, že místo prázdných textových políček máme k dispozici také tlačítka, která známe z klasických textových editorů (např. Microsoft Word či OpenOffice). Proto nemusíme (ale samozřejmě můžeme) k formátování textu využívat jazyk HTML a CSS. Pro tyto účely byl použit editor TinyMCE [3], který patří mezi absolutní špičku mezi těmito editory.
2.5 Použitelnost a přístupnost Při vývoji tohoto systému jsem kladl důraz na použitelnost a přístupnost systému, což je důležitým faktorem každého dobrého webu.
6
2.5.1 Použitelnost webu Použitelnost webových stránek spočívá ve snadné orientaci jejich uživatelů a v tom, jak rychle pochopí jejich uspořádání a ovládání. Dobře použitelné stránky musí být přehledné, srozumitelné a snadno ovladatelné, aby uživatelé dosáhli bez problémů svého cíle. Některé vlastnosti použitelného webu jsou např.: zřetelná navigace (menu) umístěná na lehce povšimnutelném místě, dostatečně velké písmo, nepříliš dlouhé řádky, podtržené odkazy, příjemná grafická podoba.
2.5.2 Přístupnost webu Přístupný neboli bezbariérový web neklade uživateli žádné překážky, které by mu znemožnily daný web efektivně používat. Poskytuje plnohodnotnou informaci každému, nezávisle na jeho schopnostech, zdravotním stavu a technickém vybavení. Přístupnost webu je zákonem daná hranice jednotlivých aspektů tak, aby web byl přístupný i pro hendikepované uživatele (zrakově, sluchově, pohybově, s poruchami soustředění). Hendikepovaným uživatelem je i takový člověk, kterému nevhodně vytvořená webová stránka bude činit problémy při použití. Pravidla a metodiky přístupného webu jsou tedy tím nástrojem, který těmto uživatelům umožní stránky používat, když už ne plnohodnotně, pak alespoň bez výrazných omezení. Celosvětově nejznámější je metodika WCAG [4]. V České republice byla v roce 2004 vytvořena Pravidla pro tvorbu přístupného webu. Ve své práci jsem respektoval tato pravidla a na ukázku jsem se rozhodl vybrat několik pravidel tvorby přístupného webu a jejich plnění ukázat přímo na webových stránkách. Vycházel jsem z pravidel přístupného webu pro účely novely Zákona č. 365/2000 Sb. o informačních systémech veřejné správy, provedenou zákonem č. 81/2006 Sb. [5] Pravidlo č. 7 Velikost písma musí být možné zvětšit alespoň na 200% a zmenšit alespoň na 50% původní hodnoty pomocí standardních funkcí prohlížeče. Při takové změně velikosti nesmí docházet ke ztrátě obsahu nebo funkcionality. Komentář k pravidlu č. 7 Protože každý uživatel nevidí stejně a mnoho lidí by ocenilo možnost změny velikosti písma v prohlížeči, bylo využito relativních jednotek. Relativní jednotky mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma může být ovlivněna jednak nastavením stylu font-size, dále formátovacími značkami
apod. (nedoporučuje se používat) a také volbou uživatele nastavením v prohlížeči. A to je největší výhoda těchto jednotek. Rozdíl mezi střední velikostí textu a největší velikostí je vidět na obrázcích 2.1 a 2.2.
7
Obrázek 2.1: Zobrazení obsahu – střední velikost textu
Obrázek 2.2: Zobrazení obsahu – největší velikost textu
Pravidlo č. 23 Pokud uživatel učiní chybu při vyplňování webového formuláře, musí být k dispozici informace o tom, ve které položce je chyba. Pokud to charakter webového formuláře nevylučuje, musí být k dispozici rovněž informace, jak tuto chybu odstranit. 8
Komentář k pravidlu č. 23 Kontrola formulářů (viz podkapitola 4.3) je ověřována jednak na straně klienta JavaScriptem (viz obrázek 2.3) a na straně serveru pomocí PHP skriptu (viz obrázek 2.4). Pokud uživatel některou položku nevyplní nebo jí vyplní špatně, bude na to upozorněn.
Obrázek 2.3: Přihlášení – kontrola formuláře se zapnutým JavaScriptem
Obrázek 2.4: Přihlášení – kontrola formuláře s vypnutým JavaScriptem
Pravidlo č. 24 Text odkazu nebo jeho přímo související text musí výstižně popisovat cíl odkazu. Jestliže odkaz vede na jiný typ souboru, než je webová stránka, musí být odkaz doplněn sdělením o typu, případně o velikosti tohoto souboru.
9
Komentář k pravidlu č. 24 Z textu každého odkazu na webových stránkách by měl uživatel poznat, kam odkaz vede a co může na odkazované stránce očekávat. Pokud vede odkaz na jiný typ souboru, např. soubor ve formátu PDF, DOC nebo DOCX, je u tohoto odkazu uveden typ a velikost souboru (viz obrázek 2.5).
Obrázek 2.5: Úřední deska – zobrazení typu a velikosti souboru
10
3. Návrh řešení Následující podkapitoly popisují průběh fáze návrhu aplikace, možnosti aplikace a použité technologie.
3.1 Případy užití Počáteční představy o rozsahu projektu nám podávají případy užití, neboli Use Case, které jsou psány z pohledu zákazníka. Zjednodušeně se dá říci, že nám popisují chování softwaru nebo systému. Obsahují textový popis všech možných způsobů, jak může uživatel pracovat se softwarem nebo systémem.
3.1.1 Uživatelské role Pro používání systému jsou definované tři uživatelské role (viz obrázek 3.1), které budou určovat jakými vlastnostmi a oprávněními budou zúčastnění uživatelé disponovat. Jejich funkce a možnosti v systému budou uvedeny níže. Nepřihlášený uživatel Přihlášený uživatel Administrátor
Obrázek 3.1: Aktéři
3.1.1.1
Nepřihlášený uživatel
Nepřihlášený uživatel je uživatel s nejnižšími uživatelskými právy. Typickým nepřihlášeným uživatelem může být např. obyvatel obce, který nemá potřebu psát do diskuze nebo kalendáře událostí a vystačí si pouze se zjišťováním aktualit v obci neboli s prohlížením webových stránek. Může např. prohlížet obsah webových stránek, číst si příspěvky v diskuzi a kalendáři, může využívat i vyhledávání na webu.
11
Obrázek 3.2: Use case diagram nepřihlášeného uživatele
3.1.1.2
Přihlášený uživatel
Přihlášený uživatel je uživatel, který již prošel registrací a poté i přihlášením. Má k dispozici všechny funkce nepřihlášeného uživatele, ale i další. Jedním z hlavních důvodů registrace v systému je možnost nejenom číst příspěvky v diskuzi, ale také do ní přispívat. Může taktéž vkládat události do kalendáře nebo poslat zprávu nebo dotaz na obecní úřad. Další funkcí přihlášeného uživatele je možnost změny registračních údajů (hesla a e-mailu).
Obrázek 3.3: Use case diagram přihlášeného uživatele
3.1.1.3
Administrátor
Uživatel s nejvyššími právy se nazývá administrátor. Jedná se o uživatele, který kromě výše uvedených funkcí (přihlášený uživatel), má přístup do administrace. Systém se skládá ze dvou částí. Tou první je samotný web, který mají možnost vidět všichni nepřihlášení i přihlášení uživatelé. Druhou částí je administrace webu, kde dochází k vytváření jeho obsahu a ke které má přístup pouze administrátor webu. Administrátor může např. vkládat, upravovat a mazat 12
aktuality, dokumenty na úřední desce, témata a příspěvky v diskuzi, události v kalendáři událostí, upravovat sekce webu, vytvářet, upravovat a mazat fotogalerie, nahrávat a mazat fotografie, a také aktualizovat výpis životních situací. Dále může změnit nastavení webu (název webu, popisek, klíčová slova), logo a mapu.
Obrázek 3.4: Use case diagram Administrátora
3.2 Možnosti aplikace Registrace Každý uživatel bude mít možnost si v systému vytvořit účet. Pro založení účtu potřebuje zadat registrační údaje - uživatelské jméno, heslo a e-mailovou adresu. Zvolené uživatelské jméno musí být unikátní, tudíž se v systému nikdy nebudou vyskytovat dvě stejná. Přihlášení Po úspěšné registraci se bude moci uživatel přihlásit do systému. Pro přihlášení bude vyžadováno uživatelské jméno a heslo. Po přihlášení bude moci uživatel přispívat do diskuze, vkládat události do kalendáře, poslat zprávu nebo dotaz na obecní úřad. Dále bude mít možnost změnit si registrační údaje (heslo a e-mail), případně se odhlásit.
13
Zapomenuté heslo Pokud si uživatel nebude moci vzpomenout na heslo, které zadal při registraci, může si nechat zaslat na svůj e-mail, který zadal při registraci, nové heslo po zadání uživatelského jména a e-mailu. Zaslané heslo si může později změnit. Změna registračních údajů Přihlášený uživatel si také bude moci změnit heslo nebo e-mailovou adresu. Aby změna údajů proběhla, musí uživatel zadat stávající heslo a poté si buď změnit heslo, nebo e-mailovou adresu, popř. oboje. E-podatelna Elektronická podatelna bude sloužit k zaslání zprávy nebo dotazu na obecní úřad. Zaslat dotaz může opět pouze přihlášený uživatel. Pro odeslání zprávy bude muset zadat předmět a samotnou zprávu. Změna vzhledu Systém také bude umožňovat změny stylu. Uživatel bude mít na výběr mezi čtyřmi styly: výchozím žlutým, červeným, šedým a kontrastním stylem pro slabozraké uživatele, který bude mít zároveň i plovoucí šířku. Vyhledávání Pokud uživatel nebude moci nalézt potřebné informace, může využít vyhledávacího políčka. Vyhledávat se bude v aktualitách, na úřední desce, v životních situacích a nakonec v obsahové části webu. Aktuality (vložení, upravení, smazání) Aby se na stránkách vyskytovaly stále aktuální informace, bude mít administrátor webu možnost vkládat aktuality. Nejprve bude muset vyplnit titulek aktuality, její stručný úvod a samotnou aktualitu. Na stránkách se poté zobrazí titulek aktuality s jejím úvodem a datem a po kliknutí na titulek se zobrazí celá aktualita. Pro přehlednost se poslední dvě aktuality budou vždy zobrazovat v levém panelu a zbytek v sekci aktuality. Aktuality půjdou také upravit a smazat. Postačí si pouze vybrat aktualitu v seznamu podle data a titulku a upravit jí, popř. smazat. Úřední deska (vložení, upravení, smazání) Další důležitou součástí webových stránek obcí je úřední deska. Na úřední desce lze nalézt rozhodnutí, oznámení, vyrozumění a další informace týkající se obce a jejích obyvatel. Administrátor bude moci vkládat jeden dokument ke každému příspěvku na úřední desku, dále zadá nadpis odkazu pro zobrazení názvu dokumentu a zadá od kdy do kdy daná informace (dokument) platí. Na stránkách se navíc ještě zobrazí, o jaký typ dokumentu se bude jednat a jakou bude mít velikost. Stejně jako u aktualit, půjdou i informace na úřední desce upravovat nebo mazat jejich vybráním ze seznamu. Diskuze - témata (přidání, upravení, smazání) V diskuzi bude již předem vytvořeno sedm základních témat: o Výstavba o Doprava o Odpady o Školství o Tyto www stránky o Stížnosti 14
o
Ostatní
Administrátor bude mít možnost přidávat i další témata. Pokud nebude chtít nové téma přidat, ale pouze upravit nebo smazat téma stávající, vybere toto ze seznamu a provede úkon. Diskuze - příspěvky (vložení, upravení, smazání) Do vytvořených témat mají možnost všichni přihlášení uživatelé psát příspěvky. Nejprve si vyberou téma, do kterého chtějí přispět a poté napíšou vzkaz do připraveného políčka a odešlou ho. Administrátor bude mít na rozdíl od přihlášeného uživatele možnost i tyto příspěvky upravovat nebo mazat. Nepřihlášený uživatel bude mít pouze možnost příspěvky v diskuzi prohlížet. Aktualizace životních situací Tak jako se mění různé předpisy a zákony, tak samozřejmě dochází i k aktualizacím životních situací. Proto je důležité, aby vyvíjený systém umožňoval komunikaci s portálem veřejné správy. Jelikož k aktualizacím na tomto portálu dochází poměrně často, je třeba, aby vyvíjený systém umožňoval kontrolu, zda na něm nedošlo k nějaké změně. Životní situace v systému bude moci aktualizovat pouze administrátor v administraci. Kalendář událostí (vložení události, upravení, smazání) Přihlášení uživatelé budou moci vkládat události do kalendáře událostí. Kalendář událostí přináší přehled o akcích, které se v obci v daný čas uskuteční. Postačí si vybrat den, kdy se akce uskuteční a zadat stručný popis události i detailní popis s přesným časem. O nově vložené události je administrátor informován prostřednictvím e-mailu. Administrátor bude mít na rozdíl od přihlášeného uživatele možnost i tyto události upravovat nebo mazat. Nepřihlášený uživatel bude mít pouze možnost tyto události prohlížet. Sekce webu (upravení) V systému budou již předem vytvořeny nejdůležitější sekce, které budou pro malé obce zcela dostačující. Pro zjištění, jaké sekce by v systému neměly chybět, jsem využil jak dotazníků, tak analýzy webových stránek malých obcí. Tyto sekce budou administrátorovi dostupné a může si je podle libosti naplnit informacemi a poté kdykoliv upravovat. Fotogalerie (přidání, upravení, smazání) Samozřejmostí obecních webových stránek je možnost zobrazení fotografií obce. Administrátor bude mít možnost vytvářet jednotlivé fotogalerie. Postačí mu k tomu zadat pouze její název. Již vytvořené fotogalerie bude možno upravovat nebo mazat, stačí vybrat danou fotogalerii ze seznamu a provést úkon. Fotogalerie - fotografie (nahrání, smazání) Administrátor bude mít možnost do fotogalerií (které si sám vytvoří) nahrávat fotografie a zadávat k nim popisek. Tyto fotografie se poté zobrazí v sekci fotogalerie a také v levém panelu, kde se bude generovat náhodný obrázek ze všech fotografií. Fotografie lze samozřejmě i mazat.
15
Změna nastavení webu Administrátor systému bude při jeho nasazení zadávat název obce, popisek stránek a klíčová slova. Všechny tyto údaje poté bude moci změnit v nastavení, které najde v administraci. Název obce, který uživatel zadá, se také objeví v titulku stránek. Změna loga Při nasazení systému bude muset uživatel také nahrát vlastní logo webových stránek. Pokud se mu přestane líbit nebo bude chtít udělat změnu, bude mít možnost logo změnit. Změna mapy Stejně jako u loga bude muset uživatel systému také nahrát mapu, kde je vyznačeno, kde se obec nachází. V nastavení jí poté bude moci změnit.
3.3 Diagram aktivit Diagram aktivit je jedním z UML diagramů pro popis chování a průběhů jednotlivých Use case. Přechody v diagramu jsou spouštěny dokončením předchozí akce. Na ukázku zde uvedu diagram aktivit pro přihlášení uživatele (viz obrázek 3.5) a pro nahrání fotografie (viz obrázek 3.6).
Obrázek 3.5: Diagram aktivit pro přihlášení uživatele
16
Obrázek 3.6: Diagram aktivit pro nahrání fotografie
3.4 Návrh struktury databáze Návrh databáze vzešel z analýzy, ve které mi vykrystalizovala základní myšlenka struktury databáze (viz obrázek 3.7). Při vytváření aplikace postupně docházelo k určitým úpravám a přidáváním některých atributů z toho důvodu, že vyplynuly na povrch informace, které při počátečním návrhu nebyly zřejmé. Pro ukládání dat byla využita MySQL databáze. Názvy tabulek a atributů byly pojmenovávány s ohledem na co největší vyjádření toho, o čem daná tabulka nebo atribut vypovídá. V následujících řádcích popíši obsah jednotlivých tabulek a atributů. Pro vyšší přehlednost byl vytvořen seznam tabulek a jejich atributů, který naleznete v příloze C. V systému se vyskytuje celkem třináct tabulek. Tabulka uzivatel slouží k ukládání registračních údajů uživatelů systému. Primárním klíčem této tabulky je atribut uid, který jednoznačně určuje daného uživatele. Při registraci je uživatel vyzván k zadání uživatelského jména, které je uloženo ve sloupci login, dále k zadání hesla, které se vloží do sloupce heslo a nakonec ještě musí zadat e-mail (sloupec e-mail). Jedním z důvodů, proč se tento atribut nachází v databázi je ten, že uživatel zapomene své heslo a na tento e-mail mu bude zasláno heslo nové. 17
V databázi jsou dále uloženy dvě tabulky temata a vzkaz. V systému je již předem vytvořeno sedm témat, do kterých může přihlášený uživatel vkládat své příspěvky. Mezi atributy tabulky temata patří primární klíč tid a atribut tema, ve kterém jsou uloženy daná témata. Tabulka vzkaz má atribut vid, dále datum, který obsahuje datum, kdy došlo k odeslání vzkazu, atribut vzkaz, do kterého se ukládají odeslané vzkazy a atribut id_uzivatele, který označuje uživatele, odesílajícího vzkaz. Tabulky temata a vzkaz jsou spolu v relaci 1:N. V jednom tématu může být několik příspěvků, ale jeden příspěvek může být pouze v jednom tématu. Vztah těchto dvou tabulek je zajištěn atributem id_tematu, který se nachází v tabulce vzkaz. Přihlášení uživatelé mohou také vkládat události do kalendáře. K tomu slouží tabulka udalost. Mezi evidované atributy patří samozřejmě primární klíč id a dále atribut datum, ve kterém je uchováváno datum vložených událostí, také atribut id_uzivatele, který jednoznačně identifikuje vkládajícího uživatele. Při vkládání události do kalendáře se nejprve stručně vyplní nadpis události (atribut nadpis) a poté se již může přistoupit k psaní události (udalost). Další tabulkou je tabulka svatek, která slouží k zobrazení jména toho, kdo má daný den svátek. Další tabulky mají své využití pouze pro administrátora systému. Pro ukládání aktualit do databáze existuje tabulka aktuality. Jednotlivé aktuality jsou jednoznačně určeny atributem aid. Atribut datum slouží pro uložení data, kdy došlo k odeslání aktuality. Administrátor při psaní aktuality zadá titulek, vyplní stručný úvod a napíše aktualitu, na tyto tři úkony existují atributy titulek, uvod a aktualita. Pro ukládání dokumentů na úřední desku slouží tabulka uredni_deska. Kromě primárního klíče uid obsahuje také atributy od a do, které obsahují data platnosti daného dokumentu na úřední desce. Dalším atributem je nazev, ve kterém je název dokumentu. Název dokumentu je vždy unikátní, protože při každém uložení se jako název použije aktuální datum, tím je zaručeno, že se nikdy nebudou vyskytovat dva dokumenty se stejným názvem. Dále potřebujeme atributy pro název odkazu na webu a adresu, na které bude dokument k nalezení. K tomu nám slouží atributy nadpis_odkazu a cesta. A nakonec pouze doplňkové atributy pro koncovku souboru a jeho velikost a to koncovka a velikost. V tabulce sekce může administrátor vkládat a měnit obsah jednotlivých sekcí. Atribut id jednoznačně určuje danou sekci, pro odlišení jednotlivých sekcí je atribut kategorie, který obsahuje název sekce. Nejdůležitějším atributem je atribut obsah, ve kterém je uložen obsah určité sekce. A nakonec atribut cesta, jakožto adresa sekce pro vyhledávání na webu. Pro správu jednotlivých fotogalerií slouží tabulka fotogalerie. Atributy této tabulky jsou primární klíč id a atribut fotogalerie, ve kterém je uchováván název fotogalerie. Tabulka fotografie slouží pro uchovávání informací o obrázcích nahraných na server. Obsahuje identifikátor fid, pro popis fotografie je použit atribut popis. Stejně jako u úřední desky je unikátní název fotografií zajištěn přejmenováním jejího názvu podle aktuálního data. To je uloženo v atributu nazev. Posledním atributem je cizí klíč id_fotogalerie. Pomocí tohoto atributu je tato tabulka spojena s tabulkou fotogalerie. Fotografie jsou nahrávány ve dvou velikostech. První z nich je náhled, který slouží pro zobrazení malého obrázku v sekci fotografie a také pro zobrazení náhodného obrázku. Druhou velikostí je fotografie v originální velikosti. Adresy k těmto fotografiím lze nalézt v tabulce pod atributy cesta_nahled a cesta. Jednotlivé životní situace jsou uloženy v tabulce zivotni_situace. Pro uložení životních situací do databáze byla využita metoda traverzování kolem stromu (viz podkapitola 4.4). Primárním klíčem je zde zid, levá a pravá hodnota uzlu je uložena v atributech lft a rgt. Hloubku jednotlivých uzlů obsahuje atribut hloubka a obsah uzlů je v atributu nadpis.
18
Pro aktualizaci životních situací je použita tabulka zivotni_situace_aktualizace. Kromě identifikátoru id obsahuje dále název životní situace a to atribut situace, dále obsah životní situace ve sloupci nadpis. Ve sloupečku datum je uloženo datum, kdy byla daná životní situace aktualizována. Sloupec odkaz obsahuje odkaz životních situací na portál veřejné správy a nakonec atribut zid, díky němuž se životní situace aktualizuje i v tabulce zivotni_situace ve sloupci nadpis. Popis řešení aktualizace životních situací naleznete v podkapitole 4.4.1. Poslední tabulkou je tabulka nastaveni. V této tabulce jsou uloženy základní údaje o webových stránkách, jako je atribut nazev_obce, který obsahuje název obce, dalším atributem je description, což je popis obsahu stránky a v neposlední řadě atribut keywords, což jsou klíčová slova.
Obrázek 3.7: Diagram struktury databáze
19
3.5
Životní situace z portálu veřejné správy
V této podkapitole se zaměřím na hledání životních situací na portálu veřejné správy. Dále uvedu ukázku XML souboru, který bude využit pro systém, a v neposlední řadě popíši způsob aktualizace životních situací v systému. Jak už jsem zmínil v podkapitole 2.2, každý z nás potřebuje čas od času vyřídit různá podání nebo získat některé informace, týkající se životních situací. Kde ale tyto informace hledat? Možností je více. Obyvatelé malých obcí jsou většinou odkázáni na vývěsku na obecním úřadě nebo se na něm musí poptat. Nejucelenější informace nám ale dává portál veřejné správy [1]. Postupy zde uvedené dávají informace o tom, jak vyřídit různá podání, kam se obrátit a v jakých lhůtách, nebo zda se platí nějaké poplatky. Životní situace na portálu veřejné správy jsou uspořádány ve stromové struktuře, kde každá kategorie je složena z několika dalších podkategorií (např. Rodina – Manželství – Uzavření manželství – formou občanského sňatku). Informace o dané životní situaci jsou popsány ve třiceti bodech. Protože portál veřejné správy není podle mého názoru příliš přehledný a vyskytuje se na něm velké množství životních situací, rozhodl jsem se vytvořit jednoduchý systém. Umožní obyvatelům malých obcí zjistit nejdůležitější postupy a informace přímo na webových stránkách jejich obce bez nutnosti navštívení portálu veřejné správy. K tomu je využit XML soubor, který je na portálu veřejné správy uveden u každé životní situace. Po vyhodnocení dotazníků (viz podkapitola 2.2) jsem vybral nejdůležitější životní situace, které mohou obyvatele malých obcí zajímat.
3.5.1 XML soubory z portálu veřejné správy Na ukázku zde uvedu fragment struktury XML dokumentu, který popisuje jednu životní situaci (viz kód 3.1). XML soubory jsou členěny do třiceti bodů. Jedním z nich je např. „Kde, s kým a kdy životní situaci řešit“. Jelikož XML soubory jsou poměrně rozsáhlé, uvedu pouze malou ukázku čtyř bodů. <prvky> <prvek id="45"> 01. Identifikační kód
]]> 02. Kód
]]> 03. Pojmenování (název) životní situace Vydání občanského průkazu
]]> -----------------------------------------------------------------------28. Popis byl naposledy aktualizován 14. 1. 2009
]]>
Kód 3.1: Struktura XML souboru
20
3.5.2 Aktualizace životních situací Se změnou různých předpisů a zákonů dochází současně i k aktualizacím životních situací. Jelikož k aktualizacím na portálu veřejné správy dochází poměrně často, je třeba, aby vyvíjený systém umožňoval kontrolu, zda nedošlo na tomto portálu k nějaké změně. Původní záměr byl kontrolovat, jestli se informace v XML souboru na portálu veřejné správy rovnají informacím již uloženým v databázi. Tento záměr jsem ale nemohl realizovat, protože z neznámých důvodů se obsah XML souboru na portálu veřejné správy měnil a nabýval dvou hodnot. Proto jsem přistoupil k jinému řešení, a to porovnávání bodů číslo 28 (na portálu veřejné správy a v databázi systému), tzn. výpisů, kdy byla daná životní situace naposledy aktualizována. Životní situace v systému může aktualizovat pouze administrátor v administraci. Po stisknutí tlačítka „Aktualizace životních situací“ v sekci životní situace dojde k porovnání bodu číslo 28 u všech životních situací mezi záznamy v databázi a mezi záznamy v XML souboru portálu veřejné správy. V přehledu životních situací (viz obrázek 4.2) znázorňuje červená ikona změnu (aktualizaci) dané situace. Současně u situací, u kterých došlo ke změně, se zobrazí aktivní zaškrtávací políčko, u ostatních neaktivní. Po zaškrtnutí tlačítka administrátorem dojde k aktualizaci dané/daných životní situací v databázi.
3.6 Návrh uživatelského rozhraní V systému je využito dvou základních uživatelských rozhraní. První vidí každý uživatel, který se dostane na webové stránky. Druhé uživatelské rozhraní slouží administrátorovi pro přehlednou administraci systému. Při návrhu uživatelského rozhraní byl brán velký zřetel na přehlednost a přívětivé prostředí, které se bude zobrazovat stejně ve všech hlavních prohlížečích. Na webových stránkách tohoto typu je nejdůležitější vlastností jejich obsah a tudíž je důležité, aby se dal systém využívat i z mobilních klientů a při vypnutém stylování. Snažil jsem se dodržovat poučku, která nutí webdesignéry, vidět stránky z pohledu uživatele a nikoli z pohledu jejich tvůrců [6]. Díky tomu vyplavou na povrch různé nelogičnosti v návrhu, nedostatky v obsahu, názvech, uspořádání… Uživatel má také možnost změny stylu. Může se rozhodovat mezi čtyřmi styly - výchozím žlutým, červeným, šedým a kontrastním stylem pro slabozraké uživatele. Pro první tři styly je využita fixní šířka a pro styl slabý zrak je využita šířka plovoucí. Více informací o stylování naleznete v podkapitole 4.1. Uživatelské rozhraní je tvořeno HTML stránkami s využitím CSS ve zvláštních souborech.
3.6.1 Layout webového portálu Na ukázku zde uvedu základní rozvržení layoutu webového portálu (viz obrázek 3.8). Layout se skládá ze čtyř hlavních částí. První z nich je hlavička, která obsahuje logo a perzistentní menu. Perzistentní menu je takové menu, které je v neměnné podobě přítomné na všech stránkách webu. To vede k větší přehlednosti a orientaci uživatelů na stránkách. Další částí je levý panel, který obsahuje mapu obce, poslední dvě vložené aktuality, kalendář událostí, vyhledávací políčko, kontaktní informace a zobrazení náhodného obrázku z fotografií. Třetí část je obsahová. Tam dochází k zobrazení nadpisu dané sekce, zobrazení aktuálního data a svátku, drobečkové navigace a hlavně k zobrazení obsahu dané sekce. Drobečková navigace 21
(Breadcrumb Navigation) je pomůcka pro návštěvníka stránek, aby zjistil, kde se právě nachází a mohl se jednoduše a bez přemýšlení dostat na další úrovně menu. Poslední částí je patička. Zde se může uživatel buď registrovat, přihlásit a po přihlášení přejít do uživatelského panelu, dále si přečíst prohlášení o přístupnosti, nechat si zobrazit mapu webu.
Obrázek 3.8: Navržený layout webového portálu Výslednou podobu portálu naleznete v příloze D na obrázku D.1.
3.6.2 Layout administrace portálu Layout administrace portálu tvoří pět částí (logo, název obce, drobečková navigace, obsah a patička). Za název obce se dosadí název, který byl zadán při nasazení systému. V obsahové části si administrátor webu může vybrat z nabídky různých úkonů (aktuality, fotogalerie, sekce, atd.) a poté s nimi pracovat. V patičce najdeme odkaz pro nastavení systému a odkaz pro odhlášení (po odhlášení se automaticky dostaneme na úvodní stránku webu) a odkaz „Zpět na web“ (bez odhlášení). Základní rozvržení portálu je znázorněno na obrázku 3.9.
22
Obrázek 3.9: Navržený layout administrace portálu
Výslednou podobu administrace portálu naleznete v příloze D na obrázku D.2.
3.7 Použité technologie V této podkapitole se zaměřím na popis technologií použitých při vývoji aplikace. Rozhodl jsem se používat programovací jazyk PHP, jako databázi jsem využíval úložiště MySQL a SQL jako jazyk pro práci s ním. Důvody, proč jsem se takto rozhodl, byly zejména ty, že se jedná o nejčastěji podporované technologie na hostinzích (placených i volně dostupných, např. ic.cz a webzdarma.cz). Jelikož bude aplikaci využívat více uživatelů, je potřeba, aby byla neustále dostupná přes internet. Pro nasazení webové aplikace je tedy potřeba hosting s podporou PHP a MySQL.
3.7.1 Databáze SQL SQL [7] neboli Structured Query Language je strukturovaný dotazovací jazyk používaný pro tvorbu databází (tabulek) a na manipulaci s daty (vkládání dat, aktualizace, mazání a vyhledávání informací).
MySQL MySQL [8] je švédský databázový server založený na jazyce SQL. MySQL je multiplatformní, rychlý, výkonný, vysoce kompatibilní s jinými systémy, zejména se serverovým programem Apache a skriptováním PHP (dohromady tvoří tzv. triádu, nejčastěji instalovanou trojici programů pro vytváření webových aplikací). Databázi MySQL jsem si vybral, protože se jedná o osvědčené řešení, je velmi rychlá a široce podporovaná na hostinzích. Aplikace byla vyvíjena pod verzí MySQL 5.1. Pro pohodlnější práci s databází jsem využíval webový nástroj phpMyAdmin ve verzi 3.2.0.1.
23
3.7.2 Programovací jazyk – serverová část PHP PHP [9] neboli Hypertext Preprocessor je skriptovací programovací jazyk pro tvorbu dynamického webu. V současnosti je nejrozšířenější, a proto má největší podporu od hostingových firem. PHP skripty se nejprve provedou na straně serveru, jejich výsledek se poté odešle prohlížeči a posléze zobrazí uživateli. Jazyk PHP jsem si vybral zejména proto, že má největší podporu mezi poskytovateli jednak placených hostingových služeb, tak i volně dostupných, výbornou dokumentaci a mám s ním také největší zkušenosti při vytváření webových aplikací. Pro používání PHP je nezbytná instalace HTTP serveru a PHP modulu na serverový počítač. V mém případě se jedná o Apache server ve verzi 2.2.11 a PHP ve verzi 5.3.0.
3.7.3 Programovací jazyk – klientská část HTML HTML [10] je zkratka pro HyperText Markup Language neboli hypertextový značkovací jazyk. HTML používá definované značky (tagy) k vytváření a formátování dokumentů pro webové stránky. Vzhledem k rychlému rozvoji a různorodosti implementace jazyka v jednotlivých prohlížečích a odlišných verzí HTML používaných firmami, došlo na sloučení těchto různých verzí a sepsání standardů (doporučení). O tyto standardy a rozvoj webu se stará Consortium W3C [11]. Aktuálně se pracuje na HTML 5. Aplikace je realizována pomocí HTML stránek, které jsou psány tak, aby vyhovovaly standardu 4.01 ve variantě Strict a zobrazovaly se stejně ve všech hlavních prohlížečích. Samozřejmostí je validita HTML kódu, která byla neustále testována W3C validátorem [12].
CSS CSS [13] je zkratka pro anglický název Cascading Style Sheets neboli kaskádové styly. Kaskádové z toho důvodu, že se na sebe mohou vrstvit definice stylu, ale platí pouze ta poslední. CSS nám určuje, jak bude stránka napsaná v jazycích HTML, XHTML nebo XML ve výsledku vypadat. Přínosem CSS je možnost oddělit vzhled dokumentu od jeho struktury a obsahu – tím je snadnější zpracování obsahu dokumentu a vyhledávání v něm. CSS se může zapisovat přímo do HTML dokumentu nebo do externího souboru s příponou .css, což je doporučováno.
JavaScript JavaScript [14] je skriptovací jazyk, který se používá na webových stránkách pro tvorbu programů, nebo pro oživení stránek. JavaScript se oproti PHP skriptům vykonává přímo v prohlížeči uživatele, proto je rychlý, a k jeho funkčnosti je zapotřebí pouze internetový prohlížeč, který podporuje JavaScript. JavaScript se může zapisovat přímo do webových stránek nebo do externích souborů s příponou .js.
24
4. Implementace Po provedení analýzy a návrhu systému by mělo být zřejmé, jak by měl systém fungovat. V této kapitole se zaměřím pouze na některé části systému, které jsou specifické pro obecní weby a nastíním jejich implementaci.
4.1 Stylování Ke stylování je potřeba využít kaskádové styly CSS. Kaskádové styly nám určují, jak stránka napsaná v jazycích HTML, XHTML nebo XML bude ve výsledku vypadat. Kaskádové styly jsou zapsány v externím souboru styl.css, který se nachází ve složce styly. Pro odlišení vzhledu stránek na obrazovce a v tiskárně je použit styl print.css, který obsahuje pouze nejdůležitější informace bez zbytečných barev a grafických prvků a také (pro tisk) bez zbytečných částí stránek, jako je např. menu. Styly pro celou administraci jsou v souboru stylAdmin.css. Jelikož různé verze Internet Exploreru zobrazují stejný kód často velmi odlišně, musel jsem vytvořit samostatný styl pro Internet Explorer ve verzích menší než 8. Styl se nazývá styl-msie.css a je zobrazen pomocí podmíněných komentářů. Tím jsem docílil jednotného vzhledu systému ve všech dostupných prohlížečích. Systém také umožňuje změny stylů. Uživatel má na výběr mezi čtyřmi styly: výchozím žlutým, červeným, šedým a kontrastním stylem pro slabozraké uživatele, který má zároveň plovoucí šířku. Stránky nejsou propojeny se souborem styl.css, ale se souborem styl.php, který otestuje, zda už je z dřívějška na klientově straně uložena cookie se zvoleným stylem. Pokud ano, připojí se ke stránce styl obsažený v cookie. Pokud u uživatele cookie není uložena, připojí se ke stránce výchozí styl (styl.css). Jestliže uživatel v hlavičce zvolí jiný styl, uloží se tento styl do cookie a stránka se přesměruje zpět na místo, kde se uživatel momentálně nacházel. Doba expirace cookie je nastavena na jeden rok. Změnu stylu znázorňuje kód 4.1.
Kód 4.1: Změna vzhledu
4.2 Základní funkcionality 4.2.1 Registrace a přihlášení Aby mohl být uživatel registrován, musí vyplnit tři políčka - login (uživatelské jméno), heslo a e-mailovou adresu. Po odeslání údajů dojde ke kontrole, zda políčka nejsou prázdná, heslo není 25
kratší než pět znaků a zda má e-mail správný formát. Pokud se zjistí některý z těchto nedostatků, zobrazí se chybová hláška a předvyplněný formulář pro nové zadání údajů. V opačném případě (údaje jsou zadány správně) je k zadanému heslu přidán další řetězec, tzv. sůl. Celý tento řetězec je převeden na jeho hash pomocí hashovací funkce sha1(), která převede jakýkoliv řetězec na hash o pevné délce 40 znaků. Výsledný hash je tak i pro stejná hesla pokaždé jiný. Všechny údaje jsou následně uloženy do databázové tabulky Uzivatel. Registrace je nyní hotová. Pokud se uložení nezdaří, je to tím, že bylo zadáno uživatelské jméno, které se již v databázi vyskytuje. Atribut login je totiž unikátní. Uživatel o této skutečnosti bude informován hláškou „Registrace se nezdařila. Tento login již existuje.“. Pro přihlášení se do systému musí uživatel zadat login (uživatelské jméno) a heslo. Po odeslání dojde ke kontrole, zda políčka nejsou prázdná a pokud ano, zobrazí se chybová hláška a předvyplněný formulář pro nové zadání údajů. Pokud je vše v pořádku, k zadanému heslu se přidá sůl a celý řetězec se převede na hash funkcí sha1() a dojde k porovnání zadaného loginu a hesla s loginem a heslem uloženým v databázi. Pokud se údaje rovnají, je uložen login do session (viz kód 4.2) a uživatel bude přesměrován do uživatelského panelu. V případě, že se zadaný login s heslem v databázi nevyskytuje, zobrazí se chybová hláška „Špatné uživatelské jméno nebo heslo.“. Kontrola session je hojně využívaná, např. pro vstup do administrace. Pokud se hodnota v session proměnné loginUser nerovná admin, je do ní uživateli zamezen vstup. Taktéž pro přispívání např. do diskuzí nebo kalendáře událostí je kontrolováno, zda je session proměnná loginUser nastavena.
Kód 4.2: Přihlášení - uložení loginu do session
4.2.2 Diskuze Nejprve dojde k zobrazení odkazů všech témat uložených v databázi a počtu příspěvků v nich uložených. K tomu nám poslouží SQL dotaz (viz kód 4.3), pomocí něhož je ze dvou tabulek (temata a vzkaz) získáno id tématu pro zjištění, jaký odkaz jsme stisknuli, dále téma pro zobrazení názvu tématu a nakonec počet příspěvků v daném tématu. V dotazu je použito částečné vnější spojení LEFT JOIN ON. Díky tomu jsou zobrazeny i ta témata, která neobsahují žádný vzkaz.
Kód 4.3: SQL dotaz pro zobrazení témat a počtu příspěvků v nich
26
Pokud je v poli hodnot $_GET uvedena hodnota id (což je id tématu), dojde k výpisu příspěvků daného tématu. Do tématu může uživatel také vložit příspěvek, podmínkou je, že musí být přihlášen (kontrola session). Do databáze se uloží aktuální datum pomocí funkce now(), dále vzkaz, id uživatele a id tématu. Samozřejmostí je kontrola, zda byl vzkaz vyplněn.
4.2.3 Aktuality, Úřední deska, Fotografie Nejprve dojde pomocí session ke kontrole, zda daný uživatel je administrátor. Pro vkládání aktualit a také pro úpravu sekcí je využit TinyMCE editor. Výhodou použití tohoto editoru je, že přímo vidíme, jak bude vložený text na stránkách vypadat. Editor TinyMCE je u aktualit využit pro psaní stručného úvodu a samotné aktuality, dále je ještě vyžadováno vyplnění titulku aktuality. Pro nahrávání obrázků na server a jejich vkládání do aktuality je využit plugin TinyBrowser [15]. Pomocí tohoto pluginu je také možno vkládat obrázky a dokumenty jak do aktualit, tak do jednotlivých sekcí. Pro jeho správnou funkci je nutné zadat relativní cestu od rootu serveru k rootu webu do souboru config_tinybrowser.php. Jelikož pro každou doménu by byla cesta jiná, je tento soubor vytvořen při instalaci systému a pro zjištění a dosazení cesty je použita funkce dirname(__FILE__). Na úřední desku je možné nahrávat soubory o maximální velikosti 1,5 MB a pouze povolených typů (TXT, PDF, DOC, atd.). Kontrolu souborů znázorňuje kód 4.4. Pro zamezení dvou stejných názvů souborů je výsledný název složen z aktuálního data a typu souboru. Pro fotografie platí totéž, pouze jsou povoleny jiné typy souborů (GIF, PNG, JPEG). Fotografie jsou nahrávány na server ve dvou velikostech. První pro zobrazení originální velikosti a druhá pro její náhled. Pro efektní zobrazení obrázků v sekci fotogalerie (i v administraci) je využit skript LightBox. Všechny údaje o obrázku a souboru jsou navíc ukládány do databáze. Tento typ souboru není povolen! Vyberte jiný.
"; $vysledekKontroly = false; } //--- Kontrola velikosti souboru ---// if ($velikost > 512*1024*3) { echo "Můžete nahrávat pouze soubory do 1.5 MB.
"; $vysledekKontroly = false; } return $vysledekKontroly; } ?>
Kód 4.4: Úřední deska - kontrola souboru
27
4.3 Ověřování formulářů V systému se vyskytuje velké množství formulářů a jejich vyplňování uživatelem je před odesláním potřeba ověřovat. Ověřování formulářů je zajištěno jak na straně serveru (PHP), tak na straně klientu pomocí JavaScriptu. Systém provádí tyto kontroly: Kontrola prázdného políčka Všechna formulářová políčka je nutno vyplnit a proto je ověřováno funkcí empty(), zda nejsou prázdná. Zadejte login! "; ?>
Kód 4.5: Kontrola prázdného políčka Kontrola délky hesla U registrace a změny registračních údajů je potřeba zadat heslo o minimální délce pěti znaků. Kontrola je zajištěna funkcí mb_strlen(), která vrací délku řetězce. Heslo musí mít minimálně 5 znaků! "; ?>
Kód 4.6: Kontrola délky hesla Kontrola formátu e-mailové adresy Ke kontrole formátu e-mailové adresy dochází všude tam, kde je po uživateli vyžadováno její zadání. Kontrola formátu je prováděna pomocí regulárního výrazu. E-mail nemá správný formát! "; ?>
Kód 4.7: Kontrola formátu e-mailové adresy
U dokumentů na úřední desce, fotografií, loga a mapy také dochází k ověřování typu a velikosti souboru, který chceme nahrávat (viz podkapitola 4.2.3).
28
Pokud se nám stane, že u formulářů, kde se vyskytuje více políček, omylem některé nevyplníme a odešleme formulář, systém nám formulářová políčka zobrazí znovu i s našimi původními údaji, tudíž nemusíme znovu vyplňovat ta políčka, která byla vyplněna správně. Formuláře jsou také ošetřeny proti dvojímu odeslání dat. Může se stát, že uživatel vícekrát stiskne tlačítko pro odeslání formuláře nebo po odeslání formuláře stiskne tlačítko pro aktualizaci dokumentu v prohlížeči (refresh – F5). V těchto případech může dojít k dvojímu odeslání dat. Těmto případům jsem zabránil tím, že jsem na začátku dokumentu vytvořil proměnnou „$token“ a vložil jí do session a tu nastavil na „true“. Tento token se mi po odeslání formuláře vrátí pomocí hidden elementu. Poté zkontroluji, zda je proměnná $token nastavena v session a pokud je vše v pořádku, dojde k jejímu vyjmutí ze session a k uložení informací získaných z formuláře. Při refreshi stránky se odešle starý token a jelikož už není nastaven v session, formulář se neodešle. Všechny hodnoty, které projdou formulářovými políčky a budou využity pro komunikaci s databází, jsou ošetřeny proti SQL Injection [16]. Pod pojmem SQL Injection se skrývá podvržení vstupních dat z formulářů nebo jiných vstupů s cílem změnit výsledek SQL dotazu. Útočník přitom využije toho, že SQL má speciální znaky (např. apostrof) a ty interpretuje. Proto je nutné všechny proměnné, ze kterých vytváříme SQL dotaz, escapovat, tzn., že se před tyto speciální znaky dá zpětné lomítko (\) z angličtiny známé jako backslash. Escapování jsem provedl jednak pomocí funkce mysqli_real_escape_string() - pro všechny vstupy kromě čísel a pomocí funkce intval() - pro čísla. Veškeré výstupy, které nechceme formátovat pomocí HTML, jsou ošetřeny funkcí htmlspecialchars() z důvodu zabránění útoku XSS (Cross-site scripting) [17]. Funkce htmlspecialchars() nahradí všechny nebezpečné znaky jejich odpovídajícími textovými entitami (< za <, > za > atd.). Díky tomu se případné HTML tagy podstrčené útočníkem neinterpretují v prohlížeči ve svém významu, ale vypíší se na obrazovku přesně tak, jak je útočník zadal. Tím docílíme např. toho, že nedojde k rozhození layoutu. V diskuzi a kalendáři událostí je dovoleno pouze řádkování (přechod na nový řádek). Ostatní HTML tagy se v prohlížeči neinterpretují (viz předchozí odstavec). Toho je při výpisu docíleno pomocí funkcí nl2br() a htmlspecialchars().
4.4 Životní situace z portálu veřejné správy Jak už jsem zmínil v podkapitole 2.2, po vyhodnocení dotazníků jsem vybral nejdůležitější životní situace, které mohou obyvatele malých obcí zajímat. Nejprve jsem si vytvořil stromovou strukturu situací a poté bylo nutné touto strukturou naplnit databázovou tabulku. Pro ukládání životních situací jsem využil metody traverzování kolem stromu. Tato metoda umožňuje snadnou a efektivní práci s hierarchickými, respektive složitě strukturovanými daty. Princip této metody spočívá v ohodnocení uzlů stromu dvěma hodnotami tím způsobem, že od kořene procházíme všechny větve stromu a postupně doplňujeme levou (lft) a pravou (rgt) hodnotu uzlu. Kořen má tím pádem nejmenší levou a největší pravou hodnotu ze všech uzlů stromu (viz obrázek 4.1).
29
Obrázek 4.1: Fragment stromové struktury životních situací Pro naplnění databáze životními situacemi jsem využil PHP modul SimpleXML [18]. Tato technika slouží k jednoduchému načítání dokumentů ve formátu XML. Jelikož se v XML souboru životních situací na portálu veřejné správy vyskytují relativní odkazy, nahradil jsem je při zpracování souboru (ještě před uložením do databáze) pomocí regulárního výrazu absolutními. Dále jsem, pro lepší přehled, odstranil v číslování nadpisů jednotlivých bodů začáteční nuly (01 za 1, 02 za 2, atd.) – opět pomocí regulárního výrazu. Výpis životních situací (stromu) probíhá tak, že si systém vždy nechá vrátit všechny uzly, které mají levou hodnotu (lft) větší, pravou hodnotu (rgt) menší a hloubku o jedničku větší než vybraný uzel. (viz kód 4.8) Pokud je levá hodnota uzlu o jedničku menší než pravá hodnota uzlu, jedná se již o samotný list stromu a výslednou životní situaci si můžeme zobrazit. $row[lft] AND rgt < $row[rgt] AND hloubka = $hloubka ORDER BY lft"; ?>
Kód 4.8: SQL dotaz pro výpis životních situací
4.4.1 Aktualizace životních situací Aktualizace životních situací probíhá tak, že porovnávám bod číslo 28, který je již uložen v databázi se stejným bodem XML dokumentu na portálu veřejné správy, načteným pomocí SimpleXML modulu. Tento bod obsahuje informaci o poslední aktualizaci životní situace. Pro aktualizaci životních situací byla v databázi vytvořena speciální tabulka zivotni_situace_aktualizace, která již nemá stromovou strukturu. Obsahuje, kromě jiných, např. sloupec datum, do kterého se ukládá již zmíněný bod číslo 28 pro porovnávání a sloupec odkaz, který obsahuje odkaz na danou životní situaci na portálu veřejné správy. Životní situace v systému může aktualizovat pouze administrátor v administraci. Po stisknutí tlačítka „Aktualizace životních situací“ v sekci životní situace tedy dojde k již zmíněnému porovnání. V přehledu životních situací (viz obrázek 4.2) znázorňuje červená ikona změnu (aktualizaci) dané situace. Současně u situací, u kterých došlo ke změně, se zobrazí aktivní zaškrtávací políčko, u ostatních neaktivní. Po zaškrtnutí tlačítka administrátorem dojde 30
k aktualizaci dané/daných životní situací v databázi, jednak v tabulce zivotni_situace a také v zivotni_situace_aktualizace.
Obrázek 4.2: Aktualizace životních situací 31
4.5 Nasazení systému Pro nasazení systému je potřeba hostingu s podporou PHP a MySQL. Samotná instalace (nasazení) systému je velmi jednoduchá. Systém sám vytvoří databázové tabulky, soubor pro spojení s databází a také soubor pro plugin TinyBrowser (pro upload obrázků u aktualit a sekcí). Veškeré nastavení se provede přehledně a jednoduše v instalačním průvodci. Po nahrání systému na server a jeho prvním spuštění, systém zkontroluje, zda již neexistuje soubor pro spojení s databází. Tento soubor samozřejmě zatím neexistuje a tak se nám spustí instalace. Instalace probíhá v několika krocích. V prvním kroku je nutné některým složkám nastavit přístupová práva pro zápis (777), zadat přístupové údaje k databázi a e-mailovou adresu administrátora, na kterou budou přicházet případné dotazy na obecní úřad. Po odeslání dojde ke kontrole zadaných údajů a ke kontrole spojení s databází. Pokud je vše v pořádku, je vytvořen soubor pro spojení s databází databaze.php a soubor pro TinyBrowser config_tinybrowser.php, jinak se zobrazí chybová hláška s pokyny k nápravě. Ve druhém kroku dojde automaticky k vytvoření všech databázových tabulek a jejich naplnění. Třetí krok slouží k zadání názvu obce, popisku stránek a zadání klíčových slov. Název obce se poté zobrazuje v titulku stránek a také v administraci. Ve čtvrtém kroku je vyžadováno nahrání loga na server. Logo musí mít velikost 960 x 300px a musí být ve formátu PNG. Po kontrole obrázku dojde k jeho nahrání na server pod jménem logo.png. V předposledním pátém kroku je vyžadováno nahrání mapy obce. Mapa musí mít maximální šířku 282px a výšku 160px a musí být opět ve formátu PNG. Mapa obce je po úspěšné kontrole nahrána pod jménem mapa.png. Poslední krok je už čistě informativní. Zobrazí se přihlašovací údaje do administrace a pokyny ke správě webových stránek.
32
5. Testování Testování je důležitou součástí tvorby každé aplikace. Ověření funkčnosti probíhalo již v průběhu její tvorby, přičemž každá funkcionalita byla několikrát otestována. Zadával jsem různé vstupy (prázdné/chybné údaje) a sledoval reakce systému na ně. Samotné testování se skládalo ze tří částí. Nejprve jsem testoval průchody na základě USE CASE diagramů a souvisejících možností aplikace (viz podkapitoly 3.1 a 3.2), jako např. vložení aktuality, upravení příspěvků, aktualizace životních situací, atd. Díky tomu byly odstraněny hlavní chyby a nedostatky aplikace, např. neexistence fotogalerií pro jednotlivé fotografie, nemožnost aktualizace několika životních situací najednou a mnoho dalších. Dále jsem se snažil ověřit, zda budou uživatelé vědět, kde hledat informace o životních situacích. Pro toto zjištění jsem využil aplikaci USABILLA [19]. Použití této aplikace je velmi jednoduché. Na začátku jsem zvolil, jakou stránku chci otestovat a nahrál její snímek. Poté jsem vložil testovací úkol, který má tester splnit. V mém případě to byla otázka „Kde byste hledali informace o řešení životních situací (např. výměna řidičského průkazu)?“. Takto nadefinovaný test byl k dispozici online a testeři (17 osob různého věku a schopností práce s počítačem) ho vyplňovali v domácnosti prostřednictvím svého prohlížeče. Princip této metody je takový, že se testerům zobrazí daný snímek stránky a úkol na splnění. Ten splní tak, že pouze klikají do stránky, kde jim to dává vzhledem k úkolu největší smysl a mohou také připsat svůj komentář. Výsledek testování si můžeme zobrazit prostřednictvím tzv. „tepelných map“, které zobrazují barevnou mapu intenzity kliků na jednotlivá místa stránky. Ve výsledku Usabilla testu (viz obrázek 5.1) jsou viditelné tři zóny nejčastějších kliků. Nejvíce testerů (14) tyto informace správně hledalo pod odkazem „Obecní úřad“. Ostatní testeři (3) označili buď „Diskuze“, „Odkazy“ nebo levý panel.
Obrázek 5.1: Výsledek Usabilla testu (vizualizace prostřednictvím tepelné mapy)
Poté jsem využil testování použitelnosti prostřednictvím potencionálních uživatelů systému. Cílem tohoto testování bylo odhalit nedostatky v uživatelském rozhraní, které 33
by mohly uživatelům znepříjemňovat práci se systémem. Testovací úkoly (ve formě jakou dostali účastníci testu) najdete v příloze E.4.
5.1 Účastníci Aplikaci budou nejčastěji využívat obyvatelé obce, kteří mají alespoň základní znalosti práce s počítačem. Totéž platí i pro administrátora webu. Testování se zúčastnilo 6 osob s různou schopností práce s počítačem a internetem. V tabulce 5.1 je uveden seznam účastníků testování (označených jako U1-U6) a jejich odpovědí na otázky, díky kterým jsem získal přehled o jejich zkušenostech a schopnostech s prací na počítači. Pre-test dotazník je k nalezení (ve formě jakou dostali účastníci testu) v příloze E.3.
Účastníci testu Otázky U1
U2
U3
U4
U5
U6
Jste muž nebo žena?
Žena
Muž
Žena
Muž
Muž
Muž
Kolik je Vám let?
31
22
48
26
50
61
Používáte počítač?
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Ano
Základní
Pokročilé
Základní
Střední
Střední
Základní
Neznám
Ano
Neznám
Ne
Ne
Neznám
Je Váš počítač připojen k internetu? Jaké máte zkušenosti s prací na počítači? Máte nějaké zkušenosti s redakčními systémy?
Tabulka 5.1: Výsledky Pre-test dotazníku
5.2 Nastavení testu Samotné testování probíhalo z velké části v domácím prostředí, a také ve škole (ČVUT FEL) na přenosném počítači (notebooku) s úhlopříčkou 15.4” a rozlišením 1280x800 bodů. Pro testování aplikace bylo nutné připojení k internetu (testování aktuálnosti životních situací). Účastníci testu již měli připravený prostor na serveru. Byly zde již nakopírované soubory s nastavenými přístupovými právy pro zápis (vzhledem k tomu, že se jedná o jednoduchou a časově nenáročnou operaci, která nebyla podstatou testování). Účastníci byli požádáni, aby se snažili vžít do role jak správce, tak běžného uživatele obecních webových stránek. Během testování jsem pomáhal účastníkům v situacích, kdy nevěděli jak pokračovat, a také jsem si psal jejich poznámky a připomínky. Na začátku testu dostali účastníci prostor na krátké seznámení (prohlédnutí) úvodní stránky aplikace.
34
5.3
Testovací úkoly
Na začátku testování dostal každý účastník testu seznam deseti úkolů, které má splnit. Nejprve to byly úkoly pro administrátora webu a poté pro přihlášeného uživatele (tedy běžného uživatele, který bude využívat možností přihlášeného uživatele).
Úkoly pro administrátora Úkol 1:
Proveďte instalaci systému na doméně www.obecobora.eu. Údaje pro spojení s databází: Server: mysql5-4, Jméno: obora.108975, Heslo: obecobora, Databáze: obora_108975. (pro účely testování jsou soubory na serveru již nakopírované a u určitých souborů jsou nastavená přístupová práva pro zápis). Správný postup: Zadání údajů pro připojení k databázi (server, jméno, heslo a databáze) a e-mailové adresy. Kliknutí na odkaz „Pokračovat k vytvoření tabulek“. Kliknutí na odkaz „Pokračovat“. Zadání údajů pro nastavení webu (název obce, popisek stránek, klíčová slova). Kliknutí na odkaz „Pokračovat“. Výběr loga a stisknutí tlačítka „Nahrát“. Kliknutí na odkaz „Pokračovat“. Výběr mapy a stisknutí tlačítka „Nahrát“. Kliknutí na odkaz „Pokračovat“. Kliknutí na odkaz „Přejít na web“. Úkol 2:
Přihlaste se do systému. Uživatelské jméno: admin, heslo: adminpass a přejděte do administrace. Správný postup: V patičce kliknutí na odkaz „Přihlásit se“. Zadání uživatelského jména a hesla. Stisknutí tlačítka „Přihlásit“. Úkol 3: Vložte novou aktualitu. Správný postup: V uživatelském panelu kliknutí na odkaz „Administrace“. V administraci kliknutí na odkaz „Aktuality“. Kliknutí na odkaz „Vložit aktualitu“. Vyplnění titulku, stručného úvodu a samotné aktuality. Stisknutí tlačítka „Vložit“. Úkol 4: Zjistěte, zda jsou životní situace v systému aktuální a pokud ne, aktualizujte je. Správný postup: V uživatelském panelu kliknutí na odkaz „Administrace“. V administraci kliknutí na odkaz „Životní situace“. Kliknutí na odkaz „Aktualizace životních situací“. Zaškrtnutí neaktuálních životních situací. Stisknutí tlačítka „Aktualizovat“. Úkol 5: Do sekce historie vložte libovolný text a jeden obrázek. Správný postup: V uživatelském panelu kliknutí na odkaz „Administrace“. V administraci kliknutí na odkaz „Sekce“. Výběr sekce „historie“ ze seznamu sekcí a stisknutí tlačítka „Upravit sekci“. Vložení textu a pro vložení obrázku kliknutí na odkaz „Vložit/upravit obrázek“. Kliknutí na odkaz „Procházet“. Výběr obrázku a stisknutí tlačítka „Vložit“. Nakonec stisknutí tlačítka „Upravit“. Úkol 6: Odhlaste se ze systému. Správný postup: V patičce kliknutí na odkaz „Odhlásit“.
35
Úkoly pro přihlášeného uživatele Úkol 7: Pošlete dotaz na obecní úřad pomocí E-podatelny. Správný postup: Kliknutí na odkaz „E-PODATELNA“. Kliknutí na odkaz „Přihlaste se zde“. Kliknutí na odkaz „Registrovat“. Zadání uživatelského jména, hesla a e-mailové adresy. Stisknutí tlačítka „Registrovat“. Kliknutí na odkaz „Přihlásit“. Zadání uživatelského jména a hesla. Stisknutí tlačítka „Přihlásit“. Kliknutí na odkaz „Přejít do E-podatelny“. Zadání předmětu a zprávy. Stisknutí tlačítka „Odeslat“. Úkol 8: Vložte událost ke dni 10. května 2010. Správný postup: V kalendáři události vybrat pomocí šipek měsíc květen. Kliknutí na odkaz s označením hledaného dne – „10“. Kliknutí na odkaz „Přidat událost“. Zadání stručného a detailního popisu události a stisknutí tlačítka „Odeslat“. Úkol 9:
Zjistěte, jaké doklady jsou potřebné při řešení životní situace - výměna řidičského průkazu. Správný postup: V menu najetí na odkaz „OBECNÍ ÚŘAD“ a kliknutí na odkaz „ŽIVOTNÍ SITUACE“. Kliknutí na odkaz „Osobní doklady“. Dále na „Řidičské průkazy“ a nakonec na „Výměna řidičského průkazu“. Nalezení bodu číslo 10. Úkol 10: Odhlaste se ze systému. Správný postup: V patičce kliknutí na odkaz „Odhlásit [uživatelské jméno]”.
5.4 Výsledky testování Během testování účastníci ohodnotili obtížnost každého úkolu známkami 1 - 5 (1 – nejlehčí, 5 - nejtěžší). V následující tabulce uvádím souhrn všech deseti úkolů společně s jejich známkami.
Úkoly
Účastníci testu U1
U2
U3
U4
U5
U6
1
2
1
1
2
1
1
2
1
2
1
1
1
2
3
1
1
1
2
1
1
4
1
2
1
1
1
2
5
2
1
3
1
2
3
6
1
1
1
1
1
1
7
1
2
1
1
1
1
8
2
1
2
1
1
1
9
1
1
1
1
1
1
10
1
1
1
1
1
1
Tabulka 5.2: Hodnocení obtížnosti testovaných úkolů
36
5.4.1 Průběh testovacích úkolů se zaznamenanými problémy Úkol 1:
Proveďte instalaci systému na doméně www.obecobora.eu.
Instalace probíhala bez problémů. Účastníci U1 a U4 nevěděli, co mají zadat do formulářových políček „Popisek stránek“ a „Klíčová slova“. Nevšimli si totiž odkazu „Zobrazit příklad“, který byl umístěn pod formulářem. Úkol 2:
Přihlaste se do systému. Uživatelské jméno: admin, heslo: adminpass a přejděte do administrace.
Všichni účastníci správně prohlédli obsah celých stránek a poté v patičce našli odkaz „Přihlásit se“. Účastníci U3 a U6 měli problémy s nalezením tohoto odkazu, ale po určité době ho našli. Účastníci U2 a U5 schválně zadali jiné než zadané heslo. Na špatně zadané heslo byli upozorněni červenou chybovou hláškou. Účastník U5 ocenil, že mu systém ihned po přihlášení nabídl možnost „Přejít do administrace“. Úkol 3:
Vložte novou aktualitu.
Tento úkol nikomu nečinil žádné problémy. V administraci si všichni hned všimli odkazu „Aktuality“ a dále „Vložit aktualitu“. Účastník U4 se podivoval nad tím, jaký je rozdíl mezi „Stručným úvodem“ a „Aktualitou“. Účastník U2 si formulářového pole pro vložení aktuality nevšiml a po stisknutí tlačítka „Vložit“ byl na toto prázdné pole upozorněn chybovou hláškou. Napodruhé už aktualitu odeslal v pořádku. Úkol 4:
Zjistěte, zda jsou životní situace v systému aktuální a pokud ne, aktualizujte je.
Účastníkovi U6 déle trvalo, než přišel na to, jak se vrátit na úvodní stránku administrace. Nakonec si všiml drobečkové navigace a správně jí použil. Všichni účastníci správně klikli na odkaz „Životní situace“ a poté na „Aktualizace životních situací“. Vzhledem k tomu, že aktualizace trvá delší dobu, většina účastníků nevěděla, zda se něco děje a chtěli na tento odkaz kliknout znovu. Po zobrazení životních situací účastníci správně zaškrtli zaškrtávací políčko situace s červeným obrázkem a stisknuli odkaz „Aktualizovat“. Úkol 5:
Do sekce historie vložte libovolný text a jeden obrázek.
Po zkušenostech s předchozími otázkami už žádný účastník neměl problém s přechodem na úvodní stránku administrace a nalezením odkazu „Sekce“. S výběrem sekce „historie“ také nebyl problém. Účastník U1 upozornil na to, že neví, jestli se nachází ve správné sekci. Napsání textu do formuláře proběhlo bez potíží. Vzhledem k tomu, že ze šesti testovaných osob měl pouze jeden z nich zkušenost s WYSIWYG editory, nastal problém s vložením obrázku. Účastník U2, který tuto zkušenost má, s tím neměl žádný problém. Účastníci U1, U4 a U5 začali zkoumat jednotlivé položky editoru a našli odkaz „Vložit/upravit obrázek“. Poté se jim již obrázek podařilo vložit. Účastníci U3 a U6 snahu o vložení obrázku vzdali a nechali si poradit. Úkol 6:
Odhlaste se ze systému.
Tento úkol proběhl naprosto v pořádku. Úkol 7:
Pošlete dotaz na obecní úřad pomocí E-podatelny.
Účastníci U1, U2 a U3 správně usoudili, že by se E-podatelna měla nacházet v sekci „Obecní úřad“ a v pořádku jí našli. Účastník U4 vyhledal E-podatelnu přímo přes mapu webu. Zbylí účastníci si nejprve přečetli základní sekce menu a poté je začali postupně prohledávat. Vzhledem k tomu, 37
že začali sekcí „Obecní úřad“ – „Úvod“ a „Aktuality“ správně vynechali, také našli E-podatelnu vcelku rychle. Po kliknutí na odkaz „E-podatelna“ byli účastníci upozorněni, že musí být přihlášeni. Správně klikli na odkaz „Přihlaste se zde“. Dále všechny účastníky testu napadlo, že pro přihlášení musejí být nejprve registrováni. Stisknuli tedy odkaz „Registrovat“. Účastník U4 zvolil heslo kratší než 5 znaků. Posléze byl upozorněn na to, že heslo musí mít minimálně 5 znaků, ale stejně by si přál, kdyby tuto informaci věděl už při zadávání hesla. Účastníci U3 a U5 napsali do textového políčka e-mailovou adresu ve špatném tvaru a posléze byli na tuto skutečnost upozorněni chybovou hláškou. Po registraci se všichni účastníci přihlásili. Po přihlášení přešli účastníci U1, U2, U3 a U6 rovnou do E-podatelny pomocí odkazu „Přejít do E-podatelny“. Účastníci U4 a U5 se do ní dostali opět přes menu. Úkol 8:
Vložte událost ke dni 10. května 2010.
Většina účastníků si již dříve všimla umístění kalendáře událostí v levém panelu stránek, a proto s tímto úkolem neměli problémy. Pouze účastník U3 začal kalendář událostí hledat v menu a až posléze si ho všiml při prohlížení stránky. Všichni účastníci se správně pomocí šipky přesunuli z měsíce dubna na měsíc květen a správně klikli na určený den a vložili událost. Úkol 9:
Zjistěte, jaké doklady jsou potřebné při řešení životní situace - výměna řidičského průkazu.
Účastníky U1, U2 a U5 ihned napadlo, že by se životní situace měly nacházet v sekci „Obecní úřad“. Zbylí účastníci začali prohledávat menu, opět vynechali úvod a aktuality, a proto životní situace také našli rychle. Vyhledání dané životní situace už zvládl každý napoprvé. Úkol 10: Odhlaste se ze systému. Tento úkol proběhl naprosto v pořádku. Účastníci si již pamatovali, kde byly odkazy pro přihlášení a registraci, a proto s tímto úkolem neměli problém.
5.5 Shrnutí Hodnocení účastníků testu bylo velmi kladné. Líbil se design stránek a také byla oceněna jednoduchost práce se systémem. Přesto padly určité připomínky a návrhy na vylepšení, které byly dodatečně implementovány. Po testování došlo k následujícím změnám: V instalaci byl přesunut odkaz „Zobrazit příklad“ nad formulář pro zadávání údajů. U náhodného obrázku byl přidán odkaz na přechod do fotogalerie. U registrace a změny registračních údajů byla u zadávání hesla přidána informační hláška „Heslo musí mít minimálně 5 znaků“. V administraci byla přidána informační hláška „Po stisknutí tlačítka vyčkejte na dokončení operace“. V administraci u úpravy sekcí byl přidán název upravované sekce.
38
6. Závěr Cílem této práce bylo navrhnout univerzální webový portál pro malou obec, zohlednit jeho volitelný a povinný obsah a také navrhnout jednoduchý redakční systém a systém, který umožní využití aktuálních informací z portálu veřejné správy. V průběhu semestru jsem se snažil co nejlépe splnit dané zadání. Postupně jsem realizoval jednotlivé fáze od analýzy až po samotnou tvorbu systému. Po dokončení tvorby systému byly provedeny testy. Nejprve jsem testoval průchody na základě USE CASE diagramů. Dále jsem si pomocí Usabilla testu ověřil, zda uživatelé na stránkách najdou informace o životních situacích a následně jsem provedl test použitelnosti. Díky tomuto testování jsem provedl několik úprav v systému. Teprve až samotné nasazení systému do praxe by přesněji odhalilo případné nedostatky. Práce pro mě byla velkým přínosem. Například jsem se seznámil s do té doby pro mě neznámým modulem SimpleXML, který se využívá na zpracování XML souborů. Vytvořený systém je podle mého názoru dobře použitelný, jednoduchý a pro jeho správce by měl být velmi lehce ovladatelný.
39
40
Literatura [1]
Portál veřejné správy České republiky [online]. c2003-2010 [cit. 2010-02-14]. Dostupné z WWW:
.
[2]
Wikipedia, the free encyclopedia [online]. c2001-2010 [cit. 2010-02-23]. WYSIWYG. Dostupné z WWW: .
[3]
TinyMCE - Javascript WYSIWYG Editor [online]. c2003-2010 [cit. 2010-02-23]. Dostupné z WWW: .
[4]
Bezbariérový web a přístupnost [online]. c2007 [cit. 2010-02-27]. Web Contant Accessibility Guidelines 2.0. Dostupné z WWW: .
[5]
Pravidla tvorby přístupného webu [online]. [cit. 2010-02-27]. Dostupné z WWW: .
[6]
KRUG, Steve . Web design – Nenuťte uživatele přemýšlet., Computer Press, 2006. 168 s.
[7]
Wikipedia, the free encyclopedia [online]. c2001-2010 [cit. 2010-03-15]. SQL. Dostupné z WWW: .
[8]
MySQL - The world's most popular open source database [online]. c2010 [cit. 2010-03-15]. Dostupné z WWW: .
[9]
PHP [online]. c2001-2010 [cit. 2010-03-15]. Hypertext Preprocessor. Dostupné z WWW: .
[10]
World Wide Web Consortium (W3C) [online]. c1995-2007 [cit. 2010-03-15]. W3C XHTML2 Working Group Home Page. Dostupné z WWW: .
[11]
World Wide Web Consortium (W3C) [online]. c2010 [cit. 2010-03-15]. Dostupné z WWW: .
[12]
The W3C Markup Validation Service [online]. c1994-2010 [cit. 2010-03-15]. Dostupné z WWW: .
[13]
World Wide Web Consortium (W3C) [online]. c2010 [cit. 2010-03-20]. Cascading Style Sheets. Dostupné z WWW: .
[14]
Wikipedia, the free encyclopedia [online]. c2001-2010 [cit. 2010-03-20]. JavaScript. Dostupné z WWW: .
[15]
Lunarvis Web Design & Systems Development [online]. c2009 [cit. 2010-04-02]. TinyBrowser - Web File Browser. Dostupné z WWW: .
41
[16]
Wikipedia, the free encyclopedia [online]. c2001-2010 [cit. 2010-04-05]. SQL injection. Dostupné z WWW: .
[17]
PEJŠA, Jan. Zdroják [online]. c2008-2010 [cit. 2010-04-05]. Co je Cross-site scripting jak mu předcházet. Dostupné z WWW: .
[18]
PHP [online]. c2001-2010 [cit. 2010-04-11]. SimpleXML - Manual. Dostupné z WWW: .
[19]
Usabilla - Transparent Usability [online]. [cit. 2010-04-26]. Dostupné z WWW: .
42
Příloha A Seznam použitých zkratek WCAG
celosvětově nejznámější pravidla pro tvorbu přístupného webu (Web Content Accessibility Guidelines)
PHP
skriptovací programovací jazyk (Personal Home Page, PHP: Hypertext Preprocessor)
PDF
souborový formát (Portable Document Format)
DOC
přípona souborů textových dokumentů programu Microsoft Word 2003 (Zkratka z DOCument)
DOCX
přípona souborů textových dokumentů programu Microsoft Word 2007, formát založený na XML
WYSIWYG
způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu (akronym anglické věty „What you see is what you get“, česky „co vidíš, to dostaneš“)
HTML
hypertextový značkovací jazyk (HyperText Markup Language)
CSS
kaskádové styly (Cascading Style Sheets)
SQL
strukturovaný dotazovací jazyk (Structured Query Language)
W3C
mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web (World Wide Web Consortium)
UML
jazyk pro modelování a návrh softwaru (Unified Modeling Language)
XSS
metoda narušení WWW stránek využitím bezpečnostních chyb ve skriptech (Cross-site-scripting)
PX
základní délková jednotka (pixel)
PNG
bezeztrátový obrazový formát (Portable Network Graphics)
43
44
Příloha B Uživatelská příručka B.1 Instalace a nastavení Pro využívání systému budete potřebovat hosting s podporou PHP a MySQL. Samotná instalace (nasazení) systému je velmi jednoduchá. Po stažení souboru bakalářka.zip je nutné tento soubor pomocí archivačního programu (např. WinRAR nebo Total Commander) rozbalit. Obsah rozbaleného archívu nahrajte na web (nejčastěji do složky s názvem 'www', 'public_html', nebo 'html'). K tomu budete muset využít FTP klienta (např. Total Commander nebo FileZilla). Otevřete si prohlížeč a přejděte na adresu http://mojedomena/index.php/, spustí se instalace. Krok 1: Nastavení přístupových práv a zadání přístupových údajů k Vaší databázi Pro správnou funkci aplikace je nutné některým adresářům nastavit přístupová práva na 777. Konkrétně se jedná o tyto adresáře: db pictures administrace/upload/obrazky administrace/upload/obrazky/_thumbs administrace/upload/deska administrace/upload/fotografie/miniatury administrace/upload/fotografie/original tiny_mce/plugins/tinybrowser Dále nastavte správné údaje pro přístup k Vaší databázi (server, jméno, heslo, databázi) a e-mail a stiskněte tlačítko „Odeslat“. Po odeslání dojde ke kontrole zadaných údajů a ke kontrole spojení s databází. Pokud je vše v pořádku, budete o tom informováni a zobrazí se odkaz „Pokračovat k vytvoření tabulek“. Ten stiskněte. Krok 2: Nahrání údajů do databáze Ve 2. kroku dojde automaticky k vytvoření všech databázových tabulek a jejich vyplnění. O úspěšném vytvoření a naplnění tabulek budete informování a stiskněte „Pokračovat“. Krok 3: Nastavení webu Tento krok slouží k zadání názvu obce, popisku stránek a zadání klíčových slov. Po vyplnění těchto políček stiskněte tlačítko „Odeslat“. Pokud jsou všechna políčka vyplněna, nastavení bude uloženo a zobrazí se odkaz „Pokračovat“. Ten stiskněte. Krok 4: Nahrání loga Webové stránky se samozřejmě neobejdou bez loga. V tomto kroku je požadováno nahrání loga o velikosti 960 x 300px a ve formátu PNG. Logo nahrajete stisknutím tlačítka „Nahrát“. 45
Po úspěšné kontrole velikosti a typu obrázku dojde k jeho uložení a zobrazí se odkaz „Pokračovat“. Po jeho stisknutí se přejde na nahrání mapy. Krok 5: Nahrání mapy V dalším kroku vyberte mapu Vaší obce o maximální šířce 282px a výšce 160px a ve formátu PNG a stiskněte tlačítko „Nahrát“. Po úspěšné kontrole velikosti a typu obrázku dojde k jeho uložení a zobrazí se odkaz „Pokračovat“. Ten stiskněte. Krok 6: Informace Pokud jste došli až k tomuto kroku, instalace je u konce a systém Vám zobrazí přihlašovací údaje pro vstup do administrace.
Web je již funkční. V administraci si nyní vyplňte levý panel (kontaktní údaje, úřední hodiny) a také můžete přistoupit k vyplňování jednotlivých sekcí.
B.2 Systém z pohledu uživatele B.2.1 Registrace Na každé stránce se v patičce vyskytuje odkaz „Registrovat“. Pro založení účtu zadejte uživatelské jméno (login), heslo a e-mailovou adresu. Poté stiskněte tlačítko „Registrovat“ (viz obrázek B.1). Při nesprávně vyplněných údajích se zobrazí informace, kde došlo k chybě. Pokud jsou údaje vyplněné správně, registrace proběhla v pořádku.
Obrázek B.1: Registrace
B.2.2 Přihlášení Na každé stránce se v patičce vyskytuje odkaz „Přihlásit se“. Pro přihlášení do systému zadejte uživatelské jméno (login) a heslo. Poté stiskněte tlačítko „Přihlásit“ (viz obrázek B.2). 46
Při nesprávně vyplněných údajích se zobrazí informace, kde došlo k chybě. Pokud jsou údaje vyplněné správně, budete přihlášeni. Po úspěšném přihlášení se v patičce místo odkazů „Registrovat“ a „Přihlásit se“ objeví odkazy „Uživatelský panel“ a „Odhlásit“ s uživatelským jménem přihlášeného uživatele. Po skončení práce se systémem se můžete odhlásit.
Obrázek B.2: Přihlášení
B.2.3 Zapomenuté heslo Po stisknutí odkazu „Přihlásit se“ se objeví stránka pro přihlášení. Zde je potřeba stisknout odkaz „Zapomněli jste heslo?“. Následně budete vyzváni k zadání vašeho uživatelského jméno (loginu) a e-mailové adresy, na kterou vám po stisknutí tlačítka „Odeslat“ (pokud jste zadali správné údaje) přijde nové heslo, které si poté můžete změnit (viz obrázek B.3).
Obrázek B.3: Zapomenuté heslo
B.2.4 Změna registračních údajů Změnit si registrační údaje můžete až po vašem přihlášení do systému. Po přihlášení se automaticky zobrazí stránka „Uživatelský panel“. Druhou možností je stisknutí odkazu „Uživatelský panel“ v patičce. V uživatelském panelu stiskněte odkaz „Změnit registrační údaje“. 47
Zde vyplníte ta políčka, která chcete změnit (heslo, e-mail) a také musíte zadat vaše stávající heslo (viz obrázek B.4). Po stisknutí tlačítka „Změnit“ (pokud vše proběhne v pořádku), budete informováni o dané změně, jinak se zobrazí chybová hláška.
Obrázek B.4: Změna registračních údajů
B.2.5 Diskuze – vložení příspěvku Abyste mohli vkládat příspěvky, musíte být přihlášeni. Po přihlášení stiskněte odkaz „DISKUZE“, který se nachází v menu stránek. Dále si vyberte téma, do kterého chcete přispět (viz obrázek B.5) a následně stiskněte odkaz „Vložit příspěvek“. Až napíšete váš příspěvek, stiskněte tlačítko „Odeslat“ (viz obrázek B.6). Pokud není textové pole vyplněné, zobrazí se chybová hláška, jinak dojde k odeslání příspěvku.
Obrázek B.5: Témata diskuze
48
Obrázek B.6: Vložení příspěvku
B.2.6 Kalendář událostí – vložení události Pro vložení události je nutné přihlášení v systému. V levém panelu si v kalendáři událostí vyberte den, kdy se akce uskuteční a stiskněte ho (viz obrázek B.7). Na další stránce, kde je zobrazen seznam událostí v daný den, stiskněte odkaz „Přidat událost“. Do prvního políčka zadejte stručný popis události a do druhého už detailní i s přesným časem. Nakonec stiskněte tlačítko „Odeslat“ (viz obrázek B.8). Pokud jsou obě položky vyplněné, dojde k uložení události do databáze, jinak se zobrazí chybová zpráva. Obrázek B.7: Kalendář událostí
Obrázek B.8: Přidání události 49
B.2.7 E-podatelna Pro zaslání dotazu na obecní úřad musíte být opět přihlášeni. Po přihlášení stiskněte odkaz „E-PODATELNA“, který se nachází v menu stránek. Na následující stránce vyplňte předmět dotazu a napište samotnou zprávu (viz obrázek B.9). Pokud jsou obě položky vyplněné, dojde k odeslání dotazu na obecní úřad, jinak se zobrazí chybová hláška.
Obrázek B.9: Elektronická podatelna
B.2.8 Změna vzhledu Máte na výběr mezi čtyřmi styly a to výchozím žlutým stylem, červeným stylem, šedým stylem a kontrastním stylem pro slabozraké uživatele. Odkazy pro změnu vzhledu naleznete v hlavičce stránky (viz obrázek B.10). Po stisknutí odkazu daného stylu, dojde k jeho změně.
Obrázek B.10: Změna vzhledu
B.2.9 Vyhledávání Vyhledávací políčko se nachází v levém panelu stránek (viz obrázek B.12). Po zadání hledaného slova se zobrazí stránka s výsledky hledání rozdělená do čtyř sekcí - aktuality, úřední deska, 50
životní situace a obsah (viz obrázek B.11). Pokud jste zadali slovo kratší než dva znaky, zobrazí se chybová hláška.
Obrázek B.11: Vyhledávací políčko
Obrázek B.12: Zobrazení výsledků hledání
B.3 Systém z pohledu administrátora Pro administrátora platí totéž co pro uživatele (kromě registrace) a navíc máte umožněn vstup do administrace systému. Tam přejdete stisknutím odkazu „Přejít do administrace“ v uživatelském panelu. Uživatelský panel se zobrazí automaticky po přihlášení uživatele anebo je možné se do něho dostat stisknutím odkazu „Uživatelský panel“ v patičce.
B.3.1 Aktuality (vložení, upravení, smazání) V administraci vyberte sekci „Aktuality“. Pro vložení aktuality stiskněte odkaz „Vložit aktualitu“ a zadejte její titulek, stručný úvod a nakonec samotnou aktualitu (oboje do textového editoru). Pro psaní stručného úvodu a samotné aktuality je využit TinyMCE editor a tudíž text můžete upravovat podle libosti (nadpisy, velikosti písma, barvy, atd.). Pokud budete chtít do aktuality vložit obrázek, stiskněte tlačítko „Vložit/upravit obrázek“, objeví se nové okno editoru. U políčka URL obrázku stiskněte „Procházet“. Na kartě „Nahrát“ nahrajte vámi zvolený obrázek na server a na kartě „Prohlížet“ ho vyberte. Do aktuality také můžete vkládat dokumenty. Označte v obsahu text, který chcete zalinkovat a stiskněte tlačítko „Vložit/upravit odkaz“. Objeví se nové okno editoru a další postup je stejný jako u vkládání obrázků. Po skončení vytváření aktuality stiskněte tlačítko „Vložit“ (viz obrázek B.13). Jestliže některé políčko zůstane prázdné, zobrazí se chybová hláška. Pokud aktualitu budete chtít pouze upravit, stiskněte odkaz „Upravit aktualitu“, dále v seznamu vyberte aktualitu, kterou chcete upravit a dejte „Upravit aktualitu“. Po její úpravě stiskněte tlačítko „Upravit“. Další možností je smazání aktuality. Toho docílíte stisknutím odkazu „Smazat aktualitu“. V seznamu vyberte danou aktualitu a dejte „Smazat aktualitu“. 51
Obrázek B.13: Vložení aktuality
B.3.2 Úřední deska (vložení, upravení, smazání) V administraci vyberte sekci „Úřední deska“. Pro vložení příspěvku (dokumentu) na úřední desku stiskněte odkaz „Vložit příspěvek“. Poté vyberte daný dokument, zadejte nadpis odkazu (pod tímto názvem se dokument zobrazí na stránkách) a zadejte od kdy, do kdy daný dokument platí. Nakonec stiskněte tlačítko „Přidat“. Pokud bude nějaká položka špatně vyplněná, zobrazí se chybová hláška. Další možností je úprava příspěvku (dokumentu) na úřední desce. Stiskněte odkaz „Upravit příspěvek“ a v seznamu si vyberte daný příspěvek. Pokud chcete změnit pouze soubor, vyberte ho a dejte „Upravit“. Jestliže nechcete měnit soubor, ale jen název odkazu, popř. data platnosti příspěvku, krok vybrání souboru přeskočte. Příspěvek (dokument) na úřední desce můžete také smazat. Zvolte odkaz „Smazat příspěvek“ a ze seznamu si vyberte ten příspěvek, který chcete smazat a stiskněte tlačítko „Smazat příspěvek“.
52
B.3.3 Diskuze B.3.3.1
Témata (přidání, upravení, smazání)
V administraci vyberte sekci „Diskuze“ a v ní „Témata“. Pro přidání tématu stiskněte odkaz „Přidat téma“ a do políčka název tématu vložte jeho název. Stiskem tlačítka „Přidat“ stvrdíte jeho přidání. Jestli bude políčko prázdné, zobrazí se chybová hláška. Upravení tématu proběhne tak, že stisknete odkaz „Upravit téma“ a v seznamu si vyberete, jaké téma chcete upravit. Po jeho úpravě stiskněte tlačítko „Upravit“. Pokud chcete téma smazat, stiskněte odkaz „Smazat téma“ a po vybrání tématu ze seznamu, stiskněte tlačítko „Smazat téma“.
B.3.3.2
Příspěvky (vložení, upravení, smazání)
Pro práci s příspěvky vyberte sekci „Diskuze“ a v ní „Příspěvky“. Nyní se vám zobrazí seznam témat diskuze. Vyberte vámi zvolené téma a stiskněte ho. Na následující stránce se zobrazí příspěvky v daném tématu. Nahoře se vyskytuje odkaz „Vložit příspěvek“ a vpravo u každého příspěvku dvě ikonky (viz obrázek B.14). První slouží k upravení příspěvku a druhá k jeho smazání. Po stisknutí odkazu „Vložit příspěvek“ se dostanete na stránku, na které napište příspěvek a stiskněte tlačítko „Odeslat“. Jestli bude textové pole prázdné, budete na to samozřejmě upozorněni. Pro upravení příspěvku stiskněte odkaz „Upravit příspěvek“ a po jeho upravení stiskněte tlačítko „Upravit“. Příspěvek můžete také smazat a to stiskem odkazu „Smazat příspěvek“. Po jeho stisknutí dojde ke smazání příspěvku.
Obrázek B.14: Administrace - zobrazení příspěvků
B.3.4 Životní situace (aktualizace) Pro aktualizaci životních situací v systému vyberte sekci „Životní situace“ a v ní „Aktualizace životních situací“. Poté vám systém zobrazí tabulku se životními situacemi a ikonkou, která znázorňuje, zda je daná situace aktuální (viz obrázek 4.2). Pokud některá ze situací není aktuální, zaškrtněte jí v zaškrtávacím políčku a stiskněte tlačítko „Aktualizovat“. Stisknete-li ho a nebude-li vybraná žádná životní situace, zobrazí se chybová hláška. 53
B.3.5 Kalendář událostí (vložení události, upravení, smazání) V administraci vyberte sekci „Kalendář událostí“. Pro vložení události vyberte v kalendáři den, kdy se akce uskuteční a stiskněte ho. Na další stránce, kde je zobrazen seznam událostí v daný den, stiskněte odkaz „Přidat událost“. Do prvního políčka zadejte stručný popis události a do druhého už detailní i s přesným časem. Nakonec stiskněte tlačítko „Odeslat“. Pokud jsou obě položky vyplněné, dojde k uložení události do databáze, jinak se zobrazí chybová hláška. Události si můžete zobrazit jednak stisknutím odkazu daného měsíce – zobrazí se jen události pro tento měsíc (např. „duben 2010“) anebo stisknutím odkazu daného dne – zobrazí se jen události pro tento den (např. „10“). U každé události jsou zobrazeny dvě ikonky. První slouží k upravení události a druhá k jejímu smazání. Pro upravení události stiskněte odkaz „Upravit událost“ a po jeho upravení stiskněte tlačítko „Odeslat“. Událost můžete také smazat a to stiskem odkazu „Smazat událost“. Po jeho stisknutí dojde ke smazání události. Pokud chcete smazat všechny neaktuální události, stiskněte odkaz „Smazat neaktuální události“.
B.3.6 Fotogalerie B.3.6.1
Fotogalerie (vytvoření, upravení, smazání)
Pro práci s fotogaleriemi vyberte v administraci sekci „Fotogalerie“ a v ní „Fotogalerie“. Pro vytvoření fotogalerie stiskněte odkaz „Přidat fotogalerii“ a do políčka název fotogalerie vložte její název. Stiskem tlačítka „Vytvořit“ stvrdíte její vytvoření. Jestli bude políčko prázdné, zobrazí se chybová hláška. Upravení názvu fotogalerie proběhne tak, že stisknete odkaz „Upravit fotogalerii“ a v seznamu si vyberete, jakou fotogalerii chcete upravit. Po její úpravě stiskněte tlačítko „Upravit“. Pokud chcete fotogalerii smazat, stiskněte odkaz „Smazat fotogalerii“ a po vybrání fotogalerie ze seznamu, stiskněte tlačítko „Smazat fotogalerii“.
B.3.6.2
Fotografie (nahrání, smazání)
V administraci vyberte sekci „Fotogalerie“ a v ní „Fotografie“. Zobrazí se seznam všech fotogalerií. Pokud chcete nahrát obrázek (fotografii), vyberte si, do jaké fotogalerie ho chcete nahrát a stiskněte v ní odkaz „Vložit fotografii“. Na další stránce ho vyberte (max. 1,5 MB), zadejte jeho popisek a pro jeho nahrání stiskněte tlačítko „Nahrát“. Další možností je smazání obrázku. Opět si vyberte fotogalerii, ve které chcete mazat obrázky. Konkrétní obrázek odstraníte stisknutím odkazu „Smazat obrázek“ (červený křížek – viz obrázek B.15). Dojde k jeho smazání ze serveru a současně informací z databáze. Obrázek B.15: Smazání O úspěšném provedení budete informováni. obrázku
B.3.7 Sekce webu (upravení) V administraci vyberte sekci „Sekce webu“. V seznamu vyberte sekci, kterou chcete upravovat a stiskněte tlačítko „Upravit sekci“. V zobrazeném textového editoru upravte (nebo pokud je zatím prázdná vyplňte) sekci. Pro psaní sekcí je využit TinyMCE editor a tudíž text můžete upravovat podle libosti (nadpisy, velikosti písma, barvy, atd.). Pokud budete chtít do sekcí vložit 54
obrázek, stiskněte tlačítko „Vložit/upravit obrázek“, objeví se nové okno editoru. U políčka URL obrázku stiskněte „Procházet“. Na kartě „Nahrát“ nahrajte vámi zvolený obrázek na server a na kartě „Prohlížet“ ho vyberte. Do sekcí také můžete vkládat dokumenty. Označte v obsahu text, který chcete zalinkovat a stiskněte tlačítko „Vložit/upravit odkaz“. Objeví se nové okno editoru a další postup je stejný jako u vkládání obrázků. Stiskem tlačítka „Uložit“ potvrdíte změny v dané sekci. Pokud zůstane textové pole nevyplněné, zobrazí se chybová hláška.
B.3.8 Nastavení B.3.8.1
Změna nastavení webu
Na úvodní stránce v administraci stiskněte odkaz „Nastavení“ a v něm „Změnit nastavení webu“. Zde můžete upravit jak název obce, tak i popisek stránek a klíčová slova. Po upravení stiskněte tlačítko „Upravit“. Pokud necháte některá políčka prázdná, zobrazí se chybová hláška.
B.3.8.2
Změna loga
Na úvodní stránce v administraci stiskněte odkaz „Nastavení“ a v něm „Změnit logo webu“. Vyberte jiné logo o velikosti 960 x 300px a formátu PNG a dejte „Nahrát“. Pokud vybraný obrázek nebude splňovat uvedené požadavky, zobrazí se chybová hláška.
B.3.8.3
Změna mapy
Na úvodní stránce v administraci stiskněte odkaz „Nastavení“ a v něm „Změnit mapu na webu“. Vyberte jinou mapu o maximální šířce 282px a výšce 160px a formátu PNG a dejte „Nahrát“. Pokud vybraný obrázek nebude splňovat uvedené požadavky, zobrazí se chybová hláška.
55
56
Příloha C Seznam tabulek a atributů Na následujících stránkách naleznete seznam všech tabulek a jejich atributů. Vysvětlivky: PK FK
-
Primární klíč Cizí klíč
Uzivatel Obsahuje seznam uživatelů a jejich registračních údajů v systému. Název atributu uid login heslo email
Klíč Datový typ Unikátní PK INT ANO VARCHAR ANO VARCHAR NE VARCHAR NE Tabulka C.1: Databázová tabulka Uzivatel
Fulltext NE NE NE NE
Temata Obsahuje seznam témat v diskuzi. Název atributu tid tema
Klíč Datový typ Unikátní PK INT ANO VARCHAR ANO Tabulka C.2: Databázová tabulka Temata
Fulltext NE NE
Vzkaz Obsahuje seznam vzkazů v diskuzi. Název atributu vid datum vzkaz id_tematu id_uzivatele
Klíč Datový typ Unikátní PK INT ANO DATETIME NE VARCHAR NE FK INT NE FK INT NE Tabulka C.3: Databázová tabulka Vzkaz
57
Fulltext NE NE NE NE NE
Udalost Obsahuje seznam událostí v kalendáři. Název atributu id datum nadpis udalost id_uzivatele
Klíč Datový typ Unikátní PK INT ANO DATE NE VARCHAR NE VARCHAR NE FK INT NE Tabulka C.4: Databázová tabulka Udalost
Fulltext NE NE NE NE NE
Svatek Slouží k zobrazení jména toho, kdo má daný den svátek. Název atributu id jmeno
Klíč Datový typ Unikátní PK INT ANO VARCHAR NE Tabulka C.5: Databázová tabulka Svatek
Fulltext NE NE
Aktuality Obsahuje seznam aktualit v systému. Název atributu aid datum titulek uvod aktualita
Klíč Datový typ Unikátní PK INT ANO DATE NE VARCHAR NE VARCHAR NE VARCHAR NE Tabulka C.6: Databázová tabulka Aktuality
Fulltext NE NE ANO ANO ANO
Uredni_deska Obsahuje seznam dokumentů na úřední desce. Název atributu uid od do nadpis_odkazu cesta koncovka velikost nazev
Klíč Datový typ Unikátní PK INT ANO DATE NE DATE NE VARCHAR NE VARCHAR NE VARCHAR NE INT NE VARCHAR NE Tabulka C.7: Databázová tabulka Uredni_deska
58
Fulltext NE NE NE ANO NE NE NE NE
Sekce Obsahuje seznam sekcí v systému. Název atributu id kategorie obsah cesta
Klíč Datový typ Unikátní PK INT ANO VARCHAR NE MEDIUMTEXT NE VARCHAR NE Tabulka C.8: Databázová tabulka Sekce
Fulltext NE ANO ANO NE
Fotogalerie Obsahuje seznam fotogalerií v systému. Název atributu id fotogalerie
Klíč Datový typ Unikátní PK INT ANO VARCHAR ANO Tabulka C.9: Databázová tabulka Fotogalerie
Fulltext NE NE
Fotografie Obsahuje seznam fotografií v systému. Název atributu fid popis cesta_nahled cesta nazev Id_fotogalerie
Klíč Datový typ Unikátní PK INT ANO VARCHAR NE VARCHAR NE VARCHAR NE VARCHAR NE FK INT NE Tabulka C.10: Databázová tabulka Fotografie
Fulltext NE NE NE NE NE NE
Zivotni_situace Obsahuje seznam životních situací v systému. Název atributu zid lft rgt hloubka nadpis
Klíč Datový typ Unikátní PK INT ANO INT NE INT NE INT NE MEDIUMTEXT NE Tabulka C.11: Databázová tabulka Zivotni_situace
59
Fulltext NE NE NE NE NE
Zivotni_situace_aktualizace Obsahuje seznam životních situací pro jejich aktualizaci v systému. Název atributu id situace nadpis datum odkaz zid
Klíč Datový typ Unikátní PK INT ANO VARCHAR NE MEDIUMTEXT NE VARCHAR NE VARCHAR NE INT NE Tabulka C.12: Databázová tabulka Zivotni_situace_aktualizace
Fulltext NE ANO ANO NE NE NE
Nastaveni Obsahuje název obce, popisek a klíčová slova. Název atributu nid nazev_obce description keywords
Klíč Datový typ Unikátní PK INT ANO VARCHAR NE VARCHAR NE VARCHAR NE Tabulka C.13: Databázová tabulka Nastaveni
60
Fulltext NE NE NE NE
Příloha D Ukázky uživatelského rozhraní
Obrázek D.1: Layout webového portálu – Aktuality 61
Obrázek D.2: Layout administrace portálu
62
Příloha E Dotazníky + testování E.1
Dotazník – životní situace + informace DOTAZNÍK (Životní situace - v příloze)
Věk: 1)
Vyřizujete rodinné záležitosti (ano/ne): V poslední době jsem vyřizoval: (můžete zaškrtnout i více odpovědí) a) osobní doklady b) rodinné záležitosti (důchod, manželství, úmrtí) c) jiné …………………………………………………………………………………………………………………………….... 1.1) Je pro vás náročné zjistit všechny informace potřebné pro zvládnutí situace? hodně – středně – málo 1.2) Stává se vám, že musíte navštívit úřad opakovaně, protože nemáte všechny potřebné dokumenty? a) ano b) ne c) jen výjimečně
2)
Jakým způsobem zjišťujete informace o životních situacích? (můžete zaškrtnout i více odpovědí) a) na internetu b) zeptám se na místním úřadě c) na informační tabuli místního úřadu
3)
Znáte internetové stránky kde lze hledat tyto informace? a) ano, adresa je: …………………………………………………………………………………………………………….… b) ano, ale jen pro některé situace, adresa je: ………………………………………………………………….. c) ne (pokračujte otázkou číslo 4) 3.1) Obsahují tyto stránky dostatek informací? a) ano b) ne c) nevím
63
3.2) Jsou všechny informace na těchto stránkách dobře dostupné? a) ano b) ne c) nevím 4)
Uvítali byste systém vyhledávání informací o řešení těchto životních situací na stránkách Vaší obce? a) ano b) ne c) nevím (ještě jsem se do těchto situací nedostal/a)
5)
Chybí vám v přiloženém seznamu některé životní situace? a) ano, uveďte které: …………………………………………………………………………………………………………..… ………………………………………………………………………………………………………………………………………….. b) ne
6)
Jsou naopak některé životní situace v seznamu zbytečné? a) ano, uveďte které: …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………….... b) ne
7)
Znáte internetové stránky Vaší obce? a) ano b) ne 7.1) Hledáte na stránkách Vaší obce nějaké informace? a) ano, uveďte které: ….……………………………………………………………………………………………….. …………………………………………………………………………………………………………………………………. b) ne 7.2) Jaké informace byste tam rád(a) viděl(a)? Přiřaďte jim pořadí důležitosti podle toho, jak je pro Vás daná informace důležitá (1 = nejdůležitější) -
64
Životní situace – Příloha Osobní doklady Občanské průkazy o Vydání občanského průkazu o Hlášení trvalého pobytu Cestovní doklady o Vydání cestovního dokladu Řidičské průkazy o Vydání řidičského průkazu o Výměna řidičského průkazu o Změna údajů v řidičském průkazu o Ztráta, odcizení, poškození nebo zničení řidičského průkazu o Odevzdání řidičského průkazu Rodina Důchodový věk o Odchod do starobního důchodu o Vdovský důchod o Předčasný starobní důchod Manželství o Uzavření manželství formou občanského sňatku o Uzavření manželství formou církevního sňatku Rodičovství o Narození dítěte Porodné Rodičovský příspěvek Peněžitá pomoc v mateřství Přihlášení novorozence do zdravotní pojišťovny o Péče o dítě Přídavek na dítě Sociální příplatek Ošetřovné Úmrtí Vdovský důchod Vdovecký důchod Sirotčí důchod
65
Na dotazník odpovídalo 13 respondentů různých věkových skupin (18-30, 31-54, 55-65). Ve věkové skupině odpovídalo: 18-30 31-54 55-65
7 respondentů 4 respondenti 2 respondenti
Závěr: 1)
Respondenti do 54 let vyřizovali v poslední době nejčastěji osobní doklady. Starší respondenti rodinné záležitosti. 1.1)
Pro mladší lidi je zjištění všech informací poměrně nenáročné, pro starší středně až spíše hodně náročné.
1.2)
Opakované navštívení úřadů je spíše výjimečné (většinou stačí jedna návštěva).
2)
Naprostá většina hledá informace na internetu, někdo se zeptá i na místním úřadě.
3)
Většina lidí takové stránky nezná. 3.1)
Jeden člověk odpověděl, že ano, druhý neví.
3.2)
Jeden člověk odpověděl, že ano, druhý neví.
4)
Naprostá většina by tento systém uvítala.
5)
Na seznamu podle všech nic nechybí.
6)
Na seznamu není nic přebytečné.
7)
Přibližně ¾ respondentů odpovědělo, že ano. 7.1)
Na stránkách obce spíše hledají starší lidé, a to hlavně aktuality, kulturní dění, zdravotnictví.
7.2)
Mezi odpověďmi byly např. aktuality, svoz odpadu, jízdní řády, úřední hodiny, historie, odkazy.
66
E.2
Analýza webových stránek malých obcí Funkce
Web Aktuality Úřední deska Fotografie Kniha návštěv Diskuze Registrace Kalendář akcí Vyhledávání E-podatelna
Počet obyvatel Do 200 4 1 4 4 1 0 0 1 0 0
Do 500 10 8 8 7 2 0 0 1 2 5
Do 1000 10 10 8 10 2 1 1 1 6 5
Tabulka E.1: Analýza webových stránek malých obcí
67
E.3
Pre-test dotazník
1. Jste muž nebo žena? Muž Žena 2. Kolik je Vám let? < 25 26-39 40-59 > 60 3. Používáte počítač? Ano Ne 4. Je Váš počítač připojen k internetu? Ano Ne 5. Jaké máte zkušenosti s prací na počítači? Základní Střední Pokročilé 6. Máte nějaké zkušenosti s redakčními systémy? Ano Ne Neznám
68
E.4
Testovací úkoly
Otestování obecního portálu Úkoly pro administrátora 1. Proveďte instalaci systému na doméně www.obecobora.eu. Údaje pro spojení s databází: Server: mysql5-4, Jméno: obora.108975, Heslo: obecobora, Databáze: obora_108975. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
2. Přihlaste se do systému. Uživatelské jméno: admin, heslo: adminpass a přejděte do administrace. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
3. Vložte novou aktualitu. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
4. Zjistěte, zda jsou životní situace v systému aktuální a pokud ne, aktualizujte je. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
5. Do sekce historie vložte libovolný text a jeden obrázek. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
6. Odhlaste se ze systému. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
Úkoly pro přihlášeného uživatele 7. Pošlete dotaz na obecní úřad pomocí E-podatelny. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
8. Vložte událost ke dni 10. května 2010. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
9. Zjistěte, jaké doklady jsou potřebné při řešení životní situace - výměna řidičského průkazu. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
10. Odhlaste se ze systému. Obtížnost úkolu (1 – nejlehčí, 5 - nejtěžší): ……
69
70
Příloha F Obsah přiloženého CD CD | ---------- Aplikace - Zdrojové soubory aplikace | | ---------- Databáze - SQL skripty pro vytvoření a naplnění MySQL databáze | | | ----- data.sql | | ---------- Texty - Text práce a uživatelské příručky a přiložené obrázky | | | ----- Bakalářská práce | | | | | ----- text.doc | | | | | ----- text.pdf | | | | | ----- Uživatelská příručka | | | ----- prirucka.doc | | | ----- prirucka.pdf | | ---------- Obrázky – Obrázky v práci a uživatelské příručce a diagramy použité v práci | ----- Bakalářská práce | ----- Uživatelská příručka | ----- Diagramy
71
