HTML5 features template and HTML5 skeleton
Image via Wikipedia
With all the buzz about HTML5 its high time to release an official post on the subject and cement our intention to support the standard fully. It is impossible to ignore the possibilities of a single thin-client based development environment and common sets of tools for working with them. Add to that the fact that modern mobile web browsers are being designed with HTML5 and CSS3 rich features in mind, and you have a developer’s dream platform for reaching as many devices and operating systems as possible.
HTML5 could deliver on the promises that other languages and platforms such as:
- Java
(Applets in the browser, Swing GUIs on the desktop, MIDlets on Mobile) - Flash
(Flex RIAs on the web, AIR apps on desktop, FlashLite on Mobile)
and even - .NET
(ASP/Silverlight on the web, VB/C#.NET Windows programs on the desktop, .NET Compact Framework on Mobile)
all failed to truly deliver on!
To that end, here are two useful templates for developers to get started quickly with HTML5 and its new features:
First (and not very exciting), is a barebones HTML5 Skeleton
[snippet id=49961]
Next, a complete HTML5 layout with CSS3 transforms and demos for each of the 10 main features
<!DOCTYPE html>
<html lang="en" xml:lang="en-CA">
<head>
<meta charset="UTF-8" />
<meta name="description" content="HTML5 Skeleton" />
<meta name="keywords" content="HTML5,HTML,CSS3,CSS,XML,JavaScript" />
<meta name="author" content="Bryan Copeland" />
<title>HTML5 template (Audio, Video, Canvas/SVG, Geo-Location, WebMessaging, Offline DataStorage, Microdata, Semantics, CSS3)</title>
<!-- BEHAVIOR (JavaScript): include any cross-browser JS libraries such as jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- PRESENTATION (CSS3): include as many device-specific renderings as desired -->
<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/tv.css" media="tv" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" media="handheld" />
<!--[if !IE]>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 321px) and (max-width: 768px)" >
<link type="text/css" rel="stylesheet" href="css/projector.css" media="projection" />
<link type="text/css" rel="stylesheet" href="css/printer.css" media="print" />
<!-- CSS3 @font-face for stylized Typography -->
<link type="text/css" rel="stylesheet" href="css/font.css" /><!-- All screen sizes/types see Typography -->
<style type="text/css">
header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
body { text-align:center; }
img { border:0; }
#name { float:left; padding:0px 5px 0px 5px; font-family:'Irish Growler',Arial,serif; overflow:hidden; }
#links { list-style-type:none; }
#links li { float:left; border-left:1px solid gold; border-right:1px solid gold; padding:10px; font-family:Verdana,Arial,serif; font-size:90%; }
#links li:hover { background:#defabc; }
#content { display:table; text-align:center; margin-top:-10px; width:100%; }
#main { display:table-cell; padding:0px 10px 0px 10px; background-color:limegreen; border:1px solid gold; -webkit-border-radius:50px; -moz-border-radius:50px; -webkit-box-shadow: 5px 5px 8px #818181; -moz-box-shadow: 5px 5px 8px #818181; }
#sidebar { display:table-cell; width:40px; }
#storage { float:left; padding-left:15px; font-size:80%; }
#storage span { display:block; }
#contact { font-size:75%; }
.hidden { display:none; }
.clear { clear:both; }
.icon { vertical-align:middle; }
</style>
</head>
<body>
<div id="container">
<header id="name">
<h1 about="#bryan" itemprop="fn" title="My name is Bryan Copeland, and I think HTML5 rocks!">Bryan Copeland</h1>
</header>
<nav id="semantics" title="SEMANTICS">
<ul id="links">
<li><a href="http://bryancopeland.com" class="foaf:person">ME</a></li>
<li><a href="http://bcmoney-mobiletv.com" class="foaf:company">My Company</a></li>
<li><a href="http://xwave.com" class="cv:employer">My Employer</a></li>
<li><a href="http://bell.ca" class="biz:owner">Employer's Owner</a></li>
<li><a href="http://www.jdirving.com/" class="biz:client">Their Client</a></li>
<li><a href="http://www.brunswicknews.com/" class="biz:subsidiary">Client's Subsidiary</a></li>
<li><a href="http://www.telegraphjournal.com/" class="doap:project">Project</a></li>
</ul>
</nav>
<div class="clear"></div>
<div id="content">
<center>
<div id="main">
<section id="info">
<article title="CANVAS">
<canvas id="drawingboard" width="105" height="105">
</canvas>
</article>
<article title="AUDIO">
<audio id="audioclip" width="100" height="20" controls="controls" preload="auto">
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.wav" type="audio/x-wav" />
Download: <a href="audio.ogg">OGG</a>|<a href="audio.mp3">MP3</a>|<a href="audio.wav">WAV</a>
</audio>
</article>
<article title="VIDEO">
<video id="videoclip" width="320" height="240" controls="controls" poster="clouds.jpg">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
Download: <a href="video.ogv">OGG Vorbis</a>|<a href="video.mp4">MP4</a>|<a href="video.webm">WebM</a>
</video>
</article>
<article title="CROSS-DOMAIN MESSAGING">
<form>
<label for="message">Msg:</label> <input type="text" name="message" value="Enter Message" id="message" onclick="if(this.value=='Enter Message'){this.value='';}" />
<input type="submit" id="send" value="Send" />
<iframe id="iframe" src="http://www.bryancopeland.com/work/freelance/project/html5/postMessage.html" width="500" height="75"></iframe>
</form>
</article>
<article title="OFFLINE DATA STORAGE">
<label for="session">sessionStorage:</label> <input type="text" name="session" value="" id="session" />
<label for="local">localStorage:</label> <input type="text" name="local" value="" id="local" />
<input type="button" id="clear" value="Clear Storage" />
<div id="storage"></div>
</article>
<article id="geolocation" title="GEOLOCATION">
You are at: <span id="latitude" rel="lat"></span>; <span id="longitude" rel="lon"></span> <a id="geomap" href="http://maps.google.com?q=" onclick="window.open('http://maps.google.com?q='+$('#latitude').html()+','+$('#longitude').html(), 'googlemaps','toolbar=no,width=600,height=400,resizable=0'); return false;">Map</a>
</article>
<article title="DEVICE">
<span id="device" rel="orientation">No Device movement detected...</span>
</article>
</section>
</div>
</center>
<aside id="sidebar">
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-v-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png" width="38" height="330" alt="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
</aside>
</div>
<footer id="contact" title="MICRODATA">
<div id="me" itemscope itemtype="http://microformats.org/profile/hcard">
<img class="icon" itemprop="photo" alt="Me" title="Bryan Copeland @ Urasa Conference 2007 (Niigata, Japan)" src="http://bryancopeland.com/images/me.jpg" width="30" height="25" />
<span itemprop="org" itemscope>
<span itemprop="organization-name">BCmoney MobileTV</span> (<span itemprop="organization-unit">E-Business</span>)
</span>
<span itemprop="adr" itemscope>
<span id="latlon" class="hidden" itemprop="geo">45.2767082; -66.050242</span>
<span itemprop="street-address">210 Crown Street</span>
<span itemprop="locality">Saint John</span>,
<span itemprop="region">NB</span>
<span itemprop="postal-code">E2L 3V8</span><br/>
<span itemprop="country-name">Canada</span>
</span>
<span itemprop="tel" itemscope>
<span itemprop="type">Work</span> phone #: <span itemprop="value">+1 (506) 645-3237</span>.
</span>
<ins datetime="2011-03-01T17:30:00+01:00">
<span itemprop="rev" itemscope>
<meta itemprop="type" content="date-time" />
<meta itemprop="value" content="2011-03-01T17:30:00+01:00" />
</span>
Last Updated: 2011-03-01
</ins>
</div>
</footer>
</div>
<!-- additional scripts particularly those triggered after DOM (onload, onready) -->
<script type="text/javascript" src="js/html5utils.js"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////////
//Device API (FF, Safari and Chrome only... for now)
/////////////////////////////////////////////////////////
/* MozOrientation is used in FireFox on desktops with an accelerometer and Mobile devices with Fennick installed */
window.addEventListener("MozOrientation", function(e) {
/* 3 values: e.x, e.y, e.z */
if(e.x!=0 || e.y !=0) { $("#device").html("Hey, put me down!"); }
}, true);
/* deviceorientation is used for Chrome and Android */
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
if (a>=40||b>=40) { $("#device").html("Woah, not so fast!"); }
}, false);
/* iOS 4.2+ (official iPhone Device API) */
window.ondevicemotion = function(event) {
ax = event.accelerationIncludingGravity.x;
ay = event.accelerationIncludingGravity.y;
if (ax>=40||ay>=40) { $("#device").html("Woah, not so fast!"); }
}
//iOS 3.x (not supported) window.orientation returns a value that indicates whether iPhone is in portrait mode (0), landscape mode with the screen turned to the left (90), or landscape mode with the screen turned to the right (-90). */
window.onorientationchange = function() {
switch(window.orientation) {
case 0: //in portrait mode
$("#device").html("Now in portrait orientation");
break;
case 90: //in landscape mode (screen turned to the left)
$("#device").html("Now in landscape orientation (left)");
break;
case -90: //in landscape mode (screen turned to the right)
$("#device").html("Now in landscape orientation (right)");
break;
}
}
/////////////////////////////////////////////////////////
//Offline DataStorage
/////////////////////////////////////////////////////////
//DataStorage helper (non-jQuery)
function getStorage(type) {
var storage = window[type + 'Storage'], delta = 0, localOffline = document.createElement('span');
if (!window[type + 'Storage']) { return; }
if (storage.getItem('value')) {
delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
localOffline.innerHTML = type + ': ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
} else {
localOffline.innerHTML = type + ': empty';
}
localOffline.id = type+'Storage';
document.querySelector('#storage').appendChild(localOffline);
}
//Geo-Location helper
function geoLocate(position) {
$('#latitude').html(position.coords.latitude);
$('#longitude').html(position.coords.longitude);
$('#geomap').attr('href').append(position.coords.latitude+','+position.coords.longitude);
}
$(document).ready(function() {
/////////////////////////////////////////////////////////
//DataStorage (pre-load fields)
getStorage('session');
getStorage('local');
addEvent(document.querySelector('#session'), 'keyup', function () {
sessionStorage.setItem('value', this.value);
sessionStorage.setItem('timestamp', (new Date()).getTime());
document.getElementById('sessionStorage').innerHTML = 'session: ' + this.value;
});
addEvent(document.querySelector('#local'), 'keyup', function () {
localStorage.setItem('value', this.value);
localStorage.setItem('timestamp', (new Date()).getTime());
document.getElementById('localStorage').innerHTML = 'local: ' + this.value;
});
addEvent(document.querySelector('#clear'), 'click', function () {
sessionStorage.clear();
localStorage.clear();
document.querySelector('#storage').innerHTML = '';
getStorage('local');
getStorage('session');
});
$('#session').val(sessionStorage.getItem('value'));
$('#local').val(localStorage.getItem('value'));
/////////////////////////////////////////////////////////
//Geo-Location
/////////////////////////////////////////////////////////
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoLocate, function() { $("#geolocation").html("Geo-Location not allowed"); } );
}
else {
$("#geolocation").html("No Geo-Location support");
}
/////////////////////////////////////////////////////////
//Canvas drawing
/////////////////////////////////////////////////////////
var canvas = document.getElementById('drawingboard');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.beginPath(); // Draw shapes
ctx.arc(75,75,30,0,Math.PI*2,true); // Outer circle
ctx.moveTo(98,75);
ctx.arc(75,75,22,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
}
else {
$('#drawingboard').html('You need Safari or Firefox 1.5+ to see the canvas demo.');
}
/////////////////////////////////////////////////////////
//Web Messaging (cross-domain)
/////////////////////////////////////////////////////////
var win = document.getElementById("iframe").contentWindow;
addEvent(document.querySelector('form'), 'submit', function (e) {
win.postMessage( document.getElementById("message").value, "http://www.bryancopeland.com");
if (e.preventDefault) {
e.preventDefault();
}
// otherwise set the returnValue property of the original event to false (IE)
e.returnValue = false;
});
});
</script>
</body>
</html>
HTML5 has been officially renamed to HTML, just as the W3C has launched its HTML5 button generator and logo site to encourage the publicizing/evangelizing of HTML5 development efforts:
There are a large number of new web standards and initiatives trying to be tied into HTML5, and with good reason, because it would cement any standard’s importance in the open web and place it within the operational view and intellectual efforts of Google, Yahoo, Apple, Microsoft, Nokia, Mozilla, Opera, Research in Motion, and the countless other major companies and organizations developing, working with, or otherwise researching the “living” HTML specification.
Unfortunately though, this has also led to a large amount of confusion as to what exactly HTML5 is, what it isn’t and what its goals are. While it has been labeled many things including “Flash killer”, “Markup language for the Semantic Web”, “HTML + Multimedia”, and “Ian Hickson’s Frakenstein project”, it is quite simply a natural progression of HTML – the markup language that powers the World Wide Web – towards a richer and more interactive experience for information dissemination and retrieval.
It makes native not just the embedding, but also the playback of multimedia, through two of its most-hyped addtions, the <audio> and <video>.
Related Articles
- Best HTML5/CSS3 Presentation Frameworks (zoomzum.com)
- HTML5 Image Effects: Sepia (css.dzone.com)
- Introduction to HTML5 (slideshare.net)
- HTML5 Real-Time & Connectivity (marakana.com)
- HTML5: The Future of Web Development with IE9, IE10 and Windows 8 (slideshare.net)
- Google, Microsoft, Netflix want encrypted HTML5 media spec (electronista.com)
