Los generales que conocen las variables posibles para aprovecharse del terreno saben cómo manejar las fuerzas armadas
.
– Sun Tzu. El arte de la Guerra –
A raíz del creciente auge de conexiones a Internet a través de smartphones, PDAs y dispositivos similares, la adaptación de Mosaic para su visualización en dispositivos móviles se hacía imprescindible para que la publicación online se mantuviese vigente dentro del mundo digital.
Conociendo al enemigo
Antes de afrontar cualquier proyecto, sea de la envergadura que sea, es necesario intentar comprender qué tenemos entre manos, para poder determinar cuáles son nuestras alternativas y aumentar nuestras posibilidades de éxito. Así pues, lo primero era conocer a fondo la versión actual de Mosaic, familiarizarse con el gestor de contenidos sobre el que se sustenta y sumergirse en las técnicas de desarrollo específicas del CMS para luego poder comenzar la adaptación para dispositivos móviles.
Preparando la estrategia
Una vez profundizada y asimilada la situación actual, hemos de preparar nuestra estrategia para completar con éxito nuestra empresa.
Sabía a qué puerto quería llegar, pero tenía dudas sobre cómo llegar hasta él, por lo que la fase de análisis fue clave para el posterior desarrollo del proyecto. Tras rastrear por diferentes fuentes (libros, blogs, webs especializadas) en busca de documentación sobre cómo abordar la adaptación pude determinar qué tres disciplinas utilizaría para conseguir una adaptación a dispositivos móviles consistentes.
- Arquitectura de la información: Una buena web orientada a dispositivos móviles necesita una arquitectura de la información diseñada específicamente para tal fin.
- Programación web: Crucial a la hora de determinar si el dispositivo que accede a nuestro sitio web se trata de un dispositivo móvil o no.
- Maquetación web de acuerdo con los estándares: Que garantice la óptima visualización en el mayor porcentaje de plataformas posibles.
En el campo de batalla
Tras el análisis previo, llega el tiempo de trabajar cada una de las áreas anteriormente comentadas.
Arquitectura de la información: Para elaborar la nueva arquitectura de la información se tuvieron en cuenta las siguientes premisas.
- Limitar el número de elecciones que proporcionamos al usuario dentro de la pantalla
- Los usuarios de dispositivos móviles se desorientan a medida que avanzan en profundidad en un sitio web
- Enlaces suficientemente grandes para que el puntero de los dispositivos móviles pueda seleccionarlos.
- Asociar enlaces principales a teclas de acceso rápido
- Categorías accesibles desde la página de inicio
- Eliminar información no relevante en un contexto móvil
- Primar contenido frente a imágenes
Programación web: La parte de programación web, tomó la forma de plugin dentro del gestor de contenidos y para codificarlo mi principal aliado fue la documentación de desarrollo de plugins de WordPress.
El plugin creado resuelve las siguientes cuestiones:
- Discernir qué tipo de dispositivo intenta acceder a Mosaic. En la fase de análisis había descubierto que existen bibliotecas de dispositivos móviles y que muchas de ellas cuentan con una API específica para PHP y me serví de una de ellas (WURFL) para la implementación del plugin.
- Cargar el theme predeterminado cómo móvil.
- Redimensionar las imágenes de los artículos a un formato adecuado para su visualización en pequeñas pantallas. Para lo cual se utiliza un parseador de HTML (Simple HTML DOM) que detecte las etiquetas <img> y cambie sus atributos de anchura y altura.
Para ello utilizamos hooks propios de la plataforma. Un hook se trata de una funcionalidad provista por WP que permite asociar funciones creadas por un desarrollador a determinadas acciones o eventos usuales, como puede ser la carga de un theme, la carga del contenido de los artículos…
Así pues, el uso de estos hooks me permitió interceptar el momento en que se carga un tema para determinar si un dispositivo es móvil o no y proceder a la carga de la plantilla adecuada, y por otro lado, interceptar la carga de contenido de cada artículo para evaluar las imágenes que pudiese contener y redimensionarlas si fuese necesario.
Maquetación y estilo: Los estándares web funcionan y emplearlos es garantía de éxito. En mi caso contaba con una buena base, la versión “escritorio” de Mosaic, por lo que la adaptación partía de un pilar sólido que permitía la herencia y readaptación de muchas de sus características inherentes.
A lo largo de esta fase lo más relevante es el uso de un Doctype orientado a tecnologías móviles, ya que marcara de buen grado, el correcto comportamiento de nuestra capa visual. Existen dos tipos de DTD orientados a tecnologías móviles:
- El XHTML 1.1 Basic, promulgado por la W3C
<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN”
“http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>
- El XHTML Mobile Profile sustentado por la Open Mobile Alliance (OMA)
<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”
“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
Ambos son muy similares, cumplen con los estándares y tienen un amplio soporte en dispositivos móviles, sin embargo Mobile Profile tiene mejor soporte con dispositivos más restringidos. En la imagen posterior podemos ver cómo la misma plantilla cambia radicalmente en la visualización si se usa un Doctype adaptado a móviles de uno que no.
Saliendo victorioso
Finalmente, determinamos que el trabajo conjugado en las áreas anteriormente mencionadas nos provee lo que es hoy la versión móvil de Mosaic.
Cita recomendada: GONZÁLEZ, Ruth. Adaptación de Mosaic a dispositivos móviles. Mosaic [en línea], mayo 2011, no. 87. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n87.1122.