H5P: videos y contenido interactivo en HTML5

Si eres de los que piensan que la formación online es algo aburrida, predecible, limitada y demasiado común para la vida tres punto cero, es porque no conoces H5P: videos y contenido interactivo en HTML5 para plataformas educativas (compatibles). Como por ejemplo, nuestro servicio estrella: EscuelaPress, tu escuela profesional con WordPress.

¿Qué es H5P?

En sentido estricto, H5P es el acrónimo de HTML5 Package. En definitiva, es un sistema open source de trabajo colaborativo desarrollado en Javascript que permite la creación y reutilización de contenido interactivo. ¿Cómo te has quedado? Así te lo cuenta la Wikipedia. Pero yo te lo explicaré de forma más sencilla:

H5P es un recurso gratuito con el que puedes crear contenido como videos interactivos, cuestionarios, juegos, presentaciones y muchas más cosas.

Una vez creada la interacción H5P puedes descargarla y subirla a Moodle, Drupal o WordPress. Lo mejor de todo es que puedes editarlo directamente dentro del CMS que estés empleando. Incluso compartirlo con otras personas para que también puedan editarlo. También puedes incrustarlo y permitir que otros lo hagan, si así lo deseas.

H5P es una forma verdaderamente creativa y perfecta de crear objetos de aprendizaje portátiles y editables.

Y lo más importante, puedes hacer un seguimiento del progreso y las puntuaciones de tus alumnos. Eso sí, dependerá de cada plataforma donde esté integrado.

Contenedores y aplicaciones de H5P

Los contenedores o aplicaciones en H5P son la base de los diferentes contenidos multimedia que puedes añadir en tu sitio web. A continuación, enumero todos los que podrías incorporar en tu web que están disponibles en la web oficial de h5p.org:

• Video interactivo: Lo que su propio nombre indica.
• Presentación de curso: para crear pases de diapositivas.
• Branching scenario: crear rutas y caminos alternativos según la interacción del estudiante.
• Acordeón: crea un menu desplegable de elementos con contenido html.
• Agamotto: una secuencia de imágenes que avanza paso a paso mediante transiciones y fundidos.
• Grabación de audio: grabadora de sonido que te permite descargar el wav grabado.
• Cuestionario aritmético: genera preguntas aleatorias sobre arimética simple que suman puntos y cuentan el tiempo empleado.
• Chart: crea gráficos de barra o circulares a partir de un conjunto de datos.
• Collage: presentación de imágenes en collage.
• Column: contenido html5 en formato columna.
• Tarjetas de dialogos: tarjetas interactivas ideales para aprendizaje de idiomas.
• Dictado: a partir de unos audios el estudiante tiene que escribir el texto que escucha.
• Herramienta de Documentación: permite crear guías interactivas para procesos estructurados de escritura que pueden ser descargados por el alumno.
• Arrastrar y soltar con imágenes: responde arrastrando y soltando imágenes donde corresponden.
• Arrastrar y soltar con texto: lo mismo que el anterior pero con texto.
• Hotspots (simple y múltiple): cuestionario en formato imagen con marcadores interactivos de respuesta.
• Crucigramas.
• Flashcards: tarjetas visuales para introducir respuestas.
• Adivina la respuesta: a partir de una imagen tienes que adivinar la respuesta.
• Incrustador de iframes: puedes incorporar contenidos de terceros como por ejemplo, Vimeo, Slideshare, etc.
• Hotspot informacionales: marcas en imágenes que al hacer clic, muestran información adicional enriquecida.
• Imágenes yuxtapuestas: ideales para mostrar un antes y un después
• Emparejado de imágenes: cada oveja con su pareja.
• Secuencia de imágenes: ordena las fotografías de forma correcta.
• Pase de diapositivas: el de toda la vida 🙂
• Presentaciones impresionantes: pase de diapositivas con efecto parallax.
• Marca las palabras: el estudiante tendrá que destacar determinados términos.
• Juego de memoria: como el emparejado de imágenes pero con tarjetas giratorias.
• Múltiples opciones: Preguntas con múltiples respuestas.
• Cuestionario de personalidad: una vez respondido, según puntuación mostrarás un resultado u otro.
• Cuestionario de feedback: para realizar test y preguntas abiertas en videos interactivos u otro tipo de contenidos.
• Quiz: crea un cuestionario con varios tipos de preguntas (selectores simples y múltiples, arrastrar y soltar)
• Responder preguntas a través del micrófono.
• Summary: cuestionario resumen de ideas clave sobre un tema.
• Linea temporal: crea una linea temporal con contenido html5 educativo.
• Verdadero o falso: cuestionario para responder preguntas de este tipo.
• Tour virtual 360: crea contenidos panorámicos 360 con puntos de información.

¿Qué plataformas son compatibles con H5P?

En 2020, la tecnología H5P es compatible con las siguientes plataformas educativas y CMS:

• Canvas.
• Blackboard.
• Brightspace.
• Moodle.
• Drupal.
• WordPress.

Requisitos del hosting (PHP)

Normalmente, casi cualquier hosting de calidad que se precie (por ej, Raiola Networks), será 100% compatible con H5P.

Sin embargo, hay una serie de extensiones PHP – módulos que añaden funcionalidades extra al entorno PHP – que sí son obligatorias y son las siguientes:

• ZipArchive (Obligatorio).
• mbstring (Obligatorio).
• openssl (opcional).

Para comprobar si están instaladas, puedes consultarle a tus proveedores de alojamiento o hacerlo tú mismo si dispones de un panel de control como por ejemplo, cPanel: solo tienes que ir “Seleccionar Versión PHP” y luego, a extensiones para activar las necesarias:

Aunque no debes preocuparte por todo esto demasiado. Como veremos más durante el proceso de instalación, te H5P te arrojaría un error durante la instalación si no los tuvieses instalados. Seguro que la empresa de hosting te ayudaría a resolverlo fácilmente.

Plugin H5P para WordPress: tutorial en español

Como ya he mencionado, existe un plugin H5P para WordPress. Eso significa que incorporar contenidos enriquecidos html5 en este CMS es realmente fácil. Así que vamos con un tutorial para introducir tu primer video interactivo en WordPress con H5P:

Instalación de H5P en WordPress.

En primer lugar, tienes que ir a tu Escritorio de WordPress > Plugins > Añadir nuevo y buscar “H5P”. Una vez localizado, instalar y activar:

Configuración del plugin H5P para WordPress.

Una vez activado, vamos a configurar algunos parámetros de la configuración del plugin. Para eso puedes ir a Ajustes > H5P y dejamos la pantalla tal que así:

Si el máximo tamaño permitido de subida de archivos no corresponde con el tamaño máximo de POST size, te mostrará esta advertencia. No es un error. Este mensaje es una advertencia de que ambos valores deberían coincidir. Si quieres corregirlo, puedes hablar con tu proveedor de alojamiento para que lo solucionen.

Guardar los cambios y listo.

Crear nuevo contenido en H5P.

Ahora pasamos a crear nuestro primer contenido multimedia en H5P. Para eso, vamos a la barra lateral del escritorio, H5P > Añadir Nuevo. Puede que nos salga una advertencia de autorización de descarga de contenidos remotos – repositorio de contenedores H5P – y nos vuelva a advertir de la no correspondencia de “max. file size”. Podemos avanzar e ignorarlos (por el momento).

Si hemos seguido los pasos de forma correcta – y tu hosting no tiene algún tipo de limitación que impida la ejecución del plugin – deberías ver la siguiente pantalla:

Como puedes ver, existen 2 botones: Uno para “Crear contenido” a partir de contenedores existentes. Otro, para “Subir” nuestro contenedor H5P que, bien hemos podido descargar desde H5P – debes estar registrado – o bien, haberlo programado nosotros mismos – para desarrolladores –. Nosotros eligiremos el primero y descargaremos el tipo de contenido que aparece en primer lugar “Interactive Video”. Para lo cual, tendremos que pulsar en el botón “Obtener”.

