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
Introduction au développement
        Windows 8 ModernUI avec
             HTML5 et JavaScript
                             David Rousset
                        Technical Evangelist
                           Microsoft France
                                           @davrous
                       http://blogs.msdn.com/davrous



Code / Développement
Agenda
• Présentation du modèle HTML5             15’


• Démo de code                             45’   Agenda

  – Création d’un lecteur RSS depuis 0     30’
     • Utilisation de WinJS, templating,
       binding et Blend 5

  – Accès à la camera via WinRT            15’
HTML5 et Windows
  8
 Regardons rapidement les concepts base
• Regardons rapidement les concepts base
La plateforme Windows 8
La plateforme Windows 8 en HTML5
Internet Explorer 10 : nouveaux layouts
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 Flexbox
                       CSS Transitions
CSS Fonts              CSS Values and Units
CSS Grid Alignment     ICC Color Profiles
CSS Hyphenation        SVG Filter Effects
CSS Image Values       SVG, standalone and in HTML
Internet Explorer 10 : nouvelles APIs
HTML5
Animation Frames          HTML5 Application Cache      IndexedDB
Data URI                  HTML5 async                  Page Visibility
DOM Element Traversal     HTML5 Canvas                 Pointer (Mouse, Pen, and
DOM HTML                  HTML5 Drag and drop          Touch) Events
DOM Level 3 Core          HTML5 Forms and Validation
DOM Level 3 Events        HTML5 Geolocation
                                                       Resource Timing
DOM Style                 HTML5 History API            Selectors API Level 2
DOM Traversal and Range   HTML5 Parser                 Timing callbacks
DOMParser and             HTML5 Sandbox                Web Messaging
XMLSerializer             HTML5 Selection
ECMAScript 5
                                                       Web Sockets
                          HTML5 Semantic elements
File Reader API           HTML5 Video and audio        Web Workers
File Saving               ICC Color Profiles           XHTML/XML
FormData                                               XMLHttpRequest (Level 2)
Démo d’applications
 Windows 8 utilisant
 HTML5 une idée
 Pour vous donner
• Pour vous donner une idée base
Windows Library for JavaScript (WinJS)
WinJS
Les contrôles classiques
Les contrôles classiques – stylés par CSS
Code party
  Enough blah-blah, let’s code!
• Pour vous donner une idée base
Pour aller plus loin sur Windows 8…

Le site officiel regroupant plus de 200
exemples et la documentation:
http://dev.windows.com

Rejouez ces 2 démos en suivant les 2 séries
de tutoriaux sur mon blog:
http://blogs.msdn.com/davrous
L’Accélérateur Windows
                Ressources
                Coaching
                Visibilité

                        aka.ms/accelerateur-windows

                         Plus d’info ? RDV stand Windows 8
Accélérateur Windows
4 ouvrages écrits par 13 Microsoftees




http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels
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

Tendances

Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
Comment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsComment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsBruno Soufo
 
Nouveautés 2009
Nouveautés 2009Nouveautés 2009
Nouveautés 2009XWiki
 

Tendances (7)

Prismic
PrismicPrismic
Prismic
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Comment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome AppsComment créer des Chrome Apps ou Packaged Chrome Apps
Comment créer des Chrome Apps ou Packaged Chrome Apps
 
Livre Blanc Web temps réel - Node JS
Livre Blanc Web temps réel - Node JSLivre Blanc Web temps réel - Node JS
Livre Blanc Web temps réel - Node JS
 
Nouveautés 2009
Nouveautés 2009Nouveautés 2009
Nouveautés 2009
 

En vedette

2ª Salida PedagóGica
2ª Salida PedagóGica2ª Salida PedagóGica
2ª Salida PedagóGicacristhian
 
Cap dementia slachevsky&oyarzo_08
Cap dementia slachevsky&oyarzo_08Cap dementia slachevsky&oyarzo_08
Cap dementia slachevsky&oyarzo_08Dann Arriaga
 
Tintin (2)ignacio
Tintin (2)ignacioTintin (2)ignacio
Tintin (2)ignaciopacitina
 
Et le français dans tout ça #5
Et le français dans tout ça #5Et le français dans tout ça #5
Et le français dans tout ça #5Florence Augustine
 
Presentación SEO 2013
Presentación SEO 2013Presentación SEO 2013
Presentación SEO 2013IOMarketing
 
Presentacion diabetes
Presentacion diabetesPresentacion diabetes
Presentacion diabetesEPES 061
 
Presentation copilot partners table ronde micro paiement
Presentation copilot partners   table ronde micro paiementPresentation copilot partners   table ronde micro paiement
Presentation copilot partners table ronde micro paiementAFMM
 
