[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.82,Default,,0000,0000,0000,,Empecemos a programar.
Dialogue: 0,0:00:02.82,0:00:05.64,Default,,0000,0000,0000,,Necesitamos comenzar entendiendo formas, los conceptos básicos.
Dialogue: 0,0:00:05.64,0:00:07.80,Default,,0000,0000,0000,,Pero no te preocupes, en breve, tus formas estarán volando por la pantalla y cambiando el color
Dialogue: 0,0:00:07.80,0:00:10.80,Default,,0000,0000,0000,,y haciendo todo tipo de cosas de programación entretenidas.
Dialogue: 0,0:00:10.80,0:00:12.77,Default,,0000,0000,0000,,Sólo ¡quédate con nosotros!
Dialogue: 0,0:00:12.77,0:00:14.64,Default,,0000,0000,0000,,Así que comencemos a dibujar rectángulos.
Dialogue: 0,0:00:14.64,0:00:20.87,Default,,0000,0000,0000,,Escribimos rect() por rectángulo, luego abrimos paréntesis, y luego cuatro números y explicaré qué significan en un rato.
Dialogue: 0,0:00:20.87,0:00:23.94,Default,,0000,0000,0000,,...luego cerramos los paréntesis, y al final ponemos punto y coma.
Dialogue: 0,0:00:23.94,0:00:26.00,Default,,0000,0000,0000,,Mira, asombroso, ¡un rectángulo!
Dialogue: 0,0:00:26.00,0:00:29.67,Default,,0000,0000,0000,,Y eso fue tan simple, así que hagámoslo de nuevo. Podemos probar diferentes números esta vez.
Dialogue: 0,0:00:29.67,0:00:36.17,Default,,0000,0000,0000,,Quizás números más grandes, y luego números más chicos al final, y ¡ey!, mira, otro rectángulo.
Dialogue: 0,0:00:36.17,0:00:41.00,Default,,0000,0000,0000,,De hecho, si intentamos cambiar este primer número para hacerlo más pequeño, se empezará a mover.
Dialogue: 0,0:00:41.00,0:00:44.97,Default,,0000,0000,0000,,Si cambiamos este último número para hacerlo más grande y luego más pequeño,
Dialogue: 0,0:00:44.97,0:00:47.97,Default,,0000,0000,0000,,entonces sólo crecerá y luego se achicará. Interesante.
Dialogue: 0,0:00:47.97,0:00:51.88,Default,,0000,0000,0000,,Entonces, probablemente te preguntarás: ¿Cómo es que está pasando toda esta magia?
Dialogue: 0,0:00:51.88,0:00:55.51,Default,,0000,0000,0000,,Bueno, recuerda que tu computadora es como un perro realmente inteligente y obediente.
Dialogue: 0,0:00:55.51,0:00:59.98,Default,,0000,0000,0000,,A un perro, quizás podamos decirle que se siente, se quede quieto, o incluso ruede sobre sí mismo.
Dialogue: 0,0:00:59.98,0:01:02.11,Default,,0000,0000,0000,,Sólo tendrías que darle comando sit().
Dialogue: 0,0:01:02.11,0:01:06.17,Default,,0000,0000,0000,,Entonces, en código, ¿Cómo le dirías a tu perro de computadora que se siente?
Dialogue: 0,0:01:06.17,0:01:09.91,Default,,0000,0000,0000,,Bueno, la manera en la que podrías hacerlo, sería escribiendo el nombre del comando,
Dialogue: 0,0:01:09.91,0:01:15.13,Default,,0000,0000,0000,,digamos "sit" y dos paréntesis, luego para decirle que haga el comando que acabas de decirle,
Dialogue: 0,0:01:15.13,0:01:19.72,Default,,0000,0000,0000,,y luego un punto y coma al final para decir "sí, este comando termina aquí".
Dialogue: 0,0:01:19.72,0:01:22.22,Default,,0000,0000,0000,,Y luego tu perro de computadora se sentaría.
Dialogue: 0,0:01:22.22,0:01:27.71,Default,,0000,0000,0000,,Bueno, por supuesto, tu computadora en Khan Academy, no es un perro, por ello no sabe cómo sentarse o rodar,
Dialogue: 0,0:01:27.71,0:01:32.24,Default,,0000,0000,0000,,pero sí sabe cómo dibujar rectángulos, cuando llamas a rect() y esos es bastante interesante también, ¿No?
Dialogue: 0,0:01:32.24,0:01:37.40,Default,,0000,0000,0000,,Así que, eso es lo que vamos a hacer en esta línea. Diremos el comando rect(), que es sólo el nombre,
Dialogue: 0,0:01:37.40,0:01:40.50,Default,,0000,0000,0000,,y luego abriremos paréntesis y cerraremos paréntesis para decir "ve y haz eso",
Dialogue: 0,0:01:40.50,0:01:43.50,Default,,0000,0000,0000,,y luego el punto y coma al final.
Dialogue: 0,0:01:43.50,0:01:47.44,Default,,0000,0000,0000,,Así es que tu computadora sabe ir y hacer esta habilidad especial rect.
Dialogue: 0,0:01:47.44,0:01:49.97,Default,,0000,0000,0000,,Ok, entonces, volvamos a nuestro rect.
Dialogue: 0,0:01:49.97,0:01:53.67,Default,,0000,0000,0000,,Tenemos el nombre del comando aquí mismo, tenemos los paréntesis.
Dialogue: 0,0:01:53.67,0:01:56.24,Default,,0000,0000,0000,,¿Y qué hay acerca de todos esos números locos?
Dialogue: 0,0:01:56.24,0:02:01.55,Default,,0000,0000,0000,,Bueno, la idea es que la computadora realmente no sabe lo suficiente si sólo le dices que "rect".
Dialogue: 0,0:02:01.55,0:02:05.33,Default,,0000,0000,0000,,Para entender esto, imagínate si te diera un papel,
Dialogue: 0,0:02:05.33,0:02:09.67,Default,,0000,0000,0000,,y yo quisiera que dibujes un rectángulo exactamente en la manera en la que yo quisiera que sea.
Dialogue: 0,0:02:09.67,0:02:15.11,Default,,0000,0000,0000,,Bueno, a menos que me puedas leer la mente, vas a hacer algunas preguntas de inmediato.
Dialogue: 0,0:02:15.11,0:02:19.30,Default,,0000,0000,0000,,Primero, pensarás "bueno, ok, ¿Dónde quieres que dibuje el rectángulo?"
Dialogue: 0,0:02:19.30,0:02:27.46,Default,,0000,0000,0000,,Y luego, Yo diría "qué tal si acordamos en llamar a este lado izquierdo del papel 0 (cero) "
Dialogue: 0,0:02:27.46,0:02:30.24,Default,,0000,0000,0000,,Y convengamos en que este lado derecho del papel va a ser "400".
Dialogue: 0,0:02:30.24,0:02:37.54,Default,,0000,0000,0000,,Entonces, podría darte un número, como 100, y tú sabrías que eso sería básicamente ahí.
Dialogue: 0,0:02:37.54,0:02:43.88,Default,,0000,0000,0000,,Eso te convencería por un rato, pero luego dirías: "Ok, eso me dice cuán lejos a lo largo, pero qué tal a lo alto?"
Dialogue: 0,0:02:43.88,0:02:49.59,Default,,0000,0000,0000,,Entonces, yo podría darte otro número, como 200, y diría que el borde superior es 0 (cero),
Dialogue: 0,0:02:49.59,0:02:57.55,Default,,0000,0000,0000,,y luego el inferior es 400, y pensarías: "Bueno, 200 va a estar justo en el medio".
Dialogue: 0,0:02:57.55,0:03:02.97,Default,,0000,0000,0000,,Y esto está perfecto, porque ahora piensas: "Ok, voy a dibujar tu rectángulo justo aquí".
Dialogue: 0,0:03:02.97,0:03:06.67,Default,,0000,0000,0000,,...porque es 100 a lo largo y 200 a lo alto.
Dialogue: 0,0:03:06.67,0:03:09.89,Default,,0000,0000,0000,,Excepto que, eso todavía no es suficiente información, porque qué te preguntas ahora...
Dialogue: 0,0:03:09.89,0:03:12.73,Default,,0000,0000,0000,,Piensas, cuán grande quiero el rectángulo.
Dialogue: 0,0:03:12.73,0:03:17.47,Default,,0000,0000,0000,,Yo diría: "¿Qué tal, 150 de ancho?"
Dialogue: 0,0:03:17.47,0:03:21.17,Default,,0000,0000,0000,,Y tú pensarías: "Bueno, esto es 100 y esto es 400,
Dialogue: 0,0:03:21.17,0:03:26.25,Default,,0000,0000,0000,,así que si quisiéramos que sea 150 de ancho, quizás haríamos esto".
Dialogue: 0,0:03:26.25,0:03:29.13,Default,,0000,0000,0000,,Ok, fantástico, eso es más o menos 150 de ancho.
Dialogue: 0,0:03:29.13,0:03:31.54,Default,,0000,0000,0000,,Entonces, tú dirías: "¿Cuán alto lo quieres?"
Dialogue: 0,0:03:31.54,0:03:33.47,Default,,0000,0000,0000,,Y yo diría: "¿Qué tal 50 de alto?"
Dialogue: 0,0:03:33.47,0:03:37.81,Default,,0000,0000,0000,,Tú dirías: "Ok, 50, eso es aproximadamente así de alto".
Dialogue: 0,0:03:37.81,0:03:40.71,Default,,0000,0000,0000,,Luego, dirías: "Fantástico, sé exactamente dónde quieres el rectángulo,
Dialogue: 0,0:03:40.71,0:03:42.49,Default,,0000,0000,0000,,y exactamente cuán grande quieres que sea,
Dialogue: 0,0:03:42.49,0:03:44.96,Default,,0000,0000,0000,,ahora puedo dibujarlo".
Dialogue: 0,0:03:44.96,0:03:48.05,Default,,0000,0000,0000,,Eso es mucho trabajo para un rectángulo, ¿no?
Dialogue: 0,0:03:48.05,0:03:54.39,Default,,0000,0000,0000,,Pero la idea es que con sólo darte esos 4 números, 100 a lo largo, 200 a lo alto,
Dialogue: 0,0:03:54.39,0:04:02.20,Default,,0000,0000,0000,,150 de ancho y 50 de alto, ahora los dos tenemos la misma idea de cómo debería verse este rectángulo.
Dialogue: 0,0:04:02.20,0:04:04.55,Default,,0000,0000,0000,,Así es cómo piensa la computadora también.
Dialogue: 0,0:04:04.55,0:04:10.00,Default,,0000,0000,0000,,Puedes escribir el nombre del comando, como dijimos, paréntesis, los 4 números
Dialogue: 0,0:04:10.00,0:04:16.24,Default,,0000,0000,0000,,(100, 200, 150, 50), cerrar paréntesis y luego un punto y coma.
Dialogue: 0,0:04:16.24,0:04:20.55,Default,,0000,0000,0000,,¡Y dibujará un retángulo exáctamente en donde queremos que esté!
Dialogue: 0,0:04:20.55,0:04:24.26,Default,,0000,0000,0000,,Bueno, si somos honestos, no es allí donde realmente queríamos el rectángulo.
Dialogue: 0,0:04:24.26,0:04:25.92,Default,,0000,0000,0000,,No es allí donde lo dibujamos, ¿verdad?
Dialogue: 0,0:04:25.92,0:04:27.92,Default,,0000,0000,0000,,Nuestros números están un poco desfasados.
Dialogue: 0,0:04:27.92,0:04:31.52,Default,,0000,0000,0000,,Así que vamos y digamos que queremos que concuerde exactamente lo que dibujamos.
Dialogue: 0,0:04:31.52,0:04:37.69,Default,,0000,0000,0000,,Moveremos esto así, está un poco más lejos, un poco menos a lo alto,
Dialogue: 0,0:04:37.69,0:04:42.86,Default,,0000,0000,0000,,un poco más flaco y quizás un poco más bajo.
Dialogue: 0,0:04:42.86,0:04:46.34,Default,,0000,0000,0000,,Ahora logramos que nuestro rectángulo concuerde con lo que dibujamos,
Dialogue: 0,0:04:46.34,0:04:49.80,Default,,0000,0000,0000,,porque entendimos lo que significan estos números y podríamos cambiarlos
Dialogue: 0,0:04:49.80,0:04:52.59,Default,,0000,0000,0000,,para que se vea justo como queremos.
Dialogue: 0,0:04:52.59,0:04:55.29,Default,,0000,0000,0000,,Ahora pensemos en dibujar otro rectángulo
Dialogue: 0,0:04:55.29,0:04:59.72,Default,,0000,0000,0000,,Porque lo lindo de esto es que podemos dibujar rectángulos en donde queramos.
Dialogue: 0,0:04:59.72,0:05:04.07,Default,,0000,0000,0000,,¿Qué tal si dibujamos uno justo en esta esquina superior?
Dialogue: 0,0:05:04.07,0:05:06.37,Default,,0000,0000,0000,,Pensemos en dónde sería eso.
Dialogue: 0,0:05:06.37,0:05:11.34,Default,,0000,0000,0000,,Eso sería 0 (cero) a lo largo, 0 (cero) a lo alto y quizás bastante pequeño,
Dialogue: 0,0:05:11.34,0:05:17.06,Default,,0000,0000,0000,,digamos 50 de ancho y 10 de alto.
Dialogue: 0,0:05:17.06,0:05:23.04,Default,,0000,0000,0000,,Hagámoslo. Escribimos rect, separamos los parámetros con comas,
Dialogue: 0,0:05:23.04,0:05:26.18,Default,,0000,0000,0000,,y digamos que estamos conformes.
Dialogue: 0,0:05:26.18,0:05:31.13,Default,,0000,0000,0000,,Pero oh, tenemos este mensaje de error que dice que nos falta un paréntesis de cierre,
Dialogue: 0,0:05:31.13,0:05:35.50,Default,,0000,0000,0000,,y nos damos cuenta de esto, así que lo agregamos.
Dialogue: 0,0:05:35.50,0:05:38.55,Default,,0000,0000,0000,,Pero uh, ahora tenemos otro error que dice que nos falta un punto y coma.
Dialogue: 0,0:05:38.55,0:05:43.03,Default,,0000,0000,0000,,Si presionamos "show me where" (Múestrame dónde), nos apuntará la línea que acabo de escribir...
Dialogue: 0,0:05:43.03,0:05:46.20,Default,,0000,0000,0000,,... y recordamos que los punto y coma son como puntos al final de las oraciones,
Dialogue: 0,0:05:46.20,0:05:49.20,Default,,0000,0000,0000,,pero para darle fin a las líneas de código, y nos olvidamos de ello.
Dialogue: 0,0:05:49.20,0:05:52.75,Default,,0000,0000,0000,,Podemos agregarlo, no hay problema y todo está bien nuevamente.
Dialogue: 0,0:05:52.75,0:05:55.78,Default,,0000,0000,0000,,Pruébalo, un pequeño rectángulo, exactamente como queríamos.
Dialogue: 0,0:05:55.78,0:06:03.37,Default,,0000,0000,0000,,Al igual que antes, podemos agrandarlo, podemos moverlo y podemos posicionarlo exactamente donde queremos que esté.
Dialogue: 0,0:06:03.37,0:06:06.92,Default,,0000,0000,0000,,Entonces, ahora sabes en detalle cómo funciona "rect".
Dialogue: 0,0:06:06.92,0:06:10.71,Default,,0000,0000,0000,,Cubrimos lo que significan estos números, y el hecho de que siempre necesitas poner el nombre del comando,
Dialogue: 0,0:06:10.71,0:06:15.67,Default,,0000,0000,0000,,los paréntesis, separar los números con comas y poner el punto y coma final.
Dialogue: 0,0:06:15.67,0:06:19.49,Default,,0000,0000,0000,,Parece mucho, pero puedes probarlo tú mismo y empezar a acostumbrarte.
Dialogue: 0,0:06:19.49,0:06:22.04,Default,,0000,0000,0000,,La próxima vez, aprenderemos acerca de hacer más formas,
Dialogue: 0,0:06:22.04,0:06:24.44,Default,,0000,0000,0000,,y luego avanzaremos hacia cosas más asombrosas como usar color
Dialogue: 0,0:06:24.44,0:06:25.74,Default,,0000,0000,0000,,y lograr que vuele por la pantalla.