Aprende jQuery UI sin dolor
5.0 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
88 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende jQuery UI sin dolor to your Wishlist.

Add to Wishlist

Aprende jQuery UI sin dolor

El poder del desarrollo web con la librería jQuery
5.0 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
88 students enrolled
Last updated 3/2015
Spanish
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprender a utilizar las iteraciones de jQuery UI
  • Aprender el uso de los widgets de jQuery UI
  • Realizar cambios de temas en los jQuery UI
View Curriculum
Requirements
  • Tener conocimientos HTML y CSS básicos
  • Tener conocimientos de jQuery básicos
  • Tener conocimientos medios de JavaScript
Description

Jquery UI (User Interface) es una poderosa herramienta de desarrollo Web que nos permitirá hacer, desde animaciones muy sencillas que enriquecerá a nuestras páginas Web, hasta aplicaciones completas y complejas, como juegos interactivos o lectura de datos.

En este curso revisaremos todas las iteraciones y widgets y realizaremos pequeñas aplicaciones con ellas, así como la relación que hay entre los diferentes widgets y las interacciones, por ejemplo, cómo hacer un acordeón "ordenable" o hacer un selector de colores con los "deslizadores". Deberá contar con conocimientos medios de JavaScript y de preferencia, conocimientos básicos de jQuery.

Who is the target audience?
  • Desarrolladores web
  • Diseñadores web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 71 Lectures Collapse All 71 Lectures 09:38:40
+
Bienvenido al curso de jQuery UI sin dolor
1 Lecture 11:39

jQuery UI (User Interface) es una poderosa herramienta de desarrollo Web que nos permitirá hacer, desde animaciones muy sencillas que enriquecerá a nuestras páginas Web, hasta aplicaciones completas y complejas, como juegos interactivos o lectura de datos.

En este curso revisaremos todas las iteraciones y widgets y realizaremos pequeñas aplicaciones con ellas.

Preview 11:39
+
Conceptos de jQuery UI (User Interface)
9 Lectures 01:07:10

jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-in y efectos visuales para la creación de aplicaciones web.

Preview 08:44

Para utilizar la librería de interface de usuario necesitamos previamente la librería jQuery instalada y los css que conforman el "tema" de los widgets.

La conexión de jQuery UI con nuestra página
05:18

La librería de los jQuery UI contienen muchos archivos que nos pueden ser de mucha utilidad en el desarrollo de nuestras aplicaciones Web.

La estructura de los archivos de jQuery UI
07:37

Parte fundamental para el entendimiento de la creación y manipulación de los componentes de jQuery UI es el manejo de los métodos, y cómo utilizarlos como setter y getter.

Introducción a los métodos los componentes en jQuery UI
05:36

Parte fundamental para el entendimiento de la creación y manipulación de los componentes de jQuery UI es el manejo de los eventos y de las funciones de tipo callback que son generadas.

Introducción al manejo de eventos en jQuery UI
05:15

Una parte fundamental para comprender y utilizar los componentes de jQuery UI es el manejo de su framework de estilos en cascada y la ubicación de los mismos.

El framework de estilos en cascada
03:32

En jQuery UI no tenemos la subclase como :hover, sin embargo podemos utilizar una subclase para simular un “roll over”, similar a la subclase.

Las interaciones en jQuery UI
08:46

En jQuery UI podemos incluir iconos que son incluidos dentro de los archivos de los temas, pero también podemos incluir iconos personalizados, así como utilizar los sprite-sheets o un archivo con diferentes iconos.

Crear iconos personalizados dentro de jQuery UI
10:46

Algunas características cambiaron en la nueva versión de jQuery UI.
Preview 11:36
+
La iteración Draggable de jQuery UI
3 Lectures 17:20

Con el método draggable podemos hacer "arrastrable" a cualquier elemento HTML, Simplemente lo marcamos como draggable y los podemos arrastrar por medio del botón sostenido del ratón.

Preview 05:54

Con el parámetro “axis” podemos limitar el movimiento del objeto en el eje “x” (izquierda-derecha) o el eje “y” (arriba y abajo):

$( ".selector" ).draggable({ axis: "x" });

Arrastrar un elemento en los ejes horizontal y vertical
02:26

Con el parámetro “containment” restringimos el movimiento a otro elemento DOM.

Con el parámetro “cursor” podemos cambiar el cursor a cualquiera que sea válido en css, por ejemplo: default, move, pointer, crosshair, etc.

Con el parámetro “cursorAt” podemos cambiar la posición del cursor, que por omisión es el centro del objeto. Podemos utilizar una o dos de las siguientes llaves:

{ top, left, right, bottom }

El desplazamiento es en pixeles.

Restringir el movimiento y el cursor en los elementos arrastrables
09:00
+
La iteración Droppable de jQuery UI
2 Lectures 16:15

La iteración droppable nos permitirá detectar cuando un objeto arrastrable (dragable) es soltado en otro elemento (droppable) y podemos disparar eventos.

Preview 06:29

Con la propiedad “accept” podemos indicar cuáles objetos “arrastrables” son aceptados y cuáles no lo son. Con la propiedad “revert” podemos hacer que los objetos “arrastrables” regresen si no son soltados en una área que los acepte.

Aceptar los elementos "arrastrables" en una división HTML con jQuery UI
09:46
+
La iteración Resizable de jQuery UI
2 Lectures 11:52

Con esta iteración podemos modificar el tamaño de un elemento del documento en tiempo de ejecución, arrastrando algunas de sus lados o la esquina inferior izquierda.

Introducción a la iteración Resizable de jQuery UI
04:02

