Prolog:
HTML5 features that
work in browsers now
• canvas element: scriptable image
• video and audio elements: embed
  interactive video and audio
  easily, without plugi...
• API for offline Web applications:
  ApplicationCache

• APIs for client-side data storage
  per-session (sessionStorage)
...
•   postMessage() mechanism for
    cross-document messaging

•   API for native drag-and-drop
    (without need for scrip...
December 1997
December 1997:
 HTML4 published as
W3C Recommendation
In other words...
It’s been ten years since
 the last major update
to the HTML language.
So have we all just been
  sitting around on the
 boat doing nothing for
   the last ten+ years?
Well, no...
Work on Web
 technologies at the
W3C was focusing on
some other things...
XML, XML Schema,
XForms, XHTML2...
XHTML 2.0 seems to me the live
proof that something is going wrong
    at W3C... I strongly suggest
 dropping all XHTML 2....
Meanwhile, elsewhere...
September 2003:
Opera CTO Håkon Lie
 first announces what
      will become
    Web Forms 2.
Web Forms 2
 represented the early
beginnings of the work
  that led to HTML5.
April 2004:
Web Applications 1.0,
  which eventually
 becomes HTML5.
June 2004:
W3C workshop on
Web applications, a
turning point that
     led to...
June 2004:
WHATWG launched,
 with Apple, Opera,
 Mozilla on board.
The dream of a new web, based on
XHTML+SVG+SMIL+XForms, is just
 that — a dream... The best way to
  help the Web is to in...
“HTML is the assembly
 language of the Web.”
Web Forms 2,
Web Applications 1.0...
So who actually wrote
     the drafts?
Ian “Hixie” Hickson
March 2007:
W3C launches a new
HTML Working Group
 to work on HTML5.
Co-chairs:
 Dan Connolly, W3C
Chris Wilson, Microsoft
http://esw.w3.org/topic/
     HTML/history
What’s the value
proposition for the
  HTML5 work?
HTML5 makes life
easier and better for
  Web developers.
How?
HTML5 increases
interoperability, reduces
 need for UA sniffing &
  multiple code paths.
HTML5 provides better
  feature parity with
  proprietary single-
vendor stuff like Flash.
Frankly, HTML5 also
provides new business
opportunities for Web
   professionals like
      yourselves.
So what exactly does
“HTML5” consist of?
•The HTML5 spec itself

• Support for HTML5 features in
 4 major browser engines and in
 other applications

•HTML5 parsin...
How many of you have
read some part of the
HTML5 spec in detail?
The HTML5
spec itself...
A wee bit overloaded.
Focuses mostly on
specifying conformance
 criteria for browsers.
Introduces many
    new APIs.
But also conflates
 conformance criteria
  for HTML content
authors into same spec.
Would like to have a
separate spec for just
 the HTML5 markup
   language itself?
That is, a spec for the
    HTML5 markup
 language without the
APIs and browser spec?
The HTML5 draft
provides a formal spec
for HTML parsing and
    error handling.
HTML is not XML.
HTML is not SGML.
Most HTML content is
not well-formed XML.
•
Well-formed XML:
     <input disabled=quot;disabledquot;>

•
Empty attribute: <input disabled>

•
Without quotes: <input...
More than 93% of
Alexa Top 500 sites
   are not valid.
We need to specify error handling
 behavior to ensure interoperability
“even in the face of documents that
  do not comply...
Authors will write invalid content
 regardless of what we spec. So the
 spec states “what authors must not
do, and then te...
Don’t get hung up on syntax.
HTML5 defines HTML as an abstract
   language with two standard
 syntaxes supported by browsers:

• a text/html syntax, wi...
Similarly, applications can potentially
 represent HTML in memory in any
           number of ways.
However, there’s only one standard
in-memory representation supported
    by browsers: The W3C DOM.

The HTML5 spec precis...
Simplify where we can.
<!DOCTYPE html PUBLIC
  quot;-//W3C//DTD XHTML 1.0
        Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/
DTD/xht...
<!DOCTYPE html>
<meta http-equiv=quot;Content-Typequot;
content=quot;text/html; charset=utf-8quot;>
<meta charset=quot;utf-8quot;>
• canvas element: scriptable image
• video and audio elements: embed
  interactive video and audio
  easily, without plugi...
• API for offline Web applications:
  ApplicationCache

• APIs for client-side data storage
  per-session (sessionStorage)
...
•   postMessage() mechanism for
    cross-document messaging

•   API for native drag-and-drop
    (without need for scrip...
Demos:
http://www.whatwg.org/
   demos/2008-sept/
Somewhat related
work outside of the
core HTML5 effort...
• SVG in Opera, Mozilla, WebKit
• CSS transforms/animations

• CSS3 Selectors
• Selectors API
• XMLHttpRequest level 1 and 2
• Access Control for Cross-Site
 Requests

• native JSON support in browsers
• JavaScript 3...
Upcoming SlideShare
Loading in …5
×

Michael(tm) Smith: HTML5 at Web Directions South 2008

5,772 views
5,263 views

Published on

HTML5 overview at Web Directions South 2008

Published in: Technology, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,772
On SlideShare
0
From Embeds
0
Number of Embeds
608
Actions
Shares
0
Downloads
129
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Michael(tm) Smith: HTML5 at Web Directions South 2008

  1. Prolog: HTML5 features that work in browsers now
  2. • canvas element: scriptable image • video and audio elements: embed interactive video and audio easily, without plugins • new form attributes & APIs, for client-side form validation & new native form widgets in browsers
  3. • API for offline Web applications: ApplicationCache • APIs for client-side data storage per-session (sessionStorage) and persistently across sessions (localStorage and client-side SQL database storage)
  4. • postMessage() mechanism for cross-document messaging • API for native drag-and-drop (without need for script library) • native getElementsByClassName • more...
  5. December 1997
  6. December 1997: HTML4 published as W3C Recommendation
  7. In other words... It’s been ten years since the last major update to the HTML language.
  8. So have we all just been sitting around on the boat doing nothing for the last ten+ years?
  9. Well, no...
  10. Work on Web technologies at the W3C was focusing on some other things...
  11. XML, XML Schema, XForms, XHTML2...
  12. XHTML 2.0 seems to me the live proof that something is going wrong at W3C... I strongly suggest dropping all XHTML 2.0 efforts in favor of a new “xHTML 5.0” language. Clearly a successor to HTML 4, feature-oriented, made for the web. Daniel Glazman, December 2002
  13. Meanwhile, elsewhere...
  14. September 2003: Opera CTO Håkon Lie first announces what will become Web Forms 2.
  15. Web Forms 2 represented the early beginnings of the work that led to HTML5.
  16. April 2004: Web Applications 1.0, which eventually becomes HTML5.
  17. June 2004: W3C workshop on Web applications, a turning point that led to...
  18. June 2004: WHATWG launched, with Apple, Opera, Mozilla on board.
  19. The dream of a new web, based on XHTML+SVG+SMIL+XForms, is just that — a dream... The best way to help the Web is to incrementally improve the existing web standards... so that web content authors can actually deploy new formats interoperably. Brendan Eich, June 2004
  20. “HTML is the assembly language of the Web.”
  21. Web Forms 2, Web Applications 1.0... So who actually wrote the drafts?
  22. Ian “Hixie” Hickson
  23. March 2007: W3C launches a new HTML Working Group to work on HTML5.
  24. Co-chairs: Dan Connolly, W3C Chris Wilson, Microsoft
  25. http://esw.w3.org/topic/ HTML/history
  26. What’s the value proposition for the HTML5 work?
  27. HTML5 makes life easier and better for Web developers.
  28. How?
  29. HTML5 increases interoperability, reduces need for UA sniffing & multiple code paths.
  30. HTML5 provides better feature parity with proprietary single- vendor stuff like Flash.
  31. Frankly, HTML5 also provides new business opportunities for Web professionals like yourselves.
  32. So what exactly does “HTML5” consist of?
  33. •The HTML5 spec itself • Support for HTML5 features in 4 major browser engines and in other applications •HTML5 parsing libraries • validator.nu HTML5 validator
  34. How many of you have read some part of the HTML5 spec in detail?
  35. The HTML5 spec itself...
  36. A wee bit overloaded.
  37. Focuses mostly on specifying conformance criteria for browsers.
  38. Introduces many new APIs.
  39. But also conflates conformance criteria for HTML content authors into same spec.
  40. Would like to have a separate spec for just the HTML5 markup language itself?
  41. That is, a spec for the HTML5 markup language without the APIs and browser spec?
  42. The HTML5 draft provides a formal spec for HTML parsing and error handling.
  43. HTML is not XML. HTML is not SGML.
  44. Most HTML content is not well-formed XML.
  45. • Well-formed XML: <input disabled=quot;disabledquot;> • Empty attribute: <input disabled> • Without quotes: <input value=yes> • Single quotes: <input type='checkbox'> • Double quotes: <input name=quot;be evilquot;>
  46. More than 93% of Alexa Top 500 sites are not valid.
  47. We need to specify error handling behavior to ensure interoperability “even in the face of documents that do not comply to the letter of the specifications”. http://www.whatwg.org/news/start
  48. Authors will write invalid content regardless of what we spec. So the spec states “what authors must not do, and then tells implementors what they must do when an author does it anyway”. Ian Hickson, “Error handling and Web language design”, http://ln.hixie.ch/?start=1074730186
  49. Don’t get hung up on syntax.
  50. HTML5 defines HTML as an abstract language with two standard syntaxes supported by browsers: • a text/html syntax, with parsing rules defined by the HTML5 spec • an XML syntax, with parsing rules defined by the XML spec
  51. Similarly, applications can potentially represent HTML in memory in any number of ways.
  52. However, there’s only one standard in-memory representation supported by browsers: The W3C DOM. The HTML5 spec precisely defines the DOM representation that browsers must use to represent HTML content in memory.
  53. Simplify where we can.
  54. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;>
  55. <!DOCTYPE html>
  56. <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;>
  57. <meta charset=quot;utf-8quot;>
  58. • canvas element: scriptable image • video and audio elements: embed interactive video and audio easily, without plugins • new form attributes & APIs, for client-side form validation & new native form widgets in browsers
  59. • API for offline Web applications: ApplicationCache • APIs for client-side data storage per-session (sessionStorage) and persistently across sessions (localStorage and client-side SQL database storage)
  60. • postMessage() mechanism for cross-document messaging • API for native drag-and-drop (without need for script library) • native getElementsByClassName • more...
  61. Demos: http://www.whatwg.org/ demos/2008-sept/
  62. Somewhat related work outside of the core HTML5 effort...
  63. • SVG in Opera, Mozilla, WebKit • CSS transforms/animations • CSS3 Selectors • Selectors API
  64. • XMLHttpRequest level 1 and 2 • Access Control for Cross-Site Requests • native JSON support in browsers • JavaScript 3.1 “Harmony”

×