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

5
docs/edu/recursos/atividades/programacao/_category_.json Normal file
View File

@@ -0,0 +1,5 @@
{
"label": "Programação",
"position": 1,
"collapsed": true
}

54
docs/edu/recursos/atividades/programacao/aspirador.md Normal file
View File

@@ -0,0 +1,54 @@
---
title: Aspirador
sidebar_position: 3
---
# Aspirador
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/aspirador-thumbnail.png").default}
alt="Thumbnail da atividade Aspirador"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>O Aspirador coloca o estudante diante de um problema clássico da computação: como fazer um agente agir no ambiente com base em regras, repetição e informação vinda de sensores. A narrativa do robô aspirador é simples e familiar, mas o que ela encena é profundamente algorítmico: perceber o estado do espaço, decidir a próxima ação e repetir esse ciclo até concluir a tarefa.</p>
<p>Ao longo das fases, a atividade sai de trajetos previsíveis e avança para situações em que o comportamento precisa se adaptar. Isso é importante porque ajuda o estudante a entender que um algoritmo não é apenas uma lista fixa de passos. Em muitos casos, ele precisa observar condições do ambiente, testar possibilidades, corrigir o rumo e manter algum critério para cobrir uma área com eficiência.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
Pedagogicamente, o Aspirador é uma atividade forte para trabalhar controle de fluxo. Nas fases iniciais, o estudante aprende a encadear ações e reconhecer padrões. Em seguida, passa a usar laços de repetição para evitar código redundante. Depois disso, entram sensores e condicionais, que introduzem a ideia de programa reativo: o comportamento muda conforme o estado detectado.
As fases mais avançadas acrescentam variáveis e padrões de cobertura, como escadas, espirais e zigue-zague. Nesse ponto, a atividade deixa de ser apenas uma introdução a blocos e se torna um exercício de estratégia algorítmica. O estudante precisa pensar em eficiência, previsibilidade e generalização, que são competências importantes tanto para programação quanto para resolução de problemas mais amplos.
## Mediação pedagógica
Nesta atividade, costuma valer a pena pedir que o estudante descreva seu algoritmo antes de executá-lo. Quando ele explica "o robô anda até bater, depois vira e continua", já começa a externalizar a lógica que está tentando implementar. Isso ajuda o professor a identificar se o problema está na ideia do algoritmo ou apenas na montagem dos blocos.
Também é útil comparar soluções. Em especial nas fases finais, duas respostas podem funcionar, mas uma ser mais legível, menor ou mais adaptável. Essa comparação abre espaço para discutir qualidade de código de forma introdutória, sem tecnicismo excessivo.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | A Linha Reta | usar um laço simples para repetir movimento até concluir a limpeza |
| 2 | A Curva no Corredor | combinar repetição com mudança de direção em um trajeto previsível |
| 3 | A Escadinha | organizar sequência de movimentos e viradas em padrão repetido |
| 4 | O Sensor de Impacto | reagir a bloqueios com estruturas se/senão baseadas em sensor |
| 5 | Modo Bordas | seguir uma estratégia estável de contorno de ambiente |
| 6 | Desvio de Obstáculo | criar uma rotina de contorno e retorno ao caminho principal |
| 7 | A Escada Crescente | usar variável para controlar crescimento progressivo do deslocamento |
| 8 | A Espiral de Limpeza | combinar laços, condição e variável em um padrão expansivo |
| 9 | O Labirinto Cego | testar alternativas de direção com decisões encadeadas |
| 10 | Zigue-Zague | construir um algoritmo de cobertura de área com alternância e espelhamento |
## Quando usar
O Aspirador é especialmente adequado quando a meta é consolidar sequência, repetição e condicionais em um mesmo contexto. Ele também funciona bem como ponte entre atividades de navegação simples e problemas mais estratégicos, nos quais o estudante já precisa pensar em comportamento geral e não apenas em trajetos específicos.
## Referências
- Google Blockly, o que é o Blockly?: https://developers.google.com/blockly/guides/get-started/what-is-blockly?hl=pt-br
- Fluxo de controle: https://pt.wikipedia.org/wiki/Fluxo_de_controle

55
docs/edu/recursos/atividades/programacao/automato.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: Autômato
sidebar_position: 4
---
# Autômato
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/automato-thumbnail.png").default}
alt="Thumbnail da atividade Autômato"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>O Autômato é uma atividade de navegação em labirintos que trabalha a construção gradual de algoritmos. Seu valor pedagógico está em tornar visível a passagem de soluções lineares para soluções estruturadas. O estudante começa com movimentos isolados, depois percebe que pode comprimir padrões com repetição e, por fim, precisa usar decisões para lidar com trajetos menos previsíveis.</p>
<p>Esse percurso é particularmente importante na introdução à programação porque mostra por que estruturas de controle existem. Em vez de apresentar laços e condicionais como conteúdo abstrato, a atividade os torna necessários. O estudante sente o limite de uma solução puramente sequencial e, a partir daí, encontra sentido em usar repetição e seleção.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
O Autômato desenvolve, de maneira muito direta, a ideia de algoritmo como sequência organizada de ações para atingir um objetivo. Nas primeiras fases, o foco está na precisão do comando. Em seguida, entram laços para reduzir repetição desnecessária. Nas fases posteriores, as condicionais passam a ter função central, porque o estudante precisa decidir se há caminho livre, se deve virar ou continuar, e como adaptar o percurso ao labirinto.
Embora a interface seja simples, o ganho conceitual é relevante: a atividade aproxima o estudante de noções de controle de fluxo, tomada de decisão e decomposição de problemas em regras executáveis. Ela também é uma excelente base para discutir depuração, porque erros de lógica aparecem de forma concreta no caminho percorrido pelo personagem.
## Mediação pedagógica
Nesta atividade, é produtivo pedir que o estudante compare uma solução "bloco por bloco" com uma solução que usa repetição. Esse contraste ajuda a mostrar que programar não é apenas fazer funcionar, mas também identificar padrões e representá-los de modo mais claro.
Quando surgirem labirintos com bifurcações, uma mediação útil é perguntar quais informações o programa precisa observar antes de agir. Essa pergunta desloca o foco da tentativa e erro para a leitura do estado do problema, o que prepara a compreensão de condicionais de forma mais sólida.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | Primeiro Passo | compreender o efeito do comando básico de avançar |
| 2 | Primeira Curva | combinar deslocamento e rotação para alterar trajetória |
| 3 | Linha Reta | usar repetição para substituir sequência redundante |
| 4 | Escadaria | aplicar laços em trajetos diagonais com mudanças de direção |
| 5 | Torre | planejar percurso vertical e leitura espacial do mapa |
| 6 | Caminho em Bloco | introduzir condicional simples baseada em caminho livre |
| 7 | Labirinto Ramificado | decidir entre alternativas em percursos que se bifurcam |
| 8 | Caminho Complexo | lidar com trajeto mais longo mantendo legibilidade da solução |
| 9 | Labirinto Avançado | usar if/else para diferenciar ações conforme o contexto |
| 10 | Desafio Final | integrar movimentos, repetição e decisão em um labirinto completo |
## Quando usar
O Autômato é indicado para momentos em que a turma precisa consolidar a ideia de que blocos não são apenas comandos isolados, mas estruturas que organizam comportamento. Ele costuma funcionar muito bem depois de uma atividade mais descritiva, como Quebra-cabeças, e antes de atividades reativas mais complexas, como Aspirador ou Semáforo.
## Referências
- Google Blockly, o que é o Blockly?: https://developers.google.com/blockly/guides/get-started/what-is-blockly?hl=pt-br
- Fluxo de controle: https://pt.wikipedia.org/wiki/Fluxo_de_controle
- Máquina de estados finitos: https://pt.wikipedia.org/wiki/M%C3%A1quina_de_estados_finitos

