On September 1, 2010 Roundarch attended the 2010 Montgomery AFCEA Chapter Annual Awards Banquet.  During the event at the President’s Reception, Roundarch donated $2,500  to the Montgomery AFCEA Chapter Education Foundation which supports  IT initiatives at local schools and universities.  This year $40,000 was raised during AFITC which brings the total to $180,000 so far this year.

Since its inception, the Montgomery AFCEA Chapter Educational Foundation has invested over $3 million dollars in scholarships and other benefits for Montgomery area students, helping to transform Montgomery into one of the fastest growing centers of technical excellence in the Southern United States.

Lt Gen Bill Lord, SAF Chief Information Officer, Warfighting Integration; Colt Whittall, Vice President of Roundarch; Tony Tran, Vice President of Roundarch; Charisse Diane Stokes, Director, Montgomery AFCEA Chapter Education Foundation; Brig Gen Craig Olson, Program Executive Officer Enterprise Information Systems; Col Mary Griswold, Montgomery AFCEA Chapter President

Visit Montgomery AFCEA Chapter Educational Foundation for more information.

David Vanslette, vice president of client services at Roundarch, explains how Roundarch’s real-time analytics technology is helping businesses and venues improve.

Taking a page from the business world’s playbook, at least one NFL franchise has jumped into the game of gathering real-time information on customers, becoming an early-adopter of technology that could develop into a mainstay in stadiums around the country.

Thanks to a newly-installed command center that debuted last week, New York Jets owner Woody Johnson now has the ability to know precisely how many cars are entering the team’s parking lots, how many Darrelle Revis jerseys are being sold, which areas of his stadium have not yet sold out and whether or not any concession stands have run out of beer.

While it’s not new to many businesses, this technology’s debut in the sports world has the potential to boost the bottom lines of franchises and enhance the fans’ experience for the pricey games they attend.

Read the full article on Fox Business.

Pictured is David Vanslette, vice president of client services for Roundarch, at the September 13 Jets/Ravens season opener, discussing the touchscreen application.

At the Jets’ home opener last week, Roundarch, a leader in digital design and implementation, debuted its touchscreen application that provides real-time stadium and game data to team owner Woody Johnson.

The New York Jets football organization certainly is with its new Command Center touch-screen application. Jets owner Woody Johnson used the business intelligence application for the first time during the Jets’ first regular season football game against the Baltimore Ravens at the New Meadowlands Stadium.

While using the application’s dashboard, called “The Pocket,” Johnson and other permitted individuals can access live, real-time data on tickets, merchandise, concessions and parking.

Made up of two pieces, the Jets developed a .NET application to pull data from data files to be placed into a common source, explained David Simbandumwe, engagement director at Roundarch, a designer of digital experiences that helped with the application’s development.

This particular portion of the application includes an ETL (extract, transform and load) process that accesses data feeds from point-of-sale systems Micros, Retail Pro and TicketMaster, and it summarizes the data into a consistent format, according Roundarch’s technical specs.

Roundarch built a J2EE server-side application, which retrieves the information from the database, and a touch-screen or client-side application to render everything, Simbandumwe added. The touch-screen utilizes Adobe AIR and Gesture Works, a solution for creating multi-touch applications, for touch-screen interactions, and it runs on the Windows 7 operating system.

Read the full article by Katie Serignese at SD Times.

FOOTBALL APPS

File this under “keep to self”: Bloomberg’s spiffy new

numbers-crunching NFL app ($7.95) takes into account

factors such as the opposing defense and weather

when advising you on whom to start.

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 .

To many economists, 2010 looked like the year when mergers and acquisitions (M&A) would pick up again on Wall Street.  However, lackluster employment, consumer spending and credit availability have contributed to less M&A than anticipated for the first half of 2010.  Yet, it is only a matter of time before M&A becomes the centerpiece of corporate growth strategies again as pent-up demand appears to exist. Any cash that has been conservatively squirreled away over the past few years of turmoil and uncertainty – think about Apple’s $42-plus billion in cash – will likely push companies to increase value to their shareholders who have largely been dissatisfied with returns during this time.

It is an understatement to say that for financial services companies, this is a very interesting time.  The events that have unfolded since late 2008 will likely yield a new Wall Street – what some are calling Wall Street 2.0.  Financial reform has taken on renewed importance on Capital Hill.  In an effort to pay off the US government bailout money, financial services companies are being forced to sell off pieces of their business.  All of these elements appear to be setting the stage for another big push on the M&A front – or quite possibly for a reverse M&A cycle as companies may be forced to sell units that they would have otherwise kept in order to diversify their portfolio of businesses.  Citi selling Smith Barney, their crown jewel, to Morgan Stanley and AIG closing their financial services division are just two examples of many.

Read the full article written for Wall Street & Technology here.

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.

Jeff Maling and Geoff Cubitt have both been employees at Roundarch, a digital solutions and experiences provider for large organizations, since it was founded by Deloitte and WPP in 2000.

Roundarch has offices in Boston, Chicago, Denver and New York.  In 2005, the two decided to buy the company outright and grow it as an independent property. Since that time, they’ve seen an annual growth rate averaging near 35%, with some of their biggest clients including HBO, Avis, U.S. Air Force and most recently the New York Jets.

As the company continued to grow in scale, they also needed to grow in staff. As Maling puts it, each and every new hire needs to have business development potential, in addition to the ability to handle their day-to-day responsibilities. And in 2009, the leadership saw a need to hire a full-time business development director

Read the full article at Inc.com.

Bloomberg Sports and the National Football League have teamed up for the launch of the Decision Maker fantasy football application for PCs and Apple’s iPad.

Bloomberg has partnered with Roundarch, which specializes in digital design and implementation, to create the iPad application that provides real-time statistical-based head-to-head analysis for every NFL player. With the Decision Maker application, Bloomberg Sports is trying to reach the 20 million-plus fantasy sports players, including women and men of all ages.

“The partnerships with the NFL and Roundarch were the natural next step for Bloomberg Sports after our initial launch of our fantasy baseball product and as we expanded our sports offerings into football,” said Bill Squadron, head of Bloomberg Sports, New York. “With the new Bloomberg Sports Decision Maker app, we are trying to reach as many fantasy players as possible.

Read the full article by Dan Butcher on Mobile Marketer.