html5 essentials
TRANSCRIPT
HTML5 Essentialsby 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
<!DOCTYPE HTML><html><head> <meta charset=”utf-8”> <title>foo</title></head>...
Less Header Code
<script src=”foo.js”></script>
<link href=”foo.css”></link>
No need for type attribute
<div id=”header”>
<div id=”nav”>
<div id=”article”> <div id=”sidebar”>
<div id=”footer”>
More Semantic HTML tags
More Semantic HTML tags
<header>
<nav>
<section>
<article>
<aside>
<footer>
Fix IE for HTML5 elements
document.createElement(‘header’);
HTML5 Shiv
<!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]-->
or the more advanced
http://www.modernizr.com
<output name="result"></output>
Output
<progress id="p" max=100><span>0</span>%</progress>
Progress
<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 in Action
Progress is for status of a set of tasks
Meter is for a gauge of measure
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>
Meter
<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>
Details and Summary
<address> <a href="../People/Raggett/">Dave Raggett</A>, <a href="../People/Arnaud/">Arnaud Le Hors</A>, contacts for the w3c HTML activity</address>
Address
Address applies to the nearest Article or Body tag.
<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>
Data Attributes
<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>
Section
<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>
Good
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>
<p>In <a href="#l4">listing 4</a> we see the primary core interfaceAPI 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>
Figure and Figure Caption
<time pubdate datetime="2009-10-09T14:28-08:00"></time>
Time and Publish Date Attribute
<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> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article> <footer> <p>Posted by: George Hammond</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section></article>
<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>
Breadcrumb Navigation
Similarly, pagination can be done with first, last, next and prev
<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 and Command
<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>
Menu (continued)
<p><mark>Momentum is preserved across the wormhole. Electromagneticradiation can travel in both directions through a wormhole,but matter cannot.</mark></p>
<p>When a wormhole is created, a vortex normally forms.<strong>Warning: The vortex caused by the wormhole opening willannihilate anything in its path.</strong> Vortexes can be avoided whenusing sufficiently advanced dialing technology.</p>
Mark is highlighting something
Strong is different, denotes importance
<nav></nav>
Not all Navigation should use <nav>
only main navigation, for instancefooter nav is secondary
<article></article>
Article is unique content to the page.
<hgroup></hgroup>
Hgroup, highest rank group of headings
<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>
Itemscope and Itemprop
<video src=” cat.ogg” />
add native controls<video src=”cat.ogg” controls />
Media Tags
http://camendesign.com/code/video_for_everybody
Media Tags
<video controls/><source src=”cat.mp4” /><source src=”cat.ogg” />
</video>
Ogg Theora/Voribs
- Firefox 3.5+- Chrome- Opera
Video Format Support
MPEG-4 H.264/AAC
- Safari- Chrome- Opera
http://jilion.com/sublime/video
Native Video- Safari (v4.0.4+)- Google Chrome (v4.0+)- Firefox (v3.6+)
Fallback with Flash
<audio src=”test.ogg”></audio>
<audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a></audio>
Media Tags
navigator.geolocation.getCurrentPosition(function(position){
position.coords.latitude,position.coords.longitude
});
Native GeoLocation
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 ); } }
GeoLocation w/ Google Ajax API fallback
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
telsearchemailurl
<input type=”email” />
datetimedaterangecolor
Unsupported browsers default to text.
Input Types
Input type changes keyboard on iphone.
Input Type Range
<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 Range + Datalist
<input name=a type=number step=any> + <input name=b type=number step=any> = <output onforminput="value = a.value + b.value"></output>
Input Type Number + Output
<input type=file multiple>
File Upload Multiple
<label>Cc: <input type=email multiple name=cc></label>
Input Type Email + Multiple
<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>
Datalist
<input name="custname" required>
<script>form.checkValidity();</script>
Form 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>
Custom Validation
sessionStorage.setItem(key, value);sessionStorage.getItem(key);
localStorage.setItem(key, value);localStorage.getItem(key);
Storage
Local Storage in Yahoo! Search Pad
Local Storage in Yahoo! Search Pad
http://www.jstorage.info/
<html manifest=”cache.manifest”>
detect online or offline
window.addEventListener('online', online, true);window.addEventListener('offline', online, true);
Application Storage / Offline
<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);
Draggable
postMessage(string);
onMessage(event) {event.data;
}
Cross Domain Messaging
Turn an element into an editable area.
Editable Content
<script> document.getElementsByTagName('p')[0].contentEditable = true;</script>
var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) {
event.data}; ws.onclose = function () {}; ws.onopen = function () {};
Web Sockets
Web Worker
new Worker("worker.js");
- Don’t have access to DOM or page.- Have to communicate through postMessage API
3D O3Dhttp://www.youtube.com/watch?v=uofWfXOzX-g
Web GL
Questions?
Marc Grabanski: http://marcgrabanski.com
Twitter: http://twitter.com/1MarcEmail: [email protected]
User interface and web application development. Examples: http://mjgin.com/work.html