Fandom

Central de Wikia

Ayuda:Infoboxes

1.839páginas en
el wiki}}
Crear una página
Discusión6
Infobox portatil.png

Infobox de ejemplo

Los infoboxes son parecidas a hojas informativas, o como las columnas laterales de los artículos de las revistas; y están hechas para mostrar un resumen del tema de una página. Estos infoboxes presentan los puntos importantes en un formato organizado y rápido de leer. Los infoboxes se hacen generalmente usando plantillas, para crear así consistencia en toda una comunidad.

Fandom ha desarrollado una nueva forma de codificar infoboxes, llamada infoboxes portátiles para lograr que se visualicen bien en cualquier dispositivo que te detallaremos a continuación. No cambia la manera en cómo se usa un infobox en los artículos, si no la forma en cómo se crea la plantilla de el infobox. Se ha creado una herramienta de ayuda para la migración de infoboxes. Puedes encontrar más información sobre ella en la página: Ayuda:Traslado de Infoboxes.

Enlaces útiles
  • Para una introducción básica sobre el editor visual de infoboxes, ver Ayuda:Infoboxes/editando.
  • Para una lista detallada de todas las opciones estándares disponibles para las infoboxes portátiles, incluyendo ejemplos de wikitexto para usar y su salida en HTML, lee Ayuda:Infoboxes/Etiquetas.
  • Para más información sobre cómo usar el CSS para diseñar una infobox, incluyendo guías detalladas, lee Ayuda:Infoboxes/CSS.
  • Para ver instrucciones sobre cómo migrar una infobox 'clásica' a una infobox portátil, lee Ayuda:Traslado de Infoboxes.
  • Para una guía sobre como usar la funcionalidad de Infobox Preview, lee Ayuda:Infobox preview.
  • Hub de portabilidad: Guías, ejemplos, y tutoría personalizada sobre cómo trasladar, personalizar y colocar un tema a tus infoboxes.


Cómo añadir un infobox a un artículo Editar

EV-InfoboxPortatil.png

Insertando infoboxes portátiles en el Editor Visual

Se puede añadir un infobox a un artículo del mismo modo en lo qué harías con cualquier otra plantilla; ya sea a través de las herramientas integradas de plantilla del editor, o a través de su modo fuente. En el Editor Visual, los infoboxes pueden insertarse rápidamente mediante la opción "Infobox" del desplegable "Insertar".

Entre tanto, en el modo código, generalmente comenzarías copiando la sintaxis de los datos de la plantilla (que normalmente se encuentra sobre la parte inferior de la página de la plantilla) y pegándola en un artículo, cambiando las palabras tras los signos de igual para mostrar la información deseada. Por ejemplo:

{{Infobox personaje
 | titulo       = Daisy
 | imagen       = Ejemplo.jpg
 | descripcionimagen  = Daisy, soplando en el viento
 | posicion      = Flor suprema
 | edad        = 2 meses
 | estado       = Activo
 | altura       = 5 pulgadas
 | peso        = 20 gramos
}}

Esto funciona exactamente igual que cualquier otra plantilla para los infoboxes, sin embargo, la etiqueta de la página de plantillas es un poco diferente, como se verá a continuación.

Cómo crear un nuevo infobox Editar

Infobox portatil2.png

Para empezar, crea una nueva plantilla con el nombre que quieras. “Plantilla:EjemploInfobox”, por ejemplo. Mientras qué, en el pasado, hubiéramos empleado tablas y divs, ahora podremos usar etiquetas de infobox. Comenzaremos con una infobox básica, con un título y una imagen:

<infobox layout="stacked">
 <title source="titulo"><default>{{PAGENAME}}</default></title>
 <image source="imagen" />
</infobox>

Este wikitexto le indicará a tu plantilla que utilice los variables nombre e imagen para los elementos de title e image. Además, puedes añadir una etiqueta default, cuyo valor se utilizará cuando un usuario no especifique un nombre, imagen etc. en el artículo.

Ahora sólo necesitamos dos campos que contengan información adicional, así que vamos a añadir uno:

<data source="temporada"><label>Temporadas(s)</label></data>

Después de añadir un último campo con fuente establecida primera y la etiqueta de Primera aparición, nos encontramos con lo siguiente:

