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>
4.6 KiB
title, sidebar_position
| title | sidebar_position |
|---|---|
| Quebra-cabeças | 2 |
Quebra-cabeças
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.
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.
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)