Jueves, 10 Mayo 2012 22:41

Mejorando las Tablas en artículos de contenido con Abivia's SuperTable para Joomla! 1.5/2.5

Escrito por 
CMS:  Joomla! |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  20 minutos


Abivia's SuperTableCuando diseñamos tablas en Joomla! normalmente recurrimos a editores WYSIWYG, como JCE, TinyMCE, CKEditor, etc., y mediante las herramientas que estos incorporan diseñamos tablas que en la medida de las posibilidades y conocimientos adaptamos a los objetivos deseados con mayor o menor pericia.

En otras ocasiones, cuando tenemos mayor dominio del lenguaje de etiquetas HTML lo utilizamos para escribir tablas sin el uso de editores WYSIWYG que facilitan el seguimiento del código que estamos escribiendo para que los resultados sean lo más fieles posibles y en cualquier tipo de navegador desde el que se visualice.

Sea como fuere, los resultados que obtenemos no pasan de ser los de una tabla clásica, con filas y columnas más o menos formateadas, con o sin color de fondo y con algunas particularidades que pueden parecerse a la siguiente tabla.

Pero existen formas de mejorar estas tablas en Joomla! y darles un enfoque más profesional y elaborado, que permitan destacar no solo los contenidos de las mismas sino el contenedor, la estructura de la propia tabla, para que su resultado final sea cuando menos más llamativo.

Esto lo logramos haciendo uso del plugin Abivia's SuperTabla, el cual está diseñado para presentar los datos de una tabla de forma más dinámica y visual.

Abivia's SuperTabla es un plugin y no un módulo por lo que no tiene una interfaz de usuario elegante o usable, pero se pueden crear tablas regulares en su editor WYSIWYG y utilizar marcas de SuperTabla para crear grandes resultados. Eso significa que también se puede mostrar una SuperTabla en un artículo, en un módulo, o en cualquier otro lugar.

Características del plugin SuperTabla Abivia:

  1. Este plugin de Sistema permite mostrar una SuperTabla en la web.
  2. Dispone de una biblioteca de estilos CSS incorporada con técnicas de anulación (override) para archivos CSS.
  3. Cada tabla puede tener su propia clase soportando múltiples estilos en la misma página.


Ver y valorar Abivia's SuperTable en el Joomla! Extensions Directory.

Descargar Abivia's SuperTable desde la web del autor.


Introducción a Abivia's SuperTabla

Vamos a empezar creando una tabla con un poco de información utilizando un editor WYSIWYG, por ejemplo JCE.


Conductor Nacionalidad Equipo Puntos
Sebastian Vettel Alemán RBR-Renault 374
Jenson Button Inglés McLaren-Mercedes 240
Fernando Alonso Español Ferrari 227
Mark Webber Australiano RBR-Renault 221


Este método en muy clásico, un poco aburrido y no permite demasiadas personalizaciones. Para empezar a arreglarlo vamos a utilizar el marcado de Abivia's SuperTabla alrededor de la tabla creada:

{supertable table}
HTML tabla <<< aquí una tabla convencional >>>
{/supertable}

Y este es el resultado:



Vemos que ha mejorado, pues Abivia's SuperTabla destaca datos en columnas y tenemos nuestros datos en filas. La mayoría de datos se basan en filas y el intercambio de datos de todo es tedioso. Es por eso que Abivia's SuperTabla tiene una función de transposición:

{supertable table transpose}
HTML tabla <<< aquí una tabla convencional >>>
{/supertable}

Ahora tenemos una orientación de columna:



No obstante se pueden corregir algunas cosas, el texto ya ha asumido dos líneas y empuja a sus columnas, y las cabeceras no se distinguen de los datos. También queremos que el título de la columna sea más estrecho que las columnas de datos.

{supertable table transpose}
{active 3}
{headcols 1 15}
{headrows 1}
{rowheight 1 45px}
{rowheight 3 45px}
HTML tabla <<< aqui una tabla convencional >>>
{/supertable}

Todos los comandos de Abivia's SuperTabla pueden estar en una sola línea si se quiere).

Ahora la tabla está empezando a tomar forma:



Echemos un vistazo a la pestaña de detalles para saber más sobre cómo funciona Abivia's SuperTabla.

Parámetros del plugin Abivia's SuperTabla:

  • Parámetro: Descripción por defecto.
  • Palabra disparadora: Esto es lo que el plugin busca para iniciar una tabla.

Modo CSS, ¿Dónde obtener CSS para la tabla?. Las opciones son:

Ningún CSS adicional: CSS ya está incluido como parte de la plantilla. Preestablecido SuperTabla: Use el estilo seleccionado en el parámetro por la "Plantilla de CSS".

  • Personalizado - Utilice los estilos siempre en el archivo especificado por parámetro "archivo CSS personalizado".
  • Preestablecido Abivia's SuperTabla

Plantilla CSS: Esta es una lista de estilos predefinidos. Archivo CSS: Esta es una ruta de acceso al archivo CSS. (en blanco). Depuración: Controla la salida de depuración de la información de diagnóstico. Los diagnósticos aparecen como comentarios HTML en la página: (Desactivado).

Comandos de Abivia's SuperTabla:

El formato de llamada a Abivia's SuperTabla.

{supertable table [options]}
[optional commands]
HTML tabla <<< aquí una tabla convencional >>>
{/supertable}

Los comandos usados por lo general son {command [options]}, pero si un comando genera conflictos con otro plugin se puede agregar la palabra desencadenante, convirtiendose en {supertable command [options]}.

La tabla de HTML puede contener estos comandos a nivel celda: la clase, enlace, estilo, subtexto, el destino y el texto. Los comandos están marcados con Celda y Tabla para indicar dónde se pueden utilizar.

Comando active (Tabla)

El comando active define la columna que se resalta cuando el usuario no está pasando el ratón sobre la tabla.

Formatos:

{active column#}
{supertable active column#}

Ejemplo: {active 3}

Comando Bordes (Tabla)

El comando bordes añade etiquetas DIV a la salida que rodea la tabla y cada columna. La intención es ofrecer opciones adicionales de estilo. El valor predeterminado es off.

Formatos:

{borders on|off}
{supertable borders on|off}

Ejemplo: {borders on}

Comando Class (Tabla, Celda)

El comando class añade un identificador de clase en el código HTML correspondiente. Cuando se utiliza a nivel de tabla, el DIV exterior tiene esta clase añadida. Cuando se utiliza a nivel celda, el DIV que contiene la celda de contenido añade esta clase.

Formatos:

{class name}
{supertable class name}

Ejemplo: {class monochrome}

Comando Clear (Tabla)

El comando clear añade un DIV limpio después de la tabla. Si el valor es cero, no se agrega nada.

Formatos:

{clear number}
{supertable clear number}

Ejemplo: {clear 1}

Comando Archivo CSS (Tabla)

El comando archivo CSS permite incluir CSS en la tabla. Por lo general, esto sería utilizado en conjunción con el comando clase o el comando ID para los estilos de tabla específica.

Formatos:

{cssfile path}
{supertable cssfile path}

Ejemplo: {cssfile ruta/al/archivo.css}

Comando Columnas Cabecera (Tabla)

El comando columnas de cabecera define el número de columnas de la tabla a los que se les aplica estilos de encabezado. El segundo parámetro opcional define el porcentaje de la anchura de la tabla que deben tomar las cabeceras de las columnas. Si no se especifica el ancho de las columnas se distribuyen de manera uniforme.

Formatos:

{headcols count [width]}
{supertable headcols count [width]}

Ejemplos: {headcols 1 12.5} o {headcols 2}

Comando Filas Cabecera (Table)

El comando filas de cabecera define el número de filas que tienen estilos de encabezado. Si no está presente, no hay filas de cabeceras.

Formatos:

{headrows number}
{supertable headrows number}

Ejemplo: {headrows 1}

Comando ID (Tabla)

El comando id establece un ID de HTML para el DIV exterior de la tabla. Esto puede ser usado para aplicar reglas específicas de CSS.

Formatos:

{id identifier}
{supertable id identifier}

Ejemplo: {id special-table}

Comando Enlace (Tabla)

El comando link convierte el texto de la celda en un vínculo y especifica la dirección URL (véase también el comando destino).

Formatos:

{link url}
{supertable link url}

Ejemplo: {link https://www.webempresa.com/}

Comando Altura Fila (Tabla)

El comando row, altura de la fila, define la altura de una fila de la tabla. Este comando puede aparecer varias veces.

Formatos:

{rowheight row# css-height}
{supertable rowheight row# css-height}

Ejemplos: {rowheight 1 45px} o {rowheight 5 3ex}

Comando Estilo (Celda)

El comando style le permite añadir CSS a una celda específica de la tabla.

Formatos:

{style css}
{supertable style css}

Ejemplo: {style font-family:serif; font-size: 120%;}

Comando Subtext (Celda)

Especifica el texto que se colocará en un espacio entre líneas.

Formatos:

{subtext any text}
{supertable subtext any text}

Ejemplo: {subtext Soporte Joomla!}

Comando Destino (Celda)

El comando target define el atributo de destino de los enlaces en la celda (ver también el comando de enlace).

Formatos:

{target value}
{supertable target value}

Ejemplo: {target _blank}

Comando Texto (Celda)

Normalmente el valor texto de una celda es la información que sobra después de que otros comandos han sido eliminados. El comando enlace le permite especificar el texto exacto de la celda.

Formatos:

{text any text}
{supertable text any text}

Ejemplo: {text Webempresa}

Comando Wrapper (Tabla) [v1.2+]

De forma predeterminada, Abivia's SuperTabla rodea la salida en una etiqueta div con la clase "wrapper". Esto puede causar problemas con algunas plantillas. El comando wrapper se puede utilizar para eliminar el div. La configuración predeterminada es "on".

Formatos:

{wrapper setting}
{supertable wrapper setting}

Ejemplos: {wrapper off}, {wrapper on} o {wrapper 0}

En el siguiente vídeo realizamos la instalación del plugin y formateamos una tabla HTML para que utilice la potencia del plugin Abivia's SuperTabla.



Con Abivia's SuperTabla la personalización de tablas HTML en Joomla! desde artículos de contenidos ahora es mucho más fácil



¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+