Friday, May 04, 2007

Project managment and timesheet accounting

I have used a few project management software packages ArtLogik, AceProject, and dotProject (open source) at my current job and a former job. At my current job, online project management did not last long. Since we are small company of under 10 employees that do not pass projects back and forth often, there is not a great need for the overhead of project management software.

Personal Timesheet

We use job folders that an archive copy of the project on DVD and time sheets go into. Before tallying the final time sheet that is printed from Excel, I use a personal time sheet that I write on. It is a seven column time sheet with the date, start and end times, a short description, the hours of the task, the comp number (only used for print projects), and a column to check if I have transferred the time to the final time sheet that goes into the job folder.

Final Time Sheet

The final time sheet that is archived with the digital copy of the project files is an Excel template. It has a place for the job number client and project in the heading. The way these three spreadsheet cells are set up that increases productivity is that one can complete the information for all three cells, copy them to the clipboard, and then paste them into the file name of the Excel file. Thus the filename will be .xls and Spotlighting (from OS-X) the correct files in the future will be easy.

After the heading, is a list of the tasks with their date, description and total time. Below the task hours that are billed are additional fees that can be charged such comp approvals, ftp approvals, pdf approvals, and DVD approvals. This is all where material costs would be listed. These section has five columns: the date, a description of there service, who the material was sent to, how it was sent, and who said to send it. This level of description allows for a paper trail of who did what and when.

I hope that these thoughts and files help you in your project management. How do you do project management in your business? Do you use a paper trail? Track it all online?

-Stephen M. James

You may view the latest post at

Tuesday, May 01, 2007

Make coding easier: CSS, HTML, Javascript

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web's infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it's "Outline Block Level Elements." The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

  • Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
  • Disable images
  • View the CSS for a particular element by clicking on that element
  • Disable cache and cookies
  • Display various page and screen sizes for testing (what does this site look like on an 800×600?)
  • Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
  • View the CSS for a web page while browsing
  • Edit the CSS style sheet of web page without reloading
  • Validate HTML, CSS, feeds, and links


I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn't have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the "Inspect" button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a "Layout" tab that allow editing of these qualities and shows their relationships.

Link Checker

If you've ever clicked through a large site in order to test all the hyperlinks, you'll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you'll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.


ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don't have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

-Stephen M. James

You may view the latest post at