It’s not easy at all writing an article to present your work. How can you explain the improvements you did, above all if they are not visible? Let’s go over the changes that brought to the previous version.

Some history

There’s always a beginning. In this case, it was called www.cicoandcico.atfreeweb.com. Version 1.0 of my site was in fact hosted for free by Atfreeweb. That site wes dedicated to humor, style was ugly, and pages were really heavy! Finally, it was created with Frontpage, one of the worse programs to create HTML code.

However, Atfreeweb furnished good servers for free and I menaged to elude advertising, but only a year later they decided to stop free hosting. I had also another space, but it didn’t support asp and I didn’t want to get advertised.

More than a year later, I decided to create a new site, featuring new contents and a fully new desing, in the attempt to create an “official” space. Design was really good, IMHO (you can view it here). As you can see, it was all programmed in the old HTM, it was not dynamic at all, and it was written with Dreamweaver, without editing “real” code. Dreaweaver is a good program, but nothing can be compared to a good programmer with his text editor.

After 6 months, hoever, I decided it was time to crate another site, suitable to a first level domain. So, taking over version 2.0′s contents and style, I opened Kwrite and the HTML-PHP manual, re-creating all pages with a particular attention to lighness and compatibility, without neglecting style. I added, for the first time, some PHP script, like a counter I programmed(CCconter and other things.

That version (2.1), with some minor correction and modification, has arrived to 2.2a. It has been if february I began getting involved in a new, radical change.

Why a new version

Version 2.x was not bad at all, as a starting point. There were, however, some huge lacunas. For example, each time I wanted to change something, even a minor particolar, I had to modify each page. So, it wasn’t really possible a great update. Programmers know how important is, above all in the debugging phase, the possibility to radically intervene in a project.

Another important reason, was the aesthetic aspect. 2.x style was really minimalist; it isn’t bad, but I got bored.

Project – Part 1: Design

I always started a project by choosing a particular style: I took a pen ad some papers and I draw.
I like upper bar look (Mac-style), so I starded by re-drawing that. I got an aluminium texture and I worked over that.

First results were good, so I decided to follow this way. I lose a lot of time in the menu bar (let’s talk about 2-3 weeks). When you are doing these things, you have to be careful about:

1. how they will appear once they will be in a page
2. how they will appear at different resolutions: not everyone uses the same resolution
3. how heavy they will be.

However, with some HTML tables, I reached the desired result. You can see it by restoring your window: bar automatically adapts itself to window size.

In fact, I hate those sites who look decently only at 800×600, or 1024×768.

Once the bar was realized, I texturized Cicoandcico logo, too, and Ifocused on lateral menus. They were already utilised in 2.0 version, but they were really ugly.

I began with a fixed width, but I rapidly made them variables. Their lenght is 18% of the page lenght(a compromise between 1400×1050 and 1024×768). Once again, I found in internet the inspiration for the final design.

Then, I proceeded to realize bottom bar and the “Administrator area” bar.

Project – Part 2: Structure

Once the template was ready, I focused on how to make it easily upgradable. I choose the popular PHP function include();.
This is the idea: each page can be divided in three parts: a header, a body and a footer. Body varies, header and footer are the same almost for every page. If I call, in each body, an include("header"); and an include("footer");, these modules will be joined to the body, always with the possibility to process PHP code on them.

So, specifying some settings in the body, I can pass some parameters to the 2 modules.
This way, the modules are always the same for each page, so if I modify them, each page will be modified.

Another hard problem are characters. It would be good, in fact, if you didn’t have to specify always: font size=" . ", and above all if would be good to change character size without modifying each line.

I didn’t know that, but someone created Style Sheets. A flat text file contains informations about characters, table width and a variety of things, so that each page can use them by specifying: style="." in a link, a table, a div etc.

Some useful tool

Let’s suppose you can’t use FTP. How can you update something? Simply, with a good file manager. I use Invision Power File Manager v1.0.1, that allows me to edit, upload, chmod and so on.

It is useful and interesting, then, to know something about users: when they come from, what they uses, that language they speak, etc. My old counter couldn’t do that, so I was forced to change script. Now I use eKstreme.com PHPCounter VII, it is simply but powerful.

Other things are the guestbook and Pool module. I use, respectively, Purple Yin Guestbook and SME poll.

Administrator page

Let’s try

How can you:

• create a new page
  Before: Copy the template, modify parameters, make changes, save file via FTP.
  Now: Enter site manager, copy the template, changer parameters, make changes, save file.

• Change upper bar style
  Before: for each page, change some href (new ur, new dimensions.), testing all pages, update each page via FTP
  Now: Enter site manager, upload new images, modify header and footer, test one page, save files.

• Change font size
  Before: for each page, change each font size=" . ", test everything, upload new version via FTP
  Now: Enter site manager, modify style.css, save.

Good, I think.

Compromises

Each decision has its consequences.
For example, it would be nice to use a lot of images, but not everyone has cable.

It would be nice if everyone would use the same resolution.

It would be nice if everyone would use the same font.

It would be nice if I didn’t have to mantein italian version.

Conclusions

The development required about 3 months to me, and I didn’t put it online until it wasn’t readt, following Debian philosophy.
My conclusions can’t be anything but positive, but they are not so importante, compared to yours. So, if you’re not in a hurry, consider to vote in the Poll and help us growing.

Finally, here’s the possibility to admire each version (in order: 1.0 – 2.0 – 2.x – 3.0).

Tags: cicoandcico.com, web

This entry was posted on Friday, July 23rd, 2004and is filed under Hardware & Software. You can follow any responses to this entry through the RSS 2.0 feed. Leave a response, or trackback from your own site.