Verrev: Uus lehekülg: '{{UI}}Kursuse kood: ITV0130
Link: https://courses.cs.ttu.ee/pages/ITV0130
Õppejõud: Jaagup Irve
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425
Kursus var...'

2019-01-28T22:53:26Z

Uus lehekülg: '{{UI}}Kursuse kood: ITV0130 Link: https://courses.cs.ttu.ee/pages/ITV0130 Õppejõud: Jaagup Irve Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425 Kursus var...'

Uus lehekülg

{{UI}}Kursuse kood: ITV0130 
Link: https://courses.cs.ttu.ee/pages/ITV0130 
Õppejõud: Jaagup Irve 
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425 
Kursus varem: [http://lambda.ee/w/index.php?title=Kasutajaliidesed&oldid=14266 2017] 

== Tulemused ==

* OISi jõuavad neljapäeva hommikul; kinnitamisele lähevad reedel
* [https://docs.google.com/spreadsheets/d/e/2PACX-1vSfQACpS6wv8_XSwfhikO_B9indE-s65WLjb0pFf2di6hXaNBdqV_xitzLcFLEkXDAJtZG5MuSp_amn/pubhtml?gid=1704313765&single=true Esialgsed tulemused]

== Hindamine ==
[[Pilt:ITV0130-Excel-error.png|right]]
Aine hinnatakse 100 punkti skaalal; saadaval olevate punktide hulk on veidi suurem. Punktid jaotuvad:

* 0-10 punkti: kaastöö praktikumides (iga nädal 1 punkt; töö paarilisega või üksi)
* 10-20 punkti: Kodutöö 1
* 10-20 punkti: Kodutöö 2
* 10-20 punkti: Kodutöö 3 (kodutöö võib esitada üksi või koos paarilisega; edukal kaitsmisel saab vähemasti pooled punktid)
* 0-40 punkti: kontrolltöö (javascripti ülesannete absurdselt halb sooritus võib seada hindele laeks 3)

Kodutööde hindamisel kasutatakse konkreetsemat punktitabelit, kus alamkategooriate hindamine vahemikus 0-3 tagab tihti hinde samasuse ka kordushindamisel.

Plagiaat; teiste tudengite tööde esitamine muudetud moel ja muu jura edastatakse dekaanile menetlemiseks.

Kursuse kordajatele: varasemate aastate kontrolltöö hinde võib paluda otse üle kanda.

== Praktikumid ==

{{Itv0130-praktikumid}}

== Kodutöö ==
* [[UI:Kodutöö 1 (2018)|Kodutöö 1: Elukohast teatamise vorm]] - 28 veebruar tagasiside, 7. märts esitamine.
* [[UI:Kodutöö 2 (2018)|Kodutöö 2: Bürokraatia (mäng)]] - 4. aprill testimine-eelkaitsmine, 11. aprill esitamine.
* [[UI:Kodutöö 3 (2018)|Kodutöö 3: Hindamisprotseduur]] - 2. mai testimine-eelkaitsmine, 9. mai esitamine

== Loengud ==

[https://echo360.org.uk/section/693833b3-8a53-4c25-9b2c-009a7c9a0105/public Loengute videod] (halvasti sorditud)

# Korraldusest; Fitt'i seadus, purjus inimese liides, kasutajamudel, liideste hindamine ([[Media:UI2018_L1.pdf|PDF]])
# Kasutajaliidesed programmeerijale; Sobimus; Kodutööst; Visuaaldisainist ([[Media:UI2018_L2.pdf|PDF]])
#* [https://www.joelonsoftware.com/2001/10/24/user-interface-design-for-programmers/ Kasutajaliidesed programmeerijale]
#* [https://et.wikipedia.org/wiki/Sobimus Sobimus (''affordance'')]
#* [https://www.blenderguru.com/tutorials/understanding-colors Understanding Colors]
# [https://youtu.be/orjea53ikds Vue.js] (loengu asemel on video, sest haigus)
# Müra kahandamine; vormidest. (Eelmisest õhus: kompositsioonist)
#* [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Liidese näilisest keerukusest]
#* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface/ Kuidas konfliktsed huvid vormid koledaks teevad]
#* [https://www.lukew.com/ff/entry.asp?1502 Vormide paigutusest]
# Tekstide kirjutamine, lugemine, struktureerimine.
#* [https://www.ttu.ee/tugistruktuur/veebitugi-4/sisuloome-tugi/sisuteksti-koostamine-2/ Sisuteksti koostamine]
# Kasutajaliidese koostamise alusprintsiipidest; Inimese mälu eripäradest liidestes (meil on lühi, pikaajaline, protseduuriline ja episoodiline mälu; töömälu 4 +/- 1 seostumatut ühikut, sellest lähtuvalt peame töömälu toetama)
#* [http://asktog.com/atc/principles-of-interaction-design/ First Principles of Interaction Design] - (Esteetika, Ootused, Iseseisvus, Värvid)
# Kasutajaliidese testimisest ([[Media:UI2018_L7.pdf|PDF]])
#* [https://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristics for User Interaction Design], Nielsen
# Kasutajaliidese koostamise alusprintsiipidest II; Pikaajaline mälu (liidestes mõjutab see paroolide meeldejätmist peamiselt ja korduvaid operatsioone)
#* [http://asktog.com/atc/principles-of-interaction-design/ First Principles of Interaction Design] - (Järjepidevus, Vaikimisi valikud, Avastatavus, Fittsi seadus, Inimliidese elemendid, Viiteaja haldamine)
# Kasutajaliidese koostamise alusprintsiipidest III; Animatsioonide ajastustest ja iseloomust
#* [http://asktog.com/atc/principles-of-interaction-design/ First Principles of Interaction Design] - (Õpitavus, metafoorid, Töö kaitsmine, Loetavus, Lihtsus, Olek, Nähtav liides)
#* Animatsioonide ajastustest ja iseloomust [https://material.io/guidelines/motion/material-motion.html Material Design'i näitel] (Duration & Easing, Movement, Choreography)
# ''Reactive programming'' kui viis liideses andmevooga arvutusi teha.
#* [https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 The Introduction to Reactive Programming You Have Been Missing] - tunnis tehtud näide oli analoogne Twitteri näitega siin
#* [https://medium.com/@urschanselmann/reactive-programming-an-introduction-for-game-developers-f7da00edb424 Unity näide] - koodinäide on Unity3d kontekstis relevantne, aga põhjendused on väga hästi illustreeritud
#* [https://jsfiddle.net/jirve/bmb7zrhe/ Tunni näide] - lihtne ajastatud klõpsimine, kus mudel täieneb kohe, aga visuaal väikese hilistumisega
# Tarkvara tõlkimisest
#* [https://hasso.tepper.pri.ee/2013/09/motteid-tarkvara-tolkimisest-vol-1/ Hasso Tepper: Tarkvara tõlkimisest vol1]
#* [https://sander85.com/download/vaba_tarkvara_tolkimine_eestis.pdf Tarkvara tõlkimine Eestis]
#* [https://viki.pingviin.org/Stiilijuhend_tarkvara_t%C3%B5lkimiseks Stiilijuhend]
# Tarkvara hõlbustusfunktsioonid
# Liidese andmete liigutamise paremad praktikad. Vuex.js
# Kodutööde ülevaatamine ja Disco Elysiumi liidese arendusest (ei ole järelvaadatav)
# Kontrolltööst
# Kontrolltöö (võimalusel kahes auditooriumis)

== Kontrolltöö ==

Kontrolltöö toimub viimase loengu päeval, loengu ruumides. Kontrolltöö sisuks on alltoodud materjalide lugemiskontroll ning HTML/javascripti tehniliste küsimuste lahendamine paberil.

Kõhurääkijate ja mobiilinokkijate tööd võtan ära ja ei hinda. Tööd saab teha üks kord (topelt-käimisel teist tööd ei hinda).

== Viidete kogu ==

''Siit on mõistlik õppida''

===Lugemist===

* Spolsky: [http://www.joelonsoftware.com/uibook/fog0000000249.html User Interface Design For Programmers] - kontrollitundest, kasutajamudelist ja päris inimestest
* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem".
* Brandon Walkin: [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Managing UI complexity] - sellest kuidas asju kasutaja eest ära peita
* Ask Tog: [http://asktog.com/atc/principles-of-interaction-design/ First Principles of User Interaction Design] - tee liides valmis ja loe see uuesti läbi
* Nielsen: [http://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristilist kriteeriumit] - liidese testimiseks
* [http://ui-patterns.com/patterns UI-Patterns.com] - input, navigation, data
* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface/ kuidas vormid koledaks lähevad] ja [http://www.lukew.com/ff/entry.asp?1502 vormide disainist]
* [https://viki.pingviin.org/Stiilijuhend_tarkvara_t%C3%B5lkimiseks Stiilijuhend tarkvara tõlkimiseks]
* [https://www.ttu.ee/tugistruktuur/veebitugi-4/sisuloome-tugi/sisuteksti-koostamine-2/ Sisuteksti koostamine]

===Tehniline===

''Kontrolltöö mõttes tasub mõelda praktikumi- ja kodutööde mahus.''

* CSS (vt http://www.w3schools.com/css/default.asp). Peab aru saama põhimõtetest ja näidetest. Konkreetsete omaduste ja atribuudite nimesid ise välja ei pea mõtlema.
* Javascript (vt http://www.w3schools.com/js/default.asp). Peab aru saama väikestest näidetest a la js inclusion, vormist teksti kättesaamine ja muutmine, domi kättesaamine ja muutmine. Ei pea oskama erinevaid teeke.
* Json/ajax (vt http://www.w3schools.com/ajax/default.asp). Peab oskama kirjutada väikese JSONi kasutava ajaxi näite. Väike progeülesanne.
* HTML DOM põhipunktid

== Niisama huvitavat lugemist ==

''Kontrolltöö eel siit õppida pole tarvis; siin on lihtsalt lahedused''

* [[Noppeid (ITV0130)|Noppeid]] - ekraanipiltide kogu
* [https://www.codeschool.com/courses/shaping-up-with-angular-js Shaping up with angular] - imeline angulari veebikoolitus (aga spämmib teid pärast rohkelt äraütlemisvõimalusega)
* [http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution Redesigning Google: How Larry Page Engineered Beautiful Revolution] - kuidas Google ennast hiljuti ümber ehitas
* [http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp]
* [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt
* [http://www.trinidad.ee/public/materjalid/Kasutajakeskse_veebi_lehekylgede_disain.pdf RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)]
* [http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx Windows User Experience Interaction guidelines] - Win7
* [http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx UX Guidelines for Windows Store apps] - Win 8
* [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html iOS Human Interface Guidelines]
* [https://developer.android.com/design/index.html Android UI Design]
* [https://developer.gnome.org/hig-book/stable/ GNOME Human Interface Guidelines]
* [https://medium.com/product-design/5ccef7b3e1fc Kuidas iOS lapikumaks muutub aja jooksul]
* [http://www.behance.net/rogeroddone Google Visual Asset Guidelines] - Google'i ikonograafia loomisest
* [http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you Dark Patterns] - salakavalatest kasutajaliidese mustritest.
* [https://medium.com/@zmh/bye-google-maps-ea3ea10f84dc CityMapper vs Google Maps] - UX võrdlus
* [http://www.allenpike.com/2014/schrodingers-shift-key/ iOS 8 ja shift]
* [https://xss-game.appspot.com/ Cross-Site Scripting] - tore mäng turvaprobleemidest kasutajaliidese ehitamisel
* [http://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/ Vihakõne PHP suunal] - väga must huumor
* [http://blog.martindoms.com/2011/01/24/poor-ui-design-can-kill/ Kuidas lennuk valesti disainiti ja inimesed katki läksid sellest]
* [http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name How Apple Is Giving Design A Bad Name] - kuidas Apple oma liideste disainiga veidi rappa on jõudnud
* [https://www.npmjs.com/package/jade Jade - miinimumsüntaksiga HTML]
* [http://sass-lang.com/guide Sass - miinimumsüntaksiga CSS]
* [https://www.fastcodesign.com/90157153/don-norman-what-went-wrong-in-hawaii-human-error-nope-bad-design Havai tuumahoiatus ja disain]
* [https://medium.com/@urschanselmann/reactive-programming-an-introduction-for-game-developers-f7da00edb424 Reactive Programming for Game Developers]
* [https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 The introduction to Reactive Programming you've been missing]
* [https://hasso.tepper.pri.ee/2013/09/motteid-tarkvara-tolkimisest-vol-1/ Hasso Tepper: Tarkvara tõlkimisest vol1]
* [https://sander85.com/download/vaba_tarkvara_tolkimine_eestis.pdf Tarkvara tõlkimine Eestis]
* [https://viki.pingviin.org/Stiilijuhend_tarkvara_t%C3%B5lkimiseks Stiilijuhend]
* [https://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/ Kui liidese disain läbi kukub, on kasutaja tihti leidlik.]

[[Kategooria:Kasutajaliidesed]]

ITV0130 2018 - Redigeerimiste ajalugu

Verrev: Uus lehekülg: '{{UI}}Kursuse kood: ITV0130 Link: https://courses.cs.ttu.ee/pages/ITV0130 Õppejõud: Jaagup Irve Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425 Kursus var...'

Verrev: Uus lehekülg: '{{UI}}Kursuse kood: ITV0130
Link: https://courses.cs.ttu.ee/pages/ITV0130
Õppejõud: Jaagup Irve
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425
Kursus var...'