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

Presentación del tema: "Ángel R. Puente Pérez. Madrid mayo 2009 Diseño del díptico: Eutiquiano Merino."— Transcripción de la presentación:

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 2009Origen 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 http://picasaweb.google.es/home Desde Flickr: http://www.flickr.com/ http://www.flickr.com/ O… Slide.com: http://www.slide.com/ http://www.slide.com/ RockYou: http://www.rockyou.com/http://www.rockyou.com/ Lytebox: ejemplo ejemplo Scrapblog : ejemploejemplo Á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… Á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/ http://www.divshare.com/ Nuestro disco duro virtual de EducaMadrid: http://www.educa.madrid.org/ 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: ejemploejemplo Las listas de Youtube Ver ejemploejemplo Dailymotion: http://www.dailymotion.com/es http://www.dailymotion.com/es Jukebox: ejemploejemplo Á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 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 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 todoCreative Commons Ángel R. Puente Pérez. Madrid mayo 2009

17 Repositorios Mediateca de EducaMadrid: http://mediateca.educa.madrid.org/ http://mediateca.educa.madrid.org/ Banco de imágenes y sonidos del ISFTIC: http://bancoimagenes.isftic.mepsyd.es/ http://bancoimagenes.isftic.mepsyd.es/ Compfight. Imágenes: http://www.compfight.com/ http://www.compfight.com/ FlickrCC. Imágenes: http://flickrcc.bluemountains.net/ http://flickrcc.bluemountains.net/ Wikipedia. Música (formato.ogg): http://en.wikipedia.org/wiki/Wikipedia:Sound/list 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@gmail.com puente@educa.madrid.org Ángel R. Puente Pérez. Madrid mayo 2009

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

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

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

22 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 http://tallermultimediacrif00.blogspot.com/2009/05/actividad-1.html Ángel R. Puente Pérez. Madrid mayo 2009

23 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).Flickr Ver el código en la siguiente diapositiva. Ángel R. Puente Pérez. Madrid mayo 2009

24 Código para embeber Ver ejemplo realizado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2_26.html Nota: El álbum será modificado con fotografías obtenidas en las Jornadas y subidas en directo desde el mismo taller. Ángel R. Puente Pérez. Madrid mayo 2009

25 Actividad 2 (Picasa) Lo mismo podemos hacer con un álbum público de Picasa.Picasa O con el creado al efecto para este taller. También puedes personalizar el tamaño de las diapositivas. Ángel R. Puente Pérez. Madrid mayo 2009

26 Código para embeber Ver ejemplo realizado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2-desde-picasa.html Nota: 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. Ángel R. Puente Pérez. Madrid mayo 2009

27 Actividad 3 Reproductor de audio play tagger de delicious Código en la entrada: Vínculo: Primavera de Vivaldi Ver ejemplo realizado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-2.html Ángel R. Puente Pérez. Madrid mayo 2009

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

29 Ejemplo de código Si no da tiempo, prueba el funcionamiento de este código (es con el alojamiento y reproducción de UrCloud): Ángel R. Puente Pérez. Madrid mayo 2009

30 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.Voki Publícalo para obtener el código para embeber en el blog. Ángel R. Puente Pérez. Madrid mayo 2009

31 Si no te da tiempo, puedes probar con este código: AC_Voki_Embed(300, 400, '4caf5acae61e0dfc31edbf31d282322b', 1453470, 1,'', 0); Ver ejemplo: http://tallermultimediacrif00.blogspot.com/2009/05/vozme-de-texto-voz.html Puedes probar a dejar un comentario. Ángel R. Puente Pérez. Madrid mayo 2009

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

33 Ejemplo de código Ver el resultado: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-6.html Ángel R. Puente Pérez. Madrid mayo 2009

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

35 Configuración del reproductor y otras opciones Ver ejemplo: http://tallermultimediacrif00.blogspot.com/2009/05/actividad-7.html Ángel R. Puente Pérez. Madrid mayo 2009

36 Consideraciones finales En 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