Kasutajaliidesed võrgutehnoloogia baasil
Kursuse kood: ITV0030
Link: http://www.lambda.ee/index.php/Kasutajaliidesed_võrgutehnoloogia_baasil or http://www.lambda.ee/index/itv0030
Õppejõud: Tanel Tammet
Kontakt: tammet@staff.ttu.ee, 6203457, TTÜ AK223
Varasemate aastate arhiiv: 2009, 2008, 2007, 2006, 2005.
Sisukord
2011 kevadsemestri järelkontrolltöö
Kontrolltöö saab järgi teha neljapäeval, 19 mail kell 12 IT majas ruumis IT-140.
Kontrolltöö võimalikud makspunktid 34, hilinenud praktikumid annavad pooled punktid.
Tulemused 2011 kevad:
- O. Toming: kontrolltöö 21, hinne kokku 1.
- U. Maljutina: kontrolltöö 15, teine praks puudub, hinnet ei saa.
- P. Lavreshin: kontrolltöö 25, hinne kokku 1.
- A. Gorbatsh: kontrolltöö 4, praksid puuduvad, hinnet ei saa.
- M. Kopli: kontrolltöö 32, hinne kokku 2.
- M. Reinart: hinne kokku 2.
Tulemused
Prakside ja kontrolltöö tulemused ning koguhinde leiad siit tabelist.
NB! Kui sul on mõni prax tabelist puudu, valed hinded või mõni muu probleem, anna palun õppejõule võimalikult kiiresti teada!
Kontrolltöö
Kes ei saanud tulla 21 mail kontrolltööle, siis on veel võimalus teha kontrolltöö esmaspäeval, 7 juunil 9.00-12.00 ruumis VI-122.
Kursuse edukaks lõpetamiseks kohustuslik kontrolltöö toimub reedel, 21 mail kell 9.00-11.00.
Teemad, mille kohta tulevad küsimused:
- Kasutajaliidese põhimõtted (lugemiskontroll)
- Lehe- ja vormidisaini materjalide lugemiskontroll:
- [http://kurafire.net/log/archive/2007/06/22/pagination-101 pagination 101
- form design and as pdf slides
- CSS (vt http://www.w3schools.com/css/default.asp). Peab aru saama põhimõtetest ja näidetest. Konkreetsete omaduste ja atribuudite nimesid jne ei pea mäletama.
- 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.
- XML baasteadmised (vt http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas1.PPT, http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas2.PPT). Peab aru saama süntaksist.
- XSL baasteadmised (vt http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas3.PPT, http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas4.PPT). Peab aru saama lihtsamatest näidetest: mida XSL antud XML-i peal genereerib. Ise XSL-i kirjutada pole vaja osata.
Koht, aeg, tulemus
Semester: kevad
Tulemus: hindeline arvestus
Nõuded: kaks laboratoorset tööd ja kontrolltöö kursuse lõpus
Punkte: 2.5
Igal teisipäeval toimub kell 10.00 ruumis IT-140 loeng või harjutus. Igal paaritul kolmapäeval toimub ruumis IT-213a kell 14.00-15.30 praktikum rühmale IAPB48 ja kell 16-17.30 ruumis IT-213d rühmale IAPB42.
Goals
The goal of the course is studying/practicing ideas, methods and technology for building UI-s for web-based apps. We will focus on applications handling data, not marketing/information pages. Think catalogues, blogs, cms, reservation, e-commerce, financial apps, mashups etc. Creating the actual app, database schema, security and authentication solutions etc etc are not in the scope of the course.
The three themes of the course (with roughly equal importance) are:
- Nontechnical aspects of the UI: usability, structure, visual design.
- Browser technologies: html, css, javascript, dom. Ajax.
- Server-focused technologies: json, xml, xslt. REST, content aggregation and mashups.
We assume familiarity with html and basic server-side functionality: i.e. competence to create simple web apps.
Labs
Kursusel on kaks kohustuslikku laboratoorset tööd.
Töö teemaks: linnuvaatluse veebisüsteemi loomine.
Mõlemad laboratoorsed tööd realiseerivad siis seda ühte teemat: esimene töö ehitab dummy-ui ilma tegeliku serveripoolse rakenduse ja andmebaasita, teine lisab serveripoolse rakenduse ja andmebaasi.
- Esimene töö: Kasutajaliideste brauserirakendus. Tähtaeg: 30 märts.
- Teine töö on 2010 täpselt sama, mis 2009 aastal: Serverirakenduse praktiline juhend: 2009. Erinevus loomulikult selles, et rakenduseks on seesama linnuvaatlus, kuid serveripoolset osa see ei muuda. Tähtaeg: 18 mai.
Labwork may be done alone or in pairs. Groups of three, etc are not allowed. Each lab will be graded, and the grade will be worth 1/3 of the final grade. In order to succeed at the course, both labs plus the final test must be presented/passed. Lab presentations after the deadline will be worth 1/2 of the grade it would receive otherwise. All lab results must be presented on site during regular lab hours, both authors must be present. Email submissions are not accepted.
Loengud/harjutused
Loeng 2 veebruar: Sissejuhatav loeng: kursuse ülevaade, esimene laboratoorne töö. Materjale:
Loeng 9 veebruar: Esimese laboratoorse töö detailid. CSS-i sissejuhatuse jätk. Materjale:
- CSS tutorial
- css selector peatükk
- css 3 preview
- Doctype issues, quirks mode etc plus here
- official w3c css specs
Loeng 16 veebruar: CSS-i jätk. Materjalidest eeskätt http://www.w3schools.com/css/default.asp lõpupeatükid ja näited.
Loeng 23 veebruar: Lehekülje põhikomponentide variandid ja valikud kasutajamugavuse aspektist: loetelud, lehekülje splittimine, vormid. Kasutatud materjalid:
- splittimine: pagination 101 ja more pagination
- vormid: alusta form design ja kindlasti loe hoolega läbi põhjalik pdf kujul õpetus
- lisaks võiks vaadata how the form gets messed up ja form example gallery
Loeng 3 märts: Alustame javascriptiga.
- Main w3schools tutorials and reference:
- Wikipedias:
- Taustaks wolf, glossy, menu animation, lightbox, google chrome experiments
- Muud huvitavat
- old library comparison article
- crockford on javascript
UI design
To be extended later.
Collection:
Basic UI design principles: classics old and new
- in defence of eye candy
- Spolsky draft: great design
- Spolsky: User Interface Design For Programmers
- Spolsky: It's Not Just Usability
- Tognazzini: First Principles of Interaction Design.
More concrete and practical UI design principles
- web 2.0 style guide and current graph design guide
- 2.0 web style from 2006
- managing ui complexity
- web design conventions and rule breakers
- Jared Spool on design
- personality: one chapter from a book
- access by design: online book
- user in your face: short online book
Web app page structure and design, whitespace, colors etc:
- understanding visual organisation
- using white space
- using colors
- serious online book: use the content menu on the left
- good, short online book split into separate articles
Web app design details: pagination, forms, menus, measures:
- pagination 101
- more pagination
- form design and as pdf slides
- how the form gets messed up
- form example gallery
- recent menu trends
- grid system
Resource collections for finding more:
- best universal resource collection
- web page design resources
- UI ja funktsionaalsuse kujunduse põhimõtete kollektsioon
UI implementation: browser
Standards:
HTML, CSS and Javascript tutorials:
- HTML tutorial
- First CSS intro
- CSS tutorial
- full CSS book in pdf
- Javascript tutorial 1
- Tutorial: javascript + css + html
- Westciv CSS book
- Westciv CSS tutorial
Concrete UI widgets:
- using lists with css
- classic 'sons of suckerfish' css menu article
- css selectors: underlying technology for css menus
- tutorial for css selectors
- classic css menu example
- small up-to-date css menu tutorial
- huge css menu gallery/selection
Javascript libraries:
HTML dom in general:
Creating innerhtml and elements using HTML dom:
- http://www.tizag.com/javascriptT/javascript-innerHTML.php
- http://www.javascriptkit.com/domref/elementmethods.shtml
- http://www.byteclub.net/wiki/index.php?title=Javascript_createElement
- http://www.adp-gmbh.ch/web/js/elements/createelement.html
- http://javascript.about.com/library/bldom10.htm
- http://onlinetools.org/articles/unobtrusivejavascript/chapter3.html
Javascript graphics with SVG:
Javascript graphics with css and canvas:
- http://www.abrahamjoffe.com.au/ben/canvascape/
- http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
- http://ajaxian.com/archives/new-javascriptcanvas-graph-library
- http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
- http://caimansys.com/painter/index.html
- http://me.eae.net/archive/2005/12/29/canvas-in-ie/
Ajax:
- ajax: wikipedia overview
- classic ajax tutorial with necessary details
- a simple ajax tutorial
- ajax tutorial from w3schools
Json:
Articles, ideas, howtos:
Resource collections:
Server-centric
To be filled later.