Infoboxes portables

## Informations générales

### Description

Une boîte contenant un résumé structuré de faits qui peut être lue sur de multiples plates-formes

### Type

Information

La volonté de FANDOM de créer un écosystème plus accessible inclut désormais les « bonnes pratiques » (encore à appliquer) pour utiliser les infoboxes portables (voir aussi les pages d'aide pour le CSS et les balises. Elles continuent d'évoluer, et s'affirment comme la nouvelle génération d'infoboxes après les modèles créés grâce à InfoboxBuilder. De nombreuses infoboxes portables ont déjà été créées ! Cette page est une alternative à la documentation officielle existante.

**Si vous n'avez pas l'habitude de créer ou de modifier des modèles, ce guide n'est peut-être pas pour vous.**

Commencez par lire la page consacrée aux questions fréquentes rédigée par Dessamator.

Comme c'est souvent le cas pour les nouvelles fonctionnalités, il y aura des bugs, et nous essaierons de les répertorier ici dans la liste des bugs.

## Historique

Comme la plupart des infoboxes, le formatage est déclaré à l'intérieur d'une page Modèle: (ex : Modèle:Infobox personnage). Mais, contrairement à la plupart des autres modèles, le modèle d'une infobox portable s'écrit dans un format XML spécial et non en wikitexte ou en Lua. Ce type de code est plus commun dans l'HTML ou les extensions à l'intérieur du wikitexte, et la syntaxe des infoboxes portables est d'ailleurs un script pour une extension ; ce qui lui permet de bien formater l'infobox sur différents appareils.

Une fois que le modèle a été créé, il peut être utilisé comme n'importe quel autre modèle dans les articles. Dans la plupart des cas, cela signifie qu'un remplacement est possible pour la plupart des wikis sans avoir à modifier ce qui est écrit dans les articles. Un outil de migration a été conçu pour cela ; les versions de travail générées doivent être ajustées dans la plupart des cas, et ne peuvent être utilisées telles quelles que pour une minorité de wikis. Aussi, des modifications plus poussées nécessitant un remaniement de la syntaxe sont nécessaires. Il est important de noter que dans la plupart des cas où l'outil de migration ne donne pas un résultat satisfaisant, les modèles utilisés sont soit très anciens (et ont tendance à mal s'afficher sur différents appareils), soit très complexes (utilisant du Lua ou des fonctions parseur élaborées), soit très spécifiques (avec une apparence qui ne s'affiche pas bien sur tous les types d'appareils).

## Les bases

*Aide:Infoboxes portables*

Dans un article, une infobox est utilisée de la même façon qu'avant.

```
{{Infobox personnage
}}
```

Le modèle appelé (dans ce cas Modèle:Infobox personnage) utilise la syntaxe d'une infobox portable, qui ressemble à ça :

```
<infobox>
 <title source="title" />
 <image source="image">
 <caption source="imagecaption" />
 </image>
 <data source="position" />
 <data source="age" />
 <data source="status" />
 <data source="height" />
 <data source="weight" />
</infobox>

```

L'exemple ci-dessus produit une infobox viable, et pourrait être le résultat produit par l'outil de migration. Il y a des éléments manquants qui peuvent être rajoutés pour améliorer la version de travail. Dans cet exemple, nous introduirons "default" (qui peut être utilisé en tant qu'enfant de tout élément appartenant à "source"), "labels" et "format". Ce dernier est employé pour permettre l'utilisation de données pures au lieu d'un mélange de données et d'unités, mais la même fonction peut faire de nombreuses choses importantes, ce que nous verrons plus en détails plus loin.

```
<infobox>
 <title source="titre">
 <default>{{PAGENAME}}</default>
 </title>
 <image source="image">
 <caption source="légende" />
 </image>
 <data source="occupation">
 <label>Position</label>
 </data>
 <data source="age">
 <label>Âge</label>
 </data>
 <data source="état">
 <label>État</label>
 </data>
 <data source="height">
 <label>Hauteur</label>
 <format>{{{hauteur}}} mètres</format>
 </data>
 <data source="weight">
 <label>Weight</label>
 <format>{{{poids}}} grammes</format>
 </data>
</infobox>

```

## Versions de travail avec l'outil de migration

*Aide:Migration des infoboxes*
L'outil de migration des infoboxes est utilisé pour convertir d'autres types d'infoboxes en infoboxes portables avec des résultats variés. Avec les modèles les plus compliqués, une correction manuelle est nécessaire.

## Insertion des infoboxes avec l'ÉditeurVisuel

Si vous utilisez l'ÉditeurVisuel, l'outil le plus commun pour les nouveaux contributeurs, ajouter une infobox est facile. Un menu déroulant dans la barre d'outils fournit une liste d'infoboxes portables. Modifier cette infobox n'est, en revanche, pas aussi simple. Au jour d'aujourd'hui, les paramètres d'une infobox sont exposés sans explication, et les images et les vidéos ne peuvent pas être facilement insérées.

Pour insérer une image (ou une vidéo) dans une infobox il faut utiliser l'outil d'insertion de l'ÉditeurVisuel dans le corps principal de l'article, et copier le nom du fichier de cette image dans l'infobox dans l'Éditeur Source. Il est important de se rappeler dans quel paramètre l'image doit être placée. Il n'est cependant pas important de reporter la taille, la légende, la vignette ou tout autre modificateur pour cette image, comme ils sont ignorés. La largeur de l'image est déterminée par le CSS, et la légende est gérée par un paramètre séparé utilisant la balise "caption".

Avec l'implémentation actuelle, le copier/coller est également nécessaire dans l'Éditeur classique.

 Fichier:SE Before.png
 Fichier:SE After.png
## Balises

*Aide:Infoboxes portables/Balises*

Si vous êtes familier des modèles traditionnels, un mot encadré de trois accolades (ex : "**`{{{param}}}`**") est appelé un paramètre. Ils représentent des données pour un modèle, où la valeur de "param" correspond à ce qui est inscrit dans un article. La même donnée est reconnue dans une infobox portable si on utilise **`source="param"`**. De tels paramètres sont utilisés pour stocker des données dans un article, mais ils n'ont pas à s'afficher de la façon dont ils sont saisis. Ils peuvent s'afficher différemment en utilisant la balise **`<format>`**.

Il est très important de toujours suivre l'imbrication des balises car certaines balises peuvent uniquement être imbriquées dans certains types de balises. Dans le XML, il faut aussi toujours penser à fermer les balises ; si elles n'ont pas besoin de balise fermante, elles doivent obligatoirement se terminer par **`/>`**

Pour regrouper des données en une section (que ce soit horizontalement ou verticalement), une balise `<group>` peut s'avérer utile.

Les balises `<navigation>` représentent une façon générique d'afficher tout type de wikitexte dans une infobox portable là où il pourrait être ignoré ou interdit. Ces balises occupent généralement une section entière (tout comme la balise <data>) et peuvent être utilisées pour afficher des liens ou toute autre information. Généralement, une balise de navigation est utilisée en bas de page.

### Images

Une fonctionnalité similaire à tabber est prise en charge si vous passez au modèle un ensemble d'images regroupées dans une balise `<gallery>` ou `<tabber>`. Consultez la section « Comment utiliser plusieurs images ou vidéos » de la page d'aide.

Exemple d'une infobox portable

```
<!-- Infobox personnage-->
<infobox layout="stacked">
  <title source="nom"><default>{{PAGENAME}}</default></title>
  <image source="image" />
  <data source="saison"><label>Saison(s)</label></data>
  <data source="première"><label>Première apparition</label></data>
</infobox>

```

Exemple d'utilisation d'une galerie

```
{{Infobox personnage
    Mary riding.jpg|Mary sur un cheval
    Mary wedding.jpg|Mary en robe de mariée
    Mary dancing.jpg|Mary qui danse
  </gallery>
           [[Saison 4|4]], [[Saison 5|5]], [[Saison 6|6]]
}}

```

Exemple de l'utilisation de tabber

```
{{Infobox personnage
    Danse  = [[File:Mary dancing.jpg]]
  </tabber>
           [[Saison 4|4]], [[Saison 5|5]], [[Saison 6|6]]
}}

```

## Styliser avec le CSS

*Aide:Infoboxes portables/CSS*

Les infoboxes utilisant ce genre de code sont automatiquement stylisées, s'inspirant du thème personnalisé de votre communauté. Si une variable est vide, la ligne correspondante du modèle ne sera pas affichée (à moins que la balise "default" ait été utilisée).

Le CSS en ligne n'est pas pris en charge. Les classes personnalisées ne le sont pas non plus, mais un ensemble limité de classes prédéfinies peuvent être utilisées pour styliser les éléments via les attributs `theme` et `theme-source`.

### Apparence

Pour les infoboxes et les tableaux en général, les apparences sont assez basiques pour l'instant et s'appliquent uniquement aux données et leurs libellés.

### label

Data

L'apparence par défaut est un tableau avec des libellés en données comme on peut le voir à droite.

### label

Data

L'autre apparence est `<infobox layout="stacked">` qui place les libellés au-dessus des données et les données légèrement décalées sur la droite.

Les apparences s'appliquent également aux groupes (voir ci-dessous) et offrent alors plus d'options qui sont détaillées dans la section d'aide consacrée aux groupes.

### Groupes

Vous pouvez considérer les groupes comme des sous-infoboxes où vous pouvez contrôler l'apparence et certaines fonctions indépendamment de l'infobox globale.

Les groupes sont surtout utiles pour rendre des portions d'infobox déroulantes. Vous pouvez ajouter l'un des attributs suivants :

* `collapse="closed"` - déroulé par défaut
* `collapse="open"` - non déroulé par défaut

### Thèmes

Les thèmes sont un ensemble de styles CSS qui s'appliquent à une infobox portable particulière (via l'attribut `theme="*nomtheme*"` de `<infobox>`). Quand vous spécifiez un thème, vous pouvez appliquer des styles à la classe `.portable-infobox.pi-theme-*nomtheme*` dans MediaWiki:Wikia.css. Ils seront différents du style par défaut, mais conserveront les éléments par défaut pour tout ce qui n'est pas spécifié dans le thème.

