HTML5
1 like795 views
HTML5 is an evolution of the HTML standard that aims to improve semantics, introduce new APIs, and support new multimedia features. Some key points: - It was first proposed in 2004 by the Web Hypertext Application Technology Working Group (WHATWG) and later endorsed by the W3C. - New semantic elements like <header>, <nav>, <article>, and <footer> were introduced to better describe document sections. - Multimedia capabilities were expanded with new <video>, <audio>, and <canvas> elements. - Form validation and new input types like email, url, number and date were added. - Offline web apps, local storage, and drag and drop were
HTML5
- 1. HTML5
- 2. HISTORY 1981 Tim Berners Lee proposes an internet-based hypertext system proposal 1981
- 3. HISTORY 1989 Tim Berners Lee writes a memo proposing an internet-based hypertext system proposal memo 1981 1989
- 4. HISTORY 1991 HTML tags first mentioned in PUBLIC! gone proposal memo public 1981 1989 1991
- 5. HISTORY 1993 1.0 gone proposal memo public 1.0 1981 1989 1991 1993
- 6. HISTORY 1995 2.0 gone proposal memo public 1.0 2.0 1981 1989 1991 1993 1995 1996 CSS 1.0
- 7. HISTORY 1997 4.0 gone W3C proposal 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 XHTML proposal 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 WHATWG proposal 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 W3C proposal 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 W3C proposal 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 W3C proposal 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 HTML5 proposal 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 HTML5 proposal 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
- 16. New Doctype NEW <?DOCTYPE html> OLD <?DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “h p://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd”>
- 17. Character Set NEW <meta charset="utf-8" /> OLD <meta h p-equiv="Content-Type" content="text/html; charset=utf-8" />
- 18. Javascript Embed NEW <script> </script> OLD <script type="text/javascript"> </script>
- 19. Styles Embed NEW <style> </style> OLD <style type="text/css"></script>
- 20. Stylesheet Linking NEW <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 Links You can now wrap links <li> around block-level <a href="page.html"> elements, rather than <img src="pic.jpg"> having to create links around every element <h3>Title</h3> inside the block <p>Text</p> element. </a> </li>
- 23. “drop it like Removed Tags it’s hot” big applet center dir u basefont frame s, strike frameset font noframes acronym
- 24. New Tags Provides new <HEADER> semantic vocabulary for parts of a page <NAV> previously served by DIVs with ID and Class a ributes. <SECTION> IE requires some workarounds using <ASIDE> JavaScript to make <ARTICLE> these elements work. <FOOTER>
- 25. <figure> Allows for <FIGURE> associating captions with embedded content, including videos, audio, pullquotes, or images. CONTENT (IMG,VIDEO,ETC.) <LEGEND>
- 26. <video> CODECS/CONTAINER IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID Theora+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 WAV Firefox 3.6+ yes - yes Safari 5+ - yes yes Chrome 6 yes yes - Opera 10.5+ yes - yes IE 9 - yes yes ATTRIBUTES src 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 a known 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 the progress 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 Uses Highlighting search terms on a page Directing a ention to a word or phrase Adding emphasis
- 33. WEB FORMS! New A ributes required autocomplete placeholder autofocus
- 34. required <input type="text" required > The required a ribute specifies that an input field must be filled out before submi ing.
- 35. autocomplete <input type="text" autocomplete > The autocomplete a ribute specifies that the form or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.
- 36. placeholder <input type="text" placeholder="Search..." > The placeholder a ribute provides a hint that describes the expected value of an input field.
- 37. autofocus <input type="text" autofocus > The autofocus a ribute specifies that a field should automatically get focus when a page is loaded.
- 38. WEB FORMS (cont) Input Types search number email range url date tel color
- 39. search <input type="search"> The search field behaves like a regular text field. Some browsers add special styling and/or functionality for clearing. + mobile
- 40. email <input type="email"> Used for input fields that should contain an e-mail address. + mobile
- 41. url <input type="url"> Used for input fields that should contain a URL address. + mobile
- 42. number <input type="number"> used for input fields that should contain a numeric value. + mobile
- 43. number <input type="number"> used for input fields that should contain 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 should contain numbers only + mobile
- 45. range <input type="range" min="0" max="10" step="2" value="6"> Used for input fields that should contain a 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 that should contain a color
- 48. NEW API’s Drag and Drop Canvas Cross-Document Messaging SVG Web Storage O line Web Apps
- 49. drag’n drop Allows objects (images and links, by default) to be dragged and then dropped onto a target. h p://instantsprite.com
- 50. cross doc messaging Cross Document Messaging allows documents of di erent domains to communicate. Sending document can call postMessage() and receiving document listens for a ‘message’ event.
- 51. web storage “The sessionStorage DOM a ribute stores session data for a single window, like cookies on crack.” <input type="checkbox" onchange=" localStorage.insurance=checked " /> + mobile
- 52. o line web apps Allows the client to <html manifest="/cache.manifest"> refer directly to its CACHE MANIFEST cache for certain index.html resources even help.html while o line. style/default.css images/logo.png Resources under images/background.png "network" are never cached NETWORK: server.cgi + mobile
- 53. canvas svg scalable vector graphics Canvas is like making a Making layers that retain flat drawing without distinctive shapes. Like layers. Like a whiteboard. construction paper. + mobile + mobile
- 54. geolocation Allows users to share their location for location-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 networking Users 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 just not very evenly distributed” William Gibson
- 57. PROGRESSIVE DEGRAHANCEMENT graceful degradation & progressive enhancement start awesome start with necessary strip features/fallbacks for enhance for more capable lesser browsers browsers
- 58. implementations making the magic happen Some CSS HTML5 Shiv Modernizr
- 59. Some CSS Sectioning elements need a line break: header, nav, section, article, aside, footer { display: block }
- 60. HTML5 Shiv In IE8- new tags are recognized so they need to be created. document.createElement(‘header’); document.createElement(‘section’); etc. HTML5 Shiv determines browser version and creates the elements for us if needed.
- 61. Modernizr.js O ers a 3.7k javascript file you can add to your project. Includes the HTML5 shiv Uses feature detection to easily control fallbacks Works with both HTML5 and CSS3 elements
- 62. CSS3 the presentation layer coming soon
- 63. Sources Because I didn’t make this stu up. Up to Speed on HTML5 & CSS3 M.Jackson Wilkinson and Jason Garber HTML5 the 30,000’ View Peter Lubbers Echo HTML5 John Dyer and Nathan Smith In Control 2010 HTML5 Christopher Schmi The Future of the Web: HTML5 Derek Bender Semantics of HTML5 Jesh Barlow Dive into HTML5 Mark Pilgrim W3Schools.com HTML5 Doctor h p://html5doctor.com/about/ HTML5 for Web Designers Jeremy Keith