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

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 🧠

1. Qual o símbolo usado para separar dois slides no Markdown do Reveal.js?
2. Para que serve o recurso de "Fragmentos"?
3. 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! 🐚