Troop 174's

New Scout-Webmaster Starter Kit
Dec. 23, 2005

Creating a New Troop Website

  1. Welcome, new webmaster.  Starting from nothing, this guide gives step-by-step instructions to create a free troop website like the one at Boy Scout Troop 174 of Yorktown Heights, New York ( http://troop174.net ).  This imaginary site is the mythical Troop 9999.  Edit to suit.  We provide
    1. Step-by-step instructions, starting from scratch.
    2. A cut-down starter version of our pages to be your starter kit, including
      1. a sample quick-start public home page, index.html, complete and working, but limited. Get this working first.
      2. a sample complete public home page, indexComplete.html, with many more capabilites.  Later, get more things customized here, then copy to index.html.
      3. a password-protected area, pwChooseAPassword.html for private information and interactive sign-up forms,
      4. a private webmaster page, privateFormsTestArea.html to develop more interactive forms and ideas.
  2. Sign up for a free Tripod web-hosting account at http://www.tripod.lycos.com/ .  Tripod is the only free web hosting service (as long as you can stay below 20 MB of storage) I have found that has a script for interactive signups that appends to a .TXT file that anyone in the protected pages area can read.
      1. Go to http://www.tripod.lycos.com/
      2. Click on My Account
      3. User bsaroop9999
      4. Password YourTripodPassword
  3. Download a free FTP program.  I use
    1. WS_FTP LE has a simple two-panel from-to push-the-arrow user interface.
    2. SmartFtp has a drag-and-drop user interface.
    3. Setup
        4. Be sure that your ftp program is set for ASCII for .htm, .html, and .txt files, else the line-termination characters will be mangled, and then if you download a page from the website you may have an editing nightmare with an HTML page in for example Notepad coming up as a single, fantastically long line instead of as several lines.  You must do this because Tripod uses UNIX or LINUX, not PCs.
        1. Configure your ftp program to transfer .htm, .html, and .txt files as ASCII.
        2. Ftp to ftp.tripod.com (IP address 209.202.240.80)
        3. Host Type Unix
        4. User BSATroop9999
        5. Password YourTripodPassword
        6. Set your local folder to the place on your computer drive where the website files are.
  4. Upload the complete website.
    1. Start the FTP program
    2. Connect to ftp.tripod.com.
    3. Copy the entire contents of directory CopyToWebsite to the ftp site.  Do not copy the directory itself.  Go into the directory CopyToWebsite and then copy everything in it to the FTP site.
  5. Test the website. Familiarize yourself with the web pages.  Try all the links from all the pages.
    1. http://bsatroop9999.tripod.com/ the quick-start home page, (well, you also have a less convenient address of http://members.tripod.com/BSATroop9999 ). When you go there you will be in the index.html page, which is the "home" page.  this can also be accessed as http://bsatroop9999.tripod.com/index.html .
    2. http://bsatroop9999.tripod.com/indexComplete.html, the complete home page.
    3. http://bsatroop9999.tripod.com/pwChooseAPassword.html, the password-protected area.  This is where you go when from Complete.html you select the link for the password-protected pages, it asks for your password, and you type "ChooseAPassword".
    4. http://bsatroop9999.tripod.com/privateFormsTestArea.html, the private webmaster page. This is a private place for the webmaster to put links to pages that have been loaded on the website but not ready to be linked to from the user-accessable pages.  Example: event sign-up forms, which should be tested before public use.  Some are on the page as supplied.
  6. Familiarize yourself with the directory structure of the website and which files are where.  index.html is the home page, and also a dummy page in directory "NameOfProtectedDirectory" to help keep hackers from being able to list the contents of these directories.  favicon.ico is a small image that displays in the tabs used by Netscape for tabbed browsing, soon coming to Internet Explorer perhaps.
  7. Edit the quick-start website, post it, and announce.
    1. Get an HTML editing program.  It does not really matter what as long as it produces simple, short HTML.
    2. Edit the home page to refer to your troop number and other information and likewise edit the files it points to:
    3. FTP all changes to the website and test.
    4. Announce the website.  You are up and running.
    5. Warning: Use only the alphabet and numbers for file names, no spaces or other characters, and be sure that hotlinks are to the exact file name including matching upper-lower case characters on the file name, else things will work on your PC, but fail when you put them on the website.
Calendar Future/Past, Photos, People, Major Projects, Merit Badges, Password-protected Pages, Online Signup Forms, Domain Name
  1. Enabling features not in index.html, the quick-start home page.
    1. indexComplete.html, which you will be able to access as http://bsatroop9999.tripod.com/indexComplete.html, has links to many features that index.html does not.  Add these features one at a time to your index.html website as follows:
    2. Features, in order as they appear on the indexComplete.html page:
    3. For each feature that you want ...
      1. Try all links within the feature's page and see where in the directory structure you go.
      2. Edit all the sample subpages to make them yours.
      3. FTP changes to the website.
      4. Copy the indexComplete.html link to the feature to index.html, and FTP index.html to the website to activate the feature.
  2. Enabling the Password-protected pages.
    1. Change the password page from pwChooseAPassword.html to something else. so that your website will have your distinctive password for the password-protected pages.  Instructions below in the "Protected Pages" section.  All you need do is change the html file name from pwChooseAPassword.html to something else, and ftp it to the site.  Delete the old pwChooseAPassword.html file.
    2. In the new password-protected page you made that used to be pwChooseAPassword.html, change the references to directory "NameOfProtectedDirectory" to something distinctive to your site, and of course change the actual name of the directory from NameOfProtectedDirectory to that new thing.  This site uses security by obscurity.  If you can figure out how to get Tripod to password-protect directories for real, please let me know -James Lipscomb.
    3. In this protected directory rename text files to your troop number.  For example, rename file "Troop_9999_Phone_List.txt" to "Troop_41_Phone_List.txt".
    4. On Tripod, delete the old pwChooseAPassword.html and rename the NameOfProtectedDirectory.
    5. Copy references to the password-protected pages from indexComplete.html to index.html
  3. Online signup forms are provided in working condition.  Sign up at indexComplete.html, sign up and see signups on the password-protected pages.  Signup pages are in the Forms directory, and there they must stay, at least at that level of directory, not another directory level, or else they will not work.  The signup Forms pages append their results to .TXT files at the top level.  These .TXT files can have only certain names.  If a signup page is called xyz.html, the corresponding text target file must be xyz.html.txt.  Tripod has a tutorial on how to make Forms.  Even without that, you may mix and match from the examples provided to make new signup Forms pages and their respective text files.
  4. Optionally, in a few weeks, sign up for domain name.  If as we did you find that something like http://bsatroop9999.tripod.com is too long to easily communicate to newcomers, you may have a short name, like http://troop9999.net.  Sign up either directly from Tripod or from another vendor, such as LowCostDomains.com, for which there are instructions below in the "lowcostdomains" section.  This will cost $24/year or so, and be very sure to renew, or else.

Notes on the website

Design Principles
You are now ready to modify the site.  You have your own ideas on web design I'm sure, but let me try to sell you on our design ideas.
  1. Less technology gives more technology.  By keeping web pages technically simple, just lists at most, we add the technology of rendering them on Palm and Pocket PC devices with a variety of web viewers (AvantGo and Plucker for example).  These simple web viewers, small enough to fit in a pocket device cannot handle frames, style sheets, or other fancy HTML.
  2. A large top level page with pretty much everything one needs to know for the next few months is an idea that has been warmly received by our users.  No digging needed to find things, it is all just there.  But keep the top page less than 44 KB, or else it cannot be rendered by AvantGo on a pocket device.
  3. Be modem friendly.  Not everyone is so rich and up-todate with equipment as the web master.  Honor and embrace those who have less, and are on slow modem lines.  They will be too embarrassed to complain.  Keep images small.
    1. Buy a decent image editor and learn how to use it.  Traditional choices are PaintShopPro or Photoshop, but there are many other choices today.
    2. Learn when to use JPEG format (natural images) and when to use GIF format (when there are large flat areas, such as in maps or printed documents).  Sometimes GIF can beat JPEG compression by a country mile.
    3. Learn how to squeeze down the size of JPEG images by reducing the quality level until they scream.  Note that this entire starter website fits on a floppy disk.
    4. Learn how to squeeze down the size of GIF images by reducing the number of colors.  I like to reduce the number of colors to 5, then edit the color map to make some of those the same color, then save the image, reload it, and save it again.  This reduces the number of colors to what I wanted in the first place.  This Information page is a good example of the result, a big image made from few bits.
  4. Adopt a consistent style for all troop pages.  This traditional technique of graphic design comforts and orients the reader while letting them focus more easily and quickly on the different content of the pages.  Troop 174 has a white background with a first line of "Troop 174" and a second line with the title.  There is a small image centered just underneath that to brighten up the page without making it slow to load.
  5. Isolate files for a particular year in that year's directory.  This lets you start off almost fresh each year, with last year's files tucked away.  Unfortunately, that means that each year you must (after saving a copy to copy and paste events from to future years) the inPastMo.html and photos.html pages down two levels and then adjust the relative links within these pages.  Details are below, but after this onerous task is done, the pages are out of the way for next year.
  6. Alphabetize related files together, for example a page, "pda.html" and the image it uses, "PdaCa.jpg."   Another example, if you take a lot of pictures is alphabetizing all photos by event name, with the first event of the year starting with "a", the second with "b", etc.; see CreateWebsite2\CopyToWebsite\History\Y2003\Photos.  Alphabetizing like this at first seems unimportant, but becomes more helpful with each file added to the website.  In 5 years, you will be very happy you did.
  7. Keep the home page below 44 KB.  Somewhere between 45 KB and 46 KB as listed in the Size column (or between 44.1 KB and 45.3 KB as listed at the bottom of the Windows explorer page when you click on the file) the home page, or any other page for that matter, is too big for AvantGo to serve to PDAs.  File inFutureMo.html in the home directory provides a place to put extra calendar entries to keep the home page manageably small.
Protected Pages

Just to be on the safe side, keep up the convention of protected pages excluding robots, so in the off chance that a search engine finds the pages, it will not make them findable in a user search.  See
    http://www.robotstxt.org/wc/exclusion.html#meta
and follow its advice to add the
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
tag in the header of each new protected page you make.

How to Make a Photo Thumbnail Image Array

  1. Make up the regular page of images, here Scout Sunday page called eScoutSunday.html, which has a black background and centered images separated by black-colored periods that blend in with the background.
  2. Copy eScoutSunday.html to a thumbnail construction page.  Let's call it eScoutSundayThumbs.html .
  3. Open eScoutSundayThumbs.html with a text editor and edit the raw html tags to make a white background and right-adjusted images separated by white-colored periods that blend in with the new background, producing a new eScoutSundayThumbs.html . This file is not posted to the website.   Inspect the HTML in these two files to see what was changed.  Here is a summary:
    1. Replace the existing <body> tag by <body bgcolor="#FFFFFF" text="#000000">
    2. Add </center> before the photos to end centering and make them right justified.
    3. After the first photo but before the period character change the <font> tag to <font color="#FFFFFF"> to make the periods white
    4. Replace all occurrences of full-sized photos "height=240 width=320" by thumbnail-sized photos "height=56 width=75".
  4. Adjust the right margin of eScoutSundayThumbs.html to make the picture wrap around if the line of images is too long.
  5. Click on the browser view of eScoutSundayThumbs.html to make sure that the focus is on that window, and then do a screen capture (hold down the "alt" key and hit the "print screen" key).
  6. Paste this image into a photo editor.
  7. Copy a rectangle with just the thumbnails from the view of the entire page.
  8. Save the thumbnail image, which you can see above, as a very lossy compression JPEG and use it where you wish.

Each year (e.g. going from 2005 to 2006)

inPastMo.html
  1. Copy inPastMo.html to inPastMo2005.html to perserve last years events
  2. Specialize inPastMo2005.html to just that year by removing links to previous years, and adding a top image or title for just that year.
  3. In inPastMo.html create a "2005" link to inPastMo2005.html.
  photos.html
  1. Copy photos.html to photos2005.html to perserve last years events
  2. Specialize photos.html to just that year by removing links to previous years.
  3. In photos.html create a "2005" link to photos2005.html.

If you want a Domain Name like "troop9999.net" use Lowcostdomains.com

Tripod can give you a domain name instead of you paying for lowcostdomains.com.  However, I went that way in case the troop ever wanted to move from Tripod, because Tripod may not point their domain to a remote hosting service.

If as we did you find that something like http://bsatroop9999.tripod.com is too long to easily communicate to newcomers, you may have a short name, like http://troop9999.net.

"troop9999.net" is a simple, easy-to-remember domain name troop9999.net.  troop9999.net is a nickname that points to http://bsatroop9999.tripod.com/, which is where the website really is.  Valid URLs are: To manage the domain name troop9999.net:
  1. Go to https://secure.lowcostdomains.com/manage.htm
  2. Domain Name troop9999.net
  3. User BSATroop9999
  4. Password LowCostDomainsPasword
  5. Click Organization Contact
  6. Change to your name, e-mail address, and credit-card number.
  7. The renewal fee for trooop9999.net  is due on or before (YourRenewalDate) every year.  In 2002 it was $24/y.  The Renew button is on the left.
  8. (By the way, click Domain Forwarding to verify settings of http://bsatroop9999.tripod.com and Masking OFF).
Failure to renew may result in a pornographic company picking up http://troop9999.net and plastering pictures of naked people all over it, plus an e-mail to the former owner, you, offering to sell it back for hundreds or thousands of dollars, extortion to be sure but perfectly legal.  Meantime it is a good idea to continue the policy of having official sites, such as the town or Yorktown, to point to http://bsatroop9999.tripod.com/ or even to http://members.tripod.com/BSATroop9999/ instead, to avoid a potential public-relations catastrophe.

However, beware of renewal scams, http://www.theregister.co.uk/content/6/26167.html, in which you get a call or e-mail from an impostor asking you to renew conveniently by reading off or sending off payment.  Renew and pay only at lowcostdomains.com.

So, although you should expect an e-mail renewal notice around (OneMonthBeforeYourRenewalDate) or so with an easy-to-click hotlink to take you straight to the renewal page, do not click it.  It could be a scam.  Renew at https://secure.lowcostdomains.com/manage.htm (the Renew button will be on the left).

Technical Details

To verify settings click Domain Forwarding and see http://bsatroop9999.tripod.com and Masking ON.  To change settings click Edit.  To the question, "Would you like your domain name to appear in the browser address bar?", answer Yes, which sets URL Masking ON.  Be careful, the default is No.

It is bad for URL Masking to be set OFF, because then troop9999.net will never appear in the location window at the top of the browser.

URL Masking ON, however good, does have some quirks.  Although it will put  "http://troop9999.net" in the location window at the top of the browser, it unfortunately it has the gripping power of an octopus.  You've got it, but it stays there unless you fight it off.  The problems ....

  1. an ordinary link from the home page (index.html), to anywhere else, onsite or off, will still show http://troop9999.net in the address window, even, for example, if you link to usscouts.org and then to a subpage there.
  2. if you then try to bookmark this remote page, it will save as http://troop9999.net instead of the page you are looking at.
Consequently, you must add TARGET="_top" to all hotlinks on the home page.
This is the annoying, because you must constantly remember to do this every time you add a link off the home page, every time all year long, but it is your fate.

Examples of how to do it:

On some HTML tools this involves setting the link and separately adding under "Extra HTML" the TARGET="_top".

These target tags are unneeded but harmless in sub-pages.  Past months of the calendar have them starting with 2002.  Just be careful that when you add or copy and paste to index.html that you check for and add if not there the target tag to any links.

For an explanation of target tags, see http://www.freewebmastertips.com/php/content.php3?aid=22 .

Users who wish to increase the font size must use http://bsatroop9999.tripod.com/ , because http://troop9999.net does not respond to browser controls that adjust the font size (on Netscape, cntl-] ), being hidden inside a frame.  There is a note about this at the bottom of the home page.  Whatever you do with this site, do not make things so fancy that the capability to change font size disappears.

The ultimate fix to the problem of having to add TARGET="_top" to all references from the home page, but I judge it too expensive, is to drop a forwarding page on Tripod and move the website to a paid web hosting service like lowcostdomains.com, which will have a primary and secondary DNS for troop9999.net to point to instead of using URL masking.  This should remove the need for TARGET tags, allow font enlargement, and give a nice troop.net/subpage.html address on each page, which can be bookmarked.  But this costs $300 per year, and the troop money should go more to the scouts instead.
 

Contact me if you have questions,
James S. Lipscomb
914-784-7048

Troop 174, Yorktown Heights, NY