[ES] Entre los grandes desafíos actuales de las aplicaciones Web podemos citar la portabilidad, adaptabilidad y evolución. Estos desafíos se dan tanto en el ambiente en que operan así como en su desarrollo, ya que a menudo requieren de diferentes lenguajes, frameworks, herramientas, entornos, plataformas, etc. El Desarrollo Dirigido por Modelos (MDD) y en particular, la Arquitectura Dirigida por Modelos (MDA) contemplan estos desafíos proponiendo distintos niveles de abstracción para las diferentes fases de modelado, partiendo de modelos más orientados al problema, que no deberían contemplar aspectos de implementación (CIM, PIM), hasta llegar a los modelos más orientados a la solución planteada (PSM, ISM). Sin embargo, encarar adecuadamente este tema puede depender del grado de independencia que adquieren los modelos. Este trabajo de Tesis presenta un método que considera el problema de la evolución y portabilidad hacia diferentes entornos o arquitecturas en el diseño y desarrollo de aplicaciones Web. La propuesta se denomina MoWebA (del inglés, Model Oriented Web Approach). Durante el desarrollo de la tesis, hemos identificado una serie de aspectos que podrían tener un impacto positivo sobre los problemas de portabilidad y adaptabilidad que son: i) incorporación de un modelo específico de la arquitectura ASM (del inglés, Architecture Specific Model), que permita la portabilidad de los PIMs con respecto a la arquitectura (por ejemplo, RIA, SOA, Mobile); ii) clara separación de la capa de presentación con respecto a las capas navegacionales y de comportamiento; iii) definición de la estructura navegacional de acuerdo a un mecanismo orientado al comportamiento, que prevenga la modificación del diseño navegacional causada por cambios en la implementación; iv) uso de estándares para facilitar la independencia de las herramientas. Se ha llevado a cabo una revisión del estado de la literatura teniendo en cuenta los fundamentos de la Ingeniería Dirigida por Modelos MDE (Model Driven Engineering), las propuestas metodológicas para el desarrollo de Aplicaciones Web, las tendencias actuales, analizando en forma especial de qué manera las propuestas Web las contemplan, y las evidencias empíricas tanto en la academia como en la Industria. Presentamos así la propuesta MoWebA a partir de una serie de consideraciones sobre las aplicaciones Web que han sido identificadas durante el proceso de revisión del estado del arte. Posteriormente, detallamos cada una de las etapas del proceso de modelado, incluyendo los diagramas y notaciones propuestos, sus definiciones a través de sus metamodelos y ejemplos de uso. Seguidamente, presentamos el proceso de transformación adoptado por MoWebA, con los mecanismos de transformación Modelo-A-Modelo y Modelo-A-Código. Hemos dedicado un importante esfuerzo en la validación de la propuesta. Se realizó una primera validación, adoptando los modelos de MoWebA y en algunos casos generando aplicaciones para diferentes dominios. Con estas primeras experiencias de validación hemos podido identificar fortalezas y debilidades de la propuesta PIM de MoWebA, además de determinar en qué grado la misma cubre las necesidades de diferentes dominios. Como segunda experiencia, hemos realizado una validación preliminar con un grupo de estudiantes de último año de la carrera de Ingeniería Informática de la Universidad Católica "Nuestra Señora de la Asunción" (Paraguay), que consistió en la definición de ASM para tres arquitecturas diferentes. Finalmente, como tercera experiencia de validación, hemos llevado a cabo un Caso de Estudio que consistió en la definición de tres extensiones para MoWebA. Dicha validación fue desarrollada como parte de un proyecto de investigación liderado por la Universidad Católica "Nuestra Señora de la Asunción". La experiencia ha permitido analizar el grado de adaptabilidad de MoWebA y automatización en las transformacinoes PIM-ASM, así como el grado de independiencia del PIM. / [CA] Entre els grans desafiaments actuals de les aplicacions Web podem citar la portabilitat, adaptabilitat i evolució. El Desenvolupament Dirigit per Models (MDD) contemple aquests desafiaments proposant diferents nivells d'abstracció per a les diferents fases de modelatge. No obstant això, encarar adequadament aquest tema pot dependre del grau d'independència que adquireixen els models. Aquest treball de Tesi presenta un mètode que considera el problema de l'evolució i la portabilitat, en diferents entorns o arquitectures, per al disseny i desenvolupament d'aplicacions Web. La proposta s'anomena MoWebA (Model Oriented Web Approach). Durant el desenvolupament de la tesi hem identificat una sèrie d'aspectes que podrien tenir un impacte positiu sobre els problemes de portabilitat i adaptabilitat. Aquestos són: i) la incorporació d'un model específic d'arquitectura ASM (Architecture Specific Model), que permet la portabilitat dels models PIM respecte a l'arquitectura (per exemple, RIA, SOA, Mobile); ii) la clara separació de la capa de presentació respecte a les capes navegacionals i de comportament; iii) la definició de l'estructura navegacional d'acord amb un mecanisme orientat al comportament, que restringisca la modificació del disseny navegacional causada per canvis en la implementació; i per últim, iv) l'ús d'estàndards per tal de facilitar la independència de les eines. S'ha realitzat una revisió de l'estat de la literatura considerant els fonaments de l'Enginyeria Dirigida per Models MDE (Model Driven Engineering), les propostes metodològiques per al desenvolupament d'Aplicacions Web, les tendències actuals (analitzant de forma especial la manera en que les propostes Web les consideren), i les evidències empíriques tant en l'acadèmia com en la Indústria. Presentem així la proposta MoWebA a partir d'una sèrie de consideracions sobre les aplicacions Web que són identificades durant el procés de revisió de l'estat de l'art. Posteriorment, detallem cadascuna de les etapes del procés de modelatge, incloent els diagrames i les notacions proposades, les seues definicions (a través dels seus metamodels), i alguns exemples d'ús. Seguidament, presentem el procés de transformació adoptat per MoWebA, emprant mecanismes de transformació Model-a-Model i Model-a-Codi. Hem dedicat un esforç considerable en la validació de la proposta. Es realitzà una primera validació adoptant els models de MoWebA, i en alguns casos es generaren aplicacions per a diferents dominis. Aquestes experiències van ser realitzades per modeladors amb poca experiència, així com també per modeladors i desenvolupadors experimentats. Les experiències van ser desenvolupades en ambients tant acadèmics com industrials. Amb aquestes primeres experiències de validació s'identificaren fortaleses i febleses de la proposta PIM de MoWebA. També permeteren determinar fins quin grau la proposta respon a les necessitats dels diferents dominis. Com a segona experiència es realitzà una validació preliminar amb un grup d'estudiants d'últim curs de la carrera d'Enginyeria Informàtica de la Universitat Catòlica "Nuestra Señora de la Asunción" (Paraguai), que va consistir en la definició del model d'arquitectura ASM per a tres arquitectures diferents. Amb aquesta segona experiència de validació s'aconseguí valorar com de factible és d'adaptar la proposta a altres arquitectures. Finalment, com a tercera experiència de validació, es dugué a terme un Cas d'Estudi que va consistir en la definició de tres extensions per a MoWebA. L'experiència permeté analitzar el grau d'adaptabilitat i d'automatització en les transformacions PIM-ASM que s'obté amb MoWebA, així com el grau de independència del PIM amb respecte als altres models. Durant aquesta validació, s'han realitzat a més experiències de satisfacció d'usuaris amb un grup de modeladors i desenvolupadors. / [EN] Some of the major challenges facing Web applications today are those of portability, adaptability and evolution, not only in the environment in which they run, but also in the way in which they must be developed, often requiring different languages, frameworks, tools, environments, platforms, etc. MDD and MDA take into account these issues. However, to achieve portability, adaptability and evolution depends to some extent on the degree of independence that the models adopt. This Thesis presents a method that take into account the problem of evolution and portability towards different environments. The approach is called MoWebA (Model Oriented Web Approach). Some key aspects of MoWebA that could have a positive impact in the portability and adaptability are:i) incorporation of an Architecture Specific Model (ASM) as a new modeling layer, in order to keep the portability of the Platform Independent Model (PIM) regarding the different architectures (e.g., RIA, SOA, Mobile); ii) clear separation of the presentation layer with regard to the navigation and behavior layers; iii) definition of the navigational structure according to a function-oriented approach, which prevents the modification of the navigation design caused by implementation changes; iv) and use of standards in order to facilitate the independence from the tools. We justify MoWebA by highlighting a series of concerns for Web applications development. We present an overview of the method including the dimensions and the diagrams that we propose. Subsequently, we present each step in the modeling process, including the diagrams and notation, its definition (metamodels) and examples of use. Afterwards, we present the transformation process adopted by MoWebA, which includes model-to-model and model-to-code transformations. We have devoted special attention to the validation of the approach. As a first validation, MoWebA has been used for modelling and generating different types of applications by both novice and experienced modellers and developers. These experiences were done in academic and industrial contexts. The experiences have allowed to identify strengths and weaknesses of the PIM proposal, and to verify that the proposed notation covers the needs of different domains. Next, we present a preliminary validation of the ASM proposal, considering an experience of different ASM definitions made by a group of computer science students at the Catholic University "Nuestra Señora de la Asunción" (Paraguay). This preliminary validation has allowed us to determine how feasible is to adapt the proposal to other architectures. The analysis of the validation sought to answer the following questions: Can the same PIM model be used for different architectures?; Is it possible to specify clear limits between platform independent models (PIM) and architectural specific models (ASM)?; How does an architectural specific model facilitate the transformation rules definition?. Finally, we present a Case Study to validate the extensions of MoWebA to three different architectures. The experience was structured taking into account the framework of Runeson et al. This experience have allowed to carry out three complete extensions. In such extensions we could analysed the grade of adaptability of MoWebA and of automation PIM-ASM, as well as the grade of independence of the PIM metamodel. We have also conducted some user's satisfaction experiences with modelers and developers. / González Toñánez, M. (2022). A Navigational Role-Centric Model Oriented Web Approach MoWebA [Tesis doctoral]. Universitat Politècnica de València. https://doi.org/10.4995/Thesis/10251/181470

This project consisted of the development of a web based participant database system to replace a spreadsheet based one for the project “Vi Ses! Språkvänner i Linköping” and the evaluation of it. The design and implementation was done iteratively using a collection of usability guidelines as well as the results of a set of user tests. User tests were also used for the evaluation of the web database system. The task during the user tests was participant matching and the main measurement taken was task completion time. The project resulted in a web database system that could fully replace the spreadsheet database system. The evaluation tests showed that this system was both faster to match participants in as well as less error prone. / Detta projekt bestod av utvecklingen och evalueringen av ett webbaserat databassystem för deltagare. Den skulle ersätta ett existerande Excel-baserat databassystem för projektet “Vi Ses! Språkvänner i Linköping”. Designen och implementationen gjordes iterativt med hjälp av användbarhetsriktlinjer och resultat från användartester. Användartester användes även för evalueringen av webbdatabassystemet. Uppgiften i användartesterna var deltagarmatchning och det huvudsakliga mätvärdet var hur lång tid uppgiften tog. Projektet resulterade i ett webbaserat databassystem som helt kunde ersätta det Excel-baserade systemet. Evalueringstesterna visade att systemet var både snabbare och mindre felbenäget att matcha deltagare i.

Studentkonsultprojekt gör det möjligt för studenter att applicera sin kunskap i näringslivet samtidigt som det blir mindre kostsamt för företagen att anlita konsulter. Då jobbsökande via internet blir allt vanligare finns det ett behov av en webbapplikation för konsultuppdrag som kopplar samman studenter och företag. En av de viktigaste aspekterna för att skapa en konkurrenskraftig webbapplikation är användbarheten. Således är intentionen med denna studie att undersöka Hur kan en webbapplikation för konsultuppdrag mellan företag och studenter implementeras för att uppfattas som användbar av studenter? För att besvara frågeställningen har en webbapplikation för förmedling av konsulttjänster mellan företag och studenter utvecklats. Webbapplikationen baseras på en teoretisk grund där olika dimensioner av begreppet användbarhet analyserats. De dimensioner som lyfts är effektivitet, ändamålsenlighet och tillfredsställelse. I tillägg till detta har vikten av att specificera användare och de estetiska aspekternas påverkan på användbarhet behandlats. För att utvärdera om webbapplikationen upplevs som användbar testas den på tre testgrupper i tre olika skeden för att undersöka deras upplevelse av webbapplikationen. Testerna utgår från metoden thinking aloud tillsammans med enkäterna System Usability Scale (SUS) och Visual Aesthetics of Websites Inventory Short (VisAWI-S). SUS- och VisAWI-S-enkäterna gav indikationer på en starkt användbar applikation genom hela utvecklingsprocessen. Detta utifrån implementation av en design som främst utgick från principerna enkelhet och färgrikedom samt fokusområdena Synlighet av systemstatus, Igenkänning istället för återkallande, Flexibilitet och effektiv användning och Estetisk och minimalistisk design. Genom att analysera resultaten från thinking aloud-testerna kunde en tydlig minskning av negativa kommentarer identifieras mellan användartest 1-3. Utifrån dessa testresultat, dras slutsatserna att genom återkoppling relaterad till utförda aktioner, implementation av markörer och färgval med hänsyn till kontraster kan en webbapplikation för konsultjobb implementeras för att uppfattas som användbar av studenter. / Studentconsulting makes it possible for students to use their knowledge in business cases. In addition to this it also reduces the cost for enterprises when hiring consultants. As job hunting via the internet becomes more common there is a need for a web application that connects company projects with students who are interested in consulting. One of the most prominent aspects for a web application to be competitive is usability. The intention with this study is to examine How can a webapplication for consulting jobs between enterprises and students be implemented to be perceived as useful by students? To answer this question a web application for intermediation of consulting jobs between enterprises and students has been developed. The web application is developed on a theoretical basis where the different dimensions of the term usability has been analysed. These dimensions are efficiency, effectiveness and satisfaction. In addition to this the importance of specifying users and the aesthetic aspects effects on usability has been discussed. To evaluate if the web aplication is perceived as useful it is tested on three groups of people on three different occasions to examine their perception of the web application. The tests are based on the thinking aloud method together with the questionnaires System Usability Scale (SUS) and Visual Aesthetics of Websites Inventory Short (VisAWI-S). The SUS and VisAWI-S questionnaires indicated that the web application had a high level of usability throughout the development process. This was achieved through implementing a design based on simplicity and colorfulness as well as the principles Visibility of system status, Recognition rather than recall, Flexibility and efficiency of use and Aesthetic and minimalist design. By analysing the results from the thinking aloud tests a reduction in negative comments between test 1 and 3 could be identified. From the test results, the conclusion is that through responses related to completed actions, implementation of markers, and contrasting colors a web application for consulting jobs between enterprises and students can be implemented to be perceived as useful by students.

