Browser Database Storage HTML 5

The key-value Storage API is great for persisting data, but what about indexed storage that can be queried? HTML 5 applications will have access to indexed databases as well. The exact details of the database APIs are still solidifying, and there are multiple proposals. 

Peer-to-Peer Networking

We haven’t seen the 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.

Gestures

The next type of event supported 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

Event Handler	Description
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.

Touchscreen Device Events

As Web access shifts ever more from desktops and laptops to mobile phones and tablets, HTML 5 is also continuing to adapt with changes in interaction handling. 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. 

Video Improvements

Earlier in this book, we described in detail the current capabilities of the <video> element. While there is still no required video codec specified in HTML 5, Google recently released WebM, a high-quality, royalty-free video codec for the Web. Although not all vendors have agreed to support WebM yet, there is significant momentum behind the format.

Audio Data API

Programmable audio APIs will do for <audio> what <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.

3D Shaders

WebGL is a binding for OpenGL ES 2 in JavaScript, so it uses the programmable graphics pipeline that is standardized in OpenGL, including shaders. Shaders allow highly flexible rendering effects to be applied to a 3D scene, increasing the realism of the display. WebGL shaders are written in GL Shading Language (GLSL). This adds yet another single-purpose language to the web stack. An HTML 5 application with WebGL consists of HTML for structure, CSS for style, JavaScript for logic, and GLSL for shaders. Developers can transfer their knowledge of OpenGL shaders to a similar API in a web environment.

HTML in Three Dimensions

WebGL, like the rest of HTML 5, will be an integral part of the web platform. Because WebGL renders to a canvas 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.

What is WebGL

WebGL is an API for 3D graphics on the Web. Historically, several browser vendors including Mozilla, Opera, and Google have worked on separate experimental 3D APIs for JavaScript. Today, WebGL is progressing along a path toward standardization and wide availability across HTML5 browsers. The standardization process is taking place with browser vendors and

The Khronos Group, the body responsible for OpenGL, a cross-platform 3D drawing standard created in 1992. OpenGL, currently at specification version 4.0, is widely used in gaming and computer-aided design applications as a counterpart and competitor to Microsoft’s Direct3D. 

Add Geolocation Tracking Code in HTML 5

Here is the code:

/*
* Track and report the current location
*/

var handlePositionUpdate = function(e) {
var latitude = e.coords.latitude;
var longitude = e.coords.longitude;
log("Position update:", latitude, longitude);
if(navigator.onLine) {
uploadLocations(latitude, longitude);
}
storeLocation(latitude, longitude);
}
var handlePositionError = function(e) {
log("Position error");
}
var uploadLocations = function(latitude, longitude) {
var request = new XMLHttpRequest();
request.open("POST", "http://geodata.example.net:8000/geoupload", true);
request.send(localStorage.locations);
}
var geolocationConfig = {"maximumAge":20000};
navigator.geolocation.watchPosition(handlePositionUpdate,
handlePositionError,
geolocationConfig);

HTML 5 Offline Web Applications

As more application move to the Web, it is tempting to assume 24/7 uninterrupted connectivity for all users, but the reality of the Internet is that interruptions happen and, in situations like air travel, can happen predictably for several hours at a time.

Intermittent connectivity has been the Achilles’ heel of network computing systems. If your applications depend on communication with remote hosts, and those hosts are unreachable, you’re out of luck. However, when you do have an Internet connection, web applications can always be up-to-date, because the code loads from a remote location on each use.

HTML 5 Web Workers

Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it. The URL for the JavaScript file can be a relative or absolute URL with the same origin (the same scheme, host, and port) as the main page:

worker = new Worker("echoWorker.js");

Loading and Executing Additional JavaScript

New Form Attributes and Functions - PART 2

The min and max Attributes

As seen before in our example for <input type="range">, the min and max attributes allow a numerical input to be constrained to minimum and maximum values. One, both, or neither of these attributes can be provided as necessary, and the input control should adjust accordingly to increase or decrease the range of acceptable values. For example, to create a range control representing a level of confidence in ability from zero% to 100%, the following code could be used as follows:

<input id="confidence" name="level" type="range" min="0" max="100" value="0">

New Form Attributes and Functions - PART 1

First, we’ll consider new attributes, functions, and a few elements that did not previously exist in earlier versions of HTML. Like the new input types, it is generally safe to use these attributes today, whether or not your target browser supports them. This is because the attributes will be safely ignored by any browser on the market today if the browser does not understand them.

Using the HTML5 Forms API

• Forms should still be encapsulated in a <form> element where the basic submission attributes are set.

• Forms still send the values of the controls to the server when the user or the application programmer submits the page.

• All of the familiar form controls—text fields, radio buttons, check boxes, and so on—are still present and working as before (albeit with some new features)

• Form controls are still fully scriptable for those who wish to write their own modifiers and handlers.

Declaring Your Media Element

For the very simplest example (the example file audio.html), let’s create a page that shows an audio player for a soothing, satisfying, and very public domain audio clip: Shontelle "Impossible":

<!DOCTYPE html>

<html>

<title>HTML5 Audio </title>

<audio controls src="Beyonce_Halo.ogg">

An audio clip from Beyonce.

</audio>

</html>

Using the HTML5 Audio and Video APIs

There are two main benefits to using these HTML 5 media tags over previous video-embedding techniques usually videos embedded using the Flash, QuickTime, or Windows Media plugins that aim to make life easier for users and developers:

HTML 5 Audio and Video Restrictions

There are a few things that are not supported in the HTML5 audio and video specification:

• Streaming audio and video. That is, there is currently no standard for bitrate switching in HTML 5 video; only full media files are supported by current implementations. However, there are aspects of the spec that are designed to support streaming media in the future once the formats are supported.

HTML 5 Audio and Video

Some of the popular video container formats include the following:

• Audio Video Interleave (.avi)
• Flash Video (.flv)
• MPEG 4 (.mp4)
• Matroska (.mkv)
• Ogg (.ogv)

Audio and Video Codecs

HTML 5 Canvas API

When you use a canvas element in your web page, it creates a rectangular area on the page. By default, this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set other attributes for your canvas element. A basic canvas element:

<canvas> </canvas>