Channels ▼
RSS

Tools

The Arrival of HTML 5


Offline Potential

Some time ago, a new specification for client-side database support with interesting applications was introduced. While this feature had vast potential, it has been excluded from current specification drafts due to insufficient interest from vendors which use various SQL back-ends. As such, the only offline feature currently available in HTML 5 is flexible online/offline resources management using cache manifests.

Cache manifests allow an author of a document to specify which referenced resources must be cached in browser data store (e.g., static images, external CSS and JavaScript files) and which must be retrieved from a server (e.g., time-sensitive data like stock price graphs, responses from web services invoked from within JavaScript). The manifest also provides means for specifying fallback offline replacements for resources which must not be cached.

This mechanism gives the ability to compose HTML documents which can be viewed offline. It also enables an explicit notification to a user that some functionality is not available in offline mode. For example, given the web page with stock graph:


<!DOCTYPE HTML>
<html manifest="stock-graph.manifest">
 <head>
  <title>Stock Graph</title>
  <script src="js/stock-graph.js"></script>
  <link rel="stylesheet" href="style/stock-graph.css">
 </head>
 <body>
   <img src="img/logo.jpg" />

   Data: <img src="api/stock-graph.jpg" />
 </body>
</html>

The following cache manifest (stock-graph.manifest) specifies the caching policy for the example presented above (cache everything except the stock price graph that is replaced by another image when offline):


CACHE MANIFEST

# cacheable resources:
CACHE:
js/stock-graph.js 
style/stock-graph.css
img/logo.jpg

# non-cacheable resources:
NETWORK:
api/stock-graph.jpg 

# offline replacements for non-cacheable resources:
FALLBACK:
api/stock-graph.jpg img/stock-graph-unavailable.jpg

Let Us Not Reinvent the Wheel

Some solutions which were previously implemented in web pages by independent developers using JavaScript code have now become embedded in browsers. These integrated solutions include drag-and-drop mechanisms, history navigation, data validation in forms and new types of "input" elements, among others. These innovations enrich user interactions and make dynamic behavioral programming simpler.

Let's start with an overview of drag-and-drop support. Before HTML 5, drag-and-drop support was tough task for those who wanted to implement it from scratch (of course there are JavaScript libraries which significantly simplify the task). HTML 5 makes drag-and-drop simple by providing draggable attributes to mark elements which are draggable and several useful callback functions for elements being dragged:

  • Dragstart: Stores data from objects being dragged in a specific DragEvent event.
  • Dragend: Handles the end of the drag process. (e.g. removes the moved element from DOM) Drop target can be any element that handles the following 3 events:
  • Dragenter: Determines whether to accept or ignore an element being dragged.
  • Dragover: Specifies the visual effect that notifies a user when the element is dragged over the drop target.
  • Drop: Handles the drop.

A working drag-and-drop example that can be found in HTML 5 or in dedicated articles is lengthy and may seem complex at first sight, but this is expected since drag-and-drop is one of the most complex features in graphical UI development.

Another important feature of HTML 5 is the updated HTML browsing session history navigation API. The window.history object now allows users to traverse through the history, modify historical entries from JavaScript and remembers the state of the current document on a client. Modification of the state entries allows changing the current URL, as well as the title, without reloading the page. This becomes especially handy in AJAX applications where a page is not reloaded but a user performs some operations on it, such as retrieving data and page content changes. Changing the URL allows encoding the current state of the page in the URL (that is remembered by a browser) and restoring the state automatically (by processing URL) when the user navigates back to this page. Moreover, the history.pushState() method allows recollection of the state (arbitrary JavaScript object) on the client and restoration of it in JavaScript by handling the window.popstate event (this feature can be used even without changing the URL).

The next feature we discuss is the major upgrade of HTML forms. HTML 5 specification introduces many new types of inputs and powerful client-side validation methods. HTML 4 had basic input elements such as text input, combo box, checkbox, etc. However, in real life application developers frequently need other types of inputs for entering colors, dates, time, numeric ranges, phones, emails and URLs. Thus a user is forced to enter all these types of values as a text, a process application that is anything but user-friendly. There are third-party JavaScript libraries which provide custom controls (constructed from standard ones) for such data, however they complicate development and reduce overall performance. Moreover, some very useful features cannot be implemented by third-party libraries because they do not have access to the platform. For example, the following which make entering data much easier:

  • Open the user's address book and let him/her choose email addresses and phone numbers.
  • Allow a user to browse through the History and select a URL or copy the URL of the page loaded in next tab.
  • Show a color picker that is developed for a specific platform taking into account its characteristics (e.g. small screen, input method, touch screen).
  • Popup special virtual keyboard specific for input type on touch screen smart phones.

Now, all of the above mentioned features have become implementable thanks to previously introduced input types.

Forms validation is another major enhancement attributed to HTML 5. Depending on input type, the developer can specify different common constraints: required (i.e. a field becomes mandatory), pattern, list of allowable values, length restriction and maximum and minimum numeric values. It is also worth mentioning the new placeholder attribute that enables showing of hints or examples of a value in the input before any value is entered (a browser may indicate such text with a certain color or font).

Below is an example of a form with new types of inputs, validations and placeholders:


<form method="post"
      action="/addContact">
 <p><label>Name: <input name="name" required></label></p>
 <p><label>Telephone: <input type="tel" name="tel"></label></p>
 <p><label>E-mail: <input type="email" name="email"
           placeholder="email@example.com" required></label></p>
 <p><label>Birthday: <input type="date" name="dob" 
           max="2010-01-01"></label></p>
 <button type="submit" name="submit">Send</button>
</form>

Unfortunately, no browser supported all of these input types and features when this text went to press. Below you can see examples of how these advanced controls are rendered in Opera 10.53 (the page http://www.miketaylr.com/code/html5-forms-ui-support.html has been specifically developed for testing support of new input types):

Figure 1: HTML5 Controls in Opera.

Figure 2: Opera's native date picker.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video