Kursused - Viimased muudatused [et]

Kasutajaliidesed (ITI0209)

Verrev — Thu, 09 Apr 2026 09:00:25 GMT

Üldine ülevaade

Fail:ITI0209 26 10 Search Filters.pdf

Verrev — Thu, 09 Apr 2026 08:24:21 GMT

Verrev laadis üles faili Fail:ITI0209 26 10 Search Filters.pdf

Uus lehekülg

Fail:ITI0209 26 10 Search.pdf

Verrev — Wed, 08 Apr 2026 17:10:48 GMT

Verrev laadis üles faili Fail:ITI0209 26 10 Search.pdf

Uus lehekülg

Kasutajaliidesed (ITI0209)

Verrev — Wed, 08 Apr 2026 15:55:47 GMT

Fail:CSS Bootstrap Intro.pdf

Verrev — Thu, 02 Apr 2026 08:36:46 GMT

Verrev laadis üles uue versiooni failist Fail:CSS Bootstrap Intro.pdf

Uus lehekülg

Kasutajaliidesed (ITI0209)

Verrev — Thu, 02 Apr 2026 08:32:39 GMT

Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid

Fail:CSS Bootstrap Intro.pdf

Verrev — Thu, 02 Apr 2026 08:32:09 GMT

Verrev laadis üles faili Fail:CSS Bootstrap Intro.pdf

Uus lehekülg

Kasutajaliidesed (ITI0209)

Verrev — Thu, 02 Apr 2026 08:26:27 GMT

Nädal 10: Otsing ja Filtrid

Fail:ITI0209 26 09 Prax Forms.pdf

Verrev — Thu, 02 Apr 2026 07:39:06 GMT

Verrev laadis üles faili Fail:ITI0209 26 09 Prax Forms.pdf

Uus lehekülg

Fail:ITI0209 26 09 Forms.pdf

Verrev — Thu, 02 Apr 2026 07:36:48 GMT

Verrev laadis üles uue versiooni failist Fail:ITI0209 26 09 Forms.pdf

Uus lehekülg

Fail:ITI0209 26 09 Forms.pdf

Verrev — Thu, 02 Apr 2026 07:35:53 GMT

Verrev laadis üles uue versiooni failist Fail:ITI0209 26 09 Forms.pdf

Uus lehekülg

Kasutajaliidesed (ITI0209)

Verrev — Thu, 26 Mar 2026 14:35:08 GMT

Nädal 9: Vormid

Fail:ITI0209 26 08 Design Systems Layout.pdf

Verrev — Thu, 26 Mar 2026 09:59:50 GMT

Verrev laadis üles faili Fail:ITI0209 26 08 Design Systems Layout.pdf

Uus lehekülg

ITI0209 kevad 2026 2. kodutöö kirjeldus

Verrev — Thu, 26 Mar 2026 09:02:18 GMT

Kasutajaliidesed (ITI0209)

Verrev — Wed, 25 Mar 2026 17:40:47 GMT

Loengud

ITI0209 kevad 2026 2. kodutöö kirjeldus

Verrev — Wed, 25 Mar 2026 17:31:47 GMT

ITI0209 kevad 2026 1. kodutöö kirjeldus

Verrev — Wed, 25 Mar 2026 17:30:14 GMT

Kaastudengi töö hindamine

ITI0209 kevad 2026 2. kodutöö kirjeldus

Verrev — Wed, 25 Mar 2026 17:29:21 GMT

Kaastudengi töö hindamine

ITI0209 kevad 2026 1. kodutöö kirjeldus

Verrev — Mon, 23 Mar 2026 20:32:03 GMT

Kaastudengi töö hindamine

Fail:ITI0209 26 07 Design Systems Intro.pdf

Verrev — Fri, 20 Mar 2026 09:21:55 GMT

Verrev laadis üles uue versiooni failist Fail:ITI0209 26 07 Design Systems Intro.pdf

Uus lehekülg

ITI0209 kevad 2026 1. kodutöö kirjeldus

Verrev — Thu, 19 Mar 2026 12:28:35 GMT

Hindamine: Punktisumma moodustamine

Fail:ITI0209 26 07 Design Systems Intro.pdf

Verrev — Thu, 19 Mar 2026 09:49:45 GMT

