TV Box Installer: Guía Interactiva Inmersiva
Frontend Development

TV Box Installer: Guía Interactiva Inmersiva

Guía de instalación de una sola página que convierte un proceso técnico (ADB, sideloading y firewall) en un flujo guiado paso a paso. Experiencia visual premium con fondo de video cinematográfico, glassmorphism y progreso reactivo.

  • Date: 23 Jun, 2026
  • Client: Proyecto Interno
  • Role: Frontend Developer & UI Designer

🪼 VER GUÍA EN VIVO

🎯 El Reto: Guiar a Cualquiera por un Proceso Técnico

Instalar y configurar aplicaciones en una TV Box Android implica pasos delicados: validar el entorno, instalar ADB, conectar el dispositivo por USB o WiFi, hacer sideloading de APKs y dejar NetGuard (firewall) bien configurado. Un instructivo en texto plano genera dudas, errores y soporte constante.

El objetivo: que cualquier persona del equipo, sin perfil técnico, pueda completar la instalación sola, sin equivocarse y sintiendo que avanza.

💡 La Solución: Una Guía Web Inmersiva de Una Sola Página

Desarrollé una landing-guía autónoma (un único index.html) que transforma el manual en una experiencia interactiva, visual y a prueba de errores.

Experiencia visual: fondo de video y glassmorphism Estética brasa sobre negro puro con medusas bioluminiscentes de fondo.

✨ Funcionalidades Clave

  1. Progreso reactivo: una barra sticky calcula el porcentaje completado según las casillas que el usuario marca, con persistencia entre recargas.
  2. Selector inteligente de versión: el usuario elige su modelo de caja y la guía le recomienda automáticamente la versión correcta a instalar.
  3. Comandos copiables: cada bloque de terminal se copia al portapapeles con un clic y confirma visualmente la acción.
  4. Pasos con estado y celebración final: cada tarjeta cambia a estado completado (verde) y un banner corona el final del flujo.
  5. FAQ y recuperación de errores integradas en acordeones para resolver fallos sin salir de la página.

🛠️ Ingeniería del Frontend

  • Fondo de video cinematográfico: un video a pantalla completa (object-fit: cover) fijo detrás de todo el contenido.
  • Loop perfecto sin cortes: técnica de crossfade con doble capa de video desfasada medio ciclo — cuando una copia llega a su corte, la otra está a la mitad y visible, eliminando el salto del bucle.
  • Glassmorphism: tarjetas de vidrio esmerilado (backdrop-filter: blur) que difuminan el fondo donde hay contenido y lo dejan nítido en los márgenes, garantizando legibilidad.
  • Degradado de protección: capas de oscurecimiento y glow rojo sobre el video para asegurar contraste del texto en cualquier sección.
  • Fallback elegante: si el video no carga, queda un poster fijo de respaldo sin romper la composición.

💻 Stack Tecnológico

  • Core: HTML5, CSS3 y JavaScript vanilla (sin frameworks, cero dependencias).
  • Tipografías: Space Grotesk, Inter y JetBrains Mono.
  • Diseño: Glassmorphism + estética neón/brasa sobre fondo negro puro (#070707), totalmente responsivo (desktop y móvil).
  • Estado: persistencia local del progreso y dos variantes de tema (neón y vidrio).

Resultado: un manual técnico convertido en una experiencia premium, autoguiada y memorable, que reduce errores de instalación y la carga de soporte.

LinkedIn Banner Generator
Web Tools

LinkedIn Banner Generator

Herramienta web para profesionales que permite crear banners de LinkedIn personalizados y optimizados en segundos.

Agente 24: IA para Comercio Exterior
Artificial Intelligence

Agente 24: IA para Comercio Exterior

Plataforma inteligente impulsada por Google Gemini para automatizar la glosa aduanera. Extrae, lee y cruza información de PDFs contra data oficial en segundos.