55
docs/edu/recursos/atividades/programacao/cripto.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: Cripto
sidebar_position: 8
---
# Cripto
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/cripto-thumbnail.png").default}
alt="Thumbnail da atividade Cripto"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>Cripto é a atividade mais explicitamente voltada para representação simbólica e transformação de dados. Ela usa desafios de cifra, substituição, inversão e somatório de integridade para mostrar que programação também serve para codificar, decodificar, comparar e proteger informação. Isso a torna especialmente interessante para estudantes que já avançaram um pouco além dos comandos básicos e estão prontos para trabalhar com cadeias de texto, posições e regras mais abstratas.</p>
<p>Seu percurso é muito pedagógico porque começa com algo simples e concreto, a conversão entre letras e números, e avança até operações de cifra de César, alfabetos secretos e noções introdutórias de hash. Ao fazer isso, a atividade mostra que dados podem ser transformados sistematicamente por regras bem definidas e que pequenas mudanças de fórmula alteram o resultado final de maneira significativa.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
Cripto ensina, de forma bastante clara, que programar envolve percorrer sequências, manipular símbolos, guardar estados intermediários e aplicar operações repetidas com consistência. O estudante trabalha contadores, leitura de caracteres, busca de posição, concatenação de saída, uso de variáveis auxiliares e estruturas condicionais.
Do ponto de vista conceitual, a atividade é valiosa porque aproxima programação de temas reais da computação, como criptografia clássica, codificação, substituição e verificação de integridade. Mesmo em nível introdutório, isso ajuda a desfazer a ideia de que programação se resume a mover objetos na tela. Aqui, o foco passa a ser transformação de informação, que é um eixo central da computação.
## Mediação pedagógica
Uma mediação eficaz é pedir que o estudante explique a regra da transformação em linguagem comum antes de programá-la. Por exemplo: “cada letra anda três casas no alfabeto” ou “se a letra for A, troco por 4”. Essa explicitação ajuda a converter uma regra informal em algoritmo.
Também vale discutir a diferença entre cifra e hash. Mesmo de forma introdutória, a atividade permite mostrar que algumas transformações visam esconder uma mensagem, enquanto outras servem para verificar integridade. Essa conversa costuma enriquecer bastante o sentido da atividade.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | De Letra para Número | percorrer o alfabeto e associar símbolo a posição numérica |
| 2 | De Número para Letra | reverter o mapeamento e reconstruir texto a partir de índices |
| 3 | Cifra de César (+3) | aplicar deslocamento fixo com busca de posição e módulo |
| 4 | Cifra de César (-3) | realizar deslocamento inverso controlando índices negativos |
| 5 | Criptografia com Chave Variável | generalizar a cifra usando variável para a chave |
| 6 | Descriptografia com Chave Variável | reutilizar a lógica anterior invertendo a operação |
| 7 | Código Leetspeak | usar condicionais para substituições específicas por regra |
| 8 | Mensagem Invertida | manipular ordem de caracteres e composição incremental de saída |
| 9 | Alfabeto Secreto | cifrar usando correspondência entre dois alfabetos |
| 10 | Somador de Integridade (Hash) | acumular valor numérico por fórmula repetida para integridade |
## Quando usar
Cripto é mais adequada quando a turma já domina repetição, variáveis e manipulação básica de texto. Ela funciona bem como atividade de aprofundamento, fechamento de trilha ou ponte para discussões sobre segurança digital, codificação e proteção de dados.
## Referências
- Cifra de César: https://pt.wikipedia.org/wiki/Cifra_de_C%C3%A9sar
- Função hash: https://pt.wikipedia.org/wiki/Fun%C3%A7%C3%A3o_hash
- Criptografia: https://pt.wikipedia.org/wiki/Criptografia

83
docs/edu/recursos/atividades/programacao/index.md Normal file
View File