<infobox layout="stacked">
 <title source="nombre"><default>{{PAGENAME}}</default></title>
 <image source="imagen" />
 <data source="temporada"><label>Temporada(s)</label></data>
 <data source="primera"><label>Primera aparición</label></data>
</infobox>

Ahora podemos usar la plantilla en un artículo y obtener una infobox que funciona:

{{InfoboxDeEjemplo
 | nombre = Enrique Pastor
 | imagen = Enrique_Pastor_concejal.jpg
 | temporada = 1ª, 2ª, 3ª, 4ª, 5ª, 6ª, 7ª y 8ª
 | primera = Mirador de Montepinar
}}

Valores escondidos Editar

Cualquier campo o elemento sin un valor será automáticamente escondido. Esto se aplica a todas las etiquetas con la excepción de grupos que son forzados a ser mostrados (ver #Forzar todos los elementos de grupo a ser mostrados. Cuando todos los elementos se encuentran vacíos, la infobox no aparecerá.

Cómo cambiar el estilo de visualización de un infobox Editar

Las infoboxes que utilizan este tipo de código se decoran de forma automática, utilizando el tema de su comunidad. Si alguna de las variables está vacía, no se mostrará su fila correspondiente de la plantilla (a menos que se haya usado la etiqueta de "default").

Opciones de diseñoEditar

Hay disponibles dos opciones alternativas de diseño para infoboxes:

Default (table) layout Stacked layout
Etiquetas son mostradas a la izquierda de los valores Etiquetas son mostradas arriba de los valores
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17.png

Diseño por defecto

Screen Shot 2015-06-16 at 12.10.54.png

Diseño tabular

Tematización personalizadaEditar

El tema por defecto del infobox se puede sobrescribir de dos formas. Existe una variable dentro de la página Especial:FuncionalidadesDeFandom llamada Tema Europa de Infobox. Cuando está variable se activa en la comunidad, los infoboxes van a extraer los colores existentes en la navegación de la comunidad y tenerlos como los suyos.

La otra opción es utilizando CSS local comunitario, y los atributos del theme o theme-source de la etiqueta infobox, permitiendo decorar los infoboxes a través del CSS de la comunidad local.

  • El atributo theme se utiliza para especificar una clase de CSS personalizado para el infobox.
  • El atributo theme-source te permite variar la clase de CSS a través de un parámetro de plantilla.

Para más información sobre como tematizar una infobox, incluyendo una guías detalladas, revisa Ayuda:Infoboxes/CSS o encuentra ejemplos de estilos y temas en el Hub de Portabilidad.

Colores de acento Editar

Los colores de los fondos de título y encabezado además texto se pueden volver a pintar por infobox utilizando la función de color de acento. Al igual que 'theme-source' , el color utilizado es el valor del parámetro de la plantilla indicado en 'accent-color-source' (para fondos) y 'accent-color-text-source' (para texto).

Como ejemplo: si la plantilla de infobox declara accent-color-source="bkg" y la infobox del artículo declara bkg = #FFF, el color de fondo de los encabezados y títulos será #FFF o #FFFFFF en formato HEX, o el recoloramiento fallará silenciosamente.

Los colores de acento sobreescribirán colores declarados usando temas así como por defecto.


Esto también incluye un parámetro para el color predeterminado, por lo que el uso de accent-color-default = "# FFF" establece el color para todos los títulos y fondos de los encabezados y accent-color-text-default = # 000000 "funciona de manera similar estableciendo el color de texto predeterminado usando formatos hexadecimales.

Cómo usar múltiples imágenes y vídeos en un infobox Editar

Infoboxtabs.png

Imágenes en tablas

Para utilizar múltiples imágenes en un solo infobox, simplemente debes colocar una etiqueta <gallery>.

{{Example
 |name   = Eddard Stark
 |image  = <gallery>
Eddard 1.jpg|Eddard en un caballo
Eddard 2.jpg|Eddard en una casa
Eddard 3.jpg|Eddard con una taza
</gallery>
}}

Para más discusión sobre esta funcionalidad, por favor revisa Hilo:105996.

Para añadir un vídeo en un infobox usa la etiqueta <image>; igual con lo que harías con una imagen. Cuando un vídeo es colocado en lugar de una imagen, un thumbnail con el icono de Play e información sobre la duración del vídeo se mostrará en el infobox, y al hacer clic en el vídeo abrirá una ventana con el reproductor de vídeo. Si deseas agregar varios vídeos usa una nueva etiqueta <image> por cada vídeo.

Cómo agrupar información en un infobox Editar

Advancedinfobox.png

Grupos y ordenes inusuales en acción

Ahora que has creado un infobox sencillo puedes aprender a utilizar campos más avanzados. En esta sección vamos a construir un infobox que se muestra a la derecha.

Esta infobox comienza con tres <data> campos, luego campos individuales <title> y <image>. Como puedes ver, el campo <title> no tiene que ser el primer campo.

<infobox layout="stacked">
 <data source="prev"><label>Previo</label></data>
 <data source="conc"><label>Concurrente</label></data>
 <data source="siguiente"><label>Siguiente</label></data>
 <title source="name" />
 <image source="image" />
</infobox>

Agrupando la información dentro de las etiquetas de grupoEditar

El siguiente campo <group> te permitirá poner una serie de campos en grupo, cada uno de los cuáles puede tener un encabezado. Recuerda: los campos que estén abiertos pero qué no tengan un valor asignado no aparecerán. Esta regla también se aplica a los grupos: Si alguno de los campos dentro de un grupo particular carece de valor, con exclusión de la etiqueta de cabecera, no se visualizará el grupo entero.

<infobox layout="stacked">
 <data source="prev"><label>Previo</label></data>
 <data source="conc"><label>Concurrente/label></data>
 <data source="siguiente"><label>Siguiente</label></data>
 <title source="nombre" />
 <image source="imagen" />
 <group>
  <header>Detalles</header>
  <data source="conflicto"><label>Conflicto</label></data>
  <data source="fecha"><label>Fecha</label></data>
  <data source="lugar"><label>Lugar</label></data>
  <data source="resultado"><label>Desenlace</label></data>
 </group>
</infobox>
 

Diseño horizontal para grupos Editar

Screen Shot 2015-06-16 at 13.27.08.png

Agrupando horizontalmente

Los grupos de etiquetas pueden tener una disposición horizontal alternativa donde se visualice todo el contenido de seguido en una sola línea horizontal. Esto se puede lograr añadiendo el atributo layout="horizontal" a la etiqueta del grupo.

<group layout="horizontal">
   ...
</group>
 

Diseño inteligente para grupos Editar

El diseño "inteligente" es similar al diseño horizontal (filas estructuradas). Este permite a los campos de datos fluir en un solo grupo de una fila a la siguiente. Cuando un número de campos alcanza el límite definido, el siguiente campo de dato aparecerá en la siguiente fila. Los objetos en una fila se ajustarán para cubrir todo el ancho disponible.

Para usar grupos inteligentes, añade row-items="3" (o algún número que establezca el límite). Todos los objetos en un grupo inteligente usan diseño horizontal por defecto, así que no es necesario añadir la atribución si estás usando grupos inteligentes. Sin embargo, es posible el juntar campos de datos horizontales y verticales en un grupo inteligente al añadir el atributo layout="default" a una etiqueta individual <data>.

Para que un campo de datos determinado ocupe más de un espacio, usa el atributo span="2" en una etiqueta <data>.

<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result" layout="default"><label>Outcome</label></data>
  </group>
</infobox>
 

Forzar la visualización de todos los elementos del grupo Editar

Usando show="incomplete" puedes obligar a todos los elementos del grupo a visualizarse, incluso aunque estén vacíos. A menos que todos estén vacíos; pues entonces el grupo no se visualizará en absoluto.

<group layout="horizontal" show="incomplete">
 <header>Combatientes</header>
 <data source="side1" />
 <data source="side2" />
</group>

Añadiendo todo esto junto, llegamos al código definitivo para la plantilla:

<infobox layout="stacked">
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
 <group>
  <header>Details</header>
  <data source="conflict"><label>Conflict</label></data>
  <data source="date"><label>Date</label></data>
  <data source="place"><label>Place</label></data>
  <data source="result"><label>Outcome</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Combatants</header>
  <data source="side1" />
  <data source="side2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Commanders</header>
  <data source="commanders1" />
  <data source="commanders2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Strength</header>
  <data source="forces1" />
  <data source="forces2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Casualties</header>
  <data source="casual1" />
  <data source="casual2" />
 </group>
 <data source="civilian"><label>Civilian casualties</label></data>
</infobox>

Ahora podemos usarla en un artículo, y la misión está cumplida:

{{Battle
 |prev        = [[Battle of Fair Isle]]
 |conc        = [[Siege of Old Wyk]]
 |next        = [[Siege of Pyke]]
 |name        = [[Siege of Great Wyk]]
 |image       = Stannis Great Wyk.png
 |conflict    = [[Greyjoy Rebellion]]
 |date        = 289 AL
 |place       = [[Great Wyk]], the [[the Iron Islands]]
 |result      = [[Iron Throne]] victory
 |side1       = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[House Greyjoy]]
 |side2       = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
 |commanders1 = Unknown
 |commanders2 = Lord [[Stannis Baratheon]]
 |casual1     = Unknown
 |casual2     = Unknown
}}
 

