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
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
http://html5demos.com/
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

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Essentials

Uploaded by

Copyright:

Available Formats

HTML5 Essentials

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

or the more advanced

Meter is for a gauge of measure

Storage space usage:

Address applies to the nearest Article or Body tag.

Similarly, pagination can be done with

Strong is different, denotes importance

only main navigation, for instance

<video src=” cat.ogg” />

add native controls

<audio src=”test.ogg” autoplay controls loop>

<input type=”email” />

Unsupported browsers default to text.

<input type="range" min="-100" max="100"

<input name=a type=number step=any> +

<input type=file multiple>

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

<label>Homepage: <input name=hp type=url list=hpurls></label>

<input name="custname" required>

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>

detect online or offline

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

addEvent(div, “dragstart”, function(e){

addEvent(div, ‘dragend’, function(e){

Turn an element into an editable area.

- Don’t have access to DOM or page.

User interface and web application

You might also like