Repository navigation
H5P
Guia da comunidade Bio+Tech EduDesign para criar, integrar e reutilizar conteúdos H5P em nossos OADs (Objetos de Aprendizagem Digitais) e REAs (Recursos Educacionais Abertos).
"Interatividade não é enfeite: é a diferença entre assistir e aprender." 🌱
H5P (HTML5 Package) é um padrão aberto e gratuito para criação de conteúdos interativos na web. Foi criado em 2013 na Noruega e hoje é usado por milhões de educadoras(es) em todo o mundo — inclusive integrado nativamente ao Moodle desde a versão 3.9.
📖 Fonte oficial: h5p.org
| Motivo | Explicação |
|---|---|
| 🆓 Aberto e gratuito | Licença MIT, alinhado com nossa filosofia REA |
| 🧩 Muitos tipos prontos | +50 formatos interativos sem programar |
| 📱 Responsivo | Funciona em celular, tablet e desktop |
| ♿ Acessível | Suporte a leitores de tela e navegação por teclado |
| 🔄 Reutilizável | Arquivo .h5p funciona em qualquer plataforma compatível |
| 📦 Independente de plataforma | Moodle, WordPress, Drupal, Canvas, GitHub Pages |
| 🎯 Pedagogia ativa | Feedback imediato, gamificação, ramificações — casa com nossa metodologia |
O H5P oferece mais de 50 tipos de interação. Abaixo, os 10 mais relevantes para o trabalho da Bio+Tech EduDesign:
| # | Tipo H5P | Uso pedagógico | Exemplo em Química |
|---|---|---|---|
| 1 | Interactive Video | Vídeo com pausas para quizzes | Vídeo do Le Chatelier com perguntas em pontos-chave |
| 2 | Course Presentation | Slides interativos com atividades | Trilha gamificada de Termoquímica |
| 3 | Branching Scenario | Narrativa com escolhas ramificadas | Dilema ético sobre uso de CRISPR |
| 4 | Multiple Choice | Questão de múltipla escolha com feedback | Questões estilo ENEM |
| 5 | Fill in the Blanks | Completar lacunas em texto | Equação química a completar |
| 6 | Drag and Drop | Arrastar elementos para categorias | Classificar reações endo/exotérmicas |
| 7 | Mark the Words | Marcar palavras-chave em texto | Identificar reagentes vs produtos |
| 8 | Image Hotspots | Pontos clicáveis em imagem | Diagrama de célula com organelas |
| 9 | Quiz (Question Set) | Conjunto de questões com relatório | Simulado ENEM de Cinética |
| 10 | Summary | Escolher a melhor síntese | Fixação conceitual após vídeo |
📚 Catálogo completo: h5p.org/content-types-and-applications
→ Interactive Video ou Image Hotspots com uma cena real (bioma, laboratório, cotidiano)
→ Drag and Drop, Mark the Words, Fill in the Blanks — o(a) estudante manipula, não só lê
→ Summary ou Multiple Choice com feedback formativo detalhado
→ Quiz (Question Set) com relatório de desempenho — ideal para simulados ENEM
→ Branching Scenario — permite que o(a) estudante experimente consequências de decisões
→ Course Presentation com múltiplos tipos aninhados + barra de progresso + XP
❌ "Errado. Tente novamente." ✅ "Não foi dessa vez! 💚 Lembre-se: o Kc considera apenas espécies em fase gasosa ou aquosa. Revise a Missão 1 e volte pra cá!"
📖 Alinhado com o princípio 6 da Etica Pedagogica — cuidado com a subjetividade.
Configure tentativas ilimitadas por padrão. Bloqueio após 1 erro é prática rejeitada pela comunidade.
- ✅ Alt-text em todas as imagens (ver Guia de Acessibilidade)
- ✅ Contraste WCAG AA em textos e botões
- ✅ Navegação por teclado testada
- ✅ Transcrição textual para conteúdos em vídeo/áudio
Aplique a paleta Identidade Visual:
- Azul petróleo
#1B3A5Cpara títulos - Turquesa
#5BC8C8para destaques e botões - Laranja
#E8862Epara elementos de energia/circuito - Branco/gelo para fundos
Se usar avatares/personagens (comum em Branching Scenario e Course Presentation), inspire-se em cientistas brasileiras reais — como fazemos na trilha de Equilíbrio Químico (Johanna Döbereiner, Vanderlan Bolzani, Jaqueline Goes de Jesus, Celina Turchi, Sonia Guimarães).
Todo .h5p produzido pela comunidade deve declarar licença aberta compatível (preferencialmente CC BY-SA 4.0 para conteúdo, MIT para código).
No repositório do OAD, coloque o arquivo .h5p em /h5p/. Isso permite que outros(as) educadores(as) reutilizem e adaptem — princípio central do REA.
- Acesse h5p.org → clique em Try it free
- Escolha um tipo (recomendo começar por Multiple Choice)
- Preencha os campos → Save
- Baixe o arquivo
.h5p(botão Reuse) - Incorpore via
<iframe>em qualquer página HTML
- Em sua sala Moodle → Adicionar atividade → H5P
- Envie o arquivo
.h5pOU crie pelo Content Bank do Moodle - Configure notas e tentativas
- Publique 🎉
📖 Guia detalhado: Educare/Fiocruz — Moodle e H5P · Moodle.com — Como usar H5P no Moodle
- Instale o plugin H5P no WordPress
- Menu H5P Content → Add New
- Escolha o tipo, edite e publique via shortcode
[h5p id="X"]
Perfeito para nossos OADs em bio-tech-edu.github.io:
- Crie o
.h5pem h5p.org ou Moodle - Baixe o
.h5p(Reuse) - Extraia como
.zip(é o que é, por baixo do capô!) - Suba a pasta extraída em
/h5p/nome-atividade/do repositório - Use a biblioteca h5p-standalone para renderizar sem servidor
- Incorpore na página HTML do OAD
Exemplo de estrutura no repositório:
oad-equilibrio/
├── index.html
├── h5p/
│ ├── missao-1-cerrado/ # H5P extraído
│ ├── missao-2-caatinga/
│ └── boss-enem-pantanal/
└── js/h5p-standalone.min.js
A IA acelera a estruturação prévia de conteúdos H5P — não substitui o(a) autor(a) pedagógico(a).
Use os templates prontos em Engenharia de Prompt para Educadores (seção 5) e a coletânea Prompts Exemplos (seção "Conteúdo interativo H5P") para:
- Estruturar roteiros de Interactive Video com timestamps e questões
- Gerar bancos de questões para Quiz (Question Set)
- Desenhar árvores de decisão de Branching Scenario
- Escrever feedback formativo em escala
Trilha Cinética Química — bio-tech-edu.github.io/cinetica
- Course Presentation para narrativa de missões
- Multiple Choice para questões-desafio
- Interactive Video para revisão conceitual
- Branching Scenario — Missão 4 (Le Chatelier) com simulador de perturbações
- Quiz — Missão 5 (Boss ENEM) com questões oficiais 2013–2026
- Image Hotspots — Missão 3 (Amazônia) mostrando etapas do PCR
- ❌ Usar H5P como substituto de bom design pedagógico — a interatividade não conserta um plano de aula frágil
- ❌ Excesso de gamificação que compete com o conteúdo (pontuação piscando o tempo todo)
- ❌ Feedback punitivo ("Você perdeu!") — contraria nossa Etica Pedagogica
- ❌ Ignorar acessibilidade por assumir que "o H5P já cuida" — sempre teste!
- ❌ Reter o
.h5pde forma proprietária — REA se compartilha - ❌ Depender exclusivamente de conexão de alta velocidade — nosso público inclui escolas rurais
- 🌐 h5p.org — site oficial (inglês)
- 📚 Catálogo de tipos de conteúdo
- 🎓 Tutoriais oficiais
- 🇧🇷 Educare/Fiocruz — Moodle e H5P — curso institucional gratuito
- 📄 Moodle.com (PT-BR) — Como usar H5P
- 🎥 YouTube — Atividades no Moodle: H5P
- 💻 h5p-standalone (GitHub) — renderizar H5P sem servidor
- 🔌 Plugin H5P para WordPress
- 📦 H5P para Moodle
- Alinha-se a uma metodologia ativa (ver Metodologias Ativas)
- Feedback formativo em todas as respostas (nunca punitivo)
- Tentativas ilimitadas configuradas
- Acessibilidade testada (alt-text, contraste, teclado)
- Paleta e tipografia da marca aplicadas (ver Identidade Visual)
- Representatividade ancorada nas personagens (se aplicável)
- Licença aberta declarada (CC BY-SA 4.0 sugerida)
- Arquivo
.h5pincluído no repositório em/h5p/ - Créditos e fontes científicas listados
- Uso de IA declarado, se houver (ver Uso Responsável de IA)
🧩 H5P é ferramenta. Pedagogia crítica é o que transforma clique em aprendizado. 🌱💚
➡️ Veja também: Engenharia de Prompt para Educadores · Prompts Exemplos · Metodologias Ativas · Etica Pedagogica
🌱 Bio+Tech EduDesign Wiki