desenvolvimento pre-lancamento

Commit inicial - add do repo privado para o repo NT

style: changes header's logo and colors

style: changes home page first session layout

feat: creates about us home page section

chore: creates home page section for whom

chore: creates student materails home page section

chore: creates teachers materials home page section

chore: creates teacher materials home page section

style: changes primary color

style: changes color at activities page

style: changes about page color

style: changes name to Decoda

fix: changes route to about page at footer

fix: changes background color

style: changes game page header colors

style: changes footer colors

chore: adds home page sections title

style: changes main font family to Lato

style: adds title font

fix: changes sizes to be more responsive for mobile

ajuste no build vercel

atualiza regras envio homol

Adiciona instrucoes de uso

add JupyterLite

fix solucao turtle

Add Mole Mash e Modal de Falhas

Add Progress Bar na pagina de Atividades

fix game name

chore: atualiza lockfile removendo vercel analytics

inclusão de efeito ao mudar de fase

add mecanismo de solução de fases em debug

vite config test

add BaseGame e refator do MoleMash

refatoração turtle

refatoração automato

refatoração automato

add tag

bug 1 e 2 automato

mostrar apenas games em homologação na pagina de atividades

aumentar timeout das fases finais do Turtle

fix bug scroll

add video

refactor semaforo

arrumar ordem das cores

add build docs

update vercel

update vercel

update vercel

update vercel

update vercel

add vercel jupyter

add vercel jupyter

fix deploy Vercel

fix deploy Vercel

fix deploy Vercel

add cripto

add cripto

refatoração

fix tour Mole Mash

.

remover arquivos de controle

chore: adds development tag for activity card

remover arquivos de status indevidamente versionados

atualizar cores nas atividades

add Quebra Cabeças

add Quebra Cabeças

add iniciativas

add Iniciativas

alteração de fotos pesadas

fix menu mobile

fix menu mobile

fix menu mobile

add Aspirador

update icons

update identidade visual documentação

update jupyter

add kernel python local

add kernel python local

add kernel python local

feat: add health check

feat: add primeiros passos

add letramento

mover letramento de lugar

update path games

update path games

fix: ajuste clique rapido no botão executar

remover dead code

fix: refactor: extract shared utilities for storage, phase unlock and mobile detection

stabilize context references and fix stale closure

extrair GameProgressContext do GameStateContext (SRP)

refactor(game): extrair usePhaser e useGameModals de GameBase + corrigir bugs descobertos

refactor(game): remove todos os aliases PT/EN duplicados

Remover aliases PT/EN da camada de modais

refactor + tests

security: add CodeSanitizer and integrate into GameInterpreter

- CodeSanitizer.js: 4 built-in rules (max_length, infinite_while,
  infinite_for, excessive_nesting) with pluggable extra rules
- GameInterpreter.executeCode: calls sanitizeCode() before js-interpreter,
  differentiates CodeSanitizationError (warn) from other errors (error)
- 21 unit tests for CodeSanitizer (100% coverage)
- 4 integration tests in GameInterpreter for sanitization paths

add CodeSanitizer

fix: fase 10 aspirador

fix: bug semaforo

teste

feat: add version

Ajusta a landing page para ficar mais próxima ao protótipo

ajusta raio da borda do botão de Acesse nosso Laboratório

pequenos ajustes de layout na página de iniciativas

atualiza tabela de jogos educativos com os jogos disponíveis atualmente

ajustados pequenos detalhes e informações do jogos na seção de guias pedagógicos

troca nome playground para laboratório e adiciona imagens do lab

adiciona documentação de conceitos básicos de programação

ajustado pequenos erros de digitação

adiciona tooltip com conceitos escondidos em hover na tag +N de conceitos

update docs dev

desativar tour

setup matriz MoleMash

setup matriz MoleMash

fix: link

update version

update docs

update docs

mudou o layout de quem somos

mudei as imgs dos icons e baixei o botao

centraliza titulo com imagem e ajusta sessão com gradiente vermelho-rosa

