5 CSS1-ominaisuudet. 5 CSS1-ominaisuudet

5 CSS1-ominaisuudet 5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties) 3. Tekstiominaisuudet (Text properties) 4. Suorakaideominaisuudet (Box properties) 5. Luokkaominaisuudet (Classification properties) Ominaisuudet voivat saada seuraavia arvoja: 1. Pituusarvoja (Lenght units) 2. Prosenttiarvoja (Percentage units) 3. Väriarvoja (Color units) 4. Lokaattoreita (URL) 5. Avainsanoja (Keyword) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 121

5 CSS1-ominaisuudet Arvot Käydään aluksi läpi ominaisuuksille annettavissa olevat yleiset arvovaihtoehdot. Pituusarvot (<width>) Pituusarvon yksiköt on jaettu suhteellisiin ja absoluuttisiin. Pituusarvoon viitataan tässä materiaalissa tunnisteella <length>. Suhteellisia yksiköitä ovat elementin kirjasimen korkeus (em), x-kirjaimen korkeus (ex) ja pikseli (px). Esimerkkejä: h1 {margin: 0.5em;} /* ems, the height of the element's font */ h1 {margin: 1ex;} /* x-height, ~the height of the letter 'x' */ p {font-size: 12px;} /* pixels, relative to canvas */ Yksiköt em ja ex viittaavat sen elementin kirjasimen kokoon, jota sääntö koskee. Poikkeuksena on kirjasimen koko ('font-size'), jossa yksiköt viittaavat elementin vanhemman kirjasimen kokoon. Absoluuttisia yksiköitä ovat tuuma (in), senttimetri (cm), millimetri (mm), piste (pt) ja pica (pc). Yksi piste vastaa 1/72 tuumaa ja yksi pika 12 pistettä. Esimerkkejä: h1 { margin: 0.5in; } /* inches, 1in = 2.54cm */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 122

h4 { font-size: 12pt} /* points, 1pt = 1/72 in */ h4 { font-size: 1pc } /* picas, 1pc = 12pt */ Prosenttiarvot (<percentage>) 5 CSS1-ominaisuudet Prosenttiarvo viittaa pääsääntöisesti sen elementin kirjasimen kokoon, jota sääntö koskee. p { line-height: 120%; } /* 120% of the element's 'font-size' */ Elementin jälkejäiset perivät prosenttiarvon perusteella lasketun arvon, eivät koskaan prosenttiarvoa. Väriarvot (<color>) Väriarvo voi olla joko avainsana tai RGB (Red Green Blue)-arvo. Väriarvoksi voidaan määritellä jokin avainsanoista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white tai yellow. RGB-arvo voidaan antaa joko heksadesimaalimuodossa, kolmena kokonaislukuna (0-255) tai kolmena prosenttiarvona. Heksadesimaalimuotoinen RGB-arvon esittämistapa on yleisesti käytössä myös HTML-kielessä. Heksadesimaalimuotoinen väriarvo alkaa aina #-merkillä: p {color: #FF0000;} /* #rrggbb */ MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 123

5 CSS1-ominaisuudet RGB-arvon kokonaislukuesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon välillä 0-255: p {color: rgb(255,0,0);} /* rgb(rrr,ggg,bbb), 0-255 */ RGB-arvo prosenttiesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon väliltä 0.0%-100.0%: p {color: rgb(50%,0%,0%);} /* rgb(rrr%,ggg%,bbb%), 0.0%-100.0% */ Lokaattorit (<url>) URL-osoitteeseen viitataan seuraavalla merkinnällä: body {background-image: url(http://www.osoite.fi/kuva.gif);} URL-osoite voi olla myös suhteellinen. Suhteelliset osoitteet käsitellään suhteessa tyylitiedostoon. body {background-image: url(kuva.gif);} Avainsanat Avainsanat ovat tapauskohtaisia ja ne on käyty läpi kunkin ominaisuuden yhteydessä. Sitten ominaisuuksien kimppuun: MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 124

5 CSS1-ominaisuudet Kirjasinominaisuudet Kirjasin Ominaisuus: font-family Arvo: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] p {font-family: "Times New Roman", Times, serif;} Kirjasimelle voidaan normaalista poiketen antaa useita arvoja, koska eri koneiden kirjasinvalikoimat eroavat toisistaan. Kirjasimia etsitään koneesta listan määrittelemässä järjestyksessä. Viimeisenä vaihtoehto kannattaa antaa yleinen, käyttöjärjestelmästä riippumaton kirjasimen nimi (generic family): 'serif' (esim. Times), sans-sefif' (esim. Helvetica), cursive' (esim. Zaph-chancery), 'fantasy' (esim. Western) tai 'monospace' (esim. Courier). MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 125

5 CSS1-ominaisuudet Kirjasimen tyyli Ominaisuus: font-style Arvo: normal italic oblique em {font-style: normal;} Kirjasimen tyyliksi voidaan valita normaali ('normal') tai kursivoitu ('italic' tai 'oblique'). Kursivointi kannattaa tehdä selainten paremmin tukeman 'italic'-arvon avulla. Kirjasimen tyylin normal-arvo on tarpeen silloin, kun selain esittää oletuksena HTML-elementin kursivoituna (esim. em-elementti). Kirjasimen koko Ominaisuus: font-size Arvo: <absolute-size> <relative-size> <length> <percentage> Kirjasimen koko voidaan antaa neljän eri arvoalueen avulla: absoluuttisena arvona (<absolute-size>), suhteellisena arvona (<relative-size>), pituusarvona (<length>) tai prosenttiarvona (<percentage>). Absoluuttiset arvot: xx-small x-small small medium large x-large xx-large strong {font-size: large;} MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 126

5 CSS1-ominaisuudet Suhteelliset arvot: larger smaller blockquote {font-size: larger;} Suhteellinen arvo muuttaa kirjasimen kokoa yhden absoluuttisen arvon verran suuremmaksi ( larger ) tai pienemmäksi ( smaller ). Esimerkiksi larger muuttaa (vanhemmalta perityn) arvon x-small arvoksi small. Pituusarvot: Pituusarvo voi olla suhteellinen (em, ex tai px) tai absoluuttinen (in, cm, mm, pt tai pc). Suhteellisia arvot perustuvat normaalista poiketen elementin vanhemman kokoon. Prosenttiarvot: Prosenttiarvo kertoo elementin koon suhteessa vanhemmalta perittyyn kokoon. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 127

5 CSS1-ominaisuudet Kirjasimen vahvennus Ominaisuus: font-weight Arvo: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 em {font-style: normal; font-weight: bold;} strong {font-weight: bolder;} Normaali lihavoitu kirjasin (vrt. b-elementti) saadaan arvolla 'bold'. Kirjasimen vahvennus voidaan määritellä myös suhteellisesti: perittyä vahvennusta voidaan lisätä ('bolder') tai vähentää ('lighter'). Kolmas vaihtoehto on kirjasimen vahvennuksen määrittely numeroarvolla: arvo '400' vastaa arvoa 'normal' ja arvo '700' vastaa arvoa 'bold'. Kirjasimen merkkikoko Ominaisuus: font-variant Arvo: normal small-caps h3 {font-variant: small-caps;} Merkkikoon arvolla 'small-caps' isot kirjaimet kirjoitetaan normaalisti. Pienet kirjaimet kirjoitetaan ison kirjaimen näköisillä kirjaimilla, joiden koko on isoa kirjainta pienempi. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 128

5 CSS1-ominaisuudet Väri- ja taustaominaisuudet Väri Ominaisuus: color Arvo: <color> p {color: red;} p {rgb(255,0,0);} Ominaisuuden 'color' avulla määritellään elementin (piirto)väri. Yleisin käyttötapaus on tekstin värin määritteleminen. Taustaväri Ominaisuus: background-color Arvo: <color> transparent blockquote {color: #CCCCCC;} Taustaväri voidaan määritellä esimerkiksi tekstikappaleelle, taulukon solulle tai napille. Dokumentin taustaväri määritellään body-elementin avulla (periytyminen): body {background-color: lime;} MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 129

5 CSS1-ominaisuudet Taustakuva Ominaisuus: background-image Arvo: <url> none body {background-image: url(tomaatti.gif);} Taustakuva voidaan määritellä koko dokumentin sijaan esimerkiksi pelkästään taulukoille. Taustakuvan toisto Ominaisuus: background-repeat Arvo: repeat repeat-x repeat-y no-repeat body { background-image: url(tomaatti.gif); background-repeat: no-repeat;} Taustakuva voidaan määritellä toistettavaksi ainoastaan vaakasuunnassa ('repeat-x'), ainoastaan pystysuunnassa ('repeat-y') tai molemmissa ('repeat'). Arvolla 'no-repeat' taustakuvaa ei toisteta. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 130

5 CSS1-ominaisuudet Taustakuvan kiinnitys Ominaisuus: background-attachment Arvo: scroll fixed body { background-image: url(tomaatti.gif); background-attachment: fixed;} Arvo 'fixed' kiinnittää taustakuvan siten, että se pysyy paikallaan sivua vieritettäessä. Taustakuvan asemointi Ominaisuus: background-position Arvo: [<percentage> <length>]{1,2} [top center bottom] [left center right] Taustakuvan paikka määritellään arvoparina. Arvopari voi koostua prosentti- ja pituusarvoista. Arvoparin ensimmäinen arvo kertoo kuvan paikan pystysuunnassa ja toinen arvo paikan vaakasuunnassa. Paikka voidaan määritellä myös avainsanojen avulla: vaakasuunnassa left, center tai right ja pystysuunnassa top, center tai bottom. Seuraava sääntö sijoittaa taustakuvan keskelle taulukon solua: td { background-image: url(tomaatti.gif); background-position: 50% 50%;} MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 131

5 CSS1-ominaisuudet Taustakuvan paikka määritellään oletuksen suhteessa elementin kokoon. Selaimen ruudun keskellä pysyvä taustakuva saadaan, kun kiinnitetään taustakuva 'backgroundattachment'-ominaisuuden arvolla fixed. Esimerkki selventää: body { background-image: url(tomaatti.gif); background-attachment: fixed; background-position: center center;} Taustakuvan paikka kannattaa määritellä joko prosenttiarvoilla tai avainsanojen avulla, jolloin käyttäjän näytön koolla tai tarkkuudella (resoluutio) ei ole merkitystä lopputuloksella. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 132

5 CSS1-ominaisuudet Tekstiominaisuudet Tekstin koristelu Ominaisuus: text-decoration Arvo: none [ underline overline line-through blink ] a {text-decoration: none;} em {text-decoration: blink;} del {text-decoration: line-through;} Tekstiä voidaan koristella lisäämällä viiva tekstin alapuolelle ('underline') tai yläpuolelle ('overline'). Teksti voidaan myös yliviivata ('line-through') tai asettaa vilkkumaan ('blink'). Selaimen oletuksena käyttämät koristelut (esimerkiksi viiva linkkitekstin alla) voidaan poistaa arvolla 'none'. Tekstin tasaus pystysuunnassa Ominaisuus: vertical-align Arvo: baseline sub super top text-top middle bottom text-bottom <percentage> td {vertical-align: top;} MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 133

5 CSS1-ominaisuudet Pystysuuntaisen tasauksen määrittäminen on tarpeen esimerkiksi taulukon soluissa, joissa oletuksena puoliväliin ( middle ) sijoitettava teksti voidaan tasata joko solun yläreunaan ( top ) tai alareunaan ( bottom ). Tekstin tasaus vaakasuunnassa Ominaisuus: text-align Arvo: left right center justify p {text-align: justify;} h1 {text-align: right;} Teksti voidaan tekstinkäsittelyohjelmien tapaan keskittää ('center') tai tasata vasempaan ('left') tai oikeaan ('right') reunaan. Tekstin tasaaminen molempiin reunoihin onnistuu arvolla 'justify'. Molempiin reunoihin tasausta ei yleensä suositella, koska tekstin lukeminen näytöltä vaikeutuu. Tekstin sisennys Ominaisuus: text-indent Arvo: <length> <percentage> p {text-indent: 1em;} blockquote {text-indent: 10%;} Ominaisuuden 'text-indent' avulla määritellään elementin ensimmäisen tekstirivin sisennys. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 134

5 CSS1-ominaisuudet Sanojen välistys Ominaisuus: word-spacing Arvo: normal <length> h1 {word-spacing: 1em;} Sanojen väliin jätettävän tyhjän tilan pituuteen vakutetaan word-spacing ominaisuuden avulla. Ominaisuudelle anntettava arvo lisätään oletuksena käytettävään pituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. Kirjainten välistys Ominaisuus: letter-spacing Arvo: normal <length> blockquote {letter-spacing: 0,1em;} Kirjainten väliin jätettävän tyhjän tilan pituuteen voidaan vaikuttaa letter spacing ominaisuuden avulla. Ominaisuudelle annettava arvo lisätään kirjainten välin oletuspituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 135

5 CSS1-ominaisuudet Kirjainkoon muokkaus Ominaisuus: text-transform Arvo: capitalize uppercase lowercase none h1 {text-transform: uppercase;} Teksti voidaan määritellä kirjoitettavaksi kokonaan isoilla ( uppercase ) tai kokonaan pienillä ( lowercase ) kirjaimilla. Arvo capitalize muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi. Vanhemmilta peritty arvo voidaan poistaa käytöstä arvolla none, jos kirjainkoko halutaan säilyttää. Rivin korkeus Ominaisuus: line-height Arvo: normal <number> <length> <percentage> blockquote {line-height: 120%;} blockquote {text-indent: 1.2;} blockquote {text-indent: 1.2em;} Rivin korkeus voidaan määritellä kolmella tavalla: numeroarvona, pituusarvona tai prosenttiarvona. Numeroarvona esitetty rivinkorkeus lasketaan kertomalla kirjasimen koko annetulla numerolla. Prosenttiarvo lasketaan myös elementin kirjasimen koon perusteella. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 136

5 CSS1-ominaisuudet Suorakaideominaisuudet Marginaali Ominaisuus: margin-top margin-right margin-bottom margin-left margin Arvo: <length> <percentage> auto h1 {margin-top: 2em; margin-bottom: 1em;} Elementin marginaali yläpuolella ('margin-top'), alapuolella ('margin-bottom'), vasemmalla puolella ('margin-left') ja oikealla puolella ('margin-right'). Marginaali voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'margin' avulla. blockquote {margin: 10%;} Marginaalin prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 137

5 CSS1-ominaisuudet Sisällön etäisyys reunasta Ominaisuus: padding-top padding-right padding-bottom padding-left padding Arvo: <length> <percentage> div.paivitystiedot {padding-top: 0.1em; padding-bottom: 0.1em;} Elementin sisällön etäisyys reunasta yläpuolella ('padding-top'), alapuolella ('paddingbottom'), vasemmalla puolella ('padding-left') ja oikealla puolella ('padding-top'). Sisällön etäisyys reunasta voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'padding' avulla. div.paivitystiedot {padding: 5%;} Etäisyyden prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 138

5 CSS1-ominaisuudet Reunaviiva Ominaisuus: border-top border-right border-bottom border-left border Arvo: <border-width> <border-style> <color> h1 {border-bottom: 3px solid black;} Elementin reunaviiva yläpuolella ('border-top'), alapuolella ('border-bottom'), vasemmalla puolella ('border-left') ja oikealla puolella ('border-right'). Reunaviivalle voidaan määritellä leveys (<border-width>), tyyli (<border-style>) ja väri (<color>). Reunaviiva voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'border' avulla. Reunaviivan leveys: thin medium thick <length> MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 139

Reunaviivan tyyli: none dotted dashed solid double groove ridge inset outset Reunaviivan väri: Ks. väriarvot. Elementin leveys ja korkeus Ominaisuus: width height Arvo: <length> <percentage> auto textarea {width: 15em; height: 10em;} Elementille voidaan määritellä leveys ('width') ja korkeus ('height'). 5 CSS1-ominaisuudet MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 140

5 CSS1-ominaisuudet Kellutus Ominaisuus: float Arvo: left right none img {float: left;} Elementille voidaan asettaa kellumaan ominaisuuden 'float' avulla. Ominaisuuden avulla voidaan esimerkiksi asettaa kuva kellumaan sivun vasempaan reunaan siten, että teksti rivitetään kuvan oikealle puolelle. Kellutusta on keskeinen keino dokumentin taiton toteutuksessa. Kellutus elementin vierellä Ominaisuus: clear Arvo: none left right both h1 {float: left;} Ominaisuuden 'clear' avulla lementille voidaan määritellä ne sivut, joilla sallitaan elementtien kellutus. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 141

5 CSS1-ominaisuudet Luokkaominaisuudet Listan tyyli Ominaisuus: list-style Arvo: <list-type> <list-image> <list-position> ul {list-style: upper-roman;} ul {list-style: url(bullet.gif);} ol {list-style: upper-roman outside;} Ominaisuuden 'list-style' avulla muokataan listan tyyppiä (<list-type>), lista-alkion edessä olevaa kuvaa (<list-image>) ja lista-alkion edessä olevan symbolin sijaintia (<listposition>). Listan tyyppi: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Lista-alkion kuva: <url> none Lista-alkion symbolin asemointi: inside outside MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 142

5 CSS1-ominaisuudet Elementin esitystapa Ominaisuus: display Arvo: block inline list-item none input {display: block;} Esitystapa vaikuttaa elementin esittämiseen näytöllä: lohkotyylinen ('block') elementti aiheuttaa rivinvaihdon elementin alkuun ja loppuun, tekstityylinen ('inline') elementti rivittyy selaimen leveyden mukaan. Listatyylinen elementti ('list-item') on lohkotyylisen elementin erikoistapaus. Elementti piilotetaan 'display'-ominaisuuden arvolla 'none'. Tyhjämerkkien tulkinta Ominaisuus: white-space Arvo: normal pre nowrap pre {white-space: pre;} Elementin sisällä olevilla tyhjämerkeillä (välilyönnit, rivinvaihdot, tabulaattorit) voidaan joko sieventää yhdeksi välilyönniksi ('normal') tai näyttää ruudulla ('pre'). Arvo 'nowrap' määrittelee, että rivi katkaistaan ainoastaan br-elementin kohdalta. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 143

5 CSS1-ominaisuudet Lopuksi CSS-tyylien ensimmäisen version tarjoamat vaihtoehdot HTML-dokumentin ulkoasun muokkaamiseen ovat monipuoliset. Mahdollisuuksia kannattaa kuitenkin hyödyntää maltillisesti: - absoluuttisesti määritelty kirjasimen koko saattaa estää kirjasimen suurentamisen: vaikeuksia heikkonäköisille - tekstin ja taustavärin kontrastin on oltava riittävä, muuten lukeminen on hankalaa - myös taustakuvien kanssa on oltava tarkkana: liian voimakas taustakuva hankaloittaa lukemista - kursivoitu teksti on vaikeaa lukea näytöltä, toiset kirjasimet sopivat paremmin näytöltä luettavaksi kuin toiset,... CSS2-tyylien mediavalitsimet mahdollistavat erilaisten tyylitiedostojen toteuttamisen eri päätelaittelle. Tämä mahdollistaa periaatteessa sivuston päätelaitekohtaisen räätälöinnin. Käytännössä paras vaihtoehto on kuitenkin eri versioiden toteuttaminen joko mekaanisesti (käsin) tai esimerkiksi dynaamisesti ohjelmointikielen X tai vaikkapa XSL-muunnosten ja XML:n avulla. MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 144

6 Hypertekstin rakenne ja navigointi 6 Hypertekstin rakenne ja navigointi Laajennetaan näkökulmaa WWW:stä yleisen hypertekstin suuntaan. Hypermediasta ja hypertekstistä puhuttaessa on hyvä huomata, että samoja termejä käytetään eritasoisista asioista puhuttaessa - teksti, hyperteksti, hypermedia, hypermediaohjelma, hypermediasovellus, Hypertekstin ja -median perusidea on verkkomuotoisen tiedon esittäminen tietokoneella - perusrakenne: solmut ja linkit (pisteet ja viivat [nuolet]) - huomaa, että linkit voivat olla aidosti yhden-, kahden- tai monensuuntaisia! - lukutapa: navigointi (linkin seuraaminen ja peruuttaminen) Yksinkertaisen hypertekstin linkit ovat assosiatiivisia, ts. yhdistelevät asioita (kirjoittajan) mielleyhtymien kautta - hyvä (monimutkainen) hyperteksti jäsennetään käytännössä kuitenkin aina tätä monipuolisempien solmujen ja linkkien luokittelun avulla Käsitteellisesti hypertekstin vastaa itse asiassa suunnattua verkkoa MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 145

6 Hypertekstin rakenne ja navigointi Hypertekstin perusrakenne on verkko eli graafi Graafi on pisteiden ja niitä yhdistävien viivojen muodostama kokonaisuus Graafin piirtäminen, Suunnattu graafi eli digraafi (viivoille määritellään suunta nuolet), Graafin peruskäsitteet, Graafin merkitseminen & tiedon mallintaminen, Graafit & semanttiset verkot Graafia voidaan pitää kartan abstraktiona: jos pisteet ja viivat tulkitaan kaupunkien ja teiden abstraktioiksi, digraafi kertoo mistä kaupungista pääsee mihinkin ottamatta kantaa kaupunkien maantieteellisiin sijainteihin yms. ominaisuuksiin Hypertekstin ja verkkoteorian välillä on selvä yhteys; käytännössä painopiste on yleensä kuitenkin vain termien, käsitteistön (kielenkäyttö) ja perustulosten käytöllä eikä abstraktin graafiteorian kehittämisellä Merkattujen graafien keskeiset sovellukset: 1) hypertekstin suunnittelu käsitekarttojen avulla & 2) suurten hyperdokumenttien analysointi (tehdään poikkeuksetta abstrahoimalla hyperteksti graafiksi) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 146

6 Hypertekstin rakenne ja navigointi Graafien peruskäsitteitä Graafi G = (V,E), V={a,b,c,d,e} pisteiden tai solmujen joukko, E = { (a,b), (b,a), (c,d), (c,e) } viivojen tai kaarien multijoukko, esim. epäyhtenäinen graafi G: G: d a b c e G 1 G 2 G:n aligraafeja ovat sen (pisteiden) osajoukkojen muodostamat graafit (kaikilla E:n viivoilla) G:llä kaksi komponenttia: G 1 ja G 2 Kulku on jokin pisteiden ja viivojen jono pisteestä toiseen Polku on jokin pisteiden ja viivojen jono pisteestä toiseen (pisteet eivät toistu, paitsi päätepisteet piirissä) Suunnattu graafi (digraafi) D=(V,E), V={a,b,c,d,e} pisteiden joukko, E = { (a,b), (b,a), (c,d), (c,e) } suunnattujen viivojen tai nuolien multijoukko, esim. D: a b c d e MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 147

6 Hypertekstin rakenne ja navigointi Tärkeä graafin erikoistapaus: juurellinen puu Puu on piiritön graafi. Juurellisessa puussa jokin piste on valittu juuripisteeksi (tai juurisolmuksi) (joskus juurelliset puut esitetään suunnattuina). Esim. d b e a c f g h i j a on T:n juuri. T:n lehdet ovat d, e, i, j, h T.n sisäpisteet ovat b,c,f,g f,g,h ovat c:n lapsia, c on näiden vanhempi f,g,h,i,j ovat c:n jälkeläisiä, j:n edeltäjiä ovat g,c,a f, g, h ovat sisaruksia, f on g:n edeltävä sisar ja h on g:n seuraava sisar T:llä on viisi haaraa, polut a-d, a-e, a-i, a-j ja a-h T:n syvyys on 4 ja sen leveys on 5 Puun rivimuotoinen esitystapa on erityisen kätevä tietokoneiden yhteydessä (luetaan ylhäältä alas ja vasemmalta oikealle): a b c d e f MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 148

