Ejercicio: Introducción a Scratch

De Edutec Wiki
Saltar a: navegación, buscar


Scratch

Scratch es un entorno de programación creado en el Massachusetts Institute of Technology (MIT) como resultado de la investigación llevada a cabo en el Lifelong Kindergarten Group. Heredero directo de los esfuerzos construccionistas (basados ​​en el constructivismo de Piaget) de Seymour Papert con el LOGO de los años setenta y ochenta, aprovecha los cambios tecnológicos acaecidos desde entonces para mejorar sustancialmente la interfaz del entorno para facilitar y hacer más atractiva y golosa la programación de ordenadores.

La nueva versión de Scratch funciona sobre la web y no necesita instalación, por lo que la podrá utilizar desde cualquier sistema operativo sin problemas. No importa si utiliza un Mac, Linux, o incluso Windows.


Introduccion Scratch 01.jpg


Primer contacto

Para acceder a Scratch es necesario que nos dirigimos a su web oficial: http://scratch.mit.edu/

Una vez allí, nos encontraremos con una pantalla similar a esta:


Introduccion Scratch 02.png


Para poder guardar y compartir nuestros proyectos, primero será necesario que nos registremos. Podemos hacerlo pulsando Únete a Scratch, en la esquina superior derecha de la página.

Al hacer clic en ella, nos encontraremos con una ventana de diálogo como ésta:


Introduccion Scratch 03.png


Una vez que haya seguido los pasos y tenga una nueva cuenta de usuario, podremos empezar a crear proyectos. Para hacerlo, pulse sobre Crear, en la esquina superior izquierda de la pantalla:


Introduccion Scratch 04.png


Si todo ha ido bien, debería tener ante sus ojos la interfaz principal de Scratch, similar a ésta:


Introduccion Scratch 05.png


La interfaz a grandes rasgos

Una vez tenemos el programa abierto, ya habéis visto el aspecto que tiene, podemos distinguir varias partes. A grandes rasgos son:


Introduccion Scratch 06.png


Podemos distinguir en función del color con que hemos rodeado cada zona:

  • Naranja: Las diferentes categorías de las instrucciones.
  • Verde claro: Las instrucciones correspondientes a la categoría seleccionada
  • Granate: Botones con diferentes opciones
  • Rojo: Escenario donde tendrán lugar nuestras animaciones
  • Marrón: Botones para manipular los objetos del escenario
  • Verde oscuro: Zona de objetos y fondo del escenario
  • Azul cielo: Características del objeto elegido en la zona de objetos
  • Azul oscuro: Botones varios (pantalla completa, editor de dibujos, etc)
  • Amarillo: Zona de programación
  • Rosa: Botones para poner en marcha y detener la ejecución del programa.


No sufra, iremos viendo cada una de estas zonas con detalle a medida que vayamos avanzando. Este resumen lo hemos hecho porque el entorno le resulte algo menos misterioso. Como puede ver, quedan algunas zonas sin explicar, pero ya iremos profundizando más adelante, a medida que nos haga falta.


Un fenómeno social y global

Scratch es un fenómeno internacional. Cualquier programa que haga en este entorno se puede compartir con el resto del mundo sólo pulsando el botón caption

Una vez hecho esto el programa hará disponible su proyecto a toda la comunidad.

¿Cuántos proyectos hay registrados a día de hoy (cuando escribo esto, octubre de 2014)? Fíjese (y sorpréndase!)

Introduccion Scratch 27.png

Más de cuatro millones y medio de proyectos hechos por gente de todo el mundo !! Piense que todos y cada uno de estos proyectos pueden ser descargados, ejecutados, analizados y modificados por usted mismo.

Programa de ejemplo

Desea ver qué pinta tiene un programa hecho y acabado? Aunque sea sólo para satisfacer la curiosidad, elegiremos uno de los juegos más populares de la historia de la informática, pero programado en Scratch.

Para acceder, siga este enlace: http://scratch.mit.edu/projects/10016238/#editor

Y ya podrá jugar a una versión del PacMan de toda la vida! Con la banderita verde para poner en marcha el juego y el botón rojo para detener (caption) puede pasar un buen rato:


Introduccion Scratch 29.png


Fíjese un momento en todas las regiones en las que antes hemos hecho hincapié, qué aspecto tienen ahora que hay un programa cargado? Las categorías de las instrucciones y las instrucciones no son diferentes, pero en la zona de programación hay uno, o más, programas; en la figura vemos un trozo del programa asociado al comecocos, seleccionado en la zona de objetos. También hay que destacar como el fondo del escenario no es blanco (podemos poner lo que queramos!) Y todo el juego se desarrolla en el escenario. Esto será siempre así. Nuestros programas manipularán objetos que tendrán como espacio de actuación del escenario. Allí podrán interaccionar con otros objetos.

Evidentemente no queremos que entendáis esto ahora mismo!! Esto ha sido una muestra de lo que es capaz de hacer una vez que haya terminado el curso. El límite? Su imaginación ...


Posición y dirección de los objetos

La parte enmarcada en rojo en el capítulo anterior es el escenario donde nuestras animaciones harán lo que presumiblemente querremos que hagan. Tenga en cuenta que puede capturar (hacer clic sobre) el gatito con el ratón y (sin dejar de pulsar el botón del ratón) moverlo donde desee. Mientras haga este movimiento, fíjese tanto en la zona azul cielo como en la zona azul oscuro. Veis que los números asociados a 'x' y 'y' van cambiando, al igual que los números asociados a 'ratón x' y 'ratón y'


Introduccion Scratch 07.png
Introduccion Scratch 08.png


Cada objeto que aparezca en el escenario está en una posición determinada, que viene dada por sus coordenadas (de hecho, las coordenadas de su centro; hablaremos más adelante). ¿Dónde está el origen? Pues exactamente en medio del escenario. En el centro mismo del escenario está el punto (0,0), y el escenario tiene 480 píxeles de ancho por 360 píxeles de altura. Por tanto, la coordenada x tomará valores que van desde -240 hasta +240, y la coordenada y desde -180 hasta +180. Vea los valores de las coordenadas del ratón cuando el mueva sobre el escenario e intente ponerlo en sus valores límite.

Además de una posición, cada objeto dentro del escenario tiene una dirección. Para ver la dirección de un objeto, tendremos que acceder a la vista de propiedades de este objeto pulsando sobre su icono de información:


Introduccion Scratch 09.png


Tenga en cuenta que, pulsando y arrastrando sobre el icono de dirección, el gato gira sobre su centro de rotación y el apartado 'dirección' de la zona de propiedades del objeto va cambiando de valor:


Introduccion Scratch 10.png


La dirección del objeto, el gatito en nuestro caso, puede tomar valores entre -180 y +180. Nos indicarán los grados desde la vertical, positivos en el sentido de las agujas del reloj y negativos en sentido contrario.


Introduccion Scratch 11.png


Todos los objetos que aparezcan en el escenario tendrán una posición y una dirección.


Duplicar, eliminar, y cambiar el tamaño de los objetos

Los objetos del escenario pueden ser manipulados fácilmente con los botones que en la primera figura enmarcábamos con el color marrón.


Introduccion Scratch 12.png


Estos cuatro botones permiten:

Tampón: Permite duplicar el objeto del escenario sobre el cual aplicamos el tampón. En la figura vemos qué pasa si la aplicamos seis veces. Nótese que en la zona de los objetos (enmarcada en verde oscuro en la primera figura de esta práctica) aparecen nuevos a medida que vamos creando.


Introduccion Scratch 13.png


Tijeras: Permiten eliminar un objeto del escenario. Hay que seleccionar el botón y posicionarse sobre del objeto haciendo clic.


Introduccion Scratch 14.png


Agrandar: El botón con las flechas saliendo hacia fuera del icono permite hacer el objeto más grande.

Encoger: El botón con las flechas entrando dentro del icono permite hacer los objetos más pequeños.


Introduccion Scratch 15.png


Objetos nuevos

Lo que nosotros hemos llamado 'Objetos' Scratch los llama 'Personajes'. Tanto es, el caso es que no sólo podemos trabajar con el gatito!

Los cuatro botones caption nos permiten obtener nuevos objetos de maneras diferentes.

  • caption Permite coger uno de los objetos que ya vienen con el Scratch (hay muchos!). Si hace clic encima, podrá elegir entre las diferentes categorías que agrupan los objetos por temas.
Introduccion Scratch 16.png

 

  • caption Permite abrir la herramienta de dibujo para crear un objeto nosotros mismos. Este editor de dibujos funciona como otros editores de dibujos que seguramente ya conoce (por ejemplo el Paint de Windows). Sobre la marcha iremos viendo aquellos aspectos no estándar de la herramienta.
Introduccion Scratch 17.png

 

  • caption Permite cargar un objeto desde su ordenador. Cualquier archivo de imagen es válido.
  • caption Permite capturar una imagen con tu cámara web. Así, puede hacer que objetos del mundo real se vean representados en su programa!

Ahora sería un buen momento para practicar con los objetos. Usted mismos puede jugar con las cuatro opciones. De momento, siga sus intuiciones a la hora de utilizar el editor de dibujos. Es muy parecido a programas clásicos que más o menos todos hemos utilizado alguna vez, como el Paint.

Las herramientas para programar

Ahora tiene un cierto dominio sobre la manipulación de los objetos dentro del escenario. Sabe cómo borrarlos (tijeras), duplicarlos (tampón), crear otros nuevos (editor de dibujos), etc.

Pero Scratch es un entorno para aprender a programar y eso es lo que deberíamos empezar a hacer sin más preámbulos.

En esta práctica intentaremos explicar aquellas partes del entorno que nos servirán para programar, y también a empezar a hacer algunos programitas sencillos.

Donde programaremos?

  • Las instrucciones están categorizadas según lo hacen. Tiene un marco con un botón por categoría. Si pulsa cualquier botón de estos obtendrá, en la zona de abajo, las instrucciones correspondientes a esta categoría.


Introduccion Scratch 23.png


  • Las instrucciones de cada categoría vienen con el mismo color que el botón de la categoría: Azul por el movimiento, lila por el aspecto, etc He aquí uno de los puntos fuertes de Scratch: las instrucciones son bloques !, y con los bloques construiremos (literalmente !!) programas.


Introduccion Scratch 24.png


  • La zona (hasta ahora) vacía es el lugar donde pondremos nuestros programas. Tenga en cuenta que esta región está vinculada estrechamente al objeto seleccionado en el lienzo que puede ver remarcado en la zona de objetos. Cuando ponemos el programa en esta región, este será un programa asociado a un objeto específico del lienzo. En la figura se puede ver que tenemos seleccionado el gatito rosa, por lo tanto si hiciéramos un programa, éste sería un programa asociado a este gatito.


Introduccion Scratch 25.png


Un programa es una lista organizada de instrucciones que, al ejecutarse, hacen que el ordenador se comporte de una manera determinada. Programar será, por tanto, partir de una tarea concreta e intentar proporcionar unas instrucciones al ordenador para que haga lo que nosotros queremos.

Piense que de programar se aprende programando. No hay atajos. La única manera de ser competentes programando es practicando mucho. Esto quiere decir, equivocándose os mucho. Que nadie se decepcione por hacer errores en sus programas, éste es el proceso habitual. De hecho, esta es una de las partes más divertidas de programar. Posiblemente estará gran parte de su tiempo jugando a detectives, o resolviendo puzzles, actividades equivalentes a encontrar errores en sus programas.

Cómo se hace esto en Scratch? Empezamos desde cero (recuerde que elegir la opción 'Nuevo' bajo el menú 'Archivo' para restablecer el estado de su entorno). Lo primero de todo es hacer que el gatito haga cosas sencillas.

Para añadir instrucciones a un programa, las arrastraremos de la zona de instrucciones en la zona de programación con el ratón (haremos clic sobre la instrucción y, sin soltar el botón del ratón, moveremos la instrucción donde queremos). En la figura hemos cogido y arrastrado tres instrucciones diferentes hacia la zona de programación:


Introduccion Scratch 30.png


Haga doble clic sobre cada una de las tres instrucciones en la zona de programación y fíjese en el gatito del escenario. Si hace doble clic sobre la instrucción de mover, veremos el gatito moviéndose 10 pasos adelante (en la dirección que tiene asociada). Si hace doble clic sobre la instrucción de girar, veremos como cambia la dirección del gatito, y haciendo doble clic sobre la instrucción de ir, el gato vuelve al origen.

Estos espacios en blanco con números dentro de cada instrucción-bloque son editables. Probamos de cambiar el 10 de la instrucción de mover por un 100 y haga doble clic sobre la instrucción. ¿Qué veis? Que el gato se mueve 100 pasos en lugar de 10.

De hecho, lo que tenemos ahora son tres programitas (cada uno de una sola instrucción) que afectan al mismo gatito. Los ejecutamos (ejecutar es llevar a cabo la instrucción o instrucciones de un programa) haciendo doble clic encima.

Pero normalmente querremos combinar instrucciones para hacer programas más largos y sofisticados. En Scratch, combinaremos las instrucciones pegándolas, una debajo de la otra, de manera que se ejecutarán primero las que están más arriba (si desea ser rigurosos, de ello llamaremos estructura secuencial). Como ejemplo ahora podemos combinar las tres instrucciones que hemos puesto hace un rato dentro de la zona de programación:


Introduccion Scratch 31.png
Introduccion Scratch 32.png


Pegamos las instrucciones sencillamente arrastrando una instrucción hasta ponerla debajo de la instrucción que debe ejecutarse antes. En la figura ya hemos pegado la instrucción de mover la instrucción de ir, y estamos a punto de pegar (izquierda) la instrucción de girar. A la derecha vemos el resultado final. Cuando estamos a punto de enganchar una instrucción nos aparecerá una raya blanca indicando donde se enganchará la instrucción que estamos arrastrando. Más adelante nos será muy útil.

Ahora ya tenemos un programa con tres instrucciones. Se ejecutará de la siguiente manera:

  1. Primero mover el centro de coordenadas del gatito a la posición con coordenada x igual a 0 y coordenada y igual a 0 (el centro del escenario).
  2. Después mover el gatito en la dirección correspondiente (90 si no lo hemos tocado), 10 pasos
  3. Finalmente girará el gatito 15 grados en sentido contrario a las agujas del reloj (girar un número positivo de grados significa girar en el sentido contrario a las agujas del reloj).

Y lo ejecutaremos haciendo doble clic sobre el programa (los tres bloques pegados).

La bandera verde

Sin embargo, es más habitual en Scratch ejecutar los programas pulsando la bandera verde (arriba a la derecha). Es muy fácil hacerlo, ya que sólo tenemos que poner la instrucción correspondiente. Hacemos clic sobre el botón de la categoría de instrucciones eventos '(rodeado rojo en la figura) y arrastramos en la zona de programas la instrucción' cuando la bandera verde se pulse '(cercado verde). Después, arrastramos el programa debajo de la instrucción que acabamos de añadir (cercado azul)


Introduccion Scratch 33.png


El resultado final es el programa


Introduccion Scratch 34.png


Fijémonos ahora que nuestro gatito hará lo mismo que antes, pero cuando pulsamos la bandera verde. Hacemos clic en la bandera verde varias veces. ¿Qué pasa? Sabrías explicar por qué pasa lo que veis?

Añadamos sonido

Tenemos diez categorías de instrucciones, y en cada categoría de instrucciones podemos encontrar un buen número de instrucciones que podemos utilizar en nuestros programas. No nos dedicaremos a explicar una a una todas las instrucciones que pone a nuestra disposición Scratch. Esto sería bastante aburrido. Lo que haremos es ilustrar con ejemplos las posibilidades de Scratch y, a medida que necesitamos diferentes instrucciones, las iremos utilizando y explicando, si es necesario.

Continuamos con el programita que hemos empezado a hacer. Imaginemos ahora que queremos que el gatito haga algún tipo de ruido. Podemos elegir la categoría 'Sonidos' y añadir la instrucción-blog 'tocar sonido' (eligiendo 'gato' en el desplegable del bloque) en el programa.


Introduccion Scratch 35.png


Ahora, cuando pulse la bandera verde verá que el gato hace lo que ya sabemos y, además, maúlla.

Los vestidos

Los objetos pueden tener diferentes vestidos. Sin salir del programita sencillo con el que estamos trabajando, seleccione la pestaña 'Trajes'.

Introduccion Scratch 36.png

Tenga en cuenta que el gatito tiene dos vestidos, llamados 'costume1' y 'costume2'

Introduccion Scratch 37.png

Si volvemos a la pestaña 'Programas' y hacemos clic sobre el botón de la categoría 'Aspecto', podemos añadir (arrastramos desde la lista de instrucciones de la categoría 'Aspecto') a nuestro programita la instrucción 'siguiente vestido'. Hagámoslo y vemos qué pasa:

Introduccion Scratch 38.png

Pulsamos la bandera verde varias veces y fijémonos que los vestidos del gatito se alternan en cada clic en la bandera verde (y todavía va girando cada vez, ya sabéis el por qué?). Este cambio de vestidos será la base de las animaciones hechas con Scratch. Todavía nos queda, sin embargo, algo de camino por delante.

Si ahora quisierais no tener que hacer clic en la bandera verde para repetir la acción, como lo haría? No podría hacerlo aún. Hay ciertas estructuras de programación que todavía no hemos visto. En la próxima práctica veremos construcciones básicas que nos permitirán hacer programas más sofisticados.

Antes hemos dicho que a programar se aprende programando, pues ya podemos empezar.

Por cierto, queda un pequeño detalle. Si queremos eliminar de la zona de programación cualquier instrucción, la arrastraremos hacia la zona de instrucciones y, sea cual sea la categoría seleccionada, desaparecerá! Exactamente lo mismo podemos hacer con un conjunto de instrucciones pegadas.


Introduccion Scratch 39.png