This is more of a suggestion than a programming related article.

The fact is that a lot of developers and developer’s code I’ve come across in the past few years seem to be aimed at a high end idyllic and flawless user who will have a certain configuration, resolutions, browser and plugins available and will experience therefore the same as the developer intended. This is however usually not the case and creating a website that works for some users and not for others is wrong . I could say it’s counterproductive and that it will harm your image as a developer/designer/programmer/professional but it’s easier to just say it’s wrong.

The truth is that if your site becomes somewhat popular you will start to receive visitors from Internet Explorer, Firefox, Opera, Safari and some other browsers with totally different configurations that include non-flash-enabled users and non-javascript-enable users, users that don’t accept cookies, or those who don’t parse css. My point is that your site should remain browsable and work under all those different scenarios and to do that you just have to keep some simple rules in mind.

What I mean by this is you should design your site for the worst possible scenario and then add the good stuff keeping focused on the fact that it should still work in the worst case scenario. Lets say you want to use one of the multiple lightbox scripts available to show the full sized view of an image. You could set the action with javascript making javascript-less users unable to see the full sized image or you could link the image to the full size and then modify it with javascript.

All javascript calls should be done over a non-javascript code, meaning that if you want to send a form using AJAX you should first make the form work without it and then extend it’s functionality with javascript. This way it will still work for both js and js-less users.
It’s true that on 2008 the amount of users that had javascript enabled was over 95% of the total but that leaves a whole 5% of your users seeing some ugly version of your site and probably never coming back.

If you have a small website that has a couple of visitors per day that’s probably just not worth doing since you will only lose a few visitors per month but for bigger sites that get thousands of visitors per day the loss could be huge.

Thanks for reading.

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later

Some time ago I, for some reason, stumbled upon a website that made the visitor choose the image that was duplicated as some sort of human recognition. I’ve always liked those types of captchas that are not your usual type the text in the image, but this particular one seemed breakable for me. I though, “Hey, I can do this!” and in fact I did.

I wrote a function that took two image url’s as it’s attributes and returned if they matched or not. In fact it returns a factor I named “Dissimilarity Index” since the higher the number, the less similar those images are.
For those who are still into basics of PHP this may be a little bit too much, but it’s worth reading if you’re interested.

First I’ll show you the function, the I will dissect it as usual, line by line, avoiding the most basic stuff that hopefully you already know.

The function takes two attributes, the first one is the url of the first image from the comparison, named $str_img_url and the second one, which is in fact the url of the second image, called $str_match_url. An example call to this function would be dissimilarityIndex("imageOne.jpg","imageTwo.jpg"); and will return the following information inside an array:

There’s a lot going on in this function but in a nutshell what I’ve done is assured the images existed, if they do, Copy and resize the image with re-sampling to 16 pixels. These pixels with any luck contains the average colour of that image and by calculating the sum of the subtraction of the three colour indexes of each pair of pixels from the first image and the ones from the second image we get a number from 0 to 765 (255+255+255) that will represent the dissimilarity.

Lets get started dissecting the code:

On these lines we are creating two image objects from the urls declared as the function attributes. the file_get_contents function when targeted to an image, will return a string that contains the data of the image. I chose this approach instead of building the image directly from the url since it appears that this is less resource hungry for the server. Then using ImageCreateFromString targeting the newly created string, it will translate the string back into an image object. The @ once again will hide any error messages from the function.

The third line is a conditional that in the even that any of the images failed to create will return false, ceasing the execution of the function. If there are no images, we can’t compare them can we?.

It’s self explanatory, the function getimagesize returns an array of information from which the first two elements contain the height and width of the image. By using list we can declare more than one variable at one time.

We create the image objects (empty for now) that will contain the resized copy of the original ones.

This is where the magic happens, what we are saying is, “Resize the image from the original width/heigh to 16px, and store that copy on $img_16source“. So we now have a 16 pixel image representing the average colour for each of the images we want to compare. All we need to do is a simple calculation and we will have the index, but before that we need to get the colour from those pixel. We do so using the imagecolorsforindex function inside two nested loops.

Last, we calculate the dissimilarity index by subtracting the red, green, and blue integer values of the source image with the one from the match image. For those who don’t know what RGB is, it stands for Red Green and Blue. Those values will be 0 for the lack of that particular colour and 255 for the maximum value of that colour. So by adding the absolute value of those subtraction, we have the index!!

Lets put it to the test by comparing a few images, the first image will be compared against the two other:

When comparing the first image against the first match, we got a result of [dissimilarityIndex] => 38.640625.
When comparing the first image against the second match, we got a result of [dissimilarityIndex] => 57.22265625.

Note that for comparing images with really similar colours, it may give inaccurate results. This was thought more like a way of finding a match between different images. Anyway it performs pretty well under most circumstances and will surely do the work. If you read this post right when it was written (not like anyone reads my blog) you might have seen an old version of this function that used a resize to 1px instead of 16px. The result for this improved version is a lot more accurate and even with slight modifications to a source image it finds the closest match.

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later

After the brief introduction to creating images with GD and PHP done on Text to Image with PHP we will be creating a function that given two attributes will return the first image with the second one as a watermark. For those of you who don’t know what a watermark is, it’s a mark on an image that either states the author of it, or prevents a sample image from being used instead of purchasing it etc. Usually is some text repeated all across the main image, it can also be another image instead of text.

On this introduction post we will create a function called watermarkIt that will take one argument, in this case the source image and return the same image. This may sound stupid but it’s going to be quite interesting since we will be checking multiple things like integrity of the, file type and valid file name:

The first thing we’ve done is try accessing the image at the route specified at $str_source_img, and if there is no image or it’s corrupt/invalid we will return an error message. By using ImageCreateFromString and file_get_contents combined to get the source image we don’t have to worry about the file type as long as it’s valid. Since we will be using this function to return an image on the fly, we don’t want text error messages so let’s deal with it:

Well, that’s a step forward isn’t it? Right now, we check if the file we wanted to use as a source image is valid and if not, we create a 200px by 30px image containing the value of the $str_error_message variable. That way if we call the function to an invalid image, it will still return an image. This of course can be changed to anything you want, a blank image or a pre-set error image. In the meantime I want to explain some lines of the code. I will assume you have some basic php knowledge so I’ll avoid the most obvious ones.

This sets the content type of the script file to a jpg image. Meaning that we can call it like we did in the introduction to images with php like this <img src='http://yoursite.com/route_to_script.php' /> and it will show the image generated by it.

There’s a lot going on in this line! We are creating an image object called $img_source that will contain the image specified when we called the function. The @ will hide errors. The ImageCreateFromString function will create and image identifier from the image stream created, forgive the repetition, by the file_get_contents.

Those three lines are only used if the image we provided is invalid, so we need to create a new one, and we called it $img_error. The imagecreatetruecolor function will create an image identifier just like the ImageCreateFromString function did before. The moment we create it, it has no colours associated to it, and has a size of 200px by 30px since those are the values we declared when we called it. The next line allocates a black colour to the $img_error image, meaning that it will be available for use. The attributes it takes are, image identifier, red, blue and green. imagestring($img_error, 5, 10, 7, $str_error_message, $color_black); The imagestring funtion will add a string of text to the image specified at the first attribute, with a font specified at the second attribute, located at 10 pixels from the left side and 7 pixels from the top. More information on this function here.

The last two lines create and destroy the image, meaning we will output the image on the first one and once the output is completed, we will destroy it.
Why would be destroy it? Because creating and modifying images with PHP takes memory of course and this function frees any memory associated with it.

We wanted this function to return the same image if everything else was correct so lets do it!:

$arr_source_img_data is an array created by the getimagesize function that contains the file type, the image size, and some other interesting values. For us, we’ll be using the ‘mime’ element of that array which contains the file type. Unfortunately, the format of the string contains both the file type and the extension. Since we just want the extension for now we use the str_replace function to remove the unnecessary parts.

$img_output = call_user_func("imagecreatefrom$str_src_img_type", $str_src_img); This line prevents us from having to use conditionals for creating the image object depending on the file extension. Instead, we use the [cci lang='php']call_user_func[/php] function to dynamically call the appropriate function to create the image. We do this because it’s not the same to create an image from a jpg a gif or a png, they use different functions.

On the next part, we will start getting into the actual watermarking. I apologize for anyone who was disappointed by this, but we need to set a strong base for our code to be bulletproof.

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later

The previous post “Validation with PHP – Introduction” merely scratched the surface of what can be done in regards of validating data with PHP. In this part I will be creating a basic validation class that will include a more customizable version of what we seen in the previous post and extend it with another function.

Going back to our first example, we had a form that contained a text field in which the user had to specify his/her year of birth. The rules we used for validating that data were two: make sure that the data is numeric with the is_numeric() function and that it was between 1950 and 1985 with simple operators.

Today, our form has two new fields. One that asks for the users favourite colour and another one that asks for a telephone number without spaces or any other character. To validate those three fields we could create two other functions so we end up with one function that validates each particular case or we can elaborate the function we built on the previous post so that it can validate both the year of birth and the telephone number. As for the favourite colour, we will write another one.

Let me show you what I mean by elaborate the actual function:

The extended function allows you to specify a minimum and/or a maximum number as a validation rule. Note that when validating the $int_year variable we specify the maximum year as the first argument and the minimum year as the second argument but when validating the phone number we just ask the function to verify if it’s a number or not. I like to put the maximum value as the second argument, right before the minimum because I find it more often situations where you don’t really care about the minimum but you do about the maximum, this is strictly something personal so feel free to change the order if you believe it’s better for your particular case.

