Manual de implementación

Guía de diseño de la interfaz vDiseño:
Manual de implementación
Guía de diseño de la interfaz vDiseño:
Manual de implementación
Guía de diseño de la interfaz vDiseño: Manual de implementación
1. Objetivo
1.1 Expectativas
1.2 Recomendaciones Generales
1.3 Esquema: Bloques de la interfaz
1.4 Autoexec
2. Implementación
2.1 Instalación
2.2 Organización de vDiseño
2.3 Arbolado de opciones
2.4 Adaptación de vDiseño a tu aplicación
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
1. Objetivo
El objetivo de este documento es establecer recomendaciones para el desarrollo, con Velneo V7, de aplicaciones con
un interfaz sencillo y agradable.
1.1 Expectativas
La siguiente lista muestra las expectativas que se generaron y aplicaron para la creación de la
presente guía de diseño.
●
●
●
●
●
●
●
●
●
●
El programador dispondrá de recomendaciones de trabajo claras para el diseño de la interfaz de sus
aplicaciones.
Las recomendaciones tratan de conseguir una interfaz homogénea en el ecosistema de Open Apps.
La interfaz de las aplicaciones desarrolladas con Velneo V7 debe ser sencilla y agradable de usar.
La guía está diseñada para conseguir la mejor experiencia del usuario final.
La guía está diseñada para conseguir los mejores resultados en unas resoluciones y tamaños de pantalla
determinados.
Con esta guía los desarrolladores podrán seguir unos patrones unificados de diseño en el desarrollo de la
interfaz de sus Open Apps.
La guía facilita la integración de aplicaciones desarrolladas por diferentes empresas.
La guía se diseña para que sea fácil de entender y aplicar.
En el catálogo de Open Apps existirán ejemplos de aplicaciones desarrolladas aplicando esta guía.
Se crearán Open Apps con recursos que servirán como plantilla para facilitar la aplicación de la guía al
interfaz de las aplicaciones en desarrollo.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
1.2 Recomendaciones Generales
A continuación se detallan las recomendaciones a nivel general que se aplicarán a todos los objetos y controles de la
aplicación.
●
Fuentes de sistema: Se usarán en todos los controles y objetos las fuentes de sistema, por defecto. Esto
ayuda en la transición del trabajo multiplataforma. El único objeto en el que no se utilizará, por defecto, fuente
de sistema en sus controles es en el informe donde se utilizará la fuente Arial. En el siguiente vídeo David
Guitiérrez muestra la funcionalidad de fuentes de sistema y da unas recomendaciones claras y precisas de
como utilizarlas para facilitar el uso de las aplicaciones en cualquier plataforma. (http://www.youtube.com/
watch?v=y9fbK2GHLeA)
●
Usar TAB por defecto: Se recomienda que las aplicaciones por defecto usen la tecla TAB para avanzar al
siguiente control. Esto no excluye que en formularios específicos se use otra tecla para el avance de control
que ayude en su propósito.
●
Limitar el uso de CSS: Las CSS deben aplicarse de forma concreta para situaciones controladas. El abuso
en el uso de las mismas pone en riesgo la estabilidad de la aplicación.
●
Dimensión controles: En la edición de formularios se utilizará la cuadrícula, siempre que sea posible. De
esta forma los controles tendrán posiciones y dimensiones múltiplos de 10. De esta forma es más sencillo el
mantenimiento de la aplicación y la edición de los formularios. En ejecución las posiciones y dimensiones se
verán afectadas por la aplicación de los layouts.
●
Icono de las propiedades de marco, formularios y menús: El número, tamaño y colores de las imágenes
influyen negativamente en el peso de las aplicaciones tanto a la hora de guardar los proyectos en desarrollo
como en la descarga de las aplicaciones en ejecución. Se recomienda el uso de iconos de un tamaño de
16x16. Para los iconos usados en el marco o formularios se utilizarán iconos de un tamaño de 32x32 ya que
además de verse en la esquina superior izquierda del objeto también son visibles en toolbars o ventanas del
sistema operativo como la de cambio de aplicación.
●
Librería de iconos: Esta guía ha sido desarrollada utilizando la librería de iconos (Silk de famfamfam ) Para
que el interfaz sea homogéneo se recomienda el uso de este misma librería para implementar los iconos
propios de la aplicación.
●
Resolución: Esta guía está desarrollada para una resolución mínima recomendada de 1024*768.
●
Tamaño de pantalla: Esta guía está desarrollada para tamaños de pantalla (analizar relaciones de pantalla
4/3 y 16/9)
●
Estilo por defecto: Se recomienda el estilo Plastique por defecto.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
1.3 Esquema: Bloques de la interfaz
En el siguiente esquema se pueden apreciar los 4 bloques que configuran la interfaz principal de
las aplicaciones.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
1.4 Autoexec
Descripción
El AUTOEXEC es el marco principal de la aplicación que engloba en su interior a todos los
bloques definidos en esta guía.
Propiedades:
Identificador
AUTOEXEC
Estilos
Comentarios
Marco de arranque de la aplicación
Icono
APP_ICO de 32x32 identificativo de la
aplicación
Título
"" + getProjectName() + " " +
getProjectVersion()
Formulario principal
INI@proyectoapp
Modo arranque
TAB
Menu Principal:
PRN (Barra de menu)@nombreapp
Propiedades de los subobjetos docks del marco:
Identificador
MEN_APP
Nombre
Principal
Estilos
Comentarios:
Dock Principal de navegación que se sitúa,
por defecto, a la izquierda del marco.
Objeto:
MEN_APP@proyectoapp
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
Posición:
izquierda
Modo de Aparcar:
incluir
Condición de visible inicial:
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
2. Implementación
2.1 Instalación
Debes comenzar localizando la solución vDiseño (http://velneo.es/vdiseno/) en el catálogo de
Open Apps de Velneo.
Una vez que has localizado la ficha puedes descargar la instalación de vDiseño e instalarla en tu
Velneo vServer y heredarlo desde tu proyecto de aplicación.
Si utilizas vBase desde una versión que no hereda la solución vDiseño debes heredarlo desde el
proyecto de aplicación Usuarios de vBase que se encuentra en el nivel más bajo.
Si heredas una versión actual de vBase ya tendrás heredado el proyecto de aplicación
vDiseño.
2.2 Organización de vDiseño
Dentro del proyecto de aplicación vDiseño hay dos carpetas:
Interfaz (Copiar): Conjunto de objetos que debes copiar en tu proyecto para poder modificarlos
y configurarlos aplicando vDiseño a tu solución.
Heredable: Conjunto de objetos que usarás en las diferentes soluciones mediante herencia.
Estos objetos no deben modificarse ni añadirse otros nuevos ya que, al actualizar nuevas
versiones de vDiseño se perderían todos los cambios y objetos añadidos a esta solución.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
2.3 Arbolado de opciones
Para aplicar vDiseño en tu aplicación lo primero que tienes que hacer es agrupar las opciones
del menú general de tu aplicación en un máximo de 4 grupos principales y dentro de cada uno
lanzar un máximo de 4 acciones.
Es importante leer esta guía como un conjunto de sugerencias. Si lo consideras necesario
puedes añadir más de 4 opciones de menú principal y más de 4 opciones en el submenú de
aplicación, aunque nuestra recomendación es que deberías tratar de evitarlo.
Recomendaciones:
●
●
●
●
●
●
●
●
Antes de aplicar estos criterios en la aplicación completa la tabla adjunta.
Utiliza terminología conocida por el usuario de la aplicación.
Mejor una palabra que dos para las opciones.
Utiliza iconos identificativos y único para cada opción. Si es posible utiliza iconos de la
librería recomendada en esta guía.
Cambia los nombres de los objetos, no los identificadores.
Crea un acción por cada opción que se llame desde el menú de aplicación.
Reflexiona bien los nombres y agrupaciones antes de empezar a desarrollar.
Debes rellenar las columnas Tu aplicación con los valores a sustituir de la plantilla
vDiseño.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
vDiseño:
menú general
vDiseño
submenús
Tu aplicación: menú
general
Tu aplicación:
submenús
Icono
Menú aplicación 1
Opción 1
Opción 2
Opción 3
Opción 4
Menú aplicación 2
Opción 1
Opción 2
Opción 3
Opción 4
Menú aplicación 3
Opción 1
Opción 2
Opción 3
Opción 4
Menú aplicación 4
Opción 1
Opción 2
Opción 3
Opción 4
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
2.4 Adaptación de vDiseño a tu aplicación
Para adaptar tu aplicación a vDiseño debes realizar los siguientes pasos:
●
Copiar la carpeta “Interfaz (Copiar)” del proyecto vDiseño a tu proyecto de aplicación.
○ Si al copiar la carpeta ya existe el objeto marco AUTOEXEC el copiado recibirá el
nombre AUTOEXEC1. Deberán fundirse ambos objetos quedando uno sólo.
●
En la carpeta Bloque uno: Dock lateral:
○ En el formulario MEN_APP en los subcontroles de la caja de formulario
MEN_APP_CAJ, cambiar la propiedad nombre en los 4 menú de aplicación 1, 2, 3
y 4 por los escritos en la tabla superior.
○ En el menú BTN_ALT debes incluir las acciones de uso más común en tu
aplicación para crear nuevos registros de forma directa.
○ Cada acción deberá tener una tecla aceleradora específica.
○ Recomendamos no incluir más de 5 opciones en este menú crear nuevo.
●
En la carpeta Bloque dos: Menú de aplicación:
○ Cambiar la propiedad nombre en las 4 opciones incluidas en cada formulario
MEN_APP_1, 2, 3 y 4 (botones).
○ Asignar la acción correspondiente a cada opción de menú.
○ En las opciones no utilizadas poner la propiedad condición de visible a 0.
○ Ocultar las líneas de separación que no sean necesarias, visible a 0.
○ Si no se usa, eliminar la acción MEN_APP_OPC que se usa sólo para evitar
errores en los inspectores.
●
En la carpeta Bloque tres: Vista central:
○ Duplicar los formularios plantilla FRM_PLA y FRM_MAN_PLA para crear los
formularios a mostrar al ejecutar las opciones del menú general de la aplicación y
los mantenimientos de tablas, respectivamente.
○ Al terminar, como no se usan, eliminar estos formularios plantilla.
●
En la carpeta Dibujos de la aplicación:
○ Cambiar el icono APP_ICO por el representativo de la aplicación. Se recomienda
utilizar un icono de, como mínimo, 32x32px y máximo 128x128 px.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª
Guía de diseño de la interfaz vDiseño:
Manual de implementación
○
○
Cambiar el dibujo COL_APP por el color representativo de la aplicación. Este
icono se usa en fondos y líneas de separación. Utilizar un tamaño de 10x10 px.
Cambiar el dibujo LOGO_APP por el logotipo identificativo de la aplicación o de la
empresa de desarrollo. Tener cuidado con el tamaño y peso de este dibujo.
Hay que tener en cuenta que los menús PRN (Principal), PRN_ACH (Archivo), PRN_CFG
(Configuración), PRN_PAR (Parámetros), PRN_UTI ( Utilidades) y PRN_AYU (Ayuda) tienen
puntos de inserción que permiten añadir nuevas opciones a cada uno de ellos mediante el uso
de la herencia inversa. Se han incluido, en algunos casos, múltiples puntos de insercción (hasta
4) con el objetivo de que el desarrollador pueda fijar el orden las opciones insertadas. Hay que
tener en cuenta que el orden de las insercciones sobre un mismo punto de inserción no es
controlable por el programador.
Pol. Ind. A Granxa, Edificio vCenter
Rúa D, esquina paralela 3
36400 Porriño (Pontevedra)
España
Telf. (+34) 902 36 63 82
[email protected]
velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1ª