Incrustar código HTML en Moodle: integra recursos externos en tu aula virtual
En muchas ocasiones, los docentes necesitan incluir en su aula virtual contenidos que están alojados en otras plataformas: vídeos de YouTube, formularios de Google, presentaciones de SlideShare, mapas interactivos, etc. Moodle permite hacerlo de forma sencilla a través de la incrustación de código HTML, un método que copia un fragmento de código generado por la plataforma externa y lo pega en el editor de texto de Moodle.
En este tutorial te mostramos cómo hacerlo paso a paso, con ejemplos prácticos para que puedas enriquecer tus cursos con contenidos de otras plataformas sin complicaciones.
¿Qué es incrustar código HTML?
Incrustar (embed) significa insertar un contenido de una página web dentro de otra. La mayoría de las plataformas (YouTube, Google Forms, Vimeo, etc.) ofrecen un código HTML que puedes copiar y pegar en tu sitio web o aula virtual. Este código es un fragmento de HTML que le dice al navegador cómo mostrar ese contenido dentro de tu página.
En Moodle, podemos incrustar código HTML utilizando el editor de texto, que incluye un botón para editar directamente el código fuente de la página. Esto nos permite añadir vídeos, formularios, presentaciones y otros recursos sin necesidad de conocimientos avanzados de programación.
Paso 1: Obtener el código HTML de la plataforma externa
Para incrustar un recurso, primero debemos obtener el código HTML que la plataforma externa nos proporciona. Veamos dos ejemplos comunes:
Ejemplo 1: Incrustar un vídeo de YouTube
-
Ve al vídeo de YouTube que quieras incrustar.
-
Haz clic en «Compartir» (debajo del vídeo).
-
Selecciona la opción «Insertar» (el símbolo de
</>). -
Copia el código HTML que aparece en el cuadro de texto. Puedes personalizar el tamaño del vídeo y otras opciones antes de copiar.
Ejemplo 2: Incrustar un formulario de Google
-
Abre tu formulario de Google.
-
Haz clic en el botón «Enviar» (arriba a la derecha).
-
Selecciona el icono de HTML (con el símbolo
</>). -
Copia el código HTML que se genera. También puedes ajustar el tamaño del formulario antes de copiar.
| Plataforma | Ubicación del código HTML |
|---|---|
| YouTube | Compartir → Insertar (</>) |
| Google Forms | Enviar → </> (HTML) |
| Vimeo | Compartir → Insertar (</>) |
| SlideShare | Compartir → Insertar (</>) |
Paso 2: Crear una página en Moodle
Ahora vamos a crear un recurso en Moodle donde pegaremos el código HTML.
-
Activar el modo edición en el curso.
-
Agregar una actividad o recurso.
-
En la lista, seleccionar «Página» (recurso). Aunque también se puede usar el recurso «Etiqueta» o incluso el editor de texto de una «Actividad», la página es la opción más limpia y versátil.
-
Poner un título al recurso (ej: «Formulario de opinión» o «Vídeo de la clase»).
Paso 3: Pegar el código HTML en el editor
-
En el editor de texto de la página, haz clic en el botón del editor (símbolo de
</>). Esto abrirá el código fuente de la página. -
Pega el código HTML que copiaste de la plataforma externa (Ctrl+V o Cmd+V).
-
**Vuelve a hacer clic en el botón
</>para salir del editor de código y ver la vista previa. -
Guardar y mostrar para ver el resultado.
Recomendación: Si el editor de texto no muestra el botón de código HTML, es posible que esté oculto en la barra de herramientas. Busca el botón de «Mostrar más botones» (el de tres puntos) para que aparezca.
¿Dónde puedo incrustar código HTML en Moodle?
El código HTML se puede incrustar en cualquier parte de Moodle que tenga un editor de texto:
-
Recurso Página: ideal para incrustar vídeos, formularios o presentaciones completas.
-
Etiqueta: útil para incrustar contenido dentro de una sección del curso, como un vídeo introductorio.
-
Descripción de una actividad: podemos añadir un vídeo o formulario en la descripción de una tarea o cuestionario.
-
Foros: podemos incrustar contenido en los mensajes de los foros.
Ejemplos prácticos
Incrustar un formulario de Google en una página
-
Creamos una página con título «Encuesta de opinión».
-
Pegamos el código HTML del formulario.
-
Al guardar, los estudiantes verán el formulario directamente dentro de Moodle, sin salir de la plataforma.
Incrustar un vídeo de YouTube en una etiqueta
-
Creamos una etiqueta en la sección del curso.
-
Pegamos el código HTML del vídeo.
-
Los estudiantes verán el vídeo directamente en el curso, sin tener que abrir otra ventana.
Preguntas frecuentes sobre la incrustación de código HTML en Moodle
1. ¿Es seguro incrustar código HTML en Moodle?
Sí, siempre y cuando el código provenga de fuentes confiables (YouTube, Google, Vimeo, etc.). Moodle tiene filtros de seguridad que evitan que se ejecute código malicioso, pero es recomendable no copiar código de sitios desconocidos.
2. ¿Puedo incrustar cualquier tipo de contenido?
Sí, siempre que la plataforma externa proporcione un código HTML de inserción. La mayoría de los servicios web (vídeos, formularios, presentaciones, mapas) ofrecen esta opción.
3. ¿Los estudiantes pueden ver el contenido sin salir de Moodle?
Sí. El objetivo de incrustar código es que el contenido se muestre dentro de la página de Moodle, sin necesidad de abrir una nueva ventana o pestaña.
4. ¿Por qué no usar simplemente un enlace (URL) en lugar de incrustar HTML?
La principal ventaja de incrustar HTML es que el contenido se muestra directamente en la página de Moodle, lo que mejora la experiencia del usuario y evita que los estudiantes tengan que salir de la plataforma.
Recuerde que…
Incrustar código HTML en Moodle es una de las formas más sencillas y efectivas de enriquecer tu aula virtual con recursos de otras plataformas. Ya sea para incluir vídeos de YouTube, formularios de Google, presentaciones o cualquier otro contenido, el proceso es el mismo: copiar el código de inserción y pegarlo en el editor de texto de Moodle.
Este método es especialmente útil para aquellos docentes que quieren integrar herramientas externas sin complicarse con configuraciones avanzadas. Además, al mostrarse dentro de la página de Moodle, los estudiantes tienen una experiencia más fluida y no tienen que saltar de una plataforma a otra.
Si quieres profundizar en más funcionalidades de Moodle y herramientas educativas, te invitamos a explorar más contenidos en fernandojuca.com y a suscribirte al canal de youtube.com/fernandojucamaldonado, donde encontrarás más tutoriales sobre educación y tecnología.
