UNIVERSIDAD POLITCNICA DE VALENCIA

FACULTAD DE INFORMTICA

DISEO E IMPLEMENTACIN DE UN PORTAL WEB PARA LA GESTIN DE EVENTOS DEPORTIVOS

PROYECTO FIN DE CARRERA PRESENTADO POR:
Sabina Lucas Abad

DIRIGIDO POR: Germn Vidal Oriola

Valencia, 2011

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 informacin recogida en los distintos eventos a los que se desplacen. El portal web funcionar como un pequeo peridico electrnico. Dispondr de una parte pblica, en la que los usuarios de la web podrn acceder a las distintas secciones y consultar la informacin expuesta, y una parte privada, a la que slo podrn acceder los integrantes del grupo HJ previa identificacin. Una vez identificados, los usuarios administradores podrn crear, editar, modificar y mantener la informacin de la web sin especiales conocimientos informticos, y de una forma rpida y sencilla.

NDICE
1 2 INTRODUCCIN ....................................................................................................................................8 ANLISISDELAAPLICACIN...............................................................................................................10 2.1 ESPECIFICACINDEREQUERIMIENTOS......................................................................................10 PRESENTACINDELPROBLEMA...........................................................................................10 MBITO........................................................................................................................10 DEFINICIONES,ACRNIMOSYABREVIATURAS ...........................................................11 PERSPECTIVADELAAPLICACIN.................................................................................11 FUNCIONESDELAAPLICACIN ...................................................................................12 CARACTERSTICASDELOSUSUARIOS ..........................................................................13

2.1.1

2.1.1.1 2.1.1.2 2.1.1.3 2.1.1.4 2.1.1.5 2.1.2

REQUERIMIENTOSESPECFICOS ...........................................................................................14 REQUERIMIENTOSFUNCIONALES................................................................................14 GESTINDEADMINISTRADORES ............................................................................14 GESTINDESESIONES.............................................................................................15 GESTINDENOTICIAS.............................................................................................16 GESTINDELABARRALATERAL .............................................................................17

2.1.2.1

2.1.2.1.1 2.1.2.1.2 2.1.2.1.3 2.1.2.1.4 2.1.2.2

REQUERIMIENTOSDEINTERFACESEXTERNOS............................................................19 INTERFACESDEUSUARIO ........................................................................................19

2.1.2.2.1 2.1.2.3 2.1.2.4

REQUERIMIENTOSDEEFICIENCIA................................................................................20 ATRIBUTOS...................................................................................................................20 SEGURIDAD..............................................................................................................20 MANTENIMIENTO....................................................................................................21

2.1.2.4.1 2.1.2.4.2 3

DISEOEIMPLEMENTACIN .............................................................................................................22 3.1 ANLISISDELASTECNOLOGASEMPLEADAS.............................................................................22 PORQUUSARTECNOLOGASDESOFTWARELIBRE ............................................................22 PARTECLIENTE......................................................................................................................23 HTML............................................................................................................................23 CSS ...............................................................................................................................24 JAVASCRIPT ..................................................................................................................24 PROTOTYPE..............................................................................................................25

3.1.1 3.1.2

3.1.2.1 3.1.2.2 3.1.2.3

3.1.2.3.1 3.1.3

PARTESERVIDOR ..................................................................................................................26 APACHE ........................................................................................................................26 3

3.1.3.1

3.1.3.2 3.1.3.3 3.1.4

PHP...............................................................................................................................26 mySQL .......................................................................................................................... 27

COMUNICACINCLIENTESERVIDOR....................................................................................28 AJAX .............................................................................................................................28 JSON.............................................................................................................................30

3.1.4.1 3.1.4.2 3.2 3.3

ARQUITECTURADELAAPLICACIN............................................................................................31 CAPADEPRESENTACIN ............................................................................................................32 DISEOCSS...........................................................................................................................32 INTERFAZDEUSUARIO .........................................................................................................35 MAPAWEB ...........................................................................................................................39

3.3.1 3.3.2 3.3.3 3.4

CAPADENEGOCIO......................................................................................................................40 DIAGRAMASDECASOSDEUSO............................................................................................40 ACTORES ......................................................................................................................41 DIAGRAMAYDESCRIPCINDECASOSDEUSO ...........................................................41 GESTINDEADMINISTRADORES ............................................................................42 GESTINDESESIONES.............................................................................................46 GESTINDENOTICIAS.............................................................................................49 GESTINDELABARRALATERAL .............................................................................58

3.4.1

3.4.1.1 3.4.1.2

3.4.1.2.1 3.4.1.2.2 3.4.1.2.3 3.4.1.2.4 3.4.2 3.5

DIAGRAMASDEACTIVIDAD..................................................................................................68

CAPADEDATOS.......................................................................................................................... 69 CARACTERSTICASDELABASEDEDATOS ............................................................................69 DIAGRAMAER .....................................................................................................................71 DIAGRAMADECLASES..........................................................................................................84

3.5.1 3.5.2 3.5.3 4

CONCLUSIONESYPERSPECTIVAS .......................................................................................................88 4.1 4.2 4.3 OBJETIVOSCONSEGUIDOS .........................................................................................................88 POSIBLESAMPLIACIONES ...........................................................................................................89 CONSIDERACIONESFINALES.......................................................................................................90

REFERENCIAS ......................................................................................... Error!Marcadornodefinido. 5.1 5.2 NDICEDEGRFICAS...................................................................... Error!Marcadornodefinido. Bibliografa..................................................................................... Error!Marcadornodefinido.

ANEXOS...............................................................................................................................................94 6.1 6.2 6.3 6.4 GESTINDEADMINISTRADORES ...............................................................................................94 GESTINDESESIONES................................................................................................................97 GESTINDENOTICIAS ................................................................................................................98 GESTINDELABARRALATERAL...............................................................................................103

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

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

Ilustracin 53: Diagrama de actividad correspondiente al caso de uso crear espacio publicitario ..................................................................................................................................................................109 Ilustracin 54: Diagrama de actividad correspondiente al caso de uso editar espacio publicitario ..................................................................................................................................................................110

1 INTRODUCCIN
El grupo Hajimejudo, es un grupo de aficionados al Judo que decidi compartir su aficin informando a pie de pista de la actualidad de los distintos eventos deportivos a los que se desplazaban. En este momento existen pocas pginas de judo en Espaa que generen noticias, y por lo tanto HJ poda ser una alternativa interesante para informarse sobre ste deporte. El formato elegido para mostrar la informacin recogida en los distintos campeonatos fue, como en tantos otros casos, el blog. Con el tiempo el blog fue creciendo en secciones, cantidad de informacin y visitantes, con lo que navegar por el blog se hizo ms lento y su mantenimiento ms complicado. Por otra parte tambin exista el problema de que, al no disponer de una base de datos, la informacin no poda 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 informacin publicada con anterioridad de forma estructurada y ordenada, permitira realizar funcionas tales como: generar noticias sobre informaciones pasadas, exponer estadsticas 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 fcil de ampliar donde la informacin 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 actualizacin y mantenimiento sencillos con pocos conocimientos informticos. Por otra parte la web debe permitir publicar informacin multimedia con una calidad adecuada.

Para conseguir los objetivos marcados se opt por tecnologas web relacionadas con el software libre. Durante la realizacin del proyecto se emple una combinacin de HTML, CSS, y Javascript para la interfaz web y PHP y MySQL para la parte servidor, conectadas mediante tcnicas AJAX. Los objetivos expuestos se desarrollarn en profundidad en los apartados siguientes, que se organizarn de la siguiente manera: ANLISIS DE LA APLICACIN: Dentro de este apartado se realizar una descripcin completa del problema desde diferentes perspectivas, y se expondrn todos los requerimientos necesarios para llevar a cabo la implementacin de la aplicacin. DISEO E IMPLEMENTACIN: Este apartado se va a centrar en el diseo de la aplicacin siguiendo el modelo de arquitectura en 3 capas. Se comenzar con un apartado dedicado a las tecnologas y la descripcin del framework empleado. A continuacin se describir la capa de presentacin, 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 aplicacin CONCLUSIONES Y PERSPECTIVAS Aqu se expondrn las conclusiones obtenidas durante la realizacin del proyecto, objetivos conseguidos, y posibles ampliaciones. REFERENCIAS BIBLIOGRFICAS Como referencias se mostrarn los libros, pginas Web y otras referencias utilizadas en la realizacin de esta memoria. ANEXOS En el apartado de anexos se mostrar la informacin que por su extensin o complejidad se ha decidido aadir como informacin de consulta.

2 ANLISIS DE LA APLICACIN
Este captulo est dedicado a exponer las condiciones previas que deben exigirse para conseguir los objetivos expuestos en la introduccin. Adems, se describirn los requerimientos derivados del estudio de estos objetivos, definindolos desde diferentes perspectivas.

2.1 ESPECIFICACIN DE REQUERIMIENTOS

En este apartado se definirn los requerimientos necesarios para implementar la aplicacin. En primer lugar se definirn los problemas a resolver y la funcionalidad de la aplicacin, para pasar a definir los requerimientos especficos de los diferentes elementos que interactuarn en la aplicacin. Finalmente se identificarn las restricciones de diseo, seguridad y mantenimiento.

2.1.1

PRESENTACIN DEL PROBLEMA

La aplicacin descrita a continuacin es un portal web que incorporar un pequeo sistema gestor de contenidos, (en adelante SGC). El SGC solo ser accesible previa identificacin de los usuarios administradores, y tendr como objetivo conseguir una gestin sencilla y eficiente del material multimedia recogido en los campeonatos.

2.1.1.1 MBITO

10

El portal web debe tener como prioridad facilitar la publicacin de contenidos para poder informar a los lectores de todo lo que ocurre en los campeonatos en tiempo real. Por esta razn resulta importante que los datos se puedan actualizar de forma intuitiva, rpida y sencilla. El portal web ser usado por 2 tipos de usuarios, administradores y usuarios generales. Los administradores debern identificarse de forma segura en el sistema para poder acceder al SGBD de la aplicacin y proceder a publicar y mantener los contenidos mostrados al resto de usuarios.

2.1.1.2 DEFINICIONES, ACRNIMOS 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

2.1.1.3 PERSPECTIVA DE LA APLICACIN

La aplicacin deber ser capaz de funcionar correctamente en los principales navegadores. La parte pblica 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 identificacin, ser usado principalmente por un solo usuario administrador,

11

pero en las competiciones, varias personas debern acceder simultneamente a la base de datos.

2.1.1.4 FUNCIONES DE LA APLICACIN

A continuacin se muestra la funcionalidad disponible en la aplicacin: 1. Gestin de Administradores: Permite gestionar los usuarios administradores que formarn el grupo HJ. Alta Administrador Edicin Administrador Baja Administrador

2. Gestin de Sesiones: Permite iniciar, cerrar y consultar el log cualquier sesin iniciada en el sistema gestor de contenidos de HJ. Iniciar Sesin Cerrar Sesin Obtener Log de sesin

3. Gestin de Noticias: Permite gestionar las noticias generadas en la aplicacin. Crear Noticia Editar Noticia Mostrar Noticia Ocultar Noticia Bajar Noticia Eliminar Noticia

12

4. Gestin de Elementos de la Barra lateral: Permite gestionar los componentes situados en la barra lateral, que sern comunes a todas las secciones de la aplicacin. 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 botn 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 estticos. Las funciones subir, bajar mostrar y ocultar de los elementos de la barra lateral tendrn el mismo funcionamiento que en el caso de las noticias.

2.1.1.5 CARACTERSTICAS DE LOS USUARIOS

En la aplicacin va a haber 2 tipos de usuarios: usuarios generales y administradores. Los usuarios generales podrn navegar sin necesidad de ejecutar javascript ya que solamente la vista administrador lo incorpora. Esto ofrece una ventaja a la
13

hora de posicionar la pgina, ya que el texto contenido en el cdigo javascript o flash no es reconocido ni indexado por los buscadores. Los robots de bsqueda tienen dificultades para seguir estos enlaces, por lo que es conveniente disponer de otros mecanismos para hacer el cdigo accesible al buscador. (1) Los usuarios administradores no tienen especiales conocimientos informticos por lo que el sistema gestor de contenidos se debe disear de manera que sea fcil de usar y mantener.

2.1.2

REQUERIMIENTOS ESPECFICOS

2.1.2.1 REQUERIMIENTOS FUNCIONALES

2.1.2.1.1 GESTIN DE ADMINISTRADORES

ALTA ADMINISTRADOR Un administrador acceder a la opcin gestin de usuarios del men y seleccionando la opcin alta administrador, rellenar los datos del nuevo administrador, (email, usuario, contrasea, permisos), guardndose estos en la base de datos, a partir de ese momento el nuevo administrador podr entrar en el gestor de contenidos. Si la transaccin no se realiza con xito se avisar al administrador con un mensaje. EDICIN ADMINISTRADOR Un administrador con los permisos adecuados acceder a la opcin gestin de administradores del men y seleccionar la opcin edicin de administrador. Despus seleccionar el administrador a editar y guardar los cambios en la base de datos. Si la transaccin no se realiza con xito se avisar al administrador con un mensaje.

14

BAJA ADMINISTRADOR Desde la opcin de men correspondiente un administrador identificado en el sistema y con los permisos adecuados podr seleccionar el administrador a eliminar, y borrar su informacin asociada de la base de datos. Una vez se confirme la accin, el administrador eliminado no podr acceder al sistema gestor de contenidos. Si existe algn error en el proceso se avisar al administrador mediante un mensaje de error.

2.1.2.1.2 GESTIN DE SESIONES

INICIAR SESIN Los usuarios administradores que quieran acceder al SGC de la aplicacin HJ debern rellenar los campos usuario y contrasea del formulario de identificacin. Se comprobar que los administradores hayan sido dados de alta previamente. Una vez identificado el usuario, se guardarn los datos de inicio de sesin, y a partir de ese momento se guardarn en la base de datos todas las acciones que realicen cambios, (insert, update, delete), que se produzcan durante la sesin. CERRAR SESIN Una vez el usuario administrador haya terminado de realizar las funciones deseadas en el SGC, acceder a cerrar sesin y se guardarn los datos de fin de sesin en la base de datos, una vez hecho esto el administrador saldr del SGC. OBTENER LOG DE SESIN Esta funcin ser accesible desde el men una vez el usuario administrador haya sido correctamente identificado. Al pulsar la opcin de men obtener log de sesin se abrir un formulario donde podremos filtrar el log que deseamos consultar mediante una serie de parmetros:
15

Fecha Identificador de usuario Identificador de sesin

Una vez filtrados los logs mediante los parmetros de bsqueda, la funcin mostrar una lista de resultados identificados por el id de sesin. 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 sesin seleccionada, es decir, todas las acciones INSERT, UPDATE, DELETE. Tambin se tendr en cuenta si la consulta es excesiva, en cuyo caso se mostrar un mensaje al usuario indicando que reduzca la bsqueda:

2.1.2.1.3 GESTIN DE NOTICIAS

CREAR NOTICIA La funcin crear noticia crear una nueva noticia en la web, con un estilo diferente en funcin de la seccin. La noticia se podr publicar en cualquiera de las secciones de la pgina 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 funcin editar noticia permitir a un usuario administrador realizar cambios en los campos asociados a la noticia seleccionada. Una vez realizados y validados los cambios sern visibles para todos los usuarios.

MOSTRAR NOTICIA Y OCULTAR NOTICIA

16

Mostrar noticia permitir hacer visible a todos los usuarios una noticia previamente oculta. Las funciones mostrar y ocultar noticia permitirn dejar preparadas noticias ocultas con antelacin, y publicarlas posteriormente cuando sea conveniente. La funcin 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 razn, 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 cambiarn la posicin de una noticia dentro de cualquiera de los contenedores asociado a las secciones de noticias de la pgina principal. ELIMINAR NOTICIA La funcin ofrecer 3 posibilidades: Eliminar la noticia donde ha sido publicada y publicarla en otra seccin de la pgina 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 confirmacin para hacer los cambios efectivos.

2.1.2.1.4 GESTIN DE LA BARRA LATERAL

Nota: Las funciones asociadas a la gestin de la barra lateral tendrn un comportamiento similar al descrito en la gestin de noticias. Se obviarn las funciones mostrar, ocultar, subir y bajar ya que su comportamiento ser idntico al descrito en la gestin de noticias.

17

CREAR EVENTO DE CALENDARIO El calendario contendr los eventos asociados al mes actual, para que los usuarios puedan identificar las fechas destacadas de forma rpida y visual. Al crear un nuevo evento en el calendario el da asociado al evento aparecer resaltado en el calendario y se podr ver su ttulo e informacin asociados pulsando sobre l. EDITAR EVENTO DEL CALENDARIO Igual que en el caso de las noticias la opcin editar evento del calendario permitir cambiar la informacin 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 confirmacin al usuario, y cuando se haya eliminado el evento, su da asociado dejar de aparecer resaltado. CREAR DESTACADO El componente destacados contendr una lista de breves titulares correspondientes a las informaciones ms importantes en la actualidad del judo, ya sean noticias de la web, o informacin externa a la web. La funcin crear destacado crear un nuevo titular destacado en el componente.

EDITAR DESTACADO La funcin editar destacado permite cambiar los datos asociados a un titular destacado. ELIMINAR DESTACADO

18

La funcin eliminar destacado permite eliminar un titular del componente destacados. Se pedir confirmacin 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 algn campeonato celebrado durante ese mes. Mediante la funcin 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 aadir una nueva imagen al componente de publicidad que alternar las imgenes de sus patrocinadores siguiendo un intervalo de tiempos fijo. La informacin 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.

2.1.2.2 REQUERIMIENTOS DE INTERFACES EXTERNOS

2.1.2.2.1
INTERFACES DE USUARIO

Desde la pgina principal los administradores podrn acceder a toda la funcionalidad del SGC una vez se hayan identificado correctamente e iniciado sesin. De esta manera los administradores no necesitarn navegar en la web para realizar las tareas de gestin y mantenimiento.

19

El diseo de la interfaz se expondr ms detalladamente en el captulo de diseo e implementacin.

2.1.2.3 REQUERIMIENTOS DE EFICIENCIA

La aplicacin debe permitir el acceso en paralelo de los integrantes del grupo HJ, de manera que durante los campeonatos los administradores puedan publicar la informacin simultneamente. Al crear y administrar los contenidos se debe asegurar que la informacin de la base de datos es correcta en todo momento, y las acciones realizadas sobre los contenidos de la aplicacin mediante el SGC se realizan en un tiempo razonable. Se debe asegurar un tratamiento seguro de las contraseas de los usuarios administradores al iniciar una sesin, para asegurar que ningn usuario pueda entrar en la aplicacin de forma no autorizada.

2.1.2.4 ATRIBUTOS
2.1.2.4.1 SEGURIDAD
Al manipular la aplicacin 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 gestin del portal pueden implicar el acceso a varias tablas, y un error en la mitad del proceso podra tener como resultado una base de datos con informacin
20

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 funcin 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.

2.1.2.4.2 MANTENIMIENTO
Se deben tomar las acciones necesarias para minimizar las acciones de mantenimiento, ya que la aplicacin debe ser gestionada por usuarios sin especiales conocimientos informticos.

21

3 DISEO E IMPLEMENTACIN
En este apartado se analizarn las tecnologas empleadas, y se describir el diseo de la aplicacin desde el modelo de arquitectura en 3 capas: Capa de presentacin, lgica de negocio y capa de datos.

3.1 ANLISIS DE LAS TECNOLOGAS EMPLEADAS

3.1.1 PORQU USAR TECNOLOGAS DE SOFTWARE LIBRE
El movimiento open source comenz como una oposicin consciente a la mentalidad de la propiedad corporativa. Sus comienzos pueden encontrase en el MIT, (Massachusetts Institute of Technology), en los aos 70, cuando Richard Stallman comenz un movimiento para compartir cdigo entre todos los programadores, y seal la necesidad de una comunidad de desarrolladores en constante colaboracin. 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 adaptacin a cada necesidad especfica, es ms robusto (probado), que el software comercial, ms fiable y seguro. (1)

22

Este tipo de tecnologas tienen cada vez ms aceptacin en la industria de internet espaola. Si bien es cierto que solamente un 14% de las grandes empresas apuesta por el software libre, constituye un 33% entre las pymes espaolas -segn el Estudio sobre el estado del arte del Software de Fuentes Abiertas en la empresa espaola. 2009. Entre las principales ventajas encontradas entre las empresas que apostaron por el software libre se encuentran la reduccin de costes por licencias y coste total de propiedad, seguidas por el acceso al cdigo fuente y una elevada valoracin de los estndares y procesos de desarrollo abierto. Aunque algunas empresas no encuentran en las Administraciones el ejemplo

open source que se da en otros estados ms 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 tecnologas de software libre basado en la cooperacin, innovacin y transferencia de conocimientos entre otros valores. (2)

3.1.2

PARTE CLIENTE

3.1.2.1 HTML
HTML fue creado en 1990 por Tim Berners-Lee con el fin de crear un medio sencillo para compartir artculos de investigacin 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 da. (3) Las siglas HTML pertenecen al trmino 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

formularios, navegar por las distintas pginas mediante el uso de links de hipertexto o publicar material multimedia. (4)

3.1.2.2 CSS
Las siglas CSS pertenecen al trmino hojas de estilo en cascada, (Cascading Style Sheets). CSS permite definir caractersticas como el aspecto con el que se va a presentar el documento en el navegador, como se va a imprimir o incluso como sera 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 presentacin, siendo posible controlar el aspecto de varias pginas a la vez. El cdigo CSS puede ser incrustado en el cdigo HTML, sin embargo resulta ms conveniente escribirlo en un archivo aparte, ya que, de esta manera, no hace falta cambiar el estilo de un elemento en todas las pginas en que aparece, sino que bastara con modificar su definicin para actualizar los cambios automticamente. Una hoja de estilo CSS est formada por una serie de reglas aplicadas a uno o ms documentos HTML o XML. Una regla tiene 2 partes: un selector y su declaracin. A su vez una declaracin est compuesta por una propiedad y su valor asociado. Un ejemplo de regla CSS sera el siguiente: hr {color:sienna;} (5) (6)

3.1.2.3 JAVASCRIPT
Los comienzos de Javascript se remontan a 1995 cuando Brendan Eich un trabajador de Netscape creo el lenguaje LiveScript. Este lenguaje ofreca una respuesta a la necesidad de incorporar un lenguaje de programacin 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

navegacin. Posteriormente se desarrollara este lenguaje bajo el nombre de JavaScript. (7) JavaScript es un estndar basado en ECMA-262, una especificacin para lenguajes script mantenido por Ecma International, una organizacin sin nimo de lucro cuyo objetivo es la redaccin de normas y estndares internacionales. El lenguaje JavaScript ha tenido una gran evolucin en los ltimos aos pasando de ser utilizado solamente en algunas utilidades de la parte cliente, hasta convertirse en un lenguaje popular y potente que cada ao crece en funcionalidades. Javascript ha contribuido adems 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 informacin 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 solucin a este problema permitiendo una ejecucin ms rpida de JavaScript y AJAX. (8)

3.1.2.3.1 PROTOTYPE
Prototype es un framework JavaScript usado para facilitar el desarrollo de aplicaciones web dinmicas. Fue desarrollado por Sam Stephenson y un grupo de desarrolladores open source y fue una de las primeras libreras JavaScript en destacar al lanzarse la web 2.0. Permite a los programadores centrarse en el cdigo y obviar las cuestiones referentes a la compatibilidad entre los navegadores. Entre sus ventajas se encuentran un amplio soporte Ajax, facilidad para la manipulacin del DOM, construcciones de programacin de alto nivel, y un

framework orientado a objetos con un diseo de clases conocido. Prototype es

usado por plataformas como Microsoft Internet Explorer a partir de la versin
25

6.0, Mozilla Firefox a partir de la versin 1.5, Apple Safari a partir de la versin 2.0.4, Opera a partir de la versin 9.25 o Chrome a partir de la versin 1.0. (9)

3.1.3

PARTE SERVIDOR

3.1.3.1 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 versin del servidor result ser un gran xito y en 1999 miembros del grupo Apache formaron el Apache Sofware Fundation que proporcionara apoyo financiero, legal y organizacional para asegurar el futuro del proyecto, e impulsara gran cantidad de proyectos de cdigo libre. (10) El servidor Apache es modular, multiplataforma, de cdigo libre, extensible y resulta muy fcil conseguir ayuda y soporte. Estas caractersticas lo convirtieron enseguida en una de las opciones ms populares. Desde 1996 fue el ms usado llegando al 70% de los sitios en 2005. Apache se muestra como un servidor muy competitivo, rpido, estable y con ms ventajas que otros servidores, incluso en entornos con millones de visitas al da. (11)

3.1.3.2 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 currculums on-line, el lenguaje fue creciendo en funcionalidad hasta permitir a los usuarios desarrollar sencillas aplicaciones Web dinmicas. (12) En 1998 se public la tercera versin de PHP capaz de competir con productos similares como ASP o JSP. (13) La unin entre su potencia y su simplicidad hacen de PHP un lenguaje
26

