PASO 3

Escuela de Ciencias Básicas, Tecnología e Ingeniería

301309A_614 – Diseño de Sistemas
Paso 3 – Diseño orientado a objetos y componentes

Entregado por:

Gustavo Adolfo Ramírez Olave – Cod: 14.797.046

Grupo colaborativo: 301309_32

Tutor: Moisés de Jesús Rodríguez Bolaño

Universidad Nacional Abierta y a Distancia

UNAD

Colombia

Noviembre de 2019
 PASO 3 2

INTRODUCCION

Este trabajo se realiza con el fin de aplicar los conceptos de desarrollo de patrones por parte del

estudiante, además de crear interfaces y sus respectivas propiedades.

Se debe crear un modelo a través de la arquitectura utilizando los componentes de los sistemas

de información. Aplicando especificaciones formales y funcionales del sistema.

 PASO 3 3

OBJECTIVO GENERAL

Desarrollar el diseño arquitectónico para un sistema de información

OBJETIVOS ESPECÍFICOS

Diseño de interfaz de usuario

Diseño basado en patrones

Diseño de webapp
 PASO 3 4

Aportes John Arias – Área de producción

Diagrama de tareas del área seleccionada (Producción)

 PASO 3 5

Diseño de las interfaces del área seleccionada (Producción)

index.

Registro.
PASO 3 6

IniciarSesion.

ServiciosCliente.
PASO 3 7

ServiciosEmpleado.

ServiciosAdmin.
 PASO 3 8

Diseño de patrones arquitectónicos del área seleccionada (Producción)

Nombre del
index
elemento

Interfaz inicial del sistema. Contiene información sobre la empresa y

Descripción
formularios de inicio de sesión y registro.

Contenedor
- Fondo: Gris, #8C8C8C
- Margen: 25 pixeles

Logotipo
- Logotipo de la empresa

Encabezado
- Tipo de letra: Comic Sans MS.
- Tamaño: 36 puntos
Detalles
- Color: Azul oscuro

Cuerpo
- Título: Times New Roman, 22 puntos, negrilla
- Subtitulo: Times New Roman, 16 puntos, negrilla
- Párrafo: Times New Roman, 12 puntos

Pie de página
- Comic Sans MS, 14 puntos

Enlaces:
Elementos de
- Logotipo: Enlace a interfaz index.
navegación
 PASO 3 9

Botones:
- Regístrate: Enlace a interfaz Registro
- Iniciar sesión: Enlace a interfaz IniciarSesion

Nombre del
Registro
elemento

Descripción Formulario de registro de usuario.

Contenedor
- Fondo: Gris, #8C8C8C
- Margen: 25 pixeles

Logotipo
- Logotipo de la empresa

Encabezado
- Tipo de letra: Comic Sans MS.
Detalles - Tamaño: 36 puntos
- Color: Azul oscuro

Formulario
- Alineación: Centrar
- Tipo de letra: Comic Sans MS.
- Tamaño: 16 puntos
- Color: Negro

Pie de página
 PASO 3 10

- Comic Sans MS, 14 puntos

Enlaces:
- Logotipo: Enlace a interfaz index.
Elementos de
navegación Botones:
- Enviar: Envía información de registro a la base de datos. crea nuevo
usuario

Nombre del
IniciarSesion
elemento

Descripción Formulario de inicio de sesión.

Contenedor
- Fondo: Gris, #8C8C8C
- Margen: 25 pixeles

Logotipo
- Logotipo de la empresa

Detalles
Encabezado
- Tipo de letra: Comic Sans MS.
- Tamaño: 36 puntos
- Color: Azul oscuro

Formulario
- Alineación: Centrar
 PASO 3 11

- Tipo de letra: Comic Sans MS.

- Tamaño: 16 puntos
- Color: Negro

Pie de página
- Comic Sans MS, 14 puntos
Enlaces:
- Logotipo: Enlace a interfaz index
Elementos de - Botón Regístrate: Enlace a interfaz Registro
navegación
Botones:
- Ingresar: Validación de datos e inicio de sesión

Nombre del
ServiciosCliente
elemento

Descripción Interfaz principal del usuario tipo cliente

Contenedor
- Fondo: Gris, #8C8C8C
- Margen: 25 pixeles

Logotipo
Detalles
- Logotipo de la empresa

Encabezado
- Tipo de letra: Comic Sans MS.
- Tamaño: 36 puntos
 PASO 3 12

- Color: Azul oscuro

Cuerpo
- Título: Times New Roman, 22 puntos, negrilla
- Subtitulo: Times New Roman, 16 puntos, negrilla
- Párrafo: Times New Roman, 12 puntos

