jQuery Avanzado - 100 trucos profesionales
4.8 (6 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.
98 students enrolled
Wishlisted Wishlist

Please confirm that you want to add jQuery Avanzado - 100 trucos profesionales to your Wishlist.

Add to Wishlist

jQuery Avanzado - 100 trucos profesionales

100 Tips avanzados de jQuery, que van desde simples optimizaciones de código hasta reconocimiento de cara y mucho más!
New
4.8 (6 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.
98 students enrolled
Created by Fernando Herrera
Last updated 9/2017
Spanish
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11 hours on-demand video
  • 2 Articles
  • 2 Practice Tests
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprenderemos 100 trucos avanzados de jQuery
  • Mejorar tiempos de carga de tu aplicación
  • Comprender el por qué y cómo, de muchas funciones de jQuery
  • Crear, usar y modificar plugins
  • Aprenderemos a detectar rostros, aplicar filtros tipo instagram, gráficos y mucho más
  • Mejorar el rendimiento de tu aplicación
View Curriculum
Requirements
  • Conocer los fundamentos de jQuery es necesario
  • Conocimiento básico de HTML, CSS y JavaScript es necesario
Description

jQuery Avanzado – 100 Trucos y Tips

 Este curso tiene un objetivo simple, mejorar tus habilidades en jQuery y JavaScript en general. Mediante 100 ejercicios prácticos, aprenderemos cosas como:

  • Mejorar enormemente tu manipulación del DOM
  • Optimizar lo tiempos de carga de nuestra aplicación o scripts
  • Mejorar tu comprensión en el uso de funciones y métodos de jQuery
  • Romper iFrames para la visualización de tu página web o webapp
  • Editar HTML en tiempo real
  • Optimizar tus selectores
  • Detectar diferentes capacidades de los navegadores web del usuario final
  • Encadenamiento de eventos
  • Múltiples eventos asíncronos en paralelo que convergen en una función
  • Subida de archivos binarios vía Ajax
  • Crear plugins y expandir objetos
  • Callbacks y promesas de jQuery
  • Animaciones personalizadas
  • Sistema de detección de rostros
  • Filtros tipo Instagram en JavaScript
  • Sistema de tarjetas tipo Pinterest
  • Y mucho más.

 En el curso aprenderemos técnicas y desarrollaremos habilidades mediante ejercicios prácticos que tomarán tu conocimiento de jQuery y lo elevarán a otro nivel. Mi objetivo será guiarte a través de estos 100 ejemplos y que tu mismo puedas implementarlos sin problemas.

Cada ejercicio es único y no se repiten, cada video es un tema, cada sección es una colección de temas que tienen alguna relación entre sí. Las clases son cortas con videos de menos de 10 minutos de duración, hay tareas y ejercicios para hacer por tu cuenta con su respectiva resolución para que puedas auto evaluarte.

Cuando termines este curso de jQuery, tendrás nuevas habilidades y conocimientos que podrás aplicar en cualquier proyecto web, ayudándote a que tus webapps o páginas web tengan ese extra que deseas, sin contar que tus habilidades habrán mejorado enormemente.

 Este curso NO es recomendable para personas que no conocen jQuery, no es para gente que jamás lo ha tocado, si deseas aprender de cero, tengo otro curso que es perfecto para ti, pero este no es.

Who is the target audience?
  • Personas que conozcan jQuery que deseen mejorar y crear mejores programas
  • Diseñadores y desarrolladores web que deseen expandir sus conocimientos
  • Personas que quieran comprender mejor el por qué de muchas funciones y códigos de jQuery
  • Personas que quieran expandir su repertorio de trucos y plugins útiles
Compare to Other Web Development Courses
Curriculum For This Course
117 Lectures
11:06:26
+
Introducción
5 Lectures 08:42

Una breve introducción para saber como trabaja el curso

Preview 02:11

Lineamientos para hacer preguntas, es algo básico, pero realmente ayudará mucho.

¿Cómo hacer preguntas?
03:39

Instalaciones necesarias para seguir el curso sin ningún inconveniente

Preview 01:12

Creditos y links útiles

Preview 00:37
+
Manipulación del Dom
15 Lectures 01:08:27

Un breve resumen del contenido de esta sección

Preview 01:13

Normalmente, desearemos manipular el DOM (Document Object Model), cuando la página este lista y completamente creada.

Preview 08:01

Aquí aprenderemos a ejecutar un código en una determinada página

Preview 06:15

Dado que el operador lógico AND no evalúa la segunda expresión en caso de que la primera sea falsa, podemos hacer lo siguiente.

Truco - Uso del operador lógico AND
02:45

Formas de utilizar el método is()

Preview 05:53

Una técnica divertida para contar elementos en el DOM

Contar cuantos elementos hay en el DOM
02:29

Es una forma interesante de revisar si algo existe

Definir la función existe()
02:28

¿Saben para qué sirve el segundo argumento del método $( )?

Usando el segundo argumento de la función $( )
04:44

Aprenderemos formas de adicionar atributos bien interesantes.

Modificando links y colocando íconos
05:33

Es muy poco usado, pero ayuda mucho en la eficiencia y velocidad del código

Dominando el método end( )
04:33

Aquí aprenderemos a prevenir que la gente pueda hacer click derecho en nuestra página.

Preview 06:38

A veces nuestras páginas son abiertas en navegadores internos en lugar de re-direccionar a las personas a nuestros sitios, aquí un tip interesante para prevenir eso.

Preview 03:42

A veces cuando necesitamos revisar los URLs, usamos una expresión regular, pero existe un truco bastante útil para resolver este trabajo.

Separar elementos de un URL usando anchor tags
05:21

Este es un truco interesante que puede servirles bastante para realizar algún tipo de edición en pantalla

Hacer un contenido editable, incluyendo el estilo
06:27

A veces, cuando tenemos funciones de drag and drop, no queremos que por accidente se seleccionen las cosas.

Prevenir que un texto sea seleccionado
02:25

Examen #1
10 questions
+
Performance, mejorando el rendimiento de nuestro código
13 Lectures 52:57

Un breve resumen de lo que haremos a continuación

Introducción a la sección
00:47

Ya que es muy probable que muchos otros lugares tengan incluido jQuery en su sitio web y exista esa versión de jQuery en cache

Incluir jQuery de un CDN ( Content delivery network )
04:46

Un error muy común de performance, es estar continuamente estar modificando el DOM para hacer tareas que podemos ejecutar una única vez.

Manipulaciones del DOM al mínimo
06:18

Esta es un tema interesante si la velocidad es crítica para nuestra app.

Si el tiempo es crítico, usemos JavaScript plano
02:48

El uso adecuado de los selectores es imprescindible para un buen uso de los recursos

Optimizar los selectores hasta donde sea posible
06:04

Siguiendo con el tema de mejorar la velocidad de selección, este es un tema principal.

Guardando elementos en el cache
03:21

De esta forma ocupan menos memoria y el programa corre mejor.

Definir funciones repetidas una única vez
03:54

Si tratamos los objetos de jQuery como arreglos normales de JavaScript, nos podemos ahorrar hasta 5 veces más tiempo

Tratar los objetos de jQuery como arreglos normales
04:38

Si aún queremos exprimir más la eficiencia, esta es una técnica necesaria

Desenlazar elementos del DOM cuando hacemos modificaciones complejas a ellos
05:07

Podemos acelerar la carga de los scripts de esta manera.

Preview 03:50

Aquí aprenderemos a crear un estilo para poder modificar mucho elementos a la vez.

Creando un estilo para modificar múltiples elementos
02:44

Respuesta única, todo relacionado a las optimizaciones del código

Examen #2 - Optimizaciones
10 questions

Realice lo que a continuación se le pide

Tarea práctica #1
01:20

Esta es una forma de resolver el problema

Resolución de la tarea práctica #1
07:20
+
Eventos
11 Lectures 46:55

Aquí vamos a tener un breve resumen de lo que la sección contiene

Introducción a la sección
00:44

De esta forma podemos determinar si JavaScript esta habilitado o no.

Detectar si JavaScript esta habilitado agregando una clase
03:35

Programadores nuevo en jQuery, usualmente tienen un par de dolores de cabeza con este problema

Escuchar eventos de elementos que aún no existen
04:47

A veces queremos que disparar un evento una sola vez.

Unica llamada de un evento
03:20

Aquí aprenderemos a simular eventos, cosa que es sumamente útil cuando usamos librerías de terceros que no tienen APIs implementadas.

Preview 06:31

La idea es poder arrastrar un elemento por la pantalla simulando un dedo

Trabajando con eventos cuando tocamos la pantalla con el dedo
08:46

Aquí aprenderemos varias formas de usar el evento on()

Preview 08:05

Quizá estemos familiarizados con el preventDefault(), pero hay una forma más corta

Forma rápida de prevenir comportamientos por defecto
02:46

Enviar y recibir parámetros de eventos que son disparados porque están enlazados al mismo elemento.

Encadenar eventos
02:56

Puede ser que necesites tu propio sistema de eventos.

Crear eventos personalizados
05:02

Selección única

Examen #3
5 questions

Aquí un pequeño juego para determinar tu conocimiento de jQuery

Juego para probar tus habilidades de jQuery
00:23
+
Ajax
15 Lectures 01:15:25
Introducción a la sección
01:28

Para realizar peticiones ajax, necesitamos un pequeño servidor para servir nuestros archivos, caso contrario, las peticiones ajax fallarán

Instalación previa - Lite Server
06:35

Aquí aprenderemos algo muy importante para saber el tamaño de los archivos mediante jQuery

Desplegar el tamaño de los archivos a descargar
06:20

Aquí aprenderemos a simplificar las peticiones ajax en un línea de código

Simplificar las peticiones ajax
03:01

Aquí aprenderemos a disparar funciones ajax y que ejecuten un código cuando ambas terminen.

Preview 05:21

En una sola línea de código, podemos encontrar nuestra ip publica

Obtener tu IP pública con jQuery
02:41

Esta es la petición ajax más simple, pero es muy útil

Cargar archivos externos y desplegarlos en nuestra página
03:35

En ocaciones, necesitamos enviar un URL con todos los parámetros de un formulario u objeto de forma segura y escapando los caracteres. Aquí tienen una forma de hacerlo

Serializando objetos
05:03

Esto sólo funciona en navegadores modernos.

Subida de archivos binarios vía Ajax
11:46

No es un gran secreto, pero puede ser de utilidad para varias personas.

Obteniendo la fotografía de una página de Facebook
02:26

Aquí aprenderemos a realizar una petición a un servicio que nos retorna información del clima

Obtener información del clima
07:46

Aquí podemos hacer uso del api pública de Tumblr

Obtener el último post de Tumblr de un blog
06:35

Este es un servicio interesante que podemos usar y es totalmente abierto

Preview 02:51

Aquí tienen un listado de APIs públicas que pueden usar.

Apis públicas
04:33

Podemos definir un comportamiento estandarizado para todas las peticiones ajax que se realicen.

Usando los métodos globales de Ajax
05:24
+
La clase maestra
19 Lectures 02:18:41

Aquí tendremos un breve resumen de lo que esta sección contiene

Introducción a la sección
01:45

Es realmente útil tener mensajes de consola para poder depurar nuestra aplicación

Aprende a querer la consola
08:58

Aquí mostramos como crear plugins de jQuery.

Convierte tu código para reusarlo eficientemente
12:26

De esta manera prevenimos posibles errores y conflictos.

Usa funciones anónimas para aislar el código
05:32

¿Cómo podemos personalizar plugins, si nuestro código esta aislado?

Preview 12:36

Aprenderemos a usar la función jQuery.type()

Uso de la función $.type( )
05:00

Es un método muy útil, pero poco usado

Preview 06:57

Este método nos ayuda mucho a trabajar con arreglos en jQuery

El método $.grep( )
05:08

De la misma manera como funciona el sort de JavaScript, tenemos el sort en jQuery

Ordenar elementos dentro de una colección de jQuery
04:49

Este es un tema interesante que nos ayudará a comprender o a mejorar cierto tipo de sintaxis cuando trabajamos con ajax.

Deferido / Promesas de jQuery
06:03

Este es un truco interesante que puede ahorrarnos un par de líneas de código

Llamar métodos de jQuery condicionalmente
05:08

En esta clase aprenderemos a convertir una imagen a blanco y negro usando jQuery y canvas

Convertir una imagen en blanco y negro
09:07

jQuery ofrece un método muy poderoso para manejar los callbacks llamado $.Callbacks

Listas de callbacks
06:17

Aquí aprenderemos a crear selectores de jQuery personalizados

Crear pseudo selectores personalizados
07:22

Podemos crear nuestras propias animaciones personalizadas y mandarlas como parámetros en los easings o tipo de animación del método animate de jquery

Animaciones personalizadas
08:21

Aquí aprenderemos a añadir funciones a la cola de animaciones de jQuery

Usando la cola de animaciones de jQuery
08:01

jQuery nos da el poder de crear propiedades que pueden ser reconocidas con el método .css( )

Propiedades CSS personalizadas
04:51

El método proxy, nos ayuda a que controlemos el valor del objeto this

El método $.proxy( )
07:33

Aquí aprenderemos que muchos métodos de jQuery, pueden recibir métodos para realizar tareas aún más especificas

Enviar callbacks a los métodos de jQuery
12:47
+
Plugins
16 Lectures 02:03:06

Una breve introducción a lo que veremos en esta sección

Introducción a la sección
02:34

Esta es una excelente forma de confirmar si el navegador web soporta ciertas características que pueden ser necesarias para tu plugin

Probar si el navegador web soporta características HTML5
07:16

CSS Media Queries permiten aplicar CSS condicional a diferentes pantallas, pero de la misma forma, podemos hacer condiciones en JavaScript/jQuery

Usar media queries en jQuery / JavaScript
05:35

Entre más scripts tenga tu sitio web, más lento cargará

Acelerar la carga de tu página con un cargador de scripts
05:20

Este es un tip básico, pero ayuda mucho a re-utilizar el código

Obtener parámetros de elementos del DOM
11:25

jQuery es excelente para manipular el DOM, pero le faltan muchas herramientas para manipular data.

Un complemento perfecto para jQuery y JavaScript en general
10:03

Esta es una excelente librería que agrega todas las funciones de tiempo y fechas que JavaScript debería de tener por defecto

Simplificar las funciones de fecha y tiempo en JavaScript
14:53

TypeScript lejos de ser un lenguaje de programación que aprender, debería de ser un compañero para escribir mejor código de JavaScript

No tengan miedo de usar TypeScript
09:55

Una forma de poder realizar ciertos trabajos en jQuery, es poder mantener información persistente en el navegador web del cliente

Uso del localstorage
04:35

Ya vimos como cambiar a blanco y negro una imagen, que les parece si ahora hacemos más cosas con ellas

Cortar, escalar, blur, cambiar colores y más sobre imágenes
08:06

Aquí aprenderemos a utilizar una simple línea de markdown y convertirla en su representación HTML

Leer e imprimir Markdown
08:36

Por defecto, jQuery no puede realizar el cambio de colores con animaciones, pero esta librería te ayudará a hacerlo

Animar colores
06:14

De una forma sumamente simple, podemos controlar animaciones por CSS y jQuery

Manejar animaciones por CSS
09:06

Mostrar un video de fondo de pantalla es algo que se ve muy bonito y elegante en un sitio web

Mostrar un video de fondo
05:44

Las alertas e inputs básicos son bastante feos y lo peor, es que detienen el funcionamiento de JavaScript hasta que son resueltos, pero aquí hay una solución para eso

Mejorar los diálogos de tu aplicación
07:13

Este es un detalle bonito para tu aplicación o sitio web

Notificaciones en el área del favicon
06:31
+
Plugins 2
22 Lectures 02:31:01

Un breve resumen de lo que veremos en esta sección

Introducción a la sección
01:59

Este debería ser el comportamiento por defecto de cualquier selector

Mejores selectores usando chosen
06:24

Puede ser interesante aplicar un blur a elementos del HTML para ocultar contenido u otras cosas.

Aplicar un blur a los elementos de la página
03:01

Aquí aprenderemos a generar nuestros propios códigos QR totalmente funcionales desde jQuery

Generar códigos QR usando jQuery
04:10

Aprenderemos a utilizar un plugin que nos permite detectar rostros en jQuery

Detectar rostros en jQuery
12:17

Es posible disparar el modo pantalla completa del navegador web mediante jQuery

Disparar el modo de pantalla completa
06:46

Aquí aprenderemos a crear un sistema de grid tipo Pinterest

Sistema de grid tipo pinterest
10:51

Aquí aprenderemos a transformar nuestros inputs en una barras medidoras muy elegantes y útiles.

Convertir inputs en medidores (knob)
06:15

Una forma de trabajar con dinero y monedas usando jQuery

Trabajando con dinero y monedas
09:16

Aquí aprenderemos a utilizar GoogleMaps de una forma sumamente simple

Uso de GoogleMaps de una forma simple
06:36

El problema de las tablas del bootstrap, es que no son realmente responsive. Aquí un truco para arreglar esto

Tablas verdaderamente responsive
06:09

Aquí aprenderemos a colocar máscaras en los inputs

Colocar máscaras a los inputs
06:23

Hacer una validación correcta, puede demorar un par de minutos extra, pero con un plugin especializado, aprovechamos el tiempo invertido por otras personas para que nosotros no tengamos que escribir toda la lógica nuevamente

Validaciones de formularios
08:43

Si necesitas realizar comparaciones o demostraciones entre dos imágenes, esta es una forma de hacerlo de una forma elegante

Resaltar diferencias entre dos imágenes
07:30

Una forma interesante de cambiar las imágenes utilizando filtros muy parecidos a los de instagram

Filtros de instagram usando JavaScript
07:59

Es un poco engañoso poder crear este tipo de shortcuts o atajos, pero con este plugin es sumamente simple

Atajos del teclado en tu página o aplicación web
05:35

De esta forma podemos despreocuparnos de controlar los tamaños de ciertas fuentes en nuestra página web

Ajustar textos en la web
03:30

Aquí podremos aprender a tomar una fotografía con la cámara de la computadora.

Tomar una fotografía con la cámara
05:48

Aquí tenemos un plugin para el manejo y selección de fechas dinámico y fácil de utilizar

Selector de fechas responsive y validado
10:15

Hacer un drag and drop puede ser una tarea tediosa, pero existen alternativas muy personalizables para realizar este trabajo

Manejar un drag & drop
06:53

Tal vez no sea el plugin más útil de todos, pero seguramente es divertido y obtendrás la atención de tu usuario

Hacer vibrar elementos para énfasis
04:21

Siempre es bueno poder mostrar gráficos para desplegar información, las personas aman los gráficos

Realizar gráficos dinámicos
10:20
+
Despedida
1 Lecture 01:14

Espero que aprendieran una u otra cosa interesante a lo largo de este curso!

Despedida del curso
01:14
About the Instructor
Fernando Herrera
4.6 Average rating
7,387 Reviews
25,832 Students
13 Courses
Analista de Sistemas y Desarrollador Web

Soy un analista de sistemas de computo, con poco más de 17 años en el mundo del desarrollo de aplicaciones de todo tipo.

Me encanta programar, crear cosas que la gente use, enseñar, también soy maestro sustituto en una universidad en las clases de programación, soy autor de código en Envato Marketplace.

Aquí en Udemy, he tenido la increíble experiencia de poder enseñar a muchos alumnos, y espero seguir mejorando mis cursos y los temas con forme la actualidad vaya cambiando.