WebCraft Studio

Ambiente lúdico e interativo para aprender HTML, CSS e JavaScript com missões, blocos de construção, preview ao vivo, console didático e progresso local.

Projeto educacional de portfólio. Não é sistema oficial institucional e não usa dados reais de estudantes.

Visão Geral

O WebCraft Studio foi pensado como um “Scratch para Web”, mas sem esconder o código real. O estudante começa usando blocos clicáveis, observa o HTML/CSS/JS sendo inserido nos editores e vê o resultado imediatamente em um compilador interativo no navegador.

O professor pode conduzir a aula por missões, validar critérios objetivos, discutir erros pelo console e exportar um relatório simples da prática.

Recursos

• Trilha com 6 missões didáticas de HTML, CSS e JavaScript.
• Blocos clicáveis que inserem trechos de código real.
• Editores separados para HTML, CSS e JavaScript.
• Preview ao vivo com iframe.srcdoc.
• Console didático capturando console.log, console.warn, console.error e erros de execução.
• Validador de missão com critérios objetivos.
• Progresso e XP salvos apenas em localStorage.
• Modo professor com roteiro de condução e exportação Markdown.
• PWA instalável no Windows, Android e navegadores compatíveis.
• Sem backend, login, banco de dados, API externa ou upload de arquivos.

Como Executar

npm run smoke
python -m http.server 5177

Depois acesse:

http://localhost:5177

Também é possível servir a pasta por qualquer servidor estático ou publicar no GitHub Pages.

Dinâmica de Aula

1. Abra o app no projetor e selecione uma missão.
2. Peça que os estudantes montem a solução usando blocos e depois leiam o código real.
3. Use o preview ao vivo para mostrar a relação entre estrutura, estilo e comportamento.
4. Execute a validação da missão e discuta cada critério.
5. Ative o modo professor para exportar o relatório da prática.

Caminho Para Windows E Android

O MVP já é uma PWA instalável. Para uma versão empacotada:

• Windows: envolver a pasta estática com Tauri ou Electron.
• Android: envolver a PWA com Capacitor ou Trusted Web Activity.

Essa etapa deve ser feita depois que a trilha pedagógica estiver validada com turmas reais.

Veja também: packaging/README.md.

Política De Dados

Todos os dados ficam no navegador do usuário. O app usa apenas localStorage para progresso local e não envia código, nomes, relatórios ou informações de estudantes para servidor.

Status

MVP premium funcional para portfólio e validação pedagógica inicial.