the future of web page design presented by: patrick carey
TRANSCRIPT
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
1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009
HTML 2.0Specifications
HTML 2.0Specifications
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 5Draft
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 1NS 1 NS 2 NS 2 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
IE 2IE 2
Facebook Facebook podcastingpodcasting
youtubeyoutube
iTunes iTunes
CSS 1.0W3C Rec.CSS 1.0
W3C Rec.CSS 2.0
W3C 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
IE 3IE 3
NS 3 NS 3
twitter twitter
blogging blogging
W3C W3C RSS RSS Web CommerceWeb Commerce
Web ConferencingWeb 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<p><strong>a<em>b</strong>c</em>
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 version="1.0" encoding="UTF-8"?><?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">
<head> <title>XHTML 2 Sample</title> </head> <body> <p>A sample XHTML2 document</p> </body>
</html>
Sample HTML 5 Document
<!DOCTYPE html>
<html>
<head> <title>HTML 5 Sample</title> </head> <body> <p> A sample HTML 5 document <img src="sample.png" alt="sample image"> </p> </body>
</html>
Page Structure under HTML 4
<div id="header">
<div id="footer">
<div id="mainContent"><div id="links"> <divid="sidebar">
<div class="article">
Roles in XHTML 2
Role Value Description
main Main content in a document. Content that is directly related to or expands upon the central topic of the page.
complementary Any 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.
navigation A collection of links suitable for use when navigating the document or related documents.
banner A banner is usually defined as the advertisement at the top of a web page.
contentinfo This is information about the content on the page. For example, footnotes, copyrights, links to privacy statements, etc. would belong here.
definition The contents of the associated element represent a definition (e.g., of a term or
concept).
note The content is parenthetic or ancillary to the main content of the resource.
seealso Indicates that the element contains content that is related to the main content of the
page.
search This is the search section of a web document.
Page Structure with XHTML 2 Roles
<div role="banner">
<div role="contentinfo">
<div role="main"><divrole="navigation">
<divrole="wai:sitemap">
<div role="complementary">
Navigation Lists
<nl> <label>Links</label> <li href="/">Home</li> <li href="/products">Products</li> <li href="/support">Support</li> <li href="/contact">Contact Us</li></nl>
<nav> <h1>Links</h1> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/support">Support</a></li> <li><a href="/contact">Contact Us</a><li> </ul></nav>
XHTML 2
HTML 5
Generic Sections in XHTML 2<h1>This is a top level heading</h1><p> ... </p><h2>This is a second level heading</h2><p> ... </p><h3>This is a third level heading</h3><p> ... </p>
<section> <h>This is a top level heading</h> <p> ... </p> <section> <h>This is a second level heading</h> <p> ... </p> <section> <h>This is a third level heading</h> <p> ... </p> </section> </section></section>
XHTML 2
HTML 4
Generic Sections in HTML 5
<section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets. </p></section>
section element
Page Structure with HTML 5
<header> … </header>
<footer> … </footer>
<section> … </section><nav> … </nav> <aside> …</aside>
<article> … </article>
Hypertext in XHTML 2 and HTML 5
<a href="index.hmtl"> <p>Return to the home page</p></a>
XHTML 2
HTML 5
<p href="index.html" hreflang="fr"> Return to the home page</p>
Images in XHTML 2 and HTML 5
<figure> <legend>Cengage Learning</legend> <img alt="logo image" src="logo.png" /></figure>
XHTML 2
HTML 5
<h src="logo.png" srctype="image/png" title="logo image"> The Future of HTML</h>
Embedded Media in XHTML 2
<span src="theme.mp3" srctype="audio/x-mpeg"> Theme Song</span>
<p src="mymovie.mpg" srctype="video/mpeg"> Demonstration Film <standby>Loading movie …</standby></p>
audio& video
<object src="clock.class" srctype="application/x-java-applet"> <param name="height" value="40" valuetype="data" /> <param name="width" value="40" valuetype="data" /> This user agent cannot process a java applet.</object>
applet
Embedded Media in HTML 5
<audio src="theme.mp3" controls="true"> Your browser does not support the audio element.</audio>
<video src="intro.mpg"> Your browser does not support the video element.</video>
audio& video
<object src="slide.class" width="100" height="50"> <param name="Min" value="0" /> <param name="Max" value="10" /></object>
object
Audio and Video in HTML 5
<video poster="poster.jpg"> <source src="clip.3gp" type="video/3gpp" media="handheld"> <source src="clip.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="clip.mp4" type="video/mp4"></video>
<audio> <source src="theme.oga" type="audio/ogg"> <source src="theme.mp3" type="audio/mpeg"></audio>
source element
Scripted Media in HTML 5
<script type="text/javascript"> var movie = document.getElementById("movie");</script>
<video src="clip.mpg" id="movie">Movie Clip</video><p> <button type="button" onclick="movie.play();"> Play </button> <button type="button" onclick="movie.pause();"> Pause </button> <button type="button" onclick="movie.currentTime = 0;"> << Rewind </button></p>
source element
Web Graphic Technology
Editable static imagesAccessibilityHigh-quality printingUser InteractionIntegrates with other XML vocabulariesEmbedded text
Compatible with XHTML 2 and HTML 5
Script-based scene graphProgrammatic generation of imagesDrawing pixelsConstant performance
Supported by HTML 5Not 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
<html> <head><title>Search</title></head> <body> <form action="http://example.com/search" method="get"> <label for="q">Find</label> <input type="text" name="q" /> <br /> <input type="submit" value="Go"> </form> </body></html>
HTML 4
<?xml version="1.0" encoding="UTF-8"?><!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"> <head><title>Search<title> <f:model> <f:submission action="http://example.com/search" method="get" id="fm"/> </f:model> </head> <body> <p> <f:input ref="q"><f:label>Find</f:label></f:input> <f:submit submission="fm"><f:label>Go</f:label></f:submit> </p> </body></html>
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<input type="keyword" />
Keyword Data type Control type
text Text with no line breaks Text field
search Text with no line breaks Search field
url An absolute IRI A text field
email An e-mail address or list of e-mail addresses A 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 value A text field or spinner control
range A numerical value, with the extra semantic that the exact value is not important A slider control or similar
color An sRGB color with 8-bit red, green, and blue components A color well
checkbox A set of zero or more values from a predefined list A checkbox
radio An enumerated value A radio button
Data Validation in HTML 5
<form autocomplete="on"> <p> <label>Name: <input name="name" required="required" pattern="[A-Za-z0-9]+" /> </label> </p> <p> <label>Password: <input name="pwd" required="required" autocomplete="off" /> </label> </p> <p> <label>Age: <input name="age" type="range" min="20" max="80" /> </label> </p> <p> <label>Comments: <textarea name="comments" maxlength="2000"></textarea> </label> </p> <p> <input type="submit" value="Submit Form" /> </p></form>
Other New XHTML 2 Elements<dl>
<di>
<dt>key</dt>
<dd>metal device used to open a lock</dd>
<dd>pitch of the voice</dd>
</di>
</dl>
The new <di> tag can group common definition terms <dt> and/or descriptions <dd>, clarifying the relationship between a term and its definitions
<blockcode>
function writeCells(){
for (var i=0; i <= 10; i++) {
document.write("<td>");
}
}
</blockcode>
The <blockquote> tag replaces the <pre> and <code> tags to mark blocks of computer code
<p>Course Technology</p>
<separator />
<p>Cengage Learning</p>
The <separator /> tag replace the <hr> tag to act as a separator between topical sections
<p>
<l>Course Technology</l>
<l>Cengage Learning</l>
</p>
The <l> tag replaces the <br /> tag to mark single lines of text within block-level elements
Other New HTML 5 Elements<dialog>
<dt>King of Swamp Castle</dt>
<dd>One day, lad, all this will be yours.</dd>
<dt>Prince Herbert</dt>
<dd>What, the curtains?</dd>
</dialog>
The new <dialog> tag can be used to mark up a conversation
<meter>Movie Ranking</meter> The <meter> tag represents a measurement that can be displayed in a bar graph widget
<progress>Percent Completed</progress> The <progress> tag shows the completion of a task and can be displayed with a widget
Today is
<time datetime="2009-03-12">Thursday</time>The <time> tag marks a date/time value as indicated by the datetime attribute
<p>Welcome to <mark>Las Vegas</mark></p> The <mark> tag represents a run of text highlighted for reference purposes
<datalist id="markup">
<option value="XHTML 2" />
<option value="HTML 5" />
</datalist>
The <datalist> 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
acronymabbrappletisindexdir
frameframesetnoframes
by XHTML 2 & HTML 5 by XHTML 2
brsmallbihr
iframe
Attributes No Longer Supported …
alignalinkvlinkbgcolorbordercellpaddingcellspacingcharcharoffclear
compactheighthspacemarginheightmarginwidthnoshadenowraprulesscrolling
by XHTML 2 & HTML 5
sizevalign
frameframeborder
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 downloadsFile 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 APICross-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: http://a.deveria.com/caniuse
Browser Support for HTML 5
Source: http://a.deveria.com/caniuse
Browser Support for HTML 5
Source: http://a.deveria.com/caniuse
Browser Support for HTML 5
Source: http://a.deveria.com/caniuse
Browser Support for HTML 5
Source: http://a.deveria.com/caniuse
Browser Support for HTML 5
Source: http://a.deveria.com/caniuse
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
LinksResource URL
A List Apart Articles Semantics in HTML 5 http://www.alistapart.com/articles/semanticsinhtml5
Alternate Gateways » About XHTML 2 http://www.alternategateways.com/resources/xhtml2.php
Alternate Gateways » To be XHTML or to not be XHTML - that is the question http://www.alternategateways.com/resources/xhtml_strict.php
Browser Statistics http://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 5http://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 Team http://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 Craft http://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_the_Web
HTML 5 Support by Browser Opera Continues to Lead the Pack http://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.html
HTML 5 vs. XHTML 2 An Article Roundup and Poll http://css-tricks.com/html-5-vs-xhtml-2-an-article-roundup-and-poll/
Links (cont.)
Resource URL
HTML 5 Won t Be Ready Until 2022DOT Yes 2022DOThttp://www.webmonkey.com/blog/HTML_5_Won_t_Be_Ready_Until_2022DOT_Yes__2022DOT
HTML V5 and XHTML V2 http://www.ibm.com/developerworks/xml/library/x-html5xhtml2.html
infoq A Look at the First HTML 5 Working Draft http://www.infoq.com/news/2008/01/html5draft
infoq XHTML 2 and HTML 5 continue to diverge http://www.infoq.com/news/2008/08/xhtml2html5
Kata Technen http://katatechnen.net/blog/2008/05/07/use-case-svgmathml-html5/
New elements in HTML 5 http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML
RDFa Primer http://www.w3.org/TR/xhtml-rdfa-primer/
Setting the Standards HTML 5 vs. XHTML 2http://www.cmswire.com/cms/industry-news/setting-the-standards-html-5-vs-xhtml-2-002032.php
The future of HTML, Part 1 WHATWG http://www.ibm.com/developerworks/xml/library/x-futhtml1/
The future of HTML, Part 2 XHTML 2.0 http://www.ibm.com/developerworks/xml/library/x-futhtml2.html
The Future of HTML http://lachy.id.au/slides/future-of-html/
The Philosophy of HTML 5 as Explained by Ian Hickson http://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 authoring http://www.zdnetasia.com/techguide/webdev/0,39044903,62046307,00.htm
Resources (cont.)Resource URL
X-HTML 5 Versus XHTML 2 http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
XHTML 2 vs. HTML 5 http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/
XHTML 2.0 - Introduction http://www.w3.org/TR/xhtml2/introduction.html#backCompat
xhtml2 Accessible, Usable, Device Independent and Semantic http://www.w3.org/2005/Talks/05-steven-xtech/
XHTML2 {u-a}nd XForms http://www.w3.org/2005/Talks/04-19-steven-XHTML2-XForms/
