1
00:00:00,000 --> 00:00:07,799
Hola, ¿qué tal? ¿Cómo estáis? En este videotutorial os vamos a explicar los aspectos más importantes

2
00:00:07,799 --> 00:00:12,939
para que podáis diseñar la aplicación para la audioguía del proyecto del Museo de Arte Medieval

3
00:00:12,939 --> 00:00:16,740
que estáis haciendo ahora en segundo de la ESO. Esto no es una guía paso a paso, es decir,

4
00:00:16,800 --> 00:00:22,280
no os vamos a resolver todos los pasos necesarios para poder llegar a poder programar esta aplicación,

5
00:00:22,660 --> 00:00:26,460
pero sí que os vamos a dar aquellos aspectos más importantes que os permitan arrancar,

6
00:00:26,460 --> 00:00:32,079
que os permitan iniciar el proyecto y que todo eso unido a lo que vosotros ya sabéis

7
00:00:32,079 --> 00:00:37,600
y a lo que podáis ir pensando entre todos, lleguéis a hacer una aplicación que funcione,

8
00:00:37,679 --> 00:00:39,939
una aplicación que cumpla con los objetivos de este proyecto.

9
00:00:40,399 --> 00:00:44,179
Bueno, en primer lugar, lo primero que necesitáis localizar es este esquema de pantallas,

10
00:00:44,280 --> 00:00:47,140
lo tenéis en el aula virtual donde están todos los materiales del proyecto

11
00:00:47,140 --> 00:00:51,439
y aquí prácticamente tenéis todo lo necesario para poder programar esta aplicación.

12
00:00:51,899 --> 00:01:00,519
¿Por qué? Porque lo que tenéis es un esquema, es como si fuera un diagrama de flujo de los tres tipos de pantallas que tiene que haber en esta aplicación,

13
00:01:00,659 --> 00:01:09,120
luego veremos que son más, pero en esencia son tres tipos diferentes, cómo están interconectadas entre ellas y qué bloques de programación tenéis que utilizar

14
00:01:09,120 --> 00:01:17,439
para ir pasando de unas a otras para que la aplicación funcione y para que no haya ningún problema y toda la información relativa a todas las obras de arte

15
00:01:17,439 --> 00:01:19,759
la podéis tener disponible en esta aplicación.

16
00:01:19,959 --> 00:01:23,759
Bueno, en primer lugar, quiero que os fijéis en esta parte de aquí, lo que estoy señalando con el ratón.

17
00:01:24,140 --> 00:01:26,200
Esto sería la pantalla inicial de la aplicación.

18
00:01:26,299 --> 00:01:29,739
Luego lo vamos a ver con un ejemplo real, pero bueno, para que lo entendáis,

19
00:01:30,159 --> 00:01:34,280
esto es lo primero que aparece cuando el usuario hace clic en el icono de la aplicación en el móvil.

20
00:01:34,939 --> 00:01:40,479
Esto de aquí arriba, este cuadradito, sería para que vosotros personalicéis lo que sería el título de la aplicación.

21
00:01:40,479 --> 00:01:45,120
Pues audio guía Museo Arte Medieval, bueno, como vosotros queráis, ¿vale?

22
00:01:45,159 --> 00:01:47,280
Pero sería, bueno, pues un campo personalizable.

23
00:01:47,439 --> 00:01:49,780
Podéis poner alguna imagen, eso ya al gusto de cada uno.

24
00:01:50,280 --> 00:01:53,840
Lo que sí es muy importante es respetar esta configuración de botones.

25
00:01:53,840 --> 00:02:00,759
Como os han tocado seis obras de arte a cada grupo, pues tiene que haber un botón que lleve a la pantalla de información de cada una de las obras de arte.

26
00:02:01,140 --> 00:02:07,759
Aquí aparecen solamente los números del 1 al 6, pero lo suyo sería que vosotros escribáis algo que identifique esa obra.

27
00:02:07,859 --> 00:02:17,020
Por ejemplo, pues si os ha tocado, yo que sé, me lo estoy inventando, la Iglesia de San Marcos, pues en este botón que ponga San Marcos o Iglesia de San Marcos o algo así.

28
00:02:17,020 --> 00:02:22,740
¿Vale? Acompañado del número de la obra, porque en este caso sería la número 1, pues 1, Iglesia de San Marcos.

29
00:02:22,980 --> 00:02:33,400
¿Bien? Bueno, pues cuando el usuario pulsa en este botón, ¿dónde iría? Pues si seguimos esta flechita, donde nos va a llevar es a la página que sería la correspondiente a esta obra de arte.

30
00:02:33,520 --> 00:02:37,439
En concreto, pues la obra número 1, que es, en el ejemplo que yo os he puesto, la Iglesia de San Marcos.

31
00:02:37,560 --> 00:02:42,920
Bueno, pues en esa pantalla, ¿qué aparecería? Aparecería una foto del monumento, ¿vale?

32
00:02:42,920 --> 00:02:54,180
Si estáis trabajando esta obra, habéis trabajado esta obra en plástica y habéis hecho una personalización en plástica de esta obra, pues aparecería también el dibujo que habéis hecho en plástica, pero si no, solamente una foto real de esta obra de arte.

33
00:02:54,580 --> 00:02:59,620
Y abajo dos botones. El botón de volver lo que nos va a permitir es volver a la pantalla de inicio.

34
00:03:00,000 --> 00:03:10,720
Y el botón info me va a llevar a una segunda pantalla donde va a aparecer un texto explicativo de la obra, los textos que habéis trabajado en la asignatura de historia, y a su vez también dos botones.

35
00:03:10,719 --> 00:03:23,539
El botón de volver, que volvería a la pantalla anterior, y el botón de inicio, que me llevaría de golpe, fijaros el caminito de esta flecha, a la pantalla inicial, es decir, a la primera pantalla que el usuario se encuentra cuando entra por primera vez en la aplicación, la de los seis botones.

36
00:03:24,079 --> 00:03:35,300
Bien, cuando entramos en la pantalla de info, es decir, cuando estoy en la pantalla de la obra, en este caso, que le sea de San Marcos, y el usuario pulsa info, además de ver el texto, se tiene que escuchar un audio, ¿vale?

37
00:03:35,300 --> 00:03:40,460
Ese audio es el audio que vosotros habéis grabado, pero muy importante, tiene que estar en MP3, ¿vale?

38
00:03:40,460 --> 00:03:44,380
Porque si no lo tenemos en MP3, en Amplify Inventor no va a funcionar.

39
00:03:44,580 --> 00:03:50,180
Preguntad a vuestro profesor cuál es la manera más apropiada de pasar esos audios que ya tenéis grabados en el móvil a MP3,

40
00:03:50,500 --> 00:03:55,920
si no sabéis hacerlo, y vuestro profesor os ayudará para que lo tengáis disponible con todos.

41
00:03:56,580 --> 00:04:00,140
Bien, vamos a ver cómo sería esto con un ejemplo real.

42
00:04:00,420 --> 00:04:03,760
Lo que estáis viendo ahora en la pantalla sería una posible aplicación, ¿vale?

43
00:04:03,759 --> 00:04:17,939
Esto es un diseño en concreto, no hace falta que lo hagáis con el mismo diseño, de hecho vosotros seguro que sois capaces de hacerlo mucho más bonito, pero bueno, para que veáis que lo que os he contado con respecto a este diagrama se puede hacer, se puede programar en una aplicación real.

44
00:04:18,300 --> 00:04:27,439
Como veis, tenemos en la parte superior el título, Museo de Arte Medieval, y estos seis botones que corresponderían a las seis obras de arte que este grupo en concreto ha trabajado.

45
00:04:27,439 --> 00:04:40,500
Bien, si yo, por ejemplo, pulso en la número 4, pues me va a llevar a esta obra, que es la Catedral de Soissons, con estos dos botones que os comentaba antes, el botón de volver, con el cual volvería a la pantalla inicial, y el botón de información.

46
00:04:40,819 --> 00:04:48,300
El botón de información, cuando lo pulso, se me abre la pantalla, veis que está el texto explicativo y no sé si lo escucháis de fondo, un audio.

47
00:04:48,300 --> 00:05:00,340
Bien, no sé qué tal se escuchará en esta captura de pantalla, pero es uno de los alumnos de este grupo explicando o leyendo el texto explicativo, ¿de acuerdo?

48
00:05:00,680 --> 00:05:09,639
Bueno, si pulsamos el botón volver, volveríamos a la pantalla anterior y si pulsamos el botón inicio, lo que haríamos sería volver a la pantalla de inicio, ¿vale?

49
00:05:09,680 --> 00:05:14,060
Este mismo funcionamiento sería el funcionamiento que tendrían que tener los otros cinco botones, ¿vale?

50
00:05:14,060 --> 00:05:23,819
Si yo pulso el número 1, pues me voy a la palabra número 1, San Clemente de Taúl, y si pulso el botón de información, pues voy al texto explicativo, y veis que también se escucharía el audio de esta.

51
00:05:24,319 --> 00:05:39,459
Bueno, voy a detener ya la aplicación, y lo que voy a pasar ahora, a continuación, es a explicaros un poquito, ya os digo que esto no es una guía paso a paso, explicaros un poquito cómo poder empezar a trabajar con App Inventor para la programación de esta aplicación.

52
00:05:39,459 --> 00:05:44,139
recordad que tenéis todos los bloques de programación necesarios en esta guía vale

53
00:05:44,139 --> 00:05:47,959
en la guía o en el esquema de pantallas del proyecto solamente tenéis que pensar un poco

54
00:05:47,959 --> 00:05:53,199
dónde ubicar cada uno de los bloques para poder hacer que la aplicación funcione con esta guía

55
00:05:53,199 --> 00:05:57,479
y con lo que yo os voy a contar ahora vais a ver que no vais a tener ningún problema bueno

56
00:05:57,479 --> 00:06:01,819
pues esto sería un proyecto nuevo un proyecto en blanco de app inventor vale y lo que tenéis

57
00:06:01,819 --> 00:06:07,179
es solamente una pantalla screen 1 en blanco y no hay ningún elemento bien yo voy a hacer

58
00:06:07,180 --> 00:06:11,800
configuración parecida a la que habéis visto en el ejemplo de la aplicación que os he enseñado pero

59
00:06:11,800 --> 00:06:15,939
no la voy a personalizar es decir no voy a cambiar los colores no voy a poner imágenes solamente voy

60
00:06:15,939 --> 00:06:19,600
a hacer lo que sería el armazón o el esqueleto de la aplicación para explicaros un poquito cuál

61
00:06:19,600 --> 00:06:25,040
sería el funcionamiento bueno en primer lugar lo que voy a necesitar poner es una disposición

62
00:06:25,040 --> 00:06:29,379
horizontal cuál es la disposición horizontal sabéis que es para colocar elementos en la

63
00:06:29,379 --> 00:06:36,879
pantalla en lo que sería en una en una posición con una disposición de una línea horizontal para

64
00:06:36,879 --> 00:06:41,319
qué voy a hacer esto para luego a continuación añadir una etiqueta dentro

65
00:06:41,319 --> 00:06:45,159
y en esta etiqueta escribir el título pues en este caso sería lo voy a poner

66
00:06:45,159 --> 00:06:50,000
muy sencillo museo arte medieval vale veis que en el momento que ya escribo el

67
00:06:50,000 --> 00:06:54,939
texto me aparece aquí arriba y me voy a ir a la disposición horizontal hago clic

68
00:06:54,939 --> 00:06:59,480
aquí en el ancho pongo ajustar al contenedor para que se me ensanche todo

69
00:06:59,480 --> 00:07:04,060
lo que sería el ancho de la pantalla y luego lo que voy a hacer es me voy a ir

