Search

[ES] Este proyecto se enmarca en el ámbito de las denominadas nubes computacionales. Se propone la implementación de una nube con OpenStack y el diseño de un orquestador para poder trabajar con la nube en Django, con HTML, CSS, JavaScript en Front-end y Python en Back-end, y todo ello en un repositorio en Git. El trabajo se desarrolla en una empresa donde se están realizando prácticas., [EN] This project is part of the field named computational clouds. It proposes the implementation of a cloud with OpenStack and the design of an orchestrator to be able to work with the cloud in Django, with HTML, CSS, JavaScript in Front-end and Python in Back-end, and all this in a Git repository. The work is being developed in a company where internships are being carried out.

[ES] En medio de la era de la digitalización, la pandemia del Covid-19 ha ocasionado un fuerte crecimiento de los medios telemáticos: teletrabajo, videollamadas, redes sociales... Es por ello que cualquier aplicación que digitalice un proceso va a ser imprescindible. Este trabajo de fin de grado consiste en el desarrollo de una aplicación web para poner en contacto a empresas de toda la Unión Europea, que interactuarán a través del sistema para llevar a cabo proyectos conjuntos sin necesidad de desplazarse. Esta aplicación será responsiva, pudiendo utilizarse desde cualquier tipo de dispositivo que cuente con un navegador web. Se basará en el modelo cliente-servidor utilizando distintas tecnologías, y el resultado final será una aplicación web rápida y escalable, que crecerá con las empresas y sus proyectos., [EN] In the middle of the digitalisation age, the Covid-19 pandemic has led to a strong growth in telematic media: remote working, video calls, social networks... This is why any application that digitises a process is going to be essential. This final degree project consists of the development of a web application to connect companies from all over the European Union, which will interact through the system to carry out joint projects without the need to travel. This application will be responsive, being able to be used from any type of device with a web browser. It will be based on a client-server model using different technologies, and the final result will be a fast and scalable web application that will grow with the companies and their projects.

[ES] El presente proyecto tiene como objetivo el desarrollo de una aplicación móvil para la creación de vídeo-análisis a partir de vídeos de deportes tales como golf, tenis,... con herramientas de dibujado en tiempo real, grabación de voz en off, controles de vídeo, etc. Es una app dirigida tanto a entrenadores como alumnos de diversos deportes, para dispositivos móviles con sistemas tanto Android como iOS, con el objetivo de crear vídeos editados a partir de los originales dependiendo de medios de transmisión de multimedia externos para evitar la creación de cuentas y amenizar la experiencia. Para la realización de la aplicación se ha usado el framework Ionic (Angular) + Capacitor como tecnologías core, Android Studio y XCode para el build y testeo de las aplicaciones nativas generadas. Y iconos personalizados. En cuanto a herramientas para la implementación del proyecto se ha utilizado Git+Gitlab para el control de versiones y repositorio online, y Visual Studio Code como IDE junto a extensiones útiles., [EN] The present project aims to develop a mobile application for the creation of video-analyses from videos of sports such as golf, tennis, etc. with real time drawing tools, voice-over recording, video controls, etc. It is an app aimed at both coaches and students of various sports, for mobile devices with both Android and iOS systems, with the simple objective of creating edited videos from the originals depending on external multimedia transmission media in order to avoid the creation of accounts. For the realization of the application has been used the Ionic framework (Angular) + Capacitor as core technologies, Android Studio and XCode for the build and testing of native applications generated. And custom icons. As for tools for the implementation of the project we have used Git+Gitlab for version control and online repository, and Visual Studio Code as IDE along with useful extensions.

[ES] Desarrollo de una aplicación web que muestra a un usuario varias fotos para que seleccione la que más le gusta. La aplicación dispondrá de autenticación de usuarios para poder disponer de perfiles personales. La elección de fotografías de entre una secuencia será guardada en un base de datos de la cual extraer conclusiones a posteriori. La realización del trabajo fin de máster propuesto implicará el uso de tecnologías web de programación como HTML5, CSS, JavaScript, tecnologías Firebase, etc., [EN] Development of a web app that shows several photos to a user in order to select the one that he likes much more. The app will have authentication capabilities in order to provide personal profiles. The choosing of the photographies will be stored in a database that will be used to extract conclusions later. Web programming technologies as HTML5, CSS, Javascript, Google Firebase, etc. will be used in the develop of the project.

[ES] Desarrollo de una página web con CMS WordPress, utilizando Gutenberg con React para acceder a componentes y funciones para añadir bloques, conociendo todo el proceso desde la preparación del entorno de desarrollo de un bloque con la utilización del paquete global wp hasta su activación. Implementar el proyecto bajo tecnologías modernas, permitiendo la optimización y buenas prácticas en el desarrollo web. Crear y subir el sitio web a un repositorio GitLab, trabajar mediante un entorno local con Docker y desplegar en producción con un dominio y hosting real., [EN] Development of a website with CMS WordPress, using Gutenberg with React to access components and functions to add blocks, knowing the whole process from the preparation of the development environment of a block with the use of the global package wp until its activation. Implement the project under modern technologies, allowing optimization and best practices in web development. Create and upload the website to a GitLab repository, work through a local environment with Docker and deploy in production with a real domain and hosting.

