HTML5 Essentials

HTML5 Essentials
by Marc Grabanski

• Less Header Code
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Draggable
• Local Storage
• Cross-Domain Messaging
• Web Sockets
• Eventually, 3D canvas

Less Header Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>foo</title>
</head>
...

No need for type attribute

<script src=”foo.js”>
</script>

<link href=”foo.css”></link>

More Semantic HTML tags
<div id=”header”>

<div id=”nav”>

<div id=”article”> <div id=”sidebar”>

<div id=”footer”>

More Semantic HTML tags
<header>

<nav>

<section> <aside>

<article>

<footer>

Fix IE for HTML5 elements

document.createElement(‘header’);

HTML5 Shiv


or the more advanced

http://www.modernizr.com

Output
<output name="result"></output>

Progress
<progress id="p" max=100><span>0</span>%</progress>

Progress in Action
<p>Progress: <progress id="p" max=100><span>0</span>%</
progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent =
newValue;
}
</script>

Progress is for status of a set of tasks

Meter is for a gauge of measure

Meter

Storage space usage:
<meter value=6 max=8>6 blocks used (out of 8 total)
</meter>

Voter turnout:
<meter value=0.75><img alt="75%"
src="graph75.png"></meter>

Tickets sold:
<meter min="0" max="100" value="75"></meter>

Details and Summary
<details>
<summary>Copying... <progress max="375505392"
value="97543282"></progress> 25%</summary>
<dl>
<dt>Transfer rate:</dt> <dd>452KB/s</dd>
<dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>Duration:</dt> <dd>01:16:27</dd>
<dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
<dt>Dimensions:</dt> <dd>320×240</dd>
</dl>
</details>

Address

<address>
<a href="../People/Raggett/">Dave Raggett</A>,
<a href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts for the w3c HTML activity
</address>

Address applies to the nearest Article or Body tag.

Data Attributes
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
<button class="fire">
</div>

<script>
div = document.getElementsByTagName(‘ div’)[0];
spaceships[div.dataset.shipId].fire()
</script>

Section
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>

Good
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter</p>
<h1>Color</h1>
<p>Apples come in various
colors.</p>
</section>
</body>

Better
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>

Figure and Figure Caption

<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>

Figure and Figure Caption
<p>In <a href="#l4">listing 4</a> we see the primary
core interface
API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API
declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
</figure>

Time and Publish Date Attribute
<time pubdate datetime="2009-10-09T14:28-08:00"></time>

<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>

Breadcrumb Navigation
<nav>
<p>
<a href="/" rel="index up up up">Main</a> >
<a href="/products/" rel="up up">Products</a> >
<a href="/products/dishwashers/" rel="up">Dishwashers</a> >
<a>Second hand</a>
</p>
<p>
<a href="/" rel="index up up">Main</a> >
<a href="/second-hand/" rel="up">Second hand</a> >
<a>Dishwashers</a>
</p>
</nav>

Similarly, pagination can be done with
first, last, next and prev

Menu and Command

<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked"
label="Left" icon="icons/alL.png" onclick="setAlign('left')">
<command type="radio" radiogroup="alignment"
label="Center" icon="icons/alC.png" onclick="setAlign('center')">
<command type="radio" radiogroup="alignment"
label="Right" icon="icons/alR.png" onclick="setAlign('right')">
<hr>
<command type="command" disabled
label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

Menu (continued)
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="fnew()">New...</button>
<button type="button" onclick="fopen()">Open...</button>
<button type="button" onclick="fsave()">Save</button>
<button type="button" onclick="fsaveas()">Save as...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="ecopy()">Copy</button>
<button type="button" onclick="ecut()">Cut</button>
<button type="button" onclick="epaste()">Paste</button>
</menu>
</li>
<li>
<menu label="Help">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
</menu>
</li>
</menu>

Mark is highlighting something
<p><mark>Momentum is preserved across the wormhole.
Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

Strong is different, denotes importance
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening
will
annihilate anything in its path.</strong> Vortexes can be avoide
when
using sufficiently advanced dialing technology.</p>

Not all Navigation should use <nav>

<nav></nav>

only main navigation, for instance
footer nav is secondary

Article is unique content to the page.

<article></article>

Hgroup, highest rank group of headings

<hgroup></hgroup>

Itemscope and Itemprop

<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</
span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>

Media Tags

<video src=” cat.ogg” />

add native controls
<video src=”cat.ogg” controls />

Media Tags

<video controls/>
<source src=”cat.mp4” />
<source src=”cat.ogg” />
</video>

http://camendesign.com/code/video_for_everybody

Video Format Support

Ogg Theora/Voribs

- Firefox 3.5+
- Chrome
- Opera

MPEG-4 H.264/AAC

- Safari
- Chrome
- Opera

Native Video Fallback with Flash
- Safari (v4.0.4+)
- Google Chrome (v4.0+)
- Firefox (v3.6+)

http://jilion.com/sublime/video

Media Tags

<audio src=”test.ogg”></audio>

<audio src=”test.ogg” autoplay controls loop>
<a href=”test.ogg”>download</a>
</audio>

Native GeoLocation

navigator.geolocation.getCurrentPosition(
function(position){
position.coords.latitude,
position.coords.longitude
}
);

GeoLocation w/ Google Ajax API fallback
if (navigator && navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
proccessDirections.sortLocations(
position.coords.latitude,
position.coords.longitude
);
}
navigator.geolocation.getCurrentPosition(getLocation);
} else {
// Google AJAX API fallback GeoLocation
if ((typeof google == 'object') && google.loader &&
google.loader.ClientLocation) {
proccessDirections.sortLocations(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
}
}

Canvas

<canvas id=”square”>
fallback content
</canvas>

<script>
canvas = canvas.getElementById(‘square’);
context = canvas.getContext(‘2d’);
context.fillStyle = “#000000”;
context.fillRect(0, 0, 100, 100);
</script>

Canvas Internet Explorer Support

ExplorerCanvas
http://code.google.com/p/explorercanvas/

Input Types

<input type=”email” />

tel datetime
search date
email range
url color

Unsupported browsers default to text.

Input Types
Input type changes keyboard on iphone.

Input Type Range + Datalist

<input type="range" min="-100" max="100"
value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="+50">
</datalist>

Input Type Number + Output

<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.value + b.value"></output>

File Upload Multiple

<input type=file multiple>

Input Type Email + Multiple

<label>Cc: <input type=email multiple name=cc></label>

Datalist

<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
<option value="http://www.google.com/" label="Google">
<option value="http://www.reddit.com/" label="Reddit">
</datalist>

Form Validation

<input name="custname" required>

<script>
form.checkValidity();
</script>

Custom Validation

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
function check(input) {
if (input.value == "good" ||
input.value == "fine" ||
input.value == "tired") {
input.setCustomValidity('"' + input.value + '" is not a feeling.');
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script>

Storage

sessionStorage.setItem(key, value);
sessionStorage.getItem(key);

localStorage.setItem(key, value);
localStorage.getItem(key);

Local Storage in Yahoo! Search Pad

Local Storage in Yahoo! Search Pad

http://www.jstorage.info/

Application Storage / Offline

<html manifest=”cache.manifest”>

detect online or offline

window.addEventListener('online', online, true);
window.addEventListener('offline', online, true);

Draggable

<div draggable=”true”></div>

addEvent(div, “dragstart”, function(e){
e.dataTransfer.setData(‘foo’, ‘bar’);
}, true);

addEvent(div, ‘dragend’, function(e){
e.dataTransfer.getData(‘foo’);
}, true);

Cross Domain Messaging

postMessage(string);

onMessage(event) {
event.data;
}

Editable Content

Turn an element into an editable area.
<script>
document.getElementsByTagName('p')[0].contentEditable = true;
</script>

Web Sockets
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
event.data
};
ws.onclose = function () {};
ws.onopen = function () {};

Web Worker

new Worker("worker.js");

- Don’t have access to DOM or page.
- Have to communicate through postMessage API

Web GL

3D O3D
http://www.youtube.com/watch?v=uofWfXOzX-g

Questions?

Marc Grabanski:
http://marcgrabanski.com

User interface and web application
development.
Examples: http://mjgin.com/work.html

Twitter: http://twitter.com/1Marc
Email: m@marcgrabanski.com

HTML5 Essentials

More Related Content

What's hot

Similar to HTML5 Essentials

More from Marc Grabanski

Recently uploaded

HTML5 Essentials