Copyright © zygotebody.com

On avait déjà évoqué dans ce blog les promesses évidentes qu’offraient le tandem HTML5 + WebGL pour la production de webdoc ou d’expériences interactives enrichies notamment en commentant le stupéfiant « ONE MILLIONth TOWER » de Katerina Cizek, Mike Robbins + friends ou en visionnant l’excellente production ro.me. En voici donc une autre tout aussi étonnante Zygote Body, qui présente les différentes couches qui composent un corps humain (ossature, terminaisons nerveuses, organes…etc). Vous avez le choix entre un homme et une femme, puis vous descendez la mollette sur votre gauche pour faire disparaître les couches successives (nodes) au final il ne reste rien, une sorte d’expérience live de la finitude (une Heideggerienne Dasein eXperience), comme la rappelle à bonne escient la Genèse : Oui, tu es poussière et à la poussière tu retourneras.

Apres ces considérations ontologiques, revenons à un propos technologique pour voir ce qui se cache derrière cette superbe machinerie HTML5 WebGL. Eh, bien on y trouve un projet open-source aussi flambant que PopCorn à savoir l’Open 3D Viewer, un player WebGL d’objets 3D combinée à une recherche instantanée, génial !

L’aventure intérieure et l’Open 3D Viewer

A défaut de corps humain, vous aurez tous les détails de l’anatomie et de la plastique de Bessie (Bessie.obj), qui n’est rien moins qu’une…. superbe vache *.

* Il n’est pas dit que c’est une Tarine, une Prim’Holstein ou une blonde d’Aquitaine… Chez 3WDOC, depuis que nous avons oeuvré sur LA CRISE DU LAIT de Samuel Bollendorff, nous sommes devenus quasi experts en bovins, on penche donc pour la Tarine.

Installation de l’Open 3D Viewer

Les derniers fichiers source sont disponibles sur Google Code, vous pouvez donc extraire une copie de travail à partir de ce dépôt.

La commande d’extraction à lancer dans un terminal

	# Non-members may check out a read-only working copy anonymously over HTTP.
	svn checkout http://open-3d-viewer.googlecode.com/svn/trunk/ open-3d-viewer-read-only

Source : https://code.google.com/p/open-3d-viewer/

Il ne reste plus qu’à placer le tout sur un serveur web genre MAMP ou EasyPHP par exemple. Pour installer un serveur en local rien de plus facile, suivez ces tutoriaux :

• Installer un environnement PHP-MySQL sur MAC
  http://social.hecube.net/2009/04/installer-un-environnement-php-mysql-sur-mac/
• Installer facilement PHP-MySQL sur un PC avec EasyPHP
  http://social.hecube.net/2009/03/installer-facilement-php-mysql-sur-un-pc-avec-easyphp/

Qu’est-ce qu’il y a dans Bessie ?

On va surtout regarder le répertoire cow_anatomy qui contient donc les fichiers de modélisation de cette vache de race 3D notamment le fichier Bessie.obj qui peut-être ouvert par un logiciel comme Blender via un import comme on vous le montre dans les capture d’écrans.

définition du fichier .obj

File Type Wavefront 3D Object File .obj
Three-dimensional object containing 3D coordinates, texture maps, and other object information; a standard 3D image format that can be exported and opened by several 3D image editing programs.

Conclusion : Au regard de la prolifération des projets WebGL de ce type, attendons-nous à voir fleurir dans un futur proche un certain nombre de projets de webdoc basés sur ce type de technologie WebGL. Avec « ONE MILLIONth TOWER », Katerina Cizek, Mike Robbins + friends avaient montré la voie avec une grande audace technologique, ergonomique et graphique, il ne reste donc plus qu’à nous tous de persévérer dans cette voie si prometteuse !

Un grand merci à Jerome Denis pour ses lumières & explorations sur le WebGL http://www.facebook.com/pages/JDenis/209187635807472?ref=stream

Quelques écrans de Zygote Body

Plus d’informations

• Zygote Body
  http://www.zygotebody.com/
• open-3d-viewer – WebGL-based 3D object viewer with instant search
  https://code.google.com/p/open-3d-viewer/
• blender.org
  http://www.blender.org/
• J&Denis, le blog de Jerome Denis, une autorité en ce qui concerne la 3D (3dsmax, Maxwell Render…) et bien sur le WebGL
  http://www.edifik.fr/bloging/
• ONE MILLIONth TOWER, HTML5, WebGL – L’urbanisme réinventé par la seule force du webdoc
  http://blog.3wdoc.com/fr/2011/11/22/one-millionth-tower-html5-webgl-lurbanisme-reinvente-par-la-seule-force-du-webdoc/
• La crise du lait par Samuel Bollendorff, une démonstration de webdocumentaire en HTML5
  http://blog.3wdoc.com/fr/2010/11/21/la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5/
• La même production, la crise du lait par Samuel Bollendorff, portée en Flash sous Ｇaia Framework par nos soins
  http://www.samuel-bollendorff.com/fr/la-crise-du-lait/
• i-docs, documentaire interactif – Back from Bristol, un resumé du Symposium i-docs 2012 #idocs
  http://blog.3wdoc.com/fr/2012/03/28/i-docs-documentaire-interactif-back-from-bristol-un-condense-de-la-session-i-docs-2012/

