DISEÑO E IMPLEMENTACIÓN DE UN PORTAL WEB PARA LA GESTIÓN DE EVENTOS DEPORTIVOS

Transcripción

1 UNIVERSIDAD POLITÉCNICA DE VALENCIA FACULTAD DE INFORMÁTICA DISEÑO E IMPLEMENTACIÓN DE UN PORTAL WEB PARA LA GESTIÓN DE EVENTOS DEPORTIVOS PROYECTO FIN DE CARRERA PRESENTADO POR: Sabina Lucas Abad DIRIGIDO POR: Germán Vidal Oriola Valencia, 2011

2 RESUMEN En éste proyecto se expondrá detalladamente el proceso de desarrollo de un portal web de eventos deportivos de judo que se llamará Hajimejudo. El objetivo de éste proyecto es que los integrantes del grupo Hajimejudo, (en adelante HJ), dispongan de una herramienta eficaz para publicar, modificar y mantener la información recogida en los distintos eventos a los que se desplacen. El portal web funcionará como un pequeño periódico electrónico. Dispondrá de una parte pública, en la que los usuarios de la web podrán acceder a las distintas secciones y consultar la información expuesta, y una parte privada, a la que sólo podrán acceder los integrantes del grupo HJ previa identificación. Una vez identificados, los usuarios administradores podrán crear, editar, modificar y mantener la información de la web sin especiales conocimientos informáticos, y de una forma rápida y sencilla. 2

3 ÍNDICE 1 INTRODUCCIÓN ANÁLISIS DE LA APLICACIÓN ESPECIFICACIÓN DE REQUERIMIENTOS PRESENTACIÓN DEL PROBLEMA ÁMBITO DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS PERSPECTIVA DE LA APLICACIÓN FUNCIONES DE LA APLICACIÓN CARACTERÍSTICAS DE LOS USUARIOS REQUERIMIENTOS ESPECÍFICOS REQUERIMIENTOS FUNCIONALES GESTIÓN DE ADMINISTRADORES GESTIÓN DE SESIONES GESTIÓN DE NOTICIAS GESTIÓN DE LA BARRA LATERAL REQUERIMIENTOS DE INTERFACES EXTERNOS INTERFACES DE USUARIO REQUERIMIENTOS DE EFICIENCIA ATRIBUTOS SEGURIDAD MANTENIMIENTO DISEÑO E IMPLEMENTACIÓN ANÁLISIS DE LAS TECNOLOGÍAS EMPLEADAS PORQUÉ USAR TECNOLOGÍAS DE SOFTWARE LIBRE PARTE CLIENTE HTML CSS JAVASCRIPT PROTOTYPE PARTE SERVIDOR APACHE

4 PHP mysql COMUNICACIÓN CLIENTE SERVIDOR AJAX JSON ARQUITECTURA DE LA APLICACIÓN CAPA DE PRESENTACIÓN DISEÑO CSS INTERFAZ DE USUARIO MAPA WEB CAPA DE NEGOCIO DIAGRAMAS DE CASOS DE USO ACTORES DIAGRAMA Y DESCRIPCIÓN DE CASOS DE USO GESTIÓN DE ADMINISTRADORES GESTIÓN DE SESIONES GESTIÓN DE NOTICIAS GESTIÓN DE LA BARRA LATERAL DIAGRAMAS DE ACTIVIDAD CAPA DE DATOS CARACTERÍSTICAS DE LA BASE DE DATOS DIAGRAMA E R DIAGRAMA DE CLASES CONCLUSIONES Y PERSPECTIVAS OBJETIVOS CONSEGUIDOS POSIBLES AMPLIACIONES CONSIDERACIONES FINALES REFERENCIAS... Error! Marcador no definido. 5.1 ÍNDICE DE GRÁFICAS... Error! Marcador no definido. 5.2 Bibliografía... Error! Marcador no definido. 6 ANEXOS GESTIÓN DE ADMINISTRADORES GESTIÓN DE SESIONES GESTIÓN DE NOTICIAS GESTIÓN DE LA BARRA LATERAL

5 TABLA DE ILUSTRACIONES Ilustración 1: Diagrama de intercambio de datos entre cliente y servidor mediante AJAX...29 Ilustración 2: Comparativa entre la representación de un objeto de datos en formato JSON y XML...30 Ilustración 3: Esquema conceptual de la arquitectura de la aplicación...31 Ilustración 4: Esquema del layout general (izq.) y de la página home (dcha)...35 Ilustración 5: Botón de Inicio de Sesión...36 Ilustración 6: Formulario de Inicio de Sesión...36 Ilustración 7: Botón de desconexión y menú administrador...36 Ilustración 8: Web parte privada...37 Ilustración 9: Barra de herramientas...37 Ilustración 10: Ejemplo de formulario Ilustración 11: Mensaje Acción correcta...39 Ilustración 12: Mensaje Error...39 Ilustración 13: Mapa Web del portal Hajimejudo...40 Ilustración 14: Roles de la aplicación HJ...41 Ilustración 15 Grupos de casos de uso...42 Ilustración 16: Diagrama de casos de uso de la aplicación HJ...68 Ilustración 17: Esquema conceptual de relación 1 a 1, (izquierda), 1 a N (centro) y N a M (derecha)...71 Ilustración 18Ejemplo de valor del campo permisos de la entidad administrador con todos los permisos posibles...73 Ilustración 19: Diagrama E-R correspondiente a los administradores y sesiones...73 Ilustración 20: Diagrama E-R correspondiente a la estructura simplificada de las entidades más relevantes de la base de datos...76 Ilustración 21: Diagrama E-R correspondiente a los tipos de noticias...77 Ilustración 22: Diagrama E-R correspondiente a las noticias de resultados...78 Ilustración 23: Diagrama E-R correspondiente a las noticias de retransmisiones...79 Ilustración 24 Marcas que utilizan el servicio cover it live Ilustración 25: Diagrama E-R correspondiente a noticias_galeria...81 Ilustración 26: E-R correspondiente a los elementos de la barra lateral...82

