Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Future of the Web: HTML5

18,992 views

Published on

Overview of the new HTML5

Published in: Technology

The Future of the Web: HTML5

  1. the FUTURE of the WEB: HTML 5
  2. the FUTURE of the WEB: HTML 5
  3. Work started in 2004 Collaborative effort between the W3C HTML Working Group & the WHATWG the FUTURE of the WEB: HTML 5
  4. The WHATWG Web Hypertext Application 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 of the WEB: HTML 5
  9. the FUTURE of the WEB: HTML 5
  10. new ELEMENTS structural elements: • header • nav • section • article • aside • footer the FUTURE of the WEB: HTML 5
  11. the FUTURE of the WEB: HTML 5
  12. new ELEMENTS the FUTURE of the WEB: HTML 5
  13. <video> & <audio> <video src=”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 about support? Glad you asked... the FUTURE of the WEB: HTML 5
  23. The future is already 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 start using 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 Feb 2010 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 W3C Working 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

×