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>
2025-10-29 21:30:14 -03:00
parent e24ee22b5a
commit 3da7d323e8
577 changed files with 121994 additions and 158 deletions
--- a/docs/edu/fundamentos-programacao/quatro-fundamentos/procedural.md
+++ b/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**!