@@ -0,0 +1,83 @@
---
title: Programação
slug: /recursos/atividades/programacao
---
# Atividades de Programação
As Atividades de Programação do Decoda organizam a aprendizagem em desafios curtos, progressivos e visualmente concretos. Em vez de começar por sintaxe textual, o estudante manipula blocos, observa efeitos imediatos na tela e passa a relacionar comando, regra e resultado. Isso reduz a barreira inicial de entrada e permite concentrar a atenção no raciocínio computacional.
Pedagogicamente, esse conjunto de atividades cobre um percurso bastante amplo: modelagem por propriedades, sequência de comandos, repetição, condicionais, eventos, coordenadas, variáveis, memória de estado, funções e noções iniciais de criptografia. Cada atividade enfatiza um recorte do pensamento computacional e pode ser usada tanto em trilhas sequenciais quanto em intervenções pontuais, de acordo com o objetivo da aula.
## Objetivo pedagógico
O principal objetivo desta trilha é desenvolver pensamento computacional com progressão didática: partir de desafios concretos e visuais, avançar para estruturas de controle e, gradualmente, chegar a problemas que exigem mais abstração, planejamento e revisão de estratégia.
Além de aprender blocos ou comandos isolados, espera-se que o estudante compreenda como construir soluções passo a passo, comparar alternativas, identificar padrões e justificar decisões. Com mediação adequada, as atividades também fortalecem autonomia, linguagem para explicar raciocínio e confiança para lidar com erro como parte do processo de aprendizagem.
## Como conduzir em sala
Uma forma simples e eficaz de condução é trabalhar em ciclos curtos de exploração, execução e reflexão:
```mermaid
flowchart TD
A[Selecionar atividade e objetivo da aula] --> B[Explorar o desafio e prever estratégia]
B --> C[Montar solução em blocos]
C --> D[Executar e observar resultado]
D --> E[Discutir o que funcionou e o que precisa ajuste]
E --> F[Refinar a solução]
F --> C
```
Esse formato ajuda a manter o foco pedagógico em raciocínio e tomada de decisão, e não apenas em chegar rapidamente ao fim da fase.
## Boas práticas de mediação
- Comece pelo conceito-alvo da aula e escolha a atividade em função desse foco.
- Incentive o estudante a explicar a estratégia antes e depois de executar.
- Evite entregar a resposta pronta; prefira perguntas que levem à revisão do raciocínio.
- Valorize soluções diferentes quando forem corretas e discuta critérios de clareza e eficiência.
- Use o erro como evidência de aprendizagem em progresso, destacando o que já foi compreendido.
## Como navegar nesta seção
Nesta subpasta, cada atividade possui uma página própria. Em cada uma delas você encontra:
- o foco pedagógico da atividade;
- os conceitos de programação mais evidentes;
- sugestões de mediação em sala;
- uma tabela com a progressão das fases;
- referências externas para aprofundamento.
## Mapa das atividades
| Atividade | Foco principal | Conceitos mais evidentes |
| --- | --- | --- |
| [Quebra-cabeças](./programacao/quebra-cabecas) | Modelagem de informações e atributos | propriedades, classificação, atribuição de valores |
| [Aspirador](./programacao/aspirador) | Navegação reativa e estratégia | sequência, repetição, condicionais, sensores, variáveis |
| [Autômato](./programacao/automato) | Construção de algoritmos de percurso | sequência, loops, condicionais, controle de fluxo |
| [Semáforo](./programacao/semaforo) | Programação orientada a eventos e segurança lógica | sequência temporal, eventos, sincronização, condicionais |
| [Tartaruga](./programacao/tartaruga) | Programação como construção visual | movimento, repetição, funções, decomposição |
| [Toupeira](./programacao/toupeira) | Coordenadas, memória e aleatoriedade | matrizes, loops aninhados, variáveis, estado |
| [Cripto](./programacao/cripto) | Representação simbólica e transformação de dados | laços, variáveis, condicionais, funções hash, cifra |
| [Ordenação](./programacao/ordenacao) | Algoritmos de ordenação e análise de eficiência | listas, loops aninhados, variáveis, comparação, algoritmos clássicos |
## Como escolher uma atividade
Se a turma ainda está começando, vale priorizar atividades em que a relação entre comando e efeito seja imediatamente visível, como [Quebra-cabeças](./programacao/quebra-cabecas), [Semáforo](./programacao/semaforo), [Autômato](./programacao/automato) e [Aspirador](./programacao/aspirador). Elas ajudam a consolidar a ideia de que programar é construir instruções precisas para resolver um problema.
Se o objetivo é avançar para estruturas mais complexas, [Toupeira](./programacao/toupeira) e [Cripto](./programacao/cripto) abrem espaço para discutir estados, regras condicionais, memória, representação de dados e transformação algorítmica de informação. Já [Ordenação](./programacao/ordenacao) aprofunda essa progressão com algoritmos clássicos e noções de eficiência comparada, sendo a mais indicada quando o objetivo inclui discutir custo computacional e múltiplas estratégias para o mesmo problema. Já [Tartaruga](./programacao/tartaruga) é especialmente útil quando se deseja trabalhar criatividade, abstração e decomposição ao mesmo tempo.
## Sugestão de progressão
Uma progressão possível é:
1. começar com modelagem e comando simples em [Quebra-cabeças](./programacao/quebra-cabecas);
2. avançar para navegação com [Autômato](./programacao/automato) e [Aspirador](./programacao/aspirador);
3. introduzir coordenação de regras e eventos em [Semáforo](./programacao/semaforo);
4. explorar criação visual e funções em [Tartaruga](./programacao/tartaruga);
5. trabalhar memória, coordenadas e aleatoriedade em [Toupeira](./programacao/toupeira);
6. fechar com transformação simbólica e segurança em [Cripto](./programacao/cripto);
7. avançar para algoritmos de ordenação e análise de eficiência em [Ordenação](./programacao/ordenacao).
Essa ordem não é obrigatória. Em muitos contextos, faz mais sentido escolher a atividade pelo conceito que se deseja observar ou reforçar na aula.

251
docs/edu/recursos/atividades/programacao/ordenacao.md Normal file
View File

@@ -0,0 +1,251 @@
---
title: Ordenação
sidebar_position: 9
---
# Ordenação
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/ordenacao-thumbnail.png").default}
alt="Thumbnail da atividade Ordenação"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>Ordenação apresenta um dos problemas mais estudados da computação — colocar uma lista em ordem crescente — e o explora por múltiplos ângulos. O estudante implementa, fase a fase, cinco estratégias diferentes para o mesmo problema e percebe que cada uma tem uma lógica distinta, um custo diferente e situações em que funciona melhor ou pior.</p>
<p>Ao contrário de atividades que permitem soluções abertas, aqui cada fase exige um algoritmo específico. A validação verifica não só se a lista ficou ordenada, mas se o padrão de execução corresponde ao algoritmo pedido. Isso leva o estudante a entender o que torna cada algoritmo diferente — não apenas a chegar no resultado.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
Ordenação é um contexto muito fértil para trabalhar estruturas de repetição aninhadas, variáveis de controle e operações sobre listas. Mas o que a distingue das demais atividades é que ela introduz uma ideia central da computação: diferentes algoritmos podem resolver o mesmo problema, com estratégias e custos radicalmente distintos.
Nas fases iniciais, o estudante pratica comparação e troca de dois ou três elementos com condicionais simples — consolidando o básico. A progressão avança para os algoritmos clássicos: **Bubble Sort**, **Selection Sort**, **Insertion Sort**, **Shell Sort** e **Counting Sort**. Cada um representa uma abordagem diferente, dos mais intuitivos aos que fogem completamente do paradigma de comparação direta.
A atividade também é uma porta de entrada concreta para análise de algoritmos. Sem precisar de formalismo matemático, o estudante pode observar quantas operações cada estratégia realiza, comparar resultados e começar a pensar em eficiência — uma competência que vai além da programação e se aplica a qualquer tipo de problema que exige raciocínio sobre custo e escala.
## Os algoritmos
Cada algoritmo desta atividade representa uma estratégia diferente para o mesmo problema. Os diagramas abaixo mostram o fluxo lógico de cada um.
### Bubble Sort
O Bubble Sort percorre a lista repetidamente, comparando pares de elementos adjacentes e trocando os que estão fora de ordem. A cada passada completa, o maior elemento ainda desordenado chega à sua posição final. O processo se repete até que nenhuma troca seja necessária.
```mermaid
flowchart TD
A[Início] --> B[Nova passada pela lista]
B --> C[i = 0]
C --> D{elemento atual maior que o próximo?}
D -->|Sim| E[Trocar os dois]
D -->|Não| F[i = i + 1]
E --> F
F --> G{Fim da passada?}
G -->|Não| D
G -->|Sim| H{Alguma troca ocorreu?}
H -->|Sim| B
H -->|Não| I[Lista ordenada]
```
A versão com otimização acrescenta uma variável de controle que detecta quando nenhuma troca ocorreu na passada — o que significa que a lista já está ordenada — encerrando o algoritmo antes das passadas restantes.
#### Quando é vantajoso
O Bubble Sort brilha quando a lista já está quase ordenada: com a otimização de parada antecipada, ele pode terminar em uma única passada, com custo proporcional ao tamanho da lista. É também o algoritmo mais fácil de implementar e depurar, o que o torna o ponto de partida natural para quem está aprendendo ordenação.
#### Quando não é a melhor escolha
Em listas grandes e desordenadas, o Bubble Sort realiza um número quadrático de comparações e trocas — o que o torna impraticável para volumes acima de alguns milhares de elementos. Em performance real, costuma ser o mais lento entre os algoritmos O(n²) porque acumula muitas trocas por passada.
#### Onde é usado
Por seu custo quadrático, o Bubble Sort raramente é escolhido em sistemas reais. Sua importância é quase inteiramente pedagógica: a lógica de "empurrar o maior elemento para o final a cada passada" é uma das mais intuitivas para entender o conceito de ordenação. Versões educacionais e ferramentas de visualização de algoritmos o utilizam amplamente por esse motivo.
### Selection Sort
O Selection Sort divide a lista em duas partes: a porção já ordenada, que cresce da esquerda, e a porção desordenada. A cada passada, o algoritmo varre toda a parte desordenada para encontrar o menor elemento e o posiciona no início dela — com uma única troca por passada.
```mermaid
flowchart TD
A[i = 0] --> B[mínimo = i]
B --> C[j = i + 1]
C --> D{elemento j menor que elemento mínimo?}
D -->|Sim| E[mínimo = j]
D -->|Não| F[j = j + 1]
E --> F
F --> G{j chegou ao fim?}
G -->|Não| D
G -->|Sim| H[Trocar posições i e mínimo]
H --> I{i chegou ao penúltimo?}
I -->|Não| J[i = i + 1]
J --> B
I -->|Sim| K[Lista ordenada]
```
Uma característica do Selection Sort é que ele realiza exatamente `n - 1` trocas, independente do estado inicial da lista — ao contrário do Bubble Sort, que pode realizar muitas mais.
#### Quando é vantajoso
O Selection Sort é vantajoso quando o custo de escrever na memória é significativamente mais alto do que o de ler — por exemplo, em memórias flash, onde cada escrita tem custo real de desgaste. Nesse contexto, fazer no máximo `n - 1` trocas é uma vantagem concreta. Ele também é simples de implementar e tem comportamento previsível: o número de comparações é sempre o mesmo, independente da entrada.
#### Quando não é a melhor escolha
Assim como o Bubble Sort, o Selection Sort tem custo quadrático no número de comparações — mesmo que a lista já esteja ordenada, ele percorre toda a parte não ordenada a cada passada. Não existe versão com parada antecipada eficaz. Para listas grandes, algoritmos O(n log n) são muito mais eficientes.
#### Onde é usado
O Selection Sort aparece em contextos embarcados com memória muito limitada e escrita cara, como microcontroladores simples e dispositivos EEPROM. Em sistemas de uso geral, é substituído por algoritmos mais eficientes. Pedagogicamente, é valioso porque separa claramente a fase de busca do mínimo da fase de troca, tornando a lógica de duas etapas por passada muito explícita.
### Insertion Sort
O Insertion Sort constrói a lista ordenada de forma incremental. Para cada elemento da parte desordenada, ele retrocede na parte já ordenada deslocando os elementos maiores uma posição para a direita, até encontrar o lugar certo para inserir o elemento atual.
```mermaid
flowchart TD
A[i = 1] --> B[guardar elemento da posição i]
B --> C[j = i - 1]
C --> D{j válido e elemento j maior que o guardado?}
D -->|Sim| E[Deslocar elemento j uma posição para a direita]
E --> F[j = j - 1]
F --> D
D -->|Não| G[Inserir o guardado na posição j + 1]
G --> H{i chegou ao fim?}
H -->|Não| I[i = i + 1]
I --> B
H -->|Sim| J[Lista ordenada]
```
O Insertion Sort é muito eficiente para listas quase ordenadas, pois precisa de poucos deslocamentos quando os elementos já estão próximos de sua posição final. É também a base do Shell Sort.
#### Quando é vantajoso
O Insertion Sort é uma das melhores escolhas para listas pequenas (tipicamente abaixo de 20 elementos) ou quase ordenadas. Nesses casos, ele supera algoritmos teoricamente mais eficientes como o Merge Sort, que carregam custo fixo maior de divisão e combinação. Para listas já ordenadas, seu custo é linear — O(n) — pois nenhum deslocamento é necessário.
#### Quando não é a melhor escolha
Em listas grandes e aleatórias, o custo quadrático domina. Cada novo elemento pode precisar ser deslocado até o início da lista, resultando em muitas operações de escrita. Para esses casos, algoritmos O(n log n) são necessários.
#### Onde é usado
O Insertion Sort está presente em implementações híbridas de algoritmos avançados. O Timsort — usado por padrão em Python e na JVM — aplica o Insertion Sort em blocos pequenos antes de combiná-los com Merge Sort. O IntroSort — base do `std::sort` do C++ — também recorre ao Insertion Sort quando a recursão chega a sublistas pequenas. É um algoritmo com papel real e ativo nos sistemas de produção mais difundidos.
### Shell Sort
O Shell Sort é uma generalização do Insertion Sort. Em vez de inserir comparando apenas elementos vizinhos, ele começa comparando elementos separados por um intervalo inicial de metade do tamanho da lista. A cada rodada, esse intervalo é dividido ao meio. Quando o intervalo chega a 1, o comportamento é idêntico ao Insertion Sort — mas a lista já está bem próxima da ordem, então o trabalho restante é mínimo.
```mermaid
flowchart TD
A[intervalo = tamanho dividido por 2] --> B{intervalo maior ou igual a 1?}
B -->|Não| Z[Lista ordenada]
B -->|Sim| C[i = intervalo]
C --> D[guardar elemento da posição i]
D --> E[j = i - intervalo]
E --> F{j válido e elemento j maior que o guardado?}
F -->|Sim| G[Deslocar elemento j para a posição j + intervalo]
G --> H[j = j - intervalo]
H --> F
F -->|Não| I[Inserir o guardado na posição j + intervalo]
I --> J{i chegou ao fim?}
J -->|Não| K[i = i + 1]
K --> D
J -->|Sim| L[intervalo = intervalo dividido por 2]
L --> B
```
A intuição por trás do Shell Sort é que comparações de longa distância movem os elementos para perto de sua posição final muito mais rapidamente do que comparações vizinhas, reduzindo o trabalho das rodadas seguintes.
#### Quando é vantajoso
O Shell Sort é especialmente adequado para sistemas embarcados e ambientes sem suporte a recursão, onde algoritmos O(n log n) baseados em divisão (como Merge Sort e Quick Sort) são difíceis de implementar. Ele entrega desempenho subquadrático — na prática próximo de O(n log n) para sequências de intervalos bem escolhidas — com código iterativo simples e memória O(1).
#### Quando não é a melhor escolha
A complexidade do Shell Sort depende da sequência de intervalos escolhida, e a análise teórica ainda é um problema em aberto para algumas sequências. Em sistemas com suporte a recursão e memória suficiente, o Merge Sort ou o Timsort oferecem garantias mais sólidas e melhor desempenho em listas grandes.
#### Onde é usado
O Shell Sort é encontrado em firmwares, sistemas operacionais compactos e ambientes com pilha de chamadas limitada. O kernel do Linux e o uClibc utilizaram implementações de Shell Sort em contextos onde simplicidade e ausência de recursão eram mais importantes do que performance máxima. É também um ponto de passagem didático natural entre o Insertion Sort e os algoritmos baseados em divisão.
### Counting Sort
O Counting Sort é fundamentalmente diferente dos anteriores: ele **não compara elementos entre si**. Em vez disso, conta quantas vezes cada valor aparece na lista e, a partir dessas contagens, reconstrói a lista já ordenada. Por isso, ele escapa do limite teórico inferior O(n log n) que vale para qualquer algoritmo baseado em comparação.
```mermaid
flowchart TD
A[Criar lista de contagem com zeros] --> B[Para cada elemento da lista]
B --> C[Incrementar a contagem do valor correspondente]
C --> D{Todos os elementos contados?}
D -->|Não| B
D -->|Sim| E[v = 0]
E --> F{v menor que tamanho da contagem?}
F -->|Não| G[Lista reconstruída]
F -->|Sim| H{contagem de v maior que zero?}
H -->|Não| I[v = v + 1]
I --> F
H -->|Sim| J[Adicionar v à próxima posição da lista]
J --> K[Decrementar contagem de v]
K --> H
```
#### Quando é vantajoso
O Counting Sort tem complexidade O(n + k), onde **k** é o valor máximo dos dados. Quando k é pequeno em relação a n, ele supera qualquer algoritmo de comparação: ordenar um milhão de notas escolares no intervalo 0–10 é muito mais rápido com Counting Sort do que com Bubble, Insertion ou até Merge Sort.
Ele também é a base do **Radix Sort**, que o aplica dígito a dígito para ordenar inteiros arbitrários em O(d · n), onde d é o número de dígitos.
#### Quando não é a melhor escolha
Quando k >> n — por exemplo, ordenar 10 números no intervalo [0, 1.000.000] — o algoritmo aloca um array de 1 milhão de posições desnecessariamente, com memória O(k) dominando o custo. Além disso, o Counting Sort não se aplica diretamente a dados com ponto flutuante, strings ou objetos complexos, nem a dados com distribuição desconhecida ou muito esparsa.
#### Comparação de complexidade
| Algoritmo | Tempo médio | Memória |
|---|---|---|
| Bubble / Insertion | O(n²) | O(1) |
| Merge / Heap | O(n log n) | O(n) / O(1) |
| Quick Sort | O(n log n) | O(log n) |
| Counting Sort | O(n + k) | O(k) |
Nas fases desta atividade, a lista tem 10 valores com máximo 55. O Counting Sort usa um array de 56 posições — mais memória do que o estritamente necessário para n=10, mas eficiente caso houvesse muitos elementos nessa faixa. Sua importância aqui é pedagógica: ilustrar que existem algoritmos que exploram propriedades dos dados para escapar do limite O(n log n), ao custo de restrições sobre o tipo e a faixa dos valores.
#### Onde é usado
O Counting Sort aparece como subroutine do **Radix Sort**, que o aplica dígito a dígito para ordenar inteiros de qualquer magnitude. Sistemas de contagem de votos, classificação de idades, notas ou qualquer dado inteiro com faixa pequena e conhecida são contextos naturais. Implementações de ordenação estável em sistemas de banco de dados também o utilizam quando os dados satisfazem as restrições de tipo e faixa. No ecossistema de algoritmos, ele representa a categoria dos algoritmos não comparativos — junto com o Radix Sort e o Bucket Sort — que quebram o limite teórico O(n log n) ao explorar a estrutura interna dos dados.
## Mediação pedagógica
Uma abordagem eficaz é pedir que o estudante descreva o algoritmo em palavras antes de implementá-lo em blocos. "O que o Bubble Sort faz a cada passada?" ou "Como o Selection Sort escolhe o próximo elemento?" ajudam a separar a compreensão do algoritmo da habilidade de montá-lo. Se o estudante trava nos blocos, o problema está quase sempre na compreensão do algoritmo — não na ferramenta.
Outro recurso valioso é comparar soluções após a implementação. Dois algoritmos que produzem o mesmo resultado final podem ter realizado quantidades muito diferentes de operações. Perguntar "qual deles você acha que fez mais trabalho?" e em seguida observar o número de comparações e trocas — disponíveis nos dados de execução — torna a noção de eficiência concreta e baseada em evidência.
O Shell Sort e o Counting Sort merecem atenção especial na mediação. O Shell Sort exige que o estudante entenda por que comparar elementos distantes pode ser útil antes de comparar os vizinhos — uma ideia contraintuitiva que vale explorar antes de implementar. O Counting Sort, por sua vez, rompe com o modelo mental de "comparar e decidir" e pode gerar uma boa discussão sobre o que é realmente necessário para ordenar uma lista quando se conhece o intervalo dos dados.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
|---|---|---|
| 1 | Ordenar 2 Números | usar condicional para comparar e trocar dois valores |
| 2 | Ordenar 3 Números | combinar repetição e condicionais para ordenar três elementos |
| 3 | Bubble Sort | comparar pares adjacentes em passadas repetidas |
| 4 | Bubble Sort com Otimização | adicionar controle de parada antecipada quando não há trocas |
| 5 | Selection Sort | encontrar o mínimo da parte desordenada e posicioná-lo com uma troca |
| 6 | Insertion Sort | inserir cada elemento na posição correta deslocando os maiores |
| 7 | Shell Sort | usar comparações com intervalo variável que diminui progressivamente até 1 |
| 8 | Counting Sort | contar ocorrências e reconstruir a lista sem comparar elementos |
## Quando usar
Ordenação é indicada quando a turma já tem fluência com laços, variáveis e condicionais, e está pronta para um problema com múltiplas soluções corretas e eficiências distintas. É especialmente adequada em aulas que queiram discutir análise de algoritmos de forma introdutória, ou que queiram mostrar que a escolha da estratégia depende das características dos dados — não apenas da correção do resultado.
A atividade funciona bem como continuação natural após Cripto, já que ambas trabalham com transformação sistemática de informação regida por regras precisas. Se o objetivo incluir conceitos como memória auxiliar, troca entre espaço e tempo, ou a categoria de algoritmos não comparativos, o Counting Sort oferece um gancho concreto e didático para essa discussão.
## Referências
- Algoritmos de ordenação: https://pt.wikipedia.org/wiki/Algoritmo_de_ordena%C3%A7%C3%A3o
- Bubble Sort: https://pt.wikipedia.org/wiki/Bubble_sort
- Selection Sort: https://pt.wikipedia.org/wiki/Selection_sort
- Insertion Sort: https://pt.wikipedia.org/wiki/Insertion_sort
- Shell Sort: https://pt.wikipedia.org/wiki/Shell_sort
- Counting Sort: https://pt.wikipedia.org/wiki/Counting_sort
- Complexidade computacional: https://pt.wikipedia.org/wiki/Complexidade_computacional

