@@ 1. rida: / 1. rida: @@
-{{UI}}Kursuse kood: <b>ITV0209</b><br>
+aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2020]]<br>
-Link: https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br>
-Õppejõud: Martin Verrev, [https://www.linkedin.com/in/kristian-lember-254a2a6a/ Kristian Lember]<br>
-Kontakt: martin.verrev@taltech.ee, TTÜ ruum ICT-422<br>
-aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITV0130))_2019]]<br>
-Jooksva info edastamiseks ja üldistele küsimustele vastamiseks on kursusel [https://kasutajaliidesed2020.slack.com/ Slacki kanal] millega saab liituda kasutades  [https://join.slack.com/t/kasutajaliidesed2020/shared_invite/zt-cq8869pf-GCh3slkgv_PDDu4OyTTVBA seda linki] <b>(link uuendatud)</b>
-== <span color="red">Kursuse toimumine karantiiniperioodil</span> ==
-Karantiiniperioodil toimuvad loengud otseülekande/salvestiste vahendusel. Jooksvatele küsimustele vastamiseks on Slackis kanal "loengus-tekkinud-küsimused"
-'''21. mai konsultatsiooniks ja kaitsmiseks''' palun lisada ennast nimekirja Google Forms'i kaudu. Registreerimisvorm on kättesaadav siit: https://forms.gle/8NY7V4RKDGT3EHZq7
-Registreerimisvormi tulemusel tekib nimekiri tudengitest, kellega õppejõud ja abiõppejõud järjekorras läbi Slacki videokõne ühendust võtavad. Kaitsmisjärjekord muutub avalikuks ka tudengitele, kes saavad ennustada millal nendega umbkaudu ühendust võetakse arvestusega et kaitsmisi võtab vastu 3 inimest ja arvestuslikult on planeeritud ühele tudengile 5 .. 8 minutit.
-Juhul kui sa ei ole veel Slackiga liitunud ja registreerimislink on aegunud, kirjuta martin.verrev@taltech.ee
-== Aeg, koht, tulemus ==
-Loeng toimub igal teisipäeval kell 16:00-17:30  U05-103, alates 31.03 kell 18:00 .. 19:30 kursuse Zoomi kanalis.
-Praktikumid toimuvad eri gruppidele kahel erineval ajal. Esimesel nädalal on juhendaja Martin Verrev ja Kristian Lember, edasi on praktikumides abiks abiõppejõud.
-NB! Praktikumide eesmärgiks on teha ise ülesande kallal tööd, küsida juhendajalt probleemide korral abi ja esitada valmis või osaliselt valmis töid juhendajale. Praktikumides enamasti ei esitata üldist infot/materjale/näiteid kõigile vaatamiseks: selleks on loeng.
-- neljapäeval kell 10:00 ruumis ICT-122
-- neljapäeval kell 12:00 ruumis ICT-122
-Kursus lõpeb hindelise arvestusega. Hinne sõltub kursuse jooksul tehtud praktikumide tulemustest (60%) pluss kursuse lõpus toimuva kontrolltöö tulemustest (40%).
-'''Juhime kõigi praktikumijuhendajate poolt tähelepanu, et praktikumitöö arvestamine ja hindamine toimub ainult sinu grupi ajal! Muude gruppide aegadel võetakse töid vastu ainult juhul, kui ei ole kedagi õigest grupist, kes sooviks tööd esitada / konsulteerida, st reeglina mitte arvestuse viimasel nädalal.'''
-Loengute järelevaatamiseks kasutage seda linki: https://echo360.org.uk/section/0555d50c-6171-4ce0-a79d-fae7f21715e8/public
-== Hindamine ==
-[[Pilt:ITV0130-Excel-error.png|right]]
-Aine hinnatakse 100 punkti skaalal; saadaval olevate punktide hulk on veidi suurem. Punktid kogutakse semestri jooksul ja jaotuvad:
-* 15 punkti: [[UI:Kodutöö 1 |Kodutöö 1: Kasutajavood ja staatiline prototüüp. Kasutajatestimine.]]  17. veebruari nädal.
-* 15 punkti: [[UI:Kodutöö 2 |Kodutöö 2: HTML Prototüüp ja CSS raamistikud.]]  18. märtus nädal
-* 15 punkti: [[UI:Kodutöö 3 |Kodutöö 3: Funktsionaalne prototüüp ja Vue.js]] 20. aprilli nädal
-* 15 punkti: [[UI:Kodutöö 4 |Kodutöö 4: Andmete visualiseerimine]] 14. mai nädal
-* 40 punkti: [[UI: Projekti lõppraport]] 21. mai nädal
-Iga töö annab 0-15 punkti. <font color="red">Hilinenud tööd annavad poole punktidest.</font> Töid võib (ja on soovitav) esitada enne tähtaega.
-<font color="red">'''NB!'''</font>Kui sinu praktikum on õigeaegselt arvestatud, siis saad esitada täiendusi kuni nädalalani enne järgmise praktikumi tähtaega, ilma pooli punkte kaotamata.
-* Kui sinu praktikum ei ole õigeaegselt arvestatud, siis on sul esitamiseks aega veel nädalani enne järgmise praktikumi tähtaega, aga selliselt hilinenud praks annab ainult pooled punktid.
-* Oma tööd saad arvestuseks esitada <b>ainult</b> oma rühma praksi ajal. Lihtsalt nõu ja abi saad küsida ka teistel aegadel. Kui sa ei ole üheski rühmas, siis on esimene kaitsmisaeg vaba aga hiljem hakkad oma töid kaitsma selle rühma juures kus kaitsesid esimese töö.
-Kõik tööd tuleb esitada ise TTÜ arvutiklassis: emailiga saadetud töid ei vaadata. Kasutada võib nii klassi arvuteid kui oma arvutit, brauser ja operatsioonisüsteem on vabalt valitavad. Programmeerimstööde presenteerimiseks tuleb kasutada ülikooli serverit dijkstra: kõiki prakse vaatavad õppejõud ainult sealt serverist. Kindlasti loe [[Dijkstra server|dijkstra serveri kasutamise õpetust]].
-Kursuse edukaks läbimiseks ja kontrolltööle pääsemiseks peavad kõik kohustuslikud praktilised tööd olema tehtud.
-== Kontroltöö ==
-Kursuses on peale praktikumide ka üks kohustuslik kontrolltöö, mis toimub peale semestri viimast nädalat ja annab maksimaalselt 40 punkti. Kontrolltööle pääsemiseks pead olema vähemalt 1-le punktile kaitstud kõik praktikumitööd. Edukaks sooritamiseks pead kontrolltöös saama vähemalt 51% kogupunktisummast ja kogu kursuse eest (praktikumid+kontrolltöö) vähemalt 51 punkti. Kontrolltööd saab kirjutada ühel korral.
-Alla 50% kontrolltöö tulemus tähendab ebaõnnestumist. Kui selleks vajadus tekib saab kontrolltöö ühel korral uuesti kirjutada.
-<strong font color="red">Seoses eriolukorraga suure tõenäosusega kontrolltööd sellisel kujul ei toimu ja see asendatakse iseseisva tööga.</strong>
-<!--
-'''Kontrolltööle võtke kaasa pildiga dokument'''
-=== Kontroltöö sisu ===
-Kontrolltöö eesmärgiks on kontrollida kursuses läbitud teemadest sisulist arusaamist. Seal on nii vabatekstis kui valikvastustega küsimusi ja lihtsamaid programmeerimisülesandeid. Konkreetsed klasside nimed, teekide nimed, teegifunktsioonide nimed jne ei ole kontrolltöö teema: need antakse ülesandes ette või võite kasutada umbkaudset nime.
-Oskused ülesannete lahendamiseks peaks olema automaatselt kõigil, kes on praktikume süvenemisega teinud.
-Kontrolltöö punktid lisanduvad praktikumi punktidele.
-=== Teemade loend ===
-Siin on esitatud valik teemasid mis kontrolltöösse tulla võivad. Oluline on sisuline arusaamine, mite
-* Kasutajateekond, flow
-* Layout
-* Grid
-* Navigatsioon (nupud, menüü jne)
-* Keskkonna struktuur
-* CTA (Call to Action)
-* Pealkirjade hierarhia
-* Kasutajatestimine
-* Gestaltprintsiibid, hea lühikokkuvõte on siin: http://www.paberimuuseum.ee/disainiABC/site/lesson3-1.html
-* HTML raamistikud, lihtsamad programmeerimisülesanded teie poolt valitud raamistikel
-* Lehe kohandamine mobiilivaadetele
-* CSS eelprotsessorid
-* BEM
-* Veebikomponendid, shadow-DOM
-* Lihtsam Vue/React
-* KPI-d
--->
-== Loenguslaidid ==
-* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit#slide=id.g76a0b8990d_0_6 Ülevaade disainiprotsessist]
-* Loeng 2: [https://docs.google.com/presentation/d/1tmtFrQVCvyffwnKDu9Ala504hbdaiap9zGDD1KBAw8M/edit?fbclid=IwAR0DCzhSj5ENs7cqxeuba1seSNFAWMS8MjwyG2JA5UbFMInxQ8OZBr9bEL4#slide=id.p Projekt, näited, tööriistad]
-* Loeng 3: [https://www.beautiful.ai/deck/-LXO_WhqKYVnDhCfnn7M/ITV0130-CSS-raamistlikud Kasutajaliideste arendaja roll. CSS raamistikud]
-* Loeng 4: Rakenduse testimine
-* Loeng 5: [https://www.beautiful.ai/deck/-L_TKpi0_FhW60VKz-1Y/ITV0130-CSS-SASS-LESS Hallatav CSS. Eelprotsessorid]
-* Loeng 6: [https://www.beautiful.ai/deck/-LaHEUnlSRf679jiuxwm/ITV0130-BEM Hallatav CSS. BEM]
-* Loeng 7: [https://www.beautiful.ai/deck/-LaqnjrE3g0a_NhCU7Y1/ITV0130-Web-Components Hallatav HTML. Sissejuhatus veebikomponentidesse]
-* Loeng 8: Veebikomponentide jätk.
-* Loeng 9:  [https://www.beautiful.ai/deck/-Lc-f1fSqwKBlQ-7fpVD/ITV0130-Component-Frameworks-VueJS Sissejuhatus Vue-sse]
-* Loeng 10: Vue rakenduse struktuur. Vue CLI.
-* Loeng 11: Oleku haldus Vue rakenduses. VueX
-* Loeng 12: Sisendi valideerimine Vue rakenduses. Rakenduse pakendamine.
-* Loeng 13: [https://www.beautiful.ai/-M5RMk8iZjbhIVodZtTs/1 JAMStack, SSG]
-* Loeng 14: [https://www.dropbox.com/s/29ax74hkc0giz88/ITI0209_Lecture13_Data_Visualization.pdf?dl=0 Andmete visualiseerimine ]
-* Loeng 15: [https://www.dropbox.com/s/jacvke79i0j3zjs/ITI0209_Lecture14_Practical_Visualization_Echarts.pdf?dl=0 Visualiseerimine - Praktiline Echarts.]
-* Loeng 16: [https://www.dropbox.com/s/0815ypd9ic7n35r/ITI0209_Summary.pdf?dl=0 Kokkuvõte]
-<!--
-* Loeng 14: Andmete visualiseerimine. Jätk
-* Loeng 15: Sisuloome. Animeerimine
-* Loeng 16: Ebatraditsioonilised kasutajaliidesed. Kokkuvõte.
--->
-<!--
-== Eelmise aasta loenguslaidid ==
-Loengute videosalvestised on kättesaadavad [https://echo360.org.uk/section/3c82e893-acf4-4e75-ac23-6bc45861d5fb/public sellelt lingilt].
-* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit Sissejuhatus disaini]
-* Loeng 2: [https://docs.google.com/presentation/d/1dIfQab7ns7mhZFyDzsgdx6ff8jbjQ-n1tC8XTXt4CLQ/edit Kasutajakogemuse disain: UX]
-* Loeng 3: [https://docs.google.com/presentation/d/1qVjyJo-r206XstoH4U6kAStwpMEf9K_7ZR4_esp7y4Y/edit Kasutajakogemuse disain: Wireframe]
-* Loeng 4: [https://docs.google.com/presentation/d/1t2tICnUFY2isBphGHjj_3pitG8fHOWmPUCb0GrBSGu8/edit Kasutajakogemuse disain: Wireframe. Prototüüp. Testimine.]
-* Loeng 5: [https://www.dropbox.com/s/1ezpk23ypjsnize/ttu_visualdesign.pdf?dl=0 Visuaalne disain graafilise kasutajaliidese kontekstis]
-* Loeng 6: [https://www.beautiful.ai/deck/-LXO_WhqKYVnDhCfnn7M/ITV0130-CSS-raamistlikud Kasutajaliideste arendaja roll. CSS raamistikud]
-* Loeng 7: [https://www.beautiful.ai/deck/-L_TKpi0_FhW60VKz-1Y/ITV0130-CSS-SASS-LESS Hallatav CSS. Eelprotsessorid]
-* Loeng 8: [https://www.beautiful.ai/deck/-LaHEUnlSRf679jiuxwm/ITV0130-BEM Hallatav CSS. BEM]
-* Loeng 9: [https://www.beautiful.ai/deck/-LaqnjrE3g0a_NhCU7Y1/ITV0130-Web-Components Hallatav HTML. Sissejuhatus veebikomponentidesse]
-* Loeng 10: Veebikomponentide jätk
-* Loeng 11: [https://www.beautiful.ai/deck/-Lc-f1fSqwKBlQ-7fpVD/ITV0130-Component-Frameworks-VueJS Komponendiraamistikud. Vue.js]
-* Loeng 12: Vue.js jätk
-* Loeng 13: Vue.js + NPM. SPA.
-* Loeng 14: [https://www.beautiful.ai/deck/-LdOegkRcVwgqH_1nyUQ/ITV0130-Telling-Stories-with-Data Andmete visualiseerimine. Dashboard.]
-* Loeng 15: [https://www.beautiful.ai/deck/-LeE9qoHCMB682wZ83SQ/ITV0130-SVG-Animations SVG. Animatsioonid]
-* Loeng 16: Kontrolltöö
--->
-== Viidete kogu ==
-===Koodinäiteid===
-'''Uuendatud 2020 aasta koodinäited''' on kättesaadavad [https://github.com/martinve/iti0209_kasutajaliidesed Githubist]
-Varasemad koodinäited on kättesaadavad siit: [https://github.com/martinve/itv0130 Kursuse koodinäiteid Githubis]
-===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.
-* Flexboxist: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-* HTML DOM põhipunktid
-===Kuulamist===
-* 16.04 [https://digi.geenius.ee/raadiosaade/algorytm/16-04-algorutm-kuidas-arendaja-ja-disainer-koos-tootada-saavad/ Algorütm: Kuidas arendaja ja disainer koos töötada saavad?]
-== Niisama huvitavat lugemist ==
-''Kontrolltöö eel siit õppida pole tarvis; siin on lihtsalt lahedused''
-* [[Noppeid (ITV0130)|Noppeid]] - ekraanipiltide kogu
-* [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://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
-* [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://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]]

Erinevus lehekülje "Kasutajaliidesed (ITI0209)" redaktsioonide vahel

Redaktsioon: 25. jaanuar 2021, kell 20:17

Navigeerimismenüü

Otsing