INSTITUTO TECNOLOGICO SUPERIOR

DE SAN ANDRES TUXTLA

“REINGENIERIA DE SOFTWARE DEL SISTEMA DE REGISTROS DEL

DEPARTAMENTO DE ACTIVIDADES EXTRAESCOLARES DEL
INSTITUTO TECNOLOGICO SUPERIOR DE SAN ANDRES TUXTLA”

INFORME TÉCNICO DE RESIDENCIA PROFESIONAL

CARRERA.
INGENIERIA EN SISTEMAS COMPUTACIONALES

PRESENTAN.
GONZÁLEZ AVELINO SARA STEPHANY

PÉREZ QUINTANA LUIS FERNANDO

ASESOR INTERNO.
MTI. VÍCTOR MANUEL CHONTAL AMADOR

ASESOR EXTERNO.
LIC. MIGUEL MIRANDA TAPIA

PERIODO ESCOLAR.
AGOSTO – DICIEMBRE 2024
Agradecimientos.
Resumen.
El presente trabajo denominado como “REINGENIERIA DE SOFTWARE DEL
SISTEMA DE REGISTROS DEL DEPARTAMENTO DE ACTIVIDADES
EXTRAESCOLARES DEL ISNTITUTO TECNOLOGICO SUPERIOR DE SAN
ANDRES TUXTLA”. Tiene de objetivo brindar el servicio de reingeniería de
software a la plataforma que se emplea en el departamento, para que brinde a
todos los usuarios una optimización de los procesos que se realizan en el mismo
departamento. Para que de esa forma se puedan satisfacer las nuevas
necesidades de los usuarios por ejemplo la visualización de la información, así
como la generación de un módulo nuevo para documentos.

Esta es una propuesta la cual se basa en reestructurar un producto ya existente,

para su posterior actualización y mejora en cuanto a los aspectos de funcionalidad
y código. La cual proporcionara un control mas completo de las funcionalidades
anteriores, pero cubriendo los aspectos solicitados por los usuarios y de esa
manera fortalecer la seguridad y estabilidad de los datos manejados. Para
entender mas a fondo lo mencionado la información se dividió en los siguientes
capítulos:

En el capítulo 1 se da a conocer la empresa en donde se desarrolla el proyecto, la

problemática de dicha investigación y la justificación, además se da a conocer la
hipótesis y los objetivos (generales y específicos).

En el capitulo 2 comprende los antecedentes teóricos investigados y el

fundamento teórico para los procesos de desarrollo de reingeniería de software.

En el capitulo 3 se describen cada una de las actividades realizadas para llevar a

cabo el proceso de reingeniería de software.

En el capitulo 4 se muestran todos los resultados obtenidos, así como las

conclusiones, recomendaciones y experiencia laboral adquirida a lo largo del
proyecto.
Índice.
Introducción.

Descripción de la empresa
El Instituto Tecnológico Superior de San Andrés Tuxtla, se encuentra ubicado en:
la carretera costera del golfo S/N KM 140+100 de la localidad de Matacapan
perteneciente al municipio de San Andrés Tuxtla Veracruz, en dicha institución se
encuentra el departamento de actividades extraescolares el cual es el encargado
de llevar a cabo todo lo relacionado a actividades culturales y recreativas dentro
de la escuela.

Problemas a resolver.
El Instituto Tecnológico Superior de San Andrés Tuxtla es una institución dedicada
a la formación de nuevos profesionistas mediante los diferentes planes de estudio
de las diversas carreras que están disponibles en dicha institución.

Dentro de este plantel educativo existe un departamento que lleva por nombre
“Actividades extraescolares”. Dicho departamento emplea un sistema web al cual
se ha determinado que habrá que realizar un proceso de reingeniería.

A día de hoy, la fase de elaboración del primer prototipo se encuentra concluida y

avalada por el TECMN la cual es el cargado de la supervisión de toda la
infraestructura de los tecnológicos a nivel nacional. Dichas las fases de la
reingeniería constan de: reestructuración de datos, reestructuración de código e
ingeniería directa para que así se pueda verificar que el nuevo prototipo este
acorde a las necesidades de la empresa.

Dicho prototipo cuenta con 4 módulos los cuales están distribuidos para cada tipo
de usuario del sistema los cuales son: administradores, promotores y auxiliares, y
en donde los módulos trabajan entre si para garantizar, el optimo rendimiento en
las actividades del departamento. Como parte de la reingeniería es necesario
realizar el seguimiento y evaluación del mismo con el fin de llevar a cabo un
análisis profundo y objetivo en cuanto a su funcionalidad.

Objetivos: General y Específicos.

General.
Realizar las etapas de reingeniería de software para posteriormente iniciar con el
seguimiento y evaluación del prototipo del Sistema del Departamento de
actividades Extraescolares del ITSSAT.

Específicos.

1) Analizar el prototipo que se cuenta actualmente en el departamento para

detectar carencias y/o fallas para poder corregirlas y mejorarlas.

2) Realizar una reestructuración de los datos y las actividades que esta

desempeña en base a los inconvenientes detectados para su modificación.

