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