Verrev laadis üles faili Fail:ITI0209 26 07 Design Systems Intro.pdf

Uus lehekülg

ITI0209 kevad 2026 1. kodutöö kirjeldus

Verrev — Thu, 19 Mar 2026 09:27:56 GMT

Kasutajaliidesed (ITI0209)

Verrev — Thu, 19 Mar 2026 09:25:34 GMT

Loengud

ITI0209 kevad 2026 2. kodutöö kirjeldus

Verrev — Thu, 19 Mar 2026 06:12:34 GMT

Uus lehekülg: '== Tähtajad == <!-- Kodutöö tähtaeg on teisipäev 29.04 kell 23:59. Järgmise päeva jooksul jagab õppejõud esitatud tööd hindamiseks kaastudengitele. Hidamise ja taga...'

Uus lehekülg

== Tähtajad ==



== Töö kirjeldus ==

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.

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".

== Kaastudengi töö hindamine ==

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.

Soovitusi hindamiseks:

* Hoia vormistus lihtne - ära kasuta sisukorda, tiitellehte jne.
* Veendu et hindamisraportis oleks märgitud kes hindas, ja millist meeskonda hinnati.
* Märgi hindamisraportis mitu punkti hinnatav meeskond sai: iga alampunkti eest ja palju kokku.
* Põhjenda ka sõnaliselt hinde moodutamist, vajadusel anna nõu mis on puudu.
* Kui mõni kohustuslik element on puudu, siis too see esile.
* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmis.

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.

'''Nõuded:''

# 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)
# 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)
# Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html`. Stiiliraamatus 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)
# 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)
# 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)
# 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)
# 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)
# Rakendus on arvestab vaegnägijate erisustega. (1p)

'''Soovitusi:'''

* 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/

* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.

* 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

* 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

Kasutajaliidesed (ITI0209)

Verrev — Wed, 18 Mar 2026 23:11:05 GMT

Loengud

@@ 11. rida: / 11. rida: @@
 == Üldine ülevaade ==
-<strong style="color:red">NB! 16. märtsi loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong>
+<strong style="color:red">NB! 16. aprilli loeng ja praktikum (nädal 11) toimuvad tavalises formaadis Teamsis.</strong>
@@ 71. rida: / 71. rida: @@
 === Nädal 10: Otsing ja Filtrid ===
-* [[Media:ITI0209_26_10_Search.pdf | Loenguslaidid ]]
+* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]
 * [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]
 === Nädal 11: Sisu ===
-<strong style="color:red">NB! 16. märtsi loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong>
+<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong>
 * Loenguslaidid: TBC
 * Praktikum: UX kirjutamise harjutus

@@ 11. rida: / 11. rida: @@
 == Üldine ülevaade ==
-<!--
+<strong style="color:red">NB! 16. märtsi loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong>
-<strong style="color:red">NB! 12. märtsi loengut kohapeal ei toimu. Loenguosa on lisatakse salvestisena kell 12:00. Praktikum toimub algusega 15:00 Teamsis</strong>
@@ 73. rida: / 72. rida: @@
 === Nädal 10: Otsing ja Filtrid ===
 * [[Media:ITI0209_26_10_Search.pdf | Loenguslaidid ]]
-* Praktikum: CSS eelprotsessorid - SASS
+* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]

@@ 65. rida: / 65. rida: @@
 * Esmaspäev 23.03 - 1. isesesiva töö tähtaeg
 * Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]
-* Praktikum - HTML raamistike tutvustus
+* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]
 === Nädal 9: Vormid ===

@@ 68. rida: / 68. rida: @@
 === Nädal 9: Vormid ===
-* [[Media:ITI0209_26__09_Forms.pdf | Loenguslaidid ]]
+* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]
-* [[Media:ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]
+* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]

@@ 64. rida: / 64. rida: @@
 === Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===
 * Esmaspäev 23.03 - 1. isesesiva töö tähtaeg
-* Loeng: [[Media:ITI0209_26_07_Design_Systems_Rules.pdf | Loenguslaid]]
+* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]
 * Praktikum - HTML raamistike tutvustus
 <!--

@@ 1. rida: / 1. rida: @@
 == Tähtajad ==
 <!--
@@ 37. rida: / 39. rida: @@
-'''Nõuded:''
+'''Nõuded:'''
 # 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)

