L'histoire d'HTML5 pour les développeurs Windows Phone 8
-
Upload
microsoft -
Category
Technology
-
view
438 -
download
1
description
Transcript of L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows
Phone 8
David Catuhe & David RoussetTechnical Evangelists
Microsoft France
Code / Développement
@deltakosh @davroushttp://aka.ms/david http://aka.ms/davrous
• Introduction 5’
• Créer une application pure HTML5 grâce à IE10 25’
• Comment étendre HTML5 dans une app native 15’
• Aller plus loin avec PhoneGap et Sencha Touch 15’
Agenda
Agenda
Introduction
• 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
Pourquoi faire du HTML5 avec Windows Phone 8
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612
• 1 milliard de périphériques mobiles équipés de navigateurs modernes en 2013
• 2 millions de développeurs Web en 2013
• 79% de développeurs d’applications mobile s’intéressent à HTML5
• 80% des applications mobile utiliseront du HTML5 en 2015
Quelques chiffres intéressants
Template de projet utilisant le contrôle
WebBrowser
L’intégration d’HTML5 dans Windows Phone 8
• Accélération matérielle
• Excellente expérience tactile
• Rapide même pour les apps!
• Applications déconnectées possibles!
Internet Explorer 10
Internet Explorer 10 : nouveaux layouts CSS et SVGCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds & BordersCSS ColorCSS FlexboxCSS FontsCSS Grid AlignmentCSS HyphenationCSS Image Values (Gradients)
CSS Media QueriesCSS Multi-column LayoutCSS NamespacesCSS OM ViewsCSS Positioned Floats (Exclusions)CSS SelectorsCSS TransitionsCSS Values and UnitsICC Color ProfilesSVG Filter EffectsSVG, standalone and in HTML
Internet Explorer 10 : nouvelles APIs HTML5 Animation FramesData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal and RangeDOMParser and XMLSerializerECMAScript 5File Reader APIFile SavingFormData
HTML5 Application CacheHTML5 asyncHTML5 CanvasHTML5 Drag and dropHTML5 Forms and ValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 Semantic elementsHTML5 Video and audioICC Color Profiles
IndexedDBPage VisibilityPointer (Mouse, Pen, and Touch) EventsResource TimingSelectors API Level 2Timing callbacksWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXMLHttpRequest (Level 2)
Et oui, nous sommes vraiment rapide!
IE10 (WP8) H T ML5 A pp (WP8) iPho ne 5 Sa fa r i i Pho ne 5 H T ML5 A pp 0
500
1000
1500
2000
2500
3000
3500
4000
Sunspider 0.9.1 ScoreLower is better
Créer une application pure HTML5 grâce à IE10
• 2D & 3D Transforms
• Transitions
• Animations
• Shadows
• Gradients
• Custom Fonts
Effets CSS3
• Multiple Columns
• Positioned floats
• Regions
• Grids
• Flexbox
CSS3 pour gérer le flux
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
• 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
HTML5 application cache
<html manifest=“test.appcache">
<head>
...
<link href="yourstyles.css“ rel="stylesheet"> <script src="yourcode.js"></script> </head> <body>
...
<video … src=“yourvideo.mp4” …>
</video>
...
</body>
</html>
L’usage d’app cache via le fichier de manifest
Cache Manifest#12/02/2013 v10Cache:index.htmlyourstyles.cssyourcode.js...yourvideo.mp4
Network:*
Fichier HTML Fichier de manifest
MIME Type: text/cache-manifest
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
Tout ce dont j’ai besoin serait déjà
présent dans HTML5…
Dans un monde parfait
Comment étendre HTML5 dans une app native
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
Communication entre XAML et JavaScript
• 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))
Gestion du contrôle WebBrowser
Démo: intégration HTML5 dans une app native
PhoneGap/Cordova et Sencha Touch
Démo: PhoneGap et Sencha Touch
• 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
Ressources
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)
Accélérateur Windows
Ressources
Coaching
Visibilité
aka.ms/accelerateur-windows
Plus d’info ? RDV stand Windows 8
L’Accélérateur Windows
Questions ?
Formez-vous en ligne
Retrouvez nos évènements
Faites-vous accompagner gratuitement
Essayer gratuitement nos solutions IT
Retrouver nos experts Microsoft
Pros de l’ITDéveloppeurs
www.microsoftvirtualacademy.com
http://aka.ms/generation-app
http://aka.ms/evenements-developpeurs
http://aka.ms/itcamps-france
Les accélérateursWindows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDNhttp://aka.ms/devteam
L’IT Team sur TechNethttp://aka.ms/itteam