Infobox/Básico

Esta es una **introducción básica** a las infoboxes. Una descripción completa de todas las funcionalidades de infoboxes que se pueden encontrar en las páginas de ayuda. Para diseñar infoboxes más complejas puede ser necesario tener un conocimiento más complejo de las Plantillas.

## Primer paso

El primer paso es decidir que contenidos necesitas tener en una infobox. Hacerte un esquema en un papel o en una tabla te puede ayudar. Vamos a analizar esto usando un caso práctico.

## Caso práctico

Suponte que un editor quiere crear una infobox para un personaje, por ejemplo Batman. A continuación tienes los pasos a seguir.

### Planificación

Batman es un personaje bastante popular y estaría muy bien tener algunos datos básicos sobre él. La siguiente tabla muestra algunos de sus atributos.

 Habilidades
 Alias
 Afiliación

### Construyendo la infobox

#### Paso 1

Primero crea una página con el prefijo "Plantilla:", por ejemplo Plantilla:Personaje infobox.

#### Paso 2

Escribe lo siguiente en la página "Plantilla:Personaje infobox" y guarda:

```
<infobox>
 <data source="nombre">
 <label>Nombre</label>
 </data>
</infobox>

```

Ahora ve a cualquier página de pruebas, por ejemplo Special:MyPage/pruebas y escribe:

### Nombre

Bruce Wayne

```
{{infobox_personaje|nombre=Bruce Wayne}}
```

Eso debería de mostrar la infobox a la derecha.

## Comprendiendo tu primera infobox

Las infoboxes deben de tener un "texto" que empiece una sección y otro que la termine (esto es lenguaje de marcado XML).

### Etiquetas

Una etiqueta es un pequeño texto que empieza por "<" y termina por ">", por ejemplo `<pre>`. Hay muchas etiquetas que se pueden usar para cambiar la apariencia de una infobox. Las más comunes incluyen `<data>,<image>,<title>,<label>` y `<header>`.

## Cómo funciona

Ahora toca comprender cómo funciona.

1. `<infobox>` - Esta es la etiqueta que indica el comienzo del código de la infobox.
2. `<data>` - Esta indica que el comienzo de una sección que contendrá algunos datos, por ejemplo un nombre y un título.
3. source - Esto se llama un atributo, e indica de dónde proviene la entrada, por ejemplo el nombre de una plantilla o de un parámetro de plantilla. Siempre debe ir en la forma de `source = "texto"`. Es sensible a las mayúsculas, por lo que `source = "NOMBRE"` no es lo mismo que `source= "nombre"`.
4. `<label>` - Esto define que título se debe usar para el valor introducido. Comienza con '<label>' y termina con '</label>'. Ten en cuenta la barra (/).
5. `</data>` - Esto indica el final de la sección <data>.
6. `</infobox>` - Esto indica el final de la infobox.

**Nota:** La información en la infobox se muestra en el orden en el que se introduce.

### Secciones autoocultables

Cuando una sección como `<data>` no recibe ninguna información (por ejemplo source="nombre") se oculta automáticamente. En algunos casos puede ser que se oculte toda la infobox. Por ejemplo, si se cambia el ejemplo de arriba, y se introduce el siguiente texto, no aparecerá nada porque no hay información que mostrar:

```
{{infobox personaje}}
```

También puede pasar que si la "source" se escribe incorrectamente o usa una capitalización diferente (por ejemplo todo mayúsculas):

```
{{infobox personaje|NOMBRE="Bruce Wayne}} <!-- Esto no funciona en el ejemplo de arriba-->
```

```
{{infobox personaje|nombre="Bruce Wayne}} <!-- Esto funciona -->
```

## Añadiendo más a la infobox

### Título

La infobox puede tener un título. Para ello en vez de usar <data> hay que usar <title>:

```
<infobox>
 <title source = "título"></title>
 <data source="nombre">
 <label>Nombre</label>
 </data>
</infobox>

```

Como antes, introduce este texto para probar tu infobox en la página de pruebas:

## Batman

### Nombre

Bruce Wayne

```
{{infobox personaje

```

¡Ahora la infobox tiene un título!

### Imágenes

La infobox se puede mejorar más con una imagen como esta:

```
 <image source = "imagen"></image>

```

### Data

La etiqueta <data> es la parte más importante de la infobox. Almacena los detalles y descripción de cada elemento (o fila), y puede haber tantas como se necesite. Por ejemplo, el nombre de un personaje y la descripción del campo. Normalmente usa el siguiente formato:

```
<data source = "nombrefuente">
   <label> Descripción </label>
</data>

```

Para este caso en particular, el nombre, alias, habilidades y la afiliación se pueden añadir como se muestra a continuación:

### Habilidades conocidas

Artes marcialesInteligencia a nivel de genio

### Afiliación

Liga de la Justicia

```
<infobox>
 <data source="nombre">
 <label>Nombre</label>
 </data>
 <data source="alias">
 <label>Alias</label>
 </data>
 <data source="habilidades">
 <label>Habilidades conocidas</label>
 </data>
 <data source="afiliación">
 <label>Afiliación</label>
 </data>
</infobox>

```

### Cabeceras de sección

Las cabeceras de sección se pueden usar para describir una sección específica como "información general" o "familia". Estas se pueden añadir con un ligero cambio:

```
 <header>Información general</header>

```

#### Ejemplo

```
 <header> Información general</header>
 <data source="nombre">
 <label>Nombre</label>
 </data>

```

Advierte que la cabecera `<header>` es otro tipo diferente de etiqueta, y no tiene "source".

### Navegación

También se puede añadir contenido que ayuda a la gente a navegar usando la etiqueta "<navigation>":

```
 <navigation>Fuentes</navigation>

```

Esto permite añadir cualquier texto y se puede usar para poner notas al pie, enlaces a la plantilla de origen, o cualquier otra cosa. Al igual que las etiquetas de `header` y `label`, `<navigation>` no necesita tampoco ninguna "source".

## Poniéndolo todo junto

Ahora con todos los conceptos de arriba aprendidos los podemos usar combinados:

Escribe lo siguiente en una página de pruebas:

```
{{infobox personaje
Inteligencia a nivel de genio
}}

```

Los contenidos de la "Plantilla:Infobox personaje" deberían de aparecer como el cuadro de la izquierda (mira la infobox personaje), y la infobox aparecerá como la que hay a la derecha.

## Información

### Habilidades conocidas

Artes marcialesInteligencia a nivel de genio

### Afiliación

Liga de la Justicia

```
<infobox>
 <title source = "título"></title>
 <image source = "imagen"></image>
 <header>Información</header>
 <data source="nombre">
 <label>Nombre</label>
 </data>
 <data source="alias">
 <label>Alias</label>
 </data>
 <data source="habilidades">
 <label>Habilidades conocidas</label>
 </data>
 <data source="afiliación">
 <label>Afiliación</label>
 </data>
 <navigation>[//batman.com Página Oficial]</navigation>
</infobox>

```

## Véase también

* Infoboxes.
* Ayuda:Infobox.
* Plantillas.