FLASH DEFENDERS AGENCY PRIMER SERIES
THE NERDERY       We help our partners get big ideas       out of their heads and onto their       clients’ websites      ...
HOW TO PARTICIPATEUsing the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us a email at primers@nerde...
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 ...
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.      ...
STYLING—CSS3It’s fragmented. It’s proprietary, and implemented with browser         prefixes. There might be a standard so...
BEHAVIOR—JAVASCRIPT  W3C Specified APIs. Hopefully we won’t repeat     the fun of the event implementations.   And don’t g...
SO WHAT CAN YOU   DO WITH IT?    Other than build web pages that is...cause I’ve been doing that like years and years.    ...
BUILD BETTER WEB PAGESRun a web application without the webHave typography that sucks less.Provide user feedback and conte...
AND WATCH TELEVISION   ON THE COMPUTER!!!True, you’ve been able to do that for a long time alreadyNow you can do it native...
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 ...
HTML5 SUPPORT* IN              CURRENT BROWSERS INTERNET             FIREFOX 3.6    CHROME 9        SAFARI 5         OPERA...
USAGE SHARE OF WEB BROWSERS     AS OF JANUARY 2011 Internet Explorer (46%)    Firefox (30.7%)   Chrome (14.2%)   Safari (5...
THE BOOGEY MENWhy do people hate flash... And there some peoplewho really hate it. I’m looking at you John Gruber.        ...
5 COMMON COMPLAINTSIt causes browser crashesHigh resource useProperietaryVector for security exploitsVector for annoying b...
BROWSER CRASHESFlash rarely arbitrarily crashes the browserPrograms running in the Flash player crashCommon Cause 1: Unhan...
HIGH RESOURCE USERendering graphics on the cpu is expensiveRendering video on the cpu is expensivePrior to 10.1 Flash did ...
PROPRIETARYThe spec for swf is published.ActionScript 3.0 is ECMA script (and an ISO standard)Flex (and the Flex SDK) is o...
VECTOR FOR       SECURITY EXPLOITSWhich is to say “another vector for security exploits”, thebrowser is already vector for...
VECTOR FOR BANNER ADSAds are not going awayDespite Apple’s affinity for the use of the word “magic”changing runtimes does ...
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 designsAnimations...
HTML5 VIDEO          VS. FLASH VIDEOHTML5 is a progressive download standard, but it acts likea stream in some browsersHTM...
VECTOR/IMAGE              RENDERINGThere is a lot of talk about video playback or anecdotes about fans when talking about ...
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).M...
ANIMATION:   PROGRAMATIC TWEENSManipulating a property at a regular intervalIn JavaScript, it is difficult to integrate ha...
TYPOGRAPHYThe sooner we can get rid of sIFR, the better.Foundries are getting on board slowly.Type still sucks.Until you s...
APPLICATION DEVELOPMENTJavascript missing “require” or “import”Javascript IDE’s missing good code hintingPackaging and dis...
WHEN SHOULDYOU USE FLASH?
BANNER ADSThis is what the ad networks support. It’s easy to audit size,         functionality and frame rate restrictions...
PIXEL LEVEL           IMAGE EFFECTSPixel Bender which was introduced in Flash player 10 allows fast           pixel-level ...
RECORDING VIDEO          OR AUDIOThe Flash player provides access to the computer’s camera and                 microphone ...
CLIENT-SERVER APPLICATIONS This isn’t the only way to do this, but it does simplify development and                       ...
GAMESIf you’re interested in blending timeline and programatic animation it                          will be easier in Fla...
COMPLEX VISUALIZATIONSIf you’re targeting the desktop, Flash is still probably your best bet for                          ...
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.          ...
WHEN SHOULDN’TYOU USE FLASH?
PROGRESSIVE VIDEO PLAYER   At least consider HTML5 backed up by a Flash player               for maximum compatibility.   ...
HOMEPAGE CAROUSELIt’s probably better if you do this in javascript and make the content                       indexable an...
ANYTHING TARGETING iOS     Apple and Adobe are still feuding...     and that’s not likely to change soon.                 ...
MICROSITES  Flash is best when it is used to supplement or add interactivity to asite. It should be used in partnership wi...
ADMIN INTERFACESAgain use Flash to enhance an administrative interface, but primary                  development should be...
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
Upcoming SlideShare
Loading in...5
×

Flash Defenders - A Nerdery Agency Primer

1,269

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,269
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flash Defenders - A Nerdery Agency Primer

  1. 1. FLASH DEFENDERS AGENCY PRIMER SERIES
  2. 2. 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
  3. 3. HOW TO PARTICIPATEUsing the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us a email at primers@nerdery.com
  4. 4. BENSENIOR DEVELOPER
  5. 5. ANANDINTERACTIVE WEB DEVELOPER
  6. 6. SO WHY DOES FLASH NEED DEFENDING? It’s time for a brief history lesson
  7. 7. IN THE BEGINNING THERE WAS HTML... And in 1993 it was mind blowing.
  8. 8. BROWSER WARSYou know back when Microsoft scared the crap out of everybody and all media played in plugins.
  9. 9. ZELDMAN BRINGS THE STANDARDS DOWNFROM THE MOUNTAINTOP Revenge of the tuque...
  10. 10. WHATWG V. XHTML 2.0 A revolution in the standards making process.
  11. 11. WEB ON YOUR PHONE... Not the kinda sorta web but the real web (Except for Flash).
  12. 12. STEVE SAYS,“WHO NEEDS FLASH? WE HAVE HTML5.” Lee gives him the middle-finger in response.
  13. 13. 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.
  14. 14. SO WHAT’S NEW WITH HTML5?
  15. 15. MARKUP — HTML5It’s a formal draft and implemented (or will be shortly) by all of the major browser vendors. HTML5
  16. 16. STYLING—CSS3It’s fragmented. It’s proprietary, and implemented with browser prefixes. There might be a standard some day. HTML5
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. SO WAS STEVE RIGHT? IS FLASH OBSOLETE?
  22. 22. SOME PERSPECTIVE ON THE AVAILABILITY…
  23. 23. FLASH SUPPORT IN CURRENT BROWSERS INTERNET FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3EXPLORER 8 ✓ ✓ ✓ ✓ ✓ ✖ ✓
  24. 24. 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.
  25. 25. 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
  26. 26. THE BOOGEY MENWhy do people hate flash... And there some peoplewho really hate it. I’m looking at you John Gruber. FLASH
  27. 27. 5 COMMON COMPLAINTSIt causes browser crashesHigh resource useProperietaryVector for security exploitsVector for annoying banner ads FLASH
  28. 28. BROWSER CRASHESFlash rarely arbitrarily crashes the browserPrograms running in the Flash player crashCommon Cause 1: Unhandled errors or exceptionsCommon Cause 2: Memory leaks FLASH
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. WHAT HAS FLASH BEENCOMMONLY USED FOR? And does HTML 5 do it better or worse?
  34. 34. COMMON USES FOR FLASHPlaying videoVector/Image rendering in the browserImproving type quality in dynamic designsAnimationsApplication development (e.g. complex visualizations anddata manipulation tools).
  35. 35. 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
  36. 36. 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?
  37. 37. LET’S RUN SOME TESTS…
  38. 38. RENDERING EXAMPLESHTML5 FLASH13 FPS 46 FPS
  39. 39. 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
  40. 40. 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
  41. 41. 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.
  42. 42. 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)
  43. 43. WHEN SHOULDYOU USE FLASH?
  44. 44. BANNER ADSThis is what the ad networks support. It’s easy to audit size, functionality and frame rate restrictions. WHEN SHOULD YOU USE FLASH?
  45. 45. PIXEL LEVEL IMAGE EFFECTSPixel Bender which was introduced in Flash player 10 allows fast pixel-level image bitmap transformation. WHEN SHOULD YOU USE FLASH?
  46. 46. RECORDING VIDEO OR AUDIOThe Flash player provides access to the computer’s camera and microphone where available. WHEN SHOULD YOU USE FLASH?
  47. 47. 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?
  48. 48. GAMESIf you’re interested in blending timeline and programatic animation it will be easier in Flash. WHEN SHOULD YOU USE FLASH?
  49. 49. COMPLEX VISUALIZATIONSIf you’re targeting the desktop, Flash is still probably your best bet for creating this content. WHEN SHOULD YOU USE FLASH?
  50. 50. KIOSKSFlash is often a good-fit for kiosk development. WHEN SHOULD YOU USE FLASH?
  51. 51. 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?
  52. 52. WHEN SHOULDN’TYOU USE FLASH?
  53. 53. PROGRESSIVE VIDEO PLAYER At least consider HTML5 backed up by a Flash player for maximum compatibility. WHEN SHOULDN’T YOU USE FLASH?
  54. 54. HOMEPAGE CAROUSELIt’s probably better if you do this in javascript and make the content indexable and accessible. WHEN SHOULDN’T YOU USE FLASH?
  55. 55. ANYTHING TARGETING iOS Apple and Adobe are still feuding... and that’s not likely to change soon. WHEN SHOULDN’T YOU USE FLASH?
  56. 56. 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?
  57. 57. ADMIN INTERFACESAgain use Flash to enhance an administrative interface, but primary development should be HTML. WHEN SHOULDN’T YOU USE FLASH?
  58. 58. MY 2 CENTSIt’s not an either/or question. Both are going to be around. Choose technologies that fit your requirements.
  59. 59. QUESTIONS?More answers online at http://nerdery.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×