eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£ové gra ky 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, speci kace cíle
3
2.1
Popis problému . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
2.2
Motivace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
2.3
Speci kace cíle
4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 Speci kace poºadavk· 3.1
3.2
3.3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
3.1.1
Widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
3.1.2
Dashboard
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
3.3.1
Uºivatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
3.3.2
Moºnosti akcí uºivatele . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
P°ípady uºití
3.3.3 3.4
5
De nice pojm·
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í
3.3.2.4
Odstran¥ní widgetu
3.3.2.5
P°idání widgetu
3.3.2.6
Minimalizace widgetu
. . . . . . . . . . . . . . . . . . . . . .
8
3.3.2.7
Maximalizace widgetu . . . . . . . . . . . . . . . . . . . . . .
9
. . . . . . . . . . . . . . . . . .
8
. . . . . . . . . . . . . . . . . . . . . . .
8
. . . . . . . . . . . . . . . . . . . . . . . . .
8
Zobrazení v²ech p°ípad· uºití . . . . . . . . . . . . . . . . . . . . . . .
Re²er²e
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9 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 4.3.1
4.3.2 4.4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
Zvolení vhodného pluginu
. . . . . . . . . . . . . . . . . . . . . . . . .
17
PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
4.4.1.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vlastnosti:
18
4.4.2.1
18
Vlastnosti:
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
4.4.3.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
4.4.4.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
4.4.5
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
4.4.6
CSS
20
4.4.4
Vlastnosti:
Vlastnosti:
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4.6.1
Vlastnosti:
Návrh uºivatelského rozhraní
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
. . . . . . . . . . . . . . . . . . . . . . . . . . .
21
5 Realizace
23
Popis implementace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
5.1.1
Action plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
5.1.2
Syntax plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
5.1.3
classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
jQuery, ajaxu a skript pro zpracování . . . . . . . . . . . . . . . . . . .
24
5.1.4
5.1.5
5.1.4.1
Zm¥na pozice widgetu . . . . . . . . . . . . . . . . . . . . . .
24
5.1.4.2
Odebrání a p°idání widgetu na plochu . . . . . . . . . . . . .
25
Widget - zapsané p°edm¥ty
. . . . . . . . . . . . . . . . . . . . . . . .
25
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
5.2
Vytvo°ení nového widgetu
5.3
Pouºitý software
6 Testování 6.1
29
Test uºivatelského rozhraní 6.1.1
6.2
17
4.4.1
4.4.3
5.1
15
Pouºité technologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4.2
4.5
14
Pluginy
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
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
Akcepta£ní test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
. . . . . . . . . . . . . . . .
7 Záv¥r
31
A Seznam pouºitých zkratek
35
xiii
OBSAH
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
4.2
Kone£ná podoba uºivatelského rozhraní
B.1
Ukázka odebrání widgetu
B.2 B.3
Ukázka minimalizace obsahu widgetu . . . . . . . . . . . . . . . . . . . . . . .
39
B.4
Ukázka zvolení layoutu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
. . . . . . . . . . . . . . . . . . . . .
22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
Ukázka p°esunu widgetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
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 fotogra e 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°edde novaný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, speci kace 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, klasi kaci 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 Speci kace 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
Speci kace 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. Speci kace 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 De nice 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²í identi kaci. 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 POADAVK
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°edde novaný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 gra cky 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 POADAVK
3.2.3
7
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 POADAVK
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°edde novaný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í de nitivní, 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.
9
PÍPADY UITÍ
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 POADAVK
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.
11
REERE
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
3.4.3
KAPITOLA 3.
SPECIFIKACE POADAVK
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í de novat 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 modi kovat.[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á speci kované n¥jaké klí£ové slovo neboli vzor, který zvolí sám tv·rce pluginu. Tento vzor poté slouºí k jasné speci kaci 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 speci kován vzorem
∼∼dashboard∼∼.
16
KAPITOLA 4.
ANALÝZA A NÁVRH
Co se tý£e struktury syntax pluginu, obsahuje mimo de novaného vzoru také metody, z
handle() a render(). Jiº z názvu metod vyplývá, co se od handle() modi kujeme 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 nichº jsou nejd·leºit¥j²í metoda
nich dá o£ekávat. Metodu
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 speci kovat, 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 speci ková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.
POUITÉ TECHNOLOGIE
4.3.2
17
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 speci kovali. 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, gra ky, 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(),
•
Nejednotné názvosloví skupin funkcí:
•
Nejednotné po°adí parametr·
•
Ve standardní distribuci chybí debugovací nástroj
4.4.2
strchr(),
mysql_XXX, imap_XXX
ale
oproti
str_replace() imageXXX, bcXXX
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.
POUITÉ 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. Filoso i 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 kon ikt·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 speci kace 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 . 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¥ speci kace 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 UIVATELSKÉ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 gra cky upravil, aby barevn¥ sed¥ly s gra cký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() handle()
•
pokaºdé p°evezme data, které jsou výstupem metody
•
tyto data spolu s p°edde novaným obsahem metody vykreslí do okna prohlíºe£e
•
p°ede onavý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 modi kuje 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°í identi ká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 identi ká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.
25
POPIS IMPLEMENTACE
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 identi ká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.
handle(), která zaji²´uje obsah jednotlivých widget·. Obdobn¥ pluginu syntaxe, data p°edaná metodou handle() se p°edají metod¥
P°edev²ím jde o metodu jako tomu bylo i u
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 private private private
$position; $order; $show; $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.
VYTVOENÍ NOVÉHO WIDGETU
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
$title
XHTML; return $xhtml;
27
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°edde novaný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 gra cky 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 DokuWiki [online]. dokuwiki.org/cs:dokuwiki>.
[1] DOKUWIKI.
[cit. 10. 5. 2011].
Plugin Development [online]. //www.dokuwiki.org/devel:plugins>.
[2] DOKUWIKI.ORG.
[3] ELISABETH NARAMORE, J. G. [4] FLANAGAN, D.
JavaScript.
jQuery kucha°ka programátora.
Ajax [online]. [cit. 20. 5. 2011]. clanky/ajax-kde-jsou-hranice/>.
[7] SNíºEK, M.
Co je wiki? [online]. [cit. cz/0_wiki/1.FAQ/1.Co_je_wiki%3f>.
[9] W3SCHOOLS.
com/css/>. [10] W3SCHOOLS.
com/html/>.
CSS
computer Press, 2006.
computer Press, 1998.
Edux [online]. 2009. [cit. 10. 5. 2011]. felk.cvut.cz/project/edux/wiki/studie>.
[8] STREJ£EK, J.
z:
[cit. 10. 5. 2011]. Dostupné z:
Vytvá°íme webové aplikace.
[5] KADLEC, T.
[6] JQUERY, E.
Dostupné
Dostupné z:
computer Press, 2010.
Dostupné z:
10. 5. 2011]. Dostupné z:
[online]. [cit. 20. 5. 2011]. Dostupné z:
HTML [online]. [cit. 20. 5. 2011]. Dostupné z:
[online]. [cit. 20. 5. 2011]. Dostupné z:
Wiki org/wiki/Wiki>.
[online]. [cit. 10. 5. 2011]. Dostupné z:
[11] WIKIPEDIE, P.
org/wiki/PHP>. [12] WIKIPEDIE, P.
33
34
LITERATURA
P°íloha A
Seznam pouºitých zkratek PHP
Hypertext Preprocessor
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
API
Application Programming Interface
KOS
Komponenta studia
HTTP
Hypertext Transfer Protocol
SMPT
Simple Mail Transfer Protocol
FTP
File Transfer Protocol
IMAP
Internet Message Access Protocol
POP3
Post O ce Protocol version 3
LDAP
Lightweight Directory Access Protocol
ODBC
Open Database Connectivity
DOM
Document Object Model
W3C
World Wide Web Consortium
AJAX URL
Uniform Resource Locator
XML UI
Asynchronous JavaScript and XML
Extensible Markup Language
User interface
JSON
JavaScript Object Notation
35
36
PÍLOHA A.
SEZNAM POUITÝCH ZKRATEK
P°íloha B
Uºivatelská p°íru£ka Tato p°íru£ka slouºí jako návod k pouºívání modulu roz²í°ení nazvaným Dashboard. Tento modul je ur£en pro v²echny uºivatele EDUX a m¥l by jim zpohodlnit práci v prost°edí. Ovládá se p°edev²ím pomocí my²i.
B.1 Podmínky Pro zobrazení tohoto pluginu musí být uºivatel p°ihlá²en do systému EDUX. Poté jiº m·ºe bez rozdíl· uºivatelských rolí vyuºívat v²echny funkce roz²í°ení.
B.2 Návod pouºití Vzhledem k tomu, ºe aplikaci není pot°eba nijak instalovat ani sloºit¥ nastavovat, budeme spí²e popisovat, jak lze aplikaci pouºívat.
B.2.1
P°idání widgetu
V pravém postranním menu je mimo tla£ítka uloºit také seznam v²ech práv¥ nezobrazených widget·. Kliknutím na n¥který z nich se widget op¥t zobrazí na plo²e na p·vodním míst¥, kde byl zav°en.
B.2.2
Odebrání widgetu
Pokud chceme widget z plochy odebrat, sta£í kliknout v horní li²t¥ widgetu na ikonku s k°íºkem, která zp·sobí otev°ení dialogového okna s dotazem, zda-li chceme widget opravdu zav°ít. P°i potvrzení widget zmizí. P°i zamítnutí se dialogové okno zav°e a nic se nestane.
37
38
PÍLOHA B.
UIVATELSKÁ PÍRUKA
Obrázek B.1: Ukázka odebrání widgetu
B.2.3
P°esun widgetu
P°esun widgetu se se d¥lá pomocí my²i a to uchopením za horní li²tu. P°i najetí my²i na tuto li²tu se zm¥ní také kursor, podle n¥hoº poznáme, ºe m·ºeme vybraný widged p°esunout. Tla£ítko my²i drºíme stále stisknuté a p°etáhneme widget na zvolené místo. Takto m·ºeme pokra£ovat i s ostatními widgety. Poté co budeme s rozloºením spokojeni, je pot°eba kliknout na tla£ítko
uloºit,
které nalezneme v pravém postranním panelu.
Obrázek B.2: Ukázka p°esunu widgetu
B.2.
39
NÁVOD POUITÍ
B.2.4
Minimalizace a maximalizace widgetu
Widgetu lze také skrýt a následn¥ odkrýt obsah. To za pomocí ikonky s trojúhelníkem nacházejícím se v levém rohu li²ty widgetu.
Obrázek B.3: Ukázka minimalizace obsahu widgetu
B.2.5
Nastavení layoutu
Uºivatel má moºnost si vybrat také z p°ipravených layuot·. P°ehled v²ech nalezneme v postranním menu. Pro výb¥r sta£í na zvolený layout kliknout
Obrázek B.4: Ukázka zvolení layoutu
40
PÍLOHA B.
UIVATELSKÁ PÍRUKA
P°íloha C
Obsah p°iloºeného CD text/ - tato práce ve formátu PDF zdroje_prace/ - zdroje textu bakalá°ské práce zdrojove_kody/ - zdrojové kódy bakalá°ské práce readme.txt - informace k instalaci
41
