Monimedian työkurssi Multimedian teknologiat

Esitys aiheesta: "Monimedian työkurssi Multimedian teknologiat"— Esityksen transkriptio:

1 010830000 Monimedian työkurssi Multimedian teknologiat
Ilmari Laakkonen Huone 6535, päivystys pe 16-17

2 Digitaalinen media Peruselementit: Multimedia: Hypermedia: Monimedia:
Teksti, valokuva, grafiikka, video, animaatio, ääni ja musiikki. Multimedia: käytetään kahta useampaa mediaelementtiä. Hypermedia: Käyttäjällä mahdollisuus tehdä valintoja tai vaikuttaa median esitystapaan. Monimedia: Sisältö esitetään useamman jakelukanavan avulla, esim. lehti, televisio ja internet.

3 WWW-multimedia Laajimmillaan WWW-multimedia on vuorovaikutteinen ja sisältörikas liikkuvan ja staattisen kuvan (video, animaatio, valokuvat, grafiikka), äänten (musiikki ja muut äänet) ja tietokantojen yhdistelmä.

4 Multimedia teknologiat
Teksti Kuva Video Animaatio Ääni ja musiikki Ohjelmointitekniikat Tietokannat Jakelutekniikat

5 Teksti ja taitto Taitto on tekstin, kuvien ja muiden graafisten elementtien sommittelua kokonaisuudeksi Multimediassa taittoa vastaa käyttöliittymän suunnittelu Lehtitaiton elementit Tekstitypografia Tekstimateriaali Kuvat

6 Tekstitypografia Pääotsikko Ingressi, johdantokappale
Suurin kirjasinkoko, lihavoitu Ingressi, johdantokappale Leipätekstiä suurempi pistekoko ja ehkä kursivoitu/lihavoitu Ala- tai yläotsikko Pääotsikkoa pienempi kirjasinkoko Väliotsikko Leipätekstiä suurempi kirjasinkoko, vasemmalle tasattuna, erottaa tekstikappaleet toisistaan Leipäteksti Tekstin perusaines, esim. pistekoko 12, tavallinen teksti, ei tyylejä, tasapalstainen Kuvateksti Eri kirjasin kuin leipätekstillä tai kursivoitu

7 Teksti ja typografian perustermit
Kirjasinleikkaus, fontti, kirjasin Arial, Helvetica, Times, Courier, Century Gothic, Verdana, Comic Sans MS Serif ja Sans serif Serif. Kirjasimet joissa vaakasuuntaisia viivoja ohjaamassa lukijan silmää. Sans serif. Kirjasimet joissa ei ole vaakasuuntaisia viivoja Kiinteä ja vaihtelevaväliset kirjasimet Liirum Laarum Lorum.

8 Teksti ja typografian perustermit
Kirjasimen tehokeinot Kirjasinkoko ilmoitetaan yleensä pisteinä (72 pistettä = 1 tuuma) paperilla yleensä 8-14 pistettä Näytöllä pistettä

9 Teksti ja typografian perustermit
Välistys kirjainvälistys sanavälistys rivivälistys Tasaus ja palstoitus Leveällä paperilla esim. lehdissä, palstoitus helpottaa lukemista

10 Teksti ja näyttötaitto
Näytöltä lukeminen hitaampaa kuin paperilta Monitorin ominaisuudet ja lukuetäisyys Näytön muoto poikkeaa paperin muodosta Näyttöä ei voi käsitellä samalla tavalla kuin paperinippua Näytöllä käytettävä isompaa tekstikokoa kuin paperilla Otettava huomioon käyttäjien erilaiset näyttöresoluutiot Tekstiä silmäillään, artikkelista ei jakseta välttämättä lukea kuin pääotsikko ja ingressi.

11 Tietokoneen kirjasimet
Bittikarttakirjasimet Vektorikirjasimet Truetype Postscript Käyttöjärjestelmien mukana tulee perusvalikoima kirjasimia. Lisää saa verkosta lataamalla tai ostamalla Esim. Microsoft tarjoaa ilmaisen web kirjasinpaketin. Ei ole takeita siitä että muilla käyttäjillä samat kirjasimet Arial/Helvetica, Courier, Times ovat varmoja peruskirjasimia

12 Kirjasimet www-sivuilla
HTML suunniteltu kuvaamaan dokumentin rakennetta ja tekstielementtejä, ei muotoilemaan dokumentin ulkoasua. Käytännössä kolme tapaa määrittää haluttu kirjasintyyli <FONT> merkintä <FONT FACE=”Comic Sans MS, Arial”> Teksti </FONT> CSS (cascading style sheet) tyylimääritykset HTML 4 standardin mukainen tapa, tällöin HTML tiedostossa määritetään vain tekstin rakenne ja tekstin ulkonäkö tyylitiedostolla. Teksti muutetaan kuvaelementiksi ja kuva sijoitetaan siihen kohtaan jossa tekstielementtiä käytetään <IMG> merkinnällä. Ongelmana www-sivujen tiedostokoot ja latausajat

13 Tekstin muotoilu HTML-kielessä
Otsikko tasot <H1>, <H2>, jne. Kappale <P> Rivinvaihto <BR> Loogiset merkinnät <HI>, <ADDRESS>, <SITE> ja <EM> Fyysiset merkinnät <B>, <I>, <TT> ja <PRE> Kirjasimen määritys <FONT>

14 CSS – Cascading style sheet
HTML 4 standardin virallinen tapa tehdä tekstimääritykset. Mahdollistaa tarkan hallinnan seuraaviin ominaisuuksiin: Kirjasimen ja kirjasintyylin määritykset Tekstin värimääritykset ja taustavärin määritys Tekstin tasaus Tekstin välistys Tekstikehykset Uusissa selaimissa ja www-hallinta sovelluksissa hyvä tuki.

15 Valokuva ja grafiikka Värimallit Digitaalinen kuva Kuvien hankinta
Additiivinen vs subtraktiivinen Digitaalinen kuva Bittikarttakuva vs vektorigrafiikka Kuvien hankinta Kamera, skannerit, PhotoCD, kuvakirjastot Tiedostomuodot Kuvankäsittely

16 Valo ja värimallit

17 Värimallit tietokoneissa
Ohjelmissa voidaan valita mitä värimallia käytetään kuvien ja grafiikan tallennukseen. Jos kuva tai grafiikka menossa näytölle niin käytetään RGB värimallia. Jos kuva tai grafiikka menossa paperille niin käytetään CMYK värimallia. Muunnoksissa värimallista toiseen voi kadota värejä, koska RGB ei pysty näyttämään kaikki CMYK:n värejä ja päinvastoin.

18 Vektorigrafiikka Kuvan elementit muokattavia ja kuva aina maksimitarkkuudella lopullisesta mediasta riippumatta Kuvan elementtien muodot tallennetaan geometrisilla kaavoilla, joihin liitetään värien ja viivojen ominaisuudet. Yleensä multimedia- ja www-sovelluksissa muunnetaan bittikarttakuviksi lopulliseen sovellukseen.

19 Bittikarttakuva Kuva muodostuu pikseleistä, joilla on jokin tietty arvo Yksi pikseli on muokattava elementti Yleensä kuvankäsittely- ja piirto-ohjelmissa käsitellään kerralla useita pikseleitä. Kuvalla on aina tietty värimäärä ja tarkkuus/koko josta määräytyy kuvan viemä tila esim. kuvan koko 2x4 tuumaa, tarkkuus 100 pistettä tuumalle ja värimäärä 256 väriä (8 bittiä) - > kuvan koko on 2*100*4*100*8bit = 80000bittiä = tavua

20 Bittikarttakuva

21 Bittikarttakuva, värisyvyys
Värisyvyys määrittää kuinka monta bittiä käytetään yhden pikselin tilan tallentamiseen. Mustavalkoinen kuva (1bit) Harmaasävykuva (8bit) Värikuva 256 väriä (8bit) Tuhansia värejä (64*1024) (16bit) Miljoonia värejä (24bit) Tarkempiakin muotoja on olemassa esim. 48bit

22 Bittikarttakuva, kuvan koko
Kuvan koko voidaan esittää kahdella tavalla Pikselikoko, käytetään usein tietokoneohjelmissa ja www-sivuille tehdyssä grafiikassa. esim. 640*480 tai 1024x768 pikseliä Resoluutio, käytetään kun tiedetään kuvan viemä tila tavallisina mittoina ja näyttölaitteen resoluutio. esim. kuvan koko on 10*15 tuumaa ja näyttölaitteen resoluutio 100 pistettä tuumalle -> kuva jonka koko on 1000x1500 pikseliä

23 Näyttölaitteiden resoluutiot
Näytöt, dpi (dots per inch) bittikarttakuvan tarkkuus sama kuin näytössä Laser- ja mustetulostimet, 300dpi bittikarttakuvan tarkkuus 100ppi (pixels per inch) Sanomalehdet, 600dpi bittikarttakuvan tarkkuus ppi Esitteet ja aikakausilehdet, 1200dpi bittikarttakuvan tarkkuus ppi Taidepainotyöt vielä suuremmat resoluutiot bittikarttakuvan tarkkuus yli 300ppi

24 Kuvien hankinta Digitaalikamera Tavallinen kamera Kuvakirjastot
Filmi -> valokuva -> skanneri eli kuvanlukija Filmi -> Photo CD Filmi -> dia-/filmiskanneri Kuvakirjastot Tuotetaan kuva tietokoneella Piirto-ohjelmat Kaaviot Mallinnusohjelmat

25 Tiedostomuodot Bittikarttakuvat Vektorigrafiikka
Ohjelmien omat (Photoshop, Corelpaint, jne.) TIFF (hyvä muoto ohjelmien väliseen siirtoon) GIF (web) JPEG (web) PNG (web) Vektorigrafiikka Ohjelmien omat (illustrator, CorelDraw, jne.) EPS (hyvä muoto ohjelmien väliseen siirtoon) WMF (windows metafile) SVG (web, plugin) Flash (web, plugin, animaatiomuoto)

26 Tiedostomuodot, GIF 256 väriä, yksi väreistä voidaan määrittää läpinäkyväksi Soveltuu vähän värejä sisältävän grafiikan esittämiseen bittikarttamuodossa ja käyttöliittymä elementteihin Kuvasta ei hävitetä informaatiota kuten JPEG-muodossa Selaimet tukevat ilman plugineja

27 Tiedostomuodot, JPEG 256 harmaasävyä tai miljoonia värejä
Ei läpinäkyvyyttä Suunniteltu valokuvien tiedostokokojen pienentämiseen Kuvasta hävitetään informaatiota Selaimet tukevat ilman plugineja

28 Tiedostomuodot, PNG Tukee useita värimääriä, myös läpinäkyvyyttä
Suunniteltu korvaamaan GIF siinä olevien tekijänoikeusongelmien takia Ei kadota kuvainformaatiota, eli suurilla värimäärillä kuvista tulee isokokoisia. esim. valokuvat, ei suunniteltu JPEG:in korvaajaksi Selaimet tukevat ilman plugineja

29 Tiedostomuodot, SVG Virallinen www-vektorigrafiikkamuoto
Tukee linkkien sijoittamista kuvan elementteihin Tällä hetkellä selaimet eivät tue ilman plugin:ia Ilmainen plugin saatavilla esim. Adobe:n www-sivuilta Useimmista vektorigrafiikka piirto-ohjelmista voidaan tallentaa SVG-muodossa.

30 Tiedostomuodot, Flash Animaation esitysmuoto
Tällä hetkellä selaimet eivät tue ilman plugin:ia, mutta osa selainten valmistajista toimittaa sen selaimen mukana. Ilmainen plugin saatavilla Macromedian www-sivuilta. Animaatio pohjautuu vektorigrafiikaan ja tätä voidaan käyttää animaation sijasta myös kuvien esittämiseen. Voidaan käyttää myös käyttöliittymäelementeissä, koska kuvan elementteihin voidaan liittää linkkejä ja erilaisia tapahtumia hiiren toiminnoista.

