Pantallas

From user's Wiki!
Revision as of 11:58, 21 January 2020 by Alan Vergara (talk | contribs) (Test)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
Ubicación de Pantallas

Desde esta sección se crean las pantallas que van a conformar la aplicación, cada pantalla creada puede tener diferentes funcionalidades, cada una equivale a un botón dentro del contenido de la aplicación el cual puede mostrar ya sea un contenido en concreto (Módulo) o llevarte a una acción directa.

A continuación encontraras una guía completa de cómo configurar, crear y archivar pantallas en esta sección de contenido.


Funcionamiento

El funcionamiento de las pantallas es muy sencillo, pero es lo primero que se configura en la sección de contenido para tener una estructura visual en las aplicaciones que estén por construirse.

Las pantallas funcionan como accesos directos al contenido al que se les ligue por medio de una acción, la cual puede ser un módulo, contenedor, ir a iniciar sesión, ir a configuración, ir a página web o ir a rutas, entre otras.

Todas las pantallas constan de tres secciones:

  • General
  • Interfaz Gráfica
  • Banners y Botones.

Cada una tiene una serie de opciones seccionadas dependiendo de su categoría para que su implementación sea opcional.

Vista de Editar Pantalla - General

General

Esta sección consta de las primeras opciones de funcionamiento para cada una de estas pantallas.

Nombre:

Aquí se agrega el nombre que se busca que tenga la pantalla apareciendo de manera predeterminada en el visualizador de la app creada.

Descripción:

Aquí se agrega la descripción o subtítulo del nombre de esta pantalla la cual aparecerá de manera predeterminada en el visualizador de la app creada.

Acción:

En esta opción se selecciona la acción que se le quiere dar al momento de darle click al botón desde la app visualizada, estas acciones pueden ser; Módulo, contenedor, ir a iniciar sesión, ir a inicio, ir al tour, ir a configuración, ir a scanner QR, ir a página web, ir a buscador, ir a rutas, sincronizar, ver status de visitas o búsqueda de visitas. Todas y cada una de estas opciones tiene que haber sido creada previamente en su sección correspondiente.

Etiquetas:

Aquí se agregan las etiquetas o los "TAGS" para mejorar el uso de "Buscador" mostrando de esta forma más resultados en la búsqueda de contenido dentro del visualizador de la app creada.

Selecciona el Ícono:

Aquí se selecciona desde la carpeta de medios, la imagen que se quiere como "Imagen de botón", ésta tiene que haber sido previamente cargada dentro de la carpeta de medios en formato permitido (".jpg" o ".png" en código de color "RGB") para poder ser seleccionada.

Códigos QR:

Aquí se muestra el código QR correspondiente a esta pantalla para su descarga e implementación de acceso directo desde cualquier otro equipo o app de BeepQuest usando como enlace la acción de "Escanear código QR"

Refrescar Código QR:

Esta opción es para cambiar, actualizar y crear un nuevo código QR para su uso.

Localización para Pantallas Anidadas:

Esta opción permite que se active la localización de las pantallas dentro de una pantalla contenedora, mostrando al usuario el listado de pantallas dentro de ésta en un orden por cercanía geográfica. Esta opción tiene que ser complementada con la localización de las pantallas por independiente.

Localización:

Activando esta opción, se marca el punto geográfico al que corresponde esta pantalla. Esta opción es complementaria a la Localización para pantallas anidadas.

Requiere Login:

Al activar esta opción, el usuario tendrá que iniciar sesión en el app forzosamente para poder visualizar esta pantalla. Esta acción puede ser complementada por "Acceso por segmentos de la pantalla".

Permitir Acceso solo al Siguiente Segmento:

Esta opción es complementaria al requerir login. Al activar esta opción, no solo será necesario que el usuario inicie sesión en el app, si no que también pertenezca al segmento seleccionado (Previamente creado) para poder visualizar la pantalla y su contenido.

Vista de "Editar Interfaz Gráfica de pantallas"

Interfaz Gráfica

Esta sección consta de los ajustes visuales de la app, aquí podrás configurar desde el tipo de plantilla para ver el contenido hasta la forma, tamaño y ancho de los botones, entre otros.

Color de Fondo:

Esta opción permite seleccionar el color del fondo de la pantalla en cuestión, teniendo como herramientas una barra cromática, transparencia y selección de color por código RGB.

Color de Texto:

Esta opción permite seleccionar el color del texto de la pantalla en cuestión, teniendo como herramientas una barra cromática, transparencia y selección de color por código RGB.

Texto con Fondo Blur:

Esta opción muestra una barra blanca semi transparente detrás del texto de cada pantalla que se encuentre dentro de esta pantalla contenedora.

Selecciona una Plantilla:

En esta sección se abre un menú completo con distintas opciones de acomodo de estructura de pantallas, llamadas grillas o listas, entre las cuales se puede seleccionar el estilo que más prefieras y ajustar las propiedades de esta misma para la pantalla contenedora en cuestión.

Selecciona la Imagen de Fondo:

Esta opción permite seleccionar una imagen de fondo pre-cargada desde la galería de medios para la pantalla en cuestión.

Color de Texto en Barra de Navegación:

Esta opción te permite seleccionar el color del botón "Menú" (Tres líneas) o "Regresar" (Flecha) que se encuentra en todas las pantallas del lado superior izquierdo, teniendo como herramienta una barra cromática, transparencia y selección de color por código RGB.

Barra de Estado Superior:

Esta opción ajusta el ancho de la barra de navegación, usando la opción "Light" para mostrarla en líneas delgadas y usando la opción "Dark" para mostrar las líneas un poco más anchas.

Banners y Botones.

Esta sección consta de configuraciones visuales y acciones extra si así se requiere, por ejemplo: Agregar uno o varios botones flotantes, agregar un banner superior o inferior, seleccionar el tamaño en el que se visualizara, aparte de darle una acción para que te lleve a una pantalla o sección puntual o la configuración de botones flotantes donde podrás configurar la locación, la imagen y la acción

Vista de "Editar Banners y Botones"

Habilitar Banner Superior:

Esta opción permite activar visiblemente o desactivar el banner superior dentro de la app en uso, permitiendo seleccionar una imagen desde la carpeta de medios (Previamente cargada) y ajustando esta a la altura deseada. La altura del banner es configurable en la barra de porcentaje contigua, la cual quiere decir que el banner podría ocupar hasta el 40% de la pantalla. También permite agregarle una acción como: Ir a una pantalla de contenido, ir a iniciar sesión o ir al tour entre otras, para que de este modo, el banner, si así se requiere, tenga función de acceso directo o botón a algún contenido en específico.

Habilitar Banner Inferior:

Esta opción permite activar visiblemente o desactivar el banner inferior dentro de la app en uso, permitiendo seleccionar una imagen desde la carpeta de medios (Previamente cargada) y ajustando esta a la altura deseada. La altura del banner es configurable en la barra de porcentaje contigua, la cual quiere decir que el banner podría ocupar hasta el 40% de la pantalla. También permite agregarle una acción como: Ir a una pantalla de contenido, ir a iniciar sesión o ir al tour entre otras, para que de este modo, el banner, si así se requiere, tenga función de acceso directo o botón a algún contenido en específico.

Botones Flotantes:

Para activar un botón flotante, es necesario seleccionar el botón que se desea activar, esto desplegará las opciones de configuración correspondientes, las cuales permiten seleccionar una imagen desde la carpeta de medios (Previamente cargada) y agregarle una acción como: Ir a una pantalla de contenido, ir a iniciar sesión o ir al tour entre otras, para que de este modo, si así se requiere, tenga función de acceso directo o botón a algún contenido en específico.

Navegación.

La navegación entre pantallas es muy sencilla, después de creadas, estas se pueden acomodar arriba, abajo, dentro y fuera de otras pantallas seleccionando, arrastrando y soltándolas en la ubicación deseada.

El botón de "+" permite agregar una pantalla contenedora dentro de esta misma.

EL botón "Editar" abre el panel de edición de esta pantalla en la que permite configurar la acción o contenido a mostrar de este botón al igual que la interfaz visual agregando banners, colores, fondos y mostrando las distintas plantillas de estructura para su ajuste personalizado.

El botón "Archivar pantalla" elimina este contenido de las pantallas principales por lo cual no será visible desde el app en cuestión y se muestra sólo en la sección de "Pantallas archivadas".

El botón "Analíticos" muestra el resumen de la pantalla en cuestión, total de visitas, últimos visitantes, influencia de los segmentos, usuarios más concurrentes, una gráfica de visitas por fecha y otra gráfica de visitas por día.

Refrescar

Esta acción permite cargar de nuevo las pantallas.

Mostrar todas las pantallas

La acción de este botón es abrir todas las pantallas contenedoras para mostrar el contenido configurado dentro de estas, los cuales pueden ser, más pantallas contenedoras o pantallas con una acción pre-configurada.

Nueva Pantalla

Nueva Pantalla

Al seleccionar esta opción, se abre una ventana donde se pide que se inserte el nombre que llevará esta nueva pantalla, la cual al seleccionar "guardar" el panel se reiniciara y mostrará esta nueva pantalla creada debajo de la pantalla de "Inicio", a excepción de que se tenga una pantalla previamente creada, en cual caso se mostrará debajo de la segunda pantalla o si se están creando varias pantallas, ésta se irá agregando debajo de la última pantalla creada.

Cada pantalla creada cuenta con las mismas opciones para su personalización, accediendo consecuentemente a la opción de "Editar Pantalla".

Pantallas Archivadas

Ver Pantallas Archivadas

Para poder visualizar este contenido es necesario dar clic en el botón "Ver pantallas Archivadas" que se encuentra en la parte superior derecha dentro de la sección de "Pantallas".

Ya dentro de esta sección se muestran las pantallas archivadas, cada una cuenta con la opción de "Des-archivar" la cual regresará la pantalla a la última locación que tenía antes de ser archivada.

Esta sección cuenta con la opción de buscar la pantalla archivada por nombre y ordenarlas por nombre o ID en orden descendente o ascendente.

Pantalla Inicio

Esta pantalla es la pantalla principal, donde todo el contenido es alojado, por este motivo no se puede "eliminar" ni agregar acción alguna, pero cuenta con todas las opciones de edición como cualquier otra pantalla (Edición General, Interfaz Gráfica y Banners y Botones).

Esta pantalla se configura principalmente para darle la primer imagen que se tiene del contenido a través del app, por medio del tipo de plantilla seleccionado dentro de la edición de interfaz gráfica.

Nueva Pantalla Creada

Al momento de crear una nueva pantalla, ya sea creada desde el botón "+" en la parte superior derecha o dentro de una pantalla contenedora, se solicitara que se le de un nombre y se guarde.

Después de guardarse, el panel de control se recargara, mostrando la pantalla creada en su locación seleccionada (Pantallas principales o dentro de otra pantalla contenedora) y esta pantalla contara con todas las opciones para personalizarla desde "Editar pantalla".