Html5
•
2 j'aime•832 vues
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!
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à Html5
Similaire à Html5 (20)
Dernier
Dernier (20)
Html5
- 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. Spoiler: XHTML 2 Loses http://www.flickr.com/photos/21402026@N05/3714619072/
- 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
- 5. IETF => W3C
- 7. HTML 4.01 XHTML 1.0 tag-for-tag identical, different syntax
- 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. mime type http://www.flickr.com/photos/janlewandowski/3210986710/
- 10. content= "text/html" VS content= "application/xhtml+xml"
- 11. XHTML 1.1 (real XML) http://www.flickr.com/photos/indi/132659074/
- 12. Draconian Error Handling (all because there's a missing <p> tag)
- 13. XHTML 2.0 (W3C)
- 15. WHATWG Web Hypertext Application Technology Working Group
- 16. Web Forms 2.0 Web Apps 1.0
- 17. Meanwhile, XHTML 2 is doing just fine http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
- 19. XHTML 2 is still doing fine http://www.flickr.com/photos/lstcaress/1451618395/
- 20. HTML5 features showing up
- 21. Er... http://www.flickr.com/photos/smailtronic/2817629219/
- 23. Nothing to be scared of “If you are currently creating websites with any version of HTML, you’re already using HTML5” - Jeremy Keith
- 24. So What is HTML5? • New form elements • New semantic elements • Video and canvas elements • Offline caching • Local database API
- 26. Already support many HTML5 features 9
- 27. New Semantic Elements <section> <header> <footer> <nav> <article>
- 28. 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
- 29. 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
- 30. 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
- 32. Other form goodies • placeholder text (FF, S, C, Op) • automatic input validation (O) • autofocus fields (S,C,O)
- 33. <video>
- 34. *not really Apple's response source: http://yfrog.com/83n4fp
- 35. 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/
- 37. 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
- 38. Offline Web Apps • Offline caching • Local database API <html manifest="/cache.manifest"> localStorage or SQL engine
- 39. 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