Gestión web del deporte PLAYSPORT. Memoria

Transcripción

1 ENGINYERIA TÈCNICA EN TELECOMUNICACIONS: ESP. TELEMÀTICA Gestión web del deporte PLAYSPORT Memoria MIGUEL PADILLA GUTIÉRREZ PONENTE: JOSEP MARIA GABRIEL SOLANILLA PRIMAVERA 2011

2

3 Dedicatoria El presente proyecto va dedicado a mi familia, a mi pareja y a mis amigos por las muchas negativas que han tenido que escuchar cuando pedían algo de mi tiempo.

4

5 Agradecimientos Quiero agradecer este proyecto a mis compañeros por darme ánimos cuando lo he necesitado, a mi ponente por prestarme su confianza y a aquellos profesores que más difícil me lo han puesto porqué ellos han hecho que saque lo mejor de mí.

6

7 Resum En el present projecte es pretén aportar una solució a una necessitat. La necessitat, practicar esport en qualsevol moment i oferir gestió a instal lacions esportives. La solució, facilitar als usuaris una xarxa social on poder conèixer gent amb els mateixos interessos, facilitant la pràctica de l'esport a través de la comunitat i la gestió de competicions esportives per als propietaris. Per a això el procés ha estat llarg. La pàgina Web ha estat creada amb el gestor de continguts CMS Joomla. Una eina molt potent però que com tota eina, requereix superar diverses fases. El resultat final obtingut és satisfactori atès que s'han obtingut bons coneixements sobre l'eina de treball i s'ha pogut generar amb ella l'aplicació que cobreix la necessitat. Resumen En el presente proyecto se pretende aportar una solución a una necesidad. La necesidad, practicar deporte en cualquier momento y ofrecer gestión a instalaciones deportivas. La solución, facilitar a los usuarios una red social donde poder conocer gente con los mismos intereses, facilitando la práctica del deporte a través de la comunidad y la gestión de competiciones deportivas a los propietarios. Para ello el proceso ha sido largo. La página Web ha sido creada con el gestor de contenidos CMS Joomla. Una herramienta muy potente pero que como toda herramienta, requiere superar diversas fases. El resultado final obtenido es satisfactorio dado que se han obtenido buenos conocimientos sobre la herramienta de trabajo y se ha podido generar con ella la aplicación que cubre la necesidad. Abstract In this project is pretended to provide a solution for a need. The need, sports at any time and offer sports installations management. The solution, providing users a network where you can meet people with similar interests making easy the sport throughout the community and competitions sport management to the owners. For this, the process has been long. The website has been created with the CMS Joomla. A very powerful tool but like any tool, requires overcoming several phases. The final result is satisfactory since it has had good knowledge of the working tool and it has been generated with the application that covers the need.

8

9 I Índice. Índice.... I Índice de figuras.... V Índice de tablas.... IX 1. Objetivos Propósito Finalidad Objeto Alcance Antecedentes Situación antes de comenzar el proyecto Especificaciones del proyecto Planificación Tecnologías existentes Adobe Fireworks Dreamweaver Drupal Artisteer Justificación de la solución propuesta en el proyecto Pruebas con la herramienta de trabajo elegida Pruebas en el proceso de aprendizaje Descripción herramientas de trabajo elegidas

10 II Xampp Joomla Extensiones Joomla Herramientas complementarias Firefox. Extensión Firebug Dreamweaver Solución implementada Diseño Creación de la web con Joomla Instalación Xampp Instalación y configuración Joomla Instalación y configuración Jomsocial Instalación y configuración Jforms Instalación y configuración RSform Instalación y configuración Joomsport Instalación y configuración FrontPage SlideShow Instalación y configuración Akeeba Backup Instalación y configuración módulos Firebug y Dreamweaver en el proceso de creación Manuales Manual de creación de la Web Manual de uso de la Web Pruebas Prueba funcionamiento del registro en la comunidad Playsport

11 III 6.2. Prueba funcionamiento formulario de inscripción Prueba funcionamiento formulario de contacto Prueba funcionamiento creación de eventos deportivos Estudio económico Coste del material Coste Hardware Coste Software Coste de recursos humanos Amortización equipo y software Costes directos fijos Costes indirectos Presupuesto creación de la web Conclusiones Conclusión objetiva Conclusión subjetiva Posibles mejoras Referencias Referencias aplicaciones Referencias información

12 IV

13 V Índice de figuras. Fig Diagrama de Gantt Fig Gráfico búsquedas sobre los términos Joomla y Drupal Fig Gráfico sobre el interés en los Websites joomla.org y drupal.org Fig Gráfico búsquedas con los términos download joomla y download drupal Fig Aspecto de Artisteer al iniciar el programa Fig Aspecto de Artisteer al hacer clic sobre sugerir diseño Fig Posiciones del template preestablecidas por Artisteer Fig Gráfico sobre el aumento de búsquedas del término Joomla en su primer año Fig Gráfico sobre el aumento de búsquedas del término Joomla hasta la fecha actual Fig Código del core de Joomla donde se ha añadido el campo apellidos Fig Nuevo campo apellidos añadido al front-end Fig Copia del campo nombre para mostrar como apellidos en el back-end Fig Nuevo campo apellidos en el back-end Fig Logotipo de Joomla Fig Estructura de decisión de la comunidad Joomla Fig Aspecto de la extensión Jomsocial Fig Aspecto template gk_icki_sports Fig Compatibilidad de Joomla durante la instalación Fig Datos de la base de datos que va a ir relacionada con Joomla Fig Configuración por defecto del correo de administración Fig Posicionamiento módulos template gk_icki_sports Fig Enlace Jomsocial en el Menú principal

14 VI Fig Parámetros de configuración de Jomsocial Fig Configuración de la privacidad en Jomsocial Fig Información del usuario sin traducir Fig Modificación de código Css para corregir el error en el inicio de sesión de Jomsocial Fig Modificación de código Css para corregir el error en los eventos de Jomsocial Fig Tabla jos_community fields de la base de datos que se va a modificar Fig Configurar el nuevo campo Usuario Fig Campo usuario creado en la segunda página del registro Fig Configurar el campo usuario Fig Configurar el nuevo campo Deportes favoritos Fig Editar el campo creado Deportes favoritos Fig Configuración del módulo JUJSevents Fig Configuración del componente JForms Fig Formulario de contacto en el menú principal Fig Pantalla inicial de creación de formulario con el componente JForms Fig Aspecto final del formulario con JForms Fig Centrado del formulario de contacto Fig Configuración formulario RSform Fig Imagen pantalla creación formulario RSform Fig Formulario inscripción torneo futbol Fig User Fig Admin Fig Menú inscripción torneo futbol Fig Parámetros temporada torneo futbol

15 VII Fig Parámetros tabla de clasificación torneo futbol Fig Posiciones jugadores Fig Configuración de la categoría creada con el componente FrontPage SlideShow Fig Configurar el contenido que se va a mostrar en la galería de imágenes Fig Código a modificar para descentrar el módulo FrontPage slideshow Fig Parámetros a configurar en el módulo FrontPage Slideshow Fig Ruta donde va a realizar las copias de seguridad el componente Akeeba Backup Fig Vetado de módulos por parte del componente Akeeba Backup Fig Interfaz del componente Akeeba Backup al realizar una restauración Fig Relación de la base de datos al realizar una restauración con Akeeba Backup Fig Opción remove the installation directory Fig Resultado de la restauración de la web mediante Akeeba backup Fig Menú tus datos Fig Menú Amigos Fig Menú Grupos Fig Menú fotos Fig Menú videos Fig Menú eventos deportivos Fig Botones barra de navegación Fig Funcionalidades típicas red social Fig Gestión de torneos Fig Formulario de inscripción Fig Clasificación torneo simulado Fig Fechas y resultados torneo

16 VIII Fig Registro usuario comunidad Fig Términos y condiciones Fig s de registro en la comunidad Fig para el administrador registro comunidad Fig Usuarios Jomsocial Fig Aviso de campos por completar Fig Confirmación mensaje enviado Fig enviado al usuario Fig enviado al administrador Fig Envío de formulario de contacto Fig s del formulario de contacto Fig para el administrador del formulario de contacto Fig Muestra de evento creado

17 IX Índice de tablas. Tabla 2.1. Planificación de tareas... 8 Tabla 2.2. Desglose primera tarea resumen... 8 Tabla 2.3. Desglose segunda tarea resumen... 9 Tabla 3.1. Simbología de las extensiones Joomla Tabla 7.1. Coste Hardware Tabla 7.2. Coste Software Tabla 7.3. Coste de recursos humanos Tabla 7.4. Amortización equipo y software Tabla 7.5. Presupuesto creación de la Web

18

19 Objetivos 1 1. Objetivos Propósito. El propósito de este trabajo es afrontar el desarrollo de una idea intentando superar las propias limitaciones para, poder ofrecer una solución a las necesidades detectadas. La idea se estructura en tres ámbitos, el deportivo, las redes sociales y la tecnología web. En el desarrollo de este proyecto se podrá ver el paso por las diferentes fases que se han llevado a cabo para poder implementar una red social dedicada al deporte en un entorno web, y el soporte que se ofrece al propietario de instalaciones desde este mismo entorno Finalidad. Conocer y documentar la herramienta de trabajo escogida, Joomla, para el desarrollo de la web. Crear una red social para los usuarios en la cual puedan concertar reuniones para practicar deporte con cualquier persona y en cualquier lugar mediante la creación de eventos deportivos altamente configurables. La finalidad de esta red social es solucionar el problema que tiene mucha gente a la hora de practicar deporte ya que no quiere practicarlo a solas o no consigue reunir a la gente necesaria para poder llevarlo a cabo. Ofrecer a los propietarios de instalaciones un medio por el cual publicitar sus torneos. Facilitar la gestión de torneos esporádicos a propietarios de instalaciones permitiendo a los usuarios inscribirse en los mismos a través de la web. Permitir a los usuarios consultar la clasificación y calendario de sus equipos a través de la web.

20 2 Playsport, gestión Web del deporte- Memoria 1.3. Objeto. Establecer una red social fácil e intuitiva para gestionar fácilmente la pasión por el deporte permitiendo el contacto con los miembros de una comunidad con los mismos intereses y facilitando la práctica del deporte en conjunto. Para ello el proyecto pretende ofrecer a los usuarios de la web una red social totalmente gratuita facilitándoles el contacto con otros usuarios que tendrían los mismos intereses que ellos creando de esta manera una comunidad focalizada en unos intereses comunes como son los deportes. Esta misma red social permitirá a los propietarios publicitar sus instalaciones e interactuar de manera más directa con la comunidad facilitándoles además la publicidad y gestión de torneos deportivos. Por tanto, el trabajo pretende cubrir de forma genérica las siguientes necesidades: - Permitir a los usuarios el acceso a una red social pudiendo gestionar fácilmente su perfil. - Permitir a la comunidad el acceso a los eventos deportivos que se vayan creando. - Facilitar la práctica el deporte de una manera rápida, sencilla y atractiva. - Ofrecer la posibilidad de conocer gente nueva y formar grupos con intereses comunes. - Permitir a los propietarios la posibilidad de formar parte de la red social. - Ofrecer a los propietarios la posibilidad de publicitar sus torneos. - Dar soporte de gestión de los torneos a los propietarios. La web pretende ofrecer un servicio global a las comunidades de deportistas que por lo general han de gestionar de manera individual la práctica de deporte, ofreciendo un acceso sencillo a la red social y permitiendo que sean ellos mismos quienes elijan donde, cuando y con quien quieren practicar su deporte. También pretende facilitar a los usuarios propietarios la gestión de sus torneos deportivos permitiendo publicitar los mismos en una comunidad más focalizada.

21 Objetivos Alcance. Los servicios ofrecidos por la Web creada se centran en el ámbito deportivo abarcando inicialmente multitud de deportes. El proyecto comprende: - Desarrollo conceptual de la herramienta. - Diseño con detalle previo a la creación del mismo - Estudio de las diferentes herramientas disponibles para llevar a cabo el proyecto - Elección de la herramienta a utilizar y pruebas de las posibilidades de esta. - Inicio de codificación de la idea. - Finalización de la codificación y pruebas de funcionalidad. Y pretende: - Ofrecer un servicio sencillo, visual y funcional. - Satisfacer las necesidades de los usuarios que no pretenden pertenecer a una competición deportiva al uso con los inconvenientes económicos y de disponibilidad que estas presentan. - Cubrir parte de las necesidades de publicidad y gestión de las instalaciones deportivas. Por tanto no se pretende establecer una competición llena de normas. Tan sólo las mínimas necesarias para poder practicar un deporte con los principios básicos amateur que tiene todo deporte: Competir de manera amistosa y desarrollar con facilidad un deporte a modo de hobbie.

22 4 Playsport, gestión Web del deporte- Memoria

23 Antecedentes 5 2. Antecedentes Situación antes de comenzar el proyecto. La solución Web planteada en este proyecto surge de la detección de una necesidad dentro de una comunidad aficionada a la práctica del deporte. Por lo general la posibilidad de practicar un deporte, individual o en equipo, recae sobre una sola persona. Si el deporte es individual hay que afrontar además obstáculos como practicarlo a solas o no conseguir la participación de personas conocidas con los mismos intereses. En el caso de que sea un deporte en equipo por lo general una o dos personas se responsabilizan de localizar las instalaciones adecuadas, realizar la reserva de las mismas y de reunir al grupo necesario para poder llevar a la práctica el deporte. La Web presentada como solución plantea resolver estos obstáculos facilitando a los usuarios integrarse en una comunidad con los mismos intereses por la práctica del deporte. Esta web les permite registrarse en una comunidad y conocer gente con los mismos intereses además de crear eventos deportivos específicos para así poder conocer gente interesada en el mismo deporte. También permite al usuario unirse a eventos deportivos ya creados. En cuanto a redes sociales específicas para el deporte se pueden encontrar varias antes de la creación de PLAYSPORT. La red social deportiva Bkool es un ejemplo de ellas pero está especializada solo en ciclismo. Cuenta con una comunidad de 2500 usuarios y se lanzó a inicios de Además, a pesar de ser gratuita requiere que los usuarios dispongan de algún dispositivo para digitalizar su actividad física. Otro de los ejemplos es Footbo especializada en el futbol internacional. Cuenta con usuarios y está orientada a la discusión sobre futbol permitiendo también a los usuarios amateur contactar para organizar ligas o compartir información.

24 6 Playsport, gestión Web del deporte- Memoria También existe otra red social deportiva llamada My best play. Cuenta con usuarios y se lanzó en el año Está especializada en fútbol, baloncesto, voleibol, futbol sala y rugby y está muy orientada a promocionar al futbolista amateur hacia el fútbol profesional. La red social deportiva Strands está especializada en atletismo y footing y orientada a publicar datos de sesiones de entrenamiento y hábitos saludables. Por tanto, qué diferencia la comunidad PLAYSPORT de estas otras redes sociales deportivas ya existentes? La comunidad PLAYSPORT tiene el objetivo de motivar más la práctica del deporte en modo totalmente amateur. No pretende establecer ni ligas, ni competiciones, ni medidas del ejercicio físico, tan solo facilitar a los usuarios establecer contacto para así poder quedar y realizar la práctica del deporte elegido. Además el número de deportes ofrecidos es mucho más elevado que el de estas redes sociales. En este momento existen 25 deportes disponibles en Playsport e incluso se consulta a los usuarios mediante encuestas que nuevos deportes se deberían añadir Especificaciones del proyecto. En el ámbito de las redes sociales deportivas existen pocas opciones que abarquen un gran número de deportes. Además éstas están muy orientadas a conceptos específicos y no refuerzan la relación entre los usuarios de la misma. Es por esto que la Web Playsport creada con Joomla deberá cumplir con las siguientes especificaciones. - El usuario podrá formar parte de una comunidad con intereses comunes pero esta misma comunidad no vetará aquellos usuarios que no compartan esta afición. - Existirán 2 tipos de usuario dentro de la comunidad. Los usuarios comunes y los propietarios de instalaciones deportivas que del mismo que un usuario común podrán crear su perfil para publicitar sus instalaciones dentro de una comunidad específica para el deporte.

25 Antecedentes 7 - Dentro de la comunidad el usuario común también podrá crear eventos deportivos, (siempre que estos formen parte de las categorías a elegir) y sin límite permitiendo así la práctica de deporte en común. Estos eventos se podrán llevar a cabo en la localización que establezca el creador ya sea un lugar público o privado. Se mostrará información muy diversa como el número de participantes, invitaciones, descripción, hora y posicionamiento con GoogleMaps para la localización del evento. - El usuario tipo propietario podrá contactar con la administración de la web para publicitar torneos esporádicos. - Desde la Web se facilitará el proceso de inscripción a estos torneos permitiendo inscribirse solo a usuarios ya registrados en la comunidad. También se ofrece la gestión del torneo a los propietarios para que los participantes puedan consultar información del tipo clasificación, resultados o fechas de encuentros. Esta gestión se llevará a cabo por parte de la administración manteniendo siempre contacto con el propietario. - Se pulsará la opinión de los usuarios para añadir nuevos deportes a las categorías ya ofrecidas. - Se publicitarán distintos conceptos en la página principal con el fin de motivar la participación. Con esta idea aparecerán eventos activos del día, los cuales se podrán consultar para recibir información más detallada. Por tanto con estas especificaciones se pretenden cubrir la necesidad detectada y aportar soluciones tanto para el usuario común como para el usuario propietario Planificación. Para la planificación de este trabajo se ha utilizado la herramienta Microsoft Project Se ha creado un calendario acorde con los intervalos de tiempo de trabajo para cada tarea y las horas invertidas dentro de cada uno de estos intervalos. También se tiene en cuenta las tareas predecesoras siguiendo un orden por etapas. Al finalizar cada una de las etapas se puede continuar en la siguiente. También se han agrupado algunas de las tareas en una sola a modo de resumen para mejorar la calidad visual del diagrama de Gantt.

26 8 Playsport, gestión Web del deporte- Memoria Se han asignado los recursos necesarios para el desarrollo de las tareas contando en todas ellas con el Project Manager como recurso de trabajo y algunas extensiones de software como recursos materiales específicos para una tarea en concreto. Gracias a esta planificación se puede obtener estadísticas y un presupuesto de los costes directos que implica la realización de este trabajo. En la Fig. 2.1 se puede observar una tabla con la planificación de tareas. En las siguientes imágenes, Fig. 2.2 y 2.3 se puede observar el desglose de las tareas resumen y por último en la Fig se puede observar el diagrama de Gantt del trabajo final de carrera. Tabla 2.1. Planificación de tareas Tabla 2.2. Desglose primera tarea resumen

27 Antecedentes 9 Tabla 2.3. Desglose segunda tarea resumen Fig Diagrama de Gantt.

28 10 Playsport, gestión Web del deporte- Memoria

29 Tecnologías existentes Tecnologías existentes. En el momento de tomar la decisión de crear una web con el objetivo de cubrir unas necesidades se han tenido en cuenta diversos tipos de software antes de la elección final. Alguno de estos programas han continuado activos durante el proceso de creación del proyecto y otros fueron simplemente descartados. En este capítulo se va a tratar de explicar las cualidades y desventajas de cada uno de ellos Adobe Fireworks. Se trata de una aplicación que permite ofrecer un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario como para la creación y optimización de imágenes para la web. Con esta aplicación se pueden crear desde menús emergentes a rollovers, botones y permite trabajar sobre un tapiz con medidas estándar para la web tanto en PC, como móvil. Permite la integración con Adobe Flash y Dreamweaver y es posible separar nuestra página web en diferentes mapas de bits que al exportar a Dreamweaver se convierte fácilmente en capas o tablas. Por qué se descartó la opción de utilizar Fireworks? Fireworks es una potente herramienta a la hora de desarrollar el diseño o funciones simples de la página web pero cuando se exporta la página creada a Dreamweaver no acaba de hacerlo bien. Todas las partes de la pagina pierden interactividad a no ser que sea algún punto en concreto señalado. Las barras laterales, fondo, encabezado pasan a ser simples imágenes dentro de cada una de las capas en las que se halla dividido el diseño. Esto impide trabajar a fondo la página en Dreamweaver y el trabajo puede llegar a ser muy tedioso. Por tanto, es adecuado usar Fireworks si tan solo se quiere un diseño bonito pero sin mucha funcionalidad dado que es casi imposible trabajar esta funcionalidad desde Dreamweaver.

30 12 Playsport, gestión Web del deporte- Memoria 3.2. Dreamweaver. Sin duda un gran programa para la edición web. Es posible crear una página muy potente con buenos conocimientos técnicos Web desde Dreamweaver ya que soporta multitud de lenguajes y permite implementar multitud de funciones a la web. Además de las incluidas siempre puedes programar las que necesites. Por qué se descartó la opción de utilizar Dreamweaver? Sin duda Dreamweaver es un gran programa pero una vez se han tenido algunos conocimientos de Joomla se ha considerado más adecuado utilizarlo para la edición de código que no para la creación en sí. Además Dreamweaver aún va unos pasos atrás en cuanto al diseño, algo en lo que si ganan programas como Photoshop o Fireworks y ya sin hablar de Artisteer Drupal. Drupal, al igual que Joomla es un gestor de contenidos. Es altamente configurable y permite publicar artículos, imágenes, archivos e incluso servicios añadidos como foros, encuestas, votaciones, blogs, administración de usuarios, permisos, etc. Al igual que Joomla trabaja sobre la base de datos y se puede trabajar en él desde el explorador Web. También es un programa libre y mantenido por una activa comunidad de usuarios. Por qué no se ha elegido Drupal? Drupal es una gran herramienta al igual que Joomla pero cuando se comienza a trabajar sobre un software del cual no se tiene mucha información es mejor guiarse por el soporte que puede llegar a dar la comunidad. En el siguiente gráfico, Fig. 3.1, obtenido gracias a la herramienta Google Trends se muestra como Joomla supera ampliamente a Drupal en búsquedas en la red. Por tanto, se descarta la opción dado que es probable que se consiga mucho más soporte por parte de la comunidad para Joomla que para Drupal.

31 Tecnologías existentes 13 Fig Gráfico búsquedas sobre los términos Joomla y Drupal. Si se realiza la misma consulta sobre interés en cada una de las Webs oficiales, Joomla también obtiene ventaja sobre Drupal. Fig Gráfico sobre el interés en los Websites joomla.org y drupal.org. Además si se realiza una comparación de interés de los términos download Joomla y download Drupal con Google Insights se observa en la Fig. 3.3 de nuevo la ventaja de Joomla sobre Drupal.

32 14 Playsport, gestión Web del deporte- Memoria Fig Gráfico búsquedas con los términos download joomla y download drupal Artisteer. Para cambiar el aspecto estético de una página generada con Joomla tenemos 3 opciones. - Crear la plantilla desde cero con XHTML y CSS. - Utilizar plantillas gratuitas o de pago. - Utilizar un generador de plantillas como Artisteer. Qué tiene de bueno Artisteer? Su aspecto es totalmente sencillo, incluso parecido al Word lo cual anima mucho a trabajar con él pero no es esa una de sus mayores ventajas. Permite generar plantillas tanto para Joomla como para Wordpress, Drupal, aplicaciones.net y sitios web estáticos sin la necesidad de tener conocimientos técnicos sobre XHTML y CSS. En la siguiente imagen, Fig se muestra el aspecto de Artisteer al arrancar el programa.

33 Tecnologías existentes 15 Fig Aspecto de Artisteer al iniciar el programa. Con una sola pulsación sobre sugerir diseño permite crear un diseño totalmente nuevo y diferente en el que cambian todos los estilos e incluso la distribución. Se puede apreciar en la siguiente imagen, Fig Fig Aspecto de Artisteer al hacer clic sobre sugerir diseño. Se puede hacer clic sobre sugerir diseño hasta el infinito para coger ideas pero además permite sugerir ideas en cada uno de sus apartados permitiendo así personalizar el diseño.

34 16 Playsport, gestión Web del deporte- Memoria Se puede modificar desde el encabezado hasta el ancho de página, menús laterales, quitarlos, ponerlos, cambiar las fotografías, añadir nuevas, botones, estilo de letra, etc. Además en cada una de sus pestañas también permite sugerir ideas a nivel individual, solo para los botones, solo para los menús, etc. Artisteer es un programa de pago y su precio es de euros pero tiene la ventaja de que se puede llegar a generar un número ilimitado de plantillas para varias plataformas siendo al final el ahorro considerable. Por qué no se ha elegido Artisteer para el diseño de la Web? Un software como Artisteer tiene, básicamente, 3 inconvenientes. En función de las necesidades que se presenten estos pueden no ser un problema pero para el presente proyecto así se han considerado. El primero de ellos es obvio y es que se trata de un software de pago. Otro de los problemas es la lentitud con la que trabaja el programa. Si se van a realizar muchas pruebas estos puede ser un problema. El tercero y más importante es que Artisteer genera unos módulos posicionales por defecto para cualquier plantilla que se cree. Esto limita mucho los movimientos a la hora de crear la Web dado que sólo existe la opción de posicionar los módulos con la distribución que ofrece Artisteer. En la siguiente imagen, Fig se puede apreciar el posicionamiento que ofrece la aplicación al crear un template.

35 Tecnologías existentes 17 Fig Posiciones del template preestablecidas por Artisteer Justificación de la solución propuesta en el proyecto. Para ver más claro el motivo de la solución propuesta se ha de conocer la necesidad. Cuál es la necesidad que se pretende solucionar con este proyecto? En muchas ocasiones se quiere practicar deporte pero existen varios problemas para poder realizarlo. No apetece hacerlo solo, es en equipo y no es posible reunir a los suficientes compañeros, la responsabilidad recae siempre sobre el mismo. Este proyecto propone la creación de una página web que se responsabilice en parte de estas necesidades y partir de aquí surge una nueva necesidad. Qué software va a ser el utilizado para la creación de la web? La opción elegida es crear una web que cubra estas necesidades con un gestor de contenidos. Se ha seleccionado Joomla atendiendo a diversos criterios y prestando atención a cada uno de ellos. - Qué conocimientos se tienen sobre Joomla? - Si no se tienen conocimientos, se pueden adquirir con trabajo y esfuerzo? - Qué impacto tiene en la red Joomla?

36 18 Playsport, gestión Web del deporte- Memoria - Existe una comunidad activa que le da soporte? - El nivel de los foros sobre Joomla es óptimo? - Qué cantidad de extensiones están disponibles para Joomla? En las siguientes líneas se va a tratar de responder a cada una de estas preguntas para justificar la elección de Joomla como la herramienta que de la solución al proyecto. - Conocimiento sobre Joomla: En primera instancia los conocimientos sobre Joomla son nulos, pero en la comparación con otros software de desarrollo y edición web, todos están a la par y esto hace que la respuesta se encuentre en la siguiente pregunta. - Capacidad de adquirir conocimiento sobre Joomla: La capacidad existe, solo se requiere trabajo y dedicación. El número de búsquedas en Google sobre Joomla para la realización de este proyecto supera con creces las 100. Existen conceptos muy específicos que necesitan las búsquedas adecuadas pero a medida que el trabajo es mayor, los conocimientos crecen de manera exponencial. Es una herramienta muy potente de la cual se puede extraer mucho jugo. - Impacto de Joomla en la red: Desde su nacimiento en agosto de 2005 el crecimiento de Joomla ha sido muy alto. En la siguiente gráfica, Fig se puede observar el impacto de Joomla en la red en su primer año de lanzamiento. Fig Gráfico sobre el aumento de búsquedas del término Joomla en su primer año.

37 Tecnologías existentes 19 Y desde la fecha de su lanzamiento hasta abril de 2011 se puede observar en la siguiente imagen, Fig cómo este impacto sigue siendo muy elevado teniendo su máxima influencia entre los años 2009 y Fig Gráfico sobre el aumento de búsquedas del término Joomla hasta la fecha actual. Por tanto se concluye que el impacto de Joomla sobre la red es elevado desde su lanzamiento. - Comunidad activa Joomla: Cuando se realiza una búsqueda en Google con los términos foros joomla el número de resultados es de Además la comunidad se muestra muy activa y con solo entrar en alguno de los resultados de esta búsqueda se puede observar publicaciones del mismo día. - Nivel de foros óptimo: Es posible observar en foros como un nivel de calidad en las respuestas muy alto. Desde lo más técnico a lo más sencillo con solo buscar de la manera adecuada es fácil encontrar la respuesta. Sirva como ejemplo que en el foro general existen más de posts. - Cantidad de extensiones para Joomla: A día 9 de mayo del 2011 existen 7508 extensiones disponibles para Joomla en la página oficial Si se observa tiempo después la misma página, con fecha 11 de Junio de 2011 se comprueba que el número de extensiones es de Con esta simple comprobación se concluye que en un periodo de un mes y dos días la comunidad ha creado 128 extensiones más disponibles para su uso.

38 20 Playsport, gestión Web del deporte- Memoria Por tanto, después de observar todos estos datos se tiene suficiente información como para justificar que el software utilizado para la realización de este proyecto sea Joomla. La web creada Playsport, ofrece una red social que permite establecer contacto entre personas con los mismos intereses y ofrece la posibilidad de que estos queden en cualquier lugar y en cualquier momento para practicar el deporte que más les atraiga. Permite crear grupos, publicar fotos, videos y hacer nuevas amistades por medio del deporte ya que éste es uno de los objetivos de esta red social. Además permite a los usuarios inscribirse en torneos esporádicos creados por usuarios propietarios y consultar las fechas de encuentros, resultados o clasificación del mismo Pruebas con la herramienta de trabajo elegida Pruebas en el proceso de aprendizaje. Son muchas las pruebas que se han realizado con la herramienta Joomla. A continuación se detalla cómo ha sido el proceso de aprendizaje con esta herramienta. En primer lugar para poder trabajar con Joomla en local, es necesario tener instalado un servidor web con Apache y MySQL. Al utilizar Xampp o las últimas versiones de estos server packs, como Wampp, se encuentra problemas al instalar las versiones 1.5.x de Joomla. Esto es debido a que estos servidores web están continuamente actualizados en cuanto aparece una nueva versión de PHP. Las últimas versiones de PHP como la dan muchos problemas con las versiones 1.5.x de Joomla. Lo más adecuado es escoger una versión anterior de estos servidores para evitar el problema de incompatibilidad. En la versión 1.6 de Joomla ya no existe este problema con las últimas versiones de Xampp. Una vez se ha conseguido realizar la primera instalación correcta de Joomla lo más habitual es instalar también los ejemplos, generándose una página llena de módulos y artículos activos que, en realidad, hacen más difícil entender el funcionamiento de la página porqué realmente no se sabe que es lo que se puede quitar y lo que no. Después de

39 Tecnologías existentes 21 varias pruebas de instalaciones con ejemplos se ha decidido realizar instalaciones sin ejemplos. De esta manera solo se activa lo que se desea. Otra de las pruebas que se considera interesante resaltar a pesar de que existen extensiones que permiten realizar la misma función es la modificación de la página de registro de usuarios que viene por defecto. Resulta interesante llegar a modificar esta página de registro con Joomla dado que ayuda a comprender la manera en la que trabaja. Para modificarla hay que seguir unos sencillos pasos y se pueden diferenciar claramente 2 partes en el proceso. Parte 1: 1º. Se ha de crear un nuevo campo en la tabla jos_users de la base de datos que esté enlazada con Joomla. 2º. Abrir el documento user.php con Dreamweaver. Se encuentra en la ruta: C:\xampp\htdocs\joomla\libraries\joomla\database\table\user.php 3º Donde está declarada la clase JTableuser se han de añadir los nuevos campos que se quieren mostrar en el formulario. 4º. Lo más sencillo es copiar y pegar un campo existente y posteriormente cambiar el nombre. Lo siguiente es, dentro del mismo archivo más abajo validar el nuevo campo que se ha introducido. Del mismo modo que con el anterior, se copia un campo de validación ya existente y se modifica en función del nuevo campo que se está creando. Como se puede ver en la siguiente imagen, Fig se ha añadido el campo apellidos.

