HTML5 Beyond the Hype

HTML5Nick [email protected]

Twitter.com/NickFloro

Beyond the Hype

DevLearn12 : HTML5 presented by Nick Floro [email protected]

LaunchCycle.com - The simple way to manage projects. 11/05/12 1 of 201

Goals

goals



share



Experiment

experiment





Resources



Stats



7 billion people on earth.



2.2 billion Internet usersDevLearn12 : HTML5 presented by Nick Floro [email protected]


1.5 billion TV’sDevLearn12 : HTML5 presented by Nick Floro [email protected]


Currently over 6.2 billion cellphone subscriptions.



There are only 3.5 billion toothbrushes.



1992 to 2002DevLearn12 : HTML5 presented by Nick Floro [email protected]


2002 to 2012DevLearn12 : HTML5 presented by Nick Floro [email protected]


The Web Platform is AcceleratingDevLearn12 : HTML5 presented by Nick Floro [email protected]


Graphics Location Storage Speed

Solving Developer ChallengesDevLearn12 : HTML5 presented by Nick Floro [email protected]


What can we do with

HTML5













Create and deliver everywhere.DevLearn12 : HTML5 presented by Nick Floro [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 2012DevLearn12 : HTML5 presented by Nick Floro [email protected]


HTML 5in the works...



Advanced Core Language





HTML 4DevLearn12 : HTML5 presented by Nick Floro [email protected]


HTML 5 - Introduces New ElementsDevLearn12 : HTML5 presented by Nick Floro [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











Drawing on the Web

Flash



Canvas & SVG







Scalable Vector Graphics | SVGDevLearn12 : HTML5 presented by Nick Floro [email protected]


Vector Graphics Scale & Look Great!DevLearn12 : HTML5 presented by Nick Floro [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



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







Smart PhonesDevLearn12 : HTML5 presented by Nick Floro [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





// database and app cache store user data and app resources locally





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’sDevLearn12 : HTML5 presented by Nick Floro [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 4.x - 6.x

− Android 2.x - 4.x

− Blackberry, Windows 7-8 Phone

− Tablet vs Phone

Testing CodeDevLearn12 : HTML5 presented by Nick Floro [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



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.



Determining a PlanWhat’s Next

Strategy Team Skills

Work Flow

Team Skills

Tools

Challenges

Delivery



How do we handle?Projects

Current Content New Projects



Resources



Resources



html5rocks.com



lynda.com



teamtreehouse.com



Caniuse.com





tumultco.com



animatable.com



html5demos.com



html5gallery.com



jquery.com



www.sencha.com



www.css3.info



www.uxmag.com



diveintohtml5.info



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



www.gamesalad.com







www.kesiev.com/akihabara/



www.kesiev.com/akihabara/

http://bit.ly/dfCTw3 — Great presentation on HTML5 written IN HTML5. View it in Chrome for best results.http://bit.ly/bheBOx — "How to Make All Browsers Render HTML5 Mark-up Correctly - Even IE6". It's a good overview of how to get browsers to behave, but doesn't go into much detail beyond that.http://bit.ly/cnFDoq — Sample code on how to get <video> to work for everyone (with a fallback for MSIE).http://bit.ly/9TUF4j — Sublime video (for consistent UI in <video> tags, with Flash fallback)http://bit.ly/buBmp6 — Basic tutorial on using the SQLite-compatible database in your browser.http://bit.ly/csCqFG — An overview of all forms of client-side storage.http://bit.ly/aZ4cBu — "HTML 5: Features you want desperately but still can't use". Great talk by Ian Hickson from 2008. It's a little out of date now, but there are lots of great demos in there.http://bit.ly/bi29bT — Mark Pilgrim's HTML5 Book "Dive Into HTML5".http://bit.ly/dkbgAZ — Modernizr is a JS tool that helps you detect support for HTML5 features.http://bit.ly/aFfJng — Nice chart of feature support by browser.http://bit.ly/br04am — IE7.js and IE8.js, which I mentioned in my talk, help make MSIE perform more like a standards-compliant browser.http://bit.ly/bwoI4N — Nissan Leaf product page, made using "HTML5" (technically it's still XHTML, but it's using a lot of JS/SVG/etc to skip the need for Flash in many places).



http://bit.ly/dfCTw3




http://bit.ly/bheBOx




http://bit.ly/cnFDoq




http://bit.ly/9TUF4j




http://bit.ly/buBmp6




http://bit.ly/csCqFG




http://bit.ly/aZ4cBu




http://bit.ly/bi29bT




http://bit.ly/dkbgAZ




http://bit.ly/aFfJng




http://bit.ly/br04am




http://bit.ly/bwoI4N




Go Play, Experiment, Dream

AppleiOS



Search Flickr.com for iPad UI



smashingmagazine.com



www.longtailvideo.com



http://www.longtailvideo.com




Screencasts 101 Mini-Session

www.jingproject.com













Pictures

Video

Blog

Audio

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

ExploreDevLearn12 : HTML5 presented by Nick Floro [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



Q & A

Nick [email protected]

twitter.com/NickFloro

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



Education

HTML5 Beyond the Hype