Cómo documentar un recorrido de producto con capturas automatizadas en Mac

Un recorrido de producto muestra al lector cómo se ve un flujo de principio a fin: el registro, el primer proyecto, una función nueva. Las capturas con temporizador funcionan bien cuando el flujo incluye desplazamientos, animaciones o esperas, casos en los que una captura basada en clics no recogería las pantallas intermedias.

Esta publicación usa Auto Capture de Temposhot en un Mac para tomar una captura a intervalos fijos, y después convierte los fotogramas útiles en una guía editada.

Las secciones siguen un ejemplo práctico. El flujo es "Crear y compartir tu primer tablero" en una app web, y se ejecutó en unos 105 segundos. Una ejecución de 70 fotogramas con un intervalo de 1,5 segundos produjo una guía de 12 páginas.

1. Elige un flujo del producto

Elige un flujo con un inicio y un final claros, como "Crear y compartir tu primer tablero". Un recorrido de todo el producto se convierte en una galería larga que nadie termina.

Escribe el público junto al flujo: una persona interesada que evalúa el producto, una persona nueva o una compañera que aprende una versión. El público decide qué pantallas importan y cuánto hay que explicar.

Calcula el tamaño del flujo antes de capturar

Un flujo que cabe en 8 a 15 páginas se lee cómodamente de una sentada. Cuenta las pantallas que el lector debe ver, no los clics. El flujo del tablero tiene 12: panel vacío, diálogo de nuevo tablero, nombre del tablero, elección de plantilla, tablero vacío, primera tarjeta, detalles de la tarjeta, botón de compartir, diálogo de invitación, menú de roles, invitación enviada y el tablero compartido.

Si el recuento supera unas 20, divide el flujo. "Crear un tablero" y "Compartir un tablero" funcionan como dos recorridos que se enlazan entre sí. Cada parte tiene así su propio inicio y final, y una versión que cambie el uso compartido solo afecta a la segunda parte.

Ajusta la profundidad al público

Una persona interesada necesita el resultado de cada pantalla y pocos detalles. Una persona nueva necesita los nombres de los campos y los valores que escribir. Una compañera que aprende una versión necesita solo las pantallas que cambiaron, con el comportamiento anterior anotado en la descripción.

Los mismos 70 fotogramas pueden servir a los tres públicos. La diferencia está en qué fotogramas se convierten en páginas y en la extensión de las descripciones.

2. Prepara un entorno de prueba limpio

Un recorrido muestra mucha pantalla de una vez, así que los datos que aparecen en ella importan.

• Usa una cuenta de demostración con contenido de muestra realista: nombres de proyectos, algunos elementos y una foto de perfil que no sea de una persona real.
• Define un tamaño de ventana y mantenlo. Un área de captura con una proporción habitual, como 16:9 a 1600×900, encaja en diapositivas y documentos.
• Cierra las demás apps, oculta el Dock si cae dentro del área y activa un modo de concentración de macOS.
• Ensaya el flujo una vez para saber dónde están las pausas.

Fija la ventana y el área

Un recorrido se lee como una sola pieza cuando todas las páginas tienen el mismo tamaño y la misma disposición. Define la ventana del navegador una vez, y dibuja el área de captura sobre ella con el preajuste 16:9 a 1600 × 900. Activa Lock aspect para que un ajuste posterior mantenga la proporción.

Si el preajuste no cabe en la pantalla, Temposhot lo reduce y mantiene su proporción. En una pantalla de portátil más pequeña, comprueba el tamaño que muestra la superposición antes de empezar, porque un área reducida genera fotogramas más pequeños.

Mantén fuera las notificaciones y las ventanas privadas

Auto Capture guarda todo lo que está visible en el origen. Un banner de notificación que entra en el área personalizada durante la ejecución aparece en varios fotogramas. Un modo de concentración de macOS detiene la mayoría de los banners, y cerrar las apps de chat y correo elimina el resto.

Un origen Windows captura una sola ventana de app aunque otras ventanas pasen por delante. Un Custom Area captura la región tal como se ve, incluido lo que la cubra. En un recorrido sobre una ventana del navegador, el área personalizada es mejor opción solo cuando nada más se abrirá sobre la región durante la ejecución.

Ensaya y anota las esperas

El ensayo muestra dónde hace esperar al lector el producto. En el flujo del tablero, la galería de plantillas tarda unos 2 segundos en cargar, y la confirmación de la invitación aparece unos 1 segundo después de Send. Estas esperas determinan el intervalo y el tiempo que hay que quedarse en cada pantalla.

3. Configura la captura con temporizador

1. Abre Auto Capture

   Pulsa Command+1 para abrir Auto Capture.

2. Elige el origen

   Elige Windows para una ventana de app, o Custom Area para dibujar una región fija. El selector de área ofrece preajustes como 16:9 1600×900 y Lock aspect.

3. Define la condición de parada

   Elige Screenshots con un número que cubra el flujo, o Duration para una duración fija. El valor predeterminado es 5 capturas.

4. Define el intervalo

   Un Interval de 1 a 2 segundos sirve para la mayoría de los recorridos. El valor predeterminado es 1 segundo.

5. Deja Key press vacío

   Vas a manejar el producto a mano, así que no hace falta enviar ninguna tecla entre capturas.

6. Conserva la cuenta atrás

   La Countdown predeterminada de 3 segundos te da tiempo para cambiar a la ventana del producto.

El preajuste Quick Demo (5 capturas, 1 segundo, sin tecla, cuenta atrás de 3 segundos) sirve como punto de partida. Más capturas por sesión de las que permite el plan gratuito requiere Pro. La guía de captura automatizada explica cada ajuste.

Ajustes para el recorrido del tablero

El ensayo duró unos 95 segundos. Con un intervalo de 1,5 segundos son unos 63 fotogramas, así que la condición de parada se fijó en 70 capturas para dejar margen. La cuenta atrás se subió a 5 segundos, porque cambiar al navegador y colocar el puntero tarda más de 3.

Introduce el intervalo como 1500 milisegundos o como 1,5 segundos; se aceptan ambas unidades. Guarda la configuración con Save Current Setup bajo un nombre como "Recorrido 70 fotogramas 1,5 s". Un preset guarda la condición de parada, el intervalo, la pulsación de tecla y la cuenta atrás, pero no el origen, así que el área personalizada se elige de nuevo en cada ejecución.

Elige el intervalo según la pantalla más lenta

El intervalo debe ser más corto que la pantalla más breve que debe ver el lector, y lo bastante largo para que los fotogramas no se acumulen. Un intervalo de 1 segundo en un flujo de 105 segundos produce unos 105 fotogramas, la mayoría casi duplicados. Un intervalo de 3 segundos da 35 fotogramas, pero puede perder el menú de roles, que permanece abierto unos 2 segundos.

En el flujo del tablero, 1,5 segundos captaron cada pantalla al menos una vez. Cuenta los fotogramas por pantalla tras la ejecución: si alguna pantalla importante tiene solo un fotograma, acorta el intervalo o permanece más tiempo en esa pantalla la próxima vez.

4. Recorre el flujo a un ritmo constante

Selecciona Start Capture (en el selector de área personalizada, Start Auto Capture), cambia al producto durante la cuenta atrás y recorre el flujo. Quédate en cada pantalla importante al menos dos intervalos para que un fotograma la capte completamente cargada.

Usa Pause capture en la barra flotante mientras corriges un error, y Resume capture para continuar. Finish capture termina la ejecución de inmediato.

Ritmo de la ejecución del ejemplo

Permanecer dos intervalos en una pantalla equivale a unos 3 segundos con un intervalo de 1,5 segundos. Escribir el nombre del tablero tardó más, así que produjo 5 fotogramas, y el último muestra el nombre completo. La línea de tiempo siguiente indica en qué momentos empleó el tiempo la ejecución.

Teclas durante la ejecución

La barra flotante permanece en pantalla mientras el navegador está delante. Los comandos de la barra de menús también funcionan, así que la ejecución se puede iniciar y terminar sin cambiar a la ventana de Temposhot.

Desplázate en pasos cortos y regulares

Las pantallas con desplazamiento son donde más ayuda la captura con temporizador, y donde más a menudo produce fotogramas borrosos o a medio mover. Desplázate unas media pantalla cada vez, y detente entre desplazamientos durante al menos un intervalo. Cada parada da un fotograma limpio, y los fotogramas consecutivos se solapan para que no se omita nada.

Si una página larga necesita una imagen alta en lugar de varios fotogramas, exporta los fotogramas en PNG y únelos con Stitch Screenshots. Une las imágenes de arriba abajo y detecta el solapamiento entre ellas.

Gestiona un error a mitad de la ejecución

Si un clic equivocado abre un diálogo incorrecto, selecciona Pause capture, cierra el diálogo, vuelve a la última pantalla correcta y selecciona Resume capture. Los fotogramas del error permanecen en la sesión y se omiten al construir el Document. Con una condición de parada de Screenshots, el recuento continúa donde se detuvo, así que la pausa no consume el presupuesto de 70 fotogramas.

Si el error cambió los datos de demostración, como un tablero creado con un nombre equivocado, detén la ejecución, corrige los datos y empieza de nuevo. Una segunda ejecución limpia se edita más rápido que una ejecución con una reparación en medio.

5. Convierte los fotogramas útiles en un Document

Cuando termina la ejecución, el panel de resultados muestra Capture complete y los fotogramas. La captura con temporizador produce más fotogramas que pasos, así que elige los que cuentan la historia.

Hay dos formas de construir el Document:

• Create Document en el panel de resultados usa la sesión completa. Elimina después las páginas sobrantes en el panel Pages.
• En Documents (Command+4), abre el menú New Document y elige Capture History…. Despliega la sesión, incluye solo los fotogramas que quieras y selecciona Add selected Frames.

La segunda forma es más rápida cuando conservas menos de la mitad de los fotogramas. La guía de páginas e importación cubre ambas.

Qué ruta conviene con 70 fotogramas

La ejecución del tablero conservó 14 de 70 fotogramas en la primera pasada, es decir, el 20 por ciento. Eliminar 56 páginas una a una es más lento que marcar 14 fotogramas, así que el selector de Capture History fue la mejor ruta.

Create Document siempre usa todos los fotogramas de la sesión, incluidos los no seleccionados. La selección con casillas del panel de resultados se aplica a las exportaciones ZIP, Images, PDF y MP4, no al Document.

Elige el fotograma para cada pantalla

Cuando una pantalla aparece en 3 o 4 fotogramas consecutivos, elige el último. Muestra la pantalla después de terminar de cargar y de que el puntero se estabilice. En un diálogo, elige el fotograma en el que el diálogo está completamente abierto, no a mitad de la animación.

Tras la primera pasada, 2 de las 14 páginas eran casi duplicados de la pantalla de detalles de la tarjeta. Al eliminarlas quedaron 12 páginas, una por pantalla de la lista de flujo de la sección 1.

6. Escribe las instrucciones de cada página

Cada página necesita un Page title que indique lo que ve o hace el lector, y una descripción breve del motivo por el que importa en el flujo.

• "Nombra el tablero": qué escribir y dónde.
• "Invita a compañeros por correo": qué campo y qué rol elegir.
• "Revisa el tablero compartido": qué debe notar el lector.

Usa Framing (F) con Custom para recortar cada página a la parte de la pantalla que describe el título. Añade una Arrow (A) o un Rectangle (R) donde debe ir la mirada. Los fotogramas con temporizador no tienen una posición de clic, así que Focus on action solo se aplica a las páginas de Action Capture.

Patrones de título y descripción

Un título nombra una pantalla o una acción. La descripción añade el valor que escribir, la elección que hacer o el resultado que esperar. Limita las descripciones a dos frases para que la captura quede cerca de la parte superior de la página del PDF.

Recorta y marca cada página

Un fotograma de 1600 × 900 muestra toda la app, pero la mayoría de las páginas tratan de un solo diálogo o de un solo campo. El encuadre Custom del editor de encuadre define la región visible, y Frame size muestra su ancho y su alto. El fotograma original no cambia, y Show full image lo restaura.

Normalmente basta una marca por página. Una Arrow señala un control que el lector debe encontrar, y un Rectangle delinea un campo que rellenar. En el Object Inspector, define Width para que el contorno se vea al tamaño de exportación, y usa el mismo color en todas las páginas.

7. Exporta y revisa el recorrido

Selecciona Export PDF para obtener un documento que enviar o adjuntar. Con Pro, el cuadro de diálogo del PDF añade portada, números de paso y números de página. Abre More export formats para páginas PNG, JPG o WebP que insertar en diapositivas o en una wiki, o para un paquete ZIP con document.json.

Lee la exportación a su tamaño final. Comprueba que cada título coincide con su captura y que ningún dato real de cliente se haya colado en un fotograma. La guía de exportación de Documents enumera todos los formatos.

Revisa el PDF a tamaño final

La vista previa del PDF en el cuadro de exportación muestra cada página tal como se guardará. Recorre las 12 páginas y comprueba tres cosas: el título coincide con la captura, el recorte deja el control a la vista y ningún dato de demostración parece un dato real. Con el valor predeterminado Fit without enlarging, una página recortada de forma ajustada mantiene su tamaño en lugar de ampliarse y perder nitidez.

El pie resume el resultado, por ejemplo "12 pasos · A4 · Horizontal". Si el recuento no coincide con la lista del flujo, falta o se duplicó una página.

Archivos del recorrido del tablero

La guía del tablero se exportó dos veces: una como PDF para el correo, y otra como páginas PNG para una presentación de diapositivas. Los archivos de imagen toman el nombre de los títulos de página, así que las diapositivas se pueden ordenar por nombre.

Las páginas PNG no tienen pérdida y mantienen nítido el texto de la interfaz en las diapositivas. Las páginas JPG pesan menos y encajan en una wiki con límites de subida. Para un solo PDF que combine esta guía con otras, la herramienta del navegador Merge PDF une los archivos exportados.

Convierte los mismos fotogramas en un vídeo corto

El panel de resultados exporta MP4 a partir de los fotogramas seleccionados en orden. La velocidad de fotogramas determina la duración del vídeo. Para los 70 fotogramas del tablero, la duración con cada velocidad es el número de fotogramas dividido por la velocidad.

A 5 fps, el valor más bajo, cada fotograma se muestra 0,2 segundos, así que una pantalla permanece visible solo mientras ocupa varios fotogramas de la ejecución. Una ejecución con temporizador en la que el presentador permanece 3 segundos en cada pantalla da 2 fotogramas por pantalla, es decir, 0,4 segundos de vídeo.

Para una secuencia más lenta con los 14 fotogramas elegidos, selecciónalos y exporta un GIF desde Export settings…. GIF frame delay llega hasta 1 segundo por fotograma, así que 14 fotogramas duran 14 segundos. La herramienta del navegador Images to Video es otra opción para una presentación de diapositivas a partir de páginas PNG exportadas.

Mantén actualizado el recorrido

Los recorridos muestran muchas pantallas, así que envejecen con cada versión. Conserva la sesión y el Document en el Mac que los creó, indica la versión del producto en la portada y vuelve a capturar solo las pantallas que cambiaron. La publicación sobre cómo mantener actualizada la documentación con capturas describe una rutina de revisión.

Si un recorrido se basa en clics y no tiene esperas ni desplazamientos, Action Capture genera una página por clic en lugar de fotogramas con temporizador.

Actualiza solo las páginas cambiadas

Cuando una versión cambia el diálogo de invitación, solo 3 de las 12 páginas necesitan capturas nuevas. Repetir todo el flujo y reconstruir la guía repite el trabajo de 9 páginas que no cambiaron.

Las páginas nuevas de una captura se pueden insertar después de la página seleccionada, así que selecciona primero la página anterior a la sección cambiada. Los archivos exportados no se actualizan solos; exporta de nuevo después de cada cambio.

Ten en cuenta el límite de retención de sesiones

Capture History conserva 30 sesiones por defecto, y el límite se puede definir entre 1 y 500 en Ajustes > History. El Document conserva sus propias copias de cada imagen que usa, así que la guía sobrevive cuando se elimina su sesión de origen. Los 70 fotogramas sin procesar no sobreviven, así que expórtalos como ZIP si una edición posterior puede necesitar un fotograma que no se eligió.

Preguntas frecuentes

¿Para un recorrido es mejor la captura con temporizador o la captura por clics?

La captura con temporizador sirve para flujos con desplazamiento, carga y animaciones. La captura por clics sirve para tareas con formularios donde cada clic es un paso. Consulta capturas manuales frente a captura por clics.

¿Puedo hacer un vídeo a partir de los fotogramas?

Sí. El panel de resultados exporta MP4 de 5 a 60 fps. Un MP4 corto sirve para una demostración, y un Document sirve para una guía que el lector sigue a su ritmo.

¿Qué intervalo debo usar?

De uno a dos segundos para la mayoría de los recorridos de interfaz. Los intervalos más cortos captan las transiciones, pero crean más fotogramas que ordenar.

¿Cuántas capturas debe permitir la condición de parada?

Divide el tiempo del ensayo entre el intervalo y añade cerca de un 10 por ciento. Un ensayo de 95 segundos con un intervalo de 1,5 segundos da unos 63 fotogramas, así que 70 deja margen.

¿El recorrido puede capturar una página que está detrás de un inicio de sesión?

Sí, en Auto Capture. Captura la pantalla tal como se muestra, así que inicia sesión en la cuenta de demostración en el navegador antes de la ejecución. Website Capture es diferente: carga las páginas en una sesión privada sin el inicio de sesión de tu navegador.

Convierte las capturas repetibles en trabajo terminado

Captura automatizada en Mac captura el recorrido a un intervalo fijo y entrega los fotogramas a un Document editable. Descarga Temposhot y graba tu primer flujo.