Get educated from HTML5 and Flash involvment

You’ve probably heard a lot of noise in the press, blogs, twitter, etc. about HTML 5. You’ve probably also heard how its new video and animation capabilities combined with other cool HTML 5 features is going to be the death of Flash, right? As a technical evangelist for Adobe, I obviously know a lot about the capabilities of Flash, but I also have invested a lot of time getting up to speed on HTML 5 so I could fully understand the debate and separate fact from noise. I’ve been in this field long enough to see several religious technology debates come and go, so I tend to be very pragmatic when it comes to technology shifts. I’ve also learned over the years to stay very educated on key topics, deal only with facts I can confirm myself, and rely on neither marketing BS nor sensationalism in the press.

I’ve been involved in web development since the early betas of Netscape. I’ve used Java Servlets, JSPs, ASPs, Perl/CGI, PHP, ColdFusion and other means of dynamically generating web content and have always worked to push browser capabilities to the limit. From day one I was excited about what web browsers could do, but like many web developers, I was almost instantly frustrated by the limitations and the painfully slow progress of web standards. It has taken 15 years to reach the capabilities reflected in the HTML 5 spec. These features should have been in HTML 2 or at least HTML 3! Many other standards have innovated dramatically faster, so for me personally, HTML 5 is at least 10 years overdue!

The Flash/HTML overlap – Would you replace your tags with Flash?

Flash was added to our toolbox to extend the capabilities of web developers beyond what HTML provided. It basically has helped developers fill the gap that exists between the desires of our application design and the capabilities of existing web technologies. The intent of Flash has never been to compete with HTML. The intent is to help developers realize the goals of our applications. If HTML and related technologies provided everything we needed, Flash would not exist.

As complementary technologies evolve, there are inevitably overlapping capabilities. Adobe has never promoted the use of Flash to do things that HTML can do without Flash. Have you ever heard anyone promoting the use of Flash to display images? You could replace all of your tags with Flash but why would you use a plugin where no plugin is really needed?! Although Flash would do a great job at displaying your images and even provide some unique features, it’s very unlikely that you need these features so you would be nuts to use Flash! If Adobe told me to promote this idea, I would move to the Lightroom team!

This is a trivial example of where there is overlap, but because web developers fully understand the requirements and capabilities of displaying images, it’s obvious which technology to use! The currently debated overlapping features are a bit more complex resulting in confusion for many.

HTML 5 increases the overlap

I remember the first time I saw DHTML used to make cascading menus (2002 I think?), I was impressed! I could build UI controls that respond to mouse rollover events, dynamically display dropdown menus and all sorts of cool things. Amazing! Although this could already be done with Flash, it was nice to see HTML technologies evolve to this level. (I’ll skip the history lesson about the huge pains we went through to make sure this new coolness worked on multiple browsers. It was a mess until JQuery and other AJAX frameworks evolved!).

If you look at what HTML 5 is bringing us, you’ll see that the overlap between Flash and HTML 5 is indeed increasing. HTML 5 introduces animations, drawing capabilities, video, audio, and many other things that we usually rely on Flash to deliver, so yes, the overlap is obviously larger in many ways. However, there is a high probability that the overlap is probably not as big as you may think. Let’s start with the obligatory video debate.

The center of attention in the current debate – Video!

Now I’m going to say something that might surprise you. If your video needs are met by HTML 5 and your target audience has an HTML 5 capable browser, you SHOULD use the new video tag instead of Flash! Like I said before, why use a plugin for something that a plugin is not needed for!? It’s no different than my analogy above.

However, before you draw any conclusions about video… be sure that you completely understand the implications:

1: Does your target audience have an HTML 5 compatible browser capable of viewing your video?

If not, I can assure you that they almost certainly have Flash, therefore, it’s an obvious choice for playback of video on non-HTML5-ready browsers. Read my prior article, “HTML 5 and Flash – A Reality Check“. Are you surprised to see that more people use IE6 than Safari? I was! Of course there are new devices that support the HTML 5 video tag and some of these new devices do not have Flash support for various reasons (no, I’m not going there), so it basically creates more work for us developers to support 100% of the audience. Now we find ourselves writing code that handles video playback differently based on the user agent. It’s reminiscent of the early 2000s and I believe that it’s going to get worse before it gets better because the number of devices, browsers, screen resolutions, OSes, etc. is dramatically larger than ever before.

2: Do your video requirements go beyond simply pointing to a video file with the new video tag?

You would be surprised at how many customers have much more complex requirements. Here are a few comments made yesterday by John Harding, Software engineer at YouTube on the YouTube blog that illustrates my point:

“It’s important to understand what a site like YouTube needs from the browser in order to provide a good experience for viewers as well as content creators. We need to do more than just point the browser at a video file like the image tag does – there’s a lot more to it than just retrieving and displaying a video. The tag certainly addresses the basic requirements and is making good progress on meeting others, but the tag does not currently meet all the needs of a site like YouTube”

The article goes on to explain multiple technical reasons why Flash will continue to be the video player for YouTube. You can read the full article at http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html. Hulu recently made a similar blog post -http://blog.hulu.com/2010/05/13/pardon-our-dust/ that mentions a few other interesting points. Although HTML 5 provides video playback, many customers find a gap between their requirements and what HTML 5 offers….so once again, Flash fills the gap!

Did you know that there was such a vast difference between the capabilities of HTML 5′s proposed video tag and Flash? Have you really looked at the complete feature set of Flash video?

Assuming the HTML 5 video format war finally gets resolved (it has a long ways to go), we will indeed see more videos delivered by the browser without the use of Flash, and that is the way it is supposed to be. However, when you need advanced video capabilities, you will find that Flash once again complements HTML very nicely.

Video is just one aspect of Flash and only one aspect of HTML 5. I used it as an example of how disconnected people are from the reality of the debate.

As HTML technologies expand, so do the capabilities of Flash

The ever increasing overlap between Flash and HTML 5 is just one part of what’s happening right now. The other part that is seldom mentioned is the continually increasing capabilities of Flash. As HTML 5 is slowly realized, Flash continues to innovate at a very fast pace so that it can continue to fill the gap between what HTML technologies offer and what developers want to build. You should see what’s coming in future versions! Flash will continue to complement HTML and help developers realize capabilities not possible otherwise. Can Adobe continue to innovate to fill the gap? Can Flash evolve fast enough to continue complementing HTML? You bet. I’ve seen it! Eventually, we will be debating HTML 6 vs Flash Player X and we’ll see whole new set of hot topics. Fun times!

Get educated!

Spoken in my stern teacher voice — It is impossible for you to evaluate the future of HTML 5 and Flash unless you are fully educated on both technologies. I keep meeting developers who have a decent understanding of HTML5 but think Flash is nothing more than simple video and animated ads. I also meet developers who have a decent understanding of Flash but think HTML 5 is only about adding video, audio and canvas tags to today’s HTML. In both cases, the person is VERY misinformed and is lacking the required education to make any future-looking statement about either technology. However, both uneducated groups tend to be very loud! It reminds me of a political election where people vote based on what they have learned from political ads! STOP IT!

Whether you are debating technology or politics, it’s an absolute requirement to be equally knowledgeable on all topics involved.

Where to learn more

Hopefully you are now inspired to learn more. Below are the resources I found while learning about HTML 5. I’ve also listed some resources about Flash and related technologies. Go read everything below and let’s have an intelligent and fun discussion about the future.

HTML 5:

Google’s http://html5rocks.com – fantastic resource with tons of live demos – my favorite resource for showing off HTML 5
Microsoft’s IE 9 test drive home page – includes some very impressive HTML 5 demos – http://ie.microsoft.com/testdrive/ – it’s great to see Microsoft innovating around HTML 5.
Apple’s Safari technology demos – some impressive demos of HTML 5, but a bit too “Apple owned” feeling – http://developer.apple.com/safaridemos/ – the original demos only ran in Safari but now also run in Chrome.
CanvasDemos – an entire site devoted to the new canvas tag in HTML 5 – some very impressive stuff – http://www.canvasdemos.com/
HTML 5 Test site – gives your browser a HTML-readiness score and list the capabilities. Each listed capability is a hyperlink to the HTML 5 spec – http://html5test.com/
HTML 5 Readiness site – shows current status of most modern browsers (anything not listed has no HTML 5 support) – http://html5readiness.com/
HTML 5 Demos – a decent set of HTML 5 demos – http://html5demos.com/
HTML 5 Video tag browser support matrix – a very up to date article on which browsers support which video formats/codecs, etc. – http://en.wikipedia.org/wiki/HTML5_video
Adobe Dreamweaver HTML5 Pack – an amazing set of HTML 5 capabilities you can use today – http://labs.adobe.com/technologies/html5pack/
Adobe Flash Platform:

Adobe Flash Platform Home Page – http://www.adobe.com/flashplatform/
Flex.org – great starting point for learning about Flex, a developer’s toolkit for creating Flex content. If you have never looked at Flex, you are missing a big piece of the Flash Platform, especially when it comes to complex application development. Be sure to check out the showcase (“What’s possible”). You’ll see that Flex is used to build very complex mission critical apps in the enterprise. These apps run on the Flash platform.
Tour de Flex – a gallery of nearly 500 code samples illustrating everything from simple UI controls to complex data visualizations and real-time data handling – http://flex.org/tour
Top Flash Misconceptions by Mike Chambers – addresses some very recent false claims about Flash – http://www.mikechambers.com/blog/tag/flash_myths/
What’s new in the latest release of Flash Player 10.1 – a very substantial release – http://labs.adobe.com/technologies/flashplayer10/features.html
Adobe AIR home page – a runtime that enables desktop applications built with either Flash, Flex or HTML/JavaScript – http://www.adobe.com/products/air/ – supports Windows, MacOS, Linux, Android (beta) and more on the way. If you have never looked at AIR, you need to check this out.
Flash Media Server home page – http://www.adobe.com/products/flashmediaserver/
Go learn!

Advertisements

Any comments?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s