Vés al contingut

Viquiprojecte:Adaptacions per al Mode Fosc

De la Viquipèdia, l'enciclopèdia lliure

Objectiu

[modifica]

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.[1] L'experiència dels lectors pot ser dolenta si els editors no comproven l'accessibilitat de les pàgines en mode fosc.

Proves

[modifica]
  • 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

[modifica]

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.
  • Tota definició background ha de tenir també la definició color pel text, no es pot assumir quina serà la combinació final en altres plataformes. Vegeu Especial:LintErrors/night-mode-unaware-background-color amb els casos detectats i l'ajuda corresponent que inclou una eina per remarcar amb vora puntejada vermella l'element que no ho compleix.
  • 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

[modifica]

Loren ipsum

Tipus de canvis identificats i solució a aplicar

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

Llista de tasques

[modifica]

Portada

[modifica]
  • 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

[modifica]

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

[modifica]

Imatges

[modifica]

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

[modifica]

Articles amb codi en el cos

[modifica]
  • 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

[modifica]

Inventari d'Infotaules

[modifica]
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. Fet Fet!

Aconseguir invertir de negre a blanc els dibuixos generats per l'extensió hiero. Veure Apply_skin-invert_class_with_Hiero_extension

Fet Fet!
{{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;

modificat a {{infobox building}}; pendent passar a producció
{{Infotaula pel·lícula}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula esdeveniment}} Adaptada res pendent
{{Infotaula llibre}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{infotaula obra artística}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula composició}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula obra musical}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula publicació periòdica}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula personatge}}
{{Infotaula objecte astronòmic}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula arts escèniques}} class=skin-invert en logo infotaula implantar templatestyles, internacionalitzar
{{Infotaula lloc web}}
{{Infotaula asteroide}}
{{Infotaula accident geogràfic extraterrestre}} Adaptada Treballa amb templatestyle:Infobox physical geography. Si cal alguna peculiaritat, s'haurà de fer una de pròpia
{{Infotaula vol espacial}}
{{Infotaula esport}}
{{Infotaula temporada club esportiu}}
{{Infotaula roca}}
{{Infotaula compost químic}}
{{Infotaula fòssil}}
{{Infotaula mineral}}
{{Infotaula àlbum}}
{{Infotaula cançó}} class=skin-invert en logo infotaula implantar templatestyles
{{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}} class=skin-invert en logo infotaula implantar templatestyles
{{Infotaula sèrie de videojocs}}
{{Infotaula motocicleta}}
{{Infotaula vaixell}} class=skin-invert en logo infotaula implantar templatestyles
{{Infotaula automòbil}}
{{Infotaula aeronau}}
{{Infotaula vehicle espacial}} class=skin-invert en logo infotaula implantar templatestyles
{{infotaula arma}}
{{Infotaula càmera}}
{{Infotaula eina}} class=skin-invert en logo infotaula implantar templatestyles
{{Infotaula família lingüística}}
{{Infotaula grup humà}}
{{Infotaula nom}}
{{Infotaula ocupació}} class=skin-invert en logo infotaula implantar templatestyles
{{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}} Adaptada.

arreglar styles (dins infotaula)

Treballar amb templatestyles
{{Infotaula compost químic}} Adaptada.

arreglar styles (dins infotaula)

Treballar amb templatestyles
{{Infotaula sèrie de televisió}} Adaptada.

arreglar styles (dins infotaula)

Treballar amb templatestyles
{{Infotaula vial urbà}} class=skin-invert en logo infotaula implantar templatestyles
{{Infotaula estació de ferrocarril}}
{{Infotaula carretera}}
{{Infotaula grafema}}
{{Infotaula sistema d'escriptura}} class=skin-invert en logo infotaula implantar templatestyles
{{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}} Eliminat background en style de llista de bàndols i comandants.

Aplicat inverter en logo infotaula.

sense templatestyles.

Funcionament correcte

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.

Modificat tots els casos excepte "startlist". (petició)

Notes

[modifica]
  1. Segons dades analítiques de Wikimedia, el 60% dels accessos són des dels sistemes operatius Android i iOS.