Well it’s Monday, so let’s do something different. Let’s build a simple form with 2 fields: email address, and password. We want to focus on client side validation, so we will add a second password field to compare against and a password strength field. Password strength is becoming more and more popular, so we’ll build one with a twist - let’s animate it.

Now I have labeled this post as episode one. It will a complete post, however, we will add on to it in the weeks to come to create a full sign-up form with lots of cow bell! One last thing before I start cutting code. This article should be straight forward, maybe 2/5 in difficulty, using JavaScript/Prototype, CSS2 and XHTML.

Okay here we go, first things first. If someone makes an error or mistake, we want to display a custom message. Now, rather then having a message at the top of the screen saying what field the error is on, we are going to have a box dynamically inserted. Well, moved in the DOM pointing right at the field with a custom error message.

So the markup will look like this:

We will call this warning box, warningfs for frame set and hide it right off the bat. At this point it really dosent matter were in the body you put it because we will move it where we need it later. There are a few more components to this warning frame set:

tic: an image pointing up.

msg: id where the message will appear, and disappear when you click on it and

shadow: another box offset to give a shadow effect.

Â? Â? Click here to view the CSS file.

I’m not going to get into the nuts and bolts behind the actual markup as it should be easy to follow. I do want to point out that I used a table rather then div’s -Â? some habits take a long time to break.Â? I felt it would be quicker to write andÂ? less weight on my CSS, but really thats just an exscuse.

What we are going to do is loop through all the input fields and add a focus and blur event to each one, we are also going to validate off the focus and blur in the background.

var aElements = Form.getElements(’form1′);
for(var i=0;i Â? Event.observe(aElements[i],’blur’,fncBlurInput.bind(aElements[i]),false);
Â? Event.observe(aElements[i],’focus’,fncFocusInput.bind(aElements[i]),false);
}

To make the fields light up we use color fx - Tom Jensen (http://neuemusic.com/). I started writing my own color changer, but itÂ? was twice as many lines. Tom Jensen’s is very eleigant. While I’m on the subject of external libaries, we will also use Moo fx, http://moofx.mad4milk.net/, We need it to animate our password strength field and color fx extends it. If you get a chance, check out some of the other stuff Valerio Proietti is up to. It’s all very nice!

So lets have a look at those two functions:

Â? Â? function fncFocusInput() {
Â? Â? Â? Â? Â? Â? Â? var id = this.id;
Â? Â? Â? Â? Â? Â? Â? var colorSwap =Â? new fx.Color(this.id, {fromColor: “#FFFFFF”, toColor: “#EFEFEF”});
Â? Â? Â? Â? Â? Â? Â? var borderSwap = new fx.Color(this.id, {fromColor: “#CCCCCC”, toColor: “#0066FF”, property: “borderColor”});
Â? Â? Â? Â? Â? Â? Â? colorSwap.toggle();
Â? Â? Â? Â? Â? Â? Â? borderSwap.toggle();

Â? Â? Â? Â? Â? Â? Â? $(id).parentNode.insertBefore($(’warningfs’),$(id).nextSibling);
Â? Â? }

Â? Â? function fncBlurInput() {
Â? Â? Â? Â? Â? Â? Â? var id = this.id;
Â? Â? Â? Â? Â? Â? Â? var colorSwap =Â? new fx.Color(this.id, {fromColor: “#EFEFEF”, toColor: “#FFFFFF”});
Â? Â? Â? Â? Â? Â? Â? var borderSwap = new fx.Color(this.id, {fromColor: “#0066FF”, toColor: “#CCCCCC”, property: “borderColor”});
Â? Â? Â? Â? Â? Â? Â? colorSwap.toggle();
Â? Â? Â? Â? Â? Â? Â? borderSwap.toggle();

Â? Â? Â? Â? Â? Â? Â? if (id == ‘email’ && $(id).value.length > 3) {
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? fncValidateEmail($(id));
Â? Â? Â? Â? Â? Â? Â? }

Â? Â? Â? Â? Â? Â? Â? if (id == ‘password2′) {
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? fncPasswordMatch($(id));
Â? Â? Â? Â? Â? Â? Â? }
Â? Â? }

So, walking through the focus function, we set the new focus field and move our warning frame set to the field where there might be a warning. We still keep it hidden. On the blur function we set the color back to the origional, and check to see which field we are working on. If it’s the email field, we run a validate function, and if it’s the second password field, we check to see if it matches the first field.

Here is the email validation function:

Â? Â? function fncValidateEmail(objEmail) {
Â? Â? Â? Â? Â? Â? var strEmail = objEmail.value;
Â? Â? Â? Â? Â? Â? var pattern = /^[a-z][_.a-z0-9-]+@[a-z0-9][a-z0-9-]+\.[a-z]+([.]?[a-z][a-z]+)*/;
Â? Â? Â? Â? Â? Â? var results = pattern.test(strEmail);
Â? Â? Â? Â? Â? Â? Â?
Â? Â? Â? Â? Â? Â? if (results == false) {
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? $(’warningfs’).style.top = getActualTop(objEmail) + 33;
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? $(’warningfs’).style.left = getActualLeft(objEmail);
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? $(’warningmsg’).innerHTML = “Please enter a valid email address.”;
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? $(’warningfs’).style.display = “block”;
Â? Â? Â? Â? Â? Â? } else {
Â? Â? Â? Â? Â? Â? Â? Â? Â? Â? $(’warningfs’).style.display = “none”;
Â? Â? Â? Â? Â? Â? }
Â? Â? Â? Â? Â? Â? return;
Â? Â? }

This is a simple regular expression. If there is an error, we display our warning frame set, else, we make sure it’s hidden. The PasswordMatch function is also quite similar. Check the source for that function.

Now the other big test we do is check the password strength. I’ve kept it out of the focus, blur loop and added the listener to the bottom of the init function ‘onkeyup’. Our password strength is going to be based on a series of tests: is it more then 5 characters, does it have at least one number, does it have at least one uppper case letter, and does it have one special character. Feel free to play with this and make it better.

To create the actual effect, we have two DIV’s sitting on top of each other using z-index, and we use fx.width to animate the top div to show the password getting stronger or weaker. It’s a nice effect and really not too difficult to recreate.

We are done, for now. I really hope you have enjoyed this tutorial, and if you have any questions, please let me know. Also, check back shortly to see how to add IP/GEO lookup checking and Postal/Zip to City checking.

Download and Demo:
Â? Â? Â? Click here to view the demo.
Â? Â? Â? Click here to download the compete souce zip.

References:
Â? fx color - Tom Jensen (http://neuemusic.com/)
Â? moo fx - Valerio Proietti (http://moofx.mad4milk.net/)

It would be foolish to assume or even suggest that the recent deal, the recent $900 million deal to be exact, between search giant Google and News Corporation, is insignificant or a bad move for either company. Especially since the deal includes exclusive rights to the search and pay perÂ? click ads onÂ? The Beast known as MySpace. But if there is something that Google itself knows, it’s that searching on the Internet is an ever-evolving process. And while the rewards that will be reaped by both Google andÂ? News Corp.Â? will obviously be great, it will still be more of the same.

What Google has done with search engine technology is amazing, and, if not for their recent track record, this probably wouldn’t even be mentioning. However, pay per click ads, the fuel that has burned the Google fire so well, have been under a great deal of pressure with the industry speculatingÂ? that as much as much as 30 to 40% of clicks being directly related to click-fraud. Google hasn’t had the bad press that Yahoo! had when reports surfaced that Yahoo! had some connection with spyware companies like 180solutions, but Google depends more on that market than Yahoo! does. And with the release of AOL’s search results, there are those already suggesting that Google’s ad revenueÂ? will be affected. If Google starts to slip, especially in any area directly related to their core business, it could spell bad news for the company and the Industry.

Google does have a near monopoly in the search engine market. There are those that even suggest that Google’s share of the search engine market is more than 70%. When it comes to searching, the company obviously knows what it’s doing and does it well. Unfortunately, as mentioned earlier, searching on the Internet is evolving. For some specific searches on the Internet, there are much better sources. Digg, IceRocket,Â? and Technorati for blogs andÂ? Healthline for health related searches are perfect examples.

Again, it must be noted that Google is the dominant player in the search engine market. Adding a collection of websites that includes becoming the search engine and advertising companyÂ? on the fastest growing website on the Internet is only going to help that. But as searching changes, more of the same isn’t going to do any good, and there are thoseÂ? that question Google’s choice of wow instead of consistency. With rivals Yahoo! and Microsoft each having their own adaptations to the search engine market, one with custom searchesÂ? while the other tries to bring a third dimension to the search experience, Google may be the company getting too comfortable. One could argue if it aint broke, don’t fix it, but then that’s the exact kind of thinking that allowed Google to become the top search engine, isn’t it?

This article should be a great resource for anyone starting to learn AJAX programming, and we are going to make it even easier with Prototype. I will assume you know the basics in XHTML, CSS, JavaScript, and PHPÂ? even though we won’t actually use PHP. Please visit http://www.w3schools.com/ if you’re already lost at this point.

Let’s really get down to the basics. AJAX is used to deliver data from the server without refreshing the page. Thats it, thats all. Data can be in the form of a page fragment, text, or data that we process into a data array like in our previous example (creating a option list).

We will use Prototype to actually make the AJAX call because it checks to see which browser is being used and does alot of low level processing for us.
The data we want to pull from the server will be a text string “Hello World.” So lets start.

Lets create a file hello_world.html that looks like this:

Â? Â? Â? Hello World

Now lets create main HTML file and make all this work!

We are done. Well, almost. Let me walk you though what we actually did here.
LineÂ? 3:Â? We call the Prototype Framework. This should be the first JavaScript file we call because it contains all the objects required to make everything work.
LineÂ? 20: We have a span with an id ‘display_area.’ This is where we want to insert the text from the server.
Lines 7-15: Our main function that does the work.Â? We call it init, but it could be called anything.
LineÂ? 9: We create a new Ajax.Request Object.
LineÂ? 10: We tell it what file to get.
Lines 11-14: The options we pass to the object, they include the method, GET. We could also tell the server we wanted to POST and onComplete.
LineÂ? 13: What we want to do when the the object has completed its operation. We pass in a function to display the response to the display_area id using innerHTML
LineÂ? 6: We need to ‘Fire’ the event and make everything work. We observe onload on the window object and call the init function when it happens.

Thats it, We’re are done. For more info on Prototype and all the other properties, methods, and options check here.

Proving yet again that he’s at the top of the game on the Internet, Michael Arrington and a group of CEO’s and executives from companies like Browster, JotSpot, and Socializr sit down and talk about Web 2.0. Here isÂ? the post on the Techcrunch website.

Â? From the Techcrunch post:

The topics discussed included:

1. What is Web 2.0?
2. Are we in a bubble?
3. What are the business models that will work on the web today?
4. What is the role of publishers in a user generated world?
5. How important and how big is the early adopter crowd?

It’s difficult to look at the website and really pin down any one thing that caused it to, almost out of nowhere, grow into arguably the most dominant force on the Internet. Look at this list of social networking websites, and tell me exactly how MySpace was so different. With growth in so many different directions, from personal profiles to band profiles to videos to search etc., and at a rate that has been unmatched. Consider this for just a moment. The largestÂ? three InternetÂ? companies in the world are billion dollar companies: Google, Yahoo!, and MSN/Live. In around two years, MySpace has gone from almost nothing to competing with these companies that have all been established for several years. Assuming the company was worth nothing two years ago and is worth $1 billion dollars today, the company would have increased in value by over $1.3 million dollars per day over those two years. So how did MySpace do it?

Having become heavily involved in the industry shortly before MySpace came to be in existence, it was fairly obviousÂ? the users were ready for something to move into the social networking arena and really dominate. Classmates was probablyÂ? the first social networking website, starting in 1995,Â? and holds strong at forty millions users,Â? but there is a certain limit toÂ? theÂ? website based on its name alone. There are several different websites that reached a respectable size, like Hi5.com and Friendster.com. Jonathan Abrams founded Friendster inÂ? 2002 and ‘was considered the top online social network service until around April 2004 when it was overtaken by MySpace in terms of page views, according to Nielsen//NetRatings.‘

Starting in July 2003, it took MySpaceÂ? less than ten months to make it to the top of the category, and the growth didn’t stop there (as shown in the table to the left).Â? But, all these sites are the same, aren’t they? There are obviously several factors that lead toÂ? the website achieving what it did.

First, one can never ignore the effect thatÂ? luck and timing play with every venture. It’s not coincidence that the second wave of the web, which coincided with the increase in popularity of user generated content, hasÂ? matched up with the rise of MySpace. If the website had been released a little bit earlier, there’s a good possibility that the momentum would not have been sustained or the typical usersÂ? might not have been able to or have beenÂ? interested in creating a profile. If it had been released later, there’s almost no reason to assume that another website might have already filled the void. Despite the fact that luck and timing were in favour of MySpace, this alone didn’t create the growth of the website.

One of the aspects people enjoyed about MySpace was the freedom to make their profile truly unique and their own, with images, colours, and a variety of different add-ons. LiveJournal had similar freedom to create on their profiles, but the website was specifically catering to bloggers.Â? A problem MySpace faced with this was letting users achieve the look and feel that they wanted in a simple and easy to use way. The average user would never be able to code that themselves. But, sites were popping up everywhere with MySpace templates. Again, an example of luck and timing of these third party sites that allowed users to get more out of the website. Any user could have the freedom to create with a simple Google search. FromÂ? a Hitwise blog post: ‘[The] information [below]Â? demonstrates not only the sheer size of MySpace, through its ability to impact an entire category.‘ It’s definitely not coincidence that the sites most visited by MySpace users in the category of Web Development are also the sites most visited in general for that same category.

So, MySpace came into a well-established arena, came at the right time, gave the users what they wanted (the freedom to create), and the ability to actually achieve that look and feel, albeit through third party websites. These factors alone might have been enough to do good things, but despite all that, there is still one aspect of the site that, probably above all else, lead to the dominance on the Internet that MySpace is now known for. By choosing a very specific niche that everyone in the world can appreciate, use, and relate to, MySpace found a way to become the juggernaut that it is today. Music. Yes, music, and the angle of the site that was created by targetting bands is probably the number one reason for the success MySpace has had.

This point can obviously be argued, but this simple story is all I need to convince myself. A co-worker from a part-time job was absolutely anti-computer, even to the point that there was no reason to have an email address. The individual loved music, had some buddies that were just as into music as he was, and they were looking at putting together a band and making a go of it. Out of nowhere, he mentions this site, MySpace, which of course was familiar, and how he had joined the site. Didn’t really have an email address. Didn’t really understand or appreciate computers and the Internet. And yet, for some reason, this individual was a member of MySpace as something he saw as important to music, his music, and his band.

For a band starting out, the Internet provides a constant, cost-effective way to market itself and it’s music. With the increase in popularity of downloading music, the increase inÂ? broadband users (again, luck and timing), providing songs online for download made more sense. With the site catering to the music industry, bands created profiles. With a large enough pool of bands, there became value for users to browse these bands. The whole thing becomes a positive feedback loop. As more users joined, it made more sense for bands to have their profile on the site. With more bands, more users wanted to browse the bands. With more users there,Â? there’s more value for those less interested in music specifically to join anyway. The cycle continues and creates the snowball effect and builds momentum. But this is only still a piece of the puzzle.

As the site gained momentum, radio stations across North America started plugging MySpace. With the growth in full swing, coupled with the added attention from radio stations all over the continent, MySpace was a lock for glory. Even to the point where net-neophytes jumped on the bandwagon.

Of course, all these points can be argued. There are obviously aspects of the ‘juggernaut’ that were missed or chosen to be excluded. But overall, timing, luck, and a specific, universal niche that allowed for a plethora free advertising allowed MySpace to become a billion dollar company. With today’s announcement of the $900 million deal with Google, an amount that almost doubles what News paid to purchase the site, MySpace continues to show that it was a great deal and can generate revenue. With over forty million uniques in March of this year, MySpace isn’t slowing down, and with new features like MySpace video being added,Â? all that’s left to see is what’s next.