Kasutajaliidesed

Kursuse kood: ITV0130
Link: http://www.lambda.ee/index.php/Kasutajaliidesed or http://www.lambda.ee/index/itv0130
Õppejõud: Jaagup Irve
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425
Kursus varasematel aastatel: 2013 2012

Korraldusest

Loengutes selgitame kasutajaliideste arendamise põhimõtteid. Harjutustundide eesmärk on tutvustada laborite tegemiseks tarvilikke tehnilisi lahendusi. Praktikumis lahendame iga nädal mõnd konkreetset liidese ehitamisel ettetulevat probleemi (kui pole kodutööde esitamise nädal, sest siis tegeleme ainult sellega)

Tulemused

• Kasutajaliideste tulemuste koondtabel
• Mõnel tudengil on hinne kuigi punkte vähem kui 50. Kui hilinemistrahvi mittearvestamisel oli tulemus üle 50, sai aine läbitud.
• Kel on väga vähe punkte puudu kõrgemast hindest: kontrollige oma tunnitööd üle (võib-olla jäi postkastist midagi sisestamata); lisaks on võimalik teha ühiskondlikult kasulikku Vikipeedia täiendamist nende paari punkti nimel.
• Järelkontrolltööle pääsevad eelistatult tudengid, kel on töö tegemata, siis need kel on aine läbimata, siis need kes tahavad parandada tulemust.

• Palun lisakontrolltöö ajaks arvestuslikult reserveerida neljapäev: 29. mai; ruum ja aeg selguvad.
• [Järelkontrolltööle registreerumine]

Rühmad

• Rühmad
• Muudatuste tegemine ja lisamine e-posti teel.
• Rühm A: esmaspäev 16:00 ITC-404
• Rühm B: esmaspäev 17:45 ITC-401
• Rühm C: teisipäev 10:00 ITC-401

Hindest

Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist:

• Labor 1: Kasutajaliidese prototüüpimine staatilise HTML/CSS/Javascripti abil (30+3p) Tähtaeg: 17. märts (Rühmad A, B) ja 18. märts (Rühm C)
• Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) Serverirakenduse praktiline juhend Tähtaeg: 12. mai (Rühmad A, B) ja 13. mai (Rühm C)
• Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p) 19. mai

Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised.

Praktikumid

Esimene nädal praktikumi ei toimu, sest gruppidesse jagamine (vt grupid ülalpool)

1. Prototüüpimine paberil
2. Bootstrap
3. Kassid (esitamiseks 25.nda veebruari jooksul)
4. CSS elemente
5. Transition
6. Esimese labori esitamine
7. Mobiilvaate praktikum
8. Offline mobiiliapp
9. Dijkstra
   
10. Sqlite
    
11. CSS3 elemente

Videod

• CSSi tutvustusvideod

Kontrolltöö

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

Lugemist

• A List Apart: In Defence of Eye Candy - miks ilus liides on "parem".
• Spolsky: User Interface Design For Programmers - kontrollitundest, kasutajamudelist ja päris inimestest
• Brandon Walkin: Managing UI complexity - sellest kuidas asju kasutaja eest ära peita
• Ask Tog: First Principles of User Interaction Design - tee liides valmis ja loe see uuesti läbi
• Nielsen: 10 heuristilist kriteeriumit - liidese testimiseks
• UI-Patterns.com - parempoolne menüü
• Spolsky: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
• kuidas vormid koledaks lähevad ja vormide disainist

Tehniline

• 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 (vt http://www.w3schools.com/htmldom/default.asp).
• Cookied ja sessioonid (vt http://en.wikipedia.org/wiki/HTTP_cookie, http://www.quirksmode.org/js/cookies.html). Peab aru saama cookie põhimõtetest server-side ja aru saama javascripti näidetest cookiede kasutamise kohta. Programmeerimisülesannet selle kohta ei tule.
• Cgi protokoll (vt http://www.jmarshall.com/easy/cgi/). Peab aru saama, kuidas vormisisusid postitaktakse, mis vahe on GET ja POST protokollil.

Niisama huvitavat lugemist

• Redesigning Google: How Larry Page Engineered Beautiful Revolution - kuidas Google ennast hiljuti ümber ehitas
• Amazoni alam-menüü nipp
• Firefox developer tools - lahedusi Mozillalt
• RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)
• Windows User Experience Interaction guidelines - Win7
• UX Guidelines for Windows Store apps - Win 8
• iOS Human Interface Guidelines
• Android UI Design
• GNOME Human Interface Guidelines
• Kuidas iOS lapikumaks muutub aja jooksul
• Google Visual Asset Guidelines - Google'i ikonograafia loomisest
• Dark Patterns - salakavalatest kasutajaliidese mustritest.