Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

MUSICOTERApS: Programación con MIT App Inventor - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 4 de julio de 2021 por Rafael M.

119 visualizaciones

Video explicativo de la programación de la app MUSICOTERApS como ejemplo de producto de un proyecto de Aprendizaje-Servicio. INTEF.

Más información Transcripción

Descargar la transcripción

Bien, buenos días a todos. Bienvenidos a este curso de aprendizaje de servicio a través de la programación de apps. 00:00:00
Y este vídeo está dedicado a la programación MIP App Inventor de la aplicación móvil que vamos a desarrollar como ejemplo de un producto de aprendizaje de servicio. 00:00:08
Bueno, para poder realizar esta programación y ya se ha comentado a lo largo de los bloques anteriores de este curso 00:00:18
es imprescindible contar con una cuenta de Gmail para poder acceder a la plataforma MIP App Inventor 00:00:27
que nos va a permitir la programación del dispositivo móvil 00:00:33
Bueno, yo ya he desarrollado la aplicación y vamos a ir comentando los diferentes elementos en la parte del diseñador 00:00:37
para luego después comentar la parte que afecta a los bloques de cada uno de los elementos 00:00:45
que hemos seleccionado en el diseñador. 00:00:50
Bueno, esta aplicación, como ya hemos visto en el vídeo anterior, 00:00:53
es una aplicación que lo que pretende es seleccionar o poder ofrecer al usuario 00:00:58
diferentes músicas e imágenes relacionadas con un menú que tenemos seleccionado, 00:01:03
En este caso, pues eligiendo cuatro elementos y la música estará relacionada con algunas de estas temáticas que hemos seleccionado. 00:01:11
Tierra, agua, viento y fuego. 00:01:21
Adicionalmente tenemos un botón de ayuda, en este caso que nos pondría en contacto con un servicio gratuito de ayuda para las personas que necesiten hablar 00:01:23
y bueno, de alguna manera necesiten contar su historia para de alguna manera poder paliar los efectos del estado de ánimo, 00:01:33
en este caso de ansiedad, depresión, etc. 00:01:45
Y la aplicación nos va a permitir activar, reproducir o detener los diferentes sonidos y músicas que hemos elegido. 00:01:48
entonces para realizar esta aplicación móvil vamos a utilizar un menú desplegable 00:01:58
en realidad este menú estará siempre aquí, lo que pasa es que estará oculto 00:02:04
y solamente con este botón vamos a poder visualizar el menú lateral que tenemos aquí 00:02:07
el botón superior nos permite activar o desactivar la música que tenemos seleccionada 00:02:15
y por último el botón salir que nos permite cerrar la aplicación 00:02:22
Bueno, ¿cómo conseguimos todo esto? Bueno, pues en primer lugar lo que tenemos que hacer es, en la ventana del diseñador vamos a colocar varias disposiciones, en este caso, como ya sabemos, en esta paleta de componentes aquí tenemos la disposición, puede ser horizontal, tabular, vertical, etc. 00:02:24
Bueno, pues los elementos con los que vamos a contar o la disposición que vamos a contar de los botones va a ser, en primer lugar, una disposición horizontal, la que vemos aquí arriba, en la que vamos a incluir dos botones. 00:02:45
Esos dos botones, que como ya sabemos los elegimos aquí y los vamos a renombrar, pues son el botón menú y el botón inicio. 00:02:58
En los dos casos ya los he renombrado. En el primer caso no he indicado un texto, simplemente en este caso concreto lo que he seleccionado es, dentro del catálogo de caracteres de cualquier editor de texto, he seleccionado el que corresponde con tres rayitas. 00:03:05
se puede poner tres puntos o menú, la palabra menú, da igual 00:03:21
el caso es que yo he seleccionado estos tres rayitas indicando que es algo desplegable 00:03:25
entonces como ya sabemos en el texto renombramos este botón y colocamos el texto en el interior del botón 00:03:29
y como digo este dispositivo horizontal ofrece dos botones 00:03:37
el botón menú y el botón inicio parada o reproducción y detener como queramos llamarlo 00:03:40
Y como digo, este botón también nos permite encender y apagar la reproducción de la música que se está generando. 00:03:46
En los dos casos, hay que ajustar el alto al contenedor, pero en el caso del botón menú, hemos ajustado el ancho al 15%, 00:03:56
el alto es el mismo, pero en el caso del inicio y parada, pues lo hemos ajustado al contenedor de manera que nos queda un botón más pequeñito 00:04:11
y otro que ocupa el resto de esta disposición horizontal. 00:04:19
Después añadimos otra nueva disposición horizontal, que sería la que ocuparía toda esta pantalla de aquí, 00:04:24
y aquí incluimos dentro de esta disposición horizontal una disposición vertical. 00:04:30
Y en esa disposición vertical es donde vamos a incluir todos los botones de acceso en el menú lateral de acceso a todos los elementos con los que vamos a navegar. 00:04:34
Y además, para cada uno de esos botones y que quede de una manera visualmente más atractiva, le añadimos un espacio, en este caso con otra disposición que incluimos también horizontal. 00:04:45
simplemente esto es un espacio, lo que hemos seleccionado aquí es una disposición horizontal 00:05:00
y lo único que hacemos es un ancho del 2% y el ancho automático 00:05:05
lo incluimos en cada uno de los botones, para separar los botones de manera que nos va a quedar mucho más elegante 00:05:13
cuando se visualice esta disposición, este menú lateral 00:05:17
todos estos botones como digo están incluidos dentro de la disposición vertical 00:05:22
pero no se nos olvide que estamos en una disposición horizontal, es decir, que esto se formaría parte de una disposición horizontal 00:05:26
y el resto de elementos de la disposición horizontal serían, en este caso, imágenes. 00:05:32
Vamos a incluir varias imágenes, como vemos aquí, todas alineadas horizontalmente en esta zona de aquí, 00:05:37
en esta parte de la disposición de la pantalla. 00:05:43
estas imágenes, estas no las he renombrado 00:05:49
pero vamos, a partir de aquí se supone que son imágenes 00:05:53
que tienen que ver evidentemente con los diferentes 00:05:56
menos la primera, que es la imagen que te sugiere momentos de silencio 00:05:58
el resto tienen que ver evidentemente con imágenes que tengan que ver 00:06:03
con la tierra, con el agua, con el viento, etc. 00:06:06
¿Qué tipo de propiedades deben tener estas imágenes? 00:06:09
Pues como vemos, se ajusta el contenedor 00:06:13
en tanto el alto como el ancho y en todas las demás, como vemos, cargamos la foto que corresponda, previamente habremos cargado en la parte de medios 00:06:15
que ahora veremos todos estos elementos y como digo, se ajusta en el alto al contenedor y en ancho automático, de manera que va a ocupar siempre que sea posible 00:06:26
toda la parte de la pantalla. Cuando el menú esté oculto, ocupará toda la parte de la pantalla. 00:06:36
Cuando el menú esté desplegado, entonces se ajustará al resto de la pantalla. 00:06:42
Además, dentro de la disposición vertical que hemos incluido, como digo, en todos estos botones, 00:06:48
tenemos también aquí un elemento que en este caso tiene que ver con el botón de la llamada 00:06:57
que está aquí abajo, es un botón en el que vamos a incluir, es un botón grande, se despliega como habremos visto 00:07:04
en las animaciones anteriores del vídeo anterior, se ajusta el contenedor en cuanto al alto y en cuanto al ancho 00:07:11
lo cual significa que cuando este menú está por aquí, el resto de la pantalla, el resto del espacio disponible 00:07:18
va a ocupar un botón de color rojo que además coloca, tenemos el texto incluido en este botón 00:07:24
teléfono de la esperanza, los centramos 00:07:30
los colores y demás, por supuesto 00:07:33
todo lo que tenga que ver con las propiedades 00:07:35
lo dejamos a criterio del programador 00:07:36
para que seleccione los colores que más les guste 00:07:38
en fin, todos estos botones 00:07:41
sí que comentar que están todos 00:07:43
en forma redondeada 00:07:45
para que le quede un aspecto 00:07:47
visualmente mucho más atractivo 00:07:48
y por último 00:07:50
esto en cuanto a los elementos, llegamos a los componentes 00:07:52
que visualmente podemos ver 00:07:55
y por último añadimos también 00:07:57
elementos que no se ven 00:07:58
En este caso concreto tenemos cuatro reproductores y una herramienta de sensores que tiene que ver con la llamada de teléfono. 00:08:00
Entonces, estos componentes no visibles son los reproductores, evidentemente se puede hacer de otra manera, estamos buscando una forma de programar sencilla y rápida, no tiene por qué hacerse cada reproductor para una música concreta, puede hacerse un único reproductor y con una base de datos ir seleccionando los diferentes elementos, las diferentes músicas a reproducir, 00:08:20
pero en este caso me ha parecido más fácil 00:08:45
pues aplicar un reproductor para cada música 00:08:48
y ya está, ya he notado que este es un ejemplo sencillo 00:08:50
para poder ver cómo se puede realizar un producto final 00:08:53
sin complicarlo excesivamente 00:08:57
en la parte de medios hemos ya subido todos los elementos 00:09:00
que vamos a necesitar, en este caso todas las imágenes 00:09:04
y todas las músicas, por supuesto imágenes libres 00:09:06
de derechos de autor y al igual que las músicas y los sonidos 00:09:10
además hemos incluido una etiqueta 00:09:13
después del botón de la llamada 00:09:18
esta etiqueta va a desaparecer después 00:09:21
cuando pulsemos el botón de ayuda 00:09:23
y esta etiqueta contiene en este caso 00:09:25
la web donde está sacado 00:09:27
en este caso se ha extraído la música 00:09:29
se ha extraído la música gratuita 00:09:31
y los sonidos para poder incluirlos en la aplicación 00:09:32
pues con esta visión general que tenemos ya 00:09:35
de la disposición de los elementos 00:09:39
en el diseñador, vamos entonces ahora a ver cómo podemos 00:09:44
programar cada uno de los elementos. A primera vista, los eventos 00:09:47
que forman parte de esta programación, vamos a ir viéndolos 00:09:52
detalladamente. En primer lugar, vamos con esta primera parte de aquí 00:09:56
y aquí tenemos 00:09:59
el evento cuando se abre la pantalla 00:10:04
todo lo que incluye. Lo que incluye fundamentalmente es 00:10:07
los elementos que hemos comentado anteriormente, la paleta 00:10:12
de componentes que hemos ido seleccionando. Lo que hacemos es lo siguiente 00:10:16
cuando se inicializa la primera pantalla 00:10:20
recuerda además que esta aplicación está toda contenida en una única pantalla 00:10:24
para hacerlo más fácil la aplicación 00:10:28
aunque se deja también al alumno, al programador que pueda 00:10:32
realizar diferentes pantallas con diferentes elementos adicionales bueno 00:10:36
pues en la primera pantalla que es la única que tenemos en lugar lo que 00:10:41
hacemos es colocar en este caso todos los elementos que nos interesa que estén 00:10:44
visibles y los que no en este caso concreto la imagen silencio que es la 00:10:50
primera que aparece queremos que se visualice por lo tanto elegimos en este 00:10:57
caso la instrucción poner silencio punto visible como cierto entonces bueno pues 00:11:02
en esta en este caso nada más empezar ya vemos esa imagen sin embargo la 00:11:08
disposición por ejemplo vertical que es la que nos permitía 00:11:13
disponer de los botones del menú lateral está en falso es decir que no vamos a 00:11:17
poder verlos como tampoco podamos a poder ver el botón de la llamada que 00:11:22
aparece en la parte inferior y luego llamamos a un procedimiento llamado 00:11:28
imágenes ocultas que si observamos en qué consiste básicamente es que todas 00:11:33
las imágenes iniciales las tenemos ocultas y para ello utilizamos la 00:11:38
instrucción que hace referencia a cada una de las imágenes y en él colocamos 00:11:45
como falso para ocultar todas estas imágenes incluyendo también el botón de 00:11:49
la llamada bueno pues cuando esto cuando todas hemos inicializado toda la pantalla disponemos 00:11:54
también eso sí del botón salir que está colocado en la parte final y que sencillamente nos permite 00:12:01
cerrar la aplicación y ya está bueno vamos a centrarnos entonces en qué ocurre en los eventos 00:12:06
que ocurren cuando hacemos clic en cada uno de los elementos en primer lugar en el botón menú 00:12:10
lo que hacíamos es desplegar la disposición vertical de los botones y efectivamente si 00:12:17
Y lo que hacemos con una instrucción condicional, si la disposición vertical de esos botones ya está visible, 00:12:22
pues entonces lo que hacemos es ocultarla. 00:12:29
Pero si no está visible, la hacemos visible. 00:12:31
Es decir, que nos va a permitir con esta pequeña instrucción condicional, 00:12:33
el botón menú nos va a permitir visualizar, desplegar o plegar la disposición de los botones verticales. 00:12:39
Es decir, ese menú lateral va a aparecer o desaparecer cada vez que pulsemos una u otra vez. 00:12:49
Todas las demás que vemos aquí, estas que vemos aquí, todas estas seis eventos que tienen que ver con botones, 00:12:55
tierra, agua, viento, fuego, el botón de ayuda y el botón de la llamada, 00:13:01
son instrucciones que nos van a permitir ocultar todo lo que estuviera y solamente dejar visible la imagen correspondiente. 00:13:06
que haga referencia al botón tierra, al botón agua, al botón viento o al botón luz. 00:13:16
Cada una de estas imágenes las hemos cargado previamente, como ya hemos visto en el diseñador, 00:13:23
y las vamos a asociar a cada uno de los botones. 00:13:30
Entonces, ¿qué hacemos en cada uno de esos botones? 00:13:32
Pues lo primero es llamar a un procedimiento llamado Imágenes Ocultar, 00:13:34
es decir, como hemos visto antes, ocultamos todas las imágenes 00:13:38
y llamamos a la instrucción música parar porque no sabemos lo que se está reproduciendo 00:13:43
pero sea lo que sea lo vamos a parar, aquí tenemos la instrucción 00:13:48
que es cada uno de los reproductores los detenemos 00:13:51
entonces con este procedimiento lo que hacemos es al accionar uno de los botones principales 00:13:54
tierra, agua, viento o fuego 00:13:59
ocultamos todas las imágenes 00:14:01
paramos toda la música y ponemos en este caso la imagen visible que corresponda 00:14:04
con el evento correspondiente 00:14:09
con el botón correspondiente 00:14:11
en el caso del botón de ayuda 00:14:13
que es un botón un poquito especial 00:14:14
ocurre lo mismo, pero además ponemos 00:14:16
como visible el botón de la llamada 00:14:19
que está en la parte superior 00:14:20
la etiqueta que hacía referencia 00:14:21
de donde extraíamos los elementos 00:14:24
los componentes, las imágenes 00:14:26
y mejor dicho, los sonidos 00:14:28
también lo ocultamos, porque ya no es importante 00:14:30
y eso sí 00:14:32
visualizamos, perdón 00:14:34
y ocultamos también la imagen del silencio 00:14:36
esto es así porque como se ha visualizado el botón de la llamada que ahora está visible 00:14:38
cuando hagamos clic sobre el botón de la llamada haremos referencia a la instrucción llamar a un número de teléfono 00:14:45
que en el componente no visible que estaba aquí es el que nos permite realizar una llamada directamente a ese número de teléfono 00:14:51
continuamos entonces con cada uno de estos elementos 00:15:01
de botones de tierra, agua, viento y fuego 00:15:06
y vamos a ver cómo se ejecuta el sonido correspondiente 00:15:09
o la música correspondiente 00:15:14
como digo, ocultamos todo y solamente dejamos visible la imagen 00:15:16
y ahora viene esta instrucción 00:15:19
este evento que tiene que ver con el botón que ejecuta 00:15:23
o reproduce la imagen, perdón, la música o la detiene. 00:15:27
Entonces lo que hacemos es, en este caso, ocultar la disposición vertical de los botones 00:15:31
porque aquí están visibles, pero una vez que ya hemos seleccionado uno de ellos 00:15:36
ya no queremos verlo más y a partir de ahí, con cuatro condiciones, 00:15:41
preguntamos qué imagen está visible. 00:15:48
Como aquí hemos habilitado la imagen correspondiente, 00:15:51
pues dependiendo de la imagen que esté visible 00:15:53
ya podemos acceder a su música 00:15:55
correspondiente, si se estaba 00:15:57
reproduciendo el sonido, se va a parar 00:15:58
cada vez que demos 00:16:01
al botón inicio 00:16:02
parada, y si no se estaba reproduciendo 00:16:05
pues se reproducirá, esto también 00:16:07
es interesante porque al igual que en el anterior caso 00:16:09
lo que hacemos es con una pulsación 00:16:11
o una segunda pulsación, iniciamos 00:16:12
o paramos la reproducción 00:16:14
de la música que le corresponda 00:16:17
y para ello nos apoyamos en la imagen que esté visible 00:16:18
¿vale? 00:16:21
Esto lo realizamos constantemente y eso sí, el botón de la etiqueta y del silencio los visualizamos para que se pueda ver la imagen del silencio y la etiqueta famosa que nos indica de dónde están extraídos las fuentes de información de la música. 00:16:22
Dicho esto, lo único que nos quedaría es qué ocurre si la música ha terminado 00:16:42
Pues en este caso, si se ha terminado en cada uno de los reproductores de finalizar su música 00:16:49
Lo que hacemos es poner a disposición vertical otra vez visible para poder ofrecer otra selección para el usuario 00:16:56
Y de esta manera podemos realizar diferentes reproducciones de música y de imágenes en función del menú que hayamos seleccionado. 00:17:05
Aquí hemos colocado una última instrucción que no afecta evidentemente al programa principal, 00:17:17
simplemente podemos añadir además el cambiar los colores del fondo de la pantalla en función de la selección que tengamos. 00:17:21
Bueno, yo no lo he incluido, pero lo dejo a criterio del programador, del alumno, que lo realice si lo desea. 00:17:28
Y esto es básicamente el programa en sí. No es muy complicado, simplemente para cada uno de los elementos tenemos que colocar el evento correspondiente. 00:17:34
Autor/es:
Rafael M
Subido por:
Rafael M.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
119
Fecha:
4 de julio de 2021 - 11:59
Visibilidad:
Público
Centro:
IES GRAN CAPITAN
Duración:
18′ 50″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
664.86 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid