In maart 2021 besloot de organisatie achter het Breda Jazz Festival dit jaar geen fysiek evenement te organiseren in de binnenstad van Breda. De perspectieven rondom het coronavirus, en mogelijk versoepelingen in de maatregels gaven niet voldoende zekerheid dat het festival kon plaatsvinden.
Als vrijwilliger bij het festival meldde ik mij aan bij de werkgroep DigiJazz om te inventariseren of we een digitale editie zouden konden organiseren, en in welke vorm dit dan zou plaatsvinden.
Na een brainstorm-sessie werden een aantal onderwerpen geselecteerd om verder uit te werken. Deze uitgewerkte onderwerpen zouden dan later beoordeeld worden en in programma worden opgenomen.
Deze onderwerpen waren onder andere: LiveStreams, Terugblikken op 50 jaar festival, PubQuiz, Digitale tentoonstellint en (digitale-)krant.
De vrijwilligers werden vervolgens, wanneer ze een bijdrage aan deze editie konden en wilden leveren, verdeeld over werkgroepen naar keuze.
Tijdens de brainstorm-sessie werd geopperd om een online-tentoonstelling te maken. Deze tentoonstelling zou een interactive pagina moeten worden, welke naast de krant en digi-krant voornamelijk zou terugblikken op oude edities, het ontstaan van het Breda Jazz Festival en andere nuttige informatie voor bezoekers.
Leuk idee, maar kan het eigenlijk wel?
Voor deze interactive tentoonstelling kwam de werkgroep met het idee de kaart van de binnestad van Breda te gebruiken met daarop de verschillende podia van het festival.
De door het festival aangeleverde kaart betrof een SVG-bestand1 waarbij verschillende podia, fietsenstallingen en andere belangrijke elementen voor het bestaande festival stonden aangegeven. Het voordeel van een SVG-bestand is dat de verschillende onderdelen uit het bestand veranderd kunnen worden door middel van scripts en elementen kunnen linken naar acties. Omdat het bestand schaalbaar kan zonder kwaliteisverlies de afbeelding worden gebruikt op desktops en smartphones. De bestandsgrootte van SVG's is ook kleiner dan bijvoorbeeld JPG afbeeldingen.
Ik ontwikkelde een Proof of Concept2 waarbij als er op een podium geklikt werd een venster in de site geopent werd waar informatie op de kaart gelinkt werden aan welke met succes werd ontvangen.
1 SVG: Scalable Vector Graphics is een op XML gebaseerd bestandsformaat voor statische en dynamische vectorafbeeldingen.
2 PoC / Proof of Concept: een voorbeeld van het product waarmee haalbaarheid van concept, theorie en techniek getoetst wordt)
Een werkend PoC, hoe nu verder?
Nadat de Proof of Concept werd goedgekeurd en het eindproduct werd opgenomen in het voorgenomen programma van het Breda Jazz Festival, kon er worden gedacht aan invulling van de website. Terwijl de andere teamleden zich met name op de content (teksten en afbeeldingen) van de site focusten, werkte ik de website verder uit tot een template waarin de teksten geplaatst konden worden. Elke nieuwe versie werd geupload, en bekeken door de werkgroep. Tijdens de ontwikkeling werden nieuwe functionaliteiten toegevoegd, en verdwenen functionaliteiten welke naar waarschijnlijkheid geen gebruik gemaakt van zal worden.
Tevens werd er al nagedacht over hoe deze website ook later uitgebreid kan worden met handige functionaliteiten tijdens een fysiek festival.
Van site naar Progressive Web App
Nadat de functionaliteit van de website uitgewerkt was en de content geschreven werd door andere vrijwilligers ben ik gaan kijken hoe we dit concept toekomst-proof konden maken. Omdat de UX3 van de website aanvoelt als een App, werd besloten de website zo in te richten dat deze ook als App geinstalleerd kan worden op een telefoon of laptop.
Door de site te ontwikkelen als een Progressive Web App (PWA) kan deze op apparaten zowel als mobiele app als website gebruikt worden. Voorheen was er een groot verschil tussen web en app oplossingen, maar de PWA biedt nu een sterke mix tussen een website en een native mobiele app.
3 UX: User Experience, ofwel 'gebruikerservaring'.
Deze online tentoonstelling van het Breda Jazz Festival maakt gebruik van de volgende voordelen van PWA:
Functionaliteiten van web èn app
De PWA kan als app en website gebruikt worden. Dit betekent dat de functionaliteiten de website en app exact het zelfde zijn.
Geen app installatie via Google Play Store of Apple AppStore
PWA’s zijn via de browser beschikbaar en hoeven dus niet via een app store geïnstalleerd te worden. De gebruiker krijgt zijn device een melding* dat de website ook als app te installeren is vanuit de browser.
* Momenteel ondersteunt Android/Chrome dit alleen. Middels een extra dialoog kan ook een apple gebruiker hiervan op de hoogte worden gebracht.
Zichtbaar als app icoon
Wanneer de PWA geinstalleerd is als app, is deze beschikbaar vanuit het start-menu, home-screen of app-menu in de browser.
Offline gebruik
De PWA is zo ingericht dat deze offline kan worden gebruikt.
Ook een website of PWA?
Heb je een idee voor een website of app, maar lukt het je niet om deze te realiseren? Of wil weten of van jouw website ook een PWA gemaakt kan worden?
Stuur mij een mail of whatsapp, dan kijken we samen of je jouw concept tot een hoger niveau kunnen brengen.
De taak van de werkgroep Live-streams was voornamelijk het inrichten van de livestream. Omdat voorafgaand aan de live-streams eerst de programmaraad samen met Ronald Kompier Producties het programma voor deze digitale editie moesten samenstellen kon deze werkgroep tijdens de laatste weken voor het festival aan het werk. Onder de werkzaamheden vielen onder andere het verzamelen van materiaal, aansturen van andere werkgroepen en het maken van de draaiboeken.
In het programma werd een mix tussen live-optredens en oude-beelden opgenomen. Deze oude beelden werden door Roland Kompier en de programmaraad gezelecteerd en waarnodig gedigitaliseerd. Omdat de kwaliteit van deze beelden lager was dan verwacht, werd besloten een extra werkgroep in het leven te roepen welke deze beelden gereed kon maken voor de live-streams. Zie Werkgroep Montages
Vormgeving
Omdat deze digitale editie de eerste digitale editie is van het digitale festival was er nog geen vormgeving beschikbaar voor het festival. Samen met de Werkgroep Montages werden er meerdere voorbeelden uitgewerkt. Daarbij werd gekeken naar herbruikbaarheid, leesbaarheid en toepasbaarheid.
Voor de live-uitzedingen en compilatievideo's werden animaties gemaakt welke gebruikt konden worden. Denk daarbij aan LowerThirds, Logo-animaties en aftitelingen. Omdat de bestanden live tijdens de uitzending over de video geplaatst werden, werd er gebruik gemaakt van ChromaKey-ing.
De studio
De Avenue in Breda werd geselecteerd als studio voor de opnames en live-programering. De studio's welke de Avenue in gebruik heeft genomen tijdens de pandemie leende zich daar uitstekend voor. De studio met het moderne uiterlijk werd geselecteerd voor o.a. de officiele opening en de pub-quiz. De 2e studio werd ingericht als podium van waar de uitgezonden werden. Verder werd er gebruik gemaakt van een kleine bar-opstelling nabij de 2e studio vanuit waar onder andere een lezing werd gegeven maar ook de dag-afsluitingen plaatsvonden.
De opening van het Breda Jazz Festival
Tijdens een normale opening van het festival op de Grote Markt van Breda wordt traditioneel gebruik gemaakt van confetti. Omdat deze editie van het festival digitaal plaatsvond werd er gekozen om digitaal confetti in de livestream te gebruiken.
Deze digitale confetti is een web-pagina welke in de stream als overlay werd geplaats. De confetti-animatie is een simpele javascript en css animatie waardoor de uitzend straat niet te veel resources nodig had voor deze overlay.
De confetti in Breda Jazz Festival kleuren is hier te vinden, of bekijk hier confetti met algemene kleuren.
De programmaraad van het festival selecteerde beelden voor de compilaties. Deze beelden bleken echter niet allemaal direct uitzendbaar te zijn in de livestreams. De beelden moesten in sommige gevallen worden gestabiliseerd, ingekort en de audio moest worden genormaliseerd. De Werkgroep Monstages werd in het leven geroepen om deze beelden gereed te maken.
Tijdens het festival was deze werkgroep ook in de studio in diensten aanwezig voor de nodige hand- en spandiensten. Daarnaast moesten de beelden welke in het programma later nog in de herhaling kwamen ook gereed worden gemaakt.
Het Breda Jazz Festival werd live uitgezonden op BredaNu Tv, Facebook en YouTube. Alle streams zijn terug te kijken via het YouTube kanaal van het festival of klik hieronder op een van de thumbnails.
