Creación de sitios web para equipos deportivos : Tatami Rugby Club

www.tatami-rc.com Jose Ignacio Escribá Lluch ÍNDICE DE LA MEMORIA 1PLANTEAMIENTO DEL PROBLEMA 5 1.1 Introducción 5 1.2 Sobre el proyecto 6 1.2.1 El equipo y Finalidad 2ESPECIFICACIÓN DE REQUISITOS 7 2.1 Definición general 7 2.1.1. Perspectiva del producto 2.1.1.1. Interfaces del sistema 2.1.1.2. Interfaces de usuario 2.1.1.3. Interfaces de hardware 2.1.1.4. Interfaces de software 2.1.1.5. Interfaces de comunicación 2.1.1.6. Requisitos para la adecuación del sitio 2.2 Requisitos funcionales 9 2.2.1. Gestión de cuentas de usuario 2.2.1.1. Identificarse en la aplicación 2.2.1.2. Desconectarse de la web 2.2.1.3. Ver página principal 2.2.1.4. Modificar datos de la cuenta 2.2.1.5. Ver estado de la cuenta 2.2.1.6. Gestionar el estado de la cuenta 2.2.2. Gestión de perfiles 2.2.2.1. Ver perfil de usuario 2.2.2.2. Editar el perfil del usuario 2.2.3. Gestión del blog 2.2.3.1. Ver un post del blog 2.2.3.2. Crear un nuevo post en el blog 2.2.3.3. Editar la información de un post 2.2.3.4. Eliminar un post del blog 2.2.4. Gestión de las imágenes 2.2.4.1. Subir una fotografía a un álbum 2.2.4.2. Modificar datos de una fotografía 2.2.4.3. Eliminar una fotografía 2.2.5. Gestión de comentarios 2.2.5.1. Crear un comentario 2.2.5.2. Eliminar un comentario 2.3 Requisitos de interfaces externas 30 2.3.1. Interfaces usuario 2.3.2. Interfaces hardware 2.3.3. Interfaces software 2.3.4. Interfaces comunicación 2.4 Requisitos de rendimiento 38 2.5 Requisitos de diseño 3DISEÑO 40 4IMPLEMENTACIÓN 43 4.1 AJAX 43 4.1.1. Origen de AJAX 4.1.2. Antes de AJAX 4.1.3. Funcionamiento de AJAX 4.1.4. Componentes 4.1.4.1. HTML 4.1.4.2. CSS 4.1.4.3. Javascript 4.1.4.4. DOM 4.1.4.5. XML 4.1.4.6. Librerias empleadas 4.2 MySQL 50 4.2.1. Introducción 4.2.2. Características 4.3 Wordpress 52 4.3.1 Introducción 4.3.2. Estructura 4.3.3. Funcionalidades 4.4 Reutilización de código 55 5CONCLUSIONES 58 6MI PRIMER PASEO POR LA WEB 60 7BIBLIOGRAFÍA 66 1.- PLANTEAMIENTO DEL PROBLEMA 1.1 Introducción Cuando surgió sobre el año 1989, el uso de Internet en las actividades diarias se ha convertido en una práctica frecuente en nuestra sociedad moderna. El continuo avance de su uso está desbancando al resto de medios convencionales como sistema de información, llevando a los internautas a incrementar el tiempo que pasan conectados a este medio y, cada vez en mayor medida, haciendo un uso más sofisticado de la Red. Es por esto, que Internet es una herramienta que se reinventa constantemente, permaneciendo en una incesante evolución. El avance de la tecnología está permitiendo que el usuario adquiera una mayor importancia y participación en los servicios que ofrecen, ya que las prestaciones de ésta se van ampliando. El aumento del número de conexiones, la velocidad de transferencia de las mismas o la aparición de nuevas herramientas de desarrollo, son algunos de los numerosos motivos que están transformando la posición del usuario de ser un simple observador de lo que acontece en Internet, a formar parte de él. La aparición de blogs, contenido descargable en streaming o los foros de opinión, pueden ser claros ejemplos de esta progresión en su filosofía. Hoy en día, la divulgación de comunidades de usuarios o webs interactivas es una tendencia que está en continuo aumento. Compartir conocimientos, inquietudes o simplemente aspectos de la vida cotidiana, son prácticas1que se realizan cada vez con una mayor asiduidad. El 2007 fue el año donde las redes sociales y blogs se consolidaron experimentando un crecimiento más que notable. Sólo en ese año, comenta el artículo, 110 millones de internautas se inscribieron en MySpace y 55 millones en Facebook, claros referentes del concepto de red social. Este incremento en el número de inscripciones supuso un crecimiento de un 30% y un 100% respectivamente, lo cual llevó a Facebook a tener una valoración de 15.000 millones de dólares, casi tanto como la General Motors, dato más que relevante teniendo en cuenta que en este portal no se comercializa ningún tipo de producto. Este hecho nos tiene que dar una idea de la importancia que está adquiriendo el rol del usuario en el marco de Internet, y cómo éste va evolucionando en esa misma dirección. Por otro lado, la adquisición de hábitos saludables es una preocupación cada vez más presente en las personas. Según el Ministerio de Educación, Política social y Deportes, se está observando un incremento considerable en la realización de actividades físicas, desde andar hasta la actividad en gimnasios o la realización de alguna disciplina deportiva, así como del tiempo y nivel de exigencia que requerimos de las mismas. Esta mayor demanda de servicios relacionados con las actividades físicas está muy presente en los centros deportivos, pero también en la Red, donde el usuario busca, cada vez más, referencias e información, no conformándose con una única perspectiva sobre la actividad que realiza. En la sociedad en la que estamos sumergidos, hace que no nos contentemos con una única fuente de información donde encontrar referencias hacia nuestras inquietudes, sino que nos hace explorar e investigar todas las variantes y vertientes de aquello que despierta nuestro interés, y la práctica deportiva, no es una excepción. A raíz de todo lo comentado en este apartado, surge el planteamiento del presente proyecto. Tatami-rc.com, que es el nombre del mismo, es una propuesta para la unificación de ambas necesidades tan presentes en nuestra sociedad, tanto el hecho de poder proporcionar información genérica que sirva como referente para que cualquier usuario pueda llevar a cabo la realización de la práctica deportiva libremente, así como la posibilidad de conocer experiencias, opiniones y poder compartirlas con personas que tengan nuestras mismas inquietudes y aficiones (todo esto siempre incluido dentro el marco contextual del mundo deportivo). 1.2 Sobre el proyecto 1.2.1 El equipo y Finalidad Para dar a conocer a mi equipo, el Tatami RC y más que eso, para tener un lugar donde poder compartir impresiones del partido, últimos resultados, fotos de cenas… Se sugirió crear un sitio web para que todos tuviéramos constancia de todo lo que ocurre en nuestro club y alrededores. Somos un equipos joven, con lo que conlleva a que todos los integrantes son conocedores y usuarios a diario de webs referentes a redes sociales, blogs. Esto facilita mucho a la hora de comunicar algo a todos los integrantes del grupo ya que visitan la web con frecuencia y hace un mayor efecto de propagación de los cambios que puedan ocurrir durante la temporada. En definitiva, la finalidad de este proyecto era involucrar al club entero a implicarse más en el equipo y que fuéramos más que un club. 2.- ESPECIFICACIÓN de REQUISITOS 2.1. Definición General 2.1.1. Perspectiva del producto En el presente apartado, se va a comentar la relación existente entre la aplicación con otros componentes, como parte del sistema. Se especificarán los accesos y formas de comunicación con el equipo donde se ubica, con el resto de aplicaciones del servidor necesarias para su funcionamiento, con el usuario que emite peticiones para acceder a sus servicios, etc. En definitiva, todos aquellos requerimientos externos a la aplicación que son necesarios para que ésta alcance sus objetivos y pueda ejecutar sus servicios correctamente. 2.1.1.1. Interefaces del sistema www.tatami-rc.com es una aplicación diseñada casi íntegramente, por lo que es independiente de otros sistemas en la realización de sus procesos. Forma parte de un producto software mayor, por lo que en sus servicios establecen alguna relaciones o enlaces de comunicación con otras aplicaciones, colabora con otras para poder desempeñar sus funciones (por ejemplo, con el SGBD). 2.1.1.2. Interfaces de usuario Como se trata de una aplicación web, el usuario accederá a ella a través del navegador de Internet (Internet Explorer, Mozilla Firefox, Safari,…), donde demandará los servicios que desee, y donde le serán devueltos los resultados a sus peticiones. Debido a que el flujo de información se transmite a través de la conexión a Internet, se hace recomendable el uso de interfaces sencillas, que ajusten la cantidad de recursos y elementos mostrados por pantalla a las necesidades que se puedan tener, sin excesos. De esta forma, se experimenta una mejoría en los tiempos de carga y respuesta, dinamizando la comunicación entre el usuario y la aplicación, además de aportar sensaciones de sencillez y claridad, aumentando la usabilidad de la página, pilares básicos de la filosofía de la Web 2.0. 2.1.1.3. Interfaces de hardware Los entornos web requieren su ubicación en un equipo que actúe de servidor. A través de él, se proveen los servicios a otros usuarios de la red, denominados clientes. Además, el sistema de la aplicación se presenta con una estructura que sigue el patrón de Modelo Vista Controlador (MVC), por lo que se precisará un SGBD, en el que almacenar la información de las cuentas de usuario, a fin de garantizar su persistencia. Por lo tanto, se requerirá un equipo que actúe de servidor, en el que se ejecutará la aplicación en fase de producción, junto al SGBD para la gestión de la información que se maneje. Cabe mencionar, también, que el servidor debe contar con todos los dispositivos de comunicación necesarios para la salida a Internet. Por otro lado, el cliente requerirá un equipo que también posea conexión a la Red, y cuente con el software necesario para la visualización de páginas web a través de su navegador. 2.1.1.4. Interfaces de software Como ya se ha mencionado con anterioridad, esta página es un proyecto software pensado y generado en su totalidad como un sistema independiente. Es por esto, que al no formar parte de ningún otro de orden superior, no debe desarrollar ningún tipo de interfaz de comunicación con otra aplicación. 2.1.1.5. Interfaces de comunicación La comunicación cliente-servidor se realiza a través de Internet, por lo tanto, se empleará el protocolo TCP/IP para las conexiones e intercambio de información. Adaptándose a las nuevas tendencias del desarrollo en la Red, se empleará el sistema REpresentational State Transfer (REST). La Transferencia de Estado Representacional (o REST) es una técnica de arquitectura software para sistemas hipermedia distribuidos como la World Wide Web (WWW). Se usa para describir cualquier interfaz web simple que utiliza XML y HTTP. Los puntos fundamentales clave en los que se apoya son los siguientes: - Un protocolo cliente/servidor sin estado: cada mensaje HTTP contiene toda la información necesaria para comprender la petición (aunque aún siguen apareciendo elementos como los cookies para almacenar datos como la sesión). 2.2.1.4 Modificar datos de la cuenta DESCRIPCIÓN El sistema permite cambiar la información referente a una cuenta de TATAMI-RC. ENTRADA Es necesario el identificador del usuario propietario de la cuenta a modificar. SALIDA Los atributos modificados en el sistema de información se actualizarán, para que sean reflejados en futuras acciones. RESTRICCIONES 1. Sólo se podrá modificar la cuenta del usuario que está identificado en ese momento. Y las mismas que se presentaban en la creación de la cuenta. 2. Todos los campos son necesarios, por lo tanto ninguno se puede quedar en blanco. 3. La longitud del nombre se debe encontrar entre 4 y 20 caracteres y sólo debe contener letras. 4. El apodo del usuario debe contener únicamente caracteres que sean letras, números y/o guiones bajos entre un mínimo de 4 y un máximo de 20, sin estar repetido con otro ya existente. 5. La contraseña debe tener entre 4 y 40 caracteres y debe ser igual en los dos campos de contraseña (para su confirmación). 6. La dirección de correo debe seguir un formato válido, no estar ya en el sistema y no superar los 50 caracteres. FUNCIONAMIENTO Si el usuario solicita una actualización de los datos de su cuenta, el sistema mostrará la información previa para que el usuario modifique lo que considere. Si no se incumple ninguna restricción, la aplicación actualizará el registro en el sistema de información y mostrará a la página principal del usuario junto con el mensaje de éxito en el proceso. De lo contrario, se volverá a solicitar la información, mostrando los errores que impiden la actualización de los datos de la cuenta. 2.2.1.5 Ver estado de la cuenta DESCRIPCIÓN Por las limitaciones de espacio establecido por cuenta de usuario, resulta interesante conocer el estado en el que se encuentra, y cómo se tienen invertidos esos recursos entre los distintos elementos creados. ENTRADA Se precisa el identificador del usuario propietario de la cuenta. SALIDA El sistema mostrará los datos sobre el uso del espacio de la cuenta entre los distintos elementos del usuario. RESTRICCIONES 1. Sólo visualizar el estado de la cuenta del usuario que está identificado en el sistema. FUNCIONAMIENTO Tras la petición de conocer el estado de la cuenta, el sistema analiza la capacidad de todos los ficheros de la red del propietario de la sesión, mostrando los resultados por pantalla. 2.2.1.6 Gestionar el estado de la cuenta DESCRIPCIÓN Mediante este proceso, se facilita un método rápido de conocer en qué elementos se están invirtiendo una mayor cantidad de recursos y permitiendo acciones para gestionarlos. ENTRADA Se precisa el identificador del usuario propietario de la cuenta. SALIDA Se mostrarán todos los ficheros del usuario propietario de la sesión y las acciones que puede realizar sobre ellos. RESTRICCIONES Sólo se podrá modificar la cuenta del usuario que está identificado. FUNCIONAMIENTO Si el usuario precisa de una forma rápida de conocer en qué elementos se está gastando el espacio de su cuenta, y desea gestionarlos (para liberar espacio, o por distribuirlos de otra forma), accederá a esta funcionalidad. 2.2.2. Gestión de perfiles 2.2.2.1. Ver el perfil del usuario DESCRIPCIÓN En el perfil se pueden ver algunos de los datos personales del usuario, tales como edad, sexo, ciudad donde vive, etc. Debido a que se trata de información personal, el propietario dispone de la posibilidad de permitir el acceso a todos los usuarios que lo soliciten. ENTRADA Si se necesitara poder acceder al perfil de un usuario, se precisa de su identificador en el sistema. En caso de no especificarlo, se mostrará el del propietario de la sesión, es decir, el del usuario que ha realizado el login. SALIDA El sistema mostrará el contenido del perfil en función de los permisos que se hayan establecido. RESTRICCIONES El usuario que solicita ver un perfil debe estar identificado en el sistema. FUNCIONAMIENTO Tras la petición de mostrar el perfil de un usuario, el sistema comprueba los permisos (si los ha especificado) respecto al propietario de la sesión (sin restricciones, si es el propietario, sin mostrar acciones de gestión sobre el perfil, y muestra el contenido. 2.2.2.2. Editar el perfil del usuario DESCRIPCIÓN El sistema permite cambiar la información del perfil de una cuenta de TATAMI-RC. ENTRADA Se precisa el identificador del usuario del que se quiere modificar el perfil. SALIDA Se actualizará los atributos modificados en el sistema de información, para que sean reflejados en futuras acciones. La aplicación generará un comunicado para que los contactos del usuario conozcan la actualización del perfil. RESTRICCIONES Únicamente se podrá modificar la cuenta del usuario que está identificado en el sistema. FUNCIONAMIENTO Si un usuario solicita una actualización de los datos de su perfil, el sistema mostrará la información previa para que el usuario modifique lo que considere. Una vez haya acabado, la aplicación modificará el registro en el sistema de información, generará el comunicado y mostrará el perfil del usuario junto con el mensaje de éxito en el proceso y la información ya actualizada. 2.2.3 Gestión del blog DESCRIPCIÓN Todos los usuarios tienen a su disposición un blog en el que poder colgar sus posts sobre cualquier tema que crean conveniente. Estos posts son accesibles para todos los miembros de TATAMI-RC. Los atributos que presentan son un título y el contenido del mismo. ENTRADA Se requerirá el identificador del sistema para el usuario del cual se quieren ver sus posts del blog. SALIDA El sistema mostrará los posts y las posibles acciones a realizar sobre ellos en función del usuario que haya solicitado ver el blog (el propietario u otro miembro). RESTRICCIONES Para poder acceder al blog se debe estar identificado por la aplicación. FUNCIONAMIENTO Cuando se indica que se quiere ver un blog, el sistema identifica al usuario que emite la petición y lo clasifica según sea el propietario o no. En función de los resultados obtenidos, el sistema mostrará los posts y las acciones a realizar sobre ellas. 2.2.3.1. Ver un post del blog DESCRIPCIÓN A través de esta acción accedemos a un post de un blog. En esta función se mostrará el contenido del mismo así como todos los elementos que lo componen (comentarios). ENTRADA Se requerirá el identificador del post a visualizar. SALIDA El sistema mostrará el post y las posibles acciones a realizar sobre él en función de si se es el propietario del mismo o no. RESTRICCIONES Para poder acceder a ver el post se debe estar identificado en el sistema. FUNCIONAMIENTO Tras seleccionar el post a visualizar, la aplicación analizará si el usuario que lo ha solicitado es el propietario. En caso de serlo, el sistema mostrará el contenido con todas las acciones posibles. En caso de no ser el propietario, se mostrará el contenido y todas las acciones que se puedan realizar sobre él, siempre que éstas no sean de gestión y edición del mismo. 2.2.3.2 Crear un nuevo post en el blog DESCRIPCIÓN Esta funcionalidad permite la creación de posts en el blog del usuario. Una vez realizado, toda la comunidad TATAMI-RC podrá ver su contenido. ENTRADA Para poder dar de alta un nuevo post se precisa un título y el contenido. Además se requiere el identificador del propietario del blog en el que se va a introducir el post. SALIDA Como respuesta, el sistema registrará el post y mostrará un mensaje por pantalla informándonos del éxito o fallo del proceso. Además, se emitirá un comunicado para los contactos del usuario, indicándoles la creación del nuevo post del blog. RESTRICCIONES 1. Se debe estar identificado previamente en la aplicación. 2. Tanto el campo de título como el contenido son necesarios, por lo que no se pueden quedar en blanco. 3. Sólo puede crear nuevos posts en un blog el propietario del mismo. FUNCIONAMIENTO Cuando el usuario solicite la creación de un post, el sistema le solicitará la información necesaria para poder generarlo. Si se completa sin incumplir ninguna restricción, la aplicación registrará el post del blog en el sistema de información, generará un comunicado y mostrará el contenido del post junto con el mensaje de éxito de la operación. De lo contrario, permanecerá solicitando la información a la vez que muestra el error que impidió la creación. 2.2.3.3 Editar la información de un post DESCRIPCIÓN Mediante esta funcionalidad se puede redefinir el contenido del post de un blog, permitiendo su actualización. ENTRADA Se requiere el identificador del post que se desea modificar y el identificador del propietario del blog que contiene el post. SALIDA Se actualizará los atributos que hayan cambiado en el sistema de información, para que sean reflejados en futuras acciones. RESTRICCIONES Las mismas que se presentaban en la creación del post: FUNCIONAMIENTO Tras solicitar la modificación del contenido de un post, el sistema mostrará los datos actuales del mismo. A partir de ese momento, el usuario modificará el texto que crea conveniente. Una vez indicado el fin de la actualización, y si se han superado las restricciones de integridad, el sistema modificará el registro en el sistema de información, generará el comunicado y mostrará el post junto con el mensaje de éxito en el proceso y la información ya actualizada. En caso contrario, se permanecerá en la solicitud de la información, visualizando los errores que impiden que la actualización pueda llevarse a cabo. 2.2.3.4 Eliminar un post del blog DESCRIPCIÓN Esta funcionalidad permite eliminar un post del blog de un usuario. ENTRADA Se requiere el identificador del post que se desea eliminar y el identificador del propietario del blog. SALIDA En este apartado se va a incluir una descripción detallada de los requisitos de conexión a otros sistemas (hardware o software) con los que la aplicación ha de interactuar (bases de datos, protocolos, formatos de ficheros, sistemas operativos, etc.). También se especificarán los requisitos de interfaces de usuario, incluyendo los prototipos de pantalla con los resultados a las peticiones demandadas por el usuario. 2.3.1. Interfaces de usuario A continuación se van a presentar los primeros prototipos de los formularios y menús que se mostrarán al usuario para interactuar con él. Las capturas de estas pantallas resolverán, en todo momento, las peticiones demandadas en los requisitos funcionales por el cliente. Es por esto, que se deben exponer todos los elementos y acciones posibles de una forma clara y fácilmente entendible para el público al que va destinado. Dada la naturaleza de la aplicación web que se describe, se va a proceder a agrupar los casos de las pantallas que se van a tratar. El trabajo con los elementos que configuran la página presentan una serie de cualidades comunes, lo cual les otorga una serie de comportamientos que son tratados con unas operaciones similares. Acciones para casi la totalidad de objetos como los listados (o índices generales) o las acciones CRUD (Create, Read, Update and Delete o crear, leer, actualizar y borrar, en castellano) se repiten para los distintos elementos. Es por esto, que en este punto se diferenciarán dos apartados. En el primero, se mostrarán las pantallas genéricas (así como sus variantes particulares para cada caso según el tipo de elemento) que sirven de soporte para el manejo y gestión de los distintos elementos que conforman la web. En la segunda parte, se expondrán los casos particulares de acciones características de algunos determinados objetos. En todos los casos, se distinguirá el propósito u objetivo que persigue la pantalla, así como su funcionamiento y la respuesta del sistema a ella. - Casos genéricos: - Pantalla de índice general. _ Propósito: el objetivo de estas páginas es el de mostrar un listado con referencias a todas las entradas de elementos, de uno o varios tipos, que cumplen algún requisito concreto (las entradas del blog de un usuario determinado, los entrenamientos de una disciplina, los eventos de un mes a los que asiste un usuario, etc.) _ Funcionamiento: en este tipo de pantallas se organizará la información dependiendo del tipo de elemento que se muestre. Además servirá de enlace al contenido completo de los mismos. Hay numerosas formas de llegar a estas páginas, bien sea a través del motor de búsqueda, navegando por la cuenta de un usuario, etc. Según el tipo de acceso, se realizará la consulta adecuada contra el sistema de información para mostrar los resultados demandados. _ Salida: el sistema nos mostrará una página con referencias a todos los objetos que cumplen las condiciones de la búsqueda. En función de su tipo, la disposición y el método de exponerlos puede variar (las alternativas se comentan en los siguientes párrafos) pero, en resumen, serán simplemente distintas exposiciones de la información. Además se mostrarán las acciones que se pueden realizar sobre ellos y su gestión (dependiendo de los permisos que se tengan sobre los objetos). _ Elementos que la utilizan: se emplean páginas de índice para gran cantidad de los elementos, aunque dependiendo de su definición no siempre estarán en el mismo sitio (por ejemplo, el índice de las fotografías estará en la página de contenido del álbum que las almacene). Más concretamente, se dispondrán de estas páginas en las búsquedas (de cualquier tipo), los álbumes, fotografías (de acceso a través del contenido del álbum, como ya se ha comentado), blogs, entrenamientos, eventos, grupos, comentarios (listados en el contenido del objeto al que hacen referencia), actividades, comunicaciones (a través del buzón de mensajes) y relaciones de un usuario. - Pantalla de alta _ Propósito: a través de esta pantalla, se mostrarán los datos necesarios para poder dar de alta un nuevo elemento (según el tipo que sea), y registrarlo en el sistema. De esta forma, el usuario puede generar su propio contenido en la web. _ Funcionamiento: una vez indicada la opción de crear un nuevo objeto, y siempre que tengamos permiso para ello, el sistema mostrará un formulario con los datos necesarios a completar por parte del usuario para que pueda generarse el objeto adecuadamente y registrarse en el sistema de información, asegurando su persistencia. _ Salida: en el momento que la información que requiere la aplicación sea cumplimentada adecuadamente, se creará el elemento con los nuevos datos aportados, y será almacenado en el sistema de información. En caso de existir alguna violación de alguna restricción de integridad del sistema, se mostraría el motivo del error que impide el registro del objeto y no se realizaría ninguna operación. _ Elementos que la utilizan: salvo los elementos que se generan automáticamente por definición (como puede ser el perfil y los intereses de un usuario, que únicamente se generan una vez cuando se crea la cuenta a la que van asociados) o las búsquedas que no son ningún tipo de objeto (son consultas al sistema de información basándose en un criterio), todos los demás elementos del sistema que necesitan un feedback con el usuario, presentarán este tipo de páginas para su creación. - Pantalla de visualización _ Propósito: el objetivo de estas pantallas, es el mostrar el contenido de un elemento. _ Funcionamiento: a través de la pantalla de índice, se seleccionará el objeto que se desea visualizar. Una vez indicado, la aplicación emitirá la consulta correspondiente al sistema de información, para que ésta le devuelva la información. _ Salida: la aplicación nos mostrará en este tipo de pantallas todo el contenido asociado al objeto marcado. Además, ofrecerá todas las opciones de gestión posibles sobre el mismo, en función de los permisos que se tengan. _ Elementos que la utilizan: este tipo de pantallas es genérico, por lo que todos los elementos la emplean, ya que carecería de sentido editar un objeto para que posteriormente no se pudiera visualizar, de alguna manera, la información introducida. _ Casos particulares según elementos que la empleen: en este punto, simplemente mencionar la inclusión de la visualización algunos elementos dentro de otras páginas, como pueden ser los comentarios en la página del contenido al que hace referencia, o el desglose de una rutina en la página de desarrollo del entrenamiento al que está asociado, etc. - Pantalla de modificación _ Propósito: el uso de este tipo de páginas permite la edición de los contenidos de un objeto. _ Funcionamiento: en la pantalla de visualización del contenido, y siempre que se tengan los permisos adecuados para la edición del objeto, se ofrecerá la opción de modificarlos. El enlace nos mostrará un formulario similar (en muchas ocasiones idéntico) al de la creación, salvo que en este caso los campos contendrán la información previa, para que el usuario decida qué información desea actualizar. _ Salida: una vez indicado el fin de la modificación de la información de los campos del elemento, se enviará la petición. Si se cumplen todas las restricciones de integridad, se registrará el elemento modificado en el sistema de información, a fin de que quede reflejado en las siguientes consultas. _ Elementos que la utilizan: excepto las búsquedas, que como se ha comentado en el apartado de la pantalla de creación no es un elemento en sí sino una consulta al sistema de información, y algunos elementos que dada su sencillez no resulta interesante su edición (como los comentarios o las marcas personales), todos los demás tienen su correspondiente sistema de modificación. _Casos particulares según elementos que la empleen: algunos objetos, debido a la naturaleza de la información que representan, no permiten su edición completa, sino sólo de algunos de sus atributos (como puede ser el cambio de los datos pero no de la imagen de una fotografía, añadir o quitar privilegios de moderador a un miembro del grupo, etc.) - Casos particulares - Pantalla de identificación _ Propósito: para poder asegurar la privacidad de la aplicación, el sistema se prevé de un mecanismo de identificación ante cualquier petición de un usuario. _ Funcionamiento: previamente a cualquier demanda de servicio, el sistema mirará el objeto session para ver si el usuario se ha identificado con anterioridad. En caso de no estarlo, mostrará esta página antes de realizar cualquier acción. _ Salida: si el registro de la entrada es válido, es decir, los datos que se piden coinciden con los de la cuenta de usuario a la que se desea acceder, se escribirá el objeto session con los datos del registro, y se podrá comenzar a hacer uso de los servicios que nos ofrece. En caso de no haber demandado ninguno, se redirigirá a la pantalla principal de la cuenta. - Pantalla de desconexión _ Propósito: en el momento el usuario considere que ha terminado de navegar por la red social, realizará un logout como sistema de seguridad, para salir de su cuenta. De este modo, se evita la posibilidad de que el navegador almacene los datos del objeto, y puedan acceder otros usuarios a cuentas ajenas. _ Funcionamiento: cuando se solicita una petición de desconexión de la cuenta, el sistema borrará el contenido del objeto session, de forma que si otro usuario requiere un nuevo servicio, deberá registrarse. _ Salida: cuando se determina la desconexión, el sistema borra el contenido del objeto sesion y redireccionará a la página de login, para que se identifique si desea volver a entrar. 2.3.2 Interfaces hardware Para poder tener un funcionamiento idóneo, el sistema sólo requerirá de un equipo completo que actúe de servidor, con todos los componentes necesarios para su conexión a Internet. Por lo demás, no necesita ningún accesorio hardware adicional para que cumpla sus objetivos adecuadamente. 2.3.3 Interfaces software Respecto a la integración con el sistema lógico del equipo, será necesario tener instalado en el servidor todas las librerías y extensiones necesarias para que pueda funcionar. Por un lado se requerirán todos los programas y librerías que permitan la ejecución de Ajax, así como de su framework Rails. Además, deberá tener instalado un SGBD para almacenar los contenidos de la red social. 2.3.4 Interfaces de comunicación Las comunicaciones se realizan a través de la Red, por lo que se requiere el protocolo de transferencia HTTP, así como de TCP/IP, para el envío de mensajes y datos entre el cliente y el servidor. 2.4 Requisitos de rendimiento El funcionamiento de las aplicaciones web se basa en la arquitectura cliente servidor. En ella, un sistema demanda un servicio (cliente) a otro (servidor), que le proporciona una respuesta. En el caso como en el que nos encontramos, el número de peticiones que se pueden solicitar de la aplicación crece exponencialmente al número de usuarios que la utilizan. Las peticiones se resuelven con consultas sobre la BD, ya que es ahí donde se almacenan los contenidos. Por lo tanto, un número elevado de miembros de la red que soliciten algún tipo de servicio, se resolverá con una gran cantidad de peticiones sobre la BD. Es por esto, que uno de los principios para mejorar el rendimiento, mejorando por tanto la rapidez y tiempo de respuesta de la aplicación al usuario, se centran en la realización del menor número posible de consultas sobre la BD y el manejo del menor volumen de información posible para poder solucionar correcta y rápidamente las peticiones del cliente. En cuanto a la información estática de la página, entre los que se encuentran el diseño de la misma, los scripts o el propio código HTML, se debe optimizar al máximo: compactando código, evitando redundancias, comprimiendo elementos de mayor volumen (por ejemplo, las imágenes, siempre que se mantengan con la calidad suficiente para una correcta visualización), etc. Mediante el seguimiento de estas premisas, la obtención de resultados en el servidor consume menos tiempo de cómputo, ya que se disminuye el volumen de información y los accesos a la BD, y su posterior envío al usuario tiene menor cantidad de datos, por lo que alcanzará su destino más rápidamente. 2.5 Restricciones de Diseño Dado el carácter independiente de la aplicación respecto a cualquier otro sistema, la integración del aspecto visual no presenta ninguna restricción que lo condicione. Por lo tanto, la única limitación sobre el diseño que se puede encontrar viene determinada por la aplicación de la filosofía de la Web 2.0 para la realización de un esquema claro y conciso, que mejore la usabilidad de la página. 3.- DISEÑO Introducción En la fase del desarrollo software que nos encontramos, se establecen las primeras bases sobre las que se apoya la aplicación. En este punto, y con todos los requisitos que se deben cumplir especificados, se escoge la estructura más apropiada muy empleada. Resulta rentable invertir en un potente servidor si a cambio se pueden ofrecer sitios web de gran calidad. A pesar de todo esto, y dada la posibilidad de que hayan problemas de velocidad en la conexiones en determinados casos, surge la tecnología AJAX, como mejora del rendimiento para las aplicaciones web. 4.1.3 Funcionamiento de AJAX Utilizar AJAX significa encontrar una solución híbrida entre los dos esquemas anteriores, obteniendo unas mejoras que sustanciales en el proceso de comunicación y transferencia de datos entre cliente-servidor. Cuando empleamos esta tecnología, se añade una capa intermedia en la comunicación conocida como el motor AJAX. En una aplicación donde no exista este motor, cada vez que el usuario realice una petición en el cliente, es muy probable que se traduzca en una petición al servidor. Una vez allí, será procesada y generada la información de respuesta a la demanda. Sin embargo, una aplicación que presenta este motor, recibe la petición del cliente, intentándole dar solución. Aquellas solicitudes que no puedan ser resueltas en la capa intermedia, serán reenviadas al servidor, el cual le devolverá la respuesta al motor AJAX, en lugar de al cliente, como hacía hasta el momento. En ese momento, el motor se encargará de generar la web, según los datos recibidos, y se la facilitará al cliente. Este proceso libera de carga al servidor, ya que todas las acciones que puedan solucionarse en la capa intermedia no llegan a él. Atendiendo a esta forma de trabajo, se justifica el asincronismo que caracteriza a AJAX, ya que no es necesario conectarse al servidor para interactuar con una aplicación bajo esta tecnología. 4.1.4 Componentes Como se ha comentado previamente, AJAX es una agrupación de tecnologías, que interactúan entre ellas, para poder obtener el dinamismo que le caracteriza. A continuación se presentarán cada una de ellas por separado, así como su forma de trabajar en conjunto. 4.1.4.1. HTML Es una de las tecnologías fundamentales de AJAX. HTML (acrónimo de Hipertext Markup Language o Lenguaje de formato de documentos de hipertexto) es un lenguaje en el que definir páginas web. Su funcionamiento está basado en pares de etiquetas. Cada par de etiquetas define el comportamiento sobre el contenido que se encierra entre ellas. Las etiquetas pueden disponer de atributos que son usados para concretar su forma de actuar con el contenido (siempre especificados en la etiqueta inicial). Inicialmente, el lenguaje HTML se creó como un estándar para todos los browsers del mercado. Sin embargo, cada compañía de software decidió crear sus propias etiquetas HTML, lo que hizo que las páginas no fueran 100% compatibles en todos los navegadores. La solución la aportó el W3 Consortium, encargado de estandarizar todo lo relacionado con la World Wide Web, y lo hizo a través de XHTML, que tiene la misma funcionalidad que el HTML, pero es mucho más estricto, eliminando todas las ambigüedades surgidas. 4.1.4.2. CSS La CSS (Cascading Style Sheets u hojas de estilo en cascada) es otro mecanismo definido por el W3 Consortium. Es un lenguaje que permite definir el aspecto de las páginas web. De esta forma, se puede separar el contenido (definido en HTML o XHTML), de la presentación de la página. Así mismo, con sólo un cambio en la hoja de estilo, puedes cambiar el aspecto del sitio web, sin modificar la información. El funcionamiento de las hojas de estilo es sencillo. Mediante la creación de un documento donde definir los elementos que aparecen en una página web (cualquiera de las etiquetas existentes en HTML) se le asigna una propiedad válida para esa etiqueta, y un valor para dicha propiedad. De esta forma, cada vez que se presente el elemento en la página, adoptará el aspecto indicado en el CSS. Tanto HTML como CSS son las herramientas con las que se va a desarrollar la interfaz gráfica de la aplicación web. Los usuarios interactúan con la página cambiando su aspecto y contenido (según la acción demandada), por lo que la relevancia que adquieren estas dos tecnologías en los procesos AJAX son más que considerables. 4.1.4.3 Javascript La base de AJAX, está soportada en JavaScript. Se trata un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la de Java y C. Su funcionamiento dentro de una web es embebido (incrustado) dentro del HTML. El código de programación, organizado en funciones, debe ir encerrado entre etiquetas para que el navegador sepa que se trata de código JavaScript. Después se podrá hacer uso de dichas funciones en algunas etiquetas convencionales de HTML como pueden ser botones, imágenes o enlaces. Con este lenguaje se construye el motor de la tecnología. La idea principal es que cualquier respuesta a una acción del usuario que no requiera una petición al servidor (como una simple validación de datos, edición de datos en memoria, incluso alguna acción de navegación) sea manejada por éste. 4.1.4.4 DOM DOM (Document Object Model o Modelo de Objetos del Documento) es la herramienta sirve de enlace entre las tecnologías explicadas anteriormente. Mediante su interfaz de programación, se permite acceder a ficheros HTML y a todos sus elementos, a través del lenguaje JavaScript. De este modo, se pone a disposición de los programadores, una estructura con todos los elementos que forman parte de una página web, para que éstos puedan cambiar de estilo y el contenido de la misma. DOM proporciona todos los objetos, propiedades y métodos para la manipulación de documentos HTML, formando parte del motor AJAX. 4.1.4.5 XML El XML (eXtensible Markup Language o lenguaje de marcado extensible) se emplea para el intercambio de datos entre aplicaciones que no son compatibles entre sí. Su funcionamiento se basa en que cualquier aplicación que genere datos es capaz de crear un documento XML cuyo contenido sea la información a transmitir. El objetivo es que cualquier otra aplicación pueda recibir ese fichero y emplearlo según sus necesidades. Los datos contenidos deben seguir rigurosamente unas reglas de almacenamiento que se han de definir en otro documento a parte y que se conoce como DTD (Document Type Definition o definición de tipo de documento). De esta forma, si un conjunto de aplicaciones necesita intercambiar datos entre ellas, tan sólo necesitan conocer el DTD para poder implementar un código de programación capaz de llevar a cabo su correcta recuperación. El papel que cumple XML es el de comunicar al servidor de la arquitectura con el motor AJAX, garantizando el intercambio y manipulación de datos de forma asíncrona entre cliente y servidor, independientemente del tipo de servidor empleado, asegurando su total compatibilidad. 4.1.4.6 Librerías empleadas Existen gran cantidad de librerías relacionadas con AJAX. El objetivo es el de facilitar la programación, aportando herramientas listas para ser añadidas a cualquier proyecto, permitiendo al desarrollador centrarse en otros aspectos de la web. Entre todas las librerías existentes, en la realización de la web destaca el uso de Prototype ampliando su funcionalidad con script.aculo.us. Ambas se presentan como frameworks escritos en JavaScript que se orientan al desarrollo sencillo y dinámico de aplicaciones web. 4.2 MySQL 4.2.1 Introducción y definición El software MySQL es un Sistema de Gestión de Bases de Datos (SGBD) del lenguaje de consulta estructurado SQL. Sus principales ventajas se centran en su rapidez, su robustez y su capacidad multihilo y multiusuario. Dadas sus características, su empleo está destinado a entornos de aplicación críticos, con una carga de trabajo elevada, así como para integrase con software que va a ser distribuido. Como se ha comentado anteriormente, MySQL hace uso del estándar para bases de datos relacionales SQL para realizar sus consultas. Dicho lenguaje fue comercializado por primera vez en 1981 por IBM. Desde 1986, el estándar SQL ha aparecido en diferentes versiones como SQL:92, SQL:99 y SQL:2003. MySQL surgió en la empresa opensource MySQL AB establecida inicialmente en Suecia en 1995 y cuyos fundadores son David Axmark, Allan Larsson, y Michael Widenius. El objetivo que persigue esta empresa consiste en que MySQL cumpla el estándar SQL, pero sin sacrificar velocidad, fiabilidad o usabilidad. El software tiene doble licencia. De esta forma, se permite escoger entre la opción Open Source, bajo los términos de la licencia GNU (General Public Licence), o entre la licencia comercial estándar que incluye soporte y asistencia. Esto es posible ya que es propiedad y está patrocinado por una empresa privada, que posee el copyright de la mayor parte del código. Nos encontramos ante un software muy utilizado en aplicaciones web, es soportado por gran cantidad de plataformas gracias a su variedad de API’s escritas en algunos de los lenguajes más populares y por herramientas de seguimiento de errores como Bugzilla. 4.2.2 Características MySQL es una base de datos muy rápida en la lectura cuando utiliza el motor no transaccional, pero puede provocar problemas de integridad en entornos de alta concurrencia en la modificación. Por norma general, en aplicaciones web hay baja concurrencia en la modificación de datos y en cambio el entorno es intensivo en lectura de datos, lo que lo convierten en una herramienta ideal. Además presenta estas otras características que resultan útiles para su uso junto a TATAMI-RC: - Interioridades y portabilidad: o Escrito en C y C++. o Probado en multitud de compiladores diferentes. o Funciona en diferentes plataformas. o Usa GNU para portabilidad. o Permite desarrollo multihilo. o El servidor está disponible como un programa separado para aplicaciones clienteservidor. - Seguridad o Sistema de privilegios y contraseñas muy flexible y segur o Tratamiento del tráfico de contraseñas mediante encriptación. - Escalabilidad y límites. o Permite el soporte a grandes bases de datos. - Conectividad o La conexión de los clientes con el servidor se realiza mediante sockets TCP/IP en cualquier plataforma. - Localización o Muestra de mensajes de error en múltiples idiomas o Soporte para Unicode - Clientes y herramientas o MySQL Server tiene soporte para comandos SQL para chequear, optimizar y reparar tablas. o Todos los programas permiten la obtención de ayuda en línea. 4.3 WORDPRESS 4.3.1 Introducción WordPress es un sistema de gestión de contenido enfocado a la creación de blogs (sitios web periódicamente actualizados). Desarrollado en PHP y MySQL, bajo licencia GPL y código modificable, tiene como fundador a Matt Mullenweg. WordPress fue creado a partir del desaparecido b2/cafelog y se ha convertido junto a Movable Type en el CMS más popular de la blogosfera2 . Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos. Otro motivo a considerar sobre su éxito y extensión, es la enorme comunidad de desarrolladores y diseñadores, que se encargan de desarrollarlo en general o crear plugins y temas para la comunidad, siendo usado en septiembre de 2009 por 202 millones de usuarios. WordPress nació del deseo de construir un sistema de publicación personal, elegante y con una buena arquitectura ("Code is poetry"). Basado en PHP, MySQL y licenciado bajo GPL, Wordpress pone especial atención a la estética, estándares web, y usabilidad. En principio, está configurado para usar una bitácora o weblog por sitio o instalación, pero también es posible, tener varios blogs con varias o una única base de datos desde la version 3.0. 4.3.2 Estructura Wordpress, en principio, es un sistema de publicación web basado en entradas ordenadas por fecha, entre otras muchas posibilidades además de páginas estáticas. La estructura y diseño visual del sitio depende de un sistema de plantillas, Independiente del contenido en sí. La filosofía de Wordpress apuesta decididamente por la elegancia, la sencillez y las recomendaciones del W3C pero depende siempre de la plantilla a usar. "TwentyTen", por ejemplo es una plantilla que viene "de serie" y que es válido como (X)HTML Transicional y CSS. Separa el contenido y el diseño en XHTML y CSS, aunque, como se ha dicho, depende de la plantilla que se esté usando. No obstante, el código que se intenta generar en las entradas ("posts") apuesta por esta característica forzando -si así se eligeun marcado correcto. La gestión y ejecución corre a cargo del sistema de administración con los plugins y los widgets que usan las plantillas. 4.3.3 Funcionalidades  Fácil instalación, actualización y personalización.  Actualización automática del sistema implementada en la versión 2.7.  Múltiples autores o usuarios, junto con sus roles o perfiles que establecen distintos niveles de permisos desde la versión 2.0).  Múltiples blogs o bitácoras (desde la versión 1.6).  Capacidad de crear páginas estáticas (a partir de la versión 1.5).  Permite ordenar artículos y páginas estáticas en categorías, subcategorías y etiquetas ("tags").  Cuatro estados para una entrada ("post"): Publicado, Borrador, Esperando Revisión (nuevo en Wordpress 2.3) y Privado (sólo usuarios registrados), además de uno adicional: Protegido con contraseña.  Editor WYSIWYG "What You See Is What You Get" en inglés, "lo que ves es lo que obtienes" (desde la versión 2.0).  Publicación mediante email.  Importación desde Blogger, Blogware, Dotclear, Greymatter, Livejournal, Movable Type y Typepad, Textpattern y desde cualquier fuente RSS. Se está trabajando para poder importar desde pMachine y Nucleus además de la importación a través de scripts o directamente de base de datos.  Guardado automático temporizado del artículo como Borrador (A partir de la versión 2.2).  Permite comentarios y herramientas de comunicación entre blogs (Trackback, Pingback, etc).  Permite "permalinks" (enlaces permanentes y fáciles de recordar) mediante mod_rewrite.  Distribución de los artículos mediante RDF, RSS 0.92, RSS 2.0 y Atom 1.0.  Distribución de las discusiones (mediante RSS 2.0 y ATOM 1.0).  Gestión y distribución de enlaces.  Subida y gestión de adjuntos y archivos multimedia.  Admite "Plugins" (versión 1.6).  Admite plantillas y "Widgets" para éstas.  Búsqueda integrada. o Búsqueda en entradas y páginas estáticas y Widget de casa para búsqueda integrada de google desde la versión 2.5.  Integración: o bbPress, sistema de foros de los mismos creadores, se integra automáticamente con Wordpress. o Integración con el foro Vanilla de Lussumo factible, al menos hasta la versión 2.2 no inclusive. 4.4 REUTILIZACIÓN de CÓDIGO En programación, es el uso de software existente para desarrollar un nuevo software. La reutilización de código ha sido empleada desde los primeros días de la programación. Los programadores siempre han reusado partes de un código, planillas, funciones o procedimientos. La idea es que parte o todo el código de un programa de computadora escrito una vez, sea o pueda ser usado en otros programas. La reutilización de códigos programados es una técnica común que intenta ahorrar tiempo y energía, reduciendo el trabajo redundante. Las bibliotecas o librerías de software son un buen ejemplo. Al utilizarlas se está reutilizando código. El software más fácilmente reutilizable tiene ciertas características: modularidad, bajo acoplamiento, alta cohesión, ocultación de información, etc. Con ésta sección, lo que pretendemos es poder proporcionar la equipación del club a los jugadores o cualquier interesado en ella. Una gran idea para seguir progresando como club. - THE ZONE: Un apartado de la página dedicado exclusivamente a los jugadores del club, ya que podemos ir elegir dos caminos, bien el groc-negre, el boletín semanal que se edita a partir de las crónicas de los partidos y alguna colaboración extra de algún jugador. Y por otro lado ..Sálvame de Luixi.. construida con afán de dar un poco de cachondeo dentro del club. - CONTACTO: La mejor manera de comunicarte con el club e informarte sobre este deporte. He incluido una captura del google maps para mejor localización. Una vez habiendo hecho un repaso el encabezado, pasaremos al bloque central, que es la zona de mayor interés social. Esta zona está compuesta por seis cajones (posts), que entre ellos puedes encontrar toda la actualidad del rugby español, tanto rugby a 15, rugby playa, rugby seven… Y otros de entretenimiento. Y por último la barra derecha de navegación. Compuesta por un titular de información sobre la jornada siguiente, un bloque con enlaces a páginas de interés y otro con link a la página de otros clubs. 7.- BIBLIOGRAFIA Documentación y códigos de AJAX: - Scott Raymond, “AJAX on Rails”, O’Reilly, enero 2007. - Francisco Charte, “AJAX”, Anaya Multimedia, 2007. - Christopher Porteneuve, “Protoype and script.aculo.us”, The Pragmatic Programmers’ Guide, diciembre 2007 Información general de MySQL: - Manual de referencia para MySQL 5.0: http://dev.mysql.com/doc/refman/5.0/es/index.html Información General: - Wikipedia: http://www.wikipedia.com/ - Diccionarios específicos: http://www.lawebdelprogramador.com/diccionario/ - “Diccionario de informática e Internet”, Mc Graw Hill, 2001