Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.
Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.
Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting.
Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
Le développement d'applications Android fait cependant appel à un certain nombre de pré-requis en programmation:
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.
Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting.
Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
Le développement d'applications Android fait cependant appel à un certain nombre de pré-requis en programmation:
Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !
Comment créer des Chrome Apps ou Packaged Chrome AppsBruno Soufo
Depuis septembre 2013, google à rendu la création d'application d'un nouveau genre. Il s'agit des applications HTML/CSS/Javascript qui bénéficient des même avantages que les applications natives de bureaux (accès au système de fichier ...)
Réaliser une application mobile pour un groupe de presse avec PhoneGapBenjamin LUPU
Retour d'expérience sur la création d'une application mobile pour une groupe de presse professionnelle. Ce retour d'expérience a eu lieu lors du 8ème meetup PhoneGap Paris.
Objectifs
Connaître les principales technologies utilisées pour développer des applications mobiles
Savoir quelle technologie est la mieux adaptée pour un projet
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Loïc Knuchel
Ionic Framework révolutionne la manière de faire des applications mobile hybride avec Cordova. Il est maintenant facile de faire des applications de qualité et le développement hybride devient, grâce à Ionic, une réelle alternative.
Dans ce talk, au Ch'ti JUG, je donne mon point de vue sur le débat hybride vs natif. Pour moi, tout dépends de l'objectif de l'application et bien sûr du budget alloué.
Après une rapide présentation de Ionic et Cordova, je le compare a ses concurrents. Manifestement, aucun ne tient la comparaison...
Je me focalise ensuite sur les outils développés par drifty autours de Ionic et Cordova qui nous permettent de faciliter grandement le développement ! Ils sont, pour moi, une des forces majeures de ce framework :)
Enfin, je termine par corder une application de chat en live et la faire tester aux participants grâce à Ionic View.
Les derniers slides référencent les liens les plus utiles pour démarrer du bon pied avec Ionic et faire des applications très qualitatives :D
L'article avec la vidéo se trouve ici : http://loic.knuchel.org/blog/2015/04/18/chti-jug-le-developpement-mobile-hybride-sort-du-bois/
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Raphaël Kueny
Développer sur mobile n'est pas une sinécure. Rien que pour iOs et Android il faut connaitre et manier 2 langages ...
Et si je vous montrais qu'en connaissant seulement le Javascript et à l'aide de Titanium Appcelerator vous pouvez développer pour iOs et Android à partir du même code ! (et bientôt WindowsPhone).
De la présentation, du code et mon avis sur le sujet.
Outils Indispensables pour vs navigateurs webYannick Pavard
Présentation donnée lors du WebEducation du 22 janvier 2009 aux webmestres du gouvernement du Québec.
Le thème était les extensions pour Firefox (colorzilla, firebug, html validator, ...) ainsi qu'un aperçu des fonctionnalités de Google Chrome pour les développeurs.
WordCamp Lyon 2015 - WordPress, Git et l'intégration continueStéphane HULARD
Retour d'expérience sur les pratiques que j'utilise au quotidien pour l'industrialisation de mes développements WordPress...
https://lyon.wordcamp.org/2015/session/wordpress-git-et-lintegration-continue/
Actionscript. Language de programmation utilisé pour le développement de jeux, d'applications web, de lecteurs vidéo et de sites web.
Il est maintenant possible de l'utiliser pour le développement pour les mobiles et les tablettes. Que ça soit pour la plate-forme Android, iOS ou pour la tablette Blackberry Playbook, un projet en actionscript peut être utilisé pour tous.
Une code pour les développer tous.
Cette présentation montrera la situation réel de l'actionscript dans l'éco-système du développement mobile actuel.
Ce qui sera couvert:
Quels sont les avantages et les désavantages de cette technologie?
Un exemple réel svp!
Mon équipe web peut-il développer mon application? Oui, mais... voici mes conseils.
Conception d’une application pour Windows 8 avec Blend 5Microsoft
Blend est l'outil indispensable lorsque l'on souhaite créer des interfaces utilisateurs riches. Avec l'arrivée de Windows 8, Blend permet de concevoir des applications METRO au format HTML 5 et XAML de grande qualité. Dans cette session, nous aborderons les nouvelles fonctionnalités étonnantes de Blend 5 dédiée aux applications Modern UI. Nous verrons également comment ce dernier maximise votre productivité et le développement d'applications Modern UI au format HTML et XAML. La méthodologie et les fonctionnalités seront décrites en mode pas à pas, à partir d’un cas concret d’intégration.
Développement d'applications mobiles hybrides avec IONIC 2 et Angular 2. Depuis l'installation jusqu'à l'utilisation de plugins natifs tels que stockage de données, géolocalisation, liaison serveur API Rest...
La technologie Kinect n’est pas nouvelle, elle avait beaucoup fait parler d’elle en 2010/2011. Microsoft ayant sorti sa nouvelle version dédiée à Windows en juillet 2014, où en sommes-nous aujourd’hui avec cette technologie ? Que peut-on faire et ne pas faire, notamment en choisissant la technologie HTML5 ? Fort d'une expérience réussie et après avoir développé une application disponible lors du salon de la lingerie via la Kinect, mais aussi sur le Web via la souris nous verrons lors de cette présentation tout les tenant et aboutissant pour réussir un projet Kinect HTML5.
Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !
Comment créer des Chrome Apps ou Packaged Chrome AppsBruno Soufo
Depuis septembre 2013, google à rendu la création d'application d'un nouveau genre. Il s'agit des applications HTML/CSS/Javascript qui bénéficient des même avantages que les applications natives de bureaux (accès au système de fichier ...)
Réaliser une application mobile pour un groupe de presse avec PhoneGapBenjamin LUPU
Retour d'expérience sur la création d'une application mobile pour une groupe de presse professionnelle. Ce retour d'expérience a eu lieu lors du 8ème meetup PhoneGap Paris.
Objectifs
Connaître les principales technologies utilisées pour développer des applications mobiles
Savoir quelle technologie est la mieux adaptée pour un projet
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Loïc Knuchel
Ionic Framework révolutionne la manière de faire des applications mobile hybride avec Cordova. Il est maintenant facile de faire des applications de qualité et le développement hybride devient, grâce à Ionic, une réelle alternative.
Dans ce talk, au Ch'ti JUG, je donne mon point de vue sur le débat hybride vs natif. Pour moi, tout dépends de l'objectif de l'application et bien sûr du budget alloué.
Après une rapide présentation de Ionic et Cordova, je le compare a ses concurrents. Manifestement, aucun ne tient la comparaison...
Je me focalise ensuite sur les outils développés par drifty autours de Ionic et Cordova qui nous permettent de faciliter grandement le développement ! Ils sont, pour moi, une des forces majeures de ce framework :)
Enfin, je termine par corder une application de chat en live et la faire tester aux participants grâce à Ionic View.
Les derniers slides référencent les liens les plus utiles pour démarrer du bon pied avec Ionic et faire des applications très qualitatives :D
L'article avec la vidéo se trouve ici : http://loic.knuchel.org/blog/2015/04/18/chti-jug-le-developpement-mobile-hybride-sort-du-bois/
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Raphaël Kueny
Développer sur mobile n'est pas une sinécure. Rien que pour iOs et Android il faut connaitre et manier 2 langages ...
Et si je vous montrais qu'en connaissant seulement le Javascript et à l'aide de Titanium Appcelerator vous pouvez développer pour iOs et Android à partir du même code ! (et bientôt WindowsPhone).
De la présentation, du code et mon avis sur le sujet.
Outils Indispensables pour vs navigateurs webYannick Pavard
Présentation donnée lors du WebEducation du 22 janvier 2009 aux webmestres du gouvernement du Québec.
Le thème était les extensions pour Firefox (colorzilla, firebug, html validator, ...) ainsi qu'un aperçu des fonctionnalités de Google Chrome pour les développeurs.
WordCamp Lyon 2015 - WordPress, Git et l'intégration continueStéphane HULARD
Retour d'expérience sur les pratiques que j'utilise au quotidien pour l'industrialisation de mes développements WordPress...
https://lyon.wordcamp.org/2015/session/wordpress-git-et-lintegration-continue/
Actionscript. Language de programmation utilisé pour le développement de jeux, d'applications web, de lecteurs vidéo et de sites web.
Il est maintenant possible de l'utiliser pour le développement pour les mobiles et les tablettes. Que ça soit pour la plate-forme Android, iOS ou pour la tablette Blackberry Playbook, un projet en actionscript peut être utilisé pour tous.
Une code pour les développer tous.
Cette présentation montrera la situation réel de l'actionscript dans l'éco-système du développement mobile actuel.
Ce qui sera couvert:
Quels sont les avantages et les désavantages de cette technologie?
Un exemple réel svp!
Mon équipe web peut-il développer mon application? Oui, mais... voici mes conseils.
Conception d’une application pour Windows 8 avec Blend 5Microsoft
Blend est l'outil indispensable lorsque l'on souhaite créer des interfaces utilisateurs riches. Avec l'arrivée de Windows 8, Blend permet de concevoir des applications METRO au format HTML 5 et XAML de grande qualité. Dans cette session, nous aborderons les nouvelles fonctionnalités étonnantes de Blend 5 dédiée aux applications Modern UI. Nous verrons également comment ce dernier maximise votre productivité et le développement d'applications Modern UI au format HTML et XAML. La méthodologie et les fonctionnalités seront décrites en mode pas à pas, à partir d’un cas concret d’intégration.
Développement d'applications mobiles hybrides avec IONIC 2 et Angular 2. Depuis l'installation jusqu'à l'utilisation de plugins natifs tels que stockage de données, géolocalisation, liaison serveur API Rest...
La technologie Kinect n’est pas nouvelle, elle avait beaucoup fait parler d’elle en 2010/2011. Microsoft ayant sorti sa nouvelle version dédiée à Windows en juillet 2014, où en sommes-nous aujourd’hui avec cette technologie ? Que peut-on faire et ne pas faire, notamment en choisissant la technologie HTML5 ? Fort d'une expérience réussie et après avoir développé une application disponible lors du salon de la lingerie via la Kinect, mais aussi sur le Web via la souris nous verrons lors de cette présentation tout les tenant et aboutissant pour réussir un projet Kinect HTML5.
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?
Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.
Angular n'est pas un simple framework mvc, il va plus loin et change fondamentalement notre manière de concevoir des applications web.
De l'avis de ses auteurs Angular est la plateforme qu'aurait été le couple html et JavaScript si ils avaient été créés aujourd'hui. SignalR quand a lui change aussi radicalement la manière de voir l'interaction avec les utilisateurs grace a sa communication bi-directionnelle simplifiée.
Il est intéressant de réunir les deux pour profiter du meilleur des deux mondes, de voir comment des bindings et des évènements se propagent de bout en bout et ainsi avoir un aperçu des applications de demain.
Node.js et les nouvelles technologies javascriptKhalid Jebbari
Présentation sur Node.js et les nouvelles technologies javascript, qui a eu lieu dans les locaux de Smile, à Levallois (92).
Retour d'exploration par un développeur Drupal (moi) sur ces technologies, et comparaison avec Drupal.
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
L'histoire d'html5 pour les développeurs windows phone 8davrous
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
Cette conférence présente les problématiques du JavaScript pour la performance SEO, des propositions de solutions et les outils utilisés par les professionnels du SEO.
Elle a été présentée par Aymeric Bouillat et Adrien Russo lors du SMX Paris 2023.
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéJulien Dubois
Présentation donnée lors de Devoxx France 2012, présentant comment réaliser une application moderne avec les technologies HTML5, Spring, NoSQL (Cassandra) et mobiles.
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileIppon
Présentation donnée par Julien Dubois lors de Devoxx France 2012, présentant comment réaliser une application moderne avec les technologies HTML5, Spring, NoSQL (Cassandra) et mobiles.
Core Web Vitals : Comprendre, Mesurer, OptimiseriProspect France
En juin 2021, Google va intégrer les Core Web Vitals dans son algorithme pour classer les résultats dans son moteur de recherche.
Il s’agit d’un ensemble de 3 indicateurs décrivant 3 aspects de l’expérience utilisateur réelle sur une page web : Vitesse, Interactivité et Stabilité visuelle
Découvrez comment sont mesurés ces 3 indicateurs et les optimiser dans une présentation d’Alexis Rylko pour SEMRush.
Se rendre visible sur le web mobile avec le seoMarref Imen
Les référenceurs se sont tournés vers le SEO mobile depuis l'apparition des smartphones et le développement des applications web sur mobile.
Pour obtenir un référencement naturel et efficace sur mobile, il convient de respecter certaines règles que j'essaye de recenser dans cette présentation.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Similaire à jQuery mobile / PhoneGap : contenus dynamiques client-side (20)
4. Présentation
• Problématique abordée :
• Comment générer du contenu HTML dynamiquement
côté client (sans PHP !) ?
• Quelles sont les techniques disponibles, les bonnes
pratiques, les pièges à éviter ?
5. Présentation de jQuery
• jQuery : une librairie JS = du code JS prêt à l’emploi qui
simplifie un certain nombre d’opérations complexes.
• Utilisé massivement par les développeurs web = devenu
un « standard » de facto.
AVANTAGES :
• Facilité d’usage : syntaxe simplifiée et synthétique
• Compatibilité et « fallback » entre tous les navigateurs
• Grosse communauté : plugins et mise à jour
• Projets annexes : jQuery UI, jQueryMobile
6. jQuery mobile
• jQuery mobile : framework qui s’appuie sur JQ et qui
permet de créer facilement des interfaces pour les sites
ou web apps mobiles. JQM fournit des composants, un
layout, une architecture et des outils pour les designers
et les codeurs.
• Typiquement, les pages peuvent être crées en pur
HTML, JQM appliquera automatiquement les styles
adéquats et les fonctionnalités nécessaires à l’affichage
de l’interface et des pages.
• Mais on peut évidemment utiliser JS/JQ pour ajouter des
effets et fonctionnalités avancées !
7. Plate-formessupportées
• JQM supporte une multitude de plate-formes mobiles.
De plus il gère automatiquement les différences de
fonctionnalités entre navigateurs et plate-forme.
• Notion de « fallback » : sur des navigateurs anciens, le
contenu s’affichera toujours, avec moins de
fonctionnalités que sur des navigateurs « modernes ».
• Notion d’amélioration progressive (« progressive
enhancement ») : JQM commence par générer une
version basique de la page, puis ajoute des effets et des
fonctionnalités en fonction du navigateur.
8. Plate-formes supportées
• Apple iOS (iPhone, iPodtouch and iPad)
• Android
• Symbian, S60 et UIQ (utilisé sur un nb TRES important de
Smartphones)
• Windows Phone 7 et Windows Mobile
• BlackBerry OS
• Palm WebOS
• Amazon Kindleet Fire
• Les navigateurs de bureau comme Chrome, FF, Safari, IE et
Opera
Pour une liste complète, voir http://jquerymobile.com/gbs/
9. Qu’est-ce qu’une web app ?
• Une web appest une app qui s’exécute côté serveur et dans
le navigateur. L’app pourra s’exécuter sur n’importe quel
poste muni d’un navigateur.
• Exemples de web apps : Gmail, Google Docs,ThemeRoller...
AVANTAGES :
• Ecrire une fois le code, l’exécuter partout : les web apps sont
cross-platform.
• Faciles à créer : les langages utilisés
(HTML, JS, CSS, PHP...) sont faciles à maîtriser et très
répandus.
• Faciles à maintenir : le code est centralisé sur le
serveur, donc MAJ simplifiées et transparentes.
10. Qu’est-ce qu’une web app ?
INCONVÉNIENTS :
• Capacités limitées comparé à du natif
• Exécution plus lente
• Besoin d’une connexion internet pour fonctionner (à
nuancer)
NOTE :
• même si JQM a été plutôt pensé pour faire des web
apps, il peut aussi être utilisé pour faire des sites
mobiles.
11. Web app VS native app
• Avec JQM, on peut aussi créer des app natives, qui
s’exécuteront en dehors du navigateur et pourront être
distribuées via l’App Store ou l’AndroidMarket.
• Il faudra alors utiliser des outils comme PhoneGap ou
Titanium pour encapsuler nos apps écrites en
HTML/JS/CSS dans une application mobile native
(Webview ou UIWebview).
• Cette approche permet également d’accéder aux
fonctionnalités natives du device
(accéléromètre, caméra...).
13. Page dans JQM
• Page JQM = "écran".
• Page JQM ≠ page HTML
• Page composée de plusieurs sections : header, content
et footer.
• Attribut data-role :
<div data-role="page" id="home">
<div data-role="header">…</div>
<div data-role="content">…</div>
<div data-role="footer">…</div> index_01.html
</div>
14. Architecture multipage VS pages
séparées
• Multipage :
un document HTML
unique contient toutes les
pages JQM.
15. Architecture multipage VS pages
séparées
• Pages séparées : chaque page JQM est placée dans
un document HTML propre.
Les pages sont chargées automatiquement en AJAX par
JQM.
16. Quelle architecture choisir ?
• Multipage :
– Un seul doc HTML = plus facile à maintenir (inclusion JS et
CSS).
– Idéal pour les contenus très dynamiques : squelette vide que l'on
va remplir dynamiquement.
– Complexe pour les contenus statiques et si BEAUCOUP de
pages.
• Pages séparées :
– Plus difficile à maintenir.
– Recommandé pour les contenus statiques.
19. Génération de pages : serveur ou client ?
• On peut utiliser PHP pour générer les pages côté serveur
(index.php, products.php…).
• POUR :
– Adapté pour app / site dans le navigateur.
– Moins gourmand pour le client.
– Contenu adapté en fonction de la plate-forme.
20. Génération de pages : serveur ou client ?
• CONTRE :
– Native apps : pas de serveur apache en local = la page qui lance
l'appli doit être en HTML.
– Native apps : problèmes de crossdomain.
– Offline ? AÏE !
– Bande passante…
– Certains contenus peuvent être en XML (flux RSS) ou JSON…
21. Génération de pages : serveur ou client ?
• Rendu client-side : pour XML/JSON.
• POUR :
– Adapté pour native apps.
– Plus léger en bande passante (données brutes).
– Mise en cache plus simple.
• CONTRE :
– Plus gourmand pour le client.
22. Question de timing :
A quel moment générer ?
• Les pages JQM ont un "cycle de vie" : depuis leur
initialisation jusqu'à leur affichage.
• Nombreux événements liés aux pages :
"pageinit", "pagebeforecreate", "pagecreate", "pagebefor
eshow"…
• Lequel choisir pour injecter notre contenu ?
• Réponse : "pageinit" ! Equivalent du ready() de JQ
23. JSON est ton ami
• JSON : JavaScript Object Notation. Format de
donnéestextuel, générique, dérivé de la notation des
objetsECMAScript.
• Deux types d'élémentsstructurels :
– Ensemble de paires nom/valeur (Object)
– Listesordonnées de valeurs (Array)
musees.json
• Facile àutiliser, surtout avec JS et JQ !
24. JSON est ton ami
• Chargement JSON avec jQuery :
main.js
• Simple, non ?
25. Génération du HTML
• Une fois les data chargées, on génère le HTML attendu
sous forme d'une chaine de caractère :
• Ho wait ? On va devoir concaténer comme ça tout le
temps ?
26. Templating avec Mustache.js
• Mustache.js = librairie de templating qui permet de
simplifier la génération de contenus HTML dynamiques
client-side. Voir http://bit.ly/tPdsgo
• On utilise la double accolade {{propriété}} pour insérer
nos données dans un template :
27. Injection du HTML dans la page
• Partie la plus facile : méthodes append(),appendTo() et
html() de jQuery.
Exemple :
• Problème : le HTML apparaît "brut", il n'a pas été
"amélioré" par JQM…
28. Stylisation du contenu injecté
• Si l’on crée/modifie dynamiquement le contenu
d’éléments de type listviews ou form, JQM ne stylise pas
automatiquement les modifications apportées.
• Pour appliquer une stylisation à un élément modifié, il
faudra faire un « refresh » sur l’élement modifié :
– Listview : element.listview('refresh')
– Select menu (non-actif) : element.selectmenu('refresh')
– Checkbox ou radio button : element.checkboxradio('refresh')
– Slider et flip toggle : element.slider('refresh')
– Button : element.button('refresh')
29. Méthode ‘refresh’
Uncaught cannot call methods on listview prior
to initialization; attempted to call method
'refresh'
• Erreurlevéesi on appelle la méthode refresh() AVANT la
diffusion de l’événement ‘pageinit’ (page jamaisappelée).
• SOLUTION :
– Attendre le ‘pageinit’.
– Appeler la méthode ‘page()’ sur l’élément page qui va recevoir le
contenu > force l’initialisation.
30. Forcer le changement de page
• Interception du click sur un bouton pour gérer soi-même
le changement de page.
• Méthode $.mobile.changePage(page, options);
31. Modifier une page existante
• ‘pageinit’ n’est diffusé qu’une fois à l’appel de la page :
pas utilisable pour des changements récurrents.
• ‘pagebeforeshow’ : diffusé avant chaque affichage de la
page = pratique pour modifier une page en coulisse, puis
l’afficher.