HTML5Why aren’t you using it?                           Brad Touesnard                              http://bradt.ca       ...
You are using it “HTML5 isn’t a completely new language created from scratch. It’s an evolutionary rather than revolutiona...
What’s new in HTML5?New Structural Semantic Elements   Multiple File UploadingNative Audio & Video               Document ...
New Structural Semantic Elements
<div id=”header”>                 <div id=”content”><div id=”sidebar”>
<header>           <section><aside>
<nav><nav>        <article>                         <section>          <section>   <aside><nav>                    <articl...
<header>
<h1><p><p>
<h1><article><article><article>
<h1> <p><h1><p><h1><p>
Document OutlineNew York Times China Cracks Down on Illegal Rare Earth Mines The Snowstorm   Transit Update   Stir Crazy  ...
HTML5 Document Outliner http://gsnedders.html5.org/outliner/
Other semantic elements<hgroup><footer><time><mark><figure> / <figcaption>
Using These New Elements Today
Ye Olde Doctype<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ye New Doctype<!DOCTYPE html>
Go Blockarticle, section, aside, hgroup, nav, header,footer, figure, figcaption {  display: block;}
Getting Internet Explorer to behave<head>...<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com  /svn/trunk/html...
Why today?       Om nom nom!
Native Video
The Land Before Flash
Criticisms of Flash Browser slowness & crashing Poor video performance (better in 10.1 with hardware acceleration) No stan...
Ideally Simple<video src="sneezing-panda.webm"   width="320" height="240"></video>
Browser Support Today         http://diveintohtml5.org/video.html#what-works
Browser Support Soon         http://diveintohtml5.org/video.html#what-works
Unfortunately Complicated<video width="320" height="240" preload controls>  <source src="panda.mp4" />  <source src="panda...
Articles “Dive into HTML5: Video on the Web” - Mark Pilgrim http://diveintohtml5.org/video.html “Flash Player: CPU Hog or ...
Native Audio
The Short & Sweet<audio src="bigwebshow.ogg" controls  preload="auto" autobuffer></audio>
Browser Support   http://html5doctor.com/native-audio-in-the-browser/
The Long & Ugly<audio controls preload="auto" autobuffer>  <source src="bigwebshow.mp3" />  <source src="bigwebshow.ogg" /...
Articles “The State of HTML5 Audio” - Scott Schiller  http://24ways.org/2010/the-state-of-html5-audio “HTML5 Audio Unplugg...
2D & 3D Graphics
Technologies<canvas id="game" width="500" height="500"></canvas>canvas.getContext(‘2d’)WebGL (managed by Khronos Group)can...
Links Google Pacman                           Biolab Disaster http://google.com/pacman/               http://playbiolab.co...
New Form Controls
Placeholder Text<input type="text"  placeholder="Enter search text here">
Autofocus<input type="text" autofocus>
Email Address<input type="email">
Web Address<input type="url">
Number<input type="number"  min="0" max="10" step="2" value="6">
Range<input type="range"  min="0" max="10" step="2" value="6">
Date & Time<input   type="date"><input   type="month"><input   type="week"><input   type="time"><input   type="datetime"> ...
Search<input type="search">
Others<input type="color"><input type="tel">
Upload Multiple Files<input type="file"  name="photos[]" multiple>
Form Validation Email address Web address Required <input type="text" required>
Articles “multiple file input in Firefox 3.6” - Paul Rouget  http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-...
What HTML5 is not
What HTML5 is not...CSS                Web StorageSVG                TurduckenWOFFWeb WorkersGeolocationGod
http://www.apple.com/html5/
http://slides.html5rocks.com
Boooooo!http://www.w3.org/html/logo/
“It’s as if the government suddenly      announced that from today, all vegetables will be called potatoes, justbecause so...
http://www.iscss3partofhtml5.com/
http://isgeolocationpartofhtml5.com/
“I wish I could put ‘HTML5’ in a sentence  and it would mean version 5 of HTML.         That would make sense.”           ...
Buzzword-o-matic        Ajax       Web 2.0       HTML5
Buzzword-o-matic             Web5
Web5 Geolocation
Browser Support
Getting Locationif (!!navigator.geolocation) {    var geo = navigator.geolocation;    geo.getCurrentPosition(displayMap);}
Using Locationfunction displayMap(position) {    var latitude = position.coords.latitude;    var longitude = position.coor...
Articles “You Are Here (and so is everybody else)” - Mark Pilgrim  http://diveintohtml5.org/geolocation.html Geolocation d...
Online ResourcesModernizr - Faruk Ates, Paul Irish   HTML5 Doctor - Bruce Lawson,http://www.modernizr.com/            Remy...
BooksHTML5 for Web DesignersJeremy KeithIntroducing HTML5Bruce Lawson and Remy SharpHTML5: Up and RunningMark Pilrim
Thank You            Brad Touesnard               http://bradt.ca
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

HTML5

2,799

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,799
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
95
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. HTML5Why aren’t you using it? Brad Touesnard http://bradt.ca @bradt
  2. 2. You are using it “HTML5 isn’t a completely new language created from scratch. It’s an evolutionary rather than revolutionary change in the ongoing story of markup. If you are currently creating websites with any version of HTML, you’re already using HTML5.” - Jeremy Keith, HTML5 for Web Designers
  3. 3. What’s new in HTML5?New Structural Semantic Elements Multiple File UploadingNative Audio & Video Document EditingNew Form Controls Cross-Document Messaging2D & 3D Graphics Browser History ManagementMicrodata Web StorageDrag-and-Drop Web Workers
  4. 4. New Structural Semantic Elements
  5. 5. <div id=”header”> <div id=”content”><div id=”sidebar”>
  6. 6. <header> <section><aside>
  7. 7. <nav><nav> <article> <section> <section> <aside><nav> <article> <section> <section> <section> <article><nav> <aside>
  8. 8. <header>
  9. 9. <h1><p><p>
  10. 10. <h1><article><article><article>
  11. 11. <h1> <p><h1><p><h1><p>
  12. 12. Document OutlineNew York Times China Cracks Down on Illegal Rare Earth Mines The Snowstorm Transit Update Stir Crazy Snow Removal
  13. 13. HTML5 Document Outliner http://gsnedders.html5.org/outliner/
  14. 14. Other semantic elements<hgroup><footer><time><mark><figure> / <figcaption>
  15. 15. Using These New Elements Today
  16. 16. Ye Olde Doctype<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  17. 17. Ye New Doctype<!DOCTYPE html>
  18. 18. Go Blockarticle, section, aside, hgroup, nav, header,footer, figure, figcaption { display: block;}
  19. 19. Getting Internet Explorer to behave<head>...<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com /svn/trunk/html5.js"></script><![endif]-->...</head>
  20. 20. Why today? Om nom nom!
  21. 21. Native Video
  22. 22. The Land Before Flash
  23. 23. Criticisms of Flash Browser slowness & crashing Poor video performance (better in 10.1 with hardware acceleration) No standardized video API No semantics
  24. 24. Ideally Simple<video src="sneezing-panda.webm" width="320" height="240"></video>
  25. 25. Browser Support Today http://diveintohtml5.org/video.html#what-works
  26. 26. Browser Support Soon http://diveintohtml5.org/video.html#what-works
  27. 27. Unfortunately Complicated<video width="320" height="240" preload controls> <source src="panda.mp4" /> <source src="panda.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="panda.ogv" type=video/ogg; codecs="theora, vorbis" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "panda.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="panda.mp4">MP4</a>, <a href="panda.webm">WebM</a>, or <a href="panda.ogv">Ogg</a>.</p> </object></video>
  28. 28. Articles “Dive into HTML5: Video on the Web” - Mark Pilgrim http://diveintohtml5.org/video.html “Flash Player: CPU Hog or Hot Tamale? It Depends.” http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or- hot-tamale-it-depends-.html
  29. 29. Native Audio
  30. 30. The Short & Sweet<audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>
  31. 31. Browser Support http://html5doctor.com/native-audio-in-the-browser/
  32. 32. The Long & Ugly<audio controls preload="auto" autobuffer> <source src="bigwebshow.mp3" /> <source src="bigwebshow.ogg" /> <object width="300" height="20" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "bigwebshow.mp3", "autoPlay":false, "autoBuffering":true}} /> <p>Download podcast as <a href="bigwebshow.mp3">MP3</a>, or <a href="bigwebshow.ogg">Ogg</a>.</p> </object></audio>
  33. 33. Articles “The State of HTML5 Audio” - Scott Schiller http://24ways.org/2010/the-state-of-html5-audio “HTML5 Audio Unplugged” - Richard Shepherd http://thinkvitamin.com/code/html5-audio-unplugged/ “Native Audio in the Browser” - Mark Boas http://html5doctor.com/native-audio-in-the-browser/
  34. 34. 2D & 3D Graphics
  35. 35. Technologies<canvas id="game" width="500" height="500"></canvas>canvas.getContext(‘2d’)WebGL (managed by Khronos Group)canvas.getContext(‘experimental-webgl’)
  36. 36. Links Google Pacman Biolab Disaster http://google.com/pacman/ http://playbiolab.com/ Wolfenstein 3D Quake II WebGL port http://www.nihilogic.dk/labs/wolf/ http://code.google.com/p/quake2-gwt-port/ Arcade Fire “The Wilderness True 8-bit Color Cycling with Downtown” HTML5 http://www.thewildernessdowntown.com/ http://www.effectgames.com/demos/ canvascycle/?sound=0
  37. 37. New Form Controls
  38. 38. Placeholder Text<input type="text" placeholder="Enter search text here">
  39. 39. Autofocus<input type="text" autofocus>
  40. 40. Email Address<input type="email">
  41. 41. Web Address<input type="url">
  42. 42. Number<input type="number" min="0" max="10" step="2" value="6">
  43. 43. Range<input type="range" min="0" max="10" step="2" value="6">
  44. 44. Date & Time<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> Opera 9<input type="datetime-local">
  45. 45. Search<input type="search">
  46. 46. Others<input type="color"><input type="tel">
  47. 47. Upload Multiple Files<input type="file" name="photos[]" multiple>
  48. 48. Form Validation Email address Web address Required <input type="text" required>
  49. 49. Articles “multiple file input in Firefox 3.6” - Paul Rouget http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/ “Dive into HTML5: A Form of Madness” - Mark Pilgrim http://diveintohtml5.org/forms.html
  50. 50. What HTML5 is not
  51. 51. What HTML5 is not...CSS Web StorageSVG TurduckenWOFFWeb WorkersGeolocationGod
  52. 52. http://www.apple.com/html5/
  53. 53. http://slides.html5rocks.com
  54. 54. Boooooo!http://www.w3.org/html/logo/
  55. 55. “It’s as if the government suddenly announced that from today, all vegetables will be called potatoes, justbecause some vegetables are potatoes.” - Bobbie Johnson, GigaOM
  56. 56. http://www.iscss3partofhtml5.com/
  57. 57. http://isgeolocationpartofhtml5.com/
  58. 58. “I wish I could put ‘HTML5’ in a sentence and it would mean version 5 of HTML. That would make sense.” - Me
  59. 59. Buzzword-o-matic Ajax Web 2.0 HTML5
  60. 60. Buzzword-o-matic Web5
  61. 61. Web5 Geolocation
  62. 62. Browser Support
  63. 63. Getting Locationif (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap);}
  64. 64. Using Locationfunction displayMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // embed a map}
  65. 65. Articles “You Are Here (and so is everybody else)” - Mark Pilgrim http://diveintohtml5.org/geolocation.html Geolocation demo http://html5demos.com/geo
  66. 66. Online ResourcesModernizr - Faruk Ates, Paul Irish HTML5 Doctor - Bruce Lawson,http://www.modernizr.com/ Remy Sharpe, etc http://html5doctor.com/HTML5 Boilerplate - Paul Irishhttp://html5boilerplate.com/ Quirks Mode http://www.quirksmode.org/W3Schools HTML5 Referencehttp://www.w3schools.com/html5/html5_reference.asp
  67. 67. BooksHTML5 for Web DesignersJeremy KeithIntroducing HTML5Bruce Lawson and Remy SharpHTML5: Up and RunningMark Pilrim
  68. 68. Thank You Brad Touesnard http://bradt.ca
  1. A particular slide catching your eye?

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

×