Actifs Web et animation · Guide pratique
Préparer un sprite d’icônes avec ses fichiers individuels
Attribuez un identifiant unique à chaque icône originale et reliez-le à sa source.
Préparer les pièces et leurs relations
Définissez avec l’intégrateur le mode de sprite prévu et les exports individuels utiles. Gardez une table des symboles et des dimensions de dessin, sans supposer qu’un sprite peut être intégré de la même façon dans tous les environnements. Les noms doivent rester compréhensibles hors du fichier de création.
Effectuer le contrôle ciblé
Contrôlez les identifiants dupliqués, les références et le rendu de chaque symbole dans le mode d’intégration choisi. Comparez le sprite aux fichiers individuels pour repérer un ancien dessin resté dans une collection. Faites inspecter et assainir les SVG avant leur usage. Vérifiez les masques et ressources partagés : une dépendance mal renommée peut affecter plusieurs icônes à la fois.
Identifier la sortie réellement destinée à la diffusion
Reliez la création de référence à chaque sortie utile et notez sa destination. Gardez les essais d’optimisation dans un espace de travail distinct du paquet retenu. Avant la remise, une autre personne doit pouvoir retrouver la bonne sortie et comprendre son usage sans deviner le sens de noms comme « final2 ». Signalez les adaptations de contenu, de cadrage ou de comportement qui accompagnent le changement de format.
La génération du sprite appartient ici au processus de création et d’intégration, sans fonction native DesignLockr annoncée. Préservez la collection source, le sprite retenu et la table de correspondance comme pièces distinctes.
| Pièce ou zone fictive | Rôle dans le dossier | Contrôle à effectuer |
|---|---|---|
| icon-recherche | Symbole fictif | Export individuel associé |
| icon-panier | Symbole fictif | Identifiant unique |
| sprite-r05.svg | Collection fictive | Tous les symboles contrôlés |
EXEMPLE FICTIF
Cas fictif : icon-recherche
L’atelier fictif Picta remplace une icône panier dans sa source mais oublie de reconstruire le sprite livré. Il compare les trois références, régénère le sprite r06 et refait le contrôle de tous les symboles dans l’intégration prévue.
- Créer une fiche de contrôle pour icon-recherche en conservant l’état de référence.
- Examiner icon-panier selon le contrôle indiqué, puis noter l’écart et la prochaine action.
- Rattacher sprite-r05.svg à l’inventaire retenu et demander le retour précis du destinataire.
Avant de poursuivre
- Identifier icon-recherche et sa version sans écraser la référence précédente.
- Contrôler icon-panier selon la consigne notée dans le registre.
- Relier sprite-r05.svg à l’usage et au destinataire prévus.
- Marquer les points ouverts et la personne chargée de les résoudre.
- Conserver le résultat observé et les limites du contrôle effectué.
Registre fictif : un sprite d’icônes et ses fichiers individuels
Les questions utiles
Le sprite remplace-t-il les sources individuelles ?
Conservez les sources utiles à la reprise et les exports convenus. La table permet de retrouver chaque symbole sans déduire sa provenance du seul sprite.
Sources et repères
OWASP — File Upload Cheat Sheet