1. LA IMAGEN Programa:GIMP Herramientas Webs 2.0: Imgenes:http://picasaweb.google.com/ Imgenes:http://www.flickr.com/ Imgenes:http://www.slide.com/ Imgenes:http://www.bubbleshare.com Imgenes (Puzle):http://www.jigzone.com/ Isaac BuzoSnchez IES Extremadura (Montijo) Curso: La web 2.0 en el aula de Secundaria CPR AZUAGA (Mayo 2009)

2. LA IMAGEN: Pixel * La imagen est formada por puntos de colores que dan la forma a la imagen. Cada punto de color es un pixel. * La resolucin de una imagen depende del nmero de pxeles que lleve. Cuanto mayor sea la resolucin mas clara es la imagen y ms pesado el archivo. 3. LA IMAGEN: Bit Cmo reconoce el ordenador el color que le corresponde a cada pixel? Mediante cdigos binarios de 1 y 0. Cada nmero representa un bit. - Cuantos ms amplia se la escala de colores ms bits necesitar para su almacenamiento: - 1 bit: 2 colores (0 1, blanco o negro) - 2 bits: 4 colores (00, 01, 10, 11) - 3 bits: 8 colores (000, 001, 010, 100.....) - 8 bits: 256 colores - 24 bits: 16.700.700 colores Fuente: http://www.isftic.mepsyd.es/formacion/materiales/107/cd/index.htm 4. LA IMAGEN: Formatos Existen diferentes formatos para guardar las imgenes, cada uno de ellos con diferentes caractersticas. BMP: (Mapa de Bit) - La imagen se forma mediante una parrilla de pixels - No sufre prdidas de calidad, por lo que resulta apropiado para su manipulacin posterior. - Guarda mucha cantidad de informacin de la imagen. - El tamao del archivo es muy grande GIF: Formato de intercambio de grficos - Reduce la paleta de colores a 256 como mximo (8 bits) - Formato idneo para publicar en la web. - No se recomienda para fotografas de calidad (la paleta de colores se reduce) Fuente: http://www.isftic.mepsyd.es/formacion/materiales/107/cd/index.htm 5. LA IMAGEN: Formatos Existen diferentes formatos para guardar las imgenes, cada uno de ellos con diferentes caractersticas. JPG-JPEG: Joint Photographic Experts Group - Admite una paleta de colores de hasta 16 millones. - Formato bueno para publicar en la web. - La comprensin en este formato puede producir perdidas de calidad asumidas por la disminucin del tamao. TIF-TIFF: TAGGED IMAGE FILE FORMAT - Almacena imgenes de muy buena calidad. - Puede utilizar de 1 a 32 bits. - Buena para guardar archivos originales - Genera archivos muy grandes PNG: PORTABLE NETWORK GRAPHIC - Formato reciente (no es soportable por todos los navegadores - Puede emplear ms de 256 colores (ms que el formato GIF) Fuente: http://www.isftic.mepsyd.es/formacion/materiales/107/cd/index.htm 6. CONSEJOS PARA INSERTAR UNA IMAGEN EN LA WEB: Los archivos de las imgenes deben ser lo menos pesado posible: facilita la descarga y visualizacin (adems de consumir menos espacio en el servidor donde est alojada nuestra web). El tamao del archivo depende: - dimensiones de la imagen, - resolucin, - nmero de colores, - formato. Consejos: 1. No crear archivos de mas de 72 ppp (es la resolucin normal de una pantalla de ordenador). No se apreciar mejor un archivo de mas resolucin y se tardar ms en descargar. 2. Reducir el nmero de colores de la paleta. 3. Definir las dimensiones de la imagen con el programa de edicin grfica y no con el editor web. 4. Usar archivos GIF, PNG o JPG para publicar en la web y el resto de formatos para guardar los originales. Fuente: http://www.isftic.mepsyd.es/formacion/materiales/107/cd/index.htm 7. DIMENSIONES Y RESOLUCIN DE LA IMAGEN:imagen >> escalar la imagen 1. El icono de la cadena debe estar cerrado para que la imagen se reduzca proporcionalmente. 2. Se selecciona la unidad de medida en pixeles o porcentaje. Recomendable el uso de porcentajes. 3. Fijar el tamao en pixeles o porcentaje que queremos reducir. 4. Igual que para el tamao, tambin se puede modificar la resolucin. En este caso, se recomienda mantener los 72 ppp que corresponde con la resolucin de una pantalla de PC. 8. archivo>>guardar como>> Nombre del archivo Ubicacin del archivo Formato de archivo 9. PRACTICAS: 1. REDUCIENDO DIMENSIONES - En la web del banco de imgenes del ISFTIC ( http://bancoimagenes.isftic.mepsyd.es/ ) busca una imagen relacionada con tu especialidad, bjala en formatojpgy gurdala en el ordenador. - Con elGIMPabre la imagen anterior y reduce sus dimensiones un 50%. Gurdala comoarchivo1.jpg - Realiza dos veces ms la misma operacin pero reduciendo un 30% y un 10 %. Guarda los archivos resultantes comoarchivo2.jpgyarchivo3.jpg . - Compara el tamao de los archivos obtenidos con el original y comprueba su reduccin. 2. CAMBIANDO FORMATO - En la web del banco de imgenes del ISFTIC ( http://bancoimagenes.isftic.mepsyd.es/ ) busca una imagen relacionada con tu especialidad, bjala en formatobmpy gurdala en el ordenador. - Con el GIMP abre el archivo anterior y gurdalo como formato jpg y gif. - Compara el tamao de los archivos obtenidos con el original y comprueba su reduccin. 10. PICASA:http://picasaweb.google.com/ Se accede usando una cuenta de google 11. 12. 13. Tamao 14. 15. Aadir usuarios como favoritos Bsquedas de fotos 16. FLICKR:http://www.flickr.com/ Se accede usando una cuenta de yahoo Si no tienes cuenta en yahoo puedes crearte una 17. Subir imgenes... 18. 19. - Organiza las fotos en lbumes - Localiza las fotos enmapas - Busca fotos en flickr Otras funciones... 20. Para enlazar una imagen en un blog o una web:Tu>>tu galera Selecciona una foto Presiona la lupa Selecciona el tamao Copia el cdigo y pega en la web 21. EJEMPLO DE USO: http://personales.ya.com/isaacbuzo/primeroeso/escritura_antigua.html 22. SLIDE:http://www.slide.com/ 23. Crea una presentacin de fotografas online con efectos Da efectos a imgenes sueltas 24. Vista previa Agregar fotos Efectos CREAR SLIDESHOW 25. http://www.slide.com/r/_ubNk2PI7z8h71-snO7TxrXiz3ZGd9m1?previous_view=lt_embedded_url RESULTADO: Presentacin de imgenes con efectos y msica Se puede compartir: buscar en opciones embed 26. CREAR FUNPIX Subir imgenes Efectos Vista previa 27. http://www.slide.com/r/SBx1p5kL7j_gMOMnxSxtJzzwyEt4KIZ5?previous_view=mscd_embedded_url&view=original RESULTADO: Imagen con efectos Se puede compartir: buscar en opciones embed 28. EJEMPLO DE USO:http://personales.ya.com/isaacbuzo/primeroeso/egipto_religion.html 29. OTRAS FUNCIONES SLIDE FUNCIONES PARA REDES SOCIALES LIBRO DE VISITAS CREA EFECTOS EN VIDEOS DE YOUTUBE 30. http://www.slide.com/r/rCd-YA66xz-sbyqvH44p5gocsGU6ghDa?previous_view=mscd_embedded_url&view=original LIBRO DE VISITAS EFECTOS EN VIDEOS DE YOUTUBE 31. BUBBLESHARE: http://www.bubbleshare.com/ REGISTRARSE ENTRAR SI YA ESTS REGISTRADO CLAVES 32. NOMBRE DEL LBUM SUBIR FOTOS PRIVACIDAD TEMAS PARA CREAR NUEVOS LBUMES 33. RESULTADO: PRESENTACIN DE IMGENES CON EFECTOS Para obtener el cdigo y pegarlo en la web o blog 34. BUBBLESHARE: http://www.jigzone.com/ Para registrarse y entrar 35. Si ya ests registrado indica las claves para entrar... Si no ests registrado pincha aqu y entra tus datos para registrarte 36. Puzles creados Subir nueva foto 37. Fotos subidas Editar propiedades de la imagen Borrar imagen Caractersticas del puzle y cdigo para incrustar 38. Pinchar en sharede la imagen que queramos convertir en puzle...:Nmero y forma de las piezas Tamao Cdigo para incrustar en la web o blogVista previa (existen otros modelos hacia abajo de la pgina) 39. EJEMPLO DE USO: http://personales.ya.com/isaacbuzo/arte/gaudi.html