INSTITUTO TECNOLÓGICO

del Istmo
PROYECTO DE RESIDENCIA
NOMBRE DEL PROYECTO:
DESARROLLO E IMPLEMENTACIÓN DEL MÓDULO
“ESTADÍSTICAS PARA LA TOMA DE DECISIONES” DEL SCA
(SOLICITUDES AL COMITÉ ACADÉMICO).
NOMBRE DE LA EMPRESA:
INSTITUTO TECNOLOGICO DEL ISTMO
RFC DE LA EMPRESA:
SEP210905778
NOMBRE DEL ASESOR EXTERNO:
M.C. JOSÉ MANUEL DEHESA MARTÍNEZ
NOMBRE DEL ALUMNO:
MENDEZ MOLINA JORGE SAMUEL
NUMERO DE CONTROL
11190100
ESPECIALIDAD:
ING. EN SISTEMAS COMPUTACIONALES
CLAVE DE LA ESPECALIDAD:
ISIC – 2010 - 224
PERIODO:
AGOSTO-DICIEMBRE 2016

HEROICA CD. DE. JUCHITAN DE ZARAGOZA, OAX. 07 DE FEBRERO DEL

2017
2. AGRADECIMIENTOS

Agradezco a mis padres por el gran apoyo que me han brindado, por el valor mostrado
para salir siempre adelante, así también agradezco a todos aquellos que creyeron en
mí, en el trayecto de la carrera profesional. Cabe señalar a pesar de mi
comportamiento, durante mi vida he tenido obstáculos para llegar al triunfo, pero
también aprendí de mis errores.

Recalco a mis padres por los buenos consejos que me ayudaron encontrar el buen
camino, si no contara con mis dos grandes pilares no llegaría a un triunfo más en vida.

Gracias familia, gracias a todos que estuvieron conmigo, por sus buenos deseos y
compañías que me dieron.

Gracias a mis padres que son los mejores y más valiosos que dios me ha dado.

pág. 2
3. RESUMEN

El presente proyecto tiene la finalidad la investigación, análisis y proceso que se llevara

acabo en la solución de problemas a los cinco tipos de usuario que cuenta el sistema
(Administrador, Alumno, Jefes de Departamentos, Comité Académico y Director),
apoyados de la información recopilada, dicha información se obtuvieron de las
entrevistas realizadas a los usuarios. Así también se realizó las estadísticas de
dictámenes generados y solicitudes del semestre Agosto-Diciembre 16 / Enero- Julio
17, dicha información se analizó de la base de datos.

Retomando el proceso se realizó el estudio descriptivo en el que se analizaron los

datos obtenidos, en este proceso se determinó los requerimientos funcionales, se
aclaró y fomento las recomendaciones al sistema.

Teniendo la parte descriptiva se procedió al análisis de la base de datos, retomando el

diseño entidad-relación anterior, el siguiente proceso se procedió a la prueba de
escritorio, este proceso no hay mucho que hablar porque las variables que se utilizaron
ya se encontraban definida y culminando con la fase de desarrollo se realizó cada uno
de los puntos que se requerían a los diferentes tipos de usuarios.

Se desarrolló utilizando php, JavaScript, como gestor de la Base de Datos Mysql, así
también se usaron HTML y Css, tomando como referencia el modelo de tres capas
(vista, modelo y controlador).

pág. 3
 ÍNDICE
2. AGRADECIMIENTOS ........................................................................................................ 2
3. RESUMEN .......................................................................................................................... 3
5. INTRODUCCIÓN ................................................................................................................ 8
6. DESCRIPCIÓN DE LA EMPRESA U ORGANIZACIÓN Y DEL PUESTO O ÁREA DEL
TRABAJO DEL ESTUDIANTE. ............................................................................................ 10
6.1 Visión .............................................................................................................................. 10
6.2 Misión ............................................................................................................................. 10
6.3 Política De Calidad ......................................................................................................... 11
7. PROBLEMAS A RESOLVER PRIORIZÁNDOLOS .......................................................... 12
8. OBJETIVOS ..................................................................................................................... 13
8.1 Objetivo General ............................................................................................................. 13
8.2 Objetivos Específicos ...................................................................................................... 13
9. JUSTIFICACIÓN .............................................................................................................. 14
10 MARCO TEÓRICO (FUNDAMENTOS TEÓRICOS) ........................................................ 15
10.1 Sistema de información................................................................................................. 15
10.2 Ingeniería de software................................................................................................... 15
10.2.1 Importancia de la Ingeniería de Software ................................................................... 16
10.3 Orientación a objetos .................................................................................................... 16
10.3.1 Clase ......................................................................................................................... 16
10.3.2 Propiedades o Atributos ............................................................................................. 16
10.3.3 Métodos ..................................................................................................................... 17
10.3.4 Objeto ........................................................................................................................ 17
10.3.5 Atributo ...................................................................................................................... 17
10.4 Modelo Vista-Controlador (MVC) .................................................................................. 19
10.4.1 ¿Por qué MVC? ......................................................................................................... 20
10.5 Lógica de negocio / Lógica de la aplicación .................................................................. 21
10.6 HTML ............................................................................................................................ 22
10.6.1 Historia De HTML ...................................................................................................... 24
10.7 Apache ......................................................................................................................... 26
pág. 4
10.7.1 ¿Qué es Apache HTTP Server? ................................................................................ 26
10.8 SSH .............................................................................................................................. 27
10.8.1 ¿Qué es SSH? ........................................................................................................... 27
10.9 MY SQL ........................................................................................................................ 27
10.10 JavaScript ................................................................................................................... 29
10.11 JQuery ........................................................................................................................ 30
10.12 Ajax............................................................................................................................. 32
10.12.1 Ventajas E Inconvenientes De Ajax ......................................................................... 34
10.13 Workbench.................................................................................................................. 36
10.14 Bootstrap .................................................................................................................... 37
10.15 Diagrama Entidad-Relacion ...................................................................................... 379
10.16 WAMP ....................................................................................................................... 43
10.17 Composer .................................................................................................................. 43
10.17 PHP ........................................................................................................................... 43
10.19 Encriptación de datos.................................................................................................. 46
10.19.1 Criptografía .............................................................................................................. 46
10.19.2 Métodos de encriptación .......................................................................................... 48
10.20 Algoritmos Simétricos Y Los Asimétricos .................................................................... 50
10.20.1 Tipos de cifrados ...................................................................................................... 51
10.21 Css ............................................................................................................................. 52
10.22 PHP-FPDF .................................................................................................................. 62
10.22.1 ¿Qué es FPDF? ....................................................................................................... 64
11. PROCEDIMIENTO Y DESCRIPCIÓN DE LAS ACTIVIDADES REALIZADAS .............. 66
11.1 Recopilación De La Información ................................................................................... 66
11.2 Entrevistas .................................................................................................................. 688
11.2.1 Entrevista Alumnos .................................................................................................... 68
11.2.2 Entrevista a jefe de departamento.............................................................................. 68
11.2.3 Entrevista a usuario comité(subacad) ........................................................................ 68
11.2.4 Entrevista a director(Direccion) .................................................................................. 68

pág. 5
12. RESULTADOS, PLANOS, GRÁFICAS, PROTOTIPOS, MANUALES, PROGRAMAS,
ANÁLISIS ESTADÍSTICOS, MODELOS MATEMÁTICOS, SIMULACIONES,
NORMATIVIDADES, REGULACIONES Y RESTRICCIONES, ENTRE OTROS. ................. 69
12.1 Planteamiento De La Solución ...................................................................................... 69
12.1.1 Desarrollo e Implementacion del Modulo ”Estadisticas para la toma de deciciones” del
SCA( Solicitudes al Comité Academico) .............................................................................. 70
12.2 Base de Datos .............................................................................................................. 71
12.2.1 Entidad Relación ........................................................................................................ 71
12.2.2 Diagrama Relacional .................................................................................................. 71
12.2.3 Diccionario De Datos ................................................................................................. 75
12.3 Descripción de Actores ................................................................................................. 86
12.4 Casos De Uso De Negocio Del Sistema ....................................................................... 89
12.4.1 Descripción De Casos de Uso ................................................................................... 90
12.5 Diagrama de clases .................................................................................................... 107
12.5.1 Diagrama De Clases Entidad ................................................................................... 107
12.5.2 Diagrama De Clases Entidad Con Propiedades ....................................................... 107
12.5.3 Diagrama De Clases Entidad Con Propiedades y métodos...................................... 110
12.6 Diagramas de colaboración ........................................................................................ 116
12.6.1 Diagramas de colaboración de casos de usos particulares ...................................... 118
12.7 Prototipos de las vistas ............................................................................................... 124
12.7.1 Pantallas prototipo Modulo Alumno .......................................................................... 125
12.7.2 Pantallas prototipo Modulo Jefe de Departamento ................................................... 132
12.7.3 Pantallas prototipo Modulo Comité Académico ........................................................ 137
12.7.4 Pantallas prototipo Modulo Director ......................................................................... 140
12.7.5 Pantallas prototipo Modulo Administrador ................................................................ 143
12.8 Análisis Estadísticos ................................................................................................... 174
13. ACTIVIDADES SOCIALES REALIZADAS EN LA EMPRESA U ORGANIZACIÓN (SI ES
EL CASO). ......................................................................................................................... 174
14. CONCLUSIONES Y RECOMENDACIONES ................................................................ 176
15. COMPETENCIAS DESARROLLADAS Y/O APLICADAS ........................................... 176
15.1 Competencias específicas: ......................................................................................... 177

pág. 6
15.2 Competencias Genéricas: ........................................................................................... 178
15.2.1 Competencias instrumentales: ................................................................................. 178
15.2.2 Competencias interpersonales ................................................................................. 178
15.2.3 Competencias sistémicas:........................................................................................ 179
16. FUENTES DE INFORMACIÓN ..................................................................................... 180

pág. 7
5. INTRODUCCIÓN

Este proyecto realizado por un equipo de alumnos del Instituto Tecnológico del
Istmo, como parte final de su formación académica en la especialidad de “INGENIERIA
EN SISTEMAS COMPUTACIONALES”, en la etapa denominada “RESIDENCIA
PROFESIONAL”, asimismo con el objetivo de aplicar los conocimientos adquiridos y
con el fin de dejar constancia en la Institución Educativa.

Muchos de los alumnos del “INSTITUTO TECNOLOGICO DEL ISTMO” solicitan

uno o más dictámenes ya sea prorroga de semestre, carga académica menor a 20
créditos, carga académica máxima (hasta 38 créditos), baja definitiva, baja temporal,
curso especial reprobado, análisis de carga académica con curso especial y análisis
de carga académica. Antes cuando no existía el sistema SCA una solicitud se hacía
de forma personal y demoraba mucho tiempo, porque en la institución el registro
histórico de dictámenes y solicitudes se encuentran archivados físicamente, la cual
implica que cuando el alumno requería un dictamen el comité académico ejercía una
búsqueda a la carpeta del alumno y estudiar el caso para ver si será otorgado el
dictamen.

Así también se dio soporte técnico a la plataforma y uno de esos caso fue que
los alumnos presentaron problemas en el registro ya sea porque no escribieron bien
su correo o nombre(s), apellidos, número de control, estos problemas fueron como
principal objetivo a solucionar porque el sistema ya se encontraba funcionando en el
servidor, así como el diseño de Interfaz alumno, también se fueron diseñando las
demás interfaces de usuario y para complementar se propuso investigar y llevar acabo
las estadistas del sistema. Así surgió la idea de realizar un proyecto el cual tiene por
nombre DESARROLLO E IMPLEMENTACIÓN DEL MODULO “ESTADÍSTICAS PARA
LA TOMA DE DECISIONES” DEL SCA (SOLICITUDES AL COMITÉ ACADÉMICO).

El proyecto tiene como finalidad dar soporte técnico al sistema para que los
alumnos tengan la facilidad de solicitar dictámenes sin problema y para mejorar el
sistema se incluyó el desarrollo de las estadísticas históricas para el plantel.

pág. 8
El proyecto tiene 2 ejes, el primero es el de Investigación y el segundo de Desarrollo.

Investigación: Se investigó detalladamente los diferentes tipos de usuario

(Administrador, Jefes de Departamento, Director, Alumno y Comité) para comprender
las funciones que ejercen, se investigó el diseño de la Base Datos.

La idea principal del Proyecto es la solución de cada uno de los problemas que
se presentan en el sistema, retomando como principal objetivo: el respaldo de
información de la base de datos, así también se respaldara los dictámenes desde el
periodo Agosto-Diciembre 2016 hasta hoy en día porque antes que existiera el sistema
las estadísticas históricas todos fueron en papel.

Las investigaciones realizadas, consideramos que éste Sistema optimiza el

desempeño de los docentes y administrativos involucrados en la toma de decisiones.
Se aplicó la investigación a cada una de las tareas posibles para la aplicación del
proyecto, y ver la compatibilidad de servicios y dispositivos a utilizar para llevar a cabo
las actividades del sistema, así como una serie de entrevistas que servirían para el
desarrollo y la implementación del software.

Se implementó a la interfaz del comité académico, la posibilidad de cancelar

solicitudes, escribir observaciones y modificar dictamen así también los jefes de
departamento ya pueden redactar observaciones por el cual fue cancelada la solicitud
del alumno y ver el dictamen generado en el Historial en caso que el alumno quiera
solicitar un dictamen en el siguiente semestre con las mismas características puede
ser analizada o cancelada, se agregó un campo en el registro del alumno para la
autenticación de correo y en la interfaz usuario Alumno ya cuenta para la corrección
de nombre.

El proyecto tiene como objetivo, “Generar un soporte para las estadísticas en la

toma decisiones al comité académico”. En este documento encontraras el desarrollo
de cada una de las actividades realizadas para alcanzar el objetivo así como el
software, librerías y lenguajes utilizados.

pág. 9
6. DESCRIPCIÓN DE LA EMPRESA U ORGANIZACIÓN Y
DEL PUESTO O ÁREA DEL TRABAJO DEL ESTUDIANTE.

6.1 Visión

“Ser una Institución de Educación Superior de vanguardia con

reconocimiento internacional y excelencia académica que garantice y ofrezca servicios
de calidad, investigación y posgrado, responsable y honesta, que dé respuesta a las
necesidades de la comunidad.”

6.2 Misión

El Instituto Tecnológico del Istmo propone una filosofía de trabajo, para alcanzar
a través del servicio de la Educación Superior que imparte, niveles óptimos de
desarrollo social, cultural y profesional de nuestro país y sostiene sus compromisos
ante la comunidad regional y nacional.

 Dar educación integral en la formación de profesionales, éticos,

capaces, altamente calificados y comprometidos por el desarrollo y bienestar
de la Nación.
 Ser una oferta de Educación Superior Tecnológica en la comunidad para
afrontar los retos del desarrollo que requiere y demanda la región del istmo
oaxaqueño.
 Difundir y concertar programas de vinculación y extensión con todos los
sectores productivos y de servicios que tengan como premisa el desarrollo y
superación de la región del istmo.
 Generar conocimientos con excelencia académica, a través de una
permanente actualización de los recursos académicos e infraestructura.

pág. 10
6.3 Política De Calidad

El Instituto Tecnológico del Istmo establece el compromiso de implementar

todos sus procesos orientados hacia la satisfacción de sus clientes, sustentada en la
calidad del proceso educativo para cumplir con sus requisitos, mediante la eficacia de
un Sistema de Gestión de Calidad y de mejora continua conforme a la Norma ISO
9001:2008/NMX- CC-9001-IMNC.

Figura 1 Organigrama del Tecnológico

pág. 11
7. PROBLEMAS A RESOLVER PRIORIZÁNDOLOS
.
 Para verificar una solicitud y aprobarla se estudia el caso manualmente
porque los archivos no son digitales.
 No se tiene un control en cuanto a las estadísticas de solicitudes aprobadas,
dictámenes generados, canceladas y alumnos que solicitaron un dictamen
anteriormente.
 Los alumnos no cuenta con un campo de autenticación de correo en el login.
 Los Alumnos no cuenta con la opción de modificar Nombre(s) y Apellidos en
la interfaz Usuario Alumno.
 Los Alumnos tienen problemas en como Modificar su Número de Control.
 No se tiene un control eficiente, ni mucho menos respaldo de las solicitudes
realizadas por el alumnado.
 Los jefes de departamento no pueden ver el dictamen teniendo un
problema si el alumno vuelve a solicitar un dictamen con las mismas
características del semestre anterior.
 El comité académico no puede recomendar un dictamen al director.
 No se tiene en cuenta el por qué un dictamen fue cancelado en el sistema
ni mucho menos se le notifica al alumno.
 Las tablas de los diferentes tipos interfaz de usuario no cuenta con número
de control.
 El administrador debía tener una opción de exportar para hacer el respaldo
de los dictámenes generados, recomendados y solicitudes de acuerdo al
periodo escolar.

pág. 12
8. OBJETIVOS

8.1 Objetivo General

 Generar un soporte para las estadísticas en la toma decisiones al comité
académico.

8.2 Objetivos Específicos

 Dar Soporte Técnico al sistema web de Solicitudes al Comité Académico.
 Contarán los alumnos con un campo de autenticación de correo en el registro
para que no tengan problemas con la activación de la cuenta.
 Se Implementara la base de datos para almacenar los datos requeridos para
el funcionamiento del sistema ya que el periodo escolar no está vinculado
con la tabla solicitud.
 Deberá el administrador modificar el número de control de los alumnos
cuando tengan problemas.

 Cancelar solicitudes desde el comité académico y jefes de departamento,

anotando el motivo por que fue cancelada la solicitud.
 Las solicitudes se mostraran por fecha y hora solicitada, en todos los
departamentos.
 Se agregará el número de control a todas las tablas, en las diferentes
interfaces de usuario.
 Realizar un nuevo diseño que cumpla con las características de la institución.
 Los jefes de Departamento podrán ver el dictamen generado desde el
historial para que el alumno no vuelve a solicitar un dictamen con las
mismas características del semestre anterior.
 Agilizar el trabajo administrativo.
 Adjuntar todas las solicitudes, recomendación y dictámenes por periodo
desde la interfaz administrador.

pág. 13
 9. JUSTIFICACIÓN

El desarrollo del sistema web que se realizó por un grupo de estudiantes de

residencia del semestre pasado y como nosotros parte del soporte técnico, es
relevante ya que se logran gestionar día a día solicitudes y validaciones de normativos
al comité académico del Instituto Tecnológico del Istmo.

Al analizar a fondo cada uno de las interfaces de usuario así también con ayuda
de alumnos y docentes se presentaron ideas para que no tengan problemas tanto el
quien solicita un dictamen como el quien revisa y recomienda la solicitud.

Con esta aportación se pretende resolver de manera real la problemática citada

anteriormente, con la finalidad de argumentar y amplificar el sistema administrativo
para el desarrollo de solicitudes al comité académico.

Por estas razones nosotros como encargados de llevar a cabo este proyecto,
con el fin de mejorar esta herramienta automatizada capaz de generar un dictamen en
un tiempo determinado agilizando el proceso, ocasiona gran impacto en la institución
académica, ya que la herramienta es un software que jamás se había creado en
alguna Institución, ahora junto con mi compañero debemos de implementar y
desarrollar el sistema por que más del 70% de alumnos del Instituto Tecnológico del
Istmo ha utilizado este sistema innovador.

Tenemos que considerar que las solicitudes y Dictámenes se encontraban

archivados en la carpeta del alumno para que el comité estudiara el caso, hoy en día
contaremos con todos los documentos ejercidos en la plataforma la cual se guardaran
por periodo facilitando al comité académico rechazar o recomendar la solicitud.

pág. 14
10 MARCO TEÓRICO (FUNDAMENTOS TEÓRICOS)

10.1 Sistema de información

Un sistema de información (SI) es un conjunto de elementos interrelacionados

con el propósito de prestar atención a las demandas de información de una
organización, para elevar el nivel de conocimientos que permitan un mejor apoyo a la
toma de decisiones y desarrollo de acciones.(Ayala, 2006)

En pocas palabras un sistema de información informáticamente hablando, es

un conjunto de personas, datos, actividades y recursos informáticos que interactúan
entre sí para lograr un objetivo.

10.2 Ingeniería de software

La ingeniería de software a ha introducido y popularizado una serie de

estándares para calificar la calidad tanto del sistema desarrollado como del proceso
para desarrollarlo.

La Ingeniería de Software es una disciplina de la ingeniería que comprende

todos los aspectos de la producción de software desde las etapas iniciales de la
especificación del sistema, hasta el mantenimiento de éste después de que se
utiliza.(Sommerville, 2005)

pág. 15
10.2.1 Importancia de la Ingeniería de Software

Porque da estabilidad, control y organización a una actividad que puede

volverse caótica si se descontrola.

Sin embargo, un enfoque moderno de ingeniería de software debe ser “ágil”.

Debe incluir sólo aquellas actividades, controles y productos del trabajo que sean
apropiados para el equipo del proyecto y para el producto que se busca obtener.(Roger
S. Pressman, 2010)

10.3 Orientación a objetos

10.3.1 Clase

Las clases son los modelos sobre los cuáles se construirán nuestros objetos.
(Bahit, 2000)

Una clase es una categoría o grupo de cosas que tienen atributos y acciones
similares. (Schmuller).

Ejemplo: La clase lavadora tiene atributos como son la marca, el modelo, el

número de serie y la capacidad.

10.3.2 Propiedades o Atributos

Las propiedades, son las características intrínsecas del objeto. Éstas, se

representan a modo de variables, solo que técnicamente, pasan a denominarse
propiedades (WebMaster, 2008).

pág. 16
10.3.3 Métodos

Los métodos son funciones, solo que técnicamente se denominan métodos, y

representan acciones propias que puede realizar el objeto (ALEGSA, 2016).

10.3.4 Objeto

Un objeto es una cosa. Y, si una cosa es un sustantivo, entonces un objeto es

un sustantivo.

Mira a tu alrededor y encontrarás decenas, cientos de objetos. Tu ordenador,

es un objeto. Tú, eres un objeto. Tu llave es un objeto. El cenicero (ese que tienes
frente a ti cargado de colillas de cigarrillo), es otro objeto. Tu mascota también es un
objeto.

TRUCO Cuando pensamos en objetos, todos los sustantivos son objetos.

Un objeto es un sustantivo que posee atributos, cuyas cualidades lo

describen.(Bahit, 2000)

Podemos decir que una clase, es el razonamiento abstracto de un objeto,

mientras que el objeto, es su materialización. A la acción de crear objetos, se la
denomina instanciar una clase y dicha instancia, consiste en asignar la clase, como
valor a una variable.(Schmuller)

10.3.5 Atributo

Describir un objeto, es simplemente mencionar sus cualidades. Las cualidades

son adjetivos. Si no sabes que es un adjetivo, estamos jodidos (y mucho). Pero,
podemos decir que un adjetivo es una cualidad del sustantivo.(WebMaster, 2008)

pág. 17
 Entonces, para describir "la manera de ser" de un objeto, debemos
preguntarnos ¿cómo es el objeto? Toda respuesta que comience por "el objeto es",
seguida de un adjetivo, será una cualidad del objeto.

Algunos ejemplos:

1. El objeto es verde
2. El objeto es grande
3. El objeto es feo
Ahora, imagina que te encuentras frente a un niño de 2 años (niño: objeto que
pregunta cosas que tú das por entendidas de forma implícita). Y cada vez que le dices
las cualidades de un objeto al molesto niño-objeto, éste te pregunta: -¿Qué es...?,
seguido del adjetivo con el cuál finalizaste tu frase. Entonces, tú le respondes diciendo
es un/una seguido de un sustantivo. Te lo muestro con un ejemplo:

4. El objeto es verde. ¿Qué es verde? Un color.

5. El objeto es grande. ¿Qué es grande? Un tamaño.
6. El objeto es feo. ¿Qué es feo? Un aspecto.
Estos sustantivos que responden a la pregunta del niño, pueden pasar a formar
parte de una locución adjetiva que especifique con mayor precisión, las descripciones
anteriores:

7. El objeto es de color verde.

8. El objeto es de tamaño grande.
9. El objeto es de aspecto feo.
Por lo tanto un atributo son las cualidades que describen al objeto.

pág. 18
10.4 Modelo Vista-Controlador (MVC)

El UML (Lenguaje Unificado de Modelado) es una de las herramientas más

emocionantes en el mundo del desarrollo de sistemas. Esto se debe a que permite a
los creadores de sistemas generar diseños que capturen sus ideas en una forma
convencional y fácil de comprender para comunicarlas a otras personas. (Schmuller)

Un diagrama de flujo describe su funcionamiento, lo ejemplificamos en (Figura

2).

Figura 2 Diagrama de flujo, representando el Modelo Vista-Controlador

En líneas generales, MVC es una propuesta de diseño de software utilizada

para implementar sistemas donde se requiere el uso de interfaces de usuario. Surge
de la necesidad de crear software más robusto con un ciclo de vida más adecuado,
donde se potencie la facilidad de mantenimiento, reutilización del código y la
separación de conceptos.

Su fundamento es la separación del código en tres capas diferentes, acotadas

por su responsabilidad, en lo que se llaman Modelos, Vistas y Controladores, o lo que
es lo mismo, Model, Views & Controllers, si lo prefieres en inglés.
pág. 19
 MVC es un "invento" que ya tiene varias décadas y fue presentado incluso antes
de la aparición de la Web. No obstante, en los últimos años ha ganado mucha fuerza
y seguidores gracias a la aparición de numerosos frameworks de desarrollo web que
utilizan el patrón MVC como modelo para la arquitectura de las aplicaciones
web.(MySql, 2014)

10.4.1 ¿Por qué MVC?

La rama de la ingeniería del software se preocupa por crear procesos que

aseguren calidad en los programas que se realizan y esa calidad atiende a diversos
parámetros que son deseables para todo desarrollo, como la estructuración de los
programas o reutilización del código, lo que debe influir positivamente en la facilidad
de desarrollo y el mantenimiento.(Daniel J. Barrett, 2001)

Los ingenieros del software se dedican a estudiar de qué manera se pueden

mejorar los procesos de creación de software y una de las soluciones a las que han
llegado es la arquitectura basada en capas que separan el código en función de sus
responsabilidades o conceptos. Por tanto, cuando estudiamos MVC lo primero que
tenemos que saber es que está ahí para ayudarnos a crear aplicaciones con mayor
calidad (Figura 3).

Figura 3 Estructura de Modelo Vista-Controlador

pág. 20
 En esta imagen hemos representado con flechas los modos de colaboración
entre los distintos elementos que formarían una aplicación MVC, junto con el usuario.
Como se puede ver, los controladores, con su lógica de negocio, hacen de puente
entre los modelos y las vistas. Pero además en algunos casos los modelos pueden
enviar datos a las vistas. Veamos paso a paso cómo sería el flujo de trabajo
característico en un esquema MVC.

El usuario realiza una solicitud a nuestro sitio web. Generalmente estará

desencadenada por acceder a una página de nuestro sitio. Esa solicitud le llega al
controlador.

El controlador comunica tanto con modelos como con vistas. A los modelos les
solicita datos o les manda realizar actualizaciones de los datos. A las vistas les solicita
la salida correspondiente, una vez se hayan realizado las operaciones pertinentes
según la lógica del negocio.

Para producir la salida, en ocasiones las vistas pueden solicitar más información
a los modelos. En ocasiones, el controlador será el responsable de solicitar todos los
datos a los modelos y de enviarlos a las vistas, haciendo de puente entre unos y otros.
Sería corriente tanto una cosa como la otra, todo depende de nuestra implementación;
por eso esa flecha la hemos coloreado de otro color.(ALEGSA, 2016)

Las vistas envían al usuario la salida. Aunque en ocasiones esa salida puede ir
de vuelta al controlador y sería éste el que hace el envío al cliente, por eso he puesto
la flecha en otro color.

10.5 Lógica de negocio / Lógica de la aplicación

Hay un concepto que se usa mucho cuando se explica el MVC que es la "lógica
de negocio". Es un conjunto de reglas que se siguen en el software para reaccionar
ante distintas situaciones. En una aplicación el usuario se comunica con el sistema por
medio de una interfaz, pero cuando acciona esa interfaz para realizar acciones con el
pág. 21
programa, se ejecutan una serie de procesos que se conocen como la lógica del
negocio. Este es un concepto de desarrollo de software en general.(ALEGSA, 2016)

La lógica del negocio, aparte de marcar un comportamiento cuando ocurren

cosas dentro de un software, también tiene normas sobre lo que se puede hacer y lo
que no se puede hacer. Eso también se conoce como reglas del negocio. Bien, pues
en el MVC la lógica del negocio queda del lado de los modelos. Ellos son los que deben
saber cómo operar en diversas situaciones y las cosas que pueden permitir que
ocurran en el proceso de ejecución de una aplicación.

Por ejemplo, pensemos en un sistema que implementa usuarios. Los usuarios

pueden realizar comentarios. Pues si en un modelo nos piden eliminar un usuario
nosotros debemos borrar todos los comentarios que ha realizado ese usuario también.
Eso es una responsabilidad del modelo y forma parte de lo que se llama la lógica del
negocio.(Schmuller)

10.6 HTML

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

Está compuesto por una serie de etiquetas que el navegador interpreta y da forma en
la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten
dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.(WebMaster, 2008)

Normalmente solemos encontrar representados el archivo contenedor con

iconos como el de la Figura 4 y terminado con la extensión .HTML

Figura 4 Icono de Archivo en la Mayoría de Sistemas

pág. 22
Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido
(Figura 5). Un ejemplo sencillo de código HTML podría ser:

<html>

<body>

<p>Esto es un párrafo. Bienvenidos a esta página web.</p>

</body>

</html>

Figura 5 Estructura Básica

Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada una
de las etiquetas debe acabar con su homóloga de cierre. En este caso la etiqueta
<html> debe cerrarse con </html>, la etiqueta <body> con </body> y la etiqueta <p>
con </p>.

Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro
que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta de
cierre. Así conseguiremos un código HTML bien formado y que los navegadores
puedan interpretar sin ambigüedad.

Este sencillo ejemplo mostraría por pantalla lo siguiente (Figura 6).

pág. 23
 Figura 6 Pantalla página Web

¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre?

Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo
pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como
esperábamos sin aparente error. Quizás nos muestren una página de error o se quede
en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML
bien estructuradas y sin ambigüedades, es decir, hacer un correcto uso del lenguaje
para que los navegadores puedan saber exactamente qué es lo que pretendemos
mostrar.(Mobirise, 2015)

10.6.1 Historia De HTML

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML),

publicado por primera vez en Internet por Tim Berners-Lee en 1991 (Fig.5.5.4). En esta
publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente
simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se
han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De
esta manera, podemos hablar de que han existido distintas versiones de HTML a lo
largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual,
que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no

pág. 24
vamos a prestarle atención a las versiones y especificidades de cada versión, ya que
el objetivo de este curso es aprender los fundamentos de HTML y entender cómo
funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué
no le damos importancia a la versión? Porque una persona que cuenta con los
fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las
características particulares de una versión sin problema. En cambio, centrarse en los
detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad
para comprender lo que hacemos ni para adaptarnos a los continuos cambios que
tienen lugar en el ámbito de los desarrollos web.(WebMaster, 2008)

pág. 25
10.7 Apache

10.7.1 ¿Qué es Apache HTTP Server?

El servidor Apache HTTP, también llamado Apache, es un servidor web HTTP

de código abierto para la creación de páginas y servicios web. Es un servidor
multiplataforma, gratuito, muy robusto y que destaca por su seguridad y
rendimiento.(Apache Software Foundation, 2016)

Ventajas

 Instalación/Configuración. Software de código abierto.

 Coste. El servidor web Apache es completamente gratuito.
 Funcional y Soporte. Alta aceptación en la red y muy popular, esto hace que
muchos programadores de todo el mundo contribuyen constantemente con
mejoras, que están disponibles para cualquier persona que use el servidor web y
que Apache se actualice constantemente.
 Multi-plataforma. Se puede instalar en muchos sistemas operativos, es
compatible con Windows, Linux y MacOS.
 Rendimiento. Capacidad de manejar más de un millón de visitas/día.
 Soporte de seguridad SSL y TLS.
Inconvenientes

 Falta de integración

 Posee formatos de configuración NO estándar.

 No posee un buen panel de configuración

pág. 26
10.8 SSH

10.8.1 ¿Qué es SSH?

SSH (Secure Shell) is a popular, robust, TCP/IP-based product for network

security and privacy, supporting strong encryption and authentication.(Daniel J. Barrett,
2001)

Cada vez que los datos se envían por un ordenador a la red, SSH encripta
automáticamente. Cuando los datos llegan a su destinatario, SSH descifra
automáticamente (decodifica) de ella. El resultado es cifrado transparente: los usuarios
pueden trabajar con normalidad, sin saber que sus comunicaciones son con seguridad
cifrada en la red. Además, SSH utiliza algoritmos de cifrado modernos, seguros y es
suficientemente eficaz como para encontrarse dentro de las aplicaciones de misión
crítica en las grandes corporaciones.

El uso de SSH es fundamental en las comunicaciones actuales, ya que la

mayoría de servicios de red se llevan a cabo sin cifrar. Como consecuencia, cualquiera
puede "escuchar" los datos que transferimos o recibimos. (Noya, 2001)

10.9 MY SQL

Una base de datos, en su definición más sencilla, es una colección de archivos

relacionados. Imagine un archivo (ya sea en formato de papel o electrónico) que
contenga 10s pedidos de ventas de una tienda. También existirá otro archivo de
productos, en el que se incluyen 10s registros sobre existencias. Para completar un
pedido, necesitara buscar el producto en el archivo de pedidos y 10 niveles de
existencias relativos a dicho producto en el archivo de productos. Una base de datos
y el software que controla la base de datos, denominado sistema de administración de
pág. 27
base de datos (DBMS), le ayudara a realizar estas tareas. La mayor parte de las bases
de datos actuales son de tipo relacional. Se denominan así porque utilizan tablas de
datos relacionadas por un campo en común. (MySql, 2014)

MySQL es un sistema de administración de bases de datos relacional (RDBMS).

Se trata de un programa capaz de almacenar una enorme cantidad de datos de gran
variedad y de distribuirlos para cubrir las necesidades de cualquier tipo de
organización, desde pequeñitos establecimientos comerciales a grandes empresas y
organismos administrativos. MySQL compite con sistemas RDBMS propietarios
conocidos, como Oracle, SQL Server y DB2.

MySQL incluye todos los elementos necesarios para instalar el programa,

preparar diferentes niveles de acceso de usuario, administrar el sistema y proteger y
hacer volcados de datos. Puede desarrollar sus propias aplicaciones de base de datos
en la mayor parte de los lenguajes de programación utilizados en la actualidad y
ejecutarlos en casi todos los sistemas operativos, incluyendo algunos de los que
probablemente no ha oído nunca hablar. MySQL utiliza el lenguaje de consulta
estructurado (SQL). Se trata del lenguaje utilizado por todas las bases de relacionales,
que presentaremos en una sección posterior. Este lenguaje permite crear bases de
datos, así como agregar, manipular y recuperar datos en función de criterios
específicos.(ALEGSA, 2016)

Licencia MySQL

El software MySQL tiene una doble licencia. Los usuarios pueden optar por
utilizar el software MySQL como un producto Open Source bajo los términos de la
Licencia Pública General de GNU o pueden adquirir una licencia comercial estándar
de Oracle. (MySql, 2014)

pág. 28
10.10 JavaScript

JavaScript es un lenguaje de scripting multiplataforma y orientado a objetos. Es

un lenguaje pequeño y liviano. Dentro de un ambiente de host, JavaScript puede
conectarse a los objetos de su ambiente y proporcionar control programático sobre
ellos.(Code School, 2016)

JavaScript contiene una librería estándar de objetos, tales como Array, Date,
y Math, y un conjunto central de elementos del lenguaje, tales como operadores,
estructuras de control, y sentencias. El núcleo de JavaScript puede extenderse para
varios propósitos, complementándolo con objetos adicionales, por ejemplo:

Client-side JavaScript extiende el núcleo del lenguaje proporcionando objetos

para controlar un navegador y su modelo de objetos (o DOM, por las iniciales de
Document Object Model). Por ejemplo, las extensiones del lado del cliente permiten
que una aplicación coloque elementos en un formulario HTML y responda a eventos
del usuario, tales como clic del ratón, ingreso de datos al formulario y navegación de
páginas.

Server-side JavaScript extiende el núcleo del lenguaje proporcionando objetos

relevantes a la ejecución de JavaScript en un servidor. Por ejemplo, las extensiones
del lado del servidor permiten que una aplicación se comunique con una base de datos,
proporcionar continuidad de la información de una invocación de la aplicación a otra,
o efectuar manipulación de archivos en un servidor.(Park, 2016)

pág. 29
10.11 JQuery

Es una librería JavaScript open-source, que funciona en múltiples navegadores,

y que es compatible con CSS3. Su objetivo principal es hacer la programación
“scripting” mucho más fácil y rápida del lado del cliente. Con JQuery se pueden
producir páginas dinámicas así como animaciones parecidas a Flash en relativamente
corto tiempo.(Daniel J. Barrett, 2001)

Orígenes

JQuery fue publicado por primera vez en Enero del 2006 en “BarCamp NYC”
por John Resign. Soporte para AJAX fue agregado un mes después, y el modelo de
licenciamientos open source del MIT fue adoptado en Mayo de ese mismo año.

Doce meses después, en Septiembre del 2007, JQuery ya mostraba una nueva
interfaz de usuario y ya adquiría gran popularidad, y exactamente un año después, en
Septiembre 2008, Microsoft y Nokia anunciaron su soporte. Microsoft ha tratado de
adoptar JQuery para usarlo en Visual Studio (integrándolo en el Framework AJAX de
ASP.NET), y Nokia lo ha integrado en la plataforma de desarrollo de
widgets.(Sommerville, 2005)

Las ventajas de JQuery

La ventaja principal de JQuery es que es mucho más fácil que sus

competidores. Usted puede agregar plugins fácilmente, traduciéndose esto en un
ahorro substancial de tiempo y esfuerzo. De hecho, una de las principales razones por
la cual Resig y su equipo crearon JQuery fue para ganar tiempo (en el mundo de
desarrollo web, tiempo importa mucho).(WebMaster, 2008)

La licencia open source de JQuery permite que la librería siempre cuente con
soporte constante y rápido, publicándose actualizaciones de manera constante. La
comunidad JQuery es activa y sumamente trabajadora.

pág. 30
 Otra ventaja de JQuery sobre sus competidores como Flash y puro CSS es su
excelente integración con AJAX.

En resumen:

JQuery es flexible y rápido para el desarrollo web

Viene con licencia MIT y es Open Source

Tiene una excelente comunidad de soporte

Tiene Plugins

Bugs son resueltos rápidamente

Excelente integración con AJAX

Las desventajas de JQuery

Una de las principales desventajas de JQuery es la gran cantidad de versiones

publicadas en el corto tiempo. No importa si usted está corriendo la última versión de
JQuery, usted tendrá que hostear la librería usted mismo (y actualizarla
constantemente), o descargar la librería desde Google (atractivo, pero puede traer
problemas de incompatibilidad con el código).(Apache Software Foundation, 2016)

Además del problema de las versiones, otras desventajas que podemos

mencionar:

JQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil si lo

comparamos con CSS

Si JQuery es implementado inapropiadamente como un Framework, el entorno

de desarrollo se puede salir de control.(Query Foundation, 2016)

pág. 31
10.12 Ajax

Veamos un esquema para comprender mejor la idea que hay detrás del uso de
Ajax. Este esquema lo iremos comentando y comprendiendo a medida que avancemos
en la explicación.(Apache Software Foundation, 2016)

Realizar peticiones al servidor y esperar respuesta puede consumir tiempo (el

tiempo necesario para recargar una página completa). Para agilizar los desarrollos web
surgió Ajax (inicialmente Asynchronous JavaScript And XML, aunque hoy día ya no es
una tecnología ligada a XML con lo cual no pueden asociarse las siglas a estos
términos), una tecnología que busca evitar las demoras propias de las peticiones y
respuestas del servidor mediante la transmisión de datos en segundo plano usando un
protocolo específicamente diseñado para la transmisión rápida de pequeños paquetes
de datos (Figura 7).

Figura 7 Comparativa de Esquemas

pág. 32
 Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de
este en segundo plano (sin necesidad de recargar la página web completa) y usar esos
datos para, a través de JavaScript, modificar los contenidos de la página creando
efectos dinámicos y rápidos.

En el esquema anterior vemos las ideas en torno a Ajax de forma gráfica. En la

parte superior hemos representado lo que sería un esquema de comunicación
tradicional: el cliente solicita una página web completa al servidor. El servidor recibe la
petición, se toma su tiempo para preparar la respuesta y la envía. El resultado, una
pequeña demora debido al tiempo que tarda en llegar la petición al servidor, el tiempo
que éste tarda en preparar la respuesta, y el tiempo que tarda en llegar la respuesta
más recargarse en el navegador.(WebMaster, 2008)

En la parte inferior vemos lo que sería un esquema de comunicación usando

Ajax: el cliente tiene una página web cargada (puede ser una página web completa, o
sólo el esqueleto de una página web). El cliente sigue trabajando y en segundo plano
(de ahí que hayamos dibujado con líneas punteadas las comunicaciones) le dice al
servidor que le envíe un paquete de datos que le hacen falta. El servidor procesa la
petición. Ahora la respuesta es mucho más rápida: no tiene que elaborar una página
web completa, sino sólo preparar un paquete de datos. Por tanto el tiempo de
respuesta es más rápido. El servidor envía el paquete de datos al cliente y el cliente
los usa para cambiar los contenidos que se estaban mostrando en la página web.

pág. 33
10.12.1 Ventajas E Inconvenientes De Ajax

Las ventajas que proporciona Ajax son varias:

a) No es necesario recargar y redibujar la página web completa, con lo que todo

es más rápido.

b) El usuario no percibe que haya demoras: está trabajando y al ser las

comunicaciones en segundo plano no hay interrupciones.

c) Los pasos que antes podía ser necesario dar cargando varias páginas web
pueden quedar condensados en una sola página que va cambiando gracias a Ajax y
a la información recibida del servidor.

Como todo en la vida, Ajax también tiene inconvenientes:

a) El usuario puede perder la capacidad para hacer cosas que hacía con webs
tradicionales puesto que no hay cambio de página web. Por ejemplo usar los botones
de avance y retroceso del navegador o añadir una página a favoritos puede dejar de
ser posible. Esto en algunos casos no es deseable.

b) El desarrollo de aplicaciones web se puede volver más complejo.

Supongamos que antes tuviéramos un proceso en el que avanzábamos a través de
varias páginas web como 1, 2, 3. De este modo la organización resulta sencilla. Si
condensamos todo en una sola página web: 1, escribir y depurar el código puede
volverse más complicado. En sitios complejos, puede ser muy difícil depurar errores.

c) Existen problemas y restricciones de seguridad relacionados con el uso de

Ajax. Hay que tener en cuenta que por motivos de seguridad no todos los procesos se
pueden realizar del lado del cliente (que por su propia naturaleza es “manipulable”).
También existen restricciones de seguridad para impedir la carga de contenidos
mediante Ajax desde sitios de terceras partes.

d) La indexación para los motores de búsqueda se ve dificultada, con lo cual

nuestros sitios web pueden perder visibilidad en los buscadores. No es lo mismo un

pág. 34
contenido “constante” o aproximadamente estático, fácilmente rastreable para un
buscador, que un contenido “cambiante” en función de la ejecución de JavaScript,
difícilmente rastreable para un buscador.(Bahit, 2000)

¿Mejor usar o no usar Ajax?

Como todo, hay que usar las cosas en su justa medida. Ajax bien usado puede
ser muy útil para una página web. Ajax mal usado puede ser un desastre para una
página web.

¿Es Ajax un lenguaje de programación?

No, Ajax es un conjunto de técnicas que se usan para lograr un objetivo y se

basa en lenguajes ya existentes como JavaScript.

Podríamos dar esta definición de Ajax: “Ajax es un conjunto de métodos y

técnicas que permiten intercambiar datos con un servidor y actualizar partes de
páginas web sin necesidad de recargar la página completamente”.

Aunque Ajax se pensó inicialmente para transferir datos en un solo formato

(XML), actualmente Ajax permite la transmisión de datos en múltiples formatos: XML,
JSON, EBML, texto plano, HTML, etc.(Query Foundation, 2016)(Code School, 2016)

pág. 35
10.13 Workbench

Es una herramienta que te permite diseñar de forma visual las bases de datos,
facilitándote la tarea de trabajar con tablas y vistas (Figura 8)(WebMaster, 2008)

Figura 8 Entorno Grafico

Algunas de las características más interesantes de MySQL Workbench son:

Edición de diagramas basada en Cairo, con posibilidad de realizar una salida

en los formatos como OpenGL, Win32, X11, Quartz, PostScript, PDF…

Proporciona una representación visual de las tablas, vistas, procedimientos y

funciones almacenadas y claves foráneas.

Permite acceso a bases de datos e ingeniería inversa de las mismas para crear
los SQL de creación

Ofrece sincronización con la base de datos y el modelo.

pág. 36
Permite generar los scripts SQL a partir del modelo creado.

Ofrece una arquitectura extensible.

Tiene soporte para exportar los datos como script SQL CREATE.

Permite importar modelos de DBDesigner4.

Ofrece soporte completo a las características de MySQL 5.

MySQL Workbench es totalmente gratuito en su versión Community (aunque

existe una versión comercial con algunas funcionalidades extras) y está disponible
para todas las plataformas (Windows, Linux y Mac OS).(Oracle Corporation, 2016)

10.14 Bootstrap
Bootstrap, es un framework originalmente creado por Twitter, que permite crear
interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz
del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se
adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta
técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo
Como se ve en (Figura 9).(GitHub, 2016)

Figura 9 Entorno Grafico Multidispositivo

pág. 37
 El beneficio de usar responsive design en un sitio web, es principalmente que
el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que
se usa con más frecuencia, y que a mi opinión personal me gusta más, es el uso
de media queries, que es un módulo de CSS3 que permite la representación de
contenido para adaptarse a condiciones como la resolución de la pantalla y si trabajas
las dimensiones de tu contenido en porcentajes, puedes tener una web muy fluida
capaz de adaptarse a casi cualquier tamaño de forma automática.

Pero si no quieres nada que ver con los media queries, otra muy buena opción
es el uso del framework de Bootstrap, que como te dije te ayudará a desarrollar tus
sitios adaptativos.

Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear
interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos,
esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos. El
Framework trae varios elementos con estilos predefinidos fáciles de configurar:
Botones, Menús desplegables, Formularios incluyendo todos sus elementos e
integración JQuery para ofrecer ventanas y tooltips dinámicos.

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero

es compatible con la mayoría de los navegadores web. La información básica de
compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos
y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la
información básica de un sitio web para todos los dispositivos y navegadores. Por
ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas,
gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de
navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es
requerida para su uso.(Code School, 2016)

Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el
diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las
características del dispositivo usado (Computadoras, tabletas, teléfonos
móviles).(GitHub, 2016)

pág. 38
10.15 Diagrama entidad-relación

EL modelo de datos entidad-relación (E-R) está basado en una percepción del

mundo real consistente en objetos básicos llamados entidades y de relaciones entre
estos objetos.(Roger S. Pressman, 2010)
Se desarrolló para facilitar el diseño de bases de datos permitiendo la
especificación de un esquema de la empresa que representa la estructura lógica
completa de una base de datos. El modelo de datos E-R es uno de los diferentes
modelos de datos semánticos; el aspecto semántico del modelo yace en la
representación del significado de los datos. El modelo E-R es extremadamente útil
para hacer corresponder los significados e interacciones de las empresas del mundo
real con un esquema conceptual. Debido a esta utilidad, muchas herramientas de
diseño de bases de datos se basan en los conceptos del modelo E-R. (Silberschatz
Abraham, 2002)

Hay tres nociones básicas que emplea el modelo de datos E-R:

 Conjuntos de entidades
 Conjuntos de relaciones
 Atributos.
 Conjuntos de entidades

Una entidad es una «cosa» u «objeto» en el mundo real que es distinguible de

todos los demás objetos.

Por ejemplo, cada persona en un desarrollo es una entidad. Una entidad tiene un
conjunto de propiedades, y los valor es para algún conjunto de propiedades pueden
identificar una entidad de forma unívoca. Por ejemplo, el D.N.I.67.789.901 identifica
unívocamente una persona particular en la empresa. Una entidad puede ser concreta,
como una persona o un libro, o puede ser abstracta, como un préstamo, unas
vacaciones o un concepto.

pág. 39
 Un conjunto de entidades es un conjunto de entidades del mismo tipo que
comparten las mismas propiedades, o atributos. El conjunto de todas las personas que
son clientes en un banco dado, por ejemplo, se pueden definir como el conjunto de
entidades cliente. Análogamente, el conjunto de entidades préstamo podría
representar el conjunto de todos los préstamos concedidos
Por un banco particular. Las entidades individuales que constituyen un conjunto se
llaman la extensión del conjunto de entidades. Así, todos los clientes de un banco son
la extensión del conjunto de entidades cliente.(WebMaster, 2008)

Una entidad se representa mediante un conjunto de atributos. Los atributos

describen propiedades que posee cada miembro de un conjunto de entidades.

Una superclase es un conjunto de uno o más atributos que, tomados

colectivamente, permiten identificar de forma única una entidad en el conjunto de
entidades.

Por ejemplo, el atributo id-cliente del conjunto de entidades cliente es suficiente

para distinguir una entidad cliente de las otras. Así, id-cliente es una superclase.

Análogamente, la combinación de nombre-cliente e id cliente es una superclase

del conjunto de entidades cliente.

El atributo nombre-cliente de cliente no es una superclase, porque varias

personas podrían tener el mismo nombre.

El concepto de una superclase no es suficiente para lo que aquí se propone, ya

que, como se ha visto, una superclase puede contener atributos innecesarios. Si K es
una superclase, entonces también lo es cualquier supe conjunto de K. A menudo
interesan las superclaves tales que los subconjuntos propios de ellas no son
superclase. Tales superclaves mínimas se llaman claves candidatas.
pág. 40
 Es posible que conjuntos distintos de atributos pudieran servir como clave
candidata. Supóngase que una combinación de nombre-cliente y calle-cliente es
suficiente para distinguir entre los miembros del conjunto de entidades cliente.
Entonces, los conjuntos {id-cliente} y {nombre-cliente, calle-cliente} son claves
candidatas. Aunque los atributos id-cliente y nombre-cliente juntos puedan distinguir
entidades cliente, su combinación no forma una clave candidata, ya que el atributo id-
cliente por sí solo es una clave candidata.

Se usará el término clave primaria para denotar una clave candidata que es
elegida por el diseñador de la base de datos como elemento principal para identificar
las entidades dentro de un conjunto de entidades.

Una clave (primaria, candidata y superclase) es una propiedad del conjunto de

entidades, más que de las entidades individuales. Cualesquiera dos entidades
individuales en el conjunto no pueden tener el mismo valor en sus atributos clave al
mismo tiempo. La designación de una clave representa una restricción en el desarrollo
del mundo real que se modela.

 Conjuntos de relaciones

Una relación es una asociación entre diferentes entidades. Por ejemplo, se puede
definir una relación que asocie al cliente López con el préstamo P-15. Esta relación
especifica que López es un cliente con el préstamo número P-15

Un esquema de desarrollo E-R puede definir ciertas restricciones a las que los
contenidos de la base de datos, sé deben adaptar.

 Correspondencia de cardinalidades
La correspondencia de cardinalidades, o razón de cardinalidad, expresa el número
de entidades a las que otra entidad puede estar asociada vía un conjunto de
relaciones.
pág. 41
 Una clave permite identificar un conjunto de atributos suficiente para distinguir
las entidades entre sí.

Las claves también ayudan a identificar unívocamente a las relaciones y así a

distinguir las relaciones entre sí.

Relación Uno a Uno: Cuando un registro de una tabla sólo puede estar
relacionado con un único registro de la otra tabla y viceversa. En este caso la clave
foránea se ubica en alguna de las 2 tablas.

Relación Uno a Muchos: Cuando un registro de una tabla (tabla secundaria)

