:::: Multimedian :::: Multimedian tuotanto ::::tuotanto ::::

22

Sisällöntuotannon Sisällöntuotannon määritelmiämääritelmiä Tietosisällön luomista digitaaliseen Tietosisällön luomista digitaaliseen

muotoon. Sisältö voi olla tekstiä, muotoon. Sisältö voi olla tekstiä, kuvia, videota, ääntä ja niiden kuvia, videota, ääntä ja niiden yhdistelmiä. yhdistelmiä.

Tekninen puoli/asiapuoli, Tekninen puoli/asiapuoli, projektimaisuus, mediaelementit, projektimaisuus, mediaelementit, verkko/multimedia, verkko/multimedia, hypertekstuaalisuus, käyttöliittymähypertekstuaalisuus, käyttöliittymä

33

Sisällys, ellei jopa Sisällys, ellei jopa sisältösisältö Sisällöntuotannon merkitysSisällöntuotannon merkitys EsimerkkejäEsimerkkejä Tekninen puoli/sisällöllinen puoliTekninen puoli/sisällöllinen puoli ProjektimaisuusProjektimaisuus ValintojaValintoja Käytettävyys ja käyttöliittymäKäytettävyys ja käyttöliittymä MediaelementitMediaelementit Hyperteksti ja HTMLHyperteksti ja HTML

44

Sisällöntuotannon Sisällöntuotannon merkitys?merkitys? Content is kingContent is king Image is nothing – content is Image is nothing – content is

everythingeverything Sisältöä elämäänSisältöä elämään Content on laiffiiContent on laiffii ””Elokuva oli kyllä ulkoisilta puitteiltaan Elokuva oli kyllä ulkoisilta puitteiltaan

komea, mutta siitä puuttui sisällöllinen anti, komea, mutta siitä puuttui sisällöllinen anti, toisin kuin esim. Truffaut’n Köyhästä toisin kuin esim. Truffaut’n Köyhästä kulkurista. Kerronnallisesti blaa blaa…”kulkurista. Kerronnallisesti blaa blaa…”

55

EsimerkkejäEsimerkkejä

WWW-sivutWWW-sivut Romput Romput PelitPelit LuentokalvotLuentokalvot OpetusmateriaaliOpetusmateriaali

66

Sisällöntuotannon Sisällöntuotannon määrittelymäärittelyää Sisällön tuottaminen eri mediamuotoihinSisällön tuottaminen eri mediamuotoihin

– WWW, Tv, CD-rom, DVD, DigiTv, lehdet…WWW, Tv, CD-rom, DVD, DigiTv, lehdet…

Erotettava :Erotettava : TTekninen sisällöntuotanto,ekninen sisällöntuotanto,

– Esim. sivuston tekninen toteutus Esim. sivuston tekninen toteutus (“arkkitehtuuri”)(“arkkitehtuuri”)

AsiasisällöntuotantoAsiasisällöntuotanto– Varsinainen “tieto”, materiaali. Esim. Varsinainen “tieto”, materiaali. Esim.

oppimateriaalioppimateriaali

77

Tuotantoprosessin Tuotantoprosessin vaiheet ja toimijatvaiheet ja toimijatTyöryhmän roolien määrittely ja tehtävien jako:Työryhmän roolien määrittely ja tehtävien jako: Tuottaja, käsikirjoittaja, graafikko, koodaaja, Tuottaja, käsikirjoittaja, graafikko, koodaaja,

video/ääni -tyyppi...video/ääni -tyyppi... Erotettava tekniset sisällöntuottajat ja Erotettava tekniset sisällöntuottajat ja

asiasisällöntuottajatasiasisällöntuottajat

Suunnittelu:Suunnittelu: Tavoitteiden asetteluTavoitteiden asettelu AsiakäsikirjoitusAsiakäsikirjoitus Budjetti ja aikatauluBudjetti ja aikataulu KäyttöliittymäsuunnitteluKäyttöliittymäsuunnittelu MediavalinnatMediavalinnat ””Kielivalinnat”: vain html / javascript, xml....Kielivalinnat”: vain html / javascript, xml....

88

Tuotantovaihe:Tuotantovaihe:

AsiasisällöntuotantoAsiasisällöntuotanto Graafinen suunnittelu (pohja!), Graafinen suunnittelu (pohja!),

videoiden kuvaus ja editointi,videoiden kuvaus ja editointi, äänisuunnittelu, kuvien digitointi...äänisuunnittelu, kuvien digitointi... Osa tuotannosta voidaan tehdä Osa tuotannosta voidaan tehdä

alihankintanaalihankintana Testaus eri laitteistoilla, Testaus eri laitteistoilla,

käyttöjärjestelmillä ja selainversioillakäyttöjärjestelmillä ja selainversioilla Tekijänoikeudet Tekijänoikeudet huomioitavahuomioitava

99

WWW - WWW - viestintäympäristönäviestintäympäristönäHypermedian tuomaHypermedian tuoma

lisäarvolisäarvo:: Tiedon esitystapa Tiedon esitystapa

kontekstiinkontekstiin sidottusidottu Monimediaisuus (!!)Monimediaisuus (!!) Tuottajan ja Tuottajan ja

vastaanottajanvastaanottajan roolit roolit häilyväthäilyvät

GeneroitavuusGeneroitavuus RakenteisuusRakenteisuus

Verkon tuoma lisäarvoVerkon tuoma lisäarvo:: Vuorovaikutteisuus:Vuorovaikutteisuus:

mahdollisuus myösmahdollisuus myös yhteistoiminnalliseenyhteistoiminnalliseen sisällöntuotantoon.sisällöntuotantoon.

Yhteisöjen Yhteisöjen muodostuminenmuodostuminen

Informaation määrä: Informaation määrä: saatavuus,saatavuus, näkökulmat....näkökulmat....

Dynaamisuus (esim.Dynaamisuus (esim. päivitettävyys)päivitettävyys)

1010

Valintoja 1/2Valintoja 1/2

Mihin mediaan/ medioihin sisältöä tuotetaan?Mihin mediaan/ medioihin sisältöä tuotetaan?– Esim. Webbisivuilta luettavaksi ja tulostettavaksiEsim. Webbisivuilta luettavaksi ja tulostettavaksi– CD-rompulle?CD-rompulle?

Mitä mediaformaatteja käytetään ja miten?Mitä mediaformaatteja käytetään ja miten?– Haetaanko esim. elämyksellisyyttä, halutaanko Haetaanko esim. elämyksellisyyttä, halutaanko

myydä jotain?myydä jotain?– Vaiva/aika/hinta – resurssien mukaanVaiva/aika/hinta – resurssien mukaan– Jatkokehitykseen voi jättää jotainJatkokehitykseen voi jättää jotain

Miten paljon käyttäjälle annetaan vapauksia vs. miten Miten paljon käyttäjälle annetaan vapauksia vs. miten hänen liikkumistaanhänen liikkumistaan ohjaillaan?ohjaillaan?

1111

Valintoja 2/2Valintoja 2/2

Muut mediavalinnatMuut mediavalinnat: Halutaanko lisätä : Halutaanko lisätä kontekstuaalisuutta taikontekstuaalisuutta tai vuorovaikutteistuutta tai vuorovaikutteistuutta tai metaforia esimerkiksi Shockwave -sovelmilla tai Java-metaforia esimerkiksi Shockwave -sovelmilla tai Java-appleteilla?appleteilla?

Miten paljon käytetään olemassa olevaa materiaalia?Miten paljon käytetään olemassa olevaa materiaalia? Kuinka Kuinka staattinen staattinen ympäristöstä tulee? Käytetäänkö ympäristöstä tulee? Käytetäänkö

hyväksi erilaista ihmisen jahyväksi erilaista ihmisen ja koneen tai ihmisten välisiä koneen tai ihmisten välisiä vuorovaikutusmahdollisuuksia?vuorovaikutusmahdollisuuksia?

Tarvitaanko palvelimelta erityisominaisuuksia? Tarvitaanko palvelimelta erityisominaisuuksia? (Streaming, CGI..)(Streaming, CGI..)

Halutaanko luoda Halutaanko luoda operatiivinen verkkopalvelu?operatiivinen verkkopalvelu? Mullan alla Mullan alla vaikovaiko Sopranos? Sopranos? Ti klo 21.00Ti klo 21.00

1212

Otettava huomioon Otettava huomioon kohderyhmäkohderyhmä Kohderyhmän ikä, tekniset taidot, elämäntapa yms... jopa Kohderyhmän ikä, tekniset taidot, elämäntapa yms... jopa

koulutuskoulutus Tiedot / taidot opetettavassa aiheessaTiedot / taidot opetettavassa aiheessa Käytössä oleva laitteistoKäytössä oleva laitteisto

– Näytön koko ja resoluutioNäytön koko ja resoluutio (800*600) (800*600), värien määrä,, värien määrä,– Internet-yhteys (vasteaika mahd. pieneksi)Internet-yhteys (vasteaika mahd. pieneksi)– SelainSelain: : IE, Netscape (Mozilla), Opera, Chimera, IE, Netscape (Mozilla), Opera, Chimera, LynxLynx, …, …– KäyttöjärjestelmäKäyttöjärjestelmä (Windows, Mac OS) (Windows, Mac OS)

Halutaanko sisältöä tulostaa (eri versio tulostettavaksi?)Halutaanko sisältöä tulostaa (eri versio tulostettavaksi?) Mikä on käyttötilanne ja käytettävissä oleva aika?Mikä on käyttötilanne ja käytettävissä oleva aika? Sisältö kannattaa tuottaa n. vuoden vanhalle teknologialleSisältö kannattaa tuottaa n. vuoden vanhalle teknologialle

1313

Käyttöliittymä ja Käyttöliittymä ja ulkoasu 1/2ulkoasu 1/2 Selkeys tärkeintä!Selkeys tärkeintä! Yksinkertainen, helppo. Keskity Yksinkertainen, helppo. Keskity

olennaiseen. olennaiseen. – Vähemmän = enemmän.Vähemmän = enemmän.

Värit suhteellisen neutraaleja ja Värit suhteellisen neutraaleja ja yhtenäisiä. Samoin typografiayhtenäisiä. Samoin typografia

Silti säilytettävä jonkinlainen trendikkyysSilti säilytettävä jonkinlainen trendikkyys Tuttu vs. toimiva....!?Tuttu vs. toimiva....!? Trendikkyys, seksikkyysTrendikkyys, seksikkyys

1414

Käyttöliittymä ja Käyttöliittymä ja ulkoasu 2/2ulkoasu 2/2 Metaforien tulee olla kohderyhmälle tuttujaMetaforien tulee olla kohderyhmälle tuttuja Vältä animaatioita ja suuria värikontrastejaVältä animaatioita ja suuria värikontrasteja CSS -tyyliCSS -tyylitiedostojatiedostoja kannattaa käyttää kannattaa käyttää

WWW-sivuillaWWW-sivuilla– ylläpidettävyys ja muutosten helppousylläpidettävyys ja muutosten helppous

http://www.http://www.useituseit..comcom http://www.http://www.jyujyu..fifi/virtuaaliyliopisto/materiaali//virtuaaliyliopisto/materiaali/

timotimo//usabilityusability//

1515

RakenteisuusRakenteisuus

Lineaarinen:Lineaarinen:

Pyramiidi/puu:Pyramiidi/puu:

1616

RakenteisuusRakenteisuus

Rakenne tulee havainnollistaa Rakenne tulee havainnollistaa valikoilla,valikoilla, sivukartalla jne.sivukartalla jne.– Esim. joka sivulla päävalikko Esim. joka sivulla päävalikko

samassa paikassasamassa paikassa– Esim. Sivupolku näkyvissäEsim. Sivupolku näkyvissä

1717

MediaformaatitMediaformaatit

TEKSTITEKSTI KUVAKUVA ANIMAATIOTANIMAATIOT VIDEOTVIDEOT ÄÄNI / MUSIIKKIÄÄNI / MUSIIKKI

1818

Teksti verkossaTeksti verkossa 1/2 1/2

Teksti ja kirjoittaminen:Teksti ja kirjoittaminen: Selkeys, lyhyet kappaleet; sanomalehtimäinen layoutSelkeys, lyhyet kappaleet; sanomalehtimäinen layout Ei liian pitkiä tekstijonoja!Ei liian pitkiä tekstijonoja! Käytä tekstiin puolet sanamäärästä, jonka olisit Käytä tekstiin puolet sanamäärästä, jonka olisit

käyttänyt paperillakäyttänyt paperilla Tekstiä on kyettävä ”silmäilemään” (Myös: Tekstiä on kyettävä ”silmäilemään” (Myös:

fonttikoko!!)fonttikoko!!) Hyperteksti luo aivan uusia mahdollisuuksia jakaa Hyperteksti luo aivan uusia mahdollisuuksia jakaa

pitkää tekstiäpitkää tekstiä Rakenteisuuden mahdollisuudet kannattaa huomioidaRakenteisuuden mahdollisuudet kannattaa huomioida

