L'histoire d'html5 pour les développeurs windows phone 8
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,978 views

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

Statistics

Views

Total Views
1,978
Views on SlideShare
1,953
Embed Views
25

Actions

Likes
0
Downloads
43
Comments
0

2 Embeds 25

http://live.mstechdays.fr 14
https://twitter.com 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

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

  • Lhistoire dHTML5 pour les développeurs Windows Phone 8 David Catuhe & David Rousset Technical Evangelists Microsoft France @deltakosh @davrous http://aka.ms/david http://aka.ms/davrousCode / 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 2015IDC - 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 etSVGCSS 2D Transforms CSS Media QueriesCSS 3D Transforms CSS Multi-column LayoutCSS Animations CSS NamespacesCSS Backgrounds & CSS OM ViewsBorders CSS Positioned Floats (Exclusions)CSS Color CSS Selectors CSS TransitionsCSS Flexbox CSS Values and UnitsCSS Fonts ICC Color ProfilesCSS Grid Alignment SVG Filter EffectsCSS Hyphenation SVG, standalone and in HTMLCSS Image Values(Gradients)
  • Internet Explorer 10 : nouvelles APIsHTML5 HTML5 Application IndexedDBAnimation FramesData URI Cache Page Visibility HTML5 asyncDOM Element Traversal Pointer (Mouse, Pen, HTML5 CanvasDOM HTML and Touch) Events HTML5 Drag and dropDOM Level 3 Core Resource Timing HTML5 Forms andDOM Level 3 Events Validation Selectors API Level 2DOM Style HTML5 Geolocation Timing callbacksDOM Traversal and Range HTML5 History APIDOMParser and Web Messaging HTML5 ParserXMLSerializer HTML5 Sandbox Web SocketsECMAScript 5 HTML5 Selection Web WorkersFile Reader API HTML5 Semantic elements XHTML/XMLFile Saving HTML5 Video and audio XMLHttpRequest (LevelFormData ICC Color Profiles 2)
  • Et oui, nous sommes vraiment rapide! SUNSPIDER 0.9.1 SCORE LOWER IS BETTER4000350030002500200015001000 500 0 IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APP
  • Créer une applicationpure HTML5 grâce àIE10
  • Démo: quelque exempleswahwah
  • 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 webtactiles• É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 desPointer Events & HTML5Forms
  • 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: utilisationd’IndexedDB pour stockerdes 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 desWebWorkers pour appliquerdes filtres aux images
  • Comment étendre HTML5dans une app native
  • Communication entre XAML et JavaScriptInvokeScript 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#) depuisJavaScript 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égrationHTML5 dans une appnative
  • PhoneGap/Cordova etSencha Touch
  • Démo: PhoneGap etSencha 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 (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)
  • L’Accélérateur Windows Ressources Coaching Visibilité aka.ms/accelerateur-windows Plus d’info ? RDV stand Windows 8Accé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 accompagnerWindows 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