jQuery UI - Amplia los límites de jQuery
3.6 (35 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,917 students enrolled

jQuery UI - Amplia los límites de jQuery

Aprende a utilizar las interacciones de JQuery UI para usarlos en tus propios proyectos web.
3.6 (35 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,917 students enrolled
Last updated 12/2017
Spanish
Spanish [Auto-generated]
Price: Free
This course includes
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Al finalizar el curso tendrás unos conceptos sólidos de las interacciones más utilizadas de JQuery-UI.
  • Podrás crear toda clase de elementos arrastrables, soltables, redimensionables y ordenables en tiempo real.

  • Aprenderás a usar opciones, eventos y métodos de las interacciones de JQuery UI.

Course content
Expand all 35 lectures 57:52
+ Introducción
4 lectures 09:46

Breve introducción de las interacciones que veremos en el curso.

Introducción
02:12

Que es JQuery UI.

Que es JQuery UI
02:35

Como y donde hacer las prácticas del curso.

Las prácticas del curso
02:47

Como enlazar JQuery UI a tus proyectos.

Enlazar a JQuery UI
02:12
+ Elementos arrastrables
10 lectures 14:39

Convertir elementos en arrastrables.

Elementos arrastrables - draggable
01:11

Restringir área de elementos arrastrables.

Limites de arrastre - containment
01:37

Mostrar imagenes de cursos al arrastrar elementos.

Imagen del cursor al arrastrar - cursor
01:29

Permitir el retraso de tiempo antes de arrastrar.

Retrasar arrastre - delay
01:12

Arrastrar elementos en cuadrícula.

Arrastre en cuadrícula - grid
01:37

Muestra una copia del elemento al arrastrar.

Ayudante de arrastre - helper
01:07

Cambiar nivel de capa mientras se arrastra.

Nivel de capa al arrastrar - zIndex
01:16

Apilar elementos arrastrables.

Apilar elementos - stack
01:15

Activar/Desactivar los elementos arrastrables.

Activar/Desactivar arrastre - enable() y disable()
01:22

Los eventos start, drag y stop de los elementos arrastrables.

Eventos de arrastre - start, stop y drag
02:33
+ Elementos soltables
5 lectures 08:12

Hacer los elementos soltables.

Elementos soltables - droppable
01:11

Eventos drop, over y out de los elementos soltables.

Eventos de soltable - drop , over , out
02:28

Solicitar que elementos pueden soltarse en los elementos soltables.

Aceptar elemento soltable - accept
01:38

Tolerancia del área del elemento soltable.

Tolerancia del soltable - tolerance
01:40

Habilitar/Deshabilitar elementos soltables.

Habilitar/Deshabilitar soltable - enable() y disable()
01:15
+ Elementos ordenables
7 lectures 10:34

Hacer elementos ordenables.

Elementos ordenables - sortable
01:20

Ordenar elementos ordenables sobre un eje.

Eje de ordenación - axis
01:28

Cancelar elementos ordenables.

Cancelar elemento ordenable - cancel
01:31

Cambiar imagen del cursor de los elementos ordenables.

Cursor de elementos ordenables - cursor
01:16

Mover elementos ordenables en cuadrícula.

Ordenar en cuadrícula - grid
01:19

Pequeño efecto de retroceso de los elementos ordenables.

Animación suave - revert
01:18

Eventos start, stop y update para los elementos ordenables.

Eventos de elementos ordenables - start , stop , update
02:22
+ Elementos redimensionables
9 lectures 14:41

Hacer elementos redimensionables.

Elementos redimensionables - resizable
01:05

Animar elementos redimensionables.

Animación al redimensionar - animate , animateDuration , animateEasing
02:18

Mantener una relación de aspecto para los elementos redimensionables.

Relación de aspecto - aspectRatio
01:13

Redimensionar elementos a la cuadrícula.

Redimensionar a la cuadrícula - grid
01:23

Mostrar un elemento fantasma mientras se redimensiona un elemento.

Redimensión fantasma - ghost
01:06

Restringir área de los elementos redimensionables.

Restringir redimensionar - containment
01:09

Establecer altura y anchura máxima de los elementos redimensionables.

Altura y anchura máxima de redimensión - maxHeight y maxWidth
02:01

Establecer altura y anchura mínxima de los elementos redimensionables.

Altura y anchura mínima de redimensión - minHeight y minWidth
01:54

Eventos start, stop y resize para los elementos redimensionables.

Eventos al redimensionar - start , stop , resize
02:32
Requirements
  • Tener conocimientos básicos de html y css.
  • Alguna idea de lo que es JQuery.
Description

Una vez conoces html y css, notas que te falta algo más que texto y estilos, algo así como más interactividad, y para eso es justamente para lo que sirve JQuery-UI, para que tus sitios sean más interactivos y dinámicos.

Además de que vas a tener que escribir mucho menos código que si lo hicieras con JavaScript puro.

El curso JQuery-UI incluye todo el material necesario para su desarrollo, en el aprenderás a utilizar las interacciones de JQuery-UI  que te otorgarán la información necesaria para dar una mayor interactividad a tus aplicaciones o sitios web. 

Que no te engañe el tiempo de este curso, ya que las prácticas no están en vídeo, con lo que prácticamente puedes doblar el tiempo en esas prácticas además de hacer vídeos concisos.

Si deseas tener o crear sitios más dinámicos e interactivos, este es el curso que estás buscando, ya que combina la teoría con la práctica  en un entorno totalmente diseñado para ello, no necesitarás pedir ningún código porque la misma aplicación de ejercicios te lo suministrará en cada momento si fuera necesario.. 

Who this course is for:
  • Personas emprendedoras que quieran aprender a crear sitios web más dinámicos e interactivos
  • Gente que le apasione el mundo de la programación web.
  • Iniciados en el mundo html y css.