HTML5 Essentials

Document Sample
HTML5 Essentials Powered By Docstoc
					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
<!--[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
<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&lt;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>
    <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>
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