Desarrollo de propuestas educativas

1. Aplicaciones educativas

Metodología y Didáctica Aplicada

Metodologías para el aprendizaje. En el proceso de aprendizaje inicial del uso de MIT App Inventor se pueden crear algunas apps sencillas alternando estas metodologías:

• Diseño guiado: Cada alumno/a elabora una aplicación modelo a partir de unos recursos multimedia que se le entregan. Sigue el procedimiento paso a paso mediante una explicación guiada y razonada en clase o bien mediante la lectura personal de un tutorial en línea.
• Desafío: El alumnado se organiza por parejas o pequeños grupos. Eligen un tema en torno al cual crear una nueva aplicación similar al modelo anterior. La actividad exige cierta transferencia de lo aprendido a situaciones nuevas aplicando creatividad e imaginación.

En este curso introductorio vamos a aprender a desarrollar dos tipos de apps educativas: 

• App informativa: consiste en proponer el diseño de una app básica de tipo informativo en torno a un tema concreto.
• App de preguntas-respuestas: consiste en proponer el diseño de una app de juego tipo quiz test en el que harán preguntas sobre el tema elegido para la primer app. 

Estos tipos de aplicaciones son ideales para iniciarse en el desarrollo de apps ya que tienen las siguientes ventajas: 

• Facilidad: Su complejidad de diseño y programación es baja permitiendo centrar la atención del alumnado en los detalles iniciales de la herramienta y el proceso creativo completo.
• Tiempo de producción: Se puede construir en 2-3 sesiones de clase.
• Escalabilidad:  Admite la posibilidad de añadir más páginas secundarias e incluso terciarias complicando la navegación entre páginas lo que se desee.
• Aplicabilidad:  Resulta ideal para poder elaborar un producto digital atractivo sobre cualquier tema y en cualquier área. Esto garantiza una fácil transferencia.

Pasos para implementar estas propuestas en el aula:

Estos pasos les permitirán que cada estudiante o grupo de ellos pueda desarrollar apps educativas sencillas. En estas los estudiantes deben elegir un tema, buscar y seleccionar información (en diferentes formatos), sintetizar y organizar la información para llevar adelante el desarrollo de la app. Luego, pueden socializar sus producciones mediante pequeños afiches con QR para que sus compañeros y docentes puedan descargarlos, instalarlos y utilizarlos para aprender sobre un tema en particular. Para lograrlo se recomienda seguir los siguientes pasos: 

1. Elección del tema. Se deben organizar en parejas de alumnos y cada uno decide el tema  sobre el cual diseñar su app en torno a los contenidos de la asignatura.
2. Recopilación de recursos multimedia. Los estudiantes deben redactar textos concisos y claros, recopilar imágenes significativas y enlaces a páginas web a modo de ampliación informativa sobre el tema elegido.
3. Grabación de locuciones. Registrar sus propias locuciones usando el grabador del  celular o la computadora. Se deben guardar las grabaciones en formato MP3.
4. Edición de fotos. Se deben ajustar las imágenes para establecer su anchura en 250 píxeles. Para ello se puede utilizar algún editor de imagen.
5. Icono de la app. Deben  buscar por Internet una imagen de libre distribución en formato PNG de fondo transparente. Se recomienda un tamaño de 48x48 píxeles. Es el icono que mostraría la app en el escritorio una vez se haya instalado en el dispositivo.
6. Montaje de la nueva app. Siguiendo el diseño de la app modelo anterior, deben elaborar una nueva app utilizando los nuevos archivos multimedia. El alumnado puede consultar la app modelo cuando lo necesite.
7. Descarga de la versión beta. Cuando se termina el diseño de la aplicación se genera el código QR en MIT App Inventor. Este código permitía la descarga del archivo instalador APK de la versión beta para testearla en un dispositivo móvil.
8. Pruebas de la versión beta. Se debe ejecutar la aplicación en el dispositivo móvil y se verifica su correcto funcionamiento. En la herramienta de diseño se pueden corregir los errores detectados para conseguir finalmente la versión definitiva. Para ello  se debe de instalar la app MIT App Companion en el dispositivo móvil para conectarse desde ella a MIT App Inventor y ver en tiempo de diseño cómo va quedando la aplicación. 
9. Código QR de descarga. Deben subir el instalador APK a la nube (carpeta de Drive) y compartir de forma pública para obtener una URL de descarga. A partir de esa dirección se debe generar el código QR. Para ello se puede utilizar el generador online de código QR: QR Monkey. Este código se descarga como una imagen PNG para utilizar en el póster promocional.
10. Póster promocional. Deben elaborar un cartel para cada una de las apps en la que se presenta la app y se comparte el QR de descarga. 
11. Muestra final. Para difundir y promocionar las apps creadas los posters diseñados se deben colocar en llos lugares habilitados o autorizados para tal fin, para que el resto de miembros de la comunidad educativa (compañeros/as, profesorado, familias ...) puedan contemplar los posters publicitarios, descargar e instalar las apps libremente en sus móviles usando el código QR de cada una.

