Portal web para ONG Scout de Mislata

2011 PROYECTO FINAL DE CARRERA PORTAL WEB PARA ONG SCOUTS DE MISLATA Autora: Paola Raquel Sabogal Trujillo Directora: María Luisa Llorens Agost Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 2 ÍNDICE ................................................................................................ 1 1 INTRODUCCIÓN .................................................................... 4 1.1 Sobre el proyecto final de carrera ....................................... 4 1.2 Estimación del tiempo ....................................................... 4 1.3 Sobre la organización........................................................ 4 1.4 Estructura del proyecto ..................................................... 5 1.4.1 Análisis de la realidad de los sitios web del sector ......... 5 1.4.2 Planificación de actividades ........................................ 5 1.4.3 Descripción general del sistema .................................. 6 1.4.4 Especificación conceptual ........................................... 6 1.4.5 Modelo de implementación ......................................... 6 1.4.6 Desarrollo e implementación ...................................... 6 1.4.7 Creación de scripts ................................................... 7 1.4.8 Modelo de presentación ............................................. 7 1.4.9 Creación de interfaces ............................................... 7 1.4.10 Pruebas de caja negra ............................................... 7 1.4.11 Entrega de documentación ......................................... 7 1.4.12 Anexos y documentación útil ...................................... 7 2 ANÁLISIS DE LA REALIDAD .................................................... 8 2.1 Análisis de la realidad de la organización ............................. 8 2.2 Análisis de la realidad de otros sitios web del sector ........... 10 2.2.1 Secciones más comunes .......................................... 10 3 PLANIFICACIÓN .................................................................. 14 3.1 Estimación de tiempos .................................................... 14 3.1.1 Fase de diseño ....................................................... 14 3.1.2 Fase de desarrollo................................................... 15 3.1.3 Fase de pruebas ..................................................... 15 3.1.4 Fase de documentación ........................................... 15 3.2 Plan de proyecto ............................................................ 15 3.2.1 Visión general ........................................................ 15 3.2.2 Producto final ......................................................... 16 3.2.3 Fases del proyecto y ciclo de vida del proyecto ........... 16 3.3 Administración del alcance del proyecto ............................ 19 3.3.1 Iniciación ............................................................... 19 4 ESPECIFICACIÓN DE REQUISITOS ........................................ 23 4.1 Propósito ....................................................................... 23 4.2 Ámbito .......................................................................... 23 4.3 Requisitos de gestión de información ................................ 23 4.3.1 Información de usuarios .......................................... 23 4.3.2 Información de contenidos estáticos .......................... 24 4.3.3 Información de contenidos dinámicos ........................ 24 4.4 Requisitos de funcionalidad .............................................. 25 4.4.1 Funcionalidades para usuarios del sistema ................. 25 4.5 Requisitos de interfaz de usuario ...................................... 33 4.6 Definiciones y acrónimos ................................................. 34 4.6.1 Definiciones ........................................................... 34 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 3 4.6.2 Acrónimos ............................................................. 34 4.7 Referencias ................................................................... 34 5 ESPECIFICACIÓN CONCEPTUAL ............................................ 35 5.1 Introducción .................................................................. 35 5.2 Modelado OOWS ............................................................ 35 5.3 Diseño de las estructuras de datos ................................... 35 5.4 Modelo de navegación ..................................................... 37 5.4.1 Introducción........................................................... 37 5.4.2 Mapa navegacional de usuario Visitante ..................... 39 5.4.3 Mapa navegacional de usuario Educando ................... 41 5.4.4 Mapa navegacional de usuario Comité ....................... 43 5.4.5 Mapa navegacional de usuario Scouter ...................... 45 5.4.6 Mapa navegacional de usuario Administrador ............. 46 5.5 Diseño de formularios ..................................................... 47 6 MODELO DE IMPLEMENTACIÓN ............................................. 49 6.1 Herramientas utilizadas ................................................... 49 6.2 Bases de datos ............................................................... 49 7 MODELO DE PRESENTACIÓN ................................................ 54 7.1 Patrón de disposición de la información. ............................ 54 7.2 Patrón de ordenación de datos. ........................................ 54 7.3 Patrón de paginación de la información. ............................ 54 7.4 Estrategia de presentación de la interfaz Web. ................... 55 7.4.1 Zonas de la interfaz ................................................ 56 8 PRUEBAS DE CAJA NEGRA .................................................... 59 9 CONCLUSIONES .................................................................. 61 9.1 Sobre el proyecto final de carrera ..................................... 61 9.2 Sobre el desarrollo de la aplicación ................................... 61 9.2.1 Objetivos cumplidos ................................................ 62 9.3 Conclusiones personales .................................................. 63 10 AGRADECIMIENTOS .......................................................... 64 11 Bibliografía ....................................................................... 65 12 ANEXOS .......................................................................... 66 12.1 Nodos de navegabilidad ................................................ 66 12.1.1 Usuario visitante: nodos de navegabilidad ................. 66 12.1.2 Usuario Administrador ............................................. 68 12.2 Manual de usuario del portal web ................................... 71 12.3 Interfaz del portal ........................................................ 91 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 4 1 INTRODUCCIÓN El presente documento es la memoria del proyecto final de carrera de tipo B elegido por la alumna, del cual será encargada de su diseño y programación. El cliente benefactor será el grupo scout Impeesa XV de Mislata perteneciente a (ASDE Federación de Asociaciones de Scouts de España). Este proyecto final de carrera engloba el desarrollo y la implementación de la aplicación. Por ello, en esta memoria se pueden encontrar aspectos más propios del desarrollo de aplicaciones que de la dirección de proyectos informáticos, al ser una organización sin ánimo de lucro. 1.1 Sobre el proyecto final de carrera El primer objetivo de este proyecto final de carrera consiste en el diseño e implementación del portal web para la organización. En esta memoria se puede ver cómo se ha llevado un continuo control del mismo, por lo que la elaboración de esta memoria puede considerarse uno de los objetivos del proyecto. Ya que existe una limitación de tecnología, se puede decir que un segundo objetivo es usar los protocolos más actuales en la implementación de páginas web como HTML estricto para que se cumplan todos los estándares de W3C (). Para terminar, y como un buen medidor del éxito del proyecto final de carrera, el tercer objetivo es obtener la mayor nota posible, hasta un máximo de 9 puntos, ya que el presente proyecto no va a ser calificado por el tribunal evaluador. 1.2 Estimación del tiempo El tiempo de proyecto viene limitado claramente por el número de horas que, supuestamente, debe cumplir cualquier proyecto final de carrera. Ya que el número de créditos del proyecto son 6 y que cada crédito implica 10 horas de trabajo en clase y entre 10 y 14 horas de trabajo en casa, la realización de este proyecto llevará un tiempo de aproximadamente 144 horas. El reparto de proyecto se muestra en la siguiente tabla. Tarea Duración Repaso de tareas relacionadas con el proyecto (recordatorio de aspectos acerca de la dirección, la gestión, el diseño y el desarrollo de proyectos informáticos) 10 horas Desarrollo del proyecto 90 horas Recopilación de material de apoyo para la realización de la memoria (apuntes de clase y demás bibliografía) 4 horas Preparación de la memoria del proyecto 40 horas TOTAL 144 1.3 Sobre la organización Debido al desconocimiento sobre la existencia de algunos grupos juveniles, así como de lo que son y su sentido de ser, el grupo Scout Impeesa XV de Scouts Valencians de ASDE cree que es una buena idea aprovechar los medios tecnológicos de que se dispone actualmente para llegar a todas aquellas personas interesadas Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 5 en actividades al aire libre y mostrarles el marco educativo que rodea a este tipo de instituciones. El objetivo de este proyecto es desarrollar un portal Web para el grupo scout tanto para darse a conocer y mostrar a los usuarios de internet las intenciones de una organización sin ánimo de lucro, como para unificar, centralizar y gestionar de forma adecuada la información correspondiente a la organización. Para llevar un seguimiento de los datos de los miembros pertenecientes al grupo scout, Impeesa XV quiere utilizar una herramienta de gestión personalizada y que esté siempre disponible en un sitio Web, de manera que cualquier miembro del grupo con suficiente autoridad pueda acceder a ella y realizar los cambios oportunos sobre el contenido. Asimismo, poder añadir aquella información de carácter actual para que, en todo momento, cualquier miembro pueda llegar a la misma e informe de los acontecimientos. Para involucrar al sector más joven del grupo, la organización quiere facilitar ciertas acciones sobre la aplicación para que ellos puedan aportar sus experiencias dentro de la organización y sean mostradas a los usuarios de Internet en general. Además, los miembros del comité de padres del grupo realizan ciertas tareas burocráticas - que hasta ahora se venían haciendo por una parte en soporte no digital y por otra parte en soporte digital -, pero que no pueden ser actualizadas por varios miembros de forma centralizada por la imposibilidad de acceder a la información desde distintos lugares, hecho que provoca la sobrecarga de trabajo para algunos miembros. La aplicación que da vida a este proyecto tiene como objetivo dar solución a dicho problema. Para dar comienzo al proyecto es importante comentar la situación y contexto del mismo. La organización cliente es real y los planteamientos de necesidad que ha de suplir la aplicación también lo son. Partiendo de esta base, se van a plantear a continuación todos aquellos puntos que tienen importancia para el desarrollo del proyecto. 1.4 Estructura del proyecto Los proyectos son tareas únicas e involucran cierto nivel de incertidumbre. Las organizaciones ejecutoras de proyectos, generalmente, dividen cada proyecto en distintas fases. De manera colectiva estas fases se conocen como el ciclo de vida del proyecto. En la propuesta realizada, el proyecto se divide en las siguientes fases: 1.4.1 Análisis de la realidad de los sitios web del sector Breve análisis de la realidad de los sitios Web existentes en el sector. Esta fase consistirá tanto en el estudio de los contenidos más comunes y generales aplicables a las páginas Web de organizaciones juveniles, como de las secciones más habituales en los menús de navegación o características relevantes. Además, en esta etapa se evaluará de forma objetiva cuáles serán las necesidades principales de los usuarios potenciales. 1.4.2 Planificación de actividades Planificación de las diferentes actividades de las que constará el proyecto:  Estimación de tiempos requeridos en el desarrollo de la aplicación de gestión. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 6  Realización de un plan de proyecto mediante diagramas y seguimiento del mismo para comprobar su correcto desarrollo y funcionamiento. 1.4.3 Descripción general del sistema Descripción general del sistema, utilizando el estándar (2000) que establece la especificación de los siguientes requisitos:  Requisitos de gestión de información.  Requisitos funcionales.  Requisitos de interfaz de usuario. 1.4.4 Especificación conceptual Se usarán los modelos y diagramas propios de OOWS (Fons Cors) para la especificación formal de la arquitectura necesaria para gestionar sitios Web dinámicos para organizaciones juveniles. Las líneas generales para la especificación se basarán en:  El desarrollo del panel de gestión.  Diseño de la interfaz gráfica.  Creación de bases de datos.  Diseño de las estructuras de datos que van a ser necesarias en el desarrollo, así como en la interacción con los usuarios.  Diseño de formularios. 1.4.5 Modelo de implementación Se detallarán tanto las herramientas utilizadas y el modelo físico de las bases de datos como la estructura de ficheros de las distintas páginas Web para un mejor entendimiento de la navegabilidad del portal. 1.4.6 Desarrollo e implementación Como objetivo de este apartado cabe destacar los requisitos técnicos que debe cumplir la aplicación en cuanto al alojamiento web.  Ámbito La aplicación funcionará sobre un servidor de Internet que usa tecnologías como PHP y MySQL sobre un sistema operativo Linux. Para el acceso a la aplicación, la organización tiene contratado con su proveedor un dominio “.com” que puede ser accedido desde cualquier navegador web con conexión a internet. La actualización y mantenimiento de toda la información que contendrá el portal web correrá por cuenta del personal encargado de la organización. Cabe destacar que dependiendo del tipo de rol del usuario que acceda al portal se podrá hacer mantenimiento de más o menos información dentro de las distintas secciones de la aplicación.  Visión global La aplicación servirá tanto para que cualquier usuario de internet pueda conocer el sentido de la organización como para los miembros de la misma. Se permitirá que los usuarios interaccionen con la organización a través de la propia aplicación facilitando el contacto entre usuarios y miembros del grupo scout. Internamente a la organización, la aplicación dará soporte a la gestión administrativa de forma centralizada. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 7 1.4.7 Creación de scripts Creación de scripts que generen automáticamente los documentos en formato .pdf. 1.4.8 Modelo de presentación Con este apartado se pretende adecuar el aspecto de las diferentes pantallas o páginas web de forma intuitiva y llamativa para el usuario. Este modelo captura los requisitos abstractos de presentación de la información del portal web siguiendo los patrones a continuación mostrados:  Patrón de disposición de la información.  Patrón de ordenación de datos.  Patrón de paginación de la información.  Patrón de orden de aparición.  Estrategia de presentación de la interfaz Web. 1.4.9 Creación de interfaces Creación de las interfaces del programa mediante hojas de estilo a partir de los resultados de aplicar los patrones del modelo de presentación. 1.4.10 Pruebas de caja negra Las pruebas de caja negra sirven para validar la calidad del código y el correcto funcionamiento de las diferentes funcionalidades de la aplicación Web. Las pruebas de usabilidad (intuición) se usan para estimar la aceptación por parte de los clientes del producto. En todo momento el código será validado para el cumplimiento de los estándares utilizados. Se probará la seguridad de las bases de datos para la concurrencia múltiple de usuarios y los datos de carácter personal serán protegidos mediante encriptación. 1.4.11 Entrega de documentación Entrega de la documentación que se haya ido generando durante el proyecto, manuales de usuario (si procede), propuestas de posibles ampliaciones, mejoras y conclusiones. 1.4.12 Anexos y documentación útil Se añadirán anexos a la memoria del proyecto con todas aquellas iteraciones realizadas en la elaboración del mismo, como pueden ser los prototipos realizados antes de la versión final. Y, por último, se añadirá la documentación que se considere potencialmente útil, pero que no haya sido totalmente utilizada en la realización del proyecto. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 8 2 ANÁLISIS DE LA REALIDAD 2.1 Análisis de la realidad de la organización Tan importante es conocer las necesidades más obvias de la organización como el estado actual en que se encuentra para detectar nuevas necesidades y dirigir el proyecto a la mejor solución posible. Con 50 miembros listados, el grupo scout es una asociación juvenil de tamaño medio-pequeña. Constantemente están necesitados de nuevos integrantes y las campañas de integración no van más allá del boca a boca y el buzoneo. La continuidad de la organización depende siempre del nivel de compromiso de los integrantes. Aumentar y consolidar el número de miembros es tarea básica y compete a los organizadores. El comité de padres y los educadores tienen la tarea de extender los horizontes de la organización más allá de los límites geográficos de la localidad. La ubicación del local social en que se realizan gran parte de las actividades no es lo suficientemente visible como para que nadie más que los vecinos cercanos puedan ver de cerca lo que allí se realiza. A lo anterior se añade el concepto que se tiene de la organización por el sector más joven de la población. A nivel tecnológico, la organización no dispone de conexión a internet. Tienen 3 equipos conectados en red local para poder trabajar. Sin embargo sí poseen una página web que actualmente está en desuso por ausencia de la persona que la administraba. La organización desea cambiar drásticamente el contenido y el diseño de su web actual ya que la consideran muy oscura a la vista y poco intuitiva en su navegación. Esto repercute negativamente en la imagen que ofrece al usuario web que no conoce nada de la misma. A continuación se muestra el aspecto que actualmente ofrece la página web del grupo Scout: Se puede observar en la imagen anterior que el menú de navegación es poco intuitivo. Se ha enmarcado en 4 recuadros enumerados lo más destacable del diseño de presentación de la web actual de la organización. 1 2 3 4 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 9 En el recuadro superior izquierdo, marcado como (1) se encuentran los menús generales de la web. No ofrecen notas aclaratorias a simple vista. El usuario está obligado a pinchar sobre cada icono para poder saber de qué está compuesto cada menú. Al pinchar sobre cada icono del recuadro (1) se despliegan un grupo de estrellas que se visualizan en el recuadro (2) que indican los submenús correspondientes. En el recuadro (3) aparece el título de cada menú que se ha pinchado previamente y al pasar el cursor por encima de cada estrella se lee el título de cada submenú. En el recuadro inferior marcado como (4) aparece el contenido de dicha sección. El contenido de la página web antigua muestra en exceso la información. Se usa un lenguaje muy técnico en ocasiones y para el usuario desconocedor de la asociación puede resultar extraño e ininteligible. La disposición dentro de los marcos de información son correctos y mantienen un patrón lógico. Los menús y submenús actuales de la web del grupo scout son: Rumbo al Impeesa: Se compone de dos submenús:  Contacto: muestra la información del emplazamiento del local de reuniones y datos sobre la forma de contactar.  Libro de visitas: aquí viene incrustada una aplicación externa que realiza la funcionalidad del libro de visitas a modo de comentarios ordenados por fecha descendente. Así los comentarios más actuales están al principio. El comentario más actual data de 2010. Foro: es un foro de php externo editado para mantener el aspecto de la web. Ha dejado de usarse desde el año 2010.Al ser un foro gratuito y de libre acceso, durante el tiempo que ha estado activo se han tenido que eliminar numerosos comentarios desagradables que usuarios anónimos dejaban para divertirse o causar molestia a los miembros de la organización. Nuestro territorio: se compone por seis submenús:  Qué hacemos: explica la filosofía del grupo y el público al que va dirigido.  Asociación: se muestra información referente a la federación a la que pertenece la asociación y enlaces a otras asociaciones de la comunidad valenciana.  Jefe de grupo: muestra un mensaje de bienvenida del coordinador de la asociación.  Nuestra ciudad: habla de la localidad en la que se encuentra emplazada y sus datos territoriales.  Uniformidad: apartado que informa sobre la ropa que se debe llevar una vez se pertenezca a la organización.  Dónde acampamos: muestra información sobre lugar de acampada ya visitados y datos referentes a instalaciones de los mismos. Legado: menú que contiene cuatro submenús:  Baden Powell: muestra historia sobre el fundador del movimiento scout en el mundo.  Movimiento scout: muestra la historia a nivel mundial y luego a nivel de España y sus secciones.  Noticias: muestra las noticias del grupo scout.  Viejos hermanos: habla de antiguos miembros del grupo scout. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 16 La fecha de inicio del proyecto se estima en 1 de julio de 2011. La fecha de fin de proyecto se ha estimado a 29 de Agosto de 2011 por ausencia durante la segunda quincena de julio y primera de agosto de los miembros del grupo scout. 3.2.2 Producto final Un producto es cualquier cosa que se puede ofrecer a un mercado para satisfacer un deseo o una necesidad. En ámbitos de software se entiende por producto final como la aplicación terminada y funcional que el cliente adquiere. El conjunto de entregables son:  Aplicación terminada y funcional.  Documentos de soporte, manual de usuario. 3.2.3 Fases del proyecto y ciclo de vida del proyecto El cumplimiento de los objetivos de un proyecto es la tarea más complicada de su elaboración. Gracias a la división en fases, se puede tomar un control más exhaustivo durante el ciclo de vida del proyecto. Estas fases serán usadas para la evolución del desarrollo del proyecto actual. Características de las Fases del Proyecto Cada fase del proyecto está marcada por la terminación de una o más entregas. Una entrega es un tangible, un producto de trabajo verificable tal como un estudio de factibilidad, un detalle de diseño, o un prototipo que trabaje. Las entregas, y por tanto las fases, son parte generalmente de una secuencia lógica diseñada para asegurar una definición apropiada del producto del proyecto. La conclusión de una fase de proyecto está generalmente marcada por la revisión tanto de las entregas como del desempeño del proyecto para poder (a) determinar si el proyecto debe continuar a su próxima fase y (b) detectar y corregir errores de manera eficiente. Estas revisiones de final de fase generalmente se llaman salidas de fase, puertas de fase o puntos muertos. Cada fase de proyecto normalmente incluye una serie definida de productos de trabajo diseñados para establecer el nivel deseado de control administrativo. La mayoría de estos ítems están relacionados con la entrega de la fase primaria, y las fases típicamente toman sus nombres de estos ítems: requerimientos, diseño, construcción, texto, comienzo, entrega, y otros como sea apropiado. Características de Ciclo de Vida del Proyecto El ciclo de vida del proyecto sirve para definir el comienzo y el final de un proyecto. Por ejemplo, cuando una organización identifica una oportunidad a la que le gustaría responder, autorizará un estudio de factibilidad para determinar si debe adoptar el proyecto. La definición del ciclo de vida del proyecto determinará si el estudio de factibilidad será tratado como la primera fase de vida del proyecto o como un proyecto independiente. La definición de ciclo de vida del proyecto determinará también qué acciones de transición se incluirán al final del proyecto y cuáles no. De esta manera, la determinación del ciclo de vida del proyecto puede ser usado para enlazar el proyecto a operaciones sucesivas de la organización ejecutora. La secuencia de fase definida por la mayoría de los ciclos de vida del proyecto generalmente implica algún tipo de transferencia en tecnología o intercambios Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 17 tales como los requerimientos para diseñar, construcción para operaciones o diseño para manufactura. Las entregas de la fase precedente son usualmente aprobadas antes de que comience el trabajo en la fase siguiente. Sin embargo, una fase subsiguiente es a veces comenzada antes de la aprobación de las entregas de la fase anterior cuando los riesgos involucrados se vuelven aceptables. Esta táctica de solapamiento de fases muchas veces es llamada “Fast Tracking”. Los ciclos de vida del proyecto generalmente definen:  Qué trabajo técnico debe ser hecho en cada fase.  Quién debe estar involucrado en cada fase. Las descripciones de los ciclos de vida del proyecto pueden ser o muy generales o muy detallados. Las descripciones altamente detalladas tienen muchas formas como tablas y lista de chequeo para proveer estructura y consistencia. Tales aproximaciones de detalle son llamadas a veces metodologías de administración de proyectos. La mayoría de las descripciones de ciclo de vida del proyecto comparten un número de características comunes:  Los niveles de empleados y costos son bajos al comienzo, más altos hacia el final, y caen rápidamente a medida que se llega a la finalización.  La probabilidad de completar exitosamente el proyecto es más bajo, y por lo tanto el riesgo e incertidumbre son altos, al comienzo de éste. La probabilidad de completarlo con éxito generalmente se vuelve más grande, de forma progresiva, a medida que el proyecto continúa.  La habilidad de los partidos interesados para influenciar las características finales del producto del proyecto y su costo final son más altas al comienzo y se vuelven progresivamente más bajas a medida que el proyecto continúa. La contribución más grande de este fenómeno es que los costos de cambio y de corrección de errores generalmente se incrementan a medida que el proyecto continúa. Se debe tener cuidado para distinguir entre el ciclo de vida del proyecto y el ciclo de vida del producto. Por ejemplo, un proyecto desarrollado para introducir una nueva computadora al mercado es solo una fase del ciclo de vida de un producto. A pesar de que muchos ciclos de vida del proyecto tienen nombres de fases similares con trabajo similar requerido para los productos, muy pocos son idénticos. La mayoría tienen cuatro o cinco fases pero algunos tienen nueve o más. Aún dentro de una sola área de aplicación pueden haber variaciones significativas - un ciclo de vida de desarrollo de software de una organización puede tener una sola fase de diseño mientras que la de otra organización puede tener fases distintas para el diseño funcional y de detalle. En este proyecto, el ciclo de vida y las fases del proyecto quedan representados en el siguiente diagrama. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 18 FASE PRELIMINAR: Conocimiento de las necesidades del cliente. ▪Formulación del proyecto. ▪Estudio de factibilidad FASE DE PLANIFICACIÓN: ▪Elaboración de un programa, marcar hitos y fechas. ▪Presupuesto. ▪Estudio de costes y tiempo. ▪Contratación. Identificación del problema Programa de ejecución FASE DE ESTUDIO PREVIO: ▪Elaboración de un documento que describa a realidad de la asociación y cuáles son las secciones más comunes en sitios web de asociaciones de scouts en España. Estudio FASE DE ANÁLISIS: ▪Identificación de objetivos a conseguir. ▪Planificación detallada. Objetivo FASE DE ESPECIFICACIÓN: ▪Elaboración de documentación técnica acerca del proyecto. ▪Creación de documentación de especificación de requisitos. ▪Diagramas UML. ▪Diagramas OOWS FASE DE DISEÑO: ▪Diseño de bases de datos (E-R). ▪Diseño de la presentación web (OOWS). ▪Diseño de las interfaces (CSS). ▪Permisos (Visitantes-Usuarios-Administradores). ▪Diseño de pruebas. Diagrama (E-R) Estructura de ficheros Hola de estilos CSS Diagramas de interfaz web OOWS FASE DE DESAROLLO: ▪Programación de la aplicación. FASE DE PRUEBAS: ▪Búsqueda de errores funcionales o de código. Ejecutable Informe de pruebas FASE DE DOCUMENTACIÓN: ▪Documentación y manuales Informe de pruebas FASE DE CIERRE: ▪Elaboración del documento de cierre del proyecto. Informe de pruebas FASE DE CONTROL Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 19 3.3 Administración del alcance del proyecto La administración del alcance del proyecto incluye los procesos requeridos para asegurar que el proyecto incluye todo el trabajo requerido, y sólo el trabajo requerido, para completarlo exitosamente. Se preocupa principalmente de definir y controlar qué se incluye o no en el proyecto. Los principales procesos de la administración del alcance del proyecto interactúan entre ellos y con otros procesos de otras áreas de conocimiento. Cada proceso puede implicar el esfuerzo de uno o más individuos, o grupos de individuos basado en las necesidades del proyecto. Cada proceso aparece normalmente al menos una vez en cada fase del proyecto. La terminación del alcance del producto se mide con respecto a sus requerimientos mientras que la terminación del alcance del proyecto se mide frente al plan. Ambos tipos de administración de alcance deben estar bien integrados para asegurar que el trabajo del proyecto resultará en la entrega del producto especificado. 3.3.1 Iniciación La iniciación es el proceso de reconocer formalmente que un nuevo proyecto existe o que un proyecto existente debe continuar a su siguiente fase. Esta iniciación formal concatena el proyecto con el trabajo en marcha de la organización ejecutora. En algunas organizaciones, un proyecto no es formalmente iniciado hasta después de la terminación de un estudio de factibilidad, un plan preliminar, o algún otro tipo de análisis equivalente que en sí fue iniciado por separado. Algunos tipos de proyectos, en especial proyectos de servicio interno y proyectos de desarrollo de nuevos productos, son iniciados de manera informal y una cantidad limitada de trabajo es ejecutada para asegurar los permisos necesarios para su iniciación formal. Los proyectos son autorizados típicamente como resultado de uno o más de los siguientes eventos:  Una demanda del mercado.  Una necesidad del negocio.  Una demanda de un cliente, (Supuesto en el que se basa este proyecto).  Un avance tecnológico.  Un requerimiento legal. Estos estímulos también se pueden llamar problemas, oportunidades, o requerimientos del negocio. El tema central de todos estos términos es que la administración debe tomar una decisión acerca de cómo responder a ellos. Descripción del proyecto El producto conseguido al concluir este proyecto es un portal web realizado en los lenguajes de programación HTML, PHP, MySQL y CSS de forma que puede ser auto gestionado por los propios miembros de la asociación cliente a través de internet. Por petición del cliente, la programación se ha optimizado para su visualización a través del navegador Mozilla Firefox en su versión 6.0.2 por ser el navegador por excelencia de todos los miembros de la asociación. El cliente no necesita tener conocimientos avanzados en informática para modificar el contenido del portal. Es suficiente aplicar un pensamiento intuitivo de navegabilidad a través de internet para acceder a las distintas secciones que permiten la modificación del contenido. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 20 La interfaz gráfica queda centrada en el navegador web dejando a cada lado un espacio no usable a modo de tapiz. El ancho estipulado para el contenido es de 962 píxeles. Este espacio se divide en cuatro zonas principales:  Zona superior: compuesta por el logo de la asociación y el título del portal web. Incluye también en la parte derecha el enlace a la identificación o registro de usuarios del sitio. El espacio que se dedica a esta zona es de 184 píxeles de alto.  Zona sub-superior: espacio reservado para los distintos menús de contenido del sitio web que son 7: Conócenos, Secciones, Galerías, Infórmate, Descargas, Recursos y Contactos.; simulando botones para facilitar un uso intuitivo. A esta zona se han dedicado 32 píxeles.  Zona central: Dispone el contenido de cada menú/submenú. Como el contenido no es excesivo se deja en la parte izquierda una imagen representativa de la asociación de 258 píxeles de ancho para dar un toque más juvenil pero elegante al aspecto de la interfaz web.  Zona inferior: Contiene enlaces de políticas de uso del sitio como: Aviso legal, Política de privacidad y Contacto.  Pie de web: Está en la parte inferior del tapiz de la interfaz, contiene la dirección postal del local de la asociación y la dirección de correo electrónico de la misma. La siguiente figura muestra la distribución elegida por el cliente. tapiz Zona Superior tapiz Zona de menús Imagen representativa Contenido Zona inferior Pie de web Para el acceso a la gestión del contenido del portal se crean distintos tipos de usuario registrado que una vez identificados a través de un formulario de acceso que se encuentra en la parte derecha dentro de la zona superior, crea una sesión de usuario mediante el tratamiento de sesiones en PHP. (The PHP Group) Cuatro tipos de usuario con diferentes privilegios que se heredan desde el usuario básico o educando hasta el usuario Administrador del sistema, son la forma de acceder a la gestión del portal web. El usuario Educando puede principalmente añadir/modificar fotos dentro de las galerías que él mismo haya subido al sitio web. Estas fotos añadidas o modificadas Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 21 deberán ser posteriormente validadas por usuarios con privilegios más avanzados. De esta forma la asociación se asegura de cumplir con la protección de la intimidad y la imagen del menor recogida en el artículo 4 de la Ley Orgánica 1/1996 (gobierno de España). Este privilegio será otorgado a los miembros jóvenes que están en condición de educandos dentro de la asociación. La edad mínima para este privilegio está por revisarse dentro de los órganos de gobierno de la misma. El usuario Comité puede hacer todo lo que el usuario Educando puede hacer añadiendo otros privilegios como: añadir/modificar/eliminar noticias; añadir/eliminar documentos para descarga; validar fotos subidas por usuarios de tipo Educando, añadir/modificar/eliminar actividades. Este tipo de usuario está pensado para los miembros del comité de grupo compuesto principalmente por padres, madres o demás familiares de los propios educandos de la asociación. El usuario Scouter engloba los privilegios de los usuarios anteriores Comité y Educando, además de otras tareas como añadir/modificar/eliminar recursos; añadir/modificar/eliminar contenido dentro del subgrupo de trabajo en que la persona realiza su labor como educador dentro de la organización. Queda dicho que este privilegio se otorga a miembros educadores por defecto. El usuario Administrador realiza todas las tareas posibles dentro del panel de gestión del portal web pudiendo además de gestionar todas las secciones, validar todos los ficheros subidos al sitio y validar también a los usuarios. De esta forma se centraliza el control de admisión en el registro de usuarios y se salvaguarda la política de datos. La siguiente figura muestra gráficamente la estructura de privilegios de usuario dentro del portal web. La aplicación incorpora un editor de textos on-line, muy similar a los editores de textos comerciales contenidos en los paquetes de Microsoft Office (Microsoft)y Open Office (), cuya versión es gratuita y se puede obtener fácilmente a través de internet. En este caso, se ha optado por el editor CKeditor (para más información visite www.fckeditor.net/ o wiki.fckeditor.net/) (Knabben) ya que ofrece grandes posibilidades para que los usuarios del sitio web personalicen sus textos (de noticias, eventos, etc.) con cualquier función que encontraría en un editor de texto offline. Para simplificar el proceso de inserción de textos y para evitar que un usuario no experto introduzca un texto que desajuste el estilo global de la página, se restringirán algunas opciones, dejando habilitadas únicamente aquellas que no puedan perjudicar a la visualización de la página. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 22 La galería de imágenes muestra miniaturas de la primera foto que compone cada galería de un tamaño fijo que no distingue entre imagen apaisada o vertical. Esto es así porque se usa un script de JavaScript para obtener sólo un porcentaje de la imagen de forma que sólo el centro de ésta será visualizado en un tamaño más reducido. Así se evita el problema de redimensionar correctamente las imágenes u organizarlas de forma que no estropee el aspecto que ofrece el marco de contenido de éstas. Se admite subir imágenes en formato JPEG y de un tamaño máximo igual a 300 KB para evitar colapsar el espacio de memoria disponible para el portal web en el servidor en el que se aloja. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 23 4 ESPECIFICACIÓN DE REQUISITOS Según Std.610-1990, IEEE Standard Glossary of Software Engineering Terminology (IEEE SA, 1990) (IEEE Standards Association), un requisito se define como una condición o capacidad que debe reunir o poseer un sistema o un componente de un sistema para satisfacer un contrato, un estándar, una especificación u otros documentos impuestos formalmente. Éstos se estructuran de tal forma que puedan ser utilizados tanto por los clientes del sistema como por los desarrolladores del software (Wesley, 2005). En el análisis de la realidad del presente documento se ha revisado el estado actual del cliente y, a partir de las necesidades encontradas, aquí se detallan sus correspondientes requisitos. 4.1 Propósito Estas definiciones tienen como intención recoger los requerimientos que debe respetar la aplicación a lo largo de la evolución del proyecto sobre el portal web para la organización no gubernamental Scouts de Mislata. Se aborda tanto la implementación de un portal web que permita a la asociación cliente mostrar la información necesaria a través de internet y que sea de libre acceso a los usuarios de la red, como el acceso privado a cierta información y a la gestión del sitio web de forma cómoda y simple por parte de los miembros de la misma. Con el presente documento se formalizan las funcionalidades que debe recoger la aplicación y que será en todo momento revisada por el cliente. Motivo por el cual la terminología es lo más natural posible con ayuda de algún esquema que facilite el entendimiento por parte de los miembros que colaboran con el proyecto dentro de la organización. 4.2 Ámbito El producto a desarrollar corresponde al género de páginas web o portales de organizaciones juveniles y scouts que se pueden ver en la red de internet. Muestran información útil de cada organización, como su estructura de trabajo, sus proyectos educativos, sus miembros y sus vivencias. Está orientada tanto a la presentación de información como a la gestión de contenidos y de documentos internos que competen a los organizadores. Existen varias restricciones acerca del diseño del portal web que son recogidas dentro de los requisitos de gestión de información, requisitos de interfaz de usuario y requisitos de funcionalidad. 4.3 Requisitos de gestión de información Se describe en este apartado de requisitos qué información debe guardar el sistema que se implementa y cómo se estructura esa información. La aplicación debe guardar información referente a contenidos sobre la asociación, ficheros de documentos, ficheros de imágenes y control de usuarios. Se detalla a continuación qué se debe gestionar a nivel de información en el sitio web. 4.3.1 Información de usuarios Como la organización establece que se requiere un acceso a través del portal web con datos de usuario registrado, hace falta guardar información de usuarios dentro del portal web. Los atributos necesarios de un usuario son:  Nombre: nombre o nombres del usuario. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 24  Apellidos: los apellidos del usuario.  Contraseña: la clave de acceso que servirá para que el usuario inicie su sesión como miembro de la asociación.  Imagen: una imagen asociada al miembro.  Sección: subgrupo al que pertenece dentro de la organización. Por ejemplo, Castores, Manada, Sección Scout, Clan, Comité. 4.3.2 Información de contenidos estáticos Se debe guardar información referente a datos que normalmente no cambian en el tiempo o su cambio es muy poco variable. Interesa guardar la información siguiente:  ¿Quiénes somos?: Texto correspondiente a quiénes son.  ¿Qué hacemos?: Texto correspondiente a qué hacen.  ¿Cuándo quedamos?: Texto correspondiente a cuándo se reúnen.  ¿Dónde estamos?: Texto correspondiente al emplazamiento del local de actividades.  Contacto: Datos de contacto de la organización.  Secciones: Datos sobre los distintos subgrupos de que se compone la organización a nivel estructural: o Castores: Texto explicativo del funcionamiento y composición del subgrupo más pequeño de la organización. o Manada: Texto explicativo sobre el siguiente subgrupo. o Sección Scout: Texto explicativo. o Clan: Texto explicativo. o Comité: Texto explicativo.  Aviso legal: Texto que describe legalmente el uso del sistema.  Política de privacidad: Texto que describe la política de privacidad del sistema y el contenido. 4.3.3 Información de contenidos dinámicos En este apartado se reflejan aquellos contenidos que son más cambiantes en el tiempo y que probablemente necesitan un control más completo en la forma de guardarlos y de trabajar con ellos.  Galerías de imágenes: Información sobre galería de imágenes. Una galería se compone de fotos: o Nombre: Guarda el nombre de la galería. o Autor: Referencia al usuario que realiza la carga de esa galería. o Validación: Indicador de si es válida o no la galería. o Validado por: Referencia al usuario que validó la galería en caso correspondiente.  Fotos: Información de las fotos que son cargadas dentro de las galerías. o Galería: Referencia la galería a la que pertenece esa foto. o Fichero: Es necesario que se pueda guardar y referenciar el fichero que contiene la foto. o Autor: Referencia al usuario que hizo la carga de la imagen correspondiente. o Validación: Indicador de si es válida o no la foto. o Validado por: Referencia al usuario que validó la foto en el caso correspondiente.  Noticias: Información sobre las últimas noticias que la asociación desea contar a los usuarios de la web. Es necesario guardar varios datos que aseguren esta información: o Fecha: Mantiene datos sobre la fecha en que se añadió la noticia en el sistema. Sirve para organizar en orden cronológico las noticias. o Titular: Guarda el título de la noticia. o Texto: Es el texto de la información de la noticia. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 25 o Autor: Referencia al usuario que añadió la noticia en el sistema.  Calendario de actividades: Información sobre las actividades próximas a realizarse dentro de la organización o actividades realizadas por otras organizaciones similares de las que son participantes. Está compuesto por: o Fecha de inicio: Guarda la fecha de inicio de la actividad. o Fecha de fin: Guarda la fecha de finalización de la actividad. o Nombre: Título o nombre de la actividad. o Texto: Texto de la descripción de la actividad. o Autor: Referencia al usuario que añade la actividad en el sistema. o Sección: Referencia al subgrupo de la asociación a la que va dirigida la actividad a realizar. o Autorización: Referencia al archivo que contiene el formulario de la autorización que deben firmar los padres de los educandos menores de edad para asistir a la actividad.  Autorizaciones: Debe mantenerse la posibilidad de tener accesibles los formularios de las autorizaciones para asistir a las actividades que el grupo scout realiza.  Recursos: Se debe mantener accesibles todos los archivos que contienen información útil como pueden ser juegos, talleres, manuales de trabajo y demás material didáctico que usa la organización. 4.4 Requisitos de funcionalidad Los requisitos funcionales son declaraciones de los servicios que el sistema debe proveer, de la manera que éste reaccionará a las entradas y de cómo se comportará en situaciones particulares. Un requisito funcional define el comportamiento interno del software: cálculos, detalles técnicos, manipulación de datos y otras funcionalidades. El sistema que se desea implementar debe cumplir una serie de funcionalidades que permitan un manejo completo de las necesidades del cliente. 4.4.1 Funcionalidades para usuarios del sistema Se contempla aquí lo que puede hacer un tipo de usuario en el sistema. Para hacer cómodo el entendimiento de los privilegios que se conceden a los distintos tipos de usuario en el sistema, se hace utilizan los Casos de Uso (Wesley, 2005), que son un modelado UML para describir mejor la interacción de usuarios y el sistema. Un caso de uso es una descripción de los pasos o las actividades que deberán realizarse para llevar a cabo algún proceso. Los personajes o entidades que participarán en un caso de uso se denominan actores. En el contexto de ingeniería del software (Wesley, 2005), un caso de uso es una secuencia de interacciones que se desarrollarán entre un sistema y sus actores en respuesta a un evento que inicia un actor principal sobre el propio sistema. Los diagramas de casos de uso sirven para especificar la comunicación y el comportamiento de un sistema mediante su interacción con los usuarios y/u otros sistemas. O lo que es igual, un diagrama que muestra la relación entre los actores y los casos de uso en un sistema. Una relación es una conexión entre los elementos del modelo, por ejemplo, la especialización y la generalización son relaciones. Los diagramas de casos de uso se utilizan para ilustrar los requerimientos del sistema al mostrar cómo reacciona a eventos que se producen en su ámbito o en él mismo. La siguiente figura describe la herencia entre los distintos tipos de usuario de forma que el usuario de abajo hereda las funcionalidades del usuario de arriba. El primer tipo de usuario es el usuario Visitante. En la imagen se ve que una figura que no Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 32  Efecto: Se modifica el contenido de visualización del apartado Bienvenida.  Restricciones: Ninguna. o Editar texto ¿Quiénes somos?: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado ¿Quiénes somos?.  Restricciones: Ninguna. o Editar texto ¿Qué hacemos?: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado ¿Qué hacemos?.  Restricciones: Ninguna. o Editar texto ¿Cuándo quedamos?: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado ¿Cuándo quedamos?.  Restricciones: Ninguna. o Editar texto ¿Dónde quedamos?: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado ¿Dónde quedamos?.  Restricciones: Ninguna. o Editar texto Castores: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado Castores.  Restricciones: Ninguna. o Editar texto Manada: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado Manada.  Restricciones: Ninguna. o Editar texto Sección Scout: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado Sección Scout.  Restricciones: Ninguna. o Editar texto Clan: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 33  Efecto: Se modifica el contenido de visualización del apartado Clan.  Restricciones: Ninguna. o Editar texto Comité de grupo: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado Comité de grupo.  Restricciones: Ninguna. o Editar texto Scouters: El usuario puede editar el texto de ese apartado.  Datos de entrada: Texto.  Efecto: Se modifica el contenido de visualización del apartado Scouters.  Restricciones: Ninguna. o Editar texto Contacto: El usuario puede editar el texto de contacto de la asociación.  Datos de entrada: Texto, ruta de la imagen.  Efecto: Se modifica el contenido de visualización del apartado Contacto.  Restricciones: Ninguna. 4.5 Requisitos de interfaz de usuario La idea fundamental en el concepto de interfaz es el de mediación entre hombre y máquina. La interfaz es lo que "media", lo que facilita la comunicación, la interacción, entre dos sistemas de diferente naturaleza, típicamente el ser humano y una máquina como el computador. Esto implica, además, que se trata de un sistema de traducción, ya que los dos "hablan" lenguajes diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico. En los requisitos de gestión de información ya se ha hablado de los privilegios de cada uno de los distintos tipos de usuario. Para que se pueda dar soporte personalizado a cada uno, la interfaz web debe ser coherente y precisa en su funcionamiento. Usuario visitante: Debe poder visualizar cualquier apartado del portal web sin requerimientos de sesión personalizada, además de poder solicitar registrarse en el sistema a través del formulario de entrada de datos de registro nuevo. Usuario Educando: Debe poder iniciar sesión, añadir/eliminar fotografías y modificar su perfil. Usuario Comité: Debe poder hacer todo lo que hace el usuario Educando, añadir/eliminar recursos, añadir/editar/eliminar noticias y añadir/editar/eliminar enlaces. Usuario Scouter: Debe poder hacer todo lo que hacen los usuarios Comité y Educando. Además debe poder editar/eliminar usuarios de tipo Educando, validar/editar/eliminar fotografías y galerías. Usuario Administrador: Debe poder hacer todo lo que hacen los usuarios anteriores además de poder modificar todos los textos fijos de cada apartado del Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 34 portal web. También debe poder validar usuarios de tipo Educando, Comité y Scouter. 4.6 Definiciones y acrónimos 4.6.1 Definiciones Usuario: El concepto de usuario es utilizado generalmente en el campo de la tecnología informática para referirse a quien utiliza determinado hardware y/o software, mediante el cual obtiene un servicio. Usuario anónimo: Usuario que no tiene una cuenta creada en un sitio web. No posee datos para identificarse en el sistema. Interfaz de usuario: Lewis y Rieman (1993) definen las interfaces hombre computadora como: [Las interfaces básicas de usuario son aquellas que incluyen cosas como menús, ventanas, teclado, ratón, los "beeps" y algunos otros sonidos que la computadora hace, en general, todos aquellos canales por los cuales se permite la comunicación entre el hombre y la computadora]. Binario: Sistema de numeración discreta en el que todas las cantidades se representan utilizando como base el número dos, o sea, que sólo hay dos dígitos posibles. Contenido estático: Información simple que no cambia en el tiempo o que cambia poco. Contenido dinámico: Contenido que por su significado o requerimiento es cambiante en el tiempo, de forma que hacen falta más accesos al sistema para modificarlo. Carga: Subida de un fichero a la aplicación web. 4.6.2 Acrónimos UML: Significa “Unified Modeling Language” y se traduce como lenguaje de modelado unificado. OOWS: Método de Producción de Soluciones Web Orientadas a Objeto. 4.7 Referencias  http://cic.puj.edu.co/wiki/lib/exe/fetch.php?media=materias:oows.pdf  Apuntes de la asignatura APW (desarrollo de Aplicaciones Para entornos Web) de la carrera.  Apuntes de la asignatura ISG (Ingeniería del Software) de la carrera. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 35 5 ESPECIFICACIÓN CONCEPTUAL 5.1 Introducción La especificación conceptual ayuda a entender mejor la realidad utilizando modelos de especificación como puede ser un Caso de Uso. Se representan de forma gráfica los requerimientos del cliente para acercarse un poco más a lo que será el diseño del sistema, facilitando a los desarrolladores el trabajo de plasmar las ideas iniciales sobre funcionalidad, gestión de información, interfaz gráfica y demás conceptos. 5.2 Modelado OOWS La OOWS es un método de desarrollo que permite especificar sistemas software para ambientes web, extendiendo un método OO (Orientado a Objetos) existente. Este tipo de aplicaciones tienen una base común con las aplicaciones software tradicionales: la funcionalidad del sistema y la interacción con los usuarios. Sin embargo, introducen nuevas características navegacionales que deben ser capturadas para representar de una manera más precisa y aproximada el sistema. El método tomado como la base para definir esta aproximación es OO-Method (Vicente Pelechano). Este método capta las propiedades funcionales del sistema que se consideran relevantes para construir una especificación textual OO y formal de manera automática. Esta especificación formal OO constituye un repositorio de información de alto nivel del sistema que será utilizado para el diseño de la implementación del sistema. 5.3 Diseño de las estructuras de datos Una estructura de datos es una forma de organizar un conjunto de datos elementales con el objetivo de facilitar su manipulación. Un dato elemental es la mínima información que se tiene en un sistema. Una estructura de datos define la organización e interrelación de éstos y un conjunto de operaciones que se pueden realizar sobre ellos. Las operaciones básicas son:  Alta: Adicionar un nuevo valor a la estructura.  Baja: Borrar un valor de la estructura.  Búsqueda: Encontrar un determinado valor en la estructura para realizar una operación con este valor, en forma secuencial o binaria (siempre y cuando los datos estén ordenados). Otras operaciones que se pueden realizar son:  Ordenamiento: De los elementos pertenecientes a la estructura.  Relación: dadas dos estructuras originar una nueva ordenada y que contenga a las relacionadas. Cada estructura ofrece ventajas y desventajas en relación a la simplicidad y eficiencia para la realización de cada operación. De esta forma, la elección de la estructura de datos apropiada para cada problema depende de factores como la frecuencia y el orden en que se realiza cada operación sobre los datos. Para diseñar las estructuras de datos se ha usado el Diagrama de Clases de UML que guarda cierto parentesco con el modelo de Entidad-Relación de las bases de datos. En la figura siguiente se visualiza dicho diagrama Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 36 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 37 5.4 Modelo de navegación 5.4.1 Introducción Las propiedades navegacionales de una aplicación web se describen asociando un mapa navegacional para cada tipo de usuario. Proporciona la vista global del sistema para cada uno. Se usa el llamado grafo navegacional, que no es otra cosa que un modelo que representa la relación entre el actor y las páginas web que puede visualizar. Está compuesto de:  Nodos Navegacionales: Cada una de las páginas web simples de las que se compone el portal web. Es cada una de las distintas pantallas del sitio.  Enlaces Navegacionales: Relación entre el usuario y el nodo navegacional. Con ello se define la estructura del sitio web. La siguiente figura muestra una ilustración del aspecto del modelo. Los enlaces navegacionales definen la relación de alcanzabilidad entre nodos de navegación. Existen dos tipos de enlaces:  Enlace de secuencia: (flechas continuas) definidos implícitamente por las relaciones navegacionales de contexto (en definición de contexto). Llevan información contextual.  Enlace de exploración: (flechas discontinuas) definidos implícitamente por los contextos de Exploración. No llevan información contextual. Los nodos navegacionales se dividen en dos tipos que son:  Nodo de Contexto: (Unidad de Interacción básica con el usuario) definen contenido de información.  Nodo de Subsistema: permiten estructurar la navegabilidad dentro del sistema. Cada nodo de contexto representa una vista parcial del sistema para realizar cierta actividad u operación. Especifica un acceso a un conjunto de datos (atributos) y funcionalidad (operaciones) gráficamente representada por un paquete UML (Object Management Group), con el estereotipo « contexto ». Existen dos tipos de contexto:  Contexto de Exploración: Son siempre accesibles (uno de estos puede ser marcado como “Home”).  Contexto de Secuencia: sólo accesibles a través de caminos de navegación preestablecidos. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 38  La figura siguiente muestra el aspecto del nodo navegacional con su contexto. Los contextos navegacionales de Exploración definen los enlaces de exploración del mapa de navegación. Al crear un contexto de exploración, automáticamente aparece un enlace de exploración en el mapa de navegación. Un contexto navegacional está compuesto por:  Clases navegacionales: Especifican una recuperación de información (atributos) y acceso a una funcionalidad (operaciones). Éstas son una vista sobre las clases del diagrama (« view »).  Relaciones navegacionales: Enlazan las clases navegacionales mediante vistas sobre relaciones estructurales del diagrama de clases (asociación/agregación/composición, especialización/general). Una clase navegacional define una proyección de visibilidad sobre clases del diagrama de clases con respecto a:  Atributos: Son datos visibles por el usuario.  Servicios: Es la funcionalidad ejecutable por el usuario. Clases UML estereotipadas con « view ». Hay dos tipos de clases navegacionales:  Directora: Es la clase principal del contexto. Toda la exploración de información parte de ella. Sólo puede haber una por contexto.  Complementarias: Complementan la información de la clase directora. Éstas usan relaciones navegacionales para definirse. Pueden haber varias clases complementarias. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 39 5.4.2 Mapa navegacional de usuario Visitante Este tipo de usuario puede visualizar casi todas las páginas del sitio sin iniciar sesión. En la siguiente imagen se visualiza el mapa de navegabilidad del usuario Visitante. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 40 La flecha continua de color azul indica que la navegabilidad al nuevo contexto sólo es posible a través del contexto que la dirige. Se detallan ahora los nodos de navegación y sus contextos. Cada nodo de navegabilidad debe ser descrito internamente con su contexto y sus vistas. Dentro de cada vista se describen los atributos si los hubiera y los métodos o funcionalidades que actúan para ese nodo. Para no saturar la memoria actual con estos modelos de navegabilidad, los demás nodos que pueden ser enlazados por el usuario Visitante, se añaden en los anexos (10.1.1) del proyecto. Todos los nodos de contenido estático se definen de la misma forma que el nodo de contexto Bienvenida ya que contienen la misma funcionalidad dentro de la vista correspondiente. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 41 5.4.3 Mapa navegacional de usuario Educando Además de visualizar todas las pantallas que no requieren inicio de sesión, este usuario puede identificarse en el sistema y realizar ciertas tareas. El modelo siguiente muestra sólo los nuevos nodos navegacionales que se derivan del tipo de usuario Educando. Detalle de los nodos de navegación del usuario Educando: El contexto Administrar no muestra información alguna. Simplemente es un contexto de funcionalidades que permite entrar en otros contextos como añadir fotografía, eliminar fotografía y editar perfil del usuario que ha iniciado sesión. Estos contextos se visualizan en las figuras siguientes. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 48 Para guardar el aspecto de interfaz de la aplicación, el editor se ha modificado como indica la figura siguiente. Los botones de opciones que se usan en la aplicación son también escasos para salvaguardar el estilo de presentación de la información como se verá en los apartados de presentación de la información que hay más adelante. Los botones de opciones que permite usar la herramienta son: Cortar Copiar Pegar Pegar texto plano Pegar desde Word Revisar ortografía Activar la ortografía mientras escribe Deshacer Rehacer Buscar Reemplazar Negrita Cursiva Subrayado Tachado Subíndice Superíndice Lista ordenada Lista con viñetas Reducir sangría Aumentar sangría Escribir como cita Alinear a la izquierda Alinear al centro Alinear a la derecha Justificar Cambiar el color de la fuente Insertar un vínculo Eliminar un vínculo Insertar imagen Insertar objeto FLASH Insertar tabla Insertar barra horizontal Insertar emoticono Insertar símbolo Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 49 6 MODELO DE IMPLEMENTACIÓN 6.1 Herramientas utilizadas La implementación de la aplicación se ha basado en los casos de uso del sistema. Debido a que el servidor web en que se aloja la página web antigua no tiene todavía contratada la base de datos ni la implementación con tecnología PHP, la asociación Scouts de Mislata ha decidido cambiar el alojamiento de la misma a los servidores de la empresa 1&1 (Mauss) que actualmente ofrece promoción a través de los medios televisivos. Se han usado lenguajes de programación como PHP, HTML, CSS, JavaScript y MySQL para implementar la aplicación completa. El servidor local sobre el cual se realiza la implementación es el paquete XAMPP (Seidler). La versión usada en la correspondiente para Windows XP. Esta versión contiene: Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System para Win32 y NetWare Systems v3.32, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, y WEB-DAV + mod_auth_mysql. Es un paquete sencillo en su instalación y administración del servidor que facilita mucho la tarea de gestión y funcionamiento de la aplicación que dio vida a este proyecto final de carrera. La herramienta que se usa para la implementación del portal web es Adobe Dreamweaver CS3 (Adobe Systems Incorporated) en versión educativa. Para la edición de imágenes se ha elegido la aplicación Adobe Photoshop CS2 (Adobe Systems Incorporated) que la alumna dispone de una compra anterior. La aplicación se ha optimizado para el navegador Mozilla Firefox en su versión 6.0.2 aunque se conoce ya la existencia de la versión 7.0 en la que todavía no se han notado fallos aparentes en el funcionamiento. La herramienta CKEditor se ha elegido para el tratamiento de los textos dentro de los formularios de gestión de información de la aplicación. La descripción del funcionamiento de la herramienta se ha explicado ya en el punto 5.5 (diseño de formularios). 6.2 Bases de datos Se define como un “almacén” que permite guardar grandes cantidades de información de forma organizada para que luego se pueda encontrar y utilizar fácilmente. Para la implementación de la base de datos de este proyecto se ha realizado el diagrama de Entidad-Relación en el que se detallan las entidades a crear y las relaciones necesarias. La figura siguiente detalla tales relaciones. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 50 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 51 La base de datos física tiene como nombre scouts. Dentro, se han creado un total de 20 tablas que pertenecen a cada una de las entidades del diseño de la figura anterior. A continuación se visualiza el nombre de cada tabla. Aunque para cada ítem de usuario dentro de la tabla de usuario ya se guarda información sobre su dni como dato único, por comodidad se ha elegido integrar un nuevo atributo único Id que hace las veces de clave principal dentro de la tabla. La misma idea se ha planteado en las demás tablas de la base de datos. Se puede ver también en la estructura de las tablas que existe un atributo autor o usuario_cambio que corresponde a la relación entre el usuario que ha subido el recurso o ha modificado por última vez el texto de esa sección del portal web. A continuación se detalla con capturas de pantalla la estructura que se ha adoptado en cada tabla de la base de datos física creada (scouts). Nombre de la tabla Estructura de los atributos texto_bienvenida texto_castores Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 52 texto_clan texto_comite texto_contacto texto_cuando_quedamos texto_donde_quedamos texto_manada texto_que_hacemos texto_quienes_somos texto_scouters texto_seccion Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 53 usuario actividad comentario enlace foto galeria noticia recurso Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 54 7 MODELO DE PRESENTACIÓN Este modelo captura los requisitos abstractos de presentación de información. Se basa en el modo de presentación asociado a cada nodo (contexto) del modelo de navegación. Asocia patrones de presentación a los elementos que constituyen estos contextos navegacionales (clases navegacionales, relaciones navegacionales e índices). Los patrones de presentación son:  disposición de información (Layout) [Registro, Tabular, Árbol, Maestro-Detalle ].  Criterios de Ordenación de información por valor de atributos [ASCendente, DESCendente ].  Paginación de la información: Cardinalidad de conjuntos (número de. elementos): [estática, dinámica]. Modo de Acceso a los conjuntos [secuencial, aleatorio]. 7.1 Patrón de disposición de la información. En la aplicación realizada se han aplicado básicamente un combinado entre patrones de disposición de información tipo Maestro-Detalle y registro. Para la presentación de las galerías de imágenes por ejemplo, se puede verificar que inicialmente se visualiza la prima imagen que compone la galería. Para ver el detalle de la misma, es necesario pinchar con el puntero del ratón sobre la imagen representativa y así de esta forma se carga en la misma zona del portal las imágenes que componen la galería con el nombre ésta. Así da la posibilidad de comentar las imágenes que se deseen si se ha iniciado sesión como usuario registrado del dominio. Claramente este patrón es tipo Maestro-Detalle. Para la visualización de los textos estáticos, se puede considerar disposición de tipo registro aunque no hay más atributos que ordenar que el texto de descripción de esa sección del portal web. 7.2 Patrón de ordenación de datos. Para esta aplicación se ha elegido ordenación descendente ya que los contenidos dinámicos son principalmente de carácter actual e interesa que se muestren antes que información antigua. Para las noticias por ejemplo, es necesario que la noticia más nueva salga primero que una anterior de manera que siempre mantiene un orden descendente. Los contenidos que no necesitan ordenación previa como pueden ser las actividades simplemente se añaden en el orden de llegada. Una actividad se añade en una fecha concreta y se debe mantener en esa fecha de realización dentro del calendario de actividades. Sin embargo, ese calendario sí presenta como vista el mes en que se encuentra el sistema actual de forma que se remarcan los cuadros de ese mes que tienen alguna actividad pendiente de realizar. 7.3 Patrón de paginación de la información. Por petición del cliente, el patrón de paginación es dinámico y aleatorio de manera que no sea necesario seguir un camino largo para realizar una función determinada. Dentro de las zonas de información, se abrirá automáticamente una barra lateral tipo Scroll del ratón que permite desplazarse arriba y abajo cuando el contenido supera el largo predeterminado de la zona de contenidos. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 55 7.4 Estrategia de presentación de la interfaz Web. Cada nodo contextual que se han visto en el punto (5.4) sobre modelos de navegación, se convierte en un tipo de página web. Se quiere decir con ello que los veinte nodos descritos anteriormente se convierten en 20 páginas web distintas que se relacionan unas con otras. Existen tres tipos básicos de páginas:  Páginas de información.  Páginas de entrada de datos.  Páginas de accesibilidad. Teniendo en cuenta los tipos básicos, las páginas web del portal se distribuyen de la siguiente forma: Tipo de página Nombre de las páginas Información index.php, castores.php, clan.php, manada.php, comite.php, scouters.php, conocenos.php, contacto.php, cuando.php, donde.php, que.php, quienes.php, secciones.php, galerías.php, calendario.php, enlaces.php, noticias.php Entrada de datos login.php, registro.php Accesibilidad admin.php, Existen otros ficheros que por comodidad o seguridad se creado también. La definición de la interfaz es uno de los puntos fuertes que más se ha analizado en este proyecto. Se ha hecho mucho hincapié en la elección de la interfaz adecuada para dar la imagen que la asociación desea expresar a través de los navegadores web. Para la elección de los colores de la interfaz se buscó por internet, herramientas que establecieran cartas de color afines para entornos web. Después de buscar varios sitios web, se decidió elegir como opción el sitio web Color Scheme Designer (Stanicek) que ofrece comodidad en la elección de un entorno y aplicar las tonalidades que le acompañan. Los tonos verdes fueron la elección más acertada de las pruebas que se hicieron en su momento. La figura siguiente detalla el aspecto de la página de prueba que ofrece Color Scheme Desingner. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 56 7.4.1 Zonas de la interfaz Elegidos los colores de la interfaz, la implementación fue sencilla ya que se partió de los modelos de navegación, casos de uso y de presentación diseñados previamente. En la figura que a continuación se muestra, se detalla gráficamente las zonas de presentación de la información del portal web. En la figura anterior se pueden ver 7 zonas diferenciadas y enumeradas. En la zona 1 o zona superior se encuentra el título del portal web además del logo o imagen corporativa que ha elegido Scouts de Mislata. Se llama en metodología OOWS, zona institucional. En esta zona se puede apreciar en el lateral derecho que se encuentra el acceso para los usuarios registrados o el registro para nuevos usuarios. En la zona 2 o zona de menús se encuentran efectivamente, todos los menús de que se compone el sitio web. De una forma sencilla e intuitiva se puede navegar a través de los distintos submenús que ofrece cada menú. Al pasar el puntero del ratón por encima, se despliega automáticamente las opciones disponibles para ese menú. La zona 3 es la zona de contenidos o de información. Ahí se muestra el contenido de las distintas secciones. Como no se espera un contenido muy extenso, se le ha asignado un espacio pequeño relativamente con respecto al espacio total de la interfaz. La zona 4 no tiene otra utilidad que amenizar el aspecto de cada página. Según la página que se encuentra seleccionada, se verá una u otra imagen que dice algo sobre la organización con cierto aire de naturalidad y seriedad que se quiere dar. La zona 5 o zona inferior contiene los datos de contacto y las notas sobre derechos y política de privacidad del sitio web. La zona 7 o pié de web es una zona que inicialmente no se ve pero de alguna forma enmarca lo que es la web general y vuelve a mostrar datos de contacto y localización sobre el local de reuniones de la asociación. La pantalla de identificación tiene un sencillo formulario para introducir los datos de identificación del usuario. Ofrece el siguiente aspecto. 1 6 6 3 4 5 2 7 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 57 Cuando un usuario con privilegios de Administrador inicia sesión con sus datos, en panel de administración pertinente le muestra las opciones que tiene ordenadas por tipo de control. Ofrece el siguiente aspecto. Las demás capturas de pantalla de los otros usuarios se encuentran en el punto (12.3) del anexo. Las galerías de imágenes merecen mención especial. Se puede ver que cada galería tiene una imagen a mostrar. La peculiaridad está en que cada imagen no visualiza su totalidad. Sólo se ve la zona central de la misma. Así de esta forma no importa si una imagen está en posición vertical o en posición horizontal. Lo importante es que se mantiene la concordancia con las demás galerías. Cuando se selecciona una imagen, entonces se visualiza entera en la posición correcta. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 64 10 AGRADECIMIENTOS Quisiera dar mis más sinceros agradecimientos a todas las personas que me han ayudado y apoyado durante este tiempo, haciendo posible la elaboración de mi proyecto final de carrera y, por consiguiente, este documento. A los miembros de la asociación Scouts de Mislata (grupo scout Impeesa XV), a David Sánchez Balaguer que colaboró en todo momento en las pruebas de testeo de la aplicación y en la realización de requisitos. A José Segura Ras (Pep para los amigos) que como coordinador de la asociación fue pieza clave en la obtención de los requisitos de información que la aplicación debía cumplir. A Alejandro Sastre Lapeire que colaboró también en las labores de testeo y que administró alguna imagen para la aplicación. A mis compañeros de la Escuela Superior de Informática Aplicada, quienes, aunque no han participado de forma directa en el proyecto, me han apoyado y animado en todo momento y, aunque sea indirectamente, han influido en el desarrollo de este proyecto. Gracias Raquel, Alberto, Jose, Rubén, Nacho, Tanya, Víctor, Alberto L. A mi familia y amigos, por su constante atención y apoyo. A mis padres, a mi novio que con su gran ayuda y paciencia me ha facilitado la obtención de este proyecto. A doña María Luisa Llorens Agost, directora de este proyecto final de carrera, por su dedicada atención, su colaboración y sus consejos a la hora de realizar esta memoria. Por último, gracias a todos los profesores que alguna vez me dieron clase porque, de alguna manera, todas las destrezas que me enseñaron están aquí recogidas y aplicadas en el trabajo realizado. Una vez más, gracias. Paola Raquel Sabogal Trujillo Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 65 11 Bibliografía 1993. [En línea] 1993. http://www.dirinfo.unsl.edu.ar/~bd2/basesdedatosII/teorias/InterfacesUsuario.pdf. [En línea] http://colorschemedesigner.com/. Adobe Systems Incorporated. [En línea] http://www.adobe.com/es/products/dreamweaver.html. —. [En línea] http://www.adobe.com/es/products/photoshop.html. ASDE Federación de Asociaciones de Scouts de España. http://www.scout.es/. [En línea] [Citado el: 21 de Septiembre de 2011.] Fons Cors, Joan Josep. [En línea] gobierno de España. Ley orgánica 1/1996. [En línea] http://noticias.juridicas.com/base_datos/Privado/lo1-1996.t1.html#. IEEE SA. 1990. IEEE Stardards Association. [En línea] 1990. http://standards.ieee.org/findstds/standard/610.12-1990.html. IEEE Standards Association. 830-1998 - IEEE Recommended Practice for Software Requirements Specifications. [En línea] http://standards.ieee.org/findstds/standard/830-1998.html. 2000. iso 9001:2000. International Organization for Standardization. [En línea] 2000. [Citado el: 21 de Septiembre de 2011.] http://www.iso.org/iso/catalogue_detail?csnumber=21823. Knabben, Frederico. WYSIWYG Text and HTML Editor for the Web. [En línea] http://ckeditor.com/. Mauss, Olover. [En línea] http://alta.1and1.es/xml/order/Home;jsessionid=D1F4F259F7F8107B617F16D381C 1DC35.TCpfix150a. Microsoft. Microsoft Office. [En línea] http://office.microsoft.com/es-es/. Object Management Group. Unified Modeling Language. [En línea] [Citado el: 29 de Julio de 2011.] http://www.uml.org/. Open Office. [En línea] http://es.openoffice.org/. Seidler, Kai 'Oswald'. [En línea] http://www.apachefriends.org/es/xampp.html. The PHP Group. Manuales de PHP. [En línea] http://www.php.net/. Vicente Pelechano, Oscar Pastor, Emilio Insfrán, José A. Carsí. Universidad Politécnica de Valencia. Página personal de Emilio Insfrán. [En línea] [Citado el: 26 de Julio de 2011.] http://users.dsic.upv.es/~einsfran/papers/03-jis96.pdf. Wesley, Addison. 2005. I. Ingeniería del Software. (7ª ed.). s.l. : Sommerville, 2005. World Wide Consortium (W3C). [En línea] [Citado el: 21 de Septiembre de 2011.] http://www.w3.org/. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 66 12 ANEXOS 12.1 Nodos de navegabilidad 12.1.1 Usuario visitante: nodos de navegabilidad Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 67 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 68 Análogamente a los nodos de contenido estático se encuentran los nodos de contenido dinámico para este tipo de usuario. 12.1.2 Usuario Administrador Se representan aquí los nodos de contexto faltantes dentro del modelado de navegabilidad. Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 69 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 70 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 71 12.2 Manual de usuario del portal web Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 72 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 73 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 80 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 81 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 82 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 83 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 84 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 85 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 86 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 87 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 88 Portal web para ONG Scouts de Mislata Paola Raquel Sabogal Trujillo Página 89