Luento 8. Jouni Lappalainen, Ilkka Tervonen, additions & editions by Antti Juustila

Transkriptio

1 Luento 8 Luku 12: Mallipohjainen (pattern-based) suunnittelu suunnittelumallit malliperustainen suunnittelu arkkitehtuurimallit käyttöliittymän suunnittelumallit kehykset Luku 13: Web-sovelluksen suunnittelu laatutekijät suunnittelun tavoitteet käyttöliittymän suunnittelu, graafinen suunnittelu sisällön suunnittelu, arkkitehtuurin suunnittelu ja navigoinnin suunnittelu hypermedia suunnittelumallit ja OOHD menetelmä 1

2 Soveltuvat lait ja pohdiskelun aiheita Suunnittelumallien käyttö johtaa nopeampaan ja parempaan ylläpitoon / hyp_no 4, Gamma

3 Suunnittelumallin käsite Cristopher Alexander et al.: A Pattern Language, 1977 Cristopher Alexander: The Timeless Way of Building, 1979 Alkujaan talonrakennuksen arkkitehtuuristen ratkaisujen tueksi. esim. millainen kattoratkaisu varjostaa vähiten talon pohjoispuolen pihaa Määritellään: Jokainen malli määrittelee ongelman, joka esiintyy uudelleen ja uudelleen ympäristössämme ja sitten ydinratkaisun siihen, niin että sitä voidaan voidaan soveltaa miljoonia kertoja tekemättä kuitenkaan koskaan samaa ratkaisua kahdesti. Alexander 1977 Erityisen hyödyllinen käsite myös ohjelmistotuotannossa 3

4 Suunnittelumallin ominaisuudet Ohjelmistoja koskevat suunnittelumallit julkaistiin jo 1980 luvulla, mutta 1985 julkaistu Design patterns (Gamma et al. 1985) kirja esitteli GoF (Gang of Four) suunnittelumallit Tehokas suunnittelumalli / Coplien 2005 ratkaisee ongelman toimii käytännössä ratkaisu ei ole ilmeinen vaan esitetään epäsuorasti kuvaa järjestelmän syvemmän rakenteen toimii ihmiskomponenttina mallin avulla parannetaan ratkaisun esteettisyyttä ja käytettävyyttä 4

5 Suunnittelumalli (design pattern) Yleinen ratkaisu toistuvasti esiintyvään arkkitehtuuriin/suunnitteluun liittyvään kontekstisidonnaiseen ongelmaan. Yleinen: ei ole sidottu mihinkään tiettyyn kieleen tai ympäristöön. Kuvataan (puoli)formaalina dokumenttina. Toistuva: ratkaisu yleiseen ongelmaan. Arkkitehtuuri-/suunnittelutaso: voidaan soveltaa arkkitehtuuritasolta yksityiskohtaiseen suunnitteluun. Kontekstisidonnaisuus: konteksti määrittää vaatimuksia. 5

6 Suunnittelumallien hyödyt Tekevät suunnittelutietouden eksplisiittiseksi ja kaikkien saavutettavaksi. Voidaan hyödyntää järjestelmien dokumentoinnissa. Tuovat ohjelmointikieliä paremmin esiin korkeamman tason rakenteita. Voidaan hyödyntää arkkitehtuurin rakennuspalikoina. Luo yhteisen kielen suunnittelijoille. 6

7 Suunnittelumallin kuvaus Nimi: tarkoituksena kuvata sekä ongelma, että sen ratkaisu, sen tulisi olla havainnollinen muodostuu osaksi suunnittelusanastoa. Ongelma: kuvataan tilanne, johon suunnittelumallia sovelletaan Ratkaisu: kuvaa suunnittelumalliin liittyvät elementit, niiden keskinäiset suhteet, vastuut ja yhteistyön kuvataan abstrakti ratkaisu, jota on helpompi soveltaa Seuraukset: suunnittelumallin soveltamisen tulokset (hyödyt) ja mahdolliset kompromissit (haitat) 7

