Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
1/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
2/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
3/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
4/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
5/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
6/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
7/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
8/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
9/20 10/08/2015
NORMAS GENERALES DE D...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
10/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
11/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
12/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
13/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
14/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
15/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
16/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
17/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
18/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
19/20 10/08/2015
NORMAS GENERALES DE ...
SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
20/20 10/08/2015
NORMAS GENERALES DE ...
Upcoming SlideShare
Loading in …5
×

Normas Generales de Diseño de Interfaz del Proyecto SIACE

98 views

Published on

Por esta razón, se propone la aplicación de principios de diseño de interfaz comprobados, con la finalidad de proveer a los usuarios finales de una interfaz clara, precisa, simple y ordenada, con la información y procesos relevantes a las funciones que estos desempeñan.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Normas Generales de Diseño de Interfaz del Proyecto SIACE

  1. 1. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 1/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Normas Generales de Diseño de Interfaz del Sistema Integral Administrativo de las Contralorías de  Estado (SIACE) Versión 1.0 Noviembre de 2016 La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  2. 2. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 2/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 HISTORIAL DE REVISIÓN FECHA VERSIÓN DESCRIPCIÓN AUTOR CARGO CONTRALORIA 10/08/2015 1.0 REDACCIÓN CARLOS ROMERO ANALISTA DE SISTEMAS III SUCRE 24/11/2016 2.0 ACTUALIZACIÓN YADIRA ARIAS ASISTENTE DE PLANIFICACIÓN Y TELEMATICA II MONAGAS La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  3. 3. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 3/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Con la firme intención de mantener un orden y homogeneidad en la programación y edición de código fuente en la reingeniería del Sistema Integral Administrativo de Contralorías Estadales (SIACE) se establecen los siguientes lineamientos: Principios Generales del Diseño Visual Las   interfaces   gráficas   efectivas   son   visualmente   comprensibles,   proporcionando   al   usuario   la sensación   de   control   y   fluidez   sobre   la   información   presentada.   Esta   constituye   una   capa   de abstracción, ocultando al usuario el funcionamiento interno de la aplicación. Por esta razón, se propone la aplicación de principios de diseño de interfaz comprobados, con la finalidad de proveer a los usuarios finales de una interfaz clara, precisa, simple y ordenada, con la información  y procesos relevantes a las funciones que estos desempeñan. Así, Bruce Tognozzi define un conjunto de principios fundamentales para el diseño de interfaz:  Anticipación: una aplicación Web debe diseñarse para anticiparse a los movimientos del usuario. Por ejemplo, si un usuario visita una página Web para solicitar información sobre un driver para un sistema operativo, la aplicación debería facilitarle un enlace para poder descargar dicho driver, ya que es la acción más probable a realizar por el usuario.  Comunicación: la interfaz debe comunicar el estado de cualquier actividad iniciada por el usuario. Dicha comunicación puede hacerse por una etiqueta (label), un diálogo, etc.  Consistencia: el uso de los controles de navegación, menús, iconos y aspectos estéticos (como colores, formas, etc.) deben ser consistentes en toda la interfaz. Por ejemplo, si un subrayado de color azul indica un link, un texto que no sea un link no puede subrayarse de esa forma.  Autonomía controlada: la interfaz debe facilitar la navegación del usuario a través de la aplicación, pero debe hacerlo de manera que se cumplan las restricciones establecidas para la aplicación. Por ejemplo, controlar la navegación a determinadas funcionalidades de la aplicación solicitando un nombre de usuario y contraseña.  Eficiencia: el diseño de la aplicación Web y su interfaz deben optimizar el trabajo del usuario.  Flexibilidad: la interfaz debe ser lo suficientemente flexible para permitir que algunos usuarios puedan realizar sus  tareas directamente y para que otros  puedan explorar la aplicación más a fondo. La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  4. 4. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 4/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016  Centrada en el usuario: la interfaz de la aplicación (y el contenido que muestra) debe estar centrado en las tareas que los usuarios deben realizar.  Ley de Fitt: “el tiempo para cumplir un objetivo es una función de la distancia y el tamaño de ese objetivo” [Tog01]. Esta ley es un método eficaz de modelado rápido,  de tal modo que, ante una secuencia de entradas o selecciones que se deben realizar en una acción, la primera selección de la secuencia (como un clic de ratón) debe estar físicamente cercana a la siguiente selección. Por ejemplo, en una página Web de compras de productos, tras seleccionar la acción Comprar Producto, se suceden otra serie de selecciones, como la selección del producto, la cantidad, selección de otros productos relacionados, etc. Todo ello debe estar próximo, para evitar que el tiempo que el usuario necesita para cumplir su objetivo sea demasiado alto.  Objetos de la interfaz de usuario: existen enormes bibliotecas de objetos de interfaz y patrones, por lo que éstos deben utilizarse a la hora de diseñar una nueva interfaz de usuario.  Reducción de latencia: antes que hacer que el usuario espere para que se complete alguna operación interna de la aplicación, ésta debería ser multitarea y permitir al usuario seguir trabajando   mientras   la   acción   se   completa.   Además,   se   debe   proporcionar   una realimentación (feedback) al usuario en los momentos de espera, en forma de aviso sonoro o visual (reloj de espera, barra de progreso, etc.).  Facilidad de aprendizaje: una interfaz de usuario debe ser diseñada para minimizar el tiempo de aprendizaje.  Metáforas: una interfaz que utilice una metáfora de interacción es más fácil de aprender y de usar, siempre y cuando la metáfora sea adecuada para la aplicación y para el usuario final. Por ejemplo, en una aplicación de compras se puede utilizar un libro de contabilidad como metáfora gráfica para las facturas de los pedidos realizados.  Legibilidad: toda la información presentada a través de la interfaz debe ser legible por cualquier usuario.  Navegación visible: un buen diseño de la interfaz genera “la ilusión de que los usuarios están en el mismo sitio, pero con el trabajo traído hacia ellos”. Diseño de Interfaz Para el diseño general de la interfaz se utilizará el framework “Bootstrap”, el cual contiene diversas plantillas con elementos como formularios, menús, tipografía, cuadros, botones, gráficos basados en HTML, CSS y JavaScript, proporcionando facilidad al momento de  construir la aplicación. La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  5. 5. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 5/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Diseño Estructural de Interfaz El diseño estructural permite distribuir el espacio de trabajo en áreas, las cuales permitirán al usuario ubicar con facilidad los elementos con los cuales va a interactuar y proporcionar consistencia a lo largo de toda la aplicación,  siempre  y cuando respetando los colores establecidos de las ventanas, tablas, pestañas, iconos, botones y todas las acciones a realizar dentro de las diferentes áreas del modulo. (Ver Figura  N.º 1 y Figura  N.º 2 )                                           Figura  N.º 1 Área de Presentación La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  6. 6. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 6/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Figura  N.º 2 Área de Notificaciones Pauta Cromática Con la finalidad de obtener una correcta visualización de la información presentada al usuario, se establece el predominio del color blanco en el fondo y color negro para la fuente. Su aplicación radica en formularios, tablas, contenidos  y reportes a excepción de títulos. Pauta Tipográfica Las fuentes a utilizar en el marco de trabajo corresponden a "Roboto", sans­serif, Helvetica, Arial, sans­serif; Se utilizarán los siguientes tamaños de fuentes, proporcionados por Bootstrap. • Para los títulos generales se utilizará la etiqueta h2, la cual corresponde a un tamaño equivalente a 24px. Ejemplo. <h2>Listado de Empleados</h2> • Para los títulos de tablas se utilizará la etiqueta h4, la cual corresponde a un tamaño equivalente a 15px. <h4>Nombre</h4> • En cuanto al contenido se utilizará el tamaño por defecto contenido en el marco de trabajo equivalente a 13px; La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  7. 7. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 7/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Encabezado del listado Ventanas Las ventanas son un área visual, normalmente de forma rectangular, que contiene interfaz de usuario, mostrando la salida y permitiendo la entrada de datos para uno de varios procesos que se ejecuten. Debe guardar relación la opción a elegir con el encabezado dentro de la opción a ejecutar. (Ver Figura N.º 3 y Figura  N.º 4) Figura  N.º 3 OPCIÓN A ELEGIR Figura  N.º 4 ENCABEZADO DE LA OPCIÓN La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  8. 8. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 8/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Elementos de Interfaz Formularios Los formularios de registro serán desplegados a través de una ventana modal. El estilo de animación establecido para los formularios corresponde al indicado en  la Tabla 1. ( Ver ejemplo de formulario en la Figura  N.º 5 ) Tabla 1. Estilo de formulario NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN floating-label .form-group floating-label <div class="form-group floating-label"> <input type="text"class="form-control"> <label>Nombre</label></div> Figura  N.º 5 FORMULARIO La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  9. 9. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 9/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Elementos de Formularios En la Tabla 2 se indican los elementos del formulario a utilizar. Estos corresponden a casillas de verificación y diversos selectores. Tabla 2. Elementos de formularios NOMBRE MODELO CLASE APLICACIÓN Casilla de verificación (Checkbox) . checkbox checkbox- styled <div class="checkbox checkbox-styled"> <label><input type="checkbox"value=""> <span> Casilla de prueba</span></label> </div> Selector (Select) <div class="form-group floating-label"> <select name="" class="form-control"> <option value="">&nbsp;</option><option ></select><label>Seleccionar</label></div> Selector de fecha (Datepicker) .input-group date <div class="form-group control-width-normal"> <div class="input-group date" id="demo-date"> <div class="input-group-content"> <input type="text" class="form-control"> <label>Desde</label></div><span class="input- group-addon"><i class="fa fa- calendar"></i></span></div></div> La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  10. 10. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 10/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Tablas Las tablas permiten ordenar la información y proveer de un ambiente controlado para el manejo de la misma. Teniendo en cuenta que toda la información suministrada por estas tabla deberá ser en  español. Nota:  Las acciones a realizar dentro de las tablas deben tener la información correspondiente con sus respectivos iconos , todo esto situado en la parte debajo. (Ver  Figura  N.º 6).   Figura  N.º 6 TABLAS La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  11. 11. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 11/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 A continuación se muestran dos estilos de tablas para el manejo de la información del SIACE, contenidas en las Tablas 3 y 4 respectivamente. Tabla 3 . Modelo de tabla estática (Ver Figura N.º 7) NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Stripped table .table-striped class="table table-striped" Figura  N.º 7 TABLA ESTÁTICA Tabla 4. Modelo de tabla dinámica (Ver Figura N.º 8) NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Show/hide columns .table table-striped table-hover class="table table-striped table-hover" La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  12. 12. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 12/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Figura  N.º 8 TABLA DINÁMICA Estilo de Botones Incorporar iconos alusivos a la acción a realizar. Los botones a utilizar son los siguientes: Tabla  5. Estilo de botones ACCIÓN MODELO CLASE APLICACIÓN Registrar .btn ink-reaction btn- raised btn-info <button class="btn ink-reaction btn-raised btn-info"> <span class="glyphicon glyphicon-log-out"></span> Registrar</button> Guardar . btn btn-primary ink- reaction btn-raised <button type="button" class="btn btn-primary ink- reaction btn-raised"><span class="glyphicon glyphicon- floppy-disk"></span>Guardar</button> Cancelar . btn btn-default ink- reaction btn-raised <button type="button" class="btn btn-default ink- reaction btn-raised"><span class="glyphicon glyphicon- floppy-remove"></span> Cancelar</button> La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  13. 13. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 13/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Editor de Texto Los editores de texto son de gran ayuda al momento de registrar un gran volumen de párrafos, ya que permiten gestionar la información introducida de manera eficiente. El editor de texto a utilizar se encuentra definido en la Tabla 6.  (Ver  Figura  N.º 9) Tabla 6. Editor de texto NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Estándar (Standar) .form-control control-12-rows" <div class="card-body"><textarea id="ckeditor" class="form-control control-12-rows" placeholder="Coloque el texto"> </textarea></div>  Figura  N.º 9 EDITOR DE TEXTO Tarjetas El tamaño de la tarjeta (Card) queda a disposición del desarrollador, su especificación se muestra en la   Tabla 7. Modelo de tarjeta estándar. (Ver  Figura  N.º 10) NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Tarjeta estándar(Card) . card <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Coloque el contenido en este La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  14. 14. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 14/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 lugar</h4></div></div> Figura  N.º 10 TARJETAS Pestañas o Fichas Las vistas por pestañas o comúnmente conocidas en programación como “Tabs” son un elemento muy útil de navegación. Consta de un conjunto de enlaces secuenciales de los cuales se desprende la información de manera ordenada y versátil. La Tabla 8 muestra su uso. Tabla 8. Modelo de pestaña NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Pestañas (Tabs) . nav nav-tabs <div class="card"><div class="card-head"> <ul class="nav nav-tabs" data-toggle="tabs"> <li class="active"><a href="#first1">Opción 1</a></li><li><a href="#second1">Opción 2</a></li></ul></div><!--end .card-head --><div class="card-body tab-content"><div class="tab-pane active"><p>Contenido 1</p></div><div class="tab-pane"><p> Contenido 2</p></div></d Acordeón Se utilizará el modelo “Cards” de acordeón contenido en el material admin ya suministrado. (Ver   Figura  N.º 11) La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  15. 15. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 15/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Figura  N.º 11 ACORDEÓN Wizard Se utilizará el modelo “Form wizard” contenido en el material admin ya suministrado. (Ver  Figura   N.º 12) Figura  N.º 12  Wizard La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  16. 16. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 16/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Iconos Se utilizará la gama de iconos contenidos en el marco de trabajo ya suministrado. Los iconos a utilizar deben estar relacionados con la acción a realizar. ✔ Los iconos de los botones deben estar situados del lado izquierdo.  Se establece que al situar el mouse encima del botón, se indique la acción que realiza el mismo. ACCIÓN MODELO CLASE APLICACIÓN Editar . btn btn-default ink- reaction btn-primary <button type="button" class="btn btn-default ink- reaction btn- raised"><span class="fa fa-edit"></span> Cancelar</button> Eliminar . btn ink-reaction btn- raised btn-xs btn-danger <button class="btn ink- reaction btn-raised btn-xs btn-primary" data- backdrop="static"><i class="md md-delete" style="color: #ffffff;"></i></button> Ver o Consultar .btn ink-reaction btn-raised btn-xs btn-warning <button class="btn ink- reaction btn-raised btn-xs btn-danger"><i class="md md-remove-red-eye" style="color: #ffffff;"></i></button> Anular . btn ink-reaction btn- raised btn-xs btn-danger <button class="btn ink- reaction btn-raised btn-xs btn-danger"><i class="md md-not-interested" style="color: #ffffff;"></i></button> Imprimir . btn ink-reaction btn- raised btn-xs btn-info <button class="btn ink- reaction btn-raised btn-xs btn-danger"><i class="md md-print" style="color: #ffffff;"></i></button> La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  17. 17. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 17/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 ACCIÓN MODELO CLASE APLICACIÓN Cerrar . btn ink-reaction btn- raised btn-xs btn-danger <button class="btn ink- reaction btn-raised btn-xs btn-danger"><i class="md md-close” style="color: #ffffff;"></i></button>   A continuación se muestran algunos de los iconos contenidos. A continuación se establece para todos los módulos los iconos para  Procesos, Reportes y Maestros: El Icono para Procesos será el siguiente: La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  18. 18. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 18/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 El Icono para Reportes será el  siguiente: El Icono para Maestro será el  siguiente: Gráficos Los gráficos permiten representar estadísticas y diversos estatus. Se obtuvo una recopilación de  gráficos a utilizar los cuales serán indicados a continuación. Tabla 10. Gráfico interactivo  NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Interactive linechart .flot height-6 <div class="card"><div class="card- body"> <div id="visitor-chart" class="flot height-6" data-title="Site visits" data- color="#9C27B0,#0aa89e"></div> </div><!--end .card-body --> </div> La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  19. 19. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 19/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Figura N.º 13 GRÁFICO INTERACTIVO Tabla 11. Gráfico en tiempo real  NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Gráfico en Tiempo real (Realtime chart) .flot height-6 <div class="card"><div class="card-body"> <div id="realtime-chart" class="flot height-6" data- title="Site visits" data-color="#2196F3"></div> </div><!--end .card-body --> </div><!--end .card --> Figura N.º 14 GRÁFICO EN TIEMPO REAL La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.
  20. 20. SISTEMA INTEGRAL ADMINISTRATIVO DE CONTRALORIAS DE ESTADO (SIACE) Página Elaboración 20/20 10/08/2015 NORMAS GENERALES DE DISEÑO DE INTERFAZ Versión 1.0 Actualización 24/11/2016 Tabla 12. Gráfico de barras agrupadas  NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN Gráfico de barras agrupadas (Grouped bar chart) .height-7 <div class="card"> <div class="card-body"> <div id="morris-bar-graph" class="height-7" data- colors="#9C27B0,#2196F3,#0aa89e"></div></div> <!--end .card-body --> </div><!--end .card → Figura N.º 15 GRÁFICO DE BARRAS AGRUPADAS Nota: Los elementos indicados anteriormente se encuentran en el paquete Material Admin, donde se  puede observar su funcionamiento. La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas. ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.

×