SlideShare une entreprise Scribd logo
L'histoire d'HTML5 pour les
  développeurs Windows Phone
                                8
                David Catuhe & David Rousset
                         Technical Evangelists
                             Microsoft France
                                       @deltakosh @davrous
                   http://aka.ms/david http://aka.ms/davrous



Code / Développement
Agenda
• Introduction
  5’

• Créer une application pure HTML5   Agenda

  grâce à IE10
  25’

• Comment étendre HTML5 dans une
  app native
  15’
Introduction
Pourquoi faire du HTML5 avec Windows Phone 8
• Réutilisez vos compétences HTML, CSS & JS

• Réduisez potentiellement les couts en réutilisant
  certaines parties sur plusieurs plateformes

• Combinez le avec C# pour accéder entièrement à
  la plateforme
Quelques chiffres intéressants
                  de périphériques mobiles équipés de
         navigateurs modernes en 2013
                            de développeurs Web en 2013
               de développeurs d’applications mobile
         s’intéressent à HTML5
            des applications mobile utiliseront du
         HTML5 en 2015
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612
L’intégration d’HTML5 dans Windows Phone 8




                      Template de projet utilisant
                        le contrôle WebBrowser
Internet Explorer 10
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)
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)
Et oui, nous sommes vraiment rapide!
                    SUNSPIDER 0.9.1 SCORE
                      LOWER IS BETTER
4000

3500

3000

2500

2000

1500

1000

 500

  0
       IE10 (WP8)   HTML5 APP (WP8)   IPHONE 5 SAFARI   IPHONE 5 HTML5 APP
Créer une application
pure HTML5 grâce à
IE10
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
Démo: quelque exemples
wahwah
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 & HTML5
Forms
Windows Phone: respectez son langage de Design
• Une application prévue pour Windows Phone n’a pas
  le même look qu’un site web ou qu’une app
  iOS/Android

• Le niveau de support de CSS d’IE10 vous permet de
  refaire vous-même l’expérience Windows Phone de
  zéro…

• … ou alors utilisez jQuery Mobile et son thème
  Windows Phone !
Démo: jQuery Mobile
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>
Démo: application cache
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
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
L'histoire d'html5 pour les développeurs windows phone 8
Comment étendre HTML5
dans une app native
Communication entre XAML et JavaScript
InvokeScript pour appeler les fonctions JavaScript
depuis le host (C#)
     webBrowser.InvokeScript(“myFunction", “myArg1”);
     webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”);
     webBrowser.InvokeScript(“execScript”, myScript.ToString());




ScriptNotify pour appeler le host (C#) depuis
JavaScript
     XAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” />
     JavaScript: window.external.notify(parameter);
     C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
          // use e.value to retrieve parameter
Gestion du contrôle WebBrowser
• Set the default background color
  –   webBrowser.Background=“#ffff00”;

• Easily navigate backward/forward
  –   if (webBrowser.CanNavigateBack) webBrowser.GoBack();
  –   if (webBrowser.CanNavigateForward) webBrowser.GoForward();

• Clear local cache and cookies
  –   await webBrowser.ClearCookiesAsync();
  –   await webBrowser.ClearInternetCacheAsync();

• Load files directly from XAP
  –   webBrowser.Navigate(new Uri("test.html", UriKind.Relative))
Démo: intégration
HTML5 dans une app
native
PhoneGap/Cordova et
Sencha Touch
Démo: PhoneGap et
Sencha Touch
Ressources
• Nos blogs:
  – David Catuhe: http://blogs.msdn.com/eternalcoding
  – David Rousset: http://blogs.msdn.com/davrous

• Interoperability @ Microsoft
• jQuery Mobile on Windows Phone 8
• PhoneGap: http://phonegap.com/download/
  – Getting Started with Windows Phone 8

• Sencha Touch: Sencha Touch 2.2.0 Alpha now
  available
  – Diablo 3 Mobile Companion for Windows Phone 8
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)
L’Accélérateur Windows
                Ressources
                Coaching
                Visibilité

                        aka.ms/accelerateur-windows

                         Plus d’info ? RDV stand Windows 8
Accélérateur Windows
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

Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 
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
 
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
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
Fabernovel
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
ODC Orange Developer Center
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
Relax In The Air
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
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
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
Microsoft
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
George Edward Mbella Mbella
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
stefounet
 
Comment intégrer Dynamics CRM 2011 dans son système d'information?
Comment intégrer Dynamics CRM 2011 dans son système d'information?Comment intégrer Dynamics CRM 2011 dans son système d'information?
Comment intégrer Dynamics CRM 2011 dans son système d'information?
Microsoft
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MS
Sébastien Ollivier
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3
CERTyou Formation
 

Tendances (20)

Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
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 !
 
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)
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
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
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
 
Comment intégrer Dynamics CRM 2011 dans son système d'information?
Comment intégrer Dynamics CRM 2011 dans son système d'information?Comment intégrer Dynamics CRM 2011 dans son système d'information?
Comment intégrer Dynamics CRM 2011 dans son système d'information?
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MS
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3
 

En vedette

W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
davrous
 
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can MakeFFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
Saffire
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
Rachel Andrew
 
How to Battle Bad Reviews
How to Battle Bad ReviewsHow to Battle Bad Reviews
How to Battle Bad Reviews
Glassdoor
 
The Presentation Come-Back Kid
The Presentation Come-Back KidThe Presentation Come-Back Kid
The Presentation Come-Back Kid
Ethos3
 
The Buyer's Journey - by Chris Lema
The Buyer's Journey - by Chris LemaThe Buyer's Journey - by Chris Lema
The Buyer's Journey - by Chris Lema
Chris Lema
 

En vedette (6)

W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can MakeFFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
How to Battle Bad Reviews
How to Battle Bad ReviewsHow to Battle Bad Reviews
How to Battle Bad Reviews
 
The Presentation Come-Back Kid
The Presentation Come-Back KidThe Presentation Come-Back Kid
The Presentation Come-Back Kid
 
The Buyer's Journey - by Chris Lema
The Buyer's Journey - by Chris LemaThe Buyer's Journey - by Chris Lema
The Buyer's Journey - by Chris Lema
 

Similaire à L'histoire d'html5 pour les développeurs windows phone 8

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
 
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
 
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
 
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
 
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
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et Silverlight
Christophe Lauer
 
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
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
Frédéric Harper
 
Formation mcsd windows store apps html5
Formation mcsd windows store apps html5Formation mcsd windows store apps html5
Formation mcsd windows store apps html5
EGILIA Learning
 
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
Gaëtan LAVENU
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
Thierry Buisson
 
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
Frédéric Harper
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
Microsoft Technet France
 
Developper une application mobile
Developper une application mobileDevelopper une application mobile
Developper une application mobile
Eutech SSII
 
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
Microsoft
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
benjguin
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
Frédéric Queudret
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 

Similaire à L'histoire d'html5 pour les développeurs windows phone 8 (20)

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
 
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
 
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 !
 
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
 
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
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et Silverlight
 
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!
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Formation mcsd windows store apps html5
Formation mcsd windows store apps html5Formation mcsd windows store apps html5
Formation mcsd windows store apps html5
 
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
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
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
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
 
Developper une application mobile
Developper une application mobileDevelopper une application mobile
Developper une application mobile
 
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
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 

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
 
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
 
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
 
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
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 (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
 
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
 
WebCamp HTML5
WebCamp HTML5WebCamp HTML5
WebCamp HTML5
 

L'histoire d'html5 pour les développeurs windows phone 8

  • 1. L'histoire d'HTML5 pour les développeurs Windows Phone 8 David Catuhe & David Rousset Technical Evangelists Microsoft France @deltakosh @davrous http://aka.ms/david http://aka.ms/davrous Code / Développement
  • 2. Agenda • Introduction 5’ • Créer une application pure HTML5 Agenda grâce à IE10 25’ • Comment étendre HTML5 dans une app native 15’
  • 4. Pourquoi faire du HTML5 avec Windows Phone 8 • Réutilisez vos compétences HTML, CSS & JS • Réduisez potentiellement les couts en réutilisant certaines parties sur plusieurs plateformes • Combinez le avec C# pour accéder entièrement à la plateforme
  • 5. Quelques chiffres intéressants de périphériques mobiles équipés de navigateurs modernes en 2013 de développeurs Web en 2013 de développeurs d’applications mobile s’intéressent à HTML5 des applications mobile utiliseront du HTML5 en 2015 IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612
  • 6. L’intégration d’HTML5 dans Windows Phone 8 Template de projet utilisant le contrôle WebBrowser
  • 8. 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)
  • 9. 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)
  • 10. Et oui, nous sommes vraiment rapide! SUNSPIDER 0.9.1 SCORE LOWER IS BETTER 4000 3500 3000 2500 2000 1500 1000 500 0 IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APP
  • 11. Créer une application pure HTML5 grâce à IE10
  • 15. 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
  • 16. 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/
  • 17. Démo: utilisation des Pointer Events & HTML5 Forms
  • 18. Windows Phone: respectez son langage de Design • Une application prévue pour Windows Phone n’a pas le même look qu’un site web ou qu’une app iOS/Android • Le niveau de support de CSS d’IE10 vous permet de refaire vous-même l’expérience Windows Phone de zéro… • … ou alors utilisez jQuery Mobile et son thème Windows Phone !
  • 20. 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
  • 21. 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>
  • 23. 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
  • 25. 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
  • 26. Démo: utilisation des WebWorkers pour appliquer des filtres aux images
  • 28. Comment étendre HTML5 dans une app native
  • 29. Communication entre XAML et JavaScript InvokeScript pour appeler les fonctions JavaScript depuis le host (C#) webBrowser.InvokeScript(“myFunction", “myArg1”); webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”); webBrowser.InvokeScript(“execScript”, myScript.ToString()); ScriptNotify pour appeler le host (C#) depuis JavaScript XAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” /> JavaScript: window.external.notify(parameter); C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e) // use e.value to retrieve parameter
  • 30. Gestion du contrôle WebBrowser • Set the default background color – webBrowser.Background=“#ffff00”; • Easily navigate backward/forward – if (webBrowser.CanNavigateBack) webBrowser.GoBack(); – if (webBrowser.CanNavigateForward) webBrowser.GoForward(); • Clear local cache and cookies – await webBrowser.ClearCookiesAsync(); – await webBrowser.ClearInternetCacheAsync(); • Load files directly from XAP – webBrowser.Navigate(new Uri("test.html", UriKind.Relative))
  • 34. Ressources • Nos blogs: – David Catuhe: http://blogs.msdn.com/eternalcoding – David Rousset: http://blogs.msdn.com/davrous • Interoperability @ Microsoft • jQuery Mobile on Windows Phone 8 • PhoneGap: http://phonegap.com/download/ – Getting Started with Windows Phone 8 • Sencha Touch: Sencha Touch 2.2.0 Alpha now available – Diablo 3 Mobile Companion for Windows Phone 8
  • 35. 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)
  • 36. L’Accélérateur Windows Ressources Coaching Visibilité aka.ms/accelerateur-windows Plus d’info ? RDV stand Windows 8 Accélérateur Windows
  • 38. 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. Intro code / dev
  2. Démos www.pulse.me/app/ et http://atari.com/arcade et http://www.msn.com
  3. 1 – Depuis le Web2 – Install-Package jQMThemeForWindowsPhone8Lite
  4. Démo platformer
  5. 1 – Explication projet PhoneGap / Template VS2 – Création projet par défaut et démo3 – AjoutjQMTheme : Install-Package jQMThemeForWindowsPhone8 4 – Démo SenchaTouch