Download as PDF, PPTX
Uploaded byBen MacNeill
Html5
The document discusses the transition from XHTML 2 to HTML5 in web development, highlighting that XHTML 2 has been abandoned while HTML5 introduces new semantic elements, form types, and offline capabilities. It emphasizes the ease of adapting to HTML5 for current website creators. Several features of HTML5, such as video support and enhanced form elements, are also outlined, showcasing its forward-thinking enhancements over previous versions.
More Related Content
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...](https://cdn.slidesharecdn.com/ss_thumbnails/md-craftingimmersiveuiwithe2eandagslshaderveronicaputrianggraini-251124030840-0c677f44-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-themodernstackbuildingwebaiapplicationswithserverless-251124030844-388cf04f-thumbnail.jpg?width=640&height=640&fit=bounds)
Html5
- 1. HTML5 vs XHTML2 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 2Loses http://www.flickr.com/photos/21402026@N05/3714619072/
- 3. No really, it’sdead. “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.
- 5.
- 6.
- 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 (realXML) http://www.flickr.com/photos/indi/132659074/
- 12. Draconian Error Handling (allbecause there's a missing <p> tag)
- 13.
- 14.
- 15. WHATWG Web Hypertext ApplicationTechnology Working Group
- 16. Web Forms 2.0 WebApps 1.0
- 17. Meanwhile, XHTML 2 is doing just fine http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
- 18.
- 19. XHTML 2 isstill doing fine http://www.flickr.com/photos/lstcaress/1451618395/
- 20.
- 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 isHTML5? • New form elements • New semantic elements • Video and canvas elements • Offline caching • Local database API
- 25.
- 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 FormElements <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
- 31.
- 32. Other form goodies •placeholder text (FF, S, C, Op) • automatic input validation (O) • autofocus fields (S,C,O)
- 33.
- 34. *not really Apple'sresponse 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/
- 36.
- 37. Writing to Canvas functiondraw_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