Escuela Tcnica Superior de Ingeniera Informtica

PROYECTO FIN DE CARRERA

Desarrollo de un portal Web para el aprendizaje basado en el uso del Tablet PC

Para optar a la titulacin de Ingeniero Tcnico en Informtica de Gestin

Presentado por:
Pilar Rivera Ortiz

Dirigido por:
Flix Buenda Garca

ndice
1. INTRODUCCIN ...................................................................... 5 1.1. PRESENTACIN DE OBJETIVOS ....................................... 5 1.2. ESTRUCTURA DE LA MEMORIA ........................................ 6 2. ESPECIFICACIN DE REQUISITOS ............................................. 2.1. INTRODUCCIN ............................................................ 2.1.1. PROPSITO ............................................................. 2.1.2. MBITO .................................................................. 2.1.3. DEFINICIONES, ACRNIMOS Y ABREVIATURAS ............ 2.1.4. REFERENCIAS .......................................................... 2.1.5. VISIN GLOBAL ....................................................... 2.2. DESCRIPCIN GENERAL ................................................ 2.2.1. PERSPECTIVA DEL PRODUCTO ................................... 2.2.2. FUNCIONES DEL PRODUCTO ...................................... 2.2.3. CARACTERSTICAS DEL USUARIO .............................. 2.2.4. RESTRICCIONES GENERALES .................................... 2.2.5. SUPUESTOS Y DEPENDENCIAS ................................... 2.3. REQUISITOS ESPECFICOS ............................................. 2.3.1. REQUISITOS DE INTERFACES EXTERNOS .................... 2.3.2. REQUISITOS FUNCIONALES ...................................... 2.3.3. REQUISITOS DE EFICIENCIA ..................................... 2.3.4. REQUISITOS DE DISEO .......................................... 2.3.5. ATRIBUTOS ............................................................. 2.3.6. OTROS REQUISITOS ................................................. 3. MODELADO CONCEPTUAL ........................................................ 3.1. INTRODUCCIN ............................................................ 3.2. ANLISIS FUNCIONAL: DIAGRAMA DE CASOS DE USO ....... 3.3. ANLISIS ESTRUCTURAL: DIAGRAMA DE CLASES ............. 4. INTRODUCCIN A JOOMLA! ..................................................... 4.1. QU ES UN CMS ........................................................... 4.2. DISEO ESTRUCTURAL DE JOOMLA! ................................ 4.2.1. INTRODUCCIN ....................................................... 4.2.2. CAPA DE PRESENTACIN .......................................... 4.2.2.1. INTERFAZ BACK-END ...................................... 4.2.2.2. INTERFAZ FRONT-END .................................... 4.2.3. CAPA DE NEGOCIO ................................................... 4.2.4. CAPA DE DATOS ...................................................... 5. IMPLEMENTACIN EN JOOMLA! ................................................. 5.1. INTRODUCCIN ............................................................ 5.2. COMPONENTES Y MDULOS BSICOS ............................. 5.3. COMPONENTES ADICIONALES ........................................ 7 7 7 7 7 7 7 8 8 8 9 9 10 10 10 10 11 12 12 12 13 13 13 17 19 19 19 19 20 21 22 25 25 30 30 30 37

6. EVALUACIN .......................................................................... 70 7. CONCLUSIN ......................................................................... 72 8. REFERENCIAS ........................................................................ 73

ndice de Ilustraciones.
Ilustracin 1: Caso de uso del usuario annimo ............................ Ilustracin 2: Caso de uso del usuario registrado .......................... Ilustracin 3: Caso de uso del usuario gestor para el portal de acceso pblico ...................................................... Ilustracin 4: Caso de uso del usuario gestor para el portal de administrador ....................................................... Ilustracin 5: Caso de uso del usuario administrador para el portal de acceso pblico ................................................. Ilustracin 6: Caso de uso del usuario administrador para el portal de administrador .................................................. Ilustracin 7: Diagrama de clases ............................................... Ilustracin 8: Arquitectura de tres capas ...................................... Ilustracin 9: Interfaz del portal del administrador ........................ Ilustracin 10: Cabecera de la interfaz del portal del administrador Ilustracin 11: Men superior de la interfaz del portal del administrador ................................................... Ilustracin 12: Contenido de la interfaz del portal del administrador Ilustracin 13: Columna derecha del portal del administrador ......... Ilustracin 14: Vista del portal web ............................................. Ilustracin 15: Cabecera del portal web ....................................... Ilustracin 16: Men superior del portal web ................................ Ilustracin 17: Men izquierdo del portal web ............................... Ilustracin 18: Contenido del portal web ...................................... Ilustracin 19: Tablas de contenido de la base de datos de Joomla! Ilustracin 20: Tablas de registro de usuarios y grupos de usuarios de la base de datos de Joomla! ............................ Ilustracin 21: Tablas de estadsticas de la base de datos de Joomla! ............................................................. Ilustracin 22: Tablas de componentes y plugins de la base de datos de Joomla! ................................................ Ilustracin 23: Tablas de mens y plantillas de la base de datos de Joomla! ............................................................. Ilustracin 24: Men de componentes ......................................... Ilustracin 25: Formulario de acceso al portal web ........................ Ilustracin 26: Configuracin del Formulario de acceso .................. Ilustracin 27: Bsqueda del portal web ...................................... Ilustracin 28: Configuracin de la Bsqueda del portal ................. Ilustracin 29: Mens del portal web ........................................... Ilustracin 30: Configuracin del men principal del portal ............. Ilustracin 31: Sindicacin del portal ........................................... Ilustracin 32: Configuracin de la Sindicacin del portal ............... Ilustracin 33: Portal del mdulo Joom!Fish ................................. Ilustracin 34: Gestor de lenguajes del mdulo Joom!Fish .............. Ilustracin 35: Gestor de mdulos de Joomla! .............................. Ilustracin 36: Configuracin del mdulo Joom!Fish ...................... Ilustracin 37: Seleccin de idioma en la interfaz del portal (1) ...... Ilustracin 38: Seleccin de idioma en la interfaz del portal (2) ...... Ilustracin 39: Men de traducciones del componente Joom!Fish .... Ilustracin 40: Listado con los accesos de los mens ..................... Ilustracin 41: Traduccin de un men del portal web ................... Ilustracin 42: Parmetros del men a traducir ............................ Ilustracin 43: Activacin de una traduccin del componente Joom!Fish ......................................................... 14 14 15 15 16 16 18 20 21 21 21 22 22 23 23 23 24 24 26 27 28 28 29 30 31 31 33 34 35 35 37 37 38 39 39 40 40 41 43 43 44 45 46 3

Ilustracin 44: Gestor de artculos de contenido de Joomla! ........... Ilustracin 45: Traduccin de un artculo de contenido .................. Ilustracin 46: Configuracin de parmetros de un artculo de contenido traducido ............................................ Ilustracin 47: Mensaje de confirmacin del proceso de traduccin .. Ilustracin 48: Interfaz del portal web en castellano ...................... Ilustracin 49: Interfaz del portal web en ingls ........................... Ilustracin 50: Configuracin del enlace del mapa web .................. Ilustracin 51: Configuracin del mdulo Xmap. Pestaa Sitemaps Ilustracin 52: Configuracin del mdulo Xmap. Pestaa CSS ......... Ilustracin 53: Configuracin del mdulo Xmap. Pestaa Extensiones ....................................................... Ilustracin 54: Opciones de configuracin del mdulo Xmap ........... Ilustracin 55: Interfaz del mapa web en el portal ........................ Ilustracin 56: Interfaz de administrador del mapa web en el portal Ilustracin 57: Gestor de plugins de Joomla! ................................ Ilustracin 58: Configuracin del componente MorpheoShow .......... Ilustracin 59: Configuracin de la galera clsica del componente MorpheoShow .................................................... Ilustracin 60: Configuracin del Estilo CSS del componente MorpheoShow .................................................... Ilustracin 61: Configuracin de galera vista bsica del componente MorpheoShow .................................................... Ilustracin 62: Configuracin de la distribucin de listado del componente MorpheoShow .................................. Ilustracin 63: Configuracin del listado de miniaturas del componente MorpheoShow .................................. Ilustracin 64: Configuracin las miniaturas de las galeras del componente MorpheoShow .................................. Ilustracin 65: Creacin de una galera de imgenes ..................... Ilustracin 66: Listado de galeras creadas ................................... Ilustracin 67: Subir una imagen a una galera ............................. Ilustracin 68: Listado de imgenes subidas a una galera .............. Ilustracin 69: Configuracin del enlace web de una galera creada Ilustracin 70: Interfaz de la galera de imgenes del portal web .... Ilustracin 71: Integracin de una galera de imgenes en un artculo de contenido .......................................... Ilustracin 72: Visualizacin de un artculo de contenido con una galera de imgenes integrada ............................. Ilustracin 73: Error al buscar nuestro portal web ......................... Ilustracin 74: Validacin del cdigo HTML del portal web .............. Ilustracin 75: Mensaje de confirmacin de la validacin HTML ....... Ilustracin 76: Validacin del cdigo CSS del portal web ................

46 47 48 49 49 50 51 52 53 54 54 55 56 56 57 58 58 60 61 62 62 63 65 66 66 67 67 68 68 70 70 71 71

1. INTRODUCCIN
1.1. PRESENTACIN DE OBJETIVOS

Este proyecto final de carrera consiste en realizar un portal que proporcione informacin y servicios relacionado con las mltiples posibilidades de aprendizaje que ofrece un dispositivo Tablet PC. Este proyecto se desarrolla en el contexto del premio concedido a la Universidad Politcnica de Valencia por la propuesta Improving effective learning in a first-year Computer Engineering course by using mobile Tablet PC technology, presentada al programa HP Technology for Teaching Grant Initiative, Transforming teaching and learning through technology que otorga a la Escuela Tcnica Superior de Informtica Aplicada diverso soporte didctico de la compaa para promover su uso en la docencia. La propuesta presentada por la ETSIAp plantea el uso individual del Tablet PC en las sesiones de clase de un grupo experimental de Ampliacin de Tecnologa de Computadores. Uno de los requisitos que exige la compaa HP para continuar el proyecto es la existencia de un portal web que se publicar en la pgina de la empresa en el que se incluya: Ttulo, resumen y equipo investigador. Objetivos (incluyendo qu aspectos se deben mejorar). Implementacin (cambios en las estrategias didcticas, uso de la tecnologa, etc). Resultados / Impacto (en la enseanza y en el aprendizaje). Documentacin. - Publicaciones presentadas a Conferencias. - Contenido multimedia. La idea del proyecto sera crear un portal web con la informacin citada anteriormente amplindolo hasta convertirlo en un portal sobre usos didcticos de los Tablets Pcs aadiendo informacin sobre otros proyectos de usos docentes de Tablets no solo a nivel universitario , software especfico de los Tablets, documentacin (artculos, informes, casos de estudio,), referencias, etc. Para la realizacin del portal se hara uso del sistema de administracin de contenidos Joomla! instalado en un servidor Apache. La base de datos ser MySQl, las pginas estaran escritas en PHP5 y sus plantillas estaran definidas en hojas de estilo CSS, cumpliendo con los estndares de W3C. En el portal existira la posibilidad de registrarse para acceder a segn qu recursos, as como para poder escribir artculos. Para esto se utilizara una jerarqua de usuarios que ira desde el administrador con acceso a cualquier servicio del portal y con capacidad de decidir sobre el contenido creado por los usuarios , al usuario annimo pasando el usuario registrado y el gestor.

1.2.

ESTRUCTURA DE LA MEMORIA

A continuacin se describe cada uno de los captulos de los que se compone la presente memoria: CAPTULO 1. INTRODUCCIN.

Se describen los objetivos a cumplir, el contexto en el que se desarrolla el proyecto y la estructura de la memoria. CAPTULO 2. ESPECIFICACIN DE REQUISITOS.

Se explica la Especificacin de Requisitos de Software (ERS), que describe de forma clara los requisitos, necesidades y caractersticas que el sistema deber cumplir. CAPTULO 3. MODELADO CONCEPTUAL.

Se explica de forma genrica los aspectos generales del portal, utilizando modelos para lograr relacionar estos aspectos generales con los requisitos capturados durante la Especificacin de Requisitos de Software. CAPTULO 4. INTRODUCCIN A JOOMLA!

Desarrollo orientado a la solucin de la problemtica planteada en el modelado conceptual, es decir, como se desarrolla el portal y los elementos que lo componen. CAPTULO 5. IMPLEMENTACIN EN JOOMLA!

Una vez realizada la Especificacin de Requisitos de Software, explicada la fase de Modelado Conceptual y la estructura del portal, se procede a explicar la implementacin del portal. CAPTULO 6. EVALUACIN.

Pruebas de validacin de XHTML y hoja de estilo en el portal del organismo W3C. CAPTULO 7. CONCLUSIN.

Valoracin del trabajo realizado del proyecto y conclusiones finales. CAPTULO 8. REFERENCIAS.

Relacin de documentacin consultada para el desarrollo del proyecto y la memoria.

2. ESPECIFICACIN DE REQUISITOS
1. INTRODUCCIN. 1.1. Propsito. El propsito de esta especificacin de requisitos es definir los requerimientos del portal web Tablet Ink con la intencin de que sirva de compromiso entre el cliente y el equipo de desarrolladores, de modo que el cliente se pueda hacer una idea lo ms concreta posible de las funcionalidades que ofrecer el portal para que los desarrolladores no vean ambiguas las peticiones que tiene el cliente en mente. Se trata de un dispositivo dependiente, pues para que pueda ser usado es necesario que est alojado en un servidor y que el usuario final est conectado a una red Internet para poder interactuar con el producto. 1.2. mbito. El portal Tablet Ink consiste en un sitio web en el que se podr encontrar documentacin de inters, proyectos docentes de varios centros con relacin con los Tablet PCs, un repositorio de enlaces de software especfico para las Tablets, referencias y un apartado sobre el premio que cada ao da la compaa HP en su programa Technology for Teaching Grant Initiative, Transforming teaching and learning through technology. 1.3. Definiciones, acrnimos y abreviaturas. Tablet PC: Ordenador porttil con pantalla tctil. Identificarse: Introducir el nombre de usuario y su contrasea en un formulario para compararla con los valores que existen en la base de datos del sistema y acreditar la identidad del usuario. W3C: World Wide Web Consorcium (Consorcio World Wide Web). Organizacin que dicta los protocolos que deben cumplir las pginas web. Cliente: Ordenador que intenta acceder al portal Tablet Ink y que para ello se comunica con el servidor para enviarle las peticiones oportunas. Servidor: Ordenador en el que estar alojado el portal Tablet Ink y que ser el encargado de dar respuesta a cualquier peticin que le llegue de los clientes. CMS: Sistema de Gestin de Contenidos (Content Management System). Para ms informacin ver el apartado 4.1 de la memoria. Back-end: Parte del portal web al que solo tiene acceso el administrador y el gestor, y cuya funcionalidad es la de gestionar el portal. Front-end: Parte del portal web al que tiene acceso cualquier usuario. Es con la que interactan los usuarios con la web. Artculo de contenido: Cada uno de los escritos de mayor extensin que se insertan en el portal web. Seccin: Grupos en los que se divide el portal web segn el contenido al que haga referencia. Categora: subgrupos dentro de una seccin. 1.4. Referencias. Gua del IEEE para la Especificacin de Requisitos Software (IEEE Std. 830-1998) Diccionario de la Real Academia Espaola: http://ww.rae.es

1.5. Visin global. A lo largo del documento se podrn ver las especificaciones del portal. En ellas se hablar de las funcionalidades que desarrollar, del tipo de usuarios que habr, de las restricciones que tendr y de los requisitos especficos que estarn organizados por modo. 2. DESCRIPCIN GENERAL. 2.1. Perspectiva del producto. Aunque hoy en da podemos encontrar gran variedad de informacin sobre los Tablet PC en Internet, es difcil encontrar una pgina web donde relacionen el uso que se les puede dar en la docencia especialmente a nivel universitario con software y documentos relacionados para ellos, aadiendo la posibilidad de colaborar en el portal. Es por esto que se desea realizar una web independiente donde el usuario pueda encontrar toda la informacin que necesite. 2.2. Funciones del producto. A continuacin mencionamos las funciones que dispondr el portal. En el diagrama funcional del apartado 3.1 de esta memoria veremos qu usuarios tienen acceso a cada una de ellas. Bsqueda de contenido: Bsqueda por palabras. Bsqueda por categora. Bsqueda por autor. Bsqueda por fecha de publicacin. Gestin de usuarios: Dar de alta un usuario. Dar de baja un usuario. Modificar datos de un usuario. Gestin de artculos de contenido: Aadir un artculo de contenido. Publicar un artculo de contenido. Eliminar un artculo de contenido. Modificar un artculo de contenido. Aadir traduccin de un artculo de contenido. Gestin de comentarios: Aadir un comentario a un artculo de contenido. Eliminar un comentario de un artculo de contenido. Modificar un comentario. Gestin de categoras: Aadir una categora. Eliminar una categora. Modificar una categora. Aadir traduccin de una categora. Gestin de secciones: Aadir una seccin. Eliminar una seccin. Modificar una seccin. Aadir traduccin de una seccin.

Gestin de cambios en el portal: Iniciar sesin. Finalizar sesin. Cambiar el idioma del portal. 2.3. Caractersticas del usuario. En nuestro portal existirn cuatro tipos de usuarios. En las siguientes lneas se explica la jerarqua existente entre ellos, existiendo dependencias entre ellos y sobreentendiendo que los privilegios de los usuarios de ms bajo rango se heredan en los privilegios de los usuarios superiores: El usuario annimo, caracterizado por tener la asignacin ms limitada de las funciones ofrecidas en la pgina. Pueden ser usuarios registrados que aun se han identificado o usuarios a los que no les interesa registrarse en la pgina porque no necesitan ms informacin de la que se les ofrece. Sus privilegios se resumen en poder visualizar cualquier documento publicado de carcter pblico, leer comentarios, escribir comentarios y realizar bsquedas. El usuario registrado, caracterizado por tener acceso a artculos de contenido restringidos a los usuarios annimos. El usuario gestor, caracterizado por tener privilegios en el portal de acceso pblico (front-end) y en el portal del administrador (backend) de la pgina web. Tiene acceso a los artculos de contenido de orden pblico y restringido y adems tiene poder para crear y publicar nuevos artculos de contenido, as como para modificar los ya existentes. Tambin tiene acceso a la gestin de secciones y categoras. El usuario administrador, caracterizado por ser el de mayor rango. Tiene acceso a cualquier funcionalidad del portal, por lo que sera capaz tanto de gestionar usuarios, publicaciones, secciones y categoras, as como cualquier otra funcin necesaria para gestionar la pgina web. No tiene ninguna restriccin. Restricciones generales.

2.4.

En el apartado anterior, cuando hemos mencionado que el usuario administrador no tiene ninguna restriccin no incluimos la posibilidad de cambiar la estructura de la base de datos. Este privilegio repercutir sobre el administrador de la base de datos y cualquier cambio implicara la actualizacin del software. Para asegurarnos de que la pgina est operativa tras cualquier incidencia en el servidor es recomendable hacer copias de seguridad peridicamente, as como tener instaladas unas medidas mnimas de seguridad como cortafuegos, encriptacin de contraseas de usuarios, etc. De este modo conseguiramos reducir el nmero de errores crticos que pudiesen aparecer en el mantenimiento de la pgina web. En cuanto a la seguridad, los usuarios con acceso a zonas restringidas se deben identificar con su usuario y contrasea, que debern mantener en secreto. 9

El servidor que alberga el portal debe tener instalado el soporte para el lenguaje orientado a la web, un motor de base de datos y utilizar un sistema operativo de uso comn, que contenga editores de cdigo adecuados para el desarrollador. Dependiendo del nmero de accesos a la pgina web y de la carga de trabajo que reciba el servidor, se deber configurar su capacidad para poder asegurar el correcto funcionamiento. Como el portal sigue el estndar W3C, las principales restricciones hardware son un navegador web actual y una conexin de Internet para poder acceder a la pgina. 2.5. Supuestos y dependencias. Dado que para el correcto funcionamiento del portal es necesario el uso de un servidor web y un CMS, podra darse el caso de que en un futuro sea necesario actualizarlos para evitar fallos en la seguridad, existiendo la posibilidad de tener que modificar el anlisis funcional del portal para asegurarnos de la compatibilidad con las funciones actuales. 3. REQUISITOS ESPECFICOS. 3.1. Requisitos de interfaces externos. Interfaces de usuario. Como el portal sigue el estndar marcado por W3C para el desarrollo de pginas escritas en HTML y CSS slo sera necesario tener un nico interfaz web que se fuese adaptando a las necesidades de cada usuario dentro de la misma plantilla, por lo que se podra visualizar correctamente desde cualquier navegador web. Interfaces hardware. Para que el usuario pueda acceder sin dificultades al portal es necesario que disponga un equipo capaz de cargar y visualizar correctamente una pgina web, por lo que necesitar un ordenador con una resolucin mnima de 800x600 conectado a cualquier red capaz de navegar por Internet. Para que la comunicacin con posible se necesitara una mquina estuviese equipada con un gran ancho solicitudes que le vayan enviando, as servicio de peticiones. 3.2. el cliente sea lo ms efectiva que hiciese de servidor que de banda para responder a las como un proxy para agilizar el

Requisitos funcionales. En las siguientes pginas haremos una pequea descripcin de las funciones que ofrece la aplicacin web. Estn organizadas por tipo de portal y de usuario. Portal genrico y usuario annimo. Es el portal al que acceden los usuarios que no estn registrados en la base de datos o que todava no se hayan identificado. En l las funciones son ms restrictivas. Los usuarios annimos pueden: - Acceder a todos los contenidos que no estn restringidos. - Realizar comentarios sobre los artculos de contenido pblicos. - Acceder al formulario de registro. 10

