Kasutajaliideste brauserirakendus

Ülesande sisu on birdwatching saidi tegemine, kust saaks sisestada oma vaatlusi ja otsida enda ja teiste vaatlusi. Vaata kindlasti pabermärkmete näidet ja näiteks seda birdwatchingu ajakirjasaiti, seda blogi ning seda foorumit

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.
• Ñõ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

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

Kasutamine:

A) Mittelogitud kasutaja

• Kasutaja saab kergesti aru, milleks sait ja mis seal teha saab
• Kasutaja saab otsida kõiki vaatlusi
• Kasutaja saab mugavalt sisse logida (reaalset logimist pole vaja realiseerida, piisab nö dummy-lehtedest), arvestades, et süsteem peab võimaldama kasutamist kohe peale kasutajatunnuse (milleks olgu e-posti aadress) ja parooli valimist. Edaspidisteks sisselogimisteks tuleb kasutada süsteemi, kus e-postile saadetakse kinnitus-mail, mis sisaldab linki, millele kasutaja peab kasutajatunnuse/parooli aktsepteerimiseks klikkima. Reaalset posti saatmist ja sisselogimise

kontrolli esimeses praksis teha ei tule: vaja on realiseerida ainult selle jaoks ettenähtud lehed/vormid.

Otsingutulemust peab olema võimalik kuvada kahel viisil:

• Sorteeritud loetelu (sorteeringu peab saama valida) ja kuvatava osa näitamine kaardil
• Kaardil valitud regioonis

B) Logitud kasutaja

Lisaks mittelogitud kasutaja funktsionaalsusele:

• Kasutaja saab sisestada uut vaatlust, kus on hulk vormivälju a la liik, koht, aeg jne: täpsustame lähiajal. Saab märkida, kas vaatlus on avalik/mitte
• Kasutaja saab otsida kõiki vaatlusi ja leiab kõik enda vaatlused ja teiste avalikud vaatlused
• Kasutaja saab muuta ehk parandada oma vaatlusi.

Täpsemalt vaatluste sisestamise ja muutmise kohta:

• Peavad olema vähemalt järgmised põhiväljad:
  • Vaatluse number. Iga kord tuleb automaatselt uus, kasutaja saab muuta.
  • Linnu liigi nimi valitud keeles.
  • Liigi nime keele valiku boks. Lehe põhikeel nr 1, ladina keel nr 2, muud edasi.
  • Liigi soo valiku tickbox. Võib jääda täitmata.
  • Vaadeldud lindude arv. Vabatekst.
  • Vaadeldud lindude kaugus.
  • Vaadeldud lindude kauguse ühik (meetrid, jalad).
  • Looduslik keskkond: valikuboks (segamets, lehtmets, okasmets, aas, rand, põld, linn jne) pluss võimalus sisestada oma keskkonna-tekst.
  • Vaatluse aeg: kuupäev, päev, kellaaeg. Kuupäev kalendrist valitav. Vaikimisi sisestamise hetk.
  • Vaatluse riik valikuboksist.
  • Vaatluse aadress vabatekstina.
  • Vaatluse geokoordinaatide kaks välja
  • Geokoordinaatide tüübi valikuboks
  • Harilikkuse märge valikuboksist: väga harilik, vähem kohatav, haruldane
  • Vabatekstina märkmed käitumise kohta.
  • Temperatuur

• Peavad olema vähemalt järgmised lisaväljad:
  • Temperatuur
  • Pilvisus (valikuboks)
  • Sademed (valikuboks)
  • Tuul (valikuboks)
  • Autotee
  • Jalutuskäik
  • Laagrikoht
  • Restoranid
  • Kaaslased
  • Teel kohatud
  • Kohalik info
  • Muud märkmed

Väljad tuleb esitada mitmel eri tabil: põhiväljad ühel, lisaväljad teisel.

Täiendavate väljade lisamine ei ole keelatud, ülaltoodud peavad aga olema realiseeritud.

• Peale sisestamise peab olema võimalik:
  • Olemasoleva info muutmine: avatakse sama täitmisvorm koos sisuga, saab muuta ja uuesti salvestada.
  • Vaatluste kustutamine. Piisab ühekaupa kustutamisest.
  • Vaatluste otsimine. Vaatluste otsingu tulemus tuleb kuvada kasutaja valiku järgi kas
    • Google maps kaardil: vaatluse märgi peale hiirega minnes peab kuvama kogu info
    • Sorteeritava loendina, mis on splititud lehekülgedeks

Muid funktsionaalseid nõudeid:

• Mõistlik valik sisestamisvälju tuleb meelde jätta ja järgmisel sisestamisel kohe avada samad, mäiteks
  • Liigi nime keele valiku boks.
  • Aeg
  • Riik
  • Vaatluse aadress
  • Vaatluse geokoordinaatide kaks välja
  • Geokoordinaatide tüübi valikuboks
• Linnu liigi nime, märkmete jms väljade puhul ei tohi välja nime uuesti ette kuvada ega välja mälust pakkuda

• Lehel peab olema menüü, kus vähemalt:
  • Üldinfo ja otsingud jms vahel valik
  • Standardotsingud a la viimased vaatlused, viimase aja eksootililisemad vaatlused regioonis jne jne

General requirements

You will have to create mock-up pages of the full application described in the general course page. No server apps, databases etc will be used or created in the first lab. However, the mock-up pages must be a proper UI, with forms, fields, functioning javascript checks, buttons etc.

The exact order, contents, etc etc of the application/web page is not specified. You will have to apply a good deal of creativity to come up with a good solution. Copying solutions by other students is prohibited.

Your page must work ok and look clean and nice on both Firefox and IE as installed on the IT building computer classes. In case you have different versions on your computer, you will in any case have to demonstrate usage on both Firefox and IE.

Tehnoloogilised nõuded

UI mõttes tuleb rakendus realiseerida puhtalt htmli, cssi ja javascriptiga. Flashi, javat vms ei tohi kasutada.

Andmed ja nende formaat

Data saab veebileht ainult javascriptiga json formaadis.

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

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 usage

All the design must be done using very basic html. Titles, paragraphs, lists, anchors, images are allowed. Non-nested tables are allowed, if really helpful. Nested tables are strictly prohibited. All bold, italic, color, dimension, etc specifications in html are prohibited: you must use css instead. See the course page for a large catalogue of articles, tutorials and tips.

Search/enter forms must be fully dynamic in the sense that no submits are done until all the necessary information on search/enter forms are filled/selected. This includes dynamic selections, opening/closing tree branches, obligatory field checks etc.

Dynamic, floating help must be attached to all forms and non-elementary links. For example: http://web-graphics.com/mtarchive/001717.php Note that this help should not disturb the user experience: it should not annoy.

Menus have to be created using lists with css/javascript (see http://css.maxdesign.com.au/listamatic/).

It is strongly recommended (but not strictly obligatory) to use either the prototype or jquery javascript library. For the last one it is a good idea to additionally use jquery ui.

Style

Use stylistic hints (your page must look clean and modern, with some touches of style!) from:

• 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