interactiviteit, javascript, html, css

Hoe ziet interactiviteit eruit?

Hoe onderzoek je interactiviteit? Dat is de vraag die mij deze zomer bezighoudt. En niet zonder reden. Voor mijn onderzoek naar interactieve multimediale verhalen werk ik deze zomer aan drie uitgebreide analyses. Met deze analyses wil ik achterhalen wat de rol is van interactiviteit binnen het narratief. Uit mijn literatuuronderzoek is gebleken dat hierbij de mogelijkheden en grenzen van de gebruikte software een grote rol spelen, maar hoe onderzoek je die? Door zelf te leren programmeren!

Interactive verhalen

Maar we spoelen eerst even terug naar het onderwerp van mijn onderzoek. We zien dat journalisten de afgelopen jaren steeds meer interactieve, multimediale verhalen maken. Dit zijn lange verhalen met een ‘leestijd’ van tenminste 20 minuten die worden verteld met behulp van verschillende media en waarbij de gebruikers moeten navigeren door de content. Niet elke gebruiker ziet of leest alles, en de ervaring is voor elke gebruiker dus anders. Uiteraard zijn er verhalen met minimale interactiviteit, en verhalen waarin de gebruiker alle vrijheid krijgt om een eigen verhaal te reconstrueren uit de aangeboden informatie.

Dit zijn mijn cases

De Hartslag van Lehmann Brothers (NRC) – een lineair verhaal waarin de gebruiker het laatste weekend van Lehmann Brothers kan ervaren.

Refugee Republic (de Volkskrant/Submarine Channel) – een multi-lineair verhaal waarin de gebruiker ‘wandelingen’ kan maken door een vluchtelingenkamp.

De Industrie (VPRO/Submarine Channel) – een non-lineair verhaal waarin de gebruiker kan onderzoeken hoe de drugsindustrie in zijn buurt eruitziet.

In andere woorden, interactiviteit is variabel: de gebruiker kan meer of minder handelingsvermogen (agency) hebben, en de mate van agency wordt bepaald door de makers van het verhaal. De makers zijn hierin niet volledig vrij. Om interactie in een verhaal te verwerken gebruiken makers software, en de gekozen software bepaald en begrensd welke vormen van interactiviteit mogelijk zijn (affordances).

De rol van software

Journalisten hebben tegenwoordig veel tools tot hun beschikking waarin de vorm van interactiviteit eigenlijk al vast staat. Denk hierbij aan Slices of StoryMapJS. Hiermee kan een journalist, zonder zelf te programmeren, een interactief multimediaal verhaal maken. Maar er worden ook veel verhalen gemaakt zonder tool. Deze verhalen worden gemaakt door teams, bestaande uit onder andere journalisten, documentairemakers en webdesigners en -ontwikkelaars. Hier hebben de makers heel veel vrijheid in het interactief ontwerp, omdat ze zelf de code schrijven. De verhalen die ik analyseer zijn allemaal op deze manier gemaakt. Om te begrijpen hoe de gebruikte software de interactiviteit in het verhaal beïnvloed, moet je als onderzoeker weten hoe het werkt.

Leren programmeren

En zo begint dus mijn zoektocht in de wondere wereld van webdesign. Om bij het begin te beginnen. De hoeksteen van webdesign bestaat uit drie onderdelen: HTML, CSS en JavaScript. Eigenlijk zijn alle moderne websites gebouwd met deze drie talen, die elk een unieke functie hebben. HTML staat voor Hypertext Markup Language, werd in 1993 gelanceerd, en is bedoeld om structuur te geven aan de inhoud van een webpagina: wat zijn de headlines, wat de paragrafen, en waar staan de links en waar gaan die naartoe?

Naarmate het internet steeds multimedialer werd, werd HTML steeds complexer. Het werd mogelijk om video’s toe te voegen of audiobestanden, en met HTML5 (2014) is het zelf mogelijk om graphics in het HTML te maken. Website werden ook al snel groter en complexer, en de opmaak begon een vervelend klusje te worden. Daarom hebben we, al sinds 1996, CSS, dit staat voor Cascading Style Sheet. Met deze taal kan je met een enkel .css document de opmaak voor alle pagina’s van een website bepalen. Welke kleur heeft de tekst, hoe is een paragraaf uitgelijnd en welk lettertype wordt gebruikt?

Tot slot hebben we JavaScript. Dit is eigenlijk de enige programmeertaal van de drie en wordt al sinds 1995 gebruikt. HMTL en CSS zeggen iets over hoe de webpagina wordt weergegeven, JavaScript bepaalt hoe elementen op de webpagina zich gedragen. De eerste twee zijn statisch, JavaScript is dynamisch. Met JavaScript kan ik onder andere bepalen wat er gebeurt op een webpagina als de gebruiker ergens op klikt. Er verschijnt dan bijvoorbeeld een afbeelding, of nieuwe tekst. JavaScript kan nog veel meer, maar ik ben nog niet zover. Google Maps is een goed voorbeeld van de veelzijdigheid van JavaScript. Ook de paralax scroll, het welbekende ‘gordijneffect’ van Snow Fall, is mede mogelijk gemaakt door JavaScript.

En JavaScript is pas het begint. Dit is waarschijnlijk de makkelijkste van de programmeertalen. Ik ben het nu aan het leren, en merk gelijk dat ik de code van een webpagina al beter kan lezen (iets dat volgens mij belangrijk is wanneer je interactieve elementen op een pagina analyseert). Ik heb ook al gezien dat Refugee Republic JQuery gebruikt. Dit is een JavaScript library, die het toepassen van JavaScript op een webpagina makkelijker maakt. Je kan daardoor (als ik het goed begrijp) uit de voeten met minder code. De Industrie heeft gebruikt gemaakt van AJAX. Hiermee is het mogelijk om de vertoning van de website los te koppelen van de data exchange tussen de computer en de server – hierdoor kan een website dynamisch zijn zonder dat de pagina steeds opnieuw wordt geladen. Zowel JQuery en AJAX zijn onderdeel van JavaScript.

Naast HTML, CSS en JavaScript, alle drie talen die iets doen voor de gebruiker, heb je natuurlijk ook nog allerlei talen die bepalen hoe onzichtbare processen in de computer werken (zoals PHP en XML). Ik heb voor nu gekozen om me te beperken tot HTML, CSS en JavaScript, omdat met deze talen wordt bepaald hoe aan de gebruiker de webpagina wordt vertoond, en hoe deze webpagina reageert op de interacties van de gebruiker. Maar de vraag blijft wel: hoeveel moet je leren? Wanneer weet je voldoende om te snappen hoe interactiviteit functioneert?

Zelf ook leren programmeren? Ik ben aan de slag gegaan met de tutorials op www.w3school.com. Hele duidelijke uitleg, met veel voorbeelden en oefeningen. De online communities van webdesigners, -ontwikkelaars en programmeurs is heel actief, en je kan dus altijd wel ergens terecht met je vragen. Op deze manier is het prima te doen om jezelf iets nieuws aan te leren!