3) Realizar la reestructuración en el código para que así este funcione acorde a

todos los cambios señalados.

4) Aplicar todos los pasos de la ingeniería de software para los nuevos

requerimientos que fueron solicitados por el usuario

5) Realizar la instalación y configuración del sistema con el fin de poder detectar

todos los fallos e inconsistencias que pueda llegar a presentar en el equipo
destino.

6) Investigar todos aquellos métodos de evaluación y seguimiento que sean

necesarios para el sistema y así seleccionar el que se adecue más a este, y poder
así lograr con el objetivo general.

Justificación
Una de los principales objetivos de la reingeniería es analizar, modificar y mejorar
un sistema de software existente con el objetivo de aumentar su funcionalidad,
eficiencia y seguridad. Lo cual ayuda a la automatización de los procesos de la
empresa o departamento en donde se encuentre dicho software. Por ende, en el
departamento de actividades extraescolares del ITSSAT, cuenta con un software
en donde cuenta con una variedad de acciones, sin embargo, dicho software fue
desarrollado por alumnos del mismo instituto, pero hoy en día han surgido nuevas
necesidades dentro del departamento mismas que serán agregadas para el mejor
funcionamiento de la plataforma , inicialmente se contaba con apartados de las
diferentes actividades extraescolares que se cuentan en el plantel las cuales son:
danza, futbol, basquetbol, beisbol y volibol. En donde se podía registrar cuantos
grupos podía haber de cada actividad, los alumnos que cada grupo tenía ya que
va dependiendo por horarios, además cuenta con apartados para validar usuarios,
dentro del mismo departamento, ahora los rubros que requieren cubrir es que
tenga un módulo para que los alumnos puedan acceder a checar su estatus dentro
de su actividad correspondiente, que puedan descargar documentos de
importancia como son: sus calificaciones o su carta de liberación, además que los
promotores de dichas actividades puedan subir las calificaciones de los alumnos y
puedan descargar sus documentos por grupo como las listas de asistencia o el
plan de actividades que tienen postulado para cada sesión.

Capitulo II. Marco teórico

Antecedentes Teóricos
Antecedente 1. MMI de matriculación y registro de notas, para la escuela
mixta particular No. 103 Mercedes moreno Irigoyen

Desarrollo e implementación de aplicación web Esc. MMI de matriculación y

registro de notas, para la escuela mixta particular No. 103 Mercedes moreno
Irigoyen. La implementación del sistema de matriculación y registro de notas para
la escuela particular mercedes moreno Irigoyen ubicada en las calles pio Montufar
y Gral. José Gómez, fue propuesto como herramienta software para llevar un
control escolar de: pre registro de estudiantes matriculados 2° hasta 7° grados, las
fichas de: matriculas del alumnado, representantes y docentes, reporte de
calificaciones por materia dado que las asignaturas tienen la misma estructura en
el árbol de parciales, se pueden ingresar notas en los diferentes años de
educación básica.

En la institución los departamentos de secretaria llevaban un registro de

matriculación manual, lo que generaba pérdida de tiempo y errores dados que
existían documento mal elaborados. Los egresados marianos Álava y Cristian
mejía llevaron a cabo la implementación de una aplicación web para el
establecimiento escolar como herramienta de control para gestión educativa.

Los módulos que se desarrollaron fueron: matriculación y registro de notas

utilizando lenguaje PHP junto con Laravel, un framework de código abierto para
desarrollar aplicaciones y servicios web.

Laravel, propone una forma de desarrollar aplicaciones web de un modo mucho

más ágil. Se aplico el patrón de diseño MVC (Modelo-Vista-Controlador)
tradicional, donde al igual que otros frameworks PHP, el controlador es
programado como una clase. El resultado final fue una aplicación web que permite
la matriculación de los estudiantes y el registro de notas, como una herramienta
de fácil manejo y de entendimiento, con características profesionales como
cuadros de diálogos, mensajes emergentes, reportes en PDF y de seguridad es
de usuario y acciones a opciones de menú con restricciones por rol.
Antecedente 2. Innovat Escuelas Privadas - Sistema de Gestión Escolar.

La siguiente generación de tecnología web que ya utilizan cientos de colegios,

escuelas y universidades en México para una administración más simple y eficaz
es: Innovat Escuelas Privadas - Sistema de Gestión Escolar.

Es una plataforma digital de comunicación entre el colegio y los padres de familia

por medio de la cual recibirán información oficial, administrativa, académica y
financiera respecto a su hijo(a). Nota: El sistema puede ser consultado de dos
formas: página web el cual tiene que estar constantemente revisándose y App
para teléfono que deberá tener activadas las notificaciones.

Una vez realizado el pago de inscripción, recibirán a los correos electrónicos

registrados en su ficha de inscripción: el usuario y un link donde podrán crear su
contraseña. Existen 2 opciones:

a) App: INNOVAT Alumno

b) Web: www.colegioteifaros.edu.mx

Este módulo es excelente para conocer datos relevantes sobre la población

