Á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
Á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 WebTaller de multimedia. Audio y vídeo en el blogInclusión de elementos multimedia en el blog
angelpuente(arroba)gmail.compuente(arroba)educa.madrid.org
Ángel R. Puente Pérez. Madrid mayo 2009