🚀 Codando o Futuro 4º Bimestre (Edição Caótica)

CARTA DE ABERTURA 4º BIMESTRE

ATENÇÃO, TURMA DO 1º ANO! 🔥

Vocês já construíram castelos digitais (HTML, CSS, JS). Já descobriram que esses castelos foram feitos PARA controlar vocês (algoritmos, dados, vigilância). Já planejaram a revolução.

AGORA É HORA DE EXECUTAR.

Esqueçam o medo. Esqueçam o "não sei". Esqueçam o "não vai dar certo".

Este bimestre, vocês não vão mais estudar sobre o mundo digital vocês vão CRIAR o mundo digital que vocês querem ver.

Vocês vão construir UM PROJETO COMPLETO do zero ao ar. Com HTML, CSS e JavaScript puro, sem firulas, sem frameworks, sem muletas. O código que vocês escreverem vai rodar. Vai funcionar. Vai impactar.

E no final? Vocês vão ter um PRODUTO FINAL no ar. Para mostrar para o mundo. Para provar que vocês são capazes de CRIAR não só consumir.

MAPEAMENTO BIMESTRE

Semana	Título da Aula	Habilidades BNCC (Mat)	Habilidades BNCC (LP)	Habilidades BNCC (Outras)	Pilares do Pensamento Computacional
1	"Do Caos ao Código: O Planejamento da Revolução"	EM13MAT101	EM13LP01	EM13CO07	Abstração
2	"HTML: A Estrutura da Resistência"	EM13MAT102	EM13LP02	EM13CO03	Decomposição
3	"CSS: O Estilo da Revolução"	EM13MAT301	EM13LP04	EM13CO05	Reconhecimento de Padrões
4	"JavaScript: A Mágica da Interatividade"	EM13MAT302	EM13LP05	EM13LGG303	Algoritmos
5	"DOM: O Controle Remoto da Sua Página"	EM13MAT201	EM13LP06	EM13CO04	Abstração + Algoritmos
6	"Eventos: Quando o Usuário Toca na Tela"	EM13MAT303	EM13LP07	EM13CO02	Decomposição + Algoritmos
7	"Dados e Arrays: A Biblioteca da Revolução"	EM13MAT304	EM13LP08	EM13CO05	Abstração + Reconhecimento
8	"Funções: O Exército da Revolução"	EM13MAT401	EM13LP09	EM13CO07	Algoritmos
9	"Debug e Polimento: A Batalha Final"	EM13MAT402	EM13LP10	EM13CO09	Decomposição + Algoritmos
10	"Lançamento Oficial: O Mundo Vai Ver"	EM13MAT501	EM13LP11	EM13CO08	Todos os Pilares

PLANO SINTÉTICO 4º BIMESTRE

Semana	Título da Aula	Conceito	Atividade Principal
1	"Do Caos ao Código: O Planejamento da Revolução"	Um bom projeto não começa com código começa com uma pergunta: "Que problema eu quero resolver?"	"O Mapa da Revolução" cada grupo escolhe um problema real da cultura digital e planeja um projeto completo para resolvê-lo
2	"HTML: A Estrutura da Resistência"	HTML é a espinha dorsal sem ele, o site é um esqueleto sem carne	"Construindo a Base" os grupos constroem a estrutura HTML do seu projeto
3	"CSS: O Estilo da Revolução"	CSS transforma um bloco de texto em uma experiência visual que gruda na retina	"Operação Beleza" estilização do projeto
4	"JavaScript: A Mágica da Interatividade"	JS é a alma da interatividade o site responde ao usuário como um ser vivo	"O Despertar" adicionar interatividade básica
5	"DOM: O Controle Remoto da Sua Página"	O DOM é a árvore da página manipulá-lo é ter controle remoto sobre cada elemento	"Caça ao Elemento" selecionar e modificar elementos via JS
6	"Eventos: Quando o Usuário Toca na Tela"	Eventos são cliques, teclas, mouse dominá-los é dominar a interação	"A Hora do Clique" adicionar eventos completos ao projeto
7	"Dados e Arrays: A Biblioteca da Revolução"	Arrays são listas organizadas para guardar dados sem eles, o código vira um caos	"Organizando o Caos" implementar arrays para gerenciar dados
8	"Funções: O Exército da Revolução"	Funções reutilizam código e deixam tudo mais limpo são os soldados da sua revolução	"Modularizando a Revolução" refatorar o código com funções
9	"Debug e Polimento: A Batalha Final"	Testar, encontrar bugs e refatorar são partes do processo não são fracasso, são aprendizado	"Caça aos Bugs" testar, depurar e polir os projetos
10	"Lançamento Oficial: O Mundo Vai Ver"	Apresentar o projeto final e celebrar a jornada a revolução não é revolução se ninguém vê	"A Grande Estreia" apresentações, feedback, autoavaliação e celebração

PLANOS DE AULA DETALHADOS 3º BIMESTRE

Clique em cada semana e veja os detalhes completos com códigos comentados, minuto a minuto e muito mais.

🎯 Título

"Do Caos ao Código: O Planejamento da Revolução" Ou: como transformar uma ideia maluca em um projeto que realmente funciona (e não morre no caminho porque ninguém merece ver seu sonho virar um repositório abandonado no GitHub)

🎯 Objetivos Operacionais

Compreender que um bom projeto não começa com código começa com uma pergunta que dói: "Que problema eu quero resolver?" (e não, "o que eu quero criar" não é a mesma coisa)
Identificar um problema real da cultura digital que afeta a comunidade escolar e não vale falar de "vício em celular" sem dados, sem história, sem sangue nos olhos
Planejar um projeto completo em equipe, definindo: objetivo, público-alvo, funcionalidades, cronograma e divisão de tarefas como um verdadeiro fundador de startup, não como um aluno fazendo trabalho para ganhar nota
Aplicar os 4 Pilares do Pensamento Computacional ao planejamento mas não como decoreba, como ferramenta viva para transformar caos em ordem
Bônus: entender que planejamento não é perda de tempo é o que separa os que sonham dos que realizam. E, spoiler: sonhar é barato, realizar é caro. Vocês vão pagar o preço.

📚 Conteúdo Programático

O que é um projeto? Definição, etapas, a importância de começar com o "porquê" (Sim, Simon Sinek, vocês vão ouvir isso até cansar. E vai fazer sentido.)
Como escolher um problema que vale a pena Identificação de problemas reais da cultura digital na comunidade escolar. Não vale problema inventado. Vale problema que dói em alguém.
Os 4 Pilares do PC aplicados ao planejamento:
- Decomposição: dividir o projeto em partes menores (HTML, CSS, JS, design, conteúdo) como desmontar um Lego para entender como ele foi construído
- Reconhecimento de Padrões: identificar padrões em projetos similares o que funciona, o que não funciona, o que é hype e o que é real
- Abstração: definir o essencial do projeto o MVP (Produto Mínimo Viável) e ter coragem de cortar o que não é essencial (sim, vai doer)
- Algoritmos: criar um cronograma passo a passo porque "vou fazendo" não é plano, é desculpa
Design Thinking aplicado à tecnologia Empatia, definição, ideação, prototipagem, teste. Não é moda, é método. E funciona.
O MVP (Produto Mínimo Viável) a versão mais simples que ainda funciona. Se você consegue explicar seu projeto em uma frase, você está no caminho certo. Se precisa de um parágrafo, volte para a prancheta.

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Abstração	Os alunos abstraem o problema escolhido para um modelo simplificado, definindo o MVP o que é essencial e o que pode esperar (ou ser jogado fora com coragem)
Decomposição	Decompõem o projeto em partes menores: estrutura (HTML), estilo (CSS), interatividade (JS), design, conteúdo, testes cada parte, um time. Cada time, uma missão.
Reconhecimento de Padrões	Identificam padrões em projetos similares (o que funciona, o que não funciona) e aplicam ao seu porque reinventar a roda é perda de tempo, mas melhorar a roda é genialidade
Algoritmos	Criam um cronograma passo a passo para o desenvolvimento do projeto porque sem passo a passo, é só uma lista de desejos

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT101	Interpretar criticamente situações 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:

Código	Habilidade
EM13LP01	Analisar o contexto de produção, circulação e recepção de textos, considerando as diferentes linguagens, mídias e suportes.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO07	Planejar e executar projetos de desenvolvimento de software, considerando aspectos como usabilidade, acessibilidade, ética e sustentabilidade.
EM13CO04	Reconhecer e aplicar os princípios da abstração, decomposição, reconhecimento de padrões e algoritmos na resolução de problemas.

RCP-PR Referencial Curricular do Paraná (2025):

O Referencial Curricular do Paraná estrutura a Educação Digital nos três eixos da BNCC-Computação: Pensamento Computacional, Mundo Digital e Cultura Digital. Nesta aula, os alunos desenvolvem a habilidade de planejar e executar projetos de desenvolvimento de software (EM13CO07), bem como reconhecer e aplicar os princípios da abstração, decomposição, reconhecimento de padrões e algoritmos (EM13CO04). A Cultura Digital um dos três eixos da BNCC Computação é o pano de fundo que conecta o planejamento técnico à realidade social dos estudantes.

💻 Código Comentado

Nesta semana, o "código" é o planejamento. Mas que fique claro: o planejamento é o código mais importante que vocês vão escrever. Se o planejamento estiver bugado, o resto vai desabar.

// ============================================================
// SEMANA 1 O PLANEJAMENTO DA REVOLUÇÃO
// "Se você não sabe onde quer chegar, qualquer caminho serve."
// E qualquer caminho te leva a lugar nenhum.
// ============================================================

// PASSO 1: Defina o PROBLEMA que você quer resolver
// Não vale problema genérico. Vale problema que DÓI.
// Exemplo: "Os alunos da minha escola passam 6 horas por dia no TikTok"
// em vez de "as pessoas usam muito celular".

const problema = {
  descricao: "Os alunos do 1º ano passam em média 4h/dia em redes sociais sem filtrar informações",
  afeta: "estudantes da minha escola",
  impacto: "desinformação, ansiedade, queda no rendimento escolar",
  dados: "pesquisa informal com 30 colegas mostrou que 80% não verificam fontes"
};

// PASSO 2: Aplique os 4 PILARES para estruturar sua solução
const pilares = {
  abstracao: {
    oQueEssencial: "Um sistema que mostra se uma notícia é confiável ou não",
    oQuePodeEsperar: "Sistema de recomendação, chat comunitário, gamificação"
  },
  decomposicao: {
    estrutura: "HTML cabeçalho, formulário, resultados, rodapé",
    estilo: "CSS cores que transmitem confiança, tipografia limpa",
    interatividade: "JS verificar fonte, mostrar resultado, contador de verificações",
    design: "Wireframe no papel antes de codificar",
    conteudo: "Base de dados com fontes confiáveis e não confiáveis"
  },
  reconhecimentoDePadroes: {
    exemplos: "Sites como 'Fake News Checker', 'Lupa', 'Aos Fatos'",
    oQueFunciona: "Mostrar a fonte original, dar selo de confiabilidade",
    oQueNaoFunciona: "Textão explicativo que ninguém lê"
  },
  algoritmos: {
    passo1: "Semana 1-2: Planejamento e estrutura HTML",
    passo2: "Semana 3: Estilização CSS",
    passo3: "Semana 4-6: Lógica JS e interatividade",
    passo4: "Semana 7-8: Arrays e funções",
    passo5: "Semana 9: Testes e correções",
    passo6: "Semana 10: Apresentação"
  }
};

// PASSO 3: Defina o MVP (Produto Mínimo Viável)
// O que é OBRIGATÓRIO para o projeto funcionar?
// O que é LEGAL, mas pode ficar para depois?
const mvp = {
  obrigatorio: [
    "Página com formulário para inserir link da notícia",
    "Botão 'Verificar' que executa a análise",
    "Exibição do resultado (confiável / não confiável / duvidoso)",
    "Design responsivo (funciona no celular)"
  ],
  desejavel: [
    "Histórico de verificações",
    "Compartilhamento do resultado",
    "Ranking de fontes mais confiáveis"
  ],
  // Cortar dói. Mas é necessário.
  // Um MVP não é um projeto incompleto é um projeto COMPLETO na sua versão mais simples.
  corte: "Gamificação e sistema de pontos isso fica para a versão 2.0"
};

// PASSO 4: Perguntas que vão salvar seu projeto
// Responda isso com seu grupo. Sem enrolação.
const perguntasQueDoem = [
  "Qual é a pergunta que seu projeto responde?",
  "Quem vai usar isso? (E não vale 'todo mundo' todo mundo é ninguém)",
  "O que acontece se o usuário fizer TUDO ERRADO? Seu projeto sobrevive?",
  "Qual é a parte mais difícil de fazer? (Encare ela primeiro)",
  "O que vocês vão fazer se não conseguirem fazer a parte mais difícil?"
];

console.log("🚀 PLANEJAMENTO CONCLUÍDO. AGORA É MÃO NA MASSA.");
console.log("⚠️ Lembre-se: o planejamento não é o fim é o COMEÇO.");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Inspira 🚀	Professor entra com energia de palco: "Vocês passaram 3 bimestres entendendo o problema. Agora é hora de RESOLVÊ-LO. Vocês vão criar algo que vai conscientizar, impactar e, quem sabe, mudar o mundo digital. Não é mais sobre reclamar é sobre AGIR. E agir começa com um PLANO. Quem aqui já começou um projeto sem planejar e se arrependeu? (Todos levantam a mão) Pois é. Hoje a gente faz diferente."
5-10	A Pergunta que Tudo Muda ❓	Professor escreve no quadro em letras garrafais: "QUE PROBLEMA EU QUERO RESOLVER?" "Um bom projeto não começa com código. Começa com uma PERGUNTA. Se você não sabe qual problema está resolvendo, você está só digitando teclas aleatórias. E tecla aleatória não muda o mundo."
10-15	Brainstorm de Problemas 💡	Em grupos de 4-5, os alunos listam problemas REAIS da cultura digital que afetam a comunidade escolar: vício em redes, fake news, cyberbullying, privacidade de dados, vigilância digital, desinformação algorítmica, etc. Regra: nada de problemas genéricos. "Não existe problema pequeno existe problema que ainda não foi resolvido. E se dói em alguém, é grande o suficiente."
15-20	Escolha do Desafio 🎯	Cada grupo escolhe UM problema para resolver. Critérios: (1) é real? (2) afeta pessoas reais? (3) é viável resolver em 10 semanas? "Escolham algo que VOCÊS se importam. Porque se vocês não se importam, ninguém vai. E se ninguém se importa, por que fazer?"
20-30	Aplicação dos 4 Pilares 🧩	Cada grupo produz um mapa visual mostrando como cada pilar será aplicado: "Como vamos decompor? Que padrões vamos reconhecer? O que vamos abstrair? Que algoritmos vamos criar?" Professor circula e provoca: "Mostrem que vocês entendem a ferramenta. Não é sobre decorar nome é sobre USAR."
30-38	O Plano da Revolução 📋	Cada grupo define: (1) Objetivo do projeto (uma frase), (2) Público-alvo (específico, não "todo mundo"), (3) Funcionalidades principais (MVP), (4) Divisão de tarefas (quem faz o quê), (5) Cronograma (o que em cada semana). "O plano não precisa ser perfeito precisa ser REAL. E real significa que vocês vão conseguir fazer."
38-45	Pitch da Revolução 🎤	Cada grupo apresenta sua ideia em 2 minutos para a turma. A turma vota nas melhores ideias. "Convençam a gente. Se vocês não conseguirem convencer a turma, não vão conseguir convencer o mundo. E o mundo é mais difícil que a turma."
45-48	Check-in da Alma 💪	"Como você se sente agora que tem um plano? Empolgado? Ansioso? Pronto para começar? O medo é normal. O que importa é o que você faz com ele. Todo mundo que já fez algo incrível teve medo. A diferença é que eles fizeram mesmo com medo."
48-50	Fechamento + Provocação 🚀	"O planejamento está feito. Na semana que vem: MÃO NA MASSA. Tragam seus materiais, suas ideias e sua criatividade. E não se esqueçam: FEITO É MELHOR QUE PERFEITO. Perfeito é inimigo do feito. E o feito é o que muda o mundo."

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

Público	Adaptações Sugeridas
Deficiência Visual	Forneça materiais em braille ou áudio; use fontes grandes (mínimo 24px) e alto contraste; descreva os mapas e cronogramas verbalmente; utilize ferramentas de voz para registro das ideias
Deficiência Auditiva	Use feedback visual em todas as instruções; disponibilize roteiro escrito COMPLETO com antecedência; use intérprete de Libras se disponível; utilize chat ou quadro para comunicações principais
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos e flexíveis; garanta que todos os materiais estejam ao alcance; utilize ferramentas de ditado de voz para registro
TDAH	Divida em sprints de 5 minutos com intervalos; use cronômetros visuais GIGANTES na tela; checklist física para cada etapa; minimize distrações visuais e sonoras
TEA	Envie as instruções com antecedência (24h antes); use perguntas estruturadas e previsíveis; ambiente com poucos estímulos sensoriais; forneça roteiros sociais para a dinâmica de grupo
Altas Habilidades/Superdotação	Desafio extra: "Além do protótipo, desenvolva um plano de negócios ou um modelo de sustentabilidade para o projeto. Como ele se manteria vivo após o bimestre?"

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

Critério	Descrição	Pontuação
Escolha do Desafio	Escolheu um problema relevante, bem definido, com impacto real e dados que comprovem sua existência	0-2
Aplicação dos Pilares	Aplicou corretamente os 4 pilares no mapa, com justificativas claras e exemplos concretos	0-3
Planejamento	Criou um plano de projeto coerente, completo, com prazos realistas e divisão de tarefas clara	0-3
Pitch	Apresentou a ideia de forma clara, convincente, envolvente e no tempo estipulado	0-2
Colaboração	Trabalhou bem em grupo, respeitando as ideias dos colegas, contribuindo ativamente	0-1
Total		0-10

🎯 Título

"HTML: A Estrutura da Resistência" Ou: como construir a espinha dorsal do seu projeto sem perder a sanidade (e sem esquecer de fechar as tags porque uma tag aberta é um convite ao caos)

🎯 Objetivos Operacionais

Compreender o papel do HTML como estrutura de um site a espinha dorsal que sustenta tudo. Sem ela, o site é uma ameba disforme.
Identificar e utilizar tags estruturais (<!DOCTYPE html>, <html>, <head>, <body>) e tags de conteúdo (<h1> a <h6>, <p>, <ul>, <ol>, <li>, <div>, <section>, <header>, <footer>, <nav>, <main>, <article>)
Construir a estrutura completa do projeto em HTML, com todas as seções necessárias e não, "fazer depois" não é opção
Aplicar boas práticas de indentação, organização e comentários no código porque código bagunçado é código que ninguém entende, nem você daqui a uma semana
Bônus: entender que HTML não é programação é marcação e isso é um superpoder que permite estruturar qualquer ideia. É a fundação. E fundação bem feita sustenta arranha-céu.

📚 Conteúdo Programático

Revisão de HTML Estrutura básica, tags essenciais, atributos. "Não é novidade, mas é FUNDAMENTAL. Quem pula etapa, tropeça."
HTML Semântico Uso de tags semânticas (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) para organização e acessibilidade. "Não é só para organizar é para que leitores de tela e mecanismos de busca entendam o que vocês estão fazendo. E se você não se importa com eles, por que eles se importariam com você?"
Estrutura do Projeto Como organizar o HTML do projeto: cabeçalho, navegação, conteúdo principal, seções, rodapé. "É igual a um livro: introdução, desenvolvimento, conclusão. Seu site também."
Boas Práticas Indentação, comentários, nomes de classes e IDs significativos. "Código limpo não é frescura é respeito com quem vai ler depois (inclusive você)."
Acessibilidade em HTML Uso de alt em imagens, lang no html, aria-label quando necessário. "Acessibilidade não é opcional. É direito."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Decomposição	Os alunos decompõem a página em partes menores: cabeçalho, navegação, conteúdo principal, seções, rodapé cada parte é uma tag ou conjunto de tags. "Dividir para conquistar" não é só ditado, é método.
Abstração	O HTML abstrai a complexidade do navegador o aluno não precisa saber como o navegador renderiza, só precisa saber quais tags usar. "Você não precisa entender o motor para dirigir o carro."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT102	Analisar tabelas, gráficos e amostras de pesquisas estatísticas apresentadas em diferentes meios de comunicação, identificando inadequações que possam induzir a erros de interpretação.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP02	Estabelecer relações entre as partes de um texto, identificando repetições ou substituições que contribuem para a continuidade do texto.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO03	Utilizar diferentes ferramentas e ambientes de programação para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.

RCP-PR Referencial Curricular do Paraná (2025):

O RCP-PR orienta o desenvolvimento da habilidade de utilizar diferentes ferramentas e ambientes de programação para construir soluções (EM13CO03), aplicada aqui na construção da estrutura HTML do projeto. A construção de uma estrutura HTML semântica também dialoga com o eixo Cultura Digital ao promover acessibilidade e inclusão digital.

💻 Código Comentado

<!-- ============================================================
SEMANA 2 HTML: A ESTRUTURA DA RESISTÊNCIA
"Sem estrutura, o site é uma ameba disforme."
================================================================ -->

<!-- PASSO 1: A ESTRUTURA MÍNIMA OBRIGATÓRIA -->
<!DOCTYPE html>
<!-- ↑ Diz ao navegador: "Isso é HTML5, não brinca comigo" -->
<html lang="pt-BR">
<!-- ↑ lang é para acessibilidade. Leitores de tela usam isso.
     Se você não coloca, você está excluindo alguém. -->
<head>
  <meta charset="UTF-8">
  <!-- ↑ Define a codificação de caracteres. Sem isso, acentos viram símbolos estranhos. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ↑ ESSENCIAL para responsividade. Sem isso, seu site fica horrível no celular. -->
  <title>Meu Projeto A Revolução Digital</title>
  <!-- ↑ O título aparece na aba do navegador. É a primeira impressão. Capriche. -->
  <link rel="stylesheet" href="style.css">
  <!-- ↑ Conecta o CSS. Sem isso, é só texto preto no fundo branco. -->
</head>
<body>
  <!-- =========================== -->
  <!-- PASSO 2: Use TAGS SEMÂNTICAS -->
  <!-- Não é sobre ser bonito. É sobre ser CORRETO. -->
  <header>
    <h1>🔍 VerificaFake</h1>
    <nav>
      <ul>
        <li><a href="sobre">Sobre</a></li>
        <li><a href="verificar">Verificar</a></li>
        <li><a href="historico">Histórico</a></li>
        <li><a href="contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="sobre">
      <h2>Sobre o Projeto</h2>
      <p>Nosso projeto ajuda você a identificar se uma notícia é confiável ou não.</p>
    </section>

    <section id="verificar">
      <h2>Verificar Notícia</h2>
      <form id="formVerificacao">
        <label for="urlNoticia">Cole o link da notícia:</label>
        <input type="url" id="urlNoticia" placeholder="https://..." required>
        <button type="submit">Verificar</button>
      </form>
      <div id="resultado">
        <p>⚠️ Aguardando verificação...</p>
      </div>
    </section>

    <section id="historico">
      <h2>Histórico de Verificações</h2>
      <ul id="listaHistorico">
        <li>Nenhuma verificação ainda.</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Turma do 1º Ano. A revolução será codificada.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

<!-- ============================================================
CHECKLIST DO HTML PERFEITO:
[ ] DOCTYPE declarado
[ ] lang="pt-BR" no html
[ ] meta charset="UTF-8"
[ ] meta viewport
[ ] title descritivo
[ ] Pelo menos UM <main>
[ ] Tags semânticas (header, nav, section, footer)
[ ] labels conectados a inputs
[ ] alt em imagens (se houver)
[ ] Código indentado e comentado
================================================================ -->

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Estrutura 🏗️	Professor pergunta: "O que vem primeiro, o esqueleto ou a pele?" "O HTML é o esqueleto. Sem ele, o site é uma ameba disforme. Hoje vocês vão construir a espinha dorsal da revolução. E não, não vale pular essa parte porque 'é chato'. É chato igual a base de um prédio. E sem base, o prédio cai."
5-10	Revisão Relâmpago de HTML ⚡	Revisão rápida das tags essenciais: `<!DOCTYPE>`, `<html>`, `<head>`, `<title>`, `<body>`, `<h1>` a `<h6>`, `<p>`, `<ul>`, `<ol>`, `<li>`, `<div>`. "Não é novidade, mas é FUNDAMENTAL. Quem não sabe isso, não passa da porta."
10-15	HTML Semântico A Nova Onda 🌊	Introdução às tags semânticas: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`. "Não é só para organizar é para que leitores de tela e mecanismos de busca entendam o que vocês estão fazendo. E se você não se importa com eles, por que eles se importariam com você?"
15-40	Construindo a Base 🔨	Cada grupo constrói a estrutura HTML do seu projeto. Devem incluir: cabeçalho com título, navegação, seção "Sobre", seção "Projeto" (com a funcionalidade principal), seção "Contato", rodapé. Professor circula, ajuda, provoca: "Onde fica a navegação? O que vem primeiro? Como você organiza isso? E a acessibilidade? Cadê o label do input?"
40-45	Revisão de Estrutura 🔍	Cada grupo troca de lugar com outro e revisa a estrutura HTML. "O que está faltando? O que está sobrando? O que está mal organizado? O que não é semântico? Seja cruel. A crítica construtiva é a que faz crescer."
45-48	Check-in Técnico 💻	"Como vocês estão se sentindo com o HTML? Confiantes? Perdidos? O HTML é a parte mais fácil e a mais importante. Se a estrutura estiver ruim, o resto desaba. E ninguém quer ver o castelo desabar."
48-50	Fechamento + Provocação 🚀	"A estrutura está pronta. Na semana que vem: CSS a maquiagem dos deuses. Vamos deixar isso bonito. Porque feio até funciona, mas bonito encanta. E encantamento move o mundo."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela (NVDA) para testar a estrutura; use fontes grandes e alto contraste; descreva a estrutura verbalmente; forneça o código em formato de áudio
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use legendas em vídeos tutoriais; utilize chat para dúvidas
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física; utilize editores de código com suporte a teclado
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física; minimize distrações
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos; forneça exemplos prontos para consulta
Altas Habilidades/Superdotação	Desafio extra: "Adicione microdados (schema.org) ao seu HTML para melhorar o SEO do projeto. Pesquise como fazer e implemente."

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

Critério	Descrição	Pontuação
Estrutura Básica	Criou a estrutura HTML completa com `<!DOCTYPE>`, `<html>`, `<head>`, `<body>`	0-2
Tags Semânticas	Usou tags semânticas (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`) corretamente	0-3
Organização	O código está indentado, organizado e com comentários claros	0-2
Conteúdo	Incluiu todas as seções necessárias (Sobre, Projeto, Contato, etc.)	0-2
Acessibilidade	Usou `alt` em imagens, `lang` no html, `label` conectado a inputs, etc.	0-1
Total		0-10

🎯 Título

"CSS: O Estilo da Revolução" Ou: como fazer seu projeto ficar bonito (ou caótico, se for a vibe) e não parecer que foi feito em 1995 (a menos que 1995 seja sua estética e aí, respeito)

🎯 Objetivos Operacionais

Compreender o papel do CSS na estilização e na experiência visual de uma página porque primeiro impacto é visual, e primeiro impacto é tudo
Aplicar seletores básicos (elemento, classe, ID) e propriedades essenciais (cor, fonte, espaçamento, borda, sombra, fundo, flexbox, grid)
Estilizar o projeto com personalidade que reflita a identidade da equipe. "Seu site tem que ter a cara de vocês. Não a cara do Bootstrap."
Aplicar CSS nas formas inline, interno e externo (arquivo .css) e saber quando usar cada um (spoiler: quase sempre externo)
Bônus: entender que CSS é arte com regras e regras foram feitas para serem quebradas (com consciência). Quebrar regra sem saber o que está fazendo não é rebeldia, é amadorismo.

📚 Conteúdo Programático

Revisão de CSS Sintaxe, seletores, propriedades, cascata e especificidade. "A cascata não é sua inimiga. Ela só quer que você entenda como ela funciona."
CSS Moderno Flexbox, Grid, variáveis CSS (--var), transições, animações. "Chega de float e clear isso é coisa do passado. Se você ainda usa float para layout, você está dirigindo um Fusca na Autobahn."
Design Responsivo @media queries para adaptação a diferentes tamanhos de tela. "Seu site tem que funcionar no celular. Ponto. Não é opção."
Design System Cores, tipografia, espaçamento, consistência visual. "A estética de um site não é sobre ser bonito é sobre ser COERENTE."
Personalização Como fazer o projeto ter a cara da equipe. "Copia cola é para quem não tem opinião. Vocês têm."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Reconhecimento de Padrões	Identificação do padrão `seletor { propriedade: valor; }` uma regra que se repete para cada elemento estilizado. "É um padrão. Decore ele. Use ele. Viva ele."
Decomposição	Dividir a estilização em partes isoladas: fonte, cor, espaçamento, borda, layout cada parte é resolvida separadamente. "Resolva um problema de cada vez. Não tente estilizar o mundo de uma vez."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
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.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
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.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO05	Utilizar, de forma crítica e criativa, diferentes recursos computacionais para construir soluções, respeitando princípios estéticos, éticos e de acessibilidade.

💻 Código Comentado

/* ================================================================
SEMANA 3 CSS: O ESTILO DA REVOLUÇÃO
"Primeiro impacto é visual. Faça valer."
================================================================ */

/* ================================================================
PASSO 1: VARIÁVEIS CSS O DESIGN SYSTEM
Defina suas cores e fontes UMA VEZ. Use em TODO LUGAR.
================================================================ */
:root {
  --cor-primaria: #2D2D44;      /* Roxo escuro sofisticação */
  --cor-secundaria: #6C63FF;    /* Roxo vibrante ação */
  --cor-destaque: #FF6B6B;      /* Vermelho alerta, urgência */
  --cor-sucesso: #4ECDC4;       /* Verde-água confiança */
  --cor-fundo: #F8F9FA;         /* Cinza claro base limpa */
  --cor-texto: #1A1A2E;         /* Quase preto legibilidade */

  --fonte-principal: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Montserrat', 'Segoe UI', sans-serif;

  --espacamento-padrao: 1rem;
  --espacamento-grande: 2rem;
  --raio-borda: 12px;
  --sombra-padrao: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ================================================================
PASSO 2: RESET Limpe antes de construir
================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* ↑ ESSENCIAL: faz com que padding e border não aumentem o tamanho do elemento.
     Sem isso, seu layout vai quebrar. SEMPRE. */
}

/* ================================================================
PASSO 3: ESTILOS GLOBAIS
================================================================ */
body {
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  padding: var(--espacamento-padrao);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ================================================================
PASSO 4: LAYOUT COM FLEXBOX "Flexbox é vida."
================================================================ */
header {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  color: white;
  padding: var(--espacamento-grande);
  border-radius: var(--raio-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--espacamento-grande);
  box-shadow: var(--sombra-padrao);
}
header h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  letter-spacing: -0.5px;
}

/* ================================================================
PASSO 5: NAVEGAÇÃO
================================================================ */
nav ul {
  display: flex;
  gap: var(--espacamento-padrao);
  list-style: none;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}
nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ================================================================
PASSO 6: SEÇÕES
================================================================ */
main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--espacamento-padrao);
}
section {
  background: white;
  padding: var(--espacamento-grande);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-padrao);
  margin-bottom: var(--espacamento-grande);
}
section h2 {
  font-family: var(--fonte-titulo);
  color: var(--cor-primaria);
  margin-bottom: var(--espacamento-padrao);
  border-bottom: 3px solid var(--cor-secundaria);
  padding-bottom: 0.5rem;
}

/* ================================================================
PASSO 7: FORMULÁRIO
================================================================ */
form {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento-padrao);
}
label {
  font-weight: 600;
}
input {
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}
input:focus {
  border-color: var(--cor-secundaria);
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}
button {
  background: var(--cor-secundaria);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}
button:hover {
  background: var(--cor-primaria);
  transform: scale(1.02);
}

/* ================================================================
PASSO 8: RESPONSIVIDADE @media QUERIES
================================================================ */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
    gap: var(--espacamento-padrao);
  }
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  section {
    padding: var(--espacamento-padrao);
  }
  button {
    align-self: stretch;
  }
}
@media (max-width: 480px) {
  body {
    padding: 0.5rem;
  }
  header h1 {
    font-size: 1.4rem;
  }
}

/* ================================================================
PASSO 9: UTILITÁRIOS
================================================================ */
.texto-centro {
  text-align: center;
}
.margem-grande {
  margin: var(--espacamento-grande) 0;
}
.oculto {
  display: none !important;
}

/* ================================================================
CHECKLIST DO CSS PERFEITO:
[ ] Reset com box-sizing: border-box
[ ] Variáveis CSS definidas
[ ] Layout com Flexbox ou Grid
[ ] Pelo menos uma transição ou animação
[ ] Pelo menos uma @media query
[ ] Cores consistentes (design system)
[ ] Código comentado e organizado
================================================================ */

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Impressiona 💄	Professor exibe um site "feio" (sem CSS) 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" mas uma maquiagem que FAZ DIFERENÇA. "Feio até funciona, mas bonito encanta. E encantamento vende. E vender muda o mundo."
5-10	Revisão Relâmpago de CSS ⚡	Revisão de seletores (elemento, classe, ID), propriedades essenciais (color, background, font, padding, margin, border), cascata e especificidade. "A cascata não é sua inimiga. Ela só quer que você entenda como ela funciona."
10-15	CSS Moderno Flexbox e Grid 🎨	Introdução ao Flexbox (para layouts flexíveis) e Grid (para layouts em grade). "Chega de `float` e `clear` isso é coisa do passado. Se você ainda usa `float` para layout, você está dirigindo um Fusca na Autobahn."
15-40	Operação Beleza 💅	Cada grupo estiliza seu projeto. Devem definir: paleta de cores, tipografia, espaçamento, layout (Flexbox/Grid), responsividade. Professor circula, ajuda, provoca: "Por que você escolheu essa cor? O que essa fonte diz sobre você? Isso é responsivo? E se eu diminuir a tela?"
40-45	Galeria dos Projetos Estilizados 🖼️	Cada grupo mostra seu projeto estilizado. A turma vota na "mais bonita", "mais criativa", "mais caótica (mas funcional)" e "mais coerente". "Design não é sobre ser bonito é sobre ser INTENCIONAL."
45-48	Check-in de Estilo 🎨	"Como vocês se sentem com o CSS? Satisfeitos? Querem mudar tudo? O CSS é a parte mais divertida e a mais viciante. É onde a personalidade aparece. Não tenham medo de ousar."
48-50	Fechamento + Provocação 🚀	"O estilo está pronto. Na semana que vem: JavaScript a mágica acontece. Vamos fazer isso ganhar VIDA. E quando algo ganha vida, tudo muda."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use alto contraste; use fontes grandes (mínimo 16px, preferencialmente 1.2rem); teste com leitores de tela; evite informações apenas por cor
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Adicione animações CSS com `@keyframes` e transições para surpreender o usuário. Crie um micro-interação em cada elemento interativo."

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

Critério	Descrição	Pontuação
Vínculo do CSS	Vinculou o arquivo `.css` ao HTML corretamente	0-2
Uso de Seletores	Aplicou os 3 tipos de seletor: elemento, classe e ID	0-2
Propriedades Essenciais	Usou pelo menos 5 propriedades diferentes (cor, fonte, padding, borda, etc.)	0-2
Layout Moderno	Usou Flexbox ou Grid para organizar o layout	0-2
Responsividade	Adicionou pelo menos uma regra `@media` para adaptar a página a telas menores	0-1
Personalização Criativa	A estilização tem personalidade, foge do padrão básico, é coerente e intencional	0-1
Total		0-10

🎯 Título

"JavaScript: A Mágica da Interatividade" Ou: como fazer seu projeto ganhar vida (e talvez falar com você e não, não é assustador, é só código. Mas código que faz coisas é basicamente magia.)

🎯 Objetivos Operacionais

Compreender o papel do JavaScript na interatividade e no comportamento dinâmico de uma página HTML é o esqueleto, CSS é a roupa, JS é o CÉREBRO
Utilizar variáveis, tipos de dados (string, number, boolean) e operadores a gramática básica da linguagem
Criar funções simples que executam ações porque função é a unidade básica de organização no JS
Manipular o HTML via JavaScript usando document.getElementById() e .innerHTML o primeiro contato com o DOM
Bônus: entender que errar é parte do processo e o console.log() é seu melhor amigo. Use-o. Abuse dele. Ele não vai te julgar.

📚 Conteúdo Programático

O que é JavaScript? A alma da página, o que torna um site vivo. "Sem JS, o site é um manequim bonito, mas morto."
Variáveis e Tipos var, let, const, string, number, boolean. "Cada variável é uma caixa. Coloque a coisa certa na caixa certa."
Funções Declaração, chamada, parâmetros, retorno. "Função é uma receita de bolo. Escreva uma vez, use várias."
Manipulação do DOM document.getElementById(), .innerHTML, .textContent. "Selecionar é poder. Modificar é controle."
Eventos Básicos onclick (introdução). "O clique é a interação mais básica. Domine ele, e o resto vem."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Algoritmos	Sequência lógica de passos que o computador executa ao clicar no botão uma função é um pequeno algoritmo. "Cada função é uma receita. O computador é seu sous-chef."
Decomposição	O problema "fazer algo acontecer" é decomposto em: (1) selecionar o elemento, (2) modificar seu conteúdo, (3) reagir ao evento. "Um passo de cada vez. É assim que se constrói."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
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.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
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 Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
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

// ================================================================
// SEMANA 4 JAVASCRIPT: A MÁGICA DA INTERATIVIDADE
// "HTML é o esqueleto, CSS é a roupa, JS é o CÉREBRO."
// ================================================================

// ================================================================
// PASSO 1: VARIÁVEIS As caixas onde guardamos as coisas
// ================================================================
let nomeDoUsuario = "Visitante";
let contadorDeCliques = 0;
const URL_BASE = "https://meusite.com";
const COR_PADRAO = "#6C63FF";

// Tipos de dados:
let texto = "Olá, mundo!";      // string texto
let numero = 42;                // number número
let estaLogado = false;         // boolean verdadeiro ou falso
let listaVazia = [];            // array lista (vamos ver na semana 7)

// ================================================================
// PASSO 2: console.log() Seu melhor amigo
// ================================================================
console.log("🚀 O JavaScript está funcionando!");
console.log("O nome do usuário é:", nomeDoUsuario);
console.log("Contador de cliques:", contadorDeCliques);

// ================================================================
// PASSO 3: FUNÇÕES Receitas que fazem coisas
// ================================================================
// Função que NÃO recebe parâmetros e NÃO retorna nada
function saudacaoSimples() {
  alert("Olá, visitante! Bem-vindo ao projeto.");
}

// Função que RECEBE parâmetros
function saudacaoPersonalizada(nome) {
  let mensagem = "Olá, " + nome + "! Seja bem-vindo!";
  console.log(mensagem);
  return mensagem;
}

// Função que faz algo com o DOM
function mudarTextoDoBotao() {
  let botao = document.getElementById("botaoPrincipal");
  if (botao) {
    botao.textContent = "Você clicou! 🎉";
    botao.style.backgroundColor = "#4ECDC4";
    botao.style.color = "white";
  } else {
    console.error("❌ Botão não encontrado! Verifique o ID.");
  }
}

// ================================================================
// PASSO 4: EVENTOS Quando o usuário interage
// ================================================================
// (onclick no HTML) / addEventListener (veremos na semana 6)

// ================================================================
// PASSO 5: EXEMPLO PRÁTICO Contador de Cliques
// ================================================================
let contador = 0;

function incrementarContador() {
  contador = contador + 1;
  let display = document.getElementById("displayContador");
  if (display) {
    display.textContent = "Cliques: " + contador;
  }
  console.log("Contador atual:", contador);
}

function resetarContador() {
  contador = 0;
  let display = document.getElementById("displayContador");
  if (display) {
    display.textContent = "Cliques: 0";
  }
  console.log("Contador resetado!");
}

// ================================================================
// PASSO 6: MANIPULAÇÃO DE STRINGS Texto é poder
// ================================================================
function mostrarMensagemPersonalizada() {
  let input = document.getElementById("nomeInput");
  if (!input) return;
  let nome = input.value;
  if (nome.trim() === "") {
    nome = "Visitante";
  }
  let mensagem = `Olá, ${nome}! Você está oficialmente na revolução. 🚀`;
  let mensagemElemento = document.getElementById("mensagemPersonalizada");
  if (mensagemElemento) {
    mensagemElemento.textContent = mensagem;
    mensagemElemento.style.color = "#6C63FF";
    mensagemElemento.style.fontWeight = "bold";
  }
}

// ================================================================
// PASSO 7: ESTRUTURAS CONDICIONAIS Tomando decisões
// ================================================================
function verificarIdade() {
  let input = document.getElementById("idadeInput");
  if (!input) return;
  let idade = Number(input.value);
  if (isNaN(idade) || idade <= 0) {
    alert("Por favor, digite uma idade válida.");
    return;
  }
  let resultado;
  if (idade < 18) {
    resultado = "Você é menor de idade. A revolução espera por você!";
  } else if (idade >= 18 && idade < 60) {
    resultado = "Você está no auge. A revolução precisa de você AGORA!";
  } else {
    resultado = "Você tem experiência. A revolução precisa da sua sabedoria!";
  }
  let elemento = document.getElementById("resultadoIdade");
  if (elemento) {
    elemento.textContent = resultado;
  }
}

// ================================================================
// CHECKLIST DO JS BÁSICO:
// [ ] Variáveis declaradas (let, const)
// [ ] Pelo menos uma função
// [ ] Uso de console.log() para debug
// [ ] Manipulação do DOM (getElementById + textContent/innerHTML)
// [ ] Pelo menos um evento (onclick ou addEventListener)
// [ ] Estrutura condicional (if/else)
// ================================================================
console.log("✅ JavaScript carregado com sucesso!");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Explode 💥	Professor pergunta: "O que faz um site ser VIVO? Não é o design bonito é a REAÇÃO. Cada clique, cada movimento, cada interação. Hoje vocês vão dar VIDA ao projeto. E quando algo ganha vida, tudo muda."
5-10	O que é JavaScript? 🧠	Explicação: "HTML é o esqueleto, CSS é a roupa, JS é o CÉREBRO. Sem JS, o site é um manequim bonito, mas morto. E manequim não muda o mundo."
10-15	Variáveis e Funções 📝	Demonstração rápida: `let nome = "João"; function saudacao() { alert("Olá, " + nome); }`. "É assim que a mágica começa. Uma variável, uma função, um clique e o mundo muda."
15-40	O Despertar ⚡	Cada grupo adiciona interatividade básica ao projeto: um botão que faz algo (mostra uma mensagem, muda uma cor, conta cliques, etc.). Professor circula, ajuda, provoca: "O que mais você quer que esse botão faça? O que seria LEGAL? O que seria ÚTIL? O que seria INESPERADO?"
40-45	Mostra de Interatividade 🎪	Cada grupo mostra o que seu botão faz. Risadas garantidas com as ideias criativas. "Quem tem o botão mais útil? Quem tem o botão mais criativo? Quem tem o botão mais CAÓTICO?"
45-48	Check-in de Vida 💫	"Como vocês se sentem vendo o projeto GANHAR VIDA? Empolgados? Querem fazer mais? O JS é viciante e vocês estão só começando. Daqui a pouco vocês vão querer fazer tudo com JS."
48-50	Fechamento + Provocação 🚀	"O projeto está vivo. Na semana que vem: DOM o controle remoto da página. Vocês vão poder manipular CADA PEDACINHO. E quando vocês controlarem cada pedacinho, vocês controlarão TUDO."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela; descreva o código verbalmente; use fontes grandes e alto contraste; utilize feedback sonoro para interações
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros; utilize mensagens na tela para todas as ações
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física; utilize editores com suporte a teclado
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Crie uma função que recebe parâmetros e retorna um valor use-a em diferentes lugares do projeto. Depois, crie uma função que chama outra função."

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

Critério	Descrição	Pontuação
Variáveis	Declarou variáveis corretamente (`let`, `const`)	0-2
Função	Criou pelo menos uma função que executa uma ação	0-3
Manipulação do DOM	Usou `document.getElementById()` e `.textContent` ou `.innerHTML`	0-3
Evento	Usou `onclick` ou `addEventListener` para reagir a um clique	0-2
Total		0-10

🎯 Título

"DOM: O Controle Remoto da Sua Página" Ou: como manipular cada pedacinho do seu projeto como um deus digital (com o poder de criar, modificar e destruir elementos e não, não é uma metáfora, é código de verdade)

🎯 Objetivos Operacionais

Compreender o DOM (Document Object Model) como uma árvore que representa a página HTML a árvore genealógica do seu site. Cada tag é um parente. Cada parente tem um papel.
Utilizar métodos de seleção: getElementById(), querySelector(), querySelectorAll() cada um com seu superpoder. Saber qual usar é o que separa os novatos dos mestres.
Modificar atributos, classes e estilos via JavaScript porque mudar a aparência dinamicamente é o que faz o site parecer vivo
Criar e remover elementos dinamicamente com createElement(), appendChild(), removeChild() você é o jardineiro dessa árvore. Plante, regue, pode. E às vezes, arranque pela raiz.
Bônus: você é o jardineiro dessa árvore regue com criatividade e pode com responsabilidade. Poder sem responsabilidade é só vandalismo digital.

📚 Conteúdo Programático

O que é o DOM? A representação da página em forma de árvore. "O DOM não é o HTML. O DOM é o que o navegador ENTENDE do HTML. São primos, não gêmeos."
Métodos de Seleção getElementById(), querySelector(), querySelectorAll(). "Cada ferramenta tem seu uso. Não use um martelo para apertar um parafuso."
Manipulação de Classes classList.add(), classList.remove(), classList.toggle(). "Classes são etiquetas. Coloque, tire, troque. É assim que você veste seu site."
Manipulação de Estilos element.style.propriedade = valor. "Estilo inline via JS é poderoso, mas use com moderação. É o tempero, não o prato principal."
Criação e Remoção createElement(), appendChild(), removeChild(), remove(). "Criar do nada é o superpoder máximo. Use para dar vida."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Abstração	O DOM abstrai a complexidade do navegador o programador interage com uma árvore lógica, não com o renderizador. "Você não precisa entender o motor do carro para dirigir. Mas se entender, dirige melhor."
Algoritmos	Sequência de passos para selecionar, modificar, criar e remover elementos cada ação é um pequeno algoritmo. "Selecionar → Modificar → Atualizar. Repita. É assim que se constrói."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
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.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP06	Analisar, em diferentes textos, os efeitos de sentido decorrentes do uso de recursos linguísticos e multissemióticos, considerando a função social e os efeitos de sentido pretendidos.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
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

// ================================================================
// SEMANA 5 DOM: O CONTROLE REMOTO DA SUA PÁGINA
// "O DOM é a árvore. Você é o jardineiro."
// ================================================================

console.log("🌳 DOM carregado. Pronto para manipulação.");

// ================================================================
// PASSO 2: MÉTODOS DE SELEÇÃO
// ================================================================
const tituloPrincipal = document.getElementById("titulo");
console.log("Título encontrado:", tituloPrincipal);

const primeiroBotao = document.querySelector(".botao-principal");
const formulario = document.querySelector("#formulario");
const primeiroParagrafo = document.querySelector("p");

const todosOsBotoes = document.querySelectorAll("button");
console.log(`Encontrados ${todosOsBotoes.length} botões`);

// ================================================================
// PASSO 3: MANIPULAÇÃO DE CLASSES
// ================================================================
function alternarTema() {
  const body = document.querySelector("body");
  if (!body) return;
  body.classList.toggle("tema-escuro");
  console.log("Tema alternado!");
}

function destacarElemento(id) {
  const elemento = document.getElementById(id);
  if (!elemento) {
    console.error(`❌ Elemento "${id}" não encontrado.`);
    return;
  }
  elemento.classList.add("destaque");
  setTimeout(() => {
    elemento.classList.remove("destaque");
  }, 2000);
}

// ================================================================
// PASSO 4: MANIPULAÇÃO DE ESTILOS
// ================================================================
function mudarCorFundo(cor) {
  const body = document.querySelector("body");
  if (body) {
    body.style.backgroundColor = cor;
  }
}

function animarBotao(id) {
  const botao = document.getElementById(id);
  if (!botao) return;
  botao.style.transform = "scale(1.1)";
  botao.style.transition = "transform 0.3s ease";
  botao.style.boxShadow = "0 8px 16px rgba(0,0,0,0.2)";
  setTimeout(() => {
    botao.style.transform = "scale(1)";
    botao.style.boxShadow = "none";
  }, 500);
}

// ================================================================
// PASSO 5: CRIAÇÃO DE ELEMENTOS
// ================================================================
function adicionarItemNaLista(texto) {
  const novoItem = document.createElement("li");
  novoItem.textContent = texto;
  novoItem.classList.add("item-lista");
  novoItem.style.padding = "0.5rem";
  const lista = document.getElementById("minhaLista");
  if (!lista) {
    console.error("❌ Lista não encontrada!");
    return;
  }
  lista.appendChild(novoItem);
  console.log(`✅ Item "${texto}" adicionado à lista.`);
}

function criarCard(titulo, conteudo) {
  const card = document.createElement("div");
  card.className = "card";
  const tituloEl = document.createElement("h3");
  tituloEl.textContent = titulo;
  const conteudoEl = document.createElement("p");
  conteudoEl.textContent = conteudo;
  const botaoEl = document.createElement("button");
  botaoEl.textContent = "Saiba mais";
  botaoEl.onclick = function() {
    alert(`Você clicou no card: ${titulo}`);
  };
  card.appendChild(tituloEl);
  card.appendChild(conteudoEl);
  card.appendChild(botaoEl);
  return card;
}

function adicionarCardNoContainer() {
  const container = document.getElementById("containerCards");
  if (!container) {
    console.error("❌ Container não encontrado!");
    return;
  }
  const novoCard = criarCard("Revolução Digital", "O futuro é codificado.");
  container.appendChild(novoCard);
}

// ================================================================
// PASSO 6: REMOÇÃO DE ELEMENTOS
// ================================================================
function removerUltimoItem() {
  const lista = document.getElementById("minhaLista");
  if (!lista) {
    console.error("❌ Lista não encontrada!");
    return;
  }
  if (lista.children.length === 0) {
    alert("A lista já está vazia!");
    return;
  }
  const ultimoItem = lista.lastElementChild;
  lista.removeChild(ultimoItem);
  console.log("🗑️ Último item removido.");
}

function removerElementoPorId(id) {
  const elemento = document.getElementById(id);
  if (!elemento) {
    console.error(`❌ Elemento "${id}" não encontrado.`);
    return;
  }
  elemento.remove();
  console.log(`🗑️ Elemento "${id}" removido.`);
}

// ================================================================
// PASSO 7: MANIPULAÇÃO DE ATRIBUTOS
// ================================================================
function alterarAtributos() {
  const imagem = document.getElementById("imagemExemplo");
  if (!imagem) return;
  const srcAtual = imagem.getAttribute("src");
  console.log("SRC atual:", srcAtual);
  imagem.setAttribute("src", "nova-imagem.jpg");
  imagem.setAttribute("alt", "Descrição da nova imagem");
}

// ================================================================
// PASSO 8: EXEMPLO PRÁTICO TODO LIST DINÂMICA
// ================================================================
let tarefas = [];

function adicionarTarefa() {
  const input = document.getElementById("inputTarefa");
  if (!input) return;
  const texto = input.value.trim();
  if (texto === "") {
    alert("Digite uma tarefa!");
    return;
  }
  tarefas.push(texto);
  const lista = document.getElementById("listaTarefas");
  if (!lista) return;
  const item = document.createElement("li");
  item.textContent = texto;
  const btnRemover = document.createElement("button");
  btnRemover.textContent = "✕";
  btnRemover.style.marginLeft = "1rem";
  btnRemover.onclick = function() {
    lista.removeChild(item);
    const index = tarefas.indexOf(texto);
    if (index > -1) {
      tarefas.splice(index, 1);
    }
    console.log("Tarefas restantes:", tarefas);
  };
  item.appendChild(btnRemover);
  lista.appendChild(item);
  input.value = "";
  input.focus();
  console.log(`✅ Tarefa "${texto}" adicionada. Total: ${tarefas.length}`);
}

// ================================================================
// CHECKLIST DO DOM:
// [ ] Selecionou elementos com getElementById / querySelector
// [ ] Manipulou classes com classList (add, remove, toggle)
// [ ] Manipulou estilos inline com style.propriedade
// [ ] Criou elementos com createElement + appendChild
// [ ] Removeu elementos com remove() ou removeChild
// [ ] Usou atributos (getAttribute, setAttribute)
// ================================================================
console.log("✅ DOM manipulador carregado. Poder ativado.");
console.log("⚠️ Com grandes poderes vêm grandes responsabilidades.");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Controla 🎮	Professor pergunta: "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. "O DOM é a árvore genealógica da página cada elemento é um parente. E vocês vão aprender a mandar em cada um deles."
5-10	O que é o DOM? 🌳	Explicação: "O DOM é a representação da página em forma de árvore. Cada tag é um nó. E você pode manipular CADA NÓ." Demonstração no DevTools: "Olhem aqui, no inspetor. Cada tag que vocês veem é um nó. E vocês vão poder mexer em todos eles."
10-15	Métodos de Seleção 🎯	Apresentação de `getElementById()`, `querySelector()`, `querySelectorAll()`. "Cada um tem seu uso escolha a ferramenta certa. `getElementById` é o mais rápido, `querySelector` é o mais flexível. Use com sabedoria."
15-40	Caça ao Elemento 🔍	Cada grupo pratica a manipulação do DOM no projeto: selecionar elementos, mudar cores, esconder/mostrar, criar novos elementos, remover elementos. Professor circula, ajuda, provoca: "E se você criasse um elemento NOVO? E se você removesse algo? E se você mudasse a classe de um elemento? E se você criasse algo que se autodestrói?"
40-45	Mostra de Manipulação 🎪	Cada grupo mostra o que conseguiu manipular. "Quem criou algo do nada? Quem escondeu algo? Quem mudou a cor de tudo? Quem fez algo que explode? (metaforicamente)"
45-48	Check-in de Poder ⚡	"Como vocês se sentem tendo CONTROLE sobre a página? Poderosos? Assustados? O DOM é um superpoder use com responsabilidade. Com grandes poderes vêm grandes responsabilidades. E a responsabilidade é fazer algo que valha a pena."
48-50	Fechamento + Provocação 🚀	"Agora vocês controlam a página. Na semana que vem: EVENTOS quando o usuário toca na tela. Vamos fazer o projeto REAGIR. E reagir é o que faz algo estar VIVO."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela; descreva a árvore DOM verbalmente; use fontes grandes e alto contraste; use feedback sonoro para manipulações
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros; use mensagens na tela
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física; utilize atalhos de teclado
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Crie um elemento que se autodestrói após 5 segundos e explique por que isso pode ser útil em um projeto real. Depois, crie um sistema que clona elementos infinitamente."

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

Critério	Descrição	Pontuação
Seleção de Elementos	Usou pelo menos 2 métodos diferentes de seleção (`getElementById`, `querySelector`, `querySelectorAll`)	0-2
Manipulação de Estilos	Modificou estilos inline ou classes com `classList`	0-2
Criação Dinâmica	Criou pelo menos 1 elemento com `createElement` e `appendChild`	0-2
Remoção de Elementos	Removeu elementos com `removeChild` ou `remove()`	0-1
Feedback ao Usuário	O código fornece feedback visual (mensagem, cores) ao usuário	0-1
Bônus: Criatividade	Fez algo além do esperado (animações, clones, etc.)	0-2
Total		0-10

🎯 Título

"Eventos: Quando o Usuário Toca na Tela" Ou: como fazer seu projeto reagir a cliques, teclas e (quem sabe) respirações e não, não é mágica, é só código bem escrito. Mas código bem escrito parece mágica.

🎯 Objetivos Operacionais

Compreender o que são eventos e por que eles são a ponte entre o usuário e a máquina a interface onde o humano encontra o digital
Utilizar addEventListener() a forma moderna, flexível e recomendada de escutar eventos. "Esqueça onclick no HTML. Isso é coisa do passado. O futuro é addEventListener."
Dominar eventos essenciais: click, keydown, mouseover, mouseout cada um abre uma porta diferente de interação
Adicionar eventos completos ao projeto interação com o usuário em múltiplas frentes. "Um site que não reage é um cartaz. E cartaz não convence ninguém."
Bônus: eventos são a alma da interatividade trate-os com respeito. Eles são a voz do usuário no seu código.

📚 Conteúdo Programático

O que são eventos? Interações do usuário que disparam ações. "Evento é tudo o que o usuário FAZ. Clique, tecla, movimento, gesto. Se o usuário fez, é evento."
Tipos de Eventos click, keydown, keyup, mouseover, mouseout, mouseenter, mouseleave. "Cada evento tem sua personalidade. Conheça todos."
addEventListener() A forma moderna e recomendada. "Não use onclick no HTML. Isso é 2010. Estamos em 2026."
O Objeto event Informações sobre o evento (qual tecla, posição do mouse, elemento alvo). "O evento traz dados. Use esses dados."
Eventos no Projeto Como integrar eventos ao projeto de cada grupo. "Teoria é legal, mas PRÁTICA é o que importa."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Decomposição	Cada interação (clique, tecla, mouse) é decomposta em: (1) detectar o evento, (2) executar a ação, (3) atualizar a interface. "Detectar → Processar → Reagir. É o ciclo da vida digital."
Algoritmos	Cada evento segue uma sequência lógica: ouvir → processar → reagir. "Não é aleatório. É algorítmico. E algoritmo é ordem no caos."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
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:

Código	Habilidade
EM13LP07	Analisar, em textos de diferentes gêneros, marcas que expressam a posição do enunciador frente àquilo que é dito.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO02	Construir soluções computacionais para problemas do cotidiano, de forma autônoma e colaborativa, utilizando linguagens de programação.

💻 Código Comentado

// ================================================================
// SEMANA 6 EVENTOS: QUANDO O USUÁRIO TOCA NA TELA
// "Detectar → Processar → Reagir. O ciclo da vida digital."
// ================================================================

console.log("👂 Ouvindo eventos. Pronto para reagir.");

// ================================================================
// PASSO 2: addEventListener()
// ================================================================
const botaoAlerta = document.getElementById("botaoAlerta");
if (botaoAlerta) {
  botaoAlerta.addEventListener('click', function() {
    alert("Você clicou no botão! 🚀");
  });
}

function mostrarMensagem() {
  console.log("Botão clicado!");
  const mensagem = document.getElementById("mensagemEvento");
  if (mensagem) {
    mensagem.textContent = "Evento detectado! O botão foi clicado.";
    mensagem.style.color = "#6C63FF";
  }
}
const botaoMensagem = document.getElementById("botaoMensagem");
if (botaoMensagem) {
  botaoMensagem.addEventListener('click', mostrarMensagem);
}

// ================================================================
// PASSO 3: O OBJETO EVENT
// ================================================================
const botaoInfo = document.getElementById("botaoInfo");
if (botaoInfo) {
  botaoInfo.addEventListener('click', function(evento) {
    console.log("Tipo do evento:", evento.type);
    console.log("Elemento alvo:", evento.target);
    console.log("Coordenadas X:", evento.clientX);
    console.log("Coordenadas Y:", evento.clientY);
    console.log("Botão do mouse:", evento.button);
    const info = document.getElementById("infoEvento");
    if (info) {
      info.innerHTML = `
        Evento: ${evento.type}

        Elemento: ${evento.target.tagName}

        Posição: (${evento.clientX}, ${evento.clientY})
      `;
    }
  });
}

// ================================================================
// PASSO 4: EVENTOS DE TECLADO
// ================================================================
const inputTeclado = document.getElementById("inputTeclado");
if (inputTeclado) {
  inputTeclado.addEventListener('keydown', function(evento) {
    console.log(`Tecla pressionada: ${evento.key} (código: ${evento.code})`);
    if (evento.key === 'Enter') {
      console.log("ENTER pressionado! Processando...");
      evento.preventDefault();
      const valor = evento.target.value;
      alert(`Você digitou: "${valor}" e pressionou Enter!`);
      evento.target.value = "";
    }
  });
  inputTeclado.addEventListener('keyup', function(evento) {
    const preview = document.getElementById("previewTeclado");
    if (preview) {
      preview.textContent = `Digitando: ${evento.target.value || "(vazio)"}`;
    }
  });
}

document.addEventListener('keydown', function(evento) {
  if (evento.ctrlKey && evento.shiftKey && evento.key === 'R') {
    evento.preventDefault();
    alert("Atalho ativado! Revolução em andamento. 🚀");
  }
});

// ================================================================
// PASSO 5: EVENTOS DE MOUSE
// ================================================================
const elementoMouse = document.getElementById("elementoMouse");
if (elementoMouse) {
  elementoMouse.addEventListener('mouseover', function(evento) {
    this.style.backgroundColor = "#6C63FF";
    this.style.color = "white";
    this.textContent = "🐭 O mouse está AQUI!";
    console.log("Mouse entrou no elemento");
  });
  elementoMouse.addEventListener('mouseout', function() {
    this.style.backgroundColor = "#f0f0f0";
    this.style.color = "#333";
    this.textContent = "Passe o mouse aqui 👆";
    console.log("Mouse saiu do elemento");
  });
}

// ================================================================
// PASSO 6: EVENTOS DE FORMULÁRIO
// ================================================================
const formularioEvento = document.getElementById("formularioEvento");
if (formularioEvento) {
  formularioEvento.addEventListener('submit', function(evento) {
    evento.preventDefault();
    console.log("Formulário enviado!");
    const nome = document.getElementById("nomeForm")?.value || "";
    const email = document.getElementById("emailForm")?.value || "";
    if (nome.trim() === "" || email.trim() === "") {
      alert("Preencha todos os campos!");
      return;
    }
    alert(`Formulário enviado com sucesso!\nNome: ${nome}\nEmail: ${email}`);
    formularioEvento.reset();
  });
}

// ================================================================
// PASSO 7: DELEGAÇÃO DE EVENTOS
// ================================================================
const listaDelegacao = document.getElementById("listaDelegacao");
if (listaDelegacao) {
  listaDelegacao.addEventListener('click', function(evento) {
    const item = evento.target.closest('li');
    if (item) {
      alert(`Você clicou no item: ${item.textContent}`);
      item.style.backgroundColor = "#FF6B6B";
      setTimeout(() => {
        item.style.backgroundColor = "";
      }, 500);
    }
  });
}

// ================================================================
// PASSO 8: EVENTOS COM TIMER
// ================================================================
function agendarAcao() {
  console.log("Ação agendada para 3 segundos...");
  setTimeout(() => {
    alert("⏰ 3 segundos se passaram! Ação executada.");
  }, 3000);
}

let contadorIntervalo = 0;
const intervalo = setInterval(() => {
  contadorIntervalo++;
  console.log(`⏱️ Intervalo executado ${contadorIntervalo} vezes`);
  if (contadorIntervalo >= 5) {
    clearInterval(intervalo);
    console.log("⏹️ Intervalo parado.");
  }
}, 1000);

// ================================================================
// PASSO 9: EXEMPLO PRÁTICO JOGO DE CLIQUE
// ================================================================
let pontos = 0;
let jogoAtivo = false;

function iniciarJogo() {
  jogoAtivo = true;
  pontos = 0;
  atualizarPlacar();
  const botaoAlvo = document.getElementById("botaoAlvo");
  if (botaoAlvo) {
    botaoAlvo.style.display = "block";
    botaoAlvo.textContent = "Clique aqui! 🎯";
    botaoAlvo.style.backgroundColor = "#4ECDC4";
  }
  console.log("Jogo iniciado!");
}

function clicarAlvo() {
  if (!jogoAtivo) return;
  pontos++;
  atualizarPlacar();
  const botao = document.getElementById("botaoAlvo");
  if (botao) {
    const maxX = window.innerWidth - 150;
    const maxY = window.innerHeight - 150;
    const x = Math.random() * maxX;
    const y = Math.random() * maxY;
    botao.style.position = "fixed";
    botao.style.left = x + "px";
    botao.style.top = y + "px";
    const cores = ["#FF6B6B", "#4ECDC4", "#6C63FF", "#FFD93D", "#FF8A5C"];
    botao.style.backgroundColor = cores[Math.floor(Math.random() * cores.length)];
  }
}

function atualizarPlacar() {
  const placar = document.getElementById("placarJogo");
  if (placar) {
    placar.textContent = `Pontos: ${pontos}`;
  }
}

function finalizarJogo() {
  jogoAtivo = false;
  const botaoAlvo = document.getElementById("botaoAlvo");
  if (botaoAlvo) {
    botaoAlvo.style.display = "none";
  }
  alert(`Fim de jogo! Você fez ${pontos} pontos! 🏆`);
}

