Á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