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.

Here at Roundarch we’ve been keeping an eye on Kinect (formerly code named Project Natal), the new controller-free gaming and entertainment system that will soon be available for use with Microsoft’s Xbox. The technology behind Kinect seems to be unlike anything we’ve ever experienced and we can’t help but think that it will affect many things beyond gaming.

If you’re not familiar, here’s a little bit of background:

In 2006, Nintendo released a new gaming console called the Wii and it changed the way we play games. As you’re all aware by now, the Wii uses a handheld controller that detects movement in three dimensions. The fact that the game player just holds the device while interacting with the on-screen game made the Wii a very intuitive and easy interface to grasp for people who don’t normally play video games. Thus the Wii reached a wider demographic of grandparents and moms and kids than other more “hardcore gaming” systems like the Sony PlayStation 3 or Microsoft’s Xbox 360. This translated into record sales for Nintendo.

PHOTO: http://www.theconsolezone.co.uk/~consolep/images/nintendo-wii-remote-jacket.jpg

Fast forward to 2009. Sony and Microsoft are still trying to catch up to the Wii. Last year Sony announced an upcoming motion-sensing game controller platform for the Playstation 3. Sound familiar? PlayStation Move uses a handheld motion wand as a device for game play. The game player moves around, while holding the wand, to interact with the game. It has been noted that the PlayStation Move’s movements are much more precise and accurate than the Wii’s, but nonetheless its main mode of input is still a motion-sensing wand. PlayStation Move will be available in North America in mid September.

PHOTO: http://www.videogamesblogger.com/wp-content/uploads/2010/03/playstation-move-controller.jpg

So, that leaves Microsoft. A safe bet would be to guess that they’d enter this market with an add-on to the Xbox bundled with some sort of motion-detecting controller or wand, in a similar fashion to Nintendo and Sony. But here’s where Microsoft has kicked it up a notch… or 10 notches. Microsoft Kinect is an add on to the Xbox, but there’s no motion sensing controllers to hold. You just move. That’s it.

PHOTO: http://www.blogcdn.com/www.engadget.com/media/2010/06/kinetic-e3-product001-rm-eng.jpg

Kinect does full-body motion capture with both vocal and facial recognition and there’s nothing to hold on to. No motion-sensing controller or wand. You just do it. Move your body and the system recognizes your actions. This picks up right where the Nintendo Wii left off. People who have never picked up a gaming controller in their lives instinctively know what to do. See a ball? Kick it. See a dancer? Follow the moves. In addition, Kinect also is a new interface for watching movies and TV, listening to music, and chatting with friends.

Check out this video of Kinect in action.

All of this is accomplished through one simple Xbox 360 add-on device, which has both an advanced camera and a microphone. Kinect will be available on November 4 and there will be 15 game titles at launch. The price has not been announced but estimates are at about $150.

So, what do you think? Is Kinect just a gimmick? Or is it a complete game changer (pun intended)? How could the technology Kinect is using influence our everyday lives?

To quote Steven Spielberg, “This is a pivotal moment that will carry with it a wave of change, the ripples of which will reach far beyond video games.” What changes do you think we’ll see in the future as a result of this new technology?

Will we no longer need 3 remotes to control our entertainment center? Maybe everything is voice-activated. Moving beyond the television, do you see a future where we can control many kitchen appliances, our stereos, heating and cooling controls, and home security systems with voice and face-recognition and gestures? How about business presentations? Making a swipe motion to go to the next slide would be pretty cool. Or, what if we could virtually whiteboard while collaborating with remote offices? What if our cell phones had motion sensors? We can imagine a world where the cell phone detects sign language and translates it to text or audio. What if the military could practice field operations at home before going on a mission? Finally, think of all the implications in the retail and advertising space. You could “try on” clothing from the comfort of your home using a virtual replication of yourself on your television and an online catalog from your favorite clothing store. Maybe waiting for the bus isn’t so boring when all of the advertising on the bus stop is interactive. The possibilities seem limitless.

Last month Chicago had our very own gathering of great minds in the Rich Internet Application (RIA) space. Riapalooza, as it’s called, is a yearly one day conference meant to foster the RIA community in the midwest region. This year’s event was held Friday, May 8th at the Illinois Technology Association (200 S Wacker Drive 15th Floor Chicago, IL) and is the second one of its kind. Riapalooza aims to be technology agnostic and as such we had representatives from many players in the space including a contingency of Microsoft evangelists and few Adobe evangelists.

Adobe has been in the RIA space a long time with its Flash runtime being ubiquitous in over 98% of all desktops. Flash Lite, Adobe’s mobile Flash runtime is forecasted to be in over 1 BILLION mobile devices by 2009. Adobe’s AIR runtime, a cross platform runtime that brings RIAs to the desktop, already has over 100 million installs.

Microsoft on the other hand is a relative new player in the RIA space. Although they’ve been on the web with their .NET platform for a while, it wasn’t as rich an experience as some of the stuff people are used to seeing today. Even though Microsoft was a pioneer in the RIA space with their XmlHttpRequest, a cornerstone in rich AJAX enabled websites today, their early RIA offerings were met with limited success. Lately Microsoft has been pushing Silverlight, a cross platform RIA runtime meant to compete head on with Flash.

The event itself had a very good turnout. The conference room was packed with developers in the industry. The sessions covered a variety of topics from real world RIA problems, consuming 3rd party APIs in Flex, case studies, to RIAs controlled by alternative user interfaces. The six sessions were jam packed with material. I really enjoyed Corey Miller’s Building Interactive Applications Using UX Principles. His presentation can be found on his blog.

