Executando verificação de segurança...
19

[DICA]: Como escrever artigos no TabNews.

Resumo

Se você quer escrever um post para o TabNews e não sabe como, este post pode te ajudar. Esta é a segunda versão do post, eu o editei com base nas contribuições dos comentários.

Eu decidi editá-lo pois este post aparece diretamente naquela listagem de posts na home, diferentemente dos comentários, então para facilitar seu acesso à informação, concatenei as informações num só artigo.

Introdução

Este é o meu primeiro post no TabNews e antes de realizá-lo eu li alguns posts dos usuários e observei que alguns tinham títulos, subtítulos, imagens, códigos. Fiquei curioso para saber como estilizar o texto daquela maneira e decidi fazer um post teste, no entanto, percebi que o espaço destinado à digitação dos posts não é igual ao word por exemplo, no qual você seleciona um fragmento de texto e clica num botão para definir se aquele fragmento é em negrito, itálico, ou se tem o tamanho de fonte diferente, conhecido como WYSIWYG (What you see is what you get).

Com base nas contribuições do acnahmias descobri que os artigos podem ser facilmente estilizados utilizando Markdown.

Markdown é uma linguagem de marcação leve que pode ser usada para adicionar elementos de formatação a documentos de texto simples. [...]

[...] Quando se cria um documento usando markdown, adiciona-se a sintaxe ao texto para indicar como as palavras e frases devem aparecer na versão final.

Ele também forneceu um link de um guia que contém instruções da sintaxe básica e da sintaxe extendida, então você pode pular este artigo e ler o guia diretamente, porém, em inglês. Eu não adicionei tudo que está contido no guia, então pode ser uma boa ideia apreciar tanto o artigo quanto o guia.

Turorial

Você pode estilizar o seu post utilizando html assim como eu fiz na primeira versão deste, quando não conhecia Markdown. Porém, Markdown se mostrou mais simples e prático então aconselho a sua utilização.

Títulos

Além de criar o conteúdo, separá-lo em seções e subseções tem um importante papel na qualidade do seu artigo, já que ajuda na identificação e separação de assuntos dentro do texto. Para definir um título basta usar # antes do Título. Lembre-se de deixar um espaço vazio entre o Título e o #.

MarkdownResultadoMarkdownResultadoMarkdownResultado
# Título

Título

### Título

Título

##### Título
Título
## Título

Título

#### Título

Título

###### Título
Título
Por conveção, deixe uma linha em branco antes...

# Título

... e uma depois do título.

Parágrafos

Para criar um parágrafo você só precisa digitar normalmente.

Para criar um novo parágrafo basta deixar uma linha em branco entre eles.

    Caso você queira indentar seu parágrafo você precisará utilizar uma gambiarra já que o tab tem uma funcionalidade no Markdown.

    Você precisa adicionar isso no começo do parágrafo para indentá-lo.

Ênfase

MarkdownResultado
*Itálico*Itálico
**Negrito**Negrito
***Itálico em negrito***Itálico em negrito
~Riscado~Riscado

Citações

Simples

Markdown

> O homem é a medida de todas as coisas. [Protágoras]

Resultado

O homem é a medida de todas as coisas. [Protágoras]


Multiparágrafos

Markdown

> O homem é a medida de todas as coisas.
>
> Das coisas que são enquanto são e das coisas que não são equanto não são.

Resultado

O homem é a medida de todas as coisas.

Das coisas que são enquanto são e das coisas que não são enquanto não são.


Aninhadas

Markdown

> O homem é lobo do homem [Thomas Hobbes]
>
>> O homem nasce bom e a sociedade o corrompe [Jean-Jacques Rousseau]

Resultado

O homem é lobo do homem [Thomas Hobbes]

O homem nasce bom e a sociedade o corrompe [Jean-Jacques Rousseau]


Citações com outros elementos

Markdown

> #### Lista de compras.
>
> - Arroz.
> - Feijão.
> - Ovos.
>
>  **Melhor** combinação  de *comida*!

Resultado

Lista de compras!

  • Arroz.
  • Feijão.
  • Ovos.

Melhor combinação de comida.

Código

