1. Transitioning to HTML5 and CSS3 Patrick Carey, Cengage Learning Author

2. Innovations Browsers Languages 2008200719971998199920002001200220032004200520092006 HTML 3.2 W3C Rec. HTML 4.0 W3C Rec. HTML 3.2 W3C Rec. HTML 4.0 W3C Rec. HTML 4.01 W3C Rec. HTML 4.01 W3C Rec. HTML 5 Draft HTML 5 Draft HTML 5 working group HTML 5 working group XHTML 1.0 W3C Rec. XHTML 1.0 W3C Rec. XHTML 1.1 W3C Rec. XHTML 1.1 W3C Rec. XHTML 2 Draft XHTML 2 Draft IE 4 IE 5 IE 6 IE 7 IE 8 NS 4 NS 4.7 NS 6 NS 7 FF 1 FF 2 FF 3 Facebook podcasting youtube iTunes CSS 2.0 W3C Rec. CSS 2.0 W3C Rec. CSS 3.0 Draft CSS 3.0 Draft MySpace AJAX SAF 1 SAF 2 SAF 3 SAF 4 twitter blogging RSS Web Commerce Web Conferencing 20102011 iPhone iPad IE 9 FF 3.5 FF 4 SAF 5 GC 1 GC 3 GC 8 GC 10 XHTML 2 Halted XHTML 2 Halted HTML 5 Can. Rec. (2012) HTML 5 Can. Rec. (2012)

3. HTML5 Differences from HTML4  New structural elements  Web forms  Support for audio and video  Modified existing HTML4 elements and attributes  Removal of outdated HTML4 elements and attributes  New APIs for Web applications  Extensions to the DOM

4. New HTML4 Structural Elements  Header and footers ohgroup oheader ofooter  Content elements osection oarticle oaside  Navigation onav  Figures ofigure ofigcaption

5. HTML4 DIV-itis

6. HTML5 Structural Elements …

7. Elements Absent in HTML5  Presentational Elements obasefont, big, center, font, strike, tt, u  Frames oframe, frameset, noframes  Redundant Elements oacronym (use abbr ) oapplet (use object ) odir (use ul ) oisindex (use form controls)

8. Attributes Absent in HTML5  Presentational Attributes o align, background, bgcolor, hspace, vspace  Table Attributes o border, char, cellpadding, cellspacing, nowrap, valign, width  Hypertext Attributes o alink, link, text  Frame Attributes o frameborder, scrolling, marginheight, marginwidth

9. New HTML5 APIs  API for playing audio and video  API to enable offline Web applications  API for creating editable content  Drag & Drop API  Canvas API  Web Messaging API

10. HTML Enhancements to the DOM  getElementsByClassName()  innerHTML to parse or serialize an HTML or XML document  activeElement to determine which element currently has the focus

11. New HTML5 Web Forms  New input types otype="tel" (phone numbers) otype="search" (search boxes) otype="url" otype="email" otype="number" (spin boxes) otype="range" (slider) otype="color" (color picker) otype="date" (calendar picker)  placeholder attribute  form attribute to associate fields with forms

12. Form Validation  Attributes to constrain input: oautocomplete omin, max, step omultiple opattern orequired  form validation is on by default (turn off using novalidate attribute)

13. Audio in HTML5  New audio element for embedded audio osrc, preload, autoplay, loop, and control attributes o Scriptable  Codecs Natively Supported by Major Browsers BrowserWAVOgg VorbisMP3 IE Firefox Safari Chrome Opera

14. Video in HTML5  New video element for embedded video osrc, poster, preload, autoplay, loop, control attributes o Scriptable  Codecs Natively Supported by Major Browsers BrowserWebMOgg TheoraMPEG-4 H.264 IE Firefox Safari Chrome Opera

15. New with CSS3  Expanded selectors  Opacity filters  HSL color model  Rounded and elongated corners  Background image styles  Drop shadows  Media queries  Transitions and Animations  Multi-column layouts

16. Supporting HTML5 and CSS3  Many features can and should be used today  Employ progressive enhancement to deliver the best user experience  Make sure that Web pages degrade gracefully  Don't ask for perfect repeatability

17. Example 1: HTML5 and CSS3

18. Example 2: Web Forms

19. Example 3: Audio and Video

20. Contact Information Patrick Carey Carey Associates 8502 Miller Road Verona, WI 53593 (608) 832-6313 patrick1@careys.com