1

HTML5 and Chrome

Jan Kleinert (@jankleinert)
Developer Advocate, Google Chrome

http://goo.gl/9N6Bt

Overview
  • New-ish features of HTML5 and Chrome
    • Web fonts
    • Device orientation
    • WebGL
    • Hardware-accelerated 3D CSS
    • Speech Input API
    • Web Audio API
    • FileSystem API
    • Background feature
    • Omnibox API
  • Chrome Web Store
    • What's in the store?
    • Why publish in the store?
    • How to get started
Can I use it today?
http://html5readiness.com
Web fonts?

Arial

Georgia

Tahoma

Times New Roman

Trebuchet MS

Verdana

Web fonts!
Typeface:
Size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate molestie justo, eu aliquet lorem vehicula ut. Pellentesque magna urna, volutpat et vehicula nec, consectetur vitae dolor. Donec posuere tincidunt lacus, at rutrum orci interdum sed. Quisque quis arcu risus, nec condimentum odio. Curabitur sem magna, porttitor sed mollis id, auctor non ligula. Mauris fringilla egestas porttitor.

Sed varius placerat sapien, nec pharetra neque scelerisque sit amet. Duis velit nisi, consequat sed vulputate nec, dignissim vel sem. Curabitur ac orci id arcu viverra varius. Cras tincidunt, lectus at adipiscing fringilla, orci tortor consectetur turpis, at ullamcorper turpis eros sit amet urna. Pellentesque vestibulum lectus eros, non bibendum quam. Maecenas magna neque, laoreet vel vulputate in, iaculis eget risus. Fusce at volutpat elit. Praesent ac ligula sollicitudin mauris egestas tempus. Fusce bibendum sapien in purus sodales semper.

Device Orientation
Device Orientation in games

Fight or Flight

More fun with video and canvas
Canvas 3D (WebGL)

How about some examples?

WebGL Globe

Angry Birds

ro.me

Hardware-accelerated 3D CSS

Supported since Chrome 12, now in the stable channel

Shaun the Sheep

Web Audio API
Real-time audio analysis demo
Sample code
FileSystem API
HTML5 terminal demo
Article: Exploring the FileSystem APIs
Background feature
Your web app can continue running even when Chrome or the app has no visible windows!

Developer docs
Omnibox API
Add your own keyword commands to the omnibox

Developer docs

Chrome Web Store

Chrome Web Store - Let's take a look

https://chrome.google.com/webstore

Or, click the icon on the New Tab Page

Chrome Web Store

Discovery

  • Help users find great apps, extensions, and themes

Distribution

  • Help developer reach and be discovered by users

Revenue

  • Help developers earn revenue from their apps via Chrome Web Store payments, third-party payments, or ads
Success Stories

"We've seen almost 100% percent higher time of engagement from users originating from Chrome than all other web app users."
Jeff Janer, Springpad co-founder

"The Chrome Web Store has turned out to be a great channel for acquiring really high-quality users who engage deeply with our app..."
Mike Sha, Wikinvest founder

"We've subsequently seen a steady flow of leads, with as much as 60 percent of our new leads coming from the Chrome Web Store every day."
Nat Robinson, SlideRocket VP of Marketing and Business Development

Read more: http://www.google.com/chrome/createanapp

End

Thank You!

Any questions?