Parsoid/Parser Unification/Structure des médias/FAQ

This page is a translated version of the page Parsoid/Parser Unification/Media structure/FAQ and the translation is 100% complete.

Présentation

Qu'entend-on par structure de média ?

Lorsque des fichiers sont inclus dans une page (exemple : [[File:Foobar.jpg|thumb|caption|alt=alt]]), l'analyseur syntaxique de MediaWiki génère du code HTML qui représente ce média que votre navigateur doit rendre, c'est-à-dire les instructions pour que le navigateur affiche correctement votre écran. Le choix des balises et des attributs HTML, et la manière dont ils sont organisés pour former l'arbre du DOM, sont la structure que nous examinons.

Que peut-on améliorer dans la structure actuelle ?

La structure actuelle est composée de balises div et d'attributs de classe imbriqués, sans logique particulière. Le balisage est irrégulier, ce qui rend plus difficile l'exécution de requêtes et l'ajout de styles CSS. En outre, la sortie actuelle diffère de celle d'autres produits, comme le combo Éditeur visuel / Parsoid. Voir la Demande de commentaires pour plus de détails. La sortie de l'exemple ci-dessus ressemble actuellement à ceci :

<div class="thumb tright">
    <div class="thumbinner" style="width:242px;">
        <a href="/wiki/File:Foobar.jpg" class="image"><img alt="alt" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="thumbimage" /></a>
        <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Foobar.jpg" class="internal" title="Enlarge"></a></div>caption</div>
    </div>
</div>

Par quoi voulons-nous le remplacer ?

La structure par laquelle nous la remplaçons est composée d'un balisage sémantique, qui offrira des avantages d'accessibilité, comme donner à ceux qui lisent les wikis à l'aide de lecteurs d'écran plus d'informations sur la façon dont les images, les vidéos et les autres médias sont utilisés dans le contenu. Le balisage sera plus régulier et spécifié, ce qui rendra plus facile et plus efficace l'exécution des requêtes et la gestion des styles CSS. La nouvelle structure facilitera ainsi l'écriture de CSS lié aux médias sur les wikis Wikimedia. De plus, l'utilisation de la même structure qui a été testée dans Parsoid assurera la cohérence entre les produits et réduira certaines redondances CSS. La sortie de l'exemple ci-dessus ressemblera à ceci :

<figure class="mw-default-size" typeof="mw:File/Thumb">
    <a href="/wiki/File:Foobar.jpg" class="mw-file-description">
        <img alt="alt" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" />
    </a>
    <figcaption>caption</figcaption>
</figure>

Pourquoi le faire maintenant ?

Un objectif à moyen terme de l'Équipe de transformation de contenu de la WMF est de remplacer l'ancien analyseur syntaxique de MediaWiki par Parsoid, un analyseur bidirectionnel de wikicode vers HTML5. Pour y parvenir, l'ancien analyseur et Parsoid doivent produire du code HTML compatible. Parsoid génère cette nouvelle structure de média depuis quelques temps et avec de bons résultats. Afin de réduire les perturbations liées à un changement des analyseurs en une seule fois, nous n'en déployons qu'un seul élément en vue des modifications à venir.

Comment cela a-t-il été testé ?

La nouvelle structure a été testée dans Parsoid qui est utilisé dans plusieurs produits actifs comme l'Éditeur visuel et les applications pour mobiles. Au fur et à mesure que les éditeurs et les lecteurs utilisaient ces produits, ils ont signalé les différences de rendu avec l'ancienne structure et les problèmes avec la nouvelle structure, que nous avons corrigés au fil des ans.
De plus, nous avons effectué plusieurs séries de tests de différence visuelle dans lesquels des milliers de pages sont rendues avec l'ancienne et la nouvelle structure et le rendu est comparé pixel par pixel.
Nous avons également déjà déployé ces modifications sur plusieurs wikis, y compris mediawiki.org, wikitech, it.wikipedia.org, cs.wikipedia.org, vi.wikipedia.org, en.wikivoyage.org, et tous les wikis du groupe 0.

Que reste-t-il à faire ?

Le code qui interagit avec la page, comme JavaScript pour les extensions, les scripts utilisateur et les gadgets devra être ajusté à la nouvelle structure, si possible d'une manière compatible en amont et en aval.
Les habillages devront demander la fonctionnalité « content-media » ou fournir leur propre style, car les classes référençant l'ancienne structure ne s'appliqueront plus.
Le CSS défini dans MediaWiki:Commons.css de certains wikis devra être porté vers la nouvelle structure.

Quand allez-vous déployer cela ?

Comme dit plus haut, ce changement est déjà en ligne sur plusieurs wikis. Cependant, nous n'irons pas plus loin tant que les problèmes connus ne seront pas résolus. Nous avons effectué des audits des scripts utilisateur et des gadgets pour nous assurer que nous causons le moins de perturbations possibles aux lecteurs et aux éditeurs.

Qu'en est-il d'imagemap et des galeries ?

Les sorties de ces balises d'extension s'appuient sur la structure média décrite ci-dessus. Elles sont spécifiées respectivement dans ImageMap et Gallery. Notez qu'un affinage supplémentaire de la sortie des galeries pourrait avoir lieu avec T268250.

Qu'en est-il des modèles qui reproduisent la sortie de l'analyseur syntaxique ?

Pour le moment, les feuilles de style livrées par MediaWiki continueront à contenir les règles qui ciblent l'ancienne sortie de l'analyseur. Par conséquent, les modèles qui la reproduisent doivent continuer à fonctionner de la même façon. Comme mentionné ci-dessus, nous avons effectué des tests approfondis de différence visuelle pour nous assurer que les pages continuent à s’afficher de la même manière avant et après ces modifications. À plus long terme, nous envisageons d'introduire de nouvelles classes vers lesquelles ces modèles seront migrés. Voir T318433 pour plus de détails.

Qu’en est-il des propriétaires de sites qui exploitent leurs propres instances de MediaWiki ?

Une configuration MediaWiki existe, $wgParserEnableLegacyMediaDOM , qui est actuellement true par défaut. Les exploitants du site sont encouragés à le désactiver et à vérifier s’il n’y a pas d'éventuelles ruptures. Les habillages qui utilisent ResourceLoaderSkinModule configurés avec "features": { "content-media": true } recevront des styles ciblant la nouvelle structure. Dans les futures versions de MediaWiki, $wgParserEnableLegacyMediaDOM sera par défaut false et, éventuellement, sera entièrement supprimé.

Comment aider

Testez votre code sur les wikis sur lesquels le changement est déployé. Si vous rencontrez des problèmes qui ne sont pas couverts ci-dessous, veuillez créer une tâche phabricator avec le tag Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure), ou consulter la liste des tâches ouvertes.

Copiez les correctifs connus vers les gadgets activés sur vos wikis

Un certain nombre de gadgets ont été identifiés comme devant être mis à jour pour prendre en charge la nouvelle structure des médias. Des correctifs ont été appliqués à la source des gadgets, mais les modifications doivent encore se propager à tous les wikis qui ont dupliqué les gadgets localement. See the task description of T297447 for the list of gadgets and wikis where the gadgets are enabled. Si le vôtre n'a pas été mis à jour, veuillez le faire.

Copiez les correctifs connus de MediaWiki:Common.(css|js) sur vos wikis

Un certain nombre de problèmes avec les fichiers css et js spécifiques au site ont été identifiés comme devant être mis à jour pour prendre en charge la nouvelle structure de support. See the task description of T271114 for the list of known issues common to multiple wikis and the wikis that may need to be updated. Si le vôtre n’a pas été mis à jour, veuillez le faire.

A quoi les contributeurs doivent-ils faire attention ?

La classe image n'apparaît plus dans les liens de description des fichiers

Par défaut, un fichier (par exemple [[File:Foobar.jpg]]) sera lié à sa page de description et recevra auparavant une classe nommée image.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a>

En revanche, un lien explicite (par exemple [[File:Foobar.jpg|link=Hello]]) n’entraînerait pas l’application de cette classe.

<a href="/wiki/Hello" title="Hello"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a>

Dans la nouvelle structure, la classe ayant le même objectif a été renommée mw-file-description.

<span class="mw-default-size" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

Les sélecteurs doivent cibler la nouvelle classe, où nécessaire. Par exemple, dans https://www.mediawiki.org/w/index.php?title=Snippets%2FDirect_imagelinks_to_Commons&type=revision&diff=5451422&oldid=3976429

L'option de média `|class=` est maintenant appliquée au conteneur

Auparavant, l’option class media (par exemple [[File:Foobar.jpg|class=my_special_class]]) était appliquée à l’élément media.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="my_special_class" /></a>

La classe a été déplacée vers le conteneur (wrapper) le plus externe afin de permettre le plus de flexibilité possible lors de la sélection à l'intérieur de la structure.

<span class="mw-default-size my_special_class" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

L'option de média `|border` est maintenant appliquée au conteneur et la classe émise a été renommée

Auparavant, l’option border de media (par exemple [[File:Foobar.jpg|border]]) entraînait l’application de la classe thumbborder à l’élément media.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="thumbborder" /></a>

Par cohérence, la classe a été déplacée vers le conteneur le plus externe et a été renommée en mw-image-border pour éviter les conflits.

<span class="mw-default-size mw-image-border" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

Les options d'alignement horizontal et vertical placent maintenant les classes sur le conteneur

Les options d’alignement horizontal incluent left, right, center, and none pour respectivement : gauche, droite, centre et aucun. Les options d’alignement vertical incluent baseline, sub, super, top, text-top, middle, bottom et text-bottom.

Par exemple, auparavant, l’option center media (par exemple [[File:Foobar.jpg|center]]) entraînait l’application de la classe center à un div enveloppant.

<div class="center"><div class="floatnone"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a></div></div>

Cela se traduit maintenant par une figure avec la classe mw-halign-center.

<figure class="mw-default-size mw-halign-center" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a><figcaption></figcaption></figure>

De même, l'option de placement d'un média en haut (par exemple, [[File:Foobar.jpg|top]]) entraînait auparavant l'application d'un attribut de style à l'élément média.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" style="vertical-align: top" /></a>

Il en résulte que la classe mw-valign-top est maintenant appliquée au conteneur.

<span class="mw-default-size mw-valign-top" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>