Vous avez sans doute de très nombreux fichiers disséminés et diffusés sur des plateformes tierces. 3WDOC se devait donc d’offrir la possibilité d’importer simplement ces vidéos, ces photos et ces sons existants depuis des plateformes telles que Youtube, Dailymotion ou SoundCloud. C’est tout l’objet de cet article : comment importer un media d’une plate-forme tierce, un media raw.

Dans le media grabber, lorsque vous cliquez sur l’icône en forme de nuage, vous accédez à une boite de recherche qui va vous permettre d’effectuer directement une recherche sur la plateforme tierce que vous aurez sélectionné. Dans notre exemple, on recherche tous les vidéos sur youtube qui sont marqués fashion

En faisant un glisser-déposer sur le player en mode édition, une piste raw se crée automatiquement

Afin de s’assurer que la video en provenance de youtube soit toujours affiché, il faut régler le z-index de cette piste à un niveau supérieur à l’image de fond.

On positionne cette video youtube à l’endroit souhaitée et on change la taille de la vidéo en fonction de la taille originale du média sur youtube.

Qu’est-ce que 3WDOC

En savoir plus sur 3WDOC

3WDOC, un outil de montage universel, dont tout le monde peut désormais se servir pour raconter des histoires interactives pour les diffuser partout sur le web, sur tout type de plate-forme mobile ou prochainement sur la TV connectée.

3WDOC est une approche révolutionnaire pour la communication digitale. Conçu pour faciliter la création de sites et de webdocs d’excellence, 3WDOC est la meilleure expérience rich-media et interactive possible, prévue pour toutes les audiences : web, mobile et télé.

Plus d’informations

• INSCRIPCION (Spanish)
  http://app.3wdoc.com/account/signup/es
• INSCRIPTION (French)
  http://app.3wdoc.com/account/signup/fr
• SIGNUP (English)
  http://app.3wdoc.com/account/signup/en

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©www.20thingsilearned.com

Le nombre de projets HTML5 significatifs et disponibles sur le web s’accroit à un rythme soutenu qu’il devient difficile d’en sélectionner, tous ces projets étant de bonne tenue. Il faut pourtant faire un choix, on en a donc sélectionné deux qui nous semble intéressant à plus d’un titre.

1. 20 Things I Learned About Browsers and the Web
   Le premier, remarquable, qui simule le principe du livre que l’on feuillette, imitant et améliorant même le comportement du fameux « flipbook » de flash tout en HTML5.
2. Cycleblob, un projet moins spectaculaire mais qui explore le domaine du jeu et les capacités du HTML5 à concevoir un gamedesign.

20 Things I Learned About Browsers and the Web

C’est le projet à voir…. en HTML5, absolument remarquable dans sa réalisation et sa conception. On retrouve derrière les principaux prescripteurs de l’HTML5 à commencer par la « Google Chrome Team ». Tout est extrêmement soigné de la conception du code à la réalisation, ne passant par la qualité éditoriale du projet. Chapeau bas donc…

Il y aussi derrière l’un des développeurs en HTML5 les plus audacieux du moment, Hakim El Hattab (@hakimel)

<!-- 
		  20 Things I Learned About Browsers and the Web
		  Built by Fi (www.f-i.com) for the Google Chrome Team.
 
		  @author Hakim El Hattab
		  @author Erik Kallevig
		  -->

Une des conclusions de ce « petit livre bleu »
Ces quelques phrases sont à répéter comme des mantras pour toute personne qui souhaite se lancer dans le développement en HTML5 en particulier et le développement en général. On y retrouve les principales conclusions prônées par Google auxquelles on ne peut qu’adhérer :

1. Utilisez un navigateur moderne
2. Le web ne cesse d’évoluer et un nouvelle avenir s’ouvre pour les webapplications notamment en HTML5.
3. Il faut toujours essayer de nouvelles choses.

Le texte orignal de la conclusion

Use a modern browser, first and foremost. Or try a new one and see if it brings you happier browsing that’s better suited to your needs.

The web will keep evolving — dramatically! Support cutting-edge web technologies like HTML5, CSS3 and WebGL, because they’ll help the web community imagine and create a future of great, innovative web apps.

Lastly, try new things. The web is a new and exciting place every day, so try tasks that you didn’t think could be done online — such as researching your ancestry back ten generations, or viewing a real-time webcam image from a climbing basecamp in the Himalayas. You might be surprised by what you find!

Source : http://www.20thingsilearned.com/conclusion/2

Cycleblob

Outre que le gamedesign soit inspiré par le film TRON, qui est sans doute le film culte pour de nombreux développeurs, l’ensemble du gamedesign est tout entier contenu dans la balise <canvas>...</canvas>.
Cette balise permet de nombreuses manipulations. Chez 3WDOC, nous avons même réaliser des essais d’une carte isométrique sur laquelle se déplace un personnage, ce sera aussi en ligne prochainement.

Cycleblob – a 3D lightcycle game based on a concept from the 1982 movie « TRON ». Cycleblob uses WebGL and JavaScript
to bring 3D content to the web browser

Pour aller plus loin

• Le projet du moment à voir…. en HTML5
  http://www.20thingsilearned.com/
• Hakim El Hattab de Stockholm, Sweden! Un artiste et une référence en matière d’HTML5 qui a travaillé sur 20thingsilearned.com
  http://hakim.se/experiments
