Vés al contingut

Viquiprojecte Discussió:Adaptacions per al Mode Fosc

El contingut de la pàgina no s'admet en altres llengües.

Sobre aquest tauler

Vriullop (discussiócontribucions)

L'article Barbora Krejčíková havia aparegut entre els 50 més visitats amb més de 200 errors de contrast tant en mode clar com en fosc. Els he eliminat dràsticament. Ara la qüestió és si es poden recuperar d'alguna manera. Ping a l'autor principal Kxont.

  • És un cas comú en articles de tenistes?
  • Quines files de les taules cal remarcar? No he acabat d'entendre què indiquen els colors.

Caldrà definir-ho amb plantilles però primer cal saber l'abast i la funció que han de tenir. Com que imagino que serà extensible a qualsevol article, he provat amb Usuari:Vriullop/proves/Plantilla:Style bg que hauria de tenir com a paràmetre una sèrie de colors bàsics contrastats o amb alternatives en fosc: blau/verd/gris/etc.

Ping KRLS, si aquesta plantilla acceptés també colors hexadecimals incloent en:Template:Ensure AA contrast ratio ens pot servir per substituir d'entrada tots els background en taules d'articles i tenir categoritzats els errors de contrast. Abans caldrà pensar-ho bé amb les necessitats reals.

KRLS (discussiócontribucions)

Després d'esporgar força articles i analitzar l'ús que en fa la gent dels colors a les taules, crec que la tendència hauria de ser tenir una Viquipèdia menys acolorida (crec que és la tendència global), donat que pràcticament mai es contextualitzen els colors ni tenen una raó de ser. Per exemple, he esporgat pràcticament tots els articles d'anys, perquè usaven colors innecessaris.

La idea que teníem de generar plantilles específiques per àmbits (com passa amb els articles de ciclisme) no és viable, perquè l'ús de taules acolorides són de temàtiques molt diverses. Potser l'àmbit més estès i que podria tenir sentit, serien les classificacions esportives on hi ha pòdiums/medalles. En aquest cas, es podria utilitzar la plantilla que proposes, si afegim "or", "plata" i "bronze". En aquest cas, es podria crear una plantilla específica per llistar guanyadors, però el cost/benefici de migrar tot el contingut existent no el veig clar. A més a més, atletisme no funciona igual que la fórmula 1 o el futbol.

També s'utilitzen els colors a les nominacions de premis. Per exemple, les nominacions i guanyadors usen el vermell i el verd. En aquest cas, no entenc que encara no hi hagi una plantilla específica a escala global. Si més no, a ca.wiki tenim tendència a copiar les taules d'en.wiki, cosa que dificultaria que localment s'usés una plantilla específica per aquests casos.

Un altre ús seria en els resultats electorals. Crec que aquí s'haurà d'usar la teva solució, donat que hi ha molta variabilitat de colors.

Vriullop (discussiócontribucions)

Cal distingir el que són colors informatius, com el característic d'un partit polític, del que són colors arbitraris. En el cas d'informatius no hi ha gaire marge, solen ser predefinits. En el cas dels tenistes, com l'article inicial, són arbitraris, en aquest cas és un color per torneig que veig innecessari. Ara bé, això és difícil de modificar en general pels articles d'esports i per la pràctica en altres wikis. Hi ha dues coses que es poden fer de moment:

Resposta a «Colors de fons en taules d'articles»
Amadalvarez (discussiócontribucions)

@Vriullop Hola. Quan anava a posar-me amb el tema de les extra-línies d'algunes infotaules, m'adono que tots els conceptes (label+data) surten separats per una línia. No sembla que sigui dels styles.css (de les que tenen: organització, geografia política, persona, edifici), ja que també surt a les que no he tocat encara, per tant dedueixo que és un default del mòdul:infobox.

En clar no destaca (sembla que és igual que el background del label), però subtilment separa conceptes. Ara bé en fosc, és massa visible.

Sí bé queda molt carregat en conceptes que només tenen una línia, si no hi hagués cap separador, potser seria pitjor la lectura.(*) A més, no es diferencien de les línies que vàrem posar a top i bottom dels headers (i que potser hauriem de canviar).

(*) A l'anglesa no tenen línies ni entre línies, ni als headers, ni tan sols al title.

Seguint l'estil del mode clar, seria possible que el gris d'aquestes línies fos molt més fosc per fer-lo més subtil ?.

Merci

Vriullop (discussiócontribucions)

El problema és que hi ha realment línies en blanc. Mirant el codi surt <tr colspan="2"><th></th></tr>. Com que és una fila d'infotaula doncs hi afegeix la vora. N'he trobat dues: Especial:Diff/33606945. El rowformat genera un format de taula, però li faltava tancar un tr abans d'obrir-ne un altre. A més, tot plegat cal que vagi entre <table>...</table> cosa que provocava un altre salt al buit. Compara-ho amb la nova infobox person on encara cal corregir-ho. És estrany que no ho detectin els errors de lint, ja deu estar fora del parser wiki.

Encara queden altres línies buides, però cada cas pot ser diferent. Un dels problemes és el data407 de {{Infobox person/formatglobal}} amb un <hr/> que no sé com tractar.

Amadalvarez (discussiócontribucions)

Disculpa, no m'he explicat. Les línies extres, sé que les he d'arreglar.

El que comento és que tenim les infotaules definides (no sé ben bé on) amb un border (molt clar) que ajuda visualment a diferenciar les línies sense que sembli un paper ratllat. Quan passem a fosc, el sistema ho inverteix i el que era molt clar és torna molt fosc i llavors queda massa atapeït si els continguts són d'una línia.

Vriullop (discussiócontribucions)

Les dues coses estan relacionades perquè en mòbil es fa evident on són les files en blanc.

Si ho he entès bé, et refereixes a cada fila de label+data. En clar veig el label amb un fons discret i un separador blanc amb el label següent. No tinc clar si és un border o un margin. Amb vector fosc això desapareix. Amb mòbil apareix una línia igual que les dels headers. En anglès i en clar, el fons només és als headers, no als labels. Amb vector fosc desapareix i es barreja tot. Amb mòbil és com aquí, amb línies en cada fila.

En el mòdul no veig que s'hi afegeixi cap border, ni margin ni padding. A Mediawiki:Common.css hi ha definida una class bordered per a infobox, però només s'usa a {{Infotaula element químic}} i manualment en algun lloc com Wii#Wii Mini. No sembla que sigui això.

No puc mirar més fins d'aquí a dues setmanes. De moment serveix per detectar línies en blanc. Si vols, pots provar afegir-hi l'estil "border: 0;", almenys per detectar si té efecte en algun punt concret. De totes maneres, no sembla fàcil redissenyar el model que han fet per versió mòbil.

Vriullop (discussiócontribucions)

Amador, per si serveix... fent proves m'he topat amb línies buides usant formatting=table. En el primer intent era evident. Hi he aplicat la solució habitual amb separador=</tr><tr> en lloc del valor per defecte <br />. Aparentment queda solucionat, però en el codi font hi continua havent dos tr buits, un inicial i un final. La solució ha estat usar separator=LF (line feed), opció que ja tenia oblidada i amb el que resulta un rowformat més clar.

Vriullop (discussiócontribucions)

Res, ara no sé com ho he mirat, però no hi havia cap línia buida. No canvia res, només és estilístic.

Amadalvarez (discussiócontribucions)

Merci, @Vriullop. El separator=LF l'he fet servir algun cop a canvi del <br />, però no ho havia fet amb el </tr><tr> que es fa servir molt. Sembla interessant per reduir riscos.

Les extra línies de la infotaula persona -que eren els més complexes d'enganxar- crec que ja estan tots resolts.

Ara estic entretingut amb els resultats de JO i m'ha fet descobrir algun bug de la {{Infotaula competició esportiva}} i, si no m'erro, també ha quedat neta de línies extres.

Quan acabi aquesta setmana, tornaré a la revisió sistemàtica d'infotaules.

Bona calor !!

Resposta a «Línies separació infotaules»
KRLS (discussiócontribucions)

M'estic barallant amb la {{Metacaixa d'avís sistema}}, però no me'n estic ensortint. Aramateix, estem usant una Metacaixa a Plantilla:Ús de la plantilla/peu que marca un background específic. La meva idea havia estat utilitzar la "class=template-documentation" a la plantilla, perquè utilitzés el background específic de l'styless de Ús de la plantilla, però té més prioritat el fmbox que usa la Metacaixa. Una opció seria definir a l'styless #documentation-meta-data.template-documentation, però crec que no seria l'opció més neta. Algú em dona un cop de mà?

Vriullop (discussiócontribucions)

No cal la metacaixa. És una segona caixa i el format ha de ser el mateix que la primera {{Ús de la plantilla/caixa}} amb div i la mateixa class: Especial:Diff/33679725. Només canvia a font italic. He modificat el padding superior i inferior perquè a l'styles.css és 1em, massa gran per la caixa del peu, però potser ara és massa petit. El margin entre les dues caixes ara és una mica més gran, però no sembla important.