// ================================================================
// CHECKLIST DOS EVENTOS:
// [ ] Usou addEventListener (não onclick no HTML)
// [ ] Implementou evento de click
// [ ] Implementou evento de teclado (keydown/keyup)
// [ ] Implementou evento de mouse (mouseover/mouseout)
// [ ] Usou o objeto evento (evento.target, evento.key, etc.)
// [ ] Aplicou eventos ao projeto da equipe
// ================================================================
console.log("✅ Eventos configurados. O usuário agora tem voz.");
console.log("🎮 Jogo de clique disponível. Use 'iniciarJogo()' para começar.");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Reage 👆	Professor pergunta: "O que faz um site ser INTERATIVO? Não é o design é a REAÇÃO. Cada clique, cada tecla, cada movimento do mouse é um EVENTO. E vocês vão aprender a dominar TODOS ELES. O usuário toca, o site responde. É o diálogo entre humano e máquina."
5-10	O que são Eventos? 📡	Explicação: "Eventos são sinais que o navegador dispara quando o usuário interage. `onclick` é o velho, `addEventListener` é o novo e é MELHOR. Esqueça `onclick` no HTML. Isso é 2010. Estamos em 2026."
10-15	Tipos de Eventos 📋	Apresentação dos principais eventos: `click`, `keydown`, `mouseover`, `mouseout`. "Cada um tem seu uso escolha o certo para o que você quer fazer. E lembre-se: o evento traz dados com ele. Use esses dados."
15-40	A Hora do Clique 🖱️	Cada grupo adiciona eventos completos ao projeto: cliques em botões, teclas pressionadas, mouse passando por cima de elementos. Professor circula, ajuda, provoca: "O que acontece quando o usuário clica AQUI? E se ele passar o mouse ALI? E se ele apertar ENTER? E se ele fizer CTRL+SHIFT+R?"
40-45	Mostra de Eventos 🎪	Cada grupo mostra o que seus eventos fazem. "Quem tem o evento mais criativo? Quem tem o evento mais útil? Quem tem o evento mais CAÓTICO? Quem fez um jogo com eventos?"
45-48	Check-in de Interação 🎮	"Como vocês se sentem vendo o projeto REAGIR a vocês? É como dar vida a uma criatura e vocês são os criadores. Cada reação é uma prova de que o código está vivo."
48-50	Fechamento + Provocação 🚀	"O projeto agora REAGE. Na semana que vem: DADOS E ARRAYS a biblioteca do caos. Vamos organizar a bagunça. Porque dados bagunçados são inúteis. Dados organizados são poder."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use feedback sonoro ou tátil para eventos; descreva as interações verbalmente; use mensagens de áudio para ações
Deficiência Auditiva	Use feedback visual para todos os eventos (mudança de cor, animação, mensagem na tela)
Deficiência Motora	Garanta navegação por teclado; use atalhos de teclado; botões com tamanho adequado (mínimo 44px); garanta que eventos de mouse tenham equivalentes de teclado
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Implemente um evento de `keydown` que executa uma ação diferente para cada tecla pressionada. Crie um 'modo desenvolvedor' com atalhos secretos."

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

Critério	Descrição	Pontuação
Uso de addEventListener	Utilizou `addEventListener` para pelo menos 3 eventos diferentes (click, keydown, mouseover, etc.)	0-3
Eventos de Clique	Implementou eventos de clique em botões ou elementos	0-2
Eventos de Teclado	Implementou pelo menos 1 evento de teclado (keydown, keyup)	0-2
Eventos de Mouse	Implementou pelo menos 1 evento de mouse (mouseover, mouseout)	0-1
Feedback ao Usuário	O código fornece feedback visual para todas as interações	0-1
Bônus: Criatividade	Fez algo além do esperado com eventos (jogo, atalhos, animações)	0-1
Total		0-10

🎯 Título

"Dados e Arrays: A Biblioteca da Revolução" Ou: como organizar a bagunça dos seus dados em listas que fazem sentido (e não deixar tudo virar um caos porque caos é inimigo da revolução)

🎯 Objetivos Operacionais

Compreender o conceito de arrays (listas) como estruturas para armazenar e organizar dados a caixa de ferramentas do programador
Utilizar métodos fundamentais: push(), pop(), shift(), unshift(), splice(), length cada um com sua função, cada um com seu momento
Percorrer arrays com forEach() e for porque dados parados não servem para nada. Dados percorridos viram informação.
Implementar arrays no projeto para gerenciar dados (lista de tarefas, itens, posts, etc.) transformar teoria em prática
Bônus: arrays são caixas de ferramentas mantenha a sua organizada. Uma caixa de ferramentas bagunçada é inútil. Uma organizada é poder.

📚 Conteúdo Programático

O que são Arrays? Listas ordenadas de valores (números, strings, objetos, etc.). "Array é uma lista. E lista é organização. E organização é poder."
Criação e Acesso [], acesso por índice (base 0), .length. "Lembre-se: o primeiro é 0. O segundo é 1. Isso confunde todo mundo no começo. Depois vira natural."
Métodos Essenciais push(), pop(), unshift(), shift(), splice(). "Cada método é uma ferramenta. Use a certa para o trabalho certo."
Percorrendo Arrays forEach(), for. "Percorrer é como folhear um livro. Você vai página por página, vendo cada item."
Arrays no Projeto Como usar arrays para gerenciar dados no projeto. "Dados sem estrutura são ruído. Arrays dão estrutura ao ruído."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Abstração	O array abstrai a complexidade de gerenciar múltiplos dados em vez de variáveis soltas, temos uma lista estruturada. "Em vez de 20 variáveis, um array. Muito mais limpo."
Reconhecimento de Padrões	O padrão de manipulação de listas (adicionar, remover, percorrer) se repete em diversos contextos. "Uma vez que você aprende a mexer em um array, você sabe mexer em todos."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT304	Analisar e construir modelos matemáticos para descrever fenômenos e situações do cotidiano, utilizando funções, equações e inequações, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP08	Produzir textos de diferentes gêneros, com adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO05	Utilizar, de forma crítica e criativa, diferentes recursos computacionais para construir soluções.

💻 Código Comentado

// ================================================================
// SEMANA 7 DADOS E ARRAYS: A BIBLIOTECA DA REVOLUÇÃO
// "Dados sem estrutura são ruído. Arrays dão estrutura ao ruído."
// ================================================================

// ================================================================
// PASSO 1: O QUE SÃO ARRAYS?
// ================================================================
const listaVazia = [];
const frutas = ["Maçã", "Banana", "Laranja", "Uva"];
console.log("Frutas:", frutas);
console.log("Primeira fruta:", frutas[0]);
console.log("Última fruta:", frutas[frutas.length - 1]);
console.log("Total de frutas:", frutas.length);

const misturado = ["Texto", 42, true, null, { nome: "João" }];
console.log("Array misturado:", misturado);

// ================================================================
// PASSO 2: MÉTODOS DE ADIÇÃO
// ================================================================
const tarefas = [];
tarefas.push("Estudar JavaScript");
tarefas.push("Fazer o projeto");
tarefas.push("Revisar o código");
console.log("Tarefas (após push):", tarefas);
tarefas.unshift("Tomar café");
console.log("Tarefas (após unshift):", tarefas);

// ================================================================
// PASSO 3: MÉTODOS DE REMOÇÃO
// ================================================================
const ultimaTarefa = tarefas.pop();
console.log("Tarefa removida (pop):", ultimaTarefa);
console.log("Tarefas (após pop):", tarefas);
const primeiraTarefa = tarefas.shift();
console.log("Tarefa removida (shift):", primeiraTarefa);
console.log("Tarefas (após shift):", tarefas);

// ================================================================
// PASSO 4: MÉTODOS DE MANIPULAÇÃO
// ================================================================
const numeros = [10, 20, 30, 40, 50];
console.log("Numeros original:", numeros);
const removido = numeros.splice(2, 1);
console.log("Elemento removido:", removido);
console.log("Numeros após splice:", numeros);
numeros.splice(2, 0, 35, 36);
console.log("Numeros após adição:", numeros);
numeros.splice(3, 2, 37, 38);
console.log("Numeros após substituição:", numeros);

// ================================================================
// PASSO 5: PERCORRENDO ARRAYS
// ================================================================
const cores = ["Vermelho", "Azul", "Verde", "Amarelo"];
console.log("=== forEach ===");
cores.forEach(function(cor, indice) {
  console.log(`Cor ${indice + 1}: ${cor}`);
});
console.log("=== forEach (arrow) ===");
cores.forEach((cor, indice) => {
  console.log(`${indice}: ${cor}`);
});
console.log("=== for loop ===");
for (let i = 0; i < cores.length; i++) {
  console.log(`Índice ${i}: ${cores[i]}`);
}
console.log("=== for...of ===");
for (const cor of cores) {
  console.log(cor);
}

// ================================================================
// PASSO 6: MÉTODOS ÚTEIS
// ================================================================
const numeros2 = [5, 12, 8, 130, 44, 8];
const posicao = numeros2.indexOf(8);
console.log(`Índice do 8: ${posicao}`);
console.log(`Índice do 99: ${numeros2.indexOf(99)}`);
console.log(`Tem 44? ${numeros2.includes(44)}`);
console.log(`Tem 100? ${numeros2.includes(100)}`);
const maioresQue10 = numeros2.filter(function(numero) {
  return numero > 10;
});
console.log("Maiores que 10:", maioresQue10);
const dobrados = numeros2.map(function(numero) {
  return numero * 2;
});
console.log("Dobrados:", dobrados);
const desordenado = [3, 1, 4, 1, 5, 9, 2];
desordenado.sort();
console.log("Ordenado (string):", desordenado);
const numeros3 = [3, 1, 4, 1, 5, 9, 2];
numeros3.sort((a, b) => a - b);
console.log("Ordenado (numérico):", numeros3);

// ================================================================
// PASSO 7: ARRAYS DE OBJETOS
// ================================================================
const usuarios = [
  { id: 1, nome: "Ana", idade: 17 },
  { id: 2, nome: "Bruno", idade: 18 },
  { id: 3, nome: "Carla", idade: 16 },
  { id: 4, nome: "Daniel", idade: 19 }
];
usuarios.forEach(usuario => {
  console.log(`${usuario.nome} tem ${usuario.idade} anos`);
});
const maioresDeIdade = usuarios.filter(usuario => usuario.idade >= 18);
console.log("Maiores de idade:", maioresDeIdade);
const usuarioEncontrado = usuarios.find(usuario => usuario.id === 3);
console.log("Usuário ID 3:", usuarioEncontrado);

// ================================================================
// PASSO 8: EXEMPLO PRÁTICO Lista de Tarefas com Array
// ================================================================
let listaTarefas = [];

function adicionarTarefa(descricao, prioridade = "normal") {
  const novaTarefa = {
    id: Date.now(),
    descricao: descricao,
    prioridade: prioridade,
    concluida: false,
    dataCriacao: new Date().toLocaleString()
  };
  listaTarefas.push(novaTarefa);
  console.log(`✅ Tarefa adicionada: "${descricao}"`);
  return novaTarefa;
}

function listarTarefas() {
  if (listaTarefas.length === 0) {
    console.log("📭 Nenhuma tarefa cadastrada.");
    return;
  }
  console.log("=== LISTA DE TAREFAS ===");
  listaTarefas.forEach((tarefa, indice) => {
    const status = tarefa.concluida ? "✅" : "⬜";
    console.log(`${indice + 1}. ${status} ${tarefa.descricao} (${tarefa.prioridade})`);
  });
  console.log(`Total: ${listaTarefas.length} tarefas`);
}

function concluirTarefa(id) {
  const tarefa = listaTarefas.find(t => t.id === id);
  if (tarefa) {
    tarefa.concluida = true;
    console.log(`✅ Tarefa "${tarefa.descricao}" concluída!`);
  } else {
    console.log(`❌ Tarefa com ID ${id} não encontrada.`);
  }
}

function removerTarefa(id) {
  const indice = listaTarefas.findIndex(t => t.id === id);
  if (indice !== -1) {
    const removida = listaTarefas.splice(indice, 1)[0];
    console.log(`🗑️ Tarefa "${removida.descricao}" removida.`);
  } else {
    console.log(`❌ Tarefa com ID ${id} não encontrada.`);
  }
}

function filtrarPorPrioridade(prioridade) {
  const filtradas = listaTarefas.filter(t => t.prioridade === prioridade);
  console.log(`Tarefas com prioridade "${prioridade}":`, filtradas);
  return filtradas;
}

// ================================================================
// PASSO 9: INTEGRANDO COM O DOM
// ================================================================
function renderizarTarefasNoDOM() {
  const container = document.getElementById("containerTarefas");
  if (!container) {
    console.warn("⚠️ Container de tarefas não encontrado.");
    return;
  }
  container.innerHTML = "";
  if (listaTarefas.length === 0) {
    container.innerHTML = "Nenhuma tarefa cadastrada.";
    return;
  }
  const ul = document.createElement("ul");
  ul.className = "lista-tarefas";
  listaTarefas.forEach(tarefa => {
    const li = document.createElement("li");
    li.className = tarefa.concluida ? "concluida" : "pendente";
    li.innerHTML = `
      ${tarefa.descricao}
      (${tarefa.prioridade})
      
      
    `;
    ul.appendChild(li);
  });
  container.appendChild(ul);
}

// ================================================================
// CHECKLIST DOS ARRAYS:
// [ ] Criou um array (com dados ou vazio)
// [ ] Usou push() e/ou unshift() para adicionar
// [ ] Usou pop() e/ou shift() para remover
// [ ] Usou splice() para manipular posições específicas
// [ ] Percorreu o array com forEach() ou for
// [ ] Usou filter(), map(), find() ou includes()
// [ ] Integrou arrays com o DOM (exibiu dados na tela)
// ================================================================
console.log("✅ Arrays carregados. Dados organizados.");
console.log("📊 Use as funções para gerenciar tarefas:");
console.log(" - adicionarTarefa(descricao, prioridade)");
console.log(" - listarTarefas()");
console.log(" - concluirTarefa(id)");
console.log(" - removerTarefa(id)");
console.log(" - filtrarPorPrioridade(prioridade)");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Organiza 📚	Professor pergunta: "Quem aqui já perdeu uma tarefa importante porque anotou num papel e perdeu? E se a gente construísse um sistema que NUNCA perde nada? Com arrays, a gente pode guardar, organizar e manipular dados como num passe de mágica. Dados organizados são poder. Dados bagunçados são só barulho."
5-10	O que são Arrays? 📦	Explicação: "Arrays são listas ordenadas. Cada item tem um número (índice). O primeiro é 0, o segundo é 1, e assim por diante. É como uma caixa de ferramentas com divisórias. Cada ferramenta no seu lugar."
10-15	Métodos Essenciais 🛠️	Demonstração de `push()`, `pop()`, `unshift()`, `shift()`, `splice()`, `length`. "`push` coloca no final, `pop` tira do final são como uma pilha de pratos. `unshift` coloca no início, `shift` tira do início como uma fila de banco. E `splice` é o canivete suíço: faz tudo."
15-40	Organizando o Caos 📋	Cada grupo implementa arrays no projeto para gerenciar dados: lista de tarefas, itens, posts, etc. Devem usar `push`, `pop`, `shift`, `unshift` e percorrer com `forEach`. Professor circula, ajuda, provoca: "O que mais você pode guardar num array? Como você pode exibir isso na tela? E se você adicionar um item? E se você remover? E se você filtrar?"
40-45	Mostra de Arrays 🎪	Cada grupo mostra como usou arrays no projeto. "Quem tem o array mais útil? Quem tem o array mais criativo? Quem tem o array mais CAÓTICO (mas que funciona)? Quem usou objetos dentro do array?"
45-48	Check-in de Organização 📊	"Como vocês se sentem organizando dados com arrays? É como ter uma biblioteca pessoal e vocês são os bibliotecários. Dados organizados são a base de qualquer sistema que presta."
48-50	Fechamento + Provocação 🚀	"Os dados estão organizados. Na semana que vem: FUNÇÕES o exército da revolução. Vamos modularizar o código e deixar tudo mais limpo. Porque código limpo é código que não dá dor de cabeça."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela; descreva os arrays verbalmente; use fontes grandes e alto contraste; use feedback sonoro para manipulações
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Crie um array de objetos cada objeto com múltiplas propriedades e exiba-os na tela de forma organizada. Depois, implemente ordenação por diferentes critérios."

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

Critério	Descrição	Pontuação
Criação do Array	Criou um array para armazenar dados no projeto	0-2
Métodos de Adição	Utilizou `push` e/ou `unshift` para adicionar itens	0-2
Métodos de Remoção	Utilizou `pop` e/ou `shift` para remover itens	0-2
Percorrimento	Usou `forEach` ou `for` para percorrer o array e exibir dados	0-2
Manipulação do DOM	Atualizou a interface com base nos dados do array	0-2
Total		0-10

🎯 Título

