Cristóbal Arellano

The Augmented Web: Rationales, Opportunities, and Challenges on Browser-Side Transcoding

Today’s web personalization technologies use approaches like user categorization, configuration, and customization but do not fully support individualized requirements. As a significant portion of our social and working interactions are migrating to the web, we can expect an increase in these kinds of minority requirements. Browser-side transcoding holds the promise of facilitating this aim by opening personalization to third parties through web augmentation (WA), realized in terms of extensions and userscripts. WA is to the web what augmented reality is to the physical world: to layer relevant content/layout/navigation over the existing web to improve the user experience. From this perspective, WA is not as powerful as web personalization since its scope is limited to the surface of the web. However, it permits this surface to be tuned by developers other than the sites’ webmasters. This opens up the web to third parties who might come up with imaginative ways of adapting the web surface for their own purposes. Its success is backed up by millions of downloads. This work looks at this phenomenon, delving into the “what,” the “why,” and the “what for” of WA, and surveys the challenges ahead for WA to thrive. To this end, we appraise the most downloaded 45 WA extensions for Mozilla Firefox and Google Chrome as well as conduct a systematic literature review to identify what quality issues received the most attention in the literature. The aim is to raise awareness about WA as a key enabler of the personal web and point out research directions.

A language for end-user web augmentation: Caring for producers and consumers alike

Web augmentation is to the Web what augmented reality is to the physical world: layering relevant content/layout/navigation over the existing Web to customize the user experience. This is achieved through JavaScript (JS) using browser weavers (e.g., Greasemonkey). To date, over 43 million of downloads of Greasemonkey scripts ground the vitality of this movement. However, Web augmentation is hindered by being programming intensive and prone to malware. This prevents end-users from participating as both producers and consumers of scripts: producers need to know JS, consumers need to trust JS. This article aims at promoting end-user participation in both roles. The vision is for end-users to prosume (the act of simultaneously caring for producing and consuming) scripts as easily as they currently prosume their pictures or videos. Encouraging production requires more “natural” and abstract constructs. Promoting consumption calls for augmentation scripts to be easier to understand, share, and trust upon. To this end, we explore the use of Domain-Specific Languages (DSLs) by introducing Sticklet. Sticklet is an internal DSL on JS, where JS generality is reduced for the sake of learnability and reliability. Specifically, Web augmentation is conceived as fixing in existing web sites (i.e., the wall) HTML fragments extracted from either other sites or Web services (i.e., the stickers). Sticklet targets hobby programmers as producers, and computer literates as consumers. From a producer perspective, benefits are threefold. As a restricted grammar on top of JS, Sticklet expressions are domain oriented and more declarative than their JS counterparts, hence speeding up development. As syntactically correct JS expressions, Sticklet scripts can be installed as traditional scripts and hence, programmers can continue using existing JS tools. As declarative expressions, they are easier to maintain, and amenable for optimization. From a consumer perspective, domain specificity brings understandability (due to declarativeness), reliability (due to built-in security), and “consumability” (i.e., installation/enactment/sharing of Sticklet expressions are tuned to the shortage of time and skills of the target audience). Preliminary evaluations indicate that 77% of the subjects were able to develop new Sticklet scripts in less than thirty minutes while 84% were able to consume these scripts in less than ten minutes. Sticklet is available to download as a Mozilla add-on.

Interfaces for scripting: making Greasemonkey scripts resilient to website upgrades

Thousands of users are streamlining their Web interactions through user scripts using special weavers such as Greasemonkey. Thousands of programmers are releasing their scripts in public repositories. Millions of downloads prove the success of this approach. So far, most scripts are just a few lines long. Although the amateurism of this community can partially explain this fact, it can also stem from the doubt about whether larger efforts will pay off. The fact that scripts directly access page structure makes scripts fragile to page upgrades. This brings the nightmare of maintenance, even more daunting considering the leisure-driven characteristic of this community. On these grounds, this work introduces interfaces for scripting. Akin to the JavaScript programming model, Scripting Interfaces are event-based, but rather than being defined in terms of low-level, user-interface events, Scripting Interfaces abstract these DOM events into conceptual events. Scripts can now subscribe to or notify of conceptual events in a similar way to what they did before. So-developed scripts improve their change resilience, portability, readability and easiness to collaborative development of scripts. This is achieved with no paradigm shift: programmers keep using native JavaScript mechanisms to handle conceptual events.

End-User Browser-Side Modification of Web Pages

The increasing volume of content and actions available on the Web, combined with the growing number of mature digital natives, anticipate a growing desire of controlling the Web experience. Akin to the Web2.0 movement, webies’ desires do not stop at content authoring but look for controlling how content is arranged in websites. By content, we mainly refer to HTML pages, better said, their runtime representation: DOM trees. The vision is for users to “prune” (removing nodes) or “graft” (adding nodes) existing DOM trees to improve their idiosyncratic and situational Web experience. Hence, Web content is no longer consumed as canned by Web masters. Rather, users can remove content of no interest, or place new content from somewhere else. This vision accounts for a post-production user-driven Web customization (referred to as “Web Modding”). Being user driven, appropriate abstractions and tools are needed. The paper introduces a set of abstractions (formalized in terms of a domain-specific language) and an IDE (realized as an add-on from Google Chrome) to empower non-programmers to achieve HTML rearrangement. The paper discusses the technical issues and the results of a first validation.

Tagging-Aware Portlets

A corporate portal supports a community of users on cohesively managing a shared set of resources. Such management should also include social tagging, i.e. the practice of collaboratively creating and managing tags to annotate and categorize content. This task involves to know both what to tag (hence, the rendering of the resource content) and how to tag (i.e. the tagging functionality itself). Traditionally both efforts are accomplished by the same application (Flickr is a case in point). However, portals decouple these endeavours. Tagging functionality is up to the portal, but content rendering can be outsourced to third-party applications: the portlets. Portlets are Web applications that transparently render their markup through a portal. The portal is a mere conduit for the portlet markup, being unaware of what this markup conveys. This work addresses how to make portlets tagging-aware, i.e. portlets that can be seamlessly plugged into the portal tagging infrastructure. The main challenge rests on consistency at both the back-end (i.e. use of a common structure for tagging data, e.g. a common set of tags), and the front-end (i.e. tagging interactions to be achieved seamlessly across the portal using similar rendering guidelines). Portlet events and RDFa annotations are used to meet this requirement. A running example in WebSynergy illustrates the feasibility of the approach.

Web Mashups with WebMakeup

Modding refers to the act of modifying hardware, software, or virtually anything else, to perform a function not originally conceived or intended by the designer. The rationales for modding should be sought in the aspiration of users to contextualize to their own situation the artefact at hand. Websites are not exception. WebMakeup targets mod scenarios where web pages are turned into canvases users can tune to account for their situational, idiosyncratic, and potentially, short-lived needs. By clicking, users turn DOM nodes into widgets. Widgets can next be rearranged, deleted, updated or stored for later reuse in other pages. In addition, widgets can be involved in “blink” patterns where interactions with a widget might affect the related widgets. This empowers users to tune not only what but also when content is to show up in an AJAX-like way. WebMakeup is publicly available as a Chrome extension.

Lightweight End-User Software Sharing

This paper looks into the sharing of end-user software (referred to as “script”). Based on this study four implications are drawn: reduce the effort to make scripts shareable, minimize deployment burdens, less stringent protection mechanisms, and tap into communities of practice as for sharing. To attend these implications, we introduce a URL-based distribution schema for scripts combined with an IP-address-based authorization model. This makes scripts URL-addressable and easy to install, because choosing to install a script means that all of the necessary frameworks, plug-ins, etc. that are needed to make this script run are simultaneously installed. On the other hand, IP-based protection uses IP network prefixes as cypher keys. A script language is used as a proof of concept.

Web-Based tool integration: a web augmentation approach

Desktop tools are steadily being turned into web applications. Tool integration then becomes a question of website integration. This work uses Web Augmentation techniques for this purpose. An integration layer is deployed on top of the existing Web-based tools that augments the rendering of those tools for the integration experience. Layers are specified through a statechart-like DSL and transformed into JavaScript.

Elkar-CM: a Multilingual Collaborative Concept Map Editor

Along this paper Elkar-CM, a multilingual collaborative concept map editor is presented. The paper starts explaining the main characteristics of CM-ED, the kernel in which Elkar-CM is based on. Next, the paper describes the main characteristics and functionalities offered by Elkar-CM. Finally some conclusions are pointed out.

Wikipedia customization through web augmentation techniques

Wikipedia is a successful example of collaborative knowledge construction. This can be synergistically complemented with personal knowledge construction whereby individuals are supported in their sharing, experimenting and building of information in a more private setting, without the scrutiny of the whole community. Ideally, both approaches should be seamlessly integrated so that wikipedians can easily transit from the public sphere to the private sphere, and vice versa. To this end, we introduce WikiLayer, a plugin for Wikipedia that permits wikipedians locally supplement Wikipedia articles with their own content (i.e. a layer). Layering additional content is achieved locally by seamlessly interspersing Wikipedia content with custom content. WikiLayer is driven by three main wiki principles: affordability (i.e., if you know how to edit articles, you know how to layer), organic growth (i.e., layers evolve in synchrony with the underlying articles) and shareability (i.e., layers can be shared in confidence through the wikipedians social network, e.g., Facebook). The paper provides motivating scenarios for readers, contributors and editors. WikiLayer is available for download at http://webaugmentation.org/wikilayer.xpi.