---
name: apresentacao
description: Use ao criar ou editar qualquer apresentação, aula, palestra, deck ou slide neste site (fontenele.com.br). Define a sequência narrativa, o registro de conteúdo estilo YC, o sistema visual monocromático, a publicação como estudo com deck embutido, a exportação em PDF e PowerPoint, e a verificação headless obrigatória. Acionar quando o pedido mencionar apresentação, aula, deck, slide, palestra, masterclass ou uma disciplina.
---

# Apresentações do fontenele.com.br

Padrão estabelecido em 2026-08-04 com a aula da TRA-46 no ITA. A referência viva é
`_includes/deck/ia-visualizacao-dados.html`. Copie a estrutura de lá, não reinvente.

## Regras que não se negociam

1. **Design é o do site, nunca uma paleta importada.** Monocromático puro, hairline de 1px
   nos quatro lados, `EB Garamond` para serifa e numeral, `Inter Tight` para texto, tema
   claro e escuro pelas variáveis de `deck.css`. Se um deck de outro projeto sugerir
   gradiente roxo ou cor de destaque, ignore.
2. **Registro YC: uma ideia por slide, tipo grande, gráfico dominante.** Nada de parágrafo
   corrido no slide. Se um bloco tem mais de três linhas, ou vira gráfico, ou vira duas telas,
   ou vai para o corpo da página do estudo.
3. **Todo número sai da fonte primária, conferido nesta sessão.** Baixe o PDF e extraia com
   `pdftotext`; não confie em resumo de busca. Registre a fonte no rodapé do slide (`.d-note`).
4. **Faixa publicada vira faixa desenhada.** Se a fonte deu intervalo, o slide mostra
   intervalo. Nunca uma linha só. Esquema didático (curva de forma) tem que dizer que é
   esquema, não série medida.
5. **Sem travessão (`—`)** em nada visível. Use parênteses, vírgula ou dois-pontos.
6. **Nenhum slide pode estourar 1280×720.** Verificado headless antes de entregar.

## Sequência narrativa padrão

Ordem que funciona para aula de 30 minutos. Ajuste o número de casos, não a espinha.

| Bloco | Slides | O que faz |
|---|---|---|
| Abertura | Capa, **Quem sou eu** | Identidade num slide só: foto, nome em serifa grande, três ou quatro frases curtas e a trilha compacta (`.d-road--compact`). Nunca dois slides de biografia seguidos. |
| Antes | Evidência, afirmação, **história pessoal** | Número grande + gráfico, depois a frase que conclui, depois a história própria. A história vai por último porque a punchline dela já aponta para o "depois". |
| A virada | Antes vira depois, divisão de trabalho, afirmação | `.d-swap` com duas palavras gigantes, depois o que a ferramenta assumiu x o que continua sendo seu, depois a tese em `.slide--statement`. |
| Princípios | 1 a 2 slides | O critério que a plateia leva para casa antes de ver os casos. |
| Ponte | 1 slide | Por que os casos são estes: credibilidade própria em três caixas. Fica aqui, não na abertura. |
| Casos | 3 a 4 slides | Um gráfico dominante por slide + `.d-take` com a leitura + `.d-note` com a fonte. |
| Prática | 2 a 3 slides | Como fazer, e como isso falha. |
| Fecho | Método, afirmação final | O método em `.d-flat` numerado, depois uma frase e o contato. Não espreme o método no subtítulo do fecho. |

Regras de fluxo aprendidas na prática:

- **Nada de dizer a mesma coisa duas vezes seguidas.** Se dois slides carregam os mesmos
  fatos (biografia e trilha, por exemplo), funde num ou afasta um para onde ele vira ponte.
- **Callback vence referência futura.** Um slide que cita outro caso deve vir *depois* dele.
- **Afirmação vem depois da evidência**, nunca antes.
- Slides de afirmação levam 20 segundos; casos levam 2 a 3 minutos. Conte o tempo assim.

## Arquitetura de publicação

Toda apresentação é publicada **como estudo**, em duas URLs:

```
pages/estudos-<slug>.html             layout: default    /estudos/<slug>/
pages/estudos-<slug>-apresentar.html  layout: deck       /estudos/<slug>/apresentar/
_includes/deck/<slug>.html            os <section class="slide">, compartilhados
```

- A página do estudo abre **no formato normal do site** (nav, rodapé, rolagem) com o deck
  rodando num **iframe de mesma origem** dentro de `.deck-embed__stage` (16:9), mais a barra
  com **Apresentar, PDF e PowerPoint**, e abaixo o argumento em texto, os casos com os
  números e a lista de fontes. Isso dá valor de leitura e de SEO à página.
- O iframe é obrigatório: `deck.css` tem reset `*` e `:root` próprios e brigaria com
  `main.css` se fosse inline.
- A página `/apresentar/` leva `noindex: true`, `sitemap: false` e `back_url` apontando para
  o estudo.
- Adicione o card em `pages/estudos.html` (mês corrente, `data-index="01"`, renumere os
  vizinhos) apontando para `/estudos/<slug>/`, nunca para `/apresentar/`.
