Audios y videos

Nivel 1 - Introducción

  • Formatos de audios y videos
  • Formatos de audios y videos

    Formatos de audios y videos

    HTML5 es compatible con una variedad de formatos de audio y video, pero no todos los navegadores admiten todos los formatos.

    Formatos de video compatibles con HTML5

    MP4 (H.264 + AAC): El más ampliamente soportado por todos los navegadores modernos (Chrome, Firefox, Edge, Safari); WebM (VP8/VP9 + Vorbis/Opus): Optimizado para la web y de código abierto (Compatible con la mayoría de navegadores modernos); Ogg (Theora + Vorbis): Menos común, pero aún admitido por algunos navegadores como Firefox.

    Formatos de audio compatibles con HTML5

    MP3: Altamente compatible y ampliamente usado; Ogg (Vorbis): Formato libre y abierto, bien soportado; WAV: Alta calidad, pero archivos grandes. Soportado por la mayoría de navegadores.


  • Los audios y videos en el editor DescartesJS
  • Formatos de audios y videos

    Los audios y videos en el editor DescartesJS

    Los objetos interactivos de DescartesJS permiten la inclusión de elementos de audio y vídeo. Estos pueden ser introducidos de varias formas:

    A través de un espacio HTMLiframe que puede llevar incorporado cualquier objeto soportado por una página web, incluidos los elementos de audio y vídeo.

    Mediante un evento que permite reproducir archivos de sonido.

    Utilizando controles de audio y vídeo y sus funciones asociadas. En esta sesión nos centraremos en esta opción.


  • El control tipo audio en DescartesJS
  • El control tipo audio en DescartesJS

    Este control consiste en un reproductor de audio que puede ser activado en el interactivo. Se puede colocar sólo en el interior de un espacio. Reproduce archivos mp3 y wav.

    Configuración

    La posición y el tamaño del reproductor se indican mediante el campo expresión, del tipo (x,y,a,b), en el que los dos primeros datos indican la posición y los dos últimos el ancho y el alto del reproductor.

    En el campo archivo se debe introducir la ruta del fichero de sonido que se desea reproducir.

    Además, al igual que otros controles dispone de los campos: identificador (id), espacio y dibujar-si.

    Funciones asociadas

    Al ser invocadas las siguientes funciones: id.play(), id.stop(), id.pause() e id.currentTime(t), inician, detienen, paran o colocan el reproductor un tiempo determinado respectivamente.


  • El control tipo vídeo en DescartesJS
  • El control tipo vídeo en DescartesJS.

    Este control consiste en un reproductor de video que puede ser activado en el interactivo. Su funcionamiento es muy similar al control de audio. Se utiliza para reproducir archivos con formato mp4, WebM y ogv.

    Configuración

    Es la misma que la del tipo audio. Se debe tener en cuenta que las dimensiones deben ser las adecuadas para introducir un vídeo.

    Tanto en este control como en el de tipo audio se puede incorporar vídeos con una reuta relativa al interactivo o vídeos a través de una dirección de Internet.

    Funciones asociadas

    Son las mismas que las de tipo audio. Estas funciones pueden ser llamadas desde cualquier control, programa o evento.

Nivel 2 - Diseño de vídeos interactivos con el editor DescartesJS

  • Obtención o generación de videos en local
  • Obtención o generación de videos en local

    Reproducir videos en local mediante HTML5 es una práctica común cuando se desea que un sitio web funcione sin depender de una conexión a Internet para acceder al contenido multimedia (como YouTube o Vimeo).

    ✅ Ventajas: Funciona sin conexión a Internet, control total sobre el archivo y su calidad y mejor privacidad (no se conecta a servicios externos).

    ⚠️ Desventajas: Mayor peso del archivo HTML general si se incluyen videos muy pesados.

    Nuestra primera tarea es obtener o generar el video para desarrollar la actividad de este apartado; para ello, observa el video.


  • Actividades interactivas a incluir en el video
  • Actividades interactivas a incluir en el video

    La clave del video interactivo es que transforma al espectador en un participante activo, mejorando el compromiso, la retención de información y la personalización del contenido. Por ejemplo, en un video interactivo educativo, el usuario puede responder preguntas en ciertos momentos.

    En esta segunda parte, el propósito es definir las actividades interactivas que vamos a usar en el video interactivo; para ello, sugerimos usar las plantillas del Proyecto Descartes, tal como se indica en el video (haz clic aquí, para descargar las plantillas, mencionadas en el video).


  • Diseño del video interactivo
  • Diseño del video interactivo

    Es importante recordar que el objetivo del vídeo interactivo es permitir al usuario interactuar con la escena, en la cual el objeto principal es el vídeo. La interacción se realiza a través de preguntas o de la selección de opciones presentadas como botones o puntos gráficos dibujados sobre el vídeo. Esta interacción se logra si sólo se habilitan los controles de vídeo antes mencionados, que sólo permitan al usuario interferir en la reproducción de acuerdo a una intencionalidad didáctica. La comunicación bidireccional escena – HTML posibilita una gran variedad de alternativas o modelos de vídeos interactivos.

    En el video, puedes observar, con detalle, las funciones, variables, espacios, controles y demás elementos del editor DescartesJS, usados para el diseño final del video interactivo.

    A continuación, presentamos el video interactivo obtenido, al cual le hemos puesto un texto con el tiempo transcurrido y la línea de tiempo con marcas indicando dónde se presentarán las actividades.

Nivel 3. Diseño de vídeos interactivos con IA

  • Plantillas para videos interactivos
  • imagen o interactivo

    Un libro guía para diseñar video interactivos

    En un mundo donde la tecnología avanza a pasos agigantados, la inteligencia artificial (IA) se ha convertido en una herramienta esencial para la educación y la creación de contenidos, entre ellos los videos interactivos. En el libro "Plantillas para libros con inteligencia artificial, se presentan plantillas sencillas de utilizar, las cuales nos permiten generar videos interactivos. Obviamente, es necesario que tengas definido el video, bien sea de YouTube o un video en local, además de las preguntas a incluir en el video.

    A continuación, presentamos dos modelos para diseñar videos interactivos. En cada modelo puedes copiar el código intervenido y usar en cualquier sitio web. Es importante que mires las instrucciones, para usar la plantilla de cada modelo.

    Es cierto que estos modelos, obtenidos por IA, son más sencillos de usar que los desarrollados con el editor DescartesJS; sin embargo, están limitados a presentar cuestionarios, mientras que con DescartesJS podemos tener una mayor variedad de escenas interactivas.


  • Videos interactivos YouTube
  • Videos interactivos YouTube

    En este primer modelo, es posible incluir preguntas de tipo falso o verdadero y del tipo de selección múltiple. Para el ejemplo, hemos usado tres preguntas, la primera de falso verdadero, las otras dos de selección múltiple.

    Presta atención a las instrucciones que presenta la siguiente plantilla de edición HTMl5, en las cuales podemos comprender cómo cambiar el video; cambiar, quitar o agregar preguntas, y cambiar la relación de aspecto del video (16:9, 9:16, 1:1, etc.)


  • Videos interactivos en local
  • Videos interactivos en local

    La única diferencia de estos modelos con los anteriores, es la fuente del video, que es en local y en formato compatible con HTML5 (mp4, ogg, WebM, etc.).


    TAREA 7

    Video interactivo. Usa tu creatividad y diseña un video interactivo con, al menos, tres paradas para intereactuar con escenas interactivas. Usa el modelo que quieras.

    ¡Sube la solución de los dos problemas en una carpeta llamada "Tarea 7"!

Mi segundo OIA con IA - parte 3

  • Chatbot con personalidad
  • Continuamos el segundo proyecto de aula, incluyendo en nuestro chatbot el texto en modo HTML, el cual nos permite ver la respuesta con el estilo HTML que queramos. Usamos scripts para incorporar los archivos de personalidad, de tal forma que sean capturadas en el navegador. Aprovechando la función parent.set('var', var), generamos el historial de las conversaciones con el chatbot.

    En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas mejoras.