WEBVTT

00:00:00.000 --> 00:00:02.817
Empecemos a programar.

00:00:02.817 --> 00:00:05.635
Necesitamos comenzar entendiendo formas, los conceptos básicos.

00:00:05.635 --> 00:00:07.803
Pero no te preocupes, en breve, tus formas estarán volando por la pantalla y cambiando el color

00:00:07.803 --> 00:00:10.803
y haciendo todo tipo de cosas de programación entretenidas.

00:00:10.803 --> 00:00:12.772
Sólo ¡quédate con nosotros!

00:00:12.772 --> 00:00:14.636
Así que comencemos a dibujar rectángulos.

00:00:14.636 --> 00:00:20.870
Escribimos rect() por rectángulo, luego abrimos paréntesis, y luego cuatro números y explicaré qué significan en un rato.

00:00:20.870 --> 00:00:23.938
...luego cerramos los paréntesis, y al final ponemos punto y coma.

00:00:23.938 --> 00:00:26.005
Mira, asombroso, ¡un rectángulo!

00:00:26.005 --> 00:00:29.670
Y eso fue tan simple, así que hagámoslo de nuevo. Podemos probar diferentes números esta vez.

00:00:29.670 --> 00:00:36.171
Quizás números más grandes, y luego números más chicos al final, y ¡ey!, mira, otro rectángulo.

00:00:36.171 --> 00:00:41.003
De hecho, si intentamos cambiar este primer número para hacerlo más pequeño, se empezará a mover.

00:00:41.003 --> 00:00:44.968
Si cambiamos este último número para hacerlo más grande y luego más pequeño,

00:00:44.968 --> 00:00:47.968
entonces sólo crecerá y luego se achicará. Interesante.

00:00:47.968 --> 00:00:51.885
Entonces, probablemente te preguntarás: ¿Cómo es que está pasando toda esta magia?

00:00:51.885 --> 00:00:55.506
Bueno, recuerda que tu computadora es como un perro realmente inteligente y obediente.

00:00:55.506 --> 00:00:59.978
A un perro, quizás podamos decirle que se siente, se quede quieto, o incluso ruede sobre sí mismo.

00:00:59.978 --> 00:01:02.113
Sólo tendrías que darle comando sit().

00:01:02.113 --> 00:01:06.172
Entonces, en código, ¿Cómo le dirías a tu perro de computadora que se siente?

00:01:06.172 --> 00:01:09.909
Bueno, la manera en la que podrías hacerlo, sería escribiendo el nombre del comando,

00:01:09.909 --> 00:01:15.129
digamos "sit" y dos paréntesis, luego para decirle que haga el comando que acabas de decirle,

00:01:15.129 --> 00:01:19.719
y luego un punto y coma al final para decir "sí, este comando termina aquí".

00:01:19.719 --> 00:01:22.219
Y luego tu perro de computadora se sentaría.

00:01:22.219 --> 00:01:27.711
Bueno, por supuesto, tu computadora en Khan Academy, no es un perro, por ello no sabe cómo sentarse o rodar,

00:01:27.711 --> 00:01:32.241
pero sí sabe cómo dibujar rectángulos, cuando llamas a rect() y esos es bastante interesante también, ¿No?

00:01:32.241 --> 00:01:37.395
Así que, eso es lo que vamos a hacer en esta línea. Diremos el comando rect(), que es sólo el nombre,

00:01:37.395 --> 00:01:40.495
y luego abriremos paréntesis y cerraremos paréntesis para decir "ve y haz eso",

00:01:40.495 --> 00:01:43.495
y luego el punto y coma al final.

00:01:43.495 --> 00:01:47.436
Así es que tu computadora sabe ir y hacer esta habilidad especial rect.

00:01:47.436 --> 00:01:49.967
Ok, entonces, volvamos a nuestro rect.

00:01:49.967 --> 00:01:53.672
Tenemos el nombre del comando aquí mismo, tenemos los paréntesis.

00:01:53.672 --> 00:01:56.240
¿Y qué hay acerca de todos esos números locos?

00:01:56.240 --> 00:02:01.552
Bueno, la idea es que la computadora realmente no sabe lo suficiente si sólo le dices que "rect".

00:02:01.552 --> 00:02:05.329
Para entender esto, imagínate si te diera un papel,

00:02:05.329 --> 00:02:09.669
y yo quisiera que dibujes un rectángulo exactamente en la manera en la que yo quisiera que sea.

00:02:09.669 --> 00:02:15.106
Bueno, a menos que me puedas leer la mente, vas a hacer algunas preguntas de inmediato.

00:02:15.106 --> 00:02:19.302
Primero, pensarás "bueno, ok, ¿Dónde quieres que dibuje el rectángulo?"

00:02:19.302 --> 00:02:27.456
Y luego, Yo diría "qué tal si acordamos en llamar a este lado izquierdo del papel 0 (cero) "

00:02:27.456 --> 00:02:30.245
Y convengamos en que este lado derecho del papel va a ser "400".

00:02:30.245 --> 00:02:37.536
Entonces, podría darte un número, como 100, y tú sabrías que eso sería básicamente ahí.

00:02:37.536 --> 00:02:43.884
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?"

00:02:43.884 --> 00:02:49.593
Entonces, yo podría darte otro número, como 200, y diría que el borde superior es 0 (cero),

00:02:49.593 --> 00:02:57.553
y luego el inferior es 400, y pensarías: "Bueno, 200 va a estar justo en el medio".

00:02:57.553 --> 00:03:02.970
Y esto está perfecto, porque ahora piensas: "Ok, voy a dibujar tu rectángulo justo aquí".

00:03:02.970 --> 00:03:06.670
...porque es 100 a lo largo y 200 a lo alto.

00:03:06.670 --> 00:03:09.886
Excepto que, eso todavía no es suficiente información, porque qué te preguntas ahora...

00:03:09.886 --> 00:03:12.728
Piensas, cuán grande quiero el rectángulo.

00:03:12.728 --> 00:03:17.468
Yo diría: "¿Qué tal, 150 de ancho?"

00:03:17.468 --> 00:03:21.168
Y tú pensarías: "Bueno, esto es 100 y esto es 400,

00:03:21.168 --> 00:03:26.248
así que si quisiéramos que sea 150 de ancho, quizás haríamos esto".

00:03:26.248 --> 00:03:29.131
Ok, fantástico, eso es más o menos 150 de ancho.

00:03:29.131 --> 00:03:31.538
Entonces, tú dirías: "¿Cuán alto lo quieres?"

00:03:31.538 --> 00:03:33.468
Y yo diría: "¿Qué tal 50 de alto?"

00:03:33.468 --> 00:03:37.806
Tú dirías: "Ok, 50, eso es aproximadamente así de alto".

00:03:37.806 --> 00:03:40.707
Luego, dirías: "Fantástico, sé exactamente dónde quieres el rectángulo,

00:03:40.707 --> 00:03:42.487
y exactamente cuán grande quieres que sea,

00:03:42.487 --> 00:03:44.957
ahora puedo dibujarlo".

00:03:44.957 --> 00:03:48.052
Eso es mucho trabajo para un rectángulo, ¿no?

00:03:48.052 --> 00:03:54.393
Pero la idea es que con sólo darte esos 4 números, 100 a lo largo, 200 a lo alto,

00:03:54.393 --> 00:04:02.203
150 de ancho y 50 de alto, ahora los dos tenemos la misma idea de cómo debería verse este rectángulo.

00:04:02.203 --> 00:04:04.552
Así es cómo piensa la computadora también.

00:04:04.552 --> 00:04:10.003
Puedes escribir el nombre del comando, como dijimos, paréntesis, los 4 números

00:04:10.003 --> 00:04:16.243
(100, 200, 150, 50), cerrar paréntesis y luego un punto y coma.

00:04:16.243 --> 00:04:20.553
¡Y dibujará un retángulo exáctamente en donde queremos que esté!

00:04:20.553 --> 00:04:24.265
Bueno, si somos honestos, no es allí donde realmente queríamos el rectángulo.

00:04:24.265 --> 00:04:25.925
No es allí donde lo dibujamos, ¿verdad?

00:04:25.925 --> 00:04:27.915
Nuestros números están un poco desfasados.

00:04:27.915 --> 00:04:31.525
Así que vamos y digamos que queremos que concuerde exactamente lo que dibujamos.

00:04:31.525 --> 00:04:37.688
Moveremos esto así, está un poco más lejos, un poco menos a lo alto,

00:04:37.688 --> 00:04:42.858
un poco más flaco y quizás un poco más bajo.

00:04:42.858 --> 00:04:46.344
Ahora logramos que nuestro rectángulo concuerde con lo que dibujamos,

00:04:46.344 --> 00:04:49.804
porque entendimos lo que significan estos números y podríamos cambiarlos

00:04:49.804 --> 00:04:52.594
para que se vea justo como queremos.

00:04:52.594 --> 00:04:55.287
Ahora pensemos en dibujar otro rectángulo

00:04:55.287 --> 00:04:59.719
Porque lo lindo de esto es que podemos dibujar rectángulos en donde queramos.

00:04:59.719 --> 00:05:04.073
¿Qué tal si dibujamos uno justo en esta esquina superior?

00:05:04.073 --> 00:05:06.368
Pensemos en dónde sería eso.

00:05:06.368 --> 00:05:11.345
Eso sería 0 (cero) a lo largo, 0 (cero) a lo alto y quizás bastante pequeño,

00:05:11.345 --> 00:05:17.065
digamos 50 de ancho y 10 de alto.

00:05:17.065 --> 00:05:23.042
Hagámoslo. Escribimos rect, separamos los parámetros con comas,

00:05:23.042 --> 00:05:26.182
y digamos que estamos conformes.

00:05:26.182 --> 00:05:31.134
Pero oh, tenemos este mensaje de error que dice que nos falta un paréntesis de cierre,

00:05:31.134 --> 00:05:35.504
y nos damos cuenta de esto, así que lo agregamos.

00:05:35.504 --> 00:05:38.548
Pero uh, ahora tenemos otro error que dice que nos falta un punto y coma.

00:05:38.548 --> 00:05:43.026
Si presionamos "show me where" (Múestrame dónde), nos apuntará la línea que acabo de escribir...

00:05:43.026 --> 00:05:46.205
... y recordamos que los punto y coma son como puntos al final de las oraciones,

00:05:46.205 --> 00:05:49.205
pero para darle fin a las líneas de código, y nos olvidamos de ello.

00:05:49.205 --> 00:05:52.754
Podemos agregarlo, no hay problema y todo está bien nuevamente.

00:05:52.754 --> 00:05:55.785
Pruébalo, un pequeño rectángulo, exactamente como queríamos.

00:05:55.785 --> 00:06:03.373
Al igual que antes, podemos agrandarlo, podemos moverlo y podemos posicionarlo exactamente donde queremos que esté.

00:06:03.373 --> 00:06:06.915
Entonces, ahora sabes en detalle cómo funciona "rect".

00:06:06.915 --> 00:06:10.711
Cubrimos lo que significan estos números, y el hecho de que siempre necesitas poner el nombre del comando,

00:06:10.711 --> 00:06:15.671
los paréntesis, separar los números con comas y poner el punto y coma final.

00:06:15.671 --> 00:06:19.490
Parece mucho, pero puedes probarlo tú mismo y empezar a acostumbrarte.

00:06:19.490 --> 00:06:22.039
La próxima vez, aprenderemos acerca de hacer más formas,

00:06:22.039 --> 00:06:24.445
y luego avanzaremos hacia cosas más asombrosas como usar color

00:06:24.445 --> 00:06:25.735
y lograr que vuele por la pantalla.