HTML5 sur mobile: le bon, la brute et un gros paquet de truands
•Als PPTX, PDF herunterladen•
1 gefällt mir•801 views
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...
![HTML5 sur mobile :
le bon, la brute et un gros
paquet de truands (WP7103)
Jeudi 9 février
Vincent Bourdon [vNext]
Romuald Boulanger [Ucaya]
Pierre Cauchois [Microsoft]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Microsoft
Mehr von Microsoft (20)
HTML5 sur mobile: le bon, la brute et un gros paquet de truands
- 1. palais des congrès Paris 7, 8 et 9 février 2012
- 2. HTML5 sur mobile : le bon, la brute et un gros paquet de truands (WP7103) Jeudi 9 février Vincent Bourdon [vNext] Romuald Boulanger [Ucaya] Pierre Cauchois [Microsoft]
- 3. Sommaire
- 4. Comment choisir entre un site web mobile, et une application mobile (HTML5) ? Site Mobile Application Mobile Mode hébergé Mode embarqué
- 5. 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
- 6. Comment choisir entre un site web mobile, et une application mobile (HTML5) ? Site mobile Application mobile Peut facilement toucher plusieurs plateformes Plus performant (UI) Déploiement instantané, et mise à jour transparente Accès au API du téléphone (avec framework) Géolocalisation / Local Storage / mode offline Publiable sur un store/market Légèrement moins performant (tout est téléchargé) Développement pour une seule plateforme (en partie) Pas d'accès aux API natives Mise à jour par action de l'utilisateur
- 7. 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?
- 8. Les Frameworks c'est comme les antibio c'est pas obligatoire
- 9. Exemple, la géolocalisation Que du bonheur… ça marche partout (attention quand même petit bug avec le navigateur Android…) http://html5demos.com/geo http://html5please.us
- 10. DEMO MediaQueries – le premier truc!
- 11. Viewport Par défaut WP7: 1024px iPhone: 980px Android: 800px 480px 1024px
- 13. Les Frameworks/helpers Javascript JQuery (mobile/UI/tools…) Modernizr Sencha touch XUI Lawnchair jqTouch Jo HTML5 …
- 14. Comment choisir un Framework ? Quels sont les conséquences d’un tel choix, sur une application ou un site ? Faire un choix sur les critères suivants en fonction des compétences de l'équipe de dev : Licensing Couplage Simplicité Connaissance
- 15. On est très habitués à intégrer « de base » JQuery dans un site web. Quid de la version mobile ? - 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
- 16. Peut-on se débarrasser du look & feel « iPhone » ? comment ? - Thème roller JQM - CSS et HTML spécifique pour l'application - CSS spécifique au device client
- 19. Quelles plateformes supporte HTML5 pour le dév natif ?
- 20. PhoneGap est-il réellement multiplateforme ?
- 21. PhoneGap c'est quoi ?
- 22. Qu’est-ce qui va me manquer dans PhoneGap par rapport à une application native ? 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
- 23. DEMO Intégrer la calculatrice JQuery dans une application
- 24. En conclusion sur PhoneGap Cross Platform: OUI Bon pour la diffusion sur les stores Attention aux petits bugs cachés… car il n’a pas la maturité d’un SDK natif Il 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…
- 25. Pour le prix d'une app je vous en fait une qui fonctionne partout !!
- 26. Conclusion HTML5 c’est _LA_ solution cross platform Bon pour les sites Bon les apps MAIS Attention à l’ verdose de frameworks o 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 …
- 28. Références 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/Usi ngtheViewport.html Divers wtfmobileweb.com/
- 29. 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
- 30. Play time! Comment s’appelle la technologie CSS3 qui permet de faire du responsive design?
- 31. Play time! Comment s’appelle l’outil de compilation « in the cloud » de phonegap?
Hinweis der Redaktion
- Pierre: Au sommaire, du HTML5, du Jquery mobile, du phonegap, des interactions, et surtout pas de trollsNous ne sommes pas des évangélistes HTML5!Romu est développeur web qui travaille de plus en plus mobile (et mobile / natif)Pierre est développeur d’applications nativesVincent a passé ces derniers mois à shipper des applications html5 mobile (et mobile / natif)Dans cette session, on va essayer de répondre à des questions. Ces questions, on va se les poser entre nous, et on va y répondre avec vous. Chacun d’entre nous aura évidemment une opinion qui sera biaisée par son expérience…Fixer le cadre mobile: touch / couleurs (pas de wap, pas de non tactile)
- Romu: Comment… ?La frontière devenant de plus en plus floue entre site mobile, application web et application mobile, nous avons fait un regroupement en 2 grosses familles : La 1ere "Site mobile" pour définir un mode hébergée (que ce soit un site ou une web app avec un mode offline ou nonLa 2nd "Application mobile" pour définir un mode embarquée (HTML5 au même titre qu’une application native)
- Romu:Si par exemple je souhaite faire/adapterun site institutionnel ou évènementiel, le but sera de changer le layout selon le device de l’utilisateur-meilleure utilisation de l’espace - priorité d’affichage de l’information - supprimer le surplus : « Responsive Design » traduit par « adaptable » - meilleure lectureDans ce cas pas besoin de faire une application, on partira plus sur un Site MobileSi on veut une expérience spécifique, différente du web, pour une occasion particulière, dans ce cas là il semble plus pertinent d’aller sur une Application MobileJuste avant je parlais de l’existant, une Application Mobile va reposer sur des webservices ! On ne va donc pas faire générer de l’interfacepar le serveur, contrairement au web
- Romu: Donc pour faire un choix entre ces 2 modes, il y a plusieurs critères à prendre en compte : - L’existant - La cible d’utilisateurs - Les plus et les moins (selon les besoins)Check des plus et des moinsVincent:Les systèmes de monétisation et de distribution sont différents :Site Mobile : Monétisation par de la annonce publicitaireApplication Mobile : Monétisation par vente de l'application elle-même, ou par un système d'achat de fonctionnalités supplémentaires depuis l'application In App PurchaseMais on retrouve aussi la monétisation par annonce publicitaire comme pour le site mobileLe truand : pousse le modelé In App Purchase à l'extrème => l'appli est gratuite et toutes ses fonctionnalité sont payantes
- Pierre:C’est la question de l’homme pressé! Avant de choisir un framework, il faut se pencher sur ce qui existe dans HTML5/CSS3Le problème c’est que c’est énorme comme domaine, les spécifications ne sont pas aux même niveaux, certains passent leur temps à ça…Il faut raisonner par fonctionnalités: qu’est-ce qu’on veut faire? Y a-t-il une réponse standardisée? En workingdraft? Et ne pas hésiter à se servir de sites commeCaniuseHtml5pleaseMediaqueri.esEtcExemple de choses qui marchent bien, sont souvent associées à des applications natives, et sont pourtant aujourd’hui bien supportées:Geolocalisation - OKLocal storage - OKOffline APIs (cache): iPad premier à tenter de les implémenter, mais du coup quand la spec change…Mediaqueries - OKAudio/video : la balise est prête depuis longtemps, mais la bataille du codec fait rage… mais quid du DRM, du streaming, etc?Par exemple, sur iOS, la spec n’était pas implémentée exactement: spécifier un poster la faisait planter, ou alors pas capable de descendre dans les différents flux pour trouver le bon du coup il fallait mettre mp4 en premier…
- On est à 7 min
- Pierre: Html5please repose sur caniuse + modernizr + polyfills suggestion.Marche partout…navigator.geolocation.getCurrentPosition(handleSuccess, errorCallback);However, in order to make Android 2.2 work (and, perhaps some updates of Android 2.1), you must add the enableHighAccuracy option:navigator.geolocation.getCurrentPosition(handleSuccess, errorCallback, { enableHighAccuracy: true });
- Romu: C’est la base du design adaptatif! C’est par là qu’on commence! C’est LA bonne réponse aux problématiques de : « Responsive Design » (adaptable)- « FluidLayout » (Agencement fluide) - « GracefulDegradation » (Dégradation élégante) Maintenir une bonne separation entre dev et design, CSS3 Animations/Transitions fait pour ça (de plus accéléré graphiquement).DEMO de Initializr :templateViewport: C'est la surface virtuelle que l’écran va afficher. On pourrait dire que c’est une résolution simulée d’écran. Sur un Desktop, par défaut (sauf si l’utilisateur zoom) 1px écran = 1px css. Sur un mobile pas forcement, par exemple, le viewport par defaut sur un iPhone est de 980px de large. Cela signifie que la page web n’est pas rendue en fonction de la résolution réelle de l’écran, mais en fonction de la « résolution » du viewport. Donc la reglegeneraleetant <metaname="viewport" content="width=device-width, initial-scale=1"> qui permet de revenir au ratio 1px écran = 1px css. HTML5 Boilerplate est un template HTML5 puissant et fiable créé et maintenu par Paul Irish, de Google, et DivyaManian. Boilerplate est constitué d’un ensemble de fichiers HTML, CSS et Javascript, qui servent à bien démarrer un projet HTML5. Il inclut également des outils très utiles tels que Modernizr, jQuery, et un reset de CSS http://html5boilerplate.com/ -> BONInitializrest un générateur de modèles HTML5 créé par Jonathan Verrecchia pour vous aider à démarrer avec un nouveau projet Web basé sur Boilerplate HTML5. Initializr va générer pour vous un modèle propre et personnalisable avec juste ce dont vous avez besoin pour commencer! http://www.initializr.com/ -> BONThe Golden Ratio : http://goldenratiocalculator.com Pour ceux qui veulent se marrer: wtfmobileweb
- On est 15min
- PIERRE: définir la différence entre framework et helperjQuery mobile c'est la brute qui veut s'intaller sur tous les plateformes SenchaTouch c'est le truand qui se fait passer pour le meilleur framework mobile du monde qui ne ne fonctionne correcte que sur webKit !
- Vincent: Identifier les besoins et les devices ciblesLister les frameworks (licence,durée de vie …)Faire un choix sur les critères suivants en fonction des compétences de l'equipe de dev :CoutConnaissance du frameworkSimplicité d'utilisationImpacte (couplage et longueur de code)Romuald:Sur la partie connaissance, donner des patterns plutôt qu’orienter vers des technos ou pire, des frameworksNe pas oublier les fondamentaux – par exemple, ne pas faire du jquery sans faire du javascriptLe bon : il faut encadrer les jeunes par des développeur web plus sénior qui sont en avance de phase sur les nouvelles techno webLa brute du code: pas besoin ! C'est pas compliquéLe truand (commercial): pas besoin, on apprend sur le tas !
- VincentSondage : Qui utilise jquery ?Qui à déjà utilisé jqm ?- Jquery mobile est un framework qui facilite le développement de site mobile aussi bien du côté graphique avec ses CSS3 que de communication optimisé avec sont mode ajax transparent !Faire la présentation de jquerymobile via la doc => http://jquerymobile.comParler du layout de la page et des éléments types listhttp://jquerymobile.com/gbs/
- Vincent en solohttp://jquerymobile.com/themeroller/ => la technique du Truand !Css spécifique à l'appli => la bruteCss spécifique au device => le bonVoyont tout ça dans une DEMO !
- On est 30minVincent en soloAfficher la Calculette de TVA et faire un demo rapide sur pcExpliquer que ce sont de vrai CSS 3 ! Et que le dom est modifié par jqmY a des bouton, des header footer, des listes ect .. Dire d'aller voir le site officel qui est très bien faitExpliquer que tout est en ajax avec un system de pageMontrer la CSS spécifique à l'appPasser l'appli en mode IPHONE , puis Metro, puis HOLO
- Pierre :- PhoneGap apparait aujourd’hui comme la solution la plus crédible pour produire une application mobile qui marcherait partout… voyons pourquoi avec Vincent encore.Pierre: OKOK – à quoi il faut penser si je pense avoir un jour à transformer mon site en application et vice versa?Vincent:L'ui est difficilement réutilisable et pas forcément adapté.Si les données proviennent de WS cela peut être réutilisé
- On voit quand même une tendance des OS à aller vers HTML5Pas sur cette slide, mais quand même en approche sérieuse: Windows 8!*
- ROMU lance la questionPIERRE – revenir sur l’annonce du support de Windows Phone 7VINCENT en a une expérience réelle et va nous le raconter (et nous le démontrer)
- Vincent :Phonegap pour résumer très très simplement c'est un composant browser amélioré, dans lequel on fait passer des messages entre l'application HTML5 hébergée par le composant et les API natives du device.Phonegap définit un système de plugins (tout est plugins), et un grand nombre sont directement inclus dans le Framework de base pour les fonctionnalités tel que l'Accelerometre, la camera et bien d'autre.Pour chaque plugin, On obtient une interface javascript commune à tous les plateformes, et utilisable depuis l'application web. Ainsi qu'un composant natif qui lui gérer le message reçu pour effectuer l'oppérationnécéssaire avec les API native. 1 développement commun en js pour n développements natifC'est la rencontre entre un truand qui fait passer sont site web pour une application, une brute qui fait dialoguer les pages web par javascript des ses appli natives et le bon qui nous dit que tout est plugin/feature !
- Vincent :L'interprétation des pages et des scripts dépend de la plateformes et du moteur du navigateur. Bien que tous les moteurs deviennent de plus en plus rapide et performant, il n'en reste pas moins que ce sont des fichiers interprété ce qui prend plus de temps.De plus le code n'étant compilé, aucune vérification n'est effectuée avant l'éxécution de l'application, cela demande une rigueur et une bonne méthodologie de développement pour les équipes.Bien que les fonctionnalités mobiles soit utilisable par défaut via le Framework phonegap, bon nombre d'api comme l'utilisation des contrôles natifs et le système de Push notification ne sont pas fourni par défaut, heureusement pour nous le système de plugin permet de combler ces manques et une communauté s'est déjà créée et bon nombre de plugin sont fournis gratuitement sur internet.
- On est à 40minVincent :=== DEMO 1 PhoneGap WP7 ====Ou trouver le pack phonegapCopier le fichier de template de phonegapOuvrir le projet de la solutionCopier les fichiers du premier projet avec uniquement les bons themesLancer le debug=== DEMO 2 phonegapBuild ===Expliquer que cela peut être long de faire du multi-plateforme : les ide et framework qui ce remplace, il faut un mac pour ios … que visual studio c'est vraiment le bonheur :pHeureusement y a phonegapbuild !!!Aller sur phonegapbuild et créer un projetExpliquer que l'on configure les icons, le nom de l'app, et les clés pour signer (ios et BB)En 1 min on obtient toutes les packgage pour toutes les plateformes
- L’économie perçue… t*1.5 (ne pas s’attendre à diviser par 3)Bien que l'on développement une fois l'application web mobile, bon nombre de réglage voir bidouillage sont à effectuer en fonction des plateformes.BlackBerry ne support pas les caractères spéciaux par exemple dans les noms de fichiers ! WP7 ne support pas encore le bouton back pour revenir sur la page précédente Si on considère phonegap comme le bon, il est entouré d'un beau paquet de truand qui sont les différentes plateformes.