Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
2 j'aime1,622 vues
Le document présente les avantages de HTML5, CSS3 et JavaScript pour améliorer la performance et l'accessibilité des applications web, tout en insistant sur l'importance de concevoir des interfaces adaptées aux utilisateurs et à leurs appareils. Il propose également des ressources et des liens pour approfondir des sujets tels que la géolocalisation, le design réactif et les frameworks modernes. Enfin, il souligne que bien que HTML5 ne soit pas un standard final, il offre des opportunités précieuses pour les développeurs dès maintenant.
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
- 1. Frédéric Harper @ Microsoft Canada @fharper | outofcomfortzone.net Mobiz - 2012-11-15
- 9. + + HTML5 HTML5 CSS3 JavaScript
- 10. Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
- 11. Premier brouillon Brouillon de Candidat pour la public travail recommandation Recommandation Recommandation proposée
- 13. <video src="video.mp4" id=“tagVideo"> <source src="video.webm" /> <a href="http://lienvideo.com/"> Désolé, pas de support video HTML5 </a> <!– Flash/Silverlight video here --> </video>
- 17. • 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…
- 22. • 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
- 26. <style type="text/css"> @font-face { font-family: MyFont; src: url('Font.woff'); } </style> <div style="font: 24pt MyFont, sans-serif;"> Le texte à afficher. </div>
- 30. 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; }
- 33. • Penser aux besoins de l’utilisateur au lieu des nôtres. • Adapter aux différentes capacités des appareils au lieu de leurs configurations. • Aide nos sites à être possiblement prêts pour le futur.
- 34. 1. Une mise en page flexible, basée sur une grille, 2. Des images et des médias flexibles, et 3. Media queries.
- 35. <link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" /> <link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max- width: 1024px)“ type="text/css" /> <link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
- 40. X X X X X Utiliser seulement X X X les fonctionnalités X X disponibles nativement dans X X X tous les X X navigateurs visés
- 41. X X X X X Utiliser les X X X X X fonctionnalités X X disponibles nativement OU X X X disponibles avec X X des polyfill JavaScript
- 42. (n) poly • fill: Un script JavaScript implémentant des fonctionnalités HTML5 non disponibles nativement dans un navigateur
- 43. X X X X X Utiliser les X X X X X fonctionnalités X X X X X disponibles X X nativement ET créer X X X des expériences X X alternatives pour les autres navigateurs
- 44. Détecte la disponibilité de l’implémentation native des fonctionnalités d’HTML5 & CSS3.
- 45. if (Modernizr.canvas) { //On dessine avec Canvas! } else { //Pas de support natif :( }
- 52. Introduction Contre Jour: http://www.contrejour.ie Illy Issimo: http://us.illyissimo.com/ Windows Azure: (doit avoir un compte) SVG girl: http://jsdo.it/event/svggirl/ W3C HTML Working Group: http://www.w3.org/html/wg/ La spécification HTML5: http://dev.w3.org/html5/spec/ Vidéo Support des formats: http://en.wikipedia.org/wiki/HTML5_video Plus que le Web PhoneGap: http://www.phonegap.com HTML5/CSS3/JavaScript for Windows 8: http://j.mp/ZzXznE
- 53. Canvas Canvas Pad: http://j.mp/Soh0K1 Speed Reading: http://j.mp/TZM6LR Canvas & vidéo, blow it up: http://j.mp/XFoA9C AI to Canvas: http://visitmix.com/labs/ai2canvas Web Open Font Format IE Test Drive Fonts: http://j.mp/TJ0wy2 Font Squirrel: http://www.fontsquirrel.com/ Convert otf to woff: http://orionevent.comxa.com/otf2woff.html Géolocalisation Foursquare playground: http://fsplayground.cloudapp.net/
- 54. Responsive Web Design Article Ethan Marcotte: http://j.mp/QHkDiW Screenfly: http://quirktools.com/screenfly/ Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514 Livre Responsive Web Design: http://j.mp/TJ1N84 Exemples Media Queries: http://mediaqueri.es/ Mobile First Article de Luke Woblewski : http://www.lukew.com/ff/entry.asp?933 Livre Mobile First: http://www.abookapart.com/products/mobile-first Présentation de Luke Woblewsky : http://vimeo.com/38187066 Livre Tapworthy: http://shop.oreilly.com/product/0636920001133.do
- 55. Stratégies d’adoption When can I use: http://caniuse.com/ Modernizr: http://www.modernizr.com/ Divers Internet Explorer 10 & Windows 8: http://bit.ly/PtZ3OL Internet Explorer 10 Preview pour Windows 7: http://bit.ly/SaL0eY Make Awesome Web: http://makeawesomeweb.com/ Dive into HTML5: http://diveintohtml5.info/ HTML5 learning: http://msdn.microsoft.com/en-ca/ie/aa740476 IE Test drive: http://ie.microsoft.com/testdrive/
- 56. Frameworks jQuery: http://jquery.com/ Less Framework: http://lessframework.com/ Knockout: http://knockoutjs.com/ Kendo UI: http://www.kendoui.com/ Backbone.js: http://backbonejs.org/ HTML5 boilerplate: http://html5boilerplate.com/ Bootstrap: http://twitter.github.com/bootstrap/ Outils WebMatrix: http://www.microsoft.com/web/webmatrix/ jsFiddle: http://jsfiddle.net Visual Studio 2012 Express for Web: http://j.mp/W7BLuZ
- 59. • Une révolution à plusieurs niveaux! • Une opportunité pour vos sites Web et applications Web mobile (et non mobile!) • Un standard non final • Un standard qu’on peut toutefois utiliser dès maintenant!
- 60. Frédéric Harper fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net