M A S A R Y K O V A U N I V E R Z I T A
F A K U L T A I N F O R M A T I K Y
Webový portlet pro přehrávání
časově orientovaných dat
D I P L O M O V Á P R Á C E
Jiří Dočkal
Brno, jaro 2016
Prohlášení
Prohlašuji, že tato diplomová práce je mým původním autorským dílem,
které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu,
které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji
s uvedením úplného odkazu na příslušný zdroj.
Jiří Dočkal
Vedoucí práce: RNDr. Radek Ošlejšek, Ph.D.
i
Poděkování
Rád bych na tomto místě poděkoval svému vedoucímu RNDr. Radkovi
Ošlejškovi, Ph.D. za vstřícné uvedení do problematiky a za připomínky
a rady uvedené na konzultacích.
ii
Klíčová slova
JavaScript, JQRangeslider, Liferay, HTML5, KYPO, JQuery, portlet
iii
Shrnutí
Cílem této práce je modifikace časového prvku za účelem intuitivnějšího
a jednoduššího výběru dat. Prvek je vytvořen v rámci Liferay portletu,
umožňuje nové funkce zjednodušující uživateli práci a obsahuje animace,
které napomáhají k pochopení dílčích prvků. Práce obsahuje stručný úvod
do projektu KYPO, detailní popis nového portletu, porovnání starého a nového
portletu a zhodnocení odpovědí z uživatelského dotazníku.
iv
Obsah
1 Úvod 1
2 Kybernetický polygon 2
2.1 O Kybernetickém polygonu 2
2.2 Liferay 3
2.3 Časový portlet v KYPO 3
3 Timeline 6
3.1 Specifikace 6
3.2 Čas jako data 6
3.3 Popis prvků - statický pohled 7
3.3.1 Časové osy
3.3.2 Ovládací panel 10
3.4 Popis prvků - dynamický pohled 12
3.4.1 Časové osy 12
3.4.2 Ovládací panel 18
4 Použité technologie 20
4.1 Bootstrap 20
4.2 Výběr posuvníku 20
4.3 jQuery 24
4.4 jQueryUI 24
4.5 Alloy UI a Font Awesome 24
4.6 Ostatní technologie 25
5 Popis implementace 26
5.1 Časové osy 26
5.2 Ovládací panel 27
5.3 Ikony 28
5.4 Vstupní prvky detailní osy pro zadávání času 28
5.5 Zámek přehledové osy 30
5.6 Stíny 31
6 Srovnání časových portletů 32
6.1 Vizuální změny 32
6.2 Funkční změny 34
7 Hodnocení portletu uživateli 37
7.1 Popis dotazníku 37
7.2 Zhodnocení výsledku dotazníku 38
8 Závěr 40
Přílohy
A Seznam otázek pro uživatelský dotazník 43
v
1 Úvod
V případě modernizace, minimalizace nebo změny prvků webových stránek
může nastat situace, kdy přestane fungovat či začne být zastaralá nějaká
jejich část. Prostředí Kybernetického polygonu, kde probíhá výzkum
a vývoj metod na ochranu proti útokům na informační infrastruktury v České
republice, se stále vyvíjí a zdokonaluje. S těmito změnami však stoupá zastaralost
některých prvků, které jsou důležité pro správnou funkčnost prostředí.
Časový portlet je právě jeden ze zmíněných prvků, na který je kladen
požadavek, aby byl co nejjednodušší a nejintuitivnější. S tímto prvkem se
uživatel setká prakticky kdykoliv, kdy požaduje vizualizaci dat. Cílem této
práce je časový portlet vylepšit a vyřešit nedostatky předchozího řešení.
V druhé kapitole práce je stručně vysvětlen pojem Kybernetický polygon,
technologie Liferay, na které je polygon spuštěn, a nakonec samotný
časový portlet, jeho funkce a význam.
Třetí kapitola se zabývá již novým časovým portletem. Kapitola popisuje
požadované změny, definuje, jak je v portletu reprezentován čas, a nakonec
je popsán portlet jak z dynamického, tak ze statického hlediska.
Čtvrtá kapitola specifikuje soupis použitých technologií. V rámci kapitoly
jsou stručně porovnány vybrané nástroje, které byly zohledněny při
úpravě portletu.
Pátá kapitola popisuje implementaci nových a upravených částí port­
letu.
Srovnání původního a nového portletu je podrobně popsáno v šesté
kapitole. Kapitola obsahuje srovnání vizuálních, ale také funkčních změn
ovládacích prvků, které zásadně ovlivnily chod celého portletu.
Sedmá kapitola obsahuje v první části popis dotazníku, který byl podán
uživatelům pracujícím na projektu, ale i uživatelům mimo tento projekt.
Další část této kapitoly obsahuje shrnutí odpovědí na jednotlivé otázky.
1
2 Kybernetický polygon
2.1 O Kybernetickém polygonu
V posledních letech jsou kybernetické útoky čím dál více sofistikovanější
a často se přesouvají i do prostředí kritických infrastruktur. Uživatelé internetu
čelí kybernetickým útokům každý den ve formě podvodných emailů
získávajících citlivé údaje, infikovaných příloh nebo pokusů o vniknutí do
jejich soukromí. Nejlepší možností, jak pochopit a kontrolovat tyto útoky,
je studovat jejich chování, a to simulací útoků z běžného světa. K takové simulaci
slouží prostředí založené na využívání výpočetních technologií, kdy
jsou software, sdílené zdroje a informace uloženy na vzdálených serverech.
Jedním z takových prostředí je Kybernetický polygon, dále jen KYPO. Projekt
K Y P O je vytvořený a spravovaný Masarykovou Univerzitou společně
se sítíCESNET.[4,3]
Projekt KYPO se zabývá výzkumem, vývojem a sestavením unikátního
prostředí pro analýzu výše popsaných hrozeb, které ohrožují bezpečnost
kritických informačních infrastruktur. Díky němu je možné zkoumat podrobně
vznik, šíření a dopady aktuálních kybernetických hrozeb. Toto zkoumání
je vytvářeno za pomocí různorodých scénářů, které mohou obsahovat
rozsáhlé počítačové sítě, na kterých budou spouštěny služby a aplikace.
Členové bezpečnostních týmů se mohou na prostředí K Y P O cvičit
a školit v základech bezpečnosti, administraci a ve forenzním zkoumání
napadených strojů. V prostředí lze realizovat rozsáhlá bezpečnostní cvičení,
kde proti sobě několik týmů uživatelů soupeří, nebo naopak vzájemně
spolupracuje. [5]
Simulace probíhají v sandboxech, které umožňují nedůvěryhodným aplikacím
pracovat pouze v povoleném rozsahu bez možnosti přístupu k jiným
částem systému nebo sítě. Uživatelé přistupují k portálu K Y P O a jednotlivým
sandboxům prostřednictvím jednoho přístupového bodu poskytnutým
webovou aplikací vyvinutou na portálové technologii Liferay. Infrastruktura
sítě sandboxů je zcela virtualizovaná, a tak k nim lze přistupovat
vzdáleně bez potřeby jakékoliv správy hardwaru. Veškeré aktivity,
které probíhají v sandboxech, jsou monitorovány. Naměřená data jsou dále
uložena v databázi nasazené v tzv uzlu pro správu sandboxu (Sandbox
Management Node).[6]
2
2. K Y B E R N E T I C K Ý P O L Y G O N
2.2 Liferay
Liferay portál je volně šiřitelný projekt implementovaný v jazyce Java založený
na licenci LGPL. Liferay je portálový server, to znamená, že byl navržen
jako samostatné prostředí, kde jsou všechny, uživatelem potřebné,
aplikace spustitelné a jsou konzistentním a systematickým způsobem integrovány
dohromady. Liferay portál je vhodný pro vytvoření prostředí
pro spolupráci mezi pracovními skupinami. Toto prostředí poskytuje aplikace,
které jsou zaměřeny na vzájemné sdílení dokumentů a komunikaci.
K tomu, aby tato integrace fungovala, byly všechny aplikační funkce v rámci
portálů uloženy do fragmentů stránky. Tyto fragmenty jsou nazývány portlety.
Portlety jsou webové aplikace nacházející se v části webové stránky.
Jádro portálu je portletový kontejner, jehož funkce je shlukovat a správně
zobrazovat ty portlety, které patří ke konkrétní stránce.[17,18]
Všechny portletové aplikace mohou být nasazené na kterýkoliv portletový
kontejner, pokud navzájem podporují standard JSR-168 nebo JSR-286
(v případě Liferay verze 6.2), který jazyk Java definuje. Liferay umožňuje
určitou úroveň přizpůsobení, uživatel může pomocí šablon měnit
vzhled nebo upravovat uspořádání jednotlivých stránek. Je tedy umožněno
umisťovat portlety v různém uspořádání na stránce, tyto portlety jsou následně
dynamicky zpracované serverem. Portletové aplikace mohou být
dvojího typu. První typ portletů poskytuje malou funkcionalitu a je napojován
portálovým serverem na ostatní portlety, které následně tvoří větší
aplikaci. Druhý typ portletů jsou celé aplikace, které jsou implementované
v podobě jednoho nebo pár portletových oken. Výběr druhu implementace
záleží čistě na vývojářích, kteří se mohou starat pouze o správnou funkcionalitu
portletů. [18]
2.3 Časový portlet v K Y P O
Součástí testovacího prostředí je vizualizační podsystém, který poskytuje
pohledy a interakce k lepšímu pochopení procesů během kybernetických
experimentů. Tyto nástroje se musí vyrovnat s širokou škálou úkolů zahrnujících
tréninkové programy síťové administrace stejně jako forenzní
analýzy provedené bezpečnostními experty. Hlavním smyslem vizualizačního
nástroje je poskytnout ve specializovaných oknech různé vizualizace
3
2. K Y B E R N E T I C K Ý P O L Y G O N
dat naměřených v sandboxech. Tato data mají převážně formu dynamicky
přibývajících časových řad. Vizualizace byly vyvinuty speciálně pro učební
případy kde vyučující definuje, které vizualizace budou přístupné a které
ne, v závislosti na testovacím scénáři. Vzhledem k tomu, že vizualizační
nástroje mohou zobrazovat velké množství informací, byl k jejich ovládání
vyvinut právě časový portlet, který je schopen omezit rozsah dat, které zobrazují
vizualizační portlety.[4]
Časový portlet je základní součástí každé stránky využívající vizualizaci.
Tento interaktivní nástroj poskytuje uživateli efektivní výběr a manipulaci
s časovým rozsahem, který chce uživatel zkoumat a zobrazovat ve
vizualizačních oknech. I přesto, že jsou vizualizace společné pro všechny
uživatele zapojených do aktuální relace cvičení, mohou si tito uživatelé
právě díky časovému portletu zobrazit data individuálně. Časový portlet
umožňuje zobrazit data naměřená v minulosti, aniž by ovlivnil zobrazení
ostatních uživatelů. Momentálně je tento portlet využíván pěti vizualizačními
portlety: Spider Chart 3D, Spider Chart, Line charts, Network Topology.
Komunikace s ostatními portlety probíhá pomocí HTTP GET požadavků
ve formátu JSON, které jsou zprostředkovávány pomocí technologie
AJAX.[8]
i—Time overview-
T i m e detail ( h í d e j Fixed
range: g|
Synchronization: ^
^ Number of packets
x Number of flow;
k Number of bits
Node - outgoing traffic Data status:
[ ID: 1, srcID: 1, dest... I * | Data
" — Topology
Obrázek 2.1: Původní časový portlet
Původní časový portlet, který byl v rámci této diplomové práce upraven,
je vyobrazen na obrázku 2.1. Portlet je rozdělen na dvě časové osy,
přehledovou a detailní. Přehledová osa je rozdělena na časové díly s uvedenou
časovou hodnotou, které mohou být vybrány pomocí posuvníku,
ten má na levé i pravé straně umístěn popisek s aktuálně vybranou hod-
4
2. K Y B E R N E T I C K Ý P O L Y G O N
notu. Detailní osa je rozdělena na časové díly, kde každý díl obsahuje jeho
hodnotu, tento díl je rozdělen na další menší dílky. Tyto dílky vodí posuvník
detailní osy, obsahující také informační popisky, stejně jako v případě
přehledové osy. Výběr dat musí být proveden nejdříve hrubým výběrem
z přehledové osy, poté se výběr upřesní na ose detailní.
Portlet umožňuje automatický výběr nových dat pomocí magnetu, který
se aktivuje po přemístění pravé části posuvníku na konec přehledové osy.
Aktivní magnet se znázorní zobrazenou ikonou magnetu napravo od po­
suvníku.
Celý portlet může být skryt pomocí tlačítka „(hide)", umístěného v levém
horním rohu portletu. Stejně tak může být skryta jen detailní osa pomocí
stejného typu tlačítka vedle nadpisu „Time detail".
Vizuální část portletu, kde se nachází panel pro přehrávání a navigaci,
panel nastavení a export, je vysvětlena podrobně v kapitole 3.3.2, funkční
část poté v kapitole 3.4.2.
Více informací o komunikaci časového portletu mezi ostatními portlety
nebo o jeho vnitřní komunikaci se lze dočíst v diplomové práci M .
Kňazského [8].
5
3 Timeline
3.1 Specifikace
Cílem nového portletu, viz obr. 3.1, je vyřešení nedostatků předchozího řešení.
Zobrazení prvku na stránce bude kompaktnější, s možností minimalizace
výšky, a pomocí animací bude napomáhat k lepšímu pochopení některých
funkcí. Zobrazení dat na ose bude škálovatelné s ohledem na hustotu
přibývajících hodnot, tímto pak bude přehlednější orientace v datech. Filozofie
manipulace s časovou osou bude zcela pozměněna tak, aby výběr dat
byl intuitivnější. Přehledová osa bude nově používána pro hrubé určení
časového rozsahu, tedy jako doposud, s výjimkou detailní osy, která bude
zobrazovat celý výběr a její změnou bude prováděna jemnější manipulace.
Problematiku přibývajících dat a manipulaci s výběrem je zapotřebí řešit
smysluplně, tedy pozměnit funkci magnetu a zamykání výběru posuvníku.
-ID
00:00 20 0" :25:O0 02:10 30' :?:'5:02 •• . : 30 3-5:25:02 Oč: 3 G 00 37:25:03 0-1-0:00 32:55:23 11:00:20 '2:05:20 13:10:20 '4:'5:20 15:20:20 '0:25:20 17:30:20 '.-3:25:22 1v:-0:20 20:45:20 2':50:2i: 21:5í i :
Zoom: [i]
Data status1
synchronlz-aticn: ^
Data
Topology
I K Number of packets |
« Number of flows
I IT Number of bits
Node - outgoing traffic:
ID: 1, srcID: 1, destID: 3
Export:
[ Ptap I
Obrázek 3.1: Nový časový portlet
3,2 Čas jako data
Je nutné rozlišit čas jako fyzikální jednotku a model času v informačních
systémech. Při modelování času v informatice není cílem perfektně vyobrazit
fyzikální jednotku, ale poskytnout model, který je nejlépe přizpůsobený
pro aktuální použití v daném problému. Z mnoha možných pohledů
na propojení dat a času je v případě časového portletu, tedy při zobrazení
množství dat v daném časovém okamžiku, nejvhodnější pohled na data
jako na události. Ty mohou být reprezentovány jako abstraktní časové body
6
3. T I M E L I N E
bez trvání.[7] Tento pohled může být také označen jako diskrétní doména.
V takovéto doméně se vyskytují časové odstupy. Jsou založeny na nejmenší
možné jednotce - milisekundě, jako v systému UNIX, a běžně používané v
informačních systémech. Z důvodu velké hodnoty bývá často používána
tzv zrnitost, která umožňuje typ dat namapovat na jiný typ. Z pohledu
času lze zrnitost vidět například v kalendáři. Den, v tomto případě základní
jednotka kalendáře, bývá mapován na týdny, dále na měsíce a roky. Většina
informačních systémů, která využívá časově orientovaná data, je založena
na diskrétním modelu využívajícím nejmenší zrnitost - třída „Date"
programovacího jazyku Java využívá milisekundy jako nejmenší zrnitost.
Z tohoto důvodu mohou být časové oblasti popsány jako sekvence po sobě
následujících stejně dlouhých časových intervalů. Tyto jednotky pomáhají
jednodušeji reprezentovat místo v čase jako číslo relativní k nějakému výchozímu
bodu - počet milisekund od počátku, tedy od 1.1.1970 00:00:00.
Základními prvky, používanými pro napojení dat na čas, jsou časová primitiva.
Jedno z primitiv, využívaných časovým portletem, je časový bod.
Obecně, v závislosti na rozsahu, může být časový bod definován na všech
úrovních zrnitosti. [1]
3.3 Popis prvků - statický pohled
Tato část kapitoly se zabývá popisem jednotlivých prvků nového časového
portletu. Popisuje, z jakého důvodu byl zvolen vzhled hlavní a vedlejší osy,
jejich funkci a funkci ostatních prvků časového portletu z hlediska statického
pohledu.
3.3.1 Časové osy
V případě přehledové, ale i detailní mají obě osy stejnou zrnitost. Data,
stejně jako komunikace mezi portlety, komunikují v jednotkách milisekund.
Uživatelům se zobrazuje čas převedený z milisekund do časového bodu
hh:mm:ss na obou osách.
Původní návrh úpravy časového portletu byl řešen pomocí jedné časové
osy, která by umožňovala výběr výběr času jak pomocí posuvníku,
tak pomocí šipek. Detailní časová osa by zcela zmizela a veškerý výběr by
se odehrával na multifunkční ose s více prvky. Tento návrh nakonec nebyl
uskutečněn, z důvodu vysoké nepřehlednosti při velké hustotě dat, kdy
7
3. T I M E L I N E
by uživatel nebyl schopen vybrat nebo se zorientovat v intervalu dat. Realizovaný
návrh se nakonec drží základního kamene původního portletu,
tedy využít dvě osy jednu pro hrubý výběr a druhou pro detailní, jemnější
výběr. Návrh se tak drží mantry o vyhledávání v informacích navržené Beriem
Shneidermanem. Jeho návrh by měl navést uživatele prozkoumávající
vizuální data následovně:[2]
• nejdříve přehled
• poté přiblížení a vyfiltrování
• nakonec podrobné informace
Výběrem dat z přehledové osy, následně z osy detailní, a zobrazení těchto
dat na jiném vizualizačním portletu spolu s podrobnostmi a možností interakce,
je dodržen výše zmíněný postup.
V rámci časových os přibyly nové funkcionality, které umožňují uživateli
snadněji manipulovat a nastavovat si určité hodnoty času. Konkrétní
změny, provedené na osách a dalších prvcích, lze nalézt v kapitole 6, shrnující
rozdíly mezi oběma portlety.
Přehledová osa
Přehledová osa, viz obrázek 3.2, je hlavní osou sloužící k hrubému výběru
ze všech dostupných dat. Osa je tvořena pravítkem, posuvníkem se zámkem
a magnetem. Pravítko se přizpůsobuje, počet jednotlivých časových
značek je responzivní vůči šířce okna prohlížeče. Každá časová značka je
tvořena levou hranou určující svoji pozici na ose.
a
00:00:00 03:58:20
a 1
:20 16:03:40 20:02:0000:00:00 03:58:20 07:56:40 12:05
1
:20 16:03:40 20:02:00
3
Obrázek 3.2: Přehledová časová osa
Zámek
Zámek představuje novou funkci časového portletu. Umožňuje zamezit
změně pozice levého madla na přehledové ose při aktivaci magnetu zmíně-
8
3. T I M E L I N E
ném v následujícím odstavci. Zámek je ve výchozím stavu neaktivní. Neaktivní
zámek je vyobrazen pomocí rozpojeného odemčeného zámku, viz
obr. 3.3a, aktivní zámek je znázorněn uzavřeným zámkem, viz obr. 3.3b.
07:56:40 07:56:40
(a) Odemčený (b) Zamčený
Obrázek 3.3: Zámek
Zámek může být vyplněn jinou barvou, tato situace však nemá na funkci
zámku vliv, Více o této situaci se lze dočíst v popisu prvků z dynamického
pohledu 3.4.1. Aktivita zámku ovlivňuje i přehrávání dat, kterému se věnuje
více popis dynamického chování přehrávání a navigace 3.4.2.
Magnet
Přehledová osa umožňuje automaticky vybírat dynamicky přibývající data,
a to pomocí tzv magnetu, který je umístěn napravo od osy. Stejně jako zámek
je magnet ve výchozím stavu vypnutý, viz obrázek 3.4a, po jeho aktivaci,
viz obrázek 3.4b, jsou nově příchozí data automaticky zahrnována do
výběru přehledové osy, a tedy propagována i do osy detailní.
0 20:02:00 0 20:02:00
(a) Neaktivní (b) Aktivní
Obrázek 3.4: Magnet
Detailní osa
Detailní osa slouží k přesnějšímu výběru již předvybraných dat přehledové
osy viz obrázek 3.5. Neobsahuje žádný posuvník, pouze dva vstupní prvky
9
3. T I M E L I N E
input, akceptující pouze časovou hodnotu ve tvaru hh:mm:ss. Osa obsahuje
také na obou stranách šipky, které umožňují rychlejší posun v datech.
Samotná osa je rozdělena na díly kde levá strana každého dílu reprezentuje
časovou značku umístěnou v daném místě na ose.
£107:59:20 ||||||||||||llllllllllllllli
Obrázek 3.5: Detailní časová osa
Detailní osa se přizpůsobuje podobně jako osa přehledová, takže s vyšším
počtem dílů nemusí mít uživatel přehled o všech hodnotách, které jsou
v tomto případě pouze orientační. K jednoduchému zadání konkrétních
hodnot pak slouží právě dva zmíněné vstupní prvky. Při zadání jakékoliv
hodnoty do vstupního prvku je automaticky vybrána nejbližší hodnota
v poskytnutých datech, proto nemůže nastat situace, kdy by uživatel pro
zadanou časovou značku nezískal žádná data.
t|08 33 20 IIIIIIIIIIIH HOOOOOO | | | | | | | | | | | | | |
Obrázek 3.6: Stíny detailní osy
Jako nový vizuální prvek byly do detailní osy zavedeny stíny, které indikují
přítomnost dat za aktuálním výběrem. Uvnitř osy se na levé nebo pravé
straně nachází stín v případě, že lze výběr dat doleva nebo doprava rozšířit.
Pokud se tedy výběr s levým madlem nachází na začátku nebo s pravým
madlem na konci přehledové osy, nebude v detailní ose na patřičné straně
zobrazen žádný stín. Stejné chování jako stín má i příslušné tlačítko na posouvání
posuvníku přehledové osy. V případě dostupných dat je možné na
něj kliknout, v druhém případě má tlačítko pozměněnou barvu a je neaktivní.
Na obrázku 3.6 vlevo je situace, kdy je možné vybrat hodnotu nižší,
než je uvedena ve vstupním prvku. Vpravo je pak situace, kdy již nelze levé
madlo posunout více doleva, a tedy vybrat nižší hodnotu.
3.3.2 Ovládací panel
Kromě nejpoužívanějších os časového portletu je jeho nedílnou součástí
i ovládací panel, obsahující elementy pro manipulaci s časovými osami, ští-
10
3. T I M E L I N E
tek, udávající stav dat, a další nastavení portletu. Tento panel umožňuje
částečné skrytí pomocí šipek v pravé části portletu. N a obrázku 3.7 je vyobrazen
portlet se skrytým nastavením.
^ ^ ^ ^
00:00:00 Q1:05:0o|02:10:00|o3:15:00 04:20:00 05:25:0o|06:30:00 07:35:0008:40:0o|09-55:20 11:00:2ojl 2:05:2o| 13:10:2 j 14:15:20 15:20:20 16:25:2o| 17:30:iO 15:35:20 19:40:20 20:45:20 21:50:20 22:55:20
h« H • M NI M 1.O0X N Zoom: § Data status: Data Topology
Obrázek 3.7: Nový časový portlet se skrytým nastavením
Přehrávání a navigace
Přehledová osa umožňuje automatický pohyb svého posuvníku. Tuto funkci
lze přirovnat k aplikaci běžného přehrávače, který nám umožňuje spustit
nebo pozastavit posuvník, posunout se o jednu časovou známku vpřed
nebo zpět, nebo skočit na začátek či konec celé časové osy. Všechny tyto
funkce poskytuje i přehrávací panel portletu. Další součástí tohoto panelu
je ovládací prvek nastavující rychlost přehrávání, rychlost se dá až desetinásobně
zrychlit nebo zpomalit na čtvrtinu.
V rámci navigace byla vytvořena nová funkce „zoom", viz obrázek 3.8,
která ovládá rozsah výběru na přehledové ose. Tato funkce se nachází poblíž
přehrávacího panelu, je stále viditelná i po skrytí nastavení. Je možné
ovládat ji i pomocí kombinace klávesy „Ctrl" a kolečka myši.
Zoom:
Obrázek 3.8: Prvek „zoom"
Stavový štítek zdroje dat
Štítek zobrazuje stav přijímaných dat. Data, která jsou na vstupu, jsou rozdělena
na časové známky a na topologii. Popisky „Data" a „Topology"
mohou být obarveny třemi různými barvami udávající stav. Zelená značí
správně načtená data, oranžová znamená, že data jsou inicializována nebo
že časový portlet čeká na odpověď a červená značí problém se zdrojem dat.
11
3. T I M E L I N E
I po skrytí nastavení zůstává štítek stále viditelný.
Nastavení
Vzhledem k vysokému počtu jiných portletů, závislých na časovém portletů,
je možnost nastavit, která data chceme aktuálně využívat. K tomu
slouží v panelu nastavení kolonka pro výběr, které fenomény se mají použít.
Základní zobrazené fenomény jsou: „Number of packets" (Počet paketů),
„Number of flows" (Počet toků) a „Number of bits" (Počet bitů).
Jako další z možnosti nastavení je volba synchronizace mezi jednotlivými
instancemi časových portletů, které mohou být umístěny na více
stránkách. V případě zapnuté synchronizace časový portlet zasílá události
a naslouchá jim mezi ostatními instancemi.
Vizualizační portlety by měly reagovat načtením nových dat pro aktuálně
vybraný uzel. Konkrétní uzel může být vybrán pomocí ovládacího
prvku „Node - outgoing traffic" (Uzel - odchozí provoz), který určí ID konkrétního
uzlu a ID zdroje a cíle.[8]
Export
Tlačítko pro export poskytuje možnost exportovat aktuálně vybraná data
do souboru. Jsou podporovány dva formáty - „pcap" a „flow". V tuto chvíli
je funkce exportu vedena jako externí služba a není plně podporována.[8]
3.4 Popis prvků - dynamický pohled
3.4.1 Časové osy
Časové osy se navzájem ovlivňují tak, že při jakékoliv události na přehledové
ose se změna projeví na ose detailní a naopak.
Přehledová osa
Přehledová osa obsahuje veškerá poskytnutá data, její posuvník slouží pro
hrubý výběr dat. Tento výběr je pak rozsah dat pro detailní osu. Výběr se
provádí pomocí madel umístěných na okraji posuvníku. Levé madlo není
viditelné, po najetí myši nad něj se však místo klasického kurzoru zobrazí
oboustranná šipka znázorňující možnost změny horizontální pozice.
12
3. T I M E L I N E
Stejné chování má i pravé madlo, které je navíc zvýrazněno stejnou barvou,
jako ohraničení pravého vstupního prvku na detailní ose. Po přemístění
madla se změna okamžitě projeví na detailní ose, kde se změní hodnota
v jednom ze vstupních prvků, tím se zvětší nebo zmenší rozsah vybraných
dat. Při změně pozice madla, kdy dojde k překročení pozice druhého
madla, se funkce obou madel prohodí. Příklad takového chování je v případě,
kdy je levým madlem překročena pozice pravého madla. V té chvíli
bude mít posuvník svoje levé madlo na místě pravého a uživatel bude pohybovat
s madlem pravým. Po přesunutí celého posuvníku zůstává rozsah
dat stejný, změní se jen pozice výběru, a tedy i hodnoty obou vstupních
prvků na detailní ose.
Posuvník přehledové osy může mít různé chování v závislosti na stavech
dalších prvků této osy. Patřičné chování je znázorněno na stavovém
diagramu na obrázku 3.9. Výběr dat, který znázorňuje posuvník, se může
v jistých případech rozšiřovat, posouvat, nebo i zužovat. Tyto případy, kromě
samotné změny výběru posuvníku uživatelem pomocí madel, ovlivňují prvky
magnet, zámek nebo přehrávání. Oba dva prvky jsou dále popsány v následujících
částech.
Stavy přehledové osy
krok zpět / posunutí posuvníku
krok vpřed / posunutí posuvníku
nová data / zmenšení výběru
kliknuti na zámek / změna stavu zámku
táhnutí levého madla
táhnutí pravého madla
nová data
táhnutí levého madla
->
pasivní
vstup / neaktivní magnet
krok zpět
krok vpřed
kliknutí na magnet
táhnuti posuvníku
táhnutí pravého madla
kliknutí na magnet
K
pasivní = při nových datech zůstává na místě
rostoucí = při nových datech se rozšiřuje směrem doprava
plovoucí = při nových datech se posouvá směrem doprava
zmagnetizovaný
vstup / aktivní magnet
rostoucí
vstup / aktivní zámek, rozšíření doprava
ano]
aktivní zámek?
[ne]
kliknutí na zámek
plovoucí
vstup / neaktivní zámek, posunutí doprava
Obrázek 3.9: Stavový diagram posuvníku přehledové osy
13
3. T I M E L I N E
Posuvník se může nacházet celkově ve 4 stavech:
pasivní Posuvník se nepohybuje a výběr se tak nemění i v případě nově
příchozích dat. Tento stav je pro posuvník výchozí, nachází se v něm
v případě, že magnet, zámek a ani přehrávání nejsou aktivní.
zmagnetizovaný Posuvník se nachází stále v nejpravější pozici na přehledové
ose. Zmagnetizovaný stav lze nadále rozdělit na další dva stavy:
rostoucí Výběr dat se rozšiřuje díky aktivovanému zámku.
plovoucí Šířka vybraných dat se nemění, změní se pouze celková pozice
výběru.
Výše zmíněné prvky, měnící stavy posuvníku, vytvářejí následující události,
které jsou použity i ve stavovém diagramu:
kliknutí na zámek Událost nastává při kliknutí na zámek umístěný na po­
suvníku.
kliknutí na magnet Událost nastává při kliknutí na magnet umístěný napravo
od přehledové osy. Chování magnetu je znázorněno na diagramu
aktivit na obrázku 3.11.
táhnutí posuvníku Posunutí celého posuvníku pomocí myši na určitou pozici
osy.
táhnutí pravého madla Posunutí pravé strany posuvníku pomocí madla
na určitou pozici osy.
táhnutí levého madla Posunutí levé strany posuvníku pomocí madla na
určitou pozici osy.
krok zpět Kliknutí na tlačítko „prev" v panelu přehrávání. Jedná se o posunutí
o jednu časovou známku doleva.
krok vpřed Kliknutí na tlačítko „next" v panelu přehrávání. Posuvník se
posune o jednu časovou známku doprava. Událost je podobného charakteru
jako jedna iterace funkce „ticker", jejíž diagram aktivit je znázorněn
na obrázku 3.14 a vysvětlen v části kapitoly o přehrávání a na­
vigaci.
14
3. T I M E L I N E
Zámek
Samotný zámek, viz obrázek 3.10a, ovládá pouze stav, na jehož základě se
rozhoduje magnet a přehrávání. Po najetí myší na neaktivní zámek se naznačí
jeho aktivace změnou ikony. Při zúžení posuvníku natolik, že by jeho
šířka měla být menší, než šířka zámku, se zámek posune mimo posuvník,
aby bylo stále možné pohodlně manipulovat s levým i pravým madlem
posuvníku. Zámek se pak, v tomto případě, vyskytuje nad levým madlem
posuvníku ve změněné barvě, z důvodu jiného kontrastu vůči pozadí, viz
obrázek 3.10b.
3:20 107:56:40 3:20 07:56:40
(a) (b)
Obrázek 3.10: Přechod zámku mimo posuvník
Magnet
Pomocí magnetu lze aktivovat automatický výběr nových dat. Po kliknutí
na magnet se pravé madlo posuvníku přehledové osy přesune do nejpravějšího
bodu osy. Přesun je znázorněn animací plynulého posunu, aby uživateli
byla na první pohled zřejmá funkce magnetu. Spolu s posunem se
spustí i přehrávání časového portletu. Touto operací je zaručeno, že nová
data, která se nově na časové ose objeví, budou automaticky vybrána. Jestli
bude spolu s pravým madlem posunuto i levé madlo, zaručuje dříve zmíněný
zámek. Pokud je aktivovaný, tak se po aktivaci magnetu přesune ve
stejnou chvíli jako pravé madlo s tím rozdílem, že bude zachován stejný
rozsah posuvníku jako před aktivací magnetu. N a obrázku 3.11 je znázorněno
chování magnetu a jeho další činnosti pomocí diagramu aktivit, který
popisuje závislost magnetu na zámku.
15
3. T I M E L I N E
Kliknutí na magnet
[ne]—<: >-[ano]w
aktivní magnet? \y
do_play() do_pause()
s-[ano]—( y— [ne]\|/
aktivní zámek? \y
rozšířit posuvník ) ( posunout posuvník
V
(^)<^—^zrněna ikony m a g n e t u j ^zrněna stavu magnetuj
Obrázek 3.11: Diagram aktivit magnetu
Detailní osa
Na detailní ose lze najít hned několik aktivit, které ovlivňují nebo jsou
ovlivňovány jinými prvky. Po jakékoliv změně na přehledové ose se detailní
osa přepíše s novým rozsahem dat. Tento rozsah je rozdělen na díly,
jak bylo zmíněno v podkapitole 3.3. Každý díl této osy zobrazuje po najetí
myši čas. Počet dílů je ovlivňován šířkou okna prohlížeče, po změně šířky,
se zavolá metoda, která přepočítá počet dílů a znovu je zobrazí. Podle jakého
vzorce je výpočet prováděn, je uvedeno v kapitole 5.
16
3. T I M E L I N E
Změna levého vstupního prvku detailní osy
vstup jako čas?
Q X V r n e ]
Vstupní hodnota H [ano]
získání maxima d e t a i l n í osy
přepis H maximem
H j e platné? < )- [ne]
[ a n o ] ^ < ^ <
[ne]—£ } H <= max
[ano]
získání n e j b l i ž š í h o platného H
r o z š í ř i t posuvník
Obrázek 3.12: Diagram aktivit vstupního prvku detailní osy
Změnou hodnoty na vstupních prvcích detailní osy se změní pouze přehledová
osa, teprve po této změně se překreslí detailní osa. Do vstupních
prvků je povoleno zadávat pouze číselné údaje oddělené dvojtečkou, tedy
ve formátu času. Jiné hodnoty nedovolí přidat již samotný prvek input
jazyka HTML. Jedinou hodnotu, která není čas a lze ji zadat, je prázdný
řetězec. Řetězec lze do prvku zadat buď postupným odmazáváním buněk
hodin, minut a sekund, nebo po kliknutí na mazací tlačítko vstupního
prvku, které je přítomné v prohlížeči Chromé. Prázdný řetězec je rozpoznán
a detailní osa vybere pro daný vstupní prvek její hranici. Zadávání číselných
hodnot do vstupních prvků je vzájemně omezeno. Pokud je zadána
do levého vstupního prvku hodnota větší, než je aktuální hodnota v pravém
prvku, je zadaná hodnota automaticky upravena na hodnotu pravého
prvku. To samé platí pro druhý prvek. Chování, konkrétně levého vstupního
prvku, je znázorněno na obrázku 3.12 pomocí diagramu aktivit.
17
3. T I M E L I N E
3.4.2 Ovládací panel
Přehrávání a navigace
Ovládání přehrávání časového portletu je intuitivní díky stejnému ovládání,
jako je v běžných přehrávačích. Po kliknutí na tlačítka „next" nebo
„prev" se posuvník přehledové osy posune právě o jednu časovou známku
doprava nebo doleva. Chování je stejné, jako v případě, kdy by se posuvník
na přehledové ose posunul pomocí myši o jednu časovou známku doprava
nebo doleva, tedy se zachováním stejně širokého výběru. Tlačítka
„last" nebo „first" posunou posuvník až k pravé nebo levé hranici přehledové
osy. Poslední tlačítko přehrávání je tlačítko „play", které dle nastavené
rychlosti speed posouvá posuvník vždy o jednu časovou známku doprava,
stejně jako při kliknutí na „next". Po kliknutí na „play" tlačítko změní ikonu
na „pause" a tím i svou funkci, která v novém případě zastaví přehrávání.
Akce tlačítka „play" a „pause" jsou znázorněny v diagramech aktivit na
obrázku 3.13.
do_play()
Izměna stavu přehráváni
změna ikony přehráváni
informování ostatních portletu
čekat 1/speed sekundy
t i c k e r O
i
do_pause()
izměna stavu přehrávání
změna ikony přehrávání
informování ostatních portletu
Obrázek 3.13: Diagram aktivit tlačítek „play" a „pause''
18
3. T I M E L I N E
Veškerou akci přehrávání obstarává vnitřní funkce t i c k e r (), která při
dojetí posuvníku na konec osy kontroluje, jestli nepřibyla nová data. N a
přehrávání má zámek posuvníku stejný vliv jako v případě magnetu, i v tomto
případě chování obstarává funkce t i c k e r (). Chování funkce je vyobrazeno
na obrázku 3.14 pomocí diagramu aktivit.
tickerQ
Obrázek 3.14: Diagram aktivit funkce ticker()
Pro rychlou změnu rozsahu posuvníku přehledové osy slouží funkce
„zoom". Pohybem madla „zoomu" doleva se posuvník zúží směrem ke
středu osy, posunutím na druhou stranu se naopak rozšíří. Nejmenší možná
šířka posuvníku zmenšená touto funkcí je jeden díl přehledové osy, případné
větší zúžení je pak potřeba již provést přímo na posuvníku. Alternativou
použití posuvníku „zoomu" je změna velikosti výběru pomocí kontrolní
klávesy „Ctrl" a otočením kolečka myši.
19
4 Použité technologie
Tato kapitola popisuje jazyky, knihovny a doplňky, které byly použity nebo
byly zvažovány při implementaci časového portletu.
4.1 Bootstrap
Spolu s minimalizací celého časového portletu je v dnešní době obecně
kladen požadavek na přizpůsobitelnost nejen ovládacích prvků, ale i celé
webové stránky vůči různým rozlišením využívající tablety, mobilní telefony
nebo samotné počítače.
Bootstrap je nástroj umožňující vývoj uživatelských částí webových aplikací.
Je to kolekce CSS a H T M L konvencí. Umožňuje změnu CSS stylů formulářů,
tabulek, navigací a jiných ovládacích prvků. Nástroj byl, jako otevřený
kód (dále jen open source), vytvořen v roce 2010 dvěma vývojáři
firmy Twitter, od té doby je stále vyvíjen a využíván mnoha moderními
webovými stránkami, právě díky jeho schopnosti vytvořit dobrý responzivní
vzhled. [15]
Bootstrap poskytuje možnost vytvoření webových stránek na skeletu
reprezentovaném jako mřížka. Tato mřížka se dělí na řádky a dvanáct virtuálních
sloupců, které vývojář rozděluje jednotlivým prvkům na stránce,
kterým se vytvoří dle zadaného čísla šířka v procentech vůči nadřazenému
prvku. Podle rozlišení obrazovky se prvky skládají vedle sebe nebo pod
sebe v závislosti na přiřazené aktuální třídě, která nástrojem Bootstrap přetěžuje
základní třídu CSS ©media. [16]
4.2 Výběr posuvníku
Pro výběr velkého rozsahu dat bylo zapotřebí použít nástroj, který dokáže
vybrat rozsah pomocí myši s tím, že je stále přehledný i pro hustší data.
K dispozici je mnoho nástrojů, které splňují tyto požadavky, avšak ne všechny
plně dostačují k používání v podmínkách K Y P O projektu. Níže je popsáno
několik vybraných nejznámějších nástrojů. Jsou okomentované jejich vlastnosti
a který z nich je nejvhodnější pro použití v časovém portletu.
20
4. P O U Ž I T É T E C H N O L O G I E
jQueryUI Slider Widget
Knihovna jQueryUI, která je hojně využívána v mnoha webových stránkách,
poskytuje prvek nazývající se Slider Widget. Projekty vydávány pod
touto knihovnou spadají pod licenci MIT, tedy pro volné použití i pro komerční
užití s podmínkou zachování hlavičky. Tento prvek dokáže vybrat
rozsah hodnot pomocí myši. Co však nedokáže od základu, je jakákoliv
jiná, pro nás, užitečná funkce. Chybí zde posun celého výběru, nebo jakékoliv
základní pravítko udávající hodnoty na ose. I přes tyto nedostatky,
vzhledem k implementaci v knihovně jQueryUI, je možné doimplementovat
požadované funkcionality. Knihovna má bohatou dokumentaci, a proto
je mnoho prvků využívající posuvník implementovaný na jejím základě. [11]
Start Date: IJun 15 T
| EndDate: |JuMB
01/15 11/15 09/16
2015 2016
Obrázek 4.1: Modifikovaný jQueryUI Slider[13]
Jeden z nástrojů, který se nejvíce přibližuje požadavkům KYPO projektu,
vytvořila skupina FilamentGroup, která upravila prvek Slider Widget
a přidala k němu požadované pravítko spolu s prvky pro přesný výběr,
viz obr. 4.1. Prvek však není nadále vyvíjen a i přes mnoho implementovaných
chybějících funkcí základního prvku nedostačuje všem požadavkům
projektu. [13]
noUISlider
Nástroj, který poskytuje výběr dat pomocí rozsahu pod licencí WTFPL,
tedy s možností jakékoli úpravy bez možnosti měnit samotnou licenci. Zakládá
si na minimalismu i přes to, že má poměrně mnoho funkcí. Nemá
žádné další závislosti na ostatních knihovnách, využívá pouze jazyk JavaScript.
Jeho výhoda je tedy nezávislost na knihovně jQuery nebo jQueryUI,
na kterých staví většina dnešních moderních webů. I přes tuto výhodu
jeho nezávislost nemá v portletu využití, protože KYPO standardně
využívá knihovnu jQuery. Jednou z užitečných funkcí, kterou nyní časový
21
4. P O U Ž I T É T E C H N O L O G I E
portlet využívá, je zabudovaný prvek input, pomocí kterého může uživatel
zadat konkrétní hodnotu. Za nevýhodu může být považována absence
základního detailnějšího pravítka, které by dokázalo splnit potřeby, z hlediska
orientace, nejen při výběru dat myší. Pravítko se totiž standardně nachází
mimo samotný posuvník a výběr by mohl být při velkém množství
dat nepřesný. Tento problém by se však dal vyřešit pomocí přestylování
CSS stylů.
I " I " I " I " I " I " I " I " I " I " I
0 10 20 30 40 50 60 70 80 90 100
20: 00 T 50: 00 T
Obrázek 4.2: Základní posuvník noUiSlider[9]
Popsaný nástroj, který lze v základním provedení vidět na obrázku 4.2,
by vyhovoval našim podmínkám, avšak až po několika zásadních úpravách.
V základu se tento typ spíše hodí pro jiný typ hodnot, než pro výběr
časových údajů. Pokud by se však v budoucnu mělo upouštět od funkcí
knihovny jQuery, je tento nástroj vhodným adeptem pro modernizaci časového
portletu, a to i díky skutečnosti, že je stále vyvíjen dle záznamů
z repozitáře GitHub.[9]
Ion.RangeSlider
Posuvník, viz obr. 4.3, je vytvořený na základě knihovny jQuery a distribuovaný
pod podmínkami MIT licence. Podporuje události a veřejné metody,
má mnoho různorodých nastavení a může být kompletně upraven pomocí
stylů CSS. Posuvník má nativní podporu pro datový typ datum a čas.
Mezi základní vlastnosti patří zobrazení pravítka, ale i možnost uzamknout
jedno z madel. [14]
22
4. P O U Ž I T É T E C H N O L O G I E
0 500 1 OCO 2 000 3 000 4 000 5 000 4 000 7 000 S 000 9 000 1 0 0 0 0
Obrázek 4.3: Základní posuvník Ion.RangeSlider[14]
Přestože je v dokumentaci uvedena možnost kompletní úpravy pomocí
stylů CSS, samotný vygenerovaný kód není přehledný. Jednotlivé části posuvníku
jsou tvořeny příliš komplexně, a proto by byla jakákoliv změna
CSS stylů, či struktury, velice náročná. V případě tohoto posuvníku jsou
dobře vypracovány vizuální prvky, které usnadňují přehlednost uživateli.
Za zmínku stojí například propojení štítků označujících vybranou hodnotu,
pokud jsou madla blízko u sebe, nebo mizení kontrolních prvků, pokud se
překrývají s jinými. Tato vizuální vylepšení jsou implementována na úkor
veškeré přehlednosti v kódu. Požadavky pro použití v projektu K Y P O však
Ion.RangeSlider splňuje.
jQRangeSlider
Jedná se o JavaScriptový nástroj, který umožňuje výběr dat z osy pomocí
posuvníku. jQRangeSlider je open source projekt publikovaný pod licencí
GPL a MIT, umožňuje tedy použití i v rámci komerčního software. Posuvník
se na ose pohybuje po krocích, které se mu v inicializaci nastaví. [10]
V základním nastavení nástroj je vyobrazen na obrázku 4.4.
2015-05-13 2015-11-13
rJan Feb Mař Apr Mí1
Obrázek 4.4: Základní posuvník jQRangeSlider s pravítkem[10]
V porovnání s dalšími nástroji je jQRangeSlider jediný, který v základu
obsahuje požadované funkce. Ostatní posuvníky, umožňující jakýkoliv výběr
dat, neumožňují tak precizní zobrazení pravítka s hodnotami, přímo
pod posuvníkem v základu. Starý časový portlet byl doposud založen na
23
4. P O U Ž I T É T E C H N O L O G I E
tomto nástroji, a tak se od jeho použití neupustilo hlavně z důvodu využívaných
funkcí a precizního pravítka. Díky přehledné dokumentaci a stálému
vývoji bylo tento nástroj vhodné použít i pro zakomponování nově
implementovaných funkcí.
4.3 jQuery
Projekty, využívající technologii JavaScript, mají možnost práce s knihovnu
jQuery, která poskytuje manipulaci s H T M L objekty, zachytávání událostí,
a jednoduchou práci s technologií AJAX pro komunikaci mezi ostatními
částmi webu. Knihovna je pod licencí MIT.[12]
Pomocí knihovny jQuery jsou v časovém portletu implementovány nejčastěji
funkce pro zachytávání události. Těmi jsou například kliknutí na tlačítko,
změna nějakého prvku nebo stisknutí klávesy. Využité jsou i funkce
pro změnu CSS stylu při jednoduchých animacích založených na jQueryUI.
4.4 jQueryUI
K využití veškerých animací v projektu byla využita knihovna jQueryUI.
Knihovna poskytuje interakce uživatelského rozhraní, efekty, grafické komponenty
a témata pro webové stránky. To vše implementované pomocí nejznámější
JavaScriptové knihovny - jQuery. jQueryUI spadá pod licenci CCO,
což je licence umožňující kopírování, úpravu a distribuování i pro komerční
užití bez nutnosti povolení. [11]
Knihovna v časovém portletu poskytuje animace pro skrytí nebo zobrazení
prvků a k přiřazení nebo odebrání CSS tříd H T M L elementům.
4.5 Alloy UI a Font Awesome
Alloy UI je knihovna, pomocí které jsou vytvářeny interaktivní formulářové
aplikace, které umožňují uživatelskou interakci s daty. Tato knihovna
sjednocuje tři komponenty, H T M L , CSS a JavaScript do jednoho jednoduše
použivatelného schématu. Díky tomuto schématu je možné aplikovat některé
druhy vizuálních problémů bez nutnosti opětovné implementace.[17]
Při úpravách časového portletu samotná knihovna použita nebyla. S verzí
Liferay 6.2, kterou projekt KYPO používá, byla vydána verze Alloy UI,
24
4. P O U Ž I T É T E C H N O L O G I E
která obsahuje upravenou knihovnu Font Awesome. Upravená knihovna
obsahuje zejména ikony a je vydána pod licencí CC-BY-3.0, jež dovoluje
volné užívání i pro komerční účely ale hlavně i svolení vytvářet nová díla
na základě této knihovny. [20]
Některé ikony již časový portlet před úpravami využíval. V rámci úprav
však byly vytvořeny nové ikony právě na základě předlohy některých ikon
knihovny Font Awesome, více informací o těchto ikonách lze nalézt v kapitole
5.
4.6 Ostatní technologie
I přes změnu časového portletu, zůstal výběr použité technologie stejný.
Celý portlet je stavěn na několika souborech typu JavaScript. Časové posuvníky
stále využívají nástroj jQrangeSlider, který naprosto splňuje všechny
požadavky pro výběr dat. Změna byla provedena na detailním posuvníku,
kde je nově využit vstupní prvek input jazyka HTML5 typu „time", který
umožňuje přehledně zadat odděleně hodiny, minuty a sekundy. Nově je
také použita knihovna „mousewheel", díky níž je možné využít kolečko
myši pro změnu přiblížení přehledové osy. Tato knihovna je implementována
pomocí jazyku JavaScript a využívá taktéž knihovnu jQuery.
25
5 Popis implementace
Tato kapitola se zabývá podrobnějším popisem, jakým způsobem byly implementovány
jednotlivé nové nebo upravené prvky časového portletu.
5.1 Časové osy
Obě časové osy získaly zcela nový vzhled, ale částečně i funkci. V obou bylo
nově zavedeno responzivní chování, protože původní portlet byl optimalizován
pro rozlišení minimálně 1366x768.
Přehledová osa
V původním portletu měla přehledová osa pevný počet dílů, který byl vypočítán
ze všech vstupních dat. Nově se počet dílů počítá v závislosti na
šířce přehledové osy vůči šířce jednoho dílu. Díl obsahuje časovou známku
hh:mm:ss. Takto vytvořený díl má 57 px. Aby se poslední díl nenacházel
mimo časovou osu, musí být nutně počet dílů roven: n = šp/šd, kde šp je
šířka posuvníku v pixelech a šd šířka dílu, který je v našem případě zmíněných
57 px. Jak bylo zmíněno v popisu nástroje jQrangeSlider v kapitole
4, zobrazení každého dílu na časové ose je podmíněno proměnnou step
(krok), která je v tomto případě celé číslo udávající počet časových známek.
Je tedy důležité, kolikátá každá časová známka má být zobrazena. V inicializaci
časové osy se nastavuje minimální a maximální hranice, díky nim se
zjistí celkový počet použitelných časových známek. Vzorec pro proměnnou
step je pak již zřejmý:
rmaxH — minií-.
Proměnné maxH je horní hranice a minH je dolní hranice časové osy. Zaokrouhlování
v rovnici je z důvodu možného vzniku většího kroku, než je
požadováno a tím je zamezeno, aby se poslední časový nacházel částečně
mimo osu.
26
5. P O P I S I M P L E M E N T A C E
Detailní osa
Škálování na detailní ose je řešeno stejným způsobem jako na ose přehledové
s tím rozdílem, že díly jsou nastavovány na minimální šířku 10 pixelů.
Taková hodnota odpovídá šířce šipky vyskakovacího popisku, který je zobrazen
po najetí myší na konkrétní díl. Informační popisky slouží k zobrazení,
jaká časová známka se nachází na detailní ose na konkrétním místě.
Ač byl v původním portletu umožněn výběr na detailní ose pomocí posuvníku
na všech dílech časové osy, na nové detailní časové ose posuvník zcela
vymizel a díly zde slouží pouze k přibližné orientaci. Popisky jsou pouze
pro přehled z toho důvodu, že nejsou zobrazeny všechny kvůli responzivitě.
Zadávání přesných hodnot je nyní řešenou pouze přes vstupní prvky
input, jejichž funkce bude rozebrána podrobněji v podkapitole 5.4.
Názorný příklad škálování obou osy bude uveden v následující kapitole
6.
5.2 Ovládací panel
Vzhledem k požadavku na responzivitu byl upraven i celý panel pod osami,
aby se nejen přizpůsoboval dle aktuálního rozlišení, ale byla vytvořena
i možnost částečně panel schovat. Možnost schování konfiguračního panelu
byla zavedena z důvodu méně časté manipulace s nastavením. Po
skrytí zůstanou zobrazeny jen přehrávání s navigací a stavový štítek. Responzivita
byla implementována na podobnému principu, který využívá
Bootstrap. Bootstrap od verze 3 poskytuje definované třídy col-xx- *, které
zajišťují pro konkrétní rozlišení určitou šířku elementu, dle mřížkového
systému zmíněném v sekci Bootstrap kapitoly 4. Tyto třídy však nemohly
být nyní využity z důvodu využívání nástroje AlloyUI 2.0, který je používán
v celé webové stránce KYPO. Nástroj sice obsahuje Bootstrap verze 2,
ale Bootstrap verze 3 není zpětně kompatibilní se starší verzí, proto jej nebylo
možné dodatečně použít.[16] Vzhledem k tomu, že třídy col-xx-*
využívají základní CSS třídy @media, byla definována konkrétní rozlišení,
pro které budou mít elementy v nastavení určitou šířku, a tím i pozici.
27
5. P O P I S I M P L E M E N T A C E
5.3 Ikony
V rámci zavedení responzivity časového portletu byly vytvořeny nebo použity
již existující nové vektorové ikony. Ke skrytí/zobrazení nastavení nebo
celého portletu byly použity již existující ikony obsažené v knihovně Alloy
UI Font Awesome. Konkrétně se jedná o ikony dvojité šipky „icon-doubleangle-up"
a „icon-double-angle-down". Obě ikony jsou znázorněny na obrázku
5.1 pod číslem la a lb. Jako nové byly vytvořeny ikony magnetu (2a
a 2b) a zámku (3a a 3b). Zámek je i v bílé verzi, která se standardně vyskytuje
na posuvníku, černá se vyskytuje mimo posuvník, viz část „Zámek"
v podsekci 3.4.1.
¥ A(la) Dv ojitá šipka dolů (lb) Dv ojitá šipka nahoru
(2a) Neaktiv ní magnet (2b) Aktiv ní magnet
(3a) Neaktiv ní zámek (3b) Aktiv ní zámek
Obrázek 5.1: Nové vektorové ikony
5.4 Vstupní prvky detailní osy pro zadávání času
Největší změnou, jak vizuální, tak funkční, v celém časovém portletu, prošla
detailní osa. Smysl přesného výběru dat byl pozměněn tak, aby bylo
možné zadat přímo hodnotu času a v případě potřeby přeskočit krok výběru
z přehledové osy.
Pro zadání jakéhokoliv typu hodnoty se v dnešní době používají nejčastěji
prvky input. Díky jazyku HTML5 lze využít vstupní prvky bez větších
úprav. Pomocí atributu type lze určit, jakou hodnotu prvek akceptuje
28
5. P O P I S I M P L E M E N T A C E
a vývojář se již nemusí zabývat implementací důležité funkce pro rozpoznání
vstupu. V případě časového portletu bylo nutné upravit použitý typ
„time" na požadovaný formát hh:mm:ss. Základní typ „time" reprezentuje
formát hh:mm, chybějící sekundy je možné zobrazit pomocí nastavení atributu
step na hodnotu 1. Zmíněná změna nastaví krok po 1 sekundě, oproti
základním 60 sekundám.
Jediná kontrola, která není v základu implementována jazykem HTML5,
a to z důvodu, že se jedná o konkrétní použití v projektu KYPO, je porovnání
hodnot levého a pravého vstupního prvku detailní osy. Není akceptován
případ, kdy uživatel zadá do pravého vstupního prvku menší hodnotu,
než do levého a naopak. Kontrola se provádí hned po zadání hodnoty.
V neakceptovatelném případě se přenastaví hodnota, zadaná uživatelem,
na stejnou hodnotu, jako je v druhém vstupním prvku.
Forma zadávání dat přes vstupní prvky vybraného typu byla zvolena
z důvodu jednoduchosti použití uživatelem. I přesto, že je po uživateli požadováno
zadat nějakou hodnotu, není nutné, aby ji zadal přesně. Pokud
hodnota, která byla zadána, neexistuje, najde se pomocí nově implementované
funkce _closest_timestamp nejbližší existující hodnota.
Funkce _c 1 o s e s t _ t ime st amp využívá JavaScriptovou funkci r edu c e,
která umožňuje použít vývojářem definované příkazy na všechny prvky celého
pole skrze dvě hodnoty a redukovat je na jednu výslednou hodnotu.
V případě použití této funkce, při hledání nejbližší časové známky, se jedná
o porovnání všech prvků po dvojicích a navrácení nejbližší časové známky.
Hodnota vstupního prvku se musí před zpracováním převést z typu
hh:mm:ss na časovou známku. Tento krok je nutný nejen kvůli možnosti
porovnávat hodnoty, ale také z důvodu, že jsou veškeré existující hodnoty
uloženy ve formátu časových známek v poli timestamps. data. V časovém
portletu již existuje funkce na převod z časové známky na hodnotu
času čitelnou uživatelem pod názvem _time_f ormatter. Převodní
funkce je stále používána v přehledové ose v popiscích jednotlivých dílů.
Používá se také při vytvoření detailní osy pro zobrazení hodnot ve vstupních
prvcích nebo informačních popiscích. Nově implementovaná převodní
funkce _ t imestamp_f ormatter funguje na podobném, ale opačném principu
převodu. Zmíněný čas, zadaný uživatelem, se rozdělí podle znaku
dvojtečky na hodiny, minuty a sekundy, nakonec funkce vytvoří požadovanou
časovou známku, která se dále zpracovává.
29
5. P O P I S I M P L E M E N T A C E
Prvek input typu „time" je možné použít již od roku 2010 , naneštěstí
nefunguje korektně ve všech prohlížečích. Například prohlížeč Firefox nekontroluje
uživatelský vstup, a tak je možné zadat do vstupního prvku jakoukoliv
hodnotu. Projekt K Y P O je testován na prohlížečích Chromé, kde
má prvek korektní chování. N a obrázku 5.2a je levý vstupní prvek detailní
osy a na obrázku 5.2b je stejný prvek při zadávání minut. Uživateli umožňuje
zadat hodnotu odděleně jako hodiny, minuty a sekundy, obsahuje mazací
křížek a šipky, které mění hodnotu o jednu jednotku ve vybrané buňce,
dále kontroluje zadávání vstupu, které je zmíněno výše. Prvky na obrázcích
s popsaným chováním jsou vykresleny prohlížečem Chromé.
07:59:20 07:59:20 X
(a) (b)
Obrázek 5.2: Levý vstupní prvek detailní osy
5.5 Zámek přehledové osy
Funkce zámku byla již popsána v podkapitole zabývající se popisem prvků.
Samotná funkce mění pouze stav proměnné. Tlačítko zámku se přesunuje
mimo posuvník v závislosti na jeho šířce. Při změně hodnot výběru na jakékoliv
ose se kontroluje šířka posuvníku. V případě, že je menší, než 30 px,
nastaví se jiná třída CSS ikoně zámku, která zajistí, že se zámek bude nacházet
mimo posuvník. Hodnota 30 byla zvolena z toho důvodu, že samotná
madla posuvníku mají pevně nastavenou šířku 10 px, aby na ně bylo možné
kliknout bez větších obtíží. Hodnota 10 px, jako mezera mezi madly, byla
vybrána z důvodu rovnoměrného rozdělení posuvníku, za účelem zachování
přehlednosti jednotlivých ovládacích prvků.
Pro animaci přejíždějícího zámku mimo posuvník byl použit CSS styl
t r a n s i t i o n , který v tomto případě způsobí plynulý přechod mezi starou
a novou pozicí prvku.
1. http://www.jakpsatweb.cz/html/formulare.html#inputhtml5
30
5. P O P I S I M P L E M E N T A C E
5.6 Stíny
Stíny spolu se vstupními prvky detailní osy se vždy objeví posunem. Tato
animace byla implementována z důvodu špatného postupného vykreslování
detailní osy. Časový portlet je ovladačem ostatních vizuálních portletů
a může nastat situace, kdy lze po výběru dat vidět krátká prodleva, než
se jistý vizualizační portlet překreslí. V takovém případě docházelo k delšímu
zpoždění před vykreslením časového portletu, konkrétně detailní osy
a jejích částí. Prvky se po načtení osy nacházely chvíli mimo ní a působily
na uživatele rušivě. Aby se předešlo takovému chování, byla implementována
zmíněná animace. Po vytvoření detailní osy se až po půl sekundě
objeví vstupní prvky spolu s případnými stíny.
31
6 Srovnání časových portletů
V této kapitole jsou shrnuty veškeré rozdíly mezi novým a původním časovým
portletem. Kapitola popisuje jak výrazné vizuální změny tak změny
v chování jednotlivých prvků nebo jejich ovládání.
6.1 Vizuální změny
Již na první pohled lze zjistit, že časový portlet prošel zásadními úpravami
z hlediska vizuálních změn. Níže jsou popsané části portletu, které za účelem
modernizace prošly změnou. Celý původní portlet je uveden na obrázku
2.1 stejně jako nový časový portlet na obrázku 3.1.
Přehledová osa
Přehledová osa obsahovala pravítko uvnitř svého kontejneru, posuvník tak
překrýval, v závislosti na své šířce, část časových dílů. Uživatel měl k dispozici
na posuvníku informační popisky, které sdělovaly aktuální výběr.
V případě, že chtěl uživatel vidět, jaká data se nacházejí pod posuvníkem,
musel jej přemístit. Po úpravách portletu se celé pravítko přemístilo pod
přehledovou osu, aby žádný díl nebyl překrýván posuvníkem. Informační
popisky, ukazující aktuální výběr, zmizely, z důvodu uvádění vybraných
hodnot na detailní ose. Bylo zavedené automatické škálování osy. V původním
portletu se při zúžení okna prohlížeče časové díly překrývaly a bylo
nepřehledné rozpoznat hodnoty v časových dílech. N a obrázku 6.1 je zobrazeno
srovnání výřezu přehledových os původního (a) a nového (b) portletu
při šířce okna o 1000 px. Více informací o škálování přehledové osy se
lze dočíst v kapitole 5.
&
05:57:20
&
12:05:00 13:34:2005:57:20 07:26:40 08:56:00 10:35:40 12:05:00 13:34:20
(a) (b)
Obrázek 6.1: Srovnání částí přehledových os časového portletu
32
6. S R O V N Á N Í Č A S O V Ý C H P O R T L E T Ů
Další vizuální změnou přehledové osy, oproti původní ose, je zvýraznění
pravé strany posuvníku, které indikuje, že se vybraná hodnota rovná
hodnotě v detailní ose, uvedené v pravém vstupním prvku, který je ohraničen
stejnou barvou jako hrana posuvníku.
Detailní osa
Nejvíce vizuálních změn podstoupila detailní osa. Původní osa obsahovala
posuvník s vyznačenými aktuálními hodnotami a pravítko s dvojí škálou.
Posuvník spolu s informačními štítky zcela zmizel a byl nahrazen vstupními
prvky pro přesné zadání hodnoty. Pravítko osy již nezobrazuje přímo
hodnoty a všechny vybrané časové známky, ale je rozdělen na díly, které
zobrazí data až po najetí myši. Navíc bylo i zde zavedeno škálování osy,
které, stejně jako u přehledové osy, původní detailní osa neměla. Původně
se hodnoty mohly překrývat nejen zúžením okna prohlížeče, ale i velkým
výběrem dat na přehledové ose. N a obrázku 6.2 je znázorněno porovnání
stejného výběru dat při stejném rozlišení jako u přehledových os výše. V případě
původní osy, 6.2a, se jedná o množinu velmi nepřehledných dílů, ze
kterých prakticky nelze vyčíst jakákoliv hodnota. U výřezu nové osy, 6.2b,
je zobrazen i nový informační panel ukazující hodnotu dílu.
09:13:40
(a) (b)
Obrázek 6.2: Srovnání částí detailních os časového portletu
Ikony
Původní portlet používal komprimovaný obrázek png. V rámci zavedení
responzivity portletu byla vytvořena i vektorová ikona magnetu. Po přiblížení
webové stránky v prohlížeči se tak nestane, že by byl obrázek magnetu
„kostičkovaný". Nové ikony byly vytvořeny i pro nový prvek zámek a pro
tlačítka skrytí/zobrazení portletu nebo jeho nastavení, která byla doposud
reprezentována slovem „hide/show". Více o ikonách se lze dočíst v kapitole
5.
33
6. S R O V N Á N Í Č A S O V Ý C H P O R T L E T Ů
6.2 Funkční změny
Nejen vzhled, ale i funkce několika prvků portletu byly pozměněny, některé
zcela změnily princip chování. Celkový princip výběru dat se oproti
původnímu portletu nezměnil. Uživatel má k dispozici dvě osy, v první si
vybere ze všech dostupných dat rozsah, který na druhé ose zpřesní. Popis
změn je rozdělen pro každou osu zvlášť, kde je nejdříve popsán původní
portlet a po něm nový.
Přehledová osa
Výběr dat
V původním časovém portletu měl uživatel pevný počet dílů na ose, ze
kterých si mohl vybrat. Následně byl nucen výběr upřesnit na detailní ose.
V novém časovém portletu má k dispozici všechna dostupná data, ze kterých
je možné vybrat rovnou požadovaná data. V případě velkého množství
dat je však výběr myší pomocí posuvníku pouze orientační.
V novém portletu je možné změnit výběr dat rychle a rovnoměrně pomocí
nového prvku „zoom". V případě, že uživatel potřeboval razantně
zmenšit nebo zvětšit rozsah výběru dat, musel pomocí madel přehledové
osy provést patřičné úpravy. Nyní uživateli stačí posunout posuvníkem
prvku „zoom" za účelem rychlé změny rozsahu.
Magnet
Původní časový portlet již obsahoval funkci magnet, k jejímu aktivování
bylo zapotřebí, aby uživatel posunul posuvník přehledové osy až na konec.
V té chvíli se magnet aktivoval, jeho deaktivace mohla být provedena
několika způsoby. Uživatel ve chvíli, kdy změnil pozici posuvníku přehledové
nebo detailní osy, a to i tlačítkem v navigaci, magnet vypnul. Jeho
deaktivace mohla být provedena také stisknutím tlačítka „pause".
Nový způsob aktivace této funkce měl jediný účel, a to, aby byla pro
uživatele více intuitivní funkce magnetu včetně jeho aktivace. Po úpravách
portletu se magnet aktivuje pouhým stisknutím jeho ikony, která je po celou
dobu viditelná. Vypnout magnet lze stejnými způsoby jako v původním
portletu, včetně opětovným kliknutím na jeho ikonu.
34
6. S R O V N Á N Í Č A S O V Ý C H P O R T L E T Ů
Detailní osa
Výběr dat
Výběr dat na detailní ose původního portletu byl omezen pouze na data,
která ohraničovala přehledová osa. Pokud uživatel chtěl širší výběr dat, než
detailní osa poskytovala, musel nejdříve změnit rozsah na přehledové ose.
Po změně rozsahu bylo zapotřebí opět vybrat přesná data na detailní ose.
Tento postup byl značně nepraktický, proto byl zaveden zcela nový postup
výběru dat. Nyní, pokud uživatel zná konkrétní hodnotu rozsahu, je možné
zadat nový rozsah přímo do vstupních prvků detailní osy a přehledová osa
se, včetně detailní, ihned přenastaví na nové hodnoty. Jak bylo zmíněno
v dřívějších kapitolách, není nutné, aby uživatel zadával přesnou hodnotu,
protože pomocí nové funkce se použije nejbližší existující hodnota.
Další změnou detailní osy je přítomnost nových tlačítek (šipek) umístěných
na koncích osy, tato tlačítka umožňují posunout výběr dat o jednu
časovou známku. Stejnou funkci mají tlačítka „next" a „prev" v přehrávacím
panelu, které se vyskytovaly již v původním portletu. Zavedení nových
posunovacích tlačítek bylo zaměřeno pro další uživatele, kteří vyhledávají
jiný způsob manipulace s výběrem, než v přehrávacím panelu. Vzhledem
ke stejné funkci jako má „next" a „prev" je popsán níže popis chování posuvníku
při kliknutí na jednu z šipek.
Ovládací panel
Přehrávání a navigace
Panel přehrávání a navigace se po úpravách dočkal pouze funkční změny.
Původní přehrávání měnilo pozici posuvníku detailní osy o jednu časovou
známku. Jakmile se posuvník dostal na konec detailní osy, při dalším kroku
se posuvník přehledové osy rozšířil právě o jeden časový díl doprava. Chování
tohoto typu může být v některých případech nežádoucí, z důvodu načítání
zbytečného většího množství dat nejen do detailní osy, ale i do vizualizačních
portletů. Z tohoto důvodu byla zavedena závislost přehrávání na
funkci zámku. V případě, že je zámek aktivní, chování přehrávání je téměř
stejné jako v původním portletu, až na ten rozdíl, že manipuluje přímo s posuvníkem
přehledové osy. V případě neaktivního zámku se posouvá celý
výběr právě o jednu časovou známku doprava, takže se uživateli nezmění
35
6. S R O V N Á N Í Č A S O V Ý C H P O R T L E T Ů
jeho rozsah výběru a může se při měření zaměřit pouze na vybraný úsek.
Na diagramu aktivit obrázku 3.14 lze připomenout chování posuvníku při
přehrávání.
V případě navigačních tlačítek „prev" a „next" původní funkce měnila
pouze pozici posuvníku detailního výběru. Jakmile se posuvník dostal na
konec osy s každým kliknutím na tlačítko se začal zmenšovat výběr dat, až
byla vybrána buď nejlevější nebo nejpravější časová známka detailní osy.
Nová funkce mění výběr přehledové osy. V případě aktivovaného zámku se
posouvá pouze pravý konec a to do chvíle, kdy narazí buď na konec, nebo
levý konec posuvníku. Neaktivní zámek pak při kliknutí na jedno z tlačítek
zaručí, že bude výběr pouze posunut bez změny jeho šířky.
Tlačítka „first" a „last" rozšiřovala konce posuvníku přehledové osy až
na konec nebo na začátek osy. Nový portlet při aktivovaném zámku po kliknutí
na „last" rozšíří pravou stranu posuvníku na konec přehledové osy.
V případě aktivovaného zámku a kliknutí na „first" se posuvník zmenší
na jeho levou časovou známku. Při neaktivním zámku se posuvník pouze
posune do kraje osy.
Nastavení
Panel nastavení byl v původním portletu stále viditelný, po úpravě přibylo
nové tlačítko částečně skrývající jeho prvky. Po skrytí je viditelný pouze
panel přehrávání a navigace, „zoom" a informační panel zobrazující stav
příchozích dat.
36
7 Hodnocení portletu uživateli
7.1 Popis dotazníku
V rámci uživatelského průzkumu byl vytvořen dotazník, jehož vyplněním
osoba poskytne informace o intuitivnosti, pochopitelnosti a použitelnosti
některých prvků časového portletu. Dotazník se skládá ze třech částí:
1. Dotazník začíná otázkou, jaký vztah má uživatel k časovému portletu.
Pokud respondent portlet nezná, je zběžně seznámen, k čemu časový
portlet slouží, nikoliv však s jeho jednotlivými prvky. Neznalost jednotlivých
prvků ověří, jestli jsou již z obrázku dostatečně intuitivní
vlastní funkce.
2. Po seznámení respondent dostane sadu volných otázek dotazujících
se na prvky vyznačené na snímku nového časového portletu. Po zodpovězení
těchto volných otázek se zobrazí znovu zmíněný snímek,
který již v tuto chvíli bude popsaný. Tím by mělo být zajištěno, že
respondent pochopí základní části, které mu nebyly jasné nebo je pochopil
špatně.
3. Po zodpovězení druhé části se zobrazí další sada otázek, která již respondenta
žádá o zhodnocení jednoznačnosti a užitečnosti jednotlivých
prvků. Hodnota užitečnosti je: 1 - hodně, 2 - středně a 3 - málo.
Jednoznačnost má pak hodnoty:
1 odpověď, kdy je respondentovi funkce intuitivní na první pohled,
maximálně s pár odlišnostmi
2 respondent funkci určil zhruba správně, ale od popisu se lišila vý­
razně
3 bez přečtení popisu by respondent nepřišel na správnou odpověď
Na konci této sady je ještě jedna volná otázka dotazující se na další
připomínky k portletu, co respondentu chybělo nebo co by změnil.
Dotazník je vytvořen, aby jeho vyplnění trvalo zhruba 10 minut. Seznam
otázek včetně snímků je přiložen v příloze A .
37
7. H O D N O C E N Í P O R T L E T U U Ž I V A T E L I
7.2 Zhodnocení výsledku dotazníku
Dotazník celkem vyplnilo 10 respondentů, z nichž je 5 osob v rámci projektu
K Y P O a 5 osob mimo tento projekt. Vzhledem k tomu, že dotazník
obsahoval pouze popsaný fixní obrázek, je zcela jisté, že by výsledek byl
ovlivněn, kdyby všichni respondenti měli možnost přístupu na webovou
stránku s časovým portletem a mohli si dle zadaného scénáře portlet vyzkoušet.
Dotazník byl ale určen i pro kontrolní skupinu lidí mimo projekt
a odpovědi na samotný obrázek mohou také poskytnout částečnou zpětnou
vazbu.
První otázka se týkala funkce magnetu. Na otázku neodpověděli 4 respondenti,
z nichž jeden byl z projektu KYPO. Funkce magnetu byla již
v původním portletu, avšak aktivovala se jiným způsobem. Ti, co vyplnili
otázku, odpověděli správně.
Druhá otázka se dotazovala na funkci nového prvku „zoom". Její funkci
zodpověděli všichni, až na mírné odlišnosti, správně. Jisté odlišnosti mohly
vzniknout právě tím, že byl dostupný pouze statický obrázek. Ve volné
otázce jeden z respondentů navrhoval, že by se dala tato funkce řešit trochu
jiným způsobem, a to, že by se pomocí myši vybral rozsah na ose. Toto
řešení by se dalo uskutečnit pouze v kombinaci se stisklou klávesou, v druhém
případě by bylo použití zmatečné v kombinaci se základní funkcí výběru
na přehledové ose.
Nová funkce „zámek" byla všemi respondenty celkově správně zodpovězena.
Jediné odlišnosti byly, že podle některých zamyká zámek celou osu,
nikoliv jen levou stranu.
Další otázka se zaměřovala na funkci šipek skrývajících nastavení portletu.
N a tuto otázku odpověděli všichni respondenti. Správně odpověděli,
až na jednoho, všichni ze skupiny mimo projekt. Ze skupiny lidí projektu
zodpověděli špatně dva lidé. Všichni, kteří určili špatně tuto funkci, se domnívali,
že se šipkami schová celá detailní časová osa. Vzhledem k tomu,
že původní portlet měl tlačítko na schování detailní osy, je možné, že tato
skutečnost ovlivnila úsudek ve formuláři. Jeden z respondentů uvedl ve
volné otázce na konci formuláře, že by bylo vhodné, kdyby bylo nějakým
způsobem označeno, co konkrétní šipky schovávají.
Otázka týkající se funkce šipky na detailním posuvníku zmátla pouze
jednoho člena projektu KYPO, který uvedl, že se jedná o posun celého vý-
38
7. H O D N O C E N Í P O R T L E T U U Ž I V A T E L I
beru na začátek měření. Ostatní respondenti zodpověděli otázku správně.
Vztah obou časových os zodpověděli všichni respondenti, až na jeden
případ mimo KYPO, správně. Podle odpovědi si dotyčný myslel, že detailní
osa zobrazuje konkrétní data na rozdíl od přehledové, která slouží pouze
pro výběr času. Opět je patrná chybějící demonstrace funkce, která by po
změnění výběru přehledové osy změnila i osu detailní. Dále je možné, že
byl pro respondenta matoucí velmi odlišný vzhled obou os.
Nejvíce překvapující byly reakce na otázku týkající se funkce vstupního
prvků. Vyskytovaly se zde pouze dvě možnosti, a to správná nebo žádná.
Druhá část dotazníku sloužila již jako ověření, zda-li respondenti uvažovali
správně. Vyskytovala se zde i otázka užitečnosti některých prvků.
Intuitivnost funkcí je znázorněna na obrázku7.1, užitečnost pak na obrázku
7.2. Hodnoty 1,2 a 3 byly popsány již v předchozí části této kapitoly. Funkce
šipek pro schování nastavení portletu všichni respondenti uvedli jako patrnou
od pohledu, není tedy uvedena mezi grafy.
(a) Zoom (b) Šipka detailního (c) Zámek v kombi- (d) Vstupní prvek
posuvníku naci s magnetem
Obrázek 7.1: Intuitivnost funkcí
(a) Informační panely (b) Šipka detailního (c) Zoom
dílů detailní osy posuvníku
Obrázek 7.2: Užitečnost funkcí
39
8 Závěr
Cílem této práce bylo navrhnout nový portlet, který bude řešit nedostatky
předchozího časového portletu. Uživatel projektu KYPO má nyní k dispozici
nový portlet, který je plně funkční a nasazený na vývojovém serveru
projektu.
Filozofie výběru hodnot z časových os byla zcela pozměněna. Uživatel
má stále k dispozici možnost vybrat data nejdříve orientačně a poté výběr
zpřesnit. Stylování jednotlivých ovládacích prvků a umístění na patřičnou
pozici je provedeno tak, aby byla jejich funkce co nejintuitivnější a jejich
použití co nejjednodušší. Vzhledem k hustotě dat a velikosti okna prohlížeče
je celý prvek responzivní, a to i v rámci časových os, které se automaticky
škálují. Byl kladen důraz i na minimalismus portletu. Po provedených
úpravách zabírá nový portlet při skrytém nastavení téměř o polovinu méně
místa, než původní časový portlet.
Navržené změny portletu byly průběžně demonstrovány, jejich použití
bylo diskutováno a v průběhu času i měněno. Všechny zadané požadavky
na nový časový portlet byly splněny včetně těch, které byly v průběhu
práce dodatečně předloženy.
Dle krátkého uživatelského hodnocení splnila úprava časového portletu
body zadání. Všechny prvky, na které byly kladeny otázky v dotazníku,
jsou po zhodnocení těchto otázek poměrně vysoce intuitivní. Funkce
nových prvků je dle respondentů taktéž vítaná. Bylo uvedeno pár návrhů,
které by mohly používání časového portletu zjednodušit a vylepšit.
Protože je projekt K Y P O v neustálém vývoji, očekává se i v budoucnu
změna časového portletu. Mezi budoucí úpravy časového portletu může
patřit například změna prvků nastavení, v jejichž případě by byla zapotřebí
úprava jejich celkového zobrazení, vyladění meziportletové komunikace
nebo zmíněné uživatelské návrhy.
40
Literatura
[1] AIGNER, Wolfgang, Silvia MIKSCH, Heidrun S C H U M A N N a Christian
TOMINISKI. Visualization of time-oriented data. London: Springer,
c2011. Human-computer interaction series. ISBN 978-0-85729-078-
6.
[2] C A R D , Stuart K., Jock D. M A C K I N L A Y a Ben SHNEIDERMAN. Readings
in information visualization: using vision to thing. San Francisco:
Morgan Kaufmann Publishers, cl999. Morgan Kaufmann series
in interactive technologies. ISBN 1-55860-533-9.
[3] ČEGAN, Jakub a Martin VIZVÁRY. Lessons Learned from K Y P O Cyber
Exercise & Research Platform Project. In Milan Jirsa, Josef Kaderka,
Ladislav Hagara, Jaroslav Dočkal. Security and Protection of
Information. Brno: University of Defence, 2015. s. 15-26, 12 s. ISSN
2336-5587.
[4] EICHLER, Zdenek; OŠLEJŠEK, Radek; TOTH, Dalibor. Analytical and
Visualization Tool for Cybernetic Proving Ground. 2014. Dostupné z:
http: / /is.muni.cz /th/208335/fi_r/vizsec2014.pdf
[5] Projekt Kybernetický polygon [online]. Brno: ÚVT M U N I , 2015 [cit.
2016-04-07]. Dostupné z: http://www.kypo.cz/
[6] ČEGAN, Jakub a Martin VIZVÁRY Lessons Learned from KYPO Cyber
Exercise & Research Platform Project [online]. Brno, 2015 [cit.
2016-04-07]. Dostupné z: https://is.muni.cz/repo/1300147/spi2015-
paper.pdf
[7] Different Types of "Times" in GIS. F R A N K , Andrew U . Spatial and
temporal reasoning in geographic information systems. New York:
Oxford University Press, 1998, s. 40-62. ISBN 0195103424.
[8] KŇAZSKÝ, Michal. Time Portlet for Cybernetic Proving
Ground [online]. Brno, 2015 [cit. 2016-04-15]. Dostupné z:
http: / /is.muni.cz /th/256503 /fi_m/
[9] NoUiSlider [online]. Refreshless, 2015 [cit. 2016-04-19]. Dostupné z:
http://refreshless.com/nouislider/
41
8. Z Á V Ě R
[10] JQRangeSlider. GitHub [online]. Guillaume Gautreau, 2010 [cit. 2016-
05-21]. Dostupne z: http://ghusse.github.io/jQRangeSlider
[11] G O N Z A L E Z , Scott. JQueryUI [online]. York, 2016 [cit. 2016-05-18].
Dostupne z: http://jqueryui.com/
[12] M E T H V I N , Dave. JQuery [online]. New York, 2016 [cit. 2016-05-18].
Dostupne z: http://jquery.com/
[13] JQuery UI Slider from a Select Element [online]. Boston:
Filament group, 2009 [cit. 2016-04-19]. Dostupne z:
https:/ /www.filamentgroup.com/lab/update-jquery-ui-slider-
from-a-select-element-now-with-aria-support.html
[14] Ion.RangeSlider [online]. IonDen.com, 2016 [cit. 2016-04-20]. Dostupne
z: http://ionden.com/a/plugins/ion.rangeSlider/en.html
[15] OTTO, Mark. Bootstrap from Twitter. In: Twitter [online]. 2011 [cit.
2016-04-29]. Dostupne z: https://blog.twitter.com/2011/bootstrap-
from-twitter
[16] Scaffolding. Getbootstrap [online]. San Francisco [cit. 2016-04-29]. Dostupne
z: http://getbootstrap.eom/2.3.2/scaffolding.html
[17] SEZOV, Rich. Liferay in action: the official guide to Liferay Portal development
Shelter Island, NY: Manning, 2011. ISBN 193518282X.
[18] RICHARD L. SEZOV. Liferay portal administrator's guide. 3. ed. [Nachdr.].
London: Liferay Press, 2009. ISBN 9780578027296.
[19] EICHLER, Zdenek, Radek OSLEJSEK a Dalibor TOTH. KYPO: A Tool
for Collaborative Study of Cyberattacks in Safe Cloud Environment.
In HCl International 2015: Human Aspects of Information Security,
Privacy and Trust. LNCS, vol. 9190. Los Angeles: Springer International
Publishing, 2015. s. 190-199, 10 s. ISBN 978-3-319-20375-1.
doi:10.1007/978-3-319-20376-8_17.
[20] A L L O Y U I 2.0 TAGLIB A N D BOOTSTRAP MIGRATION. Liferay
Developer Network [online]. Kalifornie: Liferay, Inc., 2014 [cit.
2016-05-19]. Dostupne z: https://dev.liferay.com/develop/tutorials//
knowledgebase/6-2/alloyui-2-0-taglib-and-bootstrap-migration
42
A Seznam otázek pro uživatelský dotazník
Časová osa A —
Magnet
Pita Vlevo Časová osa B
i5:2o| 11:00:20
Vstupní prvek
Zoom: I
Data
Topology
l-unber of flow.'?
I x Number of bits |
W ^ ^ ^ ^ ^ ^ ^ ^ ^ J ^ ^ ^ ^ ^ ^ ^ ^ O T * Data status: Synchronization:^) Phenomens: Node-outgoing traffic: Export: I «1
Data |x Number of packets") ' 1
" r i r v 1
* W i
" , P l
" ' I - I I nr3r. I . I[ ID: l.srcID: 1, des.tlD:3 [-• j | pcap | - j
Export
Obrázek A . l : Snímek s vyznačenými prvky
První část:
• Do jaké skupiny patříte?
Možné odpovědi:
1. Znám časovým portlet z projektu KYPO.
2. Nevím, co je časový portlet.
Druhá část s volnými otázkami:
• Jakou funkci plní magnet na obrázku?
• Jakou funkci plní Zoom?
• K čemu slouží zámek na posuvníku?
• Jakou funkci mají Šipky B?
• Jakou funkci má Šipka Vlevo
• Jaký mají k sobě vztah obě časové osy
• Co se stane po zadání jiné hodnoty do vstupního prvku?
Třetí část s otázkami s předvyplněnými odpověďmi:
• Nakolik je intuitivní funkce Šipek B
• Nakolik je podle vás intuitivní funkce Zoom?
43
A . S E Z N A M O T Á Z E K P R O U Ž I V A T E L S K Ý D O T A Z N Í K
• Nakolik je podle vás intuitivní funkce Zámku v kombinaci s Magne­
tem?
• Nakolik je podle vás intuitivní funkce Šipka Vlevo?
• Nakolik je podle vás intuitivní zadávání hodnot do Vstupního prvku
a jeho závislost k Časové ose A ?
Předvyplněné odpovědi:
1. funkce je patrná od pohledu (i s pár odchylkami od popisu)
2. funkci jsem zhruba určil správně, ale od popisu se lišila výrazně
3. bez přečtení popisu bych nepřišel/nepřišla na správnou odpověď
Otázky o užitečnosti prvků v rámci třetí části:
• Nakolik je podle Vás užitečná funkce Zoom?
• Nakolik je podle Vás užitečná funkce Šipka Vlevo?
• Nakolik je podle Vás užitečné zobrazení Informačního panelu s časem
po najetí myši na Časové ose B?
Předvyplněné odpovědi:
1. hodně
2. středně
3. málo
Na konci této části nechyběla ani volná otázka:
• Napište, co Vám chybí/přebývá na časovém portletu, případně jiné
poznatky.
44