Smart Browsers and HTML5 Web Apps for Chrome Web Store, presented to the San Diego HTML5 Web Apps and RefreshSD groups on 2011-02-08

1. Audience
Participation!
me?
Seth Ladd
Google Chrome Team

2. Smart
Browsers
I found the future of the Internet,
it's in my browser.

3. one big happy family

4. Storage
and
Files
http://slides.html5rocks.com/#app-cache

5. Semantics
http://slides.html5rocks.com/#semantic-tags-1

6. Multimedia
http://slides.html5rocks.com/#video-
audio

7. CSS3
http://slides.html5rocks.com/#logo-demo
Demo!

8. Graphics
and
Effects
http://slides.html5rocks.com/#canvas-3d
Demo!

9. Connectivity
and
Networking
http://slides.html5rocks.com/#web-sockets

10. Device
Access
http://slides.html5rocks.com/#slide-
orientation

11. caniuse.com

12. html5boilerplate.com

13. What would you have me do?
Spend my time hacking around issues in older technologies
like Internet Explorer 6 or would you like that time spent making
the site look the best that it can on better desktop browsers,
as well as on the iPhone, iPod Touch, iPad, Blackberry and a
whole host of other mobile devices?
- Andy Clarke

14. Chrome
Frame
Plugin
your escape hatch

15. Activating Chrome Frame
<meta http-equiv="X-UA-Compatible" content="
chrome=1">
^-- (don't wrap in conditional comments)
or, HTTP Header:
X-UA-Compatible: chrome=1

16. Target
Smart
Browsers
gracefully degrade

17. Audience
Participation!
weee!

22. Thinking
in
Web
Apps

23. Tight
Focus
do one thing well

24. Big
Screen
utilize the entire window

25. Rich
Experience
engage the user

26. Visually
Stunning
beautiful

27. Fast
responsive and immediate

28. Performance Themes
Store locally
Process in background
Minimize connections
Decrease bandwidth

29. Developer Tools Audit Panel

30. Chrome
Web
Store
distribute and sell web apps

36. All Web
Apps
Welcome

37. Payments

38. OpenID
Single
Sign-On

39. OAuth
License
Server

40. Hosted
Web
Apps
you know and love

41. Packaged
Web
Apps
extensions with launchers

42. App Manifest
{
"name": "Google Mail",
"description": "Read your gmail",
"version": "1",
"app": {
"urls": [
"*://mail.google.com/mail/",
"*://www.google.com/mail/"
],
"launch": {
"web_url": "http://mail.google.com/mail/"
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

43. Chrome Web Store Step by Step
1. Build an awesome web app
2. Create a manifest file
3. Make some icons
4. Zip up manifest and icons
5. Upload to Chrome Developer Dashboard
6. Config your listing
7. Pay one-time $5 registration fee
8. Verify your domain with Google Webmaster Tools
9. Publish app

44. Our First
Web App
movie time!
http://www.youtube.com/watch?v=t9NUeITL4u8

45. Even Easier
http://appmator.appspot.com

46. Chrome Web
Store
Best Practices

47. Use Analytics

48. Easy
Feedback
for Users

49. Free
Trial

50. Single
Sign-on

51. Simple New
User On-
Boarding

52. Friendly
URLs

53. Big
Screen
UI

54. In-App
Navigation

55. Get Your
App
Noticed

56. ARIA for
Enhanced
Accessibility

57. Target Smart Browsers
for your Web Apps
built with HTML5
distributed by
Chrome Web Store

58. Resources
http://code.google.com/chrome/webstore/docs/index.html
http://www.html5rocks.com
http://slides.html5rocks.com
http://html5doctor.com
http://caniuse.com
http://html5reset.org
http://html5boilerplate.com
http://code.google.com/chrome/apps/articles/thinking_in_web_apps.html
http://code.google.com/chrome/apps/docs/index.html
http://code.google.com/chrome/webstore/docs/identify_user.html
http://code.google.com/chrome/webstore/docs/check_for_payment.html
http://code.google.com/chrome/chromeframe/

59. There's one more thing...