6 Ilustración 27: Diagrama E-R correspondiente a los componentes calendario y destacados de la barra lateral y sus relaciones asociadas...82 Ilustración 28: Diagrama E-R correspondiente a los componentes publicidad, judokasmes y fotosmes...83 Ilustración 29 Diagrama de clases obtenido a partir del diagrama E-R...87 Ilustración 30: Tabla tareas para la realización de un sistema de tareas programadas...90 Ilustración 31: Diagrama actividad asociado al caso de uso Alta Administrador...94 Ilustración 32: Diagrama de actividad correspondiente al caso de uso Edición de Administrador...95 Ilustración 33: Diagrama de actividad correspondiente al caso de uso Baja Administrador...96 Ilustración 34: Diagrama de actividad correspondiente al caso de uso Obtener Log de Sesión 97 Ilustración 35: Diagrama de actividad correspondiente al caso de uso Iniciar Sesión...97 Ilustración 36: Diagrama de actividad correspondiente al caso de uso Cerrar Sesión...98 Ilustración 37: Diagrama de actividad correspondiente al caso de uso Crear Noticia...98 Ilustración 38: Diagrama de actividad correspondiente al caso de uso Editar Noticia...99 Ilustración 39: Diagrama de actividad correspondiente al caso de uso Mostrar Noticia...99 Ilustración 40: Diagrama de actividad correspondiente al caso de uso Ocultar Noticia Ilustración 41: Diagrama de actividad correspondiente al caso de uso Subir Noticia Ilustración 42: Diagrama de actividad correspondiente al caso de uso Bajar Noticia Ilustración 43: Diagrama de actividad correspondiente al caso de uso Eliminar Noticia Ilustración 44: Diagrama de actividad correspondiente al caso de uso crear evento de calendario Ilustración 45: Diagrama de actividad correspondiente al caso de uso editar evento de calendario Ilustración 46: Diagrama de actividad correspondiente al caso de uso eliminar evento de calendario Ilustración 47: Diagrama de actividad correspondiente al caso de uso crear destacado Ilustración 48: Diagrama de actividad correspondiente al caso de uso editar destacado Ilustración 49: Diagrama de actividad correspondiente al caso de uso eliminar destacado Ilustración 50: Diagrama de actividad correspondiente al caso de uso crear judoca del mes/foto del mes Ilustración 51: Diagrama de actividad correspondiente al caso de uso editar judoca/foto del mes Ilustración 52: Diagrama de actividad correspondiente al caso de uso eliminar judoca/foto del mes

7 Ilustración 53: Diagrama de actividad correspondiente al caso de uso crear espacio publicitario Ilustración 54: Diagrama de actividad correspondiente al caso de uso editar espacio publicitario

8 1 INTRODUCCIÓN El grupo Hajimejudo, es un grupo de aficionados al Judo que decidió compartir su afición informando a pie de pista de la actualidad de los distintos eventos deportivos a los que se desplazaban. En este momento existen pocas páginas de judo en España que generen noticias, y por lo tanto HJ podía ser una alternativa interesante para informarse sobre éste deporte. El formato elegido para mostrar la información recogida en los distintos campeonatos fue, como en tantos otros casos, el blog. Con el tiempo el blog fue creciendo en secciones, cantidad de información y visitantes, con lo que navegar por el blog se hizo más lento y su mantenimiento más complicado. Por otra parte también existía el problema de que, al no disponer de una base de datos, la información no podía guardarse, siendo sustituidas las noticias anteriores por las nuevas. Este punto es de especial importancia en un portal de noticias deportivas, ya que disponer de la información publicada con anterioridad de forma estructurada y ordenada, permitiría realizar funcionas tales como: generar noticias sobre informaciones pasadas, exponer estadísticas de eventos deportivos y resultados, rememorar campeonatos, o hacer un estudio de la trayectoria de un deportista en concreto. Estas razones hacen imprescindible contar con una base de datos bien formada, estructurada y fácil de ampliar donde la información se guarde y organice de forma coherente. De esta manera surgió la idea de convertir el blog en un portal web que pudiera suplir las carencias que este medio presentaba. El portal web debe permitir al grupo HJ una actualización y mantenimiento sencillos con pocos conocimientos informáticos. Por otra parte la web debe permitir publicar información multimedia con una calidad adecuada. 8

9 Para conseguir los objetivos marcados se optó por tecnologías web relacionadas con el software libre. Durante la realización del proyecto se empleó una combinación de HTML, CSS, y Javascript para la interfaz web y PHP y MySQL para la parte servidor, conectadas mediante técnicas AJAX. Los objetivos expuestos se desarrollarán en profundidad en los apartados siguientes, que se organizarán de la siguiente manera: ANÁLISIS DE LA APLICACIÓN: Dentro de este apartado se realizará una descripción completa del problema desde diferentes perspectivas, y se expondrán todos los requerimientos necesarios para llevar a cabo la implementación de la aplicación. DISEÑO E IMPLEMENTACIÓN: Este apartado se va a centrar en el diseño de la aplicación siguiendo el modelo de arquitectura en 3 capas. Se comenzará con un apartado dedicado a las tecnologías y la descripción del framework empleado. A continuación se describirá la capa de presentación, la capa de negocio, (que proporcionará diferentes diagramas UML), y la capa de datos, en la que se describirá la base de datos de la aplicación CONCLUSIONES Y PERSPECTIVAS Aquí se expondrán las conclusiones obtenidas durante la realización del proyecto, objetivos conseguidos, y posibles ampliaciones. REFERENCIAS BIBLIOGRÁFICAS Como referencias se mostrarán los libros, páginas Web y otras referencias utilizadas en la realización de esta memoria. ANEXOS En el apartado de anexos se mostrará la información que por su extensión o complejidad se ha decidido añadir como información de consulta. 9

10 2 ANÁLISIS DE LA APLICACIÓN Este capítulo está dedicado a exponer las condiciones previas que deben exigirse para conseguir los objetivos expuestos en la introducción. Además, se describirán los requerimientos derivados del estudio de estos objetivos, definiéndolos desde diferentes perspectivas. 2.1 ESPECIFICACIÓN DE REQUERIMIENTOS En este apartado se definirán los requerimientos necesarios para implementar la aplicación. En primer lugar se definirán los problemas a resolver y la funcionalidad de la aplicación, para pasar a definir los requerimientos específicos de los diferentes elementos que interactuarán en la aplicación. Finalmente se identificarán las restricciones de diseño, seguridad y mantenimiento PRESENTACIÓN DEL PROBLEMA La aplicación descrita a continuación es un portal web que incorporará un pequeño sistema gestor de contenidos, (en adelante SGC). El SGC solo será accesible previa identificación de los usuarios administradores, y tendrá como objetivo conseguir una gestión sencilla y eficiente del material multimedia recogido en los campeonatos ÁMBITO 10

