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

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.
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.
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).
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.
Sem travessão (—) em nada visível. Use parênteses, vírgula ou dois-pontos.
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.

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:

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.