Presentación sobre la imagen usada en el curso sobre la web 2.0 del CPR de Azuaga.

1. LA IMAGEN Programa: GIMP Herramientas Webs 2.0: Imágenes: http://picasaweb.google.com/ Imágenes: http://www.flickr.com/ Imágenes: http://www.slide.com/ Imágenes: http://www.bubbleshare.com Imágenes (Puzle): http://www.jigzone.com/ Isaac Buzo Sánchez 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 resolución de una imagen depende del número de píxeles que lleve. Cuanto mayor sea la resolución mas clara es la imagen y más pesado el archivo.

3. LA IMAGEN: Bit ¿Cómo reconoce el ordenador el color que le corresponde a cada pixel? Mediante códigos binarios de 1 y 0. Cada número representa un bit. - Cuantos más amplia se la escala de colores más 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 imágenes, cada uno de ellos con diferentes características. BMP: (Mapa de Bit) - La imagen se forma mediante una parrilla de pixels - No sufre pérdidas de calidad, por lo que resulta apropiado para su manipulación posterior. - Guarda mucha cantidad de información de la imagen. - El tamaño del archivo es muy grande GIF: Formato de intercambio de gráficos - Reduce la paleta de colores a 256 como máximo (8 bits) - Formato idóneo para publicar en la web. - No se recomienda para fotografías 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 imágenes, cada uno de ellos con diferentes características. JPG-JPEG: Joint Photographic Experts Group - Admite una paleta de colores de hasta 16 millones. - Formato bueno para publicar en la web. - La comprensión en este formato puede producir perdidas de calidad asumidas por la disminución del tamaño. TIF-TIFF: TAGGED IMAGE FILE FORMAT - Almacena imágenes 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 más de 256 colores (más 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 imágenes deben ser lo menos pesado posible: facilita la descarga y visualización (además de consumir menos espacio en el servidor donde esté alojada nuestra web). El tamaño del archivo depende: - dimensiones de la imagen, - resolución, - número de colores, - formato. Consejos: 1. No crear archivos de mas de 72 ppp (es la resolución normal de una pantalla de ordenador). No se apreciará mejor un archivo de mas resolución y se tardará más en descargar. 2. Reducir el número de colores de la paleta. 3. Definir las dimensiones de la imagen con el programa de edición gráfica 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 RESOLUCIÓN 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 tamaño en pixeles o porcentaje que queremos reducir. 4º. Igual que para el tamaño, también se puede modificar la resolución. En este caso, se recomienda mantener los 72 ppp que corresponde con la resolución de una pantalla de PC.

8. archivo>>guardar como>> Nombre del archivo Ubicación del archivo Formato de archivo

9. PRACTICAS: 1. REDUCIENDO DIMENSIONES - En la web del banco de imágenes del ISFTIC ( http://bancoimagenes.isftic.mepsyd.es/ ) busca una imagen relacionada con tu especialidad, bájala en formato jpg y guárdala en el ordenador. - Con el GIMP abre la imagen anterior y reduce sus dimensiones un 50%. Guárdala como archivo1.jpg - Realiza dos veces más la misma operación pero reduciendo un 30% y un 10 %. Guarda los archivos resultantes como archivo2.jpg y archivo3.jpg . - Compara el tamaño de los archivos obtenidos con el original y comprueba su reducción. 2. CAMBIANDO FORMATO - En la web del banco de imágenes del ISFTIC ( http://bancoimagenes.isftic.mepsyd.es/ ) busca una imagen relacionada con tu especialidad, bájala en formato bmp y guárdala en el ordenador. - Con el GIMP abre el archivo anterior y guárdalo como formato jpg y gif. - Compara el tamaño de los archivos obtenidos con el original y comprueba su reducción.

10. PICASA: http://picasaweb.google.com/ Se accede usando una cuenta de google

13. Tamaño

15. Añadir usuarios como favoritos Búsquedas 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 imágenes...

19. - Organiza las fotos en álbumes - Localiza las fotos en mapas - Busca fotos en flickr Otras funciones...

20. Para enlazar una imagen en un blog o una web: Tu>>tu galería Selecciona una foto Presiona la lupa Selecciona el tamaño Copia el código 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 presentación de fotografías online con efectos Da efectos a imágenes sueltas

24. Vista previa Agregar fotos Efectos CREAR SLIDESHOW

25. http://www.slide.com/r/_ubNk2PI7z8h71-snO7TxrXiz3ZGd9m1?previous_view=lt_embedded_url RESULTADO: Presentación de imágenes con efectos y música Se puede compartir: buscar en opciones “embed”

26. CREAR FUNPIX Subir imágenes 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 ESTÁS REGISTRADO CLAVES

32. NOMBRE DEL ÁLBUM SUBIR FOTOS PRIVACIDAD TEMAS PARA CREAR NUEVOS ÁLBUMES

33. RESULTADO: PRESENTACIÓN DE IMÁGENES CON EFECTOS Para obtener el código y pegarlo en la web o blog

34. BUBBLESHARE: http://www.jigzone.com/ Para registrarse y entrar

35. Si ya estás registrado indica las claves para entrar... Si no estás 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 Características del puzle y código para incrustar

38. Pinchar en “share” de la imagen que queramos convertir en puzle...: Número y forma de las piezas Tamaño Código para incrustar en la web o blog Vista previa (existen otros modelos hacia abajo de la página)

39. EJEMPLO DE USO: http://personales.ya.com/isaacbuzo/arte/gaudi.html