Saltar navegación

App Inventor semáforo subtitulado - 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 12 de julio de 2023 por M.victoria P.

10 visualizaciones

Más información Transcripción

Descargar la transcripción

Para utilizar App Inventor, pulsáis sobre Google App Inventor y elegimos la primera entrada Meet App Inventor. 00:00:01
Una vez dentro, pulsáis en Create Apps y vamos a iniciar sesión con nuestra cuenta. 00:00:09
Si no tenéis cuenta, tenéis que crearla. 00:00:18
Una vez dentro, aparecerán todos vuestros proyectos, si es que ya habéis hecho alguno. 00:00:26
Pulsamos sobre proyectos, comenzar un proyecto nuevo 00:00:31
Vamos a escribir el nombre del proyecto que será semáforo, vuestras iniciales y vuestro curso 00:00:36
No podéis poner ni tildes, ni guiones, ni ningún otro símbolo 00:00:45
Tenéis que poner solo letras y números 00:00:51
Le dais a aceptar y aparecerá un proyecto en blanco 00:00:54
Como veis aquí tenemos varias partes. En la parte izquierda tenemos componentes que podemos utilizar para añadir a nuestra pantalla de móvil. Aquí tenemos la pantalla que es como va a quedar nuestro diseño. Aquí los componentes que vamos añadiendo y aquí las propiedades de cada componente. 00:00:57
El primer componente que tenemos, como veis, es la pantalla. Vamos a cambiar su nombre. Es el único componente que tenemos. Entonces, en propiedades, donde pone título, seleccionamos Screen1 y ponemos semáforo, vuestras iniciales y vuestro curso. 00:01:20
Le dais a Intro y si subís veréis que aparece el nombre de la aplicación aquí. 00:01:44
Vamos a ir añadiendo componentes. Vamos a añadir primero tres disposiciones horizontales. 00:01:51
Pulsamos sobre, veis, en el lado izquierdo, en Disposición, vamos a poner tres disposiciones horizontales. 00:01:58
Vamos a crear un semáforo y por eso necesitamos tres huecos. 00:02:08
Dentro de cada disposición horizontal vamos a meter un botón 00:02:12
En interfaz de usuario, arriba, el botón 00:02:17
Pulsamos y arrastramos a la pantalla 00:02:19
Cuando aparezca la barra azul en el lado izquierdo 00:02:22
Pulsamos y queda el botón dentro de la disposición horizontal 1 00:02:26
Otro botón en la disposición horizontal 2 00:02:32
Y otro botón en la disposición horizontal 3 00:02:36
Estos serían todos los componentes que vamos a utilizar 00:02:40
Vamos a cambiar las propiedades de cada componente 00:02:44
La pantalla ya la hemos cambiado 00:02:47
Pasamos a la disposición horizontal 1 00:02:50
Cambiamos la posición que tiene 00:02:52
Sería en el centro y en el centro 00:02:56
Y el alto vamos a poner que sea ajustar al contenedor 00:03:02
Para que ocupe toda la pantalla que sea posible 00:03:06
Y el ancho también 00:03:10
Al cambiar las disposiciones horizontales 2 y 3, cambiará el tamaño de la 1. 00:03:11
Una vez que hemos cambiado la disposición horizontal 1, pasamos al botón 1. 00:03:21
Este va a ser el botón rojo. 00:03:26
Lo primero que vamos a hacer para distinguirlo bien es cambiar su nombre en componentes, cambiar nombre y escribimos rojo. 00:03:28
Le damos a aceptar. 00:03:37
Y ahora, veis que aquí dentro sigue apareciendo texto para botón 1. Vamos a cambiar en propiedades varias cosas. Entre ellas, el texto va a ir en negrita. Pulsamos sobre ella. El tamaño de la letra está bien. 00:03:38
El alto y el ancho lo vamos a cambiar, vamos a poner en píxeles, vais a escribir 130, intro, perdón, aceptar, en ancho, píxeles, 130, aceptar, vamos a utilizar la forma que sea oval para que sea redondo 00:03:58
y el texto para botón 1 vamos a escribir rojo. 00:04:22
Pulsamos, quedaría así. 00:04:30
Pasamos a la disposición horizontal 2. 00:04:33
Ponemos exactamente igual que en la 1. 00:04:38
Si recordáis, era centro, centro y en alto ajustar al contenedor y en ancho también. 00:04:40
Veis que ya van quedando iguales. 00:04:50
En el botón 2, este va a ser el amarillo, cambiaremos su nombre primero en componentes, aceptar, y luego vamos a cambiar sus propiedades. 00:04:52
Primero negrita, el alto 130 píxeles, el ancho 130 píxeles, en la forma oval y en el texto para botón 2 vamos a escribir amarillo. 00:05:08
Nos quedaría solamente la disposición horizontal 3, el alto ajustar al contenedor, ancho ajustar al contenedor, y no hemos cambiado que esté centrada, quedaría como las otras. 00:05:31
En botón 3, negrita, el alto hemos puesto 130 píxeles, aceptar, ancho 130 píxeles, aceptar. 00:05:52
La forma oval y en el texto para botón 1 vamos a poner verde. 00:06:11
Este es el aspecto que va a tener nuestra aplicación en el móvil. 00:06:22
Una vez que hayamos terminado de programar cómo va a quedar en el móvil, programamos los bloques, cómo va a funcionar. 00:06:27
Pulsamos sobre bloques y en esta parte vamos a ir programando botón a botón. 00:06:35
Pulsamos sobre el botón rojo y la primera seleccionamos cuando rojo clic. 00:06:44
Y ahora vamos a poner como color de fondo, bueno, perdón, poner rojo, color de fondo, como, y le vamos a poner rojo. 00:06:51
Colores y elegimos el rojo que está aquí. 00:07:14
Vale. 00:07:18
Una opción es hacer lo mismo con cada uno de los colores, pero también tenemos la opción de pulsar sobre donde pone poner y duplicamos. 00:07:19
En vez de poner rojo, le vamos a poner amarillo, color de fondo y en vez del rojo lo eliminamos y ponemos amarillo. 00:07:28
Como veis, he cometido aquí un fallo y el botón 3 no le he cambiado el nombre. 00:07:44
Tenemos que volver a diseñador, botón 3, cambiar nombre y vamos a poner verde. 00:07:50
para luego poder programarlo sin equivocarnos volvemos a los bloques y 00:08:00
perdón este no se amarillo le pondríamos negro color negro duplicamos 00:08:07
el último que sería verde y en este caso sigue siendo color negro 00:08:19
para evitar tener que volver a copiar todo esto podemos duplicar todo entero 00:08:27
pulsando sobre cuando duplicar y en vez del rojo vamos a poner amarillo y 00:08:31
entonces el amarillo ya no sería rojo sino que sería 00:08:38
negro el rojo sería negro perdón y el amarillo ahora sería amarillo 00:08:45
duplicamos para el verde entonces el amarillo lo eliminamos 00:08:55
Quedaría en negro y el verde, bueno le podemos cambiar directamente aquí, perdón, si queréis, no, pero es que igual queda, bueno, este verde. 00:09:05
De esta forma hemos terminado nuestro programa, ahora nos quedaría comprobar que funciona. 00:09:19
Para ello pulsamos sobre conectar, ahí companion, aparece el código QR y con nuestro móvil lo escanearíamos, comprobaríamos que funciona. 00:09:25
Una vez que lo hayamos comprobado vamos a enviarlo a Classroom, para ello pulsáis en proyectos, exportar a mi ordenador el proyecto AIA, se descarga aquí a la izquierda y este es el archivo que subiríais a Classroom. 00:09:39
Gracias. 00:09:55
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
María Victoria Puente Cabrerizo
Subido por:
M.victoria P.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
10
Fecha:
12 de julio de 2023 - 10:10
Visibilidad:
Clave
Centro:
IES RAYUELA
Duración:
09′ 57″
Relación de aspecto:
1.85:1
Resolución:
1376x744 píxeles
Tamaño:
40.58 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid