Viernes, 13 Mayo 2011 03:32

Estilos tipográficos y visuales en artículos en Joomla! con XTypo

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


XTypoSin duda alguna una de las muchas claves para garantizar el éxito de nuestro sitio web desarrollado en Joomla! de cara a los usuarios es la forma en que presentamos los contenidos. No solo se trata de tener una buena plantilla e imágenes atrayentes o llamativas pues no lo es todo.

En estos casos el proceso de adecuación de contenidos publicados pasa por enriquecer los textos que componen los diferentes artículos para mejorar la experiencia visual de quien lo lea. Podemos considerar que la tipografía es un factor determinante y su elección forma parte del camino a seguir para lograr un sitio usable y agradable, pero no lo es todo, otros elementos inciden positivamente como lo es el formateo de determinados párrafos o contenidos para enfatizarlos o resaltarlos.

El 90% de las plantilla incluyen en sus "demos" un apartado llamado "Typography" (tipografía)que muestra las posibilidades de formateo de contenidos al usuario y la forma en que estos pueden ser invocados en función de la plantilla en uso. Ni siempre son suficientes ni necesariamente tienen porque ajustarse los que se incluyen por defecto a nuestras necesidades y es en estos casos cuando recurrir a una extensión para Joomla! es determinante para lograr este objetivo.

No hay demasiadas extensiones en el JED que realicen esta tarea, pero de todas las que hay, una destaca desde 2008 por su calidad, su rapidez de uso y la facilidad con que podemos implementar las distintas llamadas a formatos establecidos o personalizados llamada Xtypo. Gracias al uso de este plugin evitaremos tener que modificar o crear nuevos estilos CSS para nuestra plantilla si esta carece de algunos de los que mostramos a continuación. También podemos cambiar los iconos, definir el tamaño de los bordes, definir el relleno, etc ... y así crear un nuevo estilo propio.

Si tuviésemos que destacar una particularidad de esta extensión es "simplicidad de uso" pues integrar mejoras en documentos utilizando etiquetas de estilo del plugin es la tarea más sencilla que podamos realizar y no requiere que deshabilitemos el editor WYSIWYG en uso para su uso pues convive perfectamente, como buen plugin, con cualquier editor de los conocidos.

Algunas de las opciones que podemos utilizar para remarcar o enfatizar texto son las siguientes.

Estilo para mostrar avisos o alertas 'xtypo_alert'

Usar el código siguiente: { x t y p o _ a l e r t } . . . { / x t y p o _ a l e r t }

Estilo para mostrar textos informativos 'xtypo_info'

Usar el código siguiente: { x t y p o _ i n f o } . . . { / x t y p o _ i n f o }

Estilo para mostrar avisos 'xtypo_warning'

Usar el código siguiente: { x t y p o _ w a r n i n g } . . . { / x t y p o _ w a r n i n g }

Estilo para anotaciones 'xtypo_sticky'

Usar el código siguiente: { x t y p o _ s t i c k y } . . . { / x t y p o _ s t i c k y }

Estilo para mostrar Feeds 'xtypo_feed'

Usar el código siguiente: { x t y p o _ f e e d } . . . { / x t y p o _ f e e d }

Estilo para mostrar avisos de descargas 'xtypo_download'

Usar el código siguiente: { x t y p o _ d o w n l o a d } . . . { / x t y p o _ d o w n l o a d }

Estilo para formatear código 'xtypo_code'

Usar el código siguiente: { x t y p o _ c o d e } . . . { / x t y p o _ c o d e }

Ejemplo de código envuelto en { x t y p o _ c o d e }

< ? php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '';
? >

Estilos para formatear botones informativos:

Usar el código siguiente: { xtypo_button1} Botón 1 { /xtypo_button1} , { xtypo_button2} Botón 2{ /xtypo_button2} , { xtypo_button3} Botón 3 { /xtypo_button3}

Podemos ver todos los estilos completos en el plugin o en la página del autor.

En el siguiente vídeo mostramos como instalar el plugin y hacer uso de algunos de sus estilos en un artículo de contenido.


Si pensabas que mejorar tus textos o artículos de contenido era más complejo, habrás podido observar que utilizando Xtypo puedes darle vida y color a los textos de tu web en poco tiempo.



¿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+