escolar en general o de un alumno en particular. Por ejemplo, con este módulo
puedes conocer desde si un alumno tiene beca, alergias hasta los datos de
facturación de sus padres. Además, te permite agrupar listados o categorías de
alumnos para poder tener un mejor control de la administración escolar. Desde
este módulo -que requiere el módulo de Mural Web- se pueden programar avisos
para ser enviados a toda la comunidad, algún grupo en específico o incluso a un
alumno en particular. También es posible programar avisos por grados escolares,
por ejemplo, solo mandar avisos a primaria o solo a secundaria. Los avisos son
publicados en un mural al que tienen acceso los padres de familia. Desde este
módulo también es posible enviar notificaciones en la app o por correo
electrónico. Como escuela puedes darte cuenta si el papá lo abrió y si se dio por
enterado. En escolar también se pueden generar impresión de documentos
personalizados. Ya no tienes que llenar los documentos uno por uno.
Antecedente 3. Reingeniería de HW y SW para optimización de Recursos
Computacionales en los sectores productivo, empresarial y de Servicios de
la Región de los Tuxtlas

La empresa Nueva Matacapan Tabacos S.A de C.V., es una empresa familiar que
elabora puros y realiza todas las etapas del proceso de fabricación de los mismos
desde la siembra de la planta de tabaco hasta el empaquetado y venta nacional e
internacional.

En esta empresa se está realizando un proceso de Reingeniería de Software a su

Sistema de Producción de Puros como Proyecto de la Línea de Investigación
“Reingeniería de HW y SW para optimización de Recursos Computacionales en
los sectores productivo, empresarial y de Servicios de la Región de los Tuxtlas”.

A la fecha, la fase de elaboración del primer prototipo preliminar está concluida y

avalada por la Contraloría General de la empresa, siendo las siguientes fases de
la reingeniería de software: re-estructuración de datos, reestructuración de código
e ingeniería directa, para efecto de verificar que el prototipo funcione acorde a las
necesidades de la empresa. Asimismo, deberá capacitarse al personal para el uso
operativo del prototipo ya que son parte fundamental para manipular el sistema.

Dicho prototipo actualmente cuenta con 5 módulos que trabajan de manera

independiente, los cuales son almacén de tabaco en rama y despalillado, material,
producción de puros, almacenamiento de puros, y nómina.

Como parte de la reingeniería del prototipo de software de la empresa Nueva

Matacapan Tabacos, es necesario realizar el seguimiento y evaluación del mismo,
con el fin de llevar a cabo un análisis profundo y objetivo en cuanto a
funcionalidad se demande, y así satisfacer las necesidades que se requiera por
parte de la empresa. Cabe mencionar que es el primer caso de reingeniería de
software aplicada en una empresa de la región de los Tuxtlas, ya que no todos los
sistemas están hechos a la medida y no todas las empresas corren el riesgo de
actualizarse con nueva tecnología debido a que muchos tienen temor al cambio y
por ende no logran financiar proyectos de reingeniería de software.
Marco teórico.
Base de datos

Serie de datos organizados y relacionados entre sí, los cuales son agrupados por
los sistemas de información de una empresa o negocio en particular,
proporcionando una infraestructura requerida por los empresarios para la toma de
decisiones y lograr así excelentes ventajas competitivas. La mayoría de las bases
de datos actuales permiten hacer consultas, crear pantallas de visualización de
datos, controlar el acceso de los usuarios, etc. También es cada vez más
frecuente que las consultas se puedan hacer en un lenguaje estándar conocido
como SQL.

Herramientas de programación

HTML: El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza

para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus
contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de
datos.

Ya que HTML define la estructura de una página web, querrás que el texto,
imágenes y otros elementos se muestren de cierta forma.

Por ejemplo, que un texto se vea grande y otro pequeño, que esté en negritas,
cursiva, o sea una lista con viñetas.

HTML tiene "etiquetas" que te dejan hacer esto y mucho más. Hay etiquetas para
crear títulos, párrafos, resaltar palabras, escribir en cursiva, etc.

HTML semántico significa, usar las etiquetas HTML correctas para cada tipo de
contenido.

La semántica ha sido una parte integral de HTML desde su creación, a principios

de los años 90, pero tomó mayor relevancia a finales de los 90, cuando CSS
comenzó a funcionar en los navegadores.

Con HTML semántico, el uso de etiquetas genéricas como <div> y<span> está
mal visto, ya que etiquetas más descriptivas
como <header>, <nav>, <main>, <section>, <footer> y<article> pueden hacer lo
mismo.

Una gran ventaja de utilizar etiquetas semánticamente correctas, es que los web
crawlers pueden indexar fácilmente una página o sitio web, lo que mejorara el
SEO.

Veamos algunas de las etiquetas más importantes en HTML semántico:

<header>: El elemento <header> define la sección introduciría de la página web.

Contiene elementos como el logo, barra de navegación, cambiador de tema y
barra de búsqueda.

<nav>: El elemento <nav> especifica los elementos de navegación de la página,

por ejemplo, home (inicio), contact (contacto), about (acerca de), FAQs (preguntas
frecuentes), etc.

