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?