Ayuda:Traslado de infoboxes

Ayuda

Información general | Índice

Esta es una guía paso a paso para convertir fácilmente una infobox clásica de wikitexto a una infobox portátil. Si bien es imposible cubrir cada tipo de infobox, ya que algunas infoboxes son más complejas que otras, deberías hallar estas instrucciones aplicables a la mayoría de casos y situaciones.

Está escrita para gente de cualquier nivel de habilidad. Debería ser una buena guía para construir buenas infoboxes desde el inicio. Hay "mejores prácticas" y principios de portabilidad esparcidos por todas partes para obtener información adicional.

Fundamentos

Antes de que inicies, idealmente deberías tener familiaridad con:

• Wikitexto básico.
• La noción de selectores de CSS y propiedades de CSS.
• Que los términos infobox clásica,infobox de tabla e infobox no portátil significan lo mismo.

Debido a que el marcado de las infoboxes portátiles es en realidad XML, también te podría servir saber qué significa "buen formado de XML". Sin embargo, debido a que la conversión usualmente resulta en XML bien formado, esto suele ser más una habilidad de diagnóstico que una que se necesita activamente para hacer infoboxes portátiles.

Paso 1: Encontrar tus infoboxes

Antes de comenzar el proceso de conversión, tienes que averiguar qué plantillas necesitan ser convertidas. Esto significa hallar todas tus plantillas. Si tienes suerte, la mayoría estará en una categoría, usualmente algo como Categoría:Infoboxes o Categoría:Plantillas de infobox.

Paso 2: Inventario de temas y variaciones potenciales

La primera parte de esto es sencilla. Para migrar infoboxes, mira los artículos donde se usen las plantillas (con Especial:LoQueEnlazaAquí, encontrado en la barra de herramientas). Examina el estilo visual general de cada plantilla e identifica si usan un diseño consistente, si lucen parecidas entre sí pero podrían volverse consistentes, o si son completamente diferentes. Cada diferencia mayor en el diseño puede volverse un theme después. Asegúrate de identificar qué componentes son consistentes (como colores o esquinas redondeadas) entre la mayoría de temas, para que esos estilos generales puedan añadirse al diseño .portable-infobox predeterminado cuando la crees.

La segunda parte es posiblemente un reto bastante técnico, pero es necesaria para un reemplazo consistente de las infoboxes clásicas de una comunidad, La manera más fácil de hacer esto es mirar el código fuente de la infobox clásica para hallar lugares donde el estilo sea cambiado por un parámetro, como class="{{{roundy|10px}}}" o style="width: {{{width|250px}}}; background-color: {{{bgcolor|white}}}". En el último ejemplo, bgcolor puede ser usado como un parámetro theme-source.

Paso 3: Copiar el código accesorio (noinclude e includeonly)

Las plantillas funcionan a base de la transclusión: la inserción de una plantilla fuente en cualquier artículo objetivo. Comúnmente, algunas partes de una plantilla no son útiles en todos los casos, por lo que usamos etiquetas de control de transclusión para controlar eso:

<noinclude>

Esconde el contenido dentro de la etiqueta en la página objetivo. Usualmente, una plantilla necesitará esconder algunas secciones en artículos. Documentaciones, vistas previas de infobox y categorías de plantilla son algunos ejemplos de esto.

<onlyinclude>

Esconde el contenido fuera de la etiqueta en la página objetivo. Esta etiqueta es poco usada, pero separa rápidamente una infobox de otros contenidos de la plantilla. Generalmente, se prefiere <includeonly> para claridad y facilidad de comprensión del código.

<includeonly>

Esconde el contenido dentro de la plantilla en la página fuente. La infobox en sí, categorías de artículo, y hatnotes son ejemplos de contenidos a esconder en la página de la plantilla. Esto ayuda a evitar errores con la detección de infoboxes no portátiles.

Mantener una parte vital de la infobox antigua

Las infoboxes no portátiles usualmente estarán compuestas por dos partes: La tabla de la infobox en sí, y la documentación, categorización, navegación y otra información de soporte fuera de la tabla. Comúnmente luce algo como esto:

<includeonly>{| class="infobox"

. . . varias líneas de código

|}</includeonly><noinclude>{{documentation}}[[Categoría:Infoboxes]]</noinclude>

Copia todo lo que esté antes y después del código de la infobox no portátil. O sea, copia todo lo que se encuentre sobre y bajo {| y |}. En el nuevo código de la infobox portátil, reemplaza la documentación generada automáticamente con lo que has copiado de la infobox original. En el ejemplo arriba, lo siguiente debería ser usado para reemplazar cualquier documentación generada automáticamente en la nueva plantilla:

<noinclude>{{documentation}}[[Categoría:Infoboxes]]</noinclude>

Paso 4: Traducir la distribución y los grupos de la infobox

Debido a la forma en que se codifican algunas plantillas clásicas, los parámetros de wikitexto pueden interpretarse fuera de orden o nunca fueron pensados para ser visibles. La mejor manera de darle la forma adecuada es ir de arriba hacia abajo y comenzar a colocar los elementos en el orden y los grupos adecuados.

Las infoboxes portátiles cuentan con ocultado automático si no se proporciona ningún valor, por lo que no es necesario código adicional para esconder esos elementos de datos. De hecho, si una etiqueta <group> tiene dentro una etiqueta <header> y ningún elemento del grupo tiene valores, el encabezado no se mostrará.

Nota: Varias comunidades definen valores como "Desconocido" o "?" en sus infoboxes si no se define ningún valor. Si bien es aceptable, no es lo ideal (y tiende a producir desorden visual) a menos que se requiera un diseño de cuadrícula horizontal estricto, que debería usar la función show="incomplete".

Tipos de datos

¿Es una imagen, título, datos, navegación, encabezado, etc.? Esto no siempre es sencillo de identificar.

