Blogged thoughts, is our web blog. Expect views, opinion, rants and tirades about everything and anything 

Was doing a search earlier today for a Dublin based company called Sureskills who provide a variety of IT Services & Training. Logically my first step was to search for ‘sureskills‘ on Google as I wasn’t sure of the exact URL. Google being Google returned their site #1, however I noticed that one of Sureskills competitors namely New Horizons Ireland was running an Adword ad triggered by the keyword ’sureskills’. This is obviously an attempt by New Horizons Ireland at taking business directly from their competitors and is completely allowed under the terms and conditions of Google Adwords. If however a competitor of Sureskills tried to plug the term ’sureskills’ into their actual ad text well that’s something that can find its way into court quite quickly.

I found another example when I searched for ’Webtrade‘. Webtrade are a web dev/design company (who I actually interviewed for a couple of years ago) based in Rathfarnham, Dublin. In this case however not one but two competitors are bidding on Webtrades’ name. Not quite sure where I stand in regards to the question of ethics in relation to bidding on competitors names, the more striking question for me however would be the value (or lack of value) of bidding on competitors names. If someone is searching for a specific company, for example Sureskills, is it likely that they will click through to a website that isn’t that of Sureskills? Perhaps it’s useful for a competitor to simply get their URL/ad seen anyhow just in case the searcher might visit them after being on the Sureskills website?

Incidentally you may also notice a lot of companies actually bid on their own names. Examples of companies which I’ve spotted doing this recently include Vodafone, PaddyPower & Clearscape. These companies are doing this perhaps as a counter-measure to anyone else bidding on their name. Whatever the reason the technique of bidding on your own name is advocated by one of Irelands leading PPC experts and thus may be worth some consideration.

Has anyone seen shots of (or been in) any of the apartments in the new docklands development? From the ground this whole development looks stunning however it was only when on daft.ie the other day (I’m looking at renting options) that I actually got my first look inside this developments’ apartments. I have to admit that I was just blown away by some of the apartments, most notably though those in Hanover Quay. The contemporary style & decor is right down my street, unfortunately the prices are not. Judge for yourself, here’s some pictures (credit to daft.ie for these shots - I did not take them!). Click on the thumbnails to open fully sized pictures in new windows.

   
As you can see the main living room area has a contempory well lit design and is particularly impressive, as is the very large balcony area, whether or not it ever stops raining to use the balcony is another thing though. Hanover Quay (and the docklands development in general) certainly beats the socks of the new developments down my way (Santry) anyhow.              

If a certain someone up above could arrange for me to win the euromillions on friday I’d definitely snap one of these up straight away. One thing is for sure though, if I ever get to live in a place like that everyone will be leaving their shoes in the hall.

Booked myself in for one of the two exams required for the MCTS - .NET Framework 2.0 Web Applications certification yesterday. The exam I’m going for is the Microsoft .NET Framework 2.0 - Web-Based Client Development exam (code 70-528). I’m booked in for mid September to do it with New Horizons Ireland at a cost of €140. New Horizons seem to be the only Dublin based exam center available.

The exam focuses on using ASP.Net 2.0 to build highly dynamic, secure and scalable web applications and questions a developers knowledge of such things as standard & custom controls, data access via ADO.Net, web parts, membership, state management, mobile web applications, management & deployment of web apps and much much more. To help me prepare I got the training kit book by Glenn Johnson and Tony Northrup covering this specific exam and reviewed two very highly rated Wrox ASP.Net books which I bought last year. Additionally the fact I’ve been doing most of this stuff in my daily 9 to 5 for a good while now means I’m feeling pretty confident. In fact I anticipate much more difficulty with the other exam required for this certification - the Microsoft .NET Framework 2.0 - Application Development Foundation exam (code 70-536).

Incidentally I’m also considering going for another certification. It’s the ISEB Foundation Certificate in Software Testing. I think everyone would agree that software testing and software development are very complementary skills. Not sure where this can be done though and if classroom training is required, ideally I would just like to get stuck into a good book for a few weeks.

Ajax in a nutshell is a set of technologies which allow for partial page updates without requiring the whole page to refresh after communication with the server. Usually when a visitor is on a webpage and clicks a link or a button the whole page is reloaded (and the browser window goes white) before the user can see the updated page back, however with Ajax the user could see the specific results of the link/button click almost immediately as only the relevant section of the page is updated. What Ajax (the frontend) updates the page with is usually based on what it passes to the server (backend).

Ajax uses Asynchronous communication to allow this type of update to a page. Asynchronous communication in this context basically means that the loading of data/information (for example results from an SQL Query) for display in a specific section of the web page does not interfere with the normal loading of the web page and thus the page will not freeze or go white as is normally the case. The idea with Ajax is to give the end user a much better experience. This better experience comes from increased responsiveness/speed and usability.

Have a look at the following two pages (which open in new windows) which provide the user with the ability to lookup contact details for staff of a dummy company called HollyWood MovieStars Ltd.

Standard search interface | Ajax enabled search interface (have a sneak at the source if you want)
TIP - Search for one of the vowels first.

The first page is a standard search interface where you enter in your query, press search and watch as the whole page posts back, reloads and gives you back your search results. The second page is an Ajax enabled search interface which returns results almost immediately as soon as you start typing your query - without requiring a whole page reload. I know which one would make me the happier end user.

In this post I’ll present a step by step example of how to use Ajax to create a much more responsive and user friendly interface than is possible with the regular request and wait protocol we are all so familiar with. The interface I’m actually going to put together is the Ajax enabled one shown above. As you can see it basically allows a user to quickly look up the contact details of a member of staff by sub string searching on their name information which is stored in a database somewhere. I’m tagging this one as a staff directory search but it could just as easily be used to find details for club members, clients etc. The important thing is the underlying concepts and not what it’s actually used for. 

The actual Ajax code which communicates with the server is written in Javascript and thus the frontend of this interface will just be a standard webpage (.html extension) with a mixture of Javascript/HTML and a touch of CSS/DHTML too. For the backend - which does the actual SQL query database lookup based on what the Ajax frontend passes to it and returns results I will provide summary code in both PHP and C# ASP.Net. You could actually use the exact same PHP or C# ASP.Net code to run both a standard click and wait search interface and an Ajax enabled one (if you set the form method to GET on the standard search page) so there is definitely nothing special about the backend in this case and thus summary code and summary explainations are all that’s needed for the backend in this case.

XMLHttpRequest
Let’s begin with the object that makes everything Ajax possible. The XMLHttpRequest javascript based object is the actual mechanism that allows independent asynchronous communication between client and server. Without it Ajax would not exist. As you can see from the XMLHttpRequest Wikipedia page the object has a number of methods (actions) and properties (values) available to it. The most important methods include Open() and Send(), while the most important properties are onreadystatechange, readyState, status and ResponseText at least for this example anyhow. OK let’s see some code and then I’ll offer a line or two on the above methods and properties as we come across them. The function below is your bread and butter Ajax client to server communication code…

Lines 6 through 16 are what actually creates a new instance of a XMLHttpRequest object for use later in the function. How the Javascript creates the object depends on what the current browser is. This is required as Internet Explorer creates the underlying object differently than most other browsers.  

Line 19 simply checks if the earlier logic to create the XMLHttpRequest object was successful, and if this is the case it calls the open() method of the object. This is a very important method and is used to inform the XMLHttpRequest object of the location of the backend script (urlToCall) to call and communicate with. It also specifies the mode of communication, the most common modes of communication are POST and GET. How you pass data to the backend script depends on what option you select as the mode of communication, in this case this is set to GET - meaning we will pass data (whatever the searcher types into the search box) via query strings embedded into the url of the backend script (urlToCall) which we want to communicate with. It is important to note that no actual communication with the server has begun - open() simply specifies information about an async request which is about to happen, thus in this way the use of the word open is perhaps misleading.

Line 22 is what actually kicks things off, it does this by sending the request to the backend script as specified by the urlToCall parameter. Referring back to our XMLHttpRequest Wikipedia page we notice that the send method can take one parameter called content. This parameter is used to specify the data to send to the backend script if we set our mode of communication to POST. The backend script would then by able to access this data in a standard way such as $_POST['data'] in PHP or Request.Form["data"] in C# ASP.Net. Since we are passing data via query params (GET mode) attached to the filename specified by urlToCall we only need to pass a value of null.

Next up we see the onreadystate change property which calls an anonymous function everytime the state of the request changes. In the function both readyState and status are checked to make sure the request is a) complete and b) successful. The two magic numbers here are ‘4′ (readyState) meaning the the request is fully complete and ‘200′ (status) meaning the communication between client and server was successful.

Line 28 is just a standard Javascript function call to the function specified by functionToCallBack. The call passes in the text that was returned from the backend script via the XMLHttpRequest objects’ ResponseText property as well as the id of the div (or span/p etc.) element to update with the response. It is of course possible to handle the ResponseText right there in the anonymous function, however this is not a good idea as each Ajax application will be handling responses differently so it’s better to keep the getText function clear of any hardcoding and use specific embedded callback functions for each different page. Doing this will mean you can use the same getText function again and again in lots of different Ajax interfaces without modification.

Finally for the getText function lines 29 and 30 use good programming practice and dispose of now unneeded resources.