Nos llevará a la descripción del contenedor, donde podríamos ver una demo de su funcionamiento y donde verás un botón de “Instalar”.

Pues bien, es aquí, donde te darás cuenta de si tu hosting es capaz de instalar el módulo externo y que está relacionado con las advertencias anteriormente mencionadas. Si ves que tarda más de uno o dos minutos, entonces tenemos un pequeño problema… con solución. No obstante, prueba a refrescar la página – F5 – varias veces antes de llegar al siguiente punto. En caso de que no veas que se haya descargado, tendrás que:

1. Solucionar todas las posibles incidencias anteriormente mencionadas con tus proveedores de hosting.También puedes escribirnos a MundoFunnel y nosotros intermediar con tu proveedor para solucionarlo (si es posible) ya que tenemos una tarifa fija para solución de este tipo de incidencias.
2. Darte de alta en H5P, y crear el video interactivo en su plataforma para luego, descargarlo e importarlo con la opción de “Subir”. La función de exportación de un contenido multimedia se encuentra en el pie de página del contenedor:

El proceso es exactamente igual que si lo hicieses en WordPress pero en la página oficial de H5P.

Configuración del Contenido Video Interactivo H5P

En primer lugar, adjunto una captura de pantalla de los primeros pasos que debes seguir para insertar el video y para qué sirven cada una de las opciones disponibles:

1. El título del video multimedia: encontrarás dos lugares. El primero de ellos, corresponde a la información de metadata – que puedes ampliar haciendo clic en la etiqueta que lleva tal nombre –. el segundo lugar, es el más importante porque corresponde a lo que verá el usuario: título descripción breve y cartel/imagen del contenido a compartir.
2. Subida del video: puedes subir el video directamente a WordPress o adjuntar la url de un video de Youtube o Vimeo.
3. Ajustes de comportamiento: te permiten indicar el tiempo de inicio del video, si se reproducirá en loop, ocultar el “mostrar solución”, permitir o no avanzar o rebobinar, etc.

Una vez adjuntado el video, pasamos a la parte de Agregar interacciones.

En este punto es donde podemos agregar todas las interacciones posibles de las que dispone este contenedor a nuestro video interactivo.

Como podrás observar, existen dos áreas principales: los tipos de interacciones a añadir en la parte superior y la linea de tiempo con los controles de reproducción en la parte inferior.

Añadir elementos interactivos al video H5P

Para añadir una interacción, solo tienes que desplazarte al punto de tiempo donde quieres que aparezca y seguidamente, seleccionar una de la barra superior. Por ejemplo, Single Choice Statement (Test de una respuesta válida). Al hacerlo, nos llevará a una nueva ventana donde configurarlo correctamente:

• Puedes elegir el rango de tiempo en el que estará visible o pausar el video, si quieres que se cuente la puntuación de las respuestas.
• Mostrarás las preguntas como un botón de texto o como imágenes.
• Tendrás que darle un título al cuestionario.
• Podrás crear tantas preguntas con tantas respuestas posibles como quieras. Recuerda que la primera pregunta siempre es la correcta. Pero no te preocupes, ya se encarga H5P de ponerlas en orden aleatorio.

Ahora continuamos con la configuración de feedback global – celebración por rango de preguntas acertadas – y comportamiento del cuestionario.

Con esto, ya podríamos marcar en el botón de color azul que tiene un checkbox y volver al video original para seguir añadiendo contenidos interactivos al video.

Publicación del video interactivo.

Una vez tenemos el video con todas las interacciones listas, podemos pulsar el botón “Crear”. Te mostrará una nueva pantalla donde tienes:

1. Por un lado, el shortcode para insertar el video interactivo en cualquier zona de WordPress que soporte códigos breves: entradas, páginas, cualquier CPT o áreas de widgets.
2. Tendrás un botón de resultados para ver cuáles han sido las respuesta…

… y encontrarás los resultados de participación que, como puedes apreciar, te puedan valer pero son bastante simples:

El motivo de que sean tan simples es que H5P es una herramienta de creación de contenido, no de informes. Incluso demasiado bien que te facilite incluso un informe super sencillo.

Importante: H5P solo registrará la puntuación si el usuario está identificado – del mismo modo que ocurriría con Moodle –.

Sin embargo, aquí vengo con una solución a tus problemas de informes detallados. Especialmente, si trabajas con LearnDash 😉

LearnDash y H5P. ¿Qué debes saber?

Puedo afirmar sin pudor de ningún tipo, que LearnDash es el plugin LMS más versátil, potente y fácil de usar para WordPress. Aunque todavía quedan contenidos por llegar al blog donde hablaremos de otras soluciones, en MundoFunnel, a día de hoy, hemos probado el 80% de las soluciones existentes para WordPress.

Sin embargo, debes saber que LearnDash no es capaz de almacenar la interacción del estudiante con el contenido generado con H5P por defecto.

LearnDash sí puede registrar el progreso de actividad del alumno en cursos, lecciones, temas y quizzes o interacciones – tiempo en sitio, completados, en progreso, no comenzados, puntuación de cuestionarios,… – con sus tipos de contenido aunque NO puede hacerlo de forma nativa con todo lo que sucede dentro de un contenedor o aplicación de H5P.

Aunque sí existe una solución: a través de terceros desarrolladores es posible cuando las necesidades del proyecto lo requieran. Tambien supondrá un coste adicional porque estos complementos son de pago.

Tin Canny Reporting para LearnDash.

Creado por UncannyOwl, Tin Canny Reporting, es una solución en formato plugin que añade potentes herramientas de informe a tu escuela creada con LearnDash. Podrás subir de forma sencilla contenidos creados con Articulate Storyline, Adobe Captivate, iSpring o con la herramienta que tratamos hoy aquí, H5P. Que además, combinado con Uncanny Toolkit Pro, podrás registrar eventos y métricas de tiempo en los informes de resultados de los estudiantes.

Tin Canny Reporting es el único plugin que soporta módulos SCORM e integra Tin Can/xAPI dentro de WordPress.

Esto se traduce que, si las especificaciones de una institución pública o privada te requieren del seguimiento pormenorizado del progreso del alumno, no tendrás que recurrir a ninguna otra costas aplicación de Almacenamiento de Registros de Aprendizaje – del inglés, Learning Records Storage –.

Algunas de las características muy potentes de esta solución:

• No necesitarás tener instalado H5P en tu sitio web y podrás utilizar directamente el creador de contenedores multimedia de la página oficial de H5P; luego, subirlos directamente a través de este plugin para incrustarlos en cursos, lecciones y temas creados con LearnDash.
• Podrás visualizarlos como lightbox o iframes incrustados dentro de tus contenidos de LearnDash.

• Panel de informes avanzado y detallado para analizar el progreso de los estudiantes por grupos, cursos o alumno en particular, tanto para los tipos de contenido de LearnDash como para contenedores Tin Can / xAPI.

• Visualización de los resultados tanto para administradores, como para líderes de grupo y estudiantes en el frontend de tu academia online

Gamificación (bola extra).

Si te sabe a poco las posibilidades que abre H5P en la dinamización de contenidos interactivos de tu web, súmale además la gamificación.

Existen add-on gratuitos disponibles para GamiPress y Mycred que son capaces de detectar los eventos que suceden dentro de los contenedores H5P y así, añadir hitos, logros o puntuación a los perfiles de los estudiantes.

Conclusiones finales.

H5P es solo la punta del iceberg para la creación de contenidos dinámicos e interactivos en HTML5 para tu plataforma de formación digital hecha con WordPress. De hecho, puede que te haya descubierto algún nombre que otro de las grandes apps de autoría de contenidos para e-Learning.

Con H5P casi puedes evaluar las aptitudes de los alumnos de tu escuela o sitio de membresía hecho con WordPress. Bien a través de cursos o dentro de páginas o entradas del blog, H5P es una puerta a un nuevo universo de posibilidades que debes conocer e implementar para mejorar la experiencia educativa digital.

Y por eso, te lo cuento aquí. Gratis. ¡Disfrútalo y compartelo!

(1 votos, promedio: 5,00 de 5)