Campamento crsa detalle
Campamento crsa detalleCampamento crsa detalle
Campamento crsa detalleUSET
 
11 phot d'art_divers
11 phot d'art_divers11 phot d'art_divers
11 phot d'art_diversJuan Nuin
 
Legislacion mercantil y societaria
Legislacion mercantil y societariaLegislacion mercantil y societaria
Legislacion mercantil y societariaRonald Gordillo
 
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...Oeko-Institut
 
Presentacion Pucesi 001
Presentacion Pucesi 001Presentacion Pucesi 001
Presentacion Pucesi 001ESPOCH
 
Meningiome a cellules claires
Meningiome a cellules clairesMeningiome a cellules claires
Meningiome a cellules clairesneurochirurgie
 
La Matinale - X-PRIME Groupe - Facebook, etats des lieux de la plateforme
La Matinale - X-PRIME Groupe - Facebook,  etats des lieux de la plateformeLa Matinale - X-PRIME Groupe - Facebook,  etats des lieux de la plateforme
La Matinale - X-PRIME Groupe - Facebook, etats des lieux de la plateformeX-PRIME GROUPE
 
Presentation etude micropaiement 2011 afmm mediametrie
Presentation etude micropaiement 2011 afmm mediametriePresentation etude micropaiement 2011 afmm mediametrie
Presentation etude micropaiement 2011 afmm mediametrieAFMM
 

En vedette (20)

2ª Salida PedagóGica
2ª Salida PedagóGica2ª Salida PedagóGica
2ª Salida PedagóGica
 
Cap dementia slachevsky&oyarzo_08
Cap dementia slachevsky&oyarzo_08Cap dementia slachevsky&oyarzo_08
Cap dementia slachevsky&oyarzo_08
 
Tintin (2)ignacio
Tintin (2)ignacioTintin (2)ignacio
Tintin (2)ignacio
 
Creacion alertas bing
Creacion alertas bingCreacion alertas bing
Creacion alertas bing
 
Et le français dans tout ça #5
Et le français dans tout ça #5Et le français dans tout ça #5
Et le français dans tout ça #5
 
Repositorio ruc udc
Repositorio ruc udcRepositorio ruc udc
Repositorio ruc udc
 
Presentación SEO 2013
Presentación SEO 2013Presentación SEO 2013
Presentación SEO 2013
 
Presentacion diabetes
Presentacion diabetesPresentacion diabetes
Presentacion diabetes
 
2ªEvaluacióN
2ªEvaluacióN2ªEvaluacióN
2ªEvaluacióN
 
Presentation copilot partners table ronde micro paiement
Presentation copilot partners   table ronde micro paiementPresentation copilot partners   table ronde micro paiement
Presentation copilot partners table ronde micro paiement
 
Robonova 1
Robonova 1Robonova 1
Robonova 1
 
Campamento crsa detalle
Campamento crsa detalleCampamento crsa detalle
Campamento crsa detalle
 
11 phot d'art_divers
11 phot d'art_divers11 phot d'art_divers
11 phot d'art_divers
 
Legislacion mercantil y societaria
Legislacion mercantil y societariaLegislacion mercantil y societaria
Legislacion mercantil y societaria
 
2º ESO A
2º ESO A2º ESO A
2º ESO A
 
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...
Aspekte der Sicherheit und Entsorgung bei Stilllegung und Rückbau des AKW Fes...
 
Presentacion Pucesi 001
Presentacion Pucesi 001Presentacion Pucesi 001
Presentacion Pucesi 001
 
Meningiome a cellules claires
Meningiome a cellules clairesMeningiome a cellules claires
Meningiome a cellules claires
 
La Matinale - X-PRIME Groupe - Facebook, etats des lieux de la plateforme
La Matinale - X-PRIME Groupe - Facebook,  etats des lieux de la plateformeLa Matinale - X-PRIME Groupe - Facebook,  etats des lieux de la plateforme
La Matinale - X-PRIME Groupe - Facebook, etats des lieux de la plateforme
 
Presentation etude micropaiement 2011 afmm mediametrie
Presentation etude micropaiement 2011 afmm mediametriePresentation etude micropaiement 2011 afmm mediametrie
Presentation etude micropaiement 2011 afmm mediametrie
 

Similaire à Introduction au développement windows 8 modern ui avec html5 et javascript

Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSMicrosoft
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Microsoft
 
2014 applications web sur Azure
2014 applications web sur Azure2014 applications web sur Azure
2014 applications web sur AzureJulien Plée
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Microsoft
 
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 8Microsoft
 
La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsMicrosoft
 
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 HTML5davrous
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionMicrosoft
 
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 10davrous
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightChristophe Lauer
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesGaëtan LAVENU
 