8 Suunnittelumallit (design patterns) Malli esitellään nimen, ongelman, ratkaisun ja seurauksien avulla, mutta voidaan käyttää myös seuraavaa tarkempaa muotoa Name Intent Mitä tekee? Also-known-as Tunnettu myös nimellä Motivation Skenaarioesitys, miten malli ratkaisee ongelman Applicability Milloin mallia voidaan soveltaa? Structure Graafinen esitys mallin luokkarakenteesta Participants Luokkien osallistuminen malliin ja luokkien vastuut Collaborations Miten osallistujat tekevät yhteistyötä? Consequences Miten malli tukee tavoitteiden saavuttamista? Mitä tuloksia saadaan mallin käytöllä? Implementation Mistä vaaroista, ohjeista tai tekniikoista pitäisi tietää mallin käytössä? Sample code Koodiesimerkit kertovat, miten mallin voi toteuttaa Java, C++ kielillä Known uses Esimerkkejä mallin käytöstä in the real life Related patterns Mitkä mallit ovat sidoksissa tähän malliin? 8

9 GoF suunnittelumallien luokittelu Luontimallit: Luontimallit abstrahoivat olioiden luomisprosessia, minkä avulla järjestelmät voidaan suunnitella riippumattomiksi siitä, miten niiden oliot luodaan. Rakennemallit: Rakennemallit huolehtivat olioiden välisistä suhteista ja siitä miten nämä muodostavat isompia kokonaisuuksia. Rakennemalleja käytetään myös suurten ohjelmistojen tehokkuuden ja muistin käytön optimointiin. Käyttäytymismallit: Käyttäytymismallit huolehtivat algoritmeista ja olioiden välisistä vastuuketjuista. Olioiden ja luokkien määrittelyn lisäksi käyttäytymismallit ottavat kantaa niiden väliseen kommunikaatioon. 9

10 GoF suunnittelumallien luokittelu Luontimallit: Tehdasmetodi (Factory Method), Abstrakti tehdas (Abstract Factory), Rakentaja (Builder), Prototyyppi (Prototype), Ainokainen (Singeleton) Rakennemallit: Sovitin (Adapter), Silta (Bridge), Kooste (Composite), Kuorruttaja (Decorator), Julkisivu (Facade), Hiutale (Flyweight), Sijainen/ Edustaja (Proxy) Käyttäytymismallit: Tulkki (Interpreter). Operaatiorunko (Template Method), Vastuuketju (Chain of Responsibility), Komento (Command), Iteraattori (Iterator), Välittäjä (Mediator), Muistio (Memento), Tarkkailija (Observer), Tila (State), Strategia (Strategy), Vierailija (Visitor) 10

11 Miten edetään suunnittelumallien käyttöön Shalloway & Trott (2005) esittävät vaiheita 1. pyri ymmärtämään konteksti (big picture), johon ohjelmisto sijoittuu 2. etsi suunnittelumalleja, jotka soveltuvat tälle abstraktiotasolle 3. aloita ohjelmiston rungon suunnittelu, jossa suunnittelumallit ovat mukana 4. mene suunnittelussa tarkemmalle tasolle ja etsi sopivia suunnittelumalleja alemmalla abstraktiotasolla 5. toista askelia 1 4, kunnes suunnittelu on valmis 6. tarkenna suunnitelmaa sovittamalla suunnittelumallit rakennettavaan ohjelmistoon 11

12 Malliperustainen suunnittelu Arkkitehtuurimallit (architectural patterns) kuvataan ohjelmiston perusrakenne ja määritellään koko järjestelmän kattavia ominaisuuksia esimerkkinä Model-View-Controller (MVC) malli Idiomit / koodausmallit kuvaa tunnetun tavan, miten jokin tehtävä suoritetaan valitulla kielellä Mallikieli (pattern language) tunnetaan useita suunnittelumalleja sovellusalueella ja se miten ne toimivat yhdessä sovellusalueen ongelmien ratkaisuissa Antisuunnittelumalli (antipattern) tavoitteena on tunnistaa annetun kuvauksen perusteella jokin ohjelmiston, projektin tai prosessin rakenteessa oleva perustavanlaatuinen ongelma antisuunnittelumalli esittää korjausehdotuksen tai tavan vähentää ongelman kriittisyyttä 12

