Stageverslag Mediamatic

Stageverslag Mediamatic

Betreft. Stageverslag Afstudeerstage Door. Saro Van Cleynenbreugel Stagebegeleider. Tim Benniks Afstudeerbegeleider. Gwen van Iersel Versie. 1.3 Datum. 24-03-2010

Indeling verslag Inleiding Omschrijving van Mediamatic Mijn stagebegeleider Mijn beroepsrol Mijn eigen taken en verantwoordelijkheden Omschrijving van opgeleverde producten Observatieopdrachten Leerdoelen Leerdoelen realisatie Functioneringsverslag Beoordeling Conclusie Bijlage Links

Inleiding Vandaag had ik mijn sollicitatiegesprek met Willem van Velthoven. Het verliep eigenlijk alleen maar erg prettig. Na door de storm gefietst te hebben had ik het bedrijf dan toch gevonden. Ietwat doorweekt kwam ik binnen langs een soort achteringang waardoor ik direct op een werkplek beland was. Een vrouw daar zag dat ik wat verdwaald was en vroeg me waarmee ze mij kon helpen. Ik zei dus: Ik ben op zoek naar Willem van Velthoven. Ze sprak enkel Engels dus ik legde nader uit waarvoor ik kwam. Ze begeleide me naar de lift waarmee ik naar de derde verdieping moest gaan. To the right at the end of the hall, zei ze. Ietwat zenuwachtig ging ik op zoek naar Willem. En ja hoor, toen ik op het kantoor binnen kwam zag ik Willem al in de verte zitten, ik herkende hem goed van een foto op internet. Hij was met enkele front-end developers wat ontwerpen aan het doornemen. Aan Willem zijn feedback kon ik merken dat hij duidelijk veel kennis in huis heeft over interaction design en goed weet wat hij wil. Ik heb nog even mee feedback gegeven en een poos later heb ik dan toch nog een echt sollicitatiegesprek met Willem en nog een mevrouw gehad. Dit verliep op een paar dingen na best soepel. Hij vroeg mij wat ik deed en wat ik dacht te komen doen. Niet in die woorden maar daar kwam het wel op neer. Ook hebben we het nog wat gehad over de minor die ik gevolgd heb. Sociale kracht van IAM sprak Willem naar mijn idee wel aan. Ik heb aangegeven dat ik mij graag bezig hou met ontwerp, interaction design en concepten bedenken. Willem vind het belangrijk dat ik doordenk in concepten dus gewoon meedenk met wat er gemaakt wordt. Eigenlijk heel vanzelfsprekend allemaal. Hij las nog even mijn sollicitatiebrief door en zag dat ik per 1 september zou kunnen beginnen. Hij zei iets van: Ah dan kan je dus direct beginnen. Ik was ietwat verbaasd en checkte of ik het wel goed verstaan had. En ja hoor, voor ik het wist had ik met iedereen op de werkvloer kennis gemaakt. Wat een geluk om ervaring te mogen opdoen bij Mediamatic! Lekker niet de reclame in maar gewoon creatief aan de slag met media zonder deze aardkloot te verpieteren. Want laten we eerlijk zijn, al dat consumentisme maakt werkelijk al het moois op deze planeet kapot. Bij Mediamatic heb ik een prachtige tijd gehad. Ik heb veel uiteenlopende events en workshops mogen bijwonen waar ik dingen geleerd heb over in een team tot een prachtige installatie komen en hoe ik een prototypingplatform als een Arduino hiervoor kan gebruiken. Mijn collega's vielen mij nog het meest op, wat een heerlijke werksfeer daar. Iedereen is zo behulpzaam en prettig in de omgang. Misschien dat dit door het relatief hoog aantal internationale stagiaires komt wat overigens erg goed voor het aanscherpen van mijn Engels is geweest. Ik had collega's uit Letland, Spanje, België, Duitsland en Zuid-Afrika. Door de continue verversing van werkkrachten blijft Mediamatic een jeugdige broedplek voor creativiteit. Het belang van een gezonde lunch word ook bij Mediamatic zeker niet onderschat. De eerste werkdag zie je mensen nog wel eens met hun eigen bammetjes op de werkvloer verschijnen maar zodra er hoogte is genomen van de verscheidenheid aan faciliteiten, als een koelkast, eierkoker, magnetron, toaster, kookplaat en een grill past men zich hier snel op aan. Ook de salades zijn erg in trek. Mensen vormen tijdens de lunch dan een salad group en vormen samen een overheerlijke salade met bijvoorbeeld balsamico azijn, olijfolie, nootjes, paprika, rucola, mozzarella, avocado, zongedroogde tomaat, ik heb van alles al voorbij zien komen.

Mijn werkzaamheden waren afwisselend en hierdoor nooit saai. Ik ging altijd met een goed gevoel naar mijn werk en genoot van de sfeer, dit kwam vooral door de mensen waarmee ik samen werkte. In het bijzonder wil ik Tal en Raphael noemen. Tal was een collega die van oorsprong uit Israël komt en is opgegroeit in Belgie. Hij doet zijn master Interaction Design aan de TU-Delft en houd net als ik ontzettend veel van mayonaise en goed eten. Raphael komt uit München een plaatsje in Duitsland in de buurt van Oosterijk. Hij studeert fotografie en houd van net als ik van koken we hebben dan ook heel wat lunch samen doorgebracht.

Omschrijving van Mediamatic Mediamatic is half stichting en half bedrijf. De stichting houd zich bezig met de kunstzinnige dingen en het lab maakt websites voor anderen. Stichting Mediamatic is opgericht in 1985 als forum en ontmoetingsplek voor nieuwe mediaen videokunstenaars. Tegenwoordig is Mediamatic een culturele instelling en een web 2.0 bureau. Het bedrijf werkt op het snijvlak van cultuur, maatschappij, kunst en nieuwe media. Mediamatic organiseert ook evenementen met betrekking tot nieuwe media. Zo hebben ze acht september Kom je Ook? georganiseerd. Hier kwamen verschillende sprekers een woordje houden over hoe je door de inzet van sociale media bezoekers bij je organisatie kan betrekken. In de zaal was een projectie op de muur waarop alle tweets m.b.t. Kom je Ook?2 werden gebeamed. Hierop konden de sprekers dan inspelen; er ontstond een directere interactie tussen spreker en publiek. Van 18-22 september hebben we HackerCamp 2009 gehad. Hier kwamen van over de hele wereld interaction designers, kunstenaars en programmeurs bij elkaar om samen acht interactieve installaties te bouwen. Dit is een jaarlijks event dat Mediamatic organiseert. Hieraan vast zit het event PICNIC waar Mediamatic ook zijn steentje aan bijdraagt. De installaties van HackerCamp worden hier bijvoorbeeld ten toon gesteld en ze verzorgen de website. Het is een bedrijf dat nuttig gebruik maakt van stagiaires. Die zijn immers vers van de pers en komen zo steeds weer met nieuwe inzichten. Elke maandag en woensdag voor de lunch is er vergadering in de kantine waarbij iedereen op de werkvloer bij elkaar geroepen wordt. Mijn stagebegeleider Mijn stagebegeleider heet Tim Benniks. Hij is front-end developer bij Mediamatic Lab en is verantwoordelijk voor de look and feel van websites. Bij Mediamatic Lab bouwen front-end developers simpele en elegante interfaces voor complexe websites. Deze websites zijn gebouwd op het anymeta-cms. Dat houdt in dat in het systeem alles een ding is (hier ga ik later verder op in). Er bestaat niet echt een strakke hiërarchie omdat deze gevormd wordt door dingen met elkaar te linken. Tim heeft een medische achtergrond maar zijn kunnen als frontend developer is hierdoor niet minder.

