There are a couple of updates to my website.

First, I reworked how the “Life As We Know It” section works. I wasn’t very happy with the way it ended up last time I designed it, even though technically it was really cool. I hope the new design works better in that it allows me to not only add albums easily and quickly, but also allows people to navigate to the album they want to see far more quickly. The design borrows from familiar metaphors in sites like Flickr and other photo sharing sites.

Having made the design changes, I added a bunch of albums that were long overdue to the site, covering:

• Krishna’s Reception at Mamaji-Mamiji’s house
• The Office holiday party
• Arun and Shivani’s visit during the holidays
• The Giants-Patriots game
• Dinner with the gang at Buddakan

Check them out.

Things have changed quite a bit in my online presence, so I thought I’d give a quick rundown, which in a nutshell would be: new domain, new blog design and my social web.

The biggest change is that I have officially moved everything under the domain nishantkaushik.com. So my website, which used to be at www.cygnusa.com (I got tired of explaining that one to everybody) is now officially at www.nishantkaushik.com (though cygnusa.com should still work). Also moving as part of this change is my blog. While still called “Demerzel’s Echoes“, it is now at a new url – blog.nishantkaushik.com. So if you had it subscribed to the blog in your blog readers, please change the RSS feed url to the new one (http://blog.nishantkaushik.com/?feed=rss2).

I also redesigned my blog. It started out innocuously enough when I tried to upgrade my blog software to the latest version (Wordpress 2.3). Unfortunately, the upgrade was not as smooth as hoped. While the new Wordpress version had some nice new features, it also broke a bunch of plugins I was using. It took a while to get all the kinks out; and in the process I ended up changing how the sidebar works. The single sidebar format seems to work better than the two sidebar layout I had before. Most of the widgets, while letting you know what is going on in my blog and in my life, also connect you to the different parts of my social web life.

Which is the last part of this post. I’ve really gotten into the whole social web thing after spending quite a bit of time figuring out what works for me. I was already on Technorati (blog tracking), though I was getting really annoyed with their inability to pick up my tags correctly. I have really moved into the Facebook universe for social networking. The thing that really attracted me to it, and away from Orkut, was that the people I am connected to on FB are way more active and the availability of add-on applications is really good. And I am also micro-blogging through Twitter to let people know in real-time about significant going-ons in my life. I really love that I was able to publish my twitter feeds to my blog sidebar and update my Facebook status with my twits at the same time.

Knowing me, I am sure this is not the end of designing I will do. But I know that Tanu hopes that this is the end of any time consuming significant changes I will make. Let me know what you think.

Shelfari is this web 2.0 social network for book lovers that allows you to build a shelf of books you are reading or planning on reading. It allows you to post reviews of the books you read, and connect to people with the same interest or get an idea of what people with similar tastes are reading. It is kinda cool.

I have been maintaining my book shelf on Shelfari for a while now, and installed a shelf widget on my blog a while ago. Shelfari recently updated the widgets they have with some really cool looking new options. I couldn’t resist updating my widget to a new one that fits in nicely with the look and feel of my blog (it’s a black oak bookshelf; check it out on the right). What do you think?

One thing I did realize: I am not reading as much as I should.

As I detailed in a previous post, I have been getting really bugged with not getting the Technorati tag cloud to work for me. So today I finally decided that I’d had enough. I wanted to use something better, that I had some more control over, to render me a tag cloud. And since I had to make a switch anyway, I decided to go with the best out there and put in the Ultimate Tag Warrior plugin for my Wordpress blog.

I have to say, I was impressed with the work that Christine Davis has done. The plugin is well designed with some great features. Installation was a breeze. I simply downloaded the zip file and installed its contents into my wordpress wp-content/plugin folder. After activating the plugin, a new menu item called “Tags” showed up under the “Options” menu in the Wordpress admin console. From there, I could configure how I wanted the plugin to behave. There are a number of configuration options available, giving you full control over how you want your tags to behave.

The only problem was that none of my previous tags were being recognized. Previously, I was using the SimpleTags plugin to add tagging capabilities to my blog (I had just deactivated it prior to installing UTW). But that simply looks for tagged content in the body of the post itself and renders the tag links appropriately. UTW is a little more complex in that it creates a separate table that holds the tags for the various posts, and of course this table had nothing in it at this point. This is where one of the most impressive features of UTW came in, and really illustrates how much work has been put into the design of this plugin. Under “Options->Tags” is a link for “Manage Tags”. On this page is a button called “Import Embedded Tags”. Clicking on this button ran a script that examined all my previous posts and extracted all the tags into the tags table. It worked like a charm, and all my tags were picked up.

Having gotten my tags table populated, I was now able to put in my new tag cloud, by simply adding the following code to my sidebar

<?php UTW_ShowWeightedTagSetAlphabetical(”coloredsizedtagcloud”,”",”15″) ?>
where 15 can be replaced by the number of tags to show

The tag cloud worked right out of the box. It looks a little different from the old one, but works soooo much better. It is a beautiful thing when software, any software, no matter how big and complex or how simple and seemingly trivial JUST WORKS. As a software architect I can really appreciate that, and kudos to Christine for the best Wordpress plugin I have ever come across.

I am so much happier now.

Having set up my blog in [tag]technorati[/tag], one of the things I felt like doing was putting a [tag]tag cloud[/tag] on my page. A tag cloud is a special way of displaying the [tag]tags[/tag] that you are using on your site. It displays them in variable sizes, with the more often used tags being bigger and therefore more prominent. It is a neat way of visually communicating almost instantly what you are talking about most, and I had seen a number of blogs sport a tag cloud. So I decided that I must have one.

The tag cloud on technorati was a simple javascript to put into my sidebar. Alas, it didn’t work for me. The code gives absolutely no control over it’s appearance, and I couldn’t use a stylesheet to style it. Also, the width seemed to not work properly. The result was an ugly white block of text, one tag per line, that looked horrible. So that came off in a hurry.

I then proceeded to search for tag clouds. I found a really neat one at “Warping On“. But it said it required [tag]Wordpress widgets[/tag]. Having no idea what that is, I proceeded to research that. Turns out that widgets is a neat little plugin from a group at Automattic that allows you to put dynamic content into your sidebar. But to use it, your theme has to be widget-enabled or widget-ready. Looking at their instructions, I got a little daunted. I am still not comfortable with the whole theme coding thing, and having just spent so much time perfecting the skin of my blog, I wasn’t about to rip it up again. So that killed that idea.

As of now, I still haven’t found a good way of getting a tag cloud onto my blog easily. We’ll see how it goes.

[tags]Tech, Web 2.0, Blog customization, Blog skinning[/tags]

I figured that the best way to get my blog out there was to become part of the tagged blog universe. For that, I started to explore various [tag]blog search engines[/tag] and [tag]folksonomy[/tag] websites. Without a doubt, the best known one out there is [tag]Technorati[/tag]. I was already part of that world with my professional blog. So I decided to add “Demerzel’s Echoes” to the Technorati universe and get started [tag]tag[/tag]ging.

Claiming my blog on Technorati

The first thing I noticed was that there was no way for me to create a chinese wall between my professional blog and my personal blog. If I claimed my personal blog using the same account I used to claim my professional blog, they would get linked, and people would be able to cross-over. Not what I want. If someone makes an effort, they could figure out a link between the two, but I don’t want to make it easy for someone. So I ended up creating a new account on Technorati. Not ideal, but manageable.

Wordpress Technorati plugins for Tagging

Claiming my blog was really easy. The harder part was figuring out how to get the tags into my post. I started searching through the Wordpress plugin codex to find a way to integrate Technorati with my blog. There are a large number of choices, but the documentation is a little hard to digest. The information you get from the codex page is never enough, and you have to go to the plugin page to (hopefully) understand the detail of the plugin. Even that is not always good enough. In the end, I installed the “[tag]Simple Tags[/tag]” plugin. Installing the plugin and following some instructions to customize the toolbar for writing a post means I can now easily tag words in my post by simply selecting the text and clicking on a button. The only caveat: I have to switch from the WYSIWYG visual mode to the code mode to get the tag buttons. Still not what I wanted, but close enough. Once I had that installed, I was up and tagging in no time.

Favorite Me!

Adding the “Add to Technorati Favorites” widget to the sidebar was a breeze, thanks to code that the Technorati website provided. I decided to modify what they gave me by replacing their default image with an icon and text link to keep the look and feel of my “Subscribe” box consistent.

[tags]Tech, Web 2.0, Blog customization, Blog skinning[/tags]

Having gotten my blog up and running, I figured that the next logical thing was to somehow connect it to the [tag]social web[/tag] that is all the rage now. I figured it would be a a simple task. But I was quickly overwhelmed by the array of options. So I decided to start with something simple: [tag]Photo Sharing[/tag].

I spend way too much time on my photographs. My website has been lovingly prepared with all the care that my wife says I should give her. And while I plan on continuing to maintain my website as my medium of artistic expression, I did want to find a way to integrate my photographs with my blog that would not require me putting in additional time (I agree with Tanu, my website takes up enough time).

Photo Sharing on Flickr

First I had to find a photo website with good features in the social sphere, and everything pointed me towards Flickr.

[tag]Flickr[/tag] makes it real easy to upload and manage my photographs. Besides uploading through the browser, it gave me a desktop uploader tool that I can use to upload a whole bunch of photographs (a very useful feature when I am uploading a trips worth of photographs). I was even to set up a way to upload photos from Picasa (which is what I use to manage photos on my desktop at home), but that relies on the “upload by email” feature, which is slow and annoying, and prone to failure. I am surprised that there isn’t a better integration between [tag]Picasa[/tag] and Flickr available as a plugin.

Photo Badges & Slideshows

The Flickr APIs mean that there are a host of widgets/gadgets out there ready to use. My research revealed two main ways to display photographs from Flickr – badges and slideshows. [tag]Photo Badges[/tag] (because of their small width) are more appropriate for sidebar displays, while [tag]slideshows[/tag] are better for displaying photographs as part of a blog post or page.

Flickr gave me a pretty decent badge right away, and that is what I have in the sidebar to the right (showing photos from my “From My Travels” set). I loved that all I have to do is manage the photographs in the set and the badge will automatically update with the changes.

Alas, I couldn’t find a [tag]slideshow widget[/tag] that does the same. The best slideshow site I found out there is Slide.com. It makes it very easy to connect to Flickr, select a photo set and use it as the basis for a slideshow (they also support other photo stores, like MySpace). They have a decent array of formatting options, and they give all the necessary code to embed the slideshow in a post. However, after that things started to get complicated.

Firstly the slideshow, once created, is fixed. Updating the photo set doesn’t have any impact on the slideshow, which to me indicates that Slide is copying my photographs over to their servers from Flickr (not a true mashup in that sense). Secondly, the code generated by Slide doesn’t sit well with Wordpress. If I paste the code in and save it, it works. But if I now go back and edit that post/page without touching the slideshow code, something gets screwed up and the slideshow doesn’t render properly. I put a slideshow on the “Travel Addict” page of this blog, and every time I edit that page, I have to retrieve and re-paste the code for the slideshow. It is getting to be pretty annoying. If anyone has a fix for this, I would love to hear it.

Blogging Support

One of the better features in Flickr is the ability to [tag]photoblog[/tag] directly from within Flickr to your Wordpress blog. You can setup your Wordpress account credentials within Flickr, and every time that you see a photo you like, you just have to click the “Blog This” button. You can write the post within Flickr and submit it, and it shows up in your blog right away.

That is also the problem. The post doesn’t always look the way you want it to look, and the fact that it shows up immediately means that you have to immediately go to your blog to edit it. Kind of ruins the benefit of blogging from Flickr. So I started to look for a solution to the problem and found the “Flickr Draft Post“plugin. The activated plugin recognizes posts coming in from Flickr and saves it into your drafts instead of publishing it, giving you time to get back to it for editing and publishing at your convenience.

It also took some debugging to get my blog set up. For some reason, the Wordpress type for the blog selection didn’t work. Moveable Type worked better for me.

[tags]Tech, Web 2.0, Blog customization, Blog skinning[/tags]

Having figured out how to use the [tag]wordpress theme[/tag] editor to modify the theme of my blog, I arrived at a different idea on how to make the look and feel of my blog my own. I was going to design my own layout and look and feel, find a pre-existing theme that has most of the same characteristics, and then customize that theme after deploying.

I spent a few days designing my blog layout. Having just gone through that exercise for my [tag]MySpace[/tag] page, which I had since shut down, I decided to use that look here. It was a pretty good one, and had most of the characteristics that I wanted – clean layout, few colors with a dominance of black (which fits in with the color scheme of my website). I also liked some aspects of the boxed content layout so prevalent on MySpace. So that got me to a basic look for my blog.

I then proceeded to search for a theme that was close enough to what I wanted. The colors didn’t really matter in this. What mattered were the characteristics of the theme:

• 3-column layout
• Horizontal list of pages in the site (automatically generated and not hard-coded)
• Archive Calendar
• Categories list and Recent Posts list
• Search box
• Clean, boxy layout

I didn’t find any themes that had all of these, but I did find one that was close enough. I applied the theme and proceeded to go to town on the stylesheet and sidebars in the theme editor. The original theme didn’t have a [tag]page banner[/tag], but that was just simple HTML in the header.php file. Soon enough I was closing in on my vision for my blog.

Interesting sidebar: In editing the files for the theme, I found that some of the files contained hidden links to an adult website. Turns out that this was how the theme designer was making money from the creation of this theme. Everytime a page on a blog that used his theme would be launched, it would hit the adult website, earning his account money. Sneaky. Something to watch for when you download and apply a theme.

To customize the stylesheet, I simply loaded a page from my blog and looked at the source code. Sure enough, most of the content was suitably tagged with classes or ID’s. This made it very easy to navigate the existing stylesheet and make the necessary changes. Once I got the hang of the overall style structure, I was able to add my own classes to the stylesheet, and use it where necessary.

Creating the [tag]horizontal list[/tag] of pages at the top was the most challenging aspect of this process. This is because the macro that returns the links returns it as an unordered list. This restricts what you can do with it with regards to layout, and also forces you to deal with the differences between IE and Firefox (the two browsers I test against). A valuable resource for trying to format lists that helped me immensely is “[tag]CSS Design[/tag]: Taming Lists” by Mark Newhouse.

Anyway, a few more tweaks and I was closing in on my design. However, there were still some things missing. The theme I downloaded did not have the “Recent Posts” section in it. So I had to search for Wordpress macros. And since I was there, I decided to look and see what other useful macros I could find. I found that documentation for the macros was a little uneven. Some are well-documented, while others are missing key pieces of information. So after a while I gave up. Thankfully, the recent posts macro is pretty easy to use and well-documented. Once I had that, I was good to go.

Next up – adding some cool widgets to my blog.
[tags]Tech, Web 2.0, Blog customization, Blog skinning, blog layout[/tags]

Now that I have my blog up and running, I wanted to talk a little bit about the experience. If you are anything like me, you want your blog to be an accurate depiction of who you are. It should mirror your tastes, your aesthetics, your ideas. My previous attempts at setting up a blog on blogger didn’t take, as it never felt like my own. This time I decided to host my own. So after setting up my [tag]Wordpress blog[/tag] (which was a breeze thanks to the control panel provided by my host [tag]Go Daddy[/tag]), I set about trying to make it my own.

The first thing to do was to find a theme. Wordpress is really cool in that it provides a very open framework by which to customize the look and feel of your blog via it’s [tag]wordpress theme[/tag]s concept. This is a complete contrast to the experience I had with [tag]MySpace[/tag] (see my previous post, “Extreme Makeover: MySpace Edition“). And the number of themes available out there is enough to cover all tastes. At the minimum, it is enough to get you started.

So I proceeded to troll through the various theme collections that were out there.

The Wordpress dashboard sent me to the Wordpress.org themes page that had links to a few websites that got me started. But nothing I found there quite gelled. Just to get going, I ended up selecting the “[tag]Neo-Sapien[/tag]” theme by Small Potato. It wasn’t exactly what I wanted, but it was cool, and worked for now. The image is a little silence of the lambs, but I put in my own anyway. That was my first go.

But it wasn’t exactly what I wanted. So a few days later, I started messing around with it to see if I could mould it into what I wanted. That’s when I discovered the real power of the [tag]theme editor[/tag] (Your Wordpress dashboard -> Presentation -> Theme Editor). If you know some HTML and CSS, and can understand enough to copy-paste the php macros, the theme editor allows you to modify the files that make up the theme in order to change the appearance of your site. You can make little tweaks, apply the changes and see what the effect is. That gave me quite a few hours of fun. And gave me the germ of an idea about how to make this blog my own.

Look for my next post on this topic, as I talk about how I came up with a theme to my specifications without doing all the work of creating my own theme from scratch.

[tags]Tech, Web 2.0, Blog customization, Blog skinning[/tags]