8 Hypermedian suunnitteleminen

8 Hypermedian suunnitteleminen 8 Hypermedian suunnitteleminen Mietitään seuraavaksi hypermediaa teknisen suunnittelun näkökulmasta. Käytettävyyteen liittyvään suunnitteluun palataan myöhemmin kurssilla. Hypermedian suunnitteleminen vaatii eri alojen asiantuntijoiden yhteistyötä: - sisältö, käytettävyys, ulkoasu, tekniikka, saavutettavuus,... Suurin haaste suunnittelussa on yhteisen kielen löytäminen asiantuntijoiden välille. Keinoja esimerkiksi: miellekartat (mind map), erilaiset kaaviokielet (UML, E-R -kaaviot) tai prototypointi. Ohjelmistotuotannosta tuttu vesiputousmalli ei sellaisenaan sovellu hypermedian suunnittelemiseen. Keskeinen ero yleisen ohjelmistosuunnittelun ja hypermedian suunnittelemisen välillä on se, että hypermediasovelluksella on valmistuttuaan sisältö. Tutustutaan seuraavaksi pikaisesti RMM (Relationship Management Methodology) - suunnittelumalliin, joka jäsentää hypermediasovelluksen suunnitteluprosessin vaiheisiin mielenkiintoisella tavalla. Käytettävyyteen liittyviä lähestymistapoja (eri tasoisia): HCI (Human-Computer Interaction), heuristiset listat (Nielsen),... 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 195

RMM (Relationship Management Methodology) RMM on erityisesti rakenteisen hypermedian suunnittelemiseen tarkoitettu suunnittelumalli, joka jakaa hypermediasovelluksen suunnitteluprosessin ohjelmistotuotannosta tutun vesiputousmallin tavoin vaiheisiin. RMM soveltuu erityisesti datakeskeistä tietoa sisältävän sovelluksen suunnittelemiseen: - datakeskeinen tieto tarkoittaa tietoa, joka voidaan luontevasti jakaa palasiin (reseptit, levyjen tiedot, henkilötiedot,...) - datekeskeisen tiedon vastakohta on dokumenttikeskeinen tieto (kirjat, raportit, oppimateriaali,...) RMM ottaa kantaa sekä yksittäisten dokumenttien että koko hypermediasovelluksen (hypertekstiverkon) rakenteeseen kuten myös sovelluksen toiminnallisuuteen. RMM jakaa suunnittelun ja toteuttamisen seitsemään vaiheeseen: S1 Tietomallin suunnittelu, S2 Näkymien suunnittelu, S3 Navigaation suunnittelu, S4 Muunnosprosessien suunnittelu, S5 Käyttöliittymän suunnittelu, S6 Ajonaikaisen toiminnallisuuden suunnittelu sekä S7 Toteuttaminen, testaus ja arviointi. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 196

RMM-mallin mukainen vaiheistus Tietomallin suunnittelu Näkymien suunnittelu Navigaation suunnittelu S1 S2 S3 Muunnosprosessien suunnittelu S4 Käyttöliittymän S5 Ajonaikaisen S6 suunnittelu toiminnallisuuden suunnittelu Toteuttaminen, testaus ja arviointi S7 RMM keskittyy erityisesti vaiheisiin S1-S3 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 197

RMM-mallin vaihejako tarkemmin Käydään RMM-mallin vaihejako läpi yleisesti ja levyjen tietojen julkaisemista käsittelevän esimerkin (kursiivilla) avulla. S1 Tietomallin suunnittelu (E-R design): - sovelluksen tietomallin eli tietoalkioiden ja niiden välisten suhteiden määrittely - sovellukseen haluttavat navigointipolut on otettava huomioon suhteita määriteltäessä - vaihe vastaa pitkälti esimerkiksi relaatiotietokannan suunnittelua - RMM käyttää tietomallin kuvaamisessa E-R -kaavioita, jotka voidaan korvata esimerkiksi UML-kaavioilla tai mielleyhtymäkartoilla Esimerkki: Levyn tietoja ovat nimi, tyylilaji (pop, rock tai disko), esittäjä ja kappalelista. Kullakin kappaleella on nimi ja pituus. S2 Näkymien suunnittelu (Slice design): 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 198

- tietoalkioiden paloittelu yksittäisiksi näkymiksi (hypertekstin solmut) ja näkymien välisten yhteyksien muodostaminen (hypertekstiverkko) rakenteellisten linkkien avulla - näkymien suunnitteleminen on hypermediasovelluksen suunnittelun erityispiirre Esimerkki: Levyistä muodostetaan hakemistonäkymät jokaiselle tyylilajille. Levyt ryhmitellään hakemistoon esittäjän nimen perusteella. Hakemistossa levyn tiedoista näkyy nimi, jonka toimii linkkinä levyn tietoihin. Jokaisesta levystä tehdään lisäksi oma näkymä. S3 Navigaation suunnittelu (Navigational design): - assosiatiivisten linkkien määritteleminen tietomallissa kuvattujen tietoalkioiden välisten suhteiden perusteella - sovelluksen ylläpidon ja päivittämisen helpottamiseksi assosiatiiviset linkit määritellään yksittäisten linkkien sijaan yleisten sääntöjen avulla Esimerkki: Kunkin levyn yhteyteen sijoitetaan linkit saman esittäjän muihin levyihin (riippumatta tyylilajista). S4 Muunnosprosessin suunnittelu (Conversion protocol design): 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 199

