ruimoraes
3da7d323e8
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>
9.0 KiB
9.0 KiB
sidebar_position, title
| sidebar_position | title |
|---|---|
| 4 | Programação com Blocos |
Compreenda os princípios pedagógicos por trás da programação visual com blocos.
Base Pedagógica
O Decoda utiliza princípios educacionais modernos:
- Aprendizagem colaborativa: Estudantes aprendem juntos
- Diálogo: Discussão coletiva de estratégias
- Reflexão: "Por que funciona assim?"
- Prática: Aprender fazendo
Pensamento Computacional
A programação visual desenvolve os 4 pilares do pensamento computacional:
1. Decomposição
Dividir problemas complexos em partes menores
Exemplo no Semáforo:
- Problemática: "Como melhorar mobilidade urbana?"
- Investigação:
- Acender luz verde (fluxo de carros)
- Aguardar tempo (tempo social)
- Acender luz amarela (transição)
- Considerar pedestres (inclusão social)
2. Reconhecimento Crítico de Padrões
Identificar estruturas que se repetem na sociedade
Exemplo no Aspirador:
- Padrão que se repete: "avançar no grid → ver o que há na célula (sujeira, obstáculo, espaço livre) → decidir o próximo movimento" — até limpar a sala ou cumprir o desafio da fase.
- Reflexão: Onde no cotidiano repetimos "perceber o contexto → decidir → agir" (trabalho, deslocamento, tarefas em casa)?
- Codificação: Loops e condicionais nos blocos reproduzem esse ciclo nos dois jogos da plataforma.
3. Abstração Contextualizada
Focar no essencial sem perder a dimensão social
Exemplo no Tartaruga:
- Abstração: "Desenhar polígono"
- Elementos essenciais: lados, ângulos, tamanho
- Questão crítica: "Que formas geométricas vemos na nossa cidade?"
- Função:
desenharPoligono(lados, tamanho)
4. Algoritmos para Transformação
Criar instruções que promovam mudança social
Exemplo geral:
1. PROBLEMATIZAR situação real
2. SE há injustiça ou exclusão
ENTÃO buscar solução coletiva
SENÃO manter status quo
3. REPETIR até transformação alcançada
4. AVALIAR impacto social
Teoria das Inteligências Múltiplas Aplicada
A programação visual atende diferentes formas de aprendizagem respeitando a diversidade:
Visual-Espacial
- Blocos coloridos por categoria funcional
- Formas geométricas com significado pedagógico
- Fluxo visual do raciocínio lógico
Lógico-Matemática
- Sequências lógicas de comandos contextualizados
- Padrões numéricos aplicados a problemas reais
- Resolução sistemática de questões sociais
Corporal-Cinestésica
- Arrastar e soltar blocos fisicamente
- Manipulação tátil da interface
- Movimento visual dos elementos do jogo
Linguística
- Blocos em português acessível
- Narrativas conectadas à realidade
- Explicação verbal das estratégias
Aprendizagem Significativa Contextualizada
O Decoda conecta conhecimento prévio com novos conceitos de forma culturalmente relevante:
Ancoragem Cultural
| Experiência Prévia | Conceito Novo | Jogo | Dimensão Social |
|---|---|---|---|
| Organizar objetos e lembrar “onde fica cada coisa” | Variáveis, atribuição | Quebra-cabeças | Organização do cotidiano |
| Rotinas de limpeza e aspiradores robô no dia a dia | Loops, sequências | Aspirador | Cuidado com o espaço vivido |
| Aparelhos e sistemas que mudam de comportamento conforme o contexto | Estados, lógica | Autômato | Automação e mundo do trabalho |
| Semáforos da rua e regras de espera / passagem | Sequências, condições | Semáforo | Mobilidade urbana |
| Desenho manual, plantas baixas e formas no caderno | Geometria, arte | Tartaruga | Arte como expressão |
| Jogos em grade, sorteios e adivinhar posições com poucas pistas | Matriz, aleatoriedade | Toupeira | Decidir sob incerteza |
| Senhas, bilhetes secretos e mensagens só para quem sabe o código | Criptografia, repetição | Cripto | Privacidade e segurança digital |
Zona de Desenvolvimento Próximo (Vygotsky + Freire)
- Nível Atual: O que o estudante já conhece do mundo
- Mediação Social: Diálogo com pares e educador
- Objetivo: Nova consciência a ser desenvolvida
- Autonomia: Estudante transforma sua realidade
Psicologia dos Blocos Visuais
Design Pedagógico Consciente
Cores dos Blocos
| Cor | Amostra visual | Significado pedagógico |
|---|---|---|
| Azul | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#3b82f6", borderRadius: "50%", border: "1px solid #1e3a8a"}}> | Movimentos e ações |
| Verde | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#22c55e", borderRadius: "50%", border: "1px solid #166534"}}> | Lógica e decisões |
| Amarelo | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#facc15", borderRadius: "50%", border: "1px solid #a16207"}}> | Eventos e gatilhos |
| Vermelho | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#ef4444", borderRadius: "50%", border: "1px solid #991b1b"}}> | Controles e limites |
| Roxo | <span style={{display: "inline-block", width: "14px", height: "14px", background: "#a855f7", borderRadius: "50%", border: "1px solid #6b21a8"}}> | Variáveis e dados |
Formas com Significado Funcional
- Círculos: Início/fim de processos
- Retângulos: Ações concretas
- Losangos: Pontos de decisão
- Hexágonos: Entradas e sensores
Carga Cognitiva Consciente
Os blocos reduzem sobrecarga mental para focar na reflexão crítica:
Liberação Cognitiva
- Menos memória: Energia mental para problematizar
- Foco social: Concentração em questões relevantes
- Feedback rápido: Validação imediata das hipóteses
- Motivação: Resultados visuais engajam na aprendizagem
Taxonomia de Freire Aplicada
Progressão pedagógica baseada na Pedagogia do Oprimido:
Níveis de Conscientização
-
Consciência Ingênua (Fase 1)
- Usa blocos sem questionar
- Segue instruções mecanicamente
-
Consciência Crítica (Fase 2-3)
- Questiona "por que funciona assim?"
- Compara diferentes estratégias
-
Consciência Mágica (Evitar)
- Acredita que tecnologia resolve tudo
- Não vê limitações sociais
-
Consciência Revolucionária (Fase 4-5)
- Vê programação como ferramenta de transformação
- Cria soluções para problemas comunitários
Avaliação Libertadora
Monitoramento que promove conscientização:
Indicadores de Transformação
- Tempo de reflexão: Qualidade do pensamento crítico
- Diálogo: Participação nas discussões coletivas
- Problematização: Capacidade de questionar
- Solidariedade: Colaboração e apoio mútuo
Feedback Dialógico
- Valorização: Reconhecimento do conhecimento prévio
- Problematização: Perguntas que geram reflexão
- Desafio: Estímulo para superação coletiva
- Praxis: Ciclo ação-reflexão-nova ação
Próximo: Explore Os Quatro Fundamentos — condicionais, loops, funções e procedural — para aprofundar a programação visual a partir desta base pedagógica!