[ES] There is an enormous quantity of web applications with little or no security configurations at all that are accessible through the Internet. Many of these were academic exercises that were engineered from a purely functional perspective; this leads to poorly specialized configurations and to a lack of security. Many of these applications have been later abandoned by their programmers or simply kept as initially deployed, whereas being still public and fully accessible. On the one hand, the project focuses on the stydy and analysis of selected state of the art web technologies and some of their related security flaws. As web programming technologies evolve, new flaws appear; and also appear the recommended programming patterns to overcome these flaws. Overall, cibersecurity in web systems is a dynamic and evolving process that requires much effort in continuous analysis of systems, of web programming tools, and systems prototyping. For this purpose, an initial basic set up of a web server will be put in place to analyze selected flaws on the field and selected common security missconfigurations. This work will be exemplified on a prototype application comprising a server and a set of IoT nodes monitored by the server. This basic prototype will help to illustrate some security missconfigurations that are frequent and part of OWASP Top 10. Then, a set of recommendations for their configuration and public set up will be designed and programmed., [EN] There is an enormous quantity of web applications with little or no security configurations at all that are accessible through the Internet. Many of these were academic exercises that were engineered from a purely functional perspective; this leads to poorly specialized configurations and to a lack of security. Many of these applications have been later abandoned by their programmers or simply kept as initially deployed, whereas being still public and fully accessible. On the one hand, the project focuses on the stydy and analysis of selected state of the art web technologies and some of their related security flaws. As web programming technologies evolve, new flaws appear; and also appear the recommended programming patterns to overcome these flaws. Overall, cibersecurity in web systems is a dynamic and evolving process that requires much effort in continuous analysis of systems, of web programming tools, and systems prototyping. For this purpose, an initial basic set up of a web server will be put in place to analyze selected flaws on the field and selected common security missconfigurations. This work will be exemplified on a prototype application comprising a server and a set of IoT nodes monitored by the server. This basic prototype will help to illustrate some security missconfigurations that are frequent and part of OWASP Top 10. Then, a set of recommendations for their configuration and public set up will be designed and programmed.

[ES] El objetivo del Trabajo de Fin de Grado es realizar el diseño y el desarrollo de una página web orientada a un negocio que se dedica a la prestación de servicios. Para la realización de la página web usaremos tecnologías como HTML5, CSS, Javascript o php. La primera la utilizaremos para crear la estructura de la página web, la segunda la utilizaremos para darle el estilo que deseemos y la tercera la utilizaremos como complemento a HTML y CSS para realizar todo aquello que sea interactivo como animaciones o efectos al pulsar un botón. Por otro lado, nos encargaremos que la web será responsive para que se adapte a cualquier tamaño de pantalla. De esta manera no importará desde qué dispositivo se visualice. [EN] The objective of the Final Degree Project is to design and develop a web page oriented to a business that is dedicated to the provision of services. For the realization of the web page we will use technologies such as HTML5, CSS, Javascript or php. The first one (HTML) we will use to create the structure of the web page, the second one (CSS) we will use to give it the style we want and the third one ( Javascript) we will use as a complement to HTML and CSS to do everything that is interactive such as animations or effects when pressing a button. Finally, we will make sure that the website is responsive so that it adapts to any screen size. In this way it will not matter from which device it is viewed. [CA] L'objectiu del Treball de Fi de Grau és realitzar el disseny i desenvolupament d'una pàgina web orientada a un negoci que es dedica a la prestació de serveis. Per a la realització de la pàgina web usarem tecnologies com HTML5, CSS, Javascript o php. La primera la utilitzarem per crear l'estructura de la pàgina web, la segona la utilitzarem per donarli l'estil que desitgem i la tercera la utilitzarem com a complement a HTML i CSS per realitzar tot allò que siga interactiu com animacions o efectes en prémer un botó. D'altra banda, ens encarregarem que la web serà responsive perquè s'adapte a qualsevol grandària de pantalla. D'aquesta manera, no importarà des de quin dispositiu es visualitze.

[ES] El siguiente trabajo se centra en el desarrollo Full-stack de una aplicación web para un inventario de una entidad educativa, teniendo en cuenta otras funciones como pueden ser las de tener anotaciones de desperfectos en las aulas para su posterior solución y que de alguna forma queden anotadas para el usuario de la aplicación. En este caso, para el desarrollo de la aplicación, se utilizarán los siguientes lenguajes de programación: JavaScript (en este caso, para toda la parte de las funciones), HTML5 y CSS (para el front-end). Y para el desarrollo de la parte de back-end, se utilizará MySQL. La aplicación permitirá al usuario tener un control de todos los objetos que se encuentren registrados en todas las aulas del centro, de manera que no haya ningún problema a la hora de tener que hacer inventarios. También se permitirá incluir nuevos objetos en dicho control, en el caso de que aparezcan nuevas tecnologías y/o materiales escolares a utilizar. Es un trabajo que se centra tanto en la parte de back-end con su propia base de datos, como en la parte de front-end, que tiene una aplicación cliente para poderse utilizar correctamente y sin ninguna dificultad. Como se ha mencionado en el título del trabajo, las tecnologías que se utilizarán son principalmente los lenguajes JavaScript, HTML5 y CSS, además de utilizar MySQL., [EN] The following academic job will be centered in the Full-stack development of a web application to have a control on the objects used in an academic entity, having in mind other functions such as having anotations of flaws in the objects, or in the rooms of the entity itself, so there’s a way to track them for the user of the application. In this case, to the development of the aplication, there will be used several programming languages such as: JavaScript (for the function parts), HTML and CSS (for the front-end), and finally, for the development of the back-end part, MySQL will be used. The application will let the user have a control of every object registered in every room of the entity, in a way that there won’t be any problem in tracking them when the user wants to do their inventory function. Also it will also be possible to include new objects in the control, in the case that new technologies or new materials are added to the educational entity. This academic job, is centered on the full-stack development of the entire application, having it’s own database, that’s related to the back-end part, and it’s front-end, with his own client application so it can be use correctly and efficiently. As we have mentioned before in the title, the technologies used will be mostly the following: JavaScript, HTML5, CSS, and MySQL aswell., [CA] El següent treball es centra en el desenvolupament Full-stack de una aplicación web per a un inventari d’una entitat educativa, tenint en compte altres funcions com poden ser les de tindre anotacions de desperfectes en les aules per a la seua posterior solución, i que de alguna forma queden anotades per a l’usuari de l’aplicació. En aquest cas, per al desenvolupament de l’aplicació, s’empraràn els següents llenguatges de programació: JavaScript (en aquest cas, per a la part de funcions), HTML5 i CSS (per al frontend), i finalment, per al desenvolupament de la part de back-end, s’utilitzarà MySQL. L’aplicació permitirà a l’usuari tenir un control de tots els objectes registrats en totes les aules del centre, de manera que no hi haja cap problema a l’hora de tindre que fer inventaris. També es permetrà incloure nous objectes en els controls, en el cas de que apareguen noves tecnologíes i/o materials escolars a utilizar. Es un treball que es centra tant en la part de back-end, amb la seua base de dades propia, com en la part de front-end, que té una aplicación client per a poderse emprar correctamente i sense cap dificultad. Com s’ha mencionat en el títol del treball, les tecnologíes principalmente emprades serán els llenguatges JavaScript, HTML5 i CSS, ademés de emprar MySQL.

[ES] De todos es sabido que esta pandemia ha dejado a muchos locales y negocios cerrados, algunos de los perjudicados no paran de ver como la normativa cambia y cada vez les permiten abrir con cierto aforo, ciertas horas y luego los vuelven a cerrar. Como esto ya es un verdadero quebradero de cabeza hemos pensado ponérselo más fácil y aportar nuestro granito de arena. Para ello hemos tenido en mente los gimnasios. Después de que la gente pasara tiempo en sus casas sin hacer el mínimo ejercicio para mantenerse saludable, ha habido una avalancha de altas en los gimnasios para volver a esa forma en la que nos sentíamos bien con nosotros mismos. Esto hace que sea necesario un cierto control de acceso y planificación del aforo. Para ello se creará una aplicación para smartphones ya que prácticamente todo el mundo lleva uno en el bolsillo. Con este desarrollo encontraremos una forma fácil de tener un buen control de acceso para los clientes de tu gimnasio y todo aquello que puedas ofrecer como clases, salas, horarios, etc... La solución que se ofrece es dicha aplicación utilizada mediante tecnología web desarrollada para Android que posteriormente podrá, con el mismo código, exportarse para otras plataformas, y una API para el acceso a los datos., [EN] Everyone knows that this pandemic has left many stores and businesses closed, some of those affected do not stop seeing how the regulations change and each time they allow them to open with a certain capacity, certain hours and then close them again. As this is already a real headache, we have thought to make it easier for you and contribute our grain of sand. For this, we thought about gyms. After people spent time at home without doing even the slightest bit of exercise to stay healthy, there has been an avalanche of joining gyms to get back to that way we felt good about ourselves. That requires some access control and capability planning. For this, an application for smartphones will be created since practically everyone carries one in their pocket. With this development we will find an easy way to have a good access control for the clients of your gym and everything that you can offer such as classes, rooms, schedules, etc... The solution that is offered is said application used through web technology developed for Android that can later, with the same code, be exported to other platforms, and an API for data access. The solution that is offered is said application, used through web technology developed for Android that can later, with the same code, be exported to other platforms, and an API for data access.

[ES] En medio de la era de la digitalización, la pandemia del Covid-19 ha ocasionado un fuerte crecimiento de los medios telemáticos: teletrabajo, videollamadas, redes sociales... Es por ello que cualquier aplicación que digitalice un proceso va a ser imprescindible. Este trabajo de fin de grado consiste en el desarrollo de una aplicación web para poner en contacto a empresas de toda la Unión Europea, que interactuarán a través del sistema para llevar a cabo proyectos conjuntos sin necesidad de desplazarse. Esta aplicación será responsiva, pudiendo utilizarse desde cualquier tipo de dispositivo que cuente con un navegador web. Se basará en el modelo cliente-servidor utilizando distintas tecnologías, y el resultado final será una aplicación web rápida y escalable, que crecerá con las empresas y sus proyectos. [EN] In the middle of the digitalisation age, the Covid-19 pandemic has led to a strong growth in telematic media: remote working, video calls, social networks... This is why any application that digitises a process is going to be essential. This final degree project consists of the development of a web application to connect companies from all over the European Union, which will interact through the system to carry out joint projects without the need to travel. This application will be responsive, being able to be used from any type of device with a web browser. It will be based on a client-server model using different technologies, and the final result will be a fast and scalable web application that will grow with the companies and their projects.

[ES] ASys es un sistema semiautomático de evaluación de ejercicios y exámenes centrado principalmente en el lenguaje Java. El objetivo de esta plataforma es motivar, contribuir y maximizar el aprendizaje de los estudiantes universitarios en lenguajes de programación como el recién mencionado. Para ello, es imprescindible que la aplicación disponga de mecanismos de gamificación que mantengan vivas las ganas de los estudiantes de aprender y de utilizar la plataforma. Este trabajo analiza los diferentes métodos gamificables existentes con el fin de implementarlos en ASys. A partir de dicho análisis, se ha desarrollado un sistema de monetización interno de la aplicación. Para ello, la realización de ejercicios en la plataforma se premia con monedas que los usuarios pueden gastar en una nueva pantalla que actúa como tienda interna de la aplicación. En esta tienda se pueden comprar diversos objetos, tanto estéticos como de utilidad como pistas en ejercicios. En suma, los objetos comprados por el usuario se pueden visualizar en una pantalla nueva que actúa como un inventario. El presente documento comienza con un extenso análisis de los distintos métodos de gamificación y prosigue con la definición de los requisitos y funcionalidades extraídas a partir de este análisis. Seguidamente se detalla su diseño e implementación, y termina con una sección que reúne todas las pruebas realizadas sobre la solución final. Durante todo el desarrollo se han empleado las tecnologías que se han utilizado hasta ahora en ASys, es decir, Vue (Javascript, HTML y CSS) para el cliente y Spring Boot (Java) en el servidor., [EN] ASys is a semi-automatic assessment system for exercises and exams mainly focused on the Java language. The objective of this platform is to motivate, contribute and maximize the learning of university students in programming languages like the one just mentioned. For this, it is essential that the application has gamification mechanisms that keep the desire of students to learn and use the platform. This work analyzes the different existing gamifiable methods in order to implement them in ASys. Based on this analysis, an internal monetization system for the application has been developed. To do this, carrying out exercises on the platform is rewarded with coins that users can spend on a new screen that acts as an internal store for the application. In this store users can buy various objects, both aesthetic and useful, as exercise clues. In sum, once the objects purchased by the user can be displayed on a new screen that acts as an inventory. This document begins with an extensive analysis of the different gamification methods and continues with the definition of the requirements and functionalities extracted from this analysis. Next, its design and implementation are detailed, and ends with a section that gathers all the tests carried out on the final solution. Throughout the development, the technologies that have been used so far in ASys have been used, that is, Vue (Javascript, HTML and CSS) for the client and Spring Boot (Java) for the server.

[ES] ASys es una plataforma destinada al aprendizaje y la práctica de lenguajes de programación cuyos principales usuarios son estudiantes universitarios en sus primeros años como programadores. Esta red social busca fomentar y motivar el conocimiento de los lenguajes de programación y se encuentra enfocada especialmente hacia el aprendizaje de Java. Dentro de esta función motivadora, un sistema de ranking, donde los usuarios puedan competir, es fundamental para incentivar el aprendizaje. En este trabajo nos hemos propuesto la creación de un sistema de ranking que permita clasificar a los usuarios y competir a medida que realizan más ejercicios y practican sus habilidades como programadores. Este ranking poseerá tres sistemas de clasificación y permitirá a los usuarios competir a lo largo de un día, semana y mes. Además, se incorporará un sistema de estadísticas que proporcionará a los usuarios un análisis de su evolución en la plataforma. Para poder mejorar la comprensión de este nuevo sistema de clasificación de usuarios se aportará una pantalla de documentación que permita comprender el funcionamiento del ranking de ASys. A lo largo del documento explicaremos las principales características y funcionalidades que posee este sistema y las decisiones tomadas en el proceso de diseño y desarrollo. Para ello, haremos uso de las tecnologías en las que se basa la plataforma, Spring (Java) y Vue (JavaScript, HTML y CSS), y explicaremos la estructura y elementos necesarios para satisfacer los requisitos propuestos que se han desarrollado. Finalmente, analizaremos la solución creada mediante distintos tipos de pruebas que permitan validar el producto final obtenido., [EN] ASys is a platform created to contribute to the learning and practice of programming languages whose main users are undergraduate students at their first stages as programmers. This social network aims at motivating students to improve their knowledge about the programming languages, and it is specially focused on the learning of Java. Within this goal, a ranking system where users can compete is a key element that will encourage the learning process. In this project we want to create and develop a new ranking system that will allow students to compete as they do more exercises and practice their programming skills. This ranking will have three different scoring systems and will let users competing throughout the day, week, and month. We will add to ASys a stats service that will help users to see their evolution at the platform. To help users understand the features of this new ranking system we will create a documentation page that will explain how the ASys rankings work. In this document we will explain the main features of this new system and the decisions made in the development process. We will use the technologies that have been used for creating the platform, Spring (Java) and Vue (JavaScript, HTML, and CSS), and we will explain the structure and components of the system that have been developed to achieve the proposed goals. Finally, we will analyze the solution created with different sets of testing techniques to validate the final product.

[ES] eSignaBox es una aplicación web para el intercambio seguro y firma de documentos y comunicaciones. Actualmente su front-end está desarrollada mediante GWT, lo cual está generando una serie de problemas derivados de su uso. En este trabajo se observan estos problemas y se propone una solución. Esta solución consiste en la selección de un nuevo stack tecnológico para el desarrollo de eSignaBox. Para ello se ha realizado la evaluación de diferentes frameworks de desarrollo con el fin de poder formar el stack que más beneficie a la aplicación. Para lograrlo se ha utilizado tres stacks tecnológicos, formados por un framework de JavaScript, de CSS y de test. Con cada uno de estos tres stacks se ha realizado el desarrollo de una pequeña aplicación con el fin de determinar qué frameworks son los elegidos finalmente para formar el nuevo stack de eSignaBox., [EN] eSignaBox is a web application for the secure exchange and signing of documents and communications. Currently its front-end is developed through GWT, which is generating a series of problems derived from its use. In this project, these problems are observed and a solution is proposed. This solution consists of the selection of a new technological stack for the development of eSignaBox. For this, the evaluation of different development frameworks has been carried out in order to be able to form the stack that most benefits the application. To achieve this, three technological stacks have been used, each of them formed by a JavaScript framework, a CSS framework and test framework. With each of these three stacks, a small application has been developed in order to determine which frameworks are finally chosen to form the new eSignaBox stack.

[ES] El proyecto consiste en el desarrollo de una app multiplataforma para la generación y almacenamiento de contraseñas seguras. En dicha app, el usuario será capaz de generar una contraseña después de registrarse y confirmar el correo de registro. La contraseña será generada a partir de la inserción, por parte del usuario, de 4 campos: ¿nombre¿, ¿longitud¿, ¿dificultad¿, ¿pista¿ y su respuesta. Tras la generación, un hash de la contraseña será almacenado en la base de datos junto a otros valores necesarios para poderla regenerar. El usuario para poder volver a generar la contraseña necesitará introducir las respuestas a las pistas que ha introducido previamente. La aplicación se ha desarrollado sobre una plataforma Web, en el que el software del cliente está desarrollado en HTML5, JavaScript, CSS y el servidor en Node.js, utilizando el sistema de gestión de paquetes de npm para instalar distintas librerías necesarias para el desarrollo. La base de datos será proporcionada por MongoDB y será de tecnología NoSQL., [EN] The project involves the development of a multiplatform app for the generation and storage of secure passwords. In this app, the user will be able to generate a password after registering and confirming the registration email. The password will be generated from the insertion, by the user, of 4 fields: ¿name¿, ¿length¿, ¿difficulty¿, ¿hint¿ and the answer. After generation, a hash of the password will be stored in the database along with other values necessary to be able to regenerate it. To be able to generate the password again, the user will need to enter the answers to the clues that they have previously entered. The application has been developed on a Web platform, in which the client software is developed in HTML5, JavaScript, CSS and the server in Node.js, using the npm package management system to install different libraries necessary for development. The database will be provided by MongoDB and will be NoSQL technology.

