Kasutajaliidesed võrgutehnoloogia baasil: erinevus redaktsioonide vahel

Allikas: Lambda
Mine navigeerimisribale Mine otsikasti
← Vanem muudatus
Resümee puudub
 
(ei näidata 2 kasutaja 168 vahepealset redaktsiooni)
1. rida: 1. rida:
Course code: <b>ITV0030</b><br>
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>
Link: http://www.lambda.ee/index.php/Kasutajaliidesed_võrgutehnoloogia_baasil or http://www.lambda.ee/index/itv0030<br>
Lecturer: [http://tanel.tammet.googlepages.com Tanel Tammet]<br>
Õppejõud: [http://tanel.tammet.googlepages.com Tanel Tammet]<br>
Contact: tammet@staff.ttu.ee, 6203457, TTÜ AK223<br>
Kontakt: tammet@staff.ttu.ee, 6203457, TTÜ AK223<br>
Course materials from  [http://cs.ttu.ee/kursused/itv0030/  two years ago] and [[itv0030_2006|last year]] are available as well.


Labs: Jaagup Irve<br>
<br>
Contact: jaagup.irve@ttu.ee, TTÜ IT-232
<!--
Laborid: Jaagup Irve<br>
Kontakt: jaagup.irve@ttu.ee, TTÜ IT-232<br>
-->
Varasemate aastate arhiiv:  [[itv0030_2009|2009]], [[itv0030_2008|2008]], [[itv0030_2007|2007]], [[itv0030_2006|2006]], [http://cs.ttu.ee/kursused/itv0030/  2005].
 
== <font color="red">2011 kevadsemestri järelkontrolltöö</font> ==
 
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:
 
<!-- Prax teine too OK: Margo Kopli (kontr teha), Mihkel Reinart (kontr tehtud). Samuti Oleg Toming, Pavel Lavreshin teine OK. -->
* 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 [http://www.lambda.ee/images/b/b1/Kasutliides_kevad10_tulem.pdf 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!


== Time, place, result ==
== Kontrolltöö ==


Semester: spring<br>
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.
Grading: two labs plus one test (end of semester)<br>
Credit points: 2.5<br>


Lectures and seminars: every Monday at 17.00-18.30, room VII-226. Lecture, seminar, lecture, seminar, etc.<br>
Kursuse edukaks lõpetamiseks kohustuslik kontrolltöö toimub reedel, 21 mail kell 9.00-11.00.  
Lab: even weeks  a 2*45 minutes, AK computer classes IT-213e:
* Tuesdays at 10.00-11.30: IAPB42, IAPB43, IAPB44
* Tuesdays at 16.00-17.30: IAPB41, IAPB47
FYI: even weeks start at: 5 Feb, 19 Feb etc


<b>NB!</b> 6. veebruari praktikumides juhendamist veel - tõenäoliselt - ei toimu: esialgu on soovitav teha baas-htmli abil valmis üleslaadimis/otsivormid ja tulemuste listi näiteleht, alustada võib staatilise css-i lisamisega. Esimene css ja javascripti loeng on 12. veebruaril, peale seda algab
Teemad, mille kohta tulevad küsimused:
praktikumide juhendamine.
 
* Kasutajaliidese põhimõtted (lugemiskontroll)
** [http://www.alistapart.com/articles/indefenseofeyecandy in defence of eye candy]
** [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.]
** [http://mittermayr.wordpress.com/2006/02/03/20-culture/ 2.0 web style from 2006]
* Lehe- ja vormidisaini materjalide lugemiskontroll:
** [http://kurafire.net/log/archive/2007/06/22/pagination-101 pagination 101
** [http://www.lukew.com/resources/articles/web_forms.html form design] and  [http://www.lukew.com/resources/articles/WebForms_LukeW.pdf 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<br>
Tulemus: hindeline arvestus<br>
Nõuded: kaks laboratoorset tööd ja kontrolltöö kursuse lõpus<br>
Punkte: 2.5<br>
 
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 ==
== 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. Creating the actual app, database schema, security and authentication solutions etc etc are not in the scope of the course.
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:
The three themes of the course (with roughly equal importance) are:
* Nontechnical aspects of the UI design: usability, etc
* Nontechnical aspects of the UI: usability, structure, visual design.
* Browser technologies: html, css, javascript
* Browser technologies: html, css, javascript, dom. Ajax.
* Server technologies: xml, xslt
* 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.  
We assume familiarity with html and basic server-side functionality: i.e. competence to create simple web apps.


== Labs ==
== Labs ==


There will be two labs with the  [[itv0030 2007 lab common theme]]:
Kursusel on kaks kohustuslikku laboratoorset tööd.
* '''First lab''': building the functioning prototype/fake UI using static files for the app.
 
** Deadline: 20 March.
Töö teemaks: linnuvaatluse veebisüsteemi loomine.
** You must follow the  [[itv0030 2007 lab 1 requirements]]
 
* '''Second lab''': actually building the app, using web services provided by the lecturer and the UI prototype you built before.  
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.
** Deadline is mid-May.
 
** You must follow the  lab 2 requirements (to appear in mid-March)
* 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
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
49. rida: 95. rida:
All lab results must be presented on site during regular lab hours, both authors must be present. Email submissions are not accepted.
All lab results must be presented on site during regular lab hours, both authors must be present. Email submissions are not accepted.


== Lectures/seminars ==
== Loengud/harjutused  ==


; 1. Introductory lecture: 29. January. Introduction to the course, few specific example questions: splitting and navigation of long lists.
<b>Loeng 2 veebruar</b>:
Sissejuhatav loeng: kursuse ülevaade, esimene laboratoorne töö.
Materjale:
* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]


; 2. Labwork seminar: 5. February. Basic UI issues. Selection/introduction of labwork.  
<b>Loeng 9 veebruar</b>:
Esimese laboratoorse töö detailid. CSS-i sissejuhatuse jätk.
Materjale:
* [http://www.w3schools.com/css/default.asp  CSS tutorial]
* [http://www.w3.org/TR/CSS2/selector.html css selector peatükk]
* [http://www.css3.info/preview/ css 3 preview]
* [http://hsivonen.iki.fi/doctype/ Doctype issues, quirks mode etc] plus [http://www.quirksmode.org/css/quirksmode.html here]
* [http://www.w3.org/Style/CSS/#specs official w3c css specs]
 
<b>Loeng 16 veebruar</b>:
CSS-i jätk. Materjalidest eeskätt http://www.w3schools.com/css/default.asp lõpupeatükid ja näited.
 
<b>Loeng 23 veebruar</b>:
Lehekülje põhikomponentide variandid ja valikud kasutajamugavuse aspektist: loetelud, lehekülje splittimine, vormid. Kasutatud materjalid:
* splittimine: [http://kurafire.net/log/archive/2007/06/22/pagination-101 pagination 101] ja [http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/ more pagination]
* vormid: alusta [http://www.lukew.com/resources/articles/web_forms.html form design] ja kindlasti loe hoolega läbi põhjalik [http://www.lukew.com/resources/articles/WebForms_LukeW.pdf pdf kujul õpetus]
* lisaks võiks vaadata [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface how the form gets messed up] ja [http://wufoo.com/gallery/ form example gallery]
 
<b>Loeng 3 märts</b>:
Alustame javascriptiga.
 
* Main w3schools tutorials and reference:
** [http://www.w3schools.com/js/default.asp js tutorial]
** [http://www.w3schools.com/htmldom/ html dom tutorial]
** [http://www.w3schools.com/js/js_examples_3.asp html dom examples]
** [http://www.w3schools.com/dhtml/default.asp dhtml tutorial]
** [http://www.w3schools.com/jsref/default.aspjs objects reference]
* Wikipedias:
** [http://en.wikipedia.org/wiki/JavaScript  wikipedia js]
** [http://en.wikipedia.org/wiki/JavaScript_syntax wikipedia js syntax]
* Taustaks [http://www.nihilogic.dk/labs/wolf/ wolf], [http://www.netzgesta.de/glossy/ glossy], [http://www.hesido.com/web.php?page=javascriptanimation menu animation], [http://www.huddletogether.com/projects/lightbox/ lightbox], [http://www.chromeexperiments.com/ google chrome experiments]
* Muud huvitavat
** old [http://javascriptant.com/articles/24/javascript-libraries-by-comparison library comparison] article
** [http://yuiblog.com/crockford/ crockford on javascript]
 
<!--
 
; 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


:Obligatory materials to read:
:* [http://www.joelonsoftware.com/printerFriendly/uibook/fog0000000249.html  J. Spolsky. User Interface Design For Programmers. ]
<!--
:* [http://cs.ttu.ee/kursused/itv0030/loeng/xmlbaas1.PPT XML course lecture 1 (in Estonian, PPT)]
-->
-->
<!--
:Recommended refreshening:
:* [http://www.w3.org/TR/xhtml1/ XHTML 1.0 standard]


: Background:
== UI design ==
:* [[Media:portaalidekoosvoime.ppt]]
 
:* http://wanderingbarque.com/nonintersecting/2006/11/15/the-s-stands-for-simple/
To be extended later.
:* http://diveintomark.org/archives/2002/04/19/soap_vs_xmlrpc
-->


; 3. Second lecture: 12. February. Starting with CSS and javascript.
Collection:


; 4. Seminar: 19. February. Basic UI components and choices. Examples from apps.
* [http://www.alistapart.com/ best overall  resource collection]


; 5. Third lecture: Javascript, dom, css continues.
Basic UI design principles: classics old and new


; 6. Seminar:  We'll investigate sites and demos using CSS and Javascript.
* [http://www.alistapart.com/articles/indefenseofeyecandy in defence of eye candy]
* [http://www.joelonsoftware.com/design/2ndDraft/01.html Spolsky 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.]


; 7. Fourth lecture: xmlhttprequest and friends.
: see http://papermountain.org/demos/live/


; 8. Seminar:  We'll investigate sites and demos using  xmlhttprequest  extensively.
More concrete and practical UI design principles


; 9. Lecture: this and the following lectures will focus on server-side, xml, xslt, json, rest etc.
* [http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php web 2.0 style guide] and [http://www.webdesignfromscratch.com/current-style.cfm current graph design guide]
* [http://mittermayr.wordpress.com/2006/02/03/20-culture/ 2.0 web style from 2006]
* [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ managing ui complexity]
* [http://www.visualswirl.com/2009/12/dont-reinvent-the-web-design-wheel/ web design conventions] and [http://www.visualswirl.com/2009/12/15-websites-that-break-the-rules/ rule breakers]
* [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]


== <b>Initial</b>obligatory reading on UI design principles ==
Web app page structure and design, whitespace, colors etc:


May be extended later.
* [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]


* [http://www.joelonsoftware.com/printerFriendly/uibook/fog0000000249.html  J. Spolsky. User Interface Design For Programmers. ]
Web app design details: pagination, forms, menus, measures:
* [http://www.joelonsoftware.com/articles/NotJustUsability.html  J. Spolsky. It's Not Just Usability]
* [http://www.asktog.com/basics/firstPrinciples.html  B. Tognazzini. First Principles of Interaction Design.]
* [http://cs.ttu.ee/kursused/itv0010/command.html  N. Stephenson. In the beginning was the command line.]


== Useful reading ==
* [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] and  [http://www.lukew.com/resources/articles/WebForms_LukeW.pdf as pdf slides]
* [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]


Will be extended/changed during course.
Resource collections for finding more:


=== Browser UI design principles ===
* [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]


* [http://www.useit.com/alertbox/9710a.html classics: style and structure of a web page text]
== UI implementation: browser ==
* [http://www.joelonsoftware.com/design/index.html Great design: draft of the new Spolsky book]
* [http://www.vipedio.com/roman/blog/20culture_full.html visual style currently in (2006)] plus [http://www.webdesignfromscratch.com/current-style.cfm a similar story]


=== Core browser tech (html,css,javascript) ===
Standards:


* [http://www.w3.org/TR/html4/  HTML 4.01]
* [http://www.w3.org/TR/html4/  HTML 4.01]
* [http://www.w3c.org/Style/CSS/  CSS]
* [http://en.wikipedia.org/wiki/HTML5 html 5 development]
HTML, CSS and Javascript tutorials:
* [http://www.w3schools.com/html/default.asp  HTML tutorial]
* [http://www.w3schools.com/html/default.asp  HTML tutorial]
* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]
* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]
* [http://www.w3c.org/Style/CSS/  CSS]
* [http://www.w3schools.com/css/default.asp  CSS tutorial]  
* [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/js/default.asp  Javascript tutorial 1]  
* [http://www.w3schools.com/dhtml/default.asp  Tutorial: javascript + css + html]
* [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/css_tutorial/index.html Westciv CSS book]
* [http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html  Westciv CSS tutorial]
* [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://jquery.com/  jquery]
* [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.meyerweb.com/eric/css/edge/  CSS edge]
* [http://www.csszengarden.com  CSS Zen garden]
* [http://www.quirksmode.org/home.html Differences between browsers]  
* [http://www.alistapart.com/  A list apart]
 
* [http://www.quirksmode.org/home.shtml Differences between browsers]
 
Resource collections:
 
* [http://www.websitetips.com/css/ a large collection of tutorials and tips]
* [http://www.websitetips.com/css/ a large collection of tutorials and tips]
* [http://www.htmldog.com/  htmldog: html ja css tutorials and handbooks]
* [http://www.htmldog.com/  htmldog: html ja css tutorials and handbooks]


=== Tips, tricks and cool stuff ===
== Server-centric ==
 
To be filled later.


Will be extended/changed during course.
== Tips, tricks and cool stuff ==


* [http://css.maxdesign.com.au/listamatic/  perfect list-based menu/tabs/etc design examples from listamatic],
* [http://css.maxdesign.com.au/listamatic/  perfect list-based menu/tabs/etc design examples from listamatic],
131. rida: 312. rida:
* [http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro3/?ca=dgr-lnxw01MasterAJAX3 mastering Ajax: see also links at the end]
* [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]
* [http://developer.yahoo.net/yui/ Yahoo UI library]




[[Category:Kursus]]
[[Category:Kursus]]

Viimane redaktsioon: 8. juuni 2011, kell 03:19

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.

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:

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.

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:

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:

Loeng 3 märts: Alustame javascriptiga.


UI design

To be extended later.

Collection:

Basic UI design principles: classics old and new


More concrete and practical UI design principles

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

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

Resource collections for finding more:

UI implementation: browser

Standards:

HTML, CSS and Javascript tutorials:

Concrete UI widgets:

Javascript libraries:

HTML dom in general:

Creating innerhtml and elements using HTML dom:

Javascript graphics with SVG:

Javascript graphics with css and canvas:

Ajax:

Json:

Articles, ideas, howtos:


Resource collections:

Server-centric

To be filled later.

Tips, tricks and cool stuff

Pärit leheküljelt "http://www.lambda.ee/w/index.php?title=Kasutajaliidesed_võrgutehnoloogia_baasil&oldid=7842"