The Future of HTML5
As you have already HTML5future of beginseen in this book, HTML5 provides powerful programming features. We also discussed the history behind HTML5’s development and HTML5’s new plugin-free paradigm. In this chapter, we will look at where things are going. We will discuss some of the features that are not fully baked yet but hold tremendous promise.
Browser Support for HTML5
Adoption of HTML5 features HTML5browser support forBrowser supportfor HTML5is accelerating with each new browser update. Several of the features we covered have actually shipped in browsers while we wrote this book. HTML5 development in browsers is undeniably gaining tremendous momentum.
Today, many developers still struggle to develop consistent web applications that work with older browsers. Internet Explorer 6 represents the harshest of the legacy browsers in common use on the Internet today But even IE6 has a limited lifetime, as it becomes harder and harder to procure any operating system that supports it. In time, there will be close to zero users browsing the Web with IE6. More and more users of Internet Explorer are being upgraded to the latest versions. There will always be an oldest browser to contend with, but that bar rises as time passes; at the time of this writing, the market share of Internet Explorer 6 is under 10% and falling. Most users who upgrade go straight to a modern replacement. In time, the lowest common denominator will include HTML5 Video, Canvas, WebSocket, and whatever other features you may have to emulate today to reach a wider audience.
In this book, we covered features that are largely stable and shipping in multiple browsers. There are additional extensions to HTML and APIs currently in earlier stages of development. In this chapter, we will look at some of the upcoming features. Some are in early experimental stages, while others may see eventual standardization and wide availability with only minorHTML5browser support forbrowser supportfor HTML5 changes from their current state.
In this section, we’ll explore several exciting features that may appear in browsers in the near future. You probably won’t need to wait until 2022 for these, either. There will probably not be a formalized HTML6; the WHATWG has hinted that future development will simply beHTML5HTML definition referred to as “HTML.” Development will be incremental, with specific features and their specifications evolving individually, rather than as a consolidated effort. Browsers will take up features as they gain consensus, and the upcoming features might even be widely available in browsers well before HTML5 is set in stone. The community responsible for driving the Web forward is committed to evolving the platform to meet the needs of users and developers.
As you saw in
, you get a 2D drawing context from a
canvas elementcanvas element by calling
getContext("2d") on the element. Unsurprisingly, this leaves the door open for additional types of drawing contexts. WebGL also uses the
canvas element, but through a 3D context. Current implementations use experimental vendor prefixes (
webkit-3d, etc.) as the arguments to the
getContext() getContext() function call. In a WebGL-enabled build of Firefox, for example, you can get a 3D context by calling
getContext("moz-webgl") on a
canvas element. The API of the object returned by such a call to
getContext() is different from the 2D canvas equivalent, as this one provides OpenGL bindings instead of drawing operations. Rather than making calls to draw lines and fill shapes, the WebGL version of the canvas context manages textures and vertex buffers.
HTML in Three DimensionsHTML5three dimensions
WebGL, like the rest of HTML5, will be an integral part of the web platform. Because WebGL renders to a
canvas elementcanvas element, it is part of the document. You can position and transform 3D
canvas elements, just as you can place images or 2D canvases on a page. In fact, you can do anything you can do with any other
canvas element, including overlaying text and video and performing animations. Combining other document elements and a 3D canvas will make heads-up displays (HUDs)heads-up displays (HUDs) and mixed 2D and 3D interfaces much simpler to develop when compared to pure 3D display technologies. Imagine taking a 3D scene and using HTML markup to overlay a simple web user interface on it. Quite unlike the nonnative menus and controls found in many OpenGL applications, WebGL software will incorporate nicely styled HTML5 form elements with ease.
3D Shaders HTML53D shaders
Web HTML5device elementsapplications will need DevicesDevice elementaccess to multimedia hardware such as webcams, microphones, or attached storage devices. For this, there is already a proposed
device element to give web applications access to data streams from attached hardware. Of course, there are serious privacy implications, so not every script will be able to use your webcam at will. We will probably see a UI pattern of prompting for user permission as seen in the Geolocation and Storage APIs when an application requests elevated privileges. The obvious application forHTML5device elements webcams is video conferencing, but there are many other amazing possibilities for computer vision in web applications including augmented reality and head tracking.
Audio Data API
ProgrammableHTML5audio data API audio APIsaudio APIs will do for
<canvas> did for
<img>. Prior to the
canvas tag, images on the Web were largely opaque to scripts. Image creation and manipulation had to occur on the sidelines—namely, on the server. Now, there are tools for creating and manipulating visual media based on the
canvas element. Similarly, audio data APIs will enable music creation in HTML5 applications. This will help round out the content-creation capabilities available to web applications and move us closer to a self-hosting world of tools to create media on and for the Web. Imagine editing audio on the Web without having to leave the browser.
Simple playback of sounds can be done with the
<audio> element. However, any application that manipulates, analyzes, or generates sound on the fly needs a lower-level API. Text-to-speech, speech-to-speech, synthesizers, and music visualization aren’t possible without access to audio data.
We can expect the standard audio API to work well with microphone input from the data element as well as files included with audio tags. With
<device> and an audio data API, you may be able to make an HTML5 application that allows users to record and edit sound from within a page. Audio clips will be able to be stored in local browser storage and reused and combined with
canvas -based editing tools.
Presently, MozillaMozillaaudio data API has an experimental implementation available in nightly builds. The Mozilla audio data API could act as a starting point for standard cross-browser audio programming capabilities.
Touchscreen Device EventsHTML5touchscreen device events
As Web access shifts ever more from desktops and laptops to mobile phones and tablets, HTML5 is also continuing to adapt with changes in interaction handlingInteraction handlingTouchscreen device events. When Apple introduced the iPhone, it also introduced into its browser a set of special events that could be used to handle multitouch inputs and device rotation. Although these events have not yet been standardized, they are being picked up by other vendors of mobile devices. Learning them today will allow you to optimize your web applications for the most popular devices now.
The simplest event to handle on a mobile device is the orientation eventOrientation event. The orientationHTML5orientation event event can be added to the document body:
In the event handler for the orientation change, your code can reference the
window.orientation propertywindow.orientation property. This property will give one of the rotation values shown in Table
13-1, which is relative to the orientation the device was in when the page was initially loaded.
|0||The page is being held in the same orientation as its original load.|
|-90||The device has been rotated 90 degrees clockwise (right) since the original load.|
|180||The device has been rotated upside-down since the original page load.|
|90||The device has been rotated 90 degrees counter-clockwise (left) since the page was originally loaded.|
Once the orientation isOrientation event known, you can choose to adjust the content accordingly.
The next type ofGesturesEvent handlersfor gestures event supportedHTML5gesture events by mobile devices is a high-level event known as the gesture. Consider gesture events as representing a multitouch change in size or rotation. This is usually performed when the user places two or more fingers on the screen simultaneously and pinches or twists. A twist represents a rotation, while a pinch in or out represents a zoom out or in, respectively. To receive gesture events, your code needs to register one of the handlers shown in Table 13-2.
|ongesturestart||A user has placed multiple fingers on the screen and has begun a movement.|
|ongesturechange||The user is in the process of moving multiple fingers in a scale or rotation.|
|ongestureend||The user has completed the scale or rotation by removing fingers.|
During the gesture, the event handler is free to check the rotation and scale properties of the corresponding event and update the display accordingly. Listing 13-1 shows an example usage of the gesture handlers.
Gesture events are particularlyGesturesEvent handlersfor gestures appropriate in applications that need to manipulate objects or displays, such as in diagramming tools or navigation tools.
For those cases where you need low-level control over device events, the HTML5touch eventstouch eventsTouch events provide as much information as you will likely need. Table 13-3 shows the different touch events.
|ontouchstart event handler||A finger has been placed on the surface of the touch device. Multitouch events will occur as more fingers are placed on the device.|
|ontouchmove event handler||One or more of the fingers on the device has moved its location in a drag operation.|
|ontouchend event handler||One or more fingers have been lifted away from the device screen.|
|ontouchcancel event handler||An unexpected interruption has stopped the touch operations.|
Unlike the other mobile device events, theHTML5touch events touch events need to represent that there are multiple points of data—the many potential fingers—present at the same time. As such, Touch eventsthe API for touch handling is a little bit more complex as shown in Listing 13-2.
You may find that the device’s native event handling interferes with your handling of the HTML5touch eventstouch and gesture events. In those cases, you should make the following call:
This overrides the behavior of the default browser interface and handles the event yourself. Until the mobile events are standardized, it is recommended that you consult the documentation of the Touch eventsdevices you are targeting with your application.
Peer-to-Peer NetworkingHTML5peer-to-peer networking
We haven’t seen thePeer-to-peer (P2P) networking end of advanced networking in web applications either. With both HTTP and WebSocket, there is a client (the browser or other user agent) and a server (the host of the URL). Peer-to-peer (P2P) networking allows clients to communicate directly. This is often more efficient than sending all data through a server. Efficiency, of course, reduces hosting costs and improves application performance. P2P should make for faster multiplayer games and collaboration software.
Another immediate application for P2P combined with the
device element is efficient video chat in HTML5. In peer-to-peer video chat, conversation partners would be able to send data directly to each other without routing through a central server. Outside of HTML5, P2P video chat has been wildly popular in applications like Skype. Because of the high bandwidth required by streaming video, it is likely that neither of those applications would have been possible without peer-to-peer communication.
Browser vendors are already experimenting with P2P networking, such as Opera’s Unite technology, which hosts a simplified web server directly in the browser. Opera Unite lets users create and expose services to their peers for chatting, file sharing, and document collaboration.
Of course, P2P networking Peer-to-peer (P2P) networkingfor the web will require a protocol that takes security and network intermediaries into consideration as well as an API for developers to program against.
Google feels confident enough about the continuing evolution of HTML that it has announced the imminent release of theHTML5Google Chrome Google Chrome operating system, a streamlined operating system built around a browser and media player. Google’s operating system aims to include enough functionality using HTML APIs to provide a compelling user experience where applications are delivered using the standardized web infrastructure. Similarly, Microsoft has announced that Windows 8 will not support any plugins in the new Metro mode, including the company’s own Silverlight plugin.
In this book, you have learned how to use powerful HTML5 APIs. Use them wisely!
In this final chapter, we have given you a glimpse of some of the things that are coming, such as 3D graphics, the new device element, touch events, and P2P networking. Development of HTML5 shows no sign of slowing down and will be very exciting to watch.
Think back for a minute. For those of you who have been surfing the Web, or perhaps even developing for it for ten years or more, consider how far HTML technology has come in just the last few years. Ten years ago, “professional HTML programming” meant learning to use the new features of HTML 4. Cutting edge developers at the time were just discovering dynamic page updates and
XMLHttpRequest s. The term “Ajax” was still years from introduction, even if the techniques Ajax described were starting to gain traction. Much of the professional programming in browsers was written to wrangle frames and manipulate image maps.
Today, functions that took pages of script can be performed with just markup. Multiple new methods for communication and interaction are now available to all those willing to download one of the many free HTML5 browsers, crack open their favorite text editors, and try their hands at professional HTML5 programming.
We hope you have enjoyed this HTML5future of endexploration of web development, and we hope it has inspired your creativity. We look forward to writing about the innovations you create using HTML5 a decade from now.