css, jquery y más

54
Interfaces Web 2015 Sergio Santos Gil

Upload: sergio-santos

Post on 11-Aug-2015

57 views

Category:

Technology


4 download

TRANSCRIPT

Interfaces Web

2015

Sergio Santos Gil

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

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 ..............................................................................................................

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

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.

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.

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,…

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.

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).

Interfaces Web

Sergio Santos Gil 10

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:

Interfaces Web

Sergio Santos Gil 11

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.

Interfaces Web

Sergio Santos Gil 12

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.

Interfaces Web

Sergio Santos Gil 13

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.

Interfaces Web

Sergio Santos Gil 14

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.

Interfaces Web

Sergio Santos Gil 15

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.

Interfaces Web

Sergio Santos Gil 16

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)

Interfaces Web

Sergio Santos Gil 17

Administración

Interfaces Web

Sergio Santos Gil 18

Interfaces Web

Sergio Santos Gil 19

Interfaces Web

Sergio Santos Gil 20

Interfaces Web

Sergio Santos Gil 21

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)

Interfaces Web

Sergio Santos Gil 22

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.

Interfaces Web

Sergio Santos Gil 23

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.

Interfaces Web

Sergio Santos Gil 24

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.

Interfaces Web

Sergio Santos Gil 25

Interfaces Web

Sergio Santos Gil 26

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

Interfaces Web

Sergio Santos Gil 27

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.

Interfaces Web

Sergio Santos Gil 28

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 (,).

Interfaces Web

Sergio Santos Gil 29

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.

Interfaces Web

Sergio Santos Gil 30

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.

Interfaces Web

Sergio Santos Gil 31

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).

Interfaces Web

Sergio Santos Gil 32

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.

Interfaces Web

Sergio Santos Gil 33

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.

Interfaces Web

Sergio Santos Gil 34

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).

Interfaces Web

Sergio Santos Gil 35

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,…).

Interfaces Web

Sergio Santos Gil 36

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-

Interfaces Web

Sergio Santos Gil 37

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})

Interfaces Web

Sergio Santos Gil 38

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…

Interfaces Web

Sergio Santos Gil 39

o Selectores CSS

Interfaces Web

Sergio Santos Gil 40

o Selectores de Formularios

Interfaces Web

Sergio Santos Gil 41

o Selectores Posicionales

Interfaces Web

Sergio Santos Gil 42

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.

Interfaces Web

Sergio Santos Gil 43

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.

Interfaces Web

Sergio Santos Gil 44

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 }) );

Interfaces Web

Sergio Santos Gil 45

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,

Interfaces Web

Sergio Santos Gil 46

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.

Interfaces Web

Sergio Santos Gil 47

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.

Interfaces Web

Sergio Santos Gil 48

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

Interfaces Web

Sergio Santos Gil 49

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.

Interfaces Web

Sergio Santos Gil 50

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.

Interfaces Web

Sergio Santos Gil 51

Herramientas de GIMP

Interfaces Web

Sergio Santos Gil 52

Interfaces Web

Sergio Santos Gil 53

Interfaces Web

Sergio Santos Gil 54

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.