Foro - Perl en Español

Lo ideal es que las páginas que vayamos a mostrar en el dispositivo sean las mismas que en un ordenador normal. ¿Por qué? Pues porque... realmente... nunca sabremos qué dispositivo va a usar el usuario: los días laborales accede desde su ordenador del trabajo con una pantalla de 17" y 1280 puntos de resolución horizontal, pero algunas tardes se conecta desde casa y allí tiene un monitor de 24" y 2040 puntos. Luego, en el fin de semana nos ve a través de su televisión en el salón de casa, donde son 35" y 1024 puntos. Mientras está de viaje, puede vernos en su PDA de 7" y 800 puntos. En casos de urgencia, con su teléfono móvil de 3" y 400 puntos.

No hay estándares de tamaños para las páginas, porque desde el principio se diseñó para mostrar contenidos de forma independiente a lo que el usuario tuviera. Pero hay gente que se empeña en que su página se "vea bien" en su monitor, sin darse cuenta que luego se ve horrible en el monitor de su casa.

Bueno, de vez en cuando sale alguna aplicación o información en la que sí estamos obligados o tener en cuenta esos tamaños.

Hasta ahora, las soluciones para personalizar esos tamaños han venido del Javascript: la primera página de un sitio web consistía en un pequeño Javascript que preguntaba el tamaño máximo de la pantalla. Según lo que respondía, saltaba a un árbol distinto del sitio web donde se mostraba la información. Era típico ver if() anidados donde se preguntaba si era 1280x1024, 1024x768, 800x600, etc.

Lo malo de esto es que te obligaba a desarrollar distintas versiones del sitio.

La siguiente solución fue hacer el contenido dinámico por medio de entornos de trabajo web, que generaban uno u otro contenido según esos tamaños. La información de las páginas se sectorizaba (como hoy en día se hace con las capas y los bloques de información) y los motores colocaban aquellos bloques que se suponen "cabían" en la pantalla del dispositivo.

Hoy en día, las nuevas versiones de HTML traen una pequeña ayuda para crear páginas acordes al dispositivo. Por medio de los estilos CSS, existe la posibilidad de indicar qué elementos queremos que salgan cuando determinado dispositivo esté viendo la página. Es la regla @media.

El ejemplo más espectacular de uso de estas reglas es cualquiera de las páginas de IBM, por ejemplo ésta donde explican cómo hacer un gráfico compuesto con imágenes extraídas desde Flickr, con Perl. Si miras el código, verás que está lleno de estilos CSS por todas partes para decidir qué partes salen y cómo según el dispositivo (bueno, no todo es tan bonito... también tienen una buena batería de código Javascript para apoyar a esos estilos).

Todo lo anterior se refiere a atacar el problema desde el lado del cliente. Desde el lado del servidor consiste en identificar el dispositivo y derivar la petición al árbol del sitio que más conviene. O generar contenido dinámico en función de la resolución.

Lo normal en esos casos es usar el módulo mod_rewrite del Apache para hacer un redireccionamiento de la página que solicita el usuario a el árbol de páginas específicas para dispositivos móviles.

Por medio de expresiones regulares en las reglas de mod_rewrite, es posible identificar el navegador o la plataforma que están accediendo. Para ello, primero hay que modificar el aspecto de los ficheros de actividad:y así sale toda la información. Por ejemplo:

Pero yo no conozco ningún estándar (es posible que exista) referente a cómo han de ser las cadenas de caracteres que definen al "User-Agent". Como ves en el ejemplo, aparece las palabras Nokia, SymbianOS y Series60, que nos definen muy claramente el dispositivo, sistema operativo y versión del software de usuario. Pero en otros casos no es nada seguro que el dispositivo entregue toda esa información. Incluso más oscuro es la información del navegador que el usuario está utilizando para ver la página. Otro ejemplo:
Aquí hay otro Nokia, en el que vemos claramente que está usando un navegador Safari (con motoro KHTML que "se parece" -like - al del Gecko del Mozilla.

Lo que sí se puede hacer es un conjunto de reglas con expresiones regulares para identificar esas palabras claves, y llevar al usuario a su destino.

Ejemplo (sacado de la página de mod_rewrite):quiere decir que si el usuario se conecta con un navegador que se identifica con un motor de renderizado Mozilla, entonces derivamos todas las peticiones de la página inicial a la página homepage.max.html, que, por el nombre, ya indicamos que es la página donde se muestran todos los elementos. Si quisiéramos tener un sitio especial para los teléfonos Nokia, sería algo así:que quiere decir que si el usuario se conecta con un Nokia -mejor dicho: ÉL dice que se conecta con un Nokia- entonces todas las peticiones de todas las páginas se derivan a páginas con el mismo nombre, pero dentro de la carpeta /nokia.

Hoy en día, y en los próximos años, estas cuestiones tendrán cada vez menos importancia, porque todos los dispositivos tienden a tener una resolución de pantalla cada vez mayor, con prestaciones de presentación iguales a las de los ordenadores de sobremesa o portátiles. Por ejemplo, yo tengo un Nokia N810, con una pantalla de 800x480, 16 bits de resolución de color y soporte de Javascript y Flash. Con este tipo de aparatos en el mercado, ya no necesito hacer páginas específicas para ellos.

El último trabajo que hice para dispositivos móviles fue el Boletín Oficial de Castilla y León, pero la única complicación fue programar la salida de una versión simplificada del HTML original del boletín de cada día (es decir, el programa pide al propio servidor web la página original del boletín que quiere ver el usuario, y luego filtra y quita todo lo superfluo para mostrar solo el texto). No hay adaptación al dispositivo. No se pregunta el tamaño de la pantalla. Solo hay un gráfico más o menos adaptado al tamaño de un teléfono normal y todo lo demás es puro HTML generado en tiempo real (con Perl, of course).

Espero haberte aclarado algo sobre este tema.

(añado a lo anterior) Acaba de aparecer un artículo en la Linux Magazine, en la que comentan la detección de dispositivos móviles por medio de Javascript.