Cómo usar objetos H5P en Drupal 11 sin necesidad del respectivo módulo
Caso real de migración de Drupal 7 a Drupal 11 en el que los contenidos H5P dejaron de mostrarse por falta de un módulo compatible. La solución: exportar los objetos como HTML autónomo desde Lumi e incrustarlos directamente en los artículos, conservando toda su interactividad sin depender del módulo oficial.
H5P es un programa en línea de código abierto que funciona como un generador de recursos educativos interactivos: exámenes, presentaciones, exposiciones de fotografías, videos interactivos, líneas del tiempo y muchos más. Los recursos se crean en h5p.org y luego se incrustan en una página web mediante un código tipo iframe.
En plataformas como Drupal 7 y 8, Moodle y WordPress existe un módulo de H5P que permite producir los contenidos y mantenerlos alojados dentro de la propia plataforma. Los recursos generados pueden configurarse como reutilizables bajo licencia Creative Commons. Eso ha hecho de H5P una herramienta muy popular entre profesores, comunicadores y creadores de contenido interactivo.
Este artículo documenta un problema surgido tras migrar mi sitio a Drupal 11 y la solución que encontré para no perder mis contenidos H5P, sin necesidad de instalar el módulo oficial.
Idea central
Si un objeto H5P puede exportarse como HTML autónomo, ese HTML puede incrustarse en cualquier artículo de Drupal 11 y seguirá funcionando igual que el objeto original, sin módulo de por medio.
Problema real
Realicé la migración de mi sitio web «Espacio Virtual de Orlando Cárcamo» desde Drupal 7 a Drupal 11. Para mi sorpresa, los contenidos H5P que había creado ya no se mostraban en la nueva instalación. La razón era clara: al no estar instalado el módulo de H5P, los recursos producidos con ese generador no podían renderizarse.
Síntoma principal
Tras la migración, todos los objetos H5P aparecían en blanco o rotos en los artículos. El contenido interactivo simplemente había dejado de existir para el visitante.
Fui a la página de descarga de módulos de Drupal para instalar el módulo H5P y me encontré con la sorpresa de que no existía una versión compatible con Drupal 11. En ese momento solo había versiones para Drupal 7, 8, 9 y 10, motivo por el cual mis contenidos producidos con H5P estaban virtualmente perdidos.
Contexto mínimo
- Sitio de origen: Espacio Virtual de Orlando Cárcamo, en Drupal 7.
- Sitio de destino: el mismo sitio migrado a Drupal 11.
- Contenido afectado: objetos H5P (recursos educativos interactivos).
- Causa inmediata: ausencia del módulo H5P para Drupal 11.
- Herramienta de la solución: Lumi, versión de escritorio.
- Formato clave: exportación como HTML autónomo.
Causa del error o confusión
El punto de partida equivocado era suponer que, al migrar a una versión superior de Drupal, todas las funcionalidades del sitio anterior se conservarían automáticamente. En realidad, cada módulo depende de que exista una versión compatible con la nueva versión del núcleo. Si ese módulo no ha sido actualizado por su comunidad, la funcionalidad simplemente no viaja con la migración.
La causa clave
Los objetos H5P no estaban dañados: lo que faltaba era el motor que los renderiza. Sin el módulo H5P instalado, Drupal 11 no sabía cómo interpretar ese contenido, aunque los datos siguieran ahí.
Solución general
Primero busqué en Google alguna adaptación del módulo de H5P para Drupal 11 hecha por miembros de la comunidad, ya que en la web oficial no estaba disponible. No encontré ninguna. Sin embargo, descubrí una alternativa muy interesante: Lumi.
Lumi es un programa que permite crear, editar y visualizar contenidos H5P de forma local. A diferencia de h5p.org, Lumi puede instalarse en el computador, y los recursos creados pueden exportarse y subirse a cualquier servidor para luego incrustarlos en artículos y páginas web.
Regla de oro
Lo que no se puede alojar en Drupal 11 como módulo, sí se puede incrustar como HTML. Lumi es el puente: convierte el objeto H5P en HTML autónomo que Drupal muestra sin ayuda de ningún módulo.
Explorando la versión de escritorio de Lumi noté que los contenidos H5P se pueden exportar como archivos HTML. Ahí comprendí que no iba a perder mis recursos: si podían exportarse como HTML, ese HTML podría incrustarse tranquilamente en las páginas y artículos de mi sitio en Drupal 11.
El experimento, paso a paso
Realicé la prueba con un contenido real. El flujo completo fue el siguiente:
- Descargué un objeto H5P alojado en mi antigua instalación de Drupal 7.
- Lo importé en la aplicación Lumi instalada en mi computador.
- Lo revisé dentro de Lumi para confirmar que funcionaba.
- Lo exporté como archivo HTML autónomo.
- Copié el código fuente del archivo HTML exportado.
- Pegué ese código en el cuerpo de un artículo en Drupal 11 usando el botón «
<>» (Código fuente) del editor de texto.
El resultado
¡Y funcionó! El contenido interactivo se mostró y operó exactamente igual que en el antiguo sitio de Drupal 7. Problema resuelto sin necesidad del módulo H5P.
Verificación
El procedimiento se considera exitoso cuando el objeto incrustado se comporta igual que el original. En la práctica, conviene comprobar lo siguiente:
- El objeto H5P se muestra completo dentro del artículo, sin espacios en blanco.
- Los elementos interactivos (botones, preguntas, navegación) responden con normalidad.
- El contenido se adapta bien en computador y en dispositivos móviles.
- El artículo guarda el HTML sin que el editor lo recorte al publicar.
Si el editor recorta el código
Drupal puede filtrar etiquetas al guardar. Si el objeto no se muestra tras pegarlo, verifica que el artículo use un formato de texto que permita HTML completo, para que no se eliminen los scripts ni los atributos del H5P.
Aprendizajes y prevención
Esta experiencia dejó una lección de fondo: la dependencia de un módulo específico puede convertirse en un punto frágil al migrar de versión. Cuando un contenido puede exportarse a un formato estándar y autónomo como HTML, gana independencia respecto de la plataforma que lo aloja.
Recomendación preventiva
Antes de migrar un sitio con contenidos H5P, exporta y conserva copias de esos objetos (como .h5p y como HTML). Así, aunque el módulo no exista en la nueva versión, tus recursos seguirán siendo utilizables.
Checklist para la próxima vez
- Descargar los objetos H5P del sitio de origen.
- Importarlos en Lumi de escritorio.
- Exportar cada uno como HTML autónomo.
- Guardar también una copia en formato
.h5pcomo respaldo. - Incrustar el HTML en el artículo con el botón «
<>». - Usar un formato de texto que permita HTML completo.
- Verificar el funcionamiento en computador y móvil.
Conclusión
Si tienes un sitio en Drupal 11 y necesitas usar tus antiguos contenidos H5P, puedes seguir usándolos con ayuda de Lumi, sin depender del módulo oficial de H5P, que a la fecha de este artículo aún no había sido actualizado para esta versión.
Esta solución es útil, elegante y efectiva. Le permite a tu sitio mantener la interactividad y la innovación en los contenidos educativos, mejorando la experiencia de tus visitantes, y demuestra que la portabilidad del contenido es tan importante como la plataforma que lo aloja.
Referencias
- H5P (2025). Create and share rich HTML5 content and applications. Disponible en: https://h5p.org/
- Otero G., Iván (2025). Guía de uso de H5P. Disponible en: https://descargas.intef.es/cedec/proyectoedia/guias/contenidos/guia_H5p/index.html
- Lumi Education (2023). Create H5P and host your content on Lumi. Disponible en: https://lumi.education/en/
- Inicie sesión o registrese para enviar comentarios