HTML5 Tutorial: An overview of HTML5 APIs
and supporting technologies

There are other developing web technologies related to the HTML5 specification on syntax. These techniques will help you perform tasks in the web browser and supported mobile devices that were not possible in previous versions of HTML.

What is an API?

APIs (Application Programming Interfaces) are a way to create applications using pre-built components and are not unique to web development, or even to scripting languages. Websites such as Twitter, YouTube and others provide APIs to the public so designers and developers can integrate features into their own websites (or for other purposes such as mobile or desktop applications). One of the main goals of an API is to standardize how certain mechanics work and to simplify otherwise complicated programming tasks. APIs are very significant in the world of HTML5 and there a number of them to explore, including Drag and Drop, Web storage, Microdata, and Geolocation, among others.

Knowing that the official documentation for these APIs is separate from the official documentation of HTML5 is the first step toward using them. Keep in mind that unless you are comfortable with the more technical side of web development, this documentation will not be intuitive at first. However, there are code examples here for you to examine.

Drag and Drop http://developers.whatwg.org/dnd.html#dnd

Web Storage http://dev.w3.org/html5/webstorage/#introduction

Microdata http://developers.whatwg.org/links.html#microdata

Geolocation http://dev.w3.org/geo/api/spec-source.html#introduction

Geolocation in action

Geolocation is an API that helps identify the web browser’s geographic location. This information is then used to send you relevant data based on your position. Version 3.5 of Firefox was one of the first browsers to use geolocation. An example of the usefulness of geolocation is to connect a web search with map data to help you locate restaurants within walking distance of your hotel. Instead of manually entering your address, a geolocation-enabled browser could deliver local results based on your location.

Geolocation is currently enabled in some modern browsers. For an example of how this feature works, follow the instructions in the next procedure to visit Flickr, the photo sharing site. (You need a browser that supports geolocation.)

Image

At the time of this writing, Firefox 3.5 and above and Safari 5 and above support Geolocation.

1 Open your geolocation-enabled browser and type the following URL: flickr.com/map. This page displays a map of photographs around the world that users have uploaded with metadata that tags their images with the geographical coordinates of the location. (This information can be entered manually or automatically by some cameras. The term for images with this metadata is geotagged.)

2 Click the Find My Location button at the top right side of the map. (You will not see this button if your browser does not support geolocation.)

Image

You will be prompted by your browser to share your location. To see geolocation in action, click Share or Allow. (Different browsers implement this differently.)

3 The Flickr map will update your geographic location. If there are geotagged images in your immediate area, you will see pink circles representing images on a local map. Additionally, a row of thumbnails representing these images appears at the bottom of the page.

Image

The geolocation-enabled map displays thumbnails of images taken in your surrounding location.

For the last few years, smartphones have provided the ability of connecting geographical or GPS data with the device’s browser or an application. When the geolocation feature becomes available to more web browsers, these benefits can be part of the desktop experience.

Web Workers

Web Workers is another API often grouped into the HTML5 family. Web Workers is a framework that addresses browser performance. When you access advanced web applications, such as mapping or applications that instantly generate charts and graphs, there are several processor-intensive computations that can slow down the performance of your application. Much of the slowdown occurs because there is competition between user interaction (clicking, dragging, and so on) and the need for the application to access resources (graphics, data, and more).

Web Workers are scripts that run in a separate thread. This separation means that processes, such as obtaining data from a database, occur independently from user behavior, which creates a more seamless environment for the user. Web Workers are in an early phase of development; at the time of this writing, there has been relatively little browser support.

Web storage

Web storage is an example of using pre-existing models of web technology in more powerful ways. Web storage improves browser cookies. Currently, browser cookies let websites store small pieces of data on your system so the site can save information for later use; for example, sites that recognize your login information when you return.

Cookies are a limited technology, and are not particularly easy for designers to use. Web storage updates the model to allow for greater storage space for modern web applications and makes the addition of storage features more accessible.

HTML5 provides two ways to store data: localStorage and sessionStorage. Data saved as localStorage is available to the browser at any point, even when the browser closes or the system is restarted. Data saved as sessionStorage is lost when the browser is closed.

An example of web storage currently in use is in Apple iPhones, which have a default storage space of five megabytes for data used in web applications. As this space begins to fill, you receive a prompt asking you to expand your storage.

Image

Web pages request user permission to use offline storage.

Continue to the next HTML5 Tutorial: CSS3 is not part of HTML5, but is closely related >