The Future of Web Page Design Presented by: Patrick Carey
“HTML is an incredible success story, it is the most successful document format ever.” “HTML is a mess! … rather than being designed, [it] just grew, by different people just adding stuff to it.” -Steve Pemberton, Chair of the HTML Working Group at the W3C
Innovations Browsers Languages HTML 2.0 Specifications HTML 2.0 Specifications 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 1 NS 2 NS 4 NS 4.7 NS 6 NS 7 FF 1 FF 2 FF 3 IE 2 Facebook podcasting youtube iTunes CSS 1.0 W3C Rec. CSS 1.0 W3C Rec. 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 IE 3 NS 3 twitter blogging W3C RSS Web Commerce Web Conferencing
XHTML 2 As generic XML as possible Less presentation, more structure More usability More accessibility Better internationalization More device independence Less scripting Integration with the Semantic Web
SVG XHTML 2 and Modular Design XHTML 2 XForms MathML XSLT RSS
Validating an XHTML 2 Document
HTML 5 and the WHATWG
Goals of the WHATWG and HTML 5 Document real-world browser behavior Document and standardize useful extensions Develop practical new features Ensure backward compatibility Define robust error handling
Error Handling Across Browsers a b c STRONG EM #text: a #text: b #text: c p EM STRONG EM #text: a #text: b #text: c p STRONG EM #text: a #text: b #text: c p
Sample XHTML 2 Document <?xml-stylesheet type="text/css" href=" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2//EN" " <html xmlns=" xml:lang="en" xmlns:xsi=" xsi:schemaLocation=" XHTML 2 Sample A sample XHTML2 document
Sample HTML 5 Document HTML 5 Sample A sample HTML 5 document
Page Structure under HTML 4
Roles in XHTML 2 Role ValueDescription mainMain content in a document. Content that is directly related to or expands upon the central topic of the page. complementaryAny section of the document that supports but is separable from the main content, but is semantically meaningful on its own even when separated from it. navigationA collection of links suitable for use when navigating the document or related documents. bannerA banner is usually defined as the advertisement at the top of a web page. contentinfoThis is information about the content on the page. For example, footnotes, copyrights, links to privacy statements, etc. would belong here. definitionThe contents of the associated element represent a definition (e.g., of a term or concept). noteThe content is parenthetic or ancillary to the main content of the resource. seealsoIndicates that the element contains content that is related to the main content of the page. searchThis is the search section of a web document.
Page Structure with XHTML 2 Roles <div role="navigation">
Navigation Lists Links Home Products Support Contact Us Links Home Products Support Contact Us XHTML 2 HTML 5
Generic Sections in XHTML 2 This is a top level heading... This is a second level heading... This is a third level heading... This is a top level heading... This is a second level heading... This is a third level heading... XHTML 2 HTML 4
Generic Sections in HTML 5 Red Delicious These bright red apples are the most common found in many supermarkets. section element
Page Structure with HTML 5 …
Hypertext in XHTML 2 and HTML 5 Return to the home page XHTML 2 HTML 5 Return to the home page
Images in XHTML 2 and HTML 5 Cengage Learning XHTML 2 HTML 5 <h src="logo.png" srctype="image/png" title="logo image"> The Future of HTML
Embedded Media in XHTML 2 Theme Song Demonstration Film Loading movie … audio & video <object src="clock.class" srctype="application/x-java-applet"> This user agent cannot process a java applet. applet
Embedded Media in HTML 5 Your browser does not support the audio element. Your browser does not support the video element. audio & video object
Audio and Video in HTML 5 <source src="clip.3gp" type="video/3gpp" media="handheld"> <source src="clip.ogv" type="video/ogg; codecs=theora, vorbis"> source element
Scripted Media in HTML 5 var movie = document.getElementById("movie"); Movie Clip Play Pause << Rewind source element
Web Graphic Technology Editable static images Accessibility High-quality printing User Interaction Integrates with other XML vocabularies Embedded text Compatible with XHTML 2 and HTML 5 Script-based scene graph Programmatic generation of images Drawing pixels Constant performance Supported by HTML 5 Not supported by XHTML 2 SVG (Scalable Vector Graphics)Canvas
XForms Richer and more flexible standard than HTML forms Separates data model from presentation Uses XML to define form data Stores and transports data from XML documents Allows for validation and constraining of input before submission Validation rules can be written use data types defined in XML Schema XPath can be used for addressing and calculating values Allows for multi-stage forms without the need for scripting Compatible with XHTML 2 Not compatible with HTML 5
XForms Example Search Find HTML 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2//EN" " <html xmlns=" xml:lang="en" xmlns:f=" Search Find Go XHTML 2
XForms & SVG Sample Page in Firefox
Web Forms in HTML 5 Retains the original HTML forms structure Adds new data types for data input Adds new behavior for some form elemens Provides rudimentary type and validity checking Provides extensions to submit buttons Adds an event model for form events fired by form elements Adds procedures for handling unexpected element values
Input Controls in HTML 5 KeywordData typeControl type text Text with no line breaksText field search Text with no line breaksSearch field url An absolute IRIA text field An address or list of addressesA text field datetime A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC A date and time control number A numerical valueA text field or spinner control range A numerical value, with the extra semantic that the exact value is not importantA slider control or similar color An sRGB color with 8-bit red, green, and blue componentsA color well checkbox A set of zero or more values from a predefined listA checkbox radio An enumerated valueA radio button
Data Validation in HTML 5 Name: Password: Age: Comments:
Other New XHTML 2 Elements key metal device used to open a lock pitch of the voice The new tag can group common definition terms and/or descriptions, clarifying the relationship between a term and its definitions function writeCells(){ for (var i=0; i <= 10; i++) { document.write(" "); } The tag replaces the and tags to mark blocks of computer code Course Technology Cengage Learning The tag replace the tag to act as a separator between topical sections Course Technology Cengage Learning The tag replaces the tag to mark single lines of text within block-level elements
Other New HTML 5 Elements King of Swamp Castle One day, lad, all this will be yours. Prince Herbert What, the curtains? The new tag can be used to mark up a conversation Movie Ranking The tag represents a measurement that can be displayed in a bar graph widget Percent Completed The tag shows the completion of a task and can be displayed with a widget Today is Thursday The tag marks a date/time value as indicated by the datetime attribute Welcome to Las Vegas The tag represents a run of text highlighted for reference purposes The tag provides an autocomplete feature on list, giving users a list of predefined options that automatically appears and is filtered as the user enters data into the list box
Some other elements not supported … basefont big center font s strike tt u acronym abbr applet isindex dir frame frameset noframes by XHTML 2 & HTML 5 by XHTML 2 br small b i hr iframe
Attributes No Longer Supported … align alink vlink bgcolor border cellpadding cellspacing char charoff clear compact height hspace marginheight marginwidth noshade nowrap rules scrolling by XHTML 2 & HTML 5 size valign frame frameborder
APIs in XHTML 2 and HTML 5 Browser Window object DOM Level 3 Events XPath specifications Timed events Non-HTTP networking, Client-side persistent data storage Drag and drop objects Monitoring downloads File uploads XHTML 2 Client-side persistent data storage An offline Web application API (similar to Google Gears). Drag and drop objects A network API allowing communication using TCP. Browser history API Cross-document messaging Server-sent events in combination with the new event-source element. HTML 5
Where do We Stand with XHTML 2? Poor XHTML support by Internet Explorer hinders development "Most of XHTML 2 already works in existing browsers" -W3C Working Draft 26 July 2006 "We declined to participate in the XHTML2 Working Group because we think XHTML2 is not an appropriate technology for the Web." -Maciej Stachowiak of Apple, January 2007
Browser Support for HTML 5 Source:
Browser Support for HTML 5 Source:
Browser Support for HTML 5 Source:
Browser Support for HTML 5 Source:
Browser Support for HTML 5 Source:
Browser Support for HTML 5 Source:
HTML 5 Development Timeline First W3C Working Draft in October Last Call Working Draft in October Call for contributions for the test suite in Candidate Recommendation in First draft of test suite in Second draft of test suite in Final version of test suite in Reissued Last Call Working Draft in Proposed Recommendation in 2022 Source:
Links ResourceURL A List Apart Articles Semantics in HTML 5http:// Alternate Gateways » About XHTML 2http:// Alternate Gateways » To be XHTML or to not be XHTML - that is the questionhttp:// Browser Statisticshttp:// Christian Simms ’ s Weblog » Blog Archive » SVG vs. Canvas less-filling/ Coming Soon in HTML 5 _For_Firefox Comparison of layout engines (HTML 5) Conversation With XHTML 2 Teamhttp://xhtml.com/en/future/conversation-with-xhtml-2-team/ Digital Web Magazine - HTML5, XHTML2, and the Future of the Web web.com/articles/html5_xhtml2_and_the_future_of_the_web/ Digital Web Magazine - Markup as a Crafthttp:// How HTML 5 Is Already Changing the Web e_Web HTML 5 Support by Browser Opera Continues to Lead the Packhttp://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.html HTML 5 vs. XHTML 2 An Article Roundup and Pollhttp://css-tricks.com/html-5-vs-xhtml-2-an-article-roundup-and-poll/
Links (cont.) ResourceURL HTML 5 Won t Be Ready Until 2022DOT Yes 2022DOT __2022DOT HTML V5 and XHTML V2http:// infoq A Look at the First HTML 5 Working Drafthttp:// infoq XHTML 2 and HTML 5 continue to divergehttp:// Kata Technenhttp://katatechnen.net/blog/2008/05/07/use-case-svgmathml-html5/ New elements in HTML 5http:// RDFa Primerhttp:// Setting the Standards HTML 5 vs. XHTML php The future of HTML, Part 1 WHATWGhttp:// The future of HTML, Part 2 XHTML 2.0http:// The Future of HTMLhttp://lachy.id.au/slides/future-of-html/ The Philosophy of HTML 5 as Explained by Ian Hicksonhttp:// When can I use... Will HTML5 bring about better markup authoringhttp://
Resources (cont.) ResourceURL X-HTML 5 Versus XHTML 2http://xhtml.com/en/future/x-html-5-versus-xhtml-2/ XHTML 2 vs. HTML 5http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/ XHTML Introductionhttp:// xhtml2 Accessible, Usable, Device Independent and Semantichttp:// XHTML2 {u-a}nd XFormshttp://
Contact Information Patrick Carey