Progressive Enhancement with Flash
-
Upload
spjwebster -
Category
Business
-
view
4.591 -
download
1
description
Transcript of Progressive Enhancement with Flash
![Page 1: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/1.jpg)
Progressive Enhancement
with FlashYahoo! Developer Summit
London, 2007
![Page 2: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/2.jpg)
Huh?
![Page 3: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/3.jpg)
A quick detour...Flickr Web Upload
![Page 4: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/4.jpg)
What is progressive enhancement?
![Page 5: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/5.jpg)
“making web sites accessible [...] to people using different
operating systems, web browsers and devices”
![Page 6: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/6.jpg)
HTML
Content & structure
Progressive enhancement
![Page 7: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/7.jpg)
HTML
CSS
Style
Progressive enhancement
![Page 8: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/8.jpg)
HTML
CSS
JavaScript
Behaviour
Progressive enhancement
![Page 9: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/9.jpg)
HTML
CSS
JavaScript
Flash/Flex
Advanced style& behaviour
Progressive enhancement
![Page 10: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/10.jpg)
How does the Flickr uploadpage work?
![Page 11: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/11.jpg)
Flickr web upload page
How does Flickr work?
![Page 12: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/12.jpg)
Flickr web upload page
How does Flickr work?
Server
![Page 13: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/13.jpg)
Flickr web upload page
CSS
How does Flickr work?
Server
![Page 14: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/14.jpg)
Flickr web upload page
CSS
Server
Flickr without Flash
Browser handles file uploading
![Page 15: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/15.jpg)
Flickr web upload page
CSS
Server
Flickr with Flash
JS
![Page 16: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/16.jpg)
Flickr web upload page
SWF
CSS
Flickr with Flash
JS
ServerFlash has asynchronous file upload
![Page 17: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/17.jpg)
Flickr web upload page
SWF
JS
CSS
Server
Flickr with Flash
JavaScript talks to Flash
![Page 18: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/18.jpg)
Flickr web upload page
SWF
JS
CSS
Server
Flickr with Flash
Flash uploads the files
![Page 19: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/19.jpg)
What other functionalitycan I steal from Flash?
![Page 20: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/20.jpg)
How about cross-domain sockets for push content?
![Page 21: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/21.jpg)
Remember Comet?
![Page 22: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/22.jpg)
Web page
Remember Comet?
![Page 23: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/23.jpg)
Web page
Server
Remember Comet?
![Page 24: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/24.jpg)
Web page
Server
HACK
HACK
HACKHACK
HACK
HACK
HACKHACK
HACK
HACKHACK
HACK
HACKHACK
Remember Comet?
![Page 25: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/25.jpg)
Web page
SWF
JS
Server
Comet, without the hacks
![Page 26: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/26.jpg)
A quick (ish) example...Simple IM
![Page 27: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/27.jpg)
But what about when Flash is visible?
![Page 28: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/28.jpg)
Web page
Visible Flash
![Page 29: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/29.jpg)
Web pageJS
Visible Flash
![Page 30: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/30.jpg)
Web page
SWF
JS
Visible Flash
![Page 31: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/31.jpg)
Web page
SWF
JS
Visible Flash
Pull web content from page
![Page 32: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/32.jpg)
Web page
SWF
JS
Visible Flash
Pass content to SWF file
![Page 33: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/33.jpg)
A B C
5 9 11
22 31 77
85 23 1
Turn boring data tables...
![Page 34: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/34.jpg)
0
37.5
75.0
112.5
150.0
20042005
20062007
A B C
...into pretty interactive graphs
![Page 35: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/35.jpg)
In conclusion
![Page 36: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/36.jpg)
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.
![Page 37: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/37.jpg)
Questions?
![Page 38: Progressive Enhancement with Flash](https://reader035.fdocuments.us/reader035/viewer/2022062405/555e28fdd8b42a6a4c8b509e/html5/thumbnails/38.jpg)
SWFObjecthttp://blog.deconcept.com/swfobject
Resources
Slides, examples, etc.http://dynamicflash.com/talks
[email protected]@dynamicflash.comhttp://dynamicflash.com