Saltar la navegación

3.1. ¿Y si lo dibujas?

Diccionario

Leyenda

La imagen muestra el dibujo simbólico de tres botones junto a la descripción de cada uno de ellos

Definición:

Es un texto breve normalmente situado junto a un símbolo para dar una descripción de su significado y características.

Ejemplo:

En la leyenda del boceto de la app figura el significado de todos los símbolos utilizados.

Rétor dice

Como ya sabes, hacer una app es algo más que crear un programa con un determinado lenguaje. También es imprescindible prestar mucha atención a la parte visual, es decir, a los elementos que se van a mostrar en pantalla.

La primera actividad que hay que hacer cuando empiezas con la creación de una app para un dispositivo móvil, es precisamente, el boceto gráfico de la apariencia que deseas para cada pantalla y la necesaria relación que se dará entre cada una de ellas cuando navegues por las distintas opciones disponibles.

Ya tienes experiencia en el trabajo cuando hay una única pantalla, por lo que ahora vas a enfrentarte al caso de que tenga que haber varias. En realidad es lo mismo pero repitiendo el proceso y estableciendo las relaciones que deban darse entre todas las pantallas.

Como ya te he comentado antes, la idea es trates de avanzar en la consecución de tu reto, por lo que a continuación vas a introducirte en el desarrollo inicial de una app que sirva de agenda escolar.

Escoge una pareja y ponte manos a la obra.

1. ¿Qué ofrece la competencia?

Os propongo que, en pareja, busquéis una app de agenda escolar para que podáis ver un ejemplo real de lo que podéis hacer y así obtener ideas que pueden ser muy valiosas de cara a completar vuestro reto.

Podéis localizar la app e instalarla en un dispositivo móvil para después hacer el análisis mediante el uso de sus opciones. Con las conclusiones que vayáis obteniendo hay que crear un escrito en vuestro cuaderno que trate aspectos como los siguientes:

La imagen muestra los aspectos en los que hay que fijarse para analizar la app de la agenda y que están descritos en el enunciado del ejercicio
  • Funciones que ofrece la app.
  • Cuáles son las pantallas que tiene y para qué sirve cada una
  • Apariencia de las distintas pantallas y de los componentes.
  • Componentes que forman las distintas interfaces de usuario.
  • Relaciones entre las distintas pantallas y entre los componentes.
  • Utilidad de las opciones que ofrece.
  • Eventos presentes en la app.

2. Identifico lo que tengo que hacer

Ya conoces qué reto te proponemos alcanzar y te acabamos de plantear una actividad que te acercará a la meta. Pero para tener éxito en tu camino, necesitarás algunas estrategias que te servirán para esta y otras tareas parecidas. Las irás descubriendo en un diario que llamamos tu Diario de Aprendizaje.

¡Te proponemos que lo abras y completes el PASO 1 (Identifico lo que tengo que hacer) del Diario de aprendizaje antes de empezar la actividad que acabas de leer!



Haz clic aquí para descargar tu Diario de Aprendizaje

Recuerda:

  1. Pregunta a tu profesor o profesora si lo vas a rellenar en papel o en el ordenador.
  2. Si lo rellenas en el ordenador, no te olvides de guardarlo en una carpeta que más tarde puedas localizar.

¡Ánimo, que lo harás genial!

3. ¿Seré capaz de hacer la actividad?

¡Ya has empezado la actividad, “¿Qué ofrece la competencia?”! Cuando empezamos algo que no habíamos hecho antes podemos sentir algo de miedo e inseguridad, esto es algo muy normal.

Si completas el PASO 2 (¿Seré capaz de hacerlo?) del Diario de aprendizaje, podrás comprobar que solo con reflexionar sobre esto te ayudará a relajarte, a continuar con la actividad y completarla con éxito. También conseguirás sentir menos inseguridad cuando tengas que realizar las próximas actividades.

Recuerda:

  1. Pregunta a tu profesor o profesora si lo vas a rellenar en papel o en el ordenador.
  2. Si lo rellenas en el ordenador, no te olvides de guardarlo en una carpeta que más tarde puedas localizar. 

¡Ánimo, que lo harás genial!

