HTML5 Essentials


Published on

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

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 Essentials

  1. HTML5 Essentials by Marc Grabanski
  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. Less Header Code <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> </head> ...
  4. No need for type attribute <script src=”foo.js”> </script> <link href=”foo.css”></link>
  5. More Semantic HTML tags <div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>
  6. More Semantic HTML tags <header> <nav> <section> <aside> <article> <footer>
  7. Fix IE for HTML5 elements document.createElement(‘header’);
  8. HTML5 Shiv <!--[if lte IE 8]> <script src=" svn/trunk/ html5.js"></script> <![endif]--> or the more advanced
  9. Output <output name="result"></output>
  10. Progress <progress id="p" max=100><span>0</span>%</progress>
  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. Progress is for status of a set of tasks Meter is for a gauge of measure
  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. 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. 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. 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. 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. 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. 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. 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. 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. Time and Publish Date Attribute <time pubdate datetime="2009-10-09T14:28-08:00"></time>
  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. 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. 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. 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. 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. Not all Navigation should use <nav> <nav></nav> only main navigation, for instance footer nav is secondary
  29. Article is unique content to the page. <article></article>
  30. Hgroup, highest rank group of headings <hgroup></hgroup>
  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. Media Tags <video src=” cat.ogg” /> add native controls <video src=”cat.ogg” controls />
  33. Media Tags <video controls/> <source src=”cat.mp4” /> <source src=”cat.ogg” /> </video>
  34. Video Format Support Ogg Theora/Voribs - Firefox 3.5+ - Chrome - Opera MPEG-4 H.264/AAC - Safari - Chrome - Opera
  35. Native Video Fallback with Flash - Safari (v4.0.4+) - Google Chrome (v4.0+) - Firefox (v3.6+)
  36. Media Tags <audio src=”test.ogg”></audio> <audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a> </audio>
  37. Native GeoLocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } );
  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. 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. Canvas Internet Explorer Support ExplorerCanvas
  41. Input Types <input type=”email” /> tel datetime search date email range url color Unsupported browsers default to text.
  42. Input Types Input type changes keyboard on iphone.
  43. Input Type Range
  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. 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. File Upload Multiple <input type=file multiple>
  47. Input Type Email + Multiple <label>Cc: <input type=email multiple name=cc></label>
  48. Datalist <label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="" label="Google"> <option value="" label="Reddit"> </datalist>
  49. Form Validation <input name="custname" required> <script> form.checkValidity(); </script>
  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. Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key);
  52. Local Storage in Yahoo! Search Pad
  53. Local Storage in Yahoo! Search Pad
  54. Application Storage / Offline <html manifest=”cache.manifest”> detect online or offline window.addEventListener('online', online, true); window.addEventListener('offline', online, true);
  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. Cross Domain Messaging postMessage(string); onMessage(event) {; }
  57. Editable Content Turn an element into an editable area. <script> document.getElementsByTagName('p')[0].contentEditable = true; </script>
  58. Web Sockets var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { }; ws.onclose = function () {}; ws.onopen = function () {};
  59. Web Worker new Worker("worker.js"); - Don’t have access to DOM or page. - Have to communicate through postMessage API
  61. Web GL 3D O3D
  62. Questions? Marc Grabanski: User interface and web application development. Examples: Twitter: Email: