CETIS No.

67

Construcción de una APP móvil

parte 3
MTE. Denisse Cisneros García
Construcción de APP móvil
En el tema anterior aprendimos sobre los distintos diagramas
que nos permiten comprender mejor las acciones de los
usuarios (casos de uso) y los procesos que se realizan en
nuestra APP (DFD).

Hoy trabajaremos los últimos pasos antes de la codificación, es

decir el mapa de navegación y la maquetación.
 Mapa de navegación.
Un mapa de navegación es una representación de la APP, sirve para
orientar al lector durante su recorrido entre páginas o para facilitarle
el acceso directo al cierta sección de la aplicación.
Este mapa muestra la estructura de la aplicación por medio de enlaces
a distintas ventanas o elementos que desean ver, puede representarse
de forma textual, gráfica o en combinación de ambas.
 Tipos de mapas de navegación.

• Lineal

• Lineal en estrella

• Jerárquica.

• No lineal.

• Compuesta.

• Múltiple.
 Navegación lineal.

La navegación lineal permite el flujo de la información más estable, es muy

útil cuando se quiere llevar un proceso paso a paso con una estructura lineal
que permite al usuario recibir la información en un orden adecuado.
El desplazamiento ocurre únicamente con la opción de ir adelante y atrás.
 Navegación no lineal.

La navegación no lineal permite hacer un salto del último elemento (página),

al inicio y no tener que hacer el recorrido de atrás hacia adelante.
 Navegación Estrella.

En navegación en estrella todas sus páginas parten de una ventana principal y

su desplazamiento es de adelante y atrás.
Navegación Jerárquica o de árbol.

Esta estructura comienza con una página principal o raíz, se presentan varias
opciones que permiten ir visualizando ventanas más especificas.
El contenido se desarrolla en forma ramificada pudiéndose visitar cada una
de las secciones por separado.
 Navegación compuesta.

La navegación compuesta es la que combina diferentes sistemas como árbol,

lineal y no lineal.
 Navegación múltiple.

La estructura de una aplicación en el que cada una de sus páginas están

vinculadas unas con otras se denomina múltiple.
Con este sistema el número de vínculos o enlaces es igual al número de
páginas menos una.
 Ejemplo
Retomando el ejemplo de la veterinaria de Ana, analicemos el
tiempo de navegación que tiene.

El texto indica que es un tipo de navegación múltiple porque

todas las páginas están interconectadas.
 Usuario con cuenta
Representación gráfica Página 4
Info. de las
mascotas
Página 2
Misión, visión,
historia,
contacto, Veamos este
imágenes. Página 6 ejemplo de
Solicitud de una manera
cita más sencilla
Página
principal

Página 7
formulario
registro y alta Página 5
mascota Fechas de
Página 3 visitas y
Inicio Sesión
Enlace Reg. cuenta
motivo
 Usuario con cuenta
Representación textual
Enlace: Página Principal Página 7
Enlace: Página 2 Página 4 formulario
Página Página 3, Página 4 Página 2, Página 3
Info. de las registro y alta
principal Página 5, Página 6 Página 5, Página 6
mascotas mascota
Página 7 Página 7

Enlace: Página Principal

Página 2 Página 2, Página 3
Misión, visión,
Enlace: Página Principal Página 5 Enlace: Página Principal
Página 3, Página 4 Página 4, Página 5
historia, Fechas de Página 2, Página 3
contacto, Página 5, Página 6 Página 6
visitas y Página 4, Página 6
imágenes. Página 7 motivo Página 7

Página 3 Enlace: Página Principal Página 6 Enlace: Página Principal

Inicio Sesión Página 2, Página 4 Solicitud de Página 2, Página 3
Enlace Reg. cuenta Página 5, Página 6 cita Página 4, Página 5
Página 7 Página 7
 Veterinaria de Ana
En el ejemplo representado anteriormente nos indica que
todas las páginas están interconectadas entre si, por lo que
corresponde a un tipo de navegación múltiple.

En el ejercicio anterior ya se había definido la organización de las

ventanas por lo que fue fácil identificar la navegación, pero no siempre
será así, el equipo de desarrollo junto con el cliente tendrán la tarea de
establecer la forma en que se desplazara el usuario entre las páginas,
buscando siempre la mejor opción para evitar confusiones a la hora de
visitar las secciones de la APP.
 Ejercicio “Mapa de navegación”

Realiza el mapa de navegación de la APP de Ana para un usuario sin

cuenta.
1) Este mapa deberá realizarse de manera gráfica utilizando flechas
que indiquen el desplazamiento de una página y otra.
2)Utiliza un color diferente para representar cada página y sus
respectivas flechas de desplazamiento.
3)Indica el tipo de navegación al que pertenece.
4) También realiza la maquetación de manera textual.
 Maquetación de una APP
La maquetación es la representación visual por medio de un dibujo del diseño de
la interfaz de nuestra APP.
En la maquetación se representan enlaces, páginas, texto, imágenes, elementos
de vídeo, audio, menú, etc., apegado a los requerimientos indicados por el
cliente.
El objetivo de una maquetación es que el cliente observe el diseño final de la APP
antes de que se programada, por lo que el diseño deberá ser lo más real posible.
El detalle en el diseño de una maquetación puede variar dependiendo del
maquetador y lo solicitado por el cliente, se pueden realizar de manera muy
elaborada o sólo representado ciertos elementos que requieren mayor
atención.
Secciones de una APP
Cabecera: también conocida como
header, no es una sección que llegue a
saturarse de información, suele incluir
el nombre de la APP, pocos iconos o
una pequeña barra de navegación.

Cuerpo: también conocido como main,

es la sección de la APP en donde se
programa el contenido como texto,
imágenes, vídeos, etc., puede incluir
también alguna barra de menú.

Pie: se conoce como footer y puede

incluir texto, iconos o barra de
navegación.
Desarrollo de la maquetación.

Para la construcción de nuestra maquetación tomaremos la

información del ejemplo de la veterinaria de Ana, la cual es la
siguiente:

• Colores blanco, azul marino y tipo de letra Arial, no se indica

tamaño del texto.

• Página principal: logo de la veterinaria, fotos de animales y del

trabajo que se realiza.

Al tener poca información con respecto a la página principal, se

solicitará al cliente proporcione más datos sobre el diseño, los
cuales nos permitirán realizar mejor nuestra maquetación.
Desarrollo de la maquetación.

Información adicional:

• Colores: fondo color blanco, letra azul marino/negro o combinar,

tipo de letra Arial, el tamaño de letra queda a criterio del
maquetador.

• Página principal:
Header: texto “Veterinaria”
Main: logo de la veterinaria
Galería con imágenes tipo carrusel del trabajo de la veterinaria
Galería con imágenes de los clientes y mascotas de la veterinaria tipo
carrusel
(se puede incluir texto descriptivo de cada galería)
Texto con la promoción del mes “10% en accesorios para gatos”
Footer: dirección de la veterinaria “Calle bonita Linda #1313 2233XY45
Pue.”
Elemento que utilizaremos
para la maquetación

Menú con 4 botones

Texto

Imagen

Galería de imágenes
 Ejercicio “Maquetación”
Realiza la maquetación de la página para iniciar sesión.

• Colores: fondo color blanco, letra azul marino/negro o combinar, tipo de letra
Arial, el tamaño de letra queda a criterio del maquetador.

Header: texto “Veterinaria”

Main: logo de la veterinaria
Texto que indique “ingresar el número de cuenta de 8 dígitos”, cuadro de texto de
formulario, botón con texto “Aceptar”
Enlace con texto “Registrarse”.
Texto justificado: “Las mascotas son parte importante en la vida de muchas
familias, por no decir, miembros muy amados de éstas. Estos animales
domesticados, además de hacer mucha compañía, pueden llegar a jugar un papel
crucial en el desarrollo social, intelectual y afectivo de los niños dentro de un
hogar. Por eso es tan importante cuidarlos con dedicación y constancia.”
Imagen de un perrito centrada.
Footer: dirección de la veterinaria “Calle bonita Linda #1313 2233XY45 Pue.”

Recuerda que una maquetación debe ser la representación más real del
resultado de la interfaz de la APP, por lo que los textos deberán incluir toda la
información que se indica y no representarlos solo con líneas.
Una maquetación debe ser la representación más fiel y real del
resultado que se pretende alcanzar con la interfaz de la APP