Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

 

Please click “Read More” to see the full HTML5 code.

To render what you see above you will need the following code:
[stextbox id="alert" caption="Status monitoring" color="ffffff" ccolor="ffffff"]Network monitoring:

<code<<!DOCTYPE html></code>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>HTML5 Demo: online connectivity monitoring</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: #F4F4F4;
margin: 0;
margin-top: 40px;
padding: 0;
}

section, header, footer {
display: block;
}

#wrapper {
width: 550px;
margin: 0 auto;
background: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}

h1 {
padding-top: 10px;
}

h2 {
font-size: 100%;
font-style: italic;
}

header,
article > p,
article > h3,
article > code,
footer a,
footer p {
margin: 20px;
}

footer > * {
margin: 20px;
color: #999;
}

#status {
padding: 5px;
color: #fff;
background: #ccc;
}

#status.offline {
background: #c00;
}

#status.online {
background: #0c0;
}

</style>
<script>
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while (i–){document.createElement(e[i])}})()
</script>
<script>
function online() {
var status = document.querySelector(‘#status’);
if (status) {
status.className = navigator.onLine ? ‘online’ : ‘offline';
status.innerHTML = navigator.onLine ? ‘online’ : ‘offline';
}
}

document.addEventListener(‘DOMContentLoaded’, online, true);
window.addEventListener(‘online’, online, true);
window.addEventListener(‘offline’, online, true);

</script>
</head>
<body>
<section id=”wrapper”>
<header>

<h1>Status Monitoring</h1>
</header>
<article>
<p>Current network status: <span id=”status”>checking…</span></p>
</article>
<footer><a href=”http:html5tutorials.net/”>HTML5 Tutorial</a></footer>
</section>

<script>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script>
try {
var pageTracker = _gat._getTracker(“UA-1656750-18″);
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>[/stextbox]

share save 256 24 html5 monitoring