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

Lahendada sünnipäeva ühiskingituse probleem kingi koordineerija ja külaliste/kinkijate vahel. Katab järgmised kasutuslood:

Kingituse koordineerija saab sünnipäevakorraldajalt info peo toimumiskoha ja soovinimekirja ja kannab peo info ja toimumiskoha ja kingitused ja kutsutute nimekirja rakendusse. (Päris elus oleks kingi korraldaja ja kutsuja eraldi inimesed, aga see teeks rakendusele ühe lisarolli, mida me ei vaja)
Peo aadress levib sotsiaalvõrkudes/e-postiga ja külalised klõpsivad lingil, pärast mida saavad nad luua kasutaja või sisse logida.
Külaline ütleb, et ta tuleb ja panustab 10€ ühiskingitusse.
Keegi külaline kannab süsteemi, et ta ostis/tellis kingituse X ära. (süsteem taustal saadab e-postiga panustanud külalistele summa ja pangaarve numbri)
Külaline kommenteerib mõnda kingitust ja pakub odavama veebipoe. (Kingituse koordineerija muudab sellest lähtuvalt hinda ja eseme aadressi.)
Koordineerija vaatab kui palju vaba raha veel on.
Enne pidu vaatab külaline kus pidu üldse toimub.
...

Ühiskingitus: Sünnipäevaline valib kellegi kes haldab "nimekirja" või on ise; kickstarteri moodi. (NB: esialgne kirjeldus, veidi täieneb)

Kasutaja:
- e-post, nimi, salasõna, kontonumber
Sünnipäev:
- "omanik" (haldaja või pidaja)
- unikaalne url (slug (nälk?); unikaalne url, mida saab postiga saata)
- (kaardilink?)
- (vaikimisi raha?)
- kutsutute e-posti aadressid
- kingid - wishlist; või option?
Kinginimekiri:
- [sünnipäev-]
- ese
- url
- hind
- kes ostis?
- kommentaarid
Kommentaar:
- kes
- millele
- sisu

Ü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: