Plan Your Future in Five Easy Steps

Tuesday, 18th August 2009 in Strategy by Simon | No comments

The September 2009 UK edition of Wired ran an interesting article, carrying the same title as this post, by futurist Peter Schwartz. In the article, Schwartz proposed a 5 step plan to predicting and therefore safe guarding your future. Below are the five steps.

Schwartz starts by defining a test case. This is in essence a question; How can I future-proof my career? Once you know the question, you can then set about identifying key influences on your question–e.g. technological change–scenarios that may bring about the change–e.g. new competing technologies, lack of technological development in your sector, or the collapse of a key stakeholder–and finally, future implications.

Here is what Schwartz says in more detail:

1. List driving forces

What variables, trends and events will affect your mission? The first step is to list them. Next, divide them into uncertainties (such as economic, political and social conditions) and relative certainties (such as global population growth and climate change). Finally, rank the items according to their importance, from most to least significant. The result: a catalogue of factors that will determine the future of your area.

If I take web development as an example:

  • Pace of technological change.
  • Number of companies using the chosen technology.
  • Number of people available in the industry (permanent and contract).
  • State of the [digital] economy.
  • Competing technologies, e.g. Ruby on Rails vs ColdFusion, AJAX vs Flash, offline vs online, desktop vs mobile.
  • Support of the community, e.g. open-source software, tutorials and application servers.
  • Support of key stakeholders, e.g. Adobe’s support of Flash, Flex and ColdFusion.

2. Make a scenario grid

Now it’s time to map out possible futures. The two most important uncertainties from the top of your list form the axes of the grid, with each of the quatdrants representing a potential future. Some may be more likely than others–and some may seem downright improbable–but they all depict the interplay of key forces. Thus, they’re within the range of possibility and deserve attention. They help you prepare for a range of possibilities and bolster core actions with those related to the future you deem most likely.

3. Imagine the possible futures

Sketched as a grid, these 4 possible scenarios are so abstract that it would be hard to recognise them if they merged. Make them more concrete by fleshing them out into imaginery, but plausible, news stories of the forces at play.

To continue the web development example:

  • Global financial crisis prevents companies investing in technology. They cannot raise the adequate funding to push through key development projects, even if it means increasing efficiencies within the company.
  • Adobe drops support for ColdFusion causing turmoil in the community. Railo picks up a lot of business, but can’t scale to fill the demand. Far-sighted companies migrate to other suitable platforms.
  • Ruby on Rails booms under the paradigms: Convention over Configuration and Don’t Repeat Yourself, eating into ColdFusion’s key mantra: Rapid Application Development.
  • Key advances in technology on the desktop and mobile continue at pace. Micro-payments allow people to create relatively cheap applications that appeal to a mass audience. Development frameworks allow developers to transfer their skills between technologies without the need for significant retraining.

4. Brainstorm implications and actions

Now it’s time to develop strategies for coping with each of the four possible futures you’ve imagined. Start by listing all the implications of each of the scenarios and then come up with actions that would enable you to prosper under any of the new conditions. Some actions would apply to almost any scenario: these should form the basis of your plan, since they help you to prepare for a range of possibilities. Bolster these core actions with those related to the future you deem most likely.

Examples of possible implications:

  • Scarce funding.
  • Limited demand for new technologies.
  • Few companies to work for.
  • Few new projects to work on.
  • Increased competition for places.
  • Increased demand for people with key skills, e.g. mobile.

and possible actions:

  • Concentrate on existing technologies.
  • Develop and exit strategy, e.g. cross-train into a new technology.
  • Cultivate your network, make new contacts at major development houses.
  • Polish skills in areas of uncertainty.
  • Start your own cutting-edge business.

5. Track the indicators

The main value of the scenarios is that they sensitise you to the way the future is unfolding. Over time, the world is likely to gravitate toward one of your four quadrants. The trick is to recognise the shif in progress. As you monitor the news, look for signals that a particular possibility is becoming a concrete reality. Keep a file of news relevant to your scenarios, jotting down a quick note, along with the date, whenever you come across a significant story. Evaluate these developments on a quarterly basis so you can track the trends. Keep adjusting your action strategy to anticipate the future as it emerges.

Of course it is possible that none of your four quadrants becomes true. If this is so, you will need to go back and re-evaluate your scenario grid. Keeping a critical eye on your grid and apace of industry developments, you can be assured that the future will not change so quickly that you’ll miss an opportunity.

Let’s not Dilly-Dally: ColdFusion has its Merits

Friday, 9th January 2009 in Development by Simon | 11 comments

ColdFusion is 13 years old. That make makes it the daddy of the web world! It does not make it any less hip or useful than the relatively new kids on the block.

Take this scenario. A company I once worked for had what can be described as a business directory built upon a licensed, yet bastardised, version of a popular ColdFusion-based CMS. It didn’t work that well! The decision was made to redevelop the application in Java. It took two years to reach the same level of functionality! What happened next? Ruby-on-Rails is what! The rest is history and beyond the topic of this post.

So, in effect, the application almost went full-circle in its development paradigm — both ColdFusion and Ruby-on-Rails can be considered Rapid Application Development environments, Java, certainly not. Why did the decision makers not stick with ColdFusion and put time aside to actually build it properly in the first place? To put it simply, they lost faith in ColdFusion; it was largely mis-understood.

The weakness of every programming language does not lie with the language itself per se — albeit it can have an important influencing factor — but rather with the ability, or indeed inability, of the developer to leverage the language in the most efficient and optimal way.

ColdFusion, like every other programming language has had and I’m sure still does have its fair share of poor developers; those people simply working with it as a means-to-an-end, rather than those passionate about the language, those people programming without understanding the fundamentals of programming or the implications of their poorly written code. This is apparent from .NET to Java, ColdFusion to Ruby, JavaScript to ActionScript.

Let’s not dilly-dally, bicker or insult one another about which is best, which one is dying and which one is not worth the computer it is compiled on. What is important is to understand the merits of each language and decide which one best suits the application, not only in technical terms, but also in terms of time-to-market, cost of development, availability of a skilled workforce etc.

ColdFusion, whether rightly or wrongly in some people’s opinion, can sit proudly amongst its peers and provide a truly compelling alternative.

Here’s how (in no particular order):

  1. Low Total Cost of Ownership – frequently, ColdFusion is described as expensive, it simply isn’t especially if you consider the natively supported functions. But to put it bluntly, if your company cannot afford the cost of ColdFusion standard, or indeed ColdFusion hosting, you have bigger things to worry about regarding the profitability of the company; you won’t be able to afford much of anything! The problem becomes not the product. ColdFusion applications are quicker to develop and developers are vastly cheaper to employ than their peers in Java or Ruby, just look at ITJobsWatch for examples.
  2. Rapid Application Development – ColdFusion vastly simplifies tasks. What would take other languages numerous lines of code to produce is efficiently encapsulated either in a tag or function or as a setting in the administrator. This is a simplistic yet indicative example: where else can you connected to a database simply with one line of code or indeed simply by name? ColdFusion changed the idea of specifying development time in terms of months and years to weeks and months or small features a matter of hours and days. Simplicity is not the mother or all evil. To be pragmatic, simplification reduces costs.
  3. Rich Internet Applications – ColdFusion may or may not have pioneered the RIA paradigm, but it has played a significant supporting role to Flash and now Flex. ColdFusion natively supports Flash remoting, providing the all important data access tier.
  4. Platform Maturity – ColdFusion 8 is built upon the latest version of Java (1.6). Along with internal improvements to the ColdFusion application, this has afforded ColdFusion unprecedented speed improvements and stability.
  5. Language Maturity – with each major release of ColdFusion comes many language enhancements added to the core. This means that previous addons, for example image manipulation, which came at a premium are now standard. Adobe and other companies that produce CFML engines are now participating in a CFML advisory committee, which aims to set standards for the core language. This is not only a sign of maturity but a letter of intent by the industry that will mean your application will work on any engine, assuming no proprietary functionality is used.
  6. The Ultimate Middleware – ColdFusion sits comfortably between any backend and front end system. Be it interfacing with a host of databases, Java, .NET, COM, Corba or connecting to classic HTML or rich Flash, Flex and AJAX frontends with little or no configuration.
  7. Feature Rich – what other web technology natively supports PDF generation, charting, enterprise-level search, AJAX, image manipulation, Atom and RSS creation, Zip and JAR file manipulation, a server monitor, Flex integration, encryption libraries, all important database connectors, webservice creation, XML manipulation, inbuilt reporting application (similar to Crystal Reports), email, FTP to name but a few? I hazard a guess at none, unless you’re happy to pay a premium.
  8. Platform Independent – since ColdFusion 6, when Macromedia redeveloped the entire application in Java, ColdFusion has been platform independent. You can install it on practically any machine.
  9. OpenSource Alternatives – BlueDragon and Railo are both significant alternatives to Adobe ColdFusion and both have opensource alternatives, the latter of the two having recently joined the JBoss community. Adobe are also considering providing a free edition to academic institutions.
  10. The Future – many commentators have mentioned Hibernate as a significant addition to the next release of ColdFusion, version 9. But having seen the prerelease notes, that is not all that will be added. Alas I’m under NDA, but rest assured, there is going to be a significant intake of breath when developers get hold of the next release. ColdFusion 8 was firmly geared towards middle management with fuzzy additions, ColdFusion 9 is set to re-address the balance with compelling language and functionality enhancements.