Mijn beroepsrol (functie) Ik ging de functie interaction designer vervullen bij Mediamatic. Het was destijds de bedoeling dat ik mij bezig zou houden met het interactieontwerp en grafisch ontwerp van in het bijzonder interactieve installaties als de ikcam maar ook digitale omgevingen. maar dat is later iets versplinterd. Verder hield ik mijn oren en ogen open omdat hier veel te leren valt op verschillende vlakken. Mijn eigen taken en verantwoordelijkheden Mijn verantwoordelijkheden waren alle zaken die met media te maken hebben. Dit klinkt misschien wat algemeen maar zo was het werkelijk. Ik was hier namelijk de interactieve media professional en weet van veel dingen wat. Hierdoor is het voor mij eenvoudig om met verschillende werkvelden te communiceren. Zodra iemand een opdracht voor mij had riepen ze mij en was ik meestal bereid het nodige werk te verrichten. In het begin was ik heel erg soepel en was ik bereid alles te doen dus ook de minder interactieve werkzaamheden als het bij elkaar zoeken van kabels en apparatuur die dan voor events nodig waren. Later ben ik consequenter geweest in het nastreven van mijn leerdoelen. Een van mijn verantwoordelijkheden was voor een tijd het uitvoeren van usability tests, het evalueren van deze tests en vervolgens het verbeteren van het interactie ontwerp.

Omschrijving van opgeleverde producten Ik werd aangenomen om te werken aan interactieve installaties als de ikcam. Dit houdt in dat ik deze zou ontwikkelen op het gebied van interaction design en design waar dat kan. Verder paste ik mijn vaardigheden toe bij online webapplicaties. Dit werken aan de ikcam heb ik in het begin eventjes gedaan maar ik heb vooral heel veel andere dingen gedaan. Deze dingen die ik gedaan heb benoem ik hieronder waarbij ik er in het kort iets over vertel. ikpoll suit design De pakken voor de ikpoll waren nodig voor het event Kom je Ook?. Ik heb Andreas, een designer bij Mediamatic, geholpen met dit design en bij het realiseren van de pakken. Als basis hadden we wit doorzichtige schilderpakken, hierop hebben we met magenta verf de namen van de pitch sprekers geverfd. Ik heb Andreas als idee gegeven om misschien een hartvorm te gebruiken op de pakken. Hij heeft dit idee voorgesteld maar dit vond Willem (de baas) iets te veel. Later, tijdens PICNIC is dit idee echter wel doorgevoerd en hebben we het in praktijk gebracht. Andreas heeft een herontwerp gemaakt voor de mobiele-ikpoll pakken. De harten werden op een dik vel kunststof (wat we ook gebruikten om banners mee te maken) uitgeplot in magenta tinten.

PICNIC 2009 Hackercamp assistance Natuurlijk heb ik mij direct aangemeld voor het HackerCamp zodra ik van dit prachtige event op de hoogte was. Op achttien september was de opening. Tijdens de opening stelde elke deelnemer zichzelf kort voor, ieder vertelde wat hun specialisatie en hun favoriete techniek was. Ik stel mezelf voor tijdens de opening van het Social RFID HackerCamp 2009. Tijdens het HackerCamp heb ik vooral veel over de schouder mee gekeken met de professionele hackers. Ik heb ook zelf actief deelgenomen tijdens bijvoorbeeld het bedenken van concepten met het team dat later de Friendslicer en de Ik a Scetch maakten. Verder heb ik geholpen met het opbouwen van de installaties, hier bedoel ik het fysieke bouwen mee als: zagen, boren, afmeten en in elkaar zetten. Ik had ook de verantwoordelijkheid om alle ikcams te configureren en te plaatsen binnen PICNIC. Ik heb toen samen met Tal bedacht om de ikcams op te hangen door ze met tierips en een stuk foam tegen een paal te klemmen. De foam zorgde voor voldoende wrijving zodat de ikcams niet langs de paal naar beneden gleden.

Ik ben ook vrijwilliger geweest voor de ikpoll en heb toen in een ikpoll pakje mensen gevraagd om te stemmen. Mensen konden hier met hun iktag (RFID tag) antwoorden op de vraag of ze volgend jaar ook naar PICNIC zouden komen, ze konden kiezen uit drie antwoorden. De antwoorden waren in principe drie RFID readers in een CD-hoesje met een label erop geplakt. Het was vooral een erg grappige opdracht, want we zagen er natuurlijk stuk voor stuk hilarisch uit. Op de foto twee pagina s terug kun je zien hoe we er uit zagen. Verder moest ik in de spitsuren helpen bij de ingang bij de ticket registratie door bezoekers te voorzien van badges, een bandje en een iktag.

Friendslicer De Friendslicer is een interactieve installatie die geboren is tijdens Hacker Camp 2009 te PICNIC 2009. Hackercamp is een jaarlijks event waar kunstenaars, interaction designers, filosofen, programmeurs, techneuten en dergelijke talenten tot elkaar komen om spannende interactieve machines te smeden. Met behulp van Arduino's weten de hackers wonderbaarlijke installaties te verwezenlijken. De Friendslicer was één van de nieuw geborenen tijdens deze jaarlijkse samenkomst. Ik was zelf deel van het broedprogramma en heb zo tijdens de brainstormsessie mijn liefde gedeeld met de kudde. Wat schetsen die ik maakten tijdens het concepten bedenken Aan het eind van PICNIC heb ik 's avonds laat met een paar anderen de Friendslicer nog uit elkaar gehaald. Hier waren we echt wel een hele poos mee bezig. Toch was het ook wel heel leerzaam omdat ik nu weet dat het belangrijk is om er rekening mee te houden dat je installatie demontabel moet zijn zodat je hem makkelijk ergens anders weer kunt opbouwen. Ongeveer een maand later heb ik deze weer opgebouwd en verbeterd voor de Amsterdam Biennale (expositie voor het Travel project). Ik heb de installatie groter gemaakt en de code hier en daar wat aangepast na overleg met Sly (hij heeft de software bedacht).

Foto van dat we bezig zijn met het opbouwen en testen van installaties Foto van in de hackercamp hut

Testen en evalueren van de ticket shop Online tickets verkopen voor evenementen als Kom je Ook?, was een must voor Mediamatic omdat het onder andere een hoop rompslomp zou besparen. Deze shop moest echter wel nog helemaal ontworpen worden. Hier werkte vooral Andreas aan. Tal en ik hielpen wat met de interactie doornemen en het evalueren ervan. We keken bijvoorbeeld naar soortgelijke verkoop systemen, hoe die het aanpakten m.b.t. labeling en navigatie. Hoe bewaar je het overzicht en zorg je er voor dat de klant zich op zijn gemak voelt? Bij de eerste paar versies waren er nog heel wat gebreken aan de shop en dankzij het regelmatig testen ervan is er toch nog iets moois uitgerold. Het testen pakten we aan door alle stappen in de shop op papier uit te printen. Een soort van paper-prototyping kun je dit noemen. Op het papier schreven we opmerkingen en verbeter voorstellen. Bouwen aan het creative africa network creativeafricanetwork.com Hierbij heb ik leren werken met het anymeta admin systeem en ben ik erachter gekomen hoe dit anymeta systeem werkt. Anymeta is ontworpen door Ralph en Bas bij Mediamatic. In het kort is anymeta een CMS waarbij alles een ding is. Personen, events, plaatjes en artikelen zijn allemaal dingen. Deze dingen hebben relaties met elkaar en linken op deze manier naar elkaar. Een plaatje kan een profielfoto zijn en zal dan een link hebben met je profiel. Het grappige is dat het plaatje zelf niet weet dat het een profielfoto is maar de relatiesoort die het heeft met mijn profiel maakt dat het een profielfoto is.

Candy typografie Een typografie ontwerpen die uit snoep bestaat klinkt misschien een beetje gek. Maar dat is goed want hier bij Mediamatic is een beetje gek juist de bedoeling. De typografie werd ontworpen naar aanleiding van het event Kom je Ook? 3. Voor dit event word elke keer opnieuw een speels logo bedacht. En deze keer was het de beurt aan het snoep concept. Nadat het logo van de grond kwam zijn we aan de slag gegaan met het ontwerpen van een complete typografie van a tot z. Hier kwam heel veel snoep bij kijken. En veel spelen met snoep. Twee dagen lang hebben we verschillende letters bedacht in alle vormen, kleuren en smaken. Dit was de rough and dirty methode van Tal, zoveel mogelijk in een zo kort mogelijke tijd. Nadat Raphael al het snoep in de computer had geordend zijn we gaan kijken wat er nu eigenlijk werkt en wat niet. Hieruit hebben we enkele conclusies getrokken en vervolgens hebben we een tweede ronde gehouden. Verschillende kleuren gebruiken in één letter werkte bijvoorbeeld niet zo goed en kleuren als geel vielen te veel weg op de witte ondergrond. Daarna hebben we nog een lange dag nieuwe letters bedacht en deze weer digitaal opgeslagen. Maar helaas in de vergadering van de dag erna kregen we tot onze grote verbazing van Willem te horen dat het project stop gezet werd. Het zou volgens Willem niet realiseerbaar zijn en hij beweerde de opdracht niet serieus bedoeld te hebben. Na enige research na de treurige mededeling van Willem bleek echter dat een typografie met foto's wel mogelijk is, dit is beter bekend als 'photo typografie'. De software om dit te maken is alleen nogal duur. We hebben uiteindelijk met veel tegenzin het project dan toch stop gezet. Wel zijn we verder gegaan met het testen van een geanimeerd logo. Hiervoor hebben we een test gedaan met een stop-motion filmpje waarin snoep dat in beeld komt in het Kom je Ook? 3-logo veranderd.

Inventarisatie van de kelder Mediamatic heeft een mega grote kelder waar je werkelijk alles kan vinden. Als je tenminste weet waar het ligt. Helaas weten maar enkele mensen precies waar je wat kunt vinden en dit zijn ook de mensen die bijna de hele dag kwijt zijn aan het op orde houden van de kelder. Om je een idee te geven van de spullen die je in de kelder kunt vinden zal ik er een paar noemen: LCD schermen, snoeren en kabels, tangen en hamers, schroeven en spijkers, microfoons, beamers, printers, hout en ijzer, alle soorten lijm en tape en verf. Eigenlijk kun je er alles vinden om wat voor installatie dan ook te bouwen. Nu, ik dacht tijdens een lunch moment: waarom maken we niet een soort interactieve applicatie waarmee iedereen alles kan vinden in de kelder? Toen ben ik samen met Tal wat gaan bedenken wat we hier nu eigenlijk voor kunnen maken. We dachten aan een soort hiërarchische indeling van alle spullen dus het werken met categoriën en sub categoriën. Later dachten we het meer op locatie te gaan indelen en hier zijn we dan ook op verder gegaan. We hebben toen een grove prototype gemaakt van ons idee dat gebaseerd is op het anymeta systeem. We hebben een panorama foto gemaakt van de kelder en deze als foto op de mediamatic site gezet. Vervolgens hebben we op de foto klikbare plekken gemaakt waarmee je steeds een stukje verder ging. Je zoomde dus steeds in (bijvoorbeeld op een specifieke kast) en vervolgens kon je weer een keuze maken uit welke lade van die kast je wilde bijvoorbeeld de lade met zagen of de lade met boren. Bij dit prototype is het dan ook gebleven omdat we dingen hadden te doen die een hogere prioriteit hadden.

Usability testing Een wat groter project dat ik gedaan heb samen met Emina en Tal is het ontwikkelen van een geschikte Flap knop. De Flap is een functie in een website waar gebruikers alle mogelijke interactie met 'een ding' kunnen vinden. Dit is een vrij tricky opgave want hoe label je zo'n knop bijvoorbeeld? Bijvoorbeeld: alles wat je kan, doe iets, neem actie, toon acties. Zoals je ziet is er een heleboel mogelijk. Maar waar zullen de gebruikers op klikken? We waren erachter gekomen dat dit nog niet zo vanzelfsprekend is. Mensen en vooral wat oudere mensen zoeken naar één specifieke knop per functie. Als ze bijvoorbeeld tickets willen kopen zoekt men naar een knop met de tekst 'Koop Tickets' en niet naar een algemene benaming voor acties. Om dit te onderzoeken heb ik twee keer het usabilitylab op mijn opleiding afgehuurd om de Flap op verschillende mensen uit te proberen. Tussentijds brachten we dan verbeteringen aan en op deze manier konden we op een efficiënte manier ontwikkelen. Later hebben we ook nog een stuk of vijf keer bij de ingang van het kantoorgebouw mensen gevraagd om de flap te testen om zo nog wat snelle tests te kunnen doen. Dit ging eigenlijk net zo goed als met de eye-tracker die in het usabilitylab aanwezig was. Je hebt echter wel wat minder data. De eyetracking data kan bijvoorbeeld heel erg goed werken om een klant te overtuigen van bepaalde keuzes die je maakt. Je kunt immers op video duidelijk zien waar mensen naar keken tijdens de tests. Van de resultaten kun je dan verschillende infographics plotten met behulp van het softwarepakket dat ook bij de eye-tracker zit. Een ander niet onbelangrijk ding dat ik geleerd heb is dat een schaal met choclate chip koekjes erg goed werkt om de test personen over te halen om even deel te nemen aan je usability test. Voor wat hoort wat. Andere dingen die we tegen kwamen en interessant waren voor het ontwikkelen van het juiste ontwerp, waren: We hebben over het algemeen maar weinig geduld met het zoeken naar dingen. Vaak lezen we de tekst zelfs niet als het langer is dan een paar woorden. Dit geld voor de jongere generatie gebruikers. Dus het gebruik van duidelijke labels is erg belangrijk. Maak gebruik van witruimte om elementen meer te laten opvallen. Maak dingen niet lelijk groot waardoor het web-design teniet gaat. Voor het testen zelf heb ik de volgende dingen geleerd: Maak de gebruiker van te voren duidelijk dat als hij dingen niet vindt, het de fout is van het ontwerp en dat hij dus niet degene is die dom is. Geef de gebruiker een duidelijk doel voor hij begint met testen. Wat wil hij gaan bereiken op de te testen webpagina/applicatie. Trek niet te snel conclusies. Observeer eerst en niet meer dan dat. Maak notities van dingen die je ziet; dingen waar de gebruiker mee zit. Vraag de gebruiker om hardop te praten: Waar is hij naar op zoek, zijn verwachtingen, zijn aarzelingen of twijfels. Kijk in de eye-tracking resultaten voor de eerste paar dingen waar hij naar kijkt en de laatste paar dingen. Dit laat goed zien wat veel aandacht vraagt. En of het datgene is waar je van wil dat hij daar als eerst naar kijkt. Het laatste waar de gebruiker naar kijkt zegt iets over de reden waarom de gebruiker weg gaat bij een bepaalde pagina, waar was zijn laatste hoop.

Onthoud goed dat de gebruiker je een plezier doet door je te helpen met de test dus wees beleeft en denk na over een eventuele beloning als koekjes. Dit zijn de verschillende knoppen die we getest hebben:

Arduino workshop De Arduino workshop werd gegeven door Ubi de Feo in de expositieruimte van Mediamatic. Ubi is creative developer bij zijn bedrijf Twodotone in Amsterdam. Hij heeft jarenlange ervaring met werken met Arduino's. Arduino is een prototyping platform dat gebruikt wordt om met behulp van een computer fysieke hardware te programmeren. De Arduino is voorzien van een herprogrammeerbare microcontroller. Je kunt deze eenvoudig programmeren door de Arduino software te gebruiken vanaf je computer. Wat erg mooi aan dit platform is, is dat je met heel basic elektronica werkt en dus alles van het begin af aan zelf kunt bouwen. Hierdoor ben je in staat om wat voor sensor dan ook te gebruiken met de Arduino. En met de maar liefst dertien digitale uitgangen kun je dus heel wat elektronica aansturen. De workshop liet je kennis maken met de Arduino en Ubi behandelde in zijn workshop ook heel wat theorie die komt kijken bij elektronica en programmeren. Je werd warm gemaakt door samen wat kleine oefeningetjes te doen. Eerst ging je een ledlampje laten knipperen daarna liet je het pulseren. Verder gingen we nog spelen met een lichtsensor een potentiometer en een simpele switch. Bij al deze hardware onderdelen deed je dan een klein oefeningetje. Ubi heeft heel goed laten zien hoe eenvoudig het eigenlijk is om sensoren te gebruiken als een input voor bijvoorbeeld een installatie en dat je de code om een sensor uit te lezen altijd wel van het internet kunt plukken omdat de arduino een open source platform is. Tijdens de workshops ben ik erachter gekomen dat techniek niet alleen saai hoeft te zijn maar dat je er ook hele leuke creatieve installaties mee kunt bouwen. Hier had ik natuurlijk al eerder een voorproefje van gehad tijdens het Social RFID Hackercamp. De workshop heeft mij nieuwsgierig gemaakt en ik heb dus een afstudeerproject gezocht om mij zo meer te verdiepen in een platform als deze.

