Mobile Web Development with WordPress, Joomla!, and Drupal : WEB AND MOBILE WEB EVOLUTION

As a web developer, this continuous change is always good news, because the potential to use new features and the performance of more powerful devices increasingly allows you to be as creative as you can be with state-of-the-art web technologies.

But those technologies themselves are changing too, and in this section you will look at how markup, styling, and scripting standards are developing, as well as some of the new ways browsers will be able to interact with the mobile device on which they are running.

1. Markup

Every web developer needs a working familiarity with HTML, the markup language used to author web pages. It is the fabric of the Web you see on a daily basis, describing how every site appears, renders, and is structured, and it has been a fundamental underpinning of the Web for over 15 years. In that time, HTML's evolution has been incremental and managed under the auspices of the World Wide Web Consortium (W3C) standards body. Most websites today broadly use the version known as HTML4.0, which was standardized in 1999.

Since then, the W3C strove to popularize XHTML, an XML-based version of HTML, which was intended to be more interoperable with other XML formats. Developers and content management systems were encouraged to emit well-formed and valid markup in contrast to the free-flowing and error-prone markup of typical websites.

By approximately 2005, mobile web standards were rapidly evolving from using an entirely separate markup language, WML, to describe pages and quickly adopted the principles of XHTML. This was partly because of the well-formed syntax (which was felt to be easier for limited devices to process) and partly because it offered modularization (which meant that subsets of the overall language could be supported by browsers). The resulting mobile profile markup standard, XHTML-MP, is still broadly used by mobile web developers as a safe and reliable option, and is widely supported by browsers on a wide range of mobile devices.

However, the W3C ceased development of the XHTML roadmap in 2009, citing a general industry consensus that its ambitions did not align with the way browsers and the contemporary Web as a whole were evolving. A separate standards body, the Web Hypertext Application Technology Working Group (WHATWG), that had been set up to explore a non-XML-based evolution of HTML was invited to continue its efforts in conjunction with the W3C, and the resulting standard, HTML5, is currently undergoing standardization and implementation by browser vendors in both the desktop and mobile environments. (An XML-based variant also exists, named XHTML5.)

HTML5 is a significant development for web developers everywhere. First, the language introduces a number of new tags which make it easier to describe the semantic structure of a web page. These include <article>, <aside>, <header>, <footer>, and <section>. The specification drops some style-related tags from HTML4, such as <center>, <big>, and <font> and more precisely describes how browsers should parse markup in a compatible and interoperable way.

But the most exciting developments relating to the HTML5 initiative, particularly from the point of view of the mobile web, are the additional APIs that are specified or associated with the standard.

2. Styling

For much of the last decade, web development techniques have evolved to embrace a healthy separation of style from content. Where HTML markup is used to describe the content and semantic structure of a document or a web-based application, a style sheet is used to specify the layout and cosmetic appearance of it. Cascading Style Sheet (CSS) techniques are universally used in modern-day web development — and are increasingly popular and reliable in the mobile environment too.

The CSS1 and CSS2 specifications (published in 1996 and 1998, respectively) defined the style sheet standard, although it was several years before popular browsers supported style sheets in reliable and consistent ways. At the time of this writing, most desktop browsers have reasonably comprehensive support for CSS2.1, the specification published in 2005.

More recently, healthy competition between browser vendors has prompted a renewed interest in more powerful CSS-based techniques. Browsers such as Safari, Mobile Safari, and Firefox have added support for proprietary CSS properties that allow developers to offer interesting, new visual effects to their web pages. These include rounded corners on boxes (as shown in Figure 1), drop-shadows on boxes and text (as shown in Figure 1), reflections (as shown in Figure 2), animations, columned layout, and transitions.

Figure 1.

Figure 2.

Figure 3.

The code for the css-webkit is available for download at www.wrox.com:css-webkit.html

In parallel, the W3C has continued its standardization work and has captured many of the same innovations in CSS3, a modular collection of styling specifications that are currently under development. Among many others, CSS3 contains the following important modules which offer significant changes over CSS2.1 and which are likely to be useful for mobile development:

• Template Layout — A declarative format for describing the layout of web pages with labeled blocks

• Backgrounds and Borders — Including the standardization of curved corners and shadows as shown earlier

• Marquee — Providing automatic horizontal scrolling of text that is too long for its container and of particular interest to limited-width mobile screens

• Color — Adding Hue/Saturation/Luminosity (HSL) and opacity support to color properties

• Fonts and Web Fonts — Supporting the ability of designers to precisely specify font faces to use within web pages, even if not installed on the user's device

• Multi-column Layout — Allowing flexible display of content that can flow across multiple columns

• 2D and 3D Transformations — Allowing a variety of rotations and transformations of objects within the page

• Animations — Allowing web developers to specify how CSS properties should vary over time, allowing simple animation effects

At the time of this writing, many of the CSS modules' specifications are not complete, and developers continue to rely on interim solutions, such as the use of the -webkit-* and -moz-* versions of the new style properties (depending on their target browsers). It is not yet clear when the CSS3 specifications will reach a stable state and become supported widely and consistently by desktop and mobile browsers. Nevertheless, this is still an area of particular evolution, and one of great interest to mobile designers and developers.

3. Scripting

All common desktop browsers and most reasonably capable mobile browsers provide support for client-side execution of JavaScript — both embedded inline within the markup of a page or loaded as external resources. On one hand, using JavaScript to manipulate the object model of a web page within the browser has provided web developers with a way to add interactivity and interesting user-interface behaviors to their web pages, such as animated menus and image slideshows. On the other, the language can invoke communication APIs to make asynchronous calls back to a web server (a technique known as AJAX) and improve the responsiveness and "application-like" nature of a website.

JavaScript as a language is relatively stable and not subject to any radical standardization process at the time of this writing. However, differences remain between the implementations of the language in various browsers, in particular, in the way scripts can manipulate the Document Object Model (or DOM) of the page.

Partly in response to this challenge and to provide additional functions commonly used in modern web development, many JavaScript frameworks have emerged in recent years. By far the most popular of these is jQuery, an open-source library that provides reliable element selection, DOM traversal, AJAX animation, and user interface support. It also sports a large collection of third-party plug-ins that provide additional functionality of many kinds. jQuery should be of particular interest to mobile developers, partly because it is a fast and relatively small library to download to a mobile browser, and also because it is a common option bundled with popular CMS platforms. In addition, the library's development team currently has a strategic focus on mobile browsers and intends to ensure compatibility through support for at least the major WebKit and smart phone browsers .

The rise of interest in mobile web apps for iPhone and Android handsets has also led to the creation of specific libraries for the purpose of creating mobile-specific user interfaces and applications. Sencha Touch, for example, is a dedicated HTML5- and CSS3-based JavaScript UI library that targets browsers on iOS and Android devices.

4. Embedded Media

Developers have always wanted to embed media into web pages, predominantly with images to supplement, enhance, or decorate the content. Formats such as GIF, JPEG, and PNG have long been supported and continue to be staples in the mobile web environment.

With the emergence of Adobe's Flash technology, many developers took the opportunity to create richer, more interactive areas of their websites (or indeed, to build entire user interfaces with it). Combined with faster network speeds, it became increasingly feasible to use Flash technology to stream and present audio and video media in web pages — best personified by the success of YouTube. However, Flash is a proprietary technology, and efforts have been made in standards bodies to create open equivalents and feasible alternatives. At the same time, Adobe has been less successful in deploying Flash client technology onto oft-restricted mobile devices than it was with desktop browsers (where users can normally download and install browser extensions painlessly). This has raised questions and many debates over what the future holds for Flash or a Flash-like experience on mobile.

HTML5 presents a number of interesting capabilities in this area. One notable additional tag specified in HTML5 is <canvas>, which provides JavaScript with the ability to draw styled, vector-based art on a portion of the screen. This is perhaps not suitable for all purposes, but it's perfect for applications such as plotting charts, simple maps, and directions. More advanced vector graphics can be achieved in conjunction with the Scalar Vector Graphics (SVG) standard, although broad mobile device support may be less reliable. Also in HTML5 are two new tags: <audio> and <video>. As their names suggest, these allow developers to embed media into a page in a standard way, without using Flash, and it appears they will be an important part of how a standards-based multimedia Web evolves in the future.

5. Client APIs

In conjunction with the HTML5 initiative, a number of client API specifications have been proposed. (Some of these are not technically part of the HTML5 standard itself, but are generally considered to be closely associated with it). These APIs encourage browser vendors to provide additional facilities that the web developer can access through dedicated new tags or the use of client-side scripting. These facilities and APIs include the following:

• Offline Web Applications — Through the use of a manifest file, an HTML5 web page or site can be cached by a web browser and subsequently available for use when the browser is not connected to a data network. This is of particular importance in the mobile context where a web application should continue to work even when the device is out of coverage.

• Web Storage — This specification is predominantly concerned with allowing JavaScript-based web applications to store and retrieve large amounts of data (up to 5MB or so) on the user's device. This data might include e-mails in a web-based inbox, documents, or complex application states. Storing this data locally allows faster access and more responsive user interfaces, but also, in conjunction with the offline manifest technique described above, allows a user to work with that data in an offline state, such that it can be synchronized with the server at a later stage.

• Geolocation — This API allows client-side JavaScript to query the device for information about its location (derived typically from a GPS receiver in the device). A website can therefore tailor its service to the user's physical location, most likely by sending geolocation data back to the server. Certain search queries, for example, might be filtered to be relevant with local results.

• Server-sent Events — These allow a web script to register a listener to events generated by a web server, conceptually reversing the usual request/response model of AJAX in a classic web app (although it is often implemented by the device making long-living requests to the server). Connectionless push is also proposed, possibly using SMS-borne messages, which is valuable on mobile because it allows the web app to know that a server state has changed without the performance and power impact of sustained data connections.

• WebSocket API and Protocol — This is an API and proposed protocol that provides scripts with the ability to create bi-directional (and non-HTTP-based) socket connections to a server. This will be valuable in assisting mobile device performance because developers will be able to reduce the size of calls made by a web app to a server (although possibly at the risk of alternative ports being blocked by carrier gateways).

• Web Workers — This API allows pages to spawn relatively heavyweight background scripts that run asynchronously without blocking user interface behavior. The applications for this API in the mobile context seem less clear due to the unintentional impact that such threads would have on battery life and so on.

The HTML5-related advances described above are indeed valuable for mobile devices as well as desktop browsers, but are not intended to be specific or unique to the mobile medium. In contrast, another suite of client specifications, developed by the Open Mobile Terminal Platform group (OMTP), aims to provide specific mobile-related JavaScript APIs. Known as BONDI, these 12 APIs allow a script on a web page to access native mobile device functionality. Some parts of BONDI (such as the geolocation and local storage APIs) overlap with HTML5 initiatives described above. Those APIs that do not include the following:

• Phone Status — This provides web apps with certain information about the device's current state, including its battery status, network connectivity, and accelerometer data.

• Messaging — This API lets web apps interact with the mobile device's messaging systems, including those for SMS, MMS, and e-mail.

• Application Invocation — This allows web apps to open local native applications outside the browser.

• Gallery Access — This API allows web apps to access photo, video, and music files on the device.

• Camera — This allows a web app to invoke the capabilities of the device's camera and to shoot images or video.

• Personal Information Management — This API allows a web app to query and interact with the contacts list, calendar, and notes data in the device.

At the time of this writing, it is unclear how far handset developers have implemented any of the BONDI specifications, and the standardization process has recently moved to the Wholesale Applications Community (WAC) initiative. Naturally, significant security considerations exist with many of these types of APIs.