The “unconference” also had panel discussions during lunch which was great because it really engaged the audience through participation. Larry Clarkin did a great job of moderating and seeding questions and getting the conversation going. Topics included RIAs and the emerging mobile platform, the definition of RIA, what an evangelist is and what do they do, to how the various companies are approaching RIAs as well. It was great to see Adobe and Microsoft representatives butt heads in a friendly rivalry. What was also great was that user experience (UX) with respect to RIAs was probably given as much face time as RIA technologies. There were discussions of emerging computing areas that will be affected by RIAs such as mobile and touch screens.

Riapalooza is a definite must for developers in the industry interested in learning more about RIAs, meeting new people, connecting with experts and thought leaders in the industry, and keeping up with RIA news and technology. And at $20 a pop, $10 for early registration, it’s a no brainer.

A recap of the talk that Adam Flater and I gave on RIAs beyond the Mouse and Keyboard can be found here.

Follow the speakers and Riapalooza orgainizers on Twitter

• Michael Schaffner, Adobe Certified Instructor http://twitter.com/schaffner
• Anthony Handley, Microsoft Expression MVP http://twitter.com/anthony808
• Kevin Hoyt, Adobe Sr Product Specialist http://twitter.com/parkerkrhoyt
• Steve Holstad, Development Consultant @ Clarity Consulting http://twitter.com/steveholstad
• Josh Holmes, Microsoft UX Architect Evangelist http://twitter.com/joshholmes
• Mike Labriola, Adobe Community Expert at Digital Primates http://twitter.com/mlabriola
• Corey Miller, Magenicon & Microsoft MVP http://twitter.com/xamlmammal
• Chad Udell, Designer/Developer http://twitter.com/visualrinse
• Adam Flater, Technical Architect and Evangelist @ Roundarch http://twitter.com/adamflater
• Dave Meeker, Director of Emerging Technologies @ Roundarch http://twitter.com/dmeeker
• Pek Pongpaet, Lead Interactive Developer @ Roundarch http://twitter.com/pekpongpaet

Last Thursday (3.19) at Microsoft MIX09 in Las Vegas, NV Roundarch presented our Interactive Experience Award to Scott Guthrie of Microsoft. We were very excited to present this award to Scott because of his ground-breaking efforts in Web development including the creation of the Microsoft .NET platform, Windows Presentation Foundation (WPF) and Microsoft Silverlight. Our team at Roundarch has been extremely impressed with just how far Silverlight has developed in a little over a year. At MIX09 Scott announced some of the exciting new features of Silverlight during his keynote, including support for running Silverlight applications out of the browser, dramatic video performance and quality improvements, and features that radically improve developer productivity. Microsoft is betting that Silverlight 3 combined with the continued innovation in Visual Studio and Expression Blend, empowers .NET developers to create cutting-edge Rich Internet Applications and media experiences. Since Roundarch is always trying to push the boundaries of RIAs in order to deliver exceptional experiences for our clients, it is very encouraging to see Microsoft pursue this technology so aggressively.

It was really a blast to see Scott, “the Gu,” connect with some of his fans. He is clearly respected and admired by his peers and it was great to have the opportunity to spend some time with him in an environment where he was able to interact with them directly. He truly energizes people with his innovative ideas and approachable style.

Jeff Maling, President and Chief Experience Officer of Roundarch, presented the award just prior to a Q&A held by Scott in the 3rd Place lounge. There were about 200 people in attendance and there was a palpable energy in the air when Scott entered the room.

Scott Guthrie and Jeff Maling

“I am honored to accept the Interactive Experience Award from Roundarch, a company that shares Microsoft’s vision for encouraging innovative, dynamic and intuitive digital experiences,” said Guthrie. “Silverlight is changing user experiences on the Web, and when combined with the tooling in Microsoft Visual Studio and Microsoft Expression Studio, Microsoft is making it easier and cheaper than ever to build and deploy interactive and cutting-edge applications. It’s exciting to see that work recognized.”

Scott Guthrie

The Roundarch Interactive Experience Award is given to companies and individuals that best represent the advancement of Web experiences through the integration of user-centric design and advanced technology. Previous award winners include Max Carnecchia, president of Interwoven; Jeremy Geelan, Sr. Vice-President of SYS-CON Media & Events; David Mendels, former Senior Vice President of the Enterprise and Developer Solutions Business Unit at Adobe; David Temkin, Founder of Laszlo Systems; and Coach Wei, Founder of NexaWeb Technologies.

The Phizzpop Design Challenge will kick off today in Chicago.  Roundarch is one of four teams given three days to strategize, design and build an experiential Web application based on the latest and greatest Microsoft Web technology. While not limited only to the browser, the contestants will primary use Microsoft Silverlight, Microsoft’s next-generation development platform for Rich Internet Applications. They will also be using Microsoft’s new suite of tools for interactive software design and development, Expression Studio.

Mark Ferry, one of Roundarch’s Technical Directors, will lead the 3-person team in a challenge to design an application that applies to Chicago’s bid for the 2016 Olympic Games. No details around the specifics of the challenge have been released, making the event quite exciting (and challenging) for all involved.

The winner of this regional contest will move forward to additional rounds cumulating in the Phizzpop finals which will be held at the SxSW conference in Austin, Texas.

Meet the teams.