Skip to main content
Publicamos atualizações frequentes em nossa documentação, e a tradução desta página ainda pode estar em andamento. Para obter as informações mais atualizadas, acesse a documentação em inglês.
Atualmente o GitHub AE está em versão limitada.

Como trabalhar com arquivos sem código

GitHub AE é compatível com a interpretação e diferenciação em uma série de formatos de arquivo que não são de código.

Renderizar e comparar imagens

O GitHub AE pode exibir diversos formatos comuns de imagem, incluindo PNG, JPG, GIF, PSD e SVG. Além de exibir as imagens, existem diversas formas de comparara as diferenças entre as versões desses formatos de imagem.

Observação:

  • O GitHub não dá suporte à comparação das diferenças entre arquivos PSD.
  • Caso você esteja usando o navegador Firefox, talvez os SVGs no GitHub não sejam renderizados.

Exibir imagens

Você pode procurar e ver diretamente as imagens do repositório no GitHub AE.

No momento, os arquivos SVGs não são compatíveis com animação ou scripts inline.

Exibir diferenças

Compare imagens visualmente em três modos diferentes: 2-up, deslizar e exibição em camadas.

2-up

O modo 2-up é o padrão: ele fornece uma visão rápida das duas imagens. Além disso, se a imagem tiver mudado de tamanho entre as versões, a alteração real da dimensão será exibida. Isso facilita identificar quando as imagens foram redimensionadas, como quando ativos são atualizados em resoluções mais altas.

Captura de tela de uma comparação para uma imagem no modo 2-up. A imagem à direita tem um contorno verde e é maior que a imagem à esquerda, que tem um contorno vermelho.

Swipe

O modo Deslizar permite ver partes da imagem lado a lado. Não sabe se houve mudança de cor nas versões? Posicione o controle deslizante sobre a área em questão e compare os pixels.

Captura de tela de uma comparação para uma imagem no modo de passar o dedo. Uma linha no centro divide a imagem em nova, contornada em verde, e antiga, contornada em vermelho.

Exibição em camadas

A exibição em camadas é muito útil para identificar movimentações sutis dos elementos. Um ícone foi movimentado dois pixels para a esquerda? Arraste o controle deslizante de opacidade um pouco e observe se as coisas se movem.

Visualizador de arquivos 3D

O GitHub AE pode hospedar e renderizar arquivos 3D com a extensão .stl.

Diretamente em um arquivo STL no GitHub AE, você pode:

  • Clicar e arrastar para girar o modelo.
  • Clicar com o botão direito do mouse e arrastar para converter a exibição.
  • Rolar para ampliar e reduzir.
  • Clicar nos diferentes modos de exibição para alterar a exibição.

Diffs

Em um commit ou conjunto de alterações que inclui um arquivo STL, você poderá ver um diff antes e depois do arquivo.

Por padrão, você obterá uma exibição em que tudo que permanecer inalterado estará em wireframe. As adições recebem a cor verde e as partes removidas ficam em vermelho.

Captura de tela de comparação para um arquivo STL. Partes de um objeto 3D são vermelhas e outras partes são verdes.

Selecione também a opção Controle Deslizante de Revisão, que permite usar um controle deslizante na parte superior do arquivo para fazer a transição entre as revisões atuais e anteriores.

Corrigir desempenho lento

Se você vir no canto do visualizador, com a dica de ferramenta "Suporte de hardware com tecnologia WebGL não disponível", a tecnologia WebGL não estará disponível no navegador.

A WebGL é necessária para o aproveitamento completo do hardware do computador. Recomendamos experimentar navegadores como o Chrome ou o Firefox, que são fornecidos com o WebGL habilitado.

Erro: "Não é possível exibir"

Se o seu modelo não for válido, o GitHub talvez não consiga exibir o arquivo. Além disso, os arquivos com mais de 10 MB são grandes demais para exibição no GitHub.

Incorporar o modelo em outro lugar

Para exibir o arquivo 3D em outro lugar na Internet, modifique esse modelo e coloque-o em qualquer página HTML que aceite JavaScript:

<script src="https://embed.github.com/view/3d/<username>/<repo>/<ref>/<path_to_file>"></script>

Por exemplo, se a URL do modelo for github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl, o código de inserção será:

<script src="https://embed.github.com/view/3d/skalnik/secret-bear-clip/master/stl/clip.stl"></script>

Por padrão, o renderizador incorporado tem 420 pixels de largura por 620 pixels de altura, mas você pode personalizar a saída transmitindo as variáveis de altura e largura como parâmetros no final da URL, como ?height=300&width=500.

Observação: ref pode ser um branch ou um hash para um commit individual (como 2391ae).

Renderizar dados CSV e TSV

GitHub dá suporte à renderização de dados de tabela na forma de arquivos .csv (separados por vírgula) e .tsv (separados por tabulação).

Captura de tela de um arquivo CSV renderizado, com os dados mostrados em um formato de tabela.

Quando exibido, todos os arquivos .csv ou .tsv com commit em um repositório no GitHub AE é renderizado automaticamente como uma tabela interativa, completa com cabeçalhos e numeração de linha. Por padrão, vamos sempre presumir que a primeira linha é a linha de cabeçalho.

Você pode criar um link para uma linha específica clicando no número da linha ou selecionar várias linhas mantendo a tecla Shift pressionada. Copie e envie a URL para um amigo.

Pesquisando dados

Para encontrar um valor específico no conjunto de dados, comece a inserir o valor na barra de pesquisa logo acima do arquivo. As linhas serão filtradas automaticamente.

Tratando erros

Ocasionalmente, você pode identificar que seu arquivo CSV ou TSV não está renderizando. Nessas situações, uma mensagem é exibida acima do texto bruto, sugerindo o motivo do erro.

Captura de tela de uma exibição de texto de um arquivo CSV. No cabeçalho, uma mensagem aponta um erro: "Nenhuma vírgula encontrada neste arquivo CSV na linha 0".

Os erros comuns incluem:

  • Divergência na contagem de colunas. Você deve ter o mesmo número de separadores em cada linha, mesmo nas células em branco
  • Exceder o tamanho do arquivo. A renderização funciona apenas para arquivos com até 512 KB. Qualquer arquivo maior que isso deixa o navegador lento.
  • Usando delimitadores sem suporte, como ponto e vírgula em vez de vírgulas.

Renderizar documentos PDF

GitHub dá suporte à renderização de documentos PDF.

No momento, os links nos PDFs são ignorados.

Renderizar diferenças em documentos em prosa

Os commits e as solicitações de pull que incluem documentos de prosa podem representar esses documentos com as exibições de origem e renderizada.

A exibição de origem mostra o texto bruto digitado, enquanto a exibição renderizada mostra como o texto será mostrado após a renderização no GitHub AE. Por exemplo, essa pode ser a diferença entre a exibição de **bold** em Markdown e de negrito na exibição renderizada.

Há suporte para a renderização em prosa em documentos renderizados compatíveis com github/markup:

  • Markdown
  • AsciiDoc
  • Textile
  • ReStructuredText
  • Rdoc
  • Organização
  • Creole
  • MediaWiki
  • Pod

Para conferir as alterações feitas no documento como parte de um commit, clique em .

Captura de tela de comparação para um arquivo Markdown. No cabeçalho do arquivo, um ícone de arquivo tem contorno laranja escuro.

Essa "comparação avançada" realça o código que foi adicionado e removido.

Captura de tela de comparação para um arquivo Markdown. "@octo-org/core" é ignorado, com um plano de fundo vermelho, seguido por "@octocat", com um plano de fundo verde.

Desabilitando a interpretação do Markdown

Ao visualizar um arquivo Markdown, você pode clicar em na parte superior do arquivo para desabilitar a renderização do Markdown e ver a origem do arquivo.

