Tema de Viquipèdia:La taverna/Propostes

Durant la darrera viquitrobada es va parlar de la necessitat de renovar la portada actual. Aproximadament un 40% de les visites que rep provenen de la versió mòbil, i la portada actual no està adaptada per aquesta plataforma; a més, és força vella.

Basant-me en els comentaris de la Viquitrobada 2017, he fet una proposta de portada. Per defecte no es veu bé, cal que copieu el codi d'Usuari:Townie/vector.css al vostre vector.css i el codi d'Usuari:Townie/vector.js al vostre vector.js (en principi no hi hauria d'haver cap problema per afegir-lo al Common, però prefereixo que abans s'ho miri algú i si de cas ho faci un administrador de la interfície)

Els canvis més destacats: nou carousel per on passen diverses seccions, desapareixen curiositats i altres llengües (molt desactualitzat), més imatges i menys text per la secció d'actualitat, i apareix la secció "Els més llegits". Aquí teniu la versió sense carousel.

Què en penseu? Què hi canviaríeu?

ei, doncs a mi m'agrada molt! No l'he provat amb el mòbil però al navegador del sobretaula es veu collonuda.

Voto a favor :)

A mi també m'agrada! Però tinc un comentari: quan s'utilitza l'skin Timeless, en el qual l'espai de contingut de la pàgina és menys ample, la columna dreta (actualitat i defuncions) és una mica massa estreta. En la portada actual, això no és un problema perquè cada una de les columnes ocupa la meitat de la pàgina, però en la proposta, això podria ser problemàtic si finalment Timeless es convertís en l'skin per defecte (no sé quin és el pla d'implementació, però suposo que acabarà sent-ho).

A mi em sembla força bé també. Falten alguns petits tocs de disseny però endavant!

@Unapersona: He canviat un parell de mides (min-width i max-width); què tal ara?

@Yuanga: Dispara! Per això he obert el tema a la taverna :)

Les capes contenidores (divs) del dos darrers blocs (actualitat i defuncions) no tenen padding, és a dir que el text es mostra enganxat al contorn de la capsa. Pot ser?

Arreglat, em penso. El padding no es veia bé en la versió per a mòbils, ara ja hauria de funcionar. Moltes gràcies!

Sí, ara sí es veu, però no està al mateix nivell que els altres dos blocs superiors. A més, el fons de la primera capa és de color blanc (o transparent) i les altres tres de color gris.

He arreglat el tema de nivells. Pel que fa als fons, és per facilitar la lectura; si vols, ho podem treure per a mòbils o per a tothom.

No hi veig gaire la diferència (m'he actualitzat el CSS). Sigui com sigui, és un problema menor. Ara m'he fixat (no sé si abans també passava) que el caroussel té uns espais grisos a la part superior i especialment a la inferior. Com si la caixa fos més gran que la imatge i ho omplís amb el gris de fons. Això últim passa tant en Timeless com en Vector.

Arreglat, provenia d'una part residual que no havia esborrat.

Pel que fa a min/max-width, en principi era més fàcil que tot passés a ser una sola columna. El Timeless, però, juga una molt mala passada fent que el contingut sigui tan estret, i segons com, fa que el caroussel desaparegui. Seguiré provant-ho.

A proposta d'en @Xavier Dengra:, he canviat els colors de fons per imatges extretes de l'Enciclopèdia de Diderot (cal actualitzar el css). Com ho veieu?

Eps, gràcies pel canvi! A mi m'encanta, però 1) veient la tonalitat marronosa de les imatges, les retocaria (potser descarregar-les, editar-les i carregar-les de nou a Commons) perquè tinguin un color més grisós clar com el del logo. Un cop això, 2) potser al títol d'Actualitat afegiria una línia en vermell com els última hora (com els avisos de Viquidites) en què vagi passant els esdeveniments en curs (atemptats, accidents, cerimònies, competicions esportives, eleccions...). Així també li donaria el toc d'enciclopèdia però amb informació del moment i separant-la de l'actualitat que tenim ara. 3) El carrussel aliniat amb la resta de caixes i sense espai mort, i finalment 4) a l'actualitat i els més llegits els afegiria requadres referents a la data i al rànquing (com en la meva antiga proposta de portada), i també l'increment de visites.