Por medio del parámetro “contaiment” podemos restringir el tamaño del elemento que ampliamos.


$("#foto").resizable({containment:"#contenedor"});

La propiedad “animate” nos permitirá animar el crecimiento del elemento. Sus valores son verdadero y falso (true/false).

El parámetro containment y animate en la iteración resizable
07:50
+
La iteración selectable de jQuery UI
3 Lectures 26:33

La iteración selectable, así como un par de estilos en cascada, permitirán seleccionar, como si fuera unas opciones de sistema operativo, y por medio del ratón, diferentes opciones de las listas no ordenadas y ordenadas.

Introducción a la iteración selectable de jQuery UI
08:05

Por medio de jQuery UI podemos hacer seleccionar un grupo de elementos. Posteriormente veremos cómo procesar esa lista de objetos.

Hacer un cuadro con números seleccionable con jQuery UI
08:10

Por medio del parámetro “stop” podemos ejecutar una función cuando detenemos la selección de uno o más elementos.

La función puede ser anónima o la referencia a la misma. Los elementos seleccionados tendrán la clase de CSS “.ui-selected”. Por medio de un ciclo “each” podemos recorrer a todos los elementos seleccionados.

Recuperar los valores seleccionados y mostrarlos en la página
10:18
+
La iteración Sortable de jQuery UI
3 Lectures 16:39

Una vez que tenemos una lista, ya sea ordenada o sin orden, es muy sencillo cambiarla a una lista "ordenable", es decir, que el usuario pueda arrastrar y soltar los elementos para ordenarlos a su gusto. Esto lo realizaremos con el método sortable de jQuery.

Introducción a la iteración sortable de jQuery UI
02:43

Por medio de la interación "sortable" podemos mover cualquier objeto, como un cuadro de etiquetas o elementos HTML.

Hacer un cuadro "sorteable"
06:23

Por medio de la interación "sortable" podemos mover cualquier objeto, como un cuadro de etiquetas o elementos HTML, ya sean texto o imágenes.

Hacer un cuadro de imágenes "sorteable" u "ordenable"
07:33
+
El widget accordion de jQuery UI
6 Lectures 48:23

Es muy sencillo hacer una división como acordeón. Basta identificar una división y luego dar el método acordeón.

Preview 07:37

Por omisión un acordeón siempre tienen una sección abierta. Por medio del parámetro “collapsible” podemos mantener a todas las secciones "colapsable" si la abrimos y la cerramos.

El parámetro "collapsible" en el acordeón de jQuery UI
03:11

Podemos relacionar el acordeón con otros widgets u interaciones.

Por medio del parámetro “refresh” hacemos que se “refresque” y se adapte.

Unir un acordeón con una iteración "resizable" en jQuery UI
10:24

Por medio de la propiedad “icons” nos permite manejar, modificar u omitir los iconos en el acordeón.

header: se maneja el icono con la pestaña cerrada.

activeHeader: se presenta cuando la pestaña abierta.

El manejo de los iconos en un Acordeón
12:28

El parámetro “heightStyle” controla la altura del acordeón y cada panel.

Valores posibles:

"auto": Todos los paneles se ajustará a la altura del panel de alto.

"fill": Expandir la altura disponible basada en la altura el padre del acordeón.


"content": Cada panel será tan alto como sólo su contenido.

Modificar la altura de las pestañas de un acordeón en jQuery UI
05:12

Podemos relacionar un acordeón con la iteración “sorteable”.

Cuando arrastramos una de las pestañas del acordeón, podemos detectarlo por medio de la iteración “sorteable” y reacomodarlo.

Hacer un acordeón "ordenable" con la interacción "sorteable"
09:31
+
El widget autocomplete de jQuery UI
2 Lectures 21:58

El autocomplete es otro widget de jQuery que es sencillo y muy poderoso, Puedo aplicarlo a un campo de entrada de un formulario por medio de un arreglo.

Introducción al widget autocomplete() de jQuery
05:34

El parámetro “source” tiene tres valores:

Array: podemos escribirlo o pasarlo por referencia.

También puede recibir arreglos de objetos.

Una cadena o string: es para el uso de URL.

Una función de callback, que recibe dos parámetros:

request: es un objeto que sólo tiene un parámetro (term) que contiene la cadena de entrada que el usuario escribe.

response: es una función de callback que tiene un sólo parámetro, que son las sugerencias del widget.

Sustituir acentos en el widget autocomplete
16:24
+
El widget botones de jQuery UI
5 Lectures 25:24

Otro de los widgets que nos permite crear jQuery es el de crear botones. Con ello podemos mantener la apariencia de los diferentes elementos de jQuery, y en caso que desee cambiar el tema, su apariencia se mantendrá consistente.

Preview 05:49

Uno de los parámetros de los botones es colocar diferente íconos. Incluso podemos colocar un par de ellos con los sub parámetros primary y secundary.

Colocar iconos en los botones creados con jQuery UI
03:04

También podemos modificar las cajas de verificación o checkboxes desde jQuery. Ya sea que tomemos un sólo checkbox y lo manejemos como un botón con selección (toggle), o un grupo de ellos.

Manejo de las cajas de verificación con buttonset() en jQuery UI
05:18

También podemos manejar botones de radio con jQuery UI. Al igual que los demás elementos, la ventaja es que cuando cambiemos el tema de nuestra página, también los botones de radio lo harán. Convertirlos a jQuery será muy sencillo.

Manejo de botones de radio con buttonset() en jQuery UI
04:35

El widget Select menu, de la versión 1.11, el cual nos permite hacer dropbox de manera sencilla.
Preview 06:38
12 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
876 Reviews
12,867 Students
36 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.