This started off as a script for my talk at the upcoming BarCamp Delhi [register here] to be held on Oct 11-12 at IIT, New Delhi. Before we proceed any further here is a really motivating video about the whole Web 2.0 movement, and yes, it is a movement, an uprising, and nothing short of it[whole story after the jump].

All online media, as well as most of offline media, has the following entities to the heart of it:

• Content Creators
• Distribution Channel
• Community/Audience

Armed with those three points, we take a dive.

Web 1.0: At the very beginning, that is the beginning of the Internet, there was too much consoling on consoles, very nerdy geeks[read gates and jobs] having fun with computers as they were and just cooking up things that made the thing more and more usable. Then we had all the operating systems and hardware platforms we would ever need, really.

Now those were the days of infancy of big corporations in the computing industry and they showed no signs of amateurishness whatsoever. Bill Gates is the richest american for fifteen years in a row, so the seriousness we are talking about here is beyond grasp. It was clearly visible by how they fought Netscape, a pretty innocent startup, that took the very first step in a never-to-die-down uprising. An uprising that is less surprised than its participators. Participators, who often have found themselves at the receiving end of this uprising. Netscape offered to provide, eh, documents(??) online. How innocent? That was the first browser that could display images inline with the text and with the help of some more wizardry that made this revolutionary new browser technology usable, it caught the fancy of the world, wide, web.

The social media here were the HTML documents. The creators were those few nerdy elites who knew something as exotic as HTML. So when we had the distribution channel in place and the creators were excited to create the very first form of social media that the world would know, Microsoft found something wrong. If the channel was let go of, Microsoft would lose monopoly of the very thing it built its empire on, the desktops. Whatever be the case, this uprising was muted, although for some time.

So the social media was there, the creators were in place, and the audience was present as well, but the distribution channel got choked. The users have been denied something that they could have had.

All is never lost. Just when the industry was making big money on this very nascent computing technology and the newest marvel of it, the Internet, lightning struck on the other side of the hamlet. Napster was born, and what a birth. This time the blow would hurt even deeper, like it always does. Napster allowed anyone to get a song he/she liked from any part of the world in minutes, for free. Wow. So the new social media is a song, revolutionised by a new technology called MP3 which renders a song file very transferable over computer networks of the day. The creators of this new social media are the industry signed music artists, very prized possession of the recording labels. And we know the size of the audience who are into music, its huge. Napster was the distribution channel and bang, again, the industry finds something wrong in this. Don’t you find something wrong here?? If I am a fan of something, I oughtta receive a souvenir for my faithfulness and not pay for it. And when someone does something that actually helps my faith grow, the very artists find it wrong?? Just doesn’t add up any which way I try.

Whichever way the jury settled, this was the birth of Intellectual Property Rights, patenting and much copyrighting around the world. Now everything gets copyrighted to the creator and the owner.

As an aside, and before moving on to the next generation of Web revolution, here’s another case:Sit to think about what has been the primary conflict with Linux?? It is the distribution channel. Its open, wide open. You can come in anytime and if you want to, you can just pick off one single application and leave. It was that much open. But due to the sheer size, and the fact that the creators and audience are both among us, there’s nothing much the industry could do. That is a very geeky kind of social media, but it lived on.

Web 2.0: So now, in the spirit of the video above, to hell with all artists. We have all the channels now to be the stars that we can be. Let Warhol take a class for fifteen minutes after which, we can start on our journey of claiming and entertaining our own audience. We have social bookmarking sites, wikis, video-sharing sites, blogging sites, picture sharing sites, social networks, microblogging, life streaming, virtual worlds, podcasting, webcasting, … the distribution channel has stopped looking like a wire or pipe and now looks like the world in itself. The creators are all of us. We have our copyrights. We are the audience as well. But wait. Copyright?? I am no Metallica, and neither am I Scott Adams, so who will steal my creation? And in an online population of 500mn people, if someone does, I won’t know. The chances are grim. Copyscape and TinEye may help, but what the heck, even if I find out, what are the chances that the discovery of such theft will be profitable for me??

Profitable.