<main>: El elemento <main> contiene las secciones principales del documento

HTML, a excepción de los elementos <header> y <footer>. Idealmente, solo
debería de haber un solo elemento <main> en todo el documento HTML

<section>: EL elemento <section> define una sección específica de la página

web. Esta puede ser la sección acerca de, la sección de contactos, etc. Puedes
utilizar diferentes secciones en el documento HTML.

<article>: EL elemento <article> representa una parte de la página web que

transmite un tipo de información. Por ejemplo, puede ser una combinación de
imágenes, texto, videos, etc. Como su nombre sugiere, este elemento representa
un artículo independiente en un blog que podría tener más artículos

<aside>: el elemento <aside> representa contenido que, aunque no sea parte de

la información principal, está relacionada indirectamente.

<footer>: El <footer> posiciona diferentes elementos, como enlaces destacados,

información sobre derechos de autor o información relevante acerca de la página o
sitio web.
PHP

Es un lenguaje de programación de uso general que se adapta especialmente al

desarrollo web. Fue creado inicialmente por el programador danés-canadiense
Rasmus Lerdorf en 1994. En la actualidad, la implementación de referencia de
PHP es producida por The PHP Group.

El PHP generalmente es definido como un lenguaje del lado del servidor. Esto
significa que se aplica en la programación que tiene lugar en el servidor web
responsable de ejecutar la aplicación o, más a menudo, en un sitio web.

Este trabajo previo permite cargar los elementos de una página antes de
mostrarlos al usuario que accede a un sitio web, por ejemplo.

El código PHP se ejecuta en el servidor que, al leer los comandos, puede activar
todos los elementos funcionales y la interfaz visual del sitio web.

Quizás, la aplicación principal del lenguaje PHP, cuando hablamos de la web, es

estructurar sitios web en WordPress.

PHP trae una serie de beneficios que se identifican fácilmente cuando analizamos
sus características y las diferentes posibilidades de aplicación de dicho lenguaje.

Hoy en día, el mercado de programación busca profesionales con experiencia en

aplicaciones web y, en este escenario, PHP es el principal recurso.

A continuación, te diremos las principales ventajas que muestran por qué el PHP
es un lenguaje muy utilizado, especialmente en proyectos web.

Como es un lenguaje de código abierto, PHP no genera costos para los

programadores que desean trabajar con él, lo cual es una gran ventaja,
especialmente para aquellos que trabajan de manera autónoma.
Esto representa oportunidades para desarrollar aplicaciones generales para la
web, sin ningún problema legal con los fundadores del lenguaje.

Los programadores también pueden usar el facilitador de código abierto para

mejorar aún más PHP, eliminando cualquier tipo de fallas, bugs o, incluso,
trabajando en la optimización del desempeño.

Esta es una práctica muy común en la comunidad PHP, que es proactiva a la hora
de compartir actualizaciones para que todos puedan usar las versiones mejoradas.

Javascript

Es un popular lenguaje de programación de scripts para añadir funcionalidades

interactivas y otros contenidos web dinámicos a las páginas web. Algunos
ejemplos conocidos de contenido en JavaScript son los formularios rellenables, las
presentaciones de galerías de fotos y los gráficos animados.

Además, JavaScript es relativamente intuitivo y fácil de aprender. Es un excelente

punto de partida para aquellos que buscan aprender más sobre el desarrollo de
sitios web.

JavaScript es la última capa de funcionalidad en los sitios web altamente

interactivos. HTML proporciona la estructura básica de la página. CSS es el
elemento de moda de tu sitio web: determina el estilo de tu sitio. A continuación,
JavaScript añade emoción.

Cuando se aprende JavaScript, es esencial entender la relación entre HTML, CSS

y JavaScript, y cómo se unen para mostrar un sitio web.

En primer lugar, es importante señalar que Java y JavaScript no están

relacionados, a pesar de compartir el término «Java». Tanto Java como JavaScript
son lenguajes para desarrollar páginas y aplicaciones web. Sin embargo, tienen
claras diferencias, entre ellas:

Programación orientada a objetos: Java es un lenguaje de programación orientado

a objetos. JavaScript es un lenguaje de programación de scripts orientado a
objetos.
Sintaxis: La sintaxis de JavaScript no es tan formal o estructurada como la de
Java. Por lo tanto, es más sencilla para la mayoría de los usuarios.

Compilación: Java es un lenguaje compilado, mientras que JavaScript es un

lenguaje interpretado que se interpreta línea por línea en tiempo de ejecución; los
lenguajes compilados suelen ser más rápidos, pero los interpretados suelen ser
más flexibles.

Entorno: Las aplicaciones Java se pueden utilizar básicamente en cualquier

entorno, ejecutándose en máquinas virtuales o en navegadores; JavaScript es
solo para navegadores.

Uso de memoria: Java consume más memoria que JavaScript, por lo que este
último es preferible para las páginas y aplicaciones web.

Una biblioteca de JavaScript es una colección de código prescrito que realiza

