Bonjour,
En ces temps d’applications web, on se retrouve à vouloir importer sur le web les technologies utilisées dans les applications desktop. Les icônes font parties de ces problématiques.
Je m’y suis intéressé en partant d’un constat : dans notre application (FusionDirectory), plusieurs problèmes émanent à propos des icônes : différentes icônes pour la même chose (un coup une information est symbolisée par 
, un coup par 
(OK, pour la suite j’évite les images inline et je vais voter pour suivi/image-en-ligne au passage)), même icône pour différentes choses (un coup le drapeau rouge représente une erreur, un coup simplement une option désactivée ou la valeur false d’un booléen), ou tout simplement des icônes incohérente visuellement (l’icône représentant un serveur vient d’un thème et celle représentant un client d’un autre par exemple).
Le premier reflexe pour faire face à ces problèmes, c’est de (ré?)organiser le dossier d’image : si les images sont classées correctement, on aura moins ce genre d’erreur. Du coup naturellement, je me tourne vers les thèmes d’icônes existant voir si je peux m’en inspirer. Puis me vient l’idée, quitte à m’en inspirer, pourquoi ne pas directement respecter la norme?
C’est ainsi qu’il y a quelques temps j’écrivais sur les forums pour me renseigner sur une éventuelle implémentation PHP de la norme freedesktop «Icon Theme Specification» (et sa copine «Icon Naming Specification») : http://linuxfr.org/forums/programmation-php/posts/normes-freedesktop-et-icones-une-libxdg-pour-php
Ne trouvant rien, je me décide à implémenter la norme moi même. Au fur et à mesure de l’implémentation, j’ai du prendre quelques libertés avec la norme pour mieux satisfaire nos besoins, j’ai essayé chaque fois de mettre un attribut booléen correspondant pour que ma classe puisse être utilisée par quelqu’un souhaitant suivre la norme à la lettre.
Résultat:
- Une classe IconTheme pour la recherche d’icône et un geticon.php pour faciliter l’utilisation
- Les icônes sont liées en utilisant une url type geticon.php?context=action&icon=edit-delete&size=16
- Je cherche les thèmes dans un sous-dossier de notre application, pour rendre un thème d’icône installé disponible, un lien symbolique sera utilisé
- J’ai ajouté une option &disabled=1 à geticon.php pour griser une icône (sur une appli desktop c’est généralement le toolkit qui s’en charge)
- SVG n’est pas supporté (support dans les navigateurs aléatoire, difficile à griser et/ou rendre en PHP, contributions bienvenues)
- J’ai ajouté un fallback sur notre thème pour les icônes manquantes
- J’ai du ajouter un fallback entre les icônes à cause du peu de noms d’icônes standard (norme non mise à jour depuis 2006, rien que Tango et Oxygen n’ont pas fait les mêmes choix de nommage)
- J’ai désactivé le fallback sur la taille la plus proche même si non compatible prévue par la norme pour privilégier les deux sus-nommés
Remarque : je n’ai implémenté aucun cache, c’est le boulot du navigateur.
Le résultat est assez plaisant, ci-dessous une capture avec le thème par défaut et une avec le thème oxygen:
Même comparaison sur la liste d’utilisateur:
Sous Debian un lien symbolique suffit pour avoir le thème oxygen, pour le thème Tango le paquet ne contient pas les rendus au format 48x48 donc comme je n’ai pas implémenté le SVG il faudra ajouter un dossier avec ces rendus.
Notre logiciel y gagne des icônes cohérentes (y compris dans le thème par défaut puisque cela m’a forcé à le réorganiser et supprimer les doublons), et dans le cas d’environnement maitrisé (c’est souvent le cas puisque notre logicel est utilisé en réseau local) on peut prendre le même thème que le desktop des utilisateurs et ainsi améliorer le confort d’utilisation.
À l’avenir il serait bien que notre soft permette à chaque utilisateur de choisir son thème afin qu’il puisse prendre le même que son desktop (Note: pour ce qui est des formulaires je considère que c’est le boulot du navigateur de les rendres de la même manière que le toolkit du desktop)
Si quelqu’un veut réutiliser ce boulot dans son appli, la classe IconTheme est réutilisable en l’état, geticon.php sera à adapter, n’hésitez pas à me contacter (#fusiondirectory sur freenode)
PS: pour les utilisateurs FusionDirectory, il faudra attendre la version 1.0.8 pour profiter de ce travail
# Intéressant
Posté par Blount (site web personnel) . Évalué à 6.
Intéressant, je travaille justement sur une partie admin commune à plusieurs sites avec des icônes d'action. Je vais donc m'intéresser à ton système.
Remarque : je n’ai implémenté aucun cache, c’est le boulot du navigateur.
En fait, il y a deux sortes de cache.
1 - Effectivement, du coté navigateur, il doit prendre en charge la mise en cache de l'image afin de ne pas télécharger celle-ci à chaque affichage. Par contre, le serveur doit savoir aussi lui indiquer de toujours utiliser la version en cache pour une durée infinie (sinon il fait des requêtes afin de déterminer si le fichier a changé). Il peut alors être intéressant d'ajouter une notion de version dans ton URL (ex: geticon.php?version=1.2&context=action&icon=edit-delete&size=16) afin de forcer le navigateur à télécharger les nouvelles icônes en cas de changement.
2 - Ensuite, il y a un cache à mettre en place permettant d'agir sur l'ensemble des utilisateurs. Si tu as des actions lourdes à faire, identiques pour chaque utilisateur (avec même thème, etc.), alors un cache au niveau du serveur peut être intéressant.
Le premier connecté ferai l'action lourde, et le second profiterai du cache généré.
[^] # Re: Intéressant
Posté par MCMic (site web personnel) . Évalué à 2.
Oui, implémenter le deuxième point me parait pertinent, si on a beaucoup d’utilisateurs mon système actuel peut devenir consommateur de ressource (dans certains cas la recherche d’une icône mène à de nombreux parcours de dossiers).
Il faut réfléchir à la meilleure manière d’implémenter ça, si je ne l’ai pas fait c’est que nos caches actuels se situent dans la session, donc n’apportaient rien par rapport au cache du navigateur.
Pour la version je suis moyennement convaincu dans la majeur partie des cas le rechargement n’est pas critique s’il met du temps à se faire aucun drame. En plus ça veut dire aller modifier les chemins des images quand on change les images…
Si d’autres personnes sont intéressées il serait aussi bon de rafraichir la norme définissant les noms d’icônes standards voir faire une extension spécifique aux applis web et/ou aux applis d’administration.
[^] # Re: Intéressant
Posté par Blount (site web personnel) . Évalué à 2.
Attention, la donnée "version=x" dans l'URL n'est pas une donnée utilisée coté serveur. Tes répertoires restent identiques. Elle est juste là afin de déclencher le téléchargement de la nouvelle icône.
J'utilise le même système pour gérer le cache des fichiers CSS et JS (voir sur mon blog). C'est une sorte de redirection d'URL.
[^] # Re: Intéressant
Posté par MCMic (site web personnel) . Évalué à 2.
Dans ce cas, tu fais bien ce que tu veux, ça ne touche pas l’implémentation en elle même.
[^] # Re: Intéressant
Posté par Blount (site web personnel) . Évalué à 1.
C'est vrai :)
Bon, au moins, ceux qui voudront optimiser le cache auront une piste si ce n'était pas le cas.
# Une solution : Arrêter avec les icônes
Posté par Wawet76 . Évalué à 5.
Sur le logiciel pas libre que je développe pour manger, on a fini à force de remanier l'interface par ne quasiment plus avoir d'icônes. Un bouton ou un lien "modifier", c'est finalement plus pratique qu'une petite image de calepin avec un crayon.
Sur tes deux premières captures d'écran, tous les pavés d'icônes font double emploi avec le menu à gauche… Sur les deux suivantes, je soupçonne que les rangées d'icônes proposent la même chose que la liste déroulante "Actions".
(chacun fait ce qu'il veut hein, je ne me milite pas pour une suppression de toutes les icônes partout)
[^] # Re: Une solution : Arrêter avec les icônes
Posté par Ytterbium . Évalué à 2.
Oui, sauf qu'une icône peut servir à apporter plus rapidement une information que ne le ferait le texte correspondant, ou bien dans le cas de ton 2e exemple, les icônes permettent d'économiser un clic.
Mais bon, je suis quand même aussi assez pro texte et je reconnais qu'un texte peut souvent être plus clair qu'une icône.
# Une anomalie ....
Posté par totof2000 . Évalué à 2.
… le pingouin/manchot associé à Unix. En général le manchot c'est plutôt Linux.
[^] # Re: Une anomalie ....
Posté par Joris Dedieu (site web personnel) . Évalué à 3.
oui pour Unix en général, une palourde convient mieux
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.