If I was Metallica, I am only 4-5 guys in the whole world, and my copyright is heavyweight. It makes big money across oceans. The recording company better lookout for all infringements. But I am also a traveller sharing his pictures on the Internet just like that with the same kind of copyrights. But if my copyright gets violated, there’s not much doing on the way from my hosting service. I am not big money, my copyright is featherweight, or worse, pea-weight. The hosting service is still making money from the ads that result by way of pageviews on my picture pages and god knows how many in my audience click on them, but I am benefitted by none.

Is something wrong again?? Wrong is, the creators now don’t get paid for their creations. People have always wanted it for free, so what the heck, Mr Website Owner says, give it away on a web page with some mumbo-jumbo passed for copyrights and lets keep the dime with ourselves. Should I, the creator, not get a cut for the traffic my creations brings to the website I am hosting my stuff on?? Or shouldn’t the website proactively sue someone for violating the copyright on my creations, something that I have trusted this website with??

The Social Media has come a full circle, from the 90s, when you were only the audience, to the NOW, when you are the artist and you are the fan. So is your copyright holding it all together for you?? Are you being paid for the Intellectual Property that you are generating and hosting it with somebody?? I will leave you with questions here and continue on this topic sometime later, but will definitely finish it before I go in for the talk at BarCamp, where it is scheduled.

I can’t really make my point here until you open the image below in a separate tab or something and view it in full size. This plot has been generated using earthquake data for the past hundred years from earthquake.usgs.gov and it was plotted on a world map representation using MATLAB. My question is posed in full glory beneath this image.

Seismic Activity plotted with data from USGS using MATLAB

All the dots on this image are the epicentres of a recorded earthquake as per data from USGS. The more yellow a dot is, the more severe the earthquake that was recorded, so basically higher the Richter magnitude. Blue dots are relatively low magnitude ones.

From the image you can make out the African plate in the middle, the American plates to the left of it[you can see the California fault to the very left of the North American plate], and at the top-right corner of the image is Japan. So now you can make out some serious fault lines represented here as dense yellow dots.

My question is, Why are all the fault lines running from north to south, i.e., vertical, and not more like parallel to the equator?? Has this anything to do with the direction of earth’s rotation??

Please leave your answers in the comments section below.

Ok, so we had virtual keyboards for some time on login pages being served worldwide. In fact so long that we had this. So we have virtual keyboards here again, and some smartness, some.

Earlier in this blog we covered some crypt way to send passwords to the server from the browser, and thanks to the response, i feel motivated enough. Now we are onto making a virtual keyboard, and yeah, this is a proof-of-concept and you are free to take it to the moon alongwith you.

We are just going to blank out all buttons just before the user is going to click on one. Basically do a backgroundColor = fontColor on all buttons to make it difficult what is written on the buttons on mouseover and restore on mouseout. Normally a user figures out which button to click on and then positions the mouse on the button and clicks, so if the button is showing what is written on it, definitely some proof-of-concept program can take a snapshot of the web page to figure out which button was clicked on. We are just going to wipe the face of the button off. For some more fun, we are going to randomize the order of buttons at will by calling randomizekeys() and supplying the order of the keys as an argument. And yeah, the styling class is closely tied to the javascript functions, so keep that in mind while playing with styles or the javascript. So here we go[look at the onload handler in the body tag] …

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <title>Virtual Login Panel</title>
    <style>
    .loginnumkey {
        background:#000;
        color:#FFF;
        padding:5px 0 5px 0;
        min-width:40px;
        font-size:16px;
        font-family:tahoma;
        margin:1px;
    }
    </style>
    <script>
    function randomizekeys(assigncode, numkeysclass)
    {
        var j = 0;
        var els = document.getElementsByTagName('input');
        var elsLen = els.length;
        var pattern = new RegExp('\\b'+numkeysclass+'\\b');
        for (var i = 0; i < elsLen; i++)
        {
            if ( pattern.test(els[i].className) && j < assigncode.length)
            {
                els[i].value = assigncode[j];
                j++;
            }
        }
    }
    function keysoff(numkeysclass)
    {
        var i = 0;
        var els = document.getElementsByTagName('input');
        var elsLen = els.length;
        var pattern = new RegExp('\\b'+numkeysclass+'\\b');
        for (i = 0; i < elsLen; i++)
        {
            if ( pattern.test(els[i].className) )
            {
                els[i].style.backgroundColor = '#FFF';
            }
        }
    }
    function keyson(numkeysclass)
    {
        var i = 0;
        var els = document.getElementsByTagName('input');
        var elsLen = els.length;
        var pattern = new RegExp('\\b'+numkeysclass+'\\b');
        for (i = 0; i < elsLen; i++)
        {
            if ( pattern.test(els[i].className) )
            {
                els[i].style.backgroundColor = '#000';
            }
        }
    }
    function clicknumkey(inputid, inputvalue)
    {
        document.getElementById(inputid).value =
		document.getElementById(inputid).value + inputvalue;
    }
    </script>
</head>

<body onload="javascript:randomizekeys('1095673824', 'loginnumkey');">

    <input type='text' id='passwordbox'>
    <br><br>
    <input type='button' id='lkey1' value='1' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey2' value='2' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey3' value='3' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <br>

    <input type='button' id='lkey4' value='4' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey5' value='5' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey6' value='6' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <br>

    <input type='button' id='lkey7' value='7' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey8' value='8' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkey9' value='9' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <br>

    <input type='button' id='lkey0' value='0' class='loginnumkey'
    onclick="javascript:clicknumkey('passwordbox', this.value);"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

    <input type='button' id='lkeyclear' value='reset' class='loginnumkey'
    onclick="javascript:document.getElementById('passwordbox').value='';"
    onmouseover="javascript:keysoff('loginnumkey');"
    onmouseout="javascript:keyson('loginnumkey');">

</body>

</html>

This may not work in IE, I mean this code snippet. If you want to make it work, just fiddle with i, j declarations in the function randomizekeys(), like moving them around in the function.

Out of ten people I know, atleast one has asked me how are social networking sites profitable. Out of hundred people I know, atleast one is trying to erect a social networking site and is desperately trying to answer this question. I am talking about the second most popular question on earth after “Where is God?”.

How are social networking websites making money?

If you are one who is trying to up a social networking website, I would like to share some gathered thoughts here about how one can monetize a social networking website and how one cannot, or if you know more, please use the comments section below, I am around and eager.

Userbase is money: NO. Yahoo has 500mn users, and if this were true, you would know more about Jerry Yang than some Brinn or Page or Zuckerberg. Having a hugely popular website is not going to get you rich unless you have a revenue model already planned into it. So get out of this mindset, as this is the first no-brainer that a sales guy will throw at you if you asked him this question.

I will put in Ads: I really don’t know which wise guy had this inundating brainwave of allocating real estate on web pages and charging businesses for the ads shown on them. This is not TV. I myself know, I haven’t clicked on a single ad till date, they are just not useful and they are not convincing enough. I am sorry AdSense, you are good, but I am sorry, in fact, ask tickle.com[the online IQ testing website] for some data about the users which came in from your ad clicks and how much was their IQ range, should be an eye-opener. Anyways, so people don’t read entire web pages from top to bottom, left to right, sequentially as if watching a TV, spending time with every commercial on it just because they can’t skip the commercial breaks. On web pages, people just navigate to the exact section and click. And with usability getting to ever higher levels and the content getting more relevant, users are almost hypnotized. You may find umpteen success stories about how per-click ad programs made people rich, but you have to find one yourself in this real world to be convinced, and you won’t find one[1].

I will have users subscribe by paying: I suggest take a stroll if this idea is doing the rounds in your head. Do only what you will be comfortable with if you were the user. This could only work if what you are selling is a product or some indispensable service or support. And yeah, don’t lame it up like this[2].

Those were the myths. On to the facts.

Micropayments: Good things come in small packages. Very small. Imagine putting in goodies that cost a dollar by the hundred, and now if you have the userbase, this is bound to work. This may not get you to the top of the Forbes list, but will surely be a steady source of revenue.

Merchandising: You just have to do a count of the number of websites cropping up that claim to get a customised t-shirt to you. I bump into such websites each day, twice. If you have anything else other than pictures to put up on t-shirts or mugs or teddy bears, this could be just the way to leap out of the screen. Although this might be costly, but margins will be high if done in volumes and shipping be within a manageable geographical area.

Revenue-Sharing: Google shared commission with people if they put up AdSense code within their pages. Microsoft is showering its resellers. The Facebooks/Bebos have to do this. The fancy of social networking websites has long gone and people are still using it because its as much a part of them as their email addresses. They are spending ever increasing amounts of time each day on these websites and are still not that much loyal to not consider switching to another site, a better and rewarding one. Its only a matter of time before most of these users come to know and believe that they are buying your lunch. And after that its another few moments before someone comes up who is willing to share his lunch and pay his users their share. I can’t tell you how to share your revenue with your users, totally depends on the niche and technology you are working on, but if you don’t respect the time and effort your users are putting in you might just find some rough times ahead. This is specially true for websites that are solely thriving on user generated content[3].

And as another observation, selling anonymized trends on your website to your ad partners is not a very creative way to go about earning money. I guess the next step would be to get businesses to users who just want it. Permission Marketing[4].

Whatever you do, don’t start without a revenue model as that speaks of zero business insight on your part, and secondly it is very tough to incorporate a revenue model later in a very much alive site[5]. The stories that you might be entertained with is how google and youtube and so on started without a revenue model and so on, and are making big money today, well, they started when internet was only a place to check emails[6], not some place where you shop, play, meet people, learn and almost live your life there. They started out of pure geekness and a need to solve the problems the creators were facing. In comparison RockYou did an exhaustive study of the market and came out with widgets which hit right on target and made RockYou worth around 400mn $[7] in under 2 years. Keep looking and you will be convinced more and more of having a revenue model.

Quoted from What does the “Media Business Model” mean?[also contains an exhaustive list of all possible monetization methods]:

Both media and most online businesses are based on “software economics”, where the cost of creating something of value is relatively high but the marginal cost of distributing it to each consumer is very low.

In a javascript world ruled by prototype and scriptaculous, all visual effects & animations in web pages are effected by them. But DIY still means Do-It-Yourself. Lets waste no time smelling the perfume and cut to the flesh …

