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>
2025-10-29 21:30:14 -03:00
parent e24ee22b5a
commit 3da7d323e8
577 changed files with 121994 additions and 158 deletions
--- a/docs/edu/recursos/playground/blocos.md
+++ b/docs/edu/recursos/playground/blocos.md
@@ -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.
+:::