Diw5 Traspas

Integracin de controles interactivos
Diseo de Interfaces Web

DAW
Tema 5
Sergio de Mingo (IES G.M. Jovellanos)
Diseo de Interfaces Web (DAW)
Tema 5
1 / 39
1 Introduccin
2 Manipulacin del DOM
3 Gestin de eventos
4 CSS y animaciones
5 JQuery UI
Tema 5
2 / 39
Introduccin
Qu es JQuery?
Librera de JavaScript creada por John Resig
Permite integrar en tu aplicacin las tcnicas ms comunes en el
entorno web:
Manipular el rbol DOM
Manejar eventos
Crear animaciones y manejar hojas de estilo de forma dinmica
Usar AJAX
Hoy en da, es la librera ms usada
Tema 5
3 / 39
Introduccin
Ventajas de JQuery
Permite al desarrollador abstraerse de los detalles de las CSS

El desarrollo orientado a plugins evita una evolucin catica del nucleo
del la librera
Evita el uso de bucles e iteraciones innecesarias pues posee mtodos
que usan iteraciones implicitas aplicando propiedades a conjuntos de
elementos
Permite mltiples operaciones en una sola lnea
Conclusin: Ahorra cdigo = Ahorrar tiempo y dinero
Tema 5
4 / 39
Introduccin
Como usar JQuery

Para usar JQuery debemos tener referenciada la librera en cada
documento HTML de nuestra aplicacin donde queramos usarla
Para referenciarla usaremos la etiqueta HTML <script>
<script src="jquery.js"> </script>
La librera puede estar alojada en nuestro servidor como un recurso

ms (Generalmente bajo la carpeta /js)
Tambin podemos enlazarla de un CDN externo. (Ejemplo: Google)
Tema 5
5 / 39
Manipulacin del DOM
La funcin $()
Todo en JQuery se basa en la funcin de seleccin o funcin JQuery.
Tambin la podemos usar a travs de su alias $()
Es la puerta de entrada al framework y el punto de partida de la
mayora de las instrucciones
Tiene diferentes usos segn los parmetros que le pasemos. Nosotros
nos vamos a centrar sobre todo el su uso como funcin de seleccin de
elementos del DOM a travs de selectores CSS
En JQuery, lo normal es ejecutar varias llamadas a funcin en cadena
para ahorrarnos cdigo
$(selector).f1().f2()
Tema 5
6 / 39
Manipulacin del DOM
La funcin $()
Selector CSS: Selecciona elementos del DOM

$(.nombreClase)
Cdigo HTML: Creacin de elementos

$(<p>Prrafo de ejemplo <span>de JQuery</span></p>)
Objeto HTMLElement:
$(document.body)
Tema 5
7 / 39
Manipulacin del DOM
La funcin $()
Como ya se ha mencionado JQuery permite la aplicacin de mtodos

con iteracin implicita
Si un mtodo retorna un array de elementos, el siguiente puede
aplicarse a todos ellos sin necesidad de usar bucles
$(#selector).addClass(horizontal)
Tema 5
8 / 39
Manipulacin del DOM
Seleccinando elementos
Podemos usar selectores propios de JQuery para invocar mtodos

sobre un elemento concreto o sobre un subconjunto de ellos
Hemos de tener cuidado, los arrays basados en CSS comienzan en 1
mientras que los basados en DOM comienzan en 0
$(p:eq(2)) //selecciona el tercer elemento
$(.contenido:nth-child(1)) //seleciona el primer elemento
$(tr:odd) //selecciona las filas impares
$(tr:even) //selecciona las filas pares
Tema 5
9 / 39
Manipulacin del DOM
Usando selectores CSS

Para trabajar con las reglas CSS de cada elemento podemos usar los
selectores habituales (adyacencia, descendencia, agrupamiento, etc.)
Tambin podemos seleccionar elementos segn sus atributos usando
los mismos selectores vistos en CSS
Inluso podemos usar los comodines habituales (?,$ y)
$(img[alt])
$(a[href^="mailto:"]).addClass(email)
$(a[href*="imagen"]).addClass(imagen)
$(a[href^="http"][href*="henry"])
Tema 5
10 / 39
Manipulacin del DOM
Operaciones de CSS
Vamos ahora ver las operaciones de JQuery relacionadas con CSS

Esto nos permitir la manipulacin dinamica de los estilos de nuestro
documento
Toda la informacin la podemos encontrar en la web oficial de JQuery:
http://api.jquery.com/category/css/
Tema 5
11 / 39
Manipulacin del DOM
Accediendo a elementos del DOM
Una de las principales ventajas de JQuery es la manipulacin sencilla

del rbol DOM del documento
Con JQuery podemos agregar, borrar o mover nodos en el rbol
Podemos consultar toda la documentacin sobre la manipulacin de
DOM en JQuery en:
http://api.jquery.com/category/manipulation/
Tema 5
12 / 39
Manipulacin del DOM
Insertar nuevos elementos
Para insertar elementos en el DOM podemos usar:

insertAfter e insertBefore Insertan un nuevo elemento fuera y
antes o despus que otro
prepend o prependTo Insertan un nuevo elemento dentro y antes de
los existentes. Atencin al orden de los elementos
append o appendTo Insertan un nuevo elemento dentro y despus de
los existentes
Tema 5
13 / 39
Manipulacin del DOM
Insertar nuevos elementos
Tambin podemos insertar nuevos elementos alrededor de otros

(wrapping):
wrap Permite envolver a cada uno de los elementos seleccionados
dentro de otro definido como parmetro
wrapAll Permite envolver a los elementos seleccionados dentro de otro
definido en el parmetro
Tema 5
14 / 39
Manipulacin del DOM
Eliminar elementos
El borrado de un elemento se consigue usando el mtodo remove o el

mtodo empty
El mtodo remove borra el elemento y todos sus descedientes
$(.borrado).remove()
El mtodo empty borra los descendientes de un elemento
Tema 5
15 / 39
Manipulacin del DOM
Manipular atributos
Algunos atributos pueden manipularse con mtodos concretos como

class:
addClass
removeClass
toggleClass
Para cualquier otro atributo podemos usar:

attr
removeAttr
Tema 5
16 / 39
Gestin de eventos
Vincular eventos a elementos

Podemos vincular funciones para tratar eventos a cualquier elemento
del documento
La sintaxis se simplifica comparndola con el uso de JS simple
Usaremos el mtodo on o el mtodo del evento sobre el que queramos
asignar una funcin tratadora. El metodo off lo usamos para
desvincular la funcin del elemento
La API completa de eventos incluidos los mtodos de evento a los que
podemos vincular funcion estn en:
http://api.jquery.com/category/events/
Tema 5
17 / 39
Gestin de eventos
Vincular eventos
// Vinculamos
$(p).click(function(){
console.log(pulsado sobre p)
}
$(p).on(click,function(){
console.log(pulsado sobre p)
}
// Desvinculamos el evento del elemento
$(p).off(click)
Tema 5
18 / 39
CSS y animaciones
JQuery y CSS
El mtodo ms rpido para modificar el estilo de un elemento es css

Este mtodo permite consultar y modificar reglas CSS asociadas a un
elemento sobre el que lo ejecutamos
El nombre de la propiedad tambin puede ir escrita en camelCase
$(p).css(background-color,silver)
var t=$(p).css(font-size)
Tema 5
19 / 39
CSS y animaciones
Hide y Show
Con JQuery podemos controlar el visualizado o la ocultacin de un

elemento usando hide() y show()
Basicamente permiten controlar el valor de la propiedad CSS display
La principal ventaja de usar estos mtodos es que no debemos
especificar el tipo de display que queremos (block, inline, etc.) a la
hora de mostrar el elemento. El mtodo show lo configura de forma
automtica
Tema 5
20 / 39
CSS y animaciones
Transiciones
Para crear efectos en el visualizado podemos usar los parmetros

slow,normal y fast en los mtodos hide y show
Usando el mismo mecanismo podemos usar tambin los mtodos:
fadeIn y faceOut
slideUp y slideDown
Tema 5
21 / 39
CSS y animaciones
Creacin de efectos personalizados
Para esto usaremos la funcion animate

Esta funcin permite redefinir varias propiedades CSS sobre un
elemento. No todas estn disponibles:
http://api.jquery.com/animate/
Tambin podemos indicar a la funcin de forma opcional tres
parmetros ms:
Duracin de la animacin (slow, fast, normal o milisegundos)
Funcin a invocar al terminar la animacin
Tema 5
22 / 39
CSS y animaciones
Uso de plugins de terceros
Una de las grandes ventajas de JQuery es su extensibilidad

Podemos extender la librera usando nuevos plugins que nos aportan
funciones nuevas para integrar en nuestro cdigo
Generalmente para usar un plugin bastar con vincularlo en el
documento HTML con la etiqueta <script>
Debemos luego leer su documentacin para entender su interfaz y su
forma de funcionar
Tema 5
23 / 39
JQuery UI
Qu es JQuery UI?
Es una biblioteca de componentes y widgets para JQuery

Recordad que la filosofa de avance de JQuery era ampliar desde fuera
a travs de plugins, no desde el core del framework
Aumenta la maquinara del framework original
Continua con su misma filosofa, mtodos para encontrar elementos y
mtodos para manipularlos
Tema 5
24 / 39
JQuery UI
Elementos
Esta librera esta fundamentada en tres pilares:

Interacciones
Widgets
Efectos
En general, es compatible con todos los navegadores modernos
Tema 5
25 / 39
JQuery UI
Utilizacin
Para utilizarla en un documento HTML se sigue el mismo patrn que
con JQuery
Debemos tener la librera almacenada en nuestro sitio o enlazarla a un
CDN externo
En ambos casos usaremos las etiquetas <script> para incluir el recurso
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
Tema 5
26 / 39
JQuery UI
API de JQuery UI
La pgina oficial de la librera es el punto de informacin bsico

En el encontrareis informacin de todos los elementos de esta (en
clase veremos solo una seleccin)
Adems podis ver la mayora de widgets y efectos en funcionamiento
http://jqueryui.com/demos/
http://api.jqueryui.com/
Tema 5
27 / 39
JQuery UI
API de JQuery UI
Para interacciones y widgets la librera define:

Opciones: Propiedades configurables de cada elemento que alteran su
comportamiento
Mtodos: Funciones para invocar sobre ellos. En realidad son objetos
Eventos: Eventos disparados por el elemento a los que podemos
enganchar nuestras propias funciones
Tema 5
28 / 39
JQuery UI
Opciones y mtodos
Los elementos de la librera (widgets, interacciones, etc.) con los que

trabajaremos son realmente objetos. Para trabajar con ellos invocamos
una funcin que se llama como ellos y a la que le iremos pasando
diferentes parmetros
Opciones y mtodos son la forma que tenemos para configurarlos y
alterar su comportamiento sobre el que traen por defecto
La forma trabajar con estos siempre es la misma:
$( ".selector" ).elemento({ opcion: valor });
$( ".selector" ).elemento("metodo");
Tema 5
29 / 39
JQuery UI
Eventos
Los eventos permiten asociar funciones nuestras a disparadores

relacionados sobre esa iteracin o ese widget
Ejemplos de eventos: al iniciar un arrastrado, al dimensionar, al
seleccionar un elemento, etc.
El callback que asociemos al evento recibir dos parmetros: event o
el objeto del evento y ui con informacin adicional
Dentro de esa funcin usaremos $(this) para referirnos al objeto
sobre el que se ha disparado ese evento
Tema 5
30 / 39
JQuery UI
Interacciones
Permiten asociar comportamientos complejos a los elementos de
nuestro documento
El objetivo no es mejorar la visualizacin sino la usabilidad y la
accesibilidad
Ejemplos de estos comportamientos complejos que estudiaremos son:
Draggable
Droppable
Existen otros comportamientos muy interesantes (redimensionable,

ordenable, etc.)
Tema 5
31 / 39
JQuery UI
Interacciones: Draggable
Asocia el comportamiento de arrastre a un elemento

Manteniendo pulsado el ratn sobre el elemento podemos arrastrarlo a
travs del documento
El elemento no pierde sus propiedades CSS en caso de solapado con
otros elementos
Tema 5
32 / 39
JQuery UI
Interacciones: Droppable
Son comportamientos que se asocian a objetos que queremos que

reaccionen ante otros de tipo Draggable
Normalmente veremos trabajar juntos a estos dos tipos de
comportamientos
Un objeto con este comportamiento suele ser siempre el objetivo final
de una interaccin draggable
Tema 5
33 / 39
JQuery UI
Widgets
Son elementos interactuables de una GUI

JQuery UI tiene implementados los widgets ms comunes en cualquier
GUI de escritorio
El usuario ya tiene interiorizado el funcionamiento de estos y as ese
mejora la usabilidad (controles de pestaas, selectores de fechas,
barras de progreso, etc.)
Para una visualizacin inicial adecuada es recomendable enlazar la
hoja CSS que la librera pone a nuestra disposicin
Tema 5
34 / 39
JQuery UI
Widgets: Datepicker
Es un sencillo widget para elegir o seleccionar una fecha

Permite eliminar el problema de procesar el formato con que el usuario
puede introducir una fecha. Solo debe clickear sobre ella
A travs de sus mtodos y opciones podemos configurar aspectos
como el formato de fecha que queremos mostrar en el control tras la
seleccin
Tema 5
35 / 39
JQuery UI
Widgets: Tabs
rea de texto con mltiples paneles solapables

La visualizacin de cada panel se controla con una serie de cabeceras
en una lista horizontal
Permiten ahorrar mucho espacio al visualizar secciones de texto
apiladas
Tema 5
36 / 39
JQuery UI
Efectos
JQuery UI aade cierta funcionalidad sobre la base de los efectos

estudiados del nucleo de JQuery
Ms transiciones, mejorado de efectos
Mecanismo de easing
Para previsualizar todos los efectos nuevos podemos ir a la web oficial
de JQuery UI: http://jqueryui.com/effect/
Tema 5
37 / 39
JQuery UI
Efectos
La funcin principal para aadir efectos es .effect()

Esta funcin recibe cuatro parmetros:
Un string con el nombre del efecto a realizar
Un objeto JS con las opciones (si se requieren)
La duracin del efecto (por defecto es 400 ms)
Una funcin que ser ejecutada al terminar el efecto
Tema 5
38 / 39
(cc) Sergio de Mingo

Some rights reserved. This work is licensed under a Creative Commons
Attribution-Share Alike 3.0 Spain License, available at
http://creativecommons.org/licenses/by-sa/3.0/
http://apuntes-fp.blogspot.com
sergio.demingogil@educa.madrid.org
Tema 5
39 / 39

Diw5 Traspas

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diw5 Traspas

Uploaded by

Copyright:

Available Formats

Integracin de controles interactivos

Diseo de Interfaces Web

Sergio de Mingo (IES G.M. Jovellanos)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

2 Manipulacin del DOM

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Hoy en da, es la librera ms usada

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Permite al desarrollador abstraerse de los detalles de las CSS

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Como usar JQuery

La librera puede estar alojada en nuestro servidor como un recurso

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Selector CSS: Selecciona elementos del DOM

Cdigo HTML: Creacin de elementos

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Como ya se ha mencionado JQuery permite la aplicacin de mtodos

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Podemos usar selectores propios de JQuery para invocar mtodos

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Usando selectores CSS

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Vamos ahora ver las operaciones de JQuery relacionadas con CSS

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Accediendo a elementos del DOM

Una de las principales ventajas de JQuery es la manipulacin sencilla

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Insertar nuevos elementos

Para insertar elementos en el DOM podemos usar:

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

Insertar nuevos elementos

Tambin podemos insertar nuevos elementos alrededor de otros

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM

El borrado de un elemento se consigue usando el mtodo remove o el

El mtodo empty borra los descendientes de un elemento

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Manipulacin del DOM