Static Pages in a Dynamic Blog

If you are old school (which is the school I like to think I belong to) you are bound to have an old fashioned home page that predates your blog. You probably have a site map / link structure and a good enough page rank, which gives you incentive to continue to maintain your home page in addition to your blog. A problem that I faced was regarding linking of my static old pages through my blog. WordPress provides two ways to define and access such static content:

  1. Links: Links could be external or internal. They don’t have any content associated with them within WordPress. The problem with using links is that people normally use them for a “Blogroll”, to show what other blogs they are in the habit of following. Associating pages in your domain (but not in your blog) to your Blogroll seems counterintuitive.
  2. Pages: Pages are within the realm of your blog. You could define your page anyway that you please. At a first glance this option seems to solve the conundrum, but it really doesn’t. Read on.

There seem to be two options to take care of the linking between the static website and the dynamic blog:

  1. Hard-code the existing links into the header / footer / sidebar of your WordPress theme. The downside to this is that if you happen to change your WordPress theme, you have to apply the same kind of hard-coding again.
  2. You could define Pages in WordPress with the contents of your home page. This is potentially a tedious task. Additionally you stand to lose your existing links and you might have to work your way up through search engine results

I then came across a plug-in called Redirection. This plug-in is very feature-rich and the very simplest thing it lets you do is to define a source URL and a target URL to redirect to. Using this feature you can very easily set up all the links in your blog and ensure portability. Here is what you do:

  1. Install the Redirection plug-in.
  2. For every page in your existing site define an empty WordPress page. This is simple enough to do. Depending on which version of WordPress you are using your steps might differ slightly, but with my installation (2.8.1), here is what I do:
    1. Click on Pages –> Add New
      add new page
    2. Fill in the details for the page 
      add new page
      The title of the page will be the name associated with the old page, the Permalink is the new link for the page, the Parent is used if you have a nested link structure and the Order is used to specify the position in the sequence of pages.
    3. Hit Publish
  3. Now go to the Redirection page under Tools
    redirection
  4. Add a new Redirection
     add redirection
    The “Source URL” will have the Permalink that you created earlier. Do remember the “/” at the end of the Source URL. The “Target URL” will have the URL of your original page. Leave the “Match” and “Action” fields as they are.

That’s it – you are done. The next time someone tries to get to http://mynethome.net/blog/old-page/, the link will be forwarded to http://mynethome.net/original-page.php. If your theme, like most half-decent themes, displays Pages in the header, “Old Page” will show up there and you will be able to click on it to go outside your blog. If your theme doesn’t display pages in the header you could always use a widget on the sidebar.

Starting Aquoid

After my anguished lament in my last post regarding not having enough time to blog, I had an epiphany. I felt deadlines should be worried about, but that shouldn’t really stifle other creative urges.

Why are you worrying about You-Know Who?
You should be worrying about U-No-Poo – the Constipation Sensation that’s gripping the nation!

– Advertisement for Weasley’s Wizarding Wheezes, Harry Potter and the Half-Blood Prince, J. K. Rowling.

I had been wrestling with ideas about releasing my page layout as a WP theme. Then Koke doused my aspirations with cold water, pointing out how this theme was nowhere close to acceptability. So I thought. And then I thought some more. And then I saw this really well crafted WP theme based on Vista called Inanis Glass. And then it hit me – what if I make a theme just like that for the Aqua interface, but with different flavours – Cheetah, Puma, Jaguar, Panther, Tiger and Leopard? And that started Aquoid. In due course of time I hope to have themes for all and sundry, starting with:

There are several challenges involved, like testing this out on all browsers, testing over various connection speeds and bad machines and so on. But for now, it is back to my daily job.

And yes, check out Aquoid.

Down Memory Lane – The BTech96 YearBook

A sudden burst of nostalgia prompted me to pen down my first experience developing a social network. Back in 1999-2000 I wrote a framework for the yearbook of my undergraduate class in the Computer Science Department at IIT-Delhi, without the use of a database and strong security. Another reason for writing the article so may years later was to use Joomla. But more about Joomla in a later post. Hope the yearbook story inspires you.

Feeding PageRank

At one time my Google PageRank™ used to be quite high – 6 or 7, without even trying. I guess I did something to annoy it over the years and my PR dropped to 0. So I decided to do a few things as a part of my new “Ego Drive”, not to be confused with the “Eco drive” that I still haven’t embarked upon. So far I have gotten around to doing just two:

  1. I registered with Technorati. And then I hit a kind of weird situation: Technorati wouldn’t let me claim http://mynethome.net/blog or http://blog.mynethome.net, both of which point to my blog. It instead let me claim my home page http://mynethome.net. I couldn’t figure out how the pinging on Technorati worked, though. How does Technorati understand that there is new content? I had a feeling that it has something to do with publishing feeds. And therein lay a problem – my feed lay on my blog, not on my homepage.
  2. That is where the second thing came in. I wrote my own feed generator. So far I have written it only for Atom 1.0 – I am yet to do it for RSS2. The feed generator posed some interesting challenges:
    1. How was I to manage the list of sites in a flexible manner for the feed to report against? I solved this using a simple XML-based sitemap. You can very easily write a simple XML to represent your website. XML being structured content, I could use the same document to create a PHP sitemap.
    2. My sitemap is better for static content. What was the best way to show the dynamic content like that in my blog? After a bit of thinking and a bit more research I figured out that the easiest of ways to handle this – a link to a feed in my sitemap. I put in a linkfor my blog saying:
      <feed>http://mynethome.net/blog/?feed=atom</feed>

      I then used the Zend Framework to get the entries in the feed. On the fly I pull up the entries whenever my site’s feed is accessed and show the results. For this I used the Zend_Feed class.

      I considered dynamically determining the information from the page’s <link> tags, but ran into some issues processing some feeds, when Zend kept throwing Exceptions.

    3. The third was to dynamically get the summary and content of all the pages in my sitemap, to display in my feed. For this I used the Simple HTML DOM Parser. That let me retrieve the details from a specific segment of my pages. In most of my pages the main content is stored in a div block with class content, so retrieving the details was pretty easy.

The next step would be to write an RSS2 feed, just to ensure compatibility with feed readers that can’t read RSS2. I would be interested to know, though, if people who are savvy enough to use feed readers would settle for a feed reader that isn’t compatible with all kinds of feeds.

In the meanwhile I would like to welcome suggestions if you know how to do this better.

Dining Styles and Why I Hate Internet Explorer

Contrary to what the title says, I have to warn you that this monologue is not regarding table etiquette. Instead, this is a very coding centric rant focusing mostly on my adventures with Tables (Dining) and CSS (Styles).

The job that pays me my wages requires me to be an advocate of standardization, mostly with a focus on data and application customization. When I started doing web-pages in 1997 on a Unix mainframe through a dumb terminal, the only browser I had access to was Lynx – a text-only browser. Then I got access to a terminal with graphics and was able to run Mosaic. I was able to see what my pages actually looked like with pictures.

Moving on, the next browser I had access to was Netscape Navigator, and subsequently Netscape Communicator. Those were awesome browsers, leagues ahead of the competition, which was mainly IE 3 and IE 4. They had a lot of concepts like frames, layers and so on, which let you add funky things to your pages. Of course, I never went beyond frames and some MouseOver and MouseOut events in Javascript.

Then I started off professionally, and I had to write wee bits of code to run on both Netscape and IE. This was the new IE 5, the first big release that altered the balance in the browser wars. That was when my liking for Netscape started diminishing. The whole concept of layers was, though structured, extremely convoluted. IE handled things much better. Quite surprisingly IE was MORE standards-compliant than its competition. Netscape had completely missed the bus and its subsequent releases always were playing catch-up in terms of features, and that too in the face of collapsing market share.

So for a while I just made sure my pages rendered properly on IE (now at 6). But that was when Microsoft took a 5-year break and Firefox came by and completely whipped it in terms of standards compliance. In the meanwhile, I started using programming techniques on my web-pages. I started by writing small JavaScript functions that helped me use my own template structures. Those days I had my page at geocities, so using PHP was not an option. When I purchased my own domain I replaced the JavaScript templates with PHP, which was a pretty good move.

So chronologically, I used these browsers as my primary:

  1. Lynx
  2. Mosaic
  3. Netscape Navigator
  4. Netscape Communicator
  5. IE 5
  6. IE 5.5
  7. IE 6
  8. Firefox 1.0 > IE 6
  9. Firefox 1.5 > IE 6
  10. Firefox 2.0 > IE 7
  11. Firefox 3.0 > IE 7 > Chrome > Safari > Opera

My web-layout techniques also progressed correspondingly:

  1. Plain text
  2. Text with pictures
  3. Frames, JavaScript
  4. Table layouts, JavaScript
  5. Table layouts, JavaScript, CSS
  6. Predominantly CSS, with tables where unavoidable, JavaScript

Particularly between 5 and 6 above there was an interesting toss-up. If you see the layout of this page, it is quite intricate. Each line can be thought of as having 3 columns:

  1. The left edge / top left corner / bottom left corner, with a shadow. The corners occur once, the edge repeats for the length of the main content
  2. The middle section, which repeats horizontally to a pre-determined width, and vertically for the entire length
  3. The right edge / top right corner / bottom right corner, with a shadow. The corners occur once, the edge repeats for the length of the main content

Approach 5 seemed straightforward, because in a table we can set the width of columns and things get aligned automatically. However this was easier said than done, as precision was of great importance. In any case, I had my page looking exactly as I wanted it to. My page rendered correctly on the big 4 – Firefox, IE, Safari and Opera. I had devised an approach where the layout would be created by calls to PHP functions. This was done to minimise impacts of changes like column widths etc. This worked very well for a while.

Then I migrated this blog. And the trouble began. Most content management sites use XHTML instead of HTML. And in case of my blog that royally hammered the look, because, out of all things possible, the look did not turn out correctly in IE 7.

I refuse to be aligned!
I refuse to be aligned!

A little research showed me that the use of XHTML was playing truant. Further research showed me that I could fix the look by using CSS instead of tables. So I started the transformation. I had never used the layout features of CSS, like float, position, margin or padding. Neither had I used CSS to extensively control backgrounds. I found out what I was missing. This approach was so much better than my table-based hacks. More importantly my page was slowly becoming standards compliant.

How did I know that I was compliant? Quite simple – I used the site validation techniques that I accidentally stumbled across. There are two of them that I am aware:

  1. CSS – Checks if your stylesheets are using valid tags throughout
  2. XHTML – Checks if you comply with the XHTML standards. This is really useful and points out a lot of good practices by means of code corrections, like the use of an "&amp;" instead of an "&" while linking to pages and so on.

You don’t see the validation links down in this page, but that is because WordPress refuses to listen to you even if you insist you want to put in your own HTML code and not use the visual editor. So WP puts in <p> tags by itself when you don’t need them. Anyway, I hope to make the blog compliant later. At the end of the day, though IE made me do the hard yards, I was happy because my pages were compliant, as you can see at the bottom right-hand of my main home page.

My sites were compliant and everything was well, till I removed my “left bar” and replaced it with a “menu bar”, to free up some real estate. Bad idea. I checked the look on IE Mac 5.2 and had a seizure. The menu bar looked like a film by the Ramsay Brothers instead of the nice sleek design I wanted to give it. I immediately decided that this needed testing on IE 5.5 and IE 6 at least, in addition to IE 7. This was particularly important since a lot of people working on XP still use IE 6 and not IE 7.

How did I isolate the problems? And how did I test it out on all the IE versions without installing them or using different virtual machines? I found this very good set of tools in my attempts:

  1. Firebug – This is a must-have Firefox plugin if you are a web-developer. It identifies which section on a page is using which style in a very nice manner by highlighting the section on the page.
  2. IETester – I love this in spite of the fact that it tends to crash more often than I would have liked on Vista. This application lets you open tabs for IE 5.5, IE 6, IE 7 and IE 8 RC2 and renders pages based on the browser selected
  3. Sandboxie – I don’t know if this was supposed to be “Sandbox IE”. Nevertheless, this lets you install different applications, like other browsers in a “Sandbox” area, without messing up your core installation

IETester was a phenomenal help. It helped me figure out how ugly some things were in IE.

  1. The CSS boxing problem was a major nuisance. If a page rendered correctly in IE 5.5 it wouldn’t render in IE 6 and so on. I had to tackle this with a bunch of hacks:
    1. Using * html before an element in the CSS to make IE read it
    2. Inserting a “” in an element name, a.k.a. the Tantek hack.
  2. I couldn’t get some PNG files with a transparent background to show up correctly, so I replaced them with GIF.
  3. I couldn’t set the widths to be automatic as they were taking up the whole width

There are a lot more that I cannot recall at this moment. Finally, after a lot of effort I managed to make the look consistent across all the IE versions. Actually I succeeded in not breaking it. The consistency part of things is there between the big browsers, not the older IE versions.

— End of rant.

Update on 14th July 2009: Having redone the blog’s theme some points above are longer valid. However, the basic premise holds – IE sucks.