70
00:07:04,060 --> 00:07:11,560
a la etiqueta y en la etiqueta le voy a decir que la posición del texto esté en el centro vale y

71
00:07:11,560 --> 00:07:16,840
luego vuelvo otra vez a disposición horizontal y en lugar de decirle disposición horizontal

72
00:07:16,840 --> 00:07:22,319
izquierda le digo que esté centrado vale para que para que este texto me quede aquí centradito y

73
00:07:22,319 --> 00:07:26,540
quede mucho más estético mucho más bonito bueno puedo cambiar también el tipo de letra de la

74
00:07:26,540 --> 00:07:34,340
etiqueta vale es que están 14 20 perdón que el tamaño de letra aumenta eso ya

75
00:07:34,340 --> 00:07:37,780
según lo personalicen vosotros lo podéis poner más grande más pequeño pero ya lo

76
00:07:37,780 --> 00:07:42,560
dejamos por supuesto a vuestra elección bueno voy a poner a continuación esa

77
00:07:42,560 --> 00:07:45,980
tablita esa matriz con seis botones vale y esto es lo que es un poquito más

78
00:07:45,980 --> 00:07:50,720
complicado de hacer en primer lugar voy a meter otra disposición horizontal y la

79
00:07:50,720 --> 00:07:54,720
voy a dejar en blanco para que para que haya una separación entre lo que sería

80
00:07:54,720 --> 00:07:58,800
la etiqueta con el título de la aplicación y lo que voy a continuar lo que lo perdón lo que voy

81
00:07:58,800 --> 00:08:03,720
a poner a continuación debajo bueno pues esta disposición horizontal igual le digo que me la

82
00:08:03,720 --> 00:08:08,820
gusta el contenedor el color de fondo que me ponga ninguno y esto lo que va a ocurrir aunque veis que

83
00:08:08,820 --> 00:08:13,320
aquí hay un cuadradito negro cuando yo descargue esta aplicación ese cuadradito negro no se va a

84
00:08:13,320 --> 00:08:18,340
ver y lo único que se va a ver es un espacio de separación entre el título y los botones bueno

85
00:08:18,340 --> 00:08:23,940
para poner la botonera primero voy a añadir otra disposición horizontal vale que veis que se me

86
00:08:23,939 --> 00:08:30,060
coloca aquí debajo lo mismo le digo que el ancho me lo ajuste al contenedor y que la disposición

87
00:08:30,060 --> 00:08:36,440
horizontal sea centrada vale a continuación voy a añadir una disposición tabular lo que sería una

88
00:08:36,440 --> 00:08:41,340
tabla y esta disposición tabular la añado dentro vale veis que se me ha añadido aquí de momento

89
00:08:41,340 --> 00:08:46,620
está vacía y le voy a decir que tenga dos columnas y tres registros los registros serían las filas

90
00:08:46,620 --> 00:08:51,840
para que para que haya dos columnas de botones y tres filas de botones dos por tres seis me

91
00:08:51,840 --> 00:08:55,980
cabrían los seis botones que necesito para esta aplicación y ahora voy a añadir esos seis botones

92
00:08:55,980 --> 00:09:02,440
me voy a interfaz de usuario busco botón y los voy añadiendo en la disposición que queda más

93
00:09:02,440 --> 00:09:06,820
ordenada que son dos botones por fila lo podéis hacer de otra manera por supuesto que lo podrías

94
00:09:06,820 --> 00:09:11,200
hacer de otra manera pero siempre intentad que para el usuario de la aplicación esté muy claro

95
00:09:11,200 --> 00:09:16,060
dónde están cada uno de los botones y que quede lo más organizado posible bien bueno pues ya he

96
00:09:16,060 --> 00:09:21,240
añadido los seis botones voy a cambiar solamente el texto del primero por ejemplo este de aquí

97
00:09:21,240 --> 00:09:30,159
lo seleccionó aquí vale donde pone aquí abajo texto voy a escribir por ejemplo iglesia de san

98
00:09:30,159 --> 00:09:38,639
marcos le pongo aquí delante el número 1 y ya tendría en mi botón el número de la obra y el

99
00:09:38,639 --> 00:09:43,060
nombre identificado del identificativo de la obra para que el usuario pues tenga claro dónde va a

100
00:09:43,060 --> 00:09:47,940
llevar ese botón cuando vale bueno esto mismo lo tendrías que hacer con los otros 5 y luego

101
00:09:47,940 --> 00:10:06,820
pues podéis cambiar el color del botón, el tamaño, el tipo de letra, lo que os he comentado un poco antes, el color de fondo también si queréis de la pantalla, esto sería pulsando en Screen 1, buscáis por aquí donde estaría para cambiar el color de fondo, aquí pone el blanco por defecto, pero bueno, podéis ponerle turquesa, podéis poner el color que vosotros queráis.

102
00:10:06,820 --> 00:10:23,200
Yo lo voy a dejar de momento así, no es lo más bonito, pero bueno, para que veáis que se puede cambiar. Bueno, lo siguiente que necesito, porque ahora de momento lo único que he hecho es esta pantalla de aquí, lo siguiente que necesito es añadir una segunda pantalla para la obra número 1, que en este caso es Iglesia de San Marcos, que sería esta que os estoy marcando ahora con el ratón.

103
00:10:23,200 --> 00:10:43,320
¿Dónde lo hago en App Inventor? Pues me voy aquí arriba, le digo añadir ventana y le doy un nombre. No me permite poner espacios ni me permite poner caracteres extraños. Entonces voy a poner simplemente iglesia-sanmarcos, todo seguido, le doy a aceptar y veis que automáticamente, ahora pone aquí cargando, automáticamente me ha creado una segunda pantalla.

104
00:10:43,320 --> 00:10:47,520
aquí tengo screen 1 que es la que yo tenía creada antes e iglesia de san marcos que es una pantalla

105
00:10:47,520 --> 00:10:53,440
en blanco vale la voy a dejar en blanco porque en la ubicación de los elementos en esta pantalla es

106
00:10:53,440 --> 00:10:57,820
algo que ya dejamos que vosotros lo hagáis con lo que habéis aprendido hasta ahora pero sí que lo

107
00:10:57,820 --> 00:11:02,600
que voy a hacer es volver otra vez a screen 1 y enseñaros un poquito cómo se programaría este

108
00:11:02,600 --> 00:11:07,600
botón para que al hacer clic en este botón vaya a la pantalla de la iglesia de san marcos y para eso

109
00:11:07,600 --> 00:11:12,240
es muy importante que me coloque en esta pantalla inicial vale que esté sobre la pantalla inicial y

110
00:11:12,240 --> 00:11:17,480
pulso aquí arriba a la derecha donde pone bloques vale entonces esto debería estar en blanco me

111
00:11:17,480 --> 00:11:21,360
aparece hecho porque estaba haciendo unas pruebas antes pero a vosotros por primera vez os va a

112
00:11:21,360 --> 00:11:30,740
aparecer en blanco bueno como como no puede ser que no sepáis muy bien dónde están los botones

113
00:11:30,740 --> 00:11:35,799
que necesitáis como estáis programando el botón 1 tenéis que bajar aquí abajo a la izquierda y pulsar

114
00:11:35,799 --> 00:11:40,060
donde pone botón 1 vale aquí vais a encontrar estos bloques de programación que tenéis aquí

115
00:11:40,060 --> 00:11:44,980
vale cuando botón uno clic entonces ejecutar y luego abrir una pantalla que ahora es directo

116
00:11:46,180 --> 00:11:51,560
bueno pues cojo este botón de aquí este bloque lo añado como es botón 1 no tengo que cambiar

117
00:11:51,560 --> 00:11:55,960
nada vale si quisiera programar alguno de los otros seis lo cambiaría de aquí y lo que quiero

118
00:11:55,960 --> 00:12:00,400
que ejecute es que cambie a la pantalla iglesia de san marcos cada vez que el usuario haga clic

119
00:12:00,400 --> 00:12:07,420
en el botón 1 bueno pues para eso me voy aquí a control busco el bloque abrir otra pantalla nombre

120
00:12:07,419 --> 00:12:11,559
de pantalla screen 1, pero no quiero que se abra screen 1, lo que quiero que se abra

121
00:12:11,559 --> 00:12:15,519
es, abro este desplegable, Iglesia de San Marcos. Me vuelvo

122
00:12:15,519 --> 00:12:19,299
al bloque de diseñador y aquí lo que tendría sería este botón

123
00:12:19,299 --> 00:12:23,419
ya programado para que cuando el usuario haga clic vaya a la

124
00:12:23,419 --> 00:12:27,219
pantalla Iglesia de San Marcos. ¿Qué va a ver en la pantalla Iglesia de San Marcos? Pues

125
00:12:27,219 --> 00:12:31,179
esta disposición que veis aquí, la foto de la obra, que esto lo tendríais que añadir

126
00:12:31,179 --> 00:12:35,319
con una disposición horizontal, metiéndole una imagen, subiendo la imagen, bueno

127
00:12:35,320 --> 00:12:40,000
que ya lo habéis aprendido en clase y si no vuestro profesor correspondiente os puede echar una mano para hacerlo

128
00:12:40,000 --> 00:12:46,200
y estos dos botones, el botón de volver que lo programaríamos de esta forma, que al hacer clic en este botón

129
00:12:46,200 --> 00:12:52,060
en lugar de info sería volver a esta pantalla inicial y el botón de info que me lleva a una tercera pantalla

130
00:12:52,060 --> 00:12:57,560
esta ya la tendréis que crear vosotros, donde esté el texto explicativo que lo añado con una etiqueta

131
00:12:57,560 --> 00:13:02,700
en una disposición horizontal y estos dos botones, el botón de volver que al hacer clic vuelva a esta pantalla

132
00:13:02,700 --> 00:13:06,100
y el botón de inicio que al hacer clic vaya a la pantalla inicial, ¿vale?

133
00:13:06,259 --> 00:13:11,400
Recordad que cuando se haga clic en el botón de Info y se abra esta tercera pantalla,

134
00:13:11,920 --> 00:13:16,180
si no ponéis este bloque que os estoy mostrando aquí, no se va a reproducir el audio, ¿vale?

135
00:13:16,200 --> 00:13:19,500
Y recordad que ese audio siempre tiene que estar en MP3.

136
00:13:20,160 --> 00:13:23,640
Con estos consejos ya tenéis más que suficiente para poder empezar.

137
00:13:24,460 --> 00:13:28,800
La recomendación es que lo vayáis haciendo paso a paso, que no os olvidéis, muy importante,

138
00:13:28,800 --> 00:13:39,000
Cuando añadáis nuevas ventanas que se llamen igual que la obra correspondiente a la que va a ir esa pantalla, es decir, a la obra cuya información va a estar en esa pantalla, ¿por qué?

139
00:13:39,060 --> 00:13:43,100
Porque cuando tengáis 6, 8, 12 pantallas va a ser difícil identificarlo.

140
00:13:43,560 --> 00:13:51,900
Entonces, en este caso, podríais haberla llamado Iglesia San Marcos 1 e Iglesia San Marcos 2, porque recordad que cada obra tiene dos pantallas.

141
00:13:52,020 --> 00:13:56,740
La pantalla inicial, que sería esta, y la pantalla donde está el texto explicativo y el aula.

142
00:13:56,740 --> 00:14:09,680
¿Vale? Pensad vosotros una nomenclatura, una forma que os ayude a identificarlo y que sobre todo cuando tengáis ya ese mare magnum de un montón de pantallas programadas, rápidamente cuando vengáis a este menú podéis encontrarlas en un solo.