Cicoandcico.com 3.0: the technology behind this site

Posted by cicoandcico in Hardware & Software. Tags: , . 7 Comments»

Cicoandcico logo, version 3.0It’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.

menubar

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.

template

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.

adminpage
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: ,

7 Comments» “Cicoandcico.com 3.0: the technology behind this site”

  1. Jeff Says:

    I lost my username and password (reformat) and now I can’t log in to my Admin page for CCMail 1.0

    Any ideas on how to retrieve it or is it just a lost cause?

  2. cicoandcico Says:

    well, just look into the config.php file where those data are stored. you can find it into the ccmail’s root folder.

  3. Adam Jankowski Says:

    Hi, i have some questions about you cCmail – i want to translate this script to Polish language. Please write to me. See you ;]

  4. Lev Says:

    Good time, Cicoandcico,
    I supposed to use your ccmail 1.0.2 for working with some (not big one) mail list.
    I like your program? it is good looking, has simple interface and seems to reliable enough,
    so thank you very much.
    To a pity I meet a few problems:
    1. I can not manipulate a group. More exact (as an owner of the list) I would like to add/remove a few (may be many) users to a group and can’t find way to do it.
    2. I have some problems with my (commercial) host timeout – after sending about 400 msgs it switches of. Do you have some ideas how to avoid it?
    3. I had some problems with Cyrillic and had to change charset to windows-1251. Mail is bad working with this change (the server hangs up), sent mail is working. Would be nice to have charset choose switch.
    4. if you are intersted i am ready to translate your text to Russian (if not done yet).
    Thank youonce more.

  5. Douwe Says:

    Hello cicoandcico,

    I like jour CC-mail site!
    But more i like a mysql version V2.0
    Can jou send me your 50% version so far.

    Thank you.

  6. Juan Says:

    I feel a lot to put this comment aqui, but I have not seen where to put it to refer me to CCMAIL.
    Is Fantastic, but… is not completely compatible with PHP5.
    The file of funcion: shared.php remains obsolete with

    eregi — preg_mach

    in PHP5 utilizes the second one funtion but I have neither been able to solve the incompatibility…
    I expect they bring up to date it soon, because is a fabulous tool, fantastic.

    Happinesses!!!

    Great could send me for and.mail a solution…

    Many Thanks

    Juan Menchon from Spain.

  7. Jeff Moses Says:

    Tried to install this and received this error message:

    The following errors were found :

    ccMail is not compatible with PHP version 5.3+

    Please advise.

    Thank you,

    Jeff


Leave a comment