• Erik Kallevig (@ekallevig), l’autre développeur web du projet 20thingsilearned.com
  http://ekallevig.com/
• Fi (Fantasy Interactive) – The Award Winning Global Digital Agency
  http://www.f-i.com/
• Cycleblob, A WebGL lightcycle game based on the concept of the movie TRON. written by Shy Shalom
  http://cycleblob.com/

Copyright© nikebetterworld.com

Ces deux webdocs dessinent à eux seuls le cadre dans lequel peut s’inscrire le modèle économique et l’environnement technologique des productions de webdocumentaires.

Nike Better World, un bon mix Flash-HTML5 pour du brand content et du digital storytelling de haute volée

Nike, oublieuse des « sweatshop » et de la communication pathétique de son fondateur Phil Knight, impitoyablement piégé il est vrai dans The Big One de Michael Moore. Ce qui l’avait un temps placé dans le club très fermé des PDG honnis, respectivement à la gauche de Ingvar Feodor Kamprad et à droite de Bill Gates.

Tout cela appartient désormais au passé et on peut se consacrer, voluptueusement à cette leçon de « Brand content » et de « digital storytelling » sur un mix technologique dernier cri !

L’influence des smartphones est perceptible dans l’ergonomie et le mode de navigation, proposée dans cette production mais au-de-là de cette simple remarque.

On voit qu’une marque comme Nike, pourtant richement doté, opte pour un mix technologique fait d’HTML5 et de Flash quand cela semble nécessaire*. Mieux encore, Nike utilise même les services de l’opérateur de vidéo Brightcove, justement pour que le passage d’une technologie à une autre se fasse sans problème pour les utilisateurs. Nike doit pouvoir délivrer la même expérience quel que soit la plate-forme, mobile ou pas, en HTML5 et/ou en Flash, l’une ou l’autre des technologies se servant réciproquement de solution de « fallback ».

* Pour la vidéo notamment mais pour combien de temps encore ? Rappelez-vous que Google a racheté On2 et va imposer les armes numériques à la main son codec et son format de fichier type .webm, libre de droits. Le .flv pourrait être le grand perdant de cette opération en voyant disparaitre un de ses avantages technologiques majeurs. A relire, un article plus pointu sur la question.

• Flash, HTML5, Vidéo, WebM – La guerre des formats aura-t-elle lieu ?

Webdoc – Paris.fr

Un petit webdoc bien pensé par l’équipe de Paris.fr, qui nous apporte toute la diversité parisienne sur un plateau, dans l’intimité de la « France d’en bas ». Technologiquement, là encore un mix subtil d’HTML5 et de Flash. Une certaine excellence dans la sobriété en quelque sorte**.
** Thanks to JGC for this enlightenment

On voit donc dans un spectre très large de productions de toute envergure et de tout type qui tirent profit des deux technologies. Ces dernières technologies vont encore probablement pour un temps cheminaient côte à côte jusqu’à ce l’une avale l’autre comme deux serpents se dévorant l’un l’autre, qui sait ?

Tous les éléments disponibles dans cet article sont visibles sur le site de- http://www.nikebetterworld.com. 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.

Tous les éléments disponibles dans cet article sont visibles sur le site de- http://webdoc.paris.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.

Le siège de Nike est à Beaverton, Oregon

Pour aller plus loin

• HTML5: the standard in high-quality web video
  http://www.brightcove.com/en/online-video-platform/html5-video
• Cool Sites: Nike’s ‘Better World’ Site Embraces HTML5
  http://www.webmonkey.com/2011/01/cool-sites-nikes-better-world-site-embraces-html5/
• Nike Better World
  http://nikebetterworld.com
• Webdoc – Paris.fr – Parisiens : Des photos, une voix…
  http://webdoc.paris.fr

Lorsque, chez 3WDOC, il nous a été proposé de faire un site événementiel en HTML5 à partir de la session de photos de mode de Marcel Hartmann sur Robby Naish pour la collection Tommy Hilfiger Tailored à Hawaï, toute l’équipe de 3WDOC s’est pincé 3 fois pour se demander si elle ne rêvait pas ! Robby Naish, outre le fait d’être une icône, comme l’est Tony Hawk pour le skate ou Kelly Slater pour le surf, est en plus une personnalité d’exception.

Eminemment charismatique et sympathique, il continue d’exceller à presque 50 ans dans des sports dont il est quasiment l’inventeur, en costume Tommy Hilfiger qui plus est.

Que penser de ce site événementiel

Ce site prouve plusieurs choses :

• A l’évidence, le sport et une certaine éthique conservent. Robby Naish nous en fait une démonstration magistrale.
• La technologie 3WDOC est réellement polyvalente, elle fédère tous les types d’usage sur tous les types de sujets. Est-ce l’effet Robby Naish mais cette démonstration nous a définitivement inspiré une « baseline » pour notre outil.
• Elle montre que le monde du marketing et de la communication peut très légitimement s’intéresser à ce nouveau format qu’est le webdocumentaire et ainsi l’adapter dans le cadre d’une communication moderne à une utilisation corporate sur le thème du site événementiel.
• La nécessité de produire et de réagir vite notamment à destination des nouvelles plates-formes, mobiles tel que l’iPad avec lequel l’HTML5 sera bientôt compatible.
• L’obligation faite aux marques de s’ouvrir à une communication en phase avec un marché totalement orienté et gouverné par les internautes dans les valeurs et dans les usages, d’offrir des histoires et des expériences et non de simples mini-sites.
• Le choix d’une technologie polyvalente, robuste et ouverte pour agréger tous ces usages et s’ouvrir à toutes les plates-formes existantes et à venir (Facebook, Twitter…). 3WDOC Studio qui sera très prochainement disponible en test, est cet outil polyvalent capable de créer et délivrer, sur le web, en HTML5 des expériences Rich Media optimisées. Cela peut être des webdocumentaires, mais pas seulement. Il peut s’agir tout simplement de sites événementiel, de slide-show photo/vidéo, de modules informationnels et interactifs au sein d’un site existant (blog, site de ecommerce…), d’extensions fonctionnelles portées au sein de CMS… Bref de contenus web enrichis d’une très grande hétérogénéité et d’une grande interactivité. A titre d’information, HTML5 est soutenu et adopté par Google, Microsoft, Apple, Mozilla… Ils représentent à eux seuls 100% du marché des navigateurs et donc d’accès aux utilisateurs.

Baseline 3WDOC

3WDOC studio is a versatile tool to create and deliver rich media experiences optimized in HTML5 to run across the web.

3WDOC studio est un outil polyvalent pour créer et délivrer, sur le web, en HTML5 des expériences Rich Media optimisées.

Toutes les captures ont été réalisées sous Google Chrome

Les exploits de Robby Naish habillé par Tommy Hilfiger

• http://demo.3wdoc.com/webdoc-html5-robby-naish/

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.

Crédits

Un grand merci à tous les personnes qui ont rendu possible ce projet.

• Conception : Hecube
• Production vidéo : Treets TV
• Développement Web : 3wdoc
• Un film réalisé par Christophe Simon
• Robby Naish / Lui-même
• Marcel Hartmann / Photographie
• Xavier Privat / Journaliste
• Philipp Hohndorf / 1er assistant photographe
• Luciano Neves / Styliste de mode
• Camille Kozuki / Coiffure et maquillage
• Dana Hamilton / Unité de production d’Hawaï
• Mia Meliava / Coordination France
• Valerie D’Olce / Coordinateur Tommy Hilfiger
• R-mute / Montage
• Ulrich Robin / Design sonore

Un grand merci à Tommy Hilfiger Europe, la famille Naish pour leur gentillesse et leur générosité.

Liens

• Tommy Hilfiger
  http://www.tommy.com/
• Robby Naish – Naishsails – Windsurfing
  http://www.naishsails.com/
• Marcel Hartmann – Photographer
  http://www.hartmann-marcel.com/
• R-mute
  http://www.rmute.fr/

Ce qu’il faut retenir sur 3WDOC Player

• ce n’est pas juste un simple player vidéo en HTML5
• il affiche le contenu Web différemment en ajoutant la notion de temps dans la page web
• il affiche facilement le contenu enrichi d’une page web, n’importe où sur l’écran, mais aussi à tout moment dans la narration choisie.
• il est optimisé pour le référencement contrairement à Flash
• il permet un positionnement aisé dans la largeur, la hauteur et la profondeur des éléments html
• il permet aux éditeurs de contenu de ne pas tout mettre dans une page. Il est possible de raconter une histoire à l’utilisateur.
• il lit un code qu’il est très facile de s’approprier. Un petit niveau de html suffit.
• il ne nécessite pas de plugin à installer dans la navigateur, comme flash ou silverlight.
• il intègre toute l’intelligence nécessaire à l’élaboration d’un site enrichi.
• fait de la création d’un site enrichi un simple problème d’intégration. Pas de développement, un cycle de développement ultra rapide… Agile donc

What to remember on the 3WDOC technology?

For the people who does not speak french, here is the list.

• is not just another html5 video player.
• displays Web content differently adding a timeline within the web page
• displays rich content easily anywhere on the screen but also anytime in the story that is told in a web page.
• Ready for SEO optimized unlike Flash
• allows easy positioning in width, height and depth of html elements
• allows publishers not tell everything in one html screen
• reads a custom markup language very easy to learn
• does not need any third-party browser plug-ins, like flash or silverlight.
• integrates all the intelligence a rich media website needs.
• making creation just a problem of HTML integration. No development, a development cycle ultra fast … So Agile

Une présentation de 3WDOC sera faite dans le cadre du Google Workshop, le 8 décembre 2010 à LEWEB’10. « Discover all the potential of HTML5 to build rich applications for modern browsers. HTML5: portrait of the browser as a platform »

Source : http://www.leweb.net/agenda/2010/google-workshop

Hawaii

Copyright© Samuel Bollendorff pour le Centre National de l’Audiovisuel

Le sujet est pointu, les propos sans appel, le constat accablant… Pas de doute on est bien dans un projet signé Samuel Bollendorff.

Notre fréquentation assidue de Samuel Bollendorff, pour la conception de son site, nous a tout naturellement permis de lui proposer de tenter pour la première fois sans doute, dans le monde du web…. la création d’un pilote de webdocumentaire en HTML5 à l’aide de 3WDOC Player. Cette expérience ayant pour vocation de prouver plusieurs choses notamment celle que l’utilisation du format HTML5 dans une narration web est tout à fait légitime et qu’elle peut satisfaire d’un point de vue de la qualité les exigences éditoriales d’un photojournaliste tel que Samuel Bollendorff. Qui n’est pas tout à fait un inconnu dans le petit monde du webdoc.

