Saltar la navegación

3.4.3.4. Diseñador, ¡por fin nos conocemos!

Rétor dice

Como has podido comprobar ya, la fase de diseño propiamente dicha la vas a abordar con la ayuda de App Inventor.

Por tanto, lo primero que tienes que saber es qué es exactamente y, además, conocer algunos datos y opciones disponibles. Para ello, a continuación, tienes a tu disposición un documento en pdf que te va a guiar en el proceso.

Posteriormente, mediante la realización de varios ejercicios, aprenderás a manejar sus opciones básicas de cara a poder completar tu compromiso.

En algunos ejercicios encontraras que existen varias opciones, A, B incluso C. Lo ideal es que completes la B si hay dos y la C si hay tres, pero si ves que te cuesta demasiado puedes hacer las anteriores de cara a no quedarte nunca parado.

2. Creación de nuevos proyectos

Para practicar con la creación de proyectos en App Inventor haz lo siguiente:

Explica su creación

Explica cómo se crea un proyecto y cómo se le puede cambiar el nombre.

Crea un proyecto

Entra en App Inventor y crea un proyecto nuevo.

A continuación, cámbiale el nombre.

Documenta el proceso

Captura las pantallas necesarias para documentar el proceso que has seguido en la creación del proyecto y el cambio de nombre del mismo y crea un documento que muestre dicho proceso.

3. Sobrevuela de nuevo el diseñador

Observa el esquema que aparece a continuación en la imagen en el que están identificadas las distintas áreas de la interfaz del diseñador de App Inventor.

Compáralo con el que hiciste en tu cuaderno y escribe las diferencias que encuentres.

La imagen muestra la interfaz de usuario del diseñador de App Inventor con una explicación de las características de cada zona

4. Screen1, o sea, la pantalla de inicio

Entra en el proyecto de App Inventor que has creado con anterioridad y configura las propiedades de la pantalla de inicio para que se cumpla lo siguiente:

  1. Que el nombre de la app sea “prueba”.
  2. Que el icono de la app sea una imagen de un rombo.
  3. Que la pantalla de inicio muestre el título “pantalla1” escrito en blanco sobre fondo azul.
  4. Que se pueda adaptar al tamaño del móvil y también al de la Tablet.
  5. Que el fondo de la pantalla sea una imagen de tu elección.
  6. Que tenga una breve explicación del motivo de la app (hay que decir que es una prueba).
  7. Que alinee los componentes al centro de la pantalla.

Lumen dice ¿Te resulta difícil?

En las páginas 6 y 7 del documento en pdf que tienes a tu disposición para descargar encontrarás explicada cada una de las propiedades correspondientes a la pantalla de inicio (Screen1). No obstante, te las dejo aquí en las siguientes imágenes que puedes clicar para acceder a ampliarlas. No dudes en consultarlas si lo necesitas.

La imagen muestra la parte de la interfaz de diseño de App inventor correspondiente a la primera parte de las propiedades de la Screen1
La imagen muestra la parte de la interfaz de diseño de App inventor correspondiente a la segunda parte de las propiedades de la Screen1

5. Cada componente con su pareja

¿Puedes distinguir un componente de una propiedad? ¿Sabes para qué sirven unos y otras? ¿Los localizarías en App Inventor?

Estas preguntas y otras, tienen su respuesta si eres capaz de completar aceptablemente este ejercicio.

Opción A: ¿Componente o propiedad?

A ver si puedes poner a cada cual en su sitio, unos son componentes de App Inventor y otras son algunas de las propiedades configurables de esos componentes. Sólo tienes que arrastrarlos y soltarlos en lugar que creas que les corresponde.

Accede a App Inventor para localizarlos y asegurar tu respuesta.

Opción B: Clasifica

Cada componente que pongas en el visor de tu app tiene una serie de propiedades que se pueden configurar. Para que practiques un poco cómo se hace te propongo que hagas lo siguiente:

Empareja las siguientes propiedades con los componentes que le correspondan.

Para hacerlo tienes que arrastrar cada propiedad hasta soltarla dentro del cuadro del componente que corresponda.

Ten presente que las propiedades pueden pertenecer a varios componentes y por tanto las puedes arrastrar y soltar cuantas veces quieras (no van a desaparecer de la parte inferior).

Opción C: Razona

En la imagen puedes ver una serie de componentes mezclados con varias propiedades.

La imagen muestra un conjunto de componentes y de propiedades básicos para el diseño de una interfaz gráfica en de App Inventor

Razona qué le ocurre a cada componente cuando se modifica el valor de las propiedades que le corresponden.

6. ¡Te vas a enterar de lo que vale...UN BOTÓN!

