Universidade Tecnológica Federal do Paraná
Campus Siqueira Campos
Revolução Digital:
Desvendando Algoritmos, Reconectando Humanidade
Material Didático para Professores do 1º ao 3º Ano

CARTA DE ABERTURA DO ANO LETIVO

ATENÇÃO, TURMA! 🕶️🔥

Senta que lá vem história.

Vocês estão prestes a embarcar na jornada mais insana, mais revolucionária e mais codificada de toda a vida de vocês. Esqueçam o que sabem sobre escola. Esqueçam o que sabem sobre tecnologia. Esqueçam o que sabem sobre si mesmos.

Porque vocês vão descobrir que não sabiam é nada.

Este ano, vocês vão:

  • DESMONTAR a Matrix de uma vez por todas entender quem realmente manda no feed de vocês (spoiler: não são vocês).
  • DESCONSTRUIR os castelos digitais que vocês mesmos construíram descobrir que aquela div <div> não é uma divindade, é uma ferramenta de controle (e de libertação, se vocês souberem usar).
  • CODIFICAR a revolução HTML, CSS e JavaScript não são só linguagens, são armas. E vocês vão aprender a usá-las.
  • CRIAR projetos que não são só código são manifestos. Gritos. Revoluções silenciosas (mas codificadas).
  • APRESENTAR suas criações para o mundo e provar que vocês não são mais apenas usuários, são ARQUITETOS DO FUTURO DIGITAL.

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.

A revolução não vai ser televisionada. Ela vai ser CODIFICADA.

E, spoiler: o código que vocês vão escrever NÃO vai ser bonito. Vai ser funcional. Vai ser caótico. Vai ser VOCÊS.

MAPEAMENTO COMPLETO DE HABILIDADES BNCC E RCP-PR POR BIMESTRE

Semana Título da Aula Habilidades BNCC (Matemática) Habilidades BNCC (LP) Habilidades BNCC (Outras) Pilares do PC
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 EM13CO06 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

Semana Título da Aula Habilidades BNCC (Matemática) Habilidades BNCC (LP) Habilidades BNCC (Outras) Pilares do PC
1 "O Último Planejamento" EM13MAT101 EM13LP01 EM13CO07 Abstração
2 "HTML: A Estrutura do Adeus" EM13MAT102 EM13LP02 EM13CO03 Decomposição
3 "CSS: O Estilo da Despedida" EM13MAT301 EM13LP04 EM13CO05 Reconhecimento de Padrões
4 "JavaScript: A Mágica que Não Acaba" EM13MAT302 EM13LP05 EM13CO06 Algoritmos
5 "DOM: O Controle Remoto do Fim" EM13MAT201 EM13LP06 EM13CO04 Abstração + Algoritmos
6 "Eventos: Quando o Usuário Toca no Fim" EM13MAT303 EM13LP07 EM13CO02 Decomposição + Algoritmos
7 "Dados e Arrays: A Biblioteca do Fim" EM13MAT304 EM13LP08 EM13CO05 Abstração + Reconhecimento
8 "Funções: O Exército do Adeus" 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 (e Chorar)" EM13MAT501 EM13LP11 EM13CO08 Todos os Pilares

Semana Título da Aula Habilidades BNCC (Matemática) Habilidades BNCC (LP) Habilidades BNCC (Outras) Pilares do PC
1 "O Último Planejamento" EM13MAT101 EM13LP01 EM13CO07 Abstração
2 "HTML: A Estrutura do Adeus" EM13MAT102 EM13LP02 EM13CO03 Decomposição
3 "CSS: O Estilo da Despedida" EM13MAT301 EM13LP04 EM13CO05 Reconhecimento de Padrões
4 "JavaScript: A Mágica que Não Acaba" EM13MAT302 EM13LP05 EM13CO06 Algoritmos
5 "DOM: O Controle Remoto do Fim" EM13MAT201 EM13LP06 EM13CO04 Abstração + Algoritmos
6 "Eventos: Quando o Usuário Toca no Fim" EM13MAT303 EM13LP07 EM13CO02 Decomposição + Algoritmos
7 "Dados e Arrays: A Biblioteca do Fim" EM13MAT304 EM13LP08 EM13CO05 Abstração + Reconhecimento
8 "Funções: O Exército do Adeus" 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 (e Chorar)" EM13MAT501 EM13LP11 EM13CO08 Todos os Pilares

Semana Título da Aula Habilidades BNCC (Matemática) Habilidades BNCC (LP) Habilidades BNCC (Outras) Pilares do PC
1 "O Último Planejamento" EM13MAT101 EM13LP01 EM13CO07 Abstração
2 "HTML: A Estrutura do Adeus" EM13MAT102 EM13LP02 EM13CO03 Decomposição
3 "CSS: O Estilo da Despedida" EM13MAT301 EM13LP04 EM13CO05 Reconhecimento de Padrões
4 "JavaScript: A Mágica que Não Acaba" EM13MAT302 EM13LP05 EM13CO06 Algoritmos
5 "DOM: O Controle Remoto do Fim" EM13MAT201 EM13LP06 EM13CO04 Abstração + Algoritmos
6 "Eventos: Quando o Usuário Toca no Fim" EM13MAT303 EM13LP07 EM13CO02 Decomposição + Algoritmos
7 "Dados e Arrays: A Biblioteca do Fim" EM13MAT304 EM13LP08 EM13CO05 Abstração + Reconhecimento
8 "Funções: O Exército do Adeus" 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 (e Chorar)" EM13MAT501 EM13LP11 EM13CO08 Todos os Pilares

PLANO ANUAL COMPLETO A JORNADA DO ARQUITETO DIGITAL

4 bimestres, 40 semanas de revolução codificada.

Semana Título Atividade Principal
1 "Do Caos ao Código: O Planejamento da Revolução" "O Mapa da Revolução" cada grupo escolhe um problema real da cultura digital e planeja um projeto completo, aplicando os 4 Pilares do PC e definindo o MVP.
2 "HTML: A Estrutura da Resistência" "Construindo a Base" os grupos constroem a estrutura HTML do projeto, com tags semânticas e boas práticas de acessibilidade.
3 "CSS: O Estilo da Revolução" "Operação Beleza" estilização com personalidade, usando variáveis CSS, Flexbox/Grid, responsividade e um design system próprio.
4 "JavaScript: A Mágica da Interatividade" "O Despertar" adicionam interatividade básica: botões, mensagens, contadores, primeira função útil.
5 "DOM: O Controle Remoto da Sua Página" "Caça ao Elemento" selecionar, modificar, criar e remover elementos via JS.
6 "Eventos: Quando o Usuário Toca na Tela" "A Hora do Clique" adicionam eventos (clique, teclado, mouse) com feedback visual imediato.
7 "Dados e Arrays: A Biblioteca da Revolução" "Organizando o Caos" implementam arrays para gerenciar dados (lista de tarefas, itens, etc.) usando push, pop, forEach.
8 "Funções: O Exército da Revolução" "Modularizando a Revolução" refatoram o código para usar funções com parâmetros e retorno.
9 "Debug e Polimento: A Batalha Final" "Caça aos Bugs" testam, depuram e polinem o projeto com console.log, debugger e DevTools.
10 "Lançamento Oficial: O Mundo Vai Ver" "A Grande Estreia" apresentações no formato Shark Tank: pitch de 3 min, demonstração ao vivo, perguntas, autoavaliação e premiação.

Semana Título Atividade Principal
1 "O Último Planejamento" "O Mapa da Revolução" escolha de um problema real da cultura digital, planejamento com os 4 Pilares e MVP.
2 "HTML: A Estrutura do Adeus" "Construindo a Base" estrutura HTML com semântica e acessibilidade.
3 "CSS: O Estilo da Despedida" "Operação Beleza" estilização personalizada com design system próprio.
4 "JavaScript: A Mágica que Não Acaba" "O Despertar" interatividade básica (botões, mensagens, contadores).
5 "DOM: O Controle Remoto do Fim" "Caça ao Elemento" manipulação completa do DOM.
6 "Eventos: Quando o Usuário Toca no Fim" "A Hora do Clique" eventos com feedback visual.
7 "Dados e Arrays: A Biblioteca do Fim" "Organizando o Caos" arrays para gerenciar dados.
8 "Funções: O Exército do Adeus" "Modularizando a Revolução" refatoração com funções.
9 "Debug e Polimento: A Batalha Final" "Caça aos Bugs" testes e depuração.
10 "Lançamento Oficial: O Mundo Vai Ver (e Chorar)" "A Grande Estreia" apresentações Shark Tank.

Semana Título Atividade Principal
1 "O Último Planejamento" "O Mapa da Revolução" planejamento com PC e MVP.
2 "HTML: A Estrutura do Adeus" "Construindo a Base" HTML semântico.
3 "CSS: O Estilo da Despedida" "Operação Beleza" estilização com design system.
4 "JavaScript: A Mágica que Não Acaba" "O Despertar" interatividade básica.
5 "DOM: O Controle Remoto do Fim" "Caça ao Elemento" manipulação DOM.
6 "Eventos: Quando o Usuário Toca no Fim" "A Hora do Clique" eventos.
7 "Dados e Arrays: A Biblioteca do Fim" "Organizando o Caos" arrays.
8 "Funções: O Exército do Adeus" "Modularizando a Revolução" funções.
9 "Debug e Polimento: A Batalha Final" "Caça aos Bugs" debug.
10 "Lançamento Oficial: O Mundo Vai Ver (e Chorar)" "A Grande Estreia" apresentações.