Exemples
* Grâce aux contributeurs du Fanz of Lucy Worsley Wiki, vous pouvez voir des exemples de personnalisation du thème sur la page The Styling of a PortableInfobox.
* Vous pouvez aussi jeter un oeil à ce thème « Tableau noir » créé par Robcamstone !

## Valeurs de sortie

Il semble évident que les valeurs sortent comme elles ont été saisies. Mais nous souhaitons aussi structurer les données grâce aux infoboxes portables. Dans les exemples ci-dessus, on considère que toutes les valeurs sont en mètres et en grammes, et la balise **`format`** ajoute ces libellés à la valeur de sortie assumant que la valeur saisie sera un simple nombre. Si on utilise l'ÉditeurVisuel, il est donc probable qu'une valeur autre qu'un simple nombre soit rejetée.

### Balises de format

Les balises de format (`<format>`) permettent de mieux contrôler comment le paramètre "data" s'affiche pour les balises `<data>`, `<title>`, et `<caption>`

### Fonctions parseur

Les fonctions parseur sont déjà appelées dans les balises `<default>`, `<format>` ou `<navigation>`, en utilisant l'expression **`{{#switch:`** (ou une expression similaire). Utilisées dans les balises "format" ou "navigation", elles ne seront pas appelées ou affichées à moins qu'il y ait une valeur indiquée pour le paramètre source du parent. Pour les utiliser par défaut, évitez le piège de faire référence au même élément dont il est le défaut. Utiliser les fonctions parseur par défaut permet d'aller piocher des informations ailleurs pour construire la valeur de sortie pour l'information manquante. Il n'y a pas besoin d'utiliser l'expression **`{{#if:`** s'il s'agit de tester le paramètre source du parent, car elles n'apparaîtraient pas dans une infobox si elles manquent, à moins que la balise `<default>` ne soit présente.

### Utiliser les fonctions Lua

Les fonctions Lua (en particulier celles à saisies multiples) peuvent être appelées partout où le wikitexte le permet, bien qu'elles soient généralement utilisées dans les balises `<format>` ou <default> avec une expression **`{{#invoke:}}`**. Elles ne seront pas appelées ou affichées à moins qu'il y ait une valeur dans le paramètre source du parent.

### DPL

"DPL" est l'acronyme de Dynamic Page List et est une extension complexe, puissante mais limitée pour les wikis qui peut générer des listes (surtout pour les tableaux) basées sur les catégories et autres métadonnées (comme les dates et heures de modifier et le dernier contributeur). Il n'est pas activé par défaut sur les wikis, vous devrez donc faire une demande pour l'utiliser.

## Orientation future

Les détails concernant le remplacement de Semantic MediaWiki (SMW) voire DynamicPageList (DPL) à l'intérieur des infoboxes, ainsi que les micro-données HTML5 intégrées, ont été évoquées lors du Community Connect 2015, mais pas en détails. La prise en charge des sections déroulantes et à onglets a aussi été évoquée.

La syntaxe préliminaire pour les extensions ou les nouvelles fonctionnalités seront également retranscrites ici quand elles seront disponibles.

## Voir aussi

* Infoboxes portables/Conseils et astuces
* Infoboxes portables/Questions fréquentes
* Infoboxes portables/Avantages
* Infoboxes portables/Bonnes pratiques

## Discussions

* Créer une documentation simplifiée (ex : la page consacrée aux bases)
* Les avantages (et les inconvénients) des infoboxes portables
* Les usages non standard (ou originaux) des infoboxes portables