Como montar e apresentar o projeto do seu grupo às bancas em 10 a 15 minutos: roteiro de slides, quem fala o quê, como mostrar o site e como se preparar para as perguntas.
🎤 21 a 25/09/2026⏱️ Apresentação: mínimo 10 · máximo 15 min❓ Depois: arguição da banca
Na Semana da Área Técnica cada grupo apresenta o projeto para duas bancas: a banca técnica (professores de Informática, que vão olhar o código) e a banca externa (convidados que não são da área e vão olhar se a ideia é boa e se o site é fácil de usar). Vocês têm de 10 a 15 minutos para contar a história do projeto e mostrar o site funcionando. Depois, a banca faz perguntas.
10–15minutos de apresentação (o ideal é ~12 min)
10slides no roteiro sugerido
~⅓do tempo mostrando o site ao vivo
100%dos integrantes falam
📖
1. Contem uma história
Problema → quem sofre com ele → o que vocês criaram → como funciona → como fizeram → o que muda. A banca precisa entender por que o site existe antes de ver como ele é.
🖥️
2. Mostrem o site de verdade
O centro da apresentação é a demonstração ao vivo: uma pessoa usando o site para resolver o problema, do começo ao fim. Nada de só ler slides.
🧠
3. Provem que sabem
Mostrem um trecho do código e expliquem. Contem como trabalharam e como usaram IA. Regra de Ouro: se ninguém sabe explicar, não entra.
Mudança importante
O site é real. A história fica nos slides.
No começo do projeto a orientação era montar o site com abas "O Problema", "A Solução", "Equipe" e "Bastidores". Vimos que isso não combina com um site de verdade: o site de uma clínica não tem uma aba "O Problema". Por isso, o site de vocês deve ter só as páginas que o usuário final realmente precisa. Tudo o que é "sobre o projeto" vai para a apresentação.
✖ Antes: site-trabalho escolar
InícioO ProblemaA SoluçãoEquipeBastidores
✔ Agora: site real (exemplo Recicla Óleo)
InícioComo armazenarPontos de coletaCalculadoraContato
🌐 Vai no SITE
As páginas que o público do site precisa usar (serviços, agendamento, mapa, cardápio, cadastro, contato...)
Pelo menos 1 funcionalidade em JavaScript funcionando
Visual pensado para o público real, funcionando no celular
Créditos de imagens e fontes (pode ser no rodapé ou numa página "Créditos")
"Sobre nós" só se fizer sentido para aquele negócio ou serviço
🎤 Vai nos SLIDES
O problema, com dados e fontes
Quem sofre com ele e como vocês descobriram isso
Por que um site é uma boa solução
Como o código foi organizado (HTML, CSS, JS)
Como a equipe trabalhou (papéis, sprints, GitHub, diário)
Os bastidores do uso de IA
Impacto esperado e próximos passos
A transparência continua obrigatória. A seção "Bastidores" sai do site, mas o uso de IA continua registrado no diário e passa a ser contado no slide 8 da apresentação. A banca técnica avalia exatamente isso.
Roteiro sugerido
Os 10 slides da apresentação
Este é um roteiro sugerido, não uma camisa de força. Vocês podem juntar, dividir ou reordenar slides, desde que a banca entenda o problema, veja o site funcionando e saiba como ele foi feito. Escolham a duração para ver o tempo de cada parte:
A história (1–4)O produto (5–6)O processo (7–8)O fechamento (9–10)
0:0012:30
Os exemplos de fala e as miniaturas usam o grupo fictício "Código Verde" (site Recicla Óleo), o mesmo do documento do projeto. Troquem pelo conteúdo e pelas cores do site de vocês.
1
Capa
🗣️ Líder de Sprint
Causar a primeira impressão e dizer quem vocês são. Deve ter a cara do site: mesma logo, mesmas cores, mesma fonte.
Coloquem
Nome e logo do site
Uma frase curta dizendo o que ele faz
Nome do grupo, turma e integrantes
Evitem
Ficar 1 minuto apresentando cada integrante: nomes na tela, fala rápida
Boa tarde! Nós somos o grupo Código Verde, da 2ª B, e vamos apresentar o Recicla Óleo: um site que ajuda o bairro a descartar o óleo de cozinha do jeito certo.
🛢️
Recicla Óleo
O destino certo para o óleo da sua cozinha
Grupo Código Verde · 2ª B · Ana, Carlos, Larissa, Marina, Rafael, Júlia e Pedro
Miniatura de exemplo
2
O problema
🗣️ Redator(a) de Conteúdo
Fazer a banca se importar com o problema em poucos segundos. Comecem por um dado forte, uma foto real ou uma situação que todo mundo reconhece.
Coloquem
Um número de impacto em destaque, com a fonte embaixo
Uma foto real do problema (de preferência tirada por vocês)
Onde ele acontece: no bairro, na cidade, em um tipo de negócio
Evitem
Parágrafos de texto e dados sem fonte
Quantos aqui já jogaram óleo de cozinha na pia? Um litro desse óleo pode contaminar até 20 mil litros de água, e é isso que acontece todo dia no nosso bairro.
Um litro de óleo na pia...
20 millitros de água contaminados
...entope a rede de esgoto e chega aos rios do bairro.
[ foto real do problema ]
Fonte: [órgão/site, ano]2
Miniatura de exemplo
3
Quem sofre com isso
🗣️ Redator(a) ou Designer/UX
Mostrar para quem o site foi feito e como vocês descobriram o que essas pessoas precisam. É isso que prova que a solução não foi inventada do nada.
Coloquem
O público-alvo, de preferência como uma "persona" (uma pessoa-exemplo com nome e rotina)
O que vocês fizeram para conhecer o problema: conversa, entrevista, formulário, visita
2 ou 3 descobertas que mudaram o site
Conversamos com 12 vizinhos e 3 lanchonetes. Quase todos queriam descartar certo, mas não sabiam onde entregar o óleo. Por isso o mapa de pontos de coleta virou a página principal.
Para quem é o Recicla Óleo
👩🏽🍳
Dona Cida, 54faz salgados para vender e junta 3 L de óleo por semana
12 moradores e 3 lanchonetes ouvidos
9 em cada 12 não sabiam onde entregar
Todos usam o celular, não o computador
3
Miniatura de exemplo
4
A solução
🗣️ Líder de Sprint
Explicar o site em uma frase e mostrar as 3 coisas principais que ele faz. É a ponte para a demonstração.
Coloquem
A frase: "O [nome] é um site que ajuda [público] a [resolver o problema]"
As 3 principais coisas que o usuário consegue fazer nele
Por que um site (e não só um panfleto ou um perfil em rede social)
Evitem
Listar todas as páginas: a demonstração vai mostrá-las
O Recicla Óleo ajuda quem cozinha a guardar o óleo, achar o ponto de coleta mais perto e ver quanta água salvou. Vamos mostrar funcionando.
Nossa solução
Um site que ajuda quem cozinha a dar o destino certo ao óleo usado.
🫙Aprender a armazenar
📍Achar o ponto de coleta
💧Calcular a água salva
4
Miniatura de exemplo
5
Demonstração ao vivo
🗣️ Designer/UX + QA
A parte mais importante. O slide só serve de "cortina": saiam dele e abram o site. Mostrem uma pessoa usando o site para resolver o problema, do começo ao fim.
Coloquem
No slide: só o link do site e "demonstração ao vivo"
Na demonstração: a jornada da persona do slide 3, passo a passo
A funcionalidade em JavaScript acontecendo na frente da banca
O site aberto no celular (ou no modo responsivo do navegador)
A Dona Cida juntou 3 litros de óleo. Ela abre o site pelo celular, vê como guardar na garrafa PET e busca o ponto de coleta mais perto: fica a duas quadras, na padaria.
● AO VIVO
codigo-verde.github.io/recicla-oleo
Pontos de coleta perto de você
No dia, saiam do slide e abram o site
6
Por dentro do código
🗣️ Arquiteto(a) de Código
Mostrar para a banca técnica que o grupo entende o que construiu. Escolham o trecho mais interessante, não o maior.
Coloquem
Um trecho curto (5 a 10 linhas) da funcionalidade em JavaScript, com a linha principal destacada
Explicação em linguagem simples: "quando o usuário clica, o código..."
Como o site fica responsivo (a media query, ou o antes e depois no celular)
Um exemplo de HTML semântico usado (header, nav, main...)
Evitem
Print do arquivo inteiro com letra minúscula
Ler o código linha por linha
Quando a pessoa digita os litros, esta função multiplica por 20 mil e mostra o resultado na tela. A linha em amarelo é a que escreve o valor dentro do parágrafo.
Calculadora de água salva
function calcular() {
const litros = campo.value;
const agua = litros * 20000;
resultado.textContent =
agua + " L de água salvos";}
botao.addEventListener("click",
calcular);
1. Lê o que a pessoa digitou
2. Faz a conta
3. Mostra na página
6
Miniatura de exemplo
7
Como trabalhamos
🗣️ Documentador(a)
Contar o processo: como o grupo se organizou, o que deu errado e como resolveram. A banca valoriza dificuldades reais mais do que um "deu tudo certo".
Coloquem
Os papéis e o rodízio entre as sprints
Um print do repositório no GitHub (commits de todos, pasta /diario)
A maior dificuldade e como o grupo resolveu
Um replanejamento que tiveram que fazer
Na Sprint 2 percebemos que a calculadora dependia de JavaScript, que ainda não tínhamos aprendido. Deixamos para a Sprint 3 e focamos em deixar as páginas prontas no celular.
Como trabalhamos
LíderCódigo ×2DesignConteúdoQADocumentação
Sprint 1tema escolhido por votação
Sprint 2calculadora adiada
Sprint 33 funções em JS
7
Miniatura de exemplo
8
Bastidores: uso de IA
🗣️ Documentador(a) + quem mais usou
Ser transparente sobre onde a IA ajudou e onde vocês decidiram. Não é para esconder nem para exagerar: é para mostrar que o grupo usou bem.
Coloquem
Um prompt real que funcionou bem (copiado do diário)
O que vocês aproveitaram e o que mudaram na resposta
Uma vez em que a IA errou ou atrapalhou
O que o grupo aprendeu sobre usar IA
Evitem
"Não usamos IA" quando o diário mostra que usaram
"A IA fez o site": se fez, ninguém vai conseguir explicar na arguição
A IA explicou media query, mas quem escreveu o CSS foi a Marina. Uma vez ela inventou um ponto de coleta que não existe; por isso conferimos todos os endereços pessoalmente.
Bastidores: como usamos IA
"Aja como um professor e me explique media query com um exemplo simples, sem fazer o código do meu site."
✔ Ajudouexplicar conceitos, revisar textos
✖ Errouinventou um ponto de coleta: conferimos todos
8
Miniatura de exemplo
9
Impacto e próximos passos
🗣️ Líder de Sprint
Responder "e daí?": o que muda se o site for usado de verdade, e o que fariam com mais tempo.
Coloquem
O que o site já resolve hoje
Quem poderia usar ou divulgar (escola, associação, comércio, prefeitura...)
2 ou 3 melhorias que fariam numa próxima versão
Se as 3 lanchonetes que ouvimos usarem o site, são mais de 500 litros de óleo por mês fora dos rios. Na próxima versão, queremos que os pontos de coleta possam se cadastrar sozinhos.
O que muda com o Recicla Óleo
Hoje o site já...
mostra 8 pontos de coleta
ensina a armazenar
calcula a água salva
Próximos passos
cadastro de novos pontos
parceria com a escola
lembrete de coleta
9
Miniatura de exemplo
10
Encerramento
🗣️ Todos
Terminar com energia e deixar a banca com o site na mão. Este slide fica na tela durante a arguição.
Coloquem
QR code e link do site no GitHub Pages
Link do repositório
"Obrigado! Perguntas?"
Evitem
Terminar com "é isso..." ou "acabou"
Apontem a câmera do celular para o QR code e testem o Recicla Óleo agora mesmo. Obrigado! Estamos prontos para as perguntas.
Obrigado!
codigo-verde.github.io/recicla-oleo
Perguntas?
Miniatura de exemplo (QR ilustrativo)
Slide extra (reserva): depois do encerramento, deixem 2 ou 3 slides escondidos com prints das principais telas do site. Se a internet ou o projetor falharem na hora da demonstração, vocês continuam por eles sem perder o ritmo.
Para os ensaios
Cronômetro de ensaio
Abram esta página no celular durante o ensaio. O cronômetro mostra em qual slide vocês deveriam estar agora, de acordo com a duração escolhida no roteiro.
⏱️ Ensaio
Duração escolhida: Recomendada · 12 min 30 s
0:00
Ainda não começou
Vocês deveriam estar em
Slide 1 · Capa
Próximo: Slide 2 · O problema
Abaixo de 10 min: está faltando conteúdo. Normalmente é a demonstração que ficou curta demais.
Acima de 15 min: a banca pode interromper. Cortem texto dos slides, não a demonstração.
Ensaiem pelo menos 2 vezes completas, em pé, com os slides e o site abertos, como no dia.
Divisão da fala
Quem fala o quê
Todos os integrantes falam. A sugestão abaixo usa os papéis do projeto, mas o grupo pode trocar. O importante é que cada pessoa fale da parte em que realmente trabalhou, porque a banca pode fazer perguntas a qualquer um.
Slide
Quem apresenta (sugestão)
Por que essa pessoa
1 · Capa
Líder de Sprint
Abre e conduz a apresentação
2 · O problema
Redator(a) de Conteúdo
Fez a pesquisa e conhece os dados e as fontes
3 · Quem sofre
Redator(a) ou Designer/UX
Conversou com o público e pensou na experiência
4 · A solução
Líder de Sprint
Tem a visão geral do projeto
5 · Demonstração
Designer/UX (conduz) + QA (no celular)
Conhecem cada tela e testaram o site em vários aparelhos
6 · Código
Arquiteto(a) de Código (a dupla divide)
Organizou o código e revisou as funcionalidades
7 · Como trabalhamos
Documentador(a)
Cuidou do diário do grupo e dos replanejamentos
8 · Uso de IA
Documentador(a) + quem mais usou IA
O registro está no diário de cada um
9 · Impacto
Líder de Sprint
Fecha a história
10 · Encerramento
Todos
O grupo fica à frente para a arguição
Quem não está falando não fica parado. Combinem quem passa os slides e quem opera o site durante a demonstração. Evitem que uma pessoa só fique "no computador" a apresentação inteira.
A parte mais importante
Como fazer a demonstração do site
A banca não quer um passeio pelas páginas ("aqui é o início, aqui é o contato..."). Ela quer ver o site resolvendo o problema. Por isso, contem a demonstração como uma história.
✖ Tour de páginas
"Essa é a página inicial. Aqui em cima tem o menu. Essa é a página de pontos de coleta. Aqui tem a calculadora. E essa é a de contato."
✔ Jornada do usuário
"A Dona Cida juntou 3 litros de óleo. Ela abre o site no celular, vê como guardar na garrafa, procura o ponto mais perto (é na padaria) e descobre que salvou 60 mil litros de água."
Passo a passo
🧭
1. Escrevam o roteiro da jornada
Quem é a pessoa, o que ela quer fazer e qual caminho percorre no site. Ensaiem sempre o mesmo caminho, clique por clique.
⚡
2. Coloquem o JavaScript no centro
A funcionalidade interativa tem que acontecer na frente da banca: o quiz respondido, o formulário validando, o filtro filtrando.
📱
3. Mostrem no celular
Abram o site num celular ou usem o modo responsivo do navegador (F12 → ícone de celular). A banca avalia a responsividade.
🔍
4. Deixem fácil de enxergar
Zoom do navegador em 125% a 150% (Ctrl + +). Mexam o mouse devagar e digam o que estão clicando.
📝
5. Preparem os dados
Tenham à mão o que vão digitar (nome, e-mail de teste, busca). Nada de inventar na hora nem usar dados pessoais reais.
🛟
6. Tenham um plano B
Gravem um vídeo curto da tela com a demonstração ou coloquem prints nos slides reserva. Se a internet cair, a apresentação continua.
Design dos slides
Regras para slides que funcionam no projetor
✔ Façam
Uma ideia por slide, com título que já diz a mensagem
No máximo 6 linhas curtas por slide; o resto vocês falam
Letra grande: títulos com 36 pt ou mais e textos com 24 pt ou mais
Contraste alto (texto escuro no fundo claro, ou o contrário): o projetor apaga as cores claras
Usem a identidade visual do site: logo, cores e fonte
Fotos reais e prints do site no lugar de imagens genéricas
Fonte embaixo de todo dado e crédito em toda imagem
Número em cada slide (facilita as perguntas: "volta no slide 6")
✖ Evitem
Ler o slide de costas para a banca
Parágrafos inteiros copiados do site ou do diário
Print de código com letra minúscula
Animações e transições exageradas
Fundo com foto atrás do texto
Slide "Integrantes" com um minuto de apresentação de cada um
Dados sem fonte ou imagens sem crédito
Onde fazer os slides
Qualquer ferramenta serve: Google Apresentações, Canva ou PowerPoint. O modelo para baixar abre nas três. Levem sempre uma cópia em PDF (pendrive e e-mail), porque o computador da sala pode não ter a ferramenta nem internet.
Critérios de avaliação
O que a banca avalia, e em qual slide aparece
Cada critério das fichas das bancas precisa aparecer em algum momento da apresentação. Usem esta tabela para conferir se nada ficou de fora.
Banca técnica (professores de Informática · 0 a 100)
Critério
Onde mostrar
Clareza na definição do problema
Slides 2 e 3
Criatividade e inovação da proposta
Slide 4 e demonstração
Organização e estrutura do código
Slide 6 + repositório aberto na arguição
Uso adequado de HTML semântico e CSS responsivo
Slide 6
Funcionalidades em JavaScript
Slide 5 (funcionando) e slide 6 (explicada)
Publicação no GitHub Pages e organização do repositório
Slides 5, 7 e 10 (link, commits, QR code)
Usabilidade e navegação
Slide 5, jornada do usuário
Responsividade em diferentes telas
Slide 5, site no celular
Domínio técnico na arguição (todos os integrantes)
Banca externa (convidados de fora da área · 0 a 60)
Critério
Onde mostrar
Clareza do problema apresentado
Slide 2
Criatividade da ideia
Slide 4
Relevância da solução (impacto social ou empresarial)
Slides 3 e 9
Apresentação visual (design e estética)
Slide 5 e o visual dos próprios slides
Facilidade de uso e navegação
Slide 5
Comunicação da equipe na apresentação
A apresentação inteira: todos falando, tempo respeitado
Lembrem da banca externa: são pessoas que não programam. Nos slides 2 a 5 e 9, falem sem termos técnicos. Deixem "função", "media query" e "commit" para o slide 6 e para as perguntas da banca técnica.
Depois da apresentação
Arguição: como se preparar para as perguntas
Terminada a apresentação, as bancas fazem perguntas, que podem ser dirigidas a qualquer integrante, inclusive por sorteio. Aqui vale a Regra de Ouro: todo mundo precisa conseguir explicar qualquer parte do site.
⚙️ Perguntas prováveis da banca técnica
Mostre no código onde está a funcionalidade em JavaScript e explique.
O que acontece se eu mudar esta linha?
Como vocês fizeram o site funcionar no celular?
Por que usaram section aqui e não div?
Mostre o histórico de commits. O que você fez no projeto?
Em que parte vocês usaram IA? O que mudaram do que ela sugeriu?
Qual foi o erro mais difícil de resolver?
💜 Perguntas prováveis da banca externa
Como as pessoas vão ficar sabendo que o site existe?
Alguém do público de vocês já testou o site? O que achou?
Por que um site, e não um perfil no Instagram?
O que vocês fariam se tivessem mais tempo?
O que cada um aprendeu fazendo o projeto?
Dicas para responder
Deixem abertos no computador: o site, o repositório no GitHub e o código no editor. Mostrar é melhor do que só falar.
Se a pergunta for para uma pessoa, ela responde. Os colegas só completam depois, se a banca permitir.
Não entendeu a pergunta? Peça para repetir ou repita com suas palavras: "Vocês querem saber como...?"
Respostas curtas e diretas. Se a banca quiser mais, ela pergunta.
Antes do dia, façam uma arguição simulada: um grupo pergunta ao outro, sorteando quem responde.
Antes do dia
Checklist do grupo
Marquem conforme forem concluindo. 0 de 12 itens prontos. (As marcações ficam salvas só neste navegador.)
No dia, 5 minutos antes
Abrir os slides, o site, o repositório e o editor com o código, cada um numa aba
Conferir se a internet está funcionando e se o site carrega
Zoom do navegador em 125% a 150%
Silenciar os celulares, menos o que será usado na demonstração
Para começar mais rápido
Modelo de slides para baixar
O modelo já vem com os 10 slides do roteiro, mais 2 slides reserva para prints do site. Cada slide tem espaços marcados com [colchetes] para vocês substituírem, e as anotações do apresentador trazem o tempo sugerido, quem fala e as dicas desta página.
📊
Modelo de apresentação — Digital ao Extremo 2026
Arquivo .pptx · abre no PowerPoint, no Google Apresentações (Arquivo → Importar slides ou enviando para o Drive) e no Canva (Criar design → Importar arquivo). Troquem as cores e a fonte pelas do site de vocês.
O modelo é um ponto de partida. Grupos que criarem o próprio layout, desde que sigam a lógica do roteiro, estão fazendo exatamente o que se espera. Um visual criativo e coerente com o site conta a favor.