Confoo- 2012-02-27/28Frédéric Harper - Microsoft Canada   @fharper | outofcomfortzone.net
The Internet Explorer 6 countdownhttp://www.ie6countdown.com/Cut the ropehttp://www.cuttherope.ie/Illy Issimohttp://us.ill...
•   Formation du WHATWG en 2004    Web Hypertext Application Technology Working Group•   Repris par le W3C en 2007    Worl...
•   40 organisations membres    dont Opera, Mozilla, Microsoft, Apple…•   400+ participants•   280+ experts invités
+          +HTML5   HTML5       CSS3       JavaScript
Performance   Sémantiques        Styles      Multimédia Effets 3D     Hors ligne &   Connectivité   Accès appareils       ...
Premier brouillon          Brouillon de           Candidat pour la     public                   travail             recomm...
Premier brouillon          Brouillon de           Candidat pour la     public                   travail             recomm...
W3C HTML Working Grouphttp://www.w3.org/html/wg/La spécification HTML5http://dev.w3.org/html5/spec/HTML5/CSS3 cheatsheet (...
X   X   X   X   X   Utilisez seulementX           X   X   les fonctionnalités    X           X                    disponib...
X   X   X   X   X   Utilisez lesX   X   X   X   X   fonctionnalités    X           X                    disponibles       ...
(n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
X   X   X   X   X                    Utilisez lesX   X   X   X   X   fonctionnalitésX   X   X   X   X   disponiblesX      ...
When can I usehttp://caniuse.com/Haz.iohttp://haz.io/Mobile HTML5http://mobilehtml5.org/Modernizrhttp://www.modernizr.com/
•   Rapide•   Moins intense sur la mémoire•   Plus de travail pour les développeurs•   Sans JavaScript… vous êtes foutus!•...
•   State               •   Focus management•   Transformations     •   Drawing images•   Compositing         •   Text•   ...
Une extension pour Adobe Illustratorpermettant de prendre un fichier vectoriel(.AI) et de le transformer en code HTML(Canv...
Canvas Padhttp://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.htmlSpeed Readinghttp://ie.microsoft.com/testdrive/...
•   SVG = “Scalable Vector Graphics”•   Comme HTML, SVG est construit dans le    document utilisant des éléments, attribut...
Logo HTML5http://upload.wikimedia.org/wikipedia/commons/6/6e/HTML5-logo.svgSVG girlhttp://jsdo.it/event/svggirl/When can I...
function getLocation() {  if (navigator.geolocation != undefined) {   navigator.geolocation.getCurrentPosition(callBack); ...
Foursquare playgroundhttp://fsplayground.cloudapp.net/When can I use Geolocationhttp://caniuse.com/#feat=geolocation
<audio src="audio.mp3" id=“monAudio" autoplay>  <!– Flash/Silverlight audio --></audio>
autoplaycontrolslooppreload: auto, metadata, nonesrc: url
Ogg WAV MP3 AAC Speex                              Vorbis PCMTrident - Internet ExplorerGecko - FirefoxWebkit - Safari & C...
<audio src="audio.mp3" id=“monAudio" autoplay>  <source src=“audio.wav”>  <source src=“audio.ogg”></audio>
Canvas Lovehttp://9elements.com/io/projects/html5/canvas/When can I use Audiohttp://caniuse.com/#feat=audioPlinkhttp://lab...
Une librairie JavaScript qui simplifie lagestion des événements, les animations, lesinteractions AJAX…
Less Framework est une grille CSS qui aideà construire un site avec le principe deResponsive Web Design (designadaptatif).
Une librairie JavaScript qui simplifie leJavaScript dynamique au UI (UserInterface) en appliquant le MVVM (ModelView ViewM...
Un framework aidant au niveau UI avecdes grilles, chart, combobox… Aussi utilepour du “data binding”, animations…
Une librairie JavaScript qui simplifie le“data binding” représentant vos donnéescomme un Models, qui peut être créé,validé...
Un gabarit de base HTML, CSS etJavaScript.
Plusieurs librairies sont disponibles sur leWeb et bien d’autres voient le jour. À vousde trouver celui qui répondra à vos...
jQueryhttp://jquery.com/Less Frameworkhttp://lessframework.com/Knockouthttp://knockoutjs.com/Kendo UIhttp://www.kendoui.co...
•   Détecte la disponibilité de l’implémentation    native des fonctionnalités d’HTML5 & CSS3.•   N’est pas un polyfill: a...
if (Modernizr.canvas) {   //On dessine avec Canvas!}else {   //Pas de support natif :(}
<style type="text/css" media="screen">   div.wsno, div.wsyes { display: none }   .no-websockets div.wsno { display: block ...
•   @font-face        •   Geolocation API•   Canvas            •   localStorage•   Canvas Text       •   SVG•   HTML5 Audi...
(n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
Modernizrhttp://www.modernizr.com/HTML5 Cross Browser Polyfills Modernizr collectionhttps://github.com/Modernizr/Modernizr...
Disponible gratuitement sous Windows,Mac OS X et Linux.
Disponible gratuitement sous Windows.
Disponible gratuitement sous Windows,Mac OS X et Linux.
Disponible gratuitement sous Windows
Outil en ligne pour tester et partager
HTML5 étant assez récent, les outils avecune complétation automatique ouWYSIWYG (What You See Is What YouGet) ne sont pas ...
Aptanahttp://aptana.com/WebMatrixhttp://www.microsoft.com/web/webmatrix/NetBeanshttp://netbeans.org/Visual Web Developer E...
1. Essayez-le
1. Essayez-le2. Lisez sur le sujet
1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests
1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests4. Implémentez-le dans vos projets au bureau
1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests4. Implémentez-le dans vos projets au bureau5. Ayez du plaisir!
HTML5mtl – Groupe d’utilisateurs HTML5 à Montréalhttp://www.meetup.com/HTML5mtl/Make Awesome Webhttp://makeawesomeweb.com/...
Frédéric HarperDeveloper Evangelist @ Microsoft           fredh@microsoft.com                       @fharper           htt...
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Upcoming SlideShare
Loading in …5
×

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

1,493 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,493
On SlideShare
0
From Embeds
0
Number of Embeds
142
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

  1. 1. Confoo- 2012-02-27/28Frédéric Harper - Microsoft Canada @fharper | outofcomfortzone.net
  2. 2. The Internet Explorer 6 countdownhttp://www.ie6countdown.com/Cut the ropehttp://www.cuttherope.ie/Illy Issimohttp://us.illyissimo.com/
  3. 3. • Formation du WHATWG en 2004 Web Hypertext Application Technology Working Group• Repris par le W3C en 2007 World Wide Web Consortium
  4. 4. • 40 organisations membres dont Opera, Mozilla, Microsoft, Apple…• 400+ participants• 280+ experts invités
  5. 5. + +HTML5 HTML5 CSS3 JavaScript
  6. 6. Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
  7. 7. Premier brouillon Brouillon de Candidat pour la public travail recommendation Recommendation Recommendation proposée
  8. 8. Premier brouillon Brouillon de Candidat pour la public travail recommendation Recommendation Recommendation proposée
  9. 9. W3C HTML Working Grouphttp://www.w3.org/html/wg/La spécification HTML5http://dev.w3.org/html5/spec/HTML5/CSS3 cheatsheet (vieux d’un an)http://www.storiesinflight.com/html5/index.htmlThe Best HTML5 and CSS3 Cheat Sheets of 2011http://www.evolutionarydesigns.net/blog/2011/12/28/the-best-html5-and-css3-cheat-sheets-of-2011/
  10. 10. X X X X X Utilisez seulementX X X les fonctionnalités X X disponibles nativement dans X X X tous les X X navigateurs visés
  11. 11. X X X X X Utilisez lesX X X X X fonctionnalités X X disponibles nativement OU X X X disponibles avec X X des polyfill JavaScript
  12. 12. (n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
  13. 13. X X X X X Utilisez lesX X X X X fonctionnalitésX X X X X disponiblesX X nativement ET créer X X X des expériences X X alternatives pour les autres navigateurs
  14. 14. When can I usehttp://caniuse.com/Haz.iohttp://haz.io/Mobile HTML5http://mobilehtml5.org/Modernizrhttp://www.modernizr.com/
  15. 15. • Rapide• Moins intense sur la mémoire• Plus de travail pour les développeurs• Sans JavaScript… vous êtes foutus!• Bon pour des jeux, des diagrammes, visualisation de données…
  16. 16. • State • Focus management• Transformations • Drawing images• Compositing • Text• Colors and styles • Pixel Manipulation• Line caps/joins • Interfaces• Shadows – CanvasGradient• Rects – TextMetrics• Path API – ImageData – CanvasPixelArray
  17. 17. Une extension pour Adobe Illustratorpermettant de prendre un fichier vectoriel(.AI) et de le transformer en code HTML(Canvas)
  18. 18. Canvas Padhttp://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.htmlSpeed Readinghttp://ie.microsoft.com/testdrive/Performance/SpeedReading/Default.htmlWhen can I use Canvashttp://caniuse.com/#feat=canvasCanvas video, blow it uphttp://craftymind.com/factory/html5video/CanvasVideo.htmlAI to Canvashttp://visitmix.com/labs/ai2canvas/
  19. 19. • SVG = “Scalable Vector Graphics”• Comme HTML, SVG est construit dans le document utilisant des éléments, attributs et styles.• De ce fait, on peut le modifier avec du JavaScript et CSS.
  20. 20. Logo HTML5http://upload.wikimedia.org/wikipedia/commons/6/6e/HTML5-logo.svgSVG girlhttp://jsdo.it/event/svggirl/When can I use SVGhttp://caniuse.com/#feat=svgSVG Cheat Sheethttp://www.cheat-sheets.org/own/svg/index.xhtml
  21. 21. function getLocation() { if (navigator.geolocation != undefined) { navigator.geolocation.getCurrentPosition(callBack); }}function callBack(position) { var accuracy = position.coords.accuracy; var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
  22. 22. Foursquare playgroundhttp://fsplayground.cloudapp.net/When can I use Geolocationhttp://caniuse.com/#feat=geolocation
  23. 23. <audio src="audio.mp3" id=“monAudio" autoplay> <!– Flash/Silverlight audio --></audio>
  24. 24. autoplaycontrolslooppreload: auto, metadata, nonesrc: url
  25. 25. Ogg WAV MP3 AAC Speex Vorbis PCMTrident - Internet ExplorerGecko - FirefoxWebkit - Safari & ChromePresto - Opera
  26. 26. <audio src="audio.mp3" id=“monAudio" autoplay> <source src=“audio.wav”> <source src=“audio.ogg”></audio>
  27. 27. Canvas Lovehttp://9elements.com/io/projects/html5/canvas/When can I use Audiohttp://caniuse.com/#feat=audioPlinkhttp://labs.dinahmoe.com/plink/When can I use Audio APIhttp://caniuse.com/#feat=audio-apiHTML5Rocks Web Audio API Introductionhttp://caniuse.com/#feat=audio-api
  28. 28. Une librairie JavaScript qui simplifie lagestion des événements, les animations, lesinteractions AJAX…
  29. 29. Less Framework est une grille CSS qui aideà construire un site avec le principe deResponsive Web Design (designadaptatif).
  30. 30. Une librairie JavaScript qui simplifie leJavaScript dynamique au UI (UserInterface) en appliquant le MVVM (ModelView ViewModel).
  31. 31. Un framework aidant au niveau UI avecdes grilles, chart, combobox… Aussi utilepour du “data binding”, animations…
  32. 32. Une librairie JavaScript qui simplifie le“data binding” représentant vos donnéescomme un Models, qui peut être créé,validé, détruit...
  33. 33. Un gabarit de base HTML, CSS etJavaScript.
  34. 34. Plusieurs librairies sont disponibles sur leWeb et bien d’autres voient le jour. À vousde trouver celui qui répondra à vosbesoins!
  35. 35. jQueryhttp://jquery.com/Less Frameworkhttp://lessframework.com/Knockouthttp://knockoutjs.com/Kendo UIhttp://www.kendoui.com/Backbone.jshttp://backbonejs.org/HTML5 boilerplatehttp://html5boilerplate.com/
  36. 36. • Détecte la disponibilité de l’implémentation native des fonctionnalités d’HTML5 & CSS3.• N’est pas un polyfill: aucune émulation de fonctionnalités.
  37. 37. if (Modernizr.canvas) { //On dessine avec Canvas!}else { //Pas de support natif :(}
  38. 38. <style type="text/css" media="screen"> div.wsno, div.wsyes { display: none } .no-websockets div.wsno { display: block } .websockets div.wsyes { display: block }</style>
  39. 39. • @font-face • Geolocation API• Canvas • localStorage• Canvas Text • SVG• HTML5 Audio • Drag and Drop• HTML5 Video • Web Sockets• CSS Animations • Web Workers• CSS Columns • IndexedDB• CSS Gradients • Input Types• CSS Reflections • et bien plus…
  40. 40. (n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
  41. 41. Modernizrhttp://www.modernizr.com/HTML5 Cross Browser Polyfills Modernizr collectionhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  42. 42. Disponible gratuitement sous Windows,Mac OS X et Linux.
  43. 43. Disponible gratuitement sous Windows.
  44. 44. Disponible gratuitement sous Windows,Mac OS X et Linux.
  45. 45. Disponible gratuitement sous Windows
  46. 46. Outil en ligne pour tester et partager
  47. 47. HTML5 étant assez récent, les outils avecune complétation automatique ouWYSIWYG (What You See Is What YouGet) ne sont pas disponibles en grandequantité encore…
  48. 48. Aptanahttp://aptana.com/WebMatrixhttp://www.microsoft.com/web/webmatrix/NetBeanshttp://netbeans.org/Visual Web Developer Expresshttp://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-expressjsFiddlehttp://jsfiddle.net
  49. 49. 1. Essayez-le
  50. 50. 1. Essayez-le2. Lisez sur le sujet
  51. 51. 1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests
  52. 52. 1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests4. Implémentez-le dans vos projets au bureau
  53. 53. 1. Essayez-le2. Lisez sur le sujet3. Faite des projets tests4. Implémentez-le dans vos projets au bureau5. Ayez du plaisir!
  54. 54. HTML5mtl – Groupe d’utilisateurs HTML5 à Montréalhttp://www.meetup.com/HTML5mtl/Make Awesome Webhttp://makeawesomeweb.com/Dive into HTML5http://diveintohtml5.info/HTML5 learninghttp://msdn.microsoft.com/en-ca/ie/aa740476IE Test drivehttp://ie.microsoft.com/testdrive/A book Aparthttp://www.abookapart.com/A list Aparthttp://www.alistapart.com/
  55. 55. Frédéric HarperDeveloper Evangelist @ Microsoft fredh@microsoft.com @fharper http://webnotwar.ca http://oocz.net

×