Code Examples
Header
<!-- Old: -->
<div id="mainContent">
<h2>Main Content</h2>
</div>
<!-- New: -->
<section>
<header>
<h2>Main Content</h2>
</header>
</section>
Date & Time
<p class="pubdate">
submitted on
<time datetime="2010-02-10" pubdate>02/23/10</time>
</p>
datetime Specify the date in Gregorian formatting
pubdate Publishing Date (boolean value)
Outline Algorithm
<body>
<header>
<h1>Moutain Biking</h1> Mountain Biking
</header> |
<section> |
<h1>Trail Reviews</h1> |___1. Trail Reviews
<article> |
<h1>Northridge Loop</h1> |________a. Northridge Loop
<p> review body </p> |
</article> |
<article> |
<h1> Big Sur North</h1> |________b. Big Sur North
<p> review body </p> |
<h2> Surface </h2> |____i. Surface
<p> surface text </p> | |____ a. Grades
<h3> Grades </h3> |
<h2> Skill level </h2> |____ii. Skill level
<p> skill level text </p>
</article>
</section>
</body>
Headings Structuring
Poor Structuring:
<body>
<div id="wrapper">
<header>
<h1> -----------------> Title for <body> because there are no sectioning tags in between
<h2> -----------------> Subsequent heading creating its own section [x]
<nav> ----------------> "Untitled Section" [x]
<ul>
<li>
.....
Wise Structuring:
<body>
<div id="wrapper">
<header>
<hgroup>
<h1> -----------------> Relates to next <h2>
<h2> -----------------> Relates to previous <h1>
<nav> ----------------> Title: "Main Navigation"
<h1> Main Navigation
<ul>
<li>
.....
New way of using Headings
Using one <h1> tag for the whole document in XHTML is not the way to go anymore:
<section>
<h1>
<h2>
<article>
<h1>
<h2>
<h3>
Headers & Headings Structuring
Poor Structuring:
<article>
<h1> Client Testimonial </h1>
<h2> Best experience I had </h2>
<h3> by Justin Vyn </h3>
<p class="pubdate">submitted on <time datetime="2010-02-10" pubdate>02/23/10</time></p>
<p class="article-content">Lorem ipsum...etc.</p>
.....
Wise Structuring:
<article>
<header>
<hgroup>
<h1> Client Testimonial </h1>
<h2> Best experience I had </h2>
<h3> by Justin Vyn </h3>
</hgroup>
<p class="pubdate">submitted on
<time datetime="2010-02-10" pubdate>02/23/10</time>
</p>
</header>
<p class="article-content">Lorem ipsum...etc.</p>
.....
Canvas
<head>
<script type="text/javascript">
function drawMap() {
// map object = <canvas> . Canvas API to draw with
var elvPlot = document.getElementByID('myMap').getContext('2d');
var img = new Image(); // creating object to store image
img.onload = function () { // eventHandler to draw image only after loading
elvPlot.drawImage(img, 0, 0); // (src, x , y)
elvPlot.lineWidth = 4; // always use even numbers to determine width!
elvPlot.lineJoin = "round"; // styling the joints of the stroke
elvPlot.strokeStyle = "#7f7f7f"; // coloring the stroke
elvPlot.beginPath(); // starting to draw a new stroke
elvPlot.moveTo(89,644); // specifying start of drawing location
elvPlot.lineTo(106,627); // specifying next point drawing location
elvPlot.lineTo(140,592);
elvPlot.lineTo(175,567);
elvPlot.lineTo(209,244);
elvPlot.lineTo(518,550);
elvPlot.stroke(); // draw stroke using previous coordinates
elvPlot.lineJoin = "miter"; // sharp corners for next stroke
elvPlot.beginPath(); // beginning a new stroke (with the same styling)
elvPlot.moveTo(89,434); // start location
elvPlot.lineTo(89,645); // next location
elvPlot.lineTo(567,645); // end location
elvPlot.stroke(); // drawing stroke
}
img.src= '_images/northridge_map.jpg'; // storing image in object
}
</script>
</head>
<body onload="drawMap();">
<canvas id="myMap" width="600" height="695">
Your browser does not support canvas. Please upgrade to the latest browser version.
</canvas>
</body>
GeoLocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(plotLocation, plotError);
} else {
//geolocation not available, use GoogleGears or try workaround
function plotLocation(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
//pass lat and long variables into Google Maps API call
}