– tekninen näkökulma, käytettävyystekninen näkökulma, käytettävyys

1919

Teksti verkossaTeksti verkossa 2/2 2/2

Teksti ja kirjoittaminen:Teksti ja kirjoittaminen: Pitkät tekstit voidaan tuottaa myös pdf-tiedostoiksiPitkät tekstit voidaan tuottaa myös pdf-tiedostoiksi Erilaiset Erilaiset tyylit tyylit eri elementeille, kuitenkin eri elementeille, kuitenkin

yhtenäisyys tulee säilyä!yhtenäisyys tulee säilyä! Käytä Käytä otsikkotasojaotsikkotasoja Käytä listojaKäytä listoja (pallolistoja ja numeroituja) (pallolistoja ja numeroituja) Korkeintaan kaksi fonttia!Korkeintaan kaksi fonttia! Esimerkkejä:Esimerkkejä:

– http://www.helsinginsanomat.fi/http://www.helsinginsanomat.fi/– http://kirjasto.http://kirjasto.jyujyu..fifi//– http://www.iltasanomat.http://www.iltasanomat.fifi

2020

HypertekstiHyperteksti

Hypertekstit muodostuvat toisiinsa viittaavista Hypertekstit muodostuvat toisiinsa viittaavista teksteistä,teksteistä, joita tuotetaan ja käytetään joita tuotetaan ja käytetään tietokoneohjelman avulla.tietokoneohjelman avulla.

Käyttäjä voi itse valita mitä tietoa hän Käyttäjä voi itse valita mitä tietoa hän tarvitsee, missätarvitsee, missä tahdissa etenee jne. (Asettaa tahdissa etenee jne. (Asettaa käyttäjälle vaatimuksia!!)käyttäjälle vaatimuksia!!)

Hypertekstin rakenne helpottaa lukemista: Hypertekstin rakenne helpottaa lukemista: yhdellä sivullayhdellä sivulla vain tietty informaatio, josta vain tietty informaatio, josta siirrytään linkeilläsiirrytään linkeillä seuraavalle sivulle.seuraavalle sivulle.

WWW on yksi esimerkki WWW on yksi esimerkki hypertekstijärjestelmästä.hypertekstijärjestelmästä.

Hypermedia = Multimedia + hypertekstiHypermedia = Multimedia + hyperteksti

2121

Kuva 1/2Kuva 1/2

Digitointi (digikamera tai skanneri)Digitointi (digikamera tai skanneri) Kuvakoot (pakkaus, värit)Kuvakoot (pakkaus, värit)

– Kuvatiedoston koko mahdollisimman pieneksi!Kuvatiedoston koko mahdollisimman pieneksi!– Fyysinen koko vs. tiedostokoko, esim. kuva Fyysinen koko vs. tiedostokoko, esim. kuva

100*200px (pikseliä) ja 5 kB (kilotavua)100*200px (pikseliä) ja 5 kB (kilotavua) Bittikartta- vs vektorigrafiikkaBittikartta- vs vektorigrafiikka

– Bittikartta yleisempiBittikartta yleisempi– Vektorikuva skaalautuvat (esim. Flash)Vektorikuva skaalautuvat (esim. Flash)

Kuvaformaatti: .jpg vs. .gif (max 256 väriä) (.png)Kuvaformaatti: .jpg vs. .gif (max 256 väriä) (.png) Websafe-värit (216) samoja macillä ja windowsillaWebsafe-värit (216) samoja macillä ja windowsilla

2222

Kuva 2/2Kuva 2/2

Kuvien viestinnällinen ja opetuksellinen Kuvien viestinnällinen ja opetuksellinen merkitysmerkitys

Soveltuvuus ulkoasuunSoveltuvuus ulkoasuun Käytä kuvia ensisijaisesti sisällön yhteydessä Käytä kuvia ensisijaisesti sisällön yhteydessä

(toissijaisesti käyttöliittymän elementteinä)(toissijaisesti käyttöliittymän elementteinä) Kuvia kannattaa käyttää säästellen tekstin Kuvia kannattaa käyttää säästellen tekstin

joukossa. Niitä kannattaa kylläkinjoukossa. Niitä kannattaa kylläkin linkittää linkittää tekstinä tai pikkukuvina (thumbnail)tekstinä tai pikkukuvina (thumbnail)

Kuvan rajaus tärkeääKuvan rajaus tärkeää

