Hands on: Dynamic data
How to make sure your website keeps up with changing events
Over the years we’ve looked at web development, one of the things that has remained constant has been the need for many people to create sites that change in some way, rather than the static text of the first web generation.
There are many ways to do that; simple CGI scripts can rotate graphical elements or pull in headers and footers that might add info using server side includes or server parsed pages.
And then there are more complicated scripting languages, such as Perl and PHP.
For many casual web developers, the combination of PHP with the MySQL database is a popular way to code sites.
You can create database driven pages that are easy to update and provide a great deal of customisation for visitors by remembering what they last looked at and so on.
Interactive or dynamic?
Before we go further, it’s worth considering the terms ‘dynamic’ and
‘interactive’. On the whole they are not interchangeable.
I’m going to refer to sites as dynamic if they’re driven by a database backend that essentially creates a page and delivers it to the user; that might be based on the information they entered into a form, or chose from a menu, or their preferences.
But essentially an ordinary-looking page is sent from the web server to the browser.
When I talk about interactive sites, I mean those in which the page isn’t fixed; it may change in look or in the information displayed, based on how the user interacts with it.
That might include fancy Javascript menu systems or scripts that check for errors before submitting a form.
We’ve not looked at these in detail in Hands On Web Development but we’re going to explore the topic more over the next few months. Don’t worry, we won’t jump in at the deep end.
The scope
So what exactly is encompassed by the term ‘interactive’? As you might imagine,
it’s a broad church.
A fairly basic website might have some simple interactive elements; you could add a pop-up glossary of terms, for example, or those very annoying highlighted words that look like links but that are actually context sensitive adverts.
You might use Javascript rollovers to create buttons or validate information that people enter into a registration form.
At the top end, you might combine technologies to come up with a highly interactive site, such as some of the Web 2.0 generation, using Ajax (Asynchronous Javascript and XML).
These can, for example, use a dynamic backend to provide information to the user – say a list of available flights you might want to book – and then the web page itself can format and display those, allowing you to choose whether they’re sorted by price, or departure time, or omit certain items from the list – all without having to go back to the web server.
Other sites use scripting to provide a ‘desktop’ feel, for example collapsible ‘preference panes’ so you can change your settings easily, or view different parts of a page, with no waiting for a reload.
None of these is particularly beyond the skill of a reasonably clever web coder, as we’ll find out over the next few months, but you will need to brush up on a few important technologies.
First steps
We’re going to begin with some basic Javascript; it’s the tool used to provide
the interactivity in the web browser itself; also known as ECMAScript (after the
standards organisation that now controls the language) it’s found in virtually
every browser.
About the simplest thing you can do with Javascript is write information to a web page. If you’ve followed the PHP tutorials, this is almost analogous to the Print command. This basic code tells the user whether or not Javascript is enabled, using the <script> and <noscript> tags.
<html>
<head>
<title>PCW Simple JavaScript page</title>
</head>
<body>
<h1>Welcome to our test page</h1>
<p>Welcome to the PCW simple JavaScript page</p>
<p>Checking ...
<script type=”text/javascript”>
document.write(“Great! You’ve got JavaScript enabled”)
</script>
<noscript>
Whoops! Either you’re using a browser without JavaScript, or it’s turned off.
<em>This site will work best with JavaScript enabled</em>
</noscript>
</p>
</body>
</html>
That’s probably about as simple as it’s possible for a Javascript to be. You could include others on the same page, for example to display the date and time, and you can omit specifying the type of the script if you want to save space.
However it’s not the most compact of things, and usually Javascript tags are kept in the head of the page and referenced later on.
That’s easily done, either with script tags, or by calling Javascript in response to an event, such as clicking on a link.
For example:
<p>Don’t click <a href=”test2.html” onClick=”alert(‘We told you not to
click’);”>this link</a>.</p>
will pop up the alert message, before redirecting to the specified URL.
Similar triggers, such as onmouseover and onmouseout, are used to swap images around for animated buttons, but let’s stick to the basics for now.
Each command in Javascript ends with a semicolon; you can group sequences of commands into functions, and pass options to them, just as if they were built in.
In the next column we’ll expand some more on this, and show you how you could use some Javascript to create pop-up help messages for your site, and we’ll start looking at one of the key aspects of using it to make interactive pages – the Document Object Model.
Meanwhile, if you’d like to learn a little more, there are several tutorials on the net, including one that’s well worth a look at www.echoecho.com/ javascript.htm.
Web navigation
The latest title from O’Reilly covers a topic we’ve touched on here before –
Designing Web Navigation explains the principles behind different types of
navigation, and what you need to consider when you’re designing that aspect of
your site.
I’ve not had a chance to read it yet, but there are sample pages available at www.oreilly.com/catalog/9780596528102 and at £30.99, it could be a useful way to spend any book tokens you’re given this Christmas.
Domain renewals – watch out!
I’d thought that the bad old days of cheap tricks in the domain renewal market
were largely long-gone.
Not so, as it turns out – I received an email regarding one of my website domains in September, telling me the domain was due for renewal, which was true.
It said: “Click on the link in this e-mail to renew the domain for another year. You should renew your domain as soon as possible in order for it to continue to be registered in your name.”
All perfectly correct, but then it goes on to say: “If you want Domain Renewal to extend the domain for you, we ask you to click on the link in this email. If you do not wish to use your domain after the due date for renewal, you may disregard this email.
When Domain Renewal extends your domain no information will be changed in the ‘Whois’ information section.”
To me that strongly suggests that if you don’t click the link, it won’t be possible to use your domain after the renewal date. That is simply not true. Clicking the link takes you to a site called www.domainren ewal-online.com.
There is a .eu variation as well as several others, all owned by a company called Domain Renewal SA. Their terms and conditions give them more rights than they give you, and they’ll even ask for your password so they can update your domain information.
Don’t be taken in by a few copied and pasted corporate images – Microsoft, Oracle, IBM and Cisco logos are stuck on there but the site seems to be no more associated with those firms than anyone who uses Windows is associated with Microsoft.
You should renew your domain with your usual registration agent instead (they will probably send you their own reminder anyway).
In the case of the domain for which I received the reminder, a renewal for one year via my existing agent would cost me $9.99. I could renew for eight years at a cost of $79.92, compared to the $79.95 that Domain Renewals SA wanted to charge me for a single year.
The moral – don’t fall for this. Make sure you know which registration service you use for all your domains and if you’re a business, make sure your accounts department knows too.
Mark domain expiry dates in the diary and renew them at your convenience – not in response to reminders from companies that you’ve never heard of, and certainly not one that asks for your password to do it.
© Incisive Media Ltd. 2008
Incisive Media Limited, Haymarket House, 28-29 Haymarket, London SW1Y 4RX, is a company registered in the United Kingdom with company registration number 04038503
