Kuva, ääni ja video verkossa

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

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

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:

MIME-tyyppiTyypillinen tiedostopääteFormaatti
image/svg+xml.svgScalable Vector Graphics
application/x-ogg.oggOGG Vorbis
video/mpeg.mpgMPEG-video
video/avi.aviVideo for Windows
video/quicktime.movQuickTime Windows
audio/x-mp3.mp3MPEG-1 Audio Layer 3

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:

Muuta huomioitavaa:

SVG-kuva (GIF)

<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>

Kuvat

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

JPEG

PNG

GIF

Scalable Vector Graphics (SVG)

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

Esimerkkejä:

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:

Videot

Videoiden yleisiä ominaisuuksia

Videon pakkaus

Videoiden tiedostoformaatit

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

Kodekit

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

Yleisesti käytettyjä kodekkeja

Edellytykset videon toimimiselle suoraan selaimessa

Videon upottaminen

Lisätietoa

Ääni

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:

Lisätietoa aiheesta:

Multimedia

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

Flash

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

Vaativat toimiakseen selaimeen asennetun Flash-laajennuksen. Flash on poistumassa käytöstä.

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ä:

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/luento9/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-05 17:31:45
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta