HTML5 & The Web of Data

The fiddle shows the full separation of data, presentation, representation, style and style.

by davetaz

HTML

<header></header>
<summary></summary>
<button></button>
<section id="news"></section>
<data></data>

CSS

header {
    font-size: 2em;
    color: white;
    text-align: center;
    background: #900;
    padding: 0.2em;
}
summary {
    font-style:italic;
    padding-top: 2em;
    padding-bottom: 2em;
}
article:before {
    content:"\2022  ";
}

JavaScript

//DEFINE OUR DATA - Normally Loaded from elsewhere

var data = {};
data.header = "BBC News Aggregator";
data.summary = "This page lists the top 7 articles on the BBC News Feed";
data.button = "Update";
data.url = "http://users.ecs.soton.ac.uk/dt2/odi/news/";

// Get a json serialisation of our data into a variable called json
var json_string = JSON.stringify(data);
// $('data').html(json_string);

// Output our data on to our HTML serialisation
$('header').html(data.header);
$('summary').html(data.summary);
$('button').html(data.button);

// Advanced stuff: Load some data from BBC News Worldwide, using google reader to translate it to JSON so we can parse it easily.

load_news(data.url, false);

$('button').click(function() {
    load_news(data.url, false);
});

// This function loads the news items asynchronous, meaning our page will load and then display the news items when they are ready to be displayed. This is normally why you see a spinning loading icon. This is commonly known as an ajax request, feel free to lookup ajax on the web if you want to know more.

function load_news(url, json) {
    // Begin ajax request
    $.ajax({
        // Some setup
        method:'GET',
        async: false,
        // Load the requested url
        url: url,
        // use jsonp as data type as we are doing cross-domain requests, security reasons.
        timeout: 5000,
        // If successful we will get data back.
        success: function (data) {
            var html = '';
            // Iterate over each "item" in the data
            $.each(data.stories, function (index, item) {
                // Turn each article into an HTML5 article node
                html += "<article>" + item.title + "</article>";
            });
            if (!json) {
                // If we didn't want the raw json back then output the html
                $('#news').html(html);
            } else {
                // If we want to display the raw data, output this instead. 
          ...