• La etiqueta <title> maneja títulos, y dichos títulos no muestran etiquetados visibles. Para estar realmente listo para datos, debería también manejar títulos alternativos, como los de otros idiomas, traducciones de títulos, o subtítulos. En CSS, es fácil darle diseño a títulos secundarios con algo como .pi-title ~ .pi-title.
  • Muchas infoboxes son autogeneradas con <title source="nombre"><default>{{PAGENAME}}</default></title>. Para mantener el código más limpio posible, las infoboxes deberían estar incluidas en etiquetas <includeonly> (por ejemplo algo como <infobox><title source="name"><default>{{PAGENAME}}</default></title>...</infobox> cuando sea posible.
  • Los títulos por idioma deben consolidarse en un único elemento de datos cuando sean equivalentes, como las representaciones kanji/kana/rōmaji del mismo título. Por lo general, no se requiere un indicador visual de qué idioma se está usando, aunque usar una bandera para representar un idioma es una mala práctica; si se proporciona una variedad de traducciones de títulos (más allá del idioma de origen y el idioma de el wiki), estas deben ser elementos <data> en un elemento <group>.
  • Los títulos por región o región de idioma deberían estar separados, como los títulos en español que son diferentes en Latinoamérica y España. Esto se debe a que, al final, son piezas de datos diferentes.
  • Un logotipo para un tema debe ser secundario a una representación textual de un título, por lo que debe ser un título secundario o un elemento <data>.
• La etiqueta <image> maneja imágenes, y dichas imágenes no muestran etiquetados visibles.
  • Los campos de imagen solo manejan datos de imagen. Texto e imágenes combinados solo mostrarán la imagen.
  • Los campos de imagen pueden contener un elemento hijo <tabber> o <gallery> para producir una galería con pestañas (o una galería deslizante en dispositivos móviles). Debido a simplicidad de código, se prefiere <gallery>. Dependiendo de cómo se use esta característica, se puede requerir cambiarla a usar a una función parser {{#tag:gallery}} en su lugar. No todas las propiedades de galerías que están disponibles fuera de una infobox están disponibles dentro de una, como las slideshows (presentaciones de diapositivas).
  • La etiqueta hija <caption> maneja subtítulos. Si un campo de imagen tiene una <gallery> dentro, el "subtítulo" usado por el elemento de galería se vuelve el etiquetado de la pestaña.
  • Los campos de imagen no requieren rutas de Archivo completas ni enlaces Archivo: internos, aunque los aceptarán en la mayoría de casos. Sin embargo, cualquier tamaño o información de subtítulos que se agregue al enlace Archivo: no tendrá ningún efecto.
  • Los campos de imagen cambiarán dinámicamente el tamaño de las imágenes (que sean más anchas de 130px) para que se ajusten mejor a cualquier plataforma, hasta un máximo de 270px – 300px. Las imágenes más pequeñas, si realmente describen el tema de la infobox, simplemente permanecerán en su tamaño original; si la imagen más pequeña es un ícono de juego o información complementaria similar, debería ser un campo <data> en su lugar.
• La etiqueta <data> es tu área general para la mayoría de otros parámetros.
• La etiqueta <navigation> es un área sin etiquetado para añadir wikitexto arbitrario.
  • Los íconos en el área de "título" superior deberían considerarse navegación, ya que no son explícitamente ni un <title> ni un <image>.

Grupos

Los grupos verticales típicos son fáciles de reconocer. Para los grupos horizontales, hay dos opciones: diseño tradicional "horizontal" y grupos "inteligentes". Cada uno puede tener un estilo diferente, si hay motivos para hacerlo, pero puede haber razones para elegir uno u otro.

Los grupos horizontales tradicionales son rígidos y están destinados a un número pequeño y fijo de elementos cuando hay poca variación. Por ejemplo, los campos Anterior y Siguiente deberían usar grupos horizontales. Deberían usarse en grupos lógicos donde el diseño es un máximo de una fila de diseño. En cambio, los grupos inteligentes están pensados para conjuntos de elementos potencialmente más grandes y variados. Responden a la cantidad de elementos y ajustarán cada elemento a una nueva fila de diseño cuando alcancen la cantidad máxima de elementos definida en la propiedad de grupo row-items.

Etiquetados de datos

Los etiquetados de datos contienen la mayoría de wikitexto. Deberían también respetar <noinclude> (para aclarar un etiquetado de una manera que no es mostrada, para propósitos de edición) e <includeonly> (para mostrar partes de un etiquetado que solo deberían aparecer en un artículo, no el editor). Si además contienen un ícono de información (infoicon), deberían ser cuidadosas para evitar problemas de accesibilidad. Solo elementos <data> tienen etiquetados visibles.

Desde una perspectiva de legibilidad y accesibilidad, debe tenerse en cuenta que los etiquetados centrados verticalmente no definen bien un elemento de datos más alto, ya que el ojo humano tiende a rebotar de formas inesperadas. Además, los etiquetados cortos como "ATK" y "DEF" pueden tener sentido para un lector nativo de inglés, pero deberían usar <abbr> para ayudar a la comprensión de otros que pueden no estar familiarizados con el tema o el idioma. Por el contrario, los etiquetados muy largos sin saltos de línea pueden simplificarse mejor en palabras más pequeñas. Un ancho igual de etiquetado a valor (es decir, 50% de ancho de etiquetado) es igualmente menos legible con elementos de datos verticales, ya que quita énfasis del valor real (y generalmente agrega espacios en blanco de color), y debería evitarse en nuevas plantillas. Si se debe aumentar el ancho de un etiquetado, la propiedad CSS adecuada es flex-basis.

Paso 5: Formato y predeterminado

Por lo general, es una buena idea tener los datos de entrada más simples para alimentar la plantilla, reducidos a un tipo de datos simple (como un número, cadenas de texto, enlaces o listas de estos). Con ese fin, la etiqueta <format> puede transformar la entrada sin formato en una salida formateada. Por ejemplo, un artículo con un costo de "10 oro" (asumiendo que "oro" es la única unidad monetaria posible para ese valor de datos) puede tener la entrada de "10" y usar la etiqueta <format> para mostrar el valor visible como "10 oro" (o use un ícono de información en el juego para el oro, etc.). La etiqueta <format> se puede usar en las etiquetas <data> o <title>, pero no en <image> o <navigation>.

Los valores predeterminados con <default> aparecen solo cuando el artículo no proporciona un valor para el parámetro nombrado en source=. La etiqueta <default> se puede usar en las etiquetas <data> o <title> o <image>, pero no <navigation>.

Los valores predeterminados deberían evitar los valores predeterminados de tipo "Desconocido" o "-", a menos que sean necesarios para el diseño. Las infoboxes portátiles están diseñadas para no mostrar valores que no se utilizan en la llamada de plantilla de un artículo, por lo que no es necesaria la lógica para ocultarlo; además, si no se utilizan elementos de datos en un grupo, el grupo y su encabezado no aparecerán a menos que se agregue el atributo show="incomplete" al grupo.

Consejo: La automatización no siempre es una buena idea. A primera vista, omitir el nombre o el título en favor de la palabra mágica {{PAGENAME}} es eficiente, pero puede ser problemático cuando el nombre de la página cambia o se califica o desambiguado o el título contiene caracteres o etiquetas que no se pueden duplicar con el nombre de un artículo. Tener otros elementos, como imágenes, que dependen del nombre de la página puede hacer que las cosas sean mucho más difíciles si los usuarios de una comunidad no entienden la magia interna y la lógica de tu plantilla para la entrada o el mantenimiento de datos básicos. Llamar a plantillas auxiliares, funciones Lua o funciones parser anidadas complejas pueden contribuir a la confusión del usuario si las plantillas alguna vez necesitan ser revisadas o desenredadas.

Si un elemento de datos no necesita procesado (es decir, solo se usa el {{{parámetro}}} y no se modifica con funciones o estilo), no es necesario incluir las etiquetas <default> y <format>. Esta función por sí sola simplifica drásticamente algunas infoboxes clásicas durante la migración. De lo contrario, el uso efectivo de <default> y <format> es el núcleo del traslado de infoboxes.

Consejo: si estás agregando una categoría que depende de un valor de <data>, declarar esa Categoría en un switch aquí evitará que lo hagas más adelante.

Paso 6: Diseño

Aquí hay otra área donde las inboboxes clásicas pierden gran parte de su volumen con el traslado. El estilo en las infoboxes portátiles se logra mediante CSS global. El CSS en línea (con los atributos de estilo y clase) se elimina siempre que sea posible.

Si todos los elementos del mismo tipo tienen el mismo estilo, estos estilos deben cambiarse al CSS predeterminado .portable-infobox o a un tema.

Si un valor tiene un estilo diferente a los demás de su tipo (por ejemplo, una transcripción rōmaji en cursiva junto a kanji o kana), use wikitexto (por ejemplo, ''') o un etiqueta HTML apropiada (por ejemplo, <dfn>) para compensarlas dentro de <format>. El wikitexto que no usa CSS siempre se considera portátil.

Se recomienda no alterar el ancho de las infoboxes del valor predeterminado usando CSS, ya que las imágenes dentro del cuadro de información comenzarán a exceder los límites de la infobox. Las imágenes que se estrechan usando CSS inevitablemente se distorsionan.

Tematización y color predominante

Diseñar inboboxes portátiles en CSS es un tema más complejo de lo que permite esta guía, pero se cubre con cierta profundidad en Ayuda:Infoboxes/CSS.

Paso extra: Configurar CSS central y aprobar los borradores

Según la complejidad del CSS y el código de soporte, generalmente no es necesario un wiki de pruebas por separado. Desarrollar el código de plantilla directamente en la comunidad principal utilizando el sistema de borradores es sencillo y facilita la prueba de la nueva plantilla con los artículos existentes, ya que proporcionará resultados tan buenos o mejores que un wiki de prueba independiente.

El sistema de borrador es muy eficaz para poder probar rápidamente las plantillas aplicadas a una página, al obtener una vista previa de la página con /borrador agregado al final del nombre de la plantilla, similar a usar /sandbox. Funciona en todas las plantillas, no solo en las infoboxes.

Colocar .portable-infobox y otro CSS específico de inboboxes portátiles en una hoja de estilo separada (MediaWiki:Temas.css) importada a MediaWiki:Common .css también puede ser útil. La línea de importación en la hoja de estilos de aspecto principal @import url("/load.php?mode=articles&articles=MediaWiki:Themes.css&only=styles"); cargará Temas.css de manera optimizada.

Conclusión

El traslado de infoboxes clásicas a inboboxes portátiles puede hacer que sean mucho más simples para el mantenimiento futuro y permitir cambios de estilo completos sin volver a codificar muchas plantillas. El lenguaje está diseñado para ser flexible y poderoso. Si tienes problemas de traslado, no dudes en obtener ayuda del personal de Fandom.

Ayuda y comentarios

• Navega y busca otras páginas de ayuda en Ayuda:Contenidos.
• Revisa Comunidad Central de Fandom para más fuentes de ayuda y soporte.
• Revisa Contactar con Fandom para saber cómo reportar algún error o algún paso que no esté claro en este artículo.