Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero
M AN UAL DE
Nomina
EXPERIENCIA
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero GENERALES
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Color
Cerrar Sesion
Colores Principales
Parametros
#CC0000 #DF4660
Fuente
Cerrar Sesion
Fuente Principal
Gestion
Comercial
Compras
Roboto Principal
Fuente o Tipografa Web se
refiere al tipo de letra usada
Grosor en la World Wide Web.
Cuando fue creado HTML,
Inventarios
the quick brown fox Thin
tanto la fuente tipogrfica y
como el estilo venan
determinados
Tesoreria
the quick brown fox Light
exclusivamente por las
preferencias del navegador
Web utilizado.
Financiero
the quick brown fox Regular
Parametros
the quick brown fox Bold
Acciones
Recientes
the quick brown fox Light Italic
Titulos
Cerrar Sesion
Ttulo H1
THE QUICK BROWN FOX JUMPS OVER THE LAZY Frases que denotan o
Gestion
Comercial Tamao: 25px Espaciado: -2px Caps: Mayusculas
agrupan cierto tipo de
Color:#1A264D Grosor: Thin Fuente: Poiret One contenido para el usuario.
Compras
Ttulo H2
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
Inventarios
Tamao: 14px Espaciado: 2px Caps: Mayusculas
Color: #407EC9 Grosor: Bold
Tesoreria
Ttulo H3
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
Financiero
Ttulo H4
Parametros
Aire
Cerrar Sesion
Titulo H2
LOREM IPSUM DOLOR SIT AMET,
El aire es el espacio que
Gestion
20px
Comercial rodea a cada uno de los
grficos en una
composicin y es tan
Compras Prrafo importante como los otros
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh factores: la mancha, el
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim color, los tipos, las texturas,
Inventarios veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea el tamao, la direccin, el
peso, etc.
20px
Tesoreria
Tabs
Financiero
TAB 1 TAB 2 TAB 3 TAB 4 TAB 5 TAB 6
30px
Nomina
Parametros Tabla
CODIGO NOMBRE ACTIVO OPCIONES
Aire
Cerrar Sesion
Espaciado entre campos
Codigo Regimen Nombre Regimen Cupo Credito
Gestion
Comercial 35px 30px
Plazo de pago Maximo saldo cartera Impuesto adicional
Compras 35px
Inventarios
Nomina
40px
Botones
Cerrar Sesion
Tipos y Colores de Botones
Nomina
CANCELAR
16px 16px
Acciones
Recientes
Iconos
Cerrar Sesion
Iconos
Los iconos nos permiten representar visualmente acciones o elementos dentro de una
Un icono es un pictograma
Gestion
aplicacin web. Estos pueden ser flechas de movimientos, canecas para representar
Comercial que es utilizado para
que se eliminara algn registro o simplemente para destacar un campo de un
representar archivos,
formulario que ser un eMail.
carpetas, programas,
Compras acciones, elementos, etc.
Inventarios
Tesoreria
Financiero
Nomina
Parametros
Apoyados con los iconos que nos presenta Fontawesome, tenemos un kit de mas de
Acciones
600+ iconos listos para usarse.
Recientes
http://fontawesome.io/
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Tablas
Cerrar Sesion
Tablas
NOMBRE TITULO CANTIDAD TIPO VER OPCIONES Una tabla no es otra cosa
Gestion
Comercial ms que un medio de
1 NIT NIT 123.456.789 Caracter
organizar datos en filas y
2 Tercero Tercero 123.456 Caracter columnas. Este concepto ha
Compras estado presente en nuestra
3 Docto_alterno Docto_Alterno 123.456 Caracter
sociedad por un largo
4 Estado Estado 123.456 Caracter perodo de tiempo y ha sido
Inventarios 5 Numero Numero 123 Caracter adoptado por HTML en sus
etapas iniciales, como una
6 Fecha Fecha 123.456 Fecha
forma de transmitir
7 Mercancia Mercancia 123.456 Numero informacin que, de otro
Tesoreria
modo, no sera comprendida
8 IVA IVA 1 Numero
tan fcilmente.
9 Mcia2 Mcia Grav 7% 4 Numero
Financiero
10 Mcia3 Mcia 16% 234 Numero
Tablas
Cerrar Sesion
Tablas
Gnero: Male
Idioma: Portiguese
Financiero Profesin: Accountant IV
Nomina
- Las tablas con mas de 7 columnas, tendran un icono de visualizar mas detalles, en
donde se pondrn observar todos las otras columnas en forma de listado. Pj: Fila 1 y
Fila 4.
Parametros
- Las filas que contienen el icono son aquellas que tienen detalles adicionales a
consultar,
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Alertas
Cerrar Sesion
Alertas de Informacin
Financiero
Este es un mensaje de advertencia
Nomina
GUARDAR CAMBIOS X
Acciones
Recientes
Haz realizado modificacion es a la informacion del clien te,
deseas guardar los cambio s?
SI NO
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Grid
Cerrar Sesion
Tesoreria
Financiero
.col_xs_6 .col_xs_6
Parametros
Acciones
.col_xs_12
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Forms
Cerrar Sesion
Campos de Texto
Cdigo* Nombre*
Un formulario web dentro de
Gestion
72875281 Alvaro Apellidos
Comercial una pgina web permite al
usuario introducir datos los
cuales son enviados a un
servidor para ser
Compras
Seleccin Mltiple procesados. Los formularios
Agente retenedor Retenedor de ICA Excento de IVA
web se parecen a los
Inventarios
formularios de papel porque
los internautas llenan dichos
formularios usando casillas
Seleccin nica de seleccin, botones de
Tesoreria
opcin, o campos de texto.
Entra Sale Ambas cosas
Financiero
Pais A
Parametros
Pais B
Pais C
Acciones
Recientes Pais D
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Form
Cerrar Sesion
Campos Obligatorios
Cdigo* Nombre*
Los checkbox y los switches
Gestion
72875281 Alvaro Apellidos*
Comercial son elementos muy
Este campo es obligatorio
parecidos en su funcin,
con la grande diferencia en
que los switches solo deben
Compras
Campos con ayudas de llenado de ser usados en el
momento en que al usarlos
Cedula* eMail
Inventarios
estos deben de generar una
722 Alvaro@araujo.com Fecha de Nacimiento accin inmediata.
3/9 usuario@email.com DD-MM-AAAA
Haciendo una analoga,
Tesoreria
podemos decir que al
Switches encender un bombillo con
un switch, esperamos que el
Financiero
Switch Activo Switch no activo inhabilitado bombillo se encienda
inmediatamente, si esto no
Switch no activo Switch activo inhabilitado sucede pensamos que algo
Nomina
no esta bien.
Seleccin de busqueda en un campo de referencia de un maestro La gran pregunta para saber
Parametros
cuando usas un switch es:
Pais Deparmento Ciudad Al usar el switch me va a
generar una respuesta
Pais A automtica, si o no? Si la
Acciones
Recientes
Pais B respuesta es No, debemos
usar siempre un checkbox, y
Pais C
si por el contrario es Si,
podemos usar el switch.
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Estados
Cerrar Sesion
Campos Obligatorios
+ Cdigo* Nombre*
El aplicativo debe de
Gestion
72875281 Alvaro Apellidos*
Comercial reconocer que permisos
Este campo es obligatorio
tiene el usuario para realizar
ciertas acciones, y
Compras dependiendo del perfil, se le
Municipio eMail habilitarn los iconos para
722 Alvaro@araujo.com Fecha de Nacimiento poder agregar nuevos tems.
Inventarios
usuario@email.com DD-MM-AAAA
As mismo, los iconos de
accin en los campos, solo
Vemos claramente que el campo Cdigo es donde estoy actualmente,
deben de ser mostrados
Tesoreria
cuando se este en el input,
tenemos el permiso para poder crear un nuevo cdigo con el icono
sino estos no deberan ser
as mismo, tenemos el campo Municipio, el cual tambin podramos
mostrados.
Financiero
crear un nuevo tem, no me muestra el botn, ya que este solo se
Ver imagen.
activa cuando hago foco sobre el.
Nomina
Parametros
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero DRILLDOWN
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Drilldown
Cerrar Sesion
Navegacin del aplicativo.
Haremos un ejemplo basico con 4 saltos de pantalla en donde el usuario requiere
buscar informacion adicional para completar el formulario. A diferencia de la version
Gestion
Comercial desktop de ADN, la version
web tendr una navegacin
natural al estilo web, en
Paso 1: Creacin de Cliente donde cada una de las
Compras
ventanas en las que se va a
navegar y detallar la
Inventarios
informacin se ir abriendo
dentro de la misma ventana.
El breadcrumb o
miga de pan ser quien
Tesoreria
muestre al usuario el
camino que ha tomado para
llegar a donde
Financiero
est, permitiendo en todo
momento volver a
cualquier paso dado
Nomina
anteriormente.
Parametros
Acciones
Recientes
Munic ipio 1
Munic ipio 2
Munic ipio 3
CREAR MUNICIPIO
Baranoa A
Am a z on as
An t i oq ui a CANCELAR
CAN CEL AR G UARD AR
Ar a uc a
CREAR DEPARTAMENTO
Atlantico Colomb
C o lo m bi a
CANCELAR
CAN CEL AR G UARD AR
CREAR MUNICIPIO
Baranoa Atlan
At l a nt i co CANCELAR
CAN CEL AR G UARD AR
CANCELAR
CAN CEL AR G UARD AR
Munic ipio 1
Munic ipio 2
Ba ranoa
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero SECCIONES
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero LOGIN
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Puedes continuar para terminar la
Empresa carrera y las piernas te dolern por
Inventarios
Abacol
Cambiar Empresa
una semana o puedes renunciar y
Usuario
tu mente te doler por toda la vida
Tesoreria
- Mark Allen -
GUARDAR CLIENTE
Financiero Password
Olvide mi contrasea
Nomina
INICIAR SESION
Parametros
Acciones
Recientes
Gestion
Comercial
Compras
Puedes continuar para terminar la
carrera y las piernas te dolern por
Inventarios
Empresa
una semana o puedes renunciar y
Usuario
tu mente te doler por toda la vida
Tesoreria
- Mark Allen -
GUARDAR CLIENTE
Financiero Password
Olvide mi contrasea
Nomina
INICIAR SESION
Parametros
Acciones
Recientes
Gestion
Comercial
Compras
Inventarios
Tesoreria
HEADER
Financiero
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Partidas
Cerrar Sesion
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 INFORMACION DE CLIENTE
Gestion
Gestion
Comercial
INVENTARIO
Comercial Volver a [Nombre de Pagina anterior] 1 de 123456
Documentos Procesos
TITULO DE PAGINA
Aartidas Presupuestales y Partidas Presupuestales y
Compras Adiciones
Adiciones
Compras
Aportunidades Comerciales
Oportunidades Comerciales
Inventarios Bacturacion a Clientes
Facturacion a Clientes
Inventarios
Al hacer clic sobre el Item del
Cacturas de Contado
Facturas de Contado
Fedidos
men, este despliega todas
Pedidos
Tesoreria
Tesoreria
las opciones encontradas,
Gartidas Presupuestales y
Adiciones
Gestion
segmentadas por categora o
Comercial
Mportunidades Comerciales
Financiero
Financiero
mdulo. Informes
Macturacion a Clientes
Partidas Presupuestales y
Oacturas de Contado
Adiciones
Nomina
Nomina
Pedidos
Oportunidades Comerciales
Partidas Presupuestales y Facturacion a Clientes
Adiciones
Parametros
Facturas de Contado
Parametros
Qportunidades Comerciales
Pedidos
Racturacion a Clientes
Acciones
Acciones
Recientes Sacturas de Contado
Recientes
Tedidos
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Partidas
Cerrar Sesion
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 INFORMACION DE CLIENTE
Gestion
Gestion
RESULTADOS
Comercial
Gestion
Comercial
Compras
Inventarios
Tesoreria
MENU STICKY
Financiero
Nomina
Parametros
Acciones
Recientes
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 E liaINFORMACION
s O r o z c o - A b aDE
c oCLIENTE
l
Buscar por palabra Clave.
Cerrar Sesion
Volver a [Nombre de Pagina anterior] 1 de 123456
Tesoreria
Financiero
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
FORMULARIOS
Financiero
Nomina
Parametros
Acciones
Recientes
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 INFORMACION DE CLIENTE
Gestion
Comercial Volver a [Nombre de Pagina anterior] 1 de 123456
Compras
FORMULARIOS
Parametros
SUBGRUPO - SELECCIN MULTIPLE
Consecutivo Automatico
Codigo Nombre
busquedas, sern
indentificados con un
eMail Autoretenedor Declarante Excento IVA
icono, y este debe
redirigir a la pagina de
Retenedor de ICA Excento CREE Presento RUT
consulta.
Observaciones
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 INFORMACION DE CLIENTE
Gestion
Comercial Volver a [Nombre de Pagina anterior] 1 de 123456
Compras
FORMULARIOS
INFORMACIN GENERAL
Inventarios
.col_xs_9 .col_xs_3
Nomina
.col_xs_12
Parametros
Acciones
Recientes
.col_xs_6 .col_xs_6
.col_xs_3 .col_xs_3
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
TERCEROS DETALLE DE ALVARO ARAUJO REGIMEN CREAR REGIMEN VENTANA 5 VENTANA 6 VENTANA 7 INFORMACION DE CLIENTE
Gestion
Comercial Volver a [Nombre de Pagina anterior] 1 de 123456
Compras
FORMULARIOS
INFORMACIN GENERAL
Inventarios En los campos de
Cdigo* Municipio
seleccion multiple, se
12345678 Munici
Tesoreria
deben filtrar los
Municipio 1 - Departamento 1 resultados a medida que
Fecha Municipio 2 - Departamento 1 se escribe.
Financiero
Municipio 3 - Departamento 1
Municipio 1 - Departamento 2
Nomina Municipio 2 - Departamento 2
Parametros
E lia s O r o z c o - A b a c o l
Buscar por palabra Clave.
Cerrar Sesion
Gestion
Comercial
Compras
Inventarios
Tesoreria
Financiero
Nomina
Parametros
Acciones
Recientes