SlideShare a Scribd company logo
1 of 29
Download to read offline
Beg, Borrow or Steal
  The Art of Flashing without Flashing
Who am I?
I am a blogger




    http://dynamicflash.com
I am an author
I am a Yahoo!




                            http://flickr.com/photos/niallkennedy/


Senior Front-End Engineer on the Front-End Architecture team
Catalyst for this talk - standards vs. Flash.
I am an idiot




 http://flickr.com/photos/thevoicewithin/
I am misleading
This session should
   have been...
HTML5
                      Features you want desperately
                           and can use TODAY!




Based on Ian Hickson’s Google presentation
So what’s wrong
  with HTML5?
Lots of nice features




                                http://flickr.com/photos/hassman/


Video and audio support
Push-technology (Web Sockets)
Many other great features
Not ready until 2022




2022 date taken from WHATWG roadmap
Some HTML5 features supported in bleeding-edge nightly build browsers
Still won’t be suitable for general use for a good few years
But you don’t have
 to wait that long
You can borrow features
 from the Flash Player
How does this
  all work?
How does this work?


                                                         HTML




HTML lives in browser-land
Limited in functionality by the browser’s capabilities
How does this work?


                        SWF                                   HTML




SWF playing in Flash Player has access to advanced features
How can we get the two to communicate?
How does this work?


                       SWF                              HTML




                                           JavaScript




JavaScript is can interact with HTML/DOM
How does this work?


                                       Text
                      SWF                                    HTML




                                       JavaScript




We need to find something to communicate between JS and SWF
How does this work?


                                           Text
                        SWF                                 HTML




                          alInt erface
                   Extern
                            class
                                           JavaScript




The ExternalInterface class provides a Flash-to-JS bridge
Available since Flash Player 8
How does this work?

                                       Invis
                                             ible
                                        Flash



                        SWF                                    HTML




                          alInt erface
                  Extern
                           class
                                          JavaScript




Now the Flash content doesn’t even have to be visible on the page.
Show ’01 ExternalInterface’ demo
Great, so what can
  we do with it?
Video playback



In HTML5 this is implemented by the <video> element
YouTube etc. have been using Flash for video for years
Use out-of-the-box solution like JW FLV Media Player
Audio playback



In HTML5 this is implemented by the <audio> element
Latest WebKit nightly also has Audio JS class for pure JS audio
Scott Schiller’s SoundManager library uses Flash to play JS-controlled audio
Multiple file upload



Part of Web Forms, but missing in HTML5 spec
Flash-based solutions include SWFUpload and YUI Uploader
Flash Player 10 introduces clickjacking security restriction that means file browse dialog can
only be invoked by a click on the Flash movie itself (not through ExternalInterface)
YUI Uploader allows creation of transparent overlay on links to get around this
Used on the current Flickr Web Upload page
Cross-frame
                   communication


HTML5 introduces window.postMessage method and ‘message’ event
Flash allows LocalConnection objects to communicate
Using LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality
NOW
Show ’05 Cross Frame Comms’ example and code
Offline storage



HTML5 introduces localStorage object and methods
Different to cookies - not sent to/from the server
Flash has has Local Shared Object for client-side data storage, so it’s easy to build emulation
layer
Show ’06 Offline Storage’ example and code
Socket-based
                    communication


Client side, comet is a mess of browser hacks - a virtual house of cards
HTML5 introduces Web Sockets for bidirectional communication
Flash has both XML and raw (byte-based) socket support
Show ’07 Sockets’ example and code
Thank you!
http://dynamicflash.com/my-talks#head08

More Related Content

What's hot

NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBDavid Wesst
 
Internship review
Internship reviewInternship review
Internship reviewPAWAN KUMAR
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme DevelopmentJosh Williams
 
Jared Whitlock Open Source In The Enterprise Plone @ Novell
Jared Whitlock   Open Source In The Enterprise    Plone @ NovellJared Whitlock   Open Source In The Enterprise    Plone @ Novell
Jared Whitlock Open Source In The Enterprise Plone @ NovellVincenzo Barone
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 
Drupal 8, Symfony and Content Management
Drupal 8, Symfony and Content ManagementDrupal 8, Symfony and Content Management
Drupal 8, Symfony and Content ManagementExove
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
Wordpress Questions & Answers
Wordpress Questions & AnswersWordpress Questions & Answers
Wordpress Questions & AnswersNicole Dion
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developersWojciech Bednarski
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Kamon Ayeva Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...
Kamon Ayeva   Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...Kamon Ayeva   Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...
Kamon Ayeva Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...Vincenzo Barone
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentFortySeven Media
 
Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...Codemotion
 

What's hot (20)

NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Internship review
Internship reviewInternship review
Internship review
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
Jared Whitlock Open Source In The Enterprise Plone @ Novell
Jared Whitlock   Open Source In The Enterprise    Plone @ NovellJared Whitlock   Open Source In The Enterprise    Plone @ Novell
Jared Whitlock Open Source In The Enterprise Plone @ Novell
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
Drupal 8, Symfony and Content Management
Drupal 8, Symfony and Content ManagementDrupal 8, Symfony and Content Management
Drupal 8, Symfony and Content Management
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Wordpress Questions & Answers
Wordpress Questions & AnswersWordpress Questions & Answers
Wordpress Questions & Answers
 
Knockout js (Dennis Haney)
Knockout js (Dennis Haney)Knockout js (Dennis Haney)
Knockout js (Dennis Haney)
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSS
 
Kamon Ayeva Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...
Kamon Ayeva   Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...Kamon Ayeva   Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...
Kamon Ayeva Antipatterns, Patterns, And Rules Of Thumb For Successful Plone...
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...
 

Viewers also liked

[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSSjeannewoo
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaWynn Netherland
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactiveCharles Hudson
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 

Viewers also liked (8)

HTML5 semantics
HTML5 semanticsHTML5 semantics
HTML5 semantics
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @media
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 

Similar to Beg, Borrow or Steal: The Art of Flashing Without Flashing

What Technical Communicators Need to Know about Flash
What Technical Communicators Need to Know about FlashWhat Technical Communicators Need to Know about Flash
What Technical Communicators Need to Know about FlashScott Abel
 
Svelte the future of frontend development
Svelte   the future of frontend developmentSvelte   the future of frontend development
Svelte the future of frontend developmenttwilson63
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...ijceronline
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEdgar Parada
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive SummaryGilad Khen
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASPamela Fox
 
RIA Platform Comparison
RIA Platform ComparisonRIA Platform Comparison
RIA Platform ComparisonOliver Steele
 
Manual en Dive Into html5
Manual en Dive Into html5Manual en Dive Into html5
Manual en Dive Into html5Erik Gur
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationMatthew Fabb
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...Shahzad
 

Similar to Beg, Borrow or Steal: The Art of Flashing Without Flashing (20)

What Technical Communicators Need to Know about Flash
What Technical Communicators Need to Know about FlashWhat Technical Communicators Need to Know about Flash
What Technical Communicators Need to Know about Flash
 
Svelte the future of frontend development
Svelte   the future of frontend developmentSvelte   the future of frontend development
Svelte the future of frontend development
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
 
GRADE 10 COMPUTER
GRADE 10 COMPUTERGRADE 10 COMPUTER
GRADE 10 COMPUTER
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
RIA Platform Comparison
RIA Platform ComparisonRIA Platform Comparison
RIA Platform Comparison
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
Manual en Dive Into html5
Manual en Dive Into html5Manual en Dive Into html5
Manual en Dive Into html5
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentation
 
Html5 Basics
Html5 BasicsHtml5 Basics
Html5 Basics
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
 
Html5 overview
Html5 overviewHtml5 overview
Html5 overview
 
Html5
Html5Html5
Html5
 
5. HTML5
5. HTML55. HTML5
5. HTML5
 

Recently uploaded

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Beg, Borrow or Steal: The Art of Flashing Without Flashing

  • 1. Beg, Borrow or Steal The Art of Flashing without Flashing
  • 3. I am a blogger http://dynamicflash.com
  • 4. I am an author
  • 5. I am a Yahoo! http://flickr.com/photos/niallkennedy/ Senior Front-End Engineer on the Front-End Architecture team Catalyst for this talk - standards vs. Flash.
  • 6. I am an idiot http://flickr.com/photos/thevoicewithin/
  • 8. This session should have been...
  • 9. HTML5 Features you want desperately and can use TODAY! Based on Ian Hickson’s Google presentation
  • 10. So what’s wrong with HTML5?
  • 11. Lots of nice features http://flickr.com/photos/hassman/ Video and audio support Push-technology (Web Sockets) Many other great features
  • 12. Not ready until 2022 2022 date taken from WHATWG roadmap Some HTML5 features supported in bleeding-edge nightly build browsers Still won’t be suitable for general use for a good few years
  • 13. But you don’t have to wait that long
  • 14. You can borrow features from the Flash Player
  • 15. How does this all work?
  • 16. How does this work? HTML HTML lives in browser-land Limited in functionality by the browser’s capabilities
  • 17. How does this work? SWF HTML SWF playing in Flash Player has access to advanced features How can we get the two to communicate?
  • 18. How does this work? SWF HTML JavaScript JavaScript is can interact with HTML/DOM
  • 19. How does this work? Text SWF HTML JavaScript We need to find something to communicate between JS and SWF
  • 20. How does this work? Text SWF HTML alInt erface Extern class JavaScript The ExternalInterface class provides a Flash-to-JS bridge Available since Flash Player 8
  • 21. How does this work? Invis ible Flash SWF HTML alInt erface Extern class JavaScript Now the Flash content doesn’t even have to be visible on the page. Show ’01 ExternalInterface’ demo
  • 22. Great, so what can we do with it?
  • 23. Video playback In HTML5 this is implemented by the <video> element YouTube etc. have been using Flash for video for years Use out-of-the-box solution like JW FLV Media Player
  • 24. Audio playback In HTML5 this is implemented by the <audio> element Latest WebKit nightly also has Audio JS class for pure JS audio Scott Schiller’s SoundManager library uses Flash to play JS-controlled audio
  • 25. Multiple file upload Part of Web Forms, but missing in HTML5 spec Flash-based solutions include SWFUpload and YUI Uploader Flash Player 10 introduces clickjacking security restriction that means file browse dialog can only be invoked by a click on the Flash movie itself (not through ExternalInterface) YUI Uploader allows creation of transparent overlay on links to get around this Used on the current Flickr Web Upload page
  • 26. Cross-frame communication HTML5 introduces window.postMessage method and ‘message’ event Flash allows LocalConnection objects to communicate Using LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality NOW Show ’05 Cross Frame Comms’ example and code
  • 27. Offline storage HTML5 introduces localStorage object and methods Different to cookies - not sent to/from the server Flash has has Local Shared Object for client-side data storage, so it’s easy to build emulation layer Show ’06 Offline Storage’ example and code
  • 28. Socket-based communication Client side, comet is a mess of browser hacks - a virtual house of cards HTML5 introduces Web Sockets for bidirectional communication Flash has both XML and raw (byte-based) socket support Show ’07 Sockets’ example and code