Inicio » Aprende » Programación » Creando web apps con Scratch

Creando web apps con Scratch

En esta entrada voy a hablar sobre Scratch, un proyecto gratuito y abierto mantenido por el MIT (Massachusetts Institute of Technology), que permite a cualquier persona hacer juegos y aplicaciones compatibles con cualquier navegador web. Además, es muy fácil de usar, ya que usa una lógica intuitiva basada en arrastrar y soltar. En primer lugar vamos a ver el funcionamiento básico y luego una aplicación que hice yo con esto para explicar algunos conceptos básicos de programación de forma sencilla.

Una vez en la web de Scratch, veremos tres opciones arriba que nos permiten crear, ver ejemplos o registrarse en el servicio, y debajo algunos proyectos destacados, que podéis ver para haceros una idea sobre las posibilidades de esta herramienta. Una vez listos, hay que crearse una cuenta (no es obligatorio pero es muy recomendable debido a que si no no se pueden guardar los proyectos). Esto no nos llevará más de un minuto. Una vez iniciado sesión, hay que pulsar en el botón “Crear” de la barra superior. Ahora veremos un entorno formado por una pantalla y una especie de carpeta a la izquierda y un gran espacio a la derecha en el que hay tres pestañas: “Programas”, “Disfraces” y “Sonidos”. En el primero aparecen muchos bloques clasificados en diez categorías que pueden ser arrastrados al espacio de la derecha. En disfraces podremos configurar las apariencias del muñeco (llamado técnicamente objeto) que está en la pantalla del proyecto y en sonidos las voces, ruidos, etc. que podrá decir el objeto. En la parte de la izquierda podemos ver nuestro juego o aplicación y abajo aparecerán los personajes con los que estamos trabajando (por defecto es un gato pero se puede borrar o añadir más). También permite cambiar el escenario (el fondo) por un dibujo hecho en el navegador, por una fotografía de tu ordenador o de la librería de Scratch o tomar una con la cámara web.

Ahora que ya conocemos la estructura del servicio, queda lo más importante: como hacer funcionar todo. Antes de nada hay que tener pensado lo que vamos a hacer, tal como sucede en la programación. Una vez que está clara la idea, hay que pasarla al proyecto. En este caso, al hacer clic en un objeto, a la derecha podremos empezar a asignarle acciones. En la categoría “Eventos” están lo que en algunos lenguajes de programación (como en Java) se les llama interfaces: permiten realizar algo cuando sucede una acción, como que el usuario pulsa algo. Por ejemplo, podemos arrastrar el evento “Al clickear este objeto” y empezar a unirle las acciones debajo, de forma que empezarán a ejecutarse cuando el usuario pulse en él. Con los bloques de “Movimiento”, “Apariencia” y “Sonido” podemos controlar el comportamiento del objeto. Con “Lápiz” podemos dibujar en la ventana. “Sensores” incluye bloques como preguntas, fecha, posición del ratón, etc. En último lugar, tenemos los operadores, los controles y los datos, que son esenciales a la hora de hacer proyectos que tengan que usar una lógica matemática (por ejemplo en una animación esto no nos haría falta, pero en un juego sí). Por ejemplo, si queremos que al pulsar en el objeto diga “Mi primera aplicación” durante 3 segundos y nos pida nuestro nombre, para después decir “Te llamas…”, tendríamos que arrastrar el bloque de “Al clickear este objeto” y unirle el bloque lila de “Apariencia” que pone “decir () por () segundos”, metiendo en los espacios lo que tienen que decir y en segundos el tiempo. Después debajo le acoplamos el sensor “preguntar () y esperar”. Finalmente, debajo le añadimos “decir ()” poniendo en el hueco el operador “unir ()()” y metiendo en el primer espacio “Te llamas ” y en el segundo arrastrando el bloque de respuesta en la categoría “Sensores”.

Ahora que ya sabes como funciona esto, voy a enseñarte el proyecto que hice yo. Se trata de un “Felicitador”, que te pregunta tu edad y te dice “Tienes () años”, y en caso de ser menor de edad te felicita por todos los años que cumpliste. Aunque sea en si una tontería, permite ver conceptos de la programación como los condicionales if, bucles while, variables y operaciones. Aunque yo como objeto usé un chico, cualquier cosa nos vale. Una vez seleccionado, hay que arrastrar la interfaz “Al clickear este objeto” y acoplarle debajo el sensor de pregunta, diciendo “¿Cuántos años tienes?”. Ahora tendremos que crear una variable, a la que llamaremos “edad”. Una variable es un valor modificable que se almacena en la memoria del ordenador bajo un identificador (en nuestro caso “edad”). Es algo básico en el desarrollo de software. Para ello, nos dirigimos a “Datos” > “Crear una variable”. Con ella lista, tendremos que arrastrar el bloque “fijar () a ()” y en el primer espacio colocaremos la variable y en el segundo el bloque “respuesta” en “Sensores”. Ahora toca procesar la respuesta, por lo que uniremos debajo un control “si () entonces, si no” (llamado if en programación). La condición para que se ejecuten los bloques del primer espacio será que la edad supere los 17 años (es decir, adulto). Para lo que sucede si es menor de edad tendremos que arrastrarlo a “si no”. Por lo tanto, la condición a colocar en el hueco es el operador edad > 17. Ahora dentro del primer espacio grande metemos el bloque de “decir () durante () segundos”. En el segundo espacio pondrás el tiempo que quieras, y en el primero “unir (“Tienes “)(unir(edad)(” años”)” (sin las comillas: quiere decir que son strings, es decir, caracteres escritos). Debajo puedes poner un decir (sin tiempo) que ponga que si el usuario desea reiniciar la aplicación que pulse en el muñeco. Ahora viene el else, parte algo más complicada. Repetiremos el primer bloque del código anterior, aunque poniendo que eres menor de edad. Debajo pondremos el de movimiento llamado “ir a x:() y:()”. Ahí podemos poner la posición que deseemos. Ahora hay que crear otra variable, llamada “bucle”, que tenga el valor de 1 (los años con los que empezaremos a felicitar al niño). En “Control” hay un bloque que se llama “repetir hasta que ()”. En la programación de código se conoce como bucle while, y repetirá lo que pongamos dentro indefinidamente hasta que la condición se cumpla. En nuestro caso la condición es que “bucle” sea igual a “edad”. Dentro del bucle hay que hacer que nuestro objeto diga “Felices… años” durante el tiempo que queramos, siendo … la variable “bucle”. Luego hay que fijar su valor a ella misma más 1. Así esto se repetirá hasta que llegue a la edad del usuario. Por último, fuera del bucle pero dentro del “si no” hay que devolver al muñeco a la posición original con “ir a x:() y:()” y decir lo de que pulses en él para volver a empezar.

Así ya queda nuestra aplicación lista, pero si queremos también podemos acoplarle todo este código al evento de pulsar en la bandera verde, de forma que funcione como botón de reinicio. Para eso puedes duplicar la sucesión de bloques con el botón derecho del ratón y colocarlos debajo de la nueva interfaz. Os dejo aquí un vídeo en el que explico todo este proceso de una forma más gráfica:

[youtube https://www.youtube.com/watch?v=v9mBQgp1lN8]

Con este divertido sistema, hemos aprendido algunos conceptos básicos de la programación, tales como las variables, bucles, condicionales, operaciones, etc. Próximamente traeré algo ya sobre programación de código, para ir introduciéndose en los lenguajes más avanzados, tales como Java. Si hacéis algún proyecto con esto, poned el enlace en un comentario.

¡No te vayas sin dejar un comentario!