Texto Fabuloso: Parte Uno

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/

Bien, hemos estado haciendo mucho dibujo hasta ahora,

pero no hemos hablado sobre algo tan simple como, digamos, escribir tu nombre.

De eso se trata esta lección, texto.

Así que, ¿para qué quisieras usar texto?, bueno, tal vez quieras mostrar la puntuación en un juego

o hacer hablar a los personajes o sólo hacer nuestro nombre grande, pequeño y que cambie colores.

Avancemos y tratemos de decir "hola" (hello), puedes decir "text(hello,..." y aparece este extraño mensaje de error,

que dice que hello no está definida. ¿Qué significa?

Bueno, el problema es que el programa piensa que 'hello' es una variable

Y es lógico desde el punto de vista del programa

porque tal vez hello pudiera ser una variable, ¿cómo puede saberlo?

Pero ¿cómo le decimos a nuestro programa que en realidad es texto?

Es fácil, sólo tenemos que recordar el poner estas comillas al rededor

y esto dice que no, esto no es una variable y ¡en realidad es texto!

O queremos que lo muestres como texto.

Puedes recordarlo pensando en un libro, donde todos los personajes hablan

y hay comillas alrededor de lo que dicen.

Y, de manera similar, cuando quieres que el programa diga algo, ese texto debe tener comillas alrededor.

Ahora, esto es realmente importante y es fácil confundirse,

así que lo diré otra vez: cada que quieras usar texto en tu programa siempre tienes que usar

estas comillas alrededor.

De otra manera, tendrás algunos mensajes de error realmente extraños.

Y recuerda que si ves ese tipo de mensajes, sólo asegúrate de revisar dos veces

que recordaras usar comillas.

¡Bien! ahora usaremos comillas y no tendremos más errores.

Pero te habrás dado cuenta que nada ha sucedido,

y todo está en blanco.

Pero lo que es extraño es, que si modificamos algo

el fondo, digamos a rojo, entonces veremos que realmente está ahí

sólo que en blanco, así que el problema, pensándolo bien, es que escribimos texto blanco en un fondo blanco.

Y es por eso que no lo podemos ver.

Parece un poco ridículo el hecho de escribir texto blanco en fondo blanco.

Bueno, podemos sólo cambiarlo, porque aprendimos cómo configurar el relleno.

Y de la misma forma en que configuramos el relleno de un rectángulo o línea, podemos configurarlo para un texto,

como antes a cualquier número y ¡listo!

Se muestra sin necesidad del fondo, así que vamos a ver un poco más acerca de cómo funciona esto del texto.

La primera parte, es bastante obvio, es cualquier texto que queramos escribir.

La siguiente, si la cambiamos, podemos ver que es básicamente qué tan a la derecha está.

Y la siguiente es qué tan arriba o abajo.

Es probable que resulte familiar, de cuando estábamos dibujando rectángulos.

Algo que es un poco engañoso es que, en el texto, estas dos coordenadas

especifican la parte inferior izquierda, esta esquina del texto.

Y en los rectángulos es la superior izquierda, esta esquina.

Y parece como si fuera diseñado para confundirte.

Pero sólo es algo que tienes que recordar.

Y podemos incluso experimentar y verlo por nosotros mismos, al configurar esto como "height".

Y podemos ver que, en efecto, está configurando la altura para que sea la coordenada inferior izquierda.

O podemos ponerlo en cero y ¿qué crees que debemos esperar?

No lo vemos, pero, si empezamos a incrementar lentamente esto, podemos ver que...

¡Sí!, está como asomándose desde arriba.

Porque, otra vez, es la coordenada de la esquina inferior izquierda la que especificamos,

no la superior.

Bueno, suficiente de analizar esto del texto, vamos a hacerlo mejor.

Por ejemplo, empecemos por hacerlo más grande, podemos hacerlo con "textSize", que le dice al programa qué tan grande dibujará el texto.

Y podemos hacerlo "30", que es muy grande, podemos hacerlo incluso más grande o realmente muy, muy, muy, muy pequeño.

Lo que queramos.

Avancemos y dibujemos tu nombre y tal vez abajo un mensaje corto acerca de ti.

Como no sé tu nombre, dibujaré el mío. Puedes cambiarlo al tuyo en un momento.

Usando lo que acabamos de aprender, podemos decir: "text("Sophia"" y ahí está mi nombre

Y tal vez entonces quiera poner un pequeño mensaje abajo, como:

"I like puppies, and guitars and coding" (Me gustan los cachorritos, las guitarras y programar).

Grandioso, excepto que, obviamente, necesitamos cambiar las posiciónes para que no se empalmen.

Y ¡oh, no, no!, es una cadena de texto algo larga, vamos a cambiarla para que el tamaño del texto sea más pequeño.

Aquí vamos, eso es muy bueno.

Excepto que, no sé, ¿no es algo aburrido que ambos sean azules?

Vamos a cambiar el relleno, "fill", y hagámoslo tal vez un bonito, mmm, no sé,

tal vez un bonito morado.

Bueno, ahí está, eso es todo acerca de dibujar texto, y cambiarle el color y el tamaño.