H5P

Empleo de Recursos Multimedia para la Educación

1. Introducción al empleo de Recursos Multimedia para la Educación

H5P en el desarrollo de Recursos Multimedia para la Educación

2. Implementación de Recursos Multimedia en cursos ICC

Receso (15 Min.)

3. Exploración e integración de H5P

Receso (15 Min.)

4. Recapitulación y Cierre

Test

1.1 Qué son

Herramientas que utilizamos para enriquecer los procesos de enseñanza y aprendizaje a través de la combinación de diferentes tipos de medios, como texto, imagen, audio y video. Estos elementos se utilizan de manera integrada para transmitir información en forma eficiente y atractiva.

1.2 Características

Multisensoriales

Interactivos

Personalizables

Accesibles

1.4 Importancia de su empleo en la educación

1.3 Tipos

Presentaciones multimedia

Videos educativos

Mayor retención de información

Aprendizaje más atractivo

Simulaciones y juegos educativos

Ventajas:

Infografías

Adaptación a diferentes estilos de aprendizaje

Facilita el aprendizaje a distancia

2. Implementación de Recursos Multimedia en cursos ICC

2.1 Aspectos metodológicos.

La construcción de una experiencia de aprendizaje en línea requiere de un diseño instruccional, que es un proceso sistemático y debe atender determinadas fases, etapas, pasos, procedimientos y criterios que le permitan la construcción de planes, proyectos, guiones, documentos y materiales que “se llevan a cabo bajo procedimientos estandarizados” Serrano y Pons (2008).

Dimensión pedagógica

Características del alumno

AspectosDI

Características del contenido

Dimensión tecnológica

Objetivos de la acción formativa

Figura. Aspecto de diseño instruccional.

2.1 Aspectos metodológicos.

2.1.1 Modelo de diseño instruccional ADDIE.

El diseño instruccional consiste en planear una experiencia educativa contemplando una serie de elementos y procesos que se consideran indispensables para alcanzar los propósitos establecidos en un programa de estudios: valoración de necesidades, desarrollo, implementación evaluación, así como el mantenimiento de materiales y programas. Espinal, Garza, Beltrán, Marcué y Salinas (2019) reconocen que: hay variedad de modelos de diseño instruccional, sin embargo, la mayoría de ellos se circunscriben a uno en particular: el modelo genérico ADDIE (Análisis, Diseño, Desarrollo, Implementación y Evaluación) válido para cualquier contexto educativo, sea o no basado en las tecnologías de la información y comunicación (TIC). (2019)

Figura. Fases de diseño instruccional.

2.1 Aspectos metodológicos.

2.1.2 Células de Desarrollo Multidisciplinarias e Hipermedia (CDMH).

De acuerdo con Lonngi (2009), “una célula de desarrollo es una entidad viva, que desarrolla, produce y crea soluciones, recursos y materiales aplicados al proceso educativo en sus tres momentos: La enseñanza, el aprendizaje y la instrucción”. Tomando como punto de partida el Manual de Operatividad de Células de Desarrollo Multidisciplinarias e Hipermedia de Lonngi (2009), los actores componentes de la célula de producción en ICC se desarrollan de la siguiente manera:

Figura. Células de producción ICC.

2.2 Fases de implementación.

Retomando el modelo de desarrollo a través de Célula de Producción Multimedia e Hipermedia, la responsabilidad de esta fase recae sobre el Diseñador Informático, cuya función será programar, integrar, alojar y vincular los materiales educativos digitales para garantizar su correcto funcionamiento y acceso en la plataforma educativa virtual.

Figura. Procedimiento del diseño informático en la fase de implementación.

2.3 Herramientas para la elaboración de recursos multimedia.

Tipo

Aplicación

URL de referencia

Issuu Slides Genially

http://issuu.comhttps://slides.com/https://genial.ly/es/

Presentaciones

En la siguiente lista se presentan algunas herramientas digitales que pueden ser de gran ayuda para creación de recursos educativos multimedia.

https://bubbl.us http://www.mindmeister.com/es

Bubbl.us Mindmeister

Mapas mentales

https://www.educaplay.com https://www.quizalize.com/ https://docs.google.com/forms

Educaplay Quizalize Forms

Test

pngwing Iconos8 pixabay

https://www.pngwing.com/es https://iconos8.es/ https://pixabay.com/es/

Repositorio de imágenes

http://vimeo.com/es/ http://www.powtoon.com//home/es/ http://animoto.com

Vimeo Powtoon Animoto

Videos, comics y animaciones

Exelearning Xerte JClic Articulate

https://exelearning.net. https://xerte.org.uk/index.php/en/ https://clic.xtec.cat/legacy/es/jclic/ https://articulate.com/

Integradores de contenido.

2.4 Ejemplificación de un curso en ICC.

Curso del componente básico de los programas de licenciatura, inglés 1.

Figura. ejemplo de curso en ICC.

3.1 Introducción a H5P.

Es un complemento Web compatible con varios Sistemas de Gestión de Aprendizaje (LMS) que permite la creación de contenido enriquecido y experiencias interactivas de aprendizaje, funciona de manera responsiva en diferentes dispositivos moviles. H5P es un marco de trabajo colaborativo de contenido libre y de fuente abierta basado en Javascript.

LMS Compatibles

3.1.1 Versiones de H5P

• H5P.org (https://h5p.org/) es la plataforma libre.
• H5P.com (https://h5p.com/) es la plataforma de pago.

Principales diferencias funcionales entre h5p.org y h5p.com.

Descripción funcionalidad

H5P.org

H5P.com

8 MB

100 MB

Límite de subida de ficheros

Entorno premium para crear, compartir y reutilizar contenido interactivo.

Permite que los usuarios prueben H5P antes de instalarlo en su propio sitio web.

Propósito

Público

Definido por el usuario

Visibilidad del contenido

Si

No

Usuarios múltiples por cuenta

No (sólo por un usuario).

Si (el contenido se puede compartir con la organización o con coautores específicos).

Repositorio interno de contenido

3.2 Demostración en línea: Cómo crear contenido interactivo utilizando H5P.

3.2.1 Entorno de trabajo.

El entorno de trabajo principal de H5P se puede definir como un editor de contenido muy intuitivo, que según el tipo de ejercicio nos permitirá más o menos opciones. A continuación, el panel de búsqueda:

La interfaz de trabajo de las actividadesEl esquema del entorno indica el conjunto de elementos y funcionalidades con las que nos encontramos en la interfaz de trabajo.

Interfaz de trabajo del tipo de ejercicio True/False

3.2.2 Tipos de ejercicios H5P

A continuación, se explican los distintos tipos de contenidos, es importante entender una pequeña clasificación que ayudará a su manejo posterior. La herramienta H5P te brinda múltiples posibilidades para incorporar y adaptar actividades informativas, multimedia, de gamificación e integración, y de evaluación.

Acordeón (Accordion)

Yustaposición de imagenes (Image Juxtaposition)

Image slider

Speak the words

Secuencia de imagenes (Agamotto)

Ensayo

Presentación del curso (Course presentation)

Audio recorder

Chart

Emparejamiento de imágenes

Decir el conjunto de palabras

Rellenar espacios en blanco

Conjunto de elección única

Video interactivo (Interactive Video)

Collage

Arrastrar y soltar (Drag and drop)

Vista en 360 grados

Marca las palabras

Tipos de contenidos

Dialog Cards

Encontrar la imagen

Quiz aritmetico

Preguntas de opción multiple

Guess the answer

Encontrar las imágenes

Dictado

Preguntas de falso y verdadero

Resumen

Image hotspot

Tarjeta flash

Arrastrar y soltar

3.3 Implementando H5P en Moodle.

Explicaremos estas opciones de manera práctica:

• Cómo integrar y embeber recursos de H5P en Moodle.
• Exportar o descargar el contenido H5P
• Importar o subir el contenido H5P

3.3.1 Mejores prácticas para optimizar la experiencia de aprendizaje.

• Acceso a muchos tipos de contenido interactivo
• Compartir y reutilizar contenido
• Adaptabilidad a dispositivos móviles
• Contenido enriquecido
• Uso libre

Ejercicio práctico

Arrastrar las palabras

Tipo de actividad: Multimedia

Permite a los diseñadores de contenido crear expresiones textuales en las que faltan fragmentos de texto. Las y los estudiantes arrastran un fragmento de texto faltante a su lugar correcto para formar una expresión completa. Se puede utilizarse para comprobar si el usuario recuerda un texto que ha leido o comprende algo.

Ejemplo: Arrastrar las palabras

Agamotto

Tipo de actividad: Informativa

Puedes usar Agamotto para cualquier tipo de contenido en el que desee mostrar varias imágenes secuenciales.

Ejemplo: Agamotto

2. Programación de plantilla de interfaz En esta etapa se enfatiza la idea de que todo curso debe encontrarse alineado a la identidad gráfica institucional. Esta etapa es realizada en trabajo colaborativo con diseño gráfico.

Figura 5. Plantillas para interfaz.

Marca las palabras

Tipo de actividad: Multimedia

Permite crear expresiones textuales con un conjunto definido de palabras correctas. Las y los estudiantes destacan las palabras de acuerdo con la descripción de la tarea y se les asigna una puntuación.

Ejemplo: Marca las palabras

Grabación de audio

Tipo de actividad: Multimedia

Permite grabar la voz y reproducirla inmediatamente o descargar un archivo .wav para uso futuro. Es un tipo de contenido apropiado para preguntas abiertas y cursos de idiomas.

Ejemplo: Grabación de audio

Dictado

Tipo de actividad: Multimedia

Permite agregar dos audios distintos y una palabra o frase la cual se verifica palabra por palabra de acuerdo a lo que capture el usuario al escuchar los audios, ideal para el aprendizaje de idiomas.

Ejemplo: Dictado

Preguntas de falso y verdadero

Tipo de actividad: Formativa

Es ideal para preguntas que solo tienen respuestas falso y verdadero.

Ejemplo: Falso y verdadero

1. Introducción al Empleo de Recursos Multimedia para la Educación

1.1 Qué son. 1.2 Características. 1.3 Tipos. 1.4 Importancia de su empleo en la educación. 1.4.1 Ejemplos de cómo los recursos multimedia pueden enriquecer el aprendizaje.

Find the hostpot

Tipo de actividad: Multimedia

Permite a los usuarios presionar en alguna parte de una imagen y obtener comentarios sobre si eso era correcto e incorrecto de acuerdo con la descripción de la tarea. El autor sube una imagen y define varios hotspot correspondientes a detalles o secciones de la imagen.

Ejemplo: Image hostpot

6. Direccionamiento de elementos en plataforma a través de iframe. El siguiente paso será direccionar cada elemento alojado en el servidor, este proceso se puede realizar a través la etiqueta HTML iframe o de los recursos que brinda Moodle.

Ejemplo iframe Youtube

Ejemplo iframe Genially

<iframe title="Inglés-1-módulo1" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/6511c1822f7ed0001c496849" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/g8waX1CX1XU?si=-kmJtV9qsNdc43Ev" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Fase de diseño El Diseño es considerado el segundo peldaño del Modelo ADDIE, aquí se va a dar forma a cada curso. En esta etapa del diseño instruccional es fundamental que se contemple:

• Los objetivos de la unidad o módulo.
• Las distintas etapas de evaluación.
• Los medios y sistemas de los que se dispone para hacer llegar la información.
• El enfoque didáctico.
• El orden que seguirán los contenidos a desarrollar.
• Las actividades de aprendizaje que el alumno desarrollará.

Dialog cards

Tipo de actividad: Informativa

Se puede usar para ayudar al estudiante a memorizar palabras, expresiones u oraciones. Se utilizan a menudo en el aprendizaje de idiomas para explorar palabras y expresiones. También se utiliza para presentar problemas matemáticos o ayudar a memorizar eventos historicos, formulas o nombres.

Ejemplo: Dialog cards

Yustaposición de imagenes

Tipo de actividades: Informativa

Con esta herramienta, se puede comparar dos imágenes del tipo antes/despúes o día/noche, poniendo una sobre otra, revelando las vistas con un control deslizante.

Ejemplo: Image-juxtaposition

Presentación de imágenes

Tipo de actividad: Informativa

Esta herramienta te permite crear una galería de imágenes.

Ejemplo: Presentación de imágenes

Tarjeta flash

Tipo de actividad: Multimedia

Esta herramienta te permite crear un conjunto de tarjetas que contienen una oración, pregunta, imagen o cuadro de texto donde se le pide al estudiante que escriba una palabra o expresión correspondiente a la imagen y un botón para verificar si la respuesta es correcta. Se pueden utilizar como ejercicio para ayudar a las y los estudiantes a memorizar palabras, expresiones u oraciones.

Ejemplo: Flash Card

Fase de desarrollo El propósito del tercer momento del Modelo ADDIE, el Desarrollo, radica en la generación y validación de los recursos de aprendizaje que se emplearán durante todos los módulos de instrucción, desde la programación de páginas Web, los recursos multimedia, así como los manuales o tutoriales para alumnos o docentes. Para su elaboración deberá contemplar los siguientes aspectos:

• La secuencia de contenido para el desarrollo de los temas que se incluye en el programa de estudios
• Los objetivos de enseñanza y el propósito particular.
• Las temáticas de la materia serán estructuradas y organizadas para facilitar el aprendizaje de los estudiantes.
• La importancia de utilizar todos los recursos que brindan las tecnologias de la información, comunicación, conocimiento y aprendizaje digital (TICCAD) para que los materiales resulten interesantes, accesibles y lúdicos en el desarrollo de las competencias propias delcurso.
• La diversidad de medios didácticos que puede utilizar para el desarrollo de contenidos: textos escritos, diagramas, imágenes, mapas, esquemas, entre otros. Así como los que proporciona la tecnología: hipertextos, videos, audios, hipervínculos, presentaciones, mapas sensibles o podcasts, por mencionar algunos.

Preguntas de opción multiple

Tipos de actividad: Formativa

Se pueden utilizar para probar habilidades bien definidas relacionadas con un tema relacionado. Puede ser configurado para brindar retroalimentación inmediata. Las preguntas de opción multiple puede tener una o varias opciones correctas por pregunta.

Ejemplo: Preguntas de opción multiple

Quiz aritmetico

Tipo de actividad: Multimedia

Es perfecto para crear cuestionarios rápidos a fin de probar las habilidades en operaciones aritméticas básicas o en ecuaciones lineales.

Ejemplo: Quiz aritmetico

Image hotspot

Tipo de actividad: Informativa

Permite establecer una imagen de fondo y colocar varios hotspot o puntos de acceso, los cuales tiene función de abrir ventana emergentes con información sobre cada uno de los puntos o de la imagen en general

Ejemplo: Image hotspot

Vista en 360 grados

Tipos de actividad: Multimedia

Se emplea para presentar imágenes en 360 grados.

Ejemplo: Vista en 360 grados

7. Liberación del curso. Finalmente, el curso se comparte con el equipo de trabajo para su valoración. Es importante señalar que se trata de un proceso recursivo en el cual, a partir de los resultados que arroje la revisión del diseño instruccional, suelen solicitarse ajustes en la programación.

3. Exploración e integración de H5P

3.1 Introducción a H5P. 3.2 Demostración en línea: Cómo crear contenido interactivo utilizando H5P. 3.3 Implementando H5P en Moodle.

3.3.1 Cómo integrar y embeber recursos de H5P en Moodle. 3.3.2 Mejores prácticas para optimizar la experiencia de aprendizaje. Ejercicio práctico

Lorem ipsum dolor sit

3. Identificación y generación de recursos multimedia Durante esta etapa se identifican y desarrollan los recursos multimedia que serán utilizados en el curso (imágenes, audios, videos).

Arrastrar y soltar

Tipo de actividad: Multimedia

Te permite crear elementos para arrastrar y soltar utilizando texto o imagenes. Esta actividad permite asociar dos o mas elemento y hacer conexiones lógicas de forma visual.

Ejemplo: Arrastrar y soltar

2. Implementación de Recursos Multimedia en cursos ICC

2.1 Aspectos metodológicos. 2.2.1 Modelo de diseño instruccional ADDIE. 2.2.2 Células de Desarrollo Multidisciplinarias e Hipermedia (CDMH). 2.2 Fases de implementación. 2.3 Herramientas para la elaboración de recursos multimedia. 2.4 Ejemplificación de un curso en ICC

Guess the answer

Tipo de actividad: Informativa

Permite cargar una imagen o video, y agregar una descripción. Los usuarios, con base en lo presentado, tiene que deducir o recordar la respuesta y presionar la barra en la parte de abajo para verificar si la solución es correcta.

Ejemplo: Guess the answer

Collage

Tipo de actividad: Informativa

Esta herramienta posibilita la creación de composiciones entre una y seis imágenes, seleccionando entre 11 acomodos diferentes.

Ejemplo: Collage

Ensayo

Tipo de información: Multimedia

Se puede utilizar para varios tipos de ejercicios, por ejemplo, para realizar el resumen de un libro, tesis, artículo, entre otros. Ademas se puede definir algunas palabras clave a las que darán puntos o comentarios si las o los estudiantes las mencionan en su respuesta.

Ejemplo: Ensayo

Fase de implementación Es la fase del modelo ADDIE donde se concreta el diseño instruccional conectando todos los elementos del plan de aprendizaje y consiste en integrar los materiales diseñados y desarrollados a la plataforma educativa MOODLE.

• Generación de maquetas.
• Creación de los recurso educativos multimedia.
• Integración de los recursos educativos en plataforma educativa.
• Configuración de los recursos para su perfecta convivencia con la plataforma educativa.
• Liberación.

PRESENTACIÓN

Tipo de actividad: Gamificación e integración

Uso: Presentar la información en cantidades reducidas, los lectores deciden que titulares mirar de cerca expandiendo el título. Es de gran ayuda para proporcionar una descripción general con explicaciones detalladas opcionales.

Presentación

• Ejemplo:

Fase de evaluación La evaluación es considerada una etapa fundamental en el modelo al permitir la valoración de la calidad no sólo de los productos, sino de los procesos de enseñanza y aprendizaje involucrados antes y después de la implementación.

• Desarrollo de pruebas para medir los estándares instruccionales
• Implantación de pruebas y evaluaciones
• Evaluación continua.
• Desarrollo de evaluación formativa y sumativa para emitir un juicio de la efectividad de la instrucción

Rellenar espacios en blanco

Tipo de actividad: Multimedia

Con esta actividad se evalúa la capacidad de las y los estudiantes para comprender el texto, el vocabulario o los conceptos gramaticales con el fin de integrar correctamente los fragmentos de texto que faltan.

Ejemplo: Rellenar espacios en blanco

Encontrar las imágenes

Tipo de actividad: Multimedia

Esta actividad consisite en dar varios clics sobre una imagen y localizar varias respuestas correctas. Para esto se definen varios hotspot correspondientes a detalles o secciones de la imagen y se definen como correctas o incorrectas, y se define el número de objetos que se debe de encontrar.

Ejemplo: Find multiple host

5. Alojamiento y estructura del curso en plataforma Este proceso se lleva a cabo a través de conexión remota al servidor de alojamiento mediante el protocolo FTP y una vez que los contenidos se encuentran alojados en el servidor Web, se procede a diseñar la estructura sobre plataforma educativa Moodle.

Video interactivo

Tipo de actividad: Gamificación e integración

Son perfectos cuando ya se tiene un videoclip que se desea enriqueser con elementos interactivos.

Ejemplo: Video Interactivo

Conjunto de elección única

Tipo de actividad: Informativa

Permite crear cuestionarios sencillos y fluidos que constan de preguntas con una sola opción correcta.

Ejemplo: Elección única

Fase de análisis Consiste en evaluar las condiciones contextuales y las necesidades conceptuales, procedimentales y actitudinales del grupo de estudiantes con el que se va a trabajar. Producto de esta primera etapa:

• Las metas de desarrollo que se persiguen y la delimitación temporal para su cumplimiento.
• Los recursos humanos y técnicos disponibles.
• Las necesidades de expertos en los diferentes campos de conocimiento, afines a cada proyecto a desarrollar.
• La asignación de actividades a cada elemento de la célula de producción.
• La capacitación y coordinación de desarrolladores externos en caso necesario.
• La organización y seguimiento de los procesos en el desarrollo.
• Los medios y líneas de comunicación.

4. Programación de elementos del curso En esta etapa se realiza la elaboración de contenidos, algunas herramientas utilizadas para el diseño informático en el ICC son H5P, eXeLearning, Genially.

Recepción de curso Implica la solicitud de programación del material educativo, en la que se integra la información resultante de la fase de diseño y desarrollo.

Figura 4. Carpeta contenedora.

Arrastrar las palabras

Tipo de actividad: Multimedia

Permite a los diseñadores de contenido crear expresiones textuales en las que faltan fragmentos de texto. Las y los estudiantes arrastran un fragmento de texto faltante a su lugar correcto para formar una expresión completa. Se puede utilizarse para comprobar si el usuario recuerda un texto que ha leido o comprende algo.

Ejemplo: Arrastrar las palabras

Emparejamiento de imágenes

Tipo de actividad: Multimedia

Permite agregar una secuencia de imágenes (y descripción) en un orden particular. Al iniciar, el orden de las imágenes será aleatorio y las y los estudiante deberán re-ordenarlas según la descripción de la actividad.

Ejemplo: Secuencia de imágenes

Decir las palabras

Tipo de actividad: Multimedia

Permite crear una pregunta y definir varias respuestas posibles. La herramienta graba la respuesta de las y los estudiantes y procesa el audio para compararlo con el de las posibles respuestas.

Ejemplo: Decir palabras

Chart

Tipo de actividad: Informativa

Presenta datos estadisticos simples sin tener que crear los gráficos manualmente.

Permite:

• Seleccionar entre la vista de gráfico de barras y circular.
• Agregar etiqueta y valor a cada elemento de datos.
• Seleccionar el fondo y color de la fuente de cada elemento de datos.

Ejemplo: Chart

Accordion

Tipo de actividad: Informativa

Uso: Presentar la información en cantidades reducidas, los lectores deciden que titulares mirar de cerca expandiendo el título. Es de gran ayuda para proporcionar una descripción general con explicaciones detalladas opcionales.

Acordeón: Accordion

• Ejemplo:

Decir el conjunto de palabras

Tipo de actividad: Multimedia

Esta herramienta permite crear conjuntos de preguntas que son respondidas por la propia voz del usuario. La herramienta graba la respuesta de la o el estudiante y procesa el audio para compararlo con las posibles respuestas establecidas.

Ejemplo: Decir el conjunto de palabras