The Flash to HTML5 Opportunity

426 views

Published on

With the future of Flash/Flex uncertain and platform/device ubiquity lost, many companies now have a great opportunity to migrate their Flash applications to HTML5 architectures... without sacrificing their immersive experiences.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
426
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Flash to HTML5 Opportunity

  1. 1. The Flash HTML5 Opportunity Thomas Burleson, Digital Solutions Architect August 2012Copyright 2012, Mindspace LLC http://www.gridlinked.info
  2. 2. SXM Internet Rad io1) A ong wrong ? Flash? Whats w ith W hats wr2) W hy do we care ?3) How do we respond ? B Why does we care ? C What are we going to do ?
  3. 3. SXM Internet Rad io1) W A wrong wrong ? Flash? hats Whats w ith2) W hy do we care ? o we respond ?3) How d Why does we care ? B C What are we going to do ?
  4. 4. The Shot Heard ‘Round the World April 2010Copyright 2012, Mindspace LLC
  5. 5. Ubiquity LostCopyright 2012, Mindspace LLC
  6. 6. SXM Internet Rad io A Whats wrong ? 1) W hat is wrong ? W hy do we care ? 2) B Why does we care ? 3) How do we respond ? C What are we going to do ?
  7. 7. Emergence [and viability] of HTML5Opportunity for ubiquity across browsers, OS, & hardware devices. Copyright 2012, Mindspace LLC
  8. 8. + Copyright 2012, Mindspace LLC
  9. 9. What is HTML5 ? • Drag n Drop • Offline • Expressive Tags • History Management • and more! Copyright 2012, Mindspace LLC
  10. 10. Semantic Tags & Multimedia PlaybackMicroformatsOffline Apps & 3D Graphics &Storage EffectsDevice & Data Performance &Access IntegrationConnectivity & Web Layout, Effects &Sockets Typography Copyright 2012, Mindspace LLC
  11. 11. Cross-Browser Copyright 2012, Mindspace LLC
  12. 12. Cross-Device Copyright 2012, Mindspace LLC
  13. 13. Progressive Enhancement Graceful Degradation Copyright 2012, Mindspace LLC
  14. 14. Progressive EnhancementA base page that is usable and readable even in the worst possible browser is progressively enhanced with features that are less widely supported.       Copyright 2012, Mindspace LLC
  15. 15. Responsive DesignResponsive Design leverages CSS media queries to define layouts based on media device. Copyright 2012, Mindspace LLC
  16. 16. Copyright 2012, Mindspace LLC
  17. 17. The JavaScript Renaissance Copyright 2012, Mindspace LLC
  18. 18. Flash vs HTML5Popularity based on GitHub Project Activity and StackOverflow Questions Copyright 2012, Mindspace LLC
  19. 19. Applications Copyright 2012, Mindspace LLC
  20. 20. Building HTML5 applications Pageless Immersive Apps SmartFrameworks Copyright 2012, Mindspace LLC
  21. 21. Javascript Frameworks Copyright 2012, Mindspace LLC
  22. 22. Iconic HTML5 SolutionsApps Copyright 2012, Mindspace LLC
  23. 23. Were those applications Flash or HTML5 ? Copyright 2012, Mindspace LLC
  24. 24. What we want ? ... consumer-facing applications • Performant (fast load and responsive) • Immersive (rich and engaging) • Pageless (background, on-demand processing) • Ubiquitous • Common CodeJavascript is now viable for graphics, charts, interactive experiences, and page-less solutions Copyright 2012, Mindspace LLC
  25. 25. Class: SXM Internet Rad io A Whats wrong ? 1) W hat is wrong ? 2) W hy do we care ? B Why does we care ? 3) How do we respond ? C What are we going to do ?
  26. 26. AppsOpportunity to consolidate product development to common-code base with better reach to larger market. Copyright 2012, Mindspace LLC
  27. 27. What about our Flash solution, man ?
  28. 28. • Lists All UI & user interactions • • Bios Album Info in JS/CSS3/HTML5 • Branded UI • etc. Desktop Mobile Browser DevicesReuse existing Flash Audio components Reuse PhoneGap for hardware and native-component access.• modified as self-contained, deployable Write native implementations of• manages security, dmca, etc. Audio component• embedded as hidden HTML element Write highly secure playback• driven by javascript layers(android and iPhone)• compensates for poor WebKit API• hides all complexities of playback Copyright 2012, Mindspace LLC
  29. 29. Copyright 2012, Mindspace LLC
  30. 30. Product Transition Path• Migrate as much Flash code to Javascript• Build Javascript library/API as facade bridge Flash libraries components (if appropriate) == hybrid solutions.• Or Develop native-implementations of components (as needed) Copyright 2012, Mindspace LLC
  31. 31. Product Considerations Path • Data services must be designed with API for thin, HTML5 clients • Product designs must anticipate both browser AND mobile... using responsive designs. • Branding for corporate & dashboard OEM • HTML5 embedding (ala Slideshare) • Server-push to synch across devices Copyright 2012, Mindspace LLC
  32. 32. Critical Aspects• Targeted product designs are critical...• Cloud-based middle-tier data services are critical...• Guerilla developers are critical... Copyright 2012, Mindspace LLC

×