Warning before navigate away from a page

July 19th, 2008 by Sajith M.R

In some cases, if you are in between any work of editing or typing a content, and you wont let the visitor to navigate away from the page without particular condition, say the document is not saved yet, you can block the navigation (even the closing of the browser window) with Javascript.

Here is the javascript code for that:


<script>

window.onbeforeunload = function (evt) {
var message = ‘Are you sure you want to leave?’;
if (typeof evt == ‘undefined’) {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}

</script>

Just paste this code anywhere in your html page. The condition settings , warning messages are up to you. In the above code, the warning will be displayed when ever a navigation happen (Even closing of browser window happen)

(pic from Binney V.A)

How Google Adsense Works

June 4th, 2008 by Sajith M.R

What you add for showing google ads on your website ? It is a javascript , right ?


Parameters are: Client Id
format, channel,url for the caller webpage, background color, link color, border color, text color, javasupport, flash support etc

The width and height of the iframe is calculated from google_ad_width = 468 and google_ad_height = 60 parameters.

This is not the end of the story. The actual story just begins now. The loading iframe contains all the advetisement according to your adsense configuration. If you check the links of add unit, you can see all the event with the link is tracked by google adsense code.

See a sample ad link:


<a id=”aw0″ class=”adt” target=”_top” onmouseover=”return ss(”,’aw0′)”
onmousedown=”st(’aw0′)” onfocus=”ss(”,’aw0′)” onclick=”ha(’aw0′)”
href=”http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=
BW7_Ir6xGSKf3Npz6vQOespnnDdO6yVvXoIDxAs
CNtwGgnAEQARgBIL3C4wMoAjgAUKnM2_f6_____
wFg5aLmg7gOoAHNhrj5A7IBEHd3dy5zYWppdGhtci5jb226AQk0Njh4NjBfYXPIA
QHaAT9odHRwOi8vd3d3LnNhaml
0aG1yLmNvbS9kb3dubG9hZC15b3V0dWJlLXZpZGVvcy11
c2luZy1waHAtY29kZS_gAQKAAgGoAwHIAwfoAx_oA_g
D6AOmA-gDBegDDfUDCAAQAYgEAZAEAZgEAA&num=1&
adurl=http://www.codango.com/
&client=ca-pub-2389393537983674&nm=5″>
<span>Free PHP Code & Scripts</span>
</a>

Free PHP Code & Scripts
See onmouseover, onfocus, onmouseout etc functions are used. It means google studies user behaviour with google ads. The click on the link does not go directly into the corresponding website, instead it redirected inot googlesyndication.com and from then redirected into real website. You can guess the reason.

Depending on your browser configuration, google shows text ads, image ads and flash (shock wave) ads

This is a very small introduction of hows adsense works. There are a lot of steps behind the show_ad.js file. But this is will give you a rough idea.

I think

Regards

Sajith.M.R

Youtube Images - What an Idea !!!

May 3rd, 2008 by Sajith M.R

Look at the given image carefully …

Youtube Master Image

Did anybody see the above image anywhere ? The Answer might be No. But you might see small parts of this picture. The amazing picture’s name is Youtube Master Image. The Youtube Website contains this single image only, and it uses part by part for different occasions with css ( sytle sheet) property background image and scroll position.

You know the whole youtube website is created with a single image !!!

For example, you see the rating pictures just below the youtube video

Youtube Ratings

Here the fully red star is created by:

<img class=”rating icn_star_full_19×20png alt=” style=”vertical-align: top; src=”http://s.ytimg.com/yt/img/pixel-vfl73.gif/>

Here the src is merely a 1 pixel image. The actual star lies in the style class “rating icn_star_full_19×20png”

See the style sheet:

.icn_star_full_19x20png

{

   transparent url("http://s.ytimg.com/yt/img/master-vfl38353.gif") no-repeat scroll -373px -38px

}

Here scroll -373px and -38px exactly points the red star in the master image.

And for youtube logo, it uses same background image (master image) with another scroll location. Scroll is set to 0px for logo

Like that, all the images, thumbs up , thumbs down, border, scroll back, previous next buttons etc etc are displayed from this single picutre.

Amazing Idea Right ?

(Post your comments please)

Google Ad-Oriented Wordpress Theme > KeyArt

April 10th, 2008 by Sajith M.R
  1. Very nice ad placement
  2. Keyword / Meta optimized
  3. Google Image-ad Header
  4. Web 2.0 Layout
  5. Simple Design
  6. Option of Auto Bookmarking (Stumble , Delicious, Technorati)
  7. Amazing Navigation
  8. 75% CTR increment (Tested)
  9. Keeping google ad-layout specification

All the above features in a single theme named KeyArt.

Download the zip file , unzip to wp-content/themes/ so that the theme file will be on: wp-content/themes/keyart path.

Goto Admin Control Panel / Presentation Menu. Select the Keyart theme.

See the screen shot:

Keyart Screen Shot

After installing this theme, go to Template/ThemeEditor Menu and Select googleads.php. Edit your google public id there to show your google ad. (Replace current pub-id with ours)


For any queries/comments mail me to admin@sajithmr.com or comment on this post.

Happy Blogging …

Cross Browser Cookies

April 4th, 2008 by Sajith M.R

A normal html / web developer must be femilered with cookies and sessions. In normal case the cookie set by one browser cannot be access through another browser. Each browsers have its own space to store the cookie value. Thats why when you login your email account from one browser, if you go another browser , non of your preference will be available. This is the case of normal cookies.

HTTP cookies, or more commonly referred to as Web cookies, tracking cookies or just cookies, are parcels of text sent by a server to a web browser and then sent back unchanged by the browser each time it accesses that server. HTTP cookies are used for authenticating, tracking, and maintaining specific information about users, such as site preferences or the contents of their electronic shopping carts. The term “cookie” is derived from “magic cookie,” a well-known concept in UNIX computing which inspired both the idea and the name of HTTP cookies - Wikipedia

But what will do if you want to set a cookie which is to be accessed from different browsers , ie mozilla, safari, opera ,internet explorer share same cookie ??

Come back to the case of shock wave flie (swf ) or flash files. They also have privillages to set cookies in browser. Like html, it also have all the features in client side. Consider the cookie setting mechanism of a flash file. It is not on different places for different browsers. It is on a common file on your computer and no matter what the browser.

Think this thing also javascript can access flash object via normal javascript functions if swf provides provision for that. Then when rethink the whole stuff, if you set a cookie through flash , you can access it from any browser.

Cross browser cookies

See this post: http://www.nuff-respec.com/technology/cross-browser-cookies-with-flash

In this post Mr. Daniel Bulli explains it detaily. He is the big man here.

also see this link: http://www.ts0.com/crosscookie/example.html

A live example for cross browser cookie. Both of the sites provide source code of their implementation.

I also uploaded the source code as a backup. Download it from here: OpenID Integration PHP

Sexy Pictures, Sexy Mozilla :)

March 27th, 2008 by Sajith M.R

Sexy Mozilla

You like pictures ?

You like Mozilla ?

If so proceed reading this post. Else close this window and take rest :)

Mozilla on Boobs

Do you like google image search ? If so scroll down. Else click on the red cross button at the top right part of this window, and watch some movie :)

Mozilla Tattoo

Do you like flickr ? Do you like photobucket, or piccassa ? If you shake your head vertically, go on with this post

Lady mozilla

You like 3D ? You like animations ? Of course you must like this post :)

you like ME :) ??? you like sajithmr.com ? Be patient for a few seconds more :) and my thanks for not killing me :) .

Then what the whole post pointing to is A mozilla plugin for those who use google image search, flicker etc, and those you like mozilla; and its name is PicLens . I am not posting it’s uses and screenshots here as i am not willing to reveal the surprise ;)

So go to

https://addons.mozilla.org/en-US/firefox/addon/5579


and install this plugin. Click on the blue play button on the right side of your browser .

Comment me if you like this plugin

Regards

Sajith.M.R (91.6)

Want More Pics ?

subscribe via email:

Enter your email address: 
 

Gmail Architecture

March 26th, 2008 by Sajith M.R
This entry is part 1 of 3 in the series Gmail Architecture

Gmail Logo
Gmail is the best application website i ever seen. Simple implementation, Super Ajax, Cute Chatting, Status Messages, Fast Mail Checking, Live updating and its features are endless as my wordpress database wont withstand

when you type: www.gmail.com, the following action will happen. See it is very interesting.

Script1
It first load the javascript file : https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

It checks the browser type, os etc

the function navigator.userAgent.toLowerCase() checks with opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc browsers

that is script 1’s job.

Script 2 calculate the round trip time for a 1 pixel image. This is for finding the internet speed of the user

function GetRoundtripTimeFunction(start)
{
return function()
{
var end = (new Date()).getTime();
SetGmailCookie(”GMAIL_RTT”, (end - start));

}
}

Since gmail uses iframes , this script also make sure to load the actual home
top.location = self.location.href

It also set cookie to show which of the google service is using.

Then loads the login form and set focus on password field.

Gmail Login

Script 3 handles the https connection and cookie settings for secured login

Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs :)

