Some of the very best web design and development tools are free. Free as in speech and as in zero pence. We take a look at the best free software you can use to build a successful, contemporary website, starting with the obvious: tools to design it with.
First you'll need a web editor. Nvu has long led the field in open source drag- and-drop web authoring. However, development seems to be frozen, with no new releases since 2005. KompoZer builds on the same code base and is described as "Nvu's unofficial bugfix release". It might feel like an earlier version of Dreamweaver, but with CSS editing and built-in W3C validation, it's a modern authoring tool. Both are available for Mac, Windows and Linux.
These tools are based on the original Netscape Composer code that went open source with the launch of the Mozilla Project. The original program is still open source as part of the SeaMonkey suite of web tools.
Nvu's CSS tools are a bit basic, so a dedicated editor such as CSSed can be used to boost your toolkit. There are no preview tools, but built-in autocompletion, hierarchical code views and CSS validation make it a match for commercial environments. However, if all you want is to knock together quick and dirty layouts then the free online CSS layout editor and CSS generator at www.csscreator.com may be enough.
At the top of the current heap, we wholeheartedly recommend Aptana Studio 1.1. It handles web scripting easily, with additional features aimed at advanced application development, including Ruby on Rails, Adobe AIR and iPhone support through free plug-ins.
Aptana is available for Windows, Mac and Linux, though Linux devotees may want to look at Quanta Plus, which is aimed more squarely at site development than Aptana. Something more lightweight required? We swear by Notepad++ (notepad-plus.sourceforge.net), a free code editor and Windows Notepad replacement that's great for tweaking HTML, CSS or PHP code.
Alongside your Ajax coding-capable editor, you'll need a good script library. Why try to reinvent the wheel when others have done the hard work for you? The Ajax framework we recommend has a long history of use and is actually based on two technologies.
First, there's Prototype, a library of bespoke 'classes' for file, form and external data handling. Rico is a library of ready-made interface components, effects and interactive elements that's built on top of Prototype. Similarly, Scriptaculous can be used to extend Prototype. These libraries aren't for beginners, but they make programming Ajax interfaces a whole lot easier.
What's lacking from all the authoring tools we've mentioned so far is a mechanism for planning sites, so let's take a lateral step around this conundrum.
Aside from project management and file transfer (which we'll come to in a moment), what else do the site planning tools in commercial behemoths Adobe Dreamweaver and Microsoft Expression Web really offer? A visual method of planning site architecture, perhaps?
How about Dia, then? A tool for drawing structured diagrams, flow charts and hierarchies, it can be used for circuits, flow control and, of course, site architecture. If this all sounds too specialist for you then the Microsoft-baiting OpenOffice comes with the concisely named Draw tool, which is ideal for mapping site architecture before construction.
Site management isn't just about architecture, though – it's about project management too. That's where an online tool like Open Workbench comes into its own. If you manage your manpower with this alternative to Microsoft Project, you'll be able to track resources, impose deadlines, assign tasks to team members and more. Though it's aimed at enterprise level project management, it's ideal for collaborative site building too.
For version control and file transfer of the kind found in Dreamweaver's site management tools, give TortoiseSVN a try. This standalone client is based on Subversion, which gives a friendly user interface to a powerful revision management app.
So, we've got coding and site building sewn up. What about design and multimedia content? For creating page layouts, buttons, banners and logos, we go with Inkscape. A vector drawing package in the mould of Adobe Illustrator, it enables you to output your images in a variety of web formats. In fact, its native format is SVG.
For bitmap editing, The GIMP is essentially a free version of Photoshop. All your favourite features are present: painting tools, support for massive image files using a tiled memory system, layers, transformations, web animation and support for all the web's most import file formats.
And design tools aren't the only aesthetic freebies on offer. Clipart, fonts and even full layouts are available to help transform your site into something worth visiting. Two sites stand out for web templates: Open Source Web Design and Open Designs.
Both provide layouts individually vetted and rated by the community using them. You'll find some brilliant designs to customise and make your own, as long as you credit the original authors. If you prefer a blank canvas, try CSS Tinderbox, which provides basic CSS layouts.
The web is flooded with poor clipart sites, so it's a pleasure to recommend Open Clipart – a community project with no animated banners or intrusive ads. The site includes open source fonts, but we'd be remiss not to point you towards BlamBot – a site with dozens of free comic book fonts that are excellent for over-the-top designs.
With dial-up well and truly confined to the rubbish bin of history, audio and video are valid content for any dynamic 21st century website, as long as you don't overdo it. Windows and Mac users have tools built into their operating systems that can take care of video production pretty well. Windows Movie Maker is an ideal tool for stitching together that YouTube epic, while iMovie does a similar job on the Mac.
There aren't many open source alternatives in this field – not on Windows and Mac platforms, anyway – but Linux users can learn to love Open Movie Editor, which looks and behaves very much like the now-defunct Avid Free DV.
Mac owners have the jump on Windows users when it comes to audio production, with Garageband among the free software included with the operating system. It's great for podcasting, assuming you have a Mac with a mic input (unlike the Mac Mini).
For the rest of us there's Audacity, a multi-track digital audio recording and editing program. Add MP3 encoding using LAME and you have the perfect production environment for audio on Windows, Mac and Linux.
When the material's produced, you'll need a way to stream it from your site. Let's be honest, professional audio and video streaming usually costs a lot of money and going down the free route involves a cut in quality.
YouTube is the obvious service when you need to embed video. Join as a director to take advantage of longer clip allocations and higher quality. Fancy streaming live video? The web has services for that too. Stickam and Ustream enable you to create your own live video channels, which can in turn be embedded into your own site.
There aren't many totally free solutions for audio, but one method we like is using the Internet Archive's audio repository. You have to make any content you add available for free under a Creative Commons licence, but that's the spirit of open source. When you've uploaded a file, you can link to it directly in a variety of formats or embed the archive's own Flash-powered player.
With content management systems, much of the site planning and management is taken care of for you. There's little fiddling about with FTP after initial installation, and content is placed directly into templates. If you have a PHP enabled server and a spare database ready to install the software, the only hardship is deciding which one to use.
PHP-Nuke and its progeny (Zikula and Plone) are beloved by some hardy acolytes, but our consistent favourite is Joomla. Branching off the community- based CMS Mambo, Joomla is a rare open source PHP script that's built to professional standards across the board, from front to back. The result is a modular CMS that provides developers with everything they need to build community driven websites.
If the benefits of a browser environment and live database appeal to you but you don't fancy setting up a script yourself, a hosted solution might be more appealing. Web logging sites such as www.blogger.com and www.livejournal.com offer free content management for personal sites. Blog software is basically a type of specialised CMS and you might be surprised at how flexible it can be.
However, it can't compete feature-for-feature with dedicated, server-side blogging tools. A PHP publishing system loved by Mac users, Movable Type supports features such as blog categories and is skinned using a simple CSS-powered template system.
We should also mention WordPress, which has similar features and is also entirely open source. Why choose something like WordPress or Movable Type over PHPNuke or Joomla? The answer is their relative simplicity. Blog-based sites are easier to configure, with fewer bells and whistles out of the box.
Next up is ecommerce. PayPal, eBay and Amazon all provide secure and stable shopping cart features to integrate into dynamic sites. There isn't much to set up and the code you insert into your page is cut and paste. They'll take a percentage of your cash, but that's true of any credit card gateway.
If you'd rather build an ecommerce presence from scratch, open source choices include OSCommerce and offshoot Zen Cart. Both enable you to integrate shopping features into a pre-existing site with editable templates.
Once you've got your site nailed, you may want to add some community with a message board, and phpBB is the default open source choice. It's mature, has strong security features and robust user management.
While it lacks some features found in commercial message boards such as vBulletin, it has a strong following and is widely used. An integrated message board system can be more than just a set of forums, though. Some sites use phpBB forums as rudimentary CMS, while others integrate them into blog engines to replace existing comment features.
If you want more than bulletin board services, consider SurgeMail. It supports Windows, Linux and Mac OS X and is reasonably easy to get up and running. There's a web-based interface, so users will have the security of accessing email directly through your site.
AWStats is a CGI script that takes the raw data in your log file, analyses it and presents the results in a series of glorious Technicolor charts and tables, starting with a summary of how many visitors you've had that month and how much bandwidth they used. Webalizer is another popular choice. A fully fledged server-side application, it generates statistics in chart and tabular form. Go to mrunix.net/webalizer to learn more.
Your site is nothing if it doesn't work properly, which is where a slew of testing tools come in. In fact, with accessibility legislation, they're essential. Cynthia Says evaluates your site against Web Content Accessibility Guidelines, now pole-position in the testing stakes since IBM bought out the famous Bobby Online suite and shut it down.
And to see how your site will render in different browsers and platforms, use free service Browser Shots. You can enter any URL and see screenshots of the results on Mac, Windows and Linux rendered in all the top browsers. It's terrific!
Finally, no test of site validity is complete without the Word Wide Web Consortium's suite of tools. Go to www.w3.org/QA/Tools for the full set.
First published in .net magazine, Issue 182