KRLS (discussiócontribucions)

Primer de tot, gràcies. Aquesta opció l'havia valorat, però creia que només posposaríem el problema que existeix en aquestes plantilles que et permet modificar el color de lletra i text. Una opció seria afegir un camp estiltextblack o similar.

Vriullop (discussiócontribucions)

La solució és migrar a Mòdul:Documentation que no és operatiu. Portem anys de retard i costa entendre què és tot el que ha canviat, però en anglès té més opcions i la col·lecció de subplantilles és massa complexa per afegir-hi nous paràmetres.

Resposta a «Metacaixa d'avís sistema»

Indicació d'enllaç i d'idioma

3
Resum per KRLS

Resolt

Vriullop (discussiócontribucions)

@KRLS: La {{indicació d'enllaç}} té un contrast 4.47 en clar i 4.13 en fosc. Com que el text és font-weight: bold, supera el mínim de 3:1. Quin comprovador de contrast fas servir?, o potser em perdo alguna cosa.

Per la d'idioma, prova {{Indicació d'idioma/proves}} feta amb {{Indicació d'idioma/styles.css}}. En clar el text gris passa el contrast i en fosc ho he deixat blanc sobre negre. Hi pots jugar amb altres combinacions i, si et va bé, actualitza tu mateix la plantilla protegida.

KRLS (discussiócontribucions)

Primer de tot, dir que em puc estar equivocant, tanmateix, l'error em saltava fa un parell de dies a un dels nostres articles. Jo estic utilitzant l'extensió "WCAG Contrast checker" del Firefox (crec que és la que vas proposar) i em marca que és un error el contrast, perquè és un small size. En aquest web diu que en textos petits s'ha de fer 4.5:1 mínim i en text normal 3:1, i si esculls els colors marcats, diu que no supera els estàndards WCAG Standard.

A partir d'ara, hem de definir styles.css per les plantilles com has fet a Indicació d'idioma? En el cas dels articles que tenen taules "custom" què fem?

Si em guieu una mica puc donar un cop de mà a reduir errors fàcils.

Vriullop (discussiócontribucions)

És la mateixa extensió que tinc. No he acabat d'entendre com afecta la mida i la negreta. Ho hauré de revisar.

Hi ha tres opcions:

  1. Usar colors predefinits a https://doc.wikimedia.org/codex/latest/design-tokens/color.html. La intenció és que aquests colors s'adaptin automàticament al mode fosc. Crec que encara hi estan treballant i no funcionen tots.
  2. Canviar la tonalitat perquè ho accepti tant en clar com en fosc. Serveix la mateixa eina en línia que dius per veure immediatament el contrast resultant i intercanviant el background entre blanc i negre o en concret #fff i #101418. Això és el que he fet en la portada, on continua pendent Plantilla Discussió:Portada600k/germans. Sembla que ningú s'hi atreveix perquè ho he barrejat amb uns reanomenaments.
  3. Definir colors diferents per clar i fosc. En aquest cas cal l'styles.css seguint el model d'indicació d'idioma.

Pels colors definits manualment en articles, d'entrada està desaconsellat. Preferiblement haurien de ser plantilles, però no és fàcil convèncer la gent i hauríem de tenir un catàleg de plantilles per a taules acolorides. De moment es pot intentar amb els punts 1 i 2.

Amadalvarez (discussiócontribucions)

Em passa només a mí, o ha deixat de mostrar-me l'opció de seleccionar mode al desplegable d'aparença de la barra superior ?.

per veure-ho en fosc, haig d'editar i pre-visualitzar.

Gràcies,

Vriullop (discussiócontribucions)

A mi em funciona. Si el tenies en la barra superior amb una icona d'unes ulleres, vol dir que abans l'havies amagat. Comprova que no sigui sota la barra lateral d'eines. Si no, a veure si tens algun error en la consola del navegador.

Amadalvarez (discussiócontribucions)

doncs tampoc no està a la barra lateral.

Lo de la consola diu:

"Failed to load resource: intake-analytics.wik...eventshasty=true:1

net::ERR_BLOCKED_BY_CLIENT"

Vriullop (discussiócontribucions)

analytics.wikimedia.org? No sé d'on surt això, però sembla un accés general. Primer, buida la memòria cau: VP:MCAU. Segon, prova en un altre projecte on no tinguis configuracions locals, per exemple a ca.wiktionary, activant el mode fosc hauria de funcionar. Llavors, buida el teu common.js, el vector-2022,js, anota tots els ginys que tens activats i desactiva'ls. Torna a activar-ho tot un per un, començant pel mode fosc, a veure si trobes qui és el culpable.

Amadalvarez (discussiócontribucions)

Buidada CAU

Prova WT: funciona

commos.js i vector-2022 buits

tots els ginys desactivats (i no els he tornat a activar)

Reiniciat equip: no funciona

canvi de navegador: no funciona

Uff

Vriullop (discussiócontribucions)

Doncs arribem al de punt de no pot ser! Que et funcioni al wiktionary i no a wikipedia... Has desactivat també els ginys beta?

Amadalvarez (discussiócontribucions)

només tenia el translate. Desactivat i continua igual.

Amadalvarez (discussiócontribucions)

@Vriullop He tancat la sessió WP. Sense usuari també hauria d'estar disponible la selecció, oi?.

Quan dic "no funciona" vull dir que desplega les ulleres només amb les opcions de mida texte i amplada.

Amadalvarez (discussiócontribucions)

@Vriullop nova dada. A ENwiki funciona !

També he provat a ENwiki que, sense usuari, no dona opció a seleccionar i surt en mode clar.

Vriullop (discussiócontribucions)

El giny beta "accessibilitat en la lectura (vector 2022)" només està disponible per usuaris registrats, de moment.

Si només surten les opcions de text i d'amplada vol dir que no està activat el giny beta. Ho pots comprovar allà on funcioni, si el desactives la situació és la que expliques. També passa si canvies d'aparença al vector vell i després tornes al vector nou, aquest giny queda desactivat automàticament.

No se m'acuden més coses. Encara surt l'error en la consola?

Amadalvarez (discussiócontribucions)

Just a la fusta !.

he canviat diversos cops de vector 2010 a 2022. No sabia que l'apagava.

De fet, quan ahir em vas dir lo dels gins beta, vaig respondre que només tenia el translate, sense adonar-me que no tenia activat "accessibilitat lectura".

Vaig a refer tot el que tinc desmuntat.

Moltes gràcies !!

Vriullop (discussiócontribucions)

Si només vols provar amb el vector vell, és més pràctic afegir a l'url: ?useskin=vector

Resposta a «Canvi de mode a la icona d'aparença»

Casos d'infotaules amb continguts de colors també en mode fosc

4
Amadalvarez (discussiócontribucions)

He creat una sèrie de situacions on cal mostrar colors específics dins les infotaules, i, tal com estaven fins ara, al mostrar-les en fosc, desapareixen.

Hi ha 3 casos, un resolt, un altre amb opcions i ens cal decidir com ho volem i un altre que no ho ser fer funcionar.

@Vriullop, li pots fer un cop d'ull ?.

Amb el resultat que quedi, ho traslladaré a aquesta pàgina del viquiprojecte.

Gràcies,

Vriullop (discussiócontribucions)
  • Cas patrimoni: per mi està bé mantenir les vores en clar i que surtin gris en fosc. És un color secundari, més decoratiu que informatiu, i en fosc resulta massa cridaner.
  • Cas pistes d'esquí: està bé amb els colors recomanats i amb vora grisa.
  • Cas partits polítics: funciona amb class notheme, l'havies posat fora de les cometes de class.
Amadalvarez (discussiócontribucions)

Cas patrimoni. Dius de canviar colors actuals per vora grisa (o similar) arreu?. O bé, mantenir el funcionament actual amb colors pel mode clar i no fer res en mode fosc i sortirà una vora grisa?.

Cas pistes, implantat a infobox physical geography, pendent de pujar a producció.

Cas eleccions, implantat.

Vriullop (discussiócontribucions)

En el cas patrimonial és deixar-ho com està, amb colors en mode clar i en gris en mode fosc. No és un tema important i no cal molestar-se per això. Ho puc dir com a autor d'aquestes caixes. En principi és decoratiu per diferenciar administracions i en la pràctica en tenim poques fora d'Espanya. No es poden confondre diferents països, la diferència entre BCIN i BIC és subtil i només queda diferenciat el Patrimoni de la Humanitat. No es perd informació.

Resposta a «Casos d'infotaules amb continguts de colors també en mode fosc»
Amadalvarez (discussiócontribucions)

@Vriullop Les Imatge del logotip (P154), no sempre se sap si és millor invertir-les o no. Fins ara seguia el criteri de NO invertir (banderes, escuts) però hi ha logos en colors impossibles d'encertar.

Mirant WD he trobat el qualificador Esquema de color (P8798) per indicar si la imatge s'ha de fer servir sobre fons clar o fosc, una pràctica habitual entre els dissenyadors que ja saben que no tot serà paper de carta en blanc i acostumen a fer dues versions. Ex.:Sky Blue FC (Q1447181)

Ara el que em falta saber és quin és el fons que està activat per triar una o altra imatge.

Has trobat algun lloc que en parli?

Vriullop (discussiócontribucions)

Doncs no ho sé. És una bona qüestió a plantejar a la discussió de Mediawiki, tot i que sembla que no tindrà solució fàcil. Segurament FC Cincinnati (Q20855983) és un millor exemple perquè hi ha més colors. Aquí no serveix cap invert ni cap intent d'adaptació de colors que distorsioni el disseny.

Per cert, ho he provat directament en versió mòbil en un article. L'editor és més limitat, però abans de desar sempre fa una previsualització mantenint el fons fosc.

Amadalvarez (discussiócontribucions)
Amadalvarez (discussiócontribucions)

@Vriullop. Ja m'han respost, però no entenc prou com fer-ho. Li pots fer un cop d'ull i m'ho expliques?.

gràcies.

Vriullop (discussiócontribucions)

El que diu és com forçar una combinació de colors determinada per text en mode fosc. Això és el que fa Plantilla:Infobox person/styles.css amb el "link to Wikidata". Res a veure amb els fitxers.

Amadalvarez (discussiócontribucions)

Gràcies per la teva intervenció. A veure que diuen.

Amadalvarez (discussiócontribucions)

Sembla que no tenen resposta de manual i la improvisació els porta a solucions impossibles. Ho deixo còrrer.

Vriullop (discussiócontribucions)

La conclusió és que encara que sabéssim el tema usat doncs no hi podríem fer res si és automàtic. En aquest cas el control el té el navegador i canvia quan vol sense recarregar la pàgina, cosa habitual amb un mòbil. Ve a ser el mateix que fem nosaltres quan provem amb el menú de color, encara que és més improbable per part d'un usuari extern. Per tant, cal carregar els dos fitxers i passar el control al CSS que decideixi quin dels dos fitxers amaga. Ho he provat a {{sandbox}} amb Plantilla:Sandbox/styles.css.

Amadalvarez (discussiócontribucions)

Coses que he fet:

  • He oficialitzat Plantilla:Dark light content/styles.css, copiada de la sandbox, eliminant el prefix "test-" de les classes. Si et sembla podríem fer servir aquesta styles de repositori de totes les coses comunes que vagin sortint sobre fosc-clar.
  • He fet una prova bàsica a special:permalink/33597449 fent servir WD. Funciona bé el switching quan hi ha les dues opcions informades a WD (FC Cincinnati). Però veient els continguts actuals molts només tenen un valor (First Woman) i caldria complicar el codi per actuar diferent en cada combinació (dos valors, un clar, un fosc o sense qualificador)

De moment ho tinc identificat i ho deixo aparcat per avançar en adaptar infotaules que queden una colla.


A la documentació de la plantilla de FRwiki esmenta la class=skin-invert-svg, però l'he provat i no em funciona. Saps on estan les classes del sistema del mode fosc?

La vull fer servir per simplificar un codi que he posat per tractar un paràmetre manual per forçar "a decisió de l'editor" el background d'una imatge amb colors i transparent que no es veu bé ni normal ni invertint-la.

Gràcies

Vriullop (discussiócontribucions)

La class skin-invert-svg no ha estat anunciada encara: phab:T365102. Li estan donant voltes sobre què cal invertir: només el fitxer, les etiquetes de text en svg, també el caption ... Per cert, cercant d'on sortia he topat amb les notes de l'usuari que poden ser útils: fr:User:Escargot bleu/Mode sombre.

Caldria una plantilla "Fitxers WD fons clar-fosc" per aplicar-ho només quan trobi un fitxer amb el qualificador de fons fosc i un segon fitxer sense aquest qualificador. En cas contrari, la sintaxi normal amb class=skin-invert, o la que sigui en el futur, que pot dependre de si hi ha caption.

Resposta a «Com saber en quin mode estem?»
Amadalvarez (discussiócontribucions)

@Vriullop Mira com queda el nou format que he fet servir com a headerstyle a infobox person. Ex.:https://ca.wikipedia.org/w/index.php?oldid=33543625

És menys intrusiu en mode clar i ajuda a enquadrar en mode fosc.

Si observes com surt "obres notables", ja tinc la resposta al dubte que tenies quan vas instal·lar la class a la Collapsible conditional list, quan preguntaves si enlloc de infobox_headerstyle volia posar infobox-style. Doncs sí, per tenir menys línies, és millor la infobox.style. Però ho he canviat (línia 436) i no fa cas. Que he fet malament ?

Vriullop (discussiócontribucions)

Perfecte, es veu clar, o fosc segons com es miri :-)

El camp d'obres notables el veig bé. Jo crec que anaves bé, potser algun problema de refrescar pàgina o bé alguna col·lisió entre class. L'opció era format header o format label. Li he deixat només infobox-label. L'únic que hi trobo, en mode clar, és el fons més llarg que els altres labels. Potser és millor eliminar la definició with:40% i que surti al 100%.

Ahir al wikt em vaig trobar amb problemes semblants aparentment inexplicables. Vaig arribar a la conclusió que fins que no ho traslladem tot, els estils del mòdul i del mediawiki:common.css a un infobox/styles.css, ens podem trobar col·lisions empipadores.

Vriullop (discussiócontribucions)

Per cert, m'he trobat que el mode fosc és diferent en Vector i en Minerva. El que més interessa és en versió mòbil. L'encapçalament d'obres notables no sortia bé. Sembla que no interpreta bé un infobox-label que és dins d'un infobox-data, així que hi he afegit una definició per mode fosc per a aquest cas perquè l'hereti com un infobox-label.

Per altra banda, tenim un problema vell. Els headers buits surten buits en mòbil amb el seu border.

Amadalvarez (discussiócontribucions)

No entenc lo dels headers buits. No han d'haver. Estava mirant l'article del puigdemont actual i surten línies buides a la llista de càrrecs, però això és amb la versió vigent.

Les proves s'han de fer amb infobox person que és on estic fent tots els canvis del mode fosc, perquè és una versió més avançada i, a més, la vigent no treballa amb styles, o sigui que pot passar qualsevol cosa.

Vriullop (discussiócontribucions)

Ho veig a Puigdemont en versió mòbil tant amb la actual infotaula actual com amb la nova. Potser no són headers, no he comprovat on surten.

Amadalvarez (discussiócontribucions)

ja ho revisaré.

Amadalvarez (discussiócontribucions)

@Vriullop

Continuo amb els headers. Amb la infobox person hem fet el que hem volgut, perquè està en proves i ningú se sent agredit perquè no ho veu, però si eliminem els colors en la versió clar, no s'entendrà perquè cal eliminar-los si fins ara els tenim.

He canviat seguint el teu exemple i li he posat 2 classes: primer la dels border top i bottom pel mode fosc i després el que estem fent servir actualment pel mode clar. Així, res canvia visualment si consulten en clar, com sempre

Pots veure-ho als exemples que hi ha a {{infobox person}}. Això sí, el tema d'adaptar icones i backgrounds que s'han de veure tant en clar com en fosc (exemple {{Infotaula competició esportiva/ús}} ), han de ser de colors iguals per les dues situacions.

Què et sembla ?

Així que em responguis em posaré a crear styles per totes les infotaules (només tenen les grans) i a adaptar-les totes.

Vriullop (discussiócontribucions)

Em sembla bé.

He unificat les dues class, no calia separar-les, feien el mateix: en clar surt tal com està definit, en Vector fosc només canvia el background, en Minerva fosc no en fa cas perquè té una definició pròpia de infobox-header.

Caldria diferenciar les class genèriques de les class particulars d'una infobox. Són genèriques les afegides pel mòdul: infobox-header, infobox-label, infobox-full-data, infobox-data. També ho són les que s'haurien de definir igual en totes les infotaules. Són particulars les que només s'usen en un tipus d'infotaula. Per clarificar, les particulars haurien de tenir un nom que identifiqui la plantilla on s'usen, per exemple ib-person-pharaon-titlestyle. Al final, les genèriques s'hauran de traslladar al templatestyles del mòdul. Abans he d'actualitzar-lo perquè ho accepti.

Amadalvarez (discussiócontribucions)

Entesos amb la fusió, gràcies.

A veure si em puc situar sobre el model a seguir:

  • Què és Minerva ?. L'app?
  • Les genèriques del mòdul les tinc clar. Sempre havia entès que els paràmetres específics que se li aportaven via styles o amb un div/span s'afegien o anul·laven els del mòdul si ja existia.
  • El problema (fins ara) era que t'havies de saber quins valors o classes aplicava el mòdul. Entenc que amb els styles.css serà més fàcil saber que fan per defecte.
  • Les particulars d'una infotaula les estic fent quasi-clòniques per evitar dubtar i haver de mirar contínuament els seus valors quan es fa servir. De fet, normalment només canvia el background.
  • Quan alguna infotaula requereix una altra combinació de valors, per exemple perquè cal forçar una negreta o un alineament diferent per un ús atípic d'un datann per allotjar altra mena de contingut, llavors li hi poso noms particulars. L'única cosa que no feia era indicar el nom de la infotaula usuaria
  • Tinc dubtes de quin efecte té que a les classes les anomenem infobox_abcabc en tot aquest joc de generals/particulars.
  • Per cert, parlant de particularitats. M'he trobat a infotaula organització alguns div style exclusivament per canviar l'alineament. Entenc que per un ús com aquest no cal amoïnar-se, perquè no tenen efecte amb el tema, oi?.

He afegit una llista d'infotaules a revisar amb canvis fets i pendents al viquiprojecte. Si vols afegir coses a fer, tindrem un ToDo estructurat.

Seguim,

Vriullop (discussiócontribucions)
  • Minerva és l'aparença, l'equivalent a Vector per a mòbil, aka Mobile, però tècnicament per fer un enllaç és https://ca.wikipedia.org/wiki/Tei%C3%A0?useskin=minerva, en fosc https://ca.wikipedia.org/wiki/Tei%C3%A0?useskin=minerva&minervanightmode=1
  • Sí, trobo que és massa obscur quines són les class que utilitza el mòdul i què es pot canviar amb paràmetres. Espero que al final sigui més clar i es pugui documentar millor.
  • Els noms com infobox_abcabc no tenen cap efecte. Es passen via paràmetres, headerclass = infobox_headerclass, per tant és qualsevol nom. El mòdul usa dues class, infobox-header més la proporcionada args.headerclass. El que deia és usar noms que les identifiquin millor: "ib-person-header" si és específic d'aquella infotaula, o "infobox-header-abcabc" o bé "infobox-abcabc-header" en cas d'una variant genèrica. Si després hi ha cap problema i cal analitzar el resultat en codi font, llavors es llegeix millor.
  • Per a casos senzills on no afecta el mode fosc, cap problema en mantenir-ho. Fins i tot si és més general, per a aquests casos està previst el paquet de paràmetres xxxstyle en lloc de xxxclass, són estils addicionals als que puguin tenir les class.
Amadalvarez (discussiócontribucions)

Disculpa que reiteri sobre el punt 3 (noms específics): Entenc el que dius, però tal com ho estic enfocant les styles.css fets per les infotaules, tot el seu contingut és específic per aquella infotaula.

Les col·lecció de classes que es maneguen són:

  1. les "comunes" (body, above, title, header, subheader, label, below) bàsicament igual (excepte el BG) entre diferents uinfotaules
  2. específiques: si alguna de les comunes té una variació: A) amb algun valor extra com negreta o alineament, o B) és un style que es farà servir amb un div/span i no està vinculat al mòdul. En aquest segon cas ja tenen nom específic per aquest styles.css i no té perquè existir un homònim a d'altres styles.css.

