[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.35,0:00:03.72,Default,,0000,0000,0000,,Regresamos con nuestro contador regresivo de "Oh noes",
Dialogue: 0,0:00:03.72,0:00:07.14,Default,,0000,0000,0000,,¿Y si queremos que el chico "Oh noes" sea más grande,
Dialogue: 0,0:00:07.14,0:00:09.52,Default,,0000,0000,0000,,mientras el contador regresivo se acerca a cero?
Dialogue: 0,0:00:09.52,0:00:12.78,Default,,0000,0000,0000,,Para que parezca que se acerca más a una muerte inminente.
Dialogue: 0,0:00:12.78,0:00:20.40,Default,,0000,0000,0000,,Una manera de hacer esto es animar los estilos de CSS con "window.setInterval".
Dialogue: 0,0:00:20.40,0:00:24.92,Default,,0000,0000,0000,,Como primer paso debo encontrar la imagen, y almacenarla en una variable.
Dialogue: 0,0:00:24.93,0:00:31.94,Default,,0000,0000,0000,,'var ohnoes = document.getElementById("ohnoes");'
Dialogue: 0,0:00:31.94,0:00:36.74,Default,,0000,0000,0000,,Y voy a configurar el tamaño inicial, porque tiene que empezar con algún tamaño,
Dialogue: 0,0:00:36.74,0:00:39.52,Default,,0000,0000,0000,,de esa manera tenemos un tamaño desde el que empezamos a hacerlo más grande.
Dialogue: 0,0:00:39.52,0:00:44.34,Default,,0000,0000,0000,,Y ahora voy a escribir la función "makeItBigger",
Dialogue: 0,0:00:44.34,0:00:48.26,Default,,0000,0000,0000,,que será la función responsable de hacerlo más grande cada vez.
Dialogue: 0,0:00:48.26,0:00:52.72,Default,,0000,0000,0000,,Y aquí necesitamos cambiar "style.width",
Dialogue: 0,0:00:52.72,0:00:59.96,Default,,0000,0000,0000,,y al "style.width" anterior debemos sumarle 1.
Dialogue: 0,0:00:59.96,0:01:04.58,Default,,0000,0000,0000,,Finalmente, vamos a llamar "setInterval" con esta función.
Dialogue: 0,0:01:04.58,0:01:07.86,Default,,0000,0000,0000,,"window.setInterval(makeItBigger);",
Dialogue: 0,0:01:07.86,0:01:10.16,Default,,0000,0000,0000,,y ¿hasta qué tamaño queremos que crezca?,
Dialogue: 0,0:01:10.16,0:01:12.24,Default,,0000,0000,0000,,o ¿cada cuánto queremos hacerlo más grande?
Dialogue: 0,0:01:12.24,0:01:14.21,Default,,0000,0000,0000,,Bueno, queremos una animación fluida,
Dialogue: 0,0:01:14.21,0:01:15.98,Default,,0000,0000,0000,,lo que significa que generalmente debe ser entre
Dialogue: 0,0:01:15.98,0:01:18.80,Default,,0000,0000,0000,,24 cuadros por segundo y 60 cuadros por segundo.
Dialogue: 0,0:01:18.80,0:01:25.56,Default,,0000,0000,0000,,Voy a probar con 30 cuadros por segundo, que es 1000 entre 30.
Dialogue: 0,0:01:25.56,0:01:28.73,Default,,0000,0000,0000,,Mmm, ok, no está funcionando.
Dialogue: 0,0:01:28.73,0:01:31.25,Default,,0000,0000,0000,,¿Ves por qué? Es un poco complicado.
Dialogue: 0,0:01:31.25,0:01:34.30,Default,,0000,0000,0000,,Vamos aquí, a pensar un poco en este código.
Dialogue: 0,0:01:34.30,0:01:39.21,Default,,0000,0000,0000,,¿Cuál es el valor de "ohnoes.style.width",
Dialogue: 0,0:01:39.21,0:01:41.44,Default,,0000,0000,0000,,después de esta línea que está aquí?
Dialogue: 0,0:01:41.44,0:01:45.82,Default,,0000,0000,0000,,Bueno, podrías pensar que 50px pasa a ser 51px,
Dialogue: 0,0:01:45.82,0:01:50.18,Default,,0000,0000,0000,,pero vamos a anotar el resultado de "ohnoes.style.width" para ver cuál es el valor.
Dialogue: 0,0:01:50.18,0:01:53.01,Default,,0000,0000,0000,,Vamos a usar "infoDiv" para poner aquí el resultado.
Dialogue: 0,0:01:53.01,0:01:58.35,Default,,0000,0000,0000,,Así que esto es igual a..., vamos a ver,
Dialogue: 0,0:01:58.35,0:02:00.37,Default,,0000,0000,0000,,50px, ok.
Dialogue: 0,0:02:00.37,0:02:05.44,Default,,0000,0000,0000,,Y luego, tratemos de sumar 1 a 50px.
Dialogue: 0,0:02:05.46,0:02:07.74,Default,,0000,0000,0000,,¿Cuánto es 50px más 1?
Dialogue: 0,0:02:07.74,0:02:11.43,Default,,0000,0000,0000,,Probablemente digas que son 51px, pero JavaScript
Dialogue: 0,0:02:11.43,0:02:15.81,Default,,0000,0000,0000,,piensa en 50px como una cadena de caracteres,
Dialogue: 0,0:02:15.82,0:02:20.36,Default,,0000,0000,0000,,así que en realidad esto es igual a "50px1",
Dialogue: 0,0:02:20.36,0:02:22.62,Default,,0000,0000,0000,,lo que en realidad no tiene sentido.
Dialogue: 0,0:02:22.62,0:02:25.85,Default,,0000,0000,0000,,Así que probablemente el navegador esté ignorando nuestro intento
Dialogue: 0,0:02:25.85,0:02:29.71,Default,,0000,0000,0000,,de igualar la propiedad "width" a este valor que no tiene sentido.
Dialogue: 0,0:02:29.71,0:02:33.70,Default,,0000,0000,0000,,Lo que tenemos que hacer en convertir este número que tiene una unidad,
Dialogue: 0,0:02:33.70,0:02:35.70,Default,,0000,0000,0000,,a un número simplemente,
Dialogue: 0,0:02:35.70,0:02:37.76,Default,,0000,0000,0000,,luego sumar 1 a ese número,
Dialogue: 0,0:02:37.76,0:02:40.94,Default,,0000,0000,0000,,y luego añadirle "px" nuevamente.
Dialogue: 0,0:02:40.96,0:02:45.46,Default,,0000,0000,0000,,Podemos hacer esto encerrando este código en "parseFloat",
Dialogue: 0,0:02:45.46,0:02:47.44,Default,,0000,0000,0000,,lo que convierte esto en un número.
Dialogue: 0,0:02:47.44,0:02:49.97,Default,,0000,0000,0000,,Luego encerramos todo esto,
Dialogue: 0,0:02:49.97,0:02:53.14,Default,,0000,0000,0000,,y le sumamos "px" al final.
Dialogue: 0,0:02:53.14,0:02:56.66,Default,,0000,0000,0000,,¡Woo! ¡Está funcionando! ¡Se está haciendo grande!
Dialogue: 0,0:02:56.66,0:02:58.02,Default,,0000,0000,0000,,Muy bien.
Dialogue: 0,0:02:58.02,0:02:59.53,Default,,0000,0000,0000,,Ahora puedes ver la parte difícil
Dialogue: 0,0:02:59.53,0:03:01.20,Default,,0000,0000,0000,,en las animaciones de las propiedades de CSS.
Dialogue: 0,0:03:01.20,0:03:03.65,Default,,0000,0000,0000,,Muchas veces tienen las unidades incluidas, así que
Dialogue: 0,0:03:03.65,0:03:06.30,Default,,0000,0000,0000,,tienes que usar "parseFloat" para quitar las unidades --- ¡Oh Dios mío se está haciendo más grande!
Dialogue: 0,0:03:06.30,0:03:10.75,Default,,0000,0000,0000,,Tienes que quitar las unidades y luego volverlas a incluir.
Dialogue: 0,0:03:10.75,0:03:14.27,Default,,0000,0000,0000,,Ok, pero, se está haciendo realmente espantoso;
Dialogue: 0,0:03:14.27,0:03:17.61,Default,,0000,0000,0000,,y en realidad, hay algunas cosas que dan miedo,
Dialogue: 0,0:03:17.61,0:03:21.32,Default,,0000,0000,0000,,cuando usas "setInterval", para animar las propiedades de CSS.
Dialogue: 0,0:03:21.32,0:03:24.33,Default,,0000,0000,0000,,En primer lugar, el navegador no te garantiza que
Dialogue: 0,0:03:24.33,0:03:28.46,Default,,0000,0000,0000,,obedecerá este retraso que tenemos aquí.
Dialogue: 0,0:03:28.46,0:03:31.70,Default,,0000,0000,0000,,Si se presentan otras cosas como la interacción del usuario,
Dialogue: 0,0:03:31.70,0:03:36.03,Default,,0000,0000,0000,,como cuando el usuario teclea algo, entonces tendrás que llamar a la función "callback" más tarde.
Dialogue: 0,0:03:36.03,0:03:38.50,Default,,0000,0000,0000,,Y entonces no tendrás esta animación suave.
Dialogue: 0,0:03:38.50,0:03:41.29,Default,,0000,0000,0000,,En segundo lugar, el navegador llamará a tu función
Dialogue: 0,0:03:41.29,0:03:43.26,Default,,0000,0000,0000,,aún si esto está oculto,
Dialogue: 0,0:03:43.26,0:03:48.12,Default,,0000,0000,0000,,lo que usará capacidad de procesamiento de la computadora innecesariamente.
Dialogue: 0,0:03:48.12,0:03:50.20,Default,,0000,0000,0000,,Por eso hay una función nueva,
Dialogue: 0,0:03:50.20,0:03:51.80,Default,,0000,0000,0000,,disponible en los navegadores modernos
Dialogue: 0,0:03:51.80,0:03:55.28,Default,,0000,0000,0000,,diseñada específicamente pensando en animaciones del DOM,
Dialogue: 0,0:03:55.28,0:03:59.13,Default,,0000,0000,0000,,y esta función se llama "window.requestAnimationFrame".
Dialogue: 0,0:03:59.15,0:04:03.40,Default,,0000,0000,0000,,Para usarla, nos tenemos que deshacer de esta línea que tiene "setInterval".
Dialogue: 0,0:04:03.40,0:04:08.11,Default,,0000,0000,0000,,Y llamar "requestAnimationFrame"
Dialogue: 0,0:04:08.11,0:04:11.56,Default,,0000,0000,0000,,desde el interior de la función,
Dialogue: 0,0:04:11.56,0:04:14.96,Default,,0000,0000,0000,,y en realidad le daremos una referencia
Dialogue: 0,0:04:14.96,0:04:18.93,Default,,0000,0000,0000,,a la función "makeItBigger".
Dialogue: 0,0:04:18.93,0:04:25.38,Default,,0000,0000,0000,,Entonces llamaremos a la función cuando la página se carga.
Dialogue: 0,0:04:25.38,0:04:27.40,Default,,0000,0000,0000,,"makeItBigger();"
Dialogue: 0,0:04:27.40,0:04:31.21,Default,,0000,0000,0000,,¡Oh! ¡Muy bien, se está haciendo grande muy rápido esta vez!
Dialogue: 0,0:04:31.21,0:04:34.52,Default,,0000,0000,0000,,Ahora el navegador está llamando a la función "makeItBigger" justo antes
Dialogue: 0,0:04:34.52,0:04:37.90,Default,,0000,0000,0000,,de que se repinte, lo que sucede cerca de 60 cuadros por segundo,
Dialogue: 0,0:04:37.90,0:04:40.20,Default,,0000,0000,0000,,el doble de lo que teníamos antes.
Dialogue: 0,0:04:40.20,0:04:43.10,Default,,0000,0000,0000,,Y estamos añadiendo un pixel a la anchura cada vez.
Dialogue: 0,0:04:43.10,0:04:45.96,Default,,0000,0000,0000,,Así que si hacemos el cálculo matemático, y somos geniales en matemáticas aquí,
Dialogue: 0,0:04:45.96,0:04:47.91,Default,,0000,0000,0000,,estamos añadiendo 60 pixeles por segundo.
Dialogue: 0,0:04:47.91,0:04:50.96,Default,,0000,0000,0000,,En sólo pocos segundos crece hasta ser más grande que la página.
Dialogue: 0,0:04:50.96,0:04:53.16,Default,,0000,0000,0000,,Ahora ya no se ve.
Dialogue: 0,0:04:53.16,0:04:56.05,Default,,0000,0000,0000,,¿Cómo hacemos que nuestra animación corra más despacio?
Dialogue: 0,0:04:56.05,0:04:58.47,Default,,0000,0000,0000,,Hay varias maneras, pero una que me gusta
Dialogue: 0,0:04:58.47,0:05:01.05,Default,,0000,0000,0000,,es hacer un seguimiento de cuánto tiempo ha transcurrido,
Dialogue: 0,0:05:01.05,0:05:03.70,Default,,0000,0000,0000,,y luego basados en eso, calcular cuál debería ser
Dialogue: 0,0:05:03.70,0:05:04.91,Default,,0000,0000,0000,,la nueva anchura.
Dialogue: 0,0:05:04.91,0:05:08.84,Default,,0000,0000,0000,,Empezamos por recordar el tiempo inicial, en milisegundos,
Dialogue: 0,0:05:08.84,0:05:10.84,Default,,0000,0000,0000,,antes de llamar a la función.
Dialogue: 0,0:05:10.84,0:05:14.72,Default,,0000,0000,0000,,"var startTime...", ¡Oh!, se sigue haciendo grande otra vez.
Dialogue: 0,0:05:14.72,0:05:17.16,Default,,0000,0000,0000,,"new Date().getTime();"
Dialogue: 0,0:05:17.16,0:05:20.76,Default,,0000,0000,0000,,Y luego dentro de la función "makeItBigger", guardamos el tiempo actual.
Dialogue: 0,0:05:20.76,0:05:26.56,Default,,0000,0000,0000,,"var currentTime = new Date().getTime(),"
Dialogue: 0,0:05:26.57,0:05:28.72,Default,,0000,0000,0000,,Y para hacer el cálculo,
Dialogue: 0,0:05:28.72,0:05:31.66,Default,,0000,0000,0000,,digamos que queremos que crezca 30 pixeles por segundo,
Dialogue: 0,0:05:31.66,0:05:34.09,Default,,0000,0000,0000,,y que empiece en 50 pixeles.
Dialogue: 0,0:05:34.09,0:05:37.64,Default,,0000,0000,0000,,Así que vamos a calcular esto aquí.
Dialogue: 0,0:05:37.64,0:05:44.38,Default,,0000,0000,0000,,Entonces "... newWidth = 50 ", nuestra anchura de inicio,
Dialogue: 0,0:05:44.38,0:05:49.17,Default,,0000,0000,0000,,más el tiempo actual, menos el tiempo inicial,
Dialogue: 0,0:05:49.17,0:05:50.96,Default,,0000,0000,0000,,todo esto está en milisegundos así que tenemos que
Dialogue: 0,0:05:50.96,0:05:53.28,Default,,0000,0000,0000,,dividir esto entre 1000,
Dialogue: 0,0:05:53.28,0:05:57.28,Default,,0000,0000,0000,,y luego multiplicar todo por 30.
Dialogue: 0,0:05:57.28,0:06:00.10,Default,,0000,0000,0000,,Porque queremos que aumente 30 pixeles por segundo.
Dialogue: 0,0:06:00.10,0:06:03.49,Default,,0000,0000,0000,,Ok, así que ésta es nuestra "newWidth", nueva anchura,
Dialogue: 0,0:06:03.49,0:06:09.92,Default,,0000,0000,0000,,y ahora, vamos a configurar "style.width" con esta nueva anchura.
Dialogue: 0,0:06:09.92,0:06:14.02,Default,,0000,0000,0000,,Entonces... "newWidth", ¡Ah! aquí vamos.
Dialogue: 0,0:06:14.02,0:06:19.40,Default,,0000,0000,0000,,Es una linda y suave animación de 30 pixeles por segundo.
Dialogue: 0,0:06:19.40,0:06:23.22,Default,,0000,0000,0000,,Y podemos cambiar este número, si queremos
Dialogue: 0,0:06:23.22,0:06:30.75,Default,,0000,0000,0000,,que crezca más despacio o más rápido.
Dialogue: 0,0:06:30.75,0:06:34.36,Default,,0000,0000,0000,,¿Y si detenemos la animación cuando llegue a ser demasiado grande?
Dialogue: 0,0:06:34.36,0:06:37.82,Default,,0000,0000,0000,,Podemos meter esta línea en un "if",
Dialogue: 0,0:06:37.82,0:06:41.24,Default,,0000,0000,0000,,esta línea de aquí, y sólo ejecutarla
Dialogue: 0,0:06:41.24,0:06:45.09,Default,,0000,0000,0000,,si "currentWidth" es menor que algún número,
Dialogue: 0,0:06:45.09,0:06:49.53,Default,,0000,0000,0000,,por ejemplo 300, vamos a probar esto.
Dialogue: 0,0:06:50.98,0:06:53.12,Default,,0000,0000,0000,,Ok.
Dialogue: 0,0:06:54.32,0:06:58.89,Default,,0000,0000,0000,,En realidad "currentWidth" es igual a... No, debe ser "newWidth".
Dialogue: 0,0:06:58.89,0:07:01.53,Default,,0000,0000,0000,,Ok, vamos a ver si llega a 300.
Dialogue: 0,0:07:01.53,0:07:06.44,Default,,0000,0000,0000,,Tu tu tu, tu tu tu tu. ¡Vamos "Oh noes", tú puedes hacerlo!
Dialogue: 0,0:07:07.60,0:07:08.94,Default,,0000,0000,0000,,¡Ah! ¡Hermoso!
Dialogue: 0,0:07:08.94,0:07:12.58,Default,,0000,0000,0000,,Ahora, esta técnica que usa "requestAnimationFrame"
Dialogue: 0,0:07:12.58,0:07:15.33,Default,,0000,0000,0000,,debe funcionar siempre y cuando el usuario tenga Chrome,
Dialogue: 0,0:07:15.33,0:07:18.48,Default,,0000,0000,0000,,Firefox o IE10+.
Dialogue: 0,0:07:18.48,0:07:21.75,Default,,0000,0000,0000,,Hay diversas librarías de JavaScript y "shims",
Dialogue: 0,0:07:21.75,0:07:25.22,Default,,0000,0000,0000,,que usarán "requestAnimationFrame" cuando esté disponible,
Dialogue: 0,0:07:25.22,0:07:30.10,Default,,0000,0000,0000,,y luego retroceder a "setInterval" en los navegadores anteriores.
Dialogue: 0,0:07:30.10,0:07:32.33,Default,,0000,0000,0000,,Éste es un punto importante en el desarrollo web:
Dialogue: 0,0:07:32.33,0:07:34.71,Default,,0000,0000,0000,,La web está cambiando todo el tiempo,
Dialogue: 0,0:07:34.71,0:07:36.40,Default,,0000,0000,0000,,los navegadores van teniendo nuevas características,
Dialogue: 0,0:07:36.40,0:07:40.12,Default,,0000,0000,0000,,y los desarrolladores están descubriendo nuevas formas de usar esas características.
Dialogue: 0,0:07:40.12,0:07:43.70,Default,,0000,0000,0000,,Debes estar aprendiendo constantemente sobre las cosas nuevas,
Dialogue: 0,0:07:43.70,0:07:46.58,Default,,0000,0000,0000,,y qué es lo mejor para lo que quieres hacer.