Tema 1
ACTIVIDAD 3 (No guiada) - APP PARA ESCUCHAR EL HIMNO DE TU EQUIPO DE FÚTBOL
Vamos a diseñar una app con APP INVENTOR que permita oír el himno de tres equipos de fútbol, al pulsar sobre dos botones en la pantalla.
1) Entra en App Inventor y lógate con tu cuenta del Instituto.
2) Crea un nuevo proyecto y llámalo “Futbol_nombre_apellido"
3) Descarga en tu carpeta del ordenador los archivos que encontrarás en la siguiente dirección: HIMNOSYESCUDOS
(Los archivos son del Madrid, el Barcelona y el Atlético de Madrid pero puedes buscar en Internet si tienes preferencia por otro equipo, tienes que bajarte el himno en mp3 y una foto de su escudo).
4) Parte de Diseño: La pantalla de la aplicación debe estar dividida en cuatro partes (a la derecha tienes un ejemplo de cómo debe quedar):
a. Parte superior, que ocupe un 10% de la pantalla de alto, con el texto “¿De qué equipo eres?” (60% de ancho).
b. Tres zonas iguales, una para cada equipo, en el orden que quieras. Cada zona debe contar con una imagen del escudo del equipo y dos botones, uno para reproducir su himno y otro para pararlo.
Pista: Puedes usar disposiciones de tablas o meter una disposición dentro de otra si te interesa.
Pista2: Deberás definir botones, imágenes y sonidos y subir los archivos que has descargado en tu carpeta.
5) Parte de Bloques: Programar los bloques para el correcto funcionamiento de la aplicación. Cuando pulsemos el botón ON debe empezar a sonar el himno correspondiente, cuando pulsemos el botón OFF, debe parar de sonar.
6) Prueba en tu móvil que funciona antes de entregarlo.
7) Entrega: Descarga el archivo .apk en tu carpeta, y súbelo a Classroom, exporta a tu ordenador el proyecto (.aia) y súbelo a Classroom.
Pistas: para crear el archivo .apk debes buscar en el menú Generar, y para exportar el archivo .aia debes buscar en el menú Proyectos
ACTIVIDAD 4 (GUIADA) - APP PARA DIBUJAR
Vamos a diseñar una app con APP INVENTOR que permita dibujar sobre la pantalla con el dedo.
En esta actividad vamos a crear un programa con una pantalla donde podemos dibujar libremente, eligiendo el color y el grosor de la línea. También pondremos un botón para borrar toda la pantalla.
Para ello, tienes que conocer estos elementos que vamos a usar:
LIENZO: Es un panel rectangular sensible al tacto donde se puede dibujar y también mover Sprites (imágenes, como los personajes en Scratch). En los bloques hay eventos que permiten saber cuándo y dónde se ha tocado un Lienzo, o hacia dónde se ha arrastrado un Sprite (Imagen o Pelota). Existen métodos para dibujar puntos, líneas y círculos. Lo encontramos en la columna Paleta - Dibujo y animación.
DESLIZADOR: Es una barra con un marcador que puede desplazarse. Al arrastrar el marcador a la izquierda o a la derecha, cambia de posición y activará el evento PosiciónCambiada (en bloques) indicando cuál es la nueva posición. Se puede utilizar para cambiar variables o características de algún componente. En esta actividad utilizaremos el componente Deslizador para seleccionar el grosor de la línea para dibujar. Lo encontramos en la columna Paleta - Interfaz de usuario.
Parte de Diseño:
PASO 1:
Entra en App Inventor y lógate con tu cuenta del Instituto.
Crea un nuevo proyecto y llámalo “Dibujar_tu_nombre_y_apellido", sin tildes (debes poner tu nombre para identificar el archivo)
Descarga en tu carpeta del ordenador las imágenes que usaremos para el botón "limpiar" y para el icono de la App, los puedes encontrar pinchando aquí:
PASO 2: Modifica las siguientes propiedades para Screen1:
DispHorizontal: Centro
Orientación de la Pantalla: Vertical
Color de Fondo: Negro
Título: Dibujando
Icono: “paletapintura.png”
PASO 3: Añade los componentes que aparecen en la tabla de la derecha, con las propiedades que se indican.
Los componentes te deben quedar como en la imagen de abajo:
Parte de Bloques:
PASO 4: Para dibujar líneas arrastrando el dedo y dibujar puntos tocando la pantalla ponemos estos bloques:
Clicamos Lienzo1 para ver sus bloques. El bloque “cuando Lienzo1.Arrastrado” nos permitirá dibujar libremente en el lienzo. Dentro de él ponemos el procedimiento “llamar Lienzo1.DibujarLínea”, que traza una línea que une los puntos de coordenadas (x1,y1) y (x2,y2). Ponemos XPrevio en x1 e YPrevio en y1. Igualmente, fijamos XActual e YActual para x2 e y2. Estos valores se cogen poniendo el puntero del ratón sobre ellos en el bloque marrón y arrastrándolos a donde queremos cuando se despliegan.
Con el bloque "cuando Lienzo1.Tocar" y el procedimiento "llamar Lienzo1.DibujarPunto", dibujaremos puntos al tocar la pantalla. Cogemos los valores x e y del bloque marrón y los arrastramos a x e y del bloque morado.
PASO 5: Bloques para programar los botones de colores y de limpiar.
Cuando toquemos un botón de un color, se deberá cambiar el color para dibujar. Haciendo clic en un botón vemos los bloques que podemos usar. Escogeremos el bloque "cuando boton.clic" (poniendo cada botón, el rojo, el verde o el azul), y cogeremos el bloque para cambiar el color de la pintura en Lienzo1: "poner Lienzo1.ColorDePintura como". Las etiquetas de colores se cogen en el apartado Integrados - Colores.
Cuando toquemos el botón de limpiar, todo lo que haya dibujado se deberá borrar, el lienzo se tiene que limpiar entero. Esto lo hacemos con el bloque "cuando boton_limpiar.clic", y el procedimiento "llamar.Lienzo1 limpiar". Están en los bloques de ese botón y del lienzo.
PASO 6: Bloques para programar el deslizador
Con el deslizador en la app cambiaremos el grosor de la línea que dibujemos, y se usa cambiando la posición de su marcador (Pulgar) arrastrándolo con el dedo a lo largo de la barra. Entonces para programarlo escogemos el bloque
"cuando Deslizador1.PosicionCambiada", dentro de Deslizador1.
Dentro pondremos el bloque "poner Lienzo1.AnchoDeLinea", y arrastramos "tomar posición del pulgar" para engancharlo a este.
Probar el funcionamiento y entregar la tarea:
PASO 7:
Prueba en tu móvil que funciona antes de entregarlo con AI Companion.
Genera el archivo .apk y súbelo a la tarea de classroom "Actividad 4: App para dibujar".
Exporta a tu ordenador el proyecto (.aia) y súbelo a Classroom. Para exportar el archivo .aia debes buscar en el menú Proyectos - Exportar a mi ordenador el proyecto (.aia) seleccionado
Descarga el fichero .apk en tu móvil e instálalo.
Pregunta sobre el programa realizado:
Esta pregunta debes contestarla en los comentarios privados de la tarea donde has entregado el proyecto. Cambia tu programa para ver el efecto.
¿Qué ocurre en la App si en el paso 4 cambiamos los valores de x1 e y1 por XInicial e YInicial?
ACTIVIDAD 5 (GUIADA) - APP JUEGO DEL FRONTÓN
El frontón es un clásico de los juegos para ordenador. Se trata de una bola que rebota en los bordes de la pantalla y una pala (rectángulo) que es manejado por el jugador/a. Cuando la bola rebasa a la pala y colisiona con el borde inferior de la pantalla, el jugador pierde y el juego se detiene.
Existen diferentes maneras para controlar el movimiento de la pala (nuestro Sprite). Nosotros utilizaremos aquí el “arrastre” con el dedo (por facilidad en la programación, por tanto tenemos que diseñar una pala que se mueva con el dedo del jugador/a.
Parte de Diseño:
PASO 1:
Entra en App Inventor y lógate con tu cuenta del Instituto.
Crea un nuevo proyecto y llámalo “Fronton_tu_nombre_y_apellido", sin tildes (debes poner tu nombre para identificar el archivo)
Descarga en tu carpeta del ordenador la imagen de la pala, pinchando aquí: pala.jpg
PASO 2: Modifica las siguientes propiedades para Screen1:
DispHorizontal: Centro:3
Orientación de la Pantalla: Vertical
Nombre de la App: Frontón (este será el nombre que aparecerá debajo del icono en nuestro dispositivo móvil)
Título: Frontón
Icono: Busca un logo para tu app en Internet, que tenga que ver con el juego. Descarga la imagen y súbela a la propiedad Icono.
PASO 3: En la parte superior de la pantalla colocaremos un componente de Disposición Horizontal donde alojaremos, de momento, un botón de Inicio para que al hacer clic sobre él comience de nuevo el juego colocando pala y bola en sus posiciones iniciales. Esta estructura nos facilitará posibles ampliaciones futuras (activar sonido, contador de puntos, otros botones, etc.). Por consiguiente, hacemos clic sobre el componente Disposición Horizontal del bloque Disposición (columna Paleta) y lo arrastramos hasta el Visor, situándose en la parte superior de la pantalla principal (Screen1). Aparecerá centrado en la ventana pues, anteriormente, elegimos Disposición Horizontal “Centro” en las propiedades de Screen1. Las propiedades de este componente son:
DispHorizontal: Centro (todos los componentes que añadamos en su interior quedarán centrados horizontalmente respecto a esta DisposiciónHorizontal1)
DispVertical: Centro (todos los componentes que añadamos en su interior quedarán centrados verticalmente respecto a esta DisposiciónHorizontal1)
Alto: 10 por ciento
Ancho: Ajustar al contenedor
PASO 4: Ahora hacemos clic sobre el componente Botón del bloque Interfaz de usuario (columna Paleta) y lo arrastramos hasta el interior del componente DisposiciónHorizontal1. Aparecerá centrado tanto vertical como horizontalmente pues así lo indicamos anteriormente en las propiedades de DisposiciónHorizontal1
En la columna Componentes renombramos Botón1 por “boton_Inicio” y variamos las siguientes Propiedades (columna derecha):
Color de Fondo: Rosa
Texto: Empezar
PASO 5:
Debajo de la Disposición Horizontal añadiremos un componente Lienzo, que albergará un componente Pelota y un componente SpriteImage. Todos estos componentes están en el apartado Dibujo y animación.
Subimos a App Inventor el archivo “pala.jpg” descargado antes (Botón “Subir archivo…”)
El Lienzo es un panel rectangular sensible al tacto dentro del cual se puede dibujar y también mover Sprites (imágenes). Hay eventos que permiten saber cuándo y dónde se ha tocado un Lienzo, o hacia dónde se ha arrastrado un Sprite (Imagen o Pelota).
Los Sprites son objetos gráficos que podemos mover, arrastrar, lanzar y hacerlos interactuar con otros Sprites. El componente Pelota es un Sprite que viene predeterminado (por su uso frecuente en juegos) en App Inventor. En la columna Propiedades (Editor de Diseño) podremos indicarle el radio, color, velocidad, dirección, etc.
El componente SpriteImage es un Sprite que viene representado por una imagen que hemos subido previamente a App Inventor. Lo usaremos para la pala.
Propiedades de Lienzo1:
Alto: 85 por ciento
Ancho: Ajustar al contenedor…
ColorDeFondo: Negro
Propiedades de Pelota1:
Radio: 20
El radio indica número de píxeles. Un intervalo de 10 (milisegundos) y una velocidad de 5 (píxeles) indica que cada 10 milisegundos la pelota se moverá 5 píxeles (en la dirección indicada). Dirección es un ángulo que viene expresado en grados: 0 grados indica la derecha. 90 grados, arriba. 180, a la izquierda. 270, hacia abajo.
ColorDePintura: Violeta
Intervalo: 10 (milisegundos)
Propiedades de SpriteImage:
Foto: Seleccionamos “pala.jpg”
X: 137
Y: 325
La posición X:0 , Y:0 representa la esquina superior izquierda del lienzo. X:25 Y:50 indica 25 píxeles hacia la derecha y 50 hacia abajo (coordenadas cartesianas).
Parte de Bloques:
PASO 1: Programamos el botón "Empezar"
Dentro del Editor de Bloques (botón Bloques) hacemos clic sobre el componente boton_inicio. Elegimos la primera etiqueta: cuando boton_inicio.Clic.
Añadimos en su interior la etiqueta llamar “Pelota.MoverA” para situar el Sprite “Pelota1” siempre en la misma posición al iniciar la partida. La posición horizontal (X) será la mitad del ancho del lienzo. Para esto necesitamos las etiquetas dividir y numérica (“2”) que se encuentran en el apartado Matemáticas (Integrados). Para la posición vertical (Y) seleccionamos una etiqueta numérica escribiendo el valor “20” es su interior.
Establecemos para el Sprite “Pelota1” una velocidad igual a ”5” y una dirección aleatoria entre 45º y 135º con las etiquetas “poner Pelota1. Dirección” y “poner Pelota1.Velocidad”. El bloque quedaría como se muestra en la imagen.
PASO 2: Conseguir que la pelota rebote
Al hacer clic sobre el componente “Pelota1” nos aparecerá la etiqueta “cuando Pelota1.TocarBorde” que deberemos seleccionar. En su interior colocamos la etiqueta “llamar Pelota1.Botar” con la etiqueta “tomar borde” (se obtiene al pasar el cursor sobre la palabra “Borde” de la etiqueta “.TocarBorde”)
PASO 3: Mover la pala sólo en horizontal
Utilizaremos la etiqueta “cuando SpriteImagen1.Arrastrado”. Dentro pondremos la etiqueta “llamar SpriteImagen:MoverA”, indicando como valor para X: XActual (etiqueta “tomar XActual”) y para Y: la etiqueta numérica “325” (valor en la parte baja de la pantalla del móvil). Así, cuando arrastremos con el dedo la “pala” sobre el lienzo, ésta se moverá sólo en la dirección horizontal hasta la posición actual de nuestro dedo.
PASO 4: Choque de la pelota con la pala
Queremos que la Pelota rebote en la Pala cuando choque con ella. Para que tenga este comportamiento debemos seleccionar la etiqueta “cuando Pelota1:EnColisionCon” del componente “Pelota1”, y dentro colocar la etiqueta “poner Pelota1.Dirección como” y añadimos “entero aleatorio entre 45º y 135º. Es decir, cambiando la dirección del Sprite Pelota conseguimos el efecto rebote.
PASO 5: Probar en el móvil y entregar
Por último probamos el juego con AI Companion para ver si funciona. Descargamos el archivo .aia y el .apk y ubimos los dos archivos a Classroom
ACTIVIDAD 6 (GUIADA): EJEMPLO PARA APRENDER SOBRE LAS VARIABLES
Una variable es un “contenedor” que se utiliza para almacenar datos (numéricos o alfanuméricos). Pueden alojar un dato o un conjunto de datos (listas o tablas).
Las variables se crean poniéndoles un nombre y dándoles un valor inicial del tipo de datos que queremos que contengan. Por ejemplo, para crear una variable de nombre “Control”, que contenga un dato numérico, en App Inventor utilizamos la etiqueta siguiente:
Esta variable contendrá un número y la hemos inicializado con el valor 0.
Esta etiqueta la encontramos en Variables dentro del bloque Integrados:
Para cambiar el “nombre” de la variable hacemos clic en “nombre” que se pondrá en color azul para poder editarlo.
Si posteriormente deseamos almacenar otro valor en dicha variable, utilizaremos la etiqueta "poner a", por ejemplo, si queremos que la variable "control" almacene el valor 1, usaremos:
Esta variable cambiará su valor inicial o el que tenga almacenado en ese momento por el valor 1.
Utilizamos la etiqueta “poner” para “almacenar” una valor en la variable, y la etiqueta “tomar” para “leer” el valor almacenado en dicha variable.
Esta etiqueta la encontramos en Variables dentro del bloque Integrados:
Un uso frecuente de las variables es el de “contar” el número de veces que ocurre un evento. (en el caso del juego del frontón podría ser el número de veces que la “bola” colisiona con la “pala”).
Por ejemplo, el siguiente código hace quq cada vez que hagamos clic sobre el botón “Continuar” la variable “numero_de_veces” incremente en 1 su valor:
Es decir, la variable “numero_de_veces” almacenará el número de veces que hemos pulsado el botón “Continuar”.
Ejemplo guiado: Contador de pulsaciones sobre un botón
Para aplicar lo explicado anteriormente vamos a crear una aplicación que nos muestre en pantalla el número de veces que pulsamos un botón.
PASO 1:
Comenzamos un proyecto nuevo en App Inventor con el nombre: “Contador_tunombre”
PASO 2: En la parte de DISEÑO
Añadimos los componentes de la siguiente tabla, con las propiedades indicadas:
El resultado debe quedar así:
PASO 3: En el EDITOR DE BLOQUES
Programamos los componentes creados, añadiendo estos bloques:
Creamos la variable “contador” con el valor inicial “0”.
En la Etiqueta1 escribiremos el texto “Pulsaciones: ” y el valor almacenado en la variable “contador” en ese momento (“tomar global contador”).
Para unir ambos textos utilizamos la etiqueta “unir” que se encuentra dentro del apartado Texto. Al hacer clic sobre el símbolo que aparece en la parte izquierda de la etiqueta (rueda dentada), se despliega una ventana que me permite añadir más cadenas para unir 2, 3 ó más textos. Para ello arrastramos cuantas etiquetas “cadena” necesitemos al interior de la etiqueta “unir”. Así conseguimos que la etiqueta “unir” tenga tantas pestañas como deseemos.
El resultado debe quedar así:
PASO 4: Comprobar funcionamiento y subir archivo a Classroom
Por último probamos el juego con AI Companion para ver si funciona. Descargamos el archivo .aia y el .apk y subimos los dos archivos a Classroom.
EJERCICIO: Añadir efectos de sonido al botón del ejemplo anterior
Queremos que suene un sonido cada vez que pulsamos el botón “Pulsa”. Además, queremos que se pueda activar y desactivar la opción de sonido en la propia aplicación.
Descarga el siguiente archivo de sonido y súbelo a App Inventor: "Pop.wav" que contiene el efecto de sonido para ponérselo al botón.
Para reproducir el sonido dentro de la app podemos usar el componente Sonido, para sonidos cortos en el apartado de Medios (componente no visible).
Para activar y desactivar el Sonido añadiremos también el componente “CasillaDeVerificación” (en el bloque Interfaz de usuario). Se utiliza para activar o desactivar un evento cuando se hace clic sobre ella. Este componente es visible y los colocaremos a la izquierda del botón “Pulsar” (dentro de la Disposición Horizontal).
En el visor deberías tener lo que se ve en la imagen, con las propiedades que se detallan en la tabla más abajo:
Ahora debes programar los componentes. Cambia al modo BLOQUES. Utiliza el bloque “Si … entonces …” del apartado “Control”: si la casilla de verificación está “Verificado” (es decir, el sonido activado), indicaremos que se reproduzca el sonido con la etiqueta “llamar Sonido1.Reproducir”.
Guarda el proyecto con el nombre "Contador_sonoro_tunombre". Por último probamos el juego con AI Companion para ver si funciona. Descargamos el archivo .aia y el .apk y subimos los dos archivos a Classroom.