010830000 Monimedian työkurssi Multimedian teknologiat

1. 010830000Monimedian työkurssiMultimedian teknologiat Ilmari Laakkonen Huone 6535, päivystys pe 16-17 ilmari.laakkonen@lut.fi

2. Digitaalinen media • Peruselementit: • 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 • 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 • 1234567890 Liirum Laarum Lorum. • 1234567890 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ä 14-24 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 • 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ä = 10000 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, 70-100dpi (dots per inch) • bittikarttakuvan tarkkuus sama kuin näytössä • Laser- ja mustetulostimet, 300dpi • bittikarttakuvan tarkkuus 100ppi (pixels per inch) • Sanomalehdet, 600dpi • bittikarttakuvan tarkkuus 150-200ppi • Esitteet ja aikakausilehdet, 1200dpi • bittikarttakuvan tarkkuus 200-266ppi • Taidepainotyöt vielä suuremmat resoluutiot • bittikarttakuvan tarkkuus yli 300ppi

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

25. Tiedostomuodot • Bittikarttakuvat • 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 • 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 • 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.