Grupos plegablesEditar

PI-Collapse.png

Grupos plegables en acción.

Los grupos se pueden hacer plegables añadiendo collapse="open" o collapse="closed" a la etiqueta del grupo. Esto hará que la cabecera de la fila del grupo sea clicable (para poder mostrar u ocultar el grupo), y el grupo aparecerá expandido o cerrado según corresponda.

<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>

Nota: la fila de cabecera que tenga contenido debe seguir inmediatamente a continuación de la etiqueta del grupo para que esto funcione.

Uso avanzadoEditar

Dándole formato al campoEditar

Si quieres añadir alguna información extra a los datos (como añadir iconos, categorías, etc.) o ver valores anteriores, el formato del campo te puede permitir hacerlo.

  • Cuando la etiqueta format se especifica para el nodo, la variable proporcionada en source= se modifica tal y como se especifica en la etiqueta format. Para este propósito, el parámetro tiene que ser proporcionado en tres tirantes; por ejemplo {{{price}}} for source="price".
  • Si la variable proporcionada en source= está vacía, el nodo carga los valores proporcionados en las etiquetas defaults (o no las carga si las etiquetas default no se especifican). Los contenidos de default nunca están disponibles en funciones parser; ejemplo el parámetro {{{price}}} se mantendrá vacío. Puede ser tomado como el significado de 'formato por defecto', no 'valor por defecto'

