Comunidad Central
Advertisement
Comunidad Central

Ejemplo de una infobox.

Esta extensión está activada por defecto en Fandom.

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

Fandom ha desarrollado una forma de codificar infoboxes llamada infoboxes portátiles, para lograr que se visualicen bien en cualquier dispositivo. No cambia la manera en cómo se usan en los artículos, si no la forma en cómo se crea la plantilla de la infobox. Se recomienda usar la forma estándar de infoboxes portátiles para las comunidades.

Enlaces útiles:

Añadir una infobox a un artículo

Se puede añadir una infobox a un artículo del mismo modo en lo que harías con cualquier otra plantilla; siendo a través de las herramientas integradas de plantilla de los editores de páginas. En el editor visual, las infoboxes pueden insertarse rápidamente mediante la opción "Infobox" del desplegable "Insertar":

Entre tanto, en el editor de 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, para la imagen al inicio del artículo, tendríamos algo como esto:

{{Infobox
 | título        = Una bonita flor
 | imagen        = Example.jpg
 | piedeimagen   = Floweris flowerum
 | primero       = Rosa y verde
 | segundo       = Exterior
 | cuarto        = Anual
 | anterior      = I
 | siguiente     = III
}}

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.

Crear una infobox

Una infobox que utiliza las etiquetas mostradas para crear los campos con la distribución definida.

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

<infobox layout="stacked">
  <title source="título">
    <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 dos:

  <data source="color">
    <label>Color</label>
  </data>
  <data source="personalidad">
    <label>Personalidad</label>
  </data>

Después de añadirlos debajo de <image>, nos resulta lo siguiente:

<infobox layout="stacked">
  <title source="título">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="imagen" />
  <data source="color">
    <label>Color</label>
  </data>
  <data source="personalidad">
    <label>Personalidad</label>
  </data>
</infobox>

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

{{InfoboxDeEjemplo
| título = Rana
| imagen = Rana.png
| color = Crema
| personalidad = Alegre
}}

Esconder valores

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á. Dentro de una etiqueta <image>, las imágenes que no existan no mostrarán un enlace rojo, pero la página de archivo sí aparecerá en Especial:ArchivosRequeridos.

Modificar el estilo de una infobox

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á la fila correspondiente de la plantilla (a menos que se haya usado la etiqueta <default>).

Opciones de distribución

Hay disponibles dos opciones alternativas de distribución para infoboxes:

Distribución tabular (predeterminada)
Los nombres de campos se muestran a la izquierda de los valores.
<infobox>
   ...
</infobox>

Distribución tabular de una infobox. Este diseño es el que utiliza la etiqueta <infobox> por defecto.

Distribución agrupada
Los nombres de campos se muestran arriba de los valores.
<infobox layout="stacked">
   ...
</infobox>

Distribución agrupada de una infobox.

Tematización personalizada

Hay unas cuantas maneras de personalizar el aspecto de tus infoboxes. Se recomienda que no los combines demasiado porque pueden volverse confusos para otros que intenten entender cómo se aplican los estilos.

  1. El color de esquema predeterminado depende de las elecciones de color hechas en el diseñador de temas; el color de fondo será el mismo que el "color de fondo del artículo", los títulos y encabezados tendrán el "color predominante" como fondo, y el borde será una versión semi-opaca del color predominante. (Hay otras dependencias, pero van más allá del alcance de esta página. Véase la guía de preparación de FandomDesktop para más detalles.)
  2. El control completo del tema de las infoboxes requiere modificar el CSS local de la comunidad. La clase portable-infobox puede ser usada para apuntar a todas las infoboxes de el wiki, y usando los atributos type, theme, o theme-source en una etiqueta <infobox> se añadirán clases que harán más sencillo tematizar plantillas de infobox específicas. (Para más información sobre como tematizar una infobox con estos atributos, revisa Ayuda:Infoboxes/CSS, o encuentra ejemplos de estilos y temas en el Hub de Portabilidad.)
    • El atributo type define el tipo lógico de la infobox (como "personaje" u "objeto"). Todas las infoboxes del mismo tipo tendrán la misma clase CSS.
    • El atributo theme agrupa infoboxes por un tema (como "temporada 1" o "navidad"). Todas las infoboxes con el mismo tema tendrán la misma clase CSS.
    • El atributo theme-source te permite cambiar el tema de la infobox con un parámetro de plantilla. Digamos que tienes criaturas que nacen de los elementos griegos ancestrales. El tema de la infobox puede cambiarse basado en si el usuario define el parámetro elemento a Aire, Tierra, Fuego o Agua, por ejemplo.
  3. Los colores de texto y fondo de los encabezados se pueden configurar para cada instancia de una infobox usando el método descrito en colores predominantes a continuación. Este método produce CSS en línea que anula todos los demás métodos, pero se limita solo al título y los encabezados.

