Porque una demo grabada como imagen envejece con cada cambio de interfaz. Cada una de las nuestras se multiplica por dieciséis: dos temas por ocho idiomas. Empezamos con una herramienta del mercado y las grabaciones quedaban obsoletas cada semana. Construimos una herramienta que guarda las acciones y las reproduce sobre el producto real.
Lo que guarda una herramienta de captura
Las herramientas de demos interactivas parten de una idea razonable. Se recorre el producto una vez y la herramienta convierte la pantalla en una visita guiada o un vídeo. El equipo comercial lo anota y lo comparte. Para un producto que cambia poco y se vende en un idioma, es difícil hacerlo mejor.
Lo que ofrece cada herramienta lo documenta su fabricante. El punto de partida común es guardar el aspecto de la pantalla en un momento dado, con su tema y su idioma. Cuando el producto cambia, la captura sigue enseñando una pantalla que el cliente ya no encontrará.
Por qué dieciséis
promptShield se entrega en ocho idiomas (inglés, francés, alemán, español, italiano, neerlandés, portugués y polaco) y en dos temas. Un lector que llega a la versión alemana con el sistema en modo oscuro debería ver la demo en alemán y en oscuro. Mostrarle la inglesa en claro le da a entender que el producto no se pensó para él. Son dieciséis combinaciones por demo.
Además, la interfaz cambia casi cada semana: se mueve un botón, se renombra una pestaña. Con capturas, cada cambio deja obsoletas dieciséis grabaciones por demo afectada; con cinco demos, ochenta. En la primera semana con una herramienta del mercado ya había grabaciones de pantallas que la aplicación ya no tenía.
El error fue nuestro. Elegimos por el coste del primer mes y no calculamos cuánto crecería. Ese coste lo pagaba la misma persona que escribía el código del producto.
Guardar las acciones en lugar de la pantalla
La solución fue cambiar lo que se graba. Demo Studio registra lo que hizo quien manejaba la aplicación: abrir este documento, pulsar Detectar, esperar a que termine, entrar en Revisar, pasar esta región a Codificar. Después reproduce esas acciones sobre el producto.
El tema y el idioma pasan a ser parámetros del renderizado. La misma secuencia se reproduce dieciséis veces sin que nadie toque el ratón. Un cambio de interfaz ya no obliga a volver a grabar, solo a volver a renderizar. Mover un botón cuesta minutos de cálculo en lugar de horas de trabajo de una persona.
La demo tampoco puede apartarse del producto, porque se reproduce sobre él. Es la consecuencia más útil del cambio.
Sobre qué se reproduce
El sitio web de promptShield está hecho con Next.js. Su ruta /demo monta en el navegador el frontend real de la aplicación de escritorio: los mismos componentes React, estilos y traducciones. Un alias de webpack, @desktop/*, apunta directamente a las fuentes de la aplicación, así que no hay una copia aparte.
La aplicación instalada se comunica con un servidor local que procesa los documentos y con la capa nativa de Tauri. En /demo, el complemento NormalModuleReplacementPlugin de webpack sustituye al compilar esos módulos por otros con respuestas preparadas. Si a una función le falta sustituto, deja un aviso en la consola en vez de romper la página. Los PDF se dibujan en el navegador con pdf.js.
Así, un cambio en la interfaz del escritorio llega a /demo en la siguiente compilación, sin copiarlo a mano. En el siguiente renderizado llega a las dieciséis versiones. /demo es el escenario donde Demo Studio renderiza, y alguna vez lo hemos descrito mal. Quien quiera evaluar el producto tiene la aplicación web gratuita, donde el documento se procesa en su equipo y no llega a nuestros servidores.
Datos inventados
Para enseñar lo que hace, la demo de un anonimizador tiene que enseñar datos personales: un DNI, un número de la Seguridad Social, un IBAN. Las nuestras usan documentos redactados para la ocasión en cada idioma, con identificadores que no corresponden a nadie.
Hay quien graba su producto con datos reales de clientes y aloja el vídeo en un servicio de terceros. Ese servicio pasa a ser encargado del tratamiento. El artículo 28 del RGPD exige entonces un contrato, que es lo que pediría la AEPD, y la LOPDGDD completa ese régimen. En un despacho se suma el deber de secreto profesional.
Si su caso encaja en esos supuestos, consúltelo con su asesor. En el nuestro no se plantea, porque no existe ninguna grabación de una sesión real que alojar.
Lo que cuesta y cuándo no compensa
Una sola persona lo construyó en días porque la pieza más cara ya existía. El frontend que se reproduce es el que reciben los clientes. Lo nuevo eran el grabador de acciones, los sustitutos de la API y el renderizador.
El coste no acaba ahí. Cada función nueva que habla con el servidor necesita su sustituto. Un sustituto que devuelve algo que el producto real nunca devolvería es otra forma de apartarse de él, así que hay que vigilarlo.
Crear su propia herramienta de demostraciones no siempre compensa. Suponga que su producto cambia una vez al trimestre, se vende en un idioma y las demos las edita un comercial sin tocar código. Entonces una herramienta de captura será más barata. La cuenta cambia cuando se multiplican los idiomas, los temas y los cambios.
Por la misma razón construimos el motor de detección. Lo explicamos en por qué construimos nuestro propio motor de detección.
Preguntas frecuentes
¿Por qué no usar una herramienta de grabación de pantalla?
En nuestro caso, cada demo son dieciséis grabaciones y la interfaz cambia casi cada semana. Mantenerlas costaba más que construir el renderizador. Para un producto estable y en un idioma, una herramienta de captura suele ser la opción sensata.
¿Qué pasa cuando cambia la interfaz?
El cambio llega a /demo en la siguiente compilación y basta con volver a renderizar. Si un paso apuntaba a un control que ya no existe, se corrige una vez y vale para las dieciséis versiones.
¿Cómo se mantienen sincronizados los ocho idiomas?
Hay una sola secuencia de acciones y se usan las traducciones de la propia aplicación. El idioma se elige al renderizar, y una traducción corregida cambia en todas las demos a la vez.