OOWS 2.0
A Model-driven Web Engineering
Method for the Development of
Web 2.0 Applications
Francisco Valverde Giromé
Oscar...
2
What is Web 2.0 ?
Brainstorming session for the first Web 2.0 conference
2
What is Web 2.0 ?
2
What is Web 2.0 ?
2
What is Web 2.0 ?
What is Web 2.0?
3
The Tale of Two Tims
What is Web 2.0?
3
The Tale of Two Tims
What is Web 2.0?
‣ Web applications have considerably evolved.This evolution is
summarized in the term Web 2.0
‣ The Web 2...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
1. Introduction
Motivation
‣ Model-driven Web Engineering methods have improved Web
application development
‣ Web Engineer...
1. Introduction
7
‣ With the arrival of Web 2.0 applications new challenges must be
faced:
1. Introduction
1. Information synchronization between the server and the browser
7
‣ With the arrival of Web 2.0 applicat...
1. Introduction
1. Information synchronization between the server and the browser
2. Multimedia support
7
‣ With the arriv...
1. Introduction
1. Information synchronization between the server and the browser
2. Multimedia support
3. Advanced User I...
1. Introduction
1. Information synchronization between the server and the browser
2. Multimedia support
3. Advanced User I...
1. Introduction
1. Information synchronization between the server and the browser
2. Multimedia support
3. Advanced User I...
1. Introduction
1. Information synchronization between the server and the browser
2. Multimedia support
3. Advanced User I...
1. Introduction
‣ Web Engineering methods must be extended to support Web
2.0 applications development
‣ The main issues a...
1. Introduction
Q1: Which conceptual expressiveness must provide a Web Engineering
method in order to support the advanced...
1. Abstract Interaction Model: for expressing the user interaction
that is common in Web 2.0 applications
2. RIA Interface...
Q2: How can be represented into a model-driven Web Engineering
method, the most common Web 2.0 practices that emphasize
th...
Q2: How can be represented into a model-driven Web Engineering
method, the most common Web 2.0 practices that emphasize
th...
1. Introduction
Q3: Which are the required mechanisms for introducing the
previous solutions in the context of a model-dri...
1. Introduction
Q3: Which are the required mechanisms for introducing the
previous solutions in the context of a model-dri...
1. Introduction
12
‣ The final result is the OOWS 2.0 Web Engineering method,
an original and evolutive approach to suppor...
1. Introduction
13
OOWS 2.0 Method
Process
1. Introduction
13
OOWS 2.0
Conceptual Modeling
Phase
1. Introduction
Comparison between OOWS and OOWS 2.0 models
14
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
2. Related Works
‣ Web Engineering methods have been extended with the aim of
supporting some features related with the de...
2. Related Works
‣ Four dimensions considered:
1. Expressiveness of the method conceptual models in order to
represent the...
2. Related Works
18
Methods support to dimensions
2. Related Works
18
WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns
WebML High Low Partial Part...
2. Related Works
18
WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns
WebML High Low Partial Part...
2. Related Works
18
WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns
WebML High Low Partial Part...
2. Related Works
18
WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns
WebML High Low Partial Part...
2. Related Works
18
WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns
WebML High Low Partial Part...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
3. Abstract Interaction Model
‣ By interaction we mean a communication between an user
and an Information System through a...
3. Abstract Interaction Model
21
3. Abstract Interaction Model
21
Container of the conceptual primitives which
describe the required interaction for perfor...
3. Abstract Interaction Model
21
Represents the different types of
user that can access to the system
3. Abstract Interaction Model
21
For each user, it provides a view made up
of the available Interaction Contexts
3. Abstract Interaction Model
21
The different Interaction Contexts are
described as an aggregation of one or
more Abstrac...
3. Abstract Interaction Model
22
!
Interaction Map
3. Abstract Interaction Model
22
!
Interaction Map
User
3. Abstract Interaction Model
22
!
Interaction Map
User
Interaction
Contexts
3. Abstract Interaction Model
22
!
Interaction Map
User
Interaction
Contexts
First level contexts are
always accessible
3. Abstract Interaction Model
22
!
Interaction Map
User
Interaction
Contexts
First level contexts are
always accessible
Se...
3. Abstract Interaction Model
23
3. Abstract Interaction Model
23
Represents an information
retrieval from the IS. It is defined
as a view over the IS data...
3. Abstract Interaction Model
23
Abstracts an operation that modifies
the state of the IS. It is defined as a
view over a ...
3. Abstract Interaction Model
24
3. Abstract Interaction Model
24
Population AIU example
Service AIU example
3. Abstract Interaction Model
24
3. Abstract Interaction Model
25
3. Abstract Interaction Model
25
Auxiliary Interaction Patterns (AIP):
constrain the behavior and/or express
more accurate...
3. Abstract Interaction Model
25
A set of 14 patterns extending the
previous JUST-UI pattern language
3. Abstract Interaction Model
26
Example SummaryView AIP
3. Abstract Interaction Model
27
Example SummaryView AIP
3. Abstract Interaction Model
27
Example SummaryView AIP
3. Abstract Interaction Model
27
Example SummaryView AIP
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
1996
1996 2000
1996 2000 2004
1996 2000 20102004
1996 2000 20102004 ....
4. RIA Interface Modeling
‣ The evolution of Web Interface technologies has been
decisive for encouraging the end-user inv...
4. RIA Interface Modeling
‣ The main goal is to define a metamodel to support the RIA
Interface modeling in Web Engineerin...
4. RIA Interface Modeling
1. Advanced UI Widgets
‣ The UI has been extended using widgets that are highly coupled
to the R...
4. RIA Interface Modeling
RIA Widgets Interactive Functions
33
1. Input Data
4. RIA Interface Modeling
RIA Widgets Interactive Functions
33
1. Input Data
2. Retrieve Information
4. RIA Interface Modeling
RIA Widgets Interactive Functions
33
1. Input Data
2. Retrieve Information
3. Navigation
4. RIA Interface Modeling
RIA Widgets Interactive Functions
33
1. Input Data
2. Retrieve Information
3. Navigation
4. Exec...
4. RIA Interface Modeling
RIA Widgets Interactive Functions
33
1. Input Data
2. Retrieve Information
3. Navigation
4. Exec...
4. RIA Interface Modeling
34
A RIA Interface Model
is composed by a set of
Widgets
4. RIA Interface Modeling
34
5 abstract conceptual
primitives represent the
interactive functions
4. RIA Interface Modeling
34
A metamodel for the Adobe Flex
technology is created by means of
specialization relationships
4. RIA Interface Modeling
34
Events are also considered in
the technological metamodel
4. RIA Interface Modeling
34
RIA Interface
Metamodel
Adobe Flex Interface
Metamodel
4. RIA Interface Modeling
2. Event-driven UI Behavior
‣ Changes in the UI perceived as events that happen over a
specific ...
4. RIA Interface Modeling
‣ Example: when inputting new data the client-side automatically
retrieves the values that match...
4. RIA Interface Modeling
Integration in a Web Engineering Method
‣ An strategy based on weaving metamodels to connect the...
4. RIA Interface Modeling
38
Application into the OOWS 2.0 Method
Abstract Interaction
Metamodel
RIA Interface Model
(Adob...
4. RIA Interface Modeling
38
A set of weaving relationships
establish the UI interactive
function that a conceptual
primit...
4. RIA Interface Modeling
38
When the RIA Interface Model is
created, analysts select the
most suitable widget that
implem...
4. RIA Interface Modeling
Application into the OOWS 2.0 Method
39
From an Abstract Interaction Model,
a Flex Interface Mod...
4. RIA Interface Modeling
Application into the OOWS 2.0 Method
39
The analyst changes the Flex
Interface Model creating
ne...
4. RIA Interface Modeling
Application into the OOWS 2.0 Method
39
Once the Flex Interface Model is
finished, Event Rules a...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
5. Web 2.0 Patterns
‣ In Web 2.0 applications users
are a valuable resource: a
precise and intuitive
interaction is essent...
5. Web 2.0 Patterns
‣ In Web 2.0 applications users
are a valuable resource: a
precise and intuitive
interaction is essent...
5. Web 2.0 Patterns
‣ In Web 2.0 applications users
are a valuable resource: a
precise and intuitive
interaction is essent...
5. Web 2.0 Patterns
‣ In Web 2.0 applications users
are a valuable resource: a
precise and intuitive
interaction is essent...
5. Web 2.0 Patterns
‣ Web 2.0 Pattern: a conceptual abstraction of a mechanism
applied in a Web 2.0 application with the a...
5. Web 2.0 Patterns
43
5. Web 2.0 Patterns
43
0% 25% 50% 75% 100%
Quick Comment
Public Profile
Suggestion
Subscription
Notification
Quick Rating
...
5. Web 2.0 Patterns
43
0% 25% 50% 75% 100%
Quick Comment
Public Profile
Suggestion
Subscription
Notification
Quick Rating
...
5. Web 2.0 Patterns
‣ Web 2.0 Patterns are usually described using a textual pattern
template: Name, Problem, Rationale, C...
5. Web 2.0 Patterns
‣ Notification Pattern: inform the user about the changes in the
application since the last visit
45
F...
5. Web 2.0 Patterns
‣ Notification Pattern: inform the user about the changes in the
application since the last visit
45
N...
5. Web 2.0 Patterns
Integration
‣ An strategy that reuse the current conceptual primitives from
Web Engineering methods
‣ ...
5. Web 2.0 Patterns
Integration Strategy Proposed
47
Conceptual
Primitive A
Conceptual
Primitive B
Conceptual
Primitive C
...
5. Web 2.0 Patterns
Integration Strategy Proposed
47
Conceptual
Primitive A
Conceptual
Primitive B
Conceptual
Primitive C
...
5. Web 2.0 Patterns
48
Integration Strategy Proposed
The purpose of the transformation
is to substitute the conceptual
pri...
5. Web 2.0 Patterns
48
Integration Strategy Proposed
M’ defines the underlying models
that are actually used when the
patt...
5. Web 2.0 Patterns
48
Integration Strategy Proposed
As the pattern is described using a
method model, code generation
rul...
5. Web 2.0 Patterns
49
Application into the OOWS 2.0 Method
!
5. Web 2.0 Patterns
50
Application into the OOWS 2.0 method
!
5. Web 2.0 Patterns
50
Application into the OOWS 2.0 method
ATL
Transformations
!
!
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
6. Preliminary Evaluation
‣ Viability evaluation as a necessary step before the full
implementation of the technological i...
6. Preliminary Evaluation
‣ Tasks performed:
1. Analysis of the interface and interaction modeling improvement
over OOWS m...
6. Preliminary Evaluation
1. Analysis of the modeling improvement
‣ A set of 18 scenarios have been selected from the 23an...
6. Preliminary Evaluation
55
OOWS
OOWS 2.0
0% 25,00% 50,00% 75,00% 100,00%
Interaction
Interface
Interaction
Interface
66,...
6. Preliminary Evaluation
55
OOWS
OOWS 2.0
0% 25,00% 50,00% 75,00% 100,00%
Interaction
Interface
Interaction
Interface
66,...
6. Preliminary Evaluation
55
OOWS
OOWS 2.0
0% 25,00% 50,00% 75,00% 100,00%
Interaction
Interface
Interaction
Interface
66,...
6. Preliminary Evaluation
55
OOWS
OOWS 2.0
0% 25,00% 50,00% 75,00% 100,00%
Interaction
Interface
Interaction
Interface
66,...
6. Preliminary Evaluation
56
2. Compare genes scenario modeling
6. Preliminary Evaluation
‣ Used to test the RIA Interface Model because describes a rich and
highly interactive UI
‣ RIA ...
6. Preliminary Evaluation
58
2. 23andMe community scenario modeling
6. Preliminary Evaluation
‣ A collaborative scenario used to evaluate the Abstract
Interaction Model and the Web 2.0 Patte...
6. Preliminary Evaluation
3. Experiment Design
‣ Goal: evaluate the improvement and temporal impact using the OOWS
2.0 met...
6. Preliminary Evaluation
Lessons Learned
‣ A 50% additional scenarios from the lab demo are fully
supported by the OOWS 2...
Outline
1. Introduction
2. Related Works
3. Abstract Interaction Model
4. RIA Interface Modeling
5. Web 2.0 Patterns
6. Pr...
7. Concluding Remarks
1. The definition of a new Abstract Interaction Model
‣ The model not only defines the interaction, ...
7. Concluding Remarks
2. The specification of a RIA Interface metamodel
‣ A model-based approach to support different RIA ...
7. Concluding Remarks
3. Modeling of Web 2.0 Patterns
‣ An analysis of the Web 2.0 Patterns utilization in real applicatio...
7. Concluding Remarks
Related Research Publications
66
7. Concluding Remarks
Related Research Publications
66
1. Valverde, F., Panach, I., Aquino, N., Pastor, O.: Dealing with A...
7. Concluding Remarks
Future Work
‣ Perform the proposed evaluation
‣ Application of the OOWS 2.0 method in a real develop...
68
Thanks for your attention
FranciscoValverde Giromé
fvalverde@pros.upv.es
Upcoming SlideShare
Loading in …5
×

OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2.0 Applications

2,913 views

Published on

OOWS 2.0 is a novel Web Engineering Method with the goal of supporting the Web 2.0 applications development

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,913
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2.0 Applications

  1. 1. OOWS 2.0 A Model-driven Web Engineering Method for the Development of Web 2.0 Applications Francisco Valverde Giromé Oscar Pástor López 26th October 2010
  2. 2. 2 What is Web 2.0 ? Brainstorming session for the first Web 2.0 conference
  3. 3. 2 What is Web 2.0 ?
  4. 4. 2 What is Web 2.0 ?
  5. 5. 2 What is Web 2.0 ?
  6. 6. What is Web 2.0? 3 The Tale of Two Tims
  7. 7. What is Web 2.0? 3 The Tale of Two Tims
  8. 8. What is Web 2.0? ‣ Web applications have considerably evolved.This evolution is summarized in the term Web 2.0 ‣ The Web 2.0 definition is the sum up of: - A collaborative concern to emphasize the end-user involvement - An advanced technological concern for simplifying user interaction ‣ Web 2.0 status: the accomplishment of both concerns to a greater or lesser extent 4
  9. 9. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 5
  10. 10. 1. Introduction Motivation ‣ Model-driven Web Engineering methods have improved Web application development ‣ Web Engineering is a key requirement to support this evolution but, are they ready for the Web 2.0? ‣ Web Engineering has been focused on solving the challenges related to the development of the now called “Web 1.0” applications 6
  11. 11. 1. Introduction 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  12. 12. 1. Introduction 1. Information synchronization between the server and the browser 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  13. 13. 1. Introduction 1. Information synchronization between the server and the browser 2. Multimedia support 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  14. 14. 1. Introduction 1. Information synchronization between the server and the browser 2. Multimedia support 3. Advanced User Interfaces 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  15. 15. 1. Introduction 1. Information synchronization between the server and the browser 2. Multimedia support 3. Advanced User Interfaces 4. A better responsiveness with the the UI 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  16. 16. 1. Introduction 1. Information synchronization between the server and the browser 2. Multimedia support 3. Advanced User Interfaces 4. A better responsiveness with the the UI 5. Mechanisms to emphasize end-user interaction 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  17. 17. 1. Introduction 1. Information synchronization between the server and the browser 2. Multimedia support 3. Advanced User Interfaces 4. A better responsiveness with the the UI 5. Mechanisms to emphasize end-user interaction 6. and more... 7 ‣ With the arrival of Web 2.0 applications new challenges must be faced:
  18. 18. 1. Introduction ‣ Web Engineering methods must be extended to support Web 2.0 applications development ‣ The main issues are detected in the modeling phase because current models are not expressive enough ‣ Research main goal: provide the required conceptual models in order to support the model-driven development of Web 2.0 applications 8
  19. 19. 1. Introduction Q1: Which conceptual expressiveness must provide a Web Engineering method in order to support the advanced interaction modeling for Web 2.0 applications? 9
  20. 20. 1. Abstract Interaction Model: for expressing the user interaction that is common in Web 2.0 applications 2. RIA Interface Metamodel: for modeling an advanced and usable UI using a Rich Internet Applications (RIA) technology 1. Introduction Q1: Which conceptual expressiveness must provide a Web Engineering method in order to support the advanced interaction modeling for Web 2.0 applications? 9
  21. 21. Q2: How can be represented into a model-driven Web Engineering method, the most common Web 2.0 practices that emphasize the end-user involvement? 1. Introduction 10
  22. 22. Q2: How can be represented into a model-driven Web Engineering method, the most common Web 2.0 practices that emphasize the end-user involvement? Web 2.0 Patterns: a set of selected patterns from Web 2.0 applications represented as conceptual models 1. Introduction 10
  23. 23. 1. Introduction Q3: Which are the required mechanisms for introducing the previous solutions in the context of a model-driven Web Engineering method? 11
  24. 24. 1. Introduction Q3: Which are the required mechanisms for introducing the previous solutions in the context of a model-driven Web Engineering method? Model-based Integration: 1. Application of weaving metamodels to establish the relationship between interaction models and the RIA Inteface Metamodel 2. M2M strategy for integrating Web 2.0 Patterns 11
  25. 25. 1. Introduction 12 ‣ The final result is the OOWS 2.0 Web Engineering method, an original and evolutive approach to support the development of Web 2.0 applications ‣ The method includes the three contributions presented in the thesis using the proposed integration strategies ‣ This new method shares the general process of the OOWS method
  26. 26. 1. Introduction 13 OOWS 2.0 Method Process
  27. 27. 1. Introduction 13 OOWS 2.0 Conceptual Modeling Phase
  28. 28. 1. Introduction Comparison between OOWS and OOWS 2.0 models 14
  29. 29. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 15
  30. 30. 2. Related Works ‣ Web Engineering methods have been extended with the aim of supporting some features related with the development of Web 2.0 applications ‣ Five methods have been analyzed: 1. WebML: (Bozzon, Comai et al. 2006), (Carughi, Comai et al. 2007) 2. RUX-Method: (Linaje, Preciado et al. 2007), (Preciado, Linaje et al. 2008) 3. OOH4RIA: (Melia, Gomez et al. 2008) 4. OOHDM: (Urbieta, Rossi et al. 2007), (Rossi, Urbieta et al. 2008) 5. UWE: (Koch, Pigerl et al. 2009) 16
  31. 31. 2. Related Works ‣ Four dimensions considered: 1. Expressiveness of the method conceptual models in order to represent the user interaction 2. User Interface modeling based on RIA technologies 3. Definition of the Event-driven behavior of the User Interface 4. Support to patterns recurrently applied in Web 2.0 applications 17
  32. 32. 2. Related Works 18 Methods support to dimensions
  33. 33. 2. Related Works 18 WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns WebML High Low Partial Partial RUX-Method Low High High None OOH4RIA High Partial High None OOHDM High Partial High Low UWE Partial Low Low Partial Methods support to dimensions
  34. 34. 2. Related Works 18 WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns WebML High Low Partial Partial RUX-Method Low High High None OOH4RIA High Partial High None OOHDM High Partial High Low UWE Partial Low Low Partial Methods support to dimensions
  35. 35. 2. Related Works 18 WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns WebML High Low Partial Partial RUX-Method Low High High None OOH4RIA High Partial High None OOHDM High Partial High Low UWE Partial Low Low Partial Methods support to dimensions
  36. 36. 2. Related Works 18 WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns WebML High Low Partial Partial RUX-Method Low High High None OOH4RIA High Partial High None OOHDM High Partial High Low UWE Partial Low Low Partial Methods support to dimensions
  37. 37. 2. Related Works 18 WE Method 1. Interaction 2. RIA Interface 3. UI Events 4. Web 2.0 Patterns WebML High Low Partial Partial RUX-Method Low High High None OOH4RIA High Partial High None OOHDM High Partial High Low UWE Partial Low Low Partial Methods support to dimensions OOWS 2.0 goal is to provide a high support for the four dimensions
  38. 38. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 19
  39. 39. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 19
  40. 40. 3. Abstract Interaction Model ‣ By interaction we mean a communication between an user and an Information System through a User Interface in order to accomplish a Task ‣ Describes the interaction without taking into account technological details (Abstract) related to the User Interface ‣ Previous models, OO-Method Presentation Model and OOWS Navigational Model, have been taken into account for defining this new model 20
  41. 41. 3. Abstract Interaction Model 21
  42. 42. 3. Abstract Interaction Model 21 Container of the conceptual primitives which describe the required interaction for performing a task
  43. 43. 3. Abstract Interaction Model 21 Represents the different types of user that can access to the system
  44. 44. 3. Abstract Interaction Model 21 For each user, it provides a view made up of the available Interaction Contexts
  45. 45. 3. Abstract Interaction Model 21 The different Interaction Contexts are described as an aggregation of one or more Abstract Interaction Units (AIU)
  46. 46. 3. Abstract Interaction Model 22 ! Interaction Map
  47. 47. 3. Abstract Interaction Model 22 ! Interaction Map User
  48. 48. 3. Abstract Interaction Model 22 ! Interaction Map User Interaction Contexts
  49. 49. 3. Abstract Interaction Model 22 ! Interaction Map User Interaction Contexts First level contexts are always accessible
  50. 50. 3. Abstract Interaction Model 22 ! Interaction Map User Interaction Contexts First level contexts are always accessible Sequence contexts are accessed when a previous task is finished
  51. 51. 3. Abstract Interaction Model 23
  52. 52. 3. Abstract Interaction Model 23 Represents an information retrieval from the IS. It is defined as a view over the IS data entities
  53. 53. 3. Abstract Interaction Model 23 Abstracts an operation that modifies the state of the IS. It is defined as a view over a service input arguments
  54. 54. 3. Abstract Interaction Model 24
  55. 55. 3. Abstract Interaction Model 24 Population AIU example
  56. 56. Service AIU example 3. Abstract Interaction Model 24
  57. 57. 3. Abstract Interaction Model 25
  58. 58. 3. Abstract Interaction Model 25 Auxiliary Interaction Patterns (AIP): constrain the behavior and/or express more accurately the interaction provided by an AIU
  59. 59. 3. Abstract Interaction Model 25 A set of 14 patterns extending the previous JUST-UI pattern language
  60. 60. 3. Abstract Interaction Model 26 Example SummaryView AIP
  61. 61. 3. Abstract Interaction Model 27 Example SummaryView AIP
  62. 62. 3. Abstract Interaction Model 27 Example SummaryView AIP
  63. 63. 3. Abstract Interaction Model 27 Example SummaryView AIP
  64. 64. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 28
  65. 65. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 28
  66. 66. 1996
  67. 67. 1996 2000
  68. 68. 1996 2000 2004
  69. 69. 1996 2000 20102004
  70. 70. 1996 2000 20102004 ....
  71. 71. 4. RIA Interface Modeling ‣ The evolution of Web Interface technologies has been decisive for encouraging the end-user involvement ‣ This technological evolution has defined a new application paradigm: Rich Internet Applications (RIA) ‣ Since the usability of the UI is a key requirement, this paradigm is a suitable choice for the development of Web 2.0 applications 30
  72. 72. 4. RIA Interface Modeling ‣ The main goal is to define a metamodel to support the RIA Interface modeling in Web Engineering methods ‣ Address the UI modeling for different RIA technologies ‣ Support of two main concerns: 1. Advanced UI widgets 2. Event-driven UI behavior 31
  73. 73. 4. RIA Interface Modeling 1. Advanced UI Widgets ‣ The UI has been extended using widgets that are highly coupled to the RIA technology ‣ Widgets can be classified according to their interactive function with the IS ‣ Proposal: the definition of one metamodel for each RIA technology using a common set of abstract conceptual primitives that represent the interactive functions 32
  74. 74. 4. RIA Interface Modeling RIA Widgets Interactive Functions 33 1. Input Data
  75. 75. 4. RIA Interface Modeling RIA Widgets Interactive Functions 33 1. Input Data 2. Retrieve Information
  76. 76. 4. RIA Interface Modeling RIA Widgets Interactive Functions 33 1. Input Data 2. Retrieve Information 3. Navigation
  77. 77. 4. RIA Interface Modeling RIA Widgets Interactive Functions 33 1. Input Data 2. Retrieve Information 3. Navigation 4. Execute Services
  78. 78. 4. RIA Interface Modeling RIA Widgets Interactive Functions 33 1. Input Data 2. Retrieve Information 3. Navigation 4. Execute Services 5. Arrange and Group Widgets
  79. 79. 4. RIA Interface Modeling 34 A RIA Interface Model is composed by a set of Widgets
  80. 80. 4. RIA Interface Modeling 34 5 abstract conceptual primitives represent the interactive functions
  81. 81. 4. RIA Interface Modeling 34 A metamodel for the Adobe Flex technology is created by means of specialization relationships
  82. 82. 4. RIA Interface Modeling 34 Events are also considered in the technological metamodel
  83. 83. 4. RIA Interface Modeling 34 RIA Interface Metamodel Adobe Flex Interface Metamodel
  84. 84. 4. RIA Interface Modeling 2. Event-driven UI Behavior ‣ Changes in the UI perceived as events that happen over a specific widget ‣ Event rule: is defined by an Event from a source widget that triggers a Reaction associated with a target widget ‣ An XText grammar has been defined to support Event Rules 35
  85. 85. 4. RIA Interface Modeling ‣ Example: when inputting new data the client-side automatically retrieves the values that match the input text 36 Reaction Condition Event
  86. 86. 4. RIA Interface Modeling Integration in a Web Engineering Method ‣ An strategy based on weaving metamodels to connect the method metamodels with the RIA Interface metamodel ‣ A weaving metamodel establishes the relationship between the conceptual primitives of two metamodels that are not directly related ‣ Neither of the two connected metamodels is modified: the relationships between them are stored in a weaving model 37
  87. 87. 4. RIA Interface Modeling 38 Application into the OOWS 2.0 Method Abstract Interaction Metamodel RIA Interface Model (Adobe Flex) RIA Interface Metamodel
  88. 88. 4. RIA Interface Modeling 38 A set of weaving relationships establish the UI interactive function that a conceptual primitive represents Application into the OOWS 2.0 Method Weaving Relationships Abstract Interaction Metamodel RIA Interface Model (Adobe Flex) RIA Interface Metamodel
  89. 89. 4. RIA Interface Modeling 38 When the RIA Interface Model is created, analysts select the most suitable widget that implements the interactive function Application into the OOWS 2.0 Method Weaving Relationships Abstract Interaction Metamodel RIA Interface Model (Adobe Flex) RIA Interface Metamodel Instantiation
  90. 90. 4. RIA Interface Modeling Application into the OOWS 2.0 Method 39 From an Abstract Interaction Model, a Flex Interface Model is generated using a default weaving model OOWS Abstract Interaction Model Preliminary Weaving Model Preliminary Flex UI Model M2M Transformation 1
  91. 91. 4. RIA Interface Modeling Application into the OOWS 2.0 Method 39 The analyst changes the Flex Interface Model creating new weaving relationships with different widgets OOWS Abstract Interaction Model Preliminary Weaving Model Preliminary Flex UI Model M2M Transformation 1 Flex UI Model Weaving Model Abstract Interaction Model Analyst changes 2
  92. 92. 4. RIA Interface Modeling Application into the OOWS 2.0 Method 39 Once the Flex Interface Model is finished, Event Rules are included. The 4 models are used in the code generation process OOWS Abstract Interaction Model Preliminary Weaving Model Preliminary Flex UI Model M2M Transformation 1 Flex UI Model Weaving Model Abstract Interaction Model Analyst changes 2 Event Rules Model 3 To code generation
  93. 93. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 40
  94. 94. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 40
  95. 95. 5. Web 2.0 Patterns ‣ In Web 2.0 applications users are a valuable resource: a precise and intuitive interaction is essential ‣ Web 2.0 applications reuse several well-know mechanisms to simplify the user interaction 41 Quick Comment
  96. 96. 5. Web 2.0 Patterns ‣ In Web 2.0 applications users are a valuable resource: a precise and intuitive interaction is essential ‣ Web 2.0 applications reuse several well-know mechanisms to simplify the user interaction 41 Suggestion
  97. 97. 5. Web 2.0 Patterns ‣ In Web 2.0 applications users are a valuable resource: a precise and intuitive interaction is essential ‣ Web 2.0 applications reuse several well-know mechanisms to simplify the user interaction 41 !! Favorites
  98. 98. 5. Web 2.0 Patterns ‣ In Web 2.0 applications users are a valuable resource: a precise and intuitive interaction is essential ‣ Web 2.0 applications reuse several well-know mechanisms to simplify the user interaction 41 Share Content
  99. 99. 5. Web 2.0 Patterns ‣ Web 2.0 Pattern: a conceptual abstraction of a mechanism applied in a Web 2.0 application with the aim of improving the user interaction ‣ The utilization of 14 candidate patterns has been analyzed using a set of popular Web 2.0 applications 42
  100. 100. 5. Web 2.0 Patterns 43
  101. 101. 5. Web 2.0 Patterns 43 0% 25% 50% 75% 100% Quick Comment Public Profile Suggestion Subscription Notification Quick Rating Share Content Favorites Tag Definition Collaborative Editing Reputation Invite Availability Ranking 25% 37,5% 50% 56,25% 56,25% 62,5% 68,75% 68,75% 68,75% 68,75% 75% 87,5% 93,75% 100% % of Web 2.0 applications in which the pattern is used
  102. 102. 5. Web 2.0 Patterns 43 0% 25% 50% 75% 100% Quick Comment Public Profile Suggestion Subscription Notification Quick Rating Share Content Favorites Tag Definition Collaborative Editing Reputation Invite Availability Ranking 25% 37,5% 50% 56,25% 56,25% 62,5% 68,75% 68,75% 68,75% 68,75% 75% 87,5% 93,75% 100% % of Web 2.0 applications in which the pattern is used
  103. 103. 5. Web 2.0 Patterns ‣ Web 2.0 Patterns are usually described using a textual pattern template: Name, Problem, Rationale, Contexts of use, Solution and Example ‣ We propose the use of conceptual models in order to formalize the pattern semantics: 1. Functionality Model 2. Interaction Model 44
  104. 104. 5. Web 2.0 Patterns ‣ Notification Pattern: inform the user about the changes in the application since the last visit 45 Functionality Model
  105. 105. 5. Web 2.0 Patterns ‣ Notification Pattern: inform the user about the changes in the application since the last visit 45 Notification Application event * Notification creation User notifications List user notifications Select notification Notification operation Discard notification View notification* Store user notification state [ ] >> >> ||| [ ] >> [ > [ ] >> Notification Application event * Notification creation User notifications List user notifications Select notification Notification operation Discard notification View notification* Store user notification state [ ] >> >> ||| [ ] >> [ > [ ] >> Interaction Model
  106. 106. 5. Web 2.0 Patterns Integration ‣ An strategy that reuse the current conceptual primitives from Web Engineering methods ‣ Each Web 2.0 Pattern is represented by means of a method- specific model (M’) that is derived from the functionality and interaction models ‣ When the pattern is applied, an underlying M2M transformation generates the M’ model 46
  107. 107. 5. Web 2.0 Patterns Integration Strategy Proposed 47 Conceptual Primitive A Conceptual Primitive B Conceptual Primitive C Metamodel Level 0..1 * Web 2.0 Pattern Conceptual Primitive 1 Methodological Extension Point The method metamodel must contain a conceptual primitive that represents the Web 2.0 Pattern to be introduced.
  108. 108. 5. Web 2.0 Patterns Integration Strategy Proposed 47 Conceptual Primitive A Conceptual Primitive B Conceptual Primitive C Metamodel Level 0..1 * Web 2.0 Pattern Conceptual Primitive 1 Methodological Extension Point The pattern must be related by means of a unary relationship to, at least, another conceptual primitive of the metamodel
  109. 109. 5. Web 2.0 Patterns 48 Integration Strategy Proposed The purpose of the transformation is to substitute the conceptual primitive that represents the pattern by a method model Model Level M M2M Pattern Conceptual Primitive
  110. 110. 5. Web 2.0 Patterns 48 Integration Strategy Proposed M’ defines the underlying models that are actually used when the pattern is applied Model Level M M2M Pattern Conceptual Primitive M' Functionality Model Interaction Model Specific Model of the Method
  111. 111. 5. Web 2.0 Patterns 48 Integration Strategy Proposed As the pattern is described using a method model, code generation rules can be reused Model Level M M2M Pattern Conceptual Primitive M' Functionality Model Interaction Model Specific Model of the Method Code level M2C Pattern code
  112. 112. 5. Web 2.0 Patterns 49 Application into the OOWS 2.0 Method !
  113. 113. 5. Web 2.0 Patterns 50 Application into the OOWS 2.0 method !
  114. 114. 5. Web 2.0 Patterns 50 Application into the OOWS 2.0 method ATL Transformations ! !
  115. 115. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 51
  116. 116. 6. Preliminary Evaluation ‣ Viability evaluation as a necessary step before the full implementation of the technological infrastructure ‣ A lab demo based on a bioinformatic Web 2.0 application, 23andMe 1. Application not related to the social Web domain 2. Usable user interface created using RIA technologies 3. Complex enough to evaluate a Web Engineering Method 52
  117. 117. 6. Preliminary Evaluation ‣ Tasks performed: 1. Analysis of the interface and interaction modeling improvement over OOWS models 2. Modeling of two real scenarios to test the contributions proposed 3. Experiment design for a full evaluation 53
  118. 118. 6. Preliminary Evaluation 1. Analysis of the modeling improvement ‣ A set of 18 scenarios have been selected from the 23andMe lab demo ‣ It has been analysed if the required interaction and interface for each scenario can be modelled using OOWS or OOWS 2.0 models 54
  119. 119. 6. Preliminary Evaluation 55 OOWS OOWS 2.0 0% 25,00% 50,00% 75,00% 100,00% Interaction Interface Interaction Interface 66,67% 33,33% Modeling support for the 23andMe lab demo Supported Partial Not Supported
  120. 120. 6. Preliminary Evaluation 55 OOWS OOWS 2.0 0% 25,00% 50,00% 75,00% 100,00% Interaction Interface Interaction Interface 66,67% 33,33% 22,22% 50,00% 27,78% Modeling support for the 23andMe lab demo Supported Partial Not Supported
  121. 121. 6. Preliminary Evaluation 55 OOWS OOWS 2.0 0% 25,00% 50,00% 75,00% 100,00% Interaction Interface Interaction Interface 66,67% 33,33% 22,22% 50,00% 27,78% 94,44% 5,56% Modeling support for the 23andMe lab demo Supported Partial Not Supported
  122. 122. 6. Preliminary Evaluation 55 OOWS OOWS 2.0 0% 25,00% 50,00% 75,00% 100,00% Interaction Interface Interaction Interface 66,67% 33,33% 22,22% 50,00% 27,78% 94,44% 5,56% 77,78% 22,22% Modeling support for the 23andMe lab demo Supported Partial Not Supported
  123. 123. 6. Preliminary Evaluation 56 2. Compare genes scenario modeling
  124. 124. 6. Preliminary Evaluation ‣ Used to test the RIA Interface Model because describes a rich and highly interactive UI ‣ RIA Interface Model made up of: 1. A weaving model with 11 specific relationships to design the UI 2. 4 Event Rules are defined to describe the UI behavior 57
  125. 125. 6. Preliminary Evaluation 58 2. 23andMe community scenario modeling
  126. 126. 6. Preliminary Evaluation ‣ A collaborative scenario used to evaluate the Abstract Interaction Model and the Web 2.0 Patterns ‣ The interaction requires the definition of 7 AIU ‣ Using 3 Web 2.0 Patterns (Quick Comment, Public Profile and Favorite) the same interaction is achieved ‣ Reduces the complexity of the required interaction model 59
  127. 127. 6. Preliminary Evaluation 3. Experiment Design ‣ Goal: evaluate the improvement and temporal impact using the OOWS 2.0 method with regards to the OOWS method ‣ Metrics: modeling time and conceptual expressiveness provided by the models ‣ Process: subjects model two scenarios from the lab demo using the OOWS and the OOWS 2.0 methods ‣ Instruments: surveys gather the user experience about the usefulness of the conceptual primitives and also, the time to accomplish the modeling tasks 60
  128. 128. 6. Preliminary Evaluation Lessons Learned ‣ A 50% additional scenarios from the lab demo are fully supported by the OOWS 2.0 models ‣ The use of Web 2.0 Patterns simplifies the complexity of the interaction models ‣ Initial hypothesis suggest that using the OOWS 2.0 method, conceptual expressiveness should increase and the Web 2.0 applications development should improve ‣ Because of the more complex modeling process, efficiency may be affected 61
  129. 129. Outline 1. Introduction 2. Related Works 3. Abstract Interaction Model 4. RIA Interface Modeling 5. Web 2.0 Patterns 6. Preliminary Evaluation 7. Concluding Remarks 62
  130. 130. 7. Concluding Remarks 1. The definition of a new Abstract Interaction Model ‣ The model not only defines the interaction, but also how to connect with the IS business logic ‣ Extended version of the conceptual expressiveness validated in the context of the OOWS and OO-Method approaches ‣ The final purpose is the systematic code generation 63
  131. 131. 7. Concluding Remarks 2. The specification of a RIA Interface metamodel ‣ A model-based approach to support different RIA technologies ‣ Supports both the RIA Interface design and the Event-driven UI behavior ‣ Transparent integration with Web Engineering methods by means of weaving models 64
  132. 132. 7. Concluding Remarks 3. Modeling of Web 2.0 Patterns ‣ An analysis of the Web 2.0 Patterns utilization in real applications ‣ Because proposed models are based on well-know modeling languages, knowledge can be shared ‣ Web 2.0 Patterns formalized as M2M transformations 65
  133. 133. 7. Concluding Remarks Related Research Publications 66
  134. 134. 7. Concluding Remarks Related Research Publications 66 1. Valverde, F., Panach, I., Aquino, N., Pastor, O.: Dealing with Abstract Interaction Modelling in an MDE Development Process: a Pattern-based Approach. New Trends on Human-Computer Interaction. Springer, London (2009) 2. Valverde, F., Pastor, O., Valderas, P., Pelechano, V.: A Model-Driven Engineering Approach for Defining Rich Internet Applications: a Web 2.0 Case Study: Handbook of Research on Web 2.0, 3.0, and X.0: Technologies, Business, and Social Applications. Information Science Reference (2009) 3. Valverde, F., Pastor, O.: Facing the Technological Challenges of Web 2.0: A RIA Model-Driven Engineering Approach: Web Information Systems Engineering - WISE 2009, Vol. 5802. Springer (2009)
  135. 135. 7. Concluding Remarks Future Work ‣ Perform the proposed evaluation ‣ Application of the OOWS 2.0 method in a real development project ‣ Development of a OOWS 2.0 support tool ‣ Web 2.0 applications integration by means of REST Services ‣ Application of the contributions in another Web Engineering methods 67
  136. 136. 68 Thanks for your attention FranciscoValverde Giromé fvalverde@pros.upv.es

×