friends of dufferin grove park
Website - Technical

posted January 24, 2006

We are in the process of transferring these pages to a wiki, to make it easier for our community to collaborate in posting. Have an early look.

On this page


Welcome to our Website pages

April, 2004
posted April 20, 2004

These pages are written mainly for people who wish to help maintain the Friends of Dufferin Grove website. The pages give an overview of the technical aspects of creating and maintaining this website, as well as detailed reference material for the friends who actually do the work of publishing the material that you see on the site. These pages are not a tutorial on HTML or CSS technologies. Refer to some of the many excellent books available on these subjects to gain the background information required to interpret these pages.

We consider this site to be an experiment in populist publishing. If any of the technical material here can be of help to other community organizations who wish to publish material on the web, then so much the better. At the same time, if you have any interesting tips or leads on ideas or techniques that might make this site more effective, or easier to maintain, we welcome your feedback.



posted April 20, 2004

Our original website was created by Emily Visser in 2001. Then the current website was started about a year later thanks to a grant from the Toronto Parks and Trees Foundation. It was first implemented by Caitlin Shea, who then went on to support it, with Joe Adelaars. Recently Henrik Bechmann (your present writer of these pages) has given the site a major technical make-over to accomodate the increase in size and complexity of the site. In doing so, we have tried to honour the work and style of the many people who have contributed their skill and insight in creating a site that has some 130 pages (and growing quickly) of community based stories and information. Most notably Jane LowBeer's graphics give the site coherence artistically, culturally, and technically. And of course there are many writers who have contributed material, most notably Jutta Mason; and there are photographers who have contributed the hundreds of photographs scattered throughout the site.


posted April 20, 2004

We have made a conscious decision to take a relatively low-tech approach in implementing this site. This is not to say that it is primitive or that it uses out-dated technology. On the contrary, it uses a table-less "CSS Positioning" design, with a sharp separation of stylistic elements into a centralized "cascading style sheet" that applies stylistic elements uniformly throughout the site. The code on each page is (as much as possible) limited to the logical representation of the layout elements that are represented. As such the site is technically well positioned to be upgraded to evolving standards, notably XML, including XHTML and XSLT (see sidebar).

What we mean by "low-tech", is first: by removing the detailed stylistic specifications from the day to day chores of web page creation, we have simplified the task; and second, we have designed the site so that it can be maintained with free or very inexpensive software. These two in combination should make maintenance of the site accessible to a greater number in the community, and therefore should make the task of keeping content on the site current, much more realistic. Or so goes the theory. We'll see.

Having said that, it is still a technical, relatively complex chore to maintain a website. We hope that these pages will make the task a little easier.

Technical Pages

Directory organization; File administration; Special considerations; Main file types. Read more >>
We have identified a number of roles for the support of the website. An individual can (and often does) take on multiple roles. Read more >>
For routine operations, use your existing browser, occasionally Microsoft Paint, and download the EvrSoft HTML editor (free), IrfanView (free), and a File Transfer tool (cheap). Use the free Validator website for HTML code page validation. Read more >>
Web page creation
HTML; Web page structure; Getting started.
Creating a new page from a template
Copy a template file into the target directory; Modify the new file; Identify a place on another page or pages to link the new page. Read more >>
Block level elements overview
Block level elements contain inline elements or other block level elements. Therefore they form the framework for the page layout. Block level elements can be looked at in a number of ways: Read more >>
Basic block level elements
Headings; Paragraph; Text-block; Block quotation; Horizontal rule; Block-divider; Division-compact. Read more >>
Custom block level elements
Sidebars; Imageboxes; Crossbars; Bicolumns.
Organizational block level elements
List elements; Table element.
Inline elements
Text; Image element; Anchor element; Span element; Inline decorative elements, and line break; Inline phrase elements. Read more >>
Other components
Character entities; Class modifiers; Colour palette.
Layout patterns
General layout patterns; Liquid layout; Storyboard layout; Bicolumn layout. Read more >>
Process checklists
The general case; Special cases.

Evolution of a website

posted April 20, 2004. Updated January 14, 2005

Click on the thumbnails for the full size images.

Emily Visser, 2001
Caitlin Shea, 2002
Henrik Bechmann, 2004
Henrik Bechmann, 2005

In case you're wondering how people found their way into the 2002 website, running the cursor over an image caused the matching menu option to pop up. The idea was to simulate a "walk in the park". This idea was carried forward to the 2004 implementation, but became optional.