Smart Browsers and HTML5 Web Apps for the Chrome Web Store

59
Audience Participation! me? Seth Ladd Google Chrome Team

description

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

Transcript of Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Page 1: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Audience Participation!

me?Seth Ladd

Google Chrome Team

Page 2: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Smart Browsers

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

Page 3: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

one big happy family

Page 4: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

StorageandFiles

http://slides.html5rocks.com/#app-cache

Page 5: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Semanticshttp://slides.html5rocks.com/#semantic-tags-1

Page 6: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Multimediahttp://slides.html5rocks.com/#video-audio

Page 7: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

CSS3http://slides.html5rocks.com/#logo-demo

Demo!

Page 8: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Graphicsand

Effectshttp://slides.html5rocks.com/#canvas-3d

Demo!

Page 9: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Connectivityand

Networkinghttp://slides.html5rocks.com/#web-sockets

Page 10: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

DeviceAccess

http://slides.html5rocks.com/#slide-orientation

Page 11: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

caniuse.com

Page 12: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

html5boilerplate.com

Page 13: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

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

Page 14: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

ChromeFramePluginyour escape hatch

Page 15: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

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

Page 16: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

TargetSmart

Browsersgracefully degrade

Page 17: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

AudienceParticipation!

weee!

Page 18: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 19: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 20: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 21: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 22: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Thinkingin

WebApps

Page 23: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

TightFocus

do one thing well

Page 24: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

BigScreen

utilize the entire window

Page 25: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

RichExperience

engage the user

Page 26: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

VisuallyStunning

beautiful

Page 27: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Fastresponsive and immediate

Page 28: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Performance Themes

Store locallyProcess in backgroundMinimize connectionsDecrease bandwidth

Page 29: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Developer Tools Audit Panel

Page 30: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

ChromeWebStore

distribute and sell web apps

Page 31: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 32: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 33: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 34: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 35: Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Page 36: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

All Web Apps

Welcome

Page 37: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Payments

Page 38: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

OpenIDSingle

Sign-On

Page 39: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

OAuthLicenseServer

Page 40: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

HostedWebAppsyou know and love

Page 41: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

PackagedWebApps

extensions with launchers

Page 42: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

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" ]}

Page 43: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Chrome Web Store Step by Step

1. 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

Page 44: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Our FirstWeb App

movie time!

http://www.youtube.com/watch?v=t9NUeITL4u8

Page 45: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Even Easierhttp://appmator.appspot.com

Page 46: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Chrome Web Store

Best Practices

Page 47: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Use Analytics

Page 48: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Easy Feedbackfor Users

Page 49: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

FreeTrial

Page 50: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Single Sign-on

Page 51: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Simple New User On-Boarding

Page 52: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Friendly URLs

Page 53: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Big Screen

UI

Page 54: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

In-App Navigation

Page 55: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Get Your App

Noticed

Page 56: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

ARIA for Enhanced

Accessibility

Page 57: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Target Smart Browsersfor your Web Apps

built with HTML5distributed by

Chrome Web Store

Page 58: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

Resources

http://code.google.com/chrome/webstore/docs/index.htmlhttp://www.html5rocks.comhttp://slides.html5rocks.comhttp://html5doctor.comhttp://caniuse.comhttp://html5reset.orghttp://html5boilerplate.comhttp://code.google.com/chrome/apps/articles/thinking_in_web_apps.htmlhttp://code.google.com/chrome/apps/docs/index.htmlhttp://code.google.com/chrome/webstore/docs/identify_user.htmlhttp://code.google.com/chrome/webstore/docs/check_for_payment.htmlhttp://code.google.com/chrome/chromeframe/

Page 59: Smart Browsers and HTML5 Web Apps for the Chrome Web Store

There's one more thing...