Sunday, May 15, 2011
I have a vision... every Web                       page will be valid XML and full                            of semantic ...
2004                       WHAT WG                          ?Sunday, May 15, 2011
Pave the cowpathsSunday, May 15, 2011
W3C   W HAT WGSunday, May 15, 2011
HTML 4.01               XHTML 1.0   XHTML 1.1       XHTML 2.0                       HTML 5                    ?           ...
Browser Wars                 Standards Wars                                      All I know is I want my                  ...
<script src="../global/modernizr-1.6.js"></script>                 <script>                 window.onload = loadMovie;    ...
Sunday, May 15, 2011
Sunday, May 15, 2011
Desktop                                          November ‘10                                                           Fe...
Sunday, May 15, 2011
Mobile                                           November ‘10                                                           Fe...
What is HTML5?Sunday, May 15, 2011
t a gs                         • New doctype                         • Semantic HTML tags                         • Data a...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C/...
Structure and SemanticsSunday, May 15, 2011
<div id=”header”>                                   <div id=”nav”>                                            o u p       ...
<header>                                    <nav>                       <section>              <aside>                    ...
http://caniuse.comSunday, May 15, 2011
<p>                       <h1>, <h2>                       redefined                       <small>?   “small print”, e.g. ...
Cool Stuff in HTML5Sunday, May 15, 2011
<video>Sunday, May 15, 2011
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"         width="425" height="344" codebase="http://         do...
<canvas>Sunday, May 15, 2011
function drawSmileyFace() {                             var canvas = document.getElementById("smiley");                   ...
http://9elements.com/io/projects/html5/canvas/Sunday, May 15, 2011
<video> + <canvas>Sunday, May 15, 2011
http://www.craftymind.com/factory/html5video/CanvasVideo.htmlSunday, May 15, 2011
<canvas> + librariesSunday, May 15, 2011
Processing.js                       http://fizz.bloom.io/Sunday, May 15, 2011
Three.js                       http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.htmlSunday, May 15, 2011
localStorageSunday, May 15, 2011
localStorage                       Like cookies, but betterSunday, May 15, 2011
5MB                       localStorage.setItem(“note1”, “wash cat”);                       note1 = localStorage.getItem(“n...
CSS3Sunday, May 15, 2011
Sunday, May 15, 2011
Browser ToolsSunday, May 15, 2011
Sunday, May 15, 2011
MobileSunday, May 15, 2011
Mobile Web app libraries                       XUI                       jQtouch                       Sencha Touch       ...
Mobile libraries for                       HTML/CSS -> native                       PhoneGap                       Titaniu...
PhoneGap supported features by platformSunday, May 15, 2011
Elisabeth Robson                       beth@wickedlysmart.comSunday, May 15, 2011
HTML5 - What's it all about?
HTML5 - What's it all about?
HTML5 - What's it all about?
HTML5 - What's it all about?
HTML5 - What's it all about?
Upcoming SlideShare
Loading in …5
×

HTML5 - What's it all about?

4,853 views

Published on

HTML5 is the newest version of HTML and lots of people are talking about it. What is it? Where did it come from? This talk gives an overview of HTML5 and discusses a few of the new features. May 2011. For more about Elisabeth Robson visit http://elisabethroson.com and http://wickedlysmart.com

Published in: Technology, News & Politics
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,853
On SlideShare
0
From Embeds
0
Number of Embeds
1,533
Actions
Shares
0
Downloads
74
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 - What's it all about?

  1. 1. Sunday, May 15, 2011
  2. 2. I have a vision... every Web page will be valid XML and full of semantic meaning.Sunday, May 15, 2011
  3. 3. 2004 WHAT WG ?Sunday, May 15, 2011
  4. 4. Pave the cowpathsSunday, May 15, 2011
  5. 5. W3C W HAT WGSunday, May 15, 2011
  6. 6. HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0 HTML 5 ? HTML: The Living Standard ?Sunday, May 15, 2011
  7. 7. Browser Wars Standards Wars All I know is I want my Web apps to work in everyone’s browser!Sunday, May 15, 2011
  8. 8. <script src="../global/modernizr-1.6.js"></script> <script> window.onload = loadMovie; function loadMovie() { var video = document.getElementById("video"); if (Modernizr.video) { console.log("supports video!"); if (Modernizr.video.h264) { console.log("supports mp4!"); video.src = "myMovie.mp4"; } else if (Modernizr.video.ogg) { console.log("supports ogg!"); video.src = "myMovie.ogv"; } } } <script>Sunday, May 15, 2011
  9. 9. Sunday, May 15, 2011
  10. 10. Sunday, May 15, 2011
  11. 11. Desktop November ‘10 February ‘11 IE 9.0 beta IE 8.0 IE 7.0 IE 6.0 Firefox 4.0 beta Firefox 3.5 Firefox 3.1 Chrome Safari Opera Others IE (all) Firefox (all) Mobile 0 10 20 30 40 50Data from StatsCounter via WikipediaSunday, May 15, 2011
  12. 12. Sunday, May 15, 2011
  13. 13. Mobile November ‘10 February ‘11 Opera Mini iPhone Nokia Black Berry Android Other 0 10 20 30 40 50Data from StatsCounter via WikipediaSunday, May 15, 2011
  14. 14. What is HTML5?Sunday, May 15, 2011
  15. 15. t a gs • New doctype • Semantic HTML tags • Data attributes • Media tags • Form input types and validation • Canvas • Local Storage A P Is • Geolocation r ip t • Web-workers a S c v • Web-sockets JaSunday, May 15, 2011
  16. 16. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>Sunday, May 15, 2011
  17. 17. Structure and SemanticsSunday, May 15, 2011
  18. 18. <div id=”header”> <div id=”nav”> o u p iv s <div id=”section”> <div id=”aside”> d <div id=”footer”>Sunday, May 15, 2011
  19. 19. <header> <nav> <section> <aside> <footer>Sunday, May 15, 2011
  20. 20. http://caniuse.comSunday, May 15, 2011
  21. 21. <p> <h1>, <h2> redefined <small>? “small print”, e.g. for comments <time> Represents a date or time newSunday, May 15, 2011
  22. 22. Cool Stuff in HTML5Sunday, May 15, 2011
  23. 23. <video>Sunday, May 15, 2011
  24. 24. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/ The old way oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/ oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> The new way </object> <video src=”myawesomevideo.mp4”> Your browser doesn’t support video </video> http://www.mediafront.org/Sunday, May 15, 2011
  25. 25. <canvas>Sunday, May 15, 2011
  26. 26. function drawSmileyFace() { var canvas = document.getElementById("smiley"); var context = canvas.getContext("2d"); // face context.beginPath() context.arc(300, 300, 200, 0, 2*Math.PI, true); context.fillStyle = "#ffffcc"; context.fill(); context.stroke(); // left eye context.beginPath(); context.arc(200, 250, 25, 0, 2*Math.PI, true); context.stroke(); // right eye context.beginPath(); context.arc(400, 250, 25, 0, 2*Math.PI, true); context.stroke(); // nose context.beginPath(); context.moveTo(300, 300); context.lineTo(300, 350); context.stroke(); // mouth context.beginPath(); var angle = degreesToRadians(20); context.arc(300, 350, 75, angle, Math.PI-angle, false); context.stroke(); }Sunday, May 15, 2011
  27. 27. http://9elements.com/io/projects/html5/canvas/Sunday, May 15, 2011
  28. 28. <video> + <canvas>Sunday, May 15, 2011
  29. 29. http://www.craftymind.com/factory/html5video/CanvasVideo.htmlSunday, May 15, 2011
  30. 30. <canvas> + librariesSunday, May 15, 2011
  31. 31. Processing.js http://fizz.bloom.io/Sunday, May 15, 2011
  32. 32. Three.js http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.htmlSunday, May 15, 2011
  33. 33. localStorageSunday, May 15, 2011
  34. 34. localStorage Like cookies, but betterSunday, May 15, 2011
  35. 35. 5MB localStorage.setItem(“note1”, “wash cat”); note1 = localStorage.getItem(“note1”);Sunday, May 15, 2011
  36. 36. CSS3Sunday, May 15, 2011
  37. 37. Sunday, May 15, 2011
  38. 38. Browser ToolsSunday, May 15, 2011
  39. 39. Sunday, May 15, 2011
  40. 40. MobileSunday, May 15, 2011
  41. 41. Mobile Web app libraries XUI jQtouch Sencha Touch jQuery MobileSunday, May 15, 2011
  42. 42. Mobile libraries for HTML/CSS -> native PhoneGap Titanium Rhodes (HTML+Ruby)Sunday, May 15, 2011
  43. 43. PhoneGap supported features by platformSunday, May 15, 2011
  44. 44. Elisabeth Robson beth@wickedlysmart.comSunday, May 15, 2011

×