Leaders in the Flex community recently gathered at Adobe’s San Francisco headquarters this week. I’ve covered my thoughts to the conversations that went on during those two days. The goal was to discuss Flex and it’s future as an Apache project, but other topics included: HTML5, Adobe’s new corporate strategy, and the future for the Flex community.

Apache is the the future for enterprise class Flex. For those highly skeptical and critical of Adobe, my message to you is this: The move to Apache is a big one and categorically different from anything we’ve seen in the past.

Read the whole blog post here.

Whether Adobe represents an aging dinosaur in an online world that is quickly passing them by or a force still to be reckoned with in a battle of giants for control of the world of rich Internet application solutions was the central theme of a panel discussion in which I recently participated at the Pacific Crest 13th Annual Global Technology Leadership Forum, in beautiful Vail, Colorado.  The questions asked of the panelists, all of whom represented digital agencies working in the RIA space, were about what you’d expect:  What kinds of projects do you work on?  Is Adobe more or less relevant to your business than they were a year ago?  When not using Adobe’s tools, what else do you use?  Is HTML 5 going to take over the world?  Since the conference attendees were all institutional investors looking to make portfolio decisions across a wide range of technology stocks, what they really wanted to know, of course, was, “Should I buy?  Should I sell?  Just tell me — what should I do?”

The panelists were, probably not surprisingly, mixed in their assessments of ADBE, but the opinions generally fell in line with the type of work that made up the bread and butter of each of the agencies.  Those who specialized in more consumer-facing applications felt that Adobe, although still obviously leading the pack for designers with their Creative Suite, had become far less relevant than they were a year ago in terms of the importance of the Flash platform.  One agency even reported that whereas Flash development represented 25% of their new business in 2010, NONE of their new business in 2011 was being built with Flash; their customers simply preferred to make the trade off of reduced interactivity in exchange for a technology stack (HTML and JavaScript) that can easily be consumed on the iPad and iPhone.

On the other hand, the agencies like Roundarch that focus more on enterprise deployments where a richly interactive experience is key had a different perspective.  Sure, customers are growing in their level of sophistication and better understand that there is a multiplicity of devices to be supported, but these needs are additive to the work on Adobe platforms, not in lieu of it.  More importantly, however, was the recognition of the compelling story that Adobe is now telling with its Customer Experience Management strategy.  For enterprise customers, the ability to tie together a workflow that starts with conceptual and production design and development with the Creative Suite with solid integration into deployment and ongoing content management using CQ5 and ends (or starts again) with usage statistics and analysis with Omniture is terribly attractive.

Let’s face it — if you’re looking at Adobe’s growth opportunity as being centered around their Creative Suite (a mature market with little growth opportunity if there ever was one) or their revenues related to Flash (meager at best), then they just aren’t that interesting from an investment perspective.  But if you look at them with a slightly wider lens — one that is focused on their having finally put together a strong value proposition for the enterprise market backed by an extremely solid product suite — then the outlook for ADBE is a bit more exciting.

On September 15th, Roundarch participated in the launch of Microsoft’s Internet Explorer 9 Beta. As most of the industry is now aware, IE9 has been designed from the ground up by Microsoft to be the most compliant HTML 5 browser available, with a lot of additional features including a new, simplified user interface (sans browser chrome), and hefty performance improvements thanks to real hardware-backed graphics acceleration and a fully rebuilt JavaScript engine.

Because of our experience with Rich Internet Application design and development and our existing expertise with HTML5, Roundarch was approached by Microsoft to design and develop a demo application that would leverage the new features of IE9. Microsoft suggested that our team partner with OneRiot, a realtime advertising service, which archives and makes searchable news, videos and blogs being discussed on the social web, all ordered to reflect current social relevance.

Working with Microsoft and OneRiot, we decided to develop a purely conceptual trending news viewer application with the goal of demonstrating both form and function, leveraging a variety of technologies to make a rather complex experience seem deceptively simple, fast and useful.

The Demo Concept

The concept of the application is quite simple, and I’ve included videos below to help you visualize things.

