1
00:00:01,070 --> 00:00:09,050
Para utilizar App Inventor, pulsáis sobre Google App Inventor y elegimos la primera entrada Meet App Inventor.

2
00:00:09,609 --> 00:00:17,989
Una vez dentro, pulsáis en Create Apps y vamos a iniciar sesión con nuestra cuenta.

3
00:00:18,190 --> 00:00:20,769
Si no tenéis cuenta, tenéis que crearla.

4
00:00:26,149 --> 00:00:31,510
Una vez dentro, aparecerán todos vuestros proyectos, si es que ya habéis hecho alguno.

5
00:00:31,510 --> 00:00:36,710
Pulsamos sobre proyectos, comenzar un proyecto nuevo

6
00:00:36,710 --> 00:00:45,250
Vamos a escribir el nombre del proyecto que será semáforo, vuestras iniciales y vuestro curso

7
00:00:45,250 --> 00:00:51,350
No podéis poner ni tildes, ni guiones, ni ningún otro símbolo

8
00:00:51,350 --> 00:00:54,429
Tenéis que poner solo letras y números

9
00:00:54,429 --> 00:00:57,789
Le dais a aceptar y aparecerá un proyecto en blanco

10
00:00:57,789 --> 00:01:20,099
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.

11
00:01:20,099 --> 00:01:44,060
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.

12
00:01:44,060 --> 00:01:50,219
Le dais a Intro y si subís veréis que aparece el nombre de la aplicación aquí.

13
00:01:51,459 --> 00:01:58,239
Vamos a ir añadiendo componentes. Vamos a añadir primero tres disposiciones horizontales.

14
00:01:58,459 --> 00:02:05,540
Pulsamos sobre, veis, en el lado izquierdo, en Disposición, vamos a poner tres disposiciones horizontales.

15
00:02:08,219 --> 00:02:12,439
Vamos a crear un semáforo y por eso necesitamos tres huecos.

16
00:02:12,439 --> 00:02:17,099
Dentro de cada disposición horizontal vamos a meter un botón

17
00:02:17,099 --> 00:02:19,740
En interfaz de usuario, arriba, el botón

18
00:02:19,740 --> 00:02:22,400
Pulsamos y arrastramos a la pantalla

19
00:02:22,400 --> 00:02:26,000
Cuando aparezca la barra azul en el lado izquierdo

20
00:02:26,000 --> 00:02:32,699
Pulsamos y queda el botón dentro de la disposición horizontal 1

21
00:02:32,699 --> 00:02:36,180
Otro botón en la disposición horizontal 2

22
00:02:36,180 --> 00:02:40,500
Y otro botón en la disposición horizontal 3

23
00:02:40,500 --> 00:02:44,319
Estos serían todos los componentes que vamos a utilizar

24
00:02:44,319 --> 00:02:47,919
Vamos a cambiar las propiedades de cada componente

25
00:02:47,919 --> 00:02:50,280
La pantalla ya la hemos cambiado

26
00:02:50,280 --> 00:02:52,599
Pasamos a la disposición horizontal 1

27
00:02:52,599 --> 00:02:56,599
Cambiamos la posición que tiene

28
00:02:56,599 --> 00:03:02,789
Sería en el centro y en el centro

29
00:03:02,789 --> 00:03:06,810
Y el alto vamos a poner que sea ajustar al contenedor

30
00:03:06,810 --> 00:03:10,289
Para que ocupe toda la pantalla que sea posible

31
00:03:10,289 --> 00:03:11,189
Y el ancho también

32
00:03:11,189 --> 00:03:20,689
Al cambiar las disposiciones horizontales 2 y 3, cambiará el tamaño de la 1.

33
00:03:21,449 --> 00:03:25,490
Una vez que hemos cambiado la disposición horizontal 1, pasamos al botón 1.

34
00:03:26,330 --> 00:03:27,650
Este va a ser el botón rojo.

35
00:03:28,150 --> 00:03:37,310
Lo primero que vamos a hacer para distinguirlo bien es cambiar su nombre en componentes, cambiar nombre y escribimos rojo.

36
00:03:37,310 --> 00:03:38,930
Le damos a aceptar.

37
00:03:38,930 --> 00:03:58,120
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.

38
00:03:58,120 --> 00:04:22,160
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

39
00:04:22,160 --> 00:04:27,939
y el texto para botón 1 vamos a escribir rojo.

40
00:04:30,199 --> 00:04:32,459
Pulsamos, quedaría así.

41
00:04:33,660 --> 00:04:36,600
Pasamos a la disposición horizontal 2.

42
00:04:38,769 --> 00:04:40,550
Ponemos exactamente igual que en la 1.

43
00:04:40,550 --> 00:04:49,310
Si recordáis, era centro, centro y en alto ajustar al contenedor y en ancho también.

44
00:04:50,389 --> 00:04:52,449
Veis que ya van quedando iguales.

45
00:04:52,449 --> 00:05:08,459
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.

46
00:05:08,459 --> 00:05:31,209
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.

47
00:05:31,209 --> 00:05:52,730
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.

48
00:05:52,730 --> 00:06:09,120
En botón 3, negrita, el alto hemos puesto 130 píxeles, aceptar, ancho 130 píxeles, aceptar.

49
00:06:11,550 --> 00:06:18,509
La forma oval y en el texto para botón 1 vamos a poner verde.

50
00:06:22,769 --> 00:06:27,610
Este es el aspecto que va a tener nuestra aplicación en el móvil.

51
00:06:27,610 --> 00:06:35,230
Una vez que hayamos terminado de programar cómo va a quedar en el móvil, programamos los bloques, cómo va a funcionar.

52
00:06:35,689 --> 00:06:43,709
Pulsamos sobre bloques y en esta parte vamos a ir programando botón a botón.

53
00:06:44,550 --> 00:06:51,389
Pulsamos sobre el botón rojo y la primera seleccionamos cuando rojo clic.

54
00:06:51,389 --> 00:07:10,990
Y ahora vamos a poner como color de fondo, bueno, perdón, poner rojo, color de fondo, como, y le vamos a poner rojo.

55
00:07:14,079 --> 00:07:16,800
Colores y elegimos el rojo que está aquí.

56
00:07:18,660 --> 00:07:18,920
Vale.

57
00:07:19,639 --> 00:07:27,680
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.

58
00:07:28,680 --> 00:07:44,139
En vez de poner rojo, le vamos a poner amarillo, color de fondo y en vez del rojo lo eliminamos y ponemos amarillo.

59
00:07:44,779 --> 00:07:50,399
Como veis, he cometido aquí un fallo y el botón 3 no le he cambiado el nombre.

60
00:07:50,399 --> 00:08:00,399
Tenemos que volver a diseñador, botón 3, cambiar nombre y vamos a poner verde.

61
00:08:00,639 --> 00:08:07,529
para luego poder programarlo sin equivocarnos volvemos a los bloques y

62
00:08:07,529 --> 00:08:19,860
perdón este no se amarillo le pondríamos negro color negro duplicamos

63
00:08:19,860 --> 00:08:27,180
el último que sería verde y en este caso sigue siendo color negro

64
00:08:27,180 --> 00:08:31,959
para evitar tener que volver a copiar todo esto podemos duplicar todo entero

65
00:08:31,959 --> 00:08:38,559
pulsando sobre cuando duplicar y en vez del rojo vamos a poner amarillo y

66
00:08:38,559 --> 00:08:45,100
entonces el amarillo ya no sería rojo sino que sería

67
00:08:45,100 --> 00:08:55,620
negro el rojo sería negro perdón y el amarillo ahora sería amarillo

68
00:08:55,620 --> 00:09:05,519
duplicamos para el verde entonces el amarillo lo eliminamos

69
00:09:05,519 --> 00:09:18,399
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.

70
00:09:19,639 --> 00:09:25,759
De esta forma hemos terminado nuestro programa, ahora nos quedaría comprobar que funciona.

71
00:09:25,759 --> 00:09:38,179
Para ello pulsamos sobre conectar, ahí companion, aparece el código QR y con nuestro móvil lo escanearíamos, comprobaríamos que funciona.

72
00:09:39,600 --> 00:09:55,279
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.

73
00:09:55,759 --> 00:09:56,559
Gracias.