Vete a App Inventor y en el proyecto que tienes creado vas a trabajar los botones y sus propiedades haciendo lo que se indica a continuación.

  1. Elige un botón y cámbiale el color.
  2. Cambia también la forma y ponla ovalada.
  3. Haz que se pueda leer en el interior del botón la palabra “bien”.
  4. Modifica el tamaño del botón de forma que ocupe la mitad de la pantalla.
  5. Desactiva el botón y ocúltalo.
  6. Busca una imagen que te guste y ponla en el interior del botón.
  7. Añade tres botones más a la app que estén en horizontal debajo del que has cambiado.
  8. Cambia la posición del botón que ha quedado a la derecha y lo pones a la izquierda.
  9. Elimina el botón central de los tres que has creado.

Haz una captura de pantalla, con la evidencia de cada uno de tus logros, que te sirva para guardar una imagen de lo que has hecho en cada caso. Pégalas en un documento de registro.

Lumen dice ¿Te doy una pista?

Si miras en las páginas 13 y 14 del documento pdf que tienes para descargarte puedes ver una explicación de cada una de las propiedades de los botones que te ayudará a hacer lo que pide cada apartado. No obstante, por si no lo tienes a la mano, te las dejo a continuación en las siguientes imágenes que puedes clicar para acceder a su ampliación.

La imagen muestra la parte de la interfaz de diseño que corresponde a las propiedades del componente botón con indicación de las opciones de configuración del texto
La imagen muestra la parte de la interfaz de diseño que corresponde a las propiedades del componente botón con indicación de las opciones de configuración generales

7. ¿Y si pudieras verlo?

Las imágenes en App Inventor son ese tipo de componentes que pueden actuar simplemente como lo que son, imágenes, o como eventos.

La pregunta sería ¿sabes cómo hacerlo para el caso de activar una explicación textual?

Opción A: Contesta

Pregunta

¿Sabes qué hay que hacer para que al clicar una imagen aparezca un texto explicativo?

Respuestas

Arrastrar y soltar en el visor de App Inventor un componente imagen y otro etiqueta y configurar sus propiedades adecuadamente para que la imagen sea clicable y la etiqueta muestre el texto informativo. Es resto hay que programarlo.

Arrastrar y soltar en el visor de App Inventor un componente imagen y configurar dos de sus propiedades, la primera es aceptar que sea clicable y la segunda es el apartado texto en el que hay que añadir lo que se quiera mostrar al hacer clic.

Arrastrar y soltar en el visor de App Inventor un componente imagen clicable que está preparada para añadirle, en la propiedad correspondiente, el texto que se quiere que aparezca al hacer clic.

Solamente hay que arrastrar y soltar en el visor de App Inventor un componente imagen porque entre sus propiedades predeterminadas está ofrecer la descripción automática de lo que se carga.

Retroalimentación

Opción B: Evento imagen

Las imágenes en App Inventor se pueden configurar para convertirlas en eventos.

Partiendo de esta idea practica haciendo lo siguiente:

Entra en el proyecto de App Inventor que tienes creado, coloca los componentes necesarios y configura sus propiedades para que resulte que una imagen en pantalla cambie al clicarla a un texto que la describa.

8. De etiqueta

Pon un ejemplo concreto de para qué se puede usar una etiqueta en App Inventor.

A continuación, explica, por escrito en tu cuaderno, qué propiedades habría que cambiar y qué valor habría que darles para conseguir lo que has dicho en el ejemplo.

9. Dale al play

Vais a trabajar por parejas en este ejercicio.

En App Inventor hay un componente que permite reproducir audios.

A este componente se le puede asociar un evento que permita su funcionamiento.

A continuación os propongo que trabajéis esto haciendo lo siguiente:

Explicar

Explicad cada uno en su cuaderno un ejemplo concreto de cómo se puede escuchar un audio en App Inventor utilizando el reproductor.

Esquematizar

Realizad un esquema gráfico sencillo cada uno en su cuaderno con el que expliquéis qué habría que hacer en App Inventor para diseñar un botón que permitiera escuchar un fragmento de conversación de una persona que estuviera grabado en un archivo de audio.

Practicar

Entrad en el proyecto de App Inventor que tenéis creado y poned en el visor los componentes que necesitéis para diseñar un botón que permitiera escuchar un fragmento de conversación de una persona que estuviera grabado en un archivo de audio.

Después configurad las propiedades de cada componente poniendo los valores que creáis apropiados para obtener lo que se pide.

Documentar

Cread un documento en el que insertéis las capturas de pantalla que permitan dejar constancia de todos los pasos necesarios para conseguir lo que habéis logrado.

Motus dice ¡Enhorabuena!

¿Te has dado cuenta de la cantidad de cosas que has tenido que hacer para completar las actividades?

Hasta aquí has podido ver multitud de contenidos que sin duda te van a ayudar en tu camino para alcanzar las metas que te has propuesto.

Imagino que el esfuerzo que has hecho ha sido grande, pero creo que entiendes que el aprendizaje continuo lo requiere y estás dispuesto a seguir adelante, ¡ánimo! que continuamos.