Obtención y Uso de Patrones para la Implementación de Funcionalidades de Usabilidad en Aplicaciones Web

La usabilidad es un atributo de calidad de un sistema software que llega a ser crítico en sistemas altamente interactivos. Desde el campo de la Interacción Persona-Ordenador se proponen recomendaciones que permiten alcanzar un nivel adecuado de usabilidad en un sistema. En la disciplina de la Ingeniería de Software se ha establecido que algunas de estas recomendaciones afectan a la funcionalidad principal de los sistemas y no solo a la interfaz de usuario. Este tipo de recomendaciones de usabilidad se deben tener en cuenta desde las primeras actividades y durante todo el proceso de desarrollo, así como se hace con atributos tales como la seguridad, la facilidad de mantenimiento o el rendimiento. Desde la Ingeniería de Software se han hecho estudios y propuestas para abordar la usabilidad en las primeras actividades del desarrollo. En particular en la educción de requisitos y diseño de la arquitectura. Estas propuestas son de un alto nivel de abstracción. En esta investigación se aborda la usabilidad en actividades avanzadas del proceso de desarrollo: el diseño detallado y la programación. El objetivo de este trabajo es obtener, formalizar y validar soluciones reutilizables para la usabilidad en estas actividades. En este estudio se seleccionan tres funcionalidades de usabilidad identificadas como de alto impacto en el diseño: Abortar Operación, Retroalimentación de Progreso y Preferencias. Para la obtención de elementos reutilizables se utiliza un método inductivo. Se parte de la construcción de aplicaciones web particulares y se induce una solución general. Durante la construcción de las aplicaciones se mantiene la trazabilidad de los elementos relacionados con cada funcionalidad de usabilidad. Al finalizar se realiza un análisis de elementos comunes, y los hallazgos se formalizan como patrones de diseño orientados a la implementación y patrones de programación en cada uno de los lenguajes utilizados: PHP, VB .NET y Java. Las soluciones formalizadas como patrones se validan usando la metodología de estudio de casos. Desarrolladores independientes utilizan los patrones para la inclusión de las tres funcionalidades de usabilidad en dos nuevas aplicaciones web. Como resultado, los desarrolladores pueden usar con éxito las soluciones propuestas para dos de las funcionalidades: Abortar Operación y Preferencias. La funcionalidad Retroalimentación de Progreso no puede ser implementada completamente. Se concluye que es posible obtener elementos reutilizables para la implementación de cada funcionalidad de usabilidad. Estos elementos incluyen: escenarios de aplicación, que son la combinación de casuísticas que generan las funcionalidades de usabilidad, responsabilidades comunes necesarias para cubrir los escenarios, componentes comunes para cumplir con las responsabilidades, elementos de diseño asociados a los componentes y el código que implementa el diseño. Formalizar las soluciones como patrones resulta útil para comunicar los hallazgos a otros desarrolladores y los patrones se mejoran a través de su utilización en nuevos desarrollos. La implementación de funcionalidades de usabilidad presenta características que condicionan su reutilización, en particular, el nivel de acoplamiento de la funcionalidad de usabilidad con las funcionalidades de la aplicación, y la complejidad interna de la solución. ABSTRACT Usability is a critical quality attribute of highly interactive software systems. The humancomputer interaction field proposes recommendations for achieving an acceptable system usability level. The discipline of software engineering has established that some of these recommendations affect not only the user interface but also the core system functionality. This type of usability recommendations must be taken into account as of the early activities and throughout the software development process as in the case of attributes like security, ease of maintenance or performance. Software engineering has conducted studies and put forward proposals for tackling usability in the early development activities, particularly requirements elicitation and architecture design. These proposals have a high level of abstraction. This research addresses usability in later activities of the development process: detailed design and programming. The goal of this research is to discover, specify and validate reusable usability solutions for detailed design and programming. Abort Operation, Feedback and Preferences, three usability functionalities identified as having a high impact on design, are selected for the study. An inductive method, whereby a general solution is induced from particular web applications built for the purpose, is used to discover reusable elements. During the construction of the applications, the traceability of the elements related to each usability functionality is maintained. At the end of the process, the common and possibly reusable elements are analysed. The findings are specified as implementation-oriented design patterns and programming patterns for each of the languages used: PHP, VB .NET and Java. The solutions specified as patterns are validated using the case study methodology. Independent developers use the patterns in order to build the three usability functionalities into two new web applications. As a result, the developers successfully use the proposed solutions for two of the functionalities: Abort Operation and Preferences. The Progress Feedback functionality cannot be fully implemented. We conclude that it is possible to discover reusable elements for implementing each usability functionality. These elements include: application scenarios, which are combinations of cases that generate usability functionalities, common responsibilities to cover the scenarios, common components to fulfil the responsibilities, design elements associated with the components and code implementing the design. It is useful to specify solutions as patterns in order to communicate findings to other developers, and patterns improve through further use in other development projects. Reusability depends on the features of usability functionality implementation, particularly the level of coupling of the usability functionality with the application functionalities and the internal complexity of the solution.

Diseño e implementación de herramientas web para la gestión de recursos Openstack

En un momento en el que la Nube cobra cada día más fuerza, contribuyendo como pieza fundamental en la aparición de nuevos modelos de negocio, que a su vez originan una amplia oferta de aplicaciones útiles en prácticamente todos los ámbitos; la Unión Europea decidió sumergirse en el proyecto FIWARE, con la idea de alzarse como una nueva alternativa pública de código abierto, en un mercado dominado desde hace años por Google y Amazon. Desde 2011, FIWARE crece gracias al trabajo colaborativo de multitud de empresas e instituciones europeas especializadas en el ámbito de las TIC, con el objetivo de ofrecer un entorno estandarizado y de código abierto, que de soporte en la nube, tanto a las empresas como a las aplicaciones que puedan surgir en el futuro. Entre el amplio conjunto de contribuidores al proyecto, se encuentra la Universidad Politécnica de Madrid. Concretamente, como parte de la Cátedra de Telefónica en la Escuela Superior de Ingenieros de Telecomunicación, nace el Grupo de Internet de Nueva Generación (GING), responsable de importantes aportaciones al proyecto FIWARE. Entre las diferentes actividades a cargo del GING, están el diseño, la implementación y el mantenimiento del Portal Cloud, la interfaz gráfica que proporciona acceso desde la web a los diferentes servicios de la nube de FIWARE, basados la mayoría en los recursos Openstack: proveedor de infraestructura como servicio (IaaS). El objetivo de este trabajo será introducir al lector los principales propósitos por los que nace FIWARE, y presentar una serie de desarrollos realizados bajo la firma del GING, en torno al Portal y su relación con la infraestructura Openstack. A lo largo del documento, se explicarán los diferentes procedimientos vinculados a la implementación de las herramientas web que han contribuido a mejorar la funcionalidad del Portal. Dichos procedimientos, entrañan el estudio y empleo de tres tecnologías fundamentales: desarrollos web de front-end y el empleo de la framework BackboneJS, los recursos Openstack y el entorno de desarrollo Devstack, y el concepto de los widgets aplicado a la monitorización de máquinas virtuales. La lectura de este documento puede resultar de gran utilidad, pues, la implantación de los diferentes casos de uso tratados en este proyecto, permite hacer un repaso de los diferentes niveles de abstracción con los que cuenta una herramienta como el Portal Cloud: partiendo de la implementación de la interfaz de usuario, hasta llegar a la configuración de los recursos que conforman el soporte de la aplicación, pasando por la creación de APIs y librerías que proporcionen acceso a los distintos servicios disponibles. Así, el análisis de la estructura y componentes que dan forma al Portal Cloud de FIWARE, proporcionará una visión global, extrapolable al diseño y funcionamiento de cualquier aplicación o plataforma que emplee como soporte de sus capacidades los servicios ofrecidos por proveedores de Infraestructura como Servicio.

Diseño y desarrollo del backend para la explotación de componentes web empleando Google App Engine

La web vive un proceso de cambio constante, basado en una interacción mayor del usuario. A partir de la actual corriente de paradigmas y tecnologías asociadas a la web 2.0, han surgido una serie de estándares de gran utilidad, que cubre la necesidad de los desarrollos actuales de la red. Entre estos se incluyen los componentes web, etiquetas HTML definidas por el usuario que cubren una función concreta dentro de una página. Existe una necesidad de medir la calidad de dichos desarrollos, para discernir si el concepto de componente web supone un cambio revolucionario en el desarrollo de la web 2.0. Para ello, es necesario realizar una explotación de componentes web, considerada como la medición de calidad basada en métricas y definición de un modelo de interconexión de componentes. La plataforma PicBit surge como respuesta a estas cuestiones. Consiste en una plataforma social de construcción de perfiles basada en estos elementos. Desde la perspectiva del usuario final se trata de una herramienta para crear perfiles y comunidades sociales, mientras que desde una perspectiva académica, la plataforma consiste en un entorno de pruebas o sandbox de componentes web. Para ello, será necesario implementar el extremo servidor de dicha plataforma, enfocado a la labor de explotación, por medio de la definición de una interfaz REST de operaciones y un sistema para la recolección de eventos de usuario en la plataforma. Gracias a esta plataforma se podrán discernir qué parámetros influyen positivamente en la experiencia de uso de un componente, así como descubrir el futuro potencial de este tipo de desarrollos.---ABSTRACT---The web evolves into a more interactive platform. From the actual version of the web, named as web 2.0, many paradigms and standards have arisen. One of those standards is web components, a set of concepts to define new HTML tags that covers a specific function inside a web page. It is necessary to measure the quality of this kind of software development, and the aim behind this approach is to determine if this new set of concepts would survive in the actual web paradigm. To achieve this, it is described a model to analyse components, in the terms of quality measure and interconnection model description. PicBit consists of a social platform to use web components. From the point of view of the final user, this platform is a tool to create social profiles using components, whereas from the point of view of technicians, it consists of a sandbox of web components. Thanks to this platform, we will be able to discover those parameters that have a positive effect in the user experience and to discover the potential of this new set of standards into the web 2.0.

Aplicación web de gestión financiera personal desarrollada con MEAN.JS

En este trabajo de fin de grado se llevará a cabo la elaboración de una aplicación web de gestión de gastos personales desde sus inicios, hasta su completo funcionamiento. Estas aplicaciones poseen un crecimiento emergente en el mercado, lo cual implica que la competencia entre ellas es muy elevada. Por ello el diseño de la aplicación que se va a desarrollar en este trabajo ha sido delicadamente cuidado. Se trata de un proceso minucioso el cual aportará a cada una de las partes de las que va a constar la aplicación características únicas que se plasmaran en funcionalidades para el usuario, como son: añadir sus propios gastos e ingresos mensuales, confeccionar gráficos de sus principales gastos, obtención de consejos de una fuente externa, etc… Estas funcionalidades de carácter único junto con otras más generalistas, como son el diseño gráfico en una amplia gama de colores, harán su manejo más fácil e intuitivo. Hay que destacar que para optimizar su uso, la aplicación tendrá la característica de ser responsive, es decir, será capaz de modificar su interfaz según el tamaño de la pantalla del dispositivo desde el que se acceda. Para su desarrollo, se va a utilizar una de las tecnologías más novedosas del mercado y siendo una de las más revolucionarias del momento, MEAN.JS. Con esta innovadora tecnología se creará la aplicación de gestión económica de gastos personales. Gracias al carácter innovador de aplicar esta tecnología novedosa, los retos que plantea este proyecto son muy variados, desde cómo estructurar las carpetas del proyecto y toda la parte de backend hasta como realizar el diseño de la parte de frontend. Además una vez finalizado su desarrollo y puesta en marcha se analizaran posibles mejoras para poder perfeccionarla en su totalidad. ABSTRACT In this final degree project will take out the development of a web application from its inception, until its full performance management. These applications have an emerging market growth, implying that competition between them is very high. Therefore the design of the application that will be developed in this work has been delicately care. It's a painstaking process which will provide each of the parties which will contain the application unique features that were translated into functionality for the user, such as: add their own expenses and monthly income, make graphs of your major expenses, obtaining advice from an external source, etc... These features of unique character together with other more general, such as graphic design in a wide range of colors, will make more easy and intuitive handling. It should be noted that to optimize its use, the application will have the characteristic of being responsive, will be able to modify your interface according to the size of the screen of the device from which are accessed. For its development, it is to use one of the newest technologies on the market and being one of the most revolutionary moment, MEAN. JS. The economic management of personal expenses application will be created with this innovative technology. Thanks to the innovative nature of applying this new technology, the challenges posed by this project are varied, from how to structure the folders of the project and all the backend part up to how to perform the part of frontend design. In addition once finished its development and commissioning possible improvements will analyze to be able to perfect it in its entirety.

Herramienta EN 301 549: cliente web

En el año 2014 se publicó, bajo mandato de la Comisión Europea, la Norma Europea EN 301 549, titulada “Requisitos de accesibilidad de productos y servicios TIC aplicables a la contratación pública en Europa”. El objetivo de dicha norma es que los productos o servicios TIC (Tecnologías de la Información y la Comunicación) adquiridos por cualquier administración pública europea puedan ser utilizados por personas con diversas características y capacidades, incluyendo a personas con discapacidad. La norma EN 301 549 es compleja, ya que contiene más de 200 requisitos y recomendaciones, que se aplican o no a un producto o servicio TIC en función de las características de dicho producto o servicio. Por ello se ha planteado, desde el Grupo de Investigación en Tecnología Informática y de las Comunicaciones (CETTICO), el desarrollo de una herramienta de soporte a la evaluación del cumplimiento de la norma. La herramienta permitirá a grupos de trabajo anotar los resultados de la evaluación de accesibilidad de un producto o servicio TIC siguiendo los requisitos de la norma Europea EN 301 549. Este trabajo de Fin de Grado se centra en el diseño y codificación del cliente web de la herramienta. Se parte de los resultados de un TFG y un practicum anteriores. En el TFG realizado por Laura Elorrieta [Elorrieta, 2014], se diseñó la interacción del sistema y se evaluó su grado de usabilidad. En el practicum [Montero, 2015], posterior al TFG de Laura Elorrieta, se eligieron las tecnologías web que se iban a utilizar y se realizó el diseño y la implementación mediante prototipos iterativos de la gestión de proyectos de evaluación. El trabajo que se ha realizado en el TFG ha consistido en el diseño de la interfaz de usuario analizando los cambios a realizar en el diseño, debido a los errores de usabilidad conocidos, y la implementación del prototipo funcional de la herramienta. Junto con la parte servidor del TFG de mi compañero Rubén Ortiz Burgos y la interfaz de usuario de este TFG se ha obtenido una aplicación web para realizar evaluaciones de accesibilidad de productos o servicios TIC siguiendo los requisitos de la norma EN 301 549. El prototipo funcional contiene diez páginas web que recogen las diferentes acciones y tareas que pueden realizar los usuarios en función del rol que desempeñen. EL diseño y la implementación se han llevado a cabo empleando las tecnologías web HTML5, CSS3, JavaScript, jQuery y las librerías de Foundation frontend framework.---ABSTRACT---In 2014, under the European Commission mandate, the European standard EN 301 549 has been published under the title “Accessibility requirements applicable to ICT products and procurement services in Europe”. The goal of this standard is that the products or services ICT (Information Communication Technology) acquires by every European public administration can be used by every person with different characteristics and capacities, including those with disability. The rule EN 301549 is very complex, since it has more than 200 requirements and recommendations that can be or not applied to an ICT product or service based on its characteristics of the given product or service. That’s why a development of a support tool has been proposed to the rating of the compliance of the rule, by the Research Group of Informatics Technology and Communication. This tool will allow working groups to record the results of the compliance of accessibility of a product or service following the requirements of the European Standard EN 301549. This Final Degree Work focuses in the design and the coding of the web customer of this tool. The results of a TFG and previous practicums have been used for this. The TFG performed by Laura Elorrieta [Elorrieta, 2014], the interaction of the system was designed and degree of usability was evaluated. In the practicum [Montero, 2015], after the TFG Laura Elorrieta, web technologies used were chosen and the design and implementation were performed using iterative prototyping project management evaluation. The work done on the TFG was to design the users interface to perform analyzing changes in design due to errors known usability and working prototype implementation of the tool. Together with the server part of the TFG my partner Rubén Ortiz Burgos and the user interface done of this TFG it has obtained a web application for the conduct of evaluations accessibility of products or services ICT following the requirements of the EN 301 549. The functional prototype contains ten web sites that collect the various activities and tasks that users can perform based on the role they perform. The design and implementation have been carried out using the technologies web HTML5, CSS3, Java Script, jQuery and the libraries of Foundation fronted framework.

Desarrollo de una aplicación para la escalada y oferta de servicios web

El autor de este proyecto es miembro reciente de la asociación SoloBoulder, dedicada a la modalidad de escalada boulder, noticias y actualidad, contenido multimedia, promoción de un equipo de escaladores y defensa de valores medioambientales en la montaña. El principal canal de distribución de contenidos es una página web existente previa a este proyecto. La asociación ha detectado una escasez y mala calidad de recursos en internet en cuanto a guías de zonas donde poder practicar el boulder. Tal circunstancia impulsa la iniciativa de este proyecto fin de carrera. El objetivo general es el desarrollo de una nueva aplicación que proporcione a los usuarios a nivel mundial una guía interactiva de boulder y otros puntos de interés, una red social que permita la creación cooperativa y orgánica de contenido, y servicios web para el consumo de la información desde otras plataformas u organizaciones. El nuevo software desarrollado es independiente de la página web de SoloBoulder previa. No obstante, ambas partes se integran bajo el mismo domino web y aspecto. La nueva aplicación ofrece a escaladores y turistas un servicio informativo e interactivo de calidad, con el que se espera aumentar el número de visitas en todo el sitio web y poder ampliar la difusión de valores medioambientales, diversificar las zonas de boulder y regular las masificadas, favorecer el deporte y brindar al escalador una oportunidad de autopromoción personal. Una gran motivación para el autor también es el proceso de investigación y formación en tecnologías, patrones arquitecturales de diseño y metodologías de trabajo adaptadas a las tendencias actuales en la ingeniería de software, con especial curiosidad hacia el mundo web. A este respecto podemos destacar: metodología de trabajo en proyectos, análisis de proyectos, arquitecturas de software, diseño de software, bases de datos, programación y buenas prácticas, seguridad, interfaz gráfica web, diseño gráfico, Web Performance Optimization, Search Engine Optimization, etc. En resumen, este proyecto constituye un aprendizaje y puesta en práctica de diversos conocimientos adquiridos durante la ejecución del mismo, así como afianzamiento de materias estudiadas en la carrera. Además, el producto desarrollado ofrece un servicio de calidad a los usuarios y favorece el deporte y la autopromoción del escalador. ABSTRACT. The author of this Project is recent member of the association SoloBoulder, dedicated to a rock climbing discipline called bouldering, news, multimedia content, promotion of a team of climbers and defense of environmental values in the mountain. The main content distribution channel is a web page existing previous to this project. The association has detected scarcity and bad quality of resources on the internet about guides of bouldering areas. This circumstance motivates the initiative of this project. The general objective is the development of a new application which provides a worldwide, interactive bouldering guide, including other points of interest, a social network which allows the cooperative and organic creation of content, and web services for consumption of information from other platforms or organizations. The new software developed is independent of the previous SoloBoulder web page. However, both parts are integrated under the same domain and appearance. The new application offers to climbers and tourists a quality informative and interactive service, with which we hope to increase the number of visits in the whole web site and be able to expand the dissemination of environmental values, diversify boulder areas and regulate the overcrowded ones, encourage sport and offer to the climber an opportunity of self-promotion. A strong motivation for the author is also the process of investigation and education in technologies, architectural design patterns and working methodologies adapted to the actual trends in software engineering, with special curiosity about the web world. In this regard we could highlight: project working methodologies, project analysis, software architectures, software design, data bases, programming and good practices, security, graphic web interface, graphic design, Web Performance Optimization, Search Engine Optimization, etc. To sum up, this project constitutes learning and practice of diverse knowledge acquired during its execution, as well as consolidation of subjects studied in the degree. In addition, the product developed offers a quality service to the users and favors the sport and the selfpromotion of the climber.