• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,595
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Using Flash as Bondo james vreeland 2007-11-10
  • 2. Who is this dufus?
  • 3. Who is this dufus?
  • 4. Who is this dufus? Not a Flash developer
  • 5. Who is this dufus? Not a Flash developer Passionate about my users
  • 6. Who is this dufus? Not a Flash developer Passionate about my users Personally indifferent in terms of platform selection
  • 7. Ok, but Bondo? http://flickr.com/photos/romanedirisinghe/61596061/
  • 8. Where are we now?
  • 9. Where are we going?
  • 10. Where are we going? Everywhere!
  • 11. Where are we going? Everywhere! Tons of places we don’t expect to see a “web technology”.
  • 12. Showing up in odd places.
  • 13. Where?
  • 14. Where? Set top boxes
  • 15. Moxi Media Center
  • 16. Where? Set top boxes
  • 17. Where? Set top boxes MP3 players
  • 18. iRiver U10 http://flickr.com/photos/frangino/115899032/
  • 19. Where? Set top boxes MP3 players
  • 20. Where? Set top boxes MP3 players Digital Cameras
  • 21. Kodak Easyshare-One http://flickr.com/photos/audioblog/53030295/
  • 22. Where? Set top boxes MP3 players Digital Cameras
  • 23. Where? Set top boxes MP3 players Digital Cameras Mobile Phones
  • 24. Nokia N80 http://flickr.com/photos/putu/385128499/
  • 25. Where? Set top boxes MP3 players Digital Cameras Mobile Phones
  • 26. Where? Set top boxes MP3 players Digital Cameras Mobile Phones “Other” devices
  • 27. Chumby! http://flickr.com/photos/jvree/496617094
  • 28. Organic’s lobby (Shameless plug)
  • 29. It’s not that widespread. Is it?
  • 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. Jeez. Why is it all over the place?
  • 32. Jeez. Why is it all over the place? Easy for designers
  • 33. Jeez. Why is it all over the place? Easy for designers Easy for developers
  • 34. Jeez. Why is it all over the place? Easy for designers Easy for developers Why do more than you need to?
  • 35. What can I play with now?
  • 36. Visualizations
  • 37. Visualizations Papervision 3D http://code.google.com/p/papervision3d/
  • 38. TiltViewer http://www.airtightinteractive.com/projects/tiltviewer/app/
  • 39. Floorplanner 3D http://www.floorplanner.com/3ddemo
  • 40. Twitter Blocks http://explore.twitter.com/blocks/
  • 41. Paper Critters http://papercritters.com/pc.php
  • 42. Visualizations Papervision 3D http://code.google.com/p/papervision3d/
  • 43. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/
  • 44. Digg Labs http://labs.digg.com/
  • 45. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/
  • 46. Visualizations Papervision 3D http://code.google.com/p/papervision3d/ Digg Labs http://labs.digg.com/ Google Analytics http://www.google.com/analytics/
  • 47. Google Analytics http://www.google.com/analytics
  • 48. Desktop Goodies
  • 49. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz
  • 50. Snitter and Spaz http://snook.ca/snitter/ & http://funkatron.com/spaz
  • 51. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz
  • 52. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/
  • 53. Digimix http://www.digidood.com/digimix/
  • 54. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/
  • 55. Desktop Goodies Twitter AIR apps http://snook.ca/snitter/ http://funkatron.com/spaz Digimix http://www.digidood.com/digimix/ EG 2006
  • 56. EG 2006
  • 57. Eye Candy
  • 58. Twitter noise
  • 59. Flickr photos by tag
  • 60. Semantic XHTML Parsing
  • 61. Semantic XHTML Parsing Heh?
  • 62. Semantic XHTML Parsing Heh? Progressive page enhancement
  • 63. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508
  • 64. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508 Graceful Degradation
  • 65. Semantic XHTML Parsing Heh? Progressive page enhancement Maintains SEO/508 Graceful Degradation Low bandwidth version of the site for “free”
  • 66. Eating the DOM
  • 67. Eating the DOM
  • 68. Ask DrZ
  • 69. Feature Page - Flash http://www.dodge.com/en
  • 70. Feature Page - CSS only
  • 71. Cheating on AJAX
  • 72. Cheating on AJAX Acting as a cross domain proxy
  • 73. Cheating on AJAX Acting as a cross domain proxy Cleaning up API returns
  • 74. Browser shortcomings
  • 75. Browser shortcomings Font constraints
  • 76. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future
  • 77. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support
  • 78. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support On-the-fly graphical effects
  • 79. Browser shortcomings Font constraints sIFR http://novemberborn.net/sifr3/look-into-the-future Complex PNG support On-the-fly graphical effects
  • 80. Learn from other’s flubs.
  • 81. Really bad user design http://www.slideshare.net/carsonified/michael-kowalski
  • 82. Build backwards from your user
  • 83. Build backwards from your user Don’t do what is best/easiest for you
  • 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. Flash is not an OS
  • 86. Flash is not an OS
  • 87. Flash is not an OS
  • 88. Flash is not an OS
  • 89. Posture
  • 90. Posture Sovereign Primary focus with a single screen
  • 91. Posture Sovereign Primary focus with a single screen Transient Dialog boxes
  • 92. Posture Sovereign Primary focus with a single screen Transient Dialog boxes Daemonic Drivers
  • 93. Posture Sovereign Primary focus with a single screen Transient Dialog boxes Daemonic Drivers Parasitic Widgets
  • 94. Easy on the animations
  • 95. Easy on the animations Performance across different systems
  • 96. Easy on the animations Performance across different systems Really easy to go overboard
  • 97. Easy on the animations Performance across different systems Really easy to go overboard Keeps users from their desired task
  • 98. Affordance
  • 99. Affordance “Action Possibilities”
  • 100. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback
  • 101. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback Learned affordances
  • 102. Affordance “Action Possibilities” Give target areas plenty of space and interaction feedback Learned affordances Tooltips and cursor feedback
  • 103. Immediate feedback
  • 104. Immediate feedback Down/Click feedback
  • 105. Immediate feedback Down/Click feedback Pinwheel
  • 106. Immediate feedback Down/Click feedback Pinwheel Progress/Loader bars
  • 107. Create a style guide
  • 108. Create a style guide Shared libraries / common components
  • 109. Create a style guide Shared libraries / common components CSS
  • 110. Create a style guide Shared libraries / common components CSS ui.swf
  • 111. Create a style guide Shared libraries / common components CSS ui.swf Animation engines Fuse mx.transitions.tween
  • 112. Modular design
  • 113. Modular design No, I don’t mean make things blocky
  • 114. Modular design No, I don’t mean make things blocky Skinning components
  • 115. Modular design No, I don’t mean make things blocky Skinning components Personal library
  • 116. A little extra umph!
  • 117. JSFL JavaScript Flash
  • 118. JSFL JavaScript Flash Streamline repetitive tasks (banners)
  • 119. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools
  • 120. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools Automated organization
  • 121. JSFL JavaScript Flash Streamline repetitive tasks (banners) Panel IDE tools Automated organization Quick keyframe animation work
  • 122. ActionMonkey SpiderMonkey/Tamarin/What?
  • 123. ActionMonkey SpiderMonkey/Tamarin/What? No use to you, yet
  • 124. ActionMonkey SpiderMonkey/Tamarin/What? No use to you, yet Combination of the Mozilla JavaScript engine and the Tamarin renderer donated by Adobe
  • 125. Logging When trace() isn’t enough
  • 126. Logging When trace() isn’t enough
  • 127. Logging When trace() isn’t enough “A better trace”
  • 128. Logging When trace() isn’t enough “A better trace” LuminicBox
  • 129. Logging When trace() isn’t enough “A better trace” LuminicBox
  • 130. Logging When trace() isn’t enough “A better trace” LuminicBox
  • 131. Microformats
  • 132. Microformats High information density
  • 133. Microformats High information density http://www.web2con.com/ Web 2.0 Conference: October 5-19, at the Argent Hotel, San Francisco, CA
  • 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. Microformats High information density
  • 136. Microformats High information density Building blocks for semantic XHTML
  • 137. Microformats High information density Building blocks for semantic XHTML Creating standards for yourself
  • 138. JSON JavaScript Object Notation
  • 139. JSON JavaScript Object Notation Super simple data parsing
  • 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. JSON JavaScript Object Notation Super simple data parsing
  • 142. JSON JavaScript Object Notation Super simple data parsing Client-side storage methodology
  • 143. JSON JavaScript Object Notation Super simple data parsing Client-side storage methodology Don’t just eval(), please
  • 144. Are you done talking yet?
  • 145. Are you done talking yet? Don’t go looking for “nails”
  • 146. Are you done talking yet? Don’t go looking for “nails” Think like your users
  • 147. Are you done talking yet? Don’t go looking for “nails” Think like your users Build yourself a toolkit
  • 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. Thanks! Questions? james vreeland jamesv.org j@mesv.org Special thanks to Andrew Bell - (http:www.tcimh.com) - for all creature sketches.