Next to your skill set, the most important thing about developing for the web is the tools you surround yourself with. Speed is often the name of the game. The tools you select (and how well you are able to work with the tools) can make you a better web developer.
Slicing up a Design
The typical answer to anything graphics in the 21st century is Adobe Photoshop. Photoshop, however, is not always the simplest solution for a developer to take a design into production. Adobe’s Fireworks is the simplest choice for slicing up website designs. The Slicing function allows you to quickly slice your design into chucks and export the images to many file types such as jpg, gifs and pngs.
In many situations forking over an arm and a leg for Fireworks is out of the question, try GIMP 1.1(Unix/Mac/Windows). The latest version features an updated interface that tries to rival Photoshop. While it is not a replacement for Fireworks or Photoshop, it allows those on a budget to manipulate images easier that Microsoft’s Paint program.
Figure 1.1 The Gimp Interface
A quick note about file types: I always opt for the highest quality jpg for photo images, or images with lots of color on the web. JPGs require little thought about file size, since they are usually small and keep your site running at warp speed. If your site requires a transparent image, try to stick to transparent GIFs because a transparent PNG will show up strangely on Internet Explorer 6 (which unfortunately, still dominates a large share of the internet browser market share). PNG images may be necessary for some effects you are trying to achieve, and there is complex work around to get them to work in IE6. GIF images can be great for images with few colors, especially for website backgrounds.
Coding
|
There are dozens of programs that make the task of coding HTML easier. The program I use is called Aptana Studio (Windows/Mac) and the best part is that it’s free! The program helps speed up coding by auto completing the ending tag once you start typing it in. CSS is also made easy by
|
Figure 1.2 Aptana
|
|
adding closing brackets, drop down windows for which property or value you would like to insert. The program also shows you which properties are compatible for which browser. Aptana thinks, so you don’t have to. An alternative is Adobe’s Dreamweaver (Windows/Mac). Dreamweaver is a WYSIWYG (What-You-See-Is-What-You-Get) editor that allows you to create a page with little knowledge of website design and coding. While it allows you to edit the code by hand, you can insert and edit properties without the know-how. It has three separate viewing possibilities. Design, Split, and Code views allow you to edit using the WYSIWYG editor, a split mode with the WYSIWYG editor and the code, or just the code. I highly recommend the Split or Code views. Learning what each section of code looks like will help speed up coding and implementing a design.
|
Uploading Files
Filezilla is a free program for Windows users that also will upload/download till your heart is content. The only downside to Filezilla is that it lacks the ability to duplicate files on your server (but it’s free, so who can complain?).
Cyberduck is a free FTP program for Mac users that allows you to upload, download, and overwrite files. Don’t forget to use the Bookmarks to help quickly load your FTP servers.
Browser Tools
For Firefox, the Firebug (Mac/Windows) addon is a must-have. It allows you to right-click any element and inspect the CSS, HTML, or Javascript. 
Figure 1.3 FireBug
Firebug also allows you to “edit” the site by adding and removing CSS properties and classes. The live update on the page helps you determine what properties and code is needed to make a site look the way you want.
Another important tool is to have as many browsers as possible at your fingertips. Since IE6 is impossible to install with IE7, you can download an IE6 standalone. It will allow you to use the Developer Toolbar, which is the IE7/IE6 version of Firebug.
A note about browsers: While a good part of the world is up-to-date with the latest version of their favorite browser, some resist the upgrade. IE6 is horrendous to code for, but a necessary challenge. About 25% of web users are still lingering in the good ‘ol days.
Color and Image Management
ColorMania (Windows) allows you to select a color on your screen and get the HEX value (HTML compatible color). It also allows you to darken and lighten the color. This makes creating hyperlinks hover, darkening backgrounds, and changing colors quick and painless.
Cropper (Windows) is a utility that allows you to create a box on your screen and snag a photo of anything on it. It’s a screen capturing tool. You can select Cropper to output to the clipboard, a PNG, or JPG, and a few other file types.
On a Mac, you have a built in screen capturing tool. Pressing Apple-Shift-4 allows you to select a part of the screen and save the file to the desktop. Apple-Shift-3 will take a picture of the entire screen and save it to the desktop. Also, using the built in DigitalColor Meter (found in Applications/Utilities) and selecting the “RGB As Hex Value, 8-bit” will allow you to snag the Hex Value of anything on your screen.
Bottom Line
There are hundreds of solutions and productivity tools that a web developer can use. The examples above are just a sampling of the tools I use every day to make my job easier. If you have a tool you would like to share, please leave a comment.