TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE VILLAHERMOSA

MODELADO CONCEPTUAL DE APLICACIONES WEB

MAESTRÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

MODELADO DEL PROYECTO

I.T.I.C LUIS MIGUEL ALAMILLA HERNÁNDEZ

2DO SEMESTRE

JUNIO 2020.

1
CONTENIDO.

1. DESARROLLO DEL PROYECTO ....................................................................................................................3

1.1 MODELO DE ANÁLISIS ............................................................................................................................ 3

1.1.1 RECOPILACIÓN DE REQUISITOS ......................................................................................................... 3
A. REQUISITOS .................................................................................................................................................. 3
1.1.2 MODELADO DEL ANÁLISIS ............................................................................................................... 4
A. GLOSARIO DE NEGOCIOS .................................................................................................................................. 4
B. CASOS DE USOS ............................................................................................................................................. 5
C. ESPECIFICACIONES DE CASOS DE USOS ................................................................................................................. 6
D. MODELADO ORIENTADO A OBJETOS ................................................................................................................... 9
1.2 MODELADO DE DISEÑO.......................................................................................................................... 9
1.2.1 MODELADO DEL DISEÑO................................................................................................................. 9
A. MODELADO DEL CONTENIDO .......................................................................................................................... 10
B. PANTALLAS ................................................................................................................................................. 13
C. MODELADOS DE NAVEGACIÓN ........................................................................................................................ 15
1.2.2 MODELADO DE DATOS ................................................................................................................. 16
A. MODELADO DE DATOS RELACIONAL .................................................................................................................. 16
B. DICCIONARIO DE DATOS ................................................................................................................................. 18
1.3 IMPLEMENTACIÓN............................................................................................................................... 20
A. MODELADO DE COMPONENTES ....................................................................................................................... 20
1.4 PRUEBAS ........................................................................................................................................... 21

2
1. DESARROLLO DEL PROYECTO

1.1 MODELO DE ANÁLISIS

En el modelo de análisis se muestra la representación técnica del sistema. Se utiliza

una mezcla de formatos en texto y diagramas para representar los requisitos del software, las
funciones y el comportamiento. De esta manera se hace mucho más fácil de comprender dicha
representación, ya que es posible examinar los requisitos desde diferentes puntos de vista
aumentando la probabilidad de encontrar errores, de que surjan debilidades y de que se
descubran descuidos.

1.1.1 RECOPILACIÓN DE REQUISITOS

A. REQUISITOS

Los requisitos fundamentan el medio de comunicación entre el cliente, y el

desarrollador. Por lo tanto, se recoge las necesidades del cliente que a continuación se
muestran:

REQUERIMIENTOS DEL SISTEMA SG DONACIONES

DEPARTAMENTO DE POSGRADO
ÁREA DE DESARROLLO DE POSGRADO
Nombre del Aplicación web para la gestión de donación de medicamentos (SG
proyecto: Donaciones) en la empresa C-Developers

Departamento: ITVH Solicitante: Ing. Gustavo Alberto Pérez

Javier

Asignado a: Ing. Luis Miguel Alamilla Hernandez

ID: SGD0001 Fecha de 02/06/2020 Fecha de 01/06/2020 Tiempo 19

levantamiento proyecto: estimado horas

3
 (2.5
días)

Requisitos Página principal.

Funcionales
1. Se podrá ver un carrusel con las noticias más relevantes
2. En el header se tendrá un buscador de medicinas
3. En el header se mostrará el logo de la empresa
4. En el header se tendrá un botón para ingresar a la cuenta del
usuario
5. Seguido del carrusel se tendrá 4 Thumbnail con contenido
editable.
6. Se tendrá un footer con las redes sociales de la empresa, y los
derechos del autor.
7. El buscador hará búsquedas en tiempo real de medicamentos
disponibles

Requisitos No 1. No estar logeado en el sistema

Funcionales 2. Tener acceso a internet

Notas

1.1.2 MODELADO DEL ANÁLISIS

A. GLOSARIO DE NEGOCIOS

1) Medicamento: es una sustancia con propiedades para el tratamiento o la

prevención de enfermedades en los seres humanos. También se consideran
medicamentos aquellas sustancias que se utilizan o se administran con el objetivo
de restaurar, corregir o modificar funciones fisiológicas del organismo o aquellas
para establecer un diagnóstico médico.
2) Donación: es el acto que consiste en dar fondos u otros bienes materiales,
generalmente por razones de caridad. En algunos ordenamientos jurídicos está

4
 regulada como un contrato. Las personas pueden optar por donar partes de sus
cuerpos, como órganos, sangre o esperma.
3) Donante: en acepción general, es una persona que dona algo voluntariamente,
pero a veces se aplica en situaciones donde una donación es pagada como un
servicio.
4) Donatario: persona a quien se otorga una donación.
5) Centro de Acopio: es la recolección, el manejo seguro y la correcta destrucción de
los medicamentos caducos o sobrantes que ya no requieren los pacientes o sus
familiares.
6) Donaciones de medicamentos: son en la actualidad una solución temporal al
problema del acceso a medicamentos en los países en vías de desarrollo, pero
para que cumplan su objetivo deben realizarse de la manera adecuada y
garantizando su calidad.
7) Residuos no peligrosos: son aquellos producidos por el generador en cualquier
lugar y en desarrollo de su actividad, que no presentan riesgo para la salud humana
y/o el medio ambiente.
8) Residuos peligrosos: son aquellos residuos producidos por el generador con
alguna de las siguientes características: infecciosos, combustibles, inflamables,
explosivos, reactivos, radiactivos, volátiles, corrosivos y/o tóxicos; los cuales
pueden causar daño a la salud humana y/o al medio ambiente. Así mismo se
consideran peligrosos los envases, empaques y embalajes que hayan estado en
contacto con ellos

B. CASOS DE USOS

A continuación, se representan las acciones que un donante, donatario y centro de

acopio puede realizar en el sistema. Definiendo la secuencia de las acciones ejecutadas por
el sistema que producen un resultado observable de valor para los diferentes usuarios del
sistema.

5
  Caso de uso 1: Iniciar sesión del donante

Ilustración 1 Inicio de sesión donante

 Caso de uso 2: Registrar un nuevo donante

Ilustración 2 Registrar un nuevo donante

C. ESPECIFICACIONES DE CASOS DE USOS

La especificación de los casos de usos que se muestran a continuación, hacer

referencia a la descripción de cada una de las partes definidas para lograr una descripción
completa de cada caso de uso.

6
Identificador: CU01

Nombre del caso de uso: Iniciar sesión donante

Descripción: El donante inicia sesión para agregar

medicamentos que desea donar y ver todos
sus medicamentos donados.

Flujo de eventos: El donante ingresa su correo electrónico y

contraseña, da clic en botón inicio sesión.

Flujo básico: Si el donante ingresa un correo electrónico y

contraseña correcta el sistema presentará un
menú donde el donante podrá agregar
medicamentos que desea donar y ver todos
sus medicamentos donados.

Flujos alternativos: Si el donante ingresa un correo electrónico y

contraseña incorrecta el sistema presentará
un mensaje de error y permitirá al donante
volver al inicio de sesión.

Requisitos especiales: El método de inicio de sesión que consulte a

la base de datos.

Condiciones previa: El donante no ha iniciado sesión

Condiciones posterior: Se muestra una pantalla con las opciones:

agregar medicamentos que desea donar y
ver todos sus medicamentos donados.

7
Identificador: CU02

Nombre del caso de uso: Registrar un nuevo donante

Descripción: El usuario ingresa sus datos para crear una

cuenta para agregar medicamentos que
desea donar y ver todos sus medicamentos
donados.

Flujo de eventos: El usuario ingresa su correo electrónico,

contraseña y confirma la contraseña, da clic
en botón registrar y le llega un correo de
verificación de cuenta, dar clic en verificar y
la cuenta queda verificada.

Flujo básico: Si el usuario ingresa un correo electrónico y

contraseña correcta el sistema mandará un
mensaje diciendo que el usuario ha sido
agregado y le llegará un correo con una liga
de verificación de la cuenta y así poder iniciar
sesión.

Flujos alternativos: Si el usuario ingresa un correo electrónico

existente o ya registrado, el sistema
presentará un mensaje de error y no dejará
al usuario crear su cuenta.

Requisitos especiales: El método de registro que consulte a la base

de datos

Condiciones previa: El usuario no se ha registrado antes

Condiciones posterior: Se muestra la pantalla de inicio de sesión si

el usuario se registró exitosamente

8
 D. MODELADO ORIENTADO A OBJETOS

El modelado orientado a objetos utiliza el paradigma de la orientación a objetos para el

desarrollo del software. Este enfoque realiza la construcción de modelos del sistema por medio
de la identificación y la especificación de un conjunto de objetos relacionados, que colaboran
entre sí de acuerdo a los requerimientos establecidos para el sistema.

Modelado del sistema

1.2 MODELADO DE DISEÑO

1.2.1 MODELADO DEL DISEÑO

El modelo de diseño es una abstracción de la implementación del sistema. Se utiliza

para concebir y para documentar el diseño del sistema de software. Es un producto de trabajo

9
integral y compuesto que abarca todas las clases de diseño, subsistemas, paquetes,
colaboraciones y las relaciones entre ellos.

A. MODELADO DEL CONTENIDO

PÁGINA PRINCIPAL

Nombre Tipo de Auto- Valores Ejemplo Notas

del campo dato Generado límite

Titulo Input Text No C-Developers Debe ir en la parte

Agencia superior centrado el
Digital logo de la empresa.

Buscar Input Text No Debe tener un

medicinas buscador de las
medicinas
disponibles en el
sistema.

Regístrate Link No Se debe contar con

o ingresa un botón que al dar
clic en regístrate o
ingresa re
direccionar a la
página de inicio de
sesión

Carrusel multimedia no Audio, Imágenes o

video, videos del
texto, contenido de
animación medicamentos

Descripción Texto Área no Regístrate y dona

10
 Regístrate y dona tus
medicinas en
nuestro página

Nuevos Slider no Video, Nuevos Se debe mostrar un

centros de texto, centros de carrusel con los
acopio animación acopio centros de acopio
más recientes

Pie de Text Area no El objetivo de En el pie de página

pagina nuestra se debe tener los
página es numero de contacto
ayudar a la y los derecho de
sociedad Copyright
apoyarnos
mutuamente
con
medicamentos
no caducados.

PÁGINA DE INICIO DE SESIÓN

Nombre del Tipo de dato Auto- Valores Ejemplo Notas

campo Generado límite

Titulo Input Text no Mi cuenta Título de mi

cuenta para
especificar
que es un
inicio de
sesión

11
descripción Text Area no Iniciar sesión Una
descripción
para indicar
que es un
inicio de
sesión

Dirección de Input Text no email Dirección de Una

correo correo dirección de
electrónico electrónico correo
electrónico
valida

Contraseña Input no Password Contraseña La

Password contraseña
de un correo
electrónico
valido

Iniciar Button no Text Iniciar Botón para

iniciar sesión

Recuérdame Single select no Se puede dar

clic para
habilitar
recordar la
sesión

¿Perdiste tu Single Select no ¿Perdiste tu Link para ir a

contreseña? contraseña? otra pestaña
para
recuperar la
contraseña

12
B. PANTALLAS

 Pantalla de bienvenida para todos los usuarios.

Ilustración 3 Home Page

13
 Pantalla de inicio de sesión y de registro

Ilustración 4 Inicio de sesión y registro

14
 C. MODELADOS DE NAVEGACIÓN

En esta fase se tiene como objetivo el conseguir un modelo para representar las
posibilidades de navegación del sistema.

Una pista de navegación expresa cómo un usuario concreto puede navegar hacia una
determinada información.

 Navegación de Inicio de sesión

Ilustración 5 Iniciar de sesión

 Navegación de agregar donaciones

15
 Para agregar donaciones primero debe el donante iniciar sesión para ello debe seguir
los pasos de la navegación de inicio de sesión de la ilustración 5.

Ilustración 6 Agregar donación

1.2.2 MODELADO DE DATOS

A. MODELADO DE DATOS RELACIONAL

Los datos están almacenados en un conjunto de tablas normalizado que proporciona

un almacenamiento eficaz. El objetivo es evitar la redundancia de datos y proporcionar un alto
nivel de rendimiento. La organización de este tipo de datos permite que el experto o modelador
de datos pueda comprenderlo y no se diseñó para que lo vea un usuario final.

 Modelado como un diagrama Entidad-Relación.

16
 Ilustración 7 Modelo Entidad-Relación

Ilustración 8 Modelo Entidad-Relación descripción de datos

17
  Modelo relacional

B. DICCIONARIO DE DATOS

A continuación, se muestra una lista organizada de los datos utilizados por el sistema
que gráficamente están representados por los flujos de datos y almacenes presentes sobre el
conjunto DFD.

 Tabla User

CAMPO DOMINIO TIPO DE INDIZACIÓN VALIDACIÓN

CAMPO

id Identificador Number(11) Numero Entrada

único del obligatoria y
única

18
 usuario del
sistema

Email Correo Varchar(50) Texto Entrada

electrónico del obligatoria y
usuario única

Validacion Toma el valor Number(11) Numero Entrada

de 0 si no es obligatoria
válido el
usuario y 1 si
es válido un
usuario

name Nombre del Varchar(30) Texto Entrada

usuario obligatoria

Last_name Apellido Varchar(30) Texto Entrada

paterno del obligatoria
usuario

Second_last_name Apellido Varchar(30) Texto Entrada

materno del obligatoria
usuario

password Contraseña del Varchar(64) Texto Entrada

usuario obligatoria

Telefono Numero de Number(15) Numero Entrada

teléfono del obligatoria
usuario

Rol Rol o funciones Varchar(25) Numero Entrada

que puede obligatoria

19
 realizar del
usuario

Direccion Domicilio del Varchar(64) Texto Entrada

usuario obligatoria

status Estatus del Char(2) Numero Entrada

usuario: 1 si obligatoria
está activo, 0 si
es inactivo.

Fk_municipio Llave foránea Number(11) Numero Entrada

del municipio al obligatoria
que pertenece
el usuario

Profie_picture Foto del Varchar(160) Texto Entrada

usuario obligatoria

1.3 IMPLEMENTACIÓN

A. MODELADO DE COMPONENTES

El modelo de componentes ilustra los componentes de software que se usan para

construir el sistema.

 Buscar medicamentos

20
 Ilustración 9 Modelo de componente de buscar medicamentos

1.4 PRUEBAS

Comprenden al conjunto de actividades que se realizan para identificar posibles fallos

de funcionamiento, configuración o usabilidad del sistema, por medio de pruebas sobre el
comportamiento del mismo.

Fecha de prueba: 15 junio de 2020

ID caso de prueba: CP-001

Nombre caso de prueba: Acceso al Sistema

21
Descripción: Acceso al sistema mediante un correo electrónico y contraseña
valida.

Precondiciones: Debe existe un usuario con correo electrónico y contraseña

válidos.

Correo: alamilla-96@hotmail.com, password: 11AAbb##

Pasos y condiciones Ingresar el correo electrónico: alamilla-96@hotmail.com y

ejecución: contraseña: 11AAbb## en la interfaz de login.

Resultado esperado: El usuario es válido en la base de datos

Resultado obtenido: Se muestra la pantalla de login.

Se muestra una pantalla de administración del usuario con el

correo alamilla-96@hotmail.com

22
Estado caso de prueba: Exitoso

Errores asociados: No presenta errores

Responsable de diseño: Luis Miguel Alamilla

Responsable de Luis Miguel Alamilla

ejecución:

Comentarios:

23
 BIBLIOGRAFÍA

1. Real Academia Española. (2020). Diccionario de la lengua española Recuperado el 19

de abril de 2020 en https://dle.rae.es/
2. Alegsa.com.ar. (2010). Definición de Aplicación (informática). Recuperado el 19 de abril
del 2020, de http://www.alegsa.com.ar/Dic/aplicacion.php
3. Departamento de Lenguajes y Sistemas Informáticos. (2004). Introducción a las
Aplicaciones Web. Recuperado el 19 de abril del 2020, de
http://www.lsi.us.es/docencia/get.php?id=854
4. Miguel Angel. (2015). Definición de aplicación web. 19 de abril del 2020, de mialtoweb
Sitio web: http://mialtoweb.es/definicion-de-aplicacion-web/
5. M. Claudia Albornoz, Mario Berón, Germán Montejano. (2017). Interfaz Gráfica de
Usuario: el Usuario como Protagonista del Diseño. Recuperado el 19 de abril del 2020,
de http://sedici.unlp.edu.ar/bitstream/handle/10915/62078/Documento_completo.pdf-
PDFA.pdf?sequence=1&isAllowed=y
6. GlosarioIT.com. (2010). Interfaz de usuario - GlosarioIT: Glosario Informático.
Recuperado el 19 de abril del 2020, de https://www.glosarioit.com/Interfaz_de_usuario
7. Wikipedia. (2020). Navegador Web. Recuperado el 19 de abril de 2020, de
https://es.wikipedia.org/w/index.php?title=Navegador_web&oldid=125193433
8. Centre Información Del Medicament. (2019). ¿Qué es un medicamento? Recuperado
el 04 de junio de 2020, de https://www.farmaceuticonline.com/es/medicamento-que-es/
9. Medicamentosaunclic. (2019). ¿Qué es un medicamento? Recuperado el 04 de junio
de 2020, de
http://medicamentosaunclic.gov.co/contenidos/Que_es_medicamento.aspx
10. Tratamiento (medicina). (2020, 9 de abril). Wikipedia, La enciclopedia libre. Fecha de
consulta: 05:02, junio 5, 2020 desde
https://es.wikipedia.org/w/index.php?title=Tratamiento_(medicina)&oldid=125045548.
11. OMS. (2020). Desechos farmacéuticos. Recuperado el 05/06/2020 de
https://www.who.int/es
12. Donación. (2020, 5 de mayo). Wikipedia, La enciclopedia libre. Fecha de consulta:
05:43, junio 5, 2020 desde
https://es.wikipedia.org/w/index.php?title=Donaci%C3%B3n&oldid=125782137.

24
13. Tania Díaz. (Julio 2, 2018). Definición de Donación. Recuperado el 05 de junio 2020
de https://www.economiasimple.net/glosario/donacion
14. Carlota Merchán. (noviembre 2001). Donaciones de medicamentos. A examen.
Recuperado el 05 de junio 2020 de https://cutt.ly/EyVV0bM
15. Significados.com. (2019). Desarrollo. Recuperado el 09 de junio de 2020 de
https://www.significados.com/desarrollo/
16. Significados.com. (2019). Software. Recuperado el 09 de junio de 2020 de
https://www.significados.com/software/
17. CISET. (2020). Software - Concepto y tipos. Recuperado el 09 de junio de 2020 de
https://www.ciset.es/glosario/480-software
18. Universidades.cr. (2020). Desarrollo de Software. Recuperado el 09 de junio de 2020
de https://universidades.cr/carreras/desarrollo-de-software
19. EcuRed. (2019). Desarrollo de software. Recuperado el 09 de junio de 2020 de
https://www.ecured.cu/Desarrollo_de_software
20. Voigtamann. (2020). Desarrollo de software. Recuperado el 09 de junio de 2020 de
https://www.voigtmann.de/es/desarrollo-de-software/analisis-de-sistemas/
21. Canós, J. H., & Letelier, M. C. P. P. (2012). Metodologías ágiles en el desarrollo de
software.
22. ProyectosAgiles.org. (2020). Qué es SCRUM. Recuperado el 09 de junio de 2020 de
https://proyectosagiles.org/que-es-scrum/
23. Herramienta de desarrollo de software. (2020, 10 de febrero). Wikipedia, La
enciclopedia libre. Fecha de consulta: 16:24, junio 9, 2020 desde
https://es.wikipedia.org/w/index.php?title=Herramienta_de_desarrollo_de_software&ol
did=123433391.
24. Martin D. (7 marzo 2019). Top 7 herramientas para desarrolladores de software en
2019 Recuperado el 09 de junio de 2020 de https://velneo.es/herramientas-software-
2019/
25. IBM. (2020). Herramientas de desarrollo. Recuperado el 09 de junio de 2020 de
https://www.ibm.com/support/knowledgecenter/es/ssw_ibm_i_71/rzahg/rzahgdevtools.
htm
26. Fundamentos de programación/Herramientas de desarrollo. (2018, abril 26). Wikilibros.
Consultado el 16:30, junio 9, 2020 en

25
 https://es.wikibooks.org/w/index.php?title=Fundamentos_de_programaci%C3%B3n/H
erramientas_de_desarrollo&oldid=352860.
27. Microsoft. (2020). Visual Studio Code. Recuperado el 09 de junio de 2020 de
https://code.visualstudio.com/
28. JetBrains s.r.o. (2020). PhpStorm, Funcionalidades. Recuperado el 09 de junio de 2020
de https://www.jetbrains.com/es-es/phpstorm/features/
29. Laravel LLC. (2020). Laravel. Recuperado el 09 de junio de 2020 de https://laravel.com/
30. Desarrolloweb.com. (2020). Laravel. Recuperado el 09 de junio de 2020 de
https://desarrolloweb.com/home/laravel

26