The Internet has emerged from obscurity to become a dominant platform for application development and is integral to the idea of Software as a Service (SaaS). Unfortunately the demand to build applications of increasing complexity has continued to outpace the ability of traditional Web applications to represent that complexity and expectation. Utilisation of AJAX technologies attempts to reconcile some of the issues, but frequently the result is a frustrating, confusing or disengaging user experience resulting in unhappy customers, lost sales, and increased costs.

We are in a period of expanding opportunity for Internet and intranet applications. The growth in adoption and usage of the Internet has acted as a driver behind technology spending, spawned such terms as Service Orientated Architecture (SOA), Software as a Service (SaaS) and Web Services, and enterprise integration trends that seek to combine back-office infrastructures with new front-office applications and the Internet.

Integral to this is the need to communicate better with employees, customers, suppliers, and partners. Intranet applications, including enterprise information portals and employee facing applications, are increasingly depended upon to share information across a company, while outwardly focused extranet applications seek to more tightly bind networks of partners, suppliers and customers and make communication, business transactions and support easier.

A key reason Web applications cannot represent these types of complexity is because of the limitations of HTML pages. The Internet grew up on the notion of a network of loosely coupled, unintelligent clients that communicate with increasingly intelligent servers by sending requests for pages. The emergence of Rich Internet Applications (RIA’s) has served to blur the distinction between the desktop and the Web and has resulted in smart, powerful and dynamic user interfaces. RIA’s seek to combine the best of the desktop, Web and communication technologies.

As one would expect, the driving forces behind Rich Internet Applications are the big guns in the technology and Web industry; namely Adobe, Google and Microsoft. Each company has produced their own RIA platforms:

Adobe Integrated Runtime (AIR)

AIR is a cross-operating system runtime that allows developers to leverage their existing web development skills Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

Applications can be built using the following technologies:

• Flash / Flex / ActionScript
• HTML / JavaScript / CSS / AJAX
• Combination of these technologies
• PDF can be leveraged with any application

Adobe Integrated Runtime can be found at http://labs.adobe.com/technologies/air/

Google Gears

Google Gears is an open source browser extension that lets developers create web applications that can run offline.

Google Gears consists of three modules that address the core challenges in making web applications work offline.

• LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally
• Database Store data locally in a fully-searchable relational database
• WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously

Google Gears can be found at http://gears.google.com

Micrsoft Silverlight

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

Microsoft Silverlight can be found at http://silverlight.net

Rich Internet Applications (RIAs) combine the best user interface functionality of desktop software applications with the broad reach and low-cost deployment of Web applications and the best of interactive, multimedia communication. The end result is an application which provides a more intuitive, responsive, and effective user experience.

More specifically, the best of the desktop environment includes providing an interactive user interface for validation and formatting, fast interface response times with no page refresh, common user interface behaviours such as drag-and-drop and the ability to work online and offline. The best of the Web includes capabilities such as instant deployment, cross-platform availability, the use of progressive download for retrieving content and data, the magazine-like layout of Web pages and leveraging widely adopted Internet standards. The best of communication means incorporating two-way interactive audio and video technologies.

This means that in a RIA environment, the client is capable of doing more than just rendering pages. It is able to perform computations, send and retrieve data in the background asynchronously from the user’s requests, redraw sections of a screen, use audio and video in a tightly integrated manner, and so forth, independently of the server or back end to which it is connected.

An RIA environment provides a strong technical platform that effectively restores the client’s abilities to be more like that of desktop software applications, or a traditional client in a client/server system. It fits into the traditional n-tier development process and integrates into legacy environments to extend existing applications without the need to rework them. And it also can serve as an interactive presentation layer above underlying Web Services. It is able to address various kinds of complexity. It enables development of applications that have complexity requirements, reducing the cost of development and frequently making development of such an application possible in the first place.

Because of their architecture and capabilities, RIAs have the potential to fundamentally change the way companies engage and interact with their Web users, leading to more effective user experiences with top- and bottom-line results.

Thousands of businesses worldwide face the challenge of establishing their web presence; a goal difficult to achieve without efficient web site development and testing tools. If someone where to ask you how good your website was, how would you answer; could you answer? There are so many factors to take into consideration, such as code validation, speed of download accessibility, usability etc, that there is no one correct answer and subsequently no one website that can provide you the definitive answer.

This article was inspired by a great blog post at Aviva Directory, entitled Grade Your Website: 31 Free Online Tests.

Below is a compendium of tools I use on a regular basis to test website I work on, based on Aviva Directory’s headings (incidentally they list the same tools I use regularly).:

Code Validation

The WDG HTML Validator is an excellent tool for identifying syntax errors on pages driven by markup languages. There is also an option to recursively check for errors on every page in the website directory, which is invaluable when checking large, dynamic websites.

The W3C Link Checker searches for and identifies broken links for a given URL. The tool specifically checks that all the links are de-referenceable, no links and anchors are defined twice and warns about invalid http and directory redirects.

Accessibility

Watchfire’s WebXACT is a must use tool for all serious designers and developers. The tool lets you test single pages and generates a very detailed report on the quality, accessibility and privacy of a website.

Speed

Web Page Analyzer from Website Optimization is an excellent tool that calculates page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component (objects, CSS, images etc). Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates best practices web site optimisation techniques into its recommendations.

Browser Simulator

Browsershots is a tool, created by Johann C. Rocholl, which takes screenshots of your website in various browsers and platforms including Firefox and Internet Explorer on Windows, Firefox and Safari on Mac OS X and Iceweasal and Konqueror on Linux. When the user submits a URL it is added to a job queue. Unfortunately the queue requires you to wait up to three hours before retrieving your screenshots, but the results provide a clear indication of how the website will be received by different user setups.

