Etiquetado: gloss

Haskell para niños: Lección 1.

¡Y arrancamos!

Gracias de nuevo a toda la gente que apoyó este proyecto y se acercó a ser parte. El día de hoy, impartí mi primera clase presencial de Haskell, ¡y ha sido una maravilla! Esta es mi primer relatoría semanal.

Primero: presentaciones.

Ya que hay varios niños en esto, ¡lo primero es presentarnos!

* Yo. Mi nombre es Chris Smith, y estoy impartiendo la clase de programación en la pequeña escuela de Vermijo donde todo esto comenzó. Soy un gran fan de Haskell, ¡y estoy emocionado de compartirlo con gente nueva!

Chris Smith

* Sue. Sue Spengler es “fundadora, maestra principal, supervisora, custodia, secretaria y señora del comedor” de la pequeña escuela de Vermijo. La escuela es su proyecto, y está haciendo cosas realmente sorprendentes. Tuve que hurgar para encontrar una foto, ¡así que espero que a ella le guste esto!

Sue Spengler

* Mis estudiantes locales. Los chicos de la clase de hoy son Grant, Sophia, Marcello e Evie (espero escribirlo bien). Voy a pedirles que se presenten en los comentarios en este blog, de modo que pueden buscarlos allí.

* Todos los demás. Cualesquier otros niños que estén tomando la clase, por favor preséntense en los comentarios también. Pueden decir ¡Hola! y si les gustaría, pueden enlazar un video o una imagen.

Espero que todos tomen el tiempo para dejar sus comentarios y saludar a los demás. Aprender cosas es mucho más divertido cuando se habla con otras personas.

El plan

Vamos a hablar de hacia donde vamos, a saber:

  1. Escribir programas de computadora para trabajar.
  2. Hacer cambios a nuestros programas para darles movimiento a las imágenes.
  3. Crear un juego de su propia elección.

¡Esto se llevará el año entero! Porque esta clase no se trata solamente de memorizar algo acerca de un programa específico: se trata de ser creativas, probar cosas y lograr algo de lo que te sientas orgulloso. Por lo que habrá un montón de tiempo libre para jugar y probar ideas diferentes en tus programas. Estamos aprendiendo con el lenguaje de programación Haskell, pero en realidad, la clase es más sobre estar en control de tu computadora y diseñar y construir algo realmente bueno desde el principio, no solo recordar algunas cosas acerca de Haskell.

Estructura de las computadoras y la programación.

Lo primero de lo que se habló es sobre que es un programa de computadora, y como las cosas encajan entre sí. Esta es la pizarra en la que estuvimos trabajando:

pizarra de clase 1

Algunas de las ideas de que hablamos:

  • Cómo funciona una computadora. La parte principal del equipo se compone de un dispositivo que sigue las instrucciones (la “CPU”) y un dispositivo que recuerda información (“memoria”).
  • El lenguaje de la máquina. ¡El equipo no habla inglés, por supuesto! Sigue las instrucciones en un lenguaje llamado “lenguaje de máquina”. Este idioma lo entiende muy fácil el equipo, pero es muy, muy difícil escribir programas en este lenguaje.
    (La “CPU” tampoco entiende español, portugués, etc. lenguajes “naturales” para el caso pues. -N. del T.)
  • Compiladores. En lugar de escribir nuestros programas en lenguaje de máquina, las escribimos en otros idiomas, y luego la computadora los traduce para nosotros[, al lenguaje que éstas pueden entender]. El programa que hace esto se llama compilador.
  • Algunos lenguajes de programación. ¡Tenemos varias opciones al elegir el lenguaje de programación que podemos utilizar para escribir programas de computadoras! Hablamos en la clase de algunos lenguajes de los que los niños han oído hablar: Java, C, C++, Objective C, JavaScript, Java y Smalltalk -¡sí, Marcello había oído hablar de Smalltalk! Quedé muy impresionado. El idioma que estamos aprendiendo en esta clase se llama Haskell.
  • Bibliotecas. Las bibliotecas son piezas para los programas, que otras personas han escrito para nosotros, y así no tenemos que empezar de cero. Pasamos algún tiempo imaginando todos los pasos necesarios para lo que podríamos considerar cosas muy fáciles de hacer con un ordenador. Por ejemplo, de todos los pequeños pasos en la presentación de una ventana en la pantalla… ¿Cuántos círculos, rectángulos, líneas, letras, etcétera; pueden encontrarse en una ventana en la computadora? Las bibliotecas le permiten a alguien describir cosas más directamente para no hacerte repetir todos los pasos cada vez.

[En esta primera clase] hablamos de como vamos a utilizar:

  1. Un lenguaje de programación llamado Haskell.
  2. Una biblioteca llama Gloss (“brillo” -N. del T.).

A jugar

En este momento, todos utilizaremos un sitio web para escribir algunos programas simples de computadora usando Haskell y Gloss. El sitio web es:

http://dac4.designacourse.com:8000/

Empezamos con algunos programas muy simples, como las siguientes:

¡Tu primer círculo!


import Graphics.Gloss
picture = circle 80

¡Ahora un rectángulo!


import Graphics.Gloss
picture = rectangleSolid 200 300

¡Muestra unas palabras!


import Graphics.Gloss
picture = text "¡Hola!"

Todos estos programas tienen algunas cosas en común:

  • La primera línea de cada uno de estos es import Graphics.Gloss.
    Esto le dice al compilador que desea utilizar la biblioteca Gloss para crear imágenes. Sólo se tiene que escribir una vez y debe estar al comienzo de tu programa.
  • Todos ellos dicen picture = ... .
    Esto se debe a que el trabajo de nuestros programas es hacer una imagen y lo llaman así (picture es imagen, en inglés). El sitio web que estamos utilizando crea esta imagen, del modo como definimos que debe ser y la presenta para nosotros. Hablamos de como en el futuro, podemos definir otras cosas, con otros nombres, pero por ahora, estamos bien con sólo decirle al compilador lo que la imagen debe ser.
  • Después de el signo de “igual a”, describimos la imagen que queremos dibujar. Hay varios tipos de dibujos ¡y hemos visto ya tres de ellos! Todos los tipos de dibujos que podemos crear son parte de la biblioteca Gloss.
  • A excepción de la última, todos utilizan medidas. Por ejemplo, el 80 en el primer ejemplo es el radio del círculo (la distancia desde el centro hasta el exterior). Puedes crear un círculo más grande con un número mayor y un círculo más pequeño con un número menor. Y es igual con la base (el ancho) y la altura del rectángulo.

Hubo problemas para algunas personas utilizando el sitio web. Si estás teniendo problemas, puede que tengas que asegurarte de que tienes una nueva versión de tu navegador web. Además, el sitio web no funciona con Internet Explorer… de modo que mejor trata con Chrome, Firefox, Opera o Safari. No te preocupes demasiado con el hecho de que un navegador no entiende bien, pronto instalaremos el compilador de Haskell en tu propia computadora, y ¡ya no tendrás que ir al sitio web para ejecutar tus programas! Sólo estamos por ahora con el sitio web para empezar a experimentar inmediatamente.

¡Dibujando más de una cosa a la vez!

En este momento, los niños se preguntaban si se puede dibujar más de una forma a la vez. ¡Sí puedes! Para dibujar más de una cosa, utilizamos la palabra pictures (el plural de picture -imagen-, es decir, imágenes). Por ejemplo:


import Graphics.Gloss
picture = pictures [
circle 80,
rectangleWire 200 100]

Observa lo que hicimos:

  • La palabra ahora es “pictures” (imágenes).
  • Abrimos con un corchete una lista.
  • La lista de imágenes, separando con una coma cada imagen de la siguiente.
  • Cerramos con un corchete la lista.

Hablamos de como ayuda separar en líneas distintas el programa de vez en cuando. Lo único de lo que se debe tener cuidado es que cuando colocas una nueva línea, tienes que poner unos pocos espacios al inicio (una sangría). ¿Ves como en la segunda y tercera líneas de la parte de donde definimos las “imágenes” -pictures- se aplica un poco de sangría?

Cambiando tus imágenes

La biblioteca Gloss te ofrece también algunas maneras en que puedes cambiar las imágenes.

Puedes cambiar los colores con la palabra “color”.


import Graphics.Gloss
picture = color red (circleSolid 80)

Observa que escribimos “color”, el nombre del color que queremos y luego la imagen que se dibujará, entre paréntesis. ¡Los paréntesis son importantes! Sirven para lo mismo que en matemáticas, se toma esa parte entera, como una sola “cosa” (en este caso, una imagen).

Hablamos de que colores conoce Gloss. Esta es la lista: negro, blanco, rojo, verde, azul, magenta, amarillo, cian, rosa, naranja, amarillo verdoso, aguamarina, azul y violeta. Sue recordó un color de nombre extraño, preguntó -¿Conoce el chartreuse? Sí, lo conoce. ¡Vaya suerte!

También podemos trasladar los dibujos (trasladar, o sea, cambiar de lugar).


import Graphics.Gloss
picture = translate 100 50 (rectangleSolid 50 50)

Trasladar (o translate en inglés), quiere decir que algo se mueve a la izquierda, derecha, arriba o abajo. El primer número es hacia donde se mueve a izquierda o derecha; los números positivos significan cuantos pasos a la derecha, los negativos a la izquierda. El segundo número es la distancia hacia arriba o hacia abajo; números positivos hacia arriba, números negativos hacia abajo.

Ten en cuenta que en Haskell, tienes que escribir los números negativos entre paréntesis. Si escribes “translate -100”, Haskell entiende que intentas restar 100 de “translate”. No sabe como se puede restar un número de un verbo -ni lo sé yo tampoco- por lo que se da por vencido. Tienes que escribir “translate (-100)”; encerrando el número negativo entre paréntesis.

También se pueden voltear de lado las cosas. El verbo que se usa es “rotar”. Veamos como dibujar un rombo.


import Graphics.Gloss
picture = rotate 45 (rectangleWire 100 100)

Gira las formas los grados que indiquemos. Recuerda que 360 grados quiere decir lo mismo que dar una vuelta entera quedando igual que en el punto de partida, ¡de modo que no hace nada! 45 grados es la mitad de un ángulo recta. ¿Ves por qué ahora queda como un diamante?

Y lo último que puedes hacer es estirar la imagen. El verbo es “escalar” (scale en inglés).


import Graphics.Gloss
picture scale 2 1 (circle 100)

Dibujamos así, una elipse, que es como un círculo, pero de diferente ancho que de alto.

¡No te preocupes si todo esto no tiene sentido todavía! Vamos a pasar mucho tiempo jugando con la forma de poner todo esto junto. Ahora mira como quedo la pizarra después de todo esto.

Hora de los experimentos.

Pasamos un montón de tiempo con cada uno haciendo sus propias formas y dibujos o cualquier cosa que se les antojase. La mejor forma de estar más cómodos con todo esto es jugar con ello. ¡Haz montón de pequeños cambios y mira que ocurre! Intenta adivinar que pasará, y luego haz la prueba de si acertaste o no.

Éstas son algunas de las fotos de las chicas con sus proyectos:

Sophia e Evie muestran dos círculos lado a lado. ¡Estos en algún momento se convirtieron en los ojos de una cara!

Este es Grant con su rombo, aunque se vio aún mejor después de que lo estiró un poco por ambos ejes.

Este fue el dibujo de Marcello, ¡centrando la palabra en el círculo tomó mucho tiempo! Si lo intentas, notarás que el texto no queda centrado automáticamente como las otras figuras, de modo que Marcello lo intentó y falló muchas veces con “tranlate” para lograr poner la palabra en medio del círculo.

¡Y ésta es Sophia muy emocionada de lograr poner los dos ojos en los lugares correctos!

Tu misión

Tu misión, si decides aceptarla… ¡es planear y crear un dibujo de algo que te interese! Tal vez es solo un pez, un jardín, una estación espacial, un dragón… sólo asegúrate que puedes dibujarlo con rectángulos y círculos de diferentes colores, y moviéndolos, girándolos o estirándolos. Aquí en la pequeña escuela (de Vermijo) estaremos trabajando en esto por algunas clases más de ésta y la próxima semana.

¡De modo que pasa algún tiempo con ello y ven con algo de lo que te sientas orgullosa la semana siguiente!

Haskell para niños

Dejemos que el autor de esta iniciativa nos presente la idea en sus propias palabras:

Introducción a Haskell para niños (fragmento).

¿Haskell? ¿En serio?

Sí, elegí Haskell como lenguaje de programación. Eso será controversial, por supuesto, pero creo tener buenos argumentos.

¡Es algo tan emocionante! Pienso que va mucho más allá de un puñado de detalles técnicos: es esencial que alguien que va a enseñar, hacerlo con algo que te apasione, y pasar esa emoción a los demás.

La biblioteca Gloss de Ben Lippmeier es una herramienta educativa excelente. Es una biblioteca para construir programas de tipo gráfico con una API de alto nivel, combinable y expresiva semánticamente.

Creo que Haskell es el mejor entorno para aprender y practicar modelos abstractos de pensamiento que serán útiles en matemáticas, lógica y un entendimiento muy claro del mundo. Verás, no me importa si alguien sale de esta clase encaminado a una carrera de programación de computadoras. Si ellos ya han puesto en su corazón el anhelo por la poesía, espero haber contribuido algo valioso a sus vidas, también.

Las objeciones que he escuchado cuando he discutido el plan con otros se reducen a que Haskell es “difícil”. Me parece que es simplificar mucho las cosas. Si observas las razones por las que Haskell es considerado “difícil”, mucho de eso se reduce a: (a) es diferente de otros lenguajes a los que la gente está acostumbrada; y (b) la gente está haciendo cosas difíciles con ello. Ninguna de las dos aplica en ésta clase.

No es lo mismo que decir que Haskell debería ser la opción de todo mundo. Si buscas enseñar programación a los niños, pienso que la cuestión más importante es evitar la complejidad incidental. Cualquier lenguaje que te permita ir directo al grano de lo que quieres hacer es adecuado. Si no estuviese haciento esto en Haskell, escogería Python. Pero la diversión cuenta, de modo que me quedó con Haskell.

Si aún no te convence, déjame contarte que cuando publicó la invitación en reddit, hubo una discusión muy amplia sobre detalles técnicos, entre ellos porque no eligió Python, o incluso Racket (un derivado de Scheme-Lisp), para el trabajo. Me enganché definitivamente donde plantea que lo que existe para otros lenguajes, requiere más habilidades de programación previas para reutilizar código (algo en lo que se hace particular énfasis en la programación funcional); de modo que no es probablemente lo más adecuado para un cursillo en verdad para chicos.

¿Me sigues leyendo? ¡Entonces comencemos!

En ésta primera lección, Chris (nuestro tutor) está haciendo las presentaciones, entre las participantes, como funciona la computadora y con algunos fundamentos prácticos de escribir código en haskell.

De hecho, podemos ver que los chicos ya están siendo capaces de realizar dibujos *con código*.

Lectores en inglés, pueden leer la relatoría de la primera lección de Chris en su blog.

Traducción al español de la primera lección.

Desde algún lugar a orillas del antiguo Mar interior de México (a unos kilómetros de Texcoco).