EDUX - personalizace UI. Luká² Komárek. ƒeské vysoké u ení technické v Praze Fakulta elektrotechnická Katedra po íta ové graky a interakce

ƒeské vysoké u ení technické v Praze Fakulta elektrotechnická Katedra po íta ové graky a interakce Bakalá ská práce EDUX - personalizace UI Luká² Komárek Vedoucí práce: Ing. Tomá² Kadlec Studijní program: Softwarové technologie a management, Bakalá ský Obor: Web a multimedia 26. kv tna 2011

iv

v Pod kování Rád bych pod koval p edev²ím Ing. Tomá²i Kadlecovi za jeho uºite né rady a p ipomínky, které m vedly ke zdárnému dokon ení této práce. Dále také d kuji v²em, kte í m p i tvorb práce podoporovali.

vi

vii 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 27. 5. 2011.............................................................

viii

Abstract The aim of this thesis is to personalize whole user interface (UI) of EDUX, to be userfriendly and fast-and-easy to get information from. The main goal is to create transparent web page dashboard with settable widgets, which should complement the main page. Simple widgets let user access information related to studies or environment of EDUX. The thesis describes design and implementation of the page dashboard and individual widgets, mainly widget with information of all active courses student is taking actual semester. Further it also describes how to implement own widgets. Abstrakt Cílem této bakalá ské práce je personalizovat celé prost edí EDUXu tak, aby uºivatel snadno a rychle nalezl relevantní informace. Hlavním úkolem je vytvo it p ehledovou stránku dashboard s nastavitelnými widgety, která by m la zastupovat úvodní stranu. Jednotlivé widgety poskytují uºivateli informace související se studiem nebo informace o prost edí EDUX. Práce popisuje návrh a implementaci stránky dashboard a jednotlivých widget, konkrétn widget se zapsanými p edm ty v aktuálním semestru, a dále také popisuje, jak lze vytvá et widgety vlastní. ix

x

Obsah 1 Úvod 1 2 Popis problému, specikace cíle 3 2.1 Popis problému................................... 3 2.2 Motivace....................................... 3 2.3 Specikace cíle................................... 4 3 Specikace poºadavk 5 3.1 Denice pojm................................... 5 3.1.1 Widget................................... 5 3.1.2 Dashboard................................. 5 3.2 Katalog poºadavk................................. 6 3.2.1 Funk ní poºadavky............................. 6 3.2.2 Nefunk ní poºadavky............................ 6 3.2.3 Hardwarové poºadavky........................... 7 3.2.4 Softwarové poºadavky........................... 7 3.3 P ípady uºití.................................... 8 3.3.1 Uºivatelské role............................... 8 3.3.2 Moºnosti akcí uºivatele........................... 8 3.3.2.1 Výb r layoutu.......................... 8 3.3.2.2 P esun widgetu.......................... 8 3.3.2.3 Uloºení aktuálního rozloºení.................. 8 3.3.2.4 Odstran ní widgetu....................... 8 3.3.2.5 P idání widgetu......................... 8 3.3.2.6 Minimalizace widgetu...................... 8 3.3.2.7 Maximalizace widgetu...................... 9 3.3.3 Zobrazení v²ech p ípad uºití....................... 9 3.4 Re²er²e....................................... 10 3.4.1 igoogle................................... 10 3.4.2 Seznam.cz.................................. 11 3.4.3 Nettuts................................... 12 4 Analýza a návrh 13 4.1 Edux......................................... 13 4.2 Wiki......................................... 14 xi

xii OBSAH 4.3 Dokuwiki...................................... 14 4.3.1 Pluginy................................... 15 4.3.1.1 Syntax plugin.......................... 15 4.3.1.2 Action plugin........................... 16 4.3.1.3 Admin plugin........................... 16 4.3.1.4 Helper plugin........................... 16 4.3.1.5 Renderer plugin......................... 16 4.3.1.6 Smí²ený plugin.......................... 16 4.3.2 Zvolení vhodného pluginu......................... 17 4.4 Pouºité technologie................................. 17 4.4.1 PHP..................................... 17 4.4.1.1 Vlastnosti:............................ 18 4.4.2 Javascript.................................. 18 4.4.2.1 Vlastnosti:............................ 18 4.4.3 jquery.................................... 19 4.4.3.1 Vlastnosti:............................ 19 4.4.4 Ajax..................................... 19 4.4.4.1 Vlastnosti:............................ 20 4.4.5 HTML.................................... 20 4.4.6 CSS..................................... 20 4.4.6.1 Vlastnosti:............................ 20 4.5 Návrh uºivatelského rozhraní........................... 21 5 Realizace 23 5.1 Popis implementace................................. 23 5.1.1 Action plugin................................ 23 5.1.2 Syntax plugin................................ 23 5.1.3 classes.................................... 24 5.1.4 jquery, ajaxu a skript pro zpracování................... 24 5.1.4.1 Zm na pozice widgetu...................... 24 5.1.4.2 Odebrání a p idání widgetu na plochu............. 25 5.1.5 Widget - zapsané p edm ty........................ 25 5.2 Vytvo ení nového widgetu............................. 26 5.3 Pouºitý software.................................. 28 6 Testování 29 6.1 Test uºivatelského rozhraní............................ 29 6.1.1 Kognitivní pr chod............................. 29 6.1.1.1 Otázky kladené p i tomto testu:................ 29 6.1.1.2 Výsledky testu.......................... 30 6.1.1.3 e²ení............................... 30 6.2 Akcepta ní test................................... 30 7 Záv r 31 A Seznam pouºitých zkratek 35

OBSAH xiii B Uºivatelská p íru ka 37 B.1 Podmínky...................................... 37 B.2 Návod pouºití.................................... 37 B.2.1 P idání widgetu............................... 37 B.2.2 Odebrání widgetu.............................. 37 B.2.3 P esun widgetu............................... 38 B.2.4 Minimalizace a maximalizace widgetu.................. 39 B.2.5 Nastavení layoutu............................. 39 C Obsah p iloºeného CD 41

xiv OBSAH

Seznam obrázk 3.1 P ípady uºití.................................... 9 3.2 Náhled stránky http://www.google.cz/ig..................... 10 3.3 Náhled stránky http://www.seznam.cz...................... 11 3.4 Náhled stránky demoverze Nettuts........................ 12 4.1 Návrh uºivatelského rozhraní p ed analýzou................... 21 4.2 Kone ná podoba uºivatelského rozhraní..................... 22 B.1 Ukázka odebrání widgetu............................. 38 B.2 Ukázka p esunu widgetu.............................. 38 B.3 Ukázka minimalizace obsahu widgetu....................... 39 B.4 Ukázka zvolení layoutu............................... 39 xv

xvi SEZNAM OBRÁZK

Kapitola 1 Úvod Cílem této bakalá ské práce je vytvo ení zásuvného modulu do prost edí EDUX. Jeho hlavním úkolem bude personalizovat celé toto prost edí takovým zp sobem, aby uºivatel snadno a rychle nalezl relevantní informace. Toho lze dosáhnout vytvo ením p ehledové stránky dashboard s nastavitelnými widgety, která by m la zastupovat úvodní stranu. Termín widget je ozna ení pro miniaplikace, které slouºí k zobrazovaní ur itého obsahu, který se dynamicky m ní. T mi mohou být nap íklad aktuální zprávy, po así, kurzy m n, horoskop nebo fotograe z oblíbeného alba. Jednotlivé widgety této práce ov²em poskytují uºivateli informace související se studiem jako je nap íklad widget se zapsanými p edm ty v aktuálním semestru i informace o momentálním stavu v prost edí EDUX. EDUX je systém, který je zaloºen na platform GNU/Linux, Apache, PHP a Dokuwiki. Ú elem toho systému je hlavn snadná tvorba a publikace studijních materiál na webu pro fakulty a dal²í sou ásti ƒvut v Praze.[5] DokuWiki je webový projekt fungující na principu wiki, a navíc je zam en na tvorbu dokumentace v²eho druhu. Jde tedy o open-source systém, ve kterém lze jednodu²e vytvá et a upravovat obsah stránek. V²echna data jsou uloºena v oby ejných textových souborech, a tudíº není pot eba databáze. Mezi nejznám j²í z ejm pat í Wikipedie. [1] Práce se zabývá p edev²ím tvorbou widget, jejich obsahem, nastavením, manipulací s nimi a vytvo ením stránky dashboard, na které jsou tyto miniaplikace umíst ny. Kaºdý uºivatel si tak m ºe sám nastavit, které widgety chce mít zobrazené a které nikoliv. M ºe si zvolit z výb ru jiº p eddenovaných layout, v nichº lze jednotlivé widgety jednodu²e p emis ovat. Dále se v práci popisuje, jak lze p idávat nov vytvo ené widgety do systému EDUX. Práv s tímto zám rem byl tento plugin navrºen, aby mohl být dále roz²i ován o dal²í widgety. 1

2 KAPITOLA 1. ÚVOD

Kapitola 2 Popis problému, specikace cíle 2.1 Popis problému Prost edí EDUX, o n mº se podrobn ji do tete v této práci, slouºí jako jeden ze systém pro fakulty a dal²í sou ásti ƒvut v Praze. Ú elem tohoto systému je p edev²ím snadná tvorba a publikace studijních materiál na webu. Vedle úvodní stránky, aktualit, návod a kontakt slouºí tento systém p edev²ím jako server pro stránky jednotlivých p edm t. Na daných stránkách naleznou studenti informace o p edm tu, studijní materiály, nej ast ji v podob slid z p edná²ek a cvi ení, ale i p ipomenutí d leºitých termín pro úsp ²né absolvování p edm tu. V p ípad, ºe má student zapsáno více p edm t, musí na p edm ty p icházet z úvodní stránky, kde svoje p edm ty musí vyhledat v seznamu v²ech p edm t nebo musí znát p ímo URL adresu stránky daného p edm tu. Toto e²ení je sice posta ující, nicmén pro studenta by bylo mnohem p íjemn j²í, pokud by mohl mít svoji uºivatelskou stránku, na které by mohl mít jenom seznam svých zapsaných p edm t, p ipomenutí r zných termín, vlastní harmonogram semestru, klasikaci a dal²í informace spojené se studiem i studentským ºivotem. Tato uºivatelská stránka v²ak v systému chybí. Proto náplní této práce bude tuto stránku navrhnout a implementovat. 2.2 Motivace Jako student jsem samoz ejm b hem studia p i pouºívání systému EDUX naráºel na vý²e zmi ovaný problém. P edev²ím ²lo o p ímý p ístup na stránky p edm t. Ten jsem jako v t²ina student e²il pomocí záloºek i oblíbených poloºek ve svém internetovém prohlíºe i. To ale znamenalo, ºe jsem kaºdý semestr musel tyto záloºky vytvá et znovu. Proto pro m bylo velkou motivací za ít pracovat na stránce uºivatele s widgety, které si student bude moci p izp sobit a kde se mu budou pravideln kaºdý semestr automaticky zobrazovat aktuáln zapsané p edm ty. Dal²í motivací je i p ínos do budoucna, protoºe lze vytvá et i widgety vlastní, které p jdou jednodu²e p idávat do samotného pluginu. Uºivatelé EDUXu budou moci dostávat na vlastní dashboardy mnoho dal²ích informací, které t eba sou asný EDUX zatím v bec nenabízí. 3

4 KAPITOLA 2. POPIS PROBLÉMU, SPECIFIKACE CÍLE 2.3 Specikace cíle Cílem práce je tedy: vytvo ení p ehledové stránky vytvo ení rozhraní, díky kterému p jdou jednodu²e vytvá et jednotlivé widgety vytvo ení konkrétního widgetu Zapsané p edm ty v aktuálním semestru zinteraktivn ní prost edí widgety p jdou na p ehledové stránce p emis ovat, p idávat, odebírat, ale také schovávat a op tovn odkrývat jejich obsah

Kapitola 3 Specikace poºadavk V této kapitole se budeme p edev²ím zabývat sb rem poºadavk na plugin, který má být výsledkem práce. Specikace poºadavk vychází ze zadání. Do katalogu poºadavk zaznamenáme, jaké funk nosti má plugin poskytovat a jaké jsou dal²í podmínky pro úsp ²nou realizaci a následné pouºívání. Vysv tlíme pojmy widget a dashboard. Dále si také vymezíme uºivatelské role aktér, kte í budou plugin pouºívat, a vytvo íme pro n p ípady uºití. A na záv r kapitoly zhotovíme re²er²i jiº realizovaných e²ení i ukázkových demoverzí. 3.1 Denice pojm 3.1.1 Widget Widgety jsou miniaplikace, které nabízejí dynamický obsah, který lze umístit na ur ených pozicích na stránce webu. P i práci na po íta i vám mohou být uºite né. V práci m ºete asto vyuºít widget typu - poznámkový blok, p evodník m n nebo kalendá. Ve ²kole zase t eba kalkula ku, Wikipedii nebo p eklada jazyk. Ve volném ase vyuºijete zprávy, blogy, hry nebo spousty dal²ích. Widget se nej ast ji skládá ze dvou ástí. Ta první je obdoba horní li²ty okna ve windows, na které naleznete nástroje pro zav ení, minimalizaci, maximalizaci, dále nástroje pro r zná nastavení ur itého widgetu. Za pomoci my²i lze widget p esunovat po ur eném prostoru na stránce webu. ƒasto bývá na li²t zobrazen i titulek widgetu k jeho lep²í identikaci. Druhou ástí widgetu je obsah, který se m ºe dynamicky m nit v závislosti na daném typu. 3.1.2 Dashboard Dashboard je p ehledová stránka, na které se zobrazují widgety. Dále se zde m ºe nacházet samotné nastavení stránky, jako je volba layoutu, seznam dostupných widget apod. 5

6 KAPITOLA 3. SPECIFIKACE POšADAVK 3.2 Katalog poºadavk 3.2.1 Funk ní poºadavky Dashboard: bude slouºit jako úvodní stránka pro uºivatele bude obsahovat widgety lze m nit vzhled pomocí výb ru z n kolika p eddenovaných layout bude obsahovat tla ítko uloºit, které uloºí aktuální rozloºení widget, aby se p i p í²tí náv²t v stránky mohlo pouºít zvolené rozloºení Widgety: kaºdý widget se skládá z hlavi ky a t la, jehoº obsahem jsou informace pro studenty lze je po dashboardu p emis ovat a adit lze je z dashboardu odstra ovat lze je na dashboard p idávat lze skrýt jejich obsah lze odkrýt jejich skrytý obsah 3.2.2 Nefunk ní poºadavky plugin bude naprogramován jako webová aplikace pouºití skriptovacího jazyka PHP jako datové uloºi²t budou soubory na disku pouºítí HTML, CSS pouºítí Javascriptu, jquery, Ajax dashboard s widgety bude upraven barevn tak, aby gracky zapadal do prost edí EDUX plugin pob ºí 24 hodin denn rozhraní widgetu bude implementováno tak, ºe bude moºnost si jednodu²e vytvá et nové widgety

3.2. KATALOG POšADAVK 7 3.2.3 Hardwarové poºadavky Z pohledu EDUXU je modul dashboard pouze jeho roz²í ením a nevyºaduje ºádné jiné za ízení, které by bylo pot eba k jeho plné funk nosti. Ve²keré hardwarové poºadavky tedy odpovídají t m, které jsou kladeny na celý systém EDUX. Jedná se tedy o server s p ipojením na internet. Uºivatelé, kte í cht jí se systémem pracovat, pot ebují po íta, p ipojení k internetu, monitor, klávesnici a my². 3.2.4 Softwarové poºadavky Jelikoº se jedná o plugin, tak hlavním poºadavkem je, aby b ºel systém EDUX. Ten b ºí na serveru s opera ním systémem Linux, dále je pot eba Apache, podpora PHP a Dokuwiki. Uºivatel, který chce plugin vyuºívat pot ebuje opera ní systém s internetovým prohlíºe- em. Modul byl odlad n v prohlíºe i Mozilla FireFox ve verzi 4.0.1

8 KAPITOLA 3. SPECIFIKACE POšADAVK 3.3 P ípady uºití Tato kapitola podrobn ji popisuje p ípady uºití pluginu dashboard. 3.3.1 Uºivatelské role Jediným aktérem, který vystupuje v rámci celého pluginu, je sám uºivatel, tedy student i zam stnanec ƒvut. 3.3.2 Moºnosti akcí uºivatele 3.3.2.1 Výb r layoutu Uºivatel si m ºe v pravém postranním panelu na stránce dashboard vybrat z p eddenovaných layout. Sta í vybrat kliknutím my²i na daný layout. Ten se automaticky uloºí. 3.3.2.2 P esun widgetu Uºivatel m ºe widgety v rámci layoutu p emis ovat a adit mezi ostatní widgety. Toho docílí tak, ºe daný widget, který chce p esunout, my²í uchopí za hlavi ku widgetu a taºením p esune na poºadované místo. 3.3.2.3 Uloºení aktuálního rozloºení Uºivatel m ºe uloºit aktuální rozloºení widget pomocí tla ítka uloºit, které se nachází v pravém postranním panelu. P i p í²tím nav²tívení stránky se zobrazí naposledy uloºené rozloºení widget. 3.3.2.4 Odstran ní widgetu Pomocí kliknutí my²i na k íºek umíst ný ve widgetu vºdy vpravo naho e uºivatel docílí odstran ní widgetu ze stránky. Odstran ní není denitivní, lze vybraný widget kdykoliv op t zobrazit. 3.3.2.5 P idání widgetu Pokud se uºivatel rozhodne op t p idat odstran ný widget, m ºe tak u init kliknutím v seznamu v²ech dostupných na poºadovaný widget v pravém postranním sloupci a ten se objeví op t na pozici, kde byl naposledy z dashboard odstran n. 3.3.2.6 Minimalizace widgetu Pokud by m l widget p íli² velký obsah, coº by v n kterých p ípadech mohlo d lat problémy p i p emis ování widgetu, má uºivatel moºnost minimalizace.

3.3. P ÍPADY UšITÍ 9 3.3.2.7 Maximalizace widgetu Po aktivaci tla ítka minimalizace má uºivatel moºnost pouºít tla ítko maximalizace a op t zobrazit obsah widgetu. 3.3.3 Zobrazení v²ech p ípad uºití Obrázek 3.1: P ípady uºití

10 KAPITOLA 3. SPECIFIKACE POšADAVK 3.4 Re²er²e P ed za átkem analýzy by bylo výhodné ud lat pr zkum a pokusit se nalézt n jaké hotové e²ení s podobnými poºadavky, které jsou kladeny na ná² plugin. Zhodnotíme podobnosti a odli²nosti a vyuºijeme t chto informací pro inspiraci p i návrhu na²eho roz²í ení. Nemuseli jsme ani hledat dlouho a ihned jsme narazili na jiº implementovaná e²ení na velice známých stránkách google.cz a seznam.cz. Zde jsem si vyzkou²el ve²keré moºnosti, v etn r zných nastavení, které mi jak dashboard, tak jednotlivé widgety nabízely. Tím jsem si vytvo il v t²í p edstavu o tom, jak by m l plugin fungovat. Narazil jsem v²ak i na ukázkové demoverze, které by se mohly vyuºít p i implementaci. 3.4.1 igoogle Ve srovnání se seznam.cz má google celý dashboard s widgety propracovan j²í. Nabízí mnohem více nastavení, a uº p i výb r layout pro dashboard, tak i u konkrétních widged, kterých nabízí velké mnoºství. P estoºe je tento dasboard velice rozmanitý, bude spí²e inspirací do budoucna, jelikoº svým rozsahem zatím p er stá poºadavky dashboardu pro EDUX. Obrázek 3.2: Náhled stránky http://www.google.cz/ig

3.4. RE ER E 11 3.4.2 Seznam.cz Druh widget na seznam.cz není takové mnoºství a obsah v t²iny z nich tvo í informace RSS zpráv. Kaºdý uºivatel si tedy m ºe podle svého zájmu zvolit zdroj informací a p i vyuºití funkcí widgetu si je m ºe sám p esunout. Nastavení widget je jednodu²²í a jde o zvolení po tu zobrazovaných zpráv ve widgetu. Obrázek 3.3: Náhled stránky http://www.seznam.cz

12 KAPITOLA 3. SPECIFIKACE POšADAVK 3.4.3 Nettuts Demoverze od spole nosti Nettuts m oslovila nejvíce ze v²ech, na které jsem narazil. Spl ovala vícemén v²echny poºadavky, které jsou na plugin kladeny. Navíc m la velice p ehledný javascript, do kterého se tak snadn ji daly doimplementovat zbylé poºadavky. Proto m tato demoverze p esv d ila, abych si ji vybral a plugin d lal podle ní. Obrázek 3.4: Náhled stránky demoverze Nettuts

Kapitola 4 Analýza a návrh V této kapitole se zam íme na podrobn j²í vysv tlení termínu EDUX. Jelikoº je zaloºen na platform Dokuwiki, která funguje na principu wiki, zanalyzujeme poºadavky z p ede²lé kapitoly a pomocí p íslu²ných typ plugin, které nám Dokuwiki nabízí a které v této kapitole také více p iblíºíme, se pokusíme navrhnout e²ení. Také zhodnotíme moºnosti pouºitých technologií a vybereme ty nejvhodn j²í pro realizaci na²eho roz²í ení. 4.1 Edux Ú elem systému EDUX je hlavn jednoduchá tvorba a publikace studijních materiál na webu pro fakulty a dal²í sou ásti ƒvut v Praze. Systém je zaloºen na platform GNU/Linux, Apache, PHP, Dokuwiki a vznikl za podpory z grantu EU OPPA Praha. Systém musí umoº ovat p edm ty vytvá et, a uº s ov ením jejich existence v KOSu, nebo bez ov ení, dále je mazat, editovat a archivovat. Pro jednotlivé p edm ty systém umoºní vytvá ení materiál p ímo ve webovém prohlíºe i nebo nahráním multimediálního obsahu (obrázky, PDF, archivy atp.) P ístup k materiál m je ur en podle uºivatelských rolí. Systém umoºní denovat jednotlivým p edm t m strukturu svých materiál, k dispozici bude ²ablona doporu ené struktury, jednak pro snaz²í orientaci uºivatele v r zných p edm tech, jednak s touto strukturou budou operovat p ípadná dal²í roz²í ení. Autentizace uºivatel a p i azení uºivatelských rolí bude e²ena v návaznosti na systémy ƒvut (zejména KOS, p íp. Shibboleth) a systémy konkrétní fakulty (FEL - Shibboleth, FIT - MySQL/LDAP/Shibboleth). Autentizace uºivatel bude probíhat nejlépe pomocí SSO Shibboleth, bohuºel tato sluºba je nasazena zatím pouze na FEL ƒvut. Pro FIT ƒvut musí být moºnost autentizace proti MySQL, LDAP. Vzhledem k diverzit poskytovatel autentizace a jimi poskytovaných informací není moºné získat kompletní informaci o uºivateli, a zejména jemu p i azených rolí. Z toho d vodu je nutné informace o roli uºivatele uchovávat lokáln v systému EDUX.[5] 13

14 KAPITOLA 4. ANALÝZA A NÁVRH 4.2 Wiki Termínem wiki jsou ozna ovány webové stránky (weby), které umoº ují rychlou editaci a aktualizaci obsahu nebo webové aplikace, ve kterých jsou tyto webové stránky vytvo eny. Tv rce první wiki, Ward Cunnigham, jej pouºil pro sv j program, který m l na webu umoºnit rychlou vým nu nápad mezi programátory. Nazval jej WikiWikiWeb. [8] Samotné slovo wiki pochází z havaj²tiny a znamená rychlý. P vodn se termín wiki pouºíval zcela opa n. Wiki bylo ozna ení typu softwaru a weby postavené na wiki byly ozna ovány jako wiki-weby. Postupn do²lo k p enesení významu slova wiki na výsledný web a pro pouºitou platformu byl zaveden termín wiki-software. N kdy jsou pouºívány termíny wikiwiki nebo WikiWiki namísto termínu wiki.[12] Hlavním znakem wiki web je, ºe jejich obsah m ºe snadno editovat nebo upravovat libovolný náv²t vník t chto web bezprost edn ve svém webovém prohlíºe i. Ve²keré uloºené úpravy stránek jsou ukládány v pam ti systému. Zm ny na stránkách je moºné sledovat v historii stránek nebo v p ehledu zm n na t chto stránkách. P edchozí verze stránek mohou být kdykoliv obnoveny. V sou asné dob existuje velké mnoºství wiki webových stránek, které se od sebe li²í zam ením, rozsahem a také webovými aplikacemi, ve kterých jsou vytvo eny. N které wiki aplikace byly vytvo eny p ímo za konkrétním ú elem. Nap íklad aplikace MediaWiki byla naprogramována za ú elem zaloºení internetové encyklopedie - Wikipedie. Tato internetová encyklopedie je nejznám j²í, je to v²ak pouze jedna z ady r zných forem vyuºití wiki aplikací. Wiki mohou být vyuºívány jako informa ní systémy rem, intranety organizací, znalostní báze odborných komunit, podp rné systémy vývoje r zných produkt, nástroje e-learningu, nebo ist jako webové stránky umoº ující snadnou aktualizaci obsahu. [8] 4.3 Dokuwiki DokuWiki je jednoduchý open-source webový projekt fungující na principu wiki a je zam ený p edev²ím na tvorbu dokumentace v²eho druhu. Jde tedy o systém, ve kterém m ºe uºivatel jednodu²e vytvá et a upravovat obsah stránek a tím se podílet na roz²i ování celého webu. Mezi nejv t²í výhody pat í jednoduchá syntaxe, aby datové soubory byly itelné a co nejp ehledn j²í. Vedle prostého textu m ºeme vkládat také mnoho formátovacích zna ek, interní i externí odkazy, obrázky, tabulky i t eba emotikony. Stránka se vytvo í tak, ºe se do adresního ádku napí²e název stránky. Pokud stránka je²t neexistuje, tak se vytvo í a my ji m ºeme za ít plnit obsahem jiº zmín ným zp sobem. V opa ném p ípad se nám zobrazí jiº vytvo ená stránka, kterou m ºeme kdykoliv modikovat.[1] V²echna data jsou uloºena v oby ejných textových souborech, a tudíº není pot eba databáze. To m ºe být výhodou pro servery, kde není nainstalovaná ºádná databáze. Naopak to p iná²í i nevýhodu. Oproti MySQL databázi je obtíºn j²í udrºovat relace mezi daty v jednotlivých souborech. DokuWiki je cílena na vývojové týmy, pracovní skupiny a malé rmy. DokuWiki podporuje práci i s nastavením práv pro uºivatele, a proto byla zvolena i pro systém EDUX. Toho vyuºívá v nemalé mí e pro rozli²ení uºivatelských rolí p edev²ím u stránek daného p edm tu, pro které zp ístupní pouze povolený obsah dokumentu pro danou roli uºivatele.

4.3. DOKUWIKI 15 Dal²í uºite né vlastnosti[1]: cachování stránek pro rychlej²í odpov di fulltextové vyhledávání zaloºené na indexech ajaxový na²eptáva p i hledání stránek p ehledná drobe ková navigace neomezené verzování stránek ochrana proti spamu layout lze upravovat pomocí ²ablon lokalizace do více neº 30 jazyk plná podpora UTF-8 volitelná kontrola pravopisu roz²í ení o dal²í funkce pomocí plugin 4.3.1 Pluginy Plugin je software, který nepracuje samostatn, ale jako zásuvný modul jiné aplikace a roz²i uje tak její funk nost. Slovo plugin je asto pouºíváno vývojá i softwaru k popisu aplikace t etí strany. Plugin obvykle vyuºívá p ipraveného rozhraní aplikace nazývaného API. Mnoho program nabízí programátor m moºnost pouºít jejich API s moºností roz²í it funk nost nabízeného programu. St jn tomu tak je i v p ípad Dokuwiki, která obsahuje výkonné rozhraní pro tvorbu a správu plugin, kde je moºno pluginy povolovat a zakazovat, p ípadn instalovat. Dokuwiki nám nábízí hned n kolik typ pluginu. Pat í mezi n syntax plugin, action plugin, admin plugin, helper plugin a renderer plugin. Tato práce je postavena p edev²ím na syntax pluginu, ale vyuºívá i action plugin, proto se t mto plugin m v následujících podkapitolách budeme v novat více. Pro p ehled uvedeme i základní vlastnosti ostatních plugin. 4.3.1.1 Syntax plugin Modul typu syntax je pouºíván pro roz²í ení syntaxe. Toho lze vyuºít p i tvorb i úpravách jednotlivých stránek. Kaºdý syntax plugin má specikované n jaké klí ové slovo neboli vzor, který zvolí sám tv rce pluginu. Tento vzor poté slouºí k jasné specikaci daného roz²í ení. Pokud tedy tento vzor uvedeme kdekoliv ve stránce, dojde k nahrazení vzoru za obsah p íslu²ného pluginu. Z tohoto d vodu se doporu uje zvolit tak, aby se nemohl náhodn objevit v b ºném textu. Proto se obvykle vyuºívá kombinace znak, které se vyskytují jen z ídka, ímº se zajistí velice malá pravd podobnost, ºe by do²lo k necht nému nahrazení vzoru za obsah pluginu. Modul dashboard, který popisuje tato práce, je specikován vzorem dashboard.

16 KAPITOLA 4. ANALÝZA A NÁVRH Co se tý e struktury syntax pluginu, obsahuje mimo denovaného vzoru také metody, z nichº jsou nejd leºit j²í metoda handle() a render(). Jiº z názvu metod vyplývá, co se od nich dá o ekávat. Metodu handle() modikujeme tak, aby nám zpracovávala ve²kerá data, která jsou p edána metod render() k následnému vykreslení. P i pohledu na syntax plugin jako na MVC architekturu nám metoda handle p edstavuje controller a metoda render view. 4.3.1.2 Action plugin DokuWiki má defaultní handler, který je moºné roz²í it pomocí action pluginu. Kaºdý action plugin m ºe obsluhovat více r zných událostí. Proto je ov²em pot eba p i tvorb pluginu ur it, jaké metody budou ídit dané události. Dále lze specikovat, která událost bude zavolána p ed nebo po zavolání základního handleru Dokuwiki. Struktura action pluginu je následující. Nejd leºit j²í je metoda register(), ve které se zaregistrují ve²keré události. Kaºdá událost je specikována názvem, který nám zárove ur uje druh dané události. Následuje po adí v i defaultnímu handleru a metoda, která se má vykonat. Action plugin tedy p edstavuje obdobu controlleru, jelikoº dokáºe ídit stav aplikace. 4.3.1.3 Admin plugin Admin pluginy jsou zásuvné moduly, které poskytují DokuWiki roz²í ené funkce pro správu systému. Není nutné vytvá et admin komponenty, jelikoº jsou jiº v systému zahrnuty. Pokud plugin pot ebuje dostávat informace zp t od uºivatele, vyuºívá k tomu hodnot p edaných v globálních prom nných $_REQUEST.[2] Mezi d leºité pat í metody handle() a html(), které fungují na obdobném principu jako u syntax pluginu. 4.3.1.4 Helper plugin Helper pluginy poskytují funkcionalitu pro mnoho dal²ích plugin, takºe kaºdý plugin nemusí re-implementovat ur ité funkce opakovan.[2] 4.3.1.5 Renderer plugin Renderer pluginy umoº ují vytvá et nové módy pro export a nahradit standardní DokuWiki XHTML vykreslování.[2] 4.3.1.6 Smí²ený plugin Tento plugin je jakoukoliv kombinací vý²e zmín ných plugin.

4.4. POUšITÉ TECHNOLOGIE 17 4.3.2 Zvolení vhodného pluginu Po prostudování v²ech typ plugin jsem dosp l k záv ru, ºe pro vytvo ení zásuvného modulu dashboard pouºiji smí²ený plugin. Ten bude kombinací syntax a action pluginu. Modul syntaxe se bude starat o vykreslení stránky dashboard s pot ebným nastavením a jednotlivých widget. Action plugin se zase vyuºívá k na tení javascriptových soubor a knihoven, které zaru í widget m správnou funk nost. 4.4 Pouºité technologie V této podkapitole bych se cht l zam it na popis technologií, které byly pouºity p i implementaci zásuvného modulu do DokuWiki. Technologie vycházejí z nefunk ních poºadavk, které jsme jiº vý²e specikovali. Jako programovací jazyk byl zvolen skriptovací jazyk PHP. Vzhledem k tomu, ºe se jedná o plugin do webové aplikace, nezbytnou sou ástí jsou technologie HTML, CSS a Javascript. Modul vyuºívá pro práci s Javascriptem knihovny jquery a Ajaxu. 4.4.1 PHP PHP je jazyk pro skriptování na stran serveru. Umoº uje dynamizaci webového serveru. Jeho zkratka na po átku zrození byla tvo ena slovním spojením: Personal Home Page Tools, ímº bylo také p edur eno její pouºití pro jednoduchou tvorbu osobních stránek. Postupn se z n ho ale stával mocný nástroj, který za al konkurovat technologiím velkých rem jako je nap íklad ASP (Active Server Pages) i JSP (Java Server Pages). Proto byl význam zkratky upraven na Hypertext Preprocessor. [3] PHP je program voln ²i itelný, a tak je k dispozici zdarma ke staºení. Moºnost instalace je jak na linuxové stroje, tak i na Windows. Jeho exibilita a relativn krátká k ivka osvojení z n j iní jeden z nejoblíben j²ích skriptovacích jazyk v bec. Syntaxe jazyka je inspirována n kolika programovacími jazyky (Perl, C, Pascal a Java). P i pouºití PHP pro dynamické stránky jsou skripty provád ny na stran serveru k uºivateli je p ená²en aº výsledek jejich innosti. PHP obsahuje mnoho vestav ných funkcí. PHP podporuje mnoho knihoven pro zpracování textu, graky, práci se soubory, podporu celé ady internetových protokol (HTTP, SMTP, FTP, IMAP, POP3, LDAP) a p ístup k v t²in databázových systém (mj. MySQL, ODBC, Oracle, PostgreSQL, MSSQL). [11] V sou asnosti je k dispozici verze 5.3.5, která jiº pln podporuje objektov orientované programování.

18 KAPITOLA 4. ANALÝZA A NÁVRH 4.4.1.1 Vlastnosti: Výhody[11]: základní knihovna PHP obsahuje velice rozsáhlý soubor funkcí podpora mnoha databázových systém podpora na hostingových sluºbách multiplatformost velké mnoºství kód, které lze zdarma vyuºít (WordPress, phpbb a dal²í) syntaxe podobná s jazyky Perl, C, Pascal a Java obsáhlá dokumentace Nevýhody[11]: Nekonzistentní pojmenování funkcí, nap.:strpos(), strchr(), ale str_replace() Nejednotné názvosloví skupin funkcí: mysql_xxx, imap_xxx oproti imagexxx, bcxxx Nejednotné po adí parametr Ve standardní distribuci chybí debugovací nástroj 4.4.2 Javascript JavaScript je snadno interpretovatelný programovací jazyk se základními objektov orientovanými schopnostmi. Zárove se jedná o klientský skript. To znamená, ºe se program odesílá se stránkou na klienta (do prohlíºe e) a teprve tam je vykonáván. To umoº uje p idat do webových stránek proveditelný obsah- to znamená, ºe stránka na webu nemusí být jen statické HTML, ale m ºe obsahovat dynamické programy, které komunikují s uºivatelem, ídí prohlíºe a dynamicky vytvá í obsah HTML.[4] 4.4.2.1 Vlastnosti: Výhody[4]: interpretovaný nemusí se kompilovat objektový vyuºívá objekt prohlíºe e a zabudovaných objekt case senzitivní záleºí na velikosti písmen v zápisu syntaxí podobný jazyk m C, Java a podobným

