80/365 · HTML en Moodle: una plantilla 'todo en uno'

Ayer vimos cuándo H5P funciona bien y cuándo es mejor usar otras herramientas. Hoy toca hablar de algo que parece técnico pero que, bien usado, te ahorra horas y mejora radicalmente la accesibilidad de tu aula virtual: archivos HTML embebidos en Moodle.

Personalmente, llevo tiempo creando recursos HTML externos (los tengo en edumind.es/recursos) y los integro en mis cursos de Moodle mediante iframes. Son desde explicaciones de temas hasta estrategias de estudio, pasando por plantillas interactivas. La ventaja es brutal: un mismo recurso lo puedo usar en varios cursos, actualizarlo una vez y que se actualice en todos lados, y diseñarlo con criterios de accesibilidad que Moodle no siempre facilita.

Este post va de eso: de cómo montar una plantilla HTML reutilizable, embedarla en Moodle, y usar IA para mejorar la accesibilidad y la claridad del contenido. Sin necesidad de ser programador, solo con método.

Qué es un recurso HTML embebido y por qué usarlo

Un recurso HTML es, básicamente, una página web sencilla: un archivo .html con texto, imágenes, estilos CSS y, si quieres, algo de JavaScript para interactividad. Lo puedes alojar en cualquier servidor (tu propio dominio, Google Drive con permisos públicos, GitHub Pages…) y luego embeber en Moodle mediante un iframe.

Un iframe es una ventana dentro de tu página de Moodle que muestra contenido de otra URL. Es como poner un cuadro en la pared: el cuadro está en otro sitio, pero tú lo ves ahí. La gran ventaja es que si cambias el contenido del archivo HTML original, automáticamente se actualiza en todos los cursos donde lo hayas embebido. No tienes que tocar Moodle.

La clave está en que HTML te da control total sobre la presentación, la estructura y la accesibilidad. Moodle tiene sus propias limitaciones de formato, especialmente en el editor de texto enriquecido. Con HTML puedes usar etiquetas semánticas (headings correctos, listas bien estructuradas, atributos alt en imágenes), ajustar tamaños de fuente, contraste de colores, espaciado… todo lo que el Diseño Universal para el Aprendizaje (DUA) recomienda para que el contenido sea accesible para todo el alumnado.

Por qué importa la accesibilidad (y cómo HTML ayuda)

Cuando hablamos de accesibilidad en educación, no hablamos solo de alumnado con diversidad funcional reconocida. Hablamos de cualquier estudiante que se beneficie de múltiples formas de representación de la información. Esto incluye estudiantes con dislexia, TDAH, problemas visuales no diagnosticados, o simplemente preferencias de aprendizaje diferentes.

El marco del DUA, desarrollado por CAST (Center for Applied Special Technology), plantea que ofrecer múltiples medios de representación no es un extra, es un principio básico de diseño educativo. Y HTML es la herramienta más flexible para esto: puedes incluir texto alternativo en imágenes, estructurar contenido con encabezados semánticos que los lectores de pantalla entienden, ajustar el contraste y el tamaño de fuente sin depender de los límites del editor de Moodle.

Esto no es menor: un recurso HTML bien diseñado es una herramienta de equidad. Permite que estudiantes con diferentes necesidades accedan al mismo contenido de forma efectiva, sin que nadie tenga que pedir adaptaciones especiales porque el diseño ya es inclusivo desde el inicio.

Cómo creo mis recursos HTML (y dónde entra la IA)

Mi flujo de trabajo es este: primero, decido qué contenido necesito (por ejemplo, una explicación de un tema de Ciencias Sociales o una guía de estrategias de estudio). Luego, escribo el contenido en texto plano o en un borrador simple.

Aquí es donde entra la IA. Uso herramientas como ChatGPT o Claude para convertir ese contenido en HTML bien estructurado y accesible. Le pido que use encabezados jerárquicos correctos (h2, h3), que añada atributos alt a las imágenes, que estructure listas con ul/ol, que use contraste suficiente en los estilos CSS. La IA es especialmente útil para generar CSS limpio y responsive (que se vea bien en móvil y en ordenador) sin que yo tenga que pelearme con el código.

Una vez tengo el HTML, lo subo a mi servidor (en mi caso, edumind.es/recursos). Cada recurso tiene su propia URL. Luego, en Moodle, creo una etiqueta o una página, activo el editor HTML (el botón de "código fuente" en el editor de Moodle), y pego un iframe apuntando a esa URL. Algo así:

<iframe src="https://edumind.es/recursos/tema3-geografia.html" width="100%" height="600px" frameborder="0"></iframe>

Y ya está. El recurso aparece integrado en mi curso. Si más adelante detecto un error o quiero añadir información, edito el archivo HTML original, lo vuelvo a subir, y automáticamente se actualiza en todos los cursos donde lo haya embebido. Cuando lo pruebas con alumnado real, cambia todo: no tienes que andar buscando en qué curso pusiste qué versión, todo apunta a la misma fuente de verdad.

Ejemplos concretos que uso

Tres tipos de recursos HTML que tengo en producción y que funcionan especialmente bien:

Explicaciones de temas: un HTML con la estructura del tema, conceptos clave, imágenes explicativas, enlaces a vídeos o recursos externos. Lo uso en Ciencias Sociales y Naturales. La ventaja es que puedo diseñar el contenido con una jerarquía visual clara, usando colores y tipografías que faciliten la lectura, algo que el editor de Moodle no siempre permite.

Estrategias de estudio: recursos como "Cómo hacer un mapa conceptual" o "Técnica Pomodoro explicada paso a paso". Son guías prácticas que el alumnado consulta cuando lo necesita. Las tengo en HTML porque puedo incluir ejemplos interactivos, enlaces a herramientas, y mantener un diseño consistente que refuerza la identidad visual del curso.

Plantillas interactivas: formularios sencillos, calculadoras, tablas de autoevaluación. No son complejas (nada de bases de datos ni programación avanzada), pero sí son útiles. Por ejemplo, una tabla donde el alumnado puede marcar qué partes de un tema ha revisado ya, y que se guarda en el navegador con localStorage. Nada que Moodle no pueda hacer con otras herramientas, pero el HTML me da flexibilidad total.

El riesgo: cuándo HTML es demasiado

Muchas personas piensan que el problema es no saber HTML. Casi nunca lo es. El problema es crear recursos HTML para cosas que Moodle ya hace bien de forma nativa. Si solo necesitas texto con formato, usa el editor de Moodle. Si necesitas un cuestionario con seguimiento, usa un cuestionario de Moodle, no intentes montarlo en HTML.

HTML embebido tiene sentido cuando necesitas diseño personalizado, accesibilidad avanzada, reutilización masiva entre cursos, o cuando el contenido es tan específico que merece vivir fuera de Moodle. Para todo lo demás, las herramientas nativas son más sencillas y más robustas.

Cómo empezar sin volverse loco

Mi consejo: empieza con un recurso HTML simple, alojado en Google Drive o en un servidor gratuito como GitHub Pages. Crea una página con un título, dos párrafos y una imagen. Súbela, copia la URL pública, y embébela en Moodle con un iframe.

Si eso funciona, ya puedes escalar: añadir estilos CSS para mejorar el diseño, estructurar mejor el contenido con encabezados, incluir vídeos o enlaces. Y si no sabes HTML, usa IA: pídele que te genere el código, explícale qué contenido quieres y qué aspecto debe tener, y luego solo tienes que copiar, pegar y subir.

La diferencia fundamental es entre tener un recurso que vive solo en un curso de Moodle (y que tienes que duplicar y mantener manualmente en cada curso) y tener un recurso que vive en un sitio externo y que se actualiza automáticamente en todos lados. El segundo enfoque te ahorra horas y reduce errores.

Resumen

• Un recurso HTML embebido en Moodle (vía iframe) te permite diseñar contenido accesible, reutilizable y fácil de mantener desde un único archivo externo.
• HTML te da control total sobre la estructura semántica, los estilos visuales y la accesibilidad, aspectos que el editor de Moodle a veces limita.
• La IA es útil para generar HTML bien estructurado y accesible sin necesidad de saber programar, especialmente para crear diseños responsive y con buen contraste.
• Ejemplos prácticos que funcionan bien: explicaciones de temas, guías de estrategias de estudio y plantillas interactivas sencillas.
• HTML embebido tiene sentido cuando necesitas diseño personalizado o reutilización masiva; para tareas estándar, usa las herramientas nativas de Moodle.
• Empieza con un recurso HTML simple, alojado en un servidor público, embebido con iframe, y escala solo si tiene sentido pedagógico en tu contexto.

Nos vemos en el día 81/365