[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.97,0:00:03.100,Default,,0000,0000,0000,,Buenos, vamos a hacer un programa.
Dialogue: 0,0:00:03.100,0:00:06.16,Default,,0000,0000,0000,,Comenzaremos completamente en blanco y al finalizar
Dialogue: 0,0:00:06.16,0:00:08.80,Default,,0000,0000,0000,,será fabuloso,\Ncomo un mini programa de dibujo.
Dialogue: 0,0:00:08.80,0:00:10.86,Default,,0000,0000,0000,,Piensa en esto, como si fuera un... ,\Ncon las primeras lecciones en Khan Academy.
Dialogue: 0,0:00:10.86,0:00:14.81,Default,,0000,0000,0000,,Sólo para que tengas una idea de lo que es posible.\N
Dialogue: 0,0:00:14.81,0:00:18.53,Default,,0000,0000,0000,,No te preocupes por entender cada pequeño detalle ahora mismo.
Dialogue: 0,0:00:18.81,0:00:21.46,Default,,0000,0000,0000,,Sólo queremos darte una idea de lo que viene más adelante y del tipo de programas
Dialogue: 0,0:00:21.61,0:00:23.54,Default,,0000,0000,0000,,que serás capaz de hacer en poco tiempo.\N
Dialogue: 0,0:00:23.65,0:00:26.17,Default,,0000,0000,0000,,Entonces... Ahora no hay nada aquí, lo que es un poco aburrido.
Dialogue: 0,0:00:26.33,0:00:29.20,Default,,0000,0000,0000,,así que dibujemos algo.\NQuiero dibujar una elipse,
Dialogue: 0,0:00:29.26,0:00:30.99,Default,,0000,0000,0000,,que es similar a un círculo
Dialogue: 0,0:00:30.99,0:00:33.25,Default,,0000,0000,0000,,y como aprenderás,\Nasí es cómo hago esto...
Dialogue: 0,0:00:33.25,0:00:36.03,Default,,0000,0000,0000,,...y allí está. Casi mágico.\NLa razón es que
Dialogue: 0,0:00:36.03,0:00:39.20,Default,,0000,0000,0000,,hay unas cuantas cosas especiales\Nque el entorno de Khan Academy ya sabe
Dialogue: 0,0:00:39.20,0:00:42.64,Default,,0000,0000,0000,,y por suerte, la elipse es una de ellas.\NNo te preocupes
Dialogue: 0,0:00:42.64,0:00:44.62,Default,,0000,0000,0000,,por el significado de todos estos números.
Dialogue: 0,0:00:44.83,0:00:48.58,Default,,0000,0000,0000,,Ya lo aprenderás en "Intro to drawing".\NIgualmente, aquí tienes un avance.
Dialogue: 0,0:00:48.58,0:00:53.41,Default,,0000,0000,0000,,Al cambiar los números, podemos ver que el primero, básicamente significa, cuán lejos a lo largo.
Dialogue: 0,0:00:53.46,0:00:57.16,Default,,0000,0000,0000,,El segundo, significa cuán lejos a lo alto.
Dialogue: 0,0:00:57.16,0:01:01.11,Default,,0000,0000,0000,,El tercero, parece significar cuán grande a lo largo.
Dialogue: 0,0:01:01.11,0:01:04.14,Default,,0000,0000,0000,,Y el último, cuán grande a lo alto.
Dialogue: 0,0:01:04.14,0:01:09.97,Default,,0000,0000,0000,,De nuevo, no necesitas saber eso ahora mismo, pero puede pausar este video y jugar tú mismo.
Dialogue: 0,0:01:09.97,0:01:13.83,Default,,0000,0000,0000,,Aprenderás todos los detalles en las siguientes lecciones. Y lo importante por ahora,
Dialogue: 0,0:01:13.83,0:01:16.70,Default,,0000,0000,0000,,es que controlan cómo se ve la forma.
Dialogue: 0,0:01:16.70,0:01:20.08,Default,,0000,0000,0000,,Bueno, muy lindo, pero quizás no estés muy impresionado.
Dialogue: 0,0:01:20.08,0:01:23.25,Default,,0000,0000,0000,,Así que voy a hacer algo que parece un poco más complicado
Dialogue: 0,0:01:23.25,0:01:25.94,Default,,0000,0000,0000,,y luego poner la elipse que hicimos, adentro.
Dialogue: 0,0:01:26.21,0:01:29.14,Default,,0000,0000,0000,,Bien, entonces... no cambió nada.
Dialogue: 0,0:01:29.14,0:01:31.54,Default,,0000,0000,0000,,Y probablemente, sigas sin estar muy impresionado.
Dialogue: 0,0:01:31.54,0:01:35.03,Default,,0000,0000,0000,,Pero ahora voy a hacer que la salida del programa sea un poco más impresionante.
Dialogue: 0,0:01:35.03,0:01:36.96,Default,,0000,0000,0000,,Hagamos este programa, animado.
Dialogue: 0,0:01:36.96,0:01:41.06,Default,,0000,0000,0000,,Y como ahora podés ver hay muchos círculos y en realidad, están siguiendo mi mouse
Dialogue: 0,0:01:41.06,0:01:45.54,Default,,0000,0000,0000,,mientras lo muevo. Puedes pausar el programa ahora mismo y hacer que siga tu mouse
Dialogue: 0,0:01:46.60,0:01:49.08,Default,,0000,0000,0000,,Ok. ¿Cómo es que esto está pasando?
Dialogue: 0,0:01:49.08,0:01:51.42,Default,,0000,0000,0000,,¿De dónde salen todos esos círculos?\N
Dialogue: 0,0:01:51.42,0:01:54.26,Default,,0000,0000,0000,,Bueno, vas a aprender todo esto en "Introduction to a animation" luego.
Dialogue: 0,0:01:54.26,0:01:56.60,Default,,0000,0000,0000,,Pero si tienes la duda, lo que está pasando, es que
Dialogue: 0,0:01:56.60,0:02:00.08,Default,,0000,0000,0000,,la computadora le dice a nuestro programa automáticamente, una y otra y otra vez:
Dialogue: 0,0:02:00.08,0:02:02.61,Default,,0000,0000,0000,,"Dibuja, dibuja, dibuja, dibuja".
Dialogue: 0,0:02:02.61,0:02:06.04,Default,,0000,0000,0000,,Y quizás piense que nuestro programa podría cansarse pero en lugar de ello,
Dialogue: 0,0:02:06.04,0:02:10.16,Default,,0000,0000,0000,,...sigue haciendo lo que está dentro de esta parte mágica llamada "draw".
Dialogue: 0,0:02:10.16,0:02:13.42,Default,,0000,0000,0000,,Sólo sigue intentando elipse, tras elipse, tras elipse y eso es
Dialogue: 0,0:02:13.42,0:02:17.91,Default,,0000,0000,0000,,lo que está ocurriendo detrás de escena cuando movemos nuestro mouse.
Dialogue: 0,0:02:17.91,0:02:21.16,Default,,0000,0000,0000,,...para hacer tantas elipses, aunque sólo lo hemos escrito una vez.
Dialogue: 0,0:02:21.16,0:02:24.54,Default,,0000,0000,0000,,¿Cómo sabe el programa dónde dibujar la elipse?
Dialogue: 0,0:02:24.54,0:02:27.08,Default,,0000,0000,0000,,Por ejemplo, ¿cómo sabe dibujar siguiendo el mouse?
Dialogue: 0,0:02:27.91,0:02:31.08,Default,,0000,0000,0000,,Bueno, aprenderás eso en "Mouse interaction" más adelante.
Dialogue: 0,0:02:31.08,0:02:34.84,Default,,0000,0000,0000,,La idea es que cada vez, la computadora también le dice a nuestro programa dónde esta el mouse
Dialogue: 0,0:02:34.94,0:02:38.38,Default,,0000,0000,0000,,utilizando estas dos palabras "mouse...".\NmouseX y MouseY.
Dialogue: 0,0:02:38.38,0:02:42.97,Default,,0000,0000,0000,,No necesitas saber acerca de ellas por ahora pero mouseX indica cuán lejos está el mouse a lo largo,
Dialogue: 0,0:02:42.97,0:02:45.94,Default,,0000,0000,0000,,mientras que mouseY es cuán lejos a lo alto.
Dialogue: 0,0:02:45.94,0:02:47.70,Default,,0000,0000,0000,,Entonces, sólo para recapitular, cuando hacemos esta elipse,
Dialogue: 0,0:02:47.70,0:02:51.28,Default,,0000,0000,0000,,lo que estamos diciendo es "dibuja la elipse tan lejos a lo largo...
Dialogue: 0,0:02:51.28,0:02:53.25,Default,,0000,0000,0000,,... como lejos esté el mouse a lo largo".
Dialogue: 0,0:02:53.25,0:02:55.44,Default,,0000,0000,0000,,Y la segunda dice "dibuja el mouse tan lejos a lo alto...
Dialogue: 0,0:02:55.44,0:02:57.75,Default,,0000,0000,0000,,como el mouse esté a lo alto".
Dialogue: 0,0:02:57.75,0:03:00.96,Default,,0000,0000,0000,,Y lo que termina significando es "dibuja la elipse exactamente en el mismo lugar donde esté el mouse,
Dialogue: 0,0:03:00.96,0:03:04.00,Default,,0000,0000,0000,,cada vez que decimos "draw".
Dialogue: 0,0:03:04.00,0:03:07.77,Default,,0000,0000,0000,,Y luego, estos últimos dos, dicen de qué tamaño debería ser la elipse.
Dialogue: 0,0:03:07.77,0:03:10.54,Default,,0000,0000,0000,,De nuevo, no te preocupes por todos estos detalles, por ahora.
Dialogue: 0,0:03:10.54,0:03:14.00,Default,,0000,0000,0000,,Luego de que sigas con las próximas lecciones, todo esto tendrá más sentido.
Dialogue: 0,0:03:14.00,0:03:16.70,Default,,0000,0000,0000,,Y ahora, como verás, esto se está tornando un poco sucio,
Dialogue: 0,0:03:17.07,0:03:22.09,Default,,0000,0000,0000,,y podemos hacer click... en el botón "restart"\Npara comenzar el programa nuevamente, en blanco.
Dialogue: 0,0:03:22.09,0:03:26.71,Default,,0000,0000,0000,,Ve y pausa el programa ahora mismo, y juega tú mismo sólo para saber qué está pasando.
Dialogue: 0,0:03:29.95,0:03:33.33,Default,,0000,0000,0000,,Entonces ahora que tenemos algo lindo pasando, ¿Qué más podemos hacer?
Dialogue: 0,0:03:33.33,0:03:37.100,Default,,0000,0000,0000,,Bueno, estos círculos son un poco feos...\NSólo son blancos...
Dialogue: 0,0:03:37.100,0:03:40.08,Default,,0000,0000,0000,,¿Qué tal si pudiéramos hacerlos de color?
Dialogue: 0,0:03:40.08,0:03:42.25,Default,,0000,0000,0000,,Hay un tutorial completo de "Intro to color"
Dialogue: 0,0:03:42.25,0:03:44.73,Default,,0000,0000,0000,,en donde aprenderemos todo acerca de colores, pero te voy a arruinar el secreto
Dialogue: 0,0:03:44.73,0:03:47.66,Default,,0000,0000,0000,,y mostrarte cómo hacerlo ahora mismo.
Dialogue: 0,0:03:47.79,0:03:48.99,Default,,0000,0000,0000,,¡Ta-dá!
Dialogue: 0,0:03:48.99,0:03:52.83,Default,,0000,0000,0000,,Ahora tienes círculos rojos siguiendo el mouse pero no tiene por qué ser sólo rojos,
Dialogue: 0,0:03:52.83,0:03:56.37,Default,,0000,0000,0000,,porque cuando haces click en el color aquí, puede ver tú mismo, cuando lo haces
Dialogue: 0,0:03:56.37,0:03:59.97,Default,,0000,0000,0000,,que puede escoger cualquier color que te guste, un arcoiris completo de colores...
Dialogue: 0,0:03:59.97,0:04:03.13,Default,,0000,0000,0000,,Así que, ¿qué tal un lindo púrpura ahora mismo?
Dialogue: 0,0:04:03.13,0:04:07.30,Default,,0000,0000,0000,,Puedes aprender por qué cambian los colores cuando haces esto en "intro to coloring"...
Dialogue: 0,0:04:07.30,0:04:12.13,Default,,0000,0000,0000,,Entonces, cuando clickeamos en "restart" sólo tenemos círculos púrpura...
Dialogue: 0,0:04:12.13,0:04:16.08,Default,,0000,0000,0000,,Entonces, podríamos pensar "ponemos todo este trabajo...
Dialogue: 0,0:04:16.08,0:04:19.42,Default,,0000,0000,0000,,... para dibujar estas lindas formas cuando movemos el mouse"
Dialogue: 0,0:04:19.42,0:04:24.100,Default,,0000,0000,0000,,pero sería lindo dibujar sólo a veces, como por ejemplo, sólo cuando el mouse esté apretado.
Dialogue: 0,0:04:24.100,0:04:27.54,Default,,0000,0000,0000,,Y voy a mostrate cómo hacer eso ahora mismo.
Dialogue: 0,0:04:27.54,0:04:31.100,Default,,0000,0000,0000,,Lógicamente, no es complicado. Lo que digo es "si el mouse está apretado...
Dialogue: 0,0:04:31.100,0:04:35.84,Default,,0000,0000,0000,,dibuja el círculo. De lo coontrario, no hagas nada".
Dialogue: 0,0:04:35.84,0:04:38.67,Default,,0000,0000,0000,,Entonces, así es como se ve esto en código.
Dialogue: 0,0:04:38.67,0:04:46.17,Default,,0000,0000,0000,,Decimos "if" y luego estos paréntesis raros (no necesitas preocuparte por esto). Entonces...
Dialogue: 0,0:04:46.17,0:04:48.78,Default,,0000,0000,0000,,Si el mouse está apretado, y luego lo que queremos hacer cuando el mouse esté apretado...
Dialogue: 0,0:04:48.86,0:04:51.54,Default,,0000,0000,0000,,...bueno, sólo queremos dibujar la elipse.
Dialogue: 0,0:04:51.68,0:04:54.14,Default,,0000,0000,0000,,y, de otra manera, no quedemos hacer nada.
Dialogue: 0,0:04:54.23,0:04:58.27,Default,,0000,0000,0000,,Así que dejaremos esta parte aquí en blanco. Así que cuando apretamos "restart"
Dialogue: 0,0:04:58.27,0:05:02.08,Default,,0000,0000,0000,,podemos decir "muevo el mouse y no pasa nada, pero cuando apreto el mouse...
Dialogue: 0,0:05:02.08,0:05:06.21,Default,,0000,0000,0000,,... ¡puedo dibujar! en púrpura".
Dialogue: 0,0:05:06.21,0:05:10.34,Default,,0000,0000,0000,,... y escribir cosas y dibujar cosas, y casi hacer lo que quieras...
Dialogue: 0,0:05:10.34,0:05:15.37,Default,,0000,0000,0000,,Es bastante lindo, porque con un par de líneas de código, hicimos este programa de dibujo.
Dialogue: 0,0:05:15.37,0:05:18.47,Default,,0000,0000,0000,,Entonces, todo este tutorial de introducción a sentencias, aprenderemos todo
Dialogue: 0,0:05:18.47,0:05:21.78,Default,,0000,0000,0000,,acerca de lo que hace este código que acabamos de escribir y cómo funciona.
Dialogue: 0,0:05:21.78,0:05:25.44,Default,,0000,0000,0000,,Pero apuesto a que ya estás entendiendo la idea general. Todo lo que estamos diciendo es...
Dialogue: 0,0:05:25.44,0:05:29.11,Default,,0000,0000,0000,,"si el mouse está apretado, haz esto, y de lo contrario, si el mouse no está apretado...
Dialogue: 0,0:05:29.11,0:05:34.17,Default,,0000,0000,0000,,sólo queremos que no haga nada". Cool! Es exactamente la misma lógica que tenemos en mente.
Dialogue: 0,0:05:34.17,0:05:38.25,Default,,0000,0000,0000,,Sólo que la escribimos en código ahora. Y quizás quieras denotar que
Dialogue: 0,0:05:38.25,0:05:41.13,Default,,0000,0000,0000,,¿Qué es ese borde feo en todos los círculos?"
Dialogue: 0,0:05:41.13,0:05:45.42,Default,,0000,0000,0000,,Bueno, aprenderás a controlar eso en breve. Puede hacerlo más grande, más chico,
Dialogue: 0,0:05:45.42,0:05:47.100,Default,,0000,0000,0000,,puedes hacerlo de diferentes colores.
Dialogue: 0,0:05:47.100,0:05:50.17,Default,,0000,0000,0000,,Pero por ahora, honestamente, quiero deshacerme de él.
Dialogue: 0,0:05:50.17,0:05:54.17,Default,,0000,0000,0000,,Así que, Voy a escribir "noStroke()" arriba porque ese pequeño borde se llama "stroke".
Dialogue: 0,0:05:54.17,0:05:58.50,Default,,0000,0000,0000,,y ahora, cuando clickeamos "restart"...\N¡Ey! El borde se fue.
Dialogue: 0,0:05:58.50,0:06:03.26,Default,,0000,0000,0000,,¡Perfecto! \NEsto parece un programa de dibujo más realista.
Dialogue: 0,0:06:03.26,0:06:05.92,Default,,0000,0000,0000,,Entonces, volvamos rápidamente un paso atrás.
Dialogue: 0,0:06:05.92,0:06:11.97,Default,,0000,0000,0000,,Quizás te preguntes: ¿De dónde salen estas habilidades mágicas como el "if" y ellipse() y draw()?
Dialogue: 0,0:06:11.97,0:06:16.90,Default,,0000,0000,0000,,Estos comandos están dentro de Khan Academy. Nosotros hicimos eso.
Dialogue: 0,0:06:16.90,0:06:20.08,Default,,0000,0000,0000,,Y la parte divertida viene al aprender cómo combinarlos para hacer programas.
Dialogue: 0,0:06:20.08,0:06:21.83,Default,,0000,0000,0000,,Si realmente te despierta la curiosidad,
Dialogue: 0,0:06:22.02,0:06:24.39,Default,,0000,0000,0000,,estamos utilizando un lenguaje llamado "javascript" en Khan Academy.
Dialogue: 0,0:06:24.51,0:06:27.60,Default,,0000,0000,0000,,Javascript es una de las maneras más populares de escribir programas en el mundo.
Dialogue: 0,0:06:27.60,0:06:30.80,Default,,0000,0000,0000,,Especialmente en la Internet, así que estarás en buena compañía.
Dialogue: 0,0:06:30.80,0:06:35.61,Default,,0000,0000,0000,,Entoncecs, hicimos este lindo programa de dibujo, pero no quiere decir que esté terminado.
Dialogue: 0,0:06:35.61,0:06:39.04,Default,,0000,0000,0000,,Puede pausar este programa y personalizarlo de la manera en la que te guste.
Dialogue: 0,0:06:39.04,0:06:43.11,Default,,0000,0000,0000,,Puedes cambiar el tamaño del círculo, puede cambiar el color y cuando lo hayas dejado lindo
Dialogue: 0,0:06:43.11,0:06:45.21,Default,,0000,0000,0000,,puede guardarlo como un "spin-off"...
Dialogue: 0,0:06:45.21,0:06:47.83,Default,,0000,0000,0000,,... este botón de aquí abajo...
Dialogue: 0,0:06:47.83,0:06:50.61,Default,,0000,0000,0000,,y mostrarlo a la gente que conoces.
Dialogue: 0,0:06:50.61,0:06:54.83,Default,,0000,0000,0000,,Pero, apuesto a que puedes imaginarte cómo mejorar este programa, de maneras en las que todavía no conoces...
Dialogue: 0,0:06:54.83,0:06:58.83,Default,,0000,0000,0000,,Digamos, más allá de modificar el color y el tamaño. Quizás quiera hacer una linda
Dialogue: 0,0:06:58.83,0:07:03.44,Default,,0000,0000,0000,,animmación con pingüinos o un juego divertido... O quizás algo entretenido para tus amigos
Dialogue: 0,0:07:03.44,0:07:06.50,Default,,0000,0000,0000,,y familia. Bueno, estás en el lugar indicado, porque si te quedas con nosotros,
Dialogue: 0,0:07:06.50,0:07:09.100,Default,,0000,0000,0000,,estás en camino aprender todo eso y más con código.
Dialogue: 0,0:07:09.100,0:07:12.20,Default,,0000,0000,0000,,Así que espero que te haya parecido entretenido.
Dialogue: 0,0:07:14.83,0:07:18.17,Default,,0000,0000,0000,,Hacer este lindo programa de dibujo, sólo nos llevó unos cuantos minutos
Dialogue: 0,0:07:18.17,0:07:21.07,Default,,0000,0000,0000,,pero aprenderemos un poco más acerca de cómo funciona el código.
Dialogue: 0,0:07:21.07,0:07:23.48,Default,,0000,0000,0000,,Las siguientes lecciones son acerca de incursionar en algo más profundo
Dialogue: 0,0:07:23.51,0:07:25.44,Default,,0000,0000,0000,,y aprender exactamente lo que hicimos aquí.
Dialogue: 0,0:07:25.60,0:07:27.80,Default,,0000,0000,0000,,Para que no parezca tan misterioso.
Dialogue: 0,0:07:27.80,0:07:30.83,Default,,0000,0000,0000,,Comenzaremos desde el principio y a lo largo de los conceptos básicos.
Dialogue: 0,0:07:30.83,0:07:32.77,Default,,0000,0000,0000,,Y en poco tiempo, lo creas o no,
Dialogue: 0,0:07:32.77,0:07:36.92,Default,,0000,0000,0000,,no será gran cosa. De hecho, si continúas, pronto seráz capaz de hacer cosas
Dialogue: 0,0:07:36.92,0:07:40.92,Default,,0000,0000,0000,,bastante avanzadas con respecto a este programa.