How to create an article for the PISA website

General:

The PISA website has been formatted for 800x600 resolution. Whenever possible, content should display correctly on an 800x600 screen.

The PISA website should comply whenever possible with World Wide Web Consortium standards. In the context of creating an article for the PISA website, this means using generic HTML with no proprietary tags. Generic HTML works for the widest range of platforms and browsers.

The pages are designed to be fast-loading on dial-up lines. Frames are used to cause frequently-used parts to remain in cache. Image quality is balanced against file size when creating images and thumbnails.

Server-side scripting languages (ASP, PHP, etc) are not supported on the PISA ISP. If you don't know what that means, you're not likely to run into problems with it.

Microsoft Word and Microsoft Frontpage produce nonstandard, proprietary HTML code and must not be used. (Word can be used to write an article if it is saved in txt format.)

Submitted articles include only that portion of the page that includes the text of the article, thumbnails, and links. The code that creates the index (see right side of this page), chooses fonts and colors, and adds the menu is created by scripts during the publishing process.

File name conventions:

All file names and extensions must be in lower case. Be careful, some image editing programs save files with a .JPG (upper case) extension. This must be changed to lower case. (".jpg")

Do not use spaces in any file names! Use underlines instead. For instance,

my_cool_article.html,   not   my cool article.html.

our_group_photo.jpg   not   our cool photo.jpg

Spaces in file names may work (sometimes) in Windows, but it doesn't work anywhere else. Just say no to spaces!

HTML pages must be appended with .html, not .htm.

JPG images must be appended with .jpg, not .jpeg.

Please use jpg for images instead of tiff, gif or png as the file size tends to be smaller (faster loading) with jpg.

File names of thumbnails should be the name of the image with "inline--" prepended. For instance, the thumbnail for my_image.jpg should be called inline--my_image.jpg.

Photo format:

Most of the scanned or electronic photos that have been submitted have been too large. Photos should be no more than 700 pixels wide to accomodate 800X600 displays.

When resizing photos, be sure to "lock" (retain) the aspect ratio, so that the height of the image is in proportion to the width.

Do not use "height=" and "width=" tags to resize photographs or create "thumbnails". Photos resized in such a fashion retain their original file size, and cause very long download times, especially for dial-up lines.

