SlideShare a Scribd company logo
1 of 77
HTML5
    Report Card
Web Directions South 2010
This talk online
http://www.slideshare.net/
sideshowbarker/html5-report-card
Michael(tm) Smith
mike@w3.org
http://people.w3.org/mike
sideshowbarker
 …on Twitter*, GitHub, etc.
I work for the W3C
  in Japan, based
 at Keio University
     near Tokyo
My official W3C title is:
Special Missions Subsection
   Junior Floor Manager
I’m here today to try to
give a progress update on
HTML5, in the form of a
       report card.
Evaluating HTML5
•   HTML5 ancillary materials
• HTML5 tools support
•   HTML5 features spec’ed
•   HTML5 features implemented
•   HTML5 and accessibility
HTML5 ancillary materials:
       grade:   B -
Ancillary materials are
complements to the spec.
Ancillary materials are the
 materials that most of us
learn from directly (rather
   than the spec itself).
HTML5 differences
     from HTML4

http://w3.org/TR/html5-diff/
Hands-on/
 one-stop shopping
http://html5rocks.com/
Tutorials/how-to
guides for authors
Several print books from
   Jeremy Keith, Bruce
 Lawson & Remy Sharp,
   Mark Pilgrim, more
Dive into HTML5
http://diveintohtml5.org/
The HTML5 Doctors

http://html5doctor.com/
Alternative
authoring references
HTML5:
The Markup Language Reference

http://dev.w3.org/html5/
markup
HTML5: The Markup Language
  Reference is an alternative
front-end to the HTML5 spec
HTML5:
Edition for Web Authors
http://dev.w3.org/html5/
spec-author-view
Breaking news:
  Significant redesign from
Ben Schwarz + Anthony Kolber

      #html5author
HTML5: Edition for Web
Authors is an author-friendly
   subset of the spec that
omits implementation details
Fork me!
http://github.com/benschwarz/
html5forAuthors
http://github.com/sideshowbarker/
html5forAuthors
Bonus:
   Annotated JavaScript/
 EcmaScript 5 spec in HTML*
http://sideshowbarker.github.com/
es5-spec/
New!

http://html5accessibility.com/
…from Steven Faulkner
   @stevefaulkner
HTML5accessibility.com gives
 info about which HTML5 user
interface features are usable by
 people who rely upon assistive
technology (AT) to use the Web.
HTML5
Accessibility workarounds

http://html5accessibility.com/
index-aria.html
Any ancillary materials
I’m missing and should
  mention next time?
HTML5 tools support:
     grade:   C+
HTML5 Validator
     (stable)
http://validator.nu
HTML5 Validator
      (unstable)
http://w3.org/html/check
HTML5, CSS3, etc.,
  feature detection

http://modernizr.com/
The professional badass’s base
  HTML/CSS/JS template for a
fast, robust and future-proof site!

http://html5boilerplate.com/
Any HTML5 tool/
library support I’m
missing and should
mention next time?
Adobe Dreamweaver
  & Illustrator CS5
   HTML5 Packs
HTML5: The Good Parts
• Syntax simplifications: A+
• HTML5 parsing algorithm: A+
• MathML & SVG integration: A+
• New elements/attributes: A+
• New APIs for scripting: A+
HTML5: More Good Parts

• HTML5 design principles: ?
• maintain XHTML support: ?
Syntax simplifications
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0
       Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!doctype html>
<meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
<meta charset="UTF-8">
New elements
• <video> & <audio> (no plugins)
• <canvas> (2D/3D image scripting)
• <article>, <section>, <header>
• <details>, <progress>, <meter>...
•   <ruby> (annotations)
• all SVG elements (MathML too)
New attributes
• for client-side validation of forms
  + form controls: date picker, &c.
• draggable (drag-and-drop)
• marking up context menus
• contenteditable (editable pages)
• spellcheck (turn off spell checking)
Crap removal
•<frame>, <frameset>
• <a name>
• more...
New APIs for scripting
• API for <video> & <audio>
• 2D drawing API for <canvas>
• 3D <canvas> API: WebGL*
• getElementsByClassName()
• innerHTML and more…
New APIs for scripting

• Web Storage (local + session)
• Indexed Database (non-SQL)
• Web Messaging (cross-doc/postmg+)
•   Web Workers
• WebSocket API + Protocol
“Friends of HTML5” APIs
•Geolocation
• Device Orientation/Motion
• File API (w/ HTML5 Drag & Drop)
• Selectors API
• Audio API* (sampling+synthesis)
“HTML5” has become
 shorthand for “The
Open Web Platform”.
Web-Platform formats:
 HTML5, CSS3, SVG,
ARIA, and… JavaScript
HTML design principles

http://w3.org/TR/html-design-principles/
HTML design principles

•   Support existing content
•   Ensure interoperability
•   Precisely define UA behavior
•   Handle errors (non-draconian)
•   Evolution not revolution
•   “Priority of constituencies”
Important point:
HTML5 includes XHTML
Even more important point:
IE9+ fully supports XHTML
Grading some specific
  HTML5 features
Two ways to grade
        spec features
•   Does the feature meet market
    needs and user and developer
    needs well or not?
•   Is the feature currently well-
    supported in browsers or not?
Let’s start by grading
some features on how
well they meet market/
 user/developer needs
getElementsByClassName
   spec grade:   A+
Interactive & UI elements
         <details>,
  <progress>, <meter>
    spec grade:   B+
New structural elements
 <article>, <section>
      grade:   B ?
<canvas> 2D
spec grade:   B-/D- ?
<canvas> 3D
spec grade:   B+/D- ? 
<video>
spec grade:   B+/C- ?
Let’s grade some features
   on how well they are
  currently supported in
         browsers
Example: drag & drop
interopability:   D- ?
That’s it.
Thank you.
Michael(tm) Smith
mike@w3.org
http://people.w3.org/mike
sideshowbarker
 …on Twitter*, GitHub, etc.
More Breaking News
Steven Faulkner and
   Bruce Lawson
a.k.a. The A-Team:
Australia Tour 2010
19 November
to 1 December
Sydney, Canberra,
   Melbourne,
Brisbane, Perth(!)
Buy these men
    beers!
More info
http://wipa.org.au/html5/
http://lanyrd.com/2010/
the-a-team-aria-html5/
More: Steve Faulkner & Hans
  Hillen talk at Fronteers

   http://slideshare.net/
   stevefaulkner/html5-
   accessibility-is-it-ready-yet
“Accessibility is
 always bolted on…
the earlier it is bolted
on, the more robust.”

More Related Content

What's hot

Social Networking Project
Social Networking ProjectSocial Networking Project
Social Networking Project
jessduff44
 
Cyber bullying slide share
Cyber bullying slide shareCyber bullying slide share
Cyber bullying slide share
br03wood
 
Digital footprint presentation
Digital footprint presentationDigital footprint presentation
Digital footprint presentation
sahrdebeck52
 

What's hot (20)

Social Media & Business Marketing
Social Media & Business MarketingSocial Media & Business Marketing
Social Media & Business Marketing
 
Problems of Well-Being - Technology disadvantages and advantages in our society
Problems of Well-Being - Technology disadvantages and advantages in our societyProblems of Well-Being - Technology disadvantages and advantages in our society
Problems of Well-Being - Technology disadvantages and advantages in our society
 
Advantages and disadvantages of social media
Advantages and disadvantages of social mediaAdvantages and disadvantages of social media
Advantages and disadvantages of social media
 
Social media
Social mediaSocial media
Social media
 
Social Media
Social MediaSocial Media
Social Media
 
E safety assembly
E safety assemblyE safety assembly
E safety assembly
 
แนะนำ Metaverse
แนะนำ Metaverseแนะนำ Metaverse
แนะนำ Metaverse
 
Social media
Social mediaSocial media
Social media
 
Social media
Social mediaSocial media
Social media
 
Social Networking Project
Social Networking ProjectSocial Networking Project
Social Networking Project
 
Cyber bullying slide share
Cyber bullying slide shareCyber bullying slide share
Cyber bullying slide share
 
Cyber security for children
Cyber security for childrenCyber security for children
Cyber security for children
 
Whatsapp
WhatsappWhatsapp
Whatsapp
 
Social Media Presentation
Social Media PresentationSocial Media Presentation
Social Media Presentation
 
Future Communication Technologies
Future Communication TechnologiesFuture Communication Technologies
Future Communication Technologies
 
Digital footprint presentation
Digital footprint presentationDigital footprint presentation
Digital footprint presentation
 
Social media Challenges and Advantage
Social media Challenges and AdvantageSocial media Challenges and Advantage
Social media Challenges and Advantage
 
Social media
Social mediaSocial media
Social media
 
How To Be A Social Media Butterfly
How To Be A Social Media ButterflyHow To Be A Social Media Butterfly
How To Be A Social Media Butterfly
 
Social media
Social mediaSocial media
Social media
 

Viewers also liked

HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
User Vision
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 

Viewers also liked (9)

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
HTML5 and CSS3
HTML5 and CSS3HTML5 and CSS3
HTML5 and CSS3
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
TestPlan for IIT website
TestPlan for IIT websiteTestPlan for IIT website
TestPlan for IIT website
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Angular 2
Angular 2Angular 2
Angular 2
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic Web
 

Similar to HTML5 Report Card

HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
Berg Brandt
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 

Similar to HTML5 Report Card (20)

HTML 5
HTML 5HTML 5
HTML 5
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
HTML5
HTML5HTML5
HTML5
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
 
Html5
Html5Html5
Html5
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Html5
Html5Html5
Html5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 

Recently uploaded

Recently uploaded (20)

Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

HTML5 Report Card

Editor's Notes