For interested web developers, here is some information about how this web site came about and some features I am especially proud of.
You can also see how my site's redesign developed over 8 (!) years.
I am a programmer and built this site from scratch in a scripting language called Limitless Mark-up Language (LML). LML was developed by Julian Perry in 1995 at my first Internet company when we needed to build interactive and database-backed web sites when things like PHP didn't exist.
The pages for this site have been generated on my development machine based on a page list in a data file, the projects data file from the limov.com site and a single page 'template' to create all the inner pages.
The process constructs pages using any static content, held in separate files.
Some things still have to happen dynamically, such as the shop keeping track of what's in your basket. So each page can have extra LML files associated with it:
- init: called before the opening HTML tag (before the page starts to display), for example to find out what's in the shopping basket
- body: called after the page heading to display the main page contents, for example, to display the contents of the shopping basket
- h1: to generate a page heading for template pages such as a shop item
- title: similarly, to generate a page title (TITLE) for template pages or shop item
I have always felt strongly that the main content sections on a web site should have strong visual cues to help people get around. If you compare colour, shape and text - different colours are recognised fastest if you're not colour-blind. And, if you are, shapes recognised next fastest. Finally, text.
And so I associate distinct colours and shapes to sections. It's hard to find meaningful shapes for sections and so I often resort to abstract shapes.
In the generated or dynamic sites I built in LML, the page database includes the site section so that when a page is generated, a section-specific style sheet can be included. Style sheets are included in this order.
- screen.css for site-wide screen styles, styles common to all pages
- screen-home.css or screen-inner.css since the home page is usually very different to the rest of the site. screen-inner.css includes styles common to all sections. For example, local navigation is set up with a default border and links colours.
- screen-section - is the section-specific style sheet, for example setting specific colours for the page background, footer and page headings.
This approach means that visitors only download those styles relevant to the page they request.
If a visitor's browser doesn't accept cookies, the session id is passed around in the URL and any settings are remembered for the duration of the visit only.
Your www.paolability.com cookies
How the cookies are used
(unique session id) This cookie is created by the LML system so that sessions can be maintained by allowing visit information to be stored and retrieved on the server.
A session means that the web server can tell that the visitor who requested page A is the visitor who next requested page B. This enables a visitor to set, for example, a display currency in the shop, leave the shop and return to find the setting intact. By default, nothing is remembered from page to page.
If a visitor's browser doesn't accept cookies, the session id is added to the URL and any session information persists only for the duration of the visit.
(visitor id, visit count, visit count all, datesecs) I use this cookie to track repeat visitors; if my web site doesn't have any repeat visitors, then I know I'm doing something seriously wrong.
If the cookie doesn't exist, it's first set with the session id, a visit count of 1 and the current time (in seconds since a specific date).
On subsequent visits, the id is left alone - this now acts as a visitor id. The visit count is incremented if a minimum time period has passed, and another count incremented, ignoring the time period.
The cookie is read by my custom visit report, which, for each repeat visit, shows the visit count and the time since the last visit (e.g., 4 days).
(currency, vat, delivery) This cookie is used by the shop. The shop has default settings to display prices and to estimate the basket total: the display currency for prices (GBP, EUR, USD), whether prices should include VAT (0, 1) and the delivery region (UK, EU, ROW).
A visitor can change one or more of the default settings (shown bold) during the visit. New settings are saved in a cookie so that they can be retrieved when the visitor returns to my shop.
The decorative graphics are from various collections published by Dover. They publish royalty-free typographical ornaments (search for dover series on Amazon).
Thumbnails: The six thumbnails in the top-right corner provide a random way of getting into my web site. They're randomised from six pre-defined lists. The thumbnails are tinted dark blue to blend into the page but show full-colour on mouseover. Clicking on a thumbnail takes you to a page showing the image in detail or, for the first jewellery thumbnail, my shop.
Backgrounds: I couldn't choose between background images on the page and the main content area and so they are randomised from a set.
Thumbnails: When I visit online shops, I often find thumbnails are too small or I have to click many times to get to other products. I wanted to avoid that for my shop.
There are there modes for displaying the product index differing in the amount of columns (1-3) and thumbnail size (50px, 100px, 250px). All products are listed on a single page for each department.
Recent items: Visitors can choose whether to show most recent items at the top of page (if they're regular visitors) or to group items by type.
Adding items to one's basket: When an item is added or removed from the basket, visitor's aren't taken to the page showing their shopping basket but the same page is redisplayed with a success/failure message at the top.
What's in the basket: When an item is placed into a visitor's shopping basket, the display of that item so that the visitor can easily skip over it when considering something else to buy.
I use a technique here that I first developed in 2002 for my company's site (limov.com) to easily find out which pages have been bookmarked.
When a web page is bookmarked the browser usually makes a request to /favicon.ico (you can change the favicon path and filename in a couple of LINK tags).
If you look at your server logs, you'd see favicon requests following page requests and you'd know that was the page that was bookmarked.
site.com - - [04/Jan/2006:14:06:36 +0100] "GET /favicon.ico HTTP/1.1" 302 243 "-" "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:18.104.22.168) Gecko/20060418 Firefox/22.214.171.124"
Trawling through the server logs not viable and I just want to extract the favicon lines (using grep) and find out which pages are bookmarked when taken out of context. So I have to add some info about the page to its favicon filename.
When paolability.com pages are generated, a favicon link is added which references a .ico named with the page's section id and the page id:
<link rel="icon" type="image/ico" href="/ico/about-features.ico">
When a page is bookmarked, an access to the ico file will show up in the server logs so that I can tell which specific page has interested someone enough to bookmark.
(Some browsers access ico files when a page is displayed and so I filter these out when processing the log file.)
However, I don't create favicons for every page - that would just be silly.
The file /ico/about-features.ico does not exist. The site's htaccess file redirects favicon accesses to the correct file.
RedirectMatch /ico/about-([a-z0-9].*)\.ico$ /images/favicon-about.ico
The page id is unique anyway but I add the section id to the original icon link to allow redirects to section-specific icons rather than to a single site-wide favicon:
RedirectMatch /ico/([a-z0-9].*)\.ico$ /favicon.ico
This is the line for your .htaccess file to to redirect accesses to .ico files in /ico to /favicon.ico.