Et voici une nouvelle série de formations sur le Framework jQuery Mobile.
Vous allez apprendre toutes les spécificités du développement sur les smartphones et tablettes.
Et surtout comment jQuery Mobile peut énormément vous simplifier la vie dans la création de vos applications mobiles.
Pour connaitre les bonnes pratiques du web mobile, les outils à utiliser… tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment développer pour le web mobile smartphones iPhone et tablettes iPad
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours, on continue la série dédiée à jQuery, dans les cours précédents, vous avez appris à utiliser le Framework JavaScript jQuery pour faire des communications Ajax, ajouter des conditions, simplifier la création de vos applications web. Vous avez aussi découvert le Framework jQuery UI, ça vous permet d’améliorer le design graphique de vos applications Web très facilement, dans ce nouveau cours, dans cette nouvelle série de cours, vous allez apprendre à utiliser le Framework jQuery Mobile, c’est une extension Mobile, il est dédié aux smartphones et aux tablettes, ça va vous permettre de créer des sites très facilement pour les smartphones et les tablettes. Il utilise jQuery, vous avez accès à toutes les fonctionnalités de jQuery et jQuery Mobile intègre jQuery UI pour faire des présentations graphiques très sympas sur les mobiles.
Présentation
C’est parti ! Avant de rentrer dans le vif du sujet de jQuery Mobile, je vais vous présenter un petit peu, rapidement le Web mobile et les différentes possibilités et comment vous adaptez aux contraintes du développement sur les smartphones et les tablettes. Aujourd’hui avec les forfaits illimités 3G et l’explosion du Web mobile c’est assez hallucinant, de plus en plus de personnes utilisent leur tablette, ou leur smartphone plutôt que leur ordinateur de bureau pour se connecter à Internet, pour regarder les sites Internet, pour lire leurs mails, etc.
Il faut absolument, quand vous programmez une application pour le Web mobile, tenir compte de plusieurs éléments, déjà il y a plusieurs navigateurs mobiles, rien qu’entre IPhone iOS, Safari et Android avec Android navigateur ou FireFox, ou Google Chrome, il y a des différences de traitements d’analyse des pages Web, la taille réduite de la fenêtre d’affichage aussi, vous devez en tenir compte, du fait que c’est un écran tactile, le clavier, il n’y a pas de souris, il faut en tenir compte dans la création, l’ergonomie des interfaces de vos applications Web. Il faut optimiser les interactions utilisateur pour le tactile, et utiliser des images très peu, ou des images très légères, parce qu’on est en connexion 3G et ce n’est pas une connexion ADSL, c’est moins rapide, il faut que le poids de la page soit plus léger.
Et évidemment il faut un contenu ciblé et efficace, l’utilisateur qui navigue sur votre site Internet, sur un petit écran, que ce soit une tablette, ou un Smartphone, il ne va pas chercher pendant trois heures les informations, il faut vraiment que ce soit concis, précis et efficace.
Je vais vous donner, à travers cette série de cours, toutes les spécificités pour pouvoir de votre côté, prendre en compte les contraintes du développement sur mobile.
Test des applications mobiles
Comment on va faire les tests ?
Là on va utiliser des navigateurs bureau, donc moi je vais vous présenter les différents tests avec Firefox, après vous avez la possibilité d’installer les SDK spécifiques pour Androïd, iOS, BlackBerry et Windows Phone, il existe également des émulateurs en ligne, je vous ai mis un lien qui vous permet de tester l’affichage de votre site Web sur un terminal mobile, pour voir ce que ça donne, la plupart des paramètres sont respectés que ce soit les dimensions, la résolution, comportement, les fonctionnalités, vous pouvez utiliser les émulateurs mobiles.
Je vous ai mis plusieurs liens, par exemple, un simulateur d’IPhone, mobile proxy, pour tester sur plusieurs périphériques, iPad Peek pour tester sur un émulateur d’iPad vos applications Web, vous retrouverez, de toute façon, tous les liens sous ce cours vidéo, comme d’habitude, ce sera plus simple pour vous.
Vous pouvez aussi choisir la solution d’installer un logiciel émulateur sur votre ordinateur, il existe opéra mobile émulateur, vous pouvez également installer la version mobile de Firefox qui s’appelle Fennec sur votre ordinateur de bureau pour Windows, Mac Os et Linux, elle existe, c’est un moyen très simple de tester vos applications mobiles.
Il y a également le logiciel iPhoney, c’est un simulateur qui permet de tester l’apparence d’une application Web sur un iPhone, et Air iPad, c’est une application développée avec Adobe air, qui simule l’interface d’un iPad.
Vous avez la possibilité d’utiliser les validateurs Web mobiles, le fameux validateur W3C, vous devez connaître l’URL par cœur, vous l’utilisez sûrement pour valider vos sites Web classiques, donc là vous pourrez passer vos sites mobiles au crible, et vous aurez toutes les remarques pertinentes, instructives, pour améliorer l’accessibilité de vos sites web mobile sur les tablettes, et les Smartphones. Google propose également un outil GoMo qui est un outil de validation très proche de celui du W3C, je l’ai testé, très intéressant aussi, lui aussi passe en revue de nombreux éléments, dont le temps de chargement de la page, et vous donne des solutions pour améliorer votre application Web pour les mobiles.
Les bonnes pratiques du Web mobile
Il y a plusieurs bonnes pratiques à adopter pour Web mobile, il existe plusieurs solutions après ce sera à vous de choisir celle que vous souhaitez privilégier, des entreprises utilisent des sous domaines mobiles.nom de domaine.com ou alors nom de domaine .Mobile, vous pouvez utiliser également un sous dossier/mobile/M, ou alors vous pouvez détecter avec un script automatiquement l’appareil, le périphérique de votre visiteur, et le rediriger sur le bon site Internet, sur celui qui est adapté pour une visualisation optimale pour lui.
Vous avez plusieurs solutions, soit en jouant sur le nom de domaine, soit avec le script de redirection, le script de redirection est très intéressant, comme ça, je vous ai mis l’URL pour l’intégrer le script de redirection, ça permet aux utilisateurs de retenir qu’une seule URL et non pas nom de domaine.Mobile, ou nom de domaine/mobile/M ou mobile.domaine.com, c’est un peu compliqué pour les utilisateurs donc avec script de détection, il retiennent une URL, et à chaque fois ils sont contents de visiter votre site, vous pouvez combiner les deux c’est ce que je vous conseille de combiner les deux, vous avez votre URL classique, par exemple, programmation-facile.com et avec un script de redirection, vous pouvez rediriger automatiquement sur le sous domaine, l’utilisateur retient toujours l’URL programmation–facile.com, et le script redirige sur un sous domaine.Mobile, mobile. Etc.
Les Media Queries
Il existe les Media Queries qui vont vous être très utiles, justement pour adapter l’affichage de votre site web en fonction de la taille de l’écran de votre visiteur, la propriété Media vous permet d’adapter la présentation selon le périphérique, l’écran de sortie. Tous les navigateurs mobiles reconnaissent les Medias Queries et c’est pareil pour les navigateurs de bureau. Les Medias Queries 3 vont beaucoup plus loin avec des tests conditionnels et d’autres critères liés aux périphériques, je vais vous montrer un exemple de code source, très visuel qui met cela en pratique. Les tests conditionnels sur les Medias Queries vous pouvez faire des tests de type « et », type de média « et » un critère, ça adapte les propriétés CSS en fonction du type de médias et un critère, ou alors only ça adapte les propriétés CSS uniquement en fonction du type du média et du critère, ou alors not critère ça adapte les propriétés CSS en fonction du type du média, mais en excluant le critère définit.
Voici différents exemples, ça affichera seulement sur les écrans avec une largeur maximum de 320 pixels en mode portrait, les smartphones en mode paysage c’est une largeur minimum de 321 pixels et les Smartphones en mode portrait et paysage, avec minimum de largeur 320 pixels, maximum de largeur 480 pixels, et l’iPad en mode portrait, minimum de largeur 768 pixels, maximum de largeur 1024 pixels, évidemment un d’orientation portrait, les conditions d’un texte, toujours les conditions.
Je vous en ai mis d’autres comme ça en fonction du périphérique que vous ciblez, vous aurez juste à reprendre, à réutiliser ces exemples, je vous ai expliqué comment ça fonctionne, media only screen le type d’écran et la condition toujours, la condition, iPhone4, iPhone5 vous avez toutes les valeurs que vous pouvez utiliser en fonction du type de périphérique de votre internaute.
Exemple d’application
On passe tout de suite à un exemple de code source, vous avez un exemple de code source ici, ça reste relativement simple, les Medias Queries avec la largeur d’écran minimum de 700 pixels, l’arrière-plan passera en vert, avec une largeur comprise entre 400 et 500 pixels, l’arrière-plan passera en bleu et avec une largeur jusqu’à 400 pixels, l’arrière-plan sera en jaune.
Et après vous avez votre contenu. Qu’est-ce qu’il se passe ?
En vert, on diminue la taille de l’écran, en bleu on diminue encore la taille de l’écran il passe en jaune, on augmente la taille de l’écran en bleu en fonction du type de périphérique, il passe en blanc, on augmente la taille de l’écran et on augmente encore la taille de l’écran il passe en vert.
Vous avez remarqué en fonction du type de périphérique, il est possible d’adapter justement, très facilement l’écran, votre site Internet ici. Là on change tout bêtement la couleur d’arrière-plan, c’est pour vous montrer un exemple de fonctionnement tout simple.
Votre plan d’actions !
Maintenant c’est à vous de jouer, vous pouvez déjà commencer à optimiser l’apparence de vos sites Internet pour les périphériques mobiles. Si vous avez des questions, posez-les moi sous ce cours vidéo, vous retrouverez le code source à télécharger sous cette vidéo, comme d’habitude si vous souhaitez aller plus loin, il y a une URL, une image au-dessus ou en dessous de ce cours, ou à la fin de ce cours, qui vous propose d’aller plus loin avec une formation professionnelle, des cours professionnels pour vous aider avec tous les Framework jQuery, jQuery UI, jQuery Mobile, Dojo, avec un exemple personnalisé, donc je vous invite à cliquer sur l’image juste au-dessus, à attendre la fin de la vidéo, à cliquer sur le lien à la fin de la vidéo, et moi je vous dit à tout de suite, à très bientôt pour la suite de cette série.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple de code source Web Mobile
Et voici le code source de mise en pratique de la formation.
Téléchargement du code source Exemple d'application pour le web mobile
