Comment utiliser les sprites avec CSS3 et créer des boutons href pour le web mobile

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Les liens sous la forme classique HTML ne sont pas adaptés pour une utilisation tactile. La technique consiste à transformer les liens en boutons, ce qui rend le lien plus adapté avec une manipulation tactile. Pour cela, il suffit d’utiliser des feuilles de style CSS.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment utiliser les sprites avec CSS3 et créer des boutons href pour le web mobile

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continue la série de cours dédiée à jQuery Mobile et cette fois vous allez découvrir l’utilisation des liens, c’est toujours des cours qui vont vous apprendre les bases, avant d’entrer dans le vif du sujet avec le Framework jQuery Mobile, vous allez apprendre les bases du développement d’applications sur les mobiles, il y a des contraintes à connaître, il faut adapter vos applications, votre développement justement aux applications mobiles.

Les bonnes pratiques du web mobile

Les liens sous forme HTML, bien évidemment ils ne sont pas adaptés pour une utilisation tactile, ce n’est pas très pratique, les utilisateurs ont un doigt assez gros par rapport à la taille de l’écran, le clic des liens est très difficile. La technique consiste à transformer ces liens en boutons, jQuery Mobile le fait automatiquement, c’est très simple, sinon là, je vais vous montrer avec CSS comment transformer vos liens automatiquement en bouton.
Je vous montre un exemple de code source juste à la fin de ce cours.

Je vous rappelle quelques bonnes pratiques pour le web mobile, c’est très important, c’est la suite vraiment du cours précédent sur les bases, les bonnes pratiques à adapter, pensez à optimiser vos images c’est très important et privilégier toujours des images de tailles réduites, ça ne sert à rien de mettre des images de 1 méga en HD et tout, de toute façon, rappelez-vous votre utilisateur il vient sur votre site mobile avec sa connexion 3G qui n’est pas très rapide, vous me direz, il y a la 4G. La 4G n’est pas disponible encore dans toutes les villes, sauf avec Bouygues Telecom, sinon les autres opérateurs comme Free c’est un peu plus difficile d’accéder au 4G sur vos applications mobiles, prenez en compte, l’utilisateur à la 3G, à la limite, la 3G+, mais oubliez les images de grande taille. Optimisez les images avec des logiciels graphiques, il existe Gimp, vous pouvez redimensionner les images, pour réduire leurs tailles, vous pouvez utiliser Gimp il est gratuit, Photoshop, il y a même des sites en lignes, vous envoyez les images, il vous les optimise, pensez à utiliser toutes ces techniques-là, ces solutions pour réduire le poids de vos images.
Evidemment vous supprimer de votre mobile toutes les images décoratives qui n’ont pas d’éléments informatifs pour vraiment aller à l’essentiel sur vos applications mobiles, pas d’image d’arrière-plan évidemment, le problème de la taille, elles nuisent à la lecture des textes, oubliez les gifs images animées, par contre, pensez à utiliser toutes les nouveautés CSS3. Avec CSS, c’est léger c’est comme du code HTML, ça fait des fichiers très légers à charger par le navigateur mobile, utilisez CSS3 pour présenter vos applications Web, si vous ne connaissez pas CSS3 il y a une trentaine de cours sur Développement Facile, des cours gratuits, professionnels pour vous aider à utiliser le potentiel de CSS3, consultez ces cours. Vous pouvez créer des bords arrondis, des dégradées linéaires, circulaires, des effets d’ombres Shadow, tout ça, utilisez au maximum CSS3 pour le design de vos applications web mobiles.

Les images, faites en sortes qu’elles se redimensionnent automatiquement en fonction de la dimension du navigateur, vous pouvez utiliser la propriété CSS max-width, une autre technique c’est d’utiliser des CSS sprite. Q’est-ce que c’est un CSS sprite ?
Ca regroupe plusieurs images en principe on met des icônes ou alors des animations, un personnage dans différentes positions, ce sont des sprites, avec CSS plutôt que de prendre l’image complète, on charge l’image évidemment mais on va prendre des morceaux d’images qui correspondent à une icône en passant par la propriété CSS3 background position, on va définir la position du background et on prend cette icone-là, cette icone-là, tout simplement. Le CSS sprite c’est une solution très intelligente pour optimiser votre application mobile.

Il existe des générateurs de sprites très pratique que j’ai testé, je vous ai mis les liens, vous les retrouverez sous cette vidéo, vous avez sprite box qui vous permet de récupérer les coordonnées d’une image à partir d’un sprite, je vous montre tout ça dans un exemple de code source à la fin de ce cours.

Exemple d’application

Justement on passe tout de suite au code source, alors là vous remarquez, vous avez un sprite composé de plusieurs images et avec du code, on prend uniquement les morceaux de l’image qui vous intéresse, l’icône mer, l’icône terre, l’icône calculatrice, tout ça, comment on fait ?
On définit la taille d’une icône en CSS, ont lui donne l’URL, icônes, toutes les icônes disponibles l’URL de l’image, qui contient toutes les icones, et après avec background position on récupère chaque icône donc rappelez-vous, dans la diapositive d’avant, je vous ai mis un lien pour récupérer automatiquement les coordonnées de chaque icone. Vous n’avez pas besoin calculer des sites Internet qui vous proposent de faire tout le travail à votre place.
Les positions elles sont calculées par le site Internet il suffit de lui donner cette image, il va vous donner toutes les positions, après comment vous faites ?
Il suffit d’appeler une div avec l’Id et vous mettez votre image en fond d’écran, tout simplement, ça donne ça comme résultat.
Ensuite vous avez les liens que l’on transforme en boutons, dans votre code source, vous avez des liens classiques ici, ce serait des liens s’il n’y avait pas le CSS, et avec la possibilité de CSS3, vous allez transformer tous vos liens automatiquement en boutons. Je vous l’accorde, ça fait beaucoup de CSS pour comprendre tout ce qui est ajout de dégradé, ajout d’effets, sachez qu’avec le Framework jQuery Mobile, tout ça, vous pourrez le supprimer ce sera fait automatiquement vous mettrez vos liens et automatiquement ils seront transformés en boutons. Là vous avez des boutons.

Votre plan d’actions !

Maintenant c’est à vous de jouer, continuez l’optimisation de vos sites Internet pour les mobiles, les Smartphones, les tablettes, si vous avez des questions vous pouvez les poser directement sous cette vidéo, vous retrouverez le code source complet sous ce cours vidéo. Si vous voulez aller plus loin pour apprendre toutes les possibilités de jQuery, jQuery UI, jQuery Mobile, Dojo au-dessus il y a une image, ou à la fin de cette vidéo, il y a un lien qui s’affiche, ça va vous permettre d’accéder à des nouveaux cours très complets pour connaitre et utiliser jQuery, toutes les possibilités de jQuery dans vos applications Web, juste à la fin de cette vidéo, dès que je vais vous dire à bientôt, il y aura un lien, vous pourrez cliquer dessus et rendez-vous pour la suite de cette série, je vous dit à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple des liens pour mobiles

Retrouvez le code source accompagnant le cours.

Downloads

Voici des générateurs de Sprite très pratique :

Spritebox permet de récupérer les coordonnées d’une l’image à partir d’un sprite et il crée directement la classe CSS à incorporer dans votre code.

Montrez-moi vos sites pour le web mobile

Utilisez la zone des commentaires pour poster des liens vers des copies d’écran de vos sites à destination du web mobile.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS