UI Prototüüp

Leht kuulub aine Kasutajaliidesed juurde.

Praktikumi eesmärk on

• Kasutajaliidese disaini harjutamine.
• CSS-i ja javascripti kasutamise harjutamine.

Hindamine

Hindamisel arvestatakse järgmisi aspekte, osa neist objektiivsed, osa subjektiivsed:

• Õigeaegselt esitatud või ei: hilinenud tööde eest saab ainult 50% punktidest, esitamine on ikkagi kohustuslik.
• Nõutava funktsionaalsuse olemasolu: puuduste eest miinuspunkte, väga paljude puuduste korral tööd ei arvestata (st tuleb edasi teha, kuni on piisavalt OK).
• Kasutajaliidese lihtsus, arusaadavus ja mugavus.
• Kasutajaliidese hea väljanägemine.
• Täiendav omaleiutatud funktsionaalsus, huvitav tehnoloogia jne: annab lisapunkte.

Funktsionaalsus, mis peab olema realiseeritud

Rakenduseks on aine Kasutajaliidesed hinnete üle arvestamise ja nende vaatamise rakendus. Rakendusel on 2 eri kasutajat:

• Õpilane, kes soovib mugavalt esitada oma töid ja näha hinnete seisu
• Õppejõud, kes hindab praktikume, kontrolltöid ja märgib üles praktikumides osalemist

Funktsionaalsust:

• Registreerimine ja sisselogimine
• Hinnete vaade õpilasele
• Tööde esitamise vaade õpilasele
• Hinnete vaade õppejõule
• Statistika aastate lõikes (soovi korral)
• Hinnete sisestamine
• Õpilaste grupeerimine -- mida teha tudengite paaridega
• Õpilase hindamisel nimeotsing
• Rakenduse kasutamine peaks olema võimalik ka mobiilivaates
• Kirjete muutmine

Hinnete struktuur:

• Mingi hulk praktikumitunde, mille igaühe eest saab kuni 1 punkti
• Prototüüp 1, mille kategooriad on:
  • Labori esitamise fakt (+15) -- kui miinustega kokku on tulemus rohkem kui 15 punkti
  • Mulje (0-2)
  • Ilu (0-2)
  • Mugavus (0-2)
  • Frustratsioon (0-2)
  • Info edastamine (0-2)
  • Navigatsioon (0-2)
  • Hinnete paneku vaade (0-2)
  • Mobiilivaade (0-2)
  • Viimistlus (0-1)
  • Äge/Üllatav (0-1)
  • Pluss-miinus (-5 - +5)
  • Hilinemine (-15 - 0)
• Prototüüp 2, mille hindamiskategooriad on:
  • Esimese labori boonuspunktid (0-16) (Mulje, Ilu, jne. kuni Mobiilivaade)
  • Sisselogimisvaade (0-2)
  • Hinnete, tudengite koondnimekiri (õppejõu vaates) (0-2)
  • Tudengivaated (tulemused, esitamine?) (0-2)
  • Hinnete lisamine, tudengite grupid, muutmine (Õppejõu vaates) (0-2)
  • Ajax (0-2)
  • Veateated (0-2)
  • Otsing/Filtreerimine (0-2)
  • Viimistlus (0-2)
  • Pluss-miinus (-5 - +5)
  • Hilinemine (-15 - 0)
• NB: Prototüüpe mõjutavad hilinemised, vajalik on ka kommentaariväli tööle
• Kontrolltöö, millel on 4 küsimust (igaüks 10 punkti)

Soovi korral:

• Universaalne lahendus suvalise kursuse jaoks

Üldised nõudmised

Kirjeldatud rakenduse jaoks tuleb luua täielik kasutajaliidese prototüüp. Serverirakendust, andmebaasi jne esimese labori jaoks ei kasutata. Samas peab olema rakendusel täielik kasutajaliides, vormide, väljade, töötavate JavaScriptis kirjutatud vormiväljade kontrolli ja nuppudega.

Veateated peavad olema esitatud mõistlikult. See tähendab et nad peavad andma kasutajale tagasisidet vea põhjustest, võimalikult mõistlikul moel. Javascripti alert() funktsiooniga näidatud teated on hindamisel alati viga.

Rakenduse või veebilehe täpne sisu ja järjestused ei ole määratud. Tuleb ise loovust üles näidata. Teiste tudengite lahenduste kopeerimine on keelatud.

Sinu leht peab töötama nii Firefoxi kui Chrome'iga.

Tehnoloogilised nõuded

Kasutajaliidese mõttes tuleb rakendus realiseerida puhtalt HTMLi, CSSi ja javascriptiga.

Flashi, Javat vms ei tohi kasutada.

Andmed ja nende formaat

Andmed saab veebileht ainult javascriptiga json formaadis.

Serverilt saab lugeda ainult staatilist htmli/cssi/pilte ja json formaadis andmeid.

Vormiväljade omadused peavad olema antud html-atribuutidena ja neid kontrollitakse/kasutatakse js abil, vaadates, mis atribuudid väljal on.

Staatiline html ainult igal juhul muutumatute elementide jaoks: päis, üldmenüü jms.

Iga otsingu tulemus on javascripti massiiv/struktuur, tulemus kuvatakse dünaamiliselt.

Html, css and javascript kasutamine

Disain peab kasutama väga lihtsat html-i. Pealkirjad, lõigud, listid, lingid, pildid. Tabeleid üksteise sisse asetada ei tohi, kuid vajadusel tabelielement lubatud. Kujundusliku info nagu rasvane või kaldkiri, mõõtmete, värvide ja muu sellise määramine HTMLis on keelatud. Seda tuleb teha CSSi tasemel.

Otsingu ja sisestusvormid peavad olema dünaamilised: andmed saadetakse serverile alles siis kui kogu vajalik info otsingu/sisestusvomils on täidetud/valitud. See sisaldab ka dünaamilisi valikuid, puude avamist-sulgemist, kohustuslike väljade kontrolle jne.

Kõigi liidese väljadele, mis pole iseenesestmõistetavad, tuleb lisada abiinfo. Ühe näitena: http://web-graphics.com/mtarchive/001717.php Jälgige, et see kasutajakogemust ei segaks ega kasutajat ei häiriks.

Menüüd tuleb luua CSS/JavaScripti abil (see http://css.maxdesign.com.au/listamatic/).

Soovitame tungivalt (kuid see pole rangelt kohustuslik) kasutada kas JQuery või Prototype JavaScripti teeke. Esimese puhul on abiks ka Jquery UI.