Sábado, 16 Abril 2011 19:48

Aumentar y disminuir el tamaño de los textos en el frontend de Joomla!

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


Aumentar y disminuir el tamaño de los textosEscribir de forma sencilla y entendible posiblemente sea uno de los mayores logros en la creación textual, no es fácil desarrollar un texto que llegue al usuario y facilite su comprensión y elimine las barreras cognitivas, y de paso sea de rápida lectura.

Según uno de los principios del desarrollo web: "El éxito de una buena composición de página consiste en una organización balanceada, clara y concisa de la información usando las herramientas básicas de diseño: formato editorial, tipografía, color y uso de gráficas."

Para esto utilizamos diversos métodos o reglas que nos ayudan a recrear lo que leemos y a visualizarlo en el contexto en que nos encontramos. Naturalmente esto esta bien y ayuda a los lectores, pero en ocasiones dejamos de lado otras barreras visuales que dan al traste con el mejor de los artículos: la representación de los textos y su tamaño en relación a la resolución de la pantalla.

En términos de representación gráfica de los caracteres en pantalla podemos establecer que, utilizando un monitor de 15 pulgadas es muy posible que la fuente por defecto se muestre en un tamaño de 10 pixel, em o %.

Article PXFont SizeSin embargo si nuestro monitor es de 19 pulgadas o superior, seguramente nuestro navegador utilizará tipografías de un tamaño de 15 o 16 pixel, em o %.

¿Pero que sucede en función del sistema operativo en uso? sencillamente que la representación del tamaño y estilo de las tipografías visualizadas en pantalla varia de manera importante. En Windows por ejemplo la tendencia es mostrar las tipografías por defecto del sistema (Georgia, Roman, Times, etc.) mientras que en entornos Mac o Linux la tendencia es al uso de letras más rectas y definidas (Verdana, Sans, etc.), pero más pequeñas o incluso disponiendo de las mismas fuentes no siempre se representan de igual forma dependiendo del sistema en que corran.

Naturalmente esto es corregible utilizando CSS y optimizando los tipos a representar o empleando técnicas de sustitución de fuentes, como ya comentamos en artículos anteriores, pero no es el caso que nos ocupa hoy.

Vamos a ver como mejorar al menos la visibilidad de los textos en los sitios web que administramos con Joomla!, para que los usuarios puedan leer estos sin demasiadas dificultades, sin afectar al resto de contenidos de la página, su tamaño y distribución y sin tener que realizar modificaciones en las hojas de estilo de cascada o de los propios archivos del core de Joomla!.

Para ello utilizaremos un plugin gratuito que podemos encontrar en el JED bajo el nombre de Article PXFont Size y que se diferencia de otros muchos que existen para estos menesteres en que solo se aplica al artículo(s) que nosotros definamos o al grupo de artículos de contenido por defecto, sin afectar a menús, módulos, etc., de la página, evitando que esta se deforme a medida que ampliamos dichos textos.

Article PXFont Size, liberado bajo licencia GPLv2 Non-Commercial en su versión 1.0.2

La instalación es como la de cualquier otra extensión y su activación y parametrización se realiza desde el Gestor de Plugins. Observamos que esta disponible en Español, lo que sin duda es una mejora añadida de agradecer y permite seleccionar hasta 4 estilos de representación para adaptarlo a la imagen de nuestra página.

El plugin dispone de varias opciones de configuración, destacando las siguientes:

  • Permite modificar el título del plugin o dejarlo vacío (para dejarlo vacío utilizamos el textbox: HIDE)
  • Es posible seleccionar cuatro estilos diferentes.
  • Tiene dos archivos de idioma (Inglés y Español) y es posible modificar el idioma del Front-end
  • Se puede activar/desactivar.
  • Los tags que el plugin modifica son los siguientes: 'div', 'p', 'tr', 'td', 'table', 'ul', 'ol'.

En el siguiente vídeo repasamos la instalación y configuración y experimentamos su uso en algunos artículos de contenido. También detallamos como utilizar la etiqueta {hidefa} para anular este plugin en aquellos artículos en los que no deseamos mostrar esta funcionalidad.



Facilitar la lectura a los usuarios que visitan nuestros sitios web es tan importante como ofrecerles buenos contenidos o productos interesantes, forma parte de la experiencia que el usuario tendrá y de esta dependerá mucho su fidelización.



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