Tangential Musings

Want to learn how to design professional websites using only freely available open source tools? I thought it might be an interesting topic and if you share this interest please don’t hesitate to comment with what you’d like to learn about (this will help me determine whether or not it will be worth while to continue posting on this topic). I’m planning to write about XHTML, CSS, and graphic design (to a much lesser extent). I’d be willing to cover more advanced topics like JavaScript, PHP, and MySQL but would rather discuss the use of the JavaScript and PHP frameworks MooTools and CodeIgniter respectively. Just let me know.

So what do you need to setup shop? Well some basics tools might help. Right?

Preparation (this is easy!)
An operating system is a must but I’m assuming you have that covered since you’re able to read this. Most of the tools I’ll list below are cross-platform compatible so it doesn’t really matter if you’re running Linux, Mac OS X, or Windows XP/Vista. However, if you wish to stay true to the spirit of open source I suggest installing Ubuntu Linux.

Web Browser (used for testing and previewing websites)
Firefox 3. Sometimes a little slow, I’ll admit, but I’ve found no other web browser that serves my purposes better. So what’s the big deal? Install the following two Firefox add-ons and I’ll explain how they’re godsends at a later date: Web Developer by Chris Pederick and Firebug by Joe Hewitt

Graphics Software (for image manipulation and creation)
The GIMP. You’ll be using this to create website layouts and mockups, you can use it to slice up images for the Web with the following menu option: Filters —> Web —> Pyslice.

Inkscape. Some people prefer vector graphics (like me).  This program can be used to make logos, interface elements, clip art, buttons, etc.

Of course, if you don’t mind shelling out the big bucks you could get a copy of Photshop and/or Illustrator, but if your pockets are tight and you’re willing to learn, I can assure you’ll be amazed at what can be done with The GIMP and Inkscape (especially the latter).

Text Editor (used for editing XHTML and CSS files)
Honestly, there’s a myriad of excellent tools out there and everyone has their preference; in fact there’s some out there (again, like me) who prefer to use a combination of editors. My personal favorites are TextMate and BBEdit but they’re Mac-only and not free or open source.

Anyway, for the Linux junkies we got some good editors: Quanta Plus, SciTE, and Bluefish. Though I’m quite sure many of you will be more comfortable with emacs, pico/nano, vim, or even gedit (all great tools in their own right).

You Windows users can try notepad++ or if you don’t mind freeware give NoteTab a try.

What now?
Comment away. I need to get a feel for what people want to read about. I can do a whole introduction to XHTML and CSS or do design theory or practical hands-on stuff. Just be sure to leave a comment.

Share This