Multimediaelementit, osa 1

Tässä kappaleessa näytetään muutamia koodiesimerkkejä kuinka multimediaelementtejä voidaan sijoittaa WWW-sivuille. Sitä ennen täytyy kuitenkin vähän tutkia että mitä tiedostoformaatteja on olemassa ja miksi.

Äänitiedostot

CD-levyltä voi kappaleen kopioida kovalevylle käyttämällä tähän soveltuvaa ohjelmaa (engl. rip, ripping). Tällaisia ovat mm. Nero ja AudioGrabber (Windows) sekä iTunes (Mac ja Windows).

CD:llä oleva ääni sisältää paljon informaatiota, ja siksi se vie paljon tilaa. Yksi minuutti CD-tasoista ääntä (AIFF tai WAV) vie 10 MB tilaa, joten se ei ole soveltuva tiedostomuoto nettikäyttöön. Musiikki pitää tästä syystä kompressoida (puristaa kasaa) ennen kuin sitä voi web-sivuille laittaa. Erilaisia kompressiomenetelmiä on useita, ja ikävä kyllä ne eivät ole keskenään yhteensopivia. Näitä ovat mm. mp3, ogg vorbit, aac, flac, wma ja niin edelleen. Näistä kaikista yleisimmin käytetty on mp3, ja siitä syystä sitä kannattaa käyttää kun aikoo musiikkia tai muuta ääntä julkisesti verkkoon laittaa.

WAV tai AIFF-tiedoston voi muuttaa mp3-muotoon tähän tarkoitetulla ohjelmalla. Tosin edellä mainittu ilmainen iTunes-ohjelma osaa sen tehdä, joten suosittelen sen käyttämistä jos ei muuta ohjelmaa ole saatavilla tai asia on sinulle täysin uusi.

Ikävä kyllä asia ei kuitenkaan ole ihan niin yksinkertainen, että pelkästään äänitiedoston tallentaminen mp3-muotoon riittäisi. Tämä johtuu siitä, että ääntä voi pakata joko vähän tai paljon. Jos pakkaa vähän, äänenlaatu ei juurikaan kärsi mutta tiedoston koko ei pienenny tarpeeksi. Ja jos taas pakkaa paljon, äänenlaatu kärsii merkittävästi eikä tällaista musiikkia ole miellyttävä kuunnella.

Täytyy siis löytää sopiva kompromissi, ja tämä riippuu aina tilanteesta: käytettävissä olevasta web-tilasta, ladattavan äänen/musiikin määrästä, käyttäjien tietoliikenneyhteyksistä, musiikin funktiosta web-sivulla ja monesta muusta seikasta. Tässä kuitenkin vähän suuntaa-antavia numeroita:

Pakkaamaton musiikki: WAV / AIFF

Tiedonsiirtonopeus: 1.4 Mbs
Tavallinen ADSL-liittymän nopeus on 256 kbs - 1 Mbs, joten tällaista musiikkia ei voi yleensä kuunnella webin kautta reaaliajassa. Lisäksi jokaista minuuttia varten tarvitaan 10 MB kovalevytilaa palvelimelta. Ei suositella käytettäväksi lainkaan www-ympäristössä.

MP3-pakattu musiikki

192 kbs, stereo: eroa alkuperäisen CD-tasoisen äänen ja pakatun äänen erolla ei normaalikäyttäjä juurikaan kuule. 1 minuutti tällaista vie kovalevytilaa 1.440 Mtavua.

128 kbs stereo: hyvillä kaiuttimilla tai kuulokkeilla kuunneltaessa eron alkuperäisen ja pakatun äänen eron kuulee selvästi, erityisesti diskanteissa (pellit, s-kirjaimet laulussa jne). Henkilökohtaisesti pidän tätä äänenlaatua ehdottomana miniminä jos halutaan välittää ääntä stereona. 1 minuutti tarvitsee 960 ktavua kovalevytilaa.

96 kbs mono: äänenlaatu yhtä hyvä kuin tuossa ensimmäisessä esimerkissä, mutta koska ääni on muutettu yksikanavaiseksi (monoksi), säästetään 50% tilasta. 1 minuutti tällaista vie kovalevytilaa 720 ktavua.

64 kbs mono: sama kuin 128 kbs mutta "monotuksen" ansiosta vie ainoastaan puolet edellisen tilasta. 1 minuutti tarvitsee vain 480 ktavua kovalevytilaa.

48 kbs mono: kirjoittajan mielestä aivan ehdoton minimi äänenlaadulle musiikin välittämiseksi netin välityksellä. 1 minuutti tarvitsee 360 ktavua kovalevytilaa. Latautuu erittäin nopeasti.

Ohjeita äänitiedoston muuntamiseksi mp3-muotoon:

  • Tee itse MP3-tiedostot - Mikro-PC:n artikkeli vuodelta 2002, eli linkit saattavat olla vanhentuneet
  • Audacity - ilmainen äänieditori Linuxille, MacOSX:lle ja Windowsille.
  • Ohjeet edelliselle
  • LAME ilmainen MP3-enkoodauspalikka, jonka avulla Audacity osaa konvertoida ääntä WAVista MP3:eksi ja päinvastoin.

Edellä mainittujen äänitiedostojen lisäksi musiikkia voi levittää ns. streaming tekniikalla. Siinä äänitiedostoa ei ladata sellaisenaan palvelimelta kotikoneelle kuunneltavaksi vaan se ikään kuin "lähetetään" reaaliajassa eräänlaisena äänivirtana (stream). Käyttäjän koneelle ei tällöin jää alkuperäistä musiikkia (audiota) kuunneltavaksi tai kopioitavaksi, vaan kuunnellakseen sen uudestaan käyttäjä joutuu menemään uudestaan samalla sivulle nettiyhteyden ollessa toiminnassa.

Streaming-tekniikkaan soveltuvia äänimuotoja on myös useita, näistä tunnetuin lienee RealAudio. Myös mp3-tiedostoja voi "kapsuloida" sellaiseen muotoon että ne latautuvat "virtana" käyttäjän koneelle eivätkä kokonaisina, kovalevylle tallennettavissa olevina äänitiedostoina.

Kuvatiedostot

Kuvat voidaan jakaa karkeasti kahteen ryhmään: digitaaliset valokuvat (digikameralla räpsityt tai kuvanlukijalla skannatut) ja muut kuvat. Muut kuvat ovat yleensä joko tietokoneella tehtyjä kaavioita (esim. Excelin pylväsdiagrammi) tai näytönkaappauksia (screen shot) tietokoneen ruudulta.

Näistä jälkimmäiset on helposti pakattavissa ilman että kuvan laatu juurikaan kärsii. Kaksi yleisintä webissä käytettävää pakattua kuvamuotoa ovat GIF ja PNG.

Valokuvien suhteen tulee toimia samoin kuin äänenkin kohdalla: alkuperäiset TIFF/RAW -kuvat tulee pakata jpeg-muotoon ennen kuin niiden laittamista nettiin kannattaa edes harkita. JPEG-kompressiota tehdessä voi valita, pakataanko enemmän vai vähemmän, ja hyödyt ja haitat ovat samat kuin musiikissakin: mitä enemmän pakataan, sitä suttuisemmaksi kuva muuttuu, mutta jos ei pakkaa riittävästi, kuvan koosta tulee turhan suuri eikä se sovellu sitten webin kautta ladattavaksi.

Web-sivuja tehdässä täytyy pitää mielessä, että sivun tulisi latautua mielellään alle 10 sekunnissa. Jos sivun lataus kestää enemmän kuin 10 sekuntia niin useat sivuilla vierailevat internautit lopettavat lataamisen kesken ja siirtyvät selaamaan muita sivuja.

KUVAKARTAT

Kurssimateriaalissa ei ole aiemmin mainittu ns. kuvakarttoja (eng. imagemaps). Kuvakartta tarkoittaa yhtä yhtenäistä kuvaa, joka on ohjelmallisesti jaettu eri osiin, ja jokaiseen osaan voidaan luoda erillinen linkki. Tämän tekniikan avulla voidaan yhteen valokuvaan liittää useita eri linkkejä, ja kun käyttäjä klikkaa esim. kuvan keskustaa, selain siirtyy sivulle A, ja vastaavasti klikkaamalla kuvan vasenta alareunaa selain siirtyy sivulle B.

Lue alla olevaista linkeistä lisää tästä mainiosta tekniikasta:

