Los elementos multimedia en el blog

Los elementos multimedia están adquiriendo gran importancia en la Web debido a la mejora técnica y a la mayor rapidez de las conexiones a internet. En el campo de la enseñanza en concreto, sus posibilidades son ilimitadas, aunque el medio todavía es bastante nuevo como para poder decir que las cosas están claras en este campo. Muchos docentes están ahora investigando en el ámbito multimedia para dotar a sus actividades docentes de contenido fundamentado en vídeos, audio e imágenes además de en el trabajo con códigos de programación y aplicaciones que ofrecen todo tipo de interactividad. Un ejemplo puede verse en el blog de aula El tinglado.

Para completar la información de este artículo, conviene leer otro artículo más reciente de este blog titulado "Vídeos en Blogger", en el que introduzco dos novedades importantes a la hora de incluir vídeos en un blog de Blogger; también reflexiono en él sobre algunas de las pegas relacionadas con el mundo de la multimedia.

1. Cómo incluir elementos multimedia en Blogger

En Blogger se pueden incluir muchos elementos multimedia, como en otros gestores de contenido, y para que estos vídeos o audios se vean y se oigan en los blogs generalmente el usuario tiene que tener instalado en su navegador unos complementos o plugins de Flash y de Java que permiten la visión o audición de estos elementos. Esto en sí supone un problema, porque no todos los navegadores los tienen incorporados, aunque sí la mayoría. En principio podemos trabajar a gusto con la multimedia sabiendo que casi todos los usuarios podrán beneficiarse de estas nuevas tecnologías.

Generalmente, los gestores de blogs, es decir, las aplicaciones que como Blogger nos permiten crear blogs o bitácoras, tienen incorporadas algunas opciones con las que introducir el código necesario en nuestro blog para enlazar un vídeo u otros elementos multimedias. Vamos a ver cuáles son los pasos que se siguen habitualmente para realizar esto, y lo haremos con un ejemplo para traer un vídeo de YouTube y publicarlo en nuestro blog.

2. Cómo incluir un vídeo en el blog mediante código

1. Vamos a la página donde se publican los vídeos; en este caso, YouTube. Elegimos un vídeo que nos guste y hacemos clic encima de él para ir al documento individual donde aparece ese vídeo.
2. Allí veremos, debajo del vídeo, el enlace Insertar. Si hacemos clic en él, se abre un recuadro que incluye el código HTML del vídeo y una serie de opciones para personalizar el código el tamaño del reproductor, entre otras cosas. Ahora tenemos que realizar lo siguiente: hacemos clic encima de ese recuadro, y el código se marcará si no estaba ya marcado. Después, sin mover el cursor de allí, hacemos clic en el botón derecho del ratón y elegimos la opción que nos permite copiar ese código en la memoria del sistema.
   
3. Por último, abrimos una nueva entrada en nuestro blog, y pegamos el código en la parte de Edición de HTML del editor de textos, como se ve en la imagen de la sección 2.

Si vemos el vídeo desde la sección Redactar del editor, nos aparecerá un cuadro con la palabra OBJECT, pero si lo vemos haciendo clic en la Vista previa, apreciaremos cómo quedará insertado en nuestra entrada del blog. 

Y aquí tenemos un vídeo de YouTube donde vemos a dos robots bailando y moviéndose de forma muy humana:

Y otra página web de donde podemos descargarnos vídeos de calidad es Dailymotion. Cuando elegimos un vídeo de este servicio, debajo del reproductor hay un campo de texto titulado "embed code". Allí tenemos el código object que hay que copiar y pegar en el editor de nuestro blog.

Dripsplitsession2big
Uploaded by hifana

2. El código de HTML del vídeo 

El código que proporciona YouTube ha cambiado hace poco, y ahora se ofrecen los vídeos dentro de un marco IFRAME de HTML, que tiene como atributos la anchura del marco (width), la altura (height) y el borde (frameborder), además del atributo src, que es donde se incluye la URL del vídeo:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/_LURr-rXZgk?rel=0" frameborder="0" allowfullscreen></iframe>

Hasta hace poco, el código del vídeo de Toutube que habíamos pegado en el blog era el siguiente:

Aquí vemos algunas etiquetas del lenguaje HTML como <object>, <param> o <embed>, que tienen que tener también su etiqueta de cierre de esta manera: </object>, </param> o </embed>. Si alguna vez faltara alguna de ellas, el gestor de Blogger produciría un error, y tendríamos que escribirla, y suele pasar con la etiqueta de cierre de la etiqueta </embed>, que hay que volver a escribir una y otra vez porque el programa la borra. Dentro de las etiquetas hay algunos atributos, como width (anchura) y height (altura), con los que podríamos cambiar las dimensiones del reproductor del vídeo simplemente modificando (las dos veces que aparecen cada uno) los números que los acompañan y que corrreponden a píxeles.