ColdFusion evangelism needs to step up a gear! Adobe certainly doesn’t afford much marketing budget to the product, prefering The Community do the hard work. It is not always easy convincing the decision makers that ColdFusion is a good product of choice, without Adobe’s unnerving support, but we have to work hard, break down those barriers, encroach on events outside the comfortable sphere of the ColdFusion world and demonstrate ColdFusion’s match-winning ability.

ColdFusion isn’t dying, it’s simply niche. Every niche has its place.

UPDATE: If you would like to view the ensuing debate regarding ColdFusion prompted by Aral Balkan, feel free to do so. This post should serve as a positive reminder of ColdFusion’s virtues, alongside the need for a balanced and polite debate.

Using the MooTools Autocompleter Plugin with ColdFusion

Thursday, 21st August 2008 in Development by Simon | 3 comments

In a previous post, I demonstrated how to implement Dylan Verheul’s jQuery Autocomplete plugin. Not content with demonstrating one library’s plugin, it is now the turn of MooTools.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

In this post I will show you how to implement the AutoCompleter plugin by Harald Kirschner. Kirschner’s AutoCompleter plugin script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

The Goal

The goal of this post will be the same as the jQuery autocomplete post: Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

  1. The latest copy of MooTools
  2. A basic understanding of JavaScript and JSON
  3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo below will show how to interact with a simple ColdFusion script, but I’ll also provide more (advanced) examples in the download.

How It Works

Once the user begins to type into the form text input field, the MooTools auto-complete is activated. After a set character length and time interval (both optional), a list of items is displayed below the input field. The user can select an item with either the arrow keys or mouse.

NB. Clicking back in the input field will repopulate the auto-complete list, if options are available, so that the user can change the selection. Deleting part of the chosen item will also trigger a new selection list.

The Code

There are three parts to this demo:

  1. The page’s HTML.
  2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
  3. The MooTools JavaScript.

HTML Form

<h1>Example: Country Lookup</h1>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>

ColdFusion

Below is a simple ColdFusion component that takes a string as an argument. This string is part or all of the country name. The query results are parsed as an array and returned from the function, as JSON, to the MooTools auto-complete function.

<cfcomponent output="false">
 
	<cffunction name="getCountry" access="remote" output="false" returntype="array" returnformat="json">
		<cfargument name="country" type="string" required="true" />
 
		<cfset var qryCountry = queryNew('country') />
		<cfset var arrCountry = arrayNew(1) />
 
		<cfquery name="qryCountry" datasource="test">
		SELECT countryName
		FROM country
		WHERE countryName LIKE <cfqueryparam value="%#ARGUMENTS.country#%" cfsqltype="cf_sql_varchar" />
		</cfquery>
 
		<cfloop query="qryData">
			<cfset arrCountry[currentRow] = qryCountry.countryName[currentRow] />
		</cfloop>
 
		<cfreturn arrCountry />
	</cffunction>
 
</cfcomponent>

JavaScript

The JavaScript will attach itself after the DOM is ready — this more or less relates to when the page has loaded in the browser. Each time the text input field, with the ID of country, is changed, the Autocompleter.Ajax.Json event is fired. This makes a call to the ColdFusion component, which returns a JSON object of matched items. This JSON object is interpreted by the plugin and rendered as an HTML un-ordered list.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Observer.js"></script>
<script type="text/javascript" src="Autocompleter.js"></script>
<link rel="stylesheet" href="Autocompleter.css" type="text/css" media="screen" />
<script type="text/javascript">
window.addEvent('domready', function() {
	new Autocompleter.Ajax.Json(
		'country',
		'data/Country.cfc?method=getCountry&returnformat=json&country=' + $('country').getProperty('value')
		, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries'
	});
});
</script>

Where to Take it Next

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the MooTools autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download the Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

Using jQuery Auto-Complete with ColdFusion

Wednesday, 16th July 2008 in Development by Simon | 25 comments

Creating an autocomplete form field historically has not been a trivial matter and would require an indepth knowledge of JavaScript and CSS. However, the task is made far more simple when using one of the many freely-available JavaScript libraries. In this post I will show you how to implement the jQuery Autocomplete created by Dylan Verheul.

The Goal

Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

  1. The latest copy of jQuery
  2. A basic understanding of JavaScript
  3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo will specifically look at a simple form text input field, which takes a country name.

See the demo, and others, in action

How It Works

Once the user begins to type into the form text input field, the jQuery autocomplete is activated. After a set time interval, a list of items is displayed below the input field. The user can select these with either the arrow keys or mouse.

The Code

There are three parts to this demo:

  1. The page’s HTML.
  2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
  3. The jQuery & JavaScript.

HTML Form

<h3>Example 1.: Country Lookup</h3>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>
<p>NB. If you have <a href="http://getfirebug.com/" title="Get Firebug">Firebug</a> installed you will be able to view the <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> call.</p>

ColdFusion

This is a simple example, using a database to return a list of country names that match the characters the user has input. You could expand this and return a JSON data structure.

<cfsetting enablecfoutputonly="true">
<cfquery name="qryGetCountry" datasource="myDatasource">
SELECT countryName
FROM Country
WHERE countryName LIKE <cfqueryparam value="#URL.q#%" cfsqltype="cf_sql_varchar" />
</cfquery>
<cfoutput query="qryGetCountry">
#qryGetCountry.countryName##chr(10)#
</cfoutput>

JavaScript

The JavaScript will attach itself after the document is ready, i.e. after the page has loaded. Each time the text input field, with the ID of country, is changed, the autocomplete event is fired. This makes a call to the ColdFusion page, which returns a list of matched items.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link type="text/css" href="autocomplete.css" rel="stylesheet" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
	$("#country").autocomplete(
		"country.cfm",
		{
			minChars:2,
			delay:200,
			autoFill:false,
			matchSubset:false,
			matchContains:1,
			cacheLength:10,
			selectOnly:1
		}
	);
);
</script>

Where To Take It Next

JSON

The above example only shows a simple text list, separated by carriage returns. It is more preferable to use JSON.

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the jQuery autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download The Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

JavaScript Frameworks – Let There Be Light

Wednesday, 16th July 2008 in Development by Simon | No comments

For many web developers, whenever JavaScript is mentioned it provokes a rye smile; JavaScript is one of those programming languages that is rather avoided than embraced. This is not the fault of the language itself, but rather the browsers. A few years ago, the landscape of client-side scripting was a bleak scene. Browser inconsistencies, particularly with the dominant Internet Explorer, implementation bugs and numerous target platforms made developing client-side JavaScript a tricky undertaking.

To the consternation of these same developers, the landscape changed and Web 2.0 hit the mainstream. Almost overnight, every website on the internet wanted to use or was using AJAX. Marketers joined the bandwaggon and every feature requested had to involve something dynamic and revolutionary. Thus JavaScript development quickly hit the forefront of peoples minds and became as important as any server-side technology available at the time.

Over the next few blog posts, I will be using the popular frameworks jQuery, Yahoo! User Interface Library (YUI), ExtJS and Adobe’s Spry with ColdFusion to demonstrate various techniques, such as autocomplete and form validation.

Learning the Yahoo! User Interface Library – Book Review

Tuesday, 10th June 2008 in Development by Simon | No comments

by Dan Wellman

Synopsis

Learning the Yahoo! User Interface Library book coverThe Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD License and are free for all uses.

This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book. The basics of each control are presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.

Besides giving you a deep understand of the YUI library, this book aims to expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.