[ES] Una marca fuerte tiene una ventaja importante: reconocimiento. Con el reconocimiento llega la familiaridad, y con ella llega la seguridad y la confianza. La fortaleza de una marca reside fundamentalmente en transmitir un mensaje consistente, de manera que el consumidor lo distinga inmediatamente de sus competidores. Esto es de gran importancia para las empresas online. No es suficiente con tener una web bonita y presentable sin más, ya que ésta y la experiencia del usuario en la misma determinarán la visión que el consumidor tiene sobre la marca de forma directa. Este trabajo trata de diseñar y desarrollar una web de comercio electrónico para una marca de venta de ropa online. El objetivo principal es generar una web destacable que represente y diferencie a la marca. Para ello, se definirá, en primer lugar, la comunicación visual de marca. Seguido de un estudio de varias webs de competidores y de tendencias de diseño web, que ayudarán a determinar la apariencia del sitio web. A continuación, se definirá el diseño y navegación de la web mediante el prototipado. Para seguidamente ser desarrollado en lenguaje web para su producción definitiva. Todo este proceso será explicado, incidiendo en los aspectos y conceptos más relevantes del diseño y su desarrollo hasta alcanzar un resultado final que cumpla con las características y objetivos planteados., [EN] A strong brand has one important advantage: recognition. With recognition comes familiarity, and with familiarity comes trust and confidence. The strength of a brand lies fundamentally in conveying a consistent message, so that the consumer immediately distinguishes it from its competitors. This is of great importance for online businesses. It is not enough to have a beautiful and presentable website, as it and the user¿s experience on it will directly determine the consumer¿s view of the brand. This work is about designing and developing an e-commerce website for an online clothing brand. The objective is to generate a remarkable website that represents and differentiates the brand. To do this, we will define, first of all, the visual brand communication. This will be followed by a study of several competitors websites and web design trends, which will help determine the look and feel of the website. Next, the design and navigation of the website will be defined through prototyping. Then it will be developed in web language for its final production. This whole process will be explained, focusing on the most relevant aspects and concepts of the design and its development to achieve a final result that meets the characteristics and objectives set.

[ES] En los próximos años, el Internet de las Cosas (IoT) está llamado a revolucionar el sector logístico interconectando mercancías, transportes y contendores de forma energéticamente eficiente gracias al desarrollo de las redes de área amplia de baja potencia (LPWAN). En el caso particular de los puertos marítimos, el auge del comercio internacional y el continuo aumento del tamaño de los buques portacontenedores tienen un impacto directo en la congestión de las operaciones en la entrada/salida de puertos y terminales marítimos. Estos factores, junto a una mala programación de los flujos de camiones que entran y salen por accesos portuarios, está dando lugar a importantes niveles de congestión en las horas pico de tráfico en las instalaciones portuarias. En el TFG se desarrollará una aplicación web en Python que incluirá una herramienta de visualización de los indicadores necesarios para la correcta monitorización de los contenedores dentro de las instalaciones portuarias. Además, conectado a la aplicación, se realizará la implementación del protocolo de comunicación propietario de un receptor GPS entre receptor y el servidor de almacenamiento para poder mostrar la geolocalización de los contenedores dentro del puerto y analizar mejor la congestión. Además, se implementará el algoritmo necesario para las geocercas alrededor de la zona de pruebas para minimizar el consumo innecesario de la batería de los dispositivos de seguimiento. Por último, se realizarán pruebas y análisis de medidas de cobertura del receptor GPS en GSM y NB-IoT., [EN] In the coming years, the Internet of Things (IoT) is called to revolutionize the logistics sector by interconnecting goods, transport, and containers in an energy efficient way thanks to the development of Low Power Wide Area Networks (LPWAN). In the case of maritime ports, the rise of international trading and the continuous increase of the container vessel sizes are having a direct impact on the congestion of road operations at the entrance/exit of maritime ports and terminals. These factors, together with a bad scheduling for the flows of trucks entering and exiting port accesses, are leading to significant levels of congestions in peak traffic times at port facilities. In this project, the student must develop a web application in Python that will include a visualization tool with the necessary gauges for the correct monitoring of the containers inside port facilities. In addition, connected to the application, the student will also have to program a proprietary GPS communication protocol between the receiver and the storage server to show the geolocation of the containers within the port and better analyze the congestion. In addition, a geofence algorithm will be implemented around the test area to minimize unnecessary battery consumption of tracking devices. Finally, tests and analysis of coverage measurements of the GPS receiver will be carried out in GSM and NB-IoT.

[ES] En este proyecto, a partir de la base de SuiteCRM (Un CRM open Source) realizo unas series de modificaciones de los módulos base y creo módulos personalizados. Ademas de la realización de diferentes informes y pantallas de ayuda con tal de conseguir el flujo de trabajo que la empresa de servicios ayuda a mayores y dependencia necesita para su correcta gestión. Veremos la progresión del flujo desde que el cliente se interesa por contratar el servicio hasta la facturación del mismo pasando por las nominas del empleado asignado.

[ES] En estos últimos años y debido a una gran evolución tecnológica, se ha percibido un gran aumento en la creación de aplicaciones móviles. El desarrollo de estas aplicaciones cada vez se ve más dificultado debido a la gran cantidad de sistemas operativos y dispositivos que existen, cada cual ligado a un desarrollo en concreto. Debido a esto, siempre ha sido importante seleccionar la plataforma (sistema operativo y dispositivo) para la que desarrollar la aplicación. Sin embargo, el acto de tener que seleccionar solamente un sistema operativo para crear la aplicación es un inconveniente, ya que solamente se centra en una gama concreta y no puede abarcar una gran cantidad de mercado, teniendo así que ser desarrollada varias veces para poder cubrir la totalidad del mismo. En la actualidad, existen varios frameworks que permiten desarrollar una aplicación y distribuirla en diferentes plataformas. Estos frameworks tienen la gran ventaja de poder ejecutar la aplicación independientemente del sistema operativo y del dispositivo utilizando un único código. Este proyecto se centra en la creación de una aplicación que permite la gestión y distribución de productos para una empresa que proporciona productos químicos y de limpieza a hoteles. El enfoque para el desarrollo de la aplicación contempla que pueda ser utilizada tanto en el lado del cliente como por la empresa propietaria. La aplicación constará de tres niveles de autenticación para cada tipo de usuario que permitirán: gestionar productos de almacén y pedidos de los clientes (administración), tener un seguimiento y una ayuda para realizar los repartos de los pedidos a los clientes (repartidores), facilitar la realización de los pedidos semanales o mensuales (clientes)., [EN] In recent years and due to a great technological evolution, a great increase in the creation of mobile applications has been perceived. The development of these applications is increasingly difficult due to the large number of operating systems and devices that exist, each one linked to a specific development. Because of this, it has always been important to select the platform (operating system and device) for which to develop the application. However, the act of having to select only one operating system to create the application is a disadvantage, since it only focuses on a specific range and cannot cover a large amount of the market, thus having to be developed several times in order to cover the entire market. Nowadays, there are several frameworks that allow the development of an application and its distribution in different platforms. These frameworks have the great advantage of being able to run the application independently of the operating system and the device using a single code. This project focuses on the creation of an application that allows the management and distribution of products for a company that provides chemical and cleaning products to hotels. The approach for the development of the application contemplates that it can be used both on the client side and by the owner company. The application will have three levels of authentication for each type of user that will allow: to manage warehouse products and customer orders (administration), to have a follow up and help to make the deliveries of the orders to the customers (distributors), to facilitate the weekly or monthly orders (customers).

[ES] En este Trabajo Fin de Grado se diseña y desarrolla una interfaz web de una sóla página (SPA), destinada a ser la parte visual de un simulador de procesadores superescalares para uso docente. Mediante la interfaz, el usuario puede modificar los parámetros de ejecución de dicho simulador, además de cargar y ejecutar sus propios ficheros de código ensamblador, para, una vez ejecutado el código, visualizar los diferentes datos proporcionados por la salida del simulador. Estos datos son procesados e incluidos en diferentes tablas que representan el estado del procesador en cada ciclo. El diseño de la interfaz es extensible para facilitar que, en un futuro, se añadan más tablas con mínimas modificaciones en el código. La implementación de la interfaz se ha realizado utilizando exclusivamente tecnologías front-end, concretamente JavaScript, HTML y CSS. También se han utilizado algunas funcionalidades del framework Material Design, Materialize CSS y el editor de código embebido CodeMirror. Para la implantación de interfaz y simulador se ha utilizado la tecnología Emscripten, que permite compilar el código en C del simulador y traducirlo a JavaScript. Mediante esta tecnología, tanto interfaz como simulador pueden ejecutarse sin necesidad de soporte dinámico en el back-end, lo que facilita la implantación en plataformas como PoliformaT., [EN] In this Final Degree Project a single page web interface (SPA) is designed and developed, aimed to be the visual part of a superscalar processors simulator for teaching purposes. With the application, the user can modify the simulator execution parameters, in addition to loading and executing assembly code files. Once the code has been executed the user can visualize the different data provided by the simulator output. Output data is processed and included in different tables that represent the state of the processor in each execution cycle. The interface design is extensible to facilitate adding more data tables with minimal source code modifications. The interface implementation has been done using specific front-end technologies, specifically JavaScript, HTML and CSS. Some functionalities of the Material Design framework, Materialize CSS, and the CodeMirror embedded code editor have also been leveraged. Emscripten technology has been used too, which allows the original simulator's C code to be compiled and translated into JavaScript. Using this technology, both the interface and the simulator can be run without the need of dynamic support in the back-end, which makes it easier the deployment of the application on platforms such as PoliformaT.

[ES] El objetivo de este TFM es trasladar una aplicación desarrollada previamente en MAX/MSP (entorno de programación e interacción mempleado en el mundo audiovisual) a tecnologías web, de forma que pueda ser ejecutada en cualquier dispositivo sin necesidad de ninguna descarga específica. Se utilizará HTML/CSS junto a JavaScript además de la API Web Audio. Además se ampliarán sus funcionalidades. Esta aplicación genera aleatoriamente patrones de acordes y melodías en escalas musicales seleccionables, incluyendo además una sección rítmica configurable. Se trata de una herramienta pensada para el entrenamiento del oído musical enfocada a músicos y estudiantes de música, que podrá ejecutarse desde cualquier navegador web. La aplicación tendrá dos modalidades, con melodía o con acordes. Cada modalidad incluye un metrónomo, totalmente configurable, la melodía o los acordes, con la posibilidad de elegir todas las notas, tonos, octavas, silencios, instrumentos¿ así como un ostinato, que acompañará la composición para dotarla de mas armonía. También se incluye un temporizador. El método de aprendizaje consiste en: el usuario elige todos los parámetros de la composición que quiere escuchar, se genera una composición aleatoria de determinado numero de compases, seguido del mismo numero de compases en los que solo suena el metrónomo y el ostinato, para que el usuario repita las notas y tonos que ha escuchado. Esta composición se repetirá un numero seleccionable de veces, tras lo cual se generará una composición nueva. Los mayores retos a resolver son: la sincroniazción exacta dentro de un entorno de trabajo asíncrono basado en JavaScript; el desarrollo de la interfaz de usuario, y la síntesis musical en tiempo real., [EN] The objective of this TFM is to transfer an application previously developed in MAX/MSP (programming and interaction environment memployed in the audiovisual field) to web technologies, so that it can be executed on any device without any specific download. HTML/CSS will be used in conjunction with JavaScript in addition to the Web Audio API. Moreover, its functionalities will be expanded. This app randomly generates chords and melodies patterns on selectable musical scales, including a configurable rhythm section. It is a tool designed for the training of the musical ear focused on musicians and music students, that can be run from any web browser. The application will have two modes, with melody or with chords. Each mode includes a metronome, fully configurable, the melody or chords, with the possibility to choose all the notes, tones, octaves, silences, instruments... as well as an ostinato, which will accompany the composition to give it more harmony. A timer is also included. The learning method consists of: the user chooses all the parameters of the composition that he wants to listen to, a random composition of a certain number of bars is generated, followed by the same number of bars in which only the metronome and ostinate sound, so that the user repeats the notes and tones that he has heard. This composition will be repeated a selectable number of times, after which a new composition will be generated. The biggest challenges to solve are: accurate synchronisation within a JavaScript-based asynchronous work environment; developing the user interface, and musical synthesis in real time.

