Tag Archive | vpro

NTR/VPRO: Ondersteboven – Nederland in de jaren 60

image

De NTR en de VPRO behandelden eerst De Gouden Eeuw in een uitgebreide geschiedenisserie, toen De IJzeren Eeuw en nu is het tijd voor de roerige jaren 60. Vanwaar die sprong in eeuwen? De redactie had wel weer eens zin in bewegend beeld. En welk beeld beweegt nou meer dan het beeldmateriaal uit de bewegende jaren 60?

De serie wordt vergezeld door een op zichzelf staand interactief videomuseum, een boek en een historische Zapp comedy. Dus wat je favoriete medium ook is, ook jij kunt na deze serie de show stelen op verjaardagen en partijen als jaren 60 expert. PS dat interactieve videomuseum mochten wij bouwen.

Persviewing

image

Twee weken geleden hadden wij de eer om bij de persviewing van Ondersteboven aanwezig te zijn. Daar werd niet alleen het online videomuseum gepresenteerd, maar ook de televisieserie en het boek. De geschiedenisserie start 19 maart op NPO2, duurt acht weken en gaat over hoe in de jaren 60 Nederland compleet ondersteboven werd gekeerd en voorgoed veranderde: “Minder naar de kerk, meer naar school, minder werken en meer seks”.

Alles wordt beschouwd door niemand minder dan Kees van Kooten. We hebben al wat fragmenten mogen bekijken, live geïntroduceerd door Van Kooten zelf. We kunnen je daarom beloven: deze serie wordt er eentje die je echt niet wilt missen. Het boek komt ook 19 maart uit en later in het jaar de historische comedy op Zapp.

Interactief videomuseum

image

Een beetje serie heeft natuurlijk ook een interactieve online variant. Daarom mochten we dit jaar weer samenwerken met onze favoriete vijfde turtle: historicus en story designer Lyangelo. Dit jaar had hij voor zijn verhalen geen online tijdschrift in zijn hoofd, maar een online interactief videomuseum. En dan vooral eentje die geheel op zichzelf staat: “want het internet, dat is inmiddels wel volwassen”.

Het museum heeft dus een eigen redactie, vertelt een eigen verhaal en omdat je nooit genoeg kunt hebben van de jaren 60 biedt het andere beelden dan de televisieserie. Er zijn acht curatoren gekozen die aan de hand van acht thema’s hun eigen verhaal over de jaren 60 hebben gemaakt. Aan Egbert Jan Weeber om ze in acht tours te vertellen. Zo sluit het dus mooi aan bij het anekdotische karakter van de serie op tv en het gevoel van tours in een fysiek museum.

Techniek

image

Marcel, Jeroen, Richard, Silvy en Chris hebben het videomuseum en de website gebouwd. Voor het inzoomen, de navigatie, points of interest, vrij verkennen en tours hebben we Micrio gebruikt. Richard heeft de motion engineering gedaan en daarbij extra goed op de flow van de app gelet. Dit zorgt ervoor dat alle animaties, overgangen en fades extra fijn aanvoelen. Door het als een webapp te programmeren hebben we de website minimaal op kunnen zetten, is het dus volledig responsive en werkt het precies hetzelfde (zonder aanpassingen) ook lekker op je smartphone. We hebben drie libraries gebruikt: Micrio voor het videomuseum, Swiper voor de carousels op de landingspagina en Marked.js voor alle markdown tekst die in het CMS kan worden ingevoerd. De nerdstats: we hebben maar 18KB JavaScript en 31KB CSS (stylus) geschreven, hosten alles op Azure en we hebben geen frameworks gebruikt. Het design is gedaan door Judith van der Velden en Richard Overboom van Random.nu.

Op de tv-serie moet je nog even wachten. Gelukkig kun je je vanaf nu wél alvast verliezen in het interactieve videomuseum. Op zoek naar die easter egg!

https://player.vimeo.com/video/156843630?title=0&byline=0&portrait=0
Advertisements

VPRO: De IJzeren Eeuw

image

Popcorn gepopt? Onesie aan? Mooi, want net als jij zitten wij klaar voor de allereerste televisie aflevering van de geschiedenisserie De IJzeren Eeuw van de VPRO. 21.05 uur op NPO2. Goed moment om het even te hebben over het ijzersterke (pun intended) online magazine wat we voor deze serie bouwden.

Online magazine

Na afloop van deze televisieserie is iedereen expert in De IJzeren Eeuw, want daarnaast kun je ook ons online magazine lezen, naar de tentoonstelling in het Amsterdam Museum, het boek lezen en vanaf september de jeugdserie bekijken. Al deze aandacht heeft als doel om de industriële revolutie te belichten. Gedurende de serie brengt dit magazine zes edities met eigen thema’s uit om verschillende aspecten van de eeuw uit te lichten. Dus kom vooral ook terug!

image

Stereo afbeeldingen

We hadden het genoegen om samen met Lyangelo aan het magazine te werken, of beter: de vijfde turtle zoals we hem liefkozend noemen. Energieke gast met een passie voor alles geschiedenis en een vat vol goede ideeën. Hij wist precies hoe hij De IJzeren Eeuw online wilde vertellen. Een onderdeel van het vertellen zou ‘3D stereofoto’s’ moeten worden en dat is heel vet gelukt. Door middel van CSS faden we twee verschillende foto’s over elkaar in en uit. Dat zorgt voor een vet 3D effect en brengt de 19e eeuw tot leven. Kijk maar.

image

Techniek

De uitdaging was om het ontwerp wat goed werkt voor een papieren tijdschrift te vertalen naar een online volledig responsive magazine. De uitvoering is daarom een statische en dus snelle site geworden, maar compleet flexibel in gebruik voor de redactie door een custom gebouwde CMS editor. De hele backend is gebouwd in Ruby on Rails. De custom CMS editor zorgt ervoor dat de redactie elk component kan plaatsen waar ze dat maar willen: video, foto’s, 3D stereofoto’s, galleries, tekst, audio en ga zo maar door. Door elkaar, onder elkaar, boven elkaar of in elkaar. Wat ze voor ogen hebben, kunnen ze realiseren. Wel zo handig, want wat het magazine zo sterk maakt is de gave content en de mooie verhalen over De IJzeren Eeuw. Die wil je dus kunnen presenteren precies zoals je dat zelf het liefste ziet. En dat is gelukt.

Custom CMS editor

JasperH bouwde de custom CMS editor met een Rails admin toevoeging. Het is een plug-in die JSON uitblaft. Geïnteresseerd? Hou ons dan goed in de gaten, want binnenkort releasen we het, zodat jij het ook kunt gebruiken! Lief of lief?

Je hebt nog even tot de aflevering vanavond, genoeg tijd om door de eerste editie van het online magazine te bladeren!