11 El portal web debe tener como prioridad facilitar la publicación de contenidos para poder informar a los lectores de todo lo que ocurre en los campeonatos en tiempo real. Por esta razón resulta importante que los datos se puedan actualizar de forma intuitiva, rápida y sencilla. El portal web será usado por 2 tipos de usuarios, administradores y usuarios generales. Los administradores deberán identificarse de forma segura en el sistema para poder acceder al SGBD de la aplicación y proceder a publicar y mantener los contenidos mostrados al resto de usuarios DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS HJ: Hajimejudo BD: Base de Datos SGC: Sistema Gestor de Contenidos ACID: Propiedades de las transacciones fiables en bases de datos. (Atomicidad, Consistencia, Aislamiento, Durabilidad) PHP: Hypertext Preprocessor JSON: JavaScript Object Notation AJAX: Asynchronous JavaScript And XML HTTP: Hypertext Transfer Protocol HTML: HyperText Markup Language PERSPECTIVA DE LA APLICACIÓN La aplicación deberá ser capaz de funcionar correctamente en los principales navegadores. La parte pública de la web será totalmente funcional para aquellos usuarios que no quieran o puedan usar JavaScript. Sin embargo será necesario su uso para los usuarios administradores. El SGC accesible previa identificación, será usado principalmente por un solo usuario administrador, 11

12 pero en las competiciones, varias personas deberán acceder simultáneamente a la base de datos FUNCIONES DE LA APLICACIÓN A continuación se muestra la funcionalidad disponible en la aplicación: 1. Gestión de Administradores: Permite gestionar los usuarios administradores que formarán el grupo HJ. Alta Administrador Edición Administrador Baja Administrador 2. Gestión de Sesiones: Permite iniciar, cerrar y consultar el log cualquier sesión iniciada en el sistema gestor de contenidos de HJ. Iniciar Sesión Cerrar Sesión Obtener Log de sesión 3. Gestión de Noticias: Permite gestionar las noticias generadas en la aplicación. Crear Noticia Editar Noticia Mostrar Noticia Ocultar Noticia Bajar Noticia Eliminar Noticia 12

13 4. Gestión de Elementos de la Barra lateral: Permite gestionar los componentes situados en la barra lateral, que serán comunes a todas las secciones de la aplicación. Crear Evento de Calendario Editar Evento de Calendario Eliminar Evento de Calendario Crear Titular Destacado Editar Titular Destacado Eliminar Titular Destacado Crear Foto del Mes/Judoka del Mes Eliminar Foto del Mes/Judoka del Mes Crear Espacio Publicitario Eliminar Espacio Publicitario Subir Componente Barra Lateral Bajar Componente Barra Lateral Mostrar Componente Barra Lateral Ocultar Componente Barra lateral Nota: El botón eliminar se encontrará activo solamente para eliminar contenido de los elementos de la barra lateral y no para eliminar los componentes en sí ya que éstos son estáticos. Las funciones subir, bajar mostrar y ocultar de los elementos de la barra lateral tendrán el mismo funcionamiento que en el caso de las noticias CARACTERÍSTICAS DE LOS USUARIOS En la aplicación va a haber 2 tipos de usuarios: usuarios generales y administradores. Los usuarios generales podrán navegar sin necesidad de ejecutar javascript ya que solamente la vista administrador lo incorpora. Esto ofrece una ventaja a la 13

14 hora de posicionar la página, ya que el texto contenido en el código javascript o flash no es reconocido ni indexado por los buscadores. Los robots de búsqueda tienen dificultades para seguir estos enlaces, por lo que es conveniente disponer de otros mecanismos para hacer el código accesible al buscador. (1) Los usuarios administradores no tienen especiales conocimientos informáticos por lo que el sistema gestor de contenidos se debe diseñar de manera que sea fácil de usar y mantener REQUERIMIENTOS ESPECÍFICOS REQUERIMIENTOS FUNCIONALES GESTIÓN DE ADMINISTRADORES ALTA ADMINISTRADOR Un administrador accederá a la opción gestión de usuarios del menú y seleccionando la opción alta administrador, rellenará los datos del nuevo administrador, ( , usuario, contraseña, permisos), guardándose estos en la base de datos, a partir de ese momento el nuevo administrador podrá entrar en el gestor de contenidos. Si la transacción no se realiza con éxito se avisará al administrador con un mensaje. EDICIÓN ADMINISTRADOR Un administrador con los permisos adecuados accederá a la opción gestión de administradores del menú y seleccionará la opción edición de administrador. Después seleccionará el administrador a editar y guardará los cambios en la base de datos. Si la transacción no se realiza con éxito se avisará al administrador con un mensaje. 14

15 BAJA ADMINISTRADOR Desde la opción de menú correspondiente un administrador identificado en el sistema y con los permisos adecuados podrá seleccionar el administrador a eliminar, y borrar su información asociada de la base de datos. Una vez se confirme la acción, el administrador eliminado no podrá acceder al sistema gestor de contenidos. Si existe algún error en el proceso se avisará al administrador mediante un mensaje de error GESTIÓN DE SESIONES INICIAR SESIÓN Los usuarios administradores que quieran acceder al SGC de la aplicación HJ deberán rellenar los campos usuario y contraseña del formulario de identificación. Se comprobará que los administradores hayan sido dados de alta previamente. Una vez identificado el usuario, se guardarán los datos de inicio de sesión, y a partir de ese momento se guardarán en la base de datos todas las acciones que realicen cambios, (insert, update, delete), que se produzcan durante la sesión. CERRAR SESIÓN Una vez el usuario administrador haya terminado de realizar las funciones deseadas en el SGC, accederá a cerrar sesión y se guardarán los datos de fin de sesión en la base de datos, una vez hecho esto el administrador saldrá del SGC. OBTENER LOG DE SESIÓN Esta función será accesible desde el menú una vez el usuario administrador haya sido correctamente identificado. Al pulsar la opción de menú obtener log de sesión se abrirá un formulario donde podremos filtrar el log que deseamos consultar mediante una serie de parámetros: 15

16 Fecha Identificador de usuario Identificador de sesión Una vez filtrados los logs mediante los parámetros de búsqueda, la función mostrará una lista de resultados identificados por el id de sesión. Si pulsamos en el log que deseamos consultar, se abrirá un fichero que contendrá todos los cambios que se hayan realizado en la base de datos durante la sesión seleccionada, es decir, todas las acciones INSERT, UPDATE, DELETE. También se tendrá en cuenta si la consulta es excesiva, en cuyo caso se mostrará un mensaje al usuario indicando que reduzca la búsqueda: GESTIÓN DE NOTICIAS CREAR NOTICIA La función crear noticia creará una nueva noticia en la web, con un estilo diferente en función de la sección. La noticia se podrá publicar en cualquiera de las secciones de la página principal. Una vez se hayan rellenado y validado los campos correspondientes a la noticia, se procederá a guardar los datos en la base de datos, y a partir de ese momento, la noticia será visible para todos los usuarios. EDITAR NOTICIA La función editar noticia permitirá a un usuario administrador realizar cambios en los campos asociados a la noticia seleccionada. Una vez realizados y validados los cambios serán visibles para todos los usuarios. MOSTRAR NOTICIA Y OCULTAR NOTICIA 16

17 Mostrar noticia permitirá hacer visible a todos los usuarios una noticia previamente oculta. Las funciones mostrar y ocultar noticia permitirán dejar preparadas noticias ocultas con antelación, y publicarlas posteriormente cuando sea conveniente. La función ocultar noticia podrá ser de utilidad en el caso en que se quiera ocultar una noticia en un momento dado, porque se haya detectado un error o por alguna otra razón, y no se quiera volver a mostrar hasta que sus datos hayan sido modificados. SUBIR NOTICIA Y BAJAR NOTICIA Las funciones subir y bajar noticia cambiarán la posición de una noticia dentro de cualquiera de los contenedores asociado a las secciones de noticias de la página principal. ELIMINAR NOTICIA La función ofrecerá 3 posibilidades: Eliminar la noticia donde ha sido publicada y publicarla en otra sección de la página principal. Eliminar la noticia de la web pero no de la base de datos. Eliminar la noticia definitivamente. (Borrar la noticia de la base de datos). Una vez concretados los datos necesarios para eliminar la noticia se pedirá confirmación para hacer los cambios efectivos GESTIÓN DE LA BARRA LATERAL Nota: Las funciones asociadas a la gestión de la barra lateral tendrán un comportamiento similar al descrito en la gestión de noticias. Se obviarán las funciones mostrar, ocultar, subir y bajar ya que su comportamiento será idéntico al descrito en la gestión de noticias. 17

18 CREAR EVENTO DE CALENDARIO El calendario contendrá los eventos asociados al mes actual, para que los usuarios puedan identificar las fechas destacadas de forma rápida y visual. Al crear un nuevo evento en el calendario el día asociado al evento aparecerá resaltado en el calendario y se podrá ver su título e información asociados pulsando sobre él. EDITAR EVENTO DEL CALENDARIO Igual que en el caso de las noticias la opción editar evento del calendario permitirá cambiar la información asociada a un evento y publicarla para todos los usuarios. ELIMINAR EVENTO DEL CALENDARIO Permitirá eliminar un evento del calendario. Una vez hechos los cambios se pedirá confirmación al usuario, y cuando se haya eliminado el evento, su día asociado dejará de aparecer resaltado. CREAR DESTACADO El componente destacados contendrá una lista de breves titulares correspondientes a las informaciones más importantes en la actualidad del judo, ya sean noticias de la web, o información externa a la web. La función crear destacado creará un nuevo titular destacado en el componente. EDITAR DESTACADO La función editar destacado permite cambiar los datos asociados a un titular destacado. ELIMINAR DESTACADO 18

19 La función eliminar destacado permite eliminar un titular del componente destacados. Se pedirá confirmación para eliminar como en los casos anteriores. CREAR JUDOKA/FOTO DEL MES El judoca del mes y la foto del mes publicados en la barra lateral, muestran a los usuarios una foto destacada de algún campeonato celebrado durante ese mes. Mediante la función crear de estos 2 componentes se puede crear una nueva foto del mes o judoca del mes, que consistirá en una foto que opcionalmente tendrá un comentario. CREAR ESPACIO PUBLICITARIO Permite añadir una nueva imagen al componente de publicidad que alternará las imágenes de sus patrocinadores siguiendo un intervalo de tiempos fijo. La información asociada al elemento publicitario se guardará en la base de datos, siendo posible controlar la fecha de inicio y fin en la que se mostrará la publicidad REQUERIMIENTOS DE INTERFACES EXTERNOS INTERFACES DE USUARIO Desde la página principal los administradores podrán acceder a toda la funcionalidad del SGC una vez se hayan identificado correctamente e iniciado sesión. De esta manera los administradores no necesitarán navegar en la web para realizar las tareas de gestión y mantenimiento. 19

20 El diseño de la interfaz se expondrá más detalladamente en el capítulo de diseño e implementación REQUERIMIENTOS DE EFICIENCIA La aplicación debe permitir el acceso en paralelo de los integrantes del grupo HJ, de manera que durante los campeonatos los administradores puedan publicar la información simultáneamente. Al crear y administrar los contenidos se debe asegurar que la información de la base de datos es correcta en todo momento, y las acciones realizadas sobre los contenidos de la aplicación mediante el SGC se realizan en un tiempo razonable. Se debe asegurar un tratamiento seguro de las contraseñas de los usuarios administradores al iniciar una sesión, para asegurar que ningún usuario pueda entrar en la aplicación de forma no autorizada ATRIBUTOS SEGURIDAD Al manipular la aplicación mediante el gestor de contenidos se deben tener en cuenta algunas restricciones de seguridad. En primer lugar hay que asegurar que solamente los usuarios administradores puedan tener acceso al sistema gestor de contenidos protegiendo las claves de acceso. Por otra parte el hecho de que pueda haber varios administradores conectados al mismo tiempo, especialmente durante los campeonatos, hace necesario un motor de almacenamiento de bases de datos que permita acceso concurrente de usuarios y el uso de transacciones. Las acciones realizadas en la gestión del portal pueden implicar el acceso a varias tablas, y un error en la mitad del proceso podría tener como resultado una base de datos con información 20

21 corrupta. En estas circunstancias se debe elegir un sistema gestor de bases de datos que permita el uso de transacciones ACID (Atomicidad, Consistencia, Aislamiento y Durabilidad), bloqueo de registros e integridad referencial. Por último es importante que se registren las acciones realizadas en el portal web de manera que si se produce un error los administradores puedan identificar qué usuario y qué función fue la causante del error y que partes de la base de datos pueden haber sido afectadas. Esto se conseguirá mediante el uso de sesiones durante las que se guardará en la base de datos la actividad del administrador, de forma que se pueda consultar posteriormente MANTENIMIENTO Se deben tomar las acciones necesarias para minimizar las acciones de mantenimiento, ya que la aplicación debe ser gestionada por usuarios sin especiales conocimientos informáticos. 21

22 3 DISEÑO E IMPLEMENTACIÓN En este apartado se analizarán las tecnologías empleadas, y se describirá el diseño de la aplicación desde el modelo de arquitectura en 3 capas: Capa de presentación, lógica de negocio y capa de datos. 3.1 ANÁLISIS DE LAS TECNOLOGÍAS EMPLEADAS PORQUÉ USAR TECNOLOGÍAS DE SOFTWARE LIBRE El movimiento open source comenzó como una oposición consciente a la mentalidad de la propiedad corporativa. Sus comienzos pueden encontrase en el MIT, (Massachusetts Institute of Technology), en los años 70, cuando Richard Stallman comenzó un movimiento para compartir código entre todos los programadores, y señaló la necesidad de una comunidad de desarrolladores en constante colaboración. Pronto salieron a relucir las ventajas de este movimiento, el software libre cuesta poco o nada de usar y es especialmente atractivo para ONGs, universidades y organizaciones cuyos presupuestos son variables. Por otra parte el software open source puede ser modificado para su adaptación a cada necesidad específica, es más robusto (probado), que el software comercial, más fiable y seguro. (1) 22

23 Este tipo de tecnologías tienen cada vez más aceptación en la industria de internet española. Si bien es cierto que solamente un 14% de las grandes empresas apuesta por el software libre, constituye un 33% entre las pymes españolas -según el Estudio sobre el estado del arte del Software de Fuentes Abiertas en la empresa española Entre las principales ventajas encontradas entre las empresas que apostaron por el software libre se encuentran la reducción de costes por licencias y coste total de propiedad, seguidas por el acceso al código fuente y una elevada valoración de los estándares y procesos de desarrollo abierto. Aunque algunas empresas no encuentran en las Administraciones el ejemplo open source que se da en otros estados más avanzados que el nuestro, otras afirman que las empresas y administraciones empiezan a ser conscientes de las ventajas que ofrece un modelo de desarrollo empresarial sostenible como el ofrecido por las tecnologías de software libre basado en la cooperación, innovación y transferencia de conocimientos entre otros valores. (2) PARTE CLIENTE HTML HTML fue creado en 1990 por Tim Berners-Lee con el fin de crear un medio sencillo para compartir artículos de investigación entre universidades. El proyecto creció hasta convertirse en un gran éxito y sentó las bases para crear la web tal y como la conocemos hoy en día. (3) Las siglas HTML pertenecen al término Hyper Text Markup Language o (Lenguaje de Marcado de Hipertexto), el lenguaje HTML es el encargado de publicar tablas, listas, y todo tipo de elementos de texto. HTML permite elaborar 23

24 formularios, navegar por las distintas páginas mediante el uso de links de hipertexto o publicar material multimedia. (4) CSS Las siglas CSS pertenecen al término hojas de estilo en cascada, (Cascading Style Sheets). CSS permite definir características como el aspecto con el que se va a presentar el documento en el navegador, como se va a imprimir o incluso como sería pronunciado por un dispositivo de lectura. Es usado tanto en documentos HTML como en documentos XML. Las hojas de estilo permiten un mayor control sobre el aspecto de los documentos a la vez que ofrecen la posibilidad de separar el contenido de la presentación, siendo posible controlar el aspecto de varias páginas a la vez. El código CSS puede ser incrustado en el código HTML, sin embargo resulta más conveniente escribirlo en un archivo aparte, ya que, de esta manera, no hace falta cambiar el estilo de un elemento en todas las páginas en que aparece, sino que bastaría con modificar su definición para actualizar los cambios automáticamente. Una hoja de estilo CSS está formada por una serie de reglas aplicadas a uno o más documentos HTML o XML. Una regla tiene 2 partes: un selector y su declaración. A su vez una declaración está compuesta por una propiedad y su valor asociado. Un ejemplo de regla CSS sería el siguiente: hr {color:sienna;} (5) (6) JAVASCRIPT Los comienzos de Javascript se remontan a 1995 cuando Brendan Eich un trabajador de Netscape creo el lenguaje LiveScript. Este lenguaje ofrecía una respuesta a la necesidad de incorporar un lenguaje de programación que se ejecutara en el navegador, para solucionar los problemas derivados del aumento de la complejidad de las aplicaciones, y la lentitud de la velocidad de 24

25 navegación. Posteriormente se desarrollaría este lenguaje bajo el nombre de JavaScript. (7) JavaScript es un estándar basado en ECMA-262, una especificación para lenguajes script mantenido por Ecma International, una organización sin ánimo de lucro cuyo objetivo es la redacción de normas y estándares internacionales. El lenguaje JavaScript ha tenido una gran evolución en los últimos años pasando de ser utilizado solamente en algunas utilidades de la parte cliente, hasta convertirse en un lenguaje popular y potente que cada año crece en funcionalidades. Javascript ha contribuido además al éxito de aplicaciones importantes como Google Maps, Gmail o Google Docs. JavaScript unido a la interfaz de peticiones XMLHttpRequest (lo que se conoce como AJAX), ha permitido que eventos de usuario dentro del navegador tengan como consecuencias peticiones de información a servidores web. Entre los inconvenientes de JavaScript se encuentra su lentitud para ser ejecutado en los navegadores. El sistema operativo Google Chrome pretende dar solución a este problema permitiendo una ejecución más rápida de JavaScript y AJAX. (8) PROTOTYPE Prototype es un framework JavaScript usado para facilitar el desarrollo de aplicaciones web dinámicas. Fue desarrollado por Sam Stephenson y un grupo de desarrolladores open source y fue una de las primeras librerías JavaScript en destacar al lanzarse la web 2.0. Permite a los programadores centrarse en el código y obviar las cuestiones referentes a la compatibilidad entre los navegadores. Entre sus ventajas se encuentran un amplio soporte Ajax, facilidad para la manipulación del DOM, construcciones de programación de alto nivel, y un framework orientado a objetos con un diseño de clases conocido. Prototype es usado por plataformas como Microsoft Internet Explorer a partir de la versión 25

26 6.0, Mozilla Firefox a partir de la versión 1.5, Apple Safari a partir de la versión 2.0.4, Opera a partir de la versión 9.25 o Chrome a partir de la versión 1.0. (9) PARTE SERVIDOR APACHE El proyecto Apache surgió para crear un recurso de libre acceso, robusto y de calidad comercial de un servidor Web HTTP. Este proyecto fue llevado a cabo por voluntarios de todo el mundo. En 1995 una primera versión del servidor resultó ser un gran éxito y en 1999 miembros del grupo Apache formaron el Apache Sofware Fundation que proporcionaría apoyo financiero, legal y organizacional para asegurar el futuro del proyecto, e impulsaría gran cantidad de proyectos de código libre. (10) El servidor Apache es modular, multiplataforma, de código libre, extensible y resulta muy fácil conseguir ayuda y soporte. Estas características lo convirtieron enseguida en una de las opciones más populares. Desde 1996 fue el más usado llegando al 70% de los sitios en Apache se muestra como un servidor muy competitivo, rápido, estable y con más ventajas que otros servidores, incluso en entornos con millones de visitas al día. (11) PHP El lenguaje PHP fue creado por Rasmus Lerdorf en 1995, como un simple conjunto de scripts de Perl para el control de acceso a currículums on-line, el lenguaje fue creciendo en funcionalidad hasta permitir a los usuarios desarrollar sencillas aplicaciones Web dinámicas. (12) En 1998 se publicó la tercera versión de PHP capaz de competir con productos similares como ASP o JSP. (13) La unión entre su potencia y su simplicidad hacen de PHP un lenguaje 26

27 muy popular, soportado por la mayoría de los proveedores de Internet y usado en millones de dominios. En la versión 5 de PHP se realizaron importantes incorporaciones como la programación orientada a objetos y una extensión mejorada de mysql. La próxima versión de PHP (PHP V.6), pretende añadir nuevas mejoras que hagan de PHP un lenguaje más fácil de usar y más seguro. Entre las mejoras de la nueva versión se encuentra un mayor soporte para codificar caracteres con unicode, (que se traduce en la posibilidad de trabajar con caracteres de cualquier lenguaje del mundo), o el uso de namespaces. (14) (15) La base de datos más adecuada para trabajar con PHP es mysql ya que mysql y PHP han sido desarrollados teniéndose en cuenta el uno al otro, ambos son open source y tienen una amplia comunidad de apoyo, su eficiencia y simplicidad permiten un procesamiento más rápido. (13) mysql mysql fue desarrollada en 1990 basada en msql una simple y pequeña base de datos a partir de la que se crearía una base de datos más robusta que se convertiría en mysql. MySQL es una base de datos relacional gratuita que se distribuye bajo un sistema de doble licencia. Se puede obtener gratuitamente bajo licencia GPL y en el caso en el que se quiera distribuir una aplicación que no cumpla los téminos GPL pero que incluya mysql existe también una licencia comercial. (16) Ofrece una gran adaptabilidad permitiendo gran variedad de tipos de datos, y lo que es menos común, la posibilidad de elegir el tipo de tabla en el que guardar los registros, incluso permitiendo diferentes tipos de tablas en una misma base de datos. (17) El motor de de bases de datos MyISAM es el proporcionado por defecto y es capaz de manejar eficientemente grandes cantidades de datos, sin embargo existen muchos más tipos cada uno con sus ventajas. 27

28 mysql Es una base de datos rápida, fácil de configurar y de aprender a usar, con amplia documentación de apoyo, acceso al código fuente y buena portabilidad. (16) La última versión de mysql, la versión 5.1 es comparable a cualquier otra base de datos de pago como Oracle, Informix o SQL Server. (13) COMUNICACIÓN CLIENTE SERVIDOR AJAX AJAX es el acrónimo de Asynchronous JavaScript And XML, esta técnica permite hacer llamadas al servidor en segundo plano via JavaScript, y recuperar datos adicionales cuando el usuario lo requiera, actualizando solamente la parte de la página deseada y no la página completa. Gracias a esta cualidad AJAX permite crear aplicaciones intuitivas y con capacidad de respuesta, además está basado en tecnologías y características ya existentes y es soportado por la mayoría de los navegadores. (18) Mediante el uso de AJAX es posible la interacción con el servidor, acceder y manipular el código HTML de la página y el intercambio de datos entre el cliente y el servidor mediante el objeto XMLHttpRequest. En el diagrama inferior se puede ver un ejemplo del intercambio de datos entre cliente y servidor realizado mediante técnicas AJAX, con el framework usado en la aplicación. En esta aplicación se ha sustituido el formato XML por el formato JSON, (JavaScript Object Notation), que es un formato ligero de intercambio de datos cuya simplicidad ha favorecido su uso como alternativa a XML en AJAX. (19) 28

29 Ilustración 1: Diagrama de intercambio de datos entre cliente y servidor mediante AJAX (20) Entre las desventajas de ésta técnica se encuentra el hecho de que su uso indiscriminado y sin fundamento puede reducir la efectividad del sitio web, por otra parte es posible deshabilitar JavaScript en la parte del cliente lo que haría no funcional el código AJAX introducido. En el caso de la aplicación Hajimejudo solamente se utilizarán AJAX y JavaScript en el sistema gestor de contenidos lo que solucionará este problema y permitirá además indexar correctamente la aplicación en los motores de búsqueda. (18) Por otra parte AJAX es una tecnología cuyo uso es generalizado y aceptado por los principales líderes de la industria de internet, entre ellos Google, Yahoo, Amazon o Microsoft. Otra de las ventajas de AJAX es su compatibilidad con cualquier tipo de servidor y lenguaje de programación web estándar, y el conseguir dotar a las aplicaciones web de características que antes solo podían esperarse de una aplicación de escritorio. Todas estas características han hecho que AJAX sea una tecnología cada vez más en auge. (19) 29

30 JSON Las siglas JSON describen el término JavaScript Object Notación que es un formato ligero de intercambio de datos, fácil de generar y analizar. Está basado en un subconjunto del lenguaje de programación JavaScript, Standard ECMA ª Edición Diciembre JSON es por una parte, una colección de pares nombre-valor, y por otra una lista ordenada de valores. Estas estructuras de datos son universales y soportadas por todos los lenguajes de programación modernos, lo que convierte a JSON en un formato ideal para el intercambio de datos. (21) Qué ventajas ofrece el formato JSON frente a XML? Principalmente velocidad, ya que XML es un lenguaje auto descriptivo y requiere una gran cantidad de etiquetas para representar la información. Esto hace que se incremente notablemente la cantidad de información enviada entre cliente y servidor de la que solamente unos bytes son en realidad información importante. Los objetos JSON resultan más pequeños que sus documentos XML equivalentes. Ilustración 2: Comparativa entre la representación de un objeto de datos en formato JSON y XML Arriba se pueden apreciar estas diferencias en los respectivos ejemplos de un objeto de datos representado en formato JSON (a la izquierda), y el mismo objeto de datos representado en formato XML (a la derecha). (22) 30

31 3.2 ARQUITECTURA DE LA APLICACIÓN El portal HJ ha sido desarrollado siguiendo el modelo de arquitectura en 3 capas. Capa de presentación, capa negocio y capa de datos. La ventaja principal de este estilo de programación es que el desarrollo se puede llevar a cabo en varios niveles y, si fuera necesario hacer algún cambio, sólo se vería afectado el nivel requerido. Ilustración 3: Esquema conceptual de la arquitectura de la aplicación Capa de presentación: la capa de presentación o interfaz gráfica es la capa con la que el usuario se comunica con la aplicación. Recoge y valida la información enviada por los usuarios y presenta los datos con el formato adecuado. Las tecnologías implicadas en esta capa son HTML, CSS y JavaScript. Por una parte HTML ofrece la estructura del portal web, CSS aplica los estilos necesarios para hacer de la aplicación un entorno amigable, mientras que JavaScript es el encargado de realizar las operaciones necesarias en el navegador. Las peticiones AJAX se situarían entre la capa de presentación y la de negocio. 31

32 Capa de negocio: Esta capa recibe las peticiones del usuario y envía las respuestas tras procesarlas. PHP es la tecnología implicada en esta capa, proporcionando un conjunto de funciones capaces de comunicarse con la capa de datos y la capa de presentación. Capa de datos: En esta capa se almacenan los datos, se reciben las peticiones de información y se devuelven con la información seleccionada. La tecnología empleada en esta capa es la base de datos mysql, y las acciones realizadas en la base de datos se harán mediante el lenguaje SQL. 3.3 CAPA DE PRESENTACIÓN DISEÑO CSS CSS ofrece 3 enfoques diferentes de diseño web, cada uno con sus ventajas e inconvenientes según cada caso. DISEÑO LÍQUIDO Los defensores del diseño líquido argumentan que este tipo de diseño ocupa mejor el espacio disponible y evita diseñar según la resolución del monitor, sin embargo se pierde el control sobre el ancho del contenido y sobre los saltos de línea. En monitores de dimensiones extremas los elementos pueden estar demasiado estirados o comprimidos y en los monitores grandes las líneas de contenido pueden resultar demasiado largas y muy incómodas de leer. DISEÑO FIJO Los diseños fijos están basados en conceptos tradicionales del diseño gráfico como la relación entre los elementos de la página o anchos de línea 32

33 confortables. Para realizar un diseño fijo hay que elegir un ancho de página, que normalmente es uno que se ajuste a resoluciones de monitor comunes. El contenido de la parte derecha de la web permanecerá oculto si la ventana del navegador es más pequeña que el ancho de página. Y existe el peligro de que los elementos se redimensionen si se cambia el tamaño de letra. Por otra parte es el diseño más predecible, ofreciendo un mejor control de la longitud de línea. DISEÑO ELÁSTICO La ventaja del diseño elástico frente al diseño líquido y fijo es que las líneas son predecibles independientemente del tamaño de la fuente. El diseño elástico cambia sus dimensiones en función del tamaño de texto, haciendo uso de la unidad de medida em. Una de las peculiaridades de este tipo de diseño es que permite hacer aumentar el tamaño de la página mediante la propiedad zoom, lo que es especialmente interesante para personas con visión limitada. Como puntos débiles encontramos que las imágenes no cambian sus dimensiones junto con el texto, y el tamaño del layout puede llegar a exceder el tamaño de la ventana del navegador usando tamaños de texto muy grandes. (23) ELECCIÓN HAJIMEJUDO La web contiene muchas imágenes y resulta arriesgado no poder asegurar un correcto ajuste de las imágenes respecto del texto al aumentar el tamaño de fuente. Por otra parte el diseño líquido presenta anchos de línea impredecibles, lo que resulta desaconsejable en un periódico electrónico en el que es muy importante poder leer las noticias de forma cómoda. Anchos de línea muy grandes provocarían un inmediato desinterés entre los lectores. 33

34 El diseño estático parece ofrecer la opción más fiable a la hora de presentar el contenido de una web de noticias deportivas. Es un diseño predecible, lo que es interesante para posibles ampliaciones y para el mantenimiento del portal, y ofrece el mejor compromiso para presentar la información en el mejor formato a la mayoría de usuarios. En el caso de HJ se ha optado por un diseño de página centrado para ocupar mejor la ventana del navegador. A continuación se describirá la estructura de los elementos del layout final. ELEMENTOS DEL LAYOUT CABECERA: Está compuesta por el banner y la sección de menú como podemos ver en las (secciones 1 y 2 de la Ilustración 4). Esta parte junto con el pie y la barra lateral serán comunes a todas las páginas y darán a la web un aspecto homogéneo y reconocible. CUERPO: En el cuerpo (sección nº 4), es donde se mostrará el contenido web. Aquí se presentarán las noticias deportivas con el formato correspondiente a la sección. En la página de inicio este espacio se dividirá en 3 áreas la primera 4.1 se dedicará a las noticias de portada, la 4.2 a las noticias de sección izquierda, donde se reposicionarán las noticias de portada al ser sustituidas por las nuevas noticias. Finalmente en el área 4.3 se situarán las noticias más antiguas antes de pasar a la sección de noticias anteriores, situadas en una página aparte. 34

