Diseñando la web física

La Internet de las Cosas –Internet of Things, o IoT– es la promesa de que en algún momento los objetos cotidianos que nos rodean estarán conectados a la red mundial de datos. Aunque esta visión aún no llega por completo, la Web Física –Physical Web– es un paso importante para volverla tangible.

La Web Física (Physical Web)  podría sonar como un intento de darle un nombre distinto al Internet de las Cosas, aunque es realidad es una parte de ésta. Internet y la Web no son lo mismo, son diferentes entidades donde la primera se refiere a la tecnología e infraestructura que hace posible la red mundial de comunicación; la segunda se refiere a un servicio de transmisión de datos con la que se puede interactuar a través de un navegador web, o browser.

De  manera análoga, Internet de las Cosas es una colección de objetos inteligentes que se están conectando rapidamente a Internet, y la Web Física nos permite tener acceso e interactuar con esos objetos a través de un navegador web de una manera simple e intuitiva.

Web física en un iPhone  Web física en Android

Una solución de Web Física se basa en tres componentes:

1. Objetos inteligentes

El primer componente de la Web Física son esos objetos inteligentes que mencioné antes, que son pequeños dispositivos capaces de emitir una señal de corto alcance usando Bluetooth a otros dispositivos que se encuentren cerca, como smarthphones, para interactuar con ellos con información que obtienen de Internet.

Beacon comunicándose con una app
Un beacon comunicándose con una app

Los beacons son un buen ejemplo de estos objetos, además de que son baratos y sencillos de instalar. Algunos beacons tienen sensores que les permiten detectar su ubicación geográfica, medir la temperatura ambiente donde están instalados o detectar si otros dispositivos alrededor suyo se están acercando o alejando de ellos.

Tal vez el principal problema de los beacons es que para proveer una experiencia de usuario enriquecida dependen de que los usuarios tengan instalada un app en su móvil con capacidades para reconocerlos y comunicarse con ellos. Si el usuario no tiene la app o no puede instalarla, el beacon es invisible para él.

2. Direcciones web

URLPara resolver este problema, la Web Física utiliza como segundo componente una dirección web o URL. Los objetos inteligentes en la Web Física envían constantemente una dirección web que cualquier dispositivo cercano al objeto puede recibir; la idea es replantear los sitios web móviles para que muestren información relevante a un usuario en una ubicación física, por ejemplo: junto a una máquina expendedora, un poster, una parada de autobús o una cafetería, sin necesidad de que los usuarios descarguen una app primero sino que utilicen una app que ya está en su dispositivo: su browser.

3. El navegador web

Navegadores web para móvilEl tercer elemento de la Web Física es el navegador web del smartphone, que toma el lugar de la app en esa conexión con un beacon e interpreta la dirección que se le envía para abrir una página móvil específica para el contexto del usuario.

El navegador es capaz de detectar los beacons de Web Física alrededor suyo y mostrar su información ordenada por una combinación de factores como proximidad, intensidad de su señal, las preferencias del usuario, su historial de búsqueda y de navegación.

Al seleccionar un enlace de Web Física en una parada de autobús podría mostrar los horarios de los autobuses y un mapa con sus rutas. Una máquina expendedora podría ofrecer una página web para seleccionar y comprar un producto, o un parquímetro puede dirigir a su usuario a una página para pagar por tiempo de estacionamiento:

A donde sea que cada dirección web dirija, toda la interacción ocurrirá dentro del navegador web sin necesidad de que el usuario descargue una app especial para cada experiencia.

* * *

Comenzar a experimentar con la Web Física es muy sencillo: toda la información técnica está disponible en GitHub y hay una guía para comenzar desde cero en ese mismo sitio. Muchos beacons comerciales como BKON, Estimote y GemTot ya son compatibles con sus protocolos.

Aunque el planteamiento de la Web Física suena simple, aún se tienen que resolver los problemas que ya existen con la web móvil como privacidad, SPAM, problemas de usabilidad y de conectividad antes de que el concepto despegue del todo.

La idea de la Web Física es crear un estándar abierto que eventualmente pueda integrarse en cada dispositivo y navegador, y así comenzar a conectar la web con el mundo allá afuera.

 

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Aplicaciones web progresivas, el retorno de la web al móvil

Durante años los sitios web ha sido relegados en los dispositivos móviles sobre las apps nativas debido a problemas de rendimiento, compatibilidad y, sobre todo, de conectividad. Las aplicaciones web progresivas (progressive web apps) prometen resolver estos problemas.

Las aplicaciones web progresivas (progressive web apps) son un acercamiento al desarrollo de apps para móviles que combinan lo mejor de la web y lo mejor de las apps nativas. Estas nuevas web apps son útiles para sus usuarios desde la primera visita en un navegador web, sin necesidad de instalar nada más.

A medida que el usuario crea una relación con la app de manera progresiva, ésta se vuelve más poderosa y útil: carga rápidamente, incluso en redes lentas o cuando el dispositivo está desconectado, puede enviar notificaciones, tiene un icono en la pantalla del móvil y funciona a pantalla completa.

Funcionamiento de una app web progresiva

Una aplicación web progresiva es:

  • Estándar – utiliza la misma plataforma y tecnología que se utiliza para crear páginas web: HTML, CSS y Javascript.
  • Progresiva (¡obvio!) – funciona para todos los usuarios, independientemente de cuál navegador web o sistema operativo utilice, porque está construída para mejorar progresivamente desde el principio.
  • Responsiva – se ajusta a cualquier resolución y formato de pantalla: escritorio, móviles, tabletas, televisiones o lo que sea.
  • Independiente de la conexión – está mejorada con service workers para funcionar sin conexión o en redes lentas con conexiones intermitentes.
  • Como una app nativa – el usuario la usará como una app, con soporte para navegación e interacción con gestos.
  • Fresca – siempre estará actualizada gracias al proceso automático de actualización del service worker.
  • Segura – trabaja sobre HTTPS para prevenir que alguien intercepte datos y para asegurarse de que el contenido no ha sido manipulado por otros.
  • Descubrible – es identificable como una “aplicación” gracias al manifiesto de la W3C y al registro de funciones del service worker, permitiendo a los buscadores web encontrarlas.
  • Interactiva – hace fácil interactuar con ella incluso cuando está cerrada con características como notificaciones tipo push.
  • Instalable – le permite a sus usuarios crear accesos directos en la pantalla de su teléfono sin necesidad de una tienda de apps.
  • Enlazable – se pueden compartir fácilmente usando su dirección en la web (URL) y no requiere procesos de instalación complejos.

Ya existen casos de empresas que han comenzado a implementar apps web progresivas, como AirBerlin o Flipkart con resultados bien documentados en mejoras de experiencia de usuario, retención y conversión.

Apps web progresivas

Google creó un taller para aprender a crear aplicaciones web progresivas desde cero, incluyendo consideraciones de diseño y detalles de implementación para asegurar que tus web apps cumplan todos los principios que mencioné arriba.

Las aplicaciones web progresivas son una oportunidad para regresar a la web su importancia dentro de dispositivos móviles -o en cualquier otro dispositivo-, y de romper los problemas y  dependencias de compatibilidad que tienen las apps nativas.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

22 tutoriales en video sobre HTML5

Las habilidades de entender y desarrollar código no son ajenas a los profesionales de experiencia de usuario, aún cuando no tengan roles como programadores o diseñadores de interactivos.

Por eso, les compartimos 22 tutoriales en video sobre desarrollo web utilizando HTML5, CSS3 y Javascript (con algo de JQuery) hechos por Roma Mamukashvili.

  1. Cómo hacer un juego de “serpiente” utilizando HTML5, Canvas y JQuery
  2. Carrusel de imágenes con vista previa de imágenes con CSS3 y Javascript
  3. Barra de avance para formularios con pasos con JQuery y CSS3
  4. Efectos simples con filtros de CSS
  5. Cómo crear partículas en Canvas de HTML5
  6. Menú en Canvas con enlaces animados
  7. Cómo hacer gráficas de datos usando Canvas y Javascript
  8. Menú vertical con jQuery y CSS3
  9. Fuegos artificiales con HTML5, Canvas y Javascript
  10. Efectos interactivos en 3D para imágenes
  11. Efecto de nieve para Navidad usando Canvas y Javascript
  12. Efectos de animación de rejilla con jQuery y CSS3
  13. Cargador de Windows Phone con CSS3
  14. Animación de nubes de fondo con CSS3
  15. Pestañas para navegación con CSS3
  16. Un screensaver con HTML5 y Canvas
  17. Reloj con colores en hexadecimal con solo Javascript
  18. Bloques que rebotan con gravedad hechos con HTML5 y Javascript
  19. Funcionalidades básicas de HTML5
  20. Árbol genealógico con CSS3
  21. Menú sencillo hecho con CSS3
  22. Logo de Android en CSS3

Estos tutoriales también pueden servir como punto de partida si necesitan desarrollar algo rápido para sus proyectos web, y funcionan con todos los navegadores actuales y hasta con Internet Explorer 8.

Somos un grupo de profesionales de UX que trabajamos para fortalecer y profesionalizar a la comunidad de Experiencia de Usuario (User Experience) en español. Hacemos eventos en vivo por la noche para platicar de User Experience.