Author Archives: Stuart gets a facelift

Ajax Tutorial

After 4 years of the same wordpress theme, I decided it was time to bring in the 2011 with a new look Ajax Tutorial website.

It took just a few hours looking at the free wordpress themes available, then I found this one. I liked it instantly. Hopefully you will like it to. So far, I’ve made very slight modifications (had to reduce some text sizes).

I’d like to thank Vladimir Prelovac for providing this GPL theme. Thank you man!

How to create a PHP web template – Part 1

In this post I’m going to explain how I usually set-up a simple PHP website, from scratch.

This is part one of two.

Brief summary of the main steps involved.

1. First we will create the HEADER – this will be the area occupying the top of the page, and will include the logo and top level navigation. It’ll also contain the HTML meta data (page title, description and keywords) which will dynamically change depending on the page.

2. Next up will be the FOOTER – you guessed it, this will occupy the bottom of each page. It’ll include the website name, copyright notice and some general links (like privacy policy for example).

3. We will create some content pages and hook into the HEADER and FOOTER.

Preparation required.

My very first step before I start any coding, is to create a graphical mock up design and logo. I usually use a graphics package like Fireworks, Photoshop or Inkscape (free and extremely good). Below is a quick mock up design I created earlier for a fictional website called ‘MyWebsiteTemplateExample’.

my website template example

my website template example

After I have my idea ready, it’s time to create a template HTML file. Here is what I do…

1. Crop the logo (and any other images) from the mock-up design and save them to a folder called ‘images’.

2. Take note of the colors used in the design (most graphics tools can give you the HTML color code).

3. Create the HTML of the mock-up (I’m not going to teach you HTML, that’s too much for this post. Use a WYSIWYG if you have to).

4. Create a CSS file to hold all the styles used on the basic page. Save it in a folder called ‘styles’.

Now, that will keep you busy for a couple of hours, at least.

In part two, I will show you how to create the HEADER, FOOTER and CONTENT pages from your basic template. Once you’ve created one page, the rest will take no time.

Fear not, part two will be available very soon.

Basic Ajax usage with jQuery

In this article we will be talking about the basic usage of Ajax with jQuery 1.4.2 production (24KB, Minified and Gzipped).

In order to use the JavaScript examples in this article, you should first download jQuery and include it on your page using:

Throughout this article our Ajax scripts will communicate with ‘serverscript.php‘ our Server script.

Method One – POST (Asynchronous with data):

Transfer data to the server (using POST method), and retrieve a response:

Method Two – GET (Asynchronous with data):

Transfer data to the server (using GET method), and retreive a response:

Note that GET is the default type for Ajax calls using jQuery, so we really do not need to explicitly state it, but I’ve placed it there just for clarity.

Practical jQuery Example using POST:

jQuery Example in Browser

jQuery Example in Browser

Well there you have it, not too tricky and with a weight of only 24Kb for the base library you can’t go wrong. Of course, jQuery can be used for a whole heap of other tasks.

Until next time (when we cover MooTools), Happy A’jaxing!

Basic Ajax usage with X

Over the next several articles I’ll be covering the “Basic Ajax usage with X”, for example “Basic Ajax usage with jQuery”.

The idea is to take the latest stable version of the chosen JavaScript Framework (for example jQuery) and examine what’s required to achieve the most basic Ajax calls.

I’ll be looking at a few things here, notably the ease of use and the minimum required footprint (in regards to download size).

Note that I will not necessary by using Ajax in the traditional sense of the word (i.e. with XML) as the intention of these articles is to strip everything back to the absolute basics.

I’m not 100% certain about all the frameworks I’ll cover now, but I will most certainly be covering jQuery, MooTools, Prototype, dojo, YUI and ExtJS. If I have the time, I may look at some of the newer ones as well.

This post is a living post (I’ll revisit and link up the articles).

Cheers guys!

JavaScript Coding Contests

Hey folks,

I’m in the process of putting together some ideas for our upcoming JavaScript Coding Contests.

Several years ago, I ran some coding contests on a PHP website (PHP Programming Contests)… they were great fun at the time, and ran for a couple of years.

Since JavaScript seems to be the cool language now, I thought – why not run some contests with JavaScript?

I still need to find some suitable sponsors to offer prizes (let me know if you are interested).

Also, if you have any ideas for future contests, let me know.

I expect to have something ready very soon, so don’t wonder too far away!