Design di interfacce e usabilità del Web in ambiente mobile: la Programmazione della Cineteca di Bologna

Il presente progetto è stato svolto in collaborazione con la Cineteca di Bologna e verte sulla riprogettazione dell'odierna interfaccia Web, in funzione della sua visualizzazione mobile non considerata nella progettazione del 2008, in particolare nella sua parte che concerne la programmazione degli spettacoli in ambito cinematografico. Raccolti i suggerimenti degli utenti e approfondite le richieste della Cineteca, affrontando con i responsabili IT della Fondazione le criticità emerse, la ristrutturazione delle sezioni presenti e l'aggiunta di nuove funzionalità, si è impostato il lavoro come segue. In primis, si è eseguita una ricerca, avvalendosi di fonti autorevoli nella letteratura di settore, con un focus incentrato sull’Usabilità. Questa ha portato a presentare una panoramica di tale tematica, per concentrarsi poi sulle peculiarità dei dispositivi mobili, toccando vari aspetti: da un approfondimento dalle caratteristiche dell’uso fino una collocazione anche storica alla realtà mobile. Successivamente, si è proseguito analizzando nel dettaglio tutti i vari elementi da includere, sia dal punto di vista concettuale che posizionale, in riferimento a varie soluzioni proposte dalla letteratura di settore. Ciò preferendo i modelli principalmente utilizzati, dunque maggiormente familiari agli utenti, e i metodi normalizzati per la risoluzione di singole problematiche frequenti nella presentazione delle informazioni. Il risultato è un progetto di interfaccia più vicina all'esperienza quotidiana dell'utente, concretizzatosi con la realizzazione di un prototipo per mezzo di applicativi che simulano un device e mostrano anteprime grafiche dell'interfaccia medesima, nella fattispecie della natura e della collocazione dei singoli componenti sullo schermo. Il lavoro, pertanto, si pone l’obiettivo di rispondere a comuni e debite aspettative dell'utenza in fatto di comodità, efficienza e immediatezza di consultazione della Programmazione anche in mobilità.

Un approccio Javascript-based per la realizzazione di app multipiattaforma

Il mondo degli smartphone, in particolare grazie all’avvento delle app, costituisce un settore che ha avuto negli ultimi anni una crescita tale, da richiedere l’introduzione di un nuovo termine in ambito finanziario: app economy. La crescente richiesta da parte del mercato di nuove opportunitá derivanti dal mondo delle applicazioni, ha aumentato sensibilmente il carico di lavoro richiesto alle software house specializzate,che hanno pertanto avuto la necessitá di adeguarsi a tale cambiamento. Per ovviare alle suddette problematiche, sono iniziati ad emergere due tool che consentono lo sviluppo di applicazioni multipiattaforma utilizzando un linguaggio ed un ambiente di sviluppo comuni. Tali sistemi consentono un risparmio in termini di tempi e costi, ma non sono in grado di competere con i tool nativi in termini di qualità del prodotto realizzato, in particolare per quanto concerne l'interfaccia grafica. Si propone pertanto un approccio che tenta di combinare i vantaggi di entrambe le soluzioni, al fine di ottimizzare la fluidità della UI, consentendo allo stesso tempo il riuso della logica applicativa.

Il progetto Webassembly: un bytecode a supporto del web

A fronte di un notevole incremento di funzionalità e strutture, nell'ambiente Web si sono intrapresi numerosi percorsi volti alla creazione di progetti che vanno a supportare il sovraccarico riversato sul lavoro che i linguaggi e i software sono tenuti a svolgere. Ad oggi il Javascript è uno dei linguaggi maggiormente utilizzati in ambito Web, e si rivela spesso essenziale al corretto sviluppo di applicazioni particolarmente evolute. Questo linguaggio, come è noto, sposta l’elaborazione del codice sul lato client, quindi sarà il Browser a supportare il carico di lavoro. Inoltre, è proprio quest’ultimo ad essere incaricato della gestione delle risorse computazionali locali, necessarie a tutte le operazioni di interpretazione del codice presente nelle pagine Web. Il crescente numero di connessioni da dispositivi mobili e la complessità dei siti Web, aumentano il rischio di avvicinarsi ad un punto critico relativo alla velocità e alle prestazioni dei Browser, in questa direzione sono stati realizzati progetti come asm.js piuttosto che Typescript in grado di velocizzare o incrementare le funzionalità e le prestazioni del linguaggio Javascript. Webassembly vuole integrare i vantaggi proposti da questi linguaggi tramite una meccanica di conversione dei file in formato binario, il quale essendo molto più leggero e veloce, consente una elaborazione molto più performante da parte dei Browser. Questo documento espone una panoramica sulle funzionalità e la progettazione di questo linguaggio, analizzando elementi lessicali e relativi vantaggi rispetto alle tecnologie diffuse fino ad ora. Il quadro generale di questa tesi ci prepara all’apertura di un nuovo scenario molto più ampio e diverso, sostenuto da un approccio al Web strutturalmente innovativo.

Diseño e implementación de un framework de funcionalidades Javascript en entornos de programación web

El presente documento aborda la problemática surgida en torno al desarrollo de una plataforma para gestionar las guías docentes de la Universidad Politécnica de Madrid, centrándose en el uso de las tecnologías Javascript, así como de lo algoritmos, plugins y bibliotecas auxiliares creadas y utilizadas. Por último, se muestran los resultados obtenidos del análisis y puesta en práctica de lo expuesto en el documento, así como conclusiones y sugerencias de futuras líneas de trabajo para este mismo proyecto. ---ABSTRACT---This document explains the problems found when developing a web service whose purpose is the management of learning guides at \Universidad Politecnica de Madrid". This final thesis focus on the use of Javascript technologies and the plugins, algorithms and auxiliar libraries used and developed. Finally, results of the analysis, development of the ideas exposed in this document, and conclusions and future working lines are presented.

An interactive web-based learning assistant for structural analysis of continuous beams

There are significant levels of concern about the relevance and the difficulty of learning some issues on Strength of Materials and Structural Analysis. Most students of Continuum Mechanics and Structural Analysis in Civil Engineering usually point out some key learning aspects as especially difficult for acquiring specific skills. These key concepts entail comprehension difficulties but ease access and applicability to structural analysis in more advanced subjects. Likewise, some elusive but basic structural concepts, such as flexibility, stiffness or influence lines, are paramount for developing further skills required for advanced structural design: tall buildings, arch-type structures as well as bridges. As new curricular itineraries are currently being implemented, it appears appropriate to devise a repository of interactive web-based applications for training in those basic concepts. That will hopefully train the student to understand the complexity of such concepts, to develop intuitive knowledge on actual structural response and to improve their preparation for exams. In this work, a web-based learning assistant system for influence lines on continuous beams is presented. It consists of a collection of interactive user-friendly applications accessible via Web. It is performed in both Spanish and English languages. Rather than a “black box” system, the procedure involves open interaction with the student, who can simulate and virtually envisage the structural response. Thus, the student is enabled to set the geometric, topologic and mechanic layout of a continuous beam and to change or shift the loading and the support conditions. Simultaneously, the changes in the beam response prompt on the screen, so that the effects of the several issues involved in structural analysis become apparent. The system is performed through a set of web pages which encompasses interactive exercises and problems, written in JavaScript under JQuery and DyGraphs frameworks, given that their efficiency and graphic capabilities are renowned. Students can freely boost their self-study on this subject in order to face their exams more confidently. Besides, this collection is expected to be added to the "Virtual Lab of Continuum Mechanics" of the UPM, launched in 2013 (http://serviciosgate.upm.es/laboratoriosvirtuales/laboratorios/medios-continuos-en-construcci%C3%B3n)

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.

HTML5, Javascript and modern browser technologies: toward a web based framework for device fingerprinting

Mentre navighiamo siamo veramente certi che i nostri dati e la nostra privacy siano al sicuro? I browser e le tecnologie di cui fanno uso possono rivelare una miriade di informazioni. Al crescere delle informazioni reperibili, si inizia a superare una massa critica che può permettere l'identificazione. Il device fingerprinting è proprio il rilevamento di questa tipologia di dati. HTML5 e le nuove API che esso mette a disposizione aumentano a dismisura le modalità per fare fingerprinting. Durante lo sviluppo della presente tesi è stato realizzato un framework molto potente che verrà mostrato nel dettaglio. Come a seguito di un disastro aereo, l'ingegneria aeronautica si mette all'opera per scovare i punti deboli allo scopo di rendere più robusti gli aerei di nuova generazione, noi con la presente tesi vogliamo dare il nostro contributo al miglioramento del web del futuro. Affinchè la nostra privacy sia veramente nelle nostre mani e possiamo essere artefici del nostro domani.

Demo: Shield UI JavaScript Chart - A Flexible HTML5 Data Visualization Component

Shield UI’s advanced framework for creating rich charts and graphs is the first of a line of data visualization components, giving web developers the power for embedding rich graphics in their web projects with minimum effort. Built with HTML, CSS3 and packaged as a jQuery plugin, the library has full support for legacy and modern desktop web browsers, as well as the latest mobile devices.

Aplicación de administración con Angular, Node y Express para una aplicación Django

En este trabajo de fin de grado se ha desarrollado una aplicación de administración que sustituye a las que ofrecen por defecto las aplicaciones creadas con el framework de desarrollo web Django. La aplicación está compuesta por dos partes: un servidor, desarrollado con Node y Express, que ataca a la base de datos MySQL de la aplicación Django (es el nexo de unión entre ambas), y expone una API que es utilizada por la otra parte que compone la aplicación, la parte del cliente. La API es totalmente privada, siendo necesario un token de autenticación válido para poder obtener una respuesta satisfactoria de la misma. La generación del token también es tarea del servidor. El cliente, que es la parte que ve el usuario final, está desarrollada usando el framework Angular. La interfaz de usuario utiliza Bootstrap, por lo que su visualización es correcta en cualquier tipo de dispositivo, tanto de escritorio como móvil. En definitiva, se ha desarrollado una aplicación JavaScript End-to-End, empleando las últimas tecnologías web, mejorando ostensiblemente, las prestaciones que ofrece un panel de administración generado automáticamente por una aplicación Django.

Projecto timecloud: software de gestão de tempo laboral numa plataforma cloud

O presente projecto tem como objectivo a disponibilização de uma plataforma de serviços para gestão e contabilização de tempo remunerável, através da marcação de horas de trabalho, férias e faltas (com ou sem justificação). Pretende-se a disponibilização de relatórios com base nesta informação e a possibilidade de análise automática dos dados, como por exemplo excesso de faltas e férias sobrepostas de trabalhadores. A ênfase do projecto está na disponibilização de uma arquitectura que facilite a inclusão destas funcionalidades. O projecto está implementado sobre a plataforma Google App Engine (i.e. GAE), de forma a disponibilizar uma solução sob o paradigma de Software as a Service, com garantia de disponibilidade e replicação de dados. A plataforma foi escolhida a partir da análise das principais plataformas cloud existentes: Google App Engine, Windows Azure e Amazon Web Services. Foram analisadas as características de cada plataforma, nomeadamente os modelos de programação, os modelos de dados disponibilizados, os serviços existentes e respectivos custos. A escolha da plataforma foi realizada com base nas suas características à data de iniciação do presente projecto. A solução está estruturada em camadas, com as seguintes componentes: interface da plataforma, lógica de negócio e lógica de acesso a dados. A interface disponibilizada está concebida com observação dos princípios arquitecturais REST, suportando dados nos formatos JSON e XML. A esta arquitectura base foi acrescentada uma componente de autorização, suportada em Spring-Security, sendo a autenticação delegada para os serviços Google Acounts. De forma a permitir o desacoplamento entre as várias camadas foi utilizado o padrão Dependency Injection. A utilização deste padrão reduz a dependência das tecnologias utilizadas nas diversas camadas. Foi implementado um protótipo, para a demonstração do trabalho realizado, que permite interagir com as funcionalidades do serviço implementadas, via pedidos AJAX. Neste protótipo tirou-se partido de várias bibliotecas javascript e padrões que simplificaram a sua realização, tal como o model-view-viewmodel através de data binding. Para dar suporte ao desenvolvimento do projecto foi adoptada uma abordagem de desenvolvimento ágil, baseada em Scrum, de forma a implementar os requisitos do sistema, expressos em user stories. De forma a garantir a qualidade da implementação do serviço foram realizados testes unitários, sendo também feita previamente a análise da funcionalidade e posteriormente produzida a documentação recorrendo a diagramas UML.

Usabilidade nos portais web

Mestrado em Engenharia Informática. Sistemas Gráficos e Multimédia.

Scaling law in Saddle-node bifurcations for one-dimensional maps: A complex variable approach

The study of transient dynamical phenomena near bifurcation thresholds has attracted the interest of many researchers due to the relevance of bifurcations in different physical or biological systems. In the context of saddle-node bifurcations, where two or more fixed points collide annihilating each other, it is known that the dynamics can suffer the so-called delayed transition. This phenomenon emerges when the system spends a lot of time before reaching the remaining stable equilibrium, found after the bifurcation, because of the presence of a saddle-remnant in phase space. Some works have analytically tackled this phenomenon, especially in time-continuous dynamical systems, showing that the time delay, tau, scales according to an inverse square-root power law, tau similar to (mu-mu (c) )(-1/2), as the bifurcation parameter mu, is driven further away from its critical value, mu (c) . In this work, we first characterize analytically this scaling law using complex variable techniques for a family of one-dimensional maps, called the normal form for the saddle-node bifurcation. We then apply our general analytic results to a single-species ecological model with harvesting given by a unimodal map, characterizing the delayed transition and the scaling law arising due to the constant of harvesting. For both analyzed systems, we show that the numerical results are in perfect agreement with the analytical solutions we are providing. The procedure presented in this work can be used to characterize the scaling laws of one-dimensional discrete dynamical systems with saddle-node bifurcations.