2. Aplicación de tipo informativa

En Internet existen multitud de tutoriales y manuales para crear apps sobre las temáticas más variadas: animaciones, lectura de sensores, manejo de la cámara, etc. En la fase de aprendizaje inicial con el alumnado, un enfoque metodológico que suele tener éxito e interés desde cualquier área o materia consiste en proponer el diseño de una app básica de tipo informativo en torno a un tema concreto.
Se trata de una app muy sencilla que consta de una pantalla principal , 3 pantallas secundarias y 3 pantallas terciarias. En la página principal aparecerá un título, una imagen y 3 botones de acceso a cada una de las páginas secundarias. Cada página secundaria mostrará un título, imagen, texto y 3 botones: escuchar audio, enlace a wikipedia (cada botón a Wikipedia direccionará a las terciarias) y volver a página principal.

2.1. Pantalla inicial

Paso 1: arrastramos al visor los elementos que vamos a necesitar: 

• 1 DisposiciónVertical
• 1 Imagen
• 2 Etiquetas
• 4 Botones

Paso 2: Cambiemos las propiedades de los componentes

• Screen1
  • Título

• Icono

• DisposiciónVertical 
  • Alto y ancho para que se ajusten al contenedor

• Imagen: para agregar una imagen de fondo

• Etiquetas
  • Color de fondo y negrita

• Ancho: para que se ajuste al contenedor

• Tamaño de la letra

• Texto

• Posición del texto

• Imagen
  • Alto y ancho

• Foto

• Botón
  • Negrita

• Ancho: Ajustar al contenedor

• Texto

• Posición del texto

Ya tenemos lista nuestra primera pantalla. 

Ahora vamos a programar cada uno de los botones del menú inicial. 

Lo primero que debemos crear son nuevas ventanas.

• Una que llamaremos Carpincho
• Otra que llamaremos Yacaré
• Y otra que llamaremos Aguará-guazú

Para ello haremos lo siguiente: 

Esto lo repetiremos hasta tener las 3 ventanas para cada uno de los animales. 

Para poder ir navegando entre las diferentes ventanas creadas haremos lo siguiente:

Ahora vamos a programar los 4 botones:

Este procedimiento lo repetiremos para los botones 2 y 3.  Para cada uno de los casos lo que vamos a cambiar es el nombre de la pantalla a la que nos va a direccionar. 

Después de repetir los pasos nos debería quedar así

Ahora nos falta programar el cuarto botón que es el que cierra la app. 

Listo ya tenemos nuestro menú de inicio funcional. Ahora falta diseñar la interfaz y programar cada una de las pantallas creadas. 

2.2. Segunda, tercer y cuarta pantalla

Vamos a trabajar con la ventana que llamamos Carpincho

Paso 1: Arrastramos al visor los componentes que vamos a necesitar

Paso 2: Cambiamos las propiedades de los componentes

Paso 3: Vamos a configurar cada uno de los botones

Botón escuchar audio: 

