http://courses.cs.taltech.ee/w/api.php?action=feedcontributions&feedformat=atom&user=VerrevKursused - Kasutaja kaastöö [et]2026-06-10T21:55:34ZKasutaja kaastööMediaWiki 1.35.9http://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12183Kasutajaliidesed (ITI0209)2026-06-01T13:30:33Z<p>Verrev: /* 3. iseseisva töö esitamine ja kursuse lõpetamine */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Kontrolltöö ja kursuse lõpetamine ==<br />
<br />
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7<br />
<br />
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.<br />
<br />
Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud. <br />
<br />
Kontrolltöö tegemiseks on kaks aega:<br />
* Teisipäev 02. juuni kell 12:00 auditooriumis SOC-211a<br />
* Neljapäev 04. juuni kell 12:00 auditooriumis SOC-311<br />
<br />
Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12182Kasutajaliidesed (ITI0209)2026-05-31T22:13:53Z<p>Verrev: </p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== 3. iseseisva töö esitamine ja kursuse lõpetamine ==<br />
<br />
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7<br />
<br />
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.<br />
<br />
Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud. <br />
<br />
Kontrolltöö tegemiseks on kaks aega:<br />
* Teisipäev 02. juuni kell 12:00 auditooriumis SOC-211a<br />
* Neljapäev 04. juuni kell 12:00 auditooriumis SOC-311<br />
<br />
Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12181Kasutajaliidesed (ITI0209)2026-05-31T21:59:43Z<p>Verrev: /* 3. iseseisva töö esitamine ja kursuse lõpetamine */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== 3. iseseisva töö esitamine ja kursuse lõpetamine ==<br />
<br />
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7<br />
<br />
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.<br />
<br />
Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud. <br />
<br />
Kontrolltöö tegemiseks on kaks aega:<br />
* Teisipäev 02. juuni kell 12:00<br />
* Neljapäev 04. juuni kell 12:00<br />
<br />
Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12180Kasutajaliidesed (ITI0209)2026-05-31T21:59:29Z<p>Verrev: </p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== 3. iseseisva töö esitamine ja kursuse lõpetamine ==<br />
<br />
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7<br />
<br />
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid.<br />
<br />
Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.<br />
<br />
Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud. <br />
<br />
Kontrolltöö tegemiseks on kaks aega:<br />
* Teisipäev 02. juuni kell 12:00<br />
* Neljapäev 04. juuni kell 12:00<br />
<br />
Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument<br />
<br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12179ITI0209 kevad 2026 3. kodutöö kirjeldus2026-05-27T21:46:57Z<p>Verrev: </p>
<hr />
<div>Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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 Turingu serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2026 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=944026<br />
Töö tähtaeg on 25. mai kell 12:00. Tööde ülevaatamised toimuvad seminari vormis Teamsis (ja soovi korral kohapeal) 25.-29. mail. <br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12178Kasutajaliidesed (ITI0209)2026-05-26T20:23:41Z<p>Verrev: </p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== 3. iseseisva töö esitamine ja kursuse lõpetamine ==<br />
<br />
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7<br />
<br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12177Kasutajaliidesed (ITI0209)2026-05-21T12:05:43Z<p>Verrev: /* Nädal 16: Kursuse kokkuvõte */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12176Kasutajaliidesed (ITI0209)2026-05-21T09:02:13Z<p>Verrev: /* Nädal 16: Kursuse kokkuvõte */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<strong>Loeng toimub auditoorimis MEK-109</strong><br />
<br />
* Loenguslaidid [[Media:!ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_16_Summary.pdf&diff=12175Fail:ITI0209 26 16 Summary.pdf2026-05-21T09:00:25Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12174Kasutajaliidesed (ITI0209)2026-05-21T06:45:34Z<p>Verrev: /* Nädal 16: Kursuse kokkuvõte */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<strong>Loeng toimub auditoorimis MEK-109</strong><br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
=== Kursuse lõpetamine ===<br />
<br />
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö <br />
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12173Kasutajaliidesed (ITI0209)2026-05-21T06:43:01Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
=== Nädal 16: Kursuse kokkuvõte ===<br />
<strong>Loeng toimub auditoorimis MEK-109</strong><br />
<br />
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]<br />
* Praktikum: Individuaalsed konsultatsioonid<br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12172Kasutajaliidesed (ITI0209)2026-05-13T22:09:16Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12171Kasutajaliidesed (ITI0209)2026-05-13T22:02:01Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12170Kasutajaliidesed (ITI0209)2026-05-13T21:56:17Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
<br />
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_15_Dashboard.pdf&diff=12169Fail:ITI0209 26 15 Dashboard.pdf2026-05-13T21:49:33Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12168Kasutajaliidesed (ITI0209)2026-05-13T21:45:14Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
Loengusalvestis ja praktikumiülesanne tulevad siia enne tavalist neljapäevase loengu aega. Õppejõud teavitab sellest Teamsis. <br />
<br />
* Loeng: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]<br />
* Praktikum: TBC<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12167ITI0209 kevad 2026 3. kodutöö kirjeldus2026-05-13T08:38:40Z<p>Verrev: </p>
<hr />
<div><strong>NB! Ülesande sisu jääb samaks, aga detailid võivad veel mai 1. nädala jooksul muutuda</strong><br />
<br />
Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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 Turingu serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2026 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=944026<br />
Töö tähtaeg on 25. mai kell 12:00. Tööde ülevaatamised toimuvad seminari vormis Teamsis (ja soovi korral kohapeal) 25.-29. mail. <br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12166ITI0209 kevad 2026 3. kodutöö kirjeldus2026-05-13T08:33:28Z<p>Verrev: </p>
<hr />
<div><strong>NB! Ülesande sisu jääb samaks, aga detailid võivad veel mai 1. nädala jooksul muutuda</strong><br />
<br />
Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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 Turingu serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2026 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: [[Link TBC]]<br />
Töö tähtaeg on 25. mai kell 12:00. Tööde ülevaatamised toimuvad seminari vormis Teamsis (ja soovi korral kohapeal) 25.-29. mail. <br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12165Kasutajaliidesed (ITI0209)2026-05-13T08:04:48Z<p>Verrev: /* Iseseisvad tööd */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
Loengusalvestis ja praktikumiülesanne tulevad siia enne tavalist neljapäevase loengu aega. Õppejõud teavitab sellest Teamsis. <br />
<br />
* Loeng: TBC<br />
* Praktikum: TBC<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12164Kasutajaliidesed (ITI0209)2026-05-07T10:47:25Z<p>Verrev: /* Nädal 14: Visualiserimise töövoog */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
Loengusalvestis ja praktikumiülesanne tulevad siia enne tavalist neljapäevase loengu aega. Õppejõud teavitab sellest Teamsis. <br />
<br />
* Loeng: TBC<br />
* Praktikum: TBC<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12163Kasutajaliidesed (ITI0209)2026-05-07T08:17:28Z<p>Verrev: /* Nädal 15: Dashboard */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:!ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
Loengusalvestis ja praktikumiülesanne tulevad siia enne tavalist neljapäevase loengu aega. Õppejõud teavitab sellest Teamsis. <br />
<br />
* Loeng: TBC<br />
* Praktikum: TBC<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12162Kasutajaliidesed (ITI0209)2026-05-07T08:16:46Z<p>Verrev: </p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:!ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]<br />
<br />
=== Nädal 15: Dashboard ===<br />
<strong>15. nädala loengut auditooriumis ei toimu.</strong><br />
Loengusalvestis ja praktikumiülesanne tulevad siia enne tavalist neljapäevase loengu aega. Õppejõud teavitab sellest Teamsis. <br />
<br />
<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_14_Prax_Charts.pdf&diff=12161Fail:ITI0209 26 14 Prax Charts.pdf2026-05-07T08:13:35Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12160Kasutajaliidesed (ITI0209)2026-05-07T08:01:03Z<p>Verrev: /* Nädal 14: Visualiserimise töövoog */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_14_Visualization_Storytelling.pdf&diff=12159Fail:ITI0209 26 14 Visualization Storytelling.pdf2026-05-07T08:00:13Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12158Kasutajaliidesed (ITI0209)2026-04-30T13:30:23Z<p>Verrev: /* Loengud */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
=== Nädal 14: Visualiserimise töövoog ===<br />
* Loenguslaidid: TBC<br />
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi<br />
<br />
<!--<br />
<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12157Kasutajaliidesed (ITI0209)2026-04-30T10:43:42Z<p>Verrev: /* Nädal 13: Sissejuhatus andmete visualiseerimisse */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12156Kasutajaliidesed (ITI0209)2026-04-30T08:58:23Z<p>Verrev: /* Nädal 13: Sissejuhatus andmete visualiseerimisse */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:!ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12155Kasutajaliidesed (ITI0209)2026-04-30T08:58:11Z<p>Verrev: /* Nädal 13: Sissejuhatus andmete visualiseerimisse */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_13_Prax_Data.pdf&diff=12154Fail:ITI0209 26 13 Prax Data.pdf2026-04-30T08:57:05Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12153Kasutajaliidesed (ITI0209)2026-04-30T08:38:16Z<p>Verrev: /* Nädal 13: Sissejuhatus andmete visualiseerimisse */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. Harjutus: andmete leidmine<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_13_Visualization_Intro.pdf&diff=12152Fail:ITI0209 26 13 Visualization Intro.pdf2026-04-30T08:37:46Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12151ITI0209 kevad 2026 3. kodutöö kirjeldus2026-04-30T08:37:20Z<p>Verrev: </p>
<hr />
<div><strong>NB! Ülesande sisu jääb samaks, aga detailid võivad veel mai 1. nädala jooksul muutuda</strong><br />
<br />
Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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 Turingu serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2026 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: [[Link TBC]]<br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12150ITI0209 kevad 2026 3. kodutöö kirjeldus2026-04-30T08:35:34Z<p>Verrev: </p>
<hr />
<div><strong>NB! Ülesande sisu jääb samaks, aga detailid võivad veel muutuda</strong><br />
<br />
Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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 Turingu serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2026 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: [[Link TBC]]<br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_3._kodut%C3%B6%C3%B6_kirjeldus&diff=12149ITI0209 kevad 2026 3. kodutöö kirjeldus2026-04-28T16:29:18Z<p>Verrev: Uus lehekülg: 'Teise kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö...'</p>
<hr />
<div>Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda 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.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav aadressilt <code>/dashboard</code>. Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2025 kaustas "dashboard".<br />
<br />
<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=381087<br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad 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. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId või andmepunkti mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# 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 ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# 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! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# 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]<br />
# Leht peab olema valideeruv<br />
<br />
== Soovitusi ==<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>https://github.com/martinve/iti0209_kasutajaliidesed<br />
<br />
'''Andmete leidmine ja kasutamine'''<br />
<br />
Siin on veel lisaks viiteid andmete leidmiseks ja nende kasutamiseks jutustuste ehitamisel:<br />
* Data Storytelling: How to Tell a Great Story with Data. https://www.thoughtspot.com/data-trends/best-practices/data-storytelling<br />
* What is Data Storytelling and Data Storytelling Examples | Microsoft Power BI. https://www.microsoft.com/en-us/power-platform/products/power-bi/topics/data-storytelling<br />
* Data Storytelling: The Ultimate Collection of Resources. https://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources<br />
<br />
Soovituslik on andmed kokku koguda Google Sheeetsi, nagu näiteks siin: <br />
https://docs.google.com/spreadsheets/d/14KzlcYOK6Xj-_6N19T2Iqro4sGaAUOLD2FovSXyefUQ/edit?gid=426115144#gid=426115144 (see konkreetselt selle graafiku jaoks: https://informationisbeautiful.net/visualizations/the-rise-of-generative-ai-large-language-models-llms-like-chatgpt/) Siis saab sellele Drive-lingile viidata graafiku juurest ja andmed tabelist tõsta kohalikku JSON faili.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12148Kasutajaliidesed (ITI0209)2026-04-28T16:26:11Z<p>Verrev: /* Nädal 11: Sisu */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<!--<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
--><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. Harjutus: andmete leidmine<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12147Kasutajaliidesed (ITI0209)2026-04-28T16:25:46Z<p>Verrev: /* Loengud */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg<br />
<br />
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===<br />
* Loenguslaidid: [[Media:ITI0209_13_Visualization_Intro.pdf | Loenguslaidid ]]<br />
* Praktikum: 3. iseseisva töö tutvustus. Harjutus: andmete leidmine<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12146Kasutajaliidesed (ITI0209)2026-04-28T16:15:39Z<p>Verrev: </p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_2._kodut%C3%B6%C3%B6_kirjeldus&diff=12145ITI0209 kevad 2026 2. kodutöö kirjeldus2026-04-28T07:24:32Z<p>Verrev: /* Tähtajad */</p>
<hr />
<div>== Tähtajad ==<br />
<br />
Kodutöö tähtaeg on esmaspäev 27.04 kell 18.00.<br />
Kaastudengi töö hindamise tähtaeg on esmaspäev 04.05 kell 23:59<br />
<br />
Järgmise päeva jooksul jagab õppejõud esitatud tööd hindamiseks kaastudengitele. Töö esitamise vorm moodles on: https://moodle.taltech.ee/mod/assign/view.php?id=943615 ja tagasiside saab ülesse laadida siit: https://moodle.taltech.ee/mod/assign/view.php?id=943617. Kui tundub et on midagi puudu siis suhelge omavahel ja jagage kindlasti tagasisidet ka enne Moodlesse ülesselaadimist.<br />
<br />
Kaastudengi töö hindamine toimub sarnaselt 1. iseseisva tööga. Kaastudengi töö hindamiseks vaata Exceli dokumenti mis on Teamsis jagatud (Fail ITI0209_26_Grupid.xlsx Course Materials kataloogis) - selles on kirjas meeskonna number kelle tööd peaksite hindama - nüüd on hinnatavad meeskonnad teised. Kui tundub et on midagi puudu siis suhelge omavahel ja jagage tagasisidet enne Moodlesse ülesselaadimist.<br />
<br />
<br />
<!--<br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_Prax2_Hindamiseks.xlss" - seal on kirjas meeskonna number kelle tööd peaksite hindama. Suure tõenäosusega peate ennast lisama ka kaastudengi Gitlabi. Tagasiside saab ülesse laadida sellelt lingilt: https://moodle.taltech.ee/mod/assign/view.php?id=376905, aga kui tundub et on midagi puudu siis suhelge omavahel ja jagage tagasisidet enne Moodlesse ülesselaadimist.<br />
<br />
--><br />
<br />
== Töö kirjeldus ==<br />
<br />
Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid. Loodud keskkonnal peab olema "päris" sisu.<br />
<br />
Töö peab esitamiseks olema paigutatud Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209_26. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://gitlab.cs.taltech.ee projekti ITI0209_2026 kaustas "html_proto".<br />
<br />
<br />
== Kaastudengi töö hindamine == <br />
<br />
<!-- <br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_26_Prax_Hindamiseks.xlsx" - seal on kirjas meeskonna number kelle tööd peaksite hindama. <br />
--><br />
<br />
<br />
Soovitusi hindamiseks:<br />
<br />
* Hoia vormistus lihtne - ära kasuta sisukorda, tiitellehte jne.<br />
* Veendu et hindamisraportis oleks märgitud kes hindas, ja millist meeskonda hinnati.<br />
* Märgi hindamisraportis mitu punkti hinnatav meeskond sai: iga alampunkti eest ja palju kokku.<br />
* Põhjenda ka sõnaliselt hinde moodutamist, vajadusel anna nõu mis on puudu.<br />
* Kui mõni kohustuslik element on puudu, siis too see esile.<br />
* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmis.<br />
<br />
Hindamisraportist peavad nii õppejõud kui hinnatav meeskond aru saama, millised on saadud punktid iga osa eest eraldi ja punktid kokku; mis oli esitatud töös hästi; mis oli puudu või mida saaks paremini teha; ja üldine kokkuvõte tehtud töö kohta. <br />
<br />
<br />
<br />
'''Nõuded:'''<br />
<br />
# HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. Nii pildid kui sisutekstid peavad olema "päris" - mitte igal lehel, küll toote põhiflow-ga seotutel. '''See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud.''' (5p)<br />
# Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrappi, aga lubatud on nt Semantic UI, Material CSS, Zepto, Tailwind vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/5.3/examples/ ja muuta vaateid vastavalt enda vajadustele. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (2p)<br />
# Loodud on disainisüsteem. Disainisüsteem on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `./design_system`. Disainisüsteemis peaksid olema kokku tõstetud ühele lehele teie poolt kasutuses olevad elemendid. Hea kirjeldus mida stiiliraamat peaks sisaldama, on näiteks see: https://xd.adobe.com/ideas/process/ui-design/ui-style-guide-template/. Vaata ka 8. loengu slaide (lk 12) (2p)<br />
# Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)<br />
# HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)<br />
# Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - SASSi, LESSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika. (1p)<br />
# Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. (1p)<br />
# Rakendus on arvestab vaegnägijate erisustega. (1p)<br />
<br />
'''Soovitusi:'''<br />
<br />
* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/5.3/layout/grid/<br />
<br />
* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.<br />
<br />
* Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad katsetamise ajal lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/. Kas kohe või hiljem saad leida sobivad fotod mõnest vabavara-pildipangast, nt. Pexels.com<br />
<br />
* Kõige lihtsam viis eelprotsessorite kasutamiseks on teha seda kasutades IDE sisseehitatud pluginaid. IntelliJ toodete puhul on hea õpetus siin: https://www.jetbrains.com/help/webstorm/transpiling-sass-less-and-scss-to-css.html Kui kasutate mõnda muud editori, oleks esimene samm leida LESS/SASS plugin. Juhul kui pluginat leida ei õnnestu, siis SASSi puhul on hea juhend siin: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 ja LESSi puhul siin: https://www.npmjs.com/package/less-watch-compiler</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_2._kodut%C3%B6%C3%B6_kirjeldus&diff=12144ITI0209 kevad 2026 2. kodutöö kirjeldus2026-04-27T09:46:25Z<p>Verrev: /* Tähtajad */</p>
<hr />
<div>== Tähtajad ==<br />
<br />
Kodutöö tähtaeg on esmaspäev 27.04 kell 18.00.<br />
Kaastudengi töö hindamise tähtaeg on esmaspäev 04.05 kell 23:59<br />
<br />
Järgmise päeva jooksul jagab õppejõud esitatud tööd hindamiseks kaastudengitele. Töö esitamise vorm moodles on: https://moodle.taltech.ee/mod/assign/view.php?id=943615 ja tagasiside saab ülesse laadida siit: https://moodle.taltech.ee/mod/assign/view.php?id=943617. Kui tundub et on midagi puudu siis suhelge omavahel ja jagage kindlasti tagasisidet ka enne Moodlesse ülesselaadimist.<br />
<br />
Kaastudengi töö hindamine toimub sarnaselt 1. iseseisva tööga<br />
<br />
<!--<br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_Prax2_Hindamiseks.xlss" - seal on kirjas meeskonna number kelle tööd peaksite hindama. Suure tõenäosusega peate ennast lisama ka kaastudengi Gitlabi. Tagasiside saab ülesse laadida sellelt lingilt: https://moodle.taltech.ee/mod/assign/view.php?id=376905, aga kui tundub et on midagi puudu siis suhelge omavahel ja jagage tagasisidet enne Moodlesse ülesselaadimist.<br />
<br />
--><br />
<br />
== Töö kirjeldus ==<br />
<br />
Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid. Loodud keskkonnal peab olema "päris" sisu.<br />
<br />
Töö peab esitamiseks olema paigutatud Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209_26. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://gitlab.cs.taltech.ee projekti ITI0209_2026 kaustas "html_proto".<br />
<br />
<br />
== Kaastudengi töö hindamine == <br />
<br />
<!-- <br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_26_Prax_Hindamiseks.xlsx" - seal on kirjas meeskonna number kelle tööd peaksite hindama. <br />
--><br />
<br />
<br />
Soovitusi hindamiseks:<br />
<br />
* Hoia vormistus lihtne - ära kasuta sisukorda, tiitellehte jne.<br />
* Veendu et hindamisraportis oleks märgitud kes hindas, ja millist meeskonda hinnati.<br />
* Märgi hindamisraportis mitu punkti hinnatav meeskond sai: iga alampunkti eest ja palju kokku.<br />
* Põhjenda ka sõnaliselt hinde moodutamist, vajadusel anna nõu mis on puudu.<br />
* Kui mõni kohustuslik element on puudu, siis too see esile.<br />
* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmis.<br />
<br />
Hindamisraportist peavad nii õppejõud kui hinnatav meeskond aru saama, millised on saadud punktid iga osa eest eraldi ja punktid kokku; mis oli esitatud töös hästi; mis oli puudu või mida saaks paremini teha; ja üldine kokkuvõte tehtud töö kohta. <br />
<br />
<br />
<br />
'''Nõuded:'''<br />
<br />
# HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. Nii pildid kui sisutekstid peavad olema "päris" - mitte igal lehel, küll toote põhiflow-ga seotutel. '''See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud.''' (5p)<br />
# Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrappi, aga lubatud on nt Semantic UI, Material CSS, Zepto, Tailwind vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/5.3/examples/ ja muuta vaateid vastavalt enda vajadustele. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (2p)<br />
# Loodud on disainisüsteem. Disainisüsteem on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `./design_system`. Disainisüsteemis peaksid olema kokku tõstetud ühele lehele teie poolt kasutuses olevad elemendid. Hea kirjeldus mida stiiliraamat peaks sisaldama, on näiteks see: https://xd.adobe.com/ideas/process/ui-design/ui-style-guide-template/. Vaata ka 8. loengu slaide (lk 12) (2p)<br />
# Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)<br />
# HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)<br />
# Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - SASSi, LESSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika. (1p)<br />
# Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. (1p)<br />
# Rakendus on arvestab vaegnägijate erisustega. (1p)<br />
<br />
'''Soovitusi:'''<br />
<br />
* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/5.3/layout/grid/<br />
<br />
* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.<br />
<br />
* Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad katsetamise ajal lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/. Kas kohe või hiljem saad leida sobivad fotod mõnest vabavara-pildipangast, nt. Pexels.com<br />
<br />
* Kõige lihtsam viis eelprotsessorite kasutamiseks on teha seda kasutades IDE sisseehitatud pluginaid. IntelliJ toodete puhul on hea õpetus siin: https://www.jetbrains.com/help/webstorm/transpiling-sass-less-and-scss-to-css.html Kui kasutate mõnda muud editori, oleks esimene samm leida LESS/SASS plugin. Juhul kui pluginat leida ei õnnestu, siis SASSi puhul on hea juhend siin: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 ja LESSi puhul siin: https://www.npmjs.com/package/less-watch-compiler</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2026_2._kodut%C3%B6%C3%B6_kirjeldus&diff=12143ITI0209 kevad 2026 2. kodutöö kirjeldus2026-04-27T09:46:16Z<p>Verrev: /* Tähtajad */</p>
<hr />
<div>== Tähtajad ==<br />
<br />
Kodutöö tähtaeg on esmaspäev 27.04 kell 18.00.<br />
Kaastudengi töö hindamise tähtaeg on esmaspäev 04.05 kell 23:59<br />
<br />
Järgmise päeva jooksul jagab õppejõud esitatud tööd hindamiseks kaastudengitele. Töö esitamise vorm moodles on: https://moodle.taltech.ee/mod/assign/view.php?id=943615 ja tagasiside saab ülesse laadida siit: https://moodle.taltech.ee/mod/assign/view.php?id=943617. Kui tundub et on midagi puudu siis suhelge omavahel ja jagage kindlasti tagasisidet ka enne Moodlesse ülesselaadimist.<br />
<br />
Kaastudengi töö hindamine toimub sarnaselt 1. iseseisva tööga<br />
<br />
<! --<br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_Prax2_Hindamiseks.xlss" - seal on kirjas meeskonna number kelle tööd peaksite hindama. Suure tõenäosusega peate ennast lisama ka kaastudengi Gitlabi. Tagasiside saab ülesse laadida sellelt lingilt: https://moodle.taltech.ee/mod/assign/view.php?id=376905, aga kui tundub et on midagi puudu siis suhelge omavahel ja jagage tagasisidet enne Moodlesse ülesselaadimist.<br />
<br />
--><br />
<br />
== Töö kirjeldus ==<br />
<br />
Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid. Loodud keskkonnal peab olema "päris" sisu.<br />
<br />
Töö peab esitamiseks olema paigutatud Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209_26. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://gitlab.cs.taltech.ee projekti ITI0209_2026 kaustas "html_proto".<br />
<br />
<br />
== Kaastudengi töö hindamine == <br />
<br />
<!-- <br />
Kaastudengi töö hindamiseks vaata dokumenti mis on Teamsis jagatud "Files" -> "Class_Materials" -> "ITI0209_26_Prax_Hindamiseks.xlsx" - seal on kirjas meeskonna number kelle tööd peaksite hindama. <br />
--><br />
<br />
<br />
Soovitusi hindamiseks:<br />
<br />
* Hoia vormistus lihtne - ära kasuta sisukorda, tiitellehte jne.<br />
* Veendu et hindamisraportis oleks märgitud kes hindas, ja millist meeskonda hinnati.<br />
* Märgi hindamisraportis mitu punkti hinnatav meeskond sai: iga alampunkti eest ja palju kokku.<br />
* Põhjenda ka sõnaliselt hinde moodutamist, vajadusel anna nõu mis on puudu.<br />
* Kui mõni kohustuslik element on puudu, siis too see esile.<br />
* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmis.<br />
<br />
Hindamisraportist peavad nii õppejõud kui hinnatav meeskond aru saama, millised on saadud punktid iga osa eest eraldi ja punktid kokku; mis oli esitatud töös hästi; mis oli puudu või mida saaks paremini teha; ja üldine kokkuvõte tehtud töö kohta. <br />
<br />
<br />
<br />
'''Nõuded:'''<br />
<br />
# HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. Nii pildid kui sisutekstid peavad olema "päris" - mitte igal lehel, küll toote põhiflow-ga seotutel. '''See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud.''' (5p)<br />
# Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrappi, aga lubatud on nt Semantic UI, Material CSS, Zepto, Tailwind vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/5.3/examples/ ja muuta vaateid vastavalt enda vajadustele. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (2p)<br />
# Loodud on disainisüsteem. Disainisüsteem on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `./design_system`. Disainisüsteemis peaksid olema kokku tõstetud ühele lehele teie poolt kasutuses olevad elemendid. Hea kirjeldus mida stiiliraamat peaks sisaldama, on näiteks see: https://xd.adobe.com/ideas/process/ui-design/ui-style-guide-template/. Vaata ka 8. loengu slaide (lk 12) (2p)<br />
# Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)<br />
# HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)<br />
# Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - SASSi, LESSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika. (1p)<br />
# Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. (1p)<br />
# Rakendus on arvestab vaegnägijate erisustega. (1p)<br />
<br />
'''Soovitusi:'''<br />
<br />
* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/5.3/layout/grid/<br />
<br />
* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.<br />
<br />
* Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad katsetamise ajal lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/. Kas kohe või hiljem saad leida sobivad fotod mõnest vabavara-pildipangast, nt. Pexels.com<br />
<br />
* Kõige lihtsam viis eelprotsessorite kasutamiseks on teha seda kasutades IDE sisseehitatud pluginaid. IntelliJ toodete puhul on hea õpetus siin: https://www.jetbrains.com/help/webstorm/transpiling-sass-less-and-scss-to-css.html Kui kasutate mõnda muud editori, oleks esimene samm leida LESS/SASS plugin. Juhul kui pluginat leida ei õnnestu, siis SASSi puhul on hea juhend siin: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 ja LESSi puhul siin: https://www.npmjs.com/package/less-watch-compiler</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_12_Accessibility.pdf&diff=12142Fail:ITI0209 26 12 Accessibility.pdf2026-04-23T21:10:38Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12141Kasutajaliidesed (ITI0209)2026-04-23T11:54:05Z<p>Verrev: /* Nädal 12: Juurdepääsetavus */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong><br />
<br />
<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12140Kasutajaliidesed (ITI0209)2026-04-20T17:54:04Z<p>Verrev: /* Loengud */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong><br />
<br />
<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:!ITI0209_12_Accessibility.pdf | Loenguslaidid ]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_12_Accessibility.pdf&diff=12139Fail:ITI0209 12 Accessibility.pdf2026-04-20T17:53:29Z<p>Verrev: </p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12138Kasutajaliidesed (ITI0209)2026-04-20T17:53:14Z<p>Verrev: /* Nädal 12: Juurdepääsetavus */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong><br />
<br />
<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf]]<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 9: Disainisüsteem - Vormid<br />
Nädal 10: Otsing ja Filtrid<br />
Nädal 11: Sisu<br />
Nädal 12: Juurdepääsetavus <br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Turingu_serverisse_rakenduse_paigaldamine&diff=12137Turingu serverisse rakenduse paigaldamine2026-04-20T11:10:05Z<p>Verrev: </p>
<hr />
<div>== Turingu server ==<br />
<br />
Kodutööde tarbeks on kasutusel server http://turing.cs.ttu.ee: 2. ja 3. kodutöö tuleb sinna üles panna asukohta mis kodutöö kirjelduse juures. Põhileht/avaleht olgu täpselt nimega <code>index.html</code>, siis töötab otse kataloogi-url ilma failinimeta.<br />
<br />
=== Ligipääs ===<br />
<br />
Turingu serverisse sisselogimiseks on sul vaja omada TTÜ arvutiklasside klasside kontot kujul <b>Eesnimi.Perenimi</b> (siin võib tekkida probleem täpitähtede, tühikutega jne) või <b>Uni-id</b>. <br />
<br />
Kui sul ei ole kasutajatunnust või oled parooli kaotanud, saad selle lasta teha arvutiklasside administraatorite juures. Teine variant on kasutada portaali https://pass.ttu.ee : logid sinna sisse id-kaardi või mobiiliga ja saad ise parooli muuta.<br />
<br />
=== Veebikeskkonna ettevalmistamine ja failide üleslaadimine ===<br />
<br />
Kõik asjad, mis paigutad oma turingu serveri kodukataloogi alamkataloogi <tt>public_html</tt>, on veebis nähtavad. See kataloog peaks olema sulle juba ette valmis tehtud. <br />
<br />
Tekita algul prooviks otse public_html alla katse.html nimeline fail ja vaata, kas brauserist avaneb<br />
<br />
`http://turing.cs.ttu.ee/~<uni-id>/katse.html`<br />
<br />
Kui ei avane, on võimalik, et sul on vaja muuta katse.html failiõigusi, nagu edaspidises kirjas. Üldiselt on failiõigused kohe OK ja neid muutma ei pea.<br />
<br />
Nüüd loo <tt>public_html</tt> alla kataloog <tt>prax1</tt>: <br />
<br />
* Winscp abil kasuta serveriaknas kataloogi-ikooni tärnikesega üleval paremal: create directory (F7). Seejuures peaksid vaikimisi failiõigused olema kohe OK ja neid seadma ei pea. Oluline, et "Set permissions" all oleks Owneri järel RWX linnukesed, Group ja Others järel R X linnukesed.<br />
* Kui sa winscp-d ei kasuta, siis käsurealt sisse logides tee <tt>mkdir public_html/prax1</tt> ja sea failiõigused, nagu järgnevas räägitud.<br />
<br />
Seejärel pane oma rakenduse failid otse sinnasamasse prax1 alla, kasutades failinimesid, mis eelpool nõutud (index.html pealeht, muud lehed enda valikul).<br />
<br />
Kui kataloog on olemas ja sinna mõned faili pandud, suunake oma brauser turingu serveri aadressile, mille saate, kui lisate serveri nime järgi tilde ja kasutajanime ja siis kataloogi või faili, mis olete pannud public_html alla (näiteks sedasi, aga asendage oma kasutajanimi ära):<br />
<br />
http://turing.cs.ttu.ee/~<uni-id>/index.html<br />
või<br />
http://turing.cs.ttu.ee/~<uni-id>/prax1/index.html<br />
või<br />
http://turing.cs.ttu.ee/~<uni-id>/prax1/<br />
<br />
Idee selles, et urlis http://turing.cs.ttu.ee/~<uni-id>/ järel tulevad failid/kataloogid on täpselt need, mis sul public_html kataloogi sees.<br />
<br />
<b>Failiõiguste seadmine:</b><br />
<br />
<!--<br />
Juhul, kui te kataloogi või oma index.html sisu ei näe, kontrollige, et nii teie kodukataloog kui public_html kuuluksid grupile "tudengid" ja et sellel grupil oleks nii lugemis-kui kataloogisisu vaatamise pääsuõigused. Samuti peab tudengigrupil olema võimalus lugeda kõiki veebi ülesminevaid faile.<br />
--><br />
<br />
Kui oled värskelt public_html alla prax1 kataloogi teinud, on tal tõenäoliselt kohe sobivad failiõigused.<br />
Kui ei, siis on vaja anda talle lisaks lugemis-ja nimekirjanäitamise õigus niimoodi: <tt>chmod a+rx public_html/prax1</tt><br />
<br />
Failile lugemisõiguse andmine (see tekib üldjuhul automaatselt ja ei ole vaja ise teha): <tt>chmod a+r index.html</tt><br />
<br />
<b>public_html tegemine (erijuht)</b><br />
<br />
Kui sul public_html kataloogi miskipärast ei ole, saad ta ise käsurealt luua niimoodi: <tt>mkdir public_html</tt><br />
<br />
Käsurea saamiseks tuleks üle SSH ühenduse serveri käsureale logida ([http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html putty] või ssh vms)<br />
<br />
=== Sisselogimine käsureale ===<br />
<br />
Esimese ja teise praksi jaoks ei ole otseselt vaja serveri käsurida kasutada ehk sinna sisse logida. Järgmiste prakside jaoks aga on, nii et võid seda kohe katsetada.<br />
<br />
Sisselogimiseks on Windowsil kõige lihtsam kasutada programmi [http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html putty] (või alternatiivina [http://kitty.9bis.net/ kitty]) ja Linuxil või Macil või käsureaprogrammi ssh.<br />
<br />
Putty leiad arvutiklassidest programmi "Application catalog" jaotusest terminals: sealt saad ta ise installeerida. Mõistlik on panna endale putty viit desktopile.<br />
<br />
Alternatiivina saad lihtsalt laadida endale veebist putty.exe: selle saab otse käima lasta, mingit eri-installeerimist ei ole vaja.<br />
<br />
Putty või Kitty käimaminekul on sul vaja sisestada:<br />
<br />
* Serveri aadress: turing.cs.ttu.ee (see tuleb puttyl sisestada "Host name" väljale)<br />
* Kasutajanimi ja parool: TTÜ kasutajanimi ja parool (neid küsib putty siis, kui ta serveriakna avab).<br />
<br />
Puttyl tasub Window/appearance alt seada meeldiv font ja Window/color alt meeldiv värv (ntx valge tagapõhi ja must värv). Samuti tasub kindlasti teha "save session" (enne pane "Saved session" väljale endale meeldiv nimi), siis jätab Putty settingud meelde ja sisenemisel ei pea enam arvuti nime sisestama: valid listist sessiooninime ja teed "Load" ja seejärel "open".<br />
<br />
Hea alternatiiv puttyle on [http://kitty.9bis.net/ kitty], mis on muidu täpselt nagu putty, aga on valmis sinu kasutajanime ja parooli meelde jätma, et ei peaks igakord uuesti sisestama.<br />
<br />
=== Optimaalne failide paigaldamine serverisse ===<br />
<br />
Kuna lähtekoodi hoitakse Gitlabi koodisalves, siis kõige lihtsam on `public_html` kataloogis kloonida koodisalv `iti0209` nimega, näiteks: `git@gitlab.cs.ttu.ee:martin.verrev/iti0209_2025.git iti0209` Kui salves on index.html fail loodud ja pathid korrektsed muutub prototüüp serveris aadressil `https://turing.cs.ttu.ee/~martin.verrev/iti0209` nähtavaks.<br />
<br />
SSH võtmete seadistamiseks saad kasutada nt. seda juhendit: https://servicenow.iu.edu/kb?id=kb_article_view&sysparm_article=KB0023919<br />
<br />
Ehk sammud oleks järgmised:<br><br />
1. Ettevalmistuseks seadista SSH võtmed Gitlabis ja turingu serveris<br><br />
2. Tee failides muudatused lokaalselt - ja lisa need koodisalve<br><br />
3. Tee ssh-ühendus Turingu serverisse, mine public_html kataloogi<br><br />
4. Klooni salv public_html kataloogi<br><br />
<br />
Arvesta sellega et erinevalt lokaalsest arenduskeskkonnast hakkab sinu rakendus jooksma alamkataloogis - järelikult pead veenduma et pilte ja stiile loetakse õigest asukohast, samuti peavad kõik lingid töötama.<br />
<br />
=== Linuxi käsurida ja serveris tegutsemine ===<br />
<br />
Esimeses kahes praksis sul otseselt käsurida vaja ei lähe, aga kolmandast alates läheb. Põhimõtteliselt peaks piisama neist käskudest:<br />
<br />
pwd (mis kataloogis ma praegu olen)<br />
ls -l (vaata kataloogi sisu pikas formaadis)<br />
cd katalooginimi (mine sinna kataloogi)<br />
cd .. (mine üks tase kõrgemasse kataloogi)<br />
less failinimi (näita faili sisu: seal sees liigu nooleklahvidega ja lõpeta tähega q)<br />
cp kust kuhu (kopeerib)<br />
rm failinimi (kustutab)<br />
mkdir katalooginimi (teeb uue kataloogi)<br />
rmdir katalooginimi (kustutab kataloogi: see tuleb enne tühjendada)<br />
chmod a+r failinimi (teeb faili kõigile loetavaks, et ntx veebist kuvada)<br />
chmod a+rx failinimi (teeb faili kõigile käimapandavaks, eeskätt cgi programmide jaoks)<br />
vi failinimi (redigeeri faili lihtsa redaktoriga vi)<br />
<br />
<br />
Linuxi käsurea kasutamist tuleb uurida omal käel. Sobivat lugemist lihtsamatest keerulisemateni: <br />
<br />
* päris algajatele on hea [http://www.freesoftwaremagazine.com/articles/command_line_intro see selgitustega leht] <br />
* seejärel tasub korra lisaks vaadata [http://www.pixelbeat.org/cmdline.html seda kompaktset kokkuvõtet] erinevatest käskudest (enamust vaja ei lähe)<br />
* ning lugeda [http://www.funtoo.org/wiki/Linux_Fundamentals,_Part_1 seda väga head ja põhjalikku õpetust] funtoo saidilt (vt ka järgmisi sarja osi lehe lõpust!)<br />
* või alternatiivina [http://linuxcommand.org/learning_the_shell.php seda põhjalikumat õpetust].<br />
* Alati tasub lisaks ise googeldada.<br />
<br />
<b>Väga kasulikud asjad meelde jätta:</b><br />
<br />
* Üles ja alla nooleklahvid võtavad automaatselt ette varasemaid/hilisemaid käske, et neid ei peaks uuesti sisse tippima<br />
* kui tipid failinime esimese otsa ja vajutad tab klahvi, otsib süsteem automaatselt failinime lõpu (kui sul muidugi pole mitut sama algusega faili)<br />
* Suured ja väikesed tähed on unixis täiesti erinevad asjad, erinevalt windowsist. Näiteks sinu html/javascript sources olevad failinimed peavad olema antud täpselt selliselt, nagu failinimi tegelikult on (kui sources failinimi pilt.jgp, siis peab olema tegeliku faili nimi ka pilt.jpg, aga mitte näiteks pilt.JPG).<br />
* Üldiselt <b>ei ole</b> hea mõte kasutada failinimesid, kus sees tühikud ja/või täpitähed. See on võimalik, kuid tekitab rohkem probleeme ja ebamugavusi, kui asi väärt on. Seega kasuta näiteks "minu überpilt.jpg" asemel "minu_yberpilt.jpg" vms.<br />
* oma programmide käivitamiseks (oletame, et sul on kataloogis programm <b>minuproge</b>) tipi <b>./minuproge</b> . Seda punkt-slashi ei ole vaja panna, kui sul on PATH muutuja sobivaks seatud, aga selle seadmisega pole tingimata vaja jännata.<br />
<br />
=== Failide muutmine otse serveris ===<br />
<br />
Siin on kolm veidi erinevat võimalust:<br />
<br />
* redigeerida faile mõne serveris oleva redaktoriga, näiteks vi ([http://www.guckes.net/vi/quotes.php3 loe veidi vi kohta]).<br />
* redigeerida faile oma masinas oleva redaktoriga, mis võimaldab neid otse serverist avada ja sinna kirjutada (head variandid selleks on [http://winscp.net/eng/docs/ui_editor winscp] ja redaktoriks sea endale meeldiv redaktor, a la notepad++, scite või brackets.<br />
* ja lõpuks on alati variant redigeerida faile oma masinas ja kopeerida nad peale muutmist serverisse (nagu varem kirjeldatud)<br />
<br />
Üldiselt on kõige mugavam teha võimalikult kõik oma masinas valmis, katsetada ära ja alles siis kopeerida valmis asjad serverisse, ning teha serveris ainult pisimuutusi.<br />
<br />
=== Ruutimine ja pathid ===<br />
<br />
Pane tähele et kui arendad oma lokaalses arvutis, siis reeglina teed seda juurpathilt - s.t avaleht on <code>http://localhost/index.html</code>, Turingu serveris aga alamkataloogis <code>http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209_26</code><br />
<br />
Et kood katki ei läheks siis:<br />
* HTMLi kasutamise puhul kasuta <code>base</code> tag-i. Vaata nt: https://medium.com/@asobalsayed/base-html-tag-a-deep-dive-into-its-uses-and-nuances-a6b7c0140bf2<br />
* Vue kasutamisel seadistama <code>publicPath</code> muutuja: https://cli.vuejs.org/config/#publicpath<br />
* Reacti kasutamisel seadistama rakenduse töötama alamkataloogist: vt näiteks https://onlyoneaman.medium.com/publishing-a-react-app-to-a-subdirectory-92d2d579cebf<br />
<br />
Nii Vue kui Reacti puhul peate rakenduse eelnevalt kompileerima ja paigaldama serverisse staatilised failid.</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Fail:ITI0209_26_11_Content.pdf&diff=12136Fail:ITI0209 26 11 Content.pdf2026-04-16T12:26:51Z<p>Verrev: Verrev laadis üles uue versiooni failist Fail:ITI0209 26 11 Content.pdf</p>
<hr />
<div></div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12135Kasutajaliidesed (ITI0209)2026-04-16T10:43:39Z<p>Verrev: /* Nädal 11: Sisu */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong><br />
<br />
<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: TBC<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 9: Disainisüsteem - Vormid<br />
Nädal 10: Otsing ja Filtrid<br />
Nädal 11: Sisu<br />
Nädal 12: Juurdepääsetavus <br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&diff=12134Kasutajaliidesed (ITI0209)2026-04-16T10:43:18Z<p>Verrev: /* Nädal 11: Sisu */</p>
<hr />
<div>{{UI}}'''Kursuse kood:''' ITI0209<br><br />
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br><br />
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br><br />
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831, <strong>registreerumise kood:</strong>ITI020926<br><br />
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br><br />
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br><br />
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br><br />
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br><br />
<br />
<br />
== Üldine ülevaade ==<br />
<br />
<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong><br />
<br />
<br />
<br />
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.<br />
<br />
Kursuse lõpetaja:<br />
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.<br />
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.<br />
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.<br />
* Oskab andmeid visualiseerida.<br />
<br />
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)<br />
<br />
== Loengud ==<br />
<br />
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===<br />
<br />
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]<br />
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]<br />
<br />
=== Nädal 2: Kasutajaliidese arendusprotsess ===<br />
<br />
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.<br />
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]<br />
* Praktikum: [[ITI0209_26_02_Prax]]<br />
<br />
=== Nädal 3: Protsessi algatamine: Briif ===<br />
<br />
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]<br />
<br />
=== Nädal 4: Protessi tulemid: Kasutajavood ===<br />
<br />
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]<br />
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]<br />
<br />
=== Nädal 5: Protessi tulemid: Persoonad ===<br />
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]<br />
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ --><br />
<br />
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===<br />
* Loengusalvestis: Kursuse Teamsi kanalis<br />
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]<br />
* Praktikum: Näidisprojekti tutvustus<br />
<br />
=== Nädal 7: Sissejuhatud Disainisüsteemi ===<br />
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]<br />
* Praktikum: Individiaalsed konsultatsioonid<br />
<br />
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===<br />
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg<br />
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]<br />
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]<br />
<br />
=== Nädal 9: Vormid ===<br />
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]<br />
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]<br />
<br />
=== Nädal 10: Otsing ja Filtrid ===<br />
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]<br />
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]<br />
<br />
=== Nädal 11: Sisu ===<br />
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong><br />
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]<br />
* Praktikum: [[Media:ITI0209_26_11_Search_Prax_Content.pdf | UX kirjutamise harjutus ]]<br />
<br />
=== Nädal 12: Juurdepääsetavus ===<br />
* Loeguslaidid: TBC<br />
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg)<br />
<br />
<br />
<br />
<!--<br />
<br />
<br />
Nädal 9: Disainisüsteem - Vormid<br />
Nädal 10: Otsing ja Filtrid<br />
Nädal 11: Sisu<br />
Nädal 12: Juurdepääsetavus <br />
<br />
Nädal 13: Sissejuhatus andmete visualiseerimisse<br />
Nädal 14: Visualiseerimise töövoog<br />
Nädal 15: Dashboard<br />
Nädal 16: Kursuse kokkuvõte<br />
<br />
--><br />
<br />
== Iseseisvad tööd ==<br />
<br />
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.<br />
<br />
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br><br />
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br><br />
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E18.05 12:00<br><br />
<br />
=== Turingu serveri kasutamine ===<br />
<br />
[[Turingu serverisse rakenduse paigaldamine]]<br />
<br />
== Hinde moodustumine ==<br />
<br />
Lõpphinne moodustub järgmistest pukntidest:<br />
<br />
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br><br />
c. 3. iseseisev töö ja selle kaitsmine: 20p<br><br />
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br><br />
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br><br />
<br />
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br><br />
Hilinenud tööd annavad poole võimalikest punktidest.<br />
<br />
<br />
*91 < punkti -- hinne 5 (suurepärane)<br />
*81 < punkti < 90 -- hinne 4 (väga hea)<br />
*71 < punkti < 80 -- hinne 3 (hea)<br />
*61 < punkti < 70 -- hinne 2 (rahuldav)<br />
*51 < punkti < 60 -- hinne 1 (kasin)<br />
*alla 51 punkti -- kursust ei läbitud</div>Verrev