The UI Factory

xBhp Tri State G2G video editing

noreply@blogger.com (Praveen Selvam) — Tue, 06 Jul 2010 16:37:00 +0000

Recently, I went on a road trip to Yercaud along with all my biking pals. I took a camcorder to get my hands dirty with some video editing. While trying to record the videos, I had some hard learning.

A camera mount on the handle bar or to any part of the bike doesn't really help if the road is slightly bumpy or if the speed is high. The video is pretty shaky. The best I could get was when I strapped the camera on to the helmet.
Quite some shake to the camcorder makes is difficult for it to record. Some times it also corrupts videos that have already been recorded.

After some trials, I got a bunch of clippings that I got back home and edited. The final video can be seen below. I used Adobe Premiere CS3 for the editing. The content of the recording was on the DVD, so I didn't have to spend time on the conversion. However, I used OJOsoft Total Video Converter to convert the DVD format to editable AVI format.

Using the Blogger RSS across domains

noreply@blogger.com (Praveen Selvam) — Tue, 04 May 2010 11:12:00 +0000

Problem

I run a biking blog (http://touring.praveenselvam.com) and also have a personal website (http://www.praveenselvam.com) setup, which has a single page with external links to my other sub domains. I wanted to use the RSS feed from my biking blog to add some jazz to my personal website's home page. Since these are from different sub domains, the browser wouldn't allow me to make XHR requests to my target. I wanted a solution that would be as simple as possible, not having to reinvent the wheel.

Solution

I looked through some interesting hacks on the client side, but nothing looked like a fail safe option to me. I decided to craft a request to my own domain at http://www.praveenselvam.com, that would in turn read the RSS from the sub domain at http://touring.praveenselvam.com and give me a stripped version of the information I needed.

I found a rss2html converter, which is a PHP script. I primarily went looking for a PHP script simply because my hosting was of that nature. The package comes with a converter script and a template. The template is a HTML file with simple markings on where the title, description, etc. from the RSS feed needs to come. It was quite easy to edit it, and I directly placed it on the server.

Actual feed: http://touring.praveenselvam.com/feeds/posts/default

Template:

Output:

Thrills of touring

02/21/2010 02:36 AM	Welcome aboard!
04/16/2010 01:23 PM	The "been there, done that!" Map
11/02/2009 12:05 PM	The Big Rides
10/25/2009 01:41 AM	Weekend Madness

Other interesting findings:

In the process of searching for alternates, I found a couple of interesting links that are good alternates on the client side itself.

http://code.google.com/p/crossxhr/wiki/CrossXhr
Uses Flash to make cross site xhr.
http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain
Uses an iFrame to bridge the gap.

Floating elements

noreply@blogger.com (Praveen Selvam) — Sat, 02 May 2009 06:26:00 +0000

When moving from tables based layout to div based layouts, the first things people struggle to understand is how to use div elements. The very first thing that comes to the mind is to make div elements display in an inline fashion. There is a different tag for such things, called span. It is therefore not a good idea to make div tags inline display elements. Rather, there is a whole new alternative to float elements around.
Floating is a concept of making elements flying around the web page, constrained to the space provided by their parent elements. The general trick used are to float the elements left, or right. When an element is asked to float right, it tries to fly to the maximum position it can reach to it's right, without being blocked by any other elements that may be in it's path. This comes handy when we need to split pages to form skeletal structures.

The simplest form of a float trick, involves 2 steps.

Define the width of the element.
Float it "right", or "left".

Lets consider a problem to better explain this. Assume that we need to create a page that has 2 columns, and boxes inside each column that position themselves one below the other. Each box's height does not depend upon any of the boxes in the nearby column.

CSS code

HTML code

Sample output

There is a small problem however with this approach. Elements containing floating children don't consider the height of their children. It is therefore required to "clear" both sides at the end of all the child elements.

From tables to div tags

noreply@blogger.com (Praveen Selvam) — Sun, 26 Apr 2009 11:50:00 +0000

Ages ago, when the web was sprouting more as a common man's bread and butter, there were more and more web pages being created. Of the very few popular HTML tags was the <table> tag. It was easy to visualize a page as tables, and thus the reason for its popularity. As a matter of fact, the code for tables looks so messy on the page, but nobody really cared as long it rendered the same way in most browsers. At some point, people started paying more attention to how quickly pages loaded and how 'slick' they were. Something called as standards, or benchmarks were being set. This was when <div> tags started gaining attention. At this point, the guys who made browsers, increased the power of this tag and giving it more reasons to use. In course of time, now div tags have established themselves as display elements, whereas tables shall be used to display tabular form of textual data.

A UI person takes so much pride when he rolls out his latest UI prototype designed purely with div tags and is completely as per standards. There is great difficulty in doing this, where he has to pay attention on how the page renders on various browsers without violating the standards. So what is the big deal with div tags when the same can be done with tables?

Consider a simple example of a content rich page. The first layout that comes to our mind is the box layout. This is nothing other than imagining the page to be small boxes, one adjacent to the other. In our case, lets have 2 columns, and unlimited boxes in each. The following is a solution offered by both tables, as well as divs.

The above figure shows the exact code equivalent between a table and a div. The table layout clearly shows its inefficiency by exposing unwanted vertical space between the display boxes. However, in the div layout, each column behaves as if it never bothered about anything else on the page. This independence is the strength of the display element. However, in this case, it is possible to generate a table which will produce exactly the same output as the div layout. But it will be required to use 3 tables and the code will be more than twice as much. It becomes inefficient anyway.

Having run through the basic fact, lets look at how both the tags handle styling.

There is no question of positioning with tables and the boxes inside them. Presentation tags like the div can easily take tables to dirt. The power of CSS lies in writing them in a way they can cascade (follow a hierarchy based logic while being applied) on to the element. It becomes complicated trying to blend such a concept on to tables. On the other hand, when displaying tabular textual information in a table, CSS can help tweak the display.

So does that mean we have reached the end of the <table> days? "No."

We still have amateur browsers on various platforms that are not ready for extreme UI yet. A typical example would be the mobile versions of web pages that cater to browsers that are still in their prehistoric days. A lot of Google's ad on web pages are still built on tables to abstract display from that of the page's. Not only that, sometimes, custom components built with JavaScript and CSS use tables instead of div tags to strike a balance between performance and compatibility.

Filtering out selective colors in an image

noreply@blogger.com (Praveen Selvam) — Sat, 25 Apr 2009 16:47:00 +0000

Level: Basic
Time: About 5-10 minutes
Prerequisite: Basic knowledge of Lightroom (or) Photoshop

There are millions of pictures over the internet where only selected colors in that image are unaltered. The rest remain in gray scale. This is a quick 2 minute trick that can be done using either Photoshop or Lightroom.

Lets pick the following image and look at how we can retain the green tones alone and eliminate the rest.

Lightroom: about 5 minutes

This is the easier alternative, with lesser number of steps.

The Saturation option can be accessed by clicking the Develop mode and scrolling down a bit.

Desaturate all the colors except for the colors to be retained. To desaturate a color, pull the slider for that color to the extreme left. It may be required to over saturate the required colors a little bit to bring out the life in the image.

Photoshop: about 10 minutes

Open the original file in Photoshop.

Duplicate (Layer -> Duplicate Layer) the layer to create a copy.

Select the top layer, and open the Color Range window. (Select -> Color Range)

The icon now turns into the Eyedropper Tool. Select some green area in the image that closely matches the color we would like to retain.

Use the Fuzziness slider in the Color Range window to select the appropriate area in the image that needs to be retained. Click OK.

Now most of the greenish areas in the image would be selected.

As the selection is active, add a layer mask to the selection. (Layer -> Layer Mask -> Reveal Selection)

Now select the bottom layer and Desaturate. (Image -> Adjustments -> Desaturate)

The image now has the green color alone retained, which is in the top layer. To bring more life to the picture, select the top layer and over saturate (Image -> Adjustments -> Hue/Saturation) it. In the Hue/Saturation window, use the saturation slider to adjust the saturation.