Les nouveautés
d’HTML5 & IE11 en action
Philippe DIDIERGEORGES
Développeur chez EID
IE UserAgent
http://blogs.developpeur....
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
Sommaire
•
•
•
•
•
•

Les nouveautés d’HTML5 et CSS3 sur IE11
Expérience utilisateur
Un nouveau monde de divertissement
Pe...
LES NOUVEAUTÉS D’HTML5 ET
CSS3 DANS IE11
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
I hav standards
• Nouveau User Agent
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
• Document mode HTML5 p...
APIS HTML 5, CSS 3 ET JS
Custom Data Attributes
Device Pixel Ratio
Encrypted Media Extensions
Pagehide/Pageshow events
MPE...
EXPERIENCE UTILISATEUR
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
EXPERIENCE UTILISATEUR
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
Gestion des favoris
• Gestion de dossiers
• Synchronisation entre tous les appareils
• Tuiles avec image dominante en mode...
Mode lecture
Mise en forme d’une page en mode lecture pour plus de
confort:
- Pas de pub, bannière, menu, fond inutile
- J...
Partage
• Mise en forme automatique
• Listes de lectures

#mstechdays

Web
Parmi les autres nouveautés…
•
•
•
•
•

Onglets illimités
Gestion du Hover en tactile
Click to call
Navigation pagination ...
Tuiles dynamiques pour le web
Possibilité de définir:
- Tailles disponibles
- Couleur
- Image
- Texte
- Notifications
http...
UN MONDE DE DIVERTISSEMENT
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
WebGL
WebGl enfin supporté

Des performances de premier ordre.
Three.js et BabylonJS pour le dev

#mstechdays

Web
Vidéo
•
•
•
•
•
•
•

Perfs améliorées (Media Source Extensions)
Streaming XHR (msCaching attr)
FullScreen API
Sous-titres ...
Device-Orientation Events

#mstechdays

Web
Device-Orientation Events
screen.msLockOrientation("landscape-primary");
window.addEventListener("deviceorientation",
onDe...
Device-Motion Events
window.addEventListener("devicemotion", onDeviceMotion);
function onDeviceMotion(evt) {
var accl = ev...
DIVERTISSEMENT
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
PERFORMANCES
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web
Trident et Chakra
Trident: rendering
Chakra: Javascript

#mstechdays

Web
Une meilleure gestion des chargements
•
•
•
•
•

Ordonnancement des chargements automatique
Lazyloading
Prefetch et Dns-Pr...
Les nouveaux outils du développeur
•
•
•
•
•

Nouveautés Dom explorer et debugger JS
UI responsiveness tool
JS & Memory Pr...
LE FUTUR AVEC INTERNET
EXPLORER

#mstechdays

Web
Support d’EcmaScript 6
• Support du language ES6: let, const, set map, weakmap,
Class, Super, Extends, static, constructor...
One Microsoft, One IE
• Windows
• Windows Phone
• XBox

#mstechdays

Web
DEVELOPPEURS, TROUVEZ DE
L’AIDE

#mstechdays

Web
Ou trouver de l’aide?
#IEUserAgents
@IEDevChat
#AskIE

#mstechdays

Web
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
Questions
Philippe DIDIERGEORGES

http://blogs.developpeur.org/Philess
@DePhiless
Web
Digital is
business
Les nouveautés d’HTML5 et IE11 en action
Prochain SlideShare
Chargement dans…5
×

Les nouveautés d’HTML5 et IE11 en action

1 468 vues

Publié le

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)

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • 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

    ×