Parsoid/Sjednocení analyzátoru/Struktura médií/FAQ

Co si mohu představit pod pojmem strukturovaná média?

Je-li do kódu stránky vložen nějaký obrázek (kupř. takto: [[File:Foobar.jpg|thumb|caption|alt=alt]]), vygeneruje na jeho základě parser MediaWiki HTML kód, který popisuje, jakým způsobem má webový prohlížeč na stránku tenhle obrázek vykreslit, aby se zobrazoval na vašem monitoru či mobilním zařízení správně. Tato směs HTML značek a jejich atributů, která je součástí DOM modelu, představuje strukturu, o které se teď budeme bavit.

Co by se tedy dalo na současné struktuře vylepšit?

Současná struktura HTML kódu je složena z vnořených značek div s atributy tříd, které nemají v podstatě žádný velký význam. Ty značky nejsou stejné, což s sebou přináší problémy jak při práci s databází, tak při tvorbě stylů. A současný výstup vypadá jinak, než když je generován přes jiné produkty, například přes kombinaci VisualEditor / Parsoid. Podrobněji je to popsáno v RFC. Výstup výše uvedeného kódu vypadá v současné době takto:

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

Takže čím ji chcete nahradit?

Struktura, kterou bychom chtěli použít místo toho, se skládá ze sémantických značek, což přináší výhody z hlediska přístupnosti stránek zdravotně postiženým, například těm, co čtou wikiny pomocí čteček obsahu obrazovky, kterým poskytují víc informací o tom, jaké obrázky, videa či jiné multimediální soubory jsou na stránce použity. Struktura značek tak bude jasná a přesně specifikovaná, což usnadní nejenom psaní dotazů na strukturu kódu, ale také jejich ostylování, takže nová struktura usnadní psaní CSS u všech projektů Wikimedie, kde se pracuje s obrázky. Aplikace stejné struktury, jaká byla odzkoušena pro Parsoid, tím navíc zajistí konzistenci mezi různými produkty a omezí některé duplicity, které se vyskytují ve stávajícím CSS kódu. Výstup výše uvedeného ukázkového kódu by pak vypadal asi takto:

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

A proč to děláte zrovna teď?

Střednědobým cílem týmu pro transformaci obsahu WMF je nahradit původní parser MediaWiki novým, který již má podporu pro obousměrné zpracování wikitextu do HTML5. A proto je potřeba, aby oba, jak původní parser, tak Parsoid, generovaly kompatibilní HTML kód. Parsoid už tuhle novou strukturu generuje už delší dobu a s dobrým výsledkem. Aby výměna parseru nezpůsobila velké množství problémů najednou, zavádíme tyto změny postupně, aby bylo možné se zavčas připravit na změny s tím spojené, a také na směny, které v důsledku toho teprve nastanou.

A jak se to testuje?

1. Tahle nová struktura byla odzkoušena tam, který se již Parsoid používá, jako např. u wysiwyg editoru či v rámci mobilních aplikací. Redaktoři a čtenáři, kteří s těmito produkty pracovali, upozorňovali na rozdíly ve vykreslování ve staré struktuře a na problémy, které jsme tak díky nim v průběhu let odstranili.
2. Kromě toho jsme opakovaně provedli několik testů vizuálních rozdílů, při kterých byly tisíce stránek vygenerovány jak starou, tak novou metodou strukturování kódu, a výsledek jejich zpracování porovnáván až na úrovni pixelů.
3. Ke změně už také došlo u několika wikin, včetně mediawiki.org, wikitech, it.wikipedia.org, cs.wikipedia.org, vi.wikipedia.org, en.wikivoyage.org a všech skupin 0 wikin.

Co tedy ještě zbývá dodělat?

1. Kód, který komunikuje se stránkou, jako např. JavaScript používaný u některých rozšíření, uživatelské skripty a drobné miniaplikace (gadgets) používané na stránkách, které je potřeba přizpůsobit nové struktuře, tak aby vše zůstalo (jak doufáme) kompatibilním nejenom do budoucna, ale i zpětně.
2. Také vzhledy (skiny) budou muset začít pracovat s metodou "content-media" nebo dát k dispozici své vlastní používané styly, protože třídy, které byly určeny pro práci se starou strukturu se již nebudou používat.
3. Některé wiki používají CSS styly, které mají umístěny na stránce MediaWiki:Commons.css, a ty bude nejspíš potřeba nějakým způsobem integrovat i do nové struktury.

A od kdy se to zavede?

Jak bylo uvedeno výše, na několika wikinách se to již používá. Nebudeme však v integraci pokračovat, dokud nebudou vyřešeny všechny známé problémy a dokud neprovedeme určitou úroveň auditu uživatelských skriptů a miniaplikací, abychom se ujistili, že čtenářům a editorům způsobí co nejméně problémů.

