Daw diw -Diseño de interfaces web ud.5 imagenes

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 3
 
  1. Ciclo Desarrollo Apps Web Curso 2º – Módulo DISEÑO DE INTERFACES WEB Profesor: Juan Farfán Espuny Unidad 5.- Imágenes Índice de contenidos 1.-…
Share
Transcript
  • 1. Ciclo Desarrollo Apps Web Curso 2º – Módulo DISEÑO DE INTERFACES WEB Profesor: Juan Farfán Espuny Unidad 5.- Imágenes Índice de contenidos 1.- Imágenes.........................................................................................................................................2 1.1.- Imagen digital..........................................................................................................................3 1.2- Tipos de imagen........................................................................................................................4 1.3- Formatos de imagen.................................................................................................................5 1.4.- Compresión de imágenes.........................................................................................................6 1.5.- Atributos: Resolución, tamaño, profundidad de color.............................................................7 1.6.- Tipos de imagen en la Web......................................................................................................8 1.7.- Logos, iconos, banners e imágenes.........................................................................................9 2.- Software para la gestión de recursos gráficos...............................................................................10 2.1.- Software de visualización de imágenes.................................................................................11 2.2.- Software de creación de recursos gráficos............................................................................12 2.3.- Software de edición de imágenes..........................................................................................14 2.4.- Software de conversión de formatos de imágenes................................................................15 2.5.- Optimización de imágenes para la Web.................................................................................16 3.- Las imágenes y la ley de la propiedad intelectual.........................................................................17 3.1.- Derechos de la propiedad intelectual.....................................................................................17 3.2.- Derechos de autor..................................................................................................................18 3.3.- Licencias................................................................................................................................19 3.4.- Registro de contenido............................................................................................................20 Diseño de interfaces web – 2º DAW 1/21 Unidad 5 Profesorado de la JA
  • 2. 1.- Imágenes. Caso práctico Antonio ha realizado la guía de estilo para el proyecto de la página web de la panadería "Migas Amigas" y, ha reflejado en dicha guía el formato y el tamaño que deberán tener todas las imágenes de los productos que allí se elaboran. Ha tenido que evaluar los distintos tipos de imágenes, sus formatos y los diferentes sistemas de compresión para elegir el formato y el tamaño más adecuado, tratando de que la página fuese lo más ligera posible sin perder calidad. Sabe que las imágenes de este proyecto en concreto son muy importantes para la consecución del objetivo final de la panadería, que no es otro que vender más productos. En la unidad 1 de este curso, Planificación de interfaces gráficas, hablamos de la percepción como proceso de recogida y tratamiento de la información sensorial y dijimos, en aquel momento, que la percepción consiste en recibir, a través de los sentidos, las imágenes, sonidos, impresiones o sensaciones externas y elaborar e interpretar toda la información recibida. También hablamos en dicha unidad de que las personas dedicadas al diseño deben comunicar las ideas y conceptos, de una forma clara y directa, por medio de los elementos gráficos. Decíamos que un sitio web debe ser atractivo para mantener la atención del usuario, pero que también debe ser coherente en el uso de los elementos gráficos. Que los recursos gráficos se emplean mucho en la Web y que, si se utilizan adecuadamente, pueden mejorar el aprendizaje del usuario y añadir valor a nuestro sitio pero que, si se utilizan inadecuadamente, producen el efecto contrario. También dijimos que, a la hora de emplear imágenes en la web, debemos tener en cuenta que las imágenes son archivos que tienen un tamaño y, que para poder visualizarse correctamente deben descargarse previamente y que, por esta razón, solo usaremos aquellas imágenes que complementen nuestro sitio web y trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio. Por otro lado, en la unidad 2 de accesibilidad web dijimos que, para que cualquier persona que quiera utilizar la web pueda hacerlo, el contenido de la web debe ser perceptible, es decir, que la información que se presenta no puede ser invisible para todos los sentidos del usuario y, es por ello, que los componentes de la interfaz de usuario deben estar presentados de tal manera que los usuarios lo puedan percibir. Esto, aplicado a las imágenes, significa que los usuarios con discapacidad visual deben tener acceso a la información transmitida por las imágenes proporcionando una alternativa textual que transmita dicha información. En esta unidad 5, sobre imágenes como contenidos multimedia en la web, estudiaremos las imágenes: sus características, cómo se crean y cómo se gestionan para un mejor aprovechamiento de los recursos de la web. Diseño de interfaces web – 2º DAW 2/21 Unidad 5
  • 3. 1.1.- Imagen digital. Cuando empleamos nuestra cámara de fotos o nuestro móvil para realizar una fotografía, o empleamos un dispositivo para escanear una fotografía antigua, incluso cuando hacemos una captura de pantalla y la almacenamos en una archivo, estamos creando una imagen digital. Pero, ¿qué es una imagen digital? La imagen digital es la representación bidimensional de una imagen empleando bits (ceros y unos) que se emplea a instancias de la informática y cualquier dispositivo de tipo digital para almacenar toda la información relativa a formas, colores y luminosidad de una imagen. Cuando vemos un paisaje montañoso, nuestros ojos perciben la cercanía o lejanía de las montañas por sus diferentes tonalidades. Las más oscuras son las que se encuentran más cerca y las claras son las que se encuentran más lejos. Cuando sacamos una fotografía con una cámara digital a este tipo de paisaje, la imagen digital que genera nuestra cámara tiene que almacenar esa información. En la imagen 1 puedes ver un paisaje donde se han enmarcado con diferentes colores y se han etiquetado con números las montañas en función de su profundidad. En amarillo y con el número 1, están las montañas más cercanas. En rojo y con el número 2, está la montaña que se encuentra un poco más lejos que las anteriores. Por último, en blanco, con puntos y rayas negras y con el número 3, están las montañas más lejanas de la fotografía. Si te fijas, verás que el contraste de los colores y la nitidez de las montañas es mayor cuanto más cerca están. Una de las ventajas de las imágenes digitales es que no se degradan con el tiempo. Siempre tendrán los mismos colores. Incluso, gracias a los continuos avances en la tecnología de los monitores, se verán mejor cuanto más tiempo pase, al contrario de lo que ocurría con las fotografías en color tradicionales que perdían color con el paso del tiempo. La definición dada hasta ahora de imagen digital no abarca todo lo que representa sino que va más allá. Podemos decir que en la imagen digital se unen, gracias a los últimos avances en informática, el mundo de la fotografía y el de la pintura (Imagen 2). La fotografía es objetiva y realista porque recoge instantáneas del mundo real. La pintura, sin embargo, es subjetiva y puede ser del todo irreal porque depende de la idea concebida por un artista que es totalmente libre a la hora de plasmar en un lienzo su propia realidad. Diseño de interfaces web – 2º DAW 3/21 Unidad 5 Imagen 1: Paisaje con varios fondos Imagen 2: Informática + fotografía + pintura
  • 4. Una imagen digital es, por tanto, el resultado visual final de una imagen capturada inicialmente por un dispositivo que almacena la información digitalmente y que puede ser transformada, posteriormente, usando los medios informáticos. 1.2- Tipos de imagen. ¿Son todas las imágenes digitales iguales? ¿Se puede emplear cualquier imagen digital para cualquier finalidad? Las imágenes digitales pueden ser de dos tipos: de mapas de bits (también llamadas imágenes rasterizadas, imágenes matriciales o bitmap y vectoriales. Estos tipos de imágenes tienen diferentes características y aplicaciones. La siguiente tabla muestra las características de cada tipo de imagen. Características de los tipos de imágenes. DE MAPAS DE BITS. VECTORIALES. Se construyen con píxeles. Se construyen a partir de funciones matemáticas que representan objetos geométricos (polígonos, segmentos, arcos, etcétera). Pierden calidad al hacer un zoom sobre la imagen para aumentar su tamaño porque el número de píxeles sigue siendo el mismo. No pierden calidad cuando se hace un zoom para aumentar mucho el tamaño. El tamaño o peso del archivo es proporcional al tamaño de la imagen. El tamaño del archivo es independiente del tamaño de la imagen. Normalmente ocupará menos que los mapas de bits. Se usa para representar imágenes realistas o complejas: fotografías, ilustraciones. Se usa para representar dibujos, esquemas, planos. Al ampliar la imagen 3 puedes observar la diferencia que existe al ampliar un trozo de una imagen de mapa de bits (en la parte izquierda de la imagen) y al ampliar un trozo de una imagen vectorial (en la parte derecha de la imagen). Puedes comprobar que en el primer caso los bordes de las figuras se deforman (se ven como si fueran los dientes de una sierra), mientras en el segundo caso los bordes están formados por líneas y se siguen viendo perfectamente. Contesta: ¿Son las imágenes de tipo vectorial las más apropiadas para almacenar una fotografía de un cumpleaños? Verdadero o Falso. Diseño de interfaces web – 2º DAW 4/21 Unidad 5 Imagen 3: Tipos de formatos de imagen
  • 5. 1.3- Formatos de imagen. Cualquier información almacenada en un soporte electrónico lo está en un determinado formato de archivo que le va a indicar al ordenador el tipo de archivo con el que se está trabajando. Las imágenes, al igual que cualquier documento, hoja de cálculo, presentación, etcétera, tienen un formato de almacenamiento. Tanto las cámaras de fotos, el escáner o los programas empleados para crear o modificar imágenes digitales tienen un formato de almacenamiento preestablecido, aunque nos permitirán almacenar en distintos formatos. Hay muchos formatos para almacenar imágenes. En la tabla 1 daremos, simplemente, una relación por orden alfabético de los más conocidos, indicando las siglas por las que son conocidos que, normalmente, coincide con la extensión del nombre del archivo, el significado de estas siglas en inglés, el nombre de algún programa que lo utiliza y el tipo de imagen que almacena. En el siguiente apartado veremos algunos de ellos con más profundidad. Tabla 1. Tipos de formatos de imágenes (orden alfabético de la extensión del archivo) Siglas del formato Significado de las siglas (en inglés) Programas que lo usan Tipo AI Adobe Illustrator Artwork. Adobe Illustrator. Vectorial BMP Bit Map Microsoft Windows. Mapa de bits. CDR CorelDraw. CorelDraw Vectorial. CPT Corel Photo-paint Corel Photo-paint Mapa de bits. DXF Drawing eXchange (or interchange) Format. Autodesk. Vectorial. EPS Encapsulated PostScript. Adobe Photoshop. Ambos. FH* Macromedia Freehand Document. Macromedia Freehand. Vectoriales. FLA Macromedia Flash Adobe Flash. Vectorial. GIF Graphics Interchange Format. Mapa de bits. JPG, JPEG Joint Photographic Experts Group. Paint Shop Pro, Photoshop, GIMP, … Mapa de bits. ODG Open Document Graphic. OpenOffice.org Draw. Vectorial PCX Picture eXchange. Paintbrush Mapa de bits. PIC, PCT Picture. PC Paint. Ambos PNG Portable Network Graphics. Navegadores web. Mapa de bits. PSD PhotoShop Document. Adobe Photoshop. Mapa de bits. PSP PaintShop Pro. PaintShop Pro. Mapa de bits. SVG Scalable Vector Graphics. CSS y XML Vectorial TIF, TIFF Tagged Image File Format. Gráficos de imprenta y escáner. Mapa de bits. WMF Windows Metafile. Aplicaciones Microsoft. Vectorial Diseño de interfaces web – 2º DAW 5/21 Unidad 5
  • 6. 1.4.- Compresión de imágenes. Hemos visto en el apartado anterior que existen multitud de formatos de almacenamiento de imágenes digitales. Algunos son formatos exclusivos de un determinado programa como ocurre con el CDR o el PSD, entre otros. Aunque nosotros podamos trabajar en cualquiera de los formatos vistos en el apartado anterior, a la hora de incorporar una imagen a una web, tendremos que utilizar uno de los tres formatos siguientes: GIF, JPG o PNG. Estos formatos son soportados por todos los navegadores web, aunque en el caso del formato PNG, por ser un formato más moderno de características más avanzadas, necesita navegadores con versiones actualizadas. Aunque almacenes la imagen en un formato para la web, guarda siempre una copia de la imagen digital en su versión original. Nunca se sabe cuando volverás a necesitarla para hacerle una modificación. ¿Cuál crees que es el motivo de que las personas que han desarrollado los navegadores hayan escogido estos formatos y no otros? Una de las razones principales es el espacio que ocupan las imágenes y el tiempo que tardan en descargarse. Cuando visitamos por primera vez una página Web se tiene que descargar el código fuente de la página y todas las imágenes que figuran en su página inicial. • El formato GIF fue el primero en aparecer en Internet, creado por CompuServe en 1987, es un formato empleado en imágenes que tienen entre 2 y 256 colores. Su principal uso sigue siendo el mostrar imágenes animadas en las páginas web o en la creación de los iconos que acompañan a los enlaces y los logotipos. En general, resulta apropiado para todas las imágenes que tengan grandes áreas de color sólido. • El formato JPG se emplea en fotografía digital y para imágenes con más de 256 colores, logrando almacenar imágenes fotográficas de gran tamaño en poco espacio. No es conveniente utilizar este formato en las imágenes con colores sólidos, siendo muy recomendable cuando la imagen tiene gran variedad de colores distintos o de colores monocromáticos. • El formato PNG es el último de los tres en aparecer. Este formato se ha convertido en la alternativa del formato GIF, permitiendo el uso de más de 256 colores, lo que supone una gran ventaja. Diseño de interfaces web – 2º DAW 6/21 Unidad 5
  • 7. 1.5.- Atributos: Resolución, tamaño, profundidad de color. Ahora que ya sabemos algo más sobre las imágenes digitales y hemos visto que los formatos más empleados en la web son del tipo de mapas de bits, es el momento de profundizar en las propiedades que caracterizan a este tipo de imágenes. Ya vimos anteriormente que las imágenes de mapas de bits están formadas por píxeles y hacíamos referencia a los dientes de sierra que se veían al ampliar la imagen. Esto es así porque el ojo humano no es capaz de percibir, en un tamaño normal, la multitud de cuadrados de colores distribuidos en filas y columnas que componen una imagen. Estos cuadrados se hacen perceptibles solo cuando la imagen sufre una ampliación lo suficientemente grande. Teniendo en cuenta que cada píxel es uno de esos cuadrados, el número de cuadrados que tenga una imagen determinará el tamaño de la misma. Así, por ejemplo, una imagen que tenga 60 cuadrados o píxeles de ancho y 60 cuadrados o píxeles de alto tendrá un tamaño de 3600 píxeles. ¿Nos basta esta información para saber cuánto ocupará una imagen en nuestro espacio de almacenamiento? ¿Nos basta esta información para saber cuánto espacio ocupará en nuestro papel al imprimirla? La respuesta a ambas preguntas es NO pero, si no sabes porqué, tendrás que seguir leyendo el resto del apartado. Necesitamos conocer la “profundidad de color” para poder contestar a la primera pregunta y necesitamos conocer la “resolución” para poder contestar a la segunda. La profundidad de color es una característica de las imágenes que nos indica el número de bits de información que se almacenan en disco por cada píxel, el cual está relacionado con el número de colores que se puedan representar en cada píxel. Teniendo esto en cuenta, si en la imagen anterior de 3600 píxeles, cada uno de estos píxeles puede tener un máximo de 256 colores distintos, la imagen necesitará 3600 bytes de espacio en disco para su almacenamiento. En cambio, si cada píxel puede ser de 16777216 colores diferentes necesitará 10800 bytes. Sin embargo, si queremos saber el espacio que ocupará la imagen en el papel sabiendo su ancho y su alto en píxeles, tendremos que tener en cuenta otra característica de las imágenes: la resolución con la que se va imprimir. Este dato es también necesario para averiguar el tamaño en píxeles que tendrá una imagen escaneada, ya que lo que tenemos en este caso es un tamaño en centímetros. La resolución es el número de puntos o píxeles por pulgada (ppp) con la que se imprime o escanea una imagen, aunque también se llama resolución al número de píxeles que pueden tener las fotografías que se realizan con una cámara de fotos digital (por ejemplo: 12 megapíxeles o 12 millones de píxeles). Diseño de interfaces web – 2º DAW 7/21 Unidad 5
  • 8. 1.6.- Tipos de imagen en la Web. Una fotografía en color realizada con una cámara de fotos de 12 megapíxeles, o lo que es lo mismo, una imagen de 4000 píxeles de ancho por 3000 píxeles de alto, tendría que ocupar en disco un poco más de 34 MB. ¿Realmente ocupa tanto? Si fuera así, ¿cuántas fotografías nos cabrían en la memoria de 4 GB de la cámara? Ya hemos visto en uno de los apartados anteriores la importancia que tiene en la web el hecho de que las imágenes ocupen lo menos posible. Cuanto menos peso tengan las imágenes, más rápido podrán descargarse. Para lograr que las imágenes ocupen el menor tamaño posible se utilizan las técnicas de compresión. Estas técnicas consisten en reducir el número de bits necesarios para representar la imagen eliminando la información redundante. ¿Nunca te has preguntado cómo es posible que dos fotografías distintas pero que tienen el mismo número de píxeles de ancho y de alto ocupen distinto espacio en el dispositivo de almacenamiento? Si te fijas en la imagen 4 verás que las dos fotografías tienen las mismas dimensiones en número de píxeles (2048x1536); sin embargo, la fotografía de la parte superior ocupa en disco 1,31 MB, mientras que la de la parte inferior ocupa tan solo lo 378 KB. ¿Por qué? ¿Por qué no ocupan ambas los 9 MB que tendrían que ocupar por su dimensión y por ser fotografías en color? La razón es la técnica de compresión realizada unida a las características de la fotografía. La compresión consiste en eliminar la información redundante. Existen varios métodos de compresión empleados por los diferentes formatos de almacenamiento de imágenes, pero se clasifican en dos tipos: • Métodos de compresión sin pérdida de información (lossless): estos métodos se basan en eliminar la redundancia de datos. Uno de ellos es el método de compresión LZW usado por el formato GIF, muy eficaz comprimiendo secuencias de píxeles del mismo color. Su funcionamiento es sencillo: si una imagen de 600 píxeles de ancho tiene en su primera fila 40 píxeles negros este método de compresión crea un código que ocupa poco, que significa "40 píxeles negros". La próxima vez que se encuentre con la misma secuencia lo sustituirá por ese mismo código. Es por esta razón que es un método ideal para el formato GIF cuyas imágenes están formadas en su mayor parte por c
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x