CSS, jQuery y más

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

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.

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.

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.

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.

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.

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)

Interfaces Web
Sergio Santos Gil 1
7
Administración

Interfaces Web
Sergio Santos Gil 1
8

Interfaces Web
Sergio Santos Gil 1
9

Interfaces Web
Sergio Santos Gil 2
0

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)

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.

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.

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.

Interfaces Web
Sergio Santos Gil 2
5

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

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.

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

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.

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.

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

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.

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.

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

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

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-

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

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…

Interfaces Web
Sergio Santos Gil 3
9
o Selectores CSS

Interfaces Web
Sergio Santos Gil 4
0
o Selectores de Formularios

Interfaces Web
Sergio Santos Gil 4
1
o Selectores Posicionales

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

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,

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.

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.

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

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.

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.

Interfaces Web
Sergio Santos Gil 5
1
Herramientas de GIMP

Interfaces Web
Sergio Santos Gil 5
2

Interfaces Web
Sergio Santos Gil 5
3

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.

CSS, jQuery y más

Más contenido relacionado

Destacado (17)

Similar a CSS, jQuery y más (20)

Más de Sergio Santos (17)

Último (20)

CSS, jQuery y más