Projet:Charte graphique/Apparence des Infobox

Une page de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Curly Brackets.svg
Modèle
Aide et syntaxeFAQ
ListeModèles spéciaux
Aide:Modèles courants
ParserFunctionMots magiques
Espace Modèle
Projets
Demander un modèle
ModèleApparence
Projet d’harmonisation
Palette de navigation
Qu'est-ce qu'une palette de navigation ?
{{Méta palette de navigation}}
Palette de navigation
Projet palette
Infobox
Qu'est-ce qu'une infobox ?
Demander une infobox
Apparence
Modèle infobox
Projet infobox
Projets connexes
Wikidata

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

Arborescence du projetmodifier | modifier le code

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

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

Paramètres à fixermodifier | modifier le code

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

Les attributs à fixermodifier | 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.

Les valeurs de ces attributsmodifier | modifier le code

Paramètres à laisser libremodifier | 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 techniquemodifier | modifier le code

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

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

Modèlesmodifier | modifier le code

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

Recommandationsmodifier | 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 pagemodifier | modifier le code

Alignement du textemodifier | 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é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 tableauxmodifier | 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 textemodifier | 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 (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.








Creative Commons License