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.9 (18 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.
95 students enrolled
$20
Take This Course
  • Lectures 60
  • Contents Video: 9.5 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 Spanish

Course 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 tres 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

3.- Añade bases de datos a tus páginas con MYSQL y php (en producción)

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

What are the requirements?

  • Es recomendable conocer HTML y CSS antes de iniciar este curso (al menos, a un nivel básico)

What am I going to get from this course?

  • 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

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Primeros pasos e introducción
Presentación del curso
Preview
03:33
08: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.

13: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.

10: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.

Section 2: Selectores
10:50

En esta clase vamos a estudiar los siguientes selectores:

  • Selector 'this'
  • Selector de etiqueta
  • Selector de id
  • Selector de clase
  • Selector universal
09: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'
12: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'
12: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
05:53

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

Section 3: Eventos
08:02

En esta clase veremos los siguientes eventos:

  • click
  • dblclick
  • mouseover
  • mouseout
  • hover
06:12

En esta clase veremos los siguientes eventos:

  • mouseup
  • mousedown
  • keyup
  • keydown
  • keypress
05:22

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

  • focus
  • blur
Section 4: Funciones y efectos
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)
05: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)
03: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)
05:57

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

10:19

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

04:38

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

06: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.

Section 5: jQuery y HTML
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.

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.

09: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.

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)
03: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)
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()
Section 6: jQuery y AJAX
08: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.

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.

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.

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.

07: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.

Section 7: Widgets interesantes para jQuery
08: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.

10:53

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

08:34

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

17: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.

18: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.

16:55

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

15: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.

20: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.

14: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.

08: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.

Section 8: jQuery UI
Introducción e instalación
Preview
17:28
09: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)
19: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.

05:07

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

02: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.

04: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.

04: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.

04: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.

06: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.

08: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.

12: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.

07: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.

09: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.

11:08

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

03: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.

06: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.

03: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.

11: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)
11: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.

Section 9: Cierre del curso
Cierre y despedida
04:59

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Antonio Santos, 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.

Ready to start learning?
Take This Course