Files
decoda/docs/edu/fundamentos-programacao/quatro-fundamentos/procedural.md
ruimoraes 3da7d323e8 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>
2026-05-26 18:01:50 -03:00

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:

  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

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

  1. Comece com exemplos reais: Rotina diária, receitas
  2. Divida problemas grandes: Mostre como quebrar
  3. Use atividades físicas: Representem procedimentos
  4. 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

Vídeos Explicativos

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

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:

  1. Condicionais - Decisões inteligentes
  2. Loops - Repetição eficiente
  3. Funções - Organização e reutilização
  4. Procedural - Algoritmos estruturados

Agora está pronto para aplicar esses conceitos em projetos reais com Decoda!