0
HTML5
HISTORY           1981   Tim Berners Lee proposes an                  internet-based hypertext systemproposal 1981
HISTORY           1989    Tim Berners Lee writes a memo                   proposing an internet-based                   hy...
HISTORY           1991             HTML tags first mentioned                            in PUBLIC!                    gone...
HISTORY        1993                1.0                    goneproposal   memo    public    1.0 1981       1989   1991     ...
HISTORY        1995                2.0                    goneproposal   memo    public    1.0   2.0 1981       1989   199...
HISTORY           1997             4.0                    gone                    W3Cproposal    memo   public    1.0   2....
HISTORY    2000                    XHTML 1.0 Released                    gone                    W3C        XHTMLproposal ...
HISTORY                            WHATWG starts work on   2004                     HTML5 under the name                  ...
HISTORY    2006                    “WAIT!” - W3C                    gone                    W3C        XHTML     WHATWG W3...
HISTORY    2008                    W3C pushes a working draft                            for HTML5                    gone...
HISTORY    2009                    W3C announces the XHTML2                            working group will stop work       ...
HISTORY           2012             HTML5 Candidate Recommendation                    gone                    W3C        XH...
HISTORY        2022               HTML5 Proposed Recommendation                   gone                    W3C        XHTML...
HTML5the content layer
New DoctypeNEW<?DOCTYPE html>OLD<?DOCTYPE html PUBLIC “-//W3C//DTDXHTML 1.1//EN” “h p://www.w3.org/TR/xhtml11/DTD/xhtml11....
Character SetNEW<meta charset="utf-8" />OLD<meta h p-equiv="Content-Type"content="text/html; charset=utf-8" />
Javascript EmbedNEW<script> </script>OLD<script type="text/javascript"> </script>
Styles EmbedNEW<style> </style>OLD<style type="text/css"></script>
Stylesheet LinkingNEW<link rel="stylesheet" href="file.css" />OLD<link rel="stylesheet" href="file.css"type="text/css" med...
Tag Etique e<img src=”../img/mjackson.jpg” />   ok<img src=../img/mjackson.jpg />     ok<IMG SRC=../img/mjackson.jpg />   ...
Block-Level LinksYou can now wrap links   <li>around block-level        <a href="page.html">elements, rather than        <...
“drop it likeRemoved Tags       it’s hot”big         appletcenter      diru           basefont            frames, strike  ...
New TagsProvides new               <HEADER>semantic vocabularyfor parts of a page          <NAV>previously served byDIVs w...
<figure>Allows for                <FIGURE>associating captionswith embeddedcontent, includingvideos, audio,pullquotes, ori...
<video>CODECS/CONTAINER                             IE        FIREFOX          SAFARI CHROME OPERA                        ...
<audio>BROWSER             OGG VORBIS            MP3         WAVFirefox 3.6+               yes            -            yes...
<audio><audio controls preload="none">  <source src="bieberfever.ogg" type="audio/ogg">  <source src="bieberfever.mp3" typ...
<meter>Represents a scalar measurement within aknown range...<meter> 2 out of 10 </meter><p>Your score is: <meter min="0" ...
<progress>Defines work-in-progress. Use it to display theprogress of a time consuming function in Javascript<progress>  <s...
<time>Defines a time or a date, or both.<p>We scrum it up at <time>9:00</time> every morning.</p><time datetime="2011-03-1...
<mark>Defines marked or highlighted text.<p>Search Results for <mark>mildred</mark></p>Some Good UsesHighlighting search t...
WEB FORMS!New A ributesrequiredautocompleteplaceholderautofocus
required<input type="text" required >The required a ribute specifies that an inputfield must be filled out before submi ing.
autocomplete<input type="text" autocomplete >The autocomplete a ribute specifies that theform or input field should have a...
placeholder<input type="text" placeholder="Search..." >The placeholder a ribute provides a hint thatdescribes the expected...
autofocus<input type="text" autofocus >The autofocus a ribute specifies that a fieldshould automatically get focus when a ...
WEB FORMS (cont) Input Types search        number email         range url           date tel           color
search<input type="search">The search field behaves likea regular text field. Somebrowsers add special stylingand/or funct...
email<input type="email">Used for input fields that shouldcontain an e-mail address. + mobile
url<input type="url">Used for input fields that shouldcontain a URL address. + mobile
number<input type="number">used for input fields that shouldcontain a numeric value. + mobile
number<input type="number">used for input fields that shouldcontain a numeric value.<input type="number"    min="0"    max...
tel<input type="tel">Used for input fields that shouldcontain numbers only + mobile
range<input type="range"    min="0"    max="10"    step="2"    value="6">Used for input fields that should containa value ...
date pickers<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime">   (utc ti...
color<input type="color">Used for input fields thatshould contain a color
NEW API’sDrag and Drop              CanvasCross-Document Messaging   SVGWeb StorageO line Web Apps
drag’n dropAllows objects (images and links, bydefault) to be dragged and thendropped onto a target.h p://instantsprite.com
cross doc messagingCross Document Messagingallows documents ofdi erent domains tocommunicate.Sending document can callpost...
web storage“The sessionStorage DOM a ribute stores sessiondata for a single window, like cookies on crack.”<input type="ch...
o line web appsAllows the client to    <html manifest="/cache.manifest">refer directly to its                        CACHE...
canvas                       svg     scalable vector graphicsCanvas is like making a      Making layers that retainflat dr...
geolocationAllows users to share their location forlocation-aware services.Some Uses  Show users position on a map  Tag co...
CAN WE EVEN USE  THIS STUFF?
“The future is already here. It’s justnot very evenly distributed”                      William Gibson
PROGRESSIVEDEGRAHANCEMENTgraceful degradation & progressive enhancement         start awesome              start with nece...
implementationsmaking the magic happenSome CSSHTML5 ShivModernizr
Some CSSSectioning elements need a line break:header, nav, section,article, aside, footer { display: block }
HTML5 ShivIn IE8- new tags are recognized so theyneed to be created.document.createElement(‘header’);document.createElemen...
Modernizr.jsO ers a 3.7k javascript file you can add toyour project.Includes the HTML5 shivUses feature detection to easil...
CSS3the presentation layer     coming soon
SourcesBecause I didn’t make this stu up.Up to Speed on HTML5 & CSS3    M.Jackson Wilkinson and Jason GarberHTML5 the 30,0...
Upcoming SlideShare
Loading in...5
×

HTML5

1,128

Published on

An overview presentation of the awesomeness of HTML5

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

  • Be the first to like this

No Downloads
Views
Total Views
1,128
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5"

  1. 1. HTML5
  2. 2. HISTORY 1981 Tim Berners Lee proposes an internet-based hypertext systemproposal 1981
  3. 3. HISTORY 1989 Tim Berners Lee writes a memo proposing an internet-based hypertext systemproposal memo 1981 1989
  4. 4. HISTORY 1991 HTML tags first mentioned in PUBLIC! goneproposal memo public 1981 1989 1991
  5. 5. HISTORY 1993 1.0 goneproposal memo public 1.0 1981 1989 1991 1993
  6. 6. HISTORY 1995 2.0 goneproposal memo public 1.0 2.0 1981 1989 1991 1993 1995 1996 CSS 1.0
  7. 7. HISTORY 1997 4.0 gone W3Cproposal memo public 1.0 2.0 4.0 1981 1989 1991 1993 1995 1997 1996 1998 CSS 1.0 CSS 1.0
  8. 8. HISTORY 2000 XHTML 1.0 Released gone W3C XHTMLproposal memo public 1.0 2.0 4.0 1.0 1981 1989 1991 1993 1995 1997 2000 1996 1998 CSS 1.0 CSS 1.0
  9. 9. HISTORY WHATWG starts work on 2004 HTML5 under the name Web Applications 1.0 gone W3C XHTML WHATWGproposal memo public 1.0 2.0 4.0 1.0 HTML5 1981 1989 1991 1993 1995 1997 2000 2004 1996 1998 CSS 1.0 CSS 1.0
  10. 10. HISTORY 2006 “WAIT!” - W3C gone W3C XHTML WHATWG W3Cproposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! 1981 1989 1991 1993 1995 1997 2000 2004 2006 1996 1998 CSS 1.0 CSS 1.0
  11. 11. HISTORY 2008 W3C pushes a working draft for HTML5 gone W3C XHTML WHATWG W3C W3Cproposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 1996 1998 CSS 1.0 CSS 1.0
  12. 12. HISTORY 2009 W3C announces the XHTML2 working group will stop work gone W3C XHTML WHATWG W3C W3Cproposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2 1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009 1996 1998 CSS 1.0 CSS 1.0
  13. 13. HISTORY 2012 HTML5 Candidate Recommendation gone W3C XHTML WHATWG W3C W3C HTML5proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2 candidate 1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009 2012 1996 1998 CSS 1.0 CSS 1.0
  14. 14. HISTORY 2022 HTML5 Proposed Recommendation gone W3C XHTML WHATWG W3C W3C HTML5 HTML5proposal memo public 1.0 2.0 4.0 1.0 HTML5 wait! HTML5 XHTML2 candidate proposed 1981 1989 1991 1993 1995 1997 2000 2004 2006 2008 2009 2012 2022 1996 1998 CSS3 CSS 1.0 CSS 1.0
  15. 15. HTML5the content layer
  16. 16. New DoctypeNEW<?DOCTYPE html>OLD<?DOCTYPE html PUBLIC “-//W3C//DTDXHTML 1.1//EN” “h p://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
  17. 17. Character SetNEW<meta charset="utf-8" />OLD<meta h p-equiv="Content-Type"content="text/html; charset=utf-8" />
  18. 18. Javascript EmbedNEW<script> </script>OLD<script type="text/javascript"> </script>
  19. 19. Styles EmbedNEW<style> </style>OLD<style type="text/css"></script>
  20. 20. Stylesheet LinkingNEW<link rel="stylesheet" href="file.css" />OLD<link rel="stylesheet" href="file.css"type="text/css" media="all" />
  21. 21. Tag Etique e<img src=”../img/mjackson.jpg” /> ok<img src=../img/mjackson.jpg /> ok<IMG SRC=../img/mjackson.jpg /> ok<img src=../img/mjackson.jpg > ok<br /> or <br> ok<input /> or <input> ok
  22. 22. Block-Level LinksYou can now wrap links <li>around block-level <a href="page.html">elements, rather than <img src="pic.jpg">having to create linksaround every element <h3>Title</h3>inside the block <p>Text</p>element. </a> </li>
  23. 23. “drop it likeRemoved Tags it’s hot”big appletcenter diru basefont frames, strike framesetfont noframesacronym
  24. 24. New TagsProvides new <HEADER>semantic vocabularyfor parts of a page <NAV>previously served byDIVs with ID andClass a ributes. <SECTION>IE requires someworkarounds using <ASIDE>JavaScript to make <ARTICLE>these elements work. <FOOTER>
  25. 25. <figure>Allows for <FIGURE>associating captionswith embeddedcontent, includingvideos, audio,pullquotes, orimages. CONTENT (IMG,VIDEO,ETC.) <LEGEND>
  26. 26. <video>CODECS/CONTAINER IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROIDTheora+Vorbis+Ogg - 3.5+ - 5.0+ 10.5+ - -H.264+AAC+MP4 9.0+ - 3.0+ - - 3.0+ 2.0+WebM 9.0+ 4.0+ - 6.0+ 10.6+ - 2.3+<video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="pr6.ogv" type=video/ogg; codecs="theora, vorbis" /> <source src="pr6.mp4" /> <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": "h p://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBu ering":true}} /> <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> </object></video><script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } };</script>
  27. 27. <audio>BROWSER OGG VORBIS MP3 WAVFirefox 3.6+ yes - yesSafari 5+ - yes yesChrome 6 yes yes -Opera 10.5+ yes - yesIE 9 - yes yesATTRIBUTESsrc url <audio src="bieberfever.ogg"></audio>autoplay boolean <audio src="bieberfever.ogg" autoplay></audio>loop boolean <audio src="bieberfever.ogg" loop></audio>controls boolean <audio src="bieberfever.ogg" controls></audio>preload none/auto <audio src="bieberfever.ogg" preload="auto"></audio>
  28. 28. <audio><audio controls preload="none"> <source src="bieberfever.ogg" type="audio/ogg"> <source src="bieberfever.mp3" type="audio/mpeg"> <object type="application/x-shockwave...</audio
  29. 29. <meter>Represents a scalar measurement within aknown range...<meter> 2 out of 10 </meter><p>Your score is: <meter min="0" max="10">2 out of 10</meter></p><p>Your score is: <meter value="91" min="0" max="100" low="40"high="90" optimum="100">A+</meter></p>
  30. 30. <progress>Defines work-in-progress. Use it to display theprogress of a time consuming function in Javascript<progress> <span>76</span>%</progress><progress max="50" value="23"> <span>23</span> of <span>50</span></progress>
  31. 31. <time>Defines a time or a date, or both.<p>We scrum it up at <time>9:00</time> every morning.</p><time datetime="2011-03-1709:00" pubdate>9:00</time>
  32. 32. <mark>Defines marked or highlighted text.<p>Search Results for <mark>mildred</mark></p>Some Good UsesHighlighting search terms on a pageDirecting a ention to a word or phraseAdding emphasis
  33. 33. WEB FORMS!New A ributesrequiredautocompleteplaceholderautofocus
  34. 34. required<input type="text" required >The required a ribute specifies that an inputfield must be filled out before submi ing.
  35. 35. autocomplete<input type="text" autocomplete >The autocomplete a ribute specifies that theform or input field should have an autocompletefunction. Tells the browser to allow the field tobe autocompleted or not.
  36. 36. placeholder<input type="text" placeholder="Search..." >The placeholder a ribute provides a hint thatdescribes the expected value of an input field.
  37. 37. autofocus<input type="text" autofocus >The autofocus a ribute specifies that a fieldshould automatically get focus when a page isloaded.
  38. 38. WEB FORMS (cont) Input Types search number email range url date tel color
  39. 39. search<input type="search">The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing. + mobile
  40. 40. email<input type="email">Used for input fields that shouldcontain an e-mail address. + mobile
  41. 41. url<input type="url">Used for input fields that shouldcontain a URL address. + mobile
  42. 42. number<input type="number">used for input fields that shouldcontain a numeric value. + mobile
  43. 43. number<input type="number">used for input fields that shouldcontain a numeric value.<input type="number" min="0" max="10" step="2" value="6"> + mobile
  44. 44. tel<input type="tel">Used for input fields that shouldcontain numbers only + mobile
  45. 45. range<input type="range" min="0" max="10" step="2" value="6">Used for input fields that should containa value from a range of numbers. + mobile
  46. 46. date pickers<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> (utc time)<input type="datetime-local"> (local time)
  47. 47. color<input type="color">Used for input fields thatshould contain a color
  48. 48. NEW API’sDrag and Drop CanvasCross-Document Messaging SVGWeb StorageO line Web Apps
  49. 49. drag’n dropAllows objects (images and links, bydefault) to be dragged and thendropped onto a target.h p://instantsprite.com
  50. 50. cross doc messagingCross Document Messagingallows documents ofdi erent domains tocommunicate.Sending document can callpostMessage() andreceiving document listensfor a ‘message’ event.
  51. 51. web storage“The sessionStorage DOM a ribute stores sessiondata for a single window, like cookies on crack.”<input type="checkbox" onchange=" localStorage.insurance=checked" /> + mobile
  52. 52. o line web appsAllows the client to <html manifest="/cache.manifest">refer directly to its CACHE MANIFESTcache for certain index.htmlresources even help.htmlwhile o line. style/default.css images/logo.pngResources under images/background.png"network" arenever cached NETWORK: server.cgi + mobile
  53. 53. canvas svg scalable vector graphicsCanvas is like making a Making layers that retainflat drawing without distinctive shapes. Likelayers. Like a whiteboard. construction paper. + mobile + mobile
  54. 54. geolocationAllows users to share their location forlocation-aware services.Some Uses Show users position on a map Tag content (photos/sound/video) Turn-by-turn navigation Alert users of nearby points of interest Social networkingUsers must be allowed to opt-in to location sharing + mobile
  55. 55. CAN WE EVEN USE THIS STUFF?
  56. 56. “The future is already here. It’s justnot very evenly distributed” William Gibson
  57. 57. PROGRESSIVEDEGRAHANCEMENTgraceful degradation & progressive enhancement start awesome start with necessary strip features/fallbacks for enhance for more capable lesser browsers browsers
  58. 58. implementationsmaking the magic happenSome CSSHTML5 ShivModernizr
  59. 59. Some CSSSectioning elements need a line break:header, nav, section,article, aside, footer { display: block }
  60. 60. HTML5 ShivIn IE8- new tags are recognized so theyneed to be created.document.createElement(‘header’);document.createElement(‘section’);etc.HTML5 Shiv determines browser versionand creates the elements for us if needed.
  61. 61. Modernizr.jsO ers a 3.7k javascript file you can add toyour project.Includes the HTML5 shivUses feature detection to easily control fallbacksWorks with both HTML5 and CSS3 elements
  62. 62. CSS3the presentation layer coming soon
  63. 63. SourcesBecause I didn’t make this stu up.Up to Speed on HTML5 & CSS3 M.Jackson Wilkinson and Jason GarberHTML5 the 30,000’ View Peter LubbersEcho HTML5 John Dyer and Nathan SmithIn Control 2010 HTML5 Christopher SchmiThe Future of the Web: HTML5 Derek BenderSemantics of HTML5 Jesh BarlowDive into HTML5 Mark PilgrimW3Schools.comHTML5 Doctor h p://html5doctor.com/about/HTML5 for Web Designers Jeremy Keith
  1. A particular slide catching your eye?

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

×