Used fot the presentation of the thesis entitled "Un enfoque orientado a usuarios finales para el desarrollo de aplicaciones de aumentación web móvil"

1. An End User Development approach for
Mobile Web Augmentation applications
BS.CIS. Gabriela BOSETTI
LIFIA, Facultad de Informática, UNLP
gbosetti@lifia.info.unlp.edu.ar
Advisors
Prof. PhD. Gustavo ROSSI
Prof. PhD. Sergio FIRMENICH
Prof. PhD. Marco WINCKLER

2. Motivation1
2

3. Mobile Internet Subscribers
Measuring the Information Society Report 2017, International Telecommunication Union
3

4. ❖ Mobile Web has
➢ a nearly 3x larger audience that
➢ grows twice as fast as native applications’
Internet from Mobile
Comscore reports in the “US Mobile App Report 2016”:
❖ In 2016, digital media usage:
Users spend
more time using
native
applications than
mobile Web, but
…
4

5. Native vs Web access
Many websites provide a native mobile counterpart.
❖ E.g. The 10 first sites in the top-500 by Alexa
have a native counterpart at Google Play.
But many others sites are not conceived for
being accessed from a mobile device.
❖ E.g. Just 36/52 sites on the AR-news
section have a native counterpart.
❖ Users may access them through a Web
browser
❖ Moreover, not all websites take advantage
of the context information.
(1) Native
(2) Mobile Web
5

6. Native vs Web access
(2) Original (3) Adapted
(1) Native
6

7. Native vs Web access
Some web browsers capabilities are
still not available for Web
applications, and not even fully
covered by all mobile browsers. E.g.
DeviceLightEvent at MDN:
Feature
Chrome for
Android
Firefox Mobile
(Gecko)
IE Mobile
Opera
Mobile
Safari
Mobile
Basic support No support 15.0 (15.0)[1] No support No support No support
WorkingDraft
Native development kits provide a wider and low-level access
to the device’s sensors.
7

8. e.g. Radio Estación Sur
(1) Original (2) Adapted
8

9. Websites that are not conceived for mobile, may be
adapted to:
1. be responsive to the screen size
2. make use of the context information to tailor its
functionality or content
9

10. Web Augmentation
Techniques for improving the user experience according to his requirements,
by manipulating the style/structure/behaviour of existing Web pages
10

11. Userscripts
Big communities of userscripts and browser extensions support
the adaptation of existing Web content.
http://userscripts-mirror.org/
https://greasyfork.org/en
https://openuserjs.org/
11

12. New forms of user participation
End users started to create, modify or extend their own software
artefacts by using programming environments that abstract the
complexity of the development
❖ Scaffidi, C., Shaw, M., & Myers, B. (2005, September). Estimating the
numbers of end users and end user programmers. In Visual
Languages and Human-Centric Computing, 2005 IEEE Symposium on (pp. 207-
214). IEEE.
❖ Stolee, K. T., Elbaum, S., & Sarma, A. (2011, September). End-user
programmers and their communities: An artefact-based
analysis. In Empirical Software Engineering and Measurement (ESEM), 2011
International Symposium on (pp. 147-156). IEEE.
12

13. End User Development
“A set of methods, techniques, and tools that allow users of
software systems, who are acting as non-professional
software developers, at some point to create, modify or extend
a software artefact” (i)
Lieberman, H., Paternò, F., Klann, M., & Wulf, V. (2006). End-user development: An emerging paradigm. In End user
development (pp. 1-8). Springer Netherlands.
Developer Producer Consumer
13

14. The use of...
mobile
broadband is
increasing
mobile Web
applications
is promising
14

15. And users need to...
augment the
Web
create their
own
solutions
15

16. Related work2
16

17. Related Work
EUD approaches from desktop environments
a. Mashup frameworks and tools for mobile apps [1][2][3]
b. Automate tasks by recording user actions [4]
EUD approaches for mobile from mobile environments
a. framework for mobile applications [5]
b. context-aware platforms delivering info [6] or “in-situ
stories” [7] as a service to clients
c. platforms for creating
i. mobile apps [8][9] and
ii. mobile mashups [10]
CONTEXT AWARE
WEB AUGMENTATION
END USER DEVELOPMENT
17

18. Related Work
Frameworks for Web Adaptation
a. and a system for intelligent tourism [11]
b. supporting personalization of native-mobile apps [13]
Frameworks for Web Augmentation
c. for augmenting existing Web apps with multimodal
interactions [12]
d. for augmenting legacy Websites with context-awareness
(Ambient-AMP) [14]
e. and a DSL for Web Augmentation [15]
EUD of Web Augmentation applications
a. WOA [16] & WebMakeUp [17]
CONTEXT AWARE
WEB AUGMENTATION
END USER DEVELOPMENT
18

19. Allow end users to
adapt the Web
by their own means &
according to their needs
& the contextual
information
19

20. Contribution3
20

