Itv0030 2009
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
NB! Tegemist on 2009 kevadsemestri arhiiviga, mitte hetkel kehtivate materjalidega!
Varasemate aastate arhiiv: 2008, 2007, 2006, 2005.
Sisukord
Koht, aeg, tulemus
Semester: kevad
Tulemus: hindeline arvestus
Nõuded: kaks laboratoorset tööd ja kontrolltöö kursuse lõpus
Punkte: 2.5
Igal paaritul esmaspäeval toimub ruumis VI-224 loeng. Igal neljapäeval toimub ruumis IT-213c kas praktikum või harjutus (vaheldumisi).
Kontrolltöö
Kaks alternatiivset aega:
- 21.05.2009 kell 9:00 ruumis VI-121
- 28.05.2009 kell 9:00 ruumis I-202
Lõpphindes läheb arvesse nii töö praktikumis (2/3 punktidest) kui kontrolltöö (1/3 punktidest). Positiivse tulemuse jaoks on kontrolltööst vaja saada vähemalt 1/3 punktidest.
- 28.05.2009 kell 11:00, ruumis IT-232 on viimane võimalus näidata laboreid. (NB! nihkus 10:00 pealt edasi ja mingil täiesti arusaamatul põhjusel on siin 27 asemel 28 ja kuna te sellega arvestasite, siis tulen kohale)
Näide: paar aastat vana kasutajaliideste kontrolltöö
Kontrolltöö sisu punktide kaupa:
- kasutajaliideste üldpõhimõtted 1: lugemiskontroll paari artikli kohta. Artiklid:
- kasutajaliideste üldpõhimõtted 2: lugemiskontroll paari artikli kohta. Artiklid:
- CSS: põhiteadmised. Annan CSS-i tekstijupi ette ja palun selgitust ja/või tulemuse kirjeldust. Artiklid: http://www.w3.org/MarkUp/Guide/Style.html. Näited valikust: http://www.w3schools.com/css/css_examples.asp
- Javascript koos htmli ja css muutmisega (DOM): põhiteadmised. Annan js tekstijupi ette ja palun selgitust ja/või tulemuste kirjeldust. Näited valikust: http://www.w3schools.com/dhtml/dhtml_dom_examples.asp ja http://www.w3schools.com/dhtml/dhtml_examples.asp
- Javascript koos htmli ja css muutmisega (DOM): ülesanne. Palun teha väike näide a la tabidega lehe tegemise kohta (div-de muutmine linkidele või nuppudele vajutamise korral).
- XMLi süntaks. Tuvastada süntaksivigu etteantud XMLi näites. Materjalid: http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas1.PPT ja http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas2.PPT
- XSL: väikesed baasteadmised. Annan väikese programmijupi koos toor-xmlga ette ja palun vastus kirja panna: mis on tulemus. Materjalid: http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas3.PPT ja http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas4.PPT
- xmlhttprequesti ülesanne. Vaja kirjutada väike näide, kus tehakse xmlhttprequesti asünkroonselt (callbackiga). Artikkel: http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro2/index.html
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: kontsertide, teatrite, restoranide jne info sisestamine ja otsimine.
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
- Teine töö: Serverirakenduse praktiline juhend: 2009
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.
Abiks esimese töö jaoks:
Vormikontrolli näitefaile:
TÄHELEPANU: Neljapäeval, 2. aprillil jääb ära seminar.
Loengud/harjutused
Loeng 3 veebruar: Sissejuhatav loeng: kursuse ülevaade, esimene laboratoorne töö
UI design
To be extended later.
Collection:
Basic UI design principles: classics
- Spolsky book 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
- current web style
- 2.0 web style from 2006
- 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:
- User Expectations for the Location of Common Objects (2002)
- 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
- 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.