13 Rakennemallit: Composite (Kooste) mallin yleinen muoto Client Component anoperation() addcomponent() removecomponent() getchild() * 1 Leaf anoperation() OtherLeaf anoperation() Composite /componentcollection anoperation() addcomponent() removecomponent() getchild() Collection of Component object identifiers for all c in componentcollection c.anoperation() anoperation() is polymorphically redefined (Bennett et al., 2010) 13

14 Käyttäytymismallit: Observer (Tarkkailija) Tarkkailija-suunnittelumallissa ajatellaan, että maailma koostuu kahdenlaisista olioista: subjekteista, joita tarkkaillaan, ja tarkkailijoista, jotka tarkkailevat. Kullakin subjektilla voi olla mielivaltaisen monta tarkkailijaa, joiden laatua subjekti ei tunne. Aina, kun subjektin tila muuttuu, se ilmoittaa tästä muutoksesta kaikille tarkkailijoilleen. tarkkailijat reagoivat tähän kukin omalla tavallaan Kun tarkkailija haluaa alkaa tarkkailla tiettyä subjektia, se ilmoittautuu tälle. (Raisamo 2007) 14

15 Observer (Tarkkailija) suunnittelumalli (Raisamo 2007) 15

16 Observer (Tarkkailija) suunnittelumalli Esimerkkinä käyttöliittymäarkkitehtuuri: Subjektina on itse sovellus tai sen osa ja tarkkailijana tämän näkymä näytöllä. Kun sovelluksen tila muuttuu, kaikille sen näkymille ilmoitetaan muutoksesta. Elementtien ei tarvitse tuntea toisiaan, vaikka ne riippuvatkin toisistaan. Sovelluksen ei tarvitse tuntea näyttöjen tarkempaa laatua eikä toteutustapaa ainoastaan tarkkailijarajapinta (operaatio), jolla muutoksesta ilmoitetaan. (Raisamo 2007) 16

17 Observer (Tarkkailija) suunnittelumalli Tämä suunnittelumalli sopii sellaisiin tilanteisiin, joissa toisistaan riippuvat oliot halutaan toteuttaa mahdollisimman riippumattomasti. vaikka subjektin on tunnettava tarkkailijoiden ilmoitusoperaatio (rajapinta), subjekti ei tule riippuvaiseksi tietystä tarkkailijaluokasta. Tarkkailijarajapinta voidaan määritellä kutakin subjektiluokkaa kohden erikseen. Kaikki tarkkailijarajapinnan toteuttavat luokat voivat toimia kyseisen subjektin tarkkailijoina. (Raisamo 2007) 17

18 Observer (Tarkkailija) suunnittelumallin sekvenssikaavio (Raisamo 2007) 18

19 Esimerkki: Useita näkymiä, automaattinen päivitys 19

20 Käyttöliittymän suunnittelumallit Käyttöliittymän suunnittelumallit voidaan luokitella malleiksi, jotka tukevat esim: koko käyttöliittymän rakentamista TopLevelNavigation pattern sivun suunittelua CardStack pattern kyselylomakkeiden käyttöä Fill-in-the-Blanks taulukoita SortableTable navigointia EditInPlace avun tarjoamista Chain of Responsibility 20

21 Kehykset (ohjelmistokehys -> sovelluskehys, komponenttikehys) Ohjelmistokehys on kiinteästi toisiinsa liittyvien luokkien ja/tai rajapintojen kokoelma, joka toteuttaa tietyn ohjelmistoperheen perusarkkitehtuurin Ohjelmistokehystä erikoistamalla saadaan sovellus tai komponentti Tällöin käytetään kehyksestä termiä sovelluskehys tai komponenttikehys Sovelluskehys (Application Framework) on ohjelmisto, joka sisältää tietyn tyyppisten sovellusten perusratkaisut esim. graafisten käyttöliittymien toteutusta tukeva luokkakirjasto (Microsoftin MFC ja Sunin AWT & Swing) Komponenttikehyksen esimerkkinä Visual Component Framework GUI pohjaisten C++ sovellusten rakentamiseen Windows, (Mac & Linux on tulossa) alustoilla 21

