CAPACITACIONES EN MANEJO DE HERRAMIENTAS TIC. MODULO DE PROGRAMACIÓN EN SCRATCH.

GUÍA DE TRABAJO

Desarrollado por: JHON EDWARD VARGAS VASQUEZ

CORPORACIÓN TECNOCENTRO CULTURAL SOMOS PACÍFICO 2015

GUIA SCRATCH

INTRODUCCIÓN La programación es un proceso que involucra el diseño, la codificación y depuración con el objetivo de crear un programa computacional el cual cumple una función o ejecuta una determinada tarea de forma automática o en interacción con las ordenes de un usuario. Este proceso requiere de diversas habilidades de pensamiento de orden superior dándole un lugar de gran importancia dentro del contexto educativo en la medida en que ayuda a fortalecer las destrezas para la solución de problemas, el desarrollo del pensamiento algorítmico y promueve la creatividad. El conjunto de órdenes o códigos que contiene un programa se expresa en un lenguaje que comprende el computador, este lenguaje es formal y como todo lenguaje sigue un conjunto de reglas que el programador debe conocer. Existen una gran cantidad de lenguajes de programación que se pueden clasificar por las reglas que comparten o se pueden clasificar en su nivel de detalle; muchos de ellos son lenguajes escritos sin embargo algunos lenguajes se han desarrollado de forma gráfica como el caso de SCRATCH. SCRATCH como lenguaje de programación, está diseñado para que los principiantes aprendan a programar empleando correctamente los conjuntos de reglas que requieren los lenguajes de programación de alto nivel, sin embrago haciendo uso de una interfaz gráfica simple y entretenida que permite introducirse y jugar con la programación de computadores. Esta herramienta fue desarrollada por el laboratorio de medios del MIT (Instituto Tecnológico de Massachusetts. EEUU) y lanzada por primera vez en 2007, es un software gratuito y actualmente se encuentra en su versión 2.0 en línea (https://scratch.mit.edu/) que permite tener acceso desde cualquier lugar con conexión a internet a las historias interactivas, animaciones y juegos programados; como también compartirlos con una gran comunidad dándole fuerza a su eslogan: imagina, programa y comparte . SCRATCH dispone además de una versión que se puede instalar en varios sistemas operativos si no se tiene acceso a internet. De esta manera, el objetivo de esta guía es dar una aproximación básica al mundo de la programación de la mano de SCRATCH, una de las mejores herramientas para comprender la lógica de la algoritmia de una manera simple pero eficiente e intuitiva con entorno amigable; y proporcionar las instrumentos para expresar ideas de forma creativa, creación interactiva de animaciones, juegos y música.

CONTENIDO

Reconocimiento del entorno de scratch. 1. Primero debemos ingresar a https://scratch.mit.edu/ si vamos a

utilizarlo en línea o dar clic sobre el icono del programa.

2. En la versión en línea si no tenemos una cuenta la podemos crear de forma gratuita dando clic en el

siguiente botón. Nos pedirá un correo electrónico y crear una contraseña para acceder a nuestra cuenta.

Esto permitirá tener acceso desde internet a nuestros programas. 3- A continuación observamos el entorno de trabajo de SCRATCH

Idioma: Con este icono puedes cambiar el idioma de scratch Pantalla completa: Este icono permite para a la visión de pantalla completa donde podrás a preciar con más detalle el resultado de la programación y realizar una presentación. Título del proyecto: En esta sección le das un nombre al proyecto que empiezas a construir para nuestro caso puedes llamarle “primerproyecto”. De esta forma lo puedes identificar fácilmente entre las carpetas. Escenario: En esta zona se observa el resultado de la programación de los objetos. Durante el desarrollo del proyecto el escenario se representa como un plano cartesiano de coordenadas X (horizontal) y Y(vertical) cuyo centro es la posición (0,0) y de esta manera se posicionan los objetos sobre este. Área de programas: Como su nombre lo indica es la zona donde se ubican los bloques que permiten crear un programa para cada objeto, esto quiere decir que cada objeto tiene su área de programación. Pestañas de objeto: Las pestañas permiten acceder al programa, los disfraces o sonidos de un objeto en particular ya sea para crear o editar lo existente. Lista de objetos: En esta zona se ubican todos los objetos que hemos creado para nuestro proyecto. Herramientas de escenario: Aquí se encuentra las herramientas para crear nuevos escenarios, ya sea empleando una imagen desde archivo o creando un dibujo. Paleta de bloques: En esta sección se encuentran todos los bloques de programación para cada objeto clasificados en grupos por funciones que se diferencian por sus colores. Estos bloques son arrastrados al área de programa para definir las funciones del objeto. Coordenadas de objeto: Este es un icono que informa sobre la posición (x, y) sobre el escenario del objeto observado. Herramientas de Cursor: Estas herramientas permiten actuar sobre los objetos en el escenario, ya se para cambiar su tamaño, borrar o duplicar.

Iniciar programa. El icono de la bandera verde es el que da inicio al programa construido procediendo a mostrar los resultados en el escenario Detener programa: detiene el programa sin regresar a la posición inicial del mismo, es decir si se ha cambiado la posición de un objeto durante la ejecución este no regresa a su posición inicial cuando se presiona parar.

Manejo de instrucciones básicas a objetos. (Movimientos) En la interfaz principal del programa encontramos el gato “scratch” que dio nombre al programa, con este vamos a aprender a generar movimientos básicos en objetos. A continuación vamos a realizar un ejercicio guiado con el cual se presentaran las funcionalidades básicas del software Scratch. 1- Vamos a la paleta de bloques y seleccionamos el conjunto de eventos.

2- Tomamos el bloque y lo arrastramos al área de programa.

Este bloque da inicio al programa de un objeto cuando se presiona la bandera verde Este bloque siempre debe colocarse al inicio de un programa. Los demás bloques del conjunto eventos permiten iniciar programas respondiendo a diferentes acciones como: oprimir la tecla espacio.

3- Ahora seleccionamos el conjunto de movimientos en la paleta de bloques.

4- Arrastramos el bloque al área de programa y lo ubicamos

debajo del bloque de inicio. Presionamos ahora la bandera verde. Con esto hemos logrado que el gato scratch se desplace un espacio cada vez que presionamos la bandera verde. Podemos ubicarnos sobre el bloque “mover” y modificar la cantidad de movimiento ya sea a 20 o 50 y observar el resultado. Ahora si ponemos un valor negativo como: observamos que se desplaza en la dirección opuesta. 5- Quedémonos con mover 10 pasos. Ahora vamos al conjunto de bloques de

control y arrastramos el bloque “por siempre” debajo de “al presionar”. Esta acción incluirá el bloque “mover” en el interior y permitirá que el gato se mueva indefinidamente solo presionando la bandera verde una vez.

Haciendo clic izquierdo sobre cualquier bloque podremos encontrar información sobre su función

Ejecutando este programa observamos que el gato se mueve hasta el borde del escenario y se queda allí. Ahora, queremos que el gato llegue a los bordes y rebote indefinidamente. 6- Del conjunto de bloques movimiento, tomamos y lo arrastramos justo debajo

del bloque “mover” Si presionamos la bandera verde observamos que el gato empieza a rebotar en el escenario hasta que presionemos el botón de detener programa En este caso vemos que el gato rebota pero se pone de cabeza. Para cambiar este efecto realizamos el siguiente paso. 7- Vamos al listado de objetos y damos clic sobre el símbolo de información que se encuentra

sobre el gato.

Esto despliega la información del objeto En este cuadro podemos observar: el nombre del objeto, su posición actual, la dirección o ángulo en el que se desplaza, el estado de visibilidad en el escenario (mostrar, o no mostrar) y el estilo de rotación. 8- Cambiamos el estilo de rotación a izquierda-derecha Luego de seleccionar esta opción podemos iniciar nuevamente el programa presionando la bandera verde. En esta ocasión el gato se desplaza sin ponerse de cabeza entre los bordes laterales Si también modificamos la dirección a un ángulo diferente a 90° veremos como el gato rebota por todo el espacio. 9- Ubicamos nuevamente la dirección a 90° y arrastramos el gato al centro del escenario.

Explore, haciendo que el gato se mueva trazando un cuadrado, un círculo o cualquier figura geométrica

10- Ya identificamos como el gato se desplaza dentro del escenario. Escogiendo diferentes bloques del conjunto movimiento podemos crear diferentes tipos de desplazamientos con giros.

11- Regresamos al punto 9. Hasta aquí se ha programado el movimiento del gato scratch en dirección

horizontal rebotando en los bordes. Sin embargo el gato parece flotar por el escenario. ¡Vamos a hacer que camine!

Cambio de Disfraces 12- Damos clic sobre la pestaña disfraces donde se despliega la siguiente interfaz.

Lista de disfraces: Nos muestra los disfraces disponibles para el objeto y nos permite crear nuevos disfraces usando los siguientes iconos:

a) Seleccionar un disfraz de la biblioteca de Scratch la cual cuenta con diversas opciones clasificadas por temas, categorías o tipo de imagen (vector o mapa de bits)

b) Pintar un nuevo disfraz. Con esta opción podemos hacer uso del editor de pinturas para diseñar un disfraz.

c) Cargar un disfraz desde archivo. Podemos utilizar una imagen en nuestro computador como disfraz para el objeto.

d) Nuevo disfraz desde cámara. Haciendo uso de la cámara del computador podemos tomar una foto, editarla con el editor de pinturas y usarla como un disfraz para el objeto.

Editor de pinturas: En esta zona podemos editar o crear nuevos disfraces haciendo uso de diversas herramientas. Más adelante nos enfocaremos en el editor de pinturas. En scratch un disfraz es la apariencia de un objeto (cada objeto tiene sus disfraces) y por medio de estos podemos generar cambios en el objeto durante la animación, por ejemplo cambiar de color, ropa o pasar de “feliz” a “triste”. En este caso los vamos usar para hacer que el objeto camine. El gato ya tiene dos disfraces disponibles (costume1 y costume2) los cuales se diferencian en la posición de las piernas, de esta forma, un intercambio repetitivo entre disfraces crea la ilusión de caminar.

13- Conociendo los disfraces disponibles para el gato, regresamos a la pestaña programa y seleccionamos el conjunto de bloques apariencia.

14- Tomamos el bloque y lo arrastramos por encima

