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

Transitioning to HTML5 and CSS3

Patrick Carey, Cengage Learning Author

Innovations

Browsers

Languages

200820071997 1998 1999 2000 2001 2002 2003 2004 2005 20092006

HTML 3.2W3C Rec.

HTML 4.0W3C Rec.

HTML 3.2W3C Rec.

HTML 4.0W3C Rec.

HTML 4.01W3C Rec.

HTML 4.01W3C Rec. HTML 5

Draft HTML 5Draft

HTML 5working group

HTML 5working group

XHTML 1.0W3C Rec.

XHTML 1.0W3C Rec.

XHTML 1.1W3C Rec.

XHTML 1.1W3C Rec.

XHTML 2Draft

XHTML 2Draft

IE 4IE 4 IE 5IE 5 IE 6IE 6 IE 7IE 7 IE 8IE 8

NS 4 NS 4 NS 4.7 NS 4.7 NS 6 NS 6 NS 7 NS 7

FF 1 FF 1 FF 2 FF 2 FF 3 FF 3

Facebook Facebook podcastingpodcasting

youtubeyoutube

iTunes iTunes

CSS 2.0W3C Rec.CSS 2.0

W3C Rec.CSS 3.0

Draft CSS 3.0

Draft

MySpaceMySpace

AJAX AJAX

SAF 1SAF 1 SAF 2SAF 2 SAF 3SAF 3 SAF 4SAF 4

twitter twitter

blogging blogging

RSS RSS Web CommerceWeb Commerce

Web ConferencingWeb Conferencing

2010 2011

iPhoneiPhoneiPadiPad

IE 9IE 9

FF 3.5 FF 3.5 FF 4 FF 4

SAF 5SAF 5

GC 1GC 1 GC 3GC 3 GC 8GC 8 GC 10GC 10

XHTML 2Halted

XHTML 2Halted

HTML 5Can. Rec. (2012)

HTML 5Can. Rec. (2012)

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 hgroupo headero footer

Content elementso sectiono articleo aside

Navigationo nav

Figureso figureo figcaption

HTML4 DIV-itis

<div id="header">

<div id="footer">

<div id="mainContent"><div id="links"> <divid="article">

<div class="sidebar">

HTML5 Structural Elements

<header> … </header>

<footer> … </footer>

<section> … </section><nav> … </nav> <article> …</article>

<aside> … </aside>

Elements Absent in HTML5 Presentational Elements

o basefont, big, center, font, strike, tt, u Frames

o frame, frameset, noframes Redundant Elements

o acronym (use abbr)o applet (use object)o dir (use ul)o 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 type="tel" (phone numbers)o type="search" (search boxes)o type="url"o type="email"o type="number" (spin boxes)o type="range" (slider)o type="color" (color picker)o type="date" (calendar picker)

placeholder attribute form attribute to associate fields with forms

Form Validation Attributes to constrain input:

o autocompleteo min, max, stepo multipleo pattern o 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 attributeso 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 MPEG-4 H.264

IE

Firefox

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 CareyCarey Associates8502 Miller RoadVerona, WI 53593(608) [email protected]