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>
13 KiB
sidebar_position, title
| sidebar_position | title |
|---|---|
| 4 | 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
- Clareza: Cada passo é compreensível
- Ordem lógica: Sequência faz sentido
- Finitude: Sempre termina
- Eficácia: Resolve o problema
- Eficiência: Usa poucos passos
Características do Paradigma Procedural
1. Fluxo Top-Down (De Cima para Baixo)
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:
- Problema: Organizar festa de aniversário
- Dividir em procedimentos:
ComprarIngredientes()DecorarSala()PrepararComida()ChamarConvidados()
- Executar na ordem: Cada equipe fica responsável por um procedimento
2. Peça de Teatro
Material: Roteiro simples
Como fazer:
- Problema: Apresentar peça
- Procedimentos:
PrepararCenário()AquecerVoz()AtuarCena1()AtuarCena2()Agradecer()
- Executar sequencialmente: Cada procedimento tem seus atores
3. Viagem Escolar
Material: Mapa, lista de atividades
Como fazer:
- Problema: Organizar viagem
- Procedimentos:
PlanejarRota()FazerLanche()SubirOnibus()VisitarLocal()VoltarEscola()
4. Encontrar Objeto Perdido (Algoritmo de Busca)
Material: Objetos escondidos na sala
Como fazer:
- Algoritmo Linear: Procure um por um, da esquerda para direita
- Algoritmo Inteligente: Divida a sala em metades, elimine metade onde não está
- Compare eficiência: Qual foi mais rápido?
5. Organizar Fila por Altura (Algoritmo de Ordenação)
Material: Estudantes
Como fazer:
- Algoritmo Bolha: Compare pares vizinhos, troque se necessário
- Algoritmo Seleção: Encontre o menor, coloque no início
- Teste qual é mais eficiente com turmas diferentes
Diferenças de Outros Paradigmas
Procedural vs Orientado a Objetos
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]
Procedural:
- Foco nas ações/procedimentos
- "O que o programa faz?"
- Dados e procedimentos separados
Orientado a Objetos:
- Foco nos objetos/entidades
- "O que o programa representa?"
- Dados e métodos juntos
Exemplo Comparativo
Procedural - Controlar Carro:
PROCEDIMENTO Ligar()
PROCEDIMENTO Acelerar()
PROCEDIMENTO Frear()
PROCEDIMENTO Desligar()
PROGRAMA:
Ligar()
Acelerar()
Frear()
Desligar()
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
- Comece com exemplos reais: Rotina diária, receitas
- Divida problemas grandes: Mostre como quebrar
- Use atividades físicas: Representem procedimentos
- Construa gradualmente: Simples → Complexo
Observações nos Estudantes
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
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:
- Dividir problemas complexos em procedimentos menores
- Criar procedimentos com nomes descritivos e responsabilidades claras
- Organizar procedimentos em sequência lógica
- Reutilizar procedimentos quando apropriado
- 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 - Conceitos básicos
- Khan Academy - Functions - Funções e procedimentos
- CS50 - Functions - Harvard CS50
Vídeos Explicativos
- Procedural Programming Explained - Conceitos fundamentais
- Top-Down Design - Design de cima para baixo
- Modular Programming - 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 - Gerar pseudocódigo
- Flowchart Maker - Criar fluxogramas
- Alice - Programação 3D procedural
Exemplos Práticos
- Scratch - Programação visual procedural
- Logo - Linguagem procedural clássica
- Processing - Arte generativa procedural
Parabéns! Você completou os 4 Fundamentos da Programação:
- Condicionais - Decisões inteligentes
- Loops - Repetição eficiente
- Funções - Organização e reutilização
- Procedural - Algoritmos estruturados
Agora está pronto para aplicar esses conceitos em projetos reais com Decoda!