UI:Kodutöö 2

Allikas: Kursused
Redaktsioon seisuga 11. märts 2022, kell 09:49 kasutajalt Verrev (arutelu | kaastöö)
(erin) ←Vanem redaktsioon | Viimane redaktsiooni (erin) | Uuem redaktsioon→ (erin)
Mine navigeerimisribale Mine otsikasti

Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.

Töö peab esitamiseks olema paigutatud Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://gitlab.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto".

Nõuded:

  1. HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. Nii pildid kui sisutekstid peavad olema "päris" - mitte igal lehel, küll toote põhiflow-ga seotutel. See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud. (5p)
  2. Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrappi, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele. Inline-stiilide ja !important tagi kasutamine CSSis on keelatud. (2p)
  3. Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html` (2p)
  4. Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)
  5. HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)
  6. Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika. (1p)
  7. Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. (1p)
  8. Rakendus on arvestab vaegnägijate erisustega. (1p)

Soovitusi:

  • Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.
  • Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad katsetamise ajal lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/. Kas kohe või hiljem saad leida sobivad fotod mõnest vabavara-pildipangast, nt. Pexels.com
Pärit leheküljelt "http://courses.cs.taltech.ee/w/index.php?title=UI:Kodutöö_2&oldid=10475"