Como Adicionar Capturas de Tela e Animação a Pull Requests do GitHub

Programadores do GitHub costumam adicionar capturas de tela ou GIFs animados a seus pull requests de repositório. Essas técnicas são definitivamente mais atraentes do que fazer alguém ler várias linhas de texto simples. Adicionar capturas de tela estáticas é útil se você quiser inserir mudanças visuais ou fotografias inline. Para demonstrar fluxos de processo e movimento do cursor do mouse, você pode usar vídeos MP4 e animação GIF. O seguinte tutorial mostra como adicionar capturas de tela e animação MP4/GIF em pull requests do GitHub.

Índice

• 1. Adicionar um Novo Repositório e Branch
• 2. Criar Capturas de Tela para o GitHub
• 3. Criar Vídeos e Animação GIF para o GitHub
• 4. Adicionar Capturas de Tela ou Animações a Pull Requests do GitHub
• 5. Exibir Capturas de Tela e Imagens GIF em uma Página do GitHub
• Perguntas Frequentes

Leia também: O Guia do Iniciante para o Git

1. Adicionar um Novo Repositório e Branch

Mesmo que você nunca tenha usado o GitHub antes, pode usar os passos abaixo para começar como desenvolvedor. Atualmente, você só precisa de um e-mail para criar uma conta no GitHub. Isso torna o início no GitHub muito mais fácil do que antes.

1. Após fazer login no seu perfil do GitHub, clique no sinal “+” no canto superior direito para criar um novo repositório.

1. Dê ao repositório um nome de sua escolha e escolha mantê-lo público ou privado. Lembre-se de marcar a opção “Inicializar este repositório junto com a verificação de um README”.

1. Você pode escolher liberar seu código na forma de uma licença Apache 2.0, licença pública geral GNU, licença MIT, Eclipse, licença pública Mozilla, etc. Escolha “nenhuma” se não quiser que outros usem o código livremente.
2. Clique em “Criar repositório” para confirmar a adição do seu repositório sob o branch principal do seu perfil.

1. Na próxima etapa, adicione um branch ao seu repositório usando o menu suspenso mostrado abaixo. Aqui, o branch “Guten-tag-1” foi adicionado ao repositório “Guten-tag”, que por sua vez é um branch do repositório principal “Hola-World.”

1. O propósito de um branch no GitHub é ajudar o desenvolvedor a trabalhar em recursos e correções de bugs separadamente do branch de produção principal. Adicionar um número de série como 1, 2, 3, etc., é uma maneira mais fácil de memorizar o nível do branch.

2. Criar Capturas de Tela para o GitHub

Para adicionar capturas de tela no GitHub, você precisa de um bom software de captura de tela. No Windows 11, a Ferramenta de Recorte é um aplicativo da Microsoft mais adequado para esse propósito. Se você estiver tendo alguns problemas com isso, siga nosso guia de solução de problemas.

O Windows 10, no entanto, usa um aplicativo “Recorte e Anotação” que funciona de maneira muito semelhante à Ferramenta de Recorte do Windows 11, mas com menos funções. Ele tem um temporizador de 3 ou 10 segundos para o atraso na captura da tela.

Leia também: Ferramenta de Recorte do Windows 11 Não Funciona: 12 Possíveis Soluções

3. Criar Vídeos e Animação GIF para o GitHub

Para adicionar vídeos ou GIFs ao GitHub, você precisa de uma boa ferramenta de captura de vídeo. No passado, você não podia enviar um MP4 no GitHub, mas isso mudou.

Em ambos Windows 11 e Windows 10, você pode usar um aplicativo da Microsoft Store chamado Gravador de Tela & Gravação de Tela. A Microsoft Store é a fonte mais segura para baixar software de gravação de tela, pois cada aplicativo é projetado para funcionar bem com o Windows. Para aprender como gravar sua tela gratuitamente em um Mac, siga este guia.

1. Inicie o aplicativo de gravação de tela e escolha um modo de captura: “Completo”, “Área”, “Câmera” ou “Apenas Áudio.” Pressione “Iniciar” sempre que estiver pronto para começar a gravar na sua tela.

1. A boa notícia sobre este software é que você pode escolher criar um GIF diretamente selecionando o modo GIF.

1. Alternativamente, você pode facilmente converter um MP4 em GIF usando Ezgif ou qualquer outra ferramenta online. Primeiro, adicione o vídeo MP4 usando o link de upload.

1. Você obterá uma estimativa aproximada do tamanho do arquivo GIF, largura e comprimento. Você pode alterar a taxa de quadros do seu arquivo GIF para torná-lo mais lento para instruções fáceis.

Leia também: Como Gravar Sua Tela em um Mac Gratuitamente

4. Adicionar Capturas de Tela ou Animações a Pull Requests do GitHub

Uma vez que você tenha criado suas capturas de tela ou vídeos, pode facilmente adicioná-los a pull requests do GitHub.

1. Para adicionar capturas de tela ou vídeo/animações ao GitHub, volte ao branch que você criou anteriormente e navegue até “Pull requests.” Alternativamente, acesse diretamente clicando no branch.

1. Para adicionar um novo arquivo, como MP4 ou GIF, selecione “Enviar arquivos” no branch onde você deseja que o arquivo esteja disponível.

1. Uma vez no modo editor, você pode anexar a imagem da captura de tela e os arquivos MP4/GIF pela opção “escolha seus arquivos”. Se você estiver fazendo um commit pela primeira vez no repositório do branch do GitHub, clique em “confirmar alterações.” Se não, escolha “atualizar comentário.”

1. Aguarde alguns segundos para que o arquivo de captura de tela ou animação seja adicionado ao seu branch de repositório.

1. A captura de tela/vídeo/animação criada é adicionada com sucesso ao branch do GitHub e, por sua vez, ao repositório.

1. O GitHub é tudo sobre colaboração com outros desenvolvedores. Se eles gostarem das suas mudanças propostas, podem mesclá-las no repositório deles. Isso é feito automaticamente se você conseguir ver uma opção “Capaz de mesclar”.

1. Uma vez que você finalize a mesclagem, os vídeos/capturas de tela aparecerão como “commits” no repositório principal.

Leia também: Como Limpar o Cache do Git

5. Exibir Capturas de Tela e Imagens GIF em uma Página do GitHub

Em vez de enviar capturas de tela e arquivos GIF separadamente dentro do repositório de pull request, você também pode torná-los visíveis na página do GitHub.

1. O truque é clicar no arquivo “ReadMe.md” visível em qualquer branch. Assim que abrir, clique em um ícone chamado “Exibir o blob de origem.” Este branch pode ser editado para exibir imagens, capturas de tela, GIFs e mais.

1. Clicar no ícone “editar arquivo” levará a uma tela de codificação onde você pode adicionar o código da captura de tela ou GIF animado. É fácil exibir uma imagem adicionando ! e envolvendo o texto alternativo em [ ], e então incorporando o link da imagem entre parênteses ().

Se você não quiser codificar, há uma maneira mais fácil de adicionar uma captura de tela/GIF diretamente à página do repositório.

1. Clique em “editar arquivo” na página Readme.md, que levará a uma nova janela onde você pode anexar a captura de tela/GIF a ser exibido na página do branch.

1. Antes de confirmar as alterações no seu branch do GitHub, você pode facilmente visualizar a imagem, captura de tela ou GIF.

Leia também: Como Instalar Git e Git Bash no Windows

Perguntas Frequentes

Como faço para alinhar ou redimensionar uma imagem ou captura de tela no GitHub?

Para alinhar uma imagem ou captura de tela na sua página do GitHub, clique em “editar isso” no arquivo ReadMe.md, depois faça o upload da imagem ou captura de tela e adicione o seguinte código:

Modifique o código para alinhar a imagem à esquerda, à direita ou ao centro. Para redimensionar a imagem, modifique as dimensões de largura e altura.

Existe um limite de tamanho para arquivos GIF e de vídeo no GitHub?

Sim. O tamanho máximo do arquivo é 50 MB para arquivos GIF ou MP4 individuais. Usando um recurso oculto do GitHub chamado “GitHub Blocks”, você pode aumentar isso para 100 MB para cada arquivo. Os repositórios do GitHub (seu branch principal) devem permanecer abaixo de 5 GB.

Se você precisar enviar uma imagem ou vídeo com um tamanho de arquivo maior, use um programa do GitHub chamado GitHub Large File Storage (LFS), que tem um limite máximo de 2 GB por arquivo para usuários Free/Pro.

Como faço para compartilhar imagens no GitHub?

Atualmente, o GitHub não possui nenhuma ferramenta para compartilhar imagens diretamente usando chat e ferramentas relacionadas, como capturas de tela ou GIFs. No entanto, você pode criar “issues” em uma página do GitHub e enviá-las para revisão. Essas issues podem incluir as imagens. Para notificar uma pessoa no GitHub, use @ antes do nome de usuário dela.

Crédito da imagem: Groot e Octocat no Unsplash Todas as capturas de tela tiradas pelo autor.