This diploma thesis describes how to create or convert traditional Java programs to desktop-like rich internet applications with the Google Web Toolkit. The Google Web Toolkit is an open source development environment, which translates Java code to browser and device independent HTML and JavaScript. Most of the GWT framework parts, including the Java to JavaScript compiler as well as important security issues of websites will be introduced. The famous Agricola board game will be implemented in the Model-View-Presenter pattern to show that complex user interfaces can be created with the Google Web Toolkit. The Google Web Toolkit framework will be compared with the JavaServer Faces one to find out which toolkit is the right one for the next web project. / Diese Diplomarbeit beschreibt die Erzeugung desktopähnlicher Anwendungen mit dem Google Web Toolkit und die Umwandlung klassischer Java-Programme in diese. Das Google Web Toolkit ist eine Open-Source-Entwicklungsumgebung, die Java-Code in browserunabhängiges als auch in geräteübergreifendes HTML und JavaScript übersetzt. Vorgestellt wird der Großteil des GWT Frameworks inklusive des Java zu JavaScript-Compilers sowie wichtige Sicherheitsaspekte von Internetseiten. Um zu zeigen, dass auch komplizierte graphische Oberflächen mit dem Google Web Toolkit erzeugt werden können, wird das bekannte Brettspiel Agricola mittels Model-View-Presenter Designmuster implementiert. Zur Ermittlung der richtigen Technologie für das nächste Webprojekt findet ein Vergleich zwischen dem Google Web Toolkit und JavaServer Faces statt.

This diploma thesis describes how to create or convert traditional Java programs to desktop-like rich internet applications with the Google Web Toolkit. The Google Web Toolkit is an open source development environment, which translates Java code to browser and device independent HTML and JavaScript. Most of the GWT framework parts, including the Java to JavaScript compiler as well as important security issues of websites will be introduced. The famous Agricola board game will be implemented in the Model-View-Presenter pattern to show that complex user interfaces can be created with the Google Web Toolkit. The Google Web Toolkit framework will be compared with the JavaServer Faces one to find out which toolkit is the right one for the next web project.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resources / Diese Diplomarbeit beschreibt die Erzeugung desktopähnlicher Anwendungen mit dem Google Web Toolkit und die Umwandlung klassischer Java-Programme in diese. Das Google Web Toolkit ist eine Open-Source-Entwicklungsumgebung, die Java-Code in browserunabhängiges als auch in geräteübergreifendes HTML und JavaScript übersetzt. Vorgestellt wird der Großteil des GWT Frameworks inklusive des Java zu JavaScript-Compilers sowie wichtige Sicherheitsaspekte von Internetseiten. Um zu zeigen, dass auch komplizierte graphische Oberflächen mit dem Google Web Toolkit erzeugt werden können, wird das bekannte Brettspiel Agricola mittels Model-View-Presenter Designmuster implementiert. Zur Ermittlung der richtigen Technologie für das nächste Webprojekt findet ein Vergleich zwischen dem Google Web Toolkit und JavaServer Faces statt.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resources