6 Hypertekstin rakenne ja navigointi Semanttiset verkot ja käsitekartat Merkittyjen graafien keskeinen sovellus hypermediassa (suunnittelu) ovat erilaiset käsitekartat Käsitekartalla tarkoitetaan graafista tiedon esittämisen tekniikkaa, jonka avulla objektista, ilmiöstä tai prosessista poimitaan tarkasteltavaksi osia ja suhteita Muita vastaavantyyppisiä termejä: mindmap, mielle(yhtymä)kartta, Käsitekarttojen piirtämistapoja on lukuisia erilaisia. Tyypillisiä piirteitä: - pisteet kuvaavat objekteja tai ominaisuuksia, viivat näiden välisiä suhteita - pyrkimyksenä on täsmällisyyden sijaan esityksen havainnollisuus - kartta on aina vain eräs tiedon jäsennys (voidaan tehdä perustellusti eri tavalla useista lähtökohdista käsin) Erilaisia käsitekarttoja käytetään muistin ja oppimisen tukena, suunnittelu- ja ideointimenetelmänä, päätöksenteon tukena ja identifioinnissa Semanttisen verkon tai käsitekartan idea voidaan systematisoida osaksi kokonaista suunnittelumenetelmää (esim. OMT, UML) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 149

6 Hypertekstin rakenne ja navigointi Tyypillisiä käsitekarttoja ERIKOISKARTAT: tarkkaan sovitun notaation käyttö erikoissovelluksessa, esim. ERdiagrammit (relaatiotietokant. suunn.) nimi näyttelijät nimi studiot osoite osoite tähtenä omistaa elokuvat YLEISKARTAT: käsikartan käyttö esim. tietämyksen havainnollistamisessa nimi tyyppi ominaisuus tuoksu ohjaaja vuosi päällä kukka maljakko pöytä sisällä päällä matto lattia osa päällä jalka tuoli päällä selkänoja osa MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 150

