Sunday 12 August 2012

HTML 5 Demos and Examples


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

DemoSupportTechnology
Stream video and filter with canvasie: nonefirefox: noneopera: livesafari: nonechrome: nightlygetUserMedia canvas
Stream video to the browser
Also works on Opera Mobile 12
ie: nonefirefox: noneopera: livesafari: nonechrome: nightlygetUserMedia
Drag and drop and XHR uploadie: nightlyfirefox: liveopera: nonesafari: nonechrome: livefile dnd xhr2
Hidden propertyie: nonefirefox: liveopera: livesafari: livechrome: livehidden
Simple class manipulationie: nonefirefox: liveopera: livesafari: livechrome: liveclasslist
Storage eventsie: livefirefox: liveopera: livesafari: livechrome: livestorage
dataset (data-* attributes)ie: nonefirefox: liveopera: livesafari: livechrome: livedataset
History API using pushStateie: nonefirefox: liveopera: livesafari: livechrome: livehistory
Browser based file reading Not part of HTML5ie: nonefirefox: liveopera: livesafari: nonechrome: livefile-api
Drag files directly into your browser Not directly part of HTML5ie: nonefirefox: liveopera: nonesafari: nonechrome: livefile-api dnd
Simple chat clientie: nonefirefox: nightlyopera: nightlysafari: livechrome: livewebsocket
Two videos playing in syncie: livefirefox: liveopera: livesafari: livechrome: livevideo
Interactive canvas gradientsie: livefirefox: liveopera: livesafari: livechrome: livecanvas
Canvas & Videoie: livefirefox: liveopera: livesafari: livechrome: livevideo canvas
Videoie: livefirefox: liveopera: livesafari: livechrome: livevideo
Canvasie: livefirefox: liveopera: livesafari: livechrome: livecanvas
Content Editableie: livefirefox: liveopera: livesafari: livechrome: livecontenteditable storage
Geolocation Works on Safari Mobile tooie: livefirefox: liveopera: livesafari: livechrome: livegeolocation
postMessage same domainie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
postMessage cross domainie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
drag and dropie: livefirefox: liveopera: livesafari: livechrome: livednd
drag anythingie: livefirefox: liveopera: livesafari: livechrome: livednd
offline detection Works on Safari Mobile tooie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
navigator.onLine tests Doesn't use events, only pollsie: livefirefox: liveopera: livesafari: nonechrome: noneoffline
on/offline event testsie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
offline application using the manifest FF 3.6 is still buggy - doesn't request manifest after initial loadie: nonefirefox: liveopera: livesafari: livechrome: liveoffline manifest
Storageie: livefirefox: liveopera: livesafari: livechrome: livestorage
Web SQL Database Storageie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web SQL Database - rollback testie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web Workers watch out - uses a lot of CPU!example without - will hang your browserie: nonefirefox: liveopera: livesafari: livechrome: liveworkers
All content, code, video and audio is Creative Commons Share Alike 2.0
HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

HTML5


HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software.[2] It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997)[3] and, as of August 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not onlyHTML 4, but XHTML 1 and DOM Level 2 HTML as well.[3]
Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents.[4] It is also an attempt to define a singlemarkup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.[5] For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011 research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013.[6]
In particular, HTML5 adds many new syntactical features. These include the new <video><audio> and <canvas> elements, as well as theintegration of scalable vector graphics (SVG) content that replaces the uses of generic <object> tags and MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietaryplugins and APIs. Other new elements, such as <section><article><header> and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a><cite> and <menu> have been changed, redefined or standardized. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification.[5] HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.