RobertChen.ca is the personal website of Robert Chen and an online portfolio of his works.
July 18 2010 21:20:44 GMT
Was chatting with lighthawk088 yesterday and since he was thinking of redesigning his website, it made me think "why not?" and redesign my own.
Minor changes to the front-end. Trying out a single-column layout. It doesn't look that bad actually! Also changed the background from a pastel-green to a pastel-lavender. I've done pastel-red before ... maybe I'll do a pastel-khaki (if I can find the correct RGB colour for it)
I like the new navigation bar ♥ All thanks to Eric Meyer's webpage on pure CSS popups. I spent hours wondering how the heck can I elegantly display the link descriptions in a horizontal bar layout.
I like my new header too ♥ Took a bunch of images that I took, jacked up the saturation, and used a "random image" PHP script.
The backend took a major overhaul. The old backend code was horrible with lots of code redundancy. The new code still has some redundant code, but 1. it's only a few pages, 2. it's much less redundancy than the previous design.
The old design was horrible. I broke the page up into segments (header, nav, footer, etc) and had a separate PHP include for each segment. Each webpage was a copy/paste + change content from the previous webpages. If I wanted the change the layout (say, putting the physical navigation bar code at the bottom for source-ordering), then I'd have to physically move the include on all the web pages.
OMG I don't even want to look at my old code anymore, that's how horribad it is v_v;;
The new back end further separates the concerns. Now the content, structure, and presentation are all separated. Presentation is still done through CSS. The HTML structure is now done through a templating file that takes raw content from XML files. Each former "web page" is now an XML file with 3 tags -- title (for the title tag and the h2 element in the main content area), description (for the meta description) and html (containing a CDATA blob).
This sounds all so simple but oh man it took so long to do. Especially since I wanted to have fun with XSL transformations. But noooo, my web host's PHP 5 configuration can't do XSLT. So I found some Perl CGI script that could do it but noooo it requires Perl 5.6 and my web host only has Perl 5.0. GAHHHHHHHH
(At least my web host was sane enough to include the uttermost basic PHP 5 XML support, or else even the current back end couldn't happen)
Also had some "fun" with .htaccess so I can have pretty flat links (e.g. /portfolio/ibm2008/) instead of ugly HTTP parameters (e.g. template.php?xml=/portfolio/ibm2008). This supposedly helps with search engine optimization o_o;;
So compared to the previous design where HTML code was duplicated on each web page, this current design keeps the HTML structure inside the template file. When the browser requests a web page, the XML data is mashed into the template to create the final product.
Except for a few places, such as the front page and the updates page that has PHP code inside the main content area. For some reason, the PHP inside isn't being parsed properly (it actually isn't even parsed at all).
But it isn't that bad! I've extracted all the HTML between the body tag to the start of the main content area into a separate file. So when I edit these "special case" webpages, it's basically the same as editing one of the XML files except that I have to remember to come up with a title and description. And in the future, if anything changes before the body tag, I'll have to also remember to manually make the changes on the "special case" web pages.
I guess in a sense, the XML is just syntactic sugar .__.;