2323

Ääni Ääni (Netissä kukaan ei kuule huutoasi)(Netissä kukaan ei kuule huutoasi)

DigiääniDigiääni– Streaming- (suoratoisto) tai tallennettava Streaming- (suoratoisto) tai tallennettava

formaattiformaatti– Aina aliarvioitu! (tai käytetty turhaan)Aina aliarvioitu! (tai käytetty turhaan)– Äänen merkitys käyttöliittymässä Äänen merkitys käyttöliittymässä

huomioitavahuomioitava– Eri pakkausformaatitEri pakkausformaatit (.mp3, .wav) (.mp3, .wav)

2424

Video Video (jokaisessa meissä asuu pieni Lars von Trier)(jokaisessa meissä asuu pieni Lars von Trier)

DigivideoDigivideo– Streaming- (suoratoisto) tai tallennettava formaattiStreaming- (suoratoisto) tai tallennettava formaatti– Videon tuottaminen yhä helpompaa ja Videon tuottaminen yhä helpompaa ja

edullisempaaedullisempaa– Huomioitava käytetäänkö verkon yli, ladataanko Huomioitava käytetäänkö verkon yli, ladataanko

intranetistä vaiintranetistä vai– KäKäytetäänkö esim. cd/dvd-mediasytetäänkö esim. cd/dvd-mediasssaa– Tulevaisuudessa Tulevaisuudessa DVDDVD yleistyy yleistyy– Videoeditointiohjelmia: Adobe Premiere, Vegas Videoeditointiohjelmia: Adobe Premiere, Vegas

Video, Video Factory, Windows Movie MakerVideo, Video Factory, Windows Movie Maker– Esim. Esim.

http://wings.peda.net:8080/jy_moniviestin/sisalto/mhttp://wings.peda.net:8080/jy_moniviestin/sisalto/movie/ovie/

2525

HTML= HyperText HTML= HyperText Markup LanguageMarkup Language HTML= HyperText Markup Language;HTML= HyperText Markup Language;

kuvauskielikuvauskieli HTML sisältää tiettyjä käskyjä eli tageja, HTML sisältää tiettyjä käskyjä eli tageja,

joidenjoiden avulla määritellään mm. sivun avulla määritellään mm. sivun layoutia, luodaanlayoutia, luodaan linkkejä, näytetään linkkejä, näytetään kuvia etc.kuvia etc.

Esim. linkki yliopiston sivuille näyttäisi Esim. linkki yliopiston sivuille näyttäisi tältä:tältä: <a href=”http://www.jyu.fi/”> <a href=”http://www.jyu.fi/”> Jyväskylän yliopisto</A>Jyväskylän yliopisto</A>

ja tulos olisi tämä ja tulos olisi tämä Jyväskylän yliopistoJyväskylän yliopisto

2626

HTML:N PERUSTEETHTML:N PERUSTEET

Luodaan htmlLuodaan html--tiedosto tai tiedosto tai --tiedostoja jotka siirretääntiedostoja jotka siirretään kkotihakemistoon palvelimella. Myös sivuilla olevat kuvatotihakemistoon palvelimella. Myös sivuilla olevat kuvat ja äänet tulee siirtää sinne.ja äänet tulee siirtää sinne.

Tiedosto voidaan luoda Tiedosto voidaan luoda esim. esim. tekstieditorilla tai tekstieditorilla tai erityisesti erityisesti WWWWWW--sivujen tekoon tarkoitetulla ohjelmalla:sivujen tekoon tarkoitetulla ohjelmalla:– Microsoft FrontMicrosoft Frontppageage– Adobe GoliveAdobe Golive– Macromedia DreamMacromedia Dreamwweavereaver– Netscape ComposerNetscape Composer

Huom! WWW_-editorit nykyisin aivan mainioita, HTML-Huom! WWW_-editorit nykyisin aivan mainioita, HTML-osaamista ei juurikaan tarvita perussivujen tekemiseen!osaamista ei juurikaan tarvita perussivujen tekemiseen!

2727

Jatkuu ensi kerralla…Jatkuu ensi kerralla…

WWW-sivuston tuotantoprojekti + WWW-sivuston tuotantoprojekti + esimerkkiesimerkki

Käytettävyys ja käyttöliittymä: Käytettävyys ja käyttöliittymä: pintaa syvemmältäpintaa syvemmältä

DemonstraatioitaDemonstraatioita