HTML 5 research In een mini project verdiepte ik mij in HTML 5, de voordelen en gebreken er van. Tijdens deze verdieping ging ik zelf ook aan de slag met HTML 5 om er zo zelf achter te komen. Dit pakte ik aan door een portfolio te bouwen op een Wordpress platform met behulp van HTML 5 tags. Één van de grote vernieuwingen die ik zeker getest heb is de nieuwe <video>-tag. Hiermee kun je nu op dezelfde manier als een plaatje ook een video embedden, dit is althans de bedoeling. Dit, een screenshot van de webpagina zoals die er nu uit ziet. Bevindingen Het HTML 5 portfolio staat online! (saromedia.nl). Gedurende vijf weken heb ik mij gestort op de nieuwe features van HTML 5 en geëxperimenteerd met de nieuwe tags. Een voordeel is dat de tags nu een logische naamgeving hebben als de tag <aside> voor de sidebar, <article> voor artikelen en <nav> voor de navigatie. Een opvallende vernieuwing is de nieuwe <video> tag. Met deze tag kun je nu net zo eenvoudig als een plaatje een video in je pagina embedden. De manier om het document type aan te geven is een stuk eenvoudiger namelijk gewoon <!DOCTYPE> aan het begin van het document zetten. Dus niet meer een heleboel rompslomp er omheen. Eén van de dingetjes waar ik moeite mee had was het uitvogelen hoe ik nu een video moest embedden. Dit leek in het begin allemaal erg gemakkelijk maar bleek later toch wat complexer te zijn en weer later bleek het toch weer wat eenvoudiger. Dit complexe element

komt voornamelijk door het feit dat HTML5 maar door enkele browsers ondersteund word en in hoeverre en op welke manier verschilt ook nog eens van browser tot browser. Zo zat ik met het probleem dat Firefox alleen.ogg bestanden accepteerd en Safari (de mac browser) enkel.mp4 bestanden. Als eerst stuitte ik op websites die dit probleem wisten te omzeilen door wat te scripten en zo konden bepalen of de.mp4 file of de.ogg file aangesproken moest worden. Dit leek allemaal overbodig veel code voor mij en ik ging dus verder op zoek naar een eenvoudigere oplossing. En die vond ik dan ook! Het is toch gewoon mogelijk om met relatief weinig code een filmpje met HTML5 tags te laden. Dus als je mijn website nu met Firefox of Safari opent doet hij het prima. Kun je hier meteen de code bekijken als je die wil weten ;). Maar als je hem met Internet Explorer opent heb je wel een probleem. Dit omdat die nog geen ondersteuning biedt voor de <video> tag.

Andere dingen die ik gedaan heb Ik heb ook nog veel andere dingen gedaan buiten de dingen die ik hierboven benoem maar die heb ik niet gekozen om uit te werken omdat ze of wat kleinschaliger waren of niet relevant zijn voor mijn interessegebied (dus mij niet inspireren). Een van de mini opdrachtjes die ik nog gedaan heb met Tal was het bedenken van verbeteringsmogelijkheden van de reeds bestaande ikcams. In de bijlage kun je hiervan een schets zien die we toen tijdens het brainstormen gemaakt hebben.

