HTML5 Essentials
        by Marc Grabanski
• Less Header Code
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Draggab...
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...
More Semantic HTML tags
              <header>

               <nav>

 <section>               <aside>

  <article>




  ...
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]-->

o...
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 = doc...
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...
Details and Summary
<details>
 <summary>Copying... <progress max="375505392"
value="97543282"></progress> 25%</summary>
 <...
Address

<address>
 <a href="../People/Raggett/">Dave Raggett</A>,
 <a href="../People/Arnaud/">Arnaud Le Hors</A>,
 conta...
Data Attributes
<div class="spaceship" data-ship-id="92432"
   data-weapons="laser 2" data-shields="50%"
   data-x="30" da...
Section
<article>
<hgroup>
 <h1>Apples</h1>
 <h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous frui...
Good
       <body>
        <h4>Apples</h4>
        <p>Apples are fruit.</p>
        <section>
        <h2>Taste</h2>
     ...
Better
         <body>
          <h1>Apples</h1>
          <p>Apples are fruit.</p>
          <section>
          <h2>Tast...
Figure and Figure Caption

<figure>
 <img src="bubbles-work.jpeg"
    alt="Bubbles, sitting in his office chair, works on ...
Figure and Figure Caption
<p>In <a href="#l4">listing 4</a> we see the primary
core interface
API declaration.</p>
<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...
Breadcrumb Navigation
<nav>
 <p>
 <a href="/" rel="index up up up">Main</a> >
 <a href="/products/" rel="up up">Products</...
Menu and Command

<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked"
     label="Left" i...
Menu (continued)
 <menu type="toolbar">
 <li>
 <menu label="File">
  <button type="button" onclick="fnew()">New...</button...
Mark is highlighting something
<p><mark>Momentum is preserved across the wormhole.
Electromagnetic
radiation can travel in...
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 ite...
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/cod...
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...
Media Tags

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

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

navigator.geolocation.getCurrentPosition(
   function(position){
     position.coords.latitude,
     p...
GeoLocation w/ Google Ajax API fallback
   if (navigator && navigator.geolocation) {
     // HTML5 GeoLocation
     functi...
Canvas

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

<script>
canvas = canvas.getElementById(‘square’);
context = can...
Canvas Internet Explorer Support

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

   <input type=”email” />

    tel          datetime
    search       date
    email        range
    url    ...
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">
<dat...
Input Type Number + Output

<input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output onformin...
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.go...
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...
Storage


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

localStorage.setItem(key, value);
localStorage...
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('onlin...
Draggable

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

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


postMessage(string);

onMessage(event) {
  event.data;
}
Editable Content

Turn an element into an editable area.
<script>
 document.getElementsByTagName('p')[0].contentEditable =...
Web Sockets
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
  event.data
};
ws.onclose = fu...
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://mjg...
Upcoming SlideShare
Loading in...5
×

HTML5 Essentials

54,963

Published on

What we can expect browsers to implement in HTML5 moving forward.

Published in: Technology
12 Comments
173 Likes
Statistics
Notes
No Downloads
Views
Total Views
54,963
On Slideshare
0
From Embeds
0
Number of Embeds
218
Actions
Shares
0
Downloads
3,320
Comments
12
Likes
173
Embeds 0
No embeds

No notes for slide

HTML5 Essentials

  1. 1. HTML5 Essentials by Marc Grabanski
  2. 2. • 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
  3. 3. Less Header Code <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> </head> ...
  4. 4. No need for type attribute <script src=”foo.js”> </script> <link href=”foo.css”></link>
  5. 5. More Semantic HTML tags <div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>
  6. 6. More Semantic HTML tags <header> <nav> <section> <aside> <article> <footer>
  7. 7. Fix IE for HTML5 elements document.createElement(‘header’);
  8. 8. 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
  9. 9. Output <output name="result"></output>
  10. 10. Progress <progress id="p" max=100><span>0</span>%</progress>
  11. 11. 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>
  12. 12. Progress is for status of a set of tasks Meter is for a gauge of measure
  13. 13. 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>
  14. 14. 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>
  15. 15. 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.
  16. 16. 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>
  17. 17. 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>
  18. 18. 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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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&lt;byte> data); void initSelfDestruct(); }</code></pre> </figure>
  22. 22. Time and Publish Date Attribute <time pubdate datetime="2009-10-09T14:28-08:00"></time>
  23. 23. <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>
  24. 24. 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
  25. 25. 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>
  26. 26. 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>
  27. 27. 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>
  28. 28. Not all Navigation should use <nav> <nav></nav> only main navigation, for instance footer nav is secondary
  29. 29. Article is unique content to the page. <article></article>
  30. 30. Hgroup, highest rank group of headings <hgroup></hgroup>
  31. 31. 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>
  32. 32. Media Tags <video src=” cat.ogg” /> add native controls <video src=”cat.ogg” controls />
  33. 33. Media Tags <video controls/> <source src=”cat.mp4” /> <source src=”cat.ogg” /> </video> http://camendesign.com/code/video_for_everybody
  34. 34. Video Format Support Ogg Theora/Voribs - Firefox 3.5+ - Chrome - Opera MPEG-4 H.264/AAC - Safari - Chrome - Opera
  35. 35. Native Video Fallback with Flash - Safari (v4.0.4+) - Google Chrome (v4.0+) - Firefox (v3.6+) http://jilion.com/sublime/video
  36. 36. Media Tags <audio src=”test.ogg”></audio> <audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a> </audio>
  37. 37. Native GeoLocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } );
  38. 38. 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 ); } }
  39. 39. 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>
  40. 40. Canvas Internet Explorer Support ExplorerCanvas http://code.google.com/p/explorercanvas/
  41. 41. Input Types <input type=”email” /> tel datetime search date email range url color Unsupported browsers default to text.
  42. 42. Input Types Input type changes keyboard on iphone.
  43. 43. Input Type Range
  44. 44. 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>
  45. 45. 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>
  46. 46. File Upload Multiple <input type=file multiple>
  47. 47. Input Type Email + Multiple <label>Cc: <input type=email multiple name=cc></label>
  48. 48. 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>
  49. 49. Form Validation <input name="custname" required> <script> form.checkValidity(); </script>
  50. 50. 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>
  51. 51. Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key);
  52. 52. Local Storage in Yahoo! Search Pad
  53. 53. Local Storage in Yahoo! Search Pad http://www.jstorage.info/
  54. 54. Application Storage / Offline <html manifest=”cache.manifest”> detect online or offline window.addEventListener('online', online, true); window.addEventListener('offline', online, true);
  55. 55. 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);
  56. 56. Cross Domain Messaging postMessage(string); onMessage(event) { event.data; }
  57. 57. Editable Content Turn an element into an editable area. <script> document.getElementsByTagName('p')[0].contentEditable = true; </script>
  58. 58. Web Sockets var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { event.data }; ws.onclose = function () {}; ws.onopen = function () {};
  59. 59. Web Worker new Worker("worker.js"); - Don’t have access to DOM or page. - Have to communicate through postMessage API
  60. 60. http://html5demos.com/
  61. 61. Web GL 3D O3D http://www.youtube.com/watch?v=uofWfXOzX-g
  62. 62. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×