CSS, jQuery y más

1. Interfaces Web 2015 Sergio Santos Gil

2. Interfaces Web Sergio Santos Gil 2 Índice Introducción............................................................................................................................. Elementos............................................................................................................................. Composición gráfica............................................................................................................. Componentes de una interfaz gráfica .................................................................................... Glosario................................................................................................................................ Herramientas ........................................................................................................................ Joomla ..................................................................................................................................... Instalación ............................................................................................................................ Administración ..................................................................................................................... Wordpress................................................................................................................................ Instalación ............................................................................................................................ Administración ..................................................................................................................... Moodle..................................................................................................................................... Instalación ............................................................................................................................ Administración ..................................................................................................................... HTML5.................................................................................................................................... Etiquetas de secciones .......................................................................................................... Etiquetas de contenido.......................................................................................................... CSS.......................................................................................................................................... Selectores ............................................................................................................................. Propiedades .......................................................................................................................... Precedencia........................................................................................................................... Interfaces Web

3. Interfaces Web Sergio Santos Gil 3 CSS 3....................................................................................................................................... Propiedades avanzadas ......................................................................................................... Transformaciones ................................................................................................................. Transiciones ......................................................................................................................... Animaciones......................................................................................................................... JQuery ..................................................................................................................................... Selectores ............................................................................................................................. Funciones ............................................................................................................................. Eventos................................................................................................................................. Efectos.................................................................................................................................. GIMP....................................................................................................................................... Tipos de imágenes ................................................................................................................ Componentes de GIMP......................................................................................................... Herramientas de GIMP ......................................................................................................... Crear nueva imagen ..............................................................................................................

4. Interfaces Web Sergio Santos Gil 4 Introducción Un sitio web es un conjunto de páginas web agrupadas bajo un dominio y que comparten una dirección web. Una característica muy común en la mayoría de los sitios web es que tienen una página principal (home o homepage) desde la que se puede acceder a todos los contenidos ofrecidos por el sitio. El diseñador web no puede controlar la información que va a contener el sitio, pero sí decide cómo está organizado el sitio y cómo es esa información mostrada. El diseñador debe buscar un equilibrio entre los elementos que constituyen la interfaz, a fin de poder así hallar un adecuado sentido gráfico de su diseño. Lo primero que determinará es el área de diseño, es decir, que tamaño se asignará al espacio del que se dispone para la composición gráfica. Elementos más destacados para diseñar sitios web: Colores. Elegir una combinación de colores apropiada para un diseño web es una de las tareas más difíciles. En los entornos gráficos digitales, los colores se forman a partir de tres básicos: rojo, verde y azul, que se denominan componentes. Tipografía. Los textos son la base de la gran mayoría de los sitios web, ya que es la fuente de la transmisión de información. Hay que tener en cuenta que los contenidos textuales tendrán el mismo aspecto con independencia del navegador o el sistema operativo que visite la web. Las fuentes más comunes y adecuadas para mostrar texto en pantallas, son de la familia Sans Serif (Verdana, Arial y Helvetica). Y las más legibles en documentos impresos, de la familia Serif (Times New Roman, Courier y Courier New). Iconos. Con estos dibujos, que deben contener la menor cantidad de detalle posible, evitamos leer textos y obtenemos de una manera más rápida las opciones que nos presentan. Por ello, una buena elección de estos iconos ahorra tiempo de lectura al visitante. Colores básicos #FF0000 Rojo #00FF00 Verde #0000FF Azul #FFFFFF Blanco #000000 Negro #FFFF00 Amarillo

5. Interfaces Web Sergio Santos Gil 5 Composición gráfica Una composición gráfica es ordenar todos los elementos de nuestro diseño, ya sean texto o ilustraciones, destinados a impactar visualmente al público receptor de nuestro mensaje. El diseñador gráfico ha de tener un profundo conocimiento de los factores que rigen el fenómeno de la percepción para poder establecer sus composiciones de un modo sólido y fundamentado. Algunos de estos factores son: Componentes psicosomáticos del sistema nervioso. Facilitan el contacto visual con nuestro mensaje gráfico haciendo uso del mecanismo de percepción llamado vista. Componentes de tipo cultural. Influyen la interpretación que hacemos de los estímulos desde un punto de vista cultural y educacional. Experiencias compartidas con el entorno. Ejemplos: hierva/verde, cielo/azul,… El equilibrio visual. o Equilibro formal: se basa en la simetría. Se busca con él un centro óptico dentro del diseño, es decir, posee igual peso en ambos lados del eje central de nuestra página. o Equilibrio informal: consigue contraponer y contrastar los pesos visuales de los elementos buscando diferentes densidades, tanto formales como de color, que consigan armonizar visualmente dentro de una asimetría intencionada. También importa la posición, dependiendo de donde se coloquen los elementos se podrá conseguir un mayor equilibrio y se podrá apreciar mejor. La tensión compositiva. Tiene como finalidad dirigir la mirada y conseguir fijar la atención del observador. o Técnica sugestiva: consiste en dirigir intencionadamente la atención a un punto determinado utilizando elementos de apoyo. o Técnica rítmica: basada en la tendencia innata del ojo humano a completar secuencias de elementos, agrupando aquellos que poseen formas semejantes.

6. Interfaces Web Sergio Santos Gil 6 Componentes de una interfaz web Cabecera. Zona de la interfaz web situada en la parte superior de la misma, de anchura generalmente igual a la de la página y altura variable, en la que se ubica generalmente el logotipo del sitio web o la empresa. También suele ir con una imagen de fondo, un menú, formularios de login,… Su objetivo principal es el de identificar el sitio web con la empresa a la que representa y homogeneizar todas las páginas pertenecientes al sitio web, ya que la cabecera suele ser común en todas ellas, creando con ello un elemento de referencia común. Sistemas de navegación. Son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que comparten el sitio web. Generalmente se presentan como menús formados por diferentes opciones, con las que el usuario puede interaccionar al seleccionarlas, pasando a una nueva página o documento. Son un elemento principal en todo sitio web porque permite que el usuario sepa en todo momento cómo moverse por el sitio y saber dónde está. o Menú de pestañas: simula el aspecto de un clásico archivador de carpetas, apareciendo en primer plano la pestaña activa, en un color diferente y unido visualmente a la base común o al cuerpo de la página. o Menú “estas aquí” (breadcrumb): presenta en forma textual una serie de enlaces que describen la ruta que ha seguido el usuario para llegar a la página actual a partir de la página de inicio, permitiendo regresar a cualquiera de ellas rápidamente.

7. Interfaces Web Sergio Santos Gil 7 Cuerpo: es la parte de la página web donde se presenta al usuario toda la información referente a los contenidos de la página. Lo que aparece en el cuerpo suele ser el objetivo del sitio; el espacio destinado a ella debe ser el mayor de todos (50%-80%). Su ubicación siempre es central, bajo la cabecera. Es habitual que el cuerpo central lleve un título que se situará en la parte superior de la zona. El tamaño de la letra del título tiene que ser superior al del resto del contenido. Pie de página: es la parte de una interfaz web situada en la parte inferior de la misma, bajo el cuerpo de la página, que sirve para mostrar enlaces a contratación de publicidad, formulario de contacto, ofertas de empleo, condiciones de uso, políticas de seguridad,…

8. Interfaces Web Sergio Santos Gil 8 Glosario  La maquetación web es colocar las diferentes partes de una página dentro de sus límites. La ventaja principal es mantener separado el contenido de la página de la presentación, es decir, que si hay cambios en los contenidos no tenga que tocarse el diseño y viceversa.  Las capas, también llamadas DIV o layout, son como contenedores donde se colocan imágenes, textos o incluso otras capas. Las capas se definen en el lenguaje CSS: o Las capas pueden estar anidadas, es decir, pueden estar unas dentro de otra. o Las capas bloques son contenido HTML que pueden posicionarse de manera dinámica y anidarse.  Mapas de navegación son esquemas que permiten anticipar cuáles son las secciones en las que estará dividida el sitio web y la relación entre los diferentes bloques de contenidos.  Un prototipo web es un borrador o modelo inicial a partir del cual se empieza a concebir y desarrollar la idea original del diseño de un sitio web. A la hora de realizar prototipos se puede separar la interfaz gráfica en dos grupos de elementos: o Elementos abstractos y comunes, tales como la cabecera, barras de navegación, los pies de página, los formularios, etc. o Elementos concretos de una página web, como por ejemplo los botones, enlaces, campos de texto, imágenes, etc.

9. Interfaces Web Sergio Santos Gil 9  La guía de estilo sirve como una herramienta para garantizar la coherencia de un sitio web a través de las páginas web del sitio. Es una técnica para conseguir integrar en un mismo objetivo a todos los miembros de un equipo de trabajo.  Un gestor de contenidos se define como una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. Permite manejar de manera independiente el contenido y el diseño, además de permitir la fácil y controlada publicación en el sitio a varios editores (Joomla, Wordpress, OpenCMS). Los gestores de contenidos suelen estar basados en PHP/HTML y gestores de bases de datos MySQL, por lo que son un código y licencia libre. La construcción de un sitio web se hace utilizando elementos de diseño predefinidos denominados plantillas. Herramientas para desarrollar sitios web General: Programas cuya utilidad es de interés general (navegadores web, FTP). Diseño: Programas útiles para diseñar páginas web (Balsamiq16, Pencil Proyect, SketchFlow). Multimedia: programas orientados a la gestión o creación de animaciones (Adobe Flash Professional, Silverlight, JavaFX). Programación: Programas elaboran páginas y sitios web (HTML, JavaScript, JQuery, PHP, ASP). Editores y validadores HTML: Programas para la edición de código HTML y para su comprobación (Dreamweaver, Kompozer). Editores y validadores CSS: Programas que facilitan la creación, edición y comprobación de código CSS (Stylizer, Xyle Scope, CSS Toolbox).

10. Interfaces Web Sergio Santos Gil 1 0 joomla Joomla! es uno de los sistemas de gestión de contenidos (CMS) más populares y potentes que existen hoy en día, que le ayuda a construir sitios web y otras aplicaciones online potentes. Lo mejor de todo, es que Joomla! es una solución de código abierto y está disponible libremente para cualquiera que desee utilizarlo. Joomla! se puede usar para gestionar fácilmente cualquiera de los aspectos de un sitio web, desde la introducción de contenidos e imágenes hasta la actualización de un catálogo de productos o la realización de reservas online. Características: Versatilidad, para cualquier tipo de usuario: desde el más novato hasta el programador más avanzado. Interfaz de administración suficientemente intuitiva. Un sistema de plantillas que permite disfrutar de un sitio web de aspecto profesional a la vez que personal con multitud de diseños disponibles incluso gratuitamente. Con una excelente comunidad de usuarios con varios sitios con abundante información, tutoriales y materiales de aprendizaje. Instalación Antes de poder instalar Joomla, nos hace falta un servidor web (Apache, PHP) con acceso a bases de datos (MySQL) o XAMPP que contiene varios servicios a la vez. Una vez lo tengamos, procedemos a descargar un fichero .zip de http://www.joomla.org/download.html, el cual se descomprime en la carpeta htdocs o www de nuestro servidor web. Ahora tenemos que acceder a http://localhost/joomla/ para procesar el asistente de instalación:

11. Interfaces Web Sergio Santos Gil 1 1 1. El primer paso que nos pide nuestro asistente es la configuración básica del sitio, es decir, el idioma, el nombre del sitio con una breve descripción, así como el correo electrónico, el nombre de usuario administrador y su contraseña. 2. A continuación, nos pedirá la configuración de la bases de datos que irá asociado nuestro sitio web. En este paso tenemos que indicar el tipo, nombre y hospedaje de la base de datos, así como su usuario y contraseña del administrador.

12. Interfaces Web Sergio Santos Gil 1 2 3. Antes de procesar a la instalación, nos mostrará una ventana con la visión general que hemos otorgado al sitio web. 4. Si nos hemos equivocado o queremos cambiar alguna configuración podemos retroceder, si no ya podemos instalar Joomla! 5. Una vez ya instalado Joomla!, tenemos que eliminar la carpeta de instalación. Esto es una medida de seguridad ya que alguien podría acceder a nuestro sitio y acceder a dicha carpeta, lo que conllevaría perder todo el sitio web.

13. Interfaces Web Sergio Santos Gil 1 3 Administración Podemos acceder a la administración del sitio web a través de la dirección http://localhost/joomla/administartor donde nos pedirá la cuenta del usuario y la contraseña del administrador para poder acceder. Áreas de la administración de Joomla La administración de Joomla se divide en cuatro áreas:  El menú principal es el centro de navegación del panel de administración, dentro de él cada botón posee un menú desplegable con más opciones, los cuales pueden también poseer otros menús desplegables con sus propias opciones.  La barra de información nos brinda datos sobre: El nombre del sitio. La sección o componente actual de trabajo. El nombre del usuario conectado. El número de mensajes que tiene de otros administradores/managers designados. El número de usuarios con sesiones abiertas.  La barra de herramientas provee al administrador de distintos instrumentos para la creación y manipulación de los contenidos. No solamente contenidos sino también cualquier elemento de Joomla que podamos editar, crear o configurar.  El espacio de trabajo es el área que se actualiza cuando haces alguna selección del menú o utilizas una herramienta de la barra de herramientas. Sirve para seleccionar los elementos con los cuales queremos trabajar y editarlos, también para fijar posiciones, para instalar, configurar, o posicionar componentes y módulos, etc.

14. Interfaces Web Sergio Santos Gil 1 4 Usuarios de Joomla Usuarios del Sitio Usuario Acceso y Permisos Registrado Registered No puede crear, editar o publicar contenido en el sitio. Puede enviar nuevos enlaces web para ser publicados y puede tener acceso a contenidos restringidos que no están disponibles para los invitados. Autor Author Pueden crear su propio contenido, especificar ciertos aspectos de cómo se presentará el contenido e indicar la fecha en la que debería publicarse el material. Editor Editor Tienen todas las posibilidades de un Autor, y además la capacidad de editar el contenido de sus propios artículos y los de cualquier otro Autor. Supervisor Publisher Pueden ejecutar todas las tareas de los Autores y Editores, y además tienen la capacidad de publicar un artículo. Usuarios del Administrador Usuario Acceso y Permisos Mánager Manager Tiene los mismos permisos que un Supervisor pero con acceso al panel de administración. Los managers tienen acceso, en el panel del administrador, a todos los controles asociados al contenido, pero no tienen capacidad para cambiar las plantillas, alterar el diseño de las páginas, o añadir o eliminar extensiones de Joomla. Tampoco tienen autoridad para añadir usuarios o alterar los perfiles de usuarios existentes. Administrador Administrator Además de todas las actividades relacionadas con el contenido que puede ejecutar un Mánager, los administradores pueden añadir o eliminar extensiones al sitio web, cambiar plantillas o alterar el diseño de las páginas, e incluso alterar los perfiles de usuario a un nivel igual o inferior al suyo. Lo que no pueden hacer es editar los perfiles de Súper-Administradores o cambiar ciertas características globales del sitio web. Súper- Administrador Tienen el mismo poder que un ‘root‟ y disponen de posibilidades ilimitadas para ejecutar todas las funciones administrativas de Joomla. Solo los Súper- Administradores tienen la capacidad de crear nuevos usuarios con permisos de Súper-Administrador, o asignar este permiso a usuarios ya existentes.

15. Interfaces Web Sergio Santos Gil 1 5 Glosario de Joomla Sección. Es una colección de categorías que se relacionan entre si de alguna manera. Categorías. Las categorías son como pequeñas aplicaciones que presentan el contenido principal de la página. Una analogía que puede facilitar la comprensión de la relación sería que: Joomla es el libro y las categorías son los capítulos del libro. Las categorías gestionan datos, muestran información, proporcionan funciones y en general pueden ejecutar cualquier operación que no recaiga en las funciones generales del código del núcleo. Módulos. Los módulos se usan para pequeñas partes de la página generalmente menos complejos y que pueden asociarse a diferentes componentes. Para continuar con la analogía del libro, un módulo puede considerarse como una nota a pie de página o cabecera. Los módulos son como pequeñas mini-aplicaciones que pueden situarse en cualquier lugar del sitio. En algunos casos trabajan en conjunción con componentes y en otros son fragmentos de código aislados y completos que se usan para mostrar algunos datos de la base de datos Plugin. Un plugin es una porción de código que se ejecuta cuando tiene lugar un evento predefinido en Joomla. El uso de plugins permite al desarrollador cambiar el modo en que se comporta el código, dependiendo de los plugins instalados para reaccionar a un determinado evento. Lenguajes. Los lenguajes se empaquetan bien como paquetes de lenguaje o como paquetes de extensión de lenguaje. Estos permiten internacionalizar tanto el núcleo de Joomla! como los componentes y módulos de terceras partes.

16. Interfaces Web Sergio Santos Gil 1 6 wordpress Wordpress es uno de los sistemas de gestión de contenidos (CMS) más populares y potentes que existen hoy en día, que le ayuda a construir sitios web y otras aplicaciones online potentes. Instalación (lo hacéis vosotros)

17. Interfaces Web Sergio Santos Gil 1 7 Administración

18. Interfaces Web Sergio Santos Gil 1 8

21. Interfaces Web Sergio Santos Gil 2 1 moodle Moodle es una plataforma de aprendizaje a distancia basada en software libre que cuenta con una grande y creciente base de usuarios. Es un sistema de gestión avanzada; es decir, una aplicación diseñada para ayudar a los educadores a crear cursos de calidad en línea. Instalación (lo hacéis vosotros)

22. Interfaces Web Sergio Santos Gil 2 2 Administración Visualmente, el ambiente que ofrece Moodle está repartido en cuatro áreas específicas: Para iniciar nuestro trabajo en la plataforma Moodle, debemos de elegir la opción Activar edición, para contar con la disponibilidad de sus herramientas. En Moodle los usuarios están definidos por los roles que desempeñan dentro de la plataforma. Estos roles se pueden asignar en diferentes niveles, bien para todo el sitio o bien para un curso en concreto: Administrador: Es el que gestiona la plataforma y configura las variables del sitio. Decide cómo se crean nuevos usuarios, asigna roles a los mismos, crea los cursos y organiza las categorías. Creador de curso: Estos usuarios tienen privilegios para crear nuevos cursos y además enseñar en ellos. Profesor: Este usuario necesita que el Administrador o el Creador de curso creen un curso para él y se lo asignen. Dentro del curso tendrá todos los privilegios a la hora de estructurarlo. Profesor sin permiso de edición: No puede decidir en cuanto a la programación, ni los contenidos, tan solo calificar y enseñar a los alumnos. Estudiante: Los estudiantes pueden consultar los recursos, hacer las actividades propuestas y plantear dudas a los profesores. Invitado: Vendría a ser como un oyente. Si el curso admite la presencia de invitados, podrá acceder a los recursos y consultar la información del curso, pero no podrá realizar las actividades ni plantear dudas o cuestiones.

23. Interfaces Web Sergio Santos Gil 2 3 Los recursos en Moodle son elementos que contienen información que puede ser leída, vista, descargada de la red o usada de alguna manera para extraer información de ella. Etiquetas: se utilizan para presentar objetivos, un resumen breve, imágenes, videos o links. Permiten identificar cada parte y dan estructura lógica al aspecto del curso. Componer página de texto: sirve para registrar textos básicos en un curso. También se podrán utilizan para la explicación de un trabajo o la actividad de una clase. Componer una página web: el componer nuestras propias web puede resultarnos muy útil, especialmente cuando deseamos reunir en un sólo documento textos, imágenes, enlaces y videos. Enlazar archivo o página web: se utilizan para hacer enlaces a páginas o documentos que se emplean en el curso. Las actividades en Moodle son indicaciones que te solicitan realizar algún trabajo basado en los recursos que has utilizado, generalmente con una actividad se hace posible que el estudiante interactúe con otros estudiantes o con el profesor. Implementar foros. Los foros son espacios para intercambiar ideas o fomentar debates, incidir sobre el análisis de un caso o recibir opiniones sobre algún tema que se desee profundizar. Implementar tareas. Podemos usar la actividad tarea para delegar un trabajo o una actividad a los estudiantes, la evidencia de ésta tarea generalmente es solicitada en un formato digital: un documento, una hoja de cálculo, una presentación, un video, etc: o Subida avanzada de archivos: permite enviar varios archivos. o Texto en línea: devuelve la tarea como en texto en línea. o Subir un solo archivo: permite subir sólo un archivo (word, pdf,…). o Actividad no en línea: recordatorio para entregar el archivo en clase. Implementar cuestionarios. Los cuestionarios nos permite generar varias de preguntas, las cuales conforman lo que se conoce como un repositorio o banco de preguntas, en las preguntas se pueden considerar diversos elementos: imágenes, tablas, enlaces a archivos de diverso tipo y a páginas web.

24. Interfaces Web Sergio Santos Gil 2 4 HTML 5 Etiquetas de secciones Secciones <header> Representa elementos introductores o de navegación, es decir, elementos de encabezado como logos, titulo, formulario de búsqueda,… <nav> Encapsula un bloque de menú de navegación. <main> Representa el contenido principal del documento. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita como barra laterales, enlaces de navegación,… <section> Genera una sección de contenido, en el cuál se puede ubicar dentro otros tipos de sección (nav, article,…). <article> Representa una composición auto-contenida en un documento o aplicación. Podría ser un mensaje de foro, un artículo de revista, una entrada de blog o cualquier elemento independiente del contenido. <address> Contiene la información de contacto de los autores del documento. Crea una caja en bloque. <aside> Representa una sección de una página que consiste en contenido independiente relacionado con el contenido que le rodea. Son representados normalmente como barras laterales y contienen publicidad, biografía del autor, información de perfil,… <footer> Representa un pie de página que contiene información acerca del autor o empresa, derechos de autor, enlaces a otros documentos relacionados,… Etiquetas de contenido Contenido <figure> Representa contenido independiente, a menudo con un titulo. Por lo general, se trata de una imagen o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página sin que afecte al flujo principal. <figcaption> Contiene información en forma de leyenda dentro de una etiqueta <figure>. <time> Establece una referencia de tiempo o fecha. Contiene el atributo datetime que especifica a la máquina el formato del tiempo o de la fecha. <mark> Representa un texto resaltado, es decir, una ejecución de texto marcado para referencia. Se puede usar para mostrar los resultados de una búsqueda. <canvas> Representa un área de mapa de bits en el que se puede dibujar gráficos a través de secuencias de comandos (JavaScript). Puede usarse para dibujar gráficos, hacer composiciones o realizar animaciones.

26. Interfaces Web Sergio Santos Gil 2 6 Multimedia Imagen img Inserta imágenes en las páginas web: src: indica la URL de la imagen alt: texto alternativo width/height: tamaño de la imagen usemap: si existe, indica la información del mapa asociado y será l nombre del mapa ismap: si la imagen es un mapa y se encuentra dentro de un enlace, entonces hay que indicarlo mediante este parámetro booleano Audio bgsound Añade audio de fondo a la página web. src: indica la URL del fichero loop: indica cuantas veces se repite volumen: volumen del audio audio Añade audio sin necesidad de plugins. src: URL del fichero autoplay: reproducción automática controls: indica la aparición de los controles de reproducción loop: repetición del audio preload: indica si el audio debería ser cargado con la página (auto/none) source: (etiqueta) permite incluir varios tipos de ficheros, pudiendo el navegador reproducir el fichero que pueda soportar Video video Permite añadir ficheros de video sin necesidad de plugins. Contiene los mismos atributos que audio. width/height: tamaño del vídeo poster: muestra una imagen mientras el video se está cargando o hasta que se pulsa el botón de reproducción embed Inserta complementos (plugins) tanto de audio como de vídeo. src: URL del fichero autostart: reproducción automática loop: true/false si se repite el audio width/height: tamaño de la consola de control de sonido controller: indica si aparece o no la consola de controles del reproductor type: indica el tipo de fichero

27. Interfaces Web Sergio Santos Gil 2 7 Hoja de estilo en cascada (CSS) Las hojas de estilo en cascada (CSS) permiten separar los contenidos de las páginas web y la información sobre su aspecto tales como los colores, fondos, márgenes,… El comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares, se denomina modelo de cajas. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja que encierra los contenidos de ese elemento. CSS nos permite modificar las características de las cajas. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son: Contenido (content): se trata del contenido HTML del elemento. Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Borde (border): línea que encierra completamente el contenido y su relleno. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes. El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y, en el espacio ocupado por el margen, se muestra el color o imagen de fondo de su elemento padre.

28. Interfaces Web Sergio Santos Gil 2 8 Los estilos se definen en la cabecera del documento HTML, mediante la etiqueta <style>, especificando mediante el atributo type. Este método se emplea cuando se define un número pequeño de estilos. Otra forma de incluir estilos mediante un fichero externo, con extensión .css, gracias a la etiqueta <link>. Esta etiqueta contiene cuatro atributos cuando enlaza un archivo CSS: rel: indica el tipo de relación, cuyo valor para archivos CSS es stylesheet. type: indica el tipo de recurso enlazado, cuyo valor será text/css. href: indica la URL del archivo CSS, que puede ser relativa o absoluta. media: indica el medio en el que se van a aplicar los estilos. Selectores o Selectores básicos Selector universal: se utiliza para seleccionar todos los elementos de la página. El selector universal se indica mediante un asterisco (*). Selector de etiqueta: selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Si se quiere aplicar los mismos estilos a varias etiquetas diferentes, se pueden encadenar los selectores mediante coma (,).

29. Interfaces Web Sergio Santos Gil 2 9 Selector descendente: Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento, sin importar el nivel de profundidad en el que se encuentre. Se puede omitir los elementos indirectos mediante el asterisco (*), con lo que se interpreta como todos los elementos de tipo span que se encuentren dentro de cualquier elemento, que a su vez, se encuentre dentro de un elemento de tipo div. = Selector de clase: Selecciona los elementos que contienen el atributo class de HTML especificado, se indica mediante un punto (.) seguido del nombre que le vayamos a otorgar. Se puede especificar solo a ciertas etiquetas o de forma global, es decir, si no se especifica la etiqueta se aplicarán a todas las etiquetas con la clase indicada. Selector de identificador (ID): Selecciona los elementos que contienen el identificador id de HTML especificado. Se indica mediante un asterisco (#) seguido del nombre que le vayamos a otorgar. También se puede especificar solo a ciertas etiquetas o de forma global.

30. Interfaces Web Sergio Santos Gil 3 0 o Selectores avanzados Selector hijo: selector similar al descendente, pero se utiliza para seleccionar un elemento que es hijo directo de otro elemento, y se indica mediante el signo (>). En este ejemplo, solo el color se aplica a la etiqueta i resaltada, ya que la otra etiqueta no es hija directa. Selector adyacente: se emplea para seleccionar elementos que en HTML de la página se encuentran justo a continuación de otros elementos, y se indica mediante el signo (+). En este caso, solo se aplica a la etiqueta h2 que está inmediatamente después de la etiqueta h1. Selector de atributos: permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. o [nombre_atributo]: selecciona los elementos que tienen establecido dicho atributo, independientemente de su valor. o [nombre_atributo=valor]: selecciona los elementos que tienen establecido dicho atributo con el valor especificado. o [nombre_atributo~=valor]: selecciona los elementos que tienen establecido dicho atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a dicho valor. o [nombre_atributo|=valor]: selecciona los elementos que tienen establecido dicho atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con el valor especificado. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

31. Interfaces Web Sergio Santos Gil 3 1 Propiedades Aspecto width Establece la anchura de un elemento. height Establece la altura de un elemento. margin Establece la anchura de algunos o todos los márgenes de los elementos. - margin-top - margin-bottom - margin-right - margin-left padding Establece de forma directa los rellenos de los elementos. - padding-top - padding-bottom - paddin -right - padding-left border-width Establece la anchura de todos los bordes del elemento. border-color Establece el color de todos los bordes. border-style Establece el estilo de los bordes: dotted = bordes mediante puntos dashed = borde discontinuo solid = borde sólido double = doble borde groove = borde sombreado por abajo ridge = borde sombreado por arriba inset = borde solo por encima outset = borde solo por debajo border Establece el estilo completo de todos los bordes. Fuente color Cambia el color del texto. Se especifica mediante el nombre en inglés o mediante #RRGGBB. font-family Indica el tipo de letra con el que se muestra el texto. Se puede indicar mediante el nombre de una familia tipográfica (Arial) o mediante el nombre genérico (serif). font-size Modifica el tamaño del texto. Se indica mediante el tamaño absoluto (x-small, médium,…) o tamaño relativo (20px, 15%, 2em,…). font-weight Establece la anchura de la letra (normal, bold, lighter,…). font-style Establece el estilo de la letra (normal, italic, oblique).

32. Interfaces Web Sergio Santos Gil 3 2 Texto text-align Establece la alineación del contenido (left, right, center, justify). line-height Permite controlar la altura ocupada por cada línea de texto (px, %, em). text-decoration Establece la decoración del texto (underline, overline, line-through, blink). text-transform Varía de forma sustancial el aspecto del texto (capitalize, uppercase, lowercase). vertical-align Determina la alineación vertical de los contenidos (sub, super, top, middle, bottom, px, %,…). text-indent Tabula desde la izquierda la primera línea del texto (unidades de medida). Fondo background-color Permite mostrar un color de fondo sólido. background-image Permite mostrar una imagen como fondo (url(“imagen”)). background-repeat Permite controlar la forma de repetición de las imágenes de fondo (repeat, repeat-x, repeat-y, no-repeat). background-position Controla la posición en la que se muestra la imagen de fondo (center, left, %, px,…). backgroun-attachment Controla la forma en la que se visualiza la imagen de fondo (scroll, fixed). background Establece todas las propiedades del fondo. Tablas border-collapse Define el mecanismo de fusión de los bordes de las celdas adyacentes (collapse, separate). border-spacing Establece la separación entre los bordes (px, .em, %,…). caption-side Establecel al posición del título (top, bottom). empty-celss Define el uso para las celdas vacías (show, hide). table-layout Establece el algoritmo utilizado para mostrar la tabla (auto, fixed). Listas list-style-type Permite establecer el tipo de viñeta mostrada para una lista (disc, circle, decimal, square,…). list-style-position Permite establecer la posición de la viñeta de cada elemento (inside, outside). list-style-image Permite reemplazar las viñetas por una imagen (url(“”)). list-style Propiedad que permite establecer de forma simultánea todas las opciones de una lista.

33. Interfaces Web Sergio Santos Gil 3 3 Precedencia de estilos La precedencia de estilos es una manera de indicar que un estilo definido prevalece por encima de otro definido en la misma o en CSS diferentes. Esto es necesario cuando hay dos o más estilos que actúan sobre los mismos atributos pero con diferente valor. Orden de prioridades de menor a mayor: Selector de etiqueta. Selector de clase. Selector de identificador style: atributo HTML que especifica el estilo de una etiqueta. !important: atributo de CSS que controla la prioridad de las declaraciones de las diferentes hojas de estilos. Visibilidad overflow Especifica el comportamiento del contenido si se desborda en la caja (visible, hidden, scroll). clip Especifica la región visible del elemento mediante las dimensiones de un rectángulo que hace de ventana de visualización (top, right, bottom, left). visibility Visibilidad de las cajas (visible, hidden, collapse). display Define el tipo de caja que genera un elemento. none: indica que el elemento desaparece. block: el elemento ocupará un bloque; ocupa todo el ancho disponible. inline: los elementos permiten la ubicación de otros elementos adyacentes; ocupan la misma línea. list-item: el elemento se comporta como una lista. Enlaces Se pueden aplicar varios estilos a los enlaces, pero también permite aplicar estilos a un mismo enlace en función de su estado (pseudo-clases): a:link{…} Aplica estilos a los enlaces que aún no han sido visitados. a:visited{…} Aplica estilos a los enlaces que han sido visitados por el usuario anteriormente. a:hover{…} Aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón. a:active{…} Aplica estilos al enlace que está pinchando el usuario.

34. Interfaces Web Sergio Santos Gil 3 4 CSS 3 Propiedades avanzadas Bordes border-radius Redondea las esquinas de los bordes (px, %, em,…). box-shadow Añade un efecto sombra a los bordes (px, %,…, #color). border-image Transforma una imagen en un borde que redondea el contenido. En la cual, hay que especificar la url de la imagen, indicar el tamaño que se va a utilizar de cada esquina de la imagen (px, %, em…) y especificar el estilo que queremos para el borde: stretch: estira el resto de la imagen. round: el resto de la imagen se repite. Fondos CSS3 permite el uso de varias imágenes de fondo en un elemento. background-size Redimensiona el fondo de una imagen (auto, px, %,…) background-origin Especifica el área de posicionamiento de las imágenes de fondo. Valores: border-box: la posición del fondo se determina respecto al área que incluye el borde. padding-box: es el valor por defecto, que determina la posición del fondo respeto al área que incluye el padding. content-box: el fondo se posiciona respecto al área del contenido. Textos text-size Permite utilizar cualquier unidad de medida para establecer el tamaño de la letra (px, %, em,…) text-shadow Añade sombra al texto. Se especifica el desplazamiento horizontal y vertical de la sombra respecto al texto. De forma opcional, se puede indicar lo nítido o borroso que se ve la sombra y el color. word-wrap Especifica que las palabras que sean demasiado largas se deben cortar, de manera que quepan en el ancho disponible de la caja (normal, break-word).

35. Interfaces Web Sergio Santos Gil 3 5 Fuentes @font-face{} Permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar src: url() desdela que el navegador se puede descargar la fuente utilizada y font-family para especificar la fuente. También permite otras propiedades como su formato (format()), grosor (font-weight) y estilo (font-style). Transparencia opacity Permite incluir transparencias en el diseño de una página. El valor se establece entre 0.0, cuyo valor es la máxima transparencia, y entre 1.0, que corresponde con la máxima opacidad. Espacios en blanco white-space Establece el tratamiento de los espacios en blanco. normal: los espacios en banco y los saltos de línea sobrantes se eliminan. nowrap: elimina los espacios en blancos sobrantes, pero no añade saltos de línea en el texto original. pre: no se eliminan los espacios sobrantes y sólo se muestran los saltos de línea incluidos en el texto. pre-wep: se comporta igual que pre, pero se introducen los saltos de línea que sean necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor. pre-line: se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de línea originales. Perfiles Los perfiles son parecidos a los bordes excepto que no ocupan espacio y pueden tener formas no rectangulares. outline Establece algunas o todas las propiedades de todos los perfiles de los elementos tales como el grosor, estilo y anchura (#color, solid, dotted, px, em,…).

36. Interfaces Web Sergio Santos Gil 3 6 Transformaciones, transiciones y animaciones Transformaciones transform permite transformar un elemento de distintas formas y de forma simultánea: transform: rotate(deg) Rota un elemento los grados especificados en el sentido de las agujas del reloj. Para que sea en sentido contrario, se especifica un valor negativo. transform: scale(x, y) Permite escalar el tamaño del elemento. Se especifica el nuevo valor para el eje x y para el eje y del elemento. transform: translate(x, y) Permite desplazar un elemento indicando una medida (px, %,…) en los distintos ejes del elemento. transform: skew(Xdeg, Ydeg) Permite torcer un elemento, especificando los grados en los distintos ejes. transform-origin Permite cambiar la posición de los elementos transformados (left, center, right, length, %). Transiciones Las transiciones CSS3 son efectos que se aplican en el cambio gradual de un estilo a otro. Hay que especificar al menos la propiedad CSS a la cual se le quiere aplicar el efecto y la duración del efecto. transition-property Especifica las propiedades a la que se aplicará el efecto. transition-duration Define la duración de la transición. transition-timing-function Describe la función de tiempo que seguirá la transición. ease: comienzo lento, luego rápido y finalmente termina lento (valor por defecto). linear: Con la misma velocidad de inicio a fin. ease-in: comienzo lento. ease-out: final lento. ease-in-out: comienzo lento y un final lento. transition-delay Retardo de tiempo en la aplicación de la transición. Prefijo Navegador -ms- -webkit- -moz- -o-

37. Interfaces Web Sergio Santos Gil 3 7 Animaciones Las animaciones permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma. animation-name Indica el nombre de la animación a la que hacemos referencia. animation-duration Indica el número de segundos o milisegundos de la animación. animation-iteration-count Indica cuantas veces queremos que se repita nuestra animación, aceptando valores enteros o infinite para que no pare de repetirse. animation-direction Define si la dirección de la animación es normal o inversa en ciclos alternos (alternate). animation-timing-function Describe la función de tiempo que seguirá la animación (linear, ease, ease-in, easi-in-out,…). animation-fill-mode Permite definir el estilo que permanecerá al final de la animación (forwards, backwards, both, none). animation-delay Define en segundos o milisegundos el retardo para activar la animación. animation-play-state Pausa (paused) y reanuda la animación (running). @keyframes animacion{} Permite definir los fotogramas clave de una animación (0%{propiedades},100%{propiedades})

38. Interfaces Web Sergio Santos Gil 3 8 Jquery JQuery es una librería con funciones JavaScript con la capacidad de: Acceder y alterar elementos de un documento HTML Modificar la apariencia de una web Responder a una interacción del usuario Realizar animaciones y retocar el CSS Recorrer y modificar el DOM Para insertar jQuery en nuestra web, hay que descargarse la librería de la página oficial http://jquery.com/download/ y se inserta mediante la etiqueta script. Se debe poner al final del documento el código jQuery que vaya a modificar el documento: Selectores Por un selector entendemos lo mismo que en CSS: una forma de permitirnos elegir uno o varios elementos entre todos los que tenemos en nuestro documento HTML: $(selector).acción; Antes de nada es importante saber que el DOM utiliza una estructura de árbol para definir las relaciones entre sus elementos, en la que tenemos padres, hijos, etc…

39. Interfaces Web Sergio Santos Gil 3 9 o Selectores CSS

40. Interfaces Web Sergio Santos Gil 4 0 o Selectores de Formularios

41. Interfaces Web Sergio Santos Gil 4 1 o Selectores Posicionales

42. Interfaces Web Sergio Santos Gil 4 2 Funciones Las funciones permiten mejorar y especificar las selecciones de los elementos, así como poder modificar, añadir, eliminar,… otros elementos y tener control total en el DOM de la página web. Funciones .next() Selecciona sólo el elemento único siguiente hermano de cada elemento previamente seleccionado. .nextAll() Selecciona todos los elementos hermanos que siguen al elemento seleccionado. .prev() Selecciona sólo el elemento único anterior hermano. .prevAll() Selecciona todos los elementos hermanos anteriores al elemento seleccionado. .parent() Obtiene el padre directo de un elemento. .parents() Obtiene un grupo de elementos que contienen los antecedentes del grupo de elementos previamente seleccionados (excepto el elemento raíz). .children() Obtiene un grupo de elementos que contienen todos los hijos inmediatos de cada grupo de elementos previamente seleccionados. .siblings() Obtiene un grupo de elementos que contienen todos sus hermanos del grupo de elementos seleccionados. .contents() Encuentra todos los nodos hijos de los elementos previamente seleccionados (incluyendo textos), o el contenido del documento si el elemento es un iframe. .closest() Obtiene un grupo de elementos que contenga el elemento padre más cercano que cumpla con el selector especificado, incluyendo al elemento inicial. .find() Devuelve una nueva selección que contiene aquellos elementos descendientes de la selección previa que cumplen la condición dada dentro de los paréntesis. .end() Devuelve a la selección inicial en un encadenamiento. .andSelf() Crea un nuevo grupo de elementos a partir de los dos últimos grupos de elementos seleccionados. .get() Permite seleccionar a elementos del DOM. .attr(elemento[, nuevo_valor]) Devuelve el atributo correspondiente al elemento especificado entre paréntesis. Si se emplea otro parámetro, sirve para otorgar un nuevo atributo al elemento seleccionado. .css(propiedad[, nuevo_valor]) Permite obtener el valor de las propiedades CSS de la selección. Si añadimos otro parámetro, sirve para darle un nuevo valor CSS a la selección.

43. Interfaces Web Sergio Santos Gil 4 3 Funciones .html(propiedad[, nuevo_valor]) Permite obtener el bloque HTML contenido en el elemento seleccionado. Si añadimos otro parámetro, permite agregar un bloque de HTML nuevo al elemento. .width([valor]) Obtiene el ancho del elemento. Si especificamos un valor, establece dicho valor al elemento. .height([valor]) Obtiene el alto del elemento. Si especificamos un valor, establece dicho valor al elemento. .position() Devuelve un objeto conteniendo información sobre la posición. .text() Obtienen el texto del elemento, o lo añadimos entre paréntesis. .add() Añade más elementos (indicados entre paréntesis) a la selección. .addClass() Añade clases al elemento seleccionado. .remove() Elimina cualquier elemento y todo su contenido del DOM. .removeClass() Elimina la clase específica por parámetros del elemento. .hasClass() Devuelve true si el elemento contiene la clase especificada pro parámetros, o false en caso contrario. .append(contenidos) .appendTo(contenidos) Añade nuevos contenidos o mueve contenidos ya existentes al final de un elemento sin modificar la información previamente desplegada. .prepend(contenidos) .prependTo(contenidos) Añade nuevos o mueve contenidos existentes al principio de un elemento sin modificar la información previamente desplegada. .clone() Copia la selección, para poder insertarla sin tener que moverla. .insertAfter() Mueve los elementos seleccionados después del elemento que se haya pasado como argumento. .insertBefore() Mueve los elementos seleccionados antes del elemento que se haya pasado como argumento. .after() Mueve el elemento pasado como argumento después del elemento seleccionado. .before() Mueve el elemento pasado como argumento antes del elemento seleccionado. .eq(argumento) Reduce el grupo de elementos seleccionados a un elemento único. Su argumento es la posición del elemento dentro del grupo de elementos previamente seleccionados. .remove() Elimina el elemento seleccionado. .detach() También borra el elemento, pero mantiene la información y los eventos asociados a él, pudiendo reinsertar todo el contenido .not() Selecciona aquellos elementos que NO cumplen con un determinado filtro situado dentro de los paréntesis. .filter() Selecciona aquellos elementos que SI cumplen con un determinado filtro situado dentro de los paréntesis.

44. Interfaces Web Sergio Santos Gil 4 4 Funciones .slice(inicio, final) Selecciona los elementos en una determinada posición. Podemos especificar el inicio, empezando por 0, donde se realiza el corte y otro que indica el final no incluido (opcional). .each() Permite asociar una función que se ejecutará por cada elemento que contenga la selección, es decir, un bucle que recorre todos los elementos de la selección. .val() Obtiene el valor de los elementos de formulario (input, textarea,…). console.log() Muestra por consola lo que especifiquemos entre paréntesis. Para insertar nuevos elementos, basta con introducir a mano el código HTML: $(„<p>…</p>‟): Si queremos comprobar si la selección entrega algún resultado, empleamos el atributo length dentro de un if, ya que devuelve la cantidad de elementos que posee la selección, si el resultado es 0 significa que no ha habido ninguna selección: if ( $(selector).length ) { acción }; Podemos declarar variables que permite mejorar el rendimiento del código pudiendo reutilizar las selecciones en más de una ocasión: var $variable = $(selector); Es conveniente emplear el método ready() que permite leer el contenido jQuery una vez que ya está lista la página web, aunque haya elementos que no hayan sido cargados de todo. $(document).ready( function({ //código jQuery }) );

45. Interfaces Web Sergio Santos Gil 4 5 Eventos Para poder ejecutar estos métodos, jQuery provee manejadores que permiten la ejecución de dichos eventos, tanto individualmente o colectivamente, a una selección gracias al manejador .on() o one(), que solo permite realizarlo una sola vez. Para poder ejecutar varios eventos a la vez, tenemos que pasarle por parámetros un objeto: $(„selector‟).on( „evento‟, function(){ acción; } ); $(„selector‟).on( { „evento1‟: function(){ acción; }, „evento2‟: function(){ acción; } } ); Eventos Ratón .click() Se produce al hacer click sobre el elemento seleccionado. .dblclick() Se produce al hacer doble click sobre el elemento seleccionado. .hover() Se produce cuando el ratón entra y sale por encima del elemento. .mousedown() Se produce cuando el usuario hace click, en el momento que presiona el botón (tanto derecho como izquierdo) independientemente de si lo suelta o no. .mouseup() Cuando el usuario suelta el botón al hacer click. .mouseenter() Cuando el usuario sitúa el puntero del ratón encima del elemento. .mouseleave() Cuando el puntero ratón se mueve sobre el elemento. .mouseout() Cuando el puntero del ratón sale de la superficie del elemento o de los elementos que pueda contener. .mouseover() Cuando el puntero ratón se mueve sobre el elemento. .toggle() Permite, con una sola función, alternar entre una acción y otra. Teclado .keydown() Se produce cuando el usuario presiona una tecla, independientemente si se suelta o no. Se realiza una única vez. .keypress() Se realizar al pulsar una teca. .keyup() Se realiza cuando el usuario suelta la tecla presionada. Combinación de los anteriores .focusin() Cuando el elemento gana el foco al hacer click sobre él o tras presionar la tecla de tabulador. .focusout() Cuando el elemento pierde el foco tras clickear en otro elemento o tras tabular. .focus() Cuando se produce el método focus() de JavaScript; al ganar el foco de la aplicación,

46. Interfaces Web Sergio Santos Gil 4 6 o Objeto de evento La función controladora de eventos recibe un objeto de eventos, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento. o Delegación de eventos Cuando añadimos nuevos elementos mediante jQuery, las opciones de selección y cambio que emplearemos sobre los elementos de la página, no afectan a los nuevos elementos introducidos. Hasta que el elemento exista, no se pueden asociar eventos. Para poder manipular los elementos nuevos, emplearemos el método on(), que permite asignar eventos a los elementos del DOM, incluso a los elementos introducidos por jQuery. Su ante opuesto es el método off(), que elimina los eventos. Propiedades .pageX .pageY Indica la posición del puntero del ratón en el momento del evento (eje X e eje Y). .type Indica el tipo de evento producido. .which Indica el botón del ratón (0, 1) o la tecla pulsada (código ASCII). .target Hace referencia al elemento DOM que inicializa el evento. Métodos .preventDefault() Cancela la acción predeterminada del evento (suele usarse comúnmente para anular hipervínculos). .stopPropogation() Detiene la propagación del evento sobre otros elementos.

47. Interfaces Web Sergio Santos Gil 4 7 Efectos Con jQuery también se pueden añadir efectos que poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS. Métodos .show() Muestra el elemento seleccionado. .hide() Oculta el elemento seleccionado. (Objeto) speeds Es un objeto que contiene la velocidad predeterminada para la duración de un efecto. Propiedades: slow: indica la velocidad lenta de la animación. fast: indica la velocidad rápida de la animación. _default: indica la velocidad predeterminada. .fadeIn() De forma animada, cambia la opacidad del elemento al 100%. .fadeOut() De forma animada, cambia la opacidad del elemento al 0%. .slideDown() Muestra el elemento seleccionado gradualmente con un movimiento de desplazamiento vertical. .slideUp() Oculta el elemento seleccionado gradualmente con un movimiento de desplazamiento vertical. .slideToggle() Muestra u oculta el elemento seleccionado, dependiendo si está visible o no. .animate() Realiza una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales. .stop() Detiene las animaciones que se están realizando en el elemento seleccionado. .delay() Espera un tiempo determinado, indicado por parámetro, antes de realizar la próxima acción. Cuando un efecto ha finalizado, podemos añadirle una función denominada callback, para que cuando finalice la acción ocurra un acontecimiento.

48. Interfaces Web Sergio Santos Gil 4 8 GIMP Tipos de imágenes o Mapas de bits: Son imágenes pixeladas, es decir, que están formadas por un conjunto de pixeles contenidos en una tabla. Cada uno de estos puntos tienen un valor o más que describe su color. Contienen limitaciones a la hora de la modificación de color, cambiar texto,...; y al redimensionar, ya que se redimensionan los pixeles perdiendo definición y calidad. .GIF. Imágenes sencillas, de formas simples, en las que no existe un número elevado de colores.  Número de colores de 2 a 256 de una paleta de 24 bits  Compresión sin pérdida  Máscara de transparencia de 1 bit  Permite la animación simple .PNG. Imágenes renderizadas, que logran degradados más suaves y buena definición de las líneas  Color indexado hasta 256 colores y hasta 48 bits por píxel.  Comprensión sin pérdida, mayor que .gif  Posibilidad de canal alfa (transparencia variable)  No permite animación .JPG. Diseñado para la compresión de imágenes fotográficas basándose en la limitación del ojo humano.  24 bits de color u 8 bits B/N  Elevado grado de posibilidad de comprensión  Comprensión con pérdida  No permite transparencia ni animaciones

49. Interfaces Web Sergio Santos Gil 4 9 o Vectoriales: Son representaciones de entidades geométricas. Contienen ventajas ya que no pierden calidad al cambiar el tamaño y con una posibilidad de rediseño posterior de la imagen (.ps, .pdf, .fla, .swf, .wmf, .svg, .esp). El tamaño de un fichero gráfico viene determinado, entre otros, por los siguientes factores:  Dimensiones de la imagen  Profundidad o paleta de colores  Resolución  Tipo de fichero Recomendaciones de optimización: Conviene no definir una resolución de imagen no superior a 96 ppp. Puede interesar reducir el número de colores. Conviene utilizar un programa para definir las dimensiones concretas de una imagen. Es recomendable guardar los originales sin comprimir y crear copias con las características optimizadas.

50. Interfaces Web Sergio Santos Gil 5 0 Componentes de GIMP 1. Caja de Herramientas (1) que contiene, en la zona inferior, las Opciones de la herramienta seleccionada. 2. Acceso a Capas, Canales, Rutas y deshacer (superior) y el acceso a las paletas de Brochas, Patrones y Degradados (inferior). 3. Zona de trabajo.

51. Interfaces Web Sergio Santos Gil 5 1 Herramientas de GIMP

54. Interfaces Web Sergio Santos Gil 5 4 Crear una nueva imagen 1. Crear una imagen desde una plantilla proporcionada por el programa o creada por nosotros. 2. Para seleccionar el tamaño de la imagen en píxeles, pulgadas, milímetros, puntos,… 3. La resolución, predeterminada para ver imágenes en la pantalla del ordenador. Los valores pueden cambiarse cuando el destino de la imagen es una impresora. 4. Espacio o modo de color: RGB o escala de grises. La opción RGB permite usar más herramientas. 5. Tipo de relleno. El color de fondo es el que esté seleccionado en la herramienta Selector de color (por defecto es blanco). 6. Aquí se puede añadir un comentario al archivo de la imagen.