UT1 DISEÑO DE INTERFACES PARA DESARROLLO WEB

[Audio] UT6 RECURSOS GRÁFICOS PROFESOR: JOSÉ JOAQUÍN MORENO GALLARDO.

[Audio] OBJETIVOS  Emplear herramientas gráficas  Identificar y proponer acciones profesionales para dar respuesta al diseño para todos  Manejar formatos de imagen  Reconocer las licencias y los derechos de autor  Saber incluir imágenes en una web  Verificar su funcionalidad.

[Audio] IMÁGENES  Existen varios tipos de imágenes según su origen, formato y uso.  Según su origen: Imágenes digitalizadas:  Fotografías: Imágenes capturadas con cámaras digitales o smartphones.  Escaneados: Imágenes que provienen de documentos, fotos o objetos físicos escaneados.  Imágenes generadas por ordenador: Imágenes creadas desde cero en programas de diseño o software de modelado 3D. Imágenes generadas por inteligencia artificial:  Generación automática: Imágenes creadas por algoritmos de IA a partir de descripciones textuales o de patrones existentes..

[Audio] IMÁGENES  Según su formato: Formatos rasterizados (mapa de píxeles):  JPEG (JPG): Imágenes comprimidas, comúnmente usadas para fotografías en la web.  PNG: Soporta transparencias y compresión sin pérdida de calidad.  GIF: Imágenes animadas o de baja resolución, con una paleta de colores limitada.  BMP: Imágenes de alta calidad pero con archivos de mayor tamaño.  TIFF: Alta calidad y sin pérdidas, común en la impresión profesional. Formatos vectoriales (basados en líneas y formas geométricas):  SVG: Imágenes basadas en vectores que pueden redimensionarse sin perder calidad.  EPS: Utilizado principalmente en diseño gráfico y edición profesional.  AI: Formato de Adobe Illustrator, para gráficos vectoriales..

[Audio] IMÁGENES  Según su uso: Imágenes informativas:  Infografías: Combinación de imágenes, gráficos y textos que transmiten información de manera clara y visual.  Mapas: Representaciones gráficas de áreas geográficas, planos, etc. Imágenes publicitarias:  Anuncios: Imágenes diseñadas para atraer la atención del público y promover productos o servicios.  Portadas y banners: Usadas en medios impresos o digitales para captar interés visual..

[Audio] IMÁGENES  Según la capacidad de animación:  Imágenes estáticas: No contienen movimiento (como una fotografía o ilustración).  Imágenes animadas: Pueden mostrar movimiento o cambio de estado (como en los archivos GIF)..

[Audio] IMÁGENES  En la web, existen varios formatos de imágenes que se utilizan según las necesidades específicas de calidad, tamaño y compatibilidad. A continuación te enumero los formatos más comunes: JPEG (Joint Photographic Experts Group)Extensión: .jpg o .jpeg  Características: Comprime imágenes con pérdida de calidad, lo que reduce el tamaño del archivo.  Ideal para fotografías y imágenes con gradientes de color, como paisajes, retratos y cualquier imagen fotográfica.  No soporta transparencias.  Uso: Es el formato más utilizado en la web debido a su balance entre calidad y tamaño de archivo PNG (Portable Network Graphics)Extensión: .png  Características: Comprime imágenes sin pérdida de calidad, lo que significa que conserva todos los detalles de la imagen original.  Soporta transparencias (canal alfa), lo que lo hace útil para logos, iconos y gráficos con fondos transparentes.  Ideal para imágenes con líneas nítidas, texto o gráficos.  Uso: Es comúnmente utilizado para imágenes que necesitan transparencia o gráficos nítidos como iconos y logotipos..

[Audio] IMÁGENES GIF (Graphics Interchange Format)Extensión: .gif  Características: Soporta hasta 256 colores, lo que lo hace menos adecuado para imágenes complejas o fotográficas.  Soporta animaciones, lo que permite crear imágenes en movimiento (archivos GIF animados).  Uso: Ideal para imágenes simples, animaciones cortas o gráficos con pocos colores. Muy popular en memes y pequeños gráficos animados. WebPExtensión: .webp  Características: Ofrece compresión con y sin pérdida, lo que reduce considerablemente el tamaño del archivo sin sacrificar la calidad.  Soporta transparencias y animaciones (como el formato GIF).Proporciona una calidad similar a PNG o JPEG pero con un tamaño de archivo más pequeño.  Uso: Cada vez más adoptado en la web por su eficiencia en términos de compresión y calidad. Soportado por la mayoría de los navegadores modernos, pero no es compatible con todos..

[Audio] IMÁGENES SVG (Scalable Vector Graphics)Extensión: .svg  Características: Formato basado en vectores, lo que significa que la imagen puede ser escalada a cualquier tamaño sin perder calidad.  Es un formato de texto que describe la imagen mediante coordenadas y comandos matemáticos, por lo que los archivos son generalmente ligeros. No es adecuado para imágenes fotográficas, pero sí para gráficos, logotipos, iconos, ilustraciones y animaciones simples.  Uso: Ideal para gráficos, logotipos y elementos web que necesitan ser escalados sin pérdida de calidad. AVIF (AV1 Image File Format)Extensión: .avif  Características: Un formato de imagen moderno basado en el códec de video AV1. Ofrece compresión con pérdida o sin pérdida, y mantiene una calidad similar o superior a WebP, pero con tamaños de archivo más pequeños. Soporta transparencia y alta calidad en imágenes estáticas y animadas.  Uso: Un formato emergente que es cada vez más popular debido a su excelente relación entre calidad y tamaño, aunque no todos los navegadores lo soportan completamente..

[Audio] IMÁGENES BMP (Bitmap)Extensión: .bmp  Características: Formato de imagen sin comprimir, lo que resulta en archivos muy grandes.No es común en la web debido al gran tamaño de los archivos.  Uso: Principalmente utilizado en aplicaciones de Windows, pero no es adecuado para la web. TIFF (Tagged Image File Format)Extensión: .tiff o .tif  Características: Alta calidad sin pérdida, utilizado en la edición y conservación de imágenes. Archivos grandes debido a la falta de compresión.  Uso: Generalmente no se utiliza para la web debido a su tamaño y falta de compatibilidad universal. Es más común en impresión y archivado de imágenes de alta calidad..

[Audio] IMÁGENES Formato Compresión Calidad Transparencia Animación Uso Principal JPEG Con pérdida Alta No No Fotografías PNG Sin pérdida Alta Sí No Gráficos, logotipos, iconos GIF Con pérdida Baja No Sí Animaciones cortas WebP Con y sin pérdida Alta Sí Sí Imágenes web, alternativo a JPEG y PNG SVG N/A (Vectorial) Escalable Sí No Logotipos, gráficos, iconos AVIF Con y sin pérdida Alta Sí Sí Imágenes web, alternativa a JPEG y WebP BMP Sin compresión Alta No No Uso limitado en la web TIFF Sin compresión Muy alta No No Archivado, impresión profesional.

[Audio] SOFTWARE VISUALIZACIÓN Visores de imágenes generales  Windows Photo Viewer (Visor de fotos de Windows)  Preview (Vista Previa), Plataforma: macOS  IrfanView  XnView  FastStone Image Viewer.

[Audio] SOFTWARE VISUALIZACIÓN Visores y editores avanzados Adobe Photoshop: Plataforma: Windows, macOS  Características: Principalmente una herramienta de edición avanzada, pero también se usa para visualizar y analizar imágen es en alta resolución. Soporta todos los formatos de imágenes populares y muchos especializados. GIMP (GNU Image Manipulation Program):Plataforma: Windows, macOS, Linux  Características: Software libre y de código abierto, similar a Photoshop. Además de la edición, permite visualizar imágenes en múltiples formatos y realizar ajustes avanzados. Corel PaintShop Pro: Plataforma: Windows  Características: Programa de edición de imágenes que también permite visualizar fotos en diversos formatos, especialmente útil para trabajos gráficos y profesionales..

[Audio] SOFTWARE VISUALIZACIÓN Visores de imágenes 3D Blender:Plataforma: Windows, macOS, Linux  Características: Software de modelado y animación 3D que permite visualizar imágenes generadas en 3D o proyectos completos de diseño y renderizado. Soporta múltiples formatos 3D y de imagen. Autodesk Viewer:Plataforma: Web  Características: Visor de archivos 3D y CAD en línea. Permite visualizar modelos 3D, planos, imágenes de proyectos y más, sin necesidad de descargar un software pesado. STL Viewer:Plataforma: Windows, Web  Características: Visor gratuito para ver modelos 3D en formato STL, utilizado principalmente en impresión 3D..

[Audio] SOFTWARE VISUALIZACIÓN Visores en línea (Web-based) Google Photos:Plataforma: Web, Android, Ios  Características: Almacenamiento y visualización de imágenes en línea, con opciones para organizar y editar las fotos. Compatible con la mayoría de los formatos comunes. Flickr:Plataforma: Web, Android, iOS  Características: Plataforma de almacenamiento y visualización de fotos, donde los usuarios pueden subir y compartir imágenes de alta calidad. Photopea:Plataforma: Web  Características: Editor de imágenes en línea gratuito que soporta diversos formatos, incluidos PSD, JPEG, PNG y otros. Aunque es principalmente un editor, también puede ser utilizado como visor..

[Audio] SOFTWARE GIMP  GIMP es un programa de software libre y de código abierto para la edición y manipulación de imágenes. Características principales de GIMP:  Edición de Imágenes: corrección de color, brillo, contraste, y la aplicación de filtros y efectos.  Soporta la edición de capas, canales, máscaras y rutas, lo que permite un control detallado sobre el contenido de la imagen.  Soporte de Formatos de Imagen  Herramientas de Selección y Pintura.  Compatibilidad con Plugins  Interfaz Personalizable  Comunidad y Documentación  Ejemplo en clase.

[Audio] PROPIEDAD INTELECTUAL  La propiedad intelectual (PI) se refiere a las creaciones de la mente, como invenciones, obras literarias y artísticas, y símbolos, nombres e imágenes utilizados en el comercio. Es una categoría de propiedad que incluye intangibles como ideas y expresiones creativas. La propiedad intelectual se divide en varias áreas principales:  Derechos de Autor (Copyright)  Definición: Protegen las obras literarias y artísticas, como libros, música, pinturas, esculturas y películas, así como programas de ordenador y bases de datos.  Duración: Generalmente, los derechos de autor duran la vida del autor más 70 años después de su muerte.  Patentes  Definición: Protegen las invenciones, otorgando al inventor derechos exclusivos para fabricar, usar y vender la invención durante un período determinado.  Duración: Normalmente, las patentes duran 20 años desde la fecha de presentación de la solicitud..

[Audio] PROPIEDAD INTELECTUAL  Marcas Registradas (Trademarks)  Definición: Protegen símbolos, nombres y eslóganes utilizados en el comercio para distinguir los bienes o servicios de una empresa de los de otras.  Duración: Las marcas registradas pueden durar indefinidamente, siempre que se renueven periódicamente y se sigan utilizando en el comercio.  Diseños Industriales  Definición: Protegen la apariencia ornamental o estética de un producto, como la forma, el diseño o el patrón.  Duración: La protección de diseños industriales generalmente dura entre 10 y 25 años, dependiendo de la jurisdicción.  Secretos Comerciales (Trade Secrets)  Definición: Protegen información confidencial y valiosa que proporciona a una empresa una ventaja competitiva, como fórmulas, prácticas y procesos.  Duración: Los secretos comerciales pueden durar indefinidamente, siempre que se mantenga la confidencialidad de la información..

[Audio] DERECHOS DE AUTOR  Los derechos de autor son un conjunto de normas y principios que protegen las obras literarias, artísticas y científicas, otorgando a sus creadores derechos exclusivos sobre el uso y distribución de dichas obras.  Principales Características de los Derechos de Autor:  Protección Automática momento en que una obra es creada y fijada en un medio tangible, la Duración de los Derechos la vida del autor más un período adicional de 70 años tras su muerte, aunque esto puede variar según la jurisdicción, Derechos Exclusivos que son los Derechos de Reproducción, Derechos de Distribución, Derecho de Comunicación Pública y el Derecho de Transformación.  Ejemplos de Obras Protegidas: Libros, artículos, ensayos, Pinturas, esculturas, fotografías, Composiciones, grabaciones, Películas, programas de televisión, Programas de ordenador, aplicaciones..

[Audio] LICENCIAS  Las licencias Creative Commons (CC) son un conjunto de licencias de derechos de autor que permiten a los creadores otorgar permisos específicos sobre el uso de sus obras. Estas licencias proporcionan una forma flexible de gestionar los derechos de autor, facilitando que otros compartan, reutilicen y distribuyan contenido creativo bajo ciertas condiciones.  Tipos de Licencias Creative Commons  CC BY (Reconocimiento)  Permite: Copiar, distribuir, exhibir y realizar obras derivadas de la obra original, incluso con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor.  CC BY-SA (Reconocimiento-CompartirIgual)  Permite: Copiar, distribuir, exhibir y realizar obras derivadas de la obra original, incluso con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor y las obras derivadas deben distribuirse bajo la misma licencia..

[Audio] LICENCIAS  CC BY-ND (Reconocimiento-SinObraDerivada)  Permite: Copiar, distribuir y exhibir la obra original, incluso con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor, pero no se permiten obras derivadas.  CC BY-NC (Reconocimiento-NoComercial)  Permite: Copiar, distribuir, exhibir y realizar obras derivadas de la obra original, pero no con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor.  CC BY-NC-SA (Reconocimiento-NoComercial-CompartirIgual)  Permite: Copiar, distribuir, exhibir y realizar obras derivadas de la obra original, pero no con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor y las obras derivadas deben distribuirse bajo la misma licencia..

[Audio] LICENCIAS  CC BY-NC-ND (Reconocimiento-NoComercial-SinObraDerivada)  Permite: Copiar, distribuir y exhibir la obra original, pero no con fines comerciales.  Condición: Debe otorgarse el crédito correspondiente al autor y no se permiten obras derivadas..

[Audio] REGISTRO DE CONTENIDOS  Pasos para realizar el Registro en España:  Accede al Portal del Ministerio, Visita la página del Registro de la Propiedad Intelectual en España.  Rellenar el Formulario, Completa el formulario de solicitud de registro. Esto incluye detalles sobre el autor, la obra y la titularidad de los derechos.  Pagar la Tasa, Realiza el pago correspondiente. Las instrucciones y las tasas están disponibles en la página web.  Enviar la Documentación, Envía una copia de la obra junto con el formulario completo y el justificante de pago. Esto puede hacerse en línea a través del portal de la Sede Electrónica o de manera presencial.  Obtener el Certificado, Una vez procesada la solicitud, recibirás un certificado de registro que servirá como evidencia legal de tu titularidad sobre la obra.  Registrar una obra es una forma importante de proteger tus derechos de autor y asegurar que tienes la prueba necesaria en caso de disputas legales..