Sneak Peek (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Buenos, vamos a hacer un programa.

Comenzaremos completamente en blanco y al finalizar

será fabuloso,
como un mini programa de dibujo.

Piensa en esto, como si fuera un... ,
con las primeras lecciones en Khan Academy.

Sólo para que tengas una idea de lo que es posible.

No te preocupes por entender cada pequeño detalle ahora mismo.

Sólo queremos darte una idea de lo que viene más adelante y del tipo de programas

que serás capaz de hacer en poco tiempo.

Entonces... Ahora no hay nada aquí, lo que es un poco aburrido.

así que dibujemos algo.
Quiero dibujar una elipse,

que es similar a un círculo

y como aprenderás,
así es cómo hago esto...

...y allí está. Casi mágico.
La razón es que

hay unas cuantas cosas especiales
que el entorno de Khan Academy ya sabe

y por suerte, la elipse es una de ellas.
No te preocupes

por el significado de todos estos números.

Ya lo aprenderás en "Intro to drawing".
Igualmente, aquí tienes un avance.

Al cambiar los números, podemos ver que el primero, básicamente significa, cuán lejos a lo largo.

El segundo, significa cuán lejos a lo alto.

El tercero, parece significar cuán grande a lo largo.

Y el último, cuán grande a lo alto.

De nuevo, no necesitas saber eso ahora mismo, pero puede pausar este video y jugar tú mismo.

Aprenderás todos los detalles en las siguientes lecciones. Y lo importante por ahora,

es que controlan cómo se ve la forma.

Bueno, muy lindo, pero quizás no estés muy impresionado.

Así que voy a hacer algo que parece un poco más complicado

y luego poner la elipse que hicimos, adentro.

Bien, entonces... no cambió nada.

Y probablemente, sigas sin estar muy impresionado.

Pero ahora voy a hacer que la salida del programa sea un poco más impresionante.

Hagamos este programa, animado.

Y como ahora podés ver hay muchos círculos y en realidad, están siguiendo mi mouse

mientras lo muevo. Puedes pausar el programa ahora mismo y hacer que siga tu mouse

Ok. ¿Cómo es que esto está pasando?

¿De dónde salen todos esos círculos?

Bueno, vas a aprender todo esto en "Introduction to a animation" luego.

Pero si tienes la duda, lo que está pasando, es que

la computadora le dice a nuestro programa automáticamente, una y otra y otra vez:

"Dibuja, dibuja, dibuja, dibuja".

Y quizás piense que nuestro programa podría cansarse pero en lugar de ello,

...sigue haciendo lo que está dentro de esta parte mágica llamada "draw".

Sólo sigue intentando elipse, tras elipse, tras elipse y eso es

lo que está ocurriendo detrás de escena cuando movemos nuestro mouse.

...para hacer tantas elipses, aunque sólo lo hemos escrito una vez.

¿Cómo sabe el programa dónde dibujar la elipse?

Por ejemplo, ¿cómo sabe dibujar siguiendo el mouse?

Bueno, aprenderás eso en "Mouse interaction" más adelante.

La idea es que cada vez, la computadora también le dice a nuestro programa dónde esta el mouse

utilizando estas dos palabras "mouse...".
mouseX y MouseY.

No necesitas saber acerca de ellas por ahora pero mouseX indica cuán lejos está el mouse a lo largo,

mientras que mouseY es cuán lejos a lo alto.

Entonces, sólo para recapitular, cuando hacemos esta elipse,

lo que estamos diciendo es "dibuja la elipse tan lejos a lo largo...

... como lejos esté el mouse a lo largo".

Y la segunda dice "dibuja el mouse tan lejos a lo alto...

como el mouse esté a lo alto".

Y lo que termina significando es "dibuja la elipse exactamente en el mismo lugar donde esté el mouse,

cada vez que decimos "draw".

Y luego, estos últimos dos, dicen de qué tamaño debería ser la elipse.

De nuevo, no te preocupes por todos estos detalles, por ahora.

Luego de que sigas con las próximas lecciones, todo esto tendrá más sentido.

Y ahora, como verás, esto se está tornando un poco sucio,

y podemos hacer click... en el botón "restart"
para comenzar el programa nuevamente, en blanco.

Ve y pausa el programa ahora mismo, y juega tú mismo sólo para saber qué está pasando.

Entonces ahora que tenemos algo lindo pasando, ¿Qué más podemos hacer?

Bueno, estos círculos son un poco feos...
Sólo son blancos...

¿Qué tal si pudiéramos hacerlos de color?

Hay un tutorial completo de "Intro to color"

en donde aprenderemos todo acerca de colores, pero te voy a arruinar el secreto

y mostrarte cómo hacerlo ahora mismo.

¡Ta-dá!

Ahora tienes círculos rojos siguiendo el mouse pero no tiene por qué ser sólo rojos,

porque cuando haces click en el color aquí, puede ver tú mismo, cuando lo haces

que puede escoger cualquier color que te guste, un arcoiris completo de colores...

Así que, ¿qué tal un lindo púrpura ahora mismo?

Puedes aprender por qué cambian los colores cuando haces esto en "intro to coloring"...

Entonces, cuando clickeamos en "restart" sólo tenemos círculos púrpura...

Entonces, podríamos pensar "ponemos todo este trabajo...

... para dibujar estas lindas formas cuando movemos el mouse"

pero sería lindo dibujar sólo a veces, como por ejemplo, sólo cuando el mouse esté apretado.

Y voy a mostrate cómo hacer eso ahora mismo.

Lógicamente, no es complicado. Lo que digo es "si el mouse está apretado...

dibuja el círculo. De lo coontrario, no hagas nada".

Entonces, así es como se ve esto en código.

Decimos "if" y luego estos paréntesis raros (no necesitas preocuparte por esto). Entonces...

Si el mouse está apretado, y luego lo que queremos hacer cuando el mouse esté apretado...

...bueno, sólo queremos dibujar la elipse.

y, de otra manera, no quedemos hacer nada.

Así que dejaremos esta parte aquí en blanco. Así que cuando apretamos "restart"

podemos decir "muevo el mouse y no pasa nada, pero cuando apreto el mouse...

... ¡puedo dibujar! en púrpura".

... y escribir cosas y dibujar cosas, y casi hacer lo que quieras...

Es bastante lindo, porque con un par de líneas de código, hicimos este programa de dibujo.

Entonces, todo este tutorial de introducción a sentencias, aprenderemos todo

acerca de lo que hace este código que acabamos de escribir y cómo funciona.

Pero apuesto a que ya estás entendiendo la idea general. Todo lo que estamos diciendo es...

"si el mouse está apretado, haz esto, y de lo contrario, si el mouse no está apretado...

sólo queremos que no haga nada". Cool! Es exactamente la misma lógica que tenemos en mente.

Sólo que la escribimos en código ahora. Y quizás quieras denotar que

¿Qué es ese borde feo en todos los círculos?"

Bueno, aprenderás a controlar eso en breve. Puede hacerlo más grande, más chico,

puedes hacerlo de diferentes colores.

Pero por ahora, honestamente, quiero deshacerme de él.

Así que, Voy a escribir "noStroke()" arriba porque ese pequeño borde se llama "stroke".

y ahora, cuando clickeamos "restart"...
¡Ey! El borde se fue.

¡Perfecto!
Esto parece un programa de dibujo más realista.

Entonces, volvamos rápidamente un paso atrás.

Quizás te preguntes: ¿De dónde salen estas habilidades mágicas como el "if" y ellipse() y draw()?

Estos comandos están dentro de Khan Academy. Nosotros hicimos eso.

Y la parte divertida viene al aprender cómo combinarlos para hacer programas.

Si realmente te despierta la curiosidad,

estamos utilizando un lenguaje llamado "javascript" en Khan Academy.

Javascript es una de las maneras más populares de escribir programas en el mundo.

Especialmente en la Internet, así que estarás en buena compañía.

Entoncecs, hicimos este lindo programa de dibujo, pero no quiere decir que esté terminado.

Puede pausar este programa y personalizarlo de la manera en la que te guste.

Puedes cambiar el tamaño del círculo, puede cambiar el color y cuando lo hayas dejado lindo

puede guardarlo como un "spin-off"...

... este botón de aquí abajo...

y mostrarlo a la gente que conoces.

Pero, apuesto a que puedes imaginarte cómo mejorar este programa, de maneras en las que todavía no conoces...

Digamos, más allá de modificar el color y el tamaño. Quizás quiera hacer una linda

animmación con pingüinos o un juego divertido... O quizás algo entretenido para tus amigos

y familia. Bueno, estás en el lugar indicado, porque si te quedas con nosotros,

estás en camino aprender todo eso y más con código.

Así que espero que te haya parecido entretenido.

Hacer este lindo programa de dibujo, sólo nos llevó unos cuantos minutos

pero aprenderemos un poco más acerca de cómo funciona el código.

Las siguientes lecciones son acerca de incursionar en algo más profundo

y aprender exactamente lo que hicimos aquí.

Para que no parezca tan misterioso.

Comenzaremos desde el principio y a lo largo de los conceptos básicos.

Y en poco tiempo, lo creas o no,

no será gran cosa. De hecho, si continúas, pronto seráz capaz de hacer cosas

bastante avanzadas con respecto a este programa.