Del bloque “mover”. El bloque “cambiar disfraz a” tiene una lista desplegable que muestra los disfraces disponibles.

15- Ahora tomamos nuevamente el bloque “cambiar disfraz a”, lo arrastramos debajo del bloque “mover” y seleccionamos costume2, quedando el programa para el gato de la siguiente forma:

Si ejecutamos el programa dando clic sobre la bandera verde, esperaríamos ver caminar el gato o según el programa, observar un cambio entre disfraces cada que se realice un movimiento de 10 pasos, pero sucede algo distinto. Esto ocurre debido a que los programas en Scratch se ejecutan a gran velocidad, cada bloque de programación es interpretado por el computador en un tiempo casi imperceptible para el ser humano. De tal suerte que en nuestro programa, al interior del ciclo de repetición infinita (“por siempre”), el bloque “cambio de disfraz a costume2” queda prácticamente unido al bloque “cambio de disfraz a costume1” a pesar de que se encuentre entre ambos “rebotar si toca un borde”. Para evitar este efecto y poder observar los cambios se debe pausar la ejecución un tiempo determinado o en otras palabras añadir un retardo. 16- En la paleta de bloques seleccionamos el conjunto de control y tomamos el bloque

Y luego lo arrastramos bajo el bloque mover.

17- Arrastramos otro bloque “esperar” y lo ubicamos debajo de “rebotar si toca un borde”. Esto garantiza que exista un retardo entre las bloques de cambiar disfraz para poder observar los cambios.

18- En ambos bloques “esperar” modificamos el tiempo a 0.2 segundos. Esto permite al gato caminar de forma fluida. Usted puede experimentar con otros tiempos de espera y observar los resultados.

Al detener el programa presionando el botón el gato queda en cualquier parte del escenario y desde allí iniciaría el programa si damos clic nuevamente sobre la bandera verde Sin embargo podemos hacer uso de los bloques de movimiento para establecer una posición de partida. 19- En la paleta de bloques seleccionemos el conjunto de color azul movimiento y tomamos el bloque

“ir a”

Este bloque indica las coordenadas (x,y) en el escenario donde se ubicará el objeto. En ese sentido La ubicación del objeto en el escenario se da como en un plano cartesiano donde el origen x=0 y y=0 es el centro del mismo.

