 |
|
 |
The initial reason for wanting a to set up a website was that I'm learning java at the moment and I wanted to put some applets on the web, I had mailed them round to some friends but frequently they got screwed up by the various mailers we all use. Also I wondered how I would fair running a site. The following I hope will be a diary of this attempt to run a small(<20MB) website offering some professional and non serious information.
I tried to set out my requirements
This webspace is provided by Demon Internet so the first thing I did was to check out their FAQ and any Tutorials they had, also worth a read is their "Acceptable Use Policy.
The first item I approached was to have a consistent look and feel
so I designed a basic page template which looked like this
|
|
|
|
|
The main text area with graphics and text |
|
|
At work I had a Compaq AP400 Professional Workstation running NT4, with Netscape Communicator Professional Edition, and Hummingbird's Exceed to X onto a Sun Microsystems Ultra 2 running Solaris 2.6. I also used Exceed 'ftp' program to transfer files between my desk top and the Sun host. At home I had a Macintosh Performa 6200 using Lotus Mail I could mail a tarred up version of the website home to work there, this could be unpacked with StuffIt and downloaded on the Demon webserver with Anarchie Pro. I use Netscape's Composer to do the page layout and 'vi' the UNIX text editor and Macintosh's SimpleText to do the final tidy up of the web pages.
The Filesystem Layout
Before I could create any files I wanted to plan the underlying structure
of the website. The entry point would be www.outlands.demon.co.uk.
There I would have my main index.html file. Underneath that directory I
decided on the following directories
The above was an arbitrary decision, I could have kept everything in one flat
directory. These were all created on a UNIX box I had access to.
This is composed of four basic components the title bar, the menu bar the page and the footer bar
The Title Bar
This provided me with the first problem, should I use my company name,
or my own personal name 'John's Web Pages', in a way I wanted to maintain
a certain amount of anonymity, and at the same time I wanted to provide
some identity to the site. I eventually decided to call the site after
my dog Murphy and use her image to give the site a theme. I thought I could
write a game applet that included her and I thought it would be quite amusing
to set her up with an e-mail address and see if she got any mail.
Once I had decided on this approach a search on the web found
www.cooltext.com and a means of
generating a title bar. A quick play around and I'd generated the jpeg
image you see at the top of this page.
In addition I'd set a couple of site standards
Also while editing this page I needed to look up HTML tags I used the
willcam site
which I found pretty useful.
The Menu Bar
The Footer Bar
I find the easiest way to do links to other pages is with a clean
text editor such as vi or SimpleText, the syntax of the link is relatively
straight forward
All graphics text would be in
GoudyOldStyle using the Chrome 1 style at Cooltext.
The main label background colour would be
#FFFFCC.
I wouldn't use FRAMES on the site - I hate them
I would use a standard font - Arial
I created the title bar in Composer creating a one column one row
table with the site identifier logo in it. See the
title.html page. The
important bit is
< CENTER > < TABLE COLS=1 WIDTH="100%" BGCOLOR="#FFFFCC" >
< TR >
< TD > < CENTER > < IMG SRC="../images/murphyswebpages50.jpg" > < CENTER > < TD >
< TR >
< TABLE > < CENTER >
This would go at the top of every page on this site.
The next part was a menu bar, I could have constructed a fancy clickable
gif but initially I wanted something fairly simple that would load fast.
I think the average net browser has the attention span of a goldfish so
if a page takes too long to load they just surf off somewhere else.
Again using Composer I created a one row five column table I decided to
create another style to indicate a menu or an action so it was back to
www.cooltext.com to create the
'Go...' jpeg using the same font as before but with a red background
(#FF0000). In the other colums I put the various locations I
envisaged I would have at the site. See the
navigation_bar.html
page. The important bit is
< CENTER > < TABLE COLS=6 WIDTH="100%" HEIGHT="30" BGCOLOR="#FFFFCC" >
< TR >
< TD > < IMG SRC="../images/go24.jpg" > < TD >
< TD > < FONT FACE="Arial,Helvetica" > < FONT SIZE=-2 > < CENTER > MurphyHome < CENTER > < FONT > < FONT > < TD >
< TD > < FONT FACE="Arial,Helvetica" > < FONT SIZE=-2 > < CENTER > MurphySoft < CENTER > < FONT > < FONT > < TD >
< TD > < FONT FACE="Arial,Helvetica" > < FONT SIZE=-2 > < CENTER > Ambient (UK) Ltd < CENTER > < FONT > < FONT > < TD >
< TD > < FONT FACE="Arial,Helvetica" > < FONT SIZE=-2 > < CENTER > Sybase Information < CENTER > < FONT > < FONT > < TD >
< TD > < FONT FACE="Arial,Helvetica" > < FONT SIZE=-2 > < CENTER > About this Site< CENTER > < FONT > < FONT > < TD >
< TR >
< TABLE >< CENTER >
This I thought would be the most volatile part of the page as I added
new pages I would need to change the menu, I could if necessary expand
it to a two row table.
Now the final component was the footer where I wanted to put the mail
tag and other info, using the same approach and with a trip back to
www.cooltext.com for another jpeg
following the same style as the 'Go...' part of the navigation bar. See
the footer_bar.htmll page.
The important bit is
< HR WIDTH="100%" >
< CENTER >< TABLE COLS=5 WIDTH="100%" HEIGHT="30" BGCOLOR="#FFFFCC" >
< TR >
< TD >< IMG SRC="../images/siteinfo24.jpg" >< /TD >
< TD >< FONT FACE="Arial,Helvetica" >< FONT SIZE=-2 >< CENTER >Copyright< /CENTER >< /FONT >< /FONT >< /TD >
< TD >< FONT FACE="Arial,Helvetica" >< FONT SIZE=-2 >< CENTER >Terms Of Use< /CENTER > < /FONT > < /FONT > < /TD >
< TD >< FONT FACE="Arial,Helvetica" >< FONT SIZE=-2 >< CENTER >Contact us< /CENTER >< /FONT > < /FONT >< /TD >
< TD >< FONT FACE="Arial,Helvetica" >< FONT SIZE=-2 >< CENTER >MurphyHome< /CENTER >< /FONT >< /FONT >< /TD >
< /TR >
< /TABLE >< /CENTER >
< HR WIDTH="100%" >
Putting all of the above together I created my template page
template_page01.html.
You will note there are no links other than image links defined yet.
Populating the Website
I would have to create the following files by copying my template_page.html
file into each of the following locations.
I then delete the link for each page in itself and edit the < TITLE > in the header and set that to a meaningful description as this appears in the title bar of the browser.
In the top level index.html file I need to change the link paths to ./ instead of ../
I'm putting an index.html file in every directory to prevent people viewing the directory contents with a browser.
I also noted while swapping between editing in vi and Composer it would
re-write my links I guess this is configurable in 'Preferences' but I
decided to keep the whole process simple by creating initial layout
in Composer and then use a text editor for the final part, I would not
put the file through Composer after I had got it the way I wanted it.
At various points through this document I'm going to work out how long I spent on the last task and keep a running total
 |
Adding Content
The first page I wrote was this one, I downloaded a couple of gifs from free-graphics.com Then I wrote the main index.html, then I wrote it again, I'll get an image of Murphy done this weekend on my Macintosh. I then loaded the applets and wrote that page I needed to get some gifs from Cooltext.com for them. I then gave the whole thing a quick functionality check and printed a page out to make sure it appeared OK as hardcopy.
|
I started to think about the other type of pages I need, I think I need
a page that is a 'dead end', I would use this for things like the
Copyright, Terms Of Use and Advertisements page. This would consist
of the header and footer bar as before but the menu bar would be
replaced with just one link 'Back' to return the user to the last
page. See the page
template_back.html. This will return the user to the index
page in that directory. At the same time I thought I would add an
'Advertisements' link to the footer bar.
I wrote the Advertisements, Copyright and Terms Of Use pages, well
actually I stole the last two! The adverts took quite a while
downloading logos, and looking up links.
I also added the first line to this file providing links within this
page I decided that this would be a feature of all larger pages on the
site. Again I added these with a text editor. The syntax for this is
This turned out to be a bad idea!, The page has no concept of where
back is, just pressing 'Back' would pop me back to the index.html
file where the 'dead end' page is. I thought I would leave all of
this up to the browser and take the navigation bar out of the
page. See the new page
template_back01.html.
I added a todo.html, mainly for my own use, so I could keep a list of jobs I needed to do to the site.
|
I was now thinking about publishing what I had up to now I had only run the website on a local box. I didn't want to register it with any of the search engines just yet, and I was quite curious if the site would get hit at all, either by people at Demon or some random hit from the net. I put one of Demon's counter scripts on the very bottom of the main index page. I padded this out of view of a browser window with the < BR > tag.
I decided to publish the site on the weekend of the 15th May 1999, I could continue to work on my local site to tidy up some odd bits and get some more content in the site during the following week. The following weekend I would delete the site and copy over the latest version. I decided this was the best strategy at this stage to ensure that redundant files didn't creep into the directory structure. I was also aware that I didn't really have any decent photos of Murphy to scan in.
I wanted to give the site a test from a number of environments ensuring that the look and feel wasn't compromised by inconsistent browser behaviour. I could test Netscape 4.04 and IE 4.0 on my local website, at home I could check against Netscape 3, in particular I was keen to establish that the Java VM in Netscape 3 could run the applets I wrote.
The final thing I wanted to ascertain was the speed of the site for a home user, say over a modem, inparticular I wanted to see how the jpegs on the site index page loaded.
After a couple of days to think about this I realized that this dog thing was a bit naff, the latest idea is to go with my domain name as the title bar, I would also re-do the menu bar. See the new title.html
I also re-wrote the navigation bar template and cut and pasted this into all the files. See the new navigation_bar01.html
At this point I reconstructed the templates page from the above files and added a table border which I felt I preferred. See the new template_page02.html
|
I was getting a bit impatient so I published what I had, mainly to check out the applets. I published it for the first time on Sunday 23rd May. By the end of Monday afternoon I'd noted 5 hits to the site, all accounted for by myself so at least no-one else was looking at this rather sparse, partially finnished site.
I'd also found a site that had some good tips regarding building a website http://www.hooked.net/~larrylin/ this suggested adding HEIGHT and WIDTH attributes to all IMAGE tags. Also he suggests considering text only browsers by using the ALT tag and use the full e-mail address for people not able to use browser mail. I also found out here that you could get your site proofread, which might be interesting.
The rest of this week I'm basically adding content, the Sybase interfaces file stuff, tarting up the utilities pages to give them a consistent look and feel reworking the main index page and the business related areas. I guess by next week I may let some people check the thing out - gulp! The interfaces file document took some time as did finalizing my CV, hence the rather long time for this section
I read an interesting net-document on copyright, and some of the myths surrounding it.
The Euston restaurant review was added at this time, this didn't take too long as most of the info was in my head.
|
Having published the site I found I couldn't access the applets via a netscape browser on my Macintosh at home, I phoned my mate who also had a mac and would be running at the latest version, he couldn't access it. I tried from work on Monday morning(via Netscape), still no go, I then tried IE4.0 that worked fine. I phoned another mate at work, he couldn't access it - tho' we figured out his site disable java for their standard desktop.
Later I had reason to re-boot my PC and I thought I'd try again, to my utter amazement they worked with Netscape. I thought I'd better test all browsers against all operating systems to see if I could get a feel for the problem.
My main stumbling block was on the Mac, the applets would work via the appletviewer but not via the browser. Also if the applets failed to load the messages weren't exactly useful. I decided I'd have to put some information in to help people, and gather some feedback. In all I tested via Netscape 4.04, IE4, Hotjava on NT and Solaris.
I'd e-mailed Ed Barlow to ask him to checkout the site, Ed runs a website of Sybase resources, he put a link to this site in his documentation section and I started to get some hits, a few other people knew about the site so that might account for some of them. I now had to start to think about registering the site with some search engines.
Shortly after completing the above my contract came to an end and I had some time off and then returned to work. Things have been quite hectic and I haven't had a chance to update anything. The only thing I've really done is get some links to the site from other recognized sites. So far I've got links from Rob Verschoor, Ed Barlow and the Sybase FAQ with thanks to David Owen.
 |