Gmail’s login form ’s action is pointing to “https://www.google.com/accounts/ServiceLoginAuth?service=mail”

This is the general url for google account login. Here service=mail parameter indicates , this is gmail logging

When the logging verification done, the page is redirected into corresponding service by javascript:

location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);

After setting proper session and cookies for login, the non secured site http://mail.google.com/mail page automatically get refresh by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>

When loading the mail page after setting proper login sessions, around 28 ajax web request begin to start, and load all the mails, labels, channels etc

The above mentioned all javascript is also here in this mail loading page

The first division (div) inside the body tag is that for loading. A while text “loading…” with red backgroud.
<div class=”msg”> Loading… </div>

This is the waiting symbol for all the ajax call to load

Loading

There is also a timer is working to check the loading time of ajax requests. If it takes more time than expected (or calculated), it show this error “This seems to be taking longer than usual”

Automatically they provide navigation links for basic html version.

The total page of gmail is created by a set of iframes
viz

HIST_IFRAME
SOUND_IFRAME
CANVAS_IFRAME
JS_IFRAME

The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (Google chat indicator)

Chat window

<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/>

Gmail saves each sections- labels, inbox, mails etc in array with a unique id. This unique id is for checking the updations on the fly using ajax.

For example : http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox

The above url pics all the data as javascript array format. Check this link after logging in gmail. You can see your labels, your from email accounts, your settings,
your last arrived 70 emails subject and from etc information in javascript array format.

This is the url which is to be called when you click older and newer mail (pagination below)

Gmail always call this url : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1

(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .

If there is any updation new rpc with post method automatically called to get new data. The calling url is same , the one above
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox

It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.

Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

The CANVAS_IFRAME is the main iframe contains all the layout of gmail

It contains the left side chat, main inbox or mails right side ads, and all the controls

The left side chat is created using table.

JS_IFRAME contains all the javascripts files for gmail full implementation. There are around 89 js files.

Chat

When you chat with somebody, the url calling is : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

as POST method with parameters:
req2_text <your chat>
req2_to <sender’s email address>
req0_type cf
req1_cmd a
req0_focused 1

Now,

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1

the above url return the chat friends and theire status messages

==========================================================

Same url is using for getting the chat messages.

For example when kenney.jacob@gmail chat with me , the message comes as an array like this:

[184,[”m”,”kenney.jacob@gmail.com”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169,

,,0,0,0,0,[]

,”square”]

Foster says

Here active implies the chat is active or not (the window with orange color) and with a chat alert if the window is not active.

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1

The above url checks whether the chat is enable or not. which returns an array:
[”b”,”chatenabled”]

Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/

I will post more about gmail architecture soon .

Wordpress Theme - Sythoos

March 17th, 2008 by Sajith M.R

Wordpress Theme  -  Sythoos

Sythoos wordpress theme is now public . You can download the theme of this site from

Sythoos Theme

Wordpress Theme Download

Features >>

  1. Simply whitish theme
  2. Readable font type and size
  3. Comfortable colors
  4. SEO based theme
  5. Apt place for adding google advertisements
  6. Google Map Api showing current visitors locations and count
  7. Super commenting structure
  8. Fast Loading

See the screenshots:

Home Page >>

Home page view

Google Map >>

Google Map integrated

Simple Commenting >>

Simple Commenting and Related Posts

Wordpress Theme Download

Download sythoos.zip file and extract and place it in your wp-content/themes folder. Go to Presentation Tab in wordpress admin control panel and click on sythoos to activate. Enjoy Wordpress :)

Todo Reminder (http://remind.olph.in)

March 16th, 2008 by Sajith M.R

Todo Reminder Logo

Todo Reminder - Mozilla Plugin

Todo Reminder is a Mozilla Plugin, which can be used to set Reminder for Your Friends for a particular event on a particular date. Your Friend will get Email / SMS alert some days before (Called Heat) that event. So you never forgot a particular event / ToDo.

For example, when you composing an Email to your friends for your College Get together on March 21. While composing mail you can simple add a reminder to all of your friends by a single mouse Click, so that all of your friends get reminder emails / sms on that day.

You can Download the Plugin here

Here is the screen short of composing an Email in Gmail:

Composing a Mail

Before Sending this mail, Select all email addresses and right click :

Right Click for Todo Reminder

(You can select any set of emails from any web page and can add reminder like this)

Launching the TodoReminder Plugin:

Start Todo Reminder plugin

Here you can see all of your selected emails, you can put a Subject for your Reminder, Date of Event, and How many days before the alert to be provided (Lets call it HEAT). If Date is March 21 and 3 is the HEAT, then your friends will get alert email from 18th March to 21 March.

See the window after setting the Reminder

Todo Reminder Successfully Set

Enough, Your Friends automatically gets Reminder Emails along with your email. He can Accept or Reject your reminder.

The screen shot of the email your friend gets:

Your Reminder Email

When he clicks the Reminder Activation link, A Confirmation window will pop up , and he can Accept or Reject the reminder and also can Edit the HEAT (How many days before the alert to be started)

Screen shot of Confirmation Popup:

Todo Reminder Confirmation

Download the plugin Now

Todo Reminder - Mozilla Plugin


For more, go to TodoReminder Online Service : http://remind.olph.in

 

Mozilla Plugin for Gmail

March 14th, 2008 by Sajith M.R

Gmail logo

I personally like gmail than any other webmail service in this world. I was a regular yahoo mail user two years before, and i used yahoo messenger also. I am not blaming yahoo mail service, i don’t know the reason for this switching exactly, but i like gmail. Might be because of its simple chat, simple Ajax implementation, very simple look, etc . But the thing i want to disclose is not a mere comparison of gmail and yahoo, that is not my concern here.

Firefox logo

Some additional features i expected while using gmail are HTML signature, customizing the view, labellings, theme , removal of ads , i am not revealing the climax of the movie here :) but i got a mozilla plugin which does all the lagging features of gmail what i expected, and its name is Better Gmail (They could have put better name) .

You can download that plugin from here : Better Gmail

Screen shot:
Better Gmail Screen Shot

Download the plugin and install and refresh gmail page after making any changes in the option. Put a better html signature with images , links etc like yahoo, customize your gmail as you wish.

Google Mail Logo

(Tips: For 100% working of this plugin, you need to switch into older gmail version)

I hate stumble spammers

March 4th, 2008 by Sajith M.R

I hate stumble spammers

The idea attracted me some months back is that of stumbleupon. There you can customize your likes and dislikes. You can categories your likes. After this you can view websites as per your interest. What you have to do is just press the stumble button in your browser’s stumble plug-in. This is like taking books from library. Every day as a course I used to stumble around 20 web pages. It is very wonder to see this, that all the sites getting will be exact on your interest. And if you like that site, you can click I like it button else I dislike button. If you have no opinion on that just leave it and stumble next pages. The backend of stumble upon automatically learns your likes and dislikes and it serves you next pages depending on this knowledge base.

But one thing I noticed some days that, now the websites getting from stumble is not that much suit to my interest. If I stumble 10 websites, I got only three best sites. (In old days it was around 9 :( ) This is happening just because of stumble spamming. There are some websites which doing stumble exchange. As the traffic through stumble increases, most of the websites managers use its loop hole. What is a stumble exchange is, if you add my website as you like it, then I will do same for yours. Thus what results is, improper, non valid, ad oriented, mere marketing based sites will get gather in this pure stumble.

So I hate stumble spammers, as it reduces stumbles real effect, and real mining capabilities. And one more thing also to remember is , the revenue model of this stumble site is also from custom injection of other sponsored sites with stumbleupon’s support . So there is a built in “spamming” in stumble’s revenue model. And these entire stumble exchanges are in addition to this. Then what will happen; normal users like me will get mislead. But still I stumble around 50 sites everyday.

Orkut/Facebook/Flickr/Hi5 is banned in my Office :( Need a Solution ? Yes Answer is Here !!!

December 11th, 2007 by Sajith M.R

If your organization / office blocked your favorite website, dont worry, we have a solution.

If you have your own website / server and ssh access to it, you can browse any website through that. All what you need is putty.exe (in windows).

See below the steps for that:

You need putty for this purpose. Download putty.exe from http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

(Read my previous post on putty here )

1) Open putty.exe

2) Enter your server’s ip address and ssh port. (Default is 22 )

3) In the Category tree (left), expand Connection , expans SSH and select Tunnels

4) Enter any source port (eg: 8888 or 7777 - avoid port less than 1000)

5) Select the dynamic radio button

6) Press Ok and login into your server via ssh.

Now your ssh with tunnel is ready.

Goto your browser .

If you are using moziila, take tools (from menu) > Options.

Advanced > Network options > Settings.

Select Manual Proxy settings.

Leave all the places blank . Enter Socks Host as 127.0.0.1 and port as we set earlier in putty’s tunnel settings (say 8888)

Press OK and browse. You are now browsing via your own server. Thus you bypassed your local system or LAN network. Thus you can access any websites which are blocked from your organization.

If you are using IE, follow the same instructions for proxy settings.

Now enjoy browsing with your favorite sites. cool na !!!

For any queris, mail me : admin@sajithmr.com