Aprende jQuery y jQuery UI de forma fácil y práctica
4.5 (29 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.
128 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende jQuery y jQuery UI de forma fácil y práctica to your Wishlist.

Add to Wishlist

Aprende jQuery y jQuery UI de forma fácil y práctica

Descubre cómo crear páginas web dinámicas que sorprenderán a todos. Incluye la explicación de 8 widgets adicionales.
4.5 (29 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.
128 students enrolled
Created by Antonio Santos
Last updated 5/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Diseñar páginas web dinámicas con jQuery y jQuery UI
  • Aprender a usar los selectores, eventos y métodos de jQuery y jQuery UI
  • Aprender cómo funcionan 8 librerías externas de jQuery
  • Comprender qué son y cómo se pueden utilizar las librerías o widgets para jQuery
View Curriculum
Requirements
  • Es recomendable conocer HTML y CSS antes de iniciar este curso (al menos, a un nivel básico)
Description

jQuery es uno de los lenguajes de programación más utilizados en el mundo para crear páginas webs dinámicas. Su gran abanico de opciones en cuanto efectos y métodos, la gran cantidad de widgets extra disponibles y el hecho de ser un lenguaje 100% compatible con todos los navegadores, lo convierten en indispensable para diseñadores profesionales de todo el mundo.

Una poderosa herramienta al alcance de tu teclado

En este curso aprenderás a utilizar jQuery de forma sencilla y práctica, usando para ello ejemplos orientados a su aplicación posterior en tus diseños web. Pero además, aprenderás también jQuery UI, un complemento extraordinario de jQuery, con el que descubrirás más recursos para tus creaciones.

Por último, el curso incluye además un módulo con ocho widgets muy interesantes, en donde aprenderemos a usar este recurso y a construir efectos complejos de animación, galerías de imágenes, sliders, menús dinámicos, cómo insertar mapas de Google personalizados, etc.

¡Bienvenido al mundo de jQuery, en el que tu imaginación será el único límite para tus diseños web!

-------------------------------------------------------------------------------------------------------------

Un recorrido completo de aprendizaje

Este curso pertenece a una serie de cursos cuyo objetivo es enseñar a crear y diseñar páginas webs de forma fácil, práctica y comprensible para todo el mundo. Está especialmente pensado para quienes nunca han visto nada de este mundo y para facilitar su aprendizaje se divide en dos niveles que componen un itinerario educativo progresivo (del más sencillo al más complejo). La serie completa incluye los siguientes cursos (todos disponibles en Udemy):

1.- HTML y CSS para no-informáticos

2.- Aprende jQuery y jQuery UI de forma fácil y práctica

Los alumnos apuntados en uno de los cursos podrán solicitarme descuentos para realizar el otro.

Who is the target audience?
  • Este curso es adecuado para todos aquellos que quieren aprender a dotar de dinamismo e interactividad sus páginas web, así como para apasionados del diseño web en general. No son necesarios conocimientos previos de Javascript.
Compare to Other Web Development Courses
Curriculum For This Course
60 Lectures
09:43:45
+
Primeros pasos e introducción
4 Lectures 35:51

En esta clase vamos a hacer un breve recorrido por los diferentes tipos de páginas web que pueden existir. Se trata de unas líneas generales, pero nos pueden servir para ubicar la materia de estudio de este curso en su contexto.

Tipos de páginas web
08:20

En esta clase veremos cómo descargar jQuery y de dónde, así como el proceso correcto de instalación del mismo en nuestras páginas web. Este es el paso previo necesario para poder empezar a usar jQuery.

Descarga e instalación de jQuery
13:46

En esta clase vamos a conocer de forma gráfica y clara cómo es la estructura fundamental del lenguaje de programación jQuery.

Preview 10:12
+
Selectores
5 Lectures 51:14

En esta clase vamos a estudiar los siguientes selectores:

  • Selector 'this'
  • Selector de etiqueta
  • Selector de id
  • Selector de clase
  • Selector universal
Los selectores básicos
10:50

En esta clase vamos a estudiar los siguientes selectores:

  • Selector de atributo
  • Selector de atributo con un valor 'igual a'
  • Selector de atributo con un valor 'distinto de'
  • Selector de atributo con un valor 'que acaba por'
  • Selector de atributo con un valor 'que empieza por'
  • Selector de atributo con un valor 'que contiene'
Los selectores de atributo
09:43

En esta clase vamos a estudiar los siguientes selectores:

  • Selector de elementos pares
  • Selector de elementos impares
  • Selector de primer elemento
  • Selector de último elemento
  • Selector de elemento en una posición determinada
  • Selector de elemento en una posición 'mayor que'
  • Selector de elemento en una posición 'menor que'
Los selectores de posición
12:22

En esta clase vamos a estudiar los siguientes selectores:

  • Selector de descendientes
  • Selector de descendientes directos
  • Selector de hermanos
  • Selector de hermanos adyacentes
  • Selectores múltiples
Los selectores de parentesco
12:26

En esta clase haremos un repaso de todos los selectores vistos en el módulo.

Resumen del módulo
05:53
+
Eventos
3 Lectures 19:36

En esta clase veremos los siguientes eventos:

  • click
  • dblclick
  • mouseover
  • mouseout
  • hover
Eventos I: Los eventos de ratón (1ª parte)
08:02

En esta clase veremos los siguientes eventos:

  • mouseup
  • mousedown
  • keyup
  • keydown
  • keypress
Eventos II: Los eventos de ratón (2ª parte) y los eventos de teclado
06:12

En esta clase veremos los eventos relacionados con cajas de tipo input:

  • focus
  • blur
Eventos III: Los eventos de formulario
05:22
+
Funciones y efectos
7 Lectures 50:07

En esta clase vamos a ver la primera tanda de efectos de jQuery. Son los siguientes:

  • Mostrar (show)
  • Ocultar (hide)
  • Alternar entre mostrar y ocultar (toggle)
Los efectos show(), hide() y toggle()
13:37

En esta clase vamos a ver los efectos de tipo fade de jQuery. Son los siguientes:

  • Mostrar con efecto de transparencia (fadeIn)
  • Ocultar con efecto de transparencia (fadeOut)
  • Alternar entre mostrar y ocultar con efecto de transparencia (fadeToggle)
  • Mostrar u ocultar hasta un valor de transparencia dado (fadeTo)
Los efectos tipo fade
05:27

En esta clase vamos a ver los efectos de tipo slide o de cortinilla de jQuery. Son los siguientes:

  • Mostrar con efecto de cortinilla (slideUp)
  • Ocultar con efecto de cortinilla (slideDown)
  • Alternar entre mostrar y ocultar con efecto de cortinilla (slideToggle)
Los efectos tipo slide
03:15

En esta clase vamos a estudiar el efecto animate() de jQuery, con el que conseguiremos personalizar nuestras animaciones.

El efecto animate()
05:57

En esta clase vamos a aprender a usar la instrucción 'delay' para lograr aplicar un retardo al inicio de nuestras animaciones.

Uso de delay
10:19

En esta clase vamos a ver la instrucción 'stop' y vamos a aprender para qué se utiliza.

Uso de stop
04:38

En esta clase aprenderemos cómo se construyen y utilizan las funciones de callback para las animaciones. Un recurso de mucha importancia en los diseños con jQuery.

Funciones de callback
06:54
+
jQuery y HTML
6 Lectures 01:03:16

En esta clase vamos a ver el método text(), con el que conseguiremos leer o escribir cadenas de texto en nuestro código de HTML a través de jQuery.

El método text()
11:21

En esta clase vamos a ver el método attr() y el método removeAttr(). Con ellos vamos a aprender a leer el valor de los atributos de los elementos de nuestro html, a cambiarlos y a eliminarlos, y comprenderemos cómo podemos aplicar esas funciones en nuestras creaciones.

El método atttr()
10:48

En esta clase vamos a aprender a utilizar el método val(), cuya función es permitirnos leer y cambiar el atributo 'value' de los elementos de nuestro código html.

El método val()
09:39

En esta clase vamos a aprender a manejar una serie de métodos que nos permitirán introducir elementos nuevos en nuestro código html a través de jQuery, con la posibilidad de incluirlos acompañados de etiquetas html. Esto nos va a permitir ampliar nuestras posibilidades, usando por ejemplo los estilos en cascada (CSS).

Los métodos que vamos a ver y estudiar son:

  • html()
  • append() (coloca detrás)
  • prepend() (coloca delante)
  • after() (coloca después, dejando un salto de línea)
  • before() (coloca antes, dejando un salto de línea)
Los métodos html(), append(), prepend(), after() y before()
12:10

En esta clase vamos a aprender los métodos:

  • remove() (eliminar un elemento de nuestro código html)
  • empty() (vaciar un elemento de nuestro código html)
Los métodos remove() y empty()
03:47

En esta clase vamos a estudiar los distintos métodos que podemos utilizar relacionados con los estilos en cascada (CSS). Estos métodos son:

  • css()
  • addClass()
  • removeClass()
Los métodos css()
15:31
+
jQuery y AJAX
5 Lectures 58:01

En esta clase vamos a tratar de dar respuesta a qué es el lenguaje AJAX, que hasta ahora no habíamos visto, así como también tratar de comprender qué nos aporta en nuestras páginas el uso combinado de AJAX y jQuery.

Introducción a AJAX: ¿Qué es eso de AJAX?
08:22

En esta clase vamos a estudiar el método load() para la carga de elementos externos en nuestra página a través de jQuery.

El método load()
10:54

En esta clase vamos a estudiar los métodos post() y get() para la carga en la misma página de información enviada a través de un formulario.

Los métodos get() y post()
19:51

En esta clase vamos a estudiar el método ajax() para la carga en la misma página de información enviada a través de un formulario, y vamos a conocer también los principales parámetros que podemos añadir a este método.

El método ajax()
11:13

En esta clase vamos a descubrir un plugin de jQuery para conseguir el mismo objetivo que perseguimos al emplear el método ajax(), pero de una forma mucho más simplificada y, por tanto, sencilla.

Plugin para ajax()
07:41
+
Widgets interesantes para jQuery
10 Lectures 02:20:44

En esta clase vamos a introducir el tema de los widgets de jQuery, también conocidos como librerías o plugins. Con ellos vamos a tener a nuestra disposición un recurso inagotable de nuevas funcionalidades para nuestros diseños web.

Preview 08:42

En esta clase vamos a estudiar el plugin color, que nos permitirá aplicar efectos de animación que incluyan cambios de color.

El widget color
10:53

En esta clase vamos a estudiar el plugin easing, que nos permitirá aplicar nuevos efectos de movimiento a nuestros elementos web.

Widget para aplicar efectos de movimiento
08:34

En esta clase vamos a estudiar el plugin rotate, con el que podremos añadir diferentes movimientos de rotación a nuestros elementos web.

Widget para crear rotaciones
17:41

En esta clase vamos a estudiar el plugin gomap, con el que podremos incluir mapas de Google Maps totalmente personalizados a nuestros diseños web.

Widget para introducir mapas de Google personalizados
18:34

En esta clase vamos a estudiar el plugin validate, con el que podremos crear validaciones personalizadas para nuestros formularios.

Widget para validar formularios
16:55

En esta clase vamos a estudiar el plugin quicksand, con el que podremos construir y diseñar filtros y presentaciones atractivas para nuestras páginas web.

Widget para filtrar y mostrar elementos con movimientos
15:19

En esta clase vamos a estudiar el plugin kwicks, con el que podremos crear menús dinámicos, galerías de imágenes, etc, de una forma sencilla y atractiva para el usuario.

Widget para crear menús y galerías de imágenes dinámicos
20:57

En esta clase vamos a estudiar el plugin cycle, el cual pondrá a nuestra disposición la creación de galerías de imágenes con mútiples efectos de transición diferentes.

Widget para crear galerías de imágenes con múltiples efectos de transición
14:47

En esta clase abordamos el cierre del módulo dedicado a los widgets, plugins o librerías, y aportamos los últimos consejos a tener en cuenta por parte del alumno cuando trabaje con ellos.

Últimas consideraciones y cierre del módulo
08:22
+
jQuery UI
19 Lectures 02:39:57

En esta clase vamos a estudiar los primeros eventos nuevos que jQuery UI añade a los que ya conocíamos de jQuery. Estos eventos son:

  • draggable (crear elementos arrastables)
  • droppable (crear elementos capaces de aceptar soltar en ellos elementos arrastables)
Eventos I: draggable y droppable
09:19

En esta clase vamos a realizar un ejemplo sobre cómo crear un juego de arrastrar y soltar utilizando los eventos draggable y droppable aprendidos en la clase anterior.

Crear un juego de drag & drop
19:59

En esta clase vamos a aprender un nuevo evento de jQuery UI: el evento selectable, que nos permitirá seleccionar elementos de un listado.

Eventos II: selectable
05:07

En esta clase vamos a aprender un nuevo evento de jQuery UI: el evento sortable, que nos permitirá crear elementos que puedan ser reordenados por el usuario.

Eventos III: sortable
02:26

En esta clase vamos a aprender un nuevo evento de jQuery UI: el evento resizable, que nos permitirá crear elementos a los que el usuario podrá cambiar de tamaño.

Eventos IV: resizable
04:35

En esta clase vamos a estudiar el recurso accordion(), muy utilizado actualmente por el ahorro de espacio que supone en una página web.

Recursos I: el acordeón
04:11

En esta clase vamos a estudiar el recurso autocomplete(), con el que podremos ofrecer a los usuarios de nuestras páginas web opciones para autocompletar los textos que quieran escribir en, por ejemplo, cualquier elemento de input.

Recursos II: autocompletar
04:57

En esta clase vamos a estudiar el recurso button(), con el que podremos crear botones con un estilo en la línea del resto de elementos que estemos utilizando en jQuery UI, en lugar del botón habitual.

Recursos III: botones
06:45

En esta clase vamos a estudiar el recurso buttonset(), con el que podremos crear botones especiales para los grupos de botones tipo checkbox o radio.

Recursos IV: grupos de botones
08:43

En esta clase vamos a estudiar el recurso datepicker(), con el que podremos insertar calendarios en nuestros diseños web. Aprenderemos también las propiedades de este recurso, lo que nos permitirá personalizar su apariencia y modo de presentación.

Recursos V: insertar un calendario
12:35

En esta clase vamos a estudiar el recurso dialog(), con el que podremos crear ventanas de diálogo totalmente personalizadas en nuestras páginas.

Recursos VI: ventanas de diálogo
07:02

En esta clase vamos a estudiar el recurso menu(), con el que construir menús y submenús acordes al estilo de jQuery UI con el que estemos trabajando, y de una forma muy sencilla.

Recursos VII: menús
09:22

En esta clase veremos los recursos progressbar() y slider(), y crearemos una pequeña aplicación para usar el slider() en nuestros proyectos.

Recursos VIII: barras de progreso y deslizadores
11:08

En esta clase vamos a estudiar el recurso spinner(), con el que crearemos cuadros de texto con opciones para introducir números de forma progresiva.

Recursos IX: el spinner
03:09

En esta clase vamos a estudiar el recurso tabs(), también muy usado hoy por la gran cantidad de espacio que ahorra en pantalla cuando tenemos mucha información que presentar.

Recursos X: presentar la información en pestañas
06:23

En esta clase vamos a estudiar el recurso tooltips(), que son las pequeñas ventanas que aparecen en pantalla cuando dejamos el cursor detenido sobre un elemento y que nos aportan información adicional sobre el elemento en cuestión. Veremos cómo aplicar este recurso y dónde.

Recursos XI: los tooltips
03:47

En esta clase vamos a estudiar los distintos efectos nuevos que jQuery UI pone a nuestra disposición. Todos ellos se introducen con el método effect() y son:

  • blind (efecto de persiana)
  • bounce (efecto de rebote vertical)
  • shake (efecto de rebote horizontal)
  • fold (efecto de plegado hacia arriba)
  • fade (efecto de desvanecimiento)
  • clip (efecto de plegado hacia el centro)
  • drop (efecto de transparencia como el fade, pero concluído con un movimiento hacia un lado)
  • puff (efecto de desvanecimiento hacia adelante)
  • explode (efecto de explosión)
Efectos de jQuery UI
11:15

En esta clase vamos a ver cómo tratar los temas y estilos de jQuery UI, dónde encontrarlos, cómo elegir el diseño que nos gusta y cómo personalizarlos completamente.

Temas y estilos
11:46
+
Cierre del curso
1 Lecture 04:59
Cierre y despedida
04:59
About the Instructor
Antonio Santos
4.1 Average rating
67 Reviews
431 Students
6 Courses
Periodista, comunicador audiovisual y diseñador web

Soy Licenciado en Periodismo y Comunicación Audiovisual por la Universidad Complutense de Madrid. Durante los últimos 15 años he trabajado en diferentes medios de comunicación (prensa y radio, fundamentalmente) y he dirigido Gabinetes de Comunicación de varias entidades.

Siempre con ganas de aprender y abrir nuevas vías profesionales, desde hace años también me dedico a la formación de profesionales en distintas áreas relacionadas con la comunicación y el diseño, llegando incluso a impartir asignaturas oficiales en la Universidad Europea de Madrid.

Actualmente trabajo como freelance periodístico y me dedico a la formación profesional en diferentes campos, entre ellos el de la creación y publicación de páginas web.