Cette page ne décrit pas l’état actuel du projet.

Cette page est obsolète et n’est plus tenue à jour. Les informations qu’elle contient peuvent être erronées. Elle est conservée pour son intérêt historique.

Les infobox standard, ou appelées aussi « V2 », améliorent l'aspect, la simplicité et la flexibilité des infoboxes de Wikipédia. L'intérêt est d'harmoniser l'apparence en utilisant des feuilles de style en cascade et des pictogrammes thématiques, de simplifier le code et de permettre de fusionner plusieurs modèles en un seul grâce la généricité ; autrement dit, utiliser le moins de ressources possible et obtenir un produit harmonisé. Pour plus d'informations ou pour faire une demande de fabrication, voir la page de discussion.

Aussi disponibles pour aider, voir les quelques exemples d'infobox standard déjà en ligne.

Afin d'obtenir une certaine uniformité d'un modèle à l'autre, veuillez programmer les infobox V2 avec une attention particulière en utilisant les exemples ci-après.

Nommage et renommage

Dans le cadre du Projet:Modèle/Harmonisation, il est fortement recommandé de nommer (ou renommer) votre infobox en respectant la nomenclature établie. Ceci relève des conventions sur les titres, aussi valables pour les noms de modèles. Voici quelques exemples de ce qu'il faut faire ou non :