31 Kuvankäsittely Tarkoitetaan yleensä bittikarttakuvan käsittelyä tietokoneella ennen sen sijoittamista multimediaesitykseen tai taittoon. Kuvaa käsitellään myös perinteisessä pimiötyöskentelyssä, mutta silloin esim. valotuskemikaaleilla ja valotuksella. Kuvia on käsitelty ennen tietokoneitakin, mutta se on ollut erittäin työlästä.

32 Yleisimmät kuvankäsittely toiminnot
Kuvan rajaus ja koon muutos Värikorjaus kuva liian tumma tai vaalea Kuvan sävyalueen muutos Terävöitys/pehmennys Pölyn ja naarmujen poisto Kuvaelementtien poistaminen ja lisäys Tekstin lisääminen Kollaasin, eli kokoelmakuvan muodostaminen Erilaiset tehostesuotimet Käyttöliittymän elementtien käsittely

33 Kuvat www- sivuilla Www-selaimet tukevat ilman plugin:ia käytännössä GIF-, JPEG- ja PNG- muotoja ja muut vaativat lisäohjelmia Kuvat sijoitetaan www-sivuille <IMG> merkinnällä

34 Digitaalisen videon käyttö
Multimedia ohjelmat pieni koko ja huonompi kuvanlaatu kuin televisiossa Introt, asioiden havainnollistaminen, elävöittäminen Video internet verkossa Hidas latautuminen, streaming auttaa Digitaali TV Useampia kanavia samalle kaistanleveydelle interaktiivinen kaksisuuntainen yhteys, katsojalla mahdollisuus vaikuttaa lähetykseen DVD-levyt (Digital Versatile Disc) Levitys formaatti elokuville ja peleille. Hyvä kuvan ja äänen laatu, erikieliset tekstitykset

35 Videon tuotantoprosessi
Ennakkosuunnittelu Idea -> käsikirjoitus Käsikirjoitus -> budjetti ja aikataulu Kuvaukset Toteutetaan käsikirjoituksen mukainen kuvaus Tekniset ongelmat lähinnä valaistuksessa ja äänen taltioinnissa. Editointi Kuvattu materiaali koostetaan kokonaisuudeksi. Lisätään grafiikka, äänitehosteet , musiikki ja selostus.

36 Videon käyttö multimediassa
Hyvä video on havainnollinen Video vakuuttaa ja luo mielikuvia Käyttäjän tulee voida kontrolloida videota. Interaktiivisuus. Lähikuvat toiminnoista ja ihmisistä soveltuvat pieneen ruutuun Videoleike ei saa olla liian pitkä. Alle minuutissa kerrotaan jo paljon Video on yleensä kompressoitu liikkuvan kuvan vaatiman suuren tilantarpeen vuoksi.

37 Videon laatu Videomateriaali vie paljon tilaa ja sen käyttö multimediassa ja internetissä on aina kompromissi laadun ja tiedostojen koon välillä. Videokuvan koko, resoluutio? Monta kuvaa sekunnissa näytetään? Videokuvan pituus? Mitä videoformaattia käytetään? Kompressiomuoto ja laatu? Mihin videota tallennetaan? Millä laitteilla niitä katsotaan?

38 Videokuvan koko PAL videokuvan tarkkuus 768*576
CCIR 601 standardin tarkkuus 720*576 Digitaalivideokameroiden PAL signaalin tarkkuus. PAL kuvassa näytetaan 25 kuvaa sekunnissa Näyttämällä puolikas kuva kerrallaan saadaan näennäinen piirto taajuus vastaamaan 50 kuvaa sekunnissa -> Kuvan lomitus. (interlace) Televisiossa käytetään videokuvan lomitusta, tietokoneissa ei. Valitaan videoeditointiohjelmassa kun tiedetään mihin lopputulos menee.

39 Kompressointi PAL kuvan koko digitaalikamerassa 720*576, kuvia näytetään 25 sekunnissa ja jokaiselle pisteelle on varattu 24 bittiä pisteen tilan esittämiseen. -> tarvitaan levytilaa n. 30 Mtavua sekunnissa Tarvitaan valtavat määrät levytilaa videon käsittelyyn Kompressiolla pienennetään käsiteltävien tiedostojen kokoa. Digitaalivideokamerat käyttävät 5:1 kompressiosuhdetta -> alle 6 Mtavua sekunnissa Vielä liian isoja CD-levyille ja internettiin -> lisää kompressiota -> koon ja laadun pienennys

