Kuva, ääni ja video verkossa - Luento 9

• Luentotaltiointi
• Linkittäminen
• Upottaminen
  • MIME-tyypit
  • img
  • object
• Kuvat
  • JPEG
  • PNG
  • GIF
  • Scalable Vector Graphics (SVG)
  • Kuvakartat - map
• Videot
  • Videoiden yleisiä ominaisuuksia
  • Videon pakkaus
  • Videoiden tiedostoformaatit
  • Kodekit
  • Edellytykset videon toimimiselle suoraan selaimessa
  • Videon upottaminen
  • Lisätietoa
• Ääni
• Multimedia
  • Flash
• Tulostettavaksi tarkoitetut dokumentit

Luennolla perehdytään millaisin tekniikoin kuvaa, ääntä, videota ja multimediaa voidaan liittää WWW-sivulle.

Median liittämisessä WWW-sivulle on otettava huomioon:

• Sivuston olennainen sisältö pitää olla saavutettavissa ilman mediaobjekteja.
• Median formaatti pitää olla sopiva kohderyhmälle.
• Median tiedostokoko on pyrittävä tiivistämään mahdollisimman pieneksi.

Linkittäminen

Animaation, kuvan, puheen pätkän tai musiikkia saa WWW-sivulle yksinkertaisimmillaan lisäämällä sivulle linkin (a-elementti), joka viittaa kyseiseen tiedostoon. Linkin avulla käyttäjä voi tallentaa tiedoston paikalliselle levylle ja käynnistää sen erillisellä ohjelmalla tai selaimella. Ohjelman on luonnollisesti tuettava kyseistä tiedostotyyppiä. Tiedosto voi olla myös lyhyt ohjetiedosto ohjelmalle, joka voi edelleen hakea mediaa verkosta.

Upottaminen

Upottamisella tarkoitetaan animaation, kuvan tai äänen liittämistä suoraan WWW-sivulle. Objekti ei oikeasti liity XHTML-tiedostoon (kuten esimerkiksi Word-dokumenttiin), vaan edelleen tarvitaan viite erilliseen tiedostoon. Selain näyttää mahdollisuuksien puitteissa objektin suoraan sivulla.

MIME-tyypit

MIME-tyypit ovat sähköpostissa ja HTTP-protokollassa käytetty tapa ilmaista mitä mediatyyppiä annettu tieto on ja millä ohjelmalla selaimen pitäisi se avata. Esimerkiksi:

Mediatyyppiä ei pidä yrittää päätellä suoraan tiedoston päätteestä, vaan ratkaisevaa on käytetyn protokollan kertoma MIME-tyyppi.

img

Pelkkiä kuvia voidaan upottaa dokumenttiin img-elementillä. Kuvia siirrettäessä WWW:hen täytyy kuva ensin muokata kuvankäsittelyohjelmalla ja muuntaa sopivaan formaattiin (JPG, PNG tai GIF).

object

object-elementillä voi liittää dokumenttiin periaatteessa mitä tahansa objekteja (kuvia, videoita, animaatioita, ohjelmasovelluksia jne.). Jos selain ei tue haluttua tiedostoa, niin object-elementin avulla voidaan määritellä vaihtoehtoisia esitystapoja. object-elementin sukulaisia ovat standardista poistuva applet- ja epästandardi embed-elementti, joiden käyttöä on syytä välttää. Tärkeimmät object-elementin ominaisuudet ovat:

• data - viite objektiin
• type - objektin tyyppi
• archive - pilkuilla eroteltu lista etukäteen ladattavista paketeista, jotka sisältävät objektitietoja
• classid - objektin sisällä toteutettava osa
• codebase - hakemistopolku muissa attribuuteissa määritellyille viittauksille
• declare - objekti käynnistetään erikseen

Muuta huomioitavaa:

• object-elementin sisään pitää laittaa vaihtoehtoinen esitystapa, esim. tekstiä tai kuva.
• object-elementin sisään voi laittaa param-elementtejä, joilla voi määritellä ulkoiselle ohjelmalle asetuksia.
• Lisää tietoja: XHTML 1.1 Object module

<p>
<object type="image/svg+xml" data="hazor1e.xml" title="SVG-kuva">
<img src="hazor1e.gif" alt="SVG-kuva (GIF)" title="SVG-kuva (GIF)" />
</object>
</p>

• Object Paranoia - kuinka saada objektit toimimaan oikein myös vanhemmissa Internet Explorereissa

Kuvat

• Kuvat on pienennettävä kuvankäsittelyohjelmalla riittävän pieneksi.
• Kuvista voi kokeilla vähentää värejä, jolloin tiedoston koko pienenee (kaaviot, ei valokuvat).
• Kuvan muokkaus on tehtävä aina alkuperäiskuvasta lähtien.

Valitse sopiva pakkaustapa, pakkaamattomat bittikarttaformaatit kuten TIFF tai BMP eivät sovi nettiin. Selaimet tukevat ainakin jpg, png ja gif-formaatteja.

JPEG

• Käytetään valokuvien näyttämiseen WWW:ssä.
• Pakkausaste voidaan määritellä. (Pakkausasteiden vertailu).
• 16 miljoonaa väriä (24-bittinen).
• Tukee lomitusta (progressive jpeg).
• Ei tue läpinäkyvyyttä.
• Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.
• Selaimet tukevat formaattia hyvin.

PNG

• Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
• Käytetään myös kuvaoriginaalien säilyttämiseen.
• Jopa 48-bittinen kuva (2⁴⁸ väriä).
• Tukee lomitusta.
• Tukee läpinäkyvyyttä (alpha channel).
• Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
• GIF-formaattia parempi pakkaustapa. Korvaa vanhemman GIF-formaatin muuten paitsi animaatioiden osalta.

GIF

• Käytetään viivapiirroksissa ja kaavioissa.
• On hyvä vaihtoehto kuville, joissa on paljon samaa väriä sisältäviä alueita.
• Tukee lomitusta (interlaced gif).
• Tukee "taustavärin" läpinäkyvyyttä.
• Tukee animaatioita.
• Maksimissaan 256 väriä (8-bittinen).
• Aiemmin lisenssimaksuja vaatinut pakkausalgoritmi. Patentti on vanhentunut, joten nykyään vapaasti käytettävissä.

Scalable Vector Graphics (SVG)

SVG on vektorigrafiikan määrittelyyn tarkoitettu kieli. SVG perustuu myös XML:ään.

• Mozilla SVG
• Adobe SVG Viewer

Esimerkkejä:

• SVG esimerkki
• Mozilla SVG samples
• hazor1e.xml

SVG-kuvia (tai muita vektorigrafiikkakuvia) voi konvertoida bittikarttakuvista esim. Vector Magic -ohjelmalla.

Kuvakartat - map

map-elementillä voidaan tehdä kuvakarttoja, jotka yhdistyvät img- tai object-elementtiin. map-elementtiin liittyy kiinteästi area-elementti, jolla määritellään kuvan tai objektin alueita. area-elementillä on pakollisena ominaisuutena alt-teksti, mikäli selain ei tue kartta-alueita.

Lisätietoa: Client-side image maps: the MAP and AREA elements

Esimerkki, jossa voi napauttaa emolevyn osia

Kartoissa voidaan toki hyödyntää map-elementtiä, esimerkiksi:

• Kampuskartta
• Funetin kartta
• HTML-Image map Creator WYSIWYG

Videot

• Videoita voidaan välittää joko verkkovideona (stream) tai kokonaisina tiedostoina (download).
• Videoon voi liittyä jokin erillinen ääniformaatti tai äänen pakkaus liittyy kiinteästi videoformaattiin.

Videoiden yleisiä ominaisuuksia

• Resoluutio: kuvan tarkkuus, eli korkeus ja leveys pikseleinä.
• Kuvasuhde: kuvan leveyden suhde korkeuteen.
  • Yleensä laskettavissa resoluutiosta.
  • Ei kuitenkaan aina, esim. DVD-resoluutio 720x576, mutta kuvasuhde voi olla esim. 4:3 tai 16:9. Tällöin kuvaa venytetään toistavan laitteen toimesta.
• Lomitus:
  • Lomitettu tai progressiivinen.
  • Lomitetussa kuvassa on kaksi kenttää. Parilliset ja parittomat vaakaviivat.
  • TV:ssä (analoginen kuvaputkitelevisio) on tyypillisesti lomitettua kuvaa.
  • Tietokonenäytöllä katselua varten lomitus on poistettava videosta. Tätä sanotaan lomituksen poistoksi (engl. deinterlace)
  • Progressiivisessa videossa kuvat ovat kokonaisia ja ne näytetään kerralla.
• Kuvanopeus:
  • Montako kuvaa näytetään sekunnissa.
  • PAL-standardissa 25 kuvaa sekunnissa. Lomitettuja kenttiä on tällöin 50.
  • Staattisessa kuvassa (esim. luentovideo) riittää vähempikin (esim. 15 kuvaa sekunnissa).

Videon pakkaus

• Video täytyy pakata häviöllisesti, sillä liikkuva kuva vie todella paljon levytilaa.
• Internetissä välitettävä video on pakattava vielä tiiviimmin, sillä verkkoyhteyden kaistanleveys on rajoittava tekijä.
• Videon laatu riippuu pakkaustavasta ja tiedoston koosta.
• Tiedoston kokoon vaikuttaa datavirta (engl. bitrate). Tätä mitataan bitteinä sekunnissa (bits/s).
• CBR (Constant Bitrate) tai VBR (Variable Bitrate).

Videoiden tiedostoformaatit

Tiedostokääre (engl. container) määrää, millä tavalla video/audio-data ja näihin liittyvä metatieto pakataan tiedostoon.

• Quicktime (*.mov) - Applen kehittämä videoformaatti. Tukee esimerkiksi verkkovideota.
• Realmedia (*.rm)
• Windows Media (Advanced Systems Format) (*.wmv / *.asf) - pääasiassa vain Windowsissa ja Windows Media Playerillä toistettavat videot.
• AVI - Audio Video Interleave - vanha, mutta suosittu Windows-järjestelmiin kehitetty container-formaatti.
• MPEG-PS/TS, MP4 (*.mpg, *.m2v *.mp4) - MPEG-standardien tiedostomuodot.
• Container-formaattien vertailua (Wikipedia).

