Conceptos pro scratch

INSTITUTO TECNOLOGICO SUPERIOR DE INFORMATICA IBARRA
CONCEPTOS DE PROGRAMACIÓN DESARROLLADOS
CON SCRATCH
En el proceso de creación de historias interactivas, juegos y animaciones con Scratch,
niños y jóvenes tienen una excelente oportunidad para desarrollar importantes habilidades
de pensamiento y para aprender conceptos de computación.
HABILIDADES DE SOLUCIÓN DE PROBLEMAS Y
DE DISEÑO
1. Razonamiento lógico
2. Resolver problemas de depuración
3. Desarrollar ideas a partir de una concepción inicial de proyecto
4. Mantener la atención constante y la perseverancia
IDEAS FUNDAMENTALES SOBRE
PROGRAMACIÓN Y COMPUTADORES
 Los programas indican al computador lo que debe hacer, de manera precisa y paso a
paso
 Programar computadores no requiere habilidades especiales, más allá de un
pensamiento claro y metódico
CONCEPTOS ESPECÍFICOS DE
PROGRAMACIÓN:
CONCEPTO EXPLICACIÓN EJEMPLO [1]
Secuencia Para crear un programa
en Scratch, se requiere
pensar
sistemáticamente sobre
el orden de los pasos.

Iteración
(ciclos)
por siempre y repetir
se utilizan para crear
iteraciones (repetición
de una serie de
instrucciones).
Variables Las variables sirven
para almacenar
números o cadenas de
caracteres (palabras).
Las instrucciones
correspondientes a
variables permiten
crearlas y usarlas en un
programa. Scratch
admite tanto variables
globales (para todos
los objetos) como
especificas para un
solo objeto.
Sentencias
Condicionales
si y si-no verifican si
una proposición simple
o compuesta es
verdadera (si se
cumple una
condición).
Entradas vía
teclado
preguntar y esperar
solicita a los usuarios
escribir algo mediante
el teclado.
respuesta es una
variable que almacena
lo último que se
ingresó vía teclado.
Manejo de
eventos
al presionar tecla y al
presionar objeto son
ejemplos del manejo
de eventos. Estas
instrucciones de
control responden a
eventos provocados
por el usuario o por
otra parte del
programa.

Hilos
(paralelismo)
Poner en marcha dos
pilas de instrucciones
al mismo tiempo hace
que se creen dos hilos
independientes que se
ejecutan en paralelo.
Números al
azar
La instrucción número
al azar entre
selecciona un número
entero dentro de un
rango dado.
Lógica
booleana
Las proposiciones
compuestas se forman
con dos o más
proposiciones sencillas
unidas por operadores
lógicos (y, o, no). Por
ejemplo: evaluar la
condición “variable
lados tiene almacenado
un valor menor o igual
a 9”.
Diseño de
interfaz de
usuario
Con Scratch se diseñan
interfaces de usuario
interactivas. Por
ejemplo, usar objetos
para que funcionen
como botones. Por
ejemplo, al hacer clic
sobre el objeto “Lápiz”
se ejecuta un conjunto
de instrucciones.

Coordinación
y
sincronización
La instrucción enviar
a todos manda un
mensaje a todos los
Objetos y espera a que
se ejecuten las
acciones de los
Objetos activados.
La instrucción al
recibir coordina
acciones de diferentes
objetos.
Este par de
instrucciones permiten
la sincronización.
Por ejemplo, cuando un objeto “envía a todos
defineTamaño”...
...entonces se ejecutan las instrucciones debajo
de la instrucción “al recibir defineTamaño”
Listas
(arreglos)
Las Listas son un tipo
de estructura de datos
que puede considerarse
un arreglo
bidimensional de “n x
1”. Con varias listas se
puede conformar una
matriz (arreglo
bidimensional de n x
m).
Las instrucciones
correspondientes a
listas permiten
almacenar y acceder
arreglos de números o
cadenas de caracteres.
Interacción
dinámica
Las instrucciones “x
del ratón”, “y del
ratón” y “volumen
del sonido” se pueden
utilizar como entrada
dinámica para
interactuar en tiempo
real con los programas
de Scratch.

NOTAS DEL EDITOR:
[1] Con el fin de darle mayor coherencia a los ejemplos de los diferentes conceptos, se
cambiaron los propuestos en el documento original en inglés por otros que giran en torno
al dibujo de polígonos regulares.

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

Conceptos pro scratch

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Conceptos pro scratch

Similar a Conceptos pro scratch (20)

Último

Último (20)

Conceptos pro scratch