diseño de menú des plegable en app inventor con programación. · 2020. 6. 16. · colegio de...

COLEGIO DE BOYACÁ SE-GU—11

SISTEMA DE GESTIÓN DE LA CALIDAD VERSIÓN 1.0

GUIA DE TRABAJO. PROGRAMACION PARA APP MOVIL

1.6 09/06/2020

Página 1 de 7

GRADO: Undécimo

Tiempo. 2 horas

NOMBRE DEL DOCENTE:

Angie Misley López López

Rosa Elena Arévalo

TÓPICO GENERATIVO

¿Por qué es importante conocer elementos que se usan en la programación para el desarrollo de aplicaciones

móviles?

HILOS CONDUCTORES:

¿Cómo diseñar y desarrollar aplicaciones móviles dirigidas al apoyo de la enseñanza aprendizaje de los

estudiantes?

EXPLORACIÓN DEL TEMA:

Estructura de programación (APP MOVILES) De los lenguajes de programación más usados encontramos

el sistema operativo Android, En la actualidad tiene en sus filas el Lenguaje de Programación más popular, esto

puede cambiar uno nunca sabe, hablamos de Java y otro más moderno que puede llegar a reemplazarlo si es que deciden no usar más Java por algún motivo particular hablamos de App inventor.

APRENDIZAJES EVIDENCIAS

Solución de problemas con tecnología

Aplicación de la programación en el

programa App inventor y en este desarrollar

prototipos de aplicaciones móviles teniendo en cuenta diferentes elementos de

programación.

Utiliza software de simulación para realizar aplicaciones y

programar, crear prototipos de aplicaciones móviles.

MATERIAL DE APOYO

Guía, videos, blog con información idónea al tema, correo electrónico, entre otros programa

App inventor.

META:

Los estudiantes desarrollarán comprensión acerca de qué tipo de software de simulación y elementos de programación que se usan

para el desarrollo de aplicaciones móviles.

Diseño de menú des plegable en App inventor con

programación.

1. Ingrese a App inventor donde se han desarrollado las demás

partes de la aplicación, inicie un nuevo proyecto llamado menú

e ingrese al proyecto que se acaba de crear.




1.6 09/06/2020

Página 1 de 7

2. Subir una imagen del escritorio del computador.

3. Luego en la interfaz de usuario arrastre dos imágenes al

escenario y una etiqueta, después van a sensores y arrastran un

reloj. En los componentes se tiene que ver los 4 componentes

que deben estar como se muestra en la siguiente imagen.




1.6 09/06/2020

Página 1 de 7

4. Luego en imagen 1 insertar la imagen que inicialmente se subió

del escrito del computador, en propiedades colocarle un ancho

ajustado a la pantalla y de alto 50%.

5. En la imagen2 no se tiene que hacer nada ya que se utiliza como

espaciador porque en App inventor no está la propiedad de

espacio, para que todo quede centrado vamos a componentes y

en screen1 se va a propiedades y en disphorizontal se colocan

centro para dispverticar también se coloca centro de manera

que quede de la siguiente forma, no olvidar colocarlo responsive

en la opción sizing en propiedades de screen1 y el title visible

deshabilitarlo.




1.6 09/06/2020

Página 1 de 7

6. Luego se va a componentes selecciona etiqueta1 y en las

propiedades se edita el texto por cargando… y en posición del

texto le colocan centro para alinear el texto al centro.




1.6 09/06/2020

Página 1 de 7

7. En el siguiente paso vamos a configurar el reloj entonces se va

a componentes y se selecciona el reloj, luego en las propiedades

se des habilitan las dos opciones que están y en intervalo del

temporalizado se coloca 3000 que son 3 segundos que se dan

para cambiar la pantalla.

Hasta acá se tiene el diseño del screen1 listo.

8. Ahora se va a añadir una nueva ventana con nombre menu para

crear el menú, por que el anterior screen es la ventana de inicio.




1.6 09/06/2020

Página 1 de 7

Luego de a ver añadido la ventana menu vamos a trabajar en esa

ventana.

9. Cuando ya estamos trabajando en la ventana menu añadida

vamos a propiedades y le des habilitamos el titlevisible.

10. Ahora se va arrastrar una disposición horizontal al escenario

y luego en propiedades le colocan el color que quieran, el ancho

será ajustar al contenedor y el alto sea 10% luego en

dispvertical que sea centro.




1.6 09/06/2020

Página 1 de 7

11.Ahora se agregará un botón el cual se dejará dentro de la

disposición horizontal y se va a propiedades del botón, en color

se le coloca ningún color de fondo, en imagen se coloca una

imagen de un menu que deben descargar, también se le dará un

ancho de 10 %, alto ajustar al contenedor y en el texto se

borrara donde dice texto boton1.




1.6 09/06/2020

Página 1 de 7

12.Ahora se agrega una etiqueta dentro de la disposición

horizontal que se había agregado, en propiedades de la etiqueta

se le coloca en tamaño de texto 20, en texto se le cambia por el

nombre que quieran darle, en el ancho se le deja ajustar al

contenedor.




1.6 09/06/2020

Página 1 de 7

13.De nuevo se agrega una disposición horizontal debajo de la que

ya está, luego van a propiedades y se coloca ancho ajustar al

contenedor y el alto también.

14.Ahora se agrega una disposición vertical dentro de la

disposición horizontal que se acaba de llevar a la pantalla, en

las propiedades de la disposición vertical se coloca el alto

ajustar a la pantalla, color le colocan el que deseen.




1.6 09/06/2020

Página 1 de 7

15.Ahora se insertan 5 botones dentro de la disposición vertical,

ahora en las propiedades de los botones para todos se les coloca

en color ninguno, tamaño de texto número 20, el ancho se le

coloca 170, la alineación del texto a la izquierda y color de

texto se coloca como lo deseen. Esto para todos los botones.

Luego cambiar los nombres como aparece en la pantalla.

16.Después de esto se agrega un reloj en sensores, en propiedades

se des habilita las dos opciones que salen y en intervalo de

tiempo se coloca 1.




1.6 09/06/2020

Página 1 de 7

17.Ahora le cambiamos los nombres a todas las disposiciones

agregadas de tal manera que queden así.

18.Después del anterior paso se da clic sobre menú lateral y en el

ancho se le coloca de 1 pixel para que se oculte.




1.6 09/06/2020

Página 1 de 7

Actividad: En el último paso para acabar el diseño se debe

añadir una nueva ventana y añaden una nueva ventana con

nombre inicio. Donde deberán agregar un botón y cambiarle el

color y luego le dan un nombre.

diseño de menú des plegable en app inventor con programación. · 2020. 6. 16. · colegio de...

Documents