SÁBANA DE CONTENIDO.

SÁBANA DE CONTENIDO. 

A continuación, se presenta nuestra sábana de contenido; la cual consiste en el despiece total de nuestra aplicación antes de realizarla. 

Giro de la aplicación:  Aplicación para llevar el control anímico, manejo de ataques de pánico y relajación enfocado hacia personas con ansiedad, depresión, o inestabilidad emocional.			Nombre de la aplicación:  "Non Exieris"  (lat. Nunca rendirse)			Ícono:	Equipo: Yovanny Huizar Moreno / Diana Gabriela Flores Valdez
ID	Título de la página	Tema sección	Requisitos de contenido	Tipo de contenido a integrar	Descripción de las unidades organizativas	Especificaciones funcionales del sistema	Especificaciones de diseño
Inicio	"Pantalla de inicio"	Ícono de la interfaz a manera de feedback	Icono de la aplicación.	Imagen y texto.	No necesita interacción por parte del usuario, sólo su paciencia en los segundos que tarda en cargar la interfaz.	HTML5: agregar el ícono de la aplicación. CSS3: agregar los detalles de color, transiciones, y el orden.	Pantalla color trigo, ícono de la aplicación en el centro de la pantalla el cual aparece con una transición de opacidad 0 a 100.
Nombre	"Registro de usuario"	Campos de texto donde el usuario ingrese su nombre y pide permiso para entrar a los contactos del usuario y se redirige a los Contactos en el teléfono , y de ahí se elija un contacto de confianza.	Nombre del usuario y acceso a contactos	Texto.	Al entrar, se muestra una pantalla que por única ocasión pregunta al usuario su nombre, permite acceso a su listado de contactos y le pide que ingrese un número de emergencia.	HTML5: se utilizará un formulario que pida el nombre del usuario utilizando base de datos. CSS3 se usará para darle estilo a la hoja (color, fuentes, etc.)	Pantalla color trigo con cuadros de texto que pida que ingrese el nombre y espacio para ingresarlo. Al final, aparece una notificación pidiendo acceso a los contactos del usuario, y redirige a los contactos para que elija. Al terminar, vuelve a abrir una pantalla con el ícono y un mensaje breve de bienvenida.
Menú	"Menú principal"	En este se encuentra el menú a manera de “mapa sol” el cual despliega las opciones.	Íconos con texto que representen cada una de las opciones.	Imágenes y texto.	Se mostrará una pantalla donde se le pedirá al usuario *cada que entre a la aplicación* que ingrese su estado de ánimo y después se mostrarán las opciones del menú las cuales serán abiertas arrastrando el ícono hacia el centro.	HTML5: Se agregarán los elementos del menú con íconos, texto, imágenes, etc. CSS3 se utilizará para posicionar los elementos del menú.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner” y los elementos del menú con un color crema cada uno con su respectiva iconografía y texto. Estos de manera visible y legibles.
btn_pánico	"Botón de pánico"	Esta pantalla despliega un botón centrado a la pantalla del usuario la cual envía un mensaje SMS a un contacto predeterminado.	Texto centrado de buen tamaño con instruccionesy un botón centrado con un ícono de ayuda.	Texto e imágenes.	Al seleccionar esta opción, se mostrará una pantalla donde le avisa al usuario que se mandará un mensaje a su contacto de emergencia con un mensaje predeterminado de ayuda y un botón para que al dar ‘clic’ lo envíe a través de la aplicación.	HTML5: Agregaremos los elementos que son botón, texto, e iconografía. CSS3: Configurar transiciones, colores, etc.	Pantalla color azul grisáceo claro, que incluya un botón de un color un poco más oscuro que sea de buen tamaño, el cual debajo de él vendrá texto con las instrucciones a seguir de manera legible. Al dar ‘clic’, redirigirá a la aplicación de mensajería del usuario con un texto predeterminado.
snd_rel	"Sonidos relajantes"	Se despliegan opciones a manera de listado sobre los distintos sonidos que la aplicación ofrece.	Listado de opciones de audio con texto que indiquen qué es cada opción.	Texto y audio.	Se desplegarán un listado con los distintos sonidos considerados relajantes, donde el usuario seleccionará el que crea conveniente y se mostrará la duración del mismo audio.	HTML5: Incluirá texto, audio e iconografía. CSS3:  Se modificarán las propiedades de los audios y el diseño de la pantalla.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. Abajo se incluirá un listado de los sonidos, cada uno que muestre qué sonido es y la duración de este.
est_anm	“Estado de ánimo”	Se muestra una cuadrícula en la que el usuario selecciona el estado de ánimo en la que se encuentre.	Imágenes sin fondo que representen emociones.	Texto e imágenes.	En esta sección, se mostrarán a manera de cuadrícula los distintos estados de ánimo (desde “excelente-terrible), los cuales el usuario seleccionará y se le presentará un feedback mostrándole que ya está registrado.	HTML5: Mostraremos la iconografía, texto, y botones. CSS3: Utilizado para el diseño y las transiciones. JavaScript para cuestión de modificaciones extraordinarias.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. Habrá una cuadrícula con botones que representen cada estado de ánimo, el cual al seleccionarlo, se irán añadiendo la selección a un listado con estado de ánimo y la hora en la que fue agregado.
eje_resp	“Ejercicios de respiración”	Se muestran 3 opciones de ejercicios de respiración cada uno con instrucciones para el usuario y su duración correspondiente.	Listado de opciones de audio con texto que indiquen el tipo de respiración y duración.	Texto y audio.	Se desplegarán un listado con los distintos ejercicios de respiración que la aplicación ofrece, donde el usuario seleccionará el que crea conveniente.	HTML5: Incluirá texto, audio e iconografía. CSS3:  Se modificarán las propiedades de los audios y el diseño de la pantalla.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. Abajo se incluirá un listado de los sonidos, cada uno que muestre qué sonido es y la duración de este.
bau_nec	“Baúl de necesidades”	Cuando la aplicación ve un patrón de estados de ánimo negativos, le pregunta al usuario qué necesita.	“Mapa sol” con íconos que representen ayuda.	Imágenes y texto.	Consiste en que en un determinado número de sentimientos negativos por parte del usuario la aplicación muestra una pantalla donde le muestra opciones para que cambie su estado de ánimo.	HTML: Incluirá imágenes, texto, e iconografía. CSS3: Diseño y transiciones.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. Esta pantalla incluye diferente iconografía, imágenes, o texto dependiendo del número y tipo de sentimiento negativo.
Ctr_emo	“Control emocional”	Muestra a manera de gráfica de dispersión los estados de ánimo ingresados por el usuario.	Gráfica de dispersión lineal y un texto con el significado.	Texto y gráficos.	Se muestra una gráfica de dispersión y lineal *combinada* donde se van registrando las “entradas” por parte del usuario.	HTML: Incluirá imágenes, texto, e iconografía. CSS3: Diseño y transiciones.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. En la pantalla se desplegará una gráfica de dispersión donde cada “punto” es cada sentimiento seleccionado.
config	“Configuración”	Configura el nombre, sonido y notificaciones de la aplicación.	Ícono de texto, caja de texto, ícono de sonido y notificaciones con “switch” on/off.	Texto e iconografía.	Aquí el usuario modificará detalles pequeños para su comodidad dentro de la aplicación, tales y como son: Nombre, sonido, y notificaciones.	HTML: Incluirá imágenes, texto, e iconografía. CSS3: Diseño y transiciones.	Pantalla color arena, con el ícono del logo de manera centrada y hasta arriba en un “banner”. Aparece iconografía de sonido, notificaciones, modificable desplazando una barra que implícitamente significa niveles y un campo de texto para modificar el nombre.