[ES] El TFG consiste en el desarrollo de una base de datos para albergar tanto los datos de los usuarios como los de sus inmuebles, así como el desarrollo tanto del backend como del frontend de la aplicación web donde serán publicados dichos inmuebles

[ES] En este trabajo, orientado al estudio de los sistemas de entrada y salida mediante el uso de la voz, que, aunque son habituales las aplicaciones que utilizan la voz como medio de entrada y salida en la actualidad, la mayor parte de las soluciones aplicadas son propietarias y cerradas. Desde el entorno de las aplicaciones web está emergiendo una propuesta que puede hacer cambiar esta situación que estudiaremos con más detalle. En este caso, vamos a explorar la librería Web Speech API de código abierto, que pretende ser la base de las pautas a seguir para desarrollar este tipo de aplicaciones de reconocimiento, es decir la entrada de audio y la síntesis de la voz, salida del audio. Este proyecto aborda la realización de una aplicación que a modo de un asistente personal nos permita la realización de diferentes funciones visuales mediante el uso de la voz. Con este objetivo se abordarán tanto los mecanismos que hacen posible el reconocimiento de voz, como la síntesis, utilizando los eventos y funciones de esta API. Palabras clave, [EN] This project is oriented to the studies of voice input and output systems in different applications, which amount of these applications that use voice as a means of input and output are common in actuality, most of these applications are private and closed. From the environment of web applications is emerging a proposal that can change this situation and we will study in more detail. In this case we are going to explore about the library that intends to be the base of the guidelines to follow to develop this type of applications for voice recognition, possible the audio input, as the synthesis, audio output. This project deals with the development of an application that as a personal assistant receives voice commands and returns some preconfigured actions as a test of this API methods, which will address both the mechanism that make voice recognition and the synthesis, using the events and functions of this API., [CA] En aquest treball, orientat a l’estudi dels sistemes d’entrada i eixida mitjançant la veu en diferents aplicacions, encara que hui en dia son habituals les aplicacions que utilitzen la veu com a mitjà d’entrada i eixida, la major part de les solucions aplicades son de propietari i tancades. En l’entorn de les aplicacions web està sorgint una proposta que pot fer que canvií aquesta situació i que l’estudiarem amb mes detall. En aquest cas anem a explorar sobre la llibreria que pretén d’alguna forma ser la base de les pautes a seguir per desenvolupar aquest tipus d’aplicacions de reconeixement de veu, es a dir l’entrada d’àudio i de síntesis de veu, eixida de veu. Aquest projecte aborda el desenvolupament d’una aplicació que a mode d’assistent personal, ens permetrà la realització de diferents funcions visuals mitjançant l’ús de la veu. Amb aquest objectiu s’abordaran tan els mecanismes que fan possible el reconeixement de veu com la síntesis de la veu, mitjançant els esdeveniments i funcions d’aquesta API.

[ES] El algoritmo ADN emocional (ADNe) es el algoritmo desarrollado por Elías Azulay basado en el análisis transaccional. Teniendo como base los trabajos de prestigiosos psiquiatras, científicos y genetistas, este algoritmo ha ayudado a muchas empresas a reclutar a los trabajadores más idóneos ya que se basa en calcular la máxima afinidad entre el comportamiento emocional del candidato, la empresa y las funciones a realizar en ella. En este proyecto, se pretende usar las virtudes del algoritmo ADNe para realizar el diseño y la implementación de una aplicación web adaptativa a dispositivos móviles, siendo su principal objetivo formar grupos de trabajo óptimos entre los alumnos de cualquier asignatura, dando prioridad a la afinidad de todos los integrantes de los grupos y la usabilidad de la aplicación web., [EN] The emotional DNA algorithm (eDNA) is the algorithm developed by Elías Azulay based on transactional analysis. Based on the work of prestigious psychiatrists, scientists and geneticists, this algorithm has helped many companies to recruit the most suitable workers since it is based on calculating the maximum affinity between the emotional behavior of the candidate, the company and the functions to perform in. In this project, we intend to use the virtues of the eDNA algorithm to design and implement an adaptive web application for mobile devices, with the main objective of forming optimal working groups among the students of any subject, giving priority to the affinity of the whole members of the groups and the usability of the web application.

[ES] En una época de constante avance tecnológico, es cada vez más común la aparición de nuevos sistemas que ofrecen facilidades, en diferentes ámbitos, a los ususarios. Asys es una plataforma enfocada en mejorar el aprendizaje de los alumnos en materia de programación. Por una parte, los aprendices tendrán a su disposición ejercicios clasificados, que podrán realizar en la misma plataforma, y que serán corregidos automáticamente por el sistema o por personal docente. Además, les serán dadas recomendaciones personalizadas, basadas en su historial de ejercicios resueltos. Por otra parte, los profesores tendrán acceso al perfil académico de sus alumnos y además tendrán la opción de corregir ejercicios de forma manual, automática y semiautomática. Este trabajo ha sido impulsado por la necesidad de ofrecer a los alumnos su información académica del sistema, así como recomendaciones prácticas que puede tener en cuenta para progresar. El objetivo que se persigue es estructurar un entorno en el que los aprendices puedan acceder a la información personal relevante relacionada con su aprendizaje., [EN] In a time of constant technological advancement, the emergence of new systems that offer facilities to users is becoming increasingly common. Asys is a platform focused on improving student learning in programming. On the one hand, the pupils will have at their disposal classified exercises, which they can perform on the same platform, and which will be automatically corrected by the system or by teaching staff. In addition, personalized recommendations will be given, based on their history of solved exercises. On the other hand, teachers will have access to the academic profile of their students and will also have the option of correcting exercises manually, automatically and semi-automatically. This work has been driven by the need to offer the students their academic system information, as well as practical recommendations that can be considered to progress. The objective is to structure an environment in which the pupils can access the relevant personal information related to their learning.

