Home

How was this website designed?

• Why this page?
• Tools
• Core
• Design

Why this page?

Well, I'm not a professional web developer and I have only a little experience with web design. The way I coded this website is probably not the best one. But as a beginner, I'd like to share this experiment and a few tricks.

Please let me know if you have any criticisms about this design, especially about standards compliance and security.

Tools

I needed a very simple website: A few pages not often updated. But I didn't want to use only raw HTML because:

• I wanted to use a web site traffic statistics tool,
• I wanted to be able to easily modify some parts of all pages (e.g., the footer),
• I wanted to learn more.

And last but not least, I wanted to use only free software. So I used:

• Apache as web server (though I can't really choose because the server is not mine),
• PHP as server-side scripting language,
• Webanalyse as web site traffic statistics tool,
• GNU Emacs as IDE,
• GIMP and ImageMagick for image processing,
• Firefox and w3m as test browsers. I have to confess I also checked with Microsoft Internet Explorer since many people still use it!

Core

The heart is a simple index.php file that looks like that:

<?php

// error_reporting(E_ALL);  // for debugging

class htmlPage
{
  var $fileName;
  var $title;
  var $primaryLang;
  var $description;
  var $keywords;

  function htmlPage($fileName, $title, $primaryLang)
  {
    $this->fileName = $fileName;
    $this->title = $title;
    $this->primaryLang = $primaryLang;
  }
  
  // Inserts the whole HTML code.
  function insert()
  {
    $page = $this;
    require('pages/header.php');
    require('pages/main_menu.php');
    include("pages/$this->fileName");
    require('pages/footer.php');
  }
}

extract($_GET, EXTR_PREFIX_ALL, 'get');

if (isset($get_page))
{
  switch($get_page)
  {
      case 'home':
          $page = new htmlPage('home.php', 'Homepage', 'en');
          $page->insert();
          break;
      case 'website_howto':
          $page = new htmlPage('website_howto.php', 'How was this website built?', 'en');
          $page->insert();
          break;
      default:
          echo("The page $get_page doesn't exist, or you are not allowed to access it.");
  }
}

?>
  

The htmlPage class above allows me to build a HTML page with a preformatted header and footer that uses some variables I can set in index.php (i.e., title, description, etc.). It is simple and quite suitable for few pages.

Design

I love light, standards compliant, and beautiful designs. This one is very light, I hope it's beautiful as well...

I won't talk about standards and HTML/CSS here, though it's really important. I'll just give some ImageMagick commands I used to do basic but useful stuff.

Gradient

The command line convert -size 1x400 gradient:#ecf4f7-white -rotate -90 title_blue.jpg creates a 400×1 blue-white gradient image. This image has been used to fill the background of the second-level titles of this website.

PNG background

If you want some images with transparent background, you can use mainly GIF or PNG format. The latter is better for many reasons (alpha channel, interlacing, better compression, gamma correction) but unfortunately it has a bad support by Microsoft IE before version 7.0, e.g., transparent backgrounds are not transparent at all but rather black or grey!

So, because there are people who still use MSIE, I filled all transparent background with the website background. Fortunately, the command line is my friend: convert image.png -background white -flatten +matte image_new.png does the work. Or if you want to overwrite all PNG files in the current directory: find . -maxdepth 1 -type f -regex '.*\.png' -exec convert '{}' -background white -flatten +matte '{}' \;

Anti-spam

Nowadays, you can't put your email address on a website without being spammed a few days later. There are many ways to prevent spammers from catching your address: Address munging, transparent name mangling, client-side scripting, image/captcha, etc.

I chose to put my address inside an unlinked clean image, with a munged one in the image's alt field. In this way, the reader can see my real address without any ambiguity, and he can decode the munged address if he uses a text-mode browser. To easily generate this kind of image, you can use the command convert -background white -fill "#0058a5" -font Courier -pointsize 16 label:name@domain.com email.png that outputs the following image: .