60

Flash Defenders - A Nerdery Agency Primer

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Flash Defenders - A Nerdery Agency Primer
Page 2: Flash Defenders - A Nerdery Agency Primer

FLASH DEFENDERSA G E N C Y P R I M E R S E R I E S

Page 3: Flash Defenders - A Nerdery Agency Primer

THE NERDERY

We help our partners get big ideas out of their heads and onto their clients’ websites

Website: www.nerdery.comTwitter: @the_nerdery

Page 4: Flash Defenders - A Nerdery Agency Primer

HOW TO PARTICIPATE

Using the questions panels in the GoToMeeting app

On Twitter @The_Nerdery

Send us a email at [email protected]

Page 5: Flash Defenders - A Nerdery Agency Primer

BENSENIOR DEVELOPER

Page 6: Flash Defenders - A Nerdery Agency Primer

ANANDINTERACTIVE WEB DEVELOPER

Page 7: Flash Defenders - A Nerdery Agency Primer

SO WHY DOES FLASHNEED DEFENDING?

It’s time for a brief history lesson

Page 8: Flash Defenders - A Nerdery Agency Primer

IN THE BEGINNING THERE WAS HTML...And in 1993 it was mind blowing.

Page 9: Flash Defenders - A Nerdery Agency Primer

BROWSER WARSYou know back when Microsoft scared the crap out of everybody and

all media played in plugins.

Page 10: Flash Defenders - A Nerdery Agency Primer

ZELDMAN BRINGSTHE STANDARDS DOWN

FROM THE MOUNTAINTOPRevenge of the tuque...

Page 11: Flash Defenders - A Nerdery Agency Primer

WHATWG V. XHTML 2.0A revolution in the standards making process.

Page 12: Flash Defenders - A Nerdery Agency Primer

WEB ON YOUR PHONE... Not the kinda sorta web but the real web

(Except for Flash).

Page 13: Flash Defenders - A Nerdery Agency Primer

STEVE SAYS,“WHO NEEDS FLASH?

WE HAVE HTML5.”Lee gives him the middle-finger in response.

Page 14: Flash Defenders - A Nerdery Agency Primer

EVOLUTION STATISTICSBetween 1995 and 2001, Microsoft released six versions of Internet Explorer.

After 2001, the next major version was not released until October 2007.

Between 1995 and 2000, four major versions of the HTML spec were released (including XHTML).

After 1997, the next major version the HTML spec did not achieve draft status until January 2008.

Page 15: Flash Defenders - A Nerdery Agency Primer

SO WHAT’S NEW WITH HTML5?

Page 16: Flash Defenders - A Nerdery Agency Primer

MARKUP — HTML5It’s a formal draft and implemented (or will be shortly)

by all of the major browser vendors.

HTML5

Page 17: Flash Defenders - A Nerdery Agency Primer

STYLING—CSS3It’s fragmented. It’s proprietary, and implemented with browser

prefixes. There might be a standard some day.

HTML5

Page 18: Flash Defenders - A Nerdery Agency Primer

BEHAVIOR—JAVASCRIPTW3C Specified APIs. Hopefully we won’t repeat

the fun of the event implementations. And don’t get us started on the box model...

HTML5

Page 19: Flash Defenders - A Nerdery Agency Primer

SO WHAT CAN YOU DO WITH IT?

Other than build web pages that is... cause I’ve been doing that like years and years.

HTML5

Page 20: Flash Defenders - A Nerdery Agency Primer

BUILD BETTER WEB PAGES

Run a web application without the web

Have typography that sucks less.

Provide user feedback and context with animation and transitions

Render new graphics on-the-fly based on application state

HTML5

Page 21: Flash Defenders - A Nerdery Agency Primer

AND WATCH TELEVISION ON THE COMPUTER!!!

True, you’ve been able to do that for a long time already

Now you can do it natively in the browser. We’re still fighting about codec...

H264 is looking strong and it’s free for a couple more years

Google-backed WebM and Ogg Theora might be patent unencumbered (but MPEG-LA doesn’t think so).

HTML5

Page 22: Flash Defenders - A Nerdery Agency Primer

SO WAS STEVE RIGHT?IS FLASH OBSOLETE?

Page 23: Flash Defenders - A Nerdery Agency Primer

SOME PERSPECTIVE ON THE AVAILABILITY…

Page 24: Flash Defenders - A Nerdery Agency Primer

FLASH SUPPORT INCURRENT BROWSERS

INTERNETEXPLORER 8

FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3

✓ ✖✓✓ ✓ ✓ ✓

Page 25: Flash Defenders - A Nerdery Agency Primer

HTML5 SUPPORT* INCURRENT BROWSERS

INTERNETEXPLORER 8

FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3

✓✓ ✓ ✓ ✓✖ ✓

* EACH BROWSER’S SUPPORT OF HTML5 VARIES.

Page 26: Flash Defenders - A Nerdery Agency Primer

Internet Explorer (46%) Firefox (30.7%) Chrome (14.2%) Safari (5.9%) Opera (2%) Mobile (4%)

USAGE SHARE OF WEB BROWSERSAS OF JANUARY 2011

SOURCE: HTTP://EN.WIKIPEDIA.ORG/WIKI/BROWSER_STATS

Page 27: Flash Defenders - A Nerdery Agency Primer

THE BOOGEY MENWhy do people hate flash... And there some people who really hate it. I’m looking at you John Gruber.

FLASH

Page 28: Flash Defenders - A Nerdery Agency Primer

5 COMMON COMPLAINTS

It causes browser crashes

High resource use

Properietary

Vector for security exploits

Vector for annoying banner ads

FLASH

Page 29: Flash Defenders - A Nerdery Agency Primer

BROWSER CRASHES

Flash rarely arbitrarily crashes the browser

Programs running in the Flash player crash

Common Cause 1: Unhandled errors or exceptions

Common Cause 2: Memory leaks

FLASH

Page 30: Flash Defenders - A Nerdery Agency Primer

HIGH RESOURCE USE

Rendering graphics on the cpu is expensive

Rendering video on the cpu is expensive

Prior to 10.1 Flash did a bad job releasing resources when not active (e.g. hidden tabs)

Standards have changed. Flash started on computers less powerful than my phone. But targeted fps in those days 12. Now people are aiming at 30 or better.

FLASH

Page 31: Flash Defenders - A Nerdery Agency Primer

PROPRIETARY

The spec for swf is published.

ActionScript 3.0 is ECMA script (and an ISO standard)

Flex (and the Flex SDK) is open source

Alternate compilers exist (but they’re small projects)

However, the format probably doesn’t pass the 25 year test

FLASH

Page 32: Flash Defenders - A Nerdery Agency Primer

VECTOR FOR SECURITY EXPLOITS

Which is to say “another vector for security exploits”, the browser is already vector for security exploits.

Policy-wise Macromedia/Adobe has tended to be conservative in swf security restrictions (e.g. no keyboard in full screen, cross domain white-listing, very limited file system access).

However, turning on Flash does make the browser less secure. Hack this box competitions save it for later days.

FLASH

Page 33: Flash Defenders - A Nerdery Agency Primer

VECTOR FOR BANNER ADS

Ads are not going away

Despite Apple’s affinity for the use of the word “magic” changing runtimes does not make banner ads better.

Making banner ads immune to Flash blocker extensions does make banner ads less annoying.

FLASH

Page 34: Flash Defenders - A Nerdery Agency Primer

WHAT HAS FLASH BEEN COMMONLY USED FOR?

And does HTML 5 do it better or worse?

Page 35: Flash Defenders - A Nerdery Agency Primer

COMMON USES FOR FLASH

Playing video

Vector/Image rendering in the browser

Improving type quality in dynamic designs

Animations

Application development (e.g. complex visualizations and data manipulation tools).

Page 36: Flash Defenders - A Nerdery Agency Primer

HTML5 VIDEO VS. FLASH VIDEO

HTML5 is a progressive download standard, but it acts like a stream in some browsers

HTML5 often uses the GPU for playback

No stream or connection-level authentication

Requires multiple encoding formats

No full screen video

Page 37: Flash Defenders - A Nerdery Agency Primer

VECTOR/IMAGE RENDERING

There is a lot of talk about video playback or anecdotes about fans when talking about Flash. But how does raw rendering compare?

Page 38: Flash Defenders - A Nerdery Agency Primer

LET’S RUN SOME TESTS…

Page 39: Flash Defenders - A Nerdery Agency Primer

RENDERING EXAMPLES

HTML513 FPS

FLASH46 FPS

Page 40: Flash Defenders - A Nerdery Agency Primer

ANIMATIONS:CSS3 TRANSITIONS

There isn’t a standard, now. There’s a draft. It works in some browsers (with prefixes).

Many of the cool animations in Apple’s webkit demos are achieved this way.

Can leverage the GPU

Applied as a style through css or javascript

Page 41: Flash Defenders - A Nerdery Agency Primer

ANIMATION:PROGRAMATIC TWEENS

Manipulating a property at a regular interval

In JavaScript, it is difficult to integrate hand animated elements (e.g. timeline art).

JavaScript performance characteristics will vary dramatically from browser to browser

Audio synchronization

Page 42: Flash Defenders - A Nerdery Agency Primer

TYPOGRAPHY

The sooner we can get rid of sIFR, the better.

Foundries are getting on board slowly.

Type still sucks.

Until you see hanging punctuation, decent hyphenation and justification, and ligatures, you’re browser’s type sucks.

Page 43: Flash Defenders - A Nerdery Agency Primer

APPLICATION DEVELOPMENTJavascript missing “require” or “import”

Javascript IDE’s missing good code hinting

Packaging and distributing can get messy. Really need an automated build system that outputs minified js (e.g. Google’s Closure)

Debugging tools browser and vendor specific

MVC largely a missing pattern

Scope is ugly (e.g. handling of timers)

Page 44: Flash Defenders - A Nerdery Agency Primer

WHEN SHOULD YOU USE FLASH?

Page 45: Flash Defenders - A Nerdery Agency Primer

BANNER ADSThis is what the ad networks support. It’s easy to audit size,

functionality and frame rate restrictions.

WHEN SHOULD YOU USE FLASH?

Page 46: Flash Defenders - A Nerdery Agency Primer

PIXEL LEVELIMAGE EFFECTS

Pixel Bender which was introduced in Flash player 10 allows fastpixel-level image bitmap transformation.

WHEN SHOULD YOU USE FLASH?

Page 47: Flash Defenders - A Nerdery Agency Primer

RECORDING VIDEOOR AUDIO

The Flash player provides access to the computer’s camera and microphone where available.

WHEN SHOULD YOU USE FLASH?

Page 48: Flash Defenders - A Nerdery Agency Primer

CLIENT-SERVER APPLICATIONSThis isn’t the only way to do this, but it does simplify development and

provides a unified target.

WHEN SHOULD YOU USE FLASH?

Page 49: Flash Defenders - A Nerdery Agency Primer

GAMESIf you’re interested in blending timeline and programatic animation it

will be easier in Flash.

WHEN SHOULD YOU USE FLASH?

Page 50: Flash Defenders - A Nerdery Agency Primer

COMPLEX VISUALIZATIONSIf you’re targeting the desktop, Flash is still probably your best bet for

creating this content.

WHEN SHOULD YOU USE FLASH?

Page 51: Flash Defenders - A Nerdery Agency Primer

KIOSKSFlash is often a good-fit for kiosk development.

WHEN SHOULD YOU USE FLASH?

Page 52: Flash Defenders - A Nerdery Agency Primer

STREAMING VIDEOIn order to have a true streaming media experience,

you need either Flash or Silverlight.(This includes enforcing DRM. )

WHEN SHOULD YOU USE FLASH?

Page 53: Flash Defenders - A Nerdery Agency Primer

WHEN SHOULDN’T YOU USE FLASH?

Page 54: Flash Defenders - A Nerdery Agency Primer

PROGRESSIVE VIDEO PLAYERAt least consider HTML5 backed up by a Flash player

for maximum compatibility.

WHEN SHOULDN’T YOU USE FLASH?

Page 55: Flash Defenders - A Nerdery Agency Primer

HOMEPAGE CAROUSELIt’s probably better if you do this in javascript and make the content

indexable and accessible.

WHEN SHOULDN’T YOU USE FLASH?

Page 56: Flash Defenders - A Nerdery Agency Primer

ANYTHING TARGETING iOSApple and Adobe are still feuding...and that’s not likely to change soon.

WHEN SHOULDN’T YOU USE FLASH?

Page 57: Flash Defenders - A Nerdery Agency Primer

MICROSITESFlash is best when it is used to supplement or add interactivity to a

site. It should be used in partnership with HTML not as a replacement.

WHEN SHOULDN’T YOU USE FLASH?

Page 58: Flash Defenders - A Nerdery Agency Primer

ADMIN INTERFACESAgain use Flash to enhance an administrative interface, but primary

development should be HTML.

WHEN SHOULDN’T YOU USE FLASH?

Page 59: Flash Defenders - A Nerdery Agency Primer

MY 2 CENTSIt’s not an either/or question. Both are going to be around.

Choose technologies that fit your requirements.

Page 60: Flash Defenders - A Nerdery Agency Primer

QUESTIONS?More answers online at http://nerdery.com