40 Kompression laadun parannus kuvausvaiheessa
Hyvä kamera, mieluummin digitaalinen Oikein valotettu kuva, valoa riittävästi -> terävämpi kuva. Käytä jalustaa, pidä kameran liikkeet tasaisina ja rauhallisina Tausta yksinkertainen, muuttumaton tai tausta pidetään epäterävänä. Kuvassa mahdollisimman vähän yksityiskohtia

41 Videoformaatit Tuotantovaiheessa videot yleensä AVI- tai Quicktime muodossa Molemmissa on useita videon kompressio tapaa, codec Editoinnin aikana kompressio on vähäistä että kuvan laatu pysyy mahdollisimman hyvänä Lopullinen video tallennetaan suuremmalla kompressiolla Video for windows, AVI Windows Media RealVideo Quicktime, Apple MPEG

42 MPEG kompressiotekniikat
M-JPEG, perustuu JPEG- kompressioon MPEG, videon että äänen kompressioon MPEG- videomuodot MPEG-1, VHS-laatu MPEG-2, CCIR601, DVD ja HDTV MPEG-4, kuva-, matkapuhelimet, multimedia interaktiivisuus ja mediaelementtien hallinta MPEG-7, tuleva standardi mediatiedostojen hakupalveluiden parantamiseksi DV, digitaalivideokamerat

43 Internet streaming HTTP-protokolla ei ole tehokas isojen video- ja äänitiedostojen jakelussa internetissä Video ja äänimateriaalin jakeluun on kehitetty useita streaming protokollia Yleisimmät video ja äänijakelu formaateilla on omat ratkaisunsa RealMedia server Windows Media server Quicktime streaming server Haittana sitoutuminen tiettyihin ohjelmistovalmistajiin. Sitoo myös loppukäyttäjän.

44 Animaatio Käytöllä sama tavoite kuin videon kanssa.
Tehostaminen, mielikuvien luonti ja havainnollistaminen Yleisimmät animaation esitysmuodot: GIF-animaatio Shockwave Flash Realmedia Animaatio muutetaan johonkin videoformaattiin

45 GIF- animaatio Kuvatiedosto joka sisältää useita eri kuvia joista kukin muodostaa yhden animaatioruudun. GIF-animaatioon voidaan asettaa aika kuinka kauan mitäkin kuvaruutua näytetään. Sijoitetaan www-sivuille samalla tavalla kuin normaali GIF-kuva. Käytetään yleisesti www-mainoksissa ja bannereissa Toimii käytännössä kaikissa www-selailimissa

46 Shockwave ja Flash Macromedian kehittämät animaatiomuodot
Shockwave on laajempi muoto, sillä voidaan tehdä jopa ohjelmia. Tehdään Director ohjelmalla. Flash on vektorigrafiikkapohjaista animaatiota, jota voidaan tehdä Flash tai Livemotion ohjelmilla. Molemmille löytyy hyvä tuki eri käyttöjärjestelmille ja erityisesti Flash on aika turvallinen valinta animaatioihin Selaimet eivät tue ilman plugin:ia, mutta se on hyvin saatavilla.

47 RealMedia Animaatiomuoto joka on osa Real-yhtiön kehittämään mediamuotoa. Animaatiota tuotetaan Real:in omilla sovelluksilla ja realmedialle on hyvä tuki eri käyttöympäristöihin. RealMedia tukee ääntä, videota ja animaatiota. Selaimet eivät tue ilman plugin:ia, mutta se on saatavilla lähes kaikille selaimille.

48 Animaatio videomuodoissa
Muunnetaan animaatio johonkin videomuotoon, Voidaan näyttää samoilla ohjelmistoilla kuin muutkin videot. Voi syntyä isoja tiedostoja.

