Latest Journal Post

about:website

Welcome.
If you're a frequent visitor (or a fan ), you may be wondering why I chose to build yet another website. In fact, its getting to a point where I myself don't remember how many times I've "reloaded" this site. I've been designing websites since I was 15. My love for web designing began way back in school when I discovered I had a strong affinity towards visual arts. That was a time when Macromedia Adobe Flash was fresh on the scene. The cool graphics immediately caught my attention. However, the real driving force for me back then was in fact the need to get a friend's email account password. Lets not talk about that.

As soon as I had learnt the different aspects of hosting a website online (for free) I wanted my website to be like my personal mark on the world. Now, thanks to my awesome brother, I finally have my own personal space on the World wide web, without the limits or restrictions I had to deal with while using my previous free website.

A Little History...

I could've taken the easier way. I could've easily used freely available website templates and published a website. I could've started something on Blogspot or Wordpress. But for me, this is personal. It doesn't matter who visits this website. It doesn't matter if fixing a bug takes a big chunk out of my day. During its development, this website has taken priority over some of the most critical of tasks and the most of important people. I take the process of developing this space very seriously.

Why so serious?

The Internet provides a constantly evolving, constantly changing platform for you to reach out to the world. Ten years back, e-mail and IMs were the primary means of online communication. Now we have social networking tools like Facebook to help stay constantly in touch with each other and also with the whole world. I want to experience a piece of that pie. I want to be a part of the online experience, not just as a consumer but also a provider. This is not about my need to express myself to the world, but rather my need to reassure myself that I can keep up with the pace at which the Internet is evolving as a developer. With the widespread use of technologies like AJAX which can provide a near desktop-like experience to the end user, sooner or later, the Internet is going to be the place where everything happens. You'll probably do your Math calculations using a widget in your browser and enter data into Spreadsheets online on Google Docs. I know I take this stuff a bit too seriously, but it's important to take at least something seriously in life, isn't it?.

So what exactly is all this about?

This website attempts to express a personal belief -- I choose not to learn about trivial concepts found in age old books. I'd rather learn something new. Although most new technologies have evolved out of trivial systems, I believe that in order to keep pace with the ever-changing world, it's important to 'adapt and apply', rather than try to learn outdated concepts and find their link to present-day systems. Basics and concepts do have their importance, but they're worthless if you cannot apply those concepts and present them in an attractive package. This is where the "Design" aspect comes in. It's important to pay attention to aesthetics. It's a fact that I've noticed very clearly when looking for Joomla! components -- Good programmers are NOT good designers. Although we developers no longer have to deal with too many "untrained computer users" (n00bs), I doubt that the masses would like to deal with simple static HTML websites after they've experienced Web 2.0 awesomeness.

In a nutshell, this is my playground -- where I try to apply the concepts I've learnt and create something that's functional, maintainable, and aesthetically pleasing. And being my playground, this space was never meant to provide anything meaningful or useless to its visitors. This is about me proving a point to myself -- that I'm not too far behind the curve.

This website incorporates a lot of "modern" technologies -- PHP, MySQL, JavaScript/jQuery, XML, JSON (in one instance), CSS, some minimal use of Flash, and ofcourse, HTML. "Modern" doesn't mean these were recently invented, but rather describes the widespread use of these technologies in some of the most popular websites. Although my previous website dealt with most of these technologies, this is the first time I've learnt to use jQuery extensively and implemented an awesome Content Management System (CMS) -- Joomla!. Best of all, these technologies are all open-source and free. Leaving out the Operating System (Windows XP), ZERO Microsoft softwares were used in the development of this website.

What's so great about this website?

Although this may appear to be a simple website (due to lack to time for development), it intensely concentrates on some of the most important aspects of Web Designing.

Maintainability is the highlight of this website thanks to the Joomla! Content Management System. It offers front-end as well as back-end editing of content along with support for Feeds/RSS and a User Management System. I discovered Joomla! while looking for a solution for a friend, who later became a "client". What I've essentially done with this website is that I designed a template for the CMS and overrode some of the core components and modules to suit my needs. In all, the development of this website along with the graphics took around 2 weeks (with atmost 5 days of dedicated work ). But the real charm is when I'd like to change the name of a menu, or add a new section to the website. All that will now be done directly from the back-end. I won't have to go through PHP code anymore. Nothing is hard-coded. Every internal and some external navigational links are editable from the back-end. The page is divided in sections called modules and all content is stored in the MySQL database i.e. No flat files. The XML files only store certain settings and logs. Functions like 'Export to PDF' and tons of other great features provided by Joomla! can be activated/deactivated at any time.

This website attempts to incorporate Web 2.0 coolness, but at the same time gives full attention to the W3C Standards. You could say I was quite impressed by Bruce Lawson (Opera Software) who visited V.J.T.I. a few months ago and gave a presentation on Open Web Standards. His point about the Web being free and non-discriminatory when it came to people when disabilities was gripping. It's important to develop websites adhering to Web Standards since quite a lot of devices like screen-readers, cell phones and other web-enabled mobile devices follow those standards to provide data to the users. There's no reason why a website shouldn't be accessible to these users. I'm not sure how well this website perfoms on a screen-reader, but all the code I've written is XHTML 1.0 Transitional Standard compliant. The CMS does churn out some unnecessary inline code, but that's the cost I'm willing to pay for maintainability. Hopefully, future versions of this CMS will be more standards-compliant.

