<!-- Guides & Articles

1  2   Next Page 

Tools of the Trade

This page rounds up an assortment of coding, programming, and formatting applications that are most commonly used in cross-platform development. All of these applications are free, open-source, and run on Windows, Mac, and Linux operating systems. Odds are, if you can browse to this page, that you can download and install any or all of the software packages mentioned on this page, and it would cost you nothing. Actually, it is a common misconception that development tools for web design and development (and, in fact, any software development) must be expensive. The best tools for the programming/coding aspects of web design and development are free, and, moreover, cross-platform. The reason for this is logical, although possibly a bit involved, so if you just want to get to the free software recommendations, you can skip the following paragraph.

Commercial software packages normally rely on proprietary languages, that is, non-open-standards programming languages, so that their implementations (the way the language statements are converted to actions) stay closed-sourced. However, if you look at the landscape today, you'll see that the vast majority of the standards and languages that drive the web are made up of open standards and open-source implementations. For documents, you have W3C standards such as HTML/XHTML, CSS, XML, DOM, and XSL (and many more). Scripting/Parsed languages are made up of JavaScript (or ECMAScript/ECMA-262, strictly speaking), which is the de-facto client-side scripting language for the browser, Perl, PHP, Python, and several others (lately the Ruby + Ruby-on-Rails Framework), all of which are open standards, and all of which have open-source implementations (Technically speaking, these languages could be implemented in a closed-sourced environment, and JavaScript in particular has several of those, but the relevancy of that is diminished when compared to the fact that there are multiple open-source implementations of it).
How does this make for better open-source development tools? Well, if the designer of the development tool or environment has access to the full specification of a language, that's a big piece of the puzzle. However, if that developer has access to both the complete standard, and the full implementation of the language, that enables them to design a development environment that is completely aware of what the user is coding, in real-time. If that's not enough, unlike a commercial software package, where there's a limited amount of programmers/developers working on the 'product', an open-source project will usually have a continuing stream fresh eyes looking over it, and with them, new ideas and perspectives. It's no coincidence that the leading infrastructures online are driven by open-source programs: the Apache web server, the MySQL database, along with the above mentioned languages, which usually run on Linux or FreeBSD web servers. So why rely on expensive, closed-sourced, platform-locked software to develop all of that free, open-source code?

The Goods

Here are several of the leading programs for web design and development. Actually, several of them are general-purpose coding IDEs (Integrated Development Environments), which you can customize to code many languages and formats. All of these programs are cross-platform, which means they'll run on Windows, Mac, and Linux, all of them are open-source, and free.

Note: Please read through all of the suggested programs before choosing which route to take. There's no harm in trying them all (except for some hard drive space...), but you may want to try some before others.

Eclipse

Eclipse is probably the most powerful, flexible, diverse, extensible, and evolved IDE in the Open Source realm. So why isn't it the only one on the list? Well, it's easy enough to setup if you want to use it for Java (in which, by the way, it's written), or C/C++, but getting it to act as an IDE for client-side web development, well, let's just say it's not just click-and-go... Before I elaborate, I should mention that it's definitely worth the effort, because if you get a handle on it, you'll have an IDE that's growing at a phenomenal rate, is feature-rich beyond almost any IDE in development today, is inherently an excellent Java IDE (arguably the best one), and also has a mature PHP module that you'll be able to plug right into your workflow (Perl and Python modules are in development stages). I'll give a short overview of the abstract structure of what you'll need, and then a quick how-to guide to getting the environment up and running.
The Eclipse project is the basis for numerous other projects that plug into the IDE. One of these projects is the Web Tools Platform Project. This project contains within it the Web Standard Tools subproject, which is actually what you're going to be aiming at for the moment. It includes support for languages and specifications like HTML, CSS, JavaScript, XML, XSD, XSLT, SQL, and more. Downloading and installing Eclipse as the initial Java IDE is the first step. Getting that IDE to work using the Web Standard Tools components is the end goal. Getting from A to B may be tricky, so here's a step-by-step quick setup guide to get you there:

Setting up Eclipse as a Web Development IDE

If you go to the Eclipse home page, you'll be greeted with an explosion of information which won't be too relevant initially. Luckily, there's a big 'Download Eclipse' button plainly visible as well -- click it. You're now faced with the option to either download the SDK version, or to download a 'distro' (yes, like a Linux distro). At the time of this writing, there's really no reason to look into any of the distros, you can get what you need from within the base SDK download. Download and install it. At this point, you have a ready-to-go Java IDE.


It should now look similar to most IDEs you've seen in the past. You add files to the project (it will recognize syntax on .html, .css, and .js as the main file types, as well as several other file types) and it will display relevant information about the type of language it recognizes on the various panels. There are many tips from this point onward that would help you move along, but it's mostly intuitive. One thing that isn't, is the Ctrl + Spacebar shortcut, which is the autocomplete command. Evoking it anywhere around the page, even on an empty line, will display a list of possible statements for that area, and can save quite a bit of coding time.


1  2   Next Page