DISEÑO DE LA ARQUITECTURA DEL SOFTWARE (DAS)

< Registro y control para detectar las necesidades en capacitación y/o formación de los
sujetos vinculados al área de alimentos y bebidas a nivel nacional de la gerencia de
capacitación y formación del Instituto Nacional de Turismo (INATUR). >

Versión 1.0

PROGRAMA NACIONAL DE FORMACIÓN EN INFORMÁTICA (PNFI)

Integrantes del Equipo:

Cédula de Identidad Apellidos y Nombres E-Mail

21.256.109 Delgado D. Yuri A. [email protected]
20.975.122 Ramírez C. Alexander J. [email protected]

Profesores de Ingeniería de Software y Proyecto Sociotecnológico:

Prof. Yoli Arrechedera
Prof. Jesús Reina
Sección: 01

ÍNDICE

Contenido Página
1. Introducción
1.1 Propósito del documento.
1.2 Definiciones, siglas y abreviaturas.
1.3 Diagrama de Casos de Uso
1.3.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico

2. Diagramas de Estructura

2.1 Diagrama de Clases

2.1.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico
2.2 Diagrama de Objetos
2.2.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.
2.3 Diagrama de Paquetes.
2.3.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.
2.4Diagrama de componentes.
2.4.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.
2.5 Diagrama de despliegue.
2.5.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos.
3. Diagramas de Comportamiento
3.1. Diagrama de Estado
 4.1.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos.
4. Diagrama de interacción.
4.1 Diagrama de Secuencia.
4.1.1. Describa la importancia del diagrama para el logro exitoso en el desarrollo
del proyecto socio tecnológico.
4.2 Diagrama de comunicación o colaboración.
4.2.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos.
5. Modelo Vista Controlador (MVC)
5.1.- Diagrama MVC
5.1.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos
6. Interfaz de Usuario
7. Reportes
1. Introducción.
Para la creación e implementación de un aplicativo web se debe seguir una serie de
procesos que conllevan a determinar los requerimientos y funcionalidades necesarias para
plasmar lo que se quiere lograr, es por ello que la parte más fundamental de este proceso es la
documentación del aplicativo que contendrá su estructura física, para ello existen variedades de
herramientas que permiten reflejar y detallar de manera muy práctica y grafica todas las partes de
este aplicativo, estas herramientas son utilizadas siguiendo una secuencia lógica y estructurada,
ya que de cada herramienta depende de otra, permitiendo establecer e identificar cada
especificación del sistema en cuanto al flujo, manejo, comunicación y almacenamiento de
información.
En este documento se podrá visualizar todas aquellas herramientas graficas que fueron
utilizadas para documentar y dibujar la estructura del Sistema Registro y control para detectar las
necesidades en capacitación y/o formación de los sujetos vinculados al área de alimentos y
bebidas a nivel nacional de la gerencia de capacitación y formación del Instituto Nacional de
Turismo (INATUR).

1.1 Propósito del Proyecto.

El presente documento tiene como propósito describir los diagramas de estructuras,
comportamiento, de iteración y el modelo-vista-controlador (MVC) de la fase de análisis y diseño
de la Ingeniería de Software.
Este documento proporciona una descripción comprensiva arquitectónica del Sistema,
usando un número finito de vistas para representar los distintos aspectos que se requieren de
manera de capturar y transportar las decisiones significativas que han sido hechas sobre el
sistema.

1.2. Definiciones, siglas y abreviaturas.

 INATUR: Instituto Nacional de Turismo.

 Diagrama: Es un dibujo geométrico muy utilizado en distintas áreas con el que se obtiene
la representación gráfica de una proposición, de la resolución de un problema y de las relaciones
entre las diferentes partes o elementos de un conjunto o sistema
 Clases: Es la unidad básica que encapsula toda la información de un Objeto. A través de
ella se puede modelar el entorno en estudio (una Casa, un Auto, una Cuenta Corriente, etc.).
 Objetos: Un objeto es un una secuencia de instrucciones escritas para realizar una tarea
específica que consta de un estado y de un comportamiento, que a su vez constan
respectivamente de datos almacenados y de tareas realizables durante el tiempo de ejecución. Un
objeto es una instancia de una clase.
 Paquete: Es la división en agrupaciones lógicas donde se muestran las dependencias entre esas
agrupaciones.
 Despliegue: Es aquella disposición física de los artefactos software en nodos.
 Estado: Es aquella ruta o camino que puede tomar un flujo de información luego de
ejecutarse cada proceso.
 MVC: Modelo-Vista-Controlador.
 Modelo: es aquella carpeta dentro del aplicativo donde se encuentran todos aquellos