- Abaixo de 700px o palco some e vira o convite `.deck-embed__mobile`: 16:9 embutido em
  celular é ilegível, e os botões de exportação vivem dentro do próprio deck.

## Componentes do deck

Definidos em `assets/css/deck.css`. Prefira compor com eles a inventar classe nova.

| Classe | Para quê |
|---|---|
| `.slide--cover` / `.cover-title` | Capa |
| `.slide--statement` / `.d-say` (com `<em>` sublinhado) / `.d-say__sub` | Uma frase ocupando a tela |
| `.d-hero__num` + `.d-hero__cap` | Número gigante com legenda |
| `.d-swap` | Antes vira depois, duas palavras grandes com seta |
| `.d-who` + `.d-who__photo` + `.d-who__name` + `.d-road--compact` | Slide de identidade |
| `.d-road` | Linha do tempo horizontal com trilha e marcos |
| `.d-chart` + `.d-chart--fill` | SVG inline monocromático que domina o slide |
| `.d-take` (com `<small>`) | A leitura do gráfico, abaixo dele |
| `.d-note` | Fonte, em corpo pequeno |
| `.d-vs` | Duas colunas contrastando |
| `.d-cols--2/3/4`, `.d-box`, `.d-mini` | Grades de cartões |
| `.d-flat`, `.d-steps`, `.d-list`, `.d-check` | Listas |

Gráficos são **SVG inline escrito à mão**, sem biblioteca: `stroke="currentColor"`,
`viewBox` de 1128 de largura, classes de texto `t-lab`, `t-val`, `t-sm`, `t-ax`, e
`t-halo` para rótulo que cai sobre hachura. Barra sólida usa `fill="currentColor"` com
`opacity`; hierarquia se faz por opacidade, nunca por cor.

## Navegação e exportação

`assets/js/deck.js` já entrega: setas, espaço, Home, End, swipe, `f` para tela cheia,
`p` para imprimir, barra de progresso, régua de slides clicável, hash na URL, barra que
some sozinha e `window.deckApi` para a página do estudo chamar.

- **PDF** sai pela impressão. `@page { size: 1280px 720px }` produz uma página 16:9 por slide.
- **PPTX** carrega html2canvas 1.4.1 e pptxgenjs 3.12.0 do unpkg sob demanda, com SRI, e
  rasteriza slide a slide. Se trocar de versão, recalcule o hash:
  `curl -sL <url> | openssl dgst -sha384 -binary | openssl base64 -A`.
- O slide escala pelo viewport inteiro (a barra flutua por cima), então um contêiner 16:9
  fica preenchido sem tarja.

## Verificação obrigatória antes de entregar

Nunca diga que está pronto sem rodar isto. O script `verificar-deck.js`, ao lado deste
arquivo, mede se algum filho estoura a caixa do slide, coleta erro de JS e captura os dois
temas.

```bash
export PATH="$(ruby -e 'puts Gem.user_dir')/bin:$PATH"
bundle _4.0.5_ exec jekyll build
cd _site && (python3 -m http.server 4321 >/dev/null 2>&1 &) && cd ..

# Playwright não é dependência deste repo. Ache um vizinho com browser instalado:
#   for d in /home/fontenele/Code/*/node_modules; do [ -d "$d/playwright" ] && echo "$d"; done
# e teste o launch, porque a versão do pacote precisa bater com o chromium em ~/.cache/ms-playwright.
URL="http://127.0.0.1:4321/estudos/<slug>/apresentar/" \
NODE_PATH=/home/fontenele/Code/postura-trabalho/node_modules \
  node .claude/skills/apresentacao/verificar-deck.js

# e de novo com THEME=light
```

Checklist de saída:

- [ ] Zero slide com `overflowBottom` ou `overflowRight` positivo, em viewport 1280×782
- [ ] `sem erros de JS` nos temas escuro **e** claro
- [ ] Palco centrado em viewport **menor que 1280×720**: meça o `getBoundingClientRect`
      do `#deckStage` dentro do iframe do estudo (a 1440px de tela ele fica 1134 de largura)
      e num celular deitado. Alinhamento de grade não serve para centrar item maior que o
      contêiner: o navegador joga para o início e o slide sai da tela (bug de 2026-08-04,
      corrigido com `position: absolute` mais `scale() translate(-50%, -50%)`)
- [ ] Celular em pé mostra o pedido de rotação (`.deck-rotate`), não um slide a 30%
- [ ] Página do estudo sem rolagem horizontal em 390px, com o fallback mobile aparecendo
- [ ] `deckApi.total` bate com o número de slides esperado
- [ ] Exportação PPTX roda ponta a ponta (gera blob de alguns MB)
- [ ] PDF com uma página por slide, 960×540 pt
- [ ] `grep -c "—"` retorna 0 no include e nas páginas
- [ ] Build do Jekyll sem erro nem aviso
- [ ] Card em `/estudos/` apontando para o estudo, e `/apresentar/` fora do sitemap

## O que perguntar antes de escrever

Só quatro coisas mudam o trabalho de verdade: **a disciplina ou o público** (e confira o
código da disciplina na fonte, não no que foi dito), **a duração**, **de onde saem os
casos** e **quantos slides**. O resto decida e siga.