Wygday 2011 - Introduction à HTML5

Emplacement éventuel pour votre logo,[object Object]

Introduction à ,[object Object],David Rousset - @davrousGiovanni Clément,[object Object],http://blogs.msdn.com/davrousWygwam France,[object Object],Microsoft France - DPE,[object Object]

Agenda,[object Object],C’est quoi HTML5 et pourquoi c’est important ?,[object Object],Introduction aux bases de HTML5,[object Object],Bonnes pratiques ,[object Object],HTML5Labs,[object Object],Les challenges de l’écriture d’applications HTML5 ,[object Object]

Distribution normale,[object Object],http://on.wsj.com/f8PBa9,[object Object],Retour sur les bancs de l’école,[object Object]

http://on.wsj.com/f8PBa9,[object Object],C’est quoi le rapport avec la choucroute ?,[object Object],Les phases d’adoption d’une technologie,[object Object]

Résumé des épisodes précédents,[object Object]

Adobe dans la tourmente,[object Object],Les attaques d’Apple face à Flash,[object Object]

La position d’Apple,[object Object],Une réponse possible…,[object Object]

Apple aime HTML5.,[object Object]

Google aime HTML5.,[object Object]

Microsoft aime HTML5.,[object Object]

Philippe Le HégaretW3C Leader,[object Object]

Une nouvelle saison commence !,[object Object]

Wygday 2011 - Introduction à HTML5

HTML5 Working Groups,[object Object],HTML,[object Object],WebApps,[object Object],CSS,[object Object],SVG,[object Object],webPerformance,[object Object],EcmaScript,[object Object],Geo-Location,[object Object],hybi,[object Object],Plus de 100 specifications !,[object Object]

HTML5 devrait être prêt pour le “Last Call” en Mai 2011,[object Object],CSS GENERATED CONTENT FOR PAGED MEDIA,[object Object],PROGRAMMABLE HTTP CACHING & SERVING,[object Object],CSS CASCADING & INHERITANCE,[object Object],CSS BACKGROUNDS & BORDERS,[object Object],DOM L2 TRAVERSAL AND RANGE,[object Object],UNIFORM MESSAGING POLICY,[object Object],CSS MULTI-COLUMN LAYOUT,[object Object],DOM L3 VIEWS & FOMUTING,[object Object],DOM L3 ABSTRACT SCHEMAS,[object Object],CSS 2D TRANSFORMATIONS,[object Object],CSS 3D TRANSFORMATOINS,[object Object],CSS BASIC USER INTERFACE,[object Object],CSS FLEXIBLE BOX LAYOUT,[object Object],PAINTING, FILLING, COLOR,[object Object],HTML5 DIFF FROM HTML4,[object Object],DOCUMENT STRUCTURE,[object Object],CSS GRID POSITIONING,[object Object],CSS TEMPLATE LAYOUT,[object Object],CSS BASIC BOX MODEL,[object Object],DOM L3 LOAD & SAVE,[object Object],CANVAS 2D CONTENT,[object Object],XMLHTTPREQUEST L2,[object Object],SERVER-SENT EVENTS,[object Object],WEB SQL DATABASDE,[object Object],CSS WRITING MODES,[object Object],ELEMENT TRAVERSAL,[object Object],CSS VALUES & UNITS,[object Object],DOM L3 VALIDATION,[object Object],CSS SNAPSHOT 2007,[object Object],CSS MEDIA QUERIES,[object Object],TEXT ALTERNATIVES,[object Object],POLYGLOT MARKUP,[object Object],CSS IMAGE VALUES,[object Object],CSS PRINT PROFILE,[object Object],XMLHTTPREQUEST,[object Object],PROGRESS EVENTS,[object Object],CSS PAGED MEDIA,[object Object],CSS TRANSITIONS,[object Object],CSS ANIMATIONS,[object Object],CSS NAMESPACES,[object Object],WEB SOCKETS API,[object Object],SELECTORS API L2,[object Object],ECMASCRIPT 262,[object Object],WEB DOM CORE,[object Object],DOM L3 EVENTS,[object Object],HTML5 MARKUP,[object Object],DOM L2 EVENTS,[object Object],SELECTORS API,[object Object],DOM L3 XPATH,[object Object],WEB STORAGE,[object Object],WEB WORKERS,[object Object],DOM L2 VIEWS,[object Object],DOM L2 HTML,[object Object],DOM L2 STYLE,[object Object],CSS LINE GRID,[object Object],TRANSFORMS,[object Object],BASIC SHAPES,[object Object],CSS SCOPING,[object Object],DOM L3 CORE,[object Object],HTML + RDFA,[object Object],DOM L2 CORE,[object Object],CSS SPEECH,[object Object],MICRODATA,[object Object],GRADIENTS,[object Object],CSS COLOR,[object Object],CSS FONTS,[object Object],SCRIPTING,[object Object],INDEX DB,[object Object],CSS RUBY,[object Object],CSS TEXT,[object Object],STYLING,[object Object],WEB IDL,[object Object],FILE API,[object Object],DOM L1,[object Object],FILTERS,[object Object],HTML5,[object Object],FONTS,[object Object],PATHS,[object Object],CORS,[object Object],SMIL,[object Object],TEXT,[object Object],HTML,[object Object],CSS,[object Object],ECMA Script,[object Object],SVG,[object Object],Web Apps,[object Object],First published working draft,[object Object],Candidaterecommendation,[object Object],Working draft,[object Object],Last call,[object Object],Recommendation,[object Object]

