New Features in HTML 5

use the element article to reference external sources (map, time)
click me
[button] click me [/button] is an easy way to make buttons. (Substitute the < for the [ and you will have code.)

!DOCTYPE HTML
html manifest="cache-manifest"
..
event-source src="server.cgi"
(The event-source element is a new feature in HTML 5 that allows servers to continuously stream updates to a Web page.)
var online = navigator.onLine;
localStorage["status"] = "Idling.";

function renderNote(row) {
  // renders the note somewhere
}
function reportError(source, message) {
  // report error
}

function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', 
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}

function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}

The attribute takes a URI to a manifest, which specifies which files are to be cached. The manifest has a text/cache-manifest MIME type. A typical file looks like this:

CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png

NETWORK:
server.cgi

Offline Mode
With HTML 5, you can specify what resources your page will require and the browser will cache them so that the user can continue to use the page even if she gets disconnected from the internet. This wasn't a problem before AJAX came into existence as the page could not request for resources after it was loaded. However, today's webpages are designed to be sleek so that they load fast and then the additional resources are fetched asynchronously.

Local Database
HTML 5 has included a local database that will be persistent through your session. The advantage of this is that you can fetch the required data and dump it into the local database . The page there after won't need to query the server to get and update data. It will use the local database. Every now and then, the data from the local database is synced with the server. This reduces the load on the server and speeds up responsiveness of the application.

Native JSON
JSON, or JavaScript Simple Object Notation is a popular alternative to XML, which was almost the de-facto standard before the existence of JSON. Until HTML 5, you needed to include libraries to encode and decode JSON objects. Now, the JavaScript engine in that ships with HTML 5 has built-in support for encoding/decoding JSON objects.

Cross Document Messaging
Another interesting addition to HTML 5 is the ability to perform messaging between documents of the same site. A good use of this would be in a blogging tool. In one window, you create your post and in another window, you can see what the post would look like without having to refresh the page. When you save the draft of your post, it immediately updates the view window.

Cross Site XHR
One of the amazing implications of AJAX was to be able to not only fetch data from the server asynchronously, but to be able to get resources from other websites using the XMLHTTPRequest. As this wasn't part of HTML4, you needed to include a library to perform such an action. HTML 5 will have XMLHTTPRequest support built-in, so you won't need any library.

Multi-threaded JavaScript
A large portion of most web apps is written in JavaScript as it is the only client-side programming language available. One of the HTML 5 promises is that JavaScript will become a multi-threaded language so that it executes more efficiently. However, that only solves one part of the problem. Multithreading will speed up the processing time of JavaScript once it has loaded, but as you increase the number of lines of JavaScript, the pages take longer to load. To solve that problem, they have introduced an attribute called async to the ... element. It tells the browser that this script is not required when the page loads, so it can be fetched asynchronously even after the page has loaded. The syntax for this is:
script async src="jquery.js" /script

Continenteditable:

Movies

• Star Trek
• Up
• 9
• Inglorious Basterds
• Monsters and Aliens
• Partly Cloudy with a Chance of Meatballs
• Zombieland
• Men Who Stare at Goats

Music

• Dertybird
• Girls' drum band
• Albert and Gage
• Jitterbug Vipers
• Subdudes
• Bettysoo
• "The Voice" Fallon Franklin

Restaurants

• Blue Dahlia Bistro
• El Caribe
• Kim Phung
• Central Market Cafe
• Hyde Park Bar and Grill
• Chili's
• Waterloo
• Marisco's
• Serrano's
• Chuey's
• Joe's Crab Shack
• EZ's
• Angie's
• Justine's Brasserie
• Frank
• Juan in a Million
• East Side Cafe
• Vivo's
• Copa

Saturday 4th of September 2010