HTML5 sur mobile: le bon, la brute et un gros paquet de truands
31
palais des congrès Paris 7, 8 et 9 février 2012
-
Upload
microsoft -
Category
Technology
-
view
361 -
download
4
description
Il paraitrait que HTML5 c'est le futur des applications et des sites web cross-platform. Dans les faits, quelques frameworks, et certaines APIs relativement stables comme les mediaqueries, le stockage local, ou la géolocalisation, existent et peuvent aider à concevoir une bonne expérience mobile sans code natif... Mais il faut savoir garder un oeil sur les spécificités de chaque plateforme, et on est encore loin de l'idéal (séduisant) futur dans lequel le même code fournira une expérience adaptée sur tous les terminaux quelque soit leur forme. Cette session-débat, agrémentée de démonstrations et de cas concrets, vous guidera à travers les questions qu'il faut se poser quand on décide de s'intéresser au sujet HTML5 spécifiquement dans le monde du mobile, les choix qui vont s'imposer, et ceux qu'il faudra faire en toutes connaissances de cause...
Transcript of HTML5 sur mobile: le bon, la brute et un gros paquet de truands
palais des congrès Paris
7, 8 et 9 février 2012
Jeudi 9 févrierVincent Bourdon [vNext]Romuald Boulanger [Ucaya]Pierre Cauchois [Microsoft]
HTML5 sur mobile :le bon, la brute et un gros paquet de truands (WP7103)
Sommaire
Site Mobile Mode hébergé
Application Mobile Mode embarqué
Comment choisir entre un site web mobile, et une application mobile (HTML5) ?
Site mobile UI/Ergo générique « Responsive Design » (Adaptable)
Application mobile UI/Ergo spécifique Interaction plus forte
Comment choisir entre un site web mobile, et une application mobile (HTML5) ?
Comment choisir entre un site web mobile, et une application mobile (HTML5) ?Site mobile
Peut facilement toucher plusieurs plateformes
Déploiement instantané, et mise à jour transparente
Géolocalisation / Local Storage / mode offline
Légèrement moins performant (tout est téléchargé)
Pas d'accès aux API natives
Application mobile
Plus performant (UI)
Accès au API du téléphone (avec framework)
Publiable sur un store/market
Développement pour une seule plateforme (en partie)
Mise à jour par action de l'utilisateur
Comment choisir un Framework ? Quels sont les conséquences d’un tel choix, sur une application ou un site ?Qu’est-ce qui marche déjà dans les specs de base?
Les Frameworks c'est comme les antibio
c'est pas obligatoire
Que du bonheur… ça marche partout (attention quand même petit bug avec le navigateur Android…)
Exemple, la géolocalisation
http://html5demos.com/geo http://html5please.us
MediaQueries – le premier truc!
DEMO
Par défaut WP7: 1024px iPhone: 980px Android: 800px
Viewport
480px
1024px
Attention au viewport
JQuery (mobile/UI/tools…)ModernizrSencha touch
XUILawnchairjqTouchJo HTML5…
Les Frameworks/helpers Javascript
Faire un choix sur les critères suivants en fonction des compétences de l'équipe de dev :
Comment choisir un Framework ? Quels sont les conséquences d’un tel choix, sur une application ou un site ?
Licensing Connaissance
SimplicitéCouplage
- Multiplateforme testé physiquement- Système de notation et de " progressive
enhancement "- Utilisable sans écrire une ligne de javascript !- Se base sur jQuery et jQuery UI- La Doc est en ligne ICI
On est très habitués à intégrer « de base » JQuery dans un site web. Quid de la version mobile ?
- Thème roller JQM- CSS et HTML spécifique pour l'application- CSS spécifique au device client
Peut-on se débarrasser du look & feel « iPhone » ? comment ?
JQUERY MOBILE
DEMO
UNE APPLICATION HTML5
Quelles plateformes supporte HTML5 pour le dév natif ?
PhoneGap est-il réellement multiplateforme ?
PhoneGap c'est quoi ?
HTML + JS interprété et exécuté dans l’application! Moins performant Pas de compilation de code d’interface
Pas d’utilisation des contrôles natifs Mais possibilité de faire des plugins!
Pas de vrai système de notifications
Qu’est-ce qui va me manquer dans PhoneGap par rapport à une application native ?
Intégrer la calculatrice JQuery dans une application
DEMO
Cross Platform: OUIBon pour la diffusion sur les storesAttention aux petits bugs cachés… car il n’a pas la maturité d’un SDK natifIl n’en a d’ailleurs pas les contours
MAIS : la meilleure option quand on veut une application
Des économies? Oui, mais pas de quoi diviser la facture par 3, plutôt par
1.5, ou 2…
En conclusion sur PhoneGap
Pour le prix d'une app je vous en fait une qui fonctionne partout !!
HTML5 c’est _LA_ solution cross platform Bon pour les sites Bon les apps
MAIS Attention à l’overdose de frameworks Attention au « faux » cross-platform
Est-ce qu’on va faire des économies? OUI mais ça restera souvent moins bien que du natif Faut compter le temps de formation
L’arrivée du support natif de HTML5 dans les OS va changer la donne Mais attention aux implémentations …
Conclusion
Questions?
MERCI!!
Frameworks Mobile http://jquerymobile.com/ http://www.sencha.com/products/touch/ http://phonegap.com/
Helpers http://www.initializr.com/ http://www.modernizr.com/
Comparatif des Implémentations http://mobilehtml5.org/ http://html5demos.com/
ViewPort https://developer.mozilla.org/en/Mobile/Viewport_meta_tag https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/
UsingtheViewport/UsingtheViewport.html
Divers wtfmobileweb.com/
Références
Vous voulez développer une appli Windows Phone ? Inscrivez-vous !
Profitez d’un programme d’accompagnement pour développeurs, à la carte et sans engagement
– Un guide vous contacte et vous accompagne personnellement
– Il met à votre disposition des ressources : accès gratuits* Marketplace, prêts/dons* de téléphone…
– Il vous propose du coaching technique et design
– Il vous aide à rendre visible votre application en ligne et à des événements
*Dans la limite des quantités disponibles
Play time!Comment s’appelle la technologie CSS3 qui
permet de faire du responsive design?
Play time!Comment s’appelle l’outil de compilation
« in the cloud » de phonegap?