"Funções: O Exército da Revolução" Ou: como ensinar seu código a fazer truques novos sem repetir a mesma coisa 500 vezes (e sem enlouquecer no processo porque código repetido é o caminho mais curto para o inferno do desenvolvedor)

🎯 Objetivos Operacionais

Compreender o conceito de funções como blocos de código reutilizáveis a unidade básica de organização no JavaScript. "Função é uma receita de bolo. Escreva uma vez, use várias."
Criar funções com parâmetros e retorno de valores porque função que não recebe nada e não devolve nada é igual a um grito no vazio
Utilizar funções para organizar e modularizar o código do projeto transformar um macarrão em uma obra de arte
Refatorar o código do projeto para usar funções porque código refatorado é código que você não tem vergonha de mostrar
Bônus: funções são os blocos de construção sem elas, o código vira um macarrão. E macarrão é gostoso de comer, mas horrível de programar.

📚 Conteúdo Programático

O que são Funções? Sub-rotinas que realizam uma tarefa específica. "Uma função é uma máquina. Você coloca algo nela, ela processa, e devolve algo. Ou não. Mas o importante é que ela FAZ algo."
Anatomia de uma Função function nome(parâmetros) { corpo }. "Nome, parâmetros, corpo. É a trindade da função."
Parâmetros vs Argumentos O que a função espera vs o que é passado. "Parâmetro é o que a função espera. Argumento é o que você dá a ela. São namorados, mas não são a mesma coisa."
Retorno return o que a função devolve. "Sem return, a função devolve undefined. E undefined não serve para quase nada."
Refatoração Como transformar código repetido em funções reutilizáveis. "Código repetido é código que você vai ter que corrigir em 5 lugares quando algo quebrar. Não seja essa pessoa."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Algoritmos	Cada função é um pequeno algoritmo recebe entradas, processa, retorna saída. "Uma função é um algoritmo em miniatura. E algoritmos são a base de tudo."
Decomposição	O problema "fazer o projeto funcionar" é decomposto em funções menores e especializadas. "Dividir para conquistar. Cada função resolve um pedaço do problema."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT401	Aplicar conceitos matemáticos (funções, equações, gráficos, etc.) na compreensão e resolução de problemas de outras áreas do conhecimento, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP09	Produzir textos de diferentes gêneros, com adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO07	Planejar e executar projetos de desenvolvimento de software, considerando aspectos como usabilidade, acessibilidade, ética e sustentabilidade.

💻 Código Comentado

// ================================================================
// SEMANA 8 FUNÇÕES: O EXÉRCITO DA REVOLUÇÃO
// "Função é uma receita de bolo. Escreva uma vez, use várias."
// ================================================================

console.log("🧠 Funções carregadas. Prontas para serem usadas.");

// ================================================================
// PASSO 2: ANATOMIA DE UMA FUNÇÃO
// ================================================================
function saudacao() {
  console.log("Olá, revolucionário! 🚀");
}
saudacao();

function saudacaoPersonalizada(nome) {
  console.log(`Olá, ${nome}! A revolução precisa de você.`);
}
saudacaoPersonalizada("Ana");

function calcularDobro(numero) {
  return numero * 2;
}
const resultado = calcularDobro(10);
console.log("O dobro de 10 é:", resultado);

function calcularMedia(nota1, nota2, nota3) {
  const soma = nota1 + nota2 + nota3;
  const media = soma / 3;
  return media;
}
const mediaAluno = calcularMedia(7, 8, 9);
console.log("Média do aluno:", mediaAluno);

// ================================================================
// PASSO 3: PARÂMETROS VS ARGUMENTOS
// ================================================================
function saudacaoCompleta(nome, saudacao = "Olá") {
  return `${saudacao}, ${nome}!`;
}
console.log(saudacaoCompleta("Maria"));
console.log(saudacaoCompleta("João", "Bem-vindo"));

function potencia(base, expoente = 2) {
  return Math.pow(base, expoente);
}
console.log(potencia(3));
console.log(potencia(3, 3));

// ================================================================
// PASSO 4: ESCOPO DE VARIÁVEIS
// ================================================================
let variavelGlobal = "Estou em todo lugar!";
function exemploEscopo() {
  let variavelLocal = "Estou só dentro da função!";
  console.log("Dentro da função:");
  console.log("- Global:", variavelGlobal);
  console.log("- Local:", variavelLocal);
}
exemploEscopo();
console.log("Fora da função:");
console.log("- Global:", variavelGlobal);
// console.log(variavelLocal); // ERRO!

// ================================================================
// PASSO 5: FUNÇÕES COM RETORNO
// ================================================================
function calcularIMC(peso, altura) {
  const imc = peso / (altura * altura);
  return imc;
}
function classificarIMC(imc) {
  if (imc < 18.5) return "Abaixo do peso";
  if (imc < 25) return "Peso normal";
  if (imc < 30) return "Sobrepeso";
  if (imc < 35) return "Obesidade grau I";
  if (imc < 40) return "Obesidade grau II";
  return "Obesidade grau III";
}
function avaliarPeso(peso, altura) {
  const imc = calcularIMC(peso, altura);
  const classificacao = classificarIMC(imc);
  return `IMC: ${imc.toFixed(1)} ${classificacao}`;
}
console.log(avaliarPeso(70, 1.75));

// ================================================================
// PASSO 6: FUNÇÕES QUE CHAMAM OUTRAS FUNÇÕES
// ================================================================
function formatarNome(nome) {
  return nome.trim().toUpperCase();
}
function gerarSaudacao(nome) {
  return `Olá, ${formatarNome(nome)}!`;
}
function gerarDespedida(nome) {
  return `Até logo, ${formatarNome(nome)}!`;
}
function interagirComUsuario(nome, acao) {
  const nomeFormatado = formatarNome(nome);
  if (acao === "saudacao") {
    return gerarSaudacao(nomeFormatado);
  } else if (acao === "despedida") {
    return gerarDespedida(nomeFormatado);
  } else {
    return `Olá, ${nomeFormatado}! O que você deseja?`;
  }
}
console.log(interagirComUsuario(" ana ", "saudacao"));
console.log(interagirComUsuario(" carlos ", "despedida"));

// ================================================================
// PASSO 7: FUNÇÕES ANÔNIMAS E ARROW FUNCTIONS
// ================================================================
const somar = function(a, b) {
  return a + b;
};
console.log("Soma (anônima):", somar(5, 3));

const multiplicar = (a, b) => {
  return a * b;
};
console.log("Multiplicação (arrow):", multiplicar(5, 3));

const dividir = (a, b) => a / b;
console.log("Divisão (arrow implícita):", dividir(10, 2));

const quadrado = x => x * x;
console.log("Quadrado:", quadrado(5));

// ================================================================
// PASSO 8: REFATORAÇÃO
// ================================================================
function antes() {
  const lado1 = 5;
  const area1 = lado1 * lado1;
  console.log("Área 1:", area1);
  const lado2 = 7;
  const area2 = lado2 * lado2;
  console.log("Área 2:", area2);
  const lado3 = 3;
  const area3 = lado3 * lado3;
  console.log("Área 3:", area3);
}

function calcularAreaQuadrado(lado) {
  return lado * lado;
}
function depois() {
  const areas = [5, 7, 3];
  areas.forEach((lado, indice) => {
    const area = calcularAreaQuadrado(lado);
    console.log(`Área ${indice + 1}:`, area);
  });
}
console.log("--- ANTES DA REFATORAÇÃO ---");
antes();
console.log("--- DEPOIS DA REFATORAÇÃO ---");
depois();

// ================================================================
// PASSO 9: EXEMPLO PRÁTICO Sistema de Tarefas com Funções
// ================================================================
let tarefasSistema = [];

function criarTarefa(descricao, prioridade = "normal") {
  const novaTarefa = {
    id: Date.now(),
    descricao: descricao,
    prioridade: prioridade,
    concluida: false,
    dataCriacao: new Date().toLocaleString()
  };
  tarefasSistema.push(novaTarefa);
  return novaTarefa;
}

function listarTarefas(filtro = null) {
  let lista = tarefasSistema;
  if (filtro === "concluidas") {
    lista = tarefasSistema.filter(t => t.concluida);
  } else if (filtro === "pendentes") {
    lista = tarefasSistema.filter(t => !t.concluida);
  } else if (filtro === "alta") {
    lista = tarefasSistema.filter(t => t.prioridade === "alta");
  }
  return lista;
}

function atualizarTarefa(id, novosDados) {
  const tarefa = tarefasSistema.find(t => t.id === id);
  if (!tarefa) return null;
  if (novosDados.descricao) tarefa.descricao = novosDados.descricao;
  if (novosDados.prioridade) tarefa.prioridade = novosDados.prioridade;
  if (novosDados.concluida !== undefined) tarefa.concluida = novosDados.concluida;
  return tarefa;
}

function deletarTarefa(id) {
  const indice = tarefasSistema.findIndex(t => t.id === id);
  if (indice === -1) return false;
  tarefasSistema.splice(indice, 1);
  return true;
}

function exibirTarefas() {
  const tarefas = listarTarefas();
  if (tarefas.length === 0) {
    console.log("📭 Nenhuma tarefa cadastrada.");
    return;
  }
  console.log("=== MINHAS TAREFAS ===");
  tarefas.forEach((t, i) => {
    const status = t.concluida ? "✅" : "⬜";
    console.log(`${i + 1}. ${status} ${t.descricao} [${t.prioridade}]`);
  });
  console.log(`Total: ${tarefas.length} tarefas`);
}

// ================================================================
// PASSO 10: FUNÇÕES DE ORDEM SUPERIOR
// ================================================================
function processarArray(array, funcaoCallback) {
  const resultado = [];
  for (let i = 0; i < array.length; i++) {
    resultado.push(funcaoCallback(array[i], i, array));
  }
  return resultado;
}

const numerosTeste = [1, 2, 3, 4, 5];
const dobrados2 = processarArray(numerosTeste, function(num) {
  return num * 2;
});
console.log("Dobrados:", dobrados2);

const quadrados2 = processarArray(numerosTeste, num => num * num);
console.log("Quadrados:", quadrados2);

const pares = processarArray(numerosTeste, (num, i) => {
  if (num % 2 === 0) return num;
  return null;
}).filter(n => n !== null);
console.log("Pares:", pares);

// ================================================================
// CHECKLIST DAS FUNÇÕES:
// [ ] Criou pelo menos 5 funções no projeto
// [ ] Usou parâmetros em funções
// [ ] Usou return em funções
// [ ] Refatorou código repetido em funções
// [ ] Usou funções para organizar o código (modularização)
// [ ] Usou arrow functions em pelo menos um lugar
// ================================================================
console.log("✅ Funções carregadas. Exército pronto para a batalha.");
console.log("📋 Funções disponíveis:");
console.log(" - criarTarefa(descricao, prioridade)");
console.log(" - listarTarefas(filtro)");
console.log(" - atualizarTarefa(id, novosDados)");
console.log(" - deletarTarefa(id)");
console.log(" - exibirTarefas()");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Modulariza 🧩	Professor pergunta: "Quem aqui já copiou e colou o mesmo código 5 vezes? Quem já sentiu que o código estava virando um MACARRÃO?" Apresenta funções como a solução: "Funções são como receitas de bolo você escreve uma vez e usa quantas vezes quiser. E quando você precisa corrigir, corrige em UM lugar. Não em 50."
5-10	O que são Funções? 🧠	Explicação: "Funções são blocos de código que realizam uma tarefa. Elas recebem parâmetros (ingredientes), processam e retornam um resultado (o bolo). Função sem parâmetro e sem retorno é igual a um grito no vazio faz barulho, mas não produz nada."
10-15	Anatomia de uma Função 🔬	Demonstração: `function saudacao(nome) { return "Olá, " + nome; }`. "Veja: parâmetro, processamento, retorno. É assim que se faz. E se você não tem retorno, a função devolve undefined. E undefined não serve para quase nada."
15-40	Modularizando a Revolução 🔨	Cada grupo refatora o código do projeto para usar funções. Devem identificar partes repetidas e transformá-las em funções reutilizáveis. Professor circula, ajuda, provoca: "O que se repete? O que pode virar uma função? O que ficaria mais LIMPO com funções? E se você criasse uma função que chama outra função?"
40-45	Mostra de Funções 🎪	Cada grupo mostra como refatorou o código. "Quem tem a função mais útil? Quem tem a função mais criativa? Quem tem a função mais BEM ESCRITA? Quem reduziu o código em 50% com funções?"
45-48	Check-in de Modularização 🧹	"Como vocês se sentem com o código mais organizado? É como arrumar o quarto dá trabalho, mas fica MELHOR. E quando o quarto está arrumado, você encontra tudo mais fácil."
48-50	Fechamento + Provocação 🚀	"O código está modularizado. Na semana que vem: DEBUG E POLIMENTO a batalha final. Vamos caçar bugs e deixar o projeto PRONTO para o mundo. Porque projeto com bug é projeto que não funciona. E projeto que não funciona é projeto que não muda nada."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela; descreva as funções verbalmente; use fontes grandes e alto contraste; use feedback sonoro
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Crie uma função que recebe uma função como parâmetro (callback) e explique por que isso é poderoso. Depois, crie uma função que retorna outra função."

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

Critério	Descrição	Pontuação
Declaração de Funções	Criou pelo menos 5 funções diferentes no projeto	0-3
Parâmetros e Retorno	As funções recebem parâmetros e retornam valores corretamente	0-2
Modularização	O código está dividido em funções com responsabilidades claras	0-3
Refatoração	Refatorou código repetido para usar funções	0-2
Total		0-10

🎯 Título

"Debug e Polimento: A Batalha Final" Ou: como transformar um projeto quebrado em uma obra-prima (ou pelo menos em algo que não explode quando alguém clica porque ninguém merece ver seu projeto pegar fogo na apresentação)

🎯 Objetivos Operacionais

Compreender a importância de testar e depurar como parte essencial do desenvolvimento não é fracasso, é processo
Utilizar ferramentas de debug: console.log(), debugger, breakpoints, DevTools o arsenal do caçador de bugs
Identificar e corrigir diferentes tipos de erro: sintaxe, lógica e referência cada um com sua personalidade, cada um com sua solução
Refatorar o código para melhorar legibilidade e manutenibilidade porque código legível é código que você não tem vergonha de mostrar
Polir o projeto para a apresentação final os últimos 10% que fazem a diferença entre "ok" e "uau"
Bônus: errar é humano o computador só faz o que você manda, não o que você quer. E quando você aprende a errar, você aprende a acertar.

📚 Conteúdo Programático

Tipos de Erro Sintaxe, referência, lógica, runtime. "Cada erro é um professor disfarçado. Preste atenção no que ele ensina."
Ferramentas de Debug console.log(), console.error(), console.warn(), debugger, breakpoints. "O console é seu melhor amigo. Use-o. Abuse dele. Ele não vai te julgar."
Estratégias de Debug Isolar o problema, reproduzir o erro, ler as mensagens de erro. "Debug é uma arte. E arte se aprende praticando."
Refatoração Reescrever código para melhorar sem mudar o comportamento. "Refatorar não é consertar erro. É melhorar o que já funciona."
Polimento Final Últimos ajustes de design, usabilidade, acessibilidade. "Os detalhes são o que separa o profissional do amador."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Decomposição	O processo de debug é decompor o problema: "Onde exatamente o código falha? Qual parte está causando o erro?" "Divida o problema em pedaços menores. Um deles está quebrado. Encontre qual."
Algoritmos	Depurar é seguir um algoritmo: reproduzir o erro → isolar a causa → corrigir → testar novamente. "Debug é um loop. Repita até funcionar."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT402	Utilizar o raciocínio lógico e a linguagem matemática para compreender e resolver problemas de outras áreas do conhecimento, com ou sem apoio de tecnologias digitais.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP10	Revisar e editar textos produzidos, considerando a adequação ao contexto de produção e circulação, a composição, a estilística e a variedade linguística.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO09	Refletir sobre o processo de construção de soluções computacionais, identificando aprendizados, desafios e possibilidades de melhoria.

💻 Código Comentado

// ================================================================
// SEMANA 9 DEBUG E POLIMENTO: A BATALHA FINAL
// "Debug é o processo de remover bugs. Programação é o processo de colocá-los."
// ================================================================

console.log("🐛 Caçadores de bugs, preparem-se!");

// ================================================================
// PASSO 1: TIPOS DE ERRO
// ================================================================
function exemploReferencia() {
  try {
    console.log(variavelInexistente);
  } catch (erro) {
    console.error("❌ Erro de referência:", erro.message);
    console.log("💡 Solução: A variável não foi declarada.");
  }
}
exemploReferencia();

function dividirPorZero() {
  try {
    const resultado = 10 / 0;
    console.log("10/0 =", resultado);
    const objeto = null;
    console.log(objeto.propriedade);
  } catch (erro) {
    console.error("❌ Erro de runtime:", erro.message);
  }
}
dividirPorZero();

// ================================================================
// PASSO 2: FERRAMENTAS DE DEBUG
// ================================================================
console.log("🔍 Isso é um log normal.");
console.warn("⚠️ Isso é um aviso.");
console.error("❌ Isso é um erro.");
console.info("ℹ️ Isso é uma informação.");

const usuariosDebug = [
  { nome: "Ana", idade: 17 },
  { nome: "Bruno", idade: 18 },
  { nome: "Carla", idade: 16 }
];
console.table(usuariosDebug);

console.group("🔍 Debug da Função Soma");
console.log("Parâmetros recebidos:", 5, 3);
console.log("Resultado calculado:", 5 + 3);
console.log("Resultado esperado:", 8);
console.groupEnd();

function funcaoComDebugger(a, b) {
  debugger;
  const resultado = a + b;
  console.log("Resultado:", resultado);
  return resultado;
}
// funcaoComDebugger(5, 3);

function executarComSeguranca(funcao) {
  try {
    return funcao();
  } catch (erro) {
    console.error("❌ Algo deu errado:", erro.message);
    console.log("💡 Mas não se preocupe o programa continua!");
    return null;
  }
}
const resultadoSeguro = executarComSeguranca(() => {
  return variavelQueNaoExiste;
});
console.log("Resultado seguro:", resultadoSeguro);

// ================================================================
// PASSO 3: ESTRATÉGIAS DE DEBUG
// ================================================================
function encontrarBug(notas) {
  console.log("🔍 PASSO 1: Verificando entrada:", notas);
  console.log("🔍 PASSO 2: Tipo de notas:", typeof notas, Array.isArray(notas));
  if (!Array.isArray(notas) || notas.length === 0) {
    console.warn("⚠️ Lista de notas inválida!");
    return 0;
  }
  let soma = 0;
  console.log("🔍 PASSO 3: Iniciando soma...");
  for (let i = 0; i < notas.length; i++) {
    console.log(` - Adicionando notas[${i}] = ${notas[i]}`);
    soma += notas[i];
  }
  console.log("🔍 PASSO 4: Soma total =", soma);
  const media = soma / notas.length;
  console.log("🔍 PASSO 5: Média calculada =", media);
  return media;
}
const notasAlunos = [7, 8, 9, 6, 8.5];
const mediaFinal = encontrarBug(notasAlunos);
console.log("📊 Média final:", mediaFinal);

// ================================================================
// PASSO 4: VALIDAÇÃO DE DADOS
// ================================================================
function validarNumero(valor, nome = "valor") {
  if (typeof valor !== "number") {
    throw new Error(`${nome} deve ser um número. Recebido: ${typeof valor}`);
  }
  if (isNaN(valor)) {
    throw new Error(`${nome} não pode ser NaN (Not a Number)`);
  }
  if (!isFinite(valor)) {
    throw new Error(`${nome} não pode ser infinito`);
  }
  return true;
}
function validarString(valor, nome = "string") {
  if (typeof valor !== "string") {
    throw new Error(`${nome} deve ser uma string. Recebido: ${typeof valor}`);
  }
  if (valor.trim() === "") {
    throw new Error(`${nome} não pode ser vazio`);
  }
  return true;
}
function processarDadosSeguro(nome, idade) {
  try {
    validarString(nome, "Nome");
    validarNumero(idade, "Idade");
    if (idade < 0 || idade > 150) {
      throw new Error("Idade deve estar entre 0 e 150 anos");
    }
    return `Usuário ${nome} tem ${idade} anos. Válido! ✅`;
  } catch (erro) {
    console.error("❌ Erro de validação:", erro.message);
    return null;
  }
}
console.log(processarDadosSeguro("Ana", 17));
console.log(processarDadosSeguro("", 17));
console.log(processarDadosSeguro("Bruno", -5));
console.log(processarDadosSeguro("Carla", "vinte"));

// ================================================================
// PASSO 5: REFATORAÇÃO
// ================================================================
function calcularMediaPositivos(numeros) {
  const positivos = numeros.filter(num => num > 0);
  if (positivos.length === 0) return 0;
  const soma = positivos.reduce((acumulador, num) => acumulador + num, 0);
  return soma / positivos.length;
}
console.log("Média dos positivos:", calcularMediaPositivos([-5, 10, -3, 8, 12]));

// ================================================================
// PASSO 6: TESTES MANUAIS
// ================================================================
function testarFuncao() {
  console.log("🧪 INICIANDO TESTES");
  console.log("==================");
  let passou = 0;
  let falhou = 0;
  function testar(descricao, funcao) {
    try {
      const resultado = funcao();
      if (resultado === true) {
        console.log(`✅ PASS: ${descricao}`);
        passou++;
      } else {
        console.log(`❌ FAIL: ${descricao} Retornou ${resultado}`);
        falhou++;
      }
    } catch (erro) {
      console.log(`❌ FAIL: ${descricao} ${erro.message}`);
      falhou++;
    }
  }
  testar("Média de [1, 2, 3] deve ser 2", () => {
    return calcularMediaPositivos([1, 2, 3]) === 2;
  });
  testar("Média de [10, 20, 30] deve ser 20", () => {
    return calcularMediaPositivos([10, 20, 30]) === 20;
  });
  testar("Média de números negativos deve ser 0", () => {
    return calcularMediaPositivos([-1, -2, -3]) === 0;
  });
  testar("Média de array vazio deve ser 0", () => {
    return calcularMediaPositivos([]) === 0;
  });
  testar("Média de [5, -5, 10] deve considerar apenas positivos", () => {
    return calcularMediaPositivos([5, -5, 10]) === 7.5;
  });
  console.log("==================");
  console.log(`📊 RESULTADO: ${passou} passaram, ${falhou} falharam`);
  if (falhou === 0) {
    console.log("🎉 TODOS OS TESTES PASSARAM! Código pronto para produção.");
  } else {
    console.log("🐛 Alguns testes falharam. Hora de debugar!");
  }
}
testarFuncao();

// ================================================================
// PASSO 7: POLIMENTO FINAL
// ================================================================
function checklistPolimento() {
  console.log("📋 CHECKLIST DE POLIMENTO");
  console.log("=========================");
  const itens = [
    { item: "Código indentado corretamente", ok: true },
    { item: "Comentários explicativos em partes complexas", ok: true },
    { item: "Nomes de variáveis e funções fazem sentido", ok: true },
    { item: "Sem código comentado/desnecessário", ok: true },
    { item: "Mensagens de erro amigáveis (não técnicas)", ok: true },
    { item: "Design responsivo (funciona no celular)", ok: false },
    { item: "Cores acessíveis (contraste suficiente)", ok: false },
    { item: "Alt em imagens e labels em formulários", ok: false },
    { item: "Testado em pelo menos 2 navegadores", ok: false },
    { item: "Links e botões funcionam corretamente", ok: false }
  ];
  let ok = 0, pendentes = 0;
  itens.forEach(({ item, ok: status }) => {
    if (status) {
      console.log(`✅ ${item}`);
      ok++;
    } else {
      console.log(`⬜ ${item} (PENDENTE)`);
      pendentes++;
    }
  });
  console.log("=========================");
  console.log(`📊 ${ok} concluídos, ${pendentes} pendentes`);
  if (pendentes === 0) {
    console.log("🎉 PROJETO POLIDO E PRONTO PARA O LANÇAMENTO!");
  } else {
    console.log(`⚠️ Faltam ${pendentes} itens. Vamos polir antes da apresentação!`);
  }
}

// ================================================================
// CHECKLIST DO DEBUG:
// [ ] Identificou e corrigiu bugs no projeto
// [ ] Usou console.log() para debug
// [ ] Usou try...catch para tratamento de erros
// [ ] Validou dados de entrada
// [ ] Refatorou código para melhorar legibilidade
// [ ] Testou o projeto em diferentes cenários
// ================================================================
console.log("✅ Debug finalizado. Código polido e pronto.");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	O Gancho que Corrige 🐛	Professor diz: "Vocês já passaram horas tentando descobrir por que o código não funciona? Se sim, vocês já são CAÇADORES DE BUGS. O problema não é ter erros é não saber como ENCONTRÁ-LOS. E hoje vocês vão aprender a caçar. E quando vocês aprenderem a caçar, nenhum bug vai escapar."
5-10	Tipos de Erro 🎯	Explicação: "Erro de sintaxe = você escreveu errado. Erro de referência = você usou algo que não existe. Erro de lógica = o código roda, mas faz a coisa ERRADA. Cada erro é um professor disfarçado. Preste atenção no que ele ensina."
10-15	Ferramentas de Debug 🛠️	Demonstração: `console.log()`, `console.error()`, `console.table()`, `debugger`, breakpoints no DevTools. "O console é seu melhor amigo. Use-o. Abuse dele. Ele não vai te julgar. Ele só vai mostrar a verdade."
15-40	Caça aos Bugs 🔍	Cada grupo testa seu projeto, identifica bugs e os corrige. Devem usar `console.log` para investigar e documentar os bugs encontrados. Professor circula, ajuda, provoca: "O que está quebrado? Como você descobriu? O que você fez para corrigir? O que você aprendeu com isso? Qual foi o bug mais ridículo que você encontrou?"
40-45	Mostra de Debug 🎪	Cada grupo compartilha o bug mais ridículo que encontrou e como corrigiu. Risadas garantidas. "Quem teve o bug mais idiota? Quem teve o bug mais difícil? Quem aprendeu mais com um bug?"
45-48	Check-in de Resiliência 💪	"Como vocês se sentem depois de caçar bugs? Exaustos? Satisfeitos? O debug é parte do processo e vocês são MELHORES por causa disso. Cada bug corrigido é um nível ganho."
48-50	Fechamento + Provocação 🚀	"O projeto está polido. Na semana que vem: LANÇAMENTO OFICIAL o mundo vai ver. Preparem-se para brilhar. Porque vocês construíram algo. E construir é o que importa."

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

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela; descreva os erros verbalmente; use fontes grandes e alto contraste; use feedback sonoro
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; use exemplos visuais claros
Deficiência Motora	Permita respostas verbais; use grupos com papéis definidos; garanta acessibilidade física
TDAH	Divida em sprints de 10 minutos; use cronômetros visuais; checklist física
TEA	Envie as instruções com antecedência; use perguntas estruturadas; ambiente com poucos estímulos
Altas Habilidades/Superdotação	Desafio extra: "Implemente tratamento de erros com `try...catch` em pelo menos uma parte do código. Depois, crie testes automatizados para suas funções."

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

Critério	Descrição	Pontuação
Identificação de Bugs	Encontrou e documentou bugs no projeto	0-3
Correção de Bugs	Corrigiu os bugs de forma correta e funcional	0-3
Uso do Console	Utilizou `console.log` ou ferramentas de debug para investigar erros	0-2
Refatoração	Melhorou a legibilidade do código (renomeou variáveis, extraiu funções, comentou)	0-2
Total		0-10

🎯 Título

"Lançamento Oficial: O Mundo Vai Ver" Ou: como apresentar sua revolução para o mundo (e sobreviver às perguntas e sair de cabeça erguida, mesmo se o código pifar na hora porque o que importa não é o código, é a história que vocês têm para contar)

🎯 Objetivos Operacionais

Apresentar o projeto final para a turma e convidados (formato Shark Tank/Demo Day) porque revolução que ninguém vê não é revolução, é só ensaio
Demonstrar o protótipo em ação ao vivo, sem rede de segurança porque o mundo real não tem rede de segurança
Refletir sobre o processo de aprendizagem o que aprenderam, o que foi difícil, o que mudou. "O que vocês eram antes e o que são agora?"
Celebrar as conquistas do bimestre e reconhecer o esforço de cada um porque celebrar é tão importante quanto construir
Bônus: entender que o fim é só o começo de algo maior. "Vocês não são mais os mesmos. E o mundo não é mais o mesmo."

📚 Conteúdo Programático

Pitch Como apresentar um projeto de forma convincente (3 minutos). "Menos é mais. Se você não consegue explicar em 3 minutos, você não entendeu direito."
Demonstração ao Vivo Mostrar o projeto funcionando (e lidar com os imprevistos). "O demo ao vivo é onde o herói se prova. E herói não desiste quando algo dá errado."
Perguntas e Respostas Como responder à banca com confiança. "Não saber é humano. Inventar é desonesto. Seja humano."
Autoavaliação Refletir sobre o que aprendeu. "O que você era antes e o que você é agora?"
Celebração Reconhecer o esforço e a evolução de cada um. "Vocês construíram algo. Isso é mais do que a maioria das pessoas faz."

🧩 Pilares do Pensamento Computacional trabalhados na aula

Pilar	Aplicação na aula
Todos os Pilares	Aplicação integrada de todos os pilares na apresentação: decomposição (estrutura do pitch), reconhecimento de padrões (argumentos que funcionam), abstração (foco no essencial), algoritmos (sequência lógica da apresentação). "Tudo o que vocês aprenderam converge aqui."

📜 Habilidades BNCC e RCP-PR

BNCC Matemática e suas Tecnologias:

Código	Habilidade
EM13MAT501	Comunicar ideias matemáticas de forma clara, precisa e contextualizada, utilizando diferentes linguagens e representações.

BNCC Linguagens e suas Tecnologias:

Código	Habilidade
EM13LP11	Apresentar e defender pontos de vista em situações de debate, considerando a relevância dos argumentos e a adequação ao contexto.

BNCC Computação (Complemento à BNCC) Resolução CNE/CEB nº 1/2022:

Código	Habilidade
EM13CO08	Comunicar e compartilhar soluções computacionais, considerando diferentes públicos e contextos.

💻 Código Comentado

// ================================================================
// SEMANA 10 LANÇAMENTO OFICIAL: O MUNDO VAI VER
// "O que importa não é o código. É a história que você tem para contar."
// ================================================================

const estruturaPitch = {
  abertura: "Olá, somos [NOME DO GRUPO] e criamos [NOME DO PROJETO].",
  problema: "O problema que identificamos foi [PROBLEMA REAL].",
  solucao: "Nossa solução é [DESCRIÇÃO DA SOLUÇÃO].",
  demonstracao: "Vamos demonstrar como funciona.",
  impacto: "O impacto que queremos gerar é [IMPACTO DESEJADO].",
  agradecimento: "Obrigado pela atenção. Estamos abertos a perguntas."
};
console.log("🎤 Estrutura do pitch carregada.");

const dicasApresentacao = {
  postura: "Fique em pé. Olhe para a plateia. Respire fundo.",
  voz: "Fale devagar. Projete a voz. Pausas são poderosas.",
  demonstracao: "Mostre o projeto funcionando. Se algo der errado, respire e continue.",
  perguntas: "Escute a pergunta completa. Pense antes de responder. Não invente se não souber.",
  tempo: "3 minutos é pouco. Seja direto. Corte o que não é essencial.",
  paixao: "Mostre que você se importa. Paixão é contagiante."
};
console.table(dicasApresentacao);

function autoavaliacao() {
  console.log("📝 AUTOAVALIAÇÃO DO BIMESTRE");
  console.log("==============================");
  const perguntas = [
    "1. O que você aprendeu neste bimestre que não sabia antes?",
    "2. Qual foi o maior desafio que você enfrentou?",
    "3. Como você superou esse desafio?",
    "4. O que você faria diferente se pudesse começar de novo?",
    "5. Qual parte do projeto você mais se orgulha?",
    "6. Como você se sente agora em relação à programação?",
    "7. O que você vai levar deste projeto para sua vida?",
    "8. Você se vê fazendo algo assim no futuro?"
  ];
  perguntas.forEach(pergunta => {
    console.log(`\n${pergunta}`);
    console.log("Resposta: [ESCREVA AQUI SUA REFLEXÃO]");
    console.log("-".repeat(50));
  });
  console.log("\n📊 Nota para si mesmo (0-10): [__]");
  console.log("Justificativa da nota: [ESCREVA AQUI]");
}

function avaliacaoPorPares() {
  console.log("🤝 AVALIAÇÃO POR PARES");
  console.log("=====================");
  const criterios = [
    { nome: "Clareza da Apresentação", nota: 0 },
    { nome: "Demonstração Funcional", nota: 0 },
    { nome: "Qualidade do Código", nota: 0 },
    { nome: "Design e Usabilidade", nota: 0 },
    { nome: "Trabalho em Equipe", nota: 0 },
    { nome: "Criatividade e Inovação", nota: 0 }
  ];
  console.log("Avalie o projeto do grupo ao lado (1-10):");
  criterios.forEach(criterio => {
    console.log(`- ${criterio.nome}: [__]`);
  });
  console.log("\n💬 Comentários adicionais:");
  console.log("[ESCREVA AQUI SEUS COMENTÁRIOS]");
}