Thumbnails are smaller images used inline with text or in menus of images. They are generally clickable. Clicking on a thumbnail will display the image. (I'll show the code that accomplishes this a little later.)

Thumbnails should be a maximum of 140 pixels wide. They shouldn't be much smaller than 100 pixels wide or they become hard to see. Be sure to preserve the aspect ratio when creating thumbnails, just as with resizing images.

The file name of the thumbnail must be the name of the image prepended by "inline--". For instance, the image "vancouver_lake.jpg" has a thumbnail called "inline--vancouver_lake.jpg". The thumbnail resides in the same directory as the image for which it is a thumbnail.

Photo names should NOT include spaces or periods! It is common in Microsoft Windows for filenames to include spaces, but most websites are on Unix, which will not accomodate this. If you must use a seperator, use underbar "_". Example: this_is_a_long_file_name.jpg

Similarly, do not use file names of the form this.is.a.file.jpg. Again, if you must use a seperator, use underbar, like: this_is_a_file.jpg.

Summary for photo format:

Photos should be 750 pixels wide maximum.

Aspect ratio should be preserved when resizing.

Photos should have thumbnails.

Thumnails should be between 100 and 140 pixels wide.

Thumbnail file names are the file name of the photo with "inline--" prepended.

Thumbnails reside in the same directory in which the photo resides.

HTML:

Articles start as very simple HTML documents, which are then processed by a script to create menus and table framework. The actual articles are fairly simple to write, as long as you follow a few rules.

Do not use Microsoft Word or Frontpage to create html files. Word and Frontpage insert a tremendous amount of nonstandard, Microsoft-proprietary code in the html files which then has to be removed before the page can be published. If you must write your articles with Word, save the article as a txt file.

Article identification:

The file name of the article should say what the article is about and include the article's author. The example used here is Penny Wagoner's "Vancouver Lake and Frenchman's Bar Park" route article. The file name I chose is vancouver_lake_wagoner.html.

The first line in the article must be the title of the article the way you want it to look on the big green header at the top. The title must be the first line, and must be surrounded by html comment tags. The scripts that publish the article look for this line and create the HTML code that produces the title you see at the top of the page.

Example:

<! Vancouver Lake and Frenchman's Bar Park >

This code doesn't actually show up in the article; it's only used by the publishing scripts to create the title.

General HTML:

<p>  paragrap tag

<br>  break tag

<br clear=all>  break tag after a paragraph with an inline image

<a href="image.jpg">
<img src="inline--image.jpg></a> Clickable image

Clickable images

More experienced skaters would enjoy skating Old River Road (unlit) which has little traffic and is smooth and flat with skateable paved shoulders. Some may enjoy a longer-distance skate by beginning at Wintler Park along Vancouver's Waterfront pathway, stopping for a look at the new bell tower (and to smell the roses) at Esther Short Park which is between Columbia and Esther and 8th and 9th Streets in Vancouver.

The code that produced this is shown below:

<p> <a href="photos/page2/bell_tower.jpg">
<img src="photos/page2/inline--bell_tower.jpg" alt="Bell Tower at Esther Short Park" align=left></a>
More experienced skaters would enjoy skating Old River Road (unlit) which
has little traffic and is smooth and flat with skateable paved shoulders.
Some may enjoy a longer-distance skate by beginning at Wintler Park along
Vancouver's Waterfront pathway, stopping for a look at the new bell tower
(and to smell the roses) at Esther Short Park which is between Columbia
and Esther and 8th and 9th Streets in Vancouver.
<br clear=all>

Pretty simple, isn't it?

For more examples, bring up one of the PISA pages and choose "view source" from your browser.

Resources:

Gimp:

If you don't have a photo editor, an excellent free photo editor called "gimp" can be downloaded from www.gimp.org. Gimp is sort-of an Adobe Photoshop works-alike. It doesn't have all the features of Photoshop, but it's still an excellent photo editor, especially considering it's free.

A Gimp tutorial is beyond the scope of this article, but I will include here directions on image resizing. To resize an image, first choose "File" and open the image, then right click on the image and choose "image" and "scale image". Make sure the ratio is locked (the little chain icon) and type a number (750 pixels or less) in the "New Width" box. It is not necessary to specify a height if you have the ratio locked. Hit "ok", and save the image.

If you make a mistake, right click on the image, choose "edit", and choose "undo".

Eyebatch:

Eyebatch creates thumbnail images in batch mode. You can choose an entire directory full of images, the thumbnail dimensions and image quality, and eyebatch will create thumbnails of all selected images in a single operation. Eyebatch is shareware, but it has an evaluation version. See www.atalasoft.com.

Coffee Cup HTML Editor:

If you are interested in a full-blown HTML editing system and can not afford Dream Weaver, a shareware works-alike is available at www.coffeecup.com for about $50.

More code examples forthcoming. The original article text remains here to use as examples. (It will go away when I'm finished with this article.)

(Include stuff about maps, copyright violations.)

Ronald O. Christian

This nicely developed parkland is actually two joined beginner level skating destinations Offering views of Vancouver Lake and the sandy beaches of the Columbia River. The grounds are beautifully landscaped and home to huge colonies of herons, eagles and geese. Facilities Include walking trails, clean rest rooms, play structures, parking ($3), picnic/barbecue areas, equestrian paths and fishing. Many rowing club events are held at Vancouver Lake, so there is lots to see and do. To find these areas follow either Mill Plain or Fourth Plain Boulevards west until they join at Old River Road, and proceed 3 miles West. You'll pass industrial and port facilities on the left that gradually give way to farmlands.

Old River Road	Pathway to Frenchman's Bar	Vancouver Lake Pathway

You'll arrive first at Vancouver Lake that has 1 mile of paved pathway, and if you look to the left at the "Y" you'll see a long, smooth paved trail beckoning you to skate the 2 miles to Frenchman's Bar along the Columbia River.

I would rate this skating spot perfect for families, beginners and intermediate skaters and enjoyable for more advanced skaters that could make this a 15 - 18 mile round trip.

Penny Wagoner