Publicatie:Digitale storytelling met IIIF
Storytelling is vandaag ‘hot’ in verschillende sectoren. Interessante en boeiende (digitale) verhalen worden immers gezien als een doeltreffend middel om specifieke doelgroepen te bereiken en de gewenste boodschap aan hen over te brengen. Mensen vertellen elkaar voortdurend verhalen. Toch vergt de opmaak van een boeiend (digitaal) verhaal vaak meer voorbereiding en knowhow dan gedacht.
Deze pagina probeert daarom structuur aan te brengen in de opmaak van digitale verhalen. We proberen houvast te bieden aan de hand van handleidingen, voorgestelde tools en concrete voorbeelden. De focus ligt daarbij op de mogelijkheden die de IIIF-standaard biedt. Ook voor digitale storytelling kunnen deze standaard en de tools die deze ondersteunen een meerwaarde bieden.
De voorbeelden die we geven zijn het resultaat van een samenwerking met Statik in het kader van ons project IIIF3, Storytelling, een project dat tot stand kwam met de steun van de Vlaamse overheid. Statik is een bedrijf dat zowel technologische als inhoudelijke ondersteuning biedt bij (digitale) storytelling. De inhoudelijke uitwerking van de voorbeelden gebeurde in overleg met de projectpartners Musea Brugge, Mu.Zee, Passchendaele Museum 1917 en In Flanders Fields Museum.
| Titel | Digitale storytelling met IIIF (Voorkeurstitel) |
| Locatie | |
| Uitgever | |
| Jaar van uitgave | 2023 |
| Rechten | CC-BY-SA |
| Persistent ID |
Interessante verhaallijnen en geschikte content
De basis van elk goed digitaal verhaal is tweeledig. Enerzijds is het van belang om stil te staan bij wat je gaat vertellen en wie de doelgroep is. Een thema, onderwerp of idee wordt in deze eerste stap vertaald naar concrete verhaallijnen. Anderzijds moet je aandacht hebben voor hoe je deze verhaallijnen wil uitwerken. De beschikbare content (audio, beelden, video, …) is hierbij bepalend voor het eindresultaat.
Beide stappen vallen uiteen in heel wat inhoudelijke en vormelijke keuzes. Een overzicht van deze keuzes en een stappenplan om hier doorheen te gaan, is te vinden in de uitgeschreven handleiding (2. Aantrekkelijke en heldere verhaallijnen + 3. Digitale content inzetten in storytelling).
De verschillende keuzes vormen de aanzet voor een storyboard. Binnen het IIIF3-project werkten we rond drie thema's een storyboard en een gedetailleerd script uit. De neerslag van dit proces is te vinden in dit Miro-bord, en per verhaal in onderstaande viewers.
Biografie van James Ensor
Nieuws van de Groote Oorlog
Sint-Janshospitaal
IIIF-storytellingtools
Om voor elk van de drie uitgewerkte verhalen tot een boeiend en aantrekkelijk eindresultaat te komen, verkende Statik de beschikbare IIIF-storytellingtools. Het overzicht van deze tools, met een aanduiding van de voor- en nadelen en een verduidelijking van de specifieke focus van elke tool, is te vinden in de uitgeschreven handleiding (4. Advies voor het gebruik van (IIIF-)storytellingtools). Volgende tools werden door Statik verkend: Storiiies, Exhibit, Strollview, Annonatate, Panel Truck, Humap, Micrio, Juncture en Omeka S.
In functie van de drie vooropgestelde verhaallijnen heeft Statik voor elk verhaal een geschikte tool gesuggereerd. Deze voorstellen zijn telkens voorzien van een argumentatie. Elk verhaal kon met andere woorden ook met andere dan de hieronder gebruikte tools uitgewerkt zijn.
Biografie van James Ensor
Bij de biografie van James Ensor is gekozen voor een combinatie van twee tools, Exhibit en Timeline JS.
Deze keuze is ingegeven door het algemene gebruiksgemak van Exhibit en de mogelijkheid om meerdere beelden te gebruiken in een lineair verhaal. Dat verhaal ziet er dan uit als een soort slideshow met opéénvolgende beelden. Bij elk beeld kan je eenvoudig tekst toevoegen. Exhibit laat ook toe om het eindresultaat makkelijk via iframe in bestaande websites/platformen te integreren. Dit maakt een combinatie met Timeline JS eenvoudig.
De combinatie met Timeline JS laat toe om een gelaagde tijdlijn te vormen. Elk punt van de tijdlijn kan dan aangevuld worden met telkens een nieuwe slideshow met opéénvolgende beelden en bijhorende tekst. Zo wordt elk gekozen tijdstip een volwaardige scène.
Exhibit
Het startpunt van dit verhaal was de vorming van de afzonderlijke scènes. Voor elke scène maakten we eerst een project (een slideshow in Exhibit). Hierbij zijn de verzamelde IIIF-manifesten eerst in de gecreëerde Exhibit ingeladen door toevoeging van de manifest URL’s. Daarna is elk manifest in de gewenste volgorde aan het verhaal toegevoegd. Daarbij is voor elk beeld ingezoomd op het gewenste deel/selectie/detail en is de corresponderende tekst met (het deel/selectie/detail van) dit beeld verbonden.
Belangrijk bij de vorming van een Exhibit is dat je rekening houdt met de onderlinge positie van het beeld en de tekst. Het kan immers gebeuren dat het tekstvak (een deel van) het beeld bedekt. Dit is meestal niet meteen zichtbaar in de preview. Vooral wanneer je het verhaal integreert in een eigen website wordt dit duidelijk. Daarom is het cruciaal dat je de URL van jouw Exhibit opslaat zodat je het verhaal later nog kan wijzigen.
Timeline JS
De gevormde Exhibits zijn één voor één toegevoegd aan Timeline JS. Hierbij zijn eerst de instructies gevolgd die op de website van de ontwikkelaar Knightlab te vinden zijn. De uitkomst hiervan was een bestand in Google Spreadsheet waarin de nodige informatie voor de tijdlijn toegevoegd kon worden. De Exhibits zijn telkens in de tijdlijn geïntegreerd door in de kolom ‘Media’ de iframe-tag in te voegen. Deze tag wordt automatisch door Exhibit gegenereerd en is te vinden onder de share-knop.
Nadat alle scènes in de spreadsheet toegevoegd zijn, zijn enkele laatste aanpassingen gedaan aan het uitzicht van de tijdlijn. Hiervoor is op de website een interface beschikbaar die toelaat om aan de hand van de Google Spreadsheet URL het lettertype, de startslide, het zoomlevel van de tijdlijn, … aan te passen.
Tijdlijn embedden
De laatste stap was het toevoegen van het eindresultaat aan een eigen website. Ook hierbij werkten we met de iframe-tag. Timeline JS zorgt immers, net als Exhibit, automatisch voor een unieke iframe-tag voor jouw afgewerkte verhaal. Een copy-paste van deze tag volstaat in het Content Management Systeem van je website meestal om de tijdlijn te integreren.
Opnieuw speelt echter de moeilijkheid dat de afmetingen van de tijdlijn bepalend zijn voor het al dan niet overlappen van tekst en afbeelding in de weergave van Exhibit. Het is daarom vaak noodzakelijk om de afmetingen te bewerken tot alle elementen voldoende evenwichtig zichtbaar zijn.
Het eindresultaat kan je hier terugvinden.
Instructies:
Het verhaal bestaat uit en opeenvolging van tijdstippen in het leven van James Ensor. Elk tijdstip is voorzien van een slideshow die enkele gebeurtenissen verder uitlicht.
- Via de grote pijlen en de blokken op de tijdlijn kan je doorgaan naar het volgende tijdstip.
- De slideshow speel je af via de kleine pijl in de rechterbovenhoek van het witte kader.
- Via de '-' in de linkerbovenhoek kan je de tekst opvouwen zodat het beeld beter zichtbaar is.
- In de slideshow kan je in- en uitzoomen via de + en - of door te scrollen. Je kan het beeld ook zo veel verplaatsen als je wil.
Als het verhaal een error oplevert, zorg er dan voor dat je in de browserinstellingen third party cookies toelaat.
Nieuws van de Groote Oorlog
Het verhaal van de Schotse soldaat John Low is in de eerste plaats uitgewerkt met de tool ‘Strollview’. De voorkeur ging naar deze tool omdat deze de mogelijkheid biedt om een gestructureerd lineair verhaal te vertellen met meerdere beelden. Strollview laat ook toe om audio en opgemaakte tekst toe te voegen en om regio's van een beeld aan te duiden. De tool is tot slot ook gratis en relatief intuïtief in gebruik.
Voorbereiding
In dit verhaal werkten we met diverse content van verschillende instellingen. Een gevolg hiervan was dat een deel van de geselecteerde content niet via de IIIF-standaarden beschikbaar was. Omdat StrollView enkel met IIIF-manifesten aan de slag kan, werden de beelden zonder IIIF-manifest aan het ecosysteem van de Vlaamse Kunstcollectie toegevoegd zodat per beeld geautomatiseerd een IIIF-manifest kon worden gegenereerd. Alle IIIF-manifesten van dit verhaal zijn te vinden op GitHub.
Beschik je niet over een eigen ecosysteem waarbinnen automatisch IIIF-manifesten gegenereerd worden, dan is een omweg mogelijk via het Internet Archive. Internet Archive voorziet immers een volwaardige IIIF service (meer hierover). Dit betekent onder meer dat je voor alle geüploade beelden een IIIF-manifest kunt genereren. Hiervoor hoef je enkel het ID van je item (BifDS-A1_60) in deze link in te voegen (https://iiif.archive.org/iiif/id/manifest.json; vervang id door het id van je item.). Let wel, de beelden die op het Internet Archive geüpload worden, kunnen hergebruikt worden door alle bezoekers van de website. Je zorgt er dus best voor dat enkel public domain beelden worden opgeladen.
Link met Github
Om de IIIF-manifesten in de tool te kunnen inladen, is een link met Github nodig. Het digitale verhaal wordt immers op Github opgeslagen. Hoe deze link precies is gelegd, is terug te vinden via deze tutorialvideo.
Inladen van de content
Nadat we een link met GitHub hebben gelegd en een nieuwe ‘Stroll’ aanmaakten, gingen we over tot het inladen van de content. Via de importfunctionaliteit (wolk met pijl omlaag) zijn de IIIF-manifesten één voor één ingeladen. Daarbij werd (de regio van/het detail van) het gewenste beeld telkens meteen voorzien van tekst en audio en toegevoegd aan de ‘Playlist’ (drie stepen met plus-teken). Het is niet mogelijk om meerdere IIIF-manifesten tegelijk te importeren.
Tekst en audio
Om het verhaal zo toegankelijk mogelijk te maken, is ervoor gekozen om het te vertellen door zowel gebruik te maken van uitgeschreven tekst als van audio. Elk stukje tekst werd via de tool play.ht automatisch naar een audiofragment omgezet. Hierbij gebruikten we de mogelijkheid van Play.ht om verschillende stemmen te selecteren. Daarnaast voegden we bij elk beeld ook metadata toe. Immers, bij IIIF-manifesten v3 werkt de info-knop van StrollView niet.
De audiofragmenten zijn onrechtstreeks toegevoegd via Google Drive. StrollView laat enkel audio toe via een audio-URL. Daarvoor werd ‘https://drive.google.com/uc?export=download&id=’ als basis-URL genomen. Daar is telkens het id-nummer van de link naar het audiofragment op Google Drive aan toegevoegd (bv. https://drive.google.com/file/d/1tuBH01IwQPGYD7Bv-kTF0f2iod0B-J6i/view?usp=drive_link).
Zorg ervoor dat je na elke toevoeging/wijziging alles opslaat én naar Github uploadt. Dat doe je respectievelijk via het disc-icoon (‘update playlist item’) en het wolkje met het +-teken (‘save stroll to Github’). Zo gaat niets verloren.
Verhaal embedden
De StrollView Player is ontwikkeld als een ‘web component’. Dit moet toelaten om het resultaat makkelijk in elke website te integreren. Hiervoor is op dit moment evenwel nog geen documentatie terug te vinden. Daardoor is deze integratie relatief technisch.
In de broncode van de website waar je het verhaal wil aan toevoegen, plak je de volgende code:
<script defer="defer" src="https://strollview.net/player/static/js/main.0350d3cd.js"></script> <link href="https://strollview.net/player/static/css/main.fa4e0179.css" rel="stylesheet"/>
<script> window.addEventListener("DOMContentLoaded", (e => { var n = window.location.href, o = new URL(n).searchParams.get("uri"); console.log(o), null === o && (o = "https://strollid.manducus.net/ReinDebrulle/5f4bedc134aac1e0e807d43881f0483e"); var t = '{\n "uri": "' + o + '" ,\n "mode": "standard",\n "viewerheight": "600px",\n "autoplay": false,\n "shownav": true,\n "showfullscreen": true,\n "showinfo": true,\n "progressbar": "squares",\n "textmode": "left",\n "textsize": "20%",\n "imgoverlay": false,\n "imgoverlayurl": "",\n "imgoverlaysize": "50%",\n "showheadings": true,\n "bgcolor": "#000",\n "hudbgcolor": "#000000",\n "hudcolor": "#ffffff",\n "hudopacity": "75"\n }', a = document.getElementById("root"), r = document.createElement("strollview-webcomponent"); r.settings = t, a.appendChild(r) })) </script>
<div id="root"> </div>
Het enige wat je in bovenvermelde code moet aanpassen, is de link naar jouw eigen verhaal. Deze vind je via de knoppen rechts onder in de StrollView Editor. Elke knop geeft op een of andere manier toegang tot de benodigde URL. De makkelijkste manier is het pagina-icoon. Dit laat toe om de URL meteen te kopiëren.
Het eindresultaat vind je hier terug.
Instructies:
- Scroll omlaag tot je een onderstreepte titel en pijltjes ziet.
- Gebruik de pijltjes om het verhaal vooruit te laten gaan.
- Is de tekst niet volledig zichtbaar, dan kan je scrollen om de rest van de tekst te kunnen lezen.
- Je kan zelf in- en uitzoomen op het beeld.
Exhibit
Om het verschil tussen gelijkaardige tools duidelijk te maken is hetzelfde verhaal ook uitgewerkt met de tool ‘Exhibit’. Hieruit bleek dat de webversie van Exhibit makkelijker is in gebruik voor niet-technisch geschoolde profielen. Het gevormde verhaal kan ook makkelijk via ‘iframe’ aan een eigen webpagina toegevoegd worden.
Tegelijk biedt deze webversie wel minder mogelijkheden. Zo kan geen externe audio worden toegevoegd en is het niet mogelijk om het beeld in de tool te bewerken. Ook het aanduiden van een specifieke regio is enkel mogelijk via StrollView.
Je gaat dus best vooraf na welke functionaliteiten je nodig hebt of belangrijk vindt voor de uitwerking van jouw verhaal. Op basis daarvan kan je kiezen voor de meest geschikte tool.
Sint-Janshospitaal
Voor de uitwerking van het derde verhaal is een beroep gedaan op de tool Annonatate. Annonatate werd gekozen omdat de tool het mogelijk maakt om eenvoudig een lineair verhaal te vertellen aan de hand van diverse annotaties. Je kan met andere woorden makkelijk onderdelen van een beeld aanduiden en hier toelichting mee verbinden. Bovendien ondersteunt de tool HTML in de annotaties, waardoor je gebruik kan maken van opgemaakte tekst, beelden, audio … Het eindresultaat is tot slot ook makkelijk via iframe in een eigen website te integreren.
Voor zij die Annonatate voor de eerste keer gebruiken en/of tegen problemen aanbotsen, is er een online handleiding voorzien. Deze geeft toelichting bij de basisfunctionaliteiten van de tool. Let wel, momenteel wordt gewerkt aan een update van de tool die het uitzicht en het gebruik grondig zal aanpassen. De handleiding en de onderstaande toelichting zijn gebaseerd op de versie voorafgaand aan de update.
Link met Github
Net als StrollView steunt Annonatate op Github voor de opslag van de annotaties en de zogenaamde ‘custom views’. Daarom is een Github-account noodzakelijk om de tool te kunnen gebruiken. De link met Github zorgt voor een automatische opslag en synchronisatie van alle toegevoegde gegevens.
Uploaden van content
Het toevoegen van beelden kan via verschillende wegen. De tool ondersteunt niet alleen een upload door het kopiëren en plakken van een IIIF-manifest-URL. Het is ook mogelijk om statische beelden toe te voegen. Deze worden dan automatisch omgezet naar een eenvoudig IIIF-manifest zodat ze, net als de eigen IIIF-manifesten, in de tool geannoteerd kunnen worden en dus deel kunnen uitmaken van een digitaal verhaal.
Toevoegen van annotaties
Nadat het beeld is opgeladen, is dit via een muisklik in de annotatie-omgeving geopend. Daarin zijn via de verschillende mogelijkheden (rectangle, polygon, freehand, ellipse, circle en angled box) details van het schilderij aangeduid. In het pop-upvenster zijn daarna telkens de uitgeschreven tekst en de beelden van de muisjes toegevoegd.
Deze toevoeging van de beelden en de opmaak van de tekst gebeurde via HTML. Concreet gaat het dan om de <img>-tag om beelden toe te voegen en verschillende tags voor tekstopmaak (<big>...</big>, <small>...</small>,<p>...</p>).
Een voorbeeld van een toegevoegde annotatie:
<small> Hey, ik ben Muis,</small>
<small> ik ben vandaag naar hier gekomen omdat ik had gehoord dat er in het hospitaal enorm veel lekker eten te vinden is. Ik ben maar met een draagstoel meegeglipt van mijn huis bij Sint Anna, dat is wel heel ver van hier... </small>
<small> Ik ben benieuwd hoe ik straks terug thuis geraak.</small>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/201108_mouse.png" width="200">
Custom view
Wanneer alle annotaties in de juiste volgorde zijn toegevoegd, kunnen deze gepresenteerd worden in een ‘custom view’. Hiervoor ga je bij ‘annotations’ op zoek naar de specifieke annotations list die je hebt opgesteld. Daar vind je een aanklikbare link (‘Build custom view for’) die je brengt naar de ‘Tag Builder’. Hier kies je in plaats van ‘image viewer’ voor ‘storyboard’. Dit kan je opslaan onder een eigen naam. Zo krijg je na enkele minuten toegang tot je eigen slideshowpresentatie.
Het is mogelijk om enkele aspecten van deze slideshowpresentatie aan te passen. Het betreft onder meer welke buttons getoond worden, de positie van het kader met de annotaties, de tijdsduur tussen verschillende annotaties bij autoplay, het al dan niet gebruiken van een automatische omzetting van tekst naar audio, enzovoort. …
Resultaat embedden
Op het annotatiemenu is een share-knop te vinden. Via deze knop kan een link opgehaald worden die toelaat om het resultaat via iframe in het Content Management System van de een eigen website te integreren. Net zoals bij het verhaal van James Ensor geldt dat verschillende websitebouwers toelaten om via deze iframe-tag of rechtstreeks via de opgehaalde link het verhaal in de website op te nemen. Het verhaal over het schilderij van Jan Beerblock is hieronder te vinden.
- Gebruik de pijltjes om naar de volgende scène te gaan.
- Is de tekst niet helemaal zichtbaar, dan kan je scrollen om de rest te lezen.
Evaluatie
Op basis van dit hele traject kunnen enkele conclusies worden getrokken met betrekking tot de mogelijkheden van IIIF(-tools) voor storytelling:
- IIIF-tools zijn voor storytelling zeker een kans, maar dan één met de nodige drempels. IIIF-tools maken het immers mogelijk om eenvoudig met behulp van IIIF-manifesten (en dus zonder upload van dikwijls zware beelden) beelden uit verschillende collecties te hergebruiken, inclusief de bijhorende metadata.
- De bestaande tools zijn relatief laagdrempelig in de basisopstelling. Het vergt dus weinig moeite om een simpel verhaal vorm te geven. Wil je echter specifieke kenmerken aanpassen en/of het verhaal in een bestaande website inpassen, dan wordt het technischer. Het is immers vaak enkel mogelijk om een default-weergave te integreren. Voor meer opties of specifieke gevallen (bv. weergave via smartphone) zijn aanpassingen nodig. Bovendien zijn sommige tools (bv. Exhibit) afhankelijk van third party cookies, wat problemen kan opleveren bij de opname van het verhaal in een bestaande website.
- Er zijn diverse gratis tools beschikbaar die verschillende mogelijkheden aanbieden. Daardoor kan je verhalen maken met uiteenlopende verhaallijnen zonder dat je daarvoor grote bedragen moet neertellen.
- Anderzijds bieden de gratis tools weinig visuele manoeuvreerruimte zodat de digitale verhalen ondanks alle inspanningen toch niet altijd intuïtief of goed gelayout aanvoelen. Wanneer verschillende tools bijvoorbeeld worden gecombineerd om meer diepgang te creëren, zoals in het verhaal over James Ensor, dan is het gecreëerde IIIF-verhalenvenster niet altijd intuïtief in gebruik.
- Tegelijk zorgt de veelheid aan tools ervoor dat je op voorhand zeer goed moet afwegen welke tool het best past bij je verhaallijn. Eigenlijk is het ook zo dat je verhaallijn in zekere zin beperkt wordt door de beschikbare tools.
- Niet alle beelden die je in een verhaal wil gebruiken, zijn beschikbaar via de IIIF-standaarden. Omdat veel IIIF-storytellingtools enkel aan de slag kunnen met IIIF-manifesten, moet je er dus rekening mee houden dat er veel werk kan kruipen in het creëren van die IIIF-manifesten.
- Sommige tools genereren IIIF-manifesten die dan door derden herbruikbaar worden. Het is daarom van belang dat je goed afweegt of de beelden wel mogen hergebruikt worden en of ze onder een juiste hergebruiklicentie worden ingezet.
Samengevat: IIIF-storytellingtools bieden je vaak gratis een mogelijkheid om aan digitale storytelling te doen. Daardoor kan iedereen snel aan de slag met beschikbare IIIF-manifesten. Maar de bestaande IIIF-storytellingtools zijn veelal basistools. Om sterk gelay-oute of intuïtief aanvoelende digitale verhalen aan te bieden ben je vaak nog altijd aangewezen op betalende dienstverleners.
Meer over IIIF
In de volgende artikels leer je meer over IIIF: