🎓 Markdown Moderno para Computação

"A documentação técnica deixou de ser um anexo para se tornar o coração da engenharia de software moderna."

Bem-vindo à sua jornada no domínio da linguagem de marcação mais utilizada no mundo Dev. Este curso foi projetado para capacitar programadores e analistas a criar documentações ricas, diagramas dinâmicos e apresentações profissionais usando Markdown Moderno.

⚡ Atalhos Rápidos

Trilha de Aulas --- 16 lições modernas englobando do básico ao avançado. Iniciar Jornada
Slides Interativos --- Material visual otimizado com transições e suporte Reveal.js. Ver Slides
Quizzes e Prática --- Avalie seu progresso com 160 questões técnicas exclusivas. Testar Conhecimento
Laboratórios e Projetos --- Aplique conceitos em cenários reais de documentação. Ver Projetos
Exercícios Progressivos --- Das questões conceituais ao desafio prático de código. Praticar Agora
Setup e Ferramentas --- Configurações essenciais para VS Code e Ecossistema MkDocs. Configurar

🗺️ Mapa da Jornada (Módulos)

O curso está estruturado em 4 Módulos cruciais para a maestria em documentação:

📦 Módulo 1: Fundamentos e Escrita Técnica

A base sólida para toda documentação profissional. - Aulas 01 a 04: Introdução, Sintaxe Básica, Boas Práticas e Markdown para Programação.

📐 Módulo 2: Estrutura e Dados

Organizando informações complexas com elegância. - Aulas 05 a 08: Tabelas, Integração com GitHub, Markdown Estendido e Projeto Intermediário.

🧠 Módulo 3: Visualização e Ciência

Transformando texto em insights visuais e fórmulas. - Aulas 09 a 12: Diagramas Mermaid (Básico/Avançado), MathJax e Conteúdo Acadêmico.

💻 Módulo 4: Automação e Entrega

O topo da cadeia: apresentações e ambientes interativos. - Aulas 13 a 16: Slides com Reveal.js, Termynal.js e Projeto Integrador Final.

💡 Dicas de Sucesso

Pratique no VS Code: Use a extensão Markdown Preview para ver as mudanças em tempo real.
Abuse do Mermaid: Diagramas facilitam a compreensão de fluxos de código complexos.
Mantenha a Semântica: Use headers e listas corretamente para garantir a acessibilidade.

Pronto para dominar o Markdown? Ir para Aula 01

Plano de Ensino 📅

Curso: Markdown Moderno para Computação (ADS Extra)

Ementa

Módulo 1: Fundamentos e Organização: Fluxo de trabalho moderno (Docs as Code), sintaxe básica, estruturação de repositórios e READMEs, Markdown para programação.
Módulo 2: Estrutura Técnica e GitHub: Tabelas e organização de requisitos, integração nativa com GitHub (Issues, PRs, badges) e Markdown estendido (HTML embutido, notas de rodapé).
Módulo 3: Diagramação e Ciência: Diagramas com Mermaid.js (fluxogramas, sequência, Gantt, mindmaps), fórmulas científicas com MathJax e padrões de Markdown acadêmico.
Módulo 4: Documentação Interativa: Apresentações dinâmicas com Reveal.js, simulações de terminal com Termynal.js e projeto integrador de portfólio.

Cronograma (16 Aulas)

Módulo 1: Fundamentos e Organização

Aula 01: Introdução ao Markdown
Aula 02: Sintaxe Básica: Textos, Títulos e Listas
Aula 03: Organização e Boas Práticas
Aula 04: Markdown para Programação

Módulo 2: Estrutura Técnica e GitHub

Aula 05: Tabelas e Estrutura Técnica
Aula 06: Markdown + GitHub
Aula 07: Markdown Estendido
Aula 08: Projeto Intermediário

Módulo 3: Diagramação e Ciência

Aula 09: Mermaid na Prática: Fluxogramas
Aula 10: Mermaid Avançado
Aula 11: MathJax: Fórmulas Médicas e Científicas
Aula 12: Markdown Acadêmico

Módulo 4: Documentação Interativa

Aula 13: Apresentações com Reveal.js
Aula 14: Termynal.js Interativo
Aula 15: Projeto Integrador Final
Aula 16: Finalização e Próximos Passos

Avaliação

Exercícios: 16 listas de exercícios de fixação da sintaxe e das ferramentas.
Projetos: 16 mini-projetos práticos de documentação.
Quizzes: 16 testes de verificação de conhecimento.
Projeto Integrador: Construção de um repositório de portfólio completo, documentado com Markdown avançado, diagramas Mermaid e apresentação interativa.

Aulas

Aulas do Curso 📚

Acompanhe as 16 aulas do curso de Markdown Moderno, organizadas por módulos para uma progressão cognitiva eficiente.

Aula 01 - Introdução ao Markdown 🚀

Objetivo

Objetivo: Entender o que é Markdown, sua importância na computação moderna, ferramentas essenciais e como ele simplifica a criação de documentação técnica.

1. O que é Markdown? 🤔

O Markdown foi criado em 2004 por John Gruber e Aaron Swartz com uma missão simples: permitir que as pessoas escrevam usando um formato de texto simples e fácil de ler, que pudesse ser convertido em HTML estruturado.

Ao contrário de editores como Word (WYSIWYG - What You See Is You Get), o Markdown foca no conteúdo e na estrutura, não apenas na aparência imediata.

🌟 Por que aprender Markdown?

Universalidade: Funciona em qualquer editor de texto.
Portabilidade: Fácil de converter para PDF, HTML, Slides e até E-books.
Padrão de Mercado: É a alma do GitHub, GitLab, StackOverflow e ferramentas de documentação como MkDocs e Docusaurus.

2. Onde o Markdown é Utilizado? 🌍

O Markdown está em todo lugar no ecossistema de desenvolvimento:

Documentação de Código: Arquivos README.md que explicam projetos.
Comunicação Técnica: Issues e Pull Requests no GitHub.
Blogs e Sites Estáticos: Hugo, Jekyll e Astro.
Ferramentas de Produtividade: Notion, Obsidian e Slack.

3. Ferramentas e Editores 🛠️

Embora você possa escrever Markdown no Bloco de Notas, ferramentas modernas elevam sua produtividade:

VS Code: O rei dos editores, com extensões poderosas de Live Preview.
Typora: Um editor minimalista e focado.
Obsidian: Para gestão de conhecimento.

Fluxo de Trabalho com MkDocs

No nosso curso, utilizaremos o MkDocs, que transforma seus arquivos .md em um site profissional automaticamente.

4. Estrutura do Ecossistema 🏗️

Markdown não é apenas texto; ele pode conter elementos avançados através de extensões.

mermaid graph TD MD[Markdown Simples] --> HTML[HTML Estruturado] MD --> EX[Extensões] EX --> MM[Mermaid - Diagramas] EX --> MJ[MathJax - Matemática] EX --> TERM[Termynal - Terminal] HTML --> SITE[Site/Documentação]

5. Exemplo de Simulação de Terminal 🐚

Veja como simulamos a criação de um novo arquivo Markdown:

$ touch introducao.md
$ echo "# Ola Mundo" > introducao.md
$ cat introducao.md
# Ola Mundo

6. Mini-Projeto: Meu Primeiro README 🎨

Sua missão hoje é criar um arquivo README.md simples que contenha: 1. Um título principal. 2. Uma breve descrição sobre você. 3. Uma lista de tecnologias que você quer aprender.

Important

Salve este arquivo para usarmos na próxima aula!

7. Exercícios de Fixação 🧠

O que diferencia o Markdown de um editor de texto comum como o Google Docs?
Cite três plataformas que utilizam Markdown nativamente.
Qual a extensão de arquivo padrão para documentos Markdown?

Próxima Aula: Vamos colocar a mão na massa com a Sintaxe Básica! ✍️

Aula 02 - Sintaxe Básica: Textos, Títulos e Listas ✍️

Objetivo

Objetivo: Dominar a formatação básica de texto, a hierarquia de títulos e a organização de informações em listas ordenadas e não ordenadas.

Hierarquia Visual

mermaid graph TD H1[# Título 1] --> H2[## Título 2] H2 --> H3[### Título 3] H3 --> H4[#### Título 4]

1. Títulos (Headers) 🏗️

Markdown usa o símbolo # para criar títulos. A quantidade de hifens determina o nível (H1 a H6).

# Título Nível 1 (H1)
## Título Nível 2 (H2)
### Título Nível 3 (H3)

2. Formatação de Texto ✨

Dê ênfase ao que importa e destaque trechos de código curtos:

Negrito: Use dois asteriscos **texto** ou dois underscores __texto__.
Itálico: Use um asterisco *texto* ou um underscore _texto_.
~~Tachado~~: Use dois tils ~~texto~~.
Código Inline: Use crases (backticks) `texto`.

3. Listas 📝

Listas Não Ordenadas

Use asteriscos, sinais de mais ou menos: - Item A - Item B

Listas Ordenadas

Use números seguidos de ponto: 1. Primeiro passo 2. Segundo passo

4. Prática no Terminal 🐚

Simule a criação de uma estrutura de tópicos básica no Linux/Windows:

$ echo "# Meus Estudos" > notas.md
$ echo "## Aula 02" >> notas.md
$ echo "- Aprendendo negrito" >> notas.md
$ cat notas.md
# Meus Estudos
## Aula 02
- Aprendendo negrito

5. Exercício de Fixação 🧠

Crie um novo arquivo chamado aula02_exercicio.md e formate um pequeno parágrafo sobre seu livro ou filme favorito, usando pelo menos um título, uma lista e negrito em palavras-chave.

Próxima Aula: Vamos aprender sobre Links e Imagens! 🔗

Aula 03 - Organização e Boas Práticas 📂

Objetivo

Objetivo: Aprender a estruturar projetos complexos com múltiplos arquivos Markdown, criar links internos inteligentes e desenvolver READMEs que chamam a atenção pela clareza e profissionalismo.

1. Estrutura de Documentação 🧱

À medida que um projeto cresce, um único arquivo .md não é suficiente. Devemos dividir o conteúdo logicamente.

Exemplo de Estrutura de Pastas

$ ls -R meu-projeto
docs/
├── intro.md
├── instalacao.md
└── configuracao.md
README.md

2. Arquivos Interligados 🔗

Para criar uma navegação fluida entre seus arquivos, use links relativos.

Link para arquivo na mesma pasta: [Instalação](instalacao.md)
Link para arquivo em pasta acima: [Início](../../README.md)
Link para uma seção específica: [Pular para Configuração](#configuracao)

3. O README Profissional 🐙

O README.md é a primeira impressão do seu projeto no GitHub.

Elementos Essenciais:

Título e Badges: Para status do projeto e versão.
Descrição Curta: O que o projeto faz?
Principais Funcionalidades: Em listas.
Imagens ou GIFs: Demonstração visual.
Instruções de Uso: Como rodar?

4. Blocos de Destaque e Admonitions 💡

O MkDocs suporta blocos especiais para atrair a atenção do leitor:

Nota

Isso é uma informação útil.

Atenção

Cuidado com este passo!

Important

Use emojis moderadamente para guiar o olhar do usuário, não para poluir o texto.

5. Visualização de Fluxo de Documentação 🧜‍♀️

mermaid graph LR R[README.md] --> I[Introdução] I --> G[Guia de Uso] G --> A[API Reference] G --> F[FAQ]

6. Simulação de Criação de README 🐚

$ echo "# Meu Projeto Incrível 🚀" > README.md
$ echo "## Funcionalidades" >> README.md
$ echo "- [x] Login rápido" >> README.md
$ cat README.md

7. Mini-Projeto: Documentando seu Projeto 🏗️

Sua tarefa hoje é criar a docs/ do seu repositório de estudos: 1. Crie um arquivo index.md (Página principal). 2. Crie um arquivo guia-rapido.md. 3. Adicione links no index.md que apontem para o guia-rapido.md. 4. Use pelo menos um bloco de "Dica" (!!! tip) ou "Aviso" (!!! warning).

8. Exercícios de Fixação 🧠

Por que é importante dividir a documentação em múltiplos arquivos?
Como se cria um link que aponta para uma seção específica (ID) de um arquivo?
O que são Badges e qual sua utilidade no GitHub?

Próxima Aula: Vamos mergulhar no Markdown para Programação! 💻

Aula 04 - Markdown para Programação 💻

Objetivo

Objetivo: Aprender a utilizar blocos de código, aplicar destaque de sintaxe para diferentes linguagens, documentar APIs e utilizar o Termynal para simulações de linha de comando.

1. Blocos de Código e Sintaxe ⚙️

Existem duas formas de representar código:

Código Inline: Use crases simples ` para pequenos trechos (ex: variable_name).
Blocos de Código: Use cercas de crase (fenced code blocks) com três crases ```.

Destaque de Sintaxe (Syntax Highlighting)

Indique a linguagem após as primeiras crases para que o Markdown aplique cores automáticas.

def saudacao():
    print("Olá, Mundo!")

const soma = (a, b) => a + b;

2. Documentação de APIs 📡

Markdown é perfeito para descrever endpoints e contratos de dados.

Exemplo de Documentação de Endpoint:

GET /usuarios Retorna a lista de usuários cadastrados.

Campo	Tipo	Descrição
`id`	Integer	ID único do usuário
`nome`	String	Nome completo

3. Simulação de Terminal (TermynalJS) 🐚

Em documentações técnicas, mostrar a saída do terminal ajuda muito o desenvolvedor.

$ npm install markdown-it
$ mkdir docs
$ ls -l
total 0
drwxr-xr-x 1 user staff 0 Feb 19 23:30 docs

4. Diferenciando Saída e Entrada 📊

Ao documentar, deixe claro o que é o comando e o que é a resposta do sistema.

# Comando do usuário
git status

# Saída do sistema
On branch main
nothing to commit, working tree clean

5. Fluxo de Desenvolvimento (Mermaid) 🧜‍♀️

```mermaid sequenceDiagram participant Dev as Desenvolvedor participant Doc as Documentaçao .md participant Server as Servidor MkDocs

Dev->>Doc: Escreve código no bloco
Doc->>Server: Processa Destaque de Sintaxe
Server-->>Dev: Exibe código colorido no site

```

6. Mini-Projeto: Documentando um Código 🏗️

Escolha um pequeno trecho de código em qualquer linguagem que você conheça e documente-o: 1. Use um título H2 com o nome da função. 2. Adicione um parágrafo explicando o que o código faz. 3. Insira o código em um bloco com o destaque de sintaxe correto. 4. Crie uma pequena tabela descrevendo os parâmetros de entrada e o retorno.

7. Exercícios de Fixação 🧠

Qual a diferença entre código inline e blocos de código?
Como indicar ao Markdown que o código escrito é em linguagem Go?
Por que documentar o retorno (output) do terminal é importante em um tutorial técnico?

Próxima Aula: Vamos iniciar o Módulo 2 com Tabelas e Estrutura Técnica! 📊

Aula 05 - Tabelas e Estrutura Técnica 📊

Objetivo

Objetivo: Aprender a construir e formatar tabelas complexas no Markdown, utilizar checklists para gestão de tarefas e organizar requisitos técnicos de forma estruturada.

1. Tabelas no Markdown 📊

Tabelas são formadas por barras verticais (|) e hifens (-) para a linha separadora do cabeçalho.

Exemplo Básico:

Nome	Idade	Cidade
Ricardo	35	São Paulo
Maria	28	Curitiba

Alinhamento 📏

:--- : Alinhamento à esquerda (padrão).
:---: : Alinhamento centralizado.
---: : Alinhamento à direita.

2. Checklists (Listas de Tarefas) ✅

Muito úteis para documentar o que já foi feito em um projeto ou definir requisitos.

Requisito 01 (Concluído)
Requisito 02 (Pendente)
Requisito 03

3. Organização de Requisitos Técnicos 🧱

Ao documentar um software, organizar os requisitos em tabelas facilita a leitura rápida dos Stakeholders.

Tabela de Requisitos Funcionais:

ID	Descrição	Prioridade
RF01	O usuário deve poder fazer login	Alta
RF02	O sistema deve enviar e-mail de confirmação	Média

4. Visualização de Estrutura (Mermaid) 🧜‍♀️

mermaid graph TD T[Tabelas] --> C[Cabeçalho] T --> A[Alinhamento] T --> D[Dados] Check[Checklists] --> S[Status: x ou vazio]

5. Simulação de Criação de Tabela 🐚

$ echo "| ID | Nome |" > tabela.md
$ echo "| --- | --- |" >> tabela.md
$ echo "| 01 | Markdown |" >> tabela.md
$ cat tabela.md
| ID | Nome |
| --- | --- |
| 01 | Markdown |

6. Mini-Projeto: Dashboard de Projeto 🏗️

Crie uma página de status para um projeto fictício contendo: 1. Um título H1 com o nome do projeto. 2. Uma Tabela com o cronograma (Data, Atividade, Responsável). 3. Uma Checklist com o que já foi desenvolvido. 4. Um link para a documentação completa (Aula 03).

7. Exercícios de Fixação 🧠

Como centralizar o conteúdo de uma coluna em uma tabela?
Qual a diferença visual entre [ ] e [x] no GitHub?
É possível colocar links ou negrito dentro de uma célula de tabela? (Dica: Teste!)

Próxima Aula: Vamos explorar o Markdown + GitHub! 🐙

Aula 06 - Markdown + GitHub 🐙

Objetivo

Objetivo: Explorar como o Markdown é utilizado nativamente no GitHub para gerenciar projetos, criar Issues e Pull Requests colaborativos, e utilizar Badges para status de projeto.

1. Issues e Pull Requests 📝

No GitHub, quase todo campo de texto aceita Markdown. Isso permite que você crie relatórios de erros (bugs) ou solicitações de recursos (features) muito bem documentados.

Dicas para Issues:

Use H2 para descrever o problema.
Use Blocos de Código para mostrar o erro ou o comportamento esperado.
Use Checklists para listar os passos para reproduzir o bug.

2. Menções e Referências 👤

Você pode interagir com outros desenvolvedores e outras partes do projeto usando sintaxes especiais:

@usuário: Menciona alguém diretamente.
#número: Faz um link automático para uma Issue ou Pull Request (ex: #15).
SHA: Colar o hash de um commit cria um link automático para ele.

3. Badges Profissionais 🎖️

Os badges são imagens dinâmicas que mostram o estado do seu projeto. O site mais famoso para isso é o Shields.io.

Exemplos comuns:

Build:
Versão:
Licença:

4. Markdown no fluxo de CI/CD (Mermaid) 🧜‍♀️

mermaid graph LR C[Push Code] --> G[GitHub Actions] G --> B[Build Test] B -->|Sucesso| BDG[Update Badge Green] B -->|Falha| BDR[Update Badge Red] BDG --> R[README.md] BDR --> R

5. Simulação de Comentário em PR 🐚

$ echo "Review concluído!" > comentario.md
$ echo "Solicito os seguintes ajustes:" >> comentario.md
$ echo "- [ ] Corrigir identação na linha 42" >> comentario.md
$ cat comentario.md
Review concluído!
Solicito os seguintes ajustes:
- [ ] Corrigir identação na linha 42

6. Mini-Projeto: Criando um Template de Issue 🏗️

Crie um arquivo bug_report.md que sirva como modelo para relatar erros em um projeto: 1. Um título claro (H1). 2. Seção "Comportamento Atual" e "Comportamento Esperado" (H2). 3. Uma checklist "Passos para Reproduzir". 4. Um bloco de código para "Logs de Erro". 5. Um badge fictício de "Prioridade: Crítica".

7. Exercícios de Fixação 🧠

O que acontece quando você escreve Fixes #10 na descrição de um Pull Request?
Como você pode mencionar um colega de equipe em um comentário de código no GitHub?
Qual a vantagem de usar Badges em vez de apenas escrever o status do projeto como texto?

Próxima Aula: Vamos mergulhar no Markdown Estendido! ➕

Aula 07 - Markdown Estendido ➕

Objetivo

Objetivo: Conhecer as extensões poderosas do Markdown, incluindo o uso de HTML embutido para controle visual fino, o uso avançado de Emojis e a criação de notas de rodapé profissionais para documentos técnicos e acadêmicos.

1. HTML dentro do Markdown 🌐

O Markdown é projetado para ser compatível com HTML. Se a sintaxe básica não for suficiente para o que você precisa (ex: uma cor específica ou um layout complexo), você pode usar tags HTML diretamente.

Exemplo de Cor e Centralização:

Este texto é vermelho e centralizado via HTML!

Warning

Use HTML apenas quando necessário. O excesso de HTML torna o arquivo .md difícil de ler em sua forma bruta.

2. Emojis Avançados 😎

Além de copiar e colar emojis, muitas plataformas suportam os "shortcodes" (nomes entre dois pontos).

:rocket: -> 🚀
:bulb: -> 💡
:white_check_mark: -> ✅

Recomendação de Uso:

Use emojis para criar uma hierarquia visual ou para indicar o tipo de conteúdo (ex: ⚠️ para alertas).

3. Notas de Rodapé (Footnotes) 📝

Essenciais para referências bibliográficas ou explicações técnicas que não devem interromper o fluxo da leitura principal.

Sintaxe:

Aqui está uma afirmação importante¹.

4. Visualização de Processamento (Mermaid) 🧜‍♀️

mermaid graph TD MD[Markdown Puro] --> Parser[Processador de Markdown] HTML[HTML Raw] --> Parser EMO[Shortcodes Emoji] --> Parser Parser --> FINAL[Documento Renderizado]

5. Simulação de Uso de HTML 🐚

$ echo "<u>Texto Sublinhado</u>" > teste.md
$ echo "<sub>Subscrito</sub>" >> teste.md
$ cat teste.md
<u>Texto Sublinhado</u>
<sub>Subscrito</sub>

6. Mini-Projeto: Documento Acadêmico Estilizado 🏗️

Crie um arquivo academic.md simulando um pequeno artigo: 1. Um título centralizado usando <h1 align="center">. 2. Um termo técnico que use uma nota de rodapé para sua definição. 3. Um aviso importante usando um emoji :warning:. 4. Uma lista de referências no final do documento.

7. Exercícios de Fixação 🧠

Qual o risco de usar muito código HTML dentro de um arquivo Markdown?
Como se cria uma nota de rodapé e como se faz a referência a ela no meio do texto?
O código   serve para quê no Markdown?

Próxima Aula: Vamos consolidar tudo no Projeto Intermediário! 🏗️

Esta é a explicação detalhada que aparecerá no rodapé da página. ↩

Aula 08 - Projeto Intermediário 🏗️

Objetivo

Objetivo: Consolidar todos os conhecimentos adquiridos nos Módulos 1 e 2 (Sintaxe Básica, Organização, Programação, Tabelas e GitHub) através da criação de uma documentação técnica completa para um pequeno sistema de software.

1. O Desafio do Projeto 🏆

Nesta aula prática, você não aprenderá comandos novos, mas sim como aplicar tudo o que vimos para criar um produto final profissional. Você deverá documentar um sistema fictício chamado "TaskMaster CLI" (ou um projeto de sua escolha).

O que deve ser documentado?

README.md: Visão geral e badges.
Guia de Instalação: Comandos de terminal e pré-requisitos.
Referência Técnica: Tabelas de parâmetros e exemplos de código.
Status do Projeto: Checklists de funcionalidades.

2. Checklist de Qualidade ✅

Antes de considerar sua documentação pronta, verifique se ela atende aos seguintes critérios: - [ ] Possui uma hierarquia de títulos clara. - [ ] Utiliza negrito e itálico para destacar termos importantes. - [ ] Contém pelo menos uma tabela técnica. - [ ] Apresenta blocos de código com destaque de sintaxe correto. - [ ] Utiliza links relativos para navegar entre os arquivos. - [ ] Possui pelo menos um diagrama Mermaid de fluxo.

3. Estrutura Recomendada (Mermaid) 🧜‍♀️

4. Dicas de Ouro para sua Documentação 💡

Consistência: Use o mesmo estilo de títulos em todos os arquivos.
Escaneabilidade: Parágrafos curtos e muitas listas.
Visual: Use emojis para sinalizar seções de "Dica" ou "Aviso".
Badges: Utilize o Seals.io para mostrar que sua documentação está "100% Completa".

5. Simulação de Finalização de Versão 🐚

$ git add .
$ git commit -m "docs: finaliza projeto intermediário"
$ git tag -a v0.5 -m "Versão intermediária da documentação"
$ git push origin main --tags

6. Mini-Projeto: O Projeto Intermediário 🚀

Esta aula É o mini-projeto. Siga os requisitos detalhados na seção Projeto 08.

7. Exercícios de Reaproveitamento 🧠

Revise seu arquivo aula-01.md. O que você mudaria nele usando o que aprendeu sobre Tabelas e Badges na Aula 06?
Como a organização de arquivos em pastas (Aula 03) ajudou você a não se perder neste projeto intermediário?

Explicação: Na próxima aula, iniciaremos o Módulo 3 focando em Diagramas com Mermaid! 🧜‍♀️

Aula 09 - Mermaid na Prática: Fluxogramas 🧜‍♀️

Objetivo

Objetivo: Dominar a criação de fluxogramas (flowcharts) usando a sintaxe Mermaid diretamente no Markdown, aprendendo a representar decisões, processos e conexões lógicas de forma visual.

1. O que é Mermaid? 🧜‍♀️

Mermaid é uma ferramenta baseada em JavaScript que renderiza definições de texto inspiradas no Markdown para criar diagramas complexos. Ela permite que sua documentação tenha gráficos que acompanham as mudanças do texto, sem precisar de editores de imagem externos.

2. Estrutura Básica de um Fluxograma 🧱

Para iniciar um diagrama Mermaid, use o bloco de código com o identificador mermaid. O fluxograma começa com graph ou flowchart, seguido pela direção do fluxo.

Direções Comuns:

LR (Left to Right): Da esquerda para a direita.
TD ou TB (Top Down / Top to Bottom): De cima para baixo.
RL (Right to Left): Da direita para a esquerda.
BT (Bottom to Top): De baixo para cima.

3. Tipos de Nós (Nodes) 📦

O formato do nó define seu significado lógico:

ID[Texto]: Retângulo (Processo).
ID(Texto): Cantos arredondados (Início/Fim).
ID{Texto}: Losango (Decisão).
ID((Texto)): Círculo.

4. Conexões e Setas ➡️

A --> B: Seta simples.
A --- B: Linha sem seta.
A -- Texto --> B: Seta com descrição.
A ==> B: Seta espessa.

Exemplo de Fluxo de Decisão:

mermaid graph TD A(Início) --> B{Tem café?} B -- Sim --> C[Beber café] B -- Não --> D[Fazer café] C --> E(Trabalhar) D --> E

5. Simulação de Criação de Diagrama 🐚

$ echo "graph LR" > fluxo.mermaid
$ echo "    A --> B" >> fluxo.mermaid
$ cat fluxo.mermaid
graph LR
    A --> B

6. Mini-Projeto: Fluxograma de Sistema 🏗️

Crie um diagrama de fluxo que represente o processo de "Login de Usuário": 1. Comece com um nó arredondado "Início". 2. Siga para um nó de processo "Digitar Credenciais". 3. Adicione um nó de decisão "Senha Correta?". 4. Conecte o "Sim" ao "Acesso Autorizado" e o "Não" de volta ao "Digitar Credenciais". 5. Use a direção TD (Top Down).

7. Exercícios de Fixação 🧠

O que significa a sigla LR na definição de um gráfico Mermaid?
Como representar um nó de decisão (losango) na sintaxe Mermaid?
Qual a vantagem de escrever diagramas em texto (código) em vez de usar uma imagem .png?

Próxima Aula: Vamos explorar o Mermaid Avançado com diagramas de sequência! ⚡

Aula 10 - Mermaid Avançado ⚡

Objetivo

Objetivo: Expandir o uso do Mermaid para diagramas de sequência (interação entre sistemas), gráficos de Gantt (gestão de tempo) e Mapas Mentais, além de aprender a estilizar diagramas com CSS.

1. Diagramas de Sequência 🛡️

Representam como diferentes partes de um sistema (atores e participantes) interagem ao longo do tempo através de mensagens.

Sintaxe Básica:

participant: Define um componente.
actor: Define um usuário ou entidade externa.
A ->> B: Mensagem síncrona.
A -->> B: Resposta.

```mermaid sequenceDiagram actor Usuario participant App participant DB

Usuario->>App: Solicita Login
App->>DB: Verifica Credenciais
DB-->>App: OK
App-->>Usuario: Acesso Liberado

```

2. Gráficos de Gantt 📅

Excelentes para cronogramas de projetos dentro da documentação.

mermaid gantt title Cronograma de Estudo dateFormat YYYY-MM-DD section Basico Aula 01-04 :a1, 2024-03-01, 7d section Avancado Aula 09-12 :a2, after a1, 5d

3. Mapas Mentais (Mindmaps) 🧠

Uma forma rápida de organizar ideias e categorias.

mermaid mindmap root((Markdown)) Sintaxe Basica Estendida Ferramentas VS Code MkDocs Diagramas Mermaid PlantUML

4. Estilização de Nós (Styling) 💅

Você pode aplicar cores, bordas e estilos específicos aos nós usando o comando style.

Exemplo:

style A fill:#f9f,stroke:#333,stroke-width:4px

5. Simulação de Sequência Técnica 🐚

$ echo "sequenceDiagram" > seq.mermaid
$ echo "    Alice ->> Bob: Hello" >> seq.mermaid
$ cat seq.mermaid
sequenceDiagram
    Alice ->> Bob: Hello

6. Mini-Projeto: Mapa Mental de Carreira 🏗️

Crie um arquivo carreira.md contendo um mapa mental Mermaid: 1. O centro (Root) deve ser "Tecnologia". 2. Crie ramificações para "Frontend", "Backend" e "Soft Skills". 3. Dentro de cada ramificação, adicione 2 itens (ex: Frontend -> React, Vue).

7. Exercícios de Fixação 🧠

Qual a diferença entre participant e actor em um diagrama de sequência?
Para que serve o comando dateFormat em um gráfico de Gantt?
Como você mudaria a cor de fundo de um nó chamado B para amarelo (#ffff00)?

Próxima Aula: Vamos sair dos gráficos e entrar na matemática com MathJax! 🔢

Aula 11 - MathJax: Fórmulas Médicas e Científicas 🔢

Objetivo

Objetivo: Aprender a representar fórmulas matemáticas, químicas e médicas complexas usando a sintaxe MathJax (LaTeX) dentro do Markdown, essencial para documentação científica e técnica.

1. O que é MathJax? 🔢

O MathJax é um motor de exibição JavaScript para matemática que funciona em todos os navegadores. Ele permite que você escreva equações usando a sintaxe LaTeX, que é o padrão da indústria acadêmica.

2. Sintaxe Básica ✍️

Existem duas formas de exibir fórmulas:

Inline (em linha): Use o cifrão simples $. Exemplo: $E = mc^2$
Display (bloco): Use o cifrão duplo $$. Exemplo: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

3. Comandos Comuns do LaTeX 🛠️

Frações: \frac{numerador}{denominador} -> $\frac{1}{2}$
Potência: x^2 -> $x^2$
Subscrito: H_{2}O -> $H_{2}O$
Raiz Quadrada: \sqrt{x} -> $\sqrt{x}$
Somas e Limites: \sum, \lim

4. Aplicações Médicas e Científicas 🏥

O Markdown com MathJax é amplamente usado para documentar: - Fórmulas de cálculo de dosagem de medicamentos. - Representações de reações químicas. - Equações físicas em artigos técnicos.

Exemplo de Reação Química:

\[ 2H_2 + O_2 \rightarrow 2H_2O \]

5. Visualização de Fluxo (Mermaid) 🧜‍♀️

mermaid graph LR MD[Markdown + LaTeX] --> MJ[Motor MathJax] MJ --> WEB[Equaçao Elegante no Navegador]

6. Simulação de Cálculo de IMC 🐚

$ echo "IMC = \frac{peso}{altura^2}" > formula.md
$ cat formula.md
IMC = \frac{peso}{altura^2}

7. Mini-Projeto: Folha de Fórmulas 🏗️

Crie um arquivo formulas.md que contenha: 1. Um título H1 "Manual de Fórmulas Científicas". 2. Uma seção para Física com a fórmula da Força ($F = m \cdot a$). 3. Uma seção para Química com a fórmula da Glicose ($C_6H_{12}O_6$). 4. Uma seção para Matemática com a área do círculo ($A = \pi r^2$). 5. Use blocos de destaque !!! info para explicar cada fórmula.

8. Exercícios de Fixação 🧠

Qual a diferença visual entre usar $ e $$ no MathJax?
Como se escreve a fração "três quartos" em sintaxe LaTeX?
O MathJax é habilitado por padrão em todos os leitores de Markdown? (Dica: Pense no MkDocs).

Próxima Aula: Vamos aplicar isso tudo no Markdown Acadêmico! 🎓

Aula 12 - Markdown Acadêmico 🎓

Objetivo

Objetivo: Aprender a estruturar documentos acadêmicos e relatórios técnicos longos em Markdown, utilizando recursos como sumários automáticos, citações bibliográficas e organização seguindo padrões (como ABNT simplificada).

1. Estrutura de Documentos Longos 📚

Para documentos extensos (TCCs, Artigos, Relatórios), a hierarquia de títulos é sua melhor amiga.

H1: Título do Trabalho.
H2: Capítulos/Seções Principais.
H3: Subseções.

Sumário Automático (TOC)

No MkDocs, o sumário é gerado automaticamente na barra lateral. Mas você pode adicionar um [TOC] se o plugin estiver habilitado.

2. Citações e Referências 🏷️

Documentos acadêmicos exigem a citação de fontes.

Bloco de Citação (Blockquote)

Use o sinal de maior que > para citações diretas.

"A ciência é o que sabemos; a filosofia é o que não sabemos." — Bertrand Russell

3. Notas de Rodapé Revisitadas 📝

Conforme vimos na Aula 07, as notas de rodapé são ideais para citações bibliográficas¹.

4. Tabelas de Dados Pesquisados 📊

Use tabelas para comparar resultados de experimentos ou estudos de caso.

Variável	Grupo Controle	Grupo Experimental
Eficácia	45%	89%

5. Visualização de Estrutura de Artigo (Mermaid) 🧜‍♀️

mermaid graph TD T[Título] --> R[Resumo] R --> I[Introduçao] I --> D[Desenvolvimento] D --> C[Conclusao] C --> B[Referências]

6. Simulação de Exportação Acadêmica 🐚

Muitos acadêmicos usam o Pandoc para converter Markdown em PDF ou Word com normas da ABNT.

$ pandoc artigo.md -o artigo.pdf --citeproc
$ ls
artigo.md artigo.pdf

7. Mini-Projeto: Artigo Científico Curto 🏗️

Crie um arquivo artigo_exemplo.md contendo: 1. Título e Autor. 2. Seção "Resumo" com uma citação direta (>). 3. Corpo do texto com pelo menos duas notas de rodapé bibliográficas. 4. Uma tabela comparativa de dados. 5. Uma fórmula matemática (Aula 11) que fundamente seu estudo.

8. Exercícios de Fixação 🧠

Como se diferencia uma citação direta de um texto comum no Markdown?
O que o Pandoc faz com o seu arquivo Markdown?
Por que manter uma hierarquia rigorosa de H1, H2 e H3 é vital em documentos longos?

Próxima Aula: Iniciamos o Módulo final com Apresentações Dinâmicas (Reveal.js)! 🎭

SOBRENOME, Nome. Título do Livro: subtítulo. Local: Editora, Ano. ↩

Aula 13 - Apresentações com Reveal.js 🎭

Objetivo

Objetivo: Aprender a transformar arquivos Markdown em apresentações de slides dinâmicas e interativas utilizando o Reveal.js, explorando transições, fragmentos e temas.

1. O que é Reveal.js? 🎭

O Reveal.js é um framework para criar apresentações HTML elegantes. Diferente do PowerPoint, as apresentações do Reveal.js são baseadas em padrões web, o que as torna fáceis de compartilhar e versionar.

2. Estrutura de Slides no Markdown 🧱

A separação entre um slide e outro é feita por três hifens ---.

Exemplo:

# Slide 1 🎬
Início da apresentação.

---

# Slide 2 📑
Conteúdo do segundo slide.

3. Elementos Fragmentados ✨

Fragmentos são usados para exibir elementos de forma sequencial em um mesmo slide (o famoso "um clique por item").

Sintaxe (MkDocs + Plugin Reveal):

Use { .fragment } logo após o item para que ele apareça com um comando do apresentador.

Item 1 { .fragment }
Item 2 { .fragment }
Item 3 { .fragment }

4. Transições e Temas 🎨

Você pode configurar o comportamento global da apresentação (como o efeito de transição Cubo, Slide ou Fade) e o tema visual (Black, White, League, Sky) através de metadados no topo do arquivo ou no arquivo de configuração do plugin.

5. Visualização de Fluxo de Slide (Mermaid) 🧜‍♀️

mermaid graph LR S1[Capa] --> S2[Introduçao] S2 --> S3[Desenvolvimento] S3 --> S4[Conclusao] S4 --> F[Fim]

6. Simulação de Criação de Apresentação 🐚

$ echo "# Bem-vindo 🚀" > slides.md
$ echo "---" >> slides.md
$ echo "## Agenda" >> slides.md
$ echo "- Introdução { .fragment }" >> slides.md
$ cat slides.md

7. Mini-Projeto: Minha Primeira Apresentação 🎤

Crie um arquivo apresentacao_teste.md contendo: 1. Um slide de título com seu nome. 2. Um slide com uma lista de 3 "Habilidades" usando o recurso de fragmentos ({ .fragment }). 3. Um slide contendo uma imagem centralizada (Aula 07). 4. Unm slide final de "Dúvidas?".

8. Exercícios de Fixação 🧠

Qual o símbolo usado para separar dois slides no Markdown do Reveal.js?
Para que serve o recurso de "Fragmentos"?
Qual a vantagem de fazer slides em Markdown em vez de usar o Google Slides ou PowerPoint?

Próxima Aula: Vamos mergulhar no Termynal.js Interativo! 🐚

Aula 14 - Termynal.js Interativo 🐚

Objetivo

Objetivo: Aprender a criar simulações de linha de comando animadas e realistas diretamente no seu site MkDocs utilizando a sintaxe Termynal.js, essencial para tutoriais e documentação de CLI (Command Line Interface).

1. O que é Termynal.js? 🐚

Termynal.js é uma biblioteca minimalista que simula a escrita humana em um terminal de computador. Em vez de apenas colar um bloco de código estático, você pode mostrar ao usuário o processo de digitar um comando e ver a resposta do sistema.

2. Sintaxe Básica 🧱

Para criar uma simulação, usamos o bloco de código com o identificador termynal. Os símbolos indicam o comportamento da linha:

$: Indica um comando que será "digitado" (input).
(Sem símbolo): Indica a saída do sistema (output), que aparece instantaneamente.
>: Pode indicar um prompt contínuo ou um comentário.

Exemplo:

$ cd meu-projeto
$ git status
On branch main
Your branch is up to date.

3. Customizando o Tempo e Atrasos ⏱️

Você pode controlar a velocidade da animação usando comentários especiais ou atributos (se o plugin permitir). No nosso ambiente MkDocs, o foco é na estrutura:

Comandos curtos aparecem mais rápido. { .fragment }
Blocos de saída longos aparecem de uma só vez para não cansar o leitor. { .fragment }

4. Por que usar Simulações Animadas? 🚀

Engajamento: O movimento atrai a atenção. { .fragment }
Didática: O usuário entende o que ele deve digitar e o que o computador deve responder. { .fragment }
Profissionalismo: Dá um ar de "modernidade" à sua documentação. { .fragment }

5. Visualização de Renderização (Mermaid) 🧜‍♀️

mermaid graph TD A[Bloco termynal] --> B{Script JS} B --> C[Simula Digitaçao] C --> D[Exibe Output] D --> E[Terminal Finalizado]

6. Mini-Projeto: Guia de Instalação Animado 🏗️

Crie um arquivo tutorial_cli.md contendo: 1. Um título H1 "Manual do Desenvolvedor Moderno". 2. Uma breve explicação sobre como instalar uma ferramenta fictícia chamada SuperTools. 3. Um bloco termynal que simule: - A criação de uma pasta (mkdir). - A instalação via npm (npm install supertools). - A execução da ferramenta (supertool --version). - A saída mostrando a versão v1.0.0.

7. Exercícios de Fixação 🧠

Qual o prefixo usado para indicar que um texto deve ser "digitado" no Termynal.js?
Como representar a resposta do sistema (saída) em um bloco de terminal animado?
Qual a principal vantagem de uma animação de terminal em relação a um print do console?

Próxima Aula: O grande Projeto Integrador Final! 🚀

Aula 15 - Projeto Integrador Final 🚀

Objetivo

Objetivo: Consolidar todos os conhecimentos técnicos e visuais adquiridos ao longo do curso (Módulos 1 a 4) através da criação de um Repositório de Documentação Profissional completo, pronto para ser publicado no GitHub Pages.

1. O Grande Desafio 🏆

Chegou a hora de unir todas as peças do quebra-cabeça. Não aprenderemos comandos novos hoje; em vez disso, vamos orquestrar tudo o que já sabemos para criar um produto final que servirá como seu portfólio de Documentação Técnica.

2. Requisitos Mandatórios do Projeto 🧱

Seu repositório final deve conter:

Módulo 1: Estrutura organizada de pastas, títulos H1/H2 e listas.
Módulo 2: Tabelas técnicas de requisitos e checklists de progresso.
Módulo 3: Pelo menos dois diagramas Mermaid (Fluxo e Sequência) e uma fórmula MathJax.
Módulo 4: Um deck de slides (.md) funcional e uma simulação termynal.

3. Checklist de Excelência ✅

Todos os links internos estão funcionando?
As imagens possuem texto alternativo (alt text)?
O arquivo index.md (página inicial) é convidativo?
O código possui destaque de sintaxe correto?
O repositório possui uma licença aberta (MIT, por exemplo)?

4. Estrutura do Ecossistema (Mermaid) 🧜‍♀️

mermaid graph TD REPOS[Seu Repositório] --> DOCS[Pasta docs/] DOCS --> INDEX[index.md - Landing Page] DOCS --> TECH[tech_specs.md - Tabelas/Fórmulas] DOCS --> DIAG[diagrams.md - Mermaid] DOCS --> SLIDE[slides.md - Reveal.js] REPOS --> MKD[mkdocs.yml - Configuraçao]

5. Simulação de Entrega Profissional 🐚

$ git add .
$ git commit -m "feat: finaliza projeto integrador v1.0"
$ git push origin main
$ mkdocs gh-deploy
$ echo "Projeto no ar!"

6. Mini-Projeto: O Integrador 🎨

Esta aula É o mini-projeto final. Utilize o que você desenvolveu nas aulas 08 e 12 como base para expandir o seu repositório. O objetivo é que qualquer pessoa que veja o seu site entenda imediatamente que você domina o Markdown Moderno.

7. Exercícios de Auto-Avaliação 🧠

Qual foi o recurso de Markdown que você teve mais facilidade em aprender?
Qual recurso (Mermaid, MathJax, Reveal.js) você considera o mais poderoso para o seu futuro profissional?
Se você tivesse que explicar para um colega por que usar MkDocs em vez de um documento Word, o que você diria?

Próxima Aula: Finalização e Apresentação! 🎓

Aula 16 - Finalização e Próximos Passos 🎓

Objetivo

Objetivo: Realizar a entrega e apresentação final do projeto integrador, revisar a jornada do curso e discutir os próximos passos para continuar evoluindo no ecossistema de Documentação como Código.

1. A Jornada até Aqui 🏔️

Parabéns! Você percorreu um caminho incrível, saindo do básico # Olá Mundo até a criação de um ecossistema completo com diagramas, fórmulas, slides e terminais animados.

Módulo 1: Fundamentos e Organização.
Módulo 2: Prática Profissional e GitHub.
Módulo 3: Diagramação e Ciência.
Módulo 4: Interatividade e Entrega.

2. Apresentação do Projeto Final 🎤

O momento de compartilhar o seu trabalho com o mundo (ou com a sua turma). Lembre-se de utilizar os slides criados na Aula 15 para guiar sua fala.

Pontos Chave para sua Apresentação:

Qual problema sua documentação resolve?
Quais foram os maiores desafios técnicos?
Qual o recurso visual do Markdown que você mais se orgulha de ter usado?

3. Além do Markdown: Próximos Passos 🚀

O conhecimento não para aqui. O Markdown é a porta de entrada para ferramentas ainda mais poderosas:

Pandoc: O canivete suíço para converter seu Markdown em QUALQUER formato. { .fragment }
Asciidoc: Uma alternativa ao Markdown para livros e documentações complexas de engenharia. { .fragment }
Static Site Generators (SSG): Além do MkDocs, explore Hugo, Jekyll ou Docusaurus. { .fragment }
CSS Avançado: Aprenda a criar seus próprios temas para o MkDocs e Reveal.js. { .fragment }

4. Visualização do Futuro (Mermaid) 🧜‍♀️

mermaid graph TD NOW[Markdown Master] --> JOB[Documentaçao Técnica] NOW --> DEV[Desenvolvedor FullStack] NOW --> SCI[Pesquisador Científico] JOB --> EXP[Tech Writer] DEV --> EXP SCI --> EXP[Especialista em Comunicaçao]

5. Simulação de Encerramento 🐚

$ echo "Curso Concluído com Sucesso!"
$ git tag -a v1.0.final -m "Certificado de Markdown"
$ git push origin --tags
$ exit

6. Mini-Projeto: O Meu Legado 🏗️

Revise seu repositório uma última vez. Adicione um arquivo meta-documentação (pode ser o README.md principal) que conte a história de como esse projeto evoluiu ao longo das 16 aulas. Esse será o seu "legado" deste curso.

7. Exercícios de Reflexão Final 🧠

Olhando para o seu primeiro arquivo aula-01.md e para o seu projeto15.md, qual a maior diferença que você nota?
Como você pretende aplicar o Markdown no seu dia a dia de trabalho ou estudos a partir de amanhã?
Qual nota de 0 a 10 você daria para a qualidade visual das documentações que você é capaz de criar agora?

Palavras Finais 🙏

"A documentação é a ponte entre a ideia e a execução. Obrigado por caminhar sobre essa ponte conosco."

Parabéns, Markdown Master! 🎓🚀

Exercícios

Listas de Exercícios 🏋️

Pratique o que aprendeu com desafios graduais para cada aula. Cada arquivo contém 5 exercícios (2 Básicos, 2 Intermediários e 1 Desafio).

Módulo 2: Estrutura e Dados

Ex 05 - Tabelas e Estrutura Técnica
Ex 06 - Markdown + GitHub
Ex 07 - Markdown Estendido
Ex 08 - Projeto Intermediário

Módulo 3: Visualização e Ciência

Ex 09 - Diagramas com Mermaid
Ex 10 - Diagramas Avançados
Ex 11 - Fórmulas Matemáticas com MathJax
Ex 12 - Markdown para Conteúdo Acadêmico

Módulo 4: Automação e Entrega

Ex 13 - Apresentações com Reveal.js
Ex 14 - Simulação de Terminal com Termynal.js
Ex 15 - Projeto Integrador
Ex 16 - Apresentação Final

Exercícios - Aula 01: Introdução ao Markdown 📝

🟢 Básico

Definição: Explique, com suas palavras, o que é Markdown e por que ele é considerado uma linguagem de "marcação leve".
Extensões: Qual é a extensão de arquivo correta para um documento Markdown? (Ex: .txt, .doc, .md).

🟡 Intermediário

Vantagens: Liste 3 vantagens de utilizar Markdown em vez de um editor de texto convencional (como Microsoft Word) para documentar um projeto de software.
Ferramentas: Pesquise e nomeie um editor de Markdown (online ou desktop) que você considere interessante e explique uma funcionalidade legal dele.

🔴 Desafio

Instalação e Setup:
- Instale o VS Code (se ainda não tiver).
- Instale a extensão "Markdown All in One".
- Crie um arquivo chamado aula01.md e utilize o comando Ctrl+Shift+V para abrir o preview.
- Escreva uma pequena biografia sua usando pelo menos 3 níveis de títulos.

Acesse a Solução

Exercício 02

🔴 Desafio

A Mistura Perfeita:
- Crie um arquivo chamado exercicio02.md.
- Adicione um título H1.
- Crie uma tabela simples (3x2) comparando "Item" e "Preço".
- Adicione uma nota de rodapé ou um texto em negrito e itálico combinados.
- Insira uma imagem que também seja um link.

Acesse a Solução

Exercícios - Aula 03: Organização e Boas Práticas 📂

🟢 Básico

Links Relativos: Você tem um arquivo na pasta raiz chamado README.md e um na pasta docs/ chamado projeto.md. Como seria o link dentro do README.md para o arquivo projeto.md?
Hierarquia: Por que não devemos usar múltiplos títulos de nível 1 (#) em um mesmo documento Markdown?

🟡 Intermediário

Checklists: No Markdown do GitHub, usamos [ ] e [x] para tarefas. Crie uma lista de tarefas para a organização da sua documentação com pelo menos 3 itens, marcando o primeiro como concluído.
Ancoragem: Explique como você criaria um link no topo de um documento que levasse o usuário diretamente para uma seção lá no final chamada "Contato".

🔴 Desafio

A Mágica dos Badges:
- Pesquise o site Shields.io.
- Crie um badge personalizado para o seu projeto com o texto "Status: Em Desenvolvimento" e a cor laranja.
- Insira este badge no seu arquivo README.md usando a sintaxe de imagem.
- Crie uma estrutura de 3 arquivos interligados: index.md -> recursos.md -> faq.md. Todos devem ter um link de "Voltar" para o arquivo anterior.

Acesse a Solução

Exercícios - Aula 04: Markdown para Programação 💻

🟢 Básico

Inline vs Bloco: Escreva um parágrafo que mencione a variável contador usando código inline, e logo abaixo mostre um bloco de código Python que incremente esta variável.
Destaque de Sintaxe: Crie três blocos de código vazios apenas indicando as linguagens: javascript, html e css.

🟡 Intermediário

Documentação de API: Crie uma tabela Markdown que descreva os parâmetros de uma função fictícia enviar_email(destinatario, assunto, corpo). A tabela deve ter colunas para "Parâmetro", "Tipo" e "Descrição".
Comentários de Código: Como você pode adicionar um comentário dentro de um bloco de código Python no Markdown sem que ele pareça texto comum do documento?

🔴 Desafio

Simulação Técnica:
- Crie um arquivo chamado exercicio04.md.
- Desenvolva uma pequena documentação para um script de backup.
- Use um bloco termynal para mostrar o comando de execução (ex: python backup.py).
- Use um bloco de código com destaque de sintaxe para mostrar o conteúdo do script backup.py.
- Adicione uma tabela de "Códigos de Saída" (Ex: 0 = Sucesso, 1 = Erro).

Exercícios - Aula 05: Tabelas e Estrutura Técnica 📊

🟢 Básico

Alinhamento: Como centralizar o conteúdo de uma coluna em uma tabela Markdown?
Checklists: Qual a sintaxe para criar uma caixa de seleção marcada e uma desmarcada?

🟡 Intermediário

Tabela de Requisitos: Crie uma pequena tabela com as colunas "ID", "Descrição" e "Prioridade" (Centralizada).
Markdown em Tabelas: É possível utilizar negrito e links dentro de uma célula de tabela? Demonstre com um exemplo.

🔴 Desafio

Dashboard de Projeto: Crie um arquivo exercicio05.md contendo uma tabela de cronograma e uma checklist de tarefas pendentes para um projeto fictício.

Acesse a Solução

Exercícios - Aula 06: Markdown + GitHub 🐙

🟢 Básico

Menções: Como você menciona o usuário "ricardotecpro" em um comentário no GitHub?
Issues: Qual a sintaxe para criar um link automático para a Issue de número 123 dentro de um repositório?

🟡 Intermediário

Badges:
- Vá ao site Shields.io.
- Crie um badge de "Plataforma: Android" com a cor azul.
- Escreva aqui a linha de código Markdown necessária para exibir este badge.
Links de Commit: O que o GitHub faz automaticamente quando você cola um Hash de Commit (ex: a1b2c3d) em uma discussão Markdown?

🔴 Desafio

Template de Pull Request:
- Dica: Use !!! info para dar uma instrução ao revisor do PR.

Acesse a Solução

Exercícios - Aula 07: Markdown Estendido ➕

🟢 Básico

HTML Simples: Use a tag HTML  para sublinhar a palavra "Importante" em uma frase qualquer.
Emojis por Nome: Escreva uma frase motivacional usando os shortcodes :fire:, :muscle: e :rocket:.

🟡 Intermediário

Nota de Rodapé: Escreva um parágrafo sobre o criador do Markdown e use uma nota de rodapé para citar o ano em que a linguagem foi lançada.
Alinhamento HTML: Use o atributo align="right" em uma tag  para alinhar um parágrafo totalmente à direita, simulando uma assinatura de documento.

🔴 Desafio

Documento Técnico Avançado:
- Crie um arquivo exercicio07.md.
- Use HTML para criar um título colorido (ex: azul marinho).
- Crie um glossário de termos no final do documento usando notas de rodapé (pelo menos 3 termos).
- Insira uma imagem centralizada usando HTML (<img src="..." align="center"> ou dentro de um ).
- Adicione um texto subscrito () e um sobrescrito () para representar uma fórmula química ou matemática simples (ex: H₂O).

Exercícios - Aula 08: Projeto Intermediário 🏗️

🟢 Básico

Auto-Avaliação: Liste 3 recursos das Aulas 05 a 07 que você considera mais úteis para a documentação de um projeto real.
Higiene de Código: No seu projeto de hoje, verifique se todos os blocos de código têm a indicação da linguagem (ex: python, json). Liste aqui quais você usou.

🟡 Intermediário

Revisão de Links: Teste todos os links do seu projeto intermediário. Algum quebrou? Por que é importante usar links relativos (../) em vez de links absolutos (C:\Users\...)?
Emoji Check: Adicione um emoji de status (ex: ✅ ou 🚧) ao lado de cada requisito na sua tabela de funcionalidades do projeto de hoje.

🔴 Desafio

O Toque Final:
- No seu arquivo README.md do projeto de hoje, adicione uma seção de "Créditos" ou "Autor" usando HTML para centralizar seu nome e dar uma cor especial a ele.
- Crie uma nota de rodapé no README.md que leve o usuário para a licença do projeto (pode ser um link fictício).
- Adicione um badge do Shields.io que mostre a porcentagem de conclusão do projeto (ex: Status-80%25-orange).

Exercícios - Aula 09: Mermaid na Prática: Fluxogramas 🧜‍♀️

🟢 Básico

Direção do Fluxo: Crie um pequeno diagrama Mermaid que aponte de A para B, usando a direção LR.
Formas de Nós: Represente os seguintes itens com a sintaxe Mermaid:
- Um processo (retângulo) chamado "Compilar".
- Uma decisão (losango) chamada "Erro?".
- Um fim (arredondado) chamado "Sucesso".

🟡 Intermediário

Conexões com Texto: Crie um fluxo onde uma decisão "Idade >= 18?" tenha duas saídas:
- Uma seta com o texto "Sim" para o nó "Pode entrar".
- Uma seta com o texto "Não" para o nó "Acesso negado".
Alinhamento: Altere o diagrama anterior. Use a direção TD (Top Down).

Acesse a Solução

🔴 Desafio

O Fluxo da Vida (ou do Código):
- Crie um arquivo exercicio09.md.
- Desenvolva um fluxograma Mermaid completo para um "Sistema de Alarme":
  - Início: Alarme Ativado.
  - Sensor detecta movimento?
  - Se Sim -> Tocar sirene -> Notificar proprietário.
  - Se Não -> Continuar monitorando (voltar ao sensor).
  - Use diferentes formatos de nós e setas espessas (==>) nos caminhos críticos.

Exercícios - Aula 10: Mermaid Avançado ⚡

🟢 Básico

Diagrama de Sequência: Crie um diagrama onde "Cliente" envia a mensagem "Olá" para "Servidor" e o "Servidor" responde com "Como posso ajudar?".
Mapa Mental: Crie um mindmap com o nó central "Frutas" e três ramificações: "Vermelhas", "Amarelas" e "Verdes".

🟡 Intermediário

Estilização: Crie um fluxograma (graph LR) com dois nós (A e B). Aplique um estilo ao nó A para que ele tenha fundo verde (#00ff00) e borda preta grossa.
Gantt Simples: Crie um gráfico de Gantt de um final de semana.
- Sábado: "Descansar" (8h).
- Domingo: "Estudar" (4h).

🔴 Desafio

Interação de Sistema Complexa:
- Crie um arquivo exercicio10.md.
- Desenvolva um diagrama de sequência que represente o fluxo de "Esqueci minha senha":
  - Ator: Usuario.
  - Participantes: App, EmailService, Database.
  - O usuário solicita a recuperação.
  - O App consulta o Email no DB.
  - O DB confirma a existência.
  - O App solicita ao EmailService o envio do link.
  - O EmailService confirma o envio.
  - O App informa o usuário: "Verifique sua caixa de entrada".
- Adicione uma nota (Note over ...) no diagrama explicando que o token expira em 30 min.
Dentro de cada ramificação, adicione 2 itens (ex: Frontend -> React, Vue).

Acesse a Solução

Exercícios - Aula 11: MathJax 🔢

🟢 Básico

Equação Simples: Escreva a famosa equação de Einstein ($E = mc^2$) usando a sintaxe MathJax inline.
Frações: Represente a fração "um terço" usando o comando \frac em um bloco de visualização ($$).

🟡 Intermediário

Química: Escreva a fórmula da água ($H_{2}O$) e da água oxigenada ($H_{2}O_{2}$) usando subscritos.
Matemática: Represente a fórmula da área de um círculo ($A = \pi r^2$) e a fórmula do Teorema de Pitágoras ($a^2 = b^2 + c^2$).

🔴 Desafio

Folha de Cálculos Médicos:
- Crie um arquivo exercicio11.md.
- Documente a fórmula para o cálculo de Gotejamento de Soro:
  - Gotas/min = \frac{Volume}{Tempo \times 3}
- Documente a fórmula do IMC (Índice de Massa Corporal):
  - IMC = \frac{Peso}{Altura^2}
- Use blocos de visualização ($$) para as fórmulas e blocos !!! info para explicar o significado de cada variável (ex: Volume em ml, Tempo em horas).
- Adicione um diagrama Mermaid que mostre o fluxo: "Coletar Dados" -> "Aplicar Fórmula" -> "Resultado".

Acesse a Solução

Exercícios - Aula 12: Markdown Acadêmico 🎓

🟢 Básico

Citações: Escolha uma frase de um livro ou autor famoso e formate-a como um bloco de citação (blockquote).
Hierarquia: Organize os seguintes itens em uma estrutura de títulos Markdown coerente: "Título do Trabalho", "Introdução", "Objetivos Específicos", "Conclusão".

🟡 Intermediário

Notas de Rodapé: Escreva um parágrafo sobre a importância da pesquisa científica e use uma nota de rodapé para citar o site "A ciência hoje".
Sumário: Explique como o MkDocs ajuda na navegação de documentos acadêmicos longos sem que o autor precise criar um sumário manual em cada página.

🔴 Desafio

Estrutura de Relatório Técnico:
- Crie um arquivo exercicio12.md.
- Simule um pequeno relatório de "Impacto Ambiental":
  - Título (H1).
  - Seção de "Metodologia" (H2).
  - Use uma Tabela para mostrar os resultados coletados (Data | Local | Nível de Ruído).
  - Use uma Nota de Rodapé para referenciar a norma técnica utilizada.
  - Inclua um diagrama Mermaid (Aula 09) mostrando o fluxo da pesquisa: Coleta -> Análise -> Relatório.
  - Use uma fórmula matemática (Aula 11) que fundamente seu estudo.

Acesse a Solução

Exercícios - Aula 13: Apresentações com Reveal.js 🎭

🟢 Básico

Separação de Slides: Crie um arquivo com três slides simples, separados pelo delimitador correto (---).
Títulos Dinâmicos: O primeiro slide deve ter um título H1 e o segundo um H2.

🟡 Intermediário

Fragmentos de Texto: Crie um slide com uma lista de 3 passos para "Fazer um Café". Use o recurso { .fragment } para que cada passo apareça um por um.
Notas do Orador: Pesquise como adicionar notas que apenas o apresentador vê (Dica: Procure pela tag <aside class="notes">) e adicione uma nota ao seu primeiro slide.

🔴 Desafio

Pitch de Projeto Interativo:
- Crie um arquivo exercicio13.md.
- Desenvolva uma apresentação de 5 slides para o seu "Projeto Intergrador" (que faremos na Aula 15):
  - Slide 1: Título e Nome (Capa).
  - Slide 2: O Problema (usando fragmentos para listar 3 pontos).
  - Slide 3: A Solução (com um diagrama Mermaid).
  - Slide 4: Tecnologias (uma tabela com Markdown, MkDocs, Reveal.js).
  - Slide 5: Encerramento com um link para seu GitHub.
- Tente usar uma transição diferente (como convex ou zoom) se você estiver testando localmente com o plugin.
Use emojis em cada slide para manter o engajamento.

Acesse a Solução

Exercícios - Aula 14: Termynal.js Interativo 🐚

🟢 Básico

Primeiro Comando: Crie um bloco termynal que simule a digitação do comando echo "Olá Mundo".
Identificação de Símbolos: O que acontece na animação se você remover o símbolo $ do início de uma linha em um bloco termynal?

🟡 Intermediário

Fluxo de Instalação: Crie uma simulação que mostre:
- O comando npm init -y.
- Uma saída de texto simulando a criação do arquivo package.json.
- O comando npm install.
Comentários no Terminal: Use o símbolo > para adicionar um comentário explicativo no meio de uma simulação de comandos Git.

🔴 Desafio

Simulação Técnica de Deploy:
- Crie um arquivo exercicio14.md.
- Desenvolva um bloco termynal completo que conte a "história" de um deploy:
  - Digitar: git push origin main.
  - Saída: Enumerating objects: 5, done.
  - Saída: Counting objects: 100% (5/5), done.
  - Saída: To github.com:usuario/repo.git.
  - Digitar: mkdocs gh-deploy.
  - Saída: Copying 'site' to 'gh-pages' branch....
  - Saída: Your site has been deployed to: https://usuario.github.io/repo/.
- Adicione uma nota de rodapé no final da simulação explicando que o comando ls -l detalha as permissões de arquivos.

Acesse a Solução

Exercícios - Aula 15: Projeto Integrador 🚀

🟢 Básico

Recursos de Módulo 4: Explique a importância de simulações de terminal (termynal) e apresentações (reveal.js) em documentações técnicas.
Consistência: Por que é vital manter uma linguagem e estilo visual consistentes em todo o projeto final?

🟡 Intermediário

Consolidação Visual: Crie um diagrama Mermaid (graph TD) que mapeie toda a estrutura de pastas do seu projeto atual.
Fórmulas e Tabelas: Escolha uma métrica do seu sistema fictício (ex: Tempo de Resposta ou Preço) e documente-a usando uma fórmula MathJax e uma tabela comparativa.

🔴 Desafio

O Arremate Final:
- Esta aula É o mini-projeto. Siga os requisitos detalhados na seção Projeto 15.

Acesse a Solução

Exercícios - Aula 16: Finalização e Próximos Passos 🎓

🟢 Básico

Revisão de Portfólio: Abra o seu index.md e verifique se ele descreve corretamente o que você aprendeu nas 16 aulas.
Tags de Versão: Crie um bloco termynal que simule a criação de uma tag Git para a versão final do seu curso (v1.0).

🟡 Intermediário

Mapa do Conhecimento: Crie um diagrama Mermaid (mindmap) que resuma os 4 módulos do curso e seus principais tópicos.
Referência Futura: Adicione uma nota de rodapé ao seu documento final citando o site oficial do MkDocs como uma fonte para estudos avançados.

🔴 Desafio

Relatório de Aprendizado Final:
- Crie um arquivo exercicio16.md.
- Escreva um pequeno parágrafo de 3 linhas sobre como o Markdown mudou sua forma de documentar software.
- Use uma Fórmula MathJax para representar seu "Crescimento de Conhecimento" (ex: $C = \int_{aula1}^{aula16} Aprendizado \, dt$).
- Adicione um diagrama Mermaid de sequência mostrando o fluxo: Aluno -> Curso -> Markdown Master.
- Inclua um badge do Shields.io com o texto "Status: Certificado".
- Finalize com uma simulação termynal que "limpe" o terminal e dê as boas-vindas ao seu novo status de especialista.

Acesse a Solução

Projetos

Projetos do Curso 🏗️

Nesta seção, você encontrará os projetos práticos associados a cada aula. Os projetos são projetados para consolidar os conceitos aprendidos através de aplicações no mundo real.

Módulo 1: Fundamentos e Escrita Técnica

Projeto 01: Meu Primeiro Repositório
Projeto 02: Currículo em Markdown
Projeto 03: Guia de Comandos Git
Projeto 04: Portfólio Inicial

Módulo 2: Estrutura e Dados

Projeto 05: Documentação de API
Projeto 06: Wikicode Profissional
Projeto 07: Tabela de Preços Dinâmica
Projeto 08: Relatório de Metas

Módulo 3: Visualização e Ciência

Projeto 09: Fluxograma de Sistema
Projeto 10: Diagrama de Sequência de Login
Projeto 11: Cronograma de Projeto (Gantt)
Projeto 12: Mapa Mental de Carreira

Módulo 4: Automação e Entrega

Projeto 13: Apresentação de Startup
Projeto 14: Simulação de Deploy
Projeto 15: Automação de Relatórios
Projeto 16: Site de Documentação Final

Voltar para o Início

Projeto 01 - O Começo de Tudo 🚀

Objetivo

Configurar seu ambiente de trabalho e criar a estrutura inicial do seu repositório de estudos.

Requisitos

Criar uma pasta chamada estudos-markdown.
Dentro dela, criar um arquivo README.md.
Adicionar uma estrutura básica:
- Título principal
- Seção "Sobre Mim"
- Seção "Objetivos com o Curso"
- Uma lista de 3 ferramentas que você instalou (ex: VS Code, Git, Extensões).

Entrega

Mostre o arquivo renderizado (Preview) no seu editor de escolha.

Projeto 02 - Perfil Profissional Estilizado 🎨

Objetivo

Aplicar a sintaxe básica para criar um documento de perfil pessoal ou profissional que seja visualmente organizado.

Requisitos

Título Principal (H1) com seu nome completo.
Foto de Perfil: Use uma URL de imagem (pode ser seu avatar do GitHub).
Resumo (H2): Um parágrafo curto sobre suas aspirações. Use itálico para palavras-chave.
Habilidades Técnicas (H2): Uma lista não ordenada contendo pelo menos 5 linguagens ou ferramentas.
Redes Sociais: Uma lista de links para seu LinkedIn, GitHub, etc.
Citação Favorita: Use um bloco de citação (>) para colocar uma frase que você gosta.

Entrega

Gere o arquivo projeto02.md e verifique se todos os links e imagens estão funcionando no preview.

Projeto 03 - Repositório Profissional 🧱

Objetivo

Transformar sua pasta de estudos em um repositório organizado e documentado, seguindo padrões profissionais do GitHub.

Requisitos

README.md na Raiz:
- Um título impactante com um Badge (pode usar do Shields.io).
- Seção "O que é este repositório?".
- Seção "Aulas Concluídas" usando uma Checklist.
Pasta docs/:
- Arquivo index.md servindo como sumário.
- Arquivo anotacoes.md com suas notas das primeiras 3 aulas.
Links Interligados:
- O README.md deve apontar para o docs/index.md.
- O docs/index.md deve ter links para as anotações.
- Todos os arquivos na pasta docs/ devem ter um link no rodapé "Voltar ao Início".

Entrega

Mostre a navegação funcionando no preview do seu editor, clicando nos links e verificando se os caminhos estão corretos.

Projeto 04 - Guia do Desenvolvedor 🚀

Objetivo

Criar uma página de documentação técnica para um pequeno script ou função, utilizando os recursos de programação do Markdown.

Requisitos

Título (H1): Nome da Ferramenta ou Script.
Exemplo de Uso (H2): Use o bloco termynal para mostrar como o script é invocado no terminal.
Código Fonte (H2): Insira o código (pode ser fictício) dentro de um bloco com o destaque de sintaxe correto.
Documentação da Função (H2): Use uma tabela para descrever os argumentos de entrada e o que a função retorna.
Dica Técnica: Use um bloco !!! tip para dar um conselho de "Boa Prática" relacionado ao código que você apresentou.

Entrega

Gere o arquivo projeto04.md e verifique se o realce de cores do código está funcionando e se a simulação de terminal está legível.

Projeto 05 - Gerenciador de Requisitos 📋

Objetivo

Utilizar tabelas e checklists para documentar a estrutura e os requisitos de um novo projeto de software.

Requisitos

Título (H1) com o nome do sistema (ex: Sistema de Biblioteca).
Descrição do Projeto: Um parágrafo curto.
Escopo de Funcionalidades (H2):
- Use uma Checklist para listar o que o sistema deve fazer (ex: [ ] Cadastrar livro, [ ] Alugar livro).
Tabela de Dados (H2):
- Crie uma tabela que descreva o modelo de dados de um "Livro" (Campo, Tipo, Obrigatório [Sim/Não], Descrição).
Critérios de Aceite (H2):
- Uma tabela relacionando a funcionalidade com o teste que deve ser feito para validá-la.

Entrega

Gere o arquivo projeto05.md. Verifique se a tabela de requisitos está bem alinhada e se a checklist reflete o status inicial do projeto (tudo pendente).

Objetivo

Configurar os elementos sociais e informativos de um repositório no GitHub usando Markdown avançado.

Requisitos

README.md com Badges:
- Adicione pelo menos 3 badges no topo do seu README.md (ex: Versão, Licença, Status).
Template de Issue (H2):
- Crie uma seção que simule um "Bug Report" usando tabelas para descrever o ambiente (OS, Browser, Versão).
Mencione e Linke:
- Crie uma seção de "Colaboradores" e mencione o perfil do seu professor (ex: @ricardotecpro).
- Crie um link que aponte para uma Issue fictícia #1.
Demonstração Visual:
- Insira um Emoji coerente em cada um dos seus títulos.

Entrega

Gere o arquivo projeto06.md. Verifique se os badges (imagens) estão carregando corretamente e se as menções e referências de issue estão destacadas.

Projeto 07 - Artigo Técnico Estilizado 📝

Objetivo

Unir os recursos do Markdown padrão com extensões e HTML para criar um documento com visual refinado e referências profissionais.

Requisitos

Cabeçalho HTML: Use <h1 align="center"> com uma cor personalizada (CSS inline) para o título do seu artigo.
Uso de Emojis: Utilize emojis como separadores ou marcadores de seções importantes.
Notas de Rodapé: Inclua pelo menos 2 notas de rodapé ao longo do texto para explicar termos complexos ou referenciar fontes.
Formatação Fina: Use as tags  (sublinhado),  (subscrito) ou  (sobrescrito) em algum ponto do texto onde faça sentido técnico.
Sumário de Notas: Garanta que as notas de rodapé estejam bem explicadas ao final.

Entrega

Gere o arquivo projeto07.md. Verifique no preview se o HTML foi renderizado corretamente e se as notas de rodapé criam os links de "ida e volta" automaticamente.

Projeto 08 - Documentação do TaskMaster CLI 🏗️

Objetivo

Consolidar todo o aprendizado dos Módulos 1 e 2 em um único conjunto de documentação técnica profissional para um sistema fictício de linha de comando.

Requisitos

Estrutura de Arquivos:
- README.md na raiz do projeto.
- Pasta docs/ com index.md, setup.md e api.md.
Conteúdo do README:
- Badges de versão e status.
- Descrição breve do sistema.
- Checklist de funcionalidades.
- Link para a pasta docs/.
Conteúdo do Setup (setup.md):
- Instruções usando blocos termynal.
- Lista de requisitos de sistema.
Conteúdo da API (api.md):
- Tabela de comandos suportados (Comando, Descrição, Exemplo).
- Blocos de código demonstrando o uso.
Navegação:
- Todos os arquivos devem estar interligados por links relativos.
- Use "Voltar ao Início" em cada página da pasta docs/.

Entrega

Gere o arquivo projeto08.md que será o sumário de toda essa estrutura. Certifique-se de que o visual está moderno e as informações estão tecnicamente corretas.

Projeto 09 - Mapeamento de Lógica com Mermaid 🧜‍♀️

Objetivo

Utilizar o Mermaid para documentar visualmente a lógica de um algoritmo ou processo de negócio dentro de um arquivo Markdown.

Requisitos

Título (H1): Nome do Processo (Ex: Fluxo de Compra Online).
Descrição Contextual: Um breve parágrafo explicando o que o diagrama representa.
Diagrama Mermaid (Flowchart):
- Deve conter pelo menos 5 nós.
- Deve incluir pelo menos um nó de decisão ({}).
- Deve usar setas com texto descritivo.
Estilização: Use pelo menos uma seta espessa (==>) para indicar o "Caminho Feliz" (o caminho de sucesso).
Dica Visual: Use um bloco !!! tip para explicar como o leitor deve interpretar o diagrama.

Entrega

Gere o arquivo projeto09.md. Verifique se o diagrama é renderizado corretamente pelo MkDocs ou pelo preview do seu editor.

Projeto 10 - Documentação Visual de Arquitetura ⚡

Objetivo

Utilizar os recursos avançados do Mermaid para documentar a interação entre componentes de um software e a estrutura de conhecimento do projeto.

Requisitos

Título (H1): Arquitetura do Sistema [Seu Nome].
Mapa Mental de Funcionalidades (H2):
- Um mindmap detalhando os módulos do seu sistema.
Fluxo de Dados (Diagrama de Sequência) (H2):
- Represente a interação entre um "Usuário", o "Frontend" e uma "API" durante a criação de um novo registro.
Estilização de Destaque:
- No seu diagrama de sequência, use uma Note right of API: Validação de Dados para destacar uma regra de negócio.
Legenda com Badge:
- Adicione um badge do Shields.io no topo indicando que os diagramas estão na versão "Mermaid v10+".

Entrega

Gere o arquivo projeto10.md. Verifique se os diagramas complexos não estão "quebrando" o layout e se as mensagens do diagrama de sequência estão claras.

Projeto 11 - Prontuário Científico 🔢

Objetivo

Utilizar o MathJax para documentar procedimentos técnicos que envolvam cálculos matemáticos ou fórmulas químicas de forma profissional.

Requisitos

Título (H1): Relatório Técnico de [Escolha um Tema: Química, Física ou Medicina].
Introdução (H2): Um parágrafo explicando a importância das fórmulas no contexto escolhido.
Seção de Fórmulas (H2):
- Apresente pelo menos 3 fórmulas complexas utilizando blocos $$.
- Use frações (\frac), potências (^) e subscritos (_).
Legenda de Variáveis:
- Use uma Tabela Markdown para descrever o que cada letra da fórmula significa (Símbolo, Significado, Unidade).
Dica Científica:
- Use um bloco !!! tip para dar uma recomendação sobre a precisão dos cálculos.

Entrega

Gere o arquivo projeto11.md. Verifique se as fórmulas estão sendo renderizadas com a tipografia elegante do MathJax (geralmente em itálico matemático).

Projeto 12 - Artigo Acadêmico Estruturado 🎓

Objetivo

Aplicar os padrões de escrita acadêmica e técnica para criar um documento longo, organizado e bem referenciado no Markdown.

Requisitos

Título (H1): [Escolha um tema científico ou tecnológico].
Resumo (H2): Um parágrafo de introdução com uma citação direta (>).
Desenvolvimento (H2):
- Pelo menos duas subseções (H3).
- Incorpore uma Tabela de dados comparativos.
Referências e Notas (H2):
- Use pelo menos 3 notas de rodapé bibliográficas ([^1]).
- Garanta que os links de referência levem ao final do documento.
Elemento Visual:
- Um diagrama Mermaid (Sequence ou Flowchart) que ilustre uma parte do seu artigo.
Badge de Qualidade: Adicione um badge do Shields.io indicando "Padrão: ABNT-Simplificado".

Entrega

Gere o arquivo projeto12.md. O foco principal aqui é a estabilidade da navegação entre seções e a correção das notas de rodapé.

Projeto 13 - Deck de Slides Profissional 🎭

Objetivo

Transformar uma documentação técnica estática em uma apresentação visual atraente e interativa usando Reveal.js.

Requisitos

Título (H1): Apresentação Técnica - [Título do Seu Tema].
Estrutura de Slides:
- Mínimo de 8 slides.
- Todos separados por ---.
Uso de Fragmentos:
- Pelo menos 2 slides devem utilizar listas fragmentadas ({ .fragment }).
Elementos Visuais:
- Inclua pelo menos um Diagrama Mermaid.
- Inclua pelo menos uma Tabela de dados.
- Inclua um bloco de Código com Syntax Highlighting (Aula 04).
Configuração Visual:
- O conteúdo deve estar bem distribuído para não "vazar" da tela do slide.

Entrega

Gere o arquivo projeto13.md. Ao visualizar no MkDocs (com o plugin de slides), verifique se as transições entre os slides ocorrem suavemente e se os fragmentos funcionam na ordem esperada.

Projeto 14 - Showcase de CLI Animada 🐚

Objetivo

Criar uma página de documentação que simule o uso de uma ferramenta de linha de comando (CLI) de forma interativa e visualmente atraente.

Requisitos

Título (H1): Documentação da CLI [Nome da sua Ferramenta].
Contexto: Explique brevemente para que serve a ferramenta (ex: um conversor de imagens, um gerador de nomes, etc.).
Simulação Principal (Bloco Termynal):
- Deve conter pelo menos 3 comandos digitados ($).
- Deve conter pelo menos 2 saídas do sistema (outputs estáticos).
- Deve representar um fluxo lógico (Ex: Configurar -> Processar -> Resultado).
Estilização:
- Use Negrito para destacar os nomes dos comandos no texto explicativo.
- Use um Destaque de Sintaxe (Aula 04) para mostrar como o arquivo de configuração da ferramenta ficaria no VS Code.

Entrega

Gere o arquivo projeto14.md. Teste a animação no navegador; ela deve começar assim que o usuário rolar a página até o terminal.

Projeto 15 - Repositório de Documentação Épico 🚀

Objetivo

Finalizar a construção do repositório interativo, integrando todos os elementos técnicos, visuais e de navegação aprendidos durante o curso.

Requisitos

Este projeto é a culminação de todo o seu esforço. Ele deve conter: 1. Página Inicial (index.md): Com uma visão geral clara e badges profissionais. 2. Manual Técnico: Utilizando tabelas, listas e blocos de código com destaque de sintaxe. 3. Diagramação Avançada: Pelo menos um fluxograma e um diagrama de sequência Mermaid. 4. Cálculos e Ciência: Pelo menos dois exemplos de uso de MathJax em contextos reais. 5. Simulação Interativa: Um bloco termynal mostrando o uso prático de uma ferramenta. 6. Deck de Slides: Uma apresentação Reveal.js (.md) que resume todo o projeto.

Entrega

Gere o arquivo projeto15.md. No seu repositório real, faça o commit final e o deploy para o GitHub Pages. Verifique se o site renderizado reflete 100% da sua visão de "Documentação como Código".

Projeto 16 - Apresentação de Gala e Portfólio 🎓

Objetivo

Finalizar o portfólio de documentação, garantir a integridade de todos os arquivos e realizar uma "Apresentação de Gala" utilizando os recursos interativos aprendidos.

Requisitos

Este projeto final de curso consiste em: 1. Auditoria Geral: - Verifique se todos os quizzes, slides, exercicios e projetos de 01 a 16 estão organizados e com links corretos. 2. Página de Encerramento: - Crie uma página conclusao.md que resuma sua visão sobre o curso. 3. Showcase Visual: - Garanta que seu projeto tenha pelo menos um exemplo de cada tecnologia: Mermaid, MathJax, Termynal.js e Reveal.js. 4. Deploy de Gala: - Realize o deploy final para o GitHub Pages e verifique se o site está impecável no modo claro e escuro. 5. Apresentação: - Utilize os slides da Aula 15 (aprimorados se necessário) para fazer uma demonstração do seu repositório.

Entrega

Gere o arquivo projeto16.md. Este arquivo deve conter o link para o seu repositório no GitHub e a URL do site publicado no GitHub Pages. Compartilhe o resultado e comemore o seu novo status de Markdown Master! 🚀

Quizzes

Quizzes Interativos 🧠

Teste seus conhecimentos após cada aula com nossos quizzes interativos.

Módulo 1: Fundamentos e Escrita Técnica

Quiz 01: Introdução ao Markdown
Quiz 02: Sintaxe Básica
Quiz 03: Organização e Boas Práticas
Quiz 04: Markdown para Programação

Módulo 2: Estrutura e Dados

Quiz 05: Tabelas e Estrutura Técnica
Quiz 06: Markdown + GitHub
Quiz 07: Markdown Estendido
Quiz 08: Projeto Intermediário

Módulo 3: Visualização e Ciência

Quiz 09: Diagramas com Mermaid
Quiz 10: Diagramas Avançados
Quiz 11: Fórmulas Matemáticas com MathJax
Quiz 12: Markdown para Conteúdo Acadêmico

Módulo 4: Automação e Entrega

Quiz 13: Apresentações com Reveal.js
Quiz 14: Simulação de Terminal com Termynal.js
Quiz 15: Projeto Integrador
Quiz 16: Apresentação Final

Voltar para o Início

Quiz 01 - Markdown Moderno para Computação

1. Quem são os criadores originais do Markdown?

Bill Gates e Steve Jobs

John Gruber e Aaron Swartz

Linus Torvalds

Mark Zuckerberg

2. Qual é o principal objetivo do Markdown?

Criar bancos de dados complexos

Ser uma linguagem de programação de alto nível

Escrever em texto simples que possa ser convertido em HTML estruturado

Editar imagens e vídeos

3. Qual a extensão padrão de arquivos Markdown?

.text

.html

.markdown ou .md

.doc

4. Markdown é considerado uma linguagem de...

Programação

Marcação leve

Estilização (como CSS)

Banco de dados

5. Qual ferramenta abaixo NÃO é um editor comum de Markdown?

VS Code

Typora

Microsoft Excel

Obsidian

6. O que significa a sigla WYSIWYG?

What You See Is What You Get

Write Your Syntax In Website Yard

Why You See Is Why You Go

We Yield Simple Information With Graphics

7. Qual o nome do arquivo Markdown mais comum na raiz de repositórios do GitHub?

HELP.md

README.md

START.md

GUIDE.md

8. Qual ferramenta utilizaremos neste curso para converter os arquivos .md em um site?

Photoshop

MkDocs

Docker Desktop

Slack

9. É possível utilizar diagramas dentro do Markdown?

Não, apenas texto puro.

Sim, através de extensões como o Mermaid.

Sim, mas apenas desenhando com caracteres (ASCII Art).

Apenas se converter primeiro para JPG.

10. Por que o Markdown é popular entre programadores?

Porque é mais difícil que C++

Porque permite focar no conteúdo e funciona bem com controle de versão (Git)

Porque é a única forma de escrever código

Porque foi criado pela Microsoft

Quiz 02 - Markdown Moderno para Computação

1. Quantos níveis de títulos o Markdown suporta?

3

6

10

Ilimitados

2. Qual símbolo é usado para criar um título de nível 2?

##

**

==

--

3. Como aplicar negrito em uma palavra?

*Palavra*

__Palavra__

**Palavra**

Ambas B e C estão corretas

4. Qual a sintaxe correta para itálico?

*Texto*

**Texto**

~Texto~

[Texto]

5. Como criar uma lista não ordenada (com marcadores)?

Usando números (1., 2.)

Usando o hífen (-)

Usando a hashtag (#)

Usando colchetes ([])

6. Qual a sintaxe correta para criar um Link?

`(Link)[Texto]`

`[Texto](URL)`

`![Texto](URL)`

``

7. Qual a diferença entre a sintaxe de Link e a de Imagem?

Imagens usam chaves `{}`

Imagens começam com um ponto de exclamação `!`

Links não suportam URLs externas

Não há diferença

8. Como criar um texto riscado (strike-through)?

--Texto--

~~Texto~~

//Texto//

%%Texto%%

9. O que acontece se você não colocar um espaço após o símbolo # no título?

Nada, ele funciona igual.

Ele pode não ser reconhecido como título por alguns leitores.

O texto fica em negrito.

O arquivo é deletado.

10. Como se cria uma lista ordenada?

- Item

* Item

1. Item

> Item

Quiz 03 - Markdown Moderno para Computação

1. Qual a função de um arquivo README.md em um repositório?

Armazenar senhas do banco de dados

Descrever o projeto e como utilizá-lo

Guardar o código principal do sistema

É apenas um arquivo temporário

2. Como você cria um link para um arquivo chamado `guia.md` que está na mesma pasta do arquivo atual?

`[Guia](guia.md)`

`![Guia](guia.md)`

``

`Link: guia.md`

3. Para que servem os dois pontos (`..`) em um caminho de arquivo (Ex: `../README.md`)?

Para indicar que o arquivo é secreto

Para subir um nível na estrutura de pastas

Para deletar o arquivo

É um erro de digitação

4. O que é um "Anchor" (Âncora) no Markdown?

Um tipo de imagem pesada

Um link que leva a uma seção específica dentro da página

Uma proteção contra vírus

O rodapé do site

5. Qual destes elementos NÃO é essencial em um README profissional?

Título do projeto

Resumo de funcionalidades

Lista de compras pessoal do autor

Instruções de instalação

6. O que são "Badges" no GitHub?

Proteções contra hackers

Pequenos selos visuais que mostram status como versão, build ou licença

Moedas virtuais que o programador ganha

Nomes de comandos do Git

7. Como o MkDocs se beneficia de múltiplos arquivos .md?

Ele não se beneficia, fica mais lento.

Ele os transforma automaticamente em páginas de um site com menu de navegação.

Ele os junta todos em um único arquivo PDF.

Ele deleta os arquivos vazios.

8. Qual o símbolo usado no MkDocs para criar blocos de destaque (Admonitions)?

???

!!!

@@@

###

9. Por que devemos evitar Emojis em excesso na documentação?

Porque eles deixam o arquivo muito pesado

Porque podem distrair o leitor e prejudicar a seriedade técnica

Porque os computadores não entendem emojis

Porque é contra a lei

10. Qual a melhor forma de organizar a pasta `docs/` em um projeto grande?

Colocar todos os 500 arquivos soltos na raiz.

Criar subpastas lógicas (ex: `api/`, `guia-usuario/`, `setup/`).

Escrever tudo em um único arquivo gigante.

Não usar a pasta `docs/`.

Quiz 04 - Markdown Moderno para Computação

1. Qual símbolo usamos para cercar um código inline?

Apostrofo (')

Crase (`)

Aspas (")

Hashtag (#)

2. Como iniciamos um bloco de código de múltiplas linhas?

Com três crases (```)

Com três colchetes ([[)

Com três parênteses ((( )

Apenas dando enter

3. Como ativar o destaque de sintaxe (cores) em um bloco de código?

O Markdown adivinha sozinho.

Escrevendo o nome da linguagem logo após as crases iniciais (ex: ```python).

Colocando um link para a linguagem.

Usando emojis de computador.

4. Markdown é case-sensitive ao indicar a linguagem do código?

Sim, sempre.

Não, geralmente `Python` e `python` funcionam.

Depende do site/plataforma.

Markdown não aceita nomes de linguagens.

5. Para que serve a simulação de terminal (TermynalJS)?

Para hackear o site.

Para mostrar visualmente como comandos devem ser digitados e qual a saída esperada.

Para rodar o código do aluno no navegador.

Para substituir o VS Code.

6. Qual a melhor forma de documentar os parâmetros de uma função em Markdown?

Escrever um texto corrido gigante.

Usar uma tabela com as colunas Nome, Tipo e Descrição.

Usar apenas imagens do código.

Não documentar, o código se explica.

7. Como incluímos uma crase dentro de um código inline que já usa crases?

Usando crases duplas (``) para envolver o conteúdo.

Usando uma barra invertida (\`).

Não é possível.

Usando aspas.

8. O que é o destaque de sintaxe (Syntax Highlighting)?

Uma forma de deixar o texto maior.

A aplicação de diferentes cores para palavras-chave, variáveis e strings no código.

Um erro que acontece no Markdown.

Uma ferramenta de tradução automática.

9. Por que devemos documentar a saída do terminal?

Para ocupar espaço na página.

Para que o usuário saiba se o comando dele rodou com sucesso ao comparar os resultados.

Para mostrar que sabemos usar o Linux.

Apenas para decorar.

10. Podemos documentar APIs REST usando apenas Markdown?

Não, precisa de ferramentas como Word.

Sim, combinando títulos, tabelas e blocos de código JSON.

Apenas se a API for em Python.

Markdown não suporta HTTP.

Quiz 05 - Markdown Moderno para Computação

1. Quais símbolos são essenciais para criar uma tabela no Markdown?

{ } e [ ]

| e -

< > e /

# e *

2. Como centralizar o conteúdo de uma coluna na tabela?

Colocando dois pontos em ambos os lados dos hifens na linha separadora (`:---:`)

Colocando dois pontos apenas no início (`:---`)

Colocando dois pontos apenas no fim (`---:`)

Usando a tecla caps lock

3. Quantas linhas de hifens são necessárias, no mínimo, para separar o cabeçalho do conteúdo?

Uma linha contendo pelo menos três hifens (---) para cada coluna

Dez linhas

Nenhuma, basta o pipe

Uma linha de asteriscos (***)

4. Qual a sintaxe para um item de checklist concluído?

[o]

[v]

[x]

[*]

5. As checklists funcionam nativamente em qualquer visualizador de Markdown?

Sim, é um padrão universal.

Não, é uma extensão (GFM - GitHub Flavored Markdown) amplamente adotada.

Apenas no WhatsApp.

Apenas se o arquivo for em PDF.

6. Podemos inserir parágrafos e quebras de linha dentro de uma célula de tabela padrão?

Sim, usando o Enter.

Não, a tabela padrão do Markdown é limitada a uma única linha por célula.

Apenas se a tabela for centralizada.

Sim, usando o símbolo @.

7. Como alinhar uma coluna totalmente à direita?

`:---`

`---:`

`:---:`

`|---|`

8. Para que serve a organização de requisitos em tabelas?

Para deixar o documento mais colorido.

Para facilitar o rastreamento e a leitura rápida de informações técnicas.

Para ocupar menos espaço que uma lista.

Para esconder erros do código.

9. É possível formatar o texto (negrito, links) dentro de uma tabela?

Não, apenas texto simples.

Sim, quase toda a sintaxe básica funciona dentro das células.

Apenas negrito funciona.

Apenas links funcionam.

10. O que acontece se você esquecer de fechar uma linha da tabela com o símbolo | no final?

O computador explode.

A maioria dos leitores modernos (como VS Code e GitHub) corrige, mas pode quebrar em outros.

A tabela vira uma imagem.

O arquivo é corrompido.

Quiz 06 - Markdown Moderno para Computação

1. Como você menciona outro desenvolvedor em uma Issue ou PR?

#nome

@nome

!nome

/nome

2. O que acontece se você digitar #42 na descrição de um projeto no GitHub?

O texto fica em negrito.

É criado um link automático para a Issue ou Pull Request de número 42.

O sistema apaga a Issue 42.

Nada acontece, é apenas texto.

3. Qual comando na descrição de um PR fecha automaticamente uma Issue quando o PR é aceito?

Delete #10

Fixes #10 (ou Closes #10)

Bye #10

Done #10

4. Qual a principal função dos "Badges" no GitHub?

Bloquear usuários não autorizados.

Fornecer informações rápidas e visuais sobre o estado do projeto (build, versão, licença).

Aumentar a velocidade de download do código.

Substituir o arquivo README.

5. Qual site é a referência mundial para criar Badges personalizados?

Google.com

Shields.io

Facebook.com

Wikipedia.org

6. Como você insere um Emoji no GitHub usando apenas texto?

Desenhando com parênteses :)

Colocando o nome entre dois pontos (ex: :rocket:)

Colando uma imagem do Emoji.

Não é possível via texto.

7. O que acontece se você colar a URL de uma imagem no corpo de um comentário no GitHub?

Ela vira apenas um texto azul.

O GitHub tenta renderizar (exibir) a imagem automaticamente.

O comentário é bloqueado.

A imagem é deletada da fonte.

8. O que é um "Issue Template"?

Um vírus de computador.

Um modelo pré-preenchido com Markdown que ajuda o usuário a reportar um erro de forma organizada.

Uma forma de apagar todas as issues.

O título do repositório.

9. Como você faz referência a um commit específico em uma discussão?

Escrevendo o nome do autor do commit.

Colando o Hash (SHA) do commit (ex: a1b2c3d).

Desenhando uma seta.

Mandando um e-mail.

10. Por que o Markdown é fundamental para o sucesso de um projeto de código aberto?

Porque é a única linguagem que o GitHub aceita.

Porque permite criar uma documentação clara, colaborativa e fácil de ler para outros desenvolvedores.

Porque deixa o código mais rápido.

Foi inventado pelo dono do GitHub.

Quiz 07 - Markdown Moderno para Computação

1. É permitido usar tags HTML dentro de um arquivo .md?

Não, o processador descarta qualquer tag HTML.

Sim, o Markdown foi projetado para conviver com o HTML.

Apenas se o arquivo for renomeado para .html.

Sim, mas apenas a tag de imagem.

2. Qual tag HTML pode ser usada para centralizar um título no Markdown?

`` ou `

`

``

`

``

3. Qual a sintaxe correta para criar uma nota de rodapé no meio do texto?

[footer:1]

[^1]

#1

(1)

4. Onde a explicação da nota de rodapé deve ser escrita?

No começo do arquivo.

No final do arquivo ou em qualquer lugar, o processador as moverá para o final.

Logo após a palavra referenciada.

Em um arquivo separado.

5. O que é o "shortcode" de um Emoji?

O nome do emoji entre dois pontos (ex: :rocket:).

O número binário do emoji.

Uma abreviação como :)

O link da imagem do emoji.

6. Para que serve a tag `` em documentos Markdown?

Para criar listas.

Para sublinhar um texto.

Para deletar um arquivo.

Para inserir um vídeo.

7. Qual o efeito das tags `_{` e `^`?}

Deixam o texto maior ou menor.

Criam texto Subscrito (baixo) e Sobrescrito (cima).

Mudam a cor do texto para verde e vermelho.

São usadas para criar tabelas.

8. O que acontece se você errar a sintaxe da nota de rodapé (ex: esquecer o ^)?

O texto vira um link comum.

O processador não a reconhece como nota de rodapé e exibe o texto bruto `[1]`.

O documento não abre.

A página fica em branco.

9. Por que o uso de HTML deve ser moderado no Markdown?

Porque deixa o site mais lento.

Porque prejudica a legibilidade do código-fonte (bruto) do arquivo.

Porque é proibido pelo Google.

Porque o HTML é muito antigo.

10. Como se cria um link de "voltar ao topo" usando apenas Markdown?

[Voltar](#)

[Voltar ao Topo](#titulo-inicial) (referenciando o ID do título).

!back

Quiz 08 - Markdown Moderno para Computação

1. Qual a maior vantagem de dividir a documentação em múltiplos arquivos?

Gastar mais memória no HD.

Facilitar a manutenção e não sobrecarregar o usuário com excesso de informação em uma única página.

É uma regra obrigatória do Windows.

Deixa o arquivo mais difícil de hackear.

2. Por que links relativos (ex: ./docs/setup.md) são melhores que links absolutos?

Porque eles funcionam apenas no seu computador.

Porque eles permitem que o projeto funcione em qualquer computador ou servidor (como o GitHub) sem quebrar.

Porque são mais curtos.

Porque o Markdown não aceita links absolutos.

3. Como uma Checklist ajuda no "Sentimento de Progresso" do usuário?

Ela obriga o usuário a trabalhar mais.

Ela permite visualizar claramente o que já foi feito e o que falta terminar.

Ela muda a cor da tela.

Ela envia notificações para o celular.

4. Em um projeto profissional, onde deve ficar a explicação técnica das funções?

No topo do README.md.

Em arquivos dedicados (ex: api.md ou referencia.md) dentro da pasta docs/.

Em um comentário escondido.

No título do arquivo.

5. Qual o papel do diagrama Mermaid em uma documentação de projeto intermediário?

Substituir todo o texto.

Facilitar o entendimento visual de fluxos complexos ou arquitetura de pastas.

Deixar o site mais pesado.

É apenas um desenho decorativo.

6. O que compõe a "Tríade de Ouro" de um README de sucesso?

Nome do autor, data e hora.

Título/Badge, O que faz, e Como Instalar.

links para redes sociais, fotos das férias e música de fundo.

Apenas o código fonte.

7. Como garantir que um link de "Voltar ao Início" funcione em qualquer página da `docs/`?

Usando o link fixo `https://google.com`.

Usando o caminho relativo correto para o `index.md` ou `../README.md`.

Reiniciando o computador.

Usando a barra de endereços do navegador.

8. Qual a importância do destaque de sintaxe em uma referência de API?

Nenhuma, o código é lido igual.

Melhora a legibilidade e ajuda a identificar rapidamente palavras-chave, strings e funções.

Evita que o código tenha erros.

É uma regra de design do Pinterest.

9. O que é uma "Versão Intermediária" (v0.5) de uma documentação?

Uma documentação que só tem a metade do texto.

Um estágio onde os recursos fundamentais estão prontos, mas faltam recursos avançados (como automações ou vídeos).

Um arquivo que foi deletado por engano.

O nome da próxima aula.

10. Por que aprender a documentar é tão importante quanto aprender a programar?

Para passar o tempo.

Porque código sem documentação é difícil de manter e impossível de escalar em equipe.

Porque paga mais que programação.

Porque é mais fácil.

Quiz 09 - Markdown Moderno para Computação

1. O que é o Mermaid no contexto do Markdown?

Um personagem de desenho animado.

Uma ferramenta que transforma texto em diagramas e gráficos.

Um tipo de fonte colorida.

Um erro que acontece no navegador.

2. Qual é o identificador de bloco de código para iniciar um diagrama Mermaid?

```graph

```mermaid

```diagram

```chart

3. O que significa a direção `TD` em um fluxograma Mermaid?

Total Diagonal

Top Down (Cima para Baixo)

Two Dimensions (Duas Dimensões)

Texto Direto

4. Como definimos um nó com formato de Losango (Decisão) no Mermaid?

`ID[Texto]`

`ID{Texto}`

`ID((Texto))`

`ID(Texto)`

5. Qual a sintaxe para criar uma seta espessa entre dois nós?

`A --> B`

`A ==> B`

`A --- B`

`A .-> B`

6. Como adicionar texto em cima de uma linha de conexão?

`A -- Texto --> B`

`A [Texto] B`

`A (Texto) B`

`A {Texto} B`

7. Qual formato de nó é criado ao usar parênteses, como em `ID(Texto)`?

Retângulo perfeito.

Retângulo com cantos arredondados.

Círculo.

Estrela.

8. O Mermaid suporta a direção da direita para a esquerda?

Não, apenas de cima para baixo.

Sim, usando a sigla `RL` (Right to Left).

Sim, usando `DR`.

Apenas se o computador estiver configurado.

9. Por que usar Mermaid é melhor para documentação técnica do que colar uma foto do diagrama?

Porque a foto é mais bonita.

Porque o Mermaid é baseado em texto, facilitando o controle de versão (Git) e buscas por texto dentro do diagrama.

Porque fotos não funcionam no GitHub.

Porque Mermaid gasta menos bateria.

10. Podemos colocar links nos nós de um diagrama Mermaid?

Não, é apenas visual.

Sim, usando o comando `click`.

Apenas se o diagrama for centralizado.

Sim, mas apenas mudando a cor do nó.

Quiz 10 - Markdown Moderno para Computação

1. Qual a principal diferença entre um fluxograma (Aula 09) e um diagrama de sequência?

O fluxograma é colorido e o de sequência não.

O fluxograma foca na lógica e decisões, enquanto o de sequência foca na interação e troca de mensagens entre componentes ao longo do tempo.

O diagrama de sequência só funciona em Python.

Não há diferença.

2. Como definimos um Ator Humano em um diagrama de sequência Mermaid?

`person Usuario`

`actor Usuario`

`user Usuario`

`human Usuario`

3. Qual a sintaxe para uma mensagem de resposta (seta tracejada) no diagrama de sequência?

`A -> B`

`A -->> B`

`A ==> B`

`A ~~> B`

4. Para que serve o diagrama de Gantt?

Para desenhar rostos.

Para visualização de cronogramas, prazos e gerenciamento de projetos.

Para fazer cálculos matemáticos.

Para substituir tabelas.

5. Como iniciamos um Mapa Mental no Mermaid?

`map`

`mindmap`

`brainstorm`

`idea`

6. O que o comando `style A fill:#f9f` faz em um diagrama?

Deixa o texto em negrito.

Altera a cor de preenchimento do nó A.

Deleta o nó A.

Cria um link para o Instagram.

7. Podemos adicionar notas (caixas de comentário) em um diagrama de sequência?

Não, apenas setas.

Sim, usando o comando `Note right of ...` ou `Note left of ...`.

Apenas se o diagrama for pequeno.

Sim, mas as notas não aparecem no PDF.

8. O que acontece se você colocar `after a1` em uma tarefa de um gráfico de Gantt?

A tarefa será executada antes da a1.

A tarefa só começará quando a tarefa identificada como `a1` terminar.

A tarefa será deletada.

É um erro de sintaxe.

9. Qual o símbolo usado para o nó raiz (central) de um Mapa Mental?

`root((Texto))`

`center[Texto]`

`main{Texto}`

`top((Texto))`

10. Por que o Mermaid é considerado uma ferramenta "Docs as Code" (Documentação como Código)?

Porque é difícil de usar.

Porque os diagramas são escritos como texto/código, permitindo versionamento, automação e facilidade de edição.

Porque só funciona dentro do VS Code.

Porque foi criado por programadores para programadores.

Quiz 11 - Markdown Moderno para Computação

1. Qual o motor de exibição usado para renderizar matemática no navegador via Markdown?

Google Maps

MathJax

PhotoShop

Excel

2. Como delimitar uma fórmula para que ela apareça centralizada em seu próprio bloco?

Usando um único cifrão ($)

Usando cifrões duplos ($$)

Usando colchetes [[ ]]

Usando a hashtag #

3. Como se escreve uma fração (numerador sobre denominador) em LaTeX?

`/frac{a}{b}`

`\frac{a}{b}`

`frac[a,b]`

`(a/b)`

4. Qual símbolo usamos para indicar uma potência (ex: x ao quadrado)?

O sinal de mais (+)

O sinal de circunflexo (^)

O traço (-)

O asterisco (*)

5. Qual símbolo usamos para subscrito (ex: o 2 na fórmula da água)?

Ponto (.)

Underscore (_)

Vírgula (,)

Barra (/)

6. Como representar a raiz quadrada de X?

`root(x)`

`\sqrt{x}`

`\raiz{x}`

`\sqrt[x]`

7. O MathJax permite escrever fórmulas químicas?

Não, apenas matemática.

Sim, usando as mesmas regras de subscrito e símbolos.

Apenas se a fórmula for colorida.

Sim, mas precisa de um plugin pago.

8. Para que serve o comando `\pi`?

Para apitar.

Para exibir o símbolo grego Pi ($\pi$).

Para pular linha.

Para inserir uma foto.

9. Por que o MathJax é importante para a computação científica?

Porque deixa o texto mais rápido.

Porque permite uma comunicação precisa de algoritmos, fórmulas físicas e modelos matemáticos sem depender de imagens.

Porque funciona sem internet.

Porque foi criado por Albert Einstein.

10. O que acontece se você esquecer de fechar o cifrão ($)?

A página não carrega.

O texto após o cifrão pode ser interpretado erroneamente como código matemático ou apenas exibido como texto puro com o símbolo $.

O computador reinicia.

O arquivo é deletado.

Quiz 12 - Markdown Moderno para Computação

1. Qual nível de título (Heading) é reservado para o Título Principal do trabalho?

H3

H1

H6

H4

2. Como se cria visualmente um bloco de citação (Blockquote)?

Usando asteriscos (*)

Usando o sinal de "maior que" (>) no início do parágrafo

Usando colchetes [ ]

Usando o cifrão $

3. Para que servem as Notas de Rodapé em um contexto acadêmico?

Para escrever recados pessoais.

Para citar fontes bibliográficas e oferecer explicações que não devem poluir o corpo do texto.

Para substituir o título.

Para inserir vídeos.

4. O que significa a sigla TOC em documentação?

Tudo Organizado Correto

Table of Contents (Sumário)

Texto Opinativo Curto

Terminal Operacional Central

5. Como o Pandoc ajuda o estudante acadêmico?

Ele escreve o texto sozinho.

Ele converte arquivos Markdown para formatos como PDF, Word ou LaTeX seguindo regras complexas de formatação.

Ele apaga o arquivo se houver plágio.

É um editor de imagens.

6. Podemos usar diagramas Mermaid dentro de um artigo acadêmico em Markdown?

Não, é proibido.

Sim, são excelentes para mostrar fluxos de pesquisa e arquitetura de ideias.

Apenas se o diagrama for circular.

Apenas no modo escuro.

7. Qual a melhor forma de organizar tabelas de resultados de pesquisa?

Colocar uma foto do Excel.

Usar a sintaxe de Tabelas Markdown com alinhamento claro dos dados.

Escrever um parágrafo longo com todos os números.

Não usar tabelas.

8. Por que é importante usar links relativos ao citar outros documentos do mesmo projeto?

Para o link ficar azul.

Para garantir que a navegação funcione em qualquer plataforma onde o repositório for clonado.

Para economizar letras.

Porque o GitHub obriga.

9. O que é um "Blockquote" com múltiplos níveis?

Um erro de formatação.

Uma citação dentro de outra citação (usando `>>`).

Um título muito grande.

Uma lista de tarefas.

10. Qual a vantagem de usar Markdown para escrever um TCC em vez do Word?

O Word é pago e o Markdown é livre.

O Markdown permite focar no conteúdo e na estrutura, deixando a formatação visual complexa para ferramentas de exportação automatizadas.

Markdown não tem corretor ortográfico.

No Markdown as imagens nunca quebram o texto.

Quiz 13 - Markdown Moderno para Computação

1. Qual framework é usado para renderizar os slides a partir do Markdown neste curso?

PowerPoint

Reveal.js

Vue.js

Bootstrap

2. Como você indica o fim de um slide e o início do próximo?

Usando a hashtag #

Usando três hifens em uma linha isolada (---)

Usando a palavra `NEXT`

Pulando 10 linhas

3. O que é um "Fragmento" em uma apresentação de slides?

Um pedaço de código quebrado.

Um elemento que aparece de forma incremental no mesmo slide (clique a clique).

Uma imagem pequena.

Um erro de transição.

4. Qual a sintaxe para transformar um item de lista em um fragmento?

`(aparecer)`

`{ .fragment }`

`[item-lento]`

``

5. Onde as "Notas do Orador" costumam ficar no código Markdown?

No título do slide.

Dentro de uma tag `

No final de todo o documento.

Não é possível ter notas no Markdown.

6. Podemos usar Mermaid e MathJax dentro dos slides?

Não, os slides são apenas para texto.

Sim, todas as extensões do Markdown Moderno funcionam nos slides do Reveal.js.

Reservado apenas para o modo pago.

Sim, mas os diagramas ficam estáticos (não animam).

7. Qual a vantagem competitiva de slides em Markdown vs PowerPoint?

Markdown é mais colorido.

Facilidade de controle de versão (Git), portabilidade total e foco no conteúdo em vez de "perder tempo" com formatação manual de caixas de texto.

PowerPoint não aceita imagens.

Markdown é mais pesado que o PowerPoint.

8. O que acontece se você colocar muito texto em um único slide?

O texto diminui sozinho até caber.

O texto pode "transbordar" e ficar cortado na tela, prejudicando a leitura do público.

O slide vira dois slides automaticamente.

O navegador trava.

9. Como mudar o "Tema" (estilo visual) da apresentação?

Mudando a cor de cada letra individualmente.

Configurando o metadado `theme` (ex: black, white, league) nas configurações do plugin ou do arquivo.

Usando o Photoshop.

Não é possível mudar o tema.

10. slides Markdown podem ser exportados para PDF?

Não, apenas visualizados no navegador.

Sim, adicionando `?print-pdf` à URL ou usando ferramentas como o DeckTape.

Apenas se você tirar print de cada slide.

Sim, mas as fórmulas desaparecem.

Quiz 14 - Markdown Moderno para Computação

1. Qual o principal objetivo do Termynal.js na documentação?

Rodar o comando de verdade no computador do usuário.

Simular visualmente a experiência de usar um terminal, facilitando o aprendizado de ferramentas CLI.

Formatar tabelas.

Traduzir o site para inglês.

2. O que o símbolo `$` representa no início de uma linha em um bloco de terminal?

Indica que o valor é em dinheiro.

Indica uma linha de entrada de comando (Input) que será animada como se estivesse sendo digitada.

Indica o fim do documento.

Um erro de digitação.

3. Como o Termynal.js trata linhas que NÃO começam com nenhum símbolo especial?

Elas são ignoradas.

Elas são tratadas como saída do sistema (Output) e aparecem instantaneamente.

Elas travam a animação.

Elas mudam de cor para vermelho.

4. Por que simulações animadas são melhores que capturas de tela (screenshots)?

Porque ocupam mais espaço em disco.

Porque permitem que o usuário copie o texto dos comandos diretamente, além de serem mais leves e modernas.

Screenshots não funcionam no Google Chrome.

Não são melhores.

5. É possível pausar ou controlar a velocidade de digitação em cada comando?

Não, a velocidade é fixa.

Sim, através de atributos ou plugins específicos, mas a sintaxe básica já gerencia velocidades naturais.

Apenas se você escrever o código em Java.

Sim, mas apenas no Linux.

6. O que o símbolo `> ` (espaço após o sinal de maior) costuma representar em simulações?

Uma citação.

Continuação de um comando ou um prompt interativo específico.

Um erro de hardware.

O fim do terminal.

7. O Termynal.js exige que o MkDocs tenha um plugin específico habilitado?

Não, funciona em qualquer TXT.

Sim, é necessário que o tema ou um plugin de suporte processe o bloco `termynal`.

Apenas se o site for hospedado no GitHub.

Funciona apenas via Wi-Fi.

8. Qual o impacto visual de um bloco `termynal` em um tutorial de instalação?

Nenhum, é apenas enfeite.

Aumenta o engajamento e reduz a barreira de entrada para novos usuários, que visualizam o processo real.

Faz o computador do usuário ficar mais lento.

Oculta os erros do código.

9. Podemos usar blocos `termynal` dentro de slides do Reveal.js (Aula 13)?

Não.

Sim, o que cria apresentações técnicas extremamente dinâmicas e impressionantes.

Apenas se os slides forem em preto e branco.

Sim, mas a animação só funciona uma vez.

10. Qual a principal diferença entre um bloco de código `bash` e um bloco `termynal`?

Nenhuma, são sinônimos.

Blocos `bash` aplicam cores estáticas de sintaxe; blocos `termynal` aplicam animação de digitação e comportamento de terminal.

`bash` é para Windows e `termynal` é para Mac.

O `termynal` custa dinheiro.

Quiz 15 - Markdown Moderno para Computação

1. Qual a maior vantagem de integrar Mermaid, MathJax e Reveal.js em um único repositório Markdown?

O site fica mais pesado.

Você centraliza o conhecimento, a documentação técnica e o material de apresentação em uma única fonte de verdade (Markdown), facilitando a manutenção.

É a única forma de ganhar o certificado.

Não há vantagem.

2. O que é "Single Source of Truth" (Fonte Única de Verdade) no contexto do curso?

Ter apenas um arquivo no computador.

Usar o Markdown para gerar o site, os slides, os quizzes e os manuais, garantindo que a informação seja consistente em todos os lugares.

Nunca mudar o código.

Copiar e colar a mesma coisa em vários arquivos.

3. Por que o deploy no GitHub Pages (gh-pages) é o passo final ideal?

Porque é o site mais seguro do mundo.

Porque torna sua documentação pública e acessível através de uma URL real, profissionalizando o seu portfólio.

Porque gasta menos internet.

Porque é obrigatório no Windows.

4. Qual componente do curso você usaria para mostrar a hierarquia de ideias de um novo app?

Tabelas.

Mermaid (Mindmaps).

MathJax.

Termynal.js.

5. Para que servem os Badges do Shields.io no seu projeto integrador?

Para deixar o site colorido.

Para mostrar rapidamente o status do projeto (versão, build, licença) de forma visual e padronizada.

Para substituir o título do projeto.

Para clicar e ganhar prêmios.

6. Qual a importância de testar os links relativos antes da entrega final?

Nenhuma.

Evitar que o usuário encontre páginas de erro (404) e garantir que a navegação entre aulas e projetos seja fluida.

Deixar o código mais bonito.

Fazer o site carregar mais rápido.

7. Como você documentaria um cálculo complexo de taxa de juros no seu projeto?

Tirando uma foto da calculadora.

Usando a sintaxe MathJax (LaTeX) para que a fórmula seja renderizada com tipografia matemática perfeita.

Escrevendo tudo em uma única linha.

Usando negrito em todos os números.

8. O que o Termynal.js adiciona à seção de "Instalação" do seu projeto?

Nada, é apenas um cosmético.

Interatividade e realismo, mostrando exatamente como os comandos devem ser digitados e qual o tempo de resposta esperado.

Um vírus no computador.

Uma trilha sonora.

9. Qual o papel do arquivo `mkdocs.yml` nesse ecossistema integrado?

Guardar senhas do usuário.

Configurar o tema, o menu de navegação, os plugins (Mermaid, Reveal, etc.) e os metadados do site.

É um arquivo que deve ser apagado antes do deploy.

Ele serve para escrever o código em Python.

10. Ao finalizar o Projeto Integrador, o que você construiu?

Apenas alguns arquivos de texto.

Um sistema completo de documentação interativa e moderna seguindo os padrões "Docs as Code".

Uma apresentação de slides estática.

Um site que não pode ser atualizado.

Quiz 16 - Markdown Moderno para Computação

1. Qual a sensação de completar as 16 aulas de Markdown Moderno?

Cansaço.

Empoderamento técnico para criar documentações profissionais, interativas e escaláveis.

Indiferença.

Confusão.

2. O que é o Pandoc no ecossistema do Markdown?

Um urso que gosta de código.

Uma ferramenta de conversão universal que transforma Markdown em PDF, DOCX, LaTeX e muito mais.

O criador do Markdown.

Um plugin do VS Code.

3. Qual a importância de usar Tags no Git (como v1.0)?

Nenhuma.

Criar "marcos" permanentes no seu código, facilitando o gerenciamento de versões e releases profissionais.

Para o código ficar mais rápido.

Para deletar o histórico antigo.

4. Além do MkDocs, quais outros geradores de sites estáticos (SSG) são populares?

Paint e Word.

Hugo, Jekyll e Docusaurus.

Excel e PowerBI.

Não existem outros.

5. Para que serve o CSS avançado no contexto deste curso?

Para escrever a lógica do sistema.

Para customizar totalmente o visual do seu site MkDocs ou dos seus slides Reveal.js, criando uma identidade única.

Para fazer cálculos matemáticos.

Para substituir o Markdown.

6. O que caracteriza um "Markdown Master"?

Saber apenas negrito e itálico.

Dominar a filosofia "Docs as Code" e saber integrar ferramentas visuais e interativas para comunicar conhecimento técnico de forma eficaz.

Escrever 1000 linhas de texto por dia.

Ter o repositório no GitHub.

7. Qual foi o módulo mais focado em "visualização de dados e arquitetura"?

Módulo 1.

Módulo 3 (Mermaid e MathJax).

Módulo 2.

Plano de Ensino.

8. Como a documentação afeta a carreira de um desenvolvedor?

Não afeta.

Desenvolvedores que documentam bem são mais valorizados, pois facilitam a manutenção do código e a comunicação com a equipe.

Apenas quem escreve mal o código precisa documentar.

Documentação é tarefa exclusiva de estagiários.

9. Qual a última ação recomendada antes de considerar o projeto integrador concluído?

Deletar os arquivos.

Realizar o deploy final e fazer uma auditoria completa de links e renderização no GitHub Pages.

Mudar o título para "Fim".

Criar uma conta no Facebook.

10. Qual o lema final do curso?

"Markdown é difícil."

"Documentação não precisa ser estática. Ela pode ser uma experiência." 🚀

"Usem PowerPoint."

"Fim do arquivo."

Slides

Slides das Aulas 🎭

Acesse as apresentações interativas de cada aula diretamente no seu navegador.

Módulo 1: Fundamentos e Escrita Técnica

Slide 01: Introdução ao Markdown
Slide 02: Sintaxe Básica
Slide 03: Organização e Boas Práticas
Slide 04: Markdown para Programação

Módulo 2: Estrutura e Dados

Slide 05: Tabelas e Estrutura Técnica
Slide 06: Markdown + GitHub
Slide 07: Markdown Estendido
Slide 08: Projeto Intermediário

Módulo 3: Visualização e Ciência

Slide 09: Diagramas com Mermaid
Slide 10: Diagramas Avançados
Slide 11: Fórmulas Matemáticas com MathJax
Slide 12: Markdown para Conteúdo Acadêmico

Módulo 4: Automação e Entrega

Slide 13: Apresentações com Reveal.js
Slide 14: Simulação de Terminal com Termynal.js
Slide 15: Projeto Integrador
Slide 16: Apresentação Final

Voltar para o Início

Aula 01: Introdução ao Markdown 🚀

A Revolução do Texto Simples ✍️

O que vamos aprender hoje? 🎯

O que é Markdown? 🤔
Por que utilizar? 🌟
Onde ele brilha? 🌍
Ferramentas essenciais 🛠️
O ecossistema MkDocs 🏗️

1. O que é Markdown? 🤔

Uma linguagem de marcação leve.

Criada em 2004 por John Gruber e Aaron Swartz.

Foca na legibilidade e na estrutura.

Texto Simples vs. Word ⚖️

Word: Foca na aparência (WYSIWYG).
Markdown: Foca no conteúdo (WYSIOM - What You See Is One Markup).

"Markdown is intended to be as easy-to-read and easy-to-write as is feasible."

2. Por que utilizar? 🌟

Portabilidade: Qualquer editor abre.

Universalidade: Funciona em Mac, Windows, Linux, Android e iOS.

Versionamento: Amigável ao Git e GitHub.

3. Onde ele brilha? 🌍

GitHub/Lab: README.md, Issues, PRs.
Documentação: API, Manuais Técnicos.
Blogs: Jekyll, Astro, Hugo.
Acadêmico: Trabalhos e Relatórios.

Markdown no GitHub 🐙

Todo grande projeto começa com um README.md.

É o cartão de visitas do seu código!

4. Ferramentas Essenciais 🛠️

VS Code (com plugins) 💻
Typora (minimalista) ✍️
Obsidian (conhecimento) 🧠

Preview no VS Code 🖥️

No VS Code, use Ctrl + Shift + V.

Veja seu texto ganhar vida instantaneamente!

5. O Ecossistema MkDocs 🏗️

Ele pega seu .md e transforma em...

Sites Profissionais! 🚀

Como o site deste curso que você está vendo agora.

Diagramas (Mermaid) 🧜‍♀️

Podemos criar gráficos usando apenas texto!

mermaid graph LR Texto["Texto .md"] --> Script["MkDocs Build"] Script --> Site["Site Estático"]

Simulação de Terminal 🐚

Demonstrando comandos reais:

$ mkdir meu-projeto
$ cd meu-projeto
$ touch README.md

Exemplo de Código 💻

# Título 1
Este é um **negrito** e este é um *itálico*.
- Item 1
- Item 2

Markdown é Futuro 🚀

Muitas ferramentas modernas (Notion, Slack) usam atalhos de Markdown.

Aprender Markdown é aprender a escrever melhor para a web.

Módulos do Curso 📚

Módulo 1: Fundamentos 🧱
Módulo 2: Profissional 🏗️
Módulo 3: Diagramas e Ciência 🔌
Módulo 4: Interatividade 🚀

Mini-Projeto 🎨

Crie seu primeiro README.

Nome 👤
Bio 🗒️
Objetivos 🎯

Exercício Rápido 🧠

Qual a extensão dos arquivos Markdown?

A) .markdown B) .md C) Ambos! ✅

Resumo da Aula 📝

Markdown = Texto Simples + Marcação.
Usado no GitHub e em Documentação.
MkDocs é nosso motor de site.

Próxima Parada... 🚂

Aula 02 - Sintaxe Básica ✍️

Vamos aprender títulos, ênfase, listas e muito mais!

Obrigado! 🙏

Dúvidas? Acesse nosso fórum no repositório!

Ver Aula 02

Aula 02: Sintaxe Básica ✍️

A Arte da Formatação Escrita ✨

O que vamos aprender hoje? 🎯

Títulos Hierárquicos 🏷️
Estilos de Texto (Ênfase) ✨
Listas Organizadas 📋
Links e Imagens 🔗
Melhores Práticas 🌟

1. Títulos (Headings) 🏷️

No Markdown, estrutura é tudo!

Usamos o símbolo de hashtag #.

Níveis de Título 🔝

H1 - Título Principal

H2 - Seção

H3 - Subseção

H4..H6 - Detalhes

Dica de Ouro 💡

Use apenas um H1 por página.

Pense como um sumário de livro.

Mantenha a hierarquia lógica!

2. Estilos de Texto ✨

Como dar ênfase ao que importa?

Negrito: **Texto** ou __Texto__
Itálico: *Texto* ou _Texto_
~~Riscado~~: ~~Texto~~

Combinando Estilos 🎭

Podemos fazer Negrito e Itálico usando 3 símbolos.

Exemplo: ***Uau!***

3. Listas 📋

Ótimas para organizar pensamentos e requisitos.

Listas Não Ordenadas 🔹

Item 1
Item 2
- Subitem (use 4 espaços)

Símbolos aceitos: -, *, +.

Listas Ordenadas 🔢

Primeiro passo
Segundo passo
Terceiro passo

Markdown renunera automaticamente se você errar!

4. Links 🔗

Ponte para o conhecimento.

Sintaxe: [Texto](URL)

Exemplo: [GitHub](https://github.com)

Imagens 🖼️

Quase igual ao link, mas com um grito: !

Sintaxe: ![Legenda](URL)

Exemplo de Imagem 📸

![Logo Markdown](https://goo.gl/3mdURL)

A legenda é importante para acessibilidade! ♿

5. Praticando no Terminal 🐚

$ echo "# Perfil" > perfil.md
$ echo "**Nome:** Ricardo" >> perfil.md
$ cat perfil.md

Estrutura Visual 🧜‍♀️

mermaid mindmap root((Sintaxe)) Estilo Negrito Italico Riscado Estrutura H1 H2 H3 Listas Ordenada Bullet

Exercício de Fixação 🧠

Como colocar um link em uma imagem?

[ ![Imagem](URL_IMG) ](URL_LINK)

Tente no seu projeto de hoje! 🚀

Mini-Projeto 🎨

Crie seu perfil.md.

Nome (H1)
Bio (H2 + Itálico)
Skills (Lista)
Link LinkedIn/GitHub

Resumo da Aula 📝

# para títulos.
* para ênfase.
[]() para links.
![]() para imagens.

Próxima Parada... 🚂

Aula 03 - Organização e Boas Práticas 📂

Como estruturar múltiplos arquivos e criar READMEs profissionais.

Obrigado! 🙏

"Sua documentação é tão boa quanto sua clareza."

Ver Aula 03

Aula 03: Organização e Boas Práticas 📂

Construindo Documentação de Elite 🏗️

O que vamos aprender hoje? 🎯

Estrutura Modular 🧱
Navegação Relativa 🔗
README Profissional 🐙
Destaques (Admonitions) 💡
Padrões de Mercado 🌟

1. Estrutura Modular 🧱

Um arquivo gigante é difícil de manter.

Dividir para conquistar!

Crie uma estrutura lógica de pastas e arquivos.

Exemplo de Estrutura 📂

$ ls docs/
intro.md
guia-instalacao.md
faq.md

Isso facilita a busca e a leitura.

2. Navegação Relativa 🔗

Como ligar as peças do quebra-cabeça?

Mesma pasta: [Link](arquivo.md)
Pasta pai: [Link](../../README.md)
Subpasta: [Link](pasta/arquivo.md)

Links de Seção (Anchors) ⚓

Deseja pular para o final?

Sintaxe: [Ir para Contato](#contato)

Cria uma navegação interna super ágil!

3. O README Profissional 🐙

É o seu "cartão de visitas" técnico.

O que não pode faltar?

Anatomia de um README 📍

Título & Badges
Descrição Visual (Capturas de tela)
Quick Start (Como rodar agora?)
Checklist de Progresso

Badges (Selo de Qualidade) 🎖️

Pequenos indicadores visuais úteis.

![Status](https://img.shields.io/badge/Status-Pronto-green)

Gera confiança imediata no usuário.

4. Destaques (Admonitions) 💡

Atraia o olhar para o que importa.

Dica

Markdown é vida!

!!! info "Nota" Informação relevante aqui.

Tipos de Alertas 🚨

!!! note (Azul)
!!! tip (Verde)
!!! warning (Laranja)
!!! danger (Vermelho)

Emojis: Use com Moderação 😊

Eles ajudam na quebra de blocos de texto.

Mas... não vire um chat de figurinhas! 🚫

Mantenha o tom profissional.

Estrutura do Site (Mermaid) 🧜‍♀️

mermaid graph TD A[index.md] --> B[Introdução] A --> C[Configuração] C --> D[Variáveis de Ambiente] A --> E[Referência API]

5. Padrões de Mercado 🌟

Keep It Simple: Linguagem clara.
Consistency: Use os mesmos termos sempre.
Accessibility: Legendas em todas as imagens.

Praticando no Terminal 🐚

$ mkdir docs
$ touch docs/index.md
$ echo "## Bem-vindo" > docs/index.md

Exercício Rápido 🧠

Como volto um nível de pasta no Markdown?

A) /.. B) ../ ✅ C) --back

Mini-Projeto 🎨

Crie sua pasta docs/.

Link README -> docs/index
Link docs/index -> docs/anotacoes
Use Checklists no README!

Resumo da Aula 📝

Divida o conteúdo em arquivos lógicos.
Use caminhos relativos para interligar.
Capriche no README com Badges e Alertas.

Próxima Parada... 🚂

Aula 04 - Markdown para Programação 💻

Blocos de código, destaque de sintaxe e documentação de APIs.

Obrigado! 🙏

"Sua documentação é a interface do seu código."

Ver Aula 04

Aula 04: Markdown para Programação 💻

Documentando Código como um Pró ⚙️

O que vamos aprender hoje? 🎯

Blocos de Código 📦
Destaque de Sintaxe ✨
Simulação de Terminal 🐚
Documentação de APIs 📡
Boas Práticas Técnicas 🌟

1. Blocos de Código e Sintaxe ⚙️

Código no Markdown pode ser de dois tipos.

Código Inline ⌨️

Para pequenas referências no meio do texto.

Exemplo: "A variável x recebe 10."

Sintaxe: Usamos crases simples `.

Blocos de Código (Fenced) 📦

Para grandes trechos de lógica.

Sintaxe: Três crases ``` no início e no fim.

2. Destaque de Sintaxe ✨

Não basta mostrar o código, ele tem que ser colorido!

Basta indicar a linguagem após as crases.

Exemplo Python 🐍

def hello():
    print("Markdown é top!")

Indicação: ```python

Exemplo Web 🌐

const app = () => {
    console.log("Olá Mundo!");
}

Indicação: ```javascript

3. Simulação de Terminal 🐚

Documentar comandos de instalação é vital.

O termynal torna isso interativo!

Exemplo de Terminal 🐚

$ cd projeto
$ npm install
$ npm run dev

Mostra a jornada do dev passo a passo.

4. Documentação de APIs 📡

Markdown é a base para documentar REST APIs.

Use Tabelas + Blocos JSON.

Exemplo de Endpoint 📍

POST /v1/login

Parâmetro	Tipo	Descrição
`email`	string	Email do usuário
`senha`	string	Senha criptografada

Retorno em JSON 📦

{
  "status": "success",
  "token": "ey123..."
}

Fluxo de Trabalho (Mermaid) 🧜‍♀️

mermaid graph LR A[Código Bruto] --> B(Markdown Parser) B --> C{Tem Linguagem?} C -->|Sim| D[Realce de Cores] C -->|Não| E[Texto Plano]

5. Boas Práticas Técnicas 🌟

Comentários: Inclua comentários no código.
Acessibilidade: Explique o que o código faz antes do bloco.
Versão: Indique para qual versão da linguagem o código serve.

Praticando no Terminal 🐚

$ echo "print('Ola')" > manual.md
$ cat manual.md

Exercício Rápido 🧠

Como indicar realce para a linguagem "Go"?

A) ```go ✅ B) #language: go C) (go)

Mini-Projeto 🎨

Crie o documentacao.md.

Nome da Função (H2)
Bloco de Código (Syntax Highlight)
Tabela de Parâmetros
Simulação de Execução (Termynal)

Resumo da Aula 📝

Crase simples para inline.
Crase tripla para blocos.
Nomes de linguagens para cores.
Tabelas para organizar APIs.

Fim do Módulo 1! 🏆

Você já domina os fundamentos!

Na próxima aula (Módulo 2)...

Aula 05 - Tabelas e Estrutura Técnica 📊

Obrigado! 🙏

"Documentar é um ato de amor ao seu 'eu' do futuro."

Ver Aula 05

Aula 05: Tabelas e Estrutura Técnica 📊

Organizando Dados e Requisitos 🧱

O que vamos aprender hoje? 🎯

Criação de Tabelas 📊
Alinhamento de Colunas 📏
Checklists (GFM) ✅
Organização de Requisitos 🏗️
Práticas Profissionais 🌟

1. Tabelas no Markdown 📊

O terror de muitos, mas a alegria dos dados!

Usamos o pipe | e o hífen -.

Anatomia de uma Tabela 📍

| Cabeçalho 1 | Cabeçalho 2 |
| ----------- | ----------- |
| Linha 1A    | Linha 1B    |
| Linha 2A    | Linha 2B    |

Exemplo Real 🏷️

ID	Produto	Preço
01	Mouse	50.00
02	Teclado	150.0

2. Alinhamento de Colunas 📏

Controlamos com os dois pontos : na linha de separação.

Tipos de Alinhamento 🔝

Esquerda: :--- (Padrão)
Centro: :---:
Direita: ---:

Exemplo de Alinhamento ⚖️

Esquerda	Centro	Direita
Texto	Texto	Texto

3. Checklists (Listas de Tarefas) ✅

Herança do GitHub (GFM).

Essencial para produtividade.

Sintaxe da Checklist ✍️

Tarefa Concluída
Tarefa Pendente

Use um espaço após o hífen!

4. Organização de Requisitos 🏗️

Como documentar software profissionalmente?

Tabelas de Requisitos Funcionais (RF).

Exemplo de Requisito 📋

ID	Requisito	Criticidade
RF01	Recuperar senha	Alta
RF02	Mudar cor do tema	Baixa

Estrutura Técnica (Mermaid) 🧜‍♀️

mermaid graph TD DOC[Documentaçao Técnica] --> REQ[Requisitos] DOC --> DATA[Modelagem de Dados] REQ --> TAB1[Tabela de Requisitos] DATA --> TAB2[Dicionário de Dados] TAB1 --> CHECK[Checklist de Validaçao]

5. Práticas Profissionais 🌟

Clareza: IDs únicos para itens.
Escaneabilidade: Cabeçalhos curtos.
Consistência: Use o mesmo estilo de alinhamento em tabelas similares.

Praticando no Terminal 🐚

$ echo "| Info | Valor |" > dados.md
$ echo "| :--- | ---: |" >> dados.md
$ echo "| Memoria | 16GB |" >> dados.md
$ cat dados.md

Destaque em Células 💡

Você pode usar **negrito** e `código` dentro das tabelas!

Tente colocar um link em uma célula.

Exercício Rápido 🧠

Como centralizar uma coluna?

A) --- B) :---: ✅ C) |---|

Mini-Projeto 🎨

Crie seu requisitos.md.

Nome do App (H1)
Tabela de Requisitos (ID, Desc, Priority)
Checklist de Tarefas Previstas

Resumo da Aula 📝

| separa, - estrutura.
: define o alinhamento.
[ ] e [x] para tarefas.
Tabelas = Organização técnica.

Próxima Parada... 🚂

Aula 06 - Markdown + GitHub 🐙

Issues, Pull Requests, Badges e automação.

Obrigado! 🙏

"Sua organização hoje reflete sua paz amanhã."

Ver Aula 06

Aula 06: Markdown + GitHub 🐙

O que vamos aprender hoje? 🎯

Issues e Pull Requests 📝
Menções e Referências 👤
Templates Repetíveis 🧱
Badges de Status 🎖️
GitHub Actions & Markdown ⚙️

1. Issues e Pull Requests 📝

Markdown é a alma da comunicação no GitHub.

Tabelas, Checklists e Blocos de Código são seus aliados.

Estrutura de uma Issue 📍

Título: Curto e objetivo.
Descrição: Use Markdown para organizar o problema.
Evidências: Prints e Blocos de Logs.

2. Menções e Referências 👤

O GitHub "entende" seu texto.

@usuário: Chama a atenção de alguém.
#número: Linka para outra Issue/PR.

Automação com Texto 🤖

"Fixes #10" na descrição de um PR...

Fecha a issue automaticamente ao fazer o Merge! 🚀

3. Templates Repetíveis 🧱

Não comece do zero sempre!

GitHub permite criar modelos de Markdown para Issues.

Garante que o usuário mande todas as info necessárias.

Anatomia do Template 🏗️

### Passos para reproduzir
- [ ] Passo 1
- [ ] Passo 2

### Ambiente
| OS | Versão |
| -- | ------ |
| Win| 11     |

4. Badges de Status 🎖️

Símbolos de maturidade do projeto.

Mostram ao mundo que seu código é testado e atualizado.

Shields.io 🛡️

A API preferida para gerar badges.

![Build](https://img.shields.io/badge/build-passing-success)

5. GitHub Actions & Markdown ⚙️

As Actions podem atualizar seu Markdown.

Ex: Gerar lista de contribuidores automaticamente.

Fluxo Automatizado (Mermaid) 🧜‍♀️

mermaid graph LR P[Push Code] --> A[GitHub Action] A --> T[Rodar Testes] T -->|Sucesso| B[Verifica Badge Green] T -->|Falha| C[Verifica Badge Red] B --> R[README.md Atualizado]

O Markdown torna o código humano.

Facilita a revisão por outros devs.

Praticando no Terminal 🐚

$ echo "@ricardotecpro olhe este bug!" > report.md
$ echo "Relacionado a #15" >> report.md
$ cat report.md

Exercício Rápido 🧠

Qual símbolo usamos para linkar uma issue?

A) @ B) # ✅ C) !

Mini-Projeto 🎨

Crie seu bug_report.md.

Badges de Severidade
Checklist de Reprodução
Tabela de Ambiente

Resumo da Aula 📝

@ para pessoas, # para tarefas.
Fixes automatiza o fluxo.
Shields.io traz beleza e info.
Templates reduzem o trabalho braçal.

Próxima Parada... 🚂

Aula 07 - Markdown Estendido ➕

HTML embutido, Emojis e notas de rodapé profissionais.

Obrigado! 🙏

"Comunique-se bem e seu código irá longe."

Ver Aula 07

Aula 07: Markdown Estendido ➕

Elevando o Nível Visual 🚀

O que vamos aprender hoje? 🎯

HTML no Markdown 🌐
Emojis e Simbologia 😎
Notas de Rodapé 📝
Formatação Científica 🔢
Equilíbrio Visual ⚖️

1. HTML no Markdown 🌐

O Markdown é amigável ao HTML.

Sintaxe básica não resolve tudo?

Chame o HTML para o resgate!

Centralizando Conteúdo 🎯

<p align="center">
  Texto Centralizado
</p>

Ideal para logos e títulos especiais.

Cores customizadas 🎨

<span style="color: blue;">Texto Azul</span>

Use com cautela para não virar um carnaval! 🍬

2. Emojis e Simbologia 😎

Comunicação visual rápida e intuitiva.

Shortcodes: :rocket:, :bulb:, :warning:.

Hierarquia com Emojis 👑

🔴 Urgente / Erro
🟡 Atenção / Info
🟢 Sucesso / Pronto

3. Notas de Rodapé 📝

Documentação acadêmica e profissional.

Referencie sem interromper o raciocínio.

Sintaxe da Nota 🔗

No texto: Afirmação[^1].

No rodapé: [^1]: Referência.

O parser cria o link de ida e volta! 🔄

4. Formatação Científica 🔢

Precisa escrever H₂O ou E = mc²?

Subscrito: 2
Sobrescrito: 2

5. Equilíbrio Visual ⚖️

"Menos é mais."

Markdown deve ser fácil de ler no Editor (Bruto).

Excesso de HTML "suja" o arquivo .md.

Fluxo de Renderização (Mermaid) 🧜‍♀️

mermaid graph TD A[.md + HTML] --> B(Parser MkDocs) B --> C{Detecta Tag?} C -->|Sim| D[Renderiza como HTML] C -->|Não| E[Renderiza como Texto] D --> F[Site Final] E --> F

Praticando no Terminal 🐚

$ echo "<u>Frase Sublinhada</u>" > extra.md
$ echo "H<sub>2</sub>O" >> extra.md
$ cat extra.md

Exercício Rápido 🧠

Como criar uma nota de rodapé?

A) [1] B) [^1] ✅ C) #1

Mini-Projeto 🎨

Crie seu artigo.md.

Título colorido (HTML)
Notas de rodapé explicativas
Uso de sub/sobrescrito

Resumo da Aula 📝

HTML complementa o Markdown.
Notas de rodapé para referências.
Sub/Sobrescrito para ciência.
Mantenha a legibilidade bruta.

Próxima Parada... 🚂

Aula 08 - Projeto Intermediário 🏗️

Vamos unir tudo o que aprendemos até aqui!

Obrigado! 🙏

"Detalhes transformam um documento em uma obra."

Ver Aula 08

Aula 08: Projeto Intermediário 🏗️

Consolidando Conhecimento de Elite 🏆

O que vamos aprender hoje? 🎯

Consolidação de Módulos 🧱
Interconexão de Documentos 🔗
Design de Experiência (UX) 🎨
Checklist de Lançamento ✅
Apresentação do Desafio 🚀

1. Consolidação de Módulos 🧱

Já vimos: - Sintaxe Básica ✍️ - Organização de Arquivos 📂 - Markdown p/ Programadores 💻 - Tabelas e Requisitos 📊 - Integração com GitHub 🐙

2. Interconexão de Documentos 🔗

O segredo de um manual profissional.

Tudo deve estar a um clique de distância.

Use links relativos inteligentes.

3. Design de Experiência (UX) 🎨

Documentação também é design!

Use espaços em branco.
Destaque o que é crítico (Alertas).
Menos texto, mais estrutura.

4. Checklist de Lançamento ✅

Sua documentação está pronta para o mundo?

README.md com Badges?
Links testados e funcionando?
Código com destaque de sintaxe?

Erros Comuns para Evitar 🚫

Falta de imagens/exemplos.
Caminhos absolutos (C:\Users...).
Erros de português.
Falta de link de volta ao início.

5. O Grande Desafio 🚀

Documentar o TaskMaster CLI.

Um pequeno gestor de tarefas via terminal.

Veja os requisitos no diretório de projetos!

Estrutura do Desafio (Mermaid) 🧜‍♀️

mermaid mindmap root((TaskMaster CLI)) Intro O que e? Badges status Setup Instalaçao Requirements API Comandos Exemplos Social Contribuidores Feedback

Dica Técnica: Versionamento 🐚

Sempre que terminar uma grande parte da doc...

Dê um commit e crie uma Tag!

$ git commit -m "docs: v0.5 conclude"
$ git tag v0.5

Exercício Rápido 🧠

O que deve ser a primeira coisa que o usuário vê?

A) O código fonte completo. B) O README.md com a visão geral. ✅ C) A lista de bugs.

Resumo do Módulo 📝

Markdown transforma texto em valor.
Estrutura é mais importante que decoração.
GitHub é a casa oficial da sua doc.

Fim do Segundo Módulo! 🥈

Parabéns! Você já é um documentarista profissional.

Próxima Parada... 🚂

Módulo 3 - Diagramas e Visualização 🔌

Aula 09 - Mermaid na Prática 🧜‍♀️

Obrigado! 🙏

"Sua documentação é a voz do seu projeto quando você não está presente."

Ver Aula 09

Aula 09: Mermaid na Prática 🧜‍♀️

A Arte de Documentar Visualmente 📊

O que vamos aprender hoje? 🎯

O Poder do Mermaid 🧜‍♀️
Sintaxe de Fluxogramas 🧱
Anatomia dos Nós 📦
Conexões e Lógica ➡️
Melhores Práticas Visuais 🌟

1. O Poder do Mermaid 🧜‍♀️

Diagramas baseados em texto.

Esqueça o "Print Screen"!

O código é o seu gráfico.

Por que Mermaid? 🤔

Fácil de atualizar.
Amigo do Git (Controle de Versão).
Renderiza em tempo real no VS Code/GitHub.

2. Sintaxe de Fluxogramas 🧱

Iniciamos com o bloco mermaid.

Palavra-chave: graph ou flowchart.

Direções de Fluxo 🚀

TD: Top Down (Cima -> Baixo)
LR: Left Right (Esquerda -> Direita)
RL: Right Left
BT: Bottom Top

3. Anatomia dos Nós 📦

O ID é interno, o [Texto] é visual.

A[Retângulo] -> Processo
B(Arredondado) -> Início/Fim
C{Losango} -> Decisão

Nós Especiais 🎨

D((Círculo))
E>Bandeira]
F{{ Hexágono }}

4. Conexões e Lógica ➡️

Como os nós se conversam?

A --> B (Seta simples)
A --- B (Linha)
A ==> B (Negrito)

Adicionando Texto na Linha ✍️

A -- Sucesso --> B

Essencial para caminhos de "Sim" e "Não".

Exemplo Real 🧜‍♀️

mermaid graph TD A(Abrir App) --> B{Logado?} B -- Sim --> C[Ver Feed] B -- Não --> D[Tela Login]

Estilizando Nós 💅

Podemos mudar cores e bordas via código!

mermaid graph LR A[Início] --> B[Fim] style A fill:#f9f,stroke:#333,stroke-width:4px

5. Melhores Práticas Visuais 🌟

Simplicidade: Não tente descrever o código inteiro.
Coerência: Use as mesmas formas para os mesmos conceitos.
Hierarchy: Mantenha o fluxo em uma única direção.

Praticando no Terminal 🐚

$ echo "graph LR" > diagrama.md
$ echo "    A --> B" >> diagrama.md
$ cat diagrama.md

Exercício Rápido 🧠

Qual direção cria um fluxo da esquerda para a direita?

A) TD B) LR ✅ C) BT

Mini-Projeto 🎨

Crie seu fluxo_processo.md.

Diagrama Mermaid de 5 nós
Pelo menos um No de Decisão
Setas com nomes das rotas

Resumo da Aula 📝

Mermaid = Diagrama em Texto.
Nós definem a Função.
Direções definem o Sentido.
Siga as boas práticas de UX.

Próxima Parada... 🚂

Aula 10 - Mermaid Avançado ⚡

Diagramas de Sequência, Gantt e Mapas Mentais.

Obrigado! 🙏

"Um diagrama Mermaid vale mais que mil linhas de texto."

Ver Aula 10

Aula 10: Mermaid Avançado ⚡

Interação, Tempo e Criatividade 🧠

O que vamos aprender hoje? 🎯

Diagramas de Sequência 🛡️
Gráficos de Gantt (Tempo) 📅
Mapas Mentais 🧠
Estilização Customizada 💅
Interatividade 🖱️

1. Diagramas de Sequência 🛡️

Como os sistemas conversam entre si?

Foco no tempo e na ordem das mensagens.

Atores e Participantes 🎭

actor Cliente: O usuário humano.
participant API: O sistema técnico.

Mensagens e Respostas 📨

A ->> B: Solicitação (Síncrona).
B -->> A: Resposta (Tracejada).

Exemplo Sequência 🛡️

mermaid sequenceDiagram actor Dev participant Git Dev->>Git: git push Git-->>Dev: Success!

2. Gráficos de Gantt 📅

Visualize o tempo!

Ideal para prazos e entregas de software.

Anatomia do Gantt 📅

dateFormat: Formato da data.
section: Divisão lógica de fases.
task: A atividade em si.

Exemplo Gantt 📊

mermaid gantt title Dev Sprint section Codigo Feature A :des1, 2024-03-01, 3d section Testes QA :des2, after des1, 2d

3. Mapas Mentais (Mindmaps) 🧠

Organização de ideias em explosão!

Sintaxe super limpa e hierárquica.

Estrutura do Mindmap 🌳

mermaid mindmap root((Meu App)) Recursos Login Pagamento Tecnologias React Node

4. Estilização Customizada 💅

Seu diagrama não precisa ser cinza e preto.

Use o comando style para dar vida aos nós.

Comandos de Estilo 🎨

fill: Cor de fundo.
stroke: Cor da borda.
stroke-width: Espessura da borda.

Exemplo de Estilo ✨

style ID fill:#f9f,stroke:#333

Deixe o nó crítico em VERMELHO! 🔴

5. Interatividade 🖱️

O Mermaid permite definir ações de clique.

Transforme seu diagrama em um menu de navegação! 🗺️

Exemplo Interativo 🖱️

click A "https://github.com" "Info"

Cria um link direto no nó do diagrama.

Design UX em Diagramas 🎨

Notas: Explique o óbvio.
Loops: Represente repetições com loop.
Alt: Represente caminhos alternativos.

Praticando no Terminal 🐚

$ echo "sequenceDiagram" > aula10.md
$ echo "     A ->> B: Hey" >> aula10.md
$ cat aula10.md

Exercício Rápido 🧠

Como chamo um usuário humano no Mermaid?

A) user B) actor ✅ C) person

Mini-Projeto 🎨

Crie seu arquitetura.md.

Diagrama de Sequência (3 participantes)
Mapa Mental de Tecnologias
Estilos coloridos em nós importantes

Resumo da Aula 📝

sequenceDiagram para mensagens.
gantt para cronogramas.
mindmap para ideias.
style para beleza e destaque.

Próxima Parada... 🚂

Aula 11 - Fórmulas Médicas e Científicas (MathJax) 🔢

Como escrever matemática complexa no Markdown.

Obrigado! 🙏

"Sua lógica é bonita, mostre-a com Mermaid."

Ver Aula 11

Aula 11: MathJax 🔢

Matemática e Ciência na Web 🔬

O que vamos aprender hoje? 🎯

O que é MathJax / LaTeX 🔢
Sintaxe Inline vs Block $
Operadores Fundamentais 🛠️
Ciência e Medicina 🏥
Visualização Profissional 🌟

1. O que é MathJax? 🔢

O motor que move a matemática na web.

Usa a sintaxe LaTeX.

Padrão em universidades e centros de pesquisa.

2. Sintaxe Inline vs Block $

Como você quer exibir sua fórmula?

Modo Inline ⌨️

Para fórmulas no meio da frase.

Exemplo: "Sabemos que $x = 10$."

Sintaxe: Um cifrão $x$ .

Modo Display (Block) 📦

Para fórmulas que merecem destaque.

\[ E = mc^2 \]

Sintaxe: Dois cifrões $$ equação $$.

3. Operadores Fundamentais 🛠️

As ferramentas do seu laboratório.

Frações ➗

\frac{numerador}{denominador}

Exemplo: $\frac{1}{2}$

Potência e Subscrito 🔝

Potência: ^ (ex: $x^2$)
Subscrito: _ (ex: $H_2O$)

Raízes e Gregas 🏛️

Raiz: \sqrt{x} ($\sqrt{x}$)
Símbolos: \pi, \alpha, \beta ($\pi, \alpha, \beta$)

4. Ciência e Medicina 🏥

Ideal para: - Dosagens Médicas. - Reações Químicas. - Algoritmos Complexos.

Exemplo Químico ⚗️

O processo de combustão:

\[ CH_4 + 2O_2 \rightarrow CO_2 + 2H_2O \]