The application allows a user to view current and historical trending news topics (and associated links), as these topics are made popular on social networks and across other Web sites. Not only can users view trending content, but do so in a manner that provides a way for users to visualize changes in the trending topics over time.

Because of IE9′s strict adherence to specifications, the application is 100% standards-compliant HTML5, but still demonstrate user experience patterns that have historically only been possible by leveraging a multimedia-enabling plugin.

The OneRiot “AdBubbles” demo represents trending topics as translucent, physics-driven bubbles – for which color represents whether or not a trend is heating up or cooling off, and which with their size represents the total number of online articles/posts that referenced that trending topic.

To help the user visualize the change in trending topics, the “bubble tank” refreshes itself once each minute, loading the most current trending topic data which causes a visual transformation of the size and color of the currently displayed “bubbles”.

Rather than trying to explain the full application in writing, let’s just take a look at the video clips:

Application Loading

When the application loads, the bubbles fall in from the top. The color of the bubbles represent whether or not the trending topic is cooling down or heating up (cool = blue / hot = red). The size of the bubbles represents the amount of online chatter.

Digging Into a Trending Topic

The bubbles in the user interface all represent trending topics from the RealTime Web. Double clicking a bubble will load a modal window with the latest article results from OneRiot’s partners.

Ignoring and Following Trending Topics

Since trending topics will refresh over time, and a user might want to view a topic in the future that is no longer part of the trends, we’ve allowed the user to drag or toss bubbles at either the “following” or “ignore” containers that are present on the screen. Should a user choose to follow a subject, it will remain available for them to recall the latest OneRiot partner articles. If a user doesn’t care about a particular trending topic, they can toss it towards the “ignore” container, which will prevent this topic from refreshing within the user interface.

The Timeline Viewing Trending Topics and Changes Over Time

To make the most out of the trending topics visualization, we thought it important to be able to view the changes in popularity for topics over time.
The 24-hour timeline allows a user to navigate across time to view how the trends have changed. When a user clicks on a new point in time, the application will compare the current trends with the historical data, and the bubbles on screen will transform accordingly.
Should the topics not exist in both data sets, they will simply dissolve and disappear from the interface and new topics will drop in from above to fill the gap. Should topics exist in both data sets, the bubbles will change size and color, based on their popularity and trending meta data.

“Auto Play” Mode

If the user does not actively use the interface for a set period of time, the software will go into “autoplay” mode. When this happens, the application will randomly cycle through the trending topic bubbles, and display an associated article headline and short description in large typographic text. This is displayed behind the canvas control / physics engine bubble chamber.

The Technology Behind the Experience

I am not going to get too far into the technology here, as Jeff Karova, the lead interactive developer on the project has broken things down in this recent post that discusses the technology behind the demo application.

I will, however, summarize our approach: To drive the user experience, we created an Azure application, hosted on Microsoft’s Azure cloud infrastructure. This application regularly connects to, parses and archives data in Azure SQL from the OneRiot API, which is later accessed by the
HTML5 demo via Web service requests.

There are really two types of data: Trending topics and articles/posts related to them. Each time the application requests a new set of trending topics and/or articles, they are stored in the Web browser’s local database, allowing for an experience that remembers your previous sessions, and gives users the ability to navigate between current and historical sets of data.

The user interface, which relies most heavily on the HTML5 canvas tag, features both a physics simulation to help render the bubbles / trending topics and a timeline component to that gives users the ability to explore trending topics as they change over the course of the last 24 hours.

Introducing the Concept of Time-Release Design

The application also has a very purposeful design feature, that will most likely be taken for granted by users until they’ve had the opportunity to use the application over the course of time. The interface was designed and developed with the concept of “time release” experience in mind.

What in the world does that mean?

Just like it sounds, a “time release” experience is one that becomes more valuable to a user that uses the application over a longer time period. We sometimes use this as a way to introduce novice users to more advanced features within a software application, revealing functionality as the user becomes more familiar with how the software they are using works.

Clearly, this isn’t applicable to all types of software. But for a casual news discovery application… why not?!

The concept works quite well, and the more that you interact with the OneRiot “Adbubbles” demo, the more interesting and valuable the experience becomes.

The application provides a new, unique and experimental way to discover interesting news items. Time and again, we’ve heard feedback from users about how they’ve found interesting content using OneRiot that they probably wouldn’t have found any other way, based on their browser habits.

Some Thoughts on HTML5 and Impact on RIA Design & Development

Working with the great people at OneRiot, as well as with the IE9 team at Microsoft was a great experience. The Microsoft IE9 beta is the most robust and HTML5 compatible browser available for Windows computers, and it’s performance is extraordinary, especially when compared to Microsoft’s previous incarnations of their hugely popular Web browser.

At Roundarch, we’ve gained a lot of experience related to HTML5, as many of the current and recently launched projects that our teams are working on take advantage of the new HTML specification, as well as what is now available using CSS. HTML5 shows great promise, and plays an role as another important tool in the developer toolbox.

There is a lot of talk about HTML5 being the end of other RIA technologies. With our experiences, that doesn’t seem to be the case, as there are many examples where HTML5 just can’t do what other technologies can. In time, as browsers incorporate WebGL and relative technologies as well as the ability to run applications that allow for native/compiled code execution, HTML and Javascript have their place, as do more robust technologies like Adobe Flash and Microsoft Silverlight.

Another consideration for HTML5 for complex RIAs right now must be that developers must still rely on users viewing their applications and content using one of many different browsers. It seems that the competing browser technologies and companies behind them simply can’t seem to align across the board on how features are implemented, and what priorities are in their overall product-feature roadmap. This means the potential for a repeat of 1996 and the original browser wars. This means that the amount of testing and tweaking required for HTML5 RIAs should not be underestimated when planning projects.

HTML5 shows great promise, and the next year or two should be quite interesting as more feature-rich browsers are offered up to consumers and as the HTML5/CSS3 specification continues to mature.

Do you want to know more about HTML5 and how it can be leveraged to create standards-based, desktop-like applications that run solely in the browser? Drop me an email, or reach out to our team at Roundarch.

For more information on Microsoft’s Internet Explorer 9, and to see how it’s helping make a more beautiful Web, check out beautyoftheweb.com.

To learn more about OneRiot, and their perspective on the HTML5 Demo application developed by Roundarch, see their blog post on the topic.

If you want to experience the OneRiot HTML5 Application, it’s online at http://adbubbles.oneriot.com .

Overview

Sept. 15th, 2010, Microsoft co-launched IE 9 and a companion site, ‘Beauty of the Web’, to feature projects written to take advantage of the new browser. Roundarch and OneRiot partnered to build an app featured on this site. Using OneRiot’s Trending Ad API, Roundarch conceived and developed adbubbles.oneriot.com, a concept site designed to feature IE 9′s support of HTML 5 standards and graphics acceleration.

In essence, we built an interface that allows users to interact with trending topics as balls in a tank. Data about the trending topic was used to draw the ball’s size and color. Balls can be tossed around the tank and possibly into a ‘follow’ or ‘ignore’ bin, as well as clicked on to bring forth a modal window displaying OneRiot content. Further, A timeline component allows the user to see changes to trending data between time intervals: data begins collecting for these intervals as soon as the user enters the site.

This project featured three essential technologies: Microsoft’s Azure cloud service for backend support, and HTML5 and the Box2d physics engine for the front end. This post goes into detail on our use of HTML5, and touches on the other technologies.

Azure

Our use of Azure consisted of two webservices. The first of these services, a ‘Worker Role,’ was written to regularly query the OneRiot API, parse and archive data on the top 50 trending topics. This data is stored in the cloud, and is used to service the timeline component of the site as well as provide current trending data to ball tank. The second service, a ‘Web and Worker Role,’ was created to serve the site.

HTML5 and Canvas Drawing

Drawing the physical interactions of bubbles in the site relied on the use of the HTML5′s canvas tag in conjunction with a javascript port of the Box2d physics engine. Javascript and jQuery were used for all front end programming – I’ll focus on how this was done for the majority of this post.

The canvas tag’s context property is used for all drawing operations. If you are familiar with AS3, the context behaves similarly to the .graphics property of a DisplayObject: the context can render drawing operations, like fills, strokes, and gradients, as well as manage alpha, render text, and perform pixel by pixel operations.

The canvas tag itself allows only three properties: id, width, and height. Any drawing that occurs outside the bounds of the canvas does not render.

Here’s a quick drawing example. In the following HTML document:

square.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE-9"/>

    <title>Drawing a Red Square</title>

  </head>

  <body>

    <canvas id="myCanvasId" width="100" height="100"></canvas>

    <script src='redsquare.js'></script>

  </body>

</html>

You could use the following script to draw a red, 50x50px square to the screen:

redsquare.js

var canvasContext = document.getElementById('myCanvasId').getContext('2d');

canvasContext.fillStyle = "rgb(255, 0, 0)";

canvasContext.fillRect(0, 0, 50, 50);

To draw the ball tank, we implemented a loop that updates bubble position using a physics engine, allowing for realistic interactions between balls in the tank.

Before the drawing

Prior to the physics engine starting, an array of roughly 200 ball images are created. There are 9 basic colors to the balls in the tank plus 24 intermediate colors between each base color, used for tweens; a separate image is created for each base and intermediate color. This is done by creating a canvas for each image (which is not drawn to the screen), and using that canvas’ context to draw a gradient-filled ball with the current color. We also create a separate image that will be used to give each ball a specular-like highlight.

In the loop drawing

After these images are created, we start a loop that continuously draws the bubbles. The basic process for the loop is as follows:

1) Parse incoming trend data by comparing it against the current trends.

• New objects are built for each new trending topic and added to the physics engine.
• Topics in the engine but not in the new list are removed from the engine and a set of tweens are run on the object to visually transition it out.
• Topics in the engine and the incoming list have their size and color properties updated and tweens started to animate these changes. Since updating the properties of an object active in the simulation proved too difficult to implement for launch, we suspend that object from interacting in the engine while it is being updated.

2) Step the physics engine forward, check for collisions. We use the engine’s collision detection to determine if a ball has been tossed into the “following” or “ignoring” bins. Start transition tweens on any ball that has been added to either, and remove that ball from the engine.

3) Clear the rendering context.

4) Render each ball. Step through every ball and transform the drawing context’s matrix to match the ball’s properties; x, y, rotation, scale and alpha. These properties are managed either by the physics engine or by tweens, depending on whether the ball is active in the engine. Balls not active in the engine are either transitioning out of the app or transforming based on new trend data.

Once we’ve transformed the context’s matrix, we look up the ball’s color index which tells us which image we will be drawing with. Use this image to draw the ball, then draw a highlight over this image. Next, we draw the trend’s title over the ball images. Finally, we reset the context’s transform matrix and move onto the next ball.

Here’s a little bit of pseudo-code to illustrate the loop. This simplifies the process, but gives you a rough idea:

// begin with an untransformed context matrix

context.save();

context.translate(x, y);

context.rotate(radians);

context.scale(scaleFactor, scaleFactor);

context.globalAlpha = .8;

context.drawImage(balls[colorIndex].canvas, -radius, -radius);

context.globalAlpha = 1.0;

context.drawImage(highlight.canvas, -radius, -radius);

context.fillText("My Trend", x, y);

context.restore();

// restore the untransformed matrix

There is a lot left out of the above code, but you can read more about the canvas tag and 2d context here to fill in the missing pieces. Look back here also for more posts about HTML5 and the canvas tag.

The timeline

The timeline at the top of the site, also drawn using a canvas, begins collecting and storing trend updates locally in the user’s browser as soon as the site is accessed and continues to collect data for a 24 hour span every 30 seconds. These intervals are marked by icons on the timeline.

Users can select any marked interval in their timeline, causing a trend update to occur. This affects the first portion of our drawing loop as explained above. Intervals clicked near to the current one may yield unnoticeable changes to the balls within the tank, while farther intervals can show dramatic changes to the size and color of each ball, especially in a busy news cycle.

Clicking on any hour prior to the first site access will cause the site to load a single trend update from the cloud for that hour.

Box2d

