AudienceParticipation!           me?        Seth Ladd   Google Chrome Team
SmartBrowsersI found the future of the Internet,       its in my browser.
one big happy family
Storage   and  Fileshttp://slides.html5rocks.com/#app-cache
Semantics http://slides.html5rocks.com/#semantic-tags-1
Multimedia http://slides.html5rocks.com/#video- audio
CSS3http://slides.html5rocks.com/#logo-demo             Demo!
Graphics  and Effectshttp://slides.html5rocks.com/#canvas-3d                  Demo!
Connectivity   andNetworkinghttp://slides.html5rocks.com/#web-sockets
Device  Accesshttp://slides.html5rocks.com/#slide-orientation
caniuse.com
html5boilerplate.com
What would you have me do?Spend my time hacking around issues in older technologieslike Internet Explorer 6 or would you l...
ChromeFrame Plugin your escape hatch
Activating Chrome Frame<meta http-equiv="X-UA-Compatible" content="chrome=1"> ^-- (dont wrap in conditional comments)or, H...
Target SmartBrowsers gracefully degrade
AudienceParticipation!      weee!
Thinking   in Web Apps
TightFocus do one thing well
BigScreen utilize the entire window
RichExperience   engage the user
VisuallyStunning  beautiful
Fastresponsive and immediate
Performance Themes Store locally Process in background Minimize connections Decrease bandwidth
Developer Tools Audit Panel
Chrome Web Storedistribute and sell web apps
All Web AppsWelcome
Payments
OpenID SingleSign-On
OAuthLicenseServer
Hosted Web Apps you know and love
Packaged  Web  Apps extensions with launchers
App Manifest{    "name": "Google Mail",    "description": "Read your gmail",    "version": "1",    "app": {      "urls": [...
Chrome Web Store Step by Step1.   Build an awesome web app2.   Create a manifest file3.   Make some icons4.   Zip up manif...
Our First      Web App              movie time!http://www.youtube.com/watch?v=t9NUeITL4u8
Even Easier http://appmator.appspot.com
Chrome Web    StoreBest Practices
Use Analytics
EasyFeedbackfor Users
FreeTrial
SingleSign-on
Simple New User On- Boarding
Friendly URLs
BigScreen  UI
In-AppNavigation
Get Your  AppNoticed
ARIA for EnhancedAccessibility
Target Smart    Browsers  for your Web Apps    built with HTML5      distributed by Chrome Web Store
Resources http://code.google.com/chrome/webstore/docs/index.html http://www.html5rocks.com http://slides.html5rocks.com ht...
Theres one more thing...
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Upcoming SlideShare
Loading in …5
×

Smart Browsers and HTML5 Web Apps for the Chrome Web Store

1,672 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,672
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Smart Browsers and HTML5 Web Apps for the Chrome Web Store

  1. 1. AudienceParticipation! me? Seth Ladd Google Chrome Team
  2. 2. SmartBrowsersI found the future of the Internet, its in my browser.
  3. 3. one big happy family
  4. 4. Storage and Fileshttp://slides.html5rocks.com/#app-cache
  5. 5. Semantics http://slides.html5rocks.com/#semantic-tags-1
  6. 6. Multimedia http://slides.html5rocks.com/#video- audio
  7. 7. CSS3http://slides.html5rocks.com/#logo-demo Demo!
  8. 8. Graphics and Effectshttp://slides.html5rocks.com/#canvas-3d Demo!
  9. 9. Connectivity andNetworkinghttp://slides.html5rocks.com/#web-sockets
  10. 10. Device Accesshttp://slides.html5rocks.com/#slide-orientation
  11. 11. caniuse.com
  12. 12. html5boilerplate.com
  13. 13. What would you have me do?Spend my time hacking around issues in older technologieslike Internet Explorer 6 or would you like that time spent makingthe site look the best that it can on better desktop browsers,as well as on the iPhone, iPod Touch, iPad, Blackberry and awhole host of other mobile devices?- Andy Clarke
  14. 14. ChromeFrame Plugin your escape hatch
  15. 15. Activating Chrome Frame<meta http-equiv="X-UA-Compatible" content="chrome=1"> ^-- (dont wrap in conditional comments)or, HTTP Header:X-UA-Compatible: chrome=1
  16. 16. Target SmartBrowsers gracefully degrade
  17. 17. AudienceParticipation! weee!
  18. 18. Thinking in Web Apps
  19. 19. TightFocus do one thing well
  20. 20. BigScreen utilize the entire window
  21. 21. RichExperience engage the user
  22. 22. VisuallyStunning beautiful
  23. 23. Fastresponsive and immediate
  24. 24. Performance Themes Store locally Process in background Minimize connections Decrease bandwidth
  25. 25. Developer Tools Audit Panel
  26. 26. Chrome Web Storedistribute and sell web apps
  27. 27. All Web AppsWelcome
  28. 28. Payments
  29. 29. OpenID SingleSign-On
  30. 30. OAuthLicenseServer
  31. 31. Hosted Web Apps you know and love
  32. 32. Packaged Web Apps extensions with launchers
  33. 33. 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" ]}
  34. 34. Chrome Web Store Step by Step1. Build an awesome web app2. Create a manifest file3. Make some icons4. Zip up manifest and icons5. Upload to Chrome Developer Dashboard6. Config your listing7. Pay one-time $5 registration fee8. Verify your domain with Google Webmaster Tools9. Publish app
  35. 35. Our First Web App movie time!http://www.youtube.com/watch?v=t9NUeITL4u8
  36. 36. Even Easier http://appmator.appspot.com
  37. 37. Chrome Web StoreBest Practices
  38. 38. Use Analytics
  39. 39. EasyFeedbackfor Users
  40. 40. FreeTrial
  41. 41. SingleSign-on
  42. 42. Simple New User On- Boarding
  43. 43. Friendly URLs
  44. 44. BigScreen UI
  45. 45. In-AppNavigation
  46. 46. Get Your AppNoticed
  47. 47. ARIA for EnhancedAccessibility
  48. 48. Target Smart Browsers for your Web Apps built with HTML5 distributed by Chrome Web Store
  49. 49. 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/
  50. 50. Theres one more thing...

×