Les dernières avancées HTML5 & CSS3 en action !
Télécharger en tant que PPTX, PDF0 j'aime1,088 vues
Le document présente des informations sur les techdays de Microsoft, avec un accent sur les nouvelles fonctionnalités de CSS3 et HTML5, ainsi que des démonstrations pratiques. Il couvre divers sujets techniques, y compris les transformations CSS, les animations, et les APIs HTML5, tout en intégrant des éléments interactifs comme des formulaires et des événements de pointeur. Des ressources supplémentaires et des événements de développement sont également mentionnés pour aider les développeurs à approfondir leurs compétences.
Les dernières avancées HTML5 & CSS3 en action !
- 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 TechDays http://notes.mstechdays.fr
- 2. Les dernières avancées HTML5 & CSS3 en action ! David Rousset Technical Evangelist Microsoft France @davrous http://blogs.msdn.com/davrous Code / Développement
- 3. Vous allez voir que…
- 4. Agenda • Animations et autres nouveautés CSS3 25’ • Nouvelles APIs HTML5 25’ Agenda • Support du Touch 10’
- 5. Animations et autres nouveautés CSS3
- 6. Internet Explorer 10 : nouveaux layouts CSS et SVG CSS 2D Transforms CSS Media Queries CSS 3D Transforms CSS Multi-column Layout CSS Animations CSS Namespaces CSS Backgrounds & CSS OM Views Borders CSS Positioned Floats (Exclusions) CSS Color CSS Selectors CSS Transitions CSS Flexbox CSS Values and Units CSS Fonts ICC Color Profiles CSS Grid Alignment SVG Filter Effects CSS Hyphenation SVG, standalone and in HTML CSS Image Values (Gradients)
- 7. CSS Grid Layout pour une planche de jeu
- 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. Démo: usage simple du CSS Grid Layout
- 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. Démo: CSS Grid Layout et Media Queries
- 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. Démo: CSS 3-D transforms, columns & positionated floats
- 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. Démo: CSS3 animations & transforms
- 16. Idée d’intégration dans un jeu
- 18. Internet Explorer 10 : nouvelles APIs HTML5 HTML5 Application IndexedDB Animation Frames Data URI Cache Page Visibility HTML5 async DOM Element Traversal Pointer (Mouse, Pen, HTML5 Canvas DOM HTML and Touch) Events HTML5 Drag and drop DOM Level 3 Core Resource Timing HTML5 Forms and DOM Level 3 Events Validation Selectors API Level 2 DOM Style HTML5 Geolocation Timing callbacks DOM Traversal and Range HTML5 History API DOMParser and Web Messaging HTML5 Parser XMLSerializer HTML5 Sandbox Web Sockets ECMAScript 5 HTML5 Selection Web Workers File Reader API HTML5 Semantic elements XHTML/XML File Saving HTML5 Video and audio XMLHttpRequest (Level FormData ICC Color Profiles 2)
- 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. 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. 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. Lire du texte avec l’objet FileReader function function var new // Obtain input element through DOM. // Read file into memory as UTF-16 var "UTF- 16" if // Handle progress, success, and errors
- 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
- 25. Idée d’intégration dans un jeu
- 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. Démo: utilisation d’IndexedDB pour stocker des images
- 28. Single page web application
- 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. Démo: utilisation des WebWorkers pour appliquer des filtres aux images
- 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. Pour faire de belles applications web tactiles • É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. Démo: utilisation des Pointer Events
- 35. Démo: Modern.IE – un super outil pour vous rendre la vie plus heureuse
- 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. Pour aller plus loin sur HTML5 aux Techdays… Introduction au dev Win8 avec HTML5 et JavaScript (Mardi 13h) Développer pour tous les navigateurs (Mardi 14h30) Coding for Fun (Mardi 17h30) Techniques d'accélération des pages Web (Mercredi 11h) Concevoir des interfaces tactiles à destination de Windows 8 et du web (Mercredi 14h30) HTML5 pour les développeurs WP8 (Mercredi 16h) Tout sur les SPA (Mercredi 17h30)
- 38. Questions ?
- 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 accompagner Windows 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