Free technical help for digital creators - music, video, art, photography, graphic & web design

Web site technologies by Toby Stack and Alistair Banks

There are many established and up and coming technologies/languages for building web pages and sites. Since the establishment of HTML, new technologies for building more complex and powerful sites seem to emerge every year. These technologies often require programming skills to achieve sophisticated user/interface interaction, skills which the typical non-programmer freelance graphic/designer does not have. Because of this we have recently seen the emergence and increasing popularity of easy-to-use CMS (Content Management Systems) such as WordPress which make available sophisticated web 2.0 features to the non-programmer.

Choosing the right web technologies

The web is one big compatible standard, right? WRONG!! Microsoft and Netscape's browser wars begun a long history of the buggy implementation of agreed standards due to (depending on how you view things) ineptitude or plain sabotage. Buggy browsers have frustrated many web designers seeking to build sites which will work on all computer operating systems and browsers.

Add to this the need to create attractive sites that work for disabled and able bodied surfers, are easy to update and simple to use, integrate ecommerce and databases, and can be effectively indexed and ranked by search indexes, and suddenly deciding upon the best technologies and approach becomes a bit of a minefield.

Therefore, before actually building a site, every web developer will need to consider ...

 

Here are 4 common scenarios ...

  1. A designer creates a static site with html, styles it with CSS, and adds some basic scripting features (forms, search etc) using "preset" plug-ins and behaviours.
  2. A designer creates a static site with html, styles it with CSS, and then hands the design over to a programmer who adds advanced functionality.
  3. A designer creates the complete site in a user friendly CMS, such as WordPress.
  4. A designer creates visualisations, or mock-ups, which are completely implemented by a programmer, perhaps using an advanced CMS.

Available technologies

Available technologies can be roughly divided into 3 types ...

  1. Technologies typically deployed by web site interface designers. Designers are primarily concerned with the aesthetic, style, functionality and navigation of a web site, but if they have "scripting" skills they may add functionality with plug-ins or use an entry level CMS (Content Management System) such as WordPress.
  2. Technologies deployed by back end/server side programmers. These languages are used to create enhanced interaction and web page functionality. A programmer will write code that allows information to be passed back and forth between a site visitor and a hosting server via a web page interface.

 

View in Landscape mode or Swipe to scroll
Languages / technologies typically used by web site designers Languages / technologies typically used by back-end server side programmers
Design Design & "scripting" Programming

HTML
XHTML
DHTML
CSS

JavaScript
JQuery
Flash (ActionScript)
User friendly CMS (WordPress, Joomla etc)

SGML XML and (X)HTML
Java
JQuery
CGI
PHP / MySQL
Ajax
ASP
JSP
Advanced CMS ( .NET, Drupal etc)

1. Technologies used by designers

HTML (Hyper Text Mark-Up Language)

Most web sites are built using a computer language know as HTML which uses a system of tags to control page elements and links. This is the oldest, most established and simplest method. Click here for more on HTML.

XHTML (Extensible Hyper Text Mark-Up Language)

HTML is not absolutely strict in its syntax. A designer can often get away with writing sloppy code. When XML was introduced HTML was re-written in it. This new version of HTML is called XHTML. Because XHTML contains all of HTML in it designers could continue to create web sites without learning XML. But XML demands that they are more careful in how they write their code.

The rules of XHTML are only slightly different to HTML. The main ones are ...

  • All tags must be lowercase (eg <p>, not <P>)
  • All tags must have an end tag (eg <p>Here's some text</p>) including empty tags (eg line break ...<b></br>)
  • Attributes of a tag must always be quoted (eg <a href="index.html" target="_blank">Go to home </a>

A page that is XHTML compliant must have the following code at the top to enable a browser to recognise and display it correctly ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If you make a new XHTML doc in Dreamweaver it will create this code for you. It will also add this important tag into the head tag ...

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Let it. This will help resolve XML conflicts (don't ask!)

unadorned.org has this definition ... "XHTML is a reformulation of HTML so that it conforms to the rules of XML. This means that XHTML is very similar to HTML, except for slight differences in the markup, but it is now an application of XML".

DHTML (Dynamic Hyper Text Mark-Up Language)

DHTML is the name given to the collection of web building tools that includes ...

  • HTML (or more commonly XHTML)
  • JavaScript
  • CSS (cascading Style Sheets)
  • Layers

These technologies allow more complex "interactive" web pages to be created.

JavaScript

JavaScript is a Java-like programming language developed by Netscape. Despite their similar names they are entirely different languages. JavaScript may be written into Web pages, along with HTML, as un-compiled code to produce basic interactivity such as changing graphic rollovers or to check the contents of a form. Source code in the browser compiles and runs the JavaScript.

CSS (cascading style sheets)

CSS is described in depth here

Flash

Although not strictly a web page building language, Flash can be used to create pages and sophisticated web applications, and is used by designers and developers. Its lack of support on iOS devices is an increasing problem and has resulted in a down turn in its use. For more on Flash click here.

WordPress is a popular open source CMS suitable for individual designers

WordPress logo

Joomla is a "mid-range" open source CMS suitable for small development teams

Joomla logo

Drupal is an advanced open source CMS suitable for development teams

Drupal logo

CMS (content management systems)

The primary advantages of CMS's are ...

  • Provides a way for designers to standardised the development and maintenance of multiple sites for multiple clients
  • Provides advanced functionality in the form of existing plug-ins and extensions which can be deployed to add a range of features from shopping cart systems to forums
  • Provides a way for clients to update sites themselves

"Entry level" CMS systems, such as the "open source/freeware"WordPress, can be deployed by a site builder with no deep programming skills, they have become popular. A designer need not hand over a large portion of the budget to a programmer, but can build sophisticated functionality themselves.

More powerful CMS's, such as Drupal, are used by many web development companies, because they allow teams to work on projects simultaneously, integrate with advanced databases, and allow advanced and flexible extendibility with bespoke programming.

All CMS's are extendable by bespoke programming or a growing "library" of extensions and plug-ins which add functionality for developers and end-users.

A typical CMS will allow ...

  • Team development
  • A variety of user accounts and access (admin, design, developer, client etc)
  • Templates
  • Extendable with plug-ins (shopping carts, search, bloggs, forms etc)
  • Database integration
  • etc

2. Technologies used by "back-end" server side programmers

SGML XML and (X)HTML

SGML (Standard Generalised Markup Language) was originally created as
a means to make documents that were easy for a computer to process.

SGML (Standard Generalized Markup Language)

SGML was a major influence on the development of HTML (HyperText
Markup Language) and HTML can be considered an extension of SGML
although HTML has quite a few differences so cannot be considered a
part of SGML.

www.arl.org has this definition of SGML ... "Standard Generalized Markup Language. SGML is both a language and an ISO standard for describing information embedded within a document. HyperText Markup Language (HTML) is based on the SGML standard".

XML (Extensible Mark-Up Language)

XML (eXtensible Markup Language) is also a descendant of SGML, XML
was developed to make SGML easier to read by machines and in doing so
means it is a stricter language and has also has taken over from SGML
replacing it almost entirely.

www.rustybrick.com has this definition ... "Short for Extensible Markup Language, a specification developed by the W3C. XML is a pared-down version of SGML, designed especially for Web documents. It allows designers to create their own customized tags, enabling the definition, transmission, validation, and interpretation of data between applications and between organizations".

XHTML

Just as HTML is an extension of SGML, XHTML is an extension of XML
meaning all XHTML is also XML. As XHTML is also XML XHTML is also a
strict language, this means computers can more accurately process
XHTML as there is less room for ambiguous statements.

JAVA

Java is described here

CGI (Common gateway interface)

CGI (Common Gateway Interface) scripts are pieces of code (small programs) which "live" on web servers and transfer information between web sites and applications (typically databases) usually in order to retrieve, process and act on information typed into a web site by a surfer (such as a credit card order).

CGI scripts are usually commissioned by web developers and written by programmers. Be aware that even if you develop scripts, finding a server willing to host them and your site may be problematic.

New scripting features in authoring platforms such as Flash 4 are offering cost effective alternatives to the expense of developing bespoke CGI scripts.

www.eseehosting.com has this definition ... "The common gateway interface (CGI) is a standard way for a Web server to pass a Web user's request to an application program and to receive data back to forward to the user. When the user fills out a form on a Web page and sends it to the server, it usually needs to be processed by an application program. The Web server typically passes the form information to a small application program that processes the data. This method or convention for passing data back and forth between the server and the application is called the common gateway interface (CGI)".

Dynamic content

XHTML and CSS provide the fundamental tools for making websites, however the resulting webpage is rather like a poster or leaflet, although the end user can read the webpage there is no way for them to interact with the webpage.

For a large number of sites this does not pose a problem, if the site is a tutorial site such as this one there is only a one way flow of information, from the site to the user. However many sites now aim to provide extra services and tailor their site to their users needs, to do this they need to be able to process data and gather information from the user and generate user specific pages. One way to provide this functionality is to used software that runs in the browser via the use of plug-ins such as Flash and Java but this means all users of your site will have to have these plug-ins installed, which is not an ideal situation, fortunately with the use of scripting dynamic content can be generated that is accessible with any modern web browser.

There are two main schools of scripting, client side scripting and server side scripting. Client side script is script that runs on the users computer using the browser, server side script runs on the web server the page is hosted on. Here is a list of a few of the main technologies.

Client side

Client side is best for processing user actions giving instantaneous feedback, it is also good for checking data that will be sent to web server to speed up error checking. However it is limited as it cannot directly interact with the server. Server side processing runs on the web server and is most commonly used to interface with databases and provide dynamically generated web pages. Although extremely powerful the interface is limited as it relies on you sending data to the server (usually via a form) and then the server creating the web page to send to you.

Javascript

Javascript is the most commonly use client side script and the one you are most likely to use.

VBscript

VBscript is a scripting language developed by Microsoft it is not wildly used as only IE fully supports it (both Firefox and Safari do not support VBscript).

ASP

Active Server Pages (ASP) is a server side scripting language developed by Microsoft, it is widely used but will only run on widows based web servers.

Server side

PHP

PHP is a very popular scripting language, it is open source and free to use, many sites (including Wikipedia) use PHP in combination with MySQL an open source database management system. PHP will run on both linux and Windows based web servers.

CMS

Content management systems have become widespread and sophisticated. Open source/freeware systems (WordPress, Joomla, Drupal etc) are increasingly being deployed by designers and large agencies because the are cheap and are increasingly offering features that rival established but costly technologies such as ASP and .Net.

.Net

Another highly powerful Microsoft technology.

JSP

JavaServer Pages is a similar type of technology but based on Java, it is not wildly used but may be useful if you are using other Java technology.

Which technology should I use?

Choosing the right technology when creating web pages requires in-depth knowledge of techniques and computers.

You will find the answer to this question in the functionality required by your client, and in conversations with a back end programmer. Here are some questions which will help you decide ...

  • Will the site be static HTML pages with little interaction beyond a form or 2?
  • Does you client require a shopping cart system?
  • What web 2.0 technologies are required (bloggs, forums etc)?
  • Does the site need to integrate with a database system?
  • What are the accessibility needs?
  • What are the SEO needs?

 

www technology milestones (a short history)

More here