Mais qui est prêt pour HTML5 ?,[object Object],Pas encore tout le monde…,[object Object]

Part de marché des navigateurs « HTML5 »,[object Object],IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 + Safari 5,[object Object],Selon Netmarketshare.com le 10/05/2011,[object Object]

Chiffres mondiaux au mois de février 2011,[object Object]

54%*,[object Object],Des navigateurs supportent <canvas>,[object Object],* Source: caniuse.com, Mai 2011,[object Object]

11%*,[object Object],Utilisent encore IE 6†,[object Object],* La Chine représente à elle seule 5.8%. USA à 0.6% ,[object Object],† IE 6.0 existe depuis Août 2001 ,[object Object]

http://www.theie6countdown.com,[object Object]

95,91%*,[object Object],Naviguent depuis une machine desktop,[object Object],* Dont 89% tournent sous Windows,[object Object]

3,9%*,[object Object],depuis un navigateur mobile,[object Object],* Ce chiffre a doublé en 12 mois !,[object Object]

Et du côté des plug-ins?,[object Object],Pas si mort que ça hein…,[object Object]

Introduction aux bases d’HTML5,[object Object],Revue à travers quelquesexemples,[object Object]

HTML5,[object Object],HTML5 : Le markup de la future génération d’applications Web,[object Object],CSS3 (CascadingStyle Sheets) : permet d’appliquer des styles au document,[object Object],SVG 1.1 (ScalableVectorGraphics) : moteur de dessin vectoriel,[object Object],+ plein d’autres technologies plus ou moins en rapport,[object Object],Un terme générique devenu cool… mais fourre-tout !,[object Object]

Découvrons HTML5,[object Object],A travers une belle série de démos !,[object Object],demo ,[object Object]

Les orientations prises pour IE9,[object Object],.,[object Object],Performance. HTML5 prêt pour la production. Suite de tests.,[object Object],Standards,[object Object],Communauté,[object Object]

Mais alors, peut-on commencer à utiliser HTML5 ?,[object Object],Oui ! Mais en faisant attention, c’est tout.,[object Object]

Progressive ,[object Object],Enhancement,[object Object],Graceful ,[object Object],Degradation,[object Object]

Un exemple de bonnes pratiques,[object Object],Utilisation de Modernizr dans ASP.NET MVC 3,[object Object],Fallbacks, CSS3Pie,[object Object],demo ,[object Object]

HTML5Labs.com ,[object Object],Permet de tester des spécifications encore trop expérimentales sans toucher le navigateur,[object Object],Actuellement 4 spécifications en test :,[object Object],WebSockets,[object Object],File API,[object Object],IndexDB,[object Object],Media Capture API,[object Object],L’approche de Microsoft pour les expérimentations,[object Object]

Méthodes existantes,[object Object],Pour palier aux limitations d’HTTP,[object Object],Serveur,[object Object],Polling,[object Object],Client,[object Object],Polling interval,[object Object],Serveur,[object Object],Long,[object Object],Polling,[object Object],Client,[object Object]

La spécification WebSockets – 2 groupes,[object Object],W3C WebSockets API,[object Object],Web Applications Working Group,[object Object],WebSockets Protocol,[object Object],HyBi Working Group,[object Object]

Web Sockets,[object Object],W3C API,[object Object],First Draft,[object Object],W3C API,[object Object],Second Draft,[object Object],W3C API,[object Object],Third Draft,[object Object],APR 2011 ,[object Object],JAN 2009 ,[object Object],[Revs 02– 76],[object Object],~80 drafts so far and still changing,[object Object],IETF v00,[object Object],IETF v01,[object Object],IETF v02,[object Object],IETF v03,[object Object],IETF v04,[object Object],IETF v05,[object Object],IETF v06,[object Object],First Working Draft,[object Object],IETF HyBi WG Adopts,[object Object],9/1/10,[object Object],10/17/10,[object Object],1/9/09 ,[object Object],10/29/09,[object Object],4/23/09,[object Object],5/23/10,[object Object],9/24/10,[object Object],1/11/11,[object Object],2/8/11,[object Object],2/9/11,[object Object],2/25/11,[object Object],3/11/11,[object Object],12/22/09,[object Object],Implemented ,[object Object],in browsers v.75,[object Object],Jan 2010,[object Object],Breaking change,[object Object],WebSockets v.76,[object Object],June 2010,[object Object],Potential Security Issue Identified WebSockets disabled,[object Object],Dec 2010,[object Object],Prototype,[object Object],w/ v04,[object Object],Prototype,[object Object],w/ v05,[object Object],Prototype,[object Object],w/ v06,[object Object]

Démos WebSockets,[object Object],HTML5Labs.com,[object Object],demo ,[object Object]

Les challenges HTML5,[object Object]

Le rêve des développeurs,[object Object],Ecrire l’application 1 fois et le plus vite possible,[object Object],Eviter de tester 12 523 fois l’application sur autant de plateformes différentes,[object Object],Exécution cross-plateformes pour augmenter la rentabilité,[object Object],HTML5, le messie?,[object Object]

Arrêtez de rêver,[object Object],Le père noël HTML5 ne règle pas encore tout… mais ce n’est pas une ordure pour autant ;-),[object Object]

1er Challenge : les différences de rendu,[object Object],Il est logique d’avoir des différences entre navigateurs,[object Object],Microsoft travaille sur la suite de tests officielle,[object Object],6401 soumis: http://samples.msdn.microsoft.com/ietestcenter/,[object Object],Certains pensent qu’il en faudra plus de 100 000,[object Object],Vous pouvez participer ! ,[object Object],Nous ne sommes pas encore en 2014,[object Object]

Démos différences rendu,[object Object],Exemple sur Canvas & SVG,[object Object],demo ,[object Object]

Challenge 1,[object Object],Pas de magie : il faut tester sur les différents navigateurs et savoir s’adapter,[object Object]

2ème Challenge : les différences de performance,[object Object],Différence sur le matériel,[object Object],ARM/Atom vs Intel Core i3/5/7 & AMD,[object Object],GPU Intégré vs ATI/nVidia,[object Object],Différence sur la qualité d’implémentation de l’accélération matérielle,[object Object],Différence sur les performances du moteur JavaScript,[object Object],Un iPad c’est fin mais pas forcément très puissant,[object Object]

Accélération matérielle dans les navigateurs,[object Object],Niveau de support,[object Object],IE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Opera 11.50 labs,[object Object]

Challenge 2,[object Object],Soit on vise une plateforme préciseSoit on s’adapte dynamiquement en testant les perfsSoit on nivèle vers le bas,[object Object]

3ème Challenge : les différences de tailles et de formes,[object Object],Une application PC n’est pas faite pour une tablette,[object Object],Plusieurs types d’applications envisageable : PC, Tablette, téléphone voir TV.,[object Object],Résolutions différentes,[object Object],Ergonomies différentes,[object Object]

Challenge 3,[object Object],CSS3 Media Queries, CSS3 Multi-columns, CSS3 Flexbox, CSS3 Grid,[object Object]

4ème Challenge : l’outillage et la productivité,[object Object],Nous en sommes qu’au début,[object Object],Aujourd’hui, l’outillage est limité ou très diffus,[object Object],Visual Studio 2010 SP1 et Expression Web 4 SP1,[object Object],Adobe CS5 (basé sur WebKit),[object Object],Récemment : BlueGriffon (basé sur Gecko) ,[object Object],Beaucoup de frameworks JavaScript différents plus ou moins matures et spécialisés ,[object Object],Coûts de production potentiellement plus élevés que les plug-ins pour l’instant,[object Object]

HTML5 est bien l’avenir du Web,[object Object],On peut commencer à utiliser HTML5 en production,[object Object],Mais ne laissez pas les anciens navigateurs sur le carreau,[object Object],Microsoft continu d’investir sur HTML5 et IE,[object Object],Rythme de mises à jour des PP soutenu et non délirant ,[object Object],Expérimentation avec HTML5Labs,[object Object],Certaines spécifications instables sont très prometteuses,[object Object],Attention à bien préfixer et soyez conscient du risque,[object Object],HTML5 ne résout pas tous les problèmes,[object Object],Mais de nouveaux scénarios pointent le bout de leur nez,[object Object]

Wygday 2011 - Introduction à HTML5

Wygday 2011 - Introduction à HTML5

Recommandé

Contenu connexe

Tendances

Tendances(20)

En vedette

En vedette(20)

Similaire à Wygday 2011 - Introduction à HTML5

Similaire à Wygday 2011 - Introduction à HTML5(20)

Wygday 2011 - Introduction à HTML5

Notes de l'éditeur