Kodekit

Kodekki (engl. codec) määrää ohjelmamodulin, jolla videodata pakataan ja puretaan.

• Yleensä kodekki tulee videota toistavan ohjelman mukana, mutta joskus se on haettava erikseen.

  Esim. Windows Media Player ja Media Player Classic osaavat esittää mitä tahansa videoita, jos videot ovat niiden ymmärtämässä tiedostokääressa ja videossa käytetty kodekki on asennettuna.

• Tarvittavan kodekin voi tunnistaa esim. GSpot-ohjelmalla.
• FFDShow sisältää useimmat kodekit, joten pelkästään sen hakemalla pärjää jo melko hyvin.
• Useimmiten kodekki ei ole kytköksissä tiedostomuotoon.
• Formaattien vertailu - Extreme Tech
• Toinen vertailu

Yleisesti käytettyjä kodekkeja

• MPEG-1 on vanha, mutta hyvin tuettu videoformaatti. Haittapuolina iso tiedostokoko ja artifaktikuviot.
• MPEG-2-pakkausta käytetään DVD-videoissa ja suomalaisissa DigiTV-lähetyksissä, soveltuu harvoin Internet-jakeluun.
• MPEG-4 - standardi lähes DVD-tasoiselle videolle.
  • DivX - tuotantokäyttöön maksullinen pakkausformaatti
  • XviD - vapaa MPEG-4 yhteensopiva pakkausformaatti
• H.264 / MPEG-4 AVC. Käytetään yleisesti QuickTime-videoissa kuten elokuvatrailereissa.
• Windows Media 9 -kodekit. Esim. kurssin luentovideot.
• Häviöttömät, mutta pakkaavat kodekit, esim. Huffyuv, Alparysoft.
• DV - digitaalisissa videokameroissa käytetty pakkausmuoto.

Edellytykset videon toimimiselle suoraan selaimessa

• Videon näyttämiseen soveltuva ohjelma, esim. Media Player, RealPlayer, QuickTime Player.
• Selaimeen sopiva plugin, joka mahdollistaa videon esittämisen suoraan selaimessa.
• Videossa käytetyn videokoodauksen ja audiokoodauksen purkamiseen sopivat kodekit.

Videon upottaminen

• MPEG:in upottaminen
• QuickTimen upottaminen
• Windows Median upottaminen

Lisätietoa

• RTSP-protokolla
• Standards Compliant method to add Quicktime movies to pages

Ääni

• RA - Real Audio
• WMA - Windows Media Audio
• MP3 - MPEG-1 Audio Layer 3
• OGG - OGG Vorbis
• AC3 - Dolby Digital
• AAC - Advanced Audio Coding
• MID - Musical Instrument Digital Interface

Epästandardeilla embed- ja bgsound-elementeillä voidaan lisätä musiikkia soimaan WWW-sivun taustalle. Näitä on syytä välttää, koska ne toimivat vain tietyissä selaimissa ja käyttäjät haluavat harvemmin musiikkia sivun taustalle. object-elementillä voi upottaa musiikkia sivulle samaan tapaan kuin videota.

Esimerkit:

• MP3-tiedoston upottaminen
• MP3-tiedoston upottaminen, soitin Media Player

Lisätietoa aiheesta:

• MP3:n upottaminen standardien mukaisesti
• Shoutcast - mp3-stream
• Winamp - mp3-soitin
• Windows Media Player

Multimedia

Multimedialla tarkoitetaan vuorovaikutteisia audiovisuaalisia esityksiä. Multimediaa voi lisätä WWW:hen esim. Flashilla.

Flash

Flash-sovellukset ovat WWW-sivuille upotettuja vektorigrafiikalla toteutettuja multimediaesityksiä.

Flash-sovellukset voivat sisältää myös pelkkää videota tai ääntä. Esim. YouTube ja Google Videos -palvelut käyttävät Flashia.

Vaatii toimiakseen selaimeen asennetun Flash-laajennuksen.

• Tietotekniikan opettajan työvälineitä -kurssin luento Flashistä
• Flash-sovelluksen upottaminen sivulle standardin mukaisesti
• Flash Player
• Leo Burnett - esimerkki Flashillä toteutetusta WWW-sivustosta
• The Void - esimerkki Flashillä toteutetusta WWW-sivustosta

Tulostettavaksi tarkoitetut dokumentit

PDF- ja Postscript-tiedostomuotoja käytetään, kun halutaan dokumentin ulkomuodon pysyvän täsmälleen halutunlaisena.

PDF vaatii esimerkiksi Adobe Readerin ja PostScript vaatii esimerkiksi Ghostviewin. Adobella on on omat maksulliset PDF:n tuottamiseen tarkoitetut ohjelmistot, mutta myös LaTeX:illa, OpenOfficella ja Microsoft Office 2007:lla voi tuottaa PDF:iä.

Esimerkkejä:

• Opinto-opas - PDF
• Opinto-opas - HTML
• Gradu - PostScript