55
docs/edu/recursos/atividades/programacao/quebra-cabecas.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: Quebra-cabeças
sidebar_position: 2
---
# Quebra-cabeças
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/puzzle-thumbnail.png").default}
alt="Thumbnail da atividade Quebra-cabeças"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>O Quebra-cabeças trabalha uma dimensão de programação que costuma aparecer pouco nas primeiras aulas: a necessidade de representar corretamente um objeto por meio de seus atributos. Em vez de pedir ao estudante que apenas mova personagens ou repita comandos, a atividade pede que ele monte uma ficha técnica coerente para cada animal. Isso desloca o foco para a ideia de que programas também organizam e descrevem dados.</p>
<p>Na prática, a atividade introduz uma lógica de modelagem: cada animal é descrito por tipo, número de patas, cobertura corporal, forma de locomoção e som. O estudante precisa escolher e combinar valores adequados, o que aproxima a experiência de noções fundamentais de computação, como propriedades, categorias, seleção de valores válidos e consistência entre campos relacionados. É uma boa porta de entrada para discutir variáveis e estruturas de dados sem recorrer cedo demais à abstração textual.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
Ao montar cada ficha, o estudante aprende que programar também envolve representar o mundo com precisão. Em termos pedagógicos, isso ajuda a construir repertório para compreender que um mesmo objeto pode ser descrito por diferentes propriedades e que essas propriedades precisam ser coerentes entre si. Mais adiante, essa ideia sustenta conceitos como variáveis, registros, objetos e modelagem de dados.
O uso de blocos favorece esse processo porque reduz a sobrecarga de sintaxe e mantém o foco na relação entre categoria e valor. O erro deixa de ser apenas "o programa não rodou" e passa a ser também "a descrição construída não representa corretamente o problema". Esse tipo de erro é pedagogicamente rico, porque exige leitura de contexto, comparação de atributos e revisão de hipóteses.
## Mediação pedagógica
Uma boa estratégia é pedir que a turma verbalize por que determinada combinação faz sentido ou não. Em vez de confirmar apenas se a resposta está correta, vale perguntar quais características são essenciais para distinguir um animal de outro e quais propriedades ajudam mais a classificá-lo.
Também é uma atividade adequada para introduzir a diferença entre escolher um valor qualquer e escolher um valor compatível com uma estrutura. Essa distinção é central em programação: preencher um campo não basta; é preciso preencher com um dado válido para aquele contexto.
## Progressão das fases
| Fase | Animal-alvo | O que o estudante pratica |
| --- | --- | --- |
| 1 | Gato | relacionar mamífero, quatro patas, pelos, locomoção e som em uma ficha coerente |
| 2 | Cachorro | revisar a mesma estrutura mudando apenas atributos específicos, especialmente o som |
| 3 | Abelha | perceber mudança de categoria e propriedades associadas, como inseto, seis patas e voo |
| 4 | Caracol | lidar com combinações menos óbvias, como ausência de patas e locomoção rastejante |
| 5 | Peixe | associar tipo, cobertura e locomoção típicos de ambiente aquático |
| 6 | Aranha | diferenciar aracnídeos de insetos por número de patas e classificação |
| 7 | Sapo | trabalhar características de anfíbios e discutir exceções em classificações cotidianas |
| 8 | Pato | combinar ave, duas patas, penas, voo e som em uma estrutura única |
| 9 | Cobra | observar que ausência de patas não basta para classificar um animal corretamente |
| 10 | Leão | consolidar o uso da estrutura completa com um novo conjunto coerente de atributos |
## Quando usar
Esta atividade funciona bem no início de uma trilha, principalmente quando o objetivo é mostrar que programação também é organização de informação. Ela também pode ser usada antes de atividades com variáveis ou objetos, como preparação conceitual para discutir como dados são representados em um programa.
## Referências
- Google Blockly, o que é o Blockly?: https://developers.google.com/blockly/guides/get-started/what-is-blockly?hl=pt-br
- Variável (ciência da computação): https://pt.wikipedia.org/wiki/Vari%C3%A1vel_(ci%C3%AAncia_da_computa%C3%A7%C3%A3o)
- Objeto (ciência da computação): https://pt.wikipedia.org/wiki/Objeto_(ci%C3%AAncia_da_computa%C3%A7%C3%A3o)