The core aim is to teach you how to create a number of powerful JavaScript controls that can be used straight away in your own applications.

Download

Download the latest YUI version, including full API documentation and more than 250 functional examples from Sourceforge.

The library’s developers blog frequently at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Book Review

The Yahoo! User Interface Library sits comfortably amongst its peers, which, along with many others, include Prototype, jQuery and Mootools. Arguably it can be said that the YUI library is the king among the JavaScript and CSS-libraries. With a vast number of well documented examples and near 100% compatibility amongst modern browsers, it would be difficult to find a comparable library.

It is one thing to be a well documented library, but it is another to know how to use the libraries to construct a user interface. This is the niche Dan Wellman fills with his book. Although not necessarily for the beginner, since you need a knowledge of CSS, JavaScript and a little AJAX, Wellman does a good job of explaining the concepts, especially AJAX, from scratch.

Wellman provides an A-to-Z of the library and assumes, rightly, that the reader has little or no knowledge of the library. To that effect, he does a long introduction of the YUI, following an overall review of its components, listing them in the first chapter. He then picks up a selection of some of the most established utilities, for example navigation, animation and AJAX utilities and in the following chapters he covers one or two examples for each of them.

Importantly, the book teaches the reader how to not only use the DOM manipulation and event handling aspects of the library, but also the CSS tools of the library.

Wellman does a good job of introducing the technical aspects at the beginning of each chapter, but not dwelling too long before moving on to real usage and methods.

What I would have liked to have seen is more interaction between different components written about in the book. Clearly building a fully-featured application that incorporates most or all of the key components would be unweildy, but individual and isolated examples doesn’t equate real-world scenarios either. For example, it is quite conceivable that autocomplete and drag-and-drop components would be utilised on the same page; it would have been good if Wellman had explained the pains or pitfalls that may be encountered with such combinations. The negativity aside, the examples are of a good quality.

The book does contain a number of errors, but since this is the first edition you can probably forgive the editors from missing them.

A major gripe I have with this book, indeed all technical books is the lack of colour throughout. It is far easier to read and understand the example code when code colouring is employed, allowing for easier understanding of the key elements in the code. Surely modern publishing techniques can mitigate against the extra cost of colour. Indeed, I would pay more for a well-written coloured technical book.

A great summary chapter on graceful degredation versus progressive enhancement would also have been welcomed, since many developers may not consider the usability and accessibility issues of using JavaScript.

This book is certainly a good read for anyone who has basic knowledge of JavaScript, HTML and CSS and who wants to learn how to apply the YUI library in their projects, making them more interactive for the user.

jQuery 1.2 API Reference

Wednesday, 9th April 2008 in Development by Simon | No comments

Among the plethora of JavaScript libraries to have been released, few have been recognised to be as effective as jQuery. This lightweight library has been the subject of different discussions since it was launched in 2006. Basically, jQuery has the ability to flawlessly string together JavaScript together with HTML. Because of its effectiveness, there have different types of lightweight applications and plug-ins launched using jQuery. Ajax based websites that offers simple interface would virtually work together using jQuery’s simple interface.

Download the jQuery 1.2 API Reference (360KB).

More information can be found on the jQuery Website.

More Than Just Hot AIR – Single Site Browsers

Wednesday, 9th April 2008 in Development, Technology by Simon | No comments

Adobe AIR LogoAdobe Integrated Runtime is more than just hot air, it traverses the previously unexplored space that exists between the Web and desktop applications.

Up until very recently, the void between the Web and the desktop seemed like a schism that could not be crossed. But since AIR’s 1.0 release in February this year, a whole host of other applications are emerging to compete with AIR in the single site browser space.

Although AIR is very new, the product is remarkably mature with the integration of the excellent opensource WebKit browser engine for rendering HTML and JavaScript, the SQLite database engine for embedded database functionality and of course, Adobe’s Flash player for development of Flash-based Rich Internet Applications. Because of this flexibility, the learning curve faced by developers is almost non-existent, they simply have to get to grips with the AIR API.

What is all the fuss about?

Delving into the AIR API, your application will have the ability to detect whether it is currently the active window or connected to the network. You can access the file system, allowing you to read and write files, access other datasources, tap into the native menu options or interact with almost any aspect of the operating system in a way familiar to common desktop applications. This functionality is available regardless of the architecture on which it is installed. Therefore AIR applications will work similarly when installed on a Windows PC or Mac, and soon on Linux machines as well.

AIR is much, much more than a single-site browser — it’s a cross-platform runtime environment and the distinction is significant.

The ability to run applications built on AIR on almost any machine, on- and offline, sets it apart from any other offering currently out there or in development. For example, Google Gears is restricted to AJAX applications, whilst Mozilla Prism isn’t much more advanced than a cut-down version of Firefox, with no offline capabilities yet.

Who else has entered the race?

As mentioned, a significant entry is Mozilla’s Prism, however, Pyro for Linux and Bubbles and Fluid for Mac are clever little tools for packaging up an existing website and presenting it as a standalone desktop application.

Mozilla Prism

Mozilla Prism LogoPrism, previously known as WebRunner is a product in development which integrates web applications with the desktop, allowing web applications to be launched from the desktop and configured independently of the default web browser. It is commonly used with Google AJAX Applications, such as Gmail and Google Docs.

Prism is part of an experiment by Mozilla designed to “bridge the divide in the user experience between web applications and desktop applications”. Essentially, Prism will allow you to create a desktop-like application out of individual websites. These site-specific applications are a growing trend and a trend heavily marketed by, not only Adobe, but now Mozilla, as ‘the future’.

While traditionally users have interacted mostly with desktop applications, more and more of them are using Web applications. But the latter often fit awkwardly into the document-centric interface of Web browsers.

In its current form, Prism doesn’t have the ability to function as a desktop application without access to the Internet, but Mozilla says it is “working to increase the capabilities of those apps by adding functionality to the Web itself, such as providing support for offline data storage and access to 3D graphics hardware.”

More details can be found on the Mozilla Prism website.

Pyro Desktop

Pyro LogoPyro Desktop is a new type of desktop environment for Linux built on Mozilla Firefox. Its goal is to enable true integration between the Web and modern desktop computing. Pyro was announced during GUADEC 2007 and is developed by Alex Graveley and Chris Toshok.

More details can be found on the Pyro Desktop website.

3D3R Bubbles

Bubbles LogoBubbles is a desktop application that allows you to work with your web resources in the way you want to work with them.

The Bubbles application window, known simply as a Bubble carries the web resource almost like a web browser does. Since the Bubble has advanced browser capabilities there’s an advanced control device for it — the Bubble seed — an XML file called Smart Bubble. It defines the properties — the whats & the hows — of its Bubble window. The Smart Bubble contains the information about what Bubble will load, how it will look on the desktop and what capabilities it will have, etc. So it goes from the Smart Bubble into a grown Bubble that lives on your desktop, accessible from the system tray.

More details can be found on the 3D3R Bubbles website.

Fluid App

Fluid LogoFluid is a way to create Site-Specific Browsers SSBs to run each of your favorite WebApps as a separate desktop application. Fluid gives any WebApp a home on your Mac OS X desktop complete with Dock icon, standard menu bar, logical separation from your other web browsing activity, and many other goodies.

Fluid includes optional Tabbed Browsing, built-in Userscripting (aka Greasemonkey/GreaseKit), RSS/Atom Feed detection, a JavaScript API for setting dock badges, showing Growl notifications and adding Dock Menu Items, optional bookmarks, optional browsing to urls outside the SSB “home” domain, Dock badges and Dock menus for Gmail, Google Reader, Facebook, Flickr, and Yahoo! Mail, auto-software updates via the Sparkle Update framework, and custom SSB icons.

More details can be found on the Fluid App website.

Great Adobe AIR Applications to Check Out

Wednesday, 19th March 2008 in Technology by Simon | 2 comments

Adobe AIR LogoSince the Adobe Integrated Runtime (AIR) was released at the end of February, we now have a stable platform on which to build desktop applications with our existing web skills. A number of people have already started and the Adobe AIR Marketplace is filling with AIR applications by the day.

So what is the big deal? The Adobe marketing team state that:

The Adobe AIR runtime lets developers use proven web technologies to build rich Internet applications that deploy to the desktop and run across operating systems. Adobe AIR offers an exciting new way to engage customers with innovative, branded desktop applications, without requiring changes to existing technology, people, or processes.

What AIR applications should you check out?

What is intriguing is that all the tools I have chosen are generally useful tools for the developer or designer, with the exception of twhirl, which is a social-interaction tool. I’m looking forward to when other, less developer-centric tools become freely available. AgileAgenda has taken the lead with this respect, albeit not freely available, as has eBay desktop, but I would like to see examples from the BBC in the form of a desktop BBC iPlayer or maybe a Flickr image browser, del.icio.us bookmark reader, RSS aggregator and a Picnik image editor.

Analytics Reporting Suite

Google Analytics Reporting SuiteThe Analytics Reporting Suite, by Nicolas Lierman, brings Google Analytics to the desktop. It uses it’s own custom API to interact with Google and nearly implements all the features of Analytics.

For website owners this is a must-have application. Like the twhirl AIR application below, it is a fantastic example of what can be achieved with Flex and AIR. Measuring visitor trends and traffic are essential tasks to managing and improving a websites performance. The Analytics Reporting Suite allows you to configure multiple Google’s Analytics accounts and access the web-based suite’s plethora of features via a desktop application. The application displays integrated graphs and animations via a tabbed interface, which allows you switch between a number of reports. These reports can then be saved as a PDF, Excel or XMLdocument, or printed.

You can download and install the application from the About Nico website.

twhirl twitter Client

Twhirl Logotwhirl, by Marco Kaiser, is probably the most popular desktop client for the twitter micro-blogging service. Most of the features available on the twitter website are accessible through twhirl, plus, a lot of usability enhancements have been added to make it easier to manage multiple accounts. This is great for those who want to separate business and personal accounts they may have.

The twhirl application is a great example of how AIR can bring web applications to the desktop; it can dock to the system tray, display message alerts and you can configure the applications opacity when not focused (great if you like Mac and Vista-styled themes). The application allows you to search twitter users, view their timelines, add friends, view followers, delete tweets and much much more. Twhirl automatically fetches your friends’ status updates, direct messages and replies, whilst also colour coding different types of messages and alerting you to messages both audibly and visually.

The twhirl application is skinnable and comes with several built in skins with which you can customise the application. All-in-all twhirl is not only one of the best twitter clients, but AIR applications.

You can download and install the application from the twhirl website.

Kuler Desktop

Adobe Kuler LogoAdobe kuler is the first web-hosted application from Adobe Labs designed both to stand alone and to complement Adobe Creative Suite software. Built using Adobe Flash and ActionScript 3.0, kuler is all about colour: colour for exploration, inspiration, experimentation and sharing. Kuler is clearly targeted at the designer, but anyone interested in colour will benefit from its use.

You can download and install the application from the Adobe Labs website.

WebKut

WebKut LogoWebKut is a web screenshot tool that allows you to capture web pages, or parts of them in a very simple way. It provides you with 3 capture options: the entire page, the current view, or only a selection. This little application proves particularly handy for those presentations or projects that need great visuals from the web.

You can download and install the application from the WebKut website.

RichFLV

RichFLV, by Benjamin Dobler, lets you edit FLV files. The key features include reading FLV metadata, read and edit cuepoints, cut FLV files, convert the sound from an FLV to MP3 format, convert an FLV to an SWF … and much more.

You can download and install the application from the Adobe AIR Marketplace website.

SearchCoders Dashboard

SearchCoders LogoThis Flex-based chat widget is designed with programmers in mind. The code input feature allows developers to chat about code without disrupting the conversation.

You can download and install the application from the SearchCoders website.

Pownce

Pownce LogoMuch like twhirl in look, feel and ease-of-use, but with a slant towards productivity rather than micro-blogging, Pownce is a way to keep in touch and share things with your friends or colleagues. You can send people files, links, events, and messages and then have real conversations with the recipients. This is a great collaboration tool and was one of the first services to really embrace AIR as an application architecture, which could realise their service as a desktop client. Everything that is available via the Pownce website is also available via the client application, except and possibly importantly, the ability for the user to amend their account settings and add friends to your network; this still has to be done via the website.

For a small annual amount, Pownce offers a paid-for service which will eliminate adverts from your profile and allow you to send huge file sizes (100MB) and customise the theme of your Pownce.

Pownce also offers Drupal integration and a mobile application, which works with the iPhone, BlackBerries and many more ‘internet-ready’ mobile devices.

