Embed Size (px)
DESCRIPTION
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.
Citation preview
Progressive Enhancement
with FlashYahoo! 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”
HTML
Content & structure
Progressive enhancement
HTML
CSS
Style
Progressive enhancement
HTML
CSS
JavaScript
Behaviour
Progressive enhancement
HTML
CSS
JavaScript
Flash/Flex
Advanced style& behaviour
Progressive enhancement
How does the Flickr uploadpage work?
Flickr web upload page
How does Flickr work?
Flickr web upload page
How does Flickr work?
Server
Flickr web upload page
CSS
How does Flickr work?
Server
Flickr web upload page
CSS
Server
Flickr without Flash
Browser handles file uploading
Flickr web upload page
CSS
Server
Flickr with Flash
JS
Flickr web upload page
SWF
CSS
Flickr with Flash
JS
ServerFlash has asynchronous file upload
Flickr web upload page
SWF
JS
CSS
Server
Flickr with Flash
JavaScript talks to Flash
Flickr web upload page
SWF
JS
CSS
Server
Flickr with Flash
Flash uploads the files
What other functionalitycan I steal from Flash?
How about cross-domain sockets for push content?
Remember Comet?
Web page
Remember Comet?
Web page
Server
Remember Comet?
Web page
Server
HACK
HACK
HACKHACK
HACK
HACK
HACKHACK
HACK
HACKHACK
HACK
HACKHACK
Remember Comet?
Web page
SWF
JS
Server
Comet, without the hacks
A quick (ish) example...Simple IM
But what about when Flash is visible?
Web page
Visible Flash
Web pageJS
Visible Flash
Web page
SWF
JS
Visible Flash
Web page
SWF
JS
Visible Flash
Pull web content from page
Web page
SWF
JS
Visible Flash
Pass content to SWF file
A B C
5 9 11
22 31 77
85 23 1
Turn boring data tables...
0
37.5
75.0
112.5
150.0
20042005
20062007
A B C
...into pretty interactive graphs
In conclusion
In conclusionUse 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.
Questions?
SWFObjecthttp://blog.deconcept.com/swfobject
Resources
Slides, examples, etc.http://dynamicflash.com/talks
[email protected]@dynamicflash.comhttp://dynamicflash.com
![Fundamental Progressive Enhancement [Web Design World Boston 2008]](https://img.dokumen.tips/doc/110x75/54b7a0634a79592d048b4573/fundamental-progressive-enhancement-web-design-world-boston-2008.jpg)
![Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]](https://img.dokumen.tips/doc/110x75/54c70c654a79593b3d8b45bd/crafting-rich-experiences-with-progressive-enhancement-beyond-tellerrand-2011.jpg)
![Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]](https://img.dokumen.tips/doc/110x75/54c70c774a79593b3d8b45c0/crafting-rich-experiences-with-progressive-enhancement-webvisions-2011.jpg)
![Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://img.dokumen.tips/doc/110x75/54c70c954a79593b3d8b45c6/progressive-enhancement-with-aria-accessibility-summit-2010.jpg)
![Progressive Enhancement with ARIA [WebVisions 2011]](https://img.dokumen.tips/doc/110x75/54c70c744a795928408b459f/progressive-enhancement-with-aria-webvisions-2011.jpg)
![Progressive Enhancement & Mobile [HOW Interactive 2012]](https://img.dokumen.tips/doc/110x75/540e1a198d7f72767e8b4c37/progressive-enhancement-mobile-how-interactive-2012.jpg)