{"id":9187,"date":"2010-12-03T14:04:32","date_gmt":"2010-12-03T12:04:32","guid":{"rendered":"http:\/\/flaven.fr\/?p=9187"},"modified":"2013-10-01T06:21:52","modified_gmt":"2013-10-01T04:21:52","slug":"les-exploits-de-robby-naish-habille-par-tommy-hilfiger-un-superbe-site-evenementiel-en-html5-plein-ecran","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/12\/les-exploits-de-robby-naish-habille-par-tommy-hilfiger-un-superbe-site-evenementiel-en-html5-plein-ecran\/","title":{"rendered":"Les exploits de Robby Naish habill\u00e9 par Tommy Hilfiger, un superbe site \u00e9v\u00e9nementiel en HTML5 plein \u00e9cran!"},"content":{"rendered":"<p><!--Les exploits de Robby Naish habill\u00e9 par Tommy Hilfiger, un superbe site \u00e9v\u00e9nementiel en HTML5 plein \u00e9cran!  --><br \/>\n<!--  Robbie Naish, Tommy Hilfiger, mini-site, \u00e9v\u00e9nementiel, Google, LEWEB, Marketing, Tracking, API, HTML5, Tony Hawk, Kelly Slater --><\/p>\n<p><a title=\"Les exploits de Robby Naish habill\u00e9 par Tommy Hilfiger, un superbe site \u00e9v\u00e9nementiel en HTML5 plein \u00e9cran!\" class=\"bigpic\" href=\"http:\/\/demo.3wdoc.com\/webdoc-html5-robby-naish\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_b.jpg\" width=\"600\" height=\"235\" alt=\"Les exploits de Robbie Naish, en costume Tommy Hilfiger, une d\u00e9monstration de mini-site \u00e9v\u00e9nementiel en HTML5\" \/><\/a><\/p>\n<p>Lorsque, chez 3WDOC, il nous a \u00e9t\u00e9 propos\u00e9 de faire un site \u00e9v\u00e9nementiel en HTML5 \u00e0 partir de la session de photos de mode de Marcel Hartmann sur Robby Naish pour la collection Tommy Hilfiger Tailored \u00e0 Hawa\u00ef, toute l&#8217;\u00e9quipe de 3WDOC s&#8217;est pinc\u00e9 3 fois pour se demander si elle ne r\u00eavait pas ! <!--more-->Robby Naish, outre le fait d&#8217;\u00eatre une ic\u00f4ne, comme l&#8217;est Tony Hawk pour le skate ou Kelly Slater pour le surf, est en plus une personnalit\u00e9 d&#8217;exception.<\/p>\n<p>Eminemment charismatique et sympathique, il continue d&#8217;exceller \u00e0 presque 50 ans dans des sports dont il est quasiment l&#8217;inventeur, en costume Tommy Hilfiger qui plus est.<\/p>\n<h2>Que penser de ce site \u00e9v\u00e9nementiel<\/h2>\n<p>Ce site prouve plusieurs choses :<\/p>\n<ul>\n<li>A l&#8217;\u00e9vidence, le sport et une certaine \u00e9thique conservent. Robby Naish nous en fait une d\u00e9monstration magistrale.<\/li>\n<li>La technologie 3WDOC est r\u00e9ellement polyvalente, elle f\u00e9d\u00e8re tous les types d&#8217;usage sur tous les types de sujets. Est-ce l&#8217;effet Robby Naish mais cette d\u00e9monstration nous a d\u00e9finitivement inspir\u00e9 une &#8220;baseline&#8221; pour notre outil.\n<li>Elle montre que le monde du marketing et de la communication peut tr\u00e8s l\u00e9gitimement s&#8217;int\u00e9resser \u00e0 ce nouveau format qu&#8217;est le webdocumentaire et ainsi l&#8217;adapter dans le cadre d&#8217;une communication moderne \u00e0 une utilisation corporate sur le th\u00e8me du site \u00e9v\u00e9nementiel.<\/li>\n<li>La n\u00e9cessit\u00e9 de produire et de r\u00e9agir vite notamment \u00e0 destination des nouvelles plates-formes, mobiles tel que l&#8217;iPad avec lequel l&#8217;HTML5 sera  bient\u00f4t compatible.<\/li>\n<li>L&#8217;obligation faite aux marques de s&#8217;ouvrir \u00e0 une communication en phase avec un march\u00e9 totalement orient\u00e9 et gouvern\u00e9 par les internautes dans les valeurs et dans les usages, d&#8217;offrir des histoires et des exp\u00e9riences et non de simples mini-sites.<\/li>\n<li>Le choix d&#8217;une technologie polyvalente, robuste et ouverte pour agr\u00e9ger tous ces usages et s&#8217;ouvrir \u00e0 toutes les plates-formes existantes et \u00e0 venir (Facebook, Twitter&#8230;). <strong>3WDOC Studio<\/strong> qui sera tr\u00e8s prochainement disponible en test, est cet outil polyvalent capable de cr\u00e9er et d\u00e9livrer, sur le web, en HTML5 des exp\u00e9riences Rich Media optimis\u00e9es. Cela peut \u00eatre des webdocumentaires, mais pas seulement. Il peut s&#8217;agir tout simplement de sites \u00e9v\u00e9nementiel, de slide-show photo\/vid\u00e9o, de modules informationnels et interactifs au sein d\u2019un site existant (blog, site de ecommerce&#8230;), d\u2019extensions fonctionnelles port\u00e9es au sein de CMS&#8230; Bref de contenus web enrichis d\u2019une tr\u00e8s grande h\u00e9t\u00e9rog\u00e9n\u00e9it\u00e9 et d\u2019une grande interactivit\u00e9. A titre d&#8217;information, HTML5 est soutenu et adopt\u00e9 par Google, Microsoft, Apple, Mozilla&#8230; Ils repr\u00e9sentent \u00e0 eux seuls 100% du march\u00e9 des navigateurs et donc d&#8217;acc\u00e8s aux utilisateurs.<\/li>\n<\/ul>\n<p><b>Baseline 3WDOC<\/b><\/p>\n<blockquote><p>\n\t<strong>3WDOC studio is a versatile tool to create and deliver rich media experiences optimized in HTML5 to run across the web.<\/strong><\/p>\n<p><strong>3WDOC studio est un outil polyvalent pour cr\u00e9er et d\u00e9livrer, sur le web, en HTML5 des exp\u00e9riences Rich Media optimis\u00e9es.<\/strong>\n<\/p><\/blockquote>\n<p><strong>Toutes les captures ont \u00e9t\u00e9 r\u00e9alis\u00e9es sous Google Chrome<\/strong><\/p>\n<div id='gallery-1' class='gallery galleryid-9187 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\/12\/3wdoc_robbie_naish_bf.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf-300x225.jpg 300w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf-94x70.jpg 94w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf-420x315.jpg 420w, https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<blockquote><p>\nLes exploits de Robby Naish habill\u00e9 par Tommy Hilfiger<\/p>\n<ul>\n<li>\n\t<a href=\"http:\/\/demo.3wdoc.com\/webdoc-html5-robby-naish\/\" target=\"_blank\">http:\/\/demo.3wdoc.com\/webdoc-html5-robby-naish\/<\/a><\/li>\n<\/ul>\n<p>Les droits de propri\u00e9t\u00e9 intellectuelle sur l\u2019ensemble des \u00e9l\u00e9ments (animations, photographies, illustrations, images, textes, recettes, fiches techniques, musiques etc&#8230;) composant les \u00e9l\u00e9ments de cet article sont la propri\u00e9t\u00e9 exclusive de leurs auteurs.<\/p>\n<\/blockquote>\n<h2>Cr\u00e9dits<\/h2>\n<p>Un grand merci \u00e0 tous les personnes qui ont rendu possible ce projet.<\/p>\n<ul>\n<li>Conception : Hecube<\/li>\n<li>Production vid\u00e9o : Treets TV<\/li>\n<li>D\u00e9veloppement Web : 3wdoc<\/li>\n<li>Un film r\u00e9alis\u00e9 par Christophe Simon<\/li>\n<li>Robby Naish  \/ Lui-m\u00eame<\/li>\n<li>Marcel Hartmann \/ Photographie<\/li>\n<li>Xavier Privat \/ Journaliste<\/li>\n<li>Philipp Hohndorf \/ 1er assistant photographe<\/li>\n<li>Luciano Neves \/ Styliste de mode<\/li>\n<li>Camille Kozuki \/ Coiffure et maquillage<\/li>\n<li>Dana Hamilton \/ Unit\u00e9 de production d&#8217;Hawa\u00ef<\/li>\n<li>Mia Meliava \/ Coordination France<\/li>\n<li>Valerie D\u2019Olce \/ Coordinateur Tommy Hilfiger<\/li>\n<li>R-mute \/ Montage<\/li>\n<li>Ulrich Robin \/ Design sonore<\/li>\n<\/ul>\n<p><b>Un grand merci \u00e0 Tommy Hilfiger Europe, la famille Naish pour leur gentillesse et leur g\u00e9n\u00e9rosit\u00e9.<\/b><\/p>\n<h4>Liens<\/h4>\n<ul>\n<li>Tommy Hilfiger<br \/>\n\t<a href=\"http:\/\/www.tommy.com\/\" target=\"_blank\">http:\/\/www.tommy.com\/<\/a><\/li>\n<li>Robby Naish &#8211; Naishsails &#8211; Windsurfing<br \/>\n\t<a href=\"http:\/\/www.naishsails.com\/\" target=\"_blank\">http:\/\/www.naishsails.com\/<\/a><\/li>\n<li>Marcel Hartmann &#8211; Photographer<br \/>\n\t<a href=\"http:\/\/www.hartmann-marcel.com\/\" target=\"_blank\">http:\/\/www.hartmann-marcel.com\/<\/a><\/li>\n<li>R-mute<br \/>\n\t<a href=\"http:\/\/www.rmute.fr\/\" target=\"_blank\">http:\/\/www.rmute.fr\/<\/a><\/li>\n<\/ul>\n<h2>Ce qu&#8217;il faut retenir sur 3WDOC Player<\/h2>\n<ul>\n<li>ce n&#8217;est pas juste un simple player vid\u00e9o en HTML5<\/li>\n<li>il affiche le contenu Web diff\u00e9remment en ajoutant la notion de temps dans la page web<\/li>\n<li>il affiche facilement le contenu enrichi d&#8217;une page web, n&#8217;importe o\u00f9 sur l&#8217;\u00e9cran, mais aussi \u00e0 tout moment dans la narration choisie.<\/li>\n<li>il est optimis\u00e9 pour le r\u00e9f\u00e9rencement contrairement \u00e0 Flash<\/li>\n<li>il permet un positionnement ais\u00e9 dans la largeur, la hauteur et la profondeur des \u00e9l\u00e9ments html<\/li>\n<li>il permet aux \u00e9diteurs de contenu de ne pas tout mettre dans une page. Il est possible de raconter une histoire \u00e0 l&#8217;utilisateur.<\/li>\n<li>il lit un code qu&#8217;il est tr\u00e8s facile de s&#8217;approprier. Un petit niveau de html suffit.<\/li>\n<li>il ne n\u00e9cessite pas de plugin \u00e0 installer dans la navigateur, comme flash ou silverlight.<\/li>\n<li>il int\u00e8gre toute l&#8217;intelligence n\u00e9cessaire \u00e0 l&#8217;\u00e9laboration d&#8217;un site enrichi.<\/li>\n<li><strong>fait de la cr\u00e9ation d&#8217;un site enrichi un simple probl\u00e8me d&#8217;int\u00e9gration. Pas de d\u00e9veloppement, un cycle de d\u00e9veloppement ultra rapide&#8230; Agile donc<\/strong><\/li>\n<\/ul>\n<h2>What to remember on the 3WDOC technology?<\/h2>\n<p>For the people who does not speak french, here is the list.<\/p>\n<ul>\n<li>is not just another html5 video player.<\/li>\n<li>displays Web content differently adding a timeline within the web page <\/li>\n<li>displays rich content easily anywhere on the screen but also anytime in the story that is told in a web page.<\/li>\n<li>Ready for SEO optimized unlike Flash<\/li>\n<li>allows easy positioning in width, height and depth of html elements<\/li>\n<li>allows publishers not tell everything in one html screen <\/li>\n<li>reads a custom markup language very easy to learn<\/li>\n<li>does not need any third-party browser plug-ins, like flash or silverlight.<\/li>\n<li>integrates all the intelligence a rich media website needs.<\/li>\n<li><strong>making creation just a problem of HTML integration. No development, a development cycle ultra fast &#8230; So Agile<\/strong><\/li>\n<\/ul>\n<p><strong>Une pr\u00e9sentation de 3WDOC sera faite dans le cadre du Google Workshop, le 8 d\u00e9cembre 2010 \u00e0 LEWEB&#8217;10. &#8220;Discover all the potential of HTML5 to build rich applications for modern browsers. HTML5: portrait of the browser as a platform&#8221;<\/strong><\/p>\n<p>Source : <a href=\"http:\/\/www.leweb.net\/agenda\/2010\/google-workshop\">http:\/\/www.leweb.net\/agenda\/2010\/google-workshop<\/a><\/p>\n<p><strong>Hawaii<\/strong><\/p>\n<p>[geo_mashup_map  height=&#8221;235&#8243; width=&#8221;600&#8243; map_type=&#8221;G_HYBRID_MAP&#8221; zoom=&#8221;7&#8243; add_overview_control=&#8221;true&#8221; add_map_type_control=&#8221;true&#8221;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque, chez 3WDOC, il nous a \u00e9t\u00e9 propos\u00e9 de faire un site \u00e9v\u00e9nementiel en HTML5 \u00e0 partir de la session de photos de mode de&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/12\/les-exploits-de-robby-naish-habille-par-tommy-hilfiger-un-superbe-site-evenementiel-en-html5-plein-ecran\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Les exploits de Robby Naish habill\u00e9 par Tommy Hilfiger, un superbe site \u00e9v\u00e9nementiel en HTML5 plein \u00e9cran!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Les exploits de Robby Naish, habill\u00e9 par Tommy Hilfiger, sont mis en avant sur un site \u00e9v\u00e9nementiel HTML5 plein \u00e9cran. 3WDOC utilise des outils modernes.","bf_ai_og_title":"Robby Naish en Tommy Hilfiger","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,1,3451],"tags":[2183,990,2214,2185,991,992,468,993,994,995,996,116],"class_list":["post-9187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-storytelling-webdocs","category-miscellaneous-other","category-web-design-front-end","tag-api","tag-evenementiel","tag-google","tag-html5","tag-kelly-slater","tag-leweb","tag-marketing","tag-mini-site","tag-robbie-naish","tag-tommy-hilfiger","tag-tony-hawk","tag-tracking"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2ob","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/12\/3wdoc_robbie_naish_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9187","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=9187"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9187\/revisions"}],"predecessor-version":[{"id":9653,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9187\/revisions\/9653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9652"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=9187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=9187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=9187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}