Lehekülje Itv0030 2008 lähteteksti vaatamine

Kursuse kood: <b>ITV0030</b><br>
Link: http://www.lambda.ee/index.php/Kasutajaliidesed_võrgutehnoloogia_baasil or http://www.lambda.ee/index/itv0030<br>
Õppejõud: [http://tanel.tammet.googlepages.com Tanel Tammet]<br>
Kontakt: tammet@staff.ttu.ee, 6203457, TTÜ AK223<br>

<br><br>
Laborid: Jaagup Irve<br>
Kontakt: jaagup.irve@ttu.ee, TTÜ IT-232<br>

<b><font color="red">NB! Tegemist on 2008 kevadsemestri arhiiviga, mitte hetkel kehtivate materjalidega!</font></b>

Varasemate aastate arhiiv:   [[itv0030_2007|2007]], [[itv0030_2006|2006]], [http://cs.ttu.ee/kursused/itv0030/  2005]. 

== Koht, aeg, tulemus ==

Semester: kevad<br>
Tulemus: hindeline arvestus<br>
Nõuded: kaks laboratoorset tööd ja kontrolltöö kursuse lõpus<br>
Punkte: 2.5<br>


Igal esmaspäeval toimub ruumis IT-213 harjutus või praktikum. Igal teisel (paaritu nädala) kolmapäeval toimub ruumis VII-131 loeng. Teisisõnu:

Loeng: paaritute nädalate kolmapäevadel kell 12.00-13.30 ruumis VII-131 (uus korpus). Esimene paaritu nädal algab 28. jaanuaril.<br>
Harjutus: paaritute nädalate esmaspäevadel kell 12.00-13.30 ruumis IT 213-A (AK arvutiklassid).<br>
Praktikum: paarisnädalate esmaspäevadel kell 12.00-13.30 ruumis IT 213-A (AK arvutiklassid).<br>

Siin nüüd [[ITV0030 tulemused 2008 kevad]].

== <font color="red">Kontrolltöö</font> ==

Kontrolltöö (kaks varianti):

* 27 mai kell 9-12 ruumis I-202 (aula taga)
* 3 juuni  kell 9-12 ruumis I-202 (aula taga)

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.


Kontrolltöö sisu punktide kaupa:

* kasutajaliideste üldpõhimõtted 1: lugemiskontroll paari artikli kohta. Artiklid: 

** [http://www.joelonsoftware.com/design/index.html Spolsky book draft: great design]
** [http://www.joelonsoftware.com/printerFriendly/uibook/fog0000000249.html   Spolsky: User Interface Design For Programmers]
** [http://www.joelonsoftware.com/articles/NotJustUsability.html  Spolsky: It's Not Just Usability]
** [http://www.asktog.com/basics/firstPrinciples.html  Tognazzini: First Principles of Interaction Design.]


* kasutajaliideste üldpõhimõtted 2: lugemiskontroll paari artikli kohta. Artiklid: 

** [http://www.webdesignfromscratch.com/current-style.cfm#centered current web style]
** [http://mittermayr.wordpress.com/2006/02/03/20-culture/ 2.0 web style from 2006] 
** [http://www.wpdfd.com/issues/82/jared_spool_on_design/ Jared Spool on design] 
** [http://www.lukew.com/resources/articles/SiteSeeingCH5.pdf personality: one chapter from a book]
** [http://universalusability.com/access_by_design/index.html access by design: online book]
** [http://www.usabilityinstitute.com/resources/userInYourFace/userInYourFace.htm user in your face: short online book]

* 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 <b>applications</b> 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 tuleb valida üks kahest:

* [[Labor: sugupuu süsteem]].
* [[Labor: Ruumide broneerimise süsteem]].

Mõlemad laboratoorsed tööd realiseerivad siis seda ühte valitud teemat: esimene töö ehitab dummy-ui ilma tegeliku serveripoolse rakenduse ja andmebaasita, teine lisab serveripoolse rakenduse ja andmebaasi.

Labs:

* '''First lab''':  building the functioning prototype/fake UI using static files for the app.
** Tähtaeg: märtsi keskpaik.
** [[itv0030 2008 esimese praksi tehnilised nõuded]]
* '''Second lab''': actually building the app, using web services provided by the lecturer and the UI prototype you built before. 
** Deadline is mid-May.
** [[itv0030 2008 teise praksi tehniline juhend]]

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 28 jaanuar: Sissejuhatav loeng IT-213 A: kursuse ülevaade, esimene laboratoorne töö

; Loeng 30 jaanuar VII-131: sissejuhatus css-i

; Harjutus 11 veebruar IT-213A: esimese laboratoorse töö detailid

; Loeng 13 veebruar VII-131: sissejuhatus javascript-i

; Harjutus 25 veebruar IT-213A:  UI: lingid, baasitabeli jaotamine lehekülgedeks, sorteerimine, vormid

; Loeng 27 veebruar VII-131: css dünaamilised menüüd, dom ning javascripti kasutamine htmli/cssi modifitseerimiseks

; Harjutus 10 märts  IT-213A:  extjs teegi widgetite kasutamine

; Loeng 12 märts  VII-131:  XMLHttpRequest, ajax ja json

; Harjutus 24 märts  IT-213A:  teise laboratoorse töö serveripoolsed detailid

; Loeng 12 märts  VII-131:  XML ja XSL

== UI design ==

To be extended later.

Collection:

* [http://www.alistapart.com/ best overall  resource collection]

Basic UI design principles: classics

* [http://www.joelonsoftware.com/design/index.html Spolsky book draft: great design]
* [http://www.joelonsoftware.com/printerFriendly/uibook/fog0000000249.html   Spolsky: User Interface Design For Programmers]
* [http://www.joelonsoftware.com/articles/NotJustUsability.html  Spolsky: It's Not Just Usability]
* [http://www.asktog.com/basics/firstPrinciples.html  Tognazzini: First Principles of Interaction Design.]

More concrete and practical UI design principles

* [http://www.webdesignfromscratch.com/current-style.cfm#centered current web style]
* [http://mittermayr.wordpress.com/2006/02/03/20-culture/ 2.0 web style from 2006] 
* [http://www.wpdfd.com/issues/82/jared_spool_on_design/ Jared Spool on design] 
* [http://www.lukew.com/resources/articles/SiteSeeingCH5.pdf personality: one chapter from a book]
* [http://universalusability.com/access_by_design/index.html access by design: online book]
* [http://www.usabilityinstitute.com/resources/userInYourFace/userInYourFace.htm user in your face: short online book]

Web app page structure and design, whitespace, colors etc:

* [http://psychology.wichita.edu/surl/usabilitynews/41/web_object-ecom.htm  User Expectations for the Location of Common Objects (2002)]
* [http://www.lukew.com/resources/articles/visible_narratives.html understanding visual organisation]
* [http://www.uxmatters.com/MT/archives/000097.php using white space] 
* [http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design using colors]
* [http://www.designmeltdown.com/ serious online book: use the content menu on the left]
* [http://www.webdesignfromscratch.com/ good, short online book split into separate articles]

Web app design details: pagination, forms, menus, measures:

* [http://kurafire.net/log/archive/2007/06/22/pagination-101 pagination 101]
* [http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/ more pagination]
* [http://www.lukew.com/resources/articles/web_forms.html form design]
* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface how the form gets messed up]
* [http://wufoo.com/gallery/ form example gallery]
* [http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/ recent menu trends]
* [http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/ grid system]

Resource collections for finding more:

* [http://www.alistapart.com/ best universal resource collection]
* [http://www.wpdfd.com/resources/ web page design resources]
* [http://www.lukew.com/resources/links_psych.html UI ja funktsionaalsuse kujunduse põhimõtete kollektsioon]

== UI implementation: browser ==

Standards:

* [http://www.w3.org/TR/html4/  HTML 4.01]
* [http://www.w3c.org/Style/CSS/  CSS]

HTML, CSS and Javascript tutorials:

* [http://www.w3schools.com/html/default.asp  HTML tutorial]
* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]
* [http://www.w3schools.com/css/default.asp  CSS tutorial] 
* [http://www.lambda.ee/images/4/4f/Cssbook.pdf full CSS book in pdf]
* [http://www.w3schools.com/js/default.asp  Javascript tutorial 1] 
* [http://www.w3schools.com/dhtml/default.asp  Tutorial: javascript + css + html]
* [http://www.westciv.com/style_master/academy/css_tutorial/index.html Westciv CSS book]
* [http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html  Westciv CSS tutorial]

Concrete UI widgets:

* [http://css.maxdesign.com.au/listamatic/  using lists with css]
* [http://www.alistapart.com/articles/dropdowns/ classic 'sons of suckerfish' css menu article]
* [http://www.w3.org/TR/REC-CSS2/selector.html css selectors: underlying technology for css menus]
* [http://css.maxdesign.com.au/selectutorial/ tutorial for css selectors]
* [http://meyerweb.com/eric/css/edge/menus/demo.html classic css menu example]
* [http://www.howtocreate.co.uk/tutorials/testMenu.html small up-to-date css menu tutorial]
* [http://www.cssplay.co.uk/menus/  huge css menu gallery/selection]

Javascript libraries:

* [http://www.prototypejs.org/  prototype]
* [http://extjs.com/  ext]

HTML dom in general:

* [http://www.w3schools.com/htmldom/default.asp w3schools html dom tutorial]

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:

* [http://www.mozilla.org/projects/svg/ svg in firefox]
* [http://www.w3.org/Graphics/SVG/ svg standard]

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:

* [http://en.wikipedia.org/wiki/AJAX ajax: wikipedia overview]
* [http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro2/index.html classic ajax tutorial with necessary details]
* [http://www.xul.fr/en-xml-ajax.html a simple ajax tutorial] 
* [http://www.w3schools.com/ajax/default.asp ajax tutorial from w3schools]

Json:

* [http://en.wikipedia.org/wiki/JSON json: wikipedia overview]
* [http://www.json.org/ practical json details: a small tutorial]
* [http://www.json.org/ json: official standard]

Articles, ideas, howtos:

* [http://www.alistapart.com/  A list apart]
* [http://www.csszengarden.com  CSS Zen garden] 
* [http://www.meyerweb.com/eric/css/edge/  CSS edge]
* [http://www.quirksmode.org/home.html  Differences between browsers] 


Resource collections:

* [http://www.websitetips.com/css/ a large collection of tutorials and tips]
* [http://www.htmldog.com/  htmldog: html ja css tutorials and handbooks]

== Server-centric ==

To be filled later.

== Tips, tricks and cool stuff ==

* [http://css.maxdesign.com.au/listamatic/  perfect list-based menu/tabs/etc design examples from listamatic],
* [http://www.cssplay.co.uk/ a large number of cool categorized pure css demos with explanations]
* [http://www.evolt.org/article/comment/17/60369/index.html  10 css tricks]
* [http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro3/?ca=dgr-lnxw01MasterAJAX3 mastering Ajax: see also links at the end]
* [http://developer.yahoo.net/yui/ Yahoo UI library]


[[Category:Kursus]]