Copyright© ajourneyintolongevity.axa.com © www.pwcrecrute.com © changer-ma-pme.laformationpro.com © www3.mercedes-benz.com

Dernièrement, nous avons assisté à la publication de nouveaux types de contenu richmedia sur la toile visant à promouvoir une marque, un produit ou les valeurs d’une entreprise. Il est vrai que les récentes données de l’IDA nous précisent que les formats du richmedia et de la vidéo digitale représentent 12% de l’advertising sur Internet en 2010.

Pourquoi les entreprises se tournent vers ce type de communication ?

• Le brandcontent digital permet de capter un public dans la durée, puisque le contenu est disponible en permanence sur la toile contrairement à un spot publicitaire.
• Il y a souvent une phase de login où l’entreprise peut récupérer des données des utilisateurs.
• L’interactivité permet une immersion dans le film et l’utilisateur peut plus facilement s’identifier et s’inscrire dans le discours de la marque.
• Les formats web permettent une viralité rapide et optimisée.

Promouvoir son entreprise auprès de ses collaborateurs

« Et si l’épanouissement faisait la différence ? Découverte interactive de l’univers PwC »

PricewaterhouseCoopers met en avant ses collaborateurs dans différentes vidéos. Ici la découverte interactive a pour but de recruter de nouveaux professionnels pour le groupe d’audit et de conseil. C’est donc un contenu très corporate qui permet de valoriser l’entreprise elle-même.

Promotion par des témoignages

« Au coeur de ces PME qui changent »

Laformationpro.com, un projet CGPME (Confédération Générale des Petites et Moyennes Entreprises), a mis en ligne le webdocumentaire « Au coeur de ces PME qui changent » pour promouvoir la formation professionnelle. On découvre les avantages de ce type de formation à travers différents points de vue grâce à des témoignages de professionnels et de participants.

Du storytelling pour valoriser la philosophie de l’entreprise

« Blue Zone : a journey into longevity »

Ce webdocumentaire met en avant les lieux dans le monde où la population vit plus longtemps : la Sardaigne en Italie, le Gers en France, Montacute au Royaume-Uni, l’île de Nicoya au Costa Rica et Okinawa au Japon. Axa promeut les zones où il fait bon vivre. Du storytelling pour donner une bonne image de la compagnie d’assurance. Mais il faut attendre le 3 mai pour pouvoir visionner ce webdocumentaire.

Mise en avant du produit

« Drive&Seek » de Mercedes

L’expérience interactive de la nouvelle mercedes Classe C coupée est l’exemple même de la mise en avant d’un produit dans un film interactif. Le produit est adapté dans une histoire où l’utilisateur prend les décisions pour le personnage principal dans un environnement contextuel. Le film est dans la lignée des scénarios d’actions américains. Ce n’est pas sans rappeler le film interactif de la Citroën C4. Un braquage de banque, une course poursuite avec les policiers, tout y est !

Tous les éléments disponibles dans cet article sont visibles sur les sites de –

www.changer-ma-pme.laformationpro.com
www.pwcrecrute.com/webdocu.html
www.ajourneyintolongevity.axa.com
www3.mercedes-benz.com/mbcom_v4/xx/c-class-coupe/en.html

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

• Le webdocumentaire de laformationpro.com
  « Au coeur de ces PME qui changent »
• Le webdocumentaire de PWC
  Et si l’épanouissement faisait la différence
• Le webdocumentaire de Axa
  Blue Zone
• Le webdocumentaire de Mercedes
  Drive&Seek

Copyright© www.detective-avenue.com

Depuis lundi, Detective Avenue est en ligne. Une belle expérience transmedia innovante qui revisite les codes narratifs mais qui utilise les bonnes vielles méthodes de monétisation !

Un scénario ludique mainstream

« Gaëlle s’installe incognito dans l’appartement de sa soeur assassinée. Elle est persuadée que le coupable se trouve parmi les locataires… Sous des dehors normaux,les habitants de l’immeuble cachent tous de nombreux secrets inavouables…
Chaque jour, de courts épisodes gratuits, accompagnés d’énigmes et de mini-jeux : fouille de lieux, dossiers confidentiels… »

Il ne manque pas de références pour décrire le scénario de « Detective Avenue ». On pense évidemment au cinéma à « Fenêtre sur cour » d’Alfred Hitchcock ou à « Femmes au bord de la crise de nerf » de Pedro Almodovar.
Mais aussi et surtout à un jeu d’énigmes familial à la manière du Cluedo, où toutes les générations connectées se prennent facilement au jeu.

Le transmedia : différents supports, différents contenus, une seule expérience

Une expérience menée par Orange qui n’en est pas à son coup d’essai puisque TransmediaLab (laboratoire transmedia d’Orange) avait mis en place l’expérience « Clem » sur mobile et sur le web pour préparer la diffusion de la série sur TF1.

