4 Multimedian elementit webissä

Transkriptio

1 4 Multimedian elementit webissä Kuva: (joitain oikeuksia pidätetään) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 1

2 4.1 Kuvien esittäminen tietokoneella Kuvankäsittelyyn liittyy sekä teknisiä (miten) että sisällöllisiä piirteitä (mitä ja kenelle). Seuraavassa käsitellään lähinnä kuviin liittyviä teknisiä piirteitä (sisällöstä & suunnittelusta tyydytään kurssin puitteissa antamaan vain vinkkejä) Kuvankäsittely on muiden multimediaelementtien (ääni, animaatio, video) ohella tyypillisesti aiheeseen erikoistuneiden ammattilaisten heiniä. Kuitenkin erityisesti kuvien tallentamiseen (tiedostomuodot, pakkaaminen) liittyvä osaaminen on olennaisessa osassa hypermedian osaamista. WWW:ssä kuvat toimivat sekä varsinaisena sisältönä että osana sivuston ulkoasua (erilaiset ikonit, taustakuvat). Kuvat aiheuttavat yleensä suurimmat ongelmat hitaan verkkoyhteyden käyttäjälle: esimerkiksi pakkaamattoman kuvan tiedostokoko saattaa olla satoja kertoja tarkoituksenmukaisesti pakattua suurempi. Kuvat ovat usein myös saavutettavuuden esteenä: tieto on pyrittävä mahdollisuuksien mukaan esittämään kuvan ohella myös tekstimuodossa (toisteisuus). Perehdytään seuraavaksi tietokoneella esitettävän kuvan perusteisiin ja erilaisiin kuvaformaatteihin. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 2

3 Kuvan esittäminen tietokoneella Kuva esitetään tietokoneella pikseleinä Kukin pikseli on tietyn värinen, väri muodostuu kolmesta pääväristä: punainen, vihreä ja sininen (RGB) pikseleiden lukumäärä näytöllä ilmoitetaan käsitteellä resoluutio Resoluutio ilmoittaa näytöllä näkyvien pikseleiden lukumäärän. Kuvan koko määritellään pikseleinä, joten bittikarttakuva näyttää suurella resoluutiolla pienemmältä kuin pienellä resoluutiolla ja päinvastoin Tyypillisiä resoluutioita (vuonna 2008): Pikseitä Resoluution nimi Missä löytyy? 240 x 320 QVGA (Quarter Video Graphics Array) Tyypillinen uuden kännykän resoluutio (2008) 640 x 480 VGA (Video Graphics Array) Resoluutio 90-luvun näyttölaitteella 1280 x 720 HD 720 HD Ready -television minimiresoluutio 1280 x 1024 SXGA (Super Extended Graphics Array) PC-tietokoneen resoluutio perusnäytöllä 1680 x 1050 WSXGA+ Tyypillinen uuden PC:n laajakuvanäyttö (2008) 1920 x 1080 HD 1080 Full HD -televisiot MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 3

4 Demo: Värien muodostaminen Värien muodostus tietokoneella on additiivista: väreä yhdistelemällä saadaan aikaan uusia värejä. Additiivisessa värinmuodostuksessa perusvärit ovat punainen, vihreä ja sininen. Esimerkki: punainen: 100% punaista, 0% vihreää ja 0% sinistä musta: 0% kaikkia värejä valkoinen : 100% kaikkia värejä järjestelmästä käytetään nimeä RGB (Red, Green, Blue) (vrt. substraktiiviseen värinmuodostukseen perustuva CMYK-esitystapa kirjapainoissa) Kuva tietokoneen ruudulla esitetään sekä tietokoneen muistissa että näyttölaitteella: - väri-informaatiosta pidetään kirjaa näyttömuistilla (usein näytönohjaimessa) - näytönohjain muuntaa näyttömuistin videosignaaliksi - näytön tehtävä on esittää signaali. LCD-näytössä jokaista pääväriä (RGB) vastaa monokromaattinen alipikseli; CRT-näytöissä värillinen valo syntyy ammuttaessa elektronitykillä fluorensoivaan pintaan MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 4

5 Värien lukumäärä - näyttö ja näytönohjain määräävät, kuinka monta eri väriä pikseli voi esittää (tietokone voidaan myös konfiguroida siten, että maksimikapasiteettia ei käytetä, esim. tehokkuussyistä tai sopivan ajurin puuttuessa) - käytettävissä olevien värien lukumäärä ilmoitetaan joko kuvan värisyvyytenä (bittitaso) tai värien lukumääränä (värien lukumäärä = 2 bittitaso ) Esimerkki: 8-bittinen näyttömoodi värejä käytettävissä 2 8 = 256 kpl Yleisiä värisyvyyksiä: - 8-bittiset värit: 256 väriä - 16-bittiset värit: väriä (32 sävyä/pääväri, 32 x 32 x 32) - 24-bittiset värit: 16,7 milj. väriä (TrueColor) - 32-bittiset värit: 16,7 milj. väriä (TrueColor) + alpha-kanava -informaatio Pöytätietokoneissa TrueColor on tyypillisin, kun taas mobiililaitteissa käytetään pienempiäkin bittimääriä. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 5

6 Väripaletit (syventävää tietoa) Jos käytettävissä on esim. vain 8-bittinen näyttö, joudutaan käyttämään indeksoitua väripalettia värien esittämiseen Väripaletti - joudutaan käyttämään 256-väristen näyttöjen yhteydessä - väripaletti muodostuu 256 väristä, jotka valitaan miljoonista eri värisävyistä - informaatio valituista 256 väristä talletetaan väritaulukkoon (Color Look-up Table), jossa kukin alkio sisältää RGB-informaation ko. väristä - väritaulukon väreihin viitataan indeksoinnin avulla: (esim. väri 1 = musta väri, 2 = valkoinen, jne.) - jos sovellus tai sovelluksessa näytettävä kuva sisältää enemmän värejä, loput värit "pyöristetään" lähimpään käytössä olevaan värisävyyn tai käytetään rasterointia (engl. Dithering) Eri sovelluksilla voi olla käytössä eri paletit, mikä aiheuttaa näytön välkehdintää ja vääristyneitä värejä vaihdettaessa aktiivista sovellustavärien MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 6

7 Sivupolku: värien määritys CSS:llä (1/1) Kaikille kolmelle värille annetaan punaisen, vihreän ja sinisen kirkkausarvo väliltä riippumatta näytön todellisesta värisyvyydestä (lopullinen esitysväri määräytyy laitteen ominaisuuksista) Värikoodi syötetään heksadesimaalimuodossa, muodossa RRGGBB. Heksamuodon käyttö ilmoitetaan risuaidalla. Esim. violetti: #FF00FF Heksamuodosta voidaan käyttää myös lyhennemerkintää: Esim. violetti: #F0F (vastaa koodausta #FF00FF) rgb()-funktio avulla värin pääsee määrittelemään "tavallisin" numeroin: Esim. violetti: rgb(255, 0, 255) Myös prosenttiarvoja voi käyttää: Esim. violetti: rgb(100%, 0, 100%) Myös muita koodaustapoja on, mutta selaintuki niille ei ole niin hyvä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 7

