Introduction et Avantages des Sprites
Objectifs
Les objectifs de cette vidéo sont de vous apprendre à créer des sprites CSS, à les optimiser pour le web et à les utiliser pour améliorer les temps de chargement de vos pages.
Résumé
Apprenez à réaliser des sprites CSS pour optimiser l'affichage des images sur vos pages web, réduisant ainsi le temps de chargement.
Description
Dans cette leçon, nous abordons la création et l'utilisation de sprites CSS. Un sprite CSS est une image composite qui regroupe plusieurs visuels en une seule image. Cela permet de réduire le nombre de requêtes HTTP nécessaires pour charger des images sur une page web, améliorant ainsi les performances du site. Nous verrons comment utiliser Illustrator pour créer une grille de répartition des images, les placer correctement, et enregistrer cette image composite au format PNG avec transparence.
Utiliser des sprites permet également d'éviter les effets de latence et les décalages dans l'affichage des images. En utilisant les techniques de positionnement CSS, vous pourrez afficher rapidement n'importe laquelle des images présentes dans votre sprite. De plus, une fois l'image chargée la première fois, elle n'a pas besoin d'être rechargée lors des visites suivantes, car elle reste en mémoire.
Nous finirons par une démonstration pratique de la réalisation d'un sprite, en prenant comme exemple des icônes de menu extraites de leafish.com, et en les ordonnant dans une grille de 50 pixels conçue avec Illustrator. À la fin de ce tutoriel, vous serez capables de créer et employer des sprites de manière intensive pour optimiser les temps d'affichage de vos éléments graphiques.
Questions fréquentes
Programme détaillé
Module 1 - Introduction
Module 2 - Généralités sur le marché des mobiles
Module 3 - Rappel HTML
Module 4 - Rappel CSS
Module 5 - Notions de HTML5 et CSS3
Module 6 - Concevoir une webApp
Module 7 - Les simulateurs
Module 8 - Construire sa première WebApp
Module 9 - Vérifier et compresser
Module 10 - Construire une webApp avec JQuery Mobile
Module 11 - Annexe 1 | Notions de bande passante
Module 12 - Annexe 2 | Les usages
Module 13 - Annexe 3 | Les librairies disponibles
Module 14 - Conclusion
