L'histoire d'HTML5 pour les développeurs Windows Phone 8

  • 410 views
Uploaded on

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 …

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 œil 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
410
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Intro code / dev
  • Démos www.pulse.me/app/ et http://atari.com/arcade et http://www.msn.com
  • 1 – Depuis le Web2 – Install-Package jQMThemeForWindowsPhone8Lite
  • Démo platformer
  • 1 – Explication projet PhoneGap / Template VS2 – Création projet par défaut et démo3 – AjoutjQMTheme : Install-Package jQMThemeForWindowsPhone8 4 – Démo SenchaTouch

Transcript

  • 1. Lhistoire dHTML5 pour lesdéveloppeurs Windows Phone8David Catuhe & David RoussetTechnical EvangelistsMicrosoft FranceCode / Développement@deltakosh @davroushttp://aka.ms/david http://aka.ms/davrous
  • 2. • Introduction5’• Créer une application pure HTML5grâce à IE1025’• Comment étendre HTML5 dans uneapp native15’AgendaAgenda
  • 3. Introduction
  • 4. • Réutilisez vos compétences HTML, CSS & JS• Réduisez potentiellement les couts en réutilisantcertaines parties sur plusieurs plateformes• Combinez le avec C# pour accéder entièrement àla plateformePourquoi faire du HTML5 avec Windows Phone 8
  • 5. IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612de périphériques mobiles équipés denavigateurs modernes en 2013de développeurs Web en 2013de développeurs d’applications mobiles’intéressent à HTML5des applications mobile utiliseront duHTML5 en 2015Quelques chiffres intéressants
  • 6. Template de projet utilisantle contrôle WebBrowserL’intégration d’HTML5 dans Windows Phone 8
  • 7. Internet Explorer 10
  • 8. Internet Explorer 10 : nouveaux layouts CSS etSVGCSS 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
  • 9. Internet Explorer 10 : nouvelles APIsHTML5Animation FramesData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal and RangeDOMParser andXMLSerializerECMAScript 5File Reader APIFile SavingFormDataHTML5 ApplicationCacheHTML5 asyncHTML5 CanvasHTML5 Drag and dropHTML5 Forms andValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 Semantic elementsHTML5 Video and audioICC Color ProfilesIndexedDBPage VisibilityPointer (Mouse, Pen,and Touch) EventsResource TimingSelectors API Level 2Timing callbacksWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXMLHttpRequest (Level2)
  • 10. Et oui, nous sommes vraiment rapide!05001000150020002500300035004000IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APPSUNSPIDER 0.9.1 SCORELOWER IS BETTER
  • 11. Créer une applicationpure HTML5 grâce àIE10
  • 12. Démo: quelque exempleswahwah
  • 13. Pointer Events (touch, stylet, souris)• Ecrivez votre code une seule fois pour le tactile, lestylet et la souris• Les sites écrits uniquement pour la souris fonctionneautomatiquement• Patterns connus d’évènements DOM de la souris, avecdes extensions pour le touch
  • 14. Pour faire de belles applications webtactiles• Évènements MSPointer pour cibler le tactile, la souriset le stylet de manière unifiée• Évènements MSGesture pour facilement reconnaitrecertaines manipulation (zoom, rotation, hold, etc.)• Propriétés CSS -ms-touch-action pour indiquercomment chaque zone doit se comporter face au touch• Microsoft a soumis la spécification au W3C:– http://www.w3.org/Submission/pointer-events/
  • 15. Démo: utilisation desPointer Events & HTML5Forms
  • 16. Windows Phone: respectez son langage de Design• Une application prévue pour Windows Phone n’a pasle même look qu’un site web ou qu’une appiOS/Android• Le niveau de support de CSS d’IE10 vous permet derefaire vous-même l’expérience Windows Phone dezéro…• … ou alors utilisez jQuery Mobile et son thèmeWindows Phone !
  • 17. Démo: jQuery Mobile
  • 18. • Cache basé sur un manifeste pour des scenariosdéconnectés• Choisissez les fichiers à cacher: HTML, CSS, JS& vos ressources• Permet de rendre disponible vos ressources audelà du cache local HTTP• Resynchronisez les fichiers via une MAJ dumanifesteHTML5 application cache
  • 19. <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 demanifestMIME Type: text/cache-manifest
  • 20. Démo: application cache
  • 21. 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 del’implémentation du navigateur
  • 22. Démo: utilisationd’IndexedDB pour stockerdes images
  • 23. WebWorkers• L’approche JavaScript vers le multi-threading• Libère le UI thread en envoyant desrequêtes aux workers• Communication avec les workers viapostMessage()• Pas d’accès DOM
  • 24. Démo: utilisation desWebWorkers pour appliquerdes filtres aux images
  • 25. Comment étendre HTML5dans une app native
  • 26. InvokeScript pour appeler les fonctions JavaScriptdepuis 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#) depuisJavaScriptXAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” />JavaScript: window.external.notify(parameter);C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e)// use e.value to retrieve parameterCommunication entre XAML et JavaScript
  • 27. • 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
  • 28. Démo: intégrationHTML5 dans une appnative
  • 29. PhoneGap/Cordova etSencha Touch
  • 30. Démo: PhoneGap etSencha Touch
  • 31. • 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 nowavailable– Diablo 3 Mobile Companion for Windows Phone 8Ressources
  • 32. Pour aller plus loin sur HTML5 aux Techdays…Introduction au dev Win8 avec HTML5 et JavaScript (Mardi13h)Développer pour tous les navigateurs (Mardi 14h30)Coding for Fun (Mardi 17h30)Techniques daccélération des pages Web (Mercredi 11h)Concevoir des interfaces tactiles à destination de Windows8 et du web (Mercredi 14h30)HTML5 pour les développeurs WP8 (Mercredi 16h)Tout sur les SPA (Mercredi 17h30)
  • 33. Accélérateur WindowsRessourcesCoachingVisibilitéaka.ms/accelerateur-windowsPlus d’info ? RDV stand Windows 8L’Accélérateur Windows
  • 34. Questions ?
  • 35. Formez-vous en ligneRetrouvez nos évènementsFaites-vous accompagnergratuitementEssayer gratuitement nossolutions ITRetrouver nos expertsMicrosoftPros de l’ITDéveloppeurswww.microsoftvirtualacademy.comhttp://aka.ms/generation-apphttp://aka.ms/evenements-developpeurshttp://aka.ms/itcamps-franceLes accélérateursWindows Azure, Windows Phone,Windows 8http://aka.ms/telechargementsLa Dev’Team sur MSDNhttp://aka.ms/devteamL’IT Team sur TechNethttp://aka.ms/itteam