🚀 Codando o Futuro 1º Bimestre

Semana	Título da Aula	Habilidades BNCC (Mat)	Habilidades BNCC (LP)	Habilidades BNCC (Outras)	Pilares do Pensamento Computacional
1	"O Universo HTML: A Estrutura do Nada"	EM13MAT101	EM13LP01	EM13CHS101	Abstração
2	"CSS: A Maquiagem dos Deuses"	EM13MAT102	EM13LP02	EM13LGG101	Reconhecimento de Padrões
3	"JavaScript: A Mágica Acontece"	EM13MAT301	EM13LP04	EM13CNT101	Decomposição
4	"DOM: O Documento que Vive"	EM13MAT302	EM13LP05	EM13LGG303	Algoritmos
5	"Eventos: Quando o Usuário Toca na Tela"	EM13MAT201	EM13LP06	EM13CHS201	Decomposição + Algoritmos
6	"Dados e Arrays: A Biblioteca do Caos"	EM13MAT303	EM13LP07	EM13LGG401	Abstração + Reconhecimento
7	"Funções que Fazem a Festa"	EM13MAT304	EM13LP08	EM13CNT201	Algoritmos
8	"Projeto Integrador"	EM13MAT401	EM13LP09	EM13LGG501	Todos os Pilares
9	"Testes, Debug e Ajustes"	EM13MAT402	EM13LP10	EM13CHS301	Decomposição + Algoritmos
10	"Lançamento Oficial"	EM13MAT501	EM13LP11	EM13LGG601	Todos os Pilares

Semana	Título	Conceito	Atividade Principal
1	"O Universo HTML"	HTML é a espinha dorsal	Construir a primeira página HTML coletiva
2	"CSS: A Maquiagem"	CSS transforma texto em experiência visual	"Operação Tapa na Cara do Feio"
3	"JavaScript: A Mágica"	JS é a alma da interatividade	"Gerador de Desculpas Esfarrapadas"
4	"DOM: O Documento que Vive"	O DOM é a árvore da página	"Caça ao Elemento"
5	"Eventos"	Eventos dominam a interação	"Jogo da Memória do Caos"
6	"Dados e Arrays"	Arrays organizam dados	Lista de tarefas (to‑do list)
7	"Funções que Fazem a Festa"	Funções reutilizam código	Calculadora interativa
8	"Projeto Integrador"	Integrar tudo em um projeto	Planejar e iniciar o desenvolvimento
9	"Testes, Debug e Ajustes"	Testar e refatorar são partes do processo	Caça ao bug
10	"Lançamento Oficial"	Apresentar e celebrar	Apresentações e certificados

🎯 Título

"O Universo HTML: A Estrutura do Nada" ou "Como construir um castelo com tags e sem tijolos" 🏰

🎯 Objetivos Operacionais

Compreender o que é HTML e seu papel fundamental na construção de páginas web.
Identificar e utilizar tags estruturais: <!DOCTYPE html>, <html>, <head>, <body>.
Utilizar tags de conteúdo: <h1> a <h6>, <p>, <ul>, <ol>, <li>.
Criar uma página funcional a partir do zero, do arquivo à visualização no navegador.
Bônus: entender que HTML é marcação, não programação e isso é um superpoder que permite estruturar qualquer ideia.

📚 Conteúdo Programático

Estrutura básica de um documento HTML5.
Tags de cabeçalho (<head>) e corpo (<body>).
Títulos, parágrafos e listas (ordenadas e não ordenadas).
Boas práticas de indentação e organização do código.
Conceito de elemento e atributo.
Diferença entre conteúdo e estrutura.

🧩 Pilares do Pensamento Computacional

Abstração: HTML representa uma página de forma estruturada, escondendo a complexidade do navegador. O aluno aprende a pensar em termos de "blocos" que formam um todo.
Reconhecimento de Padrões: Identificação do padrão de abertura e fechamento de tags (<tag>...</tag>), e da hierarquia de aninhamento.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT101 Interpretar criticamente situações econômicas, sociais e fatos relativos às Ciências da Natureza que envolvam a variação de grandezas, pela análise dos gráficos das funções representadas e das taxas de variação, com ou sem apoio de tecnologias digitais.
EM13MAT102 Analisar tabelas, gráficos e amostras de pesquisas estatísticas apresentadas em relatórios divulgados por diferentes meios de comunicação, identificando, quando for o caso, inadequações que possam induzir a erros de interpretação.

BNCC Linguagens e suas Tecnologias

EM13LP01 Analisar o contexto de produção, circulação e recepção de textos, considerando as diferentes linguagens, mídias e suportes.
EM13LP02 Estabelecer relações entre as partes de um texto, identificando repetições ou substituições que contribuem para a continuidade do texto.

BNCC Ciências Humanas e Sociais Aplicadas

EM13CHS101 Identificar, analisar e comparar diferentes fontes e narrativas expressas em diversas linguagens, com vistas à compreensão de ideias filosóficas e de processos e eventos históricos, geográficos, políticos, econômicos, sociais, ambientais e culturais.

RCP-PR Educação Digital

EM13CO01 Explorar e construir a solução de problemas por meio da reutilização de partes de soluções existentes (os alunos reutilizam tags HTML como "blocos" para estruturar suas páginas).

💻 Código Comentado `minha-primeira-pagina.html`

<!-- ============================================================
MEU PRIMEIRO HTML A ESTRUTURA DO NADA
============================================================ -->
<!-- 1. DOCTYPE: avisa o navegador que isso é HTML5 (a versão mais moderna) -->
<!DOCTYPE html>
<!-- 2. A tag <html> é a raiz de TUDO. O atributo lang="pt" diz que é português. -->
<html lang="pt">
<!-- 3. <head> é o "cérebro" da página configurações, título, metadados. Não aparece na tela. -->
<head>
  <!-- 4. Meta charset define a codificação de caracteres (acentos, emojis etc.) -->
  <meta charset="UTF-8">
  <!-- 5. A tag <title> é o que aparece na aba do navegador. É OBRIGATÓRIA. -->
  <title>🚀 Minha Odisséia Digital</title>
</head>
<!-- 6. <body> é o "corpo" TUDO que o usuário vê fica aqui dentro. -->
<body>
  <!-- 7. <h1> é o título principal (nível 1). Só UM por página (por boas práticas). -->
  <h1>🌌 Bem‑vindo ao meu universo HTML</h1>
  <!-- 8. <h2> é subtítulo. Vai até <h6>. Cada um tem seu tamanho. -->
  <h2>Eu sou [Seu Nome] e essa é a minha base espacial</h2>
  <!-- 9. <p> é parágrafo. Escrevo minha frase de apresentação. -->
  <p>
    Olá, terráqueos! Eu sou um ser humano que está aprendendo a
    <strong>codificar</strong> o futuro.
    <!-- <strong> deixa o texto em negrito (semântico, importante para acessibilidade) -->
    Este é o meu primeiro passo na construção de mundos digitais.
  </p>
  <!-- 10. Lista NÃO ordenada (<ul>) usa bolinhas. Ótima para itens sem ordem específica. -->
  <h3>🔥 3 coisas que eu ODEIO (com todas as minhas forças)</h3>
  <ul>
    <li>Página carregando devagar</li>
    <li>Fonte Comic Sans em site sério</li>
    <li>Pop-up de "Você ganhou um iPhone"</li>
  </ul>
  <!-- 11. Lista ORDENADA (<ol>) usa números. Boa para passos, rankings etc. -->
  <h3>⭐ 3 coisas que eu AMO no mundo digital</h3>
  <ol>
    <li>Dark mode</li>
    <li>Animações suaves</li>
    <li>Botões que respondem com um "click" gostoso</li>
  </ol>
  <!-- 12. <br> é quebra de linha (não precisa fechar). Use com moderação. -->
  <p>
    E lembre‑se: <br>
    <em>"Se não está no HTML, não existe."</em>
    <!-- <em> enfatiza (itálico) semanticamente -->
  </p>
  <!-- 13. Bônus: comentário no meio do corpo para organizar -->
  <!-- Fim da minha primeira obra-prima (por enquanto) -->
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Abertura + Gancho O professor lê a "Carta de Abertura" com entonação épica. Pergunta: "Quem aqui já entrou em um site? Quem aqui já imaginou como ele foi feito?"
5-10 min: Exposição Dialógica O que é HTML? Analogia: HTML é o esqueleto sem ele, o corpo (site) não fica de pé. Mostrar a estrutura básica no quadro/projetor.
10-25 min: Mão na Massa Código Guiado Os alunos abrem o VS Code e digitam junto com o professor o código comentado. O professor explica cada tag em tempo real. Ninguém copia e cola todo mundo digita.
25-30 min: Teste no Navegador Salvar o arquivo, abrir no navegador. Comemorar a primeira página no ar! "Vocês acabaram de criar algo do nada. Isso é poder."
30-40 min: Desafio da Personalização Cada aluno modifica o conteúdo: troca o nome, as listas de "odeio/amo", adiciona um novo parágrafo. O professor circula ajudando.
40-45 min: Compartilhamento Coletivo 2-3 alunos mostram suas páginas no projetor. Risadas garantidas com as listas de "odeio/amo".
45-50 min: Fechamento + Meta O que aprendemos hoje? HTML é a estrutura. Na próxima semana: CSS a maquiagem dos deuses.

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

"Um site que só funciona para um tipo de pessoa não é um site é um clube exclusivo. E a gente não faz clubes exclusivos."

Deficiência Visual: Contraste, tamanho de fonte, leitores de tela. Exemplo: adicionar lang="pt" na tag <html>.
Deficiência Auditiva: Instruções visuais, feedback visual.
Deficiência Motora: Navegação por teclado, pausas, trabalho em duplas.
Transtorno de Atenção: Layout limpo, instruções curtas.
Altas Habilidades/Superdotação: Desafios extras (tabelas, links), mentoria.

📊 Critérios Operacionais de Avaliação com pontuação

Estrutura Básica (0-3): Criou o arquivo .html com <!DOCTYPE>, <html>, <head>, <body>, <title>.
Tags de Conteúdo (0-3): Usou pelo menos 3 tags diferentes de conteúdo (<h1>, <p>, <ul> etc.).
Personalização (0-2): Modificou o conteúdo com criatividade (listas, parágrafos, títulos).
Indentação (0-1): O código está organizado e indentado corretamente.
Ajuda aos Colegas (0-1): Contribuiu com a turma, ajudando outros alunos.

Total: 0-10 pontos

"Vocês acabaram de dar o primeiro passo em uma jornada que vai mudar a forma como vocês enxergam o mundo digital. Parabéns, devs! 🚀"

🎯 Título

"CSS: A Maquiagem dos Deuses" ou "Como transformar um monstro do Frankenstein em uma supermodelo digital" 💄

🎯 Objetivos Operacionais

Compreender o papel do CSS na estilização e na experiência visual de uma página.
Aplicar seletores básicos: elemento, classe e ID.
Utilizar propriedades de cor, fonte, espaçamento, borda, sombra e fundo.
Aplicar CSS nas formas: inline, interno (<style>) e externo (arquivo .css).
Bônus: entender que CSS é arte com regras e regras foram feitas para serem quebradas (com consciência).

📚 Conteúdo Programático