The Box2d physics engine was used to calculate the physical interactions of the balls. Specifically, we used box2djs, a javascript port of the engine. Body and circle definitions were added to the engine for each ball, with UserData attached to each ball that contained necessary drawing information, either static or managed by a tween. For example, we stored a ball’s color index in the UserData.

The box2d engine http://www.box2d.org/ if you are interested in exploring it further, and the javascript port we used is available http://box2d-js.sourceforge.net/ .

We used code written by Mr. Doob to help get us working and understand how to translate the data from box2d into canvas coordinates.

Last Month we had the chance to once again work with the Chicago band Wilco on updates to the successful iPhone application.  The updates gave us a chance to improve some of the features already in the application and add even more.  Wilco has always been dedicated to using new technologies to help the band connect to their fans and these improvements strengthen that connection.  The new version features an all new roadcase with live concert recordings from the Boston, MA and Madison, WI performances.  We were able to improve the photo and poster galleries and add a section dedicated to the upcoming Solid Sound festival.

I had a chance to discuss the app at last Month’s Mobile Monday Chicago Mobile Demo Showcase held in Chicago on June 21.  The presentation focused on some of the updated features of the app and highlighted the cloud based data integration with wilcoworld.net, the official Wilco website.

In addition to the iPhone app updates we also worked with the band to update the website’s discography using the latest HTML5 audio technology.  You can now enjoy the bands discography on your iPad and other modern web browsers like Chrome and Safari.

Stay tuned for future updates coming very soon that will enhance the Solid Sound section and allow you to listen to the concerts and album tracks while multitasking.

Last month we attended the third annual Google I/O 2010 Conference. The conference, held at the Moscone West Center in San Francisco, CA, was the largest yet with over 5000 attendees, 90 breakout sessions, and 180 demonstrations in the Sandbox area.

NYSTROM Herff Jones Education Division, Roundarch’s client, was invited to show StrataLogica in the Sandbox area. We were on hand to answer technical question while Don Rescigno demonstrated StrataLogica to the attendees. We are proud to say that StrataLogica was well received by the attendees and praised by Google’s developers.

The daily keynotes, breakout sessions and Sandbox demonstrations were interesting. However, the real benefit was two days of rubbing shoulders with Google developers and developers who use or are interested in using Google products—swapping stories, ideas, and generally talking shop.

The first day’s Keynote fired up the audience.

The main theme was open and inclusive technologies with unveiled shots at Apple for their decision to exclude Flash on the iPhone. Google made a commitment to HTML5 (and CSS3), Wave is opened and in Google Apps, Google Web Tools supports Spring. Also, Google announced Storage for developers and the Chrome Web Store: a single place to find Web apps.

HTML5 helps provide a desktop app experience to user’s of RIA and is supported by every major browser. (IE9 will support HTML5.) CSS3 transitions and font embedding were mentioned in passing. Google Fonts API will generate the CSS needed to add Google hosted fonts to a Web page using the @font-face CSS tag.

The HTML5 specification opens up access to the client system. There is still some foot dragging on access to system devices and areas of the specification that need to be clarified, but when available would make projects like Motorola’s easier. An example use was dragging and dropping email attachments where a file on the local PC can be dragged into the Web application.

With HTML5, came the announcement of a new video format named WebM. This is an open sourced format that runs in the HTML5 video tag and can be supported in other media players. Webm is based on Vorbis for the audio and VP8, by On2—recently acquired by Google—for the video.

Adobe announced HTML5 support in Dreamweaver and WebM support in Flash. Dreamweaver will have three different size preview panels so the developer can see how the Web page looks in a traditional browser, a mobile phone portrait orientation, and a mobile phone in landscape orientation.

There now is a growing need to create designs that are more fluid and can transform themselves to different screen formats.  The Sports Illustrated editor gave an impressive demonstration of a Web edition of the magazine using HTML5.

There is a lot of promise in the emerging HTML5/CSS3 standard to provide a rich interactive user experience. This is especially true in the mobile market where Apple and Google are already implementing HTML5.  GWT, Google Web Tools, was mentioned mostly for the new performance tracking tools and its tight integration with The Spring Framework.  GWT generates cross-browser compliant HTML5, CSS, and JavaScript from Java, allowing developers to rapidly create AJAX enabled Web apps with little client side programming.

Whereas Wednesday’s Keynote was all about HTML 5 and Video, Thursday’s Keynote was all about Android and Google TV.

Starting with the announcement of Android 2.2, dubbed Froyo (FROzen YOgurt), and then proceeding on to demonstrate a wealth of new features.

Froyo’s JavaScript engine, taken directly from Chrome, includes a Just-In-Time compiler improving performance by up to 500%.  Also demonstrated were improved application support features including installing to removable memory for portability between devices (if the app allows) and in the event of an application crash, Froyo can upload a stack trace to the developer’s account to assist with fixing bugs that have made it into the wild.  Many enhancements simplifying device to device and device to web communications have been added also.  In addition, keeping with Google’s focus on advertising, several new provider agnostic ad placement mechanisms have been added.

Following the Android demonstration, Google TV was announced.   Google’s goal is for the web to change TV as it changed computers and mobile devices previously.  I think the most important take away from the presentation, is that Google TV is:

1. An open specification that manufacturers can use to assure interoperability between their TV devices.
2. A hardware specification for those devices to ensure compatibility with Google TV.
3. An Android & Chrome based platform that can be deploy to any device that complies with the hardware specification.

The most compelling feature of Google TV is eliminating the concept of the Input Source.  Instead of changing inputs between Cable, Internet, DVD or Blue Ray and then using the available search features (if any), Google TV would instead issue a user’s search across all devices and the results will be displayed integrated together. The correct input source is then streamed according to the user’s choice.

Being Android, developers will be able to create/install applications. One interesting example would be to use existing services to translate closed caption feeds into languages that are not supported.  With all the improved device to device communications of Android, any Android device will be able to interface with any Google TV device.  Obvious examples: programming your DVR from anywhere with your phone or using it as the remote.  A more advance app would be watching recorded video from any Android device anywhere.

The NBA also demoed an application based around their content that demonstrated how a normal broadcast can be enriched with related content.  This leads to the implication that companies should consider including a TV presence in addition to Web and Mobile presences.

We think some of the most interesting insights that were very apparent at the conference are:

1. Adobe is on board with HTML 5 and WebM.  This makes HTML vs. Flash discussions somewhat academic or irrelevant.
2. Google clearly has Apple/iPhone in their sights.  There were quite a few shots directed at Steve Jobs in addition to numerous comments about his company and its devices.
3. Google has affirmed its commitment to open and inclusive standards.  They will embrace these standards where they are established and spearhead their creation and adoption where they do not.

In March I had the pleasure of attending a workshop at South By Southwest titled “HTML5: Tales from the Development Trenches”, featuring Bruce Lawson (@brucel, web) – Opera and Martin Kliehm (@kliehm, web) – Namics. The discussion involved; what exactly HTML5 does right now at its current iteration, where it’s going and interesting examples of applying HTML5 practically. While the discussion may have been a little biased towards the use of HTML5 in Opera 10.5, it rightfully should have been. Opera 10.5 currently supports more features of the HTML5 draft than any other browser, with Firefox 3.6 closely trailing.

Most arguments nowadays about HTML5 seem to revolve around the demise of Flash content, or superiority of Flash over HTML5. The real beauty of W3C’s latest HTML spec lies in the simplicity of its implementation and ease of use for developers. HTML5 takes out all of qualms over coding time and browser compatibility, by unifying commonly used web application features into simple markup. It also helps
that the board that oversees the spec has representatives from all major browsers.
Read more…

HTML (“hypertext markup language”) is the core language that powers the World Wide Web. Any server side technology must in the end, display HTML in order for web browsers to be able to render web pages. HTML 5 is the latest revision of the HTML spec that is slowly being adopted by the different major browsers. There are some pretty exciting additions to the HTML spec and I wanted to go over a few and what they potentially mean for the future of the web.

New Tags
Structure Tags
New additions to the HTML markup family include tags like header, nav, article, section, and footer. From the visual perspective these probably won’t have a huge impact as users are unlikely to see the difference between pages built on the old DIV based layout and the new structure tags. However from the search engine perspective, these tags will make it easier for crawlers to distinguish between what’s the meat of the content and what is just fluff. Current DIV based layouts structure the content semantically through unique IDs and classes. We give these DIVs IDs and classnames like header, footer, post, etc in an attempt to classify and organize the markup. However these are abstract concepts from the browser’s perspective. If they wanted, there’s nothing stopping the web developer from naming the header something arcane like foobar or even call the footer something like nav_sub2. As you can imagine then, search engines and web crawlers must develop sophisticated algorithms to detect patterns in order to infer what’s a header or footer. However with these additions, the developer must clearly demarcate what section each HTML piece is, thus taking the guesswork out of the search engine. This has the benefit of potentially improving search engine results.

Canvas Tag
The new Canvas tag is exactly what is says it is – a blank canvas with infinite possibilities. Flash developers used to drawing pixels on the MovieClip object will immediately be able to relate. Essentially one would use the canvas tag to render any number of things from manipulated images, animation, or even 3D imagery. With the canvas tag, you could build applications such as a paint program, or a 3D slideshow without having to rely on Flash. As usage of the Canvas tag increases, you’ll see more animation and renderings that were typically done in Flash re-envisioned completely in HTML5 and Javascript. The drawback however is that whereas Flash is build once run everywhere that supports Flash, an HTML 5 solution would leave you vulnerable to browser compatibility issues.

Here’s a video of a Coverflow implementaion done purely in JS + the new Canvas tag

AV Tags
The Audio and Video tags promise to simplify the mess that is currently the state of the art when embedding video. Whereas before you had either the <embed> or the <object> tag depending on what browser you are using or maybe you just turned to a javascript based wrapper to handle your media needs, you can have a very simple video or audio tag. With the ubiquity of the Flash platform as a video player, I’m not sure this is going to make much difference. Sure this is a lot easier, but we really could have used this 10 years ago.

<video width="640" height="360" src="/demo/google_main.mp4?2"
autobuffer></video>

Web Worker
Think of Web Workers as threads – any jobs that can be computationally expensive and intensive. In the current model, a complex task on a webpage might bring the interactivity of the page to a crawl while it’s busy number crunching. A worker thread could be spawned off to do some intense client side crunching without bogging down the page. This is even more relevant in today’s time when so much is being offloaded to the front end UI with javascript libraries. A good candidate for web workers would be a browser based excel spreadsheet like Google Docs where number crunching on the client site is potentially very slow.

<script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
</script>

Application cache
The Application cache allows web applications to function offline when it’s not connected to the Internet. Google Gears is an implementation of this. All the developer has to do is provide a manifest of files that the web application needs in order to function offline. I see this as a really great feature to make web apps more robust. With most webapps, if you lose connection, you most certainly lose whatever you were working on. I can see more and more applications handling loss of network connectivity more gracefully by taking advantage of the application cache.

All you need is this code snippet and a manifest file which lists all the files the application needs.

<html manifest="foobar.manifest">

Geolocation
The Geolocation API provides a scripting interface that lets the developer determine the user’s location (based on GPS or inferred from IP, Wifi, etc). The user must however allow the application to access that information. Although geolocation has been inferred by IP for a while now on the backend, we’re seeing an increase of functionality performed on the front end with AJAX and this is no different.

navigator.geolocation.getCurrentPosition(function(position));

Should I be using HTML5 tags?
Here’s a table outlining features I played around with in the latest browsers from Google, Apple and Mozilla.

* only certain formats
** sort of worked

As you can see, coverage on some of the new HTML 5 features is pretty good on Firefox and Safari. However with the audio and video tags, I did find that Firefox supports the open source codex Ogg Vorbis while Safari’s supports all the formats that Quicktime supports, naturally. So if you are looking to use some of the new HTML 5 features now, coverage on all the browsers is sketchy at best except for the Canvas tag. If you are trying to do video or audio, you’d best stick to Flash. I think where HTML5 is useful for the here and now is in the mobile sector. Many new mobile OSes including iPhone OS 3.0 and webOS have started supporting some of the HTML 5 features and since you would be developing platform specific apps, compatiblity issues are non issues.