Algunas ideas sobre la inclusión de elementos multimedia en blogs, webs y wikis

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

2. TALLER 5
Inclusión de multimedia en
páginas web, blogs y wikis
Ángel R. Puente Pérez. Madrid mayo 2009

3. 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

4. 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

5. 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

6. 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

7. 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=quot;400quot; height=quot;300quot;> <param name=quot;flashvarsquot;
value=quot;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=quot;></param> <param name=quot;moviequot;
value=quot;http://www.flickr.com/apps/slideshow/show.swf?v=71649quot;></param> <param
name=quot;allowFullScreenquot; value=quot;truequot;></param><embed type=quot;application/x-shockwave-
flashquot; src=quot;http://www.flickr.com/apps/slideshow/show.swf?v=71649quot;
allowFullScreen=quot;truequot; flashvars=quot;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=quot; width=quot;400quot;
height=quot;300quot;></embed></object>
Ángel R. Puente Pérez. Madrid mayo 2009

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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