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>
This commit is contained in:
@@ -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."
|
||||
}
|
||||
}
|
||||
@@ -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!
|
||||
378
docs/edu/fundamentos-programacao/quatro-fundamentos/funcoes.md
Normal file
378
docs/edu/fundamentos-programacao/quatro-fundamentos/funcoes.md
Normal file
@@ -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!
|
||||
302
docs/edu/fundamentos-programacao/quatro-fundamentos/loops.md
Normal file
302
docs/edu/fundamentos-programacao/quatro-fundamentos/loops.md
Normal file
@@ -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!
|
||||
@@ -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**!
|
||||
Reference in New Issue
Block a user