HTML5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5

  • 1,336 views
Uploaded on

An overview presentation of the awesomeness of HTML5

An overview presentation of the awesomeness of HTML5

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,336
On Slideshare
1,336
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
51
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5
  • 2. HISTORY 1981 Tim Berners Lee proposes an internet-based hypertext systemproposal 1981
  • 3. HISTORY 1989 Tim Berners Lee writes a memo proposing an internet-based hypertext systemproposal memo 1981 1989
  • 4. HISTORY 1991 HTML tags first mentioned in PUBLIC! goneproposal memo public 1981 1989 1991
  • 5. HISTORY 1993 1.0 goneproposal memo public 1.0 1981 1989 1991 1993
  • 6. HISTORY 1995 2.0 goneproposal memo public 1.0 2.0 1981 1989 1991 1993 1995 1996 CSS 1.0
  • 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. 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. 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. 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. 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. 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. 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. 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. HTML5the content layer
  • 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. Character SetNEW<meta charset="utf-8" />OLD<meta h p-equiv="Content-Type"content="text/html; charset=utf-8" />
  • 18. Javascript EmbedNEW<script> </script>OLD<script type="text/javascript"> </script>
  • 19. Styles EmbedNEW<style> </style>OLD<style type="text/css"></script>
  • 20. Stylesheet LinkingNEW<link rel="stylesheet" href="file.css" />OLD<link rel="stylesheet" href="file.css"type="text/css" media="all" />
  • 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. 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. “drop it likeRemoved Tags it’s hot”big appletcenter diru basefont frames, strike framesetfont noframesacronym
  • 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. <figure>Allows for <FIGURE>associating captionswith embeddedcontent, includingvideos, audio,pullquotes, orimages. CONTENT (IMG,VIDEO,ETC.) <LEGEND>
  • 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. <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. <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. <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. <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. <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. <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. WEB FORMS!New A ributesrequiredautocompleteplaceholderautofocus
  • 34. required<input type="text" required >The required a ribute specifies that an inputfield must be filled out before submi ing.
  • 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. placeholder<input type="text" placeholder="Search..." >The placeholder a ribute provides a hint thatdescribes the expected value of an input field.
  • 37. autofocus<input type="text" autofocus >The autofocus a ribute specifies that a fieldshould automatically get focus when a page isloaded.
  • 38. WEB FORMS (cont) Input Types search number email range url date tel color
  • 39. search<input type="search">The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing. + mobile
  • 40. email<input type="email">Used for input fields that shouldcontain an e-mail address. + mobile
  • 41. url<input type="url">Used for input fields that shouldcontain a URL address. + mobile
  • 42. number<input type="number">used for input fields that shouldcontain a numeric value. + mobile
  • 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. tel<input type="tel">Used for input fields that shouldcontain numbers only + mobile
  • 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. 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. color<input type="color">Used for input fields thatshould contain a color
  • 48. NEW API’sDrag and Drop CanvasCross-Document Messaging SVGWeb StorageO line Web Apps
  • 49. drag’n dropAllows objects (images and links, bydefault) to be dragged and thendropped onto a target.h p://instantsprite.com
  • 50. cross doc messagingCross Document Messagingallows documents ofdi erent domains tocommunicate.Sending document can callpostMessage() andreceiving document listensfor a ‘message’ event.
  • 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. 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. 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. 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. CAN WE EVEN USE THIS STUFF?
  • 56. “The future is already here. It’s justnot very evenly distributed” William Gibson
  • 57. PROGRESSIVEDEGRAHANCEMENTgraceful degradation & progressive enhancement start awesome start with necessary strip features/fallbacks for enhance for more capable lesser browsers browsers
  • 58. implementationsmaking the magic happenSome CSSHTML5 ShivModernizr
  • 59. Some CSSSectioning elements need a line break:header, nav, section,article, aside, footer { display: block }
  • 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. 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. CSS3the presentation layer coming soon
  • 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