Introducción a Scratch 2.0

Tabla de Contenido

0. Introducción
1. Contextualización de Scratch
2. Antes de Empezar
2.1 Creación de una Cuenta de Usuario
2.2 Inicio de Sesión
2.3 Primer Proyecto
3. Primeros Pasos en Scratch [Guía Básica]
3.1 Agregar Movimiento
3.2 Agregar Sonido
3.3 Agregar más Movimientos, Más Sonidos
3.4 Una y Otra Vez [Iterar]
3.5 ¡Di Algo Scratch!
3.6 La Bandera Verde: El Punto de Entrada de la Aplicación
3.7 Cambiar Colores
3.8 Respondiendo a Eventos
3.9 Scratch en la Disco
3.10 Agregar más Elementos
3.11 Música en la Disco
3.12 Animando el Sprite
4. Sugerencias
5. Hora de Compartir
6. Resultado Final
7. Ejemplos
8. Conclusiones
9. Glosario
10. Enlaces & Literatura

0. Introducción

A pesar de que este tema no tiene nada que ver directamente con el lenguaje de programación C#. Sí que es un tema interesante para ser tratado en este blog; dado su importancia en el entendimiento y práctica de los conceptos algorítmicos necesarios para la composición de aplicaciones de mediana complejidad; pero que aporta en gran medida en el desarrollo de habilidades en esta ciencia o arte tan sorprendente y curiosa.

Agrego que llegué a conocer este recurso de aprendizaje a través del curso que estoy realizando este semestre en EdX: CS50x: Introduction to Computer Science [2]. Desde un comienzo me pareció muy interesante haberlo conocido y seguir varios ejemplos que hallé en la Web y en la misma biblioteca pública de proyectos creados por otros usuarios; ahora ha llegado la oportunidad de compartir con uds. mi primeras impresiones y la realización de la guía que viene a continuación.

1. Contextualización de Scratch

Recuerdo por el año 2008 cuando tenía más tiempo para dedicar a los libros de resolución de problemas usando el lenguaje de programación Java [3], en particular Java How to Program 7/e [4] (excelente literatura para empezar a programar en Java. Recomendado). En ese libro en uno de los ejercicios propuestos al final del capítulo de arreglos se proponía construir la serie de comandos para simular los movimientos de una turtuga y sus trazos sobre un lienzo. Todo esto se hacía pintando un caracter de asterisco (*) sobre la matriz cuando la tortuga mantenía bajo el péncil, de lo contrario quedaba un espacio en blanco sobre la ubicación de la matriz.

Lo anterior correspondía con la simulación que se realizaba originalmente sobre un lenguaje de programación llamado Logo [5], a ese efecto de dibujar se le llegó a conocer como algoritmo Turtle graphics [6]. Véamos un ejemplo de los resultados visuales que era posible alcanzar usando este algoritmo:

Figura 1. Dibujo en espiral de generación iterativa usando el algoritmo de turtle-graphics [7].

El lenguaje Logo fue creado para propósitos educativos, de ahí que recordará su existencia y mantuviera su relación directa con el recurso que voy a presentar enseguida.

1.1 Ahora sí: ¿Qué es Scratch?

Figura 2. Mascota (logo) de Scratch [9].

Scratch [8] es un lenguaje de programación con el cual podemos crear animaciones, juegos, historias llenas de interactividad; pero sobretodo, como recurso interactivo para el aprendizaje constructivista [11] de conceptos algorítmicos: lo que es una sentencia, un ciclo, una variable, un método, también la utilidad y funcionalidad de los eventos, el paralelismo, y un largo etcétera.

Los proyectos creados por los usuarios (profesores, estudiantes, o cualquier tipo de usuario interesado en aprender a programar) pueden ser compartidos con otros (más adelante presentaré algunos ejemplos de proyectos compartidos).

1.2 Historia

La breve historia de Scratch la citó desde [8]:

The first version of Scratch was developed in 2003 by the Lifelong Kindergarten group, led by Mitchel Resnick, at the MIT Media Lab.

1.3 Origen de Scratch

Cita desde [9]:

The name was derived from the turntablism's technique of scratching (i.e. mixing sounds), relating the ease of mixing sounds to the ease of mixing projects made with Scratch.

1.4 La Interfaz de Usuario de Scratch

Figura 3. Pantalla Principal de Scratch.

1.5 Vídeo Oficial de Introducción a Scratch

Intro to Scratch 2.0 from ScratchEd on Vimeo.

2. Antes de Empezar

Lo primero que vamos a hacer para utilizar Scratch es crear una cuenta de usuario, iniciar sesión, y crear nuestro primer proyecto. Así que manos a la obra.

2.1 Creación de una Cuenta de Usuario

