Las mejores formas de grabar una web para mostrarla

Seis formas de capturar una web para un portfolio, un lanzamiento o un cliente, de los grabadores de pantalla a los renderizadores de URL y las demos interactivas, y cuándo usar cada una.

Aviral LakhanpaulActualizado el 30 de octubre de 20264 min de lectura

La respuesta corta

Para una página pública que solo necesitas recorrer con scroll, un renderizador de URL a vídeo da el resultado más fluido con el menor esfuerzo. Para una demo con clics, texto escrito y narración, usa un grabador de pantalla, a ser posible uno que suavice el cursor y haga los zooms por ti. Para una página detrás de un inicio de sesión, grábala tú o usa una extensión. Las herramientas de mockups y las demos interactivas resuelven problemas distintos y complementan a estas en lugar de sustituirlas.

Empieza por lo que tiene que mostrar el vídeo

«Grabar una web» abarca tres trabajos bastante distintos, y la herramienta adecuada depende de cuál tengas entre manos.

La página en sí. La maquetación, la tipografía, las imágenes, de arriba abajo. Portfolios, publicaciones de lanzamiento, fichas de plantillas, la aprobación de un cliente.
Algo que ocurre en ella. Un flujo de registro, un filtro en uso, un menú que se abre. Demos de producto y tutoriales.
La página como objeto. La web en un portátil o un móvil, girando en el espacio. Imágenes de cabecera y promos al estilo de las tiendas de apps.

Seis métodos, comparados

Formas de grabar una web, comparadas
Método	Ideal para	Scroll uniforme	Detrás de un inicio de sesión	Esfuerzo
Renderizador de URL a vídeo	Mostrar la página en sí	Sí, calculado	No	Pegar un enlace
Grabador de pantalla avanzado	Demos con clics y narración	Solo si haces scroll de forma uniforme	Sí	Grabar y luego editar
Grabador de pantalla básico	Cualquier cosa, gratis	Solo si haces scroll de forma uniforme	Sí	Grabar, recortar, editar
Extensión de navegador	Páginas en las que has iniciado sesión	Depende de la extensión	Sí	Instalar y luego grabar
App de mockups	La web en un dispositivo, en 3D	No es su objetivo	Sí, a partir de una captura de pantalla	Trabajo de diseño
Herramienta de demos interactivas	Recorridos de producto clicables	No está pensada para vídeo	Sí	Capturar un flujo, editar los pasos

1. Un renderizador de URL a vídeo

Pegas una dirección y la herramienta abre la página en su propio navegador, la desplaza siguiendo una curva y codifica el resultado. Nada depende de tu pantalla, tu ratón ni tu ordenador, así que el movimiento es uniforme y el vídeo puede tener cualquier tamaño. Website Scroll Video es uno: primero quita los avisos de cookies y los widgets de chat, lee la página con ancho de escritorio, tableta o móvil, y exporta MP4, WebM o GIF hasta 4K a 60 fps, y permite añadir pausas, hovers y fondos.

El límite es el alcance. El renderizador solo puede abrir lo que abriría un visitante anónimo, así que los paneles de control, los sitios de staging con contraseña y localhost quedan fuera. La página de alternativas compara los renderizadores que existen.

2. Un grabador de pantalla avanzado

Herramientas como Screen Studio graban tu pantalla y luego hacen la edición que haría una persona: suavizan la trayectoria del cursor, hacen zoom en los clics, añaden un fondo. Son la mejor opción para mostrar un producto en uso. Pero el scroll sigue siendo tuyo, así que una página larga desplazada a mano conserva el ritmo de la rueda.

3. Un grabador de pantalla básico

OBS Studio, QuickTime, la barra de capturas de macOS y la Herramienta Recortes de Windows son gratuitos y graban cualquier cosa que puedas abrir. No hacen nada por ti más allá de la captura: los avisos de cookies, las notificaciones emergentes y una rueda irregular acaban todos en el archivo. Con algo de preparación dan buenos resultados; cómo grabar un vídeo con scroll de una web te guía paso a paso.

4. Una extensión de navegador

Una extensión que graba el scroll funciona dentro de tu propio navegador, así que puede capturar páginas en las que has iniciado sesión, y la mayoría automatizan el scroll. La calidad depende de tu ordenador, porque la grabación se hace ahí, y de la extensión: algunas son gratuitas con límites, otras de pago. Extensiones frente a un renderizador explica cuándo tiene sentido cada una.

5. Una app de mockups

Las herramientas de mockups como Rotato colocan una captura de pantalla o un vídeo sobre un portátil o un móvil en 3D y animan el dispositivo. Sirven para la imagen de cabecera, no para el recorrido, y necesitan material de partida. Una combinación habitual es un vídeo con scroll hecho con uno de los métodos anteriores, colocado sobre un dispositivo en una app de mockups.

6. Una herramienta de demos interactivas

Herramientas como HowdyGo capturan un flujo de producto como pasos clicables que el espectador recorre por su cuenta. Están hechas para equipos de ventas y onboarding, y tienen precios acordes. Algunas pueden exportar un vídeo o un GIF de una demo, pero un recorrido que se navega con clics no es lo mismo que un scroll que se mira.

Cuál elegir

Portfolio, publicación de lanzamiento, ficha de plantilla: un renderizador. Consulta cómo grabar webs para tu portfolio.
Recorrido de producto con voz en off: un grabador de pantalla avanzado.
Una página que solo puedes abrir tú: un grabador básico o una extensión.
Una imagen de cabecera de la web en un dispositivo: una app de mockups a la que le das un vídeo con scroll.
Si no lo tienes claro: prueba primero el renderizador. Ver la vista previa no cuesta nada, y los 51 créditos gratis al registrarte cubren un par de exportaciones.

Pruébalo con tu propia web

Pega un enlace y previsualiza el scroll gratis. 51 créditos gratis al registrarte, sin tarjeta y sin marca de agua en nada de lo que exportes.

Preguntas,
respondidas

La versión corta de lo que se suele preguntar después.

Contacto

¿Cuál es la forma más fácil de grabar una web?

Si es pública, pega su dirección en una herramienta de URL a vídeo. No hay grabador que configurar ni scroll que hacer a mano. Si es privada, usa un grabador de pantalla y deja que un script desplace la página.

¿Puedo grabar una web sin un grabador de pantalla?

Sí. Un renderizador de URL a vídeo abre la página en sus propios servidores y construye el vídeo a partir de ella, así que no se captura nada de tu pantalla. Solo funciona con páginas que un visitante pueda abrir sin iniciar sesión.

¿Qué formato debe tener un vídeo para mostrar una web?

MP4 (H.264) se reproduce en todas partes. WebM ocupa menos y admite transparencia, algo útil en tu propia web. GIF es para los sitios que no reproducen vídeo, como el correo, y ocupa más y tiene menos calidad para la misma duración.

Menos tiempo grabando. Más tiempo creando.

Automatiza las grabaciones de webs con movimiento personalizable, controles inteligentes y opciones de exportación pensadas para creadores de hoy.

Pruébalo ya