📚 Guia de Boas Práticas: Marp para Aulas
🎯 Princípios Fundamentais para Slides Educacionais
📖 1. Pedagogia Primeiro
- ✅ Conteúdo define o design, não o contrário
- ✅ Um conceito por slide - evite sobrecarga cognitiva
- ✅ Progressão lógica - do simples ao complexo
- ✅ Interatividade visual - mesmo sem cliques reais
🎨 2. Design Acessível
- ✅ Contraste alto (texto escuro + fundo claro)
- ✅ Fontes grandes (mín. 28px para projeção)
- ✅ Cores consistentes com significado
- ✅ Hierarquia visual clara
⚙️ Configuração Base Recomendada
📝 Template Padrão para Aulas:
---
marp: true
theme: default
paginate: true
backgroundColor: #ffffff
header: "**[Nome da Disciplina]** | [Tópico da Aula]"
footer: "Prof. [Seu Nome] | [Data] | Slide **{pageNo}**"
style: |
section {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 28px; /* Tamanho mínimo para projeção */
line-height: 1.4; /* Espaçamento confortável */
padding: 60px; /* Margem adequada */
}
h1 {
color: #2c3e50;
font-size: 48px;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #34495e;
border-left: 5px solid #3498db;
padding-left: 15px;
font-size: 36px;
}
h3 {
color: #27ae60;
font-size: 32px;
}
code {
background: #f8f9fa;
color: #d63384;
font-weight: bold;
padding: 4px 8px;
border-radius: 4px;
font-size: 24px; /* Código legível */
}
pre {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 20px;
font-size: 22px; /* Código em bloco */
}
/* Cores para status/feedback */
.success { color: #27ae60; }
.warning { color: #f39c12; }
.error { color: #e74c3c; }
.info { color: #3498db; }
---📐 Estrutura Pedagógica Eficaz
1. 🎬 Slide de Abertura (Título)
<!-- _class: title -->Deve conter:
- 🎯 Objetivo claro da aula
- 📋 Agenda/roteiro
- ⏱️ Duração estimada
- 💡 Benefício para o aluno (“Ao final você saberá…“)
Exemplo:
<!-- _class: title -->
# 🚀 Test-Driven Development (TDD)
**Aprendendo a programar com qualidade**
### 🎯 Ao final desta aula você saberá:
- ✅ O que é TDD e por que usar
- ✅ Aplicar o ciclo Red-Green-Refactor
- ✅ Criar testes em Java com JUnit
- ✅ Desenvolver um projeto completo com TDD
**⏱️ Duração:** 90 minutos | **📅 Data:** [Data]2. 📋 Slide de Agenda
# 📋 Roteiro da Aula
| Tempo | Atividade | Tipo |
| ------------ | ---------------------------- | --------- |
| **0-15min** | 🧠 Conceitos de TDD | Teoria |
| **15-30min** | ⚙️ Configuração ambiente | Prática |
| **30-60min** | 💻 Projeto prático | Hands-on |
| **60-75min** | 🏆 Desafio individual | Aplicação |
| **75-90min** | 🎯 Revisão e próximos passos | Síntese |
### 💡 **Metodologia:** 40% teoria + 60% prática3. 🧠 Slides Conceituais
Princípios:
- ✅ Analogias visuais (exemplo: TDD = controle de qualidade)
- ✅ Exemplos do mundo real
- ✅ Progressão: O que → Por que → Como
Exemplo:
## 🏗️ TDD é como Construção Civil
### 🏛️ **Método Tradicional:**
1. 🧱 Construir a casa
2. 🔍 Testar se não cai
3. 😰 Torcer para dar certo
### ✨ **Método TDD:**
1. 📋 Fazer planta (teste)
2. 🏗️ Construir seguindo a planta (código)
3. ✅ Verificar se está conforme (executar teste)
### 💡 **Resultado:**
**Construção segura** vs **Construção no "achismo"**💻 Boas Práticas para Código
1. 📏 Tamanhos e Formatação
### ✅ **FAÇA - Código Legível:**
```java
@Test
public void deveCalcularMediaCorretamente() {
// Arrange
CalculadoraNotas calc = new CalculadoraNotas();
// Act
double media = calc.calcularMedia(8.0, 7.0, 9.0);
// Assert
assertEquals(8.0, media);
}
```❌ EVITE - Código Muito Longo:
@Test
public void deveCalcularMediaCorretamenteParaTresNotasComValoresDiferentesValidandoSeOMetodoCalcularMediaDaClasseCalculadoraNotasRetornaOValorCorretoQuandoRecebeParametrosValidosEntreZeroEDez() {
CalculadoraNotas calculadoraParaCalcularMediaDeTresNotasEscolares = new CalculadoraNotas();
double mediaCalculadaPeloMetodoCalcularMediaDaCalculadoraNotas = calculadoraParaCalcularMediaDeTresNotasEscolares.calcularMedia(8.0, 7.0, 9.0);
assertEquals(8.0, mediaCalculadaPeloMetodoCalcularMediaDaCalculadoraNotas);
}
### 2. **🎨 Syntax Highlighting Eficaz**
**Linguagens mais usadas em aulas técnicas:**
```markdown
```java // Para Java
```python // Para Python
```javascript // Para JS/TS
```bash // Para terminal/comandos
```json // Para configurações
```xml // Para Maven/configs
```yaml // Para configurações modernas
```sql // Para banco de dados
### 3. **🔍 Foco Visual no Código**
```markdown
### 🎯 **Destaque Partes Importantes:**
```java
@Test // ← Esta anotação marca um teste
public void testeConverterDolarParaReal() {
Conversor conversor = new Conversor();
double resultado = conversor.converter(10.0); // ← Linha principal
assertEquals(50.0, resultado); // ← Verificação
}
💡 Use comentários inline para explicar:
- ✅ Conceitos novos
- ✅ Sintaxe específica
- ✅ Pontos de atenção
---
## 🎭 Elementos Visuais Eficazes
### 1. **🎨 Sistema de Cores Semântico**
```css
/* Defina cores com significado pedagógico */
.success { color: #27ae60; } /* Verde - Correto/Aprovado */
.warning { color: #f39c12; } /* Laranja - Atenção */
.error { color: #e74c3c; } /* Vermelho - Erro/Reprovado */
.info { color: #3498db; } /* Azul - Informação */
.highlight { background: #fff3cd; border-left: 4px solid #ffc107; padding: 1em; }
Uso consistente:
### Status do Teste:
- <span class="success">✅ PASSOU</span> - Código funcionando
- <span class="error">❌ FALHOU</span> - Precisa correção
- <span class="warning">⚠️ PENDENTE</span> - Ainda não implementado2. 📊 Indicadores de Progress
### 🎯 **Progresso da Aula:**████████████████████░░ 90% Concluído
### 📈 **Checkpoint de Aprendizado:**
- [x] ✅ Conceitos básicos
- [x] ✅ Configuração ambiente
- [x] ✅ Primeiro teste
- [ ] ⏳ Projeto completo
3. 🎪 Callouts Educacionais
<div class="highlight">
### 💡 **Dica de Ouro**
No VS Code, use `Ctrl + .` para importar automaticamente as classes necessárias!
</div>
### ⚠️ **Erro Comum**
> Muitos alunos esquecem de adicionar a dependência do JUnit no `pom.xml`.
> **Sintoma:** Linhas vermelhas em `@Test` e `assertEquals`.
> **Solução:** Verificar se a dependência está configurada.
### 🎯 **Para Relembrar**
- **Red:** Teste falha (normal!)
- **Green:** Código passa (celebrate!)
- **Refactor:** Melhorar sem quebrar (profissional!)🎮 Técnicas de Engajamento
1. ❓ Slides Interativos (Mesmo Sendo Estáticos)
## 🤔 Pergunta para Reflexão
### **Cenário:** Você mudou uma linha de código e 15 testes quebraram.
### **O que fazer?**
**A)** 😰 Deletar todos os testes
**B)** 🤷♂️ Ignorar os erros
**C)** 🔍 Investigar por que quebraram
**D)** ☕ Tomar um café e fingir que não aconteceu
---
### **Resposta:** C) 🔍 Investigar
**Por quê?** Os testes são seus "alarmes de incêndio" - eles estão te protegendo!2. 🏆 Gamificação Visual
## 🎮 Desafio: Implementar Calculadora
### 🏅 **Níveis de Conquista:**
| Level | Badge | Descrição |
| ----- | ------------- | ---------------------------- |
| 1⭐ | 🥉 **Bronze** | Cálculo básico funcionando |
| 2⭐ | 🥈 **Prata** | + Validação de entrada |
| 3⭐ | 🥇 **Ouro** | + Todos os testes passando |
| 4⭐ | 🏆 **Master** | + Código limpo e documentado |
### 🎯 **Tempo:** 25 minutos
### 🤝 **Modo:** Individual com ajuda permitida3. 📈 Demonstrações Antes/Depois
## 🔄 Transformação: Antes vs Depois TDD
<div style="display: flex; gap: 20px;">
<div style="flex: 1;">
### 😰 **ANTES (Sem TDD):**
```java
public class App {
public static void main(String[] args) {
// Será que funciona? 🤷♂️
System.out.println("Hello World");
}
}
```Problemas:
- ❌ Como sei se funciona?
- ❌ E se mudar alguma coisa?
- ❌ Como documentar o que faz?
😌 DEPOIS (Com TDD):
@Test
void deveCumprimentarCorretamente() {
App app = new App();
assertEquals("Hello World", app.saudar());
}Benefícios:
- ✅ Comportamento garantido
- ✅ Mudanças seguras
- ✅ Documentação viva
📏 Layout e Organização
1. 📱 Slides Responsivos
/* CSS para diferentes tipos de conteúdo */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: start;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.split-code {
display: flex;
gap: 20px;
}
.split-code > div {
flex: 1;
}2. 🎯 Hierarquia Visual Clara
# 📚 SEÇÃO PRINCIPAL (H1)
## 🎯 Tópico Importante (H2)
### 💡 Conceito Específico (H3)
#### 📝 Detalhe (H4)
**Texto em destaque** para palavras-chave
_Texto em itálico_ para ênfase sutil
`Código inline` para termos técnicos3. ⚡ Slides de Transição
<!-- _class: title -->
<!-- _backgroundColor: "#3498db" -->
<!-- _color: "#ffffff" -->
# 🎯 PARTE 1 CONCLUÍDA!
### ✅ Você aprendeu:
- Conceitos básicos de TDD
- Configuração do ambiente
- Primeiro teste prático
### 🚀 Próximo:
**Hands-on: Projeto Completo**
---🛠️ Aspectos Técnicos
1. 📁 Organização de Arquivos
projeto-aula/
├── slides-aula.md # Apresentação principal
├── demo-recursos.md # Exemplos e demos
├── exercicios.md # Atividades práticas
├── images/
│ ├── diagrams/ # Diagramas UML/fluxos
│ ├── screenshots/ # Capturas de tela
│ └── icons/ # Ícones personalizados
├── code-samples/ # Códigos de exemplo
└── handouts/ # Material de apoio PDF
2. ⚙️ Configurações Úteis
---
# Configuração base para aulas
marp: true
theme: default
paginate: true
backgroundColor: #ffffff
# Metadados
title: "TDD em Java"
description: "Aula prática sobre Test-Driven Development"
author: "Prof. [Nome]"
keywords: ["TDD", "Java", "JUnit", "Testing"]
# Visual
headingDivider: 2 # H2 cria nova seção automaticamente
# Estilo global para todos os slides
style: |
section {
font-size: 28px;
justify-content: flex-start; /* Alinha conteúdo ao topo */
}
/* Slides especiais */
section.title {
justify-content: center;
text-align: center;
background: linear-gradient(45deg, #3498db, #9b59b6);
color: white;
}
section.code {
font-family: 'Fira Code', monospace;
}
---3. 🔄 Versionamento e Backup
# Git para controle de versão
git init
git add slides-aula.md
git commit -m "Versão inicial da aula TDD"
# Tags para versões específicas da aula
git tag v1.0-turma-2026-1
git tag v1.1-ajustes-pos-aula♿ Acessibilidade e Inclusão
1. 👁️ Visual
style: |
/* Alto contraste */
section {
color: #000000; /* Preto puro */
background-color: #ffffff; /* Branco puro */
}
/* Tamanhos adequados */
h1 { font-size: 54px; } /* Extra grande para títulos */
h2 { font-size: 42px; }
p, li { font-size: 32px; } /* Legível à distância */
code { font-size: 28px; }
/* Espaçamento confortável */
section { line-height: 1.6; }
li { margin-bottom: 8px; }2. 🎨 Cores Acessíveis
/* Palette com bom contraste */
:root {
--primary: #2c3e50; /* Azul escuro - WCAG AA+ */
--success: #27ae60; /* Verde legível */
--warning: #f39c12; /* Laranja contrastante */
--error: #c0392b; /* Vermelho escuro */
--info: #2980b9; /* Azul informativo */
}
/* Nunca use apenas cor para transmitir informação */
.success::before {
content: "✅ ";
}
.error::before {
content: "❌ ";
}
.warning::before {
content: "⚠️ ";
}3. 📝 Alt-text e Descrições
<!-- Para gráficos complexos, adicione descrição textual -->
### 📊 Descrição do Gráfico:
O gráfico mostra que projetos com TDD têm 40% menos bugs...📊 Métricas e Feedback
1. 🎯 Slides de Checkpoint
## 📋 Checkpoint: Você consegue responder?
### 🤔 **Auto-avaliação (30 segundos):**
1. **O que significa TDD?**
- [ ] Sei explicar com minhas palavras
- [ ] Tenho uma ideia vaga
- [ ] Preciso revisar
2. **Qual a ordem correta?**
- [ ] Red → Green → Refactor
- [ ] Green → Red → Refactor
- [ ] Não tenho certeza
### 🚨 **Se mais de 50% marcou "preciso revisar":**
**→ Vamos fazer uma revisão rápida!**2. 📈 Progresso Visual
## 🎯 Onde Estamos na AulaConceitos ████████████████████ 100% ✅
Ambiente ████████████████████ 100% ✅
Prática ████████████████░░░░ 80% ⏳
Desafio ░░░░░░░░░░░░░░░░░░░░ 0% ⏸️
### **⏳ Tempo restante:** 25 minutos
### **🎯 Próximo:** Implementar calculadora de notas
⚡ Troubleshooting Comum
1. 🖥️ Problemas de Projeção
<!-- Slide de backup para problemas técnicos -->
## 🚨 Sem Projetor? Sem Problema!
### 📋 **Roteiro Alternativo:**
1. **Explicação no quadro** - diagramas manuais
2. **Código no papel** - exercícios escritos
3. **Discussão em grupos** - conceitos abstratos
4. **Live coding individual** - cada um no seu notebook
### 💡 **Lembre-se:**
**Tecnologia falha, boa didática não!**2. ⏰ Gestão de Tempo
## ⏱️ Slides de Controle de Tempo
### 🎯 **Check de Ritmo (slide oculto para professor):**
<!-- Use para se orientar durante a aula -->
**⏰ Minuto 15:** Devemos estar na configuração do ambiente
**⏰ Minuto 30:** Primeiro teste funcionando
**⏰ Minuto 60:** Projeto básico concluído
**⏰ Minuto 75:** Iniciando desafio final
### 🚨 **Se atrasou:**
- Pule slides teóricos extras
- Foque no hands-on
- Deixe conceitos avançados para próxima aula🎯 Checklist Final
✅ Antes de dar a aula:
📋 Conteúdo:
- Um objetivo claro por slide
- Progressão lógica do conteúdo
- Exemplos práticos e relevantes
- Atividades hands-on balanceadas
- Slide de conclusão/resumo
🎨 Design:
- Fontes grandes (28px+)
- Contraste alto
- Código legível e comentado
- Cores consistentes
- Layout limpo e organizado
⚙️ Técnico:
- Slides testados no projetor
- Backup em PDF
- Códigos testados e funcionando
- Links verificados
- Material de apoio pronto
🎭 Pedagógico:
- Analogias preparadas
- Perguntas interativas planejadas
- Checkpoints de compreensão
- Cronograma realista
- Plano B para problemas técnicos
🚀 Exemplo Prático Completo
Slide Modelo Seguindo Todas as Boas Práticas:
---
marp: true
theme: default
paginate: true
backgroundColor: #ffffff
header: "**TDD em Java** - ETEC 2026"
footer: "Prof. João Silva | 02/03/2026 | Slide **{pageNo}**"
style: |
section {
font-family: 'Segoe UI', sans-serif;
font-size: 32px;
line-height: 1.5;
padding: 60px;
}
h1 { color: #2c3e50; font-size: 48px; text-align: center; }
h2 { color: #34495e; border-left: 5px solid #3498db; padding-left: 15px; }
code { background: #f8f9fa; color: #d63384; padding: 4px 8px; font-size: 28px; }
pre { background: #f8f9fa; border: 2px solid #dee2e6; padding: 20px; font-size: 24px; }
.success { color: #27ae60; }
.error { color: #e74c3c; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
---
<!-- _class: title -->
# 🧪 Primeiro Teste TDD
### 🎯 **Objetivo:** Criar um teste que falha (Red)
**⏱️ Tempo:** 10 minutos | **🤝 Modo:** Individual com suporte
---
## 💻 Código do Teste
### 📝 **Arquivo:** `ConversorTest.java`
```java
@Test
public void testeConverterDolarParaReal() {
// Arrange - Preparar os dados
Conversor conversor = new Conversor(); // ❌ Erro esperado!
// Act - Executar a ação
double resultado = conversor.converter(10.0);
// Assert - Verificar resultado
assertEquals(50.0, resultado); // 10 × 5 = 50
}
```🎯 Padrão AAA: Arrange → Act → Assert
🔴 Resultado Esperado: ERRO!
😌 Isso é NORMAL no TDD:
- ✅ Classe
Conversornão existe ainda - ✅ VS Code mostra linhas vermelhas
- ✅ Estamos no estágio RED 🔴
- ✅ O teste define o que queremos
🎯 Próximas etapas:
- 🔴 RED ← Estamos aqui
- 🟢 GREEN ← Criar código mínimo
- 🔵 REFACTOR ← Melhorar código
💡 Dica: Use Ctrl + . para imports automáticos!
❓ Checkpoint de Compreensão
🤔 Pergunta rápida (30 seg):
Por que começamos com um teste que FALHA?
A) 😅 Porque somos pessimistas
B) 🎯 Para definir o comportamento esperado
C) 🤷♂️ Porque é tradição
D) 💻 Porque o VS Code gosta
Resposta: B) 🎯
Explicação: O teste é nossa “especificação executável” - ele documenta exatamente o que queremos que aconteça!
---
## 🎉 Conclusão
### 🌟 **Marp + Boas Práticas = Aulas Eficazes**
Seguindo este guia, você criará apresentações que:
- ✅ **Engajam** os alunos visualmente
- ✅ **Comunicam** conceitos claramente
- ✅ **Suportam** diferentes estilos de aprendizagem
- ✅ **Funcionam** mesmo com problemas técnicos
### 🚀 **Lembre-se:**
**O melhor slide é aquele que ajuda o aluno a aprender, não o que impressiona pela tecnologia!**
---
*Este guia foi criado com base em boas práticas de design instrucional e experiência em salas de aula técnicas.*