From what I see, Thermo is a tool that helps to integrate the visual design process in more tightly with creating Flash/Flex-based Rich Internet Applications. If you take a look at the demo, you will see how it can import artwork and use that as a template for creating a Flex-based application. From what I see of this application, this is really what the visual design feature of Flex Builder really should have been, and this also looks to be very suitable for quick semi-functional prototypes. The workflow looks like it will work well as well: Visual designers can use Thermo to start off the application, then Web developers can work with the same project in Flex Builder to add in the structure, additional functionality, and server integration.

Since Thermo creates code that can be also edited in Flex Builder, one thing I would like to see is that they keep Cairngorm in mind. That would help make Thermo more suitable for larger scale RIAs.

The idea is that we should really be using more of the keyboard to be productive, but only for tasks which can be qualified as discrete, such as managing documents, launching applications, and working with text. I definitely agree with the premise. We have long had keyboard shortcuts, part of the problem is how to associate the shortcut with an action: there are so many, memorizing them is impossible. As an aside, f-keys are the absolute worst way to implement shortcuts as there is no mnemonic to help with the association, and no consistency save the F1 key for help (why not just label it “help”).

The author has some good thinking in his second article about a way of improving the feedback mechanism for shortcuts. I think it’s a good start, but perhaps a bit heavy in the information presentation. Many programs have a huge number of commands which would simply be overwhelming, even with the author’s proposed trimming search functionality. A great Mac utility called Quicksilver shows a way of achieving this in more of a compact way. Hitting ctl-space brings up the search field, then typing whittles down the list of commands available while using less real estate. Integrating this kind of functionality more tightly in the operating system. One problem with this particular program, though is the merging of commands with applications. Typing in “qui” could potentially mean “quit” or “quicksilver”, one being a command, one being an application. I think it’s probably best to keep those separate.

One thought I have relates to an example given in the book “The Design of Everyday Things” where one shortwave radio with lots of buttons on the front was found to be generally easier to use than a radio with similar functionality condensed into fewer buttons. The problem with having fewer buttons is that most of the functionality is hidden behind modes, which make it very difficult to “save” actions to muscle memory through simple memorization of where the button is. Similarly, our keyboards are inherently modal, with “shift”, “ctrl”, “alt/option”, and “Windows/Apple” buttons each representing different modes of operation. Doing something like replacing our F-keys with buttons that have distinctly labeled functions such as “open”, “close”, “save”, and whatnot would allow us to commit many of those common actions to muscle memory rather than having to memorize key combinations which may not fit our own mnemonic associations.

One more thought, approaches such as those used by QuickSilver and Windows XP Start Menu claim to be adaptive. The problem with this approach is that they are not predictable: trying to invoke the same command/program that you normally use, but on someone else’s machine, will result in different actions or at least a different set of movements to invoke the same action. Moving or hiding items based on usage is a really bad approach, however something more subtle such as slightly changing the appearance of the most frequently used commands might work better.

Anyways, there is lots to consider in how to best use the keyboard. It would be fun to come up with a shortcut feedback system that works well.

Grrrr… WordPress is munging the object and embed tags. The example can be seen here for the moment.

Another update: Did I mention error handling is not quite robust yet? Seems to not be loading anything over the server, however feel free to download the zip file and play with it locally.

Update 3: Seems it was just a case sensitivity issue on the file name, it’s up and running now.

Update 4: I have a new example up that adds some constructor options to some of the classes, and also adds a simple frequency spectrum display. Take a look and grab the updated source if you wish.

Note: this only works if there are no duplicated elements in each data set, which fortunately is not too hard a condition to impose.

Here is some code representing the algorithm:

var dataSet:Array = new Array();
dataSet.push(["1", "2", "5", "10", "11", "12", "15"]);
dataSet.push(["2", "5", "11", "14", "18", "21"]);
dataSet.push(["0", "1", "2", "3", "5", "7", "11"]);

var elementTallies:Object = new Object();
var currentElement:String;

for (var i:Number = 0; i < dataSet.length; i++)
{
	for (var j:Number = 0; j < dataSet[i].length; j++)
	{
		// Go through each element for each dataset. For each element,
		// add one to the tally for that element.
		currentElement = dataSet[i][j];
		if (elementTallies[currentElement] == undefined)
		{
			elementTallies[currentElement] = 1;
		}
		else
		{
			elementTallies[currentElement]++;
		}
	}
}

// Go through the tallies looking for elements with a tally of 3.
// Those elements will make up the intersection of the three data sets
for (var element:String in elementTallies)
{
	if (elementTallies[element] == dataSet.length)
	{
		trace("element: " + element);
	}
}
// Outputs: 11, 5, 2