muy popular, soportado por la mayora de los proveedores de Internet y usado en millones de dominios. En la versin 5 de PHP se realizaron importantes incorporaciones como la programacin orientada a objetos y una extensin mejorada de mySQL. La prxima versin de PHP (PHP V.6), pretende aadir nuevas mejoras que hagan de PHP un lenguaje ms fcil de usar y ms seguro. Entre las mejoras de la nueva versin 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 ms adecuada para trabajar con PHP es mySQL ya que mySQL y PHP han sido desarrollados tenindose en cuenta el uno al otro, ambos son open source y tienen una amplia comunidad de apoyo, su eficiencia y simplicidad permiten un procesamiento ms rpido. (13)

3.1.3.3 mySQL
mySQL fue desarrollada en 1990 basada en mSQL una simple y pequea base de datos a partir de la que se creara una base de datos ms robusta que se convertira 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 aplicacin que no cumpla los tminos GPL pero que incluya mySQL existe tambin una licencia comercial. (16) Ofrece una gran adaptabilidad permitiendo gran variedad de tipos de datos, y lo que es menos comn, 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 ms tipos cada uno con sus ventajas.

27

mySQL Es una base de datos rpida, fcil de configurar y de aprender a usar, con amplia documentacin de apoyo, acceso al cdigo fuente y buena portabilidad. (16) La ltima versin de mySQL, la versin 5.1 es comparable a cualquier otra base de datos de pago como Oracle, Informix o SQL Server. (13).

3.1.4

COMUNICACIN CLIENTE SERVIDOR

3.1.4.1 AJAX
AJAX es el acrnimo de Asynchronous JavaScript And XML, esta tcnica 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 pgina deseada y no la pgina completa. Gracias a esta cualidad AJAX permite crear aplicaciones intuitivas y con capacidad de respuesta, adems est basado en tecnologas y caractersticas ya existentes y es soportado por la mayora de los navegadores. (18) Mediante el uso de AJAX es posible la interaccin con el servidor, acceder y manipular el cdigo HTML de la pgina 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 tcnicas AJAX, con el framework usado en la aplicacin. En esta aplicacin 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

Ilustracin 1: Diagrama de intercambio de datos entre cliente y servidor mediante AJAX

(20) Entre las desventajas de sta tcnica 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 hara no funcional el cdigo AJAX introducido. En el caso de la aplicacin Hajimejudo solamente se utilizarn AJAX y JavaScript en el sistema gestor de contenidos lo que solucionar este problema y permitir adems indexar correctamente la aplicacin en los motores de bsqueda. (18) Por otra parte AJAX es una tecnologa cuyo uso es generalizado y aceptado por los principales lderes 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 programacin web estndar, y el conseguir dotar a las aplicaciones web de caractersticas que antes solo podan esperarse de una aplicacin de escritorio. Todas estas caractersticas han hecho que AJAX sea una tecnologa cada vez ms en auge. (19)

29

3.1.4.2 JSON
Las siglas JSON describen el trmino JavaScript Object Notacin que es un formato ligero de intercambio de datos, fcil de generar y analizar. Est basado en un subconjunto del lenguaje de programacin JavaScript, Standard ECMA-

262 3 Edicin Diciembre 1999. JSON es por una parte, una coleccin 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 programacin 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 informacin. Esto hace que se incremente notablemente la cantidad de informacin enviada entre cliente y servidor de la que solamente unos bytes son en realidad informacin importante. Los objetos JSON resultan ms pequeos que sus documentos XML equivalentes.

Ilustracin 2: Comparativa entre la representacin 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

3.2 ARQUITECTURA DE LA APLICACIN

El portal HJ ha sido desarrollado siguiendo el modelo de arquitectura en 3 capas. Capa de presentacin, capa negocio y capa de datos. La ventaja principal de este estilo de programacin es que el desarrollo se puede llevar a cabo en varios niveles y, si fuera necesario hacer algn cambio, slo se vera afectado el nivel requerido.

Ilustracin 3: Esquema conceptual de la arquitectura de la aplicacin

Capa de presentacin: la capa de presentacin o interfaz grfica es la capa con la que el usuario se comunica con la aplicacin. Recoge y valida la informacin enviada por los usuarios y presenta los datos con el formato adecuado. Las tecnologas 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 aplicacin un entorno amigable, mientras que JavaScript es el encargado de realizar las operaciones necesarias en el navegador. Las peticiones AJAX se situaran entre la capa de presentacin y la de negocio.
31

Capa de negocio: Esta capa recibe las peticiones del usuario y enva las respuestas tras procesarlas. PHP es la tecnologa implicada en esta capa, proporcionando un conjunto de funciones capaces de comunicarse con la capa de datos y la capa de presentacin. Capa de datos: En esta capa se almacenan los datos, se reciben las peticiones de informacin y se devuelven con la informacin seleccionada. La tecnologa empleada en esta capa es la base de datos mySQL, y las acciones realizadas en la base de datos se harn mediante el lenguaje SQL.

3.3 CAPA DE PRESENTACIN

3.3.1 DISEO CSS

CSS ofrece 3 enfoques diferentes de diseo web, cada uno con sus ventajas e inconvenientes segn cada caso. DISEO LQUIDO Los defensores del diseo lquido argumentan que este tipo de diseo ocupa mejor el espacio disponible y evita disear segn la resolucin del monitor, sin embargo se pierde el control sobre el ancho del contenido y sobre los saltos de lnea. En monitores de dimensiones extremas los elementos pueden estar demasiado estirados o comprimidos y en los monitores grandes las lneas de contenido pueden resultar demasiado largas y muy incmodas de leer. DISEO FIJO Los diseos fijos estn basados en conceptos tradicionales del diseo grfico como la relacin entre los elementos de la pgina o anchos de lnea

32

confortables. Para realizar un diseo fijo hay que elegir un ancho de pgina, 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 ms pequea que el ancho de pgina. Y existe el peligro de que los elementos se redimensionen si se cambia el tamao de letra. Por otra parte es el diseo ms predecible, ofreciendo un mejor control de la longitud de lnea. DISEO ELSTICO La ventaja del diseo elstico frente al diseo lquido y fijo es que las lneas son predecibles independientemente del tamao de la fuente. El diseo elstico cambia sus dimensiones en funcin del tamao de texto, haciendo uso de la unidad de medida em. Una de las peculiaridades de este tipo de diseo es que permite hacer aumentar el tamao de la pgina mediante la propiedad zoom, lo que es especialmente interesante para personas con visin limitada. Como puntos dbiles encontramos que las imgenes no cambian sus dimensiones junto con el texto, y el tamao del layout puede llegar a exceder el tamao de la ventana del navegador usando tamaos de texto muy grandes. (23) ELECCIN HAJIMEJUDO La web contiene muchas imgenes y resulta arriesgado no poder asegurar un correcto ajuste de las imgenes respecto del texto al aumentar el tamao de fuente. Por otra parte el diseo lquido presenta anchos de lnea impredecibles, lo que resulta desaconsejable en un peridico electrnico en el que es muy importante poder leer las noticias de forma cmoda. Anchos de lnea muy grandes provocaran un inmediato desinters entre los lectores.

33

El diseo esttico parece ofrecer la opcin ms fiable a la hora de presentar el contenido de una web de noticias deportivas. Es un diseo predecible, lo que es interesante para posibles ampliaciones y para el mantenimiento del portal, y ofrece el mejor compromiso para presentar la informacin en el mejor formato a la mayora de usuarios. En el caso de HJ se ha optado por un diseo de pgina centrado para ocupar mejor la ventana del navegador. A continuacin se describir la estructura de los elementos del layout final. ELEMENTOS DEL LAYOUT CABECERA: Est compuesta por el banner y la seccin de men como podemos ver en las (secciones 1 y 2 de la Ilustracin 4). Esta parte junto con el pie y la barra lateral sern comunes a todas las pginas y darn a la web un aspecto homogneo y reconocible. CUERPO: En el cuerpo (seccin n 4), es donde se mostrar el contenido web. Aqu se presentarn las noticias deportivas con el formato correspondiente a la seccin. En la pgina 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 seccin izquierda, donde se reposicionarn las noticias de portada al ser sustituidas por las nuevas noticias. Finalmente en el rea 4.3 se situarn las noticias ms antiguas antes de pasar a la seccin de noticias anteriores, situadas en una pgina aparte.

34

Ilustracin 4: Esquema del layout general (izq.) y de la pgina home (dcha).

Para el resto de pginas de la web, (las correspondientes a las noticias de cada seccin), el esquema ser el de la izquierda, y las noticias de cada seccin que excedan el mximo de noticias por seccin, sern accesibles desde un enlace noticias anteriores. BARRA LATERAL: En la barra lateral (seccin n 3) se mostrarn aquellos contenidos sobre los que se quiera llamar la atencin del usuario: calendario de eventos, titulares destacados, judocas y fotos del mes, y la publicidad del portal. PIE: En el pie (seccin 5), solo se mostrar informacin sobre la organizacin Hajimejudo y se deja como opcin reservar un espacio publicitario extra.

3.3.2

INTERFAZ DE USUARIO

35

En este apartado se definir la interfaz grfica de usuario mediante la que los usuarios administradores realizarn las tareas de publicacin y mantenimiento. Para poder acceder a la gestin de la pgina ser necesario pulsar el link de login situado en la parte superior de la pgina.

Ilustracin 5: Botn de Inicio de Sesin

Una vez pulsado el link se abrir un pequeo formulario donde introducir el login y password del usuario administrador.

Ilustracin 6: Formulario de Inicio de Sesin

Al enviar los datos del formulario se recargar la pgina en modo seguro (SSL) y se crear una sesin. Al mismo tiempo se ocultar el formulario de autenticacin y se mostrar un link para desconectarse y un men de gestin de administradores.

Ilustracin 7: Botn de desconexin y men administrador

Cuando los usuarios accedan a la parte privada la pgina presentar este aspecto en el que se pueden apreciar las barras de herramientas y el men de gestin de administradores:

36

Ilustracin 8: Web parte privada

La funcionalidad del sistema gestor de contenidos se encuentra disponible por una parte en la cabecera seccin de men, y por otra parte en los botones de accin situados debajo de las noticias de la pgina principal, y bajo los elementos de la barra lateral. Como se puede apreciar con mayor detalle en la imagen inferior.

Ilustracin 9: Barra de herramientas

La publicacin de contenidos se gestionar desde la pgina principal que contendr noticias de todas las secciones. Una vez hayan sido introducidas en la base de datos y publicadas en la portada, las dems secciones se generarn automticamente a partir de la informacin guardada en la base de datos. Esto resulta muy cmodo para los administradores al no necesitar navegar en la web para poder actualizar los contenidos. Lo que proporciona rapidez y agilidad en la gestin del portal. Al pulsar los botones de accin correspondientes a las acciones crear, editar o eliminar se abrir un formulario en el que el usuario podr rellenar la informacin necesaria para gestionar los contenidos. Se puede observar un ejemplo en la imagen inferior.
37

Ilustracin 10: Ejemplo de formulario.

Las acciones de subir, bajar, mostrar u ocultar contenidos se realizarn automticamente al pulsar su icono correspondiente sin necesidad de formularios. Una vez rellenado el formulario con los datos, estos se validarn y si algn campo fuera incorrecto se avisar al usuario con un mensaje antes de realizarse ninguna accin. Cuando se realice la accin si todo ha salido bien se refrescarn los cambios, y se mostrar feedback al usuario. Si ha habido algn error en la transaccin se mostrar un mensaje al usuario informndole de que se ha producido un error para que repita la accin.
38

Ilustracin 11: Mensaje Accin correcta

Ilustracin 12: Mensaje Error

3.3.3

MAPA WEB

El mapa web del portal es un esquema conceptual que permite mostrar de una forma visual las pginas accesibles desde cada una de las pginas de la web. Como se puede ver en el siguiente diagrama desde la pgina home se puede acceder a todas las pginas del portal Hajimejudo, excepto las pginas del tercer nivel que solo sern accesibles desde su seccin correspondiente. Desde cada seccin se puede acceder a todas las dems y a la pgina 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

fcil para los usuarios encontrar la informacin buscada. No es necesario navegar por la web para ver las ltimas noticias, ya que en la pgina principal se encuentran las noticias recientes de todas las secciones, y si se quiere consultar las noticias de una seccin determinada, basta con ir a la opcin de men correspondiente.

Ilustracin 13: Mapa Web del portal Hajimejudo

3.4 CAPA DE NEGOCIO

3.4.1 DIAGRAMAS DE CASOS DE USO

La descripcin e identificacin de los casos de uso de una aplicacin permite definir el comportamiento del sistema con mayor claridad, y capturar los

40

requerimientos funcionales del sistema a desarrollar, proporcionando un entendimiento comn entre el cliente y el desarrollador. ste tipo de diagramas definen un conjunto de propsitos para los que un actor puede usar el sistema. Por otra parte el diagrama de casos de uso se acompaa de una serie de plantillas donde se documenta cada caso de uso adjuntando informacin extra como precondiciones, flujo normal de actividad, flujo alternativo, postcondiciones, comentarios etc.

3.4.1.1 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 estmulos o eventos. Los actores representan un rol que puede desempear alguien o algo que interacta o que necesita intercambiar informacin con el sistema. Hay 2 tipos de actores que interactuarn en la aplicacin 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.

Ilustracin 14: Roles de la aplicacin HJ

3.4.1.2 DIAGRAMA Y DESCRIPCIN DE CASOS DE USO

41

Un caso de uso es una secuencia completa de interacciones iniciadas por un actor, en la que se especifica la interaccin entre el actor y el sistema. Los casos de uso pueden ser simples implicando solo una interaccin con un actor, mientras que otros casos de uso ms complejos incluyen muchas interacciones e incluso ms de un actor. Al desarrollar los casos de uso es importante evitar una descomposicin en la que muchos casos de uso describen funciones individuales del sistema, en lugar de describir una secuencia de interacciones que proporcione un resultado significativo al actor. (24) A la hora de identificar los casos de uso de un sistema es conveniente comenzar identificando los actores y las acciones que inician en el sistema. En el apartado anterior se identificaron los actores, veamos ahora las acciones con las que van a interactuar con la aplicacin Hajimejudo. (24) Se han identificado los siguientes grupos de casos de uso. A continuacin se detallarn los ms importantes.

Gestinde Administradores

Gestinde Sesiones GestindeNoticias GestindelaBarraLateral

Ilustracin 15 Grupos de casos de uso

3.4.1.2.1 GESTIN DE ADMINISTRADORES

Nombre del Caso de Uso Alta de Administrador Actor(es) Usuario Administrador Un usuario administrador introduce los datos asociados a un Descripcin nuevo administrador en el sistema El actor debe haberse identificado en el sistema gestor de contenidos proporcionando un nombre de usuario y Precondicin

contrasea vlidos, y tener los permisos necesarios para dar

42

de alta nuevos administradores. Accin actor 1) El actor de men de gestin de usuarios y elige la opcin Flujo Principal dar de alta administrador. 3) El actor 4) Los datos son correctos y se guardan en la los base de datos informando de ello al actor. y rellena datos necesarios pulsa aceptar. 3) Flujo Alternativo 1 El actor 4) El sistema sale del formulario. Y no se pulsa el botn realiza ninguna accin. cancelar. 3) Flujo Alternativo 2 El actor 4) Los datos no son correctos formulario correctamente actor 4) Los datos son correctos pero ocurre un cambios (rollback), informando de ello al usuario. Los datos del nuevo administrador se encuentran guardados de forma persistente (se ha hecho commit), en la base de datos y el nuevo administrador podr acceder al SGC a partir Postcondicin Comentarios de ese momento. pulsa el botn y se informa al actor para que rellene el aceptar 3) Flujo Alternativo 3 El Accin sistema 2) Se abre un formulario con los datos que se

pulsa la opcin deben rellenar.

pulsa el botn error en la transaccin y no se deshacen los aceptar

43

Nombre del Caso de Uso Edicin de Administrador Actor(es) Usuario Administrador Un usuario administrador modifica los datos asociados a un Descripcin administrador del sistema. El actor debe haberse identificado en el SGC proporcionando un nombre de usuario y contrasea vlidos y tener los Precondicin permisos necesarios para editar administradores. Accin actor 1) El actor de men de gestin de usuarios y elige editar administrador. Flujo Principal 3)El actor elige 4) Los datos son correctos y se guardan en la el administrador a editar y despus de actualizar sus datos pulsa aceptar 7) El actor elige el editar y despus de actualizar sus datos pulsa aceptar Flujo Alternativo 2 7) El actor elige el
44

Accin sistema 2) Se abre un formulario en el que se podr desplegable.

pulsa la opcin elegir un administrador de una lista

base de datos informando de ello al actor.

8) Los datos no pasan la validacin y se informa al usuario para que realice los

administrador a cambios necesarios en el formulario. Flujo Alternativo 1

8) Los datos son vlidos pero ocurre un error en la transaccin y se deshacen los cambios

administrador a informndose de ello al usuario. editar y despus de actualizar sus datos pulsa aceptar 7) El actor Flujo Alternativo 3 pulsa el botn de cancelar. Los datos del administrador se encuentran guardados de Postcondicin Comentarios Nombre del Caso de Uso Baja de Administrador Actor(es) Usuario Administrador Un usuario administrador selecciona a otro para eliminarlo del Descripcin sistema. El usuario actor debe haber hecho login en el sistema, proporcionando un nombre de usuario y contrasea vlidos y Precondicin Flujo Principal tener los permisos necesarios. Accin actor la opcin de men de gestin de administradores y elige eliminar administrador. 3)El actor elige el administrador a eliminar y pulsa aceptar 4) El sistema pide confirmacin. Accin sistema podr elegir el administrador que desea eliminar. 1) El actor elige 2) Se abre un formulario en el que el usuario forma persistente en la base de datos. 8) No se realiza ninguna accin y se sale del formulario.

45

5) El actor confirma la accin. 3) El actor Flujo Alternativo 1 pulsa cancelar y en el formulario.

6) La transaccin transcurre correctamente y el administrador es eliminado del sistema. 4) El sistema no realiza ninguna accin y sale del formulario.

5) El usuario no 6) El sistema no realiza ninguna accin y el pulsa cancelar Flujo Alternativo 2 en el momento de la confirmacin. 5) El actor Flujo Alternativo 3 confirma la accin. 6) Ocurre algn error en la transaccin y se deshacen los cambios informndose al actor del error. actor vuelve al formulario donde podr cancelar la accin definitivamente o elegir un nuevo administrador a eliminar.

Los datos del nuevo administrador se borran del sistema de forma que el administrador eliminado no podr acceder al Postcondicin sistema gestor de contenidos. Es importante controlar que no se pueda en ningn caso hacer un borrado en cascada de administradores. O que no se pueda eliminar por error el administrador que est realizando Comentarios la accin.

3.4.1.2.2 GESTIN DE SESIONES

Nombre del Caso de Uso Obtener Log de sesin Actor(es) Usuario Administrador Un usuario administrador obtiene los archivos de log Descripcin seleccionados segn una serie de filtros. El usuario actor debe haber hecho login en el sistema, proporcionando un nombre de usuario y contrasea vlidos y Precondicin Flujo Principal tener los permisos necesarios para consultar el log. Accin actor Accin sistema

46

1) El actor selecciona la opcin del men obtener log de sesin. 3) El actor rellena los filtros y pulsa aceptar. 3) El actor Flujo Alternativo 1 rellena los filtros y pulsa aceptar. Postcondicin Comentarios Nombre del Caso de Uso Iniciar sesin Actor(es) Ninguna.

2) Se abre una pantalla en la que se puede obtener el archivo deseado filtrando por diferentes parmetros.

4) Aparece un listado de los ficheros de log obtenidos para que el administrador los consulte. 4) El nmero de ficheros recuperados es excesivo, no se ha recuperado ningn fichero o se ha producido algn error y se informa de ello al usuario.

Usuario Administrador Al Entrar en el sistema gestor de contenidos aparece un formulario en el que el actor debe rellenar sus datos de usuario y contrasea. El actor debe haber sido dado de alta como administrador en el sistema. Accin actor 1) El actor se identifica su usuario y contrasea y pulsando el botn iniciar sesin. Accin sistema 2) Los datos pertenecen a un usuario vlido y se guarda la informacin asociada al inicio de accin que produzca algn cambio en la base de datos se registrar hasta que se pulse el botn de cierre de sesin.

Descripcin

Precondicin

proporcionando sesin. A partir de este momento cualquier Flujo Principal

47

1) El actor no ha sido dado de alta en el Flujo Alternativo 1 SGC, se ha equivocado al introducir los datos.

2) Se informa al usuario con un mensaje, para que cambie sus datos de inicio de sesin.

1) Existe algn 2) Se informa al usuario con un mensaje. error en la Flujo Alternativo 2 transaccin al guardar los datos de inicio de sesin. Se guardan los datos de inicio de sesin en la base de datos. Una vez se inicie aparecer un botn de cerrar sesin en la Postcondicin Comentarios parte superior de la aplicacin.

Nombre del Caso de Uso Cerrar sesin Actor(es) Usuario Administrador Un usuario administrador pulsa el botn de cerrar sesin Descripcin Precondicin situado en la parte superior de la aplicacin HJ. El actor debe haber iniciado sesin previamente Accin actor 1) El actor
Flujo Principal

Accin sistema 2) Se pasa de la vista de gestin de contenidos de la aplicacin a la vista general de sesin accesible a todos los usuarios. 2) Existe un error en la transaccin al guardar los datos de fin de sesin en la base de datos y se informa de ello al actor.

pulsa el botn cerrar sesin. 1) El actor pulsa el botn cerrar sesin.

Flujo alternativo 1 Postcondicin Comentarios

Se guardan los datos de fin de sesin en la base de datos.

48

3.4.1.2.3 GESTIN DE NOTICIAS

Nombre del Caso de Uso Crear Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin botn crear . El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin Flujo Principal tener los permisos necesarios. Accin actor 1) El actor situado en la pgina de portada selecciona el botn crear situado debajo de cualquier noticia introducida previamente o en el caso de no haber noticias se pulsar el botn crear de la barra de acciones que aparecer por defecto. 3) El actor elige las opciones al tipo de noticia que quiere crear,
49

Accin sistema 2) Se abre un formulario con una serie de campos comunes y otros que el usuario debe elegir.

4) El sistema valida los datos introducidos y se abre una pantalla de pre visualizacin noticia.

correspondientes donde se puede ver como quedara la

su posicin y caractersticas y rellena los campos necesarios pulsando aceptar al finalizar. 5) El actor pulsa 6) Los datos se guardan en la base de el confirmar cambios. 3) El actor pulsa 4) El sistema sale del formulario. Flujo Alternativo 1 cancelar formulario. 3) Flujo Alternativo 2 El usuario 4) El sistema no sale del formulario e aceptar informa al actor de que hubo algn error de de validacin en los datos para que haga las el modificaciones necesarias en el formulario. usuario 6) El sistema vuelve al momento anterior a el botn pulsar el botn. en la usuario 6) Ocurre algn error en la transaccin y el el botn sistema informa de ello al actor. en la pulsa despus rellenar formulario 5) Flujo alternativo 3 El pulsa en el botn datos y se refresca el contenedor donde se ha creado la noticia.

cancelar 5) El

previsualizacin. pulsa aceptar

Flujo alternativo 4

previsualizacin. Los datos de la nueva noticia se guardan de forma persistente y tanto los actores generales como los administradores podrn Postcondicin Comentarios percibir los cambios.

50

Nombre del Caso de Uso Editar Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el botn editar situado en la barra de acciones de una noticia de Descripcin la pgina principal. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El actor situado en la pgina de portada selecciona el botn editar situado debajo Flujo Principal de una noticia. 3) El actor realiza los cambios necesarios y pulsa aceptar. 5) El actor 6) Los datos se guardan en la base de datos los y se refrescan los cambios. actor 4) El sistema vuelve al momento anterior a el confirma cambios. 3) Flujo Alternativo 1 en formulario. 3) El usuario 4) El sistema vuelve al momento anterior a Flujo Alternativo 2 pulsa cancelar pulsar el botn editar. al confirmar los cambios.
51

Accin sistema 2) Se abre un formulario mostrando los campos de la noticia y su valor introducido.

4) El sistema comprueba que el formato de los datos editados es correcto. Si es as abre una pantalla de previsualizacin donde se puede ver como quedara la noticia.

El

pulsa cancelar pulsar el botn editar.

5) El usuario 6) Hay algn error en la transaccin o pulsa Flujo alternativo 3 de aceptar validacin y se informa de ello al actor. confirmar en el momento los cambios. Los datos de la noticia editada se guardan de forma persistente Postcondicin Comentarios Nombre del Caso de Uso Mostrar Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin botn mostrar de alguna noticia El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y tener los permisos necesarios. La noticia a mostrar debe estar oculta, cuando esto sea as solo se ver su barra de Precondicin acciones. La opcin de ocultar debe encontrarse inactiva. Accin actor 1) El actor situado en la pgina de portada Flujo Principal selecciona el botn mostrar situado debajo de cualquier noticia. 1) Flujo Alternativo 1 una visible.
52

tanto

los

actores

generales

como

los

administradores podrn percibir los cambios.

Accin sistema 2) Se muestra la noticia.

El

actor 2) El sistema no hace nada ya que la opcin noticia

intenta mostrar se encuentra inactiva.

1)

El

actor 2) El sistema encuentra algn error al de informa al actor de que no ha sido posible realizar mostrar la accin para que vuelva a el intentarlo.

situado en la actualizar el campo visibilidad de la noticia e pgina portada Flujo Alternativo 2 selecciona botn de

situado debajo cualquier noticia. Los datos de la noticia editada se guardan de forma persistente Postcondicin y tanto los actores generales como los administradores podrn percibir los cambios. Se actualizar el estado de la noticia de invisible a visible en la base de datos y se inhabilitara la opcin de mostrar de su Comentarios barra de acciones.

Nombre del Caso de Uso Ocultar Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin botn ocultar de una noticia. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y tener los permisos necesarios. La noticia a ocultar debe estar Precondicin visible. Accin actor 1) El actor situado en la pgina de Flujo Principal portada selecciona el botn ocultar situado debajo de cualquier
53

Accin sistema 2) Se oculta la noticia.

noticia. 1) Flujo Alternativo 1 El actor 2) El sistema no hace nada ya que la opcin ocultar se encuentra inactiva.

intenta oculta. 1) El

una noticia ya actor 2) El sistema encuentra algn error al de informa al actor de que no ha sido posible realizar ocultar cualquier la accin para que vuelva a el intentarlo.

situado en la actualizar el campo visibilidad de la noticia e pgina portada Flujo Alternativo 2 selecciona botn de

situado debajo noticia. Los datos necesarios para ocultar la noticia se actualizan en la base de datos y se guardan de forma persistente. Tanto los actores generales como los administradores podrn percibir Postcondicin los cambios. Se actualizar el estado de la noticia de visible a invisible en la base de datos y se inhabilitara la opcin de ocultar de su barra de acciones. Comentarios Nombre del Caso de Uso Subir Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin botn Subir de una noticia. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) Flujo Principal El Accin sistema actor 2) La noticia sube una posicin dentro de su de
54

situado en la grupo de la pgina home. pgina

portada selecciona botn de noticia introducida. 1) El actor 2) El sistema indica al usuario que la noticia subir ya es la primera de su grupo o la nica. es la de o la intenta ya grupo portada nica. 1) Flujo Alternativo 2 El actor 2) El sistema encuentra algn error al subir actualizar la posicin de la noticia e informa al actor de que no ha sido posible realizar la accin para que vuelva a intentarlo. Los datos necesarios para cambiar la posicin de la noticia se actualizan en la base de datos y se guardan de forma persistente. Postcondicin Comentarios Nombre del Caso de Uso Bajar Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin botn Bajar de una noticia. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin Flujo Principal

el subir

situado debajo cualquier

una noticia que Flujo Alternativo 1 primera de su

intenta

una noticia.

Tanto

los

actores

generales

como

los

administradores podrn percibir los cambios.

tener los permisos necesarios. Accin actor

55

Accin sistema

1)

El

actor 2) La noticia baja una posicin dentro de de el bajar

situado en la grupo de noticias de la pgina home. pgina portada selecciona botn de noticia introducida previamente. 1) El actor 2) El sistema indica al usuario que la noticia bajar ya es la ltima o la nica de su grupo. intenta Flujo Alternativo 1

situado debajo cualquier

una noticia que ya es la ltima o la nica de su grupo. 1) El actor 2) El sistema encuentra algn error al bajar actualizar la posicin de la noticia e informa al actor de que no ha sido posible realizar la accin para que vuelva a intentarlo. Los datos necesarios para cambiar la posicin de la noticia se actualizan en la base de datos y se guardan de forma persistente. Tanto los actores generales como los administradores podrn percibir los cambios. intenta

Flujo Alternativo 2

una noticia.

Postcondicin Comentarios

Nombre del Caso de Uso Eliminar Noticia Actor(es) Usuario Administrador Un usuario administrador se sita en la portada y pulsa el Descripcin Precondicin

botn eliminar de alguna noticia creada previamente. El usuario actor debe haberse identificado en el SGC,
56

proporcionando un nombre de usuario y contrasea vlidos y tener los permisos necesarios. Accin actor 1) El Accin sistema Noticia, Degradar Noticia, actor 2) Se abre un formulario con 3 opciones: de Eliminar Noticia. el

situado en la Desvincular pgina portada selecciona botn 3) Flujo Principal El eliminar

de una noticia. actor 4) El sistema actualiza los datos de la noticia de manera que su informacin permanecer en la base de datos pero desaparecer de la selecciona Desvincular aceptar 5) El usuario 6) Los datos de la noticia desaparecen de la selecciona Noticia Acepta. 7) El usuario 8) El sistema abre un desplegable con las selecciona opcin degradar acepta. 7.1) El usuario 8.1) El sistema elimina la noticia de su elige la nueva ubicacin anterior y la sita en su nueva posicin de la posicin. noticia y pulsa aceptar. 3,5,7.1) Flujo Alternativo 1 usuario El 4,6,8.1) El sistema encuentra algn problema elige realizando la transaccin e informa de ello al y la secciones de portada donde se puede situar la noticia (excluyendo la actual). la aplicacin y de la base de datos. y opcin Eliminar

Noticia y pulsa aplicacin.

una opcin y actor.

57

pulsa aceptar. 3,5,7.1) Flujo Alternativo 2 actor El 4,6,8.1) El sistema vuelve al momento pulsa anterior a pulsar el botn eliminar.

cancelar en el formulario. La noticia se degrada, desvincula o elimina como se ha explicado y los cambios son persistentes y percibidos por todos los actores. Es importante proteger la base de datos de un borrado en cascada de la informacin.

Postcondicin

Comentarios

3.4.1.2.4 GESTIN DE LA BARRA LATERAL

Nombre del Caso de Uso Crear Evento de Calendario Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, Descripcin pulsa el botn crear situado debajo del calendario de eventos. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn Accin sistema el los campos correspondientes al evento a crear crear. actor 2) Se abre un formulario con el que rellenar

situado debajo Flujo Principal del calendario. 3) El actor 4) El sistema valida los datos introducidos y los si todo es correcto, guarda la informacin el componente calendario de la barra lateral y mostrando el da con el evento introducido rellena

datos y acepta. introducida en la base de datos refrescando

58

resaltado, que contendr el link al evento introducido. 3) Flujo Alternativo 1 El actor 6) El sistema sale del formulario y no se pulsa el botn producen cambios. cancelar. 3) Flujo Alternativo 2 El actor 6) El sistema detecta que la validacin de los los datos no se ha efectuado correctamente o abortan los cambios, informando de ello al actor. Los datos del nuevo evento son guardados de forma persistente en la base de datos y los cambios sern percibidos Postcondicin Comentarios por los usuarios generales y administradores. rellena

datos y acepta. hay algn problema en la transaccin y se

Nombre del Caso de Uso Editar Evento de Calendario Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, Descripcin pulsa el botn editar situado debajo del calendario de eventos. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn Flujo Principal Accin sistema el al usuario que seleccione que da con evento desea editar de una lista actor 2) Se abre un formulario en el que se pedir editar asociado

situado debajo desplegable. del calendario. 3) da El a actor 4) El sistema valida los datos y guarda los el cambios en la base de datos, que se sus
59

selecciona actualiza

editar actualizarn en el componente calendario.

campos y pulsa aceptar. 3) Flujo alternativo 1 en formulario. 3) da El a actor 4) Hay algn error en los datos editados o en el la transaccin y se informa de ello al actor. sus editar selecciona Flujo alternativo 1 actualiza aceptar. Los datos del evento de calendario editado son actualizados y guardados permanentemente en la base de datos, de forma Postcondicin Comentarios Nombre del Caso de Uso Eliminar Evento de Calendario Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, pulsa el botn eliminar situado debajo del calendario de Descripcin eventos. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn Flujo Principal Accin sistema el desplegable que contendr todos los das del actor 2) Se abre un formulario con una lista eliminar calendario que tengan un evento asociado desea eliminar. que todos los usuarios puedan apreciar los cambios. El actor 4) El sistema sale del formulario y no se el pulsa cancelar realiza ningn cambio.

campos y pulsa

situado debajo para que el usuario pueda elegir el que del calendario. 3) El selecciona actor 4) El sistema guarda los cambios y el da del el calendario al que se le ha desvinculado el
60

evento desea

que evento deja de verse resaltado en el calendario. y actor 6) Se sale del formulario y no se elimina el la

desvincular del calendario pulsa aceptar. 5) Flujo Alternativo 1 y El pulsa cancelar evento seleccionado. rechaza accin. El evento es eliminado de la base de datos, y se apreciar visualmente en el calendario porque ya no aparecer Postcondicin Comentarios Nombre del Caso de Uso Crear destacado Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, pulsa el botn crear situado debajo del componente Descripcin destacados de la barra lateral. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn del componente destacados. 3) El actor 4) El sistema valida los datos introducidos y los si todo es correcto, guarda la informacin rellena Accin sistema el los campos correspondientes al nuevo titular crear destacado. actor 2) Se abre un formulario con el que rellenar resaltado.

situado debajo Flujo Principal

datos y pulsa el introducida en la base de datos refrescando

61

aceptar. 3) Flujo Alternativo 1 El

el componente destacados con la nueva entrada. actor 6) El sistema sale del formulario y no se

pulsa el botn producen cambios. cancelar. 3) El actor 6) El sistema detecta que la validacin de los los datos no se ha efectuado correctamente o abortan los cambios, informando de ello al actor. Los datos del nuevo evento son guardados de forma persistente en la base de datos y los cambios sern percibidos por los usuarios generales y administradores. rellena

Flujo Alternativo 2

datos y pulsa el hay algn problema en la transaccin y se botn aceptar.

Postcondicin Comentarios

Nombre del Caso de Uso Editar destacado Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, pulsa el botn editar situado debajo del componente Descripcin destacados de la barra lateral. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn Flujo Principal del componente destacados. 3) El actor 4) El sistema guarda los nuevos datos y la refresca los cambios.
62

Accin sistema el podr elegir una entrada del componente

actor 2) Se abre un formulario en el que el usuario editar destacados para su edicin.

situado debajo

selecciona

entrada componente

del

destacados que editar actualiza informacin, despus pulsa aceptar. Flujo alternativo 1 3) El actor 4) El sistema sale del formulario y no se pulsa cancelar. produce ningn cambio. 3) El actor edita 4) Hay algn error en los datos editados o en Flujo alternativo 2 los datos y la transaccin y se informa de ello al actor. pulsa aceptar. Los datos de la entrada del componente destacados editada son actualizados en la base de datos y refrescados en la Postcondicin Comentarios Nombre del Caso de Uso Eliminar Destacado Actor(es) Usuario Administrador Un usuario administrador previamente identificado en el SGC, pulsa el botn eliminar situado debajo del componente Descripcin destacados de la barra lateral. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin Flujo Principal tener los permisos necesarios. Accin actor 1) El selecciona botn del
63

desea y su

aplicacin.

Accin sistema el desplegable que contendr los titulares

actor 2) Se abre un formulario con una lista eliminar destacados disponibles en el componente.

situado debajo

componente destacados. 3) El actor 4) El sistema pide confirmacin. la del selecciona entrada componente destacados que aceptar. 5)El confirma accin 3) Flujo Alternativo 1 en formulario. 5) Flujo alternativo 2 El actor 6) El sistema sale del formulario y no se pulsa cancelar realiza ninguna accin. en el momento de confirmar la accin. La entrada del elemento destacados seleccionada es eliminada permanentemente y los cambios sern visibles tanto Postcondicin Comentarios Nombre del Caso de Uso Crear foto del mes Actor(es) Usuario Administrador Un usuario administrador pulsa crear en el componente fijo Descripcin Precondicin foto del mes de la barra lateral. El usuario actor debe haberse identificado en el SGC, para los administradores como para los usuarios generales. El actor 4) el El sistema sale del formulario y no se pulsa cancelar realiza ninguna accin. actor 6) El sistema elimina la entrada y refresca el la componente destacados. desea eliminar y pulsa

64

proporcionando un nombre de usuario y contrasea vlidos y tener los permisos necesarios. Accin actor 1) El selecciona botn del componente Flujo Principal foto del mes. 3) El actor 4) El sistema valida los datos introducidos y los si todo es correcto, guarda la informacin mes introducida coincide con la del mes actual los cambios se refrescarn adems en el componente asociado de la barra lateral. Flujo alternativo 1 3) 3) Flujo alternativo 2 El El actor 4) El sistema sale del formulario y no se actor 6) Hay algn problema al realizar la pulsa cancelar. realiza ninguna accin. rellena los transaccin y se informa de ello al actor. rellena Accin sistema el mes y ao en los que se va a crear la foto y crear los campos correspondientes a sus datos actor 2) Se abre un formulario para seleccionar el

situado debajo asociados.

datos y acepta. introducida en la base de datos. Si la foto del

datos y acepta. Los datos de la nueva foto del mes son guardados de forma persistente en la base de datos y los cambios sern percibidos Postcondicin Comentarios Nombre del Caso de Uso Crear judoca del mes Actor(es) Usuario Administrador Un usuario administrador pulsa crear en el componente Descripcin judoca del mes de la barra lateral. El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin

por los usuarios generales y administradores.

tener los permisos necesarios.

65

Accin actor 1) El selecciona botn del componente judoca del mes. Flujo Principal 3) El

Accin sistema el seleccionar el mes y ao del judoca del mes

actor 2) Se abre un formulario con el que se podr crear que se desea crear.

situado debajo

actor 4) El sistema valida los datos introducidos y los si todo es correcto, guarda la informacin correspondientes a los judocas de cada mes se publican en la seccin judoca del mes. Si el judoca introducido coincide adems con el del mes actual se actualizar en el componente judoca del mes de la barra lateral.

rellena

datos y acepta. introducida en la base de datos. Los datos

3) 3) Flujo Alternativo 2

El El

actor 4) El sistema sale del formulario. actor 4) El sistema detecta que la validacin de los los datos no se ha efectuado correctamente o

pulsa cancelar. rellena

datos y pulsa el hay algn problema en la transaccin y se botn crear foto abortan los cambios, informando de ello al mes. actor. Los datos del nuevo judoca del mes son guardados de forma persistente en la base de datos y los cambios sern percibidos por los usuarios generales y administradores.

Postcondicin Comentarios

Nombre del Caso de Uso Crear espacio publicitario Actor(es) Usuario Administrador Un usuario administrador pulsa crear en un componente de Descripcin

publicidad de la barra lateral.

66

El usuario actor debe haberse identificado en el SGC, proporcionando un nombre de usuario y contrasea vlidos y Precondicin tener los permisos necesarios. Accin actor 1) El selecciona botn del componente Flujo Principal publicidad. 3) El actor 4) El sistema valida los datos introducidos y los si todo es correcto, guarda la informacin en la base de datos. Al refrescarse los datos el sistema crea un nuevo espacio publicitario a continuacin del que provoc la accin. 3) Flujo Alternativo 1 El actor 4) El sistema detecta que la validacin de los los datos no se ha efectuado correctamente o abortan los cambios, informando de ello al actor. Flujo Alternativo 1 3) El actor 4) El sistema sale del formulario y no se pulsa cancelar. realiza ninguna accin. Los datos del nuevo espacio publicitario son guardados de forma persistente en la base de datos y los cambios sern Postcondicin percibidos por los usuarios generales y administradores. Una vez creada la nueva publicidad se puede reposicionar, ocultar o volver a mostrar con los botones correspondientes a Comentarios la barra de acciones situada debajo de ella. rellena rellena Accin sistema el los campos correspondientes al nuevo actor 2) Se abre un formulario con el que rellenar crear espacio publicitario.

situado debajo

datos y acepta. introducida

datos y acepta. hay algn problema en la transaccin y se

Las acciones subir, bajar, mostrar y ocultar de los componentes de la barra lateral tendrn el mismo comportamiento que el descrito en las noticias. La
67

accin eliminar no estar disponible para los componentes de la barra lateral judoca/foto del mes y publicidad, ya que no contienen elementos internos que se puedan eliminar y el componente en si es esttico y tampoco debe eliminarse. Si en algn momento se quiere ocultar se puede usar el botn correspondiente de su barra de acciones. El diagrama de casos de uso mostrado a continuacin muestra grficamente los casos de uso descritos.

Ilustracin 16: Diagrama de casos de uso de la aplicacin HJ

3.4.2

DIAGRAMAS DE ACTIVIDAD

Los diagramas de actividad son herramientas UML que muestran fundamentalmente el flujo de control entre actividades, que son estados con una accin interna compuesta de computaciones atmicas y una o ms transiciones de salida. Dichas actividades producen un cambio en el sistema o
68

la devolucin de un valor. Las actividades se enlazan por medio de transiciones automticas, desencadenndose el comienzo de la siguiente actividad al finalizar la anterior. Las actividades no poseen transiciones internas ni transiciones desencadenadas por eventos. Bsicamente los diagramas de actividad muestran las operaciones pasadas entre objetos, son usados para especificar mtodos, procesos de negocio o casos de uso. En este caso se mostrar un diagrama de actividad en relacin a cada caso de uso descrito en el apartado anterior para aportar informacin extra sobre ellos, y representar visualmente las diferentes rutas, que pueden ir desencadenndose. (25) Los diagramas de actividad asociados a los casos de uso descritos pueden consultarse en la seccin de Anexos.

3.5 CAPA DE DATOS

3.5.1 CARACTERSTICAS DE LA BASE DE DATOS
El diseo de la base de datos debe ajustarse a las necesidades de los usuarios, representando adecuadamente la informacin que se va a manejar en el portal web y minimizando el espacio ocupado. ELECCIN DEL MOTOR DE ALMACENAMIENTO Durante los campeonatos los administradores publican las noticias simultneamente, por eso es necesario asegurar que el acceso concurrente de los administradores no ponga en peligro la integridad de los datos, y que el acceso a los registros sea ptimo para que la publicacin de contenidos se realice de la forma ms gil posible.

69

Para conseguir estos objetivos es necesario elegir el motor de almacenamiento adecuado. Estos son algunos de los motores de almacenamiento ms relevantes ofrecidos por mySQL y sus caractersticas. myISAM est basado en el formato ISAM desarrollado por IBM (ya obsoleto), como ventajas ofrece una gran velocidad en las consultas, y es el sistema por defecto empleado por mySQL. Sin embargo no realiza comprobaciones de integridad referencial ni bloqueo de tablas, tampoco permite transacciones por lo que no tendra las condiciones necesarias para la base de datos Hajimejudo. HEAP (al igual que TEMPORARY), crea tablas en memoria que desaparecen al cerrarse el servidor, no permite transacciones ni integridad referencial y no ofrece un aislamiento de los recursos para mayor seguridad de las operaciones, por lo tanto tampoco sera la opcin adecuada. BDB e InnoDB por el contrario si ofrecen la posibilidad de realizar transacciones. Si comparamos ambas opciones, podemos ver que InnoDB se presenta como la mejor opcin para la aplicacin al bloquear solo la mnima cantidad del recurso requerido en el acceso a datos, ofrecer todos los niveles de aislamiento permitidos, un formato portable e integridad referencial.

Atributos Transacciones Granularidad de bloqueo Almacenamiento

MyISAM Heap No Tabla Split files No Tabla En Memoria Ninguno N/A

BDB Si Pgina (8 KB) Un solo fichero por tabla READ COMMITED No

InnoDB Si Fila

Tablespace(s) Todos Si

Niveles de Aislamiento Ninguno Formato portable Si

70

Atributos Integridad Referencial

MyISAM Heap No No

BDB No

InnoDB Si

Tabla 1: Comparativa de las caractersticas de los motores de almacenamiento ms relevantes de mySQL

3.5.2

DIAGRAMA E-R

El diagrama entidad relacin tambin llamador E-R, es un modelo que clasifica los datos en 3 tipos fundamentales: Entidades, atributos y relaciones. Este tipo de diagramas pretende definir un determinado nmero de objetos de clasificacin de datos mediante el reconocimiento intuitivo. En este contexto una entidad es definida como una coleccin de objetos del mundo real con propiedades comunes. Un atributo es un elemento de datos que describe una propiedad de una entidad o de una relacin. Las relaciones definen reglas de correspondencia entre las instancias de las entidades. La forma de relacionarse entre entidades es definida por la cardinalidad de la relacin que puede ser de uno a uno, de uno a muchos, o de muchos a muchos. (26)

Ilustracin 17: Esquema conceptual de relacin 1 a 1, (izquierda), 1 a N (centro) y N a M (derecha)

71

A continuacin se presentar el diagrama entidad-relacin de cada grupo de entidades existentes en la base de datos. El diagrama completo E-R se adjuntar en la seccin de anexos por ser demasiado extenso. SECCIN DE USUARIOS Y SESIONES Para una correcta administracin del portal, es necesario guardar informacin acerca de los administradores y las acciones que estos realizan durante las sesiones. De esta manera si ocurre algn error se identificar fcilmente la ltima accin que lo provoc y permitir a los administradores tener ms control sobre la gestin del portal. La entidad administradores se identificar mediante el atributo login. El campo permisos definir las acciones que el administrador est autorizado a realizar en el portal. Hay 3 reas en las que se pueden otorgar permisos a los administradores. Permisos de gestin de noticias, permisos de gestin de los elementos de la barra lateral, y permisos de gestin de administradores. Dentro del campo permisos, cada grupo de permisos se separar mediante el carcter -. Se reservarn 7 posiciones para los permisos de noticias y elementos de la barra lateral correspondientes a las acciones de crear, editar, mostrar, ocultar, subir, bajar y eliminar, y 3 posiciones para los permisos de administradores, correspondientes a las acciones de crear editar y eliminar. Un 0 en la posicin correspondiente al permiso significar que se le ha otorgado el permiso y un 1 que se le ha denegado. Se deber asegurar adems que el usuario root siempre tenga todos los permisos activos. El campo tendr en total 19 caracteres, incluyendo los de separacin.

72

0 0 0 0 0 0 0 - 0 0 0 0 0 0 0 - 0 0 0
Ilustracin 18Ejemplo de valor del campo permisos de la entidad administrador con todos los permisos posibles

Se aadirn tambin los atributos password y mail como atributos de la entidad administradores. Un administrador puede iniciar muchas sesiones identificadas mediante un id_sesion. Para cada sesin se debe guardar la informacin correspondiente a las acciones realizadas. Esta informacin se guardar en la entidad archivolog. Por cada sesin habr una sola instancia de archivolog. La entidad archivolog es una entidad dbil, ya que no tiene sentido sin la existencia de una sesin asociada. En el campo texto de esta entidad se guardarn todas las acciones que se hayan realizado durante la sesin.

Ilustracin 19: Diagrama E-R correspondiente a los administradores y sesiones

ESQUELETO DE LA APLICACIN

73

Cada seccin de la pgina web con un mismo formato se crear automticamente desde su documento php asociado. Por ejemplo en la pgina home hay 3 partes diferenciadas correspondientes a las noticias de primera plana, las noticias secundarias de la seccin izquierda y las noticias secundarias de la seccin derecha. Cada una de estas partes viene delimitada por su div contenedor correspondiente. En cada uno de esos divs se incluir un documento php que generar automticamente los contenidos que se quieran mostrar. Toda la web se estructurar de esta manera. Los contenidos mostrados en la web solamente pueden ser de 2 tipos; noticias, o elementos de la barra lateral. Una vez definida esta estructura principal se van a identificar las entidades y atributos necesarios para guardar la informacin de la web. En primer lugar, se ha definido una entidad modulos cuyas instancias representarn cada uno de los documentos php incluidos en las pginas del portal Hajimejudo. Los atributos correspondientes a la entidad modulos corresponden a la localizacin del mdulo dentro de la jerarqua de la web. En qu lugar de la web se encuentra (pgina), en qu parte de la pgina se encuentra (id del div dentro de la pgina), ruta del mdulo que se va a incluir en el div y nombre del mdulo o documento php a incluir. Esta informacin es necesaria para organizar que contenidos se van a mostrar en cada pgina, y para realizar las llamadas AJAX necesarias para recargar los mdulos php cuando se realice algn cambio en alguna noticia o contenido generado por ellos. En el siguiente ejemplo se puede ver la estructura de una peticin AJAX para actualizar el contenido de un div mediante el framework Prototype. Esta peticin ejecutar el documento php definido en la variable url pasndole los parmetros definidos por la variable parameters mediante el mtodo method
74

que podr ser post o get segn convenga, y el resultado de ejecutar dicho documento php se cargar en el div de id=contenedor.
var ajx=new Ajax.Updater(contenedor, url, {method:'post', parameters:param});

En la peticin la variable url tendr la siguiente estructura:

var url="ruta/nombre_documento.php";

