Transcript Document
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
HTML 3.2
W3C Rec.
HTML 2.0
Specifications
HTML 4.01
W3C Rec.
HTML 5
working group
HTML 5
Draft
HTML 4.0
W3C Rec.
XHTML 1.0
W3C Rec.
Languages
CSS 1.0
W3C Rec.
XHTML 2
Draft
XHTML 1.1
W3C Rec.
CSS 2.0
W3C Rec.
CSS 3.0
Draft
Browsers
NS 1
IE 2
IE 3
NS 2
NS 3
IE 4
IE 5
NS 4
NS 4.7
SAF 1
SAF 2
IE 6
NS 6
Web Conferencing
W3C
1994
blogging
Web Commerce
1995
1996
1997
1999
2000
IE 7
IE 8
FF 2
FF 3
AJAX
iTunes
RSS
1998
SAF 4
NS 7
FF 1
Innovations
SAF 3
2001
2002
podcasting
Facebook
MySpace
youtube
2003
2004
2005
twitter
2006
2007
2008
2009
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
XHTML 2 and Modular Design
RSS
XHTML 2
MathML
XSLT
SVG
XForms
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>
p
STRONG
#text: a
EM
#text: b
p
p
EM
#text: c
STRONG
STRONG
#text: a
#text: b
EM
#text: a
#text: c
#text: b
EM
#text: c
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="links">
<div id="mainContent">
<div class="article">
<div id="footer">
<div
id="sidebar">
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="navigation">
<div role="main">
<div
role="complementary">
<div role="contentinfo">
<div
role="wai:sitemap">
Navigation Lists
XHTML 2
HTML 5
<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>
Generic Sections in XHTML 2
HTML 4
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>
Generic Sections in HTML 5
section element
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most
common found in many supermarkets.
</p>
</section>
Page Structure with HTML 5
<header> … </header>
<nav> … </nav>
<section> … </section>
<article> … </article>
<footer> … </footer>
<aside> …</aside>
Hypertext in XHTML 2 and HTML 5
XHTML 2
HTML 5
<p href="index.html" hreflang="fr">
Return to the home page
</p>
<a href="index.hmtl">
<p>Return to the home page</p>
</a>
Images in XHTML 2 and HTML 5
XHTML 2
HTML 5
<h src="logo.png" srctype="image/png"
title="logo image">
The Future of HTML
</h>
<figure>
<legend>Cengage Learning</legend>
<img alt="logo image" src="logo.png" />
</figure>
Embedded Media in XHTML 2
audio
& video
<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>
applet
<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>
Embedded Media in HTML 5
audio
& video
<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>
object
<object src="slide.class" width="100" height="50">
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
Audio and Video in HTML 5
source
element
<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>
Scripted Media in HTML 5
source
element
<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>
Web Graphic Technology
SVG (Scalable Vector Graphics)
Editable static images
Accessibility
High-quality printing
User Interaction
Integrates with other XML vocabularies
Embedded text
Compatible with XHTML 2 and HTML 5
Canvas
Script-based scene graph
Programmatic generation of images
Drawing pixels
Constant performance
Supported by HTML 5
Not supported by XHTML 2
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 4
XHTML 2
<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>
<?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>
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>
The <l> tag replaces the <br /> tag to mark
single lines of text within block-level elements
<l>Course Technology</l>
<l>Cengage Learning</l>
</p>
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 …
by XHTML 2 & HTML 5
basefont
big
center
font
s
strike
tt
u
by XHTML 2
acronym
abbr
applet
isindex
dir
br
small
b
i
hr
frame
frameset
noframes
iframe
Attributes No Longer Supported …
by XHTML 2 & HTML 5
align
alink
vlink
bgcolor
border
cellpadding
cellspacing
char
charoff
clear
compact
height
hspace
marginheight
marginwidth
noshade
nowrap
rules
scrolling
size
valign
frame
frameborder
APIs in XHTML 2 and HTML 5
XHTML 2
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
HTML 5
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.
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
Links
Resource
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-orless-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 Team
http://xhtml.com/en/future/conversation-with-xhtml-2-team/
Digital Web Magazine - HTML5, XHTML2, and the Future
of the Web
http://www.digitalweb.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_th
e_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 2022DOT
http://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 2
http://www.cmswire.com/cms/industry-news/setting-the-standards-html-5-vs-xhtml2-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/
Contact Information
Patrick Carey
[email protected]
www.course.com/carey