Antes de configurar este botón debemos saber lo siguiente: 

Hay dos tipos de componentes principales en cualquier aplicación: los visibles y los no visibles.

• Los componentes visibles son aquellos que podemos ver una vez hemos ejecutado nuestra aplicación (botones, cajas de texto, etiquetas, etc.). El conjunto de estos elementos se denomina comúnmente como la interfaz de usuario de la aplicación.

• Por otro lado, los componentes no visibles son aquellos que no podemos ver en la aplicación, ya que no son parte de la interfaz de usuario. Proporcionan acceso a la funcionalidad interna de los dispositivos; por ejemplo, el componente Texting permite enviar y procesar mensajes de texto, y el componente LocationSensor permite determinar la localización del dispositivo.

Ahora si, vamos a agregar un componente que se encuentra en la paleta dentro de la categoría de medios llamado "Reproductor".

Lo arrastramos al visor y nos quedará debajo de la imagen del celular. 

Ahora nos dirigimos al área de componentes, seleccionamos a Sonido1. Luego, en propiedades presionamos sobre origen y buscamos nuestro archivo mp3. 

Ahora vamos a programarlo: 

Pero antes debemos identificar el nombre de cada botón. Para ello hacemos clic sobre el componente en el visor para que el programa nos indique su nombre dentro de la lista de componentes. 

Nos vamos a la ventana de bloque y hacemos lo siguiente: 

Luego, elegimos el componente Reproductor seleccionamos el bloque "Llamar Sonido1. Reproducir" y lo arrastramos dentro del evento "Cuando Boton1.clic"

Listo, cuando se presione el botón Escuchar Audio (botón1) se escuchará el audio. 

Botón Wikipedia: 

Este botón nos tiene que llevar a otra ventana con un navegador que permita visualizar la página de Wikipedia. Así que lo primero que vamos a realizar es crear otra ventana y asignarle un nombre. 

Modificamos las propiedades de alto y ancho de la DisposiciónVertical para que se ajusten al contenedor. 

Cambiamos las propiedades del botón para que su ancho se ajuste al contenedor y su texto diga "Volver". 

Ahora vamos a cambiar  las propiedades del visorWeb. Las de alto y ancho para que se ajuste al contenedor y la de UrlInicial, en esta vamos a escribir la URL del sitio que contiene la información. 

Nuestra ventana debería quedar así

Luego programamos el botón "Volver". Para ello vamos a la vista de bloques y hacemos lo siguiente: 

Después, tenemos que volver a la ventana del carpincho.  Para ir de una ventana a otra haremos clic sobre el nombre de la ventana y eso desplegará un menú con las diferentes ventanas creadas. 

Una vez que volvimos , deberemos identificar el nombre del segundo botón. 

Nos vamos a la ventana de bloque y hacemos lo siguiente: 

Después, seguimos con los siguiente:

Listo, cuando se presione el botón wikipedia (botón2) nos llevará a la ventana con el navegador. 

Botón Volver al Inicio

 Primero deberemos identificar el nombre del tercer botón. 

Luego ponemos la vista de bloques y hacemos lo siguiente:

Listo, cuando hagamos clic sobre el botón "Volver al Inicio (Botón3) nos llevará a la ventana inicial de nuestra app. 

Todo este procedimiento se debe repetir para cada una de las opciones de nuestro menú inicial. Es decir, si esto lo hicimos para el carpincho tendremos que hacer lo mismo para el yacaré y para el aguará-guazú.

Si queres descargar el instalador para tu celular y el proyecto para tu pc haz clic aquí. 

¿Cómo importoar un proyecto? -->

3. Aplicaciones de tipo Quiz Test

La misma va a constar de una pantalla inicial, una pantalla final y un número de pantallas determinado por la cantidad de preguntas que quieran realizar. 

Como una demostración vamos a crear nuestra app solo con dos preguntas ya que a patir de la segunda pantalla la interfaz y la programación se repite para cada una de las preguntas que deseemos agregar.

Empecemos

3.1. Pantalla inicial

