friends of dufferin grove park
Website - Technical - Files

On this page:

Directory organization

On-line directories
Departmental directories

Files on the web server are organized into "departmental" directories (same as "folders") that match (more or less) the menu structure found on the website. Current on-line departmental directories (there are 23) are:

On-line departmental file directories
Directory Site access from the home page
aboutus About Us
arts Arts in the Park
campfires Campfires
city City
citybudget City/Related Pages/City Budget
cityrinks City/Related Pages/City Rinks
dogs Dogs
editor Editor
finances About Us/Related Pages/Finances
gardens Park Gardens
home (
maintenance Maintenance
market Farmer's Market
neighbourhood Neighbourhood
newsletter Newsletter
oven Bake Oven & Food
picnics Picnics
play Playground
police Police & Park Safety
politics City/Related Pages/Working with the City
research Research
sports Sports
website About Us/Related Pages/Website-Technical

In addition there is an on-line "common" directory at the departmental level that holds the shared style sheet files, javascript files, and graphics files that are common to most of the pages on the website. This should be left alone.

The root directory (containing the departmental directories) also contains the default "index.html" file (loaded by the browser when directed to, which redirects the browser to home/dufferinpark.html, which is the home page. The "index.html" file should be left alone.

The home directory also contains the Latest News (latestnews.html), Coming Events (currentevents.html), Help (help.html), and Neighbourhood News (neighbourhoodnews.html) pages.

Standard sub-directories

Each of these departmental directories contains standard sub-directories (graphics, other, pdf, photos). For example:

See Filing files below for details of how these are used.

Some directories (notably the home and common directories) contain "styles" and "scripts" sub-directories to hold .css (cascading style sheet) and .js (javascript) files. These should be left alone.

Off-line directories

We maintain three off-line directories on the web server at the departmental level. They are prefixed with an underscore so that they will sort apart from the other directories:

_archives contains obsolete files and directories, maintained for possible archival research.

_libraries contains image resource libraries (mostly graphics and photographs) for application throughout the site.

_templates contains ready-made website page templates (see Creating a new page from a template).

In practice much of the material for the off-line directories is maintained on the computeres of individuals supporting the site, and is only periodically consolidated to the web server for general access.

File administration

Filing files

Related files are kept in local sub-directories

Each web page HTML (.html) file is assigned to one of the departmental directories above. Then all non-HTML files linked to that web page file are assigned to its directory's sub-directories (see Standard sub-directories above). In other words the resources for each web page are localized. For each HTML file:

  • A departmental directory holds the HTML (.html) file (the actual web page code). Each departmental directory has four sub-directories: graphics, other, pdf, and photos.
  • The graphics sub-directory holds related dufferin grove graphics files (primarily the departmental logos and graphical titles).
  • The other sub-directory holds other related graphics (.gif - Graphic Interchange Format) files, and any other files that are not photographs or PDF files.
  • The pdf sub-directory holds linked PDF (.pdf - Adobe's Portable Document Format) files.
  • The photos sub-directory typically holds related JPEG (.jpg - Joint Photographic Experts Group) files, or any other type of natural photos.

For example, if a second web page uses a picture from another web page that resides in a different directory, then the picture file should be copied to the photos sub-directory of the the second web page. This creates a situation in which there are two copies of the same photo in two different photos sub-directories. Although this may seem wasteful, it is in fact safe. Given that a variety of people are going to be updating the website, then if all resources for a web page are in a local directory structure, the chances of one person inadvertently destroying or altering the work of another are minimized.

Each department directory can hold multiple HTML web page files that are related to that deparment. Therefore each department directory's standard sub-directories can hold files related to multiple web page files.

Archiving files

Examples of archived HTML files.

If you are going to make a change to a web page which is destructive (removes substantial information that may be of historical interest) then archive the HTML file first. To archive a file:

  • Make a copy of the HTML file in the same directory.
  • Rename the file copy by prepending the date of the archive to the file name: YYMMDDfilename.html.

This way the archived files sort in order. When in doubt, archive.

For newsletter HTML files (newsletter.html) we have adopted the convention of naming the archived newletters with mmmYY.html (eg. feb04.html).

If you change a web page such that a related file is no longer on the web page (such as a picture file), then leave the file in place in its sub-directory. The risk of damaging another web page if the picture file (or whatever) is deleted or moved isn't worth it. The website administrator will eventually clean up the directories in periodic sweeps.

If you modify a file such as changing the size of a picture, then if there is any doubt that the picture (or whatever) is being used on another web page, then make a copy of the file before modifying it. If for example you need a smaller copy of a picture, then copy the picture to a file with some meaningful suffix, like picturefile_tm.jpg, where the "_tm" suffix indicates that the picture is a thumbnail.

Departmental directory custody

Because the resources for web pages are localized in a directory and its sub-directories, it is convenient (and highly recommended) to assign departmental directories to custodians - individuals who are given exclusive control over the contents of a departmental directory and its sub-directories for a period of time. This prevents accidental over-writing of one person's work by another.

Updating files

Typically a custodian (see previous section) would make a copy of the website files to his or her personal computer, make changes on that personal computer to the files under his or her custody (or add files such as image files), test the changes, and then upload the changed or added files to the web server, finally testing the live changes.

Special considerations

Relative addressing

There are three types of references from within HTML code to "internal" files (that reside on the Friends of Dufferin Grove Park web server):

  • references to files in a sub-directory (graphics, other, pdf, photos)
  • references (links) to other HTML files (web pages) in the same directory
  • references (links) to HTML files (web pages) in other departmental directories

There should never be references to files in a different departmental directory's sub-directory. If you need to include a picture (or some such) from another department in your web page, copy the file to a subdirectory of the directory in which you have your HTML file.

To simplify the process of referencing local files, and to allow for such references to work both on the web server and on the HTML author's personal computer, browsers support what is known as relative addressing. This means that if the link information (eg. src="photos/somepicture.jpg") does not begin with "http://" then the browser assumes that the location of the file can be calculated by starting with the location of the file within which the link is made. In this context any name followed by a forward slash is taken to be a subdirectory of the current directory. The special characters ".." (two dots), mean "up one directory". A file name without any directory information is deemed to be in the current directory. Therefore, the three types of references above resolve to:

  • Sub-directory reference: subdirectory/resourcefile.ext (eg. <img src="photos/hugh.jpg" alt="">)
  • Current directory reference: webpage.html (eg. <a href="layoutguidelines.html">See Layout Guidelines</a>)
  • Other department reference: ../deptdirectory/webpage.html (eg. <a href="../oven/bakeoven.html">See Bake Ovens and Food</a>)

Note carefully the use of forward slashes ("/"). Back slashes ("\") won't work.

Case sensitivity

Most web servers use some flavour of Unix as their operating system (typically Linux). These are cheaper, less resource intensive, and more reliable than Microsoft products. However Unix systems are case sensitive with respect to file names. Therefore if in the above references you don't get the case right ("filename" is different from "Filename" is different from "fileName"), the reference will work on your personal (Windows) computer, but not on the website.

To reduce these kinds of problems, we have adopted the convention of always using all lowercase letters for file names (or wherever possible). In any case(!), be careful about case.

Main file types

See Software for a list of software we use to process these file types.

HTML (.html - Text/Hypertext Markup Language)

HTML (.html) files are just plain text files that can be edited with any text editor.

Image files

The choice of image file format is determined by a combination of file size and image viewing considerations.

GIF (.gif - Graphic Interchange Format)

The GIF (.gif) file format is a lossless format (no loss of information), but is limited to 256 colours. It is suitable for simple images such as graphics or simple screen shots (the images on this page are GIF's) where line clarity or small font clarity are important. The compression relies on repetition of long lines of identical colours (and the fewer the better) for its effectiveness.

JPEG (.jpg - Joint Photographic Experts Group)

The JPEG (.jpg) file format is a lossy (loss of information) compression format, based on the science of human perception. It has been found that human vision is more dependent on contrast and brightness than on detailed information for a perception of clarity. Presumably the brain "fills in the blanks" when there is missing information. It is suitable for "natural" photographs (such as landscapes, portraits, etc.) typically involving many subtle colours and complex images. We have found that setting the image quality of JPEG's to 50%, but increasing the "sharpness" of the image provides a very small file size that nonetheless appears to be clear and attractive.

In addition JPEG photographs can contain hidden textual information (camera make/model, camera setting, title, date etc.) which take up space and are not required for website images. In IrfanView (the software we often use to process images) these embedded text areas are referred to as EXIF, IPTC, and JPG-Comment data. Unchecking these options in the Options dialog box of the Save dialog box can save 7Kb or so of file size.

File size

For both image file formats, one of the key considerations is the size of the image. As a general rule the images should be reduced in size to the minimum size that will convey the desired impression. For JPEG images this can range from 80px (pixel) width (or height for a portrait orientation) to a maximum of 320px width. Typical width is 120px for a thumbnail, and 200px to 280px width for a magazine style photo. The reduction of image size of course reduces the file size.

As a rule of thumb, a web page should have no more than a total of 50kb of images, to accomodate viewers that use modems (as opposed to high speed connections) to connect to our website. This is about half of viewers. The consensus is that one loses half of one's audience for every 10 seconds of loading time for a page. Keeping the total image volume to under 50kb keeps the loading time for a typical page within the 10 second (or less) range.

In any case the file size of an image file should range from 3Kb to 20Kb, typically from 7Kb to 15Kb, depending on the size and complexity of the image. It is not unusual for us to start with a photograph of 1600px width (from a high qualit digital camera, or a scanned image) that is 700Kb or so in size, and end up with a very acceptable photo that is 15kb or so in size.

Number of images per page

Given these compression guidelines, a rule of thumb would be to have about 3 or 4 images per web page (more for smaller, less for larger). In cases where the reader would expect to see many photos (such as a photo gallery page), 10 or even 20 photos (involving up to but no more than 30 seconds of loading time for the web page) may be acceptable.

PDF (.pdf - Portable Document Format)

The PDF (.pdf) format is ubiquitous on the internet owing to the easy availability of the Adobe Reader, and the convenience of the format. We find that making files available in PDF format is convenient when: a document is offered by another website (such as a government website) as a download in this format; when we want to publish newspaper articles from newspaper websites without worrying that the reference to the article will change; when someone sends us a web page or a Word document that is in effect a brochure for a coming event.

To produce a PDF document, one needs to purchase Adobe Acrobat. This is the only software in the suite that we use that is rather expensive (several hundred dollars). However it is not uncommon for someone in a social network to have a copy, and as the requirement is relatively rare, asking for a favour from such a person once in a while rather than purchasing the software for everyone supporting the webiste is certainly sufficient.

When installed, Adobe Acrobat looks like just another printer to other programs (such as a browser, or Microsoft Word), so producing a PDF is typically just a matter of printing a page or a document to Adobe, which along the way asks for the name and location of the .pdf file that it will produce. Adobe Acrobat also allows for assembly of documents with textual input and image components.

To link a web page to a PDF file, just refer to the file name in the link. We have adopted the convention of always opening PDF files in new browser windows, to give the user the opportunity to cancel the load process if it is taking too long, without losing the referencing page. For example: <a target="_blank" href="pdf/mydocument.pdf">See my document</a>.