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

Documentação que ganha Vida 🎬

O que vamos aprender hoje? 🎯

1. O Ecossistema Reveal.js 🎭
2. Anatomia de um Slide 🧱
3. O Poder dos Fragmentos ✨
4. Transições e Efeitos 🌊
5. 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 <!-- .element: class="fragment" -->

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:

1. Pouco Texto: Menos de 6 linhas por slide.
2. Contraste: Use cores que facilitem a leitura.
3. 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.
• <!-- .element: class="fragment" --> 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