Algunos ejemplos cómo estos pueden usarse:

  • Texto adicional - <format>${{{price}}}</format>>
  • Enlaces - <format>[[{{{location}}}]]</format>
  • Categorías - <format>[[Category:{{{car type}}}]]</format>

En este caso, agregamos una plantilla {{money icon}}:

<data source="price">
 <label>Price</label>
 <format>{{{price}}} {{money_icon}}</format>
</data>

El efecto que se muestra a la derecha se puede conseguir con la siguiente sintaxis:

Field mutators.png

Campos con formato

<header>Price to buy</header>
<data source="buyh">
 <label>Price with Haggling</label>
 <format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="buy">
 <label>Undiscounted price</label>
 <format>{{{buy}}} {{oren2}}</format>
</data>
<data source="sell">
 <label>Price to sell</label>
 <format>{{{sell}}} {{oren2}}</format>
</data>
<data source="weight">
 <label>Weight</label>
 <format>{{{weight}}} {{weight}}</format>
</data>

Funciones parserEditar

Se pueden añadir Funciones parser a cualquier infobox. Sin embargo, los resultados se ocultarán automáticamente si el parámetro, etiqueta o fuente de datos no contiene ningún texto.

Template code Output
<data source="level">
  <label>Rank</label>
  <default>Orc {{#switch:{{{level}}}|1=peon|2=grunt|#default=grunt}}</default>
</data>


No tendría sentido para probar la cadena vacía en la instrucción switch; ejemplo, |=(unknown rank), porque ya está cubierto por la etiqueta default.

Ejemplos Editar

Sección de ayuda y comentariosEditar

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

Spotlights de otros wikis

Wiki al azar