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

Escuela Técnica Superior de Ingeniería Informática PROYECTO FIN DE CARRERA Desarrollo de un portal Web para el aprendizaje basado en el uso del Tablet PC Para optar a la titulación de Ingeniero Técnico en Informática de Gestión Presentado por: Pilar Rivera Ortiz Dirigido por: Félix Buendía García 2 Índice 1. INTRODUCCIÓN ...................................................................... 1.1. PRESENTACIÓN DE OBJETIVOS ....................................... 1.2. ESTRUCTURA DE LA MEMORIA ........................................ 2. ESPECIFICACIÓN DE REQUISITOS ............................................. 2.1. INTRODUCCIÓN ............................................................ 2.1.1. PROPÓSITO ............................................................. 2.1.2. ÁMBITO .................................................................. 2.1.3. DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS ............ 2.1.4. REFERENCIAS .......................................................... 2.1.5. VISIÓN GLOBAL ....................................................... 2.2. DESCRIPCIÓN GENERAL ................................................ 2.2.1. PERSPECTIVA DEL PRODUCTO ................................... 2.2.2. FUNCIONES DEL PRODUCTO ...................................... 2.2.3. CARACTERÍSTICAS DEL USUARIO .............................. 2.2.4. RESTRICCIONES GENERALES .................................... 2.2.5. SUPUESTOS Y DEPENDENCIAS ................................... 2.3. REQUISITOS ESPECÍFICOS ............................................. 2.3.1. REQUISITOS DE INTERFACES EXTERNOS .................... 2.3.2. REQUISITOS FUNCIONALES ...................................... 2.3.3. REQUISITOS DE EFICIENCIA ..................................... 2.3.4. REQUISITOS DE DISEÑO .......................................... 2.3.5. ATRIBUTOS ............................................................. 2.3.6. OTROS REQUISITOS ................................................. 3. MODELADO CONCEPTUAL ........................................................ 3.1. INTRODUCCIÓN ............................................................ 3.2. ANÁLISIS FUNCIONAL: DIAGRAMA DE CASOS DE USO ....... 3.3. ANÁLISIS ESTRUCTURAL: DIAGRAMA DE CLASES ............. 4. INTRODUCCIÓN A JOOMLA! ..................................................... 4.1. QUÉ ES UN CMS ........................................................... 4.2. DISEÑO ESTRUCTURAL DE JOOMLA! ................................ 4.2.1. INTRODUCCIÓN ....................................................... 4.2.2. CAPA DE PRESENTACIÓN .......................................... 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. IMPLEMENTACIÓN EN JOOMLA! ................................................. 5.1. INTRODUCCIÓN ............................................................ 5.2. COMPONENTES Y MÓDULOS BÁSICOS ............................. 5.3. COMPONENTES ADICIONALES ........................................ 6. EVALUACIÓN .......................................................................... 7. CONCLUSIÓN ......................................................................... 8. REFERENCIAS ........................................................................ 5 5 6 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 70 72 73 3 Índice de Ilustraciones. Ilustración 1: Caso de uso del usuario anónimo ............................ Ilustración 2: Caso de uso del usuario registrado .......................... Ilustración 3: Caso de uso del usuario gestor para el portal de acceso público ...................................................... Ilustración 4: Caso de uso del usuario gestor para el portal de administrador ....................................................... Ilustración 5: Caso de uso del usuario administrador para el portal de acceso público ................................................. Ilustración 6: Caso de uso del usuario administrador para el portal de administrador .................................................. Ilustración 7: Diagrama de clases ............................................... Ilustración 8: Arquitectura de tres capas ...................................... Ilustración 9: Interfaz del portal del administrador ........................ Ilustración 10: Cabecera de la interfaz del portal del administrador Ilustración 11: Menú superior de la interfaz del portal del administrador ................................................... Ilustración 12: Contenido de la interfaz del portal del administrador Ilustración 13: Columna derecha del portal del administrador ......... Ilustración 14: Vista del portal web ............................................. Ilustración 15: Cabecera del portal web ....................................... Ilustración 16: Menú superior del portal web ................................ Ilustración 17: Menú izquierdo del portal web ............................... Ilustración 18: Contenido del portal web ...................................... Ilustración 19: Tablas de contenido de la base de datos de Joomla! Ilustración 20: Tablas de registro de usuarios y grupos de usuarios de la base de datos de Joomla! ............................ Ilustración 21: Tablas de estadísticas de la base de datos de Joomla! ............................................................. Ilustración 22: Tablas de componentes y plugins de la base de datos de Joomla! ................................................ Ilustración 23: Tablas de menús y plantillas de la base de datos de Joomla! ............................................................. Ilustración 24: Menú de componentes ......................................... Ilustración 25: Formulario de acceso al portal web ........................ Ilustración 26: Configuración del Formulario de acceso .................. Ilustración 27: Búsqueda del portal web ...................................... Ilustración 28: Configuración de la Búsqueda del portal ................. Ilustración 29: Menús del portal web ........................................... Ilustración 30: Configuración del menú principal del portal ............. Ilustración 31: Sindicación del portal ........................................... Ilustración 32: Configuración de la Sindicación del portal ............... Ilustración 33: Portal del módulo Joom!Fish ................................. Ilustración 34: Gestor de lenguajes del módulo Joom!Fish .............. Ilustración 35: Gestor de módulos de Joomla! .............................. Ilustración 36: Configuración del módulo Joom!Fish ...................... Ilustración 37: Selección de idioma en la interfaz del portal (1) ...... Ilustración 38: Selección de idioma en la interfaz del portal (2) ...... Ilustración 39: Menú de traducciones del componente Joom!Fish .... Ilustración 40: Listado con los accesos de los menús ..................... Ilustración 41: Traducción de un menú del portal web ................... Ilustración 42: Parámetros del menú a traducir ............................ Ilustración 43: Activación de una traducción 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 4 Ilustración 44: Gestor de artículos de contenido de Joomla! ........... Ilustración 45: Traducción de un artículo de contenido .................. Ilustración 46: Configuración de parámetros de un artículo de contenido traducido ............................................ Ilustración 47: Mensaje de confirmación del proceso de traducción .. Ilustración 48: Interfaz del portal web en castellano ...................... Ilustración 49: Interfaz del portal web en inglés ........................... Ilustración 50: Configuración del enlace del mapa web .................. Ilustración 51: Configuración del módulo Xmap. Pestaña Sitemaps Ilustración 52: Configuración del módulo Xmap. Pestaña CSS ......... Ilustración 53: Configuración del módulo Xmap. Pestaña Extensiones ....................................................... Ilustración 54: Opciones de configuración del módulo Xmap ........... Ilustración 55: Interfaz del mapa web en el portal ........................ Ilustración 56: Interfaz de administrador del mapa web en el portal Ilustración 57: Gestor de plugins de Joomla! ................................ Ilustración 58: Configuración del componente MorpheoShow .......... Ilustración 59: Configuración de la galería clásica del componente MorpheoShow .................................................... Ilustración 60: Configuración del Estilo CSS del componente MorpheoShow .................................................... Ilustración 61: Configuración de galería vista básica del componente MorpheoShow .................................................... Ilustración 62: Configuración de la distribución de listado del componente MorpheoShow .................................. Ilustración 63: Configuración del listado de miniaturas del componente MorpheoShow .................................. Ilustración 64: Configuración las miniaturas de las galerías del componente MorpheoShow .................................. Ilustración 65: Creación de una galería de imágenes ..................... Ilustración 66: Listado de galerías creadas ................................... Ilustración 67: Subir una imagen a una galería ............................. Ilustración 68: Listado de imágenes subidas a una galería .............. Ilustración 69: Configuración del enlace web de una galería creada Ilustración 70: Interfaz de la galería de imágenes del portal web .... Ilustración 71: Integración de una galería de imágenes en un artículo de contenido .......................................... Ilustración 72: Visualización de un artículo de contenido con una galería de imágenes integrada ............................. Ilustración 73: Error al buscar nuestro portal web ......................... Ilustración 74: Validación del código HTML del portal web .............. Ilustración 75: Mensaje de confirmación de la validación HTML ....... Ilustración 76: Validación del código 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 5 1. INTRODUCCIÓN 1.1. PRESENTACIÓN DE OBJETIVOS Este proyecto final de carrera consiste en realizar un portal que proporcione información y servicios relacionado con las múltiples posibilidades de aprendizaje que ofrece un dispositivo Tablet PC. Este proyecto se desarrolla en el contexto del premio concedido a la Universidad Politécnica 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 Técnica Superior de Informática Aplicada diverso soporte didáctico de la compañía 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 Ampliación de Tecnología de Computadores. Uno de los requisitos que exige la compañía HP para continuar el proyecto es la existencia de un portal web que se publicará en la página de la empresa en el que se incluya: • Título, resumen y equipo investigador. • Objetivos (incluyendo qué aspectos se deben mejorar). • Implementación (cambios en las estrategias didácticas, uso de la tecnología, etc). • Resultados / Impacto (en la enseñanza y en el aprendizaje). • Documentación. - Publicaciones presentadas a Conferencias. - Contenido multimedia. La idea del proyecto sería crear un portal web con la información citada anteriormente ampliándolo hasta convertirlo en un portal sobre usos didácticos de los Tablets Pc’s añadiendo información sobre otros proyectos de usos docentes de Tablets – no solo a nivel universitario –, software específico de los Tablets, documentación (artículos, informes, casos de estudio,…), referencias, etc. Para la realización del portal se haría uso del sistema de administración de contenidos Joomla! instalado en un servidor Apache. La base de datos será MySQl, las páginas estarían escritas en PHP5 y sus plantillas estarían definidas en hojas de estilo CSS, cumpliendo con los estándares de W3C. En el portal existiría la posibilidad de registrarse para acceder a según qué recursos, así como para poder escribir artículos. Para esto se utilizaría una jerarquía de usuarios que iría desde el administrador – con acceso a cualquier servicio del portal y con capacidad de decidir sobre el contenido creado por los usuarios –, al usuario anónimo pasando el usuario registrado y el gestor. 6 1.2. ESTRUCTURA DE LA MEMORIA A continuación se describe cada uno de los capítulos de los que se compone la presente memoria: • CAPÍTULO 1. INTRODUCCIÓN. Se describen los objetivos a cumplir, el contexto en el que se desarrolla el proyecto y la estructura de la memoria. • CAPÍTULO 2. ESPECIFICACIÓN DE REQUISITOS. Se explica la Especificación de Requisitos de Software (ERS), que describe de forma clara los requisitos, necesidades y características que el sistema deberá cumplir. • CAPÍTULO 3. MODELADO CONCEPTUAL. Se explica de forma genérica los aspectos generales del portal, utilizando modelos para lograr relacionar estos aspectos generales con los requisitos capturados durante la Especificación de Requisitos de Software. • CAPÍTULO 4. INTRODUCCIÓN A JOOMLA! Desarrollo orientado a la solución de la problemática planteada en el modelado conceptual, es decir, como se desarrolla el portal y los elementos que lo componen. • CAPÍTULO 5. IMPLEMENTACIÓN EN JOOMLA! Una vez realizada la Especificación de Requisitos de Software, explicada la fase de Modelado Conceptual y la estructura del portal, se procede a explicar la implementación del portal. • CAPÍTULO 6. EVALUACIÓN. Pruebas de validación de XHTML y hoja de estilo en el portal del organismo W3C. • CAPÍTULO 7. CONCLUSIÓN. Valoración del trabajo realizado del proyecto y conclusiones finales. • CAPÍTULO 8. REFERENCIAS. Relación de documentación consultada para el desarrollo del proyecto y la memoria. 7 2. ESPECIFICACIÓN DE REQUISITOS 1. INTRODUCCIÓN. 1.1. Propósito. El propósito de esta especificación de requisitos es definir los requerimientos del portal web Tablet Ink con la intención de que sirva de compromiso entre el cliente y el equipo de desarrolladores, de modo que el cliente se pueda hacer una idea lo más 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 documentación de interés, proyectos docentes de varios centros con relación con los Tablet PC’s, un repositorio de enlaces de software específico para las Tablets, referencias y un apartado sobre el premio que cada año da la compañía HP en su programa Technology for Teaching Grant Initiative, Transforming teaching and learning through technology. 1.3. Definiciones, acrónimos y abreviaturas.  Tablet PC: Ordenador portátil con pantalla táctil.  Identificarse: Introducir el nombre de usuario y su contraseña 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). Organización que dicta los protocolos que deben cumplir las páginas 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 petición que le llegue de los clientes.  CMS: Sistema de Gestión de Contenidos (Content Management System). Para más información 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 interactúan los usuarios con la web.  Artículo de contenido: Cada uno de los escritos de mayor extensión que se insertan en el portal web.  Sección: Grupos en los que se divide el portal web según el contenido al que haga referencia.  Categoría: subgrupos dentro de una sección. 1.4. Referencias.  Guía del IEEE para la Especificación de Requisitos Software (IEEE Std. 830-1998)  Diccionario de la Real Academia Española: http://ww.rae.es 8 1.5. Visión global. A lo largo del documento se podrán 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 específicos que estarán organizados por modo. 2. DESCRIPCIÓN GENERAL. 2.1. Perspectiva del producto. Aunque hoy en día podemos encontrar gran variedad de información sobre los Tablet PC en Internet, es difícil encontrar una página web donde relacionen el uso que se les puede dar en la docencia –especialmente a nivel universitario – con software y documentos relacionados para ellos, añadiendo la posibilidad de colaborar en el portal. Es por esto que se desea realizar una web independiente donde el usuario pueda encontrar toda la información que necesite. 2.2. Funciones del producto. A continuación 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. Búsqueda de contenido: • Búsqueda por palabras. • Búsqueda por categoría. • Búsqueda por autor. • Búsqueda por fecha de publicación. Gestión de usuarios: • Dar de alta un usuario. • Dar de baja un usuario. • Modificar datos de un usuario. Gestión de artículos de contenido: • Añadir un artículo de contenido. • Publicar un artículo de contenido. • Eliminar un artículo de contenido. • Modificar un artículo de contenido. • Añadir traducción de un artículo de contenido. Gestión de comentarios: • Añadir un comentario a un artículo de contenido. • Eliminar un comentario de un artículo de contenido. • Modificar un comentario. Gestión de categorías: • Añadir una categoría. • Eliminar una categoría. • Modificar una categoría. • Añadir traducción de una categoría. Gestión de secciones: • Añadir una sección. • Eliminar una sección. • Modificar una sección. • Añadir traducción de una sección. 9 Gestión de cambios en el portal: • Iniciar sesión. • Finalizar sesión. • Cambiar el idioma del portal. 2.3. Características del usuario. En nuestro portal existirán cuatro tipos de usuarios. En las siguientes líneas se explica la jerarquía existente entre ellos, existiendo dependencias entre ellos y sobreentendiendo que los privilegios de los usuarios de más bajo rango se heredan en los privilegios de los usuarios superiores: • El usuario anónimo, caracterizado por tener la asignación más limitada de las funciones ofrecidas en la página. Pueden ser usuarios registrados que aun se han identificado o usuarios a los que no les interesa registrarse en la página porque no necesitan más información de la que se les ofrece. Sus privilegios se resumen en poder visualizar cualquier documento publicado de carácter público, leer comentarios, escribir comentarios y realizar búsquedas. • El usuario registrado, caracterizado por tener acceso a artículos de contenido restringidos a los usuarios anónimos. • El usuario gestor, caracterizado por tener privilegios en el portal de acceso público (front-end) y en el portal del administrador (backend) de la página web. Tiene acceso a los artículos de contenido de orden público y restringido y además tiene poder para crear y publicar nuevos artículos de contenido, así como para modificar los ya existentes. También tiene acceso a la gestión de secciones y categorías. • El usuario administrador, caracterizado por ser el de mayor rango. Tiene acceso a cualquier funcionalidad del portal, por lo que sería capaz tanto de gestionar usuarios, publicaciones, secciones y categorías, así como cualquier otra función necesaria para gestionar la página web. No tiene ninguna restricción. 2.4. Restricciones generales. En el apartado anterior, cuando hemos mencionado que el usuario administrador no tiene ninguna restricción 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 implicaría la actualización del software. Para asegurarnos de que la página esté operativa tras cualquier incidencia en el servidor es recomendable hacer copias de seguridad periódicamente, así como tener instaladas unas medidas mínimas de seguridad como cortafuegos, encriptación de contraseñas de usuarios, etc. De este modo conseguiríamos reducir el número de errores críticos que pudiesen aparecer en el mantenimiento de la página web. En cuanto a la seguridad, los usuarios con acceso a zonas restringidas se deben identificar con su usuario y contraseña, que deberán mantener en secreto. 16 - Admin. Este usuario hereda las funciones del gestor y gestiona todo el portal. En las Ilustraciones 5 y 6 vemos sus funcionalidades según la interfaz: - Front-End: Ilustración 5: Caso de uso del usuario administrador para el portal de acceso público - Back-End: Ilustración 6: Caso de uso del usuario administrador para el portal de administrador 17 3.3. ANÁLISIS ESTRUCTURAL. DIAGRAMA DE CLASES Los diagramas de clases son diagramas de estructura estática que muestran los elementos del sistema (clases y objetos) y sus interrelaciones, incluyendo herencia, agregación, asociación, etc. Los diagramas de clase son el pilar básico del modelado con UML, siendo utilizados tanto para mostrar lo que el sistema puede hacer, como para mostrar cómo 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 acción que representan. Existen varios tipos de relaciones: - Relación de asociación. Se representa mediante una línea con la cardinalidad de las clases en cada extremo y el nombre de la acción. - Relación de herencia. Se representa mediante una línea con un triángulo 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. - Relación de agregación. Se representa mediante una línea con un rombo en el extremo de la clase que contiene la clase del otro extremo de la línea. También tienen un número que indica la cardinalidad de la relación. En la Ilustración 7 se muestra el diagrama de clases de nuestra aplicación. En ella podemos ver que nuestro Portal Web está formado por Usuarios y Áreas de trabajo, y estás últimas están formadas por documentos y enlaces web. Los usuarios se especializan en Gestores y Anónimos, que a su vez se especializan en Admins y Registrados. Las Áreas de trabajo se especializan en secciones. 18 Ilustración 7: Diagrama de clases 19 4. INTRODUCCIÓN A JOOMLA! 4.1. QUÉ ES UN CMS En el apartado de Supuestos y dependencias de la Especificación de Requisitos, hablamos de que nuestro portal web usaría un CMS para su correcto funcionamiento. CMS son las siglas de Content Management System, que en castellano se traduce como Sistema de Gestión de Contenido. Los CMS surgieron ante la necesidad de tener que actualizar constantemente algunos portales web con gran cantidad de información, como suele pasar con los periódicos electrónicos y otros portales informativos. Un Sistema de Gestión de Contenido es una aplicación capaz de generar un portal web gracias a una plantilla y una base de datos. La plantilla estructura y maqueta la información a mostrar y la base de datos almacena todo el contenido necesario para que la página se genere correctamente (nombre de secciones, artículos, usuarios, permisos de los usuarios, restricciones, etc.). Al diferenciar entre contenido e interfaz los cambios en el portal son más sencillos, por lo que no es necesario modificar todas las páginas si se desea realizar un cambio en el formato o generar nuevas páginas para cada nueva publicación, dado que se generan con HTML dinámico y los cambios son automáticos. Además, para agilizar la actualización continua de un portal los CMS permiten la jerarquía de usuarios, de este modo se pueden crear varios roles de usuarios con distintos privilegios, cada uno según el nivel de colaboración que se les desee dar. De este modo un portal puede tener usuarios registrados para acceder a información reservada, usuarios editores para crear y/o publicar nuevos artículos, etc. Las aplicaciones CMS actuales permiten no sólo el manejo de contenidos de texto sino que también soportan la gestión de material multimedia. A día 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 Gestión de Contenido vayan ganando popularidad y cada vez sean más completos. Gracias al contenido dinámico y a los roles de usuarios, se consigue optimizar el coste de mantenimiento de los portales gestionados mediante los CMS. Si a esto le añadimos que las aplicaciones CMS está diseñadas para evitar el mayor número de retoques posibles a mano en el código fuente de una página web el resultado es un programa de fácil uso donde sólo se requiere que el usuario que lo gestione tenga conocimientos básicos de HTML y de CSS. Es por todo esto por lo que hemos elegido este sistema para desarrollar el portal. 4.2. DISEÑO ESTRUCTURAL DE JOOMLA! 4.2.1. Introducción Tal y como hemos visto, los Sistemas de Gestión de Contenido separan los datos de la aplicación de su interfaz y es la propia aplicación quien los gestiona, es decir, presenta una arquitectura de tres capas. 20 Una arquitectura de tres capas se caracteriza por presentar una separación lógica entre los datos de una aplicación, 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 demás. Las tres capas de esta arquitectura son las siguientes:  Capa de presentación. Es la que se encarga de recoger los resultados de la capa de lógica y presentárselos al usuario final en una interfaz. En las aplicaciones web esta interfaz es una interfaz gráfica (GUI) con la que el usuario interacciona con la aplicación.  Capa lógica o de negocio. Es la que contiene toda la implementación de las funciones de la aplicación. La capa de presentación 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 presentación.  Capa de datos. Es donde se almacenan todos los datos que usa la aplicación. En Joomla! están guardados en una base de datos. Por norma general la capa de presentación solo se comunica con la de negocio para enviarle solicitudes, la capa de negocio se comunica con la de presentación 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 relación cliente – servidor, tal y como se resume en la Ilustración 8. Ilustración 8: Arquitectura de tres capas Normalmente la capa de datos y la de negocio están integradas en una misma máquina, mientras que la capa de presentación puede estarlo en esa misma máquina o en otra diferente, pudiendo estar en varias. 21 4.2.2. Capa de presentación A continuación procederemos a analizar la capa de presentación de Joomla!, que es donde se muestra la interfaz gráfica 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 gestión interna del portal, por lo que solo será accesible para usuarios con suficientes privilegios como el administrador y el editor. Dado que la parte más comercial del portal pertenece al interfaz front-end y como la distribución de información nos parece lo suficientemente clara no se ha retocado la plantilla CSS y su visualización es la que ofrece Joomla! por defecto, tal y como podemos ver en la Ilustración 9: Ilustración 9: Interfaz del portal del administrador En esta plantilla podemos distinguir cuatro zonas significativas, representadas en las siguientes Ilustraciones: - Cabecera: Es donde aparece el logo de Joomla! y el nombre del portal web. Ilustración 10: Cabecera de la interfaz del portal del administrador - Menú superior: Son una serie de menús despegables que nos direccionan a diferentes páginas de la gestión del portal. Ilustración 11: Menú superior de la interfaz del portal del administrador 22 - Contenido: Contiene un acceso directo a las páginas más usadas en la gestión del portal. Los botones mostrados se pueden modificar gracias al componente de edición CustomQuickIcons. Ilustración 12: Contenido de la interfaz del portal del administrador - Columna de la derecha. Es un portal de bienvenida para el administrador con información resumida de algunas características del portal. Ilustración 13: Columna derecha del portal del administrador 4.2.2.2. Interfaz Front-End Esta interfaz es desde la que interactúan todos los usuarios del portal, por lo que es la que más hay que cuidar estéticamente ya que si elegimos un mal diseño es posible que el usuario no se sienta cómodo y deje de navegar por ella. En la Ilustración 14 vemos el resultado final de esta Interfaz. 23 Ilustración 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 página y donde aparece la imagen de presentación. Ilustración 15: Cabecera del portal web - Menú superior. Es un menú siempre visible. Contiene los enlaces que se han considerado de ayuda para la orientación del usuario, como es la página de inicio, las preguntas frecuentes, la búsqueda sobre el portal, el mapa de la web y la gestión de idiomas del contenido. Ilustración 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 24 información ofrecida. También contiene un menú de acceso para identificarse o un menú de usuario con los datos personales de este si el usuario ya está registrado. Ilustración 17: Menú izquierdo del portal web - Contenido. Es donde se mostrará la información solicitada por el usuario. Aparece centrada en el portal web. Ilustración 18: Contenido del portal web 25 4.2.3. Capa de Negocio Esta capa se comunica con la capa de presentación 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 módulos. Los componentes son aplicaciones independientes entre sí que gestionan la información dentro de Joomla!, añadiendo distintas funcionalidades al portal. Un módulo, por el contrario, es una aplicación que muestra información 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 módulos más importantes de Joomla!, viéndolos más 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 página 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 páginas. - com_banners. Componente de administración de banners del portal. - com_rss, com_newsfeeds. Componente de sindicación de noticias. - com_search. Componente del buscador interno del portal. - com_weblink. Componente de gestión y publicación de enlaces. Módulos: - mod_mainmenu. Utilizado para configurar los menús 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 identificación. - mod_whosonline. Muestra el número de usuarios conectados actualmente en el portal. - mod_popular. Muestra una lista de los artículos más visitados. - mod_syndicate. Gestiona la subscripción por parte de los usuarios a las últimas noticias del portal. - mod_search. Muestra una caja que permite la búsqueda de texto dentro del portal. - mod_banners. Permite que se muestren anuncios en el portal. - mod_lastestnews. Muestra un listado de los últimos artículos publicados en el portal. - mod_wrapper. Permite visualizar páginas 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 información del portal en una base de datos. Interactuará con la capa de negocio cuando ésta le solicite alguna información para ser mostrada en la capa de presentación. 32 Características de los parámetros: El primer grupo de parámetros indica los detalles del módulo. - Tipo de módulo: mod_loguin. Es un valor fijo que el administrador no puede modificar. - Título: Es el título del módulo. El administrador puede elegir si dejar el que viene por defecto o cambiarlo. Por ejemplo, en nuestro caso hemos modificado el título para que en lugar de “Formulario de Acceso” solo ponga “Acceso”. - Mostrar Título: Decide si se mostrará el nombre del título en el frontend. - Habilitado: Indica si el módulo está habilitado o no. Este parámetro también se puede modificar desde la columna de Habilitados del listado de parámetros del gestor de módulos. - Posición: Es un menú despegable con todas las posibles opciones donde colocar el módulo. Si la plantilla de un portal no trata alguna de las opciones disponibles, el módulo no se visualizará. - Ordenar: Es un menú despegable con varias opciones para ordenar al módulo con respecto a otros módulos que estén en la misma posición. - Nivel de acceso: Público, Registrado o Especial. Son los tres niveles de acceso posible según el grado de restricción que tenga el usuario. Un nivel Público estará disponible para todos los usuarios, un nivel Restringido estará vetado para los usuarios anónimos y el nivel Especial solo será visible para los usuarios con acceso al back-end. - ID: Este es el número de identificación único del módulo en la base de datos. El sistema del sitio Joomla! lo genera automáticamente en el momento en que se crea el módulo. - Descripción: Esta es una breve descripción de las funciones para este tipo de módulo (sólo-lectura). El siguiente grupo de datos es Asignación de Menú. Aquí se indicará desde que menús de la página web se permitirá el acceso al módulo. En nuestro caso como están marcados todos los menús, estemos navegando por la página que sea siempre tendremos visible el formulario de acceso. Estos dos grupos de parámetros son comunes a todos los módulos y solo los explicaremos para éste. El tercer grupo de parámetros son parámetros específicos del módulo: - Guardado en la caché: Por defecto este valor está desactivado y no se puede cambiar. - Sufijo de la clase del módulo: Se puede especificar un valor como sufijo para la clase CSS del módulo. Esto permite aplicar un estilo personalizado al módulo. El sufijo deberá estar definido en la hoja de estilos CSS de la plantilla. 33 - Texto anterior: El texto o código HTML escrito aquí se mostrará en la parte superior del formulario de acceso. - Texto posterior: El texto o código HTML escrito aquí se mostrará en la parte inferior del formulario de acceso. - URL de redireccionamiento del inicio de sesión: Listado con todos los enlaces de todos los menús de la web. El enlace seleccionado será al que nos redirija la página al acceder al área registrada. Si no se selecciona ninguno, se cargará la página de inicio del sitio. - URL de redireccionamiento al finalizar la sesión: Listado con todos los enlaces de todos los menús de la web. El enlace seleccionado será al que nos redirija la página al salir del área registrada. Si no se selecciona ninguno, se cargará la página 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 páginas del portal web. 2. Buscador (mod_search). El modulo Buscador muestra una caja que permite realizar búsquedas de texto en el contenido del sitio. Ilustración 27: Búsqueda del portal web En la Ilustración 27 vemos que la búsqueda se puede hacer con palabras o con una frase, permitiendo realizar la búsqueda en toda la web o limitarla a artículos, secciones, etc. Los parámetros entre los que puede elegir el administrador son: - Ancho de la caja: número de caracteres que ocupará el ancho de la 34 caja. Para medir en caracteres se toma la longitud de la letra eme por ser la más ancha. - Texto: El texto que aparece en la caja de búsqueda. - Botón de la búsqueda: Muestra u oculta el botón de búsqueda. - Posición del botón: Permite seleccionar la posición del botón en relación a la caja de búsqueda. - Botón de buscar una imagen: Muestra u oculta el botón de búsqueda de imágenes. - Texto del botón: El texto que aparece en el botón de búsqueda. Si se deja en blanco se utilizará ‘Buscar’. Ilustración 28: Configuración de la Búsqueda del portal En la Ilustración 28 se puede ver que hemos elegido que el ancho de la caja sea de 20 caracteres y que el botón de buscar se sitúe a la derecha de la caja. 3. Módulos del menú (mod_mainmenu). Todos los menús de nuestro portal los configura este módulo. El portal tiene tres menús: menú de cabecera, menú principal y menú de usuario. En la Ilustración 29 se pueden ver dos de ellos, puesto que el menú de usuario solo es posible visualizarlo para usuarios registrados. 35 Ilustración 29: Menús del portal web Según el menú, el administrador puede elegir una configuración u otra. Ilustración 30: Configuración del menú principal del portal Explicamos los parámetros especiales del menú principal: - Mostrar los iconos del menú: Muestra los iconos de menú que se hayan seleccionado para los ítems de menú. 36 - Alineación del icono del menú: Si se hubiese elegido mostrar los iconos del menú, esta opción te permite alinearlos a la izquierda o a la derecha. - Imagen para el enlace del menú: Esta opción te permite usar imágenes en lugar de texto como enlaces del menú. Las imágenes deben ser seleccionadas en las opciones del menú. - Expandir menú: Este parámetro permite que siempre estén visibles los enlaces de los submenús. Si no se activa los submenús de la página solo se desplegaran al seleccionarlos manualmente. - Activar padre: Permite activar los artículos padre (artículos de menú de nivel primario) como enlaces. - Resultado total activado: Esta opción permite resaltar el enlace seleccionado del menú. Dado que esto puede hacer que no se cumplan los estándares de validación HTML es recomendable que sea la hoja de estilos la que se encargue de resaltar los enlaces. - Imagen para sangría: Nos permite elegir entre cuatro opciones: “Imágenes de la plantilla” muestra las imágenes definidas en la plantilla del portal web; “Imágenes Predeterminadas” muestra las imágenes que, por defecto, forman parte de la instalación Joomla!; “Use los parámetros de abajo” muestra las imágenes seleccionadas en los parámetros Imagen para sangría X; “Ninguna” oculta todas las imágenes asociadas al módulo mod_mainmenu. Esto se aplica para cualquier plantilla instalada en el portal web. - Imagen para sangría 1: Selecciona la imagen para el primer subnivel del menú. - Imagen para sangría 2: Selecciona la imagen para el segundo subnivel del menú. - Imagen para sangría 3: Selecciona la imagen para el tercer subnivel del menú. - Imagen para sangría 4: Selecciona la imagen para el cuarto subnivel del menú. - Imagen para sangría 5: Selecciona la imagen para el quinto subnivel del menú. - Imagen para sangría 6: Selecciona la imagen para el sexto subnivel del menú. - Espaciador: En los menús de visualización horizontal, es el carácter que se usará como espaciador. Los más usados suelen ser | ó - . - Espaciador al final: carácter que se utilizará a final de menú 4. Módulo sindicación (mod_syndicate). El módulo 'Sindicación' muestra enlaces de sindicación que permiten a los visitantes subscribirse a las últimas noticias de la página en la que está colocado el módulo. Actualmente se incluyen los iconos de sindicación: RSS 2.0 y Atom 1.0. Cuando se pulsa sobre uno de estos iconos, el sitio se redirige a una nueva página en la que se 37 mostrarán las noticias en formato XML (formato para el intercambio de información). Para recibir las noticias en otro sitio Joomla! o en un lector de noticias, los visitantes necesitan copiar y pegar la URL suministrada. Ilustración 31: Sindicación del portal En la Ilustración 32 aparecen los parámetros del módulo: Ilustración 32: Configuración de la Sindicación del portal - Guardando en la caché: Por defecto este valor está desactivado y no se puede cambiar. - Texto: Texto que se mostrará junto al botón de sindicación. Por defecto aparece Feed Entries. - Formato: Permite elegir el tipo de formato de sindicación en una lista desplegable: RSS 2.0 o Atom 1.0 - Sufijo de la clase del módulo: Se puede especificar un valor como sufijo para la clase CSS del módulo. Esto permite aplicar un estilo personalizado al módulo. El sufijo deberá estar definido en la hoja de estilos CSS de la plantilla. 5.3. COMPONENTES ADICIONALES Joomla! viene con unos componentes muy básicos instalados por defecto con el objetivo de poder crear un portal web genérico. Si queremos añadir alguna nueva funcionalidad a nuestra página podemos hacerlo añadiendo componentes. Veamos a continuación los componentes que hemos añadido al portal: 38 1. Componente Joom!Fish (com_joomfish). Una de las ideas principales del portal es la de ofrecer a nuestros usuarios los artículos de contenido tanto en castellano como en inglés. Joomla! no trae ninguna herramienta para la gestión de traducciones de artículos así que la solución ha sido buscar e instalar algún componente. Joom!Fish es una extensión que nos permite realizar una presentación del portal web en varios idiomas. Este componente nos da la posibilidad de traducir solamente la parte del portal que deseemos: artículos de contenido, menús, categorías, secciones… Una vez instalado, accedemos al panel de control de Joom!Fish (Ilustración 33) desde Componentes -> Joom!Fish -> Control Panel: Ilustración 33: Portal del módulo Joom!Fish Y activamos los dos lenguajes que tenemos instalados en Joomla!: el inglés y el español. Para ello entramos en Language Configuration y marcamos los dos idiomas, tal y como se ve en la Ilustración 34. Si en un futuro quisiéramos gestionar la página web en un tercer lenguaje, deberíamos instalarlo previamente y luego seleccionarlo aquí. 39 Ilustración 34: Gestor de lenguajes del módulo Joom!Fish El siguiente paso es ver como indicamos al usuario que tiene la posibilidad de cambiar el idioma de visualización del portal. Accedemos desde Extensiones - > Gestor de módulos a una pantalla parecida a la de la Ilustración 35: Ilustración 35: Gestor de módulos de Joomla! Clickamos en Nuevo, seleccionamos JoomFish-Language Selection y le damos a Siguiente. Ahora nos toca configurar el módulo: 40 Ilustración 36: Configuración del módulo Joom!Fish En los detalles de configuración, en Título escribimos “Language Selection”, que será el nombre con el que lo distinguiremos del resto de módulos. Seleccionamos la opción de no mostrar el título. El siguiente parámetro es el de elegir la posición del portal donde se verá las opciones del idioma. Lo más intuitivo sería que estuviese en la parte superior de la página web. Intentamos ponerlo en la misma zona que el menú de cabecera, pero tal y como vemos en la Ilustración 37 se nos descuadra: Ilustración 37: Selección 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 posición definida. Nos aprovechamos de esto último y procedemos a crear una nueva ubicación para una posición no definida, como por ejemplo user4. Accedemos a la carpeta de instalación de nuestra web, seleccionamos templates y ahí buscamos la carpeta de la plantilla que estamos usando. Editamos el fichero index.php para añadir el nuevo usuario. 41 Primero buscamos donde está definida la posición del menú de cabecera, una vez encontrado colocamos a su lado nuestra nueva posición: 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 visualización de nuestro componente en la interfaz pública esté en el mismo sitio que el menú cabecera pero a la derecha, replicamos su código con los cambios oportunos: Y el resultado ya es el deseado, tal y como se aprecia en la Ilustración 38: Ilustración 38: Selección de idioma en la interfaz del portal (2) Siguiendo con los detalles de configuración del componente, le indicamos que el nivel de acceso sea público, para que cualquier usuario pueda cambar el idioma de la interfaz web. 48 Ilustración 46: Configuración de parámetros de un artículo 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 traducción. Podemos elegir cualquiera de las opciones que incluye la redacción de un artículo en castellano: publicar un párrafo introductorio seguido de un “Leer más” para acceder al artículo de contenido entero, añadir imágenes, seleccionar entre que rango de fechas queremos que el artículo 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 artículo publicado. Al guardar la página debemos obtener el mensaje de confirmación de la Ilustración 47: 49 Ilustración 47: Mensaje de confirmación del proceso de traducción Veamos ahora el resultado de la traducción en la interfaz del portal en las Ilustraciones 48 y 49. Portal en castellano: Ilustración 48: Interfaz del portal web en castellano Portal en inglés: 50 Ilustración 49: Interfaz del portal web en inglés Nuestro portal ya gestiona varios idiomas. 2. Componente Xmap (com_xmap). Una idea deseada por todos los desarrolladores web es que sus páginas es que esa página tenga un número de visitas elevado, pero para que la gente la visite primero deben de ser capaz de encontrarla. Para conseguir esto, sería interesante que Google nos indexase pero suele suceder que para una página nueva los bots de Google, Yahoo o cualquier otro buscador (robots que pasean por la web en busca de páginas para indexarlas en su buscador) tardan bastante en encontrarla, porque para eso deben “encontrar” un enlace a nuestro portal en otra página para pasar a revisarlo. Un modo sencillo de indicarle a los buscadores todas nuestras páginas del portal y acelerar esta búsqueda 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 artículos y secciones de la página, con su fecha de última actualización y otros parámetros opcionales. Un mapa de sitio, además de ayudarnos a que los robots de los buscadores nos indexen más fácilmente también servirá de ayuda a los usuarios del portal que estén 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 cómodos con él, mientras que con los robots indezadores debemos primar que les sea lo más fácil posible leer la información 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. 51 Xmap es un componente que realiza toda esa faena por nosotros. Este componente crea el mapa web usando la estructura de los menús de la página. Una vez instalado el siguiente paso es enlazarlo en nuestra web. Accedemos al gestor de menús, 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 configuración de la Ilustración 50: Ilustración 50: Configuración del enlace del mapa web Explicamos los parámetros del componente: - Título de la página: Texto a mostrar como título de la página. Si se deja en blanco, se usa el título del menú. - Mostrar el título de la página: permite elegir si mostrar el título de la página o no. - Menú de imágenes: 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 Ilustración 51: 52 Ilustración 51: Configuración del módulo Xmap. Pestaña Sitemaps En Agregar Menús hay un menú despegable con los menús de nuestro portal. Sirve para elegir que menús 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 estadísticas sobre el mapa web generado en HMTL y el mapa web generado en XML. En la pestaña CSS del portal Xmap, tenemos el código CSS que viene por defecto en el propio componente. Xmap nos permite modificar ese código para adaptarlo a nuestra web o desactivar su hoja de estilo y que automáticamente se aplique el estilo de nuestra web. Nosotros hemos optado por esta última opción, tal y como se ve en la Ilustración 52. 53 Ilustración 52: Configuración del módulo Xmap. Pestaña CSS En la tercera pestaña están las extensiones que están 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 parámetro '&lang=XX' al link del mapa. 54 Ilustración 53: Configuración del módulo Xmap. Pestaña Extensiones En la pestaña Sitemaps, en la esquina superior derecha hay un botón de Opciones, donde llegamos a las preferencias del sitio web: Ilustración 54: Opciones de configuración del módulo Xmap 55 En esta pantalla de la Ilustración 54 podemos elegir el número de columnas en las que queremos que se visualicen los enlaces, si queremos que aparezcan los nombres de los menús, si queremos que aparezca un enlace a la página 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 Ilustración 55: Ilustración 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 serán visibles al público y cuales no, sin que eso afecte a la publicación del documento al que enlaza, tal y como se ve en la Ilustración 56. 56 Ilustración 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 galería de imágenes. De entre todos los componentes que existen para Joomla! que gestionan imágenes 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 Ilustración 57: Ilustración 57: Gestor de plugins de Joomla! Ahora que ya está habilitado, accedemos a la configuración del componente desde Componentes -> MorpheoShow -> Configuración. Veremos que aparecen varias pestañas que engloban distintas funciones de la galería MorpheoShow, tal y como se ve en la Ilustración 58: 57 Ilustración 58: Configuración del componente MorpheoShow La primera pestaña contiene la configuración general del componente: - ID de Google Map: Si queremos que nuestro portal tenga un mapa de Google Maps, aquí debemos indicar el código de Google Maps. - Key ID de Flickr: Esta galería permite mostrar las imágenes que tengamos subidas en una cuenta Flickr, pero para ello es necesario proporcionar una clave de identificación. - ID de usuario Flickr: El ID del usuario Flickr de las fotos a desplegar. Si este parámetro no está informado, se mostrarán las fotos públicas. - Número máximo de imágenes permitidas: Número máximo de imágenes permitidas por galería. Por defecto son 51. - Tamaño máximo permitido: Tamaño máximo en bits que se permite subir. Por defecto vale 2000000. - Orden de las imágenes en la administración: Orden en el que se mostrarán las imágenes desde los listados de la administración. Podemos elegir entre ordenar por título, nombre del archivo, ID de la imagen o fecha, todas ellas ascendente o descendentemente. - Descripción de la galería: Dónde se mostrará la descripción de la galería. Solo permite elegir entre la parte superior y la inferior. - AJAX API de Google: Nos permite utilizar la librería Ajax del API de Google en lugar de las librerías de Ajax locales. La segunda pestaña configura la galería clásica (shadowbox): 64 etc. Nosotros nos decantamos por la vista clásica. En descripción abreviada y descripción completa hacemos una pequeña referencia de lo que contendrá la galería, por ejemplo “Galería de imágenes”. En los parámetros de la derecha se nos permiten diferentes configuraciones dependiendo del formato de galería seleccionado: - Configuración de la Galería Clásica: - Plantilla: Permite seleccionar una plantilla para la vista entre estilos fancybox y shadowbox, y dentro de cada estilo existen cuatro variantes según se desee ver la imagen con un marco visible o invisible, con título, etc. - Orden de las imágenes en la página: Permite elegir el orden en el que se visualizarán las imágenes. Por defecto aparece activado el orden aleatorio pero podemos seleccionar por título, nombre del archivo, identificación o fecha. - Columna: Indica el número de imágenes por columna. - Configuración de la rotación de la imagen: - Altura: Altura de la imagen en píxeles. Por defecto vale 400. - Ancho: Ancho de la imagen en píxeles. Por defecto vale 600. - Transición: 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 círculos), 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 imágenes en un orden aleatorio o prefijado. - Redimensión: Establece la proporción de una imagen reducida. Si indicamos “Sí” se reducirán proporcionalmente, sino se reducirán sin seguir ninguna proporción. 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 imágenes, en hexadecimal. Esta opción se permite por si deseamos que el fondo se confunda con el de nuestra página entre imágenes de diferentes tamaños. - Configuración básica del visor: - Altura: Altura de la imagen en píxeles. Por defecto vale 680. - Ancho: Ancho de la imagen en píxeles. Por defecto vale 650. - Configuración básica de la postal: - Altura: Altura de la imagen en píxeles. Por defecto vale 480. - Ancho: Ancho de la imagen en píxeles. Por defecto vale 640. - Configuración básica del visor: - Altura: Altura de la imagen en píxeles. Por defecto vale 680. - Ancho: Ancho de la imagen en píxeles. Por defecto vale 580. - Galerías Flickr: 65 - ID de usuario Flickr: Identificación del usuario de la cuenta Flickr de la que se quieren mostar las imágenes. - Colocar ID: mostrar un conjunto específico de fotos del usuario. - Texto: Campo de texto de búsqueda. Los resultados de la búsqueda solo devolverán las imágenes que contengan a la cadena de búsqueda en su título o en sus etiquetas. - Etiquetas: Lista de etiquetas separadas por comas. Se listarán las fotos con una o más etiquetas. - ID del grupo: Identificación del grupo donde se buscará - Revelancia: El orden en el que se mostrarán las imágenes. Por defecto se mostrarán en el orden en el que se subieron al portal Flickr. - Configuración de Picasa: - Usuario de Picasa: El nombre del usuario de la cuenta de Picasa. El sistema devolverá todos los albums e imágenes relacionados con este usuario. - Tamaño de la foto: establece el tamaño máximo de una foto en bytes. - Tamaño de la miniatura: establece el tamaño máximo de la miniatura, en bytes. - Columnas en la página principal: Número de columnas en miniatura para mostrarse en la página principal. - Columnas en el álbum: Número de columnas para cada página del álbum. - Cantidad máxima de fotos en el álbum: Cantidad máxima de fotos en cada hoja del álbum. - Cantidad máxima de albums en la página principal: Cantidad máxima de albums que se mostrarán en la página principal. - ID del álbum de Picasa: Identificación del álbum. - Fondo del álbum: Color en hexadecimal en el que se mostrará el fondo del álbum. - Altura: Altura de la imagen en píxeles. Por defecto vale 420. - Ancho: Ancho de la imagen en píxeles. Por defecto vale 500. Una vez hemos creado la galería, el siguiente paso es añadirle imágenes. En Componentes -> MorpheoShow -> Galleries podemos ver todas las galerías que hayamos creado, como podemos ver en la Ilustración 66: Ilustración 66: Listado de galerías creadas En el listado está la galería que acabamos de crear con un breve resumen: tipo de formato, descripción, etc. Entre las columnas del resumen hay tres botones que nos ayudan a gestionar la galería: 66 - Botón Subir ( ): Nos permite subir las imágenes a la galería asignándoles un título, una fecha, una descripción, un autor y/o un enlace a un sitio web desde una pantalla como la de la Ilustración 67. Ilustración 67: Subir una imagen a una galería - Botón Imágenes ( ): Es un acceso directo al directorio de imágenes de la galería. En él podemos ver las imágenes que hemos subido y sus parámetros, como vemos en la Ilustración 68. También nos permite modificar algún dato de la imagen o borrarla de la galería. Ilustración 68: Listado de imágenes subidas a una galería - Botón Opción de menú: Este botón nos permite elegir el tipo de menú donde queremos que se visualice en el front-end: topmenu, mainmenu o usermenu. Una vez añadidas las imágenes, procederemos a crear un enlace en nuestra página web a la galería de imágenes. Para ello vamos a Menús -> Menú principal y le damos a Nuevo, donde seleccionamos MorfeoShow como tipo de ítem del menú y llegamos a la pantalla de la iluestración 69: 67 Ilustración 69: Configuración del enlace web de una galería creada Como Título indicamos “Galería 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 público y guardamos la configuración. Ahora nuestra galería ya es visible desde el portal web, teniendo un aspecto como el de la Ilustración 70: 68 Ilustración 70: Interfaz de la galería de imágenes del portal web En el listado de galerías creadas del menú de MorpheoShow (Ilustración 66), hay una columna llamada ID del plugin, cuyo valor para nuestra galería es {morfeo 1}. Este valor sirve para integrar una galería en un artículo de contenido. Para ello nos vamos a un artículo de contenido y en la redacción del artículo añadimos el valor de la columna tal y como hacemos en la Ilustración 71: Ilustración 71: Integración de una galería de imágenes en un artículo de contenido El resultado es que al visualizar el artículo se han añadido las imágenes de la galería: 69 Ilustración 72: Visualización de un artículo de contenido con una galería de imágenes integrada Las imágenes en el artículo de contenido se comportan igual que en el enlace de la galería: si hubiésemos configurado la galería para que las imágenes se mostrasen una tras otra en lugar de mostrarse en un listado de miniaturas, en el artículo veríamos como cambian de una a otra. 70 6. EVALUACIÓN El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo. Entre estos estándares están el estándar de HTML y el de CSS. Es recomendable el uso de estándares para evitar que nuestra web se vea de modo diferente según el navegador que se esté usando, evitando tener que realizar especializaciones del código fuente para cada navegador. Para comprobarnos que nuestro portal cumple estos estándares, se validará en la web que W3C tiene para ello1. Como nuestro portal no está alojado en ningún servidor, al intentar validarlo mediante url nos aparece un error impidiéndonoslo: Ilustración 73: Error al buscar nuestro portal web La solución para validar el código es copiarlo y pegarlo en el cuadro de texto que aparece al pinchar en la pestaña “Validate by Direct Input”. Como resultado vemos que no tenemos ningún error grave aunque sí una advertencia, como se aprecia en la Ilustración 74: Ilustración 74: Validación del código HTML del portal web 1 http://validator.w3.org 71 Aunque nuestro código contenga un mensaje de aviso por parte de la web de W3C, la propia página nos indica que ha pasado la prueba de validación HTML: Ilustración 74: Mensaje de confirmación de la validación HTML Para validar las hojas de estilo procederemos del mismo modo pero desde la página de W3C para las validaciones CSS2: Ilustración 75: Validación del código CSS del portal web Tanto el código HTML como las hojas de estilo han pasado las validaciones de W3C, lo que nos asegura que nuestro código será interpretado correctamente desde cualquier navegador. 2 http://jigsaw.w3.org/css-validator/ 72 7. CONCLUSIÓN A lo largo de todo el desarrollo del proyecto he podido comprobar que lo difícil que es desarrollar un proyecto sin compañía de nadie. Son muchas horas las que hay que dedicarle a muchas tareas. A casi todas de ellas siempre viene bien una segunda opinión de alguien que también entienda sobre diseño o análisis. 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 documentación que se ha desarrollado en este proyecto, ya que todo es de una gran importancia para que funcione correctamente. También 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 número de pruebas al ser componentes terminados y probados. Como valoración final podría decir que gracias al desarrollo de este proyecto puedo mirar atrás cuando entré a realizar la carrera de informática, y ver la cantidad de información y de conocimientos que he adquirido de forma que me han permitido realizar este proyecto, así como la capacidad de aprender nuevas tecnologías desconocidas hasta el momento de empezar el proyecto de final de carrera, como el gestor de contenidos Joomla!. 73 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: • Página oficial de Joomla!: http://www.joomla.org/ • Página oficial de Joomla! en español: http://www.joomlaspanish.org • Web de extensiones de Joomla!: http://extensions.joomla.org/ • Centro de Ayuda y Documentación de Joomla! Spanish: http://ayuda.joomlaspanish.org/ • Wikipedia en español: http://es.wikipedia.org/ • Página oficial de W3C: http://w3c.org/ • Página de validación HTML: http://validator.w3.org/ • Página oficial del componente JoomFish!: http://www.joomfish.net/ • Página oficial del componente MorpheoShow: http://morfeoshow.joomlaitalia.com/ • Página oficial del componente Xmap: http://joomla.vargas.co.cr/