documentos relacionados a las declaraciones de funciones que realizara el sistema utilizando la
base de datos, es decir, esta carpeta es quien interactúa con el flujo de información del sistema
con la base de datos.
 Vista: Es el nombre que se le da a la carpeta ubicada dentro del aplicativo web donde se
encuentran aquellos documentos de código que ejecutan las pantallas que visualizara y mantendrá
la interacción con el usuario.
 Controlador: como su nombre lo indica, es aquella carpeta que posee el aplicativo web
que se encarga de controlar el manejo de información ingresado en las pantallas o vistas y
enviarla a la base de datos según las funciones encontradas en el modelo, para así retornar con
una respuesta mostrada en una o varias vistas, en otras palabras es quien se encarga de tomar los
datos ingresados en las pantallas con la interacción con el usuario y enviar esos datos a la base de
datos interactuando con el modelo.
1.3 Diagrama de Casos de Uso
2. Diagramas de Estructura
2.1 Diagrama de Clases.
 2.1.1 Importancia del diagrama para el logro exitoso en el desarrollo del
proyecto socio tecnológico.

Su importancia proviene de la descripción detallada que se muestra del sistema, ya que

con este diagrama se pueden visualizar cada parte del aplicativo, obteniendo una visión general
de cada objeto, como también permite plasmar las relaciones fuertes y débiles entre las clases
involucradas en el sistema, estas clases pueden ser asociativas, de herencia, de uso y de
agregación. Cabe destacar que otra funcionalidad del diagrama de clase es que permite enfocar
los métodos que ejecutara cada objeto sirviendo como boceto de captura de errores o deficiencias
del mismo. Por último y no menos importante es el complemento que brinda dicho diagrama a
cada programador, ya que este se puede utilizar como una herramienta que facilite la
comunicación y el entendimiento de un aplicativo entre otros programadores.
2.2 Diagrama de Objetos.
 2.2.1. Importancia del diagrama para el logro exitoso en el desarrollo del
proyecto socio tecnológico.

El diagrama de objeto modela las instancias de elementos contenidos en los diagramas de

clases, muestra un conjunto de clase o/u objetos y sus relaciones en un momento concreto, es
decir, es empleado para modelar la vista de diseño no estática o la vista de procesos estática de un
sistema al igual que se hace con los diagramas de clases, pero desde la perspectiva de instancias
reales o prototípicas. Esta vista sustenta principalmente los requisitos funcionales de un sistema.
Cabe destacar que la importancia de este diagrama se manifiesta en el desarrollo del diseño
lógico y físico de un sistema, ya que este diagrama permite visualizar, especificar, construir y
documentar la existencia de ciertas instancias en el sistema, junto a las relaciones entre ellas.
Este diagrama es dibujado para explicar o para capturar ciertos escenarios donde
demuestran conceptos o estados en un punto de tiempo en el diagrama de clases, dejando de una
manera muy clara las relaciones entre los objetos que hacen parte de la clase para mejor
entendimiento de otros programadores y observar el comportamiento que tiene el sistema.
2.3 Diagrama de Paquetes.
 2.3.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.

Este diagrama permite organizar los elementos modelados con UML, facilitando de ésta
forma el manejo de los modelos complejos del sistema. Permiten dividir el modelo para agrupar
y encapsular sus elementos en unidades lógicas individuales y muestra como está estructurado el
sistema.
Este Contiene elementos del modelo al más alto nivel, tales como clases y sus relaciones,
máquinas de estado, diagramas de casos de uso, interacciones y colaboraciones. Las
dependencias entre paquetes resumen dependencias entre los elementos internos a ellos, es decir,
las dependencias del paquete se derivan a partir de las dependencias entre los elementos
individuales. su dependencia indica que un elemento del paquete requiere a otro de un paquete
distinto . Se representa mediante una flecha discontinua con inicio en el paquete que depende del
otro.
2.4Diagrama de componentes.
 2.4.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico

El Diagrama de Componente ilustra las piezas del software que conforma el sistema. Este
diagrama tiene un nivel más alto de abstracción que el diagrama de clase ya que usualmente un
componente se implementa por una o más clases (u objetos) en tiempo de ejecución. Estos son
bloques de construcción, como eventualmente un componente puede comprender una gran
porción en el sistema. Los componentes se representan como un rectángulo con un icono de
componente en la esquina derecha arriba. Las Interfaces son colecciones de uno o más métodos
que pueden o no contener atributos.
Cabe destacar que este diagrama permite que se especifique el servicio o comportamiento
a su entorno así como también un servicio o comportamiento que un componente requiere. Los
puertos pueden especificar entradas, salidas así como también operar bi-direccionalmente.
En otras palabras, la importancia de este diagrama es el poder describir e identificar los
elementos del diseño que interactúan con otros elementos del mismo diseño a través de un
conjunto restringido de entradas y salidas. Estos componentes tienen una escala detallada y por
otra parte se visualiza las interconexiones entre sí.
2.5 Diagrama de despliegue.
 2.5.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos.