40 22 Playsport, gestión Web del deporte- Memoria Fig Código del core de Joomla donde se ha añadido el campo apellidos. Lo siguiente es hacer que el nuevo campo que se ha añadido aparezca en el front-end. En la ruta: C:\xampp\htdocs\joomla\components\com_user\views\register\tmpl se encuentra el archivo a modificar. Se copia y se pega el <tr> completo del name y se modifica para que ahora sea el de apellidos. En la copia que se realiza se ha de substituir el término name por apellidos. Al actualizar la página de registro se puede ver como ahora aparece el nuevo campo que se ha creado. En la siguiente imagen, Fig se puede observar el cambio. Fig Nuevo campo apellidos añadido al front-end.

41 Tecnologías existentes 23 Parte 2: Modificar la información del usuario en el back-end Ya se ha modificado la información de registro en el front-end pero en el Gestor de usuarios del back-end no se puede ver la información que se ha añadido. Para el usuario ya está disponible pero no para el administrador. Para ello se han de modificar algunos parámetros en 2 archivos: El primero se encuentra en: \administrator\components\com_users\views\user\tmpl\form.php Igual que en el caso anterior, se busca donde está situado el campo nombre, se copia su <tr>, se pega y se substituye name por apellidos en la copia. En la siguiente imagen, Fig se puede observar el procedimiento. Fig Copia del campo nombre para mostrar como apellidos en el back-end. El segundo archivo a modificar se encuentra en la ruta: \administrator\components\com_- users\views\users\tmpl\default.php En este nuevo archivo se sigue el mismo proceso. Se busca la celda de nombre, se copia y se pega y se substituye name por apellidos en la copia.

42 24 Playsport, gestión Web del deporte- Memoria A la celda de apellidos th se le añade un width mayor: 20%. Posteriormente más abajo, en la línea 100 del mismo documento se ha de seguir el mismo procedimiento. Copiar name y pegar, substituir name por apellidos. Por último se puede comprobar como ahora en el gestor de usuarios aparece el campo apellidos y si se pulsa sobre editar usuario aparece de igual forma el campo apellidos. Fig Nuevo campo apellidos en el back-end. Esta prueba resulta muy interesante para comprender que partes se han de modificar si se quiere tocar el core de Joomla. En primer lugar debe haber un lugar en nuestra base de datos donde se almacene la nueva información. En segundo lugar modificar los archivos necesarios para que esta nueva información aparezca en el front-end y en tercer lugar modificar los archivos necesarios para que esta información aparezca en el back-end disponible para el administrador. Algunas de las pruebas que se han realizado se basan en las extensiones. Siempre que se quiera diseñar una web con un CMS como Joomla por primera vez el número de extensiones que se prueben ha de ser elevado dado que solo así se adquiere conocimiento sobre las mismas y se sabe mejor que elegir. Una de las extensiones más conocidas y con la cual se realizaron muchas pruebas es Community Builder. Esta extensión permite modificar fácilmente el registro del usuario, su perfil e incluso asignar más o menos permisos de acceso. Es una de las extensiones más completas de Joomla, gratuita y con un elevado número de extensiones específicas para ella. Sin embargo tiene un problema. El diseño de esta extensión es bastante pobre y las variantes que ofrece en cuanto a red social es limitada. A pesar de que nos permite un alto nivel de gestión de usuarios la interactuación entre ellos está bastante limitada y además el diseño que ofrece al usuario deja bastante que desear.

43 Tecnologías existentes 25 Por este motivo después de muchas pruebas y al probar a posteriori Jomsocial se eligió a esta última dado que saca mucha ventaja a Community Builder en muchos aspectos que la hacen más atractiva tanto para el usuario como para el administrador. Por ejemplo, para la gestión de eventos, Community Builder necesita de otras extensiones lo cual diversifica en exceso la web mientras que con Jomsocial esta gestión de eventos ya viene incorporada en la misma extensión. Algunas de las otras extensiones con las que se han realizado pruebas han sido Jevents o Eventlist que son herramientas para la gestión de eventos. Estas extensiones se han tenido en cuenta mientras se han realizado pruebas con Comunnity Builder. Una vez se han realizado pruebas con Jomsocial han quedado descartadas. También se han realizado pruebas con extensiones como Phocagallery o Joomgallery pero una vez se probó FrontPage Slideshow también quedaron descartadas dado que a pesar de ser muy completas FrontPage Slideshow es la que cumplía más con los requisitos deseados. Para la creación de formularios se han realizado pruebas con componentes como breezingforms, ChronoForms o CKForms pero dada la facilidad de implementación de Jforms y RSform además de su alta capacidad para crear formularios muy completos y de varias páginas se descartó el uso de los anteriores. Otra de las extensiones con las que se han realizado pruebas es K2, muy interesante cuando el nivel de artículos y contenidos en la página es muy elevado. Es una de las mejores extensiones que se han encontrado para Joomla 1.5.x e incluso hace que Joomla parezca una nueva versión. Permite anidar categorías de artículos al igual que Joomla 1.6, ranking y puntuación para artículos, tiene un editor de imágenes muy potente que incluso tiene parecidos con Photoshop, etc. Se ha descartado su uso dado que a pesar de la gran potencia de esta extensión no es necesaria en los requisitos que se desean satisfacer en la web. Es importante saber cuándo una extensión es o no necesaria dado que lo importante no es su capacidad si no que cumpla con lo que se requiere. Si es una gran extensión pero no satisface las necesidades que se tienen, es mejor desinstalarla y buscar otra más especifica.

44 26 Playsport, gestión Web del deporte- Memoria Descripción herramientas de trabajo elegidas Xampp. Xampp es un servidor independiente de la plataforma que agrupa todo lo necesario para hacer funcionar una web en local. Está formado por: - Servidor web Apache - Base de datos MySQL con PHPMyAdmin - Interpretes para lenguaje de script PHP y Perl - Servidor web Apache Nació como una herramienta de desarrollo para permitir a los desarrolladores realizar pruebas en sus webs sin necesidad de conexión a internet pero actualmente se utiliza incluso por servidores de sitios Web siempre con algunas modificaciones Joomla. Joomla es un CMS de código abierto bajo licencia GPL programado mayoritariamente en PHP. Puede trabajar en internet o en intranets y requiere una base de datos MySQL así como un servidor HTTP Apache. Cuando se conoce Joomla con solo observar su nombre y su logo ya es posible hacerse una idea de lo que significa. El nombre Joomla viene de Jumla que en lenguaje Swahili significa todos juntos y si se observa el logotipo, Fig es sencillo darse cuenta de que son cuatro personas abrazadas. Fig Logotipo de Joomla

45 Tecnologías existentes 27 - Historia. El proyecto Joomla nació el 17 de agosto de 2005 y surgió como resultado de una bifurcación de Mambo. El nombre de la marca Mambo pertenecía a la corporación Australiana Miro la cual formó una organización sin ánimo de lucro con el propósito inicial de fundar el proyecto y protegerlo de pleitos pero sin embargo esta fundación estaba llena de clausulas abusivas que limitaban el trabajo de los desarrolladores. El grupo de desarrollo de este proyecto reclamó que muchas de las clausulas violaban los valores principales de código abierto y que además no tenía la consultoría necesaria para mantener el proyecto. De aquí nació un sitio web llamado OpenSourceMatters con el objetivo de distribuir información a los usuarios, desarrolladores, diseñadores web y a la comunidad en general. En ese momento el líder Andrew Eddie escribió una carta abierta a la comunidad la cual apareció en la sección de anuncios del foro público mamboserver.com. Al día siguiente, 1000 personas habían ingresado en el sitio web opensourvematters.org para expresar su apoyo al grupo de desarrollo debido a lo cual el sitio web se bloqueó por el excesivo tráfico. De esta manera el proyecto Joomla vio la luz el 1 de septiembre de 2005 con mucha más libertad. - Hitos del proyecto Joomla o Separación de Miró (Mambo) 17 de agosto de 2005 o Creación y publicación del nombre Joomla! 1 de septiembre de 2005 o Lanzamiento versión de septiembre de 2005 o Creación del logo Joomla! 22 de septiembre de 2005 o Creación del Joomla! Extensions Directory 6 de marzo de 2006 o Lanzamiento del primer libro sobre Joomla! 6 de marzo de 2006 o Primer Joomla! Day, en Holanda 22 de abril de 2006 o Ganador Primer Lugar de The 2006 Open Source CMS Award Año 2006 o Ganador del Best PHP Open Source Content Management System Año 2007 o Lanzamiento versión 1.5 Released 22 de enero de 2008 o Publicación del directorio de recursos Joomla! 13 de junio de 2009 o Lanzamiento de versión 1.6 Alpha 23 de junio de 2009 o Microsoft anuncia colaboración en el código de Joomla! Abril de 2010

46 28 Playsport, gestión Web del deporte- Memoria o Lanzamiento de la versión 1.6 Beta 1 Mayo de 2010 o Lanzamiento de sitio de la Comunidad Mayo de 2010 o Primera conferencia internacional Joomla!, en Alemania, 1 de junio de 2010 o Lanzamiento del Magazine oficial 1 de julio de 2010 o Lanzamiento de Versión de enero de 2011 o Primer curso de Joomla! Universitario a nivel mundial 18 de enero de 2011 o Primer Joomla! Day en Hispanoamérica 18 de enero de Características generales o Es un CMS totalmente gratuito. o Fácil de usar, instalar, personalizar y expandir una vez has trabajado duro con él. o Funciona 100% online así que si tenemos nuestra web alojada en un servidor podremos trabajar en ella desde cualquier parte y con cualquier sistema operativo. o Existe una gran comunidad que trabaja día a día en la herramienta. o La cantidad de extensiones para Joomla es casi incontable. Con solo estos parámetros no hacen sino que surgir más preguntas. En la siguiente descripción se va a tratar de dar a conocer al máximo la herramienta. Qué es un CMS? Un CMS es un gestor de contenidos. Y que es un gestor de contenidos? Un gestor de contenidos en un sistema revolucionario a la hora de crear y administrar un portal web totalmente diferente al convencional. El planteamiento de un CMS a la hora de trabajar sobre un portal web es totalmente diferente al software convencional para esto, como pueda ser Dreamweaver o Frontpage por ejemplo. Con estos programas se crearía la página web en la máquina local y posteriormente se subiría vía FTP al servidor web. Cada vez que se quisiera realizar una actualización de los contenidos se deberían modificar los archivos en la máquina local y de nuevo subirlos para sobrescribir los anteriores y poder ver los cambios actualizados. El gestor de contenidos (CMS) es un entorno diferente ya que permite trabajar directamente sobre la web alojada en el servidor y da la posibilidad de trabajar en la web

47 Tecnologías existentes 29 desde cualquier máquina con conexión a internet, sin tener el software Joomla instalado en cada máquina. Cómo es esto posible? Mediante un panel de control. Un portal desarrollado en Joomla facilita un panel de control de administración protegido por contraseña y al cual se denomina back-end. Una vez se accede a la parte trasera de la web se puede crear o modificar el contenido y éste se actualizará en tiempo real. Todos estos cambios se verán al instante en el front-end que es la parte que ve el usuario ya sea un visitante o un usuario registrado. Esto facilita mucho las tareas de actualización de la web ya que desde cualquier ordenador con conexión a internet se pueden modificar los contenidos de la web. Una de las ventajas de utilizar un CMS como Joomla es que facilita mucho la identificación de usuarios y los niveles de acceso de los mismos ya que dispone de módulos que llevan a cabo este trabajo sin necesidad de programarlos. Quizás la ventaja más importante es que permite el uso de herramientas avanzadas ya predefinidas para el gestor de contenidos. Estas herramientas, comúnmente llamadas extensiones, cubren en gran parte las necesidades que se puedan tener. Por ejemplo si lo que se quiere es implementar un foro en una web desarrollada en Joomla es una tarea bastante sencilla ya que se puede encontrar una extensión desarrollada específicamente para Joomla que cubre estas necesidades. Otra de las ventajas de los CMS como Joomla es que separan claramente el diseño y el contenido. Con herramientas como Dreamweaver lo normal es realizar el diseño de una página y a este diseño se le va añadiendo el contenido. Una vez se tiene todo esto ya se obtiene el HTML de la web. Al trabajar con una herramienta de desarrollo dinámico como es Joomla no se crea el diseño y el contenido de forma unificada sino que ambos están separados. Por ejemplo si se crea una página con varios ítems de menú, con solo cambiar la plantilla de la web, cambiaría totalmente su aspecto sin afectar a la funcionalidad de sus botones. Otra de las particularidades de Joomla es la organización estructurada que ofrece, obligando a mantener una estructura de contenidos (categorías, secciones, artículos ). Es importante ajustarse a los parámetros de orden que ofrece el CMS para conseguir lo que se quiere llevar a cabo pero con un poco de trabajo es sencillo comprender esta estructura.

48 30 Playsport, gestión Web del deporte- Memoria - Estructuras de decisión en Joomla Existe un grupo llamado Core Team con la función de guiar a la comunidad Joomla. Bajo este grupo existe una serie de grupos con aspectos del desarrollo de Joomla mucho más especializados y son estos los que trabajan con el grupo principal en función de lo que va ofreciendo la comunidad de usuarios de Joomla. Se puede observar esta estructura de decisión en la siguiente imagen, Fig Fig Estructura de decisión de la comunidad Joomla. - Estado actual de Joomla Actualmente existen varias versiones disponibles para Joomla. La versión más extendida hasta ahora es la y recientemente ha aparecido la con varias mejoras de seguridad. Paralelamente existe la versión 1.6 que recientemente ha pasado de beta a estable. - Novedades versión 1.6 de Joomla o ACLs: Mejora permisos sobre usuarios o grupos. o Categorías anidadas. o Mejoras en el back-end. o Nuevo sistema de actualización automática de las extensiones instaladas con un solo clic. La plantilla del back-end ha cambiado. Su nuevo nombre es bluestork y tiene un aspecto más trabajado que la que venía por defecto en Joomla o Existen nuevos accesos que agilizan la navegación por el back-end.

49 Tecnologías existentes 31 El sistema de gestión de grupos y ACLs ha mejorado respecto a la versión ya que si se quería ganar en usabilidad había que recurrir a extensiones. Ahora la versión 1.6 a parte de los niveles de acceso ya predefinidos permite crear nuevos niveles de acceso y estos se pueden asociar a grupos que también se pueden crear permitiendo así gestionar el nivel de acceso de varios usuarios. En la versión 1.6 también se pueden unir directamente los módulos al menú desde el apartado Menú Manager sin tener que ir accediendo a cada uno de los módulos, proporcionando además un enlace a cada uno de los módulos. Editando los ítems de menú también se pueden ver directamente los módulos que están asignados a este ítem y se pueden proporcionar derechos de acceso directamente. También se pueden asignar estilos individuales a los ítems de menú sin tener que cambiar la plantilla de Joomla por completo. Permite las categorías anidadas pudiendo crear tantas categorías como se desee, a diferencia de la versión que solo permitía anidar cada categoría con una sección. Además permite modificar múltiples derechos de acceso a la categoría permitiendo a un mismo grupo distintos tipos de acceso a esta categoría. También existe un nuevo componente llamado redireccionar que permite redireccionar urls que han dejado de funcionar a nuevas urls. En Joomla había que recurrir a extensiones para poder realizar esto. El extensión manager ha sido ampliamente mejorado permitiendo actualizar todo el entorno Joomla con un solo clic, incluyendo las extensiones Extensiones Joomla Qué son las extensiones en Joomla? Joomla por sí sólo como CMS es muy potente y permite una gran variedad de funcionalidades. Cuando se realiza por primera vez su instalación ya se dispone de este gran abanico de posibilidades pero en ocasiones es necesaria alguna función más específica. Es de este tipo de necesidades específicas de donde nacen las extensiones.

