Copyright©Popcorn

On se devait de tester cette remarquable bibliothèque javascript et au moins d’approcher les quelques fondamentaux qu’elle promeut et les libertés qu’elle promet. C’est chose faite ! Certes, nous avons à 3WDOC, fait un survol rapide mais néanmoins attentif de son potentiel notamment parce par sa seule existence et son dynamisme, Popcorn légitime deux choses :

• L’usage de l’HTML5 et de jQuery pour réaliser une narration enrichie et interactive
• Cette framework écrit déjà de très belles pages du Web en consacrant la multiplicité des narrations numériques en s’appuyant sur les qualités propres au web que sont : l’agrégation au détriment de la recherche, la recommandation et le partage.

Sur ce blog, nous avons fait l’éloge de quelques-unes des productions rendues possibles par PopCorn.

La définition de PopCorn

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

Bon mais assez discuté, voyons dès maintenant ce que le framework PopCorn a dans le citron numérique. Un aspect a particulièrement retenu notre attention. Car, dans tout projet Open Source qui se respecte, il est possible de développer des fonctionnalités additionnelles sous la forme de plugin. On retrouve la filiation revendiqué de PopCorn avec jQuery.

Pourquoi cet aspect plutôt qu’un autre ?
Cet aspect permet d’apprécier deux choses :

• Tous les ingrédients de contenu auxquelles les internautes comme les créateurs souhaitent avoir accès. Les internautes pour s’informer, interagir… Les créateurs pour en disposer au sein de leur création comme un levier de narration. Les besoins comme les utilisations sont donc infinis, puisque chaque nouvelle forme d’expression ou de contenu présent sur le web peut être agrégé via un plugin comme source potentiel de contenu.
• Le mode d’ingestion de ces nouvelles informations. Le soin est donné à la communauté de développeurs de favoriser la mise à disposition de ce contenu spécifique via un plugin. L’expansion de PopCorn comme framework est donc permanente. Cette expansion est l’expression même de la culture commune qui nait entre le monde du développement, du web et de la création audiovisuelle.

C’est en substance, ce que dit le texte publié sur le site officiel de Popcorn.

Popcorn.js can be used with almost any media type you can imagine, from HTML5 audio and video, to YouTube and Vimeo, to SoundCloud, etc. Popcorn.js also has plugins to allow content from popular web sites and services to be integrated easily, for example, Wikipedia, Twitter, Facebook, Google Maps, etc.

Anything you can do on the web can be turned into a Popcorn.js plugin, and become part of a timeline-based web experience. Popcorn.js breaks video out of the box and allows media to fully interact with the rest of the web.

Test des plugins les plus significatifs

On va faire un essai sur les plugins les plus significatifs pour récupérer de plate-forme tierce de publication genre facebook, twitter ou intégrer un feed RSS.

La configuration est assez aisée puisqu’il suffit de remplir avec vos propres paramètres afin d’accéder à votre page facebook, à votre page twitter ou enfin au feed RSS de votre blog par exemple.

Extrait du plugin facebook

	.facebook({
		href: "http://www.facebook.com/3wdoc",
      type: "FACEPILE",
      target: "facepilediv",
      width: 300,
      start: 10,
      end: 15
    })

Extrait du plugin googlefeed

.googlefeed({
    start: 0,
    end: 15,
    target: "feed",
	url: "http://blog.3wdoc.com/fr/feed/",
    title: "3WDOC",
    orientation: "Vertical"
  })

Extrait complet du plugin twitter

 
<script>
    document.addEventListener( "DOMContentLoaded", function() {
      var p = Popcorn( "#video" )
      .twitter({
        start: 5,
        end: 15,
        title: "3wdoc",
        src: "@3wdoc",
        target: "twitterdiv",
      })
      .twitter({
        start: 20,
        end: 45,
        title: "webdoc",
        src: "#webdoc",
        target: "twitterdiv"
      })
      .play();
    }, false);
  </script>

Dans ce dernier exemple de plugin, comme dans un plugin jQuery, le plugin PopCorn va attacher à la video #video, un événement en l’ occurrence l’affichage du feed twitter de 3WDOC puis ensuite une recherche sur le mot #webdoc

Pour aller plus loin

• Popcorn.js | The HTML5 Media Framework
  http://popcornjs.org/
• Les Plugins Popcorn
  http://popcornjs.org/creating-plugins
• Présentation de la librairie
  http://mozillapopcorn.org/popcornjs/

Copyright © ONE MILLIONth TOWER

On peut souvent reprocher aux webdocumentaires un déséquilibre entre le fond et la forme. Déséquilibre qui oscille entre deux écueils que l’on pourrait ainsi résumer : d’un côté une surabondance de contenus couplée à une interactivité quasi-inexistante, de l’autre un objet truffé d’effets « Ouah » mais doublée d’un contenu famélique. Eh bien, le moins que l’on puisse dire c’est que cette dernière production, qui nous vient du Canada, « ONE MILLIONth TOWER » de Katerina Cizek, Mike Robbins + friends échappe à ces deux écueils. Mieux, ce webdocumentaire réussit une prouesse technologique hors-norme faite en HTML5, sur laquelle nous reviendrons plus loin dans l’article et cette prouesse technologique se marie admirablement bien avec le point de vue développé par les auteurs.

Des tours et des hommes

Le propos est simple, l’urbanisation croissante de l’humanité, a produit des monstruosités architecturales, des tours dans d’immenses cités dortoirs, que l’on est bien en peine de réhabiliter. De ce constat accablant, « ONE MILLIONth TOWER » fait une proposition simple : pourquoi les habitants eux-mêmes de ces ensembles ne sont-ils pas consultés pour se réapproprier cet espace urbain afin de proposer des solutions et des améliorations. C’est tout le propos du webdoc qui nous plonge dans une douce utopie où par la magie de la collaboration entre des architectes, les habitants et les concepteurs du projet fleurissent au propre comme au figuré ici des jardins, là un espace de jeu…

C’est une manière tout à fait innovante et créative d’aborder des problématiques qui touchent globalement tous les grands centres urbains. L’expérience est menée dans le grand Toronto, mais elle pourrait être tout à fait menée ailleurs.

En effet, toutes ces tours construites sur le même modèle produisent généralement les mêmes effets, souvent désastreux en terme d’urbanisme : absence de centralité (en gros pas de centre-ville), impossibilité de décrypter les relations urbaines, continuité monotone du bâti à l’image d’une cité soviétique. En clair personne ne sait dans ces ensembles à quel moment on est dans une rue, où commence et où finit l’espace social. On y retrouve les mêmes travers qui nuisent considérablement à la vie des habitants : la monumentalité des bâtiments, une répétition des formes architecturales, l’absence de mixité typologique au niveau des bâties comme disent les urbanistes et de repaires géographiques produit cette sensation d’habiter au milieu d’un « no man’s land » où les tours semblent posés sans considération pour les habitants et leur vie sociale.

Ajouter à cela : la paupérisation de ces quartiers, l’inexistence de transports, de commerces et/ou d’équipements et on obtient une image fidèle d’une situation explosive et dégradée propre à ces ensembles à travers le monde.

Plus proche de nous, l’approche de ce webdoc n’est pas sans rappeler celle de l’architecte Patrick Bouchain qui affirme dans de nombreuses interviews qu’il faut construire ensemble pour habiter ensemble. Cette démarche passe selon lui par une écoute de la demande des habitants. CQFD.

Au-delà des enseignements urbanistiques à retenir de ce webdoc, nous y voyons aussi chez 3WDOC, deux enseignements technologiques majeurs pour l’avenir du HTML5. Quels sont-ils ?

Un vent mauvais pour AIR

L’un des enseignements dépasse largement le cadre même de ce webdoc, l’autre est intimement lié à la réalisation de cet « interactive documentary experiment » comme le nomme leurs auteurs.

