Línea de tiempo e imagen interactiva con H5P en Moodle

En esta guía ▾

1. Para qué sirve cada uno
2. Antes de empezar
3. Paso a paso: línea de tiempo con H5P Timeline
4. Paso a paso: imagen interactiva con Image Hotspots
5. Agregarlos al curso y medir quién los vio
6. Ideas por rubro
7. Problemas comunes
8. Preguntas frecuentes

Para crear una línea de tiempo o una imagen interactiva en Moodle, entra a Más → Banco de contenido, haz clic en Añadir y elige Timeline (hechos ordenados por fecha) o Image Hotspots (puntos clicables sobre una imagen). Llena los campos, guarda y agrégalo al curso con la actividad H5P. Ninguno de los dos pone nota: son para explorar, así que mide el avance con la finalización Requerir ver.

Para qué sirve cada uno

Si lo que quieres es que el alumno responda, no uses estos tipos: usa completar espacios y arrastrar palabras con H5P o un cuestionario H5P.

Antes de empezar

1. Entra al curso y haz clic en Más → Banco de contenido.
2. Haz clic en Añadir y busca Timeline e Image Hotspots en la lista.

Si no aparecen, el tipo no está instalado o fue desactivado. Timeline depende de que el administrador lo tenga habilitado en Administración del sitio → H5P → Gestionar tipos de contenido H5P. Moodle trae los tipos del repositorio oficial de H5P con una tarea programada mensual; si está apagada, el administrador puede subir el tipo desde esa misma página.

Paso a paso: línea de tiempo con H5P Timeline

Ejemplo: «Hitos de la independencia del Perú» para un colegio, en el bimestre 3.

1. En Más → Banco de contenido, haz clic en Añadir → Timeline.
2. Escribe el Título del contenido: «Historia 5.º · Hitos de la independencia».
3. En el bloque Línea de Tiempo, completa la portada: - Título: «Del Perú virreinal a la república». - Texto del Cuerpo: dos líneas de introducción. - Recurso: opcional; una imagen o el enlace de un video.
4. Baja a Fechas y crea un elemento por hecho. En cada uno: - Fecha de inicio: 1821,07,28 (año, mes y día con comas; el año es obligatorio). - Fecha final: déjala vacía si es un solo día. Si es un periodo, ponla: 1879,04,05 a 1883,10,20. - Titulo: «Proclamación de la Independencia». - Texto del cuerpo: tres o cuatro líneas, no más. Si escribes demasiado, la diapositiva se corta en el celular. - Etiquetas: una categoría, por ejemplo «Política» o «Batallas». Las etiquetas sirven para agrupar los hechos por categoría en la barra de tiempo. - Recurso: imagen o enlace de medios. El campo acepta enlaces de YouTube, Vimeo, Flickr, Google Maps, SoundCloud y Twitter.
5. Si quieres marcar periodos completos (por ejemplo, «Virreinato» y «República»), usa Épocas, con su Fecha de inicio, Fecha final y Cabecera.
6. Revisa estos ajustes de la línea de tiempo: - Nivel de zoom predeterminado: 0 muestra la escala que calcula H5P. Sube a 1 o 2 si los hechos están muy juntos; usa números negativos para alejar. - Altura: 600 píxeles por defecto. Con mucho texto, sube a 700. - Idioma: viene en English. Cámbialo a Spanish para que los botones y los meses salgan en español.
7. Haz clic en Guardar y recorre la vista previa de inicio a fin.

Si todo salió bien, verás la portada y, abajo, la barra con los hechos ordenados. Las flechas pasan de un hecho al siguiente y la barra se puede arrastrar.

Paso a paso: imagen interactiva con Image Hotspots

Ejemplo: «Equipo de protección personal» para la inducción de seguridad de una empresa.