adiciona responsividade para a pagina quem somos

ajusta botão de conheça nossa história

ajustes

ajustes na home + add. teclado

update version

security

security

feat: add tapume para telas pequenas

v1.1.0

feat: decoda offline

feat: doc offline

offline

fix: ajustes para release

fix: navbar; config ordenação; versão

fix: rotas docs e jupyter para pwa

delete private files

Co-authored-by: Indra Araujo <indra.araujo.santos@gmail.com>
Co-authored-by: solange dos santos <sollangelive71@gmail.com>
This commit is contained in:
2025-10-29 21:30:14 -03:00
committed by Graciano
parent e24ee22b5a
commit 3da7d323e8
577 changed files with 121994 additions and 158 deletions

View File

@@ -0,0 +1,7 @@
{
"position": 5,
"label": "Laboratórios",
"collapsible": true,
"collapsed": true,
"className": "purple"
}

View File

@@ -0,0 +1,341 @@
---
sidebar_position: 1
title: "Blocos"
---
# Laboratório de Blocos
O **Laboratório de Blocos** é um ambiente de experimentação onde estudantes e educadores podem criar programas com blocos visuais sem limitações de fases. Ele foi pensado para apoiar aprendizagem exploratória, permitir testes rápidos de ideias e facilitar a transição progressiva da programação visual para a textual.
## Objetivo do laboratório
No laboratório, o foco está em:
- **Experimentação livre**: criar programas sem restrições de níveis ou desafios pré-definidos.
- **Aprendizagem exploratória**: testar hipóteses, observar resultados e refinar soluções.
- **Visualização de código**: entender como blocos se transformam em código textual.
- **Transição progressiva**: preparar estudantes para linguagens baseadas em texto.
## JavaScript e Python: entenda a diferença
No laboratório, você vê duas versões do mesmo programa:
**JavaScript** <i class="lucide lucide-play-circle"></i> (código real)
- É o código que **realmente executa** no navegador.
- Ao clicar em "Executar", é este código que roda.
- Os resultados aparecem no console da página.
**Python** <i class="lucide lucide-eye"></i> (código ilustrativo)
- É uma **tradução visual** dos mesmos blocos.
- Serve para familiarizar estudantes com sintaxe Python.
- **Não é executado** nesta interface.
:::info Por que apenas JavaScript executa?
O navegador web entende JavaScript nativamente. Python requer um ambiente específico de execução que não está disponível diretamente nesta interface de laboratório. Por isso, aqui o Python é usado como recurso pedagógico de visualização.
:::
## Como funciona
### Interface em 3 painéis
<img
src={require("../../../assets/tela-inteira-laboratorio.png").default}
alt="Tela completa do laboratório Decoda"
style={{ display: "block", margin: "0 auto", width: "80%", maxWidth: "100%", height: "auto" }}
/>
1. **Editor de blocos** (esquerda)
- Arraste blocos da caixa de ferramentas.
- Monte seu programa como um quebra-cabeça.
- Organize e conecte os blocos logicamente.
<img
src={require("../../../assets/editor-bloco-laboratorio.png").default}
alt="Editor de blocos na tela do laboratório"
style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>
2. **Visualizador de código** (centro/direita superior)
- Veja o código JavaScript e Python gerado.
- Alterne entre as duas linguagens.
- Acompanhe como blocos viram texto.
<img
src={require("../../../assets/visualizador-codigo-laboratorio.png").default}
alt="Visualizador de código no laboratório"
style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>
3. **Console de saída** (centro/direita inferior)
- Execute seu programa.
- Veja resultados e mensagens.
- Identifique erros e faça debug.
<img
src={require("../../../assets/console-laboratorio.png").default}
alt="Visualizador de console no laboratório"
style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>
## Fluxo de uso
```mermaid
flowchart TD
A[Abrir laboratório] --> B[Montar programa com blocos]
B --> C[Visualizar código gerado]
C --> D[Executar]
D --> E[Analisar resultado no console]
E --> F[Refinar a solução]
F --> B
```
## Categorias de blocos disponíveis
- <i class="lucide lucide-zap"></i> **Lógica**: condicionais, comparações, operadores booleanos.
- <i class="lucide lucide-repeat"></i> **Laços**: repetições (`for`, `while`, `forEach`).
- <i class="lucide lucide-calculator"></i> **Matemática**: operações e funções matemáticas.
- <i class="lucide lucide-type"></i> **Texto**: manipulação de strings e concatenação.
- <i class="lucide lucide-list"></i> **Listas**: arrays e manipulação de coleções.
- <i class="lucide lucide-palette"></i> **Cores**: operações com cores RGB e HSV.
- <i class="lucide lucide-variable"></i> **Variáveis**: criação e atualização de variáveis.
- <i class="lucide lucide-function-square"></i> **Funções**: definição de funções customizadas.
## Primeiros passos
1. Acesse o Laboratório no menu da plataforma.
2. Explore a caixa de ferramentas.
3. Arraste um bloco de saída para a área de trabalho.
4. Digite uma mensagem.
5. Clique em "Executar" e observe o console.
:::tip Dica para iniciantes
Comece com programas simples: mensagens, cálculos básicos e variáveis. Em seguida, avance para condicionais e laços.
:::
## Para o educador: como integrar nas aulas
O laboratório pode ser usado em diferentes momentos:
### 1. Demonstrações ao vivo
- Projete a tela e monte programas com a turma.
- Convide estudantes a sugerirem blocos e lógica.
- Mostre em tempo real como o código se comporta.
### 2. Atividades guiadas
- Proponha desafios com objetivo claro.
- Circule pela sala apoiando individualmente.
- Permita soluções diferentes para o mesmo problema.
### 3. Exercícios livres
- Defina um objetivo geral (por exemplo, "criar uma calculadora").
- Incentive exploração e experimentação.
- Valorize criatividade e justificativa das escolhas.
### 4. Compartilhamento de soluções
- Peça apresentações curtas dos programas.
- Compare abordagens distintas para o mesmo desafio.
- Estimule aprendizagem entre pares.
## Ideias de atividades
### Nível iniciante
#### Apresentação pessoal
**Objetivo**: usar blocos de texto e variáveis.
- Armazene nome e idade em variáveis.
- Exiba uma mensagem de apresentação completa.
**Conceitos**: variáveis, concatenação, saída de dados.
#### Calculadora básica
**Objetivo**: operações matemáticas e variáveis.
- Armazene dois números.
- Calcule soma, subtração, multiplicação e divisão.
- Mostre todos os resultados.
**Conceitos**: operadores, variáveis numéricas, múltiplas saídas.
#### Conversor de temperatura
**Objetivo**: aplicação de fórmula matemática.
- Leia temperatura em Celsius.
- Aplique $F = (C \times 9/5) + 32$.
- Exiba o resultado.
**Conceitos**: variáveis, operações e fórmulas.
### Nível intermediário
#### Tabuada automática
**Objetivo**: laços de repetição.
- Escolha um número.
- Multiplique de 1 a 10 com um laço.
- Imprima cada linha da tabuada.
**Conceitos**: `for`, variáveis e sequência de operações.
#### Lista de compras
**Objetivo**: manipulação de listas.
- Crie lista com 5 itens.
- Adicione um item.
- Remova um item.
- Exiba a lista final.
**Conceitos**: arrays e operações em coleção.
#### Verificador de números
**Objetivo**: condicionais.
- Receba um número.
- Verifique se é par/ímpar.
- Verifique se é positivo/negativo/zero.
- Exiba as classificações.
**Conceitos**: `if/else`, comparação e módulo.
### Nível avançado
#### Sistema de pontuação
**Objetivo**: funções e lógica composta.
- Crie função para calcular nota final.
- Receba notas de prova e trabalho.
- Aplique pesos.
- Informe aprovação com média $\geq 7$.
**Conceitos**: funções, parâmetros, retorno, condicionais aninhadas.
#### Ordenador de números
**Objetivo**: listas e algoritmo.
- Crie lista desordenada.
- Implemente ordenação simples.
- Exiba lista ordenada.
**Conceitos**: laços aninhados, comparações e algoritmo.
#### Contador de palavras
**Objetivo**: manipulação de strings.
- Receba uma frase.
- Conte palavras.
- Identifique a palavra mais longa.
- Mostre estatísticas.
**Conceitos**: texto, iteração e condicionais.
## Dicas para criar seus próprios desafios
### Estrutura de um bom desafio
1. Objetivo claro: o que o programa deve fazer.
2. Conceitos-chave: quais habilidades serão praticadas.
3. Entradas e saídas: o que entra e o que deve sair.
4. Dica inicial: por onde começar.
5. Extensão opcional: como aprofundar.
### Progressão pedagógica
- Comece com **um conceito por vez**.
- Depois **combine conceitos**.
- Permita **múltiplas soluções válidas**.
- Incentive **melhorias iterativas**.
## Recursos pedagógicos do laboratório
### Visualização dupla (JavaScript e Python)
Use a comparação entre linguagens para discutir:
- lógica comum e sintaxe diferente;
- semelhanças estruturais;
- pensamento computacional independente da linguagem.
**Sugestão de atividade: "Caça às diferenças"**
1. Monte um programa simples em blocos.
2. Compare JavaScript e Python gerados.
3. Identifique o que muda e o que permanece.
### Tour guiado inicial
O laboratório inclui tour interativo para apresentar interface, blocos, execução e console. Uma estratégia eficiente é primeiro um tour individual, seguido de revisão coletiva.
### Exemplos prontos
Os exemplos podem ser usados para inspiração, leitura de código, modificação incremental e análise reversa do raciocínio.
### Persistência local
Os programas são salvos localmente, permitindo continuidade entre aulas e comparação de versões.
## Problemas comuns e como mediar
### "Meu código não faz nada"
- Verifique se clicou em executar.
- Confira se há bloco de saída.
- Leia o console com o estudante.
### "Os blocos não encaixam"
- Confira compatibilidade de tipos e encaixes.
- Use cor e formato dos blocos como pistas.
### "Deu erro no console"
- Leia a mensagem de erro em conjunto.
- Identifique a parte correspondente nos blocos.
- Faça ajuste incremental.
### "Não sei por onde começar"
- Comece com um exemplo simples.
- Divida o problema em partes menores.
- Modifique aos poucos uma base conhecida.
:::tip Celebre erros
Erros são evidências de tentativa e parte do processo de aprendizagem. Valorize investigação, revisão e melhoria contínua.
:::
## Avaliação de aprendizagem
**Evite avaliar**:
- complexidade aparente do programa;
- quantidade de blocos;
- ausência total de erros.
**Avalie**:
- se a lógica resolve o problema proposto;
- se o estudante explica o próprio raciocínio;
- se compreende os conceitos praticados;
- se identifica e corrige erros com apoio crescente de autonomia;
- se demonstra evolução ao longo do tempo.
:::info Foco no processo
No laboratório, o principal indicador é evolução de raciocínio computacional, não perfeição de código.
:::

