View
215
Download
0
Embed Size (px)
Citation preview
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
Contact Information
Patrick CareyCarey Associates8502 Miller RoadVerona, WI 53593(608) [email protected]