Coding for non-programmers

This video will show you how to add interactivity to a web page without having to become a professional programmer along the way. It's all about keeping things simple.

The world is a complex place and excessive complexity can be found in all walks of life. Rolls-Royce were said never to use one bolt where 14 would do the job. In software engineering, no year goes by without the introduction of yet another raft of software tools, languages and frameworks, and it's hard to keep up and still get any productive work done. Many professional programmers love this complexity because they have the skill and the ability to handle it, but they tend to forget that not everyone is like them.

I'm going to dial things down a bit. This tutorial is about technologies that keep things simple so that everyone stands a chance of understanding them. Let's get started with a little bit of history.

The World Wide Web is almost 30 years old. It was invented in 1989 by Tim Berners-Lee and at its heart is Hypertext Markup Language (HTML).

Imagine I'm holding a glass box in my hand. It's a special kind of glass that's totally transparent and neither reflects nor refracts, so you can't see it.

Inside the box is some content - a piece of text or an image. You can see that even though you can't see the box. The box is magical in that it expands or contracts to just fit whatever you put into it.

Let's take 3 of these boxes, put some text into each one then put all 3 boxes into another box. Now, when you move the box around all the smaller boxes move at the same time. You could put an image into the outer box then put the outer box into yet another box, and so on.

That's basically what HTML is all about; a hierarchy of invisible boxes inside other invisible boxes. Early web pages reveal this simple structure, as you can see from these examples.

This is the very first web page ever seen, and the amazing thing is it's still there.

Here's Google when it was still only a demo.

This is an early version of the BBC website.

And this is TheFacebook as it originally existed.

So that's HTML. These early web pages were like word processor documents, where each element carried its own style information - colour, font size, spacing and so on, but the capabilities were rather basic.

The second component of a web page is Cascading Style Sheets. The introduction of CSS allowed web page designers to separate style from content, offering a great deal of flexibility and making the page source easier to read.

CSS is normally kept in separate files and the HTML document links to them. CSS is getting more and more comprehensive and in a modern web page there's often more CSS than HTML as the designs get ever more elaborate.

What we have so far, tough, is a static web page. Once it's loaded it does nothing until the user interacts with it by clicking a hyperlink. This causes a request to go to the server, which then returns a new page. Although the Internet gets faster every year there's still a noticeable delay while this happens, and the screen normally gives an ugly flash as the new page appears.

So the next step is to improve interactivity, by making the page smoother and do things without the need to go to the server each time. This means programming and it means JavaScript.

JavaScript is pretty intimidating for most people who aren't programmers, and even for many who are. However, many WordPress websites are built by designers, system integrators, database specialists, shopkeepers, sportsmen or musicians. That's the whole point of WordPress; to provide anyone with the means to build a website. And they do, in their millions - about 75 million in total. So how does a WordPress site builder add some interactivity?

The first way is with plugins. There are thousands of these and maybe there'll be one that does something close to what you want. Good luck with your hunt, as indexing in the plugin library is primitive and the documentation is often unhelpful. And be prepared to compromise.

The other way is to learn to program. And here I have some good news; you don't have to learn JavaScript. I'm going to show you a way of programming that's much simpler than JavaScript but does most of the things you need for an average web page.

Let's take an example. Here's a web page that shows a diagram of a set of traffic lights. Under the 3 lamps is a Step button, which when clicked takes you to the next step in the traffic light sequence. Reloading the page every time the user clicks is obviously a non-starter, so it's an ideal candidate for some in-page programming.

Here's the HTML to display the graphic. As it stands all you'll see is the Step button because none of the other elements have any content nor any style information.  The grey box and the lamps themselves are given visibility by styles, which are normally provided in an external CSS file. But that's just one way of doing it; the styles can also be generated by a script.

