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, GIF tai SVG).

Voit käyttää myös figure-elementtiä.

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.

Vektorigrafiikka voi piirtää Inkscapella

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 lisääminen omalle sivulle

Ääni

Musiikki upotetaan sivulla samaan tapaan kuin videokin mutta käytetään audio-elementtiä.

<audio controls="controls" src="musa.mp3"></audio>

Musiikki on oltava tiedostomuodossa jota selain tukee. Suositeltavia muotoja ovat MP3, AAC ja OGG-tiedostomuodot.

Multimedia

Multimedialla tarkoitetaan vuorovaikutteisia audiovisuaalisia esityksiä. Multimediaa voi lisätä WWW:hen esim. Flashilla tai SVG-kuvien ja CSS-animaatioiden avulla.

Flash

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

Vaativat toimiakseen selaimeen asennetun Flash-laajennuksen. Flash poistuu käytöstä. Käytä ennemmin SVG-kuvia ja CSS-animaatioita

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 Officella 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/multimedia/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-10-19 09:12:11
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta