1. Resumen Objetivos Introducción. 3

Transcripción

1 1

2 Índice 1. Resumen Objetivos Introducción Aplicación web para la gestión de una memoria corporativa: reportes de actividades (proyectos) 4.1 Metodología Lenguajes y herramientas utilizados Arquitectura de la aplicación Captura de datos Usuario Proyecto Responsable Casos de uso Agregar usuario Agregar proyecto Agregar responsable Consultas Usuario Proyecto Responsable Objetivos y metas alcanzados Resultados y conclusiones Recomendaciones Bibliografía Anexo: Diagrama E-R

3 1. Resumen El proyecto titulado Aplicación web para la gestión de una memoria corporativa: reportes de actividades (proyectos) que se describe en este reporte fue realizado en los trimestres 14 - P (Del 14 de abril al 16 de julio de 2014) y 14 - O (Del 08 de septiembre al 9 de diciembre de 2014). Dicho proyecto consistió en diseñar e implementar el módulo para capturar los metadatos correspondientes a un proyecto que puede ser de investigación, servicio social o terminal, así como su visualización. Se propuso una estructura XML para el almacenamiento y visualización de dichos metadatos. Queda como trabajo futuro completar el módulo con los cambios y eliminación de proyectos. Cabe mencionar que la información correspondiente a proyectos de investigación en donde participan alumnos y profesores es necesaria para la generación de reportes de actividades individuales o colectivas de los miembros de una memoria de investigación. Se toma como caso de estudio el área de Redes y Telecomunicaciones (RyT) del Departamento de Ingeniería Eléctrica pero la aplicación se diseñó para ser escalable y adaptable a otros contextos. 2. Objetivos General: Diseñar e implementar el módulo para capturar y visualizar proyectos de investigación e incorporarlo en el sistema web existente: gestión de una memoria corporativa. Específicos: 1. Caracterizar la información existente en los proyectos de investigación coordinados por el área de Redes y Telecomunicaciones: usuarios, proyectos y responsables. 2. Proponer una estructura xml para almacenar la información correspondiente a los proyectos de investigación. 3. Proponer una interfaz web para la captura y visualización de datos correspondientes los proyectos de investigación. 4. Incorporar al sistema web existente: gestión de una memoria corporativa el módulo de proyectos desarrollado. 3. Introducción Una organización tiene recursos de información heterogéneos en formato y contenido. Actualmente es indispensable obtener información de tales recursos en el momento y bajo un formato adecuado al contexto. La UAM-I, específicamente en el área de redes y telecomunicaciones, no cuenta aún con una forma eficiente de saber qué proyectos se están realizando y quienes están involucrados en ellos. Por ello, es necesario un sistema web para gestionar en un formato definido la descripción de los proyectos e información sobre quienes los realizan. 3

4 4. Aplicación web para la gestión de una memoria corporativa: reportes de actividades (proyectos) 4.1 Metodología 1. Análisis del problema planteado y de los requerimientos a solucionar. 2. Realizar un bosquejo del sistema para satisfacer los requerimientos indicados. 3. Diseñar el diagrama E-R correspondiente a la gestión de datos identificados. 4. Proponer una interfaz para la captura y visualización (consulta) de datos. 5. Proponer una estructura XML para almacenar los datos. 6. Implementar la aplicación e incorporarla al sistema web existente: gestión de una memoria corporativa. 4.2 Lenguajes y herramientas utilizados Se utilizaron los siguientes lenguajes y herramientas de diseño: HTML5, CSS3, Javascript, PHP, XML, XSD, DOM y Bootstrap. A continuación se da una breve descripción de éstas y en la sección de bibliografía se incluyen enlaces y documentación. a) HTML5 HyperText Markup Language. Es un lenguaje que sirve para transmitir información por Internet a través de un navegador. La versión cinco tiene nuevos atributos, elementos y funciones. Además, agrega un amplio conjunto de tecnologías que permiten aplicaciones web mejores y más diversas. b) CSS3 Cascading Style Sheets. Es un lenguaje que sirve para dar presentación y formato a documentos escritos en un lenguaje de marcado como HTML5. Este lenguaje describe cómo van a ser mostrados los elementos. c) Javascript Es un lenguaje de programación interpretado, es decir, se ejecuta por medio de un intérprete en vez de compilarse. Se usa principalmente en el lado del cliente. d) PHP Es un lenguaje del lado del servidor que se usa principalmente para el desarrollo web dinámico e) XML extensible Markup Language. Es un lenguaje usado para almacenar datos. Fue desarrollado por la World Wide Web Consortium (W3C). f) XSD XML Schema. Es un lenguaje para describir la estructura de los documentos XML de forma precisa. g) DOM. Document Object Model. Es una API útil para manipular documentos HTML y XML. Esta aplicación se ocupó para manipular documentos XML desde PHP. h) Bootstrap Es un framework para HTML, CSS y Javascript que posibilita un desarrollo web front-end más rápido y fácil. 4

5 4.3 Arquitectura de la aplicación Figura 1. Arquitectura de la aplicación Gestión de una memoria corporativa: reporte de actividades (proyectos) A. Interfaz de usuario Es para que el usuario ingrese los datos a almacenarse. Incluye archivos.php (interfazusuario.php, interfazproyecto.php e interfazresponsable.php) y archivos.css proporcionados por el framework Bootstrap. Estas interfaces de usuario se muestran en las figuras 2, 3, y 4. B. Archivos Javascript Sirven para validar que los datos proporcionados tengan el formato correcto. C. Archivos PHP Sirven para validar que no existan duplicados y después almacena la información en documentos xml D. Archivos XML Son la base de datos de la aplicación. En usuario.xml se almacena un nuevo registro por cada nuevo usuario que se va registrando. Así análogamente en el resto de los archivos. E. Archivos XSD Por cada documento xml existe un documento xsd para definir su estructura F. Vistas La información almacenada se puede consultar a través de las vistas. Estas se muestran en las figuras 6, 7 y 8. Por medio de la tecnología DOM se manipulan los archivos.xml, se extraen los datos solicitados, y con PHP se retienen dichos datos y luego se muestran. 5

6 4.4 Captura de datos En la siguiente sección se muestran las principales interfaces de usuario correspondientes a la captura de datos de un Usuario (Fig. 2), Proyecto (Fig. 3) y Responsable (Fig. 4) Usuario Figura 2. Interfaz de usuario para la captura de datos correspondientes a un usuario Proyecto Figura 3. Interfaz de usuario para la captura de datos correspondientes a un proyecto 6

7 4.4.3 Responsable Figura 4. Interfaz de usuario para la captura de datos correspondientes a un responsable Casos de uso Caso de uso: Agregar usuario Descripción del objetivo: Este caso de uso permite añadir un usuario nuevo Flujo principal: Precondición: El usuario está en la página principal 1. El usuario selecciona agregar usuario 2. El sistema muestra el formulario para ingresar los datos del usuario 3. El usuario ingresa su nombre, matrícula o número de empleado, celular, , rol, nivel, tipo de trabajo, laboratorio y equipo asignados. 4. El usuario presiona enviar 5. El sistema valida que los campos estén llenos y en el formato correcto 6. El sistema almacena la información 7. El sistema muestra un mensaje de éxito Flujo excepcional En 4. el sistema encuentra que la matrícula tiene letras a) El sistema muestra el mensaje La matrícula sólo debe tener números b) Regresamos al punto 3. 7

8 Caso de uso: Agregar proyecto Descripción del objetivo: Este caso de uso permite añadir un proyecto nuevo donde los participantes y el profesor a cargo del proyecto ya están registrados. Flujo principal: Precondición: El usuario está en la página principal 1. El usuario selecciona agregar proyecto 2. El sistema muestra el formulario para ingresar los datos del proyecto 3. El usuario ingresa el título, descripción, fecha de inicio y término, profesor y participante(s) del proyecto 4. El usuario selecciona seleccionar archivo 5. El sistema abre una ventana para elegir un archivo 6. El usuario elige un archivo y presiona aceptar 7. El sistema muestra en la misma página (al lado de seleccionar archivo ) en nombre del archivo elegido 8. El usuario presiona enviar 9. El sistema valida que los campos estén llenos y en el formato correcto 10. El sistema almacena la información y guarda una copia del archivo seleccionado en la carpeta htdocs\archivos 11. El sistema muestra un mensaje de éxito Flujo alternativo En 4. el usuario presiona agregar otro participante a) El sistema muestra una etiqueta que dice participante y un campo de texto para ingresar el nombre y matrícula. b) Regresamos al punto 4. Flujo excepcional En 10. el sistema encuentra que falta un campo a) El sistema muestra la ventana agregar proyecto junto con un mensaje de que falta el campo correspondiente b) Regresamos al punto 3. 8

9 Caso de uso: Agregar responsable Descripción del objetivo: Este caso de uso permite añadir un responsable nuevo Flujo principal: Precondición: El usuario está en la página principal 1. El usuario selecciona agregar responsable 2. El sistema muestra el formulario para ingresar los datos del responsable 3. El usuario ingresa el nombre, número de empleado, celular, , área, y nivel 4. El usuario presiona enviar 5. El sistema valida que los campos estén llenos y en el formato correcto 6. El sistema almacena la 7. El sistema muestra un mensaje de éxito Flujo excepcional En 4. el sistema encuentra que el nombre tiene números a) El sistema muestra el mensaje El nombre sólo debe tener letras y espacios b) Regresamos al punto Vistas En la siguiente sección se muestran las principales vistas correspondientes a los Usuarios (Fig. 5), Proyectos (Fig.6) y Responsables (Fig. 7) Usuario Figura 5. Muestra los usuarios registrados 9

10 4.5.2 Proyecto Figura 6. Muestra los proyectos registrados Responsable Figura 7. Muestra los responsables registrados 5. Objetivos y metas alcanzados Los objetivos planteados en este proyecto de investigación fueron alcanzados a través de las siguientes actividades: 1. Caracterizar los atributos de un usuario, proyecto y responsable que están involucrados en el desarrollo del proyecto. 2. Establecer una estructura xml por cada ente para almacenar los registros. 3. Diseñar interfaces de usuario para la captura de datos. 4. Implementar el diseño en un módulo para poder dar de alta usuarios, proyectos y responsables; y consultar los datos ya existentes. 10

11 6. Resultados y conclusiones Realizar este proyecto me brindó la oportunidad de aplicar metodologías vistas a lo largo de la carrera: recabar los requerimientos y entender que quiere el cliente, realizar un diseño y un bosquejo de las interfaces en base a los requerimientos, entender qué información necesita ser almacenada y, hacer un diagrama entidad-relación para finalmente implementarlo. Para tal actividad, tuve que investigar sobre el framework, Bootstrap, para eficientar la codificación. 7. Recomendaciones El módulo se diseñó para que sea escalable, por lo que se sugiere robustecerlo con nuevas funcionalidades, por ejemplo, que pueda subir archivos más grandes respecto a los que actualmente puede subir. 8. Bibliografía Libros 1. Myer, Thomas Myer. No Nonsense XML Web Development With PHP. SitePoint, Suehring, Steve, y Valade, Janet. PHP, MySQL, JavaScript & HTML5 All-in-One for Dummies. John Wiley & Sons, Harris, Andrew. PHP 6/MySQL Programming for the Absolute Beginner. Cengange Course Technology, Web 1. Documentación y descarga del framework Bootstrap. Bootstrap. [citado el 7 de enero de 2015]: disponible en 2. Referencias, guías y tutoriales sobre HTML. HTML. [citado el 7 de enero de 2015]: disponible en 3. Información sobre cómo redireccionar un documento html desde php. Métodos para redireccionar una página web. [citado el 7 de enero de 2015]: disponible en 4. Información sobre XML. XML for PHP developers. [citado el 7 de enero de 2015]: disponible en 5. Guías sobre HTML5. HTML5. [citado el 7 de enero de 2015]: disponible en 6. Documentación sobre CSS. CSS. [citado el 7 de enero de 2015]: disponible en 7. Manual de PHP. Manual de PHP. [citado el 7 de enero de 2015]: disponible en 11

12 8. Información sobre cómo editar documentos XML desde PHP con DOM. Como ver, crear y editar XML y HTML en PHP con DOMDocument. [citado el 7 de enero de 2015]: disponible en 9. Información sobre DOM. PHP XML DOM Parser. [citado el 7 de enero de 2015]: disponible en Información sobre cómo subir archivos con PHP. PHP subir archivos. [citado el 7 de enero de 2015]: disponible en 9. Anexo Diagrama E-R 12