Kasutajaliidesed (2013): erinevus redaktsioonide vahel
Mine navigeerimisribale
Mine otsikasti
Resümee puudub |
|||
| (ei näidata sama kasutaja 31 vahepealset redaktsiooni) | |||
| 2. rida: | 2. rida: | ||
Link: http://www.lambda.ee/index.php/Kasutajaliidesed or http://www.lambda.ee/index/itv0130<br> | Link: http://www.lambda.ee/index.php/Kasutajaliidesed or http://www.lambda.ee/index/itv0130<br> | ||
Õppejõud: Jaagup Irve<br> | Õppejõud: Jaagup Irve<br> | ||
Kontakt: jaagup.irve@ttu.ee, TTÜ | Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425<br> | ||
Kursus varasematel aastatel: [[Kasutajaliidesed (2012)|2012]] | Kursus varasematel aastatel: [[Kasutajaliidesed (2013)|2013]] [[Kasutajaliidesed (2012)|2012]] | ||
| 10. rida: | 10. rida: | ||
== Korraldusest == | == Korraldusest == | ||
Loengutes selgitame kasutajaliideste arendamise põhimõtteid. | 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) | ||
== Hindest == | == Hindest == | ||
Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist: | Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist: | ||
* Labor 1: [[UI Prototüüp|Kasutajaliidese prototüüpimine]] staatilise HTML/CSS/Javascripti abil (30+3p) | * Labor 1: [[UI Prototüüp|Kasutajaliidese prototüüpimine]] staatilise HTML/CSS/Javascripti abil (30+3p) | ||
* Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) [[Serverirakenduse praktiline juhend | * Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) [[Serverirakenduse praktiline juhend] | ||
* Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p) | * Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p) | ||
Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised. | Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised. | ||
== Praktikumid == | == Praktikumid == | ||
| 30. rida: | 28. rida: | ||
# [[UI:CSS elemente|CSS elemente]] | # [[UI:CSS elemente|CSS elemente]] | ||
# [[UI:Transition|Transition]] | # [[UI:Transition|Transition]] | ||
# | # [[UI:Dijkstra|Dijkstra]]<br/> | ||
# [[UI: | # [[UI:Sqlite|Sqlite]]<br/> | ||
# [[UI:CSS3 elemente|CSS3 elemente]] | |||
# [[UI:CSS Speech|CSS Speech]] | |||
== | == Videod == | ||
* [https://www.youtube.com/playlist?list=PLMQzXA1f24AdPMsiYydc4rcAtHN-MiC6D&feature=view_all CSSi tutvustusvideod] | * [https://www.youtube.com/playlist?list=PLMQzXA1f24AdPMsiYydc4rcAtHN-MiC6D&feature=view_all CSSi tutvustusvideod] | ||
== | == Kontrolltöö == | ||
Kontrolltöö toimub 13. mail loengu ajal, loengu ruumides. Kontrolltöö sisuks on alltoodud materjalide lugemiskontroll ning tehniliste küsimuste lahendamine. | |||
''' Lugemist ''' | |||
* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem". | * A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem". | ||
| 44. rida: | 48. rida: | ||
* Ask Tog: [http://www.asktog.com/basics/firstPrinciples.html First Principles of User Interaction Design] - tee liides valmis ja loe see uuesti läbi | * Ask Tog: [http://www.asktog.com/basics/firstPrinciples.html 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 | * Nielsen: [http://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristilist kriteeriumit] - liidese testimiseks | ||
* [http://ui-patterns.com/ UI-Patterns.com] - parempoolne menüü | |||
* [http://www.joelonsoftware.com/articles/Unicode.html Spolsky: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)] | |||
* [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] | |||
''' 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. | * 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. | ||
| 54. rida: | 61. rida: | ||
* Cgi protokoll (vt http://www.jmarshall.com/easy/cgi/). Peab aru saama, kuidas vormisisusid postitaktakse, mis vahe on GET ja POST protokollil. | * 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 == | ||
* [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://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://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp] | ||
* [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt | * [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt | ||
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)] | |||
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf Riigi veebi koosvõime raamistik] | |||
* [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.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. | |||
[[Kategooria:Kasutajaliidesed]] | [[Kategooria:Kasutajaliidesed]] | ||
Viimane redaktsioon: 31. jaanuar 2014, kell 22:59
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)
Hindest
Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist:
- Labor 1: Kasutajaliidese prototüüpimine staatilise HTML/CSS/Javascripti abil (30+3p)
- Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) [[Serverirakenduse praktiline juhend]
- Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p)
Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised.
Praktikumid
- Prototüüpimine paberil
- Bootstrap
- Kassid
- CSS elemente
- Transition
- Dijkstra
- Sqlite
- CSS3 elemente
- CSS Speech
Videod
Kontrolltöö
Kontrolltöö toimub 13. mail loengu ajal, loengu ruumides. Kontrolltöö sisuks on alltoodud materjalide lugemiskontroll ning tehniliste küsimuste lahendamine.
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)
- Riigi veebi koosvõime raamistik
- Windows User Experience Interaction guidelines - Win7
- UX Guidelines for Windows Store apps - Win 8
- iOS Human Interface Guidelines
- GNOME Human Interface Guidelines
- Kuidas iOS lapikumaks muutub aja jooksul
- Google Visual Asset Guidelines - Google'i ikonograafia loomisest
- Dark Patterns - salakavalatest kasutajaliidese mustritest.