4.4. POUšITÉ TECHNOLOGIE 19 Nevýhody[4]: funguje pouze v prohlíºe i uºivatel m ºe JavaScript zakázat neumí p istupovat k soubor m krom cookies ani k ºádným systémovým objekt m neumí ºádná data uloºit krom cookies 4.4.3 jquery jquery je knihovna s otev eným zdrojovým kódem ur ená pro jazyk JavaScript, která zjednodu²uje interakci mezi dokumentem HTML, p esn ji e eno objektovým modelem dokumentu (model DOM), a jazykem JavaScript. [6] Stru n e eno - knihovna jquery neskute n zjednodu²uje dynamické HTML (DHTML). Knihovna jquery zejména uleh uje procházení a manipulaci s dokumenty HTML, zpracování událostí prohlíºe e, animace nad modelem DOM, interakce prost ednictvím technologie Ajax a programování skript v JavaScriptu tak, aby fungovaly v moderních prohlíºe ích. Filosoi knihovny jquery vystihuje v ta:pi²te mén, d lejte více.[6] 4.4.3.1 Vlastnosti: knihovna je open-source, je tedy voln k dispozici je malá s jednoduchou, p esto promy²lenou architekturou zásuvných modul databáze zásuvných modul je rozsáhlá a neustále se rozr stá má pln dokumentované rozhraní API snaºí se vyhnout konikt m s jinými knihovnami pro JavaScript je testována a optimalizována pro vývoj v moderních webových prohlíºe ích za le uje specikace konsorcia W3C rychleji neº webové prohlíºe e lze se nau it velice rychle, protoºe pouºívá koncepty, které jiº vývojá i znají 4.4.4 Ajax Jedná se o zkratku pro Asynchronous JavaScript and XML. AJAX je vlastn spojením starých známých technologií XML, JavaScript, HTTP a (X)HTML. AJAX umoº uje, aby stránka kontaktovala server a obdrºela od n j libovolná data v XML bez toho, aby se musela celá znovu nahrávat v²e jen pomocí JavaScriptu. AJAX se dá nejlépe vyuºít k poskytnutí funkcí, které uºivateli urychlí nebo usnadní práci. Vyuºití nap. u r zných na²eptáva. [7]

20 KAPITOLA 4. ANALÝZA A NÁVRH 4.4.4.1 Vlastnosti: Výhody[7]: nemusí se pokaºdé znovu nahrávat nová stránka. posílá se jenom to d leºité, nemusí se tedy uºivateli posílat celý kód stránky Nevýhody[7]: znemoº uje pouºití tla ítka Zp t v prohlíºe i p i zm nách na stránce pomocí AJAXu se nem ní URL v adresním ádku prohlíºe e 4.4.5 HTML HTML je jazyk pro popis webových stránek. HTML je zkratka pro Hyper Text Markup Language. Jde o zna kovací jazyk pro vytvá ení stránek v systému World Wide Web, který umoº uje publikaci dokument na Internetu. K popisu webové stránky pouºívá zna ky. Ty se obvykle nazývají HTML tagy. HTML tagy jsou klí ová slova, obklopená ve ²pi atých závorkách, jako <html>. D lí se na párové a nepárové. Po áte ní a koncové tagy jsou také nazývány otevírací respektive uzavírací tagy. Cílem webového prohlíºe e je tení dokument ve formátu HTML a jejich zobrazení jako webové stránky. Prohlíºe nezobrazuje HTML tagy, ale pouºívá zna ky k interpretaci obsahu stránky. Sou asná pouºívaná verze je 4.01, ale jiº se pracuje na nové verzi 5. [10] 4.4.6 CSS CSS je jazyk pro popis zp sobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. CSS v anglickém originále znamená Cascading Style Sheets, do e²tiny se p ekládá jako kaskádové styly. Hlavním smyslem je umoºnit návrhá m odd lit vzhled dokumentu od jeho struktury a obsahu.[9] Jazyk byl navrºen standardiza ní organizací W3C, autorem prvotního návrhu byl Hakon Wium Lie. Byly vydány zatím dv úrovn specikace CSS1 a CSS2, nyní se pracuje na verzi CSS3. 4.4.6.1 Vlastnosti: rozsáhlej²í moºnosti formátování jednodu²²í údrºba webové prezentace odd lení struktury a stylu

4.5. NÁVRH UšIVATELSKÉHO ROZHRANÍ 21 cachování styl CSS vlastnosti jednotlivých element m ºeme dynamicky m nit pomocí Javascriptu nevýhodou CSS je ne vºdy dostate ná podpora v majoritních prohlíºe ích 4.5 Návrh uºivatelského rozhraní Vzhledem k tomu, ºe jedním z hlavních poºadavk je celé prost edí EDUXu personalizovat, bude d leºitou sou ástí také správn navrhnout a poté vytvo it uºivatelské rozhraní. Samoz ejm se bude jednat p edev²ím o navrºení widgetu a p ehledové stánky. Uºivatelské rozhraní bylo navrºeno ihned po zpracování poºadavk. Tento návrh se ale postupn p i vývoji m nil. Hlavním faktorem bylo to, ºe jsem p i navrhování p ost edí nekladl p íli² d raz na to, ºe jde o plugin, který nem ºe radikáln zasahovat do celého prost edí EDUX. Obrázek 4.1: Návrh uºivatelského rozhraní p ed analýzou

22 KAPITOLA 4. ANALÝZA A NÁVRH Uºivatelské rozhraní bylo p izp sobeno poºadavk m a dostalo následující podobu. U p ehledové stránky jsem zvolil pravé postranní menu, ze kterého lze celý dashboard ovládat r zným nastavením. Jedná se o nastavení rozloºení widgetu, výb ru layoutu, pop ípad zobrazování zav ených widget. Co se tý e widgetu, tak jsem se inspiroval jiº hotovými e²eními, které jsem jiº zmi oval v re²er²i. A to p edev²ím demoverzí od Nettuts. Widgety jsem gracky upravil, aby barevn sed ly s grackým návrhem prost edí EDUX. Obrázek 4.2: Kone ná podoba uºivatelského rozhraní

Kapitola 5 Realizace V této kapitole popí²eme implementaci pluginu za vyuºití informací získaných v p ede²lých kapitolách. P edev²ím se bude jednat o vybrané typy plugin a technologií. Z etel musíme brát i na poºadavky. Pro realizaci jsem vybral pluginy typu syntax a action. Pouºité technologie budou PHP, jquery, Ajax, HTML a CSS. 5.1 Popis implementace 5.1.1 Action plugin Tento plugin se pouºívá pro na tení skriptu knihovny jquery a skriptu pro personalizaci UI 5.1.2 Syntax plugin Tento plugin má dv d leºité metody. Jedná se o metodu handle() a render(). Ob si blíºe rozebereme, protoºe jejich funk nost je nedílnou sou ástí pro plugin. handle() zaru í vytvo ení souboru pro kaºdého uºivatele pro uloºení informací o dashboard a jednotlivých widgetech p i vytvá ení souboru zárove vygeneruje widgety v defaultním rozloºení, zvolí se automaticky také výchozí layout kontroluje, zda nebyl vytvo en nový typ widgetu, pokud ano, tak ho p idá do seznamu uloºí do souboru informace o dashboardu a widgetech, ke zji²t ní t chto informací vyuºívá javascriptu a ajaxového zpracování pokud je soubor uºivatele jiº vytvo en, otev e ho a na te se z n j uloºené informace na základ uloºených informací p ipraví data pro p edání metod render 23

24 KAPITOLA 5. REALIZACE render() pokaºdé p evezme data, které jsou výstupem metody handle() tyto data spolu s p eddenovaným obsahem metody vykreslí do okna prohlíºe e p edeonavým obsahem je zde my²lena struktura html kódu a navíc také na tení javascriptu na konci kódu. To z toho d vodu, aby bylo zaru eno p esné vykreslení html stránky 5.1.3 classes Zde je seznam pouºívaných t íd. Z jejich názvu jiº vyplývá jaké objekty se v práci vyuºívají. t ída Dashboard t ída Column abstraktní t ída Widget - slouºí p edev²ím kv li vytvá ení dal²ích widget t ída WidgetCourses - d dí Widget a vytvá í obsah widgetu Zapsané p edm ty 5.1.4 jquery, ajaxu a skript pro zpracování Zde si popí²eme, kde a jak vlastn plugin získává informace o nastavení, které si modikuje kaºdý uºivatel sám. Ty jsou pot eba k uloºení, aby mohly být p i dal²í nav²t v stránky op t pouºity. Jsou k tomu pot eba dv v ci. A to JavaScript, v na²em p ípad knihovna jquery, pomocí které budeme sledovat uºivatelovi akce. Tyto akce budeme za vyuºití ajaxu odesílat na p íslu²ný php skript, který informace zpracuje a vrátí nám odpov. 5.1.4.1 Zm na pozice widgetu Kaºdý widget s sebou nese svoje informace. Mezi n pat í identikátor, po adí na kterém s nechází a indikátor viditelnosti widgetu. Na jaké pozici se widget nachází nám íká jeho nad azený prvek, coº je sloupec, který má také sv j identikátor. Pomocí jquery lze tedy zjistit po kaºdém p emíst ní jakéhokoliv widgetu aktuální pozice a po adí v²ech widget. Tyto informace v etn id kaºdého widgetu se pomocí ajaxu po²le po kliknutí na tla ítko uloºit ke zpracování na p íslu²ný php skript. Skript ud lá to, ºe p enastaví kaºdému widgetu aktuální pozici, následn je se adí pro budoucí rychlej²í vykreslení a uloºí je do souboru. P i dal²í náv²t v stránky sta í pouze na íst soubor a vykreslit widgety na p íslu²ných místech, coº nám uº zajistí vý²e zmín né metody handle() a render() syntax pluginu.

5.1. POPIS IMPLEMENTACE 25 5.1.4.2 Odebrání a p idání widgetu na plochu V tomto p ípad je postup zpracování obdobný jako p i zpracování pozice. Op t si za pomocí javascriptu zjistíme identikátor daného widgetu, který pomocí ajaxu ode²leme na php skript. Skript op t zpracuje p íslu²né poºadavky. V p ípad uzav ení widgetu se nastaví viditelnost widgetu na hodnotu disabled, která se následn vypí²e jako class html tagu daného widgetu. Pomocí css pak mohu tagy s tou t ídou schovat a tak docílím odstran ní widgetu z plochy. V p ípad, ºe chci widget op t zobrazit, je pot eba zm nit zp t hodnotu viditelnosti. To provedu jako rekaci po kliknutí na p íslu²ný widget v seznamu postranního menu. Widget se objeví na stejném míst, jako byl naposledy zav en. Pro na tení v²ech widget a jejich následné schovávání a odkrývání pomocí css jsem rozhodl kv li rychlej²í práci s widgety. e²ení, ºe by se vykreslovaly jenom aktuáln zapnuté widgety se ukázalo jako nevyhovující. Pokaºdé, co by by do²lo ke zm n po tu widget na stránce, by muselo dojít k obnovení stránky, coº bylo velice neefektivní. 5.1.5 Widget - zapsané p edm ty Sou ástí práce bylo také vytvo ení konkretní miniaplikace. Vybral jsem si widget se zapsanými p edm ty v aktuálním semestru. Widget vypadá na první pohled velice jednodu²e. Jeho obsahem je seznam p edm t, které se studentovi kaºdý semestr dynamicky m ní podle p edm t zapsaných v KOSu. Aktuální seznam p edm t pro kaºdého studenta lze získat pomocí webové sluºby EDUX API, kterou zpracoval Patrik Kompu² v rámci jeho bakalá ské práce. Tato webová sluºba bude poskytovat data z KOSu ve zvoleném formátu(xml nebo JSON). Jednotlivé parametry pro tuto sluºbu se budou zadávat metodou POST. Pro zasílaní t chto parametr bude slouºit jednoduché API curl_http_client.php, jehoº implementace je jiº hotová. Seznam kód získaných p edm t porovnáme s kódy p edm t, které existují s prost edí EDUX. Na p edm ty, kterým se kódy shodují vytvo íme odkaz, aby na jejich webové stránky mohl uºivatel rychle p istupovat. Ty zbylé pro úplnost vypí²eme také. A toto v²echno je hlavní my²lenkou tohoto widgetu.

26 KAPITOLA 5. REALIZACE 5.2 Vytvo ení nového widgetu Jak jiº víme, plugin je navrºen tak, aby umoº oval vytvá et dal²í typy pluginu. Zde si ukáºeme, co je k tomu zapot ebí, aby se mohl widget p idat mezi jiº vytvo ené a mohl se zobrazovat na p ehledové stránce. Widget je pot eba vytvo it jako t ídu ve sloºce classes, ve které jsou v²echny typy widget. Dále je velice nutné, aby tato t ída d dila abstraktní t ídu Widget, které obsahuje i pár abstraktních metod. Tyto metody je pot eba doimplementovat. P edev²ím jde o metodu handle(), která zaji² uje obsah jednotlivých widget. Obdobn jako tomu bylo i u pluginu syntaxe, data p edaná metodou handle() se p edají metod render(), která zajistí vykreslení widgetu v etn jeho obsahu. D leºité je také zvolit vhodný titulek, který vystihuje podstatu widgetu a zobrazuje se jak v hlavi ce widgetu, tak v pravém postranním menu, kde je vý et v²ech dostupných typ widget. Proto se doporu uje krátký, ale výstiºný titulek. Poté co máme t ídu vytvo enou, m ºeme p idat widget do seznamu jiº hotových. Sta í p idat instanci této t ídy jako dal²í prvek pole widgets, které nalezneme v syntax pluginu. V²e je v kódu d kladn okomentováno. Obdobným zp sobem m ºeme widget se seznamu odstranit tak, ºe odstraníme instanci t ídy widgetu, který jiº nebudeme chtít pouºívat. Zde je uveden zdrojový kód abstraktní t ídy abstract class Widget { private $position; private $order; private $show; private $id; function construct($id) { $this->id=$id; $this->position=0; $this->order=$id; $this->show="disabled"; } abstract public function gettitle(); abstract public function handle(); public function getid() { return $this->id; } public function setid($id) { $this->id = $id; }

5.2. VYTVO ENÍ NOVÉHO WIDGETU 27 } public function getposition() { return $this->position; } public function setposition($position) { $this->position = $position; } public function getorder() { return $this->order; } public function setorder($order) { $this->order = $order; } public function getshow() { return $this->show; } public function setshow($show) { $this->show = $show; } public function render() { } $title = $this->gettitle(); $data = $this->handle(); $id = $this->getid(); $show= $this->getshow(); $xhtml = <<<XHTML <li class="widget color-blue $show" id="$id" > <div class="widget-head"> <h3>$title</h3> </div> <div class="widget-content"> <p>$data</p> </div> </li> XHTML; return $xhtml;

28 KAPITOLA 5. REALIZACE 5.3 Pouºitý software Níºe uvádím seznam ve²kerého pouºitého softwaru, který jsem pouºil p i tvorb bakalá ské práce. NetBeans IDE 6.9 Xampp Mozilla Firefox 4.0.1 PSPad 4.5.3 Kile 2.0.85 Gimp 2.6.11 Enterprise Architect 7.1 Pencil

Kapitola 6 Testování Cílem testování je naleznout a následn opravit, co nejvíce chyb, které p i realizaci nastaly. Testování tak pat í neodmysliteln k vývoji kaºdé aplikace. Není sice moºné odhalit ve²keré chyby, které se mohou v aplikaci vyskytnout, protoºe není reálné nasimulovat v²echny moºné situace, vstupy, výstupy a dal²í moºnosti. P esto lze velmi asto vylep²it uºivatelské rozhraní a odstranit adu chyb, na které uºivatel m ºe p i b ºné práci narazit. Správným otestováním se významným zp sobem zvy²uje kvalita aplikace. P i testování na²í aplikace provedeme testy uºivatelského rozhraní a akcepta ní test. 6.1 Test uºivatelského rozhraní Pro testování aplikace nesta í pouze otestovat jeho funkcionalitu. Proto, aby byla aplikace pouºitelná, musí mít také dob e navrºené své uºivatelské rozhraní. 6.1.1 Kognitivní pr chod Pro testování mé aplikace jsem provedl metodu kognitivního pr chodu, jelikoº pr chodem v²ech p ípad uºití, by m lo být moºné otestovat celou aplikaci a tak eliminovat nejviditeln j²í chyby. Kognitivní pr chod je vlastn to samé jako test pouºitelnosti, jen jej ned lají uºivatelé, ale sám návrhá. Výhodou je, ºe není zapot ebí uºivatel, kte í by nám aplikaci testovali, coº vede k úspo e asu. Naopak nevýhodou m ºe být, ºe se návrhá musí vºít do role uºivatele, coº nemusí zajistit odhalení v t²iny nedokonalostí a chyb uºivatelského rozhraní. Na základ kognitivního pr chodu vzniknou návrhy na opravu zji²t ných chyb, které je pot eba opravit. 6.1.1.1 Otázky kladené p i tomto testu: Má uºivatel k dispozici v²echny pot ebné akce? Bude uºivateli jasné, co má ud lat? Dostane uºivatel odpov od systému? 29

30 KAPITOLA 6. TESTOVÁNÍ 6.1.1.2 Výsledky testu Nejv t²í nedostatky byly zji²t ny p edev²ím u odpov dí od systému, který s uºivatelem tém nekomunikoval. To se vy e²ilo pomocí vyskakovacího okna se zprávou pro uºivatele. Dal²í nedokonalosti se vyskytly u fontu písma. 6.1.1.3 e²ení zobrazení informace pro uºivatele, pokud uloºil aktuální rozloºení widget zobrazení informace pro uºivatele, pokud si vybral nový layout p i zav ení daného widgetu zobrazení zprávy s dotazem na uºivatele, zda-li chce akci opravdu provést zm na velikosti písma u widget 6.2 Akcepta ní test Akcepta ní test slouºí ke kontrole, zda byly spln ny v²echny poºadavky, které byly stanoveny je²t p ed analýzou aplikace. dashboard bude slouºit jako úvodní stránka pro uºivatele OK dashboard bude obsahovat widgety OK lze m nit vzhled p ehledové stránky pomocí výb ru z n kolika p eddenovaných layout OK dashboard bude obsahovat tla ítko uloºit, které uloºí aktuální rozloºení widget OK kaºdý widget se skládá z hlavi ky a t la s informacemi pro studenty OK widget lze po dashboardu p emis ovat a adit OK widget lze z dashboardu odstra ovat OK widget lze na dashboard p idávat OK widgetu lze skrýt obsah OK widget lze odkrýt skrytý obsah OK dashboard s widgety bude upraven barevn tak, aby gracky zapadal do prost edí EDUX OK rozhraní widgetu bude implementováno tak, ºe bude moºnost si jednodu²e vytvá et nové widgety OK

Kapitola 7 Záv r Cílem této bakalá ské práce bylo vytvo it zásuvný modul do prost edí EDUX, jehoº hlavním úkolem bylo personalizovat celé toho prost edí tak, aby uºivatel snadno a rychle nalezl relevantní informace. My²lenkou bylo vytvo it p ehledovou stránku dashboard s nastavitelnými widgety. Modul je postaven p edev²ím na syntax pluginu a technologiích PHP, javascriptové knihovny jquery a ajaxu. P i návrhu uºivatelského rozhraní jsem vycházel z re²er²e, kde jsem se nejvíce inspiroval demoverzí od spole nosti Nettuts. Kdyº jsem porovnával svou výslednou práci s e²er²ovanými e²eními, tak tato práce jist svou funk ností p evy²ovala inspirativní demoverzi, tém srovnatelná byla s p ehledovou stránkou od Seznam.cz, ale oproti dashboard vytvo eným spole ností Google má men²í i v t²í nedokonalosti. M ºe to v²ak být ten správný inspirující prvek do budoucna p i dal²ím roz²i ování tohoto modulu. Roz²i ovat plugin lze v²ak jiº bez v t²ích zásah ihned a to vytvá ením dal²ích typ widget, nejlépe t ch, které uºivatel m usnadní práci p i studiu, vyu ování i jen p i uºívání samotného systému EDUX. P ínos práce byl pro m dosti zna ný. Ov il jsem si, ºe jsem schopný realizovat zasuvný modul do prost edí EDUX pomocí r zných technologií, z nichº n které jsem musel nastudovat aº p i vytvá ení této práce. P edev²ím se jednalo o samotné vytvá ení pluginu pro DokuWiki, knihovnou jquery a ajax. Vyuºil jsem ale i znalostí p edem získaných b hem mého studia, které jsem díky této práci dokázal uplatnit v praxi. Prostudoval jsem nemalé mnoºství dokumentace, lánk a knih, coº m vedlo k úspe²nému dokon ení práce. Celkový as na vytvo ení této práce byl více jak 200 hodin, z nichº nejvíce asu zabralo prostudovat vý²e zmín né technologie a p edev²ím pak vytvo ení samotného pluginu pro DokuWiki. Na základ zmín ných informací mohu konstatovat, ºe cíle práce se mi poda ilo naplnit. 31

32 KAPITOLA 7. ZÁV R

Literatura [1] DOKUWIKI. DokuWiki [online]. [cit. 10. 5. 2011]. Dostupné z: <http://www. dokuwiki.org/cs:dokuwiki>. [2] DOKUWIKI.ORG. Plugin Development [online]. [cit. 10. 5. 2011]. Dostupné z: <http: //www.dokuwiki.org/devel:plugins>. [3] ELISABETH NARAMORE, J. G. Vytvá íme webové aplikace. computer Press, 2006. [4] FLANAGAN, D. JavaScript. computer Press, 1998. [5] KADLEC, T. Edux [online]. 2009. [cit. 10. 5. 2011]. Dostupné z: <https://webing. felk.cvut.cz/project/edux/wiki/studie>. [6] JQUERY, E. jquery kucha ka programátora. computer Press, 2010. [7] SNíºEK, M. Ajax [online]. [cit. 20. 5. 2011]. Dostupné z: <http://www.snizekweb.cz/ clanky/ajax-kde-jsou-hranice/>. [8] STREJ EK, J. Co je wiki? [online]. [cit. 10. 5. 2011]. Dostupné z: <http://wiki.rvp. cz/0_wiki/1.faq/1.co_je_wiki%3f>. [9] W3SCHOOLS. CSS [online]. [cit. 20. 5. 2011]. Dostupné z: <http://www.w3schools. com/css/>. [10] W3SCHOOLS. HTML [online]. [cit. 20. 5. 2011]. Dostupné z: <http://www.w3schools. com/html/>. [11] WIKIPEDIE, P. PHP [online]. [cit. 20. 5. 2011]. Dostupné z: <http://cs.wikipedia. org/wiki/php>. [12] WIKIPEDIE, P. Wiki [online]. [cit. 10. 5. 2011]. Dostupné z: <http://cs.wikipedia. org/wiki/wiki>. 33