“CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM”

UNIVERSIDAD POLITÉCNICA DE FRANCISCO I.
MADERO
INGENIERÍA EN SISTEMAS COMPUTACIONALES
―CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN
DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y
CULTURALES DE LA UPFIM‖

TESIS
QUE PARA OBTENER EL GRADO DE INGENIERO EN SISTEMAS COMPUTACIONALES

PRESENTA:
JHONATAN PACHECO HERNÁNDEZ
DIRECTOR DE TESIS:
M. en C. OMAR REYNA ÁNGELES
TEPATEPEC, FRANCISCO I. MADERO, HIDALGO, MÉXICO, ENERO 2014

UNIVERSIDAD POLITÉCNICA DE FRANCISCO I. MADERO

UNIVERSIDAD POLITÉCNICA DE FRANCISCO I.
MADERO
INGENIERÍA EN SISTEMAS COMPUTACIONALES
―CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL
DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA
UPFIM‖

TESIS
QUE PARA OBTENER EL GRADO DE INGENIERO EN SISTEMAS COMPUTACIONALES

PRESENTA:
JHONATAN PACHECO HERNÁNDEZ
M.S.C. OMAR REYNA ÁNGELES
ASESOR ACADÉMICO.
DIRECTOR.

LIC. Diana LizethJuárez Cano
ASESOR INDUSTRIAL

MC. Marco Yamir Gómez Ramos.
EVALUADOR

LIC. Marylin Alejandra Rodríguez Ruíz.
EVALUADOR

TEPATEPEC, FRANCISCO I. MADERO, HGO., ENERO 2014

Dedicatoria.
Todo el esfuerzo de este trabajo se lo debo a una pequeña personita que me ha
enseñado de que la vida hay que vivirla paso a pasito; igual de importante,
para la mujer que desde hace ya casi cuatro años me ha regalado su paciencia
y me mostro que la vida se vive con coraje.
A Eduardo mi pequeño hijo y Elizabeth mi esposa todo mi amor y
agradecimiento.

i

Abstract.
In today'stechnological world,it is imperative thatevery institution to have a
management information system that allows to positionthe levelrequired by
globalization
This documentdescribes the creation ofa web management information system
for the department ofsports and culturalactivities at UPFIMusing open source
technologies

andfollowingdevelopment

methodologiesin

order

tocreatea

functional system with friendly end user’sinterface and easy backend support.

ii

Resumen.
En el actual mundo tecnológico, es imprescindible que toda institución cuente
con un sistema de administración y gestión de información que le permita
posicionarse al nivel que exige la globalización.
Este documento describe la creación de un sistema gestión de información vía
web para el departamento de actividades deportivas y culturales en la UPFIM
mediante el uso de tecnologías de información de uso libre y siguiendo
metodologías de desarrollo con la finalidad de crear un sistema funcional de
interfaz amigable para los usuarios finales y de fácil mantenimiento para los
diseñadores.

iii

Índice de contenido
Tabla de contenido
CAPÍTULO I. INTRODUCCIÓN. ......................................................................... 1
1.1 Antecedentes. ............................................................................................ 1
1.1.1 Marco Referencial. .............................................................................. 3
1.2 Definición del problema. ............................................................................ 6
1.3 Justificación. .............................................................................................. 6
1.4 Objetivo general......................................................................................... 7
1.5 Objetivos específicos. ................................................................................ 7
1.7 Metodología. .............................................................................................. 8
1.7.1. Revisión de bibliografía. ..................................................................... 9
1.7.2. Proceso de desarrollo......................................................................... 9
CAPITULO II: FUNDAMENTO TEÓRICO. ....................................................... 11
2.1 Tendencias. ............................................................................................. 11
3.2 Estilos arquitectónicos y patrones de arquitectura web. .......................... 12
2.2.1 Estilos arquitectónicos ....................................................................... 12

iv

2.3 Tecnologías para el desarrollo web ......................................................... 12
2.3.1 HTMLy XHTML .................................................................................. 12
2.3.2 CSS ................................................................................................... 14
2.3.3 JavaScript,jQueryyAJAX ................................................................... 15
2.3.4 Lenguajes de programación. ............................................................. 16
2.3.5 SQL ................................................................................................... 23
2.6 MySQL ................................................................................................. 23
2.3.7 PhpMyAdmin ..................................................................................... 24
2.3.8 StarUML ............................................................................................ 24
2.3.9Adobe Dreamweaver .......................................................................... 25
2.3.10 NetBeans IDE .................................................................................. 25
2.3.11 DBDesigner ..................................................................................... 26
2.4 Tecnologías a utilizar. .............................................................................. 27
CAPÍTULO III: DESARROLLO DEL SISTEMA. ................................................ 29
3.1 Fase de concepción................................................................................. 29
3.1.1 Descripción general. .......................................................................... 29
3.1.2 Funciones delproducto ...................................................................... 29

v

3.1.3 Características delusuario ................................................................. 32
3.1.4 Restricciones ..................................................................................... 33
3.1.5 Supuestos y dependencias ............................................................... 34
CAPÍTULO IV: FASE DE ELABORACIÓN. ...................................................... 35
4.1. Requisitos específicos ............................................................................ 35
4.1.1. Requerimientosfuncionales .............................................................. 35
4.2. Requerimientosde interfaces externos ................................................... 42
4.2.1 Interfaces de usuario ......................................................................... 42
4.2.3 Interfaces hardware ........................................................................... 43
4.2.4 Interfaces software ............................................................................ 43
4.2.5 Interfaces de comunicaciones ........................................................... 43
4.3 Requerimientosde eficiencia .................................................................... 43
4.4 Obligaciones deldiseño............................................................................ 44
4.4.1 Estándarescumplidos ........................................................................ 44
4.4.2 Limitaciones hardware ....................................................................... 44
4.5Atributos ................................................................................................... 45
4.5.1 Seguridad .......................................................................................... 45

vi

4.5.2 Facilidades de mantenimiento ........................................................... 45
4.5.3 Portabilidad ....................................................................................... 45
4.5.4 Otros requerimientos ......................................................................... 46
CAPÍTULO V. FASE DE CONSTRUCCIÓN, EVALUACIÓN Y PRUEBAS. ...... 47
5.1 Análisis. ................................................................................................... 47
5.1.1 Diagramadeclases ............................................................................. 47
5.1.2 Diagrama de casos de uso ................................................................ 49
5.2 Diseño. .................................................................................................... 54
5.2.1 Capa de presentación........................................................................ 55
5.2.2 Capa de negocioo lógica de laaplicación. ......................................... 56
5.2.3 Capa de persistenciao datos ............................................................ 58
5.3 Implementación. ...................................................................................... 59
5.3.1 Capa depresentación ........................................................................ 60
5.3.2 Capa denegocio o lógicade la aplicación .......................................... 64
5.3.3 Capa depersistenciao de datos ......................................................... 65
5.4 Evaluación y pruebas .............................................................................. 65
5.4.1 Validación deCSS .............................................................................. 66

vii

5.4.2Validación deenlaces .......................................................................... 67
5.4.3Validación dela resolución .................................................................. 67
5.4.4 Validación de navegadores................................................................ 68
5.4.5 Validación dela seguridad en el accesoala zonadeadministración .... 70
5.4 Resultados. .............................................................................................. 71
Referencias. ...................................................................................................... 72
Anexo 1. ............................................................................................................ 74
Glosario: ........................................................................................................ 74

Índice de figuras.

Figura 1.1 Organigrama general de la UPFIM. ....................................................... 3

Figura 5. 1 Diagrama de clases ........................................................................ 49
Figura 5. 2 Actores............................................................................................ 51
Figura 5. 3 Casos de uso usuario ..................................................................... 52
Figura 5. 4 Usuario registrado........................................................................... 52
Figura 5. 5 Casos de uso del alumno ............................................................... 53
Figura 5. 6 Casos de uso del profesor .............................................................. 53
Figura 5. 7 Casos de uso del administrador ..................................................... 54
viii

Figura 5. 8 Básico de la arquitectura de tres capas .......................................... 55
Figura 5. 9 Formato de las páginas web ........................................................... 56
Figura 5. 10 Capas de la aplicación .................................................................. 57
Figura 5. 11 Diagrama entidad-relación ............................................................ 59
Figura 5. 12 Cabecera del archivo index.php ................................................... 60
Figura 5. 13 Tablas de base de datos............................................................... 65
Figura 5. 14 Validación css ............................................................................... 67
Figura 5. 15 Validación de enlaces ................................................................... 67
Figura 5. 16 Validación de navegadores (Microsoft Internet Explorer) ............. 68
Figura 5. 17 Validación de navegadores (Mozilla Firefox) ............................... 69
Figura 5. 18 Validación de navegadores (Google Chrome) .............................. 69
Figura 5. 19 Validación de navegadores (Safari) .............................................. 69
Figura 5. 20 Validación de navegadores (Opera) ............................................ 70
Figura 5. 21 Formulario de acceso ................................................................... 71

Índice de tablas.
Tabla 1.1 Metodología desarrollada.................................................................... 9

Tabla 4. 1 Autenticación. .................................................................................. 35
Tabla 4. 2 Registro. ........................................................................................... 35
Tabla 4. 3 Cerrar sesión. .................................................................................. 36
ix

Tabla 4. 4 Consultar horario.............................................................................. 36
Tabla 4. 5 Listar Profesores. ............................................................................. 37
Tabla 4. 6 Listar Calificaciones. ........................................................................ 37
Tabla 4. 7 Listar faltas de asistencia. ................................................................ 37
Tabla 4. 8 Profesor-> Listar alumnos. ............................................................... 38
Tabla 4. 9 Profesor-> Listar profesores............................................................. 38
Tabla 4. 10 Profesor-> Poner inasistencia. ....................................................... 38
Tabla 4. 11 Profesor-> Modificar calificaciones. ............................................... 39
Tabla 4. 12 Profesor-> Modificar inasistencia. .................................................. 39
Tabla 4. 13 Profesor-> Listar faltas de asistencias. .......................................... 39
Tabla 4. 14 Administrador-> Alta de usuario. .................................................... 40
Tabla 4. 15 Administrador-> Alta de actividad. ................................................. 40
Tabla 4. 16 Administrador-> Inscribir alumno en actividad. ............................. 40
Tabla 4. 17 Administrador-> Baja de usuario. ................................................... 41
Tabla 4. 18 Administrador-> Modificar datos actividad. .................................... 41
Tabla 4. 19 Administrador-> Baja de actividad. ................................................ 42
Tabla 4. 20 Administrador-> Modificar datos de un usuario. ............................. 42

x

Capítulo I. Introducción.

CAPÍTULO I. INTRODUCCIÓN.
1.1 Antecedentes.
La Universidad Politécnica de Francisco I. Madero, máxima casa de estudios
del municipio con el mismo nombre, dio inicio a sus operaciones un lunes 15 de
agosto de 2005.Con las carreras de ingeniería agroindustrial e ingeniería en
agrotecnología y una matrícula total de 250 alumnos.
Al día de hoy esta casa de estudios ofrece cuatro ingenierías más que cuando
inicio y una maestría en ciencias en el desarrollo agrotecnológico sustentable,
teniendo así, que cumplir con su misión –―Ser una Institución de educación e
investigación con pertinencia y calidad, incluyente, respetuosa de la diversidad
cultural, comprometida con la formación integral de profesionistas líderes,
potencializando talentos mediante la obtención, generación y discusión del
conocimiento, a través de competencias tecno-científicas y sociales; capaces
de aportar, hacer y servir en beneficio del desarrollo sustentable de la región,
del estado y del país, en estrecha comunicación y vinculación con los sectores
productivos, sociales y de gobierno”.(1)- y su visión –“Ser una institución
educativa consolidada académicamente, a través de la certificación y
acreditación por instancias externas autorizadas. Abierta a todas las corrientes
de pensamiento, sustentada en la equidad de género y oportunidades,
generadora y promotora de la construcción del conocimiento, formadora de
profesionistas reconocidos nacional e internacionalmente por su contribución al
1

desarrollo sustentable y el impulso a la regeneración del medio ambiente,
considerada como una universidad preferente para estudiantes nacionales y
extranjeros por la fortaleza de sus programas de licenciatura y posgrado”(1).La universidad hoy tiene una matrícula total de 1500 alumno, distribuidos en sus
seis ingenierías ofertadas y una maestría en ciencias, alumnos que son los
consumidores de los servicios ofertados en esta universidad.
La estructura jerárquica de la Universidad Politécnica de Francisco I. Madero
está dividida en dos secretarias, académica y administrativa, y una subdirección
de vinculación y extensión universitaria; liderados por el rector Ing. Juan de Dios
Nochebuena Hernández.
Perteneciente a la subdirección vinculación y extensión universitaria, está el
departamento de actividades deportivas y culturales; encargado de proveer el
esparcimiento cultural y deportivo en los alumnos, este departamento tiene la
responsabilidad de organizar los eventos para el desarrollo de cultural y
deportivo de los alumnos, administrar los recursos humanos que en conjunto
con el titular de este departamento cumplen con sus funciones, la figura 1.1
muestra el nivel jerárquico del departamento.

2


Figura 1.1 Organigrama general de la UPFIM.

1.1.1 Marco Referencial.
El departamento de cultura actividades culturales y deportivas está a cargo de
administrar y ofertar sus servicios a toda la comunidad universitaria; todo
comienza con la creación y difusión de las actividades extra clase, generación
de grupos y horarios en los que se imparten las actividades, asignar a un
profesor para impartir una o varias actividades y por ultimo por ultimo coordinar
el proceso de inscripción de los alumnos a las actividades previamente creadas.
El proceso de creación y difusión de actividades (proceso no documentado por
el departamento), se da bajo los el siguiente orden:
3

1

2

El (la) titular del departamento en cuestión, en una hoja de cálculo, captura
la información de las actividades a ofertarse en el periodo escolar,
explicando el objetivo de la actividad, cuántos alumnos se aceptaran y el
lugar a donde se llevara a cabo.
Una vez que está listo el documento (la hoja de cálculo), se imprime y de
hacen fotocopias de él para ser pagadas por toda la universidad

En cuanto al proceso de inscripción el titular del departamento agenda día y
hora a los grupos para que asistan a inscribirse, este proceso además de
consumir demasiado tiempo es poco eficiente, ya que los alumnos no hacen
uso del tiempo como está planeado. Este proceso (inscripción) sigue en
siguiente patrón (proceso no documentado por el departamento).
1

2

El (la) titular del departamento instala un módulo en el casco de la
universidad, esto con ayuda de los alumnos de servicio social. El modulo
consta de entre tres a cinco computadoras personales (según la
disposición), en cada una de ellas se captura, en una hoja de cálculo, la
matricula del alumno, nombre completo y datos académicos como carrera,
cuatrimestre, y grupo.
Al finalizar el periodo de inscripciones las archivos que se generaron en
las pc’s utilizadas, son unidos para formar uno solo que servirá de base de
datos y a partir del cual se generan listas de asistencias, reportes sobre la
demanda de las actividades ofertadas, entre otros.

En cuanto a la participación del alumnado, este tiene que llegar en tiempo y
forma para que pueda inscribirse, de no ser así, tiene que esperar a que toda la
agenda se haya cumplido. Aunque el estar en tiempo y forma para el proceso
de inscripción no le asegura que la actividad que elija aun esté disponible, esto
está sujeto a la demanda que tenga la actividad, lo que deja al alumno en
desventaja a la hora de inscribirse.

4

Para poder llevar a cabo la inscripción el alumno deberá descargar de la página
universitaria el ―Karnet de actividades extracurriculares‖, imprimirlo,llenarlo con
todos sus datos, entregarlo con su asesor académico para que este lo firme.
Paso seguido, el alumno acude al módulo de inscripción y continúa con el
proceso.
Finalmente, cuando el alumno a concluido todo el proceso de inscripción, su
―Karnet de actividades extracurriculares‖ es firmado y sellado por el (la) titular
del departamento.
A partir de que se finaliza con todo el proceso de inscripción el alumnos deberá
llevar su ―Karnet de actividades extracurriculares‖ cada que asista a su actividad
extra clase o asista a algún evento que no está contemplado como actividad
curricular, esto con la finalidad de que al concluir el evento o actividad extra
clase el profesor a cargo firme el ―Karnet‖ como evidencia de que asistió, pueda
utilizarse como evidencia para el final del cuatrimestre cuando se valida y se
otorga una calificación.
El papel del profesor, en el departamento de actividades deportivas y culturales,
además de impartir su actividad para la que fue contratado, debe llevar un
control de asistencias de los grupos a su cargo. Lista que es proporcionada por
el titular del departamento.
Para finalizar este apartado, es necesario destacar, que todos los procesos
descritos anterior mente no están documentados, es decir, todo se hace

5

conforme se requieran las cosas, situación que pone en desventaja al
departamento de actividades deportivas y culturales.

1.2 Definición del problema.
El departamento de actividades deportivas y culturales, no cuenta con un
sistema de administración de información lo que genera una gestión demasiado
complicada de mantener, además de tardar demasiado el momento de
consultar la información existente, que a su vez no se está actualizada.
La demora en la ejecución de los procesos internos del departamento de
actividades deportivas y culturales, se ve reflejado en el uso excesivo de
recursos económicos y humanos. Lo que se traduce en una eficiencia
cuestionable.

1.3 Justificación.
Se propone el diseño e implantación de un sitio web para el departamento de
actividades culturales y deportivas, que permita automatizar las actividades que
realiza, para así poder brindar una atención más personalizada al alumno en un
mínimo de tiempo.
El sistema a desarrollar, será un sistema que permita al titular del departamento
agilizar la generación de reportes, listas, y administrar el contenido del sistema,
se propone la ceración de este debidoal incremento de matrícula de la
universidad, se cree que la administración,que se lleva de forma manual será
insuficiente en los próximos años.
6

El contar con un sistema diseñado a la medida de las necesidades del
departamento, además de impactar directamente al titular y a los alumnos,
encaminara a la universidad en desarrollo de sus propias aplicaciones,
promoviendo entre los alumno el interés por el desarrollo de tecnología creado
en las aulas.
Al ser el departamento de actividades deportivas y culturales parte de la
subdirección de vinculación y extensión universitaria, los resultados y eventos
que este genere podrán ser reportados de manera más rápida y sencilla a la
subdirección,

1.4 Objetivo general.
Diseñar e implementar un sistema web para el departamento de actividades
deportivas y culturales de la universidad politécnica de Francisco I. Madero
acorde a las necesidades organizacionales y funcionales, que permita atender a
un mayor número de alumno en un mínimo de tiempo sin dejar de lado la
atención personalizada que cada alumno requiere.

1.5 Objetivos específicos.
1

2
3
4
5

Realizarun análisis del departamento, para determinar los
requerimientos operacionales y funcionales para el desarrollo del
sistema.
Definir la arquitectura del sistema.
Revisar las metodologías de desarrollo de software y determinar si
se debe hacer uso de una de ellas.
Presentar un prototipo de la aplicación, que represente como
funcionara el sistema una vez terminado.
Realizar la maquetación web, para determinar la estética visual del
sistema.
7

6

Documentar el desarrollo del sistema, para así facilitar el
mantenimiento de este.

1.7 Metodología.
En este apartado se describen los procedimientos y métodos para realizar el
diseño e implementación de un sistema de información web.
Para el modelado del sistema se hizo uso del Lenguaje Unificado de Modelado
(UML, por sus siglas en inglés, Unified Modeling Languaje), el cual es un
lenguaje de modelado de sistemas más conocido y utilizado en la actualidad. La
tabla 1.1 describe con mayor detalle la metodología que se utilizó en el
desarrollo de este sistema.
Tarea.

Objetivo

Método.

Realizar un análisis del

Conocer a detalle el

departamento,

para

departamento y obtener

Investigación
Campo

los

el perfil de los posibles

determinar
requerimientos

Investigación

Técnicas.
de

Herramienta

Observación
Entrevistas
Cuestionarios

Computadora personal
Procesador de Textos
Cámara de video
Grabadora de audio

Lectura
de
documentación del área

usuarios.

documental
operacionales
funcionales

y
para

el

desarrollo del sistema.
Definir la arquitectura

Organizar y facilitar

Investigación

del sistema.

el diseño.

documental.

Lectura
de


Software para diseño de
diagramas

Revisar

las

Determinar cuál de las

Investigación

Análisis

metodologías

de

metodología es la más

documental.

según requerimientos.

Presentación.

Exposición

desarrollo de software.

y

adaptación

conveniente de acuerdo
a

experiencia

en

proyectos pasados
Presentar un prototipo

Estimular el desarrollo

de la aplicación, que

del sistema y

represente
funcionara

Intercambio de ideas

Software para desarrollo
web.

como
el

sistema

una vez terminado.

8

Hacer la maquetación

Determinar la estética

Investigación

Entrevistas

web, para determinar la

visual del sistema.

documental

Observación

Investigación

Lectura
de

estética

visual

Hojas de estilo (css),

del

sistema.
Documentar

el

desarrollo del sistema.

Facilitar
mantenimiento

el
del

documental

Software para diseño de
diagramas

sistema.

Tabla 1.1 Metodología desarrollada.

1.7.1. Revisión de bibliografía.
En primer lugar se buscó información bibliográfica de los conceptos que
involucran el desarrollo de sistemas web, igualmente se recopilo la
documentación acerca de algunas herramientas para el desarrollo de este tipo
de proyectos.
1.7.2. Proceso de desarrollo.
El proceso de desarrollo de este sistema, sigue las etapas propuestas por la
metodología de desarrollo de software RUP(2), basándose únicamente en su
ciclo de vida.
a) Fase de concepción (inicio).
Se definió el ámbito y objetivos del proyecto, además de la funcionalidad
y capacidades del producto.
b) Fase de elaboración.
Se estudió a fondo la funcionalidad en base con la definición del
problema, para definir la arquitectura básica del sistema, considerando
los recursos disponibles (materiales, intelectuales y tecnológicos).
c) Fase de construcción.
El sistema se desarrolló a través de iteraciones, donde cada una
involucro tareas de análisis, diseño e implementación. Logrado obtener
la arquitectura establecida en la fase de elaboración que se refino en
cada iteración.
El resultado de esta fase fue un producto construido junto con su
documentación por cada iteración (visiones beta).
9

d) Fase de transición.
El sistema se entregó al titular del departamento de actividades
deportivas y culturales para su uso con datos real.

10

Capítulo II: Fundamento teórico.

CAPITULO II: FUNDAMENTO TEÓRICO.
En el presente capítulo se realiza un análisis de las tendencias actuales de
las metodologías de desarrollo de software, estilos arquitectónicos, patrones
de arquitectura y tecnologías. Se concluye con la fundamentación de las
tecnologías a utilizar.

2.1 Tendencias.
-“En el desarrollo de software es importante evaluar periódicamente si la
metodología de desarrollo y los lenguajes usados son idóneos”-Dora Alicia
Reyes Echeagaray(3). Una de las necesidades más importantes de cualquier
organización en contar con una gestión eficiente tanto de sus recursos como de
sus procesos que se dan dentro de ella.
La tendencia es unir el mundo de los lenguajes de programación de propósito
general con el mundo de las base de datos. Esto es evidente enlenguajes como
PHP, Java y c++, porque el inmenso potencial de internet esta está aún por
explotar. En definitiva, los modelos de programación web deben evolucionar.
Todas estas tendencias e impulsos nos conducen a un cambio en los modelos
de programación web.
Esta necesidad favorece a las empresas desarrolladoras de software que
ofrecen soluciones a la medida para la gestión de información. El software a
medida –o software personalizado-, está diseñado generalmente por equipos
formados por expertos que analizan las necesidades de una empresa.
11


3.2 Estilos arquitectónicos y patrones de arquitectura web.
2.2.1 Estilos arquitectónicos
El tópico más urgente y exitoso en arquitectura de software en los últimos años
es, sin duda, el de los patrones (patterns), tanto en lo que concierne a los
patrones de diseño como a los de arquitectura. Inmediatamente después, en
una relación a veces de complementariedad, otras de oposición, se encuentra
la sistematización de los llamados estilos arquitectónicos.
Conviene caracterizar el escenario que ha motivado la aparición del concepto
de estilo, antes siquiera de intentar definirlo. Desde los inicios de la arquitectura
de software, se observó que en la práctica del diseño y la implementación
ciertas regularidades de configuración aparecían una y otra vez como respuesta
a similares demandas. El número de esas formas no parecía ser muy grande.
Muy pronto se las llamó estilos, por analogía con el uso del término en
arquitectura de edificios. Un estilo describe entonces una clase de arquitectura,
o piezas identificables de las arquitecturas empíricamente dadas. Esas piezas
se encuentran repetidamente en la práctica, trasuntando la existencia de
decisiones(4).

2.3 Tecnologías para el desarrollo web
2.3.1 HTMLy XHTML
HTML,siglas

de

HyperTextMarkup

Language(Lenguaje

de

Marcadode

Hipertexto), es el lenguaje de marcadopredominante parala elaboración de
12

páginas web. Es usadopara describirla estructuray elcontenidoen forma
detexto,asícomo paracomplementar eltextocon objetos tales como imágenes.
HTMLse escribeen formade "etiquetas", rodeadaspor corchetesangulares (<,>).
Ellenguaje HTMLes un estándar reconocido en todoel mundoy cuyasnormas
defineun

organismo

sin

ánimo

de

lucrollamadoWorldWideWebConsortium,másconocidocomoW3C. Como se trata
de un estándar reconocido por todaslas empresas relacionadas con elmundode
Internet,una

mismapáginaHTMLse

encualquiernavegadorde
ellenguaje

HTMLcomo

cualquier
"un

visualizade

sistemaoperativo.

lenguaje

formamuysimilar
ElpropioW3C

define

reconocidouniversalmentey

que

permitepublicarinformación deforma global".
Por convención,los archivos de formato HTMLusan la extensión .htmo .html.
XHTMLes

elsucesor

deHTML.XHTML,

acrónimo

inglés

de

eXtensible

HypertextMarkup Language(lenguaje extensiblede marcado de hipertexto),es el
lenguajede marcado pensado para sustituir aHTMLcomoestándarpara las
páginas web. XHTMLes laversiónXMLde HTML, por lo que tiene,básicamente,
las mismas funcionalidades, pero cumple lasespecificaciones, más estrictas, de
XML.
XHTMLtiene comoobjetivo avanzar en elproyectodelW3C delograr una web
semántica, donde la información,y la formade presentarlaestén claramente
separadas.

En

estesentido,

XHTML

serviríaúnicamentepara

transmitirla
13

informaciónque

contiene

un

documento,dejando

parahojas

de

estiloy

JavaScriptsu aspecto y diseño endistintos medios.
2.3.2 CSS
Las hojas deestilo encascada(CascadingStyleSheets, CSS) son un lenguaje
formalusadopara definirla presentaciónde un documento estructurado escritoen
HTMLo XML(ypor extensiónen XHTML). ElW3C es elencargadode formularla
especificación delas hojas de estilo queservirá de estándarpara los agentes de
usuarioo navegadores.
La idea que se encuentradetrás deldesarrollode CSS es separarlaestructura
deun

documentode

supresentación.

La

informaciónde

estilo

puedeser

adjuntadatantocomo un documentoseparadoo en elmismo documento HTML.
Eneste últimopodrían definirse estilosgeneralesen la cabecera deldocumentoo
en cadaetiqueta particular medianteelatributo"style". Las ventajas de utilizar
CSS (u otro lenguaje deestilo)son:
Controlcentralizadode lapresentaciónde un sitioweb completo, con loque se
agilizade forma considerable laactualizacióndel mismo.
Los

navegadores

permitena

los

usuarios

especificarsu

propiahojade

estilolocalque será aplicada aun sitio web remoto, con loque aumenta
considerablementelaaccesibilidad.
Unapáginapuede disponer dediferenteshojas de estilo según eldispositivo que la
muestre.
14

EldocumentoHTMLen sí mismo es más claro de entender y se consiguereducir
considerablemente su tamaño.
2.3.3 JavaScript,jQueryyAJAX
JavaScriptes un lenguaje interpretadoutilizadoprincipalmente en páginas web,
con una sintaxis semejante ala dellenguaje Java. Sinembargo, alcontrarioque
Java, JavaScriptno es un lenguaje orientadoa objetos propiamentedicho,
yaqueno dispone de herencia. Es másbien un lenguaje basado en prototipos,
yaque lasnuevas clases se generanclonandolas clases base(prototipos) y
extendiendo su funcionalidad(5).
Todos los navegadores interpretanelcódigoJavaScriptintegradodentrode las
páginasweb. Para interactuarcon una página web se provee al lenguaje
JavaScriptdeuna

implementacióndelDOM

(Modelo

de

ObjetosdelDocumento).JavaScriptse ejecuta enelagente deusuarioal mismo
tiempo que las sentencias vandescargándose juntocon elcódigo HTML.
jQueryes una biblioteca o frameworkde JavaScriptque permitesimplificar la
manera de interactuarcon los documentos HTML, manipular elárbolDOM,
manejar eventos, desarrollar animaciones y agregar interacción con la
tecnologíaAJAX a páginasweb.
jQuery,aligualque otras bibliotecas, ofreceuna serie defuncionalidades basadas
enJavaScriptque de otramanerarequerirían de muchomás código,es decir,con
las funciones propias de esta bibliotecase logran grandesresultados en
15

menostiempoy espacio.
AJAX, acrónimodeAsynchronousJavaScriptAnd XML(JavaScriptasíncrono y
XML), es una técnica dedesarrolloweb paracrearaplicacionesinteractivaso
RIA(Rich InternetApplications). Estas aplicaciones se ejecutanen elcliente, es
decir, en elnavegadorde los usuarios mientras se mantienela comunicación
asíncronacon elservidor en segundo plano.De esta formaes posible realizar
cambios sobre las páginas sin necesidadde recargarlas, loque significa
aumentar la interactividad, velocidady usabilidad en lasaplicaciones.
2.3.4 Lenguajes de programación.
2.3.4.1PHP.
PHPes un

lenguaje

interpretadode

propósito

generalampliamenteusado,

diseñado especialmente para desarrollo web y que puedeser incrustadodentro
de códigoHTML. Generalmentese ejecuta en un servidor web, tomando
elcódigo enPHPcomosu entraday creando páginas web como salida.Puedeser
desplegadoen la mayoríade los servidores web y en casitodos los sistemas
operativosy plataformas sin costo alguno.PHPse encuentrainstalado en másde
20 millones de sitios web y en un millónde servidores. Es tambiénel
móduloApachemáspopular entre las computadoras que utilizanApachecomo
servidorweb(6).
Elgranparecidoque

posee

PHPcon

los

lenguajes

máscomunes

de

programaciónestructurada, como C y Perl,permiten a la mayoría de los
16

programadores crearaplicaciones complejas conuna curva deaprendizaje
muycorta.Tambiénles

permite

involucrarse

conaplicacionesde

contenido

dinámico sin tener que aprender todo un nuevogrupo de funciones.
Aunquetodo en su diseño estáorientadoa facilitar lacreación de página web, es
posiblecrear aplicaciones con una interfazgráficapara elusuario, utilizandola
extensión PHP-Qto PHP-GTK. Tambiénpuede ser usado desde lalínea de
órdenes,de la misma manera comoPerlo Python pueden hacerlo;a esta
versiónde PHPse la llamaPHP-CLI (Command Line Interface).
Cuando elcliente hace una peticiónalservidorpara que le envíeuna páginaweb,
elservidorejecuta el intérprete de PHP. Ésteprocesa elscriptsolicitadoque
generará

elcontenidode

informaciónde

una

manera

basede

dinámica

datos).

(por

Elresultadoes

ejemplo
enviado

obteniendo
por

el

intérpretealservidor,quien a su vezse loenvíaalcliente.Mediante extensiones es
también posible la generaciónde archivos PDF, Flash, asícomoimágenes en
diferentes formatos.
Permite laconexión adiferentes tipos de servidoresde bases de datos tales
como MySQL,Postgres, Oracle,ODBC, DB2, MicrosoftSQLServer,Firebird y
SQLite.
PHPtambién tiene lacapacidad deser ejecutado en la mayoría de los sistemas
operativos, tales como UNIX (ydeese tipo, como Linuxo Mac OS X) yWindows, y
puede interactuar conlos servidores de web más populares yaque existe en
17

versiónCGI, módulo paraApache, eISAPI.
PHP(figura 2.1) es unaalternativa a lastecnologías de MicrosoftASPyASP.NET,
aColdFusionde la compañíaAdobe,a JSP/Java deSun Microsystems,y a
CGI/Perl.

Figura 2. 1Esquema del funcionamiento de las páginas PHP.

2.3.4.2 JSP
La tecnología Java para la creación de páginas web con programación en el
servidor.JSP es un acrónimo de Java Server Pages, que en castellano vendría
a decir algo como Páginas de Servidor Java. Es una tecnología orientada a
crear páginas web con programación en Java. Con JSP podemos crear
aplicaciones web que se ejecuten en variados servidores web, de múltiples
plataformas, ya que Java es en esencia un lenguaje multiplataforma. Las
páginas JSP están compuestas de código HTML/XML mezclado con etiquetas

18

especiales para programar scripts de servidor en sintaxis Java. Por tanto, las
JSP podremos escribirlas con nuestro editor HTML/XML habitual (7).
Motor JSP
El motor de las páginas JSP está basado en los servlets de Java -programas en
Java destinados a ejecutarse en el servidor-, aunque el número de
desarrolladores que pueden afrontar la programación de JSP es mucho mayor,
dado que resulta mucho más sencillo aprender que los servlets.
En JSP creamos páginas de manera parecida a como se crean en ASP o PHP otras dos tecnologías de servidor-. Generamos archivos con extensión .jsp que
incluyen, dentro de la estructura de etiquetas HTML, las sentencias Java a
ejecutar en el servidor. Antes de que sean funcionales los archivos, el motor
JSP lleva a cabo una fase de traducción de esa página en un servlet,
implementado en un archivo class (Byte codes de Java). Esta fase de
traducción se lleva a cabo habitualmente cuando se recibe la primera solicitud
de la página .jsp, aunque existe la opción de precompilar en código para evitar
ese tiempo de espera la primera vez que un cliente solicita la página.
Ejemplo de página JSP
En la figura 2.2 se puede ver un ejemplo extremadamente simple de una página
JSP y el esquema de conversión de esa página en un servlet.

19


Figura 2. 2 Diagrama de una página JSP

2.3.4.2 .NET.
La plataforma de Microsoft orientada a la creación de software para
Internet.Microsoft.NET es el conjunto de nuevas tecnologías en las que
Microsoft ha estado trabajando durante los últimos años y cuyo lanzamiento
definitivo es inminente, estando ya disponible su primera versión Release
Candidate- con los objetivos de:
Mejorar sus sistemas operativos
Obtener un entorno específicamente diseñado para el desarrollo y
ejecución del software en forma de servicios que puedan ser tanto
publicados como accedidos a través de Internet de forma independiente
del lenguaje de programación, modelo de objetos, sistema operativo y
hardware utilizados tanto para desarrollarlos como para publicarlos. Éste
entorno es lo que se denomina la plataforma.NET, y los servicios antes
mencionados son a los que se denomina servicios web.
Para el desarrollo y ejecución de aplicaciones en este nuevo entorno
tecnológico Microsoft proporciona el conjunto de herramientas conocido .NET
Framework SDK, que es posible descargarlo gratuitamente de su sitio web
http://www.msdn.microsoft.com/net e incluye compiladores de lenguajes como
20

C#, Visual Basic.NET, Managed C++ y JScript.NET específicamente diseñados
para crear aplicaciones para él (8).
El corazón de la plataforma.NET es el CLR (Common Language Runtime), que
es una aplicación similar a una máquina virtual que se encarga de gestionar la
ejecución de las aplicaciones para ella escritas. A estas aplicaciones les ofrece
numerosos servicios que facilitan su desarrollo y mantenimiento y favorecen su
fiabilidad y seguridad. Entre ellos los principales son:
Modelo de programación consistente y sencillo, completamente orientado
a objetos.
Eliminación del temido problema de compatibilidad entre DLLs conocido
como "infierno de las DLLs"
Ejecución multiplataforma
Ejecución multilenguaje, hasta el punto de que es posible hacer cosas
como capturar en un programa escrito en C# una excepción escrita en
Visual Basic.NET que a su vez hereda de un tipo de excepción escrita en
Cobol.NET. Aunque más arriba se ha dicho que en el .NET Framework
sólo se ofrecen compiladores de C#, MC++, VB.NET y JScript.NET, lo
cierto es que aparte Microsoft y terceros han -o están- desarrollado
versiones adaptadas a .NET de muchísimos otros lenguajes como APL,
CAML, Cobol, Eiffel, Fortran, Haskell, Java, Mercury, ML, Mondrian,
Oberon, Oz, Pascal, Perl, Python, RPG, Scheme o Smalltalk
Recolección de basura
Seguridad avanzada, hasta el punto de que es posible limitar los
permisos de ejecución del código en función de su procedencia (Internet,
red local, CD-ROM, etc.), el usuario que lo ejecuta o la empresa que lo
creó.
Interoperabilidad con código preexistente, de manera que es posible
utilizar con facilidad cualquier librería de funciones u objetos COM y
COM+ creados con anterioridad a la aparición de la plataforma .NET

21

2.3.4.3 ASP.
Es el lenguaje de scripting del lado del servidor creado por Microsoft.ASP
(Active Server Pages) es la tecnología desarrollada por Microsoft para la
creación de páginas dinámicas del servidor. ASP se escribe en la misma página
web, utilizando el lenguaje Visual Basic Script o Jscript (Javascript de Microsoft)
(9).
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web,
justo antes de que se envíe la página a través de Internet al cliente. Las páginas
que se ejecutan en el servidor pueden realizar accesos a bases de datos,
conexiones en red, y otras tareas para crear la página final que verá el cliente.
El cliente solamente recibe una página con el código HTML resultante de la
ejecución de la página ASP. Como la página resultante contiene únicamente
código HTML, es compatible con todos los navegadores. Podemos saber algo
más sobre la programación del servidor y del cliente en el artículo qué es
DHTML.
El tipo de servidores que emplean este lenguaje son, evidentemente, todos
aquellos que funcionan con sistema Windows NT, aunque también se puede
utilizar en un PC con windows 98 si se instala un servidor denominado Personal
Web Server. Incluso en sistemas Linux se puede utilizar las ASP si seinstala un
componente denominado Chilisoft, aunque parece claro que será mejor trabajar
sobre el servidor web para el que está pensado: Internet Information Server.

22

Con las ASP se puede realizar muchos tipos de aplicaciones distintas. Permite
acceso a bases de datos, al sistema de archivos del servidor y en general a
todos los recursos que tenga el propio servidor. También existe la posibilidad de
comprar componentes ActiveX fabricados por distintas empresas de desarrollo
de software que sirven para realizar múltiples tareas, como elenvió de correo,
generar gráficas dinámicamente, y un largo etc.
Actualmente se ha presentado ya la segunda versión de ASP, el ASP.NET, que
comprende algunas mejoras en cuanto a posibilidades del lenguaje y rapidez
con la que funciona. ASP.NET tiene algunas diferencias en cuanto a sintaxis
con el ASP, de modo que se ha de tratar de distinta manera uno de otro.
2.3.5 SQL
Ellenguaje de consultaestructurado (SQLStructuredQueryLanguage) es un
lenguajedeclarativo

de

acceso

a

bases

de

datos

relacionales

que

permiteespecificardiversos tipos de operaciones sobre las mismas.Unade sus
característicases

el

manejo

delálgebray

elcálculorelacionalpermitiendo

lanzarconsultas conelfinde recuperarde una formasencilla informaciónde interés
de una basede datos, asícomotambién hacer cambios sobre la misma(10).
2.6 MySQL
MySQL(11)es un sistemade gestión debase de datos relacional, multihilo y
multiusuariocon más de seis millones de instalaciones. MySQLAB desarrolla
MySQLcomosoftwarelibreen un esquema de licenciamiento dual.Por un lado se
ofrecebajo la GNUGPLparacualquier uso compatible con esta licencia, peropara
23

aquellas empresasque quieranincorporarloen productos privativos deben
comprara la empresa una licencia específica que lespermita esteuso.
Estádesarrolladoen su mayor parte enANSI C.
MySQLes muyutilizadoen aplicaciones web comoMediaWiki,Amazon,Yahoo,
Flickr

o

Drupal;

PHP/Perl/Python),y

en
por

plataformas

herramientas

(Linux/Windows-Apache-MySQL-

de

seguimiento

deerrores

como

Bugzilla.Su popularidadcomo aplicación web estámuyligada a PHP.
2.3.7 PhpMyAdmin
PhpMyAdmines unaherramientaescritaen PHPcon laintención de manejar la
administración

de

MySQLa

travésde

páginas

web,

utilizando

Internet.Actualmentepuede creary eliminarbases de datos, crear,eliminary
alterar tablas, borrar, editary añadir campos, ejecutarcualquier sentencia
SQL,administrar claves en campos,administrar privilegios, exportar datos
envarios formatos y está disponible en 50 idiomas. Se encuentradisponiblebajo
lalicenciaGPL.
2.3.8 StarUML
StarUMLes

un

proyecto

de

softwarelibre

queintenta

reemplazar

las

herramientas de UML comerciales talescomo RationalRose.Se ha utilizadopara
desarrollar eldiagramade clases y los diagramasde casos de uso en laetapade
análisis delproyecto. Debidoa su interfazintuitiva,se tratade una herramienta
fácilde manejar paraelusuario.

24

2.3.9Adobe Dreamweaver
AdobeDreamweaveres una aplicaciónen formade estudio enfocada ala
construcción y ediciónde sitios y aplicaciones web basadas en estándares. Es
elprogramade estetipomásutilizadoen el sector deldiseño y laprogramación web,
por sus funcionalidades, su integración conotras herramientas comoAdobe
Flash y,recientemente, por su soporte delos estándares delW3C. Su
principalcompetidores

MicrosoftExpressionWeby

tiene

soporte

tanto

paraediciónde imágenes como paraanimacióna través desu integración con
otras(12).
Las

versiones

originales

dela

aplicación

se

utilizaban

comosimples

editoresWYSIWYG. Sin embargo, versionesmásrecientes soportan otras
tecnologías
servidor.Esta

web

comoCSS,

aplicación

JavaScripty

algunos

estádisponibletantopara

frameworks

laplataformaMAC

dellado
como

paraWindows, aunquetambién se puedeejecutar enplataformas basadas en
UNIX utilizando programas queimplementanlasAPI's deWindows, tipoWine.
2.3.10 NetBeans IDE
NetBeans IDE es un entorno de desarrollo integrado (IDE), modular, de base
estandar (normalizado), escrito en el lenguaje de programación Java. El
proyecto NetBeans consiste en un IDE de código abierto y una plataforma de
aplicación, las cuales pueden ser usadas como una estructura de soporte
general (framework) para compilar cualquier tipo de aplicación (13).

25

Características Destacadas
Soporte JavaScript
Sintaxis Resaltada
Completación de Código y Análisis de Tipeo
Soluciones Rápidas (Quick Fixes) y Verificación de Sintaxis
Completación de Código JavaScript.
Promociones más inteligentes, así que la completación de código es más
rápida
Agregado de la librería Spring Framework 2.5
Asistentes para configuración de archivos XML y controladores Spring
Web MVC
Completación de Código de nombres bean y clases y propiedades Java
Nuevo Soporte MySQL en Exploración de Bases de Datos
Registro de servidores MySQL
Ver, crear y borrar bases de datos
Fácil lanzamiento de la herramienta de administración para MySQL
Soporte Java Beans
Modelos Bean en el Navegador
Generador de Propiedades Bean
Editor BeanInfo
Navegador Java Bean
Generador JSFCRUD
Generador de aplicaciones JavaServer Faces CRUD a partir de clases
de entidades.
Soporta todo tipo de relaciones de entidades (uno-a-uno, uno-a-varios,
varios-a-uno y varios-a-varios).
Soporta todo tipo de claves principales (columna simple, compuesta y
generada).
Soporte de Edición para PHP: Completación de código, sintaxis
resaltada, navegación, depuración y mucho más
Depurador JavaScript.
2.3.11DBDesigner
DBDesigneres un sistema totalmentevisualdediseño de bases de datos,
quecombina

características

y

funciones

profesionales

conun

diseño
26

simple,muyclaro y fácilde usar,a fin de ofrecerun método efectivopara gestionar
una basede datos. Permite administrarla basede datos, diseñar tablas,
hacerpeticiones SQLmanuales, ingeniería inversa en MySQL,Oracle, MSSQLy
otras bases de datos ODBC, modelos XMLy soportepara lafunción drag-anddrop.

2.4 Tecnologías a utilizar.
Normalmente el decidir que tecnología es la más adecuada para desarrollar un
proyecto, es una decisión difícil de tomar, se deben considerar múltiples
aspectos.
Para la realización de este el sistema web para el departamento de actividades
deportivas y culturales, se optó por, primero, por tecnologías de uso libre,
segundo, que contaran con una documentación formal, y por último, que cada
tecnología tenga mínimo grupo (blog) en internet donde discutir las dudas que
se generan durante la práctica.
Para este fin se eligió una arquitectura de tres capas (presentación, negocio y
datos), que facilita la correcta implementación de un patrón de diseño basado
en Modelo-Vista-Controlador (MVC, model-view-controler) (14). El DBMS
elegido fue MySQL, por tener un amplio y bien documentado manual en línea,
además de ser uno de los más utilizados en la web.
La elección del lenguaje da programación fue tarea difícil, porque, cada uno
tiene vantaajas respecto al otro, al final se optó por PHP que se integra sin
27

ningún problema con el DBMS y al igual tiene una buena documentación en su
sitio oficial.
Para logar un diseño amigable, se utilizaron hojas de estilo (css3) para lograr
los efectos visuales. También se utilizójavascript con JQuery como framework
para agilizar la programación del lado del cliente.
Para mejorar la comunicación entre cliente-servidor, se hiso uso de la
tecnología AJAX, para crear páginasmás dinámicas, que mejora el rendimiento
del portal.
Se trabajó con un NetBeans como IDE debido a que soporta el uso de las
tecnologías anteriormente mencionadas y ofrece ayuda de sintaxis además de
contar un gran número de funciones que hicieron el desarrollo más rápido.

28

Capítulo III: Desarrollo del sistema.

CAPÍTULO III: DESARROLLO DEL SISTEMA.
Este capítulo se sigue la metodología descrita en el capítulo I tema 1.7.2
(Proceso de desarrollo)

3.1 Fase de concepción.
3.1.1 Descripción general.
La aplicación desarrolladapretendedar informacióngeneralsobreeldepartamento
de actividades deportivas y culturales, asícomo información más específicapara
cadatipode usuario que estéregistrado.Se podrá acceder a laaplicacióndesde
cualquier sistemaoperativo que tenga conexión a Internetutilizando un
navegador web.
3.1.2 Funciones delproducto
Acontinuaciónse muestran lasfunciones que conforman laaplicación,según el
tipode usuario que se encuentre haciendo uso del sistema (conectado).
3.1.2.1 Usuarioanónimo
-

Autenticación:Se muestraun par de cajas de texto enlas que elusuarioha de
introducirsu nombre deusuarioy contraseñapara accedera la parte privada de
laaplicación.

-

Registro: Solo para usuarios anónimos, estos podrán registrar sus datos para
poder pasar por el proceso de autenticación. El registro está sujeto a
aprobación por el administrador que en este caso es el encargado del

29


departamento.

3.1.2.2 Usuarioregistrado
-

Cerrarsesión:Se muestraun botón paraque elusuariocierresu sesión.Cuando se
pulsa se le redirigea lapáginade inicio.

3.1.2.3 Usuario alumno
-

Consultarhorario:Se muestraun listadode las actividades en lasque elalumno
conectadose encuentra inscrito y cuandohaga click sobre una deellas se
muestra elhorario correspondientea esa actividad (díade la semana, hora
deinicioy hora de fin).

-

Listaralumnos de clase:Se listan los alumnosque comparten actividad con
elalumnoconectado

-

(nip (matricula), nombre y apellidos).

-

Listarprofesores:Se listarán los profesores que impartenla actividadalalumno
conectado (nombre, apellidos y nombrede la actividad quele imparten).

-

Listarcalificaciones: Se muestra un listado delas actividadesen las que
elalumnoconectado se encuentra inscrito y cuandohaga click sobre una deellas,
se muestran las calificaciones correspondientes a esa actividad (periodoy nota).

-

Listarfaltas de asistencia:Se muestra un listado delas actividadesen las que
elalumno conectado se encuentra inscrito y cuandohaga click sobre unade
ellasse muestran lasfaltas de asistencia correspondientes a esaactividad(fecha
y siestáo no justificada).

30


3.1.2.4 Usuario profesor
-

Listaralumnos: Se muestra ellistadode las actividades que imparteelprofesor
conectado y cuando seleccionauna de ellas se muestranlos alumnosque se
encuentra inscritos en esa actividad(nombre y apellidos).

-

Listarprofesores:Se

listan

los

profesores

que

impartenactividades

en

eldepartamento(nombre y apellidos).
-

Ponercalificaciones:Se muestraellistado

delas

actividades

que

imparte

elprofesor conectado paraque cuando seleccioneuna de ellas puedaelegirun
alumnode los que se encuentraninscritos enesa actividady ponerleuna nota.
-

Ponerfaltas de asistencia:Se muestra el listadode las actividades que
imparteelprofesor

conectado

paraque

cuando

seleccioneuna

de

ellas

puedaelegirun alumnode los que se encuentran inscritosen esa actividad y
ponerleuna falta deasistencia.
-

Modificarcalificaciones: Se muestra el listadode las actividades que
imparteelprofesor

conectadopara

que

cuandoseleccione

una

deellas

puedaelegir un alumno de los quese encuentraninscritos en esa actividad y
modificarle lacalificación.
-

Modificarfaltas de asistencia:Se muestra el listadode las actividades que
imparteelprofesor

conectado

paraque

cuando

seleccioneuna

de

ellas

puedaelegirun alumnode los que se encuentran inscritosen esa actividad y
modificaruna faltade asistencia.
-

Listarfaltas de asistencia:Se muestra el listadode las actividades que
imparteelprofesor

conectado

paraque

cuando

seleccioneuna

de

ellas

aparezcaellistado dealumnos que se encuentran inscritosen esa actividad, con

31


su nombre,apellidos y número defaltas deasistencia.

3.1.2.5 Usuarioadministrador
-

Alta de usuario: Se podrá dar dealtausuarios.

-

Confirmación de registro: Se podrá aceptar o denegar la solicitud de registro
enviado por un usuario anónimo.

-

Alta de actividad:Se podrá dar de altaactividades.

-

Inscribiralumno en actividad:Se podrá inscribir alos alumnos enlas distintas
actividades.

-

Baja de usuario:Se podrá darde bajaun usuario.

-

Baja de actividad:Se podrá darde bajauna actividad.

-

Modificardatos usuario:Se podrá modificarlos datos de un usuario.

-

Modificardatos actividad:Se podrá modificarlos datos de una actividad.

3.1.3 Características delusuario
Se puede diferenciarentredos tipos de usuarios, los usuarios no registrados y
los usuarios registrados. Dentrode los usuarios registrados podemos diferenciar,
además, más tiposde usuarios.
3.1.3.1 Usuarios no registrados
Este

tipo

de

usuarios

solamentetendrán

acceso

a

lainformación

generaldeldepartamento.

32


3.1.3.2 Usuarios registrados
Este tipo de usuarios son los que tienen acceso a laintranet. Haydistintos tipos
de usuarios registrados según lafunción quetengan querealizar.Se puede
diferenciarelusuarioalumno, elusuarioprofesor y elusuario administrador.
Este tipo de usuariopodrá consultarelhorariode actividades,con qué otros
alumnos comparte actividades, qué profesores le impartenuna actividad, qué
notasha obtenidoy qué faltas de asistencia tiene.
Este tipo de usuariopodrá listarlos alumnos alos que imparte actividades,
listarlos profesores que imparten en eldepartamentoy gestionarlas notas y faltas
de asistencia desus alumnos.
Este tipo de usuariose encargaráde la gestiónde labase de datos delsistema.Es
decir,efectuará el altay labaja delos usuariosy actividades asícomo las
modificaciones sobre lainformación referente a ellos/as.
3.1.4 Restricciones
Al tratarsede una aplicación web, se requiere un ordenadorcon un
33


navegadorconvencionaly una conexióna Internetbásica.
3.1.5 Supuestos y dependencias
La

aplicación

desarrolladatrabaja

softwareofreciendoasíun

soporte

almargen

decualquier

multiplataforma.

hardware

o

Laúnicadependencia

importanteque podemos encontrarestá relacionada con elservidor web donde se
encuentre alojado nuestroportal,elcualha deser capaz desoportar PHPy MySQL.
Menos importante pero ateneren cuentaes elhechode que eldiseño de la
interfaz dela aplicación serealizósobre elnavegador Google Chrome,de
maneraque algunos aspectos como los bordes redondeados de las etiquetas
HTML “<div>” y quela posiciónde algunos botonessalga en laposicióncorrecta
dependende sielusuarioutilizar estenavegadorpara visualizarla web o no.

34

Capítulo IV: Fase de elaboración.

CAPÍTULO IV:FASE DE ELABORACIÓN.
4.1. Requisitos específicos
4.1.1. Requerimientosfuncionales
Acontinuaciónse describen lasdiversas funciones que ofrece laaplicaciónweb,
clasificadas según eltipo de usuarioque accede alservicio.
4.1.1.1 Usuarios no registrados
Las únicas funcionesdisponiblepara los usuarios no registradosson la de
autentificarse (tabla 4.1)para acceder ala parteprivada dela aplicación, o bien,
llenar su solicitud de registro (tabla 4 2) y esperar la confirmación por parte del
administrador.
Tabla 4. 1 Autenticación.
Apartado

Descripción

Título

Autenticación

Propósito

Accedera laintranetdela aplicación

Entrada

Nombrede usuario y contraseña

Proceso

Se comprueba queelusuario existe

Salida

Confirmaciónde
acceso
a laintraneto
aviso
de
queelnombrede usuario o contraseña no es/son válidos

Tabla 4. 2 Registro.
Apartado

Descripción

Título

Registro

Propósito

Contar con un nombre de usuario y contraseña para
accedera laintranetdela aplicación

Entrada

Información personal e información para el acceso al
sistema. y contraseña

35


Proceso

Se comprueba queelusuario existe

Salida

Confirmaciónde

acceso

a

laintraneto

aviso

de

queelnombrede usuario o contraseña no es/son válidos

4.1.1.2 Usuarios registrados
Los usuarios registrados en generalsólopueden cerrarsu sesión (Tabla 4.3)
paraabandonarla intranety volver de nuevo ala partepública de laaplicación.
Tabla 4. 3 Cerrar sesión.
Apartado

Descripción

Título

Cerrarsesión

Propósito

Salirde laintranetdela aplicación

Entrada

-

Proceso

Se redirige ala página de inicio

Salida

-

Sin embargo,sielusuario registrado es un usuario detipo alumno puedeconsultar
su horario de actividades,listarlos alumnos conlos que comparte actividad,
listarlos profesores que leimparten actividades extra clase y consultarsus
calificacionese inasistencia (Tablas 4.4 a 4.7).
Tabla 4. 4Consultar horario.
Apartado

Descripción

Título

Consultarhorario

Propósito

Consultarelhorario de la actividad

Entrada

-

Proceso

Listar las actividades en las que se encuentra inscrito
elalumnoconectado. Elegirla actividad de la cualquierever
el horario.

Salida

Elhorariode actividad

(día,hora de inicioy hora de fin)

36


Tabla 4. 5Listar Profesores.
Apartado

Descripción

Título

Listar profesores

Propósito

Listar los profesores que le imparten actividad.

Entrada

-

Proceso

Recuperar dela base dedatos los profesores que
impartenactividad alalumno conectado y elnombre dela
actividad que le imparten.

Salida

Elnombrey los apellidos de los profesores y los nombresde
las actividades

Tabla 4. 6Listar Calificaciones.
Apartado

Descripción

Título

Listar calificaciones

Propósito

Listar las calificaciones

Entrada


Proceso

lacalificación.

Salida

Lasnotas

Tabla 4. 7Listar faltas de asistencia.
Apartado

Descripción

Título

Listar faltas de asistencia

Propósito

Listar las faltas deasistencia

Entrada

-

Proceso

las faltas de asistenciaque pudieratener

Salida

Lasfaltas deasistencia

Sielusuarioregistradoes del tipoprofesor entonces puedelistarlos alumnos alos
que

imparte

actividad,listar

los

profesores

queimpartenactividadespara
37


eldepartamentoy capturar y modificar lascalificacionese inasistencia de sus
alumnos (Tablas 4.8 a 4.13).
Tabla 4. 8Profesor-> Listar alumnos.
Apartado

Descripción

Título

Listar alumnos

Propósito

Listar los alumnos a los que imparteactividad.

Entrada

-

Proceso

Listar las actividades en las que imparte clase el profesor
conectado.
Elegirla actividad de la cualquierever los alumnos que se
encuentran inscritos

Salida

Elnombrey los apellidos de los alumnosa los queimparte
actividad.

Tabla 4. 9Profesor-> Listar profesores.
Apartado

Descripción

Título

Listar profesores

Propósito

Listar los profesores
departamento

Entrada

-

Proceso

Recuperar dela base dedatos los
impartenactividad en eldepartamento

profesores

que

Salida

Elnombrey los apellidos de
impartenclaseen eldepartamento

profesores

que

que

impartenactividad

los

en

el

Tabla 4. 10Profesor-> Poner inasistencia.
Apartado

Descripción

Título

Poner faltas de asistencia

Propósito

Poner unafaltade asistencia aun alumno.

Entrada

-

Proceso

Elegirla actividad
Elegirelalumno

Salida

Confirmaciónde que se ha insertado lafalta de asistenciao
Insertaren labase de datos lafalta de asistencia
aviso de que no se hapodido realizarlaoperación.

38


Tabla 4. 11Profesor-> Modificar calificaciones.
Apartado

Descripción

Título

Modificar calificaciones,

Propósito

Modificar lacalificación deuna actividada un alumno

Entrada

Nota

Proceso

1. Elegirla actividad
2. Elegirelalumno y elperiodo
3. Modificar lanota enla base dedatos
Confirmaciónde que se ha modificadolanota o avisode que
no se ha podidorealizar la operación

Salida

Tabla 4. 12Profesor-> Modificar inasistencia.
Apartado

Descripción

Título

Modificar faltas de asistencia

Propósito

Modificar una faltade asistencia a un alumno

Entrada

Sío No

Proceso

1.
2.
3.

Salida

Elegirla actividad
Elegirelalumno
Modificar en labase de datosla falta de asistencia

Confirmaciónde que se ha modificadolafalta deasistenciao
aviso de queno se ha podido realizarlaoperación

Tabla 4. 13Profesor-> Listar faltas de asistencias.
Apartado

Descripción

Título

Listar faltas de asistencia

Propósito

Listar las faltade asistencia de los alumnos a los
queimparte claseelprofesor conectado

Entrada

-

Proceso

Elegirla actividad.
Se muestra ellistadode alumnos (nombre, apellidos y
número de faltas de asistencia)

Salida

-

Elusuarioregistradode tipo administradordispone de las funciones de darelalta y
la baja de los usuarios (alumnoy profesor) y de las actividades, aprobar la
solicitud de registro de usuarios no registrados, inscribir a un alumno enuna
actividady de modificar los datosde los usuarios y actividades (Tabla 4.14 a
4.20).
39


Tabla 4. 14Administrador-> Alta de usuario.
Apartado

Descripción

Título

Altade usuario

Propósito

Dar de altaun usuario

Entrada

Datos personales del nuevousuario, datos para ingresar al
sistema.

Proceso

Insertarelusuarioen la basede datos.

Salida

Confirmaciónde que se ha insertado elusuario o avisode
que no se ha podidorealizar laoperación

Tabla 4. 15Administrador-> Alta de actividad.
Apartado

Descripción

Título

Altade actividad

Propósito

Dar de altauna actividad

Entrada

Identificador. nombrede la actividad, categoríaenelque se
encuentra, profesor que la imparte, actividad( S/N)

Proceso

Insertarla actividad enla base dedatos

Salida

Confirmaciónde que se ha insertado la actividad o avisode
que no se ha podido realizarlaoperación

Tabla 4. 16 Administrador-> Inscribir alumno en actividad.
Apartado

Descripción

Título.

Inscribiralumnoen actividad.

Propósito

Inscribira un alumnoen una actividad

Nombrey apellidos delalumno y nombrede la actividad dela
Entrada
cualse lequiere inscribir

Proceso

Insertala informaciónen labase de datos.

Confirmaciónde que se ha inscritoal alumno en la actividad
Salida

seleccionadao aviso de queno se hapodido realizarla
operación

40


Tabla 4. 17Administrador-> Baja de usuario.
Apartado

Descripción

Título

Baja de usuario

Propósito

Dar de baja un usuario

Entrada.

-

Proceso

Elegirelusuario quese quiere darde baja. Borrarelusuario
dela base dedatos

Salida

Confirmaciónde que se ha borradoelusuarioo avisode que
no se ha podidorealizar la operación

Tabla 4. 18Administrador-> Modificar datos actividad.
Apartado

Descripción

Título

Modificar datos actividad

Propósito

Modificar los datos deuna actividad

Entrada

Nombre,nively profesor

Proceso

Elegiruna actividad. Modificar los datos dela actividad
seleccionada con los datosintroducidos

Salida

Confirmaciónde que se han modificadolos datosde la
actividad o aviso de que no se ha podidorealizar
laoperación

41


Tabla 4. 19Administrador-> Baja de actividad.
Apartado

Descripción

Título

Baja de actividad

Propósito

Dar de baja unaactividad

Entrada

Proceso

Elegirla actividad que se quiere dar debaja. Borrarla
actividad de la base de datos

Salida

Confirmaciónde que se ha borradola actividad o avisode
que no se ha podidorealizar la operación

Tabla 4. 20Administrador-> Modificar datos de un usuario.
Apartado
Título

Descripción
Modificar datos deun usuario

Propósito

Modificar los datos deun usuario

Entrada

Login,contraseña,nombre,apellidos

Proceso

Elegirun

usuario.

Modificar

los

datos

delusuario

seleccionadocon los datosintroducidos

Salida

Confirmaciónde

que

se

han

modificadolos

datosdelusuario o avisode que no se ha podido
realizarlaoperación

4.2. Requerimientosde interfaces externos
4.2.1 Interfaces de usuario
Acontinuaciónse muestra unacapturade pantalla(figura 4.1) enla que se
42


especificanlas zonas que conformanla interfazgráficacon laque interactuará
elusuario (zona publica)que hagauso delportalweb.

Figura 4. 1 Zona de la interfaz grafica

4.2.3 Interfaces hardware
Al tratarsede una aplicación web, se podrá visualizarsobre cualquier
sistemaoperativo.
4.2.4 Interfaces software
La aplicación funcionará encualquier máquina conun navegador web y conexión
a Internet.
4.2.5 Interfaces de comunicaciones
Las

comunicaciones

se

efectuarán

siguiendo

elprotocoloHTTP(15)medianteconexionesTCP/IP(16).

4.3 Requerimientosde eficiencia
Debido a laarquitecturaempleada eneldiseño dela aplicación, elportalweb
tieneun

rendimiento

del100%

independientementedelhardwarey
43


softwareutilizado.Los únicos factoresque pueden influirson las velocidades de
conexión

delcliente

mayoríacuentancon
necesidades

del

y

delservidor.En

velocidades
sistema.

de

cuantoalservidor,actualmente

subidamásque

Respectoalcliente,las

suficientes

velocidades

la

paralas
ofrecidas

actualmentepor los ISPtambién son más que suficientes para lacorrecta
transmisión de datos entreelclientey elservidor.
Otro aspectoque hemos tratado de cuidar especialmentees la resolución
delmonitor. Lamejor resoluciónpara visualizarnuestra aplicación es 1280x800,
pudiéndose visualizar, sin embargo,el contenidode igual modo conresoluciones
inferiores.

4.4Obligaciones deldiseño
4.4.1Estándarescumplidos
Se han intentadocumplirlos estándares decualquier web con acceso seguro,
creandoun sistema de autenticación paraque nadiepueda accedera una zonade
laweb

ala

queno

tienepermiso

de

acceso.

El

idioma

elegidopara

lapresentaciónde las páginas ha sido elespañol.
4.4.2Limitaciones hardware
Al tratarsede una aplicación web no se requiere un hardwareespecífico.
Elservidor

que

albergará

la

basede

datos

delsistema

deberá

permanecerconectado a Internetlas 24 horas, puesto que este hostserá
44


quienatiendalas peticionesde lectura y escritura delos usuariosque accedan a
laintranet.

4.5Atributos
4.5.1 Seguridad
La seguridades un componente fundamentalen elportal.La administración
delsitioweb está sujeta a laidentificación satisfactoriadeladministrador en
laaplicación,de formaque ningún usuario anónimoo visitante pueda,por ejemplo,
añadir o eliminarusuarios en labase de datos. Para asegurar laidentidad
deladministrador se requerirá un nombrede usuario y contraseña que
autenticará
guardaráen

a

ésteen
la

laaplicación.La

basede

datos.

informaciónacercade
Elproceso

de

(login)llevaráaladministradoralpaneldeadministracióndesde

lacuentase
autenticación

donde

podrá

gestionar elsitio web deldepartamento.
4.5.2 Facilidades de mantenimiento
El mantenimiento básicode laaplicaciónse llevaráa cabopor eladministrador. Sin
embargo, cualquier cambio quese deseara introducir y requiriesede la
modificación dela base dedatos, así como implementarnueva funcionalidad,
deberáser llevada a cabopor elprogramador dela aplicación.
4.5.3 Portabilidad
La aplicación hasido diseñada contecnología libre, podrá ser soportadapor
45


cualquier plataformay sistema operativo.Por lomismo, se podrá accedera ella
desde cualquiernavegador.
4.5.4 Otros requerimientos
Elsistemausa

unabasede

datos

MySQ1Ldonde

se

almacena

todala

informaciónreferida aldepartamento como usuarios, servicios, etc.Las consultas
ala base dedatos se realizan por parte delservidor web mediantePHPy suAPI de
acceso a bases de datos MySQL.
Por otro lado, ya hemos comentado que para poder iniciar sesión en la
aplicación en su primera ejecución la base de datos debe contar con al menos
un usuario de tipo administrador.

Esto con el fin de

poder administrar la

aplicación.

1

Sistema gestor de base de datos (DBMS).
46

Capítulo V: Fase de construcción, evaluación y pruebas.

CAPÍTULO V. FASE DE CONSTRUCCIÓN, EVALUACIÓN Y
PRUEBAS.
5.1 Análisis.
Para

realizarelanálisis

recomendaciones

de

estaaplicaciónweb

definidaspor

UML(Unified

se

optadopor

Modeling

seguirlas

Language

o

LenguajeUnificado deModelado en español). Este modelo disponede multitud
dediagramasque ayudana comprenderla complejidaddelsistema,permitiéndo
plasmaren un lenguajeestándar aquellas funcionalidades, requisitos y demás
características que se detectaronen elsistema.
AunqueUMLdefineuna gran cantidadde diagramas pararepresentarlos distintos
aspectosdel desarrollode la aplicación, eneste caso se hiso uso dos tipos
dediagramas:el diagramade clases y eldiagramade casos de usos.
5.1.1 Diagramadeclases
Eldiagramade clases(figura 5.1) describela estructuradelsistemamostrandolas
relaciones

(asociación,

agregación

y

composición)entre

los

distintos

elementosque conformanla aplicación, expresados estos como clases con sus
atributos.Acontinuacióndescribiremosbrevemente dichas clases:
Departamento:Representaaldepartamento

de

cultura

y

deporte

de

la

universidad.
Persona: Representa al objeto genérico.
47

Usuario: Hereda atributos del objeto persona, representa el objeto con el cual
trabaja el sistema
Privilegios: Contiene los tipos de usuarios disponibles con permisos para
navegar por el sistema
Alumno:Representaa los alumnos registrados en eldepartamento.Pueden
acceder ala intranetde la aplicacióna travésde su nombre de usuarioo login y
contraseña.
Profesor:Representaa

los

profesores

que

imparten

actividadesen

eldepartamento. Puedenaccedera la intranetdela aplicación a través de su login
y contraseña.
Administrador:Representa

aladministrador

delsistema.Puedeacceder

a

laintranetdela aplicacióna travésde su login y contraseña... Es elencargadode la
gestiónde labase de datos.
Categoría: Contiene la información acerca de la categorías a las que puede
pertenecer una actividad.
Actividad:Representalas actividades quese impartenen eldepartamentoy a las
que

asistenlos

alumnos

y

que

son

impartidas

por

los

profesores

deldepartamento.
Grupo: Contiene la información de los grupos creados para una actividad.

48

Horario: Contiene la información de los horarios de los grupos.
Inscritos: Contiene la información de los alumnos inscritos a un grupo en
particular que pertenece a una actividad.
Periodo: periodo en el que un usuario está inscrito.
Evento: Contiene la información de un evento especifico que pertenece a una
actividad y que se imparte en los grupos de dicha actividad.
Karnet: Contiene la información de los eventos de las actividades, asistencias y
calificación de los usuarios inscritos.

Figura 5. 1Diagrama de clases

5.1.2 Diagrama de casos de uso
Los

diagramasde

casos

de

uso

permiten

diferenciara

los

actores
49

queinteractúanconla aplicación,las relaciones entre ellos y las acciones que
puederealizar

cada

uno

dentrodelsistema.

Este

tipo

de

diagramas

sonfácilmentecomprensibles tantopor clientes comopor usuarios, representanlos
requisitos funcionales delsistemay se utilizancomo base paraun desarrollo
iterativoe incremental. Los diagramas decasos deuso tienen tres elementos:
-Actores:Son los usuarios delsistema(figura 4.3). Un actorpuede ser una
persona,un

conjuntode

sistemasoftware.Los

personas,

un

actoresrepresentanun

sistema

hardwareo

rol,

que

un
puede

desempeñaralguienque necesitaintercambiarinformación conelsistema.
- Casos de uso:Un caso deuso describe una formaconcreta deutilizar parte de
la funcionalidadde un sistema.La colecciónde todos los casos de uso
describetoda lafuncionalidaddelsistema.
- Comunicación entre actores y casos de uso:Cada actorejecutaun número
específicode

casos

de

uso

en

laaplicación.Por

eso

decimos

que

haycomunicaciónentre actores ycasos de uso.
Especificación de requisitos:Se redactó de unamaneraglobaluna primera
visión delproyecto donde se señalaron los requisitos quedebía cumplir.
Lafinalidad

de

estaetapa

es

plasmarelacuerdo

entreeldesarrollador

y

elclienteacercade las funcionalidades delproyecto. Ennuestro caso el visto
bueno lo dio la encargada del departamento de cultura y deporte.
Análisis:Se realizó elmodeladoconceptualdela futurasolución mediante eluso
dediagramas (diagramade clases y diagramas de casos de uso). Los

50

modelosayudan a visualizarcomo es el sistema,proporcionando plantillas
quesirven de guíaen la construcciónde la aplicación. Enesta etapase especifica
quédebe hacerla aplicación perono cómo debehacerlo.

5.1.2.1 Actores.
Los usuarios(Figura 5.2) son todasaquellas personas que acceden alportalweb
através de Internetsin necesidadde autentificarse. Los usuarios registrados son
los alumnos y profesores registrados en eldepartamento y eladministrador,
queaccedena laintranetdela aplicación medianteun nombre de usuario y
contraseña.

Figura 5. 2 Actores

5.1.2.2 Casos de uso del usuario.
Dado que este tipo de actor (Figura 5.3), quetambién podríadenominarseusuario
anónimoo visitante (no se ha identificadoanteelsistema), las acciones quepodrá
realizarseránmuylimitadas,

centrándoseen

la

obtenciónde
51

informacióngeneraldeldepartamento. Sin embargo, puede accedera lazona de
autenticación pasar el procesoy entrar enla zonaprivadade la aplicación,
accediendopor tantoa una mayor funcionalidad,sies quedispone de un
nombrede usuario y contraseña válidos.

Figura 5. 3 Casos de uso usuario

5.1.2.3 Casos deuso del usuario registrado
Este tipo de usuario (Figura 5.4)sólopuede realizarla acción decerrar su sesión
porque

es

laúnica

funcionalidadque

tienenen

comúnlos

usuarios

alumno,profesor y administrador.

Figura 5. 4 Usuario registrado.

5.1.2.4 Casos deuso del alumno.
Este tipo de usuariorepresentaa un alumnoregistradoen el departamento (Figura
5.5).Podrá realizar las acciones de mostrarsu horariode actividades,listar los
alumnos con los quecomparteactividades,listarlos profesores que leimparten y
consultarsus notas y faltas de asistencia.
52


Figura 5. 5 Casos de uso del alumno

5.1.2.5Casos deuso delprofesor.
Este tipo de usuariorepresentaa un profesor que imparte actividades en
eldepartamento

(Figura

5.6).Podrá

realizarlas

acciones

de

listarlos

alumnosinscritos eneldepartamento,listarlos profesores que trabajan enel
departamento,poner, modificary listarlas notas alos alumnos a los queimparte
alguna actividady poner y modificar faltasde asistencia a los alumnos que falten
aalgunade sus actividades.

Figura 5. 6 Casos de uso del profesor

53

5.1.2.6Casos deuso deladministrador.
Este tipo de usuariorepresentaaladministradorde la aplicación (Figura 5.7).
Podrá

realizar

las

acciones

dedar

elaltay

baja

deusuarios,

validar

registrosinscribirun alumnoen una actividad y modificarlos datos de los
usuarios y actividades.

Figura 5. 7 Casos de uso del administrador

5.2 Diseño.
Eldiseñoes elproceso queextiende, refinay reorganiza los aspectos detectados
en

elproceso

de

modeladoconceptualpara

generaruna

especificación

rigurosadelsistemade informaciónsiempre orientada a la obtención de la
solucióndelsistemasoftware.
Se

utilizaron

los

elementos

y

modelos

obtenidos

duranteelanálisis

paratransformarlosen mecanismos que puedanser utilizados en un entornoweb
con las características y condiciones que establecen estetipode entornos. Se
diseñarontodos los niveles delos que consta laaplicación (nivelde presentación,
54

nivel lógico y nivelde persistencia), aplicando la metodología MVC (modelo,
vista y controlador).
Para eldiseño delsitio

web

se escogióuna arquitecturade tres

capas

(presentación, aplicación y persistencia). Lautilización de estaarquitectura(figura
5.8) se debea que los distintos niveles son independientes unos de otros
demaneraque, por ejemplo, se puedecambiar fácilmenteel comportamiento de
las clases en elnivelde aplicación sin que ello influyaen las otras capas.

Figura 5. 8 Básico de la arquitectura de tres capas

5.2.1 Capa de presentación.
La capa de presentaciónse puede definir comoelconjunto de componentes
softwareque implementan lainteraccióncon los usuarios a través de una
representaciónvisualdela aplicación, proporcionandoa los usuarios una formade
55

acceder y controlar los datosy los servicios de los objetos.Apartirde lainterfaz
gráfica, elusuariopodrá navegarpor las distintas páginaspara poder obtenertoda
lainformación quedesee,o aportarla encaso de ser necesario.
Acontinuaciónse muestra elformatoque se ha utilizado paralas distintas vistas
de usuarios finales del sistema web (figura 5.9).

Figura 5. 9 Formato de las páginas web

5.2.2 Capa de negocioo lógica de laaplicación.
La capa de negocio se puededefinircomo elconjuntode componentes software
que implementan completamenteelcomportamientode las clases deldominio,
especificadas en lafasede modelado conceptual. Es eneste nivel, por tanto,
donde se implementala funcionalidadde laaplicaciónweb. Esta capa sirve
deenlaceentrelos nivelesde presentación y de persistencia(figura 5.10), yaque la
capade presentación no accede ala base dedatos directamente, sino quese
comunica con lacapa de aplicación parademandarle elserviciodeseado y es
lacapa deaplicaciónla que se comunicacon la capa de persistenciapara
recuperar los datos necesarios.
56


Figura 5. 10 Capas de la aplicación

En elproyectola capade negociose corresponde conlas clases, es decir, con los
ficheros que representanlos distintos elementos deldiagramade clasesy sus
colecciones. Haydos tipos de estructura, dependiendo de sise trata dela
definiciónde un elementoo la definiciónde una colecciónde elementos.
-

Atributos:Definelas propiedadesdelelemento.
Método constructor:Crea una instanciadelelemento y da valora sus
atributos.
Métodos get y set:Devuelveno establecen elvalorde los atributos
delelemento.
Método leer:Dado un identificador,recuperade labase de datos
laspropiedades delelemento con ese identificador.
Método insertar: Inserta enla base dedatos un elementocon los atributos
que se supone se han establecido previamente conllamadas a métodos
set.
57

-

-

Método modificar:Modificaen labase de datos un elemento con los
atributos que se supone se han establecidopreviamentecon llamadas
amétodos set.
Método eliminar:Dado un identificador, elimina dela base dedatos
elelemento con ese identificador.
Método visualizar: Muestraelvalor de los atributos deun elemento.

Las coleccionesde elementos son coleccionAlumnos,coleccionProfesores,
coleccionActividades,

coleccionPeriodos,

coleccionGrupos,

coleccionHorarios,coleccioncalificaciones y coleccionFaltasAsistencia y tienen
la siguienteestructura:
-

-

Atributos:Definelas propiedadesde la colección de elementos.
Método constructor:Crea una instanciade lacolección y la―rellena‖ con
los elementos quetoque en funcióndelvalorde los parámetros que se
lehan pasado.
Método obtenerLista: Devuelve una lista con los distintos elementosque
conformanla colección.
Método cantidadElementos: Devuelve lacantidad de elementos que
hayen la colección.
Método visualizar: Realizala llamadaal método visualizarsobrelos
distintos elementos que conformanla coleccióny devuelveuna tabla
conlos datos.

5.2.3 Capa de persistenciao datos
La capa de persistenciase puede definir comoelconjunto de componentes
softwareque proporcionanuna serie deservicios que permitena los objetos
deldominio interactuar consu repositoriopermanente asociado.
En elproyectola capade persistencia se correspondecon labase de datos dela
aplicación

y

las

distintas

administrador,alumno,profesor,

tablasque
actividad,

la

conforman.

Estas

inscritos,nivel,horario,

son

karnety
58

asistencia.
Acontinuaciónse muestra eldiagrama entidad-relación(figura 5.11) utilizado
parala implementaciónde labase de datos denuestroproyecto.

Figura 5. 11 Diagrama entidad-relación

5.3 Implementación.
Se utilizaron los elementos obtenidos eneldiseñopara permitirla elaboración
delproductoo prototipofuncional, es decir, que puedeser puesto en marcha y
sometido a pruebas. Para ellose consideraronlas diversas tecnologías quehan
intervenido enla elaboraciónde dicho producto.Todo lo desarrolladoen las
etapas delanálisis y deldiseño, se codifico en php.
59

Evaluación

y

pruebas:

Estafase

se

centróen

la

comprobacióndelcorrectofuncionamientodel producto desarrollado mediante
una seriede pruebas. Tras estas tareas pudimos dar por concluido
elproyecto,por lo que enúltimo lugarmostramos las conclusionesobtenidas y
listamos labibliografíautilizadadurantela realizacióndel mismo.

5.3.1 Capa depresentación
Acontinuaciónse
conformalacapade

muestra

elcontenido

presentación.

Para

de

uno

delos

poderexplicarlo

ficheros
mejor,

se

que
ha

divididoelfichero y añadido un brevetexto explicativoantes decada unade las
partes.
En lacabecera deldocumento (figura 5.12),se ―importan‖elfichero CSS que
defineelestilo

de

lapáginay

el

scriptJavaScriptque

nos

permitiráhacerla

presentaciónde la web másdinámica y amigable.

Figura 5. 12 Cabecera del archivo index.php

La primerazona delcuerpo deldocumentoelcontenedor,dentro dela cualse
60

añadirántodas las zonas que conforman laaplicación.La primera enañadirse es
lazona correspondienteal logode la universidad,compuesta únicamente por
una imagen quesirve de enlacea la página de inicio.
<body>
<div id="contenedor">
<div id="logo">
<a href="index.php" title="Inicio">
<imgsrc="Imagenes/logo.gif"alt="Logo" />
</a>
</div>

La segundazona que se añadealcontenedorde zonas es lacorrespondienteal
menú, compuesta únicamentepor una listano numerada de enlaces alas
distintas páginas que conforman laparte públicade laaplicación.
<?php
$idUser=$_SESSION['ID'];
?>
<ul>
<li>
<a href="moduloNoticias/index.php">
<span class="ui-icon ui-icon-document" style="float:left"></span>
INICIO
</a>
</li>
<li>
<a href="moduloActividades/index.php?&idUser=<?php echo($idUser);?>">
<span class="ui-icon ui-icon-document" style="float:left"></span>
Actividades
</a>
</li>
<li>
<a href="moduloDatos/index.php?&idUser=<?php echo $idUser; ?>">
<span class="ui-icon ui-icon-key" style="float:left"></span>
Mis datos
</a>
</li>
<li>
<a href="moduloAgenda/index.php?idUser=<?php echo $idUser; ?>">
<span class="ui-icon ui-icon-comment" style="float:left"></span>
Mi agenda
</a>
</li>
<li>
<a href="moduloInformes/index.php?idUser=<?php echo $idUser; ?>">

61

<span class="ui-icon ui-icon-contact" style="float:left"></span></span>
Informes
</a>
</li>
<li>
<a href="moduloRedSocial/index.php?idUser=<?php echo $idUser; ?>">
<span class="ui-icon ui-icon-person" style="float:left"></span>
Red Social
</a>
</li>
<?php if($_SESSION['PRIVILEGIO']==1){ ?>
<li>
<a href="moduloAdministracion/index1.php?idUser=<?php echo $idUser; ?>">
<span class="ui-icon ui-icon-signal" style="float:left"></span></span>
Administración
</a>
</li>
<?php } ?>
<li>
<a onclick="logOut();" style="background:#F00;" >
<span class="ui-icon ui-icon-circle-close" style="float:left"></span>
Salir del Sistema
</a>
</li>
</ul><li><a href="proyectosEscuela.php">Proyectos de escuela</a></li>

La siguientezona que se añadealcontenedorde zonas es lacorrespondientea
laautenticación del usuario, compuesta por un par decajas paraque se
escribaelnombrede usuario y la contraseña y un botón paraque se envíenlos
datos introducidos alformulariode validación.Si los datos de acceso son
correctos se redirigea lapáginade inicio delusuarioregistrado,sino, se redirigea
esta páginapasando como parámetrola variableerror. Enfunción delvalorde esta
variablese muestra un mensaje de error u otroen lazona delusuario,a
continuacióndelbotón―Enviar‖.
Sien lugarde en lapartepúblicanos encontráramos en laparte privada dela
aplicación,

lo

quese

veríaen

esta

zonasería

elnombrede

usuario

delusuarioconectado y un enlacepara cerrarsesión.
<div id="usuario">
<form

id="logeo"

class="expose"method="post"

62

action="validacionUsuario.php">
<labelfor="tipoUsuario">Tipo</label>
<selectid="tipoUsuario"name="tipoUsuario">
<optionvalue="alumno">Alumno</option>
<option value="profesor">Profesor</option>
<option value="administrador">Administrador</option>
</select>
<br clear="left"/>
<label for="usuarioText">Usuario</label>
<input id="usuarioText" type="text"name="usuario"/>
<brclear="left"/>
<label for="clave">Clave</label>
<input id="clave"type="password" name="clave"/>
<br clear="left">
<inputstyle="width:60px;"id="submit"type="submit" value="Entrar"/>
<?phpif($_GET["error"]=="0"){//loginvacio?>
<span><b>Usuario vacio</b></span>
<?php } if($_GET["error"]=="1"){//clavevacia?>
<span><b>Clavevacia</b></span>
<?php } if ($_GET["error"]=="2"){//login incorrecto?>
<span><b>Usuario incorrecto</b></span>
<?php }elseif ($_GET["error"]=="3"){//Claveincorrecta?>
<span><b>Claveincorrecta</b></span>
<?php } ?>
<scripttype="text/javascript">
jQuery(document).ready(function(){
jQuery('formspan').fadeIn();
});
</script>
</form>
</div>
</div>

Por

último,se

ejecuta

un

scriptparahacer

lapresentación

de

la

informaciónmásdinámica.
<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html("No disponible" );
});
ui.panel.html("Cargando...<imgsrc='_images/0.gif' alt='cargando...'>" );
}
});
});
</script>

63

</body>
</html>

5.3.2 Capa denegocio o lógicade la aplicación
Acontinuaciónse muestra elcontenido de uno delos ficheros que conforman
lacapade negocio. Para poder explicarlo mejor, de lamismamaneraque parala
capa de presentación,he divididoel ficheroy he añadidoun breve texto
explicativo antes de cadauna de las partes en las queha sido dividido.
Se definenlos atributosdelelemento.
<?php
classUsuario extends Persona {
//put your code here
private $nip;
private $login;
private $password;
private $activado;
private $foto;
public function __construct($nip,$login,$password,$activado,$foto) {
$this->nip=$nip;
$this->login=$login;
$this->password=$password;
$this->activado=$activado;
$this->foto=$foto;
}
}
public function getNip() {
return $this->nip;
}
public function getLogin() {
return $this->login;
}
public function getPassword() {
return $this->password;
}
public function getActivado(){
return $this->activado;
}
public function getFoto() {
return $this->foto;
}
?>

64

5.3.3 Capa depersistenciao de datos
Acontinuaciónse muestran lasdistintastablas (figura5.13) que conforman labase
de datos dela aplicación:

Figura 5. 13 Tablas de base de datos

Como se aprecia enla figura 5.13,la basede datos estácompuestapor veinte y
cinco tablas: las tablas con el prefijo vta_ son vista generadas para procesar
con mayor rapidez las consultas, además de que todas las tablas tiene una llave
primario que comienza con el prefijo id

5.4 Evaluación y pruebas
Estafase se centróen la comprobacióndelcorrectofuncionamientodel producto
desarrollado mediante una seriede pruebas. Tras estas tareas se dio por
concluido elproyecto en su versión de producción 1.0.

65

La fase de evaluación y pruebas concluye el ciclo de vida de nuestro proyecto y
lo prepara para subirlo al servidor y que se ejecute. Esta fase mide el nivel de
calidad que ofrece al usuario la aplicación creada. Las herramientas que se
usaron
online

para realizar estas pruebas son gratuitas y las podemos encontrar
en

las

direcciones

http://jigsaw.w3.org/css-validator/,

http://validator.w3.org/ y www.spoon.com /.
5.4.1 Validación deCSS
Dado que se han utilizadohojas de estilo parala interfazde laaplicación,se ha
realizadouna

prueba devalidación

deCSS.

Para

ello,

se ha

utilizado

lapáginawebhttp://jigsaw.w3.org/css-validator/.En cuantoalresultado (figura5.14)
se podría decir quela hoja de estiloha pasado la validacióna medias,yaque
haydos propiedades que elW3Cno reconoce(-moz-border-radius y -webkitborder-radius) peroque son necesariaspara que los bordes de los divs
quehayen lapágina web se vean redondeadosen los navegadores web
Firefox,GoogleChrome,Safariy Opera.

66


Figura 5. 14 Validación css

5.4.2Validación deenlaces
Para

estaprueba

he

utilizado

laherramienta―Verificadorde

vínculos‖delprogramaAdobe Dreamweaver. Dicho softwareverificasihayenlaces
rotos (enlaces incorrectos o queapuntan auna páginaque no existe)en elsitio
web. Elresultado(figura 5.15) de estaprueba hasido óptimo.

Figura 5. 15 Validación de enlaces

5.4.3Validación dela resolución
Durante lafase de especificación derequisitos establecimos que parauna
correcta visualización de la aplicación deberíamos optimizar lapantallaa una
resoluciónde

1280x800

píxeles.

Lo

quesucede

para

resoluciones

menores(640x480 o 800x600 píxeles) es quealgunos elementos (botones sobre
67

todo) no aparecen enla posiciónadecuada.
5.4.4 Validación de navegadores
Es importantede caraalusuario quela aplicación se visualicebien en todos los
navegadores web, o al menos,en los más populares.La aplicación ha sido
implementada y probadacon éxitoen Internet Explorer 8 (23.54%) Firefox
(22.81%), Chrome (9.98%), Safari(5.89%) y Opera(2.23%). Para elloseutilizóla
herramiento online spoon, que tepermite virtualizarnaveadoresweb deforma
quepuedes visualizar lapáginaweb sobre cualquiernavegador sin necesidadde
instalarlo.

Figura 5. 16Validación de navegadores (Microsoft Internet Explorer)

68


Figura 5. 17 Validación de navegadores (Mozilla Firefox)

Figura 5. 18Validación de navegadores (Google Chrome)

Figura 5. 19Validación de navegadores (Safari)

69


Figura 5. 20 Validación de navegadores (Opera)

5.4.5Validación dela seguridad en el accesoala zonadeadministración
Para entraren lazona de administraciónde la aplicación web, elusuario
deberáacceder a través del div situadoen ellapágina, llenando el formulario de
acceso (Figura 5.21) con un nombre de usuarioy contraseñacorrectos. Los
datosson enviados alformulario de validación ―modIndex.php‖ queredirigea
lapágina deiniciopersonal de cada usuario,el sistema devuelveun mensajede
error si sucede alguna de lassiguientes situaciones:
Elusuariono ha escritoellogin.
Elusuario no ha escrito la clave;ellogin no existeen labase de datos.
Elparlogin-contraseña no existe en labase de datos.

70


Figura 5. 21 Formulario de acceso

5.4 Resultados.
Recibiendo la aprobación de titular del departamento de actividades deportivas
y culturales de la UPFIM y después de llevar acabo las evaluaciones y pruebas,
el sistema está listo para ser liberado; cabe aclarar que las pruebas de
usabilidad que se realizaron fueron hechas de manera local, lo que deja margen
al error debido a la configuración de la pc que se usó como host.

71

“CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM”

“CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM”

Recomendados

Recomendados

Más contenido relacionado

Similar a “CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM”

Similar a “CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM” (20)

Último

Último (20)

“CREACIÓN DE UN SITIO WEB PARA GESTIONAR LA INFORMACIÓN DEL DEPARTAMENTO DE ACTIVIDADES DEPORTIVAS Y CULTURALES DE LA UPFIM”