BBVA API Market
La gran batalla, no sólo de los medios de comunicación sino de otros sectores como el retail, la banca o las tecnológicas, está en los dispositivos móviles. En ser capaces de entender cómo adaptar la experiencia de consumo de los productos a las necesidades de los usuarios en el teléfono inteligente, por ahora el dispositivo que mayor grado de intimidad tiene con los clientes finales. Una de las últimas novedades del mercado es Progressive Web Apps o Aplicaciones Web Progresivas, una alternativa auspiciada por Google que es una mezcla entre la web móvil consumida por el navegador y las aplicaciones nativas instaladas en el teléfono.
En una única frase, el objetivo final de las PWA es conseguir una experiencia de usuario de aplicación nativa en la web, que hoy en día se consume fundamentalmente a través del dispositivo móvil. Para los equipos de producto, la idea final es desarrollar una vez y desplegar en todos los dispositivos posibles, desde un punto de vista tanto de hardware como de software. Al final lo que se busca es que disponga de una serie de elementos comunes que se parezcan mucho a las grandes funcionalidades de las que dispone habitualmente una aplicación nativa y mantenga algunas grandes ventajas de la web tradicional:
● Las apps progresivas están pensadas para tener acceso a todos los usuarios: la mayoría de navegadores soporta este tipo de web apps.
● Tiempos de carga e interacción muy rápidos.
● Adaptación perfecta a todas la pantallas: las PWA de Google tienen capacidad para adaptarse a escritorio, móvil, tableta, Smart TV… cualquier dispositivo. El principio es desarrollado una vez, accede a cualquier dispositivo.
● Consumo sin necesidad de conexión WiFi o datos 3G/4G: no es necesario tener conexión de gran calidad para navegar por ellas. Ni siquiera conexión.
● Navegación e interacciones propias de una aplicación nativa: la aplicación progresiva debe estar diseñada para el tacto del usuario.
● Acceso rápido en el móvil o tableta desde la vista principal. Icono de acceso rápido en el teléfono sin necesidad de descarga en una app store. Esto es posible gracias a la incorporación de metadatos que, no sólo descargan este acceso rápido, sino que lanza pantallas de bienvenida.
● Visible para los buscadores.
● Capacidad para enviar notificaciones push como cualquier app nativa.
● Aplicaciones en protocolo seguro HTTPS: se habla mucho del futuro del HTTPS; así evitan que el contenido pueda ser manipulado por terceros.
● Recirculación asegurada a través del hipervínculo típico en la web.
Diseño y Experiencia de Usuario en las Progressive Web Apps
El tratamiento que los equipos de producto deben dar a las Progressive Web Apps es muy distinto al desarrollo de aplicaciones nativas. Aunque existen elementos comunes, algunos factores como el diseño y la experiencia de usuario incorporan elementos distintos en aplicaciones y las PWA.
● Animaciones: son un elemento interesante para aumentar el compromiso de los usuarios con una aplicación web, pero también implican un riesgo si se utilizan mal. No tienen que provocar efectos negativos sobre el rendimiento de la aplicación y deben ser escogidas con cuidado para sorprender o generar acciones concretas y de gran valor para los usuarios. Lo más habitual es utilizar las animaciones para apoyar las interacciones. Las animaciones en las Progressive Web Apps se crean con CSS o JavaScript, dos de los lenguajes utilizados en la web tradicional junto al conocido HTML. Se pueden utilizar animaciones para el movimiento entre distintas pantallas.
Layouts responsive: al final la gran diversidad de dispositivos (con pantallas en distintos tamaños: escritorio, móvil, tableta, phablets, smart TV…) han provocado la necesidad de implementar diseños que sean capaces de adaptarse a las distintas pantallas. Eso es lo que se conoce como diseño responsive y es la apuesta de las Progressive Web Apps. Al final todo se basa en los tradicionales patrones de este tipo de diseño adaptativo: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks y Off Canvas. En cada uno, las distintas columnas caen hacia abajo y se posicionan en vertical u horizontal a medida que la pantalla se hace más pequeña, salvo en el patrón Off Canvas, que aprovecha la parte no visible para esconder y sacar columnas.
● Imagen, vídeo y audio son tres de los elementos informativos que suelen sufrir bastante en los diseños responsive si no se tiene cuidado con las imágenes y los vídeos. En el caso de las imágenes, el uso del elemento img es la mejor solución posible, sobre todo si se utilizan tamaños relativos, incluso marcar los tamaños y densidades específicos para cada tipo de pantalla, y además señalar el tamaño de esas imágenes en función de los cortes que se llevarán a cabo en el diseño a medida que la pantalla se hace más pequeña.
Tamaños relativos:
<img src = “faro”-200.jpg tamaños = “50vw”
srcset = “faro-100.jpg 100w, 200w faro-200.jpg,
faro-400.jpg 400w, 800w faro-800.jpg,
faro-1000 .jpg 1000w, 1400w faro-1400.jpg,
faro-1800.jpg 1800w ” >
Tamaños relativos de imágenes en función de los cortes de diseño:
<img src = “” 400.png
tamaños = “(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw”
srcset = “100.png 100w, 200w 200.png, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000w 2000.png ” >
SEO, social media y monetización en las Progressive Web Apps
Los condicionantes del posicionamiento varían mucho entre una aplicación nativa y una Progressive Web App. Las primeras compiten por un posicionamiento en las tiendas de aplicaciones. La optimización de todos los factores que permiten un mejor posicionamiento en esas tiendas de aplicaciones se conoce con el nombre de ASO (App Store Optimization). Las Progressive Web Apps juegan en otra liga: al final compiten en el mismo escenario que el resto de webs tradicionales, con los elementos que condicionan actualmente la optimización SEO o búsquedas.
Igual que en la web tradicional, añadir unas pequeñas líneas de código HTML al desarrollo de una PWA permitirá controlar los mensajes y fotos que se difunden junto a nuestro contenido cuando los usuarios lo comparten en las redes sociales. Google, además, añade la recomendación de usar el protocolo schema y los microdatos para enriquecer el contenido que se comparte en su red social Google +. Este sería un ejemplo práctico de código a insertar en cada página de contenido:
<div itemscope itemtype = “http://schema.org/Article” >
<h1 itemprop = “nombre” > Disfrute de fuegos artificiales </ h1>
<p itemprop = “description” > fuegos artificiales son hermosos.
En este artículo se explica qué bellos son los fuegos artificiales. </ P>
<img itemprop = “imagen” src = “//developers.google.com/web/imgs/fireworks.jpg” />
</ div>
El leasing puede ser el impulso que necesitan las empresas para arrancar, abonando cuotas predecibles para usar bienes que, además, podrán adquirir luego descontando esos pagos. Las empresas, desde los autónomos hasta las grandes empresas pasando por las pymes, necesitan soluciones de financiación que se adapten a sus necesidades. El leasing es una fórmula que […]
Una API es el mecanismo más útil para conectar dos softwares entre sí para el intercambio de mensajes o datos en formato estándar como XML o JSON. Así es como se convierte en un instrumento para buscar ingresos, abrirse al talento, innovar y automatizar procesos.
El ecosistema de Embedded Finance (EF) y Bank-as-a-Service (BaaS) está en plena expansión y definición de los roles de nuevos actores que entran al ecosistema, y que persiguen cubrir nichos o crear nuevos servicios. ¿Cómo evolucionará el sector de Embedded Finance y Bank-as-a-Service? José Luis Navarro Llorens es el responsable de Estrategia Open Banking en […]