Avec Samuel Bollendorff, il y a toujours une bonne raison de déranger nos consciences assoupies de consommateurs. Vous ne lirez pas de la même façon chaque matin désormais l’étiquette sur la bouteille de lait lorsque vous apprêtez à petit-déjeuner.
Le sujet a été réalisé par Samuel Bollendorff pour le compte du Centre National de l’Audiovisuel – Luxembourg.

Vous pouvez voir « La crise du lait » par Samuel Bollendorff, un pilote de webdocumentaire en HTML5 conçu à l’aide du 3WDOC Player :
http://demo.3wdoc.com/webdoc-html5-samuel-bollendorff/

Quelques informations sur la création de ce pilote de webdocumentaire :

Il s’agit avant tout d’une démonstration des capacités du Player 3WDOC pour laquelle quelques effets supplémentaires ont été intégrés spécialement :

• L’effet typewriter – apparition progressive du texte à la manière d’une machine à écrire
• L’effet MouseMove – apparition et disparition d’éléments au mouvement de la souris.

Rappelons à ce titre quelle est la finalité de 3WDOC Player. Sa finalité est de faciliter la narration sur le web en mettant à la disposition des photographes, des auteurs et des réalisateurs mais aussi des agences et professionnels du web un outil de montage de séquences interactives leurs permettant de concevoir tout ou partie de leur site web multimédia interactif ou webdocumentaire (documentaire interactif). 3WDOC player est plus qu’un simple player de vidéo en HTML5, c’est un lecteur multimédia de séquences en HTML5.

Ce player écrit en javascript est aujourd’hui pilotable par le biais de l’édition d’une simple page web dont le langage de mise en forme n’est autre que le très prometteur HTML5. Le code de ce player sera très prochainement mis à disposition sur notre site en version non commerciale. Il viendra avec une documentation complète permettant à toute personne ayant quelques notions d’HTML5 de le prendre en main facilement et ainsi de créer son propre webdocumentaire (2) ou site multimédia interactif (1).

Une version plus complète et aboutie, dénommé 3WDOC Studio, devrait suivre rapidement. Cette dernière intégrera un éditeur de séquence très simple d’utilisation qui permettra la création des séquences en mode visuel.

Cette démo est visible sous tous les navigateurs modernes dans leurs versions récentes :

• Google Chrome : champion de l’interprétation HTML5 permet un visionnage optimal de l’ensemble des séquences.
• Safari : Un des premiers navigateurs à avoir choisi le HTML5 comme fer de lance de la lecture multimédia nouvelle génération.
• Firefox : Bonne expérience utilisateur à l’exception de la lecture vidéo qui pour le moment est un peu en deça de Chrome et Safari.
• Opera : Affichage parfait.

En attendant la sortie définitive du très prometteur Internet Explorer 9, les utilisateurs des anciennes version (ie6, ie7, ie8) se verrons proposer le téléchargement de GCF (Google Chrome Frame) qui leur permettra de visionner parfaitement le webdoc.

Télécharger Google Chrome

Nous vous invitons à télécharger et à utiliser le navigateur Chrome directement et à visionner l’ensemble du webdocumentaire… C’est à ce jour la meilleure expérience obtenue au gré de nos différents essais.

(1) site web multimédia interactif : agencement et mise en page de séquences multimédia dans lequel il est offert au visiteur des menus interactifs lui permettant une navigation aisée et un accès à tous les contenu d’un clic.
(2) webdocumentaire (documentaire interactif) : enchaînement de séquences multimédia et liées entre elles par un ou plusieurs menus animés interactifs dans lequel le spectateur est un acteur à part entière de la narration confronté à des choix liés au contexte dans lequel il se trouve.

Pour aller plus loin

Deux articles de ce blog consacrés aux capacités du player 3WDOC, du HTML5 et à d’autres tentatives de création menées en HTML5.

• HTML5, Player – Demo HTML5 à l’aide du player 3WDOC
  http://blog.3wdoc.com/fr/2010/09/20/html5-player-demo-html5-a-laide-du-player-3wdoc/
• HTML5, Flash – Deux technologies pour le webdocumentaire
  http://blog.3wdoc.com/fr/2010/09/14/html5-flash-deux-technologies-pour-le-webdocumentaire/

Le luxembourg

3WDOC vient de publier un article qui vante les mérites de l’HTML5, on se devait donc de produire quelques démonstrations qui attestent de la véracité de nos dires sur le potentiel de l’HTML5 comme concurrent viable à Flash et technologie alternative pour la création de webdocumentaire.

C’est aujourd’hui chose faite !

Cette demo n’est actuellement plus disponible. Nous vous invitons à découvrir les autres démos disponibles via la page DEMOS de ce blog.

http://blog.3wdoc.com/fr/demos/

On vous offre une démonstration d’interaction et de narration, sans prétention, qui donne un aperçu des capacités de l’HTML5. C’est une réalisation « fait maison » grâce aux bons soins de Jean Grandclément Chaffy et à la ténacité de notre équipe de développement. On vous laisse découvrir notre player en faisant notre le lyrisme d’un Dailymotion qui sans coup férir annonce son player HTML5 avec le slogan Bienvenue dans le futur !

Le fonctionnement du player 3WDOC

Le player 3WDOC fonctionne sur les plates-formes suivantes MAC et PC. Voici, dans le détail, les combinaisons de plates-formes et de navigateurs sur lequelles le player 3WDOC a été testé.

Pour Mac

Le 3WDOC player fonctionne sous les navigateurs suivants :

• Safari Version 5.0.2
• Firefox 3.5 +
• Opera 10.6 +
• Chrome depuis la première version…

Pour PC

Une détection se fera automatiquement afin que votre navigateur Internet Explorer télécharge et installe le Google Chrome Frame (aka, GCF). En effet, ce framework est nécessaire pour que Internet Explorer puisse interpréter du HTML5, en attendant la version 9 de Internet Explorer !

Cette installation du Google Chrome Frame (aka, GCF) est assez similaire à une installation du plugin Flash !
Source : http://www.chromium.org/chromium-projects

Le 3WDOC player fonctionne sous les navigateurs suivants :

• Internet Explorer + Google Chrome Frame (GCF) de la version 6 à 8
• Firefox 3.5 +
• Opera 10.5 +
• Chrome depuis la première version…

Installer sous IE, le Google Chrome Frame (GCF)

Encoder les vidéos pour le player 3WDOC

Toutes les vidéos disponibles dans la démonstration ont été faites sur MAC.
Les vidéos au format .ogg ont été faites à l’aide VLC Version 1.1.3
Les vidéos au format .mp4 ont été faites à l’aide QuickTime 7 Pro

Si vous êtes sous Mac OS X Snow Leopard, QuickTime 7 est déjà installé. Il vous suffira de l’ouvrir et d’activer la licence qu’il faudra avoir acheter préalablement sur apple 30,00 €. Le player QuickTime 7 se trouve Applications/Utilities/.
Source : QuickTime 7 Pro – http://www.apple.com/fr/quicktime/download/

L’encodage en .MP4

Voilà la séquence pour encoder un fichier quicktime en MP4.

Pour assurer la meilleure qualité possible de votre vidéo avant un encodage en .mp4, ll vaut mieux désentrelacer votre source vidéo

Exporter au format .mp4

Les paramètres vidéo du format .mp4

Les paramètres audio du format .mp4

L’encodage en .OGG

Voilà la séquence pour encoder un fichier quicktime en OGG. Pour se faire on utilise la toute dernière version de VLC.

1. Choisir l’assistant de diffusion et de transcodage

2. Définir les options de transcodage

3. Choisir l’entrée, la source vidéo

4. Définir les paramètres du transcode

5. Définir le mode d’encapsulation

6. Le résumé

Au terme de ces 6 opérations, vous obtenez un fichier .ogg de votre vidéo.

Accéder à la barre de transport du player 3WDOC

Pour activer ou non la barre de transport, si vous le souhiatez, vous pouvez à l’aide de FireBug sous Firefox, mettre style="display: block;" pour voir apparaitre temporairement la barre de transport qui vous donne tous les boutons, le timecode….etc

<div class="he3Player_toolbar" style="display: block;">...</div>

La barre de transport du 3WDOC player

La documentation pour utiliser la player 3WDOC

Voici, pour les plus courageux, l’intégrale de ma documentation pour personnaliser le player 3WDOC des paramètres d’affichage et des options d’initialisation et des options d’effets.

EFFECTS

        Blind
        direction: horizontal,vertical (string)
 
        Bounce
        direction: up,down,left,right (string)
 
        Clip
        direction: horizontal,vertical (string)
 
        Drop
        direction: up,down,left,right (string)
 
        Explode
        pieces: 9 (int)
 
        Fold
        horizFirst: true,false (bool)
        size: 15 (int)
 
        Highlight
        color: #ffff99 (hex)
 
        Puff
        percent: 150 (int)
 
        Pulsate
        times: 5 (int)
 
        Shake
        direction: up,down,left,right (string)
        distance: 20 (int)
        times: 3 (int)
 
        Slide
        direction: up,down,left,right
 
        Fade

ATTRIBUTES

note: the effect options are strings in json notation without curly-braces, don’t forget to single quote keys/values, if multiple keys/values pairs separate by coma.

        <node (video,audio,article,img,button)
            // show attributes
            tcStart="" (float) # timecode start
            tcStartTop="" (int) # relative to section start top position in px
            tcStartLeft="" (int) # relative to section start left position in px
            tcStartWidth="" (int) # start width in px
            tcStartHeight="" (int) # start height in px
            tcStartZindex="" (int) # start z-index
            tcStartEffect="" (string) # start fx
            tcStartEffectDuration="" (int) # start fx duration
            tcStartEffectOptions="" (string) # start fx options
            // hide attributes
            tcStop="" (float) # timecode stop
            tcStopEffect="" (string) # stop fx
            tcStopEffectDuration="" (int) # stop fx duration
            tcStopEffectOptions="" (string) # stop fx options
        >
            node content
        </node>
 
        <node (audio,video)
            // source attribute
            tcSrc = "" (string) # url to the multimedia source file without extension (ext will be elected to ogg for FF and mp4 for others)
        >
            !!! no node content, will be dynamically injected when needed !!!
        </node>
 
        <node (button)
            tcLink="http://www.hecube.net" (URLstring) # action button to link to URL
            tcGoto="" (float) # action button to jump to specified timecode in the sequence
            tcOverlay="" (string) # action button to trigger an overlayed group
            class="[ui]rwd" (string) # action button stepping rewind (see he3PlayerSeekStep)
            class="[ui]play" (string) # action button trigger play
            class="pause" (string) # action button trigger pause
            class="[ui]stop" (string) # action button trigger stop
            class="[ui]fwd" (string) # action button stepping forward (see he3PlayerSeekStep)
            class="[ui]mute" (string) # action button trigger mute (see he3PlayerMute)
            class="[ui]sndMinus" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)
            class="[ui]sndPlus" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)
            class="[ui]fullScreen" (string) # action button trigger player size
            class="ctime" (string) # passive button display current timecode
        >
            node content
        </node
 
        <node (article,img)
            tcOverlayed="" (string) # defines an overlayed group to be trigger by an overlay button
        >
            node content
        </node>

INIT OPTIONS

note: [c] cookie mode capabilities

INITIALISATION

        he3PlayerWidth:                         1024, (int) # the main container section width
        he3PlayerHeight:                         768, (int) # the main container section height
        he3PlayerNativeWindow:                     true, (bool) [c] # init in native window size (he3PlayerWidth,he3PlayerHeight) or resize window size (see he3PlayerRatioWindow,he3PlayerReferenceWindow)
        he3PlayerRatioWindow:                     0.5, (float) # defines the resize ration, if set to 0 follow full browser window size
        he3PlayerReferenceWindow:                 "width", width|height (string) # choice of the dimension we refer to for full browser window size following
        he3PlayerAutoplay:                         false, (bool) [c] # init in autoplay, can be bypassed by runtime transport status in cookie mode [c]
        he3PlayerMute:                             false, (bool) [c] # init in mute
        he3PlayerSeekStep:                         3, (float) # seekink stepping configuration
        he3PlayerVolumeDefault:                 0.5, (float) [c] # default init volume value, from 0 to 1
        he3PlayerCookieName:                     "mywebdoc", (string) # will name the session cookie (experimental) that stores runtime properties between pages, it should represent a webdoc name
        he3PlayerCookieRecall:                     "transport,nativeWindow,volume,mute", (string) # will (de)activate data recal at init from the session cookie (experimental), bypassing some of the init options [c]
        he3PlayerFirebug:                         true (bool) # enables Firebug debugging messages (FF only!)

Ce développement du Player 3WDOC a été rendu possible grâce aux ressources suivantes :

• jQuery: The Write Less, Do More, JavaScript Library
  http://jquery.com/
• jQuery UI
  http://jqueryui.com/
• Modernizr JavaScript library
  http://modernizr.com/
• Le plugin jQuery Cookie
  http://plugins.jquery.com/

5e Arrondissement de Paris, 75005 Paris, France

Pour aller plus loin

• HTML5 (including next generation additions still in development) Draft Standard
  http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
• Video on the Web – Dive Into HTML5
  http://diveintohtml5.org/video.html
• HTML5 Video with JavaScripted synchronised captions: demo (une video plutôt amusante au demeurant)
  http://people.opera.com/brucel/demo/video/multilingual-synergy.html

Copyright© thewildernessdowntown.com

Aujourd’hui, Flash est devenu un standard de fait, imposé brillamment depuis plus de 10 ans maintenant par de très nombreux créateurs multimédia et vigoureusement soutenu par Adobe. Ce succès en terme d’adoption n’est plus à démontrer néanmoins ce quasi-monopole dans la création multimédia pourrait désormais être battu en brèche par une nouvelle norme : HTML5, promue par le World Wide Web Consortium (W3C) *. HTML5 tente et tentera dans les prochains mois de concurrencer Flash sur son terrain de prédilection : la production de sites multimédia interactifs et animés dont les meilleurs exemples aujourd’hui sont les webdocumentaires ou les webfictions. Cette concurrence ne fait que commencer et elle ne sera pas simple pour le challenger HTML5 car Flash a encore une bonne longueur d’avance sur le terrain de la stabilité et de l’interactivité, sans parler du plein écran ! Bien que Flash soit loin d’être enterré, HTML5 possède deux avantages intrinsèques :

• HTML5 se base sur des technologies ouvertes et libres de droit qui permettent aux contenus d’être beaucoup plus visibles et mieux référencés.
• HTML5 est promu par les principaux membres du W3C dont Google, Apple et Microsoft. La firme de Redmond sortira prochainement une version bêta d’Internet Explorer 9 avec HTML5 comme fer de lance. Comme quoi, il n’est jamais trop tard de redorer son blason.