22 Alustakehitysprosessi (domain engineering) Vaatimusmäärittely Sovellusalueen käsitemalli Muunneltavuusvaatimukset Alustan suunnittelu Tuoterunkoarkkitehtuuri Alustan toteutus Yhteiset vaatimukset Toteutusympäristö Alusta Tuote Tuotekehitysprosessi (application engineering) Tuotekohtainen koodi Vaatimusmäärittely Tuotevaatimukset Tuotteen toteutus Kehystekniikat tarjoavat perustan muunneltavuudelle 22

23 Luku 13: Web-sovelluksen suunnittelu Web sovellusten luokittelu ja ominaispiirteet RUP ja XP Web sovelluksen kehittämisessä laatutekijät graafinen suunnittelu, sisällön suunnittelu, arkkitehtuurin suunnittelu ja navigoinnin suunnittelu hypermedia suunnittelumallit ja UWE kuvausmenetelmä 23

24 Web-sovelluksen suunnitteluaktiviteetit Käyttöliittymän suunnittelu Graafinen suunnittelu Sisällön suunnittelu Navigoinnin suunnittelu Arkkitehtuurisuunnittelu Komponenttisuunnittelu 24

25 Web-sovellusten luokittelu / Murugesan & Ginige 2005 Toiminnallisuus Tiedottavat Interaktiiviset Transaktiopohjaiset Töiden järjestelyyn suuntautuneet Yhteistyötä tukevat Yhteisöt, markkinapaikat Esimerkkejä Online sanomalehdet, online kirjat, tuoteluettelot, uutiskirjeet Ilmoittautumislomakkeet, räätälöity tiedon esittäminen, pelit Verkkokauppa, verkkopankki, verkossa tapahtuva matkan varaus Verkossa tapahtuva suunnittelu ja aikataulutus, tilan valvonta, toimittajaketjun hallinta Hajautetut kirjoitusjärjestelmät, yhteissuunnittelua tukevat työkalut Keskusteluryhmät, verkkomarkkinat, sähköiset kauppapaikat 25

26 Web sovelluksen ominaispiirteet Verkosta riippuvuus (verkkointensiivisyys) sovellus elää verkossa ja palvelee hyvin hajanaisen asiakaskunnan tarpeita Samanaikaisuus suuret käyttäjämäärät käyttävät sovellusta samaan aikaan, käyttötavat voivat poiketa paljonkin Ennustamaton kuormitus käyttäjämäärät voivat vaihdella huomattavasti eri päivinä Suorituskyky vasteajan täytyy olla kohtuullinen, jotta käyttäjä on tyytyväinen 26

27 Palveluaste (availability) Web sovelluksen ominaispiirteet vaikka 100 % palveluastetta ei saavuteta, suositun sovelluksen käyttäjät vaativat 24/7/365 palvelua Tietoa käyttäjälle sovelluksen ensisijainen tarkoitus on hypermedian keinoin tarjota tietoa eri esitysmuodoissa Sisällön tärkeys sisällön laatu ja esitystapa tärkeimmät sovelluksen laatutekijät Jatkuva evoluuutio Web sovellukset kehittyvät jatkuvasti, eivät suunnitelluin julkaisuin, kuten perinteiset 27

28 Web sovelluksen ominaispiirteet Välittömyys (kehittämisnopeus) Web sovellusten kehittämisaika muutamia päiviä/ viikkoja Varmuus sovelluksen käytön oltava turvallista käyttäjän kannalta Esteettisyys teknisen suunnittelun lisäksi tarvitaan myös ulkonäön suunnittelua 28

29 RUP & XP Web sovelluksen kehittämisessä julkaisu ohjelmiston uusi osa Hyväksymistesti Asiakas käyttää & arvioi Jatkuva integrointi Koodaus Komponenttitesti TDD Koodin yhteisomistus Pienet julkaisut toimitus rakentaminen refaktorointi kommunikointi Asiakkaan läsnäolo mallintaminen Liiketoiminta-analyysi -sovelluksen konteksti -sidosryhmien tunnistus -integrointi muihin järjestelmiin Vaatimusten keräys suunnittelu Projektisuunnitelma Metafora Suunnittelupeli Analyysimalli -sisältö -interaktio -toiminta -konfiguraatio Suunnittelumalli -sisältö -arkkitehtuuri -navigointi -käyttöliittymä -komponentit 29

30 Web sovelluksen rakentaminen - parhaat käytänteet Käytä aikaa liiketoimintatarpeiden ja tuotetarpeiden ymmärtämiseen, vaikka yksityiskohdat voivat vielä muuttua Kuvaa käyttäjien vuorovaikutus skenaarioilla Tee projektisuunnitelma, vaikka kevytkin Käytä aikaa suunnitteluun, mitä aiot rakentaa Katselmoi mallit niiden yhdenmukaisuuden ja laadun kannalta Käytä sellaisia työkaluja ja teknologiaa, jotka mahdollistavat mahdollisimman laajan uudelleenkäytön Tee riittävän laajat testisuunnitelmat ja testit ja suorita ne ennen julkaisua 30

31 Huonot käytänteet We have a great idea, so let s begin building the WebApp - now ja miten pitäisi tehdä: Käytä muutamia tunteja/päiviä kuvataksesi sovelluksen liiketoimintaa, ja varmista että rahoittajat ja käyttäjät hyväksyvät sen Stuff will change constantly, so there s no point in trying to understand WebApp requirements (never write anything down) ja miten pitäisi tehdä: Vaikka vaatimukset muuttuvat, tiedon keruu sanallisesti on kevyt vaihtoehto ja vähentää turhia muutoksia 31

32 Huonot käytänteet Developers whose dominant experience has been in traditional software development can develop WebApps immediately. No new training is required. ja miten pitäisi tehdä: Web sovellukset vaativat erityisosaamista, johon tarvitaan harjoittelua Be bureaucratic ja miten pitäisi tehdä: Suosi ketteriä prosesseja, jotka hyödyntävät tiimin valmiuksia. Jos metriikkatietoa tarvitaan, toteuta se niin kevyesti kun mahdollista Testing? Why bother? ja miten pitäisi tehdä: Jos loppukäyttäjät joutuvat testaajiksi, he helposti luopuvat sovelluksen käytöstä 32

33 Web-sovellusten vaatimukset ja keinot niiden täyttämiseksi / Murugesan & Ginige 2005 yhtenäinen ulkomuoto ja toimintatapa tiedon yhdenmukaisuus läpi järjestelmän tiedon helppo päivitys ja ylläpito uusien Web sivujen helppo lisäys keskitetty hallinto mekanismit laadun ja tiedon relevanttisuuden valvontaan hakukoneita suosiva rakenne sivujen luonti mallisivujen (template & style) avulla talletetaan tieto vain yhteen paikkaan, josta se haetaan tarvittaessa tiedon muutokset tehdään taustalla olevaan tietovarastoon navigointilinkkien dynaaminen generointi monitasoinen käyttäjien hallinta, joka tarjoaa erityispalveluja tietosisällöstä ja varastosta vastaaville metadatan käyttö Web-sivuille; Webrobottien käyttö keskeisen tiedon keruuseen ja laadun valvontaan meta-tagien käyttö ja hakukoneille rekisteröinti 33

34 Laatutekijöiden yhteys ei-toiminnallisiin vaatimuksiin Ei-toiminnalliset vaatimukset Tuotevaatimukset Yrityskohtaiset vaatimukset Ulkopuoliset vaatimukset Käytettävyyteen liittyvät Toiminnallisuuteen liittyvät Luotettavuuteen liittyvät Tehokkuuteen liittyvät Ylläpidettävyyteen liittyvät Siirrettävyyteen liittyvät ymmärrettävyys toimivuus analysoitavuus muutettavuus opittavuus viehättävyys vakaus testattavuus 34

35 Web-sovellusten laatu Kun Web-sovellukset ovat tulleet jokapäiväiseen elämään, niiltä vaaditaan luotettavuutta, suorituskykyä ja turvallisuutta Web-sovellusten laatu arvioidaan (Murugesan & Ginige 2005) skaalautuvuudella luotettavuudella palveluasteella ylläpidettävyydellä käytettävyydellä turvallisuudella (Dustin, Rashka & McDiarmid 2002) toiminnallisuudella turvallisuudella & yksityisyydellä suorituskyvyllä & skaalautuvuudella yhteensopivuudella käytettävyydellä 35

