Thursday, June 26, 2014

HTML5 - Part 4

Go back to HTML5 - Part 3

New APIs

With HTML5, the W3C has added several key specifications for application programming interfaces (APIs) that enable HTML to work more seamlessly with JavaScript. Let’s take a brief look at a few of the more notable features now.

Multitasking

These days, it seems everyone wants to accomplish more, and HTML is no exception. However, up until HTML5, JavaScript was limited to handling a single task at once in a web page. But with the new web workers included in HTML5, JavaScript can now handle more than a single activity without affecting the user interface.

For example, you can now have multiple JavaScripts running, each one set up to handle a different task in the page. These web workers prevent the added tasks from slowing down or causing errors in the browser. Here’s how a new worker is called from within the JavaScript:
var worker = new Worker(‘my_task.js’);
Obviously this won’t make a whole lot of sense to you if you have never used Javascript, but if you plan to continue with web development, you will undoubtedly dabble a bit in JavaScript at some point. To that end,
it’s important to understand that this option exists.Learn more here:
http://www.html5rocks.com/en/tutorials/workers/basics

Storage

HTML5 also creates two new methods for sites to store data. Up until now, the web cookie was really the primary storage mechanism for web developers. Cookies have been a source of frustration for many years, due to privacy and security concerns, page slowdowns, and limited capacities.

By contrast, the new storage options – local storage and session storage – have increased storage capacities, fewer privacy or security concerns, and rarely affect the speed of the site (except to make it faster than cookie-based sites). In addition, because session storage is tied to a specific browser instance, web developers are finally able to run a single script in multiple browser windows at the same time.

To help you understand what all of these new features mean, let’s use an analogy from real life. Suppose you needed to make two purchases at the grocery store (one for your family and one for a neighbor). It takes longer to have one single clerk ring up the two orders separately, right? But you need the orders rung up separately so you can pay with two different methods or at least receive two different receipts.

With these new storage capabilities, it’d be like the clerk first ringing up your order, then putting it into temporary “storage” while the second order was rung up. Then, you could pay for them both at the same time, with whatever method you chose. Or, with a web worker, you could actually have both orders rung up at the same time, with two different “virtual” clerks. These new APIs open lots of doors for web developers to make sites more efficient and user-friendly.

Offline

To take these storage capabilities one step further, let’s consider how HTML5’s offline caching options are transforming the Web. Until now, we’ve always considered the phrases “using the web” and “being online” to be pretty synonymous. But what if you could take the web offline?

There are a lot of new sites that offer users the ability to interact with their content even when not connected to the Web. For example, users can download instances of games to play offline or online (depending on the current connection). Other sites allow us to maintain calendars and track tasks even when our internet connection isn’t currently active. Thanks to the storage options we just mentioned, the changed activities can simply be uploaded once the connection is resumed. Learn more about these features at
http://www.html5rocks.com/en/features/offline

Geolocation

My favorite new API offers the ability to handle geolocation. For example, have you ever been asked for permission to use your location while visiting a web site? If so, you’ve already encountered this great new feature of HTML5 in action.

 
Above shows an example where the user is asked to grant permission for the web site to find and use my current location.

After clicking Share Location, the browser tries to identify my location using one of a few common methods:
• Using longitude and latitude coordinates (pulled from the device’s GPS, if it has one)
• Triangulating the location based on Wi-Fi signals
• Interpreting graphical data from IP addresses

Once my location is known, any of a variety of useful tasks can be performed on the web page. For example, the web developer could simply display my current location on a map or it could show all of the locations for a particular restaurant within a 30-mile radius (as shown in below), and even provide directions to the closet location.


Geolocation opens up a ton of possibilities for new interactions between site owners and their users.

As with all of these new APIs, a combination of HTML and JavaScript is required to take advantage of the geolocation options. But to give you a glimpse of what this might look like in terms of code, here’s how you might code a page intended to show the user’s location on a map.

Note that these new APIs cannot be tested locally (on your personal computer), but must be uploaded to a
live server in order to be tested.

Next - HTML5 - Final

No comments: