1. Introducción

Cada vez es más habitual además de incluir imágenes en nuestras páginas web incluir otro tipo de elementos multimedia como vídeos, sonidos,...

Desde KompoZer también podemos incluir estos elementos de una manera fácil.

2. Insertar un vídeo

A la hora de insertar un vídeo tenemos dos opciones:

• Que el vídeo esté colgado en internet en un portal de vídeos que permite compartirlos. Vídeo externo.
• Que tengamos el vídeo en nuestro ordenador y que lo queramos inluir en la web independientemente. Vídeo local.

Vamos a ver las dos opciones:

2.1. Inserción de vídeos externos

Hay muchas sitios web que permiten visualizar vídeos y que al mismo tiempo permiten compartirlos, el más utilizado en YouTube, pero hay otros como Dalealplay, Dailymotion...Incluir uno de estos vídeos en nuestra web es muy sencillo.

Insertar un recurso externo en nuestra página web tiene muchas ventajas:

• No ocuparemos el espacio de nuestro servidor, ni consumiremos nuestro ancho de banda; el recurso estará alojado en todo momento en el otro servidor.
• Estos servidores especializados suelen proporcionar más velocidad de descarga que el nuestro propio, por lo que en el caso de vídeos se reproducirán de forma más fluida.
• Cualquier cambio o actualización en el recurso se mostrará inmediatamente en nuestra página, sin necesidad de cambios.

Esto último es el único inconveniente de este método: que en cualquier momento, de forma unilateral, el propietario del material puede optar por cambiarlo o retirarlo, con lo que perderíamos el acceso. No obstante, si somos los propietarios, esto deja de ser un inconveniente.

Técnicamente lo que hacemos es similar a crear una pequeña ventana dentro de nuestra página web, para que en su interior se muestre un material que está alojado en otro servidor. Nosotros sólo tendremos que copiar y pegar el código HTML que genere el servidor que comparte el vídeo.

• Primero abrimos KompoZer y creamos un nuevo archivo llamado multimedia.html donde iremos insertando los distintos elementos de esta unidad. Como título a la hora de guardarlo ponemos "Multimedia".
• Vamos a insertar un video de Youtube en nuestra página. Escribimos "Vídeo de YouTube" en nuestro documento.
• Accedemos a Youtube y seleccionamos un vídeo que nos guste.
• Hacemos clic en el botón Compartir. La dirección que aparece se puede emplear en diferentes sitios, como blogs, herramientas sociales,etc.
• Nosotros hacemos clic en el botón Insertar que aparece más abajo.
• Podemos elegir el tamaño del vídeo que se va a insertar, nosotros hemos elegido 250x141 píxeles.
• Finalmente copiamos el pequeño código HTML que se despliega; será similar a esto:

<iframe width="250" height="141" src="http://www.youtube.com/embed/mg91_trV4hY?list=UUK8sQmJ Bp8GCxrOtXWBpyEA&amp;hl=es_ES" frameborder="0" allowfullscreen></iframe>

• El siguiente paso es pegarlo en nuestra web. Accedemos al menú Insertar→HTML y en el cuadro de diálogo que se abre pegamos el código y hacemos clic en Insertar.

• Guardamos los cambios.
• El resultado final es el siguiente:

• Se ve un cuadro negro, pero si lo intentamos ver desde el navegador (imagen de la derecha) veremos que nuestro vídeo sí que aparece.

Así de sencillo es insertar un vídeo externo en nuestra web.

2.2. Inserción de vídeo local

Otra opción es insertar un vídeo que tengamos en nuestro ordenador. Vamos a explicarlo pero no lo practicaremos porque prácticamente nunca se hace ya que se suele insertar vídeos de servidores externos.

El funcionamiento es similar al anterior, una vez tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el menú Insertar→HTML y en el cuadro de diálogo que se abre escribir el código siguiente:

<video src="video/fireworks_reducido.mp4"></video>

Donde "video/fireworks_reducido.webm" es la ruta al vídeo que queremos mostrar

La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, está colocado dentro de una carpeta llamada video).

El ejemplo anterior no se vería correctamente en Internet Explorer porque no soporta el formato de video seleccionado, para esto la etiqueta video ofrece una solución alternativa, para evitar estos inconvenientes de formatos, que consiste en ofrecer el vídeo en varios formatos, para que sea el propio navegador el que muestre el más adecuado.

La etiqueta se escribiría de la siguiente manera:

<video>
<source src="video/fireworks_reducido.mp4" type="video/mp4" />
<source src="video/fireworks_reducido.ogg" type="video/ogg" />
<source src="video/fireworks_reducido.webm" type="video/webm" />
</video>

Este ejemplo concreto se reproduciría perfectamente en la mayor parte de los navegadores actuales.

<video src="video/fireworks_reducido.webm" width="300" height="208"></video>

Los valores que emplearemos serán los que utilizamos al crear el vídeo.

3. Insertar audio

La gestión de audio para utilizarlo en Internet es similar a la que hacemos con el vídeo. Podemos insertar un archivo de audio en nuestra página mediante el elemento HTML <audio>, podemos incrustar archivos de audio externos en aquellas páginas que lo permitan y, por supuesto, podemos realizar enlaces a archivos mp3, ogg, wav, etc. para que se descarguen en el ordenador del usuario y que los interprete con sus propias aplicaciones.

<audio src="podcast.mp3" controls autoplay>

Donde podcast.mp3 sería el nombre del archivo de sonido que se encontraría en la misma carpeta que nuestro documento HTML.

Si optamos por el modelo externo, buscaremos un servidor que contenga esos archivos de audio y permita su inserción. A veces encontraremos el término incrustar o embeber o embed, en inglés. 

4. Insertar otros elementos

Hay infinidad de elementos a insertar en nuestras webs, uno de los más utilizados son los mapas de Google Maps. El funcionamiento es similar a vídeos y audio. Como ejemplo insertaremos un mapa.

• Vamos a insertar en nuestro documento multimedia.html un mapa en el que se muestre la Ciudad de las Artes y las Ciencias de Valencia.
• Primero vamos a Google Maps y buscamos "Ciudad de las Artes y las Ciencias, Valencia"
• Podemos ampliar la vista para verlo mejor. Después hacemos clic en la cadena que aparece al lado de la impresora.

• Aquí nos aparece el código que tenemos que incluir en nuestra página, pero si queremos podemos personalizarlo. Hacemos clic en el enlace Personalizar y obtener vista previa del mapa que se va a insertar.

• Aquí podemos ver como quedará. Elegimos el tamaño pequeño y copiamos el código HTML.
• Volvemos a nuestro documento multimedia.html y nos situamos al final.
• El siguiente paso es pegarlo en nuestra web. Accedemos al menú Insertar→HTML y en el cuadro de diálogo que se abre pegamos el código que acabamos de copiar hacemos clic en Insertar.

• Guardamos los cambios.
• En el fichero no se ve el mapa, pero si lo vemos en un navegador el resultado final es el siguiente:

Hay infinidad de elementos en la web que podemos incluir en nuestra página y el funcionamiento de todos ellos es muy parecido.

• Sube a la plataforma el archivo multimedia.html.

• Crea un nuevo documento llamado mimultimedia.html.
• Debes insertar en el los siguientes elementos:
• Un mapa de la ciudad que tú quieras.
• Un vídeo que NO sea de YouTube.
• Dos elementos más que no hayamos insertado ya. Puedes ser elementos de prezi, Scribd, Issuu...
• Sube a la plataforma el archivo mimultimedia.html