Les nouveautés d’HTML5 et IE11 en action

1,328 views
1,121 views

Published on

Au menu de cette session, présentation et surtout des démos (!!) des nouveautés d'HTML5, CSS3 et Javascript avec Internet Explorer 11! Venez également découvrir toutes les nouveautés pour le jeu et le divertissement en ligne avec les interactions rendues possibles par le support des API Device-Motion et Device-orientation, WebGL, l'API Fullscreen, le nouveau tag vidéo et les snap-points CSS3. Nous traiterons également des dernière techniques d’amélioration des performances de votre site grâce aux nouvelles API mais aussi aux nouveau outils du développeur sur IE. Enfin, nous verrons ce qu’il est possible de faire en terme d’intégration au système avec Windows 8.1 avec les nouveau mode Lecture, les nouvelles gestures de navigation et les Live Tiles.

Speakers : Philippe Didiergeorges (Euro Information Développement)

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

  • Be the first to like this

No Downloads
Views
Total views
1,328
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ici à 5min – Prendre la tablette
  • Ici 19 min
  • Démo
  • Démo
  • 25 min - 3 slides et démo tablette
  • Démo
  • 31min
  • Ordre: Page / CSS / image video script / onload puis defer
  • Démo F12
  • 38-40 min
  • 42 min
  • Les nouveautés d’HTML5 et IE11 en action

    1. 1. Les nouveautés d’HTML5 & IE11 en action Philippe DIDIERGEORGES Développeur chez EID IE UserAgent http://blogs.developpeur.org/Philess @DePhiless Web
    2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Web
    3. 3. Sommaire • • • • • • Les nouveautés d’HTML5 et CSS3 sur IE11 Expérience utilisateur Un nouveau monde de divertissement Performances Le futur avec Internet Explorer Développeur: Trouvez de l’aide #mstechdays Web
    4. 4. LES NOUVEAUTÉS D’HTML5 ET CSS3 DANS IE11 Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    5. 5. I hav standards • Nouveau User Agent Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko • Document mode HTML5 par défaut <!doctype html> • pointerEvents, flexbox non préfixés #mstechdays Web
    6. 6. APIS HTML 5, CSS 3 ET JS Custom Data Attributes Device Pixel Ratio Encrypted Media Extensions Pagehide/Pageshow events MPEG-Dash NoFollow CSS3 Flexbox Canvas 2D Niveau 2 Internationalization ECMAScript 6 Lazy-loading #mstechdays Device Orientation events DOM4 Mutation Observers Fullscreen API Pointer Events TTML Simple Delivery Profile Navigation Timing CSS3 Border-Image HTTP 2.0 / SPDY Device Motion Events Dynamic TextTracks Input Method Editor API Media Source Extension Performance API Web Cryptographic API WebGL ECMAScript CSS3 Scrolling Snap Points YUV Compression Prefetch and Prerender DDS images Web
    7. 7. EXPERIENCE UTILISATEUR Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    8. 8. EXPERIENCE UTILISATEUR Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    9. 9. Gestion des favoris • Gestion de dossiers • Synchronisation entre tous les appareils • Tuiles avec image dominante en mode immersif #mstechdays Web
    10. 10. Mode lecture Mise en forme d’une page en mode lecture pour plus de confort: - Pas de pub, bannière, menu, fond inutile - Juste le contenu: texte, titres, images et vidéo #mstechdays Web
    11. 11. Partage • Mise en forme automatique • Listes de lectures #mstechdays Web
    12. 12. Parmi les autres nouveautés… • • • • • Onglets illimités Gestion du Hover en tactile Click to call Navigation pagination Swipe CSS3 Scrolling Snap Points: -ms-scroll-snap-points-x: snapInterval(0px,100%); -ms-scroll-snap-type: mandatory; #mstechdays Web
    13. 13. Tuiles dynamiques pour le web Possibilité de définir: - Tailles disponibles - Couleur - Image - Texte - Notifications http://www.buildmypinnedsite.com #mstechdays Web
    14. 14. UN MONDE DE DIVERTISSEMENT Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    15. 15. WebGL WebGl enfin supporté Des performances de premier ordre. Three.js et BabylonJS pour le dev #mstechdays Web
    16. 16. Vidéo • • • • • • • Perfs améliorées (Media Source Extensions) Streaming XHR (msCaching attr) FullScreen API Sous-titres TTML et WebVTT: <track> Encrypted Media Extensions (support DRM) Web Cryptograhic API Partenariat US avec netflix #mstechdays Web
    17. 17. Device-Orientation Events #mstechdays Web
    18. 18. Device-Orientation Events screen.msLockOrientation("landscape-primary"); window.addEventListener("deviceorientation", onDeviceOriented); function onDeviceOriented(evt) { var z = evt.alpha; var x = evt.beta; var y = evt.gamma; } #mstechdays Web
    19. 19. Device-Motion Events window.addEventListener("devicemotion", onDeviceMotion); function onDeviceMotion(evt) { var accl = evt.acceleration; var x = accl.x; var rot = evt.rotationRate; var rz = rot.alpha; } #mstechdays Web
    20. 20. DIVERTISSEMENT Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    21. 21. PERFORMANCES Les nouveautés d’HTML5 et IE11 en action #mstechdays Web
    22. 22. Trident et Chakra Trident: rendering Chakra: Javascript #mstechdays Web
    23. 23. Une meilleure gestion des chargements • • • • • Ordonnancement des chargements automatique Lazyloading Prefetch et Dns-Prefetch Prerender History Cache #mstechdays Web
    24. 24. Les nouveaux outils du développeur • • • • • Nouveautés Dom explorer et debugger JS UI responsiveness tool JS & Memory Profiler Network profiler Emulation Démo #mstechdays Web
    25. 25. LE FUTUR AVEC INTERNET EXPLORER #mstechdays Web
    26. 26. Support d’EcmaScript 6 • Support du language ES6: let, const, set map, weakmap, Class, Super, Extends, static, constructor • ES6 Globalization • Iterators et Generators #mstechdays Web
    27. 27. One Microsoft, One IE • Windows • Windows Phone • XBox #mstechdays Web
    28. 28. DEVELOPPEURS, TROUVEZ DE L’AIDE #mstechdays Web
    29. 29. Ou trouver de l’aide? #IEUserAgents @IEDevChat #AskIE #mstechdays Web
    30. 30. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Web
    31. 31. Questions Philippe DIDIERGEORGES http://blogs.developpeur.org/Philess @DePhiless Web
    32. 32. Digital is business

    ×