Flash Defenders - A Nerdery Agency Primer

FLASH DEFENDERS AGENCY PRIMER SERIES

THE NERDERY We help our partners get big ideas out of their heads and onto their clients’ websites Website: www.nerdery.com Twitter: @the_nerdery

HOW TO PARTICIPATEUsing the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us a email at primers@nerdery.com

BENSENIOR DEVELOPER

ANANDINTERACTIVE WEB DEVELOPER

SO WHY DOES FLASH NEED DEFENDING? It’s time for a brief history lesson

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

BROWSER WARSYou know back when Microsoft scared the crap out of everybody and all media played in plugins.

ZELDMAN BRINGS THE STANDARDS DOWNFROM THE MOUNTAINTOP Revenge of the tuque...

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

WEB ON YOUR PHONE... Not the kinda sorta web but the real web (Except for Flash).

STEVE SAYS,“WHO NEEDS FLASH? WE HAVE HTML5.” Lee gives him the middle-finger in response.

EVOLUTION STATISTICSBetween 1995 and 2001, Microsoft released six versions ofInternet Explorer.After 2001, the next major version was not released untilOctober 2007.Between 1995 and 2000, four major versions of the HTMLspec were released (including XHTML).After 1997, the next major version the HTML spec did notachieve draft status until January 2008.

SO WHAT’S NEW WITH HTML5?

MARKUP — HTML5It’s a formal draft and implemented (or will be shortly) by all of the major browser vendors. HTML5

STYLING—CSS3It’s fragmented. It’s proprietary, and implemented with browser prefixes. There might be a standard some day. HTML5

BEHAVIOR—JAVASCRIPT W3C Specified APIs. Hopefully we won’t repeat the fun of the event implementations. And don’t get us started on the box model... HTML5

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

BUILD BETTER WEB PAGESRun a web application without the webHave typography that sucks less.Provide user feedback and context with animation andtransitionsRender new graphics on-the-fly based on applicationstate HTML5

AND WATCH TELEVISION ON THE COMPUTER!!!True, you’ve been able to do that for a long time alreadyNow you can do it natively in the browser. We’re stillfighting about codec...H264 is looking strong and it’s free for a couple moreyearsGoogle-backed WebM and Ogg Theora might be patentunencumbered (but MPEG-LA doesn’t think so). HTML5

SO WAS STEVE RIGHT? IS FLASH OBSOLETE?

SOME PERSPECTIVE ON THE AVAILABILITY…

FLASH SUPPORT IN CURRENT BROWSERS INTERNET FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3EXPLORER 8 ✓ ✓ ✓ ✓ ✓ ✖ ✓

HTML5 SUPPORT* IN CURRENT BROWSERS INTERNET FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3EXPLORER 8 ✖ ✓ ✓ ✓ ✓ ✓ ✓ * EACH BROWSER’S SUPPORT OF HTML5 VARIES.

USAGE SHARE OF WEB BROWSERS AS OF JANUARY 2011 Internet Explorer (46%) Firefox (30.7%) Chrome (14.2%) Safari (5.9%) Opera (2%) Mobile (4%) SOURCE: HTTP://EN.WIKIPEDIA.ORG/WIKI/BROWSER_STATS

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

5 COMMON COMPLAINTSIt causes browser crashesHigh resource useProperietaryVector for security exploitsVector for annoying banner ads FLASH

BROWSER CRASHESFlash rarely arbitrarily crashes the browserPrograms running in the Flash player crashCommon Cause 1: Unhandled errors or exceptionsCommon Cause 2: Memory leaks FLASH

HIGH RESOURCE USERendering graphics on the cpu is expensiveRendering video on the cpu is expensivePrior to 10.1 Flash did a bad job releasing resources whennot active (e.g. hidden tabs)Standards have changed. Flash started on computers lesspowerful than my phone. But targeted fps in those days12. Now people are aiming at 30 or better. FLASH

PROPRIETARYThe spec for swf is published.ActionScript 3.0 is ECMA script (and an ISO standard)Flex (and the Flex SDK) is open sourceAlternate compilers exist (but they’re small projects)However, the format probably doesn’t pass the 25 yeartest FLASH

VECTOR FOR SECURITY EXPLOITSWhich is to say “another vector for security exploits”, thebrowser is already vector for security exploits.Policy-wise Macromedia/Adobe has tended to beconservative in swf security restrictions (e.g. no keyboardin full screen, cross domain white-listing, very limited filesystem access).However, turning on Flash does make the browser lesssecure. Hack this box competitions save it for later days. FLASH

