educacao/decoda
11
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

desenvolvimento pre-lancamento

Browse Source 
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:
Rui Moraes
2025-10-29 21:30:14 -03:00
committed by Graciano
parent e24ee22b5a
commit 3da7d323e8
577 changed files with 121994 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/edu/fundamentos-programacao/conceitos-basicos/_category_.json Normal file
View File

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

345
docs/edu/fundamentos-programacao/conceitos-basicos/algoritmos.md Normal file
View File

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

346
docs/edu/fundamentos-programacao/conceitos-basicos/dados.md Normal file
View File

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

362
docs/edu/fundamentos-programacao/conceitos-basicos/operadores.md Normal file
View File

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

282
docs/edu/fundamentos-programacao/conceitos-basicos/variaveis.md Normal file
View File

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