martes, 23 de enero de 2007

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, por ejemplo, un vídeo simplemente seleccionándolo en YouTube:

Vídeo de YouTube seleccionado para ser incrustado en el blog de Blogger
Pero también podemos incrustar el vídeo en nuestro blog pegando en una entrada el código necesario para verlo allí mismo. 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

Código HTML para insertar el vídeo en un blog
  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 Compartir, con el que tenemos varias opciones, y una de ellas es Insertar. Si hacemos clic en esta palabra, se abre un recuadro que incluye el código HTML del vídeo y una serie de opciones para personalizar el tamaño del reproductor, entre otras. (En algunos sitios hay que utilizar el código de inserción antiguo).
  3. 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.
  4. 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:


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 está la opción Exportar, donde encontramos el código de inserción. Allí tenemos el código iframe que hay que copiar y pegar en el editor de nuestro blog.

Y no podemos olvidar el servicio Vimeo, que ofrece vídeos de alta definición. Para incrusta un vídeo en el blog pulsamos el botón Share, que aparece en la parte superior derecha del vídeo. Entonces, se abre un recuadro donde están todas las opciones:

Opciones de inserción de un vídeo de Vimeo

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

El código del reproductor de YouTube se ofrece 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>

El código antiguo del vídeo de Youtube todavía hay que usarlo en algunos editores que no admiten el actual:

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. Dos de las más conocidas y usadas son SoundCloud y Goear, que son servicios para compartir canciones y podcast, y que  funcionan bien en dispositivos móviles. Tanto en uno como en otro, podemos subir nuestros audios  con el código HTML que nos proporcionan. SoundCloud tiene la peculiaridad de que se puede escribir comentarios dentro de la reproducción del audio y además los audios se pueden agrupar en listas de reproducción con el mismo reproductor.

Ambos servicios ponen a nuestra disposición el código HTML del reproductor para después insertarlo en el blog. En los audios de SoundCloud está el botón Share debajo del reproductor; al pulsarlo aparece una pequeña ventana donde hay dos pestañas: Share y Embed, como se ve en la siguiente imagen:


Con la primera pestaña conseguimos la dirección web o URL del audio por si queremos enlazarlo. En la pestaña Embed  tenemos el código HTML (Embed code) para insertarlo en el blog, y con la opción Show artwork incluimos una imagen que hayamos elegido para acompañar al audio.

En Goear disponemos del código de inserción después de pulsar el botón Compartir, que está debajo del reproductor. Aparece una ventana con el código dentro del campo titulado Pon este audio en tu web o blog, además de otro campo de texto para URL.

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, 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 se puede insertar en el blog después de copiar el código con el botón Copy, y que se puede personalizar pulsando el enlace Customize, y entonces se abrirá parte del marco donde aparecen las opciones para eliminar el contenido relacionado (Without related content), comenzar la presentación en una diapositiva determinada (Start from slide number) o elegir entre varios tamaños del reproductor (Size).


Con la siguiente presentación de Felipe Zayas podremos conocer más a fondo la escritura en la Red:


Un servicio parecido al anterior es Scribd, aunque menos usado. Y un reproductor muy original y útil es el del servicio web Issuu, que presenta los archivos, ya sean presentaciones o documentos de Word y OpenOffice, de forma muy atractiva. En la parte inferior del reproductor tenemos el enlace Share que nos muestra otros enlaces debajo, como el de Embed para conseguir el código HTML y algunas opciones pulsando el enlace styling options.

Por último, no puede faltar Google Drive, porque todos los documentos creados en este servicio se pueden insertar o incrustar en el blog mediante el código HTML que se nos proporciona en el Menú Archivo y en la opción Publicar en la Web.... La ventana que aparece nos muestra primero un botón de Iniciar la publicación, y cuando lo pulsamos, se nos ofrece un Enlace al documento y el código del reproductor en Insertar código. En algún caso, en este código podemos incluir o cambiar la anchura y la altura del reproductor escribiendo dentro del código la anchura (por ejemplo, width="600") y la altura (por ejemplo, height="400"), que se refieren a medidas en píxeles.

Por último, se nos avisa de que "Al publicar, este contenido será visible por quien quiera que tenga el enlace publicado, pero no cambiará la configuración de uso compartido del documento". Esto se refiere a las opciones de que disponemos cuando pulsamos el botón azul Compartir que está todos los documentos.

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

