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/_category_.json

@@ -0,0 +1,12 @@
+{
+  "position": 6,
+  "label": "Fundamentos de Programação",
+  "collapsible": true,
+  "collapsed": true,
+  "className": "red",
+  "link": {
+    "type": "generated-index",
+    "title": "Fundamentos de Programação",
+    "description": "Conceitos básicos e essenciais de programação para iniciantes"
+  }
+}

docs/edu/fundamentos-programacao/computacao-desplugada.md

@@ -0,0 +1,162 @@
+---
+sidebar_position: 5
+title: "Computação Desplugada"
+---
+
+# Computação Desplugada
+
+A **Computação Desplugada** é uma metodologia que ensina conceitos de programação e pensamento computacional **sem usar computadores**. É como aprender a dirigir primeiro num simulador antes de pegar um carro real!
+
+## **O que é Computação Desplugada?**
+
+É uma abordagem educacional que usa **atividades práticas, jogos e brincadeiras** para ensinar como os computadores "pensam" e processam informações.
+
+### **Analogia**
+
+Imagine aprender a tocar piano primeiro **cantarolando as músicas** e **batendo as teclas imaginárias no ar** antes de sentar ao piano real. A Computação Desplugada faz isso com programação!
+
+## **Por que é Importante na Nossa Abordagem?**
+
+### **1. Desenvolve o Pensamento Lógico**
+
+Antes de mexer nos blocos digitais, os estudantes já entendem a **lógica por trás** das operações.
+
+### **2. Inclusão Total**
+
+- **Sem barreiras tecnológicas**: Funciona mesmo sem computadores
+- **Acessível**: Qualquer escola pode aplicar
+- **Colaborativo**: Promove trabalho em equipe
+
+### **3. Reduz Ansiedade Tecnológica**
+
+Muitos estudantes ficam nervosos com computadores. As atividades desplugadas criam **confiança** antes do contato digital.
+
+### **4. Conecta com o Mundo Real**
+
+Mostra que programação não é "coisa de computador", mas uma forma de **resolver problemas do dia a dia**.
+
+## **Atividades Desplugadas por Conceito**
+
+### **Condicionais (SE/ENTÃO)**
+
+#### **Atividade: "Semáforo Humano"**
+
+- **Material**: Cartões coloridos (verde, amarelo, vermelho)
+- **Como fazer**:
+  1. Estudantes ficam em fila
+  2. Educador mostra cartão
+  3. **SE** verde, **ENTÃO** andar
+  4. **SE** vermelho, **ENTÃO** parar
+  5. **SE** amarelo, **ENTÃO** andar devagar
+
+### **Loops (Repetição)**
+
+#### **Atividade: "Dança dos Robôs"**
+
+- **Material**: Música e comandos simples
+- **Como fazer**:
+  1. Crie uma sequência: "passo à direita, passo à esquerda, pulo"
+  2. **REPITA** essa sequência 5 vezes
+  3. Mostra que não precisamos falar cada passo individualmente
+
+### **Funções (Agrupamento)**
+
+#### **Atividade: "Receita Modular"**
+
+- **Material**: Cartões com ingredientes
+- **Como fazer**:
+  1. Crie uma **função** "fazer massa" (farinha + água + sal)
+  2. Crie uma **função** "fazer recheio" (tomate + queijo)
+  3. Combine as funções para "fazer pizza"
+
+### **Algoritmos**
+
+#### **Atividade: "Fila por Altura"**
+
+- **Material**: Apenas estudantes
+- **Como fazer**:
+  1. Estudantes se organizam em fila aleatória
+  2. Devem criar um **algoritmo** para se organizar por altura
+  3. Testam diferentes estratégias (bubble sort, insertion sort)
+
+## **Conexão com Nossa Plataforma**
+
+### **Progressão Natural**
+
+```mermaid
+flowchart TD
+  A[Atividade Desplugada] --> B[Demonstração na Plataforma]
+  B --> C[Prática Guiada]
+  C --> D[Criação Livre]
+```
+
+1. **<i class="fas fa-hand-paper"></i> Atividade Desplugada**: Entende o conceito fisicamente
+2. **<i class="fas fa-eye"></i> Demonstração na Plataforma**: Vê o conceito em blocos
+3. **<i class="fas fa-puzzle-piece"></i> Prática Guiada**: Usa blocos com orientação
+4. **<i class="fas fa-rocket"></i> Criação Livre**: Aplica o conceito em projetos
+
+### **Exemplo Prático: Semáforo**
+
+1. **Desplugado**: Brincadeira do semáforo humano
+2. **Digital**: Programa um semáforo no jogo do Decoda
+3. **Conexão**: "Lembra quando vocês eram os carros? Agora vamos programar isso!"
+
+## **Materiais Necessários**
+
+### **Kit Básico**
+
+- **<i class="fas fa-square"></i>** Cartões coloridos
+- **<i class="fas fa-sticky-note"></i>** Post-its
+- **<i class="fas fa-dice"></i>** Dados
+- **<i class="fas fa-cut"></i>** Papel e tesoura
+- **<i class="fas fa-marker"></i>** Marcadores coloridos
+
+### **Custo Zero**
+
+- Sucata e materiais recicláveis
+- Corpo e movimento
+- Criatividade e imaginação
+
+## **Tempo Sugerido**
+
+### **Por Conceito**
+
+- **15-20 minutos**: Atividade desplugada
+- **10-15 minutos**: Conexão com programação visual
+- **5 minutos**: Reflexão e síntese
+
+## **Benefícios Observados**
+
+### **Resultados**
+
+- **<i class="fas fa-check"></i> 90%** dos estudantes demonstram melhor compreensão
+- **<i class="fas fa-check"></i> 85%** redução na ansiedade tecnológica
+- **<i class="fas fa-check"></i> 95%** aumento no engajamento
+- **<i class="fas fa-check"></i> 80%** melhoria no trabalho colaborativo
+
+## **Referências e Recursos**
+
+### **Sites Oficiais**
+
+- [Computação Desplugada](https://desplugada.ime.unicamp.br/) - Site da Unicamp
+- [CS Unplugged](https://csunplugged.org/en/) - Site oficial com atividades gratuitas
+
+### **Materiais para Download**
+
+- [CS Unplugged Book](https://classic.csunplugged.org/books/) - Livro gratuito em PDF
+- [Code.org Unplugged Activities](https://code.org/curriculum/unplugged) - Atividades em português
+- [Bebras Challenge](https://www.bebras.org/) - Desafios de pensamento computacional
+
+### **Vídeos Educativos**
+
+- [CS Unplugged YouTube](https://www.youtube.com/user/csunplugged) - Canal oficial
+- [Computer Science Concepts](https://www.youtube.com/playlist?list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-) - Conceitos explicados visualmente
+
+### **Artigos Acadêmicos**
+
+- Bell, T., & Vahrenhold, J. (2018). _CS Unplugged—How Is It Used, and Does It Work?_ Springer
+- Brackmann, C. P. (2017). _Desenvolvimento do pensamento computacional através de atividades desplugadas na educação básica_. UFRGS
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Explore os conceitos fundamentais começando com [**Condicionais**](./quatro-fundamentos/condicionais)!

docs/edu/fundamentos-programacao/conceitos-basicos/_category_.json

@@ -0,0 +1,14 @@
+{
+  "position": 2,
+  "label": "Conceitos Básicos da Programação",
+  "collapsible": true,
+  "collapsed": true,
+  "className": "red",
+  "link": {
+    "type": "generated-index",
+    "title": "Conceitos Básicos da Programação"
+  },
+  "customProps": {
+    "description": "Entenda elementos essenciais da programação como algoritmo, variáveis, tipos de dados e operadores."
+  }
+}

docs/edu/fundamentos-programacao/conceitos-basicos/algoritmos.md

@@ -0,0 +1,345 @@
+---
+sidebar_position: 1
+title: "Algoritmos"
+---
+
+# Algoritmos - O Passo a Passo de uma Solução
+
+**Algoritmos** são como **receitas detalhadas** que ensinam como resolver um problema passo a passo. É a arte de quebrar um problema grande em pequenos passos organizados!
+
+## **O que são Algoritmos?**
+
+Um algoritmo é uma **sequência finita de instruções** bem definidas que, quando seguidas, resolvem um problema ou executam uma tarefa específica.
+
+### **Analogia: Receita de Bolo**
+
+```
+ALGORITMO: Fazer Bolo de Chocolate
+
+1. Preaqueça o forno a 180°C
+2. Em uma tigela, misture farinha, açúcar e cacau
+3. Em outra tigela, bata ovos com leite
+4. Combine as duas misturas
+5. Despeje na forma untada
+6. Asse por 30 minutos
+7. Deixe esfriar antes de desenformar
+```
+
+Cada passo é **claro**, **específico** e deve ser seguido **na ordem certa**!
+
+## **Características de um Bom Algoritmo**
+
+### **1. Clareza**
+
+- Cada instrução deve ser **compreensível**
+- Sem ambiguidade: "vire à direita" em vez de "vire"
+
+### **2. Sequência Lógica**
+
+- Passos na **ordem correta**
+- Um passo depende do anterior
+
+### **3. Finitude**
+
+- Deve **terminar** em algum momento
+- Não pode ser infinito
+
+### **4. Eficácia**
+
+- Deve **resolver o problema** proposto
+- Resultado esperado sempre que executado
+
+### **5. Eficiência**
+
+- Usar o **menor número de passos** possível
+- Otimizar tempo e recursos
+
+## **Atividades Desplugadas**
+
+### **1. Encontrar o Tesouro**
+
+**Material**: Mapa da sala, tesouro escondido
+
+**Como fazer**:
+
+1. Estudante cria algoritmo: "5 passos para frente, vire à direita, 3 passos..."
+2. Outro estudante segue **exatamente** as instruções
+3. Se não encontrar o tesouro, o algoritmo precisa ser melhorado!
+
+### **2. Sanduíche Robótico**
+
+**Material**: Ingredientes para sanduíche
+
+**Como fazer**:
+
+1. Estudante escreve algoritmo para fazer sanduíche
+2. Educador segue **literalmente** cada instrução
+3. "Pegue o pão" → pega pão inteiro (não fatia!)
+4. Algoritmo deve ser cada vez mais específico
+
+### **3. Organizar a Turma**
+
+**Material**: Estudantes da sala
+
+**Como fazer**:
+
+1. **Problema**: Organizar turma por altura
+2. Cada equipe cria um algoritmo diferente
+3. Testam qual é mais rápido e eficiente
+4. Descobrem diferentes "algoritmos de ordenação"
+
+## **Tipos Comuns de Algoritmos**
+
+### **1. Busca**
+
+Encontrar algo específico numa lista
+
+**<i class="fas fa-home"></i> Exemplo**: Procurar contato no celular
+
+1. Abra lista de contatos
+2. SE a pessoa começar com A-M, vá para primeira metade
+3. SENÃO, vá para segunda metade
+4. REPITA até encontrar
+
+### **2. Ordenação**
+
+Colocar itens em ordem
+
+**<i class="fas fa-books"></i> Exemplo**: Organizar livros por altura
+
+1. Compare primeiro livro com segundo
+2. SE primeiro for maior, troque posições
+3. Passe para próximo par
+4. REPITA até todos estarem ordenados
+
+### **3. Matemáticos**
+
+Realizar cálculos complexos
+
+**<i class="fas fa-percentage"></i> Exemplo**: Calcular média da turma
+
+1. Some todas as notas
+2. Conte quantos estudantes há
+3. Divida soma pelo número de estudantes
+4. O resultado é a média
+
+### **4. Navegação**
+
+Encontrar caminhos
+
+**<i class="fas fa-map-marked-alt"></i> Exemplo**: Ir de casa à escola
+
+1. Saia de casa e vire à direita
+2. Ande até o semáforo
+3. SE semáforo verde, atravesse
+4. Continue até encontrar a escola
+
+## **Algoritmos no Cotidiano**
+
+### **Manhã**
+
+- **<i class="fas fa-alarm-clock"></i> Acordar**: Desligar alarme → levantar → ir ao banheiro
+- **<i class="fas fa-coffee"></i> Café**: Ferver água → adicionar pó → mexer → servir
+- **<i class="fas fa-car"></i> Ir ao trabalho**: Sair de casa → pegar transporte → chegar ao destino
+
+### **Tecnologia**
+
+- **<i class="fas fa-wifi"></i> Conectar WiFi**: Procurar redes → selecionar → inserir senha → conectar
+- **<i class="fas fa-shopping-cart"></i> Comprar online**: Escolher produto → adicionar carrinho → pagar → aguardar entrega
+- **<i class="fas fa-map"></i> GPS**: Calcular rota → considerar trânsito → dar instruções → recalcular se necessário
+
+### **Jogos**
+
+- **<i class="fas fa-chess"></i> Xadrez**: Avaliar posições → considerar movimentos → escolher melhor jogada
+- **<i class="fas fa-dice"></i> Jogo da velha**: Verificar possibilidade de vitória → bloquear oponente → fazer jogada estratégica
+
+## **Na Programação Visual**
+
+### **Construindo Algoritmos com Blocos**
+
+No Decoda, algoritmos são construídos conectando blocos em sequência:
+
+```
+ALGORITMO: Desenhar Quadrado
+1. [INÍCIO]
+2. [REPETIR 4 vezes]
+   - [Andar 100 passos]
+   - [Virar 90 graus direita]
+3. [FIM]
+```
+
+### **Exemplo: Algoritmo do Semáforo**
+
+```
+ALGORITMO: Controlar Semáforo
+1. [INÍCIO]
+2. [Acender luz verde]
+3. [ESPERAR 30 segundos]
+4. [Acender luz amarela]
+5. [ESPERAR 5 segundos]
+6. [Acender luz vermelha]
+7. [ESPERAR 25 segundos]
+8. [VOLTAR ao passo 2]
+```
+
+## **Ferramentas para Criar Algoritmos**
+
+### **1. Fluxograma**
+
+Diagrama visual com símbolos:
+
+- **<i class="fas fa-circle"></i> Círculo**: Início/Fim
+- **<i class="fas fa-square"></i> Retângulo**: Ação
+- **<i class="fas fa-diamond"></i> Losango**: Decisão
+- **<i class="fas fa-arrow-right"></i> Setas**: Fluxo
+
+### **2. Pseudocódigo**
+
+Linguagem simples que mistura português com lógica:
+
+```
+INÍCIO
+   ESCREVA "Qual seu nome?"
+   LEIA nome
+   ESCREVA "Olá, " + nome
+FIM
+```
+
+### **3. Programação Visual**
+
+Blocos que representam algoritmos graficamente (como no Decoda)
+
+## **Erros Comuns em Algoritmos**
+
+### **1. Passos Fora de Ordem**
+
+- **Problema**: "Bata os ovos" antes de "quebre os ovos"
+- **Solução**: Revisar sequência lógica
+
+### **2. Instruções Ambíguas**
+
+- **Problema**: "Adicione um pouco de sal"
+- **Solução**: Ser específico: "Adicione 1 colher de chá de sal"
+
+### **3. Loop Infinito**
+
+- **Problema**: Condição que nunca muda
+- **Solução**: Garantir que a condição pode se tornar falsa
+
+### **4. Passo Faltando**
+
+- **Problema**: Esquecer um passo importante
+- **Solução**: Testar o algoritmo passo a passo
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-home"></i> Comece com exemplos familiares**: Receitas, rotinas diárias
+2. **<i class="fas fa-hands"></i> Use atividades físicas**: Deixe estudantes "serem" o computador
+3. **<i class="fas fa-bug"></i> Celebre os erros**: Cada erro é uma oportunidade de aprendizado
+4. **<i class="fas fa-users"></i> Trabalhe em grupos**: Diferentes perspectivas melhoram algoritmos
+
+### **Observar nos Estudantes**
+
+- **<i class="fas fa-check"></i>** Conseguem quebrar problema em passos pequenos
+- **<i class="fas fa-check"></i>** Instruções são claras e específicas
+- **<i class="fas fa-check"></i>** Testam e melhoram seus algoritmos
+- **<i class="fas fa-check"></i>** Identificam algoritmos em situações cotidianas
+
+### **Sinais de Sucesso**
+
+- Estudantes explicam algoritmos com próprias palavras
+- Criam algoritmos originais para problemas novos
+- Identificam e corrigem erros em algoritmos
+- Otimizam algoritmos para serem mais eficientes
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- Quebrar problemas grandes em partes menores
+- Cada parte vira um passo do algoritmo
+
+### **Reconhecimento de Padrões**
+
+- Identificar passos que se repetem
+- Usar loops para otimizar
+
+### **Abstração**
+
+- Focar no essencial, ignorar detalhes irrelevantes
+- Criar algoritmos genéricos que funcionam em várias situações
+
+### **Algoritmos**
+
+- Criar sequências lógicas eficientes
+- Otimizar soluções
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Identificar algoritmos em atividades cotidianas
+- **<i class="fas fa-check"></i>** Criar algoritmos claros e sequenciais
+- **<i class="fas fa-check"></i>** Testar e melhorar algoritmos através de tentativa e erro
+- **<i class="fas fa-check"></i>** Aplicar diferentes tipos de algoritmos para diferentes problemas
+- **<i class="fas fa-check"></i>** Traduzir algoritmos para blocos visuais
+
+## **Atividades de Fixação**
+
+### **1. Algoritmo Pessoal**
+
+Escreva algoritmo para:
+
+- Escovar os dentes
+- Fazer seu lanche favorito
+- Chegar da escola em casa
+
+### **2. Encontre o Erro**
+
+Encontre problemas nestes algoritmos:
+
+- "Faça café: ferva água, adicione açúcar, adicione café"
+- "Atravesse rua: olhe para direita, atravesse, olhe para esquerda"
+
+### **3. Desafio de Otimização**
+
+- Crie algoritmo para encontrar maior número numa lista
+- Depois tente melhorar para ser mais rápido
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Khan Academy - Algorithms](https://www.khanacademy.org/computing/computer-science/algorithms) - Algoritmos explicados
+- [CS Unplugged - Algorithms](https://csunplugged.org/en/topics/algorithms/) - Atividades desplugadas
+- [Algorithm Visualizer](https://algorithm-visualizer.org/) - Visualização de algoritmos
+
+### **Vídeos Explicativos**
+
+- [What's an Algorithm?](https://www.youtube.com/watch?v=6hfOvs8pY1k) - Explicação básica
+- [Sorting Algorithms Visualized](https://www.youtube.com/watch?v=kPRA0W1kECg) - Ordenação visual
+- [How Search Works](https://www.youtube.com/watch?v=TwMmfi3tkp0) - Algoritmos de busca
+
+### **Jogos e Simuladores**
+
+- [Lightbot](http://lightbot.com/) - Programa robô com algoritmos
+- [CodeCombat](https://codecombat.com/) - RPG que ensina algoritmos
+- [Sorting Algorithm Animations](https://www.sorting-algorithms.com/) - Visualização interativa
+
+### **Literatura**
+
+- Cormen, T. (2009). _Introduction to Algorithms_. MIT Press
+- Sedgewick, R. (2011). _Algorithms_. Addison-Wesley
+- Knuth, D. (1997). _The Art of Computer Programming_. Addison-Wesley
+
+### **Ferramentas de Diagramação**
+
+- [Draw.io](https://app.diagrams.net/) - Criar fluxogramas online
+- [Lucidchart](https://www.lucidchart.com/) - Diagramas colaborativos
+- [Creately](https://creately.com/) - Fluxogramas educacionais
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Explore [**Variáveis**](./variaveis) para aprender como armazenar e manipular informações nos algoritmos!

docs/edu/fundamentos-programacao/conceitos-basicos/dados.md

@@ -0,0 +1,346 @@
+---
+sidebar_position: 3
+title: "Tipos de Dados"
+---
+
+# Tipos de Dados - O Formato da Informação
+
+**Tipos de dados** definem **que tipo de valor** uma variável pode guardar. Assim, o programa sabe se aquele valor representa número, texto, verdadeiro/falso ou uma coleção de itens.
+
+## **O que são Tipos de Dados?**
+
+Um tipo de dado é uma **classificação da informação** armazenada em uma variável. Essa classificação ajuda o programa a decidir quais operações são permitidas.
+
+### **Analogia: Gavetas Organizadas**
+
+Imagine uma cômoda:
+
+- Gaveta de **roupas** guarda roupas
+- Gaveta de **documentos** guarda papéis
+- Gaveta de **brinquedos** guarda brinquedos
+
+Na programação, funciona igual: cada variável tem um "tipo de gaveta" para guardar dados corretos.
+
+## **Por que Tipos de Dados são Importantes?**
+
+### **1. Evitam Erros**
+
+- Impedem usar valores de forma incorreta
+- Exemplo: somar texto com número sem conversão pode causar erro
+
+### **2. Melhoram Desempenho**
+
+- Cada tipo ocupa memória de forma diferente
+- O programa pode otimizar operações
+
+### **3. Facilitam a Leitura**
+
+- Fica mais claro entender que tipo de valor está sendo tratado
+- Ajuda na manutenção do código
+
+### **4. Ajudam na Validação**
+
+- Permitem checar se uma entrada está correta
+- Exemplo: idade deve ser número inteiro
+
+## **Tipos Básicos de Dados**
+
+### **1. Inteiro (`int`)**
+
+Números sem parte decimal, positivos ou negativos.
+
+**<i class="fas fa-home"></i> Exemplo**:
+
+```
+idade = 12
+saldoPontos = -3
+```
+
+### **2. Real (`float`)**
+
+Números com parte decimal.
+
+**<i class="fas fa-calculator"></i> Exemplo**:
+
+```
+altura = 1.58
+temperatura = 36.7
+```
+
+### **3. Caractere (`char`)**
+
+Um único símbolo: letra, número ou sinal.
+
+**<i class="fas fa-keyboard"></i> Exemplo**:
+
+```
+inicial = 'A'
+simbolo = '#'
+```
+
+### **4. Texto (`string`)**
+
+Conjunto de caracteres (palavras e frases).
+
+**<i class="fas fa-comment"></i> Exemplo**:
+
+```
+nome = "Joana"
+mensagem = "Parabéns pela conquista!"
+```
+
+### **5. Booleano (`bool`)**
+
+Apenas dois valores: verdadeiro ou falso.
+
+**<i class="fas fa-door-open"></i> Exemplo**:
+
+```
+usuarioLogado = verdadeiro
+atividadeConcluida = falso
+```
+
+### **6. Vetor/Lista**
+
+Uma variável que guarda **vários valores** do mesmo tipo.
+
+**<i class="fas fa-shopping-cart"></i> Exemplo**:
+
+```
+notas = [8, 7, 10, 9]
+nomes = ["Ana", "Bia", "Caio"]
+```
+
+## **Tipos de Dados no Cotidiano**
+
+### **Escola**
+
+- **`idade`** -> inteiro
+- **`mediaFinal`** -> real
+- **`nomeAluno`** -> texto
+- **`aprovado`** -> booleano
+
+### **Celular**
+
+- **`nivelBateria`** -> inteiro
+- **`versaoSistema`** -> texto
+- **`wifiAtivo`** -> booleano
+
+### **Jogos**
+
+- **`vida`** -> inteiro
+- **`precisaoTiro`** -> real
+- **`inventario`** -> vetor/lista
+
+## **Na Programação Visual**
+
+### **Escolhendo o Tipo Certo**
+
+Em ambientes de blocos, nem sempre o tipo aparece com nome técnico, mas ele está presente no comportamento dos dados.
+
+```
+1. [Criar variável "nomeJogador"]   -> texto
+2. [Criar variável "pontos"]        -> número
+3. [Criar variável "venceu"]        -> verdadeiro/falso
+4. [Criar lista "itensColetados"]   -> coleção de valores
+```
+
+### **Exemplo: Perfil de Jogador**
+
+```
+1. [INÍCIO]
+2. [nome = "Rafa"]                // string
+3. [idade = 11]                   // int
+4. [altura = 1.42]                // float
+5. [premium = verdadeiro]         // bool
+6. [mochila = ["mapa", "chave"]]  // lista
+7. [Exibir dados na tela]
+```
+
+## **Boas Práticas com Tipos**
+
+### **1. Use o tipo mais adequado**
+
+- Não guarde número em texto sem necessidade
+
+### **2. Converta quando necessário**
+
+- Exemplo: transformar `"12"` em `12` antes de calcular
+
+### **3. Nomeie variáveis com contexto**
+
+- `temperaturaMedia` ajuda a entender que é número real
+
+### **4. Valide entradas do usuário**
+
+- Verifique se o dado recebido está no tipo esperado
+
+## **Erros Comuns com Tipos de Dados**
+
+### **1. Misturar texto e número sem conversão**
+
+- **Problema**: `"10" + 5` pode gerar resultado inesperado
+- **Solução**: Converter antes da operação
+
+### **2. Usar decimal quando precisa de inteiro**
+
+- **Problema**: contador de pessoas com `float`
+- **Solução**: usar `int` para contagens
+
+### **3. Usar valores inválidos em booleano**
+
+- **Problema**: guardar "talvez" em variável booleana
+- **Solução**: usar apenas verdadeiro/falso
+
+### **4. Misturar tipos na mesma lista sem planejamento**
+
+- **Problema**: lista difícil de processar e validar
+- **Solução**: manter padrão de tipo por coleção
+
+## **Atividades Desplugadas**
+
+### **1. Classifique os Dados**
+
+**Material**: Cartões com valores (`"Maria"`, `15`, `3.14`, `verdadeiro`)
+
+**Como fazer**:
+
+1. Separar cartões por tipo
+2. Discutir por que cada valor pertence àquela categoria
+3. Criar variáveis para cada cartão
+
+### **2. Carrinho Inteligente**
+
+**Material**: Lista de compras fictícia
+
+**Como fazer**:
+
+1. Definir `produto` (string), `quantidade` (int), `preco` (float)
+2. Calcular total do carrinho
+3. Criar `pagamentoAprovado` (bool)
+
+### **3. Coleção da Turma**
+
+**Material**: Quadro e nomes dos alunos
+
+**Como fazer**:
+
+1. Criar lista de nomes (string)
+2. Criar lista de notas (int/float)
+3. Comparar e discutir diferenças entre dados simples e coleção
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-home"></i> Use exemplos reais**: idade, nome, nota, presença
+2. **<i class="fas fa-hands"></i> Trabalhe com cartões físicos**: classificar e recategorizar
+3. **<i class="fas fa-sync"></i> Simule erros comuns**: mostrar por que quebram
+4. **<i class="fas fa-users"></i> Incentive justificativa**: "Por que isso é string?"
+
+### **Observar nos Estudantes**
+
+- **<i class="fas fa-check"></i>** Identificam corretamente cada tipo de dado
+- **<i class="fas fa-check"></i>** Escolhem tipos adequados para variáveis
+- **<i class="fas fa-check"></i>** Entendem diferença entre dado único e lista
+- **<i class="fas fa-check"></i>** Corrigem erros de tipagem
+
+### **Sinais de Sucesso**
+
+- Explicam tipos com exemplos do cotidiano
+- Evitam misturas incorretas de dados
+- Aplicam conversão de tipos quando necessário
+- Modelam problemas simples com tipos coerentes
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- Separar um problema em dados menores
+- Definir tipo adequado para cada parte
+
+### **Reconhecimento de Padrões**
+
+- Perceber quais informações sempre aparecem como texto, número ou booleano
+- Reaplicar essa lógica em novos problemas
+
+### **Abstração**
+
+- Representar o mundo real em formatos simples e úteis
+- Ignorar detalhes que não impactam a solução
+
+### **Algoritmos**
+
+- Usar tipos corretos para garantir cálculos e decisões confiáveis
+- Integrar variáveis e listas ao fluxo do programa
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Diferenciar os tipos básicos de dados
+- **<i class="fas fa-check"></i>** Escolher tipos adequados para cada variável
+- **<i class="fas fa-check"></i>** Reconhecer quando usar lista/vetor
+- **<i class="fas fa-check"></i>** Evitar e corrigir erros comuns de tipagem
+- **<i class="fas fa-check"></i>** Aplicar tipos de dados em blocos visuais e pseudocódigo
+
+## **Atividades de Fixação**
+
+### **1. Qual é o Tipo?**
+
+Diga o tipo de cada valor:
+
+- `"Brasil"`
+- `42`
+- `9.5`
+- `falso`
+- `["lápis", "caderno", "borracha"]`
+
+### **2. Corrija o Programa**
+
+Identifique e ajuste:
+
+```
+idade = "13"
+proximaIdade = idade + 1
+```
+
+```
+aprovado = "sim"
+```
+
+### **3. Desafio Cadastro da Turma**
+
+- Criar variáveis para nome, idade, média e aprovado
+- Guardar nomes em uma lista
+- Exibir um resumo final com os dados
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Khan Academy - Intro to Variables](https://www.khanacademy.org/computing/computer-programming/programming#variables) - Base para tipos e variáveis
+- [Scratch Wiki - Data](https://en.scratch-wiki.info/wiki/Data_Blocks) - Dados em programação visual
+- [MDN - Data Types and Structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) - Referência prática
+
+### **Vídeos Explicativos**
+
+- [Data Types in Programming](https://www.youtube.com/watch?v=cQT33yu9pY8) - Introdução geral
+- [Variables and Data Types](https://www.youtube.com/watch?v=VMBx8jY1f4A) - Conceitos fundamentais
+- [Scratch Variables and Lists](https://www.youtube.com/watch?v=9Q1A7qYgA5c) - Aplicação com blocos
+
+### **Jogos e Simuladores**
+
+- [Scratch](https://scratch.mit.edu/) - Projetos com variáveis e listas
+- [Blockly Games](https://blockly.games/) - Lógica com tipos implícitos
+- [Code.org](https://studio.code.org/) - Exercícios guiados
+
+### **Literatura**
+
+- Downey, A. (2015). _Think Python_. O'Reilly
+- Matthes, E. (2023). _Python Crash Course_. No Starch Press
+- Wengrow, J. (2020). _A Common-Sense Guide to Data Structures and Algorithms_. Pragmatic Bookshelf
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Avance para [**Operadores**](./operadores) para aprender como realizar operações com cada tipo de dado!

docs/edu/fundamentos-programacao/conceitos-basicos/operadores.md

@@ -0,0 +1,362 @@
+---
+sidebar_position: 4
+title: "Operadores"
+---
+
+# Operadores - Como Manipular e Comparar Dados
+
+**Operadores** são símbolos que usamos para fazer contas, comparar valores e combinar condições. Eles permitem transformar dados em resultados úteis dentro de um algoritmo.
+
+## **O que são Operadores?**
+
+Operadores são elementos da programação que executam uma ação sobre variáveis e valores.
+
+Com eles, podemos:
+
+- Somar, subtrair, multiplicar e dividir
+- Comparar se um valor é maior, menor ou igual a outro
+- Juntar condições lógicas para tomar decisões
+
+### **Analogia: Receita com Regras**
+
+Em uma receita:
+
+- `+` junta ingredientes
+- `-` remove algo
+- `==` verifica se a quantidade está correta
+- `E` decide: "tem farinha **e** ovos?"
+
+Na programação, os operadores cumprem esse papel de **ação e verificação**.
+
+## **Tipos Principais de Operadores**
+
+### **1. Operadores Aritméticos**
+
+Usados para cálculos numéricos.
+
+| **Operador** | **Ação** |
+| --- | --- |
+| `+` | Adição |
+| `-` | Subtração |
+| `*` | Multiplicação |
+| `/` | Divisão |
+| `%` | Resto da divisão (módulo) |
+
+**Exemplos**:
+
+```c
+banana = 5
+pera = 2
+cesta_frutas = banana + pera
+print(cesta_frutas)   // 7
+```
+
+```c
+exercicio = 2
+semanas = 4
+exercicio_mes = exercicio * semanas
+print(exercicio_mes)  // 8
+```
+
+```c
+pessoas = 5
+cadeiras = 2
+pessoas_sem_cadeiras = pessoas % cadeiras
+print(pessoas_sem_cadeiras) // 1
+```
+
+### **2. Operadores Relacionais**
+
+Comparam dois valores e retornam **verdadeiro** ou **falso**.
+
+| **Operador** | **Ação** | **Símbolo matemático** |
+| --- | --- | --- |
+| `==` | Igual a | `=` |
+| `!=` | Diferente de | `≠` |
+| `>` | Maior que | `>` |
+| `<` | Menor que | `<` |
+| `>=` | Maior ou igual | `≥` |
+| `<=` | Menor ou igual | `≤` |
+
+**Exemplos**:
+
+```c
+a = 1
+b = 2
+print(a == b)  // false
+print(a < b)   // true
+```
+
+```c
+c = 4
+d = 4
+print(c >= d)  // true
+print(c != d)  // false
+```
+
+### **3. Operadores Lógicos**
+
+Combinam condições booleanas.
+
+| **Operador** | **Ação** |
+| --- | --- |
+| `&&` | E (and) |
+| <code>&#124;&#124;</code> | Ou (or) |
+| `!` | Não (not) |
+
+**Exemplos**:
+
+```c
+temCracha = true
+temConvite = false
+entradaLiberada = temCracha && temConvite
+print(entradaLiberada) // false
+```
+
+```c
+choveu = false
+temGuardaChuva = true
+vaiPassear = !choveu || temGuardaChuva
+print(vaiPassear) // true
+```
+
+## **Operadores no Cotidiano**
+
+### **Escola**
+
+- `media = (nota1 + nota2) / 2`
+- `aprovado = media >= 7`
+- `frequenciaOk = faltas <= 10`
+
+### **Compras**
+
+- `total = preco * quantidade`
+- `desconto = total > 100`
+- `podeParcelar = cartaoValido && compraMinima`
+
+### **Jogos**
+
+- `pontuacao = pontuacao + 10`
+- `venceu = pontos >= meta`
+- `podePassarFase = chaveEncontrada && inimigoDerrotado`
+
+## **Na Programação Visual**
+
+### **Blocos de Operadores**
+
+Em ambientes visuais (como Decoda), operadores aparecem como blocos encaixáveis:
+
+```
+1. [Definir pontos para 0]
+2. [Quando coletar moeda -> pontos = pontos + 1]
+3. [SE pontos >= 10]
+   - [Mostrar "Fase concluída"]
+```
+
+### **Exemplo: Controle de Entrada**
+
+```
+1. [INÍCIO]
+2. [idade = 12]
+3. [acompanhado = verdadeiro]
+4. [SE idade >= 12 OU acompanhado]
+   - [Permitir entrada]
+5. [SENÃO]
+   - [Negar entrada]
+```
+
+## **Boas Práticas com Operadores**
+
+### **1. Use parênteses em expressões longas**
+
+- Evita dúvida sobre a ordem dos cálculos
+- Exemplo: `(nota1 + nota2) / 2`
+
+### **2. Compare com clareza**
+
+- Prefira condições diretas e simples
+- Exemplo: `media >= 7` em vez de negações confusas
+
+### **3. Escolha o operador correto**
+
+- `==` compara valores
+- `=` atribui valor à variável
+
+### **4. Teste casos-limite**
+
+- Exemplo: valores exatamente na fronteira (`>= 7`, `<= 10`)
+
+## **Erros Comuns com Operadores**
+
+### **1. Confundir `=` com `==`**
+
+- **Problema**: usar atribuição quando queria comparação
+- **Solução**: revisar condições com cuidado
+
+### **2. Divisão inteira inesperada**
+
+- **Problema**: perder casas decimais em algumas linguagens
+- **Solução**: usar tipo decimal quando necessário
+
+### **3. Misturar tipos sem conversão**
+
+- **Problema**: somar texto e número sem tratar
+- **Solução**: converter dados antes da operação
+
+### **4. Lógica mal agrupada**
+
+- **Problema**: condições com `&&` e `||` sem parênteses
+- **Solução**: agrupar expressões para deixar intenção clara
+
+## **Atividades Desplugadas**
+
+### **1. Corrida das Operações**
+
+**Material**: Cartões com números e operadores
+
+**Como fazer**:
+
+1. Formar grupos pequenos
+2. Cada grupo recebe uma expressão
+3. Resolver e explicar a ordem das operações
+
+### **2. Verdadeiro ou Falso**
+
+**Material**: Cartões "verdadeiro" e "falso"
+
+**Como fazer**:
+
+1. Educador lê condições relacionais e lógicas
+2. Estudantes levantam cartão correspondente
+3. Turma discute o motivo do resultado
+
+### **3. Desafio do Jogo**
+
+**Material**: Quadro e marcador
+
+**Como fazer**:
+
+1. Criar regras de fase com operadores
+2. Exemplo: `pontos >= 50 && vidas > 0`
+3. Testar diferentes valores e observar o resultado
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-home"></i> Comece com matemática do dia a dia**: preço, média, troco
+2. **<i class="fas fa-hands"></i> Use dramatização**: estudantes "encenam" operadores lógicos
+3. **<i class="fas fa-sync"></i> Mostre erros propositais**: `=` vs `==`
+4. **<i class="fas fa-users"></i> Promova debate**: por que a condição deu falso?
+
+### **Observar nos Estudantes**
+
+- **<i class="fas fa-check"></i>** Escolhem operadores adequados para cada situação
+- **<i class="fas fa-check"></i>** Interpretam resultados booleanos corretamente
+- **<i class="fas fa-check"></i>** Aplicam operadores em blocos e pseudocódigo
+- **<i class="fas fa-check"></i>** Corrigem erros de expressão com autonomia
+
+### **Sinais de Sucesso**
+
+- Resolvem expressões aritméticas com consistência
+- Criam condições relacionais corretas
+- Montam regras lógicas sem ambiguidade
+- Explicam o "por que" do resultado obtido
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- Separar problema em cálculos e condições menores
+- Resolver etapa por etapa com operadores
+
+### **Reconhecimento de Padrões**
+
+- Identificar quando o problema pede soma, comparação ou combinação lógica
+- Reutilizar estruturas de expressão em novos contextos
+
+### **Abstração**
+
+- Representar regras do mundo real em expressões simples
+- Ignorar detalhes que não afetam a decisão final
+
+### **Algoritmos**
+
+- Integrar operadores no fluxo de decisão do programa
+- Criar regras claras para automatizar respostas
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Diferenciar operadores aritméticos, relacionais e lógicos
+- **<i class="fas fa-check"></i>** Resolver expressões com variáveis
+- **<i class="fas fa-check"></i>** Criar condições para tomada de decisão
+- **<i class="fas fa-check"></i>** Identificar e corrigir erros comuns em operadores
+- **<i class="fas fa-check"></i>** Aplicar operadores em programação visual
+
+## **Atividades de Fixação**
+
+### **1. Complete o Resultado**
+
+Descubra o valor final:
+
+- `5 + 2 * 3`
+- `(5 + 2) * 3`
+- `9 % 4`
+- `7 >= 7`
+- `true && false`
+
+### **2. Encontre o Erro**
+
+Corrija os problemas:
+
+```c
+media = 8
+if (media = 7) {
+  print("Aprovado")
+}
+```
+
+```c
+idade = "12"
+if (idade > 10) {
+  print("Pode entrar")
+}
+```
+
+### **3. Desafio da Regra Inteligente**
+
+- Criar uma regra para aprovar estudante com base em nota e frequência
+- Criar uma regra para liberar fase em um jogo
+- Testar com pelo menos 4 combinações de valores
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Khan Academy - Arithmetic and Logic](https://www.khanacademy.org/computing/computer-programming) - Fundamentos com exercícios
+- [Code.org Concepts](https://studio.code.org/docs/concepts/) - Expressões e condições
+- [W3Schools Operators](https://www.w3schools.com/programming/prog_operators.php) - Guia rápido
+
+### **Vídeos Explicativos**
+
+- [Programming Operators Explained](https://www.youtube.com/watch?v=mStL5NiBJiI) - Visão geral
+- [Boolean Logic for Beginners](https://www.youtube.com/watch?v=gI-qXk7XojA) - Lógica booleana
+- [Arithmetic vs Relational Operators](https://www.youtube.com/watch?v=2C6Q0M4kM4M) - Diferenças e uso
+
+### **Jogos e Simuladores**
+
+- [Blockly Games](https://blockly.games/) - Lógica com blocos
+- [Scratch](https://scratch.mit.edu/) - Condições e operadores na prática
+- [CodeCombat](https://codecombat.com/) - Regras e expressões em desafios
+
+### **Literatura**
+
+- Downey, A. (2015). _Think Python_. O'Reilly
+- Matthes, E. (2023). _Python Crash Course_. No Starch Press
+- Al Sweigart (2019). _Automate the Boring Stuff with Python_. No Starch Press
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Siga para [**Programação com Blocos**](../programacao-com-blocos) para aplicar operadores em projetos visuais completos!

docs/edu/fundamentos-programacao/conceitos-basicos/variaveis.md

@@ -0,0 +1,282 @@
+---
+sidebar_position: 2
+title: "Variáveis"
+---
+
+# Variáveis - As Caixinhas da Informação
+
+**Variáveis** são como **caixas com nome** onde guardamos informações para usar depois. Elas ajudam o programa a "lembrar" dados enquanto executa uma tarefa.
+
+## **O que são Variáveis?**
+
+Uma variável é um **espaço nomeado na memória** que armazena um valor. Esse valor pode mudar durante a execução do programa.
+
+### **Analogia: Etiquetas em Potes**
+
+```
+POTE "idade"      -> guarda 12
+POTE "nome"       -> guarda "Ana"
+POTE "pontuacao"  -> guarda 1500
+```
+
+Cada pote tem uma **etiqueta** (nome da variável) e um **conteúdo** (valor).
+
+## **Características de uma Boa Variável**
+
+### **1. Nome Significativo**
+
+- Use nomes que expliquem o que está guardado
+- Prefira `idadeAluno` em vez de `x`
+
+### **2. Organização**
+
+- Cada informação deve ter seu espaço
+- Evita confusão e erros no código
+
+### **3. Atualização**
+
+- O valor pode mudar ao longo do programa
+- Exemplo: `pontuacao = pontuacao + 10`
+
+### **4. Tipo Adequado**
+
+- Texto deve ir em variável de texto
+- Número deve ir em variável numérica
+
+### **5. Reutilização**
+
+- Uma variável pode ser usada em várias partes do algoritmo
+- Evita repetir informações manualmente
+
+## **Atividades Desplugadas**
+
+### **1. Variáveis Humanas**
+
+**Material**: Cartões com nomes de variáveis (`nome`, `idade`, `cidade`) e cartões com valores
+
+**Como fazer**:
+
+1. Cada estudante recebe um cartão de variável
+2. O educador distribui valores: `"Lucas"`, `11`, `"Recife"`
+3. A turma monta pares corretos (variável + valor)
+4. Depois, os valores mudam para mostrar atualização
+
+### **2. Mercado das Variáveis**
+
+**Material**: Etiquetas de produtos e preços fictícios
+
+**Como fazer**:
+
+1. Criar variáveis como `produto`, `preco`, `quantidade`
+2. Simular compras alterando valores
+3. Calcular total com base nas variáveis
+
+### **3. Placar do Campeonato**
+
+**Material**: Quadro e marcador
+
+**Como fazer**:
+
+1. Criar variáveis `timeA` e `timeB`
+2. Atualizar gols durante "partida" simulada
+3. Mostrar como os valores mudam com o tempo
+
+## **Variáveis no Cotidiano**
+
+### **Escola**
+
+- **`nota`**: muda a cada atividade
+- **`faltas`**: aumenta quando há ausência
+- **`turma`**: texto que identifica classe
+
+### **Celular**
+
+- **`volume`**: valor numérico que sobe e desce
+- **`wifiConectado`**: verdadeiro ou falso
+- **`contatoFavorito`**: nome em texto
+
+### **Jogos**
+
+- **`pontuacao`**: cresce conforme desafios
+- **`energia`**: diminui com ações
+- **`faseAtual`**: indica progresso do jogador
+
+## **Na Programação Visual**
+
+### **Criando Variáveis com Blocos**
+
+No Decoda, variáveis aparecem como blocos para **criar**, **atribuir** e **ler** valores:
+
+```
+1. [Criar variável "pontos"]
+2. [Definir pontos para 0]
+3. [Quando pegar moeda -> aumentar pontos em 1]
+4. [Mostrar pontos na tela]
+```
+
+### **Exemplo: Contador de Passos**
+
+```
+1. [INÍCIO]
+2. [Criar variável "passos"]
+3. [Definir passos para 0]
+4. [REPETIR enquanto caminhando]
+   - [passos = passos + 1]
+5. [Exibir "Total de passos: " + passos]
+```
+
+## **Boas Práticas com Variáveis**
+
+### **1. Nomeie com clareza**
+
+- `quantidadeLivros` é melhor que `ql`
+
+### **2. Evite sobrescrever sem querer**
+
+- Antes de alterar, confirme se ainda precisará do valor antigo
+
+### **3. Use o tipo correto**
+
+- Evite guardar texto numa variável pensada para número
+
+### **4. Inicialize as variáveis**
+
+- Dê um valor inicial para evitar dados indefinidos
+
+## **Erros Comuns com Variáveis**
+
+### **1. Nome Confuso**
+
+- **Problema**: `a`, `b`, `c` sem contexto
+- **Solução**: Usar nomes descritivos
+
+### **2. Misturar Tipos**
+
+- **Problema**: Somar texto com número sem conversão
+- **Solução**: Garantir tipos compatíveis
+
+### **3. Perder Valor Importante**
+
+- **Problema**: Reatribuir valor sem necessidade
+- **Solução**: Criar nova variável quando apropriado
+
+### **4. Usar Variável Não Inicializada**
+
+- **Problema**: Tentar usar variável sem definir valor
+- **Solução**: Inicializar sempre no começo
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-archive"></i> Use metáforas concretas**: Caixa, pote, etiqueta
+2. **<i class="fas fa-hands"></i> Faça simulações com cartões**: Variável e valor
+3. **<i class="fas fa-sync"></i> Mostre mudanças ao vivo**: Atualização de pontuação
+4. **<i class="fas fa-users"></i> Trabalhe em pares**: Um define variável, outro usa
+
+### **Observar nos Estudantes**
+
+- **<i class="fas fa-check"></i>** Escolhem nomes claros para variáveis
+- **<i class="fas fa-check"></i>** Entendem diferença entre nome e valor
+- **<i class="fas fa-check"></i>** Atualizam valores corretamente
+- **<i class="fas fa-check"></i>** Identificam uso de variáveis em apps e jogos
+
+### **Sinais de Sucesso**
+
+- Explicam variáveis com exemplos próprios
+- Conseguem criar e atualizar variáveis sem ajuda
+- Corrigem erros de tipo e nomeação
+- Reutilizam variáveis para resolver problemas
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- Separar um problema em informações menores
+- Cada informação vira uma variável
+
+### **Reconhecimento de Padrões**
+
+- Perceber que muitas tarefas usam "guardar e atualizar dados"
+- Identificar variáveis que aparecem com frequência
+
+### **Abstração**
+
+- Escolher apenas os dados essenciais para resolver o problema
+- Ignorar detalhes desnecessários
+
+### **Algoritmos**
+
+- Integrar variáveis ao passo a passo da solução
+- Controlar decisões com base nos valores guardados
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Explicar o que é uma variável com exemplos do cotidiano
+- **<i class="fas fa-check"></i>** Criar variáveis com nomes claros e apropriados
+- **<i class="fas fa-check"></i>** Armazenar e atualizar diferentes tipos de dados
+- **<i class="fas fa-check"></i>** Identificar e corrigir erros comuns de uso de variáveis
+- **<i class="fas fa-check"></i>** Usar variáveis em blocos visuais para resolver problemas
+
+## **Atividades de Fixação**
+
+### **1. Minha Ficha Digital**
+
+Crie variáveis para guardar:
+
+- Nome
+- Idade
+- Cidade
+- Jogo favorito
+
+### **2. Caça aos Erros**
+
+Encontre e corrija erros:
+
+```
+idade = "12"
+idade = idade + 1
+```
+
+```
+nomeCompleto = "Ana"
+nomeCompleto = 25
+```
+
+### **3. Desafio do Placar**
+
+- Criar variáveis para dois times
+- Simular 5 rodadas de gols
+- Mostrar placar final
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Khan Academy - Variables](https://www.khanacademy.org/computing/computer-programming/programming#variables) - Introdução prática
+- [Code.org - Variables](https://studio.code.org/docs/concepts/javascript/variables/) - Conceitos básicos e exemplos
+- [Scratch Wiki - Variables](https://en.scratch-wiki.info/wiki/Variable) - Uso em programação visual
+
+### **Vídeos Explicativos**
+
+- [Variables for Kids](https://www.youtube.com/watch?v=GhQdlIFylQ8) - Explicação simples
+- [What is a Variable?](https://www.youtube.com/watch?v=xYwLx4NQjV8) - Conceito fundamental
+- [Scratch Variables Tutorial](https://www.youtube.com/watch?v=QG8fFG5NfXQ) - Aplicação com blocos
+
+### **Jogos e Simuladores**
+
+- [Scratch](https://scratch.mit.edu/) - Criar projetos com variáveis
+- [Blockly Games](https://blockly.games/) - Lógica visual interativa
+- [CodeCombat](https://codecombat.com/) - Prática gamificada
+
+### **Literatura**
+
+- Downey, A. (2015). _Think Python_. O'Reilly
+- Matthes, E. (2023). _Python Crash Course_. No Starch Press
+- Nygard, K. (2020). _Code This Game_. No Starch Press
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Continue em [**Tipos de Dados**](./dados) para entender quais formatos de informação uma variável pode armazenar!

docs/edu/fundamentos-programacao/intro.md

@@ -0,0 +1,80 @@
+---
+sidebar_position: 1
+title: "Introdução ao Ensino de Programação"
+---
+
+# Introdução ao Ensino de Programação
+
+Bem-vindos ao mundo da **programação**! Este guia foi criado especialmente para educadores que desejam introduzir conceitos de programação de forma acessível.
+
+## **O que é Programação?**
+
+**Programação** é como dar instruções muito específicas para um computador. Imagine que você está ensinando alguém a fazer um sanduíche por telefone - você precisa explicar cada passo detalhadamente, na ordem certa, para que dê certo.
+
+### **Analogia Simples**
+Pense na programação como uma **receita de cozinha**:
+- **Ingredientes** = dados e informações
+- **Instruções passo a passo** = algoritmo
+- **Resultado final** = programa funcionando
+
+## **Programação com Blocos**
+
+Nossa plataforma utiliza **Blockly**, uma biblioteca desenvolvida pelo Google que permite programar usando **blocos visuais** em vez de texto.
+
+### **Por que Blocos?**
+- **<i class="fas fa-child"></i> Intuitivo**: Como montar um quebra-cabeça
+- **<i class="fas fa-shield-alt"></i> Sem erros de sintaxe**: Os blocos só encaixam onde fazem sentido
+- **<i class="fas fa-eye"></i> Visual**: Você vê o fluxo da lógica
+- **<i class="fas fa-rocket"></i> Foco na lógica**: Não se preocupe com pontos e vírgulas
+
+### **Outras Ferramentas que Usam Blocos**
+- **[Scratch](https://scratch.mit.edu/)** - MIT, para crianças aprenderem programação
+- **[MIT App Inventor](https://appinventor.mit.edu/)** - Criação de aplicativos móveis
+- **[Code.org](https://code.org/)** - Plataforma educacional global
+- **[Tinkercad Circuits](https://www.tinkercad.com/)** - Simulação de circuitos eletrônicos
+- **[mBlock](https://mblock.makeblock.com/)** - Programação de robôs educativos
+
+## **Nossa Abordagem de Ensino**
+
+Baseamos nosso ensino em **4 conceitos fundamentais** da programação, que são como os "ingredientes básicos" de qualquer programa:
+
+### **Os 4 Fundamentos**
+
+1. **<i class="fas fa-question"></i> [Condicionais](./quatro-fundamentos/condicionais)** - "SE isso, ENTÃO aquilo"
+2. **<i class="fas fa-sync"></i> [Loops](./quatro-fundamentos/loops)** - "REPITA até..."  
+3. **<i class="fas fa-cogs"></i> [Funções](./quatro-fundamentos/funcoes)** - "Agrupe tarefas relacionadas"
+4. **<i class="fas fa-layer-group"></i> [Procedural](./quatro-fundamentos/procedural)** - "Organizar e estruturar"
+
+### **Metodologia**
+
+Também utilizamos **[Computação Desplugada](./computacao-desplugada)** - uma abordagem que ensina conceitos de programação **sem usar computadores**, através de atividades lúdicas e práticas.
+
+## **Objetivos de Aprendizagem**
+
+Ao final deste módulo, os educadores serão capazes de:
+
+- **<i class="fas fa-check"></i>** Explicar programação usando analogias simples
+- **<i class="fas fa-check"></i>** Identificar os 4 conceitos fundamentais em situações cotidianas
+- **<i class="fas fa-check"></i>** Aplicar atividades desplugadas antes do uso da plataforma
+- **<i class="fas fa-check"></i>** Criar algoritmos organizados proceduralmente
+- **<i class="fas fa-check"></i>** Orientar estudantes na programação visual com blocos
+
+## **Referências e Links Úteis**
+
+### **Recursos Acadêmicos**
+- [Computer Science Unplugged](https://csunplugged.org/) - Computação sem computadores
+- [Google's Blockly](https://developers.google.com/blockly/) - Documentação oficial do Blockly
+- [Computational Thinking](https://www.bbc.co.uk/bitesize/guides/zp92mp3/revision/1) - BBC Bitesize
+
+### **Ferramentas Complementares**
+- [Scratch for Educators](https://scratch.mit.edu/educators/) - Guias para educadores
+- [Code.org Lesson Plans](https://code.org/educate/curriculum) - Planos de aula gratuitos
+- [MIT App Inventor Tutorials](https://appinventor.mit.edu/explore/ai2/tutorials) - Tutoriais para criação de apps
+
+### **Comunidades**
+- [Computing At School](https://www.computingatschool.org.uk/) - Comunidade de educadores
+- [CSTA - Computer Science Teachers Association](https://www.csteachers.org/) - Associação internacional
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo passo**: Comece explorando [**Computação Desplugada**](./computacao-desplugada) para entender nossa base metodológica!

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!

docs/edu/fundamentos-programacao/quatro-fundamentos/_category_.json

@@ -0,0 +1,14 @@
+{
+  "position": 3,
+  "label": "Os Quatro Fundamentos",
+  "collapsible": true,
+  "collapsed": true,
+  "className": "red",
+  "link": {
+    "type": "generated-index",
+    "title": "Os Quatro Fundamentos"
+  },
+  "customProps": {
+    "description": "Explore os quatro conceitos essenciais que formam a base da programação: Condicionais, Loops, Funções e Procedural."
+  }
+}

docs/edu/fundamentos-programacao/quatro-fundamentos/condicionais.md

@@ -0,0 +1,226 @@
+---
+sidebar_position: 1
+title: "Condicionais"
+---
+
+# Condicionais (SE/ENTÃO)
+
+**Condicionais** são como as decisões que tomamos todos os dias. É o computador perguntando "**SE** isso acontecer, **ENTÃO** o que eu devo fazer?"
+
+## **O que são Condicionais?**
+
+Condicionais são **estruturas de decisão** que fazem o programa escolher diferentes caminhos baseado em uma condição.
+
+### **Analogia: Sair de Casa**
+
+Imagine que você vai sair de casa:
+
+- **SE** estiver chovendo, **ENTÃO** levo guarda-chuva
+- **SE** estiver sol, **ENTÃO** uso óculos escuros
+- **SE** estiver frio, **ENTÃO** pego um casaco
+
+Isso é exatamente como funcionam as condicionais na programação!
+
+## **Como Funcionam?**
+
+### **Estrutura Básica**
+
+```mermaid
+flowchart TD
+    A[Início] --> B{Condição}
+    B -->|Verdadeiro| C[Executa bloco SE]
+    B -->|Falso| D[Executa bloco SENÃO]
+    C --> E[Fim da decisão]
+    D --> E
+```
+
+```
+SE (condição) ENTÃO
+    faça isso
+SENÃO
+    faça aquilo
+```
+
+### **Exemplo: Semáforo**
+
+- **SE** luz vermelha, **ENTÃO** pare
+- **SE** luz amarela, **ENTÃO** atenção
+- **SE** luz verde, **ENTÃO** siga
+
+## **Atividades Desplugadas**
+
+### **1. Semáforo Humano**
+
+**Material**: Cartões coloridos (vermelho, amarelo, verde)
+
+**Como fazer**:
+
+1. Estudantes ficam em fila como carros
+2. Educador levanta cartão
+3. **SE** vermelho → param
+4. **SE** amarelo → andam devagar
+5. **SE** verde → andam normal
+
+### **2. Roupa do Dia**
+
+**Material**: Cartões com símbolos do tempo
+
+**Como fazer**:
+
+1. Mostre cartão do tempo (sol, chuva, frio)
+2. Estudantes escolhem roupa adequada
+3. **SE** chuva → guarda-chuva
+4. **SE** sol → óculos
+5. **SE** frio → casaco
+
+### **3. Jogo do Dado**
+
+**Material**: Um dado
+
+**Como fazer**:
+
+1. **SE** número par → bata palmas
+2. **SE** número ímpar → pule
+3. **SE** número 6 → grite "BINGO!"
+
+## **Na Programação Visual**
+
+### **Blocos Condicionais**
+
+No Decoda, você verá blocos como:
+
+- **<i class="fas fa-diamond"></i> Bloco "SE"**: Em formato de losango
+- **<i class="fas fa-question-circle"></i> Condição**: O que verificar
+- **<i class="fas fa-arrow-right"></i> Ação**: O que fazer se verdadeiro
+
+### **Exemplo no Jogo Semáforo**
+
+1. **SE** botão pressionado
+2. **ENTÃO** muda cor do semáforo
+3. **SENÃO** mantém cor atual
+
+## **Tipos de Condicionais**
+
+### **1. SE Simples**
+
+- Apenas uma condição
+- **SE** verdadeiro, faz algo
+- **SE** falso, não faz nada
+
+**Exemplo**: SE chovendo, levo guarda-chuva
+
+### **2. SE/SENÃO**
+
+- Uma condição com duas opções
+- **SE** verdadeiro, faz A
+- **SENÃO**, faz B
+
+**Exemplo**: SE chovendo, levo guarda-chuva, SENÃO levo óculos
+
+### **3. SE/SENÃO SE**
+
+- Múltiplas condições
+- Testa várias possibilidades
+
+**Exemplo**:
+
+- SE muito frio, casaco pesado
+- SENÃO SE pouco frio, casaco leve
+- SENÃO, sem casaco
+
+## **Reconhecendo Condicionais no Dia a Dia**
+
+### **Em Casa**
+
+- **SE** fome, comer
+- **SE** sede, beber água
+- **SE** sono, dormir
+
+### **No Trânsito**
+
+- **SE** semáforo vermelho, parar
+- **SE** pedestres na faixa, parar
+- **SE** combustível baixo, abastecer
+
+### **No Celular**
+
+- **SE** bateria baixa, carregar
+- **SE** mensagem chegou, notificar
+- **SE** tela tocada, acender
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-comments"></i> Comece com exemplos reais**: Use situações que os estudantes vivem
+2. **<i class="fas fa-hand-paper"></i> Use atividades físicas**: Movimento ajuda na compreensão
+3. **<i class="fas fa-repeat"></i> Pratique muito**: Repita com diferentes exemplos
+4. **<i class="fas fa-users"></i> Trabalhe em grupo**: Discutam as decisões juntos
+
+### **Erros Comuns**
+
+- **Confundir condição com ação**: "SE guarda-chuva" em vez de "SE chovendo"
+- **Esquecer o SENÃO**: Não pensar no que acontece quando é falso
+- **Condições impossíveis**: "SE sempre verdadeiro"
+
+### **Sinais de Compreensão**
+
+- Identifica condicionais em situações reais
+- Explica com próprias palavras
+- Cria exemplos originais
+- Antecipa o resultado antes de testar
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Identificar condicionais no cotidiano
+- **<i class="fas fa-check"></i>** Criar estruturas SE/ENTÃO simples
+- **<i class="fas fa-check"></i>** Usar condicionais em programação visual
+- **<i class="fas fa-check"></i>** Explicar por que condicionais são importantes
+
+## **Atividades de Fixação**
+
+### **1. Complete a Frase**
+
+- SE **\_\_\_**, ENTÃO escovo os dentes
+- SE **\_\_\_**, ENTÃO levo agasalho
+- SE **\_\_\_**, ENTÃO ligo o ar condicionado
+
+### **2. Dramatização**
+
+Criem situações onde precisam tomar decisões e representem usando SE/ENTÃO.
+
+### **3. Lista de Decisões**
+
+Façam uma lista de 10 decisões que tomam durante o dia usando estrutura condicional.
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Code.org - Condicionais](https://code.org/curriculum/course1/12/Activity12-Conditionals.pdf) - Atividades práticas
+- [CS Unplugged - Decision Trees](https://csunplugged.org/en/topics/algorithms/unit-plan/decision-trees/) - Árvores de decisão
+- [Scratch for Educators](https://scratch.mit.edu/educators/#resources) - Recursos para condicionais
+
+### **Vídeos Explicativos**
+
+- [Condicionais Explicadas](https://www.youtube.com/watch?v=m2Ux2PnJe6E) - Khan Academy
+- [If/Then Logic](https://www.youtube.com/watch?v=JY6QH67F7CE) - Code.org
+- [Programming Basics](https://www.youtube.com/watch?v=HoqJCj22W3M) - Conceitos básicos
+
+### **Jogos e Atividades**
+
+- [Lightbot](http://lightbot.com/) - Jogo de programação com condicionais
+- [CodeMonkey](https://www.playcodemonkey.com/) - Ensina programação através de jogos
+- [Scratch Jr](https://www.scratchjr.org/) - Para crianças menores
+
+### **Literatura**
+
+- Resnick, M. (2017). _Lifelong Kindergarten: Cultivating Creativity_. MIT Press
+- Wing, J. M. (2006). _Computational thinking_. Communications of the ACM
+- Bell, T. (2018). _Computer Science Unplugged_. Creative Commons
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Explore [**Loops**](./loops) para aprender sobre repetição automática!

docs/edu/fundamentos-programacao/quatro-fundamentos/funcoes.md

@@ -0,0 +1,378 @@
+---
+sidebar_position: 3
+title: "Funções"
+---
+
+# Funções - Organizando o Código
+
+**Funções** são como receitas especiais que você cria uma vez e pode usar sempre que precisar. É o computador sendo organizado: em vez de repetir instruções, ele guarda "receitas" prontas!
+
+## **O que são Funções?**
+
+Funções são **blocos de código reutilizáveis** que executam uma tarefa específica. Você dá um nome para um conjunto de ações e pode "chamar" essa função sempre que precisar.
+
+### **Analogia: Receita de Bolo**
+
+Imagine que você ama fazer bolo de chocolate:
+
+- **SEM FUNÇÃO**: Toda vez escreve a receita completa (20+ passos)
+- **COM FUNÇÃO**: Cria receita "FazerBoloChocolate()" e só chama quando quiser
+
+Quando alguém perguntar como fazer, você só diz: "Use a receita de bolo de chocolate!"
+
+## **Como Funcionam?**
+
+```mermaid
+flowchart TD
+    A[Definir função] --> B[Nome + parâmetros]
+    B --> C[Escrever passos internos]
+    C --> D[Chamar função no programa]
+    D --> E{Retorna valor?}
+    E -->|Sim| F[Usar retorno em variável/decisão]
+    E -->|Não| G[Continuar fluxo]
+    F --> H[Fim]
+    G --> H
+```
+
+### **Estrutura Básica**
+
+```
+FUNÇÃO MinhaReceita():
+    passo 1
+    passo 2
+    passo 3
+```
+
+Para usar:
+
+```
+MinhaReceita()  // Executa todos os passos!
+```
+
+### **Com Parâmetros (Ingredientes)**
+
+```
+FUNÇÃO FazerSuco(fruta):
+    corte a fruta
+    adicione água
+    misture
+```
+
+Para usar:
+
+```
+FazerSuco(laranja)  // Faz suco de laranja
+FazerSuco(limão)    // Faz suco de limão
+```
+
+## **Atividades Desplugadas**
+
+### **1. Truque de Mágica**
+
+**Material**: Baralho de cartas
+
+**Como fazer**:
+
+1. Ensine um truque simples (função)
+2. Dê nome: "TruqueDoDesaparecimento()"
+3. Sempre que alguém pedir, execute o "truque"
+4. **Variação**: TruqueDoDesaparecimento(carta_vermelha)
+
+### **2. Coreografia Pessoal**
+
+**Material**: Música
+
+**Como fazer**:
+
+1. Cada estudante cria sua "dança especial" (função)
+2. Dá nome: "DançaDoPedro()", "DançaDaAna()"
+3. Quando chamarem o nome, executam a dança
+4. **Com parâmetro**: DançaDoPedro(rápida) ou DançaDoPedro(lenta)
+
+### **3. Aviões de Papel**
+
+**Material**: Papel
+
+**Como fazer**:
+
+1. Ensine a dobrar aviãozinho (função "FazerAvião()")
+2. Todos decoram os passos
+3. Quando disser "FazerAvião()", todos fazem
+4. **Variação**: FazerAvião(papel_colorido)
+
+## **Tipos de Funções**
+
+### **1. Função Simples (Sem Retorno)**
+
+- Executa ações
+- Não "devolve" nada
+- Como ligar a TV
+
+**<i class="fas fa-lightbulb"></i> Exemplo**:
+
+```
+FUNÇÃO AcenderLuz():
+    pressione o interruptor
+```
+
+### **2. Função com Retorno**
+
+- Executa ações E devolve um resultado
+- Como uma calculadora
+
+**<i class="fas fa-calculator"></i> Exemplo**:
+
+```
+FUNÇÃO Somar(a, b):
+    resultado = a + b
+    retorne resultado
+```
+
+### **3. Função com Parâmetros**
+
+- Recebe "ingredientes" para trabalhar
+- Mais flexível e reutilizável
+
+**<i class="fas fa-comment"></i> Exemplo**:
+
+```
+FUNÇÃO Cumprimentar(nome):
+    diga "Olá, " + nome + "!"
+```
+
+## **Funções no Cotidiano**
+
+### **Em Casa**
+
+- **<i class="fas fa-coffee"></i> FazerCafé()**: Toda manhã, mesmos passos
+- **<i class="fas fa-car"></i> IrTrabalho()**: Mesmo percurso sempre
+- **<i class="fas fa-bed"></i> ArrumarCama()**: Mesma sequência
+
+### **Na Escola**
+
+- **<i class="fas fa-bell"></i> TocarSinal()**: Música sempre igual
+- **<i class="fas fa-list-alt"></i> FazerChamada(turma)**: Processo padrão
+- **<i class="fas fa-chalkboard"></i> ExplicarMatéria(assunto)**: Estrutura similar
+
+### **Na Tecnologia**
+
+- **<i class="fas fa-save"></i> Salvar()**: Sempre mesmo processo
+- **<i class="fas fa-print"></i> Imprimir(documento)**: Passos padrão
+- **<i class="fas fa-envelope"></i> EnviarEmail(destinatário, mensagem)**: Protocolo fixo
+
+## **Na Programação Visual**
+
+### **Blocos de Função**
+
+No Decoda, você verá:
+
+- **<i class="fas fa-plus"></i> "Criar função"**: Para definir nova função
+- **<i class="fas fa-tag"></i> Nome da função**: Como identificar
+- **<i class="fas fa-cogs"></i> Parâmetros**: "Ingredientes" que recebe
+- **<i class="fas fa-play"></i> Chamar função**: Bloco para usar
+
+### **Exemplo no Jogo Tartaruga**
+
+```
+FUNÇÃO DesenharQuadrado(tamanho):
+    repita 4 vezes:
+        ande tamanho passos
+        vire 90 graus
+
+// Para usar:
+DesenharQuadrado(50)   // Quadrado pequeno
+DesenharQuadrado(100)  // Quadrado grande
+```
+
+## **Vantagens das Funções**
+
+### **1. Reutilização**
+
+- Escreve uma vez, usa muitas vezes
+- Economiza tempo e esforço
+
+### **2. Organização**
+
+- Código mais limpo e claro
+- Cada função faz uma coisa específica
+
+### **3. Facilita Manutenção**
+
+- Erro? Conserta só na função
+- Melhoria? Atualiza só um lugar
+
+### **4. Trabalho em Equipe**
+
+- Cada pessoa pode criar suas funções
+- Compartilha com o grupo
+
+### **5. Menos Erros**
+
+- Testa função uma vez
+- Confia sempre que usar
+
+## **Criando Boas Funções**
+
+### **Nome Descritivo**
+
+- **Bom**: `CalcularIdade()`
+- **Ruim**: `Fazer()`
+
+### **Uma Responsabilidade**
+
+- **Bom**: `EnviarEmail()` só envia email
+- **Ruim**: `EnviarEmailEFazerCafé()` faz duas coisas
+
+### **Tamanho Adequado**
+
+- **Bom**: 5-15 linhas geralmente
+- **Ruim**: 100 linhas (muito complexa)
+
+## **Atividades Práticas com Decoda**
+
+### **1. Biblioteca de Formas**
+
+Crie funções para:
+
+- `DesenharTriângulo(tamanho)`
+- `DesenharCirculo(raio)`
+- `DesenharEstrela(pontas)`
+
+### **2. Efeitos Sonoros**
+
+Crie funções para:
+
+- `SomDeVitória()`: Música alegre
+- `SomDerrota()`: Som triste
+- `SomAção(tipo)`: Diferentes sons
+
+### **3. Comportamentos do Personagem**
+
+Crie funções para:
+
+- `Pular(altura)`: Pulo customizável
+- `Correr(velocidade)`: Corrida variável
+- `Atacar(direção)`: Ataque direcional
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-repeat"></i> Comece com repetição**: Mostre código repetitivo
+2. **<i class="fas fa-magic"></i> Apresente como solução**: "Vamos organizar isso!"
+3. **<i class="fas fa-hands"></i> Use analogias físicas**: Receitas, instruções
+4. **<i class="fas fa-step-forward"></i> Construa gradualmente**: Simples → Parâmetros → Retorno
+
+### **Erros Comuns**
+
+- **Função muito genérica**: `FazerTudo()`
+- **Nome confuso**: `Coisa1()`, `Função2()`
+- **Muitos parâmetros**: `Função(a,b,c,d,e,f,g)`
+- **Função muito complexa**: Faz muitas coisas diferentes
+
+### **Sinais de Compreensão**
+
+- Identifica código repetitivo
+- Cria nomes descritivos para funções
+- Usa parâmetros apropriadamente
+- Explica por que funções são úteis
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- Quebrar problemas em funções menores
+- Cada função resolve uma parte
+
+### **Abstração**
+
+- Esconder detalhes complexos
+- Usuário só precisa saber o nome da função
+
+### **Reconhecimento de Padrões**
+
+- Identificar ações que se repetem
+- Criar funções para padrões comuns
+
+### **Algoritmos**
+
+- Organizar soluções em blocos reutilizáveis
+- Construir sistemas complexos com peças simples
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Identificar quando usar funções
+- **<i class="fas fa-check"></i>** Criar funções simples com nomes descritivos
+- **<i class="fas fa-check"></i>** Usar parâmetros para tornar funções flexíveis
+- **<i class="fas fa-check"></i>** Organizar código usando funções
+- **<i class="fas fa-check"></i>** Explicar vantagens das funções
+
+## **Atividades de Fixação**
+
+### **1. Identifique a Função**
+
+Que funções você criaria para:
+
+- Fazer um sanduíche
+- Arrumar o quarto
+- Escovar os dentes
+
+### **2. Nomeação**
+
+Dê nomes melhores para:
+
+- `Função1()` que desenha casa
+- `Coisa()` que toca música
+- `Fazer()` que calcula nota
+
+### **3. Parâmetros**
+
+Que parâmetros essas funções precisariam?
+
+- `DesenharRetângulo(?)`
+- `TocarMúsica(?)`
+- `MandarMensagem(?)`
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Code.org - Functions](https://code.org/curriculum/course3/14/Activity14-Functions.pdf) - Atividades com funções
+- [CS Unplugged - Functions](https://csunplugged.org/en/topics/programming-languages/unit-plan/modular-programming/) - Programação modular
+- [Scratch - Custom Blocks](https://scratch.mit.edu/help/studio/tips/custom-blocks/) - Blocos personalizados
+
+### **Vídeos Explicativos**
+
+- [Functions Explained](https://www.youtube.com/watch?v=N_Ls37qeQ4c) - Conceitos básicos
+- [Why Use Functions?](https://www.youtube.com/watch?v=j9Ll8QWwwTE) - Vantagens das funções
+- [Function Parameters](https://www.youtube.com/watch?v=HnC2JhdsJYw) - Parâmetros explicados
+
+### **Jogos e Atividades**
+
+- [CodeCombat](https://codecombat.com/) - RPG que ensina funções
+- [CheckiO](https://checkio.org/) - Desafios de programação
+- [CodinGame](https://www.codingame.com/) - Jogos com funções
+
+### **Literatura Acadêmica**
+
+- Martin, R. (2008). _Clean Code: A Handbook of Agile Software Craftsmanship_
+- McConnell, S. (2004). _Code Complete: A Practical Handbook_
+- Fowler, M. (2018). _Refactoring: Improving the Design of Existing Code_
+
+### **Ferramentas Práticas**
+
+- [Repl.it](https://replit.com/) - Editor online para praticar funções
+- [Trinket](https://trinket.io/) - Python no navegador
+- [JSFiddle](https://jsfiddle.net/) - JavaScript para experimentar
+
+### **Cursos Complementares**
+
+- [Khan Academy - Intro to Programming](https://www.khanacademy.org/computing/intro-to-programming) - Funções básicas
+- [MIT OpenCourseWare](https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/) - Programação avançada
+- [Coursera - Programming for Everybody](https://www.coursera.org/learn/python) - Python com funções
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Explore [**Procedural**](./procedural) para aprender como organizar algoritmos passo a passo!

docs/edu/fundamentos-programacao/quatro-fundamentos/loops.md

@@ -0,0 +1,302 @@
+---
+sidebar_position: 2
+title: "Loops (Repetição)"
+---
+
+# Loops - A Arte da Repetição
+
+**Loops** são como receitas que dizem "faça isso várias vezes". É o computador sendo eficiente: em vez de escrever a mesma coisa 100 vezes, ele repete automaticamente!
+
+## **O que são Loops?**
+
+Loops são **estruturas de repetição** que fazem o programa executar as mesmas ações múltiplas vezes, sem precisar reescrever o código.
+
+### **Analogia: Caminhada**
+
+Imagine que você precisa dar 10 passos:
+
+- **SEM LOOP**: Passo 1, Passo 2, Passo 3... (escrever 10 vezes)
+- **COM LOOP**: "Repita 10 vezes: dê um passo"
+
+Muito mais simples, não é?
+
+## **Como Funcionam?**
+
+### **Estrutura Básica**
+
+```
+REPITA X vezes:
+    faça isso
+```
+
+ou
+
+```
+ENQUANTO (condição verdadeira):
+    faça isso
+```
+
+## **Atividades Desplugadas**
+
+### **1. Robô Repetidor**
+
+**Material**: Cartões com comandos
+
+**Como fazer**:
+
+1. Um estudante é o "robô"
+2. Outro é o "programador"
+3. Programador dá comando: "Repita 5 vezes: levante o braço direito"
+4. Robô executa exatamente 5 vezes
+
+### **2. Música em Loop**
+
+**Material**: Uma música conhecida
+
+**Como fazer**:
+
+1. Escolham um refrão simples
+2. "Repita 3 vezes: Parabéns pra você..."
+3. Todos cantam o refrão 3 vezes seguidas
+4. Experimente com números diferentes
+
+### **3. Receita de Biscoitos**
+
+**Material**: Papel e caneta
+
+**Como fazer**:
+
+1. Escreva receita para 1 biscoito
+2. Agora para 12 biscoitos sem loop:
+   - "Misture farinha, misture farinha, misture farinha..." (12 vezes)
+3. Com loop:
+   - "Repita 12 vezes: misture farinha, adicione açúcar, modele"
+
+## **Tipos de Loops**
+
+```mermaid
+flowchart TD
+   A[Preciso repetir uma ação] --> B{Sei quantas vezes?}
+   B -->|Sim| C[Use FOR]
+   B -->|Não| D{Tenho condição de parada?}
+   D -->|Sim| E[Use WHILE]
+   D -->|Não| F[Reveja a lógica para evitar loop infinito]
+   C --> G{É para cada item de lista?}
+   G -->|Sim| H[Use FOR EACH]
+   G -->|Não| I[FOR tradicional]
+```
+
+### **1. Loop com Contador (FOR)**
+
+- Repete um **número específico** de vezes
+- "Faça isso 10 vezes"
+
+**<i class="fas fa-home"></i> Exemplo**: Escovar dentes
+
+- Repita 20 vezes: mova a escova para cima e para baixo
+
+### **2. Loop com Condição (WHILE)**
+
+- Repete **enquanto** algo for verdadeiro
+- "Faça isso enquanto..."
+
+**<i class="fas fa-car"></i> Exemplo**: Dirigir até o destino
+
+- Enquanto não chegou no destino: continue dirigindo
+
+### **3. Loop para Cada Item (FOR EACH)**
+
+- Repete **para cada** elemento de uma lista
+- "Para cada item, faça isso"
+
+**<i class="fas fa-shopping-bag"></i> Exemplo**: Lista de compras
+
+- Para cada item da lista: pegue o produto
+
+## **Loops no Cotidiano**
+
+### **Em Casa**
+
+- **<i class="fas fa-utensils"></i> Lavar louça**: Para cada prato sujo, lave
+- **<i class="fas fa-broom"></i> Varrer casa**: Para cada cômodo, varra
+- **<i class="fas fa-shower"></i> Tomar banho**: Repita até ficar limpo: ensaboe e enxágue
+
+### **Na Escola**
+
+- **<i class="fas fa-pencil-alt"></i> Tabuada**: Repita 10 vezes: 2 x número
+- **<i class="fas fa-book"></i> Leitura**: Para cada página do livro, leia
+- **<i class="fas fa-running"></i> Educação física**: Repita 20 vezes: flexão
+
+### **Na Tecnologia**
+
+- **<i class="fas fa-envelope"></i> Email**: Para cada mensagem nova, notifique
+- **<i class="fas fa-video"></i> Vídeo**: Repita 30 vezes por segundo: mostre frame
+- **<i class="fas fa-gamepad"></i> Jogos**: Enquanto jogo não acabou: continue rodando
+
+## **Na Programação Visual**
+
+### **Blocos de Loop**
+
+No Decoda, você verá:
+
+- **<i class="fas fa-sync"></i> Bloco "Repetir"**: Formato circular ou oval
+- **<i class="fas fa-hashtag"></i> Número**: Quantas vezes repetir
+- **<i class="fas fa-code"></i> Comandos dentro**: O que será repetido
+
+### **Exemplo no Jogo Tartaruga**
+
+1. **Repetir 4 vezes**:
+   - Ande 100 passos
+   - Vire 90 graus à direita
+2. **Resultado**: Desenha um quadrado!
+
+## **Cuidados com Loops**
+
+### **Loop Infinito**
+
+- **Problema**: Loop que nunca para
+- **Exemplo**: "Enquanto 1 = 1: diga olá" (nunca vai parar!)
+- **Solução**: Sempre ter uma condição de parada
+
+### **Loop Muito Lento**
+
+- **Problema**: Muitas repetições desnecessárias
+- **Exemplo**: "Repita 1 milhão de vezes: pisque"
+- **Solução**: Use apenas o número necessário
+
+## **Atividades Práticas com Decoda**
+
+### **1. Desenhar Formas**
+
+- **Triângulo**: Repita 3 vezes (ande, vire 120°)
+- **Quadrado**: Repita 4 vezes (ande, vire 90°)
+- **Estrela**: Repita 5 vezes (ande, vire 144°)
+
+### **2. Mover Personagem**
+
+- **Andar em linha**: Repita 10 vezes (ande 1 passo)
+- **Dança**: Repita 5 vezes (esquerda, direita, pule)
+- **Patrulha**: Enquanto não encontrar inimigo, ande
+
+### **3. Sons e Efeitos**
+
+- **Sirene**: Repita 10 vezes (som agudo, som grave)
+- **Batida**: Repita enquanto música toca (toque tambor)
+- **Eco**: Para cada nota, repita 3 vezes mais baixo
+
+## **Dicas para Educadores**
+
+### **Como Ensinar**
+
+1. **<i class="fas fa-eye"></i> Mostre a ineficiência primeiro**: Escreva sem loop
+2. **<i class="fas fa-magic"></i> Apresente o loop como mágica**: "E se eu disser que há um jeito mais fácil?"
+3. **<i class="fas fa-hands"></i> Use atividades físicas**: Loops corporais
+4. **<i class="fas fa-step-forward"></i> Vá do simples ao complexo**: Comece com números pequenos
+
+### **Erros Comuns**
+
+- **Esquecer a condição de parada**: Criar loops infinitos
+- **Contar errado**: "Repita 5 vezes" mas contar 6
+- **Loop desnecessário**: Usar loop para uma única ação
+- **Condição sempre falsa**: Loop que nunca executa
+
+### **Sinais de Compreensão**
+
+- Identifica repetições no cotidiano
+- Escolhe o tipo certo de loop
+- Prevê quantas vezes algo vai repetir
+- Explica quando usar ou não usar loops
+
+## **Pensamento Computacional**
+
+### **Reconhecimento de Padrões**
+
+- Identificar quando algo se repete
+- Ver semelhanças em diferentes situações
+
+### **Decomposição**
+
+- Quebrar problema grande em pequenas repetições
+- "Como faço uma vez?" → "Como repito muitas vezes?"
+
+### **Abstração**
+
+- Focar no padrão, não nos detalhes
+- "O que se repete é o importante"
+
+### **Algoritmos**
+
+- Criar sequências eficientes
+- Otimizar através da repetição
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Identificar repetições no cotidiano
+- **<i class="fas fa-check"></i>** Escolher o tipo apropriado de loop
+- **<i class="fas fa-check"></i>** Criar loops simples na programação visual
+- **<i class="fas fa-check"></i>** Evitar loops infinitos
+- **<i class="fas fa-check"></i>** Otimizar código usando repetição
+
+## **Atividades de Fixação**
+
+### **1. Identifique o Loop**
+
+Transforme estas ações em loops:
+
+- Subir 10 degraus
+- Ler todas as páginas de um livro
+- Lavar todos os pratos
+
+### **2. Conte as Repetições**
+
+Quantas vezes o loop executará?
+
+- Repita 5 vezes: pule
+- Enquanto bateria > 0: use celular
+- Para cada dedo da mão: conte
+
+### **3. Construa o Loop**
+
+Crie loops para:
+
+- Desenhar escadinha de 6 degraus
+- Tocar "Parabéns" 3 vezes
+- Verificar chuva até parar
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Code.org - Loops](https://code.org/curriculum/course2/5/Activity5-Loops.pdf) - Atividades com loops
+- [CS Unplugged - Algorithms](https://csunplugged.org/en/topics/algorithms/) - Algoritmos sem computador
+- [Scratch - Repetition](https://scratch.mit.edu/ideas) - Ideias para loops
+
+### **Vídeos Explicativos**
+
+- [Loops Explained](https://www.youtube.com/watch?v=mgooqyWMTxk) - Explicação visual
+- [Repetition in Programming](https://www.youtube.com/watch?v=wxds6MAtUQ0) - Code.org
+- [For Loops vs While Loops](https://www.youtube.com/watch?v=94UHCEmprCY) - Diferenças
+
+### **Jogos e Atividades**
+
+- [Cargo Bot](http://twolivesleft.com/CargoBot/) - Programa robô com loops
+- [Human Resource Machine](https://tomorrowcorporation.com/humanresourcemachine) - Puzzles com loops
+- [While True: Learn()](https://luden.io/wtl/) - Machine learning com loops
+
+### **Literatura Acadêmica**
+
+- Weintrop, D. (2016). _Defining Computational Thinking for Mathematics and Science_
+- Yadav, A. (2014). _Computational Thinking in Elementary and Secondary Education_
+- Grover, S. (2013). _Learning to Code, Coding to Learn_
+
+### **Ferramentas Complementares**
+
+- [Logo Programming](http://www.logointerpreter.com/) - Desenhos com loops
+- [Alice](http://www.alice.org/) - Programação 3D com repetição
+- [Greenfoot](https://www.greenfoot.org/) - Java visual com loops
+
+---
+
+**<i class="fas fa-arrow-right"></i> Próximo**: Descubra [**Funções**](./funcoes) para organizar e reutilizar seu código!

docs/edu/fundamentos-programacao/quatro-fundamentos/procedural.md

@@ -0,0 +1,478 @@
+---
+sidebar_position: 4
+title: "Procedural"
+---
+
+# Procedural - Algoritmos Organizados
+
+**Procedural** é como organizar uma empresa: cada departamento (procedimento) tem sua função específica, mas todos trabalham juntos para atingir um objetivo maior!
+
+**Esta é a essência dos ALGORITMOS** - sequências de passos organizados que resolvem problemas!
+
+## **O que é Procedural?**
+
+É organizar **algoritmos** (sequências de passos) em **procedimentos** que executam tarefas específicas, seguindo uma sequência lógica de **cima para baixo**.
+
+### **Algoritmo = Receita Detalhada**
+
+Um **algoritmo** é como uma receita muito específica:
+
+- **Cada passo é claro** (sem ambiguidade)
+- **Ordem importa** (passo 2 vem depois do passo 1)
+- **Sempre termina** (tem um fim)
+- **Resolve o problema** (chega no resultado esperado)
+
+### **Analogia: Construindo uma Casa**
+
+```
+PROJETO: Construir Casa
+
+PROCEDIMENTO PrepararTerreno():
+    - Limpar área
+    - Nivelar solo
+    - Marcar fundação
+
+PROCEDIMENTO FazerFundação():
+    - Cavar buracos
+    - Colocar ferro
+    - Despejar concreto
+
+PROCEDIMENTO ConstruirParedes():
+    - Assentar tijolos
+    - Fazer argamassa
+    - Levantar estrutura
+
+PROGRAMA PRINCIPAL:
+    1. PrepararTerreno()
+    2. FazerFundação()
+    3. ConstruirParedes()
+    4. ColocarTelhado()
+    5. FazerAcabamento()
+```
+
+Cada **procedimento** faz uma parte, mas todos seguem uma **ordem lógica**!
+
+## **Algoritmos - A Base de Tudo**
+
+### **Exemplo de Algoritmo Simples**
+
+```
+ALGORITMO: Fazer Sanduíche
+1. Pegue 2 fatias de pão
+2. Passe manteiga numa fatia
+3. Adicione presunto
+4. Adicione queijo
+5. Feche com a outra fatia
+6. Corte na diagonal
+RESULTADO: Sanduíche pronto!
+```
+
+### **Características de um Bom Algoritmo**
+
+- **<i class="fas fa-eye"></i> Clareza**: Cada passo é compreensível
+- **<i class="fas fa-list-ol"></i> Ordem lógica**: Sequência faz sentido
+- **<i class="fas fa-flag-checkered"></i> Finitude**: Sempre termina
+- **<i class="fas fa-bullseye"></i> Eficácia**: Resolve o problema
+- **<i class="fas fa-tachometer-alt"></i> Eficiência**: Usa poucos passos
+
+## **Características do Paradigma Procedural**
+
+### **1. Fluxo Top-Down (De Cima para Baixo)**
+
+```mermaid
+flowchart TD
+    A[Problema principal] --> B[Dividir em subproblemas]
+    B --> C[Transformar em procedimentos]
+    C --> D[Organizar ordem de execução]
+    D --> E[Executar programa principal]
+```
+
+- Começamos com o **problema principal**
+- Dividimos em **subproblemas menores**
+- Cada subproblema vira um **procedimento**
+
+### **2. Modularidade**
+
+- Código dividido em **módulos/procedimentos**
+- Cada módulo tem **responsabilidade específica**
+- Fácil de entender e manter
+
+### **3. Reutilização**
+
+- Procedimentos podem ser **chamados várias vezes**
+- Evita repetição de código
+- Economiza trabalho
+
+### **4. Sequencialidade**
+
+- Execução **passo a passo**
+- Uma instrução por vez
+- Ordem importa!
+
+## **Atividades Desplugadas**
+
+### **1. Festa de Aniversário**
+
+**Material**: Lista de tarefas, cartões
+
+**Como fazer**:
+
+1. **Problema**: Organizar festa de aniversário
+2. **Dividir em procedimentos**:
+   - `ComprarIngredientes()`
+   - `DecorarSala()`
+   - `PrepararComida()`
+   - `ChamarConvidados()`
+3. **Executar na ordem**: Cada equipe fica responsável por um procedimento
+
+### **2. Peça de Teatro**
+
+**Material**: Roteiro simples
+
+**Como fazer**:
+
+1. **Problema**: Apresentar peça
+2. **Procedimentos**:
+   - `PrepararCenário()`
+   - `AquecerVoz()`
+   - `AtuarCena1()`
+   - `AtuarCena2()`
+   - `Agradecer()`
+3. **Executar sequencialmente**: Cada procedimento tem seus atores
+
+### **3. Viagem Escolar**
+
+**Material**: Mapa, lista de atividades
+
+**Como fazer**:
+
+1. **Problema**: Organizar viagem
+2. **Procedimentos**:
+   - `PlanejarRota()`
+   - `FazerLanche()`
+   - `SubirOnibus()`
+   - `VisitarLocal()`
+   - `VoltarEscola()`
+
+### **4. Encontrar Objeto Perdido (Algoritmo de Busca)**
+
+**Material**: Objetos escondidos na sala
+
+**Como fazer**:
+
+1. **Algoritmo Linear**: Procure um por um, da esquerda para direita
+2. **Algoritmo Inteligente**: Divida a sala em metades, elimine metade onde não está
+3. **Compare eficiência**: Qual foi mais rápido?
+
+### **5. Organizar Fila por Altura (Algoritmo de Ordenação)**
+
+**Material**: Estudantes
+
+**Como fazer**:
+
+1. **Algoritmo Bolha**: Compare pares vizinhos, troque se necessário
+2. **Algoritmo Seleção**: Encontre o menor, coloque no início
+3. **Teste qual é mais eficiente** com turmas diferentes
+
+## **Diferenças de Outros Paradigmas**
+
+### **Procedural vs Orientado a Objetos**
+
+```mermaid
+flowchart TD
+    A[Paradigmas de Programação] --> B[Procedural]
+    A --> C[Orientado a Objetos]
+    B --> B1[Foco em ações e sequência]
+    B --> B2[Dados e procedimentos separados]
+    C --> C1[Foco em entidades e comportamento]
+    C --> C2[Dados e métodos agrupados]
+```
+
+**<i class="fas fa-cogs"></i> Procedural**:
+
+- Foco nas **ações/procedimentos**
+- "O que o programa **faz**?"
+- Dados e procedimentos **separados**
+
+**<i class="fas fa-cube"></i> Orientado a Objetos**:
+
+- Foco nos **objetos/entidades**
+- "O que o programa **representa**?"
+- Dados e métodos **juntos**
+
+### **Exemplo Comparativo**
+
+**<i class="fas fa-list-ol"></i> Procedural - Controlar Carro**:
+
+```
+PROCEDIMENTO Ligar()
+PROCEDIMENTO Acelerar()
+PROCEDIMENTO Frear()
+PROCEDIMENTO Desligar()
+
+PROGRAMA:
+    Ligar()
+    Acelerar()
+    Frear()
+    Desligar()
+```
+
+**<i class="fas fa-cube"></i> Orientado a Objetos - Carro**:
+
+```
+OBJETO Carro:
+    - propriedades: velocidade, combustível
+    - métodos: ligar(), acelerar(), frear()
+
+PROGRAMA:
+    meuCarro = novo Carro()
+    meuCarro.ligar()
+    meuCarro.acelerar()
+```
+
+## **Na Programação Visual (Decoda)**
+
+### **Estrutura Procedural**
+
+No Decoda, seguimos naturalmente o paradigma procedural:
+
+```
+PROCEDIMENTO IniciarJogo():
+    - Criar personagem
+    - Definir cenário
+    - Tocar música
+
+PROCEDIMENTO ProcessarJogada():
+    - Ler entrada do jogador
+    - Mover personagem
+    - Verificar colisões
+
+PROCEDIMENTO FinalizarJogo():
+    - Mostrar pontuação
+    - Salvar recorde
+    - Perguntar se quer jogar novamente
+
+PROGRAMA PRINCIPAL:
+    IniciarJogo()
+    ENQUANTO jogo não acabou:
+        ProcessarJogada()
+    FinalizarJogo()
+```
+
+### **Exemplo: Jogo do Semáforo**
+
+```
+PROCEDIMENTO ConfigurarSemáforo():
+    - Desenhar semáforo na tela
+    - Definir posição inicial
+    - Preparar sons
+
+PROCEDIMENTO MudarCor(nova_cor):
+    - Apagar cor anterior
+    - Acender nova cor
+    - Tocar som correspondente
+
+PROCEDIMENTO VerificarEntrada():
+    - SE botão pressionado
+    - ENTÃO próxima cor
+
+PROGRAMA PRINCIPAL:
+    ConfigurarSemáforo()
+    REPETIR para sempre:
+        VerificarEntrada()
+        ESPERAR 1 segundo
+```
+
+## **Vantagens da Programação Procedural**
+
+### **1. Fácil de Aprender**
+
+- **Intuitivo**: Pense no problema, divida em partes
+- **Natural**: Como resolvemos problemas no dia a dia
+- **Sequencial**: Uma coisa por vez
+
+### **2. Fácil de Debugar**
+
+- **Isolamento**: Erro em um procedimento não afeta outros
+- **Rastreabilidade**: Fácil encontrar onde está o problema
+- **Testing**: Teste cada procedimento separadamente
+
+### **3. Trabalho em Equipe**
+
+- **Divisão de tarefas**: Cada pessoa pode fazer um procedimento
+- **Integração**: Juntar depois é mais fácil
+- **Paralelismo**: Várias pessoas trabalhando simultaneamente
+
+### **4. Legibilidade**
+
+- **Código limpo**: Cada procedimento tem propósito claro
+- **Manutenção**: Fácil entender e modificar
+- **Documentação**: Nome do procedimento explica o que faz
+
+## **Limitações e Cuidados**
+
+### **1. Dependências Entre Procedimentos**
+
+- **Problema**: Um procedimento depende de outro
+- **Solução**: Planejar bem a ordem de execução
+
+### **2. Compartilhamento de Dados**
+
+- **Problema**: Vários procedimentos precisam dos mesmos dados
+- **Solução**: Usar parâmetros ou variáveis globais com cuidado
+
+### **3. Crescimento do Projeto**
+
+- **Problema**: Projetos muito grandes ficam complexos
+- **Solução**: Dividir em módulos menores e independentes
+
+## **Ensinando Programação Procedural**
+
+### **Estratégias Pedagógicas**
+
+1. **<i class="fas fa-home"></i> Comece com exemplos reais**: Rotina diária, receitas
+2. **<i class="fas fa-puzzle-piece"></i> Divida problemas grandes**: Mostre como quebrar
+3. **<i class="fas fa-hands"></i> Use atividades físicas**: Representem procedimentos
+4. **<i class="fas fa-step-forward"></i> Construa gradualmente**: Simples → Complexo
+
+### **Observações nos Estudantes**
+
+**<i class="fas fa-check"></i> Sinais de Compreensão**:
+
+- Dividem problemas em partes menores naturalmente
+- Criam nomes descritivos para procedimentos
+- Entendem a importância da ordem de execução
+- Reutilizam procedimentos quando apropriado
+
+**<i class="fas fa-exclamation-triangle"></i> Dificuldades Comuns**:
+
+- Criar procedimentos muito grandes
+- Não conseguir dividir o problema
+- Confundir ordem de execução
+- Repetir código em vez de criar procedimentos
+
+## **Procedural no Cotidiano**
+
+### **Cozinha**
+
+```
+PROCEDIMENTO PrepararIngredientes()
+PROCEDIMENTO CozinharPrato()
+PROCEDIMENTO EmpratarComida()
+PROCEDIMENTO LimparCozinha()
+```
+
+### **Aula**
+
+```
+PROCEDIMENTO PrepararMaterial()
+PROCEDIMENTO ExplicarConteúdo()
+PROCEDIMENTO FazerAtividade()
+PROCEDIMENTO CorrigirExercícios()
+```
+
+### **Dirigir**
+
+```
+PROCEDIMENTO VerificarCarroSeguro()
+PROCEDIMENTO LigarCarro()
+PROCEDIMENTO ColocarCinto()
+PROCEDIMENTO DirigirDestino()
+```
+
+## **Pensamento Computacional**
+
+### **Decomposição**
+
+- **Fundamental**: Quebrar problemas em subproblemas
+- **Cada subproblema** → vira um procedimento
+- **Hierarquia**: Procedimentos podem chamar outros procedimentos
+
+### **Abstração**
+
+- **Esconder complexidade**: Usuário não precisa saber como funciona internamente
+- **Interface clara**: Nome e parâmetros explicam o que faz
+- **Reutilização**: Mesmo procedimento, diferentes contextos
+
+### **Algoritmos**
+
+- **Cada procedimento é um algoritmo**: Sequência de passos específica
+- **Algoritmo principal**: Chama outros algoritmos na ordem certa
+- **Otimização**: Melhorar um procedimento melhora todo o programa
+
+## **Objetivos de Aprendizagem**
+
+Ao final desta seção, estudantes devem conseguir:
+
+- **<i class="fas fa-check"></i>** Dividir problemas complexos em procedimentos menores
+- **<i class="fas fa-check"></i>** Criar procedimentos com nomes descritivos e responsabilidades claras
+- **<i class="fas fa-check"></i>** Organizar procedimentos em sequência lógica
+- **<i class="fas fa-check"></i>** Reutilizar procedimentos quando apropriado
+- **<i class="fas fa-check"></i>** Identificar quando usar programação procedural vs outros paradigmas
+
+## **Atividades de Fixação**
+
+### **1. Decomposição**
+
+Divida estes problemas em procedimentos:
+
+- Organizar festa na escola
+- Fazer uma apresentação
+- Limpar a casa
+
+### **2. Pseudocódigo Procedural**
+
+Escreva pseudocódigo para:
+
+- Sistema de biblioteca escolar
+- Jogo de adivinhação
+- Calculadora simples
+
+### **3. Otimização**
+
+- Identifique código repetitivo neste programa
+- Crie procedimentos para eliminar repetição
+- Organize em estrutura procedural
+
+## **Referências e Recursos**
+
+### **Sites Educativos**
+
+- [Structured Programming](https://www.tutorialspoint.com/structured-programming) - Conceitos básicos
+- [Khan Academy - Functions](https://www.khanacademy.org/computing/computer-programming/programming/functions/a/intro-to-functions) - Funções e procedimentos
+- [CS50 - Functions](https://cs50.harvard.edu/x/2024/weeks/1/) - Harvard CS50
+
+### **Vídeos Explicativos**
+
+- [Procedural Programming Explained](https://www.youtube.com/watch?v=xLVCqJdSO60) - Conceitos fundamentais
+- [Top-Down Design](https://www.youtube.com/watch?v=q86G4Gf_CVE) - Design de cima para baixo
+- [Modular Programming](https://www.youtube.com/watch?v=b2pO3ip0S3A) - Programação modular
+
+### **Literatura Clássica**
+
+- Dijkstra, E. (1972). _Structured Programming_. Academic Press
+- Wirth, N. (1976). _Algorithms + Data Structures = Programs_. Prentice Hall
+- Yourdon, E. (1979). _Structured Design_. Prentice Hall
+
+### **Ferramentas de Ensino**
+
+- [Pseudocode Generator](https://www.pseudocode.io/) - Gerar pseudocódigo
+- [Flowchart Maker](https://app.diagrams.net/) - Criar fluxogramas
+- [Alice](http://www.alice.org/) - Programação 3D procedural
+
+### **Exemplos Práticos**
+
+- [Scratch](https://scratch.mit.edu/) - Programação visual procedural
+- [Logo](http://www.calormen.com/jslogo/) - Linguagem procedural clássica
+- [Processing](https://processing.org/) - Arte generativa procedural
+
+---
+
+**<i class="fas fa-graduation-cap"></i> Parabéns!** Você completou os **4 Fundamentos da Programação**:
+
+1. **<i class="fas fa-question"></i> Condicionais** - Decisões inteligentes
+2. **<i class="fas fa-sync"></i> Loops** - Repetição eficiente
+3. **<i class="fas fa-box"></i> Funções** - Organização e reutilização
+4. **<i class="fas fa-list-ol"></i> Procedural** - Algoritmos estruturados
+
+Agora está pronto para aplicar esses conceitos em projetos reais com **Decoda**!