Resumen
Todos hemos sido testigo como la Web ha sufrido y experimentado cambios “cuánticos” desde sus inicios – hasta convertirse en algo tan potente capaz de soportar y ejecutar aplicaciones completas y complejas. Lo normal es que este tipo de aplicaciones sean ejecutadas bajo entornos de ordenadores personales. Sin embargo cada vez es más común su ejecución y despliegue en dispositivos móviles.
Los límites de la plataforma web siguen evolucionando a pasos agigantados, sin embargo los líderes de la industria están hablando de como el estándar HTML5 será la piedra angular para esta plataforma. No obstante, la fuerza de la plataforma incluye muchas otras tecnologías como la generación y manipulación de gráficos basados en el estándar SVG, el uso de la especificación CSS3, las nuevas características y funcionalidades multimedia sobre las capacidades de la cámara y el micrófono, la integración con sensores, adaptación del dispositivo a distintas resolución y tamaños de pantallas, red, seguridad y privacidad, etc.
Las tecnologías anteriores solo son algunas de las cuales su formación, revisión y estandarización sucede en el seno de la World Wide Web (W3C). Consorcio internacional donde las organizaciones miembros trabajan conjuntamente para desarrollar estándares Web (W3C, About the W3C, 2016).
La finalidad de este documento es realizar un resumen de los estándares definidos por la W3C para mejorar las capacidades de las aplicaciones web cuando se usan desde dispositivos móviles.
Palabras Claves: estándares web, móviles, aplicaciones web, internet, navegadores.
Abstract
We have all witnessed how the Web has suffered and experienced “quantum” changes from the beginning – to become as powerful able to support and implement comprehensive and complex applications. Typically, these applications are executed under PC environments. However it is increasingly common implementation and deployment on mobile devices.
The boundaries of the web platform continue to evolve rapidly, however the industry leaders are talking about how the HTML5 standard will be the cornerstone for this platform. However, the strength of the platform includes many other technologies such as the generation and manipulation based on the SVG standard graphics, the use of CSS3 specification, new features and multimedia capabilities on the capabilities of the camera and microphone, integration with sensors, adapting the device to different screen sizes and resolution, network, security and privacy, etc.
Previous technologies are just some of which their training, review and standardization happens within the World Wide Web (W3C). International Consortium where member organizations work together to develop Web standards (W3C, the W3C About, 2016).
The purpose of this document is make a summary of the standards defined by the W3C to improve the capabilities of web applications when used from mobile devices. The focus of this paper is focused on exposing the standards that we must follow when web applications for the mobile environment are developed.
Keywords: Web standards, mobile, web applications, internet browsers.
Definiciones
Antes de entrar en los detalles quisiera comenzar exponiendo las diferencias o similitudes sobre las definiciones de “Web Application” y “Web Site” según algunos autores, añadiendo mi opinión personal. El objetivo de lo anterior es solo para marcar la ruta hacia donde están orientados los estándares que se describirán más adelante en este documento. Las aplicaciones web o “Web Applications” están diseñadas para solventar problemas o necesidades (Rawool, 2014), orientadas a crear una verdadera interacción con el usuario y con un alto dinamismo en la presentación de los datos. Los usuarios pueden acceder mediante un navegador desde el cual se hacen las peticiones al servidor web, quien genera las respuestas respectivas a dichas solicitudes. Por otro lado los “website” han sido pensados para proveer información por medio de hipertexto (Rawool, 2014), siendo en la mayoría de veces información estática e informativa.
Con mucha seguridad podría decir que dentro de los lectores encontraré un porcentaje de partidarios, así como detractores de las definiciones anteriores. Sin embargo la finalidad del artículo, no es entrar en ese debate y más bien quiero enfocarme en los estándares del desarrollo de aplicaciones web en un entorno móvil, que es la médula de este documento.
También considero necesario que definamos ¿Qué es una web móvil?, Esta hace referencia a una Web donde el usuario debería poder acceder, sin ningún problema, desde cualquier dispositivo, creando una experiencia de usuario totalmente positiva y transparente visualizándola como si desde un ordenador se tratara (W3C, W3C, 2015) . Lo que pretende una web móvil es lograr una verdadera interoperabilidad y usabilidad, pero la realidad es que en tiempos actuales todavía es difícil o complicado su acceso desde terminales móviles.
¿Qué Son Los Estándares Web?
Según la W3C un estándar “es el conjunto de reglas normalizadas que describen los requisitos que deben ser cumplidos por un producto, proceso o servicio, con el objetivo de establecer un mecanismo base para permitir que distintos elementos hardware o software que lo utilicen, sean compatibles entre sí” (W3C, W3C, 2015).
De igual manera la W3C define los estándares web como una plataforma web abierta para el desarrollo de aplicaciones que ahora mismo tiene un potencial sin precedentes para permitirle a los desarrolladores construir experiencias más ricas en contenido y totalmente interactivas (W3C, W3C, 2015).
Entorno Móvil
En la actualidad los desarrollos de aplicaciones web ya no solo requieren que se construyan exclusivamente para ser ejecutadas desde ordenadores personales, sino que además se debe considerar su ejecución bajo el entorno móvil, siendo este uno de los entornos con más crecimiento de uso en los últimos años (Chaffey, 2016), por tanto también es necesario conocer sus características y limitantes.
Existe una enorme lista de modelos, resoluciones, tamaños y de las variadas características de los dispositivos móviles actuales tales como tecnologías de geolocalización, cámaras, sensores, tipos de pantallas, etc. Esto supone un gran problema para crear una web universal que no siga segmentándose debido a la proliferación de modelos en función de cuanto fabricante de teléfonos o tabletas aparecen en el mercado. Es necesaria una total adecuación del contenido independiente del lugar y del dispositivo; este es el enorme trabajo de las personas detrás de la W3C quienes se encargan de definir los estándares a seguir.
Estándares Para Aplicaciones Web En Móviles
La World Wide Web (W3C), organización responsable de definir los estándares para la Web, publica en Agosto de 2015 la última revisión del documento “Standards for Web Applications on Mobile”[1] (W3C, W3C, 2015) en donde se define una serie de tecnologías que permiten extender las capacidades de las aplicaciones web cuando se ejecutan sobre dispositivos móviles.
Esta revisión se corresponde con la 18va edición sobre la visión general de las tecnologías para aplicaciones web en dispositivos móviles cuya anterior revisión fue en mayo 2015 (W3C, 2015).
La idea del documento que define los estándares es facilitar la explotación de las capacidades de los dispositivos móviles, que permita una mejor experiencia de usuario así como la consideración del impacto de algunas de las características y cómo estas podrían ser perjudiciales en la calidad de la aplicación sino se alinea con los estándares.
Al construir aplicaciones web, no siempre será necesario se apliquen todos los estándares. Sin embargo cada uno deberá evaluarse y aplicarse según las necesidades específicas del proyecto que se esté desarrollando.
Las características de las tecnologías formadas en la W3C que aportan y extiende la plataforma web se organizan en las siguientes categorías:
1-Núcleo del Diseño y Desarrollo Web
El Núcleo del diseño y desarrollo web reside en un subconjunto de tecnologías las cuales se describen a continuación:
1.1 Gráficos y Diseño
El estándar SVG (W3C, Scalable Vector Graphics v2, 2016) nos provee un lenguaje de marcado basado en XML el cual describe dos dimensiones para gráficos vectoriales. Esto significa que el usuario puede jugar con el zoom, muy adecuado para crear gráficos en dispositivos móviles donde el espacio de pantalla es muy limitado.
La integración con HTML5 nos ofrece un abanico de nuevas posibilidades como la aplicación de filtros gráficos a los contenidos multimedia. A demás el enfoque declarativo para el estándar SVG permite una API 2D declarativa que reduce en gran medida el procesamiento de gráficos y el uso de memoria. Con dicha API podemos realizar la presentación de los gráficos así como el procesamiento y análisis de los mismos.
SVG y HTML son dos estándares que pueden utilizar estilos CSS, en especial el estándar CSS3 (W3C, CSS) cuya especificación establece un gran número de nuevas características como: esquinas redondeadas, imágenes de fondos, sombras, transformaciones, efectos 3D, etc.
1.2 Adaptación del Dispositivo
La mayoría de dispositivos móviles no solo difieren con los ordenadores, también existe una amplia variedad de características entre ellos tales como: tamaño de pantalla, resolución, tipo de teclado, capacidad de grabación etc. El reto es poder desarrollar aplicaciones web que funcionen adecuadamente en diferentes configuraciones y escenarios móviles.
Existe una cantidad de APIs que definen y ayudan a mantener la adaptación del dispositivo tales como:
La API Device Description Repository (W3C, 2015) es una API de servidor unificada que permite a los desarrolladores Web recuperar los datos en los dispositivos que tienen acceso a sus páginas en una variedad de base de datos de información del dispositivo
La API[i] Media Capture and Stream (W3C, MediaCaptureStream, 2016), expone alguna información concreta sobre las capacidades de la cámara y los micrófonos para que sea posible tomar ventaja de la gran variedad de los medios de captura de los dispositivos que contienen los teléfonos móviles.
Las CSS Media Queries ofrecen un mecanismo que permite la adaptación del diseño y el comportamiento de una página Web basado en algunas de las características del dispositivo, incluyendo la resolución de la pantalla – a las que Media Queries Level 4 propone añadir la disponibilidad y el tipo de puntero de señalización del dispositivo, la capacidad de flotar (hover) sobre los elementos, y la luminosidad del ambiente.
La CSS Device Adaptation define un conjunto de directivas de CSS para definir el tamaño en el que debe basarse este diseño, en relación al tamaño del dispositivo subyacente – especificando lo que se ha implementado utilizando elemento <meta name=”viewport”>.
1.3 Formularios
La capacidad de construir formularios enriquecidos con HTML es la base para la entrada de la persona usuaria en la mayoría de las aplicaciones basadas en Web. Debido a sus teclados limitados, la entrada de texto en los dispositivos móviles sigue siendo una tarea difícil para la mayoría de las personas; HTML5 trata parte de este problema al ofrecer nuevos tipos de controles de formulario que optimizan la forma en que las personas pueden introducir datos.
Podemos mencionar algunos elementos nuevos como:
- Entrada de fechas y horas (type=date)
- Campos de tipo email
- Atributos de tipo inputmode (propuesto en HTML 5.1) define el tipo de entrada textual que se espera en una entrada de texto
- Atributo Placeholder
- Elemento datalist el cual permite crear controles de entrada de texto libre que vengan con valores predefinidos que la persona puede seleccionar.
1.4 Almacenamiento de Datos
Un componente crítico de muchas aplicaciones es tener la capacidad de guardar el estado, exportar contenido así como la capacidad de integración entre los datos con otros archivos y servicios de la aplicación.
Para guardar datos simples, la especificación Web Storage nos ofrece dos mecanismos básicos: localStorage y sessionStorage, con la cual podemos preservar los datos respectivamente y de forma indefinida.
Para interacciones más dinámicas, la plataforma web nos provee la API File Reader con la cual es posible cargar el contenido en un archivo. Con la necesidad de almacenar cada vez más datos por el navegador (por ejemplo, para uso sin conexión), se convierte en fundamental para los desarrolladores conseguir espacio de almacenamiento, que la API Quota Management (W3C, Quota Management API, 2015) ofrecerá a las aplicaciones Web.
2- Multimedia y Comunicación En Tiempo Real
En el estándar HTML5 se añaden dos etiquetas que mejoran drásticamente la integración de contenidos multimedia en la Web: Las etiquetas <video> y <audio>, estas etiquetas permiten la incorporación de vídeo y audio, y hacen posible que los desarrolladores web puedan interactuar con mucha más libertad con que el contenido de lo que lo harían a través de plug-ins o complementos.
Se están desarrollando una serie de APIs[2] de las cuales podemos mencionar la getUserMedia API (W3C, MediaCaptureStream, 2016) para manipular directamente la cámara y el micrófono. La MediaStream Recording API (W3C, MediaStream Recording, 2016) para grabar las acciones de dichos componentes. Lo que hace extensible las capacidades de la plataforma al manipular los recursos nativos del dispositivo que antes era imposible.
3- Usabilidad y Accesibilidad
En la actualidad la mayoría de dispositivos móviles ofrecen características de interacción táctil. La introducción de este tipo de entrada y manipulación ofrece una mejor experiencia de usuario. En respuesta a ello se ha desarrollado la especificación Touch Events in the DOM (Document Object Model) (W3C, Touch Events, 5), el manejo de entradas de usuario mediante Pointer Events, la retroalimentación haptica por medio de la Vibracion API.
Además las formas de interacción se diversifican rápidamente por lo que se debe permitir a los desarrolladores web considerar una serie de interacciones abstractas. La especificación IndieUI Events (W3C, IndieUI, 2016) cubre esas necesidades.
4- Dispositivos de Interacción
Por lo general los dispositivos móviles actuales disponen de una gran cantidad de sensores cada uno para diferentes objetivos, lo que los convierte en punto de enlace entre los mundos reales y virtuales: GPS, acelerómetro, detector de luz ambiental, micrófono, cámara, termómetro, etc.
Para lograr aprovechar todo el potencial y las características de estos sensores en aplicaciones Web para móviles, los desarrolladores Web deben estar provistos de hooks (ganchos) o especificaciones para interactuar con ellos. Para ello se cuenta con la Geolocation API (W3C, Geolocation API, 2014) que es la que proporciona una interfaz común para trabajar con la geolocalizacion del dispositivo, independientemente de la tecnología subyacente (GPS, identificación de redes WiFi, triangulación en las redes celulares, etc.).
5- Integración de Red
En los dispositivos móviles la conectividad de red constituye un recurso importante. La Web es una fuente casi inagotable de poder de procesamiento, superando una de las limitaciones de los dispositivos móviles.
La W3C está desarrollando una serie de APIs que facilitan el establecimiento de la conectividad de red en diferentes contextos. Por ejemplo la API XMLHttpRequest (W3C, XMLHttpRequest, 2014), base del desarrollo AJAX está ampliamente expandida para cargar recursos desde los servidores web ya sea utilizando el protocolo HTTP o HTTPS.
Por otro lado tenemos la API WebSocket (W3C, 2015), construida sobre el protocolo IETF WebSocket, ofrece una conectividad de red bidirectional, más flexible, y menos intensiva en recursos que XMLHttpRequest.
6- Pagos
A pesar que existen soluciones bastantes conocidas de pago en línea, se ha logrado demostrar que dichas soluciones no generan una experiencia de usuario positivo, mas bien son difíciles de usar desde los dispositivos móviles.
En Marzo de 2014, W3C organizó un taller sobre pagos en la Web para identificar posibles vías en que los estándares pudieran ayudar a hacer la experiencia de pago más simple, especialmente en dispositivos móviles. Lo que dio paso al surgimiento de un manifiesto cuyo responsable del desarrollo está bajo el mando del grupo W3C Interest Group.
7- Rendimiento y Optimización
Una de las limitantes de los dispositivos móviles es su limitada CPU, y más significativa la limitada duración de las baterías. Por lo general los dispositivos móviles requieren una gran cantidad de atención en términos de rendimiento.
Actualmente se están realizando una serie de trabajos iniciados por el Web Performance Working Group en temas de Navigation Timing, Resource Timing, Performance Timeline y User Timing, con lo que se espera entregar las herramientas a los desarrolladores para la optimización de sus aplicaciones Web.
Los desarrolladores Web disponemos de una API para determinar si se está visualizando una página Web (Page Visibility API), también se puede utilizar para adaptar el uso de los recursos a la necesidad de la aplicación Web.
Como se mencionaba anteriormente una limitante de los dispositivos móviles es la duración de la batería, para ello se ha desarrollado la API de batería que permite ajustar el uso de los recursos al nivel actual de energía disponible en la batería de un dispositivo móvil.
Además la W3C ha desarrollado el documento “Mobile Web Application Best Practices” (W3C, Best Practices, 2010) en donde se describen las mejores prácticas acerca de esta característica en los dispositivos móviles.
8- Seguridad y Privacidad
Los dispositivos móviles contienen información personal del usuario como: contactos, fotos, calendarios, etc. Por consiguiente es necesario lograr que el usuario tenga plena confianza del resguardo de los datos ante posibles ataques que vulneren la seguridad del dispositivo.
Para darle seguimiento a esta característica tan importante la W3C ha designado a los grupos Interest Group y el Web Security Interest Group para que coordinen las revisiones en sus respectivos campos.
En las aplicaciones que agregan el contenido de múltiples fuentes (posiblemente de no confianza), el sandbox HTML5 iframe permite restringir con qué tipo de interacciones con contenido integrado de terceros se puede hacer uso.
Para trabajar el tema de seguridad en desarrollo de aplicaciones web se ha creado la Web Cryptography API (W3C, Cryptography API, 2015) la cual proporciona las herramientas necesarias para cifrar los datos para el almacenamiento y la transmisión desde las aplicaciones Web, con claves de acceso aprovisionado previamente a través de la API WebCrypto Key Discovery (W3C, WebCrypto Key , 2016).
Para facilitar la autenticación de las personas a los servicios en linea, se ha comenzado a trabajar en la identificación de las oportunidades para gestionar las credenciales y la autorización on-line.
[1] Documento: “Standards for Web Applications on Mobile”
[2] Applications Programming Interface