Con este diagrama se modela la arquitectura en tiempo de ejecución de un sistema. Esto

muestra la configuración de los elementos de hardware (nodos) y muestra cómo los elementos y
artefactos del software se trazan en esos nodos.
Es importante ya que se usa para razonar sobre la topología de procesadores y dispositivos
sobre los que se ejecuta el software, es decir, se utiliza para modelar la disposición física de los
artefactos software en nodos.
3. Diagramas de Comportamiento

3.1. Diagrama de Estado

 3.1.1. Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológicos.

Es una manera para caracterizar un cambio en un sistema, es decir que los objetos que lo
componen modificaron su estado como respuesta a los sucesos y al tiempo.
Este diagrama presenta los estados en los que puede encontrarse un objeto junto con las
transiciones entre los estados, y muestra los puntos inicial y final de una secuencia de cambios de
estado. Es por ello que es necesario contar en el diseño del software con este diagrama de estado
dado que permite a otros analistas, diseñadores y desarrolladores del software comprender el
comportamiento de los objetos del sistema. Cabe destacar que ccon una clara representación del
comportamiento del objeto, aumenta la probabilidad de desarrollar un sistema que cumpla con los
requerimientos estipulados por la comunidad.
4. Diagrama de interacción

4.1 Diagrama de comunicación o colaboración.

 4.1.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.

En este tipo de diagramas se muestra una interacción organizada, basándose en los objetos
que toman parte en la interacción y los enlaces entre los mismos (en cuanto a la interacción se
refiere). A diferencia de los diagramas de secuencia, los diagramas de colaboración muestran las
relaciones entre los roles de los objetos. La secuencia de los mensajes y los flujos de ejecución
concurrentes deben determinarse explícitamente mediante números de secuencia. Aunque se
muestran los mensajes que se envían los objetos entre sí, por lo general se evita la multiplicidad
de mensajes dado que podría ser fuente de confusión. En la representación de los mensajes, la
flecha que se dibuja cerca de la línea de asociación entre dos objetos, apunta al objeto receptor.
4.2 Diagrama de Secuencia.
sd diagrama de Secuencia

alt Agregar Usuario

Super-Usuario Admn menu1.php vis_usuario_agregar.phpcon_usuario_agregar.php mod_usuario.php

ingresa al m enu()

direcciona()

sumi nistra los datos()

cam pos
incompletos()
muestra mensaje()

corrige los datos()

envia l os datos del
nuevo usuario()

envia los datos para

consultar()

usuario
ya
exi ste()
indica que el usuario
ya existe()

muestra el m ensaj e de
usuario exi stente()

verifica los datos()

corrige los datos()

envia los datos()

verifica los datos()

agrega el nuevo usuario()

usuario agregado()

noti ficaci on de exito()

notifica el mensaje()

Autenticación administrador.
sd Use Case Model

alt autenticar usuario administrador

Usuario Admn index1.php con_login_administrador.php mod_usuario.php servidor

ingresa su usuario y
contraseña()

envia los datos()

comprueba los datos()

verifica la informacion()

devuelve un resultado()

indica el mensaje()

muestra la notificacion()
Autenticación chef.
sd Use Case Model

alt autenticar usuario chef

Usuario chef index1.php con_login_chef.php mod_usuario.php servidor

ingresa su usuario y
contraseña()

envia los datos()

comprueba los datos()

verifica la informacion()

devuelve un resultado()

indica el mensaje()

muestra la notificacion()
 5. Modelo Vista Controlador (MVC)
5.1.- Diagrama MVC

uc mv c

eliminar usuario

1 2

con_consul tar_usuario_el iminar.php

vis_consultar_usuario_el iminar.php mod_usuario.php

agregar usuario
8
4 3
Autenticacion de Usuario

2
con_usuario_eli minar.php mod_censo.php

1 5
i ndex.html
mod_usuario.php
(from Actors) 6 vis_usuari o_eliminar.php
4
vi s_usuario_agregar.php con_usuario_agregar.php 7

vi s_l ogin_chef.php 3
(from Actors)
vis_l ogin_administrador.php
(from Actors) mod_censo.php

modificar usuario

mod_usuari o.php con_l ogin_chef.php

