Creación de una guía interactiva de aplicaciones

Los equipos de soporte suelen tener dificultades cuando utilizan aplicaciones que nunca han instalado. Un manual en PDF es una mala solución porque nadie los lee.

He creado una herramienta que permite a los usuarios interactuar con capturas de pantalla reales de la aplicación dentro de un navegador. Se siente como si estuvieras usando el teléfono real. Haces clic en un botón de una captura de pantalla y aparece la siguiente pantalla.

Cómo funciona

Utilicé Firebase Storage para las imágenes y JavaScript puro para la lógica. Evité el uso de librerías externas para mantenerlo ligero.

El secreto es utilizar hotspots basados en porcentajes. En lugar de píxeles fijos, defino áreas clicables utilizando coordenadas de 0 a 100. Esto mantiene los botones alineados incluso cuando cambia el tamaño de la ventana.

El sistema utiliza una máquina de estados sencilla. Cada pantalla tiene:

  • Un ID de imagen
  • Una lista de hotspots
  • Un destino objetivo

Las herramientas que construí

Medir las coordenadas a ojo es lento. Construí un editor HTML independiente para acelerar el proceso.

  • Sube una captura de pantalla a un canvas.
  • Arrastra el ratón para dibujar un rectángulo.
  • El editor calcula automáticamente las coordenadas de porcentaje.
  • Vincula el área a otra pantalla mediante un menú desplegable.
  • Exporta el objeto final directamente a tu código.

Para ayudar a los usuarios, añadí un resplandor azul pulsante en las áreas clicables. Esto muestra exactamente dónde pueden pulsar.

Lecciones técnicas clave

  1. Seguridad de Firebase: No construyas las URLs de almacenamiento manualmente. Utiliza el método getDownloadURL del SDK. Esto incluye el token de autenticación necesario. Sin él, las imágenes no se cargarán y no mostrarán ningún error.

  2. Correcciones de diseño: En un diseño de columna flex, establece una altura explícita en el elemento padre. Establece min-height: 0 en los elementos hijos. Esto evita el colapso del diseño y los problemas de desbordamiento (overflow).

  3. Escalado: Utiliza la propiedad transform: scale de CSS. Esto permite que la imagen y los hotspots se redimensionen juntos. Mantiene todo en proporción, independientemente del tamaño de la pantalla.

  4. Velocidad: Obtener las URLs una por una crea retrasos (lag). Implementé una caché en memoria y una función de precarga en segundo plano. Todas las imágenes se cargan en paralelo cuando se abre el modal. Esto hace que la navegación se sienta instantánea.

El resultado

  • 20 pantallas con navegación completa.
  • 52 hotspots interactivos.
  • Cero barras de desplazamiento gracias al autoescalado.
  • Transiciones instantáneas mediante la precarga.

Fuente: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e