50 32 Playsport, gestión Web del deporte- Memoria Desarrollar un CMS con las posibilidades que llegan a ofrecer las extensiones sería excesivamente complejo por lo que la comunidad trabaja duro en cubrir todo tipo de necesidades mediantes las extensiones. Casi toda aplicación existente en internet ha sido ya desarrollada para Joomla y si no es así, está en desarrollo. Solo hay que saber encontrar y adaptar aquello que se necesita. Estas extensiones se encuentran a disposición de todos en y también las que existen en español en: En el día existían disponibles para los usuarios 7498 extensiones y este número crece cada día más. Se puede comprobar porqué a día ya existen 7648 extensiones. Cuando se habla de extensiones estas se clasifican en 3 tipos: - Componentes: Programas desarrollados en PHP con más o menos capacidad. Independientes de Joomla pero que aprovechan el sistema de usuarios, de gestión, etc. Por lo general el componente se instala desde el panel de administración y siempre requiere de una configuración previa. - Módulos: Pequeños contenidos que se muestran en la posición que se indique del front-end. - Plugins: Pequeños programas que por lo habitual permiten agregar otro tipo de contenidos a cosas como artículos. - Cómo se relacionan estos 3 tipos de extensiones? En ocasiones, un componente puede requerir un módulo para poder mostrarse. Por ejemplo el componente Jomsocial tiene varios módulos y plugins. Estos permiten que funcionalidades del componente se muestren en el front-end, o mediante plugins se podrá controlar el texto de una manera más profunda. Recomendaciones en el uso de las extensiones.

51 Tecnologías existentes 33 - Si se tiene una extensión instalada pero no va a tener uso ni actualización ha de ser borrada puesto que puede ser un agujero de seguridad. - Mantener actualizadas las extensiones dado que esto mejora la seguridad y corrige posibles errores. - Si se tiene suficiente con lo que incorpora Joomla no es necesario instalar extensiones. - La descarga de extensiones es recomendable siempre que provengan de sitios oficiales de Joomla dado que si no pueden contener algún tipo de programa que perjudique a la web. - No desinstalar las extensiones propias de Joomla. En el directorio de extensiones viene indicado que han sido desarrolladas por Joomla Project. Existe un enlace muy completo y actualizado con las extensiones con problemas de seguridad, la descripción de estos problemas y una posible solución. Hoy día está establecido un sistema muy completo de símbolos para reconocer cada tipo de extensión además de muchas otras funcionalidades que incorporan estas extensiones. En la siguiente tabla, tabla 3.1. se muestra el significado de cada uno de estos símbolos.

52 34 Playsport, gestión Web del deporte- Memoria Componente. Módulo. Plugin. Extensión específicamente desarrollada para la versión 1.0 y no funciona en la 1.5.x. Extensión desarrollada inicialmente nte para la versión 1.0 pero que funciona en Joomla 1.5.x activando el plugin Sistema legado o Legacy mode. Extensión desarrollada íntegramente para Joomla 1.5.x y que no funciona en Joomla 1.0. Extensión desarrollada íntegramente para Joomla 1.6 y que no funciona en Joomla 1.5 o 1.0. Indica que la extensión es de las más populares dentro de la comunidad. Extensión con el visto bueno de los editores. Extensión que ha sido traducida a uno o varios idiomas.

53 Tecnologías existentes 35 Indica que la extensión además tiene extensiones específicas para ella misma. Tabla 3.1. Simbología de las extensiones Joomla Jomsocial. Jomsocial trata de cubrir una de las grandes necesidades actuales en el desarrollo de páginas web, las redes sociales. En la siguiente imagen, Fig se puede observar la estructura de la red social que aplica la extensión Jomsocial. Fig Aspecto de la extensión Jomsocial Con unos sencillos pasos permite crear una red social altamente configurable. Permite una alta flexibilidad de diseño, galerías de fotos, soporte de video, creación y organización de grupos, control de la actividad de la red social, gráficos de actividad, gestión de eventos, mensajería privada y dos conceptos muy importantes.

54 36 Playsport, gestión Web del deporte- Memoria Contiene su propio directorio de extensiones y plugins y está muy trabajado en cuanto a escalabilidad y seguridad. La gestión de usuarios es altamente configurable permitiendo modificar muchos de los parámetros del registro y del perfil e incluso con conocimientos de MySQL se pueden crear nuevos campos en la página de registro. Además es muy sencillo desde el panel de administración tener un control total sobre la actividad de los usuarios, grupos, eventos, etc. Actualmente la versión más actualizada de Jomsocial es la 2.2 y aunque Jomsocial es de pago está liberado bajo licencia GNU GPL desde la versión 1.8. el 12 de mayo de Qué significa esto? Jomsocial es software GPL basado en suscripción. Todos los suscriptores se convierten en clientes VIP con acceso a la versión más reciente, corrección de errores y acceso privilegiado al foro oficial. Sin embargo se puede utilizar Jomsocial de forma gratuita sin el acceso a todas estas ventajas. Qué novedades existen con la versión 2.2 de Jomsocial? Jomsocial 2.2 es totalmente compatible con Joomla 1.6 y Joomla 1.5.x. Además permite invitar a amigos desde Facebook, las galerías de imágenes han sido mejoradas respecto a las versiones anteriores, el panel de control para la administración tiene mayor funcionalidad, ha mejorado el muro y tiene un sistema mejorado antispam JForms. Jforms es una extensión totalmente gratuita. Se trata de un componente que permite crear y gestionar formularios de manera muy sencilla. Su versión más actual con fecha es la 0.7. Con una interface desde dentro del componente permite añadir múltiples campos al formulario simplemente arrastrándolos. Además contiene un campo interesante antispam mediante Captcha y la posibilidad de añadir texto, imágenes e incluso flash al formulario para personalizarlo al máximo.

55 Tecnologías existentes 37 La configuración de los formularios en cuanto a redireccionamiento, envío del mensaje al administrador o incorporar datos de la base de datos es muy completa y gestiona de forma muy simple desde el back-end los formularios ya enviados RSform. RSform existe en versión de pago y versión gratuita. La versión de pago es la profesional y es mucho más completa que la gratuita aunque esta última es suficiente para crear formularios simples. Su versión más reciente con fecha es la Con la interfaz propia del componente se pueden añadir muchos tipos de campos al formulario tales como campos de texto, barras de selección o checkboxs, password, subida de archivos, texto, calendario, botones e incluso imágenes CAPTCHA Antispam. Se puede configurar el envío de s de confirmación tanto a la administración como al usuario que envía el formulario personalizando los mensajes que estos reciben. Además tiene otras opciones muy interesantes si se gestionan grandes volúmenes de información dado que tiene una pestaña solo para controlar los formularios recibidos. En esta pestaña llamada Manage submissions existe mucha información del usuario incluyendo además de las que configuramos su ip. Además permite exportar esta información a diferentes formatos como puede ser Xml o incluso a un Excel. Este componente también permite realizar backups de los formularios simplemente entrando en la pestaña dispuesta para tal propósito Joomsport. Se trata de un componente muy completo en cuanto a la gestión deportiva. Actualmente la versión estándar con fecha es la y es totalmente gratuita. También existe una versión profesional de pago. Esta extensión permite crear temporadas, torneos e incluso gestionar las fechas de los encuentros. Además permite crear los jugadores junto con su posición y asignarlos a un

56 38 Playsport, gestión Web del deporte- Memoria equipo. También es posible gestionar los campos donde se disputan los partidos, asignar moderadores y gestionar el idioma del componente de una forma muy sencilla. Dentro de sus posibilidades respecto al front-end, el componente permite mostrar información de los equipos y jugadores, un calendario de la temporada, clasificación del torneo e información de los encuentros y del día de partido. Dentro de todas estas posibilidades también incluye 3 módulos que permiten mostrar información en cualquier parte de la web que se desee posicionarlos. Estos módulos muestran información de clasificación, del jugador o resultados de los partidos FrontPage SlideShow. FrontPage SlideShow es un componente de Joomla que permite crear una presentación de imágenes dinámicas en la página de la web que se le indique. Su versión más actual con fecha es la 2. Qué ventaja tiene FrontPage SlideShow frente a otras galerías de imágenes dinámicas? Este componente está creado con código Javascript y Css y esto permite la combinación de textos e imágenes, ambos dinámicos y permitiendo así crear en una simple secuencia de imágenes una presentación con texto incluido del sitio web. Además permite enlazar este texto con artículos de la web y su diseño visual es muy completo. En cuanto a la parte administrativa el componente es muy completo dado que permite crear tantas categorías de imágenes como se desee permitiendo así tener un número de imágenes elevado muy bien distribuido. El componente también contiene un módulo para poder mostrarlo en las páginas de la web que se desee, anidando cada una de las categorías al módulo en concreto y asignando un estilo Css a cada una de estas categorías Akeeba backup. Sin duda Akeeba backup es uno de los componentes más necesarios en cualquier tipo de web creada con Joomla. Este componente permite crear copias de seguridad completas del sitio web. Su versión más actual con fecha es la y es totalmente compatible con Joomla 1.5.x Joomla 1.6.

57 Tecnologías existentes 39 Akeeba backup en la realización de la copia de seguridad permite elegir solo aquello que se quiere respaldar y vetar aquellos directorios de los cuales no se quiere realizar el respaldo. Esto es muy útil a la hora de ofrecer un servicio de calidad a los usuarios dado que se puede impedir que directorios con un alto contenido audiovisual sean respaldados en ese instante para que así los usuarios no noten una ralentización en su navegación por la web. Además cuando se genera una copia de la web el componente Akeeba backup incorpora su propia versión del instalador de Joomla para permitir de esta manera la restauración del sitio web de una manera muy sencilla y en unos simples pasos. Con solo acceder posteriormente al directorio donde se encuentra la nueva instalación que se acaba de realizar se tendrá la web totalmente disponible y funcional permitiendo así restaurar con facilidad la web e incluso el cambio de servidor web sin que esto afecte a la página JUJSevents. JUJSevents es un módulo multifuncional para mostrar los eventos de la red social Jomsocial en cualquier página de la web. Con fecha se encuentra en su versión 2.2 y es totalmente compatible con Jomsocial 1.8 u 2.x. A pesar de ser tan solo un módulo sus funciones no se quedan en simplemente mostrar un contenido sobre el componente Jomsocial. JUJSevents es altamente configurable permitiendo mostrar los eventos pasados, actuales o futuros. Permite mostrar solo los eventos del día, en el día que se producen e incluso mostrar los que están por llegar o los pasados. Además incluye en cada uno de los eventos un botón de leer más permitiendo al usuario consultar información más detallada sobre el evento sin necesidad de acceder a la red social. La gran utilidad que se le puede extraer a este módulo es mostrar información muy directa más o menos detallada en cualquier página de la web motivando así al resto de usuarios en la participación de los eventos Encuesta. El modulo encuesta es un módulo incorporado con Joomla que permite publicar en el front-end las encuestas creadas en el componente. Es altamente configurable y tiene un control sobre los votos muy correcto. Permite controlar el tiempo entre voto y voto de un

58 40 Playsport, gestión Web del deporte- Memoria mismo usuario y muestra unas estadísticas de voto muy logradas. Es un componente y módulo muy interesante cuando la web ofrece servicios, dado que se puede pulsar la opinión de los usuarios de una manera muy sencilla y directa Buscar. El modulo buscar es un módulo incorporado con Joomla que permite publicar en el frontend una barra de búsquedas sobre el contenido de la Web. Este módulo es muy interesante si el contenido de la Web es alto dado que muestra aquellos artículos donde aparece el término buscado Topmembers, Onlineusers y Lastmembers. Estos tres módulos forman parte del componente Jomsocial aunque también se encuentran con Joomla. Son muy útiles a la hora de motivar a la comunidad al uso de la red social y además permite de una manera muy sencilla tener un control sobre los usuarios más activos. El módulo Topmembers permite saber que usuario tiene más actividad dentro de la red social. Onlineusers permite conocer de manera muy sencilla cuantos usuarios están conectados y Lastmembers los últimos usuarios que se han registrado en la web Banner. El componente banner viene incorporado en el core de Joomla. Permite crear categorías de banners y asociar anuncios a cada una de ellas. También permite asociar un cliente a cada una de las categorías de manera que es muy sencillo organizar los posibles anuncios de la página Web. También incorpora un módulo para poder posicionar en el lugar deseado los anuncios.

59 Tecnologías existentes Herramientas complementarias Firefox. Extensión Firebug. Firebug es una extensión de Firefox creada y diseñada especialmente para desarrolladores y programadores web. Con esta herramienta se puede analizar todo el código fuente de una web incluyendo Css, HTML y Javascript. La primera versión de Firebug fue la versión 0.2 y actualmente con fecha se encuentra en su versión Firebug se lanzó el 12 de enero de 2006 y en tan solo unos días ya fue actualizado dos veces siendo en su tercera versión donde se acercaba más a lo que se conoce hoy de Firebug. Las versiones 0.3.x y 0.4.x aparecieron a lo largo del año 2006 y en el año 2007 aparecieron las versiones 1.0.x Contiene un total de líneas de código real. Los únicos contras que tiene este plugin es su incompatibilidad con navegadores como Internet Explorer, Opera o Safari. A la hora de trabajar con Firebug en Joomla es una herramienta de gran utilidad debido a la complejidad del código de Joomla permitiendo así encontrar donde se encuentran aquellas líneas de código que se quieren modificar. Esto es de gran utilidad a la hora de cambiar la estructura de los módulos posicionales o el aspecto Css permitiendo así solucionar errores de posicionamiento de los módulos, fallos en el aspecto al realizar traducciones de componentes, etc. Cualquiera que quiera adaptar su página a sus ideas debe contar con esta herramienta sin dudarlo Dreamweaver. Dreamweaver es una herramienta propiedad de Adobe dedicada a la construcción y edición de sitios y aplicaciones web basados en estándares como puede ser HTML, XML o Css por ejemplo. La primera versión pertenecía a Macromedia y apareció en diciembre de Era la versión 1.0 y solo estaba disponible para Mac OS. En marzo de 1998 salió la versión 1.2 para Windows. A partir de la versión 8.0 el producto ya era propiedad de Adobe

60 42 Playsport, gestión Web del deporte- Memoria Systems y ha continuado creciendo hasta la versión CS que salió el 12 de abril de Se podría decir que Dreamweaver es el software de creación y edición de webs más utilizado por el sector de la programación web gracias a sus funcionalidades, integración con otras herramientas y por su soporte a los estándares World Wide Web Consortium. Las versiones más actuales soportan tecnologías web como CSS, Javascript y algunos Frameworks del lado del servidor y actualmente mantiene el 90% del mercado de editores HTML. Una de las grandes ventajas de Dreamweaver es que permite el uso de extensiones. Estas extensiones son pequeños programas hechos por cualquier desarrollador y que son fácilmente instalables permitiendo así añadir funcionalidades al programa. Desde el punto de vista de Joomla esto es una gran ventaja ya que existen extensiones en Dreamweaver específicas para Joomla que facilitan mucho la edición de los templates de Joomla con cosas como, por ejemplo, clasificar cada parte del template en un menú para saber mejor en que zona del template se está trabajando. El nombre de esta extensión es D-Form_Joomla15.mxp. También existen otro tipo de extensiones como la conocida Joomla template kit 3.x que permiten relacionar de una manera más sencilla el código HTML o PHP con sus estilos Css algo que solo con Firebug suele resultar tedioso además de muchas otras utilidades.

61 Solución implementada Solución implementada Diseño. Para la creación de la página tan solo hay que seguir un principio importante, el resto es imaginación. El ser humano tiende a explorar la web en una forma de L. Por tanto la estructura de la web Playsport sigue esta composición, encabezado, barra lateral derecha y luego, contenidos. De esta manera se logra distinguir con facilidad las áreas de la web. En el diseño de la web de Playsport se ha buscado la simplicidad. No se ha querido rellenar con infinidad de imágenes el contenido. Además se ha de buscar una combinación agradable de colores, no es recomendable utilizar más de 6 colores. Cuando se realiza el diseño de una página web hay que tener en cuenta 2 puntos. Funcionalidad, y estética. La página Playsport ha intentado buscar un balance correcto. Al crear un fondo oscuro con colores se ha buscado destacar la página y el encabezado y el menú de navegación son los dos puntos que llaman más la atención al navegar. El menú destaca sobre el fondo oscuro al tener éste un color rojo lo cual invita a navegar por él. Se trata de un menú dinámico y con solo arrastrar el ratón sobre él permite acceder a diferentes puntos de la Web. El objetivo es acceder a cualquier punto con 3 clics o menos. El hecho de utilizar Joomla y que éste herede la misma plantilla en todas sus páginas permite mantener la web de manera consistente, limpia y ordenada. El diseño muestra claramente la navegación principal mediante el menú y permite un acceso ágil a todas las partes de la Web. En cuanto a la elección de colores con el diseño se ha intentado no utilizar colores fluorescentes ni en el texto ni en el fondo. Se han evitado colores vibrantes en el fondo de la página para evitar que esto sea lo que llame la atención del usuario. Por tanto y con el objetivo de cumplir estas premisas, se ha utilizado un template llamado gk_icki_sports que ofrece una distribución acorde a los intereses del proyecto, permitiendo posicionar los módulos de una forma correcta y clara. Es importante saber que no todos los templates pueden cubrir las necesidades de los módulos que se quieren utilizar y éste es un factor importante a la hora de elegir el adecuado.

62 44 Playsport, gestión Web del deporte- Memoria Para adaptar este template al objetivo de la web se le ha añadido un logotipo con el nombre Playsport en la parte superior izquierda. Se considera satisfactorio el resultado obtenido con gk_icki_sports dado que el aspecto es funcional y agradable a la vista. Además cubre por completo todas las necesidades que existen con los módulos utilizados. En la siguiente figura se muestra el aspecto y el posicionamiento de los módulos en la Web en la fase de pruebas. Fig Aspecto template gk_icki_sports Creación de la web con Joomla Instalación Xampp La instalación de Xampp requiere de varios pasos muy sencillos. Una vez se ejecuta el archivo de instalación xampp-win tan solo se ha de hacer clic sobre el botón Siguiente hasta finalizar la instalación. El único detalle importante a tener en cuenta durante la instalación es seleccionar que instale Apache y MySQL como servicios de Windows. Una vez Xampp está instalado solo se ha de inicializar Apache y MySQL. En primer lugar Xampp da la opción de elegir el idioma. Una vez elegido el idioma español en la barra lateral izquierda se ha de acceder a PHPMyAdmin desde

63 Solución implementada 45 En la interfaz de PHPMyAdmin se ha de seleccionar la pestaña privilegios para crear el nuevo usuario. Pulsando sobre agregar nuevo usuario y se crea el nuevo usuario llamado admin con todos los privilegios. De esta manera cuando se cree la base de datos que va a utilizar Joomla ya existirá en ella el usuario que se ha creado como administrador sin que éste sea el que viene por defecto en Xampp (root). El paso siguiente es crear la base de datos con la que se enlazará Joomla. En la pestaña bases de datos se ha creado una base de datos de nombre joomlaplaysport con cotejamiento utf8_general_ci. Esta base de datos ya contiene el usuario que se ha creado anteriormente como administrador. El nombre de la base de datos, el login y password de este usuario serán los necesarios durante la instalación de Joomla para enlazar la base de datos con Joomla. Es de utilidad anotar en este instante el nombre de la base de datos y del usuario que se acaba de crear Instalación y configuración Joomla - Instalación. Es importante indicar que las últimas versiones de Joomla y no funcionan sobre la última versión de Xampp. Una vez se ha instalado la versión de Xampp se procede a la instalación de Joomla. Se ha de acceder a la página de inicio desde el navegador web elegido para trabajar ( y aparece la primera página de la instalación. El proceso es bastante sencillo. 1º. Se elige el idioma y siguiente. 2º. Se comprueba que todas las opciones estén marcadas tal como indica Joomla. Aunque alguna de ellas esté en conflicto, si no es severa Joomla funcionará correctamente. Se puede observar en la siguiente imagen, Fig el modo en el que Joomla muestra la compatibilidad.

64 46 Playsport, gestión Web del deporte- Memoria Fig Compatibilidad de Joomla durante la instalación 3º.Pulsar sobre siguiente para aceptar el contrato de licencia de Joomla 4º. El siguiente paso es rellenar los datos de la base de datos (la cual se ha creado previamente mediante PHPMyAdmin en la instalación de Xampp), del mismo modo que se señala en la imagen, Fig Se ha de introducir el nombre de usuario que previamente se había creado en PHPmyadmin y el nombre de la base de datos deberá ser el de la base de datos que se ha creado. Fig Datos de la base de datos que va a ir relacionada con Joomla. 6º. En este paso se ha de hacer clic en siguiente sin tocar nada. Se elige el nombre de la web, el login y password con el que se quiere acceder. Se hace clic en siguiente y ya se puede finalizar la instalación. Se ha de elegir que no instale los datos de ejemplo dado que si no llenaría la página con módulos y artículos de ejemplo de Joomla. El objetivo es ir creando todo eso desde 0.

65 Solución implementada 47 7º: Finalizar la instalación. Tan solo hay que dirigirse al directorio donde se encuentra Joomla y eliminar la carpeta installation. Directorio: C:\xampp\htdocs\joomla Al eliminar la carpeta installation con solo hacer clic en administración de la ventana que aparece al finalizar la instalación de Joomla ya se podrá acceder a la administración (backend) de la página. - Configuración. Existen algunos parámetros a configurar en Joomla. En primer lugar se configura un servidor de correo SMTP usando una cuenta Gmail. Esto permite tener un servidor de correo de administración de manera totalmente gratuita. Para configurarlo en panel de control configuración global servidor Esta es la parte que interesa. Se muestra primero la imagen, Fig de cómo aparece por defecto si se está trabajando en local: Fig Configuración por defecto del correo de administración. Se han de cambiar los parámetros para utilizar Gmail como servidor de correo. Se considera recomendable crear una nueva cuenta específica para Joomla. La cuenta creada es smtpserverjoomlaplaysport@gmail.com. Se selecciona programa de correo servidor SMTP y se añade la dirección de . Un nombre para el remitente, Playsport, seguridad SSL y el puerto 465. También se añade el usuario SMTP y la contraseña. Por último se

66 48 Playsport, gestión Web del deporte- Memoria introduce el servidor SMTP de Gmail y ya ha quedado configurado el servidor de correo SMTP para Joomla el cual se puede utilizar para cosas como por ejemplo: - Recibir correos para la administración informando de registros de usuario. - Recibir correos de formulario de contacto o de inscripción. - Enviar s de activación de cuenta de usuario a los usuarios. - Enviar s masivos a todos los usuarios de la red social informando de algún cambio o actualización En segundo lugar es quitar de la página principal algo que aparece en cualquier instalación de Joomla. El título Bienvenidos a la portada. En menús, menú principal, clic sobre inicio y a la derecha se encuentra parámetros del sistema. Aquí se puede quitar este mensaje. Clic en guardar y al actualizar se comprueba que ya no aparece en la página de inicio Instalación plantilla. En primer lugar se ha de cargar la plantilla de la web con nombre gk_icki_sports. Para ello en la pestaña extensiones instalar/desinstalar se escoge el archivo.zip de la plantilla y se instala. Posteriormente con la opción extensiones gestor de plantillas se escoge la plantilla gk_icki_sports como plantilla predeterminada y ya se puede comprobar cómo la plantilla que se carga al introducir la url de la web es la instalada. La plantilla gk_icki_sports tiene un criterio de módulos posicionales muy correcto el cual se puede ver fácilmente escribiendo al final de la dirección web?tp01. Se puede observar un ejemplo en la Fig que viene a continuación.

67 Solución implementada 49 Fig Posicionamiento módulos template gk_icki_sports Instalación y configuración Jomsocial - Instalación. Para realizar la instalación del componente Jomsocial se ha de proceder de forma similar a la de cualquier otro componente. En el submenú extensiones instalar/desinstalar se debe seleccionar el archivo del componente y pulsar sobre Subir archivo & instalar. Posteriormente, haciendo clic sobre Complete su instalación y sobre Next tan solo en el primer paso, la instalación se llevará a cabo de forma correcta. A partir del primer paso el proceso es automático. En función de la versión seleccionada podría no instalar directamente los módulos y plugins del componente Jomsocial. En el caso de que así sea sólo se ha de proceder a la instalación manual de cada uno de ellos del mismo modo que se hace con el componente. Una vez realizada la instalación el componente Jomsocial directamente crea un enlace en el menú principal tal y como se puede observar en la siguiente imagen, Fig obtenida en Menús Menú principal, campo señalado como tipo COM_COMMUNITY.

68 50 Playsport, gestión Web del deporte- Memoria Fig Enlace Jomsocial en el Menú principal. Jomsocial no está en español pero sin embargo la comunidad trabaja duro en ello. Tan sólo se ha de buscar en la página oficial de Jomsocial los archivos adecuados para la versión de Jomsocial que se esté utilizando, copiar, pegar y de esta manera se traduce el componente tanto en el back-end (zona administración) como en el front-end (zona visual). En la misma página de Jomsocial, se pueden encontrar gratuitamente están traducciones. Por lo general los archivos tienen un nombre del tipo es-es.com_community. Para realizar correctamente la traducción se ha de copiar el archivo en la parte que le corresponde y directamente el componente aparecerá traducido al actualizar la página. - Configuración. Jomsocial es una red social en toda regla así que se pueden encontrar un gran número de páginas a configurar a pesar de que se puede dejar la configuración tal y como la deja la instalación. A continuación se explicarán los cambios principales en la configuración. 1º Paso: En el apartado componentes Jomsocial Configuración Sitio, se han de configurar algunos parámetros como términos y condiciones de uso por ejemplo. En la siguiente imagen, Fig se muestra como se ha configurado:

69 Solución implementada 51 Fig Parámetros de configuración de Jomsocial. El resto de parámetros de esta página se dejan tal y como están. En el apartado Media solo se han de configurar dos parámetros, habilitar videos (sí) y permitir a invitados la búsqueda de videos (no). Los siguientes apartados se dejan tal y como vienen en la instalación: Antispam, grupos, eventos, red, conector Facebook, almacenamiento remoto, integraciones. El apartado diseño se ha de configurar para que el editor de texto que aparezca en la red social sea el que se ha configurado para Joomla aunque también se puede dejar el que viene por defecto. En el apartado privacidad se ha de configurar como muestra la siguiente imagen, Fig Este es un punto importante y queda sujeto a modificaciones basadas en sugerencias o necesidades de los usuarios dado que el usuario puede modificar la privacidad de su propia cuenta al acceder a ella.

70 52 Playsport, gestión Web del deporte- Memoria Fig Configuración de la privacidad en Jomsocial. 2º Paso. Usuarios. En este apartado es importante traducir la información que viene sobre el usuario. El texto a traducir se encuentra en usuarios perfiles personalizados. Aquí aparece información básica del usuario pero en inglés. Esta parte no está traducida por el archivo es-es.ini puesto que es información altamente configurable. Incluso se pueden añadir nuevos campos de información. Fig Información del usuario sin traducir. Como se puede ver en la imagen, Fig todos los campos de información del perfil aparecen en inglés. También aparecen las opciones de que estos campos aparezcan durante el registro de usuario, de que sean campos requeridos durante el registro, visible en el perfil, etc.

71 Solución implementada 53 De nuevo, esta es una parte importante dado que gran parte de la comunidad de Joomla que utiliza Jomsocial cree que la segunda página del registro de Jomsocial está sin traducir cuando en realidad es bastante sencillo conseguir que aparezca en español desde esta parte del back-end. Entrando en cada uno de los campos tan solo se ha de traducir manualmente para que el cambio surta efecto en la segunda página de registro Solución implementada Jomsocial. Se han llevado a cabo algunas modificaciones en el componente para poder adaptarlo al uso de la web con facilidad. A continuación se explican estos puntos. 1º. Traducción al español. Por lo general para realizar la traducción del componente Jomsocial se ha de ir a la página oficial y descargar archivos del tipo es-es.com_community.ini. Uno para el front-end (parte que ve el usuario) y otro para el back-end (parte que ve el administrador). A continuación se especifican las rutas donde se han de copiar cada uno de los archivos: - Ruta archivo back-end: C:\xampp\htdocs\joomla\administrator\language\es-ES - Ruta archivo front-end: C:\xampp\htdocs\joomla\language\es-ES Actualmente y sólo para la versión 2.2, existe una traducción muy completa e instalable. Para realizar la instalación se realiza desde el panel de extensiones instalar / desinstalar. No obstante, cuando se realiza esta instalación surgen problemas. El diseño gráfico de la herramienta está hecho para otro idioma (inglés) y esto provoca que haya botones o espacios que se queden cortos o letras que aparezcan sobrescritas. A continuación se indica cómo solucionarlo. Una parte del texto del panel de login se solapa. Para solucionarlo se utiliza la herramienta Firebug de Firefox para localizar exactamente donde está la línea de código Css que es necesario modificar. Una vez localizada la página fácilmente se puede saber la ruta del archivo con solo posicionar el ratón sobre los estilos Css que muestra Firebug. El archivo se encuentra en la ruta:

72 54 Playsport, gestión Web del deporte- Memoria y la línea concreta que se debe modificar es la 926. Como se puede ver en la siguiente imagen, Fig. 4.9, el ancho (width) para el formulario de acceso es de 200px y se ha de cambiar por 300px. De esta manera la parte de acceso a la página no queda sobrescrita y se visualiza correctamente. Fig Modificación de código Css para corregir el error en el inicio de sesión de Jomsocial. También se ha modificado el tamaño de la letra del botón verde que permite registrarse. En el mismo archivo en la línea 930, Font-size:13px; y de esta manera las letras entran totalmente dentro del botón. Otro punto que se puede observar con problemas es cuando se muestra la información de un evento. En la parte de Hora/Fechas algunas letras aparecen solapadas. Para solucionar esto se ha de modificar la línea de código 367 y aumentar el ancho a 50px. Fig Modificación de código Css para corregir el error en los eventos de Jomsocial. Por último en cuanto a traducción se refiere se procede a traducir el menú de usuario visible en el perfil. Las traducciones no traducen esta parte dado que es configurable desde el back-end. Tan solo se ha de ir a Jomsocial perfiles personalizados, e ir entrando en cada uno de los campos para traducir manualmente cada uno de ellos. Se puede ver que también existe la posibilidad de traducir la información sobre el campo en cuestión y características de visibilidad o requerimiento en el registro, perfil, etc. 2º. Adaptación del registro de usuario El objetivo es añadir dos nuevos campos a la segunda página de registro del usuario. Los campos a añadir serán, tipo usuario: propietario instalaciones / jugador y campo de texto, deportes favoritos.

73 Solución implementada 55 En primer lugar se ha de crear un nuevo grupo en la información de usuario. En Jomsocial Perfiles personalizados, clic sobre nuevo grupo. Se pone de nombre al nuevo grupo tipo usuario y se selecciona sí en las opciones publicado y visible. Lo siguiente es hacer clic sobre guardar. Una vez creados los nuevos grupos en los cuales se han de situar como hijos los campos que se van a crear se ha de acceder a la base de datos. En la ruta: se abre la base de datos de la web y posteriormente se abre la tabla en cuestión donde se van a introducir los nuevos campos. Fig Tabla jos_community fields de la base de datos que se va a modificar. Pulsando sobre la tabla ya se puede ver en el panel de PHPMyadmin todos los campos de información del usuario que aparecen durante el registro y en su perfil. El campo que se va a introducir es información del usuario, en concreto, si es propietario de instalaciones o si es jugador. Se parece mucho al campo gender: male/female así que se seguirá su mismo patrón. Se Selecciona el campo sexo y clic sobre insertar. Aparece el campo a insertar. Se configura tal y como muestra la siguiente imagen, Fig asegurándose de que el ID no coincide con ninguno de los otros campos. También se pone un 2 en ordering para que aparezca justo después de la opción de elegir sexo. Por último el field code, el cual es: FIELD_TIPOUSER

74 56 Playsport, gestión Web del deporte- Memoria Fig Configurar el nuevo campo Usuario. Lo siguiente es hacer clic en continuar. En la siguiente pantalla clic en continuar de nuevo. En la tabla se puede observar como aparece esta nueva fila. Ya se puede comprobar cómo en la segunda página de registro también aparece el nuevo campo que se acaba de introducir. Fig Campo usuario creado en la segunda página del registro. El último paso es ir a Jomsocial perfiles personalizados y buscar el campo usuario. Clic sobre él para editarlo del mismo modo que en la siguiente imagen, Fig

75 Solución implementada 57 Fig Configurar el campo usuario. Como se puede ver corresponde con lo que se ha introducido en la base de datos. Sobre todo es importante rellenar correctamente el campo: código de campo y el tipo, lo demás es configurable en función de lo que se requiera. También se ha hecho que pertenezca al grupo que se había creado específicamente para él. En segundo lugar, se va a proceder a añadir un nuevo campo tipo caja de texto para que el usuario pueda escribir sus deportes favoritos. Del mismo modo que con el anterior pero esta vez se ha de prestar atención al campo sobre mí el cual va a servir de guía para saber cómo hacer el campo deportes favoritos. De nuevo se hace clic sobre insertar después de seleccionar el campo textarea. A continuación se rellena la información del nuevo campo dando un ID diferente a todos los demás, el mismo ordering que el campo sobre mí y el campo fieldcode como FIELD_DEPORFAVORITOS. En la siguiente imagen, Fig se puede observar la configuración del nuevo campo deportes favoritos.

76 58 Playsport, gestión Web del deporte- Memoria Fig Configurar el nuevo campo Deportes favoritos. Clic en continuar 2 veces y volviendo a la tabla ya se puede ver el nuevo campo que se acaba de introducir. El último paso es ir a Jomsocial perfiles personalizados y buscar el campo deportes favoritos. Clic sobre él para editarlo como muestra la siguiente imagen, Fig Fig Editar el campo creado Deportes favoritos.

77 Solución implementada 59 Es importante fijarse en el campo código de campo, el tipo y el grupo al que pertenece. Lo demás es editable en función de las necesidades que detecte el administrador. Por último, los campos de textáreas de la segunda página de registro son excesivamente grandes lo cual no permite que se muestre la información dinámica al posicionarse sobre alguno de ellos. Para solucionar esto se ha de reducir su tamaño. En la ruta: Y en la línea 101 se encuentra text tarea{height:110px;width:100%}. Se ha reducido al 80% para evitar este problema. Se observa que también nos baja el tamaño del campo dirección el cual también era excesivamente grande. 3º. Activar librería Curl para poder enlazar videos. En la ruta C:\xampp\php\ext se puede encontrar el archivo de la librería Curl llamado php_curl.dll. Para activar esta librería desde el directorio PHP hay que dirigirse a la página php.ini de Xampp que se encuentra en la ruta C:\xampp\php, abrir el archivo con un editor de texto y en la línea 952 se ha de quitar el punto y coma que comenta la carga de la librería dejándolo así: extension=php_curl.dll Guardar y reiniciar el servidor Xampp. Después de estos pasos se puede comprobar cómo enlazar videos desde la pestaña videos añadir enlazar video, funciona correctamente Extensiones Jomsocial - JUJSevents para Jomsocial: Extensión de Jomsocial gratuita que muestra los eventos del día. Esta extensión es bastante configurable y permite de un modo elegante publicar los eventos del día en la página de inicio lo cual es de gran ayuda a la hora de motivar a la comunidad para unirse a eventos. Además directamente crea en este anuncio un botón de leer más para que los usuarios puedan consultar más información sobre el evento si así lo desean. Para instalar la extensión se hace por el método habitual. Extensiones Instalar/desinstalar y se sube el archivo.

78 60 Playsport, gestión Web del deporte- Memoria Una vez la instalación está correctamente realizada se ha de activar el módulo. Para ello en Extensiones Gestor de módulos se selecciona el módulo a activar para así configurarlo al gusto y además posicionarlo correctamente en la web. Haciendo clic sobre el módulo JUJSevents for Jomsocial se entra en la configuración del mismo. En primer lugar se modifica su título, se habilita y se posiciona, en este caso se ha elegido la posición user1. Lo siguiente es configurar el módulo en sí, indicando los eventos que se van a querer mostrar. En la siguiente imagen, Fig se puede ver cómo debe quedar esta configuración. Fig Configuración del módulo JUJSevents. Se configura de tal manera que muestre los eventos de todas las categorías, el orden y que muestre solo los eventos del día. Por último, en el apartado plantilla, se selecciona la opción jomsocial_style_js_side_bottom.php. Esto permite que aparezca el título del módulo en cualquier posición aunque desactivemos la opción de que aparezca el título Instalación y configuración Jforms. - Instalación. La instalación de Jforms es como la de cualquier otro componente. En extensiones Instalar/desinstalar se selecciona el archivo com_jforms_0.7_rc2_rev402 y se sube. La instalación se lleva a cabo con éxito en unos pocos segundos. El componente se puede encontrar en la siguiente dirección:

79 Solución implementada 61 Una vez instalado es muy sencillo de usar. En componentes clic sobre Jforms. - Configuración. En la pestaña Form form information, tan solo se ha configurado el título. Pestaña Form Redirections se ha configurado la página a la cual se quiere que redireccione al usuario una vez envíe el formulario. La página a la que se le redirecciona es la de inicio de Joomla, index.php. Redirections: se ha de escribir index.php. Y el último paso para crear el formulario y quizás la parte más importante a configurar. Se ha de realizar con la misma forma en que está indicada en la siguiente imagen, Fig ya que así los mensajes de notificación recogerán directamente el nombre del usuario y la fecha que haya introducido el usuario. Fig Configuración del componente JForms. Pulsar sobre Guardar y ya se ha creado el formulario de contacto. El siguiente paso es crear una zona en la barra de menú para el componente. En Menús menú principal se ha de hacer clic sobre nuevo. Se ha de elegir JForms Formulario Standard Layout. Ahora se selecciona el formulario que se ha creado anteriormente y se configura en que parte del menú principal aparecerá. Como no dependerá de ninguna otra de las opciones que aparecían se deja tal y como está.

80 62 Playsport, gestión Web del deporte- Memoria Para seleccionar el formulario se realiza a la derecha en Parámetros básicos Una vez selecciono el formulario se guarda y ya aparece en el menú principal tal y como se muestra en la siguiente imagen, Fig Fig Formulario de contacto en el menú principal Solución implementada JForms. Se realiza clic sobre nuevo y aparece una pantalla como la de la siguiente imagen, Fig Fig Pantalla inicial de creación de formulario con el componente JForms. Como se puede ver aún no hay nada creado para este formulario. En unos sencillos pasos es posible crear un formulario de contacto bastante completo. Más adelante se procederá a centrarlo para que su aspecto visual sea el correcto. Para crear los campos del diferente formulario se selecciona cada uno de ellos y se arrastra hacia el panel de la derecha. Con solo soltarlo sobre el panel ya se obtiene un campo creado. Se ha de seguir el mismo procedimiento para todos los campos que se quieran introducir en el formulario. De la misma manera se hace con el resto de campos hasta que se completa el aspecto del formulario dejándolo como en la siguiente imagen, Fig

81 Solución implementada 63 Fig Aspecto final del formulario con JForms. Los campos nombre, apellidos, comentarios y el botón enviar se encuentran en la pestaña Toolbar basic del panel izquierdo. El campo fecha se encuentra en la pestaña advanced. Si se observa este campo haciendo doble clic sobre él se puede configurar el año en el que inicia. En el caso del formulario creado se ha elegido que inicie en el año El campo se encuentra en la misma pestaña que el campo fecha, advanced. En él he se han configurado dos puntos. El de administración al que será enviado el formulario y el asunto del mismo. Para ello en Reply to se ha de escribir el de administración, en este caso el que se creó en la configuración de Joomla. El campo de la imagen Captcha se encuentra en la pestaña spam-control. Del mismo modo con solo arrastrarlo ya se obtiene un control antispam en el formulario de contacto. - Centrado del formulario de acceso para una mejor visualización. Gracias a la herramienta Firebug se puede ver la parte de código que se ha de modificar y se comprueba que el archivo a modificar se encuentra en la ruta: Se abre el archivo con Dreamweaver y en la línea 11 de la div.jform que ha indicado Firebug se añade un margen de izquierdas, margin-left:20% para que el formulario quede centrado.

82 64 Playsport, gestión Web del deporte- Memoria Lo siguiente que se ha de modificar es el título del formulario. El objetivo es centrar este título y de igual forma que con el formulario en sí, en la línea 26 se encuentra div.jform h2. Se centra el título añadiendo un margen. Ahora ya se puede comprobar en la siguiente imagen, Fig el resultado visual del trabajo con el código Css. El formulario queda centrado y mejora la visibilidad de la web. Fig Centrado del formulario de contacto Instalación y configuración RSform. - Instalación. La instalación de RSform es como la de cualquier otro componente. En extensiones Instalar/desinstalar se selecciona el archivo com_rsform y se sube. La instalación se lleva a cabo con éxito en unos pocos segundos. El componente se puede encontrar en la siguiente dirección: Una vez instalado el componente se procede a configurarlo. En componentes clic sobre RSform.

83 Solución implementada 65 - Configuración. En Configuration tan solo se han de configurar unas pocas opciones. Debug mode desactivado, IIS compatibility mode activado y la compatibilidad con el editor de texto también activada Solución implementada RSform. Lo siguiente es configurar parámetros más relacionados directamente con la creación de un formulario. Para ello se ha de hacer clic sobre Manage Forms y una vez aquí clic sobre nuevo. RSform proporciona la posibilidad de crear un formulario con unos pasos de guía, una opción a tener en cuenta para no dejar ningún paso de la configuración sin determinar. Si se hace clic en siguiente permite configurar los siguientes parámetros. - Nombre del formulario. - Disposición del formulario - s de resultados - Qué hacer cuando el formulario se haya enviado. Estos parámetros se han configurado como se muestra en la siguiente imagen, Fig

84 66 Playsport, gestión Web del deporte- Memoria Fig Configuración formulario RSform. Como se puede ver en la imagen se configuran los parámetros anteriormente nombrados. Es importante configurar correctamente el correo de administración además de que se le envíe una copia del formulario al usuario que lo ha enviado. Haciendo clic en siguiente se pasa a la siguiente página en la que permite elegir algún formulario predefinido. En este caso se quiere crear desde cero así que se elige Blank form y se hace clic en Final. Una vez realizados estos pasos se salta a una página como la que se muestra en la siguiente imagen, Fig

85 Solución implementada 67 Fig Imagen pantalla creación formulario RSform. Para introducir campos en el formulario se ha de ir haciendo clic sobre cada uno de los campos que se requieren en el formulario, rellenar la información y guardar. A continuación se describen los campos introducidos en la primera página del formulario. El primer campo introducido se llama nombre equipo y es del tipo Textbox, será un campo requerido. También se introduce un segundo campo llamado ciudad y con las mismas características que el campo nombre equipo. Se introduce otro campo para el mail y se tiene que elegir en la opción Validation Rule. El cuarto campo será del tipo Dropdown con nombre nº de jugadores. Dado que se ha establecido un mínimo de 7 jugadores y un máximo de 13 para este torneo como ítems aparecerán números del 7 al 13. Para realizar un salto de página en el formulario se ha de introducir un campo del tipo Multipage. Esto permite que el formulario de inscripción se realice en dos pasos. En esta segunda página se va a introducir la información del equipo del tipo nombre, apellidos y posición. Todos los campos serán del tipo Textbox excepto el campo posición que será del tipo Dropdown en el cual se podrá elegir la posición del jugador. Los 7 primeros campos de este tipo se marcan como requeridos, el resto no dado que solo es obligatorio un mínimo de 7 jugadores. Se pueden duplicar estos 3 campos haciendo clic

86 68 Playsport, gestión Web del deporte- Memoria sobre ellos y luego pulsando duplicar en el menú superior. El resultado final del formulario se muestra en la siguiente imagen, Fig Fig Formulario inscripción torneo futbol 7. Como se puede apreciar en la imagen la línea punteada indica que es en ese punto donde se salta a la segunda página del formulario de inscripción. Se ha introducido también un campo del tipo Submit button, es decir el botón de enviar. También es importante la configuración de los s de usuario y de administración. Para ello en la pestaña User s se ha de configurar como se muestra en la siguiente imagen, Fig Fig User . Haciendo clic sobre edit the text se puede configurar el mensaje que va a recibir el usuario, recogiendo en una variable su nombre de equipo para que el aspecto de la

87 Solución implementada 69 respuesta sea más personalizado. Los nombres de estas variables se pueden ver haciendo clic sobre el botón que aparece a la derecha, Toggle quick, y el mensaje se ha configurado de la siguiente manera: Querido {Nombre equipo:value}, hemos recibido tu inscripción. En breve nos pondremos en contacto contigo. Lo siguiente es configurar el de administración. Es importante la edición correcta de este mensaje dado que va a ser la información que reciba el administrador y que posteriormente será utilizada para dar a los equipos de alta en el torneo. La correcta configuración se muestra en la siguiente imagen, Fig Fig Admin . Y el mensaje de texto del configurado es el siguiente: Se ha realizado una nueva inscripción en el torneo de futbol 7 con la siguiente información. - {Nombre equipo:caption}:{nombre equipo:value} - { caption}:{ value} - {Ciudad:caption}:{Ciudad:value} Con el nº de jugadores siguiente: - {numero jugadores:caption}{numero jugadores:value}

88 70 Playsport, gestión Web del deporte- Memoria La información de los jugadores es la siguiente: Jugador1: {Nombre1:caption}:{Nombre1:value} {Apellidos1:caption}:{Apellidos1:value} {Posicion1:caption}:{Posicion1:value} Jugador2: {Nombre2:caption}:{Nombre2:value} {Apellidos2:caption}:{Apellidos2:value} {Posicion2:caption}:{Posicion2:value} Jugador3: {Nombre3:caption}:{Nombre3:value} {Apellidos3:caption}:{Apellidos3:value} {Posicion3:caption}:{Posicion3:value} Jugador4: {Nombre4:caption}:{Nombre4:value} {Apellidos4:caption}:{Apellidos4:value} {Posicion4:caption}:{Posicion4:value} Jugador5: {Nombre5:caption}:{Nombre5:value} {Apellidos5:caption}:{Apellidos5:value} {Posicion5:caption}:{Posicion5:value}

89 Solución implementada 71 Jugador6: {Nombre6:caption}:{Nombre6:value} {Apellidos6:caption}:{Apellidos6:value} {Posicion6:caption}:{Posicion6:value} Jugador7: {Nombre7:caption}:{Nombre7:value} {Apellidos7:caption}:{Apellidos7:value} {Posicion7:caption}:{Posicion7:value} Jugador8: {Nombre8:caption}:{Nombre8:value} {Apellidos8:caption}:{Apellidos8:value} {Posicion8:caption}:{Posicion8:value} Jugador9: {Nombre9:caption}:{Nombre9:value} {Apellidos9:caption}:{Apellidos9:value} {Posicion9:caption}:{Posicion9:value} Jugador10: {Nombre10:caption}:{Nombre10:value} {Apellidos10:caption}:{Apellidos10:value} {Posicion10:caption}:{Posicion10:value}

90 72 Playsport, gestión Web del deporte- Memoria Jugador11: {Nombre11:caption}:{Nombre11:value} {Apellidos11:caption}:{Apellidos11:value} {Posicion11:caption}:{Posicion11:value} Jugador12: {Nombre12:caption}:{Nombre12:value} {Apellidos12:caption}:{Apellidos12:value} {Posicion12:caption}:{Posicion12:value} Jugador13: {Nombre13:caption}:{Nombre13:value} {Apellidos13:caption}:{Apellidos13:value} {Posicion13:caption}:{Posicion13:value} El último paso es hacer que el formulario de inscripción aparezca en el menú principal en el apartado de Inscripción. Para ello en la pestaña menús se elige menú principal. Clic sobre nuevo y se elige RSform, se le asigna un nombre y que pertenezca a la opción menú. Guardar y como se puede ver en la siguiente imagen, Fig ya aparece la nueva opción en el menú. Fig Menú inscripción torneo futbol 7. Para el resto de torneos creados se ha de crear también un formulario de inscripción. El proceso a seguir es el mismo pero es importante editar de nuevo el contenido del que

91 Solución implementada 73 se va a enviar al administrador dado que al ser formularios diferentes existe información no necesaria. La forma más sencilla de realizar este proceso es duplicar un formulario ya creado desde Manage forms y editarlo hasta conseguir el resultado deseado Instalación y configuración Joomsport. - Instalación La instalación de este componente se realiza como la de cualquier otro componente. En el apartado Extensiones Instalar/desinstalar Subir paquete: se elige el componente joomsport y clic sobre Subir archivo & instalar. Automáticamente se instalará el componente. - Configuración. Como parámetros a configurar se considera el formato de la fecha y el idioma. Dentro del componente en configuración se elige el formato de fecha d-m-y H:i. En cuanto al idioma se gestiona en el apartado idioma, clic sobre nuevo y se escribe en español en la barra de la derecha cada una de las opciones que aparecen. De esta manera se consigue que la información que se muestra aparezca en español Solución implementada Joomsport. Para obtener una solución óptima se han de crear diferentes puntos. Como ejemplo se han establecido 4 torneos. Estos torneos existen tanto en la sección de información de los del menú superior como en los formularios de inscripción. Dentro de la información de los torneos ya se especifica el número de participantes, la fecha y los jugadores por equipo. Como se puede observar en la explicación de RSform la información solicitada en los formularios de inscripción es acorde con la información que se puede complementar en Joomsport. Por tanto se han de crear 4 torneos. Torneo de futbol 7, torneo de baloncesto, carrera de orientación y torneo de dardos.

92 74 Playsport, gestión Web del deporte- Memoria En el torneo de futbol 7 se crean 4 equipos. La información de estos equipos se encuentra en el de administración y se ha realizado mediante los formularios de inscripción. Para introducir esta información en el componente Joomsport se ha de realizar de forma manual. Se explicará cómo realizar esta gestión para uno de los torneos dado que el resto se realiza de la misma manera. En primer lugar se ha de crear el torneo, en la opción torneos, clic sobre nuevo. Una vez aquí, se asigna el nombre torneo futbol 7, un logotipo para el torneo y una breve descripción sobre el mismo. Este torneo consiste en una liguilla de 4 equipos. Lo siguiente es crear una temporada, clic sobre temporada, nuevo, pestaña Principal y se establecen los parámetros por los cuales se va a regir la temporada tal y como aparece en la siguiente imagen, Fig estableciendo el torneo de la temporada, un nombre y características de los partidos. Fig Parámetros temporada torneo futbol 7. En esta misma pestaña más abajo se añaden los equipos a la temporada pero esto se realiza cuando ya se tienen los equipos creados. En la pestaña Vistas de tabla & Posiciones se elige la información que va a ser mostrada en la tabla de clasificación. También se establece los parámetros por los cuales se va a

93 Solución implementada 75 regir la clasificación en caso de empate de puntos. La configuración establecida se muestra en la siguiente imagen, Fig Fig Parámetros tabla de clasificación torneo futbol 7. Por último en la pestaña Colores de tabla se eligen los colores en los que se van a mostrar las posiciones de la tabla. Se eligen colores para las 2 primeras posiciones. Para finalizar clic sobre guardar. En la pestaña equipos se crea el equipo asignándole el nombre que se ha recibido a través del formulario de inscripción y la ciudad. Se crean un total de 4 equipos que ahora sí en la pestaña Principal de Temporada pueden ser agregados a la temporada. Antes de crear los jugadores se han de establecer las posiciones en las que pueden jugar estos. Para ello en la pestaña Posición se han creado diferentes demarcaciones tal como se muestra en la siguiente imagen, Fig

94 76 Playsport, gestión Web del deporte- Memoria Fig Posiciones jugadores. Lo siguiente es añadir los jugadores, para ello hay que dirigirse a la pestaña jugadores y hacer clic sobre nuevo. Entre la información que se puede añadir sobre un jugador está su nombre, apellidos, apodo, posición y equipo al que pertenece. Se han añadido 7 jugadores por cada uno de los equipos es decir, 4 equipos por 7 jugadores en cada de los equipos hacen un total de 28 jugadores. Lo siguiente es realizar una simulación de los partidos para comprobar el correcto funcionamiento del componente. Dado que es una liguilla de 4 equipos cada uno de ellos ha de jugar 3 partidos siendo un total de 6 partidos. Para crear los partidos se realiza en la opción del menú Fechas de encuentros en donde se podrá configurar que el partido ya ha sido disputado o no. En este caso se mostrará como ya disputado para visualizar correctamente una clasificación real. El resultado final de los partidos creados es el que se muestra en la siguiente imagen, Fig

95 Solución implementada 77 Fig Partidos disputados Instalación y configuración FrontPage SlideShow. - Instalación En el apartado Extensiones Instalar/desinstalar Subir paquete: se elige el componente com_fpss-v2.0.0_j1.5 y clic sobre Subir archivo & instalar. Automáticamente se instalará el componente. También se ha de instalar el módulo. Para ello y siguiendo el mismo procedimiento en el apartado Extensiones Instalar/desinstalar Subir paquete: elegimos el módulo mod_fpss-v2.0.0_j1.5 y hacemos clic sobre Subir archivo & instalar. - Configuración. Se configura el módulo para que se muestre solo en la página de inicio. Para acceder al módulo se ha de hacer clic sobre él en el apartado, gestor de módulos y en la parte inferior izquierda se marca selecciona ítem(s) del menú de la lista y se marca solo la página de inicio Solución implementada FrontPage SlideShow. En componentes FrontPage SlideShow, se selecciona la pestaña Categories y se crea la categoría que se va a hacer servir. La categoría tendrá una funcionalidad de información sobre los servicios de la web en la página principal. A continuación se explicará por pasos como crear sencillamente una galería de imágenes dinámicas.

96 78 Playsport, gestión Web del deporte- Memoria 1º Paso: Se crea la categoría Información web haciendo clic sobre Nuevo y se le dan las características que se muestran en la siguiente imagen. Fig Fig Configuración de la categoría creada con el componente FrontPage SlideShow. Es importante prestar atención al detalle de que en el apartado Default resize widht for uploaded images se le da el mismo ancho que tiene el módulo. Más adelante se podrá ver que entrando en el módulo en los parámetros de la derecha viene indicado el ancho del módulo. Guardar y como se puede observar en la siguiente imagen, Fig la categoría ya está creada. Fig Resultado de crear una categoría con FrontPage slidesohw. Es importante prestar atención al ID de la categoría. Más adelante se necesitará para relacionar la categoría con el módulo en el apartado gestor de módulos.

97 Solución implementada 79 2º Paso: Creación de la lista de imágenes dinámicas. En la pestaña Slide List se hace clic sobre nuevo para acceder a la pantalla donde se colocarán las imágenes. La configuración de estas, entra dentro de la imaginación de cada uno para su presentación. Rellenar el texto, título, etc.. son opciones más al gusto de quien crea la galería de imágenes. A continuación se destacan las opciones de configuración importantes. La categoría a la que va a pertenecer la imagen. En el caso de la web pertenecerá a la categoría Información web. Esto se elige en la opción Category seleccionando la categoría deseada en el menú desplegable. Por último, en la parte inferior, se ha de marcar la opción Upload image para cargar la imagen deseada. También se marcan las opciones de lo que se va a mostrar en las imágenes dinámicas tal y como se puede ver en la siguiente imagen, Fig Fig Configurar el contenido que se va a mostrar en la galería de imágenes. Es importante señalar que la imagen que se carga ha de coincidir relativamente con las medidas del módulo Frontpage SlideShow. Para cargar el resto de imágenes el proceso es el mismo que con la primera. Se van creando nuevas Slides para cada una de las imágenes y asignándolas a la categoría deseada. Existe un problema con el posicionamiento del módulo en la web. Se elija la opción que se elija el módulo siempre aparece centrado con lo cual puede ocupar posiciones de otros módulos. Para solucionar esto se utiliza de nuevo Firebug.

98 80 Playsport, gestión Web del deporte- Memoria El módulo tiene varios templates que se pueden configurar accediendo al propio módulo. En el siguiente caso se modificará código Css en el template JJ-Rasper. La ruta del archivo es: Rasper/css/template_css.php En la línea 17 se encuentra gracias a Firebug donde modificar para que la galería de imágenes no aparezca centrada. Fig Código a modificar para descentrar el módulo FrontPage slideshow. Se añade: margin-left:0px; y de esta manera se consigue que ya no aparezca centrada. Lo siguiente es posicionar el módulo del frontpage en header1 y ya queda un espacio a su derecha que se puede complementar con algún otro módulo dándole más riqueza a la página. La configuración del módulo queda tal y como muestra la siguiente imagen, Fig Fig Parámetros a configurar en el módulo FrontPage Slideshow.

99 Solución implementada Instalación y configuración Akeeba Backup - Instalación. Extensiones Instalar/desinstalar componente con nombre com_akeeba core subir archivo & instalar. El siguiente paso es instalar también el idioma español. Para ello de la misma manera se busca el archivo com_akeeba-es-es y clic sobre subir archivo & instalar. - Configuración. Lo primero es anotar las rutas donde va a realizar la copia de seguridad. Se puede encontrar en configuración tal y como muestra la siguiente imagen, Fig Fig Ruta donde va a realizar las copias de seguridad el componente Akeeba Backup. Haciendo clic sobre navegar se puede ver que la ruta de salida es: C:\xampp\htdocs\joomla\administrator\components\com_akeeba\backup Y haciendo clic sobre navegar en directorio temporal la ruta es: C:\xampp\htdocs\joomla\tmp. Este directorio temporal es menos importante dado que cuando realice la copia de seguridad éste va a quedar vacio. El siguiente paso es cambiar el formato de la salida de la copia de seguridad a formato zip. Del mismo modo en configuración motor del archivo se ha cambiado el formato de Akeeba Backup (JPA) por el formato zip que es algo mucho más común. Por último se guarda la configuración. Un detalle importante a configurar sólo si se considera que necesario, es vetar algunos directorios para que no sean guardados. Esto se realiza cuando el nivel de contenidos de una web es excesivamente elevado debido al contenido multimedia por ejemplo. Para ello en Exclusión de ficheros y directorios, haciendo clic sobre la carpeta se consigue que no se incluya ese directorio en la copia de seguridad. Se puede observar con facilidad en la

100 82 Playsport, gestión Web del deporte- Memoria siguiente imagen, Fig dado que se pone en color rojo al igual que ya se encontraban la carpeta caché o tmp. Fig Vetado de módulos por parte del componente Akeeba Backup Solución implementada Akeeba Backup. Para hacer una copia de seguridad, en el menú se ha de hacer clic sobre Respaldar ahora. Se realiza una breve descripción sobre la copia de seguridad y se hace clic en respaldar ahora. Lo siguiente es esperar a que la barra de progreso llegue al 100%. Es recomendable no navegar por la web ni por la administración del back-end mientras se realiza esta copia de seguridad. Una vez ha finalizado el respaldo clic sobre Administrar ficheros de respaldo. Aquí se podrá ver todas las copias de seguridad que se hayan realizado del sitio web. Para observar más detenidamente esta copia hay que dirigirse a la ruta: C:\xampp\htdocs\joomla\administrator\components\com_akeeba\backup. Se puede observar al descomprimir el archivo zip de la copia de seguridad que tiene la misma estructura que cuando se realiza la instalación de Joomla, incluso la carpeta installation que se elimina al realizar la instalación de Joomla. Esta copia de seguridad guarda todo. Imágenes, componentes, módulos, base de datos - Como restaurar una copia de seguridad. Hay dos cosas que llaman la atención de la copia de seguridad. La primera es que tenga una estructura tan parecida a una instalación normal de Joomla. La segunda es la carpeta sql que se crea.

101 Solución implementada 83 Si se entra en la ruta: C:\xampp\htdocs\joomla\administrator\components\com_akeeba\backup\site-localhost \installation\sql se pueden observar dos archivos en los que se encuentra toda la información de la base de datos. Para realizar la restauración es muy sencillo gracias a Akeeba. Para realizar una comprobación de cómo funciona la restauración se selecciona la carpeta descomprimida del archivo zip que había generado Akeeba, se copia y se pega con otro nombre. Copia Playsport por ejemplo. Se ha de copiar en la ruta del servidor web: C:\xampp\htdocs y lo siguiente es acceder a ella desde el navegador web: De repente lo que aparece es la interfaz de Akeeba para conseguir realizar la restauración y utiliza su propia carpeta installation para llevarla a cabo. Se puede observar esta interfaz en la siguiente imagen, Fig Fig Interfaz del componente Akeeba Backup al realizar una restauración. Para llevar a cabo la restauración click sobre Next arriba a la derecha. En el siguiente paso se ha de indicar la base de datos que va a utilizar para realizar la restauración tal y como muestra la siguiente imagen, Fig Fig Relación de la base de datos al realizar una restauración con Akeeba Backup.

102 84 Playsport, gestión Web del deporte- Memoria Pulsando sobre next aparece una barra de progreso en la cual se ha de pulsar ok cuando finalice. Next de nuevo y finaliza la restauración. Aparece la siguiente pantalla en la cual se ha de hacer click sobe remove the installation directory tal y como se muestra en la siguiente imagen, Fig Fig Opción remove the installation directory. Al borrar el directorio de instalación el componente Akeeba directamente redirecciona a la página web dentro de la nueva carpeta que se había creado. Como se puede observar en la siguiente imagen, Fig es completamente funcional y contiene exactamente los mismos parámetros con la única diferencia de que la posición de los módulos ha variado desde que se hizo la copia de seguridad. Sin duda, una herramienta muy importante. Fig Resultado de la restauración de la web mediante Akeeba backup.

103 Solución implementada Instalación y configuración módulos Encuesta Para crear una encuesta se ha de ir a componentes encuestas y clic en nuevo. Una vez aquí se ha de asignar un nombre y alias a la encuesta. El tiempo de intervalo entre los votos y las opciones que va a tener la encuesta siendo estas un máximo de 12. Una vez creada la encuesta lo siguiente es publicarla mediante su módulo. Para ello en extensiones gestor de módulos, se ha de hacer clic sobre nuevo. Una vez aquí se selecciona encuesta y siguiente. Se le asigna un título la posición donde se quiere mostrar la encuesta, el nivel de acceso y la página donde se va a querer mostrar. En la web la encuesta se encuentra publicada sólo en la página de inicio y en la posición right. El último paso es seleccionar la encuesta en parámetros del módulo, encuesta. Se elige la encuesta recientemente creada y ésta ya aparece totalmente funcional en la página y posición elegidas Buscar. Para poder implementar el módulo buscar tan solo se ha de ir a Extensiones Gestor de módulos y hacer clic sobre Nuevo. Una vez aquí se elige el módulo de Joomla buscar y se configura. Para ello se habilita el módulo y se escoge la posición search como la posición donde va a ser mostrado. Por último se guardan los cambios Topmembers, onlineusers y lastmembers. Estos tres módulos son tres módulos que incorpora Jomsocial. Para mostrarlos solo se ha de hacer clic sobre ellos desde el gestor de módulos. Una vez dentro del módulo se elige la posición deseada y la página donde se quieren mostrar. Los tres módulos se muestran sólo en la página de inicio y en la posición user2, user3 y right. Una vez posicionados solo se han de habilitar y guardar los cambios. Los tres módulos aparecen en la página de inicio de un modo completamente funcional.

104 86 Playsport, gestión Web del deporte- Memoria Banner. El proceso de creación de anuncios es muy sencillo. En la página web permite crear anuncios de forma dinámica y en unos pasos muy sencillos todo de forma gratuita. Una vez creados los 4 banners con las medidas 468x60px. se han de introducir en la página. Para ello se crea una categoría dentro del componente banner y un cliente ficticio haciendo clic sobre nuevo e introduciendo un nombre para cada una de ellas. El último paso para cada uno de los anuncios es crearlos. Para ello dentro del componente banner clic sobre nuevo en la sección anuncios. Se introduce un nombre, categoría, cliente y se selecciona la imagen creada. Estas imágenes han de estar en la ruta Joomla/images/banners. Lo siguiente es asociar estos anuncios a un módulo. En Extensiones Gestor de módulos clic sobre Nuevo. Se selecciona banner, se asigna un título, la posición banner1 y se le asigna el cliente y la categoría de los banners creados. Una vez guardado el banner ya se muestra de forma dinámica en la posición elegida Firebug y Dreamweaver en el proceso de creación. Firebug es una gran herramienta a la hora de modificar código sobre todo en gestores de contenido como Joomla donde su primera utilidad no es modificar el código. A continuación se realizará un listado de las líneas de código que se han localizado gracias a Firebug y el motivo por el cual se han modificado con Dreamweaver pudiendo comprobar de esta manera como ha influido el plugin de Firefox, Firebug y la herramienta de edición Web Dreamweaver durante el proceso de creación de la web. Cuando se posicionó el módulo de FrontPage SlideShow este no aparece alineado a la izquierda si no que aparece centrado produciendo esto que ocupe partes de otros módulos posicionales del template. Gracias a Firebug se ha localizado en la ruta

105 Solución implementada 87 el archivo template.css La línea de código que se ha modificado es la 17 añadiendo un margen de izquierdas de 0px consiguiendo así que el módulo se alinee a la izquierda y evitando que se solape con otros módulos posicionales. Cuando se situó en una de las páginas de la web el componente Jforms este no aparece centrado. Para conseguir centrarlo gracias a Firebug se encuentra en la ruta el archivo default.css y las siguientes líneas de código a modificar. Se han modificado las líneas 14 y 27 añadiendo un margen de izquierdas del 20%. Cuando se ha realizado la instalación del componente Jomsocial y sobre todo al realizar la traducción se han localizado diversos problemas. En primer lugar alguno de los campos de texto de la segunda página de registro son excesivamente amplios impidiendo de esta manera que se muestre la información dinámica al pasar el ratón sobre ellos. Para solucionarlo se ha localizado con Firebug en la ruta el archivo style.css y la línea de código que ha sido modificada es la 101 disminuyendo al 70% el ancho de estos campos. En este mismo archivo también se ha modificado la línea de código 926. Al realizar la traducción el módulo de inicio de sesión es demasiado estrecho para que aparezca todo el texto sin que este aparezca solapado. En esta línea se ha aumentado el ancho a 300px para evitar este problema. En otro de los campos donde aparecen problemas al realizar la traducción es en eventos, horas/fechas. Este texto aparece solapado. En la línea 367 del mismo archivo se ha aumentado el ancho a 50px evitando de nuevo este solapamiento de texto.

106 88 Playsport, gestión Web del deporte- Memoria

107 Manuales Manuales Manual de creación de la Web. Para poder llevar a cabo la creación de la Web planteada en este proyecto dentro de un entorno local existen diversas necesidades. Lo primero es la necesidad de un servidor web local. Para ello se ha elegido la versión 1.73 del paquete Xampp. Una vez instalado se ha de configurar un usuario administrador con todos los permisos y crear una base de datos. Este usuario será el administrador de la web desde el back-end y la base de datos será la que utilizará Joomla. El siguiente punto es instalar Joomla. Para ello se descarga la aplicación (versión ) desde su website oficial, Una vez descargado se ha de descomprimir el paquete dentro de una carpeta situada en el directorio htdocs de Xampp. Para iniciar la instalación se ha de introducir la dirección en un navegador web la dirección del tipo donde Joomla es el nombre de la carpeta creada dentro de htdocs. Se realiza la instalación en unos sencillos pasos configurando correctamente la base de datos previamente creada, y el usuario administrador también creado con anterioridad. También se omite introducir datos de ejemplo. Al finalizar la instalación se ha de eliminar la carpeta installation dentro del directorio Joomla para poder acceder al back-end. Una vez realizada la instalación se accede con el usuario administrador y se configuran diversos parámetros tales como el editor de texto a utilizar, el correo SMTP de administración de la web o activar el debug mode para que funcionen extensiones previas a las versiones 1.5.x de Joomla. Lo siguiente es instalar la plantilla adecuada. Para ello se elige la plantilla gk_icki_sports y se instala. Posteriormente a la instalación de ésta se ha de configurar como la plantilla predeterminada.

108 90 Playsport, gestión Web del deporte- Memoria Una vez Joomla está listo para ser utilizado se procede a la búsqueda de extensiones que cubran las necesidades detectadas. Es posible conocer el mundo de las extensiones de Joomla desde la web Las extensiones elegidas como solución son: - Akeeba backup (gestión de copias de seguridad). - Jomsocial (red social). - RSform (gestión de formularios). - Jform (gestión de formularios). - FrontPage SlideShow (galería de imágenes dinámicas). - JCE (editor de texto). - Joomsport (gestión deportiva). La primera extensión a instalar es JCE para conseguir un editor de textos óptimo diferente al que ya ofrece Joomla. Se configura y se establece como editor de texto predeterminado para la web. En segundo lugar se instala Akeeba backup, una extensión que permite respaldar y restaurar de manera muy simple la página web. Se configurar para evitar que dentro del respaldo entren directorios con demasiado volumen de información evitando así posibles ralentizaciones en la web a la hora de realizar una copia de seguridad. La tercera extensión a instalar es Jomsocial. Una vez hecho esto se procede a su traducción y a la instalación de extensiones como JUJsevents. Por último se configura de manera adecuada para conseguir una traducción completa y se activa la librería Curl en Xampp para poder enlazar videos. También se han de modificar diversos parámetros de sus tablas en la base de datos para mejorar las páginas de registro. En cuarto lugar se instalan las extensiones Jforms y RSforms. Se traducen correctamente instalando o copiando los archivos necesarios y se configuran para posteriormente crear los diferentes formularios de contacto e inscripción La quinta extensión a instalar es FrontPage SlideShow. Una vez realizado se configura adecuadamente creando las galerías de imágenes necesarias.

109 Manuales 91 En sexto lugar se instala la extensión Joomsport. Se realiza la traducción copiando los archivos necesarios y se configura correctamente para poder gestionar de manera adecuada los torneos. Después de la instalación de extensiones se ha de crear el contenido de la web desde la sección artículos para posteriormente colocarlos en el lugar elegido. Algo común a todas las opciones descritas es su posicionamiento dentro de la web. Introduciendo al final de la dirección web?tp=1 se puede observar las posiciones dentro de la plantilla. Desde el gestor de módulos se posiciona cada uno de los módulos en el lugar adecuado y se habilitan. Una vez hecho esto se han de crear los enlaces de los componentes desde el Menú principal para conseguir que aparezcan en el lugar elegido. Para finalizar se ha de realizar un recorrido extenso por toda la web para detectar aquellos componentes, módulos o plugins que no se muestran como se desea. Se analiza mediante Firebug cada uno de los lugares de la web que el contenido no se muestra correctamente. Una vez localizadas las líneas de código Css mediante Dreamweaver se corrigen estos errores para una correcta visualización de todo el contenido Manual de uso de la Web. El uso de la web Playsport se basa en su motor conocido como la comunidad PLAYSPORT. Además del componente principal también la conforman varios puntos más como la información de torneos esporádicos a modo de artículos y los formularios de inscripción y de contacto. Cuando un usuario ingrese por primera vez en la web accediendo a la comunidad PLAYSPORT ya puede consultar la información de la red social que los usuarios estimen oportuno declarar como pública. También podrá consultar la información de los torneos dado que es de acceso público.

110 92 Playsport, gestión Web del deporte- Memoria Para poder hacer uso del resto de servicios debe realizar un registro. Este registro se lleva a cabo desde la primera página de la comunidad Playsport. En este proceso se deberá rellenar datos personales e indicar el tipo de usuario que es, jugador o propietario. Como en cualquier registro, se deberán completar aquellos datos que se consideren como obligatorios para poder finalizarlo y una vez realizado podrá subir una imagen a su perfil. Al finalizar este proceso automáticamente se enviará un de confirmación al usuario con un enlace de activación que una vez ejecutado le dará acceso total a la red social. Todo usuario registrado podrá disfrutar de todas las posibilidades que provee la Web. Para ello se debe acceder con el login y password elegidos en el proceso de registro. Una vez iniciada la sesión se podrá disfrutar al máximo de la comunidad y enviar formularios de inscripción en torneos en caso de que se estime oportuna la participación en alguno de ellos. La red social tiene menú de navegación propio. Se explicará en cada una de las secciones que actividades se pueden realizar. Este menú se compone por varios campos tales como: tus datos, amigos, grupos, fotos, videos, eventos deportivos, notificaciones globales, invitar amigos, mensajes nuevos y cerrar sesión. Dentro de estos campos existen submenús para los campos tus datos y amigos. Dentro de tus datos el usuario puede: cambiar su foto, cambiar su perfil de video, editar su perfil, editar sus datos, configurar su privacidad, marcar sus preferencias o personalizar su página tal y como se puede observar en la siguiente imagen, Fig Fig Menú tus datos.

111 Manuales 93 Dentro de amigos se pueden ver todos los amigos, buscar, realizar una búsqueda avanzada, invitar, consultar las solicitudes enviadas y consultar las solicitudes pendientes de aprobación tal y como se muestra en la siguiente imagen, Fig Fig Menú Amigos. En la sección grupos el usuario puede ver sus grupos, consultar las invitaciones pendientes, buscar grupos o crear un grupo propio asignándole la categoría deportiva que elija el usuario entre las disponibles tal y como se puede observar en la siguiente imagen, Fig Fig Menú Grupos. En la sección fotos el usuario puede ver sus fotos, crear un álbum de fotos y subir fotos tal y como se puede observar en la siguiente imagen, Fig Fig Menú fotos.

112 94 Playsport, gestión Web del deporte- Memoria En la sección vídeos el usuario puede ver sus vídeos o añadir uno nuevo. En el caso de que el usuario quiera añadir un video puede enlazarlo desde diferentes páginas como Youtube, Liveleak, Myspace, Yahoo video o subir uno propio respetando las condiciones que se indican. Se puede observar en la siguiente imagen, Fig.5.5. junto con el ejemplo de un video enlazado de Youtube Fig Menú videos. Desde la sección eventos deportivos el usuario puede ver los eventos disponibles, los suyos propios, las invitaciones pendientes, los eventos pasados o incluso buscar eventos. También puede crear sus propios eventos deportivos indicando cosas como el título, una descripción, la categoría del evento, localización, hora de inicio y de fin, el nº de plazas, si va a ser público o privado y si va a permitir a los invitados que realicen invitaciones. En la siguiente imagen, Fig se muestra un ejemplo de la sección eventos deportivos donde aparece información de un evento creado por parte del usuario.

113 Manuales 95 Fig Menú eventos deportivos. En la barra de navegación, Fig de la comunidad el usuario también dispone de 4 botones cada uno de ellos con diferente funcionalidad. Se describen a continuación de izquierda a derecha. Fig Botones barra de navegación. El primero de los botones permite al usuario dirigirse a su página de inicio dentro de la comunidad. En el segundo de los botones el usuario puede consultar las notificaciones globales en el caso de que estas existan. El tercer botón permite al usuario invitar a amigos a la red social. El cuarto botón permite al usuario consultar su bandeja de entrada de mensajes. El quinto y último botón permite al usuario cerrar su sesión dentro de la comunidad. Además la comunidad permite diferentes funcionalidades a los usuarios típicas en las redes sociales como el muro, en donde puede elegir si lo que escribe será público, solo para registrados, solo para amigos o privado, el botón me gusta e información actualizada sobre la actividad reciente en la red social tal y como se puede observar en la siguiente imagen, Fig. 5.8.

114 96 Playsport, gestión Web del deporte- Memoria Fig Funcionalidades típicas red social. Además de todas las posibilidades que ofrece la comunidad PLAYSPORT la web contiene otras funcionalidades. Entre ellas se encuentra la posibilidad de inscribirse a un torneo. Estos torneos son propuestos por propietarios de instalaciones y desde la administración de la Web se gestionan estos torneos. Para la correcta gestión de éstos se facilita la visualización de la clasificación, fechas y resultados de los partidos a los usuarios y también se les permite inscribirse a los mismos desde la Web tal y como se muestra en la siguiente imagen, Fig aparecen todas estas opciones.

115 Manuales 97 Fig Gestión de torneos. En la primera opción se accede a la inscripción de torneos solo si se es un usuario registrado. Como se puede ver en la imagen, Fig se observa la primera página del formulario de inscripción donde los datos demandados son los mismos que necesita la extensión Joomsport. Fig Formulario de inscripción. En la segunda opción, Fig se puede visualizar la clasificación de un torneo, en este caso simulado. Fig Clasificación torneo simulado.

116 98 Playsport, gestión Web del deporte- Memoria Y por último en la tercera opción se pueden visualizar las fechas de encuentros y los resultados de los mismos, en este caso completos dado que se ha simulado un torneo tal y como se puede observar en la siguiente imagen, Fig Fig Fechas y resultados torneo.

117 Pruebas Pruebas Prueba funcionamiento del registro en la comunidad Playsport. En esta prueba se comprueba el funcionamiento del proceso de registro en la comunidad Playsport. Se crean 3 usuarios de ejemplo llamados usuario1, usuario2 y usuario3. Lo primero es acceder a la comunidad Playsport en el menú superior y posteriormente hacer clic sobre el botón Únete ahora a nuestra página. La información de usuario introducida es la que se muestra en la siguiente imagen, Fig Fig Registro usuario comunidad. Como prueba también se verifica que se muestra la información de términos y condiciones establecida en la configuración de Jomsocial. Se puede comprobar en la siguiente imagen, Fig cómo los términos y condiciones aparecen en una ventana dinámica.

118 100 Playsport, gestión Web del deporte- Memoria Fig Términos y condiciones. El siguiente paso que se ha de llevar a cabo en esta prueba es completar la siguiente página de registro. Esta página es más específica y está destinada a completar la información personal del usuario. En esta página se han de cumplimentar datos como el sexo, fecha de nacimiento, tipo usuario, deportes favoritos, dirección, provincia, ciudad y país. Una vez finalizada esta página del registro el usuario puede subir una imagen de perfil para finalizar. Al finalizar el proceso se envía un de activación al usuario. Dado que la Web se encuentra en un entorno local no se podrá activar la cuenta desde el así que se ha de activar desde la parte de administración de Jomsocial. En la siguiente imagen, Fig. 6.3 se pueden observar los dos s enviados al usuario al finalizar su registro. Fig s de registro en la comunidad.

119 Pruebas 101 Como se puede observar en la siguiente imagen, Fig. 6.5 el administrador también recibe de notificación del registro realizado. Fig para el administrador registro comunidad. En la siguiente imagen, Fig se muestra como ahora el usuario aparece en el panel de administración de Jomsocial. Fig Usuarios Jomsocial Prueba funcionamiento formulario de inscripción. En esta prueba se van a comprobar las diferentes funcionalidades de los formularios de inscripción. En primer lugar se comprueba que cuando no se rellena un campo requerido el usuario es avisado de que hay campos por rellenar. En la siguiente imagen, Fig. 6.7 se puede comprobar cómo avisa de que faltan campos por rellenar si se hace clic sobre siguiente y los campos obligatorios no han sido completados. Fig Aviso de campos por completar.