determinadas funciones. Las bibliotecas permiten incluso a los usuarios
principiantes construir rápidamente sitios web útiles. Y ahorran tanto a los usuarios
novatos como a los experimentados un tiempo considerable en la construcción de
sitios y aplicaciones.

Aunque hay muchas bibliotecas de JavaScript, algunas de las más populares son
jQuery, Anime.js, Animate on Scroll y Leaflet.js.

SQL

El Lenguaje de Consulta Estructurada (SQL) es un lenguaje gestor para el manejo

de la información en las bases de datos relacionales. Este tipo de lenguaje de
programación permite comunicarse con la base de datos y realizar operaciones de
acceso y manipulación de la información almacenada.

ANSI (American National Standards Institute) lo certificó en 1986 y desde

entonces se ha vuelto indispensable para las empresas que trabajan con grandes
cantidades de información.

SQL prevalece como el lenguaje de programación más popular durante las últimas
décadas. Esto se debe a sus propiedades:
Sencillez y comprensibilidad: Para la unificación estructural, usa la sintaxis que es
fácil de interpretar en sus comandos.

Flexibilidad: Los usuarios pueden adaptarlo a cualquier tipo de necesidad, lo que

les permite visualizar datos y encontrar soluciones fácilmente.

Integridad de datos: Protege de fallos y asegura que toda la información sea

correcta y esté completa.

Certificación por ANSI e ISO (International Organization for Standardization):

Cuenta con el sello de aprobación de las entidades que garantizan calidad,
conformidad y seguridad de su uso.

Las bases del lenguaje SQL trabajan con comandos categorizados en los
siguientes subconjuntos:

DDL: lenguaje de definición de datos, está compuesto por los comandos que
definen el esquema de la base de datos, creando, modificando y borrando la
estructura de sus objetos, sin tocar la información contenida en ellos.

Los ejemplos de comandos DDL son: CREATE, DROP, ALTER, TRUNCATE,

COMMENT, RENAME.

DQL: lenguaje de consulta de datos: Su propósito es obtener información

relacionada a la consulta para trabajar con otras operaciones.

Es el caso del comando SELECT.

DML: lenguaje de manipulación de datos, sirve para controlar el acceso de

información a los componentes de la base de datos, mediante la inserción, la
actualización, el bloqueo y el borrado.

Los principales comandos DML son: INSERT, UPDATE, DELETE, LOCK, CALL,
EXPLAIN PLAN.

DCL: lenguaje de control de datos, se emplea para administrar derechos y

permisos para controlar el sistema de la base de datos.

Sus comandos son: GRANT, REVOKE.

TCL: lenguaje de control de transacciones, trabaja con grupos de tareas
preestablecidas de ejecución conjunta. Define las características de las
transacciones y puede ejecutar y crear un punto de guardado, y revertir los
cambios.

Algunos ejemplos de comandos TCL son: COMMIT, ROLLBACK, SAVEPOINT,

SET TRANSACTION.

Bootstrap: es un framework que permite a los desarrolladores web construir

páginas web responsives de una forma más rápida y sencilla. En este sentido,
proporciona un conjunto de componentes y plantillas CSS, HTML y JavaScript que
cualquiera puede utilizar o modificar de manera gratuita.

Su origen lo encontramos en las oficinas de Twitter, donde Mark Otto y Jacob

Thornton lanzaron la primera versión en agosto de 2011 bajo el nombre Twitter
Blueprint. Inicialmente, esta fue una herramienta interna que permitía que el
diseño de esta popular red social fuera coherente y consistente. Sin embargo,
meses más tarde, Twitter liberó el código y el framework en GitHub y lo renombró
como Bootstrap.

Actualmente, Bootstrap se encuentra en su quinta versión y se ha convertido en

uno de los frameworks de desarrollo más populares. De hecho, según estadísticas
de W3Techs, el 19% de las páginas web lo utilizan.

La instalación de Bootstrap es sencilla y su librería de componentes es muy

+amplia. En este sentido, proporciona un gran conjunto de componentes web que
pueden ser incorporados y personalizados en cualquier proyecto: botones, menú
de navegación, galerías de imágenes, formularios, páginas de productos, etc.

Con la ayuda de jQuery, una librería de JavaScript, los desarrolladores pueden

hacer uso de todos sus componentes, los cuales funcionan gracias a estos tres
archivos:

Bootstrap.CSS: contiene los estilos de los diferentes elementos de Bootstrap. Para

utilizarlos o modificarlos, los programadores tan solo tienen que hacer referencia al
componente que deseen.
Bootstrap.js: contiene la lógica de funcionamiento del framework y es el
responsable de la interactividad del sitio web. También, es el encargado de
reinterpretar el diseño según el tamaño de la pantalla de cada usuario.

Glyphicons: proporciona una galería de iconos gratuitos que los desarrolladores

pueden utilizar, aunque también se pueden descargar iconos adicionales
premium.

CSS: es un lenguaje de programación que sirve para determinar el diseño de los

