Transcript type
Transitioning to HTML5 and CSS3 Patrick Carey, Cengage Learning Author Languages XHTML 1.0 W3C Rec. XHTML 2 Draft XHTML 2 Halted HTML 3.2 W3C Rec. HTML 4.01 W3C Rec. HTML 4.0 W3C Rec. XHTML 1.1 W3C Rec. CSS 2.0 W3C Rec. HTML 5 working group IE 4 IE 5 NS 4 NS 4.7 SAF 1 SAF 2 IE 6 NS 6 1997 1998 iTunes RSS 1999 2000 2001 2002 SAF 4 FF 2 GC 1 GC 3 FF 3 FF 3.5 IE 9 GC 8 GC 10 FF 4 AJAX podcasting Facebook MySpace youtube 2003 SAF 5 IE 8 NS 7 Innovations blogging SAF 3 IE 7 FF 1 Web Commerce HTML 5 Can. Rec. (2012) CSS 3.0 Draft Browsers Web Conferencing HTML 5 Draft 2004 2005 iPhone iPad twitter 2006 2007 2008 2009 2010 2011 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 New HTML4 Structural Elements Header and footers o hgroup o header o footer Content elements o section o article o aside Navigation o nav Figures o figure o figcaption HTML4 DIV-itis <div id="header"> <div id="links"> <div id="mainContent"> <div class="sidebar"> <div id="footer"> <div id="article"> HTML5 Structural Elements <header> … </header> <nav> … </nav> <section> … </section> <aside> … </aside> <footer> … </footer> <article> …</article> Elements Absent in HTML5 Presentational Elements o basefont, big, center, font, strike, tt, u Frames o frame, frameset, noframes Redundant Elements o o o o acronym (use abbr) applet (use object) dir (use ul) isindex (use form controls) 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 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 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 New HTML5 Web Forms New input types o o o o o o o o type="tel" (phone numbers) type="search" (search boxes) type="url" type="email" type="number" (spin boxes) type="range" (slider) type="color" (color picker) type="date" (calendar picker) placeholder attribute form attribute to associate fields with forms Form Validation Attributes to constrain input: o o o o o autocomplete min, max, step multiple pattern required form validation is on by default (turn off using novalidate attribute) Audio in HTML5 New audio element for embedded audio o src, preload, autoplay, loop, and control attributes o Scriptable Codecs Natively Supported by Major Browsers Browser WAV Ogg Vorbis MP3 IE Firefox Safari Chrome Opera Video in HTML5 New video element for embedded video o src, poster, preload, autoplay, loop, control attributes o Scriptable Codecs Natively Supported by Major Browsers Browser WebM Ogg Theora IE Firefox MPEG-4 H.264 Safari Chrome Opera 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 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 Example 1: HTML5 and CSS3 Example 2: Web Forms Example 3: Audio and Video Contact Information Patrick Carey Carey Associates 8502 Miller Road Verona, WI 53593 (608) 832-6313 [email protected]