4. Pantallas y más pantallas

En primer lugar, recuerda que hay que seguir trabajando en pareja.

Dibujad los bocetos que muestren el esquema gráfico previo de las dos pantallas correspondientes a una app que haga la función de agenda escolar. A ver qué os sale.

Tened en cuenta que hay que representar dónde se ponen todos los elementos que habéis creído necesarios para hacer la app y crear una leyenda que dé una explicación sobre los mismos.

Dado que las posibilidades son infinitas, deberéis respetar algunas condiciones que permitan limitar algo la solución.

Pantalla inicial donde consultar los datos introducidos

Condiciones

  • Utilizar una etiqueta para mostrar, con un número de orden anexo, cada fecha al lado de la anotación registrada que le corresponda.
  • Disponer un botón para cerrar la aplicación.
  • Crear un botón para acceder a una pantalla de introducción de datos.
  • Crear un botón para borrar todos las anotaciones registradas.

Pantalla de introducción de datos

Condiciones

  • Disponer algún componente que permita seleccionar la fecha en la que se quiere apuntar la anotación.
  • Utilizar una etiqueta para dar instrucciones sobre cómo elegir la fecha.
  • Poner un campo en el que poder escribir la anotación que se quiera almacenar.
  • Disponer un botón para almacenar los datos introducidos.
  • Crear un botón para volver atrás, a la pantalla inicial.

La posición de los componentes, el fondo de la pantalla y el resto de detalles decorativos (colores, formas, textos...) corren de vuestra cuenta.

La imagen muestra el dibujo simbólico de tres botones junto a la descripción de cada uno de ellos

Definición:

Es un texto breve normalmente situado junto a un símbolo para dar una descripción de su significado y características.

Ejemplo:

En la leyenda del boceto de la app figura el significado de todos los símbolos utilizados.

Lumen dice ¿Queréis algún ejemplo?

Consejos

Hay que empezar por hacer el dibujo de un móvil.

Después, en el espacio de la pantalla, situar todos los elementos necesarios.

No lo hagáis de cualquier manera, sed creativos y marcad vuestro estilo.

Es muy útil emplear símbolos esquemáticos muy simples acompañados de leyendas para dar los detalles necesarios. Esto permite definir claramente dónde va cada elemento, cómo es y qué hace.

Ejemplo

Aquí os dejo, a modo de ejemplo, la imagen de un móvil en cuya pantalla se muestra de forma esquemática la situación de tres botones sobre una imagen de fondo que sirve para decorar una interfaz de usuario. Es solo una posibilidad de las muchas que hay para una pantalla inicial. En vuestro caso tendréis que respetar las condiciones impuestas para hacer un boceto válido, ¡echadle imaginación!

La imagen muestra el boceto de un móvil con la representación en pantalla de una imagen de fondo sobre la que se colocan 3 botones en vertical centrados

5. A ver si lo tenéis claro

La imagen muestra el esquema de lo que pide el ejercicio, lista de componentes, descripción de funcionamiento y ejemplos

Seguimos trabajando en pareja.

Ahora es el momento de elaborar una lista, cada uno en su cuaderno, donde escribáis el nombre de todos los componentes diferentes que hayáis previsto utilizar para vuestra app.

A continuación escribid cómo debería funcionar esa app y poned algún ejemplo de uso con el que explicar el proceso seguido.

6. ¿Qué relación hay entre vosotros?

Una vez que tenéis el boceto de cada pantalla, también por parejas, hacedle una fotocopia y recortadlas de manera que las podáis pegar en una hoja, de tamaño adecuado, para dibujar con flechas de colores las relaciones que existen entre ellas.

Lumen dice Puedo aclararlo un poco

Para representar las relaciones que se piden, por cada componente que pueda generar un evento, hay que dibujar una flecha que conduzca a la representación de su resultado.

Por ejemplo, si hay un botón que al clicarlo conduce a otra pantalla, hay que dibujar una flecha que así lo indique.

La imagen muestra el dibujo de dos pantallas de una posible aplicación en la que se indica un ejemplo de representación de la relación existente entre ambas que consiste en que al clicar el botón B1 se va a la screen2 que muestra la etiqueta E1