Construyendo una guía interactiva para aplicaciones

Los equipos de soporte suelen tener dificultades con aplicaciones que nunca han instalado.

Un PDF con capturas de pantalla es la solución estándar. La mayoría de la gente no lee PDFs. Yo quería construir algo mejor. Quería una guía que se sintiera como la aplicación real. Ves la pantalla de inicio, haces clic en un botón y aparece la siguiente pantalla.

Construí una guía interactiva utilizando capturas de pantalla reales y hotspots clicables.

Cómo funciona

Utilicé Firebase Storage para las imágenes y vanilla JavaScript para la lógica. Sin librerías externas.

  • Cada pantalla es una imagen completa.
  • Coloco rectángulos invisibles, llamados hotspots, sobre la imagen.
  • Estos hotspots utilizan porcentajes en lugar de píxeles. Esto permite que se mantengan alineados cuando cambia el tamaño de la ventana.
  • Una máquina de estados simple gestiona la navegación. Cada pantalla tiene un ID, una imagen y una lista de hotspots.

El editor

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

  • Sube una captura de pantalla.
  • Arrastra el ratón para dibujar un hotspot.
  • Vincula el hotspot a una pantalla de destino.
  • Exporta el código directamente.

Decisiones de diseño

No todas las pantallas tienen una navegación completa. Para evitar confusiones, añadí un resplandor azul pulsante en las áreas clicables. Esto muestra a los usuarios exactamente dónde pueden tocar.

Lecciones técnicas clave

  • Firebase Storage: No construyas las URLs manualmente. Utiliza el método getDownloadURL del SDK. Este incluye el token de autenticación necesario para omitir las reglas de seguridad.
  • CSS Flexbox: Si utilizas flex: 1 en un diseño de columna, el elemento padre debe tener una altura explícita. Establece min-height: 0 en el elemento hijo para evitar el desbordamiento (overflow).
  • Rendimiento: Llamar a Firebase en cada clic añade retraso. Implementé una caché en memoria y precargué todas las imágenes cuando se abre el modal. Esto hace que la navegación sea instantánea.
  • Escalado: Utiliza la propiedad CSS transform: scale(). Esto asegura que la imagen y los hotspots se mantengan perfectamente alineados, independientemente del tamaño de la pantalla.

El resultado

  • 20 pantallas navegadas como un teléfono real.
  • 52 hotspots con indicadores visuales.
  • Carga instantánea mediante precarga y caché.
  • Diseño responsivo que se adapta a cualquier tamaño de modal.

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