Estructura general
El layout general para el área de gestión tiene un comportamiento líquido ocupando toda el área disponible de la pantalla. Se distribuirá en las siguientes áreas de navegación y visualización de información:
Cabecera
Área siempre visible en pantalla, se divide en tres áreas según su ubicación horizontal:
- Logomarca: Compuesta por el símbolo de Hércules + Logo de la universidad. Se ubica siempre a la izquierda de la cabecera.
- Selector de módulo: Elemento de interacción desplegable que permite seleccionar un módulo para operar con él. Se muestra siempre ocupando la posición central de la cabecera.
- Herramientas de usuario: Agrupación de iconos que darán acceso a determinadas funcionalidades ligadas al usuario, por definir, entre ellas ya modo de propuesta:
- Acceso directo de creación de entidades cross-módulo: Mostrará un listado de enlaces a las páginas de creación a las que tiene acceso el usuario, agrupadas en columnas por módulo. Se mostrará en rollover. Esta funcionalidad es una nueva propuesta que debe ser verificada.
- Tareas / To Do's
- Avisos y alertas
- Analítica de datos
- Mi perfil
- Configuración:
Área de trabajo
Ocupa el espacio inferior de la pantalla bajo la cabecera y está destinada a mostrar el módulo seleccionado y activo. El área de trabajo podrá ser dividida en función de las necesidades funcionales de cada módulo. Estas divisiones se definen a nivel estructural en:
- Sidenav izquierdo: Menú de navegación que da acceso a las entidades principales del módulo.
- Espacio de trabajo: Espacio central en el que se desarrolla el trabajo de manejo del sistema a través de entidades de formularios, listados y resto de componentes necesarios. En este área de trabajo se identifican como elementos tipificados:
- Breadcrumb: Migas de pan que indican la ubicación de la pantalla en relación a la secuencia de navegación del módulo.
- Titulo de página / Sección: Elemento de título
- Pestañas / Tabs: Componente de navegación horizontal entre agrupaciones de campos de la entidad o entidades secundarias.
- Contenido: Área para la visualización y manejo de formularios, listados y componentes.
- Acciones: Espacio para la ubicación de enlaces a acciones principales del contenido (Guardar, Cancelar, etc)
- Sidenav derecho: Menú de navegación entre subentidades externas vinculadas a la entidad actual.
Elementos y componentes
Cabecera
Logomarca
Selector de módulos
Herramientas de usuario
Notificaciones
Área de trabajo
Sidenav izquierdo
Menú:
Se contempla un menú vertical que ocupará el sidenav izquierdo. Cada elemento de menú será presentado por un icono, un texto descriptivo de la función/sección y un icono que da acceso a la función de desplegable, mostrando las subfunciones/subsecciones del elemento de menú de primer nivel. El submenú que se despliega tras esta interacción mostrará un listado de subelementos de menú con un texto descriptivo clickable que dará acceso a la subfunción/subsección y un icono de alta de nuevo registro asociado a la entidad relacionada. Las acciones de navegación de este menú cargarán el contenido en el Espacio de trabajo.
Espacio de trabajo
El Espacio de trabajo se destina a la mostrar la información y a la gestión de entidades a través de listados y formularios. Tentro del área de trabajo se identifican los siguientes componentes:
Breadcrumb
Elemento de navegación que permite mostrar al usuario el nivel de profundidad en el que se encuentra dentro de la jerarquía de secciones o pantallas. Cada elemento del breadcrumb será clickable y permitirá navegar a la sección o pantalla correspondiente.
Titulares
El titular es el elemento de texto que identifica la sección o pantalla actual en la que se encuentra el usuario. Se corresponde con el último nivel mostrado en el Breadcrumb.
Pestañas (tabs)
Bajo el titular puede existir un componente de navegación horizontal organizado en pestañas. Este componente posibilitará la navegación entre grupos de campos de una entidad, si su número o complejidad así lo requieren, así como entre entidades dependientes o subrogadas a la entidad principal.
Cada elemento de pestaña incluirá un texto descriptivo y podrá tener un estado (activo / inactivo) en función de si el contenido de esa pestaña está en el foco de interacción del usuario.
Adicionalmente una pestaña podrá mostrar un icono en su parte derecha, que podrá indicar dos estados:
- el estado de modificación del contenido de la pestaña y si ese contenido se ha guardado. Es decir, si un usuario modifica el valor de algún campo de un formulario en una pestaña o crea y/o modifica algún registro de una entidad subrogada que se muestra como listado en el contenido de una pestaña, se mostrará este icono de aviso de modificación de datos, para que el usuario sea consciente de que debe realizar un guardado general de la entidad principal.
- el estado de validación de los datos, que indicaría si los datos de esta pestaña presentan errores de validación tras el intento de guardado de la entidad
Listados y tablas
En el espacio de trabajo se visualizarán listados de registros y tablas. Estos listados podrán presentar los siguientes componentes o funciones:
- Búsqueda de registros: Se trata de un componente de búsqueda situado en la parte superior de la tabla y que permitirá realizar un filtrado de registros en el listado o tabla. Presentará una serie de campos y un botón de búsqueda, así como otro para reiniciar la búsqueda y mostrar los datos sin filtrado.
- Encabezados de tabla: Ordenación
- Configurador de visibilidad de columnas:
- Listado de registros
- Casillas de multiselección
- Columna de acciones
- Desplegable de acciones
- Paginación
Formularios
Notificaciones
Paginación
Acciones
Las acciones de creación o guardado sobre la entidad principal se mostrarán en un área de navegación que se situará siempre en la parte inferior de la pantalla, en posición absoluta y que por tanto estará siempre visible independientemente de la extensión del contenido que se esté mostrando en el área de trabajo. Estas acciones se mostrarán a través de botones y enlaces. En este área también se mostrarán mensajes de aviso ante modificaciones de contenido y validación de los datos en el momento del guardado.