Movilizando Joomla

Hace unos días me llegó desde la lista de correo de dev.mobi un interesante artículo sobre la creación de sitios para móviles con Joomla.

No es que me encante Joomla, de hecho probablemente haga un artículo crítico al respecto, pero creo que es muy interesante para determinados websites por su aparente sencillez. El problema que tenía es que quería una solución que me permitiese, a partir de un portal web, tener acceso desde el móvil a una versión adaptada. Gracias a este artículo encontré este plugin que prácticamente te lo da todo hecho.

Hay algo, sin embargo, que no tiene en cuenta el plugin: las imágenes. Las imágenes que insertas en tus artículos serán, normalmente, de un tamaño bastante elevado, sobre todo si hablamos de terminales móviles donde la media es de 174px de ancho de pantalla. La solución pasa por toquetear un poco el plugin haciendo que las imágenes de los articulos pasen a través de un redimensionador automático que crearemos nosotros. Os recomiendo los artículos que escribí acerca del escalado de gifs transparentes y animados (aquí y aquí) para tener una idea de como hacerlo. La solución llega en dos pasos

1) Parcheando el plugin

Este es el cambio que debemos hacer en el archivo pdabot.php del plugin. Busca al final de todo la función onAfterRenderer y haz que quede asi:

function onAfterRender()
{
	global $mainframe;
	//DESDE AQUI
	if($GLOBALS['ispda']==true){
		$body = JResponse::getBody();
		$body = preg_replace( '/<img src="(.*)"(.*)>/i', '<img src="/redimensionar.phtml?imagen=\1">', $body );
		$body = preg_replace( '/<img(.*)width="(.*)"(.*)>/i', '<img\1\3>', $body );
		$body = preg_replace( '/<img(.*)height="(.*)"(.*)>/i', '<img\1\3>', $body );
		JResponse::setBody($body);
	}
	//HASTA AQUI

Como ves, sustituimos el atributo src de todas las imágenes por nuestro script de autoescalado redimensionar.php al que le pasamos la url original de la imagen. Además aprovechamos para quitar los atributos de width y height porque en este punto no sabemos cuales serán los resultantes, si los dejásemos se vería a su tamaño original. Hemos terminado con el plugin.

2) Escalando las imágenes

Si has entendido todo el proceso hasta aquí estarás pensando, vale, pero nos falta un dato: ¿a qué tamaño escalamos las imágenes?. En efecto, no lo sabemos… todavía.

Y aquí viene W urfl en nuestra ayuda. Wurfl es una base de datos de características de terminales móviles que te permiten conocer datos como el ancho de pantalla simplemente pasándole el UserAgent del mismo. No voy a explicar el funcionamiento de Wurfl puesto que se sale del alcance de este artículo, pero en su web tienes todo lo necesario.

Crearemos entonces nuestro redimensionar.php donde simplemente buscamos mediante Wurfl el ancho de pantalla del terminal cliente y reescalamos la imagen al tamaño adecuado. Es recomendable no hacerlo al 100% para evitar que los scrolls verticales reduzcan el espacio útil y nos aparezca también el scroll horizontal (suele pasar en los Nokia). Yo suelo descontar 10px al ancho. Para imágenes de artículos puedes aplicar un escalado porcentual, pueden no quedar bien imágenes muy grandes, déjalas al 70% por ejemplo.

Conclusiones

Rápidamente y de un modo sencillo hemos adaptado para terminales móviles tu portal en Joomla, no se puede pedir más. No olvides diseñar la plantilla pda a tu gusto y necesidades.

En webs móviles es habitual utilizar una imagen como cabecera del portal. Puedes utilizar también tu redimensionador para adaptarla automáticamente al ancho de pantalla de los clientes.

Se podrían hacer muchas más cosas si integramos Wurfl directamente en el plugin, incluso podríamos hacer que el código generado estuviese adaptado a las capacidades del terminal del cliente (xHTML, iMode, WML) creando plantillas para cada lenguaje distinto. ¿Te atreves a hacerlo tu?

4 comentarios en “Movilizando Joomla

  1. Qué perspicaz, J.A.

    Te lo resumo. No utilizaba CMS’s desde 2001 más o menos y el archiconocido PHPnuke. Había oído maravillas de Mambo y, obviamente, su fork Joomla debería ser aún mejor. Los últimos meses hemos tenido que hacer algunas webs sencillas y se me ocurrió que sería buena idea utilizar un CMS puesto que sólo tendríamos que diseñar la plantilla despreocupándonos de la funcionalidad.

    Mi impresión:
    -¿Como un CMS de la talla de Joomla puede tener una documentación tan patética?
    -¿Qué diablos son hoy en día esos “tables” que genera alrededor de títulos y contenidos? ¿A nadie se le ha ocurrido implementar H1-Hx y hacerlo todo semántico? Sería muchísimo más fácil de diseñar.
    -La cueva de aprendizaje para un tío con 10 años de experiencia como yo ha sido considerablemente elevada. Sí, hablamos de días, ¡pero esperaba tenerlo dominado en horas! Tampoco hablamos de microondas ni campos electromagnéticos 😛
    -¿Cómo es que no trae “de serie” un generador de formularios? Creo que es algo básico.
    -¿Como se configura un RSS “único” con todos los últimos artículos, independientemente del menú en el que aparezcan? Creo que soy muy torpe, no lo he conseguido, y he leído y leído y sigo sin ver la manera.

    Osea, soy autosuficiente para parchear un plugin pero demasiado torpe para configurar cuatro menús un formulario y un RSS.
    Sobre todo, la mayor queja, la falta de documentación. Tampoco estaría mal algo tipo “Plugins indispensables para Joomla”.

    Esa es mi “aparente sencillez”.

  2. Lo de las tablas para maquetar es imperdonable, ni en la reciente 1.5 lo han solucionado, igual están esperando a la 2.0

    Está claro que al final cada uno aprecia un producto en base a lo que se ajusta a sus necesidades. Las mías no han sido, al parecer, tan complejas como las que has comentado.

    Sin embargo, el sistema para hacer sites multidioma (¿como se escribe esto?), el joomfish me pareció bien realizado, con un control bastante buen si hay varias personas trabajando en varios idiomas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *