UNIVERSIDAD TECNOLÓGICA DE TABASCO

DIVISIÓN ACADÉMICA DE TECNOLOGÍAS DE LA

INFORMACIÓN Y COMUNICACIÓN

MEMORIA DE ESTADÍA PROFESIONAL

DESARROLLO DEL MÓDULO DE SOLICITUDES Y ATENCIÓN DE

TRÁMITES DE LA SECRETARÍA DE MOVILIDAD DEL ESTADO
DE TABASCO

QUE PRESENTAN PARA OBTENER EL TÍTULO DE TÉCNICO

SUPERIOR UNIVERSITARIO EN TECNOLOGÍAS DE LA
INFORMACIÓN ÁREA DESARROLLO DE SOFTWARE
MULTIPLATAFORMA

MANUEL ALFONSO GÓMEZ CERDA

EMPRESA:
SECRETARIA DE MOVILIDAD DEL ESTADO DE TABASCO

ASESOR EMPRESARIAL ASESOR ACADÉMICO

MTRO. MIGUEL ANGEL YRIS DRA. MARTHA OFELIA JIMÉNEZ
PASTOR VELÁZQUEZ

PARRILLA, CENTRO, TABASCO AGOSTO, 2022

 UNIVERSIDAD TECNOLÓGICA DE TABASCO
DIVISIÓN ACADÉMICA DE TECNOLOGÍAS DE LA
INFORMACIÓN Y COMUNICACIÓN

GENERACIÓN LI

MEMORIA DE ESTADÍA PROFESIONAL

DESARROLLO DEL MÓDULO DE SOLICITUDES Y ATENCIÓN DE

TRÁMITES DE LA SECRETARÍA DE MOVILIDAD DEL ESTADO
DE TABASCO

QUE PRESENTAN PARA OBTENER EL TÍTULO DE TÉCNICO

SUPERIOR UNIVERSITARIO EN TECNOLOGÍAS DE LA
INFORMACIÓN ÁREA DESARROLLO DE SOFTWARE
MULTIPLATAFORMA

MANUEL ALFONSO GÓMEZ CERDA

EMPRESA:
SECRETARIA DE MOVILIDAD DEL ESTADO DE TABASCO

ASESOR EMPRESARIAL ASESOR ACADÉMICO

MTRO. MIGUEL ANGEL YRIS DRA. MARTHA OFELIA JIMÉNEZ
PASTOR VELÁZQUEZ

PARRILLA, CENTRO, TABASCO AGOSTO, 2022

AGRADECIMIENTOS

Principalmente agradezco a la Universidad Tecnológica de Tabasco por haberme aceptado ser parte
de ella y abierto las puertas para poder estudiar mi carrera, así como también a los diferentes
docentes que me brindaron sus conocimientos y su apoyo para seguir adelante día a día.

Agradezco también al Director de la División de Tecnologías de la Información y Comunicación, el

Mtro. José Luis Martínez Rivera, por siempre confiar en mí, apoyarme y haberme dado la oportunidad
de retomar mis estudios donde me quedé sin tener que reiniciarlos cuando ya daba por perdida la
carrera.

Mi agradecimiento también va dirigido a mi asesor empresarial, el Mtro. Miguel Ángel Yris Pastor,
Titular de la Unidad de Apoyo Técnico e Informático de la Secretaría de Movilidad del Estado de
Tabasco por haberme brindado la oportunidad de formar parte de su equipo de trabajo y guiarme
durante todo el desarrollo de la aplicación que desarrollé para ellos.

Gracias también a mi asesora académica, la Dra. Martha Ofelia Jiménez Velázquez, por haberme
apoyado y haberme tenido toda la paciencia del mundo para guiarme durante todo el desarrollo de
la memoria de estadía.

También agradezco a todos los que fueron mis compañeros de clase durante todos los cuatrimestres
ya que gracias al compañerismo, amistad y apoyo moral han aportado en un alto porcentaje a mis
ganas de seguir adelante en mi carrera profesional.

Le agradezco a mis mejores amigos, Enrique Chacón Mena, Adán Barrera Palacios y Ofelia Alamilla
Carballo, porque siempre me dieron ánimos cuando más los necesité, por apoyarme día con día, ser
mis confidentes y mis consejeros, por ayudarme a no dejarme vencer ante las adversidades.

Debo agradecer de manera especial y sincera a mi madre, Myriam Eugenia Cerda Ochoa, y a mis
hermanas, Salma Giovanna Gómez Cerda y Marianna Novelo Cerda, que siempre han procurado mi
bienestar y que, si no fuese por el esfuerzo realizado por ellas, mis estudios no hubiesen sido
posibles, así como también por criarme, verme crecer, educarme e inculcarme los valores que hoy
me hacen la persona que soy.

A mi tío, Jesús Alfonso Cerda Ochoa, por apoyarme tanto económica como emocionalmente cuando
más lo necesité, aun sabiendo que no era su propia responsabilidad hacerlo, y no darme la espalda.
A mis abuelos, Cleotilde Ochoa Beltrán y Jesús Cerda González (QEPD), que siempre se preocupan
por mí. Sus canas son sinónimos de sabiduría. Me enseñaron muchas cosas vitales para la vida y
me encaminaron por el buen sendero.

Y para finalizar, también a mi exnovia, Jennifer Baeza de la Cruz, porque a pesar de que hayan
pasado casi 2 años de que ella decidiera dejarme, le agradezco todo lo que me enseñó, todo lo que
me dio y porque con ella aprendí a amar. Fue una chica especial en mi vida y siempre lo será, así
nuestras vidas hayan tomado rumbos diferentes. Por siempre darme ánimos, por mantenerme lejos
del peligro, por cuidarme cuando me enfermaba o me deprimía, por amarme.
ÍNDICE

INTRODUCCIÓN ...................................................................................................................................... 1
CAPITULO I. MARCO METODOLÓGICO .............................................................................................. 2
1.1. Generalidades de la empresa y área donde se desarrollará la estadía........................... 2
1.1.1. Generalidades de la empresa ........................................................................................ 2
1.1.2. Misión de la empresa ..................................................................................................... 2
1.1.3. Visión de la empresa ...................................................................................................... 2
1.1.4. Área donde se desarrollará la estadía.......................................................................... 3
1.2. Tema de la estadía ................................................................................................................ 3
1.3. Antecedentes y justificación ............................................................................................... 3
1.3.1. Antecedentes .................................................................................................................. 3
1.3.2. Justificación .................................................................................................................... 3
1.4. Objetivos ................................................................................................................................ 3
1.4.1. Objetivo general ............................................................................................................. 3
1.4.2. Objetivos específicos..................................................................................................... 4
1.5. Alcance .................................................................................................................................. 4
1.6. Metodología de trabajo ......................................................................................................... 4
CAPITULO II: MARCO TEÓRICO ........................................................................................................... 7
2.1 Fundamentos Teóricos ........................................................................................................ 7
2.1.1 Tecnologías Web ............................................................................................................ 7
2.1.2 Frameworks y librerías .................................................................................................. 8
2.1.2.1 Angular .................................................................................................................... 8
2.1.2.2 React ........................................................................................................................ 8
2.1.2.3 Vue.JS ...................................................................................................................... 8
2.1.3 Aplicación Web ............................................................................................................... 9
2.1.4 Usabilidad ....................................................................................................................... 9
2.1.5 Base de Datos ............................................................................................................... 10
2.1.6 Modelos de Bases de Datos ........................................................................................ 10
2.1.6.1 Modelo de base de datos relacional ................................................................... 10
2.1.6.2 Modelo jerárquico ................................................................................................. 11
2.1.6.3 Modelo de red ....................................................................................................... 12
2.1.6.4 Modelo de base de datos orientado a objetos .................................................. 12
2.1.6.5 Modelo entidad-relación ...................................................................................... 13
2.1.6.6 Modelo de archivo invertido ................................................................................ 13
2.1.6.7 Modelo plano ........................................................................................................ 13
2.1.6.8 Modelo multidimensional .................................................................................... 14
 2.1.6.9 Modelo semiestructurado .................................................................................... 14
2.1.6.10 Modelo de contexto .............................................................................................. 15
2.1.6.11 Modelo asociativo ................................................................................................ 15
2.1.7 Lenguajes de Programación Orientado a Objetos .................................................... 16
2.1.7.1 Python.................................................................................................................... 17
2.1.7.2 Java ........................................................................................................................ 17
2.1.7.3 JavaScript ............................................................................................................. 17
2.1.7.4 HTML ...................................................................................................................... 18
2.1.7.5 CSS ........................................................................................................................ 18
2.1.7.6 C# ........................................................................................................................... 19
2.1.7.7 PHP ........................................................................................................................ 19
2.1.7.8 C/C++ ..................................................................................................................... 20
2.1.7.9 R ............................................................................................................................. 20
2.1.7.10 MySQL ................................................................................................................... 20
2.1.7.11 Mongo DB .............................................................................................................. 21
2.1.7.12 Objective-C ............................................................................................................ 21
2.1.7.13 Swift ....................................................................................................................... 22
2.1.7.14 Matlab .................................................................................................................... 22
2.1.8 Modelos de Desarrollo ................................................................................................. 22
2.1.8.1 Modelo en cascada ............................................................................................... 23
2.1.8.2 Modelo por Prototipos ......................................................................................... 24
2.1.8.3 Modelo en espiral ................................................................................................. 24
2.1.8.4 Metodología de Programación Extrema (XP) .................................................... 25
2.1.8.5 Desarrollo Rápido de Aplicaciones (RAD) ......................................................... 25
2.1.8.6 Incremental ........................................................................................................... 26
CAPITULO III: MARCO DE APLICACIÓN ............................................................................................ 27
3.1 Análisis ................................................................................................................................ 27
3.1.1 Descripción del sistema actual ................................................................................... 27
3.1.2 Detección de problemas y necesidades .................................................................... 27
3.1.2.1 Problemas ............................................................................................................. 27
3.1.2.2 Necesidades .......................................................................................................... 27
3.1.3 Estudio de factibilidad ................................................................................................. 28
3.1.3.1 Factibilidad Operativa .......................................................................................... 28
3.1.3.2 Factibilidad Económica ....................................................................................... 28
3.1.3.3 Factibilidad Técnica ............................................................................................. 28
3.1.4 Alternativa de Solución................................................................................................ 28
3.1.4.1 Nombre de la alternativa ...................................................................................... 28
3.1.4.2 Descripción de la alternativa ............................................................................... 29
 3.1.4.3 Mapa de navegación o árbol del sitio ................................................................. 29
3.1.5 Tecnología a utilizar ..................................................................................................... 29
3.1.5.1 HTML .............................................................................................................................. 29
3.1.5.2 CSS ................................................................................................................................ 30
3.1.5.3 JavaScript ..................................................................................................................... 30
3.1.5.4 PHP ................................................................................................................................ 31
3.1.5.5 MySQL ........................................................................................................................... 31
3.2 Diseño gráfico de la aplicación UML ................................................................................ 32
3.3 Aplicación de las etapas del modelo de desarrollo ........................................................ 32
3.4 Descripción del desarrollo de la aplicación ..................................................................... 33
3.4.1 Diagrama físico de la base de datos .......................................................................... 33
3.4.2 Diccionario de datos .................................................................................................... 34
3.4.3 Pantallas que conforman la aplicación ...................................................................... 36
CAPITULO IV: CONCLUSIONES .......................................................................................................... 41
CAPITULO V: RECOMENDACIONES .................................................................................................. 42
CAPITULO VI: FUENTES CONSULTADAS ......................................................................................... 43
CAPITULO VII: ANEXOS ...................................................................................................................... 44
7.1 Cronograma de Actividades .............................................................................................. 44
7.2 Reporte de la Entrevista inicial .......................................................................................... 45
7.3 Glosario de términos .......................................................................................................... 46
ÍNDICE DE FIGURAS

Figura 1: Logo de la secretaria de Movilidad del Estado de Tabasco ..................................................... 2

Figura 2: Metodología Scrum ................................................................................................................... 5
Figura 3: Logo Angular ............................................................................................................................. 8
Figura 4: Logo React ................................................................................................................................ 8
Figura 5: Logo Vue.JS .............................................................................................................................. 8
Figura 6: Ejemplo del modelo relacional ................................................................................................ 11
Figura 7: Ejemplo del modelo jerarquico ................................................................................................ 11
Figura 8: Ejemplo del modelo de red...................................................................................................... 12
Figura 9: Ejemplo del modelo orientado a objetos ................................................................................. 12
Figura 10: Ejemplo del modelo entidad - relación .................................................................................. 13
Figura 11: Ejemplo del modelo plano ..................................................................................................... 14
Figura 12: Ejemplo del modelo multidimensional ................................................................................... 14
Figura 13: Ejemplo del modelo semiestructurado .................................................................................. 15
Figura 14: Ejemplo del modelo de contexto ........................................................................................... 15
Figura 15: Ejemplo del modelo asociativo .............................................................................................. 16
Figura 16: Logo de Python ..................................................................................................................... 17
Figura 17: Logo Java .............................................................................................................................. 17
Figura 18: Logo JavaScript ..................................................................................................................... 17
Figura 19: Logo HTML ............................................................................................................................ 18
Figura 20: Logo CSS .............................................................................................................................. 18
Figura 21: Logo C# ................................................................................................................................. 19
Figura 22: Logo PHP .............................................................................................................................. 19
Figura 23: Logo C/C++ ........................................................................................................................... 20
Figura 24: Logo R ................................................................................................................................... 20
Figura 25: Logo MySQL ......................................................................................................................... 20
Figura 26: Logo Mongo DB .................................................................................................................... 21
Figura 27: Logo Objective - C................................................................................................................. 21
Figura 28: Logo Swift .............................................................................................................................. 22
Figura 29: Logo MatLab ......................................................................................................................... 22
Figura 30: Modelo Cascada ................................................................................................................... 23
Figura 31: Modelo Prototipos ................................................................................................................. 24
Figura 32: Modelo Espiral ....................................................................................................................... 24
Figura 33: Programación extrema .......................................................................................................... 25
Figura 34: Modelo RAD .......................................................................................................................... 26
Figura 35: Modelo Incremental ............................................................................................................... 26
Figura 36: Mapa de Navegación del Sitio .............................................................................................. 29
Figura 37: Logo HTML ............................................................................................................................ 29
Figura 38: Logo CSS .............................................................................................................................. 30
Figura 39: Logo JavaScript ..................................................................................................................... 30
Figura 40: Logo PHP .............................................................................................................................. 31
Figura 41: Logo MySQL ......................................................................................................................... 31
Figura 42:Diagrama UML de la aplicación ............................................................................................. 32
Figura 43: Diagrama Físico de la Base de Datos ................................................................................... 33
Figura 44: Inicio de Sesión ..................................................................................................................... 36
Figura 45: Dashboard ............................................................................................................................. 37
Figura 46: Página de Alta de Unidad ..................................................................................................... 37
Figura 47: Página de Cargar Chofer ...................................................................................................... 38
Figura 48: Página de Póliza del Seguro ................................................................................................. 38
Figura 49: Página de Viajes ................................................................................................................... 39
Figura 50: Página de Accidentes............................................................................................................ 39
Figura 51: Página de Mantenimiento...................................................................................................... 40
ÍNDICE DE TABLAS

Tabla 1: Descripcion de los equipos o productos................................................................................... 28

Tabla 2: Tabla _accidente ...................................................................................................................... 34
Tabla 3: Tabla _cat_chofer ..................................................................................................................... 34
Tabla 4: Tabla _cat_usuarios ................................................................................................................. 34
Tabla 5: Tabla _mantenimiento .............................................................................................................. 34
Tabla 6: Tabla _movimientos ................................................................................................................. 35
Tabla 7: Tabla _unidad_movil ................................................................................................................ 35
Tabla 8: Tabla _unidad_poliza_seguros ................................................................................................ 35
Tabla 9: Tabla _usuarios ........................................................................................................................ 36
INTRODUCCIÓN

El presente documento denominado “Desarrollo del módulo de solicitudes y atención de trámites de la

Secretaría de Movilidad del Estado de Tabasco” tiene como objetivo la automatización del proceso que
conlleva realizar los trámites de la secretaría y gracias a esto ahorrar mucho tiempo y esfuerzo para
dedicarlo a otras tareas que requieran atención.

Lo anterior se encuentra reflejado en este trabajo, el cual además se desarrolla en tres capítulos
interiores consistentes en los siguiente:
• Capítulo I, en el cual se explica el contexto e identificación del problema que justifica el
planteamiento de la solución aquí expuesta.
• Capitulo II, muestra el marco teórico de la aplicación, su estructura y diseño.
• Capitulo III, en el cual se muestra explícitamente el caso aplicado a la empresa en estadía.
• Así mismo se cuenta con las referencias consultadas, las conclusiones y recomendaciones y
por ultimo los anexos.

Este documento implicó un gran esfuerzo, con el propósito de que pueda ser útil tanto a la empresa
como a los lectores del mismo.

1
CAPITULO I. MARCO METODOLÓGICO

1.1. Generalidades de la empresa y área donde se desarrollará la estadía

1.1.1. Generalidades de la empresa

La Secretaría Distrital de Movilidad es un organismo del Sector Central con autonomía administrativa y
financiera que tiene por objeto orientar y liderar la formulación de las políticas del sistema de movilidad
para atender los requerimientos de desplazamiento de pasajeros y de carga en la zona urbana, tanto
vehicular como peatonal y de su expansión en el área rural del Distrito Capital en el marco de la
interconexión del Distrito Capital con la red de ciudades de la región central, con el país y con el exterior.

Figura 1: Logo de la secretaria de Movilidad del Estado de Tabasco

1.1.2. Misión de la empresa

Ser una dependencia del Poder Ejecutivo del estado de Tabasco, cuyo eje rector sea el derecho
humano a la movilidad incluyente, moderna, sostenible y con apego al marco jurídico normativo que
garantice el respeto de los derechos humanos para garantizar el desplazamiento de los habitantes
del Estado, utilizando como medios para lograr este objetivo el impulso de la cultura de la movilidad
y de la seguridad vial, las cuales coadyuvarán a la consolidación de una efectiva movilidad que
privilegie las calles completas, el transporte público peatonal y no motorizado; de tal manera, que se
logre el equilibrio de los factores sociales, económicos y medioambientales.

1.1.3. Visión de la empresa

Es la secretaría que diseña, planea y establece políticas públicas, programas y normas, para garantizar
el desplazamiento de las personas; supervisar, sancionar, orientar y dirigir la movilidad sostenible, para
la accesibilidad universal de los habitantes a los servicios y satisfactores urbanos, a fin de que accedan
a los bienes, servicios y oportunidades que ofrecen sus centros de población en el estado de Tabasco.

2
1.1.4. Área donde se desarrollará la estadía

Estaré realizando mi estadía en la unidad de apoyo técnico e informático área en la que estaré a
cargo del M. C. Ángel Miguel Iris Pastor y que se encuentra ubicada en la Secretaría Distrital de
Movilidad (SEMOVI).

1.2. Tema de la estadía

Desarrollo de aplicaciones web.

1.3. Antecedentes y justificación

1.3.1. Antecedentes

Actualmente la secretaria de movilidad cuenta con un sistema informático de gestión de trámites

obsoleto, escrito para ser interpretado por plataformas que han perdido el soporte continuo de
actualizaciones y parches de seguridad, así como la capacidad de ser mantenidas en formato de
código heredado. Lo anterior ha obligado a la administración a ofrecer solo sus trámites de forma
presencial en las instalaciones de la secretaría y sin la capacidad de automatizar, gestionar y explotar
la información de los mismos.

1.3.2. Justificación

Derivado de la pandemia mundial, la administración pública debió cambiar la forma en la que atendía
las solicitudes (trámites) de los ciudadanos. Actualmente no se cuenta con un protocolo que evite
aglomeraciones de personal en las instalaciones o permita el control total de las solicitudes.

1.4. Objetivos

1.4.1. Objetivo general

Automatización del proceso de solicitudes y atención de trámites de la secretaría de Movilidad del

estado de Tabasco.

3
1.4.2. Objetivos específicos

• Recabar información a través de entrevistas, cuestionarios o guías de observación

• Analizar la información obtenida
• Realizar el diseño de la base de datos
• Realizar el diseño de la aplicación
• Realizar la codificación de la aplicación
• Hacer las pruebas pertinentes
• Generar la documentación de la aplicación
• Instalar la aplicación y capacitar a los usuarios

1.5. Alcance

Automatización y publicación de un sistema informático que permita realizar la totalidad de los 30

trámites de la secretaría de movilidad desde internet manteniendo en todo momento la trazabilidad
del trámite.

Algunos de los alcances que se pretende obtener con la automatización de este proceso son:
• Reducción del uso de papel en la Secretaría
• Accesibilidad a los trámites de la secretaría sin que los usuarios de municipios lejanos deban
trasladarse al municipio de el centro para realizarlos.
• Generación del padrón único de candidatos a realizar trámites en la secretaría.
• Generación de un expediente digital único por concesionario o permisionario.

1.6. Metodología de trabajo

Scrum es un proceso de gestión que reduce la complejidad en el desarrollo de productos para

satisfacer las necesidades de los clientes. La gerencia y los equipos de Scrum trabajan juntos
alrededor de requisitos y tecnologías para entregar productos funcionando de manera incremental
usando el empirismo.

Scrum es un marco de trabajo simple que promueve la colaboración en los equipos para lograr
desarrollar productos complejos. Ken Schwaber y Jeff Sutherland han escrito La Guía Scrum para
explicar Scrum de manera clara y simple.

4
El Marco Scrum

Scrum es simple, no es una gran colección de partes y componentes obligatorios definidos de manera
prescriptiva. Scrum no es una metodología, Scrum está basado en un modelo de proceso empírico.
Con respeto a las personas y basado en la autoorganización de los equipos para lidiar con lo
imprevisible y resolver problemas complejos inspeccionando y adaptando continuamente.

Figura 2: Metodología Scrum

Los Eventos Scrum

Los eventos de Scrum se utilizan para minimizar la necesidad de reuniones no definidas en Scrum y
establecer una cadencia que permita al equipo fomentar la comunicación y colaboración reduciendo
el tiempo en reuniones extensas además de reducir los procesos restrictivos y predictivos. Todos los
eventos tienen una caja de tiempo o “TimeBox”. Una vez que se inicia un Sprint este tiene una
duración fija y no se puede acortar o alargar. Los siguientes eventos pueden terminar siempre que
se logre el propósito del evento, pero dentro de la caja de tiempo y asegurando el fomento de la
transparencia. Los eventos de Scrum son:
• Sprint
• Sprint Planning
• Daily Scrum
• Sprint Review
• Sprint Retrospective

5
Artefactos Scrum

Los artefactos de Scrum formas para proveer transparencia y oportunidades de inspección y

adaptación. Los artefactos definidos por Scrum están específicamente definidos para fomentar la
transparencia de la información de tal manera que todos tengan el mismo entendimiento de lo que
se está llevando a cabo a través de los artefactos. Los artefactos Scrum son:
• Product Backlog
• Sprint Backlog
• Increment

Scrum mucho más que Roles, Eventos y Artefactos.

Cuando se trata de representar Scrum en muchas ocasiones se usan algunas imágenes que
muestran los roles, eventos y artefactos para definir Scrum. Si solo se usan estos elementos o se
define Scrum en base a estos elementos se puede estar fomentando un enfoque mecánico de Scrum
o un Scrum flácido que finalmente no es Scrum. Estos tres elementos de Scrum son solo una parte
de la historia.

6
CAPITULO II: MARCO TEÓRICO

2.1 Fundamentos Teóricos

2.1.1 Tecnologías Web

(significados.com, 2015) Creemos conveniente comenzar haciendo una diferenciación entre los
principales segmentos que componen cualquier desarrollo web.

En primer lugar, encontramos el frontend, la parte visible de la plataforma, donde los usuarios
interactúan y acceden al contenido. Por otro lado, tenemos el backend, encargado de la lógica,
permitir que la interfaz funcione, procesar la información y conectarse con el servidor.

Para gestionar ambos, hace falta una serie de lenguajes y frameworks, estos son las tecnologías
para desarrollo web que vamos a analizar detalladamente.

Es importante no confundirlas con CMS como WordPress, PrestaShop o Magento. Estos sistemas
de organización de contenidos son entornos de trabajo para crear plataformas por parte de usuarios
como administradores y participantes.

Tecnologías Frontend:
Hablamos del HTML, CSS y JavaScript, los tres permiten el desarrollo de la parte gráfica del
proyecto y la interfaz de usuario. Según StackOverflow, el 69,7% de los programadores han
utilizado JavaScript, convirtiéndolo en el lenguaje más consultado por los desarrolladores en
todo el mundo, seguido por el HTML/CSS con un 63,1%.

Tecnologías backend o del lado del servidor

Además de los lenguajes de programación que definen el «idioma» y cómo estará escrito el
código, es importante destacar la importancia de los frameworks de desarrollo. Una serie de
herramientas y librerías de código pre-escrito que facilitan a los desarrolladores las tareas
cotidianas o de uso común para evitar ejecutarlas desde cero.

Los frameworks dan un marco de trabajo para programar en un lenguaje y las librerías se
encargan de solucionar problemas haciendo el código más legible.

7
2.1.2 Frameworks y librerías

(Fernandez, 2021) Además de los lenguajes de programación que definen cómo estará escrito el
código, es importante destacar la importancia de los frameworks de desarrollo.