Colores predominantes

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 predominante. 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.

Estilo por elemento

Los elementos individuales en una infobox pueden incluir marcadores dentro de los resultados HTML que permiten indicarlos con selectores CSS conocidos como atributos de datos.

  • Todos los elementos de infobox portátiles que tengan una entrada de source ahora se representarán en HTML con ese nombre de parámetro en un atributo de datos, como data-source="ATK". Esto te permitirá escribir selectores de CSS o jQuery como .pi-item[data-source=ATK] para diseñar e identificar elementos individuales. Usado en combinación con type, esto debería eliminar la necesidad de la selección del estilo nth-of-type y abre otras posibilidades para el diseño y la interactividad.
  • El nuevo atributo name permite la selección explícita de elementos, ya sea que acepten una fuente de entrada o no, incluida la identificación de <title>, <group>, <data>, <header>, <image>, y <navigation>. Al igual que el atributo de datos data-source, <data name="bar"> se puede seleccionar como .pi-item[data-item-name=bar].

Usar imágenes y videos en una infobox

Añadir imágenes

Una infobox que describe planetas, usando paneles definidos por etiquetas <gallery>.

Para utilizar múltiples imágenes o videos en una sola infobox, simplemente debes colocar una etiqueta <gallery> y utilizarla como lo harías en un artículo. Por ejemplo, puedes ver una galería como esta:

<gallery>
Planeta1.png|Planeta 1
Planeta2.png|Planeta 2
Planeta3.png|Planeta 3
</gallery>

Para añadirla a una infobox basta con añadirla dentro del parámetro definido por la etiqueta <image> (en el caso de este ejemplo, el parámetro se define con source="imagen" en <image source="imagen" />). Entonces añadiríamos a un artículo un código como este:

{{InfoboxPlaneta
| título = Planetas comunes
| imagen = <gallery>
Planeta1.png|Planeta 1
Planeta2.png|Planeta 2
Planeta3.png|Planeta 3
</gallery>
| color = Azul, verde y blanco
| ubicación = Espacio
| propiedades = Tiene vida
| temperatura = Cálida
}}

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

Añadir videos

En el caso de los videos es más complejo. Si bien las galerías funcionan en móvil, en escritorio estas no se muestran correctamente si el archivo es subido desde Especial:SubirArchivo (colocar un video (sin usar galerías) en un parámetro definido por la etiqueta <image> no tiene el efecto deseado en escritorio), a diferencia de si es subido a través de la herramienta de inclusión de videos.

Una manera de eludir este inconveniente es usando paneles de infobox en conjunto con etiquetas como <format> o <navigation>, para así colocar videos a través de wikitexto. En ese caso, puedes crear un código como este:

<infobox>
  <title source="título">
    <default>{{PAGENAME}}</default>
  </title>
  <panel>
  	<section>
  	   <label>Imagen</label>
  	      <image source="imagen" />
  	</section>
  	<section>
  		<label>Video 1</label>
  		<data source="video1">
  			<format>{{{video1}}}</format>
  		</data>
    ...
  </panel>
  ...
</infobox>

