Práctica para realizar la aplicación TonalHELP en WordPress

1. Tonal Help
1 PRÁCTICA TUTORIZADA PARA LA REALIZACIÓN DE LA APP
En este documento se encuentran detallados los pasos que hay que seguir para poder programar esta
aplicación ‘diccionario de tonalidades’ con la herramienta App Inventor.
Con esta práctica se adquieren las siguientes habilidades para la programación de aplicaciones en el
entorno de Android:
• Creación de diversas pantallas
• Cambio de imagen con un solo elemento de imagen
• Distribución ordenada de los elementos en la pantalla por medio de Arrangements
2 CREACIÓN DE LAS PANTALLAS
Por defecto, el programa crea una pantalla llamada Screen1. Nosotros crearemos hasta 4 pantallas para
facilitar el uso de la App y que la navegación sea elegante y fluida.
Pinchamos en el botón Add Screen … y nombramos la nueva pantalla como Screen2.
Haremos eso para Sostenidos y Bemoles.

2. Para la navegación entre pantallas tenemos que asignar a un botón otra pantalla.
3 SCREEN 1 (PANTALLA DE INICIO)
Insertamos un Label donde escribir Bienvenido y un botón con el texto Comenzar. Ambos estarán
contenidos en un Vertical Arrangement.
Jugamos con el formato del Label para que se adecúe a nuestro gusto.
Por último insertamos en el atributo Image del Vertical Arrangement una imagen de fondo, parecida a
la presentada en este tutorial.
4 SCREEN 2 (NUESTRO MENÚ)
Esta pantalla nos servirá de menú para navegar por la aplicación. Constará de 4 botones y una imagen.

3. *NOMENCLATURA*: La nomenclatura que vamos a utilizar para los botones es
b+nombre tono+s(sostenido) o b(bemol)+m(menor). Para las imágenes se sigue la
misma norma sin la b que indica botón.
Tendremos los botones correspondientes a Do M y La m y los que nos dirigen a las otras dos pantallas.
Para las imágenes cargaremos todas en el apartado Media.
Estarán todos los archivos que subamos disponibles en los elementos Image de todas las pantallas.

4. La programación de los botones es la siguiente:
5 SOSTENIDOS Y BEMOLES
Estas dos pantallas son semejantes, cambiando los nombres de las tonalidades y, por consiguiente las
imágenes correspondientes a las escalas. Pero deberemos cambiar el nombre de todos los botones y
subir todas las imágenes correspondientes para repetir el proceso de programación por bloques del
botón las 14 veces.

5. 6 ICONO DE LA APP Y QUITAR TÍTULO DE LA PANTALLA
Como dos últimos detalles adjuntaremos una imagen que servirá de icono para nuestra app cuando la
inicialicemos en el dispositivo móvil y quitaremos el título de la
pantalla para embellecer la aplicación.
Ambas cosas las hacemos en la Screen1, en la columna de
Properties.
Deshabilitamos la casilla de TitleVisible y el título no se mostrará en
la parte superior de la pantalla.
Y YA ESTARÍA TERMINADA NUESTRA APP TONAL HELP. GRACIAS
POR SEGUIR ESTAS INSTRUCCIONES Y AHORA SOLO QUEDA
DESCARGAR LA APP Y DISFRUTAR UTILIZÁNDOLA.
TONAL HELP ©