- säännöt suunnitelman toteuttamiseen tietyn kohdejärjestelmän (esimerkiksi WWW) mukaisilla välineillä (esimerkiksi HTML-kieli) - muunnosprosessi voidaan toteuttaa joko ohjelmallisesti (esimerkiksi PHP ja tietokanta) tai mekaanisesti (ohjeistus HTML-merkkauksesta) Esimerkki: Hakemistot toteutetaan järjestämättömänä listana (ul-elementti), kappalelistan tiedot taulukkona (table-elementti),... S5 Käyttöliittymän suunnittelu (User-interface screen design): - komponenttien (navigaation apuvälineet, sisältö,...) sijoittelu käyttöliittymään (=asettelu) ja näkymien ulkoasu Esimerkki: Kaksi sivupohjaa, toinen hakemistoille ja toinen levyn tiedoille. Sivupohjat toteutetaan HTML-dokumentteina. Yksityiskohtainen ulkoasu määritellään (yhdellä) CSS-tyylitiedostolla. S6 Ajonaikaisen toiminnallisuuden suunnittelu (Run-time behaviour design): - navigointihistoriaan, käyttäjän seurantaan tai esimerkiksi hakuihin liittyvän toiminnallisuuden toteutuksen suunnittelu Esimerkki: Toteutetaan hakutoiminto levyn tietojen perusteella. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 200

S7 Toteuttaminen, testaus ja arviointi (Construction, testing and evaluation): - järjestelmän toteuttaminen: ohjelmointi, dokumenttien merkkaaminen, tyylitiedostojen kirjoittaminen, kuvien piirtäminen,... - testaamisessa keskityttävä erityisesti navigointipolkujen toimivuuden varmistamiseen Esimerkki: Sivupohjan irrottaminen yksittäisten sivujen sisällöstä: Dreamweaver. Hakutoiminto: PHP ja tietokanta. Ikonit: CorelDRAW. Kuvankäsittely: Photoshop. Vaiheistuksen ohella RMM määrittelee RDMD (Relationship Management Data Model) -mallin, jonka avulla hypermediasovellus voidaan kuvata. RDMD sisältää esimerkiksi seuraavat komponentit: - yhden-, kahden ja monensuuntaiset linkit - ehtoon perustuva hakemisto (Conditional Index) - ehtoon perustuva kiertokäynti (Conditional Guided Tour) - ehtoon perustuva kiertokäynti hakemistolla (Conditional Indexed Guided Tour) Kiertokäynti on yleinen navigointiratkaisu hypermediasovelluksissa. Ehtoon perustuva tarkoittaa sitä, että kiertokäynnin sisältö valitaan ehdon perusteella. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 201

Lopuksi RMM on julkaistu vuonna 1995 ja sen pohjalta on kehitetty lukuisia suunnittelumenetelmiä. Samat ideat toistuvat menetelmästä toiseen. RMM-mallin avulla voidaan merkittävästi parantaa uudelleenkäyttöä ja ylläpidettävyyttä hypermediasovelluksissa. Tämä perustuu siihen, että RMM erottaa hypermediasovelluksen suunnittelun tarkoituksenmukaisiin osiin: - sovellusalueen sisällön mallintaminen (E-R - tai UML-kaaviot, käsitekartat) - hypermediasovelluksen rakenteen mallintaminen (näkymät ja navigaatio) - hypermediasovelluksen esitystavan mallintaminen (muunnosprosessi, käyttöliittymä, toiminnallisuus) Jakoa voi käyttää jäsentämään hypermediasovelluksen teknistä suunnittelua ja myös käytännön toteutusta (monikanavajulkaiseminen). Pyörää ei kannata keksiä uudestaan! Vaihejako on kurssin kannalta RMM-mallin keskeisin osa, koska sitä voidaan käyttää sovelluksen suunnittelu- ja toteutusprosessin jäsentämisessä ja siten kokonaisten hypermediaprojektien suunnittelun tukena. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 202

P.S. Rakenteinen WWW-hypermedia Rakenteisuuden ideaa voi WWW:ssä toteuttaa monella tavalla: - tietokanta (PostgreSQL, MySQL,...) & ohjelmointikieli (PHP, Java, Python,...) - rakenteiset dokumentit (XML) & muuntaminen (XSLT) - kurssin näkökulma: HTML & CSS HTML: sisällön kuvaileminen - muodostetaan sisällön käsitemalli - toteutetaan käsitemalli hypertekstinä CSS: ulkoasu - määritellään ulkoasu käsitemallin mukaan toteutetun rakenteen perusteella (valitsimet) Keinoja riittävän tarkan rakenteen muodostamiseen: a) kuvaileva HTML-merkkaus, b) kuvailevien HTML-elementtien luokittelu (class-attribuutti) ja yksilöinti (id-attribuutti) ja c) sovelluskohtaisen rakenteen täydentäminen div- ja span-elementtien avulla 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 203

