Design
My design process wasn't particularly organized, my first thought was that I wanted the color scheme to be based on blues and grays, simple and pleasing to look at. I wanted a modular design with the title of the site and page at the top, with the navigation, content and footer in separate boxes, similar to my course web site. I used Verdana and other sans-serif fonts because I find them easiest to read, and I figured that would be good for a tutorial. With that in mind, I just started writing CSS that seemed to fit my criteria.
I did not change the design drastically for the final project. The colors are still the same, as is the font. I did, however, decide that the site would look better centered and with borders on the left and right of each section in addition to the original ones on the top and bottom. I also applied a gradient image to the background and I think that makes it look a lot snazzier. Finally, I reorganized the footer so that it looks cleaner, and I also incorporated my recently designed logo in it.
Organization of Information
The way I organized my pages were in order of complexity, starting with very basic Unix concepts and ending with some more complex stuff. This method, of course, lends itself well to a tutorial, as the user can go from one page to the next building upon what they've learned so far.
The pages are still organized in the same way, however, I created a deeper directory structure in order to facilitate the use of breadcrumb navigation.
Content
My content is more or less the entire extent of my knowlege of Unix commands. This is what I think is necessary and useful and then some when applied to web development. I would have used the terminal on my MacBook Pro to take screenshots and demonstrate commands, but that was stolen and we're in the process of replacing it, so I used Putty on my desktop instead.
The content has undergone minimal changes. I really only added a few screenshots to the Misc. Commands page.
Navigation
I knew I wanted to do drop-down menus for my main navigation, it seemed to make sense, what with the different categories of commands, and then specific concepts and commands under them. Unfortunately, this drop-down menu doesn't work in IE, yet, I intend to fix that, but for now, there are still ways to get to every page relatively intuitively for users who cannot see the drop-downs. That brings us to the previous, next and home buttons at the bottom, they're there to excentuate the linear nature of the tutorial: one page after another. The user can go through the whole site this way, or go to more specific pages with the main navigation. I didn't see the need for bread crumbs because the site isn't very complex.
Sometimes I change my mind. I reworked the directory structure and implemented dynamic breadcrumb navigation with javascript. The main navigation works exactly the same, as do the bottom navigation buttons.
Final Project Requirements
"Using a few of the technologies we've covered in the second half of the course (javascript, dhtml, PHP, etc.), re-create and redesign your original individual midterm Web site. Demonstrate your increased skills in more than one area covered in the second half of the course (javascript, dhtml, PHP, etc.)."
In order to accomplish these goals, I have used Javascript to create dynamic breadcrumb navigation. I also implemented server side includes to display the navigation and footer on each page.
