Saltar navegación

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

Botones y pantallas. APPINVENTOR - 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 9 de enero de 2022 por M. Ángeles P.

149 visualizaciones

Más información Transcripción

Descargar la transcripción

Vamos a crear nuestra primera app utilizando App Inventor. 00:00:01
Tecleamos App Inventor, entramos a la página del MIT y lo siguiente que tenemos que hacer es darle a crear apps. 00:00:07
Está en inglés pero es muy sencillito de entender. 00:00:17
Y tendríamos que entrar con nuestro usuario y nuestra contraseña de Google. 00:00:20
Una vez que entramos, lo que tenemos es todas las apps que hayamos hecho. A vosotros no os saldrá ninguna porque no habéis empezado todavía a hacer ningún programa de App Inventor. 00:00:24
Si queremos cambiar el idioma, simplemente tenemos que venir aquí y elegir el idioma español. 00:00:42
Vamos a comenzar con la primera app. Nos vamos a ir a proyectos y vamos a comenzar un nuevo proyecto. 00:00:49
Venga, el nombre que le vamos a poner tiene que ser un nombre que no puede tener espacios ni símbolos extraños 00:00:58
Voy a poner botones y ventanas, que es la primera actividad que os voy a pedir 00:01:05
Todo seguido, sin espacio 00:01:15
Venga, pues entonces ahora mismo lo que tenemos que hacer es simplemente 00:01:17
Vamos a tener una primera pantalla en la que vamos a hacer el menú de inicio 00:01:21
Vamos a poner tres botones aquí en horizontal y para eso lo que tenemos que hacer lo primero de todo es en disposición, crear una disposición horizontal, que la vamos a meter aquí y vamos a hacer que esta disposición horizontal ocupe todo el ancho de la pantalla. 00:01:27
Bueno, pues para eso lo que vemos en el ancho le decimos que lo ajuste al contenedor, al contenedor de la pantalla. 00:01:45
¿Veis que? Ahora ocupa todo. 00:01:51
Vamos a decirle que esté en el centro de la pantalla y también en el centro tanto en vertical como en horizontal. 00:01:55
Venga, pues entonces ahora, bueno, esperar esto aquí, tengo que ponerle en la disposición también centro y centro 00:02:05
para que aparezca como os he dicho. Venga, pues ahora vamos a meterle tres botones. Cojo el botón primero y lo arrastro, botón segundo y lo arrastro, 00:02:14
y botón tercero y lo arrastro. Los botones los vamos a hacer lo mismo, ajustarlo al contenedor en ancho, para que todos tengan un tamaño equivalente, 00:02:26
¿Vale? Proporcionado. Venga, aquí los tenemos. Estoy con el primer botón, ¿vale? Botón 1 y le voy a cambiar el texto. Le voy a poner aquí ventana 1. ¿Veis? En el texto voy a poner aquí ventana 1. 00:02:41
simplemente haciendo clic fuera se cambia lo mismo para el siguiente ventana 2 veis y ahora 00:02:57
pincho en el tercero puedo pinchar tanto aquí como aquí y en el texto pongo ventana 3 a vuestro gusto 00:03:10
podéis cambiarle el fondo de la pantalla si yo pincho en el fondo de la pantalla o hago aquí 00:03:19
y pincho en el fondo de la pantalla puedo elegir el color que quiero el color de fondo vale pues 00:03:25
yo quiero un color turquesa veis lo mismo con los botones con el botón yo puedo decirle el color de 00:03:31
fondo de ese botón el botón violeta puedo decirle el color del texto que quiera pues voy a ponerlo 00:03:38
No se ve muy distinto, ¿vale? Pues en un botón en amarillo, ¿vale? Por ejemplo, puedo decirle que el tipo de botón, ¿dónde estaba esto? A la forma, aquí, ¿vale? 00:03:49
Le decimos que sea oval, por ejemplo. ¿Veis la diferencia? Esto lo podéis hacer con cada uno de los botones. Vamos a este botón, pues le digo lo mismo, que sea oval, que tenga el color de texto amarillo y el color de fondo violeta. 00:04:04
Lo mismo con el tercero, hemos dicho que el color de texto hemos dicho que amarillo, la forma oval y el color de fondo el violeta. 00:04:26
Venga, pues ya tengo los tres botones. Venga, lo que yo quiero hacer es que cuando le doy a la ventana 1 se me vaya a otra ventana, que la voy a llamar ventana 1. Bueno, pues para esto le doy a añadir ventana. La voy a llamar ventana 1 y acepto. 00:04:48
Pero esta ventana 1, ¿ves? Aquí selecciono la screen 1 y la ventana 1. La ventana 1 está vacía, no tiene nada. Simplemente yo lo que voy a ponerle aquí, podéis ponerle la imagen de fondo que queráis. Yo lo que quería ponerle simplemente es un botón que al darle al botón me vuelva a la ventana 1. 00:05:06
Bueno, pues nada, simplemente lo voy a poner aquí arriba. Le voy a poner inicio. Y lo mismo, lo de los colores lo hacéis ya vosotros como queráis. 00:05:27
Lo mismo para la ventana 2 y para la ventana 3. Añado una ventana que la voy a llamar ventana 2 y voy a hacer lo mismo, simplemente un botón que le voy a llamar inicio. 00:05:38
Y añado también otra ventana que le voy a llamar ventana 3. Estoy en ventana 3 que no tiene nada y le pongo un botón sencillo que le voy a llamar inicio. 00:05:53
Pues ya lo tengo. Aquí vosotros lo que tenéis que hacer es cambiar el fondo de la pantalla o el nombre de las ventanas como vosotros queráis. 00:06:13
estoy en la screen 1, que la podría haber llamado inicio 00:06:24
bueno, screen 1 es la inicial y siempre 00:06:28
se llama de esa manera 00:06:31
cuando estoy en la screen 1, si queremos que aquí en lugar de screen 1 00:06:34
aparezca, por ejemplo, la palabra inicio 00:06:39
eso lo podemos cambiar 00:06:42
eso lo podemos cambiar aquí 00:06:43
creo recordar, icono 00:06:47
Pues no. Aquí, esto es. Inicio. Voy a ponerlo con mayúsculas. ¿Veis? Ha cambiado el nombre de esta ventana. Venga, nosotros simplemente lo que tenemos ahora es el diseño de las ventanas. 00:06:53
Vamos a irnos a bloques para programar. Cuando estoy en bloques, estoy en Screen 1. Yo quiero que cuando le doy al botón 1, cuando hago clic en el botón 1, se me abra una ventana. 00:07:11
Vale, pues esto le damos aquí a control, perdón, le damos aquí a abrir otra pantalla y queremos que esa pantalla se llame ventana 1. 00:07:22
¿De acuerdo? Esta es la única que tenemos que hacer. 00:07:37
Estamos dándole la orden que cuando le damos al botón 1 se me abra la pantalla que se llama ventana 1. 00:07:40
Hacemos lo mismo para el botón 2 y para el botón 3. 00:07:46
Vamos a duplicarlo para ahorrarnos trabajo y le decimos que al botón 2 se me abra la ventana 2 y duplico y hago lo mismo con el botón 3, espero que se me abra la ventana 3. 00:07:48
Venga, pues ya tengo la programación hecha. Al dar al botón, a la ventana 1 se me abrirá la pantalla que se llama ventana 1, ventana 2 y ventana 3. 00:08:04
Ahora lo que vamos a programar es la ventana 1 para que al dar al botón de inicio se me vaya a la screen 1. 00:08:13
Daos cuenta de que este botón de inicio se llama también botón 1, pero es el botón 1 que corresponde a la ventana 1. 00:08:23
Me vengo a bloques, le doy al botón 1 y lo mismo, cuando hago clic en el botón 1 se ejecuta, está un poquito más abajo, abrir otra pantalla que se va a llamar Screen 1, que es la del inicio. 00:08:28
De acuerdo, vamos a hacer lo mismo para la ventana 2. Cuando hago clic se abre otra pantalla que se llama Screen 1 y lo mismo para la ventana 3. 00:08:43
De acuerdo, tendríamos que darle al botón y en control cuando se abre la pantalla que se llama Screen1. Bueno, ya tendríamos el programa, ya tendríamos el diseño y tendríamos también los programas. 00:09:01
Entonces, para probarlo tenemos que generar el archivo APK, que es lo que os he pedido que me mandéis. Le doy al archivo APK, lo va generando y cuando lo descargo es lo que subo al aula virtual. Bueno, pues espero que os haya servido de ayuda. 00:09:20
Autor/es:
Ángeles Puertas
Subido por:
M. Ángeles P.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
149
Fecha:
9 de enero de 2022 - 11:41
Visibilidad:
Público
Centro:
IES MIGUEL DELIBES
Duración:
09′ 41″
Relación de aspecto:
1.86:1
Resolución:
1600x860 píxeles
Tamaño:
485.91 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid