FANDOM


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

La vista en pestañas o tab view es una manera fácil de mostrar varias páginas de contenido en un solo artículo mediante pestañas. Esta puede ser una manera útil y atractiva para ver y organizar el contenido.

Para una extensión similar que no requiere varias páginas, ver Ayuda:Tabber.

Paso a paso

  • Primero necesitas crear una página de contenido para cada pestaña que quieras mostrar. Estas páginas se pueden crear en cualquier lugar de tu wiki.

En este ejemplo hemos creado tres subpáginas de este artículo, las cuales usaremos en nuestras pestañas de abajo. Sus títulos son:

  • Edita la página en la que te gustaría mostrar las pestañas y cambia a modo fuente.
  • Inserta el código de las pestañas de la siguiente manera:
<tabview>
NOMBREPÁGINA1|TÍTULO1
NOMBREPÁGINA2|TÍTULO2
NOMBREPÁGINA3|TÍTULO3
</tabview>

Entonces, en nuestro ejemplo, escribiríamos:

<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>

Esto nos daría las siguientes pestañas:


Personalización

Además del título, hay otras dos variables que puedes personalizar en tus pestañas: Cache y Preset. Están configuradas de esta forma:

<tabview>
NOMBREPÁGINA|TÍTULO|CACHE|PRESET
</tabview>

Desabilitando la Cache de la Pestaña

Si una página muestra información que se actualiza constantemente, quizás quieras forzar a la pestaña a revisar si hay contenido nuevo en cada carga de la página. Esto se puede hacer añadiendo una segunda barra horizontal seguida de la palabra "false". Esto se debería usar con moderación, ya que puede ralentizar el tiempo de lectura. Por defecto, esta opción está activada ("true").

<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1|false
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>

Predefinir pestaña activa

La última variable permite elegir qué pestaña estará a la vista cuando se cargue la página. Por defecto es la primer pestaña, pero pedes elegir otra usando una tercera barra vertical seguida de la palabra "true".

<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2||true
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>

Esto te dará:


Parámetros

Los únicos parámetros disponibles en la vista en pestañas es "title" e "id". No puedes personalizar cada vista en pestañas usando wikitexto. Actualmente esto se debe hacer mediante CSS. Los parámetros son:

<tabview title="..." id="...">

Estilos

Una vez definido el parámetro "id", puedes modificar cada pestaña. Por ejemplo:

ul.tabs > [data-tab="flytabs_Ejemplo1"] {
	/* estilo para data-tab="flytabs_Ejemplo1" */
}
ul.tabs > [data-tab="flytabs_Ejemplo2"] {
	/* estilo para data-tab="flytabs_Ejemplo2" */
}
ul.tabs > [data-tab="flytabs_Ejemplo3"] {
	/* estilo para data-tab="flytabs_Ejemplo3" */
}

Las Vistas en pestañas aparecerán en un <div> con el id "flytabs_Ejemplo", y su contenido se colocará en un <div> aparte, con el id "flytabs_Example-content-wrapper".

Problemas

Experiencia móvil

En los dispositivos móviles las páginas se muestran como una lista de enlaces en vez de como pestañas. Esto es porque es difícil trabajar con pestañas en dispositivos móviles.

Ver/editar el contenido de la pestaña

Vista en pestañas no proporciona una forma sencilla de visualizar/modificar la página original. Esto puede ser problemático para los usuarios sin experiencia que deseen editar el contenido dentro de una pestaña. Dado que la pestaña es en realidad un elemento de enlace, un usuario puede hacer clic derecho y hacer clic en abrir para seguir manualmente el enlace. Sin embargo, hay un script en Fandom Developers Wiki llamado TabViewEditLinks (en inglés) que añade los enlaces de edición.

Pestañas anidadas

Tabview no maneja bien las Vistas en pestaña anidadas. En otras palabras, las páginas incluidas en tus pestañas no pueden tener sus propias vistas en pestaña. El visitante empezará a experimentar el problema cuando abra una pestaña que contenga otra sección de vistas en pestañas. Aunque los detalles específicos del error son inconsistentes, el problema general es que el contenido de la primer pestaña se mostrará seguido del contenido de la pestaña elegida. Otro problema es que las pestañas anidadas se muestra como una lista con viñetas en lugar de pestañas.

Una vez esto ocurre, el contenido de la pestaña infractora se mostrará al final de cada una de las otras pestañas. Navegar nuevamente a la pestaña infractora podría añadir otra copia del contenido al final cuando visualices las otras pestañas. Por ejemplo, supongamos que incluimos una cuarta página (como "Pestaña 4") que tiene su propia sección de Vista en pestañas. Cuando el visitante abra la "Pestaña 4", verá el contenido de la "Pestaña 1", seguido por el contenido de la "Pestaña 4". Si navega a la "Pestaña 3", verá ahora el contenido de la "Pestaña 3" seguido por el contenido de la "Tabla 4". Si abre la "Pestaña 4" nuevamente y luego a la "Pestaña 2", verá el contenido de la "Pestaña 2", seguida de dos copias del contenido de la "Pestaña 4".

Si deseas anidar pestañas, necesitarás usar tablas en vez de la Vista en pestañas.

Motores de búsqueda

Dado que una página que contiene una Vista en pestañas debe usar JavaScript para obtener el contenido de otras páginas e insertarlo en otro lugar, los resultados pueden realentizar el rendimiento del rastreo de motores de búsequeda. Además, el mismo contenido de la página se muestra en varias páginas de resultados.

Véase también

Ayuda complementaria y comentarios

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.