Dashboards

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Úkol do předmětu IIS - 2016 ======

###
Za úkol je možné získat **2 bonusové body** do IIS. Před samotným řešením úkolu je vyžadované si nejprve stáhnout aplikaci určenou pro plnění úkolu a naučit se s ní pracovat. Postupujte proto následujícími body.
###

===== 1. Stažení a spuštění aplikace =====
  - Zkontrolujte si, že máte nainstalovanou Javu verze >= 1.8:
    * příkaz ''java -version'' nebo [[https://java.com/en/download/help/version_manual.xml|tento návod]]
    * pokud nemáte, proveďte aktualizaci nebo ji nově nainstalujte (windows [[https://www.java.com/en/download/|zde]]), linux dle návodu dané distribuce
  - Stáhněte si {{ :iis:dashapp.zip |zip archiv}} obsahující aplikaci ''dashapp.jar'', rozbalte do vybrané složky.
  - __Ve stejné složce__, kde se nachází ''dashapp.jar'' si vytvořte složku ''dashboards'', do které si rozbalte [[iis:2016:students|vzorky dashboardů]].\\ {{:iis:files.png?200|}}
  - Spusťte aplikaci ''dashapp.jar''.
    - windows: dvojklik na aplikaci ''dashapp.jar''
    - linux: příkaz ''java -jar dashapp.jar''
      * nutné nastavit práva spuštění ''chmod +x dashapp.jar''

Pokud jste dodrželi výše psané pokyny, v pravé postranní liště byste měli vidět seznam dashboardů, které je možné vybráním zobrazit. Pokud dashboardy nevidíte, otevřte složku s dahboardy dodatečně: ''File'' > ''Open'' nebo {{:iis:open_file.png?16|}}

{{ :iis:dashapp.png?600 |DashApp}}

===== 2. Ovládání aplikace =====

###
Smyslem této aplikace je poskytunout uživateli možnost snadno do dashboardu kreslit obdélníky, které budou reprezentovat **//regiony//** (jejich význam bude upřesněn v bodě 3). V závislosti na pozicích a velikostech nakreslených regionů je pak automaticky generován XML popis těchto regionů - viz obrázek.
###

//Byl vyznačen 1 region v bodě [x=268;y=146] a velikosti 370x348 px. Atribut ''type'' ignorujte.//
{{ :iis:dashapp2.png?600 |}}

###
Pro možnost označování regionů je nutné přepnout v toolbaru z módu **prohlížení dashboardů** {{:iis:icons:billboard.png?16|}} do módu **kreslení regionů** {{:iis:icons:edit.png?16|}}. Poté je možné tahem myši kreslit regiony. Úpravu regionů je možné provádět v módu **editace regionů** {{:iis:icons:pointer.png?16|}}.
###

###
XML je rovněž možné upravovat ručně, ale toto prosím používejte pouze minimálně - používejte raději kreslící nástroje.
###

==== Pomocníci při kreslení ====

  * **historie:** {{:iis:icons:undo.png?16|}} undo, {{:iis:icons:redo.png?16|}} redo

  * **zoom:** {{:iis:icons:zoom_in.png?16|}} přiblížit, {{:iis:icons:zoom_out.png?16|}} oddálit, {{:iis:icons:zoom.png?16|}} celá obrazovka

  * **uložení:** {{:iis:icons:save.png?16|}} uložit aktuální, {{:iis:icons:save_as.png?16|}}, uložit vše
    * do šložky, kde je dashboard, vygeneruje XML soubor se stejným jménem
    * v případě, že dashboard není uložený, je jeho název v postranní liště označen hvězdičkou

<WRAP center round tip 100%>
//Jakmile si vyzkoušíte a pochopíte ovládání aplikace, můžete přejít k samotnému řešení úkolu. Zadání úkolu se pokuste přečíst pokud možno celé, abyste co nejlépe pochopili jeho význam. Jedná se značně abstraktní úkol, což nebývá zvykem na technické škole :) .//
</WRAP>


===== 3. Zadání úkolu =====

###
Vaším úkolem nyní bude projít stažené dashboardy a v každém z nich vyznačit regiony reprezentující logické části dashboardu, které __dle vašeho názoru__ vizuálně vytváří samostatný celek oddělitelný od ostatních grafických celků. Zpravidla by se tedy mělo jednat o jednotlivé grafy a případné další pomocné widgety (menu, tlačitka, nadpisy apod.).
###

**Ukázka možného výběru takových regionů:**

{{ :iis:dashboard.png?500 |Vstupní dashboard}}

Zeleně jsou vyznačeny vybrané regiony:
{{ :iis:dashboard2.png?500 |Dashboard s vyznačením regionů}}

###
Jak vás pravděpodobně nyní napadá, dělení na regiony je do značené míry subjektivní záležitost. Nastanou případy, kdy se budete shodovat více a případy, kdy méně. Cílem našeho výzkumu je kategorizovat dashboardy do skupin v závislosti na tom, jak moc se uživatelé lišili při výběru jednotlivých regionů a pokusit se analyzovat především situace, kdy dochází ke shodám. Výsledky bychom rádi korespondovali s Gestalt principy a využili je dále při [[:start|analýze použitelnosti dashboardů]].
###

###
[[https://cs.wikipedia.org/wiki/Gestaltismus#Gestalt_z.C3.A1kony|Gestalt principy]] hrají značnou roli v tom, jakým způsobem se budete rozhodovat při shlukování grafických tvarů. Příkladem je následující obrázek, který se skládá z několika primitivních tvarů (čáry a kruhové výseče). Přesto jsme v něm schopni rozpoznávat obrazce složitější jak zmíněné tvary (obrázek podvědomě dělíme na  __levý__ a __pravý__ objekt; levý tvoří kruh; v pravém je možné spatřit mimo jiné několik trojúhelníků).
###

{{ :iis:gestalt.png |}}\\ 
//Zdroj obrázku: Johnson J.: Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules, 2010//

###
Podobným způsobem byste měli uvažovat při výběru regionů v dashboardech. Nesnažte se vybírat primitivní grafické tvary (čáry, obdélníky, textová pole ...), ale pokuste se hledat logické celky tvořící vizuální skupiny (jednotlivé grafy; skupiny menších grafů ohraničených barevně intenzivním rámem; apod...).
###

###
**Nad výběrem byste neměli dlouho přemýšlet, ale měli byste vybrat nejlépe první možnost, kterou uvidíte (detekce objektů probíhá podvědomě).**
###

==== Zarovnání regionů ====

###
Při výběru regionů není nutné se pracně soustředit na přesné obtažení grafických prvků tak, aby to sedělo přesně na jeden pixel.
###

###
**__Bude pro nás však velmi přínosné, pokud dodržíte layouty jednotlivých regionů (zarovnání regionů v řadě).__** K tomu můžete výužít nástroj magnet, který se snaží nově kreslené/upravované regiony přichytávat k osám již nakreslených regionů:
###
    * {{:iis:icons:magnet_on.png?16|}} přichytávání zapnuto, {{:iis:icons:magnet_off.png?16|}} přichytávání vypnuto

Ukázka horizontálně zarovnaných regionů:
{{ :iis:attach.png |}}

==== Malé rozlišení některých dashboardů ====

###
Některé dashboardy mají malé rozlišení a jsou hůře čitelné i po přiblížení. To nevadí. Pro splnění úkolu by nemělo být nutné číst obsah daných dashboardů.
###

===== 4. Odevzdání a hodnocení =====

###
Vytvořené ''.xml'' soubory zabalte do zip archivu pojmenovaného vaším loginem - ''xlogin00.zip'' a odevzdejte do WISu. (**rastrové obrázky prosím neodevzdávejte**)
###

Za úkol je možné získat až **2 body**:
  * ohodnocení prvních 10 dashboardů - 1. bod
  * ohodnocení všech 20 dashboardů - 2. bod

###
**Prosím snažte se úkol vytvářet sami (nekopírovat ohodnocení od kamarádů) a pokud možno poctivě (regiony negenerujte náhodně, ale dodržte prosím pokyny). Víme, že máte spoustu dalších projektů a aktivit (např. zaměstnání nebo bakalářka) :-/ . Jedná se však o body navíc, kterými si můžete vylepšit známku a velice nám tím pomůžete k výzkumu. Budeme vám proto velice vděční za každý ohodnocený dashboard =) . Předem děkujeme!**
###

V případě dotazů a poznámek: ihynek at fit.vutbr.cz

===== FAQ =====

**Smazání regionu:** vybrat region v módu editace {{:iis:icons:pointer.png?16|}} a stisknout klávesu DELETE.