Una serie de herramientas y librerías de código prescrito que facilitan a los desarrolladores las tareas
cotidianas o de uso común para evitar ejecutarlas desde cero.

2.1.2.1 Angular

Entre los frameworks más usados se encuentra Angular, perfecto para aplicaciones web. Además,
utiliza HTML para realizar UI y es compatible con las últimas versiones de Chrome, Firefox, Edge,
iOS y Android.

Figura 3: Logo Angular

2.1.2.2 React

React está escrito en código abierto en JavaScript, muy útil para construir las interfaces de usuario.
Es una biblioteca, aunque muchos programadores la consideran un framework por la excelencia de
sus componentes. Así mismo, admite y combina diferentes idiomas y tecnologías.

Figura 4: Logo React

2.1.2.3 Vue.JS

Figura 5: Logo Vue.JS

Es un framework progresivo escrito en JavaScript en código abierto, se puede adaptar fácilmente a

cualquier proyecto, convirtiéndose en una de las tecnologías web más populares.

8
2.1.3 Aplicación Web

(Carranza, 2021) Son programas que funcionan en internet. Es decir, que los datos o los archivos en
los que trabajas son procesados y almacenados dentro de la web. Estas aplicaciones, por lo general,
no necesitan ser instaladas en tu computador.

El concepto de aplicaciones web está relacionado con el almacenamiento en la nube. Toda la

información se guarda de forma permanente en grandes servidores de internet y te envían, a tu
dispositivo o equipo, los datos que requieres en ese momento, dejando una copia temporal dentro
de tu equipo.

En cualquier momento, lugar y desde cualquier dispositivo puedes acceder a este servicio, solo
necesitas una conexión a internet y tus datos de acceso, que, por lo general, son el nombre de
usuario y contraseña.

Estos grandes servidores de internet que prestan el servicio de alojamiento están ubicados alrededor
de todo el mundo, así hacen que el servicio prestado no sea tan costoso, o que sea gratuito, en la
mayoría de los casos, y extremadamente seguro.

2.1.4 Usabilidad

(Castillo, s.f.) La usabilidad web se refiere a la facilidad de uso que tiene una página o aplicación
web. De esta forma los internautas interactúan con el sitio y consiguen sus objetivos de forma
sencilla, intuitiva, agradable y segura.

Ella es una de las características fundamentales para que los usuarios visiten plácidamente un sitio
web y regresen nuevamente a él, mejorando así la estrategia de marketing digital de la empresa.

La usabilidad web mide tres factores principales:

• Eficiencia: El usuario satisface la necesidad de su búsqueda;

• Eficacia: El usuario logra rápidamente alcanzar su cometido;

• Satisfacción: El usuario se sintió agradable al navegar por el sitio web.

9
2.1.5 Base de Datos

(Poveda, 2015) Una base de datos es una recopilación organizada de información o datos
estructurados, que normalmente se almacena de forma electrónica en un sistema informático.
Normalmente, una base de datos está controlada por un sistema de gestión de bases de datos
(DBMS). En conjunto, los datos y el DBMS, junto con las aplicaciones asociadas a ellos, reciben el
nombre de sistema de bases de datos, abreviado normalmente a simplemente base de datos.

Los datos de los tipos más comunes de bases de datos en funcionamiento actualmente se suelen
utilizar como estructuras de filas y columnas en una serie de tablas para aumentar la eficacia del
procesamiento y la consulta de datos. Así, se puede acceder, gestionar, modificar, actualizar,
controlar y organizar fácilmente los datos. La mayoría de las bases de datos utilizan un lenguaje de
consulta estructurada (SQL) para escribir y consultar datos.

2.1.6 Modelos de Bases de Datos

(Modelos de bases de datos, 2002) Un modelo de base de datos es la estructura lógica que adopta
la base de base datos, incluyendo las relaciones y limitaciones que determinan cómo se almacenan
y organizan y cómo se accede a los datos. Así mismo, un modelo de base de datos también define
qué tipo de operaciones se pueden realizar con los datos, es decir, que también determina cómo se
manipulan los mismos, proporcionando también la base sobre la que se diseña el lenguaje de
consultas.

En general, prácticamente todos los modelos de base de datos pueden representarse a través de un
diagrama de base de datos.

2.1.6.1 Modelo de base de datos relacional

El modelo de base de datos relacional es uno de los más comunes. Este modelo es el que emplean
las bases de datos relacionales y ordena los datos en tablas (relaciones) compuestas por columnas
y filas.

Cada columna alberga un atributo de la entidad (nombre, dirección, fecha de nacimiento…); a los
atributos de una relación se los llama dominio.

Escogiendo un atributo en concreto o una combinación de varios tenemos una clave primaria, a la
que se puede hacer referencia en otras tablas, en las que será una clave externa.

10
En cada fila (tupla) se incluyen datos sobre una instancia específica de la entidad (por ejemplo, un
cliente específico).

Además, el modelo también representa el tipo de relaciones entre las tablas, que pueden ser uno a
uno, uno a muchos o muchos a muchos.

Figura 6: Ejemplo del modelo relacional

2.1.6.2 Modelo jerárquico

Si vamos a emplear una base datos jerárquica, el modelo de datos que emplearemos será el
jerárquico, que se caracteriza por presentar los datos en una estructura de árbol invertido, donde
cada registro tiene un único nodo raíz, del que surgen otros nodos (registros); los nodos en un mismo
nivel son nodos padres, cada nodo padre tiene el mismo nodo raíz, y puede tener nodos hijos, pero
los nodos hijos solo pueden tener un nodo padre. Este modelo se emplea poco actualmente.

En este modelo, los registros de un mismo nivel se clasifican en un orden específico.

Figura 7: Ejemplo del modelo jerarquico

11
2.1.6.3 Modelo de red

El modelo en red de base de datos parte del modelo jerárquico, pero aquí se permiten las relaciones
de uno a muchos o de muchos a muchos entre registros vinculados, teniendo registros principales
múltiples. El modelo se crea a través de conjuntos de registros relacionados; cada uno de estos
conjuntos consiste en un registro propietario o principal y uno o más registros miembros o
secundarios. Además, un registro puede ser miembro o secundario en diferentes conjuntos. Es decir,
que en este modelo se permite que los nodos hijos tengan más de uno nodo padre, de manera que
se pueden representar relaciones más complejas.

Figura 8: Ejemplo del modelo de red

2.1.6.4 Modelo de base de datos orientado a objetos

El modelo de la base de datos orientada a objetos define la base de datos como una colección de
objetos utilizados en la programación orientada a objetos (es decir, que emplear lenguajes como C++
o Java, por ejemplo). Este modelo de base de datos utiliza tablas también, pero no solo se limita a
ellas y permite almacenar información muy detallada sobre cada objeto.

Figura 9: Ejemplo del modelo orientado a objetos

12
Los objetos se dotan de un conjunto de características propias, que a su vez les diferencian de
objetos similares. Los objetos similares pueden agruparse en una clase y cada objeto de esta es una
instancia. Las clases intercambian datos entre sí a través métodos (mensajes).

2.1.6.5 Modelo entidad-relación

El modelo entidad-relación es básicamente el paso previo a uno modelo de bases datos relacional,
puesto que se trata de un diagrama elaborado a través de unos elementos básicos y su relación
entre ellos:
• Entidades (son los objetos que se representan en la base de datos).
• Atributos (son el contenido de la entidad, sus características). A los atributos se les asigna
un clave para distinguirlos de los demás registros.
• Relación (el vínculo que define la dependencia entre varias entidades).
• Cardinalidad (es la participación entre entidades, que pueden ser uno a uno, uno a varios o
varios a varios).

En el diagrama las entidades se representan con un rectángulo, las relaciones con un rombo y los
atributos con un óvalo.

Figura 10: Ejemplo del modelo entidad - relación

2.1.6.6 Modelo de archivo invertido

El modelo de archivo invertido, también llamado de índice invertido, contiene datos que se usan como
claves en una tabla de consulta, los valores en la tabla se emplear como punteros a la localización
de cada instancia. Actualmente se emplea como índice de las bases modernas de datos, ya que se
trata de tablas de consulta en las que se introduce un contenido mínimo.

2.1.6.7 Modelo plano

El modelo de bases de datos plano, los datos se estructuran en dos dimensiones (de ahí lo de
estructura plana), en la que todos los objetos en una columna concreta tienen valores del mismo tipo
y todos los objetos de la misma fila están relacionados entre ellos.

13
Por ejemplo, en una base de datos que recoja solo el nombre de usuario y la contraseña, cada fila
recogerá el nombre y la contraseña correspondiente para cada usuario.