In this example I'm not going to use a CSS file at all. Instead I'll get a script to do the job. I'm using a WordPress plugin called EasyCoder, which is a sizeable chunk of JavaScript. EasyCoder detects when a new page loads and looks for a preformatted block with a special id. If it finds the id it compiles the script and runs it.

This is the special preformatted block, with no script code in it yet.

Here are the first few lines of the script, showing some variable declarations. If you're not clear what a variable is, it's a place to store information, and that place is given a name. Here we have a number of variables; the names are the ones with the capital letters. Before each one is a word that indicates the type of the variable. Some are general-purpose and others relate to parts of the HTML and the Document Object Model (DOM for short).

For reference, here's the HTML. Each of the ids is handled by a script variable of an appropriate type. The grey box is handled by a div variable called Box and the 3 lamps are all handled by a single div variable called Lamp. There's also a numeric variable called State that remembers where we are in the traffic light sequence.

The first thing to do is define the characteristics of the box. To work with a DOM element you must attach a variable to it using its id. The name of the element is in curly braces (most other languages use quotes but there are problems doing that in WordPress and curly braces work much better). The rest of the lines each define a CSS style to be applied to the box. If you're familiar with CSS this should be pretty easy to follow. The colours are all standard CSS names; there are several hundred to choose from.

The next bit of the code sets up the 3 lamps. First it attaches the Lamp variable to one of the lamps, then it calls a subroutine that does all the things that are the same for all the lamps. Finally it does the one thing that makes each lamp different; it sets the background colour.

Here's the subroutine that was called 3 times. Here you can see the magic trick for creating a circle, by making the border radius half the width or height. At the top is a label that defines the subroutine; label names all end in colons. Professional programmers may throw up their hands in horror at the idea of having gotos and gosubs in a language, but EasyCoder isn't aimed at them; it's for non-programmers, for whom structured programming might as well be Chinese.

The last bit of preparation is to style the button so the text aligns centrally, then we initialise the state counter and wait for the user to click the Step button. The stop command prevents the program from running any further; nothing will now happen until the user clicks the button.

When the user clicks the button we advance to the next step in the sequence. There are only 4 steps so when we run off the end we reset the counter to 0. Then we check to see where we are. Earlier we set up the lamps so only the Red was lit up; the other 2 were set to Black. State zero is red but previous to that was amber, so we turn off amber and light red. The exclamation mark signifies that the remainder of that line is a comment to help the programmer remember what the code does; the compiler ignores it.

The first click takes us from state 0 to state 1, which is red and amber, so since red is already alight all we have to do is light the amber lamp.

The next click takes us to state 2, which is green, so we turn off red and amber and light the green lamp.

Finally we arrive at state 3, where we turn off green and light the amber lamp.

And that's all there is for the traffic lights. You can try it out for yourself; install the EasyCoder plugin, create a new page or post then follow the instructions in this presentation.

Now here's another example, that demonstrates an efficient way of handling data inside a web page. Here we have our page structure in its 3 parts. The HTML part is actually 2 things; it's the content text but it's also the structure, the glass boxes I described earlier. If we separate the two we can do some cool things with them.

Now the content is separated from the markup. On the left is the HTML glass boxes; on the right the text and images that will go into the boxes.

In this example the area inside the dotted line is all managed in the WordPress page editor. Only CSS is left outside, and as you've already seen there are times when some or all of that can be in the page too. It's all down to the preference of the person building the website.

To show how this division of markup and content works, here's the home page of a website under development for my client Matthew Moss. Matthew is an Irish-born artist living in Monaco, and he’s a world expert on the life of Rembrandt van Rijn, the Flemish Old Master. Many of the Old Masters had famously chaotic lifestyles and Matthew has created a series of amusing paintings; cartoons depicting fictitious events in the life of Rembrandt and his contemporaries, some of them set in a modern context. His website is an online gallery that offers copies of the paintings for sale.

The main page shows 3 paintings. There are over 50 paintings in the series and there are buttons to display the next or previous 3 paintings. When the page initially loads the order of the paintings is randomised so users get a slightly different experience each time they visit.

Because of the location of Monaco, all the text of the website is in 3 languages; English, French and Italian, and a row of national flags is shown so the user can switch between them.

Let's take a look more closely at the central section of the page.

The intention is to have all the major functions of the page operate without any reloads, so when we first enter all the text is provided in each of the 3 languages, along with the URLs of the images themselves. To hold all this information we use a Javascript Object Notation (JSON) structure that we include in the page when it loads. This causes a small increase in the page load time but removes delays that would otherwise be encountered later.

The JSON includes every piece of text seen by the user, including button labels and rollover text. The HTML itself doesn't include a single piece of user text; instead, most of the elements have CSS ids that correspond to items in the JSON data. The display language chosen by the user is not identified inside the HTML; it’s up to the controlling script to append a suitable language suffix when it wants to find the right piece of text.

Here's the outline structure of the page. It's very simple; at the top is the HTML markup, under that the data and finally the controlling script.

The HTML looks like this. It's a single table of 2 rows and 3 columns. The top row holds the pictures with their titles and the bottom row holds a caption and some explanatory text. None of these fields have any content yet but they do have ids that allow us to fetch content and inject it where needed. Every id has what we call a namespace prefix, in this case ec-, which avoids any risk of our ids clashing with those used by the WordPress theme.

The JSON data looks like this. JSON has fast become the most popular way of representing structured data and passing it around the Internet. If you're not already familiar with it don't worry too much, but it's worth getting to know a little about it. An array - or list - is denoted by square brackets and the items it contains are separated by commas. Here we have an array with 3 elements, one for each painting, but this is only a demo; remember that in the final website there are over 50 elements. Each element contains 4 name-value pairs, as we call them; the URL of the image, a title, a caption and some explanatory text. Note that these are all English values with -en suffixes; in the real website there will also be translations with -fr and -it suffixes.

And lastly we come to the script, which as before is found inside its special preformatted block. This is just the part of it that deals with the setup of the items in the table. Much of it is concerned with extracting bits of information from the JSON and setting them into the right items in the HTML.

We start with declarations of all the variables that will be used by the script. As before, some are intended to be attached to HTML elements and others just hold numeric or textual values.

The first instruction is critical; it attaches the Database variable to the HTML pre element that holds the data.

We then set the display attribute of this item to be none, which makes it invisible. Otherwise you'd see the entire database on the screen.

Then we extract the content of the database - the JSON code - and put it into a variable called DataMap. Then we extract the item whose name is gallery and put that into the Gallery variable. In this simple example the gallery item is the only one, but in the final website the data includes items such as the text of the Next and Previous buttons and the language flags.

There's quite a lot of JavaScript going on behind some of these commands, so the code tends to be somewhat more compact than the JavaScript it replaces. The primary aim, though, is to make the whole thing as readable as possible to people with no training.

Moving on, here we have a loop that counts through the 3 images to be displayed, extracts some text and injects it into the HTML. The code runs through the same set of instructions 3 times, with the variable Index counting up as we go. This is the job of the while instruction.

Inside the loop, first we get the data for a single painting. Here's the data itself, for reference.

Now we get the src item; the URL of the image, and put it into the Image variable.

Then we attach our ImageElement variable to the item in the HTML with the requested id. The word cat is short for catenate, which joins 2 bits of text together. Here it's adding the index to the end of the id string to form the full id.

Having got both these items we can set the source attribute to the image URL, causing the image to be loaded from the server and placed onto the screen.

We can do the same thing for the image title, though it's a bit simpler as the text is already present so nothing has to come from the server.

And similarly for the caption and the explanatory text. The whole thing is repeated for all 3 cartoons.

And that brings me to the end of this presentation. I hope you found it interesting and useful; if you have any questions I'll be pleased to answer them, preferably via the Slack workspace shown.