sólo puede estar relacionado con un único registro de la otra tabla (tabla principal) y
un registro de la tabla principal puede tener más de un registro relacionado en la tabla
secundaria. En este caso la clave foránea se ubica en la tabla secundaria.

Relación Muchos a Muchos: Cuando un registro de una tabla puede estar

relacionado con más de un registro de la otra tabla y viceversa. En este caso las dos
tablas no pueden estar relacionadas directamente, se tiene que añadir una tabla entre
las dos (Tabla débil o de vinculación) que incluya los pares de valores relacionados
entre sí.

El nombre de tabla débil deviene que con sus atributos propios no se puede
encontrar la clave, por estar asociada a otra entidad. La clave de esta tabla se
conforma por la unión de los campos claves de las tablas que relaciona. (Barker, 1994)

pág. 42
10.16 WAMP

La complejidad que involucra la instalación y configuración individual de los

software para el desarrollo web promovieron el surgimiento de paquetes donde
mediante un solo proceso de instalación se obtiene un servidor web y de base de datos
listo. Uno de estos paquetes es WAMP (http://www.wampserver.com/en/), el cual
describiremos a continuación.

WAMP es el acrónimo usado para describir un sistema de infraestructura de

internet que usa las siguientes herramientas:

Windows, como sistema operativo;

Apache, como servidor web;

MySQL, como gestor de bases de datos;

PHP (generalmente), Perl, o Python, como lenguajes de programación.

El uso de un WAMP permite servir páginas HTML a internet, además de poder

gestionar datos en ellas, al mismo tiempo un WAMP, proporciona lenguajes de
programación para desarrollar aplicaciones web.(WAMPSERVER, 2015)

10.17 Composer

El asunto está así: PHP ha tenido algunos cuantos problemas en el mundo de

la descarga de paquetes/librerías, para hacer eso tenías que ir a la web (si es que
tenía) de alguna librería y buscar la sección de “Descargas” para poder utilizarla; sin
contar con el hecho que para hacer eso en algunas ocasiones necesitabas registrarte
a la página; programadores PHP se quejaban de que no existía algo
como npm para Node.js o bundler para Ruby. Bien, ahora existe, se
llama Composer y podría considerarse una de las maravillas del mundo de PHP.(Php,
2016)

Composer es un manejador de dependencias.

pág. 43
¿Manejador de qué?

Composer es un manejador de dependencias, no un gestor de paquetes. Pero

es cierto que trata con paquetes y librerías, la instalación siempre es local para
cualquier proyecto, las librerías se instalan en un directorio por defecto (normalmente
es /vendor). Composer es capaz de instalar las librerías que requiere tu proyecto con
las versiones que necesiten. ¿Y si mis librerías dependen de otras? También es capaz
de resolver eso y descargar todo lo necesario para que funcione y así quitarnos del
dolor de cabeza de hacer todo eso de forma manual.

¿Qué problemas resuelve Composer?

Tienes un proyecto que depende de ciertas librerías desarrolladas por terceros,

y a su vez, éstas librerías también dependen de otras (tú no tienes porqué conocer
estas librerías) (Vea en Figura 10), lo que hace Composer en este caso es averiguar
que librerías deben instalarse; es decir, resuelve todas las dependencias indirectas y
descarga automáticamente la versión correcta de cada paquete.(Nils Adermann, 2015)

Figura 10 10Librería

pág. 44
10.18 PHP

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de

código abierto muy popular especialmente adecuado para el desarrollo web y que
puede ser incrustado en HTML.

Este lenguaje es más rápido, orientado a objetos y multiplataforma, para este

tipo de lenguaje se encuentran disponibles muchas librerías, es un lenguaje ideal para
desarrollar aplicaciones web.
La ventaja del intérprete de PHP y su diversa cantidad de librerías desarrolladas son
de código libre, por lo que se dispone de herramientas para desarrollar aplicaciones
web.

Apache, así como algunos otros servidores web, pueden incorporar PHP como
un módulo propio del servidor, lo cual permite que las aplicaciones escritas en PHP
resulten mucho más rápidas que las aplicaciones de interfaz de entrada común
habituales.

Una de las características más potentes y destacables de PHP es su soporte

para un amplio abanico de bases de datos. Escribir una página web con acceso a una
base de datos es increíblemente simple utilizando una de las extensiones específicas
de bases de datos (p.ej., para MySQL), o utilizar una capa de abstracción como PDO,
o conectarse a cualquier base de datos que admita el estándar de Conexión Abierta a
Bases de Datos por medio de la extensión ODBC. (Php, 2016)

pág. 45
10.19 Encriptación de datos

Corresponde a una tecnología que permite la transmisión segura de

información, al codificar los datos transmitidos usando una fórmula matemática que
"desmenuza" los datos. Asegurar que la Información viaje segura, manteniendo su
autenticidad, integridad, confidencialidad y el no repudio de la misma entre otros
aspectos.(GitHub, 2016)

Para proteger la información almacenada se suele recurrir a las denominadas

técnicas de encriptación, la encriptación consiste básicamente en convertir un mensaje
en otro de forma tal que el mensaje original solo pueda ser recuperado por un
determinado grupo de personas que saben cómo "desencriptar" el mensaje codificado
(Como se ve en la Figura 11).

Figura 11 Representación y/o Ejemplo

El esquema básico de encriptación implica la utilización de un password o clave

para encriptar el mensaje de forma tal que solo puedan desencriptar los mensajes
aquellos que conocen el password utilizado.(Bahit, 2000)

10.19.1 Criptografía

La encriptación de datos funciona utilizando la criptografía. La criptografía es la

ciencia de usar las matemáticas para encriptar y desencriptar datos. Una vez que la
información ha sido encriptado, puede ser almacenada en un medio inseguro o
enviada a través de una red insegura (como Internet) y aun así permanecer secreta.
pág. 46
 Luego, los datos pueden desencriptar a su formato original.(Daniel J. Barrett,
2001)

Algoritmo criptográfico: Un algoritmo criptográfico, o cifrado, es una función

matemática usada en los procesos de encriptación y des-encriptación. Un algoritmo
criptográfico trabaja en combinación con una llave (un número, palabra, frase, o
contraseña) para encriptar y desencriptar datos. Para encriptar, el algoritmo combina
matemáticamente la información a proteger con una llave provista.

El objetivo de un algoritmo criptográfico es hacer tan difícil como sea posible

desencriptar los datos sin utilizar la llave. Si se usa un algoritmo de encriptación
realmente bueno, entonces no hay ninguna técnica significativamente mejor que
intentar metódicamente con cada llave posible.

El resultado de este cálculo son los datos encriptados. Para desencriptar, el

algoritmo hace un cálculo combinando los datos encriptados con una llave provista,
siendo el resultado de esta combinación los datos des encriptados.

La mayoría de los algoritmos modernos del cifrado se basan en una de las

siguientes dos categorías de procesos:

 Problemas matemáticos que son simples pero que tienen una inversa que se
cree (pero no se prueba) que es complicada
 Secuencias o permutaciones que son en parte definidos por los datos de
entradas.

Diferencias entre el proceso de encriptación y desencriptación

La encriptación es el proceso en el cual los datos a proteger son traducidos a

algo que parece aleatorio y que no tiene ningún significado (los datos encriptados). La
des encriptación es el proceso en el cual los datos encriptados son convertidos
nuevamente a su forma original.(Sommerville, 2005)

pág. 47
Arquitecturas de Seguridad

Línea dedicada al diseño e integración de soluciones corporativas de seguridad

perimetral, de infraestructuras y de sistemas. Entre otras soluciones, en esta línea se
encuentran las plataformas de seguridad perimetral (cortafuegos, redes privadas
virtuales, etc.), de contenidos, de detección y prevención de intrusiones, de análisis y
gestión de vulnerabilidades.

10.19.2 Métodos de encriptación

Para poder encriptar un dato, se pueden utilizar procesos matemáticos diferentes:

1. Algoritmo HASH: Este algoritmo efectúa un cálculo matemático sobre los datos
que constituyen el documento y da como resultado un número único llamado
MAC. Un mismo documento dará siempre un mismo MAC. es una función para
resumir o identificar probabilísticamente un gran conjunto de información,
dando como resultado un conjunto imagen finito generalmente menor. se refiere
a una función o método para generar claves o llaves que representen de
manera casi unívoca a un documento, registro, archivo, etc., resumir o
identificar un dato a través de la probabilidad, utilizando una función hash o
algoritmo hash. Un hash es el resultado de dicha función o algoritmo. Entre los
algoritmos de hash más comunes están: SHA-1: algoritmo de hash
seguro. Algoritmo de síntesis que genera un hash de 60 bits. Se utiliza, por
ejemplo, como algoritmo para la firma digital. MD2 está optimizado para
computadoras de 8 bits. El valor hash de cualquier mensaje se forma haciendo
que el mensaje sea múltiplo de la longitud de bloque en el ordenador (128 bits
o 16 bytes) y añadiéndole un checksum. Para el cálculo real, se utiliza un bloque
auxiliar 48 bytes y una tabla de 256 bytes que contiene dígitos al azar del
número pi.
2. MD4 es un algoritmo de resumen del mensaje (el cuarto en la serie) diseñado
por el profesor Ronald Rivest del MIT. Implementa una función criptográfica

pág. 48
 de hash para el uso en comprobaciones de integridad de mensajes. La longitud
del resumen es de 128 bits.
3. MD5 Esquema de hash de hash de 128 bits muy utilizado para autenticación
cifrada. Gracias al MD5 se consigue, por ejemplo, que un usuario demuestre
que conoce una contraseña sin necesidad de enviar la contraseña a través de
la red.

4. Algoritmos Simétricos: Utilizan una clave con la cual se encripta y desencripta

el documento. Todo documento encriptado con una clave, deberá
desencriptarse, en el proceso inverso, con la misma clave. En este modelo, el
mensaje original es convertido en un mensaje cifrado que aparentemente es
aleatorio y sin sentido. El proceso de encriptación está formado por dos
componentes, un algoritmo y una clave. La clave es un valor que es
independiente del texto o mensaje a cifrar. El algoritmo va a producir una salida
diferente para el mismo texto de entrada dependiendo de la clave utilizada. Una
vez cifrado, el mensaje puede ser transmitido. El mensaje original puede ser
recuperado a través de un algoritmo de desencriptación y la clave usada para
la encriptación.

5. Algoritmos Asimétricos (RSA): Requieren dos Claves, una Privada (única y

personal, solo conocida por su dueño) y la otra llamada Pública, ambas
relacionadas por una fórmula matemática compleja imposible de reproducir. Los
pasos del proceso de encriptación con clave pública son los siguientes: o Cada
sistema genera un par de claves para ser usadas en la encriptación y
desencriptación de los mensajes que envíen y reciban.
o Cada sistema publica su clave de encriptación (clave pública). La clave de
desencriptación relacionada (clave privada) se mantiene en privado. o Si Alice
desea enviar un mensaje a Bob, encripta el mensaje utilizando la clave pública
de Bob. o Cuando Bob recibe un mensaje lo desencripta usando su clave
privada. Nadie puede desencriptar el mensaje porque solo Bob conoce su clave
privada.
pág. 49
6. Algoritmo de encriptación RC4: Es un algoritmo de Cifrador de flujo (no de
bloques), creado en 1987 por Ronald Rivest (la R de RSA - Secreto Comercial
de RSA Data Security). Fue publicado el 13 de Septiembre de 1994 usando
remailers anónimos en un grupo de news: sci.crypt. Es usado por
diversos programascomerciales como Netscape y Lotus Notes.

10.20 Algoritmos Simétricos Y Los Asimétricos

Los algoritmos simétricos encriptan y desencriptan con la misma llave. Las

principales ventajas de los algoritmos simétricos son su seguridad y su velocidad. Los
algoritmos asimétricos encriptan y desencriptan con diferentes llaves. Los datos se
encriptan con una llave pública y se desencriptan con una privada, siendo ésta su
principal ventaja.(Code School, 2016)

Los algoritmos asimétricos, también conocidos como algoritmos de llave pública,

necesitan al menos una llave de 3.000 bits para alcanzar un nivel de seguridad similar
al de uno simétrico de 128 bits. Y son increíblemente lentos, tanto que no pueden ser
utilizados para encriptar grandes cantidades de información.

Los algoritmos simétricos son aproximadamente 1.000 veces más rápidos que los
asimétricos.

 El protocolo SSL, protege los datos transferidos mediante conexión http, es

decir navegación web, utilizando encriptación provista por un Servidor Web
de Seguridad. Una llave pública es empleada para encriptar los datos, y una
llave privada se utiliza para descifrar o desencriptar la información.
 CryptoForge le proporciona cuatro robustos algoritmos de
encriptación para proteger sus datos:

pág. 50
 1. Blowfish (llave de 448 bits) es un algoritmo de encriptación rápido y
fuerte. Su creador es Bruce Schneier, uno de los más prestigiosos
criptógrafos en el mundo.
2. Rijndael (llave de 256 bits) es un algoritmo seguro y eficiente. Sus
creadores son Joan Daemen y Vincent Rijmen (Bélgica). Ha sido elegido
como el nuevo Estándar Avanzado de Encriptación (AES) por el Instituto
Nacional de Estándares y Tecnología (NIST) de los EEUU.
3. Triple DES (llave de 168 bits) es un algoritmo desarrollado por el
gobierno de EEUU y ha sido evaluado durante años sin descubrírsele
debilidades. Es una configuración de encriptación en la cual el algoritmo
DES es usado tres veces con tres llaves diferentes.
4. Gost (llave de 256 bits) es un algoritmo de Rusia y podría ser considerado
el análogo ruso al DES. Tiene un diseño conservador y no ha podido ser
vulnerado, a pesar de haber sido uno de los más estudiados, durante
años, por los mejores expertos en criptoanálisis.
Cuando usted ingresa su contraseña en CryptoForge, ésta es procesada
con un algoritmo Hash para generar una huella digital, conocida en inglés
como "digest".

10.20.1 Tipos de cifrados

Cifrado es otro nombre que se le da al proceso de encriptación. El propósito de

un cifrado es tomar datos sin encriptar, llamado texto en claro, y producir una versión
encriptado de los mismos. Existen dos clases de cifrado: cifrado de flujo de datos y
cifrado por bloques (Figura 12).(Silberschatz Abraham, 2002)

pág. 51
 Figura 12 Ejemplo Encriptación y Desencriptación

 Cifrado de flujo de datos: En el cifrado por flujo de datos se encripta un bit (o

byte) de texto en claro por vez. El ejemplo más simple de cifrado por flujo de
datos es el que consiste en combinar los datos, un bit a la vez, con otro
bloque de datos llamado pad. Los cifrados por flujo de datos funcionan
realmente bien con datos en tiempo real como voz y video.
 Cifrado por bloques: operan sobre bloques de tamaño mayor que un bit del
texto en claro y producen un bloque de texto cifrado, generalmente los
bloques de salida son del mismo tamaño que los de la entrada. El tamaño
del bloque debe ser lo suficientemente grande como para evitar ataques de
texto cifrado... El de cifrado de flujo de datos puede ser considerado como un
cifrado por bloques de tamaño 1 bit.(ALEGSA, 2016)

10.21 Css

Es un lenguaje utilizado en la presentación de documentos HTML. Un documento

HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el
lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este
lenguaje es principalmente utilizado por parte de los navegadores web de internet y
por los programadores web informáticos para elegir multitud de opciones de
pág. 52
presentación como colores, tipos y tamaños de letra, etc. (Figura 13).(Code School,
2016)

Figura 13 Icono representativo

La filosofía de CSS se basa en intentar separar lo que es la estructura del

documento HTML de su presentación. Por decirlo de alguna manera: la página web
sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el
contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle
el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa
por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de
color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo,
verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de
distintas maneras.

Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder
cambiar el color de algunas típicas etiquetas HTML como <H1> (h1 es una etiqueta en
el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande).
Pero también hay funciones algo más complejas, como introducir espaciado entre
elementos <DIV> (div es una etiqueta HTML para identificar una determinada región o
división de contenido dentro de una página web) o establecer imágenes de fondo.

CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su
definición siempre se hace uso de un identificador de etiqueta HTML (como por
ejemplo <H1>), y luego indicamos con qué aspecto queremos que se muestren todas
las etiquetas <H1> que aparezcan en un documento. Al igual que con <H1> podemos
definir cómo queremos que se muestren las distintas partes del documento HTML,
pág. 53
pudiendo en cada caso definir sus propiedades (color, tipo de fuente, tamaño, espacio,
imagen) con algún determinado valor deseado.(Roger S. Pressman, 2010)

Vamos a partir de un ejemplo muy sencillo, que tratará de una página web o archivo
HTML donde tan solo tendremos un párrafo de texto y sobre cuya etiqueta <p> iremos
realizando cambios e iremos aplicando los conocimientos que vamos a ir adquiriendo
y posteriormente veremos los resultados que obtenemos.

Nuestro documento HTML contendrá el siguiente texto de partida (en este caso
se ha llamado ejemplo.html) (Vea en la Figura 14):

Figura 14 Ejemplo HTML

Una vez creado el documento ejemplo.html en nuestro ordenador, lo abriremos con

un navegador web (Véase en Figura 15), cuyo resultado será similar a éste
dependiendo del navegador que utilicemos:

Figura 15 Navegador

pág. 54
 Una vez hemos visualizado este ejemplo tenemos una página web que tan solo
tiene un párrafo (“Texto de ejemplo para visualizar resultados”). Este aparece en color
negro por defecto y nosotros, para ver la utilidad de CSS deseamos mostrar el texto
en rojo. En realidad con CSS podemos hacer cosas mucho más complejas, pero solo
queremos poner un ejemplo para mostrar la utilidad de CSS.

Para ello vamos a crear nuestro archivo de hojas de estilo CSS que llamaremos
estilos.css, (Como vemos en la Figura 16 que crearemos en el mismo directorio donde
tengamos el archivo ejemplo.html y que contendrá lo siguiente:

/* Comentario en nuestro primer archivo css estilos.css

– www.aprenderaprogramar.com*/

p {color:red;}

Figura 16 Prueba de HTML con Hoja de Estilos

Para crear el archivo basta abrir un editor de texto como el bloc de notas como
Notepad++ o el simple bloc de notas de Windows, escribir el texto y guardar el archivo
con el nombre adecuado.

En la primera línea hemos insertado un comentario CSS. Para insertar un

comentario usamos la cadena de caracteres “/*” seguido del comentario que queremos
y cerramos la cadena con “*/”.

La segunda línea es propiamente donde definimos el estilo que queremos mostrar.

En este caso, p {color: red;} que indica que queremos un estilo para la etiqueta <p>
cuya propiedad color sea igual a red (rojo en inglés).

El patrón será el siguiente: nombre etiqueta HTML (en este caso p para la etiqueta
<p> de HTML) seguido de “{“, seguido de una lista de propiedades-valores separadas

pág. 55
por “;” y finalizamos con “}”. A su vez la lista de propiedades-valores será un conjunto
de palabras que indicará la propiedad que queremos cambiar, en nuestro caso color,
seguido de “:” y el valor que queremos asignar para esa propiedad, en este caso red
ya que queremos mostrar el texto en rojo. Además de color podríamos establecer tipo
de fuente, tamaño de fuente, y distintas propiedades.

Pues bien una vez tenemos nuestro archivo de estilos, estilos.css, debemos de
importarlo para su uso a nuestra página web o documento HTML, ejemplo.html. Para
ello ponemos lo siguiente entre las etiquetas <head> y </head> de nuestro
ejemplo.html.

<link reel="stylesheet" type="text/Css" href="estilos.css">

Este código lo que hace es indicar que existe un archivo con una definición de
estilos u hoja de estilos (stylesheet) que contiene código Css (text/Css) y que se
encuentra en la ruta estilos.css. Si el fichero se encontrara en otro directorio habría
que especificar la ruta, por ejemplo: templates/estilos.css.

Así tendremos nuestro archivo ejemplo.html con el siguiente texto (Figura 17):

Figura 17 11Ejemplo código Css

Y una vez que guardamos el archivo HTML con este nuevo código, recargamos
la página web en el navegador obteniendo el texto de la etiqueta <p> en rojo (Figura
18):

pág. 56
 Figura18 Vista en el Navegador

Aquí podemos ver la facilidad de CSS para cambiar la presentación ya que si

ahora quisiéramos cambiar el color, fuente, tamaño, etc., de la etiqueta <p> para
nuestra página web, tan solo deberíamos de cambiar las propiedades en el fichero
estilos.css sin alterar nada en la página web siendo más fácil, rápido y legible que tener
que estar modificando todas y cada una de las etiquetas <p> que aparecieran en
nuestra página web.(WebMaster, 2008)

Ahora bien, imaginemos que tenemos una página web con 3 etiquetas <p> pero
no deseamos que todas tengan la misma presentación. Pues para estas situaciones
CSS incorpora los llamados selectores. Estos selectores, nos indican para qué
elementos debemos de adoptar los estilos definidos en ellos.

Principalmente hay 2 tipos de selectores, el punto (.) y la almohadilla (#).

El selector. Afecta a todas las etiquetas HMTL que tengan un atributo en HTML
del tipo class. Por ejemplo para <p class=”azul”> podríamos definir un estilo CSS del
tipo .azul {color: blue;}. Escribiendo esto en el archivo Css lo que hacemos es definir
que cada vez que se indique que una etiqueta es de clase “azul” la propiedad de estilo
color será establecida a blue (blue es azul en inglés). Así si escribiéramos <p class =
“azul”>Texto de ejemplo para visualizar resultados</p>, el navegador busca en el Css
cómo se ha definido que deben ser todos los elementos en los que se indique que
usen la clase “azul”. Esta clase además de un color podría establecer tamaño de texto,
interlineado, tipo de fuente y múltiples atributos.

pág. 57
 El otro selector más utilizado es #. Esta afecta a todas las etiquetas HTML que
tengan un atributo en HTML del tipo id. Por ejemplo <p id=”verde”> Este texto está
identificado </p> significa que esta etiqueta de HTML lleva un “identificador” o nombre
único en esa página web, en este caso “verde”. Podríamos definir un estilo CSS del
tipo verde {color: Green;}. Con este código hemos definido un estilo para la etiqueta
con id verde, de modo que la propiedad color tomará el valor Green (Green es verde
en inglés). Es decir, el elemento de la página web que lleve el identificador indicado
tomará las propiedades de estilo que se hayan especificado. El id es único dentro de
una página web: no puede haber dos etiquetas cuyo id sea el mismo.

Normalmente el selector “#” se utiliza para un solo elemento (por ejemplo, el

encabezado o el pie) en toda la página web identificado por su atributo id, mientras
que el selector “.” también llamado selector de clase es utilizado para un grupo más
amplio de elementos en concreto todos los que tengan sus atributos class iguales que
los definidos por el selector “.”. (Vea en Figura 19)

Vamos ahora a realizar algunos cambios en nuestros documentos, tanto

ejemplo.html como sobre estilos.css y veremos más claro lo anteriormente explicado.

<!DOCTYPE HTML>
<HTML>
<head>
<title>Ejemplo aplicación CSS - aprenderaprogramar.com</title>

<link rel="stylesheet" type="text/css" href="estilos.css">

</head>
<body>

<p class="azul">Texto de ejemplo para visualizar resultados de la class

azul </p>

<p class="azul">Este texto también utiliza la clase azul </p>

pág. 58
 <p class="roja">Texto de ejemplo para visualizar resultados de la class
roja </p>

<p id="postdata">Texto de ejemplo para visualizar resultados de la id

postdata </p>

</body>
</HTML>

Figura 19 Ejemplo estilos en HTML

También deberemos de cambiar nuestro fichero estilos.css para definir las

propiedades de las etiquetas correspondientes, quedando así (Figura 20:

/* Comentario en nuestro primer archivo css estilos.css

– www.aprenderaprogramar.com*/

.azul{color:blue;}

.roja{color:red;}

#postdata{color:green;font-size:10px;}

Figura 20 Utilizando CSS

Y al refrescar nuestro navegador obtendríamos el siguiente resultado (Figura 21) :

pág. 59
 Figura 21 Vista ejecución de código en pestaña del navegador

Como podemos observar hemos modificado nuestro documento HTML para que
tuviera 4 párrafos. Los 2 primeros pertenecen a la misma clase azul ya que su atributo
class se corresponde con el estilo azul que se ha definido en la hoja de estilos (en el
archivo estilos.css).

El tercero pertenece a la clase “roja”, mientras que el cuarto es un párrafo con id

postdata y por tanto pertenece al estilo del selector único postdata.

Ámbito de Definición para CSS

La forma de definición de estilos css que hemos explicado en este artículo es la

que más separa la presentación de la información en una página web. Es muy útil
porque tenemos los estilos por un lado y los contenidos por otro. Si en un momento
dado queremos cambiar la forma en que se ve la página pero no sus contenidos,

pág. 60
únicamente tendríamos que modificar los archivos css. Pero también existen estas
otras 2 formas de aplicar estilos.

1- Definición en línea: En este método se define las propiedades de la etiqueta

HTML con el atributo style dentro del mismo archivo HTML y se le asigna una
determinada cadena que definiría el comportamiento. Ejemplo: <p style="color: red;">

En este ejemplo asignamos en línea a la etiqueta p el style (style es estilo en

inglés) definido, en el que la propiedad color toma el valor red de modo que el texto se
mostrará en rojo. Esta opción de definición, es rápida y para pequeñas cosas o
reparaciones de mantenimiento web puede ser útil, pero si se abusa de esta técnica
tendremos una página web muy poco legible ya que tendremos en un mismo archivo
el contenido de la página web junto con su presentación. Hacer cambios en la
presentación se hace entonces más complicado, al tener que ir revisando todas las
etiquetas que queramos cambiar una por una.(WebMaster, 2008)

2- Definición hoja de estilos interna: En este método se definen las propiedades

de estilo de la misma manera que hacíamos en el archivo css independiente, pero en
este caso se hace en la misma página entre las etiquetas <head> y </head>, como
vemos en el siguiente ejemplo (Figura 22)

Figura 22 Ejemplo de Hoja de estilos interna

pág. 61
 Como podemos observar definimos el estilo dentro de las etiquetas <head> y
</head>. Para delimitar lo que es definición de estilos se usa la etiqueta <style> y
</style> a modo de apertura y cierre de la definición de estilos. El código se escribe
igual que en el archivo css y aunque no es igual de independiente, esta forma de
definición al menos es algo más separada y legible que la anterior opción ya que la
definición de la presentación al menos no se mezcla con el contenido de la página
web. (Nils Adermann, 2015)

Estandarización

Tras la aparición del lenguaje CSS surgió la necesidad de estandarizar su uso

para todos los navegadores y los desarrolladores de software, ya que existían muchas
formas de escribir código CSS. Además, los navegadores interpretaban algunas
definiciones de estilo de distintas maneras y esto hacía más complicado el desarrollo
de páginas web. De hecho, las personas que trabajan en desarrollos web muchas
veces se enfrentan a que un navegador muestra una página web de distinta manera
aunque el código sea el mismo, simplemente por la forma en que el navegador
interpreta el código. El organismo encargado de la estandarización al respecto es el
llamado W3C que definió la primera versión CSS1 en 1996. Posteriormente se han
desarrollado las revisiones 2, 2.1 y 3 que es la más actual. El lenguaje CSS seguirá
evolucionando, pero hoy día puede decirse que ha sido un éxito al simplificar el
mantenimiento de páginas web. Antes, los contenidos y los estilos de presentación
estaban mezclados. Con CSS, quedan separados y se hace más fácil el diseño y
mantenimiento de páginas web.(Park, 2016)

10.22 PHP-FPDF

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de

código abierto muy popular especialmente adecuado para el desarrollo web y que
puede ser incrustado en HTML.

Bien, pero ¿qué significa realmente? Un ejemplo nos aclarará las cosas: (Vea en
Figura 23)

pág. 62
 Figura 23 Ejemplo de PHP

En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las
páginas de PHP contienen HTML con código incrustado que hace "algo" (en este caso,
mostrar "¡Hola, soy un script de PHP!). El código de PHP está encerrado entre
las etiquetas especiales de comienzo y final <?php y ?> que permiten entrar y salir del
"modo PHP".

Lo que distingue a PHP de algo del lado del cliente como Javascript es que el código
es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá
el resultado de ejecutar el script, aunque no se sabrá el código subyacente que era. El
servidor web puede ser configurado incluso para que procese todos los ficheros HTML
con PHP, por lo que no hay manera de que los usuarios puedan saber qué se tiene
debajo de la manga.

pág. 63
10.22.1 ¿Qué es FPDF?

FPDF es una clase escrita en PHP que permite generar documentos PDF
directamente desde PHP, es decir, sin usar la biblioteca PDFlib. La F de FPDF
significa Free (gratis y libre): puede usted usarla para cualquier propósito y modificarla
a su gusto para satisfacer sus necesidades.

FPDF tiene otras ventajas: funciones de alto nivel. Esta es una lista de sus principales
características:

 Elección de la unidad de medida, formato de página y márgenes

 Gestión de cabeceras y pies de página

 Salto de página automático

 Salto de línea y justificación del texto automáticos

 Admisión de imágenes (JPEG, PNG y GIF)

 Colores

 Enlaces

 Admisión de fuentes TrueType, Type1 y codificación

 Compresión de página

FPDF no necesita de ninguna extensión para PHP (excepto Zlib para activar la
compresión y GD para soporte a GIF) y funciona con PHP5 (≥ 5.1).

¿Qué idiomas puedo usar?

La clase genera documentos en muchos otros idiomas aparte de los europeos

occidentales: europeo central, ciríloco, griego y báltico, si se dispone de fuentes
TrueType o Type1 con el conjunto de caracteres adecuado. UTF-8 también está
disponible.

pág. 64
¿Y qué hay de la eficiencia?

Como es lógico, la velocidad de generación de un documento es menor que con

PDFlib. Sin embargo, la desventaja en cuanto a rendimiento es muy razonable y se
adecúa a la mayoría de los casos, a no ser que sus documentos vayan a ser
especialmente complejos o extensos.

pág. 65
11. PROCEDIMIENTO Y DESCRIPCIÓN DE LAS
ACTIVIDADES REALIZADAS

11.1 Recopilación De La Información

Se asistió al departamento de servicios escolares, división de estudios, a los

diferentes departamentos, sub-dirección académica y dirección para realizar las
entrevistas. Igualmente se entrevistó a una serie de alumnos escogidos al azar para
obtener la información necesaria de los problemas que se presentan al momento de
realizar la solicitud.

El principal argumento son las estadísticas históricas, se aplicara los

conocimientos obtenidos para el desarrollo del respaldo a las solicitudes y dictámenes
desde que el sistema este activo hasta hoy en día separando por periodos.

Para formalizar la recopilación de la información de los alumnos se planteó una

serie de preguntas (véase Figura 24), las cuales la mayoría de los problemas coincidía
con el correo, Numero de Control o Nombre del Alumno.

pág. 66
Figura 24 Formato de las encuestas

pág. 67
11.2 Entrevistas
11.2.1 Entrevista Alumnos
Se entrevistaron a 70 alumnos del Instituto Tecnológico del Istmo, dicha
entrevista arrojo la siguiente Información:
Tuvieron problema con el correo, ya sea porque escribieron mal el correo, en
este caso se agregó un campo de autenticación de correo para disminuir el problema.
Así también escribían mal su nombre y número de control, la solución de estos
problemas se abrió un apartado de interfaz usuario para modificar el nombre del
alumno y en cuanto el número de control se agregó un apartado al usuario
administrador para corregir este detalle.

11.2.2 Entrevista a jefe de departamento

Hablando con el jefe de Departamento se sacaron conclusiones:

 Las tablas Nuevos, Autorizados, en Revisión e Historial deberá tener un

campo de número de control de las solicitudes.
 Los jefes de departamento no pueden ver el dictamen teniendo un
problema si el alumno vuelve a solicitar un dictamen con las mismas
características del semestre anterior
 Se debe contar con un archivo histórico por periodo, ya sea de
Solicitudes que llegaron a dictamen o Dictámenes emitidos.

11.2.3 Entrevista a Usuario Comité (subacad)

 La entrevista al comité concluyo no con muchas mejoras, pidió que el proceso
no se viera en colores si no en tablas diferentes (Nuevos, Recomendados e
Historial).

11.2.4 Entrevista a director (dirección)

 En dirección se emite el Dictamen, lo que resalta en esta charla es el
diseño, que por lo general se divida en Recomendados y Generados, para
que las tablas sean entendible.

pág. 68
12. RESULTADOS, PLANOS, GRÁFICAS, PROTOTIPOS,
MANUALES, PROGRAMAS, ANÁLISIS ESTADÍSTICOS,
MODELOS MATEMÁTICOS, SIMULACIONES,
NORMATIVIDADES, REGULACIONES Y RESTRICCIONES,
ENTRE OTROS.

12.1 Planteamiento De La Solución

Se planea realizar la autenticación de correo para que los alumnos no tengan

problema para activar su cuenta, así también desde la interfaz usuario se podrá
modificar los datos del alumno excepto email y número de control.
Para la solución del alumno cuando tenga problemas con su número de control,
se abrirá un campo en Gestionar (Combobox) llamado Alumnos ahí encontraremos a
todos los alumnos inscritos en la plataforma, nada más buscaremos al alumno y
accionaremos “Cambiar número de control”.
La Solución que debemos realizar para los jefes de departamento y comité
académico en el momento que cancelan una solicitud, anteriormente el alumno se
basaba por medio de colores para ver donde ha llegado la solicitud, en este caso una
solución es cuando el jefe de departamento o el comité académico cancela la solicitud
se debe explicar ¿por qué se canceló dicha solicitud?, con una Nota de Cancelación.
Uno de los detalles que debemos agregar es el número de control del alumno,
para que cada interfaz usuario pueda visualizar de quién es la solicitud o dictamen
generado.
Para saber si el alumno solicito un dictamen con las mismas características del
semestre pasado y quiere volver a solicitar, en este caso no se llevaría mucho tiempo
para cancelar la solicitud porque, abriremos una opción en el Historial del Interfaz Jefe
de Departamento a todos los dictámenes generados se puedan ver y saber el motivo
de emisión.
Debemos respaldar los dictámenes, Recomendaciones y solicitudes de acuerdo
al periodo escolar, para que dicha información sea descargada y guardado por periodo,
se abrirá un campo en el usuario administrador llamado Exportación, ahí
descargaremos por periodo las tres opciones (Solicitudes, Recomendaciones y
Dictámenes), en caso de las Solicitudes y Recomendaciones se Adjuntara todos
aquellos que llegaron a Dictamen.
Y como último, se extraerá un respaldo de la Base de Datos y Software SCA
del servidor, en caso de que exista algún problema con el servidor.

pág. 69
12.1.1 Desarrollo e Implementación del Módulo “Estadísticas para la
toma de decisiones” del SCA (Solicitudes al Comité Académico).

El Desarrollo e Implementación del Módulo “Estadísticas para la toma de

decisiones” del SCA (Solicitudes al Comité Académico), pretende a que el alumno
tenga la facilidad de tramitar un dictamen sin problema, por eso como alumnos del ITI
y parte de nuestra formación académica, se dará soporte Técnico al sistema web
retomando los puntos que se requieren de cada uno de las interfaces de usuario.
El sistema presenta problemas en el registro del campo de Correo, en específico
el alumno escribió mal su correo o quizás no escribió bien sus demás datos
académicos, este problema puede ocasionar que el alumno no puede activar su cuenta
o un cierto problema que sus datos no son los correctos para el Dictamen, este tipo de
problemas debemos de solucionar lo más rápido posible, porque el sistema se
encuentra activo en la red y este es nuestro primer objetivo a solucionar.
El nuevo diseño del sistema web, se presentara con los colores que caracteriza
el Instituto Tecnológico del Istmo, no se tomara a votación ni mucho menos en
encuestas.
Para el nuevo modal “cancelar solicitud” se agregara un campo de Texto para
escribir las observaciones porque fue cancelada dicha solicitud.
Una aportación más importante es la exportación de las solicitudes,
recomendaciones y dictámenes de acuerdo al periodo, tomamos este punto como
importante porque no contaba el sistema con un respaldo de pdf ahora tendremos un
archivo histórico que nos facilitara en la estadísticas a futuro, ahora junto con mi equipo
de trabajo, daremos solución a los problemas que se presenten así también darle
soporte técnico al sistema web.

Nota: Para ver el procedimiento funcional del sistema se puede ver el video del
manual de usuario, que aparece en el Slider del sistema.

pág. 70
12.2 Base de Datos

La base de datos o banco de datos del sistema, en donde se almacenan los datos de
todas las operaciones que se ejecutaran a la puesta en marcha del sistema.

12.2.1 Entidad Relación

En la Fig-7.2.1.1 y la Fig-7.2.1.2, se muestran el diagrama relación dividido en

dos partes, que muestra la organización y representación de la información que se
pretende almacenar en la base de datos.

12.2.2 Diagrama Relacional

En la Fig-7.2.1.3, se muestra el diagrama relación que muestra la organización
y representación de la información que se pretende almacenar en la base de datos.

pág. 71
a b c d
Figura 25 Parte 1 del Diagrama Entidad Relación

pág. 72
a b c d

Figura 25 Parte 2 del Diagrama Entidad Relación

pág. 73
Figura 26 Diagrama relacional

pág. 74
12.2.3 Diccionario De Datos

NOMBRE TIPO PK NN AI DESCRIP

idAlumno INT(11) ✔ ✔ ✔ Identifica a cada

alumno

numero_control INT(10) ✔ Identificación en la

institución

nombre_alu VARCHAR(70) ✔ Nombre del

alumno

apellido_pa VARCHAR(70) ✔ Apellido Paterno

del alumno

apellido_ma VARCHAR(70) ✔ Apellido Materno

del alumno

telefono_alu INT(10) ✔ Número telefónico

del alumno

Carrera_idCarrera INT(11) ✔ ✔ Identificador de la

entidad Carrera de
tipo foráneo

Semestre INT(2) ✔ Semestre cursado

del alumno

Usuario_idUsuario INT(11) ✔ ✔ Identificador de la

entidad Usuario
de tipo foráneo

Tabla 1 Tabla de Entidad Alumno

pág. 75
 NOMBRE TIPO PK NN AI DESCRIP

idCarrera INT(11) ✔ ✔ ✔ identifica a cada

Carrera

nombre_carrera VARCHAR(90) ✔ Nombre de la

carrera
registrada en la
institución

Departamento_idDepartamento INT(11) ✔ ✔ Identificador de

la entidad
Departamento
de tipo foráneo

Tabla 2 Tabla de Entidad Carrera

NOMBRE TIPO PK NN AI DESCRIP

idComite INT(11) ✔ ✔ ✔ Identificador del

usuario de Comité
Académico

tituloComite VARCHAR(20) ✔ Cargo que ocupa

el usuario en el
instituto

nombreComite VARCHAR(70) ✔ Nombre del

usuario comité

apellidosComite VARCHAR(100) ✔ Apellido paterno y

materno del
usuario comité

telefonoComite VARCHAR(10) ✔ Número telefónico

de contacto con el
usuario Comité

pág. 76
Usuario_idUsuario INT(11) ✔ ✔ Identificador de la
entidad Usuario
de tipo foráneo

estadoCom VARCHAR(15) Estado del comité

Tabla 3 Tabla de Entidad Comité

NOMBRE TIPO PK NN AI DESCRIP

idDepartamento INT(11) ✔ ✔ ✔ Identificador de

los diferentes
departamentos
de la institución

nombre_dep VARCHAR(100) ✔ Descripción del

departamento

jefe_dpto_idjefe_dpto INT(11) ✔ ✔ Identificador de

la entidad
jefe_dpto de tipo
foráneo

Tabla 4 Tabla de Entidad Departamento

NOMBRE TIPO PK NN AI DESCRIP

idDictamen INT(11) ✔ ✔ ✔ Identificador de

los dictámenes
emitidos

Solicitud_idSolicitud INT(11) ✔ ✔ Identificador de la

entidad Solicitud
de tipo foráneo

numeroDictamen VARCHAR(20) ✔ Folio asignado a

dictamen emitido

pág. 77
nombreComite VARCHAR(120) ✔ Nombre del
comité
académico
vigente.

fecha_comite DATETIME Fecha en que

autorizo el
Comité
Académico

fecha_director DATETIME Fecha en que

autorizo el
Director

redaccionComite TEXT Recomendación

a dirección por el
comité
académico

parrafoDosComite TEXT Segundo párrafo

de la
recomendación
del comité

redaccionDirector TEXT Texto de

dictamen para su
validación

Nombre_dictamen VARCHAR(100) Nombre del

Dictamen

comiteActivo VARCHAR(70) Comité esta

Activo

solicitud_Alumno_idAlumno INT(11) ✔ ✔ Identifiador del

alumno

solicitud_Departamento_idDepartamento INT(11) ✔ ✔ Identifiador de

departamento

pág. 78
solicitud_Estado_idEstado INT(11) ✔ ✔ Identifiador de
Estado

solicitud_Normativo_idNormativo INT(11) ✔ ✔ Identifiador de

Normativo

solicitud_Motivo_idMotivo INT(11) ✔ ✔ Identifiador de

Motivo

Tabla 5 Tabla de Entidad Dictamen

NOMBRE TIPO PK NN AI DESCRIP

idDirector INT(11) ✔ ✔ ✔ Identificador

Director

Titulo VARCHAR(20) ✔ Se refiere a su

grado de estudio y
carrera

nombre_director VARCHAR(90) ✔ Nombre del

Director

apellidos_director VARCHAR(90) ✔ Apellido paterno y

materno del
Director

telefono_direc INT(10) Número telefónico

de contacto del
Director

Usuario_idUsuario INT(11) ✔ ✔ Identificador de la

entidad Usuario de
tipo foráneo

EstadoActual VARCHAR(20) ✔ Si el director está

activo o fue dado
de baja.

Tabla 6 Tabla de Entidad Director

pág. 79
 NOMBRE TIPO PK NN AI DESCRIP

idEstado INT(11) ✔ ✔ ✔ Identificador del

status que se
encuentra la
solicitud.

descripcion_estado VARCHAR(90) ✔ Descripción del

status que se
encuentra la
solicitud.

Tabla 7 Tabla de Entidad Estado

NOMBRE TIPO PK NN DESCRIP

idEstadoUsuario INT(1) ✔ ✔ Id del estado que

de usuario que se
asigno

nombreEstadoUsuario VARCHAR(45) ✔ Nombre del estado

de usuario:
activado o
desactivado

Tabla 8 Tabla de Entidad EstadoUsuario

pág. 80
 NOMBRE TIPO PK NN DESCRIP

idMotivo INT(11) ✔ ✔ Identificador del

motivo por el cual
solicita

nombre_motivo VARCHAR(45) ✔ Nombre del motivo

Tabla 9 Tabla de Entidad Motivo

NOMBRE TIPO PK NN AI DESCRIP

idNormativo INT(11) ✔ ✔ ✔ Identificador del

tipo de normativo
solicitar

descripcion_norma VARCHAR(200) ✔ Nombre del

normativo a
solicitar

Tabla 10 Tabla de Entidad Normativo

NOMBRE TIPO PK NN DESCRIP

idRol INT(11) ✔ ✔ Identificador del tipo de

privilegios del usuario

nombre_rol VARCHAR(45) ✔ descripción del

privilegio del usuario

Tabla 11 Tabla de Entidad Rol

pág. 81
 NOMBRE TIPO PK NN AI DESCRIP

idSolicitud INT(11) ✔ ✔ ✔ Identificador de la solicitud

fechaSolicitada DATETIME ✔ Fecha en la que se realiza

la solicitud

fechaEntrega DATETIME Fecha en la que se

imprime la solicitud

Redacción TEXT ✔ Texto que por normativa

lleva el formato de
solicitud

Alumno_idAlumno INT(11) ✔ ✔ Identificador de la entidad

Alumno de tipo foráneo

Departamento_idDepartamento INT(11) ✔ ✔ Identificador de la entidad

Departamento de tipo
foráneo

Estado_idEstado INT(11) ✔ ✔ Identificador de la entidad

Estado de tipo foráneo

Normativo_idNormativo INT(11) ✔ ✔ Identificador de la entidad

Normativo de tipo foráneo

Motivo_idMotivo INT(11) ✔ ✔ Identificador de la entidad

Motivo de tipo foráneo

Autorizo VARCHAR(100) En este campo el sistema

guarda el nombre de
quien autorizo la solicitud

notaAutorizada TEXT Guarda la redacción de

que fue lo que se solicito

Rechazo VARCHAR(100) Guarda la redacción de el

motivo de rechazo de la
solicitud

pág. 82
Periodo escolar VARCHAR(50) Guarda Periodo Escolar

Tabla 12 Tabla de Entidad Solicitud

NOMBRE TIPO PK NN AI DESCRIP

idUsuario INT(11) ✔ ✔ ✔ Identificador de usuario

email_user VARCHAR(100) ✔ Correo electrónico del

usuario, para validación de
la cuenta

nombre_usuario VARCHAR(100) ✔ Nombre del usuario

Password VARCHAR(100) ✔ Contraseña que asigna el

usuario

Rol_idRol INT(11) ✔ ✔ Rol que ocupa el usuario

dependiendo a la tabla rol

EstadoUsuario_idEstadoUsuario INT(1) ✔ ✔ Estado en el que se

encuentra el alumno

keyReg VARCHAR(100) ✔ Clave de activación de la

cuenta

Keypass VARCHAR(50) ✔ Clave de recuperación de

contraseña

Newpass VARCHAR(50) ✔ Nueva contraseña que le

asigna el sistema,
aleatoriamente

Img VARCHAR(70) ✔ Imagen de perfil de usuario

fecha_registro DATE ✔ Fecha de registro del

usuario.

Tabla 13 Tabla de Entidad Usuario

pág. 83
 NOMBRE TIPO PK NN AI DESCRIP

Idchat INT(11) ✔ ✔ ✔ Identificador de

chat

Mensaje TEXT Mensaje que

escribe el usuario

Utc TEXT NULL

Autor TEXT NULL

Tabla 14 Tabla de Entidad Chat

NOMBRE TIPO PK NN AI DESCRIP

idjefe_dpto INT(11) ✔ ✔ ✔ Identificador del jefe de departamento

titulo_jefe VARCHAR(20) ✔ Departamento asignado

nombre_jefe VARCHAR(90) ✔ Nombre del jefe de departamento

apellidos_jefe VARCHAR(90) ✔ Apellido paterno y materno del jefe de

departamento

telefono_jefe VARCHAR(10) ✔ Número telefónico de contacto del jefe

de departamento

Usuario_idUsuario INT(11) ✔ ✔ Identificador de la entidad Usuario de

tipo foráneo

Tabla 15 Tabla de Entidad jefe_dpto

pág. 84
 NOMBRE TIPO PK NN AI DESCRIP

idObservaciones INT(11) ✔ ✔ ✔ Identificador del comentario de

observación

Solicitud_idSolicitud INT(11) ✔ Identificador de la entidad Alumno

de tipo foráneo

descripcion_observaciones TEXT ✔ Texto de la observación realizada

sobre la solicitud

Usuario_idUsuario INT(11) ✔ Identificador de la entidad Usuario

de tipo foráneo

fecha_observacion DATETIME Identificador de la entidad

Observación de tipo foráneo

Tabla 16 Tabla de Entidad Observaciones

NOMBRE TIPO PK NN AI DESCRIP

idPeriodo INT(2) ✔ ✔ Identificador de

Periodo

nombrePeriodo VARCHAR(50) ✔ Nombre del

Periodo

estadoPeriodo VARCHAR(20) Estado del

Periodo

Tabla 17 Tabla de Entidad Periodo

pág. 85
12.3 Descripción de Actores

A continuación se describen los actores del sistema

Actor Administrador
Casos de Uso Gestionar Solicitud, Gestionar Alumno, Gestionar Usuario,
Gestionar Departamento, Gestionar Normativo, Gestionar
Carrera, Emitir Dictamen.
Resumen Es la persona que tiene todos los privilegios en el sistema.

Tabla 18 Actor administrador

Actor Alumno
Casos de Uso Gestionar Solicitud, Gestionar Alumno
Resumen Es la persona en este caso un alumno ITI, que debe de registrarse
en el sistema, y que puede mandar una solicitud al comité
académico del ITI, también puede visualizar la lista de las
solicitudes previamente solicitadas, así como cancelar y editar una
solicitud.

Tabla 19 Actor Alumno

Actor Jefe de Departamento

Casos de Uso Gestionar Solicitud
Resumen Es la persona que ocupa el puesto de jefe de algún departamento
del ITI, se encarga del proceso de validación de las solicitudes
entrantes, es la que interactúa con el actor alumno, puede
visualizar, autorizar, rechazar y agregar observación a una
solicitud.

Tabla 20 Actor Jefe de Departamento

pág. 86
Actor Comité
Casos de Uso Gestionar Solicitud
Resumen Es la persona que ocupa el puesto como presidente del comité
académico, quien realiza y firma la recomendación del dictamen
correspondiente a la solicitud aprobada.

Tabla 171 Actor Comité

Actor Director
Casos de Uso Emitir Dictamen
Resumen Es la persona que ocupa el puesto de Director, y este genera y
firma el dictamen correspondiente a cada solicitud autorizada por
el comité académico.

Tabla 18 Actor Jefe Director

Actor TB_Solicitud
Casos de Uso Gestionar Solicitud
Resumen Representa a la tabla de la base de datos donde se almacenan
las solicitudes que realizan los alumnos.

Tabla 193 Actor TB_Solicitud

Actor TB_Alumno
Casos de Uso Gestionar Alumno
Resumen Representa a la tabla de la base de datos donde se almacenan
los alumnos que realizan una o más solicitudes.

Tabla 20 Actor TB_Alumno

Actor TB_Usuario
Casos de Uso Gestionar Usuario
pág. 87
Resumen Representa a la tabla de la base de datos donde se almacenan
todos los usuarios del sistema: administrador, comité, jefe de
departamento, director, administrador.

Tabla 215 Actor TB_Usuario

Actor TB_Departamento
Casos de Uso Gestionar Departamento
Resumen Representa a la tabla de la base de datos donde se almacenan
todos los departamentos académicos del ITI.

Tabla 226 Actor TB_Departamento

Actor TB_Normativo
Casos de Uso Gestionar Normativo
Resumen Representa a la tabla de la base de datos donde se almacenan
todos los normativos que los alumnos solicitan al comité
académico del ITI.

Tabla 237 Actor TB_Normativo

Actor TB_Carrera
Casos de Uso Gestionar Carrera
Resumen Representa a la tabla de la base de datos donde se almacenan
todas las carreras del ITI.

Tabla 248 Actor TB_Carrera

Actor TB_Dictamen
Casos de Uso Gestionar Dictamen

pág. 88
Resumen Representa a la tabla de la base de datos donde se almacenan
todos los dictámenes que los alumnos han solicitado y se les
haya entregado.

Tabla 259 Actor TB_Dictamen

12.4 Casos De Uso De Negocio Del Sistema

En la Figura 27 se muestra el caso de uso de negocio del sistema que

representa todos los procesos identificados y los actores que interactúan con el
sistema.

Figura 27 Diagrama de casos de uso de negocio

pág. 89
12.4.1 Descripción De Casos de Uso

La Figura 28 representa el caso de uso Gestionar Solicitud del modelo de

negocios inicial Sistema de Gestión y Control de Solicitud al Comité Académico del
ITI.

Figura 28 Caso de uso Gestionar Solicitud

pág. 90
Figura 28 Subcasos de usos del caso de uso principal Gestionar Solicitud

pág. 91
Caso de uso: Gestionar Solicitud
Breve descripción
El caso de Gestionar Solicitud, permite a los alumnos realizar, modificar y cancelar
una solicitud al comité académico, además darle seguimiento hasta el punto en donde
se le entrega el dictamen, también permite al jefe de área validar la solicitud, también
le permite al comité recomendar la solicitud y por ultimo al director generar el dictamen
de la solicitud.
Descripción paso a paso
 Se le presenta al alumno la vista de solicitar un normativo, dentro del cual,
se le muestra la lista de las solicitudes realizadas y un botón para realizar
una solicitud.
 El alumno selecciona el botón Solicitar Normativo, inmediatamente le
aparece en pantalla una ventana emergente con los siguientes elementos:
 Un combobox para seleccionar el normativo
 Un combobox para seleccionar el motivo
 Un cuadro te texto para que redacte una breve descripción
 El alumno selecciona el combobox seleccionar normativo, y el sistema
muestra la lista de todos los normativos que existentes.
 El alumno selecciona el combobox motivo, y el sistema le muestra las la lista
de los motivos.
 El alumno redacta una breve descripción de su solicitud.
 El alumno envía su solicitud.
 El sistema muestra en la lista de solicitudes, la nueva solicitud, ye el estado
de dicha solicitud.
 El sistema notificara al jefe de departamento, que le corresponda dicha
solitud.
 El sistema le permite al jefe de departamento visualizar en una ventana
emergente el PDF de la solicitud que el alumno realizo.
 El jefe de departamento podrá realizar las siguientes operaciones:
 Realizar observaciones a la solicitud.

pág. 92
 Autorizar la solicitud.
 Rechazar la solicitud.
 Cuando el jefe de departamento realice la operación realizar una
observación, el sistema le mostrara una ventana emergente con un cuadro
de texto donde podrá escribir la recomendación para una solicitud especifica.
 El jefe de departamento confirma él envió de la observación y el sistema le
notificara al alumno cambiando de estado de la solicitud.
 El alumno selecciona la opción observaciones y el sistema le mostrara una
ventana emergente con las observaciones realizadas.
 El alumno selecciona la opción editar mi solicitud, el sistema le mostrara
una ventana emergente con los datos de sus solicitud, en el cual podrá
realizar la edición y debe confirmar los cambios desde el botón confirmar
edición.
 De inmediato el sistema notificara al jefe de departamento que hubo
ediciones en la solicitud, y podrá visualizar las modificaciones de la solicitud,
y podrá realizar la autorización desde la opción autorizar, de inmediato el
sistema le muestra una ventana emergente con un cuadro de texto, para que
escriba una nota para la autorización de la solicitud, el jefe confirma la
autorización dando clic en el botón guardar.
 De inmediato el sistema le notificara al comité académico de una nueva
autorización de solicitud con el nombre del jefe de departamento que autorizo
dicha solicitud.
 El comité selecciona la solicitud y el sistema le visualiza una ventana
emergente la solicitud en formato PDF junto con la nota de autorización del
jefe de departamento.
 El comité académico redacta una recomendación para la solicitud, detallando
los motivos de la solicitud.
 El comité académico confirma la recomendación dando clic en el botón
guardar recomendación, de inmediato se le envía al director de ITI, y el

pág. 93
 sistema notificara al director que existe una nueva recomendación de
dictamen por medio del comité académico.
 El director selecciona la opción ver recomendación comité, y se visualiza
en una ventana emergente con la nota de recomendación del comité
académico, y también tiene la opción de visualizar en formato PDF la
recomendación que realizo el comité académico dando clic en ver PDF.
 El director redacta el dictamen para dicha recomendación de solicitud, y da
clic en el botón autorizar.
 El sistema genera el PDF del dictamen realizado, y se podrá visualizar y
descargar dando clic en la opción ver dictamen, de inmediato el sistema
arroja el PDF del dictamen.

Tabla 30 Descripción proceso Gestionar Solicitud

La Figura 29 representa el caso de uso Gestionar Alumno del modelo de negocios

inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 29 Caso de uso Gestionar Alumno

pág. 94
Figura 30 Subcasos de usos del caso de uso principal Gestionar Alumno

Caso de uso: Gestionar Alumno

Breve descripción
El caso de uso Gestionar Alumno permite al administrador consultar, ingresar,
eliminar, y modificar alumnos, también le permite al alumno registrarse en el sistema.
Descripción paso a paso
 Se le presente al administrador la vista de gestionar alumnos.
 Al administrador selecciona la opción nuevo alumno, de inmediato el
sistema le arroja una ventana emergente con los campos para su registro.
 El administrador introduce los datos del alumno y confirma el registro dando
clic en la opción registrar, y el alumno queda registrado en la base de datos.
 Para editar al alumno, el administrador selecciona la opción editar, de
inmediato el sistema le arroja una ventana emergente un formulario con los
datos del alumno seleccionado, el administrador realiza los cambios
necesarios y confirma los cambios dando clic en actualizar.
 La actualización se realiza en la base de datos.

pág. 95
  Para eliminar un alumno el administrador selecciona la opción eliminar, de
inmediato el sistema le arroja una ventana de confirmación de la eliminación,
el administrador confirma la eliminación y se elimina el alumno en la base de
datos.
 En el caso del alumno solo puede darse de alta, seleccionando la opción
registro, de inmediato el sistema le arroja en una ventana emergente, un
formulario para el registro.
 El alumno introduce sus datos y confirma el registro dando clic en la opción
registrarme¸ de inmediato se realiza en registro en la base de datos.

Tabla 31 Descripción proceso Gestionar Alumno

La Figura 31 representa el caso de uso Gestionar Departamento del modelo de

negocios inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 121 Caso de uso Gestionar Departamento

pág. 96
Figura 32 Subcasos de usos del caso de uso principal Gestionar Departamento

Caso de uso: Gestionar Departamento

Breve descripción
El caso de uso Gestionar Departamento le permite al administrador consultar,
ingresar, eliminar, y modificar los departamentos en la base de datos.

Descripción paso a paso

 Se le presenta al administrador la vista de gestionar departamentos.
 Hace clic en el botón nuevo departamento, y el sistema arroja una ventana
emergente con del formulario de registro de un nuevo departamento, el
administrador ingresa los datos correspondientes y confirma el registro dando
clic en el botón registrar, de inmediato se registran los datos del departamento
en la base de datos.
 El administrador da clic en el botón editar, de inmediato se accede a la base
de datos y se recuperan los datos del departamento seleccionado, al mismo
tiempo el sistema arroja un ventana emergente con los datos editables del
departamento.
pág. 97
  El administrador realiza la edición y confirma los cambios dando clic en el
botón actualizar, los cambios se realizan en la base de datos.
 El administrador da clic en la botón eliminar, y el sistema le pide la
confirmación de la eliminación de dicho departamento, el administrador
confirma la eliminación y se ejecuta la eliminación en la base de datos.

Tabla 32 Descripción proceso Gestionar Departamento

La Figura 33 representa el caso de uso Gestionar Normativo del modelo de negocios

inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 33 Caso de uso Gestionar Normativo

pág. 98
Figura 34 Subcasos de usos del caso de uso principal Gestionar Normativo

Caso de uso: Gestionar Normativo

Breve descripción
El caso de uso Gestionar Normativo le permite al administrador consultar, insertar,
modificar y eliminar los normativos en la base de datos.
Descripción paso a paso
 Se le presenta al administrado la vista de Gestionar Normativos.
 El administrador hace clic en el botón nuevo normativo, y de inmediato se
le muestra una ventana emergente con el formulario de registro de un nuevo
normativo.
 El administrador ingresa los datos del normativo y confirma el registro
haciendo clic en el botón registrar, de inmediato se guarda un nuevo
normativo en la base de datos.
 El administrador selecciona la opción editar, y de inmediato se accede a la
base de datos y se obtiene los datos del normativo seleccionado y se le

pág. 99
 muestra al administrador en una ventana emergente con los datos cargados
para su modificación.
 El administrador realiza los cambios y guarda la modificación haciendo clic
en el botón actualizar, los cambios se realizan en la base de datos.
 El administrador selecciona la opción eliminar, inmediatamente el sistema le
manda un mensaje de confirmación, se hace la confirmación y se realiza la
eliminación del normativo en la base de datos.
Tabla 33 Descripción proceso Gestionar Normativos

La Figura 35 representa el caso de uso Gestionar Carrera del modelo de negocios

inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 35 Caso de uso Gestionar Carrera

pág. 100
Figura 36 Subcasos de usos del caso de uso principal Gestionar Carrera

Caso de uso: Gestionar Carrera

Breve descripción
El caso de uso Gestionar Carrera le permite al administrador consultar, insertar,
modificar y eliminar las carreras en la base de datos.
Descripción paso a paso
 Se le presenta al administrador la vista de Gestionar Carreras.
 El administrador selecciona la opción nueva carrera, de inmediato el
sistema le arroja una ventana modal, con el formulario de registro de carrera.
 El administrador ingresa los datos y confirma la inserción dando clic en el
botón registrar, se guarda el nuevo registro en la base de datos.
 El administrador selecciona la opción editar a una carrera, de inmediato se
accede a la base de datos y se obtiene los datos de la carrera seleccionada
mostrándole en una ventana emergente el formulario con los datos de la

pág. 101
 carrera cargados para su edición, el administrador realiza los cambios y
confirma la modificación dando clic en el botón actualizar, se actualizan los
datos en la base de datos.
 El administrador selecciona la opción eliminar a una carrera y de inmediato
el sistema le pide la confirmación al administrador, el administrador acepta
la confirmación y se elimina la carrera en la base de datos.

Tabla 34 Descripción proceso Gestionar Carrera

La Figura 37 representa el caso de uso Gestionar Usuario del modelo de negocios

inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 37 Caso de uso Gestionar Usuario

pág. 102
 Figura 38 Subcasos de usos del caso de uso principal Gestionar Usuario

Caso de uso: Gestionar Usuario

Breve descripción
El caso de uso Gestionar Carrera le permite al administrador consultar, insertar,
modificar y eliminar las carreras en la base de datos.
Descripción paso a paso
 Se le presenta al administrador la pantalla de Gestionar Usuarios.
 El administrador selecciona la opción agregar usuario, de inmediato el
sistema le arroja una ventana emergente con el formulario de registro, el
administrador rellena los campos y selecciona la opción correspondiente, si
es usuario alumno, usuario jefe de departamento, usuario, comité académico

pág. 103
 o usuario director, el administrador confirma el registro dando clic en el botón
registrar usuario, se registra en la base de datos el nuevo usuario.
 El administrador selecciona la opción editar usuario, de inmediato se
accede a la base de datos y se obtiene los datos del usuario seleccionado y
se carga el formulario en una ventana emergente.
 El administrador realiza la edición y confirma los cambios dando clic en el
botón actualizar, se guardan los cambios en la base de datos.
 El administrador da clic en cambiar contraseña y el sistema le muestra una
ventana emergente con los campos para asignar nueva contraseña, el
administrador confirma los cambios de contraseña dando clic en el botón
guardar cambios.
 El administrador selecciona la opción eliminar usuario, y el sistema le arroja
una ventana emergente para la confirmación de la eliminación, se confirma
la eliminación y se elimina el usuario en la base de datos.

Tabla 35 Descripción proceso Gestionar Usuario

La Figura 39 representa el caso de uso Emitir Dictamen del modelo de negocios

inicial Sistema de Gestión y Control de Solicitud al Comité Académico del ITI.

Figura 39 Caso de uso Emitir Dictamen

pág. 104
Figura 40 Subcasos de usos del caso de uso principal Emitir Dictamen

pág. 105
Caso de uso: Emitir Dictamen
Breve descripción
El caso de uso Emitir Dictamen les permite al administrador y al director, registrar
todos los dictámenes entregados a los alumnos por periodo.
Descripción paso a paso
 Se le presenta al administrador la pantalla de emitir dictamen.
 El administrador, seleccionado la opción emitir dictamen, el sistema
inmediatamente le muestra una ventana emergente con el formulario de
autorización, al mismo tiempo se acceda a la base de datos para obtener la
recomendación del comité académico para la solicitud, esto de igual manera
se muestra en la ventana emergente.
 El director redacta el dictamen y confirma la generación del PDF dando clic
en el botón generar dictamen, se registra el nuevo dictamen en la base de
datos.

Tabla 36 Descripción proceso Emitir Dictamen

pág. 106
12.5 Diagrama de clases

A continuación se muestra el modelo de diseño utilizado en este proyecto.

En la Figura 41, se muestra el diagrama de clases de Gestionar Solicitud, las clases

borde representan vistas, el método code() construye el documento HTML.

Todos los diagramas de clases siguen el mismo modelo de diseño.

Figura 131 Diagrama de clases: Gestionar Solicitud

12.5.1 Diagrama De Clases Entidad

Todas las clases de datos (clases entidad) se agrupan en un solo paquete (modelo).

En la Figura 42, se muestra el diagrama de clase entidad, cada clase entidad tiene una
relación directa con las tablas de la base de datos.

12.5.2 Diagrama De Clases Entidad Con Propiedades

En la Figura 43, se muestra el diagrama de clase entidad con sus respectivas

propiedades.
pág. 107
Figura 42 Diagrama de clases entidad

pág. 108
Figura 43 Diagrama de clases entidad con propiedades

pág. 109
12.5.3 Diagrama De Clases Entidad Con Propiedades y métodos

En las Figura 44 - 54, se muestra el diagrama de clase entidad por separado

con sus propiedades y métodos.

Figura 144 Diagrama de clases entidad con propiedades y métodos.

pág. 110
Figura 45 Diagrama de clases entidad con propiedades y métodos.

pág. 111
Figura 46 Diagrama de clases entidad con propiedades y métodos.

pág. 112
Figura 47 Diagrama de clases entidad con propiedades y métodos.

pág. 113
Figura 48 Diagrama de clases entidad con propiedades y métodos.

pág. 114
Figura 49 Diagrama de clases entidad con propiedades y métodos.

pág. 115
12.6 Diagramas de colaboración

A continuación se muestra el resultado del análisis realizado al proceso de negocio

Gestionar Solicitud, se identifican las clases borde, control y entidad en la
mostradas en la Figura 55 y la Figura 56.

Figura 150 Clases borde, entidad y control de Gestionar Solicitud

pág. 116
Figura 51 Clases borde, entidad y control de Gestionar Solicitud

pág. 117
12.6.1 Diagramas de colaboración de casos de usos particulares

En la Figura 52 se muestra un escenario del proceso Solicitar un Normativo.

Figura 52 Escenario de Solicitar un Normativo.

pág. 118
En la Figura 53 se muestra un escenario del proceso Autorizar Solicitud.

Figura 53 Escenario de Autorizar solicitud.

En la Figura 54 se muestra un escenario del proceso Eliminar Solicitud.

Figura 54 Escenario de Eliminar Solicitud.

pág. 119
En la Figura 55 se muestra un escenario del proceso Modificar Solicitud.

Figura 55 Escenario de Modificar Solicitud.

En la Figura 56 se muestra un escenario del proceso Reactivar Solicitud.

Figura 55 Escenario de Reactivar Solicitud.

pág. 120
En la Figura 56 se muestra un escenario del proceso Recomendar Solicitud.

Figura 56 Escenario de Recomendar Solicitud.

En la Figura 57 se muestra un escenario del proceso para realizar una Observación

a una Solicitud.

Figura 57 Escenario de Realizar una Observación.

pág. 121
En la Figura 58 se muestra un escenario del proceso registrar alumno.

Figura 58 Escenario de Registrar Alumno.

En la Figura 59 se muestra un escenario del proceso modificar alumno.

Figura 59 Escenario de Modificar Alumno.

pág. 122
En la Figura 60 se muestra un escenario del proceso eliminar alumno.

Figura 160 Escenario de Eliminar Alumno.

pág. 123
12.7 Prototipos de las vistas

Esta es la pantalla principal, con mejoras en el diseño, se requirió una serie de

imágenes para realizar el slider, así también se tomó en cuenta los colores de
nuestra casa de estudios (Véase figura 61).

Figura 61 Pantalla principal.

La pantalla inicio de sesión es igual para los cinco tipos de usuario con diferentes
privilegios, para ingresar al sistema es requerido un nombre de usuario o email y
una contraseña (Véase figura 62).

Figura 62 Pantalla de inicio de sesión (alumno, administrador, director, comité y jefe de

carrera).
pág. 124
12.7.1 Pantallas prototipo Modulo Alumno

Todo alumno inscrito o egresado del Instituto Tecnológico del Istmo tiene derecho
de registrase al sistema ya que cuenta con un numero de control en específico
(Véase figura 63).

Figura 63 Perfil de Usuario Alumno

Las mejoras en este modal se tomó cuando los alumnos tenían problemas con el
correo, ya sea que el alumno escribió mal y no llegaba a confirmar el correo, en
este caso se anexo un campo llamado “Repite tu Email”, donde el alumno escribe
una vez más su correo, a esto es llamado autenticación (Véase figura 64).

Figura 64 Crear Cuenta como Alumno

pág. 125
La Gestión de Solicitudes se cambió el botón SOLICITAR NORMATIVO por
REALIZAR UNA SOLICITUD (Véase figura 65).

Figura 65 Gestionar Solicitud Alumno

La ventana realizar una solicitud se cambió el botón de REALIZAR SOLICITUD

por ACEPTAR (Véase figura 66).

Figura 66 Ventana Emergente de realizar una solicitud

pág. 126
Figura 67 Pantalla con solicitudes realizadas-Gestionar Solicitud

Figura 68 Ventana Emergente de una solicitud con extensión PDF.

pág. 127
Figura 69 Ventana Emergente de Modificar una Solicitud.

Figura 70 Pantalla con el mensaje cancelar solicitud.

pág. 128
 Figura 71 Pantalla con solicitud cancelada.

Figura 72 Pantalla con solicitud enviada en espera de ser revisada por el Jefe de
Departamento.

pág. 129
Figura 73 Pantalla Emergente de la lista de Observación que se le escribió a una solicitud por parte
del jefe de departamento.

Figura 74 Pantalla con solicitud autorizada por el jefe de departamento.

pág. 130
Figura 75 Pantalla con autorización de dictamen y pasar a recogerlo a la dirección.

pág. 131
12.7.2 Pantallas prototipo Modulo Jefe de Departamento

Figura 82 Pantalla de solicitudes entrantes (Nuevos)

Figura 76 Pantalla de solicitud con el PDF de la Solicitud entrante.

pág. 132
Figura 77 Pantalla de solicitudes en corrección (En Revisión)

Figura 78 Pantalla de solicitudes Autorizadas (Autorizados)

pág. 133
Figura 79 Pantalla del Historial de Solicitudes Atendidas (Historial). Solicitud cancelada
sin Acción.

Figura 80 Pantalla del Historial de Solicitudes Atendidas (Historial), Dictamen Generado

con Acción ver Dictamen.

pág. 134
Figura 81 Pantalla de solicitud con observación mediante una ventana modal.
.

Figura 82 Pantalla perfil de usuario Jefe de Departamento.

pág. 135
 .
Figura 83 Pantalla Perfil de Usuario con Modal para cambiar Contraseña.

Figura 84 Pantalla Solicitud con Ventana Modal para Autorizar una solicitud.

pág. 136
12.7.3 Pantallas prototipo Modulo Comité Académico

Figura 85 Pantalla Solicitudes Autorizados por el Jefe de Departamento.

Figura 86 Pantalla Solicitudes Recomendadas por el Jefe de Departamento.

pág. 137
Figura 87 Pantalla de Todas las solicitudes que llegan al Modulo Comité Académico.

Figura 88 Pantalla Solicitud con el PDF de una Solicitud Autorizada.

pág. 138
Figura 89 Pantalla Solicitud con Modal para realizar recomendación de la Solicitud.

Figura 90 Pantalla Usuario de Comité Académico.

pág. 139
12.7.4 Pantallas prototipo Modulo Director

Figura 91 Pantalla de solicitudes con recomendación de Dictámenes.

Figura 92 Pantalla de dictámenes generados.

pág. 140
 Figura 93 Pantalla de Solicitudes con Modal PDF de la Recomendación que hace el
Comité Académico.

Figura 94 Pantalla de Solicitudes con Modal del Dictamen que fue autorizado listo para
imprimirse.

pág. 141
 Figura 95 Pantalla con Modal para Modificar Dictamen.

Figura 96 Pantalla con Modal para Autorización de Dictamen.

pág. 142
 Figura 97 Pantalla Usuario-Director Del Instituto Tecnológico del Istmo.

12.7.5 Pantallas prototipo Modulo Administrador

Figura 98 Pantalla Principal-Administrador

pág. 143
 Figura 99 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Entrantes.

Figura 100 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Entrantes-Acción
Rechazar.

pág. 144
Figura 101 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Entrantes-Accion
Rechazar con el modal.

Figura 102 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Entrantes-Acción
Autorizar con el modal y nota de Autorización.

pág. 145
Figura 103 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Entrantes-Acción
Autorizar con el modal nota de Autorización.

Figura 104 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Canceladas.

pág. 146
Figura 105 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Cancelados-
Acción Modal Observaciones.

Figura 105 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Cancelados-
Acción Modal Autorizar.

pág. 147
Figura 106 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Cancelados-
Accion Reactivar.

Figura 107 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes En Validación.

pág. 148
Figura 108 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes En Validación-
Accion observación.

Figura 109 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes En Validación-
Acción Autorizar.

pág. 149
Figura 110 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes En Validación-
Acción Rechazar.

Figura 111 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Autorizados.

pág. 150
 Figura 112 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Autorizados-
Rechazar.

Figura 113 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Recomendadas.

pág. 151
Figura 114 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Recomendadas-
Acciones.

Figura 115 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Recomendadas-
Acción Ver Recomendación.

pág. 152
Figura 117 Pantalla Solicitud- Con El Registro De Todas Las Solicitudes Recomendadas-
Acción Rechazar.

Figura 117 Pantalla Solicitud- Con El Registro De Todos Los Dictámenes Generados.

pág. 153
Figura 118 Pantalla Solicitud- Con El Registro De Todos Los Dictámenes Generados-
Acciones.

Figura 119 Pantalla Solicitud- Con El Registro De Todos Los Dictámenes Generados-
Acción-Ver Dictamen
pág. 154
Figura 120 Pantalla Solicitud- Con El Registro De Todos Los Dictámenes Generados-
Acción-Rechazar.

Figura 121 Pantalla normativo- con ventana modal para realizar el registro de un nuevo
normativo

pág. 155
 Figura 122 Pantalla Normativo- Con Ventana Modal Para Realizar Edición De Un
Normativo Existente

Figura 123 Pantalla Normativo- Con Mensaje De Confirmación De La Eliminación De Un

Normativo

pág. 156
 Figura 124 Pantalla Carrera- Con la Lista de las Carreras Existentes.

Figura 125 Pantalla Carrera- Con Ventana Modal Para Registrar Nueva Carrera

pág. 157
 Figura 126 Pantalla Carrera- Con Ventana Modal Para Editar Una Carrera Existente

Figura 127 Pantalla Carrera- Con Ventana Modal Para Eliminar Una Carrera Existente

pág. 158
Figura 128 Pantalla Departamentos- Con La Lista De Todos Los Departamentos

Figura 129 Pantalla Departamento- Con Ventana Modal Para Registrar Nuevo
Departamento

pág. 159
 Figura 130 Pantalla Departamento-Para Editar Un Departamento Existente

Figura 131 Pantalla Departamento-Para Eliminar Un Departamento Existente

pág. 160
Figura 132 Pantalla Jefe De Departamento-Con La Lista De Todos Los Jefes De
Departamento Existentes

Figura 133 Pantalla Jefe De Departamento- Con Modal Para Registrar Jefe De
Departamento

pág. 161
Figura 134 Pantalla Jefe De Departamento- Con Acciones para el Jefe De Departamento
Existente

Figura 135 Pantalla Jefe De Departamento- Con Modal Para Editar Un Jefe De
Departamento Existente

pág. 162
Figura 136 Ventana Jefe De Departamento-Con Modal Para Asignar Nueva Contraseña Al
Jefe De Departamento

Figura 137 Ventana Jefe De Departamento-Con Modal Para Eliminar Jefe De

Departamento.

pág. 163
 Figura 138 Ventana Gestión Comité Académico.

Figura 139 Ventana Comité-Modal para Editar Comité.

pág. 164
Figura 140 Ventana Comité-Modal para Cambiar Password del Comité.

Figura 141 Ventana Director

pág. 165
 Figura 142 Ventana Director-Modal para Editar Usuario Director

Figura 143 Ventana Director-Modal para Cambiar Password Usuario Director

pág. 166
 Figura 144 Ventana Alumnos

Figura 145 Ventana Alumnos-Acciones

pág. 167
 Figura 146 Ventana Alumnos-Acción Cambiar Password

Figura 147 Ventana Alumnos-Acción Cambiar Numero de Control

pág. 168
Figura 148 Ventana Alumnos-Acción Activar Cuenta de alumno

Figura 149 Ventana Periodo Escolar

pág. 169
Figura 150 Ventana Periodo Escolar-Cambiar Periodo Escolar

Figura 151 Pantalla Perfil Del Administrador

pág. 170
 Figura 152 Pantalla Perfil Del Administrador-Cambiar Contraseña

Figura 153 Pantalla Exportar-Combo box Periodos Escolares Usados

pág. 171
 Figura 154 Pantalla Exportar- Visualización de solicitudes, Recomendaciones y
Dictámenes para Descargar por Periodo

Figura 155 Pantalla Formato Dictamen- Todos los Dictámenes Registrados en el Periodo
Enero- Julio 2017

pág. 172
Figura 156 Pantalla Formato Recomendación- Todas las Solicitudes Recomendadas que
llegaron a Dictamen Registrados en el Periodo Enero- Julio 2017

Figura 157 Pantalla Formato Solicitud- Todas las Solicitudes Registrados que llegaron a
Dictamen en el Periodo Enero- Julio 2017
pág. 173
12.8 Análisis Estadísticos

Grafica de Registro del SCA

900 843
800 752

700
600 518 513
500
400 330
300 234
200
100
0
AGOS-DIC 2016 ENE-JUL 2017
DICTAMENES 518 513
SOLICITUDES 752 843
SOLICITUDES RECHAZADAS 234 330

DICTAMENES SOLICITUDES SOLICITUDES RECHAZADAS

Figura 158 Estadística del registro del SCA.

Periodo Agosto-Diciembre 2016

 752 Alumnos solicitaron un dictamen (Solicitudes).

 518 solicitudes llegaron a Dictamen, la cual explica que más del 60%
el proceso fue exitoso.
 234 Solicitudes fueron Canceladas (menos del 31%) por
incumplimiento a las normativas.
Periodo Enero- Julio 2017
 843 Alumnos solicitaron un dictamen (Solicitudes).
 513 Solicitudes llegaron a Dictamen (60%)
 330 Las solicitudes no fueron procesadas por incumplimiento a las
normativas (39%).

Culminando con la información recopilada durante los dos periodos que lleva activo
el sistema se tiene en cuenta de 1595 Solicitudes ejercidas por los alumnos, con

pág. 174
más del 64% de dictámenes generados por el comité académico esto equivale un
total de 1031 Dictámenes entregados y 564 solicitudes fueron rechazadas.

GRAFICA DE ALUMNOS

670
AGOS-DIC 2016 ENE-JUL 2017

552
Alumnos
AGOS-DIC 2016 670
ENE-JUL 2017 552

Figura 159 Estadística de Alumnos del SCA.

La siguiente grafica muestra el total de alumnos que se registraron en el sistema

SCA durante los dos periodos:
En el periodo Agosto-Diciembre 2016 se registraron 670 alumnos.
En el periodo Enero-Julio 2017 se registraron 552 alumnos.
Esto hace un total de 1222 alumnos registrados en la plataforma (SCA).

pág. 175
13. ACTIVIDADES SOCIALES REALIZADAS EN LA
EMPRESA U ORGANIZACIÓN (SI ES EL CASO).

14. CONCLUSIONES Y RECOMENDACIONES

Este proyecto cubrió el objetivo “Generar un soporte para las estadísticas en

la toma decisiones al comité académico”, cabe resaltar al Usuario Administrador
quien podrá generar todas las solicitudes, recomendaciones que llegaron a
dictámenes, con el fin de hacer un respaldo de todos los dictámenes generados en
los diferentes periodos.

Los beneficios que otorga este servicio vía internet es el proceso con mayor
facilidad ya que es muy recurrente tanto alumnos y departamentos que intervienen
en el proceso de validación sean capaces de generar un dictamen en un tiempo
determinado menor de tres días, esto influye en el buen manejo de la herramienta.

Este Sistema representa un gran avance, para modernizar un proceso

administrativo que anteriormente se llevaba de forma manual, ahora un sistema
automatizado que seguirá mejorando en los últimos años.

Con el desarrollo de los requisitos que se generaron en las entrevistas a los

cinco tipos de Usuarios: Administrador, Alumnos, Jefes De Departamento, Comité
Académico y Director. El sistema cumple con las expectativas de ser dinámico y
comprensible además de tener un mayor y mejor control de las solicitudes y
dictámenes emitidos por la institución.

La participación del equipo fue positiva pues permitió retroalimentar el

sistema. La investigación y desarrollo de los requerimientos funcionales sirvió como
punto de apoyo para la elaboración de la documentación correspondiente así
también, apoyados por nuestros asesores desde el desarrollo de la documentación
hasta la puesta en marcha de la actualización del sistema en el servidor.

pág. 176
15. COMPETENCIAS DESARROLLADAS Y/O APLICADAS

15.1 Competencias específicas:

 Investigar, comparar y decir por una tecnología de desarrollo de
aplicaciones web 2.0, para la parte de desarrollo Backend y el Frontend.
 Seleccionar, conocer y usar adecuadamente diferentes sistemas
operativos para lograr un uso eficiente así como diferenciar y aplicar las
técnicas de manejo de recursos para el diseño, organización, utilización y
optimización de estos.
 Identificar, seleccionar y aplicar eficientemente tipos de datos abstractos,
métodos de ordenamiento y búsqueda para la optimización del
rendimiento de soluciones de problemas del mundo real.
 Elaborar un protocolo de investigación en el área de su formación
profesional.
 Buscar y clasificar los diferentes tipos de investigación en el ámbito
científico y tecnológico dentro y fuera de la institución.
 Desarrollar los elementos del protocolo en un documento en forma
estructurada.
 Presentar en forma escrita el protocolo de investigación.
 Conocer los paradigmas de programación.
 Aplicar conceptos básicos de Hardware y Software.
 Manejar conceptos básicos de Tecnologías de la Información.
 Construcción de modelos de software empleando el lenguaje de modelado
unificado (UML).
 Comprender la gestión de archivos y organización de datos.
 Interpretar, analizar e implementar planos y diseños de desarrollo web.
 Manejar y aplicar tecnologías de desarrollo web.
 Planificar, analizar, diseñar y construir proyectos web.
 Planear, diseñar e implementar proyectos web mediante un software de
programación de marcas.
pág. 177
  Planear, diseñar e implementar proyectos web mediante un software de
programación de presentación de datos.
 Planear, diseñar e implementar proyectos web mediante un software de
programación del lado del cliente.
 Planear, diseñar e implementar proyectos que hagan uso de servicios
web.

15.2 Competencias Genéricas:

15.2.1 Competencias instrumentales:
 Capacidad de análisis y síntesis.
 Conocimientos básicos de la carrera.
 Comunicación oral y escrita.
 Conocimiento de una segunda lengua.
 Habilidad para buscar y analizar información proveniente de fuentes
diversa.
 Habilidad lógica para solucionar problemas.
 Habilidades del manejo de la computadora.
 Capacidad de organizar y planificar.
 Solución de problemas.
 Toma de decisiones.
 Capacidad de análisis, síntesis y abstracción.
 Capacidad de comunicación oral y escrita.
 Habilidad en el uso de tecnologías de información y comunicación.
 Capacidad para identificar, plantear y resolver problemas.
 Capacidad para gestionar y formular proyectos.

15.2.2 Competencias interpersonales

 Capacidad crítica y autocrítica.
 Trabajo en equipo.
 Capacidad de comunicación interdisciplinaria.
pág. 178
  Apreciación de la diversidad y multiculturalidad.
 Compromiso ético.
 Debe saber aplicar metodologías de Diseño de Base Datos.
 Analizar, diseñar, desarrollar e implementar soluciones orientadas a la
solución de problemas de almacenamiento y organización de información.
 Implementar bases de datos relacionales así como las operaciones básicas
sobre los datos (Selección, Inserción, Modificación y Eliminación).
 Implementar los servicios principales de una red de computadoras.
 Manejo de transacciones de BD.
 Trabajo en equipo interdisciplinario.

15.2.3 Competencias sistémicas:

 Capacidad de aplicar los conocimientos en la práctica.

 Habilidades de investigación.
 Capacidad de generar nuevas ideas (creatividad).
 Habilidad para trabajar en forma autónoma.
 Capacidad para diseñar y gestionar proyectos.
 Estándares de calidad aplicados a los lenguajes de programación.
 Capacidad de aplicar los conocimientos.
 Capacidad de aprender.
 Liderazgo.
 Búsqueda del logro.
 Iniciativa y espíritu emprendedor.

pág. 179
16. FUENTES DE INFORMACIÓN

Code School. (2016). JavasCript. Retrieved from https://www.javascript.com/

ALEGSA. (2016). DICCIONARIO DE INFORMÁTICA Y TECNOLOGÍA. Retrieved from
http://www.alegsa.com.ar/Dic/encriptacion.php
Apache Software Foundation. (2016). APACHE. Retrieved from http://www.apache.org/
Ayala, A. P. (2006). Ingenieria de Software: Guía para crear Sistemas de Información.
Instituto Politecnico Nacional.
Bahit, E. (2000). Python para principiantes.
Barker, R. (1994). El modelo entidad-relación CASE*methodtm. madrid: España.
Daniel J. Barrett, P. R. (2001). SSH, The Secure Shell: The Definitive Guide.
GitHub. (2016). Designed for everyone, everywhere. Retrieved from
http://getbootstrap.com/
Mobirise. (2015). CREADOR DE SITIOS WEB MOBIRISE. Retrieved from
https://mobirise.com/es/
MySql. (2014). MySQL 5.0 Reference Manual. Oracle and/or its affiliates.
Nils Adermann, J. B. (2015). COMPOSER. Retrieved from Dependency Manager for PHP:
https://getcomposer.org/
Noya, F. R. (2001). SSH (OpenSSH). España.
Oracle Corporation. (2016). MySql. Retrieved from MySQL Workbench:
https://www.mysql.com/products/workbench/
Park, T. (2016). Free themes for Bootstrap. Retrieved from https://bootswatch.com/
Php. (2016). Documentacion PHP. Retrieved from Manual PHP:
http://php.net/manual/es/intro-whatis.php
Query Foundation. (2016). JQquery. Retrieved from https://jquery.com/
Roger S. Pressman, P. D. (2010). Ingenieria del Software: Un enfoque práctico.
McGrawHill.
Schmuller, J. Aprendiendo UML en 24 Horas. Prentice Hall.
Silberschatz Abraham. (2002). Fundamentos de Bases de Datos, Cuarta Edicion. Madrid:
McGRAW-HILL/INTERAMERICANA DE ESPAÑA, S. A. U.
Sommerville, I. (2005). Ingenieria de Software. Pearson Educación.
WAMPSERVER. (2015). WAMPSERVER. Retrieved from a Windows web development
environment.: http://www.wampserver.com/en/

pág. 180
WebMaster. (2008, DICIEMBRE 27). HTML. Retrieved from Manual sobre HTML :
http://www.html.com.es/

pág. 181