Pestañas en un artículo extenso: Tabber y Slider

Si hemos de publicar un artículo muy extenso o tenemos una ficha muy completa de un producto, es recomendable estructurar visualmente esta información para facilitar su lectura al usuario. En este blog podéis ver una introducción al comportamiento de los usuarios en la lectura de un sitio web en función de su extensión: Lectura y usabilidad web: como leen los usuarios el contenido de un sitio web.

En esta otra página muestran un patrón visual de las zonas que más atraen la atención de un usuario que está navegando en internet. Observad la recomendación al final de esta entrada:

"No entierres el contenido en documentos demasiado largos: Divide los textos en varios documentos enlazados o crea un índice que permita identificar y moverse por las secciones de cada documento."

A continuación veremos dos plugins muy prácticos, vistosos y sencillos de utilizar para crear pestañas en un artículo de Joomla que van mostrando diferentes partes de la información conforme se van pulsando. En esta página de alquiler de trasteros, en la sección de Preguntas frecuentes, podéis ver uno de estos plugins en funcionamiento.

Las fichas de las extensiones Tabber y Slider en el portal de Joomla son:

• Tabber: http://extensions.joomla.org/extensions/news-display/contents-panel/14493
• Slider: http://extensions.joomla.org/extensions/news-display/contents-panel/14689

Desde Download pasamos descargar ambos plugins y los instalamos en nuestra página desde el Gestor de extensiones. Al tratarse de extensiones del tipo plugin, confirmaremos que están habilitados desde el Gestor de plugins.

Para su utilización insertamos en el artículo el código siguiente, en función del formato de pestaña que más nos guste:

Tabber:

{tab=Título de la primera pestaña}

Aquí escribimos cualquier contenido, pudiendo utilizar los códigos de otros pluigns: galerías, mapas, etc.

{tab=Título de la segunda pestaña}

Aquí el contenido de la segunda pestaña...

{/tabs}

Slider:

{slide=Título del primer slider}

Aquí escribimos cualquier contenido, pudiendo utilizar los códigos de otros pluigns: galerías, mapas, etc.

{slide=Título del segundo slider}

Aquí el contenido de la segunda pestaña...

{/slides}

Así por ejemplo, si quisiéramos hacer una ficha de un vehículo con el Tabber:

{tab=Descripción}

Texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo.

{tab=Galería fotográfica}

{gallery}galprueba{/gallery}

{tab=Punto de venta}

{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|zoom='15'|mapType='Satellite'|text='Texto del bocadillo'}

{tab=Información de contacto}

Telefóno: 948111222

Email: aaa@aaa.com

Persona de contacto: Juan Pérez

{/tabs}

Sin olvidar el código de cierre de pestañas {/tabs}. Tened en cuenta que ambos sistemas de pestañas son compatibles con la inserción de contenido extra fuera de las mismas, que será visible en el artículo en todo momento.