• Modèle:Infobox Nom de l'infobox (avec « Infobox » au début, et une majuscule au Nom de l'infobox. Ne pas tronquer de mots.)
• Modèle:Nom de l'infobox (Toujours commencer avec le mot « Infobox ».)
• Modèle:Infobox nom de l'infobox (Toujours débuter le nom de l'infobox avec une capitale.)
• Modèle:Infobox Nom De L'InfoBox (Ne pas mettre d'autres capitales dans le nom du modèle, sauf pour les noms propres.)
• Modèle:Infobox Nom infobox (Ne pas tronquer des mots, faire une phrase. Mieux vaut un nom de modèle clair qu'un nom trop court.)
• Modèle:Infobox Name of the infobox (Éviter des mots anglophones. Ex : Comicbook, podcast, TV, etc.)
• Modèle:Infobox Nom du modele (Toujours utiliser les accents pour un titre.)

En outre, les images qui habillent l'en-tête ont leurs propres conventions de nomenclature, à savoir le titre, les dimensions, l'apparence, etc. Voir les pictogrammes plus loin.

Paramétrage

Il est important de bien nommer vos paramètres. En bref, pas de majuscules, pas d'acronymes, pas de diminutifs, pas de pluriel. Il est fortement conseillé aussi d'uniformiser l'emplacement des tubes « | » et des signes égal « = ».

À faire	À éviter
((Infobox Nom de l'infobox | nom = | image = | légende = | autre = ))	((Infobox Nom de l'infobox| nom =| image =| légende =| autre =| ))	((Infobox Nom de l'infobox |nom= |img= |lég= |aut= ))

Veuillez penser à créer des infoboxes génériques, qui incluent plusieurs autres infoboxes du même thème ayant les mêmes paramètres joints sous une charte graphique. Il existe plusieurs façons de programmer une infobox, mais nous vous conseillons tout de même quelques règles :

• pour éviter la prolifération d'infoboxes aux paramètres similaires, il est suggéré de créer des infoboxes génériques en utilisant la fonction ((#switch)) du parseur. Puis fusionnez les mêmes paramètres qui seront inclus d'une infobox à l'autre (voir ((Infobox Subdivision administrative)) pour un exemple de sous-page d'infobox générique) ;
• évitez de faire apparaître les paramètres non renseignés.

Programmation d'une infobox sans briques

! colspan="2" class="entete defaut" style="background-color:orange;color:#000000" | (({nom|((PAGENAME))))}
|-

! colspan="2" style="text-align:center;background-color:#dfffdd;color:#ffffff" | Démographie
|-

((#if: (({paramètre 1|))} |
! colspan="2" style="text-align:center;background-color:#dfffdd;color:#ffffff" ((!)) Démographie
((!-))
))

! scope=row | Paramètre 1
| (({paramètre 1|))}
|-

((#if:(({paramètre 1|))} |
! scope=row ((!)) Paramètre 1
((!)) (({paramètre 1|))}
((!-))
))

! colspan="2" | <hr />
|-

((#if: (({image|))} |
((!)) colspan="2" ((!)) <hr />
((!-))
))

{| class="infobox_v2" cellspacing="7"
| colspan="2" class="entete defaut" style="background-color:#8C8C8C;" | ((#if:(({nom|))} | (({nom|))} | ((PAGENAME)) ))
|-
((#if:(({image|))} | 
((!)) colspan="2" style="text-align:center;" ((!)) [[Fichier:(({image|))}|280px]] ((#if:(({légende|))}|<br /><small>(({légende|))}</small>)) <hr />
((!-))
))
((#if:(({paramètre 1|))} |
! scope=row ((!)) Paramètre 1
((!)) (({paramètre 1|))}
((!-))
))
((#if:(({paramètre 2|))} |
! scope=row ((!)) Paramètre 2 
((!)) (({paramètre 2|))}
((!-))
))
|}

{| class="infobox_v2" cellspacing="7"
| colspan="2" class="entete defaut" style="background-color:rgb((({charte))});" | 
((#if: (({titre|(({film|(({nom|))))))))} | (({titre|(({film|(({nom|))))))))} ))
|-
((#if:(({photo|(({image|)))))) | 
! colspan="2" style="text-align:center;" ((!)) (({photo|(({image|))))))
((!-))
))
((#if:(({vieux 1|(({ancien 1|(({paramètre 1|))))))))} |
! scope=row ((!)) Paramètre 1
((!)) (({vieux 1|(({ancien 1|(({paramètre 1|))))))))}
((!-))
))
<!------------------------------------------------------------------------------------
 Pour faciliter le repérage ultérieur par les robots, vous pouvez ajouter « déprécié »  
------------------------------------------------------------------------------------->
((#if:<!--déprécié-->(({vieux 2|(({ancien 2|<!---->(({paramètre 2|))))))))} | 
! scope=row ((!)) Paramètre 2
((!)) <!--déprécié-->(({vieux 2|(({ancien 2|<!---->(({paramètre 2|))))))))}
((!-))
))
((#if:<!--déprécié-->(({ancien 3|<!---->(({paramètre 3|)))))) | 
! scope=row ((!)) Paramètre 3
((!)) <!--déprécié-->(({ancien 3|<!---->(({paramètre 3|))))))
((!-))
))
|}

((Infodoc|colspan=2|couleur=AAAAAA|lien=Infobox Nom de l'infobox))

((#if: (({image|))} |
! colspan="2"  align="center" ((!))
[[Fichier:(({image|))}|280px|(({légende|))}]] <br /><small>(({légende|))}</small>
((!-))
))

| colspan="2" align="center"|
((#if:(({image|))}|
[[Fichier:(({image))}|280px|(({légende))}]] <br /><small>(({légende|))}</small>|[[Aide:Importer un fichier|Ajouter une image]]))
|-

((#if:(({image|))}|
((!)) colspan="2" align="center" ((!)) [[Fichier:(({image|))}|((#if:(({image-taille|))}|(({image-taille))}|280))px|(({légende|))}]] <br /><small>((#if:(({légende|))}|(({légende|))}|Vue de mon image))</small>
((!-))
))

((#if:(({image|))}|
((!)) colspan="2" align="center" ((!)) [[Fichier:(({image|))}| ((#if:(({image-taille|))}|((#switch: ((#expr: (({image-taille|))} <= 220))|1=(({image-taille|))}|0=220)) |220))px|(({légende|))}]] ((#if:(({image-taille|))}|((#switch: ((#expr: (({image-taille|))} <= 220))|1=|0=<br /><font color="red">'''La taille de l'image doit être modifiée, celle-ci ne doit pas dépasser 220 pixels.'''</font>))))((#if:(({légende|))}|<br /><small>(({légende|))}</small>|<br /><small>Vue de mon image</small>))
((!-))
))

((#if:(({site web|))} | 
! scope=row ((!)) Site Internet
((!)) <span class="plainlinks">[(({site web))} Site officiel]</span>
((!-))
))

! scope=row | [[Coordonnées géographiques|Coordonnées]]
| ((#if:(({latitude|))} | ((#if:(({longitude|))} | ((coord|(({latitude|))}|(({longitude|))}|type:city_region:FR|format=dms long)) )) ))
|-

((#if: (({latitude|))}|((#if: (({longitude|))} |
! scope=row ((!)) [[Coordonnées géographiques|Coordonnées]]
((!)) ((#if:(({latitude|))} | ((#if:(({longitude|))} | ((coord|(({latitude|))}|(({longitude|))}|type:city_region:FR|format=dms long)) )) ))
((!-))
))))

((#if: ((#ifexpr: (({latitude))} AND (({longitude))} )) | | ((!))-
((!)) colspan="2" align="center" style="padding: 1 1 1 1;" ((!))
((Carte avec géolocalisation dans l'infobox|carte=Royaume-Uni|latitude=(({latitude))}|longitude=(({longitude))}|texte=((#if:(({nom|))}|(({nom))}|((PAGENAME))))|arg1=1(({statut|4))}|largeur=200))<br/><small>(({carte-legende|Localisation de ((#if:(({nom|))}|(({nom))}|((PAGENAME)))) au sein du Royaume-Uni))}</small>
((!-))
))

Programmation d'une infobox avec des briques

Pour les modèles d'infobox ne demandant pas de fonctions complexes particulières, il est recommandé d'utiliser des briques pour la programmation d'une nouvelle infobox ou pour la mise à jour d'une ancienne infobox. Les briques sont un ensemble de modèles permettant, par leur association au moyen de différentes combinaisons, la mise en place de modèles d'infobox. L'enjeu ici est de simplifier la programmation des modèles d'infobox, mais également d'améliorer l'accessibilité ainsi que l'harmonisation des infobox.

Programmation d'une infobox modulaire

Suivant les souhaits, une infobox V2 peut faire appel à plusieurs sous-modèles. Le code de l'infobox n'est donc plus centralisé sur une seule page mais sur plusieurs. La construction d'une infobox V2 modulaire consiste à encapsuler entre (()) tout ou partie du code d'une infobox dans un ou plusieurs sous-modèles.

Esthétique générale

Les infobox V2 se veulent modernes sans toutefois sombrer dans les dérives de l'esthétique du « Web 2.0 » à savoir ombres, reflets, 3D... Ce sont des tableaux au fond gris clair, aérés, sans autres bordures que le cadre gris général de la boîte.

Important : les infobox V2 est un projet d'harmonisation et uniformisation des infoboxes de Wikipédia. Veuillez respecter le style de base actuellement proposé, sans faire aucune modification personnalisée dans un modèle spécifique. Si vous avez des suggestions pour l'amélioration du style, veuillez les proposer d'abord sur la page de discussion.

Usage des couleurs dans les titres et les sous-titres

Optimiser le contraste entre le fond et le texte

Dans un souci d'accessibilité, il est important que la couleur du fond des titres et des sous-titres soit bien contrastée avec la couleur du texte des titres et des sous-titres. Un bon contraste permet, entre autres choses, aux malvoyants de mieux distinguer les caractères. Il est préférable d'utiliser uniquement comme couleurs de texte le blanc ou le noir. Il faut éviter des textes d'autres couleurs telles que le rouge, le bleu, le vert... Il est recommandé de rédiger les couleurs en triplet hexadécimal tel que #FFFFFF, #000000... plutôt que de donner leur nom en anglais comme yellow, black... Une couleur rédigée en triplet hexadécimal peut facilement être gérée par des modèles automatisés. Voici ci-après deux exemples de bon et de mauvais contraste :

À faire	À éviter
Votre titre ici Sous-titre	Votre titre ici Sous-titre

Paramètres de changement de couleurs

Dans la majorité des cas, les infoboxes ont des couleurs fixes, définies, une seule et unique fois depuis la page du modèle, par les modélistes. Avoir des couleurs fixes est vivement recommandé. Cela permet de limiter les risques de conflits d'édition sur les articles entre plusieurs utilisateurs qui voudraient pour les uns une couleur et pour les autres une autre couleur. On limite également les risques de mauvais contraste entre les couleurs du fond et du texte des titres et des sous-titres. Pour autant, pour des raisons spécifiques et surtout historique au site Wikipédia, il est parfois autorisé aux utilisateurs de pouvoir modifier les couleurs des titres et des sous-titres, directement depuis les articles. Pour ce faire, il existe plusieurs méthodes, parmis lesquelles on peut citer les suivantes :

• Création de paramètres d'ajout de couleurs, en ajoutant des paramètres de changement de couleur pour le fond et le texte des titres et des sous-titres. Les couleurs sont laissées au libre choix des utilisateurs depuis les articles sans aucunes restrictions (par exemple, ((Infobox Club sportif))).
• Création d'une charte et d'un paramètre sélecteur afin de contrôler la charte graphique des titres et sous-titres (voir ((Infobox Musique (artiste))) pour un exemple de charte graphique générique.).

Important : D'après un sondage du 7 janvier 2010 (voir Wikipédia:Sondage/Paramètres de changement de couleurs dans les infobox), une forte majorité de wikipédiens sont opposées à l'ajout de paramètres permettant de modifier la couleur du fond et du texte du titre et des sous-titres dans les infoboxes. Il est donc fortement déconseillé de créer des paramètres de changement de couleurs.

Pictogrammes

Présentation des pictogrammes

Initiés par JSDX (d · c · b), les pictogrammes permettent à l'internaute de repérer d'un coup d'œil sur quel type d'article l'utilisateur se trouve. Ils améliorent ainsi l'ergonomie générale de l'encyclopédie et délimitent les chartes graphiques à un domaine donné (par exemple, les notes de musiques scellent la charte graphique des articles musicaux).

Il serait tentant de produire des centaines de pictogrammes pour chacun des types d'articles, mais pour des raisons d'ergonomie et de lourdeur des CSS, il est préférable de s'en tenir aux grands thèmes, tels que musique (notes), cinéma (pellicule), sport (anneaux olympiques), communication (antenne émétrice). L'idée est d'indiquer au visiteur le type d'article en un clin d'œil, et non de générer une liste incalculable de pictogrammes. Trop de pictos tuent les pictos !

Les pictogrammes répondent à plusieurs principes :

• Hauteur fixe de 45 pixels ;
• Semi-transparents ;
• Codés en PNG 24 bits pour gérer les différents degrés de transparence ;
• Conçus pour être alignés à droite de l'en-tête des infoboxes.

Pictogrammes dans la feuille de styles

La nomenclature des pictogrammes doit respecter la convention des noms d'images pour les Infobox V2 : « Fichier:Picto_infobox_nom.png ». Sur Commons, il faut placer les images dans Category:Infobox pictograms. Afin d'utiliser un nouveau pictogramme dans une infobox, il faut lui associer une classe dans la feuille de style globale de Wikipédia en français, MediaWiki:Common.css. Par exemple, l'association de la classe « artiste » à Fichier:Picto infobox artiste.png est faite à l'aide de :

.entete.artiste {
  background: url("//upload.wikimedia.org/wikipedia/commons/f/f3/Picto_infobox_artiste.png") no-repeat top right;
}

Ces définitions ne peuvent être ajoutées que par un administrateur. Vous pouvez demander cela sur Wikipédia:Demande d'intervention sur un message système. Pour obtenir l'URL correcte, créez un lien avec la syntaxe [[:Media:Picto_infofox_nom.png]] et récupérez sa cible (exemple : Média:Picto_infobox_artiste.png).

Le modèle de l'infobox étant à présent codé, il reste à ajouter une documentation afin de présenter et d'expliquer son usage.

Afin de préserver une uniformité dans les pages de documentation des infoboxes, voici quelques lignes conductrices pour rédiger une page explicative.

Création

Pour créer une documentation, vous devez mettre le script de l'infobox entre <includeonly>ici le script de l'infobox</includeonly>. Puis vous devez ajouter après cela le script qui permettra de faire apparaître un bandeau de documentation.

((Documentation))

Ce qui sur la page donnera la chose suivante :

<includeonly>((Infobox/Début))
...
((Infobox/Fin))</includeonly><noinclude>((Documentation))</noinclude>

Un lien apparaîtra au sommet de la page de votre modèle d'infobox. Il vous suffira alors de cliquer dessus afin de créer la page de documentation. Une fois cette page de documentation créée, il vous reste à y ajouter son contenu.

Contenu

La page de documentation d'une infobox doit comporter six informations principales que sont :

• Bandeau documentation, il permet de relier la page de documentation au modèle d'infobox correspondant.
• Syntaxe, que les utilisateurs devront copier-coller sur les articles
• Paramètres, il faut ajouter une définition des différents paramètres disponibles au sein de l'infobox afin d'aider les utilisateurs à savoir comment remplir le modèle sur les articles.
• Exemple, il faut ensuite ajouter un exemple de la syntaxe présentée précédemment mais cette fois-ci remplie, avec au passage l'apparition à droite de l'infobox telle qu'elle apparaîtrait sur un article. Puis on doit ajouter ensuite le bandeau ((Projet Infobox)).
• Catégories, pour finir la page de documentation, il vous reste à ajouter la ou les catégories adéquates afin de pouvoir classer votre infobox. Pour trouver une catégorie, vous pouvez aller sur Catégorie:Modèle infobox. L'ajout de catégories se fait en bas de la page de documentation du modèle de l'infobox et non directement sur la page de l'infobox. Sur la page de documentation vous devez mettre les catégories entre <includeonly></includeonly> ; autrement, si vous ne le faites pas, alors tous les articles qui seront dotés de votre infobox seront catégorisés au même titre que votre infobox.

Voici un exemple type de page de documentation :

<noinclude>((Sous-page de documentation))</noinclude>

== Syntaxe ==

Voici la syntaxe à copier-coller sur les articles :

<pre>
((Infobox Jardin
 | nom    = 
 | pays   = 
 | taille = <!-- facultatif -->
))
</pre>

== Paramètres ==
* <code>nom</code> : Il sert à indiquer le nom du jardin...
* <code>pays</code> : Il sert à indiquer dans quel pays se se trouve le jardin...
* <code>taille</code> : Il sert à donner la taille du jardin...

== Exemple ==

((Infobox Jardin
 | nom    = Jardin d'Europe
 | pays   = France
 | taille = 200 m²
))

<pre style=overflow:auto> 
((Infobox Jardin
 | nom    = Jardin d'Europe
 | pays   = France
 | taille = 200 m²
))
</pre>

((Projet|Infobox))
<includeonly>
[[Catégorie:Modèle infobox V2]]
[[Catégorie:...]]
</includeonly>

Infobox simples

• ((Infobox Organisation))
• ((Infobox Cinéma (film)))
• ((Infobox Cinéma (personnalité)))
• ((Infobox Cinéma (projecteur)))
• ((Infobox Cinéma (caméra)))
• ((Infobox Jeu vidéo))
• ((Infobox Écrivain))
• ((Infobox Automobile))

Infobox génériques

• ((Infobox Subdivision administrative))
• ((Infobox Club sportif))

• Projet:Infobox/V2 Débutant
• Catégorie:Modèle infobox V2
• Projet:Infobox
• Projet:Modèle/Harmonisation
• Wikipédia:Atelier accessibilité/Taxobox et infobox

• Projet Infobox
  • Version 2
  • Version 3
  • Version Lua