6 Hypertekstin rakenne ja navigointi Graafit & hyperteksti Hypertekstiin liittyy oletuksena kartta- tai paikkametafora; lukijan voidaan ajatella sijaitsevan lukemassaan solmussa; navigoinnissa käyttäjä siirtyy solmusta toiseen linkkejä seuraamalla Hypertekstin perusominaisuuksia: - yksinkertainen assosiatiivinen rakenne voidaan suoraan samaistaa suunnatun verkon kanssa - hypertekstin solmujen lukujärjestys ei (kenties alkusolmua lukuun ottamatta) ole ennalta määrätty (jos vastaava verkko ei ole lineaarinen) - hypertekstiä luetaan erilaisella tekniikalla kuin esim. kirjaa (lukutapaa voisi kärjistetysti verrata esim. ensyklopedian, käsikirjan yms. hakuteoksen lukemiseen) - lukemisen sopivan loppukohdan löytäminen saattaa olla hankalaa - lukeminen vaatii suurempaa keskittymistä kuin perinteisen tekstin - dokumenttien rajat saattavat olla epämääräisiä (erityisesti tietoverkoissa) - lukijalla olemassa selkeä eksymisen mahdollisuus MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 151

6 Hypertekstin rakenne ja navigointi - navigoinnin tueksi tarvitaan apuvälineitä (esim. karttoja ja kirjanmerkkejä) - hypermediaan on liitetty perinteisesti myös vahva toisten käyttäjien rooli, ts. myös toiset lukevat hyperdokumenttia - ja saattavat tehdä siihen omia (julkisia) merkintöjään Modernin hypertekstin tyypillinen lukustrategia on yleensä yhdistelmä (tietokantatyyppisiä asiasana)hakuja ja navigointia: - 1) navigoinnin alkukohdan etsiminen hakukoneen avulla (esim. Google) 2) navigointi linkkejä seuraamalla ("mitäköhän tuolta löytyy") ja 3) paluu kirjanmerkin avulla takaisin hakukoneeseen ("uusi yritys")? "net - www" hakukone haun tulos uuden navigoinnin alkuna MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 152

6 Hypertekstin rakenne ja navigointi Hyperlinkkien tyypit Hyperlinkit voidaan jakaa niiden tyypin perusteella rakenteellisiin, assosiatiivisiin ja viittaaviin linkkeihin Sovelluksen rakenne suunnitellaan käyttäjälle sopivaksi ja esitetään rakenteellisina linkkeinä: - navigointi tapahtuu pääasiassa rakenteellisten linkkien avulla - käyttäjä voi rakenteellisten linkkien avulla arvioida sovelluksen laajuutta ja omaa sijaintiaan sovelluksessa Assosiatiiviset linkit muodostavat merkitykseen perustuvia yhteyksiä hypertekstin solmujen välille: - tarjoavat käyttäjälle vaihtoehtoisen navigointitavan - assosiatiiviset linkit vastaavat ihmisen tapaa jäsentää asioita (Vannevar Bush) Viittaavat linkit ovat assosiatiivisten linkkien erikoistapauksia - viittaavat esimerkiksi lisätietoon tai tarkempaan kuvaukseen MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 153

6 Hypertekstin rakenne ja navigointi Esimerkki erityyppisistä linkeistä: rakenteelliset (Next- ja Prev, murupolku), assosiatiiviset ( Muita etsivä- ja poliisisarjoja ) ja viittaavat (Matsin ja Rauskin roolikuvaukset) linkit: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html><head> <title>z-salamapartio</title> <link rel="index" href="sarjat.html"> <link rel="next" href="muksuluuri.html"> <link rel="prev" href="pimeyden-tyyny.html"> </head> <body> <div class="navi"> <a href="sarjat.html">sarjat</a>: Z-Salamapartio</div> <h1>z-salamapartio</h1> <p>etsivät <a href="roolikuvaus-mats.html">mats</a> ja <a href="roolikuvaus-rauski.html">rauski</a> seikkailevan 70-luvun Helsingissä.</p> <div class="katsomyos">muita etsivä- ja poliisisarjoja: <a href="ratkaisijat.html">die Kühe - Ratkaisijat</a> ja <a href="pimeyden-tyyny.html">pimeyden tyyny</a> </div> </body> </html> MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 154

