1
00:00:01,899 --> 00:00:05,919
Vamos a crear nuestra primera app utilizando App Inventor.

2
00:00:07,519 --> 00:00:17,539
Tecleamos App Inventor, entramos a la página del MIT y lo siguiente que tenemos que hacer es darle a crear apps.

3
00:00:17,800 --> 00:00:19,539
Está en inglés pero es muy sencillito de entender.

4
00:00:20,899 --> 00:00:24,160
Y tendríamos que entrar con nuestro usuario y nuestra contraseña de Google.

5
00:00:24,160 --> 00:00:42,840
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.

6
00:00:42,920 --> 00:00:48,420
Si queremos cambiar el idioma, simplemente tenemos que venir aquí y elegir el idioma español.

7
00:00:49,759 --> 00:00:58,170
Vamos a comenzar con la primera app. Nos vamos a ir a proyectos y vamos a comenzar un nuevo proyecto.

8
00:00:58,170 --> 00:01:05,909
Venga, el nombre que le vamos a poner tiene que ser un nombre que no puede tener espacios ni símbolos extraños

9
00:01:05,909 --> 00:01:15,280
Voy a poner botones y ventanas, que es la primera actividad que os voy a pedir

10
00:01:15,280 --> 00:01:17,739
Todo seguido, sin espacio

11
00:01:17,739 --> 00:01:21,980
Venga, pues entonces ahora mismo lo que tenemos que hacer es simplemente

12
00:01:21,980 --> 00:01:27,359
Vamos a tener una primera pantalla en la que vamos a hacer el menú de inicio

13
00:01:27,359 --> 00:01:45,379
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.

14
00:01:45,379 --> 00:01:51,540
Bueno, pues para eso lo que vemos en el ancho le decimos que lo ajuste al contenedor, al contenedor de la pantalla.

15
00:01:51,680 --> 00:01:53,900
¿Veis que? Ahora ocupa todo.

16
00:01:55,280 --> 00:02:03,859
Vamos a decirle que esté en el centro de la pantalla y también en el centro tanto en vertical como en horizontal.

17
00:02:05,140 --> 00:02:14,240
Venga, pues entonces ahora, bueno, esperar esto aquí, tengo que ponerle en la disposición también centro y centro

18
00:02:14,240 --> 00:02:25,699
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,

19
00:02:26,419 --> 00:02:41,030
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,

20
00:02:41,030 --> 00:02:57,639
¿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.

21
00:02:57,639 --> 00:03:10,840
simplemente haciendo clic fuera se cambia lo mismo para el siguiente ventana 2 veis y ahora

22
00:03:10,840 --> 00:03:19,879
pincho en el tercero puedo pinchar tanto aquí como aquí y en el texto pongo ventana 3 a vuestro gusto

23
00:03:19,879 --> 00:03:25,240
podéis cambiarle el fondo de la pantalla si yo pincho en el fondo de la pantalla o hago aquí

24
00:03:25,240 --> 00:03:31,060
y pincho en el fondo de la pantalla puedo elegir el color que quiero el color de fondo vale pues

25
00:03:31,060 --> 00:03:38,360
yo quiero un color turquesa veis lo mismo con los botones con el botón yo puedo decirle el color de

26
00:03:38,360 --> 00:03:49,000
fondo de ese botón el botón violeta puedo decirle el color del texto que quiera pues voy a ponerlo

27
00:03:49,000 --> 00:04:04,639
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?

28
00:04:04,639 --> 00:04:26,139
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.

29
00:04:26,139 --> 00:04:48,589
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.

30
00:04:48,589 --> 00:05:06,420
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.

31
00:05:06,420 --> 00:05:27,009
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.

32
00:05:27,009 --> 00:05:37,670
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.

33
00:05:38,709 --> 00:05:53,449
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.

34
00:05:53,449 --> 00:06:12,000
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.

35
00:06:13,980 --> 00:06:24,500
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.

36
00:06:24,500 --> 00:06:28,600
estoy en la screen 1, que la podría haber llamado inicio

37
00:06:28,600 --> 00:06:31,720
bueno, screen 1 es la inicial y siempre

38
00:06:31,720 --> 00:06:34,079
se llama de esa manera

39
00:06:34,079 --> 00:06:39,019
cuando estoy en la screen 1, si queremos que aquí en lugar de screen 1

40
00:06:39,019 --> 00:06:42,360
aparezca, por ejemplo, la palabra inicio

41
00:06:42,360 --> 00:06:43,819
eso lo podemos cambiar

42
00:06:43,819 --> 00:06:47,920
eso lo podemos cambiar aquí

43
00:06:47,920 --> 00:06:53,759
creo recordar, icono

44
00:06:53,759 --> 00:07:10,279
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.

45
00:07:11,019 --> 00:07:22,579
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.

46
00:07:22,579 --> 00:07:36,660
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.

47
00:07:37,120 --> 00:07:39,459
¿De acuerdo? Esta es la única que tenemos que hacer.

48
00:07:40,240 --> 00:07:45,579
Estamos dándole la orden que cuando le damos al botón 1 se me abra la pantalla que se llama ventana 1.

49
00:07:46,180 --> 00:07:48,579
Hacemos lo mismo para el botón 2 y para el botón 3.

50
00:07:48,579 --> 00:08:04,079
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.

51
00:08:04,579 --> 00:08:13,199
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.

52
00:08:13,579 --> 00:08:22,699
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.

53
00:08:23,139 --> 00:08:28,899
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.

54
00:08:28,899 --> 00:08:43,500
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.

55
00:08:43,500 --> 00:09:01,720
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.

56
00:09:01,720 --> 00:09:20,440
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.

57
00:09:20,440 --> 00:09:38,820
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.