VECTOR FOR BANNER ADSAds are not going awayDespite 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 extensionsdoes make banner ads less annoying. FLASH

WHAT HAS FLASH BEENCOMMONLY USED FOR? And does HTML 5 do it better or worse?

COMMON USES FOR FLASHPlaying videoVector/Image rendering in the browserImproving type quality in dynamic designsAnimationsApplication development (e.g. complex visualizations anddata manipulation tools).

HTML5 VIDEO VS. FLASH VIDEOHTML5 is a progressive download standard, but it acts likea stream in some browsersHTML5 often uses the GPU for playbackNo stream or connection-level authenticationRequires multiple encoding formatsNo full screen video

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

LET’S RUN SOME TESTS…

RENDERING EXAMPLESHTML5 FLASH13 FPS 46 FPS

ANIMATIONS: CSS3 TRANSITIONSThere isn’t a standard, now. There’s a draft. It works insome browsers (with prefixes).Many of the cool animations in Apple’s webkit demos areachieved this way.Can leverage the GPUApplied as a style through css or javascript

ANIMATION: PROGRAMATIC TWEENSManipulating a property at a regular intervalIn JavaScript, it is difficult to integrate hand animatedelements (e.g. timeline art).JavaScript performance characteristics will varydramatically from browser to browserAudio synchronization

TYPOGRAPHYThe sooner we can get rid of sIFR, the better.Foundries are getting on board slowly.Type still sucks.Until you see hanging punctuation, decent hyphenationand justification, and ligatures, you’re browser’s typesucks.

APPLICATION DEVELOPMENTJavascript missing “require” or “import”Javascript IDE’s missing good code hintingPackaging and distributing can get messy. Really need anautomated build system that outputs minified js (e.g.Google’s Closure)Debugging tools browser and vendor specificMVC largely a missing patternScope is ugly (e.g. handling of timers)

WHEN SHOULDYOU USE FLASH?

BANNER ADSThis is what the ad networks support. It’s easy to audit size, functionality and frame rate restrictions. WHEN SHOULD YOU USE FLASH?

PIXEL LEVEL IMAGE EFFECTSPixel Bender which was introduced in Flash player 10 allows fast pixel-level image bitmap transformation. WHEN SHOULD YOU USE FLASH?

RECORDING VIDEO OR AUDIOThe Flash player provides access to the computer’s camera and microphone where available. WHEN SHOULD YOU USE FLASH?

CLIENT-SERVER APPLICATIONS This isn’t the only way to do this, but it does simplify development and provides a unified target. WHEN SHOULD YOU USE FLASH?

GAMESIf you’re interested in blending timeline and programatic animation it will be easier in Flash. WHEN SHOULD YOU USE FLASH?

COMPLEX VISUALIZATIONSIf you’re targeting the desktop, Flash is still probably your best bet for creating this content. WHEN SHOULD YOU USE FLASH?

KIOSKSFlash is often a good-fit for kiosk development. WHEN SHOULD YOU USE FLASH?

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?

WHEN SHOULDN’TYOU USE FLASH?

PROGRESSIVE VIDEO PLAYER At least consider HTML5 backed up by a Flash player for maximum compatibility. WHEN SHOULDN’T YOU USE FLASH?

HOMEPAGE CAROUSELIt’s probably better if you do this in javascript and make the content indexable and accessible. WHEN SHOULDN’T YOU USE FLASH?

ANYTHING TARGETING iOS Apple and Adobe are still feuding... and that’s not likely to change soon. WHEN SHOULDN’T YOU USE FLASH?

MICROSITES Flash is best when it is used to supplement or add interactivity to asite. It should be used in partnership with HTML not as a replacement. WHEN SHOULDN’T YOU USE FLASH?

ADMIN INTERFACESAgain use Flash to enhance an administrative interface, but primary development should be HTML. WHEN SHOULDN’T YOU USE FLASH?

MY 2 CENTSIt’s not an either/or question. Both are going to be around. Choose technologies that fit your requirements.

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

Flash Defenders - A Nerdery Agency Primer

by The Nerdery on Mar 08, 2011

Accessibility

Upload Details

Usage Rights

2 Embeds 226

Statistics

Flash Defenders - A Nerdery Agency Primer — Presentation Transcript

http://blog.nerdery.com	225
http://www.google.de	1