Html5

2,268 views

Published on

What happened to XHTML 2.0 and how did HTML5 come about? What kind of new features (many already supported in modern browsers) are driving HTML5 adoption? HTML5 is the flavor of html you will be writing for the next 10 years. Time to get started!

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,268
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5 vs XHTML 2 The Future of Web Development Ben MacNeill User Interface Designer, eXtension NC State University May 26, 2010 http://www.slideshare.net/chillnc/
  2. 2. Spoiler: XHTML 2 Loses http://www.flickr.com/photos/21402026@N05/3714619072/
  3. 3. No really, it’s dead. “Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed.” - www.w3.org, July 2nd, 2009
  4. 4. HTML 2.0 (IETF)
  5. 5. IETF => W3C
  6. 6. HTML 4.01 (W3C)
  7. 7. HTML 4.01 XHTML 1.0 tag-for-tag identical, different syntax
  8. 8. Why XHTML (in 1999) • Emergence of web standards • Browsers starting supporting CSS • More structured markup was welcomed • Easier to parse • Extensible (SVG, MathML)
  9. 9. mime type http://www.flickr.com/photos/janlewandowski/3210986710/
  10. 10. content= "text/html" VS content= "application/xhtml+xml"
  11. 11. XHTML 1.1 (real XML) http://www.flickr.com/photos/indi/132659074/
  12. 12. Draconian Error Handling (all because there's a missing <p> tag)
  13. 13. XHTML 2.0 (W3C)
  14. 14. http://www.flickr.com/photos/samjudson/47940677/
  15. 15. WHATWG Web Hypertext Application Technology Working Group
  16. 16. Web Forms 2.0 Web Apps 1.0
  17. 17. Meanwhile, XHTML 2 is doing just fine http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
  18. 18. HTML5 (WHATWG => W3C)
  19. 19. XHTML 2 is still doing fine http://www.flickr.com/photos/lstcaress/1451618395/
  20. 20. HTML5 features showing up
  21. 21. Er... http://www.flickr.com/photos/smailtronic/2817629219/
  22. 22. Nothing to be scared of “If you are currently creating websites with any version of HTML, you’re already using HTML5” - Jeremy Keith
  23. 23. So What is HTML5? • New form elements • New semantic elements • Video and canvas elements • Offline caching • Local database API
  24. 24. Start Today <!DOCTYPE html>
  25. 25. Already support many HTML5 features 9
  26. 26. New Semantic Elements <section> <header> <footer> <nav> <article>
  27. 27. IE: Never Fails to Disappoint <style type="text/css"> article {display:block; border:1px solid red;} </style> ... <article> <h1>Welcome to Initech</h1> <p>This is your <span>first day</span>.</p> </article> • no styles, empty node http://diveintohtml5.org/semantics.html#unknown-elements
  28. 28. The Hack <script> document.createElement("article"); </script> • HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/ • Works all the back to IE6 • just create it, don't have to insert into DOM http://diveintohtml5.org/semantics.html#unknown-elements
  29. 29. Awesome New Form Elements <input type="search"> for search boxes <input type="number"> for spinboxes <input type="range"> for sliders <input type="color"> for color pickers <input type="tel"> for phone numbers <input type="url"> for web addresses <input type="email"> for email addresses <input type="date"> for calendar date pickers <input type="time"> for timestamps
  30. 30. type="email" = Contextual Keyboards
  31. 31. Other form goodies • placeholder text (FF, S, C, Op) • automatic input validation (O) • autofocus fields (S,C,O)
  32. 32. <video>
  33. 33. *not really Apple's response source: http://yfrog.com/83n4fp
  34. 34. Offer HTML5 <video> • CNN • NPR • Reuters • The White House • New York Times • Sports Illustrated • Vimeo • Flickr • Time • CBS • ESPN • MSNBC http://www.apple.com/ipad/ready-for-ipad/
  35. 35. <canvas> http://mrdoob.com/projects/harmony/
  36. 36. Writing to Canvas function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } http://diveintohtml5.org/canvas.html#shapes
  37. 37. Offline Web Apps • Offline caching • Local database API <html manifest="/cache.manifest"> localStorage or SQL engine
  38. 38. Further Reading • Dive into HTML5 http://diveintohtml5.org/ (hopefully coming out in June. Looks great!) • http://www.alistapart.com/articles/a-brief-history-of-markup/ • http://dev.w3.org/html5/markup/spec.html • http://www.alistapart.com/articles/previewofhtml5 Thanks! http://www.slideshare.net/chillnc/ http://delicious.com/chillnc/html5

×