Javascript and Flash: Friends not Enemies

Slide 1: AJAX & Flash What we learned building SlideShare.net Jonathan Boutelle

Slide 2: First www.jonathanboutelle.com www.slideshare.net/jboutelle

Slide 4: ymmv

Slide 5: Play the field You don’t have to choose You quite possibly need both

Slide 6: Flash on a leash Keep http://www.california-gold-rush-miner.us/california-gold-nugget.htm

Slide 7: SEO ;-<

Slide 8: Load time ;-<

Slide 9: Flash nuggets as best practice Full-Screen?

Slide 10: Invisible Flash! Swfupload Dojo.storage

Slide 11: Full-screening? OK for “immersive” experiences

Slide 12: Cheapest Tricks “Is it even AJAX”?

Slide 13: Tabs

Slide 14: Accordions

Slide 15: MicroLink

Slide 16: One-Second Mutation

Slide 17: PopUp

Slide 18: Cheap Tricks and Server-side Performance

Slide 19: 3) Cheap(ish) Tricks Malleable Content Progress Indicator One-Second Spotlight

Slide 20: Malleable content 1 2 The Brand Gap The Brand Gap From: coolstuff, 1 day ago From: coolstuff, 1 day ago 326 views | 1 comment | 5 favorites 326 views | 1 comment | 5 favorites Share this slideshow Add/Edit tags Digg this Separate tags by spaces. Subscribe to user Put multi-words tags within quotes, e.g., “palo alto” Mark as inappropriate Favorite [x] tags: brand brand design design (Edit) Cancel Update Tags Tags Brand design branding Brand design 3 4 The Brand Gap The Brand Gap From: coolstuff, 1 day ago From: coolstuff, 1 day ago 326 views | 1 comment | 5 favorites 326 views | 1 comment | 5 favorites Share this slideshow Digg this Subscribe to user Mark as inappropriate Favorite [x] tags: brand design branding marketing (Edit) Tags Tags Brand design branding Brand design branding

Slide 21: Progress Indicator

Slide 22: 2 1 Pricew’s Slidespace Pricew’s Slidespace pricew pricew Male, San Francisco, CA Male, San Francisco, CA pricew.blogspot.com pricew.blogspot.com Add pricew as contact Add pricew as contact Ping pricew Ping pricew Message price1 pings Liked your presentation on venture capital By jboutelle (1 second ago) Welcome to SlideShare By userx (2 days ago) This is great by coolstuff (5 days ago) One-second spotlight

Slide 23: 2 1 Pricew’s Slidespace Pricew’s Slidespace pricew pricew Male, San Francisco, CA Male, San Francisco, CA pricew.blogspot.com pricew.blogspot.com Add pricew as contact Add pricew as contact Ping pricew Ping pricew Message pricew Message pricew Hey dude! Long time… Message Sent! pings your presentation on Liked venture capital Liked your presentation on By jboutelle (1 second ago) venture capital ByWelcome (1 second ago) jboutelle to SlideShare By userx (2 days ago) Welcome to SlideShare By userx (2 days ago) Temp Messages

Slide 24: Cheap Tricks and server-side performance (2)

Slide 25: Net Impact (on engineers) (on users) (on IA)

Slide 26: 4. Flash graphic goodies Fonts Vector graphics Animation

Slide 27: Flash multimedia output

Slide 28: Flash multimedia input

Slide 29: Flash multimedia editing

Slide 30: 6. Widgetopia! Yes, I mean widgets

Slide 31: http://www.baychi.org/calendar/20060314/

Slide 32: Upload progress bars Swfupload.js

Slide 33: Sockets!

Slide 34: Local Data Objects “supercookies” dojo.storage

Slide 35: 7. Cool, but not useful to me FLEX (125 kb download size)

Slide 36: FLASH crossover Artists 8. AJAX

Slide 37: Finally

Slide 38: Questions? www.slideshare.net/jboutelle