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

Ülesandeks on kirjutada koduraamatukogu rakendus. Rakenduse abil saaks kasutaja pidada arvestust oma raamatute üle ning neid huvilistele välja laenata. Samas liideses võiksid huvilised avaldada soovi raamatu laenamiseks: võib eeldada, et kasutajad lepivad kuidagi ise kokku ja eraldi sõnumite vahetamise liidest pole tarvis teha: keeruliseks läheb.

Lehel oleva inimkeele valik on vaba: realiseeri leht üleni ühes enda valitud inimkeeles.

• Raamatu kohta tuleks talletada otsida järgmist infot
  • Pealkiri
  • Autor
  • Väljalaskeaasta
  • Keel
  • Kategooria (Dewey kood?)
  • Märksõna(d)
  • (ISBN? Hinne?)
  • Amazonist kaanepilt küsida ISBNi kaudu?
• Kas raamat on laenutatav?
  • Kelle käes?
  • Millal antud
  • Millal tagastatud
  • Valikulne: Laenutuste ajalugu

Kasutamine:

• Registreerimine
  • Kasutajanimeks võtke e-posti aadress
• Sisselogimine
• Raamatute nimekiri
• Konkreetse raamatu info
• Raamatute sirvimine
• Valikuline: Võimalus avaldada soovi raamatu laenutamiseks ning teiselt poolt võimalus raamat laenutatuks märkida.
• Otsing
  • Lihtne otsing
  • Täpsem otsing

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

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:

• current web style
• 2.0 web style from 2006

Abiks esimese töö jaoks

• Google maps: http://code.google.com/apis/maps/

Vormikontrolli näitefaile:

• html vorm sisuliste atribuutidega
• jupp sobivat javascripti atribuutide kasutuseks