20- Arrastramos el bloque “ir a” justo debajo del bloque de inicio del programa “al presionar” y modificamos las coordenadas por x=0 y y=0. Esto llevará al gato siempre al centro cuando inicie el programa.

Vamos a hacer que nuestro gato salude con una nube de dialogo al presionar la tecla espacio, para esto realizamos los siguientes pasos:

Agregar diálogos 21- Del conjunto de apariencias seleccionamos el bloque y lo llevamos al área de

programa separado de los bloques que se encuentran allí.

Existen diferentes bloques para crear diálogos. Explora las diferencias entre ellos.

22- Cambia el mensaje por ¡Hola mi nombre es _____! y pones tu nombre en el espacio. 23- Ahora, en la paleta de bloques ubica el conjunto de eventos y selecciona el bloque

y arrástralo sobre el bloque “decir __ por 2 segundos”.

De esta forma construimos un subprograma o “subrutina”, como se le llama en programación, el cual se encuentra separado de los bloques principales pero que hace parte del programa del objeto gato y se ejecuta ante el evento de presionar la tecla espacio.

Añadir fondos Ahora vamos a poner un fondo a nuestro escenario. En la biblioteca de Scratch se encuentran gran cantidad de fondos que están clasificados en categorías interiores o exteriores y diversos temas. 24- Damos clic sobre escenario en la zona de herramientas de escenario.

Los fondos también se pueden programar para cambiar de escenario cuando se desee. 25- Ahora Scratch ha cargado la interfaz de escenario y damos clic sobre la pestaña fondos.

Lista de fondos: Aquí se ubican los fondos disponibles para el escenario y podemos crear nuevos fondos usando los siguientes iconos:

a) Seleccionar un fondo de la biblioteca de Scratch b) Pintar un nuevo fondo. Con esta opción podemos hacer uso del editor de pinturas para diseñar un

fondo. c) Cargar un fondo desde archivo. Podemos utilizar una imagen en nuestro computador como fondo

para el escenario. d) Nuevo fondo desde cámara. Haciendo uso de la cámara del computador podemos tomar una foto,

editarla con el editor de pinturas y usarla como fondo para el escenario.

Editor de pinturas: La herramienta editor de pinturas nos permite crear o editar fondos de la biblioteca. 26- Seleccionamos el fondo “nigth city whit street”. Ahora el gato se encuentra

caminando por la calle en la noche. Como se mencionó anteriormente los fondos se pueden programar siendo esto útil cuando se crean historias interactivas con múltiples escenarios. Se observa ahora en la paleta de bloques que el conjunto “Apariencia” ha cambiado sus bloques por otros orientados a programar los fondos.

27- Debido a que el gato se encuentra flotando por encima de la calle debemos

posicionarlo adecuadamente con relación al fondo. Para esto modificamos en el programa del gato las coordenadas de inicio a x=0 y y=-40.

Note la similitud entre el escenario y el objeto mientras el objeto cambia de apariencia con el disfraz el escenario lo realiza con fondos.

Crear nuevos objetos 28- En la zona de listado de objetos damos clic sobre Nuevo objeto de la biblioteca. 29- En la biblioteca buscamos en el tema ciudad y elegimos el objeto “car-bug”.

Recordemos que todos los objetos y el escenario tienen su propio programa. Vamos a realizar un programa para este nuevo objeto haciendo que pase por el escenario (la calle) en un determinado momento.

30- Seleccionamos el carro en la lista de objetos y vamos a la pestaña programa.

31- Tomamos el bloque de eventos y lo llevamos al area de programa.

32- Vamos a establecer que el carro entrará en escena a los 5 segundos de iniciado el programa, es decir que debemos mantener el objeto oculto cuando se presione la bandera verde.

Para eso utilizamos el bloque del conjunto apariencias y lo ubicamos debajo del bloque “al presionar”.

33- Luego insertamos el bloque “esperar” y lo modificamos para 5 segundos 34- Arrastramos el carro a la posición inicial tratando de esconderlo en el borde izquierdo

sobre la calle. Ubicado en este lugar observamos las coordenadas en las que se encuentra en el indicador en la parte superior derecha o en el área de información del objeto.

35- Usando el bloque de “ir a” establecemos la posición inicial en x= -329, y=-40.

36- Nuevamente, arrastrando el carro lo llevamos hasta la posición final en el otro extremo del escenario y anotamos las coordenadas finales. x=329, y=-40.

37- Ahora insertamos el bloque “mostrar” del conjunto apariencias, debajo de las instrucciones anteriores.

38- Luego ingresamos al área de programa el bloque de movimiento “deslizar en …”. Este bloque lleva al carro de la posición inicial a la final en un segundo.

39- Finalizamos insertando el bloque esconder. Así, en la ejecución del programa vemos como el carro pasa por la calle al lado del gato.

Añadir Sonidos A continuación se observará como añadir sonidos a un programa en scratch.

40- Seleccionamos el objeto “carro” y seleccionamos la pestaña “Sonidos”

Lo que queremos lograr es añadir un efecto de sonido al carro que va pasando. Es decir que se escuche como el carro atraviesa el escenario cerca a nuestro personaje principal el gato.

Tanto en el escenario como en los objetos se pueden añadir sonidos usando el conjunto “sonidos” de la paleta de bloques

Lista de sonidos: Aquí se ubican los sonidos disponibles para el objeto o escenario y podemos agregar nuevos sonidos usando las siguientes herramientas:

a-) Selecciona un sonido de la biblioteca de Scratch. b-) Permite grabar un nuevo sonido desde la entrada de micrófono. c-) Permite cargar un sonido almacenado previamente en el computador, los formatos de sonidos que soporta Scratch son mp3, wav o aif. Editor de sonidos: Como su nombre lo indica en esta área podemos editar los sonidos cargados (cortar, copiar, pegar), podemos escucharlos, grabar sobre estos o agregar efectos (aparecer, desvanecer, más fuerte, más suave, silencio, reversa) 41- En las herramientas de “nuevo sonido” damos clic sobre la opción “cargar sonido desde archivo” y

seleccionamos el sonido “car passing” que se encuentra en la sección efectos. La biblioteca de sonidos de Scratch cuenta con gran cantidad de sonidos que podemos usar en nuestros proyectos, para ambientar una animación o video juego.

42- Ahora en la pestaña de programas seleccionamos el conjunto “sonidos” de la paleta de bloques.

43- De aquí tomamos el bloque “tocar sonido” y lo arrastramos por encima

de la instrucción “esperar 2 segundos ”

De esta forma hemos agregado un sonido a nuestra animación. ¿Cuál es la cantidad de segundos apropiada en el bloque “esperar” para mejorar el efecto del carro? Explore con los diferentes bloques de sonido, tanto para el carro, como para el gato y el escenario.

La opción de grabación de sonido con el micrófono permite agregar narraciones a las historias interactivas.

Editor de pinturas Ahora vamos a crear un nuevo objeto pero desde el editor de pinturas. El objetivo es añadir una luna creada por nosotros al escenario 44- En las herramientas de nuevo objeto damos clic sobre la opción: Dibujar nuevo objeto.

De esta forma se abrirá la interfaz de editor de pinturas, la cual nos sirve para editar o crear los disfraces de los objetos y fondos. Aquí dibujaremos una luna. El objeto nuevo tendrá un nombre por defecto similar a “Sprite2”. Este aparece en blanco en la lista de objetos porque no hemos diseñado un disfraz para el mismo. Cambiará en cuanto creemos el dibujo.

Lienzo: Es el área donde se realiza el dibujo. Voltear: Estas son las herramientas que permiten girar hacia la derecha o izquierda el dibujo seleccionado. Centro: Esta herramienta establece el centro del lienzo. Opciones de herramienta: Aquí se presentan las opciones de cada herramienta de dibujo. Por ejemplo: grosor de línea el cual se modifica con la barra de desplazamiento, forma con relleno o sin relleno, tipos de relleno con degradado, etc. Paleta de colores: Desde aquí se pueden seleccionar los colores que se deseen para el dibujo. Zoom: Esta herramienta aleja o acerca el lienzo Cambio de modo: Los dibujos en Scratch se pueden realizar de dos formas como mapa de bits o como grafica vectorial. En esta sección el editor de pinturas se puede alternar entre ambos modos. Modo mapa de bits: Este modo es generalmente más fácil de usar y entender. Algunas diferencias frente al modo vectorial son: las gráficas se almacenan como pixeles en una formación de rejilla; la opción de relleno no depende de la creación de una forma y se puede usar en cualquier área delimitada por una o múltiples formas; las gráficas en modo mapa de bits suelen lucir como de menor resolución o con bordes irregulares y no se pueden cambiar de tamaño en lienzo después de plasmadas. Modo vectorial: Es una característica nueva en esta versión de Scratch, puede tomar un poco más de tiempo para reconocer las herramientas pero luego de experimentar con ellas se hace fácil usarlo. Algunas diferencias frente al modo mapa de bits son: las gráficas se almacenan como instrucciones por lo que su tamaño es menor; Los dibujos lucen de mayor resolución con unos bordes más suaves; la herramienta de relleno solo se aplica a áreas formadas por polígonos; Las figuras se pueden cambiar de tamaño en cualquier momento luego de plasmadas sin perder resolución.

Herramientas mapa de bits

Herramientas modo vectorial

45- Conociendo las herramientas del editor de pinturas procedemos a realizar el dibujo, en el modo más conveniente.

46- Luego ubicamos el mismo en la esquina superior derecha del escenario.

47- Ayudándonos de la herramienta encoger o crecer ubicada en la barra de herramientas

superior, ajustamos el tamaño del objeto luna.

¡Felicitaciones! hemos finalizado nuestro primer programa en Scratch.

Guardar y Compartir Los archivos en Scratch 2.0 (versión en internet) se almacenan automáticamente durante la modificación del proyecto pero para asegurarnos de guardar los cambios recientes, vamos a “Archivo” y damos clic en guardar ahora. Otra opción es descargar el archivo Scratch para ejecutarlo en una versión de mesa. La versión en línea de Scratch permite compartir tus proyectos solo con activar esta opción, esto significa que las personas pueden ver y descargar tu proyecto.

Se recomienda experimentar con las herramientas de dibujo y la conversión de un gráfico entre los modos del editor de pinturas.

Para Explorar

Lápiz Es una herramienta que permite realizar dibujos sobre el escenario utilizando un objeto como lápiz, cada movimiento que realiza el objeto generará un trazo de tinta durante toda la trayectoria. Esta herramienta es útil para iniciar en la programación y la construcción de diversas figuras geométricas por ejemplo en la enseñanza de geometría.

Ayuda de Scratch

Scratch dispone de una gran herramienta de ayuda, la cual tiene cuenta con varios tutoriales para diferentes tipos de proyectos. La ayuda ofrece explicación y ejemplos del uso de cada bloque de programación y de herramientas. Solo con hacer clic izquierdo en un bloque se despliega el menú de ayuda, con la información necesaria.

Página web de Scratch En la página web de Scratch https://scratch.mit.edu/ se encuentra también una gran cantidad de información y tutoriales, que la comunidad Scratch comparte junto con proyectos de todo tipo como historias interactivas, videojuegos, proyectos para enseñanza de matemáticas, ciencias, etc. En este último punto se debe resaltar la existencia de una comunidad de docentes que comparten experiencias y recursos en educación. http://scratched.gse.harvard.edu/ Otros enlaces recomendados son: http://wiki.scratch.mit.edu/wiki/Scratch_Wiki_Home Historias https://scratch.mit.edu/projects/68097136/ https://scratch.mit.edu/explore/projects/stories/ Videojuegos: https://scratch.mit.edu/projects/82429906/ https://scratch.mit.edu/projects/3137446/ https://scratch.mit.edu/projects/84732032/

Créditos

Scratch

https://scratch.mit.edu/

Facilitador Jhon Edward Vargas Vasquez: Magister en Ingeniería, Ingeniero Biomédico de profesión, con experiencia docente en electrónica y procesamiento digital de señales; Experiencia de investigación en el desarrollo de dispositivos para medición de azúcar en sangre no invasivos. Apasionado por la innovación, el emprendimiento y la educación lo cual junto a sus habilidades de programación han llevado a la exploración y aplicación de Scratch en entornos educativos como herramienta para el acercamiento a la tecnología, el aprendizaje y el desarrollo de competencias orientadas a la solución de problemas.