1. En Más → Banco de contenido, haz clic en Añadir → Image Hotspots.
2. Escribe el Título.
3. En Imagen de fondo, sube la imagen: una foto de un trabajador con su EPP. Usa una imagen horizontal de al menos 1200 píxeles de ancho para que no se vea borrosa al ampliarla.
4. Llena Texto alternativo para imagen de fondo: «Trabajador con casco, lentes, guantes y botas de seguridad». Lo usan los lectores de pantalla y aparece si la imagen no carga.
5. Elige el ícono y el color de los puntos (por defecto, un signo + morado). Usa un color que contraste con la foto.
6. En Puntos clave, crea un punto por elemento: - En Posición del punto clave, haz clic sobre la miniatura donde va el punto (por ejemplo, sobre el casco). - Encabezado: «Casco de seguridad». - Contenido emergente: texto con lo que debe saber («Úsalo en toda la planta; revisa la fecha de vencimiento del arnés interno»), y si quieres una imagen o un video corto. - Cubrir toda la imagen de fondo: actívalo si el contenido es largo o tiene video; así la ventana ocupa toda la imagen.
7. Haz clic en Guardar y prueba cada punto en la vista previa.

Entre 5 y 8 puntos es lo que un alumno revisa con atención. Si necesitas 20, divide la imagen en dos contenidos.

Agregarlos al curso y medir quién los vio

1. Activa el Modo de edición y haz clic en Añadir una actividad o un recurso → H5P.
2. Escribe el Nombre.
3. En Paquete de archivos, abre el selector, entra al repositorio Banco de contenido y elige tu contenido. Con Enlazar al archivo, las correcciones que hagas en el banco se ven en el curso; con Hacer una copia del archivo, no.
4. En Calificación, pon Tipo en Ninguna. Estos contenidos no envían puntaje y una columna vacía en el libro solo confunde.
5. En Condiciones de finalización de actividad, elige Añadir requisitos y marca Requerir ver.
6. Haz clic en Guardar cambios y regresar al curso.

Ten presente que Requerir ver solo confirma que el alumno abrió la actividad, no que recorrió todos los hechos o todos los puntos. Si necesitas comprobar que entendió, pon después dos o tres preguntas. La documentación oficial de la actividad está en H5P activity en docs.moodle.org.

Ideas por rubro

• Colegio: línea de tiempo de la Guerra del Pacífico; imagen de la célula con sus organelos.
• Instituto técnico: imagen del tablero eléctrico con cada componente; línea de tiempo de versiones de una norma técnica.
• Academia preuniversitaria: línea de tiempo de literatura peruana para el simulacro; mapa del Perú con las regiones naturales.
• Empresa: historia de la compañía en la inducción; plano del local con rutas de evacuación y extintores.

Para unir varios contenidos en una sola secuencia, mira la presentación interactiva H5P.

Problemas comunes

Con miaula.pe Si Timeline o Image Hotspots no figuran en tu banco de contenidos, el soporte de miaula.pe los habilita en tu aula. Puedes ver cómo se comportan en el aula demo.

Preguntas frecuentes

¿En qué formato se escriben las fechas en H5P Timeline?

Año, mes y día separados por comas: 1821,07,28. Solo el año es obligatorio, así que también puedes escribir 1532.

¿Por qué la línea de tiempo sale con los botones en inglés?

El campo Idioma de la línea de tiempo viene en English. Cámbialo a Spanish al editar el contenido.

¿H5P Timeline e Image Hotspots ponen nota?

No. Son contenidos para explorar, no ejercicios. En la actividad H5P pon el tipo de calificación en Ninguna y usa la finalización con Requerir ver.

¿Qué puedo poner dentro de un punto de Image Hotspots?

Texto, imágenes y video en la ventana que se abre al hacer clic. Cada punto tiene su propio encabezado y contenido.

¿Por qué no aparece Timeline en el banco de contenidos?

El tipo de contenido no está instalado o está desactivado en tu sitio. El administrador lo habilita en Administración del sitio → H5P → Gestionar tipos de contenido H5P.