desenvolvimento pre-lancamento

Commit inicial - add do repo privado para o repo NT

style: changes header's logo and colors

style: changes home page first session layout

feat: creates about us home page section

chore: creates home page section for whom

chore: creates student materails home page section

chore: creates teachers materials home page section

chore: creates teacher materials home page section

style: changes primary color

style: changes color at activities page

style: changes about page color

style: changes name to Decoda

fix: changes route to about page at footer

fix: changes background color

style: changes game page header colors

style: changes footer colors

chore: adds home page sections title

style: changes main font family to Lato

style: adds title font

fix: changes sizes to be more responsive for mobile

ajuste no build vercel

atualiza regras envio homol

Adiciona instrucoes de uso

add JupyterLite

fix solucao turtle

Add Mole Mash e Modal de Falhas

Add Progress Bar na pagina de Atividades

fix game name

chore: atualiza lockfile removendo vercel analytics

inclusão de efeito ao mudar de fase

add mecanismo de solução de fases em debug

vite config test

add BaseGame e refator do MoleMash

refatoração turtle

refatoração automato

refatoração automato

add tag

bug 1 e 2 automato

mostrar apenas games em homologação na pagina de atividades

aumentar timeout das fases finais do Turtle

fix bug scroll

add video

refactor semaforo

arrumar ordem das cores

add build docs

update vercel

update vercel

update vercel

update vercel

update vercel

add vercel jupyter

add vercel jupyter

fix deploy Vercel

fix deploy Vercel

fix deploy Vercel

add cripto

add cripto

refatoração

fix tour Mole Mash

.

remover arquivos de controle

chore: adds development tag for activity card

remover arquivos de status indevidamente versionados

atualizar cores nas atividades

add Quebra Cabeças

add Quebra Cabeças

add iniciativas

add Iniciativas

alteração de fotos pesadas

fix menu mobile

fix menu mobile

fix menu mobile

add Aspirador

update icons

update identidade visual documentação

update jupyter

add kernel python local

add kernel python local

add kernel python local

feat: add health check

feat: add primeiros passos

add letramento

mover letramento de lugar

update path games

update path games

fix: ajuste clique rapido no botão executar

remover dead code

fix: refactor: extract shared utilities for storage, phase unlock and mobile detection

stabilize context references and fix stale closure

extrair GameProgressContext do GameStateContext (SRP)

refactor(game): extrair usePhaser e useGameModals de GameBase + corrigir bugs descobertos

refactor(game): remove todos os aliases PT/EN duplicados

Remover aliases PT/EN da camada de modais

refactor + tests

security: add CodeSanitizer and integrate into GameInterpreter

- CodeSanitizer.js: 4 built-in rules (max_length, infinite_while,
  infinite_for, excessive_nesting) with pluggable extra rules
- GameInterpreter.executeCode: calls sanitizeCode() before js-interpreter,
  differentiates CodeSanitizationError (warn) from other errors (error)
- 21 unit tests for CodeSanitizer (100% coverage)
- 4 integration tests in GameInterpreter for sanitization paths

add CodeSanitizer

fix: fase 10 aspirador

fix: bug semaforo

teste

feat: add version

Ajusta a landing page para ficar mais próxima ao protótipo

ajusta raio da borda do botão de Acesse nosso Laboratório

pequenos ajustes de layout na página de iniciativas

atualiza tabela de jogos educativos com os jogos disponíveis atualmente

ajustados pequenos detalhes e informações do jogos na seção de guias pedagógicos

troca nome playground para laboratório e adiciona imagens do lab

adiciona documentação de conceitos básicos de programação

ajustado pequenos erros de digitação

adiciona tooltip com conceitos escondidos em hover na tag +N de conceitos

update docs dev

desativar tour

setup matriz MoleMash

setup matriz MoleMash

fix: link

update version

update docs

update docs

mudou o layout de quem somos

mudei as imgs dos icons e baixei o botao

centraliza titulo com imagem e ajusta sessão com gradiente vermelho-rosa

adiciona responsividade para a pagina quem somos

ajusta botão de conheça nossa história

ajustes

ajustes na home + add. teclado

update version

security

security

feat: add tapume para telas pequenas

v1.1.0

feat: decoda offline

feat: doc offline

offline

fix: ajustes para release

fix: navbar; config ordenação; versão

fix: rotas docs e jupyter para pwa

delete private files

Co-authored-by: Indra Araujo <indra.araujo.santos@gmail.com>
Co-authored-by: solange dos santos <sollangelive71@gmail.com>

docs/edu/fundamentos-programacao/programacao-com-blocos.md

