This website stores cookies. Click here to accept them.cookie information page

"basics" category

A short introduction to Ajax

11th January 2012
Categories: ajax, basics, javascript

Web pages are old. HTTP (the protocol that browsers use to retrieve pages) has been around since the early 90's and was originally designed as a simple request/response mechanism. Unfortunately this means that any time a page needs updating, the whole thing has to be re-downloaded from the server which can be slow, tiresome and leads to annoying screen repaints. Enter AJAX (Asynchronous Javascript and XML), a methodology developed in the late 90's that allows javascript to request data from the server, this allows developer's to write cleaner, nicer and more helpful user interfaces.

Hello World

It's a tradition that your first steps in a new language should be a hello world type application/script. So without further ado here comes an Ajax Hello World Script (note, for this tutorial I'm going to be using JQuery, available from

If you want to skip to the result, click here.

 <!DOCTYPE html>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX Hello World</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">





    $.get('', function(data)








<div style="background-color:#373639">

<img src="" title="Oxford Web">


<div style="padding:24px">

  This is part of a blog post from the <a href=""   target="_blank"></a> site.

   <button id="ajaxButton">Click Me</button>


  <div id="ajax_target" style="background:#c0c0c0;padding:24px">





The first thing we do (outside of the basic HTML template) is to include JQuery (<script ... ”jquery.js”>). We can then move on to requesting data from the server. JQuery, by default, uses the $ symbol as a shortcut to the JQuery object. In this example we are using the 'get' function (there is also a 'post' function for HTTP POST requests which works in exactly the same way), to which we pass a url and a callback that gets executed when the request is complete.

Using Parameters

Now this is fairly nice stuff but obviously we want to be able to give the server a bit more information. Now we could manually build up a GET uri (append ?field=val&field=val...) but this can get tedious and untidy, not to mention it doesn't help us much with POST requests. Fortunately JQuery can handle the tedious parts for you, just pass it a JSON object (JSON, Javascript Object Notation) and the fields will be used as request parameters.

<!DOCTYPE html>



<META http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>AJAX Hello Name</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">







      name: $('#name').val()












<div style="background-color:#373639">

<img src="" title="Oxford Web">



<div style="padding:24px">

<p>This is part of a blog post from the <a href="" target="_blank"></a> site.</p>

<p>type something in the box and click go to refresh just the shaded part of the screen...</p>

<input type="text" id="name" /><br/>

<button id="ajaxButton">Click Me</button>


<div id="ajax_target" style="background:#c0c0c0;padding:24px">






The above returns the same as typing


So there we have it - a simple, basic introduction to the wonders of Ajax that allows web pages to become dynamic, auto-completing, auto-updating web applications.

What are bugs?

4th January 2012
Categories: basics, programming

Software bugs are errors in the instructions written by programmers for computers. Rather than errors in syntax, which are usually weeded out before instructions are executed, bugs tend to be logic errors that cannot be discovered by a computer.

Take for example these instructions in English:

  1. Turn hob on.
  2. Prepare mug with teabag.
  3. Pour 1 pint of water into the kettle.
  4. Put kettle on hob.
  5. When kettle boils, pour water into mug.

When tested, these instructions may be seen to work, but when carried out 'in  the field', it may be seen that the hob is still on at the end of the process, and if left, may cause a fire.

Bugs can occur in any kind of software, including markup and stylesheets, object-oriented programming languages, and higher-level tools like flowchart-driven programming - and the only way to ensure that programs are 100% bug-free is to test every part of the software for all cases.  

So for example a program which simply multiplies numbers by 2 is not fully testable - because there are an infinite number of numbers. But more complex programs are infinitely more untestable as there are a bigger range of 'input variables'.

So how do you make sure programs are bug-free enough to be put to safe use?

One way is to test 'edge cases' - for example if your program which multiplies numbers only has to deal with integers, and the integers need to be between 1 and 100, then it makes sense to test 1, 1000, and a few numbers in between to make sure.

It also helps to use automated testing - using tools like selenium for firefox, which allows you to browse a web application recording your process, and to play that process back any time you want.

Another tool is 'test driven development', where you write the tests first, and then the software to make the program work. So at first your tests will fail, which is expected, and then as you write more code, new tests begin to pass - but if you introduce any rogure code which affects other parts of the system, you can re-run the tests and see that others begin to fail - which helps you to indentify the problem.

"Dry-running" and stepping through programs is also a very useful way to pre-empt bugs. Dry running is where a human being reads the program code and tries to work out how the computer would execute it; stepping through means running the program at a speed controlled by you - so that you can see variable values and the path of the execution as it happens.

Images and the web

30th December 2011
Categories: basics, images

When adding an image to a web page, you'd be forgiven for thinking that you simply fire up your favourite content management system and upload the image, or add an image element to your HTML like so:

<img src="sunflowers.jpg">

Apart from design considerations, which we won't cover in this article, there are various practical considerations to be taken into account, including format, quality, and size.

Image format and quality

Web images come in a variety of formats for the web, but there are three popular ones: GIF, JPG (or JPEG), and PNG.

Both GIF and JPG are 'lossy', that is, from an original photo, saving as a gif or a jpg will lose some information.

GIFs take out image information by reducing the number of colours to 255.  So for example in a photograph with gradients (see below), the GIF version will cut out certain colours, losing the gradient effect (see inset).

png image of ship with inset to show gif gradient

GIFs are most useful for cartoons and other images with low colour resolution.  Here they come into their own, offering the best compression from original images, which means faster downloading on a web page.

JPGS offer a good compression ratio for photos and detailed images.  When saving a jpg using most software you are offered a quality option, 0-100%, which also determines how much the image is compressed.  JPG compression is lossy, but at 100% it is not noticeable.  At 50%, however, you get some odd 'jitter' effects such as shown below (jpg inset):

ship png with jpg inset

PNGs are not lossy, but may not always offer the best overall compression, although it is worth experimenting with a given photo.  Generally speaking, slightly low quality JPGs are best if you want photos on your website but want to reduce loading times.

Image size

It is best to size images to the exact pixels specification before inserting into a web page.  For example, if  you add a 100px wide image to your web page and then ask the web page to size, using the following code:

<img src="sunflower.jpg" width="250px">

Then the browser is downloading the whole image (which could be 1MB or more in disk size) before resizing when it gets shown.

In addition to increasing download size, if you don't resize images yourself, you're not in control of the resizing process.  Generally, photo resizing programs give you a couple of options: cubic and linear.  If you're resizing down, linear is often best, but again it's good to experiment with the specific image. Resizing up isn't generally a great idea, but we've found that cubic resizing, in small increments up to your chosen size, generally gives the best results.



What is jQuery?

21st December 2011
Categories: basics, javascript

I'm building a shed in my garden. What I need is to put bikes, a lawnmower, a few tins of paint, a toolbox and some random junk under cover. That's the primary aim of the project.  The seconday aim is that it mustn't look too shabby.  And finally it mustn't be a lot of work to put up.

Now I know that the raw materials for building a shed are wood and nails, and maybe some glue. But it would be great if some of the pieces of wood came stuck together already, so that I didn't have to do so much hard work to achieve my goals.

Enter the pre-fabricated shed, and ta-da!  It takes less than half the time.

jQuery is basically a pre-fab shed for Javascript. Someone has spent a lot of time and energy building commonly-used routines and functions to do things like showing and hiding bits of web page, calendar controls, and that kind of thing, and once you have jQuery and some simple documentation you can access them very easily without all the hard work.

Take 'lightboxes' for example. They are a popup window in the middle of your web page to show an image. They can be part of a gallery and include 'previous' and 'next buttons'.

If you google 'jQuery lightbox' you'll get an example of this javascript at work, and a download link which gives you the jQuery core library and the lightbox library, and some sample code to get you started with your very own lightbox code.

The way a lot of jQuery works is by modifying attributes of existing HTML.  Say you have some HTML which looks like this:

<div class="someclass">
     <a title="Some random picture" href="pic.jpg">
        <img src="thumb.jpg">

The jQuery code for turning your thumbnail picture into a link to a lightbox happens in the Javascript at the top of the page, where you call a function to modify the action of the anchor tag.  Most of the work that's done is hidden from you (the coder), you simply call a jQuery function to turn  the div into a lightbox gallery.

How do you save data to a database?

10th December 2011
Categories: basics, databases

Databases are a tool for data storage and retrieval.  They tend to be more useful than data files (i.e. simple text files) because they can be queried very quickly, due to the use of indexes. But it's worth noting that databases really are glorified data files, with some housekeeping processes and query tools to make them easier to use and maintain.

Let's stop for a moment to talk about indexes.

If you've ever read a reference book you'll know roughly how an index works: you can find an important word quickly in the index because the index is small. The index points to a page in the larger body of the book. But once you've found your word in the index, you can find it quickly in the book because you can quickly thumb to the right page. 

This is exactly how database indexes work, and why from billions of web pages, search engines can find what you're looking for before you've finished typing it. It is why any web developer worth his salt (and given a decent server) can make a website go fast... but I digress.

How will a database help me?

Databases not only do the indexing and lookups for you, a relational database will let you query by linking tables -- for example customers and orders. If you have a customer table with all the relevant information about a customer - email, contact details and so on, you may not want to replicate this inside every order. So you have two data files (or 'tables', as they're known in the business) and you can join them both in a query, like this:

SELECT customer.firstname, customer.lastname, order.orderid FROM
customer INNER JOIN order on customer.customerid=order.customerid 
WHERE customer.lastname='Smith' 

The lines above are called a 'query', and this is sent to the database system by whatever programming language you use, from one program to another on the same computer, or over the internet.  The database server then interprets the query (at lightning speed) and sends the results back to the software.

So instead of writing software specifically to query each table and to match up the results, you simply phrase the query for the database server to understand.  And instead of goint through each line in the data file checking against your search criteria, you leave the job to the database server and its lightning-fast indexes.

What are the choices?

There are too many choices of database server to mention here, but I will name a few:

MySQL is an open-source product and the world's most popular web db, supporting the vast majority of the world's data-driven websites.

MS SQL is Microsoft's database server, very robust and full-featured.

MS Access is a desktop database, not suitable for large or web-based applications.

Oracle is the traditional choice for big corporate finance systems.

Where do I go from here?

For a first time web developer I'd recommend getting started with MySQL - whether using PHP or ASP. Most web server installations come with MySQL installed, and for ASP you can download "connectors" from the website.  For windows desktop use, WAMP (Windows, Apache, MySQL, PHP) is a real life-saver and installs all of the main components for getting a dynamic website up and running.

What's a Content Management System?

9th December 2011
Categories: basics, cms

A content management system (CMS) is a way of adding pages to your website without editing HTML.

CMS's have several advantages over HTML editors such as Dreamweaver:

- They allow the separation of design and content. When you have designed your website, you don't want content authors to make constant design changes. Design should come about through a completely different (and well thought out) process.

- They (typically) organise the navigation for you. As a very simple example, when you add a news item to your website, it should exist as a link on the home page , and as a story page.

- They allow your content to exist in more than one place. For instance a product could exist in more than one category page without you having to re-type the details, or your testimonials could appear on every page of the website without any extra work.

One of the simplest CMSs, but a reliable and well-supported one, is Wordpress. Wordpress has become almost synonymous with blogging, despite some search engine compatibility flaws such as allowing search engines to index duplicate content, and the limit of one blog per site. 

Joomla, Drupal, and Concrete5 are also well known CMSs, but there are hundreds of CMSs on the market, each with its own strengths and weaknesses.

Oxford Web's CMS, Oxebiz, is feature rich, in that it combines CMS, blogging, and customer relationship management in one control panel, and uses industry standard features such as the TinyMCE rich text editor.

As a developer, whichever CMS you choose, it takes time to get to know its quirks and the best methods of adding functionality, but once you have done that, you have a very powerful tool not just for editing websites but also for creating them, as CMSs normally provide a framework for getting up and running with a website, to which you add your header/footer HTML, CSS etc.

What is a web server?

4th December 2011
Categories: basics, web servers

If you've taken the journey through our technical blog from the beginning, you'll have an understanding of what HTML is and how to use it to build websites. We haven't yet covered how web pages get from A to B on the internet, so that's our next topic.

If you try out some of the HTML and CSS we've discussed and save it in a text file called webpage.html (make sure it's a text-only file, so use notepad or dreamweaver, or your favourite equivalent) then you will be able to double-click that file on your desktop (or wherever you've saved it) to see the resulting web page.

At this stage in the life of your HTML file, nobody but you can access it. It's a web page, therefore, but it's not part of the internet.

In order for this web page to become part of the internet, it doesn't just need to be on a computer connected to the internet. It also needs a web server, a computer whose purpose is to serve web pages to other computers. Web servers are usually Linux or Windows machines (there aren't very many Mac ones) with a program running all the time (also called a web server, confusingly) which listens for new requests and decides what to do with them.

For the web server software to be able to receive any requests on a domain name like, it doesn't just need to be connected to the internet; your browser needs to associate it with that domain name. This job cannot be completed on the server itself; you need to add entries to something called the DNS system. You can do this via a domain name registrar (in other words, the people who sell domain names, 123-reg and sitelutions being examples).

Once you've hooked up the doman name with the address of the web server (the so-called "IP" address), a process with which the domain name registrars will help you, your web server will start receiving requests - now it just needs to process them.

Web servers need to know where the web pages live (they won't look all over the computer; they need to start from a particular folder - that's called the web root), and they also need to know a bit about how you want to process different file types. For example, your HTML file might just be sent as-is to the user requesting it, for their browser to display. Other files, like PHP, may include instructions (lines of code) for the web server to process first - including receiving input, calculating, and fetching content from different places.

The web server processes whatever it needs to process, calling on other software (like the PHP interpreter) in the process, and finally serves up your web page. If your web page refers to other files (like a css file or image files, for example), the browser will make another request to the web server, and the web server will go through the request processing again and serve up another file. 

What are PHP, ASP and Java?

1st December 2011
Categories: basics, php

What are PHP, ASP and Java?

Having read the previous posts, you'd be forgiven for thinking that the world wide web is just a collection of interlinking documents.

That's how it started, of course, but now we have much more than that.

What links the static documents stage to a more interesting world wide web, where people can send and receive information, buy products, and generally interact with the web pages they visit, is software especially developed for building web pages.

There are three main contenders in this area:

- PHP (An open source system which stands, confusingly, for PHP Hypertext Preprocessor)

- ASP (Microsoft's 'Active Server Pages', which support various languages, including C# and Visual Basic)

- Server-side Java (another open source system originally developed by Sun) 

I'm calling them "systems" rather than "languages" because getting them working is a bit more complicated than writing software and sticking it in a compiler... but that's too much jargon already, please bear with me...

My aim in this article is to explain what these systems do that HTML doesn't, so rather than delve into the individual languages, I'll write some pseudo-code (pretend software code) to explain.

Say, for example, that you wanted the user to tell you their name. In HTML you can ask for their name - the code would look something like this:

<form> What's your name? <input type="text" name="namebox"> ... </form>

But HTML has no way of capturing the name once the user has typed it in, so we need a programming language so do something like this:

User_name = Get_the_user_input("namebox")
Print "Hello " + User_name

User_name is what's called a variable, in other words a placeholder for a value that can be changed at any time.

Get_the_user_input is pseudocode (pretend software code) for however you would retrieve some user input in your language of choice.

Of course, PHP, ASP and Java can do a lot more that retrieve input. They can store information, manipulate information, and output information. And like most computer languages they can make decisions and go around loops. This gives them the ability to do pretty much anything you want a website to do, given careful planning and the time to code.

All three also have the ability to create and manipulate "objects", a special kind of variable designed to mimic objects in the real world, which can have multiple properties and functions, and so can speed up the process of programming... but more on that in another post!

What is Dreamweaver?

25th November 2011
Categories: basics, dreamweaver

In the last couple of posts on HTML I've mentioned that you can easily edit it in a text editor. You'd be forgiven for thinking that I don't want to spend money on fancy WYSIWYG tools and that's why I'm so excited about being able to edit HTML in notepad. 

In fact what I like about HTML being written in plain text (unlike, for example, the formatting of Word documents) is that it's easy to debug (in other words, to look behind the scenes and figure out what's going on).

Dreamweaver combines HTML and CSS plain text editing with a WYSIWYG tool which lets you check progress as you go or edit WYSIWYG on the fly. It's the industry standard tool for this sort of thing, although there are many, many programs which do more-or-less the same thing.

So if like us you're hooked up with the entire Adobe product family, you'll already have it - do try it out. You can also get a taster by downloading a 30 day trial.

What we normally do when we create HTML and CSS from a design, though, is split it up into different parts of the page and hand-code those parts to a high standard in terms of HTML and CSS best practice and accessibility, something Dreamweaver doesn't always encourage, and then feed those bits and pieces of HTML into the template side of a content management system (CMS).

To find out more about CMS's you'll need to wait for my blog post on that subject - coming soon!

What is CSS?

22nd November 2011
Categories: basics, css

CSS (or cascading style sheets) is a language that enables you to tell a web browser how a webpage should look. Whilst HTML is a language describing the structure and content of a page, CSS describes how that content should look.

The syntax of CSS is extremely simple, you declare which element/elements you wish to affect and then declare the styles that you want to apply to them contained within curly braces (“{}”)

The selector (the part of the block which defines WHAT to affect) can be a HTML tag, a HTML class attribute prefixed with a “.” or a HTML id attribute prefixed with a “#” (there are others but these are the most common)


color: red;

background-color: green;

font-weight: bold;
color: blue;

In this example we have three blocks, each with a single selector (a, .title and #branding). The “a” selector will affect all “<a ” tags on the page (also known as anchors or links). The “.title” selector will affect all tags on the page that have “title” as one of their classes (i.e. “class=title”) whilst the “#branding” selector will affect the element that has an id of branding (i.e. “id=branding”).

As you can see above, the style declarations themselves are extremely simple: what you want to change, a colon, what you want to change it to and then a semi-colon.

The cascading part of CSS refers to the fact that all the elements will inherit the styles of their parents, for instance say you had the following markup:

<div id=”branding”>

<span class=”title”>My Company</span>

<span class=”subtitle”><a href=”/about”>about us</a></span>


using the styles above the text “My Company” would be bold and green (it gets the 'bold' part from the branding div that contains it) whilst the “about us” link would be bold and red.

You aren't limited to just using one selector in CSS, you can chain them together as a set of rules that allow you more control over what to apply the styles to. For instance you can declare a style for any anchor tag that has an element with the 'menu' class as an ancestor (doesn't have to be a direct ancestor)

.menu a

color: orange;
text-decoration: none;

To limit the rule to only apply to direct parentage you use “>”


.menu > a
color: yellow;

This would mean that the parent of the anchor would have to have a class of “menu” for the style to be applied.

One last thing to cover is pseudo-classes. These are used for special effects and refer to a specific circumstance, for instance, hover-effects.

text-decoration: underline;

This would cause all anchor tags to become underlined when the mouse is hovered over them.

What is HTML? - Part 2

21st November 2011
Categories: basics, html

I mentioned in my last tech blog post that HTML had taken a back step from telling browsers how to display content, and that this job had been taken over by CSS (Cascading Style Sheets). But wait! Not so fast! What does HTML do now, and what's good and bad about it?

First then, what does it do?

In the new way of things, HTML allows you to specify and mark up content, leaving CSS to define how the content is displayed.  So for example if I have a menu and some body text, those parts of the page might look like this in HTML:

<div class="menu">
<div class="menuitem"><a href="/">home</a></div>
<div class="menuitem"><a href="/about">about us</a></div>
<div class="bodytext">
We are a fabulous company selling t-shirts of all sizes

Note that nowhere does it say where the menu should go or what it should look like - the HTML just provides content and defines the purpose of the content - e.g. "menuitem", for the CSS to get to work on.

HTML is good because it provides a simple, text-editable way of getting content online, readable, and linking with other content.

The bad part is that there are so many legitimate ways of expressing the same thing, and despite attempts to tidy up everyone's usage, because of the number of websites out there that use antiquated methods of displaying information, it's difficult to break away from the old.

So for example, <i> means italic, but so does <em>, and so does <span style="font-style:italic">. Or if I want to organise something into a list, I could use a list tag, a table, or just div tags one on top of the other.

To write good HTML I'd recommend packing Dreamweaver back into its box and buying a book specifically aimed at HTML 5 and CSS (at time of writing HTML 5 is the most up-to-date version). This will help you on your way to write standards-driven (and therefore future-proof) web pages.

What is HTML?

14th November 2011
Categories: basics, html

There are many huge and cumbersome problems with the internet; one of them is HTML.

Allow me to explain. In the beginning, the internet was not synonymous with the world wide web. The internet was a network of computers, as you might have in any office. The communication between those computers was typically related to transfer of files, or instructions, or people running text-based programs on a remote computer.

Independently of the internet, a system called 'Hypertext' was developed, which allowed you to create a document with 'forks' or 'links' to other parts of the document. Interestingly enough, Jorge Louis Borges is credited with developing the first 'hypertext novel', The garden of forking paths.

Tim Berners-Lee is the genius who put hypertext, the internet, and other elements together to create the world wide web. Using the web you could connect to a remote computer to look at scientific documents and browse around them following the links.

Web page creators needed nothing more than a text editor to create hypertext markup language (HTML) documents ('Markup' refers to the way that ordinary text is 'marked' or 'tagged'):

“<b>” means bold, while “</b>” means end bold. so in a web page, the markup:

come to my <b>party</b>

would look like:

come to my party

<i>is for italic, <u>for underline,

So the following HTML:

<p>Visit the <a href="">oxford web website </a>for more <i>info</i>

would look like this on a web page:

Visit the oxford web website for more info

As HTML evolved, though, the markup became less about how things should look than about what sort of things they were. So as a simple example,

<h1>this is a header</h1>

but it's something else, a stylesheet, that tells the browser how to display “h1” headers. And we'll visit CSS in another blog post.

© Alberon Ltd 2018

8 Standingford House
26 Cave Street

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).