8 Sivupolku: värien määritys CSS:llä (2/2) CSS-tyyleillä voidaan määrittää värejä erityisesti seuraavissa ominaisuuksissa: Taustaväri (background-color, background) Reunusten väri (border-color, border-left-color, border-top-color,...) Kirjaisimen väri (color) Esimerkkejä värien määrityksestä: Heksadesimaalimuoto h1 { color: #ffffff; background-color: #ff00ff; } Desimaalimuoto h1 { color: rgb(255,255,255); background-color: rgb(255,0,255); } MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 8

9 Kuvaformaatit Digitaaliset kuvaformaatit voidaan jakaa karkeasti kahteen päätyyppiin: bittikarttakuviin (rasterigrafiikkaan) sekä vektorigrafiikkaan Käytännössä kuvatiedosto voi olla myös sekoitus edellämainituista (esim. vektorigrafiikka, joka sisältää upotetun alielementin, joka on bittikarttakuva) Tärkeää onkin huomata ne oleelliset erot, joita näillä kuvien muodoilla on! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 9

10 Bittikarttakuva Bittikarttaesityksessä jokaisen kuvan pikselin väri määritellään kuvatiedostossa erikseen - kuvainformaatio mallinnetaan suoraan pikseleinä - kuvankäsittelyohjelma muuttaa suoraan pikseleitä - bittikarttakuva voidaan myös koostaa useasta tasosta (engl. layer). Erityisesti kuvankäsittelyohjelmien omissa tiedostomuodoissa taso - raakamuotoisen bittikarttakuvan esittäminen vaatii vain vähän laskentatehoa Lähikuva ---> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 10

11 Demo: Bittikarttaesityksiä on monenlaisia Mustavalkeat kuvat - jokainen pikseli on talletettu yhtenä bittinä (1 tai 0) x 480 -resoluutioinen mustavalkea kuva vaatii 37,5 Ktavua levytilaa pakkaamattomana - mustavalkeiden kuvien esittämiseen käytetään usein rasterointia Harmaasävyiset kuvat - jokainen pikseli on talletettu tavuna (arvo välillä 0-255) x 480 -resoluutioinen kuva vaatii yli 300 Ktavua levytilaa 8-bittiset kuvat - 1 tavu/pikseli - kuvassa max 256 eri väriä (värit voidaan yleensä valita täysväripaletista) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 11

12 - 640 x 480 -resoluutioinen kuva vaatii yli 300 Ktavua levytilaa (sama kuin harmaasävyinen kuva) 24-bittiset kuvat - jokaisen pikselin esittämiseen käytetään 3 tavua (RGB) - tukee 256 x 256 x 256 eri väriä ja värisävyä ( ) x 480 -resoluutioinen kuva vaatii yli 900 Ktavua levytilaa Kuvatiedostoja käsitellään editointivaiheessa yleensä pakkaamattomina, koska näin säilytetään kuvan laatu mahdollisimman hyvänä. Raakamuotoinen bittikarttakuva vie kuitenkin paljon tilaa: Esimerkiksi HD-laatuinen (1920x1080x24 bit) valokuva vie sellaisenaan 6,2 megatavua Kuvien pakkaaminen on siis perusteltua. Webissä kuvien pakkaaminen on erittäin tärkeää. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 12

13 Suuri koko on bittikarttojen haaste Koska jokainen kuvapikseli värikoodataan erikseen, on koko bittikarttakuvien yksi keskeisistä ongelmista Pakkaamisella voidaan pienentää bittikarttakuvien tallennuskokoa: Häviöttömässä pakkauksessa kuvan bittikartta pienennetään siten, että data ei muutu: Ei muuta kuvaa, mutta pakkaussuhde ei aina ole hyvä Häviöllisessä pakkauksessa kuvan bittikarttaa pienennetään siten, että tarvittaessa kuvadataa voidaan hieman muokata: Erityisesti pienet yksityiskohdat kuvassa voivat muuttua, toisaalta pakkaussuhde on usein melko hyvä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 13

14 Sivupolku: kuvien liittäminen web-sivulle Pääasiallinen tapa kuvien liittämiseen web-sivulle on img-elementin käyttö. Kuva sijaitsee erillisessä tiedostossa, johon viitataan src-attribuutilla (selain käy noutamassa kuvan erillisellä HTTP-pyynnöllä). Esimerkki: <img src= laiva.jpg /> Kuvalle varattavan aluen koon voi erikseen kertoa width ja height -attribuuteilla: <img src= laiva.jpg width= 640 height= 480 /> Etuna on, että kokotietojen kertominen auttaa selainta varaamaan kuvalle oikean kokoisen alueen näytöltä, eikä alue muutu kuvan latautuessa Huom! Kuvakoon määrittely (width,height) ei muuta itse kuvatiedostoa tai sen kokoa selain lataa jokatapauksessa täysikokoisen kuvan! Siltä varalta, että kuvaa ei jostain syystä voida esittää, on kuvan tilalle usein syytä määritellä myös vaihtoehtoinen, tekstimuotoinen kuvaus: <img src= laiva.jpg alt= Laiva /> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 14

15 Vektorigrafiikka Toisin kuin bittikarttagrafiikassa, vektorigrafiikassa kuvan elementit ovat erillisiä objekteja (viivoja, kaaria, suorakaiteita, ympyröitä,...). Tällöin: kustakin objektista talletetaan vain piirto-ohjeet (esim. "piirrä kohtaan (100, 50) vihreä ympyrä, jonka säde on 20 ja viivanpaksuus 3") kuvia voidaan suurentaa ja pienentää sekä muokata laadun kärsimättä objekteja voidaan siirtää ja poistaa ilman, että se vaikuttaisi muihin objekteihin; objektin voi tuoda toisten objektien eteen tai piilottaa niiden taakse Pikseliesitys näyttöä varten muodostetaan vasta esitettäessä kuvaa jossakin sovelluksessa monimutkaisen kuvan näyttäminen vaatii paljon prosessointitehoa vektorigrafiikkaa voidaan toki käyttää pelkästään kuvien työversiossa ja julkaista kuvat pikseligrafiikkana esimerkiksi paremman yhteensopivuuden takia soveltuu hyvin esim. tietokoneella tehtyjen piirrosten ja kaavioiden esittämiseen MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 15

16 Valokuvastakin voidaan tehdä vektorigrafiikkaa, mutta se vaatii älykkään sovelluksen ja tarkoitukseen soveltuvan kuvan, jotta lähes jokaisesta pikselistä ei tulisi omaa objektia (suuri tiedostonkoko) Vektorigrafiikkaa käytetään paljon suunnittelussa ja mallintamisessa; etu piilee juuri objektiajattelussa vektorigrafiikka sopii myös kolmiulotteisten (n-ulotteisten) objektien esittämiseen (2-ulotteinen projektio ruudulle tarvittaessa) koska objektit esitetään (on mahdollista esittää) tietokoneen tunnistamassa muodossa, voidaan objektien avulla suorittaa kuvien tuottamisen ohella myös automaattista päättelyä ja laskentaa (esim. animointi) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 16

17 Mallintaminen on yksi vektorigrafiikan haasteista Vektorigrafiikka saadaan mahtumaan hyvinkin pieneen tilaan. Grafiikka on tarkkaa ja mallia muokkaamalla voidaan jopa tehdä esimerkiksi animaatioita Voidaan kuitenkin sanoa, että yksi vektorigrafiikan keskeisistä haasteista on kuvan mallintaminen vektorigrafiikaksi: Kuvan kaikki yksityiskohdat on kyettävä esittämään objektien (pisteet, viivat, jne.) avulla Hyvin hienojen yksityiskohtien tuominen vektorigrafiikkaan tekee mallista helposti monimutkaisen: Esimerkiksi bittikarttakuva voidaan mallintaa vektorigrafiikkana, mutta tällöin malli taas voi olla alkuperäistä bittikarttaa monimutkaisempi ja isompi... MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 17

18 4.2 Kuvaformaatin valinta web-julkaisuun MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 18

19 Motivaatio WWW on heterogeeninen ympäristö erilaisia sovelluksia ja päätelaitteita. Niin kuvalla kuin millä tahansa webissä julkaistavalla medialla, on tärkeää valita tiedostomuoto, joka on sovellus- ja laiteriippumaton Sovellusriippumaton tiedostomuoto voidaan lukea ja tulkita millä tahansa sovelluksella, joka kyseistä muotoa tukee Kaikki sovellukset eivät tue kaikkia tiedostomuotoja, mutta mikä tahansa sovellus voi (teoriassa) tukea sovellusriippumatonta muotoa Laiteriippumaton tiedostomuoto voidaan esittää missä tahansa laitteessa, joka tukee kyseisen median esitystä Kaikki päätelaitteet eivät välttämättä silti kykene esittämään tätä muotoa (esim. jos tietokoneessa ei ole äänikorttia, ei se voi luonnollisestikaan toistaa ääniä) -> Sovellus- ja laitteistoriippumattomuuden takaamiseksi on usein perusteltua tukeutua laiteriippumattomiin, avoimiin standardeihin MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 19

20 Esimerkkejä laitteistoriippuvista kuvaformaateista Microsoft Windows: BMP ("Windows bitmap") stardardikuvaformaatti Windows-ympäristössä kuva voidaan tallettaa 24-bittisenä, pakkaus mahdollista RLE:n avulla (Run Length Encode) WMF (Windows Meta File) Windowsin vektorigrafiikkaformaatti Macintosh: PAINT ja PICT PAINT-formaattia käytettiin alunperin MacPaint-ohjelmassa, alunperin vain mustavalkeiden kuvien esittämiseen PICT-formaattia käytettiin alkujaan MacDraw-ohjelmassa (vektoripohjainen) X-windows: XBM ensisijainen grafiikkaformaatti X-ikkunointiympäristöissä. Tukee 24-bittisiä bitmap-kuvia MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 20

21 Laitteistoriippumattomat, bittikarttapohjaiset kuvaformaatit TIFF (Tagged Image File Format) Sopii hyvin erityyppisten kuvien tallettamiseen (mustavalkea, harmaasävyinen, 8- ja 24-bittinen RGB ym.) Hukkaamaton kuvaformaatti: sopii myös esim. valokuvien alkuperäisversioiden taltiointiin GIF (Graphics Interchange Format); versiot GIF87a, GIF89a Kehittäjinä UNISYS ja Compuserve hukkaamaton pakkausalgoritmi (perustuu Huffman-koodaukseen) 8 bittiä/pikseli eli ainoastaan 256 väriä: miljoonien värisävyjen esittäminen 256 värin avulla toki hukkaa väri-informaatiota vaikka pakkausalgoritmi onkin hukkaamaton soveltuu tietokonegrafiikan pakkaamiseen (vähän värejä, isoja tasavärisiä alueita, teräviä reunoja) tukee lomittamista (interlacing, kuvan latautuminen osissa) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 21

22 GIF89a tukee useita eri kuvia samassa tiedostossa ja animaatiota LZW-pakkausalgoritmi patentoitu (UNISYS): patentin haltijalla on mahdollisuus periä lisenssimaksuja algoritmin käytöstä (kuvien editoimiseen ja esittämiseen käytettävät ohjelmat) PNG (Portable Networks Graphics) kehitettiin korvaamaan GIF ja osittain myös TIFF ei patenttisuojaa eikä siten lisenssimaksuja (vrt. GIF) tukee alfa-kanavia (muuttuva läpinäkyvyys), gamma-korjausta ja kaksiulotteista lomittamista (kuvan vähittäinen latautuminen) 5-20 % tehokkaampi hukkaamaton pakkaus kuin GIF:issä ei animointia (siihen oma formaatti MNG) tukee truecolor-, harmaasävy- ja 8-bittisiä palettikuvaformaatteja kuvankäsittelysovellukset tukevat hyvin PNG:tä, mutta WWW-selaimet puutteellisesti (uudet selaimet tukevat myös PNG-kuvia) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 22

23 JPEG (Joint Photographic Expert Group) standardi vuodesta Tarkoitettu täysväristen ja harmaasävyisten kuvien pakkaamiseen (valokuvat) 24 bit/pikseli, harmaasävykuville 8 bit/pikseli Käyttää hukkaavaa pakkausta: JPEG:llä tallennettuna osa kuvainformaatiosta siis aina menetetään Pakkauksen tiiviyttä voidaan säätää : mitä pienempi kuvatiedosto, sitä enemmän informaatiota hukataan Soveltuu erittäin hyvin kuvan web-julkaisuun, kun halutaan optimoida tiedostokokoa ja siis siirron nopeutta. Pakkausalgoritmi käyttää hyväkseen ihmisen näköaistin ominaisuuksia: perusajatuksena on hukata enemmän informaatiota, jota ihmissilmä ei havaitse. Algoritmissa kuva jaetaan 8x8 lohkoihin, joihin tehdään DCT (Discrete Cosine Transfomation) ja tämän jälkeen pakataan hyvä kuvanlaatu kertaisella pakkauksella, välttää aina 100 asti (4-5 kertaa pienempi kuin GIF). Päästään todella suuriin pakkausasteisiin MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 23

24 Oikean kuvaformaatin valinta: PNG vai JPEG? WWW-grafiikassa on tällä hetkellä käytännössä kaksi kuvatiedostoformaattia valittavana, PNG ja JPEG. Ominaisuuksiltaan parempiakin vaihtoehtoja on, mutta käytännössä ne karsiutuvat pois (puutteellinen selaintuki) Nyrkkisääntöjä: 1. ikonit ja kuvat, joissa on vähän värejä ja isoja, yksivärisiä alueita, PNG:ksi ( tietokonegrafiikka,...) 2. kuvat, joissa paljon värejä ja jatkuvia värisävymuutoksia, JPEG:ksi (valokuvat,...) - Haasteena on läpinäkyvyyden koodaaminen kuviin: PNG tukee, mutta tukeeko selain? - Myös GIF voi tulla joskus kyseeseen, erityisesti kun halutaan animaatioita MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 24

25 Valintana PNG PNG:n pakkaussuhde on huomattavasti huonompi kuin häviöllisen JPEG:n Kannattaa miettiä, kuinka isoja kuvia kannattaa taltioida PNG:nä PNG:hen voi koodata alpha-kanavalla läpinäkyvyyttä, mutta sitä kannattaa webissä käyttää harkitusti: Kaikki selaimet / päätelaitteet eivät tue läpinäkyvyyttä Läpinäkyvyyden laskeminen voi vaatia paljon prosessointitehoa ---> Läpinäkyvyyden käyttö ei aina ole järkevää web-julkaisussa! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 25

26 PNG ja kasvavan tiedostokoon dilemma Erityisesti valokuvat sisältävät runsaasti informaatiota. Koska PNG on häviötön formaatti, kasvaa tiedostokoko helposti ohi mm. JPG:n. Ongelma on erityisen vakava isokokoisissa valokuvissa: ne saattavat viedä kymmeniä tai satoja kertoja enemmän tilaa PNG-muodossa kuin JPG:ssä Vasemmanpuoleinen valokuva: 220 kb PNG-muodossa 8 56 kb JPG-muodossa Oikeanpuoleinen grafiikka: 3 kb (PNG) 3 24 kb (JPG) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 26

27 Valintana JPEG Häviöllisen JPEG-pakkauksen laatua voi säätää tallentaessa kuvaa JPEG-muotoon. Huomaa, että: Sopiva pakkausaste riippuu pakattavasta kuvasta. Toisia kuvia voi pakata paljonkin ilman, että kuvan laatu kärsii kun taas toiset kuvat eivät kestä juurikaan pakkaamista. JPEG-pakkaus on aina kompromissi tiedostokoon ja kuvan laadun välillä. Sopiva pakkaustaso löytyy vain kokeilemalla varsinkin minimoitaessa tiedostokokoa. Peräkkäiset JPEG-pakkaukset heikentävät aina kuvan laatua, joten niitä tulee aina välttää! JPEG-pakkaus häivyttää myös teräviä rajauksia, joten se soveltuu huonosti tekstin ja tarkan grafiikan tallennusmuodoksi JPEG tukee progressiivista latautumista (progressive JPEG). Progressive JPEG sopii formaattina erityisesti isoihin kuviin: tiedostomuoto taltioituu siten, että selain voi esittää jo osittain ladattua kuvaa käyttäjälle. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 27

28 JPEG ja häviöllisen pakkauksen haasteet Ongelmana suurilla pakkausasteilla kuvan rasteroituminen pakkauksessa käytettäviin lohkoihin JPEG ei ei käsittele hyvin teräviä rajauksia (esim. teksti kuvassa) Erityisen huonosti JPEG taltioi pikseligrafiikkaa, näytönkaappauksia ja tekstiä Pienin pakkausaste (100) Täysi pakkaus (0) Täysi pakkaus (0), uudelleentallennettuna MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 28

29 Sivupolku: kannattaako joskus valita GIF? (Demo: animaatio) Nykywebissä PNG on monin paikoin syrjäyttänyt vanhemman GIF-formaatin. Erityistilanteessa voidaan kuitenkin turvautua GIF-julkaisuun. GIF-julkaisu voi olla perusteltua erityisesti, jos halutaan taata yhteensopivuus vanhempien selainten kanssa (animointi, läpinäkyvyys, ym. ominaisuudet) GIF-kuvissa voi olla maksimissaan 256 väriä, joten värien valinta on tärkeää: kaiken perusta on kuvassa käytetty väripaletti, joka kertoo, mitä värejä kuvassa esiintyy paletin värien valinnassa tulee huomioida, että (tällä hetkellä pientä) osaa käytössä olevista tietokoneista käytetään 8-bittisessä näyttötilassa näytön välkehdinnän ja värivirheiden välttämiseksi WWW-selaimet eivät vaihda käyttämäänsä väripalettia, vaan ne käyttävät 216 värin kiinteää palettia loput 40 väriä on varattu käyttöjärjestelmän kuva-elementeille, esimerkiksi työpöydän ikoneille. Palettivaihtoehtoja: MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 29

30 käyttöjärjestelmän väripaletti Web-turvallisten värien paletti 1 mukautuva eli adaptiivinen paletti (värit valitaan kuvasta) Rasterointi voidaan simuloida värejä, joita ei ole paletissa kannattaa käyttää, kun kuvassa on paljon värejä ja se on luonteeltaan valokuvamainen, ja kun halutaan pehmeitä gradientteja ei kannata käyttää läpinäkyvissä kuvissa eikä kuvissa, joissa on tasaisen värin alueita GIF-tiedoston koon pienentäminen pienempi kuvakoko vähennetään värejä (8-bittisen sijasta käytetään esim. 6-bittisiä värejä) pienissä kuvissa vältetään lomituksen käyttöä (interlacing) suositaan suuria, tasavärisiä alueita (ei rasteroituja!) 1 MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 30

31 Vektorigrafiikka webissä Vektorigrafiikka on perinteisesti ollut grafiikan tuotantoformaatti. Suurin osa vektorigrafiikkaformaateista onkin ohjelmisto- ja laiteriippumattomia. Vektorigrafiikka on kuitenkin mahdollista käyttää suoraa web-julkaisussa. Jos käytön rajoitukset pitää mielessä, avaa tämä aivan uusia mahdollisuuksia. SVG (Scalable Vector Graphics) Uusi vektorigrafiikkaformaatti WWW-käyttöön, W3C-suositus, perustuu XML-kieleen kuvauskieli, kuvat tekstiformaatissa (pieni koko, hakutoiminnot mahdollisia), DOMstandardin mukainen Useat selaimet tukevat SVG-grafiikkaa natiivisti (Firefox, Opera, Safari, Chrome), toisilla tuki saavutetaan vasta laajennuksen avulla (Internet Explorer) Ideaalitapauksessa SVG on hyvä julkaisuformaatti web-vektorigrafiikalle, käytännössä voi joskus olla järkevää muuntaa SVG loppukäyttäjälle esim. PNGmuotoon ohjelmallisesti MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 31

32 Demo: Vektorigrafiikkaa SVG:llä Esimerkki yksinkertaisesta SVG-kuvasta: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" baseprofile="full" width="100%" height="100%" xmlns=" <circle cx="50" cy="30" r="20" stroke="black" stroke-width="5" fill="red"/> </svg> Kopioi selaimeen ja kokeile! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 32

33 Demo: Animaatio SVG:llä Koska vektorigrafiikassa kuvainformaatio on tallennettu muotoina (pisteet, viivat ja kaaret), on muotoja helppo muuttaa ohjelmallisesti. SVG:ssä itsessään on animointiominaisuuksia. Tarvittaessa animointia voi tehdä myös itse ohjelmallisesti DOM-mallin kautta esim. JavaScriptin avulla Esimerkkejä animoinnista (toimii ainakin Operalla): Walking man: Bouncing cubes: Tuki SVG-animoinnille ei ole nykyselaimissa itsestäänselvyys sitä kannattanee käyttää harkiten MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 33

34 Ohjelmistoja kuvankäsittelyyn Paint.net < Ilmainen kuvankäsittelyohjelmisto kuvankäsittelyyn TIFF, JPEG, GIF, PNG GIMP < Ilmainen, avoimen lähdekoodin ohjelmisto kuvankäsittelyyn TIFF, JPEG, GIF, PNG Inkscape < Ilmainen, avoimen lähdekoodin ohjelmisto vektorigrafiikalle Erityisesti SVG-muotoiseen vektorigrafiikkaan Em. ohjelmistot on valittu sillä perusteella, että ne ovat ilmaisia, mutta käyttökelpoisia moniin tarkoituksiin. Ammattimaisessa kuvankäsittelyssä käytetään usein maksullisia, usein monipuolisempia ohjelmistoja. Näistä on syytä mainita erityisesti Adobe Photoshop, CorelDraw ja PhotoPaint -sarjat. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 34

35 4.3 Ääni webissä ja mediaobjektien liittäminen Ääni on multimedian ja siten hypermedian keskeisiä osa-alueita. Ääniä käytetään: sellaisenaan (musiikki, kuunnelmat, äänikirjat) elokuvan ja animaation osana (taustamusiikki, tehosteet, taltioidut äänet) käyttöliittymien osana (tehosteet, palaute, ohjaus) Äänen käsittelyyn liittyy luontaisia piirteitä tai rajoitteita: ihmisen kuuloaisti ja muisti ovat riittämättömiä äänen käsittelyyn sellaisenaan äänen keskeinen ulottuvuus on aika: äänen pysäyttäminen esimerkiksi videokuvan tavoin ei ole mielekästä äänen rooli on perinteisesti ollut tietokoneympäristössä varsin vähäinen ja siten äänen käsittelyn perinne on lyhyt ja suppea (vrt. esimerkiksi graafisen käyttöliittymän kehittyminen ja siihen liittyvät standardikäsitteet) monotoninen taustaääni rasittaa/ärsyttää helposti käyttäjää enemmän kuin esimerkiksi näytön kiinteä taustaväri MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 35

36 Ääni on tärkeä osa mitä tahansa esitystä; paitsi ääni, myös sen puuttuminen luovat omaa ominaista tunnelmaansa (vrt. mykkäelokuvat, kirjan lukeminen ääneen, liikkuminen kuulosuojaimet päässä) Äänen merkitys WWW-hypermediassa on korostunut viime vuosina erityisesti Internetin parantuneen siirtokapasiteetin ansiosta Esimerkiksi Internet-radiot, Web-musiikkikaupat, soitto-ohjelmiin integroidut suosittelijajärjestelmät, ääniblogit, kannettavat digitaaliset soittimet ja muut mielenkiintoiset sovellukset ovat tuoneet äänen jokaisen Web-käyttäjän ja soveltajan saataville Seuraavassa ääntä käsitellään erityisesti Web-hypermedian näkökulmasta teknisellä painotuksella MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 36

37 Äänen esitysmuodot Webissä Seuraavassa käydään läpi joukko äänen keskeisiä esitysmuotoja Webin näkökulmasta. Läpikäynnissä on syytä pitää mielessä, että samat haasteet mitä kuvaformaatteihin liittyy, pätee myös äänen esitysmuotoihin. MPEG-1 Audio Layer 3 (MP3) MP3 on strandardoitu formaatti digitaalisen äänen muuntamiseen koodattuun muotoon (encoding) sekä hukkaavaan pakkaamiseen MP3 kehitettiin vuonna 1991 Standardin virallinen nimi on ISO/IEC Layer 3 MP3 lienee edelleen suosituin muoto musiikin jakelemiseen Webissä MP3-tiedostojen pääte on yleensä.mp3 Advanced Audio Coding (AAC) AAC on osa vuonna 1998 julkaistua MPEG-4 standardia MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 37

38 AAC pyrkii parantamaan aikaisempien versioiden (MPEG-1 ja MPEG-2) ominaisuuksia AAC on käytössä esimerkiksi Applen itunes-mediasoittimessa, itunesverkkokaupassa sekä saman valmistajan kannettavassa digitaalisessa soittimessa. AAC-tiedostojen pääte on yleensä.aac Windows Media Audio (WMA) WMA on Microsoftin vastaus standardoidulle MP3-muodolle ja sittemmin Applen käyttämälle AAC-muodolle. WMA on osa Windows Media kehystä. WMA-tiedostojen pääte on yleensä joko.asf tai.wma WMA-tiedostojen soittaminen tapahtuu yleensä Windows Media Player -soittimella Ogg Vorbis Avoimeen lähdekoodin pohjautuva, lisenssimaksuton ja patentiton äänenpakkausmenetelmä, kehitetty mm. vastauksena MP3:n lisenssimaksuihin Web-äänisisällöissä MP3:a ja AAC:tä vähemmän käytetty, joskin kelpo vaihtoehto. Ogg:n käyttöä rajoittaa selainten ja soitinohjelmistojen puutteellinen tuki. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 38

39 Demo: Äänileikkeen liittäminen HTML-sivulle Kokeillaan erilaisia tapoja liittää äänileike web-sivulle. Huomaa erot! Viittaus äänileikkeeseen voidaan tehdä tavalliseen tapaan hyperlinkillä: <a href="zorokotroko.mp3">zorokotroko by Schizzofunk (mp3, 4,04 MT)</a> Leikkeen upottaminen object-elementillä (HTML 4.01) <object type="audio/mpeg"> <param name="src" value="zorokotroko.mp3"> </object> Leikkeen upottaminen embed-elementillä (tulossa takaisin HTML 5 -määrityksessä) <embed src= Zorokotroko.mp3 width= 320 height= 200 > Leikkeen upottaminen audio-elementillä (tulossa uutena HTML 5 -määrityksessä) <audio src= Zorokotroko.mp3 autoplay= false controls= true >Selaimesi ei tue Audio-elementtiä</audio> Huom: on tärkeää tarjota käyttäjälle mahdollisuus hallita äänileikettä (pohdi miksi!) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 39

40 Median avaaminen selaimessa HTML:n keinoin äänileikkeen liittämiselle on monta eri keinoa, mutta kaikissa em. tavoissa viime kädessä selain päättää, miten leike soitetaan Ongelmia voi aiheuttaa kuitenkin HTML:n rajalliset keinot luoda käyttöliittymää leikkeen hallintaan (pysäyttäminen/käynnistys/autoplay jne.) Käytännössä selain käynnistää liitetyn ohjelman (plugin), joka vastaa äänileikkeen soitosta. Tyypillisesti prosessi menee näin: 1. Selain lukee annetun sisällön tyypin (type-attribuutissa annettu MIME type). 2. Jos tyyppitieto puuttuu, selain yrittää arvata sen vaikkapa tiedostopäätteestä. Esim. xyz.mp3 tyyppi sound/mpeg 3. Selain pitää kirjaa kuhunkin tyyppiin liitetystä ohjelmasta ja valitsee ohjelman listastaan. Esim. sound/mpeg Avataan Windows Media Player Ongelma on, että formaatin toisto vaatii aina kyseistä tyyppiä tukevaa soitinohjelmistoa Jos ohjelmisto puuttuu, media ei toistu MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 40

41 Sivupolku: Laajemmin MIME-tyypeistä Osa laajempaa MIME (Multipurpose Internet Mail Extensions) määritystä, jota alunperin käytettiin sähköpostiliitteiden määrittelyyn Huomaa, että MIME-tyypitys tulee vastaan myös monissa muissa paikoin: Kun tyylilomake liitetään HTML-sivulle (<link rel= stylesheet type= text/css...) Kun skripti liitetään HTML-sivulle (<script type= text/javascript >...) [Automaattisesti] HTTP pyynnön otsikkotiedoissa (Content-type: text/html) HTML-lomakkeen koodaustyypissä (<form... enctype= multipart/form-data > Huomaa, että MIME-tyypin avulla selaintakin voi laajentaa käsittelemään aivan uudenlaisia tietotyyppejä! Esimerkiksi nettiradio Spotify määrittelee oman spotify-tyypin, joka käynnistää ks. ohjelman Suurimmassa osassa selaimista listan sidotuista MIME-tyypeistä saa esille ja jopa vapaasti muokattavaksi (Esim. Firefoxilla Työkalut Asetukset Ohjelmat) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 41

42 Äänen/median toistaminen ohjelmistoavusteisesti Eri mediatyyppien ja niitä tukevien ajoympäristöjen monenkirjavuus aiheuttaa sen, että äänen ja myös videon liittäminen sivulle on haastavaa. Median liitto voi epäonnistua monessakin kohtaa: Median MIME-tyyppi on eksoottinen tai selain ei tunnista sitä oikein väärä ohjelma aukeaa (tai ylipäätänsä mitään ei aukea) Käytetty formaatti on jossain määrin alustariippuvainen ei toimi kaikissa ympäristöissä (esim. Windows Median haasteet Linuxilla) Yksi ratkaisu on äänen/median toistaminen käyttämällä avuksi sellaista ohjelmistolaajennusta, jota valtaosa käyttöympäristöistä tukee Tällöin ohjelmistolaajennus on erityisesti Flash Player: joidenkin arvioiden mukaan, jopa 99 prosentilla Internet-käyttäjistä on Flash käytettävissä...huomaa kuitenkin että Flash-tuki erityisesti mobiililaitteissa ja Apple-koneissa on prosentiaalisesti selvästi pienempi (esim. iphone ei tue ollenkaan Flashia) Formaattiongelmista päästään selainpäässä eroon, mutta alkuperäisen median saattaa silti joutua (etukäteen tai palvelinpäässä) muuttamaan Flash-muotoon MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 42

43 Demo: äänen/median toistaminen Flash-avusteisesti Median liittäminen Flash: avulla vaatii Flash:llä toteutetta soitinohjelmistoa Liittotavat vaihtelevat suuresti käytettyjen ohjelmistojen välillä Tutustutaan demolla avoimen lähdekoodin Flowplayer-ohjelmistoon ja sen käyttämiseen: Ladataan asennuspaketti Paketista löytyy esimerkki (example) Käydään katsomassa ja kokeillaan MP3-ääni on Flowplayeriä käyttäessä muunnettava Flashin tukemaksi FLV:ksi Muunnos voidaan tehdä esimerkiksi VLC-ohjelman avulla ( MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 43

44 Vaihtoehto visuaaliselle webille: HTML-teksti ääneksi Usein oletetaan, että ääntä käytetään web-sivulla ainoastaan medialiitteinä ja esimerkiksi tekstisisällön rikastamiseksi Toisinaan on kuitenkin käytännöllistä tai tarpeen esittää koko HTML-sivun sisältö äänimuodossa Tämä voi tulla kyseeseen esimerkiksi ruudunlukijaa käyttäessä, mutta yhtä lailla jos sisältö halutaan jaella äänimuodossa esimerkiksi kämmenlaitteille ladattavana Podcastina MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 44

45 Demo: Äänenkäytön vihjeistäminen CSS:llä Cascading Style Sheets, level 2 (CSS2) esittelee mahdollisuuden ilmiasun (~tyylin) määrittelemiseen puhesyntetisaattorilla tuotetulle äänelle (Aural Style Sheets) Äänen ilmiasu määritellään vastaavalla tavalla kuin dokumentin ulkoasu, CSSsääntöinä: h1, h2, h3, h4, h5, h6 { voice-family: paul, male; cue-before: url( trombone.mp3 ); elevation: above; /** jne. etc. **/ } CSS2-tyylien avulla puheäänelle voidaan määritellä esimerkiksi korkeus, voimakkuus, suunta vaaka- ja pystysuunnassa. Myös esimerkiksi numeroiden ja välimerkkien lukutapaan voidaan ottaa kantaa Äänen syntetisointiin liittyvien määritysten ohella CSS2 mahdollistaa ns. ääniikoneiden (auditory icons) määrittelemisen CSS2 mahdollistaa myös HTML-standardista puuttuvan taustamusiikin määrittelemisen MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 45

46 Lopuksi Ääni ja muut multimediaelementit tekevät hypermediasta hypermediaa, mutta multimedian soveltaminen edellyttää tekijältä paljon Tekninen taito on toki tärkeää, mutta lopulta kyse on sisällöstä. Hyväkin sisältö voidaan kuitenkin pilata huonolla teknisellä toteutuksella Äänen esittäminen Webissä on tekstimuotoiseen sisältöön verrattuna ongelmallista, koska käytössä ei ole HTML-kieltä vastaavaa yleisesti hyväksyttyä ratkaisua Äänen tallentamiseen ei ole myöskään käytössä vastaavia yksinkertaisia ja helppokäyttöisiä välineitä kuin valokuvien, joiden määrä Webissä on viime vuosina lisääntynyt digikameroiden myötä räjähdysmäisesti Todennäköisesti pelkkään ääneen perustuvat sovellukset tulevat keskittymään tekstimuotoisen tiedon esittämiseen käyttäjälle puhesyntetisaattorin avulla ( ääniselaimet ) ja toisaalta syötteen välittämiseen sovelluksille puheena (vrt. esimerkiksi VoiceXML, ks. Ääneen perustuvat vuorovaikutusratkaisut vaativat perinteisistä Web-sovelluksista poikkeavia toimintatapoja, jotta käyttävät haluavat/suostuvat niitä käyttämään MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 46