Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: Aprende jQuery y jQuery UI de forma fácil y práctica
Rating: 4.7 (50 reviews)

Descubre cómo crear páginas web dinámicas que sorprenderán a todos. Incluye la explicación de 8 widgets adicionales.

Created byAntonio Santos

Last updated 5/2022

Spanish

Spanish [Auto],

What you'll 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

Course content

9 sections • 60 lectures • 9h 43m total length

Presentación del curso3:33
Tipos de páginas web8:20
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.
Descarga e instalación de jQuery13:46
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.
Sintáxis básica10:12
En esta clase vamos a conocer de forma gráfica y clara cómo es la estructura fundamental del lenguaje de programación jQuery.

Los selectores básicos10:50
En esta clase vamos a estudiar los siguientes selectores:

Selector 'this'

Selector de etiqueta

Selector de id

Selector de clase

Selector universal
Los selectores de atributo9:43
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 posición12:22
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 parentesco12:26
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
Resumen del módulo5:53
En esta clase haremos un repaso de todos los selectores vistos en el módulo.

Eventos I: Los eventos de ratón (1ª parte)8:02
En esta clase veremos los siguientes eventos:

click

dblclick

mouseover

mouseout

hover
Eventos II: Los eventos de ratón (2ª parte) y los eventos de teclado6:12
En esta clase veremos los siguientes eventos:

mouseup

mousedown

keyup

keydown

keypress
Eventos III: Los eventos de formulario5:22
En esta clase veremos los eventos relacionados con cajas de tipo input:

focus

blur

Los efectos show(), hide() y toggle()13:37
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 tipo fade5:27
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 slide3:15
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)
El efecto animate()5:57
En esta clase vamos a estudiar el efecto animate() de jQuery, con el que conseguiremos personalizar nuestras animaciones.
Uso de delay10:19
En esta clase vamos a aprender a usar la instrucción 'delay' para lograr aplicar un retardo al inicio de nuestras animaciones.
Uso de stop4:38
En esta clase vamos a ver la instrucción 'stop' y vamos a aprender para qué se utiliza.
Funciones de callback6:54
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.

El método text()11:21
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 atttr()10:48
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 val()9:39
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.
Los métodos html(), append(), prepend(), after() y before()12:10
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 remove() y empty()3:47
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 css()15:31
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()

Introducción a AJAX: ¿Qué es eso de AJAX?8:22
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.
El método load()10:54
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.
Los métodos get() y post()19:51
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.
El método ajax()11:13
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.
Plugin para ajax()7:41
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.

Introducción a los widgets: ¿qué es y cómo se usan?8:42
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.
El widget color10:53
En esta clase vamos a estudiar el plugin color, que nos permitirá aplicar efectos de animación que incluyan cambios de color.
Widget para aplicar efectos de movimiento8:34
En esta clase vamos a estudiar el plugin easing, que nos permitirá aplicar nuevos efectos de movimiento a nuestros elementos web.
Widget para crear rotaciones17:41
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 introducir mapas de Google personalizados18:34
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 validar formularios16:55
En esta clase vamos a estudiar el plugin validate, con el que podremos crear validaciones personalizadas para nuestros formularios.
Widget para filtrar y mostrar elementos con movimientos15:19
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 crear menús y galerías de imágenes dinámicos20:57
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 galerías de imágenes con múltiples efectos de transición14:47
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.
Últimas consideraciones y cierre del módulo8:22
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.

Introducción e instalación17:28
Eventos I: draggable y droppable9:19
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)
Crear un juego de drag & drop19:59
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.
Eventos II: selectable5:07
En esta clase vamos a aprender un nuevo evento de jQuery UI: el evento selectable, que nos permitirá seleccionar elementos de un listado.
Eventos III: sortable2:26
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 IV: resizable4:35
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.
Recursos I: el acordeón4:11
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 II: autocompletar4:57
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 III: botones6:45
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 IV: grupos de botones8:43
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 V: insertar un calendario12:35
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 VI: ventanas de diálogo7:02
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 VII: menús9:22
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 VIII: barras de progreso y deslizadores11:08
En esta clase veremos los recursos progressbar() y slider(), y crearemos una pequeña aplicación para usar el slider() en nuestros proyectos.
Recursos IX: el spinner3:09
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 X: presentar la información en pestañas6:23
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 XI: los tooltips3:47
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.
Efectos de jQuery UI11:15
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)
Temas y estilos11:46
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.

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

Who this course is for:

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.

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

What you'll learn

Explore related topics

Course content

Primeros pasos e introducción4 lectures • 36min

Selectores5 lectures • 51min

Eventos3 lectures • 20min

Funciones y efectos7 lectures • 50min

jQuery y HTML6 lectures • 1hr 3min

jQuery y AJAX5 lectures • 58min

Widgets interesantes para jQuery10 lectures • 2hr 21min

jQuery UI19 lectures • 2hr 40min

Cierre del curso1 lecture • 5min

Requirements

Description

Who this course is for: