Flash As Bondo

2,866 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,866
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Flash As Bondo

  1. 1. Using Flash as Bondo james vreeland 2007-11-10
  2. 2. Who is this dufus?
  3. 3. Who is this dufus?
  4. 4. Who is this dufus? Not a Flash developer
  5. 5. Who is this dufus? Not a Flash developer Passionate about my users
  6. 6. Who is this dufus? Not a Flash developer Passionate about my users Personally indifferent in terms of platform selection
  7. 7. Ok, but Bondo? http://flickr.com/photos/romanedirisinghe/61596061/
  8. 8. Where are we now?
  9. 9. Where are we going?
  10. 10. Where are we going? Everywhere!
  11. 11. Where are we going? Everywhere! Tons of places we don’t expect to see a “web technology”.
  12. 12. Showing up in odd places.
  13. 13. Where?
  14. 14. Where? Set top boxes
  15. 15. Moxi Media Center
  16. 16. Where? Set top boxes
  17. 17. Where? Set top boxes MP3 players
  18. 18. iRiver U10 http://flickr.com/photos/frangino/115899032/
  19. 19. Where? Set top boxes MP3 players
  20. 20. Where? Set top boxes MP3 players Digital Cameras
  21. 21. Kodak Easyshare-One http://flickr.com/photos/audioblog/53030295/
  22. 22. Where? Set top boxes MP3 players Digital Cameras
  23. 23. Where? Set top boxes MP3 players Digital Cameras Mobile Phones
  24. 24. Nokia N80 http://flickr.com/photos/putu/385128499/
  25. 25. Where? Set top boxes MP3 players Digital Cameras Mobile Phones
  26. 26. Where? Set top boxes MP3 players Digital Cameras Mobile Phones “Other” devices
  27. 27. Chumby! http://flickr.com/photos/jvree/496617094
  28. 28. Organic’s lobby (Shameless plug)
  29. 29. It’s not that widespread. Is it?
  30. 30. It’s not that widespread. Is it? HP iPAQ rz1700 Casio Hitachi W32H NEC N506iSII Nokia N75 Tottori Sanyo A5508SA(talby) Sony Ericsson_K606c HP iPAQ rx3400 Casio Hitachi W41CA NEC N700i Nokia N80 Tottori Sanyo A5510SA Sony Ericsson_K606i HP iPAQ rx3700 Casio Hitachi W41H NEC N701iECO Nokia N90 (Sweets) Sony Ericsson K606i/c HP iPAQ rw6100 Casio Hitachi W42CA(G'z One) NEC N702iD Nokia N91 Tottori Sanyo A5514SA Sony Ericsson_K608c HP iPAQ rx3100 Casio Hitachi W42H NEC N702iS Nokia N91-1 Tottori Sanyo A5518SA Sony Ericsson_K608i Toshiba GENIO e550 Casio Hitachi W43CA NEC N900i Nokia N92 Tottori Sanyo A5518SA Sony Ericsson K608i/c Toshiba GENIO e550G Casio Hitachi W43H NEC N900iG Nokia N93 (Camera-less Model) Sony Ericsson_K610iM Sony CLIE NX60 Kyocera A1403K NEC N900iL Nokia N93i Tottori Sanyo A5519SA(Sweets Sony Ericsson P800 Sony CLIE NX70V Kyocera A5515K NEC N900iS Nokia N-Gage QD pure) Sony Ericsson P900 Sony CLIE NZ90 Kyocera A5521K NEC N901iC Nokia N-Gage Tottori Sanyo A5520SA(Junior Sony Ericsson P910 Sony CLIE TG50 Kyocera W21K NEC N901iS Nokia vvE50 Keitai) Sony Ericsson Premini II Sony CLIE UX40 Kyocera W21SA NEC N902i Panasonic P505i Tottori Sanyo A5520SAII(Junior Sony Ericsson SO505i Sony CLIE UX50 Kyocera W31K NEC N902iS Panasonic P505iS Keitai) Sony Ericsson SO505iC Moxi Digital, Inc. Moxi Media Kyocera W31KII NEC N902iX(HIGH-SPEED) Panasonic P506iC Tottori Sanyo W42SA Sony Ericsson SO505iS Center Kyocera W32K Nokia 3230 Panasonic P506iCII Sendo X Sony Ericsson SO506i(premini- Microsoft TV MSTV Kyocera W41K Nokia 3250 Panasonic P700i Sharp 703SH II) Nokia Mediaterminal Kyocera W42K Nokia 3600 Panasonic P701iD Sharp 703SHf Sony Ericsson SO506iC Thomson Multimedia TAK TV Kyocera W43K Nokia 3620 Panasonic P702i Sharp 705SH(SLIMIA) Sony Ericsson SO506iS iRiver U10 LG 8300 Nokia 3660 Panasonic P702iD Sharp 802SH (premini-IIS) CorAccess Home Companion LG 9800 Nokia 5200 Panasonic P851i Sharp 804SH Sony Ericsson SO702i Kodak Easyshare-One Zoom LG VX8100 Nokia 5300 Panasonic P900i Sharp 810SH Sony Ericsson SO902i Digital Camera LG VX8500 (Chocolate) Nokia 5500 Panasonic P900iV Sharp 811SH Sony Ericsson SO902iWP+ Siemens SIMPad SL4 LG VX9900 Nokia 6125 Panasonic P901i Sharp 902SH Sony Ericsson_V600i Chumby Mitsubishi D505i Nokia 6131 Panasonic P901iS Sharp 903SH Sony Ericsson_V800 Fujitsu F505i Mitsubishi D505iS Nokia 6151 Panasonic P901iTV Sharp 904SH Sony Ericsson W21S Fujitsu F505iGPS Mitsubishi D506i Nokia 6260 Panasonic P902i Sharp 905SH(AQUOS keitai) Sony Ericsson_W300i Fujitsu F505is Mitsubishi D701i Nokia 6300 Panasonic P902iS Sharp SH505i Sony Ericsson W31S Fujitsu F506i Mitsubishi D701iWM(MUSIC Nokia 6600 Samsung SCH-A930 Sharp SH505iS Sony Ericsson W32S Fujitsu F700i PORTER II) Nokia 6620 Samsung SCH-A950 Sharp SH506iC Sony Ericsson W41S Fujitsu F700iS Mitsubishi D702i Nokia 6630 Samsung SCH-A970 Sharp SH700i Sony Ericsson W42S(Walkman Fujitsu F702iD Mitsubishi D702iBCL Nokia 6670 Samsung SCH-A990 Sharp SH700iS Keitai) Fujitsu F882iES(FOMA Raku Mitsubishi D702iF Nokia 6680 Samsung 705SC Sharp SH702iD Sony Ericsson W43S Raku PHONE III) Mitsubishi D851iWM(MUSIC Nokia 6681 Samsung 706SC Sharp SH702iS Sony Ericsson W550 Fujitsu F900i PORTER X) Nokia 6682 Samsung 804SS Sharp SH851i(DOLCE) Sony Ericsson_W550c Fujitsu F900iC Mitsubishi D900i Nokia 7390 Sanyo A5507SA Sharp SH900i Sony Ericsson_W550i Fujitsu F900iT Mitsubishi D901i Nokia 7610 Sanyo A5508SA Sharp SH901iC Sony Ericsson W600 Fujitsu F901iC Mitsubishi D901iS Nokia 7710 Sanyo A5522SA Sharp SH901iS Sony Ericsson_W810i Fujitsu F901iS Mitsubishi D902i Nokia 8800 Sanyo SA700iS Sharp SH902i Sony Ericsson W900 Fujitsu F902i Mitsubishi D902iS Nokia 9200 Communicator Sanyo SA702i Sharp SH902iS Sony Ericsson W900i Fujitsu F902iS Mitsubishi M430i Nokia 9500 Communicator Sanyo SA800i(Kids' PHONE) Sharp SH902iSL(DOLCE SL) Sony Ericsson Z800 Hitachi W22H Motorola A920 Nokia E60 Sanyo W21SA Sharp SH903i Toshiba 810T Casio Hitachi A5512CA Motorola MOTOKRZR K1m Nokia E61 Sanyo W22SA Sharp W41SH Toshiba 910T Casio Hitachi A5513CA(G'zOne Motorola Razr V3c Nokia E62 Sanyo W31SA Siemens SX1 Toshiba A5511T TYPE-R) Motorola Razr V3m Nokia E70 Sanyo W31SAII Sony Ericsson 802SE Toshiba A5516T Casio Hitachi W21CA NEC N505i Nokia E70-1 Sanyo W32SA Sony Ericsson_K600 Toshiba A5517T(Simple Phone) Casio Hitachi W21CAII NEC N505iS Nokia N70 Sanyo W33SA Sony Ericsson_K600c Toshiba W21T Casio Hitachi W22H NEC N505iS Nokia N71 Sanyo W33SAII Sony Ericsson_K600i Toshiba W31T Casio Hitachi W31CA NEC N506i Nokia N71-1 Sanyo W41SA Sony Ericsson K600i/c Toshiba W32T Casio Hitachi W31H(PENCK) NEC N506iS Nokia N73 Tottori Sanyo A5507SA Sony Ericsson_K606c Toshiba W41T(MUSIC-HDD)
  31. 31. Jeez. Why is it all over the place?
  32. 32. Jeez. Why is it all over the place? Easy for designers
  33. 33. Jeez. Why is it all over the place? Easy for designers Easy for developers
  34. 34. Jeez. Why is it all over the place? Easy for designers Easy for developers Why do more than you need to?
  35. 35. What can I play with now?
  36. 36. Visualizations
  37. 37. Visualizations Papervision 3D http://code.google.com/p/papervision3d/
  38. 38. TiltViewer http://www.airtightinteractive.com/projects/tiltviewer/app/
  39. 39. Floorplanner 3D http://www.floorplanner.com/3ddemo
  40. 40. Twitter Blocks http://explore.twitter.com/blocks/
  41. 41. Paper Critters http://papercritters.com/pc.php
  42. 42. Visualizations Papervision 3D http://code.google.com/p/papervision3d/
  43. 43. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/
  44. 44. Digg Labs http://labs.digg.com/
  45. 45. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/
  46. 46. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/ Google Analytics http://www.google.com/analytics/
  47. 47. Google Analytics http://www.google.com/analytics
  48. 48. Desktop Goodies
  49. 49. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz
  50. 50. Snitter and Spaz http://snook.ca/snitter/ & http://funkatron.com/spaz
  51. 51. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz
  52. 52. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/
  53. 53. Digimix http://www.digidood.com/digimix/
  54. 54. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/
  55. 55. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/ EG 2006
  56. 56. EG 2006
  57. 57. Eye Candy
  58. 58. Twitter noise
  59. 59. Flickr photos by tag
  60. 60. Semantic XHTML Parsing
  61. 61. Semantic XHTML Parsing Heh?
  62. 62. Semantic XHTML Parsing Heh? Progressive page enhancement
  63. 63. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508
  64. 64. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508 Graceful Degradation
  65. 65. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508 Graceful Degradation Low bandwidth version of the site for “free”
  66. 66. Eating the DOM
  67. 67. Eating the DOM
  68. 68. Ask DrZ
  69. 69. Feature Page - Flash http://www.dodge.com/en
  70. 70. Feature Page - CSS only
  71. 71. Cheating on AJAX
  72. 72. Cheating on AJAX Acting as a cross domain proxy
  73. 73. Cheating on AJAX Acting as a cross domain proxy Cleaning up API returns
  74. 74. Browser shortcomings
  75. 75. Browser shortcomings Font constraints
  76. 76. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future
  77. 77. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support
  78. 78. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support On-the-fly graphical effects
  79. 79. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support On-the-fly graphical effects
  80. 80. Learn from other’s flubs.
  81. 81. Really bad user design http://www.slideshare.net/carsonified/michael-kowalski
  82. 82. Build backwards from your user
  83. 83. Build backwards from your user Don’t do what is best/easiest for you
  84. 84. Build backwards from your user Don’t do what is best/easiest for you Be willing to suffer, so your users don’t
  85. 85. Flash is not an OS
  86. 86. Flash is not an OS
  87. 87. Flash is not an OS
  88. 88. Flash is not an OS
  89. 89. Posture
  90. 90. Posture Sovereign Primary focus with a single screen
  91. 91. Posture Sovereign Primary focus with a single screen Transient Dialog boxes
  92. 92. Posture Sovereign Primary focus with a single screen Transient Dialog boxes Daemonic Drivers
  93. 93. Posture Sovereign Primary focus with a single screen Transient Dialog boxes Daemonic Drivers Parasitic Widgets
  94. 94. Easy on the animations
  95. 95. Easy on the animations Performance across different systems
  96. 96. Easy on the animations Performance across different systems Really easy to go overboard
  97. 97. Easy on the animations Performance across different systems Really easy to go overboard Keeps users from their desired task
  98. 98. Affordance
  99. 99. Affordance “Action Possibilities”
  100. 100. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback
  101. 101. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback Learned affordances
  102. 102. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback Learned affordances Tooltips and cursor feedback
  103. 103. Immediate feedback
  104. 104. Immediate feedback Down/Click feedback
  105. 105. Immediate feedback Down/Click feedback Pinwheel
  106. 106. Immediate feedback Down/Click feedback Pinwheel Progress/Loader bars
  107. 107. Create a style guide
  108. 108. Create a style guide Shared libraries / common components
  109. 109. Create a style guide Shared libraries / common components CSS
  110. 110. Create a style guide Shared libraries / common components CSS ui.swf
  111. 111. Create a style guide Shared libraries / common components CSS ui.swf Animation engines Fuse mx.transitions.tween
  112. 112. Modular design
  113. 113. Modular design No, I don’t mean make things blocky
  114. 114. Modular design No, I don’t mean make things blocky Skinning components
  115. 115. Modular design No, I don’t mean make things blocky Skinning components Personal library
  116. 116. A little extra umph!
  117. 117. JSFL JavaScript Flash
  118. 118. JSFL JavaScript Flash Streamline repetitive tasks (banners)
  119. 119. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools
  120. 120. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools Automated organization
  121. 121. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools Automated organization Quick keyframe animation work
  122. 122. ActionMonkey SpiderMonkey/Tamarin/What?
  123. 123. ActionMonkey SpiderMonkey/Tamarin/What? No use to you, yet
  124. 124. ActionMonkey SpiderMonkey/Tamarin/What? No use to you, yet Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
  125. 125. Logging When trace() isn’t enough
  126. 126. Logging When trace() isn’t enough
  127. 127. Logging When trace() isn’t enough “A better trace”
  128. 128. Logging When trace() isn’t enough “A better trace” LuminicBox
  129. 129. Logging When trace() isn’t enough “A better trace” LuminicBox
  130. 130. Logging When trace() isn’t enough “A better trace” LuminicBox
  131. 131. Microformats
  132. 132. Microformats High information density
  133. 133. Microformats High information density http://www.web2con.com/ Web 2.0 Conference: October 5-19, at the Argent Hotel, San Francisco, CA
  134. 134. Microformats High information density http://www.web2con.com/ Web 2.0 Conference: October 5-19, at the Argent Hotel, San Francisco, CA <div class=quot;veventquot;> <a class=quot;urlquot; href=quot;http://www.web2con.com/quot;> http://www.web2con.com/ </a> <span class=quot;summaryquot;>Web 2.0 Conference</span>: <abbr class=quot;dtstartquot; title=quot;2007-10-05quot;>October 5</abbr> - <abbr class=quot;dtendquot; title=quot;2007-10-20quot;>19</abbr>, at the <span class=quot;locationquot;>Argent Hotel, San Francisco, CA</span> </div>
  135. 135. Microformats High information density
  136. 136. Microformats High information density Building blocks for semantic XHTML
  137. 137. Microformats High information density Building blocks for semantic XHTML Creating standards for yourself
  138. 138. JSON JavaScript Object Notation
  139. 139. JSON JavaScript Object Notation Super simple data parsing
  140. 140. JSON JavaScript Object Notation Super simple data parsing { quot;firstNamequot;: quot;Johnquot;, quot;lastNamequot;: quot;Smithquot;, quot;addressquot;: { quot;streetAddressquot;: quot;21 2nd Streetquot;, quot;cityquot;: quot;New Yorkquot;, quot;statequot;: quot;NYquot;, quot;postalCodequot;: 10021 }, quot;phoneNumbersquot;: [ quot;212 732-1234quot;, quot;646 123-4567quot; ] }
  141. 141. JSON JavaScript Object Notation Super simple data parsing
  142. 142. JSON JavaScript Object Notation Super simple data parsing Client-side storage methodology
  143. 143. JSON JavaScript Object Notation Super simple data parsing Client-side storage methodology Don’t just eval(), please
  144. 144. Are you done talking yet?
  145. 145. Are you done talking yet? Don’t go looking for “nails”
  146. 146. Are you done talking yet? Don’t go looking for “nails” Think like your users
  147. 147. Are you done talking yet? Don’t go looking for “nails” Think like your users Build yourself a toolkit
  148. 148. Are you done talking yet? Don’t go looking for “nails” Think like your users Build yourself a toolkit Play with something new
  149. 149. Thanks! Questions? james vreeland jamesv.org j@mesv.org Special thanks to Andrew Bell - (http:www.tcimh.com) - for all creature sketches.

×