Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

PROGRAMA PACE - TALLER DE MBLOCK

Taller de Scratch 2015
by

Erick Araya

on 13 November 2018

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of PROGRAMA PACE - TALLER DE MBLOCK

TALLER DE MBLOCK
2018
BIENVENIDOS!!
¿Asustados?
¿Para quién es este Taller?
¿Qué veremos en este Taller?
Comenzamos!!
Algunos conceptos computacionales...
Secuencias
Ciclos
Paralelismo
Eventos
Condicionales
Operadores
Procedimientos
Variables
No!!!
Casi ni cuenta se darán!!
En el escritorio de su computador ya se encuentra abierto el programa MBlock3
Conociendo MBlock
Escenario
Ventana donde las creaciones de MBlock cobran vida
Paleta de Bloques
Donde se encuentran las herramientas para programar los objetos
Herramientas clasificadas en 10 grupos: Movimiento, Eventos, Control, Apariencia, ...
Lista de Objetos
Ancho: 480 unidades
Alto: 360 unidades
Donde se encuentran todos los objetos participantes del programa
Cada objeto se asocia a un programa (hay que crear un programa para cada objeto)
Área de Programas
Donde se "escriben" los programas, y se definen los disfraces y Sonidos asociados a cada
objeto
participante
Practiquemos!!
Primero, borremos el panda!! (menú contextual - Opción "borrar")
Ahora, insertemos un objeto de la biblioteca
Se abre una ventana con los objetos disponibles. Elijamos uno:
Como es muy grande, lo reducimos y ubicamos más cerca de la esquina izquierda inferior del escenario
Practiquemos!!
Vamos a dibujar un cuadrado, cuyo borde será de color rojo y tamaño 200 unidades por lado, usando como lápiz una figura cualquiera, de tamaño pequeño, o que podamos reducir
Aproximadamente, esto es lo que deberemos lograr:
Practiquemos!!
Haremos que el objeto elegido comience en, por ejemplo, (-143, -100), o el valor que desee:
Cuando hagamos clic en la bandera verde...
Considerando que el movimiento será en dirección 90º, medidos desde la vertical:
Practiquemos!!
También, definimos el color del lápiz como rojo (color 3)
Finalmente, antes que el objeto se mueva, se debe marcar la trayectoria de éste. Hay que "bajar el lápiz"
Ahora nos preparamos para dibujar el cuadrado.
Practiquemos!!
Haremos avanzar el objeto hacia la derecha en 200 posiciones y luego deberá girar en 90º a la izquierda:
Las últimas dos instrucciones deben repetirse 4 veces. La manera simple es repetir ambas instrucciones las veces que sea necesario, pero es más eficiente usar una instrucción de repetición, como la que se muestra.
Practiquemos!!
Haciendo clic sobre la bandera verde, se genera el cuadrado. Pero el objeto es muy rápido!!
Pondremos retardos de 1 seg. por acción. Además, al comenzar, borramos la trayectoria anterior y, al finalizar, subiremos el lápiz
Y el resultado:
Los objetos tienen asociados los "disfraces"..
Objetos - Escenarios
Los escenarios tienen asociados los fondos ("backgrounds")
Clic sobre el escenario a la izquierda de los objetos
Cómo MBlock establece un escenario?
Clic sobre "Fondos desde la Biblioteca"
Aparece:
De modo similar, podemos agregar, eliminar, o cambiar los objetos
Lo notaron? cada grupo de instrucciones es de un color diferente
Esto es un ALGORITMO!
INSTALACIÓN DE SCRATCH 2.0
Abran la carpeta que acaban de copiar. Encontrarán tres carpetas:
1_Adobe AIR
2_Scratch 2.0
Instalar las dos primeras
3_Materiales de Apoyo (opcional)
Una vez instalados, ESPERE!!!!
Aprende a Jugar - Aprende a Programar
Secuencias
Ciclos
¿Qué hemos visto hasta ahora?
Ejemplo Desafío 01
Desarrollar un algoritmo que mueva el brujito (Wizard), trazando una línea de color rojo, desde la posición (-150,-100) hacia la derecha y hasta tocar el borde derecho. Allí ha de rebotar, borrar la línea y volverse trazando de nuevo la línea hasta tocar el borde izquierdo y rebotar. Usando el fondo "Slopes", debiera verse así:
Solución Desafío 01
Usando la alfombra voladora, escriba un programa que, al presionar las flechas del cursor, mueva la alfombra desde la posición (0,0) 10 pasos en la dirección indicada, dibujando la trayectoria con un color rojo. La alfombra también debe cambiar su posición. Un ejemplo:
Ejemplo Desafío 02
Solución
Eventos
Tomemos como ejemplo el caminante que traza un cuadrado
Disfraces
Disfraces
Se mueven sus piernas mientras se desplaza?
NO!
Para lograr aparente movimiento:
DISFRACES
Un disfraz ("costume") es la apariencia que puede tener un objeto
Para ver los disfraces asociados a un objeto, basta hacer clic sobre la pestaña indicada:
Para el caso del caminante: 5 disfraces
Para dar la ilusión de movimiento, alternar los disfraces cada cierto tiempo:
Usted puede definir el orden, moviendo los disfraces y definiendo la secuencia en que van a aparecer
O, explícitamente indicar qué disfraz quiere:
Centro del Objeto
El centro de un objeto permite definir el punto de referencia para el giro de éste:
Repita la ejecución del programa y compare con la anterior.
Se puede cambiar el punto de referencia:
* Ir a Disfraces, modo Vector
* Clic en
* Arrastre el mouse hasta definir el nuevo punto de referencia
Ejemplo Desafío 3
Para ello, necesitamos primero un objeto para el dibujo. Qué usan ustedes?
El MBlock no tiene una herramienta de relleno, a partir de una figura geométrica cerrada (por ejemplo un polígono). Cómo podemos rellenar un pentágono regular de lado 150?
Nota: el centro de referencia sólo cambia para el disfraz actual. Repita los pasos para cambiar el centro de referencia en cada disfraz
Para guardar el nuevo objeto, clic con tecla derecha del mouse sobre éste, encima del panel de objetos
El "Pong" básico
Comencemos con un archivo nuevo
Dado que el escenario actual es de color blanco, dibujaremos un rectángulo relleno de color violeta al fondo
En este caso, se ha usado el modo "mapa de bits" para dibujar el rectángulo
El "Pong" básico
El "Pong" básico
Programamos ahora la pelota de tenis. Clic en ella
Nuestro primer juego
Se va a crear una versión simple del juego "Pong"... Lo conoce?
Usando el mouse, controlaremos el movimiento de la paleta, mientras que la pelota partirá siempre desde el borde superior, al centro y hacia abajo, en un ángulo al azar entre 135° y 225°, rebotando si toca una pared.
El juego consistirá en impedir que la pelota toque el rectángulo de color violeta, en cuyo caso el juego finaliza.
Moviendo la paleta, haremos rebotar la pelota en un ángulo entre -30° y 30°.
Cada vez que la paleta toque la pelota, se escuchará un sonido ("pop")
Primero, borremos el objeto panda
Ahora, agregaremos los objetos: la paleta y la pelota de tenis. La pelota se selecciona de los objetos de la biblioteca. La paleta puede dibujarse, o reemplazarlo por otro objeto.
Primero, programaremos el objeto "Paddle" (la paleta). Clic en él
Queremos que, cuando el mouse se mueva, este objeto se ha de desplazar en forma horizontal sobre el rectángulo violeta, a la altura de y = -140
Iniciaremos con la paleta en x = 0, y = -140
Combinaremos tres instrucciones:
hasta que finalice el juego, asociaremos el movimiento de la paleta con el valor x asociado al mouse.
Como se dijo en el enunciado, partirá desde la posición x = 0, y = 160, hacia abajo, en una dirección aleatoria entre 135° y 225°
Por siempre, avanzará 10 pasos y, si encuentra un borde (excepto el rectángulo violeta), rebotará.
Pruebe el programa hasta ahora
Pruebe el programa hasta ahora. Verá que la pelota no ha de poder controlarse aún.
El "Pong" básico
Si la pelota toca la paleta, ha de rebotar con un ángulo aleatorio entre -30° y 30°
El "Pong" básico
Pruebe hasta acá el juego
Se usará una instrucción de control "Si ... entonces", una condición del bloque de sensores, "tocando...", donde se elige la paleta (Paddle), una instrucción de movimiento para apuntar en dirección, una instrucción del bloque de operadores, para definir el ángulo aleatorio entre -30° y 30° y una instrucción de sonido cuando la paleta toque la pelota. Se incluirá en el bloque "por siempre"
Falta una última condición: El juego se detiene cuando la pelota toca el rectángulo morado.
Es una situación condicional, "Si ... entonces". En este caso se usa "Tocando el color...", que se programa para el color del rectángulo. Cuando eso sucede, debe detenerse todo (nueva instrucción de control)
Juego: Capturando las Manzanas
Mover el carrito con las flechas de cursor, tratando de capturar las manzanas, hasta completar 30
Uso de clones
Clic sobre la manzana y escriban el siguiente código:
Para qué sirvió este código?
Uso de clones
Uso de clones
Interacción entre objetos
Funciona, cierto?... y si quisiéramos más manzanas en forma simultánea?... duplicamos más objetos?
La manzana toca al carrito... cómo lo harían??:
Una o varias manzanas?
Con 1 manzana:
Cómo comenzar?
Se les entregará el escenario y los objetos .
Pruebe su juego
A veces es mejor usar un nuevo concepto: "clon"
Cómo manejamos el carrito?
Prueben!!
Una nueva propuesta:
Siempre ha de comenzar en Y = 150 y X = variable entre -210 y 210
Scratch permite crear clones de objetos sin necesidad de escribir código adicional o repetido
Graben el juego anterior y comiencen con un archivo nuevo, o abran el archivo inicial ("manzanitas").
Usen el mismo código anterior para mover el carro:
Sólo para crear clones (observó las manzanas que se fueron creando en la parte superior?)
Ahora debe crear otro segmento de código, relacionado con el clon:
Desafío
Ejemplo
Crear un programa que, cada 2 segundos, muestre, en forma aleatoria, una campana, un globo, o un computador personal (están todos ocultos). Al aparecer el objeto, el usuario debe hacer clic sobre él para incrementar en 1 su cuenta de veces que aparece. Pasado 0.7 segundos, el objeto se desaparecerá. En 1 segundo a continuación debiera aparecer otro objeto, repitiéndose hasta 30 veces. Finalmente aparecerá un pinguino que le informará cuántos aciertos tuvo y un mensaje según el resultado:
< 15 aciertos: "Muy poco!!
< 25 aciertos: "Bien!!"
>= 25 aciertos: "Felicitaciones!!"
Y el juego finaliza.
Los mensajes son un medio para sincronizar acciones o eventos
Cada vez que se hace clic sobre el escenario vacío, el Panda aparecerá con efectosr diferentes y, luego de 0.5 segundos, se volverá a ocultar.
Se mostrará el juego.
Mensajes entre objetos
Por ejemplo, si queremos que aparezca un objeto, que hasta el momento estaba oculto, se le envía el mensaje al objeto. Al recibir el mensaje, el objeto se muestra.
Cómo se crea un mensaje?
Al recibir el mensaje, el objeto ejecuta alguna acción
Para recibir el mensaje:
Código para el escenario:
Código para el Panda:
A probar el juego!!
Solución
Los objetos:
En el escenario se inicializan las variables y se define cuáles han de mostrarse. Además, se borra el escenario
Solución
Se crean los mensajes hacia los objetos a aparecer y se envían desde el escenario (el mensaje FINAL se utiliza para mostrar el objeto "Final", indicador de término del juego)
Los tres objetos tienen códigos similares. Sólo cambian las variables y el mensaje recibido.
Solución
Se envían 30 mensajes, generados de forma aleatoria a los diferentes objetos
Código para el Globo:
Desarrolle los códigos para los dos objetos restantes
Las variables creadas:
Sólo se mostrarán las variables relacionadas con los objetos en el escenario
También se envía el mensaje FINAL y se esconden los aciertos
Desafío
Usando procedimientos, crear una figura similar a la que se muestra, centrada en (0,0), con colores al azar, triángulos de lado 100 (dos ejemplos):
Solución (puede haber otra..)
Uso de Procedimientos
El procedimiento INICIALIZADOR establecerá las condiciones iniciales
Uso de Procedimientos
Uso de Procedimientos
Recuerdan cómo dibujar una figura geométrica (por ejemplo, un cuadrado)?
Uso de Procedimientos
Un código similar a éste escribieron?
En un proyecto nuevo, borra el gato y abre el objeto "Beetle".
Redúcelo de tamaño
Y si quisiéramos hacer esta figura? Son tres cuadrados, de lado 50, 100 y 150.
La instrucción "Sellar"
Permite que el objeto que la usa se replique, pero no puede programarse alguna acción sobre el objeto (moverse, girar, cambiar de color...) sólo se puede borrar
Ejemplo: un bosque donde caen rayos (Se mostrará el demo):
De la biblioteca de fondos, se escoge "forest" y de los objetos predefinidos se usa el rayo ("lightning"), el cual se reduce un poco de tamaño
El código es simple:
Al desplazarse el bicho, ha de trazar un cuadrado de color violeta a partir de la posición (-100,-100), con línea de espesor 6 y lado 50, haciendo una pausa de 0.5 segundos por cada línea trazada... Cuál sería el código?
Y el resultado:
Cuál sería el código?
Y si en vez de 3 fuesen 10 cuadrados? o 100 cuadrados?
No tiene sentido un código tan extenso...
Cuál es la diferencia entre el código del primer cuadrado y el segundo y el tercero?
Sólo el lado del cuadrado (50, 100, 150)!!!!
Para qué repetir código?
Procedimientos!!
Usaremos el grupo de instrucciones "Datos y Bloques"
Y crearemos nuestro primer procedimiento:
Creamos ahora el procedimiento CUADRADO, pero le agregamos un parámetro: LADO
Ejecute ahora el programa
Ingreso Interactivo
Recuerda el programa que dibujaba los tres cuadrados?
Solución:
Desafío
Conclusiones
Se ha mostrado Scratch como un software útil para desarrollar el pensamiento lógico que le permite resolver problemas
Pero... los cuadrados son de lado fijo (50, 100, 15)
Necesitamos una instrucción que permita ingresar de forma interactiva interactivamente del teclado el valor numérico:
El resultado queda en
Si queremos ingresar otro valor?
Crear una variable y la fijamos con el dato.
Queremos que Ballerina haga un cierto número de flexiones de piernas y las vaya contando. Un ejemplo:
Intente hacerlo!!
Con Scratch se puede aprender a programar fácilmente
Muchas Gracias!!!
PRESENTACIÓN
MI NOMBRE:
Erick Araya
Y ustedes? Pueden presentarse?
Nombre?
De dónde vienen? (ciudad, liceo, curso)
Y lo pasarán bien!!
Pen-drive con dos carpetas: Copien en su escritorio sólo
INSTALADORES SCRATCH
y pásenle al siguente el pendrive
Uso de clones
Clic sobre el copo y escriban el siguiente código:
Para qué sirvió este código?
Uso de clones
Otro ejemplo en uso de clones
Pruebe esta animación
Vamos a utilizar este concepto para generar un ambiente invernal animado.
Sólo para crear clones del copo
Ahora debe crear otro segmento de código, para que, cada vez que se cree un clon del copo, éste caiga lentamente.
Usaremos el archivo "Efecto_nieve". Solicítelo a su profesor (en un pendrive), cópielo en su computador, devuelva el pendrive y abra ese archivo
escenario
Copo
El clon lo vamos a aplicar al copo, evitando crear muchos copos, con código duplicado.
(Somos de Valdivia...)
MIS AYUDANTES:
Carla Sáez
Felipe Rivera
Por qué ?
Estilo de rotación!! (ya lo vimos al inicio con el panda)
En este juego hay interacción entre dos objetos (paleta y pelota, o fondo y pelota)
Un lápiz!! MBlock sí lo tiene.. ("Pencil")
El problema es que el lápiz no tiene su centro en la punta. Pruébelo con el siguiente ejemplo:
Se ve así, cierto?
Ejemplo Desafío 3
Qué hacemos?
Cambiemos el centro del lápiz!!
Y probemos de nuevo con el mismo programa
Podemos achicar el tamaño del lápiz y esconderlo, si estorba visualmente..
Podemos también cambiar automáticamente el espesor del lápiz. Para ello, use una variable... cómo?
En Datos y Bloques
Clic en
Escriba el nombre de la variable
Clic en OK
Aparecen más comandos!!
Ejemplo Desafío 3
Modifique el programa del brujito de modo que, cada vez que toque el borde, ha de cambiar en 1 el espesor... si el espesor supera los 10, vuelve a 1
Simulador de Dados
Se le entregará un proyecto con los objetos y disfraces necesarios para trabajar
Ejemplo: Simulador de Dados
Abra el archivo "Simulador_Dados.sb2"
Hay 3 objetos: Player, Die1 y Die2
Los objetos Die1 y Die2 tienen, cada uno, 6 disfraces (las 6 caras del dado)
La idea es que, cuando se presiona a bandera verde, el player "debe lanzar" los dados y el player debe mostrar la suma de ellos en pantalla por 2 segundos. Un ejemplo se muestra... Podría hacerlo?
Ejercicio: Buscar en la siguiente dirección: https://goo.gl/g53FG5 una figura de araña, reducirla de tamaño y utilizarla en el ejemplo de la hoja que se le entregará
Pero, es lo que queríamos?? Comparemos
Practiquemos!!
Observen el video de nuevo:
Qué es diferente?
i) La posición del caminante:
Esto se resuelve haciendo clic en la pestaña "
Disfraces
"
En el editor, clic en para fijar el centro del disfraz
Se repite para cada disfraz:
Practiquemos!!
ii) El caminante aparece "moviéndose"
Para lograr este efecto: DISFRACES!!
En la pestaña Programas, menú Apariencia. Iniciamos con:
Cada 10 pasos vamos a ir cambiando el disfraz:
Es muy probable que, cuando ustedes lo hagan, al chocar con la pared derecha el brujito se da vuelta...
Y cómo hacemos que el Panda u otro objeto se mueva por el escenario?
Moviendo al panda...
Todo programa debe comenzar con: (clic en el grupo Eventos)
Haga mover (por siempre) al panda en pasos de a 10, alternando con una espera de 0.2 segundos entre pasos y rebote si toca un borde
Arrastre este comando (y todos los necesarios) a la zona de programas
Posicionemos al panda en la posición x = -180, y = 0:
Apunte la dirección inicial del panda hacia la derecha
Si el panda, al chocar con el borde, se invierte, arréglelo cambiando el estilo de rotación
Solución
El "player" es quién "lanza los dados", esto es, define los valores al azar, envía el mensaje "lanzamiento" y espera. Finalmente, muestra la suma de ambos valores al azar.
Código para el Player:
Los objetos Die1 y Die2 (dados) tienen código similar. Simulan un lanzamiento, haciendo que el disfraz cambie y finalmente muestra el disfraz equivalente al valor al azar generado por el player
A probar el juego!!
Código para el Die1:
Código para el Die2:
Lo que hemos mostrado es...
Bajo umbral de tolerancia a la fatiga
Síndrome de ansiedad y angustia
Bajo umbral de tolerancia a la frustración
Déficit Atencional
Bloqueo emocional en pruebas y exámenes
Gracias por escucharnos!!
Los esperamos como estudiantes de la carrera de Ing. Civil Informática!!
Estudiando en la U...
¿Qué les sucede a nuestros estudiantes?
Estudiando en la U...
Nuestra respuesta?
Estudiando en la U...
Tu futuro en la informática
Full transcript