The experiment that I tried does exactly that: it loops through all the <object> tags, and just replaces the HTML with exactly the same HTML. This makes IE think that the HTML is dynamically placed on the page, even though it started as just straight HTML.


The nice thing about this technique is that it could be easily retrofit onto older pages without touching the actual object/embed tags, and if JavaScript is disabled, it reverts to IE’s default behaviour but still at least shows the Flash content. It also will work with anything else that uses the <object> tag, such as with Java applets.

Unfortunately (well, fortunately, really), I don’t have the update installed yet and can’t test it myself. If anyone out there has it installed, could you let me know if you get the “click to activate content” flyover when mousing over the Flash movie in the patched version of IE 6? I have included a couple of sample Flash movies below that should trigger the new IE behaviour. The script is being called on this page, so for those with patched versions of IE 6, you should not get the mouse tooltip prompting you to click. If you try disabling JavaScript, you should get back the new IE behaviour.

If you want to try this for yourself, just place the code below in a file called replaceObjects.js .

// ------------------------------------
// Function replaceObjects
// Written by Nathan Derksen (http://www.nathanderksen.com/)
// A technique to get around the IE limitation placed due to the Eolas-Microsoft
// plug-in patent dispute.
//
// Usage:
// <head>...
//     <script type="text/javascript" src="replaceObjects.js"></script>
// </head>
// <body onload="replaceObjects()">
// ------------------------------------
function replaceObjects()
{
	var objectTagList;
	var newNode;

	if (document.replaceNode)
	{
		// Document.replaceNode does not work in Firefox, just in IE
		objectTagList = document.getElementsByTagName("object");
		for (var i=0; i < objectTagList.length; i++)
		{
			newNode = objectTagList[i].cloneNode(true);
			objectTagList[i].replaceNode(newNode);
		}
	}
}

I’m the dude on the left, and my co-author on the right is Jeff Berg.

Man, that is a long process (probably about 1 year total from contract to publication). Prepurchase now! Buy them as Christmas presents, birthday presents, Bar Mitzvah presents, even chew-toys for your dogs! (Discounts for bulk purchases for 5 dogs or more). They also work great as monitor supports (about 3 inches per book). If you reeeeeeeeeeally want, you can even read it yourself and learn how to script with ActionScript 2.0 and Flash 8 (perish the thought)!

Enjoy!

The first is called View Rendered Source Chart, which renders the HTML source in a way that is very easy to visually see the nesting.

The second is one called View Formatted Source, and not only shows your HTML source in a way where you can collapse nested tags, but when set to inline mode, shows you the major divisions within your document, and clicking on “source” for that division brings up just the HTML for that division. Finally, mousing over tags in the source view shows you what styles currently apply to that tag, and where in the CSS file the styles are located.

I just came back from a conference where I was presenting on Web 2.0. A related discussion around Microsoft’s foray into the Rich Internet Application space ensued, and as part of that discussion, I was sent a link to an interesting Information Week article that talks directly to our discussion. The article talks about MS and Eclipse-based development environments for web applications, and one quote in the article demonstrated one of my major concerns perfectly:

Microsoft also has written server-side extensions to JavaScript to improve the way Ajax apps work on Windows computers, so software written in Atlas can interact with elements of Windows Vista. Specifically, Web apps built with Atlas will be able to interact with Vista’s “gadgets,” miniprograms such as calendars, instant messaging contacts, photo albums, and media-playing software. “We’re looking at other enrichment scenarios where things can pop with Internet Explorer and Windows,” says Brian Goldfarb, a Microsoft product manager for Web tools.

These are exactly the kind of interactions which make the web an environment which is not cross browser or cross platform. What happens if you aren’t running Windows? MS would like it to say “this site requires IE on Windows”, but I don’t believe that is acceptable.

To complicate matters, we are to some degree moving away from the web browser as a container for online applications, and moving towards more desktop-centric applications that are built on web technologies, are updated more like a web application, but have access to local computer resources.

A number of significant questions come to mind:

• What is the best way of creating the desktop-based web app? Is Adobe’s cross browser, cross platform Apollo project the way to go?
• How do we best keep the web as an environment where diversity in platforms can flourish, rather than be locked to a single platform?
• We’ve seen that the web browser is not a good medium for web applications: Forms technology is still antiquated and will take some time before new forms technologies are widely adopted; DHTML controls have to be programmed to accommodate the different run-time environments of each browser; Ajax is really a work-around for functionality which the web was never initially intended for. Is it a good idea to bring web applications out of the browser into an environment to which they are better suited, and leave the web for what it was originally made for: disseminating information?

The source to this example is available as a zip file.

Here are a couple of screenshots from the project: