Your SlideShare is downloading. ×
0
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Veebi Planeerimine
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Veebi Planeerimine

943

Published on

Published in: Business, Economy & Finance
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
943
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Veebirakenduste disainiprotsessi etapid
  • 2. Disainprotsessi etapid
  • 3. Töörühmad <ul><li>Ivo, Jaan, Alar </li></ul><ul><li>Peep, Veiko, Liisa </li></ul><ul><li>Tener, Jargo, Rano </li></ul><ul><li>Argo, Riho, Rene </li></ul><ul><li>Marko, Arnold, Silvar, Priit </li></ul><ul><li>Taavi, Ragnar, Andero </li></ul><ul><li>Martin, Sylver, Janno </li></ul>
  • 4. Tööjõu vajadus erinevatel etappidel Nõude analüüs Kontseptuaalne disain Visandid ja prototüübid Tootmine Kasutusele võtt Töö maht Graafiline disain Kirjutamine Süsteemi administreerimine Programmeerimine Kasutatavuse disain Projektijuhtimine
  • 5. Nõuete analüüs
  • 6. Nõuete analüüsi meetodid <ul><li>Nõuete spetsifikatsioon </li></ul><ul><li>Kasutaja-Intervjuud </li></ul><ul><li>Kasutajate küsitluse </li></ul><ul><li>Võrdlev analüüs </li></ul><ul><li>Logide analüüs (olemasoleva veebisaidi puhul) </li></ul><ul><li>Kasutajatüübid ( persona) </li></ul><ul><li>Kasutajalood ( user story ) </li></ul><ul><li>Stsenaariumid </li></ul>
  • 7. Nõuete spetsifikatsioon AA-11 rühma koduleht <ul><li>Pildid </li></ul><ul><li>Klassi sümboolika </li></ul><ul><li>Nimekiri õpilastest (kontakt, ) </li></ul><ul><li>Ürituste nimekirjad (olnud, plaanimine, tulevad) – Läbu/ tegevused/ürituse </li></ul><ul><li>Teadaanded </li></ul><ul><li>Guestbook-foorum </li></ul><ul><li>Materjalid, link kogu - spikker </li></ul><ul><li>Saavutused - autahvel </li></ul>
  • 8. AA-11 rühma koduleht <ul><li>Kasutajad? </li></ul><ul><ul><li>Õpilased AA-11 </li></ul></ul><ul><ul><li>Lapsevanemad </li></ul></ul><ul><ul><li>Õpetajad </li></ul></ul><ul><ul><li>Sugulased </li></ul></ul><ul><ul><li>Päästeamet/Politseid/Kiirabi </li></ul></ul><ul><ul><li>IT-spetsialistid – tulevased värbajad </li></ul></ul><ul><ul><li>Kaasõpilased </li></ul></ul>
  • 9. Kasutajate individuaalsed erinevused <ul><li>Vanus, sugu, haridustase, töö, hobid, sissetulek </li></ul><ul><li>Erivajadused (nägemis-, kuulmis- ja liikumispuuded) </li></ul><ul><li>Oskuste tase (arvutikasutusoskus, netiket, teadmised veebisaidi teemaks olevas valdkonnas) </li></ul>
  • 10. Erinevused arvuti seadistustes <ul><li>Fondid </li></ul><ul><li>Linkide värv </li></ul><ul><li>Piltide laadimine </li></ul><ul><li>Lisaprogrammide olemasolu (Flash Player, Acrobat Reader, Real Player, Quicktime Player) </li></ul><ul><li>Java, JavaScripti ja cookie ’de tugi </li></ul>
  • 11. Rahvusvahelised kasutajad <ul><li>Veebisaidi päritolumaa olgu nähtav </li></ul><ul><li>Keelevalik </li></ul><ul><li>Mõõtühikute kasutamine (km, m, l, pint) </li></ul><ul><li>Rahaühikud EEK, USD, £, € </li></ul><ul><li>Sümbolid on alati kultuurispetsiifilised </li></ul><ul><li>Kuupäeva ja kellaaja vorming </li></ul>
  • 12. Tehnilised võimalused (1/2) <ul><li>Disainerid kasutavad tavaliselt palju paremaid arvuteid kui lehekülje sihtgrupp </li></ul><ul><li>Microsoft pole ainuke tarkvara tootja!!! </li></ul><ul><li>Brauserid võivad toimida erinevalt ka erinevate Windowsi versioonide puhul </li></ul><ul><li>Üha enam kasutatakse nn õhukesi kliente (ingl k thin clients ): mobiiltelefon, Palm, Pocket PC; USA’s on levinud ka WebTV. </li></ul>
  • 13. Tehnilised võimalused (2/2) <ul><li>Graafilised võimalused </li></ul><ul><ul><li>Erinevad eraldusvõime (ekraaniresolutsioonid) </li></ul></ul><ul><ul><li>Erinev värvussügavus </li></ul></ul><ul><li>Internetiühenduse kiirus </li></ul><ul><ul><li>Mobiiltelefon </li></ul></ul><ul><ul><li>Modemiühendus </li></ul></ul><ul><ul><li>Kodukasutaja püsiühendus </li></ul></ul><ul><ul><li>Kiire püsiühendus </li></ul></ul>
  • 14. Kasutajalood ( user stories ) <ul><li>Kasutajalood kuuluvad Extreme Programming meetodite hulka </li></ul><ul><li>Kasutajalood kirjutatakse süsteemi tulevaste kasutajate poolt </li></ul><ul><li>Kasutajalugu keskendub toimingute kirjeldusele, mitte kujundusele </li></ul><ul><li>Kasutajaloo põhjal kirjutatakse välja kasutusjuhud ( use cases ) </li></ul><ul><li>Programmeerijad hindavad kasutusloo elluviimiseks kuluvat aega (nädalates) </li></ul>
  • 15. Kasutajatüübid <ul><li>Kasutajaprofiil </li></ul><ul><li>Kasutaja tüüpiline päevakava </li></ul><ul><li>Kasutaja foto </li></ul><ul><li>lühikirjeldused </li></ul>
  • 16. Stsenaariumid <ul><li>Stsenaariumid on vabas vormis kasutajalood, mis kirjeldavad kuidas kasutaja mingeid toiminguid sooritab </li></ul><ul><li>Stsenaariumid on enamasti kirjutatud arendajate poolt ning neid vahetatakse ja arutatakse läbi kasutajatega </li></ul>
  • 17. Näide 1. Rühmavanem <ul><li>Jõudes lehele logib enda kasutajaga portaali sisse. Vaatab üle blogid, kas keegi on vahepeal, midagi uut ja asjakohast lisanud või mitte. Kui ilmneb, et midagi on lisatud loeb uue(d) sissekanded üle ja avaldab kus vaja oma arvamust. </li></ul><ul><li>Olles alles hilja aegu tagasi saanud teada X aine hinded laeb kodukale uued hinded üles. Et kursuse kaalased näeksid oma tulemusi. Kontrollib, et kas andmed läksid korralikult ülesse, või mitte. </li></ul><ul><li>Järgmisena pilk kalendrisse. Leiab, et nädala lõpus on ühe töö esitamise tähtaeg. Nii nüüd tuleb kiiresti heita pilk teiste usinamate poolt tehtud kodutöödele. Näe sa siis täitsa olemas. Keegi on vähemalt juba mingi töö valmis teinud. Kiitus talle. </li></ul><ul><li>Peale endale kodutööde näidiste allalaadimist. Avab teadete rubriigi. Lisab sinna õppetoolist saadetud muud päevateemalised üleskutsed. </li></ul><ul><li>Väike kiire ülevaade kas keegi mingeid fotoavaldusi ka teinud. Viimane lihv ja veebi saavad laetud ka viimas sessi aegsed pildid. Lisame juurde ka väiksed märkused ja lähevad ka need kõigile näha. </li></ul><ul><li>Logib portaalist välja. </li></ul>
  • 18. Võrdlev analüüs <ul><li>Väga sobiv meetod, kui alustatakse arendust nullist </li></ul><ul><li>Iga võrreldava veebisaidi kohta tuuakse välja: </li></ul><ul><ul><li>Ekraanipilt </li></ul></ul><ul><ul><li>Plussid </li></ul></ul><ul><ul><li>Miinused </li></ul></ul><ul><ul><li>Kasutatavuse probleemid </li></ul></ul>
  • 19. Ankeetküsitlused <ul><li>Küsi ainult seda, mis on oluline </li></ul><ul><li>Küsi kasutaja demograafilisi andmeid (vanus, sugu, …) </li></ul><ul><li>Erinevat tüüpi küsimuste vaheldumine </li></ul><ul><ul><li>Vabas vormis vastus </li></ul></ul><ul><ul><li>jah/ei vastus </li></ul></ul><ul><ul><li>Valikvastus </li></ul></ul><ul><li>Online ankeetide tagasiside on 1…2 % </li></ul><ul><li>Posti teel saadetud ankeetide tagasiside 10 % </li></ul>
  • 20. Kontseptuaalne disain
  • 21. Kontseptuaalse disaini meetodid <ul><li>Idee genereerimine </li></ul><ul><li>Informatsiooni Arhitektuur </li></ul><ul><li>Kaartide Sorteerimine </li></ul><ul><li>Ülesannete analüüs </li></ul>
  • 22. IA kirjeldamine <ul><li>Tekstilisel kujul sisukaart </li></ul><ul><li>Voodiagramm </li></ul><ul><li>Horisontaalse paigutusega puustruktuur </li></ul><ul><li>Vertikaalse paigutusega puustruktuur </li></ul><ul><li>Kolmemõõtmeline diagramm (puustruktuur) </li></ul><ul><li>Wireframe (lihtsustatud html-prototüüp töötavate linkidega) </li></ul><ul><li>Lehekülje skeem </li></ul>
  • 23. Tekstilisel kujul sisukaart <ul><li>1.0 Avaleht </li></ul><ul><li>1.1 Meie </li></ul><ul><li>1.2 Teadaanded </li></ul><ul><li>1. 3 Sündmused </li></ul><ul><li>1.3.1 Olnud </li></ul><ul><li>1.3.2 Planeerimine </li></ul><ul><li>1.3.3 Ettepanekud </li></ul><ul><li>1.4 Foorum </li></ul><ul><li>1.5 Pildigalerii </li></ul><ul><li>1.6 Spikker </li></ul><ul><li>1.7 Autahvel </li></ul><ul><li>1.7.1 Sport </li></ul><ul><li>1.7.2 Kultuur </li></ul><ul><li>1.7.3 Kooli sisene </li></ul><ul><li>1.8 Sümboolika </li></ul>
  • 24. Horisontaalne puustruktuur
  • 25. Vertikaalne puustruktuur
  • 26. J.J. Garrett: informatsiooni arhitektuuri visuaalne sõnavara <ul><li>Lihtne visuaalne sõnavara informatsiooni arhitektuuri ning interaktsioonide disaini kirjeldamiseks </li></ul><ul><li>http://www.jjg.net/ia/visvocab/ </li></ul><ul><li>Garretti IA sõnavara eelised: </li></ul><ul><ul><li>käsitsi joonistatav </li></ul></ul><ul><ul><li>kasutatav erinevate programmidega (Adobe InDesign, OmniGraffle, Macromedia Freehand, Visio, OpenOffice, Powerpoint) </li></ul></ul><ul><ul><li>lihtsalt õpitav </li></ul></ul>
  • 27.  
  • 28. Visandid ja prototüübid
  • 29. Prototüüp <ul><li>Prototüüp on lõplikult viimistlemata eksperimentaalne rakendus, mida kasutatakse disaini ideede testimiseks </li></ul>
  • 30. Visandid ja prototüübid <ul><li>Pisipildid </li></ul><ul><li>Paberprototüüp </li></ul><ul><li>Graafiline prototüüp </li></ul><ul><li>HTML prototüüp </li></ul>
  • 31. Pisipildid <ul><li>Paberile joonistatud kujundus ideed </li></ul>
  • 32. Paber prototüübi <ul><li>Pildina arvutis 1024px x 768px </li></ul><ul><li>Resolutsioon 96dpi </li></ul><ul><li>Paberil suurus </li></ul><ul><li>27, 1cm x 20,3 cm </li></ul><ul><li>A4 21x29,7cm </li></ul>
  • 33. Graafiline prototüüp
  • 34. HTML prototüüp

×