Sonido, animación y video

Un material educativo digital puede contener elementos multimedia como son el sonido, animación y video. El sonido es un elemento multimedia, que ha tenido un gran desarrollo con los diversos sitios web que presentan archivos musicales para ello es necesario reconocer el formato estándar conocido como mp3, el archivo de sonido debe ser editado y preparado, se procede a insertarlo por medio de la etiqueta <embed> y configurar su reproducción por medio de algunos parámetros. Una de las ventajas del formato musical mp3 es el tamaño reducido (Alloza y Beltrán, 2014, pp. 269 - 285).

Insertar sonido, animación y video, utilizando etiquetas y el software de Dreamweaver CS6

A continuación se describe a detalle en las actividades de aprendizaje, los procedimientos para insertar en una página web los elementos multimedia: sonido, animación y video.

Actividad de  aprendizaje 5

Sonido, animación y video en una  página web

Una parte importante en el diseño de una página web es lo relacionado con la multimedia, es decir sonido, animación y video, con respecto a música existe el formato mp3. En lo referente a las animaciones en formato swf, provenientes del software Flash CS6, se observa el poco soporte que tiene esta aplicación en la actualidad. Con respecto al video hoy en día se trabaja la extensión mp4.

La actividad de aprendizaje 5 consiste en insertar  un archivo de sonido mp3 empleando las etiquetas del lenguaje html. Además insertar una  animación swf   y un  video mp4 en  una  página web utilizando   Dreamweaver CS6.

Actividad de  aprendizaje 5  parte 1

Inserción de sonido como fondo

En esta sección se inserta música previamente preparada en un archivo con formato mp3, la melodía se encuentra en un archivo que tiene por nombre portada.mp3, cuyo objetivo es reproducir al momento de abrir la página web. La inserción se realiza a través de las etiquetas html en la vista código de Dreamweaver CS6.

En el video 52 se detalla el procedimiento para insertar el archivo de  sonido (portada.mp3), de tal manera que se  reproduzca al iniciar  el archivo portada.htm,  por medio de etiquetas html, en la vista código de Dreamweaver CS6.

Video 52. Insertar un sonido de fondo en el archivo portada.htm empleando etiquetas html.

Inserción de sonido como fondo

Actividad de  aprendizaje 5 parte 2

Inserción de un sonido de fondo a través de etiquetas

Continuar con la actividad de aprendizaje, realizar el procedimiento para insertar un sonido de  fondo de la página web a  cada taller de la escuela, utilizando  la  vista código de Dreamweaver CS6. De acuerdo a la  tabla 5 que indica la distribución del archivo de  sonido  que se incrusta a cada especialidad:

Tabla 5. Relación del archivo de sonido de fondo para cada carrera.

En el video 53 se describe el procedimiento para la inserción de un sonido previamente trabajado para cada taller de la unidad académica.

Video 53. Insertar un sonido de fondo a las especialidades empleando etiquetas html.

Inserción de un sonido de fondo a través de etiquetas

Actividad de  aprendizaje 5 parte 3

Inserción de una animación

En esta actividad de aprendizaje se debe trabajar en el archivo de presentacion.htm, el cual muestra la fortaleza y distinción de la unidad académica al resaltar los talleres por medio una animación y video.

En el video 54 se distingue el procedimiento para insertar en el  archivo de  presentacion.htm una  animación referente a la unidad académica, la  animación  fue  creada  en el  software   Flash y tiene por nombre presentacion.swf, se encuentra localizada en la carpeta denominada animacion y se incrusta utilizando  la  vista  diseño de Dreamweaver CS6.

Video 54. Insertar una animación en el archivo presentacion.htm empleando el software Dreamweaver CS6.

Inserción de una animación

Actividad de aprendizaje 5 parte 4

Manejo de video

Un aspecto importante en el diseño web es el trabajo con video, es agradable observar una película y más si se trata de algo académico elaborado por los propios docentes y estudiantes, insertar un pequeño video para aprender su manipulación dentro del campo de la tecnología web.

En el video 55 se describe el procedimiento para incrustar  en el  archivo de  presentacion.htm una película relacionada con los  talleres de la escuela  tiene por nombre presentacion.mp4, se debe insertar empleando  la  vista   diseño de Dreamweaver CS6.

Video 55. Insertar un video en el archivo presentacion.htm empleando el software Dreamweaver CS6.

Manejo de video