This is what it should look like on a small screen supporting Flash.

W3C's Markup Validation Service and CSS Validation Service found no errors while validating this page.




The Web 2.0 coolness doesn't end there. Notice the rounded-corners? The gradient effects? I admit that getting the rounded-corners to work for absolutely any section on the page is kind of an overhead since it is purely for aesthetic purposes. But it's cool, isn't it? If you have some knowledge of HTML and CSS, you'll understand how crazy it is to wrap everything into a container and put the round corners in place. I had a look at tons of code to see how websites like Orkut had done it. To be honest, although their way required less code, the method wouldn't have worked if they required to fit in more content into the section. They're dealing with "Fixed-width" boxes, whereas my challenge was to get it to work for "Fluid" boxes that resize themselves depending on their contents.

Getting the rounded-corners to work for Fluid layouts wasn't as challenging as creating a table-less layout. HTML tables, though convenient for designing layouts when you're working with a WYSIWYG editor, put in a lot of useless code. With modern browsers being more accurate in terms of interpreting CSS rules, I chose to develop a table-less layout. That was just the beginning of my nightmare. Not only did I have to deal with DIV layers, I also had to deal with floating DIVs -- which ought to be named as a completely different breed. The fluidness of the layout coupled my very wishful desire of collapsible left and right panels and floating DIVs haunted me for days. Not just that, the minor and major differences in CSS implementation by the major browsers was most annoying. There was a point where I was willing to give up on IE 7 because it just wouldn't display things as I wanted them, but a very enlightening moment saved me. Opera Web Browser (with Dragonfly) acted as my very capable point of reference as far as Web Standards were concerned.

This website is the first time I'm paying attention to Search Engine Optimization (SEO). Notice how the links to pages don't contain the name of the page with its extension, like ".../aboutme.php"? Apparently, that helps the "crawlers" record contents better and navigate easily through your website. Compare the format of these links to the default Wordpress post links "/wp?p=523". The link doesn't tell you anything about the kind of content the page serves. Special attention was given to preserve the semantics of HTML so that Search engine bots processed data accurately. Personally, SEO doesn't really concern me, but it would be critical for any real world application. Search engines are the primary source of visitors. Proof: All those Dragonball-Z fans who visited my website in search of a DBZ wallpaper

I've also paid attention to the size of each page for my dear friends who use the really fast "MTNL Broadband". I really feel for you guys. So this website has "pagination" for Photo Galleries, and even for some other sections. jQuery also helped in reducing the size. What if you wanted to displayed text on your page in a non-standard font? An easy solution is to use Flash (with the font embedded in it) and pass the text you want to display as parameters to the Flash movie. Great. But that would normally require the OBJECT and EMBED tags, along with numerous PARAM tags, meaning a huge chunk of code. Not only does think affect the page size, but the text passed as parameters to the Flash movie is usually ignored by the search engine bots, so you're missing out on visitors. To deal with this, I've placed the text within normal HTML heading tags, used CSS to hide this text and used jQuery to replace all those tags with the trivial code. Search engine bots don't process CSS so they read the content perfectly well.

This website also attempts to make a clear distinction between what is AJAX content and what is not. Once the page loads, all internal links within the Content section are loaded by AJAX. I've seen numerous websites displaying tabbed panes in the content section with cool graphics, but then without using AJAX, load the requested page.

The coolest part about this website, if you ask me, is its ability to link with the Last.fm service (through RSS and XML) to display the music that's currently on my playlist. I'm talking about LIVE data.

And last but not the least, the most important aspect for any website -- Cross-browser/Cross-platform performance.

The website has been tested on Windows XP (Opera 9.64/10 Beta, Firefox 3.5, Safari 4.0, Google Chrome 2.0, IE 7) and Ubuntu 8.04 (Firefox 3.0) and looks exactly the same across all these browsers. Internet Explorer 6.0 is bound to screw up




Oh, and your left/right panel settings are remembered. Try closing the left panel and refreshing the page. The left panel should close automatically once the page finishes loading, provided you haven't disabled cookies for this site!

Development Process

If I had to classify this website as an application under a SDLC model, this would have to be a Rapid Application Development Model (RAD), with this being the 7th version. I'll next be learning to use a Code Version Control System because over the course of creating this website, I misplaced a lot of PNG source files.

I generally prefer "modding" to developing from scratch, so that helps in creating things quickly. I spent most of my time in choosing the right colours. I needed black to be the primary colour, but from experience I knew that black was the best font colour as far as readability was concerned. Some effects have been inherited from my previous website, which helped save some time.

"Google" has been a very dear friend and has contributed immensely to my evolution as a Web Designer. When there was no human traffic on my website, it would charitably send out its bots to crawl through my webpages signaling signs of activity on my weblogs, giving me hope that this website would live on. From learning concepts to copy/pasting, Google has taught me an important lesson in life. There's tons of code out there. It's not important to know everything. It's not even important to know everything about one single thing. What's most important is the ability to utilize some parts of everything to build one meaningful thing. It's important to learn what could be used where and how the pieces fit.