49 Ääni ja musiikki Varoitus ja huomioäänet Musiikki
Käyttöjärjestelmän tai ohjelman perusääniä, jotka pyrkivät kiinnittämään käyttäjän huomion. Musiikki Viihdyttävä elementti, joka luo tunnelmaa tai toimii aikaa ja paikkaa ilmaisevana keronnallisena elementtinä.

50 Ääni ja musiikki Puhe Tehosteet
Asiasisältö, mutta lisäksi luo mielikuvan puhujasta ja hänen suhteestaan asiaan. Tietoa-antava, Ohjaava opas, kommentaattori, asiaan johdattava puhuja. Tehosteet Tukevat kuvaa tai kertovat kuvan ulkopuolisia asioita. Korostaa tapahtumaa ja luo tunnelmaa.

51 Ääni ja musiikki Reaktioäänet Taustaäänet
Ohjaavat käyttäjän toimintoja ja antavat palautetta. Ääni-ikoni Taustaäänet Äänisilmukka, jota voidaan soittaa vaikka kuinka kauan. Käytetään kun ei tiedetä etukäteen kuinka kauan käyttäjä viipyy ruutunäkymässä.

52 Ääni ja musiikki Videoäänet Puhesyntetisaattori ja puheohjaus
Liikkuvaan kuvaan yhdistetyt äänet, jotka pysyvät tahdissa kvan kanssa. Nauhoitetaan kuvauksen yhteydessä tai lisätään jälkikäteen Puhesyntetisaattori ja puheohjaus Puheohjauksella voidaan ohjata sovellusta. Puhesyntetisaattorilla voidaan muuttaa kirjoitettu teksti puhutuksi ääneksi.

53 Ääni tiedostomuodot WAV, AIFF Windows media Quicktime audio
RealMedia/Realaudio MPEG audio MP2, MP3 MIDI

54 Äänitiedoston ominaisuudet
Näytteenottotaajuus 8000Hz, puhelinstandardi 11025 Hz, neljäsosa CD-äänilevyn näytteenotosta, sopii puheelle ja internet sivuille 22050 Hz, puolet CD-äänilevyn näytteenotosta, soveltuu hyvin multimedia tuotantoon 44100Hz, CD-äänilevyn näytteenottotaajuus Äänen resoluutio, 8 bit vai 16 bit? 8 bit 48dB dynamiikka C-kasetti 48dB Avokelanauhat 72dB 16-bit 96dB, CD-äänilevy

55 Äänitiedoston koon vertailu
Näytteenottotaajuus HZ 16-bit stereo Mt 16-bit mono Mt 8-bit stereo Mt 8-bit mono Mt 44100 10 5 2,5 22050 1,26 11025 0,63 8000 1,8 0,91 0,45 5000 1,1 0,57 0,29

56 Ääni – Mikrofonit Toimintaperiaate Suuntakuvio
Dynaaminen, halvempi yleismikrofoni Kondensaattorimikrofoni, erittäin herkkä Suuntakuvio Pallo, haastattelut Kardioidi (hertta), puhe, tehosteet, akustiikka Kahdeksikko, haastattelut Haulikko, tehosteet (suuntamikrofoni)

57 Ääni – Nauhurit DAT-nauhuri Minidisc Digitaalinen
Käyttää nauhoja, min Ammattilaiskäytössä Minidisc Käyttää magneto-optisia levyjä, 74 min Edullinen Käyttää ATRAC-kompressiota

58 Multimediaohjelmointi
Visual Basic Delphi Macromedia Director Hyperstudio Toolbook Scala Authorware

59 Verkko-ohjelmointi HTML CSS Javascript DHTML XML VBScript VRML SMIL
CGI ASP ActiveX

60 Jakelutekniikat CD-levy DVD-levy Tietoverkot Televerkot
CD, CD-R(W), VCD DVD-levy DVD video, DVD-audio, DVD-R(W), DVD+R(W), DVD-ROM/RAM Tietoverkot Lähiverkot, internet Televerkot Lankapuhelinverkot, matkapuhelinverkot Radio- ja televisioverkot Radiolähetys, Kaapelitelevisio, televisiolähetys ja satelliittilähetys