Wikipedia: Pel

Da Wikipedia, a enciclopedia libre.
Ir á navegación Ir á busca

A pel , en TIC e terminoloxía Wikipedia, é a gráfica e deseño aspecto co que o sitio web da Wikipedia pode aparecer.

Descrición

Durante o desenvolvemento do software MediaWiki , na base de Wikipedia, escribíronse varias peles e actualmente hai seis dispoñibles:

  • Vector (predeterminado), creado en 2009 e predeterminado desde 2010 (MediaWiki 1.17)
  • Monobook, creado en 2003, por defecto ata 2010
  • Moderno
  • Minerva Neue
  • Atemporal

Un usuario non rexistrado só pode usar o predeterminado, Vector, mentres que un usuario rexistrado pode cambialo en Preferencias / Aspecto .

Un skin consiste en scripts PHP do lado do servidor e CSS , JavaScript e imaxes que acompañan a páxina web. [1] A carga destes recursos polo navegador non se realiza directamente a través de URL estáticos senón a través dun servizo chamado ResourceLoader, un script PHP que os proporciona dun xeito optimizado (concatenación, minificación, ...). [2]

Personalización CSS

Ademais dos CSS dos skins, que forman parte do propio MediaWiki, o software Wikipedia permítelle crear outros novos a nivel global (para todos os usuarios, incluso os usuarios non rexistrados), que só poden ser modificados polos administradores ou por cada usuario rexistrado, que pode ser modificado polo propio usuario: [3]

Estes CSS personalizados tamén son cargados polo navegador grazas ao ResourceLoader. [2]

Dependendo dos cambios que queira facer, necesítase un coñecemento máis ou menos profundo de CSS. Esta páxina dá unha primeira introdución, para máis información é recomendable visitar o sitio do W3C , que ademais dos estándares oficiais tamén ofrece unha colección de ligazóns a sitios con tutoriais en varios niveis.

HTML e CSS

Unha páxina web moderna normalmente consta de polo menos os seguintes dous compoñentes:

  • A páxina en formato HTML cos contidos textuais e a estrutura (cabeceiras, parágrafos, listas, táboas, etc.). No caso de Wikipedia, o software transforma a fonte wiki en páxinas HTML.
  • A folla de estilo en formato CSS que define basicamente todos os aspectos visuais da páxina (tipos de letra, cores, tamaños, marxes, bordos, fondos, etc.).

Cada elemento dunha páxina HTML está marcado coas chamadas "etiquetas" . Por exemplo, un parágrafo de texto comeza coa etiqueta <p> e remata con </p> . As liñas atópanse na folla de estilo "monolibro" por defecto

 p {
   marxe: 0,4em 0em 0,5em 0em;
   altura da liña: 1,5em;
}

onde o "p" (aquí sen os corchetes) indica que as seguintes propiedades fan referencia a todos os parágrafos da páxina relativa. Todas as propiedades deste elemento están encerradas entre chaves {}. O valor (por exemplo, "1,5em") está separado da propiedade (por exemplo, "altura de liña", é dicir, a distancia entre liñas) por un punto dobre e vai seguido dun punto e coma.

Para diferenciar a aparencia de elementos do mesmo tipo, pódense usar clases e identificadores para asignar diferentes "nomes" aos elementos. No caso de Wikipedia, estes nomes son asignados automaticamente polo software . Tomemos un exemplo do estilo predeterminado "monolibro":

 table.diff {background: white; }

Con isto obtemos que todas as táboas (elemento "táboa") coa clase "diff" (separadas do nome do elemento cun punto) teñan un fondo branco. (Na páxina HTML, estas táboas comezan coa etiqueta <table class="diff"> ). A aparencia das outras táboas (sen a clase "diff") non se ve afectada por isto. A diferenza entre clase e id interésanos só porque a sintaxe cambia mínimamente: o nome dun id está separado do nome do elemento por un hash # no canto dun punto.

Se desexa asignar propiedades a todos os elementos cunha determinada clase ou id , deixe o nome do elemento afastado. Un exemplo de "monolibro":

 .error {
   cor: vermello;
   tamaño da fonte: maior;
}

Calquera elemento coa clase "erro", xa sexa un parágrafo, un título ou outro, aparece con letra vermella e algo máis grande do normal.

Por último, tamén podemos referirnos só aos elementos que se atopan dentro doutros elementos:

 #toc p {margin: 0}

Neste exemplo bórranse as marxes dos parágrafos, pero as que están dentro dun elemento co id "toc". Isto non se debe confundir con

 p # toc {marxe: 0}

que se refire a parágrafos que teñen eles mesmos o id "toc".

Os espazos de nomes

Simplificando un pouco, podemos dicir que o elemento "corpo" é a propia páxina. Isto permítenos comprender como personalizar a aparencia dos distintos espazos de nomes : o software Wikipedia asigna automaticamente unha clase que depende do espazo de nomes ao elemento "corpo". O nome consiste en "ns-", seguido do número do espazo de nomes. Aquí está a lista completa:

  • .ns-0 : principal
  • .ns-1 : Discusión
  • .ns-2 : usuario
  • .ns-3 : discusións de usuarios
  • .ns-4 : Wikipedia
  • .ns-5 : discusións da Wikipedia
  • .ns-6 : Imaxe
  • .ns-7 : Fíos de imaxe
  • .ns-8 : MediaWiki
  • .ns-9 : Discusións sobre MediaWiki
  • .ns-10 : Modelo
  • .ns-11 : discusións sobre modelos
  • .ns-12 : Axuda
  • .ns-13 : Axuda ás discusións
  • .ns-14 : Categoría
  • .ns-15 : discusións de categoría
  • .ns-102 : Proxecto
  • .ns-103 : discusións sobre proxectos

Se quixésemos establecer tipos de letra máis grandes só para páxinas do espazo de nomes principal, poderiamos poñer

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

ou máis simplemente

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

Lembrando o que se dixo na introdución, tamén podemos cambiar a aparencia dos parágrafos no espazo de nomes principal, deixándoo sen cambios nos demais:

 .ns-0 p {marxe: 0; sangría de texto: 2em; }

Se, por outra banda, quixésemos aplicar este estilo a todos os espazos de nomes , bastaría con deixar a clase "ns-0":

 p {marxe: 0; sangría de texto: 2em; }

Partes da páxina (skin do monolibro)

A seguinte lista mostra as principais clases e ids da estrutura da páxina de Wikipedia co aspecto de Monobook:

  • #globalWrapper : elemento ("div") que encerra toda a páxina
    • #column-content e #content : elementos ("div") que inclúen o contido da páxina (sen os elementos de navegación)
      • .firstHeading : o encabezado da páxina
      • #bodyContent : o contido sen o encabezado da páxina
        • #toc : contén o índice
        • .editsection : contén ligazóns para editar seccións individuais
        • #catlinks : contén as ligazóns ás categorías inseridas na páxina
    • #column-one : contén todos os elementos de navegación
      • #p-cactions : contén ligazóns a "accións" ("páxina", "debate", "editar", etc.)
      • #p-personal : contén ligazóns a ferramentas persoais (discusión de páxinas e usuarios, preferencias, etc.)
      • #p-logo : contén o logotipo
      • #p-nav : contén navegación ("Páxina principal", "Portal da comunidade", etc.)
      • #p-search : contén o bloque "search"
      • #p-tb : contén ferramentas ("Apunte aquí", "Cambios relacionados", etc.)
      • #p-lang : contén "interwiki"
    • #footer : contén a barra na parte inferior das páxinas

Entón, se o pon

 #globalWrapper {font-size: 150%}

aumenta o tamaño da letra de toda a páxina nun 50%. Pola contra

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

aumenta o tamaño da letra do contido, deixando sen cambios as ligazóns de navegación.

Tentando o último exemplo, pódese ver unha das varias dificultades atopadas ao modificar as follas de estilo: o tamaño dalgunhas partes da páxina pode depender do tamaño dos caracteres, polo que cambiar o tamaño dos caracteres pode desordenar o aparición de toda a páxina. Outra dificultade reside en comprender a precedencia das definicións. Por exemplo,

 corpo {cor: verde}

non fai que o texto da páxina apareza en verde, porque hai outra definición en MediaWiki: Monobook.css que ten prioridade. Unha solución (de varias posibles) para cambiar a cor do texto e dos títulos é

 p, h1, h2, h3, h4, h5, h6 {cor: verde; }

Personalización de JavaScript

As distintas peles pódense personalizar e ampliar en funcionalidade incluso con scripts JavaScript , tamén a nivel global (para todos os usuarios, incluso sen rexistrar), editables só polos administradores ou por cada usuario rexistrado, editables polo propio usuario: [4]

Túnel

Nota

Documentación

En MediaWiki.org

En Meta-Wiki

Páxinas relacionadas