35 Ilustración 4: Esquema del layout general (izq.) y de la página home (dcha). Para el resto de páginas de la web, (las correspondientes a las noticias de cada sección), el esquema será el de la izquierda, y las noticias de cada sección que excedan el máximo de noticias por sección, serán accesibles desde un enlace noticias anteriores. BARRA LATERAL: En la barra lateral (sección nº 3) se mostrarán aquellos contenidos sobre los que se quiera llamar la atención del usuario: calendario de eventos, titulares destacados, judocas y fotos del mes, y la publicidad del portal. PIE: En el pie (sección 5), solo se mostrará información sobre la organización Hajimejudo y se deja como opción reservar un espacio publicitario extra INTERFAZ DE USUARIO 35

36 En este apartado se definirá la interfaz gráfica de usuario mediante la que los usuarios administradores realizarán las tareas de publicación y mantenimiento. Para poder acceder a la gestión de la página será necesario pulsar el link de login situado en la parte superior de la página. Ilustración 5: Botón de Inicio de Sesión Una vez pulsado el link se abrirá un pequeño formulario donde introducir el login y password del usuario administrador. Ilustración 6: Formulario de Inicio de Sesión Al enviar los datos del formulario se recargará la página en modo seguro (SSL) y se creará una sesión. Al mismo tiempo se ocultará el formulario de autenticación y se mostrará un link para desconectarse y un menú de gestión de administradores. Ilustración 7: Botón de desconexión y menú administrador Cuando los usuarios accedan a la parte privada la página presentará este aspecto en el que se pueden apreciar las barras de herramientas y el menú de gestión de administradores: 36

37 Ilustración 8: Web parte privada La funcionalidad del sistema gestor de contenidos se encuentra disponible por una parte en la cabecera sección de menú, y por otra parte en los botones de acción situados debajo de las noticias de la página principal, y bajo los elementos de la barra lateral. Como se puede apreciar con mayor detalle en la imagen inferior. Ilustración 9: Barra de herramientas La publicación de contenidos se gestionará desde la página principal que contendrá noticias de todas las secciones. Una vez hayan sido introducidas en la base de datos y publicadas en la portada, las demás secciones se generarán automáticamente a partir de la información guardada en la base de datos. Esto resulta muy cómodo para los administradores al no necesitar navegar en la web para poder actualizar los contenidos. Lo que proporciona rapidez y agilidad en la gestión del portal. Al pulsar los botones de acción correspondientes a las acciones crear, editar o eliminar se abrirá un formulario en el que el usuario podrá rellenar la información necesaria para gestionar los contenidos. Se puede observar un ejemplo en la imagen inferior. 37

38 Ilustración 10: Ejemplo de formulario. Las acciones de subir, bajar, mostrar u ocultar contenidos se realizarán automáticamente al pulsar su icono correspondiente sin necesidad de formularios. Una vez rellenado el formulario con los datos, estos se validarán y si algún campo fuera incorrecto se avisará al usuario con un mensaje antes de realizarse ninguna acción. Cuando se realice la acción si todo ha salido bien se refrescarán los cambios, y se mostrará feedback al usuario. Si ha habido algún error en la transacción se mostrará un mensaje al usuario informándole de que se ha producido un error para que repita la acción. 38

39 Ilustración 11: Mensaje Acción correcta Ilustración 12: Mensaje Error MAPA WEB El mapa web del portal es un esquema conceptual que permite mostrar de una forma visual las páginas accesibles desde cada una de las páginas de la web. Como se puede ver en el siguiente diagrama desde la página home se puede acceder a todas las páginas del portal Hajimejudo, excepto las páginas del tercer nivel que solo serán accesibles desde su sección correspondiente. Desde cada sección se puede acceder a todas las demás y a la página home. Esto es posible ya que el menú contiene un link a todas las secciones y se encuentra disponible desde cualquier punto del portal. Esto permite que sea 39

40 fácil para los usuarios encontrar la información buscada. No es necesario navegar por la web para ver las últimas noticias, ya que en la página principal se encuentran las noticias recientes de todas las secciones, y si se quiere consultar las noticias de una sección determinada, basta con ir a la opción de menú correspondiente. Ilustración 13: Mapa Web del portal Hajimejudo 3.4 CAPA DE NEGOCIO DIAGRAMAS DE CASOS DE USO La descripción e identificación de los casos de uso de una aplicación permite definir el comportamiento del sistema con mayor claridad, y capturar los 40

41 requerimientos funcionales del sistema a desarrollar, proporcionando un entendimiento común entre el cliente y el desarrollador. Éste tipo de diagramas definen un conjunto de propósitos para los que un actor puede usar el sistema. Por otra parte el diagrama de casos de uso se acompaña de una serie de plantillas donde se documenta cada caso de uso adjuntando información extra como precondiciones, flujo normal de actividad, flujo alternativo, postcondiciones, comentarios etc ACTORES Los actores son entidades ajenas al sistema y que pueden interactuar o comunicarse con el mismo. Estos pueden ser usuarios humanos, hardware externo u otros sistemas. Un usuario tiene un nombre y se comunica con el sistema enviando y recibiendo estímulos o eventos. Los actores representan un rol que puede desempeñar alguien o algo que interactúa o que necesita intercambiar información con el sistema. Hay 2 tipos de actores que interactuarán en la aplicación HJ. Por una parte los usuarios no identificados en el sistema gestor de contenidos (Usuarios Generales), y por otra los usuarios identificados en el SGC o usuarios administradores, cuyos datos deben haber sido introducidos previamente en el sistema para ser dados de alta. Ilustración 14: Roles de la aplicación HJ DIAGRAMA Y DESCRIPCIÓN DE CASOS DE USO 41