Kuva ja ääni verkossa - Luento 8

• Luentotaltiointi
• Linkittäminen
• Upottaminen
  • Kuvat
  • Object
  • map
• Kuvauskieliä
  • Scalable Vector Graphics (SVG)
  • MathML
  • VoiceXML
• Videot
  • Edellytykset videon toimimiselle suoraan selaimessa
  • Videon upottaminen
• Äänitiedostot
• Multimedia
  • Synchronized Multimedia Integration Language (SMIL)
  • Flash
• Tulostettavaksi tarkoitetut dokumentit

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

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 mikä järjestelmä tukee 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.

Kuvat

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

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

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

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

Kuvauskieliä

Kuvauskielet ovat XML:ään perustuvia kieliä, joilla voidaan kuvata WWW:hen sijoitettavia objekteja, kuten esimerkiksi kuvia, kaavoja tai äänidialogeja.

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

MathML

MathML on matemaattisen ja tieteellisen tekstin tuottamiseen tarkoitettu kieli. MathML perustuu XML:ään samalla tavalla kuin XHTML:kin.

MathML:ää tukee selaimista tällä hetkellä vasta Mozilla. Muita MathML-ohjelmistoja löytyy jo paljon.

MathML jakautuu kahteen osaan:

• Presentational
• Semantic

Esimerkkejä:

• Esimerkki
• W3C MathML Presentational -esimerkki
• MathML Basics

VoiceXML

Strukturoitu merkintäkieli tietokoneen ja ihmisen väliseen interaktioon puheen välityksellä. Tukee muunmuassa puheendialogeja, äänimerkkikommunikointia, digitoidun äänen välittämistä, puheen äänittämistä ja sen tunnistamista.

• World of VoiceXML

Videot

• Videoita voidaan joko välittää tietovirtana (stream) tai kokonaisina tiedostoina.
• Video täytyy pakata häviöllisesti, sillä liikkuva kuva vie todella paljon levytilaa ja siten myös kaistaa internetissä siirrettäessä.
• Videon laatu riippuu pakkaustavasta ja tiedoston koosta.
• Videoon voi liittyä jokin erillinen ääniformaatti tai äänen pakkaus liittyy kiinteästi videoformaattiin.

Videotiedostot voivat olla useassa eri formaatissa, kuten kuvatkin. Kullekin formaatille tarvitaan sopiva ohjelma, joka osaa toistaa videon. Formaatteja ovat:

• Formaattien vertailu - Extreme Tech
• Toinen vertailu
• Quicktime (*.MOV)- Applen kehittämä videoformaatti. mm. elokuvatrailereiden esittämiseen
• Realmedia (*.rm)
• Windows Media (*.wmv)- pääasiassa vain Windowsissa ja Windows Media Playerillä toistettavat videot
  • Windows median erilaiset pakkaustavat
• MPEG (*.mpg)
  • 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

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.

Tiedostopääte ei aina suoraan kerro videon tyyppiä. Esim. AVI-muodossa (*.avi)voi jakaa mitä tahansa edellämainituista videoformaateista.

• GSpot (kuinka selvitän mitä codecia tarvitsen)

Videon upottaminen

• MPEG:in upottaminen
• Quicktimen upottaminen
• Standards Compliant method to add Quicktime movies to pages

Äänitiedostot

RealAudio ja MP3 ovat WWW:n käytetyimmät ääniformaatit. Realaudio tukee myös videokuvaa. Ogg Vorbis on MP3:n vapaa kilpailija. Myös ääntä voidaan levittää tiedostona tai tietovirtoina.

• MP3:n upottaminen standardien mukaisesti
• 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.

Synchronized Multimedia Integration Language (SMIL)

SMIL on XML:ään perustuva standardoitu kieli jolla voidaan määritellä synkronoituja multimediaesityksiä kuvien, tekstin, videon ja äänen avulla.

• Green is In XHTML+SMIL-esimerkki, toimii IE:lla
• Toinen esimerkki
• Synchronized Multimedia Integration Language (SMIL) LuK-tutkielma
• Learn SMIL with a SMIL
• Yle Multiradion SMIL
• Miten teen verkkoluennon - SMIL
• The CWI SMIL Page
• Streaming Media Wordl: SMIL
• SMIL - wikibooks
• A Realists's SMIL Manifesto
• XHTML+SMIL Profile

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
• Nike
• Big Fish - Sony Pictures
• Harry Potter - Warner Bros
• 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