Beyond “HTML5,” Part 2: Open Web Technologies You Can Use Today

In part 1 of this series, we discussed some myths and misconceptions about HTML5 and proposed the term “Open Web technologies” as a more accurate alternative. Today we’ll explore some Open Web features that have widespread support in desktop and mobile browsers today.

Video

Since the release of Internet Explorer 9, all the major browsers now support plugin-less audio and video. The HTML5 <video> element makes it easy to embed media in a page, but you can do much more.

Since video is a native HTML element, it can interact seamlessly with other elements on the page (unlike Flash and other plugins, which are more or less a black box). In this canvas video mapping demo, a video is mapped onto a 3D rotating rectangle. In a second demo, the video can be clicked and “blown up.” You can watch the pieces of video scatter across the page but continue to play without a hiccup.

Many browsers support the h.264 video format, which also works with Flash. h.264 is patented, however, so manufacturers have to pay to license the technology. For this reason, Mozilla and Google have chosen to support patent-free technologies instead. Firefox supports the Ogg format, and both now support the new WebM video format, which was open-sourced by Google and may become the dominant format for web video in the future. For now, h.264 with a Flash fallback or h.264, Ogg and WebM are required for cross-browser playback.

Offline Access and Local Storage

One of the long-term goals of the Web Standards and Open Web movements is to allow web applications that function as well as standard desktop applications. An important step in that is to make web apps available even when users don’t have an internet connection.

Open Web applications can declare a manifest, or list of files to be cached on the user’s computer or device. The manifest contains all the files needed to run the application so that the user doesn’t need to download them on subsequent visits. This can be combined with other technologies including HTML5 local storage and indexed databases, to download and store content user preferences on the device.

For example, the Financial Times had an iOS app that allowed subscribers to access paid magazine content. When Apple announced that it was going to take a 30% cut of all in-app purchase revenues (including subscriptions), FT decided to redesign their app as an Open Web application. The new FT “app” is really a website that uses offline and local storage capabilities to store its content on the device. It operates the same way an app would, except it bypasses the App Store and uses standard HTML that can be viewed on any device.

Another benefit is that unlike an app, which requires the user to download a new version to receive updates, the FT web app can simply update its manifest and new files are downloaded and cached. Offline caching and data access are not supported everywhere, but since an offline-enabled web application is still basically a normal web page, offline access and storage makes an excellent progressive enhancement.

Device Access

One of the most exciting new features of HTML5 for mobile devices is the ability to interact with the device’s inputs and outputs. Modern phones and tablets have accelerometers that can tell which direction the phone is facing and how fast it’s moving. Wi-fi and 3G-connected devices can pinpoint their location in the world. Many devices also have cameras and microphones that can be used to record audio and video and do real-time communications. Open Web-compatible browsers can interface with all of these.

Geolocation

Geolocation is the ability to find a user’s location (in the form of latitude and longitude coordinates) in the world. It’s not the same as GPS, although GPS is one technology that can be used for geolocation. Many browsers use Google Location Services, which triangulates locations by mapping nearby Wi-Fi hotspots. A user’s coordinates can be cross-referenced with existing databases to find ZIP codes, street addresses, nearby businesses, and more.

Here’s a good example. The INeedA demo pulls together geolocation services and Google Maps to help users find a restaurant, a hospital, an ATM, gas station, or other services near them. (Note: This demo doesn’t work in Chrome, but it does work in Firefox, Safari, and Internet Explorer 9.)

It’s important to note that geolocation services are opt-in—users have to explicitly give permission to find their current location—and there is no fallback for older browsers. So it’s important to treat geolocation as an enhancement, and still provide a way for users to enter their location manually.

Device Orientation

As a device’s accelerometer detects motion and rotation, Open Web-capable browsers can update the display accordingly. You use this technology whenever you rotate an iPhone or iPad from portrait to landscape orientation and vice-versa, but the accelerometer provides much more information than this.

For example, view this HTML5 3D Rotating Logo on an iOS or Android device or a Mac laptop with an accelerometer. The accelerometer detects the three-dimensional tilt of the device and updates the HTML5 logo on the page to match.

There is no fallback for devices that don’t support orientation (or don’t have an accelerometer), but there are plenty of possibilities for orientation-aware apps on mobile devices.

Full Screen Support

Immersive web sites and videos can have more impact if they fill the screen. Flash has been able to do this for some time, but recently Open Web-capable browsers can do it as well. Any element on the screen (for example, a video, an iframe, or a div) can be expanded to fill the screen and cover other elements. Try this demo to see how it works.

CSS3 Transforms and Transitions

Cascading Style Sheets, or CSS, has come a long way from its beginnings as a way to specify fonts and colors. Previous versions of CSS brought us advanced tools to position and size web content, and CSS3 offers an even wider variety of artistic and cinematic effects.

Transitions and transforms are examples of CSS “effects,” which can be used to give page elements motion and dynamicity. There are two kinds of transitions, 2D and 3D. 2D transforms are well-supported in modern browsers, while support for 3D transforms is currently limited.

2D transforms include translate (used to move elements along the X and Y axes), rotate, scale (zoom in or out), skewX and skewY (used to tilt an element), and matrix, which allows a transformation matrix to be applied for custom effects.

Transitions are used to create smooth movement between states of an element. They are similar to tweens in Flash. Transitions can change the color, size, position, or many other properties of an element. They can also be combined with transforms.

For example, in this Flickr Polaroid Stack, photos from Flickr are loaded and positioned randomly on a surface. Transitions are used to move the photos from offscreen to their random positions, and then to straighten and zoom each photo as it’s moused over.

Drawing and Animation with SVG and Canvas

There are two Open Web technologies for drawing and animation: SVG and Canvas. These two technologies are fundamentally different and each has its particular strengths and weaknesses.

SVG

Scalable Vector Graphics, or SVG, is an XML-based format for describing shapes and images.  It has been around for over 10 years, but only in recent years has it been integrated into browsers (previously it required a browser plugin). “Vector” means that the graphics are defined by a series of points and curves in space, rather than a grid of pixels. This makes SVG graphics unsuitable for photographs, but great for icons, text, and shapes.

SVG is also a declarative graphics language, meaning that individual objects and properties such as rectangles, lines, and color and gradient fills can be individually addressed and manipulated. This is similar to the DOM in HTML and makes animating SVG elements very easy. This example shows how SVG elements can be animated with Javascript to create a very Flash-like experience.

SVG is well-supported by modern Open Web-capable browsers, but it falls back surprisingly well on older Internet Explorer browsers thanks to a comparable Microsoft graphics language called VML. Libraries like Raphael make it relatively straightforward to use SVG graphics across multiple browsers.

Canvas

Apple introduced the canvas element as a proprietary element in Safari. Later it was released as an Open Web standard and adopted by other browser manufacturers. Where SVG is declarative, vector-based and has a DOM, Canvas is bitmap-based and completely flat. Unlike SVG, once elements are written to the canvas, the only way to draw something new is to clear the canvas (or part of the canvas) and draw it all again.

While complex SVG scenes can be very heavy and slow to render, canvases are small and light enough to deliver the high frame rates necessary for games and highly responsive applications. In many newer browsers, canvas is hardware-accelerated, meaning commands are drawn using the computer’s video card directly rather than by the CPU. Multiple canvases can also be drawn and composited together to speed up complex scene redrawing—for example, this multi-layered animated fishbowl using composited canvases or this Bkom robot game.

SVG and Canvas both offer viable ways to do advanced graphics and animation in Open Web-capable browsers. The primary drawback with using these technologies is the lack of tooling. While Flash offers a mature development platform, SVG and Canvas tools are relatively new and basic. A few of the toolkits out there for Open Web animation and interactivity include Adobe Edge, CreateJS, and Sencha Animator.

The Open Web is young, but already there are lots of widely-supported features that can be used to create great experiences in modern browsers today. In our final installment of this series, we’ll look at the future of the Open Web and explore some even more exciting features that are coming in the next couple of years.