Projet:Charte graphique/Apparence des Infobox
Cet article doit être actualisé (indiquez la date de pose grâce au paramètre date).
Des passages de cet article ne sont plus d’actualité ou annoncent des événements désormais passés. Améliorez-le ou discutez-en. Vous pouvez également préciser les sections à actualiser en utilisant {{section à actualiser}}.
| Aide et syntaxe • FAQ |
| Liste • Modèles spéciaux |
| Aide:Modèles courants |
| ParserFunction • Mots magiques |
| Espace Modèle |
| Demander un modèle |
| Modèle • Apparence |
| Projet d’harmonisation |
| Qu'est-ce qu'une palette de navigation ? |
| {{Méta palette de navigation}} |
| Palette de navigation |
| Projet palette |
| Qu'est-ce qu'une infobox ? |
| Demander une infobox |
| Apparence |
| Modèle infobox |
| Projet infobox |
| Qu'est-ce qu'un bandeau ? |
| Liste des bandeaux de maintenance |
| Liste des bandeaux d'avertissements permanents |
| Wikidata |
Le but de ce projet est de fournir les bases pour une harmonisation graphique globale des infobox.
Arborescence du projet modifier
L'ancienne du projet à l'abandon se trouve dans Projet:Charte graphique/Apparence des Infobox/Archive. Les modèles seront créés comme des sous-pages de la présente.
Étude des composants d'une infobox modifier
Pour proposer une harmonisation globale il faut avoir une vision globale des composants d'une infobox. Des exemples de divers infobox se trouvent à /Archive#Astronomie.
Une infobox est composée des éléments sémantiques suivants :
- Un titre
- Au sommet, pleine largeur, forte mise en évidence typographique
- une éventuelle illustration de toute l'infobox sans légende propre
- une cellule pleine largeur
- des sous-titres
- cellules pleine largeur, avec mise en évidence typo
- des paires propriété-valeur
- ligne de 2 cellules, éventuelle mise en évidence typo de la propriété
- des illustrations avec légende
- cellule pleine largeur, avec légende sous l'image
- misc
- une cellule pleine largeur
Une infobox est composée des éléments stylistiques suivants :
- Titre
- Cases
- Simples
- Doubles
- Séparateurs
- Simples lignes
- Contenant du texte
Paramètres à fixer modifier
Certains paramètres sont à fixer. Ils seront les mêmes quelle que soit l'infobox.
Les attributs à fixer modifier
Par exemple :
- l'utilisation des bordures ;
- l'aspect des bordures ;
- la taille des polices ;
- la graisse des polices ;
- l'autorisation ou non des <hr> ;
- le padding ;
- le margin ;
- l'alignement ;
- le nombre et la répartition des couleurs.
Les valeurs de ces attributs modifier
Paramètres à laisser libre modifier
Certains paramètres sont laissés libres aux créateurs des infobox par projets.
Par exemple :
- les couleurs de premier plan ;
- les couleurs d'arrière plan :
- une image de fond à utiliser à coté du titre.
Implémentation technique modifier
La mise en œuvre des standards reposera sur trois éléments :
- des modèles ;
- des classes CSS ;
- des recommandations.
Modèles modifier
Afin que les créateurs d'infobox respectent la charte graphique, il faudrait qu'ils n'aient accès qu'à un haut niveau à la programmation d'infobox. L'idée est de créer des modèles servant de squelettes pour la création d'infobox standard. Cela simplifiera également la création d'infobox.
Ces squelettes fonctionneraient par un jeu de boîtes à empiler, à l'image des {{taxobox}}. Voir par exemple l'infobox de l'adalia. Le code source est :
{{Taxobox début | animal | Adalia | Adalia.jpg | [[Coccinelle à deux points]] (''Adalia bipunctata'') }}
{{Taxobox | embranchement | Arthropoda }}
{{Taxobox | sous-embranchement | Hexapoda }}
{{Taxobox | classe | Insecta }}
{{Taxobox | sous-classe | Pterygota }}
{{Taxobox | infra-classe | Neoptera }}
{{Taxobox | super-ordre | Endopterygota }}
{{Taxobox | ordre | Coleoptera }}
{{Taxobox | famille | Coccinellidae }}
{{Taxobox | sous-famille | Coccinellinae }}
{{Taxobox taxon | animal | genre | Adalia | [[Étienne Mulsant|Mulsant]], [[1850]] }}
{{Taxobox taxons | Voir texte }}
{{Taxobox fin}}
Il produit le résultat suivant :
Taxons de rang inférieur
- Voir le texte
La principale différence par rapport à ce type de modèle est qu'il faut utiliser un modèle père et des modèles fils car on ne peut pas présumer de l'aspect graphique de chaque ligne, puisqu'il changera d'une infobox à l'autre. Pour éviter de devoir repréciser les couleurs à chaque ligne, il faut utiliser un modèle père qui spécifiera les couleurs où besoin est. Il appelera des modèles fils pour être utilisé plus facilement.
Concrètement le code source d'une infobox ressemblera à :
{{box titre=machin | couleur_fond=XXXXXX | couleur_champs=XXXXXXX | couleur_valeur=XXXXXX
| {{box case simple | texte de la case}}
| {{box case simple | texte de la case}}
| {{box séparateur | texte du séparateur}}
| {{box case double | texte de la 1ère case 1|texte de la 2e case}}
| {{box case simple | texte de la case}}
}}
L'appel à l'infobox ainsi créée sera similaire à ceux actuels.
Classes CSS modifier
Recommandations modifier
Il y aura quelques mesures qui ne pourront pas être appliquées par un simple procédé technique. Il y également des comportements que la technique ne peut empêcher. Il faut donc fixer une partie des normes sous forme de recommandations écrites en toutes phrases.
Il faut également écrire une documentation sur l'utilisation de la nouvelle norme.
Graphisme, mise en page modifier
Alignement du texte modifier
En règle générale, l'align center ne donne jamais de beaux résultats. C'est une des règles de base de mise en page. En effet, on dit alors que le texte « flotte » et cela nuit à la lisibilité général. Préferez donc un align left, le plus lisible, le plus propre. Si vous tenez à vous détacher d'un align left, la plupart des designers utilise alors un faux align center constitué d'un align right pour la colonne de gauche et d'un align left pour la colonne de droite. Ainsi, le texte ne flotte pas, il est ancré à la ligne verticale que va constituer cette mise en page.
Apparence des tableaux modifier
Le design des tableaux avec les bordures entières, lisibles et collées est un design obsolète. Préférez un tableau sans bordure, ou avec la moitié des bordures (par exemple juste celles en dessous et au dessus), d'un pixel de largeur maximum, avec un padding et un cellspacing élevé de manière à ce que les traits ne se collent pas et aèrent l'infobox.
Apparence du texte modifier
- Différencier la colonne des paramètres (gauche) de la colonne des informations (droite)
L'utilisation de couleur pour le texte est fortement déconseillée. Ainsi, afin de différencier les paramètres des informations, l'utilisation d'une typo graissée (bold) pour les paramètres donne des résultats esthétiques.
- Polices de caractères (fontes)
L'utilisation de polices de caractères différentes de celles de bases est proscrit. En effet, pour que la police personnalisée s'affiche, il faut que l'utilisateur ai cette police installé sur sa machine. Or la plupart des utilisateurs restent avec les fontes de bases, une petite dizaine. Restez donc en sans serif, arial par exemple car cette fonte est une des plus répandues sur les machines.
- L'italique
L'italique, sur des écrans qui n'utilisent pas le lissage des typos, donne des résultats inesthétiques, très pixelisés. A utiliser avec modération donc. L'italique doit avoir un intérêt : il est inutile de mettre tout le texte de l'infobox en italique.
- La taille du texte
En général, le résultat visuel est agréable lorsque la taille du texte dans l'infobox est fixée légèrement plus bas que la taille du texte dans l'article. A plus forte raison si l'infobox est très longue.