Post on 22-Jan-2016
description
:::: 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