50
docs/edu/recursos/atividades/programacao/semaforo.md Normal file
View File

@@ -0,0 +1,50 @@
---
title: Semáforo
sidebar_position: 5
---
# Semáforo
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/semaforo-thumbnail.png").default}
alt="Thumbnail da atividade Semáforo"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>O Semáforo é uma atividade especialmente valiosa para introduzir programação orientada a eventos e coordenação entre regras simultâneas. Seu contexto é socialmente reconhecível: carros e pedestres precisam compartilhar o espaço com segurança. Isso faz com que o estudante compreenda rapidamente que programar, nesse caso, não é apenas acionar cores, mas sincronizar comportamentos para evitar conflito.</p>
<p>Ao contrário de atividades baseadas apenas em deslocamento, aqui a lógica temporal ganha protagonismo. O estudante precisa respeitar ordem, intervalos de espera, dependência entre dois sistemas e, em fases posteriores, sinais adicionais como luz piscante e som. É um contexto muito fértil para discutir estados, transições e regras de segurança.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
O Semáforo ajuda a entender que muitos programas controlam sistemas que mudam de estado ao longo do tempo. A cada comando, o sistema assume uma nova condição: verde, amarelo, vermelho, pedestre liberado, pedestre em alerta, som ativo ou inativo. Isso aproxima o estudante da lógica de máquinas de estado, mesmo sem usar esse vocabulário logo de início.
Além disso, a atividade reforça a importância da ordem e da sincronização. Se um comando está correto, mas fora da sequência, o resultado ainda pode ser perigoso ou inválido. Essa percepção é pedagogicamente importante porque mostra que, em programação, não basta saber quais ações usar; é preciso também saber quando e em que relação elas devem ocorrer.
## Mediação pedagógica
Uma abordagem produtiva é pedir que a turma descreva o comportamento do sistema antes de montá-lo em blocos: quando o carro passa, quando o pedestre espera, quando o pedestre atravessa e quando recebe aviso de encerramento. Essa verbalização ajuda a transformar uma rotina do cotidiano em algoritmo.
Também é interessante explorar a ideia de segurança lógica. Perguntas como “o que acontece se os dois estiverem verdes ao mesmo tempo?” ou “por que o amarelo existe?” ajudam a mostrar que regras intermediárias fazem parte da confiabilidade de um sistema programado.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | Controle básico do semáforo de carros | ordenar corretamente as cores do semáforo principal |
| 2 | Controle básico com tempo | associar mudança de estado a intervalos temporais explícitos |
| 3 | Controle do semáforo de pedestres | sincronizar dois subsistemas dependentes entre si |
| 4 | Semáforo de pedestres com luz piscante | acrescentar estado intermediário de alerta antes do fechamento |
| 5 | Semáforo com sons | integrar sinal visual e sonoro em uma sequência coordenada |
## Quando usar
Esta atividade é muito adequada quando o objetivo é discutir ordem temporal, eventos e coordenação entre múltiplas regras. Ela também funciona bem em aulas que queiram aproximar programação de problemas de cidadania, mobilidade urbana e sistemas automatizados do cotidiano.
## Referências
- Máquina de estados finitos: https://pt.wikipedia.org/wiki/M%C3%A1quina_de_estados_finitos
- Fluxo de controle: https://pt.wikipedia.org/wiki/Fluxo_de_controle
- Semáforo (sinalização): https://pt.wikipedia.org/wiki/Sem%C3%A1foro

55
docs/edu/recursos/atividades/programacao/tartaruga.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: Tartaruga
sidebar_position: 6
---
# Tartaruga
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/turtle-thumbnail.png").default}
alt="Thumbnail da atividade Tartaruga"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>A Tartaruga aproxima a programação da criação visual. Em vez de resolver um labirinto ou classificar dados, o estudante escreve instruções que se transformam em formas, padrões, composições e desenhos. Essa relação imediata entre comando e imagem é uma das maneiras mais eficazes de introduzir abstração, decomposição e reaproveitamento de código.</p>
<p>Historicamente, a programação com tartaruga está ligada à tradição educacional do Logo e ao uso de desenho geométrico como porta de entrada para pensamento computacional. No Decoda, essa proposta aparece em linguagem de blocos, com progressão que começa em formas simples e avança para funções, padrões compostos e criação autoral.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
O principal ganho pedagógico da Tartaruga é tornar visível a estrutura do algoritmo. Quando o estudante desenha um quadrado, por exemplo, percebe que uma forma pode ser descrita por um padrão que se repete. Quando desenha estrelas, círculos e composições mais complexas, passa a entender que um programa pode encapsular uma rotina em uma função e reutilizá-la em diferentes contextos.
Essa atividade também ajuda a desenvolver noções de orientação, ângulo, deslocamento, repetição e coordenação entre ações. Como o resultado aparece de forma gráfica, erros e acertos ficam mais fáceis de interpretar. Isso favorece a depuração e o refinamento do raciocínio, além de abrir espaço para integrar programação com arte e geometria.
## Mediação pedagógica
Vale pedir que o estudante descreva qual padrão está tentando construir antes de começar a montar os blocos. Em muitos casos, a pergunta central não é “qual bloco usar?”, mas “qual regularidade existe nesse desenho?”. Essa mudança de foco é importante porque aproxima o estudante da ideia de algoritmo como descrição de um padrão.
Também é produtivo comparar duas soluções visuais para o mesmo desenho: uma totalmente linear e outra baseada em função ou repetição. Essa comparação ajuda a discutir generalização, legibilidade e reaproveitamento de código sem perder o caráter criativo da atividade.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | O Quadrado | associar deslocamento e rotação para formar um polígono simples |
| 2 | O Pentágono | ajustar repetição e ângulo para uma nova figura regular |
| 3 | A Estrela | criar padrão geométrico mais complexo e introduzir cor |
| 4 | Estrela e Linha | controlar caneta, deslocamento sem desenho e composição simples |
| 5 | Quatro Estrelas | repetir uma função visual em diferentes posições |
| 6 | Três Estrelas e uma Linha | combinar composição geométrica com mudança de cor e reposicionamento |
| 7 | Três Estrelas e Raios | construir padrões radiais com repetição adicional |
| 8 | Três Estrelas e um Círculo | simular curva por repetição incremental de movimentos e giros |
| 9 | Lua Crescente | sobrepor formas e cores para produzir um efeito visual composto |
| 10 | Desafio Livre | planejar, criar e revisar um desenho autoral com autonomia |
## Quando usar
A Tartaruga é ideal quando se quer mostrar que programação não serve apenas para controlar regras rígidas, mas também para criar. Ela funciona muito bem em propostas interdisciplinares com matemática, geometria e artes, além de ser uma ótima atividade para consolidar repetição e funções de maneira significativa.
## Referências
- Python, módulo turtle (pt-BR): https://docs.python.org/pt-br/3/library/turtle.html
- Google Blockly, o que é o Blockly?: https://developers.google.com/blockly/guides/get-started/what-is-blockly?hl=pt-br
- Logo (linguagem de programação): https://pt.wikipedia.org/wiki/Logo_(linguagem_de_programa%C3%A7%C3%A3o)

