html5: beyond the hype #wwc2012

HTML5Nick [email protected] | @NickFloro

Beyond the Hype

Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]

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

Goals



Stats



Worldwide population 6.8 billionWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


2.2 billion Internet usersWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


1.5 billion TV’sWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


4.6 billion Mobile Phones

1 billion SmartPhones by 2016



3.5 billion Tooth BrushesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


1992 to 2002Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


2002 to 2012Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


The Web Platform is AcceleratingWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


Graphics Location Storage Speed

Solving Developer ChallengesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


What can we do with

HTML5



Create and deliver everywhere.Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


The Web Platform



Web App



WebApp



WebApp

HTML Javascript CSS API’s



Pulse Mobile App



http://www.e-learningguru.com




Pulse Mobile App







Chrome.AngryBirds.com







SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY



HTML5 = JS + CSS3



Next Generation Mobile Using Browsers

RIM Blackberry

iOSAndroid Windows Phone



Which browser’s support HTML 5?

Chrome Safari Firefox Opera



Internet Explorer 9 BETA

Which browser’s support HTML 5?

Chrome Safari Firefox Opera



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 [email protected]


HTML 5in the works...



Advanced Core Language



HTML 4Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


HTML 5 - Introduces New ElementsWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


Improve Web Apps



chalk.37signals.com







Flow chart

Compatibility



Flow chart

Replaces:XHTML 1.0 & Dom2htmlwith new

API’s



Improve Handling of Errors



Focus on the

Audience



Google Analytics







Drawing on the Web

Flash



Canvas & SVG



Scalable Vector Graphics | SVGWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


Vector Graphics Scale & Look Great!Wharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


• First Person Gifter (FF)

• Population Demo (FF)

• German Election Atlas (Safari)

• Mozilla Download Center (FF)

Demo’s



http://htmlfive.appspot.com/static/gifter.html




http://vis.uell.net/gsvg/poppyr.html
























http://www.mozilla.com/en-US/firefox/stats/




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?



HTML 5 Support

£ £ £ £ £canvas / svg

video

geolocation

app cache

database

workers



Quake II - Browser Only




WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage



Video



Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression



Standards Are Everywhere

MPEG-1/

MPEG-4 audio

MPEG-2RedBook JPEGAC-3FM DVNTSC/

PAL



PixelsGuidelines for Compression

DV 720 x 486

720P 1280 x 720

HD 1080i 1920 x 1080



Content PlacementGuidelines for Compression

320 x 240



Selecting a SizeGuidelines for Compression

320 x 240

512 x 384

640 x 480



Frame RateGuidelines for Compression

29.97 fps 15 fps



Guidelines for Compression2 Pass Variable Bit Rate



HTML 5 OptionsVideo Compression

FlashH264Adobe

H264 | MPEG 4Apple | Microsoft

WebMOgg Theora

Google



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



www.longtailvideo.com







Easy Access to VideoFlip $100 to $200



Smart PhonesWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


brightcove.com







HTML 5 Support

£ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers



geolocation



// the geolocation apibrings browser basedlocation to your apps



www.seeknspell.com



http://www.twitter.com




A C

R

O

P www.seeknspell.com

T







C

R

O

P

A

www.seeknspell.com

T







HTML 5 Support

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

canvas / svg

video

geolocation

app cache

database

workers



app cache& database



HTML 5 Support

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

canvas / svg

video

geolocation

app cache

database

workers



web workers



HTML 5More Power



// web workers defines an API for runningbackground scripts



Bad Primes (FF 3.5)

Good Primes (FF 3.5)

Motion Tracker (FF)

Demo’sWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


http://htmlfive.appspot.com/static/primes-bad.html




http://htmlfive.appspot.com/static/primes-good.html




http://htmlfive.appspot.com/static/tracker1.html




HTML 5 Support

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

canvas / svg

video

geolocation

app cache

database

workers



FormsCSS 3

Effects/Transitions

JavaScript



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 [email protected]


How should we

Design?



Focus on the

Audience1



is the keyContent

2



Transparent

Interface3



Keep it Simple



Design: Keep it Simple



How do we start?



Sketch



Wireframes



www.balsamiq.com







Sketchy & iMockUps







KeynoteKungFu.com



http://goo.gl/kMn4b







www.uistencils.com



http://www.telestream.net/screen-flow/overview.htm




Wireframes



Design• Focus on audience

• Content is key

• Transparent interface



Text



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



Design for Flexibility



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



Technology is a tool.



Resources



html5rocks.com



lynda.com



teamtreehouse.com



Caniuse.com



tumultco.com



animatable.com



html5demos.com



jquery.com



www.sencha.com



www.css3.info



www.uxmag.com



typekit.com



CSS3 for Web DesignersDan Cederholm | A Book Apart

aBookApart.com



RESPONSIVE WEB DESIGNETHAN MARCOTTE | A Book Apart

aBookApart.com



HTML5 for Web DesignersJEREMY KEITH | A Book Apart

aBookApart.com



Go Play, Experiment, Dream

AppleiOS



Search Flickr.com for iPad UI



smashingmagazine.com



Screencasts 101 Mini-Session

www.jingproject.com



Pictures

Video

Blog

Audio

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

ExploreWharton Web Conference 2012 Nick Floro | HTML5 Beyond the Hype [email protected]


http://elgg.org/index.php




Gamers



Capture & Analyze



Using CoverFlow view and Preview of Graphics



Design Scrapbook: iPhoto | LittleSnapper



wordpress.com



open

over 11,500



evernote.com



Don’t Settle



launchcycle.com



Thank You

Nick [email protected]

twitter.com/NickFloro

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



html5: beyond the hype #wwc2012

Technology

nick floro html5

wharton web conference

simple way

web platform

worldwide population

mobile phones