Frédéric Harper @ Microsoft Canada    @fharper | outofcomfortzone.net                Mobiz - 2012-11-15
+          +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...
<video src="video.mp4" id=“tagVideo">  <source src="video.webm" />  <a href="http://lienvideo.com/">     Désolé, pas de su...
•   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•   ...
<style type="text/css">   @font-face {     font-family: MyFont;     src: url(Font.woff);   }</style><div style="font: 24pt...
function getLocation() {  if (navigator.geolocation != undefined) {   navigator.geolocation.getCurrentPosition(callBack); ...
• Penser aux besoins de l’utilisateur au lieu des  nôtres.• Adapter aux différentes capacités des appareils au  lieu de le...
1. Une mise en page flexible, basée sur une grille,2. Des images et des médias flexibles, et3. Media queries.
<link href="mobile.css" rel="stylesheet" media="screenand (max-width:480px)“ type="text/css" /><link href="netbook.css" re...
X   X   X   X   X   Utiliser seulementX           X   X   les fonctionnalités    X           X                    disponib...
X   X   X   X   X   Utiliser 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                    Utiliser lesX   X   X   X   X   fonctionnalitésX   X   X   X   X   disponiblesX      ...
Détecte la disponibilité de l’implémentationnative des fonctionnalités d’HTML5 & CSS3.
if (Modernizr.canvas) {   //On dessine avec Canvas!}else {   //Pas de support natif :(}
IntroductionContre Jour: http://www.contrejour.ieIlly Issimo: http://us.illyissimo.com/Windows Azure: (doit avoir un compt...
CanvasCanvas Pad: http://j.mp/Soh0K1Speed Reading: http://j.mp/TZM6LRCanvas & vidéo, blow it up: http://j.mp/XFoA9CAI to C...
Responsive Web DesignArticle Ethan Marcotte: http://j.mp/QHkDiWScreenfly: http://quirktools.com/screenfly/Multi-Device Lay...
Stratégies d’adoptionWhen can I use: http://caniuse.com/Modernizr: http://www.modernizr.com/DiversInternet Explorer 10 & W...
FrameworksjQuery: http://jquery.com/Less Framework: http://lessframework.com/Knockout: http://knockoutjs.com/Kendo UI: htt...
http://html5mtl.ca
• Une révolution à plusieurs niveaux!• Une opportunité pour vos sites Web et applications  Web mobile (et non mobile!)• Un...
Frédéric Harper      fredh@microsoft.com                @fharper        http://webnotwar.cahttp://outofcomfortzone.net
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Prochain SlideShare
Chargement dans…5
×

Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux

1 348 vues

Publié le

Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 348
Sur SlideShare
0
Issues des intégrations
0
Intégrations
131
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux

  1. 1. Frédéric Harper @ Microsoft Canada @fharper | outofcomfortzone.net Mobiz - 2012-11-15
  2. 2. + +HTML5 HTML5 CSS3 JavaScript
  3. 3. Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
  4. 4. Premier brouillon Brouillon de Candidat pour la public travail recommandation Recommandation Recommandation proposée
  5. 5. <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>
  6. 6. • 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…
  7. 7. • 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
  8. 8. <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>
  9. 9. 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;}
  10. 10. • 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.
  11. 11. 1. Une mise en page flexible, basée sur une grille,2. Des images et des médias flexibles, et3. Media queries.
  12. 12. <link href="mobile.css" rel="stylesheet" media="screenand (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="screenand (min-width:1025px)“ type="text/css" />
  13. 13. X X X X X Utiliser seulementX X X les fonctionnalités X X disponibles nativement dans X X X tous les X X navigateurs visés
  14. 14. X X X X X Utiliser lesX X X X X fonctionnalités X X disponibles nativement OU X X X disponibles avec X X des polyfill JavaScript
  15. 15. (n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
  16. 16. X X X X X Utiliser 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
  17. 17. Détecte la disponibilité de l’implémentationnative des fonctionnalités d’HTML5 & CSS3.
  18. 18. if (Modernizr.canvas) { //On dessine avec Canvas!}else { //Pas de support natif :(}
  19. 19. IntroductionContre Jour: http://www.contrejour.ieIlly 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éoSupport des formats: http://en.wikipedia.org/wiki/HTML5_videoPlus que le WebPhoneGap: http://www.phonegap.comHTML5/CSS3/JavaScript for Windows 8: http://j.mp/ZzXznE
  20. 20. CanvasCanvas Pad: http://j.mp/Soh0K1Speed Reading: http://j.mp/TZM6LRCanvas & vidéo, blow it up: http://j.mp/XFoA9CAI to Canvas: http://visitmix.com/labs/ai2canvasWeb Open Font FormatIE Test Drive Fonts: http://j.mp/TJ0wy2Font Squirrel: http://www.fontsquirrel.com/Convert otf to woff: http://orionevent.comxa.com/otf2woff.htmlGéolocalisationFoursquare playground: http://fsplayground.cloudapp.net/
  21. 21. Responsive Web DesignArticle Ethan Marcotte: http://j.mp/QHkDiWScreenfly: http://quirktools.com/screenfly/Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514Livre Responsive Web Design: http://j.mp/TJ1N84Exemples Media Queries: http://mediaqueri.es/Mobile FirstArticle de Luke Woblewski : http://www.lukew.com/ff/entry.asp?933Livre Mobile First: http://www.abookapart.com/products/mobile-firstPrésentation de Luke Woblewsky : http://vimeo.com/38187066Livre Tapworthy: http://shop.oreilly.com/product/0636920001133.do
  22. 22. Stratégies d’adoptionWhen can I use: http://caniuse.com/Modernizr: http://www.modernizr.com/DiversInternet Explorer 10 & Windows 8: http://bit.ly/PtZ3OLInternet Explorer 10 Preview pour Windows 7: http://bit.ly/SaL0eYMake Awesome Web: http://makeawesomeweb.com/Dive into HTML5: http://diveintohtml5.info/HTML5 learning: http://msdn.microsoft.com/en-ca/ie/aa740476IE Test drive: http://ie.microsoft.com/testdrive/
  23. 23. FrameworksjQuery: 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/OutilsWebMatrix: http://www.microsoft.com/web/webmatrix/jsFiddle: http://jsfiddle.netVisual Studio 2012 Express for Web: http://j.mp/W7BLuZ
  24. 24. http://html5mtl.ca
  25. 25. • 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!
  26. 26. Frédéric Harper fredh@microsoft.com @fharper http://webnotwar.cahttp://outofcomfortzone.net

×