The document discusses the transition from Flash to HTML5 and the opportunities it presents for cross-browser, cross-device compatibility, and enhanced user experiences. It highlights the features of HTML5, such as offline capabilities, semantic tags, and responsive design, while outlining a migration strategy for existing Flash applications. Additionally, it emphasizes the importance of targeted product design and cloud-based services to effectively implement these changes.

1. The
Flash HTML5
Opportunity
Thomas Burleson,
Digital Solutions Architect
August 2012
Copyright 2012, Mindspace LLC http://www.gridlinked.info

2. SXM Internet Rad io
1) A ong wrong ? Flash?
What's w ith
W hat's wr
2) W hy do we care ?
3) How do we respond ?
B Why does we care ?
C What are we going to do ?

3. SXM Internet Rad io
1) W A wrong wrong ? Flash?
hat's What's w ith
2) W hy do we care ?
o we respond ?
3) How d Why does we care ?
B
C What are we going to do ?

5. The Shot Heard
‘Round the World'
April 2010
Copyright 2012, Mindspace LLC

7. Ubiquity Lost
Copyright 2012, Mindspace LLC

8. SXM Internet Rad io
A What's 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 ?

9. Emergence [and viability] of HTML5
Opportunity for ubiquity across browsers,
OS, & hardware devices.
Copyright 2012, Mindspace LLC

10. +
Copyright 2012, Mindspace LLC

11. What is HTML5 ?
• Drag 'n Drop
• Offline
• Expressive Tags
• History Management
• and more!
Copyright 2012, Mindspace LLC

12. Semantic Tags &
Multimedia Playback
Microformats
Offline Apps & 3D Graphics &
Storage Effects
Device & Data Performance &
Access Integration
Connectivity & Web Layout, Effects &
Sockets Typography
Copyright 2012, Mindspace LLC

13. Cross-Browser
Copyright 2012, Mindspace LLC

14. Cross-Device
Copyright 2012, Mindspace LLC

15. Progressive Enhancement
Graceful Degradation
Copyright 2012, Mindspace LLC

16. Progressive Enhancement
A 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

17. Responsive Design
Responsive Design leverages CSS media queries to define layouts based on media device.
Copyright 2012, Mindspace LLC

18. Copyright 2012, Mindspace LLC

19. The JavaScript Renaissance
Copyright 2012, Mindspace LLC

20. Flash vs HTML5
Popularity based on GitHub Project Activity
and StackOverflow Questions
Copyright 2012, Mindspace LLC

21. Applications
Copyright 2012, Mindspace LLC

22. Building HTML5 applications
Pageless
Immersive
Apps Smart
Frameworks
Copyright 2012, Mindspace LLC

23. Javascript Frameworks
Copyright 2012, Mindspace LLC

24. Iconic HTML5 Solutions
Apps
Copyright 2012, Mindspace LLC

28. Were those applications
Flash or HTML5 ?
Copyright 2012, Mindspace LLC

29. What we want ? ... consumer-facing applications
• Performant (fast load and responsive)
• Immersive (rich and engaging)
• Pageless (background, on-demand processing)
• Ubiquitous
• Common Code
Javascript is now viable for graphics, charts, interactive experiences, and page-less solutions
Copyright 2012, Mindspace LLC

30. Class: SXM Internet Rad io
A What's 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 ?

31. Apps
Opportunity to consolidate product development to common-code base
with better reach to larger market.
Copyright 2012, Mindspace LLC

32. What about our Flash solution, man ?

33. • Lists
All UI & user interactions •
•
Bios
Album Info
in JS/CSS3/HTML5 • Branded UI
• etc.
Desktop Mobile
Browser Devices
Reuse 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

34. Copyright 2012, Mindspace LLC

35. 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

36. 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

37. Critical
Aspects
• Targeted product designs are critical...
• Cloud-based middle-tier data services are
critical...
• Guerilla developers are critical...
Copyright 2012, Mindspace LLC