Semana Título Atividade Principal
1 "O Último Planejamento" "O Mapa da Revolução" planejamento com PC e MVP.
2 "HTML: A Estrutura do Adeus" "Construindo a Base" HTML semântico.
3 "CSS: O Estilo da Despedida" "Operação Beleza" estilização com design system.
4 "JavaScript: A Mágica que Não Acaba" "O Despertar" interatividade básica.
5 "DOM: O Controle Remoto do Fim" "Caça ao Elemento" manipulação DOM.
6 "Eventos: Quando o Usuário Toca no Fim" "A Hora do Clique" eventos.
7 "Dados e Arrays: A Biblioteca do Fim" "Organizando o Caos" arrays.
8 "Funções: O Exército do Adeus" "Modularizando a Revolução" funções.
9 "Debug e Polimento: A Batalha Final" "Caça aos Bugs" debug.
10 "Lançamento Oficial: O Mundo Vai Ver (e Chorar)" "A Grande Estreia" apresentações.

CRITÉRIOS DE AVALIAÇÃO ANO LETIVO COMPLETO

Rubrica Geral

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.

Critérios Específicos por Bimestre

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

Critério Descrição Pontuação
Estrutura HTML Criou a estrutura HTML completa com tags semânticas, indentação e organização. 0-3
Estilização CSS Usou seletores, propriedades essenciais, layout moderno e responsividade. 0-3
Interatividade JS Criou variáveis, funções, manipulou o DOM e implementou eventos. 0-4
Total 0-10

Critério Descrição Pontuação
Arrays e Dados Criou e manipulou arrays com métodos essenciais (push, pop, forEach, etc.). 0-3
Funções Criou funções com parâmetros e retorno, modularizando o código. 0-3
Refatoração Refatorou código repetido para usar funções reutilizáveis. 0-2
Debug Identificou e corrigiu bugs, usou ferramentas de debug. 0-2
Total 0-10

Critério Descrição Pontuação
Clareza da Apresentação Explicou o projeto de forma clara, organizada e envolvente. 0-2
Demonstração Funcional Projeto 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

Matriz de Correlação por Bimestre:

  • Bimestre 1: Planejamento e Fundação Plano de Projeto + Pitch (peso 25%)
  • Bimestre 2: Construção (HTML+CSS+JS) Protótipo Funcional (peso 25%)
  • Bimestre 3: Estruturação de Dados e Lógica Código Refatorado (peso 25%)
  • Bimestre 4: Apresentação e Comunicação Shark Tank + Autoavaliação (peso 25%)

ENCERRAMENTO O QUE VEM DEPOIS?

A Grande Estreia não é o fim. É o começo.

O que vocês construíram nestas 40 semanas não foi apenas um projeto. Foi uma transformação. Vocês entraram como usuários consumindo algoritmos, dados, dopamina e bolhas e saem como criadores. Pessoas que entendem como as máquinas funcionam, questionam o que elas fazem e constroem alternativas melhores.

O mundo digital não vai mudar sozinho. Ele vai mudar porque pessoas como vocês decidiram que não querem mais ser reféns querem ser arquitetos.

Guardem isso:

  • Algoritmos não são neutros mas podem ser justos, se vocês os programarem.
  • Dados são poder mas poder pode ser compartilhado, se vocês exigirem.
  • A atenção é finita mas pode ser direcionada para o que importa, se vocês escolherem.
  • Bolhas isolam mas podem ser estouradas, se vocês buscarem diversidade.
  • A lei protege mas só funciona se vocês a conhecerem e a exigirem.
  • A netiqueta importa porque o que vocês fazem online define quem vocês são.

"Revolução não é um evento. É um processo. E ele começa com uma pergunta: 'Que problema eu quero resolver?'"

Vocês já têm a resposta. Agora é colocar a mão na massa para sempre.

🚀 "Deixem de ser boi de feed. Vocês são engenheiros do futuro digital. Usem o root com ética, com deboche e com café ao extremo."


"E foi assim que um monte de adolescentes descobriu que o problema não era o algoritmo...
...era o fato de que eles passavam 5 horas por dia rolando o feed enquanto o código que eles mesmos escreveram continuava rodando, esperando que eles finalmente percebessem que a maior revolução digital começa quando você desliga o celular, abre o VS Code e começa a escrever o futuro.
Não foi sobre HTML, CSS ou JavaScript. Foi sobre aprender que toda ferramenta digital reflete valores, intenções e visões de mundo. E que a única forma de mudar o jogo é aprender as regras para depois quebrá-las com propósito.
Parabéns, guerreiros digitais. Vocês codificaram a revolução. E o mundo nunca mais será o mesmo."