Registro técnico e pedagógico da Etapa 1 de construção de uma plataforma web de jogos educativos para a escola pública — do conceito à interface funcional.
Por que construir uma plataforma em vez de usar o que já existe?
Esta é a pergunta que qualquer professor racional faz antes de começar um projeto de desenvolvimento. Há jogos educativos prontos, plataformas internacionais consolidadas, aplicativos com design sofisticado e anos de investimento por trás. Por que, então, construir do zero?
A resposta não é ideológica. É estrutural. As plataformas existentes foram projetadas para mercados, não para escolas públicas brasileiras com acesso instável à internet, sem infraestrutura garantida de dispositivos individuais e com currículos que precisam dialogar com a BNCC e as competências trabalhadas em sala.
Construir uma plataforma própria é construir soberania pedagógica. Cada decisão de design, cada mecânica, cada objetivo de aprendizagem reflete o diagnóstico real da turma — não a hipótese de um mercado editorial.
Este registro documenta a primeira etapa concreta: a vitrine de jogos. O ponto de entrada do aluno na plataforma. A interface que comunica, antes de qualquer instrução verbal, qual é a proposta pedagógica do projeto.
O que é a Plataforma Educativa Games?
Uma plataforma web de jogos educativos desenvolvida internamente, com foco em pensamento computacional, raciocínio lógico e competências cognitivas fundamentais para estudantes do Ensino Fundamental e Médio da escola pública.
A plataforma não é um portal de entretenimento com camada educativa superficial. Cada jogo é projetado a partir de um objetivo pedagógico específico, alinhado às competências da BNCC, e acompanhado de estrutura de acompanhamento de progresso.
Escolha um jogo para começar sua jornada de aprendizagem.
Organize os passos corretos de uma atividade do cotidiano.
Objetivo pedagógico: Desenvolver noção de ordem, sequência e organização de processos.
Tome decisões corretas com base em situações e regras do dia a dia.
Objetivo pedagógico: Trabalhar tomada de decisão, interpretação e pensamento condicional.
Associe imagens e conceitos para fortalecer a aprendizagem.
Objetivo pedagógico: Estimular memória visual, associação e concentração.
O que foi construído nesta etapa?
A Etapa 1 entrega o componente de apresentação da plataforma: a vitrine de jogos. Do ponto de vista técnico, trata-se de uma estrutura HTML/CSS com layout responsivo em grid, sistema de cards e hierarquia visual clara. Do ponto de vista pedagógico, trata-se de uma decisão de arquitetura de informação.
| Componente | Descrição | Status |
|---|---|---|
| Header / CTA Principal | Botão “Explorar jogos” como ponto de entrada único e destacado | Concluído |
| Vitrine de Jogos | Seção “Jogos em destaque” com título e subtítulo orientador | Concluído |
| Cards de Jogo | Cards individuais com título, descrição, objetivo pedagógico, tag de categoria e botão de ação | Concluído |
| Estado “Em breve” | Card com jogo ainda não disponível com botão desabilitado visualmente | Concluído |
| Jogo: Sequência | Organização de passos lógicos de uma atividade cotidiana | Concluído |
| Jogo: Condicional | Tomada de decisão com base em regras condicionais | Concluído |
| Jogo: Memória | Associação de imagens e conceitos | Em desenvolvimento |
| Menu de Navegação | Estrutura de navegação entre seções da plataforma | Próxima etapa |
| Sistema de Progresso | Salvamento de progresso do aluno via localStorage | Próxima etapa |
| Dashboard do Aluno | Painel com histórico de partidas e desempenho | Etapa futura |
Decisões de design com intenção pedagógica
Nenhuma decisão de interface nesta plataforma é meramente estética. Cada escolha visual traduz uma hipótese sobre como o estudante irá interagir com o conteúdo.
Por que o card exibe o objetivo pedagógico?
A maioria das plataformas de jogos esconde os objetivos de aprendizagem. A lógica comercial favorece o engajamento imediato via curiosidade. A lógica pedagógica, no entanto, é diferente: quando o aluno sabe o que está desenvolvendo, ele atribui significado à atividade. Isso é metacognição aplicada ao design de interface.
A linha “Objetivo pedagógico” no card não é um detalhe técnico para o professor. É uma declaração para o estudante: este jogo tem propósito, e você conhece esse propósito antes de começar.
Por que o botão “Em breve” existe como estado visível?
Mostrar o que ainda não está disponível cria expectativa estruturada. O aluno percebe que a plataforma está em crescimento, que há mais por vir, e que o jogo de Memória é um destino, não uma ausência. É uma decisão de arquitetura de produto, não apenas de UI.
O estado “Em breve” foi implementado com estilo visual diferenciado no botão — cor neutra, sem interação — mas mantém o card completo com título, descrição e objetivo pedagógico visíveis. O conteúdo existe; a mecânica ainda não.
Por que as tags de categoria (Lógica, Raciocínio, Memorização)?
As tags funcionam como um sistema de taxonomia navegável. Na versão atual, são visuais. Nas próximas etapas, serão filtrável. O aluno poderá selecionar jogos por tipo de raciocínio que deseja exercitar — ou o professor poderá indicar jogos por competência a ser trabalhada na semana.
Arquitetura técnica da Etapa 1
- 1HTML semântico como base Estrutura com tags semânticas para garantir acessibilidade e SEO desde o início do projeto. Cada card é um elemento de lista dentro de uma seção nomeada.
- 2CSS Grid para o layout de cards Layout responsivo em grid com três colunas em tela larga, adaptando para coluna única em dispositivos móveis. Sem dependência de frameworks externos.
- 3Sistema de cores com paleta definida Laranja (#E86B1A) como cor de ação e destaque, fundo creme (#FFF8F0) para reduzir fadiga visual, cards em branco com sombra sutil para hierarquia.
- 4Componentização via classes CSS Cards construídos como componentes reutilizáveis via classes. Adicionar um novo jogo exige apenas duplicar o bloco HTML e alterar o conteúdo — sem reescrever CSS.
- 5Arquivo único, sem dependências A plataforma nesta etapa roda com um único arquivo HTML. Zero dependências externas. Funciona offline, em qualquer navegador, sem configuração de servidor.
Estrutura de dados do card de jogo
O card de jogo segue uma estrutura de informação consistente. Abaixo, o padrão utilizado para cada novo jogo adicionado à plataforma:
<!-- Card de Jogo — Estrutura Padrão -->
<div class="game-card">
<div class="game-card__header">
<h3 class="game-card__title">[Nome do Jogo]</h3>
</div>
<div class="game-card__body">
<p class="game-card__desc">
[Descrição curta da mecânica]
</p>
<p class="game-card__goal">
<strong>Objetivo pedagógico:</strong>
[Competência desenvolvida]
</p>
</div>
<div class="game-card__footer">
<span class="game-card__tag">[Categoria]</span>
<button class="btn btn--play"
data-game="[id-do-jogo]">
Jogar
</button>
</div>
</div>O que esta etapa ancora para as próximas
A vitrine não é apenas a primeira tela. É a fundação de toda a arquitetura que vem a seguir. Cada próxima etapa parte das decisões tomadas aqui:
- O sistema de cards define como o menu principal irá organizar e categorizar os jogos por nível, disciplina ou tipo de raciocínio.
- A estrutura
data-gamenos botões de ação prepara o terreno para o sistema de roteamento entre jogos sem recarregar a página. - As tags de categoria serão o eixo do sistema de filtragem e recomendação quando o dashboard do aluno for implementado.
- O estado “Em breve” formaliza o conceito de roadmap visível: aluno e professor acompanham a evolução da plataforma juntos.
- A paleta e o sistema de componentes CSS criados nesta etapa serão o design system de toda a plataforma nas versões seguintes.
Expansões estratégicas: para onde este projeto pode ir
Painel com visão de turma: quais alunos jogaram, quais jogos, tempo médio, taxa de acerto. Dados para tomada de decisão pedagógica sem necessidade de avaliação formal.
Expansão do catálogo com jogos específicos de Matemática, Língua Portuguesa e Ciências — com objetivos de aprendizagem mapeados diretamente às habilidades da BNCC.
Sessão compartilhada onde o professor projeta o jogo para a turma, todos respondem no dispositivo próprio e os resultados aparecem em tempo real no painel.
A plataforma, ao ser documentada publicamente desde o início, se torna um recurso educacional aberto que outras escolas podem adotar, adaptar e expandir com seus próprios jogos.
Perguntas frequentes sobre este projeto
Porque o processo tem mais valor pedagógico do que o produto final. Mostrar cada etapa — incluindo as limitações, decisões e próximos passos — transforma o desenvolvimento em aula pública de pensamento computacional aplicado. Alunos, professores e gestores acompanham e aprendem junto.
Estudantes do Ensino Fundamental II e Ensino Médio, com jogos diferenciados por faixa etária e nível de complexidade. O design visual foi pensado para ser acessível a partir dos 10 anos, com linguagem clara e interface intuitiva mesmo para alunos com pouca experiência digital.
Sim. O layout foi desenvolvido com abordagem mobile-first. Dado que a maioria dos alunos da escola pública acessa a internet pelo smartphone, a experiência em tela pequena é a prioridade de design, não uma adaptação posterior.
Na versão atual, não. A estrutura em arquivo único HTML roda completamente offline. A persistência de dados via localStorage nas próximas etapas também não exige conexão. A dependência de internet só entrará com a autenticação e o banco de dados — etapas planejadas para a fase final do desenvolvimento.
Essa é uma das expansões estratégicas planejadas. O modelo de card padronizado facilita a contribuição: qualquer professor com noção básica de HTML pode inserir um novo jogo seguindo a estrutura existente. O objetivo de longo prazo é um catálogo colaborativo de jogos pedagógicos mantido por educadores da rede pública.
Cada jogo precisa ter um objetivo de aprendizagem claro, mapeável a pelo menos uma competência ou habilidade da BNCC, com mecânica que exija atividade cognitiva real — não apenas cliques aleatórios. Jogos de pura memorização são aceitos apenas quando a memorização é a competência a ser desenvolvida, não quando ela substitui o raciocínio.
Cada etapa do desenvolvimento será registrada neste blog. Se você é professor, desenvolvedor ou gestor educacional e quer acompanhar — ou contribuir — este espaço é seu também.
Conclusão: o que esta etapa realmente representa
A vitrine de jogos não é apenas a primeira tela de uma plataforma. É a materialização de uma hipótese: de que é possível construir, dentro da escola pública, ferramentas digitais pedagógicas que nascem do diagnóstico real da turma — e não de um catálogo externo desconectado da realidade do aluno.
O que está registrado neste post não é um produto acabado. É uma fundação. E fundações importam precisamente porque definem o que pode ser construído acima delas.
A próxima etapa — menu principal e arquitetura de navegação — parte diretamente das decisões tomadas aqui. Toda a complexidade futura da plataforma está sendo gerida agora, na simplicidade deliberada desta primeira interface.
Etapa 2: Menu principal e arquitetura de navegação entre jogos. Como organizar a informação para que o aluno encontre o que precisa sem instrução verbal do professor.
📘 Gostou do que viu aqui no laboratório? No Professor com IA eu mostro, passo a passo, como você também pode criar ferramentas assim — mesmo sem saber programar.