Multimedia Blogger
- 1. Multimedia en Blogger Alejandro Valero avalerofer@yahoo.es 2008 http://creativecommons.org/licenses/by-nc-sa/2.0/es/
- 2. 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 do- tar a sus actividades docentes de contenido fundamentado en vídeos, audio e imágenes ade- má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. Blogger es un servidor gratuito de blogs que sorprende por su constante renovación. Está muy al tanto de lo que se cuece en la Web, por eso ha incluido últimamente algunas herramientas para introducir vídeos en las entradas de los blogs. Con esto, Blogger se pone a la altura de las circunstancias, pues los vídeos y otros materiales multimedia están inundando la Web. Los usuarios de blogs reclaman la posibilidad de mostrar sus propios vídeos de forma creativa y también otros vídeos que les interesan y que quieren incluir como contenido de sus artículos o posts. Poco a poco la Web va incorporando estos elementos multimedia que ilustran los conte- nidos y que tienen que contribuir a profundizar en los conocimientos compartidos. 1. Algunas pegas de la multimedia en la Web Los objetos multimedia han pasado por un calvario especial en la Web hasta hace muy poco tiempo debido a que requieren lo siguiente: 1. Mucho espacio web en los servidores, pues son objetos voluminosos. 2. Conexión rápida de internet debido a su compleja estructura. 3. Códecs y reproductores adecuados para su reproducción. 4. Plug-ins necesarios en los navegadores web. Sólo recientemente se ha podido incorporar la multimedia a las páginas web de manera masi- va, ya que esas pegas se han superado, aunque no totalmente. De todas formas, aún se deben superar otros inconvenientes que surgen debido a las características de estos elementos. Con- sideremos lo siguiente: 1. El contenido de un vídeo no consta para los buscadores web, porque no se expre- sa en texto escrito. Por tanto, su utilización masiva no contribuye a la construcción de la Web semántica, que es el objetivo que se vislumbra en el horizonte. Esto se puede solu- cionar, como consta en las especificaciones de la accesibilidad, con la inclusión de la transcripción del texto del vídeo, o al menos con un resumen. Naturalmente, esto no lo hace casi nadie, pero ahí queda. 2. La inclusión de elementos multimedia aumenta el ruido en la Web en los dos sentidos más evidentes. Por un lado, hay que pensar que muchos ordenadores se encuentran en lugares públicos donde no se puede o no se debe molestar con voces o ruidos. Y por otro lado, la inclusión masiva de la multimedia en la Red, a veces sin motivos evidentes, con-
- 3. tribuye al ruido y el desorden que provoca su exagerada proliferación, que se hace inso- portable con la publicidad. 3. ¿Y qué pasa con las personas sordas o ciegas? Que no van a poder beneficiarse de toda esta renovación en la Web. La accesibilidad de las páginas web es ya una obli- gación legal en muchos países, que tendrán que tener en cuenta sobre todo las webs de ámbitos públicos, en especial el educativo. Pero son tantas las ventajas que aporta la multimedia, que estos inconvenientes se están su- perando o se están ocultando debajo de la alfombra. Todavía hoy no se puede confiar todo el contenido de una web a sus elementos multimedia, porque pueden fallar por muchos motivos. Veremos qué nos aportan los adelantos tecnológicos del futuro cercano. 2. Cómo incluir elementos multimedia en Blogger En Blogger se pueden incluir muchos elementos multimedia, como en otros gestores de conte- nido, 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 permi- ten 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. 2. Elegimos un vídeo que nos guste y hacemos clic encima de él para ir al documento indi- vidual donde aparece ese vídeo.
- 4. 3. Allí veremos, a derecha del vídeo, un marco como el que está encima de este párrafo. En la última línea, tenemos la palabra embed, y a su derecha un recuadro de texto con código en su interior. Ahora tenemos que hacer lo siguiente: • Hacemos clic encima de ese recuadro, y el código se marcará. • Después, sin mover el cursor de allí, hacemos clic en el botón derecho del ra- tón y elegimos la opción que nos permite copiar ese código. 4. Por último, abrimos una nueva entrada en nuestro blog, y pegamos el código en la par- te de Edición de HTML del editor de textos. 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 "Lector exportable". Allí tenemos el código que hay que copiar y pegar en el editor de nues- tro blog. Dripsplitsession2big - Uploaded by hifana
- 5. 3. El código de HTML del vídeo El código del vídeo de Toutube que hemos pegado en el blog es 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 etique- tas 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. 4. Cómo insertar podcasts Los podcasts son grabaciones de audio que se reproducen en un blog con un lector o repro- ductor de Flash, y se utilizan habitualmente para incluir canciones o reproducciones de voz. Existen sitios web de donde podemos traernos canciones simplemente copiando un código y pegándolo en nuestro blog; uno de estos servicios es GoEar. Aquí tenemos la Danza húngara: Pero también tenemos la posibilidad de grabar nuestra voz en un servicio como Odeo y repro- ducirla en nuestro blog con un reproductor. Aquí dejo un saludo a los participantes en el curso de edublogs: powered by ODEO Otro servicio parecido a éste es Evoca.
- 6. 5. Cómo insertar presentaciones Una de las novedades relativamente recientes en la Web es la posibilidad de incluir presenta- ciones del estilo Power Point en una página web. El lugar más conocido donde podemos cargar una presentación es SlideShare, y donde además podemos utilizar cualquiera de las publicadas en esa web social. 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 de la presentación en nuestro editor. 6. Nuevas modalidades para incorporar vídeos Existen dos formas de incluir vídeos en una página web: 1. Enlazando los archivos directamente en el servidor donde se encuentren alojados. Este enlace puede servir para descargarnos el vídeo o para mostrarlo con un re- productor asociado. 2. Copiando en el editor del blog el código HTML que nos proporciona el servidor que aloja los vídeos. De esta manera, utilizamos un vídeo ya guardado que no es nuestro y que se encuentra a disposición del público. Recientemente Blogger ha introducido la posibilidad de guardar vídeos en sus servidores. Esta operación se realiza de forma muy sencilla simplemente haciendo clic en el icono correspon- diente de la barra de iconos de su editor de entradas. Entonces, aparece el siguiente cuadro de diálogo:
- 7. Sólo tendremos que cargar el vídeo desde nuestro ordenador y ponerle un título. Yo he utiliza- do un vídeo descargado de la Mediateca de EducaMadrid, que viene en formato 3gp, apropia- do para móviles. Al hacer clic en el enlace Subir vídeo, nos preguntan en qué formato desea- mos descargarlo: Después de cargarlo, el programa lo convierte en vídeo/mp4. El vídeo pertenece a la Media- teca de EducaMadrid. Y ya lo podemos ver incluido en nuestro blog con un reproductor propio:
- 8. Sigue sorprendiéndonos el hecho de ver unas imágenes que se mueven y que emiten sonidos en nuestro blog. Podemos además cambiar las dimensiones del vídeo haciendo un clic en él y arrastrando con el ratón los tiradores laterales. Yo lo he hecho así para ponerlo en el comienzo de este artículo y colocarlo a la izquierda del párrafo introduciendo código de hojas de estilo. Pero no todo queda aquí. También Blogger nos proporciona un widget con el que podemos in- cluir un enlace directo a los vídeos de YouTube y de Google Vídeo desde el lateral de nuestro blog. Si vamos a nuestro panel del blog y entramos en la sección Plantilla, encontraremos a la derecha el enlace Añadir un elemento de página, que nos proporciona la posibilidad de insertar estos widgets. De la ventana emergente que surge, elegiremos la parte que dice Barra de ví- deo. Si hacemos clic al enlace Añadir al blog, se abrirá un cuadro de diálogo como éste: Pondremos un título y elegiremos las etiquetas temáticas que nos interesen, y listo. Cuan- do guardemos los cambios, aparecerá la barra de vídeos en nuestro lateral, y si hacemos clic en uno de los vídeos, se abrirá en la parte superior de nuestro blog, lo que no deja de ser ori- ginal y sorprendente.
- 9. 7. Addenda: Reducir y recortar una imagen con Snipshot Nadie duda de que las imágenes son un gran recurso que se puede adaptar a muchas circunstancias. A veces encontramos imágenes apropiadas para nuestras actividades, pero resultan demasiado grandes o sólo queremos utilizar una parte de ellas. Aquí vamos a aprender cómo reducir y recortar una imagen extraída del banco de imágenes del CNICE utilizando Snipshot, un servicio gratuito en la Web. 7.1. El Banco de imágenes Primero tenemos que ir a un banco de imágenes gratuitas, y el del CNICE es uno de los mejo- res que conozco. La siguiente imagen nos muestra la página donde podemos buscar imágenes en las secciones del lateral o también escribiendo una palabra en el campo de texto superior que está a la izquierda del botón Buscar. Una vez tenemos la imagen elegida, hacemos clic en ella y aparece en otra página. Esta prime- ra imagen es una versión reducida que muchas veces nos vale para nuestro blog. Pero en nuestro caso, preferimos la imagen de alta resolución que aparece cuando hacemos clic en ese imagen. Las imágenes de alta resolución son buenas para imprimirlas, pero en la Web hay que reducir el peso de las imágenes. Lo que pasa es que ahora queremos recortar parte de esa fotografía para utilizarla en nuestro blog. Primero guardamos esa imagen en nues- tro ordenador haciendo clic sobre ella con el botón derecho del ratón y eligiendo en el menú emergente la opción correspondiente para guardarla. Yo he elegido una imagen de gente com- prando en un mercadillo. 7.2. Introducir la imagen en Snipshot A continuación, vamos a la página de Snipshot, en cuya portada podemos incorporar nuestra imagen a la aplicación haciendo clic en el botón Examinar que se encuentra en la parte supe- rior izquierda, bajo el rótulo Open from your computer.
- 10. Una vez seleccionada la imagen, puede tardar unos minutos en aparecer en otra página que tiene un menú de opciones en la parte superior. Aunque está en inglés, esas palabras se usan mucho, y ahora vamos a utilizar algunas de ellas para recortar y reducir la imagen. 7. 3. Recortar la imagen en Snipshot Para recortar la imagen hacemos clic en la opción Crop del menú superior, y entonces apa- rece un recuadro más claro en el interior de la imagen. Ese recuadro tiene ocho tiradores en su lados y esquinas para que reduzcamos o ampliemos la parte elegida de la foto a nues- tro gusto. También podemos mover el recuadro entero arrastrándolo mientras pulsamos el botón izquierdo del ratón. Cuando seleccionemos la parte que queremos, volvemos a hacer clic en la opción Crop, y ya tenemos en pantalla la imagen recortada. 7.4. Reducir la imagen con Snipshot Pero esa imagen recortada es demasiado grande para el blog, y ahora quiero reducirla a una anchura de unos cuatrocientos píxeles con la opción Resize del menú. Para ello, arrastro uno de los tiradores rojos de las esquinas hasta que reduzco la imagen a un tamaño adecua- do. Los tamaños en píxeles aparecen en un recuadro amarillo por debajo de la imagen mien- tras la estamos reduciendo. Hay que advertir de que tenemos que usar los tiradores de las esquinas si queremos reducir la imagen proporcionalmente en cuanto a altura y an- chura. Si utilizamos los tiradores laterales, sólo reduciremos un lado. La siguiente imagen es la versión ya reducida para un tamaño adecuado:
- 11. 7.5. Otras opciones con Snipshot Generalmente, si extraemos imágenes de bancos en la web, suelen estar bien hechas. Pero puede ocurrir que queramos modificarlas o mejorarlas, y para ellos usamos las restantes op- ciones del menú superior: • Undo - Deshace las acciones anteriores que hayamos realizado, lo que es muy adecua- do cuando realizamos una acción cuyo resultado no nos gusta. • Faces - • Enhance - Mejora automáticamente la calidad de la imagen. • Adjust - Ajusta el brillo, el contraste y otros aspectos de la imagen. • Rotate - Rota la imagen. • Open - Vuelve a la portada de la web para que el usuario abra o introduzca otra imagen. • Save - Guarda en otros directorios de la Web o en el disco duro el archivo de la imagen creada. Es lo que vamos a hacer a continuación. 7.6. Guardar la imagen con Snipshot Guardar en el disco duro La imagen finalmente modificada la podemos guardar en nuestro disco duro con una de las ex- tensiones que aparecen en la sección titulada Save to your computer del recuadro negro que aparece cuando hacemos clic en la opción Save del menú. La extensión más normal para una fotografía es JPG, que une calidad y una gran compresión del archivo final. Si lo que tenemos es una imagen con pocos colores, lo mejor es guardarla con las extensiones GIF o PNG.
- 12. Guardar en servidores web Otra posibilidad es guardar la imagen en servidores web gratuitos para almacenar y compartir imágenes. Sobre uno de ellos he escrito un artículo en este blog: Alojamiento web gratuito en Mediamax. Pero también están el conocidísimo Flickr o Webshots. Cuando se hace clic en Webshots, la imagen ya aparece guardada en el servidor con unos códi- gos que podemos utilizar para mostrar la imagen en nuestro blog o en un foro, o para enviarla por correo electrónico y programas de mensajería. Se guarda como thumbnail, es decir, en versión pequeña, o en tamaño normal. Para guardarla en nuestro blog con el tamaño original, simplemente hacemos clic en el pri- mer campo de texto del segundo grupo y copiamos el código con la opción correspondiente del botón derecho del ratón, y después pegamos ese código en nuestro artículo. 7.7. Webs con imágenes gratuitas • Banco de imágenes del CNICE. • Open Clip Art Gallery. • Openphoto. • Free Digital Photos. • Lista de sitios que ofrecen imágenes.