Implantación de Contenido Multimedia PDF

IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez IMPLANTACIÓN DE CONTENIDO MULTIMEDIA Contenido 1. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad intelectual. Derechos de autor..........................................................................................................

IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez IMPLANTACIÓN DE CONTENIDO MULTIMEDIA Contenido 1. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad intelectual. Derechos de autor................................................................................................................................................... 3  Derechos de la propiedad intelectual.................................................................................... 3  Derechos de autor.................................................................................................................. 4  Licencias................................................................................................................................. 4  Creative Commons................................................................................................................. 5  Licencias Coloriuris................................................................................................................. 8  Registro de contenido.......................................................................................................... 10  Entidades. Gestión colectiva................................................................................................ 10 2. Imágenes.................................................................................................................................. 13  Imágenes digitales................................................................................................................ 13  Tipos de imágenes................................................................................................................ 15  Formatos de imagen............................................................................................................ 17  Compresión de imágenes..................................................................................................... 18  Atributos: Resolución, tamaño, profundidad de color........................................................ 18  Cálculo del espacio que ocupa en el disco una imagen conocidos su tamaño en píxeles y la profundidad de color................................................................................................................... 19  Cálculo del espacio que ocupa en disco una imagen escaneada conocidos su tamaño en centímetros y la resolución con la que se escanea la imagen..................................................... 20  Cálculo del tamaño (ancho y alto) en centímetros que ocupará en el papel una imagen de la que se conoce su tamaño en píxeles y su resolución............................................................... 21  Tipos de imagen en la web................................................................................................... 22  Logos, iconos, banners e imágenes...................................................................................... 23  Software para la gestión de recursos fotográficos.............................................................. 24  Optimización de imágenes para la web............................................................................... 24  HTML SVG Graphics............................................................................................................. 25 3. 4. Audio........................................................................................................................................ 26  Conceptos básicos................................................................................................................ 26  Características:..................................................................................................................... 26  Formatos de sonido............................................................................................................. 27  Insertar audio en la web...................................................................................................... 29  Consideraciones para el uso de audio en un sitio web........................................................ 29 Video........................................................................................................................................ 30 P á g i n a 1 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Conceptos básicos................................................................................................................ 30  Formatos de video............................................................................................................... 30  Insertar video en la web....................................................................................................... 31  Edición de Vídeo................................................................................................................... 32 5. 6. Animaciones............................................................................................................................. 33  Gifs animados....................................................................................................................... 33  Reglas de estilo.................................................................................................................... 33  Efectos y filtros..................................................................................................................... 33  SVG Animados...................................................................................................................... 34  Mapas de imágenes............................................................................................................. 34 Autoría del documento............................................................................................................ 34 P á g i n a 2 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez IMPLANTACIÓN DE CONTENIDO MULTIMEDIA 1. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad intelectual. Derechos de autor El artículo 27 de la Declaración Universal de los Derechos Humanos de la ONU, dice: " Toda persona tiene derecho a tomar parte libremente en la vida cultural de la comunidad, a gozar de las artes y a participar en el progreso científico y en los beneficios que de él resulten. Toda persona tiene derecho a la protección de sus intereses morales y materiales derivados de toda producción científica, literaria o artística de la cual es autor". El sistema de derechos garantiza a los creadores la divulgación de sus obras sin temor a que se realicen copias no autorizadas o actos de piratería. La propiedad intelectual es un concepto más amplio que engloba tanto a los derechos de autor como los llamados derechos conexos a éstos (otros agentes que intervienen en la creación de la obra).  Derechos de la propiedad intelectual El Ministerio de Cultura define la propiedad intelectual como el conjunto de derechos que corresponden a los autores y a otros titulares (artistas, productores, organismos de radiodifusión, etcétera) respecto de las obras y prestaciones fruto de su creación y es este Ministerio el encargado de proponer las medidas, normativas o no, para lograr la adecuada protección de la propiedad intelectual. La Ley de propiedad intelectual ofrece mecanismos que permiten, entre otras acciones, proteger la obra frente a vulneraciones de carácter moral y percibir una remuneración económica cuando la obra es utilizada por terceros, sean cuales sean los propósitos de esta utilización. Derechos morales: estos son irrenunciables, acompañan al autor o artista durante toda su vida y a sus herederos. Entre ellos destaca el derecho al reconocimiento de la condición de autor de la obra y el de exigir el respeto a la integridad de la obra o actuación y la no alteración de las mismas. Derechos de carácter económico: Relacionados con la explotación de la obra Derechos exclusivos Derechos de remuneración P á g i n a 3 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Derechos de autor Cuando creamos un sitio web, diseñamos su interfaz e insertamos en la página recursos gráficos de creación propia, estamos creando una obra que nos pertenece y, por lo tanto, tenemos unos derechos inherentes sobre ella. Somos nosotros somos los que debemos decidir si queremos ejercer nuestros derechos o no. Derechos morales, irrenunciables e inalienables, como el derecho de reconocimiento de autoría y el derecho de integridad de la obra. Derechos económicos, transferibles y de duración limitada en el tiempo. Se considera autor a la persona natural que aparece como tal en la obra. En las obras en colaboración (aquellas en las que hay varios autores), los derechos pertenecen a todos los autores. En las obras colectivas los derechos corresponden a la persona bajo cuya iniciativa y coordinación se edita y divulga la obra.  Licencias El autor de una obra es el que tiene, en virtud de la Ley de Propiedad Intelectual, la plena disposición y el derecho exclusivo a la explotación de la obra, sin más limitaciones que las establecidas en la propia Ley. En el derecho anglosajón se utiliza el término Copyright o derecho de copia para hacer referencia a los derechos patrimoniales de los autores sobre su obra. En el Artículo 146. Símbolos o indicaciones; dice que el titular o cesionario en exclusiva de un derecho de explotación sobre una obra o producción protegidas por esta Ley podrá anteponer a su nombre el símbolo © con precisión del lugar y año de la divulgación de aquéllas, y que dicho símbolo y referencia deben hacerse constar en modo y colocación tales que muestren claramente que los derechos de explotación están reservados. La Wikipedia define Licencia como un contrato mediante el cual una persona recibe de otra el derecho de uso de varios de sus bienes, normalmente de carácter no tangible o intelectual. Una licencia de software es un contrato donde se especifican todas las normas que rigen el uso de un determinado programa. Licencia copyleft: El autor permite la libre distribución de copias y versiones modificadas de una obra u otro trabajo, exigiendo que los mismos derechos sean preservados en las versiones modificadas. Un ejemplo de esta licencia es la GFDL (GNU Free Documentation License o Licencia P á g i n a 4 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez de documentación libre de GNU). Dominio público: Cualquiera puede manipular, distribuir y utilizar una obra de dominio público sin consecuencias legales. Un trabajo liberado al dominio público por su autor es contenido libre. Creative Commons: Ofrecen determinados derechos a terceras personas bajo ciertas condiciones. Contenido libre o información libre: cualquier obra funcional, de arte u otro contenido creativo que no posee restricciones legales significativas en relación a derecho de uso, redistribución y creación de versiones modificadas o derivadas por parte de terceros. Incluye las obras de dominio público y algunas con derecho de autor (copyright) cuyas licencias cumplen y conservan las libertades mencionadas anteriormente. Copyright: Indica la titularidad de los derechos reservados.  Creative Commons Paso intermedio entre el copyright y el copyleft donde los autores pueden redactar sus licencias “a la carta”. En resumen, mientras que el copyright protege los derechos exclusivos del autor, el copyleft busca promover la libre distribución y modificación de una obra. P á g i n a 5 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Se basan en: Reconocimiento(BY)  El creador permite copiar, distribuir y comunicar púb licamente la obra mientras se reconozca y cite adecuadamente al autor original. No comercial(NC)  Se permite copiar, distribuir y comunicar públicamente la obra mientras no se use con fines comerciales. Prohibición de obras derivadas(ND)  No se pueden realizar trabajos derivados de la obra. Redistribución bajo la misma licencia(SA)  Se permite distribuir obras derivadas solo bajo una licencia idéntica a la que regula la obra original. https://fueracodigos.com/descubre-licencias-imagenes-cuales-puedes-utilizar-blog/ Algunos sitios web donde se pueden descargar y buscar imágenes con este tipo de licencia son: https://search.creativecommons.org/ https://www.pixsy.com/ https://www.flickr.com/ http://www.everystockphoto.com/ https://pixabay.com/es/ P á g i n a 6 | 34 Esto va a caer en el examen!!!!!!!!!!! IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez P á g i n a 7 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Licencias Coloriuris Surgió en 2005 en Zaragoza, con la intención de tramitar y ceder los derechos de autor, basado en una relación contractual con validez mundial y registrable en múltiples países. Las personas que accedan un sitio web bajo este sistema podrán aceptar o no el contrato. Coloriuris ejercerá entre ellos/as como tercero de confianza o notario digital, guardando copia de dicho contrato (de la que también reciben copia autor/a y firmante); cediéndole a este último una licencia de uso y explotación de forma gratuita. El significado de estos acuerdos de licencia no solamente depende del tono, sino también de su situación, dado que los iconos están formados por tres partes diferenciadas: a. Informa acerca de la política de cesión del derecho de transformación. b. Informa acerca de la política de cesión de los derechos de reproducción, distribución y comunicación pública. En el área A tendríamos: Para uso comercial y no comercial (con o sin ánimo de lucro)  color verde. Para uso no comercial (sin ánimo de lucro)  color amarillo. No permite obras derivadas (salvo las excepciones legales)  color rojo. En el área B tendríamos: P á g i n a 8 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Con o sin ánimo de lucro  el color verde. Sin ánimo de lucro  el color rojo. El color azul tiene un significado especial. Indica que el autor ha incluido una cláusula que obliga a ceder en los mismos términos cualquier obra derivada. Icono Descripción Permite la reproducción, distribución y comunicación pública con o sin ánimo de lucro. Permite la realización de obras derivadas para usos comerciales y no comerciales. Permite la reproducción, distribución y comunicación pública con o sin ánimo de lucro.Permite la realización de obras derivadas para usos comerciales y no comerciales; siemprey cuandola obra derivadase ceda en las mismascondicionesen las que se recibió(cesión en cadena). Permite la reproducción, distribucióny comunicaciónpública siempre que se haga sin ánimo de lucro.Permite la realización de obras derivadaspara usos no comerciales. Permite la reproducción, distribución y comunicación pública, siempre que se haga sin ánimo de lucro. Permite la realización de obras derivadas para usos comerciales y no comerciales; siempre y cuando la obra derivada se ceda en las mismas condiciones en las que se recibió (cesión en cadena). Permite la reproducción, distribución y comunicación pública siempre que se haga sin ánimo de lucro. Permite la realización de obras derivadas para usos comerciales y no comerciales. Permite la reproducción, distribución y comunicación pública con o sin ánimo de lucro. Permite la realización de obras derivadas para usos no comerciales. Permite la reproducción, distribución y comunicación pública con o sin ánimo de lucro. Permite la realización de obras derivadas para usos no comerciales; siempre y cuando la obra derivada se ceda en las mismas condiciones en las que se recibió (cesión en cadena). Permite la reproducción, distribución y comunicación pública con o sin ánimo de lucro. No permite obras derivadas. ColorIURIS Original Texto informativo de los derechos de autor que marca la Ley. Rige en defecto de usos más permisivos decididos por el autor. (“copyright”) https://www.coloriuris.net/es:codigo_colores P á g i n a 9 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Registro de contenido Como personas dedicadas al diseño de interfaces Web, emplearemos los recursos gráficos muy a menudo. A veces, los crearemos nosotros. Otras, quizás nos interese encargarlos a un profesional en la materia, en cuyo caso tendremos que tener en cuenta el tipo de licencia que tendrán esos recursos. En el mundo de Internet, hay muchos bancos de recursos: imágenes, iconos, botones, que podemos aprovechar a la hora de diseñar nuestra interfaz. Muchos de estos recursos son gratuitos. Otros son de pago. Algunos son de dominio público, otros tienen algún tipo de licencia. Todo esto lo tendremos que tener en cuenta a la hora de optar por utilizar un recurso ya existente o crear uno nuevo. Una vez que hemos completado nuestro sitio Web, quizás nos interese registrarlo, para así poder hacer uso de nuestros derechos como autores. ¿Es el registro obligatorio? ¿Qué debemos registrar? ¿Dónde podemos hacerlo? En la ya mencionada Ley de Propiedad Intelectual, dentro del Libro III se regula, en su Título II, el Registro General de la Propiedad Intelectual. En el punto 1 de su artículo 145 dice: Podrán ser objeto de inscripción en el Registro los derechos de propiedad intelectual relativos a las obras y demás producciones protegidas por la presente Ley. El Registro es un medio para la protección de los derechos de propiedad intelectual de los autores y demás titulares sobre sus obras, actuaciones o producciones, y el hecho de realizar una inscripción registral supone una protección de esos derechos, pero no es obligatoria. La Ley otorga protección a los autores y a los restantes titulares de derechos de propiedad intelectual, independientemente de que el objeto del derecho haya sido o no registrado. El Registro General de la Propiedad Intelectual es único en todo el territorio nacional y está integrado por los Registros Territoriales (gestionados por las Comunidades Autónomas) y el Registro Central, además de una Comisión de Coordinación como órgano colegiado de colaboración entre los Registros.  Entidades. Gestión colectiva Las entidades de gestión colectiva de derechos de propiedad intelectual son organizaciones privadas de base asociativa y naturaleza no lucrativa que se dedican en nombre propio o ajeno a la gestión de derechos de propiedad intelectual de carácter patrimonial por cuenta de sus legítimos titulares. P á g i n a 10 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Están sometidas a tutela administrativa, requieren la autorización del Ministerio de Cultura para actuar en el cumplimiento de sus funciones, entre las que se encuentran las siguientes: Administrar los derechos de propiedad intelectual conferidos, con sujeción a la legislación vigente y a sus estatutos. Estas entidades ejercitan derechos de propiedad intelectual, bien de forma delegada por sus legítimos titulares, o bien por mandato legal (derechos de gestión colectiva obligatoria); persiguen las violaciones a estos derechos mediante un control de las utilizaciones; fijan una remuneración adecuada al tipo de explotación que se realice y perciben esa remuneración con arreglo a lo estipulado. En el ámbito de las utilizaciones masivas, celebrar contratos generales con asociaciones de usuarios de su repertorio y fijar tarifas generales por la utilización del mismo. Permitir hacer efectivos los derechos de naturaleza compensatoria (por ejemplo, remuneración por copia privada). Realizar el reparto de la recaudación neta correspondiente a los titulares de derechos. Prestar servicios asistenciales y de promoción de los autores y artistas intérpretes o ejecutantes. Proteger y defender los derechos de propiedad intelectual contra las infracciones que se cometan, acudiendo en su caso a la vía judicial. En la actualidad existen ocho entidades de gestión de derechos de propiedad intelectual autorizadas por el Ministerio de Cultura que se engloban en tres grupos en función de si gestionan los derechos de propiedad intelectual de los autores, los artistas intérpretes o ejecutantes o de los productores: Entidades de gestión de derechos de propiedad intelectual de autores: o Sociedad General de Autores y Editores (SGAE). o Centro Español de Derechos Reprográficos (CEDRO). o Visual, Entidad de Gestión de Artistas Plásticos (VEGAP). o Asociación Derechos de Autor de Medios Audiovisuales (DAMA). Entidades de gestión de derechos de propiedad intelectual de artistas intérpretes o ejecutantes: o Artistas Intérpretes o Ejecutantes, Sociedad de Gestión de España (AIE). o Artistas Intérpretes, Sociedad de Gestión (AISGE). Entidades de gestión de derechos de propiedad intelectual de productores: o Asociación de Gestión de Derechos Intelectuales (AGEDI). o Entidad de Gestión de Derechos de los Productores Audiovisuales (EGEDA). P á g i n a 11 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez VEGAP es la sociedad de autores que gestiona de forma colectiva en España los derechos de propiedad intelectual de los creadores visuales, actividad que viene desarrollando desde el 5 de Junio de 1990, fecha en que la Entidad fue creada por Orden Ministerial del Ministerio de Cultura. Gestiona los derechos patrimoniales que reconoce la Ley de Propiedad Intelectual a favor de los creadores visuales mediante la formalización de un contrato de adhesión. P á g i n a 12 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 2. Imágenes Ya hablamos de la percepción como proceso de recogida y tratamiento de la información sensorial y dijimos, 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. 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. 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. 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, sólo usaremos aquellas imágenes que complementen nuestro sitio web y trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio. Por otro lado, como veremos en la unidad de accesibilidad web, 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, implantación de contenidos multimedia en la web, estudiaremos en primer lugar 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.  Imágenes digitales 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 un archivo, estamos creando una imagen digital. Pero ¿qué es una imagen digital? P á g i n a 13 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Una imagen digital es aquella en la que se emplean los unos y los ceros para almacenar toda la información relativa a los 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 que ilustra este apartado 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 (cualidad por la cual algo se distingue de lo demás sin confusión) 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. El concepto de imagen digital 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. La fotografía es objetiva (Perteneciente o relativo al objeto en sí mismo, con independencia de la propia manera de pensar o de sentir) 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 P á g i n a 14 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Una imagen digital es aquella en la que se emplean los unos y los ceros para almacenar toda la por un artista que es totalmente libre a la hora de plasmar en un lienzo su propia realidad. 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.  Tipos de imágenes Las imágenes digitales pueden ser de dos tipos: Mapas de bits (también llamadas imágenes rasterizadas (Procesar una imagen descrita en un formato gráfico vectorial para convertirla en un conjunto de píxeles o puntos para ser desplegados en un medio de salida digital), imágenes matriciales (Disposición en líneas horizontales y verticales formando un rectángulo) o bitmap (Mapa de bits. Representación binaria de una imagen) Vectoriales (Relativo al vector. Un gráfico vectorial es aquel que usa los vectores para formar figuras geométricas (rectángulos, círculos, etcétera)). 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 (picture element o Se construyen a partir de funciones elemento de imagen, es la menor unidad matemáticas homogénea en color que forma parte de una geométricos (polígonos (Porción de plano imagen digital, ya sea ésta una fotografía, un limitada por líneas rectas. Son ejemplos de fotograma de vídeo o un gráfico) polígonos: el rectángulo, el cuadrado, el que representan objetos hexágono, el pentágono, el trapecio, etc.), segmentos (Parte de una recta comprendida entre dos puntos), arcos, etc.) Pierden calidad al hacer un zoom (ampliación No pierden calidad cuando se hace un zoom de una imagen digital) sobre la imagen para para aumentar mucho el tamaño. aumentar su tamaño porque el número de píxeles sigue siendo el mismo. P á g i n a 15 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez El tamaño o peso (tamaño que ocupa el El tamaño de la imagen es independiente archivo en un disco o dispositivo de del tamaño del archivo. Normalmente almacenamiento. Se mide en bytes o en ocupará menos que los mapas de bits. alguno de sus múltiplos) del archivo es proporcional al tamaño de la imagen. Se usa para representar imágenes realistas o Se usa para representar dibujos, esquemas complejas: fotografías, ilustraciones. (Representación gráfica o simbólica de cosas materiales o inmateriales. Ejemplo: Esquema eléctrico, esquema del funcionamiento de una caldera), planos. Al ampliar la imagen que ilustra el apartado 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 P á g i n a 16 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 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. https://www.pcgprint.com/blog-diferencias-imagen-vectoriale-mapa-de-bits/  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 siguiente tabla 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. Tipos de formatos de imágenes Siglas Significado AI Adobe Illustrator Artwork BMP Bit Map CDR Corel Draw CPT Corel Photo-Paint DXF Format EPS Encapsulated PostScript FH* Macromedia Freehand Document FLA Macromedia Flash GIF Graphics Interchange Format JPG, Joint Photographic Experts Group JPEG ODG PCX PIC, PCT PNG PSD PSP SVG TIF, TIFF Programas que lo usan Adobe Illustrator Microsoft Windows CorelDraw Corel Photo-Paint Autodesk Adobe Photoshop Macromedia Freehand Adobe Flash Paint Shop Pro, Tipo Vectorial Mapa de bits Vectorial Mapa de bits Vectorial Ambos Vectorial Vectorial Mapa de bits Mapa de bits Photoshop, GIMP,… Open Document Graphic Picture eXchange Picture Portable Network Graphics Photoshop Document PaintShop Pro Scalable Vector Graphics Tagged Image File Format OpendOffice Draw PaintBrush PC Paint Navegadores Web Adobe Photoshop PaintShop Pro Gráficos de imprenta y Vectorial Mapa de bits Ambos Mapa de bits Mapa de bits Mapa de bits Vectorial Mapa de bits escáner WMF Windows Metafile Aplicaciones Microsoft Vectorial P á g i n a 17 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Compresión de imágenes 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, principalmente, uno de los tres formatos siguientes: GIF, JPG o PNG. Estos formatos son soportados por todos los navegadores web. NOTA: 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 cuándo volverás a necesitarla para hacerle una modificación. Una de las razones principales por las que se ha optado por estos formatos 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 (cuando tiene el mismo color en todo el área sin variaciones de tono o matiz). 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 (Todas las gradaciones (diferentes tonalidades y matices) de un color). 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.  Atributos: Resolución, tamaño, profundidad de color 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 sólo 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 P á g i n a 18 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 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. 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.  Cálculo del espacio que ocupa en el disco una imagen conocidos su tamaño en píxeles y la profundidad de color 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 16.777.216 colores diferentes necesitará 10800 bytes. Ejemplo 1: Cada pixel puede mostrar 256 colores. Imagen de 3600 píxeles. 28 = 256 combinaciones con 8 bits. Por lo tanto, necesitaré 1 byte para representar los 256 colores por píxel. Si mi imagen tiene 3600 píxeles  3600 * 1 byte = 3600 bytes. Ejemplo 2: Cada pixel puede mostrar 16.777.216 colores. Imagen de 3600 píxeles. 224 = 16.777.216 combinaciones con 24 bits. Por lo tanto, necesitaré 3 bytes para representar los 16.777.216 colores por píxel. Si mi imagen tiene 3600 píxeles  3600 * 3 bytes = 10800 bytes. En general: 𝐸𝑠𝑝𝑎𝑐𝑖𝑜 = 𝐴𝑛𝑐ℎ𝑜 ∗ 𝐴𝑙𝑡𝑜 ∗ 𝑃𝑟𝑜𝑓𝑢𝑛𝑐𝑖𝑑𝑎𝑑 = 𝑛º 𝑑𝑒 𝑏𝑦𝑡𝑒𝑠 𝑞𝑢𝑒 𝑜𝑐𝑢𝑝𝑎 𝑙𝑎 𝑖𝑚𝑎𝑔𝑒𝑛 8 P á g i n a 19 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Cálculo del espacio que ocupa en disco una imagen escaneada conocidos su tamaño en centímetros y la resolución con la que se escanea la imagen 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 (Medida de longitud que equivale a 2,54 cm.) (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). Es importante saber el tamaño de nuestras imágenes cuando se van a imprimir o lo que ocuparán en disco las imágenes escaneadas. Ejemplo 1: Imagen de 15cm de ancho por 10cm de alto en color. Se escanea a 72 ppp. Cada píxel puede mostrar 16.777.216 colores. Primero pasamos a pulgadas: 15 : 2,54 = 5,905511811023622 pulgadas 10 : 2,54 = 3,937007874015748 pulgadas Pasamos a píxeles: Ancho = 5,905511811023622 x 72 = 425,1968503937008 píxeles Alto = 3,937007874015748 x 72 = 283,4645669291339 píxeles Píxeles totales: Total = 120528,2410564821 píxeles 𝐸𝑠𝑝𝑎𝑐𝑖𝑜 = 120528,2410564821 ∗ 24 = 361584,7231694463 bytes 8 Como 1 Kbyte (KB) = 1024 bytes, Espacio = 353,110081220162 KB P á g i n a 20 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Ejemplo 2: Imagen de 15cm de ancho por 10cm de alto en color. Se escanea a 150 ppp. Cada píxel puede mostrar 16.777.216 colores. Ancho = 5,905511811023622 x 150 = 885,8267716535433 píxeles Alto = 3,937007874015748 x 150 = 590,5511811023622 píxeles Total = 523126,0462520925 píxeles 𝐸𝑠𝑝𝑎𝑐𝑖𝑜 = 523126,0462520925 ∗ 24 = 1569378,138756278 bytes 8 Como 1 Kbyte (KB) = 1024 bytes, Espacio = 1532,595838629177 KB Como 1 Mbyte (MB) = 1024 KB, Espacio = 1,496675623661306 MB  Cálculo del tamaño (ancho y alto) en centímetros que ocupará en el papel una imagen de la que se conoce su tamaño en píxeles y su resolución Imagen de 60x60 píxeles. 𝐴𝑛𝑐ℎ𝑜 𝑒𝑛 𝑐𝑚 = 𝐴𝑙𝑡𝑝 𝑒𝑛 𝑐𝑚 = 𝐴𝑛𝑐ℎ𝑜 𝑒𝑛 𝑝í𝑥𝑒𝑙𝑒𝑠 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖ó𝑛 𝐴𝑙𝑡𝑜 𝑒𝑛 𝑝í𝑥𝑒𝑙𝑒𝑠 𝑟𝑒𝑠𝑜𝑙𝑢𝑐𝑖ó𝑛 ∗ 2,54 ∗ 2,54 Ejemplo 1: Resolución de 72 ppp Ancho = (60/72) * 2,54 = 2,1166666666667 cm  2,12 cm. Alto = (60/72) * 2,54 = 2,1166666666667 cm  2,12 cm. Ejemplo 2: Resolución de 150 ppp Ancho = (60/150) * 2,54 = 1,016 cm Alto = (60/150) * 2,54 = 1,016 cm Cuanto mayor sea la resolución de una imagen:  Ocupará más espacio en el disco  Ocupará menos espacio en el papel P á g i n a 21 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Tipos de imagen en la web Con lo visto anteriormente, podrás comprobar fácilmente que 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? Si la fotografía ocupase los 34 MB en la memoria de la cámara nos cabrían sólo 120 fotos. Ya conocemos 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 (Repetido. Se dice que hay información redundante cuando hay información repetida que se podría eliminar permitiendo la reconstrucción de la información original sin problemas). Si te fijas en la imagen que ilustra este apartado 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 sólo 378 KB. P á g i n a 22 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez ¿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. 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 colores uniformes. Métodos de compresión con pérdida de información (lossy) entre los que podemos destacar el algoritmo JPEG utilizado por el formato de imagen que lleva el mismo nombre. La tasa de compresión (Relación entre la cantidad de información perdida y la información original) es mayor, pero a costa de perder calidad, aunque esta pérdida no es perceptible para el ojo humano ya que este sistema se basa en la eliminación de la información visual redundante.  Logos, iconos, banners e imágenes En la planificación de interfaces gráficas, debemos de tener en cuenta el uso de los logotipos, los iconos y las fotografías en la web, y de definir su tamaño en la guía de estilo. Los iconos se suelen emplear para complementar los textos de los enlaces y deben contener la menor cantidad de detalle posible sin perder significado. El uso de los logotipos como complemento de una página para ayudar al usuario a volver, mediante un enlace, a la página principal de un sitio. Además, en la unidad de accesibilidad veremos el uso de los logotipos de la W3C para hacer una declaración de conformidad de la página. En esta unidad hemos incluido este apartado para indicar cuál es el formato más adecuado para estos recursos gráficos, aunque, como ya hemos comentado en apartados anteriores de esta misma unidad, el formato a elegir va a depender, en gran medida, del tipo de imagen presentada, independientemente del uso que se le dé a la imagen. Normalmente se suele emplear el formato GIF para los banners porque suelen incluir animaciones, el formato GIF o PNG para los logos e iconos, porque suelen tener pocos colores y áreas de color sólido, y el formato JPG para las imágenes o fotografías. P á g i n a 23 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Como vimos en las tendencias en web la utilización de SVG. https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/agregar-svg-a-unapagina-web/ https://inkscape.org/es/  Software para la gestión de recursos fotográficos Cuando se trabaja con imágenes digitales ya sean fotografías realizadas con una cámara digital, fotografías antiguas que hemos escaneado o botones, logotipos, iconos o cualquier dibujo realizado por nosotros, se necesitan una serie de herramientas básicas. Estas herramientas nos permiten realizar multitud de operaciones con las imágenes, que pueden ser: Operaciones sencillas, como ver la imagen, hacer un zoom para ampliar la imagen para ver con más detalle una zona de la misma, girarla en el sentido de las agujas del reloj o en sentido contrario, ajustar el brillo o el contraste. Operaciones de clasificación de las imágenes en categorías y organización en carpetas, o bien operaciones que nos permiten ver las propiedades de una imagen, hacer presentaciones, cambiar su formato. Operaciones algo más complejas que nos permiten modificar la imagen aplicando efectos, transparencias, distorsiones, etcétera. Como ya hemos dicho en otras ocasiones, los recursos gráficos se utilizan mucho en la web. Es por ello que las personas dedicadas al diseño de interfaces web deben conocer aquellas herramientas que les permiten crear, modificar y optimizar los recursos gráficos. Podemos clasificar a estas herramientas como: Software de visualización de imágenes Software de creación de recursos gráficos Software de edición de imágenes Software de conversión de formatos de imágenes  Optimización de imágenes para la web Nos interesa trabajar con imágenes de alta calidad y que pesen poco, esta última condición es necesaria en la web, para ello, sería conveniente emplear nuestro tiempo en aprender a manejar alguna herramienta que tenga una función de optimización de imágenes para su uso en la web. Photoshop es una herramienta profesional que tiene una función de optimización para la web que, entre otras, cosas permite: Preestablecer un tipo de ajuste según el formato de imagen. Establecer un nuevo tamaño en píxeles o como porcentaje del tamaño original. P á g i n a 24 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Elegir el tipo de conexión a Internet para el cual se quiere optimizar. En definitiva: La finalidad de la optimización es reducir el tamaño de las imágenes con la menor pérdida de calidad posible. La finalidad de la optimización es reducir el tiempo de descarga de las imágenes. Para finalizar este apartado, daremos una serie de consejos que están relacionados con la optimización: Si escaneas imágenes para la web, hazlo a 72ppp. La web no necesita mayor resolución. Si escaneas imágenes para retocar y usar en la web, almacénalas en formato TIFF. El formato JPEG sufre pérdidas inicialmente. Recuerda guardar siempre la imagen original. Ten en cuenta el tamaño en píxeles de las imágenes a la hora de maquetar tu página. Si no necesitas tantos píxeles redimensiónala con un programa editor y optimízala de nuevo para la web. Esta operación la tendrás que realizar, siempre, partiendo de la imagen original. Si son imágenes que deben verse con un grado de detalle muy grande, crea una miniatura de la imagen para tu página principal con un enlace a la imagen original. De esta forma, la página principal no pesará demasiado y los usuarios interesados en ver la imagen con detalle podrán hacerlo igualmente con sólo pulsar el enlace. Si realizas tus propios diseños, dale prioridad a las líneas de color horizontales sobre las verticales ya que las primeras se comprimen mejor. Trata de reducir la calidad al máximo sin que se perciba la pérdida. No todas las imágenes resultan afectadas de la misma manera cuando se reduce la calidad. https://www.blixt.tv/reducir-tamano-tus-fotos-sin-perder-calidad/  HTML SVG Graphics https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector _graphics_to_the_Web https://www.w3schools.com/html/html5_svg.asp https://www.w3schools.com/graphics/svg_intro.asp https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/agregar-svg-a-una-pagina-web/ P á g i n a 25 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 3. Audio Hoy en día, basta pulsar un enlace en una Web para escuchar un tema musical, la radio, o cualquier sonido grabado por una persona que ha decidido divulgarlo a través de ese medio. Cuando hablamos de sonido, solemos decir que es fuerte o suave, grave o agudo, largo o corto y que tiene un timbre concreto, cualidad esta última que nos permite distinguir una voz de otra. Estas cualidades: intensidad, tono, duración y timbre son subjetivas porque varían en función de la percepción de cada persona, pero dependen de parámetros que son cuantificables. Estos parámetros son importantes para estudiar el sonido en sí mismo, pero, en este módulo, tratamos el sonido desde el punto de vista de su inclusión en una Web. Por eso, lo que nos interesa, son otro tipo de características: aquellas que nos van a permitir incluir un sonido de calidad sin incrementar excesivamente el tiempo de descarga de nuestra página.  Conceptos básicos Hay una serie de características de los archivos de sonido que es importante tener en cuenta a la hora de realizar una optimización de cara a su uso en la Web. Toda la información transmitida a través de Internet es digital, formada por cadenas de unos y ceros por lo que, la señal sonora, que es analógica, debe convertirse mediante un proceso de codificación.  Características: Canales: Mono, estéreo, multicanal… Frecuencia, tasa o velocidad de muestreo (kilohercios): Muestras por segundo de la onda de sonido analógica en el momento de realizar su codificación a digital. Tamaño de muestra: Medida en bits e indica los valores diferentes que puede almacenar de amplitud de onda (distancia desde el punto más alto de la onda hasta la base de la onda). También se conoce como profundidad de bit o resolución de muestreo. Ej. 16 bits = 65536 valores. Bitrate: En kilobits por segundo e indica el número de bits para almacenar cada segundo de sonido.También conocido como tasa de bit. Hay que tener en cuenta que todos estos valores influyen proporcionalmente en el peso del archivo, por lo que, disminuyendo cualquiera de ellos disminuirá su peso, lo cual resultará beneficioso para el usuario. Importante para la practica de sonido No hay que olvidar que, con características iguales, será la duración de un archivo de sonido la que influya en su peso, por lo que, a la hora de incorporar un sonido a nuestra Web habrá que P á g i n a 26 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez preguntarse si su duración es la necesaria o podríamos conseguir el efecto deseado en la audiencia con una duración menor, en cuyo caso y en beneficio de esa audiencia, habrá que recortar el archivo para que ocupe lo mínimo imprescindible. Los límites de la audición humana están entre los 20 y los 20.000 Hz y para cubrir este espectro basta con una tasa de muestreo de algo más de 40.000 Hz.  Formatos de sonido En este apartado veremos algunos formatos de sonido que se emplean en la Web, haciendo referencia a las características propias de cada formato: Ogg: Es un formato contenedor (formato de archivo que almacena información de vídeo, audio, subtítulos, capítulos, metadatos e información de sincronización según su especificación) de audio y vídeo con licencia pública general de GNU. Pensado para hacer streaming. Emplea un bitrate variable (VBR (método de codificación que adapta el número de bits utilizados por segundo para codificar los datos de audio, en función de la complejidad de la transmisión de audio en un momento determinado)) que va desde los 8 hasta los 512 Kbps con 1 o más canales de sonido. MP3: Es un formato de audio muy popular que posibilitó el intercambio de archivos de música. Su éxito radica en la capacidad de comprimir el tamaño del archivo hasta 12 veces con una pérdida de calidad imperceptible para el oído humano ya que su método de compresión consiste, en parte, en eliminar las frecuencias de sonido que no somos capaces de captar. La configuración necesaria para la música en Internet, con calidad estándar, es de un bitrate de 128 Kbps y una frecuencia de muestreo de 44,1 Khz RA (Real Audio): Es un formato empleado en la transmisión de sonido por Internet en tiempo real sin necesidad de descarga previa de un archivo. Es un modo de streaming que permite variar la velocidad de transmisión para adaptarse a las características de la conexión del usuario. WMA (Windows Media Audio): Es un formato de compresión con pérdida, propiedad de Microsoft creado como alternativa al MP3 y RealAudio. AAC (Advanced Audio Coding, Codificación Avanzada de Sonido): Es un formato estándar creado por MPEG (Moving Pictures Expert Group) que utiliza una tasa de bits variable y tiene un rendimiento superior al MP3. Soporta sonido multicanal y puede alcanzar una frecuencia de muestreo de 96 Khz. Se puede codificar un archivo de audio en AAC con un bitrate inferior al equivalente en MP3 y mantener la misma calidad sonora. P á g i n a 27 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Todos los formatos expuestos anteriormente son formatos de compresión con pérdida, aunque no son los únicos. También hay formatos de compresión sin pérdida como el formato FLAC (acrónimo del inglés "Free Lossless Audio Codec") que forma parte del proyecto Ogg, el formato ALE (acrónimo del inglés "Apple Lossless Encoder") desarrollado por Apple Computer o el formato Monkey's Audio cuya compresión de sonido sin pérdida de calidad depende en gran medida del archivo a comprimir, pero consigue, generalmente, tasas de compresión algo mejores que FLAC. También hay formatos que no están comprimidos, por lo que no se suelen emplear directamente en la Web, aunque sí se emplean como formato de almacenamiento del sonido original antes de su conversión para su uso en la Web. Entre ellos destacan: WAV (Waveform Audio File Format, Formato de Sonido de Forma de Onda): Es el estándar en los ordenadores con sistema operativo Windows. Admite sonido mono y estéreo (1 y 2 canales) con diferentes frecuencias de muestreo que van desde los 8 Khz hasta los 192 Khz con profundidades de bit de 8 ó 16bits. AIFF (Audio Interchange Format File, Formato de Archivo de Formato de Sonido): Es el estándar en los sistemas Apple. Es multicanal, y soporta varias profundidades de bit y diferentes frecuencias de muestreo. Por último, aunque no se trate de un formato de sonido, no queremos dejar de mencionar los archivos MIDI (acrónimo del inglés "Musical Instrument Digital Interface"). Éstos almacenan órdenes que son interpretadas por la tarjeta de sonido como si fueran las notas musicales de distintos instrumentos, con un volumen y duración concretos y, por ocupar poco espacio, pueden resultar adecuados para el uso en la Web. Aparte de OGG, hay otros formatos contenedores: Matroska (Formato contenedor estándar abierto que puede contener un número ilimitado de vídeo, audio, imagen o pistas de subtítulos dentro de un solo archivo) (que contiene archivos de vídeo con subtítulos y audio con la extensión MKV y archivos solamente de audio con la extensión MKA). ASF (Advanced Streaming Format (posteriormente renombrado a Advanced Systems Format). Es un formato contenedor de audio y video digital propiedad de Microsoft, diseñado especialmente para el streaming. Los archivos ASF pueden codificarse con prácticamente cualquier códec de audio/vídeo sin que deje de ser formato ASF) (que suele contener archivos de vídeo con la extensión WMV y archivos de audio con la extensión WMA). MP4 (MPEG4 Parte 14. Es un formato contenedor especificado como parte del estándar internacional MPEG4 utilizado para almacenar formatos audiovisuales) MOV de QuickTime (Sistema multimedia completo, desarrollado por Apple, capaz de reproducir y transmitir contenidos de alta calidad en Internet y otros dispositivos). AVI (Audio Video Interleave, en castellano Audio y Vídeo Intercalado. Es un formato P á g i n a 28 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez contenedor de audio y vídeo lanzado por Microsoft que permite almacenar simultáneamente un flujo de datos de video y varios flujos de audio) (que contiene audio y vídeo en casi cualquier formato. OGM (que es una mejora del contenedor OGG diseñado como alternativa del AVI). Puede que nos interese importar el audio contenido en un formato contenedor de los mencionados en el párrafo anterior y almacenarlo en un fichero independiente para editarlo y adaptarlo a nuestros requerimientos.  Insertar audio en la web En HTML5 se ha desarrollado la etiqueta con los siguientes atributos:  Autoplay: el audio debería empezar automáticamente tan pronto como esté listo para reproducirse.  Controls: indica si los controles de reproducción estarán visibles.  Preload: especifica si el audio debería ser cargado cuando la página se carga o no. Valores : auto, meta y none.  Src: especifica la url del audio. Ejemplo:  Consideraciones para el uso de audio en un sitio web En general el audio en sitios web se puede usar de dos maneras: Como contenido y por tanto tienen un lugar en la web. Ej: En una cadena de radio se inserta sonido para que los usuarios pueda acceder a programas de días anteriores. Como elemento decorativo. Ej: Música de fondo. El uso de audio de fondo está “pasado de moda”, en el caso de que aparezca, siempre debe existir la posibilidad de que el usuario lo apague cuando quiera. Los audios son unos archivos con un tamaño considerable, su uso se debe restringir para cuando sea imprescindible y siempre optimizado para su reproducción. P á g i n a 29 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 4. Video A continuación, trataremos el vídeo desde el punto de vista de su inclusión en una Web, por eso, lo que nos interesa son las características que nos van a permitir incluir un vídeo de calidad sin incrementar excesivamente el tiempo de descarga de nuestra página.  Conceptos básicos El vídeo digital es un tipo de sistema de grabación de vídeo que funciona usando una representación digital de la señal de vídeo, en vez de una representación analógica. El vídeo puede obtenerse por grabación directa con una cámara de vídeo digital o por la digitalización de un vídeo analógico. Recuerda que toda la información que se transmite a través de Internet es digital, es decir, mediante cadenas de unos y ceros. Hay una serie de características de los archivos de vídeo que es importante tener en cuenta a la hora de realizar una optimización de cara a su uso en la Web. Estas características son: Duración del clip: tiempo que dura la reproducción de vídeo. Se presenta en el formato HH:MM:SS. Tamaño del clip: es el espacio que ocupa el vídeo en el dispositivo de almacenamiento. Se mide normalmente en MB. Tamaño de cada fotograma (cada una de las imágenes individuales captadas por cámaras de video y registradas analógica o digitalmente): es el tamaño en píxeles de cada fotograma distinguiendo el ancho y el alto. De este tamaño se desprende otra característica, la Relación de aspecto, que es la comparación del ancho respecto al alto. Los valores habituales para la relación de aspecto son 4 : 3 (normal) y 16 : 9 (panorámico). Número de fotogramas por segundo (fps): es el número de imágenes estáticas que se suceden en un segundo y que al visionarse secuencialmente transmiten la sensación de movimiento. Las películas con imágenes en movimiento suelen tener una tasa de 24 fotogramas por segundo. Códec: algoritmo de compresión/descompresión usado durante la generación del archivo.  Formatos de video Cuando estudiamos el sonido vimos que había una serie de formatos contenedores de audio y vídeo tales como: Matroska, ASF, MP4, MOV, AVI, OGM y OGG, de los cuales podíamos importar el sonido. Estos formatos contienen el audio, el vídeo e información adicional como: idiomas, subtítulos y capítulos. Dentro de estos formatos, vídeo y audio están comprimidos empleando una serié de códecs que nuestro equipo debe tener para que se puedan reproducir. P á g i n a 30 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez En este apartado, haremos un resumen de las principales características de los formatos de vídeo más usados en la Web: Realvideo: es un formato de vídeo patentado por RealNetworks. Se utiliza sobre todo para difusión de vídeo por Internet. Para su visualización es necesario tener instalado el reproductor de RealPlayer. Realvideo se encuentra en el contenedor de RealMedia y su extensión de archivo puede ser.rv,.ram,.rm y.rmvb. Matroska: formato que permite hacer streaming online con gran calidad. Es un formato contenedor de código libre que permite almacenar un número ilimitado de archivos de vídeo, sonido, imágenes y subtítulos con posibilidad de bitrate variable tanto en audio como en vídeo. OGG: pensado para hacer streaming online de audio y de vídeo. MOV: es la extensión de los archivos del formato contenedor QuickTime el cual permite contener archivos de vídeo y audio de diferentes formatos, subtítulos, imágenes, dibujos, efectos e interactividad. Permite hacer streaming online. MPEG-4: ofrece una alta tasa de compresión con poca pérdida de calidad debido a su sistema de compresión consistente en eliminar aquello que el ser humano no es capaz de distinguir. Vale para hacer streaming y para descarga. Flashvídeo: Es un formato contenedor usado para entregar el vídeo a través de Internet usando Adobe Flash Player. FLV y FL4 son extensiones de archivo propias de este formato. WMV: es un formato de vídeo diseñado para las aplicaciones de streaming en Internet, como competidor de Realvideo. Normalmente se encuentra formando parte del formato contenedor ASF. WebM: es un formato contenedor pensado para ser utilizado como formato multimedia estándar en el lenguaje HTML5. Emplea el códec VP8 en el vídeo y el Ogg Vorbis en el audio, ambos libres, logrando una excelente calidad con unos bitrates bajos. Recuerda que para que estos vídeos puedan reproducirse es necesario que tengamos instalados en nuestro equipo los mismos códecs que se emplearon en su codificación. Normalmente, cuando un usuario intenta reproducir un vídeo de una Web, su navegador detectará si falta algún complemento necesario para su reproducción y aparecerá un mensaje en la parte superior de la página solicitándole que lo instale. Cuando esto no ocurre habrá que recurrir a una descarga manual de los códecs necesarios y a su posterior instalación.  Insertar video en la web HTML5 ha desarrollado la etiqueta con los atributos autoplay, loop, preload y src con la misma sintaxis y semántica que A diferencia de , necesita un tamaño para reproducirse que se indicará con los atributos P á g i n a 31 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez width y height. Ejemplo: También es posible utilizar vídeos disponibles en repositorios como Youtube o Vimeo. Estos repositorios ofrecen un código para incrustar un determinado vídeo en la web. Ejemplo:  Edición de Vídeo https://www.blackmagicdesign.com/es/products/davinciresolve P á g i n a 32 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 5. Animaciones Las animaciones se suelen utilizar en la Web para insertar publicidad mediante el uso de banners o como complementos visuales del diseño: rollovers, botones animados, etc. Tenemos varias formas de añadir animación a la Web: Usando diferentes formatos de archivo que permiten añadir animación, por ejemplo, GIF. Utilizando el potencial de las reglas de estilo para simular la animación de los botones, enlaces, elementos de formulario, etcétera. Hacer uso de lenguajes de programación dinámicos. Con js  Gifs animados Se trata de una serie de imágenes colocadas consecutivamente y que se muestran en pantalla durante un tiempo o indefinidamente. Ventajas:  Su descarga es rápida  Nitidez  Permite usar transparencias Desventajas:  Las imágenes deben tener un número fijo de colores (256 max)  Tamaño excesivo si están compuestos por muchas imágenes.  Reglas de estilo En este curso nos interesan las animaciones que se desarrollan a través de las reglas de estilo. https://lenguajecss.com/css/animaciones/animaciones/ Ejemplos: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://webdesign.tutsplus.com/es/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937 https://ideakreativa.net/18-mejores-ejemplos-de-animacion-css/  Efectos y filtros Todas las animaciones se pueden mejorar y darles un aspecto más profesional cuando se aplican ciertos efectos y/o filtros sobre los objetos que las componen. https://lenguajecss.com/css/animaciones/transformaciones/ Ejemplos: https://cybmeta.com/animaciones-basicas-con-css-transition P á g i n a 33 | 34 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  SVG Animados http://www.w3big.com/es/svg/svg-example.html https://javiniguez.com/10-ejemplos-de-animaciones-svg-para-disenadores-web-2/  Mapas de imágenes Mediante los mapas de imágenes podemos definir que cada zona de una imagen tenga un comportamiento diferente. Las etiquetas que intervienen son: Engloba al mapa de imagen.  Atributo:  name Define el área que se va a activar en la imagen.  Atributos:  Shape: rect | circle | poly  Coords  Href  alt https://www.w3schools.com/tags/tag_map.asp 6. Autoría del documento Este manual es una recopilación de documentos adaptados por la profesora Isabel Cayuela Pérez. P á g i n a 34 | 34