You can download and install the application from the Pownce website.

BBC Appealing to the Facebook Generation

Thursday, 13th March 2008 in Design, Strategy, UX by Simon | No comments

BBC Homepage LogoI’m not a big fan of the BBC’s recent website redesign! While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is too “Facebook” and Web 2.0 for my liking; exactly what an online news site does not need. Who are the BBC trying to appeal to? They have gone from being content centric to design and technology centric. This in itself isn’t a bad thing, but I don’t understand the BBCs motivation for doing so.

Richard Titus, the Acting Head of User Experience at the BBC was a key driver of the project.

From a conceptual point of view, the widgetisation adopted by Facebook, iGoogle and netvibes weighed strongly on our initial thinking.

Titus identifies the key features of the new homepage as being:

  • Simple, clean and beautiful, the final design, … visually striking yet unpretentious.
  • Personalization: you can choose the content that interests you by adding and removing the content boxes via the “Customise Your Homepage” tab.
  • Localization: Users can now set their own location, enabling them to access local sites, weather, news, radio and TV schedules without the hassle often associated with user journeys to local content.
  • Simplicity: the customization is intuitive and includes an interactive demo and tips to guide users through the process. It is also unobtrusive if the user has no desire to customize their page their experience won’t be compromised.
  • Search: The site is much easier to read and scan at a glance. At the top of the page there’s a search function (now reduced from two search boxes to one), and at the bottom a full directory of all BBC sites and a link to the A-Z, allowing users to quickly find what they’re looking for.
  • Nostalgia: the new homepage also manages to incorporate eccentricity alongside innovation.

Aesthetically bold and bright.

Aesthetically, the new homepage looks nice. It’s big, bold and bright – a far cry from the old days when BBC sites had text almost too small to read and a fixed-width design optimised for tiny monitors. But at the same time it appears far too clunky! I’d prefer something that would look a little more elegant and understated. Something that doesn’t appeal to The Facebook Generation, who are less likely to read the BBC pages at lunchtime, than update their Facebook, Bebo or Twitter profile during that ‘valuable’ hour. This begs the question, does the BBC know who their core audience is?

Confusing interactions.

The homepage makes great use of AJAX, but at the same time, there are a number of confusing interactions going on. For instance, the ‘Edit’ button next to each area of customisable content seems like the wrong label text. I’m not editing the news, the weather or blogs – I’m selecting which news categories I want to see, where I am and which blogs I want to read. These types of button ought to be contextual rather than generic. Edit is simply too vague.

Also, what’s the idea behind those plus and minus buttons for news? Strange idea. Add or remove articles from the displayed list? Why would you want to remove them from view sequentially? If the idea was to allow the user to asynchronously update a short list of available headlines, then why not move back/forwards in blocks of five? Plus and minus are often used as metaphors for creation/deletion in software, so the usage doesn’t seem right.

Personalisation vs Simplicity … an uneasy relationship

BBC Customise Homepage

The ability to personalise a website is, in general, a good thing. Google has done it with their iGoogle, Yahoo! with My Yahoo and Microsoft with Windows Live. But I think the balance here is gone too far towards design and borrowing from succesful Web 2.0 sites. The BBC website has always been an impressive destination for (relatively) impartial news and current affairs throughout the world, not a Web Portal. Or is this the point? Does the BBC want to become a destination for all your information needs and compete with Google, Microsoft and Yahoo?

The BBC should consider that 14-25 year old users, what I term The Facebook Generation, will require far greater scope for adding their individuality than is currently available. The social networking generation are page-savvy. They want control of their interface to information, their screen is their window on the world and I don’t think that you have gone far enough in divesting control of the display of that information to the user.

But for those who aren’t part of The Facebook Generation, the people who care about getting to the content fast and with little fuss, is the ability to personalise the homepage worthwhile or even simple? I’m not so sure.

Who needs a clock?

BBC Homepage Clocks Finally, the clock and date. What an important waste of webpage ‘real estate’, even though in the BBC’s case I understand it was a throwback to the old clock that preceded individual TV programmes. If you’ve got a modern computer capable of displaying the clock with the Flash plugin, then you’ll almost certainly have the date and time visible to you anyway. It’s needlessly superfluous on a website.

« Older entries