Posted By

bcmoney on 03/03/11


Tagged

template html jquery semantics CSS3 skeleton storage multimedia messaging html5 microdata geo-location


Versions (?)

HTML5 features template


 / Published in: HTML
 

URL: http://bcmoney-mobiletv.com/blog/2011/03/02/html5-feature-template-and-barebones-html5-skeleton/

More complete version of the basic HTML5 skeleton showing all of the main features of HTML5 (video, audio, semantic tags, microdata, geo-location, offline data storage, cross-domain web messaging)

  1. <!DOCTYPE html>
  2. <html lang="en-CA" xml:lang="en-CA">
  3. <meta charset="UTF-8" />
  4. <meta name="description" content="HTML5 Skeleton" />
  5. <meta name="keywords" content="HTML5,HTML,CSS3,CSS,XML,JavaScript" />
  6. <meta name="author" content="Bryan Copeland" />
  7. <title>HTML5 template (Audio, Video, Canvas/SVG, Geo-Location, WebMessaging, Offline DataStorage, Microdata, Semantics, CSS3)</title>
  8. <!-- BEHAVIOR (JavaScript): include any cross-browser JS libraries such as jQuery -->
  9. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  10. <!--[if lt IE 9]>
  11. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12. <![endif]-->
  13. <!-- PRESENTATION (CSS3): include as many device-specific renderings as desired -->
  14. <link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
  15. <link type="text/css" rel="stylesheet" href="css/tv.css" media="tv" />
  16. <link type="text/css" rel="stylesheet" href="css/mobile.css" media="handheld" />
  17. <!--[if !IE]>
  18. <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
  19. <![endif]-->
  20. <link type="text/css" rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 321px) and (max-width: 768px)" >
  21. <link type="text/css" rel="stylesheet" href="css/projector.css" media="projection" />
  22. <link type="text/css" rel="stylesheet" href="css/printer.css" media="print" />
  23. <!-- CSS3 @font-face for stylized Typography -->
  24. <link type="text/css" rel="stylesheet" href="css/font.css" /><!-- All screen sizes/types see Typography -->
  25. <style type="text/css">
  26. header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
  27. a { text-decoration:none; color:#363636; font-weight:bold; }
  28. img { border:0; }
  29. ul { margin:0; padding:0; }
  30. #container { text-align:center; }
  31. #name { float:left; text-align:center; padding:0px 5px 0px 5px; font-family:'Irish Growler',Arial,serif; overflow:hidden; }
  32. #name:hover { color:#0f0; text-shadow:2px 2px 2px #000; }
  33.  
  34. ul#links li { list-style:none; float:left; text-align:center; height:39px; background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background:-moz-radial-gradient(center 40px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); }
  35. ul#links li a { display:block; font-family:'Arial Narrow',serif; background:#606060; line-height:39px; padding:0 20px; border-left:1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(0,0,0,0.1); text-align:center; background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); -webkit-transition-property:background; -webkit-transition-duration: 700ms; -moz-transition-property:background; -moz-transition-duration:700ms; }
  36. ul#links li a:hover { background:transparent none; text-shadow:2px 2px 2px #000; }
  37. ul#link li.active a { background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background:-moz-radial-gradient(center 40px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); }
  38.  
  39. #content { margin-left:auto; margin-right:auto; text-align:center; display:table; margin-top:-10px; }
  40. #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; }
  41. #sidebar { padding-left:20px; display:table-cell; width:40px; }
  42. #storage { float:left; padding-left:15px; font-size:80%; }
  43. #storage span { display:block; }
  44. #contact { font-size:75%; text-align:center; }
  45. .hidden { display:none; }
  46. .clear { clear:both; }
  47. .icon { vertical-align:middle; }
  48. </style>
  49. </head>
  50. <div id="container">
  51. <header id="name">
  52. <h1 data-about="#bryan" data-itemprop="fn">Bryan Copeland</h1>
  53. </header>
  54. <nav id="semantics" title="SEMANTICS">
  55. <ul id="links">
  56. <li class="active"><a href="http://bryancopeland.com" class="foaf:person" title="My name is Bryan Copeland, and I think HTML5 rocks!">ME</a></li>
  57. <li><a href="http://bcmoney-mobiletv.com" class="foaf:company" title="BCmoney MobileTV, LLC.">My Company</a></li>
  58. <li><a href="http://xwave.com" class="cv:employer" title="Xwave">My Employer</a></li>
  59. <li><a href="http://bell.ca" class="biz:owner" title="Bell">Employer's Owner</a></li>
  60. <li><a href="http://www.jdirving.com/" class="biz:client" title="J.D. Irving">Their Client</a></li>
  61. <li><a href="http://www.brunswicknews.com/" class="biz:subsidiary" title="Brunswick News, inc.">Client's Subsidiary</a></li>
  62. <li><a href="http://www.telegraphjournal.com/" class="doap:project" title="Telegraph-Journal">Project</a></li>
  63. </ul>
  64. </nav>
  65. <div class="clear"></div>
  66. <div id="content">
  67. <div id="main">
  68. <section id="info">
  69. <article title="CANVAS">
  70. <canvas id="drawingboard" width="105" height="105">
  71. <img src="smiley.png" alt="Smiley" />
  72. </canvas>
  73. </article>
  74. <article title="AUDIO">
  75. <audio id="audioclip" controls="controls" preload="auto">
  76. <source src="audio.mp3" type="audio/mpeg" />
  77. <source src="audio.ogg" type="audio/ogg" />
  78. <source src="audio.wav" type="audio/x-wav" />
  79. Download: <a href="audio.ogg">OGG</a>|<a href="audio.mp3">MP3</a>|<a href="audio.wav">WAV</a>
  80. </audio>
  81. </article>
  82. <article title="VIDEO">
  83. <video id="videoclip" width="320" height="240" controls="controls" poster="clouds.jpg">
  84. <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  85. <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  86. <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
  87. Download: <a href="video.ogv">OGG Vorbis</a>|<a href="video.mp4">MP4</a>|<a href="video.webm">WebM</a>
  88. </video>
  89. </article>
  90. <article title="CROSS-DOMAIN MESSAGING">
  91. <form>
  92. <label for="message">Msg:</label> <input type="text" name="message" value="Enter Message" id="message" onclick="if(this.value=='Enter Message'){this.value='';}" />
  93. <input type="submit" id="send" value="Send" />
  94. <iframe id="iframe" src="http://www.bryancopeland.com/work/freelance/project/html5/postMessage.html" width="500" height="75"></iframe>
  95. </form>
  96. </article>
  97. <article title="OFFLINE DATA STORAGE">
  98. <label for="session">sessionStorage:</label> <input type="text" name="session" value="" id="session" />
  99. <label for="local">localStorage:</label> <input type="text" name="local" value="" id="local" />
  100. <input type="button" id="clear" value="Clear Storage" />
  101. <div id="storage"></div>
  102. </article>
  103. <article id="geolocation" title="GEOLOCATION">
  104. You are at: <span id="latitude" class="lat"></span>; <span id="longitude" class="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>
  105. </article>
  106. <article title="DEVICE">
  107. <span id="device" class="orientation">No Device movement detected...</span>
  108. </article>
  109. </section>
  110. </div>
  111. <aside id="sidebar">
  112. <a href="http://validator.w3.org/check?uri=referer">
  113. <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 &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
  114. </a>
  115. </aside>
  116. </div>
  117. <footer id="contact" title="MICRODATA">
  118. <div id="me" itemscope itemtype="http://microformats.org/profile/hcard">
  119. <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" />
  120. <span itemprop="org" itemscope>
  121. <span itemprop="organization-name">BCmoney MobileTV</span> (<span itemprop="organization-unit">E-Business</span>)
  122. </span>
  123. <span itemprop="adr" itemscope>
  124. <span id="latlon" class="hidden" itemprop="geo">45.2767082; -66.050242</span>
  125. <span itemprop="street-address">210 Crown Street</span>
  126. <span itemprop="locality">Saint John</span>,
  127. <span itemprop="region">NB</span>
  128. <span itemprop="postal-code">E2L 3V8</span><br/>
  129. <span itemprop="country-name">Canada</span>
  130. </span>
  131. <span itemprop="tel" itemscope>
  132. <span itemprop="type">Work</span> phone #: <span itemprop="value">+1 (506) 645-3237</span>.
  133. </span>
  134. <ins datetime="2011-03-01T17:30:00+01:00">
  135. <span itemprop="rev" itemscope>
  136. <meta itemprop="type" content="date-time" />
  137. <meta itemprop="value" content="2011-03-01T17:30:00+01:00" />
  138. </span>
  139. Last Updated: 2011-03-01
  140. </ins>
  141. </div>
  142. </footer>
  143. </div>
  144. <!-- additional scripts particularly those triggered after DOM (onload, onready) -->
  145. <script type="text/javascript" src="js/html5utils.js"></script>
  146. <script type="text/javascript">
  147. /////////////////////////////////////////////////////////
  148. //Device API (FF, Safari and Chrome only... for now)
  149. /////////////////////////////////////////////////////////
  150. /* MozOrientation is used in FireFox on desktops with an accelerometer and Mobile devices with Fennick installed */
  151. window.addEventListener("MozOrientation", function(e) {
  152. /* 3 values: e.x, e.y, e.z */
  153. if(e.x!=0 || e.y !=0) { $("#device").html("Hey, put me down!"); }
  154. }, true);
  155. /* deviceorientation is used for Chrome and Android */
  156. window.addEventListener('deviceorientation', function(event) {
  157. var a = event.alpha;
  158. var b = event.beta;
  159. var g = event.gamma;
  160. if (a>=40||b>=40) { $("#device").html("Woah, not so fast!"); }
  161. }, false);
  162. /* iOS 4.2+ (official iPhone Device API) */
  163. window.ondevicemotion = function(event) {
  164. ax = event.accelerationIncludingGravity.x;
  165. ay = event.accelerationIncludingGravity.y;
  166. if (ax>=40||ay>=40) { $("#device").html("Woah, not so fast!"); }
  167. }
  168. //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). */
  169. window.onorientationchange = function() {
  170. switch(window.orientation) {
  171. case 0: //in portrait mode
  172. $("#device").html("Now in portrait orientation");
  173. break;
  174. case 90: //in landscape mode (screen turned to the left)
  175. $("#device").html("Now in landscape orientation (left)");
  176. break;
  177. case -90: //in landscape mode (screen turned to the right)
  178. $("#device").html("Now in landscape orientation (right)");
  179. break;
  180. }
  181. }
  182. /////////////////////////////////////////////////////////
  183. //Offline DataStorage
  184. /////////////////////////////////////////////////////////
  185. //DataStorage helper (non-jQuery)
  186. function getStorage(type) {
  187. var storage = window[type + 'Storage'], delta = 0, localOffline = document.createElement('span');
  188. if (!window[type + 'Storage']) { return; }
  189. if (storage.getItem('value')) {
  190. delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
  191. localOffline.innerHTML = type + ': ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
  192. } else {
  193. localOffline.innerHTML = type + ': empty';
  194. }
  195. localOffline.id = type+'Storage';
  196. document.querySelector('#storage').appendChild(localOffline);
  197. }
  198. //Geo-Location helper
  199. function geoLocate(position) {
  200. $('#latitude').html(position.coords.latitude);
  201. $('#longitude').html(position.coords.longitude);
  202. $('#geomap').attr('href').append(position.coords.latitude+','+position.coords.longitude);
  203. }
  204.  
  205. $(document).ready(function() {
  206. /////////////////////////////////////////////////////////
  207. //DataStorage (pre-load fields)
  208. getStorage('session');
  209. getStorage('local');
  210. addEvent(document.querySelector('#session'), 'keyup', function () {
  211. sessionStorage.setItem('value', this.value);
  212. sessionStorage.setItem('timestamp', (new Date()).getTime());
  213. document.getElementById('sessionStorage').innerHTML = 'session: ' + this.value;
  214. });
  215. addEvent(document.querySelector('#local'), 'keyup', function () {
  216. localStorage.setItem('value', this.value);
  217. localStorage.setItem('timestamp', (new Date()).getTime());
  218. document.getElementById('localStorage').innerHTML = 'local: ' + this.value;
  219. });
  220. addEvent(document.querySelector('#clear'), 'click', function () {
  221. sessionStorage.clear();
  222. localStorage.clear();
  223. document.querySelector('#storage').innerHTML = '';
  224. getStorage('local');
  225. getStorage('session');
  226. });
  227. $('#session').val(sessionStorage.getItem('value'));
  228. $('#local').val(localStorage.getItem('value'));
  229. /////////////////////////////////////////////////////////
  230. //Geo-Location
  231. /////////////////////////////////////////////////////////
  232. if (navigator.geolocation) {
  233. navigator.geolocation.getCurrentPosition(geoLocate, function() { $("#geolocation").html("Geo-Location not allowed"); } );
  234. }
  235. else {
  236. $("#geolocation").html("No Geo-Location support");
  237. }
  238. /////////////////////////////////////////////////////////
  239. //Canvas drawing
  240. /////////////////////////////////////////////////////////
  241. var canvas = document.getElementById('drawingboard');
  242. // Make sure we don't execute when canvas isn't supported
  243. if (canvas.getContext) {
  244. // use getContext to use the canvas for drawing
  245. var ctx = canvas.getContext('2d');
  246. ctx.beginPath(); // Draw shapes
  247. ctx.arc(75,75,30,0,Math.PI*2,true); // Outer circle
  248. ctx.moveTo(98,75);
  249. ctx.arc(75,75,22,0,Math.PI,false); // Mouth
  250. ctx.moveTo(65,65);
  251. ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
  252. ctx.moveTo(95,65);
  253. ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
  254. ctx.stroke();
  255. }
  256. else {
  257. $('#drawingboard').html('You need Safari or Firefox 1.5+ to see the canvas demo.');
  258. }
  259. /////////////////////////////////////////////////////////
  260. //Web Messaging (cross-domain)
  261. /////////////////////////////////////////////////////////
  262. var win = document.getElementById("iframe").contentWindow;
  263. addEvent(document.querySelector('form'), 'submit', function (e) {
  264. win.postMessage( document.getElementById("message").value, "http://www.bryancopeland.com");
  265. if (e.preventDefault) {
  266. e.preventDefault();
  267. }
  268. // otherwise set the returnValue property of the original event to false (IE)
  269. e.returnValue = false;
  270. });
  271. });
  272. </script>
  273. </body>
  274. </html>

Report this snippet  

You need to login to post a comment.