On le voit bien, le design est soigné, on est clairement dans une production web fortunée. Le plus impressionnant, ce sont tous les moyens de communication utilisés pour une seule expérience : Internet, téléphonie, Iphone et Télévision; tous les supports présents dans l’offre d’Orange.

En effet la principale expérience se vit sur internet, où un tableau de bord permet à l’utilisateur d’avancer dans la narration, de gérer son compte, de découvrir des indices et de récolter des points. La narration est bloquée quotidiennement, et pour avancer, l’utilisateur doit attendre le jour suivant.
C’est pour cela que sont disponibles d’autres ressources sur d’autres supports, comme par exemple les profils Facebook de certains personnages de l’intrigue, ou l’application gratuite sur l’iPhone qui permet de géolocaliser des indices.

La monétisation

Pour monétiser ce jeu, Orange a pensé à tout. Par exemple à la fin de chaque épisode, on nous rappelle qu’il est possible d’écouter le répondeur de l’héroïne en appelant un numéro spécial surtaxé ou de s’enregistrer pour recevoir les SMS du flic, reçus par Gaëlle.

Mais la lettre des producteurs, Alain Degove et Laurent Guérin de Murmures Productions nous rassure :

« La pérennité de ce genre de programme passe par le fait que les internautes apportent leur pierre à l’édifice, sous la forme du volontariat.

C’est la raison pour laquelle nous vous proposons des services payants facultatifs. Vous pouvez suivre l’histoire, enquêter et trouver le coupable sans y avoir recours. Cependant, ces services vous permettent d’avoir accès à des informations qui enrichissent les personnages et les situations. »

Et pour finir, l’enquête n’est pas sans récompense, puisque des cadeaux alléchants sont à gagner !

Tous les éléments disponibles dans cet article sont visibles sur le site de – www.detective-avenue.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.

Pour aller plus loin

• Le site de Detective Avenue »
  http://www.detective-avenue.com/
• Le transmedia sur Wikipedia
  http://fr.wikipedia.org/wiki/Transmedia
• Un article intéressant sur delapubmaispaque.fr
  Expérience transmedia avec Détective Avenue d’Orange

Copyright© www.anewwarrior.com/

GreenPeace à la pointe des technologies de l’information et de la communication, vient de lancer un site web enrichi en Flash. Un résultat époustouflant !

Militer sur le web grâce aux contenus multimédias enrichis c’est possible! On le sait bien, Greenpeace a toujours été à la pointe des outils de communication. Mais aujourd’hui l’ONG nous surprend avec cette application militante qui permet de récolter des fonds pour construire le nouveau « Rainbow Warrior ».

• LA COMMUNAUTÉ SUR LE DEVANT DE LA SCÈNE

  Les utilisateurs peuvent acheter des produits à partir de la plus petite cuillère jusqu’à un moteur du bateau dans le Shop en ligne. Ensuite chaque contributeur est remercié avec une parution dans l’onglet « The contributors » et la localisation de son achat dans le bateau par un point rouge sur une vue graphique 3D animée.
  Ce principe d’achat communautaire a déjà été vu, comme par exemple l’ONG Intermon Oxfam qui propose à l’utilisateur d’acheter 8 poules pour offrir à un agriculteur du tiers monde.

Tout cela dans une application flash bien ficelée. L’interface rappelle les codes d’un jeu vidéo, avec les cartes de navigation en 3D dans le rainbow warrior toujours à disposition. Tout est fait pour que l’utilisateur se sente acteur de la construction. Le militantisme est bien présent avec un fond sonore qui permet une immersion totale. L’avancement de la construction réelle est mise en avant, sur la page d’accueil.

• LES AUTRES CAMPAGNES DIGITALES DE GREENPEACE

  Greenpeace n’est pas à son coup d’essais : la série « Vivement la désintox » est une campagne de digital storytelling innovante. Sur un ton humoristique, l’ONG fait encore une fois passer le message qu’elle souhaite sous une forme plus divertissante afin de toucher un public plus large. C’est donc ça le storytelling, créer une immersion de l’utilisateur par le biais du récit.

• UN MOUVEMENT UNIFORME

  Les autres ONG et associations humanitaires l’ont bien compris, la communication digitale permet de toucher plus de membres et de rallier de nouveaux membres à leurs causes. Voici un exemple déjà cité dans notre blog :

  Deux webdocumentaires, croix-rouge, GoudouGoudou, retour en Haïti un an après le tremblement terre

Avec un format plus ludique et plus attractif, le storytelling digital permet de développer de nouvelles approches vers un public jeune et dispersé dans le monde entier.

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

Bremerhaven, Allemagne

Pour aller plus loin

• One Rainbow Warrior
  http://www.anewwarrior.com/
• « Vivement la désintox » de Greenpeace, série sur l’addiction au pétrole
  http://www.vivement-la-desintox.com/
• Digital storytelling
  http://fr.wikipedia.org/wiki/Digital_Storytelling
• Le site de Greenpeace France
  http://www.greenpeace.org/france/

Copyright© Philippe Brault

Il y a peu de lecteurs de ce blog, voir même peut-être disons de gens sur Internet, qui ignore qui est Philippe Brault ! Si vous l’ignorez encore une rapide recherche sur Google vous informera que Philippe Brault est le photographe du Webdocumentaire « Prison Valley », co-réalisé avec le journaliste David Dufresne, sous la houlette de Upian.

On serait tenté de penser que ce glorieux fait d’arme aurait suffit à plus d’un pour se reposer sur ses lauriers numériques… Eh bien, comme le dit le proverbe « le succès appelle le succès » et comme l’a dit Réné Char, « impose ta chance, serre ton bonheur et va vers ton risque. A te regarder, ils s’habitueront » *. Philippe Brault trace donc sa route sans autre considération que son exigence et la qualité de son travail dans des domaines aussi variés que le webdocumentaire, la webfiction, la réalisation de films et la photo cela va sans dire.

Dernière actualité en date, excusez du peu, il a écrit et réalisé les backstages de la toute dernière webfiction « Addicts » réalisée par Vincent Ravalec dont nous avons même pas eu le temps d’évoquer sur le blog de 3WDOC !

• ARTE – Addicts, la webfiction
  http://addicts.arte.tv/

Pour ceux d’entre vous qui ne connaissent que le nom de Philippe Brault, associé à ce genre nouveau qu’est le webdoc, la sortie de ce nouveau site sera l’occasion de découvrir ou de redécouvrir, les nombreux reportages qui ont jalonnés sa carrière de photographe ainsi que ses films et bien sûr Prison Valley !

Bonne visite… Le site existe en deux versions anglaise et française

• La version française du site de Philippe Brault
  http://www.philippe-brault.com/fr/
• La version anglaise du site de Philippe Brault
  http://www.philippe-brault.com/en/

* J2M affectionnait aussi ce vers, ce qui atteste au moins de ces goûts en matière poétique.

Pour aller plus loin

• ARTE – Addicts, la webfiction
  http://addicts.arte.tv/
• Prison Valley
  http://prisonvalley.arte.tv/

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 !

Vous pouvez voir une démonstration du player 3WDOC en version Beta, développé par nos soins. La démonstration est disponible à cette adresse :
http://demo.3wdoc.com/paris-5eme-arrondissement/

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© 2009 CANAL+

Voilà un diffuseur, canal +, qui semble vouloir créer un précédent dans le domaine encore vierge de la webfiction ® ou même de la websérie ®. Ce diffuseur rencontre un producteur opportuniste, tout heureux de contribuer à la production de cette série de prestige. Les deux rêvent-ils secrètement de décliner la série sur un jeu, sur facebook, sur un jeu sur facebook… Car à tort ou à raison l’univers évoquent furieusement un univers à la Besson (Nous n’avons pas dit à la Bresson et nous ne pensons pas à Eric Besson, deux nuances de taille), non on pense à « keulu », connu pour son sens commercial et du merchandising.

DESCRIPTION GENERALE

Techniquement, il faut le reconnaitre, cette série est à classer dans la catégorie poids-lourds, l’exploration des .xml donne une idée des moyens mis en place : gros tube chez Akamai (la edge suite 5 étoiles) avec 3 versions de vidéo HD : HAUT_DEBIT, BAS_DEBIT, bon boulot d’intégration et de développement (AS3, PHP) et bien sûr une grosse production audiovisuelle, genre cinéma ou série US de qualité.. Ainsi, bon an, mal an, cela donne Kali. Pour plus d’information sur l’origine du mot, un petit coup de google vous permettra assez vite de savoir « pourkoi kali ? » et les explications données dans le fichier BD.xml devraient vous satisfaire.

Kali, un personnage ?

Grâce à Julien Lepers, grande figure emblématique de l’ancien monde, celui où des images parlent dans cette objet, posé sur une commode avec dessus des boutons de couleurs; nous allons parvenir sans difficulté et de manière ludique à caractériser l’héroïne principale de la série dont on fait grand K. Commençons donc :

• Je suis une androïde (pas un téléphone)
• Je ne transpire * jamais même quand je cours ou que je bastonne des méchants.
• Je suis un genre de replicant qui sait quand une tortue est sur son dos.
• Je suis comme Jeanne d’Arc, j’entends de nombreuses voix dans l’Eurostar ou ailleurs.
• Je suis entouré de geeks et autres nerds qui fantasment beaucoup mais agissent peu avec moi tout au moins. No life quoi !
• … Je suis, je suis Kali

* CANAL + n’a pas besoin des budgets Gillette ou d’une vulgaire campagne de placement de produit pour déodorant. La chaine vit grâce aux abonnées et non de la publicité dixit papy Bonaldi

Il semble que l’enjeu de la série est de mousser la menace mais ô grand jamais de ne passer à l’acte. La réalité est sans doute trop dure, donc remisons le sang, les poils et la sueur à plus tard. Tout est fait pour faire croire au complot, aux méchants en lunettes noires mais rien ne va véritablement advenir. Dommage. C’est le travers inhérent à la culture geek/complot, assez populaire sur le web il faut le dire, c’est pour cela que sans doute que celle-ci imprègne Ad nauseam cette webfiction mais finalement le « plot » qui tient la série est un gros pétard mouillé.

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

La source du fichier xml BD.xml
Ce fichier contient les « pitchs » des épisodes ainsi qu’un grand nombre d’éléments sur la construction de l’interface.

PHOTOS

Les photos sont en haute définition 72 dpi 640×480 pixels. C’est probablement le produit d’un extraction de frames depuis les fichiers vidéo.

Les méchants – Sans aucun doute ! (partie 1)

Copyright© 2009 CANAL+

Les méchants – La coupe de champagne et le petit décolleté-tailleur-filofax le confirment… (partie 2)

Copyright© 2009 CANAL+

Une webfiction en prise avec la réalité, l’alcool chez les adolescent(e)s androïde(s) est aussi un problème.

Copyright© 2009 CANAL+

VIDEOS

Les vidéos disponibles pour cette fiction web sont à la fois au format FLV et au format MP4 via les deux protocoles HTTP et RTMP. Voici les quelques informations concernant la qualité d’encodage notamment.

Extrait des balises des 3 versions vidéos

	<!-- Copyright&copy; 2009 CANAL+ -->
<VIDEOS><BAS_DEBIT>rtmp://.../KALI_EPISODE_091014_CAN_104534_video_L.flv</BAS_DEBIT>
<HAUT_DEBIT>rtmp://.../KALI_EPISODE_091014_CAN_104534_video_H.flv</HAUT_DEBIT>
<HD></HD></VIDEOS></MEDIA><PUB><PAVE>seriesp</PAVE><BILLBOARD>serieb</BILLBOARD><HABILLAGE><VISUEL/>
<DESTINATION/></HABILLAGE></PUB></VIDEO><VIDEO>

FILENAME : KALI_TEASER_091015_CAN_104747_video_H.flv

SIZE
1.33 MB (1,364 KB / 1,397,556 bytes)

CONTAINER
File Type: Flash Video (.FLV)
Mime Type: video/x-flv
Compatibility Warning:
- Requires Flash 8+ capable player

USER DATA
Non significatif

VIDEO CODEC
FLV4/VP62
Flash/On2 VP6

IMAGE SIZE
640 x 368

AUDIO CODEC
MPEG-1 Layer 3
44100Hz 48 kb/s , Monophonic

MORE +
En savoir plus sur le format exact de la vidéo…

• LEN => 0:17.005 – En savoir +
• FRMS => 423 – En savoir +
• KBPS => 624 – En savoir +
• QF => 0.106 – En savoir +
• PICS/S => 24.878 – En savoir +
• FRAMES/S => 24.878 – En savoir +
• SAR => 1.739 (40:23) – En savoir +
• DAR => ### – En savoir +

FILENAME : KALI_TEASER_091015_CAN_104748_video_HD.mp4

SIZE
2.68 MB (2,754 KB / 2,820,625 bytes)

CONTAINER
mp42: MP4 v2 [ISO 14496-14]
- isom: MP4 Base Media v1 [IS0 14496-12:2003]
- mp41: MP4 v1 [ISO 14496-1:ch13]
- avc1: MP4 Base w/ AVC ext [ISO 14496-12:2005]
Recommended Display Size: 640 x 360
Created: 2009 Oct 16 17:48:04
Modified: 2009 Oct 16 17:48:04

USER DATA
Non significatif

VIDEO CODEC
avc1
H.264/MPEG-4 AVC

IMAGE SIZE
640 x 360

AUDIO CODEC
mp4a: MPEG-4 AAC LC
44100Hz 131 kb/s tot , stereo (2/0)

MORE +
En savoir plus sur le format exact de la vidéo…

• LEN => 0:16.640 – En savoir +
• FRMS => 415 – En savoir +
• KBPS => 1225 – En savoir +
• QF => 0.213 – En savoir +
• PICS/S => 25.000 – En savoir +
• FRAMES/S => 25.000 – En savoir +
• SAR => 1.778 (16:9) – En savoir +
• DAR => 1.778 (16:9) – En savoir +

Pour aller plus loin

• kali sur le le site canalplus.fr
  http://kali.canalplus.fr/