{"componentChunkName":"component---src-templates-blog-post-js","path":"/tudo-o-que-voce-precisa-saber-para-escrever-um-bom-readme/","result":{"data":{"markdownRemark":{"fields":{"slug":"/tudo-o-que-voce-precisa-saber-para-escrever-um-bom-readme/"},"frontmatter":{"titulo":"Tudo o que você precisa saber para escrever um bom readme!","data":"25/06/2020","tag":"Programação","image":{"childImageSharp":{"fluid":{"src":"/static/a654a082b1b0db677f824ac5ef0633e1/edb0e/readme.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuklEQVQoz5WQS0sbURTH54O4rVCoMYlxJq+5mVdyJ5kkatRC20XbSKjVNCJB06IL3YiPnSK6UHGjGxcVtWTTlorQT2Gp2lJc6raQ//TcCxZ15+LHedxzzv+cqwTCyWvCJ9BJBO5xO9fZpaMjlEB3zEbKzoOZHnQzhy7NEHkx468SVg2fQDDCZINA+DKO3I0FYuDH/SNcXV3j4tdvtFotf2d3D487NESipq8INYFuZGE6BRikrBs5MMtDyspTXJBbCBihJdI4OGxieWUdq2sb+PL1GIdHTSmsxh0oMZ1DTTgYevUW4+8mMTo8jvLLYYyN1FEj6rUGXlP8plJDZagKlcS/nXzH+Z9LnJ7+wM+zC3xqfkaoO4U4c6EI5RjjqFLz9PsZlMsjaNSnpD/9YVYKxOldbJ2kKzRaoFoZxebCIqZmFzA3v4Rnz18gmkzTFR4Ug85MEWneCzfbD0faEly3BE5k3D6Imht0p4gtU8V2Mgw9FMCj9jYEn7TR93B6L0KxeR8EFg0yMz3/rfQlvbipEWKM7EQui/mCB8t2wJgGy+FUV4RN4oqbH/S5N4CHYHqDkgzh5p9KOPmE/w9vGz0uCNkYewAAAABJRU5ErkJggg==","aspectRatio":2.3684210526315788,"srcSet":"/static/a654a082b1b0db677f824ac5ef0633e1/7e7e9/readme.png 225w,\n/static/a654a082b1b0db677f824ac5ef0633e1/62b1f/readme.png 450w,\n/static/a654a082b1b0db677f824ac5ef0633e1/edb0e/readme.png 620w","sizes":"(max-width: 620px) 100vw, 620px"}}}},"html":"

O readme do github ele utiliza a linguagem chamda Markdown. O Markdown é uma sintaxe usada para padronizar e facilitar formatação de texto na web!

\n
\n

Markdown é uma linguagem simples de marcação originalmente criada por John Gruber e Aaron Swartz Markdown converte seu texto em HTML válido.

\n
\n

O principal objetivo e tornar o mais legível possível. Com ele e possível escrever em HTML também.

\n

Mas vamos ao que interessa!

\n

\"https://media.giphy.com/media/xUA7bfa2vnt2Yj8WQg/giphy.gif\"

\n

O código fonte completo desse post se encontra aqui!!

\n

Primeiro vamos criar um arquivo chamado intro.md E escrever nosso famoso ''hello world''

\n

Para ver o preview no vscode e apenas clicar com o botão direito e ir em 'Open Preview', ouu apertar Ctrl+Shift+V

\n

IMPORTANTE!

\n

Essa não e uma lista completa ok? Vou te passar o básico para fazer um readme lindão!

\n

Caso queira ver a documentação completa, segue o link my friend! LINKZÃO.

\n

\"https://media.giphy.com/media/111ebonMs90YLu/giphy.gif\"

\n

Headers!

\n

Para escrever um Header bonitão e apenas colocar a #seu titulo.

\n

Vamos ver os diferentes tamanhos!

\n
# H1\n\n## H2\n\n### H3\n\n#### H4\n\n##### H5\n\n###### H6
\n

Exemplos:

\n

H1

\n

H2

\n

H3

\n

H4

\n

H5

\n

H6

\n

Para deixar a fonte bold - **BOLD**

\n

Códigos

\n

Para escrever Códigos inline e apenas utilizando o

\n
`Seu codigo vem aqui`
\n

Listas!

\n
- Item da lista com a bolinha na lateral\n- Item da lista com a bolinha na lateral\n\n1. Item da lista ordenada\n2. Item da lista ordenada
\n

Links!

\n

Para utilizar links e bem fácil e intuitivo!

\n
[inline style link clicando aqui você e redirecionado para o google](https://www.google.com)
\n

Exemplo: inline style link clicando aqui você e redirecionado para o google

\n

Você consegue referencia a um repositório também! Passando apenas o caminho =)

\n

Você pode colocar o link direto também funciona! https://www.google.com

\n

Imagens/Gifs

\n

E muuuuuito importante colocar imagens e gifs no seu read-me, o usuário ver um preview e muito importante!

\n
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png \"Logo Title Text 1\")
\n

\"https://media.giphy.com/media/h542OZjzDRJXVfl8F6/giphy.gif\"

\n

Inline HTML

\n

Você também pode utilizar o HTML como disse anteriormente, segue um exemplo:

\n
<h1 align=\"center\">\n H1 Centralizado com html\n</h1>
\n

\nH1 Centralizado com html\n

\n

UFAAA!!!!

\n

Agora que a gente já sabe o básico da sintaxe do Markdown, você já esta pronto para criar um ótimo READ.ME!

\n

Mas vai alguns conselhos que eu vou te dar.

\n
    \n
  1. Quando for escrever um read.me pense que esta contando uma historia, com começo meio e fim, então explique primeiro o que e o projeto, como executa ele, como ele funciona, arquitetura, tecnologias e etc..
    2. \n
  2. Use e abuse de imagens e gifs, você pode usar o screen to gif para gravar gifs.
    3. \n
  3. Informe todas as tecnologias que você utilizou em formato de listas ordenadas ou não.
    4. \n
  4. Utilize ícones, ou emojis seguindo nesse link isso da uma cara nova para seu read-me ❤️.
    5. \n
  5. Se tiver demo, coloque um preview.
    6. \n
  6. Separe por seções, como por exemplo, primeiro vem uma explicação breve, depois um preview, tecnologias, Pre-requisitos, como instalar/como usar.
    7. \n
\n

E isso, espero que tenha gostado do post de hoje!

\n

\"https://media.giphy.com/media/xjZtu4qi1biIo/giphy.gif\"

","timeToRead":3}},"pageContext":{"slug":"/tudo-o-que-voce-precisa-saber-para-escrever-um-bom-readme/","previousPost":{"fields":{"slug":"/meu-novo-projeto-urbla/"},"frontmatter":{"templateKey":"blog-post","data":"11 de Julho de 2020","tag":"Programação","titulo":"Meu novo projeto - Urbla","locale":"pt"},"timeToRead":6},"nextPost":{"fields":{"slug":"/descubra-como-nao-desenvolver-com-javascript-6-passos/"},"frontmatter":{"templateKey":"blog-post","data":"11 de Junho de 2020","tag":"Carreira","titulo":"Descubra como não desenvolver com JavaScript em 6 passos","locale":"pt"},"timeToRead":4},"locale":"pt"}}}