Llavors, quan dius d'identificar-les amb alguna referència a la infotaula no sé si et refereixes a aquest al grup 2 que són totalment específiques, o també a les del primer grup que no són multiuso perquè pertanyen a una infotaula.

Dit d'una altra forma, quan més amunt esmentes: "Són particulars les que només s'usen en un tipus d'infotaula.", comportaria que tan les del grup 1, com del 2 haurien de tenir prefix/suffix d'infotaula. És això ?.

No tinc inconvenient, però em produïa confusió pel fet que no estic generant cap classe que sigui 100% igual a més d'un style.css

Vriullop (discussiócontribucions)

Estic pensant en dues coses:

  • El mòdul també ha de tenir el seu styles.css i hem de saber què hi traslladarem allà. D'entrada és més fàcil treballar cada infotaula i, de totes maneres, encara no està habilitat el templatestyles al mòdul. Al final, si una class té la mateixa definició en la majoria d'infotaules, serà millor traslladar-la, no tenir-la repetida en diferents llocs, potser amb diferents noms, i poder modificar-la més fàcilment. Caldrà identificar-les.
  • Si miro el codi font d'una pàgina, puc reconèixer les class "vector-xxx", "mw-xxx", aquestes ja sé d'on surten. Una class "infobox-xxx" he de suposar que és del mòdul infobox, o potser d'una infotaula si té un nom més específic. Una class "tsingle", d'on deu sortir? He d'anar a la caixa de cerca per veure qui la defineix i com.

Vull dir que hem de seguir alguna convenció de noms i ara és el moment. A mw:Manual:Coding conventions/CSS recomanen tot minúscules, separacions amb guionet i amb un prefix. No m'encaparro en cap convenció, tu mateix, situa't fora de les infotaules i pensa com reconstruir i rastrejar tota l'estructura.

Si em preguntes, les del grup 1 i 2A són candidates a migració al mòdul quedant en local una variant pel background, la negreta o l'alineament. Les del grup 2B són les específiques, no haurien de tenir cap nom tipus "tsingle" que no expressi res, ni tampoc un "infobox-" que sembli una cosa genèrica.

Amadalvarez (discussiócontribucions)

@Vriullop Com deia abans, no tinc problema en que fixem una nomenclatura. Potser el meu baix domini d'aquest món em fa actuar de forma poc eficient i duplico coses que no calien.

Per què he fet una styles.css quasi igual per cada infotaula ?. perquè abans els valors CSS estaven escampats entre el defecte del mòdul, les definicions d'amplada, tipus de lletra i alineaments al començament de la crida al mòdul des de cada pàgina i els colors centralitzats en la {{colors infotaules}}. Era difícil mantenir una mínima harmonització i una bogeria fer un canvi en infotaules migrades a d'altres WP segons els desitjos dels receptors. Solució: extreure qualsevol variable del codi i situar-lo en un altre element (styles.css, modul:itemgroup, ..) que ho puguin gestionar ells sense haver de tocar el codi.

I quan vulguin canviar alguna cosa de les que el mòdul té per defecte, entenc que el lloc correcte és la seva styles.css (la de la infotaula específica de la WP concreta). Tenir una style.css per totes les infotaules pot ser una mesura eficient, però no crec que sigui una idea pràctica si volem aconseguir que siguin autònoms per fer els [pocs] canvis que vulguin. D'altra banda, penso que tenir a cada style.css d'infotaules la col·lecció de totes les classes que poden canviar per alterar/complementar el std. del mòdul, facilita la comprensió per a comunitats que tenen pocs o nuls coneixements tècnics.

I, encara que algunes siguin iguals, ningú diu que més endavant no vulguin configurar cada tipus de línia de forma diferent.

També hem de pensar com anomenar les classes de plantilles que, no són cridades només per altres plantilles, sinó utilitzades per editors. Per exemple, com la collapsible list que, no té sentit que tingui styles.css pròpia, i que el seu paràmetre "titleclass", ja ho diu tot. Però si algú el vol informar, d'on treurà la class que li és menester?. Farem una "styles.css repositori" ?. Si més no serviria per facilitar la manca de coneixements de CSS cada cop més generalitzat.

Sobre els noms, prefereixo que el prefix sigui la procedència i darrere, la seva funcionalitat.

Jo vaig fent infotaules com fins ara i després ja reanomenaré el que calgui.

Vriullop (discussiócontribucions)

És el procés normal, primer traslladar de cada plantilla al seu styles, després ja veurem què és configurable i què convé mantenir uniforme.

Sobre {{Collapsible conditional list}} té pocs estils propis, només algun alineament de text com a valor per defecte de paràmetres. No val la pena crear el seu styles. Hi ha dos tipus de paràmetres complementaris, com titleclass i titlestyle. El titleclass ja ve definit en la plantilla d'origen. El titlestyle és el que pot utilitzar un usuari.

En les infotaules ve a ser el mateix: la class infobox-header és pròpia del mòdul i de Minerva, el paràmetre headerclass és definit en la plantilla d'origen, el paràmetre headerstyle és definit per l'usuari en qualsevol altre ús o en plantilles més simples sense class en styles.css.

Amadalvarez (discussiócontribucions)

Perfecte. Per ara, tot el que faig és molt homogeni, per tant, quan tinguem clar com "optimitzar/esporgar", no serà un munt de casuístiques.

Crec que la munió de plantilles que, com la collapsible conditional list, permeten formatar sense ser un expert en CSS / HTML, haurien de comportar-se de forma similar: tenen uns valors per defecte i tot és canviable aportat-li una classe (que podria estar en un hipotètic catàleg de classes comunes) o un style= que requeriria uns coneixements bàsics de CSS.

Per cert, aprofitant que estic de neteja, que és millor fer servir dins altres plantilles (per claredat, consum, versatilitat,..): plantilles tipus {{Align}}, {{Small}}, o el seu codi ?

Merci

Vriullop (discussiócontribucions)

Aquestes són plantilles de drecera per a usuaris. Dins d'altres plantilles és millor el seu codi, més clar, més versàtil i t'estalvies dependències. Si ja tens un styles.css potser en una class.

Resposta a «header infotaules»
Cap més tema anterior