.


web tutorials


How we designed this site

First steps: domain name selection, host selection

We actually checked out dozens of domain names, using IntuitiveISP to register apacheuser.com, then realizing we did not want someone else's trademark in our site name (and also that we wanted to focus on things other than apache). In the end, we took weborial, a shortened version of web tutorial, understanding that we run the risk of slime taking similar names in the hope of user confusion. A more business oriented move would have been to also take webtorial and weborials.

Next, we started a new account with Dreamhost, based on the recommendation of a few people in an unrelated forum that was unlikely to have been "spiked" by Dreamhost staff. The price is right, and we do plan to have other domain names hosted here. We do have a dedicated server, but we wanted to separate a few sites from it for various reasons.

More technical: designing the site looks and architecture

We always opt for two technologies (click here for more on web site technologies):

Server Side Includes. This is a long way of saying that the server grabs a file and inserts it into another file as it sends them out to a browser. We use server side includes mainly for standard headers and footers, calling them with the language <!--#include virtual="/top.html" --> (where top.html is the name of the header file). We have no idea why no graphical web design software lets us do this graphically, but we have to do it in source, either typing or pasting in that line. The main advantage of this is that anything that affects every page in the site can be placed into separate files; it makes administration much easier, since the top.html contains the main forum graphic, menu (not that we have one yet), and advertising. Yes, we could also use templates or some such, but then we'd have to consistently use one web design program, instead of sometimes using BBEdit, sometimes using nVu, etc., and when we made changes, we'd have to upload every file again. That gets annoying once you go over a few hundred files. The disadvantage of server side includes is their slightly higher drag on the server. 

In the past, we've modified htaccess files or the main Apache configuration file to allow files to have server-side includes, but this time, we decided to just go the easy route and name every file .shtml instead of .html. But a single line pasted in .htaccess or apache.conf (httpd.conf) will let you use SSI in .html files, too. 

CSS. Cascading style sheets provide a lot of formatting with very little work. Our SSI modifications are minor, but the key things we did were changing the look of the standard h1 and h2 tags, and adding a sidebar and box style. Actually, we stole these stylesheets from our Toyota car site, assuming that shared viewership would be minimal. We also used a simple CSS setup for the clever left-hand-column menu, which eliminates a bunch of Javascript, enhancing download and rendering speed.

The main home page used to be set up as a table, since CSS is still a bit tricky for looks like that - yes, some people do it, but at the moment, simple tables are easier to deal with and don't have much of a penalty. The table has a single row and five columns, two of which contain just a period to make sure they will stay colored dark green. The logo was done in an image editor using a slight shadow and standard embossing.  If you aren't a student and you don't have $400 for Photoshop, try GIMP. It's free on Macs, Windows, and, of course, Linux.

(Update: the home page is now set up in CSS, since we went down to two columns. While CSS is a bit tricky for three columns, it works fine for two!).

Appearance

We've discovered that green is considered to be a hostile color and, indeed, when we switched from green to blue on one site, viewership immediately rose! So we recommend against using green.