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

107
docs/edu/intro.md Normal file
View File

@@ -0,0 +1,107 @@
---
sidebar_position: 1
title: "Guia do Educador"
---
Bem-vindo ao **Decoda**, uma plataforma educacional de programação visual desenvolvida especialmente para o ensino de lógica de programação!
## **O que é o Decoda?**
O **Decoda** é uma plataforma educacional que integra atividades práticas para o ensino de **programação** e **letramento digital** de forma acessível e progressiva. Combina exercícios com *Blockly* - programação visual baseada em blocos - com cursos em *Python* usando *JupyterLite*, além de módulos de *Letramento Digital* que familiarizam estudantes com o uso seguro e eficiente do computador. O objetivo é reduzir a barreira da sintaxe e priorizar o desenvolvimento do **raciocínio lógico** e do **pensamento computacional**.
Nas atividades com *Blockly*, os alunos constroem algoritmos arrastando e encaixando blocos, explorando conceitos como sequências, condições, loops e variáveis por meio de desafios e jogos interativos que oferecem feedback imediato. Essa abordagem incentiva experimentação, depuração guiada e criatividade, tornando abstratos conceitos de programação em tarefas concretas e motivadoras.
O suporte a *Python* via *JupyterLite* permite uma transição suave do visual para o textual, com exercícios práticos executáveis direto no navegador, sem instalação. Paralelamente, os módulos de Letramento Digital desenvolvem competências básicas de uso do computador, navegação e cidadania digital, preparando os alunos para aplicar habilidades de programação em contextos reais e escolares.
## **Para Educadores**
Esta documentação é destinada a **qualquer pessoa que deseje ensinar programação**, não apenas professores formais. Seja você um profissional de tecnologia sem experiência em sala de aula, seja um educador de outras áreas sem familiaridade com programação, o **Decoda** oferece suporte prático para transformar conhecimento em atividade pedagógica.
Se você é um **profissional de tecnologia** que nunca deu aulas, o **Decoda** auxilia com orientações pedagógicas, sequências de atividades, planos de aula e recursos práticos (exercícios em *Blockly*, transição para *Python* via *JupyterLite*, avaliações e dicas de mediação) para que o ensino seja estruturado e eficaz desde o primeiro encontro com os alunos.
Se você é um **educador sem conhecimento em programação**, a documentação apresenta de forma clara os conceitos essenciais da lógica de programação, exemplos passo a passo e módulos de Letramento Digital que cobrem o uso seguro e eficiente do computador, permitindo uma transição gradual do visual para o textual e oferecendo apoio nos primeiros passos da implementação em sala.
## **Recursos de ensino do Decoda**
O **Decoda** organiza o ensino em dois grandes recursos: **Atividades** e **Laboratórios**. Essa divisão permite adaptar o uso da plataforma ao perfil da turma, ao tempo disponível e aos objetivos de aprendizagem de cada aula.
As **Atividades** foram pensadas para estudantes e podem ser aplicadas com mediação do educador ou com maior autonomia, conforme o contexto. Em muitos casos, parte da intencionalidade pedagógica não aparece de forma explícita na interface, justamente para que o educador conduza discussões, proponha perguntas e explore os conceitos de programação de forma contextualizada. A trilha de **Letramento Digital** também faz parte desse recurso e tem como objetivo reduzir o medo da máquina, desenvolver confiança e ensinar interações básicas, como uso de mouse, teclado e navegação.
Os **Laboratórios** são ambientes mais abertos e elaborados. No laboratório de **Blocos**, educadores com mais experiência podem propor desafios além dos exemplos prontos, trabalhando algoritmos de forma criativa e progressiva. No laboratório de **Python**, a proposta é apoiar a transição de blocos para código textual por meio do curso em **JupyterLite**, mantendo a prática em um ambiente acessível no navegador.
## **Benefícios Pedagógicos**
O uso do **Decoda** em sala vai além do aprendizado técnico de programação. A plataforma foi desenvolvida para estimular habilidades cognitivas e sociais que são fundamentais nos dias atuais, independentemente de o estudante seguir ou não uma carreira em tecnologia. Ao resolver problemas com blocos, depurar erros, adaptar estratégias e colaborar com colegas, os estudantes desenvolvem uma forma de pensar mais estruturada, criativa e crítica.
### **Desenvolvimento Cognitivo**
A programação visual com blocos exige que o estudante decomponha problemas complexos em etapas menores, identifique padrões e construa abstrações — habilidades centrais do **pensamento computacional**. O ciclo de tentar, errar e ajustar desenvolve a **resolução de problemas** de forma sistemática. E a liberdade de criar diferentes soluções para o mesmo desafio estimula a **criatividade** como parte natural do processo.
- **Pensamento Computacional**: Decomposição, padrões, abstração
- **Resolução de Problemas**: Estratégias sistemáticas e iterativas
- **Criatividade**: Expressão através da programação
### **Habilidades Desenvolvidas**
Nas aulas com o **Decoda**, os estudantes frequentemente trabalham em duplas ou grupos, o que transforma o aprendizado em uma experiência coletiva. Explicar o raciocínio para um colega, comparar soluções diferentes e argumentar sobre escolhas pedagógicas desenvolve **comunicação** e **colaboração** de forma orgânica. A análise de soluções próprias e alheias — "o que funcionou, o que poderia ser melhor?" — exercita o **pensamento crítico** aplicado a situações concretas.
- **Colaboração**: Trabalho em equipe e peer programming
- **Comunicação**: Explicação de algoritmos e soluções
- **Pensamento Crítico**: Análise e otimização de soluções
## **Por onde começar?**
Ao começar, escolha o seu perfil para seguir a trilha mais adequada: se você **já tem conhecimento de programação**, a sequência foca em como usar a plataforma e aplicar atividades; se você **é educador sem experiência em programação**, a trilha inclui antes os fundamentos teóricos e práticos para apoiá-lo nas aulas. Cada etapa oferece guias, exemplos e recursos práticos para aplicar em sala ou em oficinas.
```mermaid
flowchart TD
A[Início] --> B[Conhecer a Plataforma]
B --> C{Você já conhece programação?}
C -->|Sim| D[Conhecer os Guias Pedagógicos]
C -->|Não| E[Conhecer Fundamentos de Programação]
E --> D
D --> F[Conhecer Computação Desplugada]
F --> G[Testar atividades]
G --> H[Planejar suas aulas]
H --> I[Aplicar em sala de aula]
I --> J[Fim]
click B "./como-usar" "Abrir: Como Usar o Decoda"
click D "./guias-pedagogicos/preparando-aula" "Abrir: Guias Pedagógicos"
click E "./fundamentos-programacao/intro" "Abrir: Fundamentos de Programação"
click F "./fundamentos-programacao/computacao-desplugada" "Abrir: Computação Desplugada"
click G "./recursos/atividades/programacao" "Abrir: Atividades de Programação"
click H "./guias-pedagogicos/preparando-aula" "Abrir: Planejando e Conduzindo a Aula"
click I "./guias-pedagogicos/avaliacao-aprendizado" "Abrir: Acompanhamento e Situações Comuns"
```
### **1. Primeiros Passos**
- [**Como Usar a Plataforma**](./como-usar) - Interface básica e navegação
- [**Fundamentos da Programação Visual**](./fundamentos-programacao/intro) - Base teórica
- [**Computação Desplugada**](./fundamentos-programacao/computacao-desplugada) - Metodologia prática sem computador
### **2. Guias Práticos**
- [**Preparando a Aula**](./guias-pedagogicos/preparando-aula) - Planejamento e checklist
- [**Avaliação e Acompanhamento**](./guias-pedagogicos/avaliacao-aprendizado) - Como medir progresso
### **3. Conhecendo os Recursos do Decoda**
- [**Atividades de Programação**](./recursos/atividades/programacao) - Organização da trilha de programação
- [**Atividades de Letramento**](./recursos/atividades/letramento) - Organização da trilha de letramento digital
- [**Laboratório de Blocos**](./recursos/playground/blocos) - Uso do ambiente visual atual
- [**Laboratório de Python**](./recursos/playground/python) - Curso disponível em JupyterLite
## **Suporte e Comunidade**
- <i class="fas fa-envelope"></i> **Suporte Técnico**: [contato@tecnologiaparatodos.org.br](mailto:contato@tecnologiaparatodos.org.br)
- <i class="fas fa-comments"></i> **Comunidade Educativa**: Fórum de troca de experiências
- <i class="fas fa-download"></i> **Recursos Extras**: Materiais complementares para download
---
**Pronto para transformar suas aulas de programação?** Comece explorando nosso guia [**Como Usar a Plataforma**](./como-usar)! <i class="fas fa-rocket"></i><i class="fas fa-sparkles"></i>