This is ok if we just had one type of validation rules, in this case numeric values within a given range but, as I mentioned at the beginning of the post, we also want to know the users favourite colour. Since validating a colour is a completely different matter and there are hundreds of different colours out there, all we are going to do is make sure that whatever the user enters contains only letters and maybe white-spaces for the possibility of something like “pale green” as an input. Once again we will be assuming that we already have the users input in variables called “$type_field“.

Lets explain the code a little bit. We created another function called validateAlphaStr that takes three arguments. The first one is the data we want to validate, the second and third ones are the minimum and maximum number of characters for that data. Those two arguments are not mandatory and have default values just like on the previous function. That means that if we don’t specify them it will use those default values instead.

The validation is done through a regular expression using the preg_match function. In common words the regular expression reads:
“This will match if the only thing on $str_field is a string made with lowercase and uppercase letters and white-spaces with a length ranging between $int_min and $int_max, all matches will be stored on an array called $arr_matches“.

This means that if we try to validate “pink” it will work but if we try to validate “colour name longer than twentyfive characters” or “red 2” it will fail. Note that we could make the very long colour name succeed if we specify the maximum length to a higher number.

Last thing we need to do is to place those functions inside a class so they can share private functions for common validations like length and duplicates.
And this is where the magic happens, we will be transitioning from individual calls to a validation function to multiple calls from a validation class, lets do this!
That means that in one single call we will be able to validate against multiple rules:

Don’t worry, I will explain this line by line on the next post.

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later

If you have at least some experience with PHP you probably know that there are several image engines available for you to work with.
Today, I’ll be showing you a simple way of generating an image from a user provided string using the GD library. The goal of this code will be to generate a simple image with white background and black text centred inside of it.

I will be using my naming rules as seen at “Naming conventions and practices in PHP“.As time goes by I will be extending this code to provide additional functionality, but for now, lets get started:

We open PHP tags and declare a new function called textToImage. This function takes one argument called $str_text, note that I prepended str_ to the variable name, so we know it should be a string. If no argument is provided when we call the function it will use it’s default value, in this case “Default text“.

Inside the function, we first specify that the document type is a png image. Keep in mind that you will not be able to write this function on a file and include that file into your code. This means that you will have a file specifically reserved for the textToImage function and will call it from the other files. I will get into that later. Afterwards, we specify the height and width of the image and create a new image with the imagecreate function.

That right, you can’t use colors out-of-the-box with the gd library, you first need to declare a variable that will contain a colour identifier for the image object using the imagecolorallocate function and then use it when needed.

The variable $int_font_id contains a font identifier from 1 to 5 (can be higher if you declared more fonts using the loadfont function), $int_x and $int_y are both coordinates of the upper left corner of the text, relative to the container image. This means that if the values of both variables are 0, the text will start at the top-left corner of the image.
The imagestring function, places the value of $str_text on the $obj_image image at the given X-Y coordinates and with the specified font.

Those two lines output the image and destroy the image object to free memory after it’s generated.
Last but not least you want to call the function to see it working, do that like this:

If you want to specify the text variable from another file, you can change “Test string” to “$_GET['str_text']” and wherever you want to use that image, just do the following:

Thus generating an image on the fly with the use of the simple php function we created together.

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later

Notepad++ is a must have for any programmer that wants a fast and efficient coding environment that will not be resource hungry and that provides lots of functionality. Personally I think that it’s aimed at non-compiled programming languages and particularly to web and web-based application development. I use it mostly when I work on html, php, xml, javascript and asp but it has syntax highlighting for lots of other languages aswell.

In essence, Np++ is a text editor on steroids. It has all the features that you will want, from code highlighting and multiple-selection of text to quick-texts and macros. Add to the list an incredible versatility in means of customization of the way the code you’re viewing is displayed, allowing you to change the colour of backgrounds and text as well as the font, size and style of these. Not to forget it’s free.

I’m not going to say that it’s the best solution for your particular case since there are countless options available at the time and some of them are incredible. For example, while coding in Php I’m sometimes drawn to Phped, for it’s code error highlighter. It’s good to be able to locate syntax errors without having to actually run the script on the server (we all hate those missing semi-colon or unexpected braces errors).

Most of the functionality is available out-of-the-box but for the ones that aren’t there are plenty of plugins at your disposal.

One of the functions I like the most or at least one of the most useful in my particular case, is the ability to compare different files using multiple views.  The following image shows how notepad looks with two separate views of a two documents while comparing them. Notice how each line that doesn’t match is highlighted and within that particular line, each dissimilarity is also highlighted. There is also a navigation bar which locates the differences for ease of access. Lines that don’t match are marked with an icon that will represent a general difference, an extra line, or a missing line. Those icons are easily recognizable and will make your experience even easier.

Screenshot of the comparison tool of Np++

Here is the link to their site and a direct link to the currently latest download:
- Site
- Download

• share:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• share via Reddit
• Share with Stumblers
• Tweet about it
• Print for later