HTML5 - its support in Dreamweaver CS5, Internet Explorer 9 and elsewhere

With HTML5, an open Web standard, the browser becomes a first class RIA citizen.

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight.

The HTML5 video tag is a markup language tag, introduced in the HTML5 draft specification, that adds support for embedding video in an HTML page.

The Adobe Flash Player has been and continues to be widely used to embed video on web sites such as YouTube, since the majority of web browsers have Adobe's Flash Player installed (with controversial exceptions such as the browser on the Apple iPhone and iPad). Now, however, HTML5 video is intended by its creators to become the new standard way to show video online, but has been hampered by lack of agreement as to which video formats should be supported in the video tag.

Rather than relying on the browser plug-in Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices now ship with high performance, low power implementations of these open standards.

Not to be left out, Adobe has recently added HTML5 support to Dreamweaver CS5. This move should not be viewed only in light of the company's war of words with Apple regarding Flash, but in the other reality that HTML5 is reaching critical mass as evidenced by long-time holdout Microsoft adding HTML5 support to Internet Explorer 9 and a slew of HTML5 books being published by leading houses this summer. I've pictured the covers of a few of them at the end of this post.

These developments come despite the fact that HTML5 is still a work in progress. Even so, HTML5 in Dreamweaver CS5 makes for a mighty application development tool, as shown in the video http://www.youtube.com/watch?v=OEXrd8CR5AY

The HTML5 compatibility pack for Dreamweaver CS5 lets you author CSS3 and HTML5 compatible Web pages for modern browsers. And, of course, it supports the audio and video tags.

Note: The HTML5 extension will work only with Dreamweaver CS5 and not with any of the previous versions.

For more on this new Dreamweaver HTML5 support, check out labs.adobe.com and the following videos:

HTML5 Fundamentals with Dreamweaver CS5 - Semantic Structural Tags - Part 1

HTML5 Fundamentals with Dreamweaver CS5 - Semantic Structural Tags - Part 2

Readers of this blog who are interested in the Semantic Web may find the Part 2 video of particular interest.

HTML5 Fundamentals with Dreamweaver CS5 - Using the Video Tag

Finally, Microsoft will support HTML5 and CSS3 in Internet Explorer 9.0. A developer preview of their next browser can be downloaded from

http://ie.microsoft.com/testdrive/

and click here for a discussion of I.E. 9's support for video content.

Note: There has been a lot of interest and debate about HTML5 and its support for video tags. This release of Internet Explorer provides such support, with tags available for H.264/MPEG4 and MP3/AAC codecs, leaving out support for the open source Ogg Vorbis and Ogg Theora video codecs.

A final note: HTML5 is not likely to displace Adobe Flash videos any time soon. As evidence of this, consider the latest news from Dell: Dell Inc. yesterday unveiled plans for a computer tablet based on Google Inc.’s Android operating system.

Called Streak, the tablet will have a 5-inch screen, Wi-Fi, Bluetooth, and work on a 3G network. Users can download music; interact with social-networking sites; send e-mail, text and instant messages; and make phone calls. It has turn-by-turn navigation with Google Maps, a 5-megapixel camera with flash, and a removable battery.

Streak will have 2 gigabytes of internal storage. Memory can be expanded up to 32 gigabytes allowing it to store as many as 42 movies or 16,000 songs.

Later in the year, the tablet will support Adobe Flash 10.1 — something Apple Inc.’s iPhone, iPad, and iPod Touch devices do not. Flash is widely used for online video.

The Streak is designed to be larger than a smartphone but more portable than a laptop. It is 6 inches wide, nearly 3 inches high, and half an inch thick.

Electronic Health Records (EHR) & the Need for Cross-Browser Compatibility

Cross-Browser Problems/Solutions

Back when I did software development work (secure, data-intensive, interactive Web applications -- .NET and J2EE), I would finish debugging a project on my PC and then deploy the app to a test server from which it would be downloaded by every manner of user. Most of them were running Internet Explorer, some Firefox or Safari, and a few were running some other browser. The problem was that some of these users, users not using the same browser as me, discovered that the app didn't render as expected.

Today, unfortunately, writing dynamic web applications is still a tedious and error-prone process; some developers spend up to 75% of their time working around subtle incompatibilities between web browsers and platforms.

With the widespread adoption of Electronic Health Records (EHR) imminent, the likelihood that a given Web app will be downloaded by someone using a browser other than the one(s) used to develop and test the app will only increase.

But help may be on the way: cross browser Web development may be getting easier and more efficient with the upcoming version of Google Web Toolkit (GWT) version 2. Google claims that GWT applications will automatically support Internet Explorer, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases.

Shown in the figure below is the GWT implementation of an app that would not be expected to render exactly the same in Internet Explorer and Firefox.

Note: A few examples of cross-browser incompatibility appear in the figures of my 2005 article ASP.NET & Multiplatform Environments (a link to it is provided in the bibliography at the bottom of this blog).



GWT is an interesting platform that allows you to write Java code that automatically gets converted into JavaScript by the GWT compiler. This allows for a simple way to create AJAX apps, using Java. Google also created a plug-in for Eclipse to make debugging and deploying very easy.

With Ajax, Web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to better quality of Web services [see my June 28 post] due to the asynchronous mode.

The core language of the World Wide Web

Until recently, most simple browser applications were created in HTML 4.1, which could be enhanced with JavaScript and CSS. For Web applications that were as rich as desktop applications, developers had to embed Adobe Flash or, more recently, Microsoft Silverlight apps in their HTML code. But, a new version of HTML, HTML 5, which is the fifth major revision of the core language of the World Wide Web, is bringing this same rich functionality to the browser without the need for Flash or Silverlight.

A good summary of the major features of HTML 5 is in Tim O'Reilly's blog post about it.

http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html

However, there is still a problem. Currently HTML 5 compliant browsers are only 60% of the market. Quite a few enterprises are still on Internet Explorer 6. So, Flash, which has the distinct advantage of working on older browsers and has about a 95% market penetration, is still very popular. However, some expect that HTML 5 will be as popular as Flash by 2011.

Even though HTML 5 is not yet a finished standard, most of it is already supported in major browsers: Firefox 3, Internet Explorer 8, and Safari 4. This means that you can create a HTML 5 application right now!

Note: Flex, like ActiveX, Silverlight, and Java Applets before them are, in a sense, replacements for the browser. But, each replaces the web browser in a proprietary way.

HTML 5 is right around the corner

While the entire HTML 5 standard is years or more from adoption, there are many of its powerful features available in browsers today. In fact, five key next-generation features are already available in the latest (sometimes experimental) browser builds from Firefox, Opera, Safari, and Google Chrome. Microsoft has announced that it will support HTML 5, but as Vic Gundotra, VP of Engineering at Google has noted, "We eagerly await evidence of that."

GWT meets HTML 5

Google Web Toolkit is a really good way to "easily" design a flashy HTML/CSS/JavaScript application that works as expected across different browsers and operating systems.

{click for larger view}