Tecnología de vanguardia

Desarrollo de sitios móviles: Marcado

Dino Esposito

 

A medida que aumenta la cantidad de dispositivos móviles que se usan para explorar la web, contar con un sitio web optimizado para la visualización móvil se está convirtiendo en un factor crítico para las empresas. Seamos realistas: incluso con los smartphones más modernos, explorar un sitio de escritorio resulta bastante problemático. Debemos acercar y alejarnos para entender el contenido y poder seguir los vínculos. Es factible, claro, pero no es una experiencia de usuario buena.

Yo uso mi smartphone para explorar sitios de escritorio y por lo general prefiero ver la versión completa antes que la versión móvil, cuando está disponible. Esto lo hago por un motivo clave: Usualmente, los sitios móviles no están tan bien diseñados como los sitios de escritorio. Como usuarios frecuentes de un sitio, generamos ciertas expectativas. Esperamos que el sitio las cumpla todas, independientemente del medio que usamos para acceder al sitio. Si accedemos al sitio a través de un dispositivo móvil, idealmente esperamos el mismo nivel de servicio, pero enfocado al nuestro estado actual, es decir, la de un usuario móvil, que posiblemente se está desplazando, apurado y que quizás usa una conexión insatisfactoria.

Este es precisamente el desafío que enfrentan los arquitectos y desarrolladores de los sitios móviles. Lo más problemático de los sitios móviles no es necesariamente la implementación de las funcionalidades. Generalmente, los sitios móviles cuentan con menos funciones y acciones por página que los sitios de escritorio y menos líneas de código significan menos problemas. Sin embargo, para ofrecer una buena experiencia de usuario, se deben proporcionar las funcionalidades solicitadas comúnmente; esto es incluso más urgente que en los sitios de escritorio. Puede ser un gran desafío lograr una experiencia de usuario excelente en los dispositivos móviles y por lo general los equipos de desarrollo deben recurrir a técnicas de codificación y soluciones de diseño extremadamente ingeniosas.

Además, es posible que los sitios móviles deban adaptarse a una amplia gama de dispositivos diferentes. Si el tener que lidiar con diferentes exploradores de escritorio era una idea intimidante hace un par de años atrás, piense en el espacio móvil, en el que los diversos perfiles de dispositivo con los que se puede encontrar pueden llegar a ser miles. (Pero esto no significa que deba crear miles de versiones diferentes de un sitio; simplemente debe reducir estos miles de perfiles de dispositivo a algunas clases de dispositivos y los administra de manera diferente).

Este artículo es el primero de una serie en la que intentaré abordar el desarrollo de sitios móviles a partir de una perspectiva que no se centra principalmente en la tecnología. Creo que es muy común que el desarrollo de sitios móviles se asocie con marcos de trabajo específicos y en sus soluciones, sin tener mucho en cuenta los casos de uso y la reestructuración del contenido. En este artículo, partiré de lo más básico, el marcado móvil.

Exploradores y la ventanilla

En forma predeterminada, la mayoría de los exploradores móviles actuales presenta las páginas en ventanillas mucho más grandes que el tamaño real de la pantalla del dispositivo. El ancho real de la ventanilla varía según el explorador, pero siempre está cerca de los 1.000 píxeles. Por ejemplo, se sabe que son 980 píxeles en Safari para iPhone e Internet Explorer 9 y 800 píxeles en Android WebKit. Como desarrollador móvil, la primera tarea que debe comprender es la función y el origen de la ventanilla. La Ilustración 1 muestra cómo los exploradores móviles usan la ventanilla.

Ilustración 1 Cómo los exploradores móviles usan la ventanilla

La ventanilla es un área de ancho fijo en el que los exploradores presentan el contenido. El tamaño de la ventanilla no se relaciona necesariamente con el tamaño físico de la pantalla. Esto apenas tiene importancia en los exploradores de escritorio, pero se convierte en un problema en las pantallas de los dispositivos móviles, que son mucho menores. Los exploradores suelen presentar las páginas en función del tamaño de la ventanilla interna. Pero en el momento de la visualización alejan la ventanilla para que todo el contenido se ajuste al tamaño real de la pantalla.

El efecto neto es que el usuario debe desplazarse horizontal y verticalmente para llegar al contenido o debe acercarse para poder leer el contenido y, más importante aun, poder seguir los vínculos. Un excelente recurso para aprender más sobre la implementación interna de las ventanillas en los diferentes exploradores se encuentra en bit.ly/bZYlKb,

Ventanilla y marcado

En los inicios del desarrollo de los sitios móviles, no se usaba el mismo marcado que en los sitios de escritorio. En el transcurso de los años, pasamos desde el lenguaje de marcado inalámbrico (WML) al HTML compacto (cHTML) y al HTML extensible (XHTML) para el uso móvil. En todos estos casos, se presentaba al explorador un tipo de Extensiones multipropósito de correo Internet (MIME) definido. A partir de esta información, el explorador podía determinar qué tipo de contenido recibiría y para representarlo debidamente. Con la aparición del iPhone, se hizo evidente que las funcionalidades de los dispositivos móviles se podían comparar con los equipos portátiles, al menos en la representación de las páginas web. Pero al proporcionar el mismo marcado para los exploradores móviles y los de escritorio surgió el problema de los diferentes tamaños de pantalla, que obligó a los usuarios móviles a acercar y alejar el contenido, según la situación.

Al usar el mismo tipo de MIME (text/html) tanto para las solicitudes móviles como las de escritorio, el explorador ya no puede usar el tipo de MIME para saber si el contenido debe aparecer en una ventanilla de tamaño de escritorio o móvil. Por esa razón Apple Inc. presentó hace un par de años la etiqueta meta de ventanilla. Ahora la etiqueta meta de ventanilla es un estándar de facto y todas las página que para dispositivos móviles deberían usarla. La etiqueta de ventanilla generalmente se usa del siguiente modo:

<meta name="viewport" content="width=device-width" />

El atributo content de la etiqueta meta se configura como una expresión que permite establecer algunas propiedades en valores ad hoc. La propiedad más importante es width (ancho). Los exploradores la usan para configurar el tamaño de las ventanillas en forma dinámica. Podemos establecer la propiedad width en una cantidad de píxeles determinada o en una expresión especial, como en el ejemplo anterior. Concretamente, el valor device-width (ancho del dispositivo) indica el ancho de la pantalla en píxeles. Observe que en este contexto un píxel representa un píxel independiente del dispositivo o píxel CSS. En los dispositivos con una alta densidad de píxeles, el explorador debe cambiar la escala y es posible que un ancho de 100 píxeles cubra 150 o incluso 200 píxeles físicos. La Ilustración 2 enumera las propiedades disponibles en la expresión de ventanilla. 

Ilustración 2 Propiedades de la expresión de ventanilla

Propiedad	Descripción
width	Indica el ancho de ventanilla deseado en píxeles independientes del dispositivo. Puede ser un número explícito (por ejemplo, 240) o, mejor aun, un valor relativo como el ancho del dispositivo.
height	Indica el alto de ventanilla deseado en píxeles independientes del dispositivo. Puede ser un número explícito (por ejemplo, 320) o, mejor aun, un valor relativo como el alto del dispositivo.
initial-scale	Indica el nivel de zoom deseado cuando la página se carga por primera vez. Un valor de 1 indica que la página se debe representar en tamaño natural, sin zoom. Un valor de 2 duplica el tamaño de la página y así sucesivamente. También puede usar valores decimales, como “1.0”.
minimum-scale	Indica el nivel mínimo de zoom permitido para la página. Un valor de 1 indica que el usuario no puede alejarse para encoger la página más que su tamaño natural.
maximum-scale	Indica el nivel máximo de zoom permitido para la página. El valor máximo es 10.0.
user-scalable	Una propiedad yes/no que indica si el usuario puede acercar o alejar la página.

Algunos exploradores pueden poseer propiedades adicionales. En concreto, los exploradores Android también comprenden la propiedad target-densitydpi (densidad de ppp prevista), que permite a los desarrolladores comunicar la resolución de pantalla deseada para la página. Esto puede servir para que los exploradores Android optimicen el escalado de los recursos basados en píxeles, tales como las imágenes. La propiedad target-densitydpi se puede establecer en un número determinado o en un valor especial, como device-dpi (ppp del dispositivo).

Esta es una forma más específica de configurar la etiqueta meta de ventanilla:

<meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1"/>

La propiedad height no se usa frecuentemente. General sirve para colocar elementos en la parte inferior de la pantalla o en una posición que depende del alto de la ventanilla. Finalmente, observe que al establecer la propiedad user-scalable en “no” se deshabilita el zoom con el gesto de reducir en la página.

Actualmente la etiqueta meta de ventanilla es bastante común, pero antes algunos exploradores usaban otras etiquetas meta tales como HandheldFriendly y MobileOptimized con el mismo propósito:

<meta name="HandheldFriendly" content="true" /> 
<meta name="MobileOptimized" content="320" />

World Wide Web Consortium (W3C) está elaborando un informe para estandarizar el elemento viewport. Puede leer el borrador actual en bit.ly/AavTG5.

HTML y el perfil móvil XHTML

El objetivo final de la ventanilla y de otras etiquetas meta es indicar el tamaño de la ventanilla en el que el desarrollador desea representar el contenido. Usamos estas etiquetas cuando queremos entregar un marcado HTML simple a los exploradores móviles. Si por alguna razón usted quiere o debe proporcionar un marcado móvil, no necesita las etiquetas meta, sino que simplemente un documento con DOCTYPE de un perfil móvil XHTML (MP): 

<!DOCTYPE html PUBLIC
  "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
  "http://www.openmobilealliance.org/tech/DTD/xhtmlmobile12.dtd">

El tipo MIME para XHTML MP es “application/vnd.wap.xhtml+xml”. Comparador con la expresividad del HTML simple, XHTML MP es algo del pasado ya que tiene limitaciones en la manipulación de Modelo de objetos de documento (DOM) y en áreas importantes como la compatibilidad con CSS y JavaScript.

El estándar actual que funciona con la mayoría de los dispositivos actuales es usar HTML con la etiqueta de ventanilla. Sin embargo, es posible que su sitio esté abierto a un conjunto realmente grande de dispositivos, incluidos dispositivos antiguos que no son compatibles con HTML o con la etiqueta de ventanilla. ¿Qué hacer en esta situación?

Aunque suene categórico, deberá valerse de bases de datos especiales que cuentan con información sobre las funcionalidades de los exploradores móviles. Estas bases de datos se conocen como Repositorios de Descripciones de dispositivos (DDR). Wireless Universal Resource File (WURFL), que es el DDR usado por Facebook, posee una propiedad llamada preferred_markup que podemos consultar en el servidor (por ejemplo, desde una aplicación ASP.NET) para determinar el marcado más apropiado para responder a un dispositivo solicitante. Puede leer más acerca de WURFL en wurfl.sourceforge.net. Pretendo analizar WURFL y otros DDR como 51Degrees en artículos futuros.

HTML5 y los exploradores móviles

HTML5 es un lenguaje de marcado que lo exploradores móviles aceptan bastante bien, por lo menos con relación al estado actual del estándar. Esto se aplica a los exploradores integrados en smartphones (es decir, Safari en iPhone y iPad, Android WebKit e Internet Explorer 9 en Windows Phone) como también a los exploradores externos como Fennec (la versión móvil de Firefox) y Opera Mobile.

Puede revisar mobilehtml5.org, donde encontrará una comparación exhaustiva de la compatibilidad con HTML5 de varios exploradores móviles. Descubrirá que la compatibilidad con Canvas y SVG es prácticamente omnipresente mientras que los elementos de entrada (de importancia fundamental para las páginas móviles) tienen buena compatibilidad en iOS 5, pero no en las versiones actuales de Android WebKit. El almacenamiento local, geolocalización y multimedia también están presentes prácticamente en todas partes. 

No tan inteligente

Muy a menudo los sitios móviles solo se ven como vástagos de los sitios de escritorio existentes. Por esto, la mayor parte del diseño se realiza desde la perspectiva del sitio de escritorio y se supone que el cliente es tan “inteligente” (o sofisticado y poderoso) como un explorador de escritorio. Pero los smartphones no son tan “inteligentes” como los equipos portátiles. Esta gran fragmentación es un aspecto crítico del desarrollo de los sitios móviles. Por esta razón, al iniciar un proyecto de sitio móvil, el primer aspecto que debe considerar corresponde a los casos de uso que debe cubrir y los dispositivos a los que apuntará. Cualquiera sea la tecnología que desee usar, debe considerarla en segunda instancia. En artículos posteriores analizaré las técnicas para identificar casos de uso móviles pertinentes, patrones de desarrollo móvil y una presentación que considere el dispositivo.

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 a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Shane Church y Steve Sanderson