FANDOM


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
{{Méta palette de navigation}}
Palette de navigation
Infobox
Demander une infobox
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.

Arborescence du projetModifier

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

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

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

Les attributs à fixerModifier

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

Paramètres à laisser libreModifier

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

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

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

ModèlesModifier

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 fin}}

Il produit le résultat suivant : Modèle:Taxobox début Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox Modèle:Taxobox taxon Modèle:Taxobox taxons Modèle:Taxobox fin

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

RecommandationsModifier

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

Alignement du texteModifier

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

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

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

Interférence d'un bloqueur de publicité détectée !


Wikia est un site gratuit qui compte sur les revenus de la publicité. L'expérience des lecteurs utilisant des bloqueurs de publicité est différente

Wikia n'est pas accessible si vous avez fait d'autres modifications. Supprimez les règles personnalisées de votre bloqueur de publicité, et la page se chargera comme prévu.

Sur le réseau FANDOM

Wiki au hasard