General talk

A place for all random thoughts and ideas that come across my mind and I can’t find the right “category” to put in…

Google AJAX search API

1347 days

by alex in General talk, Javascript, Programming, Reviews

Discover a great way to embed really customized searches in your site, use the Google search API (Using AJAX)

Here I'll show you how to develop a simple "Hello world" sort of program, using the Google API and AJAX to search.
There are 2 requirements though you need to fulfill in order to access the API:

Your web site must be freely accessible to end users.
Google will upgrade this API periodically, and you must update your site to use new versions of the API as they become available. The Gogle AJAX Search API team will post notifications of updates on the Google AJAX Search API Blog. (http://googleajaxsearchapi.blogspot.com/).

The second one is not that much of a requirement, but something you must take care of for your search to work properly...
So apply for your API key, and take into account that a single AJAX Search API key is valid within a single directory on your web server, including any subdirectories.
More information on the subject

So let's get going:
This is the HTML code of a website running the AJAX search:

 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google AJAX Search API Sample</title>
<link href="http://www.google.com/uds/css/gsearch.css"
        type="text/css" rel="stylesheet"/>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //< ![CDATA[
 
    function OnLoad() {
      // Create a search control
      var searchControl = new GSearchControl();
 
      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(new GimageSearch());
      searchControl.addSearcher(new GbookSearch());
 
      // Set the Local Search center point
      localSearch.setCenterPoint("New York, NY");
 
      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));
 
      // execute an inital search
      searchControl.execute("Urbano's Blog");
    }
    GSearch.setOnLoadCallback(OnLoad);
 
    //]]>
    </script>
  </head>
  <body>
<div id="searchcontrol">Loading</div>
 
  </body>
</html>

So that is a simple page using the search, I'll now go through the code explaining it:

First of all, we import Google's CSS style sheet from its location:

http://www.google.com/uds/css/gsearch.css

Next we import the Google AJAX search library from its location:

http://www.google.com/uds/api?file=uds.js&v=1.0

And now with the search controls:
For the configuration we will create a function, in this case OnLoad(). This function sets up the controls for our search, and draws the searcher inside the specified div.

To start, we need a new search control, which we set up as follows:

 
var searchControl = new GSearchControl();

So we have initialized the searcher, now define which areas we want to search in, in this case most of them:

 
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(new GimageSearch());
      searchControl.addSearcher(new GbookSearch());

We are using local, web, video, blog, news, image, and book searchers.

For the local search to work you need to set a "center point". For it to work perfectly you could use php for example and geoip to detect the location of the user and use that as center point... In the example we'll be using NY:

 
localSearch.setCenterPoint("New York, NY");

Now display the searcher in the specified div (This could be any div in your site, simply reference it and it will draw the searcher inside it). In this case "searchcontrol":

 
searchControl.draw(document.getElementById("searchcontrol"));

This is optional, but if you want to see it working you can set up an initial search. If you want this to work from your own search text fields, use GET or POST vars and php to set up the script to search for a given variable...
In this case we will be searching for "Urbano's Blog":

 
searchControl.execute("Urbano's Blog");

Be careful with the above to always strip ", because it would brake your script!

And you are basically done, simply call the OnLoad function and you are good to go!

 
GSearch.setOnLoadCallback(OnLoad);

Hope you enjoyed it!
Read more about this:

Developer Documentation @ Google Code
Class and function reference @ Google Code

ajax api google search

What to answer to usual (stupid) clients:

1348 days

by alex in General talk, Humor

When working for a web development company you'll often find yourself dealing with complex clients, or clients whose knowledge of what exactly is Internet and a website is close to nothing...
This is a compilation of REALLY stupid client quotes, and what you or your company should answer:

CLIENT: "I want everything to be bright blue and bright red."
Us: "Light blue and fire engine red do not go well together (unless you've intentionally taken LSD and/or put on a pair of 3D glasses to watch Cat Women of the Moon.) Trust in the fact that we all went through design and/or art school and have been doing this since 1995."
CLIENT: "I was in that cgi bin thing noodling around the other day and changed a few things in there and now the system doesn't work."
Us: "Please do not go into the cgi-bin on your web server and "noodle around" unless you know what you're doing. We will have to charge you the hours it takes to reinstall all the scripts running on your site."
CLIENT: (after site is in production) "Can you make me 5 or 10 more designs to choose from?"
Us: "If you feel like you need to, please ask your spouse, your neighbor, your colleagues, your friends, etc. what they think of your mock up designs before you approve one to be transformed into your website. Since you had already approved this design, we will have to charge you additional fees to redo the site."
CLIENT: "Just pull some picture off of google and put in some dummy text for the movie."
Us: "Creating Flash movies and multi-media CD-roms is a complex and time consuming process. There is a reason why we want you to create a script and select your images and text before we start your movie. Ten seconds in Flash could equate to 10 hours in development time depending on the complexity of the movie. If you really can not come up with something and hand over the reins to us, when you ask us to remake what we've done, you will be charged the hourly rate."
CLIENT: "We'd like to see about 10 more designs. You know, just to see the possibilities."
Us: "If you really like a mock up, go with that gut feeling. We will charge you to create additional mock ups past 5."
CLIENT: "Can you make it more edgy?"
Us: "Can you give us your definition of 'edgy'"?
CLIENT: "I need to get a website, but I don't have a computer or the internet."
Us: "If you want to have us design a website, please at least have access to the internet. We can not fax you mock ups."
CLIENT: "We want our site to look exactly like ******.com. Can you just copy that site?"
Us: "Please do not ask us to procure images and/or information straight off an existing website or copy the design of an existing website exactly. We do not work like that and each one of the products we undertake is unique and original."
CLIENT "Can I have some nice animations, blinking text, and flashy stuff to 'Catch the eye' of my customers? I just want to have something original":
"No, you really don't want to use multiple frames, big animated gifs, flashing text, a cute wav that starts playing when your page opens, cryptic and "artsy" menus, "splash" pages with lengthy Flash movies or have every page of your site look "just a little different". You don't. Really. Now stop asking."
CLIENT: "I don't see our content in these pages. I faxed that over, didn't you get it?"
Us: "Please do not print out your Word docs of your web content and fax them to us. There's this thing called email ...

And the bonus one:

CLIENT: "We need a 15 page website with a 10 second flash movie. We've gotten quotes on elance.com for $200, can you beat that?"
Now simply hang the phone, or mark his/her email address as "Junk" or something of the sort...

Client quotes from: clientcopia.com

Enjoy,

client funny quotes

Web Design font

1349 days

by alex in General talk

I was tirelessly wasting some time on a redesign for a client's website yesterday when I found a great font I actually had installed. Each of the characters is actually a vector image great for web design, here is a preview:

Anyway, you may download and use the font (It is really useful sometimes :))

Download zip file - 18,2Kb (1768 downloads)

Get full domain from user’s URL in php

1351 days

by alex in General talk

If you are still interested after having read that huge title, sorry, I just couldn't put that in fewer words...
What I'm going to post here is a php function that will create a standard url from a user-inputted url so that any string will be converted to a functioning url.

First it will convert all characters to lowercase:

 
$url = strtolower($url);

Now add http:// if it is not at the beggining:

 
if(strncasecmp('http://',$url,7) !== 0){
	//There is no http:// at the beginning:
	$url = 'http://'.$url;
}

What strncasecmp does is it takes a string, and then a number. It then checks to see if that string is contained within the first (That second parameter) characters contain it. It returns 0 if it is found.
So in the example it checks to see if http:// is there, and if it is not, it adds it.

Now strip all folders (This is optional, but here I will show how to make sure only the main domain is left

 
$parts = explode('/',$url);
	if(sizeof($parts) !== 1){
		//no / in the string: (No http, no ending /)
		$url = $parts[2];
	}

So now we've got something like "http://{user_input}/".
Let's make sure it has (or not) www. And if not, let's add it (Just for consistency)

 
if(strncasecmp('www.',$url,4) !== 0){
	//There is no www.
	return 'http://www.'.$url.'/';
}else{
	return 'http://'.$url.'/';
}

Now we have "http://www.{user input}/" , we are basically done!
If you really want to this this correctly you could check if the URL exists, but this is just a waste of traffic from my point of view...
So if you want to do this, create the following function:

 
function url_exists($strURL) {
    $resURL = curl_init();
    curl_setopt($resURL, CURLOPT_URL, $strURL);
    curl_setopt($resURL, CURLOPT_BINARYTRANSFER, 1);
    curl_setopt($resURL, CURLOPT_HEADERFUNCTION, 'curlHeaderCallback');
    curl_setopt($resURL, CURLOPT_FAILONERROR, 1);
 
    curl_exec ($resURL);
 
    $intReturnCode = curl_getinfo($resURL, CURLINFO_HTTP_CODE);
    curl_close ($resURL);
 
    if ($intReturnCode != 200 && $intReturnCode != 302 && $intReturnCode != 304) {
       return false;
    }Else{
        return true ;
    }
}

And call it from our previous script:

 
If(url_exists($url)) {
     return true;
}else{
    return false;
}

Full code now:

So the whole thing would be something like this:

 
//Function to make main domain from url:
function url_exists($strURL) {
    $resURL = curl_init();
    curl_setopt($resURL, CURLOPT_URL, $strURL);
    curl_setopt($resURL, CURLOPT_BINARYTRANSFER, 1);
    curl_setopt($resURL, CURLOPT_HEADERFUNCTION, 'curlHeaderCallback');
    curl_setopt($resURL, CURLOPT_FAILONERROR, 1);
 
    curl_exec ($resURL);
 
    $intReturnCode = curl_getinfo($resURL, CURLINFO_HTTP_CODE);
    curl_close ($resURL);
 
    if ($intReturnCode != 200 && $intReturnCode != 302 && $intReturnCode != 304) {
       return false;
    }Else{
        return true ;
    }
}
//And now the function
	function domain($url,$checkIfExists=0){
		//This function creates a url in the form http://www.domain.com/
		$url = strtolower($url);
		if(strncasecmp('http://',$url,7) !== 0){
			//There is no http:// at the beginning:
			$url = 'http://'.$url;
		}
		$parts = explode('/',$url);
		if(sizeof($parts) !== 1){
			//no / in the string: (No http, no ending /)
			$url = $parts[2];
		}
		//Now check if the url has or not www. in it:
		if(strncasecmp('www.',$url,4) !== 0){
			//There is no www.
			return 'http://www.'.$url.'/';
		}else{
			return 'http://'.$url.'/';
		}
		if($checkIfExists !== 0){
			//User wanted to check if exists:
			If(url_exists($url)) {
				return $url;
			}else{
				return false;
			}
		}
	}

So that is basically it!
(This function is used for example in my SEO analysis tool SE Crawler, to search for all documents in your site)

« Previous