Thursday, November 15, 2012

My alternative to HTML frames

Maybe some of you have noticed that I have updated my homepage. Well, the content remained more or less the same but the layout was finetuned.
Furthermore, the previous pages were created using a WYSIWYG tool which resulted in pretty ugly, overbloated HTML. Of course it was also hard to maintain and lacked of HTML validity.

The new pages were manually written (hm okay.. copy-pasted). The biggest difference is the fact that they are not frame-based anymore but solely CSS-based (I avoided to use tables for solely layout purposes as much as I could).
But when searching the net for alternatives to frames, my plan turned out to be more difficult than expected. Using I-Frames was no choice. PHP is not supported by my webspace and I was not willing to pay more just for some 'include' directives.
On the other hand, each change of the main layout (header at the top, meu at the left border) would have meant to manually adapt each html file... this is unacceptable.

So what to do?
Actually I came out with my own solution:
1. I started by coding a main layout template file which contains the general layout without any content:

2. This template was then used as base for every html page of my site. Well, so far no advantage. But in each file I put some markers to identify which parts of the html source belongs to the template and which parts contain the actual new content. These markers are just pre-defined HTML comments like:

here comes may cool individual HTML content

3. Then I programmed a fancy tool which compares all files belonging to my site to the latest template. The markers help to identify the regions which belong to the template file and which are individual content. When the template changes, my tool can update the page files in a way that only the template regions are updated but the actual content is not touched. Here a screenshot of my tool:

A single button click will then update all sites :-)

What do you think of this solution?
Well, I must admit it took some time to code it and get it correctly working, but it was fun to write it and it works like a charm.
.. I love my own-invented solution!