O que é CSS e sua função na web moderna.
Sintaxe CSS: seletor { propriedade: valor; }.
Seletores: elementos (h1), classes (.destaque) e IDs (#principal).
Propriedades essenciais: color, background-color, font-family, font-size, padding, margin, border, border-radius, box-shadow, text-align, display, flexbox (introdução).
Como vincular um arquivo CSS externo ao HTML (<link>).
Conceito de cascata e especificidade (por que um estilo "ganha" de outro).

🧩 Pilares do Pensamento Computacional

Reconhecimento de Padrões: Identificação do padrão seletor { propriedade: valor; } uma regra que se repete para cada elemento estilizado.
Decomposição: Dividir a estilização em partes isoladas: fonte, cor, espaçamento, borda, layout cada parte é resolvida separadamente.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT102 Analisar tabelas, gráficos e amostras de pesquisas estatísticas apresentadas em relatórios divulgados por diferentes meios de comunicação, identificando, quando for o caso, inadequações que possam induzir a erros de interpretação.
EM13MAT101 Interpretar criticamente situações econômicas, sociais e fatos relativos às Ciências da Natureza que envolvam a variação de grandezas, pela análise dos gráficos das funções representadas e das taxas de variação, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias

EM13LP02 Estabelecer relações entre as partes de um texto, identificando repetições ou substituições que contribuem para a continuidade do texto.
EM13LGG101 Compreender e analisar processos de criação e produção de diferentes manifestações artísticas e culturais, considerando suas linguagens, suportes e contextos de circulação.

BNCC Ciências Humanas e Sociais Aplicadas

EM13CHS101 Identificar, analisar e comparar diferentes fontes e narrativas expressas em diversas linguagens, com vistas à compreensão de ideias filosóficas e de processos e eventos históricos, geográficos, políticos, econômicos, sociais, ambientais e culturais.

RCP-PR Educação Digital

EM13CO02 Construir soluções computacionais para problemas do cotidiano, de forma autônoma e colaborativa, utilizando linguagens de programação.
EM13CO03 Utilizar diferentes ferramentas e ambientes de programação para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.

💻 Código Comentado `index_feio.html` (o "monstro")

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>⚠️ Monstro FEIO socorro!</title>
</head>
<body>
  <!-- Este é o HTML mais sem graça do mundo sem estilo nenhum -->
  <h1>Eu sou um título FEIO</h1>
  <p>Eu sou um parágrafo sem sal, sem cor, sem vida.</p>
  <ul>
    <li>Item 1 sem graça</li>
    <li>Item 2 deprimente</li>
    <li>Item 3 SOS</li>
  </ul>
  <div>Eu sou uma div invisível (porque não tenho estilo)</div>
</body>
</html>

💻 Código Comentado `estilo.css` (solução da "Operação Tapa na Cara do Feio")

/* ================================================================
CSS A MAQUIAGEM DOS DEUSES
================================================================ */
h1 {
  color: #ff4500; font-family: 'Arial Black', sans-serif;
  font-size: 48px; text-align: center;
  text-shadow: 3px 3px 0px #ffcc00; letter-spacing: 2px;
}
p {
  color: #2c3e50; font-size: 20px; line-height: 1.6;
  background-color: #ecf0f1; padding: 15px;
  border-radius: 10px; border-left: 6px solid #e74c3c;
  margin: 20px 0;
}
.destaque {
  background-color: #f1c40f; font-weight: bold;
  padding: 8px 16px; border-radius: 8px;
  transition: 0.3s;
}
.destaque:hover {
  background-color: #e67e22; transform: scale(1.05);
}
#principal {
  background-color: #2c3e50; color: white; padding: 30px;
  margin: 20px 0; border-radius: 20px; text-align: center;
  font-size: 24px; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
ul {
  list-style: none; padding: 0; display: flex;
  gap: 20px; justify-content: center; flex-wrap: wrap;
}
li {
  background-color: #3498db; color: white; padding: 12px 24px;
  border-radius: 30px; font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: 0.2s;
  cursor: pointer;
}
li:hover {
  background-color: #2980b9; transform: translateY(-4px);
}
div {
  background: linear-gradient(135deg, #8e44ad, #3498db);
  color: white; padding: 20px; margin-top: 20px;
  border-radius: 12px; text-align: center; font-size: 18px;
  font-weight: bold; border: 3px dashed #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
body {
  background: #f0f2f5; font-family: 'Segoe UI', sans-serif;
  margin: 40px;
}
h2 {
  color: #2c3e50; border-bottom: 4px solid #3498db;
  padding-bottom: 10px;
}
p strong { color: #e74c3c; }
p em { color: #2980b9; font-style: italic; }
@media (max-width: 600px) {
  h1 { font-size: 32px; }
  ul { flex-direction: column; align-items: center; }
  li { width: 80%; text-align: center; }
}

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho Provocador Professor exibe uma página "feia" no projetor e pergunta: "Isso é um site ou uma lista de supermercado? O que falta pra isso ficar com a cara de vocês?" Introduz o CSS como "maquiagem".
5-10 min: Exposição Dialógica O que é CSS? Analogia: HTML é o esqueleto, CSS é a roupa. Mostrar a sintaxe seletor { propriedade: valor; } com exemplos visuais. Destacar que CSS é cascata a última regra prevalece.
10-20 min: Operação Tapa na Cara do Feio Distribuir o arquivo index_feio.html (ou fazer os alunos criarem). Cada dupla recebe a missão: estilizar essa página feia para ficar impactante usando o arquivo estilo.css. O professor fornece o código CSS comentado como "colinha".
20-30 min: Mão na Massa Os alunos digitam o CSS (não copiam e colam) no arquivo estilo.css e vinculam ao HTML com <link>. Professor circula, ajuda e provoca: "Por que você escolheu essa cor? O que essa fonte diz sobre você?"
30-38 min: Desafio da Personalização Extrema Cada dupla modifica o CSS: troca cores, fontes, adiciona sombras, muda o layout (flexbox). Quem termina antes, adiciona animações (@keyframes) ou um gradiente radical.
38-45 min: Galeria dos Monstros Transformados Cada dupla mostra no projetor a transformação. A turma vota na "mais impactante", "mais caótica" e "mais elegante". Risadas e palmas garantidas.
45-50 min: Fechamento + Reflexão O que aprendemos sobre CSS? Seletores, propriedades, cascata. Para casa: encontre um site que você acha bonito e identifique 3 propriedades CSS que ele usa. Na próxima semana: JavaScript a mágica!

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

"A beleza da web é que ela pode ser linda para todos se a gente se importar."

Deficiência Visual: Contraste, fonte responsiva (rem), ferramenta WebAIM.
Deficiência Auditiva: Instruções escritas em slides, feedback visual.
Deficiência Motora: Atalhos de teclado, padding grande para cliques.
Transtorno de Atenção: Tarefas curtas, cores vibrantes.
Altas Habilidades/Superdotação: Desafios extras (@keyframes, CSS Grid), pesquisa.

📊 Critérios Operacionais de Avaliação com pontuação

Vínculo do CSS (0-2): Conseguiu vincular o arquivo .css ao HTML corretamente (<link>).
Uso de Seletores (0-3): Aplicou os 3 tipos de seletor: elemento, classe e ID.
Propriedades Essenciais (0-3): Usou pelo menos 5 propriedades diferentes (cor, fonte, padding, borda, etc.).
Personalização Criativa (0-2): A estilização tem personalidade, foge do padrão básico.
Responsividade (0-1 bônus): Adicionou pelo menos uma regra @media para adaptar a página a telas menores.
Colaboração (0-1): Ajudou colegas ou compartilhou descobertas com a turma.

Total: 0-10 pontos (com bônus até 12)

"Vocês pegaram um mostro e o transformaram em uma obra de arte. Agora, toda vez que verem um site feio, vão pensar: 'Eu posso consertar isso.' E isso, meus caros, é poder." 🎨

🎯 Título

"JavaScript: A Mágica Acontece" ou "Como fazer o computador obedecer aos seus caprichos" 🧙‍♂️

🎯 Objetivos Operacionais

Compreender o papel do JavaScript na interatividade e no comportamento dinâmico de uma página.
Utilizar variáveis e tipos de dados (string, number, boolean).
Criar funções simples que executam ações.
Manipular o HTML via JavaScript usando document.getElementById() e .innerHTML.
Trabalhar com arrays e números aleatórios (Math.random() e Math.floor()).
Bônus: entender que errar é parte do processo e o console.log() é seu melhor amigo.

📚 Conteúdo Programático

O que é JavaScript e sua evolução na web (do "script de validação" ao "rei da interatividade").
Variáveis: var, let, const (diferenças básicas).
Tipos primitivos: string, number, boolean.
Funções: declaração, chamada e reuso.
Arrays: criação, acesso por índice, propriedade .length.
Números aleatórios: Math.random() e Math.floor().
Manipulação do DOM: document.getElementById() e .innerHTML.
O evento onclick (e a importância de separar HTML e JS).
Ferramenta do Dev: o console do navegador (F12) seu radar de bugs.

🧩 Pilares do Pensamento Computacional

Decomposição: O problema "gerar uma desculpa aleatória" é dividido em: (1) criar um array com desculpas, (2) sortear um índice aleatório, (3) exibir a desculpa na tela.
Algoritmos: Sequência lógica de passos que o computador executa ao clicar no botão: pegar desculpas → sortear → exibir.
Abstração: A função gerarDesculpa() abstrai todo o processo de sorteio e exibição o usuário só precisa clicar em um botão.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT301 Resolver e elaborar problemas do cotidiano, da Matemática e de outras áreas do conhecimento, que envolvem equações lineares, inequações e sistemas, com ou sem apoio de tecnologias digitais.
EM13MAT302 Construir modelos matemáticos para descrever fenômenos e situações do cotidiano, utilizando funções e equações, com ou sem apoio de tecnologias digitais.
EM13MAT303 Resolver e elaborar problemas que envolvem funções polinomiais de 1º e 2º graus, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias

EM13LP04 Analisar os efeitos de sentido decorrentes do uso de recursos linguísticos e multissemióticos em diferentes textos, considerando a função social e os efeitos de sentido pretendidos.
EM13LP05 Produzir textos de diferentes gêneros, considerando a adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.

BNCC Ciências da Natureza e suas Tecnologias

EM13CNT101 Analisar e representar, com ou sem o uso de dispositivos e aplicativos digitais específicos, as transformações e conservações em sistemas que envolvam quantidade de matéria, energia e movimento para realizar previsões sobre seus comportamentos em situações cotidianas.

RCP-PR Educação Digital

EM13CO01 Explorar e construir a solução de problemas por meio da reutilização de partes de soluções existentes.
EM13CO02 Construir soluções computacionais para problemas do cotidiano, de forma autônoma e colaborativa, utilizando linguagens de programação.
EM13CO03 Utilizar diferentes ferramentas e ambientes de programação para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.

💻 Código Comentado `gerador_de_desculpas.html` (o "app")

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>🤥 Gerador de Desculpas Esfarrapadas</title>
  <style>
    body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background: linear-gradient(145deg, #ff9a9e 0%, #fecfef 100%);
      display: flex; justify-content: center; align-items: center;
      height: 100vh; margin: 0;
    }
    .container {
      background: white; padding: 40px; border-radius: 50px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center;
      max-width: 500px; transition: 0.3s;
    }
    .container:hover { transform: scale(1.02); box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
    h1 { font-size: 2.2rem; color: #2d3436; margin-bottom: 5px; }
    h3 { color: #636e72; font-weight: normal; margin-top: 0; }
    button {
      background: #6c5ce7; color: white; border: none;
      padding: 16px 32px; font-size: 24px; border-radius: 50px;
      cursor: pointer; transition: 0.3s; box-shadow: 0 8px 0 #3d2c8d;
      font-weight: bold;
    }
    button:hover { transform: translateY(-4px); box-shadow: 0 12px 0 #3d2c8d; }
    button:active { transform: translateY(4px); box-shadow: 0 4px 0 #3d2c8d; }
    #desculpa {
      margin: 30px 0; font-size: 28px; min-height: 80px;
      background: #f8f9fa; padding: 20px; border-radius: 30px;
      border-left: 10px solid #6c5ce7; transition: 0.3s;
      display: flex; align-items: center; justify-content: center;
      font-weight: bold; color: #2d3436;
    }
    .footer { font-size: 14px; color: #aaa; margin-top: 15px; }
    .emoji-grande { font-size: 4rem; display: block; margin-bottom: 10px; }
    #contador { font-size: 0.9rem; color: #6c5ce7; margin-top: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <span class="emoji-grande">🤥</span>
    <h1>Gerador de Desculpas</h1>
    <h3>Para quando você não fez a lição</h3>
    <div id="desculpa">👉 Clique no botão abaixo 👇</div>
    <button onclick="gerarDesculpa()">🎲 Me dá uma desculpa!</button>
    <div id="contador">Desculpas geradas: 0</div>
    <p class="footer"> Não nos responsabilizamos por notas baixas.</p>
  </div>
  <script>
    var desculpas = [
      "Meu cachorro comeu o código-fonte. 🐶",
      "O Wi-Fi caiu e levou minha vontade de estudar junto. 📡",
      "Fui hackeado por um gato. 🐱",
      "A Lua estava em Vênus e atrapalhou minha concentração. 🌙",
      "Meu computador pegou um vírus... de preguiça. 🦠",
      "Eu fiz, mas um bug viajante no tempo apagou tudo. 🕰️",
      "Não era lição de casa, era lição de casa opcional... né? 😇",
      "Minha energia acabou no meio do commit. ⚡",
      "O código estava funcionando, mas aí o sol se pôs. 🌅",
      "Fiz tudo certinho, mas o navegador não colaborou. 🌐"
    ];
    var totalGeradas = 0;
    function gerarDesculpa() {
      var total = desculpas.length;
      var indiceSorteado = Math.floor(Math.random() * total);
      var desculpaEscolhida = desculpas[indiceSorteado];
      document.getElementById("desculpa").innerHTML = desculpaEscolhida;
      totalGeradas++;
      document.getElementById("contador").textContent = "Desculpas geradas: " + totalGeradas;
      console.log("Desculpa sorteada: " + desculpaEscolhida);
      console.log("Total gerado até agora: " + totalGeradas);
    }
    // (Opcional) chamar automaticamente ao carregar: gerarDesculpa();
    function adicionarDesculpa(novaDesculpa) {
      desculpas.push(novaDesculpa);
      console.log("Nova desculpa adicionada: " + novaDesculpa);
      console.log("Total de desculpas agora: " + desculpas.length);
    }
    function removerUltimaDesculpa() {
      if (desculpas.length > 0) {
        var removida = desculpas.pop();
        console.log("Desculpa removida: " + removida);
        console.log("Restam " + desculpas.length + " desculpas.");
      } else {
        console.log("Não há desculpas para remover!");
      }
    }
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho Explosivo Professor pergunta: "Quem aqui já precisou de uma desculpa pra não fazer a lição?" Risos garantidos. "E se a gente construísse um gerador automático de desculpas? Não, não é mágica é JavaScript!"
5-10 min: Exposição Dialógica O que é JavaScript? É a alma da página o que torna um site vivo. Mostrar a diferença entre uma página estática (HTML+CSS) e uma interativa (com JS). Analogia: HTML é o esqueleto, CSS é a roupa, JS é o cérebro.
10-15 min: Estrutura do Código Apresentar os blocos: (1) Array com as desculpas, (2) Função que sorteia e exibe, (3) Botão que chama a função. Mostrar o console.log como "radar" de erros.
15-30 min: Mão na Massa Código Guiado Os alunos digitam junto com o professor todo o código, do <style> ao <script>. O professor explica cada bloco. Ninguém copia e cola a digitação é parte do aprendizado.
30-38 min: Teste e Personalização Salvar e abrir no navegador. Clicar no botão e ver a mágica. Desafio: adicionar pelo menos 3 desculpas novas ao array. Quem termina, personaliza o CSS (cores, fonte, animação).
38-45 min: Desafio do Console O professor desafia: "No console (F12), digitem adicionarDesculpa('Minha nova desculpa') e vejam o que acontece." Isso mostra que o JS é vivo e pode ser modificado em tempo real.
45-50 min: Fechamento + Provocação O que aprendemos? Funções, arrays, sorteios. Para casa: "Pensem em um app que vocês gostariam de construir a gente vai começar a construir projetos reais em breve!" Na próxima semana: DOM o controle remoto da página.

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

"Código que não é acessível é código que não está completo."

Deficiência Visual: Contraste alto, leitores de tela (o innerHTML é lido), áudio opcional.
Deficiência Auditiva: Feedback visual, instruções escritas.
Deficiência Motora: Botão grande (min-height: 44px), navegação por teclado (Tab e Enter).
Transtorno de Atenção: Código colorido, instruções breves.
Altas Habilidades/Superdotação: Desafios extras (contador, adicionar via input, setInterval), pesquisa sobre APIs.

📊 Critérios Operacionais de Avaliação com pontuação

Array de Desculpas (0-2): Criou o array com pelo menos 5 desculpas.
Função Funcional (0-3): A função gerarDesculpa() está implementada e chamada corretamente.
Sorteio Aleatório (0-2): Usou Math.random() e Math.floor().
Manipulação do DOM (0-2): Usou document.getElementById() e .innerHTML.
Contador (0-1): Implementou um contador que mostra quantas desculpas foram geradas.
Bônus: Adição Dinâmica (0-1): Criou uma função ou input para adicionar desculpas novas.

Total: 0-10 pontos (com bônus até 11)

"Vocês acabaram de fazer o computador obedecer a um comando simples: sorteie e mostre. Isso é o começo de tudo. Daqui a algumas semanas, vocês vão construir coisas que nem imaginam. Acreditem." 🔮

🎯 Título

"DOM: O Documento que Vive" ou "Como ter controle remoto sobre cada pedacinho da sua página" 🎮

🎯 Objetivos Operacionais

Compreender o DOM (Document Object Model) como uma árvore que representa a página HTML.
Utilizar métodos de seleção: getElementById(), querySelector(), querySelectorAll().
Modificar atributos, classes e estilos via JavaScript.
Criar e remover elementos dinamicamente com createElement(), appendChild() e removeChild().
Navegar pela árvore DOM usando parentNode, children, nextSibling.
Bônus: você é o jardineiro dessa árvore regue com criatividade e pode com responsabilidade.

📚 Conteúdo Programático

O que é o DOM e como ele representa a página.
A árvore DOM: elementos, atributos, texto tudo é um nó.
Métodos de seleção: getElementById(), querySelector(), querySelectorAll().
Manipulação de classes: classList.add(), classList.remove(), classList.toggle().
Manipulação de estilos inline: element.style.propriedade = valor.
Criação dinâmica: document.createElement(), appendChild().
Remoção: removeChild(), remove() (moderno).
Navegação: parentNode, children, nextElementSibling.

🧩 Pilares do Pensamento Computacional

Algoritmos: Sequência de passos para selecionar, modificar, criar e remover elementos cada ação é um pequeno algoritmo.
Abstração: O DOM abstrai a complexidade do navegador; o programador interage com uma árvore lógica, não com o renderizador.
Decomposição: O problema "manipular a página" é decomposto em: selecionar → modificar → criar → remover.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT302 Construir modelos matemáticos para descrever fenômenos e situações do cotidiano, utilizando funções e equações, com ou sem apoio de tecnologias digitais.
EM13MAT303 Resolver e elaborar problemas que envolvem funções polinomiais de 1º e 2º graus, com ou sem apoio de tecnologias digitais.
EM13MAT101 Interpretar criticamente situações econômicas, sociais e fatos relativos às Ciências da Natureza que envolvam a variação de grandezas, pela análise dos gráficos das funções representadas e das taxas de variação, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias

EM13LP05 Produzir textos de diferentes gêneros, considerando a adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.
EM13LGG303 Utilizar diferentes recursos expressivos e tecnológicos para produzir, editar e difundir textos, imagens e sons em diferentes mídias e plataformas.
EM13LGG401 Analisar criticamente o funcionamento de diferentes tecnologias digitais e suas implicações nas práticas sociais, considerando aspectos éticos e políticos.

BNCC Ciências Humanas e Sociais Aplicadas

EM13CHS201 Analisar e avaliar os impactos das tecnologias na estruturação e nas dinâmicas de grupos, povos e sociedades contemporâneas (fluxos populacionais, financeiros, de mercadorias, de informações, de ideias e de valores), considerando suas diferentes dimensões.

RCP-PR Educação Digital

EM13CO02 Construir soluções computacionais para problemas do cotidiano, de forma autônoma e colaborativa, utilizando linguagens de programação.
EM13CO03 Utilizar diferentes ferramentas e ambientes de programação para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.
EM13CO04 Reconhecer e aplicar os princípios da abstração, decomposição, reconhecimento de padrões e algoritmos na resolução de problemas.

💻 Código Comentado `dom_ao_vivo.html` (aula prática com "Caça ao Elemento")

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🌳 DOM O Controle Remoto</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; margin: 30px; background: #f0f2f5; }
    .container { max-width: 900px; margin: auto; background: white; padding: 35px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
    .card { background: #e9ecef; padding: 20px; margin: 15px 0; border-radius: 14px; border-left: 8px solid #6c5ce7; transition: 0.3s; }
    .card:hover { transform: translateX(5px); }
    .destaque { background: #fdcb6e; border-left-color: #e17055; font-weight: bold; box-shadow: 0 4px 15px rgba(225, 112, 85, 0.3); }
    .oculto { display: none; }
    button { background: #6c5ce7; color: white; border: none; padding: 12px 24px; border-radius: 30px; cursor: pointer; margin: 5px; font-weight: bold; transition: 0.2s; min-height: 44px; min-width: 44px; }
    button:hover { background: #341f97; transform: scale(1.03); }
    button:active { transform: scale(0.95); }
    button.secundario { background: #00b894; }
    button.secundario:hover { background: #00876c; }
    button.perigo { background: #e17055; }
    button.perigo:hover { background: #c0392b; }
    #mensagem { font-size: 20px; padding: 15px 20px; background: #dfe6e9; border-radius: 14px; margin-top: 20px; transition: 0.3s; min-height: 60px; border-left: 6px solid #6c5ce7; }
    .area-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
    .area-criacao { margin-top: 30px; padding: 25px; background: #f8f9fa; border-radius: 18px; border: 2px dashed #b2bec3; }
    .area-criacao h4 { margin-top: 0; color: #2d3436; }
    #container-novos { min-height: 50px; margin: 10px 0; }
    .paragrafo-dinamico { background: #dfe6e9; padding: 12px 18px; border-radius: 10px; border-left: 4px solid #6c5ce7; margin: 8px 0; animation: fadeIn 0.4s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    code { background: #2d3436; color: #fdcb6e; padding: 2px 8px; border-radius: 6px; font-size: 0.9rem; }
    .badge { display: inline-block; background: #6c5ce7; color: white; padding: 2px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
  </style>
</head>
<body>
  <div class="container">
    <h1 id="titulo-principal">🌳 DOM ao Vivo</h1>
    <p id="descricao">Abaixo, elementos que você vai <strong>controlar</strong> com JS. <span class="badge">Caça ao Elemento</span></p>
    <div class="card" id="card1"><h3>📦 Card 1 Eu sou um card</h3><p>Meu ID é <code>card1</code>. Me selecione!</p></div>
    <div class="card" id="card2"><h3>📦 Card 2 Outro card</h3><p>Eu tenho a classe <code>.card</code>.</p></div>
    <div class="card" id="card3"><h3>📦 Card 3 O último</h3><p>Vou ser usado para testes.</p></div>
    <div class="area-criacao">
      <h4>⚡ Zona de Criação <small>aqui você é o criador</small></h4>
      <div id="container-novos"></div>
      <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        <button class="secundario" onclick="adicionarParagrafo()">➕ Adicionar parágrafo</button>
        <button class="perigo" onclick="removerUltimo()">❌ Remover último</button>
        <button onclick="limparNovos()">🧹 Limpar todos</button>
      </div>
    </div>
    <div class="area-botoes">
      <button onclick="mudarCorCards()">🎨 Mudar cor dos cards</button>
      <button onclick="toggleClasseDestaque()">⭐ Alternar destaque no Card 1</button>
      <button class="perigo" onclick="esconderCard2()">👻 Esconder Card 2</button>
      <button onclick="mostrarCard2()">👀 Mostrar Card 2</button>
      <button onclick="alterarTextoDescricao()">✏️ Mudar descrição</button>
      <button onclick="clonarCard3()">📋 Clonar Card 3</button>
      <button onclick="contarCards()">🔢 Contar cards</button>
    </div>
    <div id="mensagem">👉 Clique nos botões e veja a mágica!</div>
  </div>
  <script>
    // ================================================================
    // 1. VARIÁVEIS E REFERÊNCIAS A ELEMENTOS
    // ================================================================
    var titulo = document.getElementById('titulo-principal');
    var descricao = document.getElementById('descricao');
    var mensagem = document.getElementById('mensagem');
    var containerNovos = document.getElementById('container-novos');
    var card1 = document.getElementById('card1');
    var card2 = document.getElementById('card2');
    var todosOsCards = document.querySelectorAll('.card');
    console.log('✅ Total de cards:', todosOsCards.length);

    // ================================================================
    // 2. FUNÇÕES DE MANIPULAÇÃO
    // ================================================================
    function mudarCorCards() {
      var cores = ['#fd79a8', '#81ecec', '#ffeaa7', '#a29bfe', '#55efc4'];
      todosOsCards.forEach(function(card, index) {
        card.style.backgroundColor = cores[index % cores.length];
        card.style.transition = '0.5s ease';
        card.style.transform = 'scale(1.02)';
        setTimeout(function() { card.style.transform = 'scale(1)'; }, 300);
      });
      mensagem.innerHTML = '🎨 Cores dos cards alteradas com sucesso!';
      mensagem.style.background = '#ffeaa7';
      mensagem.style.borderLeftColor = '#fdcb6e';
    }

    function toggleClasseDestaque() {
      card1.classList.toggle('destaque');
      mensagem.innerHTML = card1.classList.contains('destaque') ? '⭐ Destaque ATIVADO no Card 1!' : '⭐ Destaque REMOVIDO do Card 1.';
      mensagem.style.background = card1.classList.contains('destaque') ? '#a29bfe' : '#dfe6e9';
      mensagem.style.borderLeftColor = '#6c5ce7';
    }

    function esconderCard2() {
      card2.classList.add('oculto');
      mensagem.innerHTML = '👻 Card 2 escondido!';
    }
    function mostrarCard2() {
      card2.classList.remove('oculto');
      mensagem.innerHTML = '👀 Card 2 está de volta!';
    }

    function alterarTextoDescricao() {
      descricao.innerHTML = '🔥 O DOM está sendo manipulado por um mestre! 🔥';
      titulo.textContent = '🌳 DOM Eu sou o controlador!';
      mensagem.innerHTML = '✏️ Descrição e título foram alterados!';
      mensagem.style.background = '#a29bfe';
      mensagem.style.borderLeftColor = '#6c5ce7';
    }

    function clonarCard3() {
      var card3 = document.getElementById('card3');
      var clone = card3.cloneNode(true);
      clone.id = 'card3-clone-' + Date.now();
      var tituloClone = clone.querySelector('h3');
      tituloClone.textContent = '📋 Clone do Card 3';
      var paragrafoClone = clone.querySelector('p');
      paragrafoClone.innerHTML = 'Eu sou um clone criado dinamicamente! cloneNode()';
      card3.parentNode.insertBefore(clone, card3.nextSibling);
      mensagem.innerHTML = '📋 Card 3 clonado com sucesso!';
      mensagem.style.background = '#81ecec';
      mensagem.style.borderLeftColor = '#00b894';
    }

    function contarCards() {
      var cards = document.querySelectorAll('.card');
      var total = cards.length;
      var ocultos = 0;
      cards.forEach(function(card) { if (card.classList.contains('oculto')) ocultos++; });
      mensagem.innerHTML = `🔢 Total de cards: ${total} | Ocultos: ${ocultos} | Visíveis: ${total - ocultos}`;
      mensagem.style.background = '#dfe6e9';
      mensagem.style.borderLeftColor = '#6c5ce7';
    }

    // ================================================================
    // 3. CRIAÇÃO E REMOÇÃO DINÂMICA
    // ================================================================
    var contadorParagrafos = 0;
    function adicionarParagrafo() {
      contadorParagrafos++;
      var novoP = document.createElement('p');
      novoP.className = 'paragrafo-dinamico';
      var horario = new Date().toLocaleTimeString();
      novoP.innerHTML = `📝 Parágrafo ${contadorParagrafos} criado às ${horario}`;
      var coresBg = ['#dfe6e9', '#ffeaa7', '#81ecec', '#fd79a8', '#a29bfe'];
      novoP.style.background = coresBg[contadorParagrafos % coresBg.length];
      containerNovos.appendChild(novoP);
      mensagem.innerHTML = `➕ Parágrafo ${contadorParagrafos} adicionado!`;
      mensagem.style.background = '#55efc4';
      mensagem.style.borderLeftColor = '#00b894';
    }

    function removerUltimo() {
      if (containerNovos.children.length > 0) {
        var removido = containerNovos.lastElementChild;
        containerNovos.removeChild(removido);
        var restam = containerNovos.children.length;
        mensagem.innerHTML = `❌ Último parágrafo removido! Restam ${restam}.`;
        mensagem.style.background = '#fab1a0';
        mensagem.style.borderLeftColor = '#e17055';
      } else {
        mensagem.innerHTML = '⚠️ Não há nada para remover!';
        mensagem.style.background = '#ffeaa7';
        mensagem.style.borderLeftColor = '#fdcb6e';
      }
    }

    function limparNovos() {
      if (containerNovos.children.length === 0) {
        mensagem.innerHTML = '⚠️ Já está vazio!';
        mensagem.style.background = '#ffeaa7';
        return;
      }
      if (confirm('🧹 Tem certeza que quer limpar TODOS os parágrafos?')) {
        containerNovos.innerHTML = '';
        contadorParagrafos = 0;
        mensagem.innerHTML = '🧹 Todos os parágrafos removidos!';
        mensagem.style.background = '#dfe6e9';
        mensagem.style.borderLeftColor = '#6c5ce7';
      }
    }

    // ================================================================
    // 4. EVENTOS DE TECLADO (atalhos)
    // ================================================================
    document.addEventListener('keydown', function(event) {
      if (event.target.tagName === 'INPUT') return;
      if (event.key === 'c' || event.key === 'C') { contarCards(); event.preventDefault(); }
      if (event.key === 'd' || event.key === 'D') { adicionarParagrafo(); event.preventDefault(); }
      if (event.key === 'r' || event.key === 'R') { removerUltimo(); event.preventDefault(); }
    });

    // ================================================================
    // 5. MENSAGEM DE BOAS-VINDAS NO CONSOLE
    // ================================================================
    console.log('🌳 DOM CARREGADO!');
    console.log('📌 Atalhos: [C] Contar cards [D] Adicionar parágrafo [R] Remover último');
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho Explosivo "Vocês já imaginaram ter um controle remoto da página? Poder mudar cor, esconder coisas, criar do nada?" Apresenta o DOM como esse controle. Analogia: o DOM é a árvore genealógica da página cada elemento é um parente.
5-10 min: Exposição Dialógica O que é o DOM? É a representação da página em forma de árvore. Mostrar a árvore DOM no DevTools (Elements). Demonstração: no console, digitar document.querySelector('h1').style.color = 'red' e ver a mágica instantânea.
10-15 min: Estrutura do Código Apresentar os métodos: getElementById, querySelector, querySelectorAll. Mostrar a diferença entre selecionar um e selecionar todos. Introduzir classList.
15-30 min: Mão na Massa Código Guiado Os alunos digitam junto com o professor o código. O professor explica cada função enquanto escreve. Ênfase: não copiar e colar a digitação fixa o aprendizado.
30-38 min: Caça ao Elemento Desafio "Agora, no console, cada um vai caçar um elemento e modificá-lo." Desafios: (1) Esconder o Card 3 via console. (2) Mudar a cor do título. (3) Criar um novo parágrafo.
38-45 min: Batalha de Modificações Em duplas, competição: quem consegue mais modificações no DOM em 5 minutos? Exemplos: mudar cores, criar elementos, adicionar classes.
45-50 min: Fechamento + Reflexão O que aprendemos? O DOM é uma árvore, e podemos podá-la, regá-la e cultivá-la. Para casa: "No site da escola, abra o console e modifique algo depois mostre para a turma na próxima aula. Mas CUIDADO: só no seu navegador, não no site real!"

♿ Orientações para Adaptações e Inclusão

Deficiência Visual: Fonte em rem, contraste, aria-live para mensagens.
Deficiência Auditiva: Feedback visual (cores, animações) já implementado.
Deficiência Motora: Navegação por teclado, min-height: 44px, atalhos C, D, R.
Transtorno de Atenção: Etapas curtas, feedback imediato.
Altas Habilidades/Superdotação: Desafios extras (embaralhar cards, modo noturno, setInterval), pesquisa sobre Virtual DOM.

📊 Critérios Operacionais de Avaliação com pontuação

Seleção de Elementos (0-2): Usou pelo menos 2 métodos diferentes de seleção.
Manipulação de Estilos (0-2): Modificou estilos inline ou classes com classList.
Criação Dinâmica (0-2): Criou pelo menos 1 elemento com createElement e appendChild.
Remoção de Elementos (0-1): Removeu elementos com removeChild ou remove().
Navegação no DOM (0-1): Usou parentNode, children ou nextSibling.
Feedback ao Usuário (0-1): O código fornece feedback visual (mensagem, cores).
Bônus: Atalhos de Teclado (0-1): Implementou ou identificou atalhos.
Bônus: Criatividade (0-1): Fez algo além do esperado (animações, clones, etc.).

Total: 0-10 pontos (com bônus até 12)

"Vocês não estão mais apenas olhando para a página vocês estão controlando ela. Cada elemento é um súdito, cada classe é uma ordem. Esse é o poder do DOM. Usem-no com sabedoria." 🌳

🎯 Título

"Eventos: Quando o Usuário Toca na Tela" ou "Como fazer seu site reagir a tudo cliques, teclas, respirações e até mesmo olhares" 👆

🎯 Objetivos Operacionais

Compreender o que são eventos e por que eles são a ponte entre o usuário e a máquina.
Utilizar addEventListener() a forma moderna, flexível e recomendada de escutar eventos.
Dominar eventos essenciais: click, keydown, keyup, mouseover, mouseout, mouseenter, mouseleave.
Construir um Jogo da Memória completo com cartas, lógica de pares, contador de tentativas e feedback visual.
Entender a diferença entre eventos inline (onclick) e a abordagem por ouvinte (addEventListener).
Bônus: eventos são a alma da interatividade trate-os com respeito, porque eles tratam seus usuários com carinho (ou não, se você programar mal).

📚 Conteúdo Programático

O que são eventos no navegador: interações do usuário que disparam ações.
Tipos de eventos: mouse, teclado, formulário, janela.
A função addEventListener(evento, callback) o padrão moderno.
O objeto event contém informações sobre o evento.
Remoção de eventos com removeEventListener (boa prática).
Propagação de eventos: bubbling e capturing (conceitos básicos).
Prevenção de comportamento padrão: event.preventDefault().

🧩 Pilares do Pensamento Computacional

Decomposição: O jogo da memória é decomposto em partes: (1) embaralhar cartas, (2) virar carta, (3) verificar par, (4) desvirar se errado, (5) verificar vitória.
Algoritmos: Cada interação do usuário segue uma sequência lógica: clicar → virar → verificar → reagir. O addEventListener orquestra essa sequência.
Reconhecimento de Padrões: O padrão "evento → resposta" se repete para cada interação: clique vira carta, tecla reinicia jogo, mouseover destaca.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT201 Interpretar dados estatísticos apresentados em diferentes mídias e suportes, avaliando a confiabilidade das informações e as implicações éticas do uso de dados.
EM13MAT301 Resolver e elaborar problemas do cotidiano, da Matemática e de outras áreas do conhecimento, que envolvem equações lineares, inequações e sistemas, com ou sem apoio de tecnologias digitais.
EM13MAT303 Resolver e elaborar problemas que envolvem funções polinomiais de 1º e 2º graus, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias

EM13LP04 Analisar os efeitos de sentido decorrentes do uso de recursos linguísticos e multissemióticos em diferentes textos, considerando a função social e os efeitos de sentido pretendidos.
EM13LP05 Produzir textos de diferentes gêneros, considerando a adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.
EM13LGG303 Utilizar diferentes recursos expressivos e tecnológicos para produzir, editar e difundir textos, imagens e sons em diferentes mídias e plataformas.
EM13LGG401 Analisar criticamente o funcionamento de diferentes tecnologias digitais e suas implicações nas práticas sociais, considerando aspectos éticos e políticos.

BNCC Ciências Humanas e Sociais Aplicadas

EM13CHS201 Analisar e avaliar os impactos das tecnologias na estruturação e nas dinâmicas de grupos, povos e sociedades contemporâneas (fluxos populacionais, financeiros, de mercadorias, de informações, de ideias e de valores), considerando suas diferentes dimensões.

RCP-PR Educação Digital

EM13CO02 Construir soluções computacionais para problemas do cotidiano, de forma autônoma e colaborativa, utilizando linguagens de programação.
EM13CO03 Utilizar diferentes ferramentas e ambientes de programação para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.
EM13CO04 Reconhecer e aplicar os princípios da abstração, decomposição, reconhecimento de padrões e algoritmos na resolução de problemas.
EM13CO06 Compreender e utilizar os conceitos de variáveis, constantes, operadores, estruturas condicionais e de repetição, funções e eventos na construção de soluções computacionais.

💻 Código Comentado `jogo_memoria_caos.html` (o jogo da memória com emojis)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🤯 Jogo da Memória do Caos</title>
  <style>
    /* estilos completos no arquivo .css do projeto aqui está resumido para legibilidade */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: linear-gradient(145deg, #0a0a1a, #1a1a2e); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
    .game-container { background: #16213e; padding: 30px 35px 40px; border-radius: 40px; box-shadow: 0 25px 70px rgba(0,0,0,0.9); text-align: center; max-width: 750px; width: 100%; border: 2px solid #e94560; }
    h1 { color: #f1f2f6; font-size: 2.5rem; text-shadow: 0 0 30px #e94560; }
    .tabuleiro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 25px 0 20px; }
    .carta { aspect-ratio: 1/1; background: #e94560; border-radius: 18px; display: flex; justify-content: center; align-items: center; font-size: 2.8rem; cursor: pointer; transition: 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 8px 0 #b71c3a; user-select: none; border: 2px solid rgba(255,255,255,0.08); }
    .carta.virada { background: #f1f2f6; box-shadow: 0 4px 0 #b2bec3; cursor: default; transform: scale(0.96); }
    .carta.correspondente { background: #55efc4; box-shadow: 0 4px 0 #00b894; cursor: default; transform: scale(0.96); border: 2px solid #00b894; animation: pulsePar 1s ease infinite; }
    @keyframes pulsePar { 0%,100% { box-shadow: 0 4px 0 #00b894, 0 0 20px rgba(85,239,196,0.3); } 50% { box-shadow: 0 4px 0 #00b894, 0 0 40px rgba(85,239,196,0.6); } }
    .info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: white; font-size: 1.1rem; margin-top: 20px; padding: 12px 20px; background: rgba(0,0,0,0.3); border-radius: 50px; }
    button { background: #00cec9; border: none; padding: 12px 32px; border-radius: 50px; font-size: 1.1rem; font-weight: 700; color: #1a1a2e; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 0 #00838f; min-height: 48px; }
    button:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #00838f; }
    button:active { transform: translateY(4px); box-shadow: 0 2px 0 #00838f; }
    #mensagem { color: #dfe6e9; margin-top: 15px; font-size: 1.1rem; min-height: 35px; padding: 8px 16px; border-radius: 12px; background: rgba(0,0,0,0.25); border-left: 4px solid #e94560; }
    #mensagem.vitoria { border-left-color: #55efc4; background: rgba(85,239,196,0.15); color: #55efc4; }
    @media (max-width: 550px) { .game-container { padding: 20px; } h1 { font-size: 1.8rem; } .carta { font-size: 2rem; } .tabuleiro { gap: 10px; } .info { flex-direction: column; align-items: stretch; } button { width: 100%; } }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>🤯 Memória do Caos <small>--- vire as cartas e encontre os pares</small></h1>
    <div class="tabuleiro" id="tabuleiro"></div>
    <div class="info">
      <span>🔢 Tentativas: <span id="contador">0</span></span>
      <span>✅ Pares: <span id="pares-encontrados">0</span>/6</span>
      <button id="btn-reiniciar">🔄 Reiniciar</button>
      <button id="btn-dicas" class="secundario">💡 Dica</button>
    </div>
    <div id="mensagem">👉 Vire duas cartas iguais!</div>
  </div>
  <script>
    // ================================================================
    // 1. CONFIGURAÇÃO INICIAL
    // ================================================================
    const EMOJIS = ['🍕', '🚀', '🌈', '🎸', '👾', '🍩'];
    var cartas = [];
    var cartasViradas = [];
    var bloqueado = false;
    var tentativas = 0;
    var paresEncontrados = 0;
    var totalPares = EMOJIS.length;
    var tabuleiro = document.getElementById('tabuleiro');
    var contadorElement = document.getElementById('contador');
    var paresElement = document.getElementById('pares-encontrados');
    var mensagemElement = document.getElementById('mensagem');
    var btnReiniciar = document.getElementById('btn-reiniciar');
    var btnDicas = document.getElementById('btn-dicas');

    function embaralhar(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }
    function atualizarInfo() {
      contadorElement.textContent = tentativas;
      paresElement.textContent = paresEncontrados;
    }

    function iniciarJogo() {
      var baralho = [];
      EMOJIS.forEach(function(emoji) {
        baralho.push({ emoji: emoji, virada: false, correspondente: false });
        baralho.push({ emoji: emoji, virada: false, correspondente: false });
      });
      cartas = embaralhar(baralho);
      cartasViradas = [];
      bloqueado = false;
      tentativas = 0;
      paresEncontrados = 0;
      mensagemElement.textContent = '👉 Vire duas cartas iguais!';
      mensagemElement.className = '';
      atualizarInfo();
      renderizarTabuleiro();
    }

    function renderizarTabuleiro() {
      tabuleiro.innerHTML = '';
      cartas.forEach(function(carta, indice) {
        var div = document.createElement('div');
        div.className = 'carta';
        div.dataset.indice = indice;
        if (carta.virada || carta.correspondente) {
          div.textContent = carta.emoji;
          if (carta.correspondente) div.classList.add('correspondente');
          else div.classList.add('virada');
        } else {
          div.textContent = '❓';
        }
        div.addEventListener('click', function() { virarCarta(indice); });
        tabuleiro.appendChild(div);
      });
      atualizarInfo();
    }

    function atualizarCartaNoDOM(indice) {
      var divs = tabuleiro.children;
      for (var i = 0; i < divs.length; i++) {
        if (parseInt(divs[i].dataset.indice) === indice) {
          var div = divs[i];
          var carta = cartas[indice];
          div.className = 'carta';
          if (carta.correspondente) {
            div.textContent = carta.emoji;
            div.classList.add('correspondente');
          } else if (carta.virada) {
            div.textContent = carta.emoji;
            div.classList.add('virada');
          } else {
            div.textContent = '❓';
          }
          break;
        }
      }
    }

    function virarCarta(indice) {
      if (bloqueado) return;
      var carta = cartas[indice];
      if (carta.virada || carta.correspondente) return;
      carta.virada = true;
      cartasViradas.push(indice);
      atualizarCartaNoDOM(indice);
      if (cartasViradas.length === 2) {
        tentativas++;
        atualizarInfo();
        bloqueado = true;
        var idx1 = cartasViradas[0];
        var idx2 = cartasViradas[1];
        var carta1 = cartas[idx1];
        var carta2 = cartas[idx2];
        if (carta1.emoji === carta2.emoji) {
          carta1.correspondente = true;
          carta2.correspondente = true;
          carta1.virada = false;
          carta2.virada = false;
          atualizarCartaNoDOM(idx1);
          atualizarCartaNoDOM(idx2);
          paresEncontrados++;
          atualizarInfo();
          mensagemElement.textContent = '🎉 Par encontrado! Continue!';
          mensagemElement.className = '';
          cartasViradas = [];
          bloqueado = false;
          if (paresEncontrados === totalPares) {
            mensagemElement.textContent = '🏆 VOCÊ VENCEU! Parabéns, mestre da memória! 🎉🎉';
            mensagemElement.className = 'vitoria';
            console.log('🏆 VITÓRIA!');
          }
        } else {
          mensagemElement.textContent = '❌ Não são iguais! Tente novamente.';
          mensagemElement.className = '';
          setTimeout(function() {
            carta1.virada = false;
            carta2.virada = false;
            atualizarCartaNoDOM(idx1);
            atualizarCartaNoDOM(idx2);
            cartasViradas = [];
            bloqueado = false;
            if (paresEncontrados < totalPares) mensagemElement.textContent = '👉 Vire duas cartas iguais!';
          }, 800);
        }
      } else {
        mensagemElement.textContent = '👉 Vire a segunda carta!';
      }
    }

    // ================================================================
    // 2. EVENTOS DOS BOTÕES
    // ================================================================
    btnReiniciar.addEventListener('click', function() {
      iniciarJogo();
      mensagemElement.textContent = '🔄 Jogo reiniciado! Boa sorte!';
      mensagemElement.className = '';
    });
    btnDicas.addEventListener('click', function() {
      if (bloqueado) return;
      if (paresEncontrados === totalPares) {
        mensagemElement.textContent = '🏆 Você já venceu! Reinicie para jogar de novo.';
        return;
      }
      var disponiveis = [];
      cartas.forEach(function(carta, idx) {
        if (!carta.virada && !carta.correspondente) disponiveis.push(idx);
      });
      if (disponiveis.length === 0) return;
      var aleatorio = disponiveis[Math.floor(Math.random() * disponiveis.length)];
      var carta = cartas[aleatorio];
      carta.virada = true;
      atualizarCartaNoDOM(aleatorio);
      mensagemElement.textContent = '💡 Dica: olhe bem!';
      setTimeout(function() {
        if (!carta.correspondente) {
          carta.virada = false;
          atualizarCartaNoDOM(aleatorio);
          mensagemElement.textContent = '👀 Dica revelada! Volte ao jogo.';
        }
      }, 1000);
    });

    // ================================================================
    // 3. EVENTO DE TECLADO Reiniciar com 'R'
    // ================================================================
    document.addEventListener('keydown', function(event) {
      if (event.target.tagName === 'INPUT') return;
      if (event.key === 'r' || event.key === 'R') {
        iniciarJogo();
        mensagemElement.textContent = '⌨️ Tecla R pressionada jogo reiniciado!';
        mensagemElement.className = '';
        event.preventDefault();
      }
      if (event.key === 'd' || event.key === 'D') {
        btnDicas.click();
        event.preventDefault();
      }
    });

    // ================================================================
    // 4. INICIAR JOGO
    // ================================================================
    iniciarJogo();
    console.log('🤯 JOGO DA MEMÓRIA CARREGADO!');
    console.log('📌 Atalhos: [R] Reiniciar [D] Dica');
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho Explosivo "O que faz um site ser vivo? Não é o design bonito é a reação. Cada clique, cada tecla, cada movimento do mouse é um evento. E vocês vão aprender a dominar todos eles." Demonstração: um clique no título muda sua cor.
5-10 min: Exposição Dialógica O que são eventos? Sinais que o navegador dispara. Diferença entre onclick (inline) e addEventListener (moderno).
10-15 min: Estrutura do Jogo Lógica do jogo da memória: baralho, embaralhamento, virar cartas, verificar pares.
15-30 min: Mão na Massa Código Guiado Alunos digitam o código, com ênfase em div.addEventListener('click', function() { ... }); e closure.
30-38 min: Teste e Personalização Jogar, mudar emojis, cores, número de pares.
38-45 min: Caça aos Eventos No console, adicionar mouseover e removeEventListener.
45-50 min: Fechamento Reflexão sobre eventos como ponte entre usuário e código.

♿ Orientações para Adaptações e Inclusão

Deficiência Visual: Emojis grandes, aria-live na mensagem.
Deficiência Motora: Navegação por teclado (Tab), atalhos R e D.
Altas habilidades: Adicionar cronômetro, sistema de pontuação, níveis de dificuldade.

📊 Critérios Operacionais de Avaliação com pontuação

Uso de addEventListener (0-3): Utilizou para pelo menos 3 eventos diferentes.
Lógica do Jogo (0-3): Funciona corretamente: virar, verificar, desvirar, contar tentativas, detectar vitória.
Eventos de Teclado (0-1): Implementou pelo menos 1 atalho.
Feedback ao Usuário (0-1): Visual claro (mensagens, cores, animações).
Personalização (0-1): Modificou emojis, cores, número de pares.
Bônus: Eventos Avançados (0-1): Usou mouseenter, resize, etc.
Bônus: Som ou Animações (0-1): Adicionou som ou animações CSS.

Total: 0-10 pontos (com bônus até 12)

"Cada clique, cada tecla, cada movimento do mouse vocês agora sabem ouvir o usuário. E quando vocês ouvem, vocês podem responder. Isso é interatividade. Isso é poder." 🎮

🎯 Título

"Dados e Arrays: A Biblioteca do Caos" ou "Como organizar a bagunça da sua cabeça em listas que o computador entende" 📚

🎯 Objetivos Operacionais

Compreender o conceito de arrays (listas) como estruturas para armazenar e organizar dados.
Utilizar métodos fundamentais de manipulação de arrays: push(), pop(), unshift(), shift(), splice(), indexOf(), includes().
Percorrer arrays com laços de repetição: for, for...of, forEach().
Construir uma Lista de Tarefas (To‑Do List) completa com adição, remoção (primeira, última ou específica), marcação de concluídas e contador.
Bônus: entender que arrays são como caixas de ferramentas mantenha a sua organizada e saberá exatamente onde cada ferramenta está.

📚 Conteúdo Programático

O que são arrays: listas ordenadas de valores.
Criação de arrays: [] e new Array().
Acesso por índice, propriedade .length.
Métodos essenciais: push, pop, unshift, shift, splice, indexOf, includes.
Laços de repetição: for, for...of, forEach.
Manipulação do DOM para refletir mudanças no array.
Persistência (bônus): localStorage.

🧩 Pilares do Pensamento Computacional

Abstração: O array abstrai a complexidade de gerenciar múltiplos dados.
Reconhecimento de Padrões: Padrão de manipulação de listas (adicionar, remover, percorrer).
Algoritmos: Cada operação na lista é um pequeno algoritmo.
Decomposição: Gerenciar tarefas = adicionar, remover, listar, marcar, filtrar.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT303 Resolver e elaborar problemas que envolvem funções polinomiais de 1º e 2º graus.
EM13MAT304 Analisar e construir modelos matemáticos para descrever fenômenos e situações do cotidiano.
EM13MAT401 Aplicar conceitos matemáticos na compreensão e resolução de problemas de outras áreas.

BNCC Linguagens e suas Tecnologias

EM13LP07 Analisar, em diferentes textos, os efeitos de sentido decorrentes do uso de recursos linguísticos e multissemióticos.
EM13LP08 Produzir textos de diferentes gêneros, com adequação ao contexto.
EM13LGG401 Analisar criticamente o funcionamento de diferentes tecnologias digitais.

BNCC Ciências da Natureza e suas Tecnologias

EM13CNT201 Analisar e avaliar os processos tecnológicos e suas implicações na sociedade.

RCP-PR Educação Digital

EM13CO01 Explorar e construir a solução de problemas por meio da reutilização de partes de soluções existentes.
EM13CO02 Construir soluções computacionais para problemas do cotidiano.
EM13CO03 Utilizar diferentes ferramentas e ambientes de programação.
EM13CO04 Reconhecer e aplicar os princípios da abstração, decomposição, reconhecimento de padrões e algoritmos.
EM13CO05 Utilizar, de forma crítica e criativa, diferentes recursos computacionais.
EM13CO06 Compreender e utilizar os conceitos de variáveis, constantes, operadores, estruturas condicionais e de repetição, funções e eventos.

💻 Código Comentado `lista_tarefas_caos.html` (to‑do list com atitude)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>📋 Lista de Tarefas do Caos</title>
  <style>
    /* estilos completos no arquivo .css do projeto */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Courier New', monospace; background: #0a3d62; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
    .container { background: #f5f6fa; padding: 30px 35px 40px; border-radius: 35px; max-width: 700px; width: 100%; box-shadow: 0 25px 70px rgba(0,0,0,0.7); }
    h1 { text-align: center; color: #0a3d62; font-size: 2.4rem; border-bottom: 4px dashed #00a8ff; padding-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 12px; }
    .input-area { display: flex; gap: 12px; margin: 20px 0 25px; }
    #novaTarefa { flex: 1; padding: 15px 20px; border: 3px solid #00a8ff; border-radius: 50px; font-size: 1.1rem; font-family: inherit; outline: none; background: white; }
    #novaTarefa:focus { border-color: #e84118; box-shadow: 0 0 25px rgba(232,65,24,0.25); }
    .btn { padding: 15px 25px; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; transition: 0.25s cubic-bezier(0.34,1.56,0.64,1); font-size: 1.1rem; min-height: 48px; font-family: inherit; }
    .btn-adicionar { background: #00a8ff; color: white; box-shadow: 0 6px 0 #0097e6; }
    .btn-remover { background: #e84118; color: white; box-shadow: 0 6px 0 #c23616; }
    .btn-limpar { background: #2d3436; color: white; box-shadow: 0 6px 0 #1e272e; }
    .btn-primeiro { background: #fbc531; color: #2d3436; box-shadow: 0 6px 0 #e1b12c; }
    .btn-ultimo { background: #4cd137; color: white; box-shadow: 0 6px 0 #44bd32; }
    #listaContainer { background: white; border-radius: 25px; padding: 15px 10px; min-height: 220px; margin: 15px 0 20px; box-shadow: inset 0 0 15px rgba(0,0,0,0.06); max-height: 400px; overflow-y: auto; }
    .tarefa-item { background: #dfe6e9; padding: 14px 20px; margin: 8px 5px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; border-left: 6px solid #00a8ff; transition: 0.25s ease; font-size: 1.05rem; animation: slideIn 0.3s ease; }
    @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
    .tarefa-item .texto { flex: 1; cursor: pointer; padding: 4px 0; }
    .tarefa-item .texto.concluida { text-decoration: line-through; color: #636e72; }
    .tarefa-item .acoes { display: flex; gap: 8px; align-items: center; }
    .tarefa-item button { background: #e84118; color: white; border: none; border-radius: 30px; padding: 6px 16px; cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 0.9rem; min-height: 36px; }
    .tarefa-item button.concluir { background: #00b894; }
    .tarefa-item button.editar { background: #fdcb6e; color: #2d3436; }
    .btn-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
    .btn-group .btn { flex: 1; min-width: 80px; text-align: center; }
    .info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: #2d3436; color: white; padding: 14px 22px; border-radius: 50px; margin-top: 18px; font-size: 0.95rem; }
    .info-item { display: flex; align-items: center; gap: 8px; }
    #contadorTarefas, #contadorConcluidas { background: #00a8ff; padding: 2px 14px; border-radius: 30px; font-weight: bold; color: white; }
    #contadorConcluidas { background: #55efc4; color: #2d3436; }
    @media (max-width: 550px) { .container { padding: 20px; } h1 { font-size: 1.8rem; } .input-area { flex-direction: column; } .btn-group .btn { flex: 1 1 45%; } .info { flex-direction: column; align-items: stretch; } .tarefa-item { flex-wrap: wrap; gap: 10px; } .tarefa-item .acoes { width: 100%; justify-content: flex-end; } }
  </style>
</head>
<body>
  <div class="container">
    <h1>📋 Lista do Caos <small>--- organize sua bagunça</small></h1>
    <div class="input-area">
      <input type="text" id="novaTarefa" placeholder="Digite sua tarefa..." autofocus>
      <button class="btn btn-adicionar" id="btnAdicionar">➕</button>
    </div>
    <div id="listaContainer">
      <div class="vazia"><span class="emoji">✨</span>Nenhuma tarefa. Aproveite o caos!</div>
    </div>
    <div class="btn-group">
      <button class="btn btn-remover" id="btnRemoverUltimo">🗑️ Último</button>
      <button class="btn btn-primeiro" id="btnRemoverPrimeiro">⏪ Primeiro</button>
      <button class="btn btn-limpar" id="btnLimparTudo">🧹 Limpar tudo</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-adicionar" id="btnAdicionarInicio">⬅️ Início</button>
      <button class="btn btn-ultimo" id="btnAdicionarFim">➡️ Fim</button>
      <button class="btn btn-primeiro" id="btnOrdenar">🔢 Ordenar A-Z</button>
    </div>
    <div class="info">
      <span class="info-item">📦 Total: <span id="contadorTarefas">0</span></span>
      <span class="info-item">✅ Concluídas: <span id="contadorConcluidas">0</span></span>
      <span class="info-item" id="primeiraUltima">🔹 Primeira: - | Última: -</span>
    </div>
  </div>
  <script>
    // ================================================================
    // 1. O ARRAY DE TAREFAS
    // ================================================================
    var tarefas = [];
    var proximoId = 1;

    // ================================================================
    // 2. REFERÊNCIAS DOM
    // ================================================================
    var container = document.getElementById('listaContainer');
    var input = document.getElementById('novaTarefa');
    var btnAdicionar = document.getElementById('btnAdicionar');
    var btnAdicionarInicio = document.getElementById('btnAdicionarInicio');
    var btnAdicionarFim = document.getElementById('btnAdicionarFim');
    var btnRemoverUltimo = document.getElementById('btnRemoverUltimo');
    var btnRemoverPrimeiro = document.getElementById('btnRemoverPrimeiro');
    var btnLimparTudo = document.getElementById('btnLimparTudo');
    var btnOrdenar = document.getElementById('btnOrdenar');
    var contadorSpan = document.getElementById('contadorTarefas');
    var contadorConcluidas = document.getElementById('contadorConcluidas');
    var primeiraUltimaSpan = document.getElementById('primeiraUltima');

    // ================================================================
    // 3. RENDERIZAR
    // ================================================================
    function renderizarTarefas() {
      container.innerHTML = '';
      if (tarefas.length === 0) {
        container.innerHTML = `<div class="vazia"><span class="emoji">✨</span>Nenhuma tarefa. Aproveite o caos!</div>`;
      } else {
        tarefas.forEach(function(tarefa) {
          var div = document.createElement('div');
          div.className = 'tarefa-item';
          div.dataset.id = tarefa.id;
          var textoSpan = document.createElement('span');
          textoSpan.className = 'texto';
          if (tarefa.concluida) textoSpan.classList.add('concluida');
          textoSpan.textContent = tarefa.texto;
          textoSpan.addEventListener('click', function() {
            tarefa.concluida = !tarefa.concluida;
            renderizarTarefas();
          });
          var acoesDiv = document.createElement('div');
          acoesDiv.className = 'acoes';
          var btnEditar = document.createElement('button');
          btnEditar.className = 'editar';
          btnEditar.textContent = '✏️';
          btnEditar.title = 'Editar tarefa';
          btnEditar.addEventListener('click', function(e) {
            e.stopPropagation();
            var novoTexto = prompt('Editar tarefa:', tarefa.texto);
            if (novoTexto !== null && novoTexto.trim() !== '') {
              tarefa.texto = novoTexto.trim();
              renderizarTarefas();
            }
          });
          var btnConcluir = document.createElement('button');
          btnConcluir.className = 'concluir';
          btnConcluir.textContent = tarefa.concluida ? '↩️' : '✅';
          btnConcluir.title = tarefa.concluida ? 'Desmarcar' : 'Concluir';
          btnConcluir.addEventListener('click', function(e) {
            e.stopPropagation();
            tarefa.concluida = !tarefa.concluida;
            renderizarTarefas();
          });
          var btnRemover = document.createElement('button');
          btnRemover.textContent = '✖';
          btnRemover.title = 'Remover tarefa';
          btnRemover.addEventListener('click', function(e) {
            e.stopPropagation();
            var index = tarefas.findIndex(function(t) { return t.id === tarefa.id; });
            if (index !== -1) {
              tarefas.splice(index, 1);
              renderizarTarefas();
              atualizarInfo();
            }
          });
          acoesDiv.appendChild(btnEditar);
          acoesDiv.appendChild(btnConcluir);
          acoesDiv.appendChild(btnRemover);
          div.appendChild(textoSpan);
          div.appendChild(acoesDiv);
          container.appendChild(div);
        });
      }
      atualizarInfo();
      salvarNoLocalStorage();
    }

    // ================================================================
    // 4. ATUALIZAR INFO
    // ================================================================
    function atualizarInfo() {
      var total = tarefas.length;
      var concluidas = tarefas.filter(function(t) { return t.concluida; }).length;
      contadorSpan.textContent = total;
      contadorConcluidas.textContent = concluidas;
      if (total > 0) {
        primeiraUltimaSpan.textContent = `🔹 Primeira: "${tarefas[0].texto}" | Última: "${tarefas[total-1].texto}"`;
      } else {
        primeiraUltimaSpan.textContent = '🔹 Primeira: - | Última: -';
      }
    }

    // ================================================================
    // 5. MANIPULAÇÃO DO ARRAY
    // ================================================================
    function adicionarTarefa(texto) {
      if (!texto || texto.trim() === '') { alert('🚨 Digite algo!'); return false; }
      texto = texto.trim();
      tarefas.push({ id: proximoId++, texto: texto, concluida: false });
      input.value = ''; input.focus();
      renderizarTarefas();
      return true;
    }
    function adicionarTarefaInicio() {
      var texto = input.value.trim();
      if (texto === '') { alert('🚨 Digite algo!'); return; }
      tarefas.unshift({ id: proximoId++, texto: texto, concluida: false });
      input.value = ''; input.focus();
      renderizarTarefas();
    }
    function removerUltimo() {
      if (tarefas.length === 0) { alert('⚠️ Não há tarefas!'); return; }
      tarefas.pop();
      renderizarTarefas();
    }
    function removerPrimeiro() {
      if (tarefas.length === 0) { alert('⚠️ Não há tarefas!'); return; }
      tarefas.shift();
      renderizarTarefas();
    }
    function limparTudo() {
      if (tarefas.length === 0) { alert('Já está vazio!'); return; }
      if (confirm('🧹 Tem certeza que quer limpar TUDO?')) {
        tarefas = [];
        proximoId = 1;
        renderizarTarefas();
      }
    }
    function ordenarTarefas() {
      tarefas.sort(function(a, b) { return a.texto.localeCompare(b.texto); });
      renderizarTarefas();
    }

    // ================================================================
    // 6. PERSISTÊNCIA (localStorage)
    // ================================================================
    function salvarNoLocalStorage() {
      try {
        localStorage.setItem('tarefas_caos', JSON.stringify(tarefas));
        localStorage.setItem('proximoId_caos', JSON.stringify(proximoId));
      } catch (e) {}
    }
    function carregarDoLocalStorage() {
      try {
        var dados = localStorage.getItem('tarefas_caos');
        var idSalvo = localStorage.getItem('proximoId_caos');
        if (dados) {
          tarefas = JSON.parse(dados);
          if (idSalvo) proximoId = JSON.parse(idSalvo);
          else {
            if (tarefas.length > 0) {
              var maxId = 0;
              tarefas.forEach(function(t) { if (t.id > maxId) maxId = t.id; });
              proximoId = maxId + 1;
            } else proximoId = 1;
          }
          renderizarTarefas();
          return true;
        }
      } catch (e) {}
      return false;
    }

    // ================================================================
    // 7. EVENTOS
    // ================================================================
    btnAdicionar.addEventListener('click', function() { adicionarTarefa(input.value); });
    btnAdicionarFim.addEventListener('click', function() { adicionarTarefa(input.value); });
    btnAdicionarInicio.addEventListener('click', adicionarTarefaInicio);
    btnRemoverUltimo.addEventListener('click', removerUltimo);
    btnRemoverPrimeiro.addEventListener('click', removerPrimeiro);
    btnLimparTudo.addEventListener('click', limparTudo);
    btnOrdenar.addEventListener('click', ordenarTarefas);
    input.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') { adicionarTarefa(input.value); event.preventDefault(); }
    });

    // ================================================================
    // 8. ATALHOS GLOBAIS
    // ================================================================
    document.addEventListener('keydown', function(event) {
      if (event.target.tagName === 'INPUT') return;
      if (event.key === 'l' || event.key === 'L') {
        console.log('📋 LISTA ATUAL:');
        tarefas.forEach(function(t, i) { console.log(` ${i+1}. ${t.concluida ? '✅' : '⬜'} ${t.texto}`); });
        event.preventDefault();
      }
      if (event.key === 'c' || event.key === 'C') { if (confirm('🧹 Limpar todas as tarefas?')) limparTudo(); event.preventDefault(); }
    });

    // ================================================================
    // 9. INICIALIZAÇÃO
    // ================================================================
    if (!carregarDoLocalStorage()) {
      adicionarTarefa('🚀 Aprender HTML');
      adicionarTarefa('🎨 Estudar CSS');
      adicionarTarefa('⚡ Dominar JavaScript');
      adicionarTarefa('📦 Entender Arrays');
      if (tarefas.length > 0) { tarefas[0].concluida = true; renderizarTarefas(); }
    }
    console.log('📋 LISTA DO CAOS CARREGADA!');
    console.log('📌 Atalhos: [L] listar no console, [C] limpar tudo');
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho "Quem já perdeu uma tarefa importante? E se a gente construísse um sistema que nunca perde nada? Com arrays, a gente pode guardar, organizar e manipular dados."
5-10 min: Exposição O que são arrays? Analogia: caixa de ferramentas.
10-15 min: Métodos essenciais push, pop, unshift, shift, splice.
15-30 min: Mão na massa Construir a to‑do list com adição e remoção.
30-38 min: Teste e personalização Marcar concluídas, editar, ordenar.
38-45 min: Desafio do console Manipular a lista via métodos do array.
45-50 min: Fechamento Reflexão sobre arrays como organizadores de dados.

📊 Critérios de Avaliação

Criação do Array (0-2): Objetos com id, texto, concluida.
Métodos de Adição (0-1): Usou push e unshift.
Métodos de Remoção (0-2): Usou pop, shift, splice.
Laço de Repetição (0-2): Usou forEach (ou for) para renderizar.
Manipulação do DOM (0-1): Criou elementos dinamicamente.
Eventos (0-1): Adicionou ouvintes para todas as ações.
Bônus: localStorage (0-1): Persistência.
Bônus: Criatividade (0-1): Filtros, ordenação, edição.

Total: 0-10 (bônus até 12)

"Arrays são as caixas de ferramentas do programador. Organize seu caos." 📦

🎯 Título

"Funções que Fazem a Festa" ou "Como ensinar o computador a fazer truques novos sem repetir o mesmo código 500 vezes" 🎪

🎯 Objetivos Operacionais

Compreender o conceito de funções como blocos de código reutilizáveis.
Criar funções com parâmetros e retorno de valores.
Diferenciar declaração de função, expressão de função e arrow functions.
Utilizar funções para modularizar e organizar o código.
Construir uma calculadora interativa com funções para cada operação (soma, subtração, multiplicação, divisão, potência, raiz, média).
Entender o conceito de escopo (global vs local) e hoisting.
Bônus: funções são os blocos de construção do código sem elas, o código vira um macarrão (spaghetti code) e ninguém merece.

📚 Conteúdo Programático

O que são funções: sub-rotinas que realizam uma tarefa específica.
Anatomia: function nome(parâmetros) { corpo }.
Parâmetros vs Argumentos.
Retorno: return.
Declaração de função vs Expressão de função.
Arrow functions (() => {}).
Escopo: global, local, let, const, var.
Hoisting.
Composição de funções.
Callback functions (introdução).
Modularização.

🧩 Pilares do Pensamento Computacional

Decomposição: O grande problema "fazer cálculos" é decomposto em funções menores: somar, subtrair, multiplicar, dividir, etc.
Algoritmos: Cada função é um pequeno algoritmo.
Abstração: As funções abstraem a complexidade dos cálculos.
Reconhecimento de Padrões: O padrão function nome(parâmetros) { ... return valor } se repete.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT301 Resolver e elaborar problemas que envolvem equações lineares, inequações e sistemas.
EM13MAT302 Construir modelos matemáticos para descrever fenômenos.
EM13MAT303 Resolver problemas que envolvem funções polinomiais.
EM13MAT304 Analisar e construir modelos matemáticos.

BNCC Linguagens e suas Tecnologias

EM13LP08 Produzir textos de diferentes gêneros.
EM13LP09 Analisar e produzir textos considerando função social.
EM13LGG401 Analisar criticamente o funcionamento de tecnologias digitais.

BNCC Ciências da Natureza

EM13CNT201 Analisar e avaliar os processos tecnológicos.

RCP-PR Educação Digital

EM13CO02 Construir soluções computacionais.
EM13CO03 Utilizar diferentes ferramentas.
EM13CO04 Reconhecer e aplicar princípios da computação.
EM13CO05 Utilizar recursos computacionais de forma crítica.
EM13CO06 Compreender e utilizar variáveis, constantes, operadores, estruturas condicionais, repetição, funções e eventos.

💻 Código Comentado `calculadora_interativa.html` (a calculadora mais estilosa da galáxia)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🧮 Calculadora das Galáxias</title>
  <style>
    /* estilos completos no arquivo .css */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: linear-gradient(145deg, #0c0c1d, #1a1a2e); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
    .calc-container { background: #16213e; padding: 35px 40px 45px; border-radius: 55px; box-shadow: 0 30px 70px rgba(0,0,0,0.9); max-width: 550px; width: 100%; border: 2px solid rgba(233,69,96,0.25); transition: 0.3s; }
    .calc-container:hover { border-color: rgba(233,69,96,0.5); }
    h1 { color: #e0e0e0; text-align: center; font-size: 2.2rem; text-shadow: 0 0 30px #e94560; letter-spacing: 2px; font-weight: 900; }
    .display { background: #0f3460; padding: 20px 25px; border-radius: 30px; margin-bottom: 25px; text-align: right; font-size: 2.8rem; color: #e0e0e0; font-weight: bold; min-height: 90px; border: 2px solid #e94560; box-shadow: inset 0 0 30px rgba(0,0,0,0.5); font-family: 'Courier New', monospace; }
    .display.erro { border-color: #e17055; color: #e17055; animation: treme 0.3s ease; }
    @keyframes treme { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
    .input-group { display: flex; gap: 15px; margin-bottom: 20px; }
    .input-group input { flex: 1; padding: 16px; border: none; border-radius: 30px; font-size: 1.2rem; background: #1a1a2e; color: white; text-align: center; outline: 2px solid #0f3460; transition: 0.3s; min-height: 52px; font-family: inherit; }
    .input-group input:focus { outline-color: #e94560; }
    .btn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 5px; }
    .btn { padding: 18px 0; border: none; border-radius: 30px; font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: 0.2s cubic-bezier(0.34,1.56,0.64,1); color: white; box-shadow: 0 6px 0 rgba(0,0,0,0.35); min-height: 60px; font-family: inherit; }
    .btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 0 rgba(0,0,0,0.35); }
    .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
    .btn-operacao { background: #e94560; box-shadow: 0 6px 0 #b71c3a; }
    .btn-funcao { background: #1a1a2e; box-shadow: 0 6px 0 #2d2d4a; color: #a29bfe; }
    .btn-especial { background: #f5a623; color: #1a1a2e; box-shadow: 0 6px 0 #c4881a; }
    .btn-limpar { background: #533483; box-shadow: 0 6px 0 #3f2766; }
    .btn-igual { background: #0f3460; box-shadow: 0 6px 0 #0a2340; grid-column: span 2; }
    .historico { background: #0f3460; border-radius: 20px; padding: 14px 18px; margin-top: 18px; color: #aaa; font-size: 0.9rem; max-height: 110px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.06); font-family: 'Courier New', monospace; }
    .footer { color: #555; text-align: center; margin-top: 15px; font-size: 0.8rem; letter-spacing: 1px; }
    @media (max-width: 500px) { .calc-container { padding: 20px; } h1 { font-size: 1.6rem; } .display { font-size: 2rem; padding: 15px; min-height: 70px; } .btn { font-size: 1.2rem; padding: 14px 0; min-height: 50px; } .input-group input { font-size: 1rem; padding: 12px; } }
  </style>
</head>
<body>
  <div class="calc-container">
    <h1>🧮 Calculadora <small>--- funções que fazem a festa</small></h1>
    <div class="display" id="display">0</div>
    <div class="input-group">
      <input type="number" id="num1" placeholder="Número 1" step="any">
      <input type="number" id="num2" placeholder="Número 2" step="any">
    </div>
    <div class="btn-grid">
      <button class="btn btn-operacao" data-operacao="somar">+</button>
      <button class="btn btn-operacao" data-operacao="subtrair">−</button>
      <button class="btn btn-operacao" data-operacao="multiplicar">×</button>
      <button class="btn btn-operacao" data-operacao="dividir">÷</button>
      <button class="btn btn-funcao" data-operacao="potencia">xⁿ</button>
      <button class="btn btn-funcao" data-operacao="raiz">√</button>
      <button class="btn btn-especial" data-operacao="media">Média</button>
      <button class="btn btn-especial" data-operacao="porcentagem">%</button>
      <button class="btn btn-limpar" data-operacao="limpar">C</button>
      <button class="btn btn-igual" data-operacao="igual">=</button>
    </div>
    <div class="historico" id="historico">📜 Histórico: nenhuma operação ainda.</div>
    <div class="footer">⚡ Feito com funções 2026</div>
  </div>
  <script>
    // ================================================================
    // 1. REFERÊNCIAS
    // ================================================================
    var display = document.getElementById('display');
    var num1Input = document.getElementById('num1');
    var num2Input = document.getElementById('num2');
    var historicoDiv = document.getElementById('historico');
    var historico = [];
    var ultimoResultado = 0;

    // ================================================================
    // 2. FUNÇÕES PURAS
    // ================================================================
    function somar(a, b) { return a + b; }
    function subtrair(a, b) { return a - b; }
    function multiplicar(a, b) { return a * b; }
    function dividir(a, b) { if (b === 0) return '⚠️ Divisão por zero!'; return a / b; }
    function potencia(base, expoente) { return Math.pow(base, expoente); }
    function raiz(num) { if (num < 0) return '⚠️ Número negativo!'; return Math.sqrt(num); }
    function media(a, b) { return (a + b) / 2; }
    function porcentagem(a, b) { return (a / 100) * b; }

    // ================================================================
    // 3. AUXILIARES
    // ================================================================
    function obterNumeros() {
      var n1 = parseFloat(num1Input.value);
      var n2 = parseFloat(num2Input.value);
      if (isNaN(n1)) n1 = 0;
      if (isNaN(n2)) n2 = 0;
      return { a: n1, b: n2 };
    }
    function atualizarDisplay(resultado, operacaoSimbolo) {
      var exibir = resultado;
      if (typeof resultado === 'number' && !Number.isInteger(resultado)) exibir = resultado.toFixed(6);
      display.textContent = exibir;
      display.classList.remove('erro');
      if (typeof resultado === 'string' && resultado.includes('⚠️')) display.classList.add('erro');
      if (operacaoSimbolo) {
        var nums = obterNumeros();
        var entrada = `${nums.a} ${operacaoSimbolo} ${nums.b} = ${exibir}`;
        historico.push(entrada);
        if (historico.length > 10) historico.shift();
        historicoDiv.innerHTML = historico.length ? '📜 ' + historico.join('<br>') : '📜 Histórico: nenhuma operação ainda.';
      }
      if (typeof resultado === 'number') ultimoResultado = resultado;
    }
    function executarOperacao(funcao, simbolo) {
      var nums = obterNumeros();
      var resultado = funcao(nums.a, nums.b);
      atualizarDisplay(resultado, simbolo);
    }

    // ================================================================
    // 4. OPERAÇÕES ESPECÍFICAS
    // ================================================================
    function operacaoSomar() { executarOperacao(somar, '+'); }
    function operacaoSubtrair() { executarOperacao(subtrair, '−'); }
    function operacaoMultiplicar() { executarOperacao(multiplicar, '×'); }
    function operacaoDividir() { executarOperacao(dividir, '÷'); }
    function operacaoPotencia() { executarOperacao(potencia, '^'); }
    function operacaoRaiz() {
      var nums = obterNumeros();
      var resultado = raiz(nums.a);
      var entrada = `√${nums.a} = ${resultado}`;
      historico.push(entrada);
      if (historico.length > 10) historico.shift();
      atualizarDisplay(resultado, null);
      historicoDiv.innerHTML = '📜 ' + historico.join('<br>');
    }
    function operacaoMedia() { executarOperacao(media, 'Média'); }
    function operacaoPorcentagem() { executarOperacao(porcentagem, '%'); }
    function limpar() {
      display.textContent = '0';
      num1Input.value = '';
      num2Input.value = '';
      display.classList.remove('erro');
    }
    function operacaoIgual() {
      if (historico.length === 0) {
        display.textContent = '⚠️ Nenhuma operação anterior!';
        display.classList.add('erro');
        return;
      }
      var ultima = historico[historico.length - 1];
      var partes = ultima.split(' ');
      if (partes.length >= 3) {
        var numA = parseFloat(partes[0]);
        var operador = partes[1];
        var numB = parseFloat(partes[2]);
        if (isNaN(numA) || isNaN(numB)) {
          display.textContent = '⚠️ Erro ao repetir operação!';
          display.classList.add('erro');
          return;
        }
        num1Input.value = numA;
        num2Input.value = numB;
        var resultado;
        switch (operador) {
          case '+': resultado = somar(numA, numB); break;
          case '−': resultado = subtrair(numA, numB); break;
          case '×': resultado = multiplicar(numA, numB); break;
          case '÷': resultado = dividir(numA, numB); break;
          case '^': resultado = potencia(numA, numB); break;
          case 'Média': resultado = media(numA, numB); break;
          case '%': resultado = porcentagem(numA, numB); break;
          default: resultado = '⚠️ Operação desconhecida!';
        }
        atualizarDisplay(resultado, operador);
      } else {
        display.textContent = '⚠️ Erro ao repetir operação!';
        display.classList.add('erro');
      }
    }

    // ================================================================
    // 5. EVENTOS DOS BOTÕES (data-operacao)
    // ================================================================
    var operacoesMap = {
      'somar': operacaoSomar, 'subtrair': operacaoSubtrair,
      'multiplicar': operacaoMultiplicar, 'dividir': operacaoDividir,
      'potencia': operacaoPotencia, 'raiz': operacaoRaiz,
      'media': operacaoMedia, 'porcentagem': operacaoPorcentagem,
      'limpar': limpar, 'igual': operacaoIgual
    };
    document.querySelectorAll('[data-operacao]').forEach(function(botao) {
      botao.addEventListener('click', function() {
        var op = botao.dataset.operacao;
        var fn = operacoesMap[op];
        if (fn) fn();
      });
    });

    // ================================================================
    // 6. EVENTOS DE TECLADO
    // ================================================================
    document.addEventListener('keydown', function(event) {
      if (event.target.tagName === 'INPUT') {
        if (event.key === 'Enter') {
          if (event.target.id === 'num1') { num2Input.focus(); event.preventDefault(); }
          else if (event.target.id === 'num2') { operacaoSomar(); event.preventDefault(); }
        }
        return;
      }
      if (event.key === 'Enter') { operacaoIgual(); event.preventDefault(); }
      if (event.key === 'c' || event.key === 'C') { limpar(); event.preventDefault(); }
      if (event.key === 'r' || event.key === 'R') {
        if (confirm('🧹 Limpar histórico e reiniciar?')) {
          historico = []; historicoDiv.innerHTML = '📜 Histórico: nenhuma operação ainda.';
          limpar();
        }
        event.preventDefault();
      }
    });

    // ================================================================
    // 7. INICIALIZAÇÃO
    // ================================================================
    console.log('🧮 CALCULADORA CARREGADA!');
    console.log('📌 Atalhos: [Enter] igual, [C] limpar, [R] reiniciar');
  </script>
</body>
</html>

⏱️ Minuto a minuto (50 min)

0-5 min: Gancho "Quem já copiou e colou o mesmo código 5 vezes?" Funções como receitas de bolo.
5-10 min: Exposição Anatomia de uma função, parâmetros, retorno.
10-15 min: Funções na prática Exemplo com saudacao(nome).
15-30 min: Mão na massa Construir a calculadora com funções puras e de interface.
30-38 min: Teste e personalização Adicionar funções extras (fatorial, módulo).
38-45 min: Desafio Criar função que soma todos os números de um array.
45-50 min: Fechamento Funções organizam o código e evitam repetição.

📊 Critérios de Avaliação

Declaração de Funções (0-3): Criou pelo menos 5 funções.
Parâmetros e Retorno (0-2): Recebem parâmetros e retornam valores.
Modularização (0-2): Divisão clara entre lógica e interface.
Função de Interface (0-1): Integra lógica com DOM.
Tratamento de Erros (0-1): Divisão por zero, números negativos.
Bônus: Arrow Functions (0-1): Usou em pelo menos um lugar.
Bônus: Funções de Alta Ordem (0-1): Retorna ou recebe função.
Bônus: Criatividade (0-1): Funcionalidades extras.

Total: 0-10 (bônus até 13)

"Com funções, vocês não estão mais escrevendo código vocês estão projetando um sistema." 🧩

🎯 Título

"Projeto Integrador: Do Rascunho à Obra‑Prima" ou "Como transformar 7 semanas de aprendizado em um site que vai dar o que falar" 🚀

🎯 Objetivos Operacionais

Integrar HTML, CSS, JavaScript, DOM, Eventos, Arrays e Funções em um projeto completo.
Planejar e executar um projeto em equipe (portfólio, jogo, rede social fake, blog, ferramenta, etc.).
Aplicar Design Thinking e metodologias ágeis (planejamento, sprints, revisão).
Desenvolver habilidades de colaboração, comunicação e gestão de tempo.
Criar um produto final que reflita a identidade e a criatividade da equipe.
Bônus: um projeto nunca fica pronto mas isso não é desculpa para não lançar. Feito é melhor que perfeito.

📚 Conteúdo Programático

Revisão integrada: HTML semântico, CSS responsivo, JavaScript interativo.
Design Thinking: empatia, definição, ideação, prototipagem, teste.
Metodologias Ágeis: planejamento, divisão de tarefas, sprints, revisão.
Versionamento (introdução): como organizar arquivos e pastas.
Boas práticas: código limpo, indentação, comentários, nomes significativos.
Apresentação: como contar a história do projeto, justificar escolhas e demonstrar funcionalidades.
Feedback: dar e receber críticas construtivas.
Autoavaliação: refletir sobre o próprio aprendizado.

🧩 Pilares do Pensamento Computacional

Todos os pilares aplicação simultânea de abstração, decomposição, reconhecimento de padrões e algoritmos.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias

EM13MAT401 Aplicar conceitos matemáticos na compreensão e resolução de problemas.
EM13MAT402 Utilizar raciocínio lógico e linguagem matemática.
EM13MAT501 Comunicar ideias matemáticas de forma clara.

BNCC Linguagens e suas Tecnologias

EM13LP09 Produzir textos de diferentes gêneros.
EM13LP11 Apresentar e defender pontos de vista.
EM13LGG501 Criar e produzir obras, produtos e manifestações artísticas.
EM13LGG601 Participar de práticas colaborativas.

BNCC Ciências Humanas e Sociais Aplicadas

EM13CHS301 Analisar e avaliar os processos de transformação das sociedades.

RCP-PR Educação Digital

EM13CO02 Construir soluções computacionais.
EM13CO03 Utilizar ferramentas e ambientes de programação.
EM13CO04 Reconhecer e aplicar princípios da computação.
EM13CO05 Utilizar recursos computacionais de forma crítica.
EM13CO07 Planejar e executar projetos de desenvolvimento de software.

💻 Código Comentado `template_projeto_integrador.html` (o ponto de partida)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🚀 Meu Projeto Integrador</title>
  <style>
    /* CSS personalizado cada equipe estiliza do seu jeito */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #f5f6fa; color: #2d3436; line-height: 1.7; }
    header { background: linear-gradient(135deg, #6c5ce7, #0984e3); color: white; padding: 2rem 1rem; text-align: center; position: relative; overflow: hidden; }
    header h1 { font-size: 3rem; font-weight: 900; letter-spacing: 2px; text-shadow: 0 4px 20px rgba(0,0,0,0.3); position: relative; z-index: 1; }
    nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; background: #2d3436; padding: 1rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
    nav a { color: white; text-decoration: none; font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 30px; transition: 0.3s; }
    nav a:hover { background: #6c5ce7; transform: scale(1.05); }
    .container { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
    .card { background: white; padding: 2.5rem; border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.07); margin-bottom: 2rem; transition: 0.3s; border: 1px solid rgba(0,0,0,0.03); }
    .card h2 { margin-bottom: 1.2rem; color: #6c5ce7; font-size: 1.8rem; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #f0f0f0; padding-bottom: 0.8rem; }
    .btn { background: #6c5ce7; color: white; border: none; padding: 0.8rem 2.2rem; border-radius: 50px; cursor: pointer; font-weight: 700; transition: 0.3s; font-size: 1rem; min-height: 48px; box-shadow: 0 4px 15px rgba(108,92,231,0.3); }
    .btn:hover { transform: scale(1.04) translateY(-3px); box-shadow: 0 8px 25px rgba(108,92,231,0.4); }
    footer { background: #2d3436; color: white; text-align: center; padding: 2rem 1rem; margin-top: 3rem; }
    @media (max-width: 700px) { header h1 { font-size: 2rem; } .card { padding: 1.5rem; } .btn { width: 100%; text-align: center; } }
  </style>
</head>
<body>
  <header>
    <h1>🚀 [Nome do Projeto]</h1>
    <p>Equipe: [Nomes dos integrantes]</p>
  </header>
  <nav>
    <a href="#sobre">📖 Sobre</a>
    <a href="#projeto">🎯 Projeto</a>
    <a href="#interativo">⚡ Interativo</a>
    <a href="#contato">📬 Contato</a>
  </nav>
  <div class="container">
    <section id="sobre" class="card">
      <h2>📖 Sobre este projeto</h2>
      <p>Aplicamos tudo o que aprendemos sobre HTML, CSS, JS, DOM, eventos, arrays e funções.</p>
    </section>
    <section id="projeto" class="card">
      <h2>🎯 O coração do projeto</h2>
      <div id="area-principal">
        <p>Clique no botão para aumentar o contador:</p>
        <p style="font-size: 4rem; font-weight: 900; color: #6c5ce7;"><span id="contador-principal">0</span></p>
        <button class="btn" id="btn-contador">➕ Clique aqui</button>
        <button class="btn" id="btn-zerar">🔄 Zerar</button>
      </div>
    </section>
    <section id="interativo" class="card">
      <h2>⚡ Área interativa</h2>
      <div id="area-interativa">
        <input type="text" id="input-interativo" placeholder="Digite algo..." style="padding:12px; border-radius:30px; border:2px solid #dfe6e9; width:70%; min-width:200px;">
        <button class="btn" id="btn-interativo">Enviar</button>
        <div id="resultado-interativo" style="margin-top:1rem; background:white; padding:1rem; border-radius:16px; min-height:40px;">👆 O resultado aparecerá aqui.</div>
      </div>
    </section>
    <section id="contato" class="card">
      <h2>📬 Contato</h2>
      <input type="text" id="mensagem-contato" placeholder="Digite sua mensagem..." style="flex:1; padding:14px; border-radius:30px; border:2px solid #dfe6e9; min-width:200px; font-size:1rem;">
      <button class="btn" id="btn-enviar">📤 Enviar</button>
      <div id="feedback-contato" style="margin-top:1rem; padding:12px; border-radius:16px; background:#f8f9fa; min-height:40px;">💬 Aguardando sua mensagem...</div>
    </section>
  </div>
  <footer><p>© 2026 [Equipe] Codando o Futuro</p></footer>
  <script>
    // ================================================================
    // 1. CONTADOR
    // ================================================================
    var contador = 0;
    var displayContador = document.getElementById('contador-principal');
    var btnContador = document.getElementById('btn-contador');
    var btnZerar = document.getElementById('btn-zerar');
    function incrementarContador() { contador++; displayContador.textContent = contador; console.log('Contador:', contador); }
    function zerarContador() { contador = 0; displayContador.textContent = contador; console.log('Contador zerado!'); }
    btnContador.addEventListener('click', incrementarContador);
    btnZerar.addEventListener('click', zerarContador);

    // ================================================================
    // 2. ÁREA INTERATIVA
    // ================================================================
    var inputInterativo = document.getElementById('input-interativo');
    var btnInterativo = document.getElementById('btn-interativo');
    var resultadoInterativo = document.getElementById('resultado-interativo');
    function processarEntrada() {
      var texto = inputInterativo.value.trim();
      if (texto === '') { resultadoInterativo.innerHTML = '⚠️ Digite algo!'; return; }
      var invertido = texto.split('').reverse().join('');
      var tamanho = texto.length;
      resultadoInterativo.innerHTML = `📝 Você escreveu: "${texto}"
🔄 Invertido: "${invertido}"
📏 Tamanho: ${tamanho} caracteres`;
      inputInterativo.value = '';
    }
    btnInterativo.addEventListener('click', processarEntrada);
    inputInterativo.addEventListener('keydown', function(e) { if (e.key === 'Enter') { processarEntrada(); e.preventDefault(); } });

    // ================================================================
    // 3. CONTATO
    // ================================================================
    var inputContato = document.getElementById('mensagem-contato');
    var btnEnviar = document.getElementById('btn-enviar');
    var feedbackContato = document.getElementById('feedback-contato');
    function enviarMensagem() {
      var texto = inputContato.value.trim();
      if (texto === '') { feedbackContato.innerHTML = '⚠️ Digite algo!'; return; }
      feedbackContato.innerHTML = '⏳ Enviando...';
      setTimeout(function() {
        feedbackContato.innerHTML = `✅ Mensagem enviada: "${texto}"
📨 Obrigado! Entraremos em contato.`;
        inputContato.value = '';
      }, 800);
    }
    btnEnviar.addEventListener('click', enviarMensagem);
    inputContato.addEventListener('keydown', function(e) { if (e.key === 'Enter') { enviarMensagem(); e.preventDefault(); } });

    // ================================================================
    // 4. ATALHOS
    // ================================================================
    document.addEventListener('keydown', function(e) {
      if (e.target.tagName === 'INPUT') return;
      if (e.key === 'c' || e.key === 'C') { zerarContador(); e.preventDefault(); }
      if (e.key === 'i' || e.key === 'I') { inputInterativo.focus(); e.preventDefault(); }
    });

    console.log('🚀 PROJETO INTEGRADOR CARREGADO!');
    console.log('📌 Atalhos: [C] zerar contador, [I] focar input interativo');
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min) Sessão de Planejamento

0-5 min: Gancho "Vocês passaram 7 semanas aprendendo ferramentas. Agora é hora de construir algo com a cara de vocês."
5-10 min: Brainstorming em grupos escolha do tema.
10-20 min: Planejamento ágil objetivos, funcionalidades, divisão de tarefas, cronograma.
20-25 min: Esboço no papel (wireframe).
25-35 min: Mão na massa início da codificação a partir do template.
35-42 min: Primeira revisão (daily) o que já foi feito, o que está travando.
42-48 min: Ajustes e próximos passos.
48-50 min: Fechamento cada grupo compartilha sua ideia em uma frase.

📊 Critérios de Avaliação (Projeto Final)

Planejamento (0-2): Objetivo, funcionalidades, divisão de tarefas.
Estrutura HTML (0-2): Semântica, indentação, organização.
Estilo CSS (0-2): Criativo, responsivo, boa escolha de cores.
Interatividade JS (0-3): Funcionalidades, tratamento de erros, feedback, uso de eventos, arrays e funções.
Colaboração (0-2): Participação equilibrada.
Documentação (0-1): Comentários, README.
Apresentação (0-2): Clareza, demonstração, justificativas.
Bônus: Acessibilidade (0-1): Boas práticas.
Bônus: Inovação (0-1): Diferencial criativo.

Total: 0-15 (bônus até 17)

"Vocês não estão apenas construindo um site vocês estão construindo a prova de que são capazes de criar algo do nada." 🚀

🎯 Título

"Testes, Debug e Ajustes: O Martelo e a Bigorna" ou "Como transformar um site quebrado em uma obra‑prima (ou pelo menos em algo que não explode)" 🔨

🎯 Objetivos Operacionais

Compreender a importância de testar e depurar como parte essencial do desenvolvimento.
Utilizar ferramentas de debug: console.log(), debugger, breakpoints, DevTools.
Identificar e corrigir erros de sintaxe, lógica e referência.
Aplicar técnicas de refatoração para melhorar a legibilidade e manutenibilidade.
Trabalhar em equipe para revisar e melhorar o projeto integrador.
Bônus: errar é humano o computador só faz o que você manda, não o que você quer. Aceitar o erro é o primeiro passo para dominá-lo.

📚 Conteúdo Programático

Ciclo de vida do desenvolvimento: planejar → codificar → testar → depurar → refatorar → lançar.
Tipos de erro: sintaxe, referência, lógica, runtime.
Ferramentas de debug: console.log, console.error, console.warn, console.table, breakpoints, debugger;.
Tratamento de erros: try...catch (introdução).
Refatoração: reescrever código sem mudar comportamento.
Revisão de código (Code Review).

🧩 Pilares do Pensamento Computacional

Decomposição: O processo de debug é decompor o problema.
Algoritmos: Depurar é seguir um algoritmo: reproduzir o erro → isolar a causa → corrigir → testar novamente.
Abstração: Saber abstrair o que o código deveria fazer do que ele realmente está fazendo.
Reconhecimento de Padrões: Erros se repetem; reconhecer padrões acelera a correção.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática

EM13MAT402 Utilizar raciocínio lógico e linguagem matemática.
EM13MAT501 Comunicar ideias matemáticas de forma clara.

BNCC Linguagens

EM13LP10 Revisar e editar textos produzidos.
EM13LGG601 Participar de práticas colaborativas.

BNCC Ciências Humanas

EM13CHS301 Analisar e avaliar processos de transformação.

RCP-PR Educação Digital

EM13CO03 Utilizar ferramentas e ambientes de programação.
EM13CO04 Reconhecer e aplicar princípios da computação.
EM13CO05 Utilizar recursos computacionais de forma crítica.
EM13CO06 Compreender variáveis, operadores, estruturas condicionais, repetição, funções e eventos.

💻 Código Bugado `bugado.html` (o "monstro" a ser consertado)

<!DOCTYPE html>
<html>
<head>
  <title>🐛 Caça ao Bug Calculadora Bugada</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; padding: 20px; background: #f5f6fa; }
    h1 { color: #e17055; }
    .container { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    input { padding: 12px; border-radius: 10px; border: 2px solid #dfe6e9; width: 100%; margin: 5px 0; box-sizing: border-box; }
    button { padding: 12px 24px; border: none; border-radius: 30px; background: #6c5ce7; color: white; font-weight: bold; cursor: pointer; margin: 5px; }
    button:hover { background: #341f97; }
    #resultado { background: #dfe6e9; padding: 15px; border-radius: 12px; margin-top: 15px; font-weight: bold; min-height: 40px; }
    .lista-bugs { background: #ffeaa7; padding: 15px; border-radius: 12px; margin-top: 15px; font-size: 0.9rem; display: none; }
  </style>
</head>
<body>
  <div class="container">
    <h1>🐛 Calculadora Bugada</h1>
    <p>Esta calculadora tem <strong>10 bugs</strong> (ou mais). Encontre e corrija todos!</p>
    <input type="text" id="num1" placeholder="Número 1">
    <input type="text" id="num2" placeholder="Número 2">
    <div>
      <button onclick="somar()">Somar</button>
      <button onclick="subtrair()">Subtrair</button>
      <button onclick="multiplicar()">Multiplicar</button>
      <button onclick="divisao()">Dividir</button>
    </div>
    <div id="resultado">Resultado:</div>
    <button onclick="mostrarDicas()">💡 Mostrar dicas</button>
    <div id="listaBugs" class="lista-bugs"></div>
  </div>
  <script>
    // ============================================================
    // CÓDIGO CHEIO DE ERROS encontre e corrija todos!
    // ============================================================
    // ERRO 1: variável sem declaração
    resultado = document.getElementById('resultado');

    function somar() {
      // ERRO 2: getElementById escrito errado (getElementByID)
      var n1 = document.getElementById('num1').value;
      var n2 = document.getElementById('num2').value;
      // ERRO 3: valores são strings, precisa converter
      var soma = n1 + n2;
      // ERRO 4: acessando propriedade errada (textContent vs innerHTML)
      resultado.textContent = 'Resultado: ' + soma;
    }

    function subtrair() {
      var n1 = document.getElementById('num1').value;
      var n2 = document.getElementById('num2').value;
      // ERRO 5: operador errado (multiplicação em vez de subtração)
      var sub = n1 * n2;
      resultado.innerHTML = 'Resultado: ' + sub;
    }

    // ERRO 6: nome da função não corresponde ao onclick (multiplicar vs multiplicacao)
    function multiplicacao() {
      // ERRO 7: não converte os valores
      var n1 = document.getElementById('num1').value;
      var n2 = document.getElementById('num2').value;
      var mult = n1 * n2;
      resultado.innerHTML = 'Resultado: ' + mult;
    }

    // ERRO 8: função chamada com nome errado no botão (divisao vs dividir)
    function divisao() {
      // ERRO 9: divisão por zero não tratada
      var n1 = parseFloat(document.getElementById('num1').value);
      var n2 = parseFloat(document.getElementById('num2').value);
      var div = n1 / n2;
      resultado.innerHTML = 'Resultado: ' + div;
    }

    // ERRO 10: variável não declarada
    console.log('Total de operações: ' + total);

    // ERRO 11: função mostrarDicas usa variável 'bugs' não declarada
    function mostrarDicas() {
      var lista = document.getElementById('listaBugs');
      lista.style.display = 'block';
      lista.innerHTML = bugs.join('<br>');
    }
  </script>
</body>
</html>

🧾 Lista de Bugs para os Alunos Encontrarem (gabarito do professor)

Bug	Local	Correção Esperada
1	`resultado = ...` sem declaração	Adicionar `var resultado = document.getElementById('resultado');`
2	`document.getElementById` escrito como `getElementByID`	Corrigir para `getElementById`
3	Valores dos inputs são strings → concatenação	Usar `parseFloat` em ambos
4	Usa `textContent` em vez de `innerHTML` em `somar()`	Usar `innerHTML` (ou padronizar todos com `textContent`)
5	Em `subtrair()`, usa `*` em vez de `-`	Trocar para `n1 - n2`
6	Botão chama `multiplicar()` mas função é `multiplicacao`	Renomear função para `multiplicar` ou alterar o `onclick`
7	Em `multiplicacao()`, não converte valores	Adicionar `parseFloat`
8	Botão chama `divisao()` mas função se chama `dividir`	Renomear função para `divisao` ou o `onclick` para `dividir`
9	Divisão por zero não tratada	Adicionar `if (n2 === 0) { ... }`
10	Variável `total` não declarada no `console.log`	Declarar `var total = 0;` ou remover a linha
11	Função `mostrarDicas` usa `bugs` que não existe	Declarar `var bugs = ['...'];` antes de usar

💻 Solução Final (Código Corrigido) para o professor mostrar após a atividade

<!DOCTYPE html>
<html>
<head>
  <title>✅ Calculadora Corrigida</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; padding: 20px; background: #f5f6fa; }
    h1 { color: #00b894; }
    .container { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    input { padding: 12px; border-radius: 10px; border: 2px solid #dfe6e9; width: 100%; margin: 5px 0; box-sizing: border-box; }
    button { padding: 12px 24px; border: none; border-radius: 30px; background: #6c5ce7; color: white; font-weight: bold; cursor: pointer; margin: 5px; }
    button:hover { background: #341f97; }
    #resultado { background: #dfe6e9; padding: 15px; border-radius: 12px; margin-top: 15px; font-weight: bold; min-height: 40px; }
    .lista-bugs { background: #55efc4; padding: 15px; border-radius: 12px; margin-top: 15px; font-size: 0.9rem; }
  </style>
</head>
<body>
  <div class="container">
    <h1>✅ Calculadora Corrigida</h1>
    <p>Parabéns! Todos os bugs foram exterminados!</p>
    <input type="number" id="num1" placeholder="Número 1" step="any">
    <input type="number" id="num2" placeholder="Número 2" step="any">
    <div>
      <button onclick="somar()">Somar</button>
      <button onclick="subtrair()">Subtrair</button>
      <button onclick="multiplicar()">Multiplicar</button>
      <button onclick="dividir()">Dividir</button>
    </div>
    <div id="resultado">Resultado:</div>
    <button onclick="mostrarDicas()">💡 Mostrar dicas</button>
    <div id="listaBugs" class="lista-bugs" style="display:none;"></div>
  </div>
  <script>
    var resultado = document.getElementById('resultado');
    var totalOperacoes = 0;
    function obterNumeros() {
      var n1 = parseFloat(document.getElementById('num1').value);
      var n2 = parseFloat(document.getElementById('num2').value);
      if (isNaN(n1) || isNaN(n2)) {
        resultado.innerHTML = '⚠️ Digite números válidos!';
        resultado.style.color = '#e17055';
        return null;
      }
      resultado.style.color = '#2d3436';
      return { a: n1, b: n2 };
    }
    function somar() {
      var nums = obterNumeros(); if (!nums) return;
      var soma = nums.a + nums.b;
      resultado.innerHTML = 'Resultado: ' + soma;
      totalOperacoes++;
      console.log('✅ Soma:', nums.a, '+', nums.b, '=', soma);
    }
    function subtrair() {
      var nums = obterNumeros(); if (!nums) return;
      var sub = nums.a - nums.b;
      resultado.innerHTML = 'Resultado: ' + sub;
      totalOperacoes++;
      console.log('✅ Subtração:', nums.a, '-', nums.b, '=', sub);
    }
    function multiplicar() {
      var nums = obterNumeros(); if (!nums) return;
      var mult = nums.a * nums.b;
      resultado.innerHTML = 'Resultado: ' + mult;
      totalOperacoes++;
      console.log('✅ Multiplicação:', nums.a, '*', nums.b, '=', mult);
    }
    function dividir() {
      var nums = obterNumeros(); if (!nums) return;
      if (nums.b === 0) { resultado.innerHTML = '⚠️ Erro: divisão por zero!'; resultado.style.color = '#e17055'; return; }
      var div = nums.a / nums.b;
      resultado.innerHTML = 'Resultado: ' + div;
      totalOperacoes++;
      console.log('✅ Divisão:', nums.a, '/', nums.b, '=', div);
    }
    var listaBugs = ['✅ Variáveis declaradas', '✅ getElementById corrigido', '✅ parseFloat', '✅ innerHTML padronizado', '✅ Operador de subtração corrigido', '✅ Nomes das funções corrigidos', '✅ Divisão por zero tratada', '✅ Validação de entrada', '✅ Inputs type="number"', '✅ Variável total declarada'];
    function mostrarDicas() {
      var lista = document.getElementById('listaBugs');
      if (lista) { lista.style.display = 'block'; lista.innerHTML = '🔧 Bugs corrigidos:<br>' + listaBugs.join('<br>'); }
    }
    console.log('🚀 Calculadora corrigida carregada!');
    console.log('📌 Total de operações:', totalOperacoes);
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min)

0-5 min: Gancho "Já passaram horas tentando descobrir por que o código não funciona? Hoje vocês vão aprender a caçar bugs como profissionais."
5-10 min: Exposição Tipos de erro, ferramentas de debug, analogia com detetive.
10-15 min: Demonstração ao vivo Professor corrige um bug em tempo real.
15-25 min: Caça ao Bug em duplas usar o arquivo bugado.html.
25-35 min: Comparação coletiva listar bugs encontrados e mostrar a solução correta.
35-42 min: Aplicação no projeto integrador cada grupo revisa seu código.
42-48 min: Refatoração em equipe melhorar legibilidade.
48-50 min: Fechamento compartilhar o bug mais ridículo encontrado.

📊 Critérios de Avaliação

Identificação de Bugs (0-3): Encontrou pelo menos 8 dos 10+ bugs.
Correção de Bugs (0-3): Corrigiu de forma funcional.
Uso do Console (0-1): Utilizou console.log ou ferramentas de debug.
Validação de Entrada (0-1): Campos vazios ou inválidos.
Tratamento de Erros (0-1): Casos especiais (divisão por zero).
Refatoração (0-1): Melhorou legibilidade no projeto.
Bônus: try...catch (0-1): Implementou tratamento.
Bônus: Testes Automatizados (0-1): Criou testes com console.assert.

Total: 0-10 (bônus até 12)

"Um programador que nunca errou é um programador que nunca tentou. O erro não é o fim é o começo do aprendizado." 🐛→🦋

🎯 Título

"Lançamento Oficial: A Grande Estreia" ou "Como apresentar seu projeto para o mundo (e sobreviver às perguntas)" 🎬

🎯 Objetivos Operacionais

Apresentar o projeto final para a turma, de forma clara, envolvente e confiante.
Refletir sobre o processo de aprendizagem ao longo do bimestre.
Desenvolver habilidades de comunicação e storytelling técnico.
Praticar o feedback construtivo dar e receber críticas com respeito.
Realizar a autoavaliação do próprio desempenho e aprendizado.
Celebrar as conquistas e encerrar o bimestre com chave de ouro.
Bônus: o fim é só o começo de algo maior cada projeto é um trampolim para o próximo desafio.

📚 Conteúdo Programático

Storytelling técnico: como contar a história do seu projeto.
Estrutura de uma apresentação: abertura, contexto, demonstração, desafios, aprendizados, conclusão.
Pitch: como vender sua ideia em poucos minutos.
Feedback construtivo: o que é, como dar e como receber.
Autoavaliação: refletir sobre o que aprendeu.
Celebração: reconhecer o esforço e a evolução.
Próximos passos: o que vem depois deste bimestre.

🧩 Pilares do Pensamento Computacional

Abstração: Abstrair o projeto em uma apresentação.
Algoritmos: A apresentação segue um algoritmo: introdução → desenvolvimento → demonstração → conclusão → perguntas.
Decomposição: Decompor a apresentação em partes: quem fala o quê, quem demonstra o quê.
Reconhecimento de Padrões: Padrões em apresentações de sucesso.

📜 Habilidades BNCC e RCP-PR

BNCC Matemática

EM13MAT501 Comunicar ideias matemáticas de forma clara.
EM13MAT402 Utilizar raciocínio lógico e linguagem matemática.

BNCC Linguagens

EM13LP11 Apresentar e defender pontos de vista.
EM13LGG501 Criar e produzir obras, produtos e manifestações artísticas.
EM13LGG601 Participar de práticas colaborativas.

RCP-PR Educação Digital

EM13CO07 Planejar e executar projetos de desenvolvimento de software.
EM13CO08 Comunicar e compartilhar soluções computacionais.
EM13CO09 Refletir sobre o processo de construção de soluções.

💻 Código Comentado `apresentacao_projeto.html` (suporte visual para a apresentação)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>🎬 Apresentação Projeto Integrador</title>
  <style>
    /* estilos completos no arquivo .css do projeto */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #0a0a1a; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow: hidden; }
    .slide-container { max-width: 900px; width: 100%; background: linear-gradient(145deg, #16213e, #1a1a2e); border-radius: 40px; padding: 40px 50px 50px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); border: 2px solid rgba(233,69,96,0.2); min-height: 500px; display: flex; flex-direction: column; transition: 0.5s ease; }
    .slide-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid rgba(255,255,255,0.06); padding-bottom: 15px; }
    .slide-header .numero { color: #e94560; font-weight: bold; font-size: 0.9rem; letter-spacing: 2px; }
    .slide-content { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 300px; animation: fadeSlide 0.5s ease; }
    @keyframes fadeSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .slide-content h1 { font-size: 3rem; background: linear-gradient(135deg, #e94560, #6c5ce7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .slide-content h2 { font-size: 2rem; color: #f1f2f6; }
    .slide-content p { font-size: 1.15rem; color: #dfe6e9; line-height: 1.8; max-width: 80%; }
    .nav-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 15px; }
    .nav-controls button { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.1); color: white; padding: 12px 28px; border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 1rem; min-height: 48px; }
    .nav-controls button:hover { background: #e94560; border-color: #e94560; transform: scale(1.03); }
    .nav-controls button:disabled { opacity: 0.3; cursor: not-allowed; }
    .nav-controls .indicador { color: #aaa; font-size: 0.9rem; }
    @media (max-width: 650px) { .slide-container { padding: 25px; min-height: 400px; } .slide-content h1 { font-size: 2rem; } .slide-content h2 { font-size: 1.5rem; } .slide-content p { font-size: 1rem; max-width: 100%; } .nav-controls { flex-wrap: wrap; justify-content: center; } }
  </style>
</head>
<body>
  <div class="slide-container" id="slideContainer">
    <div class="slide-header">
      <span class="numero" id="slideNumero">Slide 1 / 8</span>
      <span class="titulo" id="slideTitulo">🚀 Abertura</span>
    </div>
    <div class="slide-content" id="slideContent">
      <span class="emoji-grande" style="font-size:4rem;">🎬</span>
      <h1>Projeto Integrador</h1>
      <h2>1º Bimestre Codando o Futuro</h2>
      <p>Equipe: <strong>[Nomes dos integrantes]</strong></p>
      <p>Tema: <strong>[Tema do projeto]</strong></p>
    </div>
    <div class="nav-controls">
      <button id="btnAnterior" disabled>◀ Anterior</button>
      <span class="indicador">Slide <span id="slideAtual">1</span> de <span id="totalSlides">8</span></span>
      <button id="btnProximo">Próximo ▶</button>
    </div>
  </div>
  <script>
    var slides = [
      { titulo: '🚀 Abertura', html: `<span class="emoji-grande" style="font-size:4rem;">🎬</span><h1>Projeto Integrador</h1><h2>1º Bimestre Codando o Futuro</h2><p>Equipe: <strong>[Nomes]</strong></p><p>Tema: <strong>[Tema]</strong></p>` },
      { titulo: '📖 Sobre o Projeto', html: `<h2>📖 O que construímos?</h2><p>Desenvolvemos um <strong>[descrever o projeto]</strong> que resolve [qual problema].</p>` },
      { titulo: '🛠️ Tecnologias Usadas', html: `<h2>🛠️ Nossa caixa de ferramentas</h2><ul><li><strong>HTML</strong> Estrutura</li><li><strong>CSS</strong> Estilização</li><li><strong>JS</strong> Interatividade</li><li><strong>DOM</strong> Manipulação</li><li><strong>Eventos</strong> Interações</li><li><strong>Arrays</strong> Dados</li><li><strong>Funções</strong> Modularização</li></ul>` },
      { titulo: '⚡ Funcionalidades', html: `<h2>⚡ O que nosso projeto faz?</h2><ul><li>Funcionalidade 1: [desc]</li><li>Funcionalidade 2: [desc]</li><li>Funcionalidade 3: [desc]</li><li>Funcionalidade 4: [desc]</li></ul>` },
      { titulo: '🎮 Demonstração ao Vivo', html: `<span class="emoji-grande" style="font-size:4rem;">🎮</span><h2>Vamos ver funcionando!</h2><p>Agora é a hora da demonstração ao vivo.</p>` },
      { titulo: '🧠 Desafios e Aprendizados', html: `<h2>🧠 O que foi desafiador?</h2><ul><li>Desafio 1: [ex]</li><li>Desafio 2: [ex]</li><li>Desafio 3: [ex]</li></ul><h3>📈 O que aprendemos?</h3><ul><li>Aprendizado 1: [ex]</li><li>Aprendizado 2: [ex]</li><li>Aprendizado 3: [ex]</li></ul>` },
      { titulo: '🔮 Próximos Passos', html: `<h2>🔮 O que vem por aí?</h2><ul><li>Melhoria 1: [ex]</li><li>Melhoria 2: [ex]</li><li>Melhoria 3: [ex]</li></ul>` },
      { titulo: '🏆 Fechamento', html: `<span class="emoji-grande" style="font-size:4rem;">🏆</span><h1>Obrigado!</h1><h2>Esta foi a nossa jornada.</h2><p>Construímos, erramos, aprendemos, celebramos.</p>` }
    ];
    var slideAtual = 0;
    var total = slides.length;
    var content = document.getElementById('slideContent');
    var slideNumero = document.getElementById('slideNumero');
    var slideTitulo = document.getElementById('slideTitulo');
    var slideAtualSpan = document.getElementById('slideAtual');
    var totalSlidesSpan = document.getElementById('totalSlides');
    var btnAnterior = document.getElementById('btnAnterior');
    var btnProximo = document.getElementById('btnProximo');
    function carregarSlide(index) {
      content.innerHTML = slides[index].html;
      slideNumero.textContent = `Slide ${index + 1} / ${total}`;
      slideTitulo.textContent = slides[index].titulo;
      slideAtualSpan.textContent = index + 1;
      totalSlidesSpan.textContent = total;
      btnAnterior.disabled = (index === 0);
      btnProximo.disabled = (index === total - 1);
    }
    btnProximo.addEventListener('click', function() { if (slideAtual < total - 1) { slideAtual++; carregarSlide(slideAtual); } });
    btnAnterior.addEventListener('click', function() { if (slideAtual > 0) { slideAtual--; carregarSlide(slideAtual); } });
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { if (slideAtual < total - 1) { slideAtual++; carregarSlide(slideAtual); e.preventDefault(); } }
      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { if (slideAtual > 0) { slideAtual--; carregarSlide(slideAtual); e.preventDefault(); } }
    });
    totalSlidesSpan.textContent = total;
    carregarSlide(0);
    console.log('🎬 APRESENTAÇÃO CARREGADA!');
    console.log('📌 Navegação: setas do teclado ← →');
  </script>
</body>
</html>

⏱️ Detalhamento Minuto a Minuto (50 min) Sessão de Apresentações

0-5 min: Abertura épica "Hoje é o dia. O dia em que vocês mostram ao mundo o que construíram."
5-10 min: Preparação final verificação de funcionamento.
10-35 min: Apresentações das equipes (5 min cada).
35-40 min: Feedback coletivo quais projetos mais chamaram atenção.
40-45 min: Votação e premiação categorias (Mais Criativo, Mais Técnico, etc.).
45-48 min: Autoavaliação formulário rápido.
48-50 min: Fechamento emocional discurso de encerramento.

📊 Critérios de Avaliação (Apresentação Final)

Clareza (0-2): Explicação clara e organizada.
Demonstração Funcional (0-2): Projeto funcionou ao vivo.
Storytelling (0-2): História envolvente.
Justificativa (0-1): Explicou escolhas técnicas.
Trabalho em Equipe (0-1): Todos participaram.
Feedback (0-1): Recebeu feedback de forma construtiva.
Autoavaliação (0-1): Reflexão crítica.
Bônus: Criatividade (0-1): Diferencial na apresentação.
Bônus: Respostas (0-1): Respondeu perguntas com segurança.

Total: 0-10 (bônus até 12)

📋 Formulário de Autoavaliação do Aluno

(Entregue para cada aluno preencher após as apresentações)

1. O que você aprendeu neste bimestre que considera mais importante?
2. Qual foi a parte mais difícil para você? Como você superou?
3. O que você faria diferente se tivesse que começar o projeto de novo?
4. Qual foi o momento de maior orgulho durante o projeto?
5. Em uma escala de 1 a 5, como você avalia seu desempenho neste bimestre?
6. O que você gostaria de aprender no próximo bimestre?
7. Deixe um recado para a professora ou para a turma.

🎉 Certificado de Conclusão "Codando o Futuro"

(Imprima ou entregue digitalmente para cada aluno)

🏆 CERTIFICADO 🏆 "CODANDO O FUTURO A ODISSEIA DIGITAL DO 1º ANO"

Certificamos que [Nome], aluno(a) do 1º ano do Ensino Médio, completou com êxito o 1º Bimestre do projeto "Codando o Futuro", demonstrando habilidades em: HTML, CSS, JavaScript, DOM, Eventos, Arrays, Funções, Debug e Trabalho em equipe.

"A jornada foi longa, o código foi escrito, os bugs foram exterminados. Agora, o que importa não é o site que vocês construíram é o que vocês se tornaram para construí-lo." 🚀

Critério	Excelente (10)	Bom (7)	Regular (5)	Insuficiente (3)
Estrutura HTML	HTML semântico, bem indentado, todas as tags necessárias.	HTML correto, pequenos erros de indentação.	Alguns erros de estrutura.	Incompleto ou muitos erros.
Estilo CSS	Design criativo, responsivo, bom uso de cores e fontes.	Funcional, mas sem grandes inovações.	Básico, pouca personalização.	Ausente ou confuso.
Interatividade JS	Funcionalidades completas, tratamento de erros, feedback ao usuário.	Funcionalidades principais funcionando.	Incompletas ou com bugs.	Pouca ou nenhuma interatividade.
Pensamento Computacional	Aplicação clara dos 4 pilares no código e na apresentação.	Aplicação de alguns pilares.	Aplicação superficial.	Nenhuma aplicação identificável.
Apresentação	Comunicação clara, envolvente, domínio do conteúdo.	Clara, mas com algumas hesitações.	Razoável, com dificuldades.	Confusa ou tímida.
Trabalho em Equipe	Colaboração excelente, divisão equilibrada.	Boa colaboração, pequenos desequilíbrios.	Razoável, alguns conflitos.	Pouca colaboração ou trabalho individual.

CARTA DE ABERTURA

MAPEAMENTO BIMESTRE

PLANO SINTÉTICO

PLANOS DE AULA 1º BIMESTRE

Semana 1 "O Universo HTML: A Estrutura do Nada"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado minha-primeira-pagina.html

⏱️ Detalhamento Minuto a Minuto (50 min)

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

📊 Critérios Operacionais de Avaliação com pontuação

Semana 2 "CSS: A Maquiagem dos Deuses"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado index_feio.html (o "monstro")

💻 Código Comentado estilo.css (solução da "Operação Tapa na Cara do Feio")

⏱️ Detalhamento Minuto a Minuto (50 min)

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

📊 Critérios Operacionais de Avaliação com pontuação

Semana 3 "JavaScript: A Mágica Acontece"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado gerador_de_desculpas.html (o "app")

⏱️ Detalhamento Minuto a Minuto (50 min)

♿ Orientações para Adaptações e Inclusão Exemplos Práticos

📊 Critérios Operacionais de Avaliação com pontuação

Semana 4 "DOM: O Documento que Vive"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado dom_ao_vivo.html (aula prática com "Caça ao Elemento")

⏱️ Detalhamento Minuto a Minuto (50 min)

♿ Orientações para Adaptações e Inclusão

📊 Critérios Operacionais de Avaliação com pontuação

Semana 5 "Eventos: Quando o Usuário Toca na Tela"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado jogo_memoria_caos.html (o jogo da memória com emojis)

⏱️ Detalhamento Minuto a Minuto (50 min)

♿ Orientações para Adaptações e Inclusão

📊 Critérios Operacionais de Avaliação com pontuação

Semana 6 "Dados e Arrays: A Biblioteca do Caos"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado lista_tarefas_caos.html (to‑do list com atitude)

⏱️ Detalhamento Minuto a Minuto (50 min)

📊 Critérios de Avaliação

Semana 7 "Funções que Fazem a Festa"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado calculadora_interativa.html (a calculadora mais estilosa da galáxia)

⏱️ Minuto a minuto (50 min)

📊 Critérios de Avaliação

Semana 8 "Projeto Integrador: Do Rascunho à Obra‑Prima"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado template_projeto_integrador.html (o ponto de partida)

💻 Código Comentado `minha-primeira-pagina.html`

💻 Código Comentado `index_feio.html` (o "monstro")

💻 Código Comentado `estilo.css` (solução da "Operação Tapa na Cara do Feio")

💻 Código Comentado `gerador_de_desculpas.html` (o "app")

💻 Código Comentado `dom_ao_vivo.html` (aula prática com "Caça ao Elemento")

💻 Código Comentado `jogo_memoria_caos.html` (o jogo da memória com emojis)

💻 Código Comentado `lista_tarefas_caos.html` (to‑do list com atitude)

💻 Código Comentado `calculadora_interativa.html` (a calculadora mais estilosa da galáxia)

💻 Código Comentado `template_projeto_integrador.html` (o ponto de partida)

💻 Código Bugado `bugado.html` (o "monstro" a ser consertado)

💻 Código Comentado `apresentacao_projeto.html` (suporte visual para a apresentação)