[ES] Actualmente vivimos en un mundo donde se generan una cantidad de datos que era inimaginable hasta hace unos años, un claro ejemplo de esto son las empresas, que hoy en día manejan flujos de información mayores que nunca. En este ámbito saber aprovechar esa información y sacarle partido es esencial, te puede permitir diferenciarte de la competencia y tomar mejores decisiones. Para ello se emplean las herramientas de inteligencia de negocio, que analizan y transforman la información para que sea mas fácil para los usuarios entenderla, extraer ideas claras, conclusiones y tomar decisiones mas acertadas. En este contexto se ha desarrollado una solución que permite aplicar esto al ámbito de prevención y actuación ante los riesgos para una empresa del sector agroalimentario. Dicha solución tiene dos partes, una es una aplicación web destinada a insertar datos en el sistema y la otra parte son unos informes de Business Intelligence que muestran los datos una vez tratados. Para la realización de los informes se emplea la herramienta de inteligencia de negocio denominada Power BI, con la que también se han tratado los datos. Dichos datos provienen de una base de datos que se alimenta mediante la aplicación web. En la aplicación web realizada con HTML, CSS y PHP los usuarios podrán introducir, borrar y visualizar la datos de la base de datos. La solución permite la existencia de diferentes tipos de usuarios y dependiendo del tipo de usuario pueden modificar y visualizar unos datos u otros en la aplicación web o acceder a un grupo de informes diferente. Como conclusión se ha realizado una herramienta que de forma sencilla e intuitiva permite a los usuarios gestionar la prevención de riesgos y la toma de decisiones respecto a ellos gracias a los informes de inteligencia de negocio y a la aplicación que permite administrar los datos que se muestran en dichos informes., [CA] Actualment vivim en un món on es generen una quantitat de dades que era inimaginable fins fa uns anys, un clar exemple d’això són les empreses, que hui dia manegen fluxos d’informació majors que mai. En aquest àmbit saber aprofitar aqueixa informació i traure-li partit és essencial, et pot permetre diferenciar-te de la competència i prendre millors decisions. Per a això s’empren les eines d’intel·ligència de negoci, que analitzen i transformen la informació perquè siga mes fàcil per als usuaris entendre-la, extraure idees clares, conclusions i prendre decisions mes encertades. En aquest context s’ha desenvolupat una solució que permet aplicar això a l’àmbit de prevenció i actuació davant els riscos per a una empresa del sector agroalimentari. Aquesta solució té dues parts, una és una aplicació web destinada a inserir dades en el sistema i l’altra part són uns informes de Business Intelligence que mostren les dades una vegada tractats. Per a la realització dels informes s’empra l’eina d’intel·ligència de negoci denominada Power BI, amb la qual també s’han tractat les dades. Aquestes dades provenen d’una base de dades que s’alimenta mitjançant l’aplicació web. En l’aplicació web realitzada amb HTML, CSS i PHP els usuaris podran introduir, esborrar i visualitzar la dades de la base de dades. La solució permet l’existència de diferents tipus d’usuaris i depenent del tipus d’usuari poden modificar i visualitzar unes dades o altres en l’aplicació web o accedir a un grup d’informes diferent. Com a conclusió s’ha realitzat una eina que de forma senzilla i intuïtiva permet als usuaris gestionar la prevenció de riscos i la presa de decisions respecte a ells gràcies als informes d’intel·ligència de negoci i a l’aplicació que permet administrar les dades que es mostren en aquests informes., [EN] Nowadays we live in a world where large amounts of data are created everyday, something that a few years ago was unimaginable, a clear example of this is how companies handle information flows bigger than ever. So, take advantage of this information is essential, it allows you to differentiate yourself from the competition and take better decisions. To do so Business intelligence tools are used in order that analyze and transform information to make it easier for users to understand it, extract clear ideas, conclusions and make better decisions. In this context, a solution has been developed that allows applying this to the field of prevention and action against risks for a company in the Agri-food sector. This solution has two parts, one of them its a web application destined to insert date into the system and the other part consist of a set of Business Intelligence reports that show the date once has been treated. For the creation of the reports a Business Intelligence tool call Power Bi has been used, also the tool has allowed to treat the data before showing it in the reports. The data that feeds the reports comes from a database and the database is populated via the web application. In the web application built with HTML, CSS and PHP, users will be able to introduce, erase and visualize the data in the database. The solution allows the existence of different types of users and depending on the type of user they can modify and display some data or others in the web application or access to different groups of reports. In conclusion, a tool has been created that allows users to manage risk prevention and decision-making in a simple and intuitive way, thanks to the business intelligence reports and the application that allows managing the data shown in those reports.

[ES] Diseño y desarrollo de una aplicación web para gestionar el contenido y controlar pedidos online de una empresa de restauración, implementando un panel de administración backend mediante el cual los trabajadores pueden acceder a él y gestionar dicho contenido. Implementación de diversas funcionalidades como es la traza de la ruta óptima para la entrega de varios pedidos simultáneamente, o como la salida de los pedidos vía impresora de pedidos en cocina o en barra, en base a la categoría de cada producto., [EN] Design and development of a web application to manage content and control online orders of a catering company, implementing a backend administration panel through which workers can access it and manage said content. Implementation of various functionalities such as the tracing of the optimal route for the delivery of several orders simultaneously, or as the output of orders via order printer in kitchen or bar, based on the category of each product.

[ES] Este proyecto consta del diseño de un geoportal multiplataforma que contiene múltiples capas comprendiendo gran parte de la información geográfica del municipio de Bétera. Se ha diseñado un geoportal web en el que tanto personal de la administración, ciudadanos y empresas pueden obtener todo tipo de información alfanumérica, gráfica y documentos asociados a elementos geográficos. El sistema se organiza mediante mapas y capas, pudiéndose realizar búsquedas o editar geometrías, entre otras funcionalidades. La información cartográfica incluida en el geoportal abarca diferentes campos como pueden ser medio ambiente, urbanismo, patrimonio, inventarios, ... Consta tanto de ficheros shape ya existentes en la base de datos del Ayuntamiento, como de nuevos elementos creados a partir de ficheros de Autocad y tomados mediante estación total o GPS., [EN] This project consists in the design of a multi-platform geoportal which has multiple layers covering a great amount of the geographic information in the municipality of Bétera. A geoportal has been designed where administrative staff, citizens and companies can obtain alphanumeric and geographic information, and documents associated to graphic elements. The system is organized with maps and layers where you can search information or edit geometries, among other functionalities.