Search Engine Optimisation (SEO)

SEO Workers SEO Analysis Tool is an extremely useful tool that analyses an assortment of page features including meta tags, keyword density and load time. A user simply submits a URL for testing and the report is returned.

Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

1. Put the iepngfix.htc file into your CSS directory
2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the <img> tag

Known Issues

This uses CSS “behaviors”, a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don’t include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

Alternatives

An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

RevolutionArt is an international magazine edited in pdf format as a collective sample of the best of the graphics arts.

It’s a revolutionary platform, a massive propaganda to communicate messages and make the people think about them.

The objective of RevolutionArt is the one to serve as a inspirational source to artists, advertisers, photographers, designers and communicators in general who wish to explore new alternatives of expression through graphical samples of design, photo, ads, and general arts.

The magazine is distributed freely in digital format through http://revolutionart.publicistas.org and it’s available for the users in pdf format to download and share.

Download Issue One
Download Issue Two
Download Issue Three
Download Issue Four
Download Issue Five

Occam’s Razor (also spelled Ockham’s razor) is a principle attributed to the 14th-century English logician and Franciscan friar William of Ockham.

Occam’s razor states that the explanation of any phenomenon should make as few assumptions as possible. The principle is often expressed in Latin as the lex parsimoniae (law of succinctness):

entia non sunt multiplicanda praeter necessitatem

which translates to:

entities should not be multiplied beyond necessity

This is often paraphrased as “All things being equal, the simplest solution tends to be the best one.” One consequence of this methodology is the idea that the simplest or most obvious explanation of several competing ones is the one that should be preferred until it is proven wrong.

So, how can this apply to web development. There is an analogy between software development and the scientific theory as a means to enhance the credibility of a particular set of programming practices. Once a programmer has a theory (model) of the software in their head, they can talk about and explain its behavior to others. When they make changes to the code, they do so in a way that is consistent with the theory and therefore “fits in” with the existing code base well. A programmer not guided by such a theory is liable to make modifications and extensions to the code that appear to be “tacked on” as an afterthought, and not consistent with the design and philosophy of the existing code base.

Simply, don’t add markup where markup is not needed. Don’t over complicate an application structure. If you have the choice between 2 or 3 paths to the same end - choose one and let it be the simplest and shortest, but with the caveat, don’t cut corners. This will make for cleaner, understandable code with faster download times, something all developers should work towards. CSS has helped this concept immersurably by removing the need to use inline styles, font tags, tables for positioning etc.

In terms of ColdFusion, the use of design patterns (e.g. Singleton, Model-View-Controller…) and the now numerous frameworks (e.g. Fusebox, Model-Glue, Mach-II, Reactor…) has reduced or even removed the concept of “spaghetti code”, the bane of may a web developer’s life and indeed the often muted argument against ColdFusion as an enterprise level application development environment.

By itself, Firefox is a lean and fast browser, but lacks many functions useful to a Web Developer. This is where extensions come to the rescue. Web Developers use a host of Firefox extensions to increase their efficiency.

Here is a list of the Firefox extensions I utilise in my day-to-day work:

ColorZilla

https://addons.mozilla.org/firefox/271/

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Firebug

https://addons.mozilla.org/firefox/1843/

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

FireFTP

https://addons.mozilla.org/firefox/684/

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and much more.

HTML Validator

http://users.skynet.be/mgueury/mozilla/

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The details of the errors are seen when looking the HTML source of the page.

The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C. And now extended and improved by a lot of people. Tidy is embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.

IE Tab

http://ietab.mozdev.org/

This extension embeds Internet Explorer (IE) in a Mozilla/Firefox tab, which allows you to view your work in IE without launching a separate window.

LinkChecker

https://addons.mozilla.org/firefox/532/

Checks the validity of links on a web page.

MeasureIt

https://addons.mozilla.org/firefox/539/

Draw out a ruler to get the pixel width and height of any elements on a webpage.

SEO for Firefox

http://tools.seobook.com/firefox/seo-for-firefox.html

This tool was designed to add more data to Google and Yahoo! to make it easier to evaluate the value and competitive nature of a market. SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

Server Spy

https://addons.mozilla.org/firefox/2036/

Server Spy indicates what brand of HTTP server (eg. Apache, IIS, etc.) runs on the visited sites. When a tab is selected, the corresponding server name is shown on the right-hand side of the browser’s status bar.

Snapper

https://addons.mozilla.org/firefox/2703/

People often take screenshots of web pages for miscellaneous reasons - when designing a page, debugging a web application, or even for graphical reference. Usually, though, only a portion of the screenshot is actually relevant to the user’s purpose, leading to a large portion of the image getting cropped. This can be time consuming, and annoying at times.

Snapper allows users to designate an area of a web page for a focused snapshot, cutting out the additional work needed for cropping unecessary information.

Web Developer

https://addons.mozilla.org/firefox/60/

http://chrispederick.com/work/webdeveloper/

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.

Here is a list of other extensions I find useful:

CustomizeGoogle
Gmail Space
Google Notebook
GooglePreview
SessionSaver
Tails Export

The Fusedoc is a standardized way of documenting our code so that all members of the web team can more quickly and efficiently create and maintain ColdFusion templates.To see some examples of how it can be used and tools used to parse the information go to GrokFuseBox.

This Fusedocs file contains the Fusedoc DTD, an example ColdFusion page and documentation on the Fusedoc methodology.