View File

@@ -0,0 +1,31 @@
---
title: "Laboratórios"
---
# Laboratórios
Os laboratórios do Decoda são ambientes de experimentação voltados para prática, investigação e autoria. Diferentemente das atividades com fases, eles permitem que estudantes e educadores testem ideias em fluxo livre, façam ajustes rápidos e comparem estratégias sem depender de uma trilha fixa.
## Para que servem os laboratórios
De forma geral, os laboratórios ajudam a:
- ampliar repertório técnico por meio de experimentação guiada;
- conectar conceitos de programação com prática imediata;
- incentivar autonomia e revisão iterativa de soluções;
- apoiar transição entre programação visual e textual.
## Laboratórios disponíveis
- [Blocos](./blocos): ambiente de programação visual com geração de código e console de execução.
- [Python](./python): trilha baseada em notebooks para prática de programação textual em Python.
## Como escolher entre Blocos e Python
Use **Blocos** quando o foco estiver em lógica, estrutura de controle e construção de solução com menor carga de sintaxe. É especialmente útil para introdução e mediação coletiva.
Use **Python** quando a turma já estiver pronta para escrever código textual, explorar sintaxe da linguagem e resolver problemas em um ambiente de notebook.
## Sugestão de uso pedagógico
Uma combinação comum é iniciar no laboratório de blocos para consolidar raciocínio algorítmico e, em seguida, avançar para Python para praticar leitura e escrita de código textual mantendo os mesmos conceitos-base.

