Website construction

Vanoise 2013

Curious?

Are you curious about the inner side of this site? On this page a snapshot inside the tophat. Before making a site, first a Schedule of Requirements has to be formulated; you can find it on te bottom of this page.

The code for a normal album page (let's say page 021.php) is only this:

<?php include('tech/head.htm') ?>

<title>...[give a title]</title>
</head><body>

<?php include('tech/content.htm') ?>

Let us see what this is all about.

The head.htm and the content.htm

The head.htm file and the content.htm file are html fragments which are pasted in each page by php (server side).
They don't need a <!Doctype><html><head><body> structure, for it are just code snippets.
You can see the used code over here: code-head-fragment and code-content-fragment.

The <title>

Besides the filename, this is the only difference in the code of the album pages!

The </head> and <body>

They could have been included in the content.htm, but for special pages this gives the possibility (1) to add some page specific css before the </html> tag, and (2) to give the <body> an ID for cascade changes and javascript goals.

Saving a page file

Important! - Besides the index.php, the page files aren't saved with a name, but with a number: 002.php, 003.php, and so on. In this way, javascript can use the file number for different operations.

The php result

After php has done his work, the page code is somewhat more like page code. It is this code-after-php, which is sent to the browser (and therefore the same as what you see when you look at the source code of a page. Still not to much for a real page: there is no image source yet, the <div id="caption"> and <div id="buttons"> are empty, etc.

Now javascript!

In the end of the content.htm file, the javascript van-script.js is called. This javascript is now on the visitor's computer, and will be used by the browser (client side). What is in the script?

The complete code-after-javascript of a page can be seen in the "generated source code". We can highlight the following details.

JS operations with the title

You will have remarked that the caption text under the photos is exactly the same as the <title> text. Javascript is making a "clone" of the title text, and will put the clone (and a <span></span> around as css hook) in the empty caption <div>:

<div id="caption"></div>

In the code of the example page, code-after-php, you will have remarked also a strange + sign in the title:

<title> ... Refuge du Grand Plan, +with Le Petit Mont Blanc ... </title>

Adding a + in the title has the goal to avoid very long lines in the caption (a <title> has only one line). It's merely a javascript instruction: if the javascript detects a + in the title, in the clone the + is replaced by a <br />, and now the caption text is split in 2 lines:

<div id="caption">
    <span>Looking down to the Refuge du Grand Plan, <br />
    with Le Petit Mont Blanc (center) and the Glaciers de la Vanoise
    </span>
</div>

For the real title (displayed in the top browser bar), the + sign is unwelcome: the javascript deletes it over there.
Note: if a + sign is really needed in the text of the title and the caption, an other (unused) symbol or letter has to be chosen for the line break instruction.

JS operations with the page number

Javascript can catch the number from the number of the page file. This is used for the filling of the image source with the same number (the images of the pages must get the same number as the corresponding page: 001.jpg, 002.jpg, 003.jpg etc.!). For our example page it becomes (javascript has added also some styles):

<div id="imgBox" style="...">
    <img id="img" src="images/021.jpg" alt="" style="..." />
    ...

The page number is used again for the filling of the "previous" and "next" buttons with the appropriate number of the page before and the following page. Then the whole buttons <div> can get his content:

<div id="buttons">
    <a id="prev" href="020.php">&lt;<span> previous</span></a>
    <a id="copyright" title="copyright, yes" href="http://clba.nl/sitepoint/vanoise/images/">©</a>
    <a id="next" href="022.php"><span>next </span>&gt;</a>
</div>

JS comments

A bit more explanation is in the comments in the javascript file van-script.js.


* * * * *

Schedule of Requirements

The requirements were not heavy • The goal was to serve family members and friends with a desktop or laptop, a modern browser aboard, and javascript enabled • In case a visitor has javascript disabled, a message should appear • For optimal pleasure, the photos on screen have to be as big as the screen can allow • The photo's on screen should get a max-height of the standard height for the photo-images (750px: to reduce the file size), so the images can maintain their quality (without being blown up over 100% scaling) • Structure without frames, layout without tables • The pages have to be valid html-strict and valid css3 ("of course") • As the target public has fast internet connections, no special attention has to be paid to image optimizing • The images should have a max. filesize of 500kB (except the panorama photo's) • For eventually slow loading, feedback with a loading.gif has to be given • As the main audience is limited and will get the link to the album personally, no SEO (Search Engine Optimization) has to be applied • And last but not least: make clear that a website editor is not needed, and all can be done by hand in a simple text editor.

start
 all