Post on 15-May-2020
SISTEMA DE GESTIÓN DE DATOS Y PORTAL INTERACTIVO
WEB PARA LA ACTIVIDAD DEPORTIVA: PLAS
Autor: García de Zúñiga Hernández, Pablo Francisco.
Director: Weisser, Marc-Antoine.
Ecole Supérieure d’électricité (SUPELEC)
RESUMEN
Diseño y creación de una plataforma web adaptable a ordenador, tablet y smartphone para
asociaciones deportivas con el fin de crear un portal de interacción entre los usuarios y de
sencilla gestión de datos. A través del uso de distintos frameworks (marcos de trabajo de
programación), se ha implementado un portal el cual cumple con las especificaciones
definidas al inicio del proyecto, facilitando un servicio en la vida asociativa universitaria.
Palabras clave: Aplicación web, Framework, Desarrollo de aplicaciones telemáticas.
1. Introducción
La etapa universitaria es una de las más importantes tanto a nivel académico como a nivel
personal. Por lo general, las universidades no se limitan a ofrecer una formación avanzada
a sus alumnos. Existen muchas otras actividades, organizadas por asociaciones o de
alumnos o de profesores, cuyo objetivo es dinamizar la vida universitaria ofreciendo un
amplio abanico de servicios de distinta índole.
Por otro lado, el uso de las TICs se ha ido extendiendo a casi todos los ámbitos de la
sociedad contemporánea. Ésta ha cambiado drásticamente debido al surgimiento de las
nuevas tecnologías, concretamente Internet. En este contexto, las aplicaciones web se han
convertido en uno de los pilares fundamentales de la Red, debido a la ubicuidad de los
navegadores web en casi todas las plataformas digitales, y por su facilidad y disponibilidad
de uso de cara a los usuarios con acceso a la Red.
2. Definición del proyecto
Este proyecto de fin de grado consiste en el análisis, diseño e implementación de una
aplicación web cuyo objetivo sea ofrecer una plataforma orientada a las asociaciones
deportivas universitarias, con el doble objetivo de ofrecer un portal interactivo para todos
los alumnos de la universidad y un servicio de gestión sencillo y eficaz de los datos
generados y necesarios para la organización de las distintas actividades deportivas.
En el marco de desarrollo de este proyecto se pueden distinguir tres metas diferenciadas.
La primera es desarrollar todos los componentes y funcionalidades necesarias para
asegurar un servicio que cumpla de acuerdo a las especificaciones dadas por el cliente (la
asociación deportiva de Supélec, el BDS). La segunda, es el diseño de la interfaz gráfica en
el que sea apoyará el servicio de la aplicación, de manera que sea capaz de adaptarse a las
distintas plataformas físicas. Inicialmente, se planteó hasta el desarrollo de una aplicación
móvil aparte para este tipo de plataforma, pero la idea se descartó con la intención de
ofrecer un servicio unificado único a través del navegador web. La última meta es el
ofrecer un portal interactivo de intercambio de información para todos los participantes de
la vida deportiva de la escuela. Esta se ha ido definiendo en paralelo con el desarrollo del
servicio básico.
3. Desarrollo del proyecto
Inicialmente se ha concebido la base de datos funcional sobre la que desarrollar el resto de
la aplicación web. Ésta ha sido desarrollada mediante el uso de MySQL, y se ha
implementado en los servidores de la red local de la universidad. La arquitectura de la base
de datos fue concebida basándose en las especificaciones del cliente (BDS).
Ilustración 1 – Esquema final de la base de datos desarrollada
El desarrollo de la aplicación web se ha realizado mediante el uso de dos frameworks:
Django para todas las funciones de base (basado en una arquitectura de software conocida
por las siglas MVC: Modelo-Vista-Controlador) y Bootstrap CSS para la programación de
la interfaz gráfica. Los lenguajes de programación utilizados a lo largo de la etapa de
desarrollo han sido, por tanto, Python, HTML5 y CSS3. El proyecto está subdividido en
una serie de aplicaciones encargadas de realizar distintas tareas:
El servicio Utilisateur, encargado de toda la gestión derivada de los usuarios y sus
datos: altas/bajas de nuevos usuarios, conexión/desconexión a la aplicación,
definición de los deportes practicados y de las preferencias del usuario.
Sport, encargado de toda la generación de la información derivada de la actividad
deportiva. Aquí es donde se definen todos los partidos oficiales de la liga
universitaria de deporte controlada por la FFSU.
News, a cargo de la creación y actualización de todas las noticias que son creadas
por los distintos usuarios para favorecer la actividad deportiva.
Evenements, para todas las actividades extraoficiales deportivas que se quieran
organizar en la escuela.
El servicio Accueil, para ofrecer un entorno estructurado en torno a una página de
inicio inicial.
Los templates o plantillas son los encargados de generar las páginas a las cuales el usuario
tiene acceso. Las distintas plantillas se han ido desarrollando de manera modular, es decir,
la interfaz gráfica se ha programado independientemente en cada una de las aplicaciones
presentadas anteriormente. Sin embargo, para facilitar la uniformización del formato
dentro de la aplicación web se ha desarrollado un template padre común a todas las
aplicaciones para que se mantenga el estilo de la aplicación por herencia de clases.
Mediante el uso de Bootstrap CSS se ha partido de un archivo CSS predefinido el cual se
ha modificado para el desarrollo de la interfaz gráfica de la aplicación.
4. Resultado final
Se ha creado una aplicación web que se ajusta perfectamente tanto a las especificaciones
definidas por el usuario final como a los objetivos fijados al inicio del proyecto. Ofrece un
servicio de gestión de miembros de la asociación deportiva, de los partidos oficiales de la
liga universitaria, un entorno adaptable multiplataforma y una serie de funcionalidades
básicas para la promoción de la actividad deportiva. El nombre de la aplicación es PLAS,
las siglas del francés Pour Les Associations Sportives (para las asociaciones deportivas).
Es más, se puede afirmar que esta aplicación ha sobrepasado los objetivos propuestos
inicialmente, puesto que el conjunto de páginas que componen toda la aplicación
desarrollada han pasado la validación W3C para la totalidad del código desarrollado en
HTML5.
Ilustración 2 – Página de inicio de la aplicación web
5. Conclusiones
Se puede concluir afirmando la eficacia y la gran utilidad del uso de un framework para la
concepción y desarrollo de una aplicación web, debido a que está orientado la creación de
un entorno base con una amplia gama de recursos a ofrecer al desarrollador para facilitarle
la tarea en muchos y variados aspectos.
El gran potencial de desarrollo ofrecido tanto por el entorno de trabajo utilizado como del
lenguaje de programación en el que se apoya supone una enorme ventaja para ser capaz de
llevar a cabo la realización de un proyecto de esta envergadura de manera eficaz y
adecuada de acuerdo a los criterios de programación. Python es un lenguaje
multiparadigma, el cual ofrece muchos métodos para objetivos tan dispares tales como la
programación de la interfaz de una página web y una base de datos.
Además de todos los retos técnicos a los que ha sido necesarios enfrentarse durante el
desarrollo de este proyecto, se han debido enfrentar otros retos de carácter más transversal,
tales como el de realizar un proyecto en un contexto colaborativo con otros proyectos, el
trabajar con gente de otra nacionalidad en un idioma que no es el propio o realizar un
proyecto desde cero por vez primera.
6. Referencias
[1] Riehle, Dirk (2000), Framework Design: A Role Modeling Approach, Swiss Federal
Institute of Technology http://dirkriehle.com/computer-
science/research/dissertation/diss-a4.pdf
[2] The Django book http://www.djangobook.com/en/2.0/index.html
[3] “Bootstrap from Twitter”, August 19, 2011, Mark Otto
https://blog.twitter.com/2011/bootstrap-twitter
[4] Cochran, David (November 12, 2012) Twitter Bootstrap Web Development (1st
Edition). Packt Publishing p.100. ISBN 978-1849518826
[5] Sergio Luján Mora (2002). Programación de aplicaciones web: historia, principios
básicos y clientes web (libro completo gratuito en pdf) (1ª edición). Editorial Club
Universitario.
[6] Curso de aprendizaje de Python http://www.codecademy.com/tracks/python
[7] Curso online de aprendizaje de los lenguajes HTML5 y CSS3
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-
css3
[8] Curso de aprendizaje del framework Django
https://openclassrooms.com/courses/developpez-votre-site-web-avec-le-framework-
django
[9] "More deeply, the framework exists to separate the representation of information from
user interaction." The DCI Architecture: A New Vision of Object-Oriented
Programming - Trygve Reenskaug and James Coplien - March 20, 2009.
http://www.artima.com/articles/dci_vision.html
DATA MANAGEMENT SYSTEM AND INTERACTIVE WEB
PLATFFORM FOR SPORT ACTIVITIES: PLAS
Author: García de Zúñiga Hernández, Pablo Francisco.
Director: Weisser, Marc-Antoine.
Ecole Supérieure d’électricité (SUPELEC)
ABSTRACT
Design and creation of a responsive web portal, adapted to PCs, tablets and smartphones,
for sports associations with the final purpose of designing a platform where users can
interact and have an easy data management. Using different software frameworks
(programming environments) it has been implemented a web application wich achieves
client’s specifications that had been defined at the beginning, offering a service to the
university associative activity.
Keywords: Web application, Framework, Development of telematic applications.
1. Introduction
The university period is one of the most important in life, academically and personally
speaking. Generally, universities don’t offer only an advanced education to their students.
There are many other activities, organized by associations which are managed by students
or even by the universities’ staff, whose objective is to energize university life offering a
wide range of different services.
On the other hand, the use of ICTs has expanded to all dimensions of contemporary
society. It has changed due to the appearance of these new technologies, specifically the
Internet. In this context, web applications have become one of the fundamental pillars of
the Net, because of the ubiquity of web browsers in almost all the informatics systems, and
their availability and simplicity to the Internet user.
2. Project’s definition
This Final Year Project for Telematics Engineering Degree consists of the analysis, design
and implementation of a web application whose objective is to offer a web portal oriented
to all university sports associations, offering, as said before, an interactive platform for all
university students and a simple data management system for the organization of the varied
sporting activities. This project was proposed by the Informatics Department of Supélec at
the beginning of course 2014/2015 with the objective of create and conceive new services
and applications made by and for the students.
In the frame of this project’s development we can distinguish three differentiated
objectives. The first is to develop a service that fulfills all the specifications that have been
given to the client (the sports association of Supélec, BDS). The second is the design of the
graphical user interface, supported by the developed functionalities previously, so that it
can be responsive (it adapts automatically to the size of the screen from which it’s
executed). The last goal is to offer an interactive portal for information interchange
between all members of the sporting activities and all students of the university. The
developed functionalities for this purpose have been designed in parallel with the
functionalities created for accomplishing the first objective.
3. Development
Initially, it has been conceived the functional database that has become the support of the
rest of the web application. It has been developed using MySQL, and it has been
implemented in the servers of the university local network. The architecture of this
database was made following the client’s (BDS) specifications.
Illustration 1: Final model of the database
The development of the different functionalities of the web application has been realized
thanks to the utilization of two software frameworks: Django for the base services
(creating the applications following the software architectural pattern known as MVC) and
Bootstrap CSS for the design of the graphical interface. The used programing languages in
this project have been therefore Python, HTML5 and CSS3. The project is divided in
different modules that are in charge of different tasks:
Utilisateur (User), in charge of the management derived from the users’s data:
authorizations and cancellations, connections and disconnections to the application,
definition of the sports played and the preferences of each user.
Sport, responsible for the generation and management of all the data derived from
the sporting activities. This application defines all the official matches of the
university league managed by the FFSU, the French Federation of University Sport.
News, in charge of the creation, edition and updating of all the news that can be
created by all users for promoting the sporting activity.
Evenements (Events), for all the informal activities created by the members of the
sport association in order to maintain active the sporting life in the university.
Accueil (Home), for offering a structured application around an initial homepage
that recovers the data generated by previous applications.
The templates are in charge of the generation of the webpages which are accesible to the
users through the web browser. The different templates that make up the final graphical
interface have been developed independently in each application that has been developed
before. However, in order to offer a web application with a uniform graphical style, it has
been created a base template, and using the objects’ heritage, the rest of the templates have
the same style. Using Bootstrap CSS it has been chosen an initial CSS archive that has
been modified for designing the final graphical interface of the application.
4. Results
It has been created a web application which is adjusted perfectly to the client’s
specifications and to the defined objectives.at the beginning of the project. It offers a data
management service for the staff of the sports association: administration of the members
and students that want to participate in the platform, creation and modification of the
official matches for the university league, a responsive and adaptable web portal, and a
series of basic functionalities for promoting the sporting activities. The final name for the
application is PLAS, acronyms of the French Pour Les Associations Sportives (for the
sports associations).
Moreover, it can be said that this project has surpassed the proposed objectives at the
beginning, since the total of the developed templates have passed the W3C validation for
all the code developed in HTML5.
Illustration 2: Homepage of the web application
5. Conclusions
I can conclude affirming the efficiency and the great benefit of using a software framework
for the design and development of a web application, because it’s oriented to the creation
of a work environment with a wide range of resources that can be offered to the developer
in order to simplify the job in many ways.
The great potential of development offered by the framework and by the programming
languages supported by it supposes a big advantage for being able to carry out efficiently
the implementation of a project of this size, following and respecting the programming
criteria.Python is a general-purpose, high-level programming language that offers many
methods and functions for objectives so different such as the development of a graphical
web interface or a database.
Besides, apart from the technical challenges that have been confronted during the
development of this project, they have been faced other challenges of transversal nature,
such as the realization of a project in a collaborative environment with other projects,
working with people of other nationality not using the mother tongue, or realizing a project
starting from scratch for the first time.
6. References
[1] Riehle, Dirk (2000), Framework Design: A Role Modeling Approach, Swiss Federal
Institute of Technology http://dirkriehle.com/computer-
science/research/dissertation/diss-a4.pdf
[2] The Django book http://www.djangobook.com/en/2.0/index.html
[3] “Bootstrap from Twitter”, August 19, 2011, Mark Otto
https://blog.twitter.com/2011/bootstrap-twitter
[4] Cochran, David (November 12, 2012) Twitter Bootstrap Web Development (1st
Edition). Packt Publishing p.100. ISBN 978-1849518826
[5] Sergio Luján Mora (2002). Programación de aplicaciones web: historia, principios
básicos y clientes web (libro completo gratuito en pdf) (1ª edición). Editorial Club
Universitario.
[6] Curso de aprendizaje de Python http://www.codecademy.com/tracks/python
[7] Curso online de aprendizaje de los lenguajes HTML5 y CSS3
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-
css3
[8] Curso de aprendizaje del framework Django
https://openclassrooms.com/courses/developpez-votre-site-web-avec-le-framework-
django
[9] "More deeply, the framework exists to separate the representation of information from
user interaction." The DCI Architecture: A New Vision of Object-Oriented
Programming - Trygve Reenskaug and James Coplien - March 20, 2009.
http://www.artima.com/articles/dci_vision.html