Viquipèdia: Pell

De la Viquipèdia, l'enciclopèdia lliure.
Saltar a la navegació Saltar a la cerca

A la pell , en la terminologia de TI i Wikipedia, és l'aspecte gràfic i el disseny amb el qual pot aparèixer la Wikipedia.

Descripció

Durant el desenvolupament del programari MediaWiki , a la base de Wikipedia, es van escriure diversos skins i actualment hi ha disponibles sis:

  • Vector (predeterminat), creat el 2009 i predeterminat des del 2010 (MediaWiki 1.17)
  • Monobook, creat el 2003, per defecte fins al 2010
  • Modern
  • Minerva Neue
  • Atemporal

Un usuari no registrat només pot utilitzar l’usuari per defecte, Vector, mentre que un usuari registrat el pot canviar a Preferències / Aparença .

Un skin consisteix en scripts PHP i CSS del costat del servidor, JavaScript i imatges que vénen amb la pàgina web. [1] La càrrega d’aquests recursos pel navegador no es produeix directament a través d’URL estàtiques, sinó a través d’un servei anomenat ResourceLoader, un script PHP que els proporciona d’una manera optimitzada (concatenació, minificació, ...). [2]

Personalització CSS

A més dels CSS dels skins, que formen part del propi MediaWiki, el programari Wikipedia us permet crear-ne de nous a nivell global (per a tots els usuaris, fins i tot usuaris no registrats), que només poden ser modificats pels administradors o per a cada usuari registrat, que pot ser modificat pel mateix usuari: [3]

Aquests CSS personalitzats també són carregats pel navegador gràcies al ResourceLoader. [2]

En funció dels canvis que vulgueu fer, cal un coneixement més o menys profund de CSS. Aquesta pàgina proporciona una primera introducció, per obtenir més informació, és recomanable visitar el lloc del W3C , que a més dels estàndards oficials també ofereix una col·lecció d’enllaços a llocs amb tutorials a diversos nivells.

HTML i CSS

Una pàgina web moderna sol constar com a mínim dels dos components següents:

  • La pàgina en format HTML amb el contingut textual i l’estructura (encapçalaments, paràgrafs, llistes, taules, etc.). En el cas de Viquipèdia, el programari transforma la font wiki en pàgines HTML.
  • El full d’estil en format CSS que defineix bàsicament tots els aspectes visuals de la pàgina (tipus de lletra, colors, mides, marges, vores, fons, etc.).

Cada element d'una pàgina HTML està marcat amb les anomenades "etiquetes" . Per exemple, un paràgraf de text comença amb l' etiqueta <p> i acaba amb </p> . Les línies es troben al full d'estil "monollibre" per defecte

 p {
   marge: 0,4em 0em 0,5em 0em;
   alçada de línia: 1,5em;
}

on la "p" (aquí sense claudàtors) indica que les propietats següents fan referència a tots els paràgrafs de la pàgina relativa. Totes les propietats d'aquest element estan incloses entre claus {}. El valor (per exemple, "1,5em") està separat de la propietat (per exemple, "línia-alçada", és a dir, la distància entre línies) per un doble punt i va seguit d'un punt i coma.

Per diferenciar l'aparença d'elements del mateix tipus, es poden utilitzar classes i identificadors per assignar diferents "noms" als elements. En el cas de la Viquipèdia, aquests noms els assigna automàticament el programari . Prenem un exemple de l'estil "monollibre" per defecte:

 table.diff {background: white; }

Amb això obtenim que totes les taules (element "taula") amb la classe "diff" (separades del nom de l'element amb un punt) tinguin un fons blanc. (A la pàgina HTML, aquestes taules comencen amb el <table class="diff"> etiqueta.) L'aspecte de les altres taules (sense la classe "diff") no es veu afectada per això. La diferència entre classe i identificador només ens interessa en què la sintaxi canvia mínimament: el nom d’un identificador està separat del nom de l’element per un hash # en lloc d’un punt.

Si voleu assignar propietats a tots els elements amb una determinada classe o identificador , deixeu el nom de l'element. Un exemple de "monollibre":

 .error {
   color: vermell;
   font-size: més gran;
}

Qualsevol element amb la classe "error", ja sigui un paràgraf, un encapçalament o un altre, apareix en lletra vermella i una mica més gran del normal.

Finalment, també podem referir-nos només als elements que es troben dins d’altres elements:

 #toc p {margin: 0}

En aquest exemple, s'esborren els marges dels paràgrafs, però només els que es troben dins d' un element amb l' identificador "toc". Això no s'ha de confondre amb

 p # toc {margin: 0}

que fa referència a paràgrafs que tenen l' identificador "toc".

Els espais de noms

Simplificant una mica, podem dir que l'element "cos" és la mateixa pàgina. Això ens permet entendre com personalitzar l'aparença dels diversos espais de noms : el programari Wikipedia assigna automàticament una classe que depèn de l'espai de noms a l'element "cos". El nom consisteix en "ns-", seguit del número de l'espai de noms. Aquí teniu la llista completa:

  • .ns-0 : principal
  • .ns-1 : debat
  • .ns-2 : usuari
  • .ns-3 : debats d'usuaris
  • .ns-4 : Wikipedia
  • .ns-5 : debats a la Viquipèdia
  • .ns-6 : imatge
  • .ns-7 : Fils de la imatge
  • .ns-8 : MediaWiki
  • .ns-9 : debats de MediaWiki
  • .ns-10 : Plantilla
  • .ns-11 : debats sobre plantilles
  • .ns-12 : Ajuda
  • .ns-13 : debats d'ajuda
  • .ns-14 : categoria
  • .ns-15 : debats de categories
  • .ns-102 : Projecte
  • .ns-103 : debats sobre el projecte

Si volguéssim establir tipus de lletra més grans només per a les pàgines de l’espai de noms principal, podríem posar

 body.ns-0 {font-size: medium; }

o més simplement

 .ns-0 {font-size: medium; }

Recordant el que es va dir a la introducció, també podem canviar l’aspecte dels paràgrafs a l’espai de noms principal, deixant-lo sense canvis en els altres:

 .ns-0 p {margin: 0; sagnat de text: 2em; }

Si, en canvi, volguéssim aplicar aquest estil a tots els espais de noms , n’hi hauria prou amb deixar la classe "ns-0":

 p {marge: 0; sagnat de text: 2em; }

Parts de la pàgina (Monobook skin)

A la llista següent es mostren les principals classes i identificadors de l'estructura de la pàgina de Viquipèdia amb la versió del Monobook:

  • #globalWrapper : element ("div") que inclou tota la pàgina
    • #column-content i #content : elements ("div") que inclouen el contingut de la pàgina (sense els elements de navegació)
      • .firstHeading : la capçalera de la pàgina
      • #bodyContent : el contingut sense la capçalera de la pàgina
        • #toc : conté l'índex
        • .editsection : conté enllaços per editar seccions individuals
        • #catlinks : conté els enllaços a les categories inserides a la pàgina
    • #column-one : conté tots els elements de navegació
      • #p-cactions : conté enllaços a "accions" ("pàgina", "discussió", "edició", etc.)
      • #p-personal : conté enllaços a eines personals (discussió de pàgines i usuaris, preferències, etc.)
      • #p-logo : conté el logotip
      • #p-nav : conté navegació ("Pàgina principal", "Portal de la comunitat", etc.)
      • #p-search : conté el bloc "search"
      • #p-tb : conté eines ("Assenyaleu aquí", "Canvis relacionats", etc.)
      • #p-lang : conté "interwiki"
    • #footer : conté la barra a la part inferior de les pàgines

Així que si ho poses

 #globalWrapper {font-size: 150%}

augmenteu la mida de la lletra de tota la pàgina en un 50%. En el seu lloc

 # column-content {font-size: 150%}

augmenta la mida del tipus de lletra del contingut, deixant els enllaços de navegació sense canvis.

Provant l'últim exemple, es pot veure una de les diverses dificultats que es troben a l'hora de modificar els fulls d'estil: la mida d'algunes parts de la pàgina pot dependre de la mida dels caràcters, de manera que canviar la mida dels caràcters pot desordenar la aspecte de tota la pàgina. Una altra dificultat rau en entendre la precedència de les definicions. Per exemple,

 cos {color: green}

no fa que el text de la pàgina aparegui en verd, perquè hi ha una altra definició a MediaWiki: Monobook.css que té prioritat. Una solució (de diverses possibles) per canviar el color del text i dels encapçalaments és

 p, h1, h2, h3, h4, h5, h6 {color: verd; }

Personalització de JavaScript

Les diverses aplicacions es poden personalitzar i ampliar en funcions fins i tot amb scripts JavaScript , també a nivell global (per a tots els usuaris, fins i tot no registrats), editables només pels administradors o per a cada usuari registrat, editables pel mateix usuari: [4]

Túnel

Nota

Documentació

A MediaWiki.org

A Meta-Wiki

Pàgines relacionades