Blogs y Web 2.0.: Competencia digital

Blog para el curso del CPR Nalón-Caudal. 2009-2010

Artículos de 'Sesión 8'

Sesión 8: Insertar arhivos mutimedia II

Publicado por luciaag el 6 Diciembre 2009

Además de imágenes, enlaces, archivos pdf o zip el formato Blog nos permite insertar diferentes tipos de archivos  o materiales multimedia alojados en servicios web 2.0 como galerías de imágenes,  visores de documentos y presentaciones en formato flash, audios y podcast, etc.

En esta sesión vamos a conocer los pasos necesarios para incluir en nuestros artículos y páginas del blog estos tipos de archivos:

Contenidos: 

  • Insertar un vídeo Quick Time (.mov)
  • Insertar una animación Flash (swf)
  • Insertar una presentación con Slideshare
  • Insertar una galería de imágenes con Slide
  • Insertar documentos desde Scribd
  • Insertar documentos desde Issuu

1. Insertar un vídeo Quick Time (.mov)Haz clic en el icono e introduce la dirección URL, por ejemplo: http://www.obeaudoin.com/folio_trav/folio_images/Typolution_final_h264.movwmp.jpg


3. Insertar una animación FlashLas animaciones flash (swf) son archivos multimedia que cada vez están más extendidas en la Red debido a su vistosidad. Este tipo de animaciones se utilizan muy  menudo en los materiales educativos ya que permiten realizar contenidos más llamativos y pueden aportar numerosas posibilidades interactiva.Estas animaciones se pueden subir a Educastur Blog desde una web externa o bien alojarlos en Educastur Blog. Esto último no es aconsejable por lo ya comentado pero su gestión sería la misma que para otro tipo de archivos.Cómo insertar una animación Flash externa Vamos a insertar en nuestro Blog una animación localizada en una de las Unidades Didácticas del NEA (Navegador educacional de Asturias), accesible desde: http://nea.educastur.princast.es/. Buscamos una UD que nos interese y cuando encontremos una animación, hacemos clic sobre ver animación en una ventana nueva y copiamos la URL que aparece en el navegador.A continuación, hacemos clic sobre el último botón del editor de textos, el botón SWF, introducimos la URL que copiamos y aceptamos las medidas que nos da por defecto.

flash.jpg

Esta película necesita Flash Player 7


Actividad 12: Inserta una animación flash del NEA en un post
Además:

  • Ejemplos de Blogs educativos

4. Insertar una presentación de SlideshareComo ya sabéis,  Slideshare es un interesante servicio web 2.0 de alojamiento de presentaciones. Admite los formatos Powerpoint (ppt) y OpenOffice (odp), y los convierte al vuelo en archivos flash (swf), lo que nos permite verlas con un visor sencillo y práctico. Es ese archivo swf, junto con el código asociado, el que tenemos que insertar desde el editor de Educastur Blog.Para insertar una presentación Slideshare, sigue los siguientes pasos:

  1. Sube o localiza la presentación en la web de Slideshare.
  2. Copia el código de la misma (está en la parte derecha de la pantalla).

slideshare2.jpg

3. Pega el código en el bloc de notas o en el mismo editor de textos y selecciona lo siguiente:

<div style=”width:425px;text-align:left” id=”__ss_29720″><a style=”font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;” href=”http://www.slideshare.net/luciaag/el-color-caracteristicas-generales?type=powerpoint” title=”El color. Caracteristicas generales”>El color. Caracteristicas generales</a><object style=”margin:0px” width=”425″ height=”355″><param name=”movie” value=”http://static.slideshare.net/swf/ssplayer2.swf?doc=el-color-caracteristicas-generales-22724&stripped_title=el-color-caracteristicas-generales” /><param name=”allowFullScreen” value=”true”/><param name=”allowScriptAccess” value=”always”/>….

4. Haz clic sobre el botón flash (SWF) del editor de textos y pega la parte del código seleccionada. Acepta las medidas que te da por defecto y verás la presentación en la pantalla del Blog.

Esta película necesita Flash Player 7


Actividad 13: Inserta una presentación de Slideshare en un artículo


5. Insertar una Galería de imágenes de SlideSlide nos permite subir varias imágenes al Blog sin ocupar espacio de almacenamiento en él, realizar galerías más o menos animadas e insertarlas en nuestro Blog, gracias al código asociado.Crear una galería de imágenesAccede a Slide (recuerda que previamente has tenido que registrarte) > make a Slideshow (hacer una galería de imágenes) > sube tus propias imágenes > buscar.buscarslide.jpgPuedes personalizar tu galería eligiendo animaciones, efectos, temas, etc.personalizarslide.jpg

En la parte inferior aparecen las miniaturas de las imágenes. Puedes alterar el orden haciendo clic en ellas y arrastrando. También puedes escribir pies de foto, y configurar el tamaño y color del texto.

fotosslide.jpg

Cuando termines de configurar las opciones, pulsa en el botón Guardar (obtener código) y verás el resultado de tu galería de imágenes o slideshow.

Copia el código que aparece debajo de la presentación, pégalo como hicimos anteriormente en el bloc de notas o en el mismo editor de texto y copia lo que aparece en rojo:

<div><embed src=”http://widget-38.slide.com/widgets/slideticker.swf” type=”application/x-shockwave-flash” quality=”high” scale=”noscale” salign=”l” wmode=”transparent” flashvars=”cy=h5&il=1&channel=360287970208265016&site=widget-38.slide.com” style=”width:426px;height:320px” name=”flashticker” align=”middle”/><div style=”width:426px;text-align:left;”><a href=”http://www.slide.com/pivot?cy=h5&at=un&id=360287970208265016&map=1″ target=”_blank”>