function roteiroApresentacao() {
  console.log("🎬 ROTEIRO DA APRESENTAÇÃO");
  console.log("==========================");
  console.log("\n🔹 ABERTURA (30 segundos)");
  console.log("- Cumprimente a plateia");
  console.log("- Apresente seu grupo");
  console.log("- Diga o nome do projeto");
  console.log("- Faça uma pergunta que prende a atenção");
  console.log("\n🔹 O PROBLEMA (30 segundos)");
  console.log("- Qual problema vocês identificaram?");
  console.log("- Por que esse problema é importante?");
  console.log("- Quem ele afeta?");
  console.log("\n🔹 A SOLUÇÃO (30 segundos)");
  console.log("- O que vocês criaram?");
  console.log("- Como funciona? (explicação breve)");
  console.log("- Quais tecnologias usaram?");
  console.log("\n🔹 DEMONSTRAÇÃO (60 segundos)");
  console.log("- Mostre o projeto funcionando AO VIVO");
  console.log("- Destaque as funcionalidades principais");
  console.log("- Mostre um caso de uso real");
  console.log("- SE DER ERRADO: respire, continue, mostre que você sabe lidar");
  console.log("\n🔹 IMPACTO E APRENDIZADO (30 segundos)");
  console.log("- Qual o impacto esperado?");
  console.log("- O que vocês aprenderam?");
  console.log("- Como isso mudou vocês?");
  console.log("\n🔹 FECHAMENTO (30 segundos)");
  console.log("- Recapitule os pontos principais");
  console.log("- Agradeça a atenção");
  console.log("- Abra para perguntas");
  console.log("\n⏱️ TOTAL: 3 MINUTOS");
  console.log("⚠️ Ensaie! Treine! O ensaio é o que separa o profissional do amador.");
}

const perguntasFrequentes = [
  {
    pergunta: "Por que vocês escolheram esse problema?",
    dica: "Fale sobre a relevância e o impacto real do problema."
  },
  {
    pergunta: "Qual foi a maior dificuldade técnica?",
    dica: "Seja honesto. Mostre que você aprendeu com os desafios."
  },
  {
    pergunta: "O que vocês fariam diferente?",
    dica: "Reflita sobre o processo. Ninguém é perfeito. O importante é aprender."
  },
  {
    pergunta: "Como isso pode ser usado na prática?",
    dica: "Dê um exemplo concreto. Mostre que você pensou no usuário."
  },
  {
    pergunta: "O que vocês mais aprenderam?",
    dica: "Conte uma história. Aprendizado é mais interessante que código."
  },
  {
    pergunta: "Se tivessem mais tempo, o que adicionariam?",
    dica: "Mostre que você tem visão de futuro. Um projeto nunca está 100% pronto."
  }
];

console.log("❓ Prepare-se para as perguntas:");
perguntasFrequentes.forEach(p => {
  console.log(`\nP: ${p.pergunta}`);
  console.log(`Dica: ${p.dica}`);
});

function celebrar() {
  console.log("\n🎉🎊 PARABÉNS! 🎊🎉");
  console.log("=".repeat(50));
  console.log("\nVocês chegaram ao fim de uma jornada incrível!");
  console.log("Não importa se o código tem bugs.");
  console.log("Não importa se o design não ficou perfeito.");
  console.log("O que importa é que VOCÊS FIZERAM.");
  console.log("\nVocês construíram algo do zero.");
  console.log("Vocês aprenderam HTML, CSS e JavaScript.");
  console.log("Vocês planejaram, executaram, erraram e aprenderam.");
  console.log("Vocês são programadores. E programadores mudam o mundo.");
  console.log("\n🚀 O mundo digital nunca mais será o mesmo.");
  console.log("E vocês nunca mais serão os mesmos.");
  console.log("\nA revolução foi codificada.");
  console.log("E vocês foram os criadores.");
  console.log("\n" + "=".repeat(50));
  console.log("🏁 FIM DA JORNADA MAS A REVOLUÇÃO CONTINUA.");
}

function checklistFinal() {
  console.log("📋 CHECKLIST FINAL ANTES DA APRESENTAÇÃO");
  console.log("==========================================");
  const itens = [
    "✅ Projeto testado e funcionando",
    "✅ Código comentado e organizado",
    "✅ Projeto no ar (ou pronto para ser mostrado)",
    "✅ Roteiro do pitch ensaiado",
    "✅ Divisão de falas definida",
    "✅ Plano B para problemas técnicos",
    "✅ Respostas preparadas para perguntas frequentes",
    "✅ Respiração profunda feita",
    "✅ Confiança ativada",
    "✅ Sorriso pronto"
  ];
  itens.forEach(item => console.log(` ${item}`));
  console.log("\n🎤 VOCÊ ESTÁ PRONTO. O MUNDO VAI VER.");
}

// ================================================================
// CHECKLIST DA APRESENTAÇÃO:
// [ ] Pitch preparado e ensaiado
// [ ] Projeto funcionando (testado antes)
// [ ] Divisão de falas clara
// [ ] Respostas preparadas para perguntas
// [ ] Autoavaliação preenchida
// [ ] Comemoração planejada
// ================================================================
console.log("🎤 Apresentação carregada. Pronto para brilhar.");

⏱️ Detalhamento Minuto a Minuto (50 min)

Minuto	Atividade	Descrição
0-5	Abertura Épica 🎬	Trilha sonora épica. Luzes baixas (se possível). Professor entra com energia: "Hoje é o dia. O dia em que vocês mostram ao mundo o que construíram. Não é sobre o código é sobre a história que vocês têm para contar. E que história vocês vão contar?"
5-10	Preparação Final ⏳	Últimos ajustes. Nervosismo e empolgação no ar. "Respirem fundo. Vocês estão prontos. Lembrem-se: o ensaio é o que separa o profissional do amador. E vocês são profissionais."
10-35	Apresentações Shark Tank Digital 🎤	Cada grupo tem 3 minutos para o pitch + 2 minutos de perguntas. Formato Shark Tank. Banca composta por professores, convidados e alunos. "Não é sobre ser perfeito. É sobre ser AUTÊNTICO. Mostre sua história."
35-40	Feedback Coletivo 🗣️	"Quais projetos mais chamaram atenção? O que foi inspirador? O que surpreendeu? O que vocês aprenderam vendo os outros?"
40-43	Votação e Premiação 🏆	Categorias: 🏆 Mais Criativo, 🧠 Mais Técnico, 🎨 Mais Bonito, 🤯 Mais Impactante, ❤️ Mais Empático, 🔥 Mais Revolucionário
43-46	Autoavaliação 📝	Cada aluno preenche a ficha de autoavaliação. "O que você era antes e o que você é agora? Essa é a pergunta mais importante."
46-48	Check-in Emocional 😭	"Como vocês se sentem agora? Orgulhosos? Aliviados? Empolgados para o próximo? Essa sensação é o que move a vida."
48-50	Fechamento Emocional 🚀	Discurso de encerramento. "Vocês são incríveis. Construíram, erraram, aprenderam, evoluíram. Lembrem-se: o código é só a ferramenta. O que importa é o que vocês criam com ela. Vocês não são mais usuários. Vocês são CRIADORES. Parabéns, guerreiros digitais! 🚀"

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

Público	Adaptações Sugeridas
Deficiência Visual	Descreva os projetos verbalmente; use materiais táteis; permita apresentações em áudio; use descrições detalhadas
Deficiência Auditiva	Use feedback visual; disponibilize roteiro escrito; permita apresentações escritas; use legendas ao vivo se possível
Deficiência Motora	Permita pausas; use ferramentas com suporte a teclado; permita apresentações com ajuda; seja flexível com o tempo
TDAH	Use cronômetros visuais; divida em blocos curtos; checklist de tarefas; minimize distrações
TEA	Use roteiros sociais; mantenha ambiente calmo; use perguntas estruturadas; avise sobre mudanças na rotina
Altas Habilidades/Superdotação	Desafio extra: "Apresente uma versão estendida do projeto para um público diferente. Grave um vídeo explicativo para compartilhar online."

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

Critério	Descrição	Pontuação
Clareza da Apresentação	Explicou o projeto de forma clara, organizada e envolvente	0-2
Demonstração Funcional	O projeto foi demonstrado ao vivo e funcionou (ou lidou bem com imprevistos)	0-2
Storytelling	Contou uma história envolvente (contexto, desafios, soluções, impacto)	0-2
Justificativa	Explicou as escolhas técnicas e de design	0-1
Trabalho em Equipe	Todos os membros participaram ativamente	0-1
Respostas às Perguntas	Respondeu com segurança, conhecimento e humildade	0-1
Autoavaliação	Refletiu criticamente sobre o próprio aprendizado	0-1
Total		0-10

🌟 RUBRICA DE AVALIAÇÃO PROJETO FINAL (BIMESTRE COMPLETO)

Critério	Excelente (10)	Bom (7)	Regular (5)	Insuficiente (3)
Compreensão do Problema	Identificou e analisou profundamente o problema da Cultura Digital, com dados e exemplos concretos	Identificou o problema, mas com análise superficial	Identificou o problema de forma vaga	Não identificou ou compreendeu o problema
Aplicação dos Pilares do PC	Aplicou os 4 pilares de forma criativa e eficaz, com justificativas claras em cada etapa	Aplicou a maioria dos pilares corretamente	Aplicou alguns pilares, mas com falhas	Não aplicou os pilares ou aplicou incorretamente
Desenvolvimento do Protótipo	Protótipo funcional, criativo, bem executado e com bom design/experiência do usuário	Protótipo funcional, mas com pouca criatividade ou usabilidade	Protótipo parcialmente funcional	Protótipo não funcional ou incompleto
Apresentação (Pitch)	Comunicação clara, envolvente, com domínio do conteúdo e boa demonstração	Clara, mas com algumas hesitações ou falhas na demo	Razoável, com dificuldades e sem demo convincente	Confusa, tímida ou sem preparo
Trabalho em Equipe	Colaboração excelente, divisão equilibrada e comunicação efetiva	Boa colaboração, pequenos desequilíbrios	Razoável, alguns conflitos ou desorganização	Pouca colaboração ou trabalho individual
Reflexão e Autoavaliação	Reflexão profunda e crítica sobre o processo, com aprendizados claros e aplicáveis	Reflexão honesta, mas superficial	Reflexão vaga ou genérica	Sem reflexão ou autoavaliação

ORIENTAÇÕES PARA ADAPTAÇÕES E INCLUSÃO EXEMPLOS PRÁTICOS

"Se só funciona pra um tipo de gente, não é projeto, é fanclub disfarçado. E nós não somos fã-clube de ninguém."

Público	Adaptações Sugeridas
Deficiência Visual	Use leitores de tela (NVDA), braille, descrições táteis, programação por voz e Lego Braille Bricks. Garanta alto contraste e fontes grandes (mínimo 16px, preferencialmente 1.2rem). Descreva todos os elementos visuais verbalmente.
Deficiência Auditiva	Garanta legendas completas em vídeos, intérprete de Libras (quando disponível), transcrições escritas e uso de chat para debates. Use feedback visual para todas as instruções.
Deficiência Motora	Divida em sprints curtos (15-20 min), use checklists visuais, cronômetros e papéis claramente definidos nos grupos. Garanta navegação por teclado e botões com tamanho adequado (mínimo 44px).
TDAH	Use roteiros sociais, cronogramas visuais, perguntas enviadas com antecedência e ambiente com poucos estímulos sensoriais. Divida as atividades em blocos curtos com pausas.
TEA	Ofereça mesas ajustáveis, materiais adaptados (tesouras, colas), participação verbal ativa e garantia de acessibilidade física na sala. Use perguntas estruturadas e previsíveis.
Altas Habilidades	Ofereça desafios extras, projetos ampliados (complexidade técnica), mentoria e produção de conteúdo aprofundado (artigos, pesquisas). Permita que o aluno atue como "líder técnico" da equipe.

RUBRICA DE AVALIAÇÃO PROJETO FINAL (BIMESTRE COMPLETO)

Critério	Excelente (10)	Bom (7)	Regular (5)	Insuficiente (3)
Compreensão do Problema	Identificou e analisou profundamente o problema da Cultura Digital, com dados e exemplos concretos	Identificou o problema, mas com análise superficial	Identificou o problema de forma vaga	Não identificou ou compreendeu o problema
Aplicação dos Pilares do PC	Aplicou os 4 pilares de forma criativa e eficaz, com justificativas claras em cada etapa	Aplicou a maioria dos pilares corretamente	Aplicou alguns pilares, mas com falhas	Não aplicou os pilares ou aplicou incorretamente
Desenvolvimento do Protótipo	Protótipo funcional, criativo, bem executado e com bom design/experiência do usuário	Protótipo funcional, mas com pouca criatividade ou usabilidade	Protótipo parcialmente funcional	Protótipo não funcional ou incompleto
Apresentação (Pitch)	Comunicação clara, envolvente, com domínio do conteúdo e boa demonstração	Clara, mas com algumas hesitações ou falhas na demo	Razoável, com dificuldades e sem demo convincente	Confusa, tímida ou sem preparo
Trabalho em Equipe	Colaboração excelente, divisão equilibrada e comunicação efetiva	Boa colaboração, pequenos desequilíbrios	Razoável, alguns conflitos ou desorganização	Pouca colaboração ou trabalho individual
Reflexão e Autoavaliação	Reflexão profunda e crítica sobre o processo, com aprendizados claros e aplicáveis	Reflexão honesta, mas superficial	Reflexão vaga ou genérica	Sem reflexão ou autoavaliação

REFERÊNCIAS BIBLIOGRÁFICAS

BRASIL. Ministério da Educação. Base Nacional Comum Curricular (BNCC). Brasília: MEC, 2018.
BRASIL. Ministério da Educação. Conselho Nacional de Educação. Câmara de Educação Básica. Resolução CNE/CEB nº 1, de 4 de outubro de 2022. Institui normas sobre Computação na Educação Básica Complemento à Base Nacional Comum Curricular (BNCC). Brasília, DF: MEC/CNE, 2022.
BRASIL. Ministério da Educação. Conselho Nacional de Educação. Resolução CNE/CEB nº 2, de 2025. Institui as Diretrizes Operacionais Nacionais sobre o uso de dispositivos digitais em espaços escolares e integração curricular de Educação Digital e Midiática. Brasília, DF: MEC/CNE, 2025.
BRASIL. Lei nº 13.709, de 14 de agosto de 2018. Lei Geral de Proteção de Dados Pessoais (LGPD). Brasília, DF: Presidência da República, 2018.
PARANÁ. Secretaria de Estado da Educação. Referencial Curricular do Paraná: Ensino Médio. Curitiba: SEED/PR, 2025.
PARANÁ. Secretaria de Estado da Educação. Educação Digital e Computação no Referencial Curricular do Paraná. Curitiba: SEED/PR, 2025.
WING, Jeannette M. Computational thinking. Communications of the ACM, v. 49, n. 3, p. 33-35, 2006.
ZUBOFF, Shoshana. A Era do Capitalismo de Vigilância. Rio de Janeiro: Intrínseca, 2021.

"Acabou o modo espectador. Vocês pegaram o volante do futuro digital. Dirijam com astúcia, com rock’n’roll e com o coração no lugar do GPS porque algoritmo nenhum limpa consciência." 🔥

CARTA DE ABERTURA 4º BIMESTRE

MAPEAMENTO BIMESTRE

PLANO SINTÉTICO 4º BIMESTRE

PLANOS DE AULA DETALHADOS 3º BIMESTRE

Semana 1 "Do Caos ao Código: O Planejamento da Revolução"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 "HTML: A Estrutura da Resistência"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 "CSS: O Estilo da Revolução"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 "JavaScript: A Mágica da Interatividade"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 5 "DOM: O Controle Remoto da Sua Página"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 6 "Eventos: Quando o Usuário Toca na Tela"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 7 "Dados e Arrays: A Biblioteca da Revolução"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR

💻 Código Comentado

⏱️ 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 8 "Funções: O Exército da Revolução"

🎯 Título

🎯 Objetivos Operacionais

📚 Conteúdo Programático

🧩 Pilares do Pensamento Computacional trabalhados na aula

📜 Habilidades BNCC e RCP-PR