Tecnología de vanguardia
Desarrollo de sitios móviles, Parte 2: Diseño
.jpg "Dino Esposito")
Existen algunos mitos sobre el desarrollo de sitios móviles que se originan, en su mayoría, en la idea de que una solución móvil es una derivación de un sitio web de escritorio existente. Creo que el término derivación es bastante apropiado para describir la relación entre un sitio web móvil y uno de escritorio. El problema crucial se relaciona con los detalles sobre cómo se puede derivar el sitio móvil a partir del sitio de escritorio.
Lo que se busca es ofrecerle a los usuarios la mejor experiencia de navegación en el dispositivo que poseen, ya sea un equipo normal, un smartphone, una tableta o un anticuado teléfono celular. (Voy a omitir la creciente familia de dispositivos con pantallas grandes, como los televisores inteligentes, que requerirán su propia adaptación adecuada en el futuro cercano). También se busca presentarle a los usuarios un conjunto de páginas que se pueden visualizar mejor en el dispositivo que realiza la solicitud. ¿Cómo se puede seleccionar el marcado que mejor se adapta a dicho dispositivo? Mi opinión es que este es un punto sensible y merece algo de atención y análisis para evitar que crea en los mitos y haga caso omiso de las condiciones del mundo real.
El mito de que un tamaño se ajusta a todo
La mayoría de los desarrolladores reconocen la necesidad de contar con un sitio web móvil y con otro de escritorio que luzcan diferentes el uno del otro. El tamaño de las pantallas es diferente, la capacidad informática es diferente y los casos de uso serán especialmente menos y más diferentes en un sitio móvil. No obstante, la idea de poder crear solo un sitio web que se ajuste automáticamente a las diferentes resoluciones resulta atractiva para muchos desarrolladores. Pero también puede ser un camino peligroso con más desventajas que ventajas. Siendo realistas, el balance entre las ventajas y las desventajas depende en la naturaleza de la aplicación: mientras más sofisticado es el sitio, más serán las desventajas y menos las ventajas. Exactamente, ¿qué significa tener un solo sitio que se adapte a distintos dispositivos? Muchos desarrolladores tienen malos recuerdos del cuando (no muchos años atrás, por no decir todavía hoy) crear un sitio web era cosa de lograr zafarse del enredo de varios exploradores (de escritorio) y distintas capacidades de representación. Por esta razón, la mayoría de los desarrolladores aceptan la idea de un sitio único que los usuarios pueden visitar con cualquier dispositivo (equipos portátiles, tabletas, teléfonos, lectores electrónicos, televisores inteligentes, etc.), pero con una experiencia diferente.
El punto es que con los exploradores de escritorio la mayoría de las diferencias están en el espacio de la representación. Por el contrario, los dispositivos móviles agregan una nueva dimensión al problema: diferentes capacidades. De manera que el objetivo debería ser la creación de un sitio web que suministra automáticamente la experiencia más adecuada a los distintos dispositivos, en vez de enfatizar excesivamente en la representación de contenido más apropiada.
¿Suena como una diferencia sutil? Lo cierto es que la adaptación del lado del cliente versus la adaptación del lado del servidor del contenido móvil es un tema abierto en estos días.
Para mí, la idea de solo un sitio web que suministre el mismo contenido al que el explorador se ajusta de acuerdo al dispositivo en uso, no funciona como una regla, pero es posible que funcione como la excepción. El mito de que un tamaño se ajusta a todo se basa en la capacidad del explorador de seleccionar de forma dinámica la hoja de estilo de CSS más apropiada, según algunas características físicas del dispositivo. Averigüemos más.
Consultas de medios de CSS
Presentado en CSS3, las consultas de medios son una característica de los exploradores diseñada para simplificar el diseño de los sitios que se puede consumir a través de los dispositivos de diferentes tamaños de pantalla. Se debe tener en cuenta que el término dispositivo en este contexto específico también incluye los equipos portátiles de escritorio. Por esta razón, el tamaño de las pantallas puede variar entre las 24 pulgadas de un monitor de escritorio hasta las 3 pulgadas de la mayoría de los smartphones.
La idea detrás de las consultas de medios de CSS es que se crea un sitio web con un solo conjunto de funciones y luego se le aplican diferentes estilos de CSS al cargar una hoja de estilo distinta para los diferentes medios. La gran mejora que introdujo CSS3 es que el medio de página de pantalla ahora se puede restringir a todos los dispositivos que coincidan con un conjunto de reglas preestablecidas. A continuación hay un ejemplo de una consulta de medios:
<link type="text/css"
rel="stylesheet"
href="downlevel.css"
media="only screen and (max-device-width: 320px)">
Una vez ubicado en una página web (o en una vista MVC de ASP.NET), el marcado anterior vincula el archivo downlevel.css únicamente si la página se visualiza a través de un explorador con un ancho de 320 píxeles o menos. Con el uso de algunos de los elementos anteriores, se puede optimizar la representación de cualquier página para dispositivos con pantallas de diferentes tamaños. La regla de la hoja de estilo se aplica bastante bien y de forma dinámica, y también ajusta el contenido de la página cuando el usuario modifica el tamaño de la ventana del explorador en el escritorio.
Se debe mencionar que en las consultas de medios de CSS, no existe una comprobación explícita del tipo de explorador, ya sea móvil o de escritorio; lo único que importa es el ancho real de la pantalla. Sin embargo, cuando se usa una consulta de medios para filtrar los exploradores con un ancho superior a 320 píxeles, realmente se está seleccionando todos los dispositivos móviles y teléfonos celulares con ese tamaño de pantalla.
La palabra clave "solo" en la consulta de medios se debe agregar con el único propósito de esconder la instrucción de la consulta de medios de los exploradores que no son compatibles con dichas consultas. De hecho, estos exploradores desconocen el tipo de medio y simplemente continúan con su representación. Actualmente, se cree que simplemente al agregar las consultas de medios a un sitio, este queda listo para los clientes móviles. Mi opinión es un poco diferente. Las consultas de medios de CSS adaptan un poco el contenido de la página para la visualización móvil, pero en ningún caso ayudan a optimizar el sitio móvil para otros aspectos críticos, como el número de solicitudes HTTP por página y la cantidad datos descargados.
Es más, las consultas de medios solo pueden distinguir un número limitado de propiedades del explorador. La documentación completa sobre las consultas de medios se encuentra disponible en bit.ly/yOuW7q.
Las propiedades de las consultas de medios de CSS dan a conocer una parte del dispositivo, pero no todo lo que se debe saber. Por ejemplo, se desconoce sobre el SO, si el dispositivo es móvil o no, si es una tableta o un televisor inteligente o quizás un robot. Del mismo modo, con las consultas de medios de CSS, no se sabe si el explorador que responde es compatible con JavaScript asincrónico y XML y la manipulación de Modelo de objetos de documento, ni tampoco cómo administra HTML5 y jQuery Mobile, ni qué tipo de marcado prefiere.
Al ser una característica de CSS, el subsistema de CSS del explorador procesa las consultas de medios. Resulta que las consultas de medios solo pueden seleccionar un conjunto de estilos de elementos que ocultan o modifican el tamaño de ciertos elementos que son demasiado grandes o que se pueden reducir en una pantalla pequeña. Con las consultas de medios de CSS, se continúa pagando el costo de tener que descargar y mantener esos elementos en la memoria, incluso cuando no se visualizan. Se puede usar JavaScript en estas páginas para descargar o configurar imágenes de manera programada. De este modo, los elementos pesados se pueden administrar de forma más optimizada. Sin embargo, este trabajo adicional queda en sus manos.
Finalmente, las consultas de medios requieren un explorador compatible con CSS3. Esto quiere decir que las consultas de medios de CSS funcionan muy bien en la mayoría de los smartphones, pero no en dispositivos más antiguos, ni siquiera en Windows Phone 7. Puede optar por una solución de consultas de medios que funcione en todos los exploradores al obtener el complemento jQuery en bit.ly/JcwwFY. Sin embargo, en este caso tampoco existe una garantía de que el explorador móvil en el que esté usando este complemento realmente pueda ejecutar jQuery.
En general, las consultas de medios de CSS no son una tecnología que tenga como objetivo específico el desarrollo móvil. Sin embargo, la flexibilidad de las consultas de medios de CSS las hace muy atractivas de usar para servir a distintos dispositivos con un sol código base. En algunos casos puede existir una solución, pero las consultas de medios de CSS no son una opción para cualquier escenario.
Multi-Serving
La ruta del lado del servidor para el desarrollo móvil está basada en la idea de que el sitio web recibe una solicitud, obtiene el agente del usuario y usa dicha información para calcular las verdaderas capacidades del explorador. A continuación, con ese conocimiento, el sitio web decide de manera inteligente cuál sería el contenido más apropiado para el dispositivo solicitante.
¿Cómo se puede averiguar sobre las capacidades del explorador? Actualmente, la estrategia más eficiente parece ser el uso de un Repositorio de descripciones de dispositivos (DDR); una base de datos que almacena casi todas las propiedades posibles de prácticamente todos los dispositivos y que se actualiza constantemente a medida que aparecen nuevos dispositivos en el mercado. ¿En que se diferencia un DDR de un objeto Request.Browser de ASP.NET? De cierta forma, el objeto Request.Browser se puede ver como un DDR simple que contiene buena información sobre los exploradores de escritorio, pero no información muy precisa sobre los dispositivos móviles.
La cantidad de modelos de dispositivos móviles diferentes se cuenta por miles y continúa creciendo. Las propiedades que le pueden interesar a un desarrollador para cada perfil de dispositivo en un caso de uso en especial pueden cambiar bastante, pero si se considera la unión de todas ellas se puede llegar fácilmente a los cientos. ¿Qué opciones existen actualmente para obtener información de dispositivos precisa?
El DDR llamado Wireless Universal Resource File (WURFL) es una base de datos XML que contiene actualmente más de 15.000 perfiles de dispositivos móviles y coincide con más de medio millón de cadenas de agente de usuario. Cada perfil contiene más de 500 capacidades. WURLF es un marco de código abierto presentado como un esquema clásico de doble licencia, AGPL v3 y comercial. WURFL también está disponible como un servicio en la nube y algunos planes básicos, limitados a solo algunas propiedades, son gratuitos. Para obtener más información, visite scientiamobile.com. WURFL no es el único DDR disponible, pero se puede considerar como el estándar de hecho. Entre otras cosas, WURFL se usa en la plataforma móvil de Facebook y Google. WURFL posee API para PHP, Java y Microsoft .NET Framework, y se conecta de buena manera con las aplicaciones ASP.NET a través de NuGet.
Con relación a la plataforma ASP.NET, otra solución DDR interesante es 51Degrees (51degrees.codeplex.com). 51Degrees usaba originalmente a WURFL como la fuente de información sobre dispositivos, pero recientemente apareció una nueva versión con una nueva arquitectura y un nuevo vocabulario interno. 51Degrees es una iniciativa completamente comercial, pero ofrece una versión gratuita del marco, limitada a cuatro propiedades: isMobile, ScreenPixelWidth, ScreenPixelHeight y LayoutEngine, que se relacionan con el motor de representación del explorador. Con relación a las ofertas gratuitas, WURFL y 51Degrees son prácticamente equivalentes, excepto por las licencias.
Comprender lo que se quiere y lo que se necesita
El desarrollo móvil se relaciona principalmente con comprender qué es lo que los clientes quieren y necesitan. Esto resulta crucial y se resuelve cuando se cuenta con una buena selección de casos de uso. Es especial para los sitios móviles, calculo que contar con una buena selección de casos de uso para implementar representa la mayor parte del trabajo. Más allá de eso, el desarrollo móvil requiere poder reconocer que la exploración móvil es diferente. Esto significa que contar únicamente con un sitio web que se transforma en diferentes representación para distintos dispositivos es el objetivo, pero no se alcanzará de forma gratuita con el uso de la magia de algunos archivos CSS. CSS casi no contiene lógica y probablemente la lógica está involucrada en la decisión sobre qué contenido se le entrega a una clase dada de dispositivos.
En el siguiente artículo, analizaré cómo cambiar de un sitio de escritorio a uno móvil y así entregar dos sitios, pero posiblemente solo una experiencia al usuario. Después, profundizaré en la segmentación del explorador y las alternativas para las consultas de medios.
Dino Esposito es autor de “Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) y “Programming Microsoft ASP.NET MVC 3” (Microsoft Press, 2011), y coautor de “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2008). Con residencia en Italia, Esposito participa habitualmente en conferencias y eventos del sector en todo el mundo. Puede seguir a Dino por Twitter en twitter.com/despos.
Gracias al siguiente experto técnico por su ayuda en la revisión de este artículo: Steve Sanderson