You are on page 1of 39

Integracin de controles interactivos

Diseo de Interfaces Web


DAW

Tema 5

Sergio de Mingo (IES G.M. Jovellanos)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Tema 5

1 / 39

1 Introduccin

2 Manipulacin del DOM

3 Gestin de eventos

4 CSS y animaciones

5 JQuery UI

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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"])

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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/

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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/

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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/
Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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)

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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>

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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/

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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.)
Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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/

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

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

Diseo de Interfaces Web (DAW)

Integracin de controles interactivos

Tema 5

39 / 39