@@ -0,0 +1,198 @@
+---
+sidebar_position: 4
+title: "Programação com Blocos"
+---
+
+Compreenda os princípios pedagógicos por trás da programação visual com blocos.
+
+## **Base Pedagógica**
+
+O Decoda utiliza princípios educacionais modernos:
+
+- **<i class="fas fa-users"></i> Aprendizagem colaborativa**: Estudantes aprendem juntos
+- **<i class="fas fa-comments"></i> Diálogo**: Discussão coletiva de estratégias
+- **<i class="fas fa-lightbulb"></i> Reflexão**: "Por que funciona assim?"
+- **<i class="fas fa-cogs"></i> Prática**: Aprender fazendo
+
+## **Pensamento Computacional**
+
+A programação visual desenvolve os **4 pilares** do pensamento computacional:
+
+### **1. Decomposição**
+
+**Dividir problemas complexos em partes menores**
+
+**<i class="fas fa-bullseye"></i> Exemplo no Semáforo:**
+
+- <i class="fas fa-exclamation-triangle"></i> Problemática: "Como melhorar mobilidade urbana?"
+- <i class="fas fa-search"></i> Investigação:
+  - Acender luz verde (fluxo de carros)
+  - Aguardar tempo (tempo social)
+  - Acender luz amarela (transição)
+  - Considerar pedestres (inclusão social)
+
+### **2. Reconhecimento Crítico de Padrões**
+
+**Identificar estruturas que se repetem na sociedade**
+
+**<i class="fas fa-bullseye"></i> Exemplo no Aspirador:**
+
+- <i class="fas fa-repeat"></i> Padrão que se repete: "avançar no grid → ver o que há na célula (sujeira, obstáculo, espaço livre) → decidir o próximo movimento" — até limpar a sala ou cumprir o desafio da fase.
+- <i class="fas fa-lightbulb"></i> Reflexão: Onde no cotidiano repetimos "perceber o contexto → decidir → agir" (trabalho, deslocamento, tarefas em casa)?
+- <i class="fas fa-code"></i> Codificação: **Loops** e **condicionais** nos blocos reproduzem esse ciclo nos dois jogos da plataforma.
+
+### **3. Abstração Contextualizada**
+
+**Focar no essencial sem perder a dimensão social**
+
+**<i class="fas fa-bullseye"></i> Exemplo no Tartaruga:**
+
+- <i class="fas fa-shapes"></i> Abstração: "Desenhar polígono"
+- <i class="fas fa-ruler-combined"></i> Elementos essenciais: lados, ângulos, tamanho
+- <i class="fas fa-question-circle"></i> Questão crítica: "Que formas geométricas vemos na nossa cidade?"
+- <i class="fas fa-cog"></i> Função: `desenharPoligono(lados, tamanho)`
+
+### **4. Algoritmos para Transformação**
+
+**Criar instruções que promovam mudança social**
+
+**<i class="fas fa-bullseye"></i> Exemplo geral:**
+
+```
+1. PROBLEMATIZAR situação real
+2. SE há injustiça ou exclusão
+   ENTÃO buscar solução coletiva
+   SENÃO manter status quo
+3. REPETIR até transformação alcançada
+4. AVALIAR impacto social
+```
+
+## **Teoria das Inteligências Múltiplas Aplicada**
+
+A programação visual atende diferentes formas de aprendizagem respeitando a diversidade:
+
+### **Visual-Espacial**
+
+- **Blocos coloridos** por categoria funcional
+- **Formas geométricas** com significado pedagógico
+- **Fluxo visual** do raciocínio lógico
+
+### **Lógico-Matemática**
+
+- **Sequências lógicas** de comandos contextualizados
+- **Padrões numéricos** aplicados a problemas reais
+- **Resolução sistemática** de questões sociais
+
+### **Corporal-Cinestésica**
+
+- **Arrastar e soltar** blocos fisicamente
+- **Manipulação tátil** da interface
+- **Movimento visual** dos elementos do jogo
+
+### **Linguística**
+
+- **Blocos em português** acessível
+- **Narrativas** conectadas à realidade
+- **Explicação verbal** das estratégias
+
+## **Aprendizagem Significativa Contextualizada**
+
+O Decoda conecta conhecimento prévio com novos conceitos de forma **culturalmente relevante**:
+
+### **Ancoragem Cultural**
+
+| **Experiência Prévia** | **Conceito Novo** | **Jogo** | **Dimensão Social** |
+| --- | --- | --- | --- |
+| <i class="fas fa-puzzle-piece"></i> Organizar objetos e lembrar “onde fica cada coisa” | Variáveis, atribuição | Quebra-cabeças | Organização do cotidiano |
+| <i class="fas fa-ring"></i> Rotinas de limpeza e aspiradores robô no dia a dia | Loops, sequências | Aspirador | Cuidado com o espaço vivido |
+| <i class="fas fa-robot"></i> Aparelhos e sistemas que mudam de comportamento conforme o contexto | Estados, lógica | Autômato | Automação e mundo do trabalho |
+| <i class="fas fa-traffic-light"></i> Semáforos da rua e regras de espera / passagem | Sequências, condições | Semáforo | Mobilidade urbana |
+| <i class="fa-solid fa-draw-polygon"></i> Desenho manual, plantas baixas e formas no caderno | Geometria, arte | Tartaruga | Arte como expressão |
+| <i class="fas fa-circle"></i> Jogos em grade, sorteios e adivinhar posições com poucas pistas | Matriz, aleatoriedade | Toupeira | Decidir sob incerteza |
+| <i class="fa-solid fa-unlock-keyhole"></i> Senhas, bilhetes secretos e mensagens só para quem sabe o código | Criptografia, repetição | Cripto | Privacidade e segurança digital |
+
+### **Zona de Desenvolvimento Próximo (Vygotsky + Freire)**
+
+1. **<i class="fas fa-user"></i> Nível Atual**: O que o estudante já conhece do mundo
+2. **<i class="fas fa-users"></i> Mediação Social**: Diálogo com pares e educador
+3. **<i class="fas fa-bullseye"></i> Objetivo**: Nova consciência a ser desenvolvida
+4. **<i class="fas fa-fist-raised"></i> Autonomia**: Estudante transforma sua realidade
+
+## **Psicologia dos Blocos Visuais**
+
+### **Design Pedagógico Consciente**
+
+#### **Cores dos Blocos**
+
+| **Cor** | **Amostra visual** | **Significado pedagógico** |
+| --- | --- | --- |
+| Azul | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#3b82f6", borderRadius: "50%", border: "1px solid #1e3a8a"}}></span> | Movimentos e ações |
+| Verde | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#22c55e", borderRadius: "50%", border: "1px solid #166534"}}></span> | Lógica e decisões |
+| Amarelo | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#facc15", borderRadius: "50%", border: "1px solid #a16207"}}></span> | Eventos e gatilhos |
+| Vermelho | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#ef4444", borderRadius: "50%", border: "1px solid #991b1b"}}></span> | Controles e limites |
+| Roxo | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#a855f7", borderRadius: "50%", border: "1px solid #6b21a8"}}></span> | Variáveis e dados |
+
+#### **Formas com Significado Funcional**
+
+- **<i class="fas fa-circle"></i> Círculos**: Início/fim de processos
+- **<i class="fas fa-square"></i> Retângulos**: Ações concretas
+- **<i class="fas fa-diamond"></i> Losangos**: Pontos de decisão
+- **<i class="fa-solid fa-hexagon"></i> Hexágonos**: Entradas e sensores
+
+### **Carga Cognitiva Consciente**
+
+Os blocos reduzem sobrecarga mental para **focar na reflexão crítica**:
+
+#### **Liberação Cognitiva**
+
+- **<i class="fas fa-bolt"></i> Menos memória**: Energia mental para problematizar
+- **<i class="fas fa-bullseye"></i> Foco social**: Concentração em questões relevantes
+- **<i class="fas fa-sync"></i> Feedback rápido**: Validação imediata das hipóteses
+- **<i class="fas fa-fire"></i> Motivação**: Resultados visuais engajam na aprendizagem
+
+## **Taxonomia de Freire Aplicada**
+
+Progressão pedagógica baseada na **Pedagogia do Oprimido**:
+
+### **Níveis de Conscientização**
+
+1. **<i class="fas fa-seedling"></i> Consciência Ingênua** (Fase 1)
+
+   - Usa blocos sem questionar
+   - Segue instruções mecanicamente
+
+2. **<i class="fas fa-question"></i> Consciência Crítica** (Fase 2-3)
+
+   - Questiona "por que funciona assim?"
+   - Compara diferentes estratégias
+
+3. **<i class="fas fa-lightbulb"></i> Consciência Mágica** (Evitar)
+
+   - Acredita que tecnologia resolve tudo
+   - Não vê limitações sociais
+
+4. **<i class="fas fa-fist-raised"></i> Consciência Revolucionária** (Fase 4-5)
+   - Vê programação como ferramenta de transformação
+   - Cria soluções para problemas comunitários
+
+## **Avaliação Libertadora**
+
+Monitoramento que promove conscientização:
+
+### **Indicadores de Transformação**
+
+- **<i class="fas fa-clock"></i> Tempo de reflexão**: Qualidade do pensamento crítico
+- **<i class="fas fa-comments"></i> Diálogo**: Participação nas discussões coletivas
+- **<i class="fas fa-lightbulb"></i> Problematização**: Capacidade de questionar
+- **<i class="fas fa-hands-helping"></i> Solidariedade**: Colaboração e apoio mútuo
+
+### **Feedback Dialógico**
+
+- **<i class="fas fa-check-circle"></i> Valorização**: Reconhecimento do conhecimento prévio
+- **<i class="fas fa-question-circle"></i> Problematização**: Perguntas que geram reflexão
+- **<i class="fas fa-arrow-up"></i> Desafio**: Estímulo para superação coletiva
+- **<i class="fas fa-redo"></i> Praxis**: Ciclo ação-reflexão-nova ação
+
+---
+
+**<i class="fas fa-search"></i> Próximo**: Explore [**Os Quatro Fundamentos**](./quatro-fundamentos/condicionais) — condicionais, loops, funções e procedural — para aprofundar a programação visual a partir desta base pedagógica!