Estas son las dos partes del código que has copiado:

1.   http://widget-38.slide.com/widgets/slideticker.swf

2.  cy=h5&il=1&channel=360287970208265016&site=widget-38.slide.com

Debes volver a copiarlas y pegarlas unidas por un símbolo de interrogación (?). Así tendrás:

http://widget-38.slide.com/widgets/slideticker.swf?cy=h5&il=1&channel=360287970208265016&site=widget-38.slide.com

Este es el código que debes copiar y pegar en la ventana del botón Flash (SWF) de tu editor de textos como hicimos anteriormente:

Esta película necesita Flash Player 7


6. Insertar documentos desde Scribd Scribd (http://www.scribd.com/) es un servicio de alojamiento gratuito de documentos ofimáticos. Admite los principales formatos de documento: PDF (.pdf), Word (.doc), texto plano (.txt), PowerPoint (.ppt), Excel (.xls), Postscrpt (.ps), o libro electrónico (.lit).No es necesario registrarse como usuario para subir archivos, aunque sí para poder editarlos o borrarlos.Una vez subido un archivo, Scribd lo convierte al formato flash para poder mostrarlo en la web, y proporciona el código necesario para insertar el visor del documento en nuestro blog o página web.1. Para subir un documento a Scribd, nos identificamos y hacemos clic sobre “Upload”. Nos aparecerá el navegador de Windows para buscar el archivo que queremos subir. La aplicación nos va indicando los pasos a seguir.2. Una vez subido, el documento nos aparecerá con su miniatura y la descripción del contenido, páginas, tipo de archivo, etc. en la página de inicio de nuestra cuenta. Haciendo clic sobre la miniatura, se abre el visor flash en el que podemos ver los siguientes menús:scribd1.jpg

Tenemos que desplegar el menú “embed” para que la aplicación nos de el código que necesitamos para insertar el visor flash en nuestro Blog.

scribd2.jpg

Este es parte del código generado. La parte que nos interesa y vamos a copiar está en rojo y negrita:

<a title=”View Técnicas grafico-plásticas document on Scribd” href=”http://www.scribd.com/doc/8549869/Tecnicas-graficoplasticas” style=”margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block; text-decoration: underline;”>Técnicas grafico-plásticas</a> <object codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ id=”doc_435695226391199″ name=”doc_435695226391199″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ align=”middle”    height=”500″ width=”100%”>        <param name=”movie”    value=”http://documents.scribd.com/ScribdViewer.swf?document_id=8549869&access_key=key-jieo632ag042lp0gctc&page=1&version=1&viewMode=”>         <param name=”quality” value=”high”>         <param name=”play” value=”true”>

Lo copiamos y pegamos en el botón de flash y ya tenemos nuestro visor flash del documento en nuestro Blog.

Esta película necesita Flash Player 7

7. Insertar un libro virtual desde Issuu
Issuu es una librería online donde podemos subir archivos PDF, DOC, PPT, ODT, WPD, SXW, RTF, ODP, y SXI limitados a 100 MB/500 páginas como máximo por archivo. Una vez que el archivo es subido, tras un proceso de etiquetado, será convertido a formato flash, con toda fidelidad al documento original, pero permitiéndonos navegar por sus páginas como si de una revista se tratase.

1º. Para  subir nuestros propios documentos es necesario registrarse. A partir de ese momento ya podemos subir y descargar documentos. Issuu nos permite proporciona y desde el que podemos buscar el documento, darle título, etiquetarlo, escoger las opciones de privacidad, etc.:

2º. Una vez hayamos cubierto todos los campos, hacemos clic sobre el botón upload. En función del tamaño del archivo tardará más o menos tiempo en ser subido. Posteriormente se abre una nueva pantalla en la que observamos el documento subido.

3º. Una vez subido el documento podemos acceder a él desde el botón ‘My Library‘, y editarlo, borrarlo, publicarlo, etc. También nos genera un código para insertar un visor flash del documento en nuestro blog. Lo abrimos haciendo clic en el botón “Open” que aparece al colocar el cursor sobre él:

4º. Una vez abierto el documento hacemos clic sobre el botón “Embed” con el fin de acceder a la pantalla desde la que conseguiremos el código:

5º. En la nueva ventana que aparece seleccionamos el código y lo copiamos al portapapeles (Ctrl + C).
<object style=”width:420px;height:297px” ><param name=”movie” value=”http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true&documentId=090112045108-1df99f6452d94d44a089f21eb37bfdff&docName=tallerdegimp&username=luciaag&loadingInfoText=Taller%20de%20Gimp&et=1260259684665&er=49″ /><param name=”allowfullscreen” value=”true”/><param name=”menu” value=”false”/><embed src=”http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf” type=”application/x-shockwave-flash” allowfullscreen=”true” menu=”false” style=”width:420px;height:297px” flashvars=”mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true&documentId=090112045108-1df99f6452d94d44a089f21eb37bfdff&docName=tallerdegimp&username=luciaag&loadingInfoText=Taller%20de%20Gimp&et=1260259684665&er=49″ /></object>

6º. Pegamos el código obtenido en nuestro artículo. De todo el código sólo nos interesa una parte que en la imagen está resaltada en color amarillo. Seleccionamos esa parte y la copiamos al portapapeles.

7º. En el editor de artículos de nuestro blog insertamos el código copiado haciendo uso del botón “insertar flash“. Tras aceptar en las siguientes ventanas emergentes el ancho y el alto sugeridos, podremos ver nuestro libro virtual insertado ya en nuestro artículo.

Esta película necesita Flash Player 7

Publicado en Sesión 8 | No existen comentarios »