Download presentation
Presentation is loading. Please wait.
1
The Future of Web Page Design Presented by: Patrick Carey
2
“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
3
Innovations Browsers Languages 1994199519961997199819992000200120022003200420052006200720082009 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
4
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
5
SVG XHTML 2 and Modular Design XHTML 2 XForms MathML XSLT RSS
6
Validating an XHTML 2 Document
7
HTML 5 and the WHATWG
8
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
9
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
10
Sample XHTML 2 Document <?xml-stylesheet type="text/css" href="http://www.w3.org/MarkUp/style/xhtml2.css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/ http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd"> XHTML 2 Sample A sample XHTML2 document
11
Sample HTML 5 Document HTML 5 Sample A sample HTML 5 document
12
Page Structure under HTML 4
13
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.
14
Page Structure with XHTML 2 Roles <div role="navigation">
15
Navigation Lists Links Home Products Support Contact Us Links Home Products Support Contact Us XHTML 2 HTML 5
16
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
17
Generic Sections in HTML 5 Red Delicious These bright red apples are the most common found in many supermarkets. section element
18
Page Structure with HTML 5 …
19
Hypertext in XHTML 2 and HTML 5 Return to the home page XHTML 2 HTML 5 Return to the home page
20
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
21
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
22
Embedded Media in HTML 5 Your browser does not support the audio element. Your browser does not support the video element. audio & video object
23
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
24
Scripted Media in HTML 5 var movie = document.getElementById("movie"); Movie Clip Play Pause << Rewind source element
25
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
26
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
27
XForms Example Search Find HTML 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en" xmlns:f="http://www.w3.org/2002/xforms"> Search Find Go XHTML 2
28
XForms & SVG Sample Page in Firefox
29
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
30
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 email An e-mail address or list of e-mail 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
31
Data Validation in HTML 5 Name: Password: Age: Comments:
32
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
33
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
34
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
35
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
36
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
37
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
38
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
39
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
40
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
41
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
42
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
43
Browser Support for HTML 5 Source: http://a.deveria.com/caniuse
44
HTML 5 Development Timeline First W3C Working Draft in October 2007. Last Call Working Draft in October 2009. Call for contributions for the test suite in 2011. Candidate Recommendation in 2012. First draft of test suite in 2012. Second draft of test suite in 2015. Final version of test suite in 2019. Reissued Last Call Working Draft in 2020. Proposed Recommendation in 2022 Source: http://blogs.techrepublic.com.com/programming-and-development/?p=718
45
Links ResourceURL A List Apart Articles Semantics in HTML 5http://www.alistapart.com/articles/semanticsinhtml5 Alternate Gateways » About XHTML 2http://www.alternategateways.com/resources/xhtml2.php Alternate Gateways » To be XHTML or to not be XHTML - that is the questionhttp://www.alternategateways.com/resources/xhtml_strict.php Browser Statisticshttp://www.w3schools.com/browsers/browsers_stats.asp Christian Simms ’ s Weblog » Blog Archive » SVG vs. Canvas http://csimms.botonomy.com/2006/02/12/svg-vs-canvas-tastes-great-or- less-filling/ Coming Soon in HTML 5 http://www.webmonkey.com/blog/Coming_Soon:_More_HTML_5_Support _For_Firefox Comparison of layout engines (HTML 5)http://en.wikipedia.org/wiki/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 http://www.digital- web.com/articles/html5_xhtml2_and_the_future_of_the_web/ Digital Web Magazine - Markup as a Crafthttp://www.digital-web.com/articles/markup_as_craft/ How HTML 5 Is Already Changing the Web http://www.webmonkey.com/blog/How_HTML_5_Is_Already_Changing_th 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/
46
Links (cont.) ResourceURL HTML 5 Won t Be Ready Until 2022DOT Yes 2022DOT http://www.webmonkey.com/blog/HTML_5_Won_t_Be_Ready_Until_2022DOT_Yes __2022DOT HTML V5 and XHTML V2http://www.ibm.com/developerworks/xml/library/x-html5xhtml2.html infoq A Look at the First HTML 5 Working Drafthttp://www.infoq.com/news/2008/01/html5draft infoq XHTML 2 and HTML 5 continue to divergehttp://www.infoq.com/news/2008/08/xhtml2html5 Kata Technenhttp://katatechnen.net/blog/2008/05/07/use-case-svgmathml-html5/ New elements in HTML 5http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML RDFa Primerhttp://www.w3.org/TR/xhtml-rdfa-primer/ Setting the Standards HTML 5 vs. XHTML 2 http://www.cmswire.com/cms/industry-news/setting-the-standards-html-5-vs-xhtml- 2-002032.php The future of HTML, Part 1 WHATWGhttp://www.ibm.com/developerworks/xml/library/x-futhtml1/ The future of HTML, Part 2 XHTML 2.0http://www.ibm.com/developerworks/xml/library/x-futhtml2.html The Future of HTMLhttp://lachy.id.au/slides/future-of-html/ The Philosophy of HTML 5 as Explained by Ian Hicksonhttp://www.elementary-group-standards.com/html/html5-philosophy-explained When can I use...http://a.deveria.com/caniuse/static.html Will HTML5 bring about better markup authoringhttp://www.zdnetasia.com/techguide/webdev/0,39044903,62046307,00.htm
47
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 2.0 - Introductionhttp://www.w3.org/TR/xhtml2/introduction.html#backCompat xhtml2 Accessible, Usable, Device Independent and Semantichttp://www.w3.org/2005/Talks/05-steven-xtech/ XHTML2 {u-a}nd XFormshttp://www.w3.org/2005/Talks/04-19-steven-XHTML2-XForms/
48
Contact Information Patrick Carey patrick1@careys.com www.course.com/carey
Similar presentations