Um bloco de código pode ser escrito entre ```(3 crases) da seguinte forma:

``` python
idade = int(input("Qual sua idade? "))
print("Maior de idade" if idade >= 18 else "Menor de idade")
```

Nesse caso você pode especificar ou não a linguagem de programação no topo para colorir termos de sintaxe.

idade = int(input("Qual sua idade? "))
print("Maior de idade" if idade >= 18 else "Menor de idade")

Ou com cada linha indentada com um tab ou 4 espaços vazios. O resultado é o seguinte:

idade = int(input("Qual sua idade? "))
print("Maior de idade" if idade >= 18 else "Menor de idade")

Linhas horizontais

Você pode adicionar linhas horizontais utilizando ---. Tome o cuidado de deixar uma linha vazia antes e depois do comando.

Markdown

Uma linha vazia antes...

---

...e outra depois.

Resultado


Para adicionar um link basta colocar o texto do link entre colchetes e logo em seguida a URL entre parênteses da seguinte forma:

Markdown

Acesse o [Tabnews](https://www.tabnews.com.br/)! É muito massa.

Resultado

Acesse o Tabnews! É muito massa.

Caso as URLs fiquem muito grandes e atrapalhem a leitura do código você pode usar uma maneira alternativa.

Markdown

Acesse o [Tabnews][1] e siga o [Biridhin][2].

[1]: https://www.tabnews.com.br/
[2]: https://www.tabnews.com.br/Biridhin/

Resultado

Acesse o Tabnews e siga o Biridhin.

URLs e endereços de e-mail

Basta colocá-los entre os sinais de maior e menor.

Markdown

<https://www.markdownguide.org>
<[email protected]>

Resultado

https://www.markdownguide.org
[email protected]

Imagens

Para adicionar uma imagem da internet você pode utilizar o seguinte comando:

Markdown

![joinha do schwarzenegger](https://conteudo.imguol.com.br/2013/03/20/montagem-do-tumblr-thumbs--ammo-mostra-o-personagem-terminator-arnold-schwarzenegger-dando-joinha-em-vez-de-apontar-uma-arma-em-cena-do-filme-o-exterminador-do-futuro-1363809846474_300x300.jpg.webp "Hasta la vista, baby!")

Resultado

Joinha

Para usar uma imagem própria, você pode usar a recomendação do Leodeymison e hospedá-la no https://pt-br.imgbb.com/, ele retorna um link que você pode utilizar no comando acima.

Listas

Ordenadas

Os números não precisam estar em ordem mas o primeiro item deve começar com o número 1.

MarkdownResultado
1. Pesquisar
2. Selecionar
3. Digitar
4. Corrigir
1. Pesquisar
2. Selecionar
3. Digitar
4. Corrigir
1. Pesquisar
1. Selecionar
1. Digitar
1. Corrigir
1. Pesquisar
2. Selecionar
3. Digitar
4. Corrigir
1. Pesquisar
8. Selecionar
6. Digitar
2. Corrigir
1. Pesquisar
2. Selecionar
3. Digitar
4. Corrigir

Você também pode criar sub itens.

Markdown

1. Pesquisar
    1. Em qual site?
    2. É confiável?
2. Selecionar
3. Digitar
    1. Em qual software?
4. Corrigir

Resultado

  1. Pesquisar
    1. Em qual site?
    2. É confiável?
  2. Selecionar
  3. Digitar
    1. Em qual software?
  4. Corrigir

Desordenadas

Markdown

- Arroz
- Feijão
- Batata
    - O que falta?
- Sucrilhos

Resultado

  • Arroz
  • Feijão
  • Batata
    • O que falta?
  • Sucrilhos

Elementos entre listas

Use tabulação, ou quatro espaços vazios.

Texto

Markdown
- Primeiro item.
- Segundo item.

    Parágrafo depois do segundo item.

- Terceiro item.
Resultado
  • Primeiro item.

  • Segundo item.

    Parágrafo depois do segundo item.

  • Terceiro item.


Citação

Markdown
- Primeiro item.
- Segundo item.

    > Citação depois do segundo item.

- Terceiro item.
Resultado
  • Primeiro item.

  • Segundo item.

    Citação depois do segundo item.

  • Terceiro item.


Bloco de código

Como o bloco de código usa um tab basta dar outro, assim, para colocar um bloco de código entre os elementos de uma lista basta dar dois tabs ou 8 espaços em branco.

Markdown
- Primeiro item.
- Segundo item.

        idade = int(input("Qual sua idade? "))
        print("Maior de idade" if idade >= 18 else "Menor de idade")
    
- Terceiro item.
Resultado
  • Primeiro item.

  • Segundo item.

      idade = int(input("Qual sua idade? "))
      print("Maior de idade" if idade >= 18 else "Menor de idade")
    
  • Terceiro item.

Emoji

Se você quiser adicionar um emoji, caso esteja no windows basta usar a combinação Win + "." Isso vai abrir uma janela flutuante na qual tu poderás escolher o emoji que tu queres.

Considerações finais

Eu estou muito grato às pessoas que colaboraram agregando a esse material e sanaram minhas dúvidas. Acredito ter dado o devido crédito aos dois ao longo do artigo, citando suas contribuições. Espero que este artigo tenha te ajudado e se você tem algo mais a acrescentar ficaria grato se o fizesse nos comentários.

3

Postando com markdown

Para quem não tem familiaridade com html, talvez seja difícil postar aqui no tabnews. Alternativamente, é possível usar uma outra linguagem que é bem mais fácil de entender e de escrever, que é o markdown.

O que é markdown

Markdown é uma linguagem de marcação leve que pode ser usada para adicionar elementos de formatação a documentos de texto simples. Criado por John Gruber em 2004, o markdown é agora uma das linguagens de marcação mais populares do mundo.

Usar markdown é diferente de usar um editor no estilo WYSIWYG, como por exemplo o Word, em que a pessoa clica em botões para formatar as palavras e frases e o resultado fica visível imediatamente. Quando se cria um documento usando markdown, adiciona-se a sintaxe ao texto para indicar como as palavras e frases devem aparecer na versão final.

Exemplos

Por exemplo, para indicar um título, basta adicionar uma cerquilha (#) na frente do texto. O número de cerquilhas determina o nível do título. O editor irá interpretar e mostrará o resultado somente quando fizer a previsualização do texto. Para negritar um texto, adiciona-se dois asteriscos (*). Para criar uma ligação, o texto aparente deve vir entre colchetes ([ ]) e a ligação deve vir entre parênteses.

Assim, o texto:

### Título 3

é visualizado como:

Título 3

Da mesma forma, o texto:

**negrito**

é visualizado como:

negrito

Para inserir uma ligação, pode-se usar o texto:

[TabNews](tabnews.com.br)

e o resultado é:

TabNews

Pode demorar um pouco para se acostumar com essa sintaxe, mas depois de um tempo, percebe-se que é bem mais rápido de formatar um texto usando essa filosofia do que editando em uma aplicação no estilo WYSIWYG.

Comparação com html

É importante anotar que, em alguns aspectos, markdown é parecido com html. Mas é muito mais fácil escrever usando markdown do que html. Aliás, alguns exemplos que o Biridhin7 usou, na verdade são exemplos de markdown. Os códigos referidos como sendo do whatsapp na verdade são códigos markdown que foram emprestados pela Meta (ex-Facebook) para viabilizar a formatação simples dentro do Whatsapp.

Assim, o código markdown:

### Título 3

é equivalente ao código html:

<h3>Título 3</h3>

é ambos são visualizados como:

Título 3

Da mesma forma, o texto:

**negrito**

é equivalente ao código html:

<b>negrito</b>

é ambos são visualizados como:

negrito

Conclusão

Em resumo, apesar de ser possível postar aqui no tabnews usando html, é muito mais fácil usar markdown.

A pessoa pode ir escrevendo o texto usando as marcações especiais e ir visualizando clicando no botão Preview que fica no canto superior esquerdo da caixa de edição.

Quem estiver interessado em saber mais, pode acessar um bom Guia Markdown, escrito em inglês. A página de sintaxe básica traz todos os comandos básicos, com os quais já é possível formatar qualquer texto relativamente bem. Quem preferir fazer formatações mais elaboradas pode dar uma olhada na sintaxe extendida, que adiciona muitos elementos de formtação.

Quem preferir o bom e velho português, pode acessar uma boa intrudução ao Markdown.

1
3
2

Legal, bem útil

Mas aparentemente não tem todos plugins ainda, como o de matemática (que parece Latex):

Por enquanto fica assim:

$$
\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

EDIT: Não digo isso como uma crítica, só uma observação


Não esqueça do café c[_]
DBL

1
3

Olá Biridhin! Escrevi um artigo e precisei usar imagens, e fiz da seguinte forma:

Entre as aspas você coloca o link da imagem que você quer. Se a imagem for do google você pode fazer assim: Botão direito do mouse em cima da foto e selecione a opção copiar endereço de imagem.



Se você quiser uma imagem própria, você pode usar qualquer site que hospede imagem e te retorna um link, como esse:
https://pt-br.imgbb.com/


Selecione a opção HTML completo depois de enviar, e só copiar.

bônus

Para que o link abra em outra aba, coloque a tag target="_blank" na tag a de link.
0
2
1

Contribuição sensacional!!! Gostaria de complementar que usamos também o GFM e isso adiciona algumas coisas, por exemplo:

Tabelas

SyntaxDescription
HeaderTitle
ParagraphText

Tasks

  • Write the press release
  • Update the website
  • Contact the media

Diagramas com Mermeid

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Como fazer isso pode ser encontrado aqui: https://bytemd.js.org/playground/

1
1
1