Progressive
Enhancement
 with Flash
 Yahoo! Developer Summit
      London, 2007
Huh?
A quick detour...
Flickr Web Upload
What is progressive
 enhancement?
“making web sites accessible
[...] to people using different
    operating systems, web
     browsers and devices”
Progressive enhancement




           Content &
           structure


    HTML
Progressive enhancement




             Style


       CSS
    HTML
Progressive enhancement



                Behaviour


           JavaScript
       CSS
    HTML
Progressive enhancement


                 Advanced style
                  & behaviour

               Flash/Flex

      ...
How does the Flickr upload
      page work?
How does Flickr work?



       Flickr web
      upload page
How does Flickr work?



       Flickr web
      upload page




                        Server
How does Flickr work?

                    CSS


       Flickr web
      upload page




                          Server
Flickr without Flash

                     CSS


        Flickr web
       upload page

                       Browser han...
Flickr with Flash

                     CSS


        Flickr web
       upload page   JS




                           Se...
Flickr with Flash

                                      CSS


               Flickr web
              upload page        ...
Flickr with Flash

                     CSS


        Flickr web
       upload page   JS

                           JavaS...
Flickr with Flash

                     CSS


        Flickr web
       upload page   JS




                     SWF     ...
What other functionality
 can I steal from Flash?
How about cross-domain
sockets for push content?
Remember Comet?
Remember Comet?



      Web page
Remember Comet?



      Web page




                  Server
Remember Comet?
          HACK
  HACK
     HACK
               HACK
       HACK
  HACK  HACK
       WebHACK
          page...
Comet, without the hacks



       Web page
                  JS




                  SWF      Server
A quick (ish) example...
      Simple IM
But what about when
  Flash is visible?
Visible Flash



        Web page
Visible Flash



        Web page
                   JS
Visible Flash



        Web page
                   JS




                   SWF
Visible Flash



            Web page
                                 JS
    Pull web content from page




             ...
Visible Flash



        Web page
                   JS

                         Pass content to SWF file



             ...
Turn boring data tables...
     A     B    C

     5     9    11


     22   31    77


     85   23    1
...into pretty interactive graphs
             A          B      C



                                   150.0

          ...
In conclusion
In conclusion
Use SWFObject to embed Flash content

Upgrade alternate content or functionality with Flash

Steal as many f...
Questions?
Resources
SWFObject
http://blog.deconcept.com/swfobject


Slides, examples, etc.
http://dynamicflash.com/talks


Me
swebste...
Upcoming SlideShare
Loading in …5
×

Progressive Enhancement with Flash

4,861 views
4,731 views

Published on

Flash is often viewed as an 'all or nothing' technology, where either your site is made up of the holy troika of web standards technologies (that'd be HTML/CSS/JS) or it's 100% Flash and screw those who don't have the right version of the Flash Player. There is a happy medium, where Flash can fit into the progressive enhancement approach we all use with HTML/CSS/JS sites, leveraging the advanced features of the Flash Player for those users that have it.

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

  • Be the first to like this

No Downloads
Views
Total views
4,861
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Progressive Enhancement with Flash

  1. 1. Progressive Enhancement with Flash Yahoo! Developer Summit London, 2007
  2. 2. Huh?
  3. 3. A quick detour... Flickr Web Upload
  4. 4. What is progressive enhancement?
  5. 5. “making web sites accessible [...] to people using different operating systems, web browsers and devices”
  6. 6. Progressive enhancement Content & structure HTML
  7. 7. Progressive enhancement Style CSS HTML
  8. 8. Progressive enhancement Behaviour JavaScript CSS HTML
  9. 9. Progressive enhancement Advanced style & behaviour Flash/Flex JavaScript CSS HTML
  10. 10. How does the Flickr upload page work?
  11. 11. How does Flickr work? Flickr web upload page
  12. 12. How does Flickr work? Flickr web upload page Server
  13. 13. How does Flickr work? CSS Flickr web upload page Server
  14. 14. Flickr without Flash CSS Flickr web upload page Browser handles file uploading Server
  15. 15. Flickr with Flash CSS Flickr web upload page JS Server
  16. 16. Flickr with Flash CSS Flickr web upload page JS SWF Server Flash has asynchronous file upload
  17. 17. Flickr with Flash CSS Flickr web upload page JS JavaScript talks to Flash SWF Server
  18. 18. Flickr with Flash CSS Flickr web upload page JS SWF Server Flash uploads the files
  19. 19. What other functionality can I steal from Flash?
  20. 20. How about cross-domain sockets for push content?
  21. 21. Remember Comet?
  22. 22. Remember Comet? Web page
  23. 23. Remember Comet? Web page Server
  24. 24. Remember Comet? HACK HACK HACK HACK HACK HACK HACK WebHACK page HACK HACK HACK HACK HACK Server HACK
  25. 25. Comet, without the hacks Web page JS SWF Server
  26. 26. A quick (ish) example... Simple IM
  27. 27. But what about when Flash is visible?
  28. 28. Visible Flash Web page
  29. 29. Visible Flash Web page JS
  30. 30. Visible Flash Web page JS SWF
  31. 31. Visible Flash Web page JS Pull web content from page SWF
  32. 32. Visible Flash Web page JS Pass content to SWF file SWF
  33. 33. Turn boring data tables... A B C 5 9 11 22 31 77 85 23 1
  34. 34. ...into pretty interactive graphs A B C 150.0 112.5 75.0 37.5 2004 0 2005 2006 2007
  35. 35. In conclusion
  36. 36. In conclusion Use SWFObject to embed Flash content Upgrade alternate content or functionality with Flash Steal as many features as you can from Flash - it’s all free.
  37. 37. Questions?
  38. 38. Resources SWFObject http://blog.deconcept.com/swfobject Slides, examples, etc. http://dynamicflash.com/talks Me swebster@yahoo-inc.com steve@dynamicflash.com http://dynamicflash.com

×