Figura 11: Ejemplo del modelo plano

2.1.6.8 Modelo multidimensional

El modelo de base de datos multidimensional está pensado para la creación de aplicaciones

específicas OLAP (procesamiento analítico en línea). Este modelo de base de datos se puede
visualizar como un cubo de datos en el que se representan diferentes dimensiones de los datos
disponible; las dimensiones de los cubos se corresponden con la de la tabla y el valor almacenado
en cada celda equivale al valor de la métrica.

Este modelo combina el modelo relacional con el jerárquico y permite extraer datos de forma selectiva
y eficaz. Sin embargo, tiene un inconveniente, y es que no se puede modificar su estructura, lo que
obliga a diseñarlos desde cero cuando hay que introducir cambios.

Figura 12: Ejemplo del modelo multidimensional

2.1.6.9 Modelo semiestructurado

Cuando los datos no encajan en el formato de tablas, filas y columnas, sino que se organizan
mediante etiquetas con las que se los puede agrupar y crear jerarquías (como ocurre con los datos
de una página web), estamos hablando de datos semiestructurados.

14
Para ordenador estos datos en una base de datos, podemos recurrir al modelo semiestructurado. En
este modelo no hay separación entre los datos y el esquema y resulta útil para describir sistemas o
describir interacciones entre bases de datos no que se acogen al mismo esquema.

Figura 13: Ejemplo del modelo semiestructurado

2.1.6.10 Modelo de contexto

El modelo de contexto se puede usar cuando se necesita incorporar elementos de otros modelos de
bases de datos. Puede adoptar elementos de modelos orientados a objetos, semiestructurados y en
red.

Figura 14: Ejemplo del modelo de contexto

2.1.6.11 Modelo asociativo

En modelo asociativo los datos se dividen en entidad y asociación, de manera que una entidad es todo
lo que existe de manera independiente y una asociación es algo que solo existen en relación a algo
más. Así, los datos se estructuran en dos grupos:
• Elementos, donde cada uno tiene un identificador único, un nombre y un tipo.

15
• Enlaces, donde cada tiene un identificador único e identificadores únicos de una fuente, verbo u
objeto. La información almacenada está relacionada con la fuente y cada uno de los tres
identificadores pueden hacer referencia a un enlace o a un elemento.

Figura 15: Ejemplo del modelo asociativo

2.1.7 Lenguajes de Programación Orientado a Objetos

(Martinez Canelo, 2020) Para considerar un lenguaje de programación como orientado a objetos se
deben cumplir varias condiciones. Debe soportar objetos, que deben tener un tipo o clase asociado
y que estas clases puedan heredar atributos de una clase superior o superclase.

Actualmente existen una gran variedad de lenguajes de programación orientados a objetos entre los
que podemos destacar: C++, Objective C (es el lenguaje principal de programación para Mac OS X,
iOS), Java, Ruby, Visual Basic, Visual C Sharp, Perl, Smalltalk, PHP o Python.

C++ junto con Java, son los dos lenguajes de programación orientada a objetos más utilizados
actualmente (según datos proporcionados por el índice de programación Tiobe). Por lo tanto, cuando
se quiere acceder a un curso de programación orientada a objetos, siempre hay que tener ambos
lenguajes en cuenta, sobre todo para ampliar las opciones de encontrar ofertas de empleo en el
mercado laboral.

Python, PHP y Ruby son tipos de lenguajes de programación orientada a objeto muy populares y
enfocados a la programación y desarrollo web (este tipo de programación, así como las aplicaciones
para móviles son ejemplos de la programación orientada a objetos).

Existen otros lenguajes de programación más específicos como ADA, centrado en la seguridad y
utilizado para aplicaciones de defensa. líneas aéreas, etc.

16
2.1.7.1 Python

Python es de código abierto, con una sintaxis simple y sencilla de entender, quizá el más fácil de este
listado. Es idóneo para iniciarse en el mundo de la programación. Es muy versátil por lo que tiene
múltiples áreas de aplicación como: inteligencia artificial, Big Data y desarrollo web.

Figura 16: Logo de Python

2.1.7.2 Java

Este lenguaje orientado a objetos funciona independientemente de la plataforma de hardware,

entonces, el código escrito en una máquina corre en otra, sin problemas. Incluso, si los sistemas
operativos son diferentes, el código Java funciona gracias a la Máquina Virtual Java o JVM, por las
siglas en inglés.

Figura 17: Logo Java

Su ámbito de aplicación es tan amplio, que existe software desarrollado para puntos de ventas,
cajeros automáticos, internet de las cosas, dispositivos móviles, aparte de páginas web con este
lenguaje.

2.1.7.3 JavaScript

Otro lenguaje de programación orientado a objetos. Como es interpretado, no necesita compilación,

entonces los navegadores leen el código y ejecutan las acciones indicadas.

Figura 18: Logo JavaScript

17
Esta característica, lo hace idóneo para crear páginas o aplicaciones web, con elementos interactivos
o más visuales, de allí su relevancia en el desarrollo de videojuegos.

La capacidad de ejecutarse desde el navegador, lo hace el lenguaje más usado en el mundo, pues,
aunque un sitio web esté hecho en otro lenguaje, puede contener algo desarrollado en JavaScript.

2.1.7.4 HTML

HTML es un lenguaje de marcado usado para la creación de sitios web. Consiste en un conjunto de
códigos cortos, que se clasifican como archivos de textos en las etiquetas. Dicho de otra manera, el
texto se guarda en un archivo llamado HTML que se puede encontrar a través de los buscadores.
Cada una de las etiquetas generadas tiene diferentes funciones.

De forma breve, HTML sirve para describir el contenido de un sitio web, como la información
estructurada de párrafos, imágenes, etc. Por eso, HTML es una de las habilidades indispensables
de un desarrollador web.

Figura 19: Logo HTML

2.1.7.5 CSS

CSS es una de las tecnologías para Desarrollo Web a la que más recurren los programadores
gráficos a la hora de desarrollar sus proyectos. Es un lenguaje que sirve, sobre todo, para indicar la
representación visual de las estructuras HTML. De esta manera, el lenguaje CSS sirve para acotar y
trazar el aspecto visual de las etiquetas generadas por el HTML.

Figura 20: Logo CSS

18
2.1.7.6 C#

C# es un lenguaje de programación muy versátil, creado por Microsoft, con características similares
al Lenguaje C, pero orientado a objetos. Es muy usado en la industria de los juegos, robótica,
impresión 3D, internet de las cosas y desarrollo de aplicaciones web y móviles. Así como también,
en el desarrollo de aplicaciones nativas para Microsoft, iOS y Android, como controladores y
aplicaciones de escritorio.

Entonces, si quieres ser parte del mundo de los videojuegos, debes aprender a programar en
lenguaje C#.

Figura 21: Logo C#

2.1.7.7 PHP

PHP es un lenguaje de programación multipropósito que permite desarrollar aplicaciones del lado del
servidor, garantizando una excelente comunicación con la web. Esta capacidad comunicativa entre
la web y el servidor produce el desarrollo de páginas web muy estables y con un excelente
rendimiento.

A través de PHP, se han creado grandes aplicaciones, herramientas y plataformas, como Facebook,
Gmail, Wikipedia y WordPress.

Figura 22: Logo PHP

19
2.1.7.8 C/C++

C++ es un lenguaje de programación creado, como una extensión del lenguaje C, para hacerlo
orientado a objetos. Es capaz de compilar instrucciones, por lo que brinda acceso total al hardware,
originando su amplio uso en bases de datos, navegadores web y videojuegos.

Figura 23: Logo C/C++

2.1.7.9 R

R es un lenguaje de programación orientado a la estadística, muy utilizado en cálculo y análisis

estadístico, así como en la generación de gráficos estadísticos. Debido a este enfoque, el lenguaje
R es muy usado en investigación científica y biomédica, matemáticas financieras, minería de datos,
Machine Learning y Data Science.

Figura 24: Logo R

2.1.7.10 MySQL

MySQL, es una base de datos relacional y es el sistema gestor de bases de datos que más utilizan
los programadores en la actualidad. Y esto es por varias razones, entre ellas, que está basada en un
código abierto GPL, que es multiplataforma y que está desarrollado en C. Además, este sistema
trabaja con tablas múltiples.

Figura 25: Logo MySQL

20
Estas se interconectan entre sí, de manera que se asegura el correcto almacenaje y organización de
toda la información extraída. Además de crear bases de datos, con MySQL, también podrás hacer
todo tipo de consultas.

2.1.7.11 Mongo DB

Por la potencia que ofrece a sus usuarios, Mongo DB es una de las bases de datos más utilizadas
en la actualidad y es una base de datos NoSQL. Es un sistema de código abierto que permite un
desarrollo rápido e iterativo que asegura nuevos niveles de escalabilidad y disponibilidad. Eso sí,
esta base de datos está orientada, principalmente, a documentos. Una de sus características más
importantes es que está escrito en C++ lo que permite un mejor uso de los recursos disponibles. Al
igual que ocurre en MySQL, aparte de crear las bases de datos, también es posible hacer consultas.

Figura 26: Logo Mongo DB

2.1.7.12 Objective-C

Objective-C es un lenguaje de programación cimentado en C, orientado a objetos, para crear

soluciones sencillas y flexibles a problemas de programación. Fue el lenguaje principal de Apple para
crear aplicaciones en iOS y macOS, antes de Swift, pero aún es popular por la gran cantidad de
aplicaciones desarrolladas con él.

Figura 27: Logo Objective - C

21
2.1.7.13 Swift

Este lenguaje multiparadigma de Apple fue creado en 2014 para desarrollar aplicaciones para iOS y
macOS, con una sintaxis simple y concisa. Es un lenguaje compilado, con un rendimiento similar al
de C++, por lo que brinda alta productividad a los desarrolladores.

Es excelente para diseñar aplicaciones, porque, además, ahora, es de código abierto y tiene una
comunidad de desarrollo muy grande.

Figura 28: Logo Swift

2.1.7.14 Matlab

Matlab es un lenguaje de programación orientado al cálculo matricial, implementación de algoritmos,

visualización de datos y creación de interfaces de usuario. El Matlab (Matrix Laboratory) es un
lenguaje interactivo, basado en matrices que no requieren estar dimensionadas, lo que facilita la
representación de datos y funciones. Por lo que, genera un entorno sencillo y productivo para el
desarrollo de software.

Figura 29: Logo MatLab

2.1.8 Modelos de Desarrollo

La metodología de desarrollo de software es el conjunto de técnicas y métodos que se utilizan para

diseñar una solución de software informático. Es importante señalar que existen varias, de manera
que es una decisión de cada equipo.

Trabajar con una metodología es imprescindible por una cuestión de organización. No en vano, los
factores tienen que estar ordenados y saber cómo se van a utilizar.

22
Por otra parte, las metodologías también sirven para controlar el desarrollo del trabajo. Esto sirve
para minimizar los márgenes de errores y anticiparse a esa situación.

Otra ventaja de utilizar una metodología es que te hace ahorrar tiempo y gestionar mejor los recursos
disponibles. Esto sucede tanto en metodologías a corto como a largo plazo. Cuando te decantes por
un sistema, has de tener en cuenta este factor. Al final, uno de los elementos básicos es optimizar
los recursos a tu alcance.

Finalmente, hay que hacer referencia al valor añadido. Hay metodologías más costosas,
efectivamente, pero que facilitan que el resultado final sea mejor. Cuando tengas que ponderar los
pros y los contras, te convendrá saber esta cuestión.

2.1.8.1 Modelo en cascada

(Lopez, 2011) El modelo Waterfall, o en cascada, permite organizar el trabajo en vertical, de arriba a
abajo. Esto significa que se realiza una actividad por fases secuenciales y que no es posible pasar a
la siguiente hasta que no se haya verificado la anterior. La gran ventaja es que cada paso que se dé
se hará sobre seguro y eso ahorra tiempo.

La metodología se implantó en la década de 1970 y tiene bien definidas las fases secuenciales. En
primer lugar, el análisis de requisitos. El segundo aspecto a trabajar es el diseño de sistema. En
tercer lugar, el diseño de programa. Posteriormente, la modificación. En quinto lugar, el diseño de
pruebas. Y, finalmente, las fases de codificación y mantenimiento. Cada fase está debidamente
monitorizada, de manera que el avance será efectivo.

Eso sí, conviene señalar que esta metodología no está concebida para cambiarse sobre la marcha.
La razón es que los requisitos y presupuestos no se pueden cambiar, así que convendrá hacer
números antes. Por lo tanto, es una opción válida si se tiene muy claro lo que se quiere desde el
principio.

Figura 30: Modelo Cascada

23
2.1.8.2 Modelo por Prototipos

(EcuRed, s.f.) La metodología de prototipo parte de la base de lo que entenderíamos como un

borrador si escribiéramos. El objetivo es realizar un prototipo de software rápido, sin reparar en los
detalles.

¿Por qué interesa trabajar así en algunos casos? Precisamente, porque lo que se busca es que los
usuarios nos aporten feedback. Y ese feedback puede ser útil en múltiples cuestiones, desde los
fallos técnicos a aquellas mejoras que se pueden introducir o, simplemente, a si los usuarios
consideran funcional la herramienta. No está de más, pues, que se puedan comprobar estas
cuestiones.

Este modelo iterativo permitirá mejorar el producto final y perfeccionarlo. Ahora bien, puede suponer
un coste que no estaba previsto porque se harán cambios sobre la marcha.

Figura 31: Modelo Prototipos

2.1.8.3 Modelo en espiral

(de Acosta, 2013) La metodología en espiral cuenta con cuatro fases distintas y el objetivo es
acercarse a lo que desea el cliente. Cuanto más nos acercamos al centro, más cerca estaremos de
ello.

Figura 32: Modelo Espiral

24
La primera fase de esta metodología es la de planificación del proyecto. En segundo lugar, estará el
análisis del riesgo. La tercera fase a considerar es la de desarrollo del prototipo. Y, finalmente, estará
la evaluación del cliente para dar el visto bueno. El resultado es de buena calidad, porque es el propio
cliente el que cierra el círculo dando su validación o indicando si son necesarias otras modificaciones.

Lo que se busca, en definitiva, es comprobar los avances y trabajar con unas bases sólidas. Por esa
razón, es una metodología que cuenta con un alto seguimiento.

2.1.8.4 Metodología de Programación Extrema (XP)

(Modelado de desarrollo rapido de aplicaciones, 2009) Como metodología ágil de ingeniería de

software, la metodología de programación extrema se conoce actualmente como metodología de XP
(Extreme Programming). Esta metodología, se utiliza principalmente para evitar el desarrollo de
funciones que actualmente no se necesitan, pero sobre todo para para atender proyectos
complicados. Sin embargo, sus métodos peculiares pueden tomar más tiempo, así como recursos
humanos en comparación con otros enfoques.

Estas son solo algunas de las metodologías de Desarrollo de Software que existen, pero lo importante
es que tengas en cuenta que al estar familiarizado con estos populares enfoques podrás optimizar
la eficiencia de tus proyectos utilizando un enfoque puro o combinando algunos de ellos.

Figura 33: Programación extrema

2.1.8.5 Desarrollo Rápido de Aplicaciones (RAD)

El Diseño Rápido de Aplicaciones (RAD) es una técnica concebida para desarrollar un buen software
en poco tiempo. La clave está en tener en cuenta diversos factores.

Este modelo, desarrollado en la década de 1990, se basa en determinados ejes. En primer lugar, en
la construcción de un prototipo para recibir feedback de los usuarios. Por otra parte, se prioriza la

25
velocidad, lo que expone la herramienta a tener más errores de partida. Finalmente, hay que destacar
que el feedback de los usuarios es central para las mejoras.

Figura 34: Modelo RAD

2.1.8.6 Incremental

(Proyectos Agiles, s.f.) El modelo incremental tiene en común con el de cascada el trabajo en fases,
pero, a diferencia de este, cada fase supone añadir una funcionalidad.

Cuando se trabaja en un modelo incremental, se pueden comprobar fácilmente las mejoras. Es más,
se pueden probar estas funcionalidades antes de terminar el desarrollo de la herramienta. Esta es la
razón por la que es uno de los modelos más utilizados. Aunque quizás sea un proceso más lento
que otras metodologías, se aprovecha mejor el tiempo.

Por otra parte, hay que destacar que se puede trabajar con una parte del software. En consecuencia,
no se perderá trabajo realizado previamente.

Figura 35: Modelo Incremental

26
CAPITULO III: MARCO DE APLICACIÓN

3.1 Análisis

3.1.1 Descripción del sistema actual

El proceso que se realiza en el sistema actual consiste en llevar un registro de cada una unidad en
una bitácora y hojas de Excel en las cuales se agrega, modifica y elimina información. De modo que
no se puede mantener un control de todos los datos que se reciben debido a la extensa información
que se genera diariamente.

3.1.2 Detección de problemas y necesidades

3.1.2.1 Problemas

El principal problema que se detectó es que cuando es necesario revisar alguna información o
documento que se haya registrado con anterioridad conlleva mucho tiempo y esfuerzo estarlo
buscando manualmente en todas las hojas de Excel existente hasta encontrarla.

Otro problema que se detectó es que debido a la alta información generada se pierden muchos datos
que en un futuro son requeridos y al momento de buscarlos son inexistentes.

3.1.2.2 Necesidades

La Secretaría de Movilidad del Estado de Tabasco necesita que el sistema a realizar cuente con los
siguientes módulos:
• Alta de unidad.
• Cargar chofer.
• Póliza del seguro.
• Viajes.
• Accidentes.
• Mantenimiento.

27
3.1.3 Estudio de factibilidad

3.1.3.1 Factibilidad Operativa

La alternativa a desarrollar se establecerá principalmente para el área administrativa de la Secretaría

de Movilidad del Estado de Tabasco, teniendo varios usuarios administradores que se encarguen de
registrar toda la información generada diariamente por las unidades de transporte público. Del mismo
modo será diseñada de forma amigable e intuitiva para que los administradores no tengan
dificultades a la hora de utilizarla.

3.1.3.2 Factibilidad Económica

La alternativa únicamente necesita ser implementada en los servidores de la Secretaría de Movilidad

del Estado de Tabasco para su funcionamiento de forma local dentro de esta, sin necesidad de pagar
un servidor externo.

3.1.3.3 Factibilidad Técnica

Equipo o producto Cantidad Especificación

Computadora 1 AMD Athlon 3000G 3.5GHz
16GB RAM
2TB HDD 7200RPM
500GB SSD NV1 M.2
Sistema operativo 1 Windows 11 Pro
Gestor de base de datos 1 MySQL
Editor de código 1 Visual Studio Code
Tabla 1: Descripcion de los equipos o productos

3.1.4 Alternativa de Solución

3.1.4.1 Nombre de la alternativa

Desarrollo del módulo de solicitudes y atención de trámites de la Secretaría de Movilidad del Estado de
Tabasco.

28
3.1.4.2 Descripción de la alternativa

La alternativa le permitirá a la Secretaría de Movilidad tener un mayor y mejor control del transporte
público del Estado, así como darle seguimiento a cada chofer y unidad que este maneje.

3.1.4.3 Mapa de navegación o árbol del sitio

Figura 36: Mapa de Navegación del Sitio

3.1.5 Tecnología a utilizar

3.1.5.1 HTML

HTML es un lenguaje de marcado usado para la creación de sitios web. Consiste en un conjunto de
códigos cortos, que se clasifican como archivos de textos en las etiquetas. Dicho de otra manera, el
texto se guarda en un archivo llamado HTML que se puede encontrar a través de los buscadores.
Cada una de las etiquetas generadas tiene diferentes funciones.

Figura 37: Logo HTML

29
De forma breve, HTML sirve para describir el contenido de un sitio web, como la información
estructurada de párrafos, imágenes, etc. Por eso, HTML es una de las habilidades indispensables
de un desarrollador web.

3.1.5.2 CSS

CSS es una de las tecnologías para Desarrollo Web a la que más recurren los programadores
gráficos a la hora de desarrollar sus proyectos. Es un lenguaje que sirve, sobre todo, para indicar la
representación visual de las estructuras HTML. De esta manera, el lenguaje CSS sirve para acotar y
trazar el aspecto visual de las etiquetas generadas por el HTML.

Figura 38: Logo CSS

3.1.5.3 JavaScript

Otro lenguaje de programación orientado a objetos. Como es interpretado, no necesita compilación,

entonces los navegadores leen el código y ejecutan las acciones indicadas. Esta característica, lo
hace idóneo para crear páginas o aplicaciones web, con elementos interactivos o más visuales, de
allí su relevancia en el desarrollo de videojuegos.

La capacidad de ejecutarse desde el navegador, lo hace el lenguaje más usado en el mundo, pues,
aunque un sitio web esté hecho en otro lenguaje, puede contener algo desarrollado en JavaScript.

Figura 39: Logo JavaScript

30
3.1.5.4 PHP

PHP es un lenguaje de programación multipropósito que permite desarrollar aplicaciones del lado del
servidor, garantizando una excelente comunicación con la web. Esta capacidad comunicativa entre
la web y el servidor produce el desarrollo de páginas web muy estables y con un excelente
rendimiento.

A través de PHP, se han creado grandes aplicaciones, herramientas y plataformas, como Facebook,
Gmail, Wikipedia y WordPress.

Figura 40: Logo PHP

3.1.5.5 MySQL

MySQL, es una base de datos relacional y es el sistema gestor de bases de datos que más utilizan
los programadores en la actualidad. Y esto es por varias razones, entre ellas, que está basada en un
código abierto GPL, que es multiplataforma y que está desarrollado en C. Además, este sistema
trabaja con tablas múltiples.

Estas se interconectan entre sí, de manera que se asegura el correcto almacenaje y organización de
toda la información extraída. Además de crear bases de datos, con MySQL, también podrás hacer
todo tipo de consultas.

Figura 41: Logo MySQL

31
3.2 Diseño gráfico de la aplicación UML

Figura 42:Diagrama UML de la aplicación

3.3 Aplicación de las etapas del modelo de desarrollo

Cualquier sistema de información va pasando por una serie de fases a lo largo de su vida. Su ciclo
de vida comprende una serie de etapas entre las que se encuentran las siguientes:

• Planificación: Averiguar qué es exactamente lo que tiene que hacer el sistema. La etapa de
análisis en el ciclo de vida del software corresponde al proceso mediante el cual se intenta
descubrir qué es lo que realmente se necesita y se llega a una comprensión adecuada de
los requerimientos del sistema.
• Diseño: Se han de estudiar posibles alternativas de implementación para el sistema de
información que hemos de construir y se ha de decidir la estructura general que tendrá el
sistema (su diseño arquitectónico). El diseño de un sistema es complejo y el proceso de
diseño ha de realizarse de forma iterativa.

32
 • Implementación: Seleccionar las herramientas adecuadas, un entorno de desarrollo que
facilite nuestro trabajo y un lenguaje de programación apropiado para el tipo de sistema que
vayamos a construir. La elección de estas herramientas dependerá en gran parte de las
decisiones de diseño que hayamos tomado hasta el momento y del entorno en el que nuestro
sistema deberá funcionar.
• Pruebas: Tiene como objetivo detectar los errores que se hayan podido cometer en las
etapas anteriores del proyecto (y, eventualmente, corregirlos). La búsqueda de errores que
se realiza en la etapa de pruebas puede adaptar distintas formas, en función del contexto y
de la fase del proyecto.

3.4 Descripción del desarrollo de la aplicación

3.4.1 Diagrama físico de la base de datos

Figura 43: Diagrama Físico de la Base de Datos

33
3.4.2 Diccionario de datos

Field Type Null Key Extra

id int NO PRI auto_increment
id_unidad int NO MUL
id_chofer int NO MUL
fecha date YES
archivo varchar(255) YES
descripcion text YES
Tabla 2: Tabla _accidente

Field Type Null Key Extra

id int NO PRI auto_increment
nombre_operador varchar(255) YES
estado int YES
Tabla 3: Tabla _cat_chofer

Field Type Null Key Extra

id int NO PRI auto_increment
tipo_usuario varchar(255) YES
Tabla 4: Tabla _cat_usuarios

Field Type Null Key Extra

id int NO PRI auto_increment
id_unidad int NO MUL
fecha date YES
aceite int YES
llantas int YES
km double YES
otro text YES
costo double YES
Tabla 5: Tabla _mantenimiento

34
 Field Type Null Key Extra
id int NO PRI auto_increment
id_unidad int NO MUL
fecha date YES
kminicial double YES
kmfinal double YES
litros_gas double YES
litros_diesel double YES
litros_gasolina double YES
recaudo double YES
horasalida time(6) YES
horallegada time(6) YES
observaciones text YES
Tabla 6: Tabla _movimientos

Field Type Null Key Extra

id int NO PRI auto_increment
marca varchar(255) YES
modelo varchar(255) YES
anio int YES
serie_chasis varchar(255) YES
serie_motor varchar(255) YES
economico varchar(255) YES
estado int YES
Tabla 7: Tabla _unidad_movil

Field Type Null Key Extra

id int NO PRI auto_increment
id_unidad int NO MUL
empresa varchar(255) YES
num_poliza varchar(255) YES
fecha_inicio date YES
fecha_fin date YES
documento varchar(255) YES
estado int YES
Tabla 8: Tabla _unidad_poliza_seguros

35
 Field Type Null Key Extra
id int NO PRI auto_increment
tipo_usuario int NO MUL
usuario varchar(255) YES
nombre varchar(255) YES
a_paterno varchar(255) YES
a_materno varchar(255) YES
contrasenia varchar(255) YES
estado int YES
Tabla 9: Tabla _usuarios

3.4.3 Pantallas que conforman la aplicación

En la pantalla que se muestra a continuación se observa el inicio de sesión de la aplicación, en donde

cada persona debera colocar su usuario y contraseña para poder acceder a la misma.

Figura 44: Inicio de Sesión

36
A continuación, se visualiza la pantalla del menú principal, en ella se tiene acceso a los módulos que
conforman la aplicación

Figura 45: Dashboard

En la siguientes imagen se visualiza la pantalla de alta de la unidad, donde se colocan los datos del
vehículo que se está dando de alta.

Figura 46: Página de Alta de Unidad

37
En la pantalla de cargar chofer se registran los datos del chofer y se almacenan en la base de datos.

Figura 47: Página de Cargar Chofer

En la página de póliza de seguro se guarda la información referente al seguro del vehículo, en ella
se deberá colocar el numero de la unidad, empresa generadora, numero de póliza, entre otros datos.

Figura 48: Página de Póliza del Seguro

38
La sección de viajes es para poder llevar un control de las salidas que genera el vehículo.

Figura 49: Página de Viajes

En la página que se presenta a continuación se llenan los datos de las unidades que han tenido algún
percance.

Figura 50: Página de Accidentes

39
Por último, la página de mantenimiento es donde se lleva el control del mantenimiento que tiene cada
una de las unidades.

Figura 51: Página de Mantenimiento

40
CAPITULO IV: CONCLUSIONES

Al realizar este proyecto pude adquirir conocimientos y habilidades en cuanto al análisis y diseño de
sistemas en el sector profesional, poniendo en práctica todas las enseñanzas que adquirí a lo largo
de la carrera gracias a los profesores y compañeros con los compartía salón, consolidando así una
aplicación que será de mucha utilidad y facilitará el trabajo de las personas que las utilicen.

Durante el proceso se formularon preguntas a la Unidad de Apoyo Técnico e Informático, en las

cuales sus respuestas me dieron los datos suficientes para poder satisfacer la necesidad presentada
en la Secretaría de Movilidad del Estado de Tabasco. De igual manera tuve apoyo de personas
experimentadas gracias a las cuales toda duda que se me presentaba era aclarada.

41
CAPITULO V: RECOMENDACIONES

Para el correcto funcionamiento de la aplicación web se requieren las siguientes características:

• Tener una conexión a internet estable.

• Tener el servidor activo en el cual se montará el software.
• Mantener segura su sesión de usuario. (contraseñas).
• Asegurar el respaldo de la información periódica.
• No dejar que alguien ajeno interactúe con la aplicación

42
CAPITULO VI: FUENTES CONSULTADAS

Carranza, A. (26 de noviembre de 2021). Definición de aplicación web. Obtenido de

https://www.crehana.com/blog/desarrollo-web/aplicacion-web-que-es/
Castillo, C. (s.f.). Obtenido de Usabilidad en plataformas WEB.
de Acosta, J. (03 de 03 de 2013). modelo o desarrollo espiral. Obtenido de http://modelo-
cascada.blogspot.mx/
EcuRed. (s.f.). Modelos de Prototipos. Obtenido de
http://www.ecured.cu/index.php/Modelo_de_Prototipos
Fernandez, J. (28 de abril de 2021). ¿Cuáles son las mejores tecnologías para desarrollo web?
Obtenido de https://www.armadilloamarillo.com/blog/cuales-son-las-mejores-tecnologias-
para-desarrollo-web/
Lopez, A. (07 de Marzo de 2011). Modelo Cascada. Obtenido de
https://prezi.com/jzdocv3sk32x/modelo-cascada/
Martinez Canelo, M. (02 de noviembre de 2020). ¿Qué es la Programación Orientada a Objetos?
Obtenido de https://profile.es/blog/que-es-la-programacion-orientada-a-objetos/
Modelado de desarrollo rapido de aplicaciones. (2009). Obtenido de Ingenieria de Software:
https://curiosisimos.files.wordpress.com/2009/12/modelo-de-desarrollo-rapido-de-
aplicaciones.pdf
Modelos de bases de datos. (Enero de 2002). Obtenido de
https://es.wikipedia.org/wiki/Base_de_datos#Modelos_de_bases_de_datos
Poveda, M. (2015). Que es una base de datos. Obtenido de https://tomi.digital/es/43607/bases-de-
datos?utm_source=google&utm_medium=seo
Proyectos Agiles. (s.f.). Desarrollo iterativo e incremental. Obtenido de
http://www.proyectosagiles.org/desarrollo-iterativo-incremental
significados.com. (2015). Significado de Web. Obtenido de
https://www.significados.com/web/#:~:text=Qu%C3%A9%20es%20la%20Web%3A&text=S
e%20designa%20como%20'la%20web,1990%20por%20Tim%20Berners%20Lee.

43
CAPITULO VII: ANEXOS

7.1 Cronograma de Actividades

40% de 70% de 100% de

Cronograma de Actividades Semanas Semanas
Avance Avance Avance
Actividad / Temporalidad 1 2 3 4 Evaluación 1 5 6 7 8 9 Evaluación 2 10 11 12 13 14 15 Evaluación 3
Recaudar datos mediante la entrevista
Analizar la información obtenida
Realizar boceto en papel del sistema
Diseñar la base de datos
Diseñar la aplicación web
Desarrollar la base de datos
Desarrollar la aplicación web
Realizar la conexión de la aplicación web a la base de datos
Testar la aplicación web
Implementar la aplicación web
Documentar

Tabla 10: Cronograma de Actividades

44
7.2 Reporte de la Entrevista inicial

Entrevistado: Mtro. Miguel Ángel Yris Pastor

Entrevistador: Manuel Alfonso Gómez Cerda

Tema: Desarrollo del Módulo de Solicitudes y Atención de Trámites de la Secretaría de Movilidad del
Estado de Tabasco.

Objetivo: Conocer los antecedentes sobre los tipos de trámites gubernamentales, definir el objetivo
principal del sistema, y conocer el alcance que se desea de la aplicación.

Tipo de pregunta: Respuesta abierta.

• ¿Qué es la Secretaría de Movilidad del Estado de Tabasco?

• ¿Cuáles son sus funciones?
• ¿Cuál es el motivo principal para desarrollar el sistema?
• ¿Cuántas categorías de trámites existen?
• ¿Cuántos tipos de transporte público existen?
• ¿Qué año mínimo de unidad es autorizado para ser transporte público?

45
7.3 Glosario de términos

Frontend: Es la parte de un programa o dispositivo a la que un usuario puede acceder directamente.

Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan
de la interactividad con los usuarios. Los desarrolladores frontend son aquellos que crean los
componentes visuales de un sitio web. Dan formato a las imágenes, la animación y la interactividad
de un sitio web.

Backend: Es la capa de acceso a datos de un software o cualquier dispositivo, que no es

directamente accesible por los usuarios. Además, contine la lógica de la aplicación que maneja
dichos datos. El backend también accede al servidor, que es una aplicación especializada que
entiende la forma en la que el navegador hace solicitudes. Los desarrolladores backend se encargan
de hacer que la lógica del sitio funcione correctamente, la información se transmita de manera segura
y el desempeño de la aplicación no entorpezca la experiencia del usuario.

Framework: Es un esquema o marco de trabajo que ofrece una estructura base para elaborar un
proyecto con objetivos específicos, una especie de plantilla que sirve como punto de partida para la
organización y desarrollo de software. Utilizar frameworks puede simplificar una tarea o proceso, de
ahí que se trate de una de las herramientas habituales que manejan los Digital Workers, porque les
ayuda a ser más ágiles y productivos.

Base de datos: Es una recopilación organizada de información o datos estructurados, que

normalmente se almacena de forma electrónica en un sistema informático. Normalmente, una base
de datos está controlada por un sistema de gestión de bases de datos (DBMS). En conjunto, los
datos y el DBMS, junto con las aplicaciones asociadas a ellos, reciben el nombre de sistema de
bases de datos, abreviado normalmente a simplemente base de datos. Los datos de los tipos más
comunes de bases de datos en funcionamiento actualmente se suelen utilizar como estructuras de
filas y columnas en una serie de tablas para aumentar la eficacia del procesamiento y la consulta de
datos. Así, se puede acceder, gestionar, modificar, actualizar, controlar y organizar fácilmente los
datos. La mayoría de las bases de datos utilizan un lenguaje de consulta estructurada (SQL) para
escribir y consultar datos.

46