Donnez votre avis !                   Depuis votre smartphone, sur :                    http://notes.mstechdays.fr    De n...
Les dernières avancées HTML5               & CSS3 en action !                             David Rousset                   ...
Vous allez voir que…
Agenda• Animations et autres nouveautés CSS3   25’• Nouvelles APIs HTML5                   25’                            ...
Animations et autresnouveautés CSS3
Internet Explorer 10 : nouveaux layouts CSS etSVGCSS 2D Transforms        CSS Media QueriesCSS 3D Transforms        CSS Mu...
CSS Grid Layout pour une planche de jeu
HTML & CSS de la planche de jeu<style type="text/css">  #grid { display: -ms-grid;           -ms-grid-columns: auto 1fr;  ...
Démo: usage simple duCSS Grid Layout
Mélangeons Grid & Media Queries@media (orientation: landscape) {   #title    { -ms-grid-column: 1; -ms-grid-row:   1 }   #...
Démo: CSS Grid Layoutet Media Queries
CSS3 pour les transformations et le flux• CSS3 3D Transform  – Simplement une extension de CSS Transform en 3    dimension...
Démo: CSS 3-Dtransforms, columns &positionated floats
Les animations avec CSS3 Spécification           Transitions                      Animations                         Délai...
Démo: CSS3 animations &transforms
Idée d’intégration dans un jeu
Nouvelles APIsHTML5
Internet Explorer 10 : nouvelles APIsHTML5         HTML5 Application IndexedDBAnimation FramesData URI                  Ca...
HTML5 application cache• Cache basé sur un manifeste pour des scenarios  déconnectés• Choisissez les fichiers à cacher: HT...
L’usage d’app cache via le fichier de manifest<html manifest=“test.appcache"> <head>  ...  <link href="yourstyles.css“ rel...
File API• Permet de lire les donnes fournies par l’utilisateur• Nouveaux objets pour représenter les données:   – Blob, Fi...
Lire du texte avec l’objet FileReaderfunction                           function                                     var  ...
Drag-n-drop & formulaires HTML5• Drag-n-drop HTML5  – Vous pouvez rendre n’importe quel élément déplaçable  – Glissez/dépo...
Démo: formulaires HTML5
Idée d’intégration dans un jeu
AuriculaireDB IndexedDB• Stockage, Indexation et recherche de données• Stockage de paires « clé-valeur » à la NoSQL• Index...
Démo: utilisationd’IndexedDB pour stockerdes images
Single page web application
WebWorkers• L’approche JavaScript vers le multi- threading• Libère le UI thread en envoyant des requêtes aux workers• Comm...
Démo: utilisation desWebWorkers pour appliquerdes filtres aux images
Nouvelles APIsHTML5
Pointer Events (touch, stylet, souris)• Ecrivez votre code une seule fois pour le tactile, le  stylet et la souris• Les si...
Pour faire de belles applications webtactiles• Évènements MSPointer pour cibler le tactile, la souris  et le stylet de man...
Démo: utilisation desPointer Events
Démo: Modern.IE – unsuper outil pour vous rendrela vie plus heureuse
Pour aller plus loin…•   Pleins de démos ici: ie.microsoft.com/testdrive     Hands On: Windows 8 HTML5 Platform:       ie...
Pour aller plus loin sur HTML5 auxTechdays…Introduction au dev Win8 avec HTML5 et JavaScript (Mardi13h)Développer pour tou...
Questions ?
Développeurs                                                         Pros de l’IT http://aka.ms/generation-app       Forme...
Prochain SlideShare
Chargement dans... 5
×

Les dernières avancées HTML5 & CSS3 en action !

582

Published on

Dans cette session, vous découvrirez les nouveaux standards supportés par Internet Explorer 10. Coté CSS3, on verra ainsi des choses comme grid layout, animations ou transitions. Coté nouvelles APIs, nous passerons un peu de temps sur la gestion du drag-n-drop, IndexedDB, la gestion de l’Application Cache ou bien encore la gestion du tactile. Pour découvrir tout cela, nous verrons à chaque fois de petits exemples d’illustration ainsi que des sites plus « complexes » les mettant en œuvre.

Published in: Technologies
0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
582
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
28
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • Notation
  • Intro code / dev
  • T+4min
  • T+8min
  • T+17min
  • T+24min
  • T+29min
  • T+34min
  • T+24min
  • T+47min
  • Les dernières avancées HTML5 & CSS3 en action !

    1. 1. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr
    2. 2. Les dernières avancées HTML5 & CSS3 en action ! David Rousset Technical Evangelist Microsoft France @davrous http://blogs.msdn.com/davrousCode / Développement
    3. 3. Vous allez voir que…
    4. 4. Agenda• Animations et autres nouveautés CSS3 25’• Nouvelles APIs HTML5 25’ Agenda• Support du Touch 10’
    5. 5. Animations et autresnouveautés CSS3
    6. 6. Internet Explorer 10 : nouveaux layouts CSS etSVGCSS 2D Transforms CSS Media QueriesCSS 3D Transforms CSS Multi-column LayoutCSS Animations CSS NamespacesCSS Backgrounds & CSS OM ViewsBorders CSS Positioned Floats (Exclusions)CSS Color CSS Selectors CSS TransitionsCSS Flexbox CSS Values and UnitsCSS Fonts ICC Color ProfilesCSS Grid Alignment SVG Filter EffectsCSS Hyphenation SVG, standalone and in HTMLCSS Image Values(Gradients)
    7. 7. CSS Grid Layout pour une planche de jeu
    8. 8. HTML & CSS de la planche de jeu<style type="text/css"> #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows: auto 1fr auto; } #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: center } </style><div id="grid"> <div id="title">Game Title</div> <div id="score">Score</div> <div id="stats">Stats</div> <div id="board">Board</div> <div id="controls">Controls</div></div>
    9. 9. Démo: usage simple duCSS Grid Layout
    10. 10. Mélangeons Grid & Media Queries@media (orientation: landscape) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: center }} @media (orientation: portrait) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 2 } #stats { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #board { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2 } #controls {-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2; -ms-grid-column-align: center } }
    11. 11. Démo: CSS Grid Layoutet Media Queries
    12. 12. CSS3 pour les transformations et le flux• CSS3 3D Transform – Simplement une extension de CSS Transform en 3 dimensions• CSS3 Multi-columns & Hyphenaton – Reparti le texte en colonnes & gère la césure pour améliorer la lisibilité• CSS3 Positionated Floats – Fait couler le contenu autour d’elements positionnés
    13. 13. Démo: CSS 3-Dtransforms, columns &positionated floats
    14. 14. Les animations avec CSS3 Spécification Transitions Animations Délai Délai Durée Durée Caractéristiques Fonction sur le temps Fonction sur le temps Propriétés à animer transitionend animationstart Évènements animationend animationiteration Changez la valeur d’une Keyframes: définit quelles Comment ça propriété et le navigateur propriétés à animer, vers marche ? s’occupe de tout. Mode “Fire & quelles valeurs précisément Forget” dans l’échelle de temps.
    15. 15. Démo: CSS3 animations &transforms
    16. 16. Idée d’intégration dans un jeu
    17. 17. Nouvelles APIsHTML5
    18. 18. Internet Explorer 10 : nouvelles APIsHTML5 HTML5 Application IndexedDBAnimation FramesData URI Cache Page Visibility HTML5 asyncDOM Element Traversal Pointer (Mouse, Pen, HTML5 CanvasDOM HTML and Touch) Events HTML5 Drag and dropDOM Level 3 Core Resource Timing HTML5 Forms andDOM Level 3 Events Validation Selectors API Level 2DOM Style HTML5 Geolocation Timing callbacksDOM Traversal and Range HTML5 History APIDOMParser and Web Messaging HTML5 ParserXMLSerializer HTML5 Sandbox Web SocketsECMAScript 5 HTML5 Selection Web WorkersFile Reader API HTML5 Semantic elements XHTML/XMLFile Saving HTML5 Video and audio XMLHttpRequest (LevelFormData ICC Color Profiles 2)
    19. 19. HTML5 application cache• Cache basé sur un manifeste pour des scenarios déconnectés• Choisissez les fichiers à cacher: HTML, CSS, JS & vos ressources• Permet de rendre disponible vos ressources au delà du cache local HTTP• Resynchronisez les fichiers via une MAJ du manifeste
    20. 20. L’usage d’app cache via le fichier de manifest<html manifest=“test.appcache"> <head> ... <link href="yourstyles.css“ rel="stylesheet"> <script src="yourcode.js"></script> </head> <body> ... <video … src=“yourvideo.mp4” …> </video> ...</body> MIME Type: text/cache-manifest</html>
    21. 21. File API• Permet de lire les donnes fournies par l’utilisateur• Nouveaux objets pour représenter les données: – Blob, File, FileReader• Nouvelles méthodes d’accès aux données: • readAsArrayBuffer • readAsBinaryString • readAsText • readAsDataURL
    22. 22. Lire du texte avec l’objet FileReaderfunction function var new // Obtain input element throughDOM. // Read file into memory as UTF-16 var "UTF- 16" if // Handle progress, success, and errors
    23. 23. Drag-n-drop & formulaires HTML5• Drag-n-drop HTML5 – Vous pouvez rendre n’importe quel élément déplaçable – Glissez/déposez des fichiers depuis le bureau vers le navigateur• Formulaires HTML5 – Remplace les validations de formulaires JavaScript – Utilisez les interfaces utilisateurs natives du navigateur ou personnalisez-les
    24. 24. Démo: formulaires HTML5
    25. 25. Idée d’intégration dans un jeu
    26. 26. AuriculaireDB IndexedDB• Stockage, Indexation et recherche de données• Stockage de paires « clé-valeur » à la NoSQL• Indexation en utilisant un attribut objet• Pas de dépendances vis-à-vis de l’implémentation du navigateur
    27. 27. Démo: utilisationd’IndexedDB pour stockerdes images
    28. 28. Single page web application
    29. 29. WebWorkers• L’approche JavaScript vers le multi- threading• Libère le UI thread en envoyant des requêtes aux workers• Communication avec les workers via postMessage()• Pas d’accès DOM
    30. 30. Démo: utilisation desWebWorkers pour appliquerdes filtres aux images
    31. 31. Nouvelles APIsHTML5
    32. 32. Pointer Events (touch, stylet, souris)• Ecrivez votre code une seule fois pour le tactile, le stylet et la souris• Les sites écrits uniquement pour la souris fonctionne automatiquement• Patterns connus d’évènements DOM de la souris, avec des extensions pour le touch
    33. 33. Pour faire de belles applications webtactiles• Évènements MSPointer pour cibler le tactile, la souris et le stylet de manière unifiée• Évènements MSGesture pour facilement reconnaitre certaines manipulation (zoom, rotation, hold, etc.)• Propriétés CSS -ms-touch-action pour indiquer comment chaque zone doit se comporter face au touch• Microsoft a soumis la spécification au W3C: – http://www.w3.org/Submission/pointer-events/
    34. 34. Démo: utilisation desPointer Events
    35. 35. Démo: Modern.IE – unsuper outil pour vous rendrela vie plus heureuse
    36. 36. Pour aller plus loin…• Pleins de démos ici: ie.microsoft.com/testdrive  Hands On: Windows 8 HTML5 Platform: ie.microsoft.com/testdrive/Graphics/hands-on- css3/  Certaines démos expliquées ici: blogs.msdn.com/ie• http://modern.ie avec 3 mois offerts à Browser Stack !• Mon blog: blogs.msdn.com/davrous  Vous retrouverez toutes les démos de cette
    37. 37. Pour aller plus loin sur HTML5 auxTechdays…Introduction au dev Win8 avec HTML5 et JavaScript (Mardi13h)Développer pour tous les navigateurs (Mardi 14h30)Coding for Fun (Mardi 17h30)Techniques daccélération des pages Web (Mercredi 11h)Concevoir des interfaces tactiles à destination de Windows8 et du web (Mercredi 14h30)HTML5 pour les développeurs WP8 (Mercredi 16h)Tout sur les SPA (Mercredi 17h30)
    38. 38. Questions ?
    39. 39. Développeurs Pros de l’IT http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com http://aka.ms/evenements- developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france Les accélérateurs Faites-vous accompagnerWindows Azure, Windows Phone, gratuitement Windows 8 Essayer gratuitement nos http://aka.ms/telechargements solutions IT La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet http://aka.ms/devteam Microsoft http://aka.ms/itteam
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×