:::: Multimedian tuotanto ::::

1. :::: Multimedian tuotanto ::::

2. Sisällöntuotannon määritelmiä • Tietosisällön luomista digitaaliseen muotoon. Sisältö voi olla tekstiä, kuvia, videota, ääntä ja niiden yhdistelmiä. • Tekninen puoli/asiapuoli, projektimaisuus, mediaelementit, verkko/multimedia, hypertekstuaalisuus, käyttöliittymä

3. Sisällys, ellei jopa sisältö • Sisällöntuotannon merkitys • Esimerkkejä • Tekninen puoli/sisällöllinen puoli • Projektimaisuus • Valintoja • Käytettävyys ja käyttöliittymä • Mediaelementit • Hyperteksti ja HTML

4. Sisällöntuotannon merkitys? • Content is king • Image is nothing – content is everything • Sisältöä elämään • Content on laiffii • ”Elokuva oli kyllä ulkoisilta puitteiltaan komea, mutta siitä puuttui sisällöllinen anti, toisin kuin esim. Truffaut’n Köyhästä kulkurista. Kerronnallisesti blaa blaa…”

5. Esimerkkejä • WWW-sivut • Romput • Pelit • Luentokalvot • Opetusmateriaali

6. Sisällöntuotannon määrittelyä • Sisällön tuottaminen eri mediamuotoihin • WWW, Tv, CD-rom, DVD, DigiTv, lehdet… Erotettava : • Tekninen sisällöntuotanto, • Esim. sivuston tekninen toteutus (“arkkitehtuuri”) • Asiasisällöntuotanto • Varsinainen “tieto”, materiaali. Esim. oppimateriaali

7. Tuotantoprosessin vaiheet ja toimijat Työryhmän roolien määrittely ja tehtävien jako: • Tuottaja, käsikirjoittaja, graafikko, koodaaja, video/ääni -tyyppi... • Erotettava tekniset sisällöntuottajat ja asiasisällöntuottajat Suunnittelu: • Tavoitteiden asettelu • Asiakäsikirjoitus • Budjetti ja aikataulu • Käyttöliittymäsuunnittelu • Mediavalinnat • ”Kielivalinnat”: vain html / javascript, xml....

8. Tuotantovaihe: • Asiasisällöntuotanto • Graafinen suunnittelu (pohja!), videoiden kuvaus ja editointi, • äänisuunnittelu, kuvien digitointi... • Osa tuotannosta voidaan tehdä alihankintana • Testaus eri laitteistoilla, käyttöjärjestelmillä ja selainversioilla • Tekijänoikeudet huomioitava

9. Hypermedian tuomalisäarvo: Tiedon esitystapa kontekstiinsidottu Monimediaisuus (!!) Tuottajan ja vastaanottajanroolit häilyvät Generoitavuus Rakenteisuus Verkon tuoma lisäarvo: Vuorovaikutteisuus:mahdollisuus myösyhteistoiminnalliseensisällöntuotantoon. Yhteisöjen muodostuminen Informaation määrä: saatavuus,näkökulmat.... Dynaamisuus (esim.päivitettävyys) WWW - viestintäympäristönä

10. Valintoja 1/2 • Mihin mediaan/ medioihin sisältöä tuotetaan? • Esim. Webbisivuilta luettavaksi ja tulostettavaksi • CD-rompulle? • Mitä mediaformaatteja käytetään ja miten? • Haetaanko esim. elämyksellisyyttä, halutaanko myydä jotain? • Vaiva/aika/hinta – resurssien mukaan • Jatkokehitykseen voi jättää jotain • Miten paljon käyttäjälle annetaan vapauksia vs. miten hänen liikkumistaanohjaillaan?

11. Valintoja 2/2 • Muut mediavalinnat: Halutaanko lisätä kontekstuaalisuutta taivuorovaikutteistuutta tai metaforia esimerkiksi Shockwave -sovelmilla tai Java-appleteilla? • Miten paljon käytetään olemassa olevaa materiaalia? • Kuinka staattinen ympäristöstä tulee? Käytetäänkö hyväksi erilaista ihmisen jakoneen tai ihmisten välisiä vuorovaikutusmahdollisuuksia? • Tarvitaanko palvelimelta erityisominaisuuksia? (Streaming, CGI..) • Halutaanko luoda operatiivinen verkkopalvelu? • Mullan alla vaiko Sopranos? Ti klo 21.00

12. Otettava huomioon kohderyhmä • Kohderyhmän ikä, tekniset taidot, elämäntapa yms... jopa koulutus • Tiedot / taidot opetettavassa aiheessa • Käytössä oleva laitteisto • Näytön koko ja resoluutio (800*600), värien määrä, • Internet-yhteys (vasteaika mahd. pieneksi) • Selain: IE, Netscape (Mozilla), Opera, Chimera, Lynx, … • Käyttöjärjestelmä (Windows, Mac OS) • Halutaanko sisältöä tulostaa (eri versio tulostettavaksi?) • Mikä on käyttötilanne ja käytettävissä oleva aika? • Sisältö kannattaa tuottaa n. vuoden vanhalle teknologialle

13. Käyttöliittymä ja ulkoasu 1/2 • Selkeys tärkeintä! • Yksinkertainen, helppo. Keskity olennaiseen. • Vähemmän = enemmän. • Värit suhteellisen neutraaleja ja yhtenäisiä. Samoin typografia • Silti säilytettävä jonkinlainen trendikkyys • Tuttu vs. toimiva....!? • Trendikkyys, seksikkyys

14. Käyttöliittymä ja ulkoasu 2/2 • Metaforien tulee olla kohderyhmälle tuttuja • Vältä animaatioita ja suuria värikontrasteja • CSS -tyylitiedostoja kannattaa käyttää WWW-sivuilla • ylläpidettävyys ja muutosten helppous • http://www.useit.com • http://www.jyu.fi/virtuaaliyliopisto/materiaali/timo/usability/

15. Rakenteisuus • Lineaarinen: • Pyramiidi/puu:

16. Rakenteisuus • Rakenne tulee havainnollistaa valikoilla,sivukartalla jne. • Esim. joka sivulla päävalikko samassa paikassa • Esim. Sivupolku näkyvissä

17. Mediaformaatit • TEKSTI • KUVA • ANIMAATIOT • VIDEOT • ÄÄNI / MUSIIKKI

18. Teksti verkossa 1/2 • Teksti ja kirjoittaminen: • Selkeys, lyhyet kappaleet; sanomalehtimäinen layout • Ei liian pitkiä tekstijonoja! • Käytä tekstiin puolet sanamäärästä, jonka olisit käyttänyt paperilla • Tekstiä on kyettävä ”silmäilemään” (Myös: fonttikoko!!) • Hyperteksti luo aivan uusia mahdollisuuksia jakaa pitkää tekstiä • Rakenteisuuden mahdollisuudet kannattaa huomioida • tekninen näkökulma, käytettävyys

19. Teksti verkossa 2/2 • Teksti ja kirjoittaminen: • Pitkät tekstit voidaan tuottaa myös pdf-tiedostoiksi • Erilaiset tyylit eri elementeille, kuitenkin yhtenäisyys tulee säilyä! • Käytä otsikkotasoja • Käytä listoja (pallolistoja ja numeroituja) • Korkeintaan kaksi fonttia! • Esimerkkejä: • http://www.helsinginsanomat.fi/ • http://kirjasto.jyu.fi/ • http://www.iltasanomat.fi

20. Hyperteksti • Hypertekstit muodostuvat toisiinsa viittaavista teksteistä,joita tuotetaan ja käytetään tietokoneohjelman avulla. • Käyttäjä voi itse valita mitä tietoa hän tarvitsee, missätahdissa etenee jne. (Asettaa käyttäjälle vaatimuksia!!) • Hypertekstin rakenne helpottaa lukemista: yhdellä sivullavain tietty informaatio, josta siirrytään linkeilläseuraavalle sivulle. • WWW on yksi esimerkki hypertekstijärjestelmästä. • Hypermedia = Multimedia + hyperteksti

21. Kuva 1/2 • Digitointi (digikamera tai skanneri) • Kuvakoot (pakkaus, värit) • Kuvatiedoston koko mahdollisimman pieneksi! • Fyysinen koko vs. tiedostokoko, esim. kuva 100*200px (pikseliä) ja 5 kB (kilotavua) • Bittikartta- vs vektorigrafiikka • Bittikartta yleisempi • Vektorikuva skaalautuvat (esim. Flash) • Kuvaformaatti: .jpg vs. .gif (max 256 väriä) (.png) • Websafe-värit (216) samoja macillä ja windowsilla

22. Kuva 2/2 • Kuvien viestinnällinen ja opetuksellinen merkitys • Soveltuvuus ulkoasuun • Käytä kuvia ensisijaisesti sisällön yhteydessä (toissijaisesti käyttöliittymän elementteinä) • Kuvia kannattaa käyttää säästellen tekstin joukossa. Niitä kannattaa kylläkinlinkittää tekstinä tai pikkukuvina (thumbnail) • Kuvan rajaus tärkeää

23. Ääni (Netissä kukaan ei kuule huutoasi) • Digiääni • Streaming- (suoratoisto) tai tallennettava formaatti • Aina aliarvioitu! (tai käytetty turhaan) • Äänen merkitys käyttöliittymässä huomioitava • Eri pakkausformaatit (.mp3, .wav)

24. Video (jokaisessa meissä asuu pieni Lars von Trier) • Digivideo • Streaming- (suoratoisto) tai tallennettava formaatti • Videon tuottaminen yhä helpompaa ja edullisempaa • Huomioitava käytetäänkö verkon yli, ladataanko intranetistä vai • Käytetäänkö esim. cd/dvd-mediassa • Tulevaisuudessa DVD yleistyy • Videoeditointiohjelmia: Adobe Premiere, Vegas Video, Video Factory, Windows Movie Maker • Esim. http://wings.peda.net:8080/jy_moniviestin/sisalto/movie/

25. HTML= HyperText Markup Language • HTML= HyperText Markup Language;kuvauskieli • HTML sisältää tiettyjä käskyjä eli tageja, joidenavulla määritellään mm. sivun layoutia, luodaanlinkkejä, näytetään kuvia etc. • Esim. linkki yliopiston sivuille näyttäisi tältä:<a href=”http://www.jyu.fi/”> Jyväskylän yliopisto</A> ja tulos olisi tämä Jyväskylän yliopisto

26. HTML:N PERUSTEET • Luodaan html-tiedosto tai -tiedostoja jotka siirretään kotihakemistoon palvelimella. Myös sivuilla olevat kuvatja äänet tulee siirtää sinne. • Tiedosto voidaan luoda esim. tekstieditorilla tai erityisesti WWW-sivujen tekoon tarkoitetulla ohjelmalla: • Microsoft Frontpage • Adobe Golive • Macromedia Dreamweaver • Netscape Composer • Huom! WWW_-editorit nykyisin aivan mainioita, HTML-osaamista ei juurikaan tarvita perussivujen tekemiseen!

27. Jatkuu ensi kerralla… • WWW-sivuston tuotantoprojekti + esimerkki • Käytettävyys ja käyttöliittymä: pintaa syvemmältä • Demonstraatioita