Projet:Charte graphique/Apparence des Infobox

 v · d · m 

Modèle

• Aide et syntaxe • FAQ
• Liste • Modèles spéciaux
• Aide:Modèles courants
• ParserFunction • Mots magiques
• Espace Modèle

---

Projets

• Demander un modèle
• Modèle • Apparence
• Projet d’harmonisation

---

Palette de navigation

• {{Méta palette de navigation}}
• Palette de navigation

---

Infobox

• Demander une infobox
• Liste • Apparence
• Modèle infobox
• Projet infobox
• Projet d’amélioration

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

[modifier] Arborescence du projet

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.

[modifier] Étude des composants d'une infobox

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'infoboc sans légende propre 

une cellule pleine largeur

des sous-titres 

cellules pleine largeur, avec mise en évidence typo

des pairs 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

[modifier] Paramètres à fixer

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

[modifier] Les attributs à fixer

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.

[modifier] Les valeurs de ces attributs

[modifier] Paramètres à laisser libre

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.

[modifier] Implémentation technique

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

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

[modifier] Modèles

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 | animal         | Voir texte }}
{{Taxobox wikispecies             | Adalia }}
{{Taxobox fin}}

Il produit le résultat suivant :

Adalia
Coccinelle à deux points (Adalia bipunctata)
Classification
Règne	Animalia
Embranchement	Arthropoda
Sous-embr.	Hexapoda
Classe	Insecta
Sous-classe	Pterygota
Infra-classe	Neoptera
Super-ordre	Endopterygota
Ordre	Coleoptera
Famille	Coccinellidae
Sous-famille	Coccinellinae
Genre
Adalia Mulsant, 1850
Taxons de rang inférieur
Voir texte
Retrouvez ce taxon sur Wikispecies

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.

[modifier] Classes CSS

[modifier] Recommandations

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.

[modifier] Graphisme, mise en page

[modifier] Alignement du texte

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.

[modifier] Apparence des tableaux

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.

[modifier] Apparence du texte

- 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 (elle est installée avec Windows XP).

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