Para ver cómo se pega el código de YouTube en la entrada del blog (con el antiguo diseño) he creado este breve vídeo:

Insertar vídeos con código en Blogger from Alejandro Valero on Vimeo.

3. Cómo insertar audio mediante podcast

No existe tanta demanda por insertar audio en los blogs si lo comparamos con los vídeos, de ahí que no haya páginas tan conocidas que alojen canciones para reproducirlas en los blogs. Goear es una web que se ha echado a perder por la publicidad descarada que incluyen en el reproductor, pero todavía existen servicios sin este problema: SoundZit y MusicDumper, en los que podemos oír y descargar archivos MP3 de canciones, y además nos proporcionan un código HTML del reproductor para insertarlo en nuestro blog. Aquí tenemos dos clásicos del rock:

Eagles Motel California (live)
El reproductor de la primera canción lo hemos conseguido en SoundZit buscando Pink Floyd en el buscador, lo que nos ha llevado a la página donde hay algunas de sus canciones. Hemos reproducido la primera canción y entonces nos ha aparecido a la derecha el enlace Exporta esta canción a tu página o blog, como se ve en esta imagen:

Al pulsar este enlace, aparecen en el lateral dos campos de texto con el código HTML de la misma canción en dos reproductores; elegimos el que más nos guste y copiamos el código para después pegarlo en la parte de Edición HTML de nuestra entrada.

El reproductor de la segunda canción lo hemos conseguido en MusicDumper. Después de ir a la página de la canción que deseamos, podemos ver el código en el lateral derecho, como el de esta imagen:

Este código lo proporcionan con la opción autostart=true, con lo cual el podcast sonará en cuanto el lector del blog entre en esta página. Para que el lector pueda pulsar el botón de play cuando quiera, tenemos que cambiar esa opción para dejarla así: autostart=false.

4. Cómo insertar presentaciones y documentos de texto

Aunque las entradas de los blogs suelen ser breves por su característico dinamismo, quizá a veces queramos insertar archivos de texto o presentaciones para completar el contenido. En este caso, se recurre a enlazar esos archivos para su descarga  o a insertarlos en la entrada mediante un reproductor. El lugar más conocido donde podemos cargar un archivo de estas características es SlideShare, aunque muestra publicidad, y donde además podemos utilizar cualquiera de las publicadas en su servicio. Cuando guardamos allí una presentación, ésta pierde las transiciones y otras animaciones que tenga, pero se convierte en un objeto multimedia que podemos ver con toda comodidad conectados a internet.

El procedimiento que se sigue es el de copiar el código HTML de la presentación en nuestro editor como un reproductor. Para conseguirlo, hay que hacer clic en la pestaña Embed que está en la parte superior de la presentación, y entonces aparecerá debajo el código HTML que hay que insertar en el blog, que podemos personalizar pulsando el enlace Customize:

Con la siguiente presentación de Ángel Puente podremos conocer más a fondo la multimedia en los blogs:

Multimedia en webs, blogs y wikis

View more presentations from Ángel Puente.

Otro servicio muy bueno que se ha abierto paso últimamente es Issuu, que no incluye publicidad y que presenta los archivos, ya sean presentaciones o documentos de Word y OpenOffice, de forma muy atractiva, como se ve en esta sencilla presentación mía:

5. Cómo insertar elementos de Google Docs

Todos los documentos creados en Google Docs se pueden insertar o incrustar en el blog mediante el código HTML que se nos proporciona en las opciones para compartir los documentos. Si, por ejemplo, hemos subido un archivo PDF, entramos en él, y a la derecha nos aparece lo que se ve en la imagen:

Destacado en rojo está el código HTML que comienza con "<iframe...". Copiamos ese código y lo pegamos en la parte del código HTML del editor, y entonces lo tendremos insertado en la entrada dentro de un marco (iframe), igual que como se ve en Google Docs.

Lo mismo se puede hacer con una presentación de Google Docs. Pulsamos el botón Compartir y después pulsamos en Publicar/Insertar. Entonces aparece una ventana y pulsamos en el botón Publicar documento. Ahora tendremos un formulario que nos permitirá personalizar la presentación que se nos muestra a la derecha y el código HTML (con el iframe o marco) en la parte inferior, destacado en rojo en la imagen siguiente:

Aquí tenemos, por ejemplo, una de mis presentaciones creadas en Google Docs:

6. Enlaces de interés

1. Roa multimedia, excelente blog donde José Mª Campo informa de manera práctica sobre toda la multimedia que se puede incluir en un blog.
2. El balcón abierto, blog de Ángel Puente sobre todo tipo de multimedia en los blogs.
3. Edubloki, wiki de Lourdes barroso, que ha realizado varios vídeotutoriales en su sobre distintas herramientas multimedia. Con eso tenemos para entretenernos un rato.

(Entrada actualizada el 1 de abril de 2011)