introduction to html5 - world wide web consortium (w3c)
TRANSCRIPT
![Page 1: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/1.jpg)
Introductionto HTML5
![Page 3: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/3.jpg)
I work for the W3Cin Japan, based
at Keio Universitynear Tokyo
![Page 4: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/4.jpg)
My official W3C title is: Special Missions
Subsection Junior Interim Floor Manager
![Page 5: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/5.jpg)
Where to start learning about HTML5?
![Page 6: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/6.jpg)
HTML5 differences from HTML4
http://w3.org/TR/html5-diff/
![Page 7: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/7.jpg)
Tutorials andhow-to guidance
![Page 10: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/10.jpg)
Alternative authoring references
![Page 11: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/11.jpg)
HTML5 (Author Edition)
http://dev.w3.org/html5/spec-author-view
![Page 12: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/12.jpg)
HTML5: The Markup Language
http://dev.w3.org/html5/markup
![Page 13: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/13.jpg)
HTML5 differences
•Syntax simplifications
•MathML and SVG integration
•New elements/attributes added
• Removed old elements/attributes
• Added new APIs for scripting
![Page 14: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/14.jpg)
Syntax simplifications
![Page 15: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/15.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 16: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/16.jpg)
<!doctype html>
![Page 17: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/17.jpg)
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
![Page 18: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/18.jpg)
<meta charset="Shift_JIS">
![Page 19: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/19.jpg)
New elements
•<video> & <audio> (no plugins)
• <canvas> (scriptable image)
• <ruby> (annotations)
• <article>, <section>, <header>
•<details>, <progress>, more...
![Page 20: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/20.jpg)
New attributes• draggable (drag-and-drop)
• contenteditable (editable pages)
• spellcheck (catch spelling errors)
• new form attributes (for client- side validation, plus new form controls such as date picker, etc.)
![Page 21: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/21.jpg)
Elements and attributes removed or obsoleted
•<frame>, <frameset>
•<a name>
•more...
![Page 22: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/22.jpg)
New APIs for scripting
•API for <video> & <audio>
• 2D drawing API for <canvas>
• getElementsByClassName()
• innerHTML
•more...
![Page 23: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/23.jpg)
HTML design principles
http://w3.org/TR/html-design-principles/
![Page 24: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/24.jpg)
HTML design principles
• Support existing content
• Ensure interoperability
• Precisely define UA behavior
•Handle errors (non-draconian)
• Evolution not revolution
![Page 25: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/25.jpg)
Important point:HTML5 includes XHTML
![Page 26: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/26.jpg)
Frequently Asked Questions (FAQ) about the future of XHTML
http://w3.org/2009/06/xhtml-faq.html
![Page 27: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/27.jpg)
About error handling...
![Page 28: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/28.jpg)
• Well-formed XML: <input disabled="disabled"/> • Empty attribute: <input disabled> • Without quotes: <input value=yes> • Single quotes: <input type='checkbox'/> • Double quotes: <input name="be evil"/>
Which of these are errors?
![Page 29: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/29.jpg)
<i><b>misnested tags</i></b>
This is a real error
![Page 30: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/30.jpg)
HTML5 defines how browsers can handle real errors interoperably and
gracefully.
![Page 31: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/31.jpg)
Why is it important to handle errors?
![Page 32: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/32.jpg)
More than 93% of Alexa Top 500 sites
contain are not conformant XHTML
![Page 33: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/33.jpg)
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”.
![Page 34: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/34.jpg)
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”.
![Page 36: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/36.jpg)
The Open Web Platform.
![Page 37: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/37.jpg)
Formats:HTML, CSS, SVG,
ARIA, even JavaScript
![Page 38: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/38.jpg)
The server side can be considered a black box.
![Page 39: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/39.jpg)
The open Web platform also includes APIs.
![Page 40: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/40.jpg)
Device-independent,language-independent
APIs.
![Page 41: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/41.jpg)
APIs that browsers expose to Web
applicationson the client-side
![Page 42: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/42.jpg)
Open Web Platform=
formats + APIs
(formats=HTML, CSS, SVG, etc.)
![Page 43: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/43.jpg)
HTML5:The Web platform as an
application development/runtime environment
![Page 44: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/44.jpg)
Other app-dev environments:iPhone SDK, Android
SDK, J2ME/MIDP, BREW, Symbian,Flash
![Page 45: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/45.jpg)
APIs spun off HTML5
• Canvas 2D Context API
• (Canvas 3D API: WebGL*)
• Web Storage API
• Indexed Database API (non-SQL)
![Page 46: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/46.jpg)
APIs spun off HTML5
• Web Workers API
• Web Messaging APIs (cross-doc/postmg + channel messaging)
• WebSocket API + Protocol; & Server-Sent Events
![Page 47: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/47.jpg)
Formats related to HTML5
• Microdata + Microdata API & RDFa + RDFa API
• WAI-ARIA1.0 (add accessibility to Web apps)
![Page 48: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/48.jpg)
APIs spun off HTML5
• Canvas 2D Context API
• Canvas 3D API: WebGL *
• Web Storage API
• Indexed Database API (non-SQL)
![Page 49: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/49.jpg)
Other APIs
•Geolocation
•Device Orientation + Compass
•File API (w/ HTML5 Drag & Drop)
![Page 50: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/50.jpg)
Other APIs
•Selectors API
•DOM Level 3 Events
•DOM4 + Element Traversal
![Page 51: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/51.jpg)
Other APIs
•XMLHttpRequest 1.0 & 2.0
•Cross-Origin Resource Sharing
![Page 52: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/52.jpg)
HTML5, CSS3, etc., feature detection
http://modernizr.com/
![Page 53: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/53.jpg)
HTML5 milestones 2010
• We aim to have HTML5 start Last Call (LC) in 2010
•To start Last Call:
• spec is feature complete
• all HTML WG issues resolved
![Page 54: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/54.jpg)
HTML5 milestones 2010
•To get to end of Last Call:
•collect comments from community
•respond to all comments
![Page 55: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/55.jpg)
That’s it.
![Page 56: Introduction to HTML5 - World Wide Web Consortium (W3C)](https://reader030.vdocument.in/reader030/viewer/2022020702/61fb101b2e268c58cd59b764/html5/thumbnails/56.jpg)
Thank you.