This document is a presentation on HTML5 and beyond given by Tomoya Asai at JSiSE at Hokkaido University. The presentation covers the current state and future of HTML5, browsers, JavaScript APIs, and new web technologies. It provides examples and references to specifications, browser implementations, and demos related to HTML5 features such as semantic markup, forms, canvas, WebSockets, geolocation, and more.
44. It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to
XML, ... all at once didn't work.
Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
45. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
46.
47.
48. The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hickson http://twitter.com/Hixie/status/4075253361
49. Drag & Drop API
IE6 Safari
Firefox
Ian Hickson http://twitter.com/Hixie/status/4075253361
59. <article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section> ... </section>
</article>
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
84. WHATWG - HTML5 Web Storage
Forms Indexed Database API
The WebSockets API
Canvas 2D Graphics Context
Server-Sent Events
Microdata
Microdata vocabularies XMLHttpRequest Level 2
Cross-document messaging Geolocation API
Channel messaging
Audio Data API
<device> ping="" CSS3 XPath
timed track HTML→Atom SVG MathML
Next Generation of HTML
Web Workers Device Orientation
The WebSocket protocol Touch Events
: WHATWG Spec W3C Spec Non Standard
85. WHATWG - HTML5 W3C - HTML5
Semantic Elements Semantic Elements
Multimedia Elements Multimedia Elements
HTML5 Forms HTML5 Forms
Event model & APIs Event model & APIs
Offline Events Offline Events
Drag & Drop API Drag & Drop API
HTML5 Parser HTML5 Parser
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
HTML5
86. HTML5 Markup Forms
WebFonts The WebSockets API
Canvas 2D Cross-document Messaging
WebGL Server-Sent Events
SVG XMLHttpRequest Level 2
Event Listener Indexed Database API
Drag & Drop API Offline Events
File API Web Storage
Geolocation API Web Workers
Microformats WebM (VP8) Codec
Microdata CSS3 Transitions
XPath ECMAScript 5th
87. HTML5 Markup Forms
WebFonts The WebSockets API
Canvas 2D Cross-document Messaging
WebGL Server-Sent Events
SVG XMLHttpRequest Level 2
Event Listener Indexed Database API
Drag & Drop API Offline Events
File API Web Storage
Geolocation API Web Workers
Microformats WebM (VP8) Codec
Microdata WHATWG
CSS3 Transitions
Canvas HTML5
XPath ECMAScript 5th
227. The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hickson http://twitter.com/Hixie/status/4075253361