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

TALLER 5
Inclusió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
Á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)
Ángel R. Puente Pérez. Madrid mayo 2009

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.
Ángel R. Puente Pérez. Madrid mayo 2009

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
Ángel R. Puente Pérez. Madrid mayo 2009

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…
<object width=\"400\" height=\"300\"> <param name=\"flashvars\"
value=\"offsite=true&lang=es-
us&page_show_url=%2Fphotos%2Fangelpuente%2Fsets%2F72157600348841485%2Fshow
%2F&page_show_back_url=%2Fphotos%2Fangelpuente%2Fsets%2F72157600348841485%
2F&set_id=72157600348841485&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%2Fangelpuente%2Fsets%2F72157600348841485%2Fshow
%2F&page_show_back_url=%2Fphotos%2Fangelpuente%2Fsets%2F72157600348841485%
2F&set_id=72157600348841485&jump_to=\" width=\"400\"
height=\"300\"></embed></object>
Ángel R. Puente Pérez. Madrid mayo 2009

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)
Ángel R. Puente Pérez. Madrid mayo 2009

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/
Ángel R. Puente Pérez. Madrid mayo 2009

Alojamiento de mp3
• divShare. Alojamiento con reproductor:
http://www.divshare.com/
• Nuestro disco duro virtual de EducaMadrid:
http://www.educa.madrid.org/
Ángel R. Puente Pérez. Madrid mayo 2009

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
Ángel R. Puente Pérez. Madrid mayo 2009

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/
Ángel R. Puente Pérez. Madrid mayo 2009

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/
Ángel R. Puente Pérez. Madrid mayo 2009

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
Ángel R. Puente Pérez. Madrid mayo 2009

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
Ángel R. Puente Pérez. Madrid mayo 2009

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
Ángel R. Puente Pérez. Madrid mayo 2009

Repositorios
• Mediateca de EducaMadrid:
http://mediateca.educa.madrid.org/
• Banco de imágenes y sonidos del IFSTIC:
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
Ángel R. Puente Pérez. Madrid mayo 2009

Más pistas…
Presentaciones y su publicación en la Web
Taller de multimedia. Audio y vídeo en el blog
Inclusión de elementos multimedia en el blog
angelpuente(arroba)gmail.com
puente(arroba)educa.madrid.org
Ángel R. Puente Pérez. Madrid mayo 2009