SlideShare une entreprise Scribd logo
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
Les dernières avancées HTML5
               & CSS3 en action !

                             David Rousset
                        Technical Evangelist
                           Microsoft France
                                           @davrous
                       http://blogs.msdn.com/davrous



Code / Développement
Vous allez voir que…
Agenda
• Animations et autres nouveautés CSS3   25’

• Nouvelles APIs HTML5                   25’
                                               Agenda


• Support du Touch                       10’
Animations et autres
nouveautés CSS3
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)
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;
          -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>
Démo: usage simple du
CSS Grid Layout
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 }
                       }
Démo: CSS Grid Layout
et Media Queries
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
Démo: CSS 3-D transforms,
columns & positionated
floats
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.
Démo: CSS3 animations &
transforms
Idée d’intégration dans un jeu
Nouvelles APIs
HTML5
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)
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
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>
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
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
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
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

• Indexation en utilisant un attribut objet

• Pas de dépendances vis-à-vis de
  l’implémentation du navigateur
Démo: utilisation
d’IndexedDB pour stocker
des 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
• Communication avec les workers via
 postMessage()
• Pas d’accès DOM
Démo: utilisation des
WebWorkers pour appliquer
des filtres aux images
Nouvelles APIs
HTML5
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
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/
Démo: utilisation des
Pointer Events
Démo: Modern.IE – un
super outil pour vous rendre
la vie plus heureuse
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
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)
Questions ?
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

Contenu connexe

En vedette

[weave] Risk and compliance - implémentation d'un SIGR
[weave] Risk and compliance - implémentation d'un SIGR [weave] Risk and compliance - implémentation d'un SIGR
[weave] Risk and compliance - implémentation d'un SIGR
onepoint x weave
 
Ofimatica I I Iparcial
Ofimatica I I IparcialOfimatica I I Iparcial
Ofimatica I I Iparcial
suyapaful
 
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk'sEmprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
Instituto de Formacion Tecnico Profesional
 
T R A N S P O R T E M O D E L O O S I
T R A N S P O R T E  M O D E L O  O S IT R A N S P O R T E  M O D E L O  O S I
T R A N S P O R T E M O D E L O O S I
Tecnolgicos del Norte del Valle
 
Propuesta TecnolóGica
Propuesta TecnolóGicaPropuesta TecnolóGica
Propuesta TecnolóGica
Omar Hernandez
 
Buenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
Buenas prácticas en la Mediana Empresa - Caso: Industrias NiguaBuenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
Buenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
Instituto de Formacion Tecnico Profesional
 
Proyecto Guada
Proyecto GuadaProyecto Guada
Proyecto Guada
guada rodas
 
Fantasía Surrealista
Fantasía SurrealistaFantasía Surrealista
Fantasía Surrealista
Celeste Box
 
Presentacion Power Point Ines Informatika
Presentacion Power Point Ines InformatikaPresentacion Power Point Ines Informatika
Presentacion Power Point Ines Informatika
inesal12
 
Presentacion (Los Mochileros)
Presentacion (Los Mochileros)Presentacion (Los Mochileros)
Presentacion (Los Mochileros)
guest3031e91
 
Presentacion institucional - NOUX C.A.
Presentacion institucional - NOUX C.A.Presentacion institucional - NOUX C.A.
Presentacion institucional - NOUX C.A.
NOUX C.A.
 
Comunidades de práctica en salud 2.0
Comunidades de práctica en salud 2.0Comunidades de práctica en salud 2.0
Comunidades de práctica en salud 2.0
Olga Navarro
 
Novembre
NovembreNovembre
Novembre
reneecouturier
 
RECRUITING TOUR 755
RECRUITING TOUR 755RECRUITING TOUR 755
RECRUITING TOUR 755
leeeunhak
 
Preparacionplantas
PreparacionplantasPreparacionplantas
Preparacionplantas
Liliana Estrada
 
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
Oeko-Institut
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
davrous
 

En vedette (20)

[weave] Risk and compliance - implémentation d'un SIGR
[weave] Risk and compliance - implémentation d'un SIGR [weave] Risk and compliance - implémentation d'un SIGR
[weave] Risk and compliance - implémentation d'un SIGR
 
Ofimatica I I Iparcial
Ofimatica I I IparcialOfimatica I I Iparcial
Ofimatica I I Iparcial
 
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk'sEmprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
Emprendedores Egresados de la Formacion Dual. Caso Sólo Volk's
 
