Erinevus lehekülje "UI:Kodutöö 4" redaktsioonide vahel

Allikas: Kursused
Mine navigeerimisribale Mine otsikasti
 
(ei näidata sama kasutaja 2 vahepealset redaktsiooni)
1. rida: 1. rida:
'''Täiendamisel'''
 
 
 
Kolmanda kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö käigus staatiline HTML prototüüp. Kolmanda praktikumitöö käigus muudeti staatiline prototüüp dünaamiliseks ja seoti väliste (staatiliste) andme-API-dega.
 
Kolmanda kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö käigus staatiline HTML prototüüp. Kolmanda praktikumitöö käigus muudeti staatiline prototüüp dünaamiliseks ja seoti väliste (staatiliste) andme-API-dega.
  
9. rida: 7. rida:
 
'''Mida tuleb teha'''
 
'''Mida tuleb teha'''
  
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmekogud peavad olema viidatud  
+
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmekogud peavad olema viidatud. Viite puhul piisab Piisab kui panna lehele (või eri andmekogude korral iga graafiku juurde eraldi) viide ja URL kust andmed saadi.
 
* Mõtle välja minimaalselt 4 KPId mida visualiseerida
 
* Mõtle välja minimaalselt 4 KPId mida visualiseerida
 
* Esita need graafikutena dashboardil
 
* Esita need graafikutena dashboardil
17. rida: 15. rida:
  
 
# Dashboard avaneb uuel lehel , nt http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4 ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ei ole.
 
# Dashboard avaneb uuel lehel , nt http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4 ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ei ole.
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena
+
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena.
 
# Graafikute kuvamiseks peab kasutama mõnda välist teeki. Loengutes teeme näiteid Echarts'iga (https://echarts.apache.org/), aga lubatud on ka mõne muu vabalt valitud teegi kasutamine nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) Kõigil siin punktis nimetatud graafikurakendustel on ka versoonid Vue-s otse kasutamiseks
 
# Graafikute kuvamiseks peab kasutama mõnda välist teeki. Loengutes teeme näiteid Echarts'iga (https://echarts.apache.org/), aga lubatud on ka mõne muu vabalt valitud teegi kasutamine nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) Kõigil siin punktis nimetatud graafikurakendustel on ka versoonid Vue-s otse kasutamiseks
 
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest.
 
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest.
# Graafiku tüüp on valitud nii et vastab esitatud andmete iseloomule ja küsimusele millele vastust otsib.
+
# Graafiku tüüp on valitud nii et vastab esitatud andmete iseloomule ja küsimusele millele vastust otsib. Väldi rõngas- ja sõõrikdiagrammide kasutamist!
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita
+
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" graphs [https://www.dropbox.com/s/jacvke79i0j3zjs/ITI0209_Lecture14_Practical_Visualization_Echarts.pdf?dl=0 loenguslaididest].
# Graafikul peavad olema kohustuslikud elemendid  
+
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus.
 
# Graafikud peavad olema loetavad ka nägemispuudega, s.h. värvipimeda kasutaja poolt. Seda on kõige lihtsam katsetada kui installeerid brauseriplugina, nt [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa/related Colorblinding]
 
# Graafikud peavad olema loetavad ka nägemispuudega, s.h. värvipimeda kasutaja poolt. Seda on kõige lihtsam katsetada kui installeerid brauseriplugina, nt [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa/related Colorblinding]
 
# Leht peab olema valideeruv
 
# Leht peab olema valideeruv
 +
 +
'''Vaata lisaks'''
 +
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66

Viimane redaktsioon: 14. mai 2020, kell 11:08

Kolmanda kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö käigus staatiline HTML prototüüp. Kolmanda praktikumitöö käigus muudeti staatiline prototüüp dünaamiliseks ja seoti väliste (staatiliste) andme-API-dega.

Neljandaks praktikumitöö põhisisuks on andmete visualiseerimine. Dashboardi ehitamisel võid kasutada varasemate praktikumitööde käigus valminud stiile, komponente, HTMLi jne, aga see võib olla olemasolevast rakendusest täiesti eraldi, oluline on, et see oleks Dijkstra serverist õigelt aadressilt kättesaadav.

Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka.

Mida tuleb teha

  • Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmekogud peavad olema viidatud. Viite puhul piisab Piisab kui panna lehele (või eri andmekogude korral iga graafiku juurde eraldi) viide ja URL kust andmed saadi.
  • Mõtle välja minimaalselt 4 KPId mida visualiseerida
  • Esita need graafikutena dashboardil
  • Graafikute puhul kasuta ka animatsioone

Nõuded

  1. Dashboard avaneb uuel lehel , nt http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4 ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ei ole.
  2. Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena.
  3. Graafikute kuvamiseks peab kasutama mõnda välist teeki. Loengutes teeme näiteid Echarts'iga (https://echarts.apache.org/), aga lubatud on ka mõne muu vabalt valitud teegi kasutamine nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) Kõigil siin punktis nimetatud graafikurakendustel on ka versoonid Vue-s otse kasutamiseks
  4. Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest.
  5. Graafiku tüüp on valitud nii et vastab esitatud andmete iseloomule ja küsimusele millele vastust otsib. Väldi rõngas- ja sõõrikdiagrammide kasutamist!
  6. Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" graphs loenguslaididest.
  7. Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus.
  8. Graafikud peavad olema loetavad ka nägemispuudega, s.h. värvipimeda kasutaja poolt. Seda on kõige lihtsam katsetada kui installeerid brauseriplugina, nt Colorblinding
  9. Leht peab olema valideeruv

Vaata lisaks

  1. https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66