Manejo de Imágenes SINTAXIS IMÁGENES LINKEADAS

Documentos relacionados
Centro de Nuevos Medios. Fundamentos de imagen digital

Formatos de Imagen JPEG, GIF, PNG, TIFF, PSD

Almacenamiento de datos. CI-1010 Introducción a la computación Prof. Braulio José Solano Rojas ECCI, UCR

Píxel. Un píxel ( picture element ) es la menor unidad homogénea en color que forma parte de una. fotograma de video, gráfico)

UNIDAD I.- INTRODUCCIÓN A LA GRAFICACIÓN POR COMPUTADORA

DIPLOMATURA EN TÉCNICA, CONSERVACIÓN Y CATALOGACIÓN FOTOGRÁFICA DE ARCHIVOS DE LA ADMINISTRACIÓN PÚBLICA. Digitalización de imágenes fotográficas

IMÁGENES ANALÓGICAS E IMÁGENES DIGITALES

Definición, características y usos

Formatos de Imagen 1

Lenguaje computacional 1. Variación de la información en imágenes según el modo y la extensión. Idar González 2do Diseño Gráfico tarea 1

Imagen ::: Conceptos básicos de imagen digital Diseño de materiales multimedia. Web Conceptos básicos de imagen digital

Conceptos básicos. Junio, esmitt ramírez

Mapa de bits y Objetos vectoriales

Tecnologías de la Información n y la Comunicación.

Según su naturaleza existen dos tipos de gráficos con los que puedes trabajar: mapas de bits (píxeles) y vectores.

Adobe Dreamweaver CS6 Imágenes y mapas

Las imágenes vectoriales ó gráficos orientados a objetos

Visión por Computador

Almacenamiento de imágenes digitales. Tercera parte

PRODUCCIÓN DIGITAL I Wenceslao Zavala

so de Photoshop Cur Copyleft - Jorge Sánchez 2006

Comenzando a trabajar con videos.

COLOR, RESOLUCIÓN Y FORMATO DE IMAGEN

Imagen = Histograma. Modificaciones del Histograma

La interfaz de GIMP TUTORIAL. Cómo se crea una imagen NUEVA en GIMP? Cómo empiezo a dibujar con GIMP?

Tratamiento de la Imagen Digital

Tema 2.3. Modos y modelos de color (Photoshop)

IMAGEN DIGITAL. Florentino Marugán. Florentino Marugán 1

Análisis de Señales Digitales

Modos y extensión de la imagen

Tecnología Multimedia

Modos y extensión de la imagen

MODULO 6. TEMA 1: IMPRESIÓN INTRODUCCIÓN

2. Encuadre y redimensionado

CONVENCIONES DEL DISEÑO WEB

Pruebas de modos y extensiones en una imagen

FORMATOS DE IMAGEN DIGITAL

Pruebas de modos y extensiones en una imagen

PHOTOSHOP IMÁGENES VECTORIALES Y MAPAS DE BIT

Tratamiento de imágenes

Evidencia 2 TIPOS Y FORMATOS DE ARCHIVOS. Fannia Irazú Araiza / FACULTAD DE CIENCIAS DE LA COMUNICACIÓN UNIVERSIDAD AUTÓNOMA DE NUEVO LÉON

CONCEPTOS BASICOS IMAGEN DIGITAL. Por Lic. Sandra M. Perez

El comportamiento de una imagen digital

Comunicación Interactiva C L A S E S 3 Y 4 P R O F. M A X T E L L O

Producción Gráfica: Trabajos Prácticos

Mapa de bits. 2 La imagen. Programa de Formación y Actualización Docente 2014-B Diseño básico en Corel Draw Actividad 2

Tema: Estructura de HTML5 y optimización de imágenes.

GUIA 3 Tema: Optimización de imagenes y recursos para la web.

INTRODUCCIÓN A LA INFORMÁTICA Y AL DISEÑO GRÁFICO ASISTIDO POR ORDENADOR

Compresión Fractal de Imágenes. Descripción y Aplicaciones Prácticas

Compresión de imágenes: Fundamentos, técnicas y formatos

ARCHIVOS EN DISEÑO GRÁFICO

GRAFICA - I Tipos de Imágenes: Vectoriales

EDUCASTUR BLOG. Comunidad Educativa de Blogs. Edición de imágenes

Tema 9. Compresión de imágenes

Un píxel es, pues, cada uno de los puntos que compone la matriz de una imagen digital. Es la unidad mínima de visualización de una imagen digital.

Cursito 29: Curso de HTML Parte 5

COMPORTAMIENTOS DE UNA IMAGEN. Simón Sandoval Guzmán Lenguaje Computacional 1

IUNA ESPECIALIZACIÓN EN LENGUAJES ARTÍSTICOS COMBINADOS Junio 2005 FOTOGRAFÍA DIGITAL

Photoshop Nivel Fundamentos

HTML/CSS. Vídeo, audio, imagen

Qué es una imágen digital?

Según su naturaleza existen dos tipos de gráficos con los que puedes trabajar: mapas de bits (píxeles) y vectores.

Medios Informáticos.

El lenguaje HTML. IV. Las imágenes (Duckett cap. 3) Sylvain Hallé Ÿ 8GIF128 Diseño y programación web

INFORMÁTICA Tema: PÁGINA WEB

Capítulo II La Imagen Digital

Profesor: Vicente Destruels Moreno. Información digital

Según su naturaleza existen dos tipos de gráficos con los que puedes trabajar: mapas de bits (píxeles) y vectores.

FORMATOS. paisaje.jpeg. Nombre de archivo extensión

Imagen Digital Fundamentos

Pueden proceder de una fuente digital como una cámara o un escáner. Se puede mostrar en una pantalla.

Variabilidad de la imagen según su modo y extensión

Compresión de Datos Multimedia

Gráficos en L A T E X Edición de Textos Científicos con L A T E X Nivel II

1. Obtención de la imagen digital 1.1. Cámara analógica digital 1.2. Escáner 1.3. Otros dispositivos con cámara fotográfica

ELEMENTOS DEL DISEÑO GRÁFICO IMAGEN DIGITAL

Insumos Fotografía. Tipos de archivo. Obtención del recurso. Edición y optimización

Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Elementos de diseño. Contenido Estático

Diplomado Aplicaciones para el Diseño Web

IDENTIFICACIÓN DE LA ACTIVIDAD PEDAGÓGICA

OPERACIONES AUXILIARES CON TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN. Entornos multimedia. Unidad 3

Aprovecha! Si necesitas guías de corte para elementos, seleccionalos y usa la opción: filter>create>crop marks. Filtros

Fotografía y Manipulación de Imágenes Digitales

ANG, T. (2001). Dictionary of photography and digital imaging. London, Argentum.

INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas

I COMPORTAMIENTO DE UNA IMAGEN Comparación de Variables. Daniela Pardo

Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.

Draw. Dibujo vectorial Profundización. Glosario. Ministerio de Educación, Cultura y Deporte

Comité de Normas Técnicas de la OMPI (CWS)

OCW UPV/EHU ISSN: Aida Vallejo. ARTE Y TECNOLOGÍA: AUDIOVISUALES Tema 1: LA IMAGEN. Fotografía digital 1/32

La definición de digital es toda información representada por una serie de pulsos eléctricos discretos basados en un sistema binario (ceros y unos).

Curso de tratamiento de imágenes con Gimp 2

TECNOLOGÍA DE LA COMUNICACIÓN II PROYECTO INTEGRADOR PARTE III

Análisis de imágenes digitales

Introducción a los fundamentos tecnológicos de la producción digital II

Tratamiento de la Imagen Digital

Tema 8: ALMACENAMIENTO

Capitulo 2: Introducción a RAW de cámara

IMAGEN DIGITAL Digitalización de imágenes

Transcripción:

SINTAXIS Manejo de Imágenes IMG: Es el elemento que permite insertar una imagen dentro de un documento HTML. Siempre acompañado por el tag SRC (Source), que define el nombre de la imagen. Ejemplo IMAGENES PROPIEDADES ADICIONALES ALT: Crea una etiqueta, la cual aparece al momento del que el cursor esta encima de una imagen. ALIGN: Alineación de la imagen (TOP, MIDDLE, BOTTOM) WIDTH: Ancho de la imagen HEIGHT: Altura de la imagen EJEMPLO IMÁGENES LINKEADAS Tambien podemos hacer que una imagen nos lleve a un link.

Ejemplo Imágenes en la Web Recursos: Adobe Photoshop versión 5.0 ó 6.0.- Editor de imágenes (www.adobe.com) ACDSee.- Visualizador de imágenes (www.acdsee.com) Referencia: ROMANIELLO, Steve. Mastering Photoshop 6. Editorial SYBEX. BLATNER, David. Real World of Photoshop 6. Editorial Adobe Peachpit Press. IMÁGENES EN LA WEB En una pagina Web, puede haber tres tipos de imágenes: JPEG (Joint Photographic Experts Group).- Es un formato de imagen muy usado en la web, sin embargo, al momento de ser comprimida la imagen pierde calidad. GIF (Grpahics Interchange Format).- Es un formato en el cual la calidad es mas importante que el tamaño. PNG (Portable Network Graphics).- Sucesor de GIF, soporta mas colores que las imágenes GIF, sin embargo no lo soportan navegadores antiguos. Multimedia Multimedia es la fusión de video, audio, texto y gráficas en un multi-nivel, basado en producción de computadoras que puede ser experimentado interactivamente. NO USAR MULTIMEDIA CUANDO NO ES NECESARIO!!!!!!!! Sistemas de Color RGB (Red, Green, Blue) Existen principalmente 4 sistemas de color: RGB (Red, Green, Blue) CMYK (Cyan, Magenta, Yellow, Black) Grayscale (Escala de grises) BW (Back and White) El modo de escala de grises es diferente a blanco y negro Es un sistema de color aditivo, es decir, entre más color, más brillo Se utiliza en la Web y en CRT (Cathod Ray Tube) Los valores van de 0 a 1, ó de 0 a 255 [0,0,0] = negro [1,1,1] = blanco Nota: Existen oros sistemas de color que no se verán en este curso

CMYK (Cyan, Magenta, Yellow, Black) Sistema de color substractivo, es decir, entre más color, menos brillo Usada en impresoras Los valores van de 0 a 1, ó de 0 a 255 [0,0,0] = blanco [1,1,1] = negro Compresión de Imágenes Existen principalmente dos tipos (algoritmos) de compresión de imágenes: Lossless.- Libre de errores. Elimina redundancia. Preserva detalles en la imagen y cuando la imagen es descomprimida es idéntica a la imagen original. Lossy.- Introduce cierto error. Elimina irrelevancia. Imágenes más pequeñas pero con perdida de calidad. La momento de descompresión la imagen no es igual a la original. Tipos de Compresión Run Length Encoding (RLE) Lempel Ziv Welch (LZW) Joint Photographic Experts Group (JPEG) Wavelet Compression International Telegraph and Telekeyed Consultative Comitee (CCITT) Run Time Encoding (RLE) Es buen formato de comprensión para caricaturas y escritos Bueno para imágenes con grandes áreas del mismo color Malo para imágenes ruidosas Técnica conocida desde 1952 y usada en las máquinas de Fax Existe también el 2D Run Time Encoding. Utiliza la técnica de lossless compression Usada en PCX, TGA comprimida y TIFF Lempel Ziv Welch (LZW) Buen formato para imágenes ruidosas Bueno para imágenes con grandes áreas del mismo color Compresión lenta pero buen método Algoritmo complejo Utiliza la técnica de lossless compression Usado en GIF, TIFF, PNG, ARJ, ZIP, RAR Joint Photographic Experts Group (JPEG) Basado en la técnica DCT (Discrete Cousine Technique) Muy útil, usado y rápido Introduce un poco de ruido en la imagen Usado en JPEG, PDF y formatos PostScript

Wavelet Compression Muy eficiente No introduce ruido Usado en LWF Formato JPEG Sus siglas significan: Joint Photographic Experts Group Usado para: comprimir archivos y usarlos en la Web Pueden ser guardados en RGB, CMYK y escala de grises Soportan 24 bits de color Tiene opciones como la de compresión, que va de 0 a 13 puntos, entre más comprimida, menos espacio ocupará. Formato JPEG 2 En el formato de imagen, el cual sirve para decidir como mostrar la imagen en el navegador. Existen 3 opciones: Baseline Standard.- Despliega la imagen completamente cuando es cargada en el servidor. Baseline Optimized.- Carga la imagen en franjas conforme la imagen es recibida. Progressive.- La imagen aparece borrosa y se aclara conforme se carga. Formato GIF Sus siglas significa: Graphics Interchange Format Hecho por Compuserve Diseñado cuando el tamaño es más importante que la calidad Soporta 8 bits de color (256 colores) Utiliza la técnica de LZW Formato PNG Sus siglas significan: Portable Network Graphics Soporta transparencia y 16 millones de colores, 24 bits de colores Soporta RGB y Escala de grises Usa la técnica de LZW Designado a ser el sucesor de GIF Desgraciadamente no todos los navegadores soportan este formato.

Sistemas de color TRUE COLOR (32 bits).- utiliza RGBA, donde A (alpha) es transparencia. Tenemos por lo tanto 8 bits para R+8bits para G +8bits para B+ 8bits para A. TRUE COLOR (24 bits).- 8 bits para R+8 para G + 8 para B HIGH COLOR (16 bits).- 5 bits para R+6 para G+5 para B. Porqué? INDEX COLOR (8 bits).- Es decir 356 colores BITMAP COLOR (1 bit).- o es negro o blanco Calculo de tamaño Para calcular el tamaño de una imagen, tenemos que conocer la resolución. Una vez conocida esta resolución, entonces aplicamos esta formula: [Res(width)xRes(height)xnúm de bits soportados]/1024 Esto es para KB, para pasarlo a MB solo lo dividimos entre 2(1024) El número de bits soportados es entre el número de bits del sistema de color entre 8* Calculo de tamaño Calcule el tamaño en MB para una imagen de 500 x 300 en: TRUE COLOR de 32 y 24 bits, high color, index color y bitmap. True color de 32 bits: (500x300x4)/2(1024)= 0.57 MB o 585.93 KB True color de 24 bits: (500x400x3)/2(1024)= 0.429 MB o 439.45 KB High color: (500x300x2)/2(1024)=0.286 MB o 292.96 KB Index color: (500x300x1)/2(1024)= 0.143 MB o 146.98 KB Bitmpa: (500*300/8)/2(1024)= 0.017 MB o 18.31 KB