advanced code snippet search

Posted By

sethmbruce on 05/21/11


Tagged


Versions (?)

5 Rework Need

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

Report this snippet  

You need to login to post a comment.