documentos electrónicos. Con la ayuda de unas sencillas instrucciones -
presentadas en forma de código fuente claro-, los elementos del sitio web, como el
diseño, el color y la tipografía, pueden adaptarse como se desee. Gracias a las
hojas de estilo en cascada, la estructura semántica y el contenido del documento
no se ven afectados. CSS surgió a mediados de la década de 1990 y ahora se
considera el lenguaje de hojas de estilo estándar en Internet.

Aunque HTML y CSS se utilizan en combinación, las instrucciones de diseño de

CSS y los elementos de HTML existen por separado. Esto significa que una
máquina puede leer un documento electrónico incluso sin CSS. Con la ayuda de
CSS, el contenido del navegador se prepara visualmente y se presenta de forma
atractiva.

CSS es un “estándar vivo” que sigue siendo desarrollado por el World Wide Web
Consortium. Por esta razón siempre hay nuevas funciones y aplicaciones prácticas
que descubrir. El lenguaje de hojas de estilo, muy extendido, surgió en los años
90. En aquella época, la idea de utilizar hojas de estilo para mostrar el contenido
de la web no era del todo nueva. Pero CSS se diferenciaba en un aspecto
importante de otros elementos orientados a la visualización que ya existían en
HTML: los usuarios tenían ahora la opción de definir reglas de diseño para grupos
de elementos en varios documentos y en una sola hoja de estilo.

El éxito de un sitio web no depende solo del contenido, sino también de un buen
diseño. Los usuarios pierden rápidamente el interés por las páginas web que no
son fáciles de usar o no están bien estructuradas. En este caso, CSS ofrece una
serie de opciones de diseño que no están disponibles en HTML puro.

Por ejemplo, CSS permite controlar algunas especificaciones de forma

centralizada. Esto significa que elementos similares (como todos los hipervínculos
o imágenes) dentro de un mismo documento pueden ser reconocidos y
formateados mediante un único comando. Las instrucciones de diseño no tienen
que estar en forma de hoja de estilo interna en el propio documento HTML. Si se
guardan las instrucciones CSS en una hoja de estilo externa, es decir, en un
archivo separado, ésta puede utilizarse también para otros documentos.

Además de las instrucciones básicas de visualización relativas a los colores, las

formas y la tipografía de los elementos HTML, ahora existen módulos más
sofisticados en CSS. Con ellos se pueden, por ejemplo, definir animaciones o
representaciones diferentes según el medio de salida. De este modo, el mismo
documento HTML puede prepararse de forma idéntica para todos los medios
posibles. Como el contenido y el diseño están separados en este documento, el
código del sitio web es más claro. El llamado lenguaje de estilo SASS ofrece aún
más posibilidades, pero no sustituye por completo al CSS.

Es posible integrar CSS en un documento electrónico utilizando hojas de estilo

internas y externas. Además, las propiedades pueden colocarse directamente en
el código fuente HTML de un elemento utilizando el estilo inline.

Para las hojas de estilo internas: inserta el elemento “style” en el área “head” del
documento HTML

estilo externas: las instrucciones CSS se definen en archivos externos mediante la

terminación “.css” y se integran en el archivo HTML mediante una etiqueta “link”.
Este es el método más habitual porque el contenido y el diseño
están perfectamente separados y se pueden realizar cambios fácilmente.

estilo inline: las instrucciones CSS están contenidas en el archivo HTML. Sin
embargo, hay una diferencia importante: los atributos correspondientes se
encuentran directamente en la etiqueta de inicio del elemento y no se aplican a
ningún otro elemento. Este método es especialmente útil si no se quieren dar
instrucciones generales de diseño.

Reingeniería de software

Se puede definir como: “modificación de un producto software, o de ciertos

componentes, usando para el análisis del sistema existente técnicas de Ingeniería
Inversa y, para la etapa de reconstrucción, herramientas de Ingeniería Directa, de
tal manera que se oriente este cambio hacia mayores niveles de facilidad en
cuanto a mantenimiento, reutilización, comprensión o evaluación.”

Cuando una aplicación lleva siendo usada años, es fácil que esta aplicación se
vuelva inestable como fruto de las múltiples correcciones, adaptaciones o mejoras
que han podido surgir a lo largo del tiempo. Esto deriva en que cada vez que se
pretende realizar un cambio se producen efectos colaterales inesperados y hasta
de gravedad, por lo que se hace necesario, si se prevé que la aplicación seguirá
siendo de utilidad, aplicar reingeniería a la misma.

Entre los beneficios de aplicar reingeniería a un producto existente se puede

incluir:

 Pueden reducir los riegos evolutivos de una organización.

 Puede ayudar a las organizaciones a recuperar sus inversiones en
software.
 Puede hacer el software más fácilmente modificable
 Amplía las capacidades de las herramientas CASE
 Es un catalizador para la automatización del mantenimiento del software
 Puede actuar como catalizador para la aplicación de técnicas de
inteligencia artificial para resolver problemas de reingeniería

La reingeniería del software involucra diferentes actividades como son:

1. Análisis de inventarios
2. Reestructuración de documentos
3. Ingeniería inversa
4. Reestructuración de programas y datos
 5. Ingeniería directa

con la finalidad de crear versiones de programas ya existentes que sean de mejor

calidad y los mismos tengan una mayor facilidad de mantenimiento.

Análisis de inventario

Es el seguimiento del inventario desde el momento de su fabricación hasta los

almacenes, y desde estas instalaciones hasta el punto de venta. El inventario es el
conjunto de artículos o materiales que un negocio tiene la intención de vender a
los clientes con fines lucrativos. El objetivo de la gestión de inventarios es tener los
productos correctos en el lugar adecuado y en el momento preciso. Esto requiere
visibilidad de inventario: saber cuándo se debe hacer los pedidos, cuánto se debe
pedir y dónde almacenar las existencias.

Todas las organizaciones de software deberían tener un inventario de todas sus

aplicaciones. El inventario tal vez no sea más que un modelo en una hoja de
cálculo que contenga información que proporcione una descripción detallada
(tamaño, edad, importancia para el negocio) de las aplicaciones activas.

Los candidatos a la reingeniería aparecen cuando se ordena esta información en

función de su importancia para el negocio, longevidad, mantenibilidad actual y
otros criterios localmente importantes. Es entonces cuando es posible asignar
recursos a las aplicaciones candidatas para el trabajo de reingeniería.
Es importante señalar que el inventario deberá visitarse con regularidad, el estado
de las aplicaciones puede cambiar en función del tiempo y, como resultado,
cambiarán las prioridades para la reingeniería.

Reestructuración de documentos
La documentación débil es la marca de muchos sistemas heredados. ¿Pero que
se hace acerca de ellos? ¿Cuáles son las opciones? Crear documentación
consume mucho tiempo, si el sistema funciona vivirá con lo que tenga. La
documentación debe actualizarse, pero se tiene recursos limitados. Se utiliza un
enfoque de “documentar cuando se toque”. El sistema es crucial para el negocio y
debe volver a documentarse por completo incluso en este caso un enfoque
inteligente es recortar la documentación a un mínimo esencial. Cada una de estas
opciones es viable. Una organización de software debe elegir la más apropiada
para cada caso.

Opción 1: La creación de documentación consume muchísimo tiempo.

El sistema funciona, y ya nos ajustaremos con lo que se tiene. En algunos casos,
éste es el enfoque correcto. No es posible volver a crear la documentación para
cientos de programas de computadoras. Si un programa es relativamente estático
está llegando al final de vida útil, y no es probable que experimente muchos
cambios.

Opción 2: Es preciso actualizar la documentación, pero se dispone de recursos

limitados. Se utilizará un enfoque “del tipo documentar si se modifica”. Quizá no es
necesario volver a documentar por completo la aplicación. Más bien se
documentarán por completo aquellas partes del sistema que estén
experimentando cambios en ese momento. La colección de documentos útil y
relevante irá evolucionando con el tiempo.

Opción 3: El sistema es fundamental para el negocio, y es preciso volver a

documentarlo por completo. En este caso, un enfoque inteligente consiste en
reducir la documentación al mínimo necesario.
Ingeniería inversa

La ingeniería inversa es el arte de diseccionar un sistema o componente para

comprender su estructura, comportamiento y propósito. Implica analizar
cuidadosamente el software a través de diversas técnicas para obtener
información sobre cómo funciona el software. La ingeniería inversa puede
compararse con desarmar un rompecabezas complejo para comprender sus
intrincados mecanismos. Este proceso nos permite comprender el software a un
nivel más profundo para poder comprender qué hace el software y cómo lo hace.

El viaje hacia la ingeniería inversa de software comienza con la comprensión de

sus principios fundamentales. Implica tomar una aplicación compilada y
deconstruirla en su código constituyente para comprender su funcionamiento
interno. El objetivo de la ingeniería inversa es revelar la lógica, las características y
las funcionalidades integradas en el software. Los profesionales utilizan diversas
herramientas y técnicas, como desensambladores y descompiladores, para
traducir el código binario a una forma más cercana al código fuente legible por
humanos. Este proceso no sólo revela la arquitectura del software, sino que
también expone cualquier secreto subyacente que pueda contener. La esencia de
la ingeniería inversa reside en su capacidad para desmitificar el software,
ofreciendo información sobre su construcción y funcionamiento que no resulta
evidente desde su superficie.

Uno de los aspectos fundamentales de la ingeniería inversa es la capacidad de

reconocer estructuras de código y patrones de datos dentro de un mar de
información binaria. Esta habilidad es fundamental para los ingenieros inversos, ya
que les permite identificar segmentos importantes de código, comprender cómo se
procesan los datos y predecir el comportamiento del software en diversas
condiciones. Las herramientas equipadas con capacidades de reconocimiento de
patrones ayudan enormemente en este esfuerzo, ya que permiten la identificación
de algoritmos, funciones criptográficas y estructuras de datos comunes. Al
discernir estos patrones, los ingenieros inversos pueden reconstruir cómo la
aplicación gestiona el flujo de datos, procesa las entradas y ejecuta operaciones.
Esta comprensión es crucial para modificar el comportamiento del software,
mejorar la funcionalidad o, fundamentalmente en este contexto, comprender cómo
una aplicación cliente se comunica con un servidor para explotar esos canales de
comunicación con el fin de robar datos o IP.

La depuración es una parte integral del proceso de ingeniería inversa y ofrece una
ventana al comportamiento del tiempo de ejecución del software. A través de la
depuración, los ingenieros inversos pueden recorrer la ejecución del software,
inspeccionar variables y comprender los procesos de toma de decisiones en
tiempo real.

Esta exploración práctica es fundamental para identificar discrepancias entre el

comportamiento real y esperado del software, revelar errores o comprender
algoritmos complejos. Las herramientas de depuración permiten a los ingenieros
inversos establecer puntos de interrupción, examinar estados de memoria y
modificar el flujo de ejecución, lo que proporciona un medio poderoso para
analizar el software. A través de una depuración diligente, los ingenieros inversos
pueden descubrir funcionalidades ocultas, vulnerabilidades de seguridad e incluso
características no documentadas, enriqueciendo aún más su comprensión de los
mecanismos internos del software.
Reestructuración de código

La reestructuración de código fuente nació como la “aplicación de modificaciones

al código fuente para hacerlo más fácil de cambiar y de comprender, o hacerlo
menos susceptible a errores cuando futuros cambios sean aplicados”. Cabe
destacar que en la definición utilizada se excluye a la reestructuración para
cualquier otro propósito, como la mejora del código para aumentar performance, la
transformación de código para paralelizar, etc. Vista como tal, la reestructuración
es una herramienta que podría ayudar a resolver el problema del enorme esfuerzo
que se requiere en la fase de mantenimiento, dentro del ciclo de vida del
desarrollo del software. Existen otros motivos por los cuales la reestructuración del
código fuente debe ser tenida en cuenta por los ingenieros de Software:

Factores que están asociados a la comprensibilidad del código fuente:

 Facilitar la documentación.

 Facilitar las tareas de testing.

 Facilitar las tareas de auditoría.

 Reducir potencialmente la complejidad del software.

 Reducir el tiempo que necesitan los programadores para familiarizarse con

el sistema antes de implementar tareas de mantenimiento.

 Hacer más fácil el reconocimiento de errores.

 Facilitar la introducción de nueva funcionalidad.

  Implementación de estándares en la estructura del código.

La reestructuración de programas surge como herramienta necesaria para ser

aplicada en los procesos de mantenimiento debido a las características esenciales
del software para reducir los costos de esta fase del proceso de desarrollo y como
herramienta en la introducción de nueva funcionalidad dentro del ciclo evolutivo de
las aplicaciones.

Reestructuración de datos

La reestructuración de datos es una actividad de reingeniería a gran escala. En la

mayoría de los casos, la reestructuración de datos comienza con una actividad de
ingeniería inversa. La arquitectura de datos actual se analiza con minuciosidad y
se define los modelos de datos necesarios, se identifican los objetivos de datos y
los atributo, y después se revisa la calidad de las estructuras de datos existentes.

 Primero se realiza el análisis del código.

 Se evalúan las definiciones de los datos, archivos, I/O e Interfaces.
 Extraer elementos y objetos de datos para obtener información del flujo de
 datos y comprender la estructura
 Rediseño de datos trata de que exista consistencia de los mismos (nombres
 y formatos de registro) en una estructura o archivo.
 Racionalización de nombre asegura que el nombramiento de
datos
 concuerde con el estándar local y elimina los pseudónimos (flujo de datos a
 través del sistema)

Ingeniería directa

En un mundo ideal, las aplicaciones se reconstruyen utilizando un “motor de

reingeniería” automatizado. En el motor se insertaría el programa viejo, que lo
analizaría, reestructuraría y después regeneraría la forma de exhibir los mejores
aspectos de la calidad del software. Después de un espacio de tiempo corto, es
probable que llegue a aparecer este “motor”, pero los fabricantes de CASE han
presentado herramientas que proporcionan un subconjunto limitado de estas
capacidades y que se enfrentan con dominios de aplicaciones específicos. Lo que
es más importante, estas herramientas de reingeniería cada vez son más
sofisticadas. La ingeniería directa no solo recupera la información de diseño a
partir del software existente, también utiliza esta información para alterar o
reconstruir el sistema existente con la finalidad de mejorar su calidad global. En la
mayoría de los casos el software sometido a reingeniería vuelve a implementar la
función del sistema existente y también añade nuevas funciones o mejoras.

Capitulo III. Desarrollo

En el procedimiento a seguir para el desarrollo del proyecto está basado en el
siguiente cronograma, en donde existen 7 actividades con una duración de 15
semanas para su elaboración.
 Capitulo IV. Resultados

Conclusiones de Proyecto, recomendaciones y

experiencia personal profesional adquirida.

Competencias desarrolladas y/o aplicadas.

Fuentes de información.

Anexos (carta de autorización por parte de la

empresa u organización para la titulación y
otros si son necesario).

Registros de Productos (patentes, derechos de

autor, compraventa del proyecto, etc.