Et voila, c’est parti pour l’installation et l’utilisation du Framework jQuery Mobile.
En 2 temps 3 mouvements, vous allez développer des sites web remarquables sur les périphériques mobiles !
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Présentation et installation du Framework jQuery Mobile
Bonjour à tous et bienvenu sur Développement Facile.
Ca y est, c’est parti bonne nouvelle, dans les cours précédents, vous avez appris les bonnes pratiques, les bases du développement des applications web pour les périphériques mobiles, smartphones et tablettes. Maintenant, on rentre dans le vif du sujet, je vais vous présenter le framework jQuery Mobile, et ce que vous allez pouvoir faire avec un exemple de code à la fin de cette vidéo.
Présentation
jQuery Mobile à quoi ça sert ? Qu’est-ce que c’est ?
Tout d’abord, c’est un framework JavaScript qui est utilisé pour la création d’interfaces, pour les applications Web, et consultables sur des smartphones ou des tablettes. Il suffit, comme d’habitude, de créer vos interfaces avec du code HTML classique, et jQuery Mobile ajoute du style, des feuilles de styles CSS automatiquement à toutes vos balises et vous avez la possibilité d’utiliser des widgets comme des boutons, des pop-up, des listes, des nouveaux formulaires HTML 5, tout ça, ça va utiliser des graphismes très sympas, pour vos applications Web mobiles c’est très puissant, il y a même une API jQuery Mobile qui permet d’inclure des fonctionnalités beaucoup plus avancées, l’objectif du framework jQuery Mobile c’est de rendre toutes vos applications Web, compatibles quel que soit le navigateur mobile, d’ajouter un design sympa, de pouvoir développer très facilement et rapidement votre application web.
Votre document HTML 5 avec des applications jQuery Mobile, a déjà besoin, de base, du framework JavaScript jQuery, du framework JavaScript jQuery Mobile et de la feuille de style CSS jQuery Mobile. Vous pouvez charger les fichiers soit par CDN avec Google Hosted Library ou les héberger sur votre site. Comme d’habitude, je vous conseille de charger vos fichier par le CDN Google Hosted Librairie, comme ça, si des utilisateurs ont visité avant d’autres sites avec ces mêmes fichiers JavaScript, ils seront déjà en cache dans le navigateur du mobile de votre utilisateur, votre site Internet va s’afficher beaucoup plus rapidement. Je vous ai mis des lignes de codes à utiliser, vous changez de version jQuery en fonction de celle que vous utilisez, pareil pour le CSS, voilà.
Après pour installer jQuery Mobile, il suffit d’aller sur la version officielle, jquerymobile.com pour télécharger la dernière version, le framework jQuery Mobile est assez récent, la documentation disponible est réduite mais de qualité, c’est dommage mais elle est disponible uniquement en anglais, je vous ai mis l’adresse de toutes les démos de ce qui est possible de réaliser avec jQuery Mobile, et justement j’ai fait ces cours en bon vieux français avec des exemples de codes source pour vous aider à utiliser ce framework vraiment très sympas. Vous pouvez même créer un thème à l’image de votre site Web avec thème roller pour jQuery Mobile, si vous avez vu les cours sur jQuery, vous connaissez ces thèmes roller, ça permet, à partir d’un thème existant jQuery Mobile, de créer un thème, d’adapter les couleurs, pour que ce soit ressemblant, en harmonie avec le design de votre site Internet, vous pouvez même créer un thème jQuery Mobile de A à Z, thème roller, très pratique. Vous retrouverez, comme d’habitude, tous les liens sous ce cours vidéo.
Exemple d’application
Je vous montre un exemple de code source, alors l’intégration de jQuery Mobile, le CSS, qui est ici, pensez à l’intégrer, très important, le framework jQuery classique, et l’extension jQuery Mobile. Voilà ce qu’il y a à intégrer, et ensuite, ça je vous expliquerai, les div data-role, comment les utiliser, on définit une page jQuery Mobile, une entête jQuery Mobile, et le contenu jQuery Mobile. Vous pouvez ajouter des images, des formulaires, tout ça on va le voir ensemble dans les prochains cours dédiés à jQuery Mobile. Et le pied de page jQuery Mobile, qu’est-ce que ça donne ?
Ce résultat-là, si on diminue la page, automatiquement elle est redimensionnée sur un périphérique mobile ou l’écran est beaucoup plus petit, vous verrez votre page redimensionnée, tout simplement.
Votre plan d’actions !
Un exemple très simple pour débuter, ça va vous permettre de commencer en douceur des applications pour les périphériques mobiles avec jQuery Mobile.
Si vous avez des questions, posez-les directement sous ce cours vidéo, comme d’habitude, sous ce cours vidéo vous retrouverez le code source complet, et si vous allez plus loin avec le framework jQuery et accéder à plusieurs vidéos professionnelles pas à pas, de débutant au niveau professionnel pour utiliser le framework jQuery, jQuery UI, jQuery Mobile, Dojo, au-dessus de cette vidéo il y a une image, vous pouvez cliquer dessus, ou à la fin de cette vidéo, il y a un lien cliquable qui va s’afficher, donc il suffira juste d’attendre la fin de cette vidéo et vous cliquez sur le lien, une autre page web va s’afficher pour vous présenter tous les cours auxquels vous pouvez accéder, moi je vous dis à très bientôt pour la suite sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple de code jQuery Mobile
Et voici le code source d’une application jQuery Mobile.
Téléchargement du code source Exemple d'application web avec jQuery Mobile