DIV- ja SPAN-elementit Elementit div ja span ovat merkitykseltään tyhjiä, joita voidaan käyttää HTMLdokumentin jäsentämiseen Elementtejä käytetään yhteistyössä CSS-tyylien kanssa Idea: uusien elementtien luominen: elementtiin liitetään class- tai id-attribuutti, jonka perusteella voidaan kirjoittaa tarvittava CSS-säännön valitsin Tärkeää: div- ja span-elementtejä kannattaa käyttää vasta siinä tapauksessa, että HTML-elementeistä ei löydy käyttötarkoitukseen sopivaa vaihtoehtoa. Esimerkkejä: <h1>oikea tapa</h1> <div class= otsikko >Väärä tapa</div> <p> <span class= tarkea >Väärä tapa</span> <em>oikea tapa</em> </p> <div class= lainaus ><p>väärä tapa</p></div> <blockquote><p>oikea tapa</p></blockquote> 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 204

Esimerkki: sisällön merkkaaminen Esimerkki levyn tietojen kuvaamisesta HTML-kielellä: <h1>absurdistan</h1> <p class="esittaja"><em>esittäjä:</em> Laika & the Cosmonauts</p> <div class="kappalelista"> <h2>kappalelista</h2> <table> <tr><th>nimi</th><th>pituus</th></tr> <tr><td>disconnected</td><td>04:14</td></tr> <!--... --> </table> </div> Ote tyylitiedostosta: div.kappalelista { margin-left: 5ex;} div.kappalelista th { background-color: #CCCCCC;} p.esittaja em { font-style: normal; font-weight: bold;} Rakenteen kuvaaminen sisällön näkökulmasta parantaa mahdollisuuksia vastata suunnittelemattomiin ulkoasun muokaamisen tarpeisiin 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 205

P.P.S. WWW-hypen toteuttaminen: HTML-editorit HTML:n näkökulmasta editorit voidaan jakaa neljään kategoriaan: Tavalliset tekstieditorit: eivät tunnista HTML-merkkausta Notepad, Wordpad Erityisesti HTML-merkkauksen kirjoittamiseen tarkoitetut editorit - merkkauksen korostus (elementit, attribuutit) - pikavalintoja erilaisten elementtirakenteiden lisäämiseen - elementtien ja attribuuttien nimien ehdottaminen/täydentäminen - HTML-Kit, ks. http://www.chami.com/html-kit/ - PHPEdit, ks. http://www.phpedit.com/ - HomeSite, ks. http://www.macromedia.com/software/homesite/ 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 206

WYSIWYG-editorit (What You See Is What You Get, ~Näet mitä teet): 8 Hypermedian suunnitteleminen - Käyttö vastaa normaalia tekstinkäsittelyohjelmaa; HTML-merkkauksen sijaan käyttäjä näkee suoraan lopputuloksen ulkoasun - Helpottaa alkuvaiheessa sivujen tekemistä, mutta kuvailevan merkkauksen tuottaminen on hankalaa tai suorastaan mahdotonta - Mozilla Composer, MS Frontpage Express - Tarkoitettu yksittäisten dokumenttien editointiin Sivuston hallintaan tarkoitetut työvälineet: - laaja valikoima ominaisuuksia WYSIWYG-editorista FTP-asiakasohjelmaan - Macromedia Dreamweaver, ks. http://www.macromedia.com/ - poimintoja Dreamweaverin ominaisuuksista: sivupohjat, kirjastoalkiot, valmiit merkkaus- ja koodikirjastot (HTML, JavaScript), ohjeet, esimerkit, linkkien ylläpito, jne. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 207

P.P.P.S. WWW ja tiedostot Ryhmittele HTML-dokumentit tiedostonimien alkuliitteillä, esim. levy-laikaandthecosmonauts-absurdistan.html Dokumentit voi ryhmitellä myös hakemistojen avulla Dokumentit voidaan versioida liittämällä tiedostonimen perään päivämäärä, esim. index.html index-2004-10-26.html Tiedostonimissä ei kannata käyttää ääkkösiä, välilyöntejä tai muita erikoismerkkejä: suositeltavaa pitäytyä aakkosissa, numeroissa sekä ala- ja väliviivassa Käytä kuvaavia tiedostonimiä, esim. dokumentin otsikkoa (em. rajoituksin) UNIX- ja LINUX-palvelimet erottelevat suuret ja pienet kirjaimet toisistaan SSH saattaa muuttaa siirron yhteydessä tiedostonimien kirjainten kokoa 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 208