Formation mcsd windows store apps html5
Formation mcsd windows store apps html5Formation mcsd windows store apps html5
Formation mcsd windows store apps html5EGILIA Learning
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005Gregory Renard
 
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...Microsoft
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
Trucs et astuces pour rendre votre application Windows 8 plus visible
Trucs et astuces pour rendre votre application Windows 8 plus visibleTrucs et astuces pour rendre votre application Windows 8 plus visible
Trucs et astuces pour rendre votre application Windows 8 plus visibleMicrosoft
 

Similaire à Introduction au développement windows 8 modern ui avec html5 et javascript (20)

Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5
 
2014 applications web sur Azure
2014 applications web sur Azure2014 applications web sur Azure
2014 applications web sur Azure
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
 
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
 
La plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nulsLa plateforme de développement Microsoft pour les nuls
La plateforme de développement Microsoft pour les nuls
 
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
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 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
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et Silverlight
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
Formation mcsd windows store apps html5
Formation mcsd windows store apps html5Formation mcsd windows store apps html5
Formation mcsd windows store apps html5
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...
Windows Azure Web Sites, Cloud Services ou Virtual Machines ? Quelles technol...
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Trucs et astuces pour rendre votre application Windows 8 plus visible
Trucs et astuces pour rendre votre application Windows 8 plus visibleTrucs et astuces pour rendre votre application Windows 8 plus visible
Trucs et astuces pour rendre votre application Windows 8 plus visible
 

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 2016davrous
 
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 audiodavrous
 
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 Microsoftdavrous
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsdavrous
 
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.esdavrous
 
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.JSdavrous
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Parisdavrous
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Sourcedavrous
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGLdavrous
 
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.jsdavrous
 
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.jsdavrous
 
Pointer events
Pointer eventsPointer events
Pointer eventsdavrous
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8davrous
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3davrous
 
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 stockagedavrous
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Inteldavrous
 
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 html5davrous
 
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 svgdavrous
 
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-devicesdavrous
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5davrous
 

Plus de davrous (20)

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
 
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
 
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 html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
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
 

Introduction au développement windows 8 modern ui avec html5 et javascript

  • 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. Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript David Rousset Technical Evangelist Microsoft France @davrous http://blogs.msdn.com/davrous Code / Développement
  • 3. Agenda • Présentation du modèle HTML5 15’ • Démo de code 45’ Agenda – Création d’un lecteur RSS depuis 0 30’ • Utilisation de WinJS, templating, binding et Blend 5 – Accès à la camera via WinRT 15’
  • 4. HTML5 et Windows 8 Regardons rapidement les concepts base • Regardons rapidement les concepts base
  • 7. Internet Explorer 10 : nouveaux layouts 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 Flexbox CSS Transitions CSS Fonts CSS Values and Units CSS Grid Alignment ICC Color Profiles CSS Hyphenation SVG Filter Effects CSS Image Values SVG, standalone and in HTML
  • 8. Internet Explorer 10 : nouvelles APIs HTML5 Animation Frames HTML5 Application Cache IndexedDB Data URI HTML5 async Page Visibility DOM Element Traversal HTML5 Canvas Pointer (Mouse, Pen, and DOM HTML HTML5 Drag and drop Touch) Events DOM Level 3 Core HTML5 Forms and Validation DOM Level 3 Events HTML5 Geolocation Resource Timing DOM Style HTML5 History API Selectors API Level 2 DOM Traversal and Range HTML5 Parser Timing callbacks DOMParser and HTML5 Sandbox Web Messaging XMLSerializer HTML5 Selection ECMAScript 5 Web Sockets HTML5 Semantic elements File Reader API HTML5 Video and audio Web Workers File Saving ICC Color Profiles XHTML/XML FormData XMLHttpRequest (Level 2)
  • 9. Démo d’applications Windows 8 utilisant HTML5 une idée Pour vous donner • Pour vous donner une idée base
  • 10. Windows Library for JavaScript (WinJS)
  • 11. WinJS
  • 13. Les contrôles classiques – stylés par CSS
  • 14. Code party Enough blah-blah, let’s code! • Pour vous donner une idée base
  • 15. Pour aller plus loin sur Windows 8… Le site officiel regroupant plus de 200 exemples et la documentation: http://dev.windows.com Rejouez ces 2 démos en suivant les 2 séries de tutoriaux sur mon blog: http://blogs.msdn.com/davrous
  • 16. L’Accélérateur Windows Ressources Coaching Visibilité aka.ms/accelerateur-windows Plus d’info ? RDV stand Windows 8 Accélérateur Windows
  • 17. 4 ouvrages écrits par 13 Microsoftees http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels
  • 19. 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+42
  4. http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels/