Criticality analysis

teoría, todos los dispositivos con conexión a Internet pueden acceder a cualquier sitio móvil a través de un navegador. La realidad, sin embargo, es que los desarrolladores necesitan atender al creciente número de navegadores y dispositivos con diferentes niveles de capacidades de software y hardware para adaptar y optimizar el contenido web móvil.

En términos generales, existen dos enfoques para optimizar el contenido para dispositivos móviles: adaptación del lado del cliente o del lado del servidor:

— La adaptación del lado cliente hace uso de una combi- nación de CSS y JavaScript ejecutándose en el dispositivo para ofrecer una experiencia ‘mobile-friendly’.

— La adaptación en el lado del servidor utiliza al servidor para que ejecute lógica antes de que se suministre el contenido al cliente.

La siguiente sección ofrece una revisión de técnicas tanto del lado cliente como del lado servidor para hacer los sitios webs accesibles a la mayoría de dispositivos actuales con acceso a Internet, así como a aquellos futuros.

Adaptación del Lado Cliente

Diseño Web Adaptativo (Responsive)

El diseño web adaptativo ha sido un término de moda entre vendedores y desarrolladores web por igual. En su formato más simple, consiste en una rejilla flexible, imágenes flexibles y CSS media queries para comportarse adaptativamente a una serie de resoluciones de pantalla o tipos de dispositivos.

Sitios Móviles y Tecnologías Web 136

En solitario, ésto sólo puede proporcionar una experiencia sensible a dispositivo en un rango limitado de ellos y no puede adaptarse a contenido sofisticado. El mismo contenido se sirve a todos los dispositivos. No se recomienda como técnica para producir sitios web complejos para navegadores desktop o móviles.

Pros

— Una adaptación completa en el lado cliente asegura que no haya impacto en la infraestructura existente.

— Ajuste automático de contenido y diseño.

Contras

— El mismo contenido disponible en el sitio web estará disponible también en la versión móvil (visible o no).

— El peso del sitio tendrá un impacto significativo en términos de rendimiento en los dispositivos móviles.

— Es una aproximación general más que una optimización real a un entorno móvil.

Mejoras Progresivas

Las mejoras progresivas tienen la capacidad de responder a toda la gama de dispositivos móviles. Se envía una sola página HTML a todos los dispositivos. Se utiliza código JavaScript de manera adicional para construir progresivamente la funcionalidad a un nivel óptimo para el dispositivo en particular. Ya que es una solución exclusiva móvil, el principal inconveniente es el rendimiento. La construcción progresiva conlleva tiempo de ejecución y varía de acuerdo con el dispositivo y la red. Como solución de desktop y móvil, su principal inconveniente es que

Sitios Móviles y Tecnologías Web 137

un único documento HTML se envía a todos los dispositivos. Un entorno muy conocido que hace uso de la mejora progresiva es jQuery Mobile11_.

Pros

— Una adaptación completa en el lado cliente asegura que no haya impacto en la infraestructura existente.

— Ajuste automático de contenido, funcionalidad y diseño.

Contras

— Pérdida de control, pues la detección es gestionada por el navegador.

— La detección de navegador dista mucho de ser perfecta.

— La detección realizada en el lado cliente tiene impacto sobre el rendimiento global del site.

— El mismo HTML es servido a todos los dispositivos.

Adaptación del Lado Servidor

Bases de Datos de Dispositivos

Las bases de datos de dispositivos detectan a cada dispositivo que accede a la página web y devuelven una lista de las capa- cidades del dispositivo al servidor. Esta información se utiliza entonces para servir un sitio móvil acorde con las capacidades del dispositivo. La adaptación del lado del servidor es una de las soluciones más antiguas y fiables. Algunas populares

138

bases de datos de dispositivos son WURFL12 _{y DeviceAtlas}13_{. El}

principal inconveniente de las bases de datos de dispositivo es que la mayoría sólo están disponibles bajo licencia comercial.

Pros

— La solución más habitual (Google, Facebook, Amazon y similares).

— Máximo control.

— Es posible la optimización según dispositivo (por ejemplo iPhone, Samsung Galaxy y similares).

Contras

— Los Repositorios de Descripción de Dispositivos (en inglés Device Description Repositories) están orientados a hardware.

— Aparte de los datos, es necesario un mecanismo de detec- ción (un simple ‘User-Agent’ no es suficiente).

Adaptación Híbrida

Realmente lo mejor de ambos mundos, la combinación de la adaptación en cliente y servidor asegura un alto rendimiento gracias a la adaptación del lado del servidor y garantiza que las capacidades obtenidas se pueden utilizar para enriquecer la experiencia móvil para las visitas siguientes.

Las soluciones híbridas de adaptación están disponibles comercialmente de compañías como Sevenval14 _{o Netbiscuits}15_,

12 wurfl.sourceforge.net/ 13 deviceatlas.com/

14 www.sevenval.com 15 www.netbiscuits.com

Sitios Móviles y Tecnologías Web 139

o como soluciones en la nube respaldadas por la comunidad, por ejemplo FITML16_.

Mejor Input de Datos

Con pequeñas teclados, a menudo en pantalla, introducir texto puede resultar engorroso y lento, especialmente si el usuario tiene que introducir números, direcciones de correo electrónico o texto similar, etcétera. Afortunadamente, los desarrolladores pueden especificar el tipo esperado de datos y los smartphones mostrarán entonces el teclado más apropiado en pantalla. mobileinputtypes.com proporciona varios ejemplos claros y concisos.

Mejor Rendimiento

Los usuarios esperan que los sitios web tarden en cargar entre 2 y 5 segundos. Esto supone un reto, especialmente para los sitios móviles más complejos. Las siguiente secciones ofrecen trucos para reducir la transferencia de datos, contenidos y llamadas HTTP para minimizar el tiempo de carga y mejorar el rendimiento.

Reducir el Volumen Transmitido

Cambiar los tamaños de imágenes y ajustar su calidad conforme a la calidad de la red.

Reducir Contenido

Tanto la carga del site como de los contenidos son cada vez más importantes. Reducir en lo posible elementos tales como los archivos JavaScript y CSS te ayuda a reducir el tiempo global de carga. Múltiples archivos del mismo tipo pueden ser comprimidos en uno y los espacios vacíos pueden ser elimina- dos. El código se acorta, pero se comporta de la misma manera.

Sitios Móviles y Tecnologías Web 140

Todo esto puede resultar en un menor número de llamadas y, finalmente, en un mejor tiempo de carga.

Al mismo tiempo, es importante que el usuario comprende qué está ocurriendo. Si el contenido está en proceso de carga es importante que el usuario sea consciente de ello, y no mostrarle una página o espacio en blanco. Una experiencia sin contratiempos es primordial para cualquier experiencia móvil, y esto incluye el viaje desde el site hasta la carga de contenidos en el site, y todas aquellas animaciones que los acompañen. Reducir Llamadas HTTP

Imágenes inline, scripts y estilo, añadir JavaScript pipes y cache de aplicaciones. Beneficios clave son que los scripts se transmiten en una sola llamada por página, el tráfico HTTP se minimiza y los scripts básicos se almacenan en la cache de la aplicación. La implementación no afecta el refresco y los scripts aún pueden alojar en la cache del CDN.

Para más detalles y recomendaciones sobre rendimiento de webs móviles estudia la presentación de Roland Guelle en Slideshare17_.