Cómo crear una versión para celulares de un sitio web en drupal 6

Nuevamente después de varios meses de haberme alejado de la comunidad,  en este artículo vamos a ver la creación de una versión móvil de un sitio web, esto debido a que cada vez más los usuarios utilizan su celular (smartphone, teléfono inteligente) para navegar por internet, las previsiones de uso de estos dispositivos indican que esta tendencia  irá creciendo a un ritmo muy elevado.
De acuerdo con “Mobile Web Design Trends for 2009” de Steven Snell, "Debido a la falta de espacio en la pantalla, es importante para los visitantes tener acceso a lo que es más crucial y con la menor cantidad de agregados posible". Esto es lo que vamos ha implementar en este tutorial.

¿Qué necesitamos?

Para ello necesitamos de algunas herramientas como son:

1. El módulo Mobile Tools  de Drupal

Que se encargará de lo básico para poder tener nuestro sitio web adaptado para el móvil de una manera casi directa, entre otras cosas nos permite la detección del tipo de dispositivo utilizado, redirección automática al sitio móvil y cambio automático del tema utilizado a un tema adaptado a móviles, también se puede seleccionar qué contenido pueden y no pueden visitar los usuarios móviles, uno de los aspectos más importantes del módulo es su plena integración con varios otros módulos de Drupal como son Browscap y Wurfl que harán la detección bastante más completa y exacta. Descargamos del sitio web oficial de drupal https://drupal.org/project/mobile_tools.
Su configuración es bastante sencilla, bastaría con instalar el módulo como de costumbre y rellenar una serie de campos desde su panel de administración.

2. Tema o plantilla para la versión móvil

La plantilla para la versión móvil que utilizaremos será mobile_garland con la finalidad de que la página cargue más rápido ya que tiene pocas regiones, es ligero, mínimo uso de tablas, floats y márgenes ajustados.

Configuración:

1. Instalamos y activamos el módulo mobile_tools



2. Realizamos la configuración del módulo en el panel de administración, en la primera pestaña “Configuration” ingresamos la URL móvil y de escritorio para el sitio web; si ambas URL son diferentes, los visitantes del sitio serán redirigidos al sitio apropiado. Si ambas URL son iguales, los visitantes no serán redirigidos pero se hará una conmutación del tema.



3. En la pestaña “Detection” Activamos ambas opciones la primera nos permite determinar si un visitante del sitio web está viendo actualmente el escritorio o en el sitio móvil y la segunda opción permite determinar si un visitante del sitio Web está utilizando un dispositivo móvil.



4. En la pestaña “Mobile roles”, proporciona la capacidad de crear versiones móviles de las funciones de usuario existentes. En este caso dejamos desactivada esta opción.
5. Pestaña “Theme switching”, nos permite mostrar un tema diferente para los usuarios móviles, seleccionamos la segunda opción porque no tenemos porqué usar urls diferentes para nuestro sitio móvil y nuestro sitio web, con lo cual el módulo sólo se encargaría del cambio automático del tema.



6. Como último punto hacer los ajustes y modificaciones de la plantilla .tpl y de la hoja de estilos .css de nuestro tema (mobile_garland).

Para comprobar ingrese desde su celular a www.jsequeiros.com debería mostrar lo siguiente: