Así funciona una web app de Google con Material Design

Las web apps no son algo nuevo. Para quiénes no sepan de qué estamos hablando lo resumiremos fácilmente: son un programa informático (una aplicación) que se ejecuta dentro de una web.

Un ejemplo de aplicación web es WhatsApp web o la nueva web de Facebook Messenger. Sin embargo utilizaremos un ejemplo reciente que ejemplifica mejor lo que Google desea que parezcan las web apps con Material Design. Hablamos de la web del Google I/O 2015, un ejemplo muy ilustrativo de cómo imagina el buscador que deben ser las web apps.

Creemos que las web apps van a ser uno de los temas clave del Google I/O. Algunos sistemas como Firefox OS o Ubuntu OS han coqueteado de cerca con las web apps, sin embargo hace falta un paso más para que estas se popularicen y se conviertan en un rival a tener en cuenta de las aplicaciones nativas.

En un intento de acercar Android a las leyes de la web e intentar fusionar esos dos mundos, las web apps son el mejor punto de partida. Mitad aplicación y mitad web, dos tipos distintos pero difíciles de diferenciar en muchos casos. Vamos a ver cómo se comporta la app de la web del Google I/O 2015 y qué diferencia hay con su app Android equivalente.

Web app del Google I/O 2015: Cómo crearla

Para crear una web app únicamente tenemos que crear un acceso directo. Nos vamos a ajustes y a «Añadir a pantalla de inicio». Una vez hecho esto nos aparecerá un icono en la pantalla principal como si fuera cualquier otra aplicación.

Las webs normales tienen un icono bastante feo pero si la web está pensada para ello el icono se hará pasar por una cualquiera. En la imagen inferior podéis ver el resultado. ¿Adivináis cuál es la web app y cuál la nativa?

Una vez creado el icono ya podemos acceder directamente a la web desde el escritorio. La diferencia respecto a la web normal es que la barra de navegación desaparece.

Dentro de la web app su funcionamiento es idéntico a la web. Pero gracias a Material Design tenemos una web con menú lateral, menú de ajustes, página para registrarse, filtros, añadir a la agenda conferencias…

Si vamos a Chrome podremos acceder a los ajustes de la web. Allí no nos aparecen muchas opciones, pero sí el permiso de recibir notificaciones. Una opción que pocas páginas web tienen habilitado pero que supondría un salto muy grande a nivel de comunicación.

Comparativa Google I/O: web app vs app nativa

Para hacernos una mejor idea de las diferencias entre una web app y la aplicación nativa de Google Play, nada mejor que compararlas. Tenemos la suerte que del mismo evento están las dos versiones. Una comparativa similar se podría hacer entre la versión de WhatsApp web y la propia aplicación.

Empezamos por el menú lateral. La web app (izquierda) y la app nativa (derecha) tienen dos menús muy distintos. En la versión web la barra es más pequeña, con tonos más azulados y las opciones no están separadas. En la versión nativa aparecerá nuestro nombre, un acceso a Ajustes y a un apartado de vídeo.

En la página principal de la aplicación también vemos diferencias. La agenda de la web app es totalmente material Design pero desaprovecha mucho espacio. Mientras la aplicación nativa es muy típica.

Algo parecido pasa entre la página de una conferencia. En la web app se nota claramente que es un pop-pup, mientras en la app nativa están los botones de compartir y demás. Si nos tenemos que quedar con una, preferimos los colores menos llamativos de la aplicación web.

Finalmente está la página de filtros. Mientras en la app nativa es un menú lateral en la web app es simplemente un desplegable, eso sí, los filtros son los mismos.

Como hemos visto hay una gran diferencia visual entre la web app y la aplicación nativa. Sin embargo sus funciones son bastante similares. Es cierto que el ejemplo es bastante básico y todo consiste en mostrar una serie de información.

En el futuro veremos web apps mucho más complejas. Webs con un diseño que no solo se adapta al tamaño de las pantallas móviles, también actúa como una aplicación estándar.

En el Google I/O 2015 veremos más detalles de cómo crear nuevas web apps y quizás algún anticipo de lo que Google tiene reservado para la web, un campo de batalla clave en el sector móvil.

Google I/O 2015 web

Google I/O 2015 APK