Reviews

Remote PC access software

931 days

by alex in General talk, Reviews

A couple days ago a friend of mine asked me to help him with his computer. Usually that is no problem, but he had really done something strange, and he lived too far for me to go there,

Surely there are several options out there when we are talking about remote access software, from the built-in technical assistance in windows to professional solutions, but there is one that I think stands out:

Proxy PRO 6:

The Proxy PRO 6 offers a lot of capabilities that standard software doesn't, first of all, security. You have 256-bit encryption – the highest in its class, which ensures the integrity of your data, along with strong authentication.
Along this, you can create rol-based groups, with different permissions or capabilities, making it a perfect solution for businesses and technicians.

As for the actual control, it offers a huge set of built-in stuff, like a chat, to talk with the client, bulk file transfer, multi-monitor... etc the list is so big I can't even remember all the items! But you can always go to their site to check the full list of features

So basically, if you are thinking about using some sort of remote control software, consider at least the Proxy PRO 6.

control remote

Google AJAX search API

1343 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

Did you mean… ? In php

1345 days

by alex in PHP, Programming, Reviews

In a new website I am developing for a client I had to add the usual "Did you mean... ?" in the search results for her. Si I started thinking for the easiest way to do this.

There are actually a lot of php functions out there to look for similar text. The most obvious one?
similar_text()
You must pass 2 parameters plus an optional third. The two first are the strings to compare, and the optional one is the percentage of "closeness" you want them to have. It is quite useful, although it is too expensive in terms of time to use with huge database searches, so I wouldn't recommend it.

There are two other methods that might be good for some cases, and another function that is just the best. I'll show you first the best way to achieve this:
It is the Levenshtein algorithm, which basically finds the number of characters you must add, edit, or remove from a string to make it match another one. At first it doesn't sound too useful, but take a look at this example:

 
< ?php
// input misspelled word
$input = 'carrrot';
 
// array of words to check against
$words  = array('apple','pineapple','banana','orange',
                'radish','carrot','pea','bean','potato');
 
// no shortest distance found, yet
$shortest = -1;
 
// loop through words to find the closest
foreach ($words as $word) {
 
    // calculate the distance between the input word,
    // and the current word
    $lev = levenshtein($input, $word);
 
    // check for an exact match
    if ($lev == 0) {
 
        // closest word is this one (exact match)
        $closest = $word;
        $shortest = 0;
 
        // break out of the loop; we've found an exact match
        break;
    }
 
    // if this distance is less than the next found shortest
    // distance, OR if a next shortest word has not yet been found
    if ($lev <= $shortest || $shortest < 0) {
        // set the closest match, and shortest distance
        $closest  = $word;
        $shortest = $lev;
    }
}
 
echo "Input word: $input\n";
if ($shortest == 0) {
    echo "Exact match found: $closest\n";
} else {
    echo "Did you mean: $closest?\n";
}
 
?>

This is an example where even a misspelled word can be found. It uses the Levenshtein to look for the word which is the most similar one, and then it is returned.
This is the output of the code before:

Input word: carrrot
Did you mean: carrot?

The use of this function is quite simple, although there are many optional parameters for more precise use. See the php.net reference for this function.

The other ways I said that could be used for this are soudex and metaphone, although their use might be more complicated for this particular suggestions use.
Soundex will create a key that is the same for all words that are pronounced the same.
For example, the following code:

 
< ?php
echo soundex('beard').'';
echo soundex('bird').'';
echo soundex('bear');
?>

Will produce this output:

B630
B630
B600

Where beard and bird are the same. This could make suggestions fast if you have already created a column in the mysql tables with the soundex key of the tags for example, so that you could search not only for the string, but also for its soundex key...
UPDATE: You can use MySQL's built in function SOUNDEX() to search both for the string as-is, or for the soundex too, to provide also misspelled words.

And finally, the metaphone function, is a variation of the soundex key that produces also a key that is the same for all words pronounced the same, but more accurately than soundex, since metaphone actually knows the rules of English pronounciation.
The use would be exactly the same as soundex, and if you are going to use something of the sort I would recommend metaphone over soundex for its improved accuracy.
But bear in mind that both soundex and metaphone won't probably work fine in most other languages, or at least for languages with phonemes that don't exist in English.

Hope you found this useful,
Alex

levenshtein metaphone php similar_text soundex suggestion

Image formats review

1376 days

by alex in Cool pics, General talk, Graphic Design, Photoshop, Reviews, Web-related

For all of you designers out there that don't understand exactly what is the difference in "lay" terms of the most common web image formats I will go on with a little explanation and examples for you:
The background is a PNG image that is always the same, and the images are set over it

