Saltar navegación

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

TUTORIAL APP PROYECTO MUSEO ARTE MEDIEVAL (2º ESO) - 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 14 de febrero de 2024 por Moises L.

564 visualizaciones

En este videotutorial podréis encontrar los aspectos más importantes para diseñar la App del proyecto "Museo Arte Medieval" de 2º ESO.

Más información Transcripción

Descargar la transcripción

Hola, ¿qué tal? ¿Cómo estáis? En este videotutorial os vamos a explicar los aspectos más importantes 00:00:00
para que podáis diseñar la aplicación para la audioguía del proyecto del Museo de Arte Medieval 00:00:07
que estáis haciendo ahora en segundo de la ESO. Esto no es una guía paso a paso, es decir, 00:00:12
no os vamos a resolver todos los pasos necesarios para poder llegar a poder programar esta aplicación, 00:00:16
pero sí que os vamos a dar aquellos aspectos más importantes que os permitan arrancar, 00:00:22
que os permitan iniciar el proyecto y que todo eso unido a lo que vosotros ya sabéis 00:00:26
y a lo que podáis ir pensando entre todos, lleguéis a hacer una aplicación que funcione, 00:00:32
una aplicación que cumpla con los objetivos de este proyecto. 00:00:37
Bueno, en primer lugar, lo primero que necesitáis localizar es este esquema de pantallas, 00:00:40
lo tenéis en el aula virtual donde están todos los materiales del proyecto 00:00:44
y aquí prácticamente tenéis todo lo necesario para poder programar esta aplicación. 00:00:47
¿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, 00:00:51
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 00:01:00
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 00:01:09
la podéis tener disponible en esta aplicación. 00:01:17
Bueno, en primer lugar, quiero que os fijéis en esta parte de aquí, lo que estoy señalando con el ratón. 00:01:19
Esto sería la pantalla inicial de la aplicación. 00:01:24
Luego lo vamos a ver con un ejemplo real, pero bueno, para que lo entendáis, 00:01:26
esto es lo primero que aparece cuando el usuario hace clic en el icono de la aplicación en el móvil. 00:01:30
Esto de aquí arriba, este cuadradito, sería para que vosotros personalicéis lo que sería el título de la aplicación. 00:01:34
Pues audio guía Museo Arte Medieval, bueno, como vosotros queráis, ¿vale? 00:01:40
Pero sería, bueno, pues un campo personalizable. 00:01:45
Podéis poner alguna imagen, eso ya al gusto de cada uno. 00:01:47
Lo que sí es muy importante es respetar esta configuración de botones. 00:01:50
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. 00:01:53
Aquí aparecen solamente los números del 1 al 6, pero lo suyo sería que vosotros escribáis algo que identifique esa obra. 00:02:01
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í. 00:02:07
¿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. 00:02:17
¿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. 00:02:22
En concreto, pues la obra número 1, que es, en el ejemplo que yo os he puesto, la Iglesia de San Marcos. 00:02:33
Bueno, pues en esa pantalla, ¿qué aparecería? Aparecería una foto del monumento, ¿vale? 00:02:37
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. 00:02:42
Y abajo dos botones. El botón de volver lo que nos va a permitir es volver a la pantalla de inicio. 00:02:54
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. 00:03:00
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. 00:03:10
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? 00:03:24
Ese audio es el audio que vosotros habéis grabado, pero muy importante, tiene que estar en MP3, ¿vale? 00:03:35
Porque si no lo tenemos en MP3, en Amplify Inventor no va a funcionar. 00:03:40
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, 00:03:44
si no sabéis hacerlo, y vuestro profesor os ayudará para que lo tengáis disponible con todos. 00:03:50
Bien, vamos a ver cómo sería esto con un ejemplo real. 00:03:56
Lo que estáis viendo ahora en la pantalla sería una posible aplicación, ¿vale? 00:04:00
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. 00:04:03
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. 00:04:18
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. 00:04:27
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. 00:04:40
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? 00:04:48
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? 00:05:00
Este mismo funcionamiento sería el funcionamiento que tendrían que tener los otros cinco botones, ¿vale? 00:05:09
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. 00:05:14
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. 00:05:24
recordad que tenéis todos los bloques de programación necesarios en esta guía vale 00:05:39
en la guía o en el esquema de pantallas del proyecto solamente tenéis que pensar un poco 00:05:44
dónde ubicar cada uno de los bloques para poder hacer que la aplicación funcione con esta guía 00:05:47
y con lo que yo os voy a contar ahora vais a ver que no vais a tener ningún problema bueno 00:05:53
pues esto sería un proyecto nuevo un proyecto en blanco de app inventor vale y lo que tenéis 00:05:57
es solamente una pantalla screen 1 en blanco y no hay ningún elemento bien yo voy a hacer 00:06:01
configuración parecida a la que habéis visto en el ejemplo de la aplicación que os he enseñado pero 00:06:07
no la voy a personalizar es decir no voy a cambiar los colores no voy a poner imágenes solamente voy 00:06:11
a hacer lo que sería el armazón o el esqueleto de la aplicación para explicaros un poquito cuál 00:06:15
sería el funcionamiento bueno en primer lugar lo que voy a necesitar poner es una disposición 00:06:19
horizontal cuál es la disposición horizontal sabéis que es para colocar elementos en la 00:06:25
pantalla en lo que sería en una en una posición con una disposición de una línea horizontal para 00:06:29
qué voy a hacer esto para luego a continuación añadir una etiqueta dentro 00:06:36
y en esta etiqueta escribir el título pues en este caso sería lo voy a poner 00:06:41
muy sencillo museo arte medieval vale veis que en el momento que ya escribo el 00:06:45
texto me aparece aquí arriba y me voy a ir a la disposición horizontal hago clic 00:06:50
aquí en el ancho pongo ajustar al contenedor para que se me ensanche todo 00:06:54
lo que sería el ancho de la pantalla y luego lo que voy a hacer es me voy a ir 00:06:59
a la etiqueta y en la etiqueta le voy a decir que la posición del texto esté en el centro vale y 00:07:04
luego vuelvo otra vez a disposición horizontal y en lugar de decirle disposición horizontal 00:07:11
izquierda le digo que esté centrado vale para que para que este texto me quede aquí centradito y 00:07:16
quede mucho más estético mucho más bonito bueno puedo cambiar también el tipo de letra de la 00:07:22
etiqueta vale es que están 14 20 perdón que el tamaño de letra aumenta eso ya 00:07:26
según lo personalicen vosotros lo podéis poner más grande más pequeño pero ya lo 00:07:34
dejamos por supuesto a vuestra elección bueno voy a poner a continuación esa 00:07:37
tablita esa matriz con seis botones vale y esto es lo que es un poquito más 00:07:42
complicado de hacer en primer lugar voy a meter otra disposición horizontal y la 00:07:45
voy a dejar en blanco para que para que haya una separación entre lo que sería 00:07:50
la etiqueta con el título de la aplicación y lo que voy a continuar lo que lo perdón lo que voy 00:07:54
a poner a continuación debajo bueno pues esta disposición horizontal igual le digo que me la 00:07:58
gusta el contenedor el color de fondo que me ponga ninguno y esto lo que va a ocurrir aunque veis que 00:08:03
aquí hay un cuadradito negro cuando yo descargue esta aplicación ese cuadradito negro no se va a 00:08:08
ver y lo único que se va a ver es un espacio de separación entre el título y los botones bueno 00:08:13
para poner la botonera primero voy a añadir otra disposición horizontal vale que veis que se me 00:08:18
coloca aquí debajo lo mismo le digo que el ancho me lo ajuste al contenedor y que la disposición 00:08:23
horizontal sea centrada vale a continuación voy a añadir una disposición tabular lo que sería una 00:08:30
tabla y esta disposición tabular la añado dentro vale veis que se me ha añadido aquí de momento 00:08:36
está vacía y le voy a decir que tenga dos columnas y tres registros los registros serían las filas 00:08:41
para que para que haya dos columnas de botones y tres filas de botones dos por tres seis me 00:08:46
cabrían los seis botones que necesito para esta aplicación y ahora voy a añadir esos seis botones 00:08:51
me voy a interfaz de usuario busco botón y los voy añadiendo en la disposición que queda más 00:08:55
ordenada que son dos botones por fila lo podéis hacer de otra manera por supuesto que lo podrías 00:09:02
hacer de otra manera pero siempre intentad que para el usuario de la aplicación esté muy claro 00:09:06
dónde están cada uno de los botones y que quede lo más organizado posible bien bueno pues ya he 00:09:11
añadido los seis botones voy a cambiar solamente el texto del primero por ejemplo este de aquí 00:09:16
lo seleccionó aquí vale donde pone aquí abajo texto voy a escribir por ejemplo iglesia de san 00:09:21
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 00:09:30
nombre identificado del identificativo de la obra para que el usuario pues tenga claro dónde va a 00:09:38
llevar ese botón cuando vale bueno esto mismo lo tendrías que hacer con los otros 5 y luego 00:09:43
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. 00:09:47
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. 00:10:06
¿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. 00:10:23
aquí tengo screen 1 que es la que yo tenía creada antes e iglesia de san marcos que es una pantalla 00:10:43
en blanco vale la voy a dejar en blanco porque en la ubicación de los elementos en esta pantalla es 00:10:47
algo que ya dejamos que vosotros lo hagáis con lo que habéis aprendido hasta ahora pero sí que lo 00:10:53
que voy a hacer es volver otra vez a screen 1 y enseñaros un poquito cómo se programaría este 00:10:57
botón para que al hacer clic en este botón vaya a la pantalla de la iglesia de san marcos y para eso 00:11:02
es muy importante que me coloque en esta pantalla inicial vale que esté sobre la pantalla inicial y 00:11:07
pulso aquí arriba a la derecha donde pone bloques vale entonces esto debería estar en blanco me 00:11:12
aparece hecho porque estaba haciendo unas pruebas antes pero a vosotros por primera vez os va a 00:11:17
aparecer en blanco bueno como como no puede ser que no sepáis muy bien dónde están los botones 00:11:21
que necesitáis como estáis programando el botón 1 tenéis que bajar aquí abajo a la izquierda y pulsar 00:11:30
donde pone botón 1 vale aquí vais a encontrar estos bloques de programación que tenéis aquí 00:11:35
vale cuando botón uno clic entonces ejecutar y luego abrir una pantalla que ahora es directo 00:11:40
bueno pues cojo este botón de aquí este bloque lo añado como es botón 1 no tengo que cambiar 00:11:46
nada vale si quisiera programar alguno de los otros seis lo cambiaría de aquí y lo que quiero 00:11:51
que ejecute es que cambie a la pantalla iglesia de san marcos cada vez que el usuario haga clic 00:11:55
en el botón 1 bueno pues para eso me voy aquí a control busco el bloque abrir otra pantalla nombre 00:12:00
de pantalla screen 1, pero no quiero que se abra screen 1, lo que quiero que se abra 00:12:07
es, abro este desplegable, Iglesia de San Marcos. Me vuelvo 00:12:11
al bloque de diseñador y aquí lo que tendría sería este botón 00:12:15
ya programado para que cuando el usuario haga clic vaya a la 00:12:19
pantalla Iglesia de San Marcos. ¿Qué va a ver en la pantalla Iglesia de San Marcos? Pues 00:12:23
esta disposición que veis aquí, la foto de la obra, que esto lo tendríais que añadir 00:12:27
con una disposición horizontal, metiéndole una imagen, subiendo la imagen, bueno 00:12:31
que ya lo habéis aprendido en clase y si no vuestro profesor correspondiente os puede echar una mano para hacerlo 00:12:35
y estos dos botones, el botón de volver que lo programaríamos de esta forma, que al hacer clic en este botón 00:12:40
en lugar de info sería volver a esta pantalla inicial y el botón de info que me lleva a una tercera pantalla 00:12:46
esta ya la tendréis que crear vosotros, donde esté el texto explicativo que lo añado con una etiqueta 00:12:52
en una disposición horizontal y estos dos botones, el botón de volver que al hacer clic vuelva a esta pantalla 00:12:57
y el botón de inicio que al hacer clic vaya a la pantalla inicial, ¿vale? 00:13:02
Recordad que cuando se haga clic en el botón de Info y se abra esta tercera pantalla, 00:13:06
si no ponéis este bloque que os estoy mostrando aquí, no se va a reproducir el audio, ¿vale? 00:13:11
Y recordad que ese audio siempre tiene que estar en MP3. 00:13:16
Con estos consejos ya tenéis más que suficiente para poder empezar. 00:13:20
La recomendación es que lo vayáis haciendo paso a paso, que no os olvidéis, muy importante, 00:13:24
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é? 00:13:28
Porque cuando tengáis 6, 8, 12 pantallas va a ser difícil identificarlo. 00:13:39
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. 00:13:43
La pantalla inicial, que sería esta, y la pantalla donde está el texto explicativo y el aula. 00:13:52
¿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. 00:13:56
Idioma/s:
es
Autor/es:
Moisés Llorente Santos
Subido por:
Moises L.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
564
Fecha:
14 de febrero de 2024 - 13:43
Visibilidad:
Público
Centro:
IES CALDERÓN DE LA BARCA
Duración:
14′ 21″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
124.84 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid