2010-03-05 02:01:13 +01:00
< ? php
$demos = json_decode ( file_get_contents ( 'demos.json' ));
2011-02-22 22:20:55 +01:00
function support ( $support , $url ) {
2011-09-15 09:51:28 +02:00
$browsers = explode ( ' ' , 'ie firefox opera safari chrome' ); // big 5 - should I add iPhone (for geo, etc)?
2010-03-05 02:01:13 +01:00
2011-09-15 09:51:28 +02:00
$live = isset ( $support -> live ) ? explode ( ' ' , $support -> live ) : array ();
$nightly = isset ( $support -> nightly ) ? explode ( ' ' , $support -> nightly ) : array ();
2011-02-28 11:45:16 +01:00
2011-02-22 22:20:55 +01:00
$html = '<span title="unknown browser support" class="yourbrowser tag" id="test-' . $url . '"></span> ' ;
2011-02-28 11:45:16 +01:00
2010-03-05 02:01:13 +01:00
foreach ( $browsers as $browser ) {
$class = '' ;
if ( in_array ( $browser , $live )) {
$class .= ' live' ;
} else if ( in_array ( $browser , $nightly )) {
$class .= ' nightly' ;
} else {
$class .= ' none' ;
}
2011-02-28 11:45:16 +01:00
2010-10-19 21:07:30 +02:00
$html .= '<span title="' . trim ( $class ) . '" class="tag ' . $browser . $class . '">' . $browser . ':' . $class . '</span> ' ;
2010-03-05 02:01:13 +01:00
}
2011-02-28 11:45:16 +01:00
2010-03-05 02:01:13 +01:00
return $html ;
}
function spans ( $list ) {
2011-09-15 09:51:28 +02:00
$items = explode ( ' ' , $list );
2010-03-05 02:01:13 +01:00
$html = '' ;
foreach ( $items as $item ) {
2010-10-19 21:07:30 +02:00
$html .= '<span class="tag">' . $item . '</span> ' ;
2010-03-05 02:01:13 +01:00
}
2011-02-28 11:45:16 +01:00
2010-03-05 02:01:13 +01:00
return $html ;
}
?>
2010-02-03 09:59:46 +01:00
<! DOCTYPE html >
2011-01-17 23:06:05 +01:00
< html id = " home " lang = " en " >
2010-02-03 09:59:46 +01:00
< head >
< meta charset = utf - 8 />
< meta name = " viewport " content = " width=620 " />
2010-03-04 13:07:09 +01:00
< title > HTML5 Demos and Examples </ title >
2011-09-15 09:51:28 +02:00
< link rel = " stylesheet " href = " css/html5demos.css " />
2010-03-20 20:14:30 +01:00
< script src = " js/h5utils.js " ></ script >
2011-02-22 22:20:55 +01:00
< script src = " js/modernizr.custom.js " ></ script >
2010-02-03 09:59:46 +01:00
</ head >
< body >
< section id = " wrapper " >
2012-02-16 23:46:21 +01:00
< div id = " carbonads-container " >< div class = " carbonad " >< div id = " azcarbon " ></ div >< script type = " text/javascript " > var z = document . createElement ( " script " ); z . type = " text/javascript " ; z . async = true ; z . src = " http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT " ; var s = document . getElementsByTagName ( " script " )[ 0 ]; s . parentNode . insertBefore ( z , s ); </ script ></ div ></ div >
2010-02-03 09:59:46 +01:00
< header >
< h1 >< abbr > HTML </ abbr > 5 Demos and Examples </ h1 >
</ header >
< article >
2010-03-05 11:06:49 +01:00
< p >< abbr > HTML </ abbr > 5 experimentation and demos I ' ve hacked together . Click on the browser support icon or the technology tag to filter the demos ( the filter is an < code > OR </ code > filter ) .</ p >
2011-05-28 16:32:21 +02:00
< section >
2012-02-16 23:47:01 +01:00
< a href = " http://leftlogic.com/training?ref=html5demos.com#node " id = " promo " >
< p >< strong > Learn how to create real - time applications with HTML5 & amp ; Node . js </ strong ></ p >
< p > Two day workshop covering real - time HTML5 APIs and Node . js running in March in Brighton , UK . < u > Find out more and grab your ticket now .</ u ></ p >
2011-05-28 16:32:21 +02:00
</ a >
</ section >
2012-02-16 23:47:01 +01:00
< ? php /*
2010-08-05 19:44:07 +02:00
< section >
2010-10-19 21:07:30 +02:00
< a href = " http://introducinghtml5.com " id = " ih5 " >
2012-02-16 23:47:01 +01:00
< p >< strong > Introducing HTML5 </ strong > by Bruce Lawson & amp ; Remy Sharp is the first full length book dedicated to HTML5 .</ p >< p > Get it now and kick some HTML5 ass !</ p >
2010-08-05 19:44:07 +02:00
</ a >
</ section >
2012-02-16 23:47:01 +01:00
*/ ?>
2010-10-19 21:07:30 +02:00
< p id = " tags " class = " tags " >
2011-02-28 11:45:16 +01:00
2010-10-19 21:07:30 +02:00
</ p >
2010-03-05 02:01:13 +01:00
< table id = " demos " >
< thead >
2010-10-19 21:07:30 +02:00
< tr >
< th > Demo </ th >
< th > Support </ th >
2011-02-22 22:20:55 +01:00
< th > Technology </ th >
2010-10-19 21:07:30 +02:00
</ tr >
2010-03-05 02:01:13 +01:00
</ thead >
< tbody >
< ? php foreach ( $demos as $demo ) : ?>
< tr >
2011-09-15 09:51:28 +02:00
< td class = " demo " >< a href = " <?php echo $demo->url ?> " >< ? php echo $demo -> desc ?> </a><?php if (isset($demo->note)) { echo ' <small>' . $demo->note . '</small>'; }?></td>
< td class = " support " >< ? php echo support ( $demo -> support , $demo -> url ) ?> </td>
< td class = " tags " >< ? php echo spans ( $demo -> tags ) ?> </td>
2010-03-05 02:01:13 +01:00
</ tr >
< ? php endforeach ?>
</ tbody >
</ table >
2011-02-28 11:45:16 +01:00
2010-02-03 09:59:46 +01:00
< p > All content , code , video and audio is < a rel = " license " href = " http://creativecommons.org/licenses/by-sa/2.0/uk/ " > Creative Commons Share Alike 2.0 </ a ></ p >
</ article >
2011-01-17 23:06:05 +01:00
< a id = " html5badge " href = " http://www.w3.org/html/logo/ " >
2011-01-18 13:36:22 +01:00
< img src = " http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png " width = " 325 " height = " 64 " alt = " HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage " title = " HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage " >
2011-01-17 23:06:05 +01:00
</ a >
2011-02-28 11:45:16 +01:00
< footer >< a id = " built " href = " http://twitter.com/rem " >@ rem built this </ a ></ footer >
2010-02-03 09:59:46 +01:00
</ section >
2011-02-28 11:50:44 +01:00
< a href = " http://github.com/remy/html5demos " >< img style = " position: absolute; top: 0; left: 0; border: 0; " src = " http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png " alt = " Fork me on GitHub " /></ a >
2011-02-22 22:20:55 +01:00
< script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></ script >
2010-03-05 02:01:13 +01:00
< script >
2011-02-28 11:45:16 +01:00
( function () {
2010-03-05 02:01:13 +01:00
2011-02-28 11:45:16 +01:00
var tags = [];
$ ( document ) . delegate ( 'span.tag' , 'click' , function () {
var $tag = $ ( this ), tag = $tag . text (), type = $tag . closest ( 'td' ) . attr ( 'class' ) || 'tags' ;
2010-03-05 02:01:13 +01:00
2011-02-28 11:45:16 +01:00
if ( $tag . is ( '.selected' )) {
$ ( '.' + type + ' span:contains(' + tag + ')' ) . removeClass ( 'selected' );
} else {
$ ( '.' + type + ' span:contains(' + tag + ')' ) . addClass ( 'selected' );
}
2010-10-19 21:07:30 +02:00
2011-02-28 11:45:16 +01:00
// it's an AND filter
var $trs = $ ( '.' + type + ':has(span.selected)' ) . closest ( 'tr' );
if ( $trs . length ) {
$ ( 'tbody tr' ) . hide ();
$trs . show ();
} else {
$ ( 'tbody tr' ) . show ();
2011-02-22 22:20:55 +01:00
}
2011-02-28 11:45:16 +01:00
});
2010-03-05 02:01:13 +01:00
2011-02-28 11:45:16 +01:00
var html = [];
$ ( '.tags span.tag' ) . each ( function () {
var $tag = $ ( this ), tag = $tag . text ();
2010-10-19 21:07:30 +02:00
2011-02-28 11:45:16 +01:00
if ( ! tags [ tag ]) {
tags [ tag ] = true ;
html . push ( '<span class="tag">' + tag + '</span> ' );
2011-02-22 22:20:55 +01:00
}
2011-02-28 11:45:16 +01:00
});
$ ( '#tags' ) . append ( '<strong>Filter demos:</strong> ' + html . sort () . join ( '' ));
$ . getJSON ( 'demos.json' , function ( data ) {
var i = data . length , $test ;
while ( i -- ) {
if ( data [ i ] . test && ( new Function ( 'return ' + data [ i ] . test ))()) {
$ ( '#test-' + data [ i ] . url ) . addClass ( 'supported' ) . attr ( 'title' , 'your browser is supported' );
} else if ( data [ i ] . test ) {
$ ( '#test-' + data [ i ] . url ) . addClass ( 'not-supported' ) . attr ( 'title' , 'your browser is NOT supported' );
}
}
});
2011-02-22 22:20:55 +01:00
2010-03-05 02:01:13 +01:00
// $('tr td.demo').click(function () {
// window.location = $(this).find('a').attr('href');
// });
2011-02-28 11:45:16 +01:00
}());
2011-02-28 11:50:44 +01:00
2011-02-28 11:45:16 +01:00
var _gaq = [[ '_setAccount' , 'UA-1656750-18' ], [ '_trackPageview' ]];
( function ( d , t ) {
var g = d . createElement ( t ), s = d . getElementsByTagName ( t )[ 0 ];
g . async = 1 ;
g . src = '//www.google-analytics.com/ga.js' ;
s . parentNode . insertBefore ( g , s );
}( document , 'script' ));
2010-03-05 02:01:13 +01:00
</ script >
2010-02-03 09:59:46 +01:00
</ body >
</ html >