PT

Como gravar um site no browser sem distrações

Grave um site no browser para um cliente sem separadores, favoritos, autopreenchimento ou avisos de cookies a atrapalhar: perfil limpo, zoom certo e scroll suave.

Nicolas Ricardi6 min de leitura

Em resumo

  • Use um perfil do browser só para gravações: sem favoritos, sem preenchimento automático pessoal, sem extensões, sem separadores de outros clientes.
  • Oculte a barra de favoritos e defina o zoom da página antes de começar, para que o texto se leia num portátil ou num telemóvel.
  • Trate dos avisos de cookies e dos pop-ups uma vez nesse perfil, a não ser que o aviso seja o que está a rever.
  • Use dados de teste e um site de staging, nunca a conta de um cliente real.
  • Grave a janela do browser, não o ecrã inteiro, e faça scroll devagar e com pausas.

Para gravar um site no browser sem distrações, use um perfil do browser separado, sem favoritos, extensões ou dados pessoais guardados, feche todos os outros separadores, defina o zoom da página, feche os avisos de cookies uma vez e grave só a janela do browser. Depois faça scroll devagar e pare em cada secção. Dez minutos de preparação da primeira vez, e a partir daí está pronto sempre que precisar.

A demonstração de um site é o vídeo para clientes mais comum nas agências web: o site de staging para revisão, o site acabado na entrega, um bug numa página concreta. O site é o assunto. Tudo o resto no browser é ruído, e parte é privado.

Use um perfil do browser só para gravações

O browser do dia a dia mostra muito sobre si: favoritos com nomes de outros clientes, ícones de extensões, uma fila de trinta separadores, um preenchimento automático que oferece a sua morada mal clica num campo de formulário. Um perfil separado começa vazio.

No Chrome: clique no ícone do seu perfil no canto superior direito, escolha ProfileAdd Chrome profile e dê-lhe um nome como «Gravação».

No Safari: escolha SafariDefiniçõesPerfis e crie um novo. Abra uma janela nesse perfil em FicheiroNova janelaNova janela de Gravação (o último item usa o nome do seu perfil). Atenção: as palavras-passe guardadas no Porta-chaves iCloud ficam disponíveis em qualquer perfil do Safari, por isso um gestor de palavras-passe pode continuar a oferecer-se para preencher credenciais.

No novo perfil, mantenha só o que a gravação precisa: sem extensões, sem barra de favoritos, sem moradas nem cartões guardados, e sessões iniciadas apenas nos sites de staging que mostra.

Porque não uma simples janela privada?

Uma janela privada ou anónima (⌘⇧N no Chrome) também é limpa, e serve para uma vez. Mas esquece tudo quando a fecha: cada gravação recomeça com o aviso de cookies e o ecrã de início de sessão. Um perfil lembra-se do que configurou.

Janela privada ou perfil de gravação
Janela privada ou anónima Perfil de gravação
Configuração ✓ nenhuma ~ alguns minutos, uma vez
Começa sem os favoritos e separadores do dia a dia ✓ ✓
Lembra-se dos avisos de cookies fechados ✗ ✓
Mantém a sessão iniciada nos sites de staging ✗ ✓
Indicado para Uma gravação pontual Todas as gravações depois da primeira

Arrume a janela

A janela do browser antes de gravar

  • Só estão abertos os separadores que vai mostrar.
  • A barra de favoritos está oculta.
  • Os ícones das extensões foram retirados da barra de ferramentas.
  • A página está aberta no ponto de partida, no topo.
  • O zoom está definido para que o texto se leia bem.
  • O aviso de cookies e o pop-up da newsletter estão tratados.

Oculte a barra de favoritos. No Chrome, prima ⌘⇧B. No Safari, escolha VisualizaçãoOcultar barra de favoritos.

Feche os outros separadores. Os títulos dos separadores aparecem na gravação, e «Fatura em atraso, Cliente X» não é algo que queira num vídeo para o Cliente Y. A nossa checklist de privacidade para gravação de ecrã tem a lista completa do que esconder.

Defina o nível de zoom

Os sites são desenhados para quem está sentado à frente deles, não para um vídeo reduzido a uma janela de portátil ou a um telemóvel. O texto pequeno e os pormenores finos da interface ficam difíceis de ler.

Antes de gravar, aumente o zoom da página um ou dois níveis com ⌘+, e volte ao normal com ⌘0. O layout pode passar para um breakpoint mais estreito à medida que aumenta o zoom; confirme que continua a mostrar o design como o quer apresentar. Se quiser o layout de desktop exato num tamanho legível, diminua a janela em vez de aumentar o zoom, e grave a janela.

Avisos de cookies, pop-ups e widgets de chat

Num site de staging, o aviso de cookies, o pop-up da newsletter e a bolha do chat aparecem a cada novo visitante, e num perfil acabado de criar é precisamente isso que é.

  • Se não são o assunto, aceite-os ou feche-os uma vez antes de gravar. Num perfil dedicado, ficam fechados.
  • Se são o assunto, como um novo aviso de consentimento que precisa de ser aprovado, grave um vídeo curto à parte que comece por ele, para que a demonstração principal não seja interrompida.
  • Os widgets de chat abrem-se muitas vezes ao fim de algum tempo. Feche-os antes de começar, ou espere que apareçam e feche-os.

Use dados de teste, não clientes reais

Se a demonstração inclui uma área de conta, um checkout ou um painel de administração, inicie sessão como utilizador de teste. Encomendas, nomes e endereços de email reais num vídeo são dados pessoais, e os vídeos são reencaminhados. Use as contas de teste e os modos de pagamento de teste do site de staging, e preencha os formulários com dados obviamente fictícios, como «Cliente Teste».

Atenção também ao preenchimento automático. Quando clica num campo de formulário, o browser pode oferecer nomes, emails ou moradas guardados. Um perfil de gravação sem nada guardado evita isso.

Grave a janela, não o ecrã

Grave só a janela do browser ou uma área à volta dela. O cliente vê o site e mais nada: nem Dock, nem ícones da barra de menus, nem a notificação que desliza para o ecrã. O nosso guia sobre como gravar uma janela ou parte do ecrã explica as opções da app Captura de Ecrã do macOS e de outros gravadores.

Para uma apresentação cuidada, margens e um fundo à volta da janela ajudam; veja fundos e margens.

Faça scroll como se estivesse a mostrá-lo a alguém

O scroll rápido é o problema mais comum nas gravações de sites. Conhece a página; o cliente vê um borrão.

  1. Comece no topo e diga para que serve a página.
  2. Faça scroll devagar com o trackpad, ou use as teclas de seta para passos pequenos e regulares.
  3. Pare em cada secção enquanto fala dela.
  4. Evite a barra de espaço e o scroll com impulso, que saltam um ecrã inteiro de uma vez.
  5. Aponte antes de clicar. Leve o cursor a um link ou botão, faça uma pausa e depois clique.

Se o cliente puder ver no telemóvel, um zoom nos pormenores pequenos ajuda; zoom automático: quando ajuda e quando atrapalha explica quando o usar.

Versões mobile e outros casos

Para mostrar a versão mobile do site, use o modo responsivo do browser ou um iPhone real; como mostrar a versão mobile de um site ao cliente a partir do Mac compara as opções.

Para as entregas, em que também mostra o CMS e onde fica cada coisa, veja entrega de site ao cliente em vídeo. Para o básico de gravar num Mac, comece por como gravar o ecrã no Mac.

Perguntas frequentes

Como gravo um site num Mac?

Abra o site numa janela do browser limpa, feche os outros separadores, oculte a barra de favoritos e defina o nível de zoom. Depois grave só essa janela, com a app Captura de Ecrã do macOS ou com um gravador de ecrã, fazendo scroll devagar e parando em cada secção.

Como oculto a barra de marcadores no Chrome?

Prima Comando-Shift-B para mostrar ou ocultar a barra de marcadores no Chrome num Mac. No Safari, use o menu Visualização para ocultar a barra de favoritos.

Devo usar uma janela privada para gravar um site?

Ajuda numa gravação rápida, porque não tem histórico nem preenchimento automático, mas os avisos de cookies e os inícios de sessão voltam ao início de cada vez. Um perfil do browser separado, usado só para gravações, dá-lhe uma janela limpa que se lembra das suas escolhas.

Como faço scroll suave numa gravação de ecrã?

Faça scroll devagar com o trackpad, ou use as teclas de seta, e pare em cada secção enquanto fala dela. Evite o scroll com impulso e a barra de espaço, que saltam um ecrã inteiro de cada vez.

Escrito por

Nicolas Ricardi

Maker of JustRec, at Nube

Nicolas makes JustRec at Nube, a web studio in Italy. He built it for the videos Nube sends to its own clients: design reviews, handovers and quotes explained in a few minutes instead of a meeting.

www.wearenube.dev
Vídeos melhores