Animaatiotiedostot

Yksinkertaisin tapa tehdä animaatio on käyttää gif-formaatin animoitua versiota. Animoitu GIF koostuu kahdesta tai useammasta peräkkäisestä kuvasta, joita pyöritetään näytöllä tietyllä nopeudella.

Esimerkki animoidusta GIF-kuvasta

Animoitujen GIF-kuvien tekemiseen löytyy netistä ilmaisia ohjelmia. Jos lataat yllä olevan esimerkin omalle koneellesi ja avaat sen sellaisella kuvaohjelmalla joka tukee animoitua GIF-formaattia, voit katsoa animaation kuva kuvalta. Ainakin MacOSX:n mukana tuleva Preview-ohjelma tekee näin.

Flash

Huomattavasti edistyneempi ja monipuolisempi animaatiomenetelmä on ns. Flash-elokuva (Flash movie). Flash-animaation tekemiseen tarvitaan sen kehittäneen Macromedia-yhtiön valmistama ohjelma, jonka Pro-versio maksaa 700 euroa. Halvempikin versio on 400 euron hintainen, eli ihan ilmaisesta järjestelmästä ei ole kyse.

Esimerkkejä Flash-animaatioista tai elokuvista:

Flash-animaatiot on toteutettu vektorigrafiikalla, joka tarkoittaa että niitä voi suurentaa ja pienentää näytöllä ihan oman halun mukaan ilman että kuvan laatu heikkenee. Lisäksi Flash-elokuviin voi liittää vuorovaikutteisuutta, sillä se pitää sisällään oman ohjelmointikielensä ActionScriptin.

Flashilla voi tehdä näppärästi erittäin näyttäviä animoituja sivuja, mutta niiden tekoon tarvittavan ohjelman hinnan lisäksi sillä on muitakin huonoja puolia:

  1. sivuja on lähes mahdoton tulostaa
  2. tiettyyn sivuun viittaaminen tai linkittäminen on mahdotonta koska kaikella Flash-animaation sijoitetulla informaatiolla on vain yksi yhteinen URL-osoite (sama ongelma kuin mitä kehystenkin käytössä).
  3. hakukoneet eivät löydä mitään Flash-tiedostoihin sijoitettua tietoa
  4. Flash-elokuvan katsomiseen tarvitaan selainlaajennin eli plug-in. Jos käyttäjän koneessa ei sellaista ole asennettuna eikä niitä voi esim. tietoturvasyistä asentaa, ei Flash-animaatiota voida lainkaan saavuttaa. Sama koskee myös PDA- ja mobiililaitteita.

Näistä johtuen on suositeltavaa, että Flash-sivuista tulisi tehdä aina myös rinnakkainen HTML-versio, jonka tietoihin pääsee käsiksi kaikilla maailman selaimilla. Tosin tällöin työmäärä tuplaantuu ja kaikki sivustoon tehtävät muutokset on tehtävät kahteen kertaan.

Videotiedostot

HTML-sivuun voi sisällyttää valokuvien ja muiden kuvien lisäksi myös digitaalista videokuvaa. Arvatenkin sitäkin pitää pakata aika rajusti ennen kuin se mahtuu nettipiuhoja pitkin palvelimelta asiakkaan tietokoneen ruudulle. Yleisimmät pakkausformaatit ovat mpeg, RealVideo, avi sekä qtm (quick time). Kaksi ensimmäistä taitavat olla tällä hetkellä yleisimmät.

Avi-formaatissa voidaan käyttää useita eri pakkausmenetelmiä (codec). Jos otat käyttöön jonkun ultramodernin ja huippuhyvän codecin, ajaudut helposti vakaviin yhteensopivuusongelmiin. Tämä tarkoittaa että sivuillasi vierailevan henkilön tietokone ei tunnista tätä codeccia eikä videota voida siten näyttää ruudulla. Taas kerran tekninen jippoilu kostautuu, joten kannattaa pitää aina mielessä ratkaisujen tekninen yhteensopivuus mahdollisimman monen (tavallisen) kotitietokoneen kanssa.

Seuraavaksi sitten käytännön koodiesimerkkejä siitä kuinka ääntä ja videota voidaan sijoittaa HTML-sivulle.