- Acceder al formulario de identificacin (iniciar sesin). - Realizar una bsqueda de contenido. - Imprimir, convertir a formato pdf o enviar un artculo de contenido. Portal genrico y usuario registrado. Grficamente es el mismo portal al que tienen acceso los usuarios annimos, pero con la funcionalidad del portal ampliada. Las nuevas funciones son: - Acceder a todos los contenidos, sin restricciones. - Dejar de estar identificado (cerrar sesin). - Enviar artculos de contenido y enlaces al portal, sin que se publiquen. Portal genrico y usuario gestor. Un usuario gestor es un usuario registrado con ms privilegios. En el portal genrico un usuario registrado se distingue del usuario gestor en que este ltimo puede: - Modificar cualquier artculo de contenido del portal. - Publicar artculos de contenido y enlaces enviados por los usuarios registrados o por l mismo. Portal de administrador y usuario gestor. Un usuario gestor puede ayudar a gestionar el portal, aunque con limitaciones. Entre sus responsabilidades estn las siguientes: - Capacidad de crear, modificar y eliminar secciones y categoras. - Capacidad de crear, publicar, modificar y eliminar artculos de contenido. - Capacidad de traducir el contenido del portal (artculos de contenido, secciones, categoras, etc). Portal de administrador y usuario administrador. Es el usuario con ms privilegios de todos, para l no existen restricciones de acceso. Aparte de las funciones que realiza el gestor en el portal de administrador, el administrador tambin es capaz de: - Gestionar los mens del portal web: aadir nuevos elementos, modificar su visibilidad, eliminar elementos antiguos. - Cambiar el lenguaje predeterminado de la pgina web, tanto para el portal pblico como para el portal de administrador. - Gestionar los usuarios registrados: bloquear un usuario, cerrarle la sesin, modificar sus permisos, modificar contrasea, crear nuevos usuarios y eliminar los ya existentes. - Gestionar la configuracin del portal: modificar el nombre del portal, cambiar de base de datos, cambiar el nmero de minutos mxima que dura la sesin de un usuario identificado inactivo, desactivar el uso de cach, etc.

3.3.

Requisitos de eficiencia. Para evitar que el servidor se quede colgado ante una recepcin masiva de solicitudes, sera conveniente configurar el servidor web 11

Apache para limitar el nmero mximo de peticiones simultneas, ampliar el tamao de la cach para agilizar el tiempo de respuesta, hacer uso de proxies, etc. Si a la larga estas medidas fuesen insuficientes habra que plantearse ampliar la potencia hardware de la mquina o el ancho de banda contratado. Una recomendacin sera la realizacin de copias de seguridad para asegurarnos de que en el supuesto de que los datos se daasen o se borrasen accidentalmente, el portal web volviese a estar consistente lo antes posible. 3.4. Requisitos de diseo. El portal se ha creado siguiendo las normas definidas por el W3C para el uso de HTML y CSS. De este modo nos aseguramos de que ningn usuario presente problemas a la hora de visualizar correctamente la pgina. 3.5. Atributos. Seguridad. Dado que el portal contiene informacin sensible como contraseas, es recomendable que algunos datos estn cifrados en el servidor y en la base de datos. Para esto nos ayudaremos de las opciones de seguridad que trae Apache. Mantenimiento. La obligacin del mantenimiento del portal recaer en el administrador, que ser quien se encargar de tareas tales como la gestin del contenido de la web, de usuarios, etc. Sin embargo, dado que la idea es que exista participacin activa por parte de otros usuarios algunas de las obligaciones del administrador pueden estar compartidas con los gestores. 3.6. Otros requisitos Base de datos. Todos los datos que maneje la aplicacin estarn registrados en una base de datos MySQL, a la que se acceder mediante instrucciones propias del lenguaje PHP y de Joomla!. Si existiese la necesidad de modificar la base de datos se podra acceder desde el programa phpMyAdmin.

12

3. MODELADO CONCEPTUAL
3.1. INTRODUCCIN Definiendo un modelo como una abstraccin que representa los objetos y sucesos del mundo real centrada en los aspectos bsicos y omitiendo los detalles innecesarios para su comprensin, podemos definir el modelado conceptual como una representacin completa y precisa de los requisitos de un sistema de modelos. En 1997 la OMG (Object Management Group) estandariz el modelado conceptual que conocemos como UML (Unified Modeling Language, Lenguaje Unificado de Modelado). Su intencin era la de crear un lenguaje estndar para visualizar, especificar, construir y documentar un sistema software. Para ayudar a este propsito, en UML existen varios tipos de diagramas segn las caractersticas del sistema que queramos representar. En nuestro estudio nos limitaremos a dos tipos de diagramas: Diagrama de estructuras. Enfatiza la estructura esttica del sistema usando objetos, atributos, operaciones y relaciones. De todos los diagramas que lo componen nosotros usaremos el diagrama de clases. Diagrama de comportamiento. Enfatiza en la funcionalidad del sistema. Usaremos el diagrama de casos de uso.

3.2. ANLISIS FUNCIONAL. DIAGRAMA DE CASOS DE USO Un caso de uso captura la funcionalidad del sistema desde el punto de vista del usuario, es decir, especifica el comportamiento de la aplicacin sin indicar su implementacin. Los casos de usos son tiles para especificar los requisitos del sistema, para su validacin y su trazabilidad. En un caso de uso, cada usuario que deba interactuar con la aplicacin (personas o sistemas informticos) se identifica por actor. En nuestro portal web los actores sern los usuarios annimos, los usuarios registrados, los gestores y el administrador. Un caso de uso representa las posibles acciones que un actor puede desempear en el sistema que se define. En UML se denota como una elipse con el nombre del caso de uso en su interior. El sistema representa el software que se quiere implementar. En UML se representa con un rectngulo que engloba a todos los casos de uso, excepto a los usuarios que son externos al sistema. El modo en el que actor interacta con cada caso de uso se refleja con relaciones de asociacin. En el diagrama se representa con flechas que van desde el actor al caso de uso. Pasemos a ver el diagrama de uso de cada actor por orden jerrquico de autoridad: - Usuario annimo. Tal y como se ha mencionado en la Especificacin de Requisitos, el usuario annimo es el usuario que aun no se ha identificado en nuestra web. Tal y como vemos en la Ilustracin 1, la mayora de sus acciones son informativas: 13

Ilustracin 1: Caso de uso del usuario annimo

- Usuario registrado. En la Ilustracin 2 vemos que este usuario hereda las funcionalidades del usuario annimo y le permite el acceso a su perfil de usuario:

Ilustracin 2: Caso de uso del usuario registrado

14

- Gestor. Este usuario hereda las funcionalidades del usuario registrado y le permite acceder a zonas restringidas, como la publicacin de artculos o la gestin de comentarios. Para facilitar la comprensin del diagrama debido al nmero de casos de uso de este actor, se generan dos diagramas representados en las Ilustraciones 3 y 4 en funcin de la interfaz a la que haga referencia: - Front-End:

Ilustracin 3: Caso de uso del usuario gestor para el portal de acceso pblico

- Back-End:

Ilustracin 4: Caso de uso del usuario gestor para el portal de administrador

15

Admin. Este usuario hereda las funciones del gestor y gestiona todo el portal. En las Ilustraciones 5 y 6 vemos sus funcionalidades segn la interfaz: - Front-End:

Ilustracin 5: Caso de uso del usuario administrador para el portal de acceso pblico

- Back-End:

Ilustracin 6: Caso de uso del usuario administrador para el portal de administrador

16

3.3. ANLISIS ESTRUCTURAL. DIAGRAMA DE CLASES Los diagramas de clases son diagramas de estructura esttica que muestran los elementos del sistema (clases y objetos) y sus interrelaciones, incluyendo herencia, agregacin, asociacin, etc. Los diagramas de clase son el pilar bsico del modelado con UML, siendo utilizados tanto para mostrar lo que el sistema puede hacer, como para mostrar cmo puede ser construido. De este modo una clase define la estructura y el comportamiento del sistema y los objetos de una clase definen la identidad, el estado y el comportamiento, ya que todos los objetos de una clase tienen el mismo comportamiento. Las clases se representan mediante cajas, relacionadas entre ellas por relaciones con una cardinalidad y el nombre de la accin que representan. Existen varios tipos de relaciones: Relacin de asociacin. Se representa mediante una lnea con la cardinalidad de las clases en cada extremo y el nombre de la accin. Relacin de herencia. Se representa mediante una lnea con un tringulo en el extremo en el que est la clase padre y de la que heredan las clases del otro extremo. No indican cardinalidad porque las clases que heredan es la misma que la de la clase padre. Relacin de agregacin. Se representa mediante una lnea con un rombo en el extremo de la clase que contiene la clase del otro extremo de la lnea. Tambin tienen un nmero que indica la cardinalidad de la relacin.

En la Ilustracin 7 se muestra el diagrama de clases de nuestra aplicacin. En ella podemos ver que nuestro Portal Web est formado por Usuarios y reas de trabajo, y ests ltimas estn formadas por documentos y enlaces web. Los usuarios se especializan en Gestores y Annimos, que a su vez se especializan en Admins y Registrados. Las reas de trabajo se especializan en secciones.

17

Ilustracin 7: Diagrama de clases

18

4. INTRODUCCIN A JOOMLA!
4.1. QU ES UN CMS En el apartado de Supuestos y dependencias de la Especificacin de Requisitos, hablamos de que nuestro portal web usara un CMS para su correcto funcionamiento. CMS son las siglas de Content Management System, que en castellano se traduce como Sistema de Gestin de Contenido. Los CMS surgieron ante la necesidad de tener que actualizar constantemente algunos portales web con gran cantidad de informacin, como suele pasar con los peridicos electrnicos y otros portales informativos. Un Sistema de Gestin de Contenido es una aplicacin capaz de generar un portal web gracias a una plantilla y una base de datos. La plantilla estructura y maqueta la informacin a mostrar y la base de datos almacena todo el contenido necesario para que la pgina se genere correctamente (nombre de secciones, artculos, usuarios, permisos de los usuarios, restricciones, etc.). Al diferenciar entre contenido e interfaz los cambios en el portal son ms sencillos, por lo que no es necesario modificar todas las pginas si se desea realizar un cambio en el formato o generar nuevas pginas para cada nueva publicacin, dado que se generan con HTML dinmico y los cambios son automticos. Adems, para agilizar la actualizacin continua de un portal los CMS permiten la jerarqua de usuarios, de este modo se pueden crear varios roles de usuarios con distintos privilegios, cada uno segn el nivel de colaboracin que se les desee dar. De este modo un portal puede tener usuarios registrados para acceder a informacin reservada, usuarios editores para crear y/o publicar nuevos artculos, etc. Las aplicaciones CMS actuales permiten no slo el manejo de contenidos de texto sino que tambin soportan la gestin de material multimedia. A da de hoy existen bastantes soluciones CMS no privatizadas, lo que permite que cualquier usuario pueda crear nuevas funcionalidades o adaptar las ya existentes a las necesidades de su portal. Esto hace que los Sistemas de Gestin de Contenido vayan ganando popularidad y cada vez sean ms completos. Gracias al contenido dinmico y a los roles de usuarios, se consigue optimizar el coste de mantenimiento de los portales gestionados mediante los CMS. Si a esto le aadimos que las aplicaciones CMS est diseadas para evitar el mayor nmero de retoques posibles a mano en el cdigo fuente de una pgina web el resultado es un programa de fcil uso donde slo se requiere que el usuario que lo gestione tenga conocimientos bsicos de HTML y de CSS. Es por todo esto por lo que hemos elegido este sistema para desarrollar el portal. 4.2. DISEO ESTRUCTURAL DE JOOMLA! 4.2.1. Introduccin Tal y como hemos visto, los Sistemas de Gestin de Contenido separan los datos de la aplicacin de su interfaz y es la propia aplicacin quien los gestiona, es decir, presenta una arquitectura de tres capas. 19

Una arquitectura de tres capas se caracteriza por presentar una separacin lgica entre los datos de una aplicacin, las funciones que manejan dichos campos y la interfaz los muestra. De este modo se pueden realizar cambios en una de las tres capas sin que estos afecten a las dems. Las tres capas de esta arquitectura son las siguientes: Capa de presentacin. Es la que se encarga de recoger los resultados de la capa de lgica y presentrselos al usuario final en una interfaz. En las aplicaciones web esta interfaz es una interfaz grfica (GUI) con la que el usuario interacciona con la aplicacin. Capa lgica o de negocio. Es la que contiene toda la implementacin de las funciones de la aplicacin. La capa de presentacin llama a cualquiera de estas funciones y estas a su vez llaman a la capa de datos para obtener los datos que necesitan. Una vez finalizadas las funciones ejecutadas la capa de negocio devuelve los valores obtenidos a la capa de presentacin. Capa de datos. Es donde se almacenan todos los datos que usa la aplicacin. En Joomla! estn guardados en una base de datos.

Por norma general la capa de presentacin solo se comunica con la de negocio para enviarle solicitudes, la capa de negocio se comunica con la de presentacin para responder a esas solicitudes y con la capa de datos para solicitarle datos, mientras que la capa de datos solo se comunica con la de negocio para pasarle los valores de los datos solicitados, por lo que entre una capa y la inmediatamente inferior a ella existe una relacin cliente servidor, tal y como se resume en la Ilustracin 8.

Ilustracin 8: Arquitectura de tres capas

Normalmente la capa de datos y la de negocio estn integradas en una misma mquina, mientras que la capa de presentacin puede estarlo en esa misma mquina o en otra diferente, pudiendo estar en varias.

20

4.2.2. Capa de presentacin A continuacin procederemos a analizar la capa de presentacin de Joomla!, que es donde se muestra la interfaz grfica desde donde interactuar el usuario con el portal. En nuestra web existen dos tipos de interfaces de usuario: el backend, dedicado al administrador del portal, y el front-end, dedicado a los usuarios en general. Veamos en detenimiento las propiedades de cada una: 4.2.2.1. Interfaz Back-End Esta interfaz se encarga de la gestin interna del portal, por lo que solo ser accesible para usuarios con suficientes privilegios como el administrador y el editor. Dado que la parte ms comercial del portal pertenece al interfaz front-end y como la distribucin de informacin nos parece lo suficientemente clara no se ha retocado la plantilla CSS y su visualizacin es la que ofrece Joomla! por defecto, tal y como podemos ver en la Ilustracin 9:

Ilustracin 9: Interfaz del portal del administrador

En esta plantilla podemos distinguir cuatro representadas en las siguientes Ilustraciones:

zonas significativas,

- Cabecera: Es donde aparece el logo de Joomla! y el nombre del portal web.

Ilustracin 10: Cabecera de la interfaz del portal del administrador

- Men superior: Son una serie de mens despegables que nos direccionan a diferentes pginas de la gestin del portal.

Ilustracin 11: Men superior de la interfaz del portal del administrador

21

- Contenido: Contiene un acceso directo a las pginas ms usadas en la gestin del portal. Los botones mostrados se pueden modificar gracias al componente de edicin CustomQuickIcons.

Ilustracin 12: Contenido de la interfaz del portal del administrador

- Columna de la derecha. Es un portal de bienvenida para el administrador con informacin resumida de algunas caractersticas del portal.

Ilustracin 13: Columna derecha del portal del administrador

4.2.2.2. Interfaz Front-End Esta interfaz es desde la que interactan todos los usuarios del portal, por lo que es la que ms hay que cuidar estticamente ya que si elegimos un mal diseo es posible que el usuario no se sienta cmodo y deje de navegar por ella. En la Ilustracin 14 vemos el resultado final de esta Interfaz. 22

Ilustracin 14: Vista del portal web

En esta interfaz se pueden distinguir cuatro zonas, que hemos identificado en las Ilustraciones 15 a 18: Cabecera. Al igual que en la interfaz back-end es donde aparece el nombre de la pgina y donde aparece la imagen de presentacin.

Ilustracin 15: Cabecera del portal web

Men superior. Es un men siempre visible. Contiene los enlaces que se han considerado de ayuda para la orientacin del usuario, como es la pgina de inicio, las preguntas frecuentes, la bsqueda sobre el portal, el mapa de la web y la gestin de idiomas del contenido.

Ilustracin 16: Men superior del portal web

Men izquierdo. Contiene un men principal con un listado de las secciones del portal desde donde el usuario navegar entre la 23

informacin ofrecida. Tambin contiene un men de acceso para identificarse o un men de usuario con los datos personales de este si el usuario ya est registrado.

Ilustracin 17: Men izquierdo del portal web

Contenido. Es donde se mostrar la informacin solicitada por el usuario. Aparece centrada en el portal web.

Ilustracin 18: Contenido del portal web

24

4.2.3. Capa de Negocio Esta capa se comunica con la capa de presentacin para recibir las solicitudes y presentar los resultados; y con la capa de datos para solicitar al gestor de base de datos que almacene o recupere datos de la base de datos principal. En Joomla! la capa de negocio se implementa mediante componentes y mdulos. Los componentes son aplicaciones independientes entre s que gestionan la informacin dentro de Joomla!, aadiendo distintas funcionalidades al portal. Un mdulo, por el contrario, es una aplicacin que muestra informacin secundaria, simplificada y breve que normalmente se obtiene de una consulta sencilla a la base de datos. Hagamos un breve resumen de los componentes y mdulos ms importantes de Joomla!, vindolos ms a fondo en el apartado 5 de la memoria. Componentes: - com_content. Componente que gestiona los contenidos del portal. - com_frontgage. Componente que administra y muestra la pgina principal del portal. - com_contact. Componente que administra los usuarios registrados. - com_login, com_user, com_regstration. Componentes que gestionan las funciones de usuario. - com_wrapper. Componente que genera las ventanas internas que contienen otras pginas. - com_banners. Componente de administracin de banners del portal. - com_rss, com_newsfeeds. Componente de sindicacin de noticias. - com_search. Componente del buscador interno del portal. - com_weblink. Componente de gestin y publicacin de enlaces. Mdulos: - mod_mainmenu. Utilizado para configurar los mens del portal. - mod_sections. Muestra una lista de las secciones creadas en la base de datos. - mod_login. Gestiona el acceso al contenido restringido del portal solicitando identificacin. - mod_whosonline. Muestra el nmero de usuarios conectados actualmente en el portal. - mod_popular. Muestra una lista de los artculos ms visitados. - mod_syndicate. Gestiona la subscripcin por parte de los usuarios a las ltimas noticias del portal. - mod_search. Muestra una caja que permite la bsqueda de texto dentro del portal. - mod_banners. Permite que se muestren anuncios en el portal. - mod_lastestnews. Muestra un listado de los ltimos artculos publicados en el portal. - mod_wrapper. Permite visualizar pginas web externas dentro de la ventana del propio portal. 4.2.4. Capa de Datos La capa de datos es la que se ocupa de almacenar toda la informacin del portal en una base de datos. Interactuar con la capa de negocio cuando sta le solicite alguna informacin para ser mostrada en la capa de presentacin. 25

La instalacin bsica de Joomla! posee 35 tablas por defecto, aunque ese nmero crecer si se instalan ms componentes o mdulos. A continuacin estudiaremos las ms importantes, agrupadas por funcionalidad: Gestin de contenido. Son las tablas que guardan la mayora de la informacin principal del portal web. En la Ilustracin 19 se puede ver que en ellas estn archivadas las secciones de la web, sus categoras y sus artculos de contenido. Las principales son: jos_content. Aqu se almacenan todos los artculos de contenido, especificndose entre otros datos el ttulo, el resumen, el texto principal, la seccin y la categora a la que pertenece, cundo ha sido creado, si ha sido modificado, el autor, si est publicado, las imgenes y enlaces que posee, el orden jos_content_frontpage. Lista de artculos que se visualizan en la pgina de bienvenida del portal. jos_sections. Hace referencia a las secciones del portal, su ttulo, su mbito, sus imgenes, jos_categories. Contiene todas las categoras que hay en el portal, su ttulo, sus imgenes, la seccin a la que pertenecen, si estn publicadas o no jos_content_rating. Joomla! permite la posibilidad de puntuar los artculos, en esta tabla se almacenan las puntuaciones de cada uno.

Ilustracin 19: Tablas de contenido de la base de datos de Joomla!

26

Gestin de usuarios. Estas tablas las usa el sistema para el control de acceso de usuarios. Aunque solo vamos a explicar las ms importantes, en la Ilustracin 20 se pueden ver el resto de tablas. jos_users. Contiene los datos de todos los usuarios registrados: nombre, nick, correo electrnico, contrasea encriptada, tipo de usuario (normal, gestor, editor, admin), ltima visita, jos_session. Lista de usuarios conectados en ese momento, incluyendo a los visitantes no registrados. jos_core_acl. Las tablas jos_core_acl_aro, jos_core_acl_aro_groups, etc. se usan para crear los diferentes grupos de usuario que posee Joomla!

Ilustracin 20: Tablas de registro de usuarios y grupos de usuarios de la base de datos de Joomla!

Gestin de estadsticas. Estas tablas (Ilustracin 21) se usan a modo de conocer mejor las necesidades de los navegantes de la pgina, de modo que el administrador pueda darle otro enfoque a la web con la intencin de mejorar su calidad. jos_core_log_searches. Indica los trminos que los usuarios han buscado en la pgina. Con estos datos el administrador puede replantearse si la informacin que ofrece est demasiado escondida y reestructurar la web. jos_core_log_items. Indica los ltimos artculos de contenido que han visitado los usuarios. jos_stats_agents. Indica el navegador, el sistema operativo y el dominio desde el que acceden los usuarios.

27

Ilustracin 21: Tablas de estadsticas de la base de datos de Joomla!

Gestin de componentes y plugins. Estas tablas, jos_components, jos_modules y jos_plugins (Ilustracin 22) guardan los componentes del portal web, los mdulos y los plugins instalados (funcionalidades aadidas).

Ilustracin 22: Tablas de componentes y plugins de la base de datos de Joomla!

Gestin de mens y plantillas. Estas tablas guardan la relacin que hay entre el contenido del portal, los mens y sus plantillas. jos_menu. Guarda el contenido de los mens del portal. Indica su nombre, el tipo de men al que pertenece, el nivel de acceso (administrador, editor o usuario), el enlace web, el orden de publicacin,... 28

jos_modules. Contiene la informacin de los mdulos de men, como el ttulo del mdulo, su posicin, el nombre del mdulo, si est publica o no, el nivel de acceso, etc. jos_modules_menu. Guarda la relacin de los mens y los mdulos. Indica para cada men que mdulos contiene. jos_templates_menu. Indica la plantilla asignada a cada enlace de los mens. jos_template_positions. Guarda las colocar los mdulos en la plantilla. posiciones donde se pueden