T R A N S P O R T E M O D E L O O S I
T R A N S P O R T E  M O D E L O  O S IT R A N S P O R T E  M O D E L O  O S I
T R A N S P O R T E M O D E L O O S I
 
Propuesta TecnolóGica
Propuesta TecnolóGicaPropuesta TecnolóGica
Propuesta TecnolóGica
 
Buenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
Buenas prácticas en la Mediana Empresa - Caso: Industrias NiguaBuenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
Buenas prácticas en la Mediana Empresa - Caso: Industrias Nigua
 
Proyecto Guada
Proyecto GuadaProyecto Guada
Proyecto Guada
 
Fantasía Surrealista
Fantasía SurrealistaFantasía Surrealista
Fantasía Surrealista
 
Presentacion Power Point Ines Informatika
Presentacion Power Point Ines InformatikaPresentacion Power Point Ines Informatika
Presentacion Power Point Ines Informatika
 
Presentacion (Los Mochileros)
Presentacion (Los Mochileros)Presentacion (Los Mochileros)
Presentacion (Los Mochileros)
 
Kädi 2012
Kädi 2012Kädi 2012
Kädi 2012
 
Presentacion institucional - NOUX C.A.
Presentacion institucional - NOUX C.A.Presentacion institucional - NOUX C.A.
Presentacion institucional - NOUX C.A.
 
LES FLORS
LES FLORSLES FLORS
LES FLORS
 
Comunidades de práctica en salud 2.0
Comunidades de práctica en salud 2.0Comunidades de práctica en salud 2.0
Comunidades de práctica en salud 2.0
 
Novembre
NovembreNovembre
Novembre
 
RECRUITING TOUR 755
RECRUITING TOUR 755RECRUITING TOUR 755
RECRUITING TOUR 755
 
Preparacionplantas
PreparacionplantasPreparacionplantas
Preparacionplantas
 
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
Mögliche Veränderung der Energienachfrage des Verkehrs und Wechselwirkungen m...
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
 
SPRING LAYOUT
SPRING LAYOUTSPRING LAYOUT
SPRING LAYOUT
 

Similaire à Les dernières avancées html5 & css3 en action !

Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
davrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Microsoft
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
Julien LE THUAUT
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
MBA Multimedia
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
Horacio Gonzalez
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Raphaël Goetter
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Horacio Gonzalez
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
Microsoft
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
le.genie.logiciel
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
yassinesouli2
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 

Similaire à Les dernières avancées html5 & css3 en action ! (20)

Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Plus de davrous

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016
davrous
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
davrous
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
davrous
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
davrous
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
davrous
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
davrous
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
davrous
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
davrous
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
davrous
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
davrous
 
Pointer events
Pointer eventsPointer events
Pointer events
davrous
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
davrous
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
davrous
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
davrous
 
Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5
davrous
 
AMDEV: Graphismes avec html5 grâce à canvas et svg
AMDEV: Graphismes avec html5 grâce à canvas et svgAMDEV: Graphismes avec html5 grâce à canvas et svg
AMDEV: Graphismes avec html5 grâce à canvas et svg
davrous
 
HTML5 pour l’écriture d’applications cross-devices
HTML5 pour l’écriture d’applications cross-devicesHTML5 pour l’écriture d’applications cross-devices
HTML5 pour l’écriture d’applications cross-devices
davrous
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5
davrous
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5
davrous
 

Plus de davrous (19)

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
 
Pointer events
Pointer eventsPointer events
Pointer events
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5
 
AMDEV: Graphismes avec html5 grâce à canvas et svg
AMDEV: Graphismes avec html5 grâce à canvas et svgAMDEV: Graphismes avec html5 grâce à canvas et svg
AMDEV: Graphismes avec html5 grâce à canvas et svg
 
HTML5 pour l’écriture d’applications cross-devices
HTML5 pour l’écriture d’applications cross-devicesHTML5 pour l’écriture d’applications cross-devices
HTML5 pour l’écriture d’applications cross-devices
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5
 

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
  • 4. Agenda • Animations et autres nouveautés CSS3 25’ • Nouvelles APIs HTML5 25’ Agenda • Support du Touch 10’
  • 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
  • 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
  • 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
  • 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/
  • 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)
  • 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

Notes de l'éditeur

  1. Notation
  2. Intro code / dev
  3. T+4min
  4. T+8min
  5. T+17min
  6. T+24min
  7. T+29min
  8. T+34min
  9. T+24min
  10. T+47min