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 lihtne arusaadavus ja mugavus.
- Kasutajaliidese hea väljanägemine.
- Täiendav omaleiutatud funktsionaalsus, huvitav tehnoloogia jne: annab lisapunkte.
Funktsionaalsus, mis peab olema realiseeritud
Oled Molvaania programmeerija, kellele on valitsus teinud ülesandeks kirjutada patriotismi suurendav virtuaaltoimiku programm iDELO, mille abil on võimalik kaaskodanike ebapatriootlikke samme kirja panna. Programm võimaldab vaadelda kaaskodanike informatsiooni ja julgeolekustruktuuridele nende tegudest ette kanda.
Kasutamine:
- Registreerimine
- Kasutajanimeks võtke e-posti aadress
- Sisselogimine
- Nimekiri - kodanikest kelle kohta on antud kasutaja kaebusi esitanud
- Võimalus sortida
- Võimalus vaadelda nimekirja sündmuste tüüpide kaupa
- Konkreetse kodaniku vaade - kuvatakse ainult sisseloginud kasutaja kaebused
- Julgeolekutöötaja vaade - kuvatakse kõik kodaniku kohta saadaolev info
- Sündmuste tüüpide lisamine
- Otsing
- Lihtne otsing
- Täpsem otsing
Kodanik:
- Nimi
- Sugu
- Sünniaeg
- Elukoht
- Foto
Kaebus:
- Episoodi pealkiri
- Sündmuse tüüp (sildiloogikaga (tag))
- Kellaeg
- Asukoht kaardil
- Detailne kirjeldus
- Foto(d)
Ü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() funktsioon on 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 Internet Exploreriga.
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.
Stiilist
Stilistilisi vihjeid (soovime näha puhast, stiilset ja kaasaegset lehte) leiate alljärgnevatest viidetest:
Abiks esimese töö jaoks
- Google maps: http://code.google.com/apis/maps/
Vormikontrolli näitefaile: