HTML5

                    What it is, what it’s not, and what parts of it we can use today.




October 21, 2010
Steven G...
In 140 Characters ....

    “HTML5 is a vocabulary and set of application programming interfaces that
        make up a co...
Simplification.
You’re no doubt familiar with ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xh...
<!DOCTYPE html>
(seriously, thats it.)
<meta charset=”UTF-8”>
<script src=”foo.js”></script>
<link rel=”stylesheet” href=”styles.css” />
<html lang=”en”>
HTML5 is not XML
<DIV>, <div> or even <DiV> is just fine.
<br>, <BR> and <br /> are all ok too.
<a class=foo> is even all right.
(but it seems dirty to me)
Obsolescence.
frame, frameset and noframes
(but when was the last time you needed them?)
font, center, and other presentational cruft
(but if you still use those, I’ll give you a smack)
Changes.
small is now semantic. It means “legal text”.
b now means stylistically offset text with no
        additional importance.
i means the text is in an alternate mood or voice
cite now means the “title of a work”
It’s now ok to nest elements inside an a element
<a href=”/”>

 <h1>My awesome site</h1>

 <h2>My witty tagline</h2>
</a>
* we can make this more semantic, but lets not ge...
<menu>
<menu type=”list|toolbar|context”>
<command label=”Autofill” onclick=”doAutoFill();” />
* doesn’t seem to be supported by anything yet
<form contextmenu=”ourMenu”>

 ....

 <menu id=”ourMenu”>

 
 <command ... />

 </menu>
</form>
Semantics.
<time>
<time datetime=”2010-10-21”>October 21, 2010</
                    time>
<time datetime=”2010-10-21”>Thursday</time>
<time datetime=”2010-10-21” pubdate>October 21, 2010</time>

* if nested in an <article>, its the pubdate of the article. ...
<meter>
<meter>4 out of 5 dentists</meter>
<meter min=”0” max=”5”>4 out of 5 dentists</meter>
<meter min=”0” max=”5” value=”4”>A majority of dentists</meter>
It also has high, low, and optimum
              attributes.
<progress>
<p>

 Upload is <progress min=”0” max=”100”>60%</progress> complete.
</p>
<progress min=”0” max=”100” value=”60”></
                 progress>
<section>
Use section it to group related content.
<section class=”posts”>

 <h1>The latest news ... </h1>

 <p>

 
 Oh hai, guyz!

 </p>
</section>
<article>
Like section, but for self contained content.
<section class=”posts”>

 <h1>The latest news ... </h1>

 <article>

 
 <p>

 
 
 Oh hai, guyz!

 
 </p>

 </article>
</se...
Each article can have its own h1-h6 hierarchy.
<section class=”posts”>

 <h1>The latest news ...</h1>

 <article>

 
 <h1>Article title</h1>

 
 <p>

 
 
 Oh hai, guyz!
...
<header>
<hgroup>
<header>

 <hgroup>

 
 <a href=”/”>

 
 
 <h1>My awesome site</h1>

 
 
 <h2>My witty tagline</h2>

 
 </a>

 </hgroup>
<...
<footer>
<footer>

 <small>Legal mumbo jumbo and copyrights</small>
</footer>
<nav>
<footer>

   <nav>

   
  <ul>

   
  
   <li><a href=”...”>Another Property</li>

   
  
   <li><a href=”...”>Help!</li>
...
<aside>
Used to represent content that is tangentially
related to other content.
<!DOCTYPE html>
<head>
<meta charset=”UTF-8” />
<title>Sample HTML5 Document Structure</title>
</head>
<body>
<header>

  ...
Forms.
<input type=”text” placeholder=”Email” />
<input type=”text” placeholder=”Email” autofocus />
<input type=”email” placeholder=”Email” autofocus />
<input type=”email” placeholder=”Email” autofocus required />
input:invalid {

 background-color:#E366AF
}
tel
url
datetime
date
month
week
time
datetime-local
number
range
color
search
<input type=”range” min=”0” max=”10” />
<input type=”date” />
<datalist>
<input type=”text” list=”titles” />

   <datalist id=”titles”>

   
 <option value=”Mr.” />

   
 <option value=”Mrs.” />
...
Browsers that don’t understand an input type will
render it as a standard text input.
Media.
<video>
<video src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”>
</video>
<video controls src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”>
</video>
If you don’t specify controls, you can write your own
with javascript.

               *Standard stuff like .play(), .paus...
<video preload=”none|auto|metadata” src=”movie.mp4” width=”320”
height=”240” poster=”poster.jpg”>
</video>
<video controls width=”320” height=”240” poster=”poster.jpg”>

 <source src=”movie.mp4” type=”video/mp4” />

 <source src=...
<video controls width=”320” height=”240” poster=”poster.jpg”>

 <source src=”movie.mp4” type=”video/mp4” />

 <source src=...
http://slayeroffice.com/articles/html5/video/
<audio>
pretty much the same as video.
<canvas>
http://slayeroffice.com/code/mouse_patterns/mp-canvas.html
APIs.
Canvas 2d Context
An introduction to canvas is a presentation unto itself.
window.localStorage
localStorage.setItem(“key”,”value”);
localStorage.getItem(“key”);
* returns null if the key doesn’t exist
localStorage.removeItem(“key”);
window.addEventListener(“storage”,onStorage,false);
StorageEvent.key|oldValue|newValue|url
* url might be uri in some browsers. Check for uri if url isn’t there.
Things to keep in mind ...

• 5MB of storage


• EVERYTHING is returned as as string, just like cookies


• If you run out...
File API
Drag & Drop Events
Geolocation
navigator.geolocation.getCurrentPosition(callback);
function callback(position) {

 alert(position.coords.latitude)
}
navigator.geolocation.watchPosition(callback);
Web Workers
Javascript is single threaded.
Workers allow for background threads.
var worker = new Worker(“worker.js”);
worker.postMessage(“hello!”);
worker.onmessage = function(evt) {

 
 alert(evt.data);
}
self.onmessage = function(evt) {

 
 // do stuff ...
}
Things to be aware of ...

• Workers can not access or manipulate the DOM.


• They do not have access to the scripts in t...
Web Sockets
Also an entire presentation.
In a nutshell, it will allow us to use
sockets instead of long polling over
HTTP.
But only Safari and Chrome support it right now.
But what about ...
Getting IE to recognize new elements ...

<script>
     document.createElement(“section”);
     document.createElement(“ar...
Testing for attribute support ...

function elementSupportsAttribute(element,attribute) {
     var ele = document.createEl...
Testing for input type support ...

function elementSupportsType(type) {
     var input = document.createElement(“input”);...
According to Microsoft ...

IE9 is the bomb: http://samples.msdn.microsoft.com/ietestcenter/
Modernizr

• Detects support, does NOT provide it


• Javascript hooks such as Modernizr.canvas


• Adds classes to the HT...
Resources

• HTML5 for Web Designers by Jeremy Keith - http://books.alistapart.com/


• Dive into HTML5 by Mark Pilgrim - ...
Questions?

Thanks for coming!
Upcoming SlideShare
Loading in...5
×

An Introduction to HTML5

7,687

Published on

What's new in HTML5 and what parts of it can we use today?

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,687
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
131
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide


























































































































  • An Introduction to HTML5

    1. 1. HTML5 What it is, what it’s not, and what parts of it we can use today. October 21, 2010 Steven G. Chipman
    2. 2. In 140 Characters .... “HTML5 is a vocabulary and set of application programming interfaces that make up a core declarative language for web sites and applications.” @mollydotcom
    3. 3. Simplification.
    4. 4. You’re no doubt familiar with ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    5. 5. <!DOCTYPE html>
    6. 6. (seriously, thats it.)
    7. 7. <meta charset=”UTF-8”>
    8. 8. <script src=”foo.js”></script>
    9. 9. <link rel=”stylesheet” href=”styles.css” />
    10. 10. <html lang=”en”>
    11. 11. HTML5 is not XML
    12. 12. <DIV>, <div> or even <DiV> is just fine.
    13. 13. <br>, <BR> and <br /> are all ok too.
    14. 14. <a class=foo> is even all right.
    15. 15. (but it seems dirty to me)
    16. 16. Obsolescence.
    17. 17. frame, frameset and noframes
    18. 18. (but when was the last time you needed them?)
    19. 19. font, center, and other presentational cruft
    20. 20. (but if you still use those, I’ll give you a smack)
    21. 21. Changes.
    22. 22. small is now semantic. It means “legal text”.
    23. 23. b now means stylistically offset text with no additional importance.
    24. 24. i means the text is in an alternate mood or voice
    25. 25. cite now means the “title of a work”
    26. 26. It’s now ok to nest elements inside an a element
    27. 27. <a href=”/”> <h1>My awesome site</h1> <h2>My witty tagline</h2> </a> * we can make this more semantic, but lets not get ahead of ourselves.
    28. 28. <menu>
    29. 29. <menu type=”list|toolbar|context”>
    30. 30. <command label=”Autofill” onclick=”doAutoFill();” /> * doesn’t seem to be supported by anything yet
    31. 31. <form contextmenu=”ourMenu”> .... <menu id=”ourMenu”> <command ... /> </menu> </form>
    32. 32. Semantics.
    33. 33. <time>
    34. 34. <time datetime=”2010-10-21”>October 21, 2010</ time>
    35. 35. <time datetime=”2010-10-21”>Thursday</time>
    36. 36. <time datetime=”2010-10-21” pubdate>October 21, 2010</time> * if nested in an <article>, its the pubdate of the article. Otherwise, its the pubdate of the document
    37. 37. <meter>
    38. 38. <meter>4 out of 5 dentists</meter>
    39. 39. <meter min=”0” max=”5”>4 out of 5 dentists</meter>
    40. 40. <meter min=”0” max=”5” value=”4”>A majority of dentists</meter>
    41. 41. It also has high, low, and optimum attributes.
    42. 42. <progress>
    43. 43. <p> Upload is <progress min=”0” max=”100”>60%</progress> complete. </p>
    44. 44. <progress min=”0” max=”100” value=”60”></ progress>
    45. 45. <section>
    46. 46. Use section it to group related content.
    47. 47. <section class=”posts”> <h1>The latest news ... </h1> <p> Oh hai, guyz! </p> </section>
    48. 48. <article>
    49. 49. Like section, but for self contained content.
    50. 50. <section class=”posts”> <h1>The latest news ... </h1> <article> <p> Oh hai, guyz! </p> </article> </section>
    51. 51. Each article can have its own h1-h6 hierarchy.
    52. 52. <section class=”posts”> <h1>The latest news ...</h1> <article> <h1>Article title</h1> <p> Oh hai, guyz! </p> </article> </section>
    53. 53. <header>
    54. 54. <hgroup>
    55. 55. <header> <hgroup> <a href=”/”> <h1>My awesome site</h1> <h2>My witty tagline</h2> </a> </hgroup> </header> * the enhanced semantics I mentioned earlier
    56. 56. <footer>
    57. 57. <footer> <small>Legal mumbo jumbo and copyrights</small> </footer>
    58. 58. <nav>
    59. 59. <footer> <nav> <ul> <li><a href=”...”>Another Property</li> <li><a href=”...”>Help!</li> </ul> </nav> <small>Legal mumbo jumbo and copyrights</small> </footer>
    60. 60. <aside>
    61. 61. Used to represent content that is tangentially related to other content.
    62. 62. <!DOCTYPE html> <head> <meta charset=”UTF-8” /> <title>Sample HTML5 Document Structure</title> </head> <body> <header> <hgroup> <h1>My awesome site</h1> <h2>My witty tagline</h2> </hgroup> <nav> <ul> <li><a href=”/”>home</a></li> <li><a href=”about.html”>about</a></li> </ul> </nav> </header> <section class=”posts”> <article> <h1>Post Title</h1> <time datetime=”2010-10-01”>October 1, 2010</time> <p>This is the body of the blog post.</p> <aside>Here is a funny excerpt!</aside> </article> </section> <footer> <nav> <ul> <li><a href=”...”>Another Property</a></li> <li><a href=”...”>Help!</a></li> </ul> </nav> <small>&copy; 2010, Me</small> </footer> </body> </html>
    63. 63. Forms.
    64. 64. <input type=”text” placeholder=”Email” />
    65. 65. <input type=”text” placeholder=”Email” autofocus />
    66. 66. <input type=”email” placeholder=”Email” autofocus />
    67. 67. <input type=”email” placeholder=”Email” autofocus required />
    68. 68. input:invalid { background-color:#E366AF }
    69. 69. tel url datetime date month week time datetime-local number range color search
    70. 70. <input type=”range” min=”0” max=”10” />
    71. 71. <input type=”date” />
    72. 72. <datalist>
    73. 73. <input type=”text” list=”titles” /> <datalist id=”titles”> <option value=”Mr.” /> <option value=”Mrs.” /> <option value=”Dr.” /> </datalist>
    74. 74. Browsers that don’t understand an input type will render it as a standard text input.
    75. 75. Media.
    76. 76. <video>
    77. 77. <video src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
    78. 78. <video controls src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
    79. 79. If you don’t specify controls, you can write your own with javascript. *Standard stuff like .play(), .pause(), .volume, etc.
    80. 80. <video preload=”none|auto|metadata” src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
    81. 81. <video controls width=”320” height=”240” poster=”poster.jpg”> <source src=”movie.mp4” type=”video/mp4” /> <source src=”move.ogv” type=”video/ogg” /> </video>
    82. 82. <video controls width=”320” height=”240” poster=”poster.jpg”> <source src=”movie.mp4” type=”video/mp4” /> <source src=”move.ogv” type=”video/ogg” /> <object type=”application/x-shockwave-flash”> ... </object> </video>
    83. 83. http://slayeroffice.com/articles/html5/video/
    84. 84. <audio>
    85. 85. pretty much the same as video.
    86. 86. <canvas>
    87. 87. http://slayeroffice.com/code/mouse_patterns/mp-canvas.html
    88. 88. APIs.
    89. 89. Canvas 2d Context
    90. 90. An introduction to canvas is a presentation unto itself.
    91. 91. window.localStorage
    92. 92. localStorage.setItem(“key”,”value”);
    93. 93. localStorage.getItem(“key”); * returns null if the key doesn’t exist
    94. 94. localStorage.removeItem(“key”);
    95. 95. window.addEventListener(“storage”,onStorage,false);
    96. 96. StorageEvent.key|oldValue|newValue|url * url might be uri in some browsers. Check for uri if url isn’t there.
    97. 97. Things to keep in mind ... • 5MB of storage • EVERYTHING is returned as as string, just like cookies • If you run out of space, an exception will be thrown. • Unlike Flash LSOs, you can’t ask for more space. • Some browsers allow users to set the limit, so you may have less than 5MB
    98. 98. File API
    99. 99. Drag & Drop Events
    100. 100. Geolocation
    101. 101. navigator.geolocation.getCurrentPosition(callback);
    102. 102. function callback(position) { alert(position.coords.latitude) }
    103. 103. navigator.geolocation.watchPosition(callback);
    104. 104. Web Workers
    105. 105. Javascript is single threaded. Workers allow for background threads.
    106. 106. var worker = new Worker(“worker.js”);
    107. 107. worker.postMessage(“hello!”);
    108. 108. worker.onmessage = function(evt) { alert(evt.data); }
    109. 109. self.onmessage = function(evt) { // do stuff ... }
    110. 110. Things to be aware of ... • Workers can not access or manipulate the DOM. • They do not have access to the scripts in the page that spawned it. • Using importScripts, a Worker can access other javascript libraries.
    111. 111. Web Sockets
    112. 112. Also an entire presentation.
    113. 113. In a nutshell, it will allow us to use sockets instead of long polling over HTTP.
    114. 114. But only Safari and Chrome support it right now.
    115. 115. But what about ...
    116. 116. Getting IE to recognize new elements ... <script> document.createElement(“section”); document.createElement(“article”); // ... and so on </script> * otherwise you won’t be able to style these elements in IE8 and below
    117. 117. Testing for attribute support ... function elementSupportsAttribute(element,attribute) { var ele = document.createElement(element); return attribute in ele ? true : false; }
    118. 118. Testing for input type support ... function elementSupportsType(type) { var input = document.createElement(“input”); input.setAttribute(“type”,type); return input.getAttribute(“type”) == “text” ? false : true; }
    119. 119. According to Microsoft ... IE9 is the bomb: http://samples.msdn.microsoft.com/ietestcenter/
    120. 120. Modernizr • Detects support, does NOT provide it • Javascript hooks such as Modernizr.canvas • Adds classes to the HTML element that define available features • Sets up elements for IE 6 through 8 • MIT-BSD License
    121. 121. Resources • HTML5 for Web Designers by Jeremy Keith - http://books.alistapart.com/ • Dive into HTML5 by Mark Pilgrim - http://diveintohtml5.org/ • The Spec: http://dev.w3.org/html5/spec/Overview.html • The HTML5 Test: http://www.html5test.com/ • Modernizr: http://www.modernizr.com/
    122. 122. Questions? Thanks for coming!
    1. A particular slide catching your eye?

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

    ×