https://github.com/felipetaua/personalizar-github
https://github.com/felipetaua/personalizar-github
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/felipetaua/personalizar-github
- Owner: felipetaua
- Created: 2024-12-28T02:27:21.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-30T03:09:00.000Z (5 months ago)
- Last Synced: 2025-01-10T15:38:41.678Z (5 months ago)
- Size: 51.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Como criar e personalizar o Readme dos seus projetos
:wink: Neste artigo você aprenderá como personalizar o readme dos seus projetos no github.
Mais o que seria README (ou leia-me)? Bem, é um arquivo com extensão .md,
ou seja ele é escrito em Markdown Syntax que é uma sintaxe usada para padronizar e facilitar a formatação de texto na web.
## :bulb: Porque é importante?
Bem, depois de desenvolver seu projeto e subir no github você vai documentar o seu trabalho para que quem visite seu repositório saiba do que se trata.
E podemos fazer isso por meio do README, que é o primeiro arquivo a ser visto, ou seja, é a porta de entrada para o seu projeto!
- :rocket: Além disso, algumas pessoas utilizam o perfil GitHub como portfólio, se esse for o seu caso, é interessante apostar em arquivos README para deixar seus projetos mais atrativos até mesmo para recrutadores.
## Alguns exemplos do que ter no README
- Título e Imagem de capa;
- Badges;
- Índice;
- Descrição do Projeto;
- Status do Projeto;
- Funcionalidades e Demonstração da Aplicação;
- Acesso ao Projeto;
- Tecnologias utilizadas;
- Pessoas Contribuidoras;
- Pessoas Desenvolvedoras do Projeto;
- Licença.
## :pushpin: Título e Imagem de capa:
Você pode colocá-lo dessa maneira:
```Markdown
# Título
```
Ou, caso queira colocar ele centralizado, você pode utilizar tags do HTML que funcionam normalmente, dessa forma:
```HTML
Seu título aqui
```
>Obs: Feito isso, caso queira, você pode fazer uma capa ou logo do projeto para colocar após o título.
## :pushpin: Badges:
Seus objetivos são indicar o estado atual do projeto, licença (caso tenha), versões, dependências, testes, dentre outros.
Caso queira fazer suas badges, você pode utilizar o [Shields.io](https://shields.io/), ele fornece na página principal diversos exemplos de Badges e,
além disso, nele você pode colar o link do seu repositório do GitHub na caixa de texto inicial, assim automaticamente ele irá sugerir algumas Badges
para você utilizar no seu projeto, fornecendo o link da Badge para copiar e colar no seu README.
Exemplo:
Caso queira deixar centralizado, pode utilizar a tag align do HTML também, dessa forma:
```HTML
```
## :pushpin: Índice:
O GitHub gera automaticamente um índice para arquivos README, tendo como base os títulos de seção. Para visualizá-lo, selecione o ícone de menu no canto superior
esquerdo do arquivo. É uma ferramenta excelente para navegar pelo documento, pois redireciona o usuário para o tópico selecionado.
Entretanto, caso você tenha interesse em fazer seu próprio índice para ser visualizado no arquivo, também é possível fazer em Markdown.
Exemplo:
```Markdown
## Índice
* [Título e Imagem de capa](#Título-e-Imagem-de-capa)
* [Badges](#badges)
* [Índice](#índice)
* [Descrição do Projeto](#descrição-do-projeto)
* [Status do Projeto](#status-do-Projeto)
* [Funcionalidades e Demonstração da Aplicação](#funcionalidades-e-demonstração-da-aplicação)
* [Acesso ao Projeto](#acesso-ao-projeto)
* [Tecnologias utilizadas](#tecnologias-utilizadas)
* [Pessoas Contribuidoras](#pessoas-contribuidoras)
* [Pessoas Desenvolvedoras do Projeto](#pessoas-desenvolvedoras)
* [Licença](#licença)* [Conclusão](#conclusão)
```
## :pushpin: Descrição do Projeto:
Como é um objetivo do arquivo README descrever o projeto, é legal que você apresente logo após o título ou imagem de capa e/ou Badges caso tenha, uma breve explicação do seu projeto com seu objetivo principal.
## :pushpin: Status do Projeto:
Caso você opte por não utilizar Badges sobre o status do projeto, é interessante que você coloque essa informação no próprio texto mesmo.
Exemplo:
```Markdown
> :construction: Projeto em construção :construction:
```
Caso queira centralizar:
```HTML
:construction: Projeto em construção :construction:
```
>Nesse exemplo foi utilizado o emoji :construction:, mas você pode utilizar em qualquer lugar do arquivo, como antes dos subtítulos. Nesse [Gist do Rafael Xavier de Souza](https://gist.github.com/rxaviers/7360908), você pode encontrar uma variedade de emojis para utilizar no seu README e deixá-lo mais descontraído.
## :pushpin: Funcionalidades e Demonstração da Aplicação:
Você pode listar as funcionalidades do seu projeto para facilitar o entendimento do usuário.
Para isso, você pode fazer dessa maneira:
```Markdown
# :hammer: Funcionalidades do projeto
- `Funcionalidade 1`: descrição da funcionalidade 1
- `Funcionalidade 2`: descrição da funcionalidade 2
- `Funcionalidade 2a`: descrição da funcionalidade 2a relacionada à funcionalidade 2
- `Funcionalidade 3`: descrição da funcionalidade 3
```
Além disso, se for possível, é interessante apresentar as funcionalidades com um exemplo visual do projeto, como gif, imagens ou vídeo.
>Obs.: Lembrando que o procedimento para colocar gif é o mesmo adotado para imagens e você pode gravar gifs com gravadores de tela, como o [Acethinker](https://www.acethinker.com/).
## :pushpin: Acesso ao projeto:
Caso o seu projeto esteja no ar com algum serviço de hospedagem, você pode disponibilizar o link para o mesmo. Caso contrário, você pode apostar em gifs e imagens,
como citado anteriormente, bem como indicar como o usuário pode baixar o projeto, abrir e executar.
Isso pode ser feito em Markdown:
```Markdown
## 📁 Acesso ao projeto
**Indique como é possível baixar ou acessar o código fonte do projeto, seja projeto inicial ou final**
## 🛠️ Abrir e rodar o projeto
**Apresente as instruções necessárias para abrir e executar o projeto**
```
## :pushpin: Tecnologias utilizadas:
Você também pode citar as tecnologias utilizadas no projeto, é uma ótima forma de demonstrar o que você anda estudando nesse mar que é a tecnologia.
Ou colocar os ícones das tecnologias utilizadas:
## :pushpin: Pessoas Contribuidoras:
Caso o seu projeto tenha contribuidores, é bacana adicionar eles no README. Um exemplo fantástico disso é o Docusaurus, onde se tem as fotos de todos
os contribuidores e um link para outro documento markdown com recados importantes para quem deseja contribuir também.
## :pushpin: Pessoas Desenvolvedoras do Projeto:
E agora entra você! É importante que você coloque sua foto também, caso não goste de fotos, vale o user padrão do GitHub ou fazer seu próprio Octocat. Além disso,
você pode linkar seu usuário, para caso algum usuário queira entrar em contato ou reportar algo.
```HTML
# Autores
| [
Camila Fernanda Alves](https://github.com/camilafernanda) | [
Guilherme Lima](https://github.com/guilhermeonrails) | [
Alex Felipe](https://github.com/alexfelipe) |
| :---: | :---: | :---: |
```
## :pushpin: Licença:
Geralmente, os repositórios públicos no GitHub são utilizados para compartilhar softwares de código aberto. Porém, para que um repositório seja realmente de código
aberto, ele precisa ter uma licença dando aos outros usuários a liberdade de usar, alterar e distribuir o software.
Portanto, caso seu repositório tenha uma licença, é essencial que você coloque ela no seu README.
## :pencil: Documentação e informação extra:
- https://gist.github.com/reginadiana/e044fe93ed81aa04a10361cb841c0409
- https://github.com/othneildrew/Best-README-Template
- https://www.alura.com.br/artigos/escrever-bom-readme
- https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open
## 🧰 Recursos úteis
Você pode encontrar algumas dessas ideias na ferramenta [README Creator](https://readmecreator.herokuapp.com/), site simples que reúne alguns recursos úteis para criação de READMEs de projetos, assim como para perfis. Após preencher os campos adequados e explorar os recursos, ele gerará um README no formato HTML/MD que você poderá continuar editando e adaptando.
Hello World! I'm Tauã Felipe
Where to find me 
> BY: Tauã Felipe
> Conteúdo feito para ajudar novos usuários à personalizar seus githubs
## Header
```
# Titulo
ou
Titulo
## Descrição do Projeto
Escrever descrição, que ficará com texto justificado
A tag align é usada para alinhar os elementos e assume left por padrão.
```
# Como adicionar badges
#### [>>> Repositório com os logos <<<](https://simpleicons.org)
```
Podemos fazer isso a partir de uma URL como esta:
https://img.shields.io/static/v1?label=&message=&color=&style=&logo=<LOGO>
<img src="https://img.shields.io/static/v1?label=react&message=framework&color=blue&style=for-the-badge&logo=REACT"/>
<img src="https://img.shields.io/static/v1?label=Netlify&message=deploy&color=blue&style=for-the-badge&logo=netlify"/>
<img src="http://img.shields.io/static/v1?label=License&message=MIT&color=green&style=for-the-badge"/>
<img src="http://img.shields.io/static/v1?label=Ruby&message=2.6.3&color=red&style=for-the-badge&logo=ruby"/>
<img src="http://img.shields.io/static/v1?label=Ruby%20On%20Rails%20&message=6.0.2.2&color=red&style=for-the-badge&logo=ruby"/>
<img src="http://img.shields.io/static/v1?label=TESTES&message=%3E100&color=GREEN&style=for-the-badge"/>
<img src="http://img.shields.io/static/v1?label=STATUS&message=EM%20DESENVOLVIMENTO&color=RED&style=for-the-badge"/>
<img src="http://img.shields.io/static/v1?label=STATUS&message=CONCLUIDO&color=GREEN&style=for-the-badge"/>
Onde cada parâmetro significa:
LABEL texto do campo esquerdo
MESSAGE texto do campo direto
COLOR cor do campo direito (as opções podem ser encontradas no site)
STYLE estilo do badge inteiro. Podemos ter: plastic, flat, for-the-badge, social ou flat-square.
LOGO logo do campo esquerdo
Como exemplo, vou escolher os seguintes parâmetros:
LABEL como react
MESSAGE como framework
COLOR como blue
STYLE como for-the-badge
LOGO como REACT
Podemos colocar ele no README assim:
<img src="https://img.shields.io/static/v1?label=react&message=framework&color=blue&style=for-the-badge&logo=REACT"/>
ou ainda:
```
# Ênfase
<img src="https://github.com/juvenalculino/imagens/blob/master/img/enfase.png">
# Lista Ordenada
<img src="https://github.com/juvenalculino/imagens/blob/master/img/listaordenada.png">
# Lista Não Ordenada
<img src="https://github.com/juvenalculino/imagens/blob/master/img/listanaoirdenada.png">
# Links
<img src="https://github.com/juvenalculino/imagens/blob/master/img/links.png">
# Quotes
<img src="https://github.com/juvenalculino/imagens/blob/master/img/quotes.png">
# TaskLists
<img src="https://github.com/juvenalculino/imagens/blob/master/img/tasklist.png">
# Código
<img src="https://github.com/juvenalculino/imagens/blob/master/img/codigo.png">
# Tabelas
<img src="https://github.com/juvenalculino/imagens/blob/master/img/tabelas.png">
# Imagens ou Gifs
<img src="https://github.com/juvenalculino/imagens/blob/master/img/imagensougif.gif">
### OU
<img src="https://github.com/juvenalculino/imagens/blob/master/img/imgougif2.png">
# Emojis
#### [>>> Repositório com emojis <<<](https://gist.github.com/rxaviers/7360908)
## O que a plataforma é capaz de fazer :checkered_flag:
```
:trophy: Gerar PDF do certificado com as informações preenchidas no formulário para cada participantes para envio de e-mail
:trophy: Check-list de participantes, permitindo selecionar quem irá receber os certificados
:trophy: Permite que o organizador do evento escreva sua assinatura digital dentro da plataforma
```
:trophy: Gerar PDF do certificado com as informações preenchidas no formulário para cada participantes para envio de e-mail
:trophy: Check-list de participantes, permitindo selecionar quem irá receber os certificados
:trophy: Permite que o organizador do evento escreva sua assinatura digital dentro da plataforma
# Status do projeto
```
> Status do Projeto: Concluido :heavy_check_mark:
> Status do Projeto: Em desenvolvimento :warning:
```
> Status do Projeto: Concluido :heavy_check_mark:
> Status do Projeto: Em desenvolvimento :warning:
# Deploy da aplicação
> Se for possível subir a aplicação com Netlify ou outras plataformas que permitem com que as pessoas acessem o seu projeto sem ter o trabalho de rodar em suas maquinas é ótimo, isso poupa tempo e paciência. Se tiver, coloque na documentação:
```
## Deploy da Aplicação com Netlify: :dash:
/* Aqui estamos usando a tag Quotes do markdown*/
> https://certificates-for-everyone-womakerscode.netlify.app/
```
## Deploy da Aplicação com Netlify: :dash:
/* Aqui estamos usando a tag Quotes do markdown*/
> https://certificates-for-everyone-womakerscode.netlify.app/
# Destaques para os contribuidores
```
Quando fizer aquele projeto em grupo ou receber alguma Pull Request como contribuição destaque-os. Uma coisa bem bacana aqui é misturar imagens com tabelas:
[<img src="https://avatars2.githubusercontent.com/u/46378210?s=400&u=071f7791bb03f8e102d835bdb9c2f0d3d24e8a34&v=" width=115 > <br> <sub> Diana Regina </sub>](https://github.com/Diana-ops) |
| :---: |
Confuso? Calma que eu explico.
Dentro de || temos uma tag html <img>, nela foi definido o link e o tamanho da imagem com src e width. Aqui foi inserido o avatar do dev.
Depois temos a tag <br>, que faz uma quebra de linha com o próximo elemento colocando-o em baixo da imagem.
Dentro de <sub> colocamos o nome dele.
Em seguida, juntamos a imagem e o nome dentro de [] seguido do link do github em ()
Por fim, os elementos são organizados em uma 'micro tabela', obtendo como resultado algo parecido com:
Para inserir mais devs, basta adicionais mais colunas.
```
[<img src="https://avatars2.githubusercontent.com/u/46378210?s=400&u=071f7791bb03f8e102d835bdb9c2f0d3d24e8a34&v=" width=115 > <br> <sub> Diana Regina </sub>](https://github.com/Diana-ops) |
| :---: |
# Tabela de conteúdo
```
Fechando com chave de ouro
Ufa, depois de ter mais esse trabalhão escrevendo a documentação podemos fazer uma lista de conteúdos (como se fosse um sumário) lá no começo do README.md que irá ajudar o visitante a ir direto ao tópico que ele quer.
### Tabela de Conteúdos
* [Nome do tópico visivel](#nome-do-tópico)
* [Nome do tópico visivel](https://www.google.com/)
### Nome do Tópico
⚠️ Para referenciar o tópico substitua letras maiúsculas por minusculas
⚠️ Caso o tópico tenha traços, ponto de interrogação e exclamação escreva como se não tivesse, pois o markdown não consegue encontrar.
⚠️ Caso o tópico esteja acompanhado de um emoji, escreva-o ignorando o simbolo ::
```
### Tabela de Conteúdos
* [Nome do tópico visivel](https://github.com/juvenalculino/Cursos-Em-Andamento/edit/master/Git-Github/Aula%2007/README.md)
# Personalizar Perfil página inicial
## Primeiro passo
#### * Criar um repositório com o seu nome de usuário
<img src="https://github.com/juvenalculino/imagens/blob/master/img/Criar-novo-Repositório-1.png">
## Segundo passo
#### * Criar um arquivo README.md e aplicar todas as dicas anteriores
<img src="https://github.com/juvenalculino/imagens/blob/master/img/segundopasso.png">
## BY: Tauã Felipe
### Ferramentas extra
- https://readme.so/pt
- https://www.readme-templates.com/
- https://github.com/Ileriayo/markdown-badges