• 1 DisposicióVertical
• 2 Imagen
• 1 botón

Modificamos las propiedades del componente DisposiciónVertica1: 

• el ancho y alto se ajusten al contenedor .
• dispHorizontal la centramos. 
• imagen para agregar una imagen de fondo. 

Cambiamos las propiedades de los componentes imagen:

• Ancho y alto para que se ajusten al contenedor. 
• Foto para agregar la imagen. 

Para la imagen dos modificamos el alto y ancho pero dándole porcentajes. 

Por último,  modificamos las propiedades del botón: 

• El alto y ancho lo ajustamos por porcentaje. 
• En imagen agregamos una
• El texto lo dejamos en blaco

Ahora viene la parte de la programación. Para ello vamos a la ventana de bloques y programamos para que cuando se haga clic sobre el botón abra la pantalla de la pregunta n°1. 

Ahora vamos a  cambiar unas propiedades de Screen1: 

El nombre

El icono

El título

3.2. Pantalla de la primer pregunta

La función de esta primer pantalla es la de mostrar una imagen y una pregunta referente a ella, para luego darnos 4 opciones de posibles respuestas (solo 1 es la correcta). La  misma esta compuesta por: 

• 1 DisposiciónVertical
• 1 DiposiciónTabular
• 4 botones
• 2 etiquetas
• 1 imagen
• 2 reproductores
• 1 TinyBD

Modificamos las propiedades de las etiquetas las de colorDeFondo, texto, negrita y la del ancho para que se ajuste al contenedor

Cambiamos las propiedades de los botones las de imagen para agregar los cuadrados de colores, la de negrita y la de texto. 

Ajustamos las propiedades de ambos contenedores (DisposiciónTabular y DisposiciónVertical) para que su alto y ancho se ajusten al contenedor y la de DispHorizontal para que todos los elementos queden centrados. 

Arrastramos los componentes no visibles:

• Reproductor1
• Reproductor2
• TinyBD

De ambos reproductores vamos a modificar la propiedad  de origen para que el 1 tenga un sonido de error y el 2 un sonido de acierto.

TinyBD es un componente que nos va a permitir guardar valores para que los podamos utilizar entre las diferentes pantallas. Nosotros lo vamos a utilizar para los puntos. No vamos a modificar ninguna de sus propiedades. 

Ahora empecemos por la programación: 

Lo primero que vamos a hacer es determinar las tres opciones que no son correctas e identificar los nombres de los botones que las contienen. 

Sabemos que la primera opción es la correcta y que ella se encuentra en el botón1. Por lo tanto los restantes botones son incorrectos. Entonces, vamos a hacer que cuando se presionen suene un sonido (reproductor1) indicando el error y luego pase a la siguiente pregunta (pregunta2 es el nombre de otra de las pantallas). 

Ahora vamos con el botón1 (la opción correcta). Cuando se presione el mismo debe emitir un sonido (reproductor2) de que fue correcto, sumar un punto e ir a la próxima pregunta. 

Acá se puso un poquito mas feo. Pero vamos paso por paso. 

Lo primero que vamos a hacer es crear una variable (un espacio de memoria con un nombre que lo identifica) que le vamos a llamar "Puntos" y la vamos a inicializar (le damos un valor inicial) en 0.

Ahora vamos a seleccionar el componente botón1 y el evento "Cuando botón1. Clic".  y dentro vamos agregando los siguientes bloques: 

Reproductor2 tiene el sonido que indica que fue correcta la elección

Poner "global Puntos  a"

En esta oportunidad queremos que guarde el valor que está contenido (tomar global puntos recupera el último valor almacenado en la la variable) en la variable (0 porque la inicializamos así) + 1 (un punto porque acertó)

Ahora vamos a guardar el valor de la variable en nuestra TinyBD. Para ello la seleccionamos y arrastramos el método "Llamar a TyniBD1. GuardarValor

En etiqueta escribimos el nombre de la variable y en valorAGuardar tomamos el valor contenido en la variable global Puntos. 