Quant à Flash, il a étendu très loin son influence tentaculaire sur toute la conception et la création multimédia sur le Web sans prendre le soin de s’ouvrir à la recherche sémantique au risque de condamner ceux qui l’ont choisi à une invisibilité croissante. En effet, l’ouverture à la recherche sémantique est un levier essentiel au référencement par les moteurs de recherche. Depuis l’apparition de Flash, cette question d’ouverture est d’ailleurs un débat récurrent sur le Web. Avec l’émergence de l’HTML5, technologie totalement ouverte, on peut pronostiquer que la part de marché de Flash pourrait baisser au cours des prochaines années. Flash se cantonnant dans des usages plus « corporate » et/ou privés. Toutefois, l’hallali pour Flash n’a pas encore sonné car la lenteur et les dissensions éventuelles des membres du W3C à imposer HTML5 comme pierre angulaire du multimédia sont autant de garants de la domination de Flash ! Sans même évoquer la présence ou non du Runtime Flash sur des plate-formes mobiles type Ipad, Iphone dont la question à ce jour ne semble pas totalement tranché. En l’espèce, il s’agit d’une parfaite illustration du « diviser pour mieux régner », au grand bénéfice de Flash et d’Adobe, son éditeur !

* W3C est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 par l’inventeur du Web et chargé de promouvoir la compatibilité des technologies du World Wide Web

Un film interactif en HTML5

Parmi, les nombreux projets qui fleurissent en HTML5, chez 3Wdocs, on en a sélectionné un thewildernessdowntown, le clip d’Arcade Fire. Un projet récent qui exploite le potentiel de l’HTML5 et quelques-unes des fonctionnalités de géo-localisation mis à disposition par Google… et fait du même du prosélytisme pour le navigateur Chrome.

Source : http://www.thewildernessdowntown.com/
Le site du groupe Arcade Fire : http://www.arcadefire.com/

La baseline de thewildernessdowntown résume assez bien la teneur du projet

An interactive film by Chris Milk
Featuring « We Used To Wait »
Built in HTML5

Ce projet s’appuie notamment sur Google Chrome. Google qui voit d’ailleurs bien, plus loin qu’un simple navigateur avec son framework Google Chrome Frame. Voir la video ci-dessous.

This site was designed with Google Chrome in mind and is unable to render properly in your browser.
For the best viewing experience, we recommend downloading Google Chrome and trying this site again.

Source : http://www.thewildernessdowntown.com/

Qui fait quoi ?

De nombreux acteurs de la vidéo sur Internet se positionnent sur l’HTML5 et non des moindres, que ce soit les plates-formes de partage de vidéo (Vimeo, Youtube, Dailymotion…) ou les créateurs de célèbre player video en Flash (JW player).

Des mastodontes…
Quelques uns des poids lourds du secteur se positionnent clairement pour l’HTML5…

• Apple et l’HTML5
  http://www.apple.com/html5/
• Google et son Google Chrome Frame
  http://code.google.com/intl/fr/chrome/chromeframe/

Pour plus d’informations sur le Google Chrome Frame, nous vous invitons à découvrir cette vidéo fort instructive !

Introducing Google Chrome Frame

Les plate-formes de diffusion et de partage

• Vimeo
  http://vimeo.com/blog:268
• Youtube
  http://www.youtube.com/html5
• Dailymotion
  http://www.dailymotion.com/openvideodemo
• JW Player for HTML5
  http://www.longtailvideo.com/support/jw-player/jw-player-for-html5

Pour aller plus loin

• HTML5 and The Future of the Web
  http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
• The Future of Web Content – HTML5, Flash & Mobile Apps
  http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/

Copyright© britainfromabove

Ce site utilise le player mis à disposition par le site linuxcentre.net. Lecteur qui couplé à un compte Akamai pour le streaming vidéo, permet de conserver une partie de l’expérience promise par le programme « Britain from Above » : voler au dessus des paysages d’Angleterre avec un sentiment de totale liberté. Il est certain que sur un grand écran type la géode à Paris ou même un home-cinéma, l’expérience doit être encore plus déroutante, pour rester dans l’actualité c’est sans doute la différence d’expérience qui existe entre voir Avatar en 2D ou en 3D de James Cameron ron petit patapon.

DESCRIPTION GENERALE

Le pitch du programme est tout entier contenu dans le titre Britain from Above. En traduction française, ce serait « L’Angleterre vue du ciel », autant dire un concept pratiquement copyrighté par le sieur Yann Arthus-Bertrand qui ne s’est pas contenté d’une simple île mais a fait du monde son terrain de jeu.

Tous les éléments disponibles dans cet article sont visibles sur le site de la BBC – http://www.bbc.co.uk/britainfromabove/

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.

C’est aussi une ambiance Martin Parr vue du ciel.

Du bonne usage de l’API Google Maps, pour cartographier les différents sujets de manière croisée par lieu géographique et par thème.

Avec les yeux d’Andrew Marr…

Pour parodier un titre célèbre (Cf Dora Maar), le fer de lance de ce projet est Andrew Marr, qui paye de sa personne comme une sorte de Nicolas Hulot britannique pour présenter à ces concitoyens les pépites de la campagne et des cités anglaises. On peut noter que bien que le sujet ait été diffusé sur BBC One, Two et Four, le site web a permis de prolonger le succès de cette série hors-norme en diffusant notamment des séquences qui n’avaient pas été montrées lors de la diffusion télévisée. Un bon exemple de synergie entre web et télévision.

VIDEOS

Néant

VIDEO
Néant

AUDIO
Néant

Une vidéo mis à disposition par la BBC elle-même sur son programme phare

Cliquer ici pour voir la vidéo.

Pour aller plus loin

• L’espace dédié à Britain from Above sur le site de la BBC
  http://www.bbc.co.uk/britainfromabove/
• Le site de get_iplayer de linuxcentre.net
  http://linuxcentre.net/