Para crear una cuenta de usuario nos dirigimos a la siguiente dirección:

http://scratch.mit.edu/

Y hacemos clic en el enlace 'Join Scratch' de la esquina superior derecha':

Figura 4. Únete a Scratch desde http://scratch.mit.edu/.

En el nuevo diálogo que nos aparece, llenamos los campos 'Elije un nombre de usuario en Scratch', 'Elija una contraseña', y 'Confirmar contraseña':

Figura 5. Primer paso de creación cuenta en Scratch.

Ahora procedmos al segundo, y llenamos los campos que nos exigen:

Figura 6. Segundo paso de creación cuenta en Scratch.

Finalmente, ya hemos creado nuestra cuenta de usuario en Scratch:

Figura 7. Último paso de creación cuenta en Scratch.

Bueno, sólo resta dar clic en el botón 'OK Vamos!' para cerrar el diálogo y ya tenemos lista nuestra cuenta para empezar a seguir el paradigma:

Imagina, Programa, Comparte.

2.2 Inicio de Sesión

El inicio de sesión comprende los dos pasos siguientes:

El primer paso es dar clic sobre 'Ingresar':

Figura 8. Primer paso inicio de sesión en Scratch.

Llenamos el siguiente formulario:

Figura 9. Segundo paso inicio de sesión en Scratch.

Al final, sólo hacemos clic en 'Ingresar', para ingresar a nuestra cuenta de usuario.

2.3 Primer Proyecto

Para crear un proyecto en Scratch, iniciamos sesión (tal y como se mostró en la sección 2.2). En la siguiente captura se muestra cómo:

Figura 10. Creación de un nuevo proyecto en Scratch.

Enseguida tendremos la interfaz para empezar a programar a Scratch:

Figura 11. Interfaz para empezar a programar en Scratch.

3. Primeros Pasos en Scratch [Guía Básica]

Ahora ya empezamos a hacer más prácticos. Es momento de dar vida a nuestro primer proyecto en esta espectacular aplicación llamada Scratch. A continuación seguiremos una serie de pasos para empezar la creación de una animación muy sencilla utilizando todas las herramientas dispuestas para tal fin.

Al final de la guía tendremos habremos programado una animación que podremos publicar y compartir con nuestros conocidos y dar a conocer nuestro trabajo artístico (programático) en Scratch.

¡Vayamos al grano!

3.1 Agregar Movimiento

En la Figura 11 (sección 2.3) tenemos a disposición un sprite que corresponde con el logo o mascota de Scratch. Es el único que disponemos en la lista de objetos de la esquina inferior izquierda. De no ser así damos clic sobre él, y nos dirigimos a la pestaña 'Programas' y luego clic en la sección 'Movimiento':

Figura 12. Movimiento.

Una vez ubicado en la sección 'Movimiento', arrastramos el bloque 'mover 10 pasos' al lienzo ubicado más a la derecha; así:

Figura 13. Arrastrar bloque 'mover 10 pasos'.

3.2 Agregar Sonido

Además de movimiento, Scractch nos permite agregar bloques de sonido a nuestras animaciones para hacerlas más interactivas y atractivas.

Para agregar sonido, procedemos a la sección 'Sonido' y arrastramos un bloque 'tocar tambor 1 durante 0.25 pulsos'. Veamos:

Figura 14. Agregar sonido.

Como se muestra en la Figura 14, el bloque recién arrastrado de quedar unido al agregado en el primer paso.

El bloque de tambor que acábamos de agregar, posee diferentes tonos. Podemos escoger el que más nos guste para nuestra animación (yo voy a dejar el que viene por defecto):

Figura 15. Colección de tonos de tambor.

3.3 Agregar más Movimientos

Vamos a agregar otro bloque de movimiento como en la sección (paso) 3.1, pero en lugar de hacer que el sprite (gato) avance 10 pasos, le especificamos -10 (básicamente regresa a su posición inicial). Adicionalmente, también agregaremos otro toque de tambor. Como viene a continuación:

Figura 16. Más movimiento, más sonido.

3.4 Una y Otra Vez (Iterar)

Scratch posee estructuras de Control que nos permiten cambiar el ciclo de ejecución, hacer que un grupo de bloques se repitan una y otra vez (ciclo, o iteración), la detención de bloques (break), entre muchos más. Aquí vamos a aplicar la iteración a través de un bloque repetir.

Nos dirigimos a la sección 'Control', y arrastramos un bloque 'repetir 10' y hacemos que se aniden el grupo de las 4 instrucciones (o bloquese) creados hasta la sección 3.3. Miremos:

Figura 17. Una y otra vez. Estructuras de control.

Si queremos probar cómo va nuestra animación hasta este punto, basta con dar un clic sobre el bloque 'repetir 10'.

3.5 ¡Dí Algo Scratch!

Vamos a hacer que Scratch hable. Para este cometido, nos ubicaremos en la sección de bloques 'Apariencia', y arrastramos un bloque 'decir Hello! por 2 segundos'. Eso se hace así:

Figura 18. Dí algo Scratch.

Obsérvemos que hemos cambiado el texto por defecto del bloque 'decir Hello! por 2 segundos' por '¡Esto me gusta!', y evidentemente, este bloque ha quedo por encima del bloque 'repetir 10'.

3.6 La Bandera Verde: El Punto de Entrada de la Aplicación

Para aquellos que hayan tenido la oportunidad de programar en algún lenguaje de programación, dígase: C++, Java, C#; alguna aplicación muy sencillo, recordarán que para iniciar el proceso de ejecución, en el código fuente debimos a haber programado un método Main que es el punto de entrada para que se inicie la creación de objetos, la llamada a funciones, &c. En Scratch tenemos un elemento análogo para tal cometido: es la Bandera Verde.

Vamos a agregar esta bandera a nuestro lienzo de edición, y la ubicaremos por encima de todos los demás bloques. Para ello nos dirigimos al bloque de 'Eventos', y arrastramos el bloque 'al presionar [ícono bandera verde]':

Figura 19. Punto de inicio de la aplicación.

3.7 Cambiar Colores

Es el momento de hacer que la apariencia de nuestra animación, cambie. Para ello vamos nos vamos a dirigir a la sección de bloques 'Apariencia', y arrastraremos el bloque 'cambiar efecto [color] por [25]' a un área libre del lienzo, puede ser debajo de todas los demás bloques que hemos creado hasta el punto anterior. Miremos:

Figura 20. Agregar colores.

3.8 Respondiendo a Eventos

¿Pero cómo hacemos que el bloque de cambio de colores agregado previamente se active? La respuesta a eventos es la respuesta. Un evento es un suceso o actividad que sucede en un momento determiando, o al azar. Por ejemplo, la pulsación de una tecla de el teclado, o el clic de mouse. Iremos a programar la respuesta de la pulsación de tecla para que nuestro sprite Scratch cambie de color.

Nos dirigimos a la sección de bloques 'Eventos' y agregamos el bloque 'al presionar tecla [espacio]'. Y asigamos la tecla 'c' desde la lista desplegable (pestaña triangular) del bloque. Pillemos:

Figura 21. Respondiendo a eventos.

3.9 Scratch en la Disco

¿Ya la pista de baile? Vamos a agregarla.

Primero hacemos clic en 'Elegir un fondo desde la biblioteca' (esquina inferior izquierda de la interfaz) como se indica en la Figura 22:

Figura 22. Elegir un fondo desde la biblioteca.

A continuación, nos aparecerá un nuevo diálogo, nos dirigimos a la categoría 'Interiores' (panel izquierdo), y seleccionamos el fondo 'spotlight-stage':

Figura 23. Selección del fondo desde la Biblioteca de fondos.

Una vez seleccionado el fondo, damos clic en el botón 'OK', y obtendremos el siguiente resultado en la interfaz de programación principal:

Figura 24. Vista previa después de agregar el fondo.

3.10 Agregar más Elementos - Sprite

Agregaremos un nuevo sprite (Cassy Dance) desde la biblioteca de sprites. La idea es que Scratch esté acompañado en la disco. Para ayudarle sigamos estos pasos.

Sobre el panel de Objetos (esquina inferior izquierda) hacemos clic sobre 'Elegir un objeto desde la biblioteca':

Figura 25. Agregar un nuevo sprite.

En la 'Biblioteca de objetos' que tenemos en frente, vamos a la categoría 'Gente' (panel izquierdo), y seleccionamos el sprite (Cassy Dance):

Figura 26. Selección del sprite 'Cassy Dance'.

Basta con dar clic sobre el botón 'OK' y habremos agregado el sprite a nuestro canvas (o lienzo de edición) sobre la interfaz principal:

Figura 27. Acabo final después de agregar el nuevo sprite.

3.11 La Música de la Disco

La música no puede faltar en la disco, es por eso que vamos a agregarla de la siguiente manera:

Primero seleccionamos el fondo que agregamos en el paso anterior (3.10) desde el panel inferior izquierdo. Luego nos vamos a la pestaña 'Sonidos' (parte superior del lienzo de edición):

Figura 28. Pestaña de Sonidos.

[Nota: Si existe algún sonido asociado al fondo. Lo eliminamos dando clic sobre la equís ('X') superpuesto en el sonido.]

Desde la biblioteca de sonidos escogemos la categoría 'Bucles de música' desde el panel izquierdo. Para este ejemplo, voy a seleccionar el bucle 'techno':

Figura 29. Agregar un bucle de música a la disco.

Dejamos el nombre por defecto 'techno'. Apenas demos clic en el botón 'OK', obtendremos:

Figura 30. El sonido agregado a la disco.

Hasta aquí hemos agregado la música, ahora nos resta hacer un paso muy importante: hacer que se reproduzca cuando inicie la animación. Para esto nos dirigimos a la pestaña 'Programa':

Figura 31. Pestaña de programación.

Una vez que estemos en programa, nos dirigimos al 'Eventos' y arrastramos 'al presionar [icono bandera verde]', y luego sobre el bloque de 'Sonido', arrastramos 'tocar sonido techno' (dado que es el único sonido que hemos agregado al estudio, nos aparece 'techno'). Al final tendremos:

Figura 32. Lista la canción para la disco.

3.12 Animando el Sprite

Vamos a hacer que el sprite se mueva al ritmo de la música. Seleccionamos el sprite 'Cassy Dance', y en lienzo vacío de 'Programas', agregamos 'al presionar [icono bandera verde]', luego un bloque de control 'repetir 10', ahora vamos a 'Apariencia' y arrastramos un bloque 'siguiente disfraz' dentro del bloque anterior.

Nos resta un paso. Este consiste en agregar un bloque de control que pause por lo menos un segundo la transición de un disfraz a otro: 'esperar 1 segundos'. Tendremos:

Figura 33. Animación del sprite.

4. Sugerencias

Algunas segurencias antes de pasar a la etapa de publicación y comparticación:

• Especificar un nombre a nuestro proyecto. Esto lo hacemos desde la esquina superior izquierda.
• El proceso de guardado es automático. Sin embargo, podemos recurrir al menú 'Archivo' y luego dar clic sobre el comando 'Guardar ahora'.
• En la misma barra de menú encontramos el menú 'Sugerencias' para saber más acerca de Scratch.

5. Hora de Compartir

Para compartir damos clic en el botón 'Compartir':

Figura 34. Compartir animación.

Nos lleva a la vista previa del proyecto listo para reproducir:

Figura 35. Vista previa del proyecto terminado.

6. Resultado Final

Veamos lo que hicimos a lo largo de toda esta guía:

7. Ejemplos

En la página oficial de Scratch podemos encontrar cientos de ejemplos en diferentes cateogorías (Animaciones, Arte, Juegos, Música, &c.):

Figura 36. Ejemplos de Scratch.

Sitio oficial de ejemplos.

8. Conclusiones

Les he presentando esta increíble herramienta para la creación de herramienta siguiendo un enfoque programático visual: Scratch. Hemos aprendido cómo animar sprites arrastrando y soltando bloques de movimiento. También para se repitan durante cierto tiempo. A la animación agregamos fondos para enriquecer el ambiente de animación, aparte del sprite estándar, agregamos otro para que la animación quede más completa.

Por otro lado, añadimos otro elementos sonoros para que haya música en la disco. Esto se logró gracias al manejador de Sonidos incorporado en Scratch.

Para finalizar, aclaro que el producto de esta guía es algo muy sencillo y práctico. Sin embargo, se trata de una introducción y divulgación de Scratch para quienes deseen utilizarlo como recurso de enseñanza en la academia básica de iniciación a la programación o la algoritmia.

Glosario

- Bloque
- Control
- Disfraz
- Evento
- Scratch
- Sprite

Enlaces & Literatura

[1]: Scratch - Imagina, Programa, Comparte - http://scratch.mit.edu/
[2]: CS50x Course Info - https://courses.edx.org/courses/HarvardX/CS50x/2014_T1/info
[3]: Java (programming language), the free encyclopedia - https://en.wikipedia.org/wiki/Java_%28programming_language%29
[4]: Java How to Program, 7/e - http://www.deitel.com/Books/Java/JavaHowtoProgram7e/tabid/1191/Default.aspx
[5]: Logo (programming language), the free encyclopedia - https://en.wikipedia.org/wiki/Logo_%28programming_language%29
[6]: Turtle graphics, the free encyclopedia - https://en.wikipedia.org/wiki/Turtle_graphics
[7]: File:Turtle-Graphics Polyspiral.svg, the free encyclopedia - https://en.wikipedia.org/wiki/File:Turtle-Graphics_Polyspiral.svg
[8]: Scratch (programming language), the free encyclopedia - https://en.wikipedia.org/wiki/Scratch_%28programming_language%29
[9]: File:Scratch cat large.png, the free encyclopedia - https://en.wikipedia.org/wiki/File:Scratch_cat_large.png
[10]: Constructivist teaching methods, the free encyclopedia - https://en.wikipedia.org/wiki/Constructivist_teaching_methods

V