Observatieopdrachten Het opzetten van processen en procedures Voor het Mediamatic Lab geldt een iets andere aanpak dan voor de Stichting. Voor het Lab komt een potentiële klant met een vraag bij Mediamatic. Dit komt doordat Mediamatic een goede naam heeft en bekend staat als een niet erg overheidsgestuurde organisatie. Dit is aantrekkelijk voor enkele van hun klanten. Allereerst wordt er vergaderd over de opdracht. Vaak weten klanten niet veel van het internet en wordt ze eerst uitgelegd wat internet is en wat je er vandaag de dag allemaal mee kan. Er word vervolgens besproken wat de klant eigenlijk wil. Mediamatic kijkt daarna samen met de klant wat ze kunnen maken. Producten van Mediamatic zijn over het algemeen gebaseerd op een social networking platform wat voort komt uit het anymeta systeem. Als de klant weet wat hij wil kan er een budget op gezet worden. Bij de Stichting komen ontwerpprocessen van binnen uit. Welke beroepsvaardigheden behoren bij welke functietype? Designer: Verzorgt het grafische ontwerp. Maakt een kleuren palet op voor het ontwerpproces. Is in staat logo's en pictogrammen te bedenken. Kan de juiste pictogrammen inzetten voor de juiste labels. Is in staat een balans te vinden tussen esthetiek en functionaliteit. Weet het verschil tussen poepen en schijten. Schijten is het hard uitpersen van een ontwerp wat er geforceerd uit komt en poepen is de tijd nemen voor het wordingsproces en creëert zo iets moois op z'n tijd. Weet rekening te houden met de huisstijl van een bedrijf en deze te handhaven. Front-end developer: Helpt designers om te leren ontwerpen voor het web. Zorgt dat het design correct wordt overgezet naar een werkende website. Kan snelheid garanderen van een applicatie/website. Kan van het design een werkende interface maken. Heeft kennis van de back-end om informatie uit de database te kunnen halen. Kan scripten (bijvoorbeeld javascripten). Is in staat de gebruikers interactie van een applicatie/webpagina te ontwerpen. Kent het MVC (Model View Controller) model en kan hier mee werken. Back-end developer: Ontwerpt de achterliggende architectuur van bijvoorbeeld een webomgeving.

Leerdoelen Dit waren mijn leerdoelen voor en tijdens mijn stage opgezet: Gedurende mijn opleiding heb ik een voorliefde voor interaction design, design en conceptontwikkeling opgebouwd. Bij conceptontwikkeling denk ik voornamelijk aan concepten die de sociale cohesie bevorderen. Deze interesse is gekomen door mijn deelname aan de minor Sociale Kracht van IAM. Tijdens deze minor hebben we nagedacht over concepten die mensen bij elkaar brengen. Dit is naar mij idee iets moois en voor mooie dingen wil ik mij inzetten. Ook wil ik een duidelijk beeld krijgen van wat interaction design nu eigenlijk is en hoe de professional hier tegen aan kijkt. Dus hoe een begrip als interaction design nu eigenlijk in praktijk word gebruikt. Tijdens events als Hacker Camp 2009, PICNIC en Design by Fire wil ik mijn leerdoelen deels verwezenlijken. Hackercamp is een evenement dat Mediamatic jaarlijks organiseert en het vindt plaats tijdens en rondom het evenement PICNIC. Mensen kunnen zich inschrijven voor dit evenement of worden door Mediamatic zelf uitgenodigd om mee te doen. Hackercamp is een creatieve broedplaats voor innovatieve, fascinerende en vooral leuke interactieve installaties. Design by Fire is een jaarlijks interaction design seminar waar ik ieder jaar bij probeer te zijn. Doelen die halverwege mijn stage erbij zijn gekomen: Ik wil zelf een onderzoekje gaan doen in HTML5 en dan vooral gaan kijken naar de nieuwe mogelijkheid met betrekking tot video. Wat zijn voordelen van de komst van HTML5? Ik ga zelf een website bouwen in HTML5 om antwoorden op mijn vragen te vinden. Ik ga mezelf beter leren profileren dus proberen om niet iedere opdracht zomaar aan te nemen maar meer kijken naar wat op dit moment voor mij interessant is. Leerdoelen Realisatie Tijdens Hackercamp heb ik samen met de hackers (ontwerpers, interactie ontwerpers, kunstenaars, techneuten en filosofen) gebrainstormd over mogelijke projecten voor gedurende de week. Ook heb ik nagedacht over het interactie ontwerp van mogelijke installaties. Één van de installaties was een social muziek sampler. Voor deze installatie was het de bedoeling om met meerdere mensen muziek te maken door middel van grote fysieke objecten. Ik had toen als idee dat één van deze objecten de vloer zou zijn. En dat je door het stampen op de vloer geluiden kunt maken. Als mensen dan over die vloer lopen komen er diverse geluiden. Mensen kunnen de gemaakte geluiden live beïnvloeden door bijvoorbeeld een stuurwiel van links naar rechts te draaien. Op deze manier kun je bijvoorbeeld de pitch veranderen of de lengte van een echo. Later is dit idee uiteengevallen in twee verschillende concepten. 1: Friendslicer (sampeling machine) en 2: ikascetch (mega groot teken bord).