Como identificador de la entidad modulos se puede usar el nombre del mdulo ya que cada documento php va a tener un nombre diferente. Los mdulos que generan los contenidos de la barra lateral se incluirn en el contenedor asociado a la barra lateral de todas las pginas por lo que su atributo nombre_pagina tomar el valor todas. Ahora se debe relacionar cada modulo con sus contenidos, para ello se ha creado la entidad contenidos. Estos pueden ser noticias o elementos de la barra lateral. La entidad contenidos contendr los atributos comunes a todos los contenidos. Se realizar una especializacin para definir cada tipo de contenido especfico. Los atributos de la entidad contenidos son un identificador (id_ contenido), el orden que va a ocupar dentro del mdulo, si se encuentra visible u oculto, las acciones que se encontrarn activas en su barra de acciones del sistema gestor de contenidos y la fecha en la que se public el contenido. Se debe asegurar que el campo acciones tenga siempre 7 caracteres correspondientes a las acciones (crear, editar, mostrar, ocultar, subir, bajar, eliminar). Este

75

campo funcionar de forma similar al campo permisos de la entidad administradores descrito anteriormente. La entidad general contenidos se especializar en las subentidades necesarias para representar las noticias y los elementos de la barra lateral. En el diagrama siguiente en el que se muestra la estructura bsica de las entidades de la web, se muestran solo 2 especializaciones de la entidad contenidos, correspondientes a noticias y elementos de la barra lateral para facilitar la comprensin del diagrama. Ambos tipos de contenidos se expandirn y describirn en profundidad en los diagramas siguientes. Las entidades especializadas heredarn el identificador de la entidad padre id_contenido.

Ilustracin 20: Diagrama E-R correspondiente a la estructura simplificada de las entidades ms relevantes de la base de datos

En la entidad general noticias se guardar la informacin comn a todos los tipos de noticias: ttulo, subttulo, entradilla, tipo de noticia y cuerpo de la noticia. A su vez las noticias tendrn imgenes asociadas representadas por la relacin con la entidad imgenes. El campo portada de la relacin imagenes_noticias indica si una imagen asociada a una noticia va a ser la utilizada como representativa de sta. Al expandir la entidad noticias podemos encontrar 4 tipos diferentes de noticias. Las noticias comunes comprenden las noticias de actualidad, crnicas y
76

entrevistas, que tienen una estructura comn y no presentan relaciones propias con otras entidades.

Ilustracin 21: Diagrama E-R correspondiente a los tipos de noticias

Las noticias de galera son noticias que presentan un grupo de fotografas asociadas a un campeonato, las noticias de resultados presentarn los resultados obtenidos en los campeonatos, y las noticias de retransmisiones sern las correspondientes a las retransmisiones on-line de los combates de un campeonato. TIPOS DE NOTICIAS A continuacin se describirn en profundidad las relaciones asociadas a cada tipo de noticia que presente relaciones propias con otras entidades. Al analizar las noticias de resultados obtenemos el siguiente diagrama:

77

Ilustracin 22: Diagrama E-R correspondiente a las noticias de resultados

Las instancias de la entidad noticias_result correspondientes a las noticias de resultados se relacionan con la entidad campeonatos en una relacin de cardinalidad N a M. Una noticia de resultados se relaciona necesariamente con 1 o N campeonatos, y un campeonato se puede relacionar con N noticias de resultados. A su vez, la entidad campeonatos se relaciona con la entidad dbil combates. Un combate solo puede existir al asociarse a un campeonato determinado. Un campeonato tendr N combates, mientras que un combate pertenecer necesariamente a 1 solo campeonato. Las instancias de la entidad combates tendrn campos que definen las diferentes categoras a las que pertenece el combate, adems de los contrincantes asociados identificados mediante los campos id_judoka1 e id_judoka 2, que harn referencia al campo id_judoka de la entidad judokas. El campo id_judoka2 puede estar vaco, ya que en los combates se da la situacin de que el nmero de contrincantes no sea par y se elija por sorteo a
78

un judoca que pasar automticamente a la siguiente ronda. El atributo ganador contendr un 0 si es el judoka1 el ganador, y un 1 en caso contrario. El campo tipo se utilizar para elegir el formato de tabla de resultados necesario para presentar los resultados del combate. Las noticias de retransmisiones se representarn mediante el siguiente diagrama:

Ilustracin 23: Diagrama E-R correspondiente a las noticias de retransmisiones

Las noticias de retransmisiones se relacionan con las entidades campeonatos y combates como en el caso de las noticias de resultados, y adems se relacionan con la entidad dbil retransmisin. Una instancia de la entidad noticias_retrans se relacionar con N retransmisiones, (siendo esta relacin de participacin obligatoria), y una instancia de la entidad retransmisiones se relacionar necesariamente con 1 sola noticia de retransmisiones. Una retransmisin solo tendr sentido cuando se haya creado el combate que se va a retransmitir. Las retransmisiones se realizarn desde la pgina cover it live. Esta pgina permite crear una retransmisin de forma gratuita e insertarla en nuestra pgina web mediante un cdigo iframe incrustado en el cdigo HTML.
79

De esta manera los comentarios escritos sobre los combates en cover it live aparecern automticamente en nuestra pgina conforme se vayan escribiendo, simulando una retransmisin en directo. No es necesario que los periodistas que retransmitan los combates sean dados de alta como administradores ya que ellos solamente tendrn acceso a la pgina cover it live y no al sistema gestor de contenidos Hajimejudo. En la siguiente figura se muestran algunas de las empresas que usan este servicio.

Ilustracin 24 Marcas que utilizan el servicio cover it live.

Los campos de la entidad retransmisiones sern un identificador, (id_retransmision), el nombre de la persona que retransmite el combate, (nombre periodista) y el cdigo iframe generado por la pgina cover it live, que ser lo que permitir incrustar la retransmisin en la web Hajimejudo. Las noticias que anuncian nuevas galeras en la web se representan mediante el siguiente diagrama:

80

Ilustracin 25: Diagrama E-R correspondiente a noticias_galeria

Una instancia de la entidad noticias_galeria se relaciona necesariamente con 1 o N galeras. Una galera se identifica con su id y se adjuntar tambin un atributo nombre como ttulo de la galera y una fecha. Una galera tiene N imgenes y una imagen puede aparecer en N galeras aunque normalmente aparecer solo en una. BARRA LATERAL A continuacin se muestra el diagrama de las entidades que representan los mdulos incluidos en la barra lateral.

81

Ilustracin 26: E-R correspondiente a los elementos de la barra lateral

En la barra lateral se cargarn los elementos correspondientes a las instancias de la entidad contenidos cuyo campo nombre_pagina sea igual a todas. En la entidad contenidos se crear una instancia por cada elemento de la barra lateral. Inicialmente estos elementos sern un calendario de eventos, un tabln de titulares destacados, un espacio publicitario, una foto del mes y un judoca del mes. La entidad eventos contendr los eventos asociados al calendario. En el calendario se incluirn aquellos eventos cuyo mes y ao de su campo fecha correspondan con el mes y ao actual. Los das del calendario con evento tendrn un formato diferente para resaltarlos de manera que llamen ms la atencin de los usuarios. Al poner el cursor sobre un da con evento asociado, se podr ver su atributo descripcin y si pulsamos sobre l se acceder a la informacin correspondiente al evento. La entidad eventos requiere adems un identificados propio id_evento para identificar sus instancias, aparte del identificador heredado de su entidad padre.

Ilustracin 27: Diagrama E-R correspondiente a los componentes calendario y destacados de la barra lateral y sus relaciones asociadas

82

La entidad titulares_destacados contiene los titulares de ms actualidad en la web, que se mostrarn en el tabln de titulares destacados. Al igual que ocurre con la entidad eventos, tambin se necesitar un identificador propio. Se aadirn tambin campos con la informacin necesaria del titular.

Ilustracin 28: Diagrama E-R correspondiente a los componentes publicidad, judokasmes y fotosmes

La entidad publicidad contendr la informacin asociada a cada espacio publicitario. El campo fecha_fin servir para ocultar el espacio publicitario cuando acabe el plazo contratado con el patrocinador, el atributo link conducir al usuario a la pgina web de la entidad patrocinadora. Una instancia de la entidad publicidad se relacionar necesariamente con una sola imagen y una imagen podr pertenecer a 0 o N instancias de la entidad publicidad. Las entidades judoca del mes y foto del mes contendrn la imagen a mostrar, adems de un campo comentario (opcional), donde se podr guardar una descripcin de la imagen. La entidad judokames se relacionar con la entidad
83

judokas, con una relacin de cardinalidad 1 a N. Un judoca del mes deber relacionarse necesariamente con un solo judoca. Un judoca puede estar relacionado con 0 o N judokas del mes. Las entidades judokames, fotomes y publicidad, se relacionan con la entidad imgenes, cuyas instancias se identificarn mediante el campo id_imagen, y contendrn informacin necesaria para formatear las imgenes y presentarlas correctamente.

3.5.3

DIAGRAMA DE CLASES

En este apartado se obtendrn las tablas de la base de datos a partir de la informacin recogida en el diagrama E-R. Al transformar el modelo E-R en tablas hay que seguir una serie de reglas. Estos son los casos que podemos encontrar y sus transformaciones asociadas: Las relaciones 1 a 1 en las que la participacin de ambas entidades sea total se convertirn en 1 sola tabla cuya clave primaria ser o la clave primaria de la entidad A o la clave primaria de la entidad B. Este caso lo podemos encontrar en la relacin de sesiones con archivolog. Esto es as porque si se ha iniciado una sesin es porque se ha insertado una nueva fila en la tabla sesiones, y se escribe una fila en el log cada vez que se modifica el contenido de la base de datos. Por lo tanto insertar en sesiones implica insertar en archivolog. Se crear una sola tabla (sesiones) para ambas entidades mediante el proceso descrito anteriormente. Si se trata de una relacin 1 a 1 donde una de las 2 entidades presenta una participacin total y otra una participacin parcial, se crearn 2 tablas una para cada entidad, y en la entidad de participacin parcial se aadir como atributo

84

la clave primaria de la entidad de participacin total. No se ha encontrado ninguna relacin que cumpla estas condiciones. Si se trata de una relacin 1 a 1 en la que ambas entidades muestran una participacin parcial se crearn 3 tablas una para cada entidad ms una tercera representando la relacin cuyos campos sern las claves primarias de ambas entidades. No se ha encontrado ninguna relacin que cumpla estas condiciones. En las relaciones 1 a N se crean 2 tablas y en la tabla de participacin N se crea una clave ajena correspondiente a la clave de la entidad de participacin 1. En el caso de que haya pocas tuplas en la tabla que representa la participacin N se pueden crear 3 tablas 1 para cada entidad y otra para la relacin que tendr como atributos las claves de ambas tablas. Siendo su clave principal la de la tabla de participacin N. Un ejemplo de este caso especial es el de la relacin noticias con galeras, ya que habr pocas noticias en relacin al total de noticias que estn relacionadas con galeras y esto provocara muchos valores null al crear una clave ajena id_galeria en la tabla noticias. Tambin encontramos este caso en las relaciones noticias-retransmisiones y noticias-campeonatos. Como representacin del caso general encontramos la relacin de combates con judocas, en la que se ha aadido una clave ajena en la tabla combates haciendo referencia a la tabla judocas. Por ltimo en las relaciones de N a M se crean 3 tablas una para cada entidad ms una tercera para la relacin cuyos atributos sern las claves de ambas, y cuya clave primaria estar formada por la suma de ambas claves. Un ejemplo de relacin muchos a muchos es la relacin de galeras con imgenes, ya que una imagen puede aparecer en varias galeras y una galera puede, (y normalmente tendr), muchas imgenes.
85

Por cada tipo de entidad dbil relacionada con una entidad fuerte se crear una tabla para la entidad fuerte y otra tabla que contenga los atributos simples de la entidad dbil y como clave ajena la clave primaria de la entidad fuerte. La clave principal de la tabla creada para la entidad dbil ser la combinacin de las claves primarias de ambas entidades. Si hay alguna entidad dbil cuya entidad propietaria sea tambin dbil, entonces la entidad dbil propietaria debe transformarse primero, para determinar su clave primaria en primer lugar. Este es el caso de las entidades dbiles retransmisin y combates, en las que combates sera la clave dbil propietaria y retransmisiones la subordinada. (27) Si observamos el diagrama E-R correspondiente a las noticias y sus especializaciones se aprecia que resulta poco eficiente crear una tabla para cada especializacin de noticia: noticias_result, noticias_retrans, noticias_galerias y noticias_comunes, ya que no poseen atributos propios y sera ineficiente tener que insertar en tantas tablas cada vez que se crea una noticia, por lo que se ha creado un atributo tipo en la clase general noticias y se han obviado las especializaciones para resolver este problema. A continuacin se muestra el diagrama de clases final.

86

Ilustracin 29 Diagrama de clases obtenido a partir del diagrama E-R

87

4 CONCLUSIONES Y PERSPECTIVAS

4.1OBJETIVOS CONSEGUIDOS
Una vez concluido el trabajo realizado se ha obtenido un sistema con el que resolver los problemas planteados en la introduccin. Los administradores del grupo Hajimejudo, tienen a su disposicin una herramienta con la que publicar el material recopilado de una forma ms gil, sencilla e intuitiva, de manera que puedan ofrecer un mejor servicio de informacin a sus seguidores habituales. Por otra parte se permite dar diferentes permisos a los administradores de forma que si el grupo crece se pueda distribuir mejor la labor de cada componente del grupo y unos miembros no puedan editar errneamente contenido para el que no han sido autorizados. Se ha asegurado la correcta manipulacin de las contraseas mediante el uso del protocolo https que es utilizado principalmente por entidades bancarias, tiendas on-line y cualquier tipo de servicio que requiera el envo de datos personales o contraseas. En cada una de las pginas accedidas se comprobar si el usuario es administrador o usuario general y en funcin de esto se mostrar un contenido u otro de manera que no sea posible alcanzar la funcionalidad del sistema gestor de contenidos si la persona que est accediendo no es un usuario administrador. Se ha conseguido un sistema fcil de manipular ya que la funcionalidad del sistema gestor de contenidos se encuentra fcilmente sin necesidad de navegar en la web y resulta muy intuitivo al presentar el mismo aspecto que la pgina web general, pero aadiendo la funcionalidad para los usuarios identificados. Tambin es fcil de ampliar y mantener ya que las tecnologas usadas son en su totalidad de software libre que ofrece entre sus ventajas soporte y compatibilidad a largo plazo.
88

El motor de almacenamiento Innodb de mySQL usado en la aplicacin permite el uso de transacciones para una gestin segura de la informacin de la web, evitando posibles inconsistencias en la base de datos, mientras que el uso del formato JSON como formato de intercambio de datos entre cliente y servidor en las consultas AJAX, permite un intercambio ms gil y rpido al ser este un formato ms ligero que otros lenguajes similares de intercambio de datos como XML. A su vez la incorporacin de la base de datos al portal Hajimejudo ofrece como ventaja frente al blog, una herramienta con la que poder disponer de toda la informacin publicada para crear noticias a partir de informaciones pasadas o realizar el seguimiento de la carrera de algn deportista entre otras posibilidades. Con todo podemos concluir que se han cumplido los requisitos planteados inicialmente creando una herramienta que se ajusta a las necesidades del grupo Hajimejudo.

4.2POSIBLES AMPLIACIONES
Una propuesta interesante para el futuro del portal Hajimejudo sera la realizacin de un apartado de mantenimiento al que se pudiera acceder previa identificacin y que presentara las tareas pendientes de cada seccin de la web. Por ejemplo unos das antes de cada mes, se pedira a los usuarios administradores que crearan la foto del mes y el judoca del mes as como los eventos asociados al mes entrante. Dichos avisos se podran programar para mostrarse en una fecha determinada y recordar a los administradores la publicacin de una noticia, galera de fotos, resultados, retransmisiones etc De esta manera unos administradores podran dejar preparadas las tareas a realizar, mientras que otros las consultaran y las llevaran a cabo. Para la realizacin de esta ampliacin solo sera necesaria la introduccin de una nueva tabla tareas que sera similar a esta:

89

Ilustracin 30: Tabla tareas para la realizacin de un sistema de tareas programadas

Con esta ampliacin sera posible revisar de un vistazo el estado del portal seccin a seccin y qu tareas estn pendientes y su urgencia. Por otra parte tambin sera interesante la realizacin de una serie de plantillas css para las noticias, los anuncios y las galeras de forma que los administradores pudieran elegir rpidamente el formato que mejor se ajusta al espacio disponible, el formato y tamao de las fotos etc..

4.3 CONSIDERACIONES FINALES

Tras la realizacin del proyecto y con la experiencia adquirida pienso que es importante tomar en consideracin la eleccin de un framework php para futuros proyectos. A la hora de abordar el desarrollo de un portal web como el descrito en esta memoria, es interesante meditar si el uso de un framework php podra facilitar su implementacin. Los frameworks se suelen usar para realizar proyectos en tiempos reducidos, y suelen estar provistos de APIs muy completas donde buscar informacin, comunidades de usuarios, e infinidad de mdulos y plugins listos para ser usados. Dos de los frameworks con los que he tomado contacto en los ltimos meses son cake php y wordpress. Por una parte el primero tiene una curva de
90

aprendizaje superior a wordpress pero permite una mayor libertad y control sobre el proyecto, y resultara especialmente indicado para proyectos muy personalizados en los que sea importante la escalabilidad y el desarrollo de muchas funciones especficas. Por otra parte wordpress es muy sencillo de usar pero deja menos libertad de movimiento a la hora de adaptarlo a nuestras necesidades, y puede presentar dificultades de escalabilidad si el proyecto comienza siendo pequeo y aumenta mucho en funcionalidad y nmero de usuarios.

91

5 BIBLIOGRAFA
1.Bell,CharlesA.ExpertMySQL.s.l.:Apress,2007. 2.cenatic.http://www.somoslibres.org.http://www.somoslibres.org.[Enlnea]11deAgostode2010. http://www.somoslibres.org/modules.php?name=News&file=article&sid=3756. 3.HTML.net.http://www.html.net.http://www.html.net.[Enlnea] http://www.html.net/tutorials/html/lesson2.asp. 4.Consortium,WorldWideWeb.http://www.w3.org.http://www.w3.org.[Enlnea]2010. http://www.w3.org/standards/webdesign/htmlcss. 5..http://www.w3c.es.http://www.w3c.es.[Enlnea]9deEnerode2008. http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo. 6.W3Consortium.www.w3schools.com.[Enlnea]2010. http://www.w3schools.com/css/css_howto.asp. 7.Prez,JavierEguluz.http://www.librosweb.es.http://www.librosweb.es.[Enlnea]2009. http://www.librosweb.es/javascript/capitulo1/breve_historia.html. 8.Google.http://google.dirson.com.[Enlnea]2008.http://google.dirson.com/post/4094javascript lenguajefuturo/. 9.PrototypeCoreTeam.www.prototype.org.[Enlnea]2007.www.prototype.org. 10.Foundation,ApacheSoftware.http://httpd.apache.org.http://httpd.apache.org.[Enlnea]2009. http://httpd.apache.org/ABOUT_APACHE.html. 11.ApacheSoftwareFoundation.http://httpd.apache.org.[Enlnea]2009.http://httpd.apache.org. 12.Group,ThePHP.http://www.php.net.http://www.php.net.[Enlnea]2010. http://www.php.net/manual/es/history.php.php. 13.Davis,MicheleE.yPhillips,JonA.LearningPHP&MySQL,2ndEdition.s.l.:O'ReillyMedia,Inc., 2007. 14.IBM.http://www.ibm.com.[Enlnea]6deMayode2008. http://www.ibm.com/developerworks/opensource/library/osphpfuture/. 15.Ullman,Larry.PHP6andMySQL5forDynamicWebSites:VisualQuickPro.s.l.:PeachpitPress, 2007. 16.Welling,LukeyThomson,Laura.PHPandMySQLWebDevelopment,FourthEdition.s.l.:Addison WesleyProfessional,2008.

92

17.Zawodny,JeremyD.yBalling,DerekJ.HighPerformanceMySQL.s.l.:O'ReillyMedia,Inc.,2004. 18.BogdanBrinzarea,CristianDarie,AudraHendrix.AJAXandPHPBuildingModernWebApplications SecondEdition.Birmingham:PacktPublishingLtd.,2009. 19.Mellado,Javier.http://www.ajaxhispano.com.http://www.ajaxhispano.com.[Enlnea]17deEnero de2006.http://www.ajaxhispano.com/diezrazonesparausarAJAX.html. 20.GregoryMurray,JenniferBall.http://www.oracle.com.http://www.oracle.com.[Enlnea] http://www.oracle.com/technetwork/java/javaee/tutorialjsp140089.html#whatis. 21.JSON.org.http://www.json.org/.[Enlnea]http://www.json.org/. 22.Olson,StevenDouglas.AjaxonJava.s.l.:O'ReillyMedia,Inc.,2007. 23.Robbins,JenniferNiederst.LearningWebDesign,ThirdEdition.s.l.:O'ReillyMedia,Inc.,2007. 24.Gomaa,Hassan.DesigningSoftwareProductLineswithUML:FromUseCasestoPatternBased SoftwareArchitectures.s.l.:AddisonWesleyProfessional,2004. 25.Mancha,DepartamentodeSistemasInformticosCastillaLa.http://www.dsi.uclm.es/.[Enlnea] 2006.http://www.dsi.uclm.es/asignaturas/42530/pdf/M2tema10.pdf. 26.Teorey,TobyJ.,yotros.DatabaseDesignKnowItAll.s.l.:MorganKaufmann,2008. 27.Elmasri,RamaezyNavathe,ShamkantB.FundamentosdeSistemasdeBasesdeDatos.s.l.:Addison Wesley,2007.pgs.190194. 28.Lans,RickF.vanderyCools,Diane.SQLforMySQLDevelopers:AComprehensiveTutorialand Reference.s.l.:AddisonWesleyProfessional,2007. 29.Zawodny,JeremyD.yBalling,DerekJ.HighPerformanceMySQL.s.l.:O'ReillyMedia,Inc.,2004. 30.InstitutoNacionaldeTecnologasdelaComunicacin,S.A.(INTECO).http://www.inteco.es. http://www.inteco.es.[Enlnea]Enerode2009. http://www.google.es/url?sa=t&source=web&cd=4&ved=0CCwQFjAD&url=http%3A%2F%2Fwww.intec o.es%2Ffile%2F6SuuXwyM_c_UVBFiYfg_Ag&rct=j&q=JavaScript%20no%20es%20reconocido%20ni%20in dexado%20por%20los%20buscadores.&ei=5_4uTqUD8ibOruq9X4&usg=AFQjCNFUfSra5N5YTCbRt.

93

6 ANEXOS
6.1 GESTIN DE ADMINISTRADORES

Ilustracin 31: Diagrama actividad asociado al caso de uso Alta Administrador

94

Ilustracin 32: Diagrama de actividad correspondiente al caso de uso Edicin de Administrador

95

Ilustracin 33: Diagrama de actividad correspondiente al caso de uso Baja Administrador

96

6.2 GESTIN DE SESIONES

Ilustracin 34: Diagrama de actividad correspondiente al caso de uso Obtener Log de Sesin

Ilustracin 35: Diagrama de actividad correspondiente al caso de uso Iniciar Sesin

97

Ilustracin 36: Diagrama de actividad correspondiente al caso de uso Cerrar Sesin

6.3 GESTIN DE NOTICIAS

Ilustracin 37: Diagrama de actividad correspondiente al caso de uso Crear Noticia

98

Ilustracin 38: Diagrama de actividad correspondiente al caso de uso Editar Noticia

Ilustracin 39: Diagrama de actividad correspondiente al caso de uso Mostrar Noticia

99

Ilustracin 40: Diagrama de actividad correspondiente al caso de uso Ocultar Noticia

Ilustracin 41: Diagrama de actividad correspondiente al caso de uso Subir Noticia

100

Ilustracin 42: Diagrama de actividad correspondiente al caso de uso Bajar Noticia

101

Ilustracin 43: Diagrama de actividad correspondiente al caso de uso Eliminar Noticia

102

6.4 GESTIN DE LA BARRA LATERAL

Ilustracin 44: Diagrama de actividad correspondiente al caso de uso crear evento de calendario

103

Ilustracin 45: Diagrama de actividad correspondiente al caso de uso editar evento de calendario

Ilustracin 46: Diagrama de actividad correspondiente al caso de uso eliminar evento de calendario

104

Ilustracin 47: Diagrama de actividad correspondiente al caso de uso crear destacado

Ilustracin 48: Diagrama de actividad correspondiente al caso de uso editar destacado

105

Ilustracin 49: Diagrama de actividad correspondiente al caso de uso eliminar destacado

106

Ilustracin 50: Diagrama de actividad correspondiente al caso de uso crear judoca del mes/foto del mes

107

Ilustracin 51: Diagrama de actividad correspondiente al caso de uso editar judoca/foto del mes

Ilustracin 52: Diagrama de actividad correspondiente al caso de uso eliminar judoca/foto del mes

108

Ilustracin 53: Diagrama de actividad correspondiente al caso de uso crear espacio publicitario

109

Ilustracin 54: Diagrama de actividad correspondiente al caso de uso editar espacio publicitario

110