54
docs/edu/recursos/atividades/programacao/toupeira.md Normal file
View File

@@ -0,0 +1,54 @@
---
title: Toupeira
sidebar_position: 7
---
# Toupeira
<div style={{ display: "flex", alignItems: "flex-start", gap: "16px", flexWrap: "wrap" }}>
<img
src={require("@site/static/images/atividades/programacao/molemash-thumbnail.png").default}
alt="Thumbnail da atividade Toupeira"
style={{ width: "280px", height: "280px", objectFit: "contain", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: "260px" }}>
<p>A Toupeira trabalha uma combinação muito rica de conceitos: coordenadas, repetição, memória, aleatoriedade e controle de estado. O tabuleiro 3x3 dá à atividade uma aparência simples, mas, pedagogicamente, ela progride para problemas bastante sofisticados, em que o estudante já não precisa apenas mover um personagem, e sim definir regras para um comportamento que se repete sem se tornar previsível ou inválido.</p>
<p>Essa atividade é importante porque desloca a programação do controle puramente sequencial para a gestão de informações durante a execução. O estudante precisa lembrar posições anteriores, evitar repetições, decidir o que fazer diante de sorteios aleatórios e organizar a lógica em ciclos. Isso introduz uma noção inicial de sistema dinâmico controlado por variáveis.</p>
</div>
</div>
## O que esta atividade ensina sobre programação
Nas fases iniciais, a Toupeira ajuda a consolidar o sistema de coordenadas em grade e a leitura linha-coluna. Em seguida, amplia esse trabalho com laços de repetição e varredura completa da matriz. Mais adiante, a atividade passa a exigir sorteio de posições, armazenamento temporário em variáveis e comparação com estados anteriores.
Do ponto de vista pedagógico, essa progressão é muito relevante porque mostra que programas podem produzir resultados diferentes a cada execução, desde que respeitem regras definidas. O estudante começa a entender que variáveis não servem apenas para guardar números: elas também sustentam memória, contexto e controle de comportamento.
## Mediação pedagógica
Antes de avançar para as fases com aleatoriedade, vale garantir que a turma esteja confortável com a leitura do tabuleiro. Uma mediação simples é pedir que os estudantes antecipem verbalmente a posição para a qual a toupeira deve saltar antes de executar o código.
Nas fases com memória, é útil perguntar o que o programa precisa “lembrar” para não errar. Essa pergunta ajuda a introduzir variáveis como recurso de modelagem do estado atual e do estado anterior, em vez de tratá-las apenas como conteúdo formal.
## Progressão das fases
| Fase | Nome | O que o estudante pratica |
| --- | --- | --- |
| 1 | Movimento Sequencial | usar coordenadas simples para deslocamentos planejados na mesma linha |
| 2 | Os Quatro Cantos | localizar posições extremas e organizar percurso em grade |
| 3 | O Pêndulo Vertical | combinar repetição com alternância de posições fixas |
| 4 | Varredura Completa | usar loops aninhados para percorrer toda a matriz |
| 5 | A Toupeira Inquieta | introduzir aleatoriedade controlada com linha fixa |
| 6 | Coordenadas na Memória | sortear linha e coluna, armazenar valores e usá-los no movimento |
| 7 | O Centro Proibido | aplicar condicionais para restringir comportamento a partir de regras |
| 8 | Memória de Curto Prazo | comparar posição atual com posição anterior e evitar repetição de linha |
| 9 | O Algoritmo Perfeito | usar while e memória para impedir repetição imediata do mesmo buraco |
| 10 | O Desafio da IA Final | integrar repetição, memória, restrições de linha e pausa entre saltos |
## Quando usar
Esta atividade é indicada quando a turma já domina sequência e repetição e está pronta para avançar para variáveis, memória e aleatoriedade. Ela também funciona muito bem em aulas que queiram aproximar programação de noções de grade, posição e comportamento reativo.
## Referências
- Sistema de coordenadas: https://pt.wikipedia.org/wiki/Sistema_de_coordenadas
- Fluxo de controle: https://pt.wikipedia.org/wiki/Fluxo_de_controle