(from Actors) (from Actors) 1
con_l ogin_admini strador.php mod_usuario.php
(from Actors) (from Actors)
vis_consul tar_usuario_modificar.php con_consultar_usuario_modi ficar.php
consultar usuario

2
3
1 2
7
con_consul tar_usuario.php mod_usuario.php mod_usuari o.php
menu.php menu2.php menu3.php vis_consultar_usuario.php vis_usuario_modificar.php
(from Actors) (from Actors) 5
(from Actors)
3
4

6
vi s_usuario_encontrado.php con_usuario_modi fi car.php mod_persona.php

modificar_area aprobar/ negar solicitud de autorizacion de registro agregar idioma

agregar area

3- aprobar
1 2
1 - aprobar 2- aprobar
con_aprobar_sol icitud.php
con_buscar_area_modificar.php mod_agregar.php vi s_agregar_idioma.php con_agregar_idioma.php mod_agregar.php
vi s_modi ficar_area.php
vis_agregar_area.php con_agregar_area.php 3
mod_agregar.php
1 - negar
vi s_solici tudes_pendientes.php
mod_solicitud.php
2 - negar
3 - negar
con_negar_solicitud.php
eliminar area menu2.php
con_modificar_area_encontrado.php vis_modificar_area_encontrado.php

modificar idioma

eliminar idioma
agregar tipo de area
vis_el iminar_area.php
1 2

vi s_modi ficar_idi oma.php con_buscar_i dioma_modi ficar.php mod_agregar.php

con_agregar_tipo_area.php mod_agregar.php 3 vi s_el imi nar_idi oma.php

vis_agregar_ti po_area.php
6
con_el iminar_area.php 1
mod_agregar.php

4
2
eliminar tipo de area
modificar tipo de area con_modificar_idioma_encontrado.phpvis_modi ficar_i dioma_encontrado.php con_eliminar_i dioma.php
mod_agregar.php
5

vi s_elimi nar_tipo_area.php
vis_modificar_tipo_area.php con_buscar_tipo_area_modifi car.php
mod_agregar.php

con_eli mi nar_ti po_area.php mod_agregar.php

vi s_modifi car_ti po_area_encontrado.php
con_modi ficar_tipo_area_encontrado.php

Generar solicitud de Autorizacion

registro de datos personales
registro de datos telefonicos estudios academicos
estadisticas

vis_solicitud_autorizacion.php
(from Actors)
vi s_datos_academicos.php
con_censo.php mod_academico.php
total_personas_experi encia_l aboral.php en_area.php menu.php mod_censo.php vi s_telefono.php con_tel efono.php mod_telefono.php
con_datos_academicos.php

mod_solici tud.php
(from Actors)
en_ti po_area.php
con_sol icitud_autori zacion.php
(from Actors) total _personas_estudi os_en_area.php en_formacion_uni versitaria.php estudios en el area

solicitud de estudios en el area estudios idiomaticos realizados

mod_usuario.php

total de personas
registradas.php en_capacitaci on.php
total_personas_con_soli citud_estudio.php
vis_consulta_soli ci tud.php con_solici tud_estudi o_en_area.php con_estudio_i di omati co.php
con_estudi o_en_area.php mod_idi oma.php
vis_estudi o_en_area.php mod_academico.php vis_sol icitud_estudi o_en_area.php mod_academico.php vis_estudi o_idiomati co.php
(from Actors)

en_certificacion.php

total_personas_con_estudios_idi omati cos.php

solicitud de estudio idiomatico

i di oma_especifico.php

total_personas_con_soli citud_estudio_idi omati co.php con_sol icitud_estudio_i diomatico.php

vi s_solici tud_estudio_idi omati co.php mod_i dioma.php
 5.1.1 Importancia del diagrama para el logro exitoso en el desarrollo del proyecto
socio tecnológico.
Su importancia se debe a que este tipo de diagrama es un patrón de arquitectura de
software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y
el módulo encargado de gestionar los eventos y las comunicaciones. Para ello MVC propone la
construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir,
por un lado define componentes para la representación de la información, y por otro lado para la
interacción del usuario. Este patrón de arquitectura de software se basa en las ideas de
reutilización de código y la separación de conceptos, características que buscan facilitar la tarea
de desarrollo de aplicaciones y su posterior mantenimiento.
6. Interfaz de Usuario
Vista principal

Login administrador

Login chef
Solicitud de registro
Solicitud en estatus de pendiente

Solicitudes Pendientes
Ingreso de datos personales

Agregar telefono
Agregar estudios academicos

Estudios en el area
Solicitud de estudios en el area
Estudios idiomaticos
Solicitud de estudios idiomaticos
 Experiencia laboral

7. Reportes