1. L’arrêt du support de Flash sur mobile au bénéfice de HTML5 : On ne va pas épiloguer sur la disparition annoncée de la technologie Flash. Disparition entérinée par Adobe lui-même, qui ainsi va pouvoir mieux se concentrer sur une exploitation en SAAS de sa gamme de logiciels. Le web bruisse de l’annonce faite par Adobe de ne plus assurer le support de Flash Player pour les navigateurs disponibles sur mobiles. L’anathème de feu Steve Jobs semble continuer de faire des ravages.
2. Le duo gagnant HTML5 + WebGL dans l’animation et l’interaction : Ce webdoc ONE MILLIONth TOWER montre enfin que la combinaison HTML5 WebGL grignote le pré carré de de la technologie Adobe à savoir les effets de pointe graphiques et interactifs que jusqu’à présent seule la technologie d’Adobe était en mesure d’opérer. A ce titre, on vous invite à découvrir d’autres expériences menées en HTML5 + WebGL tel que le bluffant ROME (www.ro.me)

La présentation du projet ONE MILLIONth TOWER

ABOUT ONE MILLIONth TOWER

The highrise re-imagined.

One Millionth Tower re-imagines a universal thread of our global urban fabric — the dilapidated highrise neighbourhood. More than one billion of us live in vertical homes, most of which are falling into disrepair. Highrise residents, together with architects, re-envision their vertical neighbourhood, and animators and web programmers bring their sketches to life in this documentary for the contemporary web browser.

The result of this unique collaboration is a lush visual story unfolding in a 3D virtual environment. Visitors explore how participatory urban design can transform spaces, places and minds.

One Millionth Tower is “hyper-local” documentary. It’s hyper-local because it’s grounded in a particular community — a highrise on Kipling Avenue in suburban Toronto, Canada — where the HIGHRISE team has worked with residents for over two years. The project is a concrete result of a community collaboration between residents, architects, documentarians and animators to re-imagine the particular spaces around these particular highrises.

Yet it’s hyper-lobal, because so many of the hallmark problems that these residents face are found in highrise communities around the globe: deteriorating buildings; physical and cultural separation from the downtown core; poor access to social services and commerce; poor public transit and long-distance commutes, resulting in a reliance on cars and long travel times; little or no community play space for children; as well as no community space and fabric between the residential buildings themselves. One Millionth Tower suggests these problems can be solved — it just takes some imagination.

Additional Features include:

a behind-the-scenes documentary about the collaborative process
a short documentary featuring international examples of tower revitalization
a short documentary exploring the open technology used to create the project
and a spectacular interactive feature that takes you to highrise neighbourhoods in more than 200 countries in the world, thanks to Google Streetview and satellite imagery. It’s based on our own original research to find and understand highrise communities around the globe.
One Millionth Tower is a story with global implications about how, with the power of imagination, we can transform the urban and virtual spaces that belong to all of us.

One Millionth Tower is one of the world’s first HTML5/webGL documentaries.

Toronto, Canada

Pour aller plus loin

• Le webdocumentaire NFB – One Millionth Tower
  http://highrise.nfb.ca/onemillionthtower/
• Popcorn.js | The HTML5 Media Framework
  http://popcornjs.org/
• Quelques expériences WebGL
  http://www.chromeexperiments.com/webgl
• La tentative de Mike Robbins de Helios Design Labs (http://www.heliozilla.com/), un des concepteurs à l’origine de ONE MILLIONth TOWER
  http://www.chromeexperiments.com/detail/highrise-one-millionth-tower/?f=webgl
• La page wikipedia de Patrick Bouchain
  http://fr.wikipedia.org/wiki/Patrick_Bouchain
• Construire autrement avec Patrick Bouchain
  http://www.metropolitiques.eu/Construire-autrement-avec-Patrick.html
• No Flash? No problem
  http://www.zdnet.com/news/no-flash-no-problem/6329650
• Google Swiffy, où quand Google vient à la rescousse d’Adobe.
  http://www.google.com/doubleclick/studio/swiffy/
• ROME « 3 Dreams of Black », a new an interactive film by Chris Milk. With music from the album « Rome » by Danger Mouse, Daniele Luppi, featuring Jack White and Norah Jones.
  http://www.ro.me/tech/

Copyright© arte.tv

Arte adopte pour sa dernière production le framework javascript PopCorn afin de profiter pleinement des avancées du HTML5, le contact avec ONF a sans doute été fructueux. A la manœuvre comme toujours pour cette réalisation impeccable, Upian. Pour l’anecdote, c’est même l’un des développeurs d’Upian qui nous a signalé cette réalisation « Notre poison quotidien » que nous n’avons pas mentionné lors de notre précédent article ! Par le présent article, nous réparons cet oubli et nous sommes donc allés faire un tour sur le site de « Notre poison quotidien ».

Pour ceux d’entre vous qui ont vu le documentaire, le sujet est des plus anxiogène… et paradoxalement le site est étonnamment rafraîchissant. Ce dernier est abondamment fourni en informations et profite pleinement du potentiel offert par les plugins PopCorn !

La démo « Notre poison quotidien »

Record d’audience à la télévision pour un documentaire en prime time, avec 1 251 000 téléspectateurs soit 4,8% de part de marché.
Le programme réalise également d’excellentes performances sur le site d’ARTE. Mis en ligne le 1er mars, le dossier web a généré à ce jour près de 135 000 visites et 225 000 pages vues en France et en Allemagne. Un score sept fois supérieur à la moyenne habituelle des contenus web consacrés aux programmes de société et d’investigation. (cf article Mediaterre).

Ce succès est sans doute du à l’envie des internautes de prolonger leur visionnage sur l’écran de télévision vers un contenu interactif et enrichi sur le web.

La démo est très bien réalisée. Les plugins de Popcorn JS : Google News, Wikipédia et Twitter sont actualisés avec le propos de la vidéo. L’interface est sobre et laisse toute la place à l’information.

Mozilla et le projet Web made movies

Mozilla a créé le projet « Web made movies » qui est un laboratoire ouvert de vidéo en collaboration avec les développeurs de l’ONF. Il consiste à développer des framework pour créer de la vidéo augmentée sur le web.

Partnering with the National Film Board of Canada
As mentioned on their blog, we have joined a partnership with the NFB’s Platform Development team to investigate ways HTML5 can help add value to their rich catalogue of films from the last 75 years.

Quant à 3WDOC…

Nous sommes contents de voir que les projets avancent en terme de HTML5 dans le monde du webdocumentaire. L’un des acteurs majeurs du webdocumentaire en France, Upian, se lance donc sur cette voie en suivant le projet de développement lancé par l’ONF. Chez 3WDOC, on ne peut que se féliciter de cette engouement pour le HTML5 et continuer de croire en notre projet. Des nouvelles démos vont d’ailleurs bientôt arriver sur notre site…

Tous les éléments disponibles dans cet article sont visibles sur le site de – http://notre-poison-quotidien.arte.tv/fr/

Les droits de propriété intellectuelle sur l’ensemble des éléments (animations, photographies, illustrations, images, textes, recettes, fiches techniques, musiques etc…) composant les éléments de cet article sont la propriété exclusive de leurs auteurs.

Pour aller plus loin

• Notre poison quotidien
  Notre poison quotidien
• Le site PopCornjs
  http://popcornjs.org/
• Les audiences de « Notre poison quotidien »
  http://www.mediaterre.org/europe/
• Explication du projet Arte et Mozilla
  Arte adopts Mozilla’s popcorn.js
• Le projet Web Made Movies sur le blog de l’ONF
  The NFB and Mozilla to undertake joint exploration of HTML5

Copyright©ONF

Le monde du HTML5 et des expérimentations dans le domaine du webdocumentaire est riche de bonnes nouvelles. Comme souvent, dans le domaine du web et du multimédia, ces bonnes nouvelles nous viennent du Canada et plus spécifiquement de l’ONF (Office national du film du Canada).
Puisque, ONF ouvre deux chantiers, l’un technologique avec Mozilla et l’autre, plus éditorial, avec Arte dans le domaine de la production de webdocumentaires.

1. Mozilla et l’ONF s’allient pour tenter des expérimentations en HTML5
2. ONF et ARTE lancent un cycle de coproduction de documentaires à destination des nouveaux médias comme on dit ! Le premier projet de cette collaboration se nomme Code barre, un vrai nom de code donc…

C’est un peu comme si, en France, le CNC décidait de s’allier avec Mozilla Europe pour tenter des expériences en HTML5 !

Le projet ONF en HTML5

Rapidement, ce projet ONF Mozilla s’agrège autour d’un grand nombre d’acteurs internationaux du Web, en témoigne cette extrait tiré directement du blog de l’ONF.

Ce projet a une portée internationale. Il unit les forces de Mozilla, c’est-à-dire : le producteur et réalisateur Brett Gaylor (RiP : remix manifesto) et son projet Web Made Movies, des étudiants du collège Seneca de Toronto, des développeurs de Bocoup, des développeurs de la compagnie espagnole A navalla suiza et, bien entendu, l’équipe de développement de l’ONF.

Plus spécifiquement, dans le projet ONF HTML5, on retrouve les partenaires ci-dessous parmi lesquels il y a d’évidence des experts pour chaque domaine propre à la création d’objets multimédias interactifs notamment en javascript via la librairie JavaScript Popcorn.

• Bocoup, http://bocoup.com/
• A navalla suiza, http://anavallasuiza.com/
• Brett Gaylor, http://twitter.com/remixmanifesto
• Le Seneca College de Toronto, Canada, http://www.senecac.on.ca/

Et… le projet 3WDOC dans tout cela !

On ne désespère pas de vous surprendre avec notre projet en HTML5, basé sur JQuery nommé 3WDOC Studio. Cette web application, on l’a dit, permettra de raconter des histoires interactives directement sur le web. Nous aussi nous avons bien parlé avec Tristan Nitot, mais bon l’homme, comme on l’a dit plus haut, est accaparé par la lancement de Firefox 4. On ne désespère pas non plus de faire quelques chose en ce sens. En témoigne, le nombre de vidéos disponibles sur le web où Tristan Nitot parle avec gourmandise et enthousiasme de ce bébé collectif qu’est le nouveau Firefox 4. Tristan Nitot est un homme pressé et on lui souhaite bonne chance pour le lancement de Firefox 4 dont on se félicite ici à 3WDOC. Quoiqu’il arrive, on s’emploiera à ce que notre future web application 3WDOC Studio soit disponible comme application dans le futur Firefox Web Store comme dans le Google Chrome webstore.

Ah, oui, il y a aussi Wallaby, une application AIR, de chez Adobe, qui permet d’exporter des animations Flash en HTML5. A suivre, c’est un début mais la version proposée actuellement est plutôt tournée vers les utilisateurs les plus aguerris, dont nous faisons aussi parti chez 3WDOC en regard de nos heures sous Flash et c’est aussi un appel du pied d’Adobe en direction de Apple du genre enterrons la hache de guerre !

Une liste compléte des avantages de Firefox 4, éloquent, en français

Cliquer ici pour voir la vidéo.

En anglais, sur un point technique, l’accélération matériel

Cliquer ici pour voir la vidéo.

Un extrait du code source des pages de l’ONF, un clin d’oeil de l’équipe

	<!--
	   _____
	  / ___ \
	 / / _ \ \
	 \ \(_)/ /
	  \_   _/
	   |   |   Equipe web ONF /
	   |_|_|   NFB web team  / 2008-2011
	   =====
	-->

Pour aller plus loin

• Le blog ONF sur la coproduction avec Arte
  http://blogue.onf.ca/2011/03/08/onf-arte-coproduction-documentaires-web-inedite/
• le blog ONF qui annonce la collaboration avec Mozilla
  http://blogue.onf.ca/2011/03/01/lonf-et-mozilla-sunissent-pour-explorer-le-html5/
• Office national du film du Canada / National Film Board of Canada
  http://www.onf.ca/
• Chrome Web Store – Apps, Extensions and Themes
  https://chrome.google.com/webstore
• CNC (Centre National de la Cinématographie )
  http://www.cnc.fr/
• La « Release Candidate » de Firefox 4
  http://www.mozilla.com/fr/firefox/RC/
• CNC (Centre National de la Cinématographie )
  http://www.mozilla.com/fr/firefox/RC/
• Convert Adobe Flash FLA files into HTML and reach more devices
  http://labs.adobe.com/technologies/wallaby/
• Le site officiel de la librairie Popcorn.js, an HTML5 Video Framework
  http://popcornjs.org/