Alfonso Murolo

The Forgotten Many? A Survey of Modern Web Development Practices

With an estimated 21.9% of the top 10 million web sites running on WordPress, a significant proportion of the web development community consists of WordPress developers. We report on a survey that was carried out to gain a better understanding of the profile of these developers and their web development practices. The first two parts of the survey on the background and development practices were not exclusive to WordPress developers and therefore provide insight into general web developer profiles and methods, while the third part focussed on WordPress specifics such as theme development. We present the results of the survey along with a discussion of implications for web engineering research.

Deriving Custom Post Types from Digital Mockups

Interface-driven approaches to web development often migrate digital mockups defining the presentation, structure and client-side functionality of a website to platforms such as WordPress that manage the content of the website and implement server-side functionality. In the case of data-intensive websites, generation of data types that manage the application-specific content is usually performed manually during the migration process. We propose an approach that allows WordPress custom post types to be derived based on an analysis of sample content used in digital mockups.

X-Themes: Supporting Design-by-Example

Design-by-example enables users with little technical knowledge to develop web sites by reusing all or parts of existing sites. In CMS such as WordPress, themes essentially offer example designs for all-or-nothing reuse. We propose an extension to the theme concept that allows web sites to be designed by reusing and combining components of different themes. In contrast to previous research advocating design-by-example, we do not restrict ourselves to static web pages, but also support the reuse of dynamic content including functionality for animations and database access. Our approach is to provide a theme generator that structures the themes that it generates in terms of reusable components which can then be reused in future themes. We present a first prototype tool, called the X-Themes Editor, developed to demonstrate the viability of the approach and investigate requirements and issues. We describe how the X-Themes Editor has been integrated into the WordPress platform as well as discussing the outcomes of these initial investigations.

Revisiting Web Data Extraction Using In-Browser Structural Analysis and Visual Cues in Modern Web Designs

Recent trends in website design have an impact on methods used for web data extraction. Many existing methods rely on structural analysis of web pages and, with the introduction of CSS, table-based layouts are no longer used, while responsive design means that layout and presentation are dependent on browsing context which also makes the use of visual clues more complex. We present DeepDesign, a system that semi-automatically extracts data records from web pages based on a combination of structural and visual features. It runs in a general-purpose browser, taking advantage of direct access to the complete CSS3 spectrum and the capability to trigger and execute JavaScript in the page. The user sees record matching in real-time and dynamically adapts the process if required. We present the details of the matching algorithms and provide an evaluation of them based on the top ten Alexa websites.

UI Testing Cross-Device Applications

The increasing number of devices available to a user has prompted the research community to explore how these can be used in combination. Frameworks and toolkits have been proposed to facilitate the design and implementation of these cross-device applications. Still, implementing cross-device applications remains complex because of the fragmentation of the user interface and logic across devices and the flexibility required to adapt to different combinations of devices. Testing in particular has been identified as a critical challenge. To address these issues, we introduce XD-Testing, a library that provides explicit and implicit device selectors, device templates and scenarios, as well as a visualiser for application screenshots. In a case study, we demonstrate how we used the library to author human-readable tests for a cross-device gallery that verify if a UI distributes correctly and if it works as expected despite being distributed.

Supporting out of office software development using personal devices

Software developers typically use multiple large screens in their office setup. However, they often work away from the office where such a setup is not available, instead only working with a laptop computer and drastically reduced screen real estate. We explore how developers can be better supported in ad-hoc scenarios, for example when they work in a cafe, an airport, or at a clients site. We present insights into current work practices and challenges when working away from the usual office desk sourced from a survey of professional software developers. Based on these insights, we introduce an IDE that makes use of additional personal devices, such as a phone or a tablet. Parts of the IDE can be offloaded to these mobile devices, for example the application that is being developed, a debugging console or navigational elements. A qualitative evaluation with professional software developers showed that they appreciate the increased screen real estate.

Improved Developer Support for the Detection of Cross-Browser Incompatibilities

Various tools are available to help developers detect cross-browser incompatibilities (XBIs) by testing the documents generated by their code. We propose an approach that enables XBIs to be detected earlier in the development cycle by providing support in the IDE as the code is being written. This has the additional advantage of making it clear to the developers where the sources of the problems are and how to fix them. We present wIDE which is an extension to an IDE designed specifically to support web developers. wIDE uses a compatibility knowledge base to scan the source code for XBIs. The knowledge base is extracted automatically from online resources and periodically updated to ensure that the compatibility information is always up-to-date. In addition, developers can query documentation from within the IDE to access descriptions and usage examples of code statements. We report on a qualitative user study where developers provided positive feedback about the approach, but raised some issues to address in future work.

Scaffolding Relational Schemas and APIs from Content in Web Mockups

Web developers often use an interface-driven design process where mockups are gradually refined before being implemented using a platform or framework. We propose a tool, DataMockups, that supports the creation of digital mockups and then generates a relational schema automatically based on sample content and some assumptions on its structure. This aims at reducing development effort, and the database knowledge required by developers. Sample content may be entered manually or automatically using data extracted from similar existing websites. A relational schema is inferred from the data content, and then translated to an SQL database definition before generating a server-side API. To support schema evolution, the generated API provides schema abstractions that offer robustness to future schema modifications. We report on a case study for the schema inference and a performance evaluation of the data detection algorithm.

Mixing and Mashing Website Themes

WordPress offers users a wide choice of themes defining the structure, functionality, layout and presentation of a website together with its content types. These themes are shared by the WordPress community, enabling users to benefit from the skills of others. However, it is not possible to mix themes, so users often have to choose from a set of themes that only partially meet their requirements. We have developed a theme editor that allows users to combine both static and dynamic elements of existing themes using simple drag-and-drop operations. These elements are adapted to reflect the content and structure of the website under construction so that there is no distinction between design-time and run-time. We discuss in detail technical challenges along with our solutions for developing such an editor and integrating it into the WordPress platform. Further, we describe how the solutions could be generalised to other modern content management systems.