A jak je to bude s obrazovými mapami a galeriemi?

Výstup pro tyto značky rozšíření staví na struktuře médií popsané výše. Jsou specifikovány na ImageMap a Gallery. Všimněte si, že k další úpravě výstupu galerie může dojít v T268250.

A co šablony napodobující výstup parseru?

Prozatím budou soubory stylů dodávané MediaWiki i nadále obsahovat pravidla zaměřená na výstup ze starého analyzátoru. Proto by šablony, které ho napodobují, měly fungovat beze změn. Jak bylo uvedeno výše, udělali jsme rozsáhlé testování vizuálních rozdílů, abychom se ujistili, že se stránky budou po změně vykreslovat stejně jako před ní. V dlouhodobém horizontu uvažujeme o zavedení nových tříd, do kterých bychom tyto šablony převedli. Více k tomu na stránce T318433.

A co vlastníci stránek provozující své vlastní instance MediaWiki?

Existuje konfigurace MediaWiki, $wgParserEnableLegacyMediaDOM , která je aktuálně výchozí hodnotou true. Provozovatelům stránek se doporučuje, aby je deaktivovali a otestovali možné poškození. Vzhledy, které používají ResourceLoaderSkinModule konfigurovaný s "features": { "content-media": true }, obdrží styly zacílené na novou strukturu. V budoucích verzích MediaWiki bude $wgParserEnableLegacyMediaDOM výchozí na false a nakonec bude zcela odstraněn.

Otestujte svůj kód na wiki, na které jsme toto již nasadili. A pokud zjistíte nějaké problémy, které nejsou popsány níže, založte prosím nový úkol s tagem Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure), nebo se podívejte na seznam aktuálně řešených úkolů, jestli tam už náhodou něco podobného v řešení není.

Zkopírujte známé opravy do gadgetů povolených na vašich wikinách

Bylo identifikováno několik gadgetů, které je třeba aktualizovat, aby podporovaly novou strukturu médií. Opravy byly aplikovány na zdroj gadgetů, ale změny se stále musí šířit na všechny wikiny, které lokálně duplikovaly gadgety. See the task description of T297447 for the list of gadgets and wikis where the gadgets are enabled. Pokud vaše nebyly aktualizovány, udělejte to.

Zkopírujte známé opravy do MediaWiki:Common.(css|js) do svých wikin

Byla identifikována řada problémů s css a js specifických pro web, které je třeba aktualizovat, aby podporovaly strukturu nových médií. 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. Pokud vaše nebyly aktualizovány, udělejte to.

Třída "image" již není přítomna v odkazech na popis souboru

Ve výchozím nastavení bude soubor (např. [[File:Foobar.jpg]]) odkazovat na svou stránku popisu a dříve by mu byla přidělena třída s názvem 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>

Naproti tomu explicitní odkaz (např. [[File:Foobar.jpg|link=Hello]]) by nevedl k použití této třídy.

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

V nové struktuře byla třída sloužící stejnému účelu přejmenována na 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>

Selektory by se měly tam, kde je to vhodné, zaměřit na novou třídu. Viz například https://www.mediawiki.org/w/index.php?title=Snippets%2FDirect_imagelinks_to_Commons&type=revision&diff=5451422&oldid=3976429

Možnost média |class= je nyní aplikována na obal

Dříve byla možnost media třídy (např. [[File:Foobar.jpg|class=my_special_class]]) použita na prvek 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" class="my_special_class" /></a>

Třída byla přesunuta do vnějšího obalu, aby byla umožněna maximální flexibilita při výběru v rámci struktury.

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

Možnost média |border je nyní použita na obal a emitovaná třída byla přejmenována

Dříve možnost ohraničení média (např. [[File:Foobar.jpg|border]]) vedla k použití třídy thumbborder na prvek 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" class="thumbborder" /></a>

Kvůli konzistenci byla třída přesunuta do vnějšího obalu a přejmenována na mw-image-border, aby se předešlo konfliktům.

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

Možnosti horizontálního a vertikálního zarovnání nyní umísťují třídy na obal

Možnosti vodorovného zarovnání zahrnují vlevo, vpravo, na střed a žádné. Možnosti svislého zarovnání zahrnují základní, dílčí, super, horní, text nahoře, střední, dolní a text dole.

Například dříve možnost středového média (např. [[File:Foobar.jpg|center]]) vedla k použití třídy center na obalovací div.

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

To nyní vede k hodnotě s třídou 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>

Podobně možnost horního média (např. [[File:Foobar.jpg|top]]) by dříve vedla k použití atributu stylu na prvek 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>

To nyní vede k tomu, že se na obal použije třída mw-valign-top.

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