Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2. Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4

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’

3. Introduction

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

7. Internet Explorer 10

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

14. Démo: quelque exemples
wahwah

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 !

19. Démo: jQuery Mobile

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>

22. Démo: application cache

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

24. Démo: utilisation
d’IndexedDB pour stocker
des images

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))

31. Démo: intégration
HTML5 dans une app
native

32. PhoneGap/Cordova et
Sencha Touch

33. Démo: PhoneGap et
Sencha Touch

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

37. Questions ?

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