Introduction and Audience
This article is meant for web designers who would like to familiarize themselves with the server-side and client-side interactive technologies available for web sites, and what each of them does. The first section contains an overview of the different categories of web technology, and the second section is a functionality-oriented guide to choosing technology to use on a site to achieve specific goals.
Categories of Web Technology
Markup Languages
"Markup" refers to the idea of taking plain text web content, and adding indications of how the text should be formatted. The HyperText Markup Language (HTML) is the usual way to mark-up text for web sites. Cascading Style Sheets (CSS) can be used with HTML to specify formatting for different HTML elements in different contexts. XML (or Extensible Markup Language) is another web markup technology, but it is more commonly used for data interchange over the web between different software and/or different businesses, rather than for creating web pages.
HTML is supported by all web browsers (by definition), and CSS is supported by most relatively recent versions of browsers.
Client-Side Scripts
"Scripts" is a general programming term for short, text-based software programs. Client-side scripts are embedded in HTML web pages, which execute within the viewer's web browser software (i.e. they execute on the "client" side of the client/server web architecture, rather than on the web server). These scripts can be used to do simple computations, verify data, display calculated information on a page, respond to the user's mouse motion and mouse clicks, put new browser windows on the screen, show and hide text and images, change text styles, and create drop-down menus and similar effects. Client-side scripting languages do not have the complete functionality that would be available in a full-fledged programming language (such as C or Java), and for security reasons, are limited to doing calculations and actions based on the content, markup, and embedded data from the HTML page they are in, along with information entered by the user in forms on that page, and reactions to things the user does in the browser window (such as moving the mouse).
The most commonly-used client-side scripting language is JavaScript, which is supported on most relatively recent browsers; unfortunately, each browser has its own variation of JavaScript, as there are not any real standards for the language. There are libraries, such as jQuery that can help with this problem, however. Other client-side scripting languages, which are supported only by a limited number of browsers, include VBScript and JScript. Typically, a software developer is needed to write client-side scripts, but many pre-written scripts can be purchased or downloaded, for use and modification by less technical web designers.
Browser Plug-Ins
Browser plug-ins are programs a user can download, which run inside a web browser window and add functionality to the browser -- that is, they allow the browser to display non-HTML content, and interact with the user in ways that go beyond client-side scripting. In some cases, the plug-in enables content to be displayed inside an HTML page; in other cases, the plug-in takes up the whole browser window. Generally, once the user has downloaded a plug-in for their browser, whenever the browser encounters content that corresponds to the plug-in, it automatically displays it in the current browser window.
There are many plug-ins available for web browsers; some of the most commonly used are the Adobe Acrobat Reader, for displaying PDF files; Sun, Microsoft, and IBM Java Runtimes, for running Java applets embedded in HTML pages; Windows Media Player, RealPlayer, and Apple QuickTime, for playing sounds and movies in various formats, usually embedded in HTML pages; and Macromedia Flash, for displaying Flash animation embedded in HTML pages.
Creating a plug-in program requires significant software development expertise and time, and each type of browser, on each operating system, requires a separate plug-in to be developed. For that reason, most web designers and developers will not develop their own plug-in software, but instead may develop content that can be displayed using existing plug-ins (such as Flash Action Scripts, MPG movies, and PDF files). Software development expertise is also necessary to create complex Flash scripts and Java applets.
Server-side Scripts, Programs, Databases, and Content Management Systems
Sometimes it is desirable to have web pages that are dynamically generated from a database each time a user visits them, based on user login, or generated from the user's previous entries in a web form. The site owner usually wants to keep the data and logic of page generation hidden from the viewer, so a client-side script is not appropriate (since client-side scripts are text-based, embedded in the HTML page itself, and can only operate on data that is also embedded in the HTML page, they keep neither the data nor the program secret). So, the usual practice is to store data in a database program running on the web server (or perhaps a separate database server), and generate the HTML pages the viewer sees from programs or scripts also running on the web server.
These so-called "server-side" scripts and programs can be quite complex, and can be written in any programming language. When the web server receives a request (from the user's browser) for a particular page, it passes the request on to the server-side script or program, which could gather information from a database, read information entered by the user in forms, do text manipulations, or perform numerical calculations; the program then puts the result in HTML format. This end result is passed back to the web server, which sends it to the user's browser for display as a standard HTML page.
The most commonly-used database programs for web pages are MySQL and Microsoft SQLServer; some web pages also use Oracle, PostgreSQL, and other databases. And while server-side programs can be written in any language, the most common languages are PHP, Perl, and ASP/Visual Basic/C#; some server-side programs are also written in JSP/Java, C++, and other languages. Typically, a software developer is needed to write server-side scripts, but some pre-written scripts can be purchased or downloaded for use by less technical web designers (such as scripts for shopping carts, guest books, form-email, blogs, and forums).
There are also collections of server-side scripts known as "content management systems", which are pre-written scripts for managing web site content. Drupal and WordPress are two commonly-used examples.
Server Set-Up
Web servers have settings and preferences that can be used to control access to files (including password protection), what the user sees if they request a non-existent page, and other behaviors. The commonly-used Apache web server uses a text file called ".htaccess" to store preferences; check our article on .htaccess files for more information. Some web hosts may also have a web-based interface you can use to set preferences for your web site, and sites hosted on Windows servers using IIS use a completely different scheme for preferences.
Effects
The table below lists a number of effects that are commonly used on web sites, and shows which technologies can be used to achieve them.
| Effect | Description | Technology |
|---|---|---|
| Backgrounds | Background colors and images for pages and parts of pages | HTML and CSS markup |
| Appearing and disappearing text and images | When the user clicks or moves the mouse in some region on the web page, text and/or image(s) appear or disappear in that region or elsewhere on the page | Client-side scripts or Flash plug-in |
| Drop-Down menus | The user can choose from a menu, or a cascading series of menus, to navigate to different pages in the web site | Client-side scripts or Flash plug-in |
| Sounds | The user hears music or other sounds when viewing a web page | Flash or other media plug-in |
| Animation | A movie or other animation is displayed in a web page | Animated GIF image embedded in mark-up, for simple animations; plug-ins for more complex movies and animation |
| Surveys and forms | The user can enter information in a form, and transmit it to the site owner | HTML markup to display the page, and server-side scripts and databases (or a content management system) for processing and storing the information. Client-side scripts can also be useful for validating the information before the user transmits it. |
| Shopping | The user can choose items from an on-line catalog, put them in a shopping cart, and purchase them | HTML markup to display the pages; server-side scripts (or a content management system) to process the orders. Most web designers will use a pre-built shopping cart system, rather than developing their own. |
| Interactive games and learning | The user can play a game, use a learning tool, or do something else interactive, where their mouse motions and/or keyboard entries are immediately responded to | Flash and Java applet plug-ins |
| Searching and sorting | The user can search the site for products or information, and receives a sorted list of answers | Server-side scripts and databases (or a content management system) can be used to create a web-based catalog (or other list), or a searchable information index. Simple site search of static HTML pages can be done using commercial search engines (i.e. making use of their database of indexed web pages and their server-side scripts for searching the database). |
| Guest book | The user can enter comments, or perhaps upload photos or other documents, for viewing by other users | Server-side script and database, or content management system |
| Time-dependent content | Content that changes based on the date or time of day | Server-side scripts and database, or content management system |
| Password protection | User must log in to visit parts of the site | Simple password protection can be done using server set-up preferences. Some login-enabled sites are also built using server-side scripts and databases; content management systems generally have advanced user management capabilities. |
| Custom error pages | If user requests a non-existent page, or tries to access a page they are not authorized to view, they get a prettier and more comprehensible error page, rather than the default "404 not found" error page | Server set-up |
If you have any questions about what technology is behind other web effects, or need the services of a software developer to add to your web site, please contact Poplar ProductivityWare today!