UI:Kodutöö 4 (2019)
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.
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.
Neljandaks praktikumitöö põhisisuks on andmete visualiseerimine ja ülesandest on võimalik valida kahe variandi vahel:
- Tooteomaniku dashboardi ehitamine.
- Teenuse animeeritud landingpage ehitamine.
Teenuseomaniku Dashboard
Teenuseomaniku dashboardi ehitamise eesmärk on minna teenuseomaniku rolli ja esitada ülevaatlikult teenuse peamised tulemuslikkuse võtmenäitajad (KPI-d)
Nõuded
- Dashboard avaneb uuel lehel , nt http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4/dashboard ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ei ole.
- Esitatud peab olema minimaalselt 3 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena
- Graafikute kuvamiseks peab kasutama mõnda välist teeki nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) või mõnda muud vabalt valitud teeki. 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 JSON failidest.
- Leht peab olema valideeruv
Abimaterjale ja viiteid:
- KPI-de kohta, mis see on: <https://leanway.ee/blogi/kpi-mis-asi-see-veel-on> ja <https://www.geckoboard.com/blog/defining-kpis-how-to-choose-metrics-that-inspire-action/>
- 5 Principles of Good Dashboard Design: <https://www.netsolutions.com/insights/good-dashboard-design-principles/>
- Build a Visual Dashboard in 10 Steps: <https://www.isixsigma.com/tools-templates/metrics/build-a-visual-dashboard-in-10-steps/>
SVG Animatsioonid
Animatsioonide eesmärgiks on pakkuda teenuse ostjale/kasutajale ootamatusmoment ja teha loodud teenus elavamaks ja visuaalselt atraktiivsemaks.
Inspiratsiooniks: https://swissincss.com/ või https://beesandbombs.tumblr.com/ või https://dux.ee/ :)
Nõuded:
- Animatsioon peab olema loogiline täiendus loodud teenusele, juhul kui on vaja, siis võite lisada täiendavaid vaateid/lehti
- Soovi korral võite animatsioonid teha otse SVGs või kasutada mõnda teeki, näiteks Snap.SVG või P5.js
- Inspiratsiooniks minge lehele https://tympanus.net/codrops/category/playground/ või https://tympanus.net/codrops/category/tutorials/. Valige sealt efekt mis sobiks teie lehele ja reprodutseerige see enda teenuses. Peate suutma viidata algallikale (lisage see HTML kommentaaridesse), põhjendada tehtud valikut ja selle toimimise tööpõhimõtet.
Abimaterjale ja viiteid:
- How I stopped worrying and learned to animate SVG: https://medium.com/@aniboaz/animate-svg-4fa7dd00e860
- Blobs! https://css-tricks.com/blobs/