Building Web Sites for Profit and Fun – Tools of the Trade

Every trade has it’s tools and web development is no exception. It has quite a few in fact. Throughout the years of doing web development I have used many different tools and have settled on a core group of half a dozen or so. It is definitely worth your while examining those I recommend, and possible a few that will receive honorable mention here. While it’s true that tools don’t make talent, they certainly speed it along!

In the realm of Web development, there are four general categories of tools you will need to have at your disposal. The first, and I think the funnest, is graphics.

Graphics

Photoshop – If you have dealt with graphics at all, you have heard of photoshop. Everyone uses it. Everyone loves it. There are tons and tons of tutorials online for photoshop. There are also tons and tons of downloads for it like plugins and brushes. If you can afford it, buy it and skip to the next section. Can’t afford it? Try ebay or craigslist for an older copy. Still can’t? Read on.
Paint Shop Pro – This is where I first started when I began messing around with graphics. It’s a fun program, but at the time, lacked the depth and breadth that photoshop has. That may have changed, I don’t know, but another thing to consider is the amount of tutorials for photoshop as opposed to paint shop pro. Also the amount of tools, brushes, vector graphics and such. But paint shop pro is a might bit cheaper, so if you have the money, but not enough for an old copy of photoshop, here is a good place to start.

The Gimp – For the truly poor and those who wish to “stick it to the ‘man'”, there is, as always, the free and open source version. The Gimp, when I first used it, was as annoying to work with as it was awkward to learn. To be fair, I ran across it after I was well into my Photoshop 7 days, so it didn’t stand much of a chance. Also, the open source community has come a long way since then and in general they have become MUCH more user friendly. The Gimp is worth giving a day in court for those who can’t do one of the other two options.

Code editors

Visual Studio 2008 – The main feature I like about Visual Studio 2008 is intellisense, Microsoft’s intelligent guess-what-you-are-typing feature. It is actually remarkably helpful since it can be tough remembering all the exact syntax for all HTML, CSS, and javascript. At the time I started using it, no other product had that, though I am sure someone somewhere has picked it up. Another reason I use it is because I do C# and Windows development as well and so for the sake of space and tools consolidation, I use it for my html and CSS design too. However, it carries a HEFTY price tag (Bill Gates needs his money) and so I generally do not recommend it unless you REALLY need it. You are probably better off saving the money and going with one of the cheaper options below.

Dreamweaver – Ah, Adobe’s Dreamweaver… This I would definitely recommend and it’s what I used before I started doing Windows development as well. Definitely worth the money Adobe asks for it (which isn’t much, really). It has great features, solid design, and easy to learn. I loved it. And now, with the recent flash integrations they put in, I find myself using it for some of my fast-dirty flash tasks too, particularly video integration. Always very solid, like everything Adobe.

XSite Pro – This one really surprised me when I first tried it out. I thought it would be fairly novice oriented, and it is, and that I would have no use for it. Come to find out, it does a lot of the SEO things and mundane linking, sitemaps, and things that I would rather not waste my time on. It’s great for doing small sites fast! Recently, our company has started offering 5 page sites for $500 and they have become quite popular. Well, since I don’t do crap work, even a 5 page site once I design the look and feel, create the template, generate keywords for all the pages, etc takes a day or two at least, if I can JUST work on that one project. Once I got this program, I whipped out three such sites in an afternoon. Paid for itself right there. So if you don’t like to stress the mundane parts of building small sites, get this.

Notepad! – Believe it or not, for FAST quick changes, nothing beats notepad to date. When you just need to change something simple and stupid, notepad it! I guess vi would be the unix commandline equivalent. I use both regularly. Sometimes simplicity and speed beats the fancy features.

Frontpage – I mention frontpage here not as a recommendation, but as a warning. USE NOT FRONTPAGE! Why?

1. Microsoft discontinued it.
2. They did so because it is more of a pain than it’s worth.
   • Frontpage extensions fail OFTEN.
   • Frontpage uses syntax that, often times, are ONLY compatible with Internet Explorer (doesn’t that sound like Microsoft?)
   • It’s not nearly as good as Dreamweaver and is not much different in price

Microsoft has come out with Web Expressions as Frontpage’s successor, and honestly, I haven’t messed with it much. Maybe someone who has can let us know if it is any good, but in my opinion, Microsoft really dropped the ball with Frontpage. Avoid it.

Test Server

In order to really do development, you must have a test server to play with. No two ways about it. Don’t cry because you looked at the prices of dedicated servers around the net, you don’t have to be THAT fancy. There are other options.

Your Own Home Server – This is how I started out. Take that old P3 you have stashed in the closet, you know… the one you have been holding onto cause you just KNOW it will come in handy sometime… well it’s day has come! Throw a flavor of linux on it (I prefer CentOS since it better mimics most real-world server environments), setup apache, php, and mysql and BAM! You have a test server!

Get a Cheap VPS – Setting up your server sound too hard? Or maybe you need to develop for several flavors of linux or even windows and don’t want to setup multiple test boxes each time you need to switch? VPS (Virtual Private Servers) are dirt cheap these days. For the price, it’s worth grabbing one or two.

Free Hosting Accounts – Certainly not ideal, but workable, are free web hosting accounts. Usually they aggregate headers and/or footers, but what the heck, it’s free! And if you are just starting out, it can be a way to cut some costs while you pound out a few sites.

Browsers

Unlike the other categories, this one you will need ALL of the below items at least. And also unlike the other categories, all these are free. It is essential in this day and age to be cross-browser compatible in your coding. To be sure you are, you will need … the browsers that will render your code… at least the most popular ones.

Internet Explorer – Unfortunately, you can’t ignore the fact that most of your viewers will probably be using IE. Get it. If only to check compatibility with it. IE has some quirks about some of the newer XHTML syntaxes so it really needs to be looked at before going live on a site.

Firefox – Firefox has some quirks to how it displays certain things as well, so don’t pass it up either. Also, there are some EXCELLENT firefox plugins that in invaluable when debugging javascript, cookies, and CSS. Get it, download the Web Developer Toolbar, the Google toolbar, the StumbleUpon toolbar (for Marketing [trust me, it works]), and firebug at least. They will save you tons of time and headache once you start getting into the fine points of web development.

Google Chrome – Honestly, I haven’t yet found an instance where a site displays well in firefox and IE and NOT in chrome. However, that’s not to say that it won’t. Chrome is built of the same engine as Safari, the main Macintosh browser. Mostly though, I have it for the speed. It’s faster than IE and firefox at blunt browsing. Check it out.

Optionally, Flash

Flash is increasingly becoming important in the realm of web development. It’s a great tool and should be used when it can enhance the site. There are really only two tools that come to mind for flash.

Adobe Flash – This is what I use and what I recommend, provided again that you can afford the price tag. It’s fairly simple to use, very powerful and flexible, and there are, again, TONS of online resources available to help you out along the way.

Swish Animation – Swish does quite a few things fast and dirty. It started out as more of a “do a few canned things fast” piece of software and from there evolved. So it does certain things that would take a while to do in Flash quickly. The down side is that, last I checked, the two weren’t compatible at all. You stick with one. But if Swish will do what you need, check it out.

Well, that is about it for the main tools of the trade for a web developer. Now, armed with the right tools, you can start tinkering around with concepts and ideas. The more you do so, the better you will get. The world is never going to run out of the demand for developers, so keep at it!