• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
“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”

on

  • 195 views

Trabajo de fin de la carrera de ingeniería en sistemas computacionales. Describe como crear un sistema web.

Trabajo de fin de la carrera de ingeniería en sistemas computacionales. Describe como crear un sistema web.

Statistics

Views

Total Views
195
Views on SlideShare
195
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    “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” Document Transcript

    • 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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
    • Capítulo I. Introducción. 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 documentación del área Computadora personal Procesador de Textos Computadora personal Procesador de Textos 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 Computadora personal Procesador de Textos Software para desarrollo web. como el sistema una vez terminado. 8
    • Capítulo I. Introducción. 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 documentación del área estética visual Computadora personal Procesador de Textos Hojas de estilo (css), del sistema. Documentar el desarrollo del sistema. Facilitar mantenimiento el del documental Computadora personal Procesador de Textos 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
    • Capítulo I. Introducción. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo II: Fundamento teórico. 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
    • Capítulo III: Desarrollo del sistema. 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
    • Capítulo III: Desarrollo del sistema. 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
    • Capítulo III: Desarrollo del sistema. 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
    • Capítulo III: Desarrollo del sistema. 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. 3.1.3.3 Usuario alumno 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. 3.1.3.4 Usuario profesor Este tipo de usuariopodrá listarlos alumnos alos que imparte actividades, listarlos profesores que imparten en eldepartamentoy gestionarlas notas y faltas de asistencia desus alumnos. 3.1.3.5 Usuarioadministrador 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
    • Capítulo III: Desarrollo del sistema. 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
    • Capítulo IV: Fase de elaboración. 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 - 4.1.1.3 Usuario alumno 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
    • Capítulo IV: Fase de elaboración. 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 Listar las actividades en las que se encuentra inscrito Proceso elalumnoconectado. Elegirla actividad de la cualquierever 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 Listar las actividades en las que se encuentra inscrito elalumnoconectado. Elegirla actividad de la cualquierever las faltas de asistenciaque pudieratener Salida Lasfaltas deasistencia 4.1.1.4 Usuario profesor Sielusuarioregistradoes del tipoprofesor entonces puedelistarlos alumnos alos que imparte actividad,listar los profesores queimpartenactividadespara 37
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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 - 4.1.1.5 Usuarioadministrador 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo IV: Fase de elaboración. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. - - 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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?&amp;idUser=<?php echo($idUser);?>"> <span class="ui-icon ui-icon-document" style="float:left"></span> Actividades </a> </li> <li> <a href="moduloDatos/index.php?&amp;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
    • Capítulo V: Fase de construcción, evaluación y pruebas. <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&oacute;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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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><!--Contenedor--> 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. </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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Capítulo V: Fase de construcción, evaluación y pruebas. 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
    • Referencias. Referencias. 1. Universidad Politécnica de Francisco I. Madero. upfim.edu.mx. [En línea] 2013. http://upfim.edu.mx/quienesSomos/misionVision.html. 2. Prince, Rushton. RUP/easy. GUÍA METODOLÓGICA DE DESARROLLO DE SISTEMAS. [En línea] 2004. [Citado el: ] https://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved =0CC0QFjAA&url=http%3A%2F%2Fsvn.assembla.com%2Fsvn%2Ftaller_desar rollo_proyectos_2%2FSACP%2Ftrunk%2FOtros%2520tps%2FTP%25201%25C 2%25B02008%2520-%2520Ayudante%2520Molinari%2520-%2520RUP%. 3. Echeagaray, Dora Alicia Reyes. TENDENCIAS ACTUALES PARA EL DESARROLLO DE SOFTWARE A LA MEDIDA. [En línea] 2010. http://emprendedoresunam.com.mx/revista/wpcontent/uploads/userFiles/124_Tendencias%20actuales%20para%20el%20des arrollo%20de%20software%20a%20la%20medida.pdf. 4. Rizzo, Iván. DOCUMENTACIÓN DE ESTILOS ARQUITECTÓNICOS EN SISTEMAS WEB COLABORATIVOS SENSIBLES AL CONTEXTO. [En línea] 2011. http://www.fceia.unr.edu.ar/lcc/t523/uploads/38.pdf. 5. Tutorial Ajax. [En línea] 2013. http://www.ajaxya.com.ar/. 6. Myphp.net. ¿Qué es php? [En línea] http://php.net/manual/es/introwhatis.php. 72
    • Referencias. 7. Osmosis Latina. Java Server Pages. [En línea] 2008. http://javaweb.osmosislatina.com/curso/jsp.htm. 8. Microsoft. .NET Framework. [En línea] 2013. http://msdn.microsoft.com/esES/vstudio/aa496123. 9. —. Learning ASP.NET. [En línea] 2013. http://www.asp.net/. 10. CASARES, CLAUDIO. Maestros del web. Introducción a SQL. [En línea] 2004. http://www.maestrosdelweb.com/editorial/tutsql1/. 11. ORACLE. MySQL. [En línea] http://www.mysql.com/. 12. Adobe Systems Incorporated. Dreamweaver CC. [En línea] 2013. http://www.adobe.com/mx/products/dreamweaver.html. 13. ORACLE. Información NetBeans IDE. [En línea] 2013. https://netbeans.org/community/releases/61/index_es.html. 14. inc, Google. MVC. [En línea] 2013. http://developer.chrome.com/apps/app_frameworks.html. 15. Alvarez, Jose L. Protocolo HTTP. [En línea] http://www.uhu.es/josel_alvarez/NvasTecnProg/recursos/ProtocoloHTTP.pdf. 16. Barberán, Manuel. Funcionamiento del protocolo TCP/IP. [En línea] 1998. http://www.areas.net/comofunciona/conexion/3.htm. 73
    • Anexo 1 Anexo 1. Glosario: Sitio web. En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web que contiene documentos (páginas web) organizados jerárquicamente. Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos. Metodología. El concepto hace referencia al plan de investigación que permite cumplir ciertos objetivos en el marco de una ciencia. Cabe resaltar que la metodología también puede ser aplicada en el ámbito artístico, cuando se lleva a cabo una observación rigurosa. Por lo tanto, puede entenderse a la metodología como el conjunto de procedimientos que determinan una investigación de tipo científico o marcan el rumbo de una exposición doctrinal. Sistema de información. Un sistema de información es un conjunto de elementos interrelacionados con el propósito de prestar atención a las demandas de información de una organización, para elevar el nivel de conocimientos que permitan un mejor apoyo a la toma de decisiones y desarrollo de acciones. UML.(Unified Modeling Language - Lenguaje Unificado de Modelado). UML es un popular lenguaje de modelado de sistemas de software. Se trata de un 74
    • Anexo 1 lenguaje gráfico para construir, documentar, visualizar y especificar un sistema de software. Entre otras palabras, UML se utiliza para definir un sistema de software. RUP. El Proceso Unificado de Rational (Rational Unified Process en inglés, habitualmente resumido como RUP) es un proceso de desarrollo de software desarrollado por la empresaRational Software, actualmente propiedad de IBM. Junto con el Lenguaje Unificado de Modelado UML, constituye la metodología estándar más utilizada para el análisis, diseño, implementación y documentación de sistemas orientados a objetos. Framework. (Plataforma, entorno, marco de trabajo). Desde el punto de vista del desarrollo de software, un framework es una estructura de soporte definida, en la cual otro proyecto de software puede ser organizado y desarrollado. IDE. (IntegratedDevelopmentEnvironment - Entorno integrado de desarrollo). Aplicación compuesta por un conjunto de herramientas útiles para un programador. Un entorno IDE puede ser exclusivo para un lenguaje de programación o bien, poder utilizarse para varios. Suele consistir de un editor de código, un compilador, un debugger y un constructor de interfazgráfica GUI. Blog. Es un sitio de internet que alberga información de todo tipo la cual se actualiza por el autor y las personas que colaboran en este. 75
    • Anexo 1 DBMS.(Data Base Management System).Son las siglas en inglés para los Sistemas de Gestión de Bases de Datos (SGBD). Bajo este nombre se conoce a productos de fabricantes como Oracle, Sybase, Informix, Ingres, Borland, Microsoft, IBM, etc. Actor. Entidad externa que necesita intercambiar información con el sistema. Un actor puede representar un papel de usuario o a otro sistema. Casos de uso. Secuencia de interacciones general entre uno o más actores y el sistema. Cliente/Servidor. La modalidad o arquitectura Cliente/Servidor es aquella en la que confluyen una serie de aplicaciones basadas en dos categorías que cumplen funciones diferentes (una requiere servicios y la otra los brinda) pero que a la vez, pueden realizar tanto actividades en forma conjunta como independientemente. Esas dos categorías son justamente cliente y servidor. 76