View File

@@ -0,0 +1,60 @@
---
sidebar_position: 2
title: "Python"
---
# Laboratório de Python
O **Laboratório de Python** é um ambiente interativo baseado em [JupyterLite](https://jupyterlite.readthedocs.io/) — uma versão do Jupyter que roda inteiramente no navegador, sem necessidade de instalação, servidor externo ou configuração pelo estudante.
A instância do Decoda está integrada à plataforma e pode ser acessada diretamente pelo menu. Ela oferece tudo que é necessário para um ensino livre de Python: execução de código real, visualização de resultados, suporte a bibliotecas e um ambiente de notebooks familiar ao ecossistema científico e educacional de Python.
## O que é o Jupyter
O Jupyter é um ambiente de notebooks interativos amplamente adotado no ensino de programação, ciência de dados e computação científica. Um notebook combina texto explicativo, código executável e resultados em um único documento — o que o torna especialmente adequado para aprendizagem progressiva e iterativa.
No Laboratório de Python do Decoda, usamos o **JupyterLite**: uma versão que executa Python diretamente no navegador via WebAssembly, sem precisar de Python instalado no computador do estudante.
```mermaid
flowchart TD
A[Estudante acessa o Laboratório de Python] --> B[Navegador carrega o JupyterLite]
B --> C[Python roda localmente via WebAssembly]
C --> D[Estudante escreve e executa código em células]
D --> E[Resultado aparece imediatamente abaixo da célula]
```
## Uso livre
Além do curso incluído, a instância oferece um ambiente de notebook completamente livre. O estudante pode:
- criar novos notebooks do zero;
- escrever qualquer código Python válido;
- usar bibliotecas disponíveis no ambiente (como `math`, `random`, `json` e outras compatíveis com Pyodide);
- salvar e retomar o trabalho localmente no navegador.
Isso permite que o laboratório seja usado tanto como recurso guiado quanto como espaço de experimentação e projetos autorais.
## Curso de Python incluído
A instância já vem com três notebooks prontos para uso em aula:
| Aula | Título | O que cobre |
| --- | --- | --- |
| 1 | Noções Básicas de Python | O que é Python, por que aprender, variáveis, tipos de dados e primeiros comandos. |
| 2 | Estruturas Lógicas | Condicionais `if/elif/else`, operadores de comparação e tomada de decisão. |
| 3 | Estruturas de Repetição e Boas Práticas | Laços `for` e `while`, boas práticas de código e organização de programas. |
Os notebooks são sequenciais e progressivos, mas podem ser usados de forma independente conforme o ritmo da turma.
## Quando usar o Laboratório de Python
Use este laboratório quando a turma já estiver pronta para escrever código textual e se beneficiar da execução célula a célula. Ele é especialmente adequado para:
- continuidade após o Laboratório de Blocos, aprofundando os mesmos conceitos em Python real;
- aulas em que o educador quer combinar explicação, código e resultado no mesmo documento;
- projetos livres em que o estudante escreve, testa e documenta sua própria solução;
- introdução ao ecossistema de ferramentas amplamente usadas em ciência de dados e computação.
:::tip Dica para o educador
Os notebooks do curso podem ser abertos, lidos e executados célula por célula junto com a turma. Uma estratégia eficaz é executar o código coletivamente, modificar um valor e observar o que muda — isso torna o ciclo de teste-e-aprendizado visível para todos.
:::