Puedes poner tantos paneles de video como sean necesarios (recuerda no excederte, quizá sea mejor dejar un solo video en la infobox y colocar el resto en una sección == Galería ==. Finalizando, solo debes usar un código como este en el artículo:

{{InfoboxLuna
| imagen = <gallery>
Luna1.png|Luna 1
Luna2.png|Luna 2
</gallery>
| video = [[Archivo:Luna y planeta.mp4]]
}}

Y listo, tendrías ya un video en una infobox. Puedes ver más sobre paneles en la sección de paneles de infobox.

Agrupar información en una infobox

Una infobox con un orden inusual.

Ahora que has creado una infobox sencilla 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 campos <data>, luego campos individuales <title> e <image>. Como puedes ver, el campo <title> no tiene que ser el primer campo.

<infobox layout="stacked">
 <data source="previo"><label>Previo</label></data>
 <data source="concurrente"><label>Concurrente</label> </data>
 <data source="siguiente"><label>Siguiente</label></data>
 <title source="título" />
 <image source="imagen" />
</infobox>

Agrupar información dentro de etiquetas de grupo

Grupo agrupado de manera vertical.

La etiqueta <group> te permitirá poner una serie de campos de manera agrupada y darles 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 ninguno de los campos (salvo la etiqueta <header>) dentro de un grupo tiene un valor, el grupo entero no se visualizará.

<infobox layout="stacked">
 <data source="previo"><label>Previo</label></data>
 <data source="concurrente"><label>Concurrente</label> </data>
 <data source="siguiente"><label>Siguiente</label></data>
 <title source="título" />
 <image source="imagen" />
  <group>
   <header>Detalles</header>
    <data source="color"><label>Color</label></data>
    <data source="tipo"><label>Tipo</label></data>
    <data source="ubicación"><label>Ubicación</label></data>
 </group>
</infobox>

Diseño horizontal para grupos

Grupo agrupado de manera horizontal.

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 <group>.

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

Distribución inteligente para grupos

La distribución "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 un límite definido, el siguiente campo de dato aparecerá en una nueva fila. Los elementos en una fila se ajustarán para cubrir todo el ancho disponible.

Para usar grupos inteligentes, añade row-items="3" (o algún otro 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 <data> individual para devolverla a un formato vertical.

Para que un campo de datos determinado ocupe más de un espacio, usa el atributo span="2" en una etiqueta <data>, similar a como funciona el atributo colspan en columnas de tablas HTML.

<infobox layout="stacked">
 <title source="título" />
 <image source="imagen" />
  <group row-items="3">
   <header>Detalles</header>
    <data source="color"><label>Color</label></data>
    <data source="tipo"><label>Tipo</label></data>
    <data source="ubicación" layout="default"><label>Ubicación</label></data>
 </group>
</infobox>

Forzar todos los elementos de grupo a ser mostrados

Una infobox inusual completa.

Usando show="incomplete" puedes forzar que todos los elementos del grupo se visualicen, 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>Destinos</header>
      <data source="destino1" />
      <data source="destino2" />
 </group>

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

<infobox layout="stacked">
 <data source="previo"><label>Previo</label></data>
 <data source="concurrente"><label>Concurrente</label> </data>
 <data source="siguiente"><label>Siguiente</label></data>
 <title source="título" />
 <image source="imagen" />
  <group>
    <header>Detalles</header>
      <data source="color"><label>Color</label></data>
      <data source="tipo"><label>Tipo</label></data>
      <data source="ubicación"><label>Ubicación</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
    <header>Destinos</header>
      <data source="destino1" />
      <data source="destino2" />
 </group>
</infobox>

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

{{Objeto
| título = Gema
| imagen = Gema morada.png
| previo = Piedra simple
| concurrente = Polvo estelar
| siguiente = Cristal mágico
| color = Morado
| tipo = Gema mágica
| ubicación = Planeta 1
| destino1 = Planeta 2
| destino2 = Planeta 3
}}

Grupos contraíbles

Grupos plegables en acción.

Los grupos se pueden hacer contraíbles 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="open">
    <header>Detalles</header>
      <data source="color"><label>Color</label></data>
      <data source="tipo"><label>Tipo</label></data>
      <data source="ubicación"><label>Ubicación</label></data>
 </group>
 <group collapse="open" layout="horizontal" show="incomplete">
    <header>Destinos</header>
      <data source="destino1" />
      <data source="destino2" />
 </group>

Nota: Una etiqueta <header> que tenga contenido debe ser el primer elemento entro de la etiqueta <group> para que esto funcione.

Paneles

Ejemplo de una infobox que usa paneles.

Los elementos y grupos de datos ahora pueden estructurarse en paneles que hacen la función de pestañas, lo que permite mayor flexibilidad y una visualización más inteligente de los datos en las vistas de escritorio y móviles. Cada <panel> (como elemento hijo del elemento <infobox>) se puede etiquetar con <label> y uno o más elementos <section> para crear un conjunto de pestañas. Cualquier elemento que de otro modo sería un elemento hijo de <infobox> puede ser un elemento hijo de <section> (excepto otro panel; los paneles dentro de otros paneles no son soportados). Esto debería reducir el acumulamiento y la necesidad de grupos de infoboxes en páginas mientras que se estructuran infoboxes de maneras más dinámicas.

La etiqueta <section> representa los contenidos de una pestaña. El botón de alternado presionable se representa con una etiqueta <label>. Los campos se definen por defecto a su índice basado en cero si se omiten; si todas las pestañas dentro de un panel no tienen campos, entonces estarán contenidas en la infobox como si fueran grupos. Debajo se halla un código para construir una infobox con paneles:

<infobox>
  <title source="título">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="imagen" />
  <group>
    <header>Descripciones</header>
      <panel>
        <section>
          <label>Original</label>
          <data source="apariencia1">
            <label>Apariencia</label></data>
          <data source="tipo1">
            <label>Tipo</label></data>
          <data source="propósito">
            <label>Propósito</label></data>
          <data source="hogar">
            <label>Hogar</label></data>
        </section>
        <section>
          <label>Alterno</label>
          <data source="apariencia2">
            <label>Apariencia</label></data>
          <data source="tipo2">
            <label>Tipo</label></data>
          <data source="variación">
            <label>Variación</label></data>
          <data source="origen">
            <label>Origen</label></data>
        </section>
      </panel>
  </group>
</infobox>

Controles avanzados

Aplicar formato

Si quieres añadir alguna información extra a los datos (como añadir iconos, categorías, etc.) o procesar los valores declarados, aplicar formato al campo te puede permitir hacerlo.

  • Cuando se usa la etiqueta <format>, la variable proporcionada en el atributo source de la etiqueta <data> puede procesarse o modificarse con wikitexto. Para este propósito, se accede al valor del parámetro rodeándolo con tres llaves; por ejemplo {{{price}}} para source="price", tal como en otras plantillas.
  • Si la variable proporcionada en source= está vacía, el campo no se carga a menos que se proporcione un valor en una etiqueta <default>.

Algunos ejemplos de uso son:

  • Añadir texto adicional: <format>${{{precio}}}</format>
  • Proveer un valor predeterminado: <format>${{{precio}}}</format><default>No está a la venta</default>
  • Enlazar a una página: <format>[[{{{ubicación}}}]]</format>
  • Enlazar a una categoría: <format>[[:Categoría:{{{clase}}}]]</format>
  • Categorizar una página: <format>{{{clase}}}[[Categoría:{{{clase}}}]]</format>

En este caso, agregamos una plantilla llamada {{MonedaIcono}}:

<data source="normal">
  <label>Precio normal</label>
  <format>{{{normal}}} {{MonedaIcono}}</format>
</data>

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

Una infobox con campos que tienen formato de wikitexti

<infobox>
  <title source="título">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="imagen" />
  <group>
  <header>Precio de compra</header>
    <data source="normal">
      <label>Precio normal</label>
      <format>{{{normal}}} {{MonedaIcono}}</format>
    </data>
    <data source="compra">
      <label>Precio de compra</label>
      <format>{{{compra}}} {{MonedaIcono}}</format>
    </data>
    <data source="venta">
      <label>Precio de venta</label>
      <format>{{{venta}}} {{MonedaIcono}}</format>
    </data>
    <data source="regateo">
      <label>Precio al regatear</label>
      <format>{{{regateo}}} {{MonedaIcono}}</format>
    </data>
  </group>
</infobox>

Con lo cual puedes usar un código como este en una página:

{{Mercancía
| imagen = Fragmento pequeño.png
| normal = 16
| compra = 15
| venta = 16
| regateo = 12
}}

Funciones parser

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.

Código de plantilla Salida (con #default)
<data source="rango">
  <label>Rango</label>
  <format>{{#switch:{{{rango}}}
              | Iniciado = Guardia iniciado
              | Élite = Guardia élite
              }}
  </format>
  <default>Guardia (de rango desconocido)</default>
</data>

No tendría sentido intentar definir la variable predeterminada porque sería innecesario; es decir, #default, porque ya está cubierto por la etiqueta <default>.

Acceder a los parámetros de plantilla desde otras etiquetas de datos puede hacerse tan solo escribiendo {{{NombreDelParámetro}}}. Debido a que la etiqueta de datos no contiene un source, la fila se ocultará, a menos que coloques tu función parser en la etiqueta <default>. En el ejemplo debajo, la fila se ocultará, si el parámetro de la plantilla "inicio" no es definido.

<data source="inicio">
	<label>Capacidad de almacenamiento inicial</label>
</data>
<data>
	<label>Con un depósito</label>
	<default>{{#if:{{{inicio|}}}|{{#expr:{{{inicio}}}*2}}}}</default>
</data>

Ejemplos de infobox

Ayuda y comentarios

Advertisement