Incidentally the getText function I’ve used here is actually a slightly modified version of a function which is part of a very simple (but more often than not sufficient) Ajax framework which was originally included with an Ajax book I read called Ajax Bible written by a guy called by Steven Holzner. I thoroughly recommend the book to anyone wanting to get aquainted with Ajax and what it can do. As for the framework, it can be downloaded from http://www.akamarketing.com/scripts/ajaxutility.js, you will notice that getText is one of four functions available. By the way don’t be scared off by the word ‘framework’, a framework in the context of development is basically just a load of pre written code for you to use as a base, it’s nothing more and nothing less.

Displaying the response in the browser
The getText function as outlined above looked after the async client & server communication side of things and called another function on line 28 (commonly referred to as the callback function) when everything was done. The whole purpose of this callback function is to handle and display the response of the aforementioned communication. Let’s have a look at this very simple function now…

I’m sure anyone used to fiddling with the DOM and/or DHTML can see what’s going on here. This code is basically instructing the browser to update the div as indicated by divToUpdate with the response outputted by the backend script and passed in via the parameter text.

Getting the ball rolling with user driven events 
You’ve seen how the callback function gets called from within the getText function, but how does the getText function get called in the first place? Good Question! The getText function gets called by tying it to some user driven event such as a button click, mouse move or keypress. You can see from the Ajax enabled search interface (the one we’re trying to make) that there isn’t a button in sight so we won’t be attaching a call to the getText function to an onClick event. Instead to enable getText to get called with each and every single keypress (and hence provide search results very quickly) in the query textbox we are using the onkeyup event. Here is the code we need.

Notice that in this case the backend is PHP driven, also notice how we are embedding the search query into the backend filename. In this case the HTML element which we want to update with the server response has the id ’searchResults’. This means that a div, span, p or some other HTML element which exposes the InnerHTML property and has an id of ’searchResults’ must be present on the page or a Javascript error will occur. At this stage the client side frontend of our staff search interface is complete, you can get the full source by opening the Ajax enabled search interface page and selecting View >> Source from the toolbar. You may notice that the getText function is included in the frontend via an external JS file.

All that’s left to do now is to complete the backend code. The backend code is pretty standard issue stuff. Your basically checking for a query string param called ‘query’ and if it’s found your executing an SQL query (with the query string embedded) against a DB and simply outputting the results. The backend summary code is first given for ajax-backend.aspx (C# ASP.Net) and is then given for ajax-backend.php (PHP).

ajax-backend.aspx

ajax-backend.php

Neither the C# ASP.Net or PHP code given above is complete or production ready, both code samples do however provide you with a very good idea of what needs to go on from the backend point of view. Remember anything that you Response.Write() or echo out on the backend page will be returned to the client via the XMLHttpResponse objects’ ResponseText property.

Well that’s really it, with both the frontend and backend elements of an example Ajax interface covered you should now be able to implement something similar to suit your own needs, if not I hope I have at least provided you with a good basis for further research and remember if your stuck on anything please drop me a comment. In fact even if your not stuck please drop me a comment as I’d love to get your feedback on this post.

First of all the title says idiot (singular) and not idiots (plural), so I’m not ‘after’ the whole American population in this one, believe me. Basically I just had to ‘out’ one guy as being a complete ignorant fool by publishing an email I got from him earlier today. I think it is more evidence that some Americans think that no other world exists outside the States.

I believe the fact that he is American and not just some idiot from the ‘world’ is significant due to the subject matter of the email which offers an ‘insight’ into how to spell a particular word… seemingly without any regards for where in the world a person is from or the market they are targeting. It’s almost as if he’s saying ’if that’s how America spells it then everyone else spelling it different must be wrong’.

It’s difficult enough to filter through all the spam, phish and other bulls*!t emails I get through to my email address without having to put up with this, have a look yourself…

Name  —    Gary Gr*******
Email  —    *************
URL    —    *************

Though spelling a word incorrectly in your keyword section of your html might be
fine-having a word for an seo web site spelled incorrectly throughout your site is hardly a confidence builder

Optimisation
\”Optimization\”-Correct spelling

The email is all the text in italics. Well thanks for that Gary I’ll make sure to skip tomorrow’s Sunday dinner and change all occurances of ‘Optimisation’ to ‘Optimization’ on my website just for you or perhaps you could a) stop being so ignorant and become aware of how some things (like spelling for example) are done outside America b) stop wasting my time and finally c) spend more time working on your own website which at the moment looks like something out of 1994 rather than incorrectly slating other peoples websites.

I must admit my face went a bit red in colour… sorry I meant color when I got that mail, anyhow the big question now is should I reply and what should I say? Has anyone got any good URL resources which can open this guys eyes a bit? Richard, Dave, have you ever got an email like that?