Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The world of HTML5

The world of HTML5

Talk about HTML5 given by Liam Green-Hughes, Applications Developer at MetaBroadcast, on March 20th 2013

MetaBroadcast

March 20, 2013
Tweet

More Decks by MetaBroadcast

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. Features! • Semantic markup • Offline & storage • Device

    Access • Connectivity • 3D graphics & effects • Performance & Integration • CSS3 04
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 3D graphics & effects • SVG (great for different devices)

    • Canvas • Web GL: Hardware accelerated graphics • Demo: Cola Factory 11
  11. CSS3 • Transformations • Animation • Gradients • Flexible Box

    Model • Rounded corners • ... and lots more • Demo Border Radius Fun 13
  12. Desktop • Rich web applications • Cross platform • The

    Chromebook • Demo: Adobe Brackets 15
  13. 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
  14. TV • Fragmentation is terrible here! • Google TV web

    apps • Freesat <anytime> • Many TVs support HTML5 • Demo: HTML5 Test scores for TVs 17
  15. 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
  16. 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