Ángel R. Puente Pérez. Madrid mayo 2009 Diseño del díptico: Eutiquiano Merino.

Ángel R. Puente Pérez. Madrid mayo 2009 Diseño del díptico: Eutiquiano Merino

TALLER 5Inclusión de multimedia en páginas web, blogs y wikis

Ángel R. Puente Pérez. Madrid mayo 2009

Imágenes

• A tener en cuenta:– Formatos. Para Internet sólo:

• .jpg (fotografías)• .png (colores planos)• .gif (igual que .png)

• Dimensiones– En píxeles (suficiente con 800 x 600)

• Peso– Depende de las dimensiones y de la calidad– En KB

• A tener en cuenta:– Formatos. Para Internet sólo:

• .jpg (fotografías)• .png (colores planos)• .gif (igual que .png)

• Dimensiones– En píxeles (suficiente con 800 x 600)

• Peso– Depende de las dimensiones y de la calidad– En KB

Ángel R. Puente Pérez. Madrid mayo 2009 Origen de la imagen

Edición de imágenes

• Programas:– GIMP. (Software libre. Excelente)• http://www.gimp.org.es/

– PhotoShop. (Muy bueno pero de pago)– Paint de Microsoft. (Sencillo. Sólo en Windows)

Alojamiento de las imágenes

• En Picasa. De Google• http://picasaweb.google.es/home

• En Flickr. De Yahoo• http://www.flickr.com/

• En los propios servidores:– De la web.– Del blog. – Del wiki.

Animaciones con imágenes

• Desde Picasa: http://picasaweb.google.es/home

• Desde Flickr: http://www.flickr.com/

O…• Slide.com: http://www.slide.com/

• RockYou: http://www.rockyou.com/

• Lytebox: ejemplo

• Scrapblog: ejemplo

Código para embeber• ¿De qué estamos hablando?– De un fragmento de código que hay que copiar desde el

servidor y pegar en nuestro sitio para traernos la animación, el vídeo, el archivo sonoro con el reproductor…

El audio

• Formatos :– .cda. El formato de los CD Rom de audio– .mp3. Compresión de audio de muy buena calidad– .wav. Mucho más pesado pero es el formato

imprescindible para algunas herramientas (PowerPoint por ejemplo)

Edición de audio

• Audacity• http://audacity.sourceforge.net/?lang=es

• Cdex. (Extracción de pistas del CD Rom)• http://cdex.softonic.com/

• Freecorder. (Grabación del audio que suena en el equipo)

• http://applian.com/sound-recorder/

Alojamiento de mp3

• divShare. Alojamiento con reproductor: http://www.divshare.com/

• Nuestro disco duro virtual de EducaMadrid: http://www.educa.madrid.org/

Reproductores de mp3

• Play tagger de Delicious• http://delicious.com/help/playtagger

• Komcitiz• http://www.komcitiz.com/JL/sscat.php?idCat=61&idSSCat=14

• Y… muchos más• http://roble.pntic.mec.es/apuente/tallermultimedia2/paginas/m00.html

Sonido a partir de texto

• vozMe• http://vozme.com/index.php?lang=es

• Voki. (Publicidad algo molesta)

• http://www.voki.com/

• Bustos parlantes:– Alteregos• http://www.alteregos.com/

Vídeos

• YouTube• http://www.youtube.com/?gl=ES&hl=es

• Teachertube. Vídeos educativos• http://www.teachertube.com/

• Dotsub. Vídeos con subtítulos• http://dotsub.com/

• En el propio blog• Mediateca de EducaMadrid

• http://mediateca.educa.madrid.org/

Listas de reproducción de vídeos

• Barra de vídeos para Blogger desde Youtube• Barra lateral del blog: ejemplo

• Las listas de Youtube• Ver ejemplo

• Dailymotion: http://www.dailymotion.com/es• Jukebox: ejemplo

SlideShare

• Embeber presentaciones• Se pierden animaciones y transiciones• SlideCast. Presentaciones enlazadas con audio

alojado en otro servidor. Ejemplo

• Mashup con YouTube. Desde hace un tiempo se puede incrustar un vídeo en medio de una presentación ya finalizada y subida a SlideShare. Ejemplo

Derechos de autor

• Copyright• Copyleft• “Publicar un blog de forma libre y responsable” (Tíscar Lara)

• Siempre citar fuentes• Enlazar cuando sea posible• Elegir archivos con licencias

Creative Commons o libres del todo

Repositorios

• Mediateca de EducaMadrid: http://mediateca.educa.madrid.org/

• Banco de imágenes y sonidos del ISFTIC: http://bancoimagenes.isftic.mepsyd.es/

• Compfight. Imágenes: http://www.compfight.com/

• FlickrCC. Imágenes: http://flickrcc.bluemountains.net/

• Wikipedia. Música (formato .ogg): http://en.wikipedia.org/wiki/Wikipedia:Sound/list

Más pistas…

Presentaciones y su publicación en la WebTaller de multimedia. Audio y vídeo en el blogInclusión de elementos multimedia en el blog

angelpuente@gmail.compuente@educa.madrid.org

Actividades

• Hemos creado previamente 30 cuentas de Gmail con su correspondiente contraseña que se repartirán entre los 30 participantes del taller. La cuenta tiene este aspecto:

• jornadas01crif@gmail.com• jornadas02crif@gmail.com• …• jornadas30crif@gmail.com

Con cada cuenta de Gmail se ha creado un blog de Blogger asociado a la misma. Las URLs de los blogs tienen este aspecto:• http://tallermultimediacrif01.blogspot.com• http://tallermultimediacrif02.blogspot.com• http://tallermultimediacrif03.blogspot.com• http://tallermultimediacrif04.blogspot.com• http://tallermultimediacrif05.blogspot.com• http://tallermultimediacrif06.blogspot.com• http://tallermultimediacrif07.blogspot.com• http://tallermultimediacrif08.blogspot.com• http://tallermultimediacrif09.blogspot.com• http://tallermultimediacrif10.blogspot.com• http://tallermultimediacrif11.blogspot.com• http://tallermultimediacrif12.blogspot.com• http://tallermultimediacrif13.blogspot.com• http://tallermultimediacrif14.blogspot.com• http://tallermultimediacrif15.blogspot.com

• http://tallermultimediacrif16.blogspot.com• http://tallermultimediacrif17.blogspot.com• http://tallermultimediacrif18.blogspot.com• http://tallermultimediacrif19.blogspot.com• http://tallermultimediacrif20.blogspot.com• http://tallermultimediacrif21.blogspot.com• http://tallermultimediacrif22.blogspot.com• http://tallermultimediacrif23.blogspot.com• http://tallermultimediacrif24.blogspot.com• http://tallermultimediacrif25.blogspot.com• http://tallermultimediacrif26.blogspot.com• http://tallermultimediacrif27.blogspot.com• http://tallermultimediacrif28.blogspot.com• http://tallermultimediacrif29.blogspot.com• http://tallermultimediacrif30.blogspot.com

Y la cuenta colectiva:http://tallermultimediacrif00.blogspot.com

Actividad 1

• Entra en el blog y crea una entrada con una imagen obtenida desde esta dirección:

http://www.compfight.com/• Previamente filtra con imágenes “only”

Creative commons, escribe el nombre del autor y pon un vínculo a la URL de la imagen original.

• Ver ejemplo hecho: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-1.html

Actividad 2 (Flickr)

• Animación con imágenes. • Tienes que ir a Flickr, buscar el usuario

jornadas00crif, encontrar el álbum taller_multimedia, ver como presentación y conseguir el código para embeber (puedes personalizar el tamaño de las diapositivas).

• Ver el código en la siguiente diapositiva.

Código para embeber <object width="500" height="375"> <param name="flashvars"

value="offsite=true&lang=es-us&page_show_url=%2Fphotos%2F38763074%40N05%2Fsets%2F72157618824825734%2Fshow%2F&page_show_back_url=%2Fphotos%2F38763074%40N05%2Fsets%2F72157618824825734%2F&set_id=72157618824825734&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=es-us&page_show_url=%2Fphotos%2F38763074%40N05%2Fsets%2F72157618824825734%2Fshow%2F&page_show_back_url=%2Fphotos%2F38763074%40N05%2Fsets%2F72157618824825734%2F&set_id=72157618824825734&jump_to=" width="500" height="375"></embed></object>

Ver ejemplo realizado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2_26.htmlNota: El álbum será modificado con fotografías obtenidas en las Jornadas y subidas en directo desde el mismo taller.

Actividad 2 (Picasa)

• Lo mismo podemos hacer con un álbum público de Picasa.

• O con el creado al efecto para este taller.• También puedes personalizar el tamaño de las

diapositivas.

Código para embeber <embed type="application/x-shockwave-flash"

src="http://picasaweb.google.es/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.es&hl=es&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.es%2Fdata%2Ffeed%2Fapi%2Fuser%2Fjornadas00crif%2Falbumid%2F5340180124226936193%3Falt%3Drss%26kind%3Dphoto%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Ver ejemplo realizado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2-desde-picasa.htmlNota: Las fotografías del álbum, al igual que en el caso de Flickr serán sustituidas por imágenes de las Jornadas y del propio taller y subidas en el momento.

Actividad 3

• Reproductor de audio play tagger de delicious• Código en la entrada:<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>

Vínculo:< a href=“http://www.educa.madrid.org/cms_tools/files/12818545-e68d-4141-a9cd-

665f19f0b874/tallermultimedia/primavera_vivaldi.mp3”></a>Primavera de Vivaldi

Ver ejemplo realizado:http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2.html

Actividad 4

• Créate una cuenta con divShare UrCloud o espacioPodcast, sube el archivo de sonido que tienes en la carpeta del taller (en la memoria USB) y coloca el reproductor embebido en una entrada del blog.

Ejemplo de código Si no da tiempo, prueba el funcionamiento de este código

(es con el alojamiento y reproducción de UrCloud): <object

data="http://www.urcloud.com/players/playerwpress.swf?soundFile=http://www.urcloud.com/media/4a1c318a80ec7" type="application/x-shockwave-flash" height="24" width="220"><param value="http://www.urcloud.com/players/playerwpress.swf?soundFile=http://www.urcloud.com/media/4a1c318a80ec7" name="movie" /><param value="high" name="quality" /><param value="true" name="menu" /><param value="yes" name="autostart" /><param value="transparent" name="wmode" /></object>

Actividad 5

• Voki: de texto a voz• Créate una cuenta gratuita en Voki, elige un

personaje, adáptalo a tus gustos y escribe un texto para ser dicho por él. Elige antes el idioma y prueba con las distintas voces que se ofrecen.

• Publícalo para obtener el código para embeber en el blog.

Si no te da tiempo, puedes probar con este código:

Ver ejemplo:http://tallermultimediacrif00.blogspot.com/2009/05/vozme-de-texto-voz.htmlPuedes probar a dejar un comentario.

Actividad 6

• Inserción de una presentación con SlideShare• Ve a la web de SlideShare y busca una presentación

pública para embeberla en el blog.• Todavía mucho mejor es crearte una cuenta y subir

tus propias presentaciones.• Recuerda que perderás las transiciones y

animaciones …• Y que se puede asociar un archivo sonoro (alojado en

otro servidor) o un vídeo de YouTube

Ejemplo de código <div style="width:425px;text-align:left" id="__ss_1102462"><object

style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=discoduro2-090304171651-phpapp02&stripped_title=el-disco-duro-virtual-en-educamadrid" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=discoduro2-090304171651-phpapp02&stripped_title=el-disco-duro-virtual-en-educamadrid" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object></div>

Ver el resultado:http://tallermultimediacrif00.blogspot.com/2009/05/actividad-6.html

Actividad 7

Inserción de un vídeo desde YouTube.Ve a la página web de YouTube. Navega por ella.

Cuando encuentres un vídeo que te guste, mira en la columna de la derecha la opción Insertar. Copia el código que se encuentra en la cajita de texto. Antes, observa que puedes personalizar una serie de parámetros: borde o no borde, color del mismo, ancho y alto de la película, que se muestre o no información sobre vídeos relacionados…

Configuración del reproductor y otras opciones

Ver ejemplo: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-7.html

Consideraciones finalesEn un taller de un par de horas no se aprende demasiado.Lo que se puede obtener son pistas, orientaciones,

“vectores”…Pero… nunca ha sido tan fácil seguir aprendiendo.Internet está lleno de buena voluntad. De personas que

quieren compartir con los demás lo que saben. Así aprendemos a diario muchos de nosotros. Así espero que continúes tu camino a partir de este momento.

Y… cuando haya un obstáculo especial:angelpuente@gmail.com

gracias por tu participaciónÁngel R. Puente Pérez. Madrid mayo 2009

Ángel R. Puente Pérez. Madrid mayo 2009 Diseño del díptico: Eutiquiano Merino.

Documents

Transcript of Ángel R. Puente Pérez. Madrid mayo 2009 Diseño del díptico: Eutiquiano Merino.

Díptico AGUACARBO

Díptico informativo

Díptico música

Díptico copago

Díptico Primaria

Díptico FEC

DÍPTICO Mano V.

Díptico encuentro blogs_lr

Díptico CASHP

Díptico - verial.org

EXPERIMENTO CAPILARIDAD DÍPTICO

DÍPTICO 01

Díptico stop

Díptico 2009

Díptico IAF

Díptico duotono

HERMET Óptima Díptico

Portacool díptico

Díptico duotono separaciones

Díptico exposición.