Als je doof bent, of als je om een andere reden geen geluid kunt horen, dan mis je veel informatie als je een film kijkt. Knisperende voetstappen, langzaam aanzwellende muziek, nerveus getik op een deur, je hoort het natuurlijk allemaal niet. Nu bestaat er zoiets als closed caption, wat een type ondertiteling is waarbij ook dingen als omgevingsgeluiden en de muziek beschreven worden. Hierdoor krijgt een kijker die informatie wel binnen.
Alleen wordt die auditieve informatie nogal neutraal beschreven. Het geluid van huilend persoon zou bijvoorbeeld beschreven kunnen worden als snikgeluid op de achtergrond. En iemand die lacht zou geschreven kunnen worden als iemand lacht. Heel neutraal, bijna zakelijk, en bovendien allebei in precies hetzelfde neutrale lettertype. Terwijl het toch echt over twee heel verschillende emoties gaat.
Dat kan visueel sterker.
En dat gaan jullie doen.
- Je kan de kennis over vormgeving die je hebt opgedaan tijdens de minor technisch toepassen met behulp van CSS
- Je kan verborgen nuance uit een audiotrack overtuigend vertalen naar visuele (typografische) beelden
- Je kan je typografische keuzes onderbouwen.
- Je hebt de exclusive design principles gebruikt.
Je levert een werkende versie op, gemaakt met HTML, CSS en JavaScript. Deze staat op Github. In een duidelijke readme documenteer en onderbouw je je ontwerpkeuzes. Je developmentgeschiedenis is terug te vinden op GitHub.
Je levert ook een screen recording met audio op van je fragment. Dit is een video van de definitieve versie, gemaakt van jouw browserscherm.
De beoordeling is mondeling en volgt de rubric uit het beoordelingsformulier.
Je moet een van deze twee opties kiezen, en je keuze moet je onderbouwen. In je readme staat een uitleg over je overwegingen om de ene of de andere restrictie te kiezen.
De eerste optie is dat je gebruik maakt van het zogenaamde systeemfont van degene die naar jouw werk kijkt. Dit font verschilt per operating system, en het verschilt soms zelfs per versie van het operating system. Het is ook aan te passen door de gebruiker zelf.
Je hebt dus geen controle over welk lettertype er precies gebruikt wordt. Het levert dus een onzeker, en beperkt typografisch palet op. Je hebt geen light versies, of extrabold. En ook geen serif en sans-serif versie van dezelfde familie. In dit geval heb je alleen de beschikking over normal, bold en italic. Dit heeft natuurlijk ook zijn voordelen!
Je kan er ook voor kiezen om gebruik te maken van de complete Brenner familie. Dit is een zeer uitgebreid en uiterst flexibel font. Hier kan je je verdiepen in dit font. Als je kiest voor dit font dan heb je de beschikking over een sans serif, een condensed, een serif, een monotype, een slab, een display en een script versie. En veel van deze versies hebben varianten van light tot bold, en allemaal zowel bold als italic.
Met Brenner zijn er natuurlijk veel en veel meer mogelijkheden dan met systeemfonts. Dat kan zowel een voordeel als een nadeel zijn.
Voor een overzicht, zie de brenner.pdf.
Ik heb een fragment voorbereid. Het gaat om twee scenes uit Blade Runner 2049. De captions staan in de HTML, en ze verschijnen in sync met de video. Kijk maar.
De captions staan in de html, in het bestand index.html. Je kan aan elke paragraaf eventueel een of meer classes toevoegen. Bijvoorbeeld voice1 of voice2 soft. Classes voeg je handmatig toe in de html.
Met JavaScript worden er een paar dingen extra gedaan:
- er wordt aan elke paragraaf een unieke class toegevoegd (
p0,p1, etc) - Elk woord wordt in een aparte
spangezet. Hierdoor kan je elk woord apart stylen, en eventueel ook na elkaar laten verschijnen.
Tijdens het afspeelen wordt er een class on op de caption gezet als hij moet verschijnen, en een class off als hij klaar is. Zowel class on als class off blijft op de caption staan!
De timimg van de captions kan je aanpassen in closed-captions/captions.js.
Er verschijnen ook classes op de body op momenten dat er geluiden worden afgespeeld, zoals sound1 en sound2. Je kan geluiden toevoegen in closed-captions/sounds.js.
let op, de geluiden zijn niet compleet, dit zal je zelf moeten aanvullen.
Je kan er ook voor kiezen om een eigen, beter fragment te gebruiken. Dit wordt afgeraden. De tijd die je besteedt aan het zoeken naar dat fragment kan je beter besteden aan het werken aan de opdracht. Bovendien blijkt dat er vaak fragmenten worden gekozen die niet goed voldoen aan de opdracht. Als je een ander fragment kiest dan moet je dit goed onderbouwd voorleggen aan je docent. De deadline hiervoor is vrijdagochtend in de eerste week.
Lees de opdracht nog eens goed door. Waar gaat het ook al weer precies om?
Voor een goede onderbouwing van je keuze voor een ander fragment moet je deze vragen in elk geval beantwoorden:
- Welke informatie zit er in de audio die echt niet zichtbaar is?
- Welke rol speelt de audio in het fragment?
- Werkt de scene nog zonder geluid?
- Waarom is dit fragment beter dan het aangeboden fragment?
Je kan dan de nodige HTML en JavaScript genereren door gebruik te maken van caption generator (in Google Chrome).
Als je de closed captions wil bewerken dan kan je een tool zoals Amber Script gebruiken. Daar kan je exporteren als .srt, en die kan je weer door de generator halen.