Pie de página
- Comic Sans MS, 14 puntos
Enlaces:
- Logotipo: Enlace a interfaz index
Elementos de
navegación Botones/Imágenes con enlace:
- Consultar: Menú de consulta de productos de la empresa
- Contáctanos: Datos de contacto de la empresa

Nombre del
ServiciosEmpleado
elemento

Descripción Interfaz principal del usuario con permisos de empleado

Contenedor
- Fondo: Gris, #8C8C8C
- Margen: 25 pixeles
Detalles
Logotipo
- Logotipo de la empresa
 PASO 3 13

Encabezado
- Tipo de letra: Comic Sans MS.
- Tamaño: 36 puntos
- Color: Azul oscuro

Cuerpo
- Título: Times New Roman, 22 puntos, negrilla
- Subtitulo: Times New Roman, 16 puntos, negrilla
- Párrafo: Times New Roman, 12 puntos

Pie de página
- Comic Sans MS, 14 puntos
Enlaces:
- Logotipo: Enlace a interfaz index

Elementos de
Botones/Imágenes con enlace:
navegación
- Almacenamiento: Acceso a servicio de almacenamiento de la empresa
- Mantenimiento: Acceso a servicio de mantenimiento de la empresa
- Empaque: Acceso a servicio de empaque de la empresa

Nombre del
ServiciosAdmin
elemento

Descripción Interfaz principal del usuario con permisos de administrador

Contenedor
Detalles - Fondo: Gris, #8C8C8C
- Margen: 25 pixeles
 PASO 3 14

Logotipo
- Logotipo de la empresa

Encabezado
- Tipo de letra: Comic Sans MS.
- Tamaño: 36 puntos
- Color: Azul oscuro

Cuerpo
- Título: Times New Roman, 22 puntos, negrilla
- Subtitulo: Times New Roman, 16 puntos, negrilla
- Párrafo: Times New Roman, 12 puntos

Pie de página
- Comic Sans MS, 14 puntos
Enlaces:
- Logotipo: Enlace a interfaz index

Botones/Imágenes con enlace:

Elementos de - Almacenamiento: Acceso a servicio de almacenamiento de la empresa
navegación - Mantenimiento: Acceso a servicio de mantenimiento de la empresa
- Empaque: Acceso a servicio de empaque de la empresa
- Consultar: Menú de consulta de productos de la empresa
- Actualizar Datos: Acceso a menú de actualización de datos en los
servicios
 PASO 3 15

Diseño de hipermedios orientado a objetos del área seleccionada (Producción)

 PASO 3 16

Diagrama de componentes (Contabilidad) jehison torres

 PASO 3 17

2. Con base al punto anterior, realice el diseño de las interfaces de acuerdo a los
componentes donde se pueda dar solución a la tarea estableciendo una distribución
preliminar la información en la interfaz.
Diseño de contabilidad
 PASO 3 18

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

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

 PASO 3 19

Nombre
Ingreso al sistema
del elemento

Descripci Se comentan el inicio de sección, Ingresando el nombre de usuario para

ón ingresar al sistema y contraseña, si el usuario no existe se debe Registrar para ingresar.

Logotipo de la empresa color azul, letra times New Roman 14, parte superior

que ocurre en el encabezado.

Tipo de letra título: Times new roman 30 puntos

Detalles
Línea: gris horizontal parte superior

Tipo letra Etiquetas: Times new roman 18 puntos.

Imagen: Lado izquierdo abajo Operador

Botones: tipo Cambria 12 puntos, Recuadro color gris.

 PASO 3 20

Element Botones “registrar” y “Ingresar”

os de Registrar: da la opción si el Usuario al validar no existe.

navegación Ingresar: Valida el Usuario y Contraseña que Existen.

Nombre
Menú Principal de la empresa
del elemento

Se comentan los submenús con las diferentes funciones del

Descripci
departamento de contabilidad que se abren bajo cada una de las
ón
opciones de la barra del menú principal

Color Fondo de la pantalla: gris

Logotipo de la empresa color azul, letra times New Roman 14,

parte superior que ocurre en el encabezado.

de letra título: Times new roman 14 puntos mayúscula

Detalles
Línea: gris horizontal parte superior

Tipo letra Etiquetas del menu: Times new roman 14 puntos.

Figuras: iconos, parte superior de los recuadros 1 al 4.

Botones: tipo Times new roman 14 puntos, Recuadro color gris.

 PASO 3 21

Element
Botón “Salir”
os de
Salir: Sale del menú principal de la empresa.
navegación
 PASO 3 22

Nombre
Registro de Ingresos y ventas de la mercancía
del elemento

Descripci Se comenta el código del producto, el nombre del producto y sus cantidades,

ón mostrando los valores en el Libro de registro.

Color Fondo de la pantalla: gris

Logotipo de la empresa color azul, letra times New Roman 14, parte superior

que ocurre en el encabezado.

de letra título: Times new roman 14 puntos mayúscula

Detalles
Icono del menú : lado superior derecho

Línea: gris horizontal parte superior

Tipo letra del menu: Times new roman 14 puntos.

Libro de registro: distribución de cada punto del libro del registro color

blanco.
 PASO 3 23

Botones: tipo Times new roman 14 puntos, Recuadro color gris.

Botón “Registrar”, “Inventario”, y “salir”,

Element
Registrar: maneja el evento registrar en el libro de registro.
os de
Inventario: muestra el total con lo que se cuenta del producto en mención.
navegación
Salir: Sale del sistema.

+
 PASO 3 24

Nombre
Sistema integral y contable
del elemento

Se comenta un recuadro donde se contabiliza saldos de cuentas, registro de la

Descripci
actividad financiera, el resumen de la información y validan las deudas, junto a un
ón
recuadro para hacer el giro correspondiente a los bancos

Color Fondo de la pantalla: gris

Logotipo de la empresa color azul, letra times New Roman 14, parte superior

que ocurre en el encabezado.

Detalles de letra título: Times new roman 14 puntos mayúscula

Icono del menú : lado superior derecho

Línea: gris horizontal parte superior

Tipo letra del menú: Times new roman 14 puntos.

Botones: tipo Times new roman 14 puntos, Recuadro color gris.

Botón “Imprimir”, “Guardar”, y “salir”,

Element
Imprimir: maneja el evento de imprimir la informacion.
os de
Guardar: guarda la información generada.
navegación
Salir: Sale del sistema.
PASO 3 25
 PASO 3 26

Nombre
Coordinar apoyo presupuestal
del elemento

Descripci Se comenta un recuadro de submenús con la función de coordinar el apoyo

ón con cada una de las secciones de la empresa

Color Fondo de la pantalla: gris

Logotipo de la empresa color azul, letra times New Roman 14, parte superior

que ocurre en el encabezado.

de letra título: Times new roman 14 puntos mayúscula

Detalles Icono del menú : lado superior derecho

Iconos de la interfaz: 4 iconos centrados de distintos colores clasificando para

sección.

Línea: gris horizontal parte superior

Tipo letra del menú: Times new roman 14 puntos mayuscula.

Botones: tipo Times new roman 14 puntos, Recuadro color gris.

Element
Botón “salir”.
os de
Salir: Sale del sistema.
navegación
 PASO 3 27

Nombre
Elaborar Informe
del elemento

Se comenta el código de la dependencia, el nombre y fecha de elaboración,

Descripci
para Mostrar los Pasivo, Los Activos, Imprimir y salir mostrando los valores en la
ón
dataGrid.

Color Fondo de la pantalla: gris

Logotipo de la empresa color azul, letra times New Roman 14, parte superior

que ocurre en el encabezado.

de letra título: Times new roman 14 puntos mayúscula

Detalles
Icono del menú : lado superior derecho

datagrid: cuadro grande de color blanco, parte inferior centrado.

Línea: gris horizontal parte superior

Tipo letra del menú: Times new roman 14 puntos.

Botones: tipo Times new roman 14 puntos, Recuadro color gris.

 PASO 3 28

Botón “Pasivos”, “Activos”, “Imprimir”, y “Salir”

Element
Pasivos: donde se muestra todas las deudas.

os de Activos: donde se muestra con los bienes con los que cuenta la empresa.

navegación Imprimir: luego de consultar lo anterior.

Salir: sale del sistema

 PASO 3 29

CONCLUSIONES

Se realizó Diseño de interfaz de usuario, Diseño basado en patrones, Diseño de webapps

esto con el fin de comprender componentes de un sistema de información, partiendo de

especificaciones formales y funcionales

 PASO 3 30

REFERENCIAS

 Aproach (pág. 296, 340). Nueva Delhi: New Age International. Recuperado de:

http://bibliotecavirtual.unad.edu.co/login?url=http://search.ebscohost.com/login.aspx

?direct=true&db=nlebk&AN=316074&lang=es&site=eds-

live&ebv=EB&ppid=pp_296

 María Estela Raffino. De: Argentina. Para: Concepto de. Disponible en:

https://concepto.de/diagrama-de-flujo/. Recuperado de: https://concepto.de/diagrama-

de-flujo/#ixzz62TShRb6b

 Rodríguez, M. (2019). Act Colaborativa 2 - Diseño orientado a objetos y

componentes. Universidad Nacional Abierta y a Distancia - UNAD [Archivo de

video]. Recuperado de: https://youtu.be/P_iYJRdzwek

 Torres, E. (2019). Crear una ventana prototipo con Balsamiq. Universidad Nacional

Abierta y a Distancia – UNAD. [Archivo de video]. Recuperado de:

https://www.youtube.com/watch?v=GuDHv_wnKps