The World of HTML5 01

What is it? < ! D O C T Y P E h t m l > • Technically the latest version of the HTML standard... • but really used in relation to HTML, JS & CSS • Periodic Table of the Elements 02

What will it (hopefully) replace? • Requirement for media, games & rich web content is nothing new... • Java Applets • Flash • Does not run on iPhone/iPad • On the way out on Linux and Android • Native apps? 03

Features! • Semantic markup • Offline & storage • Device Access • Connectivity • 3D graphics & effects • Performance & Integration • CSS3 04

Semantic markup 1/2 • Great for search engines! • Stops HTML filtering out metadata... • Better forms • New tags such as < a r t i c l e > and < a s i d e > 05

Semantic markup 2/2 • Microdata! • Could use vocabularies from schema.org < s e c t i o n i t e m s c o p e i t e m t y p e = " h t t p : / / s c h e m a . o r g / P e r s o n " > < s p a n i t e m p r o p = " n a m e " > L i a m G r e e n - H u g h e s < / s p a n > , a n < s p a n i t e m p r o p = " j o b T i t l e " > A p p l i c a t i o n s D e v e l o p e r < / s p a n > a t < s p a n i t e m p r o p = " a f f i l i a t i o n " > M e t a B r o a d c a s t < / s p a n > . < / s e c t i o n > 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 06

Offline & storage • Session & Local storage • Key/Value pairs • Session storage last for as long as the browser window is open • Local storage is restricted to same domain • IndexedDB: store large amounts of data client side • File API • Demo IndexDB NoSQL Query 07

Device Access • Access to features of device such as camera and microphone • Geolocation API • Non keyboard and mouse input, e.g. touchscreens, voice • Demo: Webcam Swiper 08

Connectivity • No need to refresh the page or do an AJAX call anymore. • Web Sockets (push/pull data) - e.g. for chat rooms • Server sent events (push only) - good for notifications • Demo: Echo... 09

Multimedia • No need for plugins to play audio and video (mostly)! • New < v i d e o > and < a u d i o > elements • Can specify more than one version of the file - the browser will select one that it can play • Codec misery, Firefox/MP4/Chrome/Ogg Theora etc. • Mozilla Popcorn: Overlay videos with other content from the web on a timer • Demo: Hipster Dog 10

3D graphics & effects • SVG (great for different devices) • Canvas • Web GL: Hardware accelerated graphics • Demo: Cola Factory 11

Performance & Integration • Web Workers • XMLHttpRequest 2 • Demo: Web Worker 12

CSS3 • Transformations • Animation • Gradients • Flexible Box Model • Rounded corners • ... and lots more • Demo Border Radius Fun 13

Use cases • Desktop • Mobile • TV 14

Desktop • Rich web applications • Cross platform • The Chromebook • Demo: Adobe Brackets 15

Mobile • Creating apps for all platforms is dull • Device independent • Offline capability helps to deal with low/no signal • New features of HTML5 make better use of device capabilities • Demo: Firefox OS 16

TV • Fragmentation is terrible here! • Google TV web apps • Freesat • Many TVs support HTML5 • Demo: HTML5 Test scores for TVs 17

Trough of Disillusionment 18

Issues • Raised expectations (the Shiny Demos problem) • Problems between browsers • Different capabilities • IE6! • Default mobile browsers • People prefer native apps to HTML5 web on mobiles • HTML5 products not making money yet? • Homework? Watch Broken Promises of HTML5 by Christian Heilmann 19

Discuss at the pub! 20

Image Credits • HTML5 logo - W3C http://www.w3.org/html/logo/ • Gartner Hype Cycle - Wikipedia 21

The world of HTML5 Liam Green-Hughes, Metabroadcast • metabroadcast.com • twitter.com/liamgh • [email protected] This presentation uses the Shower HTML5 presentation system: github.com/shower/shower 22