Viquiprojecte:Adaptacions per al Mode Fosc

Objectiu

Identificar i aplicar els canvis necessaris per implantar a la Viquipèdia el funcionament en mode fosc dels continguts.

Context: el mode fosc és cada vegada més popular en dispositius mòbils. Hi ha navegadors que ofereixen el canvi automàtic segons l'ambient detectat. Actualment està disponible per a usuaris registrats. La majoria d'editors usen la versió escriptori, mentre que més de la meitat dels lectors usen la versió mòbil. L'experiència dels lectors pot ser dolenta si els editors no comproven l'accessibilitat de les pàgines en mode fosc.

Proves

• En versió mòbil (tant escriptori com dispositiu mòbil), en menú/configuració comproveu que teniu activat "advanced mode" i seleccioneu color/dark.
• En versió escriptori, activeu en menú_personal/beta l'opció "Accessibilitat en la lectura (Vector 2022)". Sota de la barra d'eines apareixerà un nou menú on podeu seleccionar el color "clar" o "fosc".

Recomanacions generals

Pàgina de referència de Mediawiki: mw:Recommendations for night mode compatibility on Wikimedia wikis.

• Qualsevol combinació de colors de text i fons, en mode clar o en mode fosc, ha de tenir un contrast mínim. La recomanació és 4.5:1 per a text normal i 3:1 per a traç gruixut (negreta no necessàriament negre). Vegeu les eines a Mediawiki, la comprovació periòdica de pàgines més vistes de la Viquipèdia que no passen el test de contrast en mode clar i en mode fosc, i Especial:LintErrors/night-mode-unaware-background-color (beta).
• Evitar definicions explícites de color en els articles. No es pot assumir que el que un veu ho vegi tothom igual. Per assegurar-ho, els colors haurien d'estar definits en plantilles amb els estils en el corresponent templatestyles.css i comprovant el test de contrast amb diferents temes.
• Sempre que sigui possible, useu colors predefinits. Vegeu Codex i en especial Color design tokens.
• Sempre que sigui possible, useu class d'àmbit interwiki, per exemple wikitable, infobox, ambox. Per a aquestes class el MediaWiki ja ofereix un disseny particular en mode fosc.

Origen i dades del canvi

Loren ipsum

Tipus de canvis identificats i solució a aplicar

Canvi	Descripció	Acció
Text en color
CSS background dins el text

Llista de tasques

Portada

• Les descripcions dels projectes germans no passen el test de contrast. 1
• El text en el carrusel d'imatges no es pot llegir en versió escriptori fosc. En versió mòbil no es mostra. De moment no es fa res. 2

Revisar infotaules

Veure seguiment canvis a Inventari d'Infotaules.

• Mòdul:Infobox, pendent d'actualitzar amb templatestyles.
  • A continuació, caldrà traslladar class generals d'styles de plantilla a l'styles del mòdul.
  • Al final, mirar si es poden eliminar de MediaWiki:Common.css.
• El color d'enllaç a Wikidata no passava el test de contrast. Eliminat en Mòdul:Wikidades, provat en styles de plantilla, pendent de definir en Mòdul:Infobox/styles.css.

Revisar plantilles d'avisos

• Mòdul:Message box, actualitzat i creats els corresponents templatestyles. 1
  • Pendent de migració de plantilles que no usen el mòdul: {{Metacaixa d'avís article}}, ...
  • Al final, caldrà netejar les definicions mbox de MediaWiki:Common.css.
• Pendent: Adaptar l'avís d'enllaç a una pàgina de desambiguació: MediaWiki:Gadget-bkl-check.js.
• Mòdul:Side box, actualitzat amb templatestyles 1. Plantilles afectades: {{Caixa lateral}}, {{Sister}}, {{Commonscat}}, etc.

Imatges

Les imatges vectorials (SVG i algunes PNG) amb traç monocolor fosc (normalment negre) sobre fons transparent no es veuen bé, o gens, amb el fons fosc, per exemple les signatures com Fitxer:Al Capone Signature.svg. La solució és afegir la class skin-invert que inverteix el color del traç segons el color de fons transparent. La sintaxi és [[Fitxer:Al Capone Signature.svg|class=skin-invert]].

• Canviat en icones d'infotaules revisades.1
• Plantilla:xib-trans 1
• Mòdul:Dimensions 1
• Pendent de detectar altres casos.

Les imatges vectorials (SVG i algunes PNG) amb diversos colors sobre fons transparent poden no veure's bé perquè estaven pensades per anar sobre un fons blanc. En algunes infotaules que les recuperen de WD, per aconseguir una millor visualització en imatges de Logotips (P154) o Plànols (P3311) en mode fosc, cal fer una inversió de color (cas Tour de França) o posar-li un fons que permeti una bona visualització (cas Premier League). Amb el paràmetre v_<propietat>_fons=invert s'aconsegueix el primer cas, i amb v_<propietat>_fons=white s'aplica un fons a la imatge; (veure casos amb aquest tractament previst a llista d'infotaules).

Altres imatges amb format diferent de SVG no s'alteren al passar a mode fosc. Això no provoca problemes amb fotos o altres imatges on el 100% és contingut visual. Però les icones, gràfics o signatures amb un fons (blanc, habitualment) s'haurien de convertir a svg amb fons transparent per poder-les invertir en mode fosc amb la funcionalitat skin-invertit, explicat més amunt.

• Llista de signatures en articles VP que són imatges ≠ svg que s'haurien de migrar. Abans de dibuixar la versió svg, comproveu que no existeixi ja a Commons un .svg o bé, que es tracta d'un .png amb fons transparent que també funcionen. Tant si en feu una nova imatge com si la bescanvieu per altra, caldrà canviar el valor de la P109 a l'item de la persona.

Contrast Colors

• {{Indicació d'enllaç}} (model styles.css) 1
• {{Indicació d'idioma}} (model styles.css) 1
• {{Citació}} i {{columnes}}: eliminat background-color: transparent 1
• {{Ús de la plantilla}} (model styles.css) 1

Articles amb codi en el cos

• Articles amb bgcolor en el cos de l'article: [1]
  • A eliminar els que són del tipus "transparent", "white", "#EFEFEF", "#ffffff" o similars, no aporten res en mode clar i no s'inverteix en fosc.
  • On sigui possible, migrar a class="wikitable".

Altres

• Class alternance no està adaptada al mode fosc. Copiada de fr.wiki, comprovar amb fr:MediaWiki:Common.css.

Inventari d'Infotaules

Infotaula	Descripció	Pendent
{{Infotaula persona}}	Adaptada la nova versió que està en procés de construcció: {{Infobox person}}. Algunes icones d'entitats que il·lustren el nom del càrrec no tenen bon contrast perquè fan servir colors de poc contrast i són molt estilitzades (text en imatge, línies primes,..).	Identificar i corregir línies en blanc dins la infotaula.(?) Aconseguir invertir de negre a blanc els dibuixos generats per l'extensió hiero. Veure Apply_skin-invert_class_with_Hiero_extension Fet! Tasca a Phabricator T366384
{{Infotaula eleccions}}	Adaptada. Han canviat algunes icones i colors de resultats. El color del partit pot no visualitzar-se correctament, segon el contrast que produeixi.	no es mostra la barra amb el color del partit abans dels resultats. falta implementar header amb doble class
Infotaula competició esportiva	Adaptada. Afegit paràmetre v_p154_invert= per poder forçar un "invert" o un fons de color [white] que ressalti el dibuix en mode fosc.	Cercar solució per detectar via WD com canviar el fons/inversió imatge. Canvis a "proves competició esportiva". Manca passar-ho a producció
{{Infotaula geografia política}}	Adaptada	En visualització mòbil s'observen línies entre cada concepte (clar i fosc), què en la presentació PC no s'aprecia.
{{infotaula organització}}	Adaptada	No funciona el collapsible d'Esdeveniment significatiu; però abans tampoc ho feia.
{{Infotaula indret}}	Modificat bodystyle: width:24em;molts canvis derivats d'implantació itemgroup per les icones Adaptació quadrats de colors per pistes esquí||modificat a {{infobox physical geography}}; pendent passar a producció
{{Heritage protection/P1435}}	Es manté el cromatisme en mode clar i es farà servir la conversió automàtica a gris de les vores de caixa en mode fosc (Tema:Y7trfiu25yx53ttq)	res pendent
{{Infotaula ésser viu}}	Adaptada. class=invert a la icona d'infotaula.	pendent crear styles.css
{{infotaula edifici}}	Adaptada. Afegits paràmetres v_p154_fons= i v_p3311_fons= per poder forçar un fons de color [white] o un "invert" que resalti el dibuix en mode fosc. Modificat bodystyle: width:24em;	res pendent
{{Infotaula pel·lícula}}
{{Infotaula esdeveniment}}
{{Infotaula llibre}}
{{infotaula obra artística}}
{{Infotaula composició}}
{{Infotaula obra musical}}
{{Infotaula publicació periòdica}}
{{Infotaula personatge}}
{{Infotaula objecte astronòmic}}
{{Infotaula arts escèniques}}
{{Infotaula lloc web}}
{{Infotaula asteroide}}
{{Infotaula accident geogràfic extraterrestre}}
{{Infotaula vol espacial}}
{{Infotaula esport}}
{{Infotaula temporada club esportiu}}
{{Infotaula roca}}
{{Infotaula compost químic}}
{{Infotaula fòssil}}
{{Infotaula mineral}}
{{Infotaula àlbum}}
{{Infotaula cançó}}
{{Infotaula instrument musical}}
{{Infotaula gènere musical}}
{{Infotaula llenguatge programació}}
{{Infotaula format de fitxer}}
{{Infotaula programari}}
{{Infotaula domini de primer nivell}}
{{Infotaula equipament informàtic}}
{{Infotaula sèrie de videojocs}}
{{Infotaula motocicleta}}
{{Infotaula vaixell}}
{{Infotaula automòbil}}
{{Infotaula aeronau}}
{{Infotaula vehicle espacial}}
{{infotaula arma}}
{{Infotaula càmera}}
{{Infotaula eina}}
{{Infotaula família lingüística}}
{{Infotaula grup humà}}
{{Infotaula nom}}
{{Infotaula ocupació}}
{{Infotaula orde}}
{{Infotaula nigul}}
{{Infotaula càrrec}}
{{Infotaula títol nobiliari}}
{{Infotaula bandera}}
{{Infotaula escut}}
{{Infotaula color}}
{{infotaula beguda}}
{{Infotaula unitat militar}}
{{Infotaula joc}}
{{Infotaula document}}
{{Infotaula menjar}}
{{Infotaula nombre}}
{{Infotaula regió vinícola}}
{{Infotaula formatge}}
{{Infotaula cavall}}
{{Infotaula proteïna}}
{{Infotaula enzim}}
{{Infotaula raça de gat}}
{{Infotaula malaltia}}
{{Infotaula intervenció}}
{{Infotaula raça de gos}}
{{Infotaula fàrmac}}
{{Infotaula anatomia/core}}
{{Infotaula vial urbà}}
{{Infotaula estació de ferrocarril}}
{{Infotaula carretera}}
{{Infotaula grafema}}
{{Infotaula sistema d'escriptura}}
{{Infotaula llengua}}
{{Infotaula lletra tipogràfica}}
{{Infotaula sèrie de televisió}}
{{Infotaula programa audiovisual}}
{{Infotaula magnitud física}}
{{Infotaula unitat}}
{{Infotaula isòtop}}
{{Infotaula partícula}}
{{Infotaula polítop}}
{{Infotaula economia país}}
{{Infotaula moneda}}
{{Infotaula conflicte militar}}
Mòdul:Cycling race	Passat requeriment als autors. És tracta d'un mòdul comú, mantingut centralitzadament amb una còpia a cada WP usuari. Podem fer els canvis a la nostra versió, si ho considerem urgent, però m'estimo més no fer un fork.