| 
~ pjvenda
This website is developed according to current W3C's CSS/XHTML standards. Websites are seen through client interfaces called browsers, which in turn implement these same standards.
The purpose of all this is that any website developed according to the W3C standards looks exactly the same on every browser.
However reality is a bit different, as not all browsers implement all of the W3C's standards and some even have incorrect or mis-interpreted implementations.
W3C's Cascade Style Sheets (or CSS) do most of the job for this website. CSS is used setup the website's appearence and feel, while XHTML is used to describe content. Instead of having statically positioned HTML/XHTML elements and eventually some dynamic PHP scripted, the website is developed through the use of general XHTML elements associated with a class or identifier. The classes and identifiers are defined in the CSS file and determine the layout of the respective elements.
This website is written in Transitional XHTML 1.0/CSS 2.0 enabling a logical separation between data or content (XHTML) and metadata or style (CSS). Pages on this website are simple XHTML source files, with included CSS code to define the page layout - to be interpreted by the browser.
The same CSS stylesheet files are used across the whole website so when I decide to change something on the layout, all I have to do is change the stylesheet and every page is then rendered according to the new stylesheet. Not at all a recent technique; these days nearly all internet websites use some form of CSS code.
XHTML/CSS code is essencially browser independent but care must be taken due to the different browser implementations. While some are fairly complete and well written (like Apple's Safari browser), some other are completely and irrecoverably broken (Microsoft's Internet Explorer seems a good example for the bad case).
There's a browser compatibility and rendering correctness report for this website, complete with screenshots that deals with such issues.
The following links could further justify the use of XHTML/CSS:
Some bits of Javascript are now part of this website. Nothing essential for the layout - just a little client side help to make it look nicer.
As I'm not an experienced Javascript developer, I copied and adapted most of the visible code for the site.
I copied this bit of GPL licensed code from wikipedia and modified it slightly. All it does is make the table of contents dissapear and enlarge the main section to occupy more space on the browser.
Try the [HIDE] or [SHOW] button on the ToCAs you scroll up and down the website, the table of contents will float along with the browser window so that it remains accessible at all times - even if you're reading something on the bottom of a long page.
This was based on the code from www.jtricks.com/javascript/navigation/floating.html but largely modified by me.
For the "zoomable" images displayed throughout the site, I have now added a bit of Javascript code to show them in a pretty way. Slimbox 2 is a Lightbox 2 clone that provides a really nice interface to show one or a series of images with very little effort from the developer. Let Javascript, CSS and DOM do all the work for us!
Ah, yes, if Javascript is not available, images will still be zoomable in the traditional way (the browser displays the image separately).
In order to improve bandwidth efficiency, I've decided to introduce the YUI compressor for Javascript and CSS code. The idea is that comments, end-of-lines, white spaces are all good and fine for humans to read the files but they're of little use for computers and browsers.
Whenever I update the site, there's a script that manually goes through all the Javascript and CSS files of the website's tree and compresses them individually.
Their syntax correctness is (hopefully) kept so for the browser there is absolutely no difference between the compressed and uncompressed versions of the files.
YUI Compressor is implemented in Java and is used as a Java Archive (.jar). It is executed by the Java Virtual Machine and it's used just like any other unix binary. Several other compressors exist: YUI Compressor is not alone!
If you look at the source of this page (or any other of this website) there should be references to _z.css and _z.js files. These are the compressed versions of the (also available) .css and .js files.
Alternatively, this could also be achieved transparently by using Apache's mod_deflate and some config trickery, but for a very specific reason, I can't use that method with my current infrastructure.
In its current state all javascript code degrades nicely. This means that if a browser has its Javascript engine disabled and ignores my client side code, there is no loss of content or core functionality - everything is still available.
Technically if Javascript isn't available on the client browser, the buttons don't even appear as they're placed by Javascript calls.
Recently, I've written an RSS 2.0 Feed for this website and made it available for everyone to use.
RSS stands for Real Simple Syndication and is mainly used by news aggregators (and browsers) to monitor websites news activity without actually revisiting them. As soon as there's a new item pulled from the feed, the news aggregator/browser notifies the user who gets to know that the referred website has new content.
This RSS Feed was written from scratch in about 3 hours (backed by my own code for Recursive Table of Contents and News database management and display) and consists only of (valid) XML code. The following addresses deserve all the credit for the quick howto and testing tips and for giving me the idea to create my RSS 2.0 Feed:
To use this feature, all that's needed is to import the feed into some news aggregator or RSS-aware browser. A good news aggregator is aKregator for Linux. As for browsers, Konqueror, Mozilla Firefox and Opera, all have good support for RSS Feeds, tipically through a small clickable icon (see examples below) that automatically adds the feed into some part of the browser (or external application).
| Konqueror 3.5.2 | Mozilla Firefox 1.5.0.1 | Opera 8.52 |
Bottom right corner |
Address bar |
Address bar |
| Opera 9 | Internet Explorer 7 | Mozilla Firefox 3.0.1 |
Address bar |
Just below the address bar |
Address bar |
| Opera 9.52 | Internet Explorer 8 beta | Safari 3.1.2 |
Address bar |
Just below the address bar |
Address bar |
You should try it, as it automatically tells you about new content without having to visit the website periodically looking for updates.
All that's coded on this page was done by hand on a text editor (Vim). Sometimes I make mistakes on the code; typos, unclosed tags and such. Every page has links for W3C CSS validator and W3C XHTML validator for everyone to be able to check for standards compliance. Check bottom right footer of every page for W3C validator buttons. By clicking those, the selected page will be validated and a report will be displayed. Reports about invalid pages are very welcome!
This matter has grown and is now a separate document. See it here: browser compatibility and rendering correctness.