21. Contribution
A framework, as the conceptual and supporting structure
for the construction of Mobile WA applications.
­
A tool supporting the creation of Mobile WA applications,
based on the artifacts contemplated in the framework.
An experiment, validating the approach through the use of
the support tool by a group of 21 end users.
An approach aimed at end users for the visual development of
Mobile Web Augmentation applications:
⎼ on the client side and from mobile devices,
⎼ enabling the modality of on-demand, and
⎼ in-situ creation.
21

22. Mobile Web Augmentation
Defined as an specialization of Web Augmentation
22

23. Web Augmentation
div
div
div
h3
a
div
h3
a
div
div
h3
a
div (2) Application’s source code
(1) Application UI
(3) DOM
23

24. From mobile platforms it is possible to access the context
information:
● navigator.geolocation
● deviceOrientation
● navigator.battery
● DeviceLightEvent
● Telephony.active
● navigator.mozGetUserMedia
Using context for Web Augmentation
24

25. Wiki-trailers: a descriptive scenario
25

26. Darwin tour: a descriptive scenario
(2) Info provided for a «digital tour»(1) Mechanism provided for the physical tour
26

27. Darwin tour: a descriptive scenario
(1) Original (2) Adapted
27

28. MoWA Authoring
28

29. Show time!
to the framework
29

30. Set base information
30

31. Select sensors
31

32. Define context values
32

33. Define Digital Counterparts
33

34. Define Augmenters
34

35. MoWA framework Instantiation
35

36. extension points & Building Blocks
Sensors & Context
Values
Context Rep. &
Markers
Augmenters
● GeoLocation
● Lux
● Decibel
● BatteryCharge
● TelephonyStatus
● User profile
● Outdoor map
● 2D plane
● Decibel scale
● Brightness scale
● Battery charge
scale
● Title section
● Description
● MH Assistance
● Related Videos
● Related Images
● Related Tweets
Easy to extend. E.g.
36

37. MoWA Framework
37

38. E.g. extending a context value
38

39. E.g. Extending a sensor
39

40. Evaluation4
40

41. MoWA for End Users (v2)
● 21 participants (end users)
● The average of completeness rate → 84%
● The average of consumed-time rate → 48min
Authoringtime
Completeness level
41

42. MoWA for End Users (v2)
Difficulty perceived by the participants
1 2 3 4 5
Very Easy Easy Regular Hard Very Hard
42

43. Concluding Remarks
& Further work5
43

44. Conclusions
1. Fulfill the user’s needs (extending EUD to Mobile WA).
2. Understand how users can augment Web sites according to
the context of usage.
3. Better understand and expand the limits of the technology.
4. Propose an approach
○ a conceptual & support framework
○ an authoring process and supporting tool
○ an evaluation
○ 4 publications
44

45. Further work
● Extending the framework
● A DSL for applications specification, under a SPL
architecture.
● Collaborative development process for users with different
levels of expertise.
● A public repository, for collecting data to analyse:
○ metrics of use
○ the evolution of projects
○ the user’s needs and the learning curve
45

46. Publications6
46

47. Publications related to the approach
1. Challiol, C., Firmenich, S., Bosetti, G. A., Gordillo, S. E., & Rossi, G. (2013, July).
Crowdsourcing mobile web applications. In International Conference
on Web Engineering (pp. 223-237). Springer International Publishing.
2. Bosetti, G. A., Firmenich, S., Gordillo, S. E., & Rossi, G. (2017). An approach for
building Mobile Web applications through Web
Augmentation. JOURNAL OF WEB ENGINEERING, 16(1-2), 75-102.
3. Bosetti, G., Firmenich, S., Gordillo, S. E., Rossi, G., & Winckler, M. An End-User
Development approach for Mobile Web Augmentation. Mob. Inf.
Syst., vol. 2017, pp. 1–28, 2017.
4. Bosetti, G., Firmenich, S., Rossi, G., & Winckler, M. (2017, June). Supporting
Mobile Web Augmentation by End Users. In International Conference
on Web Engineering (pp. 539-543). Springer, Cham. ICWE
2017
47

48. Publications on EUD + WA
1. Firmenich, S., Bosetti, G., Rossi, G., Winckler, M., & Corletto, J. M. (2017). Distributed Web browsing:
supporting frequent uses and opportunistic requirements. Universal Access in the Information Society,
1-14.
2. Bosetti, G., Firmenich, S., Fernandez, A., Winckler, M., & Rossi, G. (2017, June). From Search Engines
to Augmented Search Services: An End-User Development Approach. In International Conference on
Web Engineering (pp. 115-133). Springer, Cham.
3. Firmenich, S., Bosetti, G., Rossi, G., & Winckler, M. (2017, May). End-user software engineering for the
personal web. In Software Engineering Companion (ICSE-C), 2017 IEEE/ACM 39th International
Conference on (pp. 216-218). IEEE.
4. Firmenich, S., Bosetti, G., Rossi, G., & Winckler, M. (2016, June). Flexible distribution of existing web
interfaces: an architecture involving developers and end-users. In International Conference on Web
Engineering (pp. 200-207). Springer, Cham.
5. Firmenich, S., Bosetti, G., Rossi, G., Winckler, M., & Barbieri, T. (2016, June). Abstracting and
structuring web contents for supporting personal web experiences. In International Conference on
Web Engineering (pp. 77-95). Springer, Cham.
6. Bosetti, G., Firmenich, S., Rossi, G., Winckler, M., & Barbieri, T. (2016, June). Web Objects Ambient: an
integrated platform supporting new kinds of Personal Web experiences. In International Conference
on Web Engineering (pp. 563-566). Springer, Cham.
48

49. Questions ?
49

50. Related Work
1. F. Corvetta, M. Matera, R. Medana, E. Quintarelli, V. Rizzo, L. Tanca, Designing and Developing
Context-Aware Mobile Mashups: The CAMUS Approach, in: Springer International Publishing, 2015: pp.
651–654.
2. Y. You, V.-V. Mattila, Visualizing Web Mash-ups for In-situ Vision-based Mobile AR Applications, in: Proc.
2013 ACM Conf. Pervasive Ubiquitous Comput. Adjun. Publ., 2013: pp. 271–274.
3. C. Cappiello, M. Matera, M. Picozzi, A UI-Centric Approach for the End-User Development of Multidevice
Mashups, ACM Trans. Web. 9 (2015) 1–40.
4. G. Manjunath, M.N. Murty, D. Sitaram, Tasklets: enabling end user programming of web widgets, Int. J.
Web Eng. Technol. 8 (2013) 264.
5. J. Danado, F. Paternò, Puzzle: A Visual-Based Environment for End User Development in Touch-Based
Mobile Phones, in: Proc. 4th Int. Conf. Human-Centered Softw. Eng., Springer-Verlag, 2012: pp. 199–216.
6. D. Martín, C. Lamsfus, A. Alzua-Sorzabal, A cloud-based platform to develop context-aware mobile
applications by domain experts, Comput. Stand. Interfaces. 44 (2016) 177–184.
7. F. Pittarello, L. Bertani, CASTOR: learning to create context-sensitive and emotionally engaging narrations
in-situ, in: Proc. 11th Int. Conf. Interact. Des. Child. - IDC ’12, ACM Press, New York, USA, 2012: p. 1.
8. J. Seifert, B. Pfleging, E. del Carmen Valderrama Bahamóndez, M. Hermes, E. Rukzio, A. Schmidt,
Mobidev: a tool for creating apps on mobile phones, in: Proc. 13th Int. Conf. Hum. Comput. Interact. with
Mob. Devices Serv. - MobileHCI ’11, ACM Press, New York, New York, USA, 2011: p. 109.
9. R. Francese, M. Risi, G. Tortora, M. Tucci, Visual Mobile Computing for Mobile End-Users, IEEE Trans.
Mob. Comput. 15 (2016) 1033–1046.
10. E. Lee, H.-J. Joo, Developing lightweight context-aware service mashup applications, in: 15th Int. Conf. Adv.
Commun. Technol., IEEE, 2013.
50

51. Related Work
11. G. D’Amico, S. Ercoli, A. Del Bimbo, A framework for itinerary personalization in cultural tourism of smart
cities, in: CEUR Workshop Proc., 2013.
12. G. Ghiani, M. Manca, F. Paternó, C. Porta, Beyond responsive design: Context-dependent multimodal
augmentation of web applications, in: Lect. Notes Comput. Sci., 2014: pp. 71–85.
13. R. Wasinger, M. Fry, S. Gerber, O. Iivonen, J. Kay, B. Kummerfeld, Client-side user modelling across
multiple mobile applications / Rainer Wasinger et al.- Version details - Trove, Sydney, 2011.
14. D. Carlson, L. Ruge, Ambient Amp: An open framework for dynamically augmenting legacy Websites with
context-awareness, in: 2014 IEEE Ninth Int. Conf. Intell. Sensors, Sens. Networks Inf. Process., IEEE, 2014:
pp. 1–6.
15. O. Díaz, C. Arellano, M. Azanza, A language for end-user web augmentation, ACM Trans. Web. 7 (2013)
1–51.
16. G. Bosetti, S. Firmenich, G. Rossi, M. Winckler, T. Barbieri, Web objects ambient: An integrated platform
supporting new kinds of personal web experiences, in: Lect. Notes Comput. Sci. (Including Subser. Lect.
Notes Artif. Intell. Lect. Notes Bioinformatics), 2016: pp. 563–566.
17. O. Díaz, I. Aldalur, C. Arellano, H. Medina, S. Firmenich, Web mashups with webmakeup, in: Commun.
Comput. Inf. Sci., 2016: pp. 82–97.
Click for more details
51