Kuva ja ääni verkossa - Luento 7

• Luentotaltiointi
• Linkittäminen
• Upottaminen
  • MIME-tyypit
  • img
  • Object
• Kuvat
  • JPEG
  • PNG
  • GIF
  • Scalable Vector Graphics (SVG)
  • Kuvakartat - map
• Videot
  • Videoiden yleisiä ominaisuuksia
  • Videon pakkaus
  • 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.
• On pyrittävä tiivistämään median koko 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 voi käyttäjä tallentaa tiedoston paikallisille 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

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

img

Pelkkiä kuvia voidaan upottaa dokumenttiin img -elementillä. Kuvia siirrettäessä WWW:hen täytyy kuva ensin muokata kuvankäsittelyohjelmalla ja muuntaa sopivaan formaattiin.

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 ominaisuudet ovat:

• data - viite objektiin
• type - objektin tyyppi
• archive - pilkuilla eroteltu lista etukäteen ladattavistapaketeista, 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" />
</object>
</p>

• Object Paranoia

Kuvat

• Kuva on pienennettävä kuvankäsittelyohjelmalla riittävän pieneksi.
• Kuvista voi kokeilla vähentää värejä, jolloin tiedoston koko pienenee.
• 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 bit).
• 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.
• Tukee lomitusta.
• Tukee läpinäkyvyyttä (alpha channel).
• Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
• GIF-formaattia parempi pakkaustapa. Tulee korvaamaan GIF-formaatin.

GIF

• Käytetään viivapiirroksissa ja kaavioissa.
• Tukee lomitusta (interlaced gif).
• Tukee "taustavärin" läpinäkyvyyttä.
• Tukee animaatioita.
• Maksimissaan 256 väriä (8 bit).
• Lisenssimaksuja vaativa pakkausalgoritmi. Patentti on vanhentumassa.

Scalable Vector Graphics (SVG)

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

• Mozilla SVG
• Adobe SVG Viewer
• SVG Magic
• SVG esimerkki

Esimerkkejä:

• Mozilla SVG samples
• hazor1e.xml

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.

Esimerkki, jossa voi napauttaa emolevyn osia.

Tietenkin kartoissa voidaan hyödyntää map-elementtiä, esimerkiksi:

• Kampuskartta
• Funetin kartta

Videot

• Videoita voidaan joko välittää 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. 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ä 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ä 50.
  • Staattisessa kuvassa (esim. luentovideo) riittää vähempikin.

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 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) vai VBR (Variable Bitrate).
• Videotiedostot voivat olla useassa eri formaatissa
  • 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).
  • Kodekki (engl. codec) määrää ohjelmamodulin, jolla videodata pakataan ja puretaan.
    • Yleensä kodekki tulee yleensä videota toistavan ohjelman mukana, mutta joskus se on haettava erikseen.
    • Tarvittavan kodekin voi tunnistaa esim. GSpot-ohjelmalla.
    • Useimmiten kodekki ei ole kytköksissä tiedostomuotoon.
    • Formaattien vertailu - Extreme Tech
    • Toinen vertailu

Quicktime

• Sorenson 3
• H.264 / MPEG-4 AVC

MPEG

• MPEG-1 on vanha, mutta hyvin tuettu videoformaatti. Haittapuolina iso tiedostokoko ja artifaktikuviot.
• MPEG-2-pakkausta käytetään DVD-videoissa, soveltuu harvoin internetjakeluun
• MPEG-4 - standardi lähes DVD-tasoiselle videolle
  • DivX - tuotantokäyttöön maksullinen pakkausformaatti
  • XviD - vapaa MPEG-4 yhteensopiva pakkausformaatti
• MPEG-4 AVC

Windows Media

• Windows Media 9 -kodekit

Muita kodekkeja

• 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. Mediaplayer, 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-elementeille 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.

• MP3:n upottaminen standardien mukaisesti
• Quicktime Embedded Media Test
• Yleisradio -Real-audio-pätkiä
• Shoutcast - mp3-stream
• winamp.com -mp3-soitin
• Mediaplayer

Multimedia

Multimedialla tarkoitetaan vuorovaikutteisia audiovisuaalisia esityksiä. Multimediaa voi lisätä WWW:hen muutamin erilaisin tekniikoin.

Flash

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

Vaatii toimiakseen selaimeen asennetun Flash-laajennuksen.

• Flash-sovelluksen upottaminen sivulle standardin mukaisesti
• Flash player
• Flash & Shockwave
• the Void
• HIM
• Helsingin sanomat - mainosbannerit

Tulostettavaksi tarkoitetut dokumentit

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

PDF vaatii Adobe Acrobat Readerin ja Postscript vaatii esim. Ghostviewin. Adobella on on omat maksulliset PDF:n tuottamiseen tarkoitetut ohjelmistot, mutta myös LaTeX:illa ja OpenOfficella voi tuottaa PDF:iä.

Esimerkkejä:

• Tietotekniikan perusteet PDF
• Tietotekniikan perusteet Postscript
• Tietotekniikan perusteet HTML