@@ 41. rida: / 41. rida: @@
 # 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)
 # 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)
-# Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html`. Stiiliraamatus 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)
+# 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)
 # 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)
 # 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)

@@ 57. rida: / 57. rida: @@
 * Veendu et realiseeritud oleks kõik töö kohustuslikud osad ja prototüüp nii desktopis kui mobiilis.
 Kui mõni kohustuslik element on puudu, siis too see esile.
-* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmi
+* Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmis.
 <!--

@@ 19. rida: / 19. rida: @@
 == Kaastudengi töö hindamine ==
 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.
 Soovitusi hindamiseks:

@@ 55. rida: / 55. rida: @@
 * Märgi hindamisraportis mitu punkti hinnatav meeskond sai: iga alampunkti eest ja palju kokku.
 * Põhjenda ka sõnaliselt hinde moodutamist, vajadusel anna nõu mis on puudu.
-* Kui mõni kohustuslik element on puudu, siis too see esile.
+* Veendu et realiseeritud oleks kõik töö kohustuslikud osad ja prototüüp nii desktopis kui mobiilis.
 * Jaga hindamisraportit hinnatava meeskonnaga nii selle kirjutamise ajal kui siis kui valmi

@@ 73. rida: / 73. rida: @@
 * Flow: 1 punkt*
-** On loodud teenuse põhiflow, näiteks mingi toote ostmine, broneerimine jne
+** On loodud teenuse põhiflowd, näiteks mingi toote ostmine, broneerimine jne
 ** On selge algus ja loogiline lõpp
-* Wireframe/prototüüp: 8 punkti*
+* Wireframe/prototüüp: 9 punkti*
 ** Kandjad: Desktop ja mobiil. Vaikimisi peaks olema mobiil põhi-lähtekohaks
 ** Ekraani suurus ja responsiveness: on arvestatud

@@ 10. rida: / 10. rida: @@
 == Tähtajad ==
-Kodutöö tähtaeg on märtsi keskpaigas (täpsustub). Tähtaja-päeva õhtul jagab õppejõud tööd hindamiseks kaastudengitele. <!-- Tagasiside andmise tähtaeg on esmaspäev. 24 märts kell 23:59. Link iseseisva töö esitamiseks Moodles on: https://moodle.taltech.ee/mod/assign/view.php?id=368960  Palun tehke nii et igast meeskonnast esitab töö ainult üks liige.
+Kodutöö tähtaeg on esmaspäev 23. märts kell 12:00. Tähtaja-päeva õhtul jagab õppejõud tööd hindamiseks kaastudengitele. Tagasiside andmise tähtaeg on esmaspäev. 30 märts kell 12:00.
 == Hinde Moodustumine ==

@@ 62. rida: / 62. rida: @@
 * Praktikum: Individiaalsed konsultatsioonid
 <!--
-Nädal 8:
 Nädal 9: Disainisüsteem - Vormid

@@ 11. rida: / 11. rida: @@
 == Üldine ülevaade ==
 <strong style="color:red">NB! 12. märtsi loengut kohapeal ei toimu. Loenguosa on lisatakse salvestisena kell 12:00. Praktikum toimub algusega 15:00 Teamsis</strong>
 Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.
@@ 22. rida: / 25. rida: @@
 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 :)
 == Loengud ==
@@ 48. rida: / 50. rida: @@
 === Nädal 5: Protessi tulemid: Persoonad ===
 * Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]
 * Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ -->
-=== Nädal 6: Kasutatavuse Testimine ===
+=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===
-<strong>12. märtsi loengut auditooriumis ei toimu. Loenguosa on lisatakse salvestisena kell 12:00. Praktikum toimub algusega 15:00 Teamsis</strong>
+<!--
-* Loengusalvestis: Kursuse Teamsi kanalis
+Nädal 9: Disainisüsteem - Vormid
-* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]
+Nädal 10: Otsing ja Filtrid
-* Praktikum 15:00: Näidisprojekti tutvustus. Individuaalsed konsultatsioonid (Teamsis)
+Nädal 11: Sisu
 == Iseseisvad tööd ==