Exemplo Médico 💊

Cálculo de Dose:

\[ Dose = \frac{Peso \times Concentracao}{Volume} \]

5. Visualização Profissional 🌟

Por que não usar imagens?

Imagens perdem qualidade (pixel funcionam).
MathJax é texto (acessível/copiável).
Fácil de editar.

Fluxo de Processo (Mermaid) 🧜‍♀️

mermaid graph LR A[Seu Markdown] --> B(Navegador) B --> C{Tem MathJax?} C -->|Sim| D[Renderiza Formula] C -->|Não| E[Exibe Texto Bruto]

Praticando no Terminal 🐚

$ echo "$$ \pi r^2 $$" > area.md
$ cat area.md
$$ \pi r^2 $$

Exercício Rápido 🧠

Como escrevo "H dois O"?

A) H(2)O B) H_2O ✅ C) H^2O

Mini-Projeto 🎨

Crie seu formulas.md.

Título Científico (H1)
3 Fórmulas em Bloco ($$)
Tabela de Legenda de Dados

Resumo da Aula 📝

$ para inline, $$ para destaque.
\frac para divisões.
^ para cima, _ para baixo.
Use para ciência e medicina.

Próxima Parada... 🚂

Aula 12 - Markdown Acadêmico 🎓

Citações, ABNT, Sumários e Documentos Longos.

Obrigado! 🙏

"A matemática é a linguagem com a qual Deus escreveu o universo."

Ver Aula 12

Aula 12: Markdown Acadêmico 🎓

Do Rascunho à Publicação Científica 📚

O que vamos aprender hoje? 🎯

Estrutura de Documentos Longos 🏗️
Citações e Referências 🏷️
Sumários e Navegação 🗺️
Normas Técnicas (ABNT) 📏
Exportação Profissional ⚙️

1. Estrutura de Documentos Longos 🏗️

Um artigo não é um post de blog.

Hierarquia é lei!

H1: Título
H2: Capítulos
H3: Seções

2. Citações e Referências 🏷️

Respeite o autor original.

Uso do Blockquote `>` 💬

Para citações diretas com mais de 3 linhas.

"A documentação é a alma do software." — Autor Desconhecido

Sintaxe: Comece com >.

Notas de Rodapé Bibliográficas 📝

Essenciais para referências.

Sintaxe: [^1] no texto e [^1]: Detalhes no final.

3. Sumários e Navegação 🗺️

O usuário não pode se perder.

O MkDocs gera o menu lateral automaticamente.

Mas você pode usar [TOC] para sumários no corpo.

4. Normas Técnicas (ABNT) 📏

O Markdown é flexível.

Podemos simular a estrutura da ABNT:

Capa (Metadata)
Resumo
Introdução
Conclusão

Tabelas de Dados Pesquisados 📊

Use tabelas para provar seus pontos.

Metrica	Valor A	Valor B
Teste 1	10ms	20ms

Visualização (Mermaid) 🧜‍♀️

mermaid graph TD A[Markdown] --> B{Pandoc} B --> C[PDF Profissional] B --> D[Word / DOCX] B --> E[LaTeX]

5. Exportação Profissional ⚙️

Onde a mágica acontece.

Use o Pandoc para transformar seu .md em um artigo PDF formatado.

Praticando no Terminal 🐚

$ echo "> Citação Importante" > artigo.md
$ echo "[^1]: Fonte 2024" >> artigo.md
$ cat artigo.md

Dica de Organização 💡

Mantenha um arquivo referencias.md separado.

E linke-o no final do seu artigo principal.

Exercício Rápido 🧠

Como crio um bloco de citação?

A) [quote] B) > ✅ C) " "

Mini-Projeto 🎨

Crie seu artigo_final.md.

Título e Resumo
Citação Direta (>)
2 Notas de Rodapé
Diagrama Mermaid de Fluxo

Resumo da Aula 📝

> para citações impactantes.
[^n] para referências bibliográficas.
Hierarquia de títulos organiza a mente.
Pandoc = Exportação de Elite.

Fim do Terceiro Módulo! 🥉

Batch 3 Concluído com Sucesso! 🚀

Próxima Parada... 🚂

Módulo 4 - Documentação Interativa 🎮

Aula 13 - Apresentações com Reveal.js 🎭

Obrigado! 🙏

"Escrever é pensar no papel."

Ver Aula 13

Aula 13: Apresentações com Reveal.js 🎭

Documentação que ganha Vida 🎬

O que vamos aprender hoje? 🎯

O Ecossistema Reveal.js 🎭
Anatomia de um Slide 🧱
O Poder dos Fragmentos ✨
Transições e Efeitos 🌊
Apresentando como um Pro 🎤

1. O Ecossistema Reveal.js 🎭

Slides baseados em tecnologias Web (HTML/CSS/JS).

Escreva em Markdown, apresente em qualquer lugar.

Amigo do Git e do Open Source. 🐙

2. Anatomia de um Slide 🧱

A regra de ouro: Três Hifens ---.

Início do Slide 📑

# Título do Slide
Conteúdo legal aqui.

---

# Novo Slide
Outro conteúdo aqui.

Esqueleto da Apresentação 🦴

Hierarquia de Títulos (H1, H2, H3).

Links e Imagens (Sintaxe Padrão).

Blocos de Código (Syntax Highlighting).

3. O Poder dos Fragmentos ✨

Não entregue todo o ouro de uma vez.

Crie expectativa e foco.

Sintaxe do Fragmento 🛠️

Item 

Exemplo em Ação 🎬

Passo 1: Planejar
Passo 2: Codar
Passo 3: Apresentar! 🚀

4. Transições e Efeitos 🌊

Como mudar de um slide para o outro?

Slide (Padrão)
Fade (Suave)
Convex (3D)
Zoom (Impactante)

Temas Visuais 🎨

Deixe sua marca.

Black: O Clássico.
White: Limpo e Moderno.
League: Digital e Tech.
Sky: Leve e Arejado.

5. Apresentando como um Pro 🎤

Dicas de UX e Performance:

Pouco Texto: Menos de 6 linhas por slide.
Contraste: Use cores que facilitem a leitura.
Notas do Orador: Use <aside class="notes"> para seus lembretes.

Visualização (Mermaid) 🧜‍♀️

mermaid graph LR A[Slide Atual] -- Clique --> B{Tem Fragmento?} B -- Sim --> C[Exibe Fragmento] B -- Não --> D[Vai para Próximo Slide]

Praticando no Terminal 🐚

$ echo "# Aula 13" > intro.md
$ echo "---" >> intro.md
$ echo "## Fim" >> intro.md
$ cat intro.md

Exercício Rápido 🧠

Qual a classe usada para criar animações clique-a-clique?

A) .animate B) .fragment ✅ C) .next

Mini-Projeto 🎨

Crie seu meus_slides.md.

5 Slides Mínimo
Pelo menos 2 slides com Fragmentos
Um diagrama Mermaid explicativo

Resumo da Aula 📝

--- separa páginas.
 anima itens.
Foco absoluto no conteúdo.
Multiplataforma e Versionável.

Próxima Parada... 🚂

Aula 14 - Simulações com Termynal.js 🐚

Como criar terminais animados que parecem reais!

Obrigado! 🙏

"Sua apresentação agora é código. E código é arte."

Ver Aula 14

Aula 14: Termynal.js Interativo 🐚

Linha de Comando que Ganha Vida 🎬

O que vamos aprender hoje? 🎯

O Conceito de Terminal Simulado 🐚
Sintaxe do Termynal.js 🧱
Inputs vs Outputs ($) ⚙️
Customização de Fluxo ⏱️
UX em Documentação Técnica 🚀

1. O Conceito de Terminal Simulado 🐚

Por que apenas colar texto?

Mostre o processo, não apenas o resultado.

A digitação humana cria conexão didática.

2. Sintaxe do Termynal.js 🧱

O bloco de código agora tem nome: termynal.

O Início de Tudo 🚀

$ echo "Iniciando sistema..."

Sintaxe: Três crases + termynal.

3. Inputs vs Outputs ($) ⚙️

Como o script sabe o que animar?

O Sinal do Prompt: `$` ⌨️

Indica uma linha que será "digitada".

Geralmente comandos do usuário.

Saída do Sistema (Output) 🖥️

Linhas sem prefixo especial.

Aparecem de forma instantânea (ou rápida).

Exemplo Real 🐚

$ mkdir docs
$ ls
docs/

Comando: mkdir ($)
Resultado: docs/ (sem $)

4. Customização de Fluxo ⏱️

Controlando o ritmo da aula.

Prompts secundários: `>` 💬

Para simular o interior de uma ferramenta.

$ node
> console.log("Oi")
Oi

Animando Listas 📋

Ótimo para mostrar progresso de downloads:

$ npm install
[#######---] 70%

5. UX em Documentação Técnica 🚀

Foco: O usuário olha para onde o texto "nasce".
Clareza: Diferenciação visual entre comando e resposta.
Acessibilidade: O texto continua sendo selecionável e copiável.

Visualização (Mermaid) 🧜‍♀️

mermaid graph TD A[Usuário Entra na Página] --> B{Rola até Terminal?} B -- Sim --> C[Inicia Animação] C --> D[Digita $] D --> E[Exibe Output] E --> F[Fim da Simulação]

Praticando no Terminal 🐚

$ touch aula14.md
$ echo "Terminal animado!"

Exercício Rápido 🧠

O que o símbolo $ faz na animação?

A) Gera um erro B) Simula a digitação ✅ C) Deleta a linha

Mini-Projeto 🎨

Crie seu guia_cli.md.

Tutorial de 3 passos
Pelo menos 2 outputs simulados
Bloco termynal completo

Resumo da Aula 📝

termynal é o identificador.
$ para comandos.
Sem prefixo para respostas.
Melhora 100% a didática técnica.

Próxima Parada... 🚂

Aula 15 - Projeto Integrador Final 🚀

Vamos unir TUDO o que aprendemos em um único repositório épico!

Obrigado! 🙏

"Documentação não precisa ser estática. Ela pode ser uma experiência."

Ver Aula 15

Aula 15: Projeto Integrador Final 🚀

A Orquestração de Todo o Conhecimento 🎶

O que vamos aprender hoje? 🎯

A Filosofia "Docs as Code" 🐙
Unindo os Módulos 🧱
Requisitos da Entrega 🏆
Checklist de Qualidade ✅
Deploy e Portfólio 🌐

1. A Filosofia "Docs as Code" 🐙

Documentação tratada como código.

Versionável (Git).

Automatizável (CI/CD).

Centralizada (Markdown).

2. Unindo os Módulos 🧱

Sua documentação agora tem superpoderes.

Módulos 1 e 2 🏗️

A Base de Tudo.

Títulos e Listas Organizadas.
Tabelas e Checklists de Requisitos.
Links Relativos (Portabilidade).

Módulos 3 e 4 ⚡

A Extensão Moderna.

Mermaid (A arquitetura visual).
MathJax (A precisão científica).
Reveal.js (A apresentação dinâmica).
Termynal.js (A simulação real).

3. Requisitos da Entrega 🏆

O que seu repositório DEVE ter?

Checklist Técnico ✅

Mínimo 5 páginas interativas.
Pelo menos 2 diagramas Mermaid.
Uma simulação de terminal completa.
Deck de slides resumindo o projeto.

4. Checklist de Qualidade ✅

Navegação fluida entre páginas.
Destaque de sintaxe em todos os códigos.
Imagens com alt-text e redimensionadas.
Gramática e Português impecáveis.

5. Deploy e Portfólio 🌐

Não deixe seu código na gaveta.

O GitHub Pages é seu palco.

mkdocs gh-deploy

Visualização do Ciclo (Mermaid) 🧜‍♀️

mermaid graph LR A[Markdown] --> B[Commit] B --> C[Push] C --> D[GitHub Actions] D --> E[Site Público]

Praticando no Terminal 🐚

$ git status
$ git commit -m "Relatório Final Concluído"
$ git push origin main

Exercício Rápido 🧠

O que significa a sigla CI/CD?

A) Criação Infinita B) Continuous Integration / Continuous Deployment ✅ C) Código Individual

Mini-Projeto 🎨

O seu Projeto Integrador.

Integre os arquivos criados nas aulas 08 e 12.
Adicione interatividade (Slides/Terminal).
Faça o deploy final.

Resumo da Aula 📝

O Markdown é o centro do universo.
A integração é o seu diferencial.
Um portfólio "Docs as Code" abre muitas portas.

Próxima Parada... 🚂

Aula 16 - Finalização e Apresentação 🎓

O momento de brilhar e celebrar o seu progresso!

Obrigado! 🙏

"Você não é apenas um escritor de documentos. Você é um engenheiro de conhecimento."

Ver Aula 16

Aula 16: Finalização e Futuro 🎓

O Início da sua Jornada como Master 🚀

O que vamos aprender hoje? 🎯

Retrospectiva do Curso 🏔️
Apresentação de Gala 🎤
O Ecossistema Expandido ⚙️
Carreira e Oportunidades 💼
Cerimônia Final 🏆

1. Retrospectiva do Curso 🏔️

De 0 a Mestre em 16 passos.

Módulo 1: A Fundação 🧱

Sintaxe Básica, Organização e Organogramas.

Aprendemos a dar estrutura ao caos.

Módulo 2: O Profissional 🐙

Tabelas, Checklists e GitHub.

Entramos no mundo real do desenvolvimento.

Módulo 3: O Cientista ⚗️

Mermaid Avançado e MathJax.

Documentação com precisão técnica e visual.

Módulo 4: O Criativo 🎭

Reveal.js e Termynal.js.

Documentação interativa que ganha vida.

2. Apresentação de Gala 🎤

É o seu momento!

Mostre seu Projeto Integrador.

Destaque sua melhor simulação.

3. O Ecossistema Expandido ⚙️

Onde ir agora?

Pandoc & Outros SSGs 🛠️

Pandoc: Exportação para PDF/Word.
Asciidoc: Documentação pesada.
Docusaurus/Hugo: Novas fronteiras.

4. Carreira e Oportunidades 💼

Tech Writing é uma profissão em alta.

Engenheiros que documentam lideram equipes.

Seu repositório é seu cartão de visitas.

5. Cerimônia Final 🏆

Você subiu todos os degraus.

Visualização do Futuro (Mermaid) 🧜‍♀️

mermaid mindmap root((Markdown Master)) Documentaçao Tecnica Academica Apresentaçao Palestras Webinars Carreira Liderança Product Owner

Praticando no Terminal 🐚

$ echo "Status: Formado"
$ git tag -a v1.0.final
$ git push origin --tags

Palavras Finais 🙏

"Obrigado por confiar no processo."

O Markdown é agora uma extensão da sua mente.

Exercício Rápido 🧠

O que você construiu neste curso?

A) Apenas arquivos de texto B) Um ecossistema de conhecimento moderno ✅ C) Um site que não muda

Desafio Final 🎨

Mantenha seu repositório vivo!

Atualize-o conforme você aprende novas linguagens.

Compartilhe com a comunidade! 🌍

Resumo do Curso 📝

Docs as Code.
Foco absoluto no conteúdo.
Beleza através da automação.
Maestria em Markdown Moderno.

FIM DA JORNADA 🎓🚀

PARABÉNS, MARKDOWN MASTER!

Créditos e Agradecimentos 🙏

"O conhecimento é a única coisa que cresce quando compartilhado."

Visite o Site do Curso

Configuração

Configuração do Ambiente 🛠️

Para desenvolver com eficiência neste curso, recomendamos configurar seu ambiente seguindo os guias abaixo de acordo com seu sistema operacional.

:simple-windows: Windows --- Instalação do VS Code, extensões recomendadas e Python. Ver Setup
Linux --- Configuração via terminal para distribuições baseadas em Debian/Ubuntu. Ver Setup
macOS --- Setup para Intel e Apple Silicon usando Homebrew. Ver Setup

📋 Próximos Passos

Após configurar seu ambiente básico, não esqueça de:

Instalar a extensão Markdown All in One no VS Code.
Ativar o Auto Save para ver as mudanças refletidas instantaneamente no preview.
Clonar o repositório de exemplos práticos da Aula 01.

Configurando o VS Code para Markdown 💻

O Visual Studio Code é a ferramenta recomendada para este curso devido ao seu excelente suporte nativo e vasta biblioteca de extensões.

1. Extensões Recomendadas 🔌

Para uma experiência "Moderno", instale as seguintes extensões no seu VS Code:

Markdown All in One: Atalhos de teclado, sumários e formatação automática.
Markdown Lint: Ajuda a manter a qualidade e padronização dos seus arquivos .md.
Mermaid Editor: Para visualizar seus diagramas Mermaid em tempo real.
Material Icon Theme: Deixa a barra lateral mais visual e fácil de navegar.

2. Atalhos Úteis ⌨️

Ctrl + Shift + V: Abre a pré-visualização (Preview) do Markdown ao lado do código.
Ctrl + K V: Abre a pré-visualização em uma nova aba lateral.
Ctrl + B: Alterna a visibilidade da barra lateral (espaço de escrita).

3. Dica de Produtividade 💡

Use o Auto Save. Vá em File > Auto Save para que suas alterações sejam salvas instantaneamente, atualizando o Preview automaticamente.

Setup MkDocs Local 🚀

Embora você possa escrever Markdown em qualquer lugar, rodar o MkDocs localmente permite que você veja exatamente como o site final ficará antes de enviá-lo para o GitHub.

1. Pré-requisitos 🐍

Para rodar o MkDocs, você precisa do Python instalado em sua máquina. - Baixe em: python.org

2. Instalação das Dependências 📦

Abra o terminal na pasta do projeto e execute:

pip install -r requirements.txt

(Isso instalará o MkDocs, o tema Material e todos os plugins de diagramas e slides usados no curso).

3. Rodando o Servidor 🌐

Para visualizar o site localmente, execute o comando:

mkdocs serve

O terminal informará um endereço (geralmente http://127.0.0.1:8000/). Copie e cole no seu navegador. Qualquer alteração que você fizer nos arquivos .md será refletida instantaneamente!

4. Gerando a Versão Final 🏗️

Quando estiver pronto para gerar os arquivos HTML estáticos:

mkdocs build

Os arquivos serão gerados na pasta site/.

Mac (Intel/Apple Silicon)

Versão para Impressão

Esta página foi gerada automaticamente para impressão.