PNG

This is a relatively new file format, it stands for Portable Network Graphics, and it's primary characteristic is that it has lossless data compression, meaning that it won't lose any quality whatsoever.
And the other greatest thing about it is that it has full alpha support, meaning that it can have different opacities and transparencies.
Here are below some examples of PNG images with different backgrounds:

The size of the PNG file on top (100x50px in a row of 4) is of 12,4Kb
As you can see it can be perfectly seen even though the background is changed (stripes, solid color, alpha transparencies bg, and transparent bg)

GIF

GIF image format is probably the most common one in the web, or at least it has been for the past years. It stands for Graphics Interchange Format, and it has 3 characteristics that make it unique and sometimes useful:

It has lossless data compression (Pretty much like PNG)
It supports animations, although they increase a lot file size
It supports transparencies, although it doesn't support alpha opacities.

Here is the same demonstration as before, but now with GIF graphics on top:

In order to look good GIF images with transparency often use a surrounding border, that should match the background color. As you see in the example the image looks just great when displayed over white, but when displayed over other types of background colors the transparency looks awful.

A great advantage though is that this GIF image weights 4,04Kb, against the 12Kb of the PNG file...

JPEG

JPEG stands for "Joint Photographic Experts Group" and it is not the actual name of the format, it is the name of the comitee that created it, but since everyone decided to call it this way, lets stick to it

JPEG offers some characteristics that are worth looking at when designing for web, it uses lossy compression, which basically means that when saved it will lose quality.
Depending on its use this may not be bad. For example in this site's design I've used JPEG files for backgrounds, since the quality loss contributes to the "rustic" effect, but it should never be used for logos or sharp things.

The good use for JPEG is for large photographs, big backgrounds, or other large images.
Here is an example of the dice image, using different compression quality:
Since there is no transparency the background will be seen always as white...

High quality:

Medium quality

Low quality

File sizes were:

High quality: 31,2Kb
Medium quality: 26,2Kb
Low quality: 25,0Kb

Conclusion

When designing you should try to use GIFs as many times as possible, since they provide the smallest file sizes, and better quality than most JPEGs. In the cases where you need alpha transparency you should consider changing to PNGs, but avoid their use, they'll increase a lot page load time...

Have fun designing

best format gif image optimization png web design

Reseting CSS default browser settings:

1376 days

by alex in CSS, Graphic Design, Layout/Styling, Reviews, Web-related

One of the biggest problems when designing a website is that after all work is done it looks different on different browsers.
The solution usually used by most web developers consists on manually changing every bit of CSS they have to make it look all the same, resulting on a very hard and time-consuming approach.

A great solution that requires absolutely no extra-work is to reset all CSS settings so that there is absolutely no style assigned to any html elements.
This way you'll have to reapply all styles to all elements, but you'll be sure that once you are done, it looks the same on all browsers.

Here is the CSS code you'll use, developed by David Hellsing at Tripoli:

 
@charset "utf-8";
/* CSS Document */
 
/*
    Tripoli is a generic CSS standard for HTML rendering.
    Copyright ( C ) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http ://www.gnu.org/licenses/>.
*/
 
* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
}
dfn, i, cite, var, address, em {
	font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
	border: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td, center {
	vertical-align: top;
	text-align: left;
}
body {
	background: white;
	line-height: 1;
	color: black;
}
q {
	quotes: "" "";
}
ul, ol, dir, menu {
	list-style: none;
}
sub, sup {
	vertical-align: baseline;
}
a {
	color: inherit;
}
hr {
	display: none;
}
font {
	color: inherit !important;
	font: inherit !important;
	color: inherit !important; /* editor's note: necessary? */
}
marquee {
	overflow: inherit !important;
}
blink {
	text-decoration: none;
}
nobr {
	white-space: normal;
}

Note that this is just one option, you can find a lot more on this article, down at perishablepress.com

I've been using it in all my websites and I have to say that it really cuts down on developing time. And the results in IE are astounding, I've had to tweak no more than two lines to get it look perfect.
It will reset all margins, colors, underlines, bullet styles...
Remember to place it BEFORE your custom styling, because if not it will override any new setting you have!
The version placed here is "condensed" and hard to read, but taking into account it's purpose I consider this to be a benefit, since it will decrease page size and thus load time...

Try it, test it, and comment here what you think of it!

css david hellsing ie layout reset style sheet styling

Reviews

Remote PC access software

Proxy PRO 6:

Google AJAX search API

Did you mean… ? In php

Looking for something?

About me