Ilustracin 23: Tablas de mens y plantillas de la base de datos de Joomla!

29

5. IMPLEMENTACIN EN JOOMLA!
5.1. INTRODUCCIN En Joomla! la implementacin se realiza mediante componentes y mdulos. Los componentes son aplicaciones independientes entre s que gestionan la informacin dentro de Joomla!, aadiendo distintas funcionalidades al portal. Un mdulo, por el contrario, es una aplicacin que muestra informacin secundaria, simplificada y breve que normalmente se obtiene de una consulta sencilla a la base de datos. Joomla! incluye algunos componentes bsicos en su instalacin, siendo posible instalar ms componentes para que complementen la funcionalidad que se desea que exista en el portal web. Vemoslos a continuacin. 5.2. COMPONENTES Y MDULOS BSICOS En Joomla! los componentes son elementos de contenido o aplicaciones de Joomla! que normalmente se muestran en el centro del rea de contenido principal de una plantilla, aunque esto depende del diseo de la plantilla. Los componentes son elementos del ncleo de la funcionalidad de Joomla!. En la instalacin de Joomla! los componentes que vienen por defecto son: Banners, Contactos, Noticias Externas, Encuestas y Enlaces Webs. Estos componentes tienen un men especial en la vista Administrador de Joomla!:

Ilustracin 24: Men de componentes

Los mdulos son pequeos artculos de contenido que pueden mostrarse en cualquiera de los lugares que la plantilla permita. Los mdulos extienden las posibilidades de Joomla! proporcionando al software nuevas funcionalidades. Algunos de los mdulos que vienen por defecto con Joomla! son el Men Principal, Men Superior, Selector de Plantillas, Contador de Visitas, etc. A continuacin se describe la funcionalidad de los mdulos usados en el portal que ya estaban incluidos en Joomla!:

30

1. Formulario de acceso (mod_loguin). El mdulo Formulario de Acceso, representado en la Ilustracin 25, permite acceder al rea registrada del sitio con un Nombre de Usuario y Contrasea. El sistema tiene un enlace para invitar a los usuarios annimos a registrarse (Regstrse aqu), del mismo modo que permite enviar un correo electrnico con el nombre del usuario o con su contrasea en caso de olvido a travs de los enlaces Olvid su contrasea? y Olvid su nombre de usuario?,. Un usuario que se encuentra en el rea registrada, puede salir de la misma pulsando el enlace Finalizar Sesin del mdulo Formulario de Acceso.

Ilustracin 25: Formulario de acceso al portal web

En la Ilustracin 26 vemos como el administrador puede personalizar el mdulo para elegir el nombre con el que aparecer el men, seleccionar su posicin en la plantilla, el orden en el que se ver con respecto al resto de mdulos, desde que pginas del portal ser visible, etc:

Ilustracin 26: Configuracin del Formulario de acceso

31

Caractersticas de los parmetros: El primer grupo de parmetros indica los detalles del mdulo. Tipo de mdulo: mod_loguin. Es un valor fijo que el administrador no puede modificar. Ttulo: Es el ttulo del mdulo. El administrador puede elegir si dejar el que viene por defecto o cambiarlo. Por ejemplo, en nuestro caso hemos modificado el ttulo para que en lugar de Formulario de Acceso solo ponga Acceso. Mostrar Ttulo: Decide si se mostrar el nombre del ttulo en el frontend. Habilitado: Indica si el mdulo est habilitado o no. Este parmetro tambin se puede modificar desde la columna de Habilitados del listado de parmetros del gestor de mdulos. Posicin: Es un men despegable con todas las posibles opciones donde colocar el mdulo. Si la plantilla de un portal no trata alguna de las opciones disponibles, el mdulo no se visualizar. Ordenar: Es un men despegable con varias opciones para ordenar al mdulo con respecto a otros mdulos que estn en la misma posicin. Nivel de acceso: Pblico, Registrado o Especial. Son los tres niveles de acceso posible segn el grado de restriccin que tenga el usuario. Un nivel Pblico estar disponible para todos los usuarios, un nivel Restringido estar vetado para los usuarios annimos y el nivel Especial solo ser visible para los usuarios con acceso al back-end. ID: Este es el nmero de identificacin nico del mdulo en la base de datos. El sistema del sitio Joomla! lo genera automticamente en el momento en que se crea el mdulo. Descripcin: Esta es una breve descripcin de las funciones para este tipo de mdulo (slo-lectura).

El siguiente grupo de datos es Asignacin de Men. Aqu se indicar desde que mens de la pgina web se permitir el acceso al mdulo. En nuestro caso como estn marcados todos los mens, estemos navegando por la pgina que sea siempre tendremos visible el formulario de acceso. Estos dos grupos de parmetros son comunes a todos los mdulos y solo los explicaremos para ste. El tercer grupo de parmetros son parmetros especficos del mdulo: - Guardado en la cach: Por defecto este valor est desactivado y no se puede cambiar. Sufijo de la clase del mdulo: Se puede especificar un valor como sufijo para la clase CSS del mdulo. Esto permite aplicar un estilo personalizado al mdulo. El sufijo deber estar definido en la hoja de estilos CSS de la plantilla. 32

Texto anterior: El texto o cdigo HTML escrito aqu se mostrar en la parte superior del formulario de acceso. Texto posterior: El texto o cdigo HTML escrito aqu se mostrar en la parte inferior del formulario de acceso. URL de redireccionamiento del inicio de sesin: Listado con todos los enlaces de todos los mens de la web. El enlace seleccionado ser al que nos redirija la pgina al acceder al rea registrada. Si no se selecciona ninguno, se cargar la pgina de inicio del sitio. URL de redireccionamiento al finalizar la sesin: Listado con todos los enlaces de todos los mens de la web. El enlace seleccionado ser al que nos redirija la pgina al salir del rea registrada. Si no se selecciona ninguno, se cargar la pgina de inicio del sitio. Mensaje: Nos deja elegir entre mostrar o esconder el texto breve de bienvenida. Nombre / Nombre del usuario: El portal nos deja elegir entre usar el nombre de usuario o su nombre real como texto a utilizar cuando el usuario accede al rea registrada.

En nuestro caso hemos decidido que el nombre del men sea Acceso, que se posicione a la izquierda y que sea visible desde todas las pginas del portal web. 2. Buscador (mod_search). El modulo Buscador muestra una caja que permite realizar bsquedas de texto en el contenido del sitio.

Ilustracin 27: Bsqueda del portal web

En la Ilustracin 27 vemos que la bsqueda se puede hacer con palabras o con una frase, permitiendo realizar la bsqueda en toda la web o limitarla a artculos, secciones, etc. Los parmetros entre los que puede elegir el administrador son: Ancho de la caja: nmero de caracteres que ocupar el ancho de la 33

caja. Para medir en caracteres se toma la longitud de la letra eme por ser la ms ancha. Texto: El texto que aparece en la caja de bsqueda. Botn de la bsqueda: Muestra u oculta el botn de bsqueda. Posicin del botn: Permite seleccionar la posicin del botn en relacin a la caja de bsqueda. Botn de buscar una imagen: Muestra u oculta el botn de bsqueda de imgenes. Texto del botn: El texto que aparece en el botn de bsqueda. Si se deja en blanco se utilizar Buscar.

Ilustracin 28: Configuracin de la Bsqueda del portal

En la Ilustracin 28 se puede ver que hemos elegido que el ancho de la caja sea de 20 caracteres y que el botn de buscar se site a la derecha de la caja. 3. Mdulos del men (mod_mainmenu). Todos los mens de nuestro portal los configura este mdulo. El portal tiene tres mens: men de cabecera, men principal y men de usuario. En la Ilustracin 29 se pueden ver dos de ellos, puesto que el men de usuario solo es posible visualizarlo para usuarios registrados.

34

Ilustracin 29: Mens del portal web

Segn el men, el administrador puede elegir una configuracin u otra.

Ilustracin 30: Configuracin del men principal del portal

Explicamos los parmetros especiales del men principal: Mostrar los iconos del men: Muestra los iconos de men que se hayan seleccionado para los tems de men.

35

Alineacin del icono del men: Si se hubiese elegido mostrar los iconos del men, esta opcin te permite alinearlos a la izquierda o a la derecha. Imagen para el enlace del men: Esta opcin te permite usar imgenes en lugar de texto como enlaces del men. Las imgenes deben ser seleccionadas en las opciones del men. Expandir men: Este parmetro permite que siempre estn visibles los enlaces de los submens. Si no se activa los submens de la pgina solo se desplegaran al seleccionarlos manualmente. Activar padre: Permite activar los artculos padre (artculos de men de nivel primario) como enlaces. Resultado total activado: Esta opcin permite resaltar el enlace seleccionado del men. Dado que esto puede hacer que no se cumplan los estndares de validacin HTML es recomendable que sea la hoja de estilos la que se encargue de resaltar los enlaces. Imagen para sangra: Nos permite elegir entre cuatro opciones: Imgenes de la plantilla muestra las imgenes definidas en la plantilla del portal web; Imgenes Predeterminadas muestra las imgenes que, por defecto, forman parte de la instalacin Joomla!; Use los parmetros de abajo muestra las imgenes seleccionadas en los parmetros Imagen para sangra X; Ninguna oculta todas las imgenes asociadas al mdulo mod_mainmenu. Esto se aplica para cualquier plantilla instalada en el portal web. Imagen para sangra 1: Selecciona la imagen para el primer subnivel del men. Imagen para sangra 2: Selecciona la imagen para el segundo subnivel del men. Imagen para sangra 3: Selecciona la imagen para el tercer subnivel del men. Imagen para sangra 4: Selecciona la imagen para el cuarto subnivel del men. Imagen para sangra 5: Selecciona la imagen para el quinto subnivel del men. Imagen para sangra 6: Selecciona la imagen para el sexto subnivel del men. Espaciador: En los mens de visualizacin horizontal, es el carcter que se usar como espaciador. Los ms usados suelen ser | - . Espaciador al final: carcter que se utilizar a final de men

4. Mdulo sindicacin (mod_syndicate). El mdulo 'Sindicacin' muestra enlaces de sindicacin que permiten a los visitantes subscribirse a las ltimas noticias de la pgina en la que est colocado el mdulo. Actualmente se incluyen los iconos de sindicacin: RSS 2.0 y Atom 1.0. Cuando se pulsa sobre uno de estos iconos, el sitio se redirige a una nueva pgina en la que se 36

mostrarn las noticias en formato XML (formato para el intercambio de informacin). Para recibir las noticias en otro sitio Joomla! o en un lector de noticias, los visitantes necesitan copiar y pegar la URL suministrada.

Ilustracin 31: Sindicacin del portal

En la Ilustracin 32 aparecen los parmetros del mdulo:

Ilustracin 32: Configuracin de la Sindicacin del portal

Guardando en la cach: Por defecto este valor est desactivado y no se puede cambiar. Texto: Texto que se mostrar junto al botn de sindicacin. Por defecto aparece Feed Entries. Formato: Permite elegir el tipo de formato de sindicacin en una lista desplegable: RSS 2.0 o Atom 1.0 Sufijo de la clase del mdulo: Se puede especificar un valor como sufijo para la clase CSS del mdulo. Esto permite aplicar un estilo personalizado al mdulo. El sufijo deber estar definido en la hoja de estilos CSS de la plantilla.

5.3. COMPONENTES ADICIONALES Joomla! viene con unos componentes muy bsicos instalados por defecto con el objetivo de poder crear un portal web genrico. Si queremos aadir alguna nueva funcionalidad a nuestra pgina podemos hacerlo aadiendo componentes. Veamos a continuacin los componentes que hemos aadido al portal: 37

1. Componente Joom!Fish (com_joomfish). Una de las ideas principales del portal es la de ofrecer a nuestros usuarios los artculos de contenido tanto en castellano como en ingls. Joomla! no trae ninguna herramienta para la gestin de traducciones de artculos as que la solucin ha sido buscar e instalar algn componente. Joom!Fish es una extensin que nos permite realizar una presentacin del portal web en varios idiomas. Este componente nos da la posibilidad de traducir solamente la parte del portal que deseemos: artculos de contenido, mens, categoras, secciones Una vez instalado, accedemos al panel de control de Joom!Fish (Ilustracin 33) desde Componentes -> Joom!Fish -> Control Panel:

Ilustracin 33: Portal del mdulo Joom!Fish

Y activamos los dos lenguajes que tenemos instalados en Joomla!: el ingls y el espaol. Para ello entramos en Language Configuration y marcamos los dos idiomas, tal y como se ve en la Ilustracin 34. Si en un futuro quisiramos gestionar la pgina web en un tercer lenguaje, deberamos instalarlo previamente y luego seleccionarlo aqu.

38

Ilustracin 34: Gestor de lenguajes del mdulo Joom!Fish

El siguiente paso es ver como indicamos al usuario que tiene la posibilidad de cambiar el idioma de visualizacin del portal. Accedemos desde Extensiones > Gestor de mdulos a una pantalla parecida a la de la Ilustracin 35:

Ilustracin 35: Gestor de mdulos de Joomla!

Clickamos en Nuevo, seleccionamos JoomFish-Language Selection y le damos a Siguiente. Ahora nos toca configurar el mdulo:

39

Ilustracin 36: Configuracin del mdulo Joom!Fish

En los detalles de configuracin, en Ttulo escribimos Language Selection, que ser el nombre con el que lo distinguiremos del resto de mdulos. Seleccionamos la opcin de no mostrar el ttulo. El siguiente parmetro es el de elegir la posicin del portal donde se ver las opciones del idioma. Lo ms intuitivo sera que estuviese en la parte superior de la pgina web. Intentamos ponerlo en la misma zona que el men de cabecera, pero tal y como vemos en la Ilustracin 37 se nos descuadra:

Ilustracin 37: Seleccin de idioma en la interfaz del portal (1)

Si intentamos ubicarlo en otras posiciones, el nuevo componente sigue descuadrando la plantilla o no aparece porque nuestra plantilla no tiene esa posicin definida. Nos aprovechamos de esto ltimo y procedemos a crear una nueva ubicacin para una posicin no definida, como por ejemplo user4. Accedemos a la carpeta de instalacin de nuestra web, seleccionamos templates y ah buscamos la carpeta de la plantilla que estamos usando. Editamos el fichero index.php para aadir el nuevo usuario.

40

Primero buscamos donde est definida la posicin del men de cabecera, una vez encontrado colocamos a su lado nuestra nueva posicin:

Ahora toca modificar la hoja de estilos para que reconozca el id pillmenu_rigth. Para ello, desde la carpeta de la plantilla accedemos a la carpeta css y abrimos el fichero template.css. Como queremos que la visualizacin de nuestro componente en la interfaz pblica est en el mismo sitio que el men cabecera pero a la derecha, replicamos su cdigo con los cambios oportunos:

Y el resultado ya es el deseado, tal y como se aprecia en la Ilustracin 38:

Ilustracin 38: Seleccin de idioma en la interfaz del portal (2)

Siguiendo con los detalles de configuracin del componente, le indicamos que el nivel de acceso sea pblico, para que cualquier usuario pueda cambar el idioma de la interfaz web. 41

En los parmetros, Joom!Fish incluye las siguientes opciones: Apariencia del seleccionador de lenguaje. Es un men despegable con las siguientes opciones: o Drop down of names: muestra las opciones como un men despegable.

Drop down of names with current languaje flag: muestra el mismo despegable de antes pero con una bandera al lado del nombre del idioma.

ul-list of names: muestra las opciones como enlaces con el nombre del idioma puestos en una lista horizontal.

ul-list of names with flag: la misma opcin anterior pero con la imagen de la bandera del pas donde se habla el idioma.

ul-list of images: muestra las opciones del idioma como banderas del pas donde se habla el idioma a seleccionar.

Raw display of images: muestra una fila con las banderas de los idiomas.

Mostrar idioma activo? Tenemos la posibilidad de elegir S o No. Por defecto viene marcado el S, que es como nosotros lo dejamos. Incluir CSS Joom!Fish. Indica la posibilidad de usar las hojas de estilo que incluye el componente por defecto o usar nuestra propia configuracin. Nosotros usamos la que incluye el componente. Cach de las traducciones: Permite almacenar en cach las URLs de las pginas con la traduccin del artculo de contenido. 42

El siguiente paso es traducir el portal web. Empezaremos traduciendo los nombres de los mens. Vamos al panel de control de Joom!Fish y accedemos a Translation. Una vez ah desplegamos el men de elementos de contenido y seleccionamos mens. En el men de idiomas seleccionamos ingls:

Ilustracin 39: Men de traducciones del componente Joom!Fish

Nos debe de aparecer un listado con todos los enlaces que hay en los mens, como en la Ilustracin 40:

Ilustracin 40: Listado con los accesos de los mens

43

Al seleccionar cualquier enlace de men llegamos a una nueva pantalla desde donde gestionamos la traduccin:

Ilustracin 41: Traduccin de un men del portal web

Los campos Translation de las distintas secciones en las que est divida la pantalla son donde escribiremos la traduccin de los enlaces. Joom!Fish incluye a la derecha de cada seccin de la pantalla un botn donde pone Copiar, que sirve para copiar el texto original en el cuadro de la traduccin. Aunque para traducir el ttulo de un enlace esto puede no ser muy til, para cuando tengamos que traducir artculos de contenido nos ser de gran ayuda. Si pasamos la zona de traduccin de la pantalla (Ilustracin 42), llegamos a los parmetros del enlace. Joom!Fish muestra los parmetros originales para el idioma predeterminado del portal y los parmetros que elegiremos para la configuracin del nuevo idioma en dos columnas. La columna con los parmetros originales no es modificable, solo aparece como consulta. La columna con los parmetros para el nuevo idioma s que se puede modificar, aunque por defecto viene con los valores que hay para el espaol.

44

Ilustracin 42: Parmetros del men a traducir

45

Por ltimo, es necesario activar el check-in de publicacin del recuadro Publicando que hay a la derecha si queremos que nuestros cambios tengan efecto cuando el usuario cambie de idioma.

Ilustracin 43: Activacin de una traduccin del componente Joom!Fish

Para el resto de elementos del portal (categoras, secciones, mdulos, ), la gestin de las traducciones es idntica. Slo los artculos de contenido los que se gestionan de un modo diferente. Accedemos al Gestor de artculos desde el panel de control de Joomla!, seleccionamos el artculo de contenido a traducir y en el men de cabecera del administrador, marcamos translate to English tal y como mostramos en la Ilustracin 44:

Ilustracin 44: Gestor de artculos de contenido de Joomla!

46

Accedemos a una pantalla parecida a las Ilstraciones 41 y 42:

Ilustracin 45: Traduccin de un artculo de contenido

47

Ilustracin 46: Configuracin de parmetros de un artculo de contenido traducido

El funcionamiento de esta pantalla es similar a la de las Ilustraciones 41 y 42: en los campos translation se escribe la traduccin. Podemos elegir cualquiera de las opciones que incluye la redaccin de un artculo en castellano: publicar un prrafo introductorio seguido de un Leer ms para acceder al artculo de contenido entero, aadir imgenes, seleccionar entre que rango de fechas queremos que el artculo de contenido sea visible e incluso las palabras de los metadatos. Aqu, al igual que antes, tampoco debemos olvidarnos de marcar el check-in de artculo publicado. Al guardar la pgina debemos obtener el mensaje de confirmacin de la Ilustracin 47:

48

Ilustracin 47: Mensaje de confirmacin del proceso de traduccin

Veamos ahora el resultado de la traduccin en la interfaz del portal en las Ilustraciones 48 y 49. Portal en castellano:

Ilustracin 48: Interfaz del portal web en castellano

Portal en ingls:

49

Ilustracin 49: Interfaz del portal web en ingls

Nuestro portal ya gestiona varios idiomas. 2. Componente Xmap (com_xmap). Una idea deseada por todos los desarrolladores web es que sus pginas es que esa pgina tenga un nmero de visitas elevado, pero para que la gente la visite primero deben de ser capaz de encontrarla. Para conseguir esto, sera interesante que Google nos indexase pero suele suceder que para una pgina nueva los bots de Google, Yahoo o cualquier otro buscador (robots que pasean por la web en busca de pginas para indexarlas en su buscador) tardan bastante en encontrarla, porque para eso deben encontrar un enlace a nuestro portal en otra pgina para pasar a revisarlo. Un modo sencillo de indicarle a los buscadores todas nuestras pginas del portal y acelerar esta bsqueda es generando un mapa del sitio para que los buscadores accedan a l y vean los enlaces que existen, los indexen y si cambian vuelvan a indexarlos. Para ello hay que generar una lista con todos los artculos y secciones de la pgina, con su fecha de ltima actualizacin y otros parmetros opcionales. Un mapa de sitio, adems de ayudarnos a que los robots de los buscadores nos indexen ms fcilmente tambin servir de ayuda a los usuarios del portal que estn desorientados para indicarles donde est ubicado cada enlace, o para llevarles a l directamente. Evidentemente, deberemos seguir cuidando el estilo del mapa web para que los usuarios se sientan cmodos con l, mientras que con los robots indezadores debemos primar que les sea lo ms fcil posible leer la informacin del mapa y procesarla. Es por esto que normalmente se genera un mapa del sitio en HTML para usuarios y un mapa del sitio en XML para robots. 50

Xmap es un componente que realiza toda esa faena por nosotros. Este componente crea el mapa web usando la estructura de los mens de la pgina. Una vez instalado el siguiente paso es enlazarlo en nuestra web. Accedemos al gestor de mens, seleccionamos el men donde queremos que aparezca el enlace: men de cabecera. Al crear un nuevo item en el men, marcamos Xmap como tipo de item y llegamos a la pantalla de configuracin de la Ilustracin 50:

Ilustracin 50: Configuracin del enlace del mapa web

Explicamos los parmetros del componente: - Ttulo de la pgina: Texto a mostrar como ttulo de la pgina. Si se deja en blanco, se usa el ttulo del men. - Mostrar el ttulo de la pgina: permite elegir si mostrar el ttulo de la pgina o no. - Men de imgenes: la imagen elegida se muestra al lado del nombre del item del men. Una vez creado el enlace, accedemos al Componentes -> Xmap para configurarlo en una pantalla como la de la Ilustracin 51:

51

Ilustracin 51: Configuracin del mdulo Xmap. Pestaa Sitemaps

En Agregar Mens hay un men despegable con los mens de nuestro portal. Sirve para elegir que mens queremos que aparezcan en el mapa del sitio. Marcamos el men principal, el men de cabecera y el men de usuario. El recuadro de la derecha muestra estadsticas sobre el mapa web generado en HMTL y el mapa web generado en XML. En la pestaa CSS del portal Xmap, tenemos el cdigo CSS que viene por defecto en el propio componente. Xmap nos permite modificar ese cdigo para adaptarlo a nuestra web o desactivar su hoja de estilo y que automticamente se aplique el estilo de nuestra web. Nosotros hemos optado por esta ltima opcin, tal y como se ve en la Ilustracin 52.

52

Ilustracin 52: Configuracin del mdulo Xmap. Pestaa CSS

En la tercera pestaa estn las extensiones que estn instaladas para Xmap. Suelen ser extensiones para hacer compatible nuestro mapa de sitio con otros componentes. Por ejemplo, con Joom!Fish puede generar el mapa del sitio para cada lenguaje incluido en JoomFish agregando el parmetro '&lang=XX' al link del mapa.

53

Ilustracin 53: Configuracin del mdulo Xmap. Pestaa Extensiones

En la pestaa Sitemaps, en la esquina superior derecha hay un botn de Opciones, donde llegamos a las preferencias del sitio web:

Ilustracin 54: Opciones de configuracin del mdulo Xmap

54

En esta pantalla de la Ilustracin 54 podemos elegir el nmero de columnas en las que queremos que se visualicen los enlaces, si queremos que aparezcan los nombres de los mens, si queremos que aparezca un enlace a la pgina oficial del componente, si queremos usar una cach o no Incluso las direcciones web del mapa del sitio en HTML y XML. Y el aspecto con el que aparece el mapa del sitio es el de la Ilustracin 55:

Ilustracin 55: Interfaz del mapa web en el portal

Otro aspecto interesante de Xmap es que visualizando el mapa web como administrador podemos elegir que enlaces sern visibles al pblico y cuales no, sin que eso afecte a la publicacin del documento al que enlaza, tal y como se ve en la Ilustracin 56.

55

Ilustracin 56: Interfaz de administrador del mapa web en el portal

3. Componente MorpheoShow (com_morpheoshow). Como todos sabemos, una imagen puede ayudarnos a comprender mejor un texto. Es por eso que en el portal web no nos puede faltar una galera de imgenes. De entre todos los componentes que existen para Joomla! que gestionan imgenes nos hemos decidido por MorpheoShow debido a que es gratuito. MorpheoShow consta de un componente y un plugin. Una vez instalados, el siguiente paso es habilitar el Plugin. Desde el men de administrador, accedemos a Extensiones -> Gestor de Plugins y hacemos clic en la columna Publicado del plugin MorpheoShow, tal y como hacemos en la Ilustracin 57:

Ilustracin 57: Gestor de plugins de Joomla!

Ahora que ya est habilitado, accedemos a la configuracin del componente desde Componentes -> MorpheoShow -> Configuracin. Veremos que aparecen varias pestaas que engloban distintas funciones de la galera MorpheoShow, tal y como se ve en la Ilustracin 58:

56

Ilustracin 58: Configuracin del componente MorpheoShow

La primera pestaa contiene la configuracin general del componente: - ID de Google Map: Si queremos que nuestro portal tenga un mapa de Google Maps, aqu debemos indicar el cdigo de Google Maps. - Key ID de Flickr: Esta galera permite mostrar las imgenes que tengamos subidas en una cuenta Flickr, pero para ello es necesario proporcionar una clave de identificacin. - ID de usuario Flickr: El ID del usuario Flickr de las fotos a desplegar. Si este parmetro no est informado, se mostrarn las fotos pblicas. - Nmero mximo de imgenes permitidas: Nmero mximo de imgenes permitidas por galera. Por defecto son 51. - Tamao mximo permitido: Tamao mximo en bits que se permite subir. Por defecto vale 2000000. - Orden de las imgenes en la administracin: Orden en el que se mostrarn las imgenes desde los listados de la administracin. Podemos elegir entre ordenar por ttulo, nombre del archivo, ID de la imagen o fecha, todas ellas ascendente o descendentemente. - Descripcin de la galera: Dnde se mostrar la descripcin de la galera. Solo permite elegir entre la parte superior y la inferior. - AJAX API de Google: Nos permite utilizar la librera Ajax del API de Google en lugar de las libreras de Ajax locales. La segunda pestaa configura la galera clsica (shadowbox):

57

Ilustracin 59: Configuracin de la galera clsica del componente MorpheoShow.

- Ancho de miniatura: Establece el ancho de las miniaturas en pxeles en la galera shadowbox. Por defecto muestra un ancho de 170 pxeles, pero nosotros le indicamos un ancho de 130 para que las imgenes no aparezcan cortadas en los bordes del portal.
- Ttulo de la imagen: Muestra u oculta el ttulo de las imgenes en la galera shadowbox. - Lenguaje de la interfaz: Selecciona el lenguaje de la interfaz en la galera shadowbox. - Adaptador Ajax: Permite elegir entre los siguientes adaptadores Ajax: Mootools, JQuery, Prototype, Yui y Dojo. La tercera pestaa configura el estilo CSS de la galera:

Ilustracin 60: Configuracin del Estilo CSS del componente MorpheoShow.

- Estilo CSS personalizado: permite elegir entre hojas de estilo en cascada personalizadas o predeterminadas. Por defecto irn las predeterminadas. - CSS de la galera clsica 1-3: Estilo CSS para Shadowbox clsico y galera FancyboxStyle 1-3. Por defecto contiene el siguiente cdigo: 58

- CSS de la galera clsica 2-4: Estilo CSS para Shadowbox clsico y galera FancyboxStyle 2-4. Por defecto contiene el siguiente cdigo:

La cuarta pestaa configura la galera vista bsica:

59

Ilustracin 61: Configuracin de galera vista bsica del componente MorpheoShow.

- Altura mxima de la imagen: Altura mxima en pxeles para las imgenes de la galera. Por defecto acepta 480 pxeles. - Ancho mximo de la imagen: Anchura mxima en pxeles para las imgenes de la galera. Por defecto acepta 480 pxeles. - Color del texto: Color en hexadecimal del texto de la imagen. Por defecto vale #333333, que equivaldra a un gris oscuro. - Color del marco: Color en hexadecimal del marco de la imagen, botones de navegacin y marco de las miniaturas. Por defecto vale 999999, que equivaldra a un gris claro. - Ancho del marco: Ancho en pxeles del marco de la imagen. - Separacin del borde: Ancho en pxeles del padding alrededor de los bordes de la galera. - Separacin entre miniaturas: Distancia entre las miniaturas. Por defecto hay una separacin de 40 pxeles. - Columnas: Nmero de columnas de miniaturas. Para deshabilitar las miniaturas completamente habra que poner un 0 en este parmetro. - Filas: Nmero de filas de miniaturas. Para deshabilitar las miniaturas completamente habra que poner un 0 en este parmetro. - Posicin relativa: Posicin relativa de las miniaturas . Puede ser "arriba", "abajo", "izquierda" o "derecha". Por defecto vale abajo. - Alineacin vertical: Posicionamiento vertical de la imgen y de las miniaturas respecto al SWF. Puede ser "centro", "arriba" o "abajo". Para galeras 60

grandes ste debe ser "centro". Para galeras pequeas debe ser "arriba" o "abajo. - Alineacin horizontal: Posicionamiento horizontal de la imgen y de las miniaturas respecto al SWF. Puede ser "centro", "izquierda" o "derecha". Para galeras grandes ste debe ser "centro". Para galeras pequeas debe ser "derecha" o "izquierda". La quinta pestaa es Distribucin del listado en el sitio pblico:

Ilustracin 62: Configuracin de la distribucin de listado del componente MorpheoShow.

- Listado en la parte pblica: Establece el tipo de vista del listado en la parte pblica: Listado clsico o Listado Flash. Por defecto est activado el listado clsico. - Nmero de columnas: Establece el nmero de filas por columna para el listado clsico de la pgina. Por defecto se permiten 5 columnas. - Ancho de las miniaturas: Establece el ancho de las miniaturas para el listado de filas por columna. Por defecto el ancho permitido es de 100 pxeles. - Logo de la lista clsica: Muestra u oculta el logo de lista clsica del sitio pblico. - Botn de regreso: Muestra u oculta el botn de regreso en la pgina. La sexta pestaa configura el listado de miniaturas en el sitio pblico:

61

Ilustracin 63: Configuracin del listado de miniaturas del componente MorpheoShow.

- Ancho del listado de miniaturas: Configura el ancho para el listado miniaturas clsico. Por defecto vale 50 pxeles. - Altura del listado de miniaturas: Establece el valor de la altura para el listado de miniaturas clsico. Por defecto vale 50 pxeles. - Ancho del listado de miniaturas flash: Establece el ancho para el listado de miniaturas flash. Por defecto vale 180 pxeles. - Alto del listado de miniaturas flash: Establece el alto del listado de miniaturas flash. Por defecto vale 50 pxeles. La ltima pestaa es la de Miniatura de las galeras:

Ilustracin 64: Configuracin las miniaturas de las galeras del componente MorpheoShow.

- Ancho de las miniaturas de la galera: Establece el ancho de las miniaturas de la galera. Por defecto vale 80 pxeles. 62

- Alto de las miniaturas de la galera: Establece la altura de las miniaturas de la galera. Por defecto vale 80 pxeles. - Ancho de las imgenes: Establece el ancho de las imgenes. Por defecto vale 640 pxeles. - Alto de las imgenes: Establece la altura de las imgenes. Por defecto vale 640 pxeles. - Forzar el recorte del ancho: Establece el valor de recorte para el ancho. Por defecto vale 80 pxeles. - Forzar el recorte de la altura: Establece el valor de recorte para la altura. Por defecto vale 80 pxeles. - Forzar la redimensin del ancho: Establece redimensionar el ancho. Por defecto vale 180 pxeles. el valor al cual se

- Forzar la redimensin de la altura: Establece el valor al cual se redimensionar la altura. Por defecto vale 80 pxeles. - Carpeta de imgenes temporales: Elimina las imgenes temporales. Es recomendable limpiar esta carpeta de vez en cuando.

Aceptamos la configuracin que el componente trae por defecto y pasamos a crear una galera. Para ello accedemos a Componentes -> MorpheoShow -> Galleries y le damos al botn de Nuevo, llegando a la pantalla de la Ilustracin 65:

Ilustracin 65: Creacin de una galera de imgenes

Como ttulo le pondremos Galera y no seleccionamos ninguna imagen en miniatura que represente a la galera. Para el formato de visualizacin de las imgenes tenemos diferentes opciones: vista clsica, imagen rotatoria, vista imitando una postal o una fotografa Polaroid, vista de las fotos de la cuenta Flickr o Picaza que le hayamos indicado en la configuracin, imagen de Google Maps, 63

