I

DISEÑO DE INTERFAZ DE USUARIO- PATRONES- HIPERMEDIOS

CRISTHIAN FRANCISCO PÉREZ PONCE

MAYO 2019

PRESENTADO A:
MOISÉS RODRÍGUEZ BOLAÑOS

Universidad Nacional Abierta y a Distancia

Escuela de Ciencias Básicas, Tecnología e Ingeniería – ECBTI
Programa de Ingeniería de Sistemas
Diseño de Sistemas
II

Tabla de Contenidos

Presentación Herramienta Web identidad Unadistas ..............Error! Bookmark not defined.

Respuesta a las preguntas sobre liderazgo. publicadas en el foro. ........ Error! Bookmark not
defined.
Bibliografía ...................................................................................Error! Bookmark not defined.
3

1. Realice el diseño de una interfaz donde se pueda dar solución a la tarea estableciendo una distribución preliminar la
información en la interfaz.
1.1. INTERFAZ INGRESAR A SISTEMAS
4

1.2. INTERFAZ MENU TALENTO HUMANO

5

1.3. INTERFAZ PAGO NOMINA

6

1.4. INTERFAZ PAGO TERCEROS

7

1.5. ADMINISTRAR PERSONAL

8

1.6. NOTIFICAR PERSONAL

9

1.7. GENERAR CERTIFICACIONES

3

2. Realizar el diseño de patrones arquitectónicos

INTERFAZ INGRESO AL SISTEMA DE TALENTO HUMANO

Nombre del elemento Autentificar Credenciales

Elemento flotante que se abre cuando presiona clic en el menú logín

Descripción
donde el usuario ingresa su usuario y contraseña

Ventana flotante, atenúa viewport de la página de inicio con color gris

ubicada en la parte izquierda de la pantalla, inmediatamente debajo
Detalles del menú login, con dos labels arial 12 y color negro con negrilla, 2
textbox para ingreso de usuario y contraseña, un boto para ingresar y
un link cuando el usuario olvida clave o nombre de usuario
Cuenta con un botón para ingresar que lleva a menú de Talento
Elementos de
Humano sin necesidad de recargar la página, un link que envía a una
navegación
ventana para actualizar usuario y contraseña

INTERFAZ MENU TALENTO HUMANO

Nombre del elemento INTERFAZ MENU TALENTO HUMANO

Ventana al módulo de Talento Humano, de la empresa Informatech

Descripción
Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Principal color negro bordes redondos de 900px x 120 px;
contiene al lado derecho logotipo, Letras blancas Arial H1, miga de
Detalles pan que orienta la ubicación del usuario en el sistema, 2 botones para
que indican la separación de las dependencias de talento humano,
tesoreria y personal, Botones de color gris, letra arial, 2 botones de
los servicios de tesorería color morado claro y letra arial color blanco,
y 3 botones para los servicios de personal.
Botón de pago de nómina envía a la página de nómina, botón pago a
terceros, envía a la página de pago a terceros, botón Administrar
Elementos de
personal envía a la pagina de administrar personal, botón Notificar
navegación
personal, envía a la página de notificar personal, botón Generar
Certificaciones envía a la página de generar certificaciones.
4

INTERFAZ PAGO NOMINA

Nombre del elemento INTERFAZ PAGO NOMINA

Página para gestionar el módulo de pago de nómina, de la empresa

Descripción
Informatech Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Secundario color negro bordes redondos de 900px x 90 px;
Detalles contiene Letras blancas Arial H1, miga de pan que orienta la
ubicación del usuario en el sistema, 4 enlaces con icono y hipervículo
que envían a las páginas de los servicios de pago de nómina, el de
configuración, Generar nómina, pagar nómina, reportes de nómina.
Vinculo de configuración envía a pagina de configuración de
Elementos de Nomina, Vinculo de Generar nomina envía a página de generar
navegación nómina, Vinculo de pagar nomina envía a pagina de pagar nomina,
reportes de nomina envía a pagina de reportes de nomina

INTERFAZ PAGO TERCEROS

Nombre del elemento INTERFAZ PAGO NOMINA

Página para gestionar el módulo de pago a terceros, de la empresa

Descripción
Informatech Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Secundario color negro bordes redondos de 900px x 90 px;
Detalles contiene Letras blancas Arial H1, miga de pan que orienta la
ubicación del usuario en el sistema, 4 enlaces con icono y hipervículo
que envían a las páginas de configuración, crear transacción,
transferir a terceros, reportes de pagos.
Vinculo de configuración envía a página de configuración de pago de
Elementos de terceros, Vinculo de crear transacción envía a crear transacción,
navegación Vinculo de transferir a terceros envía a página de transferir a terceros,
Vinculo de reportes de pagos envía a la página reportes de pagos

ADMINISTRAR PERSONAL
5

Nombre del elemento ADMINISTRAR PERSONAL

Página para gestionar el módulo de administrar personal, de la

Descripción
empresa Informatech Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Secundario color negro bordes redondos de 900px x 90 px;
Detalles contiene Letras blancas Arial H1, miga de pan que orienta la
ubicación del usuario en el sistema, 4 enlaces con icono y hipervículo
que envían a las páginas de los servicios de configuración, crear
personal, actualizar datos de personal, consultar historial.
Vinculo de configuración envía a página de configuración de
administración de personal, Vinculo de crear personal envía a la
Elementos de
página de crear personal, Vinculo de Actualizar datos de personal
navegación
envía a página de Actualizar datos de personal, Vinculo de consultar
historial de pagos envía a la página consultar historial

NOTIFICAR PERSONAL

Nombre del elemento NOTIFICAR PERSONAL

Página para gestionar el módulo de notificar personal, de la empresa

Descripción
Informatech Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Secundario color negro bordes redondos de 900px x 90 px;
contiene Letras blancas Arial H1, miga de pan que orienta la
Detalles
ubicación del usuario en el sistema, 4 enlaces con icono y hipervículo
que envían a las páginas de los servicios de configuración, crear
notificación, enviar notificación por email, enviar notificación a
móvil.
Vinculo de configuración envía a página de configuración de
notificación de personal, Vinculo de crear notificación envía a la
Elementos de
página de enviar notificación, Vinculo de enviar notificación por
navegación
email envía a página de notificar por email, Vinculo de notificación
a móvil envía a la página notificación a móvil
6

GENERAR CERTIFICACIONES

Nombre del elemento GENERAR CERTIFICACIONES

Página para gestionar el módulo de generar certificaciones, de la

Descripción
empresa Informatech Ltda.

Menú principal, los enlaces Inicio, Producción, Talento Humano,

Contabilidad, Mercadotecnia, Tecnología, Login, Cerrar Sección,
banner Secundario color negro bordes redondos de 900px x 90 px;
Detalles contiene Letras blancas Arial H1, miga de pan que orienta la
ubicación del usuario en el sistema, 4 enlaces con icono y hipervículo
que envían a las páginas de los servicios de configuración, generar
certificado, enviar certificado por email, imprimir certificado.
Vinculo de configuración envía a página de configuración de generar
certificado, Vinculo de crear certificado envía a la página de crear
Elementos de
certificado, Vinculo de enviar certificado por email envía a página de
navegación
enviar certificado por email, Vinculo de imprimir certificado envía a
la página imprimir certificado
3

3. Según la interface, realizar el diseño de hipermedias orientado a objetos.