Aller au contenu

Projet:Charte graphique/Apparence des Infobox

Une page de Wikipédia, l'encyclopédie libre.

Le but de ce projet est de fournir les bases pour une harmonisation graphique globale des infobox.

Arborescence du projet

[modifier | modifier le code]

L'ancienne apparence 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 | modifier le code]

Pour proposer une harmonisation globale il faut avoir une vision globale des composants d'une infobox. Des exemples de diverses 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 | modifier le code]

Certains paramètres sont à fixer. Ils seront les mêmes quelle que soit l'infobox.

Attributs à fixer

[modifier | modifier le code]

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.

Valeurs de ces attributs

[modifier | modifier le code]

Paramètres à laisser libre

[modifier | modifier le code]

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 | modifier le code]

La mise en œuvre des standards reposera sur trois éléments :

  • des modèles ;
  • des classes CSS ;
  • des recommandations.

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 :

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 appellera 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 | modifier le code]

Recommandations

[modifier | modifier le code]

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 | modifier le code]

Alignement du texte

[modifier | modifier le code]

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éférez 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 | modifier le code]

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 | modifier le code]

- 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.