|About us||RCL 20||Projects||Colour Selector||Library|
Paola was responsible for the web site of the Psychology of Programming Interest Group (PPIG) for nearly eight years. During that time, the site went through three designs and documented PPIG's fourteen annual workshops.
The site was completely redesigned and converted to CSS in December 2002, before it was handed over to another volunteer for hosting and maintenance.
Paola created the first PPIG web site in early 1995, before starting Limitless. PPIG organises annual workshops; its web site supports existing members by publishing workshop details whilst encouraging new members with PDF versions of workshop papers, and photographic workshop reports.
PPIG is a friendly and informal group with members from all over the world. Its annual workshops have taken place in France, Belgium and Italy as well as around the UK.
The site was redesigned in 1996 to make use of the latest HTML standard, such as the addition of background colours.
Pages used a pinkish-brown background. The home page featured a pig's head in the style of a phrenology diagram, page headings were implemented as graphics with different shapes and the site navigation was in the page footers.
Paola redesigned the site again at the end of 2002 before handing it over to the new maintainer:
The new navigation panel includes the site name in text, the section links as combined graphical button and text label, a link home and a colour-coded section graphic. In this panel and the breadcrumbs, the HTML links are in the section colour.
The mark-up style allows the whole page to become very condensed without the need for horizontal scrolling (335 pixels). This is useful in high-resolution environments where multiple browser windows are not uncommon, and also on devices with smaller screens, such as PDAs.
Besides applying a unique colour and shape to the main sections, Paola introduced three button and link states for the main navigation panel dependent on whether a link should be clickable, selected or both:
The sets of links below are as interactive as those in the actual site's navigation panel; the links are to pages on the PPIG web site (www.ppig.org).
All section buttons are unselected and clickable.
Button labels are hyperlinked in the section colour. Buttons are in the section colour and have a white border. Mouseover shows the level 2 version of the the buttons and the text links become blue and underlined.
Level 2 (section page)
The current section button is selected and unclickable.
On a section page, the section's button is selected (you're in that section) and unclickable (you're on the page the button would link to). The section button is in greyscale — its border is in the section colour. The text label is bold, unlinked and black.
Level 3+ pages
The current section button is selected and clickable.
On pages within a section, the button remains grey but has a white border. The text label is bold, in the section colour and a link. Mouseover shows the selected and unclickable version of the button (consistent with its appearance after you click on it), and the text label is shown blue and underlined.
Next, five pages are compared from the old and new design (shown here at the same scale).
The image map was removed as well as the text in graphics. In the new design, the introduction, section links, PPIG logo and latest news fitted into a smaller space. The section graphics are coloured versions of the 1996 graphics, which were based on the PPIG logo.
The contents of each newsletter were moved to a panel on the right-hand side of pages. The main headings were given a background colour in the section colour to visually divide the sections of each newsletter.
Previously named by the workshop number (such as 11th annual workshop), workshops were renamed by year. Links for each workshop were moved to the right-hand side of the page. Links to the annual and extra workshops are at the top of the page. Background colours in the section colour are used to distinguish one workshop from another.
The presentation of workshop programmes and information has been standardised, with the help of external stylesheets. Links to papers are marked according to whether they were local, off-site, to web pages or as downloadable files.
A standard header style was created for workshop pages, to include the workshop name, date, venue and page heading. Links to other pages related to the workshop are in a "See also" panel on the right-hand side of all the workshop pages, where appropriate.
The site contents page is included in the main navigation panel as the last link. Pages on the site are listed in three columns, grouped by section. The section button or colour-coded squares are used to show each page's depth in the site.
Besides the public pages, the PPIG web site includes a private section describing guidelines for people who want to submit material to the site.
Paola also provided an illustrated manual for the new maintainer in web form. It covers topics such as the house style, mark-up conventions, stylesheets, button states and graphics.
The two PPIG mailing lists, announce and discuss, have been active since 1996. Paola administered both lists until 2008.
Copyright © Limitless Innovations 2020