Les infoboxes portables sont créées pour gérer l'élément unique le plus courant des pages wiki. Il existe de nombreuses façons différentes de visualiser les informations de Fandom. Actuellement, les principales sont les ordinateurs de bureau/portables, les tablettes et les smartphones. Mais il existe d'autres moyens, et Fandom n'est pas toujours très joli sur tous ces supports. Avez-vous déjà essayé de naviguer dans une communauté Fandom à l'aide du navigateur Steam ? Ou sur votre Nintendo Switch ? Ou même sur une Apple Watch ? Ces diverses options de présentation, et d'autres qui pourraient voir le jour à l'avenir, ont des besoins très différents.

La façon dont les infoboxes sont créées sur les ordinateurs de bureau (mélangeant HTML et CSS avec du wikitexte) peut fonctionner pour les ordinateurs de bureau, mais elle échoue souvent dans d'autres environnements utilisateur. Les choses peuvent sembler cassées ou mal placées parce que le contenu ne peut pas être séparé de la présentation. Les infoboxes portables aident à résoudre ce problème en présentant le contenu dans un format optimisé pour la plateforme d'affichage (comme l'habillage mobile). Le même contenu peut être le moteur de toute nouvelle expérience sans avoir à le réécrire. Fandom s'efforce de faire prospérer votre contenu sur un nombre toujours plus grand de dispositifs.

Les infoboxes s'affichent plus rapidement[modifier le wikicode]

Les infoboxes portables (PI, pour Portable Infoboxes) ayant été conçues pour être comprises par MediaWiki comme des composants natifs de MediaWiki, la vitesse d'affichage de ces infoboxes sur une page est à supérieure en comparaison à celles écrites en wikitexte. Les infobox portables sont plus rapides à être dessinées, en particulier lorsque les modèles en wikitexte sont faits avec des modèles imbriqués et/ou Lua.

Le processus de rendu de MediaWiki

Le processus où le wikitexte devient du HTML (pour que les navigateurs puissent le comprendre) prend du temps. Les composants natifs comme les infoboxes portables peuvent produire directement des types spéciaux de HTML qui ne peuvent pas être réalisés de manière cohérente ou sûre dans le wikitexte, et les modèles et tableaux en wikitexte prennent plus de temps de traitement pour être développés en HTML. Plus important encore, la plateforme Fandom comprend où elle peut faire des changements dans le HTML pour avoir la meilleure expérience sur chaque plateforme.

À titre de comparaison, examinons les données de deux pages à peu près similaires. Dead Cells Wiki utilise des infoboxes portables, Enter the Gungeon Wiki n'en utilise pas. En utilisant l'outil Page Speed Insights de Google pour comparer les deux pages (« Rusty Sword » et « Rusty Sidearm »"), nous pouvons constater des différences de vitesse significatives. Étant donné que les deux pages que nous comparons sont relativement identiques en termes de taille et de composition, deux chiffres sont significatifs pour la comparaison : le « Time to Interactive » (TTI) et le « Total Blocking Time » (TBT). La façon dont les pages se chargent pour Google ressemble à ceci :

La chronologie du rendu HTML

Google mesure le TTI comme le temps entre le moment où une page semble être interactive et le moment où elle le devient effectivement. Le TBT mesure la réactivité de la charge, et est une mesure de sévérité pour le TTI. En comparant nos deux pages, nous constatons ce qui suit :

Dead Cells (Infoboxes portable) Enter the Gungeon (Infoboxes non-portable)
Time to Interactive = 28,6s Time to Interactive = 42,7s
Total Blocking Time = 3,620 ms Total Blocking Time = 7,510 ms

Ici, nous pouvons voir que le TTI et le TBT sont presque deux fois plus élevés sur la page de Enter the Gungeon que sur celle de Dead Cells. Cela est dû en grande partie à l'efficacité du chargement des infoboxes portables. Les infoboxes portables ne sont pas la seule raison pour laquelle la page de Dead Cells est plus rapide, mais elles y contribuent largement.

Des tests similaires pour une comparaison équivalente montrent que deux pages identiques (à l'exception de la technique d'infobox utilisée) sur le même wiki peuvent être beaucoup plus rapides.

Page avec infobox portable Page avec infobox non-portable
Time to Interactive = 36,7s Time to Interactive = 80,8s
Total Blocking Time = 5,810 ms Total Blocking Time = 66,700 ms
Largest Contentful Paint = 7,0s Largest Contentful Paint = 12,3s

Vous pouvez reproduire vous-même des tests similaires avec des pages de contenu identique à l'aide d'un certain nombre d'outils (notamment PageSpeed Insights), mais nous considérons l'efficacité des infobox portables comme un facteur décisif dans notre évolution avec le web.

De meilleurs blocs de construction pour de meilleurs produits[modifier le wikicode]

Les infoboxes portables créent une expérience utilisateur cohérente au sein de diverses communautés, et permettent à Fandom de construire des produits avec un niveau de qualité et d'intégration plus élevé. Nous pouvons construire des produits qui anticipent les PI, ce qui n'est pas le cas des wikitables (qui ont plus d'une application et d'un affichage visuel). Cela nous permet de développer et de déployer rapidement des améliorations et des fonctionnalités de contenu et d'habillage d'une manière qui ne peut être réalisée avec les éléments en wikitexte.

Exemple de placement d'une bannière publicitaire

Exemple d'avantage direct : les infoboxes portables sont reconnues comme du contenu de premier ordre sur l'expérience mobile de Fandom. Parce que nous pouvons identifier et créer des infoboxes portables de manière cohérente, nous pouvons les placer bien en vue au-dessus des publicités. Par contre, comme nous ne pouvons pas identifier les wikitables de manière cohérente, les publicités sont placées au-dessus du contenu et de l'en-tête, ce qui offre une moins bonne expérience à l'utilisateur final.

Les PI permettent également l'extensibilité. Lorsque les communautés adoptent le format standard de PI, il devient possible pour d'autres programmes de mieux comprendre l'information, et c'est là que des choses intéressantes peuvent commencer à se produire. Par exemple, les infoboxes portables permettent de formuler des recommandations plus spécifiques et plus pertinentes sur ce que les visiteurs peuvent lire ensuite, ce qui contribue à les garder sur votre wiki (et sur le réseau Fandom). Par exemple, si un visiteur lit un article sur l'acteur Idris Elba sur la base de données Marvel, il verra des suggestions de lecture sur d'autres films Marvel dans lesquels Idris a joué, ou d'autres histoires qui incluent le personnage de Heimdall ; il y aura des recommandations supplémentaires pour des articles sur Dunderpedia (The Office Wiki), Luther Wiki ou Memory Alpha (qui ont tous des articles sur Idris et/ou les personnages qu'il a joués). Une structure de données commune permet aux systèmes de recommandation de trouver beaucoup plus facilement les « choses liées à Idris Elba » sur Fandom, et offre une meilleure expérience utilisateur.

Avantages des moteurs de recherche[modifier le wikicode]

Les moteurs de recherche explorent la structure des infoboxes portables de manière cohérente et immédiate, ce qui permet d'améliorer considérablement la compréhension du référencement et d'obtenir des résultats plus élevés en général, ce qui est une conséquence naturelle. Les données structurées à l'intérieur d'une PI sont évidentes et clairement étiquetées pour Google — ce qui n'est pas vrai avec les infoboxes créées sous forme wikitable, car elles ont un vocabulaire incohérent.

Résultat dans le SERP pour Prapor

Résultat dans le SERP pour Prapor

Alors que le résultat de Gamepedia pour Prapor peut être le premier résultat d'une page de recherche, le contenu de l'infobox (wikitexte) n'est pas aussi facile à digérer pour Google. Ce manque de confiance se traduit par une apparition moins importante des données présentées avec le classement, et peut rendre difficile la présentation de ces données par Google à l'utilisateur final.

Résultat dans le SERP pour Max Caulfield

Résultat dans le SERP pour Max Caulfield

Résultat du Knowledge Graph pour Max Caulfield

Résultat du Knowledge Graph pour Max Caulfield

D'un autre côté, le résultat Fandom pour Max Caulfield s'appuie sur les infoboxes portables, la structure des sous-pages et les liens contextuels normalisés (avec la classification des modèles) pour offrir une image plus complète à Google. Il en résulte des points d'entrée plus importants à découvrir pour les lecteurs, et la page apparaît dans le Knowledge Graph de Google.

Dans l'ensemble, plus l'image que Google a d'une page est complète, plus elle a de chances d'être bien classée. Bien qu'il soit difficile de suivre les changements de classement à cette échelle, surtout lorsque les pages sont déjà classées dans la position la plus élevée possible, lorsque les données de l'infobox portable alimentent le Knowledge Graph, elles ont plus de chances d'être ouvertes et lues. Les wikis Fandom ont rarement connu ce placement proéminent lorsque les infoboxes portables n'étaient pas utilisées. Pour faire simple : les pages sans infobox portable amènent Google à dire « nous pensons que c'est important », alors que les infobox portables amènent généralement Google à dire « nous savons que c'est important, et voici les données que nous savons que vous voulez ».

Facile pour les nouveaux contributeurs, suffisamment puissant pour les experts[modifier le wikicode]

Les infoboxes simples sont construites par défaut à l'aide d'une interface graphique conviviale, plutôt que de forcer les utilisateurs à apprendre le code immédiatement. Cela permet un développement et un déploiement rapides des modèles, et réduit les obstacles à la croissance pour les contributeurs peu habitués à créer des modèles. Il est rarement nécessaire de modifier l'intégration des modèles dans les articles pour s'adapter aux infoboxes en wikitexte qui migrent vers les infoboxes portables. Les infoboxes portables peuvent utiliser le code TemplateData pour faciliter la saisie aussi facilement que les modèles en wikitexte. Il n'est pas nécessaire d'utiliser le Portable Infobox Builder, car les modèles PI peuvent également être construits en mode « source ».

La syntaxe XML simplifiée des infoboxes portables est plus facile à comprendre que les wikitables complexes pour la plupart des utilisateurs novices à modérés, car les wikitables ont tendance à avoir une courbe d'apprentissage élevée et un obstacle à franchir. Les utilisateurs expérimentés ont également tendance à reconnaître la flexibilité inhérente à la syntaxe, car en général, toute infobox réalisée avec des wikitables peut être réalisée avec des PI tout aussi facilement (sinon plus). D'autres éléments, comme les « sidebars » ou les « navboxes verticales », peuvent être réalisés avec la même syntaxe. La balise enfant <navigation> facilite les liens entre les articles, en faisant une méthode portable pour remplacer les onglets de page, les icônes Era, et autres éléments de navigation ad-hoc. La fonction <panel> offre une expérience de tabulation native et adaptée aux mobiles pour les lignes et les groupes de données à l'intérieur des infobox, éliminant ainsi la nécessité de la plupart des solutions de contournement.

Les sélecteurs CSS des infoboxes portables étant normalisés, le codage CSS lié aux PI est plus reconnaissable. Grâce à un CSS bien conçu, tout nouveau modèle est automatiquement stylisé selon les souhaits de la communauté, sans qu'il soit nécessaire de reproduire le codage de style en ligne ou de reproduire les classes dans plusieurs modèles. Les fonctions de thème et de type permettent de personnaliser le style des infoboxes en totalité et des éléments individuels qu'elles contiennent de manière centralisée et sécurisée, quel que soit le type d'objet documenté par l'infobox.

tl;pl[modifier le wikicode]

Les infoboxes portables permettent de créer des infoboxes plus rapides et plus souples. Elles fonctionnent mieux sur tous les appareils et renforcent le référencement d'un article. Elles sont faciles à créer et plus faciles à maintenir en comparaison avec celles écrites en wikitexte.


Exemple de wikitable :

{| class="infobox" style="font-size:90%; width:23em"
! colspan="2" class="infoboxname" | {{{nom|{{PAGENAME}}}}}
|-
| colspan="2" style="text-align:center;" 
| {{#if: {{{image|}}} 
   | [[Fichier:{{{image}}}|275px|{{{name|{{PAGENAME}}}}}]] 
   | [[Catégorie:Infoboxes sans image]]
  }}
|-
{{#if: {{{rareté|}}} 
 | {{!}} class="infoboxlabel" {{!}} Rareté {{!!}} 
  {{#switch:{{{rareté}}}
   | Commun={{Rareté|Commun}}
   | Non_commun={{Rareté|Non commun}}
   | Rare={{Rareté|Rare}}
   | Ultra Rare={{Rareté|Ultra Rare}}
  }}
}}
|-
{{#if: {{{type|}}} | {{!}} class="infoboxlabel" {{!}} Type {{!!}} [[{{{type}}}]] }}
|-
{{#if: {{{icône|}}} | {{!}} class="infoboxlabel" {{!}} Icône {{!!}} {{{icône}}} }}
|-
{{#if: {{{desc|}}} | ! class="infoboxdescription" colspan="2" {{!}} Description
{{!}}-
{{!}} colspan="2" {{!}} {{{desc}}} }}
|-
! class="infoboxdescription" colspan="2" {{!}} Niveaux de modération
|-
! ← Précédent !! Suivant →
|-
| style="text-align:center;" | {{{précédent|}}} || style="text-align:center;" | {{{suivant|}}}
|}

Infobox portable équivalente :

<infobox type="mod">
  <title source="nom">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image" />
  <data source="rareté">
    <label>Rareté</label>
    <format>{{#switch:{{{rareté}}}
     | Common={{Rareté|Commun}}
     | Non_commun={{Rareté|Non commun}}
     | Rare={{Rareté|Rare}}
     | Ultra Rare={{Rareté|Ultra Rare}}
    }}</format>
  </data>
  <data source="type">
    <label>Type</label>
    <format>[[{{{type}}}]]</format>
  </data>
  <data source="icône"><label>Icône</label></data>
  <group row-items="1">
    <data source="desc"><label>Description</label></data>
  </group>
  <group row-items="2">
    <header>Niveaux de modération</header>
    <data source="précédent"><label>← Précédent</label></data>
    <data source="suivant"><label>Suivant →</label></data>
  </group>
</infobox>{{#if:{{{image|}}}||[[Catégorie:Infoboxes sans image]]}}
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.