Downloaded 784 times
Uploaded byDerek Bender
The Future of the Web: HTML5
Work on HTML5 began in 2004 through a collaborative effort between the W3C and WHATWG. It introduces new semantic elements, supports embedded video and audio, introduces the canvas element for drawing, and improves forms. While the specification is still in development, browser support is increasing and many of the new features can be used now to have cleaner code and stay ahead of changes. However, lack of support in some browsers and the evolving specification mean disadvantages include things may change and not work everywhere.
More Related Content
![HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]](https://cdn.slidesharecdn.com/ss_thumbnails/html5semanticsaccessibilityforms-101031220859-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Old] Curso de programação web dia 01](https://cdn.slidesharecdn.com/ss_thumbnails/oldcursodeprogramaowebdia01-171108165635-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to The Future of the Web: HTML5
The Future of the Web: HTML5
- 1. the FUTURE ofthe WEB: HTML 5
- 2. the FUTURE ofthe WEB: HTML 5
- 3. Work started in2004 Collaborative effort between the W3C HTML Working Group & the WHATWG the FUTURE of the WEB: HTML 5
- 4. The WHATWG Web HypertextApplication Technology Working Group and many other individuals... the FUTURE of the WEB: HTML 5
- 5. The W3C World Wide Web Consortium An international community that develops standards to ensure the long-term growth of the Web. the FUTURE of the WEB: HTML 5
- 6. the NEW stuff finally! the FUTURE of the WEB: HTML 5
- 7. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> the FUTURE of the WEB: HTML 5
- 8. the FUTURE ofthe WEB: HTML 5
- 9. the FUTURE ofthe WEB: HTML 5
- 10. new ELEMENTS structural elements: • header • nav • section • article • aside • footer the FUTURE of the WEB: HTML 5
- 11. the FUTURE ofthe WEB: HTML 5
- 12. new ELEMENTS the FUTURE of the WEB: HTML 5
- 13. <video> & <audio> <videosrc=”video.mp4”>back up content here</video> <audio src=”audio.mp3”>back up content here</audio> controls fully stylable with CSS autobuffer boolean attribute specifying whether to buffer in advance loop repeated play, duh autoplay play from page load, duh the FUTURE of the WEB: HTML 5
- 14. more NEW elements • hgroup • details • summary • mark • output • progress • menu • nsfw? the FUTURE of the WEB: HTML 5
- 15. canvas <canvas width=”150” height=”150”> fallback content here </canvas> the FUTURE of the WEB: HTML 5
- 16. APIs • drag & drop • document editing • offline app caching • simple client storage • structured client storage • cross-document messaging • getElementByClassName the FUTURE of the WEB: HTML 5
- 17. block-level LINKS <a href=”#” class=”story”> <img src=”img.png” /> <h4>Title here</h4> <p>Text here</p> </a> the FUTURE of the WEB: HTML 5
- 18. webforms 2.0 new input types • color • url • number • range • time • email • month • search • date • tel • datetime • week • datetime-local <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5
- 19. webforms 2.0 new attributes • required • autocomplete • autofocus • pattern (formatting) • and more! <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5
- 20. deprecated ELEMENTS drop it like its hot • center • font • frameset (finally!!!!) • strike you’re safe for now <blink> and <marquee> the FUTURE of the WEB: HTML 5
- 21. HTML5 is awesome! I know, stay calm the FUTURE of the WEB: HTML 5
- 22. But what aboutsupport? Glad you asked... the FUTURE of the WEB: HTML 5
- 23. The future isalready here. It’s just not very evenly distributed. William Gibson the FUTURE of the WEB: HTML 5
- 24. the BROWSERS but what about... the FUTURE of the WEB: HTML 5
- 25. the BROWSERS 2011 the FUTURE of the WEB: HTML 5
- 26. Should I startusing HTML 5 now? Sure. the FUTURE of the WEB: HTML 5
- 27. benefits of HTML5 • cleaner markup • additional semantics for new elements • new form elements take out hassle of scripting forms • staying ahead of the curve • makes you feel really smart the FUTURE of the WEB: HTML 5
- 28. downsides of HTML5 • spec not finished and likely to change • not everything works in every browser • you look like a pretentious jerk when you brag to your friends the FUTURE of the WEB: HTML 5
- 29. Evolution, not revolution. the FUTURE of the WEB: HTML 5
- 30. As of Feb2010 HTML5 is still at Working Draft stage in the W3C. HTML5 has been at Last Call in the WHATWG since October 2009. the FUTURE of the WEB: HTML 5
- 31. TAKEAWAYS • started in 2004 • starting to see widespread browser support • more semantic • I Webforms 2.0! • IE9 in 2011 the FUTURE of the WEB: HTML 5
- 32. Resources & links W3CWorking Draft http://dev.w3.org/html5/spec/Overview.html HTML5 Doctor http://html5doctor.com/ ALA article http://www.alistapart.com/articles/previewo tml5 Web Forms 2.0 spec http://www.whatwg.org/specs/web-forms/current-work/ HTML5 site gallery http://www.1stwebdesigner.com/inspiration/ultra-modern-websites-html5/ O’Reilly article http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html Modernizr http://www.modernizr.com the FUTURE of the WEB: HTML 5
- 33. I’m derekbender @derekbender derekbender.com & mymoustacheand.me slideshare.net/derekbender nfistudios.com memberfuse.com Thanks the FUTURE of the WEB: HTML 5
Editor's Notes
- #2 .
- #5 WHATWG is a growing community of people interested in evolving the Web. Focuses on the development of HTML and APIs needed for Web applications. Founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004 and now has many individuals representing all corners of the web.
- #6 International community that develops standards to ensure the long-term growth of the Web.
- #7 now on to the new stuff in html5!
- #11 here is an example of what most peoples markup looks like pluses: straight forward, familiar negatives: cluttered &#x201C;div soup&#x201D;, high possibility of people misnaming, relies on trust if multiple people work on it what about the guy who name his divs after tv shows?
- #12 confusing to the guy who comes afterwards greysanatomy, howd that get in there?
- #13 Provides new semantic vocabulary for parts of a page previously served by DIVs with IDs and Class attributes.
- #14 clear, semantic code
- #15 Allows for associating captions with embedded content. can be used with video, audio, pullquotes, images and more
- #17 hgroup represents a grouping of headings. The element is used to group H tags when the heading has multiple levels, such as subheadings, alternative titles, or taglines details element represents a widget from which the user can obtain additional information or controls summary can be a caption, or legend for the rest of the contents of the details element. mark element represents a text highlighted for reference purposes output element represents the result of a calculation. progress represents the completion progress of a task, like a loading bar menu element represents a list of commands nsfw tag would have been AWESOME!!!!!!!
- #18 Canvas provides an API for drawing directly in the browser using Javascript. Can be used to draw graphs, charts and simple animations. The tag allows any SVG graphics to be created on the fly with fallback content provided to legacy browsers.
- #19 In addition to specifying markup, HTML5 specifies scripting application programming interfaces
- #20 One new and exciting thing you can do in HTML 5 is wrap links round &#x201C;block-level&#x201D; elements. Instead of markup that looks like this, with html5 <a> tags can wrap block level elements and cut down on the amount of markup needed
- #21 One new and exciting thing you can do in HTML 5 is wrap links round &#x201C;block-level&#x201D; elements. Instead of markup that looks like this, with html5 <a> tags can wrap block level elements and cut down on the amount of markup needed
- #22 not just limited to: text, password, submit, file, etc
- #23 Required to indicate that the user must enter a value Autocomplete accepts either on or off, if off the browser will not be allowed to store the value Autofocus give focus to the element, helpful for the first element on a form Pattern specifies a format or pattern to match
- #25 I know, stay calm.
- #31 google properly indexes html5 sites if using for client work keep to the simpler stuff thats supported use Modernizr to help with older browser support (js that helps update your markup/css for older browsers)
- #34 Like everything on the web, html is constantly evolving & changing. by no means will it solve everyones problems, BUT it seems to be a great leap forward.
- #35 Ian Hickson, editor of the HTML5 specification, expects the specification to reach the W3C Candidate Recommendation stage during 2012 Today many parts of the specification are stable and may be implemented into products