Si necessites ajuda per cap dels canvis, avisa'm. Mil gràcies per la pencada!

@Xavier Dengra: Gràcies pels comentaris. En vaig incorporar alguns, però penso que la proposta de portada té certs problemes que cal resoldre abans de seguir.

1. Té molt blankspace perquè la secció d'actualitat + defuncions és llarga. Podem afegir alguna secció a l'esquerra, però caldria veure quina.
   1. Una alternativa és fer-la horitzontalment com aquí, deixant el carousel a dalt ocupant el 100% del width.
2. Tema carousel:
   1. Malauradament, la imatge del dia no es pot veure bé. Personalment, o la mouria a un altre lloc o la trauria.
   2. Segons la imatge de fons, el text no es veu massa bé. Podríem fer tipus això, substituint la "W" per una imatge.
   3. L'alineament es fa difícil perquè cal deixar espai pels botons de passar. Intentaré refer-lo de dalt a baix.
3. Pel que fa a Tal dia com avui i Els més llegits, cada cop em convenç menys fer servir dues fonts diferents, però afegir-hi requadres de color queda estranys amb la imatge de fons.

N'he fet una nova versió (només cal actualitzar-se el CSS), refent tota la part d'efemèrides i actualitat. La nova secció d'actualitat permet destacar amb imatge un tema destacat, la idea és que canviï sovint en funció de què passa. Si us agrada aquesta proposta de format, es podria fer que l'article del dia sigui un carousel per incloure la imatge del dia.

En qualsevol cas, com a excusa per llançar la nova portada hi podria haver els 600.000 articles (som a 8.000!) o bé la Viquitrobada.

Qualsevol de les dues efemèrides em sembla bé, tu decideixes :)

Eps @Townie! Jo segueixo creient que millora cop rere cop! Definitivament ben aviat la podrem portar a votació, és brutal i deixa d'assemblar-se a tota la resta de versions idiomàtiques per donar un toc propi i original. No sé si soc jo que no m'he actualitzat bé el .css o el .js, però el títol amb el logo (capçalera) no m'apareixen pas.

Per altra banda, coincideixo amb tu que el carrousel és una part clau de la portada, tant per afegir també la imatge del dia, com per un tercer bànner que sigui de projecte/concurs d'edició destacat (dualitat lectura-edició). Al carroussel, a més a més, per l'article del dia, estaria bé afegir-hi en petit el distintiu de qualitat per fer entendre més fàcilment a què ens referim (com al de Viquillibres).

Dit això, qualsevol cosa que necessitis fes-me un toc i et provo de donar un cop de mà! Salut!

Com ho puc provar? Caldria veure com funciona amb mòbil. Les recomanacions són mw:Mobile Gateway/Mobile homepage formatting. També m'espanta la càrrega de CSS i JS. Pel CSS potser s'hauria d'usar mw:Help:TemplateStyles. Pel JS cal pensar què veu algú amb el JS desactivat. Fins i tot potser caldria posar el JS en un giny perquè qui vulgui el desactivi.

Copiant aquest vector al teu n'hi ha prou. La versió anterior estava força més adaptada al mòbil, aquesta es veu prou bé però seguiré afegint-hi seccions. Pel que fa a la càrrega de CSS i JS, encara podria netejar més el CSS (hi ha parts residuals de l'altra, faré la passada quan la proposta hagi avançat més), i la versió actual (sense carousel) no necessita JavaScript.

He copiat el CSS a Plantilla:Portada/styles.css, incloent el templatestyles a la portada de proves. Ara ja ho pot veure tothom. Els que l'havien copiat millor que l'esborrin, o buidin, per tenir la darrera versió. A més, ja no és exclusiu de l'skin Vector. Es pot veure també amb altres skins. És un dels avantatges del templatestyles que a més només es carrega en obrir la portada de proves. (Tenim pendent anar buidant el common.css de coses exclusives per a plantilles).

Amb el nou timeless, que afegeix part de la columna de l'esquerra en una nova a la dreta, els peus d'imatge queden retallats. La primera es queda amb "La gran onada de" i en les altres desapareix el nombre de visites: https://ca.wikipedia.org/w/index.php?title=Usuari:Townie/portada&useskin=timeless Amb els altres skins es veu bé.

En versió mòbil es veu bé amb pantalla d'escriptori: https://ca.m.wikipedia.org/wiki/Usuari:Townie/portada. Però activant el giny "Mobile sidebar", o reduint la finestra a l'amplada real d'un mòbil, queden tres columnes realment estretes difícils de llegir.

Per últim, se'm fa estrany que no hi hagi cap text a l'encapçalament. El típic "Benvinguts a la Viquipèdia", o altres fórmules, et situa on ets.

Bona feina.

Moltes gràcies pels TemplateStyles! Tenia la versió que funcionava amb la flexbox a una altra banda, ja l'he moguda actualitzat Usuari:Townie/portada. Perquè s'adapti bé a la mida de la pantalla vaig agafar una amplada mínima bastant a ull, si algú no ho veu bé, que jugui amb les min-width dels styles.

He afegit un encapçalament. Què us sembla?

En el model de portada que vaig presentar fa dos anys una de les coses que s'havia mig consensuat era encapçalament que estava força treballat i deia adéu a bona part del reguitzell d'enllaços de benvinguda i normes, però en mantenia unes quantes després de debat. Jo em quedaria amb l'anterior, tot i que calgui fer-hi edicions menors per adaptar-lo a altres skins i a mòbil.

Afegit L'he adaptat com he pogut per a mòbils. Em sembla que no es pot veure com quedaria en mòbils perquè mf-mobile-only només funciona a Portada. He aprofitat per netejar el CSS.

@Vriullop, Xavier Dengra: Llavors, tirem endavant amb el carousel?

Endavant amb el carroussel de 3 pantalles, pinta molt i molt bé per ara.

Carousel Fet!

He afegit tickers per a última hora i defuncions.

Cal acabar de polir funcions de visualització (ticker en alguns navegadors i el carroussel no avança sempre, però a nivell de funcionalitats, disseny, colors i organització dels continguts em sembla insuperable i impecable!

Ja ho he arreglat. Agrairia que tanta gent com pugui provés com queda la portada des de la seva pantalla per trobar coses que no es vegin bé.

Així se'm veu a mi: https://imgur.com/a/SFkjvWF

Sembla que el carroussel no funciona a Safari.

Em sembla que cal que afegeixis el JavaScript del carousel al teu common.js. El codi és aquí

Tot, o només on comença i acava "carrousel"?

Això vol dir que la nova portada només la podrà veure qui tingui això al seu codi o potser és que s'afegirà per defecte a tothom?

És a partir del Pagebanner. Un cop es decideixi fer el pas de tirar endavant la portada, caldrà copiar el Javascript a MediaWiki:Common.js i llavors tothom ho veurà igual. Pel que fa al CSS, es fa via TemplateStyles.

Ping KRLS, com veus afegit aquest codi al common.js? Penso que com a mínim hauria de ser un giny per defecte que es pugui desactivar. Això vol dir que cal pensar com es veurà desactivat, tant pel giny o amb un navegador sense javascript. Se suposa que via mòbil no s'inclou.

Inicialment no havia posat el carousel per això, però veient que no hi havia objeccions a afegir-lo, ho vaig fer. Per Internet he trobat carousels fets purament amb CSS, no sé si és millor carregar una mica més el CSS i no utilitzar JavaScript. Com ho veus?

El meu parer és que és millor tirar de CSS sempre que es pugui, abans que javascript.

En general, s'ha d'evitar el màxim possible l'ús del Javascript perquè alenteix la pàgina. Així doncs, si el carousel amb CSS compleix les nostres expectatives per mi és una millor opció.

Què us sembla la prova de slider que hi ha a Usuari:Townie/proves?

Com que diuen que una imatge val més que mil paraules, així és com ho veig jo amb la interfície Timeless. En general bé, però hi ha algunes parts que queden tallades. Quan passo a la Vector, part dels problemes s'arreglen però alguns persisteixen (bàsicament la columna esquerra).

El carousel de les notícies té el fons blanc, potser estaria bé fer-lo d'algun to gris o envoltar-lo d'ombres per ressaltar-lo? Molt bona feina!

@Unapersona: Moltes gràcies pel feedback. Abans de posar-me amb la columna esquerra, he retocat la mida de les imatges de la dreta. Podries mirar si et segueix passant el mateix amb el vector?

Per alguna raó, ara no em surten dues columnes amb vector: només una. Les imatges continuen igual. Si redueixo el zoom al 80%, es veuen correctament (les de la dreta, la columa esquerra continua igual)

He retocat l'amplada mínima de les dues columnes; hi havia una mida de pantalla intermèdia on la combinació de min-width de la columna i la min-width de la imatge provocaven resultats estranys.

Em poso ara a arreglar l'esquerra. Gràcies!

Estava intentant arreglar el munt d'errors que hi ha en Timeless quan me n'he trobat un de sorprenent: hi ha un element menys al carousel. El problema no és nostre: passa amb totes les edicions de Wikivoyage si es veuen amb Timeless.

He traslladat a Usuari:Townie/portada un possible substitut al carousel que tenia JavaScript. Em sembla que a la Viquipèdia no es poden fer servir els tags <a> o <input>, així que les opcions que permeten passar les pantalles manualment són ben poques. Algú té alguna idea per solucionar-ho?

Potser amb el selector :active de css. Què vols fer exactament?

La idea seria tenir tres botons que, en clicar-los, moguessin l'slider fins la pantalla seleccionada i s'hi quedés.

Prova això: https://stackoverflow.com/questions/34689047/pure-css3-image-slider-without-javascript-or-radio-inputs Si necessites ajuda digue'm!

L'havia vist, però fa servir el tag <a href=""> que no es pot fer servir a la Viquipèdia :/ Se t'acut alguna alternativa?

Un <img> o un altre <div>. On fas les proves?

Són a Usuari:Townie/portada i Usuari:Townie/proves.

Gràcies a la idea d'en Yuanga, ja he incorporat una nova versió de l'slider que permet anar amunt i avall sense JavaScript. Què en penseu?

Fa molta patxoca. L'única cosa que no m'agrada gaire és aquest desplaçament d'última hora i defuncions. Personalment no seria massa amant de les animacions i la informació que hi ha allà faria que fos visible d'un sol cop d'ull. Si no és possible per haver-hi massa contingut, que es pogués desplegar amb un sol clic (via Javascript)

Tractant-se d'un detall menor de la portada, veig raonable que es pugui presentar una votació de la portada amb una subvotació per aquesta part. Us sembla, @KRLS i @Toniher?

No penso que sigui un detall menor. No em sembla raonable que un dels webs més visitats en català tingui quelcom "above the scroll/fold" que trigui 12 segons a ser mostrat completament a l'usuari. Sé que us agrada molt aquest tipus d'animació però a nivell d'usabilitat és inacceptable en una societat que els usuaris en consumir un web no brinden tanta atenció. Per exemple, segons aquest website els usuaris només llegeixen de mitjana el 28% de les paraules d'una plana i passen de mitjana 10-20 segons (ref); llavors no s'ha de posar traves a la l'informació.

Estic totalment d'acord amb el Toni. Les animacions no són usables i s'haurien d'evitar; crec que ja ho vaig dir quan es va posar a viquidites.

Per cert, quan prems el botó de passar la fotografia del carousel presenta un efecte estrany, perquè et baixa fins l'anchor. No tinc clar si es podria esmenar aquest efecte.

En sóc conscient, és un dels problemes que té l'slider tal com és ara. Un altre és que embruta molt la URL, i no m'agrada gens. He buscat possibles solucions, però amb les limitacions que hi ha em penso que no hi podem fer res.

Dóna'm un parell de dies, que acabi exàmens, i busco alternatives a tot plegat.

1) Es déu haver dit, però que passa quan l'article més vist no disposa d'imatge?

2) Tinc la sensació que la portada és curta. Hem fet desaparèixer qualsevol tipus de contingut. Penso que no hauríem d'oblidar que som una enciclopèdia i els usuaris que arriben a la Viquipèdia és per llegir contingut. Si només cerco imatges entraria directament a Instagram. Potser que l'article més llegit el dia anterior si mostrin les primeres 200 paraules? L'article a mostrar es podria fixar amb milers de criteris.

3) Crec que la barra de navegació de l'esquerra no la llegeix ningú, potser caldria ressaltar algun botó amb un "llegeix un article a l'atzar?".

Per cert, bona feina!

D'acord amb el punt 2, hi ha més imatge que contingut. Els articles amb més visites podrien ser una simple llista i es pot recuperar l'article del dia que tenim ara.

A més, amb mòbil només es veu la meitat dels quadres.

@KRLS, Vriullop: Moltes gràcies pels comentaris. He tret els tickers, i he començat a refer l'slider.

Una cosa que no em convencia era, com deia el KRLS, que no tinguessis part del contingut amagat, i haguessis de clicar per veure què hi havia. Amb aquest nou slider (lleuger en animacions, i funcional per a mòbils) es manté la part visual, però s'hi pot veure el contingut que t'interessa. Si només es llegeix un terç de la pàgina, tant per tant que es llegeixi la part que realment interessa.

Com ho veieu?

El nou slider és una PAS-SA-DA. Jo discrepo amb el tema de poca imatge i poc contingut; la portada calia canviar-la per vella però per la majoria dels usuaris és pur tràmit. Si com dieu només es veu 1/3 de la pàgina, per què afegir tant de contingut que la saturi?

Amb el nou slider, com diu en Townie, pots prioritzar què veure i permet afegir un pèl més de text. Si els tickers no tenien consens, d'acord amb treure'ls. Però el que hi havia de defuncions permetia cridar amb més info de Wikidata i sense tenir visibles tota l'estona les persones que fa 3 setmanes que van morir.

Basant-me en els comentaris d'en KRLS i en Vriullop, he fet una nova proposta aquí. Personalment, m'agrada més aquesta que l'anterior: és més sòbria a nivell d'imatges, i trobo més natural l'encaix entre seccions. També he afegit un botó d'article a l'atzar, i per a notícies d'última hora, si realment creieu que cal, he fet això.

A mi m'agrada molt la nova proposta!

Crec que millora l'anterior, sí

M’agradava molt més la d’abans; treure les imatges i tornar als textos en fons simple és retrocedir a una portada que hagués votat fa 6 anys i llençar a la brossa la feinada d’en Townie al llarg d’aquests mesos i tots els avenços de MediaWiki a nivell visual.

Per mi no et faci pena :P He après molt HTML i CSS pel camí, així que ja estic content. Com més em miro Usuari:Townie/portada, més la veig "all over the place". Amb el nou slider hi ha encara més imatge (9, més els requadres de colors), i la poca part de text està molt comprimida.

En la primera versió, si es vol afegir més text a la portada, penso es podria intentar que al seleccionar sobre un dels articles més llegit, es mostrés informació de Wikidata aprofitant un dels requadres del costat (per exemple, si poses el cursor sobre Gilmour, amagui Mason i en aquell espai es mostri informació en un fons blanc). Seria possible?

Suposo que es podria fer, però caldria vigilar molt amb les limitacions de l'entorn wiki. De moment, hi he posat un slider com el de dalt.

O no perdre la secció de curiositats i posar-la després de les efemèrides...

Amb la primera portada em temo que faria desquadrar força el repartiment de seccions; amb la segona, o bé ho afegim a l'slider o bé en una caixa a sota.

He canviat l'encapçalament a Usuari:Townie/proves. Quin preferiu?

He obert una presa de decisions aquí.