[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.56,0:00:03.45,Default,,0000,0000,0000,,Tengo esta página web con una foto de "Winston".
Dialogue: 0,0:00:03.45,0:00:06.56,Default,,0000,0000,0000,,Hace frío y "Winston" se está haciendo viejo,
Dialogue: 0,0:00:06.56,0:00:08.65,Default,,0000,0000,0000,,así que quiere tener una barba.
Dialogue: 0,0:00:08.65,0:00:10.75,Default,,0000,0000,0000,,Yo podría dibujar la barba.
Dialogue: 0,0:00:10.75,0:00:13.52,Default,,0000,0000,0000,,Pero pienso que sería mejor si el usuario dibuja la barba
Dialogue: 0,0:00:13.52,0:00:16.41,Default,,0000,0000,0000,,de "Winston", de la manera en que quieren que se vea.
Dialogue: 0,0:00:16.41,0:00:20.38,Default,,0000,0000,0000,,Una barba larga, o como de tres días, o lo que sea que definan.
Dialogue: 0,0:00:20.38,0:00:22.71,Default,,0000,0000,0000,,¿Cómo podríamos hacer eso?
Dialogue: 0,0:00:22.71,0:00:28.69,Default,,0000,0000,0000,,Una forma es añadir un detector de eventos para el evento "mouseMove" en la imagen,
Dialogue: 0,0:00:28.69,0:00:33.03,Default,,0000,0000,0000,,de manera que el programa llame a nuestra función cuando el usuario mueva su ratón,
Dialogue: 0,0:00:33.03,0:00:34.39,Default,,0000,0000,0000,,sobre la cara de "Winston".
Dialogue: 0,0:00:34.39,0:00:37.61,Default,,0000,0000,0000,,Vamos a hacer eso usando lo que acabamos de aprender.
Dialogue: 0,0:00:37.61,0:00:41.41,Default,,0000,0000,0000,,El primer paso es encontrar el elemento, la imagen.
Dialogue: 0,0:00:41.41,0:00:47.01,Default,,0000,0000,0000,,"var face = document.getElementById("...
Dialogue: 0,0:00:47.01,0:00:50.28,Default,,0000,0000,0000,,... "face"), porque tengo este lindo "Id".
Dialogue: 0,0:00:50.28,0:00:53.87,Default,,0000,0000,0000,,El segundo paso es definir la función que responde al evento.
Dialogue: 0,0:00:53.87,0:00:58.27,Default,,0000,0000,0000,,Y vamos a empezar con una simple, para asegurarnos de que funciona,
Dialogue: 0,0:00:58.27,0:01:01.55,Default,,0000,0000,0000,,y podremos hacer más tarde que haga algo más.
Dialogue: 0,0:01:01.55,0:01:11.51,Default,,0000,0000,0000,,'document.getElementById("message").textContent += "mooove";'
Dialogue: 0,0:01:11.51,0:01:13.18,Default,,0000,0000,0000,,Ok.
Dialogue: 0,0:01:13.18,0:01:17.95,Default,,0000,0000,0000,,Y el paso final es conectar éste con éste,
Dialogue: 0,0:01:17.95,0:01:21.94,Default,,0000,0000,0000,,para asegurarnos de que éste será llamado cuando éste detecte el evento "mouseMove".
Dialogue: 0,0:01:21.94,0:01:27.85,Default,,0000,0000,0000,,Así que escribiremos: 'face.addEventListener("mousemove",'
Dialogue: 0,0:01:27.85,0:01:32.07,Default,,0000,0000,0000,,y luego le pasamos el nombre de nuestra función, "onMouseMove".
Dialogue: 0,0:01:32.07,0:01:36.59,Default,,0000,0000,0000,,Ahora, pausa esta guía paso a paso, y trata de mover el ratón sobre la cara.
Dialogue: 0,0:01:36.59,0:01:39.16,Default,,0000,0000,0000,,¿Viste el mensaje?
Dialogue: 0,0:01:39.88,0:01:43.86,Default,,0000,0000,0000,,Ok, espero que hayas visto este evento funcionando.
Dialogue: 0,0:01:43.86,0:01:47.34,Default,,0000,0000,0000,,Pero esto no es lo que queremos que haga nuestro detector de eventos.
Dialogue: 0,0:01:47.34,0:01:50.45,Default,,0000,0000,0000,,Queremos que dibuje, no que escriba texto.
Dialogue: 0,0:01:50.45,0:01:53.36,Default,,0000,0000,0000,,¿Cómo podemos dibujar en una página web?
Dialogue: 0,0:01:53.36,0:01:58.60,Default,,0000,0000,0000,,Podríamos usar la etiqueta "" y dibujar pixeles, como lo hicimos aquí
Dialogue: 0,0:01:58.60,0:02:00.73,Default,,0000,0000,0000,,con los programas de "ProcessingJS".
Dialogue: 0,0:02:00.73,0:02:06.50,Default,,0000,0000,0000,,Pero todo lo que estamos dibujando es una barba, que en realidad es un montón de puntos negros.
Dialogue: 0,0:02:06.50,0:02:11.57,Default,,0000,0000,0000,,Así que podríamos crear un "" para cada punto, y asignar a este ""
Dialogue: 0,0:02:11.57,0:02:13.55,Default,,0000,0000,0000,,un posicionamiento absoluto.
Dialogue: 0,0:02:13.55,0:02:18.31,Default,,0000,0000,0000,,Aquí, se los voy a mostrar con un folículo de barba.
Dialogue: 0,0:02:18.31,0:02:24.52,Default,,0000,0000,0000,,Entonces, voy a hacer un "" con una clase "beard", y luego voy a estilizar la barba con algo lindo de CSS
Dialogue: 0,0:02:24.52,0:02:29.74,Default,,0000,0000,0000,,que voy a pegar aquí.
Dialogue: 0,0:02:29.74,0:02:31.75,Default,,0000,0000,0000,,Y vamos a arreglar eso.
Dialogue: 0,0:02:31.75,0:02:36.47,Default,,0000,0000,0000,,Así que puedes ver que nuestra barba tiene un fondo negro, es de 5 por 5 pixeles,
Dialogue: 0,0:02:36.47,0:02:40.52,Default,,0000,0000,0000,,tiene un borde de 2 pixeles de radio, para hacerlo un poco más redondo,
Dialogue: 0,0:02:40.52,0:02:44.68,Default,,0000,0000,0000,,y está usando un esquema de posicionamiento absoluto.
Dialogue: 0,0:02:44.68,0:02:48.49,Default,,0000,0000,0000,,Actualmente, el "" se muestra debajo de la imagen.
Dialogue: 0,0:02:48.49,0:02:51.47,Default,,0000,0000,0000,,¿Cómo podemos hacer para que se muestre sobre la cara?
Dialogue: 0,0:02:51.47,0:02:55.27,Default,,0000,0000,0000,,Estamos usando posicionamiento absoluto, eso significa que deberíamos usar
Dialogue: 0,0:02:55.27,0:02:59.83,Default,,0000,0000,0000,,las propiedades "top" y "left" para decirle, en realidad, dónde
Dialogue: 0,0:02:59.83,0:03:02.07,Default,,0000,0000,0000,,debería posicionarse, ya que es posicionamiento absoluto.
Dialogue: 0,0:03:02.07,0:03:07.92,Default,,0000,0000,0000,,Así que vamos a poner "top: 80px;", y luego "left: 15px;".
Dialogue: 0,0:03:07.92,0:03:09.42,Default,,0000,0000,0000,,Hermoso.
Dialogue: 0,0:03:09.42,0:03:13.75,Default,,0000,0000,0000,,Ahora que logramos que funcionara en HTML, vamos a hacer que funcione en JavaScript,
Dialogue: 0,0:03:13.75,0:03:18.86,Default,,0000,0000,0000,,para que el usuario pueda crear dinámicamente este "" cada vez que mueva su ratón.
Dialogue: 0,0:03:18.86,0:03:22.78,Default,,0000,0000,0000,,Vamos a ir abajo a nuestra función de JavaScript que responde al evento.
Dialogue: 0,0:03:22.78,0:03:25.53,Default,,0000,0000,0000,,El primer paso es crear un "",
Dialogue: 0,0:03:25.53,0:03:31.41,Default,,0000,0000,0000,,que podemos hacer con nuestra función "document.createElement()",
Dialogue: 0,0:03:31.41,0:03:33.59,Default,,0000,0000,0000,,esto va a ser un "".
Dialogue: 0,0:03:33.59,0:03:39.58,Default,,0000,0000,0000,,El segundo paso es añadir la clase: 'beard.className = "beard";'.
Dialogue: 0,0:03:39.58,0:03:42.20,Default,,0000,0000,0000,,Así que ahora tenemos este "" flotando en el espacio.
Dialogue: 0,0:03:42.20,0:03:47.07,Default,,0000,0000,0000,,El paso final es anexarlo a "".
Dialogue: 0,0:03:47.07,0:03:52.10,Default,,0000,0000,0000,,Muy bien, ahora hicimos en JavaScript básicamente lo que habíamos hecho en HTML,
Dialogue: 0,0:03:52.10,0:03:54.67,Default,,0000,0000,0000,,así que podemos borrar este HTML.
Dialogue: 0,0:03:54.67,0:03:58.76,Default,,0000,0000,0000,,Ahora, deberías pausar la guía paso a paso, y probar presionar el ratón en "Winston".
Dialogue: 0,0:03:58.76,0:04:00.31,Default,,0000,0000,0000,,Observa lo que pasa.
Dialogue: 0,0:04:02.41,0:04:04.93,Default,,0000,0000,0000,,¿Viste que apareciera el folículo de barba?
Dialogue: 0,0:04:04.93,0:04:07.19,Default,,0000,0000,0000,,¿Y trataste de presionar el ratón varias veces?
Dialogue: 0,0:04:07.19,0:04:11.09,Default,,0000,0000,0000,,Si lo hiciste, probablemente notaste que la segunda vez que presionaste el ratón no pasó nada,
Dialogue: 0,0:04:11.09,0:04:13.52,Default,,0000,0000,0000,,o cuando menos parece que no pasó nada.
Dialogue: 0,0:04:13.52,0:04:17.86,Default,,0000,0000,0000,,Esto es porque cada "" tiene las mismas propiedades "top" y "left",
Dialogue: 0,0:04:17.86,0:04:21.08,Default,,0000,0000,0000,,así que las nuevas barbas aparecen sobre las que ya estaban.
Dialogue: 0,0:04:21.08,0:04:25.49,Default,,0000,0000,0000,,Queremos que "" se muestre donde quiera que el usuario presione el ratón.
Dialogue: 0,0:04:25.49,0:04:30.39,Default,,0000,0000,0000,,¿Cómo podemos saber dónde se encuentra el ratón?
Dialogue: 0,0:04:30.39,0:04:34.32,Default,,0000,0000,0000,,Como resultado, el navegador registra una gran cantidad de información
Dialogue: 0,0:04:34.32,0:04:38.08,Default,,0000,0000,0000,,cada vez que sucede cualquier evento del usuario.
Dialogue: 0,0:04:38.08,0:04:41.02,Default,,0000,0000,0000,,Y el navegador te da información cada vez
Dialogue: 0,0:04:41.02,0:04:43.22,Default,,0000,0000,0000,,que se llama a la función de detector de eventos.
Dialogue: 0,0:04:43.22,0:04:46.80,Default,,0000,0000,0000,,Pero ¿dónde y cómo podemos obtener esa información increíble?
Dialogue: 0,0:04:46.80,0:04:51.41,Default,,0000,0000,0000,,Voy a teclear una letra, para darles un pista.
Dialogue: 0,0:04:51.41,0:04:56.07,Default,,0000,0000,0000,,Esta "e" aquí, es el objeto de la información del evento.
Dialogue: 0,0:04:56.07,0:04:59.61,Default,,0000,0000,0000,,Y el navegador lo envía como el primer argumento cuando llama
Dialogue: 0,0:04:59.61,0:05:02.13,Default,,0000,0000,0000,,una función del detector de eventos.
Dialogue: 0,0:05:02.13,0:05:06.18,Default,,0000,0000,0000,,No lo necesitamos antes, así que no me molesté en escribir la lista de argumentos.
Dialogue: 0,0:05:06.18,0:05:09.00,Default,,0000,0000,0000,,Pero ahora que lo vamos a usar, le estoy dando un nombre, para que sea fácil
Dialogue: 0,0:05:09.00,0:05:11.59,Default,,0000,0000,0000,,hacer referencia dentro de la función.
Dialogue: 0,0:05:11.59,0:05:14.97,Default,,0000,0000,0000,,Recuerden que en JavaScript, una función puede ser llamada con cualquier número
Dialogue: 0,0:05:14.97,0:05:18.59,Default,,0000,0000,0000,,de argumentos, incluso si la función no los usa o no se refiere a ninguno de ellos.
Dialogue: 0,0:05:18.59,0:05:22.70,Default,,0000,0000,0000,,Así que siempre estábamos obteniendo esta información, sólo que no lo sabíamos.
Dialogue: 0,0:05:22.70,0:05:28.28,Default,,0000,0000,0000,,Ahora voy a sacar la "e" a la consola: "console.log(e)".
Dialogue: 0,0:05:28.28,0:05:32.16,Default,,0000,0000,0000,,Pausa la guía paso a paso, presiona el ratón en "Winston", y revisa tu consola.
Dialogue: 0,0:05:32.16,0:05:34.41,Default,,0000,0000,0000,,Deberías poder ver el objeto del evento,
Dialogue: 0,0:05:34.41,0:05:37.15,Default,,0000,0000,0000,,y leer todas sus propiedades.
Dialogue: 0,0:05:38.58,0:05:43.27,Default,,0000,0000,0000,,Hay dos propiedades del evento que nos interesan en particular:
Dialogue: 0,0:05:43.27,0:05:45.59,Default,,0000,0000,0000,,"clientX" y "clientY".
Dialogue: 0,0:05:45.59,0:05:49.31,Default,,0000,0000,0000,,Estos registran la "x" y la "y" del evento y eso es lo que vamos a usar
Dialogue: 0,0:05:49.31,0:05:51.16,Default,,0000,0000,0000,,para posicionar la barba.
Dialogue: 0,0:05:51.16,0:06:02.02,Default,,0000,0000,0000,,Vamos a definir la propiedad "top" de la barba igual a "e.clientY" más "px", para las unidades.
Dialogue: 0,0:06:02.02,0:06:10.32,Default,,0000,0000,0000,,Y establecer "left" igual a "e.clientX", más "px" para las unidades.
Dialogue: 0,0:06:10.32,0:06:14.32,Default,,0000,0000,0000,,Ahora usa la pausa y trata de pasar el ratón por encima.
Dialogue: 0,0:06:14.32,0:06:16.03,Default,,0000,0000,0000,,Dibujale una barba a "Winston".
Dialogue: 0,0:06:17.97,0:06:19.45,Default,,0000,0000,0000,,Bastante bien, ¿eh?
Dialogue: 0,0:06:19.45,0:06:23.16,Default,,0000,0000,0000,,Apuesto que pueden imaginar lo divertidas que pueden ser las aplicaciones de pintura que pueden hacer,
Dialogue: 0,0:06:23.16,0:06:25.56,Default,,0000,0000,0000,,usando "clientX" y "clientY".
Dialogue: 0,0:06:25.56,0:06:28.79,Default,,0000,0000,0000,,Y como lo viste en la consola, hay muchas propiedades
Dialogue: 0,0:06:28.79,0:06:31.25,Default,,0000,0000,0000,,en un objeto de evento que podrías usar también.
Dialogue: 0,0:06:31.25,0:06:35.35,Default,,0000,0000,0000,,Yo creo que las más utilizadas son las relacionadas con el teclado.
Dialogue: 0,0:06:35.35,0:06:38.11,Default,,0000,0000,0000,,Entonces podrías descubrir cuáles teclas está presionando el usuario
Dialogue: 0,0:06:38.11,0:06:40.54,Default,,0000,0000,0000,,cuando sucede un evento, y usar eso para hacer una
Dialogue: 0,0:06:40.54,0:06:44.35,Default,,0000,0000,0000,,interfaz de teclado o en realidad un juego muy divertido.
Dialogue: 0,0:06:44.35,0:06:47.21,Default,,0000,0000,0000,,Oh, una cosa más:
Dialogue: 0,0:06:47.21,0:06:49.70,Default,,0000,0000,0000,,no tienes que llamar "e" a este argumento forzosamente.
Dialogue: 0,0:06:49.70,0:06:57.31,Default,,0000,0000,0000,,Típicamente se hace, pero algunos desarrolladores lo llaman "evt" o "event".
Dialogue: 0,0:06:57.31,0:07:00.60,Default,,0000,0000,0000,,No importa cómo lo llames, siempre y cuando se esté refiriendo
Dialogue: 0,0:07:00.60,0:07:03.70,Default,,0000,0000,0000,,al primer argumento que el navegador pasa en tu función,
Dialogue: 0,0:07:03.70,0:07:09.48,Default,,0000,0000,0000,,y siempre y cuando tú te refieras a él más tarde de la misma manera.
Dialogue: 0,0:07:09.48,0:07:13.28,Default,,0000,0000,0000,,Si tienes problemas con esto, asegúrate de usar " console.log"
Dialogue: 0,0:07:13.28,0:07:15.64,Default,,0000,0000,0000,,para ayudarte a depurar lo que está pasando.
Dialogue: 0,0:07:15.64,0:07:17.24,Default,,0000,0000,0000,,Cuando eres un desarrollador web,
Dialogue: 0,0:07:17.25,0:07:21.46,Default,,0000,0000,0000,,la consola es por mucho tu mejor amiga, ¡úsala!