html5: beyond the hype #wwc2012

HTML5Nick FloroNick@sealworks.com | @NickFloro

Beyond the Hype

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 1 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 2 of 192

Goals

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 3 of 192

Stats

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 4 of 192

Worldwide population 6.8 billionWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 5 of 192

2.2 billion Internet usersWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 6 of 192

1.5 billion TV’sWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 7 of 192

4.6 billion Mobile Phones

1 billion SmartPhones by 2016

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 8 of 192

3.5 billion Tooth BrushesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 9 of 192

1992 to 2002Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 10 of 192

2002 to 2012Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 11 of 192

The Web Platform is AcceleratingWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 12 of 192

Graphics Location Storage Speed

Solving Developer ChallengesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 13 of 192

What can we do with

HTML5

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 14 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 15 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 16 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 17 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 18 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 19 of 192

Create and deliver everywhere.Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 20 of 192

The Web Platform

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 21 of 192

Web App

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 22 of 192

WebApp

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 23 of 192

WebApp

HTML Javascript CSS API’s

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 24 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 25 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 26 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 27 of 192

Pulse Mobile App

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 28 of 192

Pulse Mobile App

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 29 of 192

Chrome.AngryBirds.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 30 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 31 of 192

SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 32 of 192

HTML5 = JS + CSS3

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 33 of 192

Next Generation Mobile Using Browsers

RIM Blackberry

iOSAndroid Windows Phone

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 34 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 35 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 36 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 37 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 38 of 192

Which browser’s support HTML 5?

Chrome Safari Firefox Opera

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 39 of 192

Internet Explorer 9 BETA

Which browser’s support HTML 5?

Chrome Safari Firefox Opera

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 40 of 192

Internet Explorer 6-8 28% No

Google Chrome 24% Yes

Mozilla Firefox 23% Yes

Internet Explorer 9 9% Yes

Apple Safari 4% Yes

iPhone / iPad 4% Yes

Opera 2% Yes

Google Android 2% Yes

Other 4% No

Market Share HTML5 Support

Browser Stats 2012Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 41 of 192

HTML 5in the works...

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 42 of 192

Advanced Core Language

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 43 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 44 of 192

HTML 4Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 45 of 192

HTML 5 - Introduces New ElementsWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 46 of 192

Improve Web Apps

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 47 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 48 of 192

chalk.37signals.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 49 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 50 of 192

Flow chart

Compatibility

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 51 of 192

Flow chart

Replaces:XHTML 1.0 & Dom2htmlwith new

API’s

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 52 of 192

Improve Handling of Errors

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 53 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 54 of 192

Focus on the

Audience

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 55 of 192

Google Analytics

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 56 of 192

Google Analytics

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 57 of 192

Drawing on the Web

Flash

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 58 of 192

Canvas & SVG

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 59 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 60 of 192

Scalable Vector Graphics | SVGWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 61 of 192

Vector Graphics Scale & Look Great!Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 62 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 63 of 192

• First Person Gifter (FF)

• Population Demo (FF)

• German Election Atlas (Safari)

• Mozilla Download Center (FF)

Demo’s

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 64 of 192

SVG -> High level• Import/Export• Easy UIs• Interactive• Medium Animation• Tree of objects

Canvas -> Low level• No mouse interaction• High Animation• JS Centric• More Bookkeeping• Pixels

When Canvas or SVG?

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 65 of 192

HTML 5 Support

£ £ £ £ £canvas / svg

video

geolocation

app cache

database

workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 66 of 192

Quake II - Browser Only

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 67 of 192

Quake II - Browser Only

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 68 of 192

Quake II - Browser Only

WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 69 of 192

Video

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 70 of 192

Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 71 of 192

Standards Are Everywhere

MPEG-1/

MPEG-4 audio

MPEG-2RedBook JPEGAC-3FM DVNTSC/

PAL

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 72 of 192

PixelsGuidelines for Compression

DV 720 x 486

720P 1280 x 720

HD 1080i 1920 x 1080

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 73 of 192

Content PlacementGuidelines for Compression

320 x 240

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 74 of 192

Selecting a SizeGuidelines for Compression

320 x 240

512 x 384

640 x 480

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 75 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 76 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 77 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 78 of 192

Frame RateGuidelines for Compression

29.97 fps 15 fps

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 79 of 192

Guidelines for Compression2 Pass Variable Bit Rate

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 80 of 192

Guidelines for Compression2 Pass Variable Bit Rate

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 81 of 192

HTML 5 OptionsVideo Compression

FlashH264Adobe

H264 | MPEG 4Apple | Microsoft

WebMOgg Theora

Google

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 82 of 192

Tips & Hints• Video – Frame Rate: 15 fps– Data Rate Target 800-1200 kbs

• Audio– 16bit / 22khz / Mono / 64 kbs

• Delivery– Flash: H264 – HTML5: H264

Guidelines for Compression

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 83 of 192

www.longtailvideo.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 84 of 192

Easy Access to VideoFlip $100 to $200

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 85 of 192

Smart PhonesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 86 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 87 of 192

brightcove.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 88 of 192

HTML 5 Support

£ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 89 of 192

geolocation

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 90 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 91 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 92 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 93 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 94 of 192

// the geolocation apibrings browser basedlocation to your apps

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 95 of 192

www.seeknspell.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 96 of 192

A C

R

O

P www.seeknspell.com

T

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 97 of 192

C

R

O

P

A

www.seeknspell.com

T

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 98 of 192

HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 99 of 192

app cache& database

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 100 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 101 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 102 of 192

HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 103 of 192

web workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 104 of 192

HTML 5More Power

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 105 of 192

// web workers defines an API for runningbackground scripts

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 106 of 192

Bad Primes (FF 3.5)

Good Primes (FF 3.5)

Motion Tracker (FF)

Demo’sWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 107 of 192

HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 108 of 192

FormsCSS 3

Effects/Transitions

JavaScript

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 109 of 192

Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9

• Firefox 4.0, 10-13 +

• Chrome 15 - 19 +

Test on OS X− Safari 4, 5+

− Firefox 4.0, 10-13 +

− Chrome 15 - 19 +

Test on Mobile− iOS

− Android 2.x-4.x

− Blackberry, Windows 7 Phone, Metro

− Tablet vs Phone

Testing CodeWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 110 of 192

How should we

Design?

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 111 of 192

Focus on the

Audience1

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 112 of 192

is the keyContent

2

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 113 of 192

Transparent

Interface3

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 114 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 115 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 116 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 117 of 192

Keep it Simple

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 118 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 119 of 192

Design: Keep it Simple

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 120 of 192

How do we start?

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 121 of 192

Sketch

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 122 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 123 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 124 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 125 of 192

Wireframes

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 126 of 192

www.balsamiq.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 127 of 192

Sketchy & iMockUps

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 128 of 192

KeynoteKungFu.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 129 of 192

http://goo.gl/kMn4b

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 130 of 192

www.uistencils.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 131 of 192

Wireframes

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 132 of 192

Design• Focus on audience

• Content is key

• Transparent interface

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 133 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 134 of 192

Text

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 135 of 192

Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10. Reposition11. Save12. If the copy changed, start

over

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 136 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 137 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 138 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 139 of 192

Design for Flexibility

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 140 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 141 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 142 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 143 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 144 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 145 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 146 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 147 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 148 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 149 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 150 of 192

Android Xoom1280 x 720

HTC Incredible800 x 480

Selecting a SizePixels & Aspect Ratio

iPad1024 x 7682048 x 1536

iPhone 4960 x 640

iPhone480 x 320

Droid854 x 480

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 151 of 192

Technology is a tool.

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 152 of 192

Resources

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 153 of 192

html5rocks.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 154 of 192

lynda.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 155 of 192

teamtreehouse.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 156 of 192

Caniuse.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 157 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 158 of 192

tumultco.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 159 of 192

animatable.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 160 of 192

html5demos.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 161 of 192

jquery.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 162 of 192

www.sencha.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 163 of 192

www.css3.info

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 164 of 192

www.uxmag.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 165 of 192

typekit.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 166 of 192

CSS3 for Web DesignersDan Cederholm | A Book Apart

aBookApart.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 167 of 192

RESPONSIVE WEB DESIGNETHAN MARCOTTE | A Book Apart

aBookApart.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 168 of 192

HTML5 for Web DesignersJEREMY KEITH | A Book Apart

aBookApart.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 169 of 192

Go Play, Experiment, Dream

AppleiOS

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 170 of 192

Search Flickr.com for iPad UI

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 171 of 192

smashingmagazine.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 172 of 192

Screencasts 101 Mini-Session

www.jingproject.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 173 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 174 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 175 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 176 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 177 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 178 of 192

Pictures

Video

Blog

Audio

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

ExploreWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 179 of 192

Gamers

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 180 of 192

Capture & Analyze

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 181 of 192

Using CoverFlow view and Preview of Graphics

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 182 of 192

Design Scrapbook: iPhoto | LittleSnapper

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 183 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 184 of 192

wordpress.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 185 of 192

open

over 11,500

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 186 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 187 of 192

evernote.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 188 of 192

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 189 of 192

Don’t Settle

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 190 of 192

launchcycle.com

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 191 of 192

Thank You

Nick Florosealworks.comnick@sealworks.com

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype nick@sealworks.com

LaunchCycle.com - The simple way to manage projects. 07/10/12 192 of 192