36 Olsina et al Käytettävyys Sivuston ymmärrettävyys On-line palaute ja opastus Käyttöliittymän laatu Erityispiirteet Toiminnallisuus Hakujen tehokkuus Navigointi- ja selausominaisuudet Sovellusalueen erityisominaisuudet Web-sovelluksen laatu Luotettavuus Linkkien virheetön käsittely Virheistä toipuminen Käyttäjän antaman tiedon validointi Tehokkuus Vasteaika Sivun luonti Grafiikan lataus Ylläpidettävyys Korjauksen helppous Sovitettavuus Laajennettavuus (vain siirrettävyys laatuominaisuus puuttuu ISO/IEC 9126 malliin verrattuna) 36

37 näkyvyys jäljitettävyys haettavuus saatavuus kuinka hyvin sivu löytyy latautumisnopeus sivulle pääsyn helppous ymmärrettävyys luettavuus kuuluvuus käsitettävyys oikea & ajanmukainen uskottavuus viehättävyys erilaistaminen eheys paikkansapitävyys navigoitavuus vuorovaikutteisuus miellyttävyys spesialiteetti identiteetti Verkkosivujen lisälaatutekijät / Fitzpatrick 2000 oikeellisuus käypäisyys käyttäjän onnistuminen pyrkimys paras alallaan tarjotun tuotteen esilletulo 37

38 Graafinen (esteettinen) suunnittelu Layoutin suunnittelun ohjeita älä pelkää tyhjää tilaa korosta sisältöä, siksi käyttäjä on sivulla (80% sisältöä, 20% muuta) järjestä sivun elementit ylä-vasemmalta ala-oikealle, käyttäjät lukevat sivua kuten kirjaa ryhmittele navigointi, sisältö ja toiminta sivulla, ihmiset etsivät malleja älä laajenna esitystäsi vierityspalkeilla, tarvittaessa vähennä asiaa tai käytä useampia sivuja suunnittele layout resoluution ja selaimen ikkunakoon mukaan, käytä esitettäville asioille prosenttiarvoja kiinteän koon sijaan 38

39 Arkkitehtuurin suunnittelu Sisällön arkkitehtuuri miten sisältöä kuvaavat oliot (tai olioiden kokoelma, kuten Web sivu) on rakennettu esitystä ja navigointia varten? lineaarinen rakenne: peräkkäinen, mutta voi sisältää myös vaihtoehtoisia polkuja (kysytään ensin tietoja) ritilä/ristikko (grid): jos sisällöstä voidaan tunnistaa ristikko-/ matriisirakenne (esim. kauppapaikka) hierarkia: yleisin, linkitys puumaisesti ja saman tason välillä verkko: linkitys lähes kaikkien komponenttien välillä Sovelluksen arkkitehtuuri miten tuetaan vuorovaikutusta, navigointia ja sisällön esitystä esim. MVC suunnittelumallia voi käyttää Web-sovelluksen rakentamisessa käyttöliittymän, toiminnan ja tiedon erotteluun 39

40 Navigoinnin suunnittelu Jokainen käyttäjä käyttää sovellusta eri tavalla > navigoinnille erilaisia tarpeita Käyttäjän vuorovaikutus sovelluksen kanssa toteutetaan navigointiyksiköillä (navigation semantic unit, NSU) NSU tehdään jokaiselle käyttötapaukselle NSU kertoo, miten toimija etenee (ways of navigation) NSU koostuu solmuista (navigation node, NN) ja niiden välisistä linkeistä linkki 12 linkki 24 NN 2 NN 4 NN 1 linkki 13 NN 3 linkki 34 40

41 Yhteinen käsitteellinen malli, joka kuvaa sovelluksen logiikan linkki 12 linkki 24 NN 2 NN 4 NN 1 linkki 13 NN 3 linkki 34 linkki 14 linkki 24 NN 1 NN 4 linkki 13 NN 3 linkki 34 Web-sovellukset, jotka on toteutettu yhteisen mallin eri näkyminä linkki 23 NN 3 NN 2 NN 4 linkki 34 Käyttöliittymäoliot esittävät navigointisolmut eri esityslaitteilla Kolmitasoinen suunnitteluarkkitehtuuri / Jacyntho, Schwabe, Rossi

42 NSU:n luonti Käyttötapaus: Valitse SafeHome järjestelmän komponentit Web sovellus suosittelee tuotteen komponentteja (kuten ohjauspaneelit, anturit, kamerat) ja muita tarvikkeita (kuten ohjausohjelmisto) jokaiseen huoneeseen tai tilaan. Jos pyydän vaihtoehtoisia ratkaisuja, Web-sovellus tuottaa ne. Voin myös katsella komponenttien ja niiden koosteen hintatietoja. Web-sovellus tuottaa valitsemilleni komponenteille kokonaislaskun. <<navigointilinkki>> kysy vaihtoehto Huone <<navigointilinkki>> suosittele komponentit TuoteKomponentti <<navigointilinkki>> näytä TuoteKomponentti <<navigointilinkki>> valitse huone <<navigointilinkki>> paluu huoneeseen <<navigointilinkki>> hanki TuoteKomponentti <<navigointilinkki>> näytä kuvaus <<navigointilinkki>> katso KokonaisLaskua KokonaisLasku <<navigointilinkki>> hanki TuoteKomponentti KompKuvaus Kaavio MarkkinointiKuvaus TekninenKuvaus Valokuva Video 42

43 Käsitteellinen kaavio (osa) SafeHomeAssured.com kysytään suositeltavaa komponenttia Huone huonenimi koko ikkunat ovet TuoteKomponentti osanumero osanimi osatyyppi kuvaus hinta luouusiosa() annakuvaus() annateknmäär() asiakas valitsee komponentin Anturi Kamera Säädintaulu Ohjelmisto KokonaisLasku tunniste materiaalilista osienmäärä kokonaishinta lisääalkio() tuhoaalkio() editoialkio() nimi() laskehinta() asiakas jatkaa komponenttien valintaa Tilaus tilausnro asiakasinfo KokonaisLasku lähetysinfo laskutusinfo asiakas pyytää toimituksen OsaLasku määrä osanro osanimi osatyyppi hinta lisäälistaan() tuhoalistasta() 43

44 Hypermediasuunnittelumallit Web-sovelluksiin räätälöityjä Arkkitehtuurimallit sisällön ja sovelluksen arkkitehtuurin sunnitteluun (esim. Java Blueprints, java.sun.com/blueprints) Komponentin rakentamismallit suositeltuja menetelmiä, miten kooste rakennetaan Navigointimallit avustavat NSU:n ja koko navigointivuon suunnittelussa Esitysmallit avustavat esim. sovelluksen käytettävyyden parantamisessa Käyttäytymis/käyttöliittymämallit kuinka parhaiten esitetään käyttäjälle esim. tietyn toiminnan seuraukset, linkin määränpää,... 44

45 HDM 1995 RMM EORM 1996 OOHDM WebML UWE OOH WebSA WebRE NDT WUML HDM = Hypermedia Design Model RMM = Relation Management Method EORM = Enhanced Object Relationship Methodology OOHDM = Object-Oriented Hypermedia Design Method UWE = UML-Based Web Engineering WebML = Web Modeling Language NDT = Navigational Development Techniques WebSA = Web Software Architecure WebRE = Metamodel for Web Requirements IFML = Interaction Flow Modeling Language 2007 = navigointiluokat käytössä 2013 IFML Web metodologiat / Escalona & Aragon, IEEE Transactions on SE,

46 UWE = UML-Based Web Engineering 46

47 navigationclass Hypertekstisolmu, jossa käyttäjä käy selailun aikana navigationlink Hyperlinkki, jonka avulla päästään lähtösolmusta kohdesolmuun 47

48 index Käytetään navigointilinkeille, jos assosiaatiossa kertautuminen > 1 menu Käytetään navigointiluokille, jos lähteviä assosiaatioita > 1 query Käytetään navigointiluokan olion valintaan 48

49 {ishome} Sovelluksen alkusolmu (ei tulevia linkkejä) {islandmark} Solmuun voidaan tulla mistä tahansa solmusta (kaikissa muissa solmuissa on linkki tänne) 49

50 50

51 51

52 52

53 53

54 IFML Major elements: containers components actions events, navigation flows data flows parameter bindings 54