Multimedia

Module 2008/2009Periode 2

6 bijeenkomsten: week: 1 2 3 4 5 6

College 1: Projectgroepen en Brainstorm De opdracht Organisatie: projectgroepen: 1 webdesigner, 1 mediaspecialist en 1

projectleider: werk met je comakergroep Wat betekent dat: multimedia? Brainstorm: Het verzinnen van een concept en het uitwerken daarvan

College 2: Scripting storyboard en functioneel ontwerp/ screenshots Voorbeelden van Multimedia producten Inleveren en presenteren resultaten Brainstorm: maximaal 2 producten

College 3: De Techniek Open source voor webapplicaties: Joomla/drupal

Vervolg 6 bijeenkomsten College 4: Techniek

Authorware/Flash Inleveren en presenteren script film en website in de

lucht: deel van het cijfer! De website moet het resultaat van de brainstorm (product) en het storyboard van je film bevatten.

College 5: Usability Aan welke richtlijnen moet een website/applicatie

voldoen? Inleveren en presenteren prototype applicatie

promotie-CD: deel van het cijfer! De applicatie moet het resultaat van de brainstorm (product) en het storyboard van je film bevatten.

Bijeenkomst 6: De verschillende ondernemingen worden aan elkaar

gepresenteerd Multimediale presentaties

De opdracht

Verzin een innovatief product: Verzin een innovatief product of een innovatieve dienst: wat is over 10 jaar mogelijk? http://weblogs.vpro.nl/indebanvanhetding/?cat=281

Maak een website of een promotie-CD waar je je product en je onderneming presenteert met een open source content management systeem

Op de website/CD een filmpje waarop (1 van) de projectleden en het product te zien zijn

Begin vandaag!

Filmpje

Personal Recognizer http://www.sat-gps-locate.com/

english/index.html

Projectgroep

1 webdesigner/programmeur 1 mediaontwerper 1 projectleider

Vorming projectgroepen: werk met je comakergroep en ga als zodanig bij elkaar zitten!

Colleges verplicht

Onderzoek

Wat betekent het begrip “Multimedia”? bepaal een definitie Een groep pratende mensen? Een film? Een flipperkast? Een flipperkast op de computer?

Mogelijke definitie

Definitie: Multimedia is de geïntegreerde tekst, geluid, diverse beelden (stills / movie) én besturingssoftware binnen een digitale omgeving (Tony Feldman). Interactie met de gebruiker geeft een multimediaproduct toegevoegde waarde

Brainstormen

Hoe verzin ik een concept?

BrainstormenFase 1: divergerende activiteit

(intuïtie, visueel denken en fantasie )

Fase 2: convergerende activiteit

(logisch denken, praktisch inzicht en commercieel vernuft )

(Alex Osborn)

Brainstormen1) Voorbereiding (probleemstelling)

2) Idee divergentie3) Idee convergentie4) Actieplan

(Alex Osborn)Nb: over het algemeen worden de fasen voorafgegaan dooreen briefing / probleemstelling: waarin doel en doelgroep gedefineerd worden!!

Vuistregels tijdens het brainstormen 

- Brainstorming vraagt duidelijke leiding: kies een voorzitter.

- Noteer alle ideeën wat in je opkomt op een groot vel papier

- Ga géén kritiek leveren tijdens het brainstormen: Ieder idee is van gelijke waarde.

- Laat je in de brainstormfase niet beperken tot de grenzen van de techniek en gebruik fantasie!

- Kwantiteit is belangrijker dan kwaliteit: Hoe meer ideeën hoe beter – schifting in latere fase.

- Borduur voort op goede ideeën van anderen: gebruik ander mans ideeën ter inspiratie voor je eigen produkt.

De do’s van het brainstormen

 - Maak tijdens het brainstormen géén onderscheid tussen goede en slechte ideeën. - Openheid binnen de groep: durf te spreken en geneer je niet.

- Extra aandacht voor naïeve, absurde en ongewone ideeën

- Zorg voor een ontspannen sfeer & een inspirerende omgeving

- Schift ideeën ná een pauze

De dont’s van het brainstormen 

-Gebrek aan vertrouwen – angst voor kritiek (staat het genereren van ideeën in de weg) - Kritiek, defensieve houding concurrentie

- Onderbrekingen, vragen – uitleg & toelichting (breekt het ritme)

- Fantasie is goed, maar pas op voor dwaasheden! Blijf taakgericht te werk gaan

- Laat je in de brainstormfase niet beperken tot de grenzen van de techniek en gebruik fantasie!

Competenties waar aan gewerkt wordt

Competenties 1.6 Creatieve aanpak 1.7 Projectmatige aanpak 1.8 Integratie van informatie en

communicatie technologie 1.12 Presentatie en overdracht

Multimediasite

Presenteer de resultaten van de brainstorm en het storyboard op de multimediasite.

Scripting

Hoe structureer ik mijn product?

Waarom is een film goed?

Nogmaals: HDsprayTV

Waarom is dit filmpje goed? Sterk:

Tegenstelling oud nieuw Tegenstelling in de muziek Tegenstelling in het ritme Speciale effecten Suspense Bijv. ook: leedvermaak!

Literaire technieken

Flash back & flash forward

Flashback

verklaart een situatie in het heden soms in zwart-wit (verleden) soms in de vorm van gedachten

Flashforward

detective: verhaal begint met moord terug in de tijd (allerlei vragen

worden beantwoord: wat is het motief, wie is de moordenaar, moordwapen etc.

Storyboard Storyboard

Beschrijving (ook in termen van beelden) of tekening

Tijd (min. 1 minuut max.2 minuten) Voorbeeld Storyboard Film

Elementen Filmscript

Situatie: wat gebeurt er? Beschrijving beeld Beschrijving geluid Tijdsduur

Scenes, shots, ritme

Denk eerst na over je verhaal Bepaal het aantal scenes Bepaal het aantal shots Shots > scenes !!

Ritme erg belangrijk!

FilmscriptFilmtitel – Schermtitel/-nummer # Beeld Geluid

Voorbeeld Storyboard

programma voor storyboard

http://www.atomiclearning.com/atomiccurriculum

Voorbeeld Multimediale docent

Voorbeeld 1: effecten en herkenning

Voorbeeld 2: ritme

Voorbeeld 3: Humor

Groenbrothers

Enkele basisregels en adobe online

http://movies.atomiclearning.com/k12/freeexamples.shtml

http://www.youtube.com/ytremixer

Sitemap/programmastructuur

Sitemap/programmastructuur Welke tekst en plaatjes? Elementen multimedia met mogelijkheden Andere Interactiemogelijkheden Navigatie

Voorbeeld Usability(Peter Kassenaar)

SchermscriptSchermtitel/-nummer

Deel Niveau

Tekst

Schermbeeld

Opties

Afbeeldingen

Geluid

Overige elementen

Techniek

Open source

Interactieve websites:PHP en MySQL

CMS

Open Source Matters!

Alle behandelde software is Open Source.

Ga respectvol om met wat een ander ontwikkeld heeft!

Gebruik van PHP

Communicatie client en server (1)

Communicatie client en server (2)

PHP voert opdrachten uit

Hoe ziet dat er in de praktijk uit?

eindoefening_h8_1a.php: eindoefening_h8_1b.php:

Contact met MySQL!

MySQL:

PHP op je eigen computer

Noodzakelijk: PHP MySQL/SQlite(PHP5) Apache of IIS

Snelle oplossingen: WAMP of JSAS

Welke systemen zijn er?

http://www.opensourcecms.com/

Evaluatie van een CMS

Usability Verplaats je in je opdrachtgever: doe een uitgebreide

usablitytest HTML area is zeer belangrijk! Vaak slecht! Is HTML-kennis vereist? Is CSS-kennis vereist? Uploaden van media

Beschikbaarheid templates (Lay-Out vaak belangrijk voor opdrachtgever) en de flexibiliteit ervan

Extra componenten en modulen Gaat het om een grote community? vaak een

kwestie van leeftijd CMS Installatie/bugs in het algemeen

Twee belangrijke systemen:

Drupal

Joomla

Joomla:

Joomla

Korte demonstratie

Aanmaken nieuwe items Statische content Dynamische content

Componenten Wrapper Loginmodule

Frontend en backend Zelf maken templates

Literatuur

Peter Kassenaar PHP (4.2 en 5) Usability Website

Het complete Handboek Tim Converse en Joyce Park PHP5 en MySQL Website

Administrator

Hoe maak ik een site met Joomla?

Downloaden van www.joomla.org Lokaal uitpakken op je computer Mappen en bestanden uploaden naar de

server met een FTP-programma (FileZilla bijv.)

Installeren op de server

Demonstratie: lokaal

Joomla structuur:

Templates:

Relevante websites

Joomla www.joomla.org Jsas

Server: http://oege.hva.nl

http://www.opensourcecms.com

Opdracht

Richt een Joomlasite in Plaats je resultaten van de brainstorm

en het storyboard op deze site Zet een link naar de site op de

multimediasite

Techniek

Authorware en Flash (nu:Adobe)

Vragen

Hoe ziet een 1 bits plaatje eruit? Voorbeeld? Hoe ziet een 2,3 en 4 bits plaatje eruit? Voorbeeld? Beschrijf het verschil tussen analoge klok en een

digitale klok. Welke is preciezer? Beschrijf hoe snel de internettoegang de

afgelopen 15 jaar gegroeid is. Beschrijf wat de HTTP en HTML is en wat

ze betekenen voor internet. Beschrijf wat MIME types zijn en waar voor

ze dienen.

Welke techniek voor PromoCD?

Functionality based Timeline based

Authorware

Basisbegrippen Authorware:

Flowline Icons Ants (mieren)

Flowline

Flowline

= de structuur van je programma Drag and drop principe “Ants” om de “flow” te controleren:

moeilijker dan je denkt

Icons

Belangrijke Icons

Display Icon Interaction Icon Map Icon Decision Icon Wait Icon Motion Icon Sound Icon Movie Icon

Voorbeeld

Promotie CD IIE

Opdracht

Als jullie willen mogen jullie i.p.v. een website een promotieCD maken.

Plaatjes+Video

bestandsformaten

Bits en bytes

Bit: 0 of 1 Byte: combinatie van 8 bits

1 bit 2 mogelijkheden 2 bits 4 mogelijkheden:

00, 01, 10 of 11 3 bits 8 mogelijkheden etc……..

Interpretatie van bits

01100001 kan zijn Een getal Een letter (a in ASCII) Een kleur De amplitude van een geluid

Van analoog naar digitaal:Sampling en Quantization

Software

Vervolgens moet er Software en hardware aanwezig zijn om de bits in bytes te vertalen naar letters, kleuren, bewegende beelden en geluid

Streaming

Welke bestanden gaan we gebruiken?

Belangrijk om een overwogen keuze te maken voor een bepaald bestand

Dit geldt voor: Plaatjes Video Geluid Tekst

Onderzoek:

Hoe wordt tijd gedigitaliseerd? Beargumenteer wat preciezer is: een analoge weergave van de tijd of een digitale.

Beschrijf de geschiedenis en de huidige stand van zaken rond de ascii-tekentabel.

Beschrijf het verschil tussen bitmapped graphics en vector graphics

Hoeveel frames per seconde is voor het menselijk oog acceptabel? Geef een aantal voorbeelden met echte filmpjes.

Video Geef vervolgens een rekenvoorbeeld van een 8 bits video

(800*600) hoeveel bits per seconde heb je dan nodig? Hoe kun je digitale video comprimeren? Minimaal 3

methoden.

Presentaties

45 minuten voor onderzoek 45 minuten voor presentaties Ongeveer 5 minuten per presentatie

Bondig Essentiële informatie

Laatste college

Volgende week presentatie ruwe producten!!!! Ongeveer 10 minuten per presentatie

Eindproduct uiterlijk 31 maart 2008 om 12 uur de URL op de multimediasite en laat de site de maand daarna online staan http://elearning.iie.nu/multimedia

Zorg dat je product aan alle voorwaarden voldoet (CMS, filmpje, flash animatie en usability-eisen)

Beoordeling uiterlijk 11 april Contactgegevens!!!!! Flash Evaluatie + usability

De site / promo-CD

Prijs het product aan Vertel iets over de werking Filmpje Animatie Contactgegevens

Maak e.e.a. visueel aantrekkelijk!

Videobewerking

Final Cut pro I-movie Flash

DV-formaat Medialab op de 2de verdieping

Flash

Wat is Flash?

Veelvuldig gebruikt voor websites: design, animaties maar bijvoorbeeld ook spelletjes en inmiddels vaak dynamische websites en film

Ongeveer 10 jaar oud gebruik zeer snel toegenomen

Eerst Macromedia, onlangs overgenomen door Adobe

Gebaseerd op film (movie)

Hoe werkt Flash?

Plaatjes op de computer:

Bitmap graphics Vector graphics

Bitmap graphics

Matrix waarin iedere pixel apart staat gedefineerd.

Bij resize: de groote van het bestand wordt groter/kleiner.

Bijvoorbeeld: BMP, JPG

Bitmap graphics

Bitmap graphicsOnder de motorkap

000001000001000001000001000001000001100001100001011110

.....X

.....X

.....X

.....X

.....X

.....XX....XX....X.XXXX.

Vector graphics

Plaatje wordt gereproduceerd aan de hand van ‘instructies’. Wordt dus niet pixel voor pixel opgeslagen.

Bij resize: de grootte van het bestand blijft hetzelfde.

Makkelijk naar bitmap om te zetten maar niet andersom.

Bijvoorbeeld: SVG, SWF, Apple

Vector graphics

Vector graphicsOnder de motorkap

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"><!ENTITY ns_svg "http://www.w3.org/2000/svg"><!ENTITY ns_xlink "http://www.w3.org/1999/xlink">

]><svg version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

width="388" height="388" viewBox="-0.7 -0.7 388 388" enable-background="new -0.7 -0.7 388 388" xml:space="preserve"><defs></defs><circle fill="#DF0023" stroke="#DF0023" cx="193.3" cy="193.3" r="192.8"/></svg>

Flash werkt op basis van vectoren

Formaat klein Zeer geschikt voor animaties Zeer geschikt voor websites door het

snelle, kleine formaat Inmiddels ook veel toepassingen op

het gebied van video (Youtube)

Voorbeelden

Coördinaten Klok Kleurenkiezer Tekenen Viraal

Werken met Flash

Zeer goede tutorial Je kan het jezelf dus leren! Je zult zelf door de zure appel heen

moeten!

Opdracht

Maak zelf een flashfilmpje

Maak een cartoonachtige tekening Importeer een plaatje Maak gebruik van een Motion Tween Schrijf het filmpje weg als SWF en HTML Gebruik het voor je website of je

promotieCD

Introductie/demonstratie

Een paar belangrijke begrippen: Timeline Movie Stage Scene Frame/Keyframe Layer Symbol Motion Tween

Interactiviteit d.m.v. actionscript Dynamische sites in combinatie met XML of PHP

en MySQL

Evaluatie

Wat vinden jullie van de inhoud? Brainstorm Storyboard Techniek Theorie over media Iets gemist?

Wat vinden jullie van de vorm? Minder zelf doen of juist meer De opdracht

Usability

gebruikersoriëntatie

Usability: richtlijnen Navigatie: plaats een standaard primaire navigatiestructuur

op elke pagina. Plaats op elke pagina consistent dezelfde primaire

navigatiestructuur. Bied de bezoeker overal een weg terug naar de homepage

met de tekstlink 'Home'. Zorg er ook voor dat het logo een hyperlink is, die leidt naar de homepage.

Snelheid: toon uw webpagina's binnen 10 seconden. Beperk de omvang van de homepage tot maximaal 50 kB,

inclusief scripts, stylesheet en multimediabestanden. Andere pagina's mogen eventueel zwaarder worden, maar denk over opsplitsing bij erg grote pagina's.

Zoeken: help uw bezoekers te vinden wat zij zoeken. Plaats een zoekdienst boven in elke webpagina. Houd

deze eenvoudig: één wit zoekveld met ruimte voor 25-30 tekens en een knop met het opschrift 'Zoek' of 'Zoeken'.

Plaats op uw website servicepagina's met een faq en een wegwijzer (site map), bereikbaar vanuit de primaire navigatiestructuur.

Usability(2) Opmaak: maak uw webpagina's optimaal leesbaar op elk beeldscherm.

Zorg voor goede leesbaarheid van de pagina op een beeldscherm. Hanteer goed contrast tussen voor- en achtergrondkleur; gebruik liefst een schreefloos lettertype en schaalbare tekengrootte.

Schrijfstijl: geef zoveel mogelijk informatie met zo weinig mogelijk woorden. Schrijf kort: schrap rigoureus alle overbodige tekst. Schrijf de belangrijkste informatie eerst: in de titelbalk (<title>), in de

paginatitel en in de kopteksten. Plaats de informatieve kernbegrippen aan het begin van elke koptekst, alinea, zin en hyperlink. Zo wordt uw pagina optimaal scanbaar.

Hyperlinks: geef uw informatie context en diepgang met duidelijke links. Maak uw hyperlinks informatiedragend. Gebruik de hyperlinktekst om

aan te geven waar de bezoeker terecht zal komen. Maak hyperlinks duidelijk herkenbaar ten opzichte van de

omliggende tekst. Gebruik een afwijkende kleur voor hyperlinks (liefst de standaardkleur blauw) en laat hyperlinks onderstreept. Zorg ervoor dat bezochte hyperlinks herkenbaar zijn in een afwijkende kleur (liefst de standaardkleur paars).

Usability (3) Interactie: geef surfers de mogelijkheid zelf dingen te doen.

Maak belangrijke interactieve elementen van de site direct bruikbaar op de homepage. Denk in elk geval aan zoeken en bijvoorbeeld aan inloggen.

Accessibility: maak uw website toegankelijk voor iedereen. Zorg ervoor dat de primaire navigatiestructuur en de informatie op de

pagina altijd ook als tekstinformatie aanwezig is. Zorg indien mogelijk voor een complete tekst-only versie van de site.

Maak gebruik van standaard (X)HTML-coderingen voor kopteksten en benadrukte tekst. Plaats nooit meer HTML-opmaakcodes zoals <font> en <b> in uw schermteksten, maar regel dit via CSS (in een externe stylesheet).

Afbeeldingen en multimedia: gebruik ze spaarzaam en doelgericht. Beperk het gebruik van afbeeldingen liefst tot 5 à 15% van het oppervlak

van de webpagina, ter illustratie van belangrijke onderdelen van de website.

Gebruik alleen pictogrammen indien deze niets te raden overlaten. Doe dit door bij (zelfgemaakte) pictogrammen ook een tekstlabel in de stijl van de site te plaatsen.

Zorg ervoor dat er een tekstalternatief beschikbaar is voor multimediainhoud. Gebruik liever geen multimediatechnieken voor de primaire navigatie.

Drie opmerkelijke sites Usetekst Innovatie platform

Klik op een van de thema’s en lees de toekomstvisie op gebied van…

Duurzaamheid

Voeding en bloemen Water High-tech systemen en materialen Creatieve industrie Chemie Persoonlijke dienstverlening Kennis Onderwijs Werk & bedrijf Overheid & bestuur

Samenleving Leefomgeving Welzijn Gezondheid Openheid

Encyclopedie

Tot slot: nog wat vragen

Kunnen computers/machines mensen herkennen? Kunnen computers/machines ruiken? Kunnen computers/machines mensen helpen bij de

liefde? Kunnen computers/machines zoeken? Kan een computer/machine jou helpen bij het zoeken

naar de muziek, vakantie, sport etc. die het beste bij jou past?

Kan een computer/machine de ideale samenvatting van een tekst maken?

Wat is de ideale encyclopedie?