function animateThis(fxargs, fxtp)
{
var fxargsstr = ”, argseparator = ”;
var fxname = fxargs.callee.toString();
fxname = fxname.substr(‘function ‘.length);
fxname = fxname.substr(0, fxname.indexOf(‘(‘));
for(var i = 0; i < fxargs.length; i++)
{
fxargsstr = fxargsstr + argseparator + “‘” + fxargs[i] + “‘”;
argseparator = ‘,’;
}
fnstr = fxname +’(‘+fxargsstr+’)';
setTimeout(fnstr, fxtp);
}
What is that?? Hmmm … I guess I am seeing settimeout on steroids. Put:

animateThis(arguments, <a span of your choice measured in milliseconds>);

in a function body and that function gets called every that many milliseconds with the exact argument set supplied to it as was supplied when the function was first called. So a Fade-In function in javascript using this function would look like this:

function fadeIn(elementID)
{
var el = document.getElementById(elementID);
var opac = el.style.opacity; //read the current opacity value of the target element
if(opac < 1) //if not reached full opacity
{
opac = parseFloat(opac) + 0.05; //increase the current opacity value
el.style.opacity = opac.toString();
animateThis(arguments, 20); //call this function every 20 milliseconds
}
}

and just call this on a div with opacity set as 0 and an ID of lets say ‘testdiv’, with something like:

<a href=’#’ onclick=”javascript:fadeIn(‘testdiv’);”>bring in</a>

and see the div come into view. Geekness.

The example will only work on Firefox but the function animateThis() has been tested on FireFox 2-3, IE 6-7, Safari, Opera. In case you find some issue, tell me and I will have things set right.

And yeah, CS students, this is not recursion. This is a timer.

Walking the DOM in JavaScript has been covered well and good. But I couldn’t find substantial help when it came to walking the DOM tree of HTML files in PHP. It seems all there is to DOM is limited to XML. It would be wonderful if we could keep aside all tags and the related regex mumbo-jumbo to parse tags away, and instead check the values, text contained, IDs of elements, their class names and style rules. The function presented here walks through all the elements presented in a HTML file accessing all the node attributes and node values.

Anyways, being the wonderful thing that DOM is, I cooked up a small little function to walk the tree of an HTML file in PHP and print the output to screen, and boy does it walk. Anyway, less talk and more …
<?php
function walkDom($node, $level = 0)
{
$indent = ”;
for ($i = 0; $i < $level; $i++)
$indent .= ‘&nbsp;&nbsp;’; //prettifying the output
if($node->nodeType != XML_TEXT_NODE)
{
echo $indent.’<b>’.$node->nodeName.’</b>’;
if( $node->nodeType == XML_ELEMENT_NODE )
{
$attributes = $node->attributes; // get all the attributes(eg: id, class …)
foreach($attributes as $attribute)
{
echo ‘, ‘.$attribute->name.’=’.$attribute->value;
// $attribute->name is usually one of these:
// src, type, rel, link, name, value, href, onclick,
// id, class, style, title
// You can add your custom handlers depending on the Attribute.
}
//if( strlen(trim($node->childNodes->item(0)->nodeValue)) > 0 && count($cNodes) == 1 )
//echo ‘<br>’.$indent.’(contains=’.$node->childNodes->item(0)->nodeValue.’)'; // do this to print the contents of a node, which maybe the link text, contents of div and so on.
}
echo ‘<br><br>’;
}
$cNodes = $node->childNodes;
if (count($cNodes) > 0)
{
$level++ ; // go one level deeper
foreach($cNodes as $cNode)
walkDom($cNode, $level); //so this is recursion my professor kept talkin’ about
$level = $level – 1; // come a level up, and had to do it this way or else wordpress would take away one dash.
}
}
?>
Is that good?? Because here is how you use it:
<?php
$doc = new DOMDocument();
@$doc->loadHTMLFile(‘http://www.google.com’);
walkDom($doc);
?>
And this prints away the entire DOM of the read in file specified by the URL to loadHTMLFile. More information about the used constants and functions can be found here. And believe me, this works.

Prettifying the address bar is a last stop in the modern day Internet. It is always this way:

Good: http://www.whatasite.com/dude/djjo/music

Bad: http://www.whatasite.com/user.php?cat=dude&profile=djjo&page=music

The name here is search-friendly urls, although how search friendly they have been, nobody knows[SEO people 'can' tell], but they certainly are friendly to users, among other things. So if your question is “how to make search friendly urls or urls without question marks and full stops”, here is how I do it.

This article is based on the Apache server platform. If you are running Windows, you might try installing WAMP or XAMPP to get Apache. Once you have this running open up httpd.conf in your pink-n-blue text editor and look for something like this:

#LoadModule rewrite_module modules/mod_rewrite.so

If you can’t see the ‘#’ prefix to the rest of the line, you are lucky, or else remove the ‘#’ from the front[uncommenting the command] and restart Apache.

Once this has been done, to check if you are ready to begin and that mod_rewrite is really active, create a file in your web root directory, lets say test.txt with some text in it. And now over to doing the magic. Locate the .htaccess file in your webroot and again get your pink-n-yeahyeah editor and add the following lines:

RewriteEngine On
RewriteRule ^magic\.txt$ test.txt

Now try to get magic.txt in your browser and you will definitely see some magic txt. What you will see is the contents of test.txt, as if you asked for test.txt, which is what you did. Lets explain the above two lines to ourselves. URL Prettifying needs a little bit of knowledge of Regular Expressions. You can learn about regular expressions here, here & here. The first line sets the RewriteEngine rolling and the second line is a rewrite rule. The first part of the rule:

^magic\.txt$
^ = the beginning
\. = look for the character ‘.’. A plain ‘.’ in a regex means any non-whitespace character.
$ = and this is the end

The second part is the name of the file or the new url which is sent to the server instead of the first part. So in our case, asking for ‘magic.txt’ will get you test.txt. So basically a RewriteRule is of the form:

RewriteRule <what the browser asks> <what you serve>

Please note that, all rules should come after the ‘RewriteEngine On‘ directive, and unless this line is found, not a single rule will be interpreted it. And now for a funnier version, try this rule instead of the earlier one:

RewriteRule ^magic\.txt$ http://www.google.com

So before you get ideas, let me finish what we begun here. Lets say we have a website that generates a URL like this one to go to an album page:

http://www.whatasite.com/album.php?user=djjo&page=7

Now as cumbersome that is to remember, and search engines are known to run for cover on seeing such pages as these dynamic pages are known to be pointing towards itself and doing such round and closed references thus taking an awful lot of time of the search crawler. Bad. We want the crawler to see this, for which we need to make it look like regular html pages with no scary or ’special’ characters:

http://www.whatasite.com/album/djjo/7

And the rule to do the above is:

RewriteRule ^album/([a-z]+)/([0-9]+)$ album.php?user=$1&page=$2

Just a gentle reminder, that these rules are to be written in a file named .htaccess lying in your web root(typically named ‘www’) directory. Now onto simplifying the above rule:

^album/([a-z]+)/([0-9]+)$

^, from the start match the string ‘album’ followed by the first slash

([a-z]+), after the first slash, look for a group of characters[the characters allowed are from 'a' to 'z' and '+' sign means 'one or more'], which we know to be the user name. A group enclosed in brackets is considered as a variable. Since this is the first group[the username], it will be called $1. We will use this in the second part of the rule.

/([0-9]+)$, and after the second slash, look for another group of numerals from 0 to 9, and one number or more. And as this is the second group[the page number], this is $2. The final $ at the end of the expression means we end the first part here, so its like a terminator.

album.php?user=$1&page=$2

We have $1[username] & $2[page number] from the first part of our rule. So we will substitute these values to our URL as they earlier were supplied, which make the second part quite easily look like what we have here.
I guess that pretty much does the job here. And oh yeah, if your user name has numerals in it[alongwith alphabets], just use something like this [a-z0-9]+ instead of [a-z]+. A range of uses of url rewriting have been written about here. Should you have any queries or doubts or clarifications to make, just leave a comment and I will be good enough to notice it.

You have a search page and as the results end you show a navigation bar with links to the other pages of the search. So boring. Seriously. This is the Web, and I am still turning pages.

And I think I am Pied Piper who will save you from this hell. The uber-cool solution is, detect as soon as a user is about to reach the end of the page and get new content[the second page of the search], just in time. Setting out, we need:

The height of the current document. So to this end, we will place a div with a decided upon ID at the end of the page. And all the content in the body will be loaded in another div just above this last div. We are detecting the document height by detecting where this ending div is located, pixel-wise, with this:

pageend = document.getElementById(‘laststop’).offsetTop;

So clearly, the ID of the last div is ‘laststop’. Next we need the screen resolution of the client window to find out how much of the document is visible right now. We do:

winheight = (typeof window.innerHeight != ‘undefined’ ? window.innerHeight : document.body.offsetHeight);

Now having this much, we need to detect when does the user scroll the page to the bottom. The following lines will give exactly how many pixels from the top have you scrolled to. Note that, this is the ‘height’ from the top of the document to the top of the visible area. The real end of the document is obtained by adding this ‘height’ and the window height retrieved earlier.

if(navigator.appName == “Microsoft Internet Explorer”)
alert(document.body.scrollTop);
else
alert(window.pageYOffset);

But these lines need to be run every few seconds to check as soon as as the user reaches the end of the current page. So we will do a setInterval() in the onload event of the body to do so. And keep the interval time to something a little over 2 seconds and nothing less than that, you of course don’t want your user’s browser to hang on them. It is annoying.

Said and done, this is what you end up with, demofile.php, annotated with explanatory comments:

<html>
<head>
<title>Page End Reached Detection Demo</title>
<script type=”text/javascript”>
var oRequest;
var pageend, winheight;
var howoften = 2000;
// this value implies that function howlow() will keep checking every
// 2000 milliseconds(2 seconds) to find out how low is the user on the page

var bufferHeight = 300;
// adjust bufferHeight, to take action as soon as the user is within these
// many pixels of the end of the page, so a larger buffer makes sure the user doesn’t
// see the dynamic page content loading. In this example, the script will fetch content
// as soon as you are within 200 pixels of the end of the page

// ooooo, ajax. ooooooo …
if(window.XMLHttpRequest)
oRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

function sendAReq()
// a generic function to send away any data to the server
// specifically ‘morecontent.php’ in this case, to get more content from the server
// all content fetched will be handled by showcontent()
{
oRequest.open(“POST”, “morecontent.php”, true);
oRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oRequest.onreadystatechange = showcontent;
oRequest.send(null);
}

function showcontent()
{
if(oRequest.readyState == 4)
{
// now all the data that comes adds to the end of the page, specifically
// to the container div referenced with the ID ‘bodycontent’
if(oRequest.status == 200)
document.getElementById(‘bodycontent’).innerHTML = document.getElementById(‘bodycontent’).innerHTML + oRequest.responseText;
else
alert(‘No Response from Server. Try Again Later.’);
}
}

function calcParams()
{
// calculate the end coordinates of the page and the visibile height of a page
// at any time on the client’s desktop
pageend = document.getElementById(‘laststop’).offsetTop;
winheight = (typeof window.innerHeight != ‘undefined’ ? window.innerHeight : document.body.offsetHeight);
}

function isitend(curpos)
{
calcParams();
if((curpos + winheight + bufferHeight) > pageend)
{
alert(‘you are reaching the end of the page;’);
sendAReq();
}
else
{
alert(‘keep going’);
}
}

function howlow()
{
if(navigator.appName == “Microsoft Internet Explorer”)
isitend(document.body.scrollTop);
else
isitend(window.pageYOffset);
}
</script>
</head>

<body onload=”javascript:setInterval(‘howlow()’,howoften);”>
<div id=’bodycontent’>
<?php
for($index=0; $index<200; $index++)
echo ‘Line:’.$index.’<br>’;
?>
</div>
<div id=’laststop’/>
</body>
</html>

Oh and yeah, this sends a request using the XMLHttp object so we need another php file at the server to catch the request and send in additional content. This additional content will be appended to the div with ID ‘bodycontent’. So here is morecontent.php

<?php
for($index = 0; $index < 100; $index++)
echo ‘We Are New Lines:’.$index.’<br>’;
?>

That’s about it. Please do throw in your experiences with this in the comments section below and I will surely respond. I am jobless.

We have had encryption, we have had SSLs, … well we also had digitally signed certificates, but where’s the hack?? How can you cook up a secure login form that does the following:

[1] doesn’t send the login information in clear-text

[2] in case somebody is sniffing the line, he/she shouldn’t be able to login with the sniffed information

So, with the above information in hand, here is what we do, and how we do.

You need:

[1] http://www.webtoolkit.info/javascript-md5.html [javascript implementation of MD5]

[2] Two php functions. runquery($query) , which will run a query supplied as string & getcol($query) will get the column asked for in a select statement.

Now, create a table, if you don’t already have, to store user information. What we do want to be stored is the login timestamp.

create table user(
loginid varchar(200),
password varchar(200),
lastLoginTS bigint
);

Now your login.php file should look like this:

<html>
<head>
<title>Secure Login Form</title>
<script type=”text/javascript” src=”md5.js”></script>
</head>
<body>
<form action=”dologin.php” method=”post” onsubmit=”javascript:document.getElementById(‘phash’).value = MD5(document.getElementById(‘password’).value + document.getElementById(‘hts’).value); document.getElementById(‘password’).value = ” ;”>
LoginID: <input type=”text” name=”loginid”><br>
Password: <input type=”password” name=”password” id=”password”><br>
<?php
$TS = time(); //the current timestamp
echo “<input type=’hidden’ value=’”.$TS.”‘ name=’hts’ id=’hts’><br>”;
?>
<input type=’hidden’ name=’phash’ id=’phash’ value=”>
<input type=”submit” value=”send”>
</form>
</body>
</html>

This file assumes in the line “<script type=”text/javascript” src=”md5.js”></script>” that you have a file named md5.js in the same directory as login.php, and the javascript file should have a function named MD5(). So make sure this is the case. Next up is dologin.php:

<?php

$loginid = $_REQUEST['loginid'];
$phash = $_REQUEST['phash'];
$hts = $_REQUEST['hts'];
$password = getcolumn(“select password from user where loginid=’$loginid’;”);
$lastLoginTS = getcolumn(“select lastLoginTS from user where loginid=’$loginid’;”);

if(strlen($loginid) > 0 && strlen($phash) > 0 && $phash == md5($password.$hts) && $hts > $lastLoginTS)
{
runquery(“update user set lastLoginTS=’”.time().”‘ where loginid=’$loginid’;”);
echo “done”;
}
else
echo “failed”;
?>

That’s it. So now what is the deal here. This is your regular login form except that the password is hashed with a timestamp value sent in a hidden form field named ‘hts’. The hashing is done in the event handler for the Javascript onsubmit event, and the password field is cleared as well, to prevent it from being sent in the clear.

The server receives the loginid, timestamp and the hashed value from the client. Retrieve from your database the original password for the loginid specified and calculate another hash at the server with the help of the retrieved original password and the timestamp sent by the client. If the user typed the password correctly, the hashes will match.

This method of course, sort of, encrypts the password and hence prevents the password from being sent in clear, should anybody be sniffing the lines. But should anybody be really sniffing the lines, he/she can just store the values and send them again and again to validate him/herself at the server posing as the valid user. To prevent that, there is another check at the server just before validating. The timestamp sent by the client should be always greater than the last login timestamp stored in the database for that user. Since the last login timestamp is only updated on a successful login, as soon as a valid user logs in, the last login timestamp for the user is updated in the database, and as a result, the sniffed information is rendered stale. The hash now needs to be calculated again using a fresh timestamp and a password which only the user and server know.

I hope this suffices for most of you out there.

UPDATE : This is a proof of concept. The system described here lacks certain things which are very obvious and shouldn’t omit them just because I haven’t mentioned them here to make it simple to grasp. Foremost[thanks William], don’t store passwords in cleartext on the server. Try looking up “hashing password with salts” for that.

So … here’s the real deal into measuring how much time a user spends on each individual page by url, and measured in milliseconds.

[1] As soon as page loads, set the current time in a variable in javascript with the help of the onload event. Let this variable be called tstart.

[2] On the unload event, get the current timestamp, and subtract from this the starting timestamp, the first one. So tTotal = tend – tstart.

[3] Now send this time information alongwith location.href to your server, which will record this in a log file, or database to use later, maybe to serve relevant content by keeping in mind a users viewing and browsing patterns.You get the picture right.

So here are the files. Just store monitorme.html & logtimefile.php somewhere on your server and create a writeable file in the same directory named as timelog.txt. Now get monitorme.html and now refresh your page, navigate away to some other page or just plain close the window to find your timelog.txt file piling up with times you spent on the page.

monitorme.html

<html>
<head>
<title>Duration Logging Demo</title>
<script type=”text/javascript”>
var oRequest;
var tstart = new Date();

// ooooo, ajax. ooooooo …
if(window.XMLHttpRequest)
oRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

function sendAReq(sendStr)
// a generic function to send away any data to the server
// specifically ‘logtimefile.php’ in this case
{
oRequest.open(“POST”, “logtimefile.php”, true); //this is where the stuff is going
oRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oRequest.send(sendStr);
}

function calcTime()
{
var tend = new Date();
var totTime = (tend.getTime() – tstart.getTime())/1000;
msg = “[URL:" location.href "] Time Spent: ” totTime ” seconds”;
sendAReq(‘tmsg=’ msg);
}
</script>
</head>

<body onbeforeunload=”javascript:calcTime();”>
Hi, navigate away from this page or Refresh this page to find the time you spent seeing
this page in a log file in the server.
</body>
</html>

logtimefile.php

<?php
function logtimemsg($timemsg)
{
//write your own handling code here, store it in a file or store it in a DB, whatever
$logfilename = ‘timelog.txt’;
if (is_writable($logfilename))
{
if (!$handle = fopen($logfilename, ‘a’))
{
exit;
}
if (fwrite($handle, $timemsg.”\r\n”) === FALSE)
{
exit;
}
fclose($handle);
}
}

logtimemsg($_REQUEST['tmsg']);
?>

UPDATE: People, I love if anyone of you writes back, even if to tell that this doesn’t work. Thanks to JayVee who pointed that <body onunload=”> sucks compared to <body onbeforeunload=”> for this post. Change accomodated.