For those curious about the nuts and bolts of putting a web site like this together, I put together the following explanation.
Site OrganizationBasically, the site consists of collections of articles and some index pages. I keep a (hopefully exact) copy of the website on the laptop's hard drive. As I finish an article, I copy it from my working directory to the correct place in the on-disk website. I then modify the various index pages to include the new article, so that I end up with a complete version of the updated website on disk.
articles index.htm article-1 index.htm images thumbs slides ... article-NEach article is a self-contained directory tree which can be copied around as a unit. This is theoretically inefficient in that articles may not share images (without arranging some independent location for them) but for my purposes the extra space is a reasonable price to pay for ease of management. As a practical matter, the current website weighs in at about 60 Mb and my basic web hosting agreement provides for 250 Mb so disk space is not a concern. And, articles don't share that many images anyway.
The index pages do reference images (thumbnails) from the articles but as I won't need to delete articles for another couple years (at the current rate of site growth), I don't have concerns about keeping the links up to date.
HTMLI would love to use some nifty wysiwyg-ish sort of editor to write HTML but every one I try (most recently the one with Star Office) produces HTML which is so baroque, so spectacularly disfunctional, that I always fall back on hand editing HTML with vi (a text editor). I'll usually have a browser up on the page I'm working on so that I can check formatting as I go. Also, wysiwyg editors usually manage to make it difficult to incorporate generated HTML code with the result that things like incorporating images become an incredibly time consuming series of identical dialog interactions.
The html necessary for the formatting I use is usually pretty small and simple relative to the content, the notable exception being images, for which I have a perl script. The (desirable) net effect is that I spend very little time on the web site doing anything other than writing and editing pictures.
I aim for HTML 3.2 compliance, but I don't make a religion out of it.
If Explorer and Netscape both render it correctly, it is good enough for
me. Things like
To get colors, I either fiddle directly with RGB values or use the Photoshop color picker if I can't home in on what I want with RGB.
Side BarsA side bar is just a right-aligned table with a single cell:
<table cellpadding="15%" width="40%" align="right"><tr><td bgcolor="#80FCFF"> <center> <h4>side bar title</h4> </center> ... </td></tr></table>You need to specify a percentage width in order to get predictable layout results.
Floating Images RightAs a general rule, I float images out to the right margin with an
Anytime I have a bunch of images close together, I use a table to hold the images and float the table to the right margin:
<table align="right"> <tr> <td> <a href="..." ><img src="..." ... ></a> </td> </tr> <tr> <td> <a href="..." ><img src="..." ... ></a> </td> </tr> <tr> <td> <a href="..." ><img src="..." ... ></a> </td> </tr> </table>This keeps the browser from jumbling the images on top of each other.
Page LayoutThe page layout that gives the site most of its "look and feel" is just a table with one row and two cells, one for the "margin" which contains the navigation index and one for the page contents.
<table cellpadding="5%"> <tr> <td width="15%" bgcolor="#FFC010" valign="top"> <!-- navigation links here --> </td> <td> <div style="margin-left: 2em"> <!-- page contents here --> </div> </td> </tr> </table>The
The page layout stuff gets handled by a script as detailed later.
ImagesIncorporating images into a document in a way that is friendly to low bandwidth users takes a little doing.
Here's the HTML to do all that as well as the end product:
<a name="amedee.jpg" href="slides/amedee.htm" title="The Amedee light, lower leading beacon shows us to be in the middle of the Passe de Boulari (52K)"> <img src="images/thumbs/amedee.jpg" width=128 height=106> </a>You'd go nuts typing all that for every image I hacked together a little perl script, slides.pl, to do all the image grunt work. It uses ImageMagic to do the thumbnailing and extract image information. A Windows version of perl is available from ActiveState.
To include an image, all one needs to do is open the generated
The images are nearly all taken with a Nikon Coolpix 5700, cropped and adjusted with Photoshop. The Coolpix (I hope somebody at Nikon regrets that name.) came with some "cool" slide-tray type software which I stopped using in favor of just copying the images directly off the USB drive which appears when one plugs the camera (can't bear to say "coolpix" again) into the laptop's USB port. For the most part, I size them about 800x600 which should work well on most displays and usually results in images less than 100k in size, 5 - 10 seconds of download time on a 56K dialup line.
Site StyleI gradually evolved a simple style for pages, orange navigation bar to the left, title centered at the top. After maintaining it by hand became onerous, I put together a perl/sed script to take care of changes and updates. The basic idea is to use sed scripts of this form:
/^<!-- begin-nav -->$/,/^<!-- end-nav -->$/c\ <!-- begin-nav -->\ <a href="http://www.summ.org/">summ.org</a><br>\ <div style="margin-left: 2em">\ <a href="http://www.summ.org/links.htm">links</a><br>\ <a href="http://www.summ.org/travels/index.htm">travels</a><br>\ <a href="http://www.summ.org/reflections/index.htm">reflections</a><br>\ <a href="http://www.summ.org/articles/index.htm">articles</a><br>\ </div>\ <!-- end-nav -->to manage common chunks of HTML. The script replaces everything between the two HTML comments,
In actuality I use this sed script for the navigation links, and two other chunks of code, a page prefix and a page postfix, which expand into the HTML table code which used to implement the orange side bar.
A simple perl script recursively applies all the sed scripts to a directory hierarchy.
A somewhat similar idea, though a bit more complex to implement would be to allow something like:
<!-- thumb-right: foo -->meaning: "insert the template code to include a link to the picture images/foo.jpg, right aligned following this comment." This would be better than manually copying out of the template file, because changed picture titles would come into the page automatically instead of requiring the user to recopy them out of the template file. This rarely seems to be a problem so I haven't bothered to implement it. FWIW, the obvious implementation is to have
Web HostingThere are about a zillion web hosting companies. I chose Kanganet because it was used by a couple of other cruising yacht web sites that I had been following. And it was cheap. For about $50 a quarter (it depends on the exchange rate because Kanganet is Australian) you get 250 Mb of server space hooked up to the domain name of your choice. Also, as many email addresses as you care to configure.
Of course, at that price you don't get phone support.
There are lots of different gradations of web hosting support ranging from "you get a dedicated machine in our facility" to "you get a subdirectory in our server farm." Since summ.org has no interactive features, the available server-side programming facilities aren't of much interest.
I bought the domain name, summ.org, from Network Solutions for 9 years at something like $10/year. When you buy a domain name, you get an account and passoword at Network Solutions which allows you to long on and supply them with the authoratative domain server IP address which will be provided by your web hosting company.
UpdatesTo update the website on the server, I get an FTP connection (open ftp://summ.org/ in Internet Explorer) and then copy new or modified files across in a bottom up fashion so that there are never broken links on the server. For example first the new article-N directory and contents, then the new articles index, then the site index and new pages. I do this by hand. If things ever get hopelessly out of sync. I just delete everything on the server and copy the whole site back up. There are fancier FTP clients which can automatically update a hierarchy, but I haven't found the update process onerous enough to incent me use one.
Since I don't have a fixed address, I get an internet connection by taking my laptop to an internet cafe. Laptops have become common enough that most cafes will now let one do this. Usually the configuration is handled by DHCP but in a pinch one just copies down the setup from one of their machines before stealing its network cable.