Captura de tela de um arquivo Markdown em um repositório do GitHub mostrando as opções para interagir com o arquivo. Há um botão para exibir o blob de origem com um contorno em laranja escuro.

Se você desabilitar a renderização do Markdown, poderá usar recursos de exibição de origem, como vinculação de linha, o que não é possível ao exibir arquivos Markdown renderizados.

Exibir alterações nos atributos

Fornecemos uma dica de ferramenta que descreve as alterações nos atributos que, ao contrário de palavras, não ficarão visíveis no documento renderizado. Por exemplo, se a URL de um link for alterada de um site para outro, mostraremos uma dica de ferramenta como esta:

Captura de tela de comparação para um arquivo Markdown. Uma dica de ferramenta sobre um link informa "href: /octo-org-repo/blob/CONTRIBUTING -> /octo-org/octo-repo/blob/docs/CONTRIBUTING."

Fazer comentários em alterações

Os comentários sobre um commit só podem ser adicionados aos arquivos na exibição de origem, linha a linha.

Vincular a cabeçalhos

Assim como acontece com outros documentos em prosa renderizados, se você posicionar o cursor sobre um cabeçalho no documento, um ícone de link será criado. Você pode vincular os leitores da comparação da prosa renderizada a seções específicas.

Exibir diffs complexos

Algumas pull requests envolvem um grande número de alterações e documentos grandes e complexos. Quando as mudanças levam muito tempo para serem analisadas, GitHub AE não pode produzir uma visão renderizada das alterações. Se isso acontecer, você verá uma mensagem de erro ao clicar no botão renderizado.

Você ainda pode usar a exibição original para analisar e comentar as alterações.

Exibir elementos HTML

Não oferecemos suporte direto a exibições renderizadas de commits para documentos HTML. Alguns formatos, como o Markdown, permite a inclusão de HTML arbitrário no documento. Quando esses documentos são mostrados no GitHub AE, parte do HTML integrado pode ser mostrado em uma pré-visualização, enquanto outra parte (como um vídeo integrado do YouTube) não.

Em geral, as exibições renderizadas de alterações em um documento que contém HTML integrado mostrarão as alterações nos elementos que são compatíveis com a exibição do GitHub AE do documento. As alterações em documentos que contém HTML integrado devem sempre ser confirmadas nas exibições original e renderizada.

Mapeamento de arquivos GeoJSON/TopoJSON no GitHub

O GitHub AE dá suporte à renderização de arquivos de mapa GeoJSON e TopoJSON nos repositórios do GitHub AE. Faça commit do arquivo como você normalmente faria usando uma extensão .geojson ou .topojson. Também há suporte para arquivos com uma extensão .json, mas somente se type estiver definido como FeatureCollection, GeometryCollection ou topology. Acesse o caminho do arquivo do GeoJSON/TopoJSON em GitHub AE.

Tipos de geometria

Os mapas do GitHub AE usam o Leaflet.js e dão suporte a todos os tipos de geometria descritos na especificação geoJSON (Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon e GeometryCollection). Os arquivos TopoJSON devem ser do tipo "Topology" e aderir à especificação TopoJSON.

Estilos de elementos gráficos

É possível personalizar a maneira como os recursos são exibidos, como especificar uma cor específica ou adicionar um ícone descritivo, aprovando metadados adicionais nas propriedades do objeto GeoJSON. As opções são:

  • marker-size - small, medium ou large
  • marker-color – cor hexa RGB válida
  • marker-symbol – uma ID de ícone do projeto Maki ou um caractere alfanumérico individual (a-z ou 0-9).
  • stroke – cor de uma borda ou uma linha do polígono (RGB)
  • stroke-opacity – opacidade de uma borda ou uma linha do polígono (0,0-1,0)
  • stroke-width – largura de uma borda ou uma linha do polígono
  • fill – a cor do interior de um polígono (RGB)
  • fill-opacity – a opacidade do interior de um polígono (0,0-1,0)

Confira a versão 1.1.0 da especificação open simplestyle para obter mais informações.

Incorporar o mapa em outro lugar

Deseja disponibilizar seu mapa GeoJSON em um lugar diferente do GitHub AE? Basta modificar o modelo e colocá-lo em qualquer página HTML que suporte JavaScript, por exemplo, GitHub Pages:

<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>

Por exemplo, se a URL do mapa for github.com/benbalter/dc-wifi-social/blob/master/bars.geojson, o código de inserção será:

<script src="https://embed.github.com/view/geojson/benbalter/dc-wifi-social/master/bars.geojson"></script>

Por padrão, o mapa inserido tem 420px x 620px, mas é possível personalizar a saída transmitindo as variáveis de altura e largura como parâmetros no final, como ?height=300&width=500.

Observação: ref pode ser um branch ou um hash para um commit individual (como 2391ae).

Clustering

Se o seu mapa contém um número grande de marcadores (aproximadamente mais de 750), em níveis de zoom maiores, o GitHub automaticamente fará cluster de marcadores próximos. Simplesmente clique em cluster ou aumentar o zoom para ver os marcadores individuais.

Algo errado no mapa de base

Os dados do mapa subjacentes (nomes de ruas, estradas etc) são determinados pelo OpenStreetMap, um projeto colaborativo para criação de um mapa do mundo gratuito e editável. Se você observar que algo não está certo, como ele é código aberto, basta se inscrever e enviar uma correção.

Solução de problemas de arquivos GeoJSON/TopoJSON

Em caso de problemas para renderizar um arquivo GeoJSON, certifique-se de que ele seja válido executando-o por meio de um linter GeoJSON. Se os pontos não estão aparecendo onde deveriam (por exemplo, no meio do oceano), é provável que os dados estejam em uma projeção que não é compatível atualmente. Atualmente, o GitHub AE só dá suporte à projeção urn:ogc:def:crs:OGC:1.3:CRS84.

Além disso, se o arquivo .geojson for particularmente grande (acima de 10 MB), não será possível renderizá-lo no navegador. Se esse for o caso, você geralmente verá uma mensagem informando que não podemos mostrar arquivos tão grandes.

Ainda pode ser possível renderizar os dados convertendo o arquivo .geojson em TopoJSON, um formato de compactação que, em alguns casos, pode reduzir o tamanho do arquivo em até 80%. Claro que você sempre pode quebrar os arquivos em pedaços menores (como por estado ou por ano) e armazenar os dados em vários arquivos no repositório.

Leitura adicional sobre GeoJSON/TopoJSON

Trabalhando com arquivos do Jupyter Notebook no GitHub

Quando você adiciona arquivos do Jupyter Notebook ou do IPython Notebook com uma extensão .ipynb em sua empresa, eles são renderizados como arquivos HTML estáticos no repositório.

Os recursos interativos do notebook, como plots JavaScript personalizados, não funcionam no repositório em sua empresa. Para ver um exemplo, confira Linking and Interactions.ipynb.

Para ver o Jupyter Notebook com o conteúdo JavaScript renderizado ou compartilhar os arquivos do notebook com outras pessoas, use o nbviewer. Para ver um exemplo, confira Linking and Interactions.ipynb renderizado no nbviewer.

Para exibir uma versão totalmente interativa do Jupyter Notebook, configure um servidor de notebook localmente. Para obter mais informações, confira a documentação oficial do Jupyter.

Solução de problemas de arquivos de Jupyter Notebook

Se estiver tendo problemas para renderizar arquivos Jupyter Notebook em HTML estático, converta o arquivo localmente na linha de comando usando o comando nbconvert:

$ jupyter nbconvert --to html NOTEBOOK-NAME.ipynb

Leitura adicional sobre Jupyter Notebook