Finalmente, hacemos que nos lleve a la pantalla de la segunda pregunta. 

Listo ya tenemos programada nuestra primera pregunta.

3.3. Pantalla para el resto de las preguntas

A partir de la segunda pregunta todo lo que les voy a mostrar ahora se repite en las pantallas de las siguientes preguntas. 

Los componentes y las propiedades a modificar de los mismos son exactamente los mismos que en la pantalla de la pregunta1. 

Lo único que va a cambiar es la programación. Al igual que la pregunta 1 debemos definir el botón que va a ser el correcto así ya empezamos por programas a los incorrectos para que emitan un sonido de error y lleve a la pantalla que sigue (en este caso conduce a la pantalla final ya que mi proyectos solo tiene dos preguntas) que puede ser la de pregunta3, 4, 5, ..., pregunta n o bien a la pantalla final. 

Recordemos que en reproductor1 guardamos el sonido de error. 

En cuanto a la programación del botón correcto es la misma que en la pantalla de la pregunta1. En este caso solo varía el nombre del botón que definimos para que sea correcto, en esta oportunidad es el botón2. 

Lo que sí cambia en esta pantalla es que tenemos que recuperar el valor de la variable "puntos" de la pantalla anterior. 

Vamos a seleccionar en bloques a la pantalla "pregunta2" (nombre que le asignamos al crear el nuevo screen) y arrastramos el evento "cuando pregurnta2.inicializar". Luego seguimos los siguientes pasos:

Los pasos anteriores nos permiten recuperar el valor de la variable en la pantalla anterior. 

Nos tendría que quedar algo asi:

3.4. Pantalla final

Esta última pantalla es la final, en ella vamos a informar que el juego se ha terminado y también el puntaje total obtenido. 

Para armar esta pantalla vamos a necesitar: 

• 1 DisposiciónVertical1
• 1 imagen
• 1 etiqueta
• 1 botón
• 1 TinyBD

Modificamos las propiedades de los componentes: 

• De DisposiciónVertical1 cambiamos su ancho y alto para que se ajusten al contenedor, y el de imagen para agregar una de fondo. 
• De imagen modificamos el ancho para que se ajuste al contenedor. 
• De botón modificamos su texto y negrita
• De etiqueta modificamos el tamaño del texto y negrita. 
• 
  

Lo primero que vamos a hacer es crear la viable "puntos" e iniciarla en 0.

Luego vamos a recuperar el valor de la variable guardado en la TinyBD. Es similar a como recuperamos el valor en la pantalla de la segunda pregunta pero lo que cambia es que el valor se va a recuperar cuando se inicie la pantalla final.  Para ello debemos seguir los siguientes pasos: 

Hasta aquí cuando inicie la pantalla final se va a recuperar el valor almacenado correspondiente a los puntos obtenidos. Ahora vamos a agregar unos bloques más para mostrar el resultado en la etiqueta 

Ahora nos falta programar el botón de salida. Esta combinación de bloques hará que cuando presionemos el botón se guarde el cero en TinyBD para borrar la puntuación resultante y finalmente cerrar la aplicación.

Todos los bloques juntos se deberían de ver así: 

Si queres descargar el instalador para tu celular y el proyecto para tu pc haz clic aquí. 

¿Cómo importo un proyecto? -->

4. La versatilidad de estas apps

Estas dos aplicaciones se pueden adaptar para trabajar contenidos de diferentes áreas. Mantenemos los mismos componentes, la misma estructura, la misma programación solo debemos cambiar las propiedades de los componentes para que se ajusten al nuevo contenido. Por ejemplo: texto, imagen, etc. 

Pueden agregar todas las pantallas que necesiten y sus correspondientes botones. 

5. Materiales multimedia

En el archivo que aparece más abajo, tendrás una lista extensa donde obtener diferentes recursos: imágenes, sonidos, etc. que nos servirán como base de nuestros proyectos.
https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxwcm9mZWFwcGludmVudG9yfGd4OjU2Y2I0MmU4MGJkZDNmYmE