{"id":9151,"date":"2010-11-21T13:26:15","date_gmt":"2010-11-21T11:26:15","guid":{"rendered":"http:\/\/flaven.fr\/?p=9151"},"modified":"2013-10-02T04:38:45","modified_gmt":"2013-10-02T02:38:45","slug":"la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/11\/la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5\/","title":{"rendered":"La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5"},"content":{"rendered":"<p><!-- \/\/\/\/ --><\/p>\n<p><!-- La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5 --><br \/>\n<!--  Samuel Bollendorff, d\u00e9monstration, webdocumentaire, HTML5, webdoc, google, youtube, dailymotion, vimeo, player, narration, ipad, iphone, flash, Development, Animation, Photos, Vid\u00e9os, Texte, D\u00e9veloppement --><\/p>\n<p><a class=\"bigpic\" title=\"La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5 \" href=\"http:\/\/demo.3wdoc.com\/webdoc-html5-samuel-bollendorff\/index.php\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b.jpg\" alt=\"La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5 \" width=\"600\" height=\"235\" \/><\/a><em>Copyright\u00a9 Samuel Bollendorff pour le Centre National de l&#8217;Audiovisuel<\/em><\/p>\n<p>Le sujet est pointu, les propos sans appel, le constat accablant&#8230; Pas de doute on est bien dans un projet sign\u00e9 Samuel Bollendorff.<!--more--><\/p>\n<p>Notre fr\u00e9quentation assidue de Samuel Bollendorff, pour la conception de son site, nous a tout naturellement permis de lui proposer de tenter pour la premi\u00e8re fois sans doute, dans le monde du web&#8230;. la cr\u00e9ation d&#8217;un pilote de webdocumentaire en HTML5 \u00e0 l&#8217;aide de 3WDOC Player. Cette exp\u00e9rience ayant pour vocation de prouver plusieurs choses notamment celle que l&#8217;utilisation du format HTML5 dans une narration web est tout \u00e0 fait l\u00e9gitime et qu&#8217;elle peut satisfaire d&#8217;un point de vue de la qualit\u00e9 les exigences \u00e9ditoriales d&#8217;un photojournaliste tel que Samuel Bollendorff. Qui n&#8217;est pas tout \u00e0 fait un inconnu dans le petit monde du webdoc.<\/p>\n<p>Avec Samuel Bollendorff, il y a toujours une bonne raison de d\u00e9ranger nos consciences assoupies de consommateurs. Vous ne lirez pas de la m\u00eame fa\u00e7on chaque matin d\u00e9sormais l&#8217;\u00e9tiquette sur la bouteille de lait lorsque vous appr\u00eatez \u00e0 petit-d\u00e9jeuner.<br \/>\nLe sujet a \u00e9t\u00e9 r\u00e9alis\u00e9 par Samuel Bollendorff pour le compte du Centre National de l&#8217;Audiovisuel &#8211; Luxembourg.<\/p>\n<blockquote><p><strong>Vous pouvez voir <strong>&#8220;La crise du lait&#8221; par Samuel Bollendorff<\/strong>, un pilote de webdocumentaire en HTML5 con\u00e7u \u00e0 l&#8217;aide du 3WDOC Player :<br \/>\n<a href=\"http:\/\/demo.3wdoc.com\/webdoc-html5-samuel-bollendorff\/\" target=\"_blank\">http:\/\/demo.3wdoc.com\/webdoc-html5-samuel-bollendorff\/<\/a><\/strong><\/p><\/blockquote>\n<div id='gallery-1' class='gallery galleryid-9151 gallery-columns-1 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf-300x225.jpg 300w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf-94x70.jpg 94w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf-420x315.jpg 420w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<h4>Quelques informations sur la cr\u00e9ation de ce pilote de webdocumentaire :<\/h4>\n<p>Il s&#8217;agit avant tout d&#8217;une d\u00e9monstration des capacit\u00e9s du Player 3WDOC pour laquelle quelques effets suppl\u00e9mentaires ont \u00e9t\u00e9 int\u00e9gr\u00e9s sp\u00e9cialement :<\/p>\n<ul>\n<li><strong>L&#8217;effet typewriter<\/strong> &#8211; apparition progressive du texte \u00e0 la mani\u00e8re d&#8217;une machine \u00e0 \u00e9crire<\/li>\n<li><strong>L&#8217;effet MouseMove<\/strong> &#8211; apparition et disparition d&#8217;\u00e9l\u00e9ments au mouvement de la souris.<\/li>\n<\/ul>\n<p>Rappelons \u00e0 ce titre quelle est la finalit\u00e9 de 3WDOC Player. Sa finalit\u00e9 est de faciliter la narration sur le web en mettant \u00e0 la disposition des photographes, des auteurs et des r\u00e9alisateurs mais aussi des agences et professionnels du web un outil de montage de s\u00e9quences interactives leurs permettant de concevoir tout ou partie de leur site web multim\u00e9dia interactif ou webdocumentaire (documentaire interactif). <strong>3WDOC player est plus qu&#8217;un simple player de vid\u00e9o en HTML5, c&#8217;est un lecteur multim\u00e9dia de s\u00e9quences en HTML5.<\/strong><\/p>\n<p><strong>Ce player \u00e9crit en javascript est aujourd&#8217;hui pilotable par le biais de l&#8217;\u00e9dition d&#8217;une simple page web dont le langage de mise en forme n&#8217;est autre que le tr\u00e8s prometteur HTML5. Le code de ce player sera tr\u00e8s prochainement mis \u00e0 disposition sur notre site en version non commerciale. Il viendra avec une documentation compl\u00e8te permettant \u00e0 toute personne ayant quelques notions d&#8217;HTML5 de le prendre en main facilement et ainsi de cr\u00e9er son propre webdocumentaire (2) ou site multim\u00e9dia interactif (1).<\/strong><\/p>\n<p><b>Une version plus compl\u00e8te et aboutie, d\u00e9nomm\u00e9 3WDOC Studio, devrait suivre rapidement. Cette derni\u00e8re int\u00e9grera un \u00e9diteur de s\u00e9quence tr\u00e8s simple d&#8217;utilisation qui permettra la cr\u00e9ation des s\u00e9quences en mode visuel.<\/b><\/p>\n<p>Cette d\u00e9mo est visible sous tous les navigateurs modernes dans leurs versions r\u00e9centes :<\/p>\n<ul>\n<li><strong>Google Chrome :<\/strong> champion de l&#8217;interpr\u00e9tation HTML5 permet un visionnage optimal de l&#8217;ensemble des s\u00e9quences.<\/li>\n<li><strong>Safari :<\/strong> Un des premiers navigateurs \u00e0 avoir choisi le HTML5 comme fer de lance de la lecture multim\u00e9dia nouvelle g\u00e9n\u00e9ration.<\/li>\n<li><strong>Firefox :<\/strong> Bonne exp\u00e9rience utilisateur \u00e0 l&#8217;exception de la lecture vid\u00e9o qui pour le moment est un peu en de\u00e7a de Chrome et Safari.<\/li>\n<li><strong>Opera :<\/strong> Affichage parfait.<\/li>\n<\/ul>\n<p>En attendant la sortie d\u00e9finitive du tr\u00e8s prometteur Internet Explorer 9, les utilisateurs des anciennes version (ie6, ie7, ie8) se verrons proposer le t\u00e9l\u00e9chargement de GCF (Google Chrome Frame) qui leur permettra de visionner parfaitement le webdoc.<\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\" align=\"left\"><\/td>\n<td valign=\"top\" align=\"left\"><a title=\"T\u00e9l\u00e9charger Google Chrome\" href=\"http:\/\/www.google.com\/chrome\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/google-chrome-navigateur-web_s.jpg\" alt=\"T\u00e9l\u00e9charger Google Chrome\" width=\"200\" height=\"187\" \/><\/a><a title=\"T\u00e9l\u00e9charger Google Chrome\" href=\"http:\/\/www.google.com\/chrome\/\">T\u00e9l\u00e9charger Google Chrome<\/a><\/td>\n<td valign=\"top\" align=\"middle\">Nous vous invitons \u00e0 t\u00e9l\u00e9charger et \u00e0 utiliser le navigateur Chrome directement et \u00e0 visionner l&#8217;ensemble du webdocumentaire&#8230; C&#8217;est \u00e0 ce jour la meilleure exp\u00e9rience obtenue au gr\u00e9 de nos diff\u00e9rents essais.<\/td>\n<\/tr>\n<\/table>\n<p><b>(1) site web multim\u00e9dia interactif :<\/b> agencement et mise en page de s\u00e9quences multim\u00e9dia dans lequel il est offert au visiteur des menus interactifs lui permettant une navigation ais\u00e9e et un acc\u00e8s \u00e0 tous les contenu d&#8217;un clic.<br \/>\n<b>(2) webdocumentaire (documentaire interactif) :<\/b> encha\u00eenement de s\u00e9quences multim\u00e9dia et li\u00e9es entre elles par un ou plusieurs menus anim\u00e9s interactifs dans lequel le spectateur est un acteur \u00e0 part enti\u00e8re de la narration confront\u00e9 \u00e0 des choix li\u00e9s au contexte dans lequel il se trouve.<\/p>\n<h2>Pour aller plus loin<\/h2>\n<p>Deux articles de ce blog consacr\u00e9s aux capacit\u00e9s du player 3WDOC, du HTML5 et \u00e0 d&#8217;autres tentatives de cr\u00e9ation men\u00e9es en HTML5.<\/p>\n<ul>\n<li>HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC<br \/>\n<a href=\"https:\/\/flaven.fr\/2010\/09\/20\/html5-player-demo-html5-a-laide-du-player-3wdoc\/\" target=\"_blank\">http:\/\/blog.3wdoc.com\/fr\/2010\/09\/20\/html5-player-demo-html5-a-laide-du-player-3wdoc\/<\/a><\/li>\n<li>HTML5, Flash \u2013 Deux technologies pour le webdocumentaire<br \/>\n<a href=\"https:\/\/flaven.fr\/2010\/09\/20\/html5-player-demo-html5-a-laide-du-player-3wdoc\/\" target=\"_blank\">http:\/\/blog.3wdoc.com\/fr\/2010\/09\/14\/html5-flash-deux-technologies-pour-le-webdocumentaire\/<\/a><\/li>\n<\/ul>\n<p><strong>Le luxembourg<\/strong><\/p>\n<p>[geo_mashup_map  height=&#8221;235&#8243; width=&#8221;600&#8243; map_type=&#8221;G_HYBRID_MAP&#8221; zoom=&#8221;11&#8243; add_overview_control=&#8221;true&#8221; add_map_type_control=&#8221;true&#8221;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Copyright\u00a9 Samuel Bollendorff pour le Centre National de l&#8217;Audiovisuel Le sujet est pointu, les propos sans appel, le constat accablant&#8230; Pas de doute on est&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/11\/la-crise-du-lait-par-samuel-bollendorff-une-demonstration-de-webdocumentaire-en-html5\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">La crise du lait par Samuel Bollendorff, une d\u00e9monstration de webdocumentaire en HTML5<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Samuel Bollendorff d\u00e9montre la puissance du webdocumentaire en HTML5 avec La crise du lait. Utilisation de 3WDOC Player pour des r\u00e9sultats \u00e9ditoriaux de qualit\u00e9.","bf_ai_og_title":"Webdocumentaire en HTML5 par Bollendorff","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3436,3451,3435],"tags":[],"class_list":["post-9151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-storytelling-webdocs","category-web-design-front-end","category-web-development"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2nB","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/11\/3wdoc_crise_du_lait_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=9151"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9151\/revisions"}],"predecessor-version":[{"id":9735,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9151\/revisions\/9735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9734"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=9151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=9151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=9151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}