etc. Nosotros nos decantamos por la vista clsica. En descripcin abreviada y descripcin completa hacemos una pequea referencia de lo que contendr la galera, por ejemplo Galera de imgenes. En los parmetros de la derecha se nos permiten diferentes configuraciones dependiendo del formato de galera seleccionado:

Configuracin de la Galera Clsica:

Plantilla: Permite seleccionar una plantilla para la vista entre estilos fancybox y shadowbox, y dentro de cada estilo existen cuatro variantes segn se desee ver la imagen con un marco visible o invisible, con ttulo, etc. Orden de las imgenes en la pgina: Permite elegir el orden en el que se visualizarn las imgenes. Por defecto aparece activado el orden aleatorio pero podemos seleccionar por ttulo, nombre del archivo, identificacin o fecha. Columna: Indica el nmero de imgenes por columna. Altura: Altura de la imagen en pxeles. Por defecto vale 400. Ancho: Ancho de la imagen en pxeles. Por defecto vale 600. Transicin: Modo en el que se pasar se una imagen a otra: fade (perdiendo luz hasta oscurecer la imagen y mostrar otra), blocks (mostrando bloques oscuros hasta rellenar la imagen), circles (mostrando crculos), etc. Navegador: Muestra u oculta la barra de control. Slider: Determina si una imagen se desliza de izquierda a derecha o al contrario. Velocidad: Tiempo en el que una imagen es reproducida. Aleatorio: Muestra las imgenes en un orden aleatorio o prefijado. Redimensin: Establece la proporcin de una imagen reducida. Si indicamos S se reducirn proporcionalmente, sino se reducirn sin seguir ninguna proporcin. Independientemente del valor que le indiquemos, al seleccionar la imagen se ver en sus proporciones originales. Color de fondo: Color del rea de desplegado de imgenes, en hexadecimal. Esta opcin se permite por si deseamos que el fondo se confunda con el de nuestra pgina entre imgenes de diferentes tamaos. Altura: Altura de la imagen en pxeles. Por defecto vale 680. Ancho: Ancho de la imagen en pxeles. Por defecto vale 650. Altura: Altura de la imagen en pxeles. Por defecto vale 480. Ancho: Ancho de la imagen en pxeles. Por defecto vale 640. Altura: Altura de la imagen en pxeles. Por defecto vale 680. Ancho: Ancho de la imagen en pxeles. Por defecto vale 580.

Configuracin de la rotacin de la imagen:

Configuracin bsica del visor:

Configuracin bsica de la postal:

Configuracin bsica del visor:

Galeras Flickr: 64

ID de usuario Flickr: Identificacin del usuario de la cuenta Flickr de la que se quieren mostar las imgenes. Colocar ID: mostrar un conjunto especfico de fotos del usuario. Texto: Campo de texto de bsqueda. Los resultados de la bsqueda solo devolvern las imgenes que contengan a la cadena de bsqueda en su ttulo o en sus etiquetas. Etiquetas: Lista de etiquetas separadas por comas. Se listarn las fotos con una o ms etiquetas. ID del grupo: Identificacin del grupo donde se buscar Revelancia: El orden en el que se mostrarn las imgenes. Por defecto se mostrarn en el orden en el que se subieron al portal Flickr. Usuario de Picasa: El nombre del usuario de la cuenta de Picasa. El sistema devolver todos los albums e imgenes relacionados con este usuario. Tamao de la foto: establece el tamao mximo de una foto en bytes. Tamao de la miniatura: establece el tamao mximo de la miniatura, en bytes. Columnas en la pgina principal: Nmero de columnas en miniatura para mostrarse en la pgina principal. Columnas en el lbum: Nmero de columnas para cada pgina del lbum. Cantidad mxima de fotos en el lbum: Cantidad mxima de fotos en cada hoja del lbum. Cantidad mxima de albums en la pgina principal: Cantidad mxima de albums que se mostrarn en la pgina principal. ID del lbum de Picasa: Identificacin del lbum. Fondo del lbum: Color en hexadecimal en el que se mostrar el fondo del lbum. Altura: Altura de la imagen en pxeles. Por defecto vale 420. Ancho: Ancho de la imagen en pxeles. Por defecto vale 500.

Configuracin de Picasa:

Una vez hemos creado la galera, el siguiente paso es aadirle imgenes. En Componentes -> MorpheoShow -> Galleries podemos ver todas las galeras que hayamos creado, como podemos ver en la Ilustracin 66:

Ilustracin 66: Listado de galeras creadas

En el listado est la galera que acabamos de crear con un breve resumen: tipo de formato, descripcin, etc. Entre las columnas del resumen hay tres botones que nos ayudan a gestionar la galera: 65

- Botn Subir ( ): Nos permite subir las imgenes a la galera asignndoles un ttulo, una fecha, una descripcin, un autor y/o un enlace a un sitio web desde una pantalla como la de la Ilustracin 67.

Ilustracin 67: Subir una imagen a una galera

- Botn Imgenes ( ): Es un acceso directo al directorio de imgenes de la galera. En l podemos ver las imgenes que hemos subido y sus parmetros, como vemos en la Ilustracin 68. Tambin nos permite modificar algn dato de la imagen o borrarla de la galera.

Ilustracin 68: Listado de imgenes subidas a una galera

- Botn Opcin de men: Este botn nos permite elegir el tipo de men donde queremos que se visualice en el front-end: topmenu, mainmenu o usermenu. Una vez aadidas las imgenes, procederemos a crear un enlace en nuestra pgina web a la galera de imgenes. Para ello vamos a Mens -> Men principal y le damos a Nuevo, donde seleccionamos MorfeoShow como tipo de tem del men y llegamos a la pantalla de la iluestracin 69:

66

Ilustracin 69: Configuracin del enlace web de una galera creada

Como Ttulo indicamos Galera del proyecto, al igual que como alias indicamos galeria-del-proyecto. Indicamos que se muestre en el men principal, que el item se inserte dentro del grupo de enlaces Tablet Ink y que el nivel de acceso sea pblico y guardamos la configuracin. Ahora nuestra galera ya es visible desde el portal web, teniendo un aspecto como el de la Ilustracin 70:

67

Ilustracin 70: Interfaz de la galera de imgenes del portal web

En el listado de galeras creadas del men de MorpheoShow (Ilustracin 66), hay una columna llamada ID del plugin, cuyo valor para nuestra galera es {morfeo 1}. Este valor sirve para integrar una galera en un artculo de contenido. Para ello nos vamos a un artculo de contenido y en la redaccin del artculo aadimos el valor de la columna tal y como hacemos en la Ilustracin 71:

Ilustracin 71: Integracin de una galera de imgenes en un artculo de contenido

El resultado es que al visualizar el artculo se han aadido las imgenes de la galera:

68

Ilustracin 72: Visualizacin de un artculo de contenido con una galera de imgenes integrada

Las imgenes en el artculo de contenido se comportan igual que en el enlace de la galera: si hubisemos configurado la galera para que las imgenes se mostrasen una tras otra en lugar de mostrarse en un listado de miniaturas, en el artculo veramos como cambian de una a otra.

69

6. EVALUACIN
El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estndares que aseguran el crecimiento de la Web a largo plazo. Entre estos estndares estn el estndar de HTML y el de CSS. Es recomendable el uso de estndares para evitar que nuestra web se vea de modo diferente segn el navegador que se est usando, evitando tener que realizar especializaciones del cdigo fuente para cada navegador. Para comprobarnos que nuestro portal cumple estos estndares, se validar en la web que W3C tiene para ello1. Como nuestro portal no est alojado en ningn servidor, al intentar validarlo mediante url nos aparece un error impidindonoslo:

Ilustracin 73: Error al buscar nuestro portal web

La solucin para validar el cdigo es copiarlo y pegarlo en el cuadro de texto que aparece al pinchar en la pestaa Validate by Direct Input. Como resultado vemos que no tenemos ningn error grave aunque s una advertencia, como se aprecia en la Ilustracin 74:

Ilustracin 74: Validacin del cdigo HTML del portal web

http://validator.w3.org

70

Aunque nuestro cdigo contenga un mensaje de aviso por parte de la web de W3C, la propia pgina nos indica que ha pasado la prueba de validacin HTML:

Ilustracin 74: Mensaje de confirmacin de la validacin HTML

Para validar las hojas de estilo procederemos del mismo modo pero desde la pgina de W3C para las validaciones CSS2:

Ilustracin 75: Validacin del cdigo CSS del portal web

Tanto el cdigo HTML como las hojas de estilo han pasado las validaciones de W3C, lo que nos asegura que nuestro cdigo ser interpretado correctamente desde cualquier navegador.

http://jigsaw.w3.org/css-validator/

71

7. CONCLUSIN
A lo largo de todo el desarrollo del proyecto he podido comprobar que lo difcil que es desarrollar un proyecto sin compaa de nadie. Son muchas horas las que hay que dedicarle a muchas tareas. A casi todas de ellas siempre viene bien una segunda opinin de alguien que tambin entienda sobre diseo o anlisis. Lo bueno ha sido el poder situarme en todos los posibles roles del desarrollo de un producto, pensando como realiza una tarea un analizador y como la programa un implementador y que se puede opinar al respecto de la tarea del otro. Es por eso que cada vez que se desarrolla un trabajo en equipo hay que intentar valorar el trabajo de los otros sobre todo para que reine la paz y el proyecto fluya suavemente. Otra cosa que he podido percibir es la necesidad de desarrollar toda la documentacin que se ha desarrollado en este proyecto, ya que todo es de una gran importancia para que funcione correctamente. Tambin me he dado cuenta de la necesidad de utilizar tantos componentes y plugins como sea posible para facilitar el desarrollo de nuevos productos, ya que todas ellos agilizan los tiempos de coste y reducen el nmero de pruebas al ser componentes terminados y probados. Como valoracin final podra decir que gracias al desarrollo de este proyecto puedo mirar atrs cuando entr a realizar la carrera de informtica, y ver la cantidad de informacin y de conocimientos que he adquirido de forma que me han permitido realizar este proyecto, as como la capacidad de aprender nuevas tecnologas desconocidas hasta el momento de empezar el proyecto de final de carrera, como el gestor de contenidos Joomla!.

72

7. REFERENCIAS.
Documentos: IEEE Recommended Practice for Software Requirements Specifications IEEE STD-830-1998 Beginning Joomla! Second Edition. 2009, Dan Rahmel, editorial Apress. ISBN: 978-1-4302-1642-1.

Recursos web: Pgina oficial de Joomla!: http://www.joomla.org/ Pgina oficial de Joomla! en espaol: http://www.joomlaspanish.org Web de extensiones de Joomla!: http://extensions.joomla.org/ Centro de Ayuda y Documentacin http://ayuda.joomlaspanish.org/ Wikipedia en espaol: http://es.wikipedia.org/ Pgina oficial de W3C: http://w3c.org/ Pgina de validacin HTML: http://validator.w3.org/ Pgina oficial del componente JoomFish!: http://www.joomfish.net/ Pgina oficial del componente http://morfeoshow.joomlaitalia.com/ MorpheoShow: de Joomla! Spanish:

Pgina oficial del componente Xmap: http://joomla.vargas.co.cr/

73