{"id":3008,"date":"2011-04-08T14:50:41","date_gmt":"2011-04-08T12:50:41","guid":{"rendered":"http:\/\/flaven.fr\/?p=3008"},"modified":"2026-09-16T10:10:59","modified_gmt":"2026-09-16T08:10:59","slug":"20thingsilearned-com-google-chrome-html5-une-experience-remarquable-en-html5-a-decouvrir","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/04\/20thingsilearned-com-google-chrome-html5-une-experience-remarquable-en-html5-a-decouvrir\/","title":{"rendered":"20thingsilearned.com, Google, Chrome, HTML5 &#8211; Une exp\u00e9rience remarquable en HTML5, \u00e0 d\u00e9couvrir"},"content":{"rendered":"\n<p><!-- 20thingsilearned.com, Google, Chrome, HTML5 - Une exp\u00e9rience remarquable en HTML5, \u00e0 d\u00e9couvrir --><br \/>\n<!--  HTML5, Hakim El Hattab, Erik Kallevig, Google, Chrome    --><\/p>\n<p><a title=\"20thingsilearned.com, Google, Chrome, HTML5 - Une exp\u00e9rience remarquable en HTML5, \u00e0 d\u00e9couvrir\" class=\"bigpic\" href=\"https:\/\/flaven.fr\/2011\/04\/08\/20thingsilearned-com-google-chrome-html5-une-experience-remarquable-en-html5-a-decouvrir\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b.jpg\" width=\"600\" height=\"235\" alt=\"20thingsilearned.com, Google, Chrome, HTML5 - Une exp\u00e9rience remarquable en HTML5, \u00e0 d\u00e9couvrir\" \/><\/a><em>Copyright&copy;www.20thingsilearned.com<\/em><\/p>\n<p>Le nombre de projets HTML5 significatifs et disponibles sur le web s&#8217;accroit \u00e0 un rythme soutenu qu&#8217;il devient difficile d&#8217;en s\u00e9lectionner, tous ces projets \u00e9tant de bonne tenue. <!--more-->Il faut pourtant faire un choix, on en a donc s\u00e9lectionn\u00e9 deux qui nous semble int\u00e9ressant \u00e0 plus d&#8217;un titre. <\/p>\n<ol>\n<li>20 Things I Learned About Browsers and the Web<br \/>\nLe premier, remarquable, qui simule le principe du livre que l&#8217;on feuillette, imitant et am\u00e9liorant m\u00eame le comportement du fameux &#8220;flipbook&#8221; de flash tout en HTML5.<\/li>\n<li>Cycleblob, un projet moins spectaculaire mais qui explore le domaine du jeu et les capacit\u00e9s du HTML5 \u00e0 concevoir un gamedesign.\n<\/li>\n<\/ol>\n<h4>20 Things I Learned About Browsers and the Web<\/h4>\n<p>C&#8217;est le projet \u00e0 voir&#8230;. en HTML5, absolument remarquable dans sa r\u00e9alisation et sa conception. On retrouve derri\u00e8re les principaux prescripteurs de l&#8217;HTML5 \u00e0 commencer par la &#8220;Google Chrome Team&#8221;. Tout est extr\u00eamement soign\u00e9 de la conception du code \u00e0 la r\u00e9alisation, ne passant par la qualit\u00e9 \u00e9ditoriale du projet. Chapeau bas donc&#8230;<\/p>\n<p><b>Il y aussi derri\u00e8re l&#8217;un des d\u00e9veloppeurs en HTML5 les plus audacieux du moment, Hakim El Hattab (@hakimel)<\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n&lt;!-- \r\n\t\t  20 Things I Learned About Browsers and the Web\r\n\t\t  Built by Fi (www.f-i.com) for the Google Chrome Team.\r\n\t\t  \r\n\t\t  @author Hakim El Hattab\r\n\t\t  @author Erik Kallevig\r\n\t\t  --&gt;\r\n\r\n<\/pre>\n<p><b>Une des conclusions de ce &#8220;petit livre bleu&#8221;<\/b><br \/>\nCes quelques phrases sont \u00e0 r\u00e9p\u00e9ter comme des mantras pour toute personne qui souhaite se lancer dans le d\u00e9veloppement en HTML5 en particulier et le d\u00e9veloppement en g\u00e9n\u00e9ral. On y retrouve les principales conclusions pr\u00f4n\u00e9es par Google auxquelles on ne peut qu&#8217;adh\u00e9rer :<\/p>\n<ol>\n<li>Utilisez un navigateur moderne<\/li>\n<li>Le web ne cesse d&#8217;\u00e9voluer et un nouvelle avenir s&#8217;ouvre pour les webapplications notamment en HTML5.<\/li>\n<li>Il faut toujours essayer de nouvelles choses.<\/li>\n<\/ol>\n<p><b>Le texte orignal de la conclusion<\/b><\/p>\n<blockquote><p>\nUse a modern browser, first and foremost. Or try a new one and see if it brings you happier browsing that\u2019s better suited to your needs.<\/p>\n<p>The web will keep evolving \u2014 dramatically! Support cutting-edge web technologies like HTML5, CSS3 and WebGL, because they\u2019ll help the web community imagine and create a future of great, innovative web apps.<\/p>\n<p>Lastly, try new things. The web is a new and exciting place every day, so try tasks that you didn\u2019t think could be done online &#8212; 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!\n<\/p><\/blockquote>\n<p><i>Source : <a href=\"http:\/\/www.20thingsilearned.com\/conclusion\/2\">http:\/\/www.20thingsilearned.com\/conclusion\/2<\/a><\/i><\/p>\n<div id='gallery-1' class='gallery galleryid-3008 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\/2011\/04\/20thingsilearned_cycleblob_com_b_bf.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b_bf-300x225.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b_bf-300x225.jpg 300w, https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b_bf-94x70.jpg 94w, https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b_bf-420x315.jpg 420w, https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_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>Cycleblob<\/h4>\n<p>Outre que le gamedesign soit inspir\u00e9 par le film TRON, qui est sans doute le film culte pour de nombreux d\u00e9veloppeurs, l&#8217;ensemble du gamedesign est tout entier contenu dans la balise <code>&lt;canvas&gt;...&lt;\/canvas&gt;<\/code>.<br \/>\nCette balise permet de nombreuses manipulations. Chez 3WDOC, nous avons m\u00eame r\u00e9aliser des essais d&#8217;une carte isom\u00e9trique sur laquelle se d\u00e9place un personnage, ce sera aussi en ligne prochainement. <\/p>\n<blockquote><p>\nCycleblob &#8211; a 3D lightcycle game based on a concept from the 1982 movie &#8220;TRON&#8221;. Cycleblob uses WebGL and JavaScript<br \/>\nto bring 3D content to the web browser\n<\/p><\/blockquote>\n<h2>Pour aller plus loin<\/h2>\n<ul>\n<li>Le projet du moment \u00e0 voir&#8230;. en HTML5<br \/><a href=\"http:\/\/www.20thingsilearned.com\/\" target=\"_blank\">http:\/\/www.20thingsilearned.com\/<\/a><\/li>\n<li>Hakim El Hattab de Stockholm, Sweden! Un artiste et une r\u00e9f\u00e9rence en mati\u00e8re d&#8217;HTML5 qui a travaill\u00e9 sur 20thingsilearned.com<br \/><a href=\"http:\/\/hakim.se\/experiments\" target=\"_blank\">http:\/\/hakim.se\/experiments<\/a><\/li>\n<li>Erik Kallevig (@ekallevig), l&#8217;autre d\u00e9veloppeur web du projet 20thingsilearned.com<br \/><a href=\"http:\/\/ekallevig.com\/\" target=\"_blank\">http:\/\/ekallevig.com\/<\/a><\/li>\n<li>Fi (Fantasy Interactive) &#8211; The Award Winning Global Digital Agency<br \/><a href=\"http:\/\/www.f-i.com\/\" target=\"_blank\">http:\/\/www.f-i.com\/<\/a><\/li>\n<li>Cycleblob, A WebGL lightcycle game based on the concept of the movie TRON. written by Shy Shalom<br \/><a href=\"http:\/\/cycleblob.com\/\" target=\"_blank\">http:\/\/cycleblob.com\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>20thingsilearned.com, Google, Chrome, HTML5 &#8211; Une exp\u00e9rience remarquable en HTML5, \u00e0 d\u00e9couvrir [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":9654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"20thingsilearned.com pr\u00e9sente deux projets HTML5 remarquables: un flipbook interactif et un jeu innovant. Utilisez Google Chrome pour des r\u00e9sultats optimaux.","bf_ai_og_title":"Projets HTML5: 20thingsilearned.com","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":[3510,372,1073,2214,1074,2185],"class_list":["post-3008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-storytelling-webdocs","category-miscellaneous-other","category-web-design-front-end","tag-canva","tag-chrome","tag-erik-kallevig","tag-google","tag-hakim-el-hattab","tag-html5"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-Mw","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/04\/20thingsilearned_cycleblob_com_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3008","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=3008"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3008\/revisions"}],"predecessor-version":[{"id":9655,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3008\/revisions\/9655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9654"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}