6 Hypertekstin rakenne ja navigointi Hypertekstin rakenteesta Yksinkertaisimmassa muodossaan hyperteksti on siis assosiatiivinen verkko, jossa linkit yhdistävät verkon solmut toisiinsa (huomaa, että linkkien suunnat ovat merkitseviä) Hypertekstirakenteita voidaan kuitenkin luokitella, esim. seuraavien ääripäiden avulla: - puurakenne - peräkkäisrakenne (lineaarinen rakenne) - peräkkäisrakenne vaihtoehdoilla - peräkkäisrakenne sivupoluilla - hila - yhdistetty rakenne - verkko (kaikki edelliset ovat siis tämän erikoistapauksia) Ilmeisestikin sama sisältö voidaan jäsentää eri tavoin, näkökulmasta riippuen MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 155

6 Hypertekstin rakenne ja navigointi Perusrakenteet puurakenne peräkkäisrakenne peräkkäisrakenne vaihtoehdoilla (eräs rakenne) hila yhdistetty rakenne (esim. puu vaihtoehdolla) peräkkäisrakenne sivupoluilla verkko ("yleinen rakenne") MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 156

6 Hypertekstin rakenne ja navigointi Huomautuksia On syytä huomata, että käytännössä hyperteksti muodostaa em. ääripäitä huomattavasti monimutkaisemman rakenteen Monimutkainen linkitys johtaa helposti varsin sotkuisen näköiseen graafiin Hypertekstin rakennetta suunniteltaessa (ja esitettäessä) on kuitenkin hyvä pyrkiä esityksen havainnollisuuteen Havainnollisen esityksen perusidea on sieventää käytettyjä merkintöjä esityksen asiasisällön pysyessä samana Kaksi suoraviivaista lähestymistapaa joilla esitykseen piirrettävien linkkien määrää voidaan supistaa ovat - linkin perintä ja - linkkien yhdistäminen MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 157

Tällöin hypertekstin tiivistetty esitystapa on seuraava: 6 Hypertekstin rakenne ja navigointi - linkin perinnässä ne solmut {A 1,A 2,,A N }, joista pääsee (mahd. muiden solmujen kautta) linkkejä seuraamalla tiettyyn solmuun B, ympäröidään suorakaiteella (solmuryhmä), eikä linkkejä (A k,b), k=1,..,n merkitä kuvioon näkyviin. Sen sijaan ko. suorakaide yhdistetään nuolella solmuun B - linkkien yhdistämisessä ne solmut {A 1,A 2,,A N }, joista suoraan johtaa linkki tiettyyn solmuun B, ympäröidään ovaalilla (solmuryhmä), eikä linkkejä (A k,b), k=1,..,n merkitä kuvioon näkyviin. Sen sijaan ko. ovaali yhdistetään nuolella solmuun B ~ Edellä viittaus voidaan siis yksittäisen solmun B sijasta tehdä myös toiseen solmuryhmään ja päinvastoin Sekä linkin perinnässä että ylitilojen merkitsemisessä hypertekstirakenteen esityksen luettavuus paranee kun solmuja ryhmitellään ja tarpeettomat nuolet jätetään piirtämättä ~ MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 158

6 Hypertekstin rakenne ja navigointi On tietenkin myös mahdollista, että hypertekstin rakenteen tiedetään noudattavan jotain yleisiä sääntöjä, mikä tarjoaa mahdollisuuden tapauskohtaisten sievennystapojen käyttöön Jos linkkien tiedetään esim. noudattavan järjestysrelaatiota, voidaan hyperteksti esittää kompaktissa muodossa ns. viivadiagrammin avulla (Hasse-diagrammi) Tyypillisessä hypertekstissä erilaiset hypertekstirakenteet esiintyvät päällekkäin, esim. - määritelmien assosiatiivinen verkko - johdanto-osan selkeä peräkkäisrakenne - yksityiskohtien ja huomautusten lineaariset sivupolut - jne. Näiden erityyppisten rakenteiden erottaminen toisistaan helpottaa lukijan työtä suuresti Suoraviivaisin apu lukijalle on erityyppisten solmujen ja linkkien (kuvallinen) koodaus joka hyödyntää jotain helposti hahmotettavaa perusrakennetta MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 159

6 Hypertekstin rakenne ja navigointi WWW-hyperteksti Perusrakenne on dokumentti- ja elementtirakenteiden varaan rakentuva (esim. assosiatiivinen) linkitysrakenne jonka ytimenä ovat WWW-resurssit Linkkien kohteina ovat WWW-resurssit (dokumentit tai dokumenttien osat) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 160

6 Hypertekstin rakenne ja navigointi Seuraavassa hypertekstin perusominaisuuksia peilataan seuraavassa kolmen erilaisen hypertekstijärjestelmän näkökulmasta: HTML:n, Dexterin ja XLinkin. Vain HTML-linkitys käsitellään kurssilla täsmällisesti - on kuitenkin hyvä tietää muustakin. Kiinnostuneille löytyy verkosta lisätietoa, ks. - HTML (ks. http://www.w3.org/tr/html4/ ) - Dexter Hypertext Reference Model (ks. http://www.acm.org/pubs/citations/journals/cacm/1994-37-2/p30-halasz/ ) - XLink (ks. http://www.w3.org/tr/xlink/ ) Hypertekstin verkkomainen rakenne toteutetaan hyperlinkkien avulla - yksisuuntaiset linkit (esim. HTML a-elementti) - kaksisuuntaiset linkit (Dexter & XLink) - monensuuntaiset linkit (Dexter & XLink) Linkin alkupistettä kutsutaan linkin lähdeankkuriksi ja loppupistettä linkin kohdeankkuriksi (joskus molempia kutsutaan lyhyesti vain ankkureiksi tai lähteiksi ja kohteiksi, vastaavasti) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 161

6 Hypertekstin rakenne ja navigointi Hyperlinkkien mekanismeista Toteutuksesta riippuen hypertekstin linkit esitetään eri tavoin - Dexter mallintaa linkit omina komponentteinaan, joihin viittaukset koodataan lähdeja kohdedokumentteihin (monensuuntaisia linkkejä) - HTML-koodaa linkit kiinteästi lähdedokumenttiin (vain yhdensuuntaisia linkkejä) - XML-standardiperheen linkitys tarjoaa em. mahdollisuudet, sekä lisäksi mahdollisuuden assosioida dokumenttiin linkkejä (sekä lähde- että kohdeankkureita) ilman että linkit näkyvät ko. dokumenttien koodauksessa millään tavalla (!) Hyperlinkin avulla voidaan (rakenteisessa dokumentissa) periaatteessa viitata - dokumenttiin kokonaisuudessaan, - dokumentissa löytyvään elementtiin - dokumentista löytyvään pistemäiseen tunnisteeseen (esim. nimettyyn ankkuriin tai tekstisolmuun) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 162

6 Hypertekstin rakenne ja navigointi Viittaaminen elementtiin voidaan suorittaa - elementin nimen perusteella - elementin sijainnin perusteella (asema dokumentin jäsennyspuussa) - elementin attribuuttien perusteella - elementin sisältämän merkkidatan (tekstin) perusteella - elementin muun sisällön perusteella (esim. lapsielementtien) Hyperlinkkiviittausten keskeisiä ongelmia ovat: - resurssien löytyminen ja saatavuus (miten kohdesolmut nimetään & miten saadaan tieto näiden olemassaolosta) - viittaamiskäytännön raskaus (esim. viittaukset tekstisisällön perusteella saattavat olla laskennallisesti raskaita) - linkkien ylläpito (rikkoutuvatko linkit jos resursseja liikutellaan tai uudelleenjärjestellään?) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 163

6 Hypertekstin rakenne ja navigointi Linkkien saatavuuteen liittyvien pulmien ratkaisumenetelmä vaihtelee vastaavasti: - HTML- ja XML-linkkien kohdeankkurit pitää jostain vain tietää (esim. arvata & kokeilla) - Dexter-sovelluksen kaikki mahdolliset linkit voidaan täsmällisesti etsiä & luetteloida universaalin hakufunktion avulla (koska linkit ovat komponentteja) Linkkiviittausten raskauteen liittyviä ratkaisuja: - HTML-linkit eivät sisällä hakumahdollisuutta, joten HTML-linkit ovat teknisesti kevyt toteuttaa (hakujen teknisiä toteutusmahdollisuuksia käsitellään tuonnempana formaalien kielten esittelyn yhteydessä) - Dexter-linkit voivat sisältää koko hyperavaruuden kaikkien komponenttien sisäisiä hakuja, mikä saattaa tarkoittaa erittäin raskasta prosessointia linkin kohteen selvittämiseksi - XML-linkit sisältävät hakumahdollisuuden, mutta vain yhden (XML-) resurssin sisällä; linkin kohteen selvittämisen raskaus riippuu dokumenttien koosta MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 164

6 Hypertekstin rakenne ja navigointi Linkkien eheyteen liittyviin ongelmiin eri järjestelmät ottavat kantaa eri tavoin: - HTML-linkit voivat mennä reilusti rikki, kun taas Dexter-linkit ovat aina ehjiä - XML-linkit voivat mennä rikki (samaan tapaan kuin HTML-linkitkin), mutta linkkien eheyden ylläpitoa voidaan helpottaa ns. ulkoisten linkkien ylläpidon suunnittelulla (näin toimivat erityisesti ns. linkkikannat ([linkbase])) - WWW:hen tosin puuhataan mekanismia, joka nimeäisi linkkejä (vähän Dexterin tapaan, ks. URN / http://www.ietf.org/rfc/rfc2141.txt) WWW-hypertekstissä on hyvä huomata esim. linkkien eheyteen liittyvä suhteellisuus WWW:n mekanismien ja yksittäisten selainohjelmien toiminnan välillä; voitaisiinhan hyvin esim. määritellä (!), että kaikki A-elementillä merkatut WWW-linkit ovat aina ehjiä ja että selainten toimintaan kuulu olla näyttämättä rikkoutuneita linkkejä (tällöin selaimen esim. validoisi kaikki dokumentin linkit juuri ennen niiden näyttämistä - tavallaan kuvat käsitellään juuri näin!) Oletuksen mukaisesti hypertekstin linkit ovat assosiatiivisia. Linkkejä voidaan kuitenkin tarkastella yleisinä (muinakin kuin binäärisinä) relaatioina ja tarkastella sen mukaisesti (tällöin ongelman saattaa muodostaa sopivan käyttöliittymämetaforan suunnittelu & toteuttaminen) - esitieto, osa-, ryhmä-, jne. relaatiot MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 165

6 Hypertekstin rakenne ja navigointi Hyperlinkkien toiminnallisuus On syytä huomata, että hyperlinkeille voidaan periaatteessa asettaa myös toiminnalliseen semantiikkaan liittyviä epästandardeja määrityksiä Esimerkki: XLink-spesifikaation hyperlinkeiltä löytyy attribuutti actuate, arvot: - onload (linkki ladataan välittömästi - toiminnan järkevyys selviää kohta) - onrequest (perinteinen odotetaan kunnes käyttäjä klikkaa, tms.) - other (selain päättää käyttäytymisen) Linkin seuraamistapahtuma voidaan periaatteessa valita mielivaltaisesti Esimerkki: XLink-spesifikaation määrittelemillä hyperlinkeillä voi olla attribuutti show, joka voi saada arvot - new (linkin kohde-elementti(!) avataan uudessa käyttöliittymätason ikkunassa) - replace (selain korvaa koko nykyisen dokumentin linkin osoittamalla kohdeelementillä) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 166

6 Hypertekstin rakenne ja navigointi - embed (se elementti, johon linkki viittaa, upotetaan linkkiviittauksen kohtaan siten, että se elementti, joka toimii linkkinä(!), korvataan linkin kohde-elementillä) - other (selain päättää käyttäytymisen) Huomaa, että osa edellisistä voidaan osin toteuttaa HTML-linkkien avulla (ainakin skriptikielellä terästettynä). Edelleen on syytä huomata, että selain voisi periaatteessa tehdä mitä tahansa muutakin (tosin mikä tahansa ei käyttäjän odotuksien näkökulmasta ole sovelluksissa järkevää) Vastaavasti voidaan luokitella myös solmuja (luokittelusta voi edelleen seurata esim. perittävyyteen liittyviä piirteitä hypertekstin tulkintaan, vrt. hypertekstin visualisointia käsittelevä prujun osa) Rakenteisiin dokumentteihin liittyvälle (modernille) hypertekstille voidaan siis esittää (jo edellä esitelty) luonnehdinta - rakenteisen hypermedian perustan muodostaa nimetyistä dokumenteista koostuva hyperavaruus; jokaisen hyperavaruuden dokumentin sisäinen rakenne on hierarkkinen, mikä tarjoaa perustan elementteihin viittaamiseen - hyperlinkit ovat tämän dokumenttiperheen ja dokumenttien elementtienvälisiä relaatioita (teknisesti itsekin dokumentteja tai näiden elementtejä) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 167

6 Hypertekstin rakenne ja navigointi Navigoinnin apuvälineitä Kun hypermedian lukemisen pulmat tiedostetaan, löydetään joihinkin niistä lääkkeitä, paitsi hyvän suunnittelun, myös erilaisten navigoinnin apuvälineiden avulla Tyypillisten navigoinnin apuvälineiden perusperiaate on vähentää muistin kuormitusta (vrt. HCI: recall recognition) Kartta Historialista, kirjanmerkki ja jälki Maamerkki Visuaalinen polku Kalansilmänäyttö Hämähäkki Menetelmien yhteiskäyttö on usein toimivin ratkaisu (vrt. WWW-selaimet) MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 168

6 Hypertekstin rakenne ja navigointi Kartta (map, overview diagram) Kuten termi navigointi jo itsessään vihjaa, navigointia helpottaa kartta Piirteitä (abstrakteja tai konkreettisia, tapauksesta riippuen) - kartta on todellisuuden pelkistetty (ja supistettu!) esitystapa - yleiskartta auttaa hahmottamaan kokonaisuuksia ja luo mielikuvan siitä kuinka laaja hyperteksti kokonaisuudessaan on - (lähi)aluekartta kertoo kontekstin ja esittää mitä mielenkiintoista lähiympäristöstä löytyy Tyypillinen käyttötapa: roam & zoom (yleiskartassa etsitään mistä karkeasti ottaen ollaan kiinnostuneita ja sitten zoomataan tästä lähialuekarttaan, sitten takaisin ylätasolle jne.) Kartta on yleiskäsite; dynaaminen kartan voi käytännössä toimia esim. kalansilmänäytön tekniikalla Selkeästi jäsennetty hypertekstin pääkohdat esittävä linkkisivu (teknisesti pelkkää tekstiä) voi hyvin toimia myös karttana MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 169

6 Hypertekstin rakenne ja navigointi Kartan termeistä Maamerkki on navigoinnin osa (esim. linkki) joka auttaa jäsentämään missä hypertekstissä ollaan. Maamerkki voi esim. tarjota oikopolun tutulle pääsivulle, josta käsin tutkimusmatkailu voidaan taas aloittaa Etusivu, jonne pääsee kaikilta muilta sivuilta (maamerkki) Muistiinpano Tässä kohtaa on virhe! Navigointihistorian jälki (henkilökohtainen) Historialista kertoo missä kaikkialla hypertekstissä on vierailtu, jälki on historialistan erikoistapaus joka kertoo mitä viime aikoina on tehty. Eräs tapa jälkien jättämiseen ovat muistiinpanojen tekeminen ja mielenkiintoisten solmujen myöhempää lukemista varten merkkaaminen kirjanmerkeillä MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 170

6 Hypertekstin rakenne ja navigointi Kalansilmä ja hämähäkki Kalansilmänäyttö on (dynaaminen) karttanäkymä joka korostaa kartan lähialueita esim. kertomalla näistä enemmän; vrt. kalansilmälinssi valokuvaamisessa (myös kalansilmänäyttö voi olla täysin tekstipohjainen) Hämähäkiksi kutsutaan näyttöä joka esittää valitun hypertekstisolmun linkitysrakennetta suhteessa lähialueen muihin solmuihin Esipuhe Johdanto Hyperteksti peruskäsitteet navigointi linkin seuraaminen peruuttaminen navigoinnin apuvälineet dynaaminen kontrolli ylikuormitus sovelluksia Multimedia Viittaukset Valitusta lähialueesta "enemmän" kertova kalansilmänäyttö Lähialueen linkeistä kertova hämähäkki MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 171

6 Hypertekstin rakenne ja navigointi Tekstisisällön osana kalansilmänäyttöä kutsutaan toisinaan nimellä stretch-text Navigoinnin apuvälineiden luokittelukriteerejä: - linkin valitsemista helpottavat toiminnot - rakenteiden hahmottamista helpottavat toiminnot - työhistorian tai dokumentin sisällön hahmottamista helpottavat toiminnot Lisää menetelmien luokitteluperusteita: - teksti- tai grafiikkapohjaiset menetelmät - dynaamiset tai staattiset menetelmiin - käsiteavaruuden rakennetta vääristävät tai sen säilyttävät menetelmät Navigoinnin apuvälineet perustuvat esitettävän informaation tarkoituksenmukaiseen vähentämiseen tai pelkistämiseen Vaikka teknisesti ei välttämättä olisikaan vaikeaa esittää koko hyperavaruuden rakennetta pikkuruisen kartan avulla, ei tästä välttämättä ole sisällöllisesti mitään hyötyä! Perusidea on auttaa käyttäjää esittämällä suuresta tietomäärästä juuri se olennainen MATHM-37000 HYPERMEDIAN PERUSTEET (syksy 2007) 172