5. 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 26 de diciembre de 2013)

    21 comentarios:

    1. ME PARECE EXCELENTE LA EXPLICACIÓN!!! ME AYUUDO MUCHO CON MI BLOG, MUCHAS GRACIAS - LAURI

      ResponderEliminar
    2. hay una herramienta llamada Embedit.in que es muy buena para poner documentos en blogs busquenla y usenla


      www.espol.edu.ec
      www.fiec.espol.edu.ec

      ResponderEliminar
    3. Estoy preparando un taller de Internet en el aula, ¿te importaría que copie alguna parte de tu entrada para añadirlo en el material que voy a dar a los profesores? Por supuesto con tu nombre y enlazando con tu blog.
      Gracias, un saludo, Ana Municio
      Dirección del taller.
      http://wikisafaprofestic.wik.is

      ResponderEliminar
    4. Hola a todos, soy carlos de 16 años, hace un tiempo decidí que quería estudiar animación 2D or 3D, el problema fue que en Perú no hay una diversidad en la enseñanza pero igual comencé mi búsqueda vía internet. Hace unos días visitaba algunas páginas y encontré la de una academia que ofrecía un curso rápido y personalizado que combinaba 2D & 3D, me parecio interesante, llame a la academia y me di cuenta que eran un Estudio de Animacion aqui en Peru!!..me dijeron que necesitan personas con talento que trabajen para ellos, asi que decidieron abrir este curso, asi que me dieron toda la información que necesitaba, la verdad no me tomó mucho en decidirme al observar los cortos que fueron hechos por los alumnos anteriores en su pagina y sus bajos costos, estaban tan bien trabajados que no parecían haber sido hechos por estudiantes y muchos de ellos ya estan trabajando en sus estudio. Bueno a los que les interese estudiar y luego al terminar tener un trabajo seguro, esta es su pagina: www.onetooneperu.org hasta la próxima, Carlos.

      ResponderEliminar
    5. Excelente!! Alejandro, como se nota que eres docente, me sirvió de mucho este tutorial para un proyecto que tenía y no sabía como insertar un video en mi blog, Gracias de verdad...
      Jackie www.lasdeliciasdevivir.com

      ResponderEliminar
    6. esto m ayudo muchisimo gracias

      ResponderEliminar
    7. Admiro tu generosidad hacia los aprendices como yo en este mundo de las TIC. De nos ser por blogs y trabajos como los tuyos muchos docentes abandonaríamos nuestra iniciativas. Y la verdad es que los tiempos no estan para esconderse en el ostracismo de la enseñanza tradicional

      ResponderEliminar
    8. Gracias, Pep, por tus palabras. La verdad es que me entristece ver cómo se abandonan proyectos e ilusiones por falta de apoyo. Yo desde mi blog intento ayudar como puedo. Un saludo.

      ResponderEliminar
    9. Muchas gracias por la información, muy ameno y didáctico. Para una neófita como yo ha sido una gran ayuda.
      MGG

      ResponderEliminar
    10. Hola. Lo primero gracias por su ayuda anterior respecto del tamaño de los vídeos. Ahora, necesito subir un archivo de sonido (.wav) de 241kb, desde mi PC a un entrada de mi blog... ¿puedo hacerlo? ¿cómo? He estado buscando pero, o bien no se como buscar o no encuentro nada que me ayude...
      Gracias de antemano.
      Kikarm.

      ResponderEliminar
    11. Kikarm, al blog de Blogger se pueden subir vídeos, pero no se puede subir ningún otro tipo de archivo. Si quieres subir un archivo de audio, lo mejor es pasarlo a MP3, porque es el formato que se usa en la Web y porque los archivos WAV ocupan mucho. Después tienes que subirlo a un servidor propio, y para ello escribí Espacio web gratuito para docentes, donde también hablo de Dropbox, que es una alternativa gratuita. Una vez que tienes el archivo en un servidor, lo puedes enlazar en tu blog como digo en Gadgets de Blogger para menús y descargas". A ver si te vale esto.

      A tu archivo MP3 le puedes poner un reproductor, y para ello te recomiendo que vayas a Roa Multimedia, donde José María Campo te ofrece múltiples soluciones. En este blog tengo pendiente hacer un artículo sobre este tema. A ver si tengo tiempo y lo hago.

      ResponderEliminar
    12. Muchas graxias por tu post, me ayudo bastante, eres super genial!(> 米 <) Gomawo!! °​\(*´ω`*)/°​

      ResponderEliminar
    13. En mi cole tenemos una emisora de radio y emitimos en varias ocasiones, quería saber si se puede incluir un gadget para que los días que emitamos, se pueda escuchar desde el blog.

      Gracias,
      Isabel

      ResponderEliminar
    14. Hola Alejandro:
      Te sigo habitualmente en tus diferentes blogs y admiro tu trabajo.
      Quería realizarte una consulta sobre insertar documentos con Google Docs.
      Con la antigua interfaz me resultaba muy sencillo dar con el código HTML para incluirlo en mi post pero con las modificaciones del diseño únicamente sé incluir el enlace al documento pero no el documento en sí. Utilizo SlideShare pero me gustaría poder utilizar GoogleDocs como lo hacía antes.
      Podrías indicarme los pasos que debo seguir.
      Muchas gracias por adelantado y espero coincidir algún día contigo en uno de tus cursos del CRIF.

      ResponderEliminar
      Respuestas
      1. Gracias por tu interés, Ana. La verdad es que Google Docs ha hecho muchos cambios últimamente, y me pasa lo que a ti. Incluso la ayuda de Google Docs está sin actualizar. No me parece bien que cambien tanto las opciones que no se puedan encontrar de forma intuitiva. Yo sigo usando mi procesador de textos y mis blogs, y utilizo poco Google Docs.

        Eliminar
    15. Gracias Alejandro.
      Seguiré como hasta ahora. Esperemos que con el tiempo Google Docs mejore en este sentido.
      Un abrazo

      ResponderEliminar
    16. Alejandro, tengo un problema: incrusto una actividad interactiva en mi blog y cuando abro el blog empieza a funcionar el sonido aunque no haya entrado en la actividad. De este modo si he incrustado varias actividades, el sonido de todas ellas funciona a la vez sin ni siquiera haber hecho clic en ninguna de ellas. No sé qué he hecho mal, si se trata de distinguir entre "incrustado" y "vinculado" y cómo hacerlo. En fin, que a pesar de haber leído muchos de tus artículos, que me parecen excelentes, no sé cómo solucionar el problema. Espero que me puedas ayudar. Gracias por adelantado.

      ResponderEliminar
      Respuestas
      1. Teresa, a lo mejor has incluido una actividad que suena nada más empezar. Supongo que antes de incrustarla puedes elegir la opción de que no suene hasta que el lector pulse el botón de reproducir.

        Eliminar
    17. me puedes ayudar con el código para centrar este vídeo publicado en mi blog http://matilderoncancio.blogspot.com/

      ResponderEliminar

    Pido disculpas, pero no voy a poder atender los comentarios temporalmente.

    Nota: solo los miembros de este blog pueden publicar comentarios.