This report is also available as an Acrobat file.

Contents
Authoring and Design for the WWW

PRINCIPLES AND THEIR IMPLICATIONS

Functional markup versus fixed formatting

Advantages of functional description

(the HTML approach)

In functional description, each element of a document is given a descriptive tag, which indicates its role, for example as a headline, as an emphasised word, as an item in a numbered list, and so forth. Here we look at the advantages in principle of this approach, and begin to see how it impacts on Web work. Key advantages are portability, the ability to make multiple publications from a single source, to make publications which change their form according to need, and the partial automation of layout.

Portability

Content which does not fit the available display can be reformatted automatically to suit the space available.
In practice
All popular Web browsers can reflow text to fit the space available. However few can resize graphics and other multimedia components, losing some of the advantages of this flexible approach.

Page designers may override the ability of the browser to reflow the text to fit the screen, for example by using tables. Under these circumstances, the user may have to scroll the browser window sideways to see all of the content, militating against one of the strengths of functional description.
The publisher of a Web document need not know whether the user has exactly the right typefaces, since the browser software will choose from the typefaces available, according to preferences set by the user.
In practice

The issue of fonts is one of the most problematic in the exchange of electronic texts. The fundamental problem is that fonts are intellectual property and cannot be given away with the documents that use them. In any case, for users to have to install the fonts for every document they read would be intolerable. The Web adopts a simple solution, which is to avoid transmitting font information altogether: there are no HTML instructions for specifying fonts. Instead documents are reconstituted on the user's machine in whatever fonts are available (normally a default font for the browser or one chosen by the user).
Functional descriptions can be interpreted differently by different display devices. For example, hypertext links could be displayed in colour on a colour monitor but underlined on a monochrome monitor.
In practice
This approach means that at least the textual content of documents can be delivered to users who have a text-only display. However, as increasing use is made of graphics and other media in Web pages, these advantages can also be undermined.

Multiple publications

When a differently formatted publication is required it can be produced not by changing the functional descriptions but simply by altering the formatting instructions. By this method, material can be made to appear in radically different formats, such as on paper and on screen.

In practice

Up to a point, documents prepared for the Web can also be laid out on paper using some of the same mark-up tags as control the presentation on screen. This means that where documents are required in both screen and paper forms, economies of effort are possible. However, due to the differences between true functional description and the hybrid approach using style-sheets adopted by most page-layout packages, some reworking will be necessary whether material is transferred from the Web to paper or vice-versa.

Filtering and configurable presentation

When the components of a document are described functionally, the document can be presented in different ways on demand. For example, main headings alone could be presented at one moment, while greater detail is presented when the user requests it (an example of this approach is the choice between headings and detail offered by outliner software).

In practice

Some proprietary hypertext systems (for example, Guide) offer this possibility of unfolding text which adds to or replaces the top-level summary information within the same document. Web browsers do not offer levels of detail in this way. However, HTML does make it easy to present summary information on one page' and fuller detail on another. The user moves from one to the other by clicking on the summary text. It is necessary for the designer to provide a go back' facility which returns the user to the original summary text unless the user is to use the go back' facility of the browser itself.

Special needs

Users can adjust the way in which the content is presented to suit their needs.

In practice

A larger default size of type can be chosen in most browsers. The relative sizes of larger and smaller type within the document are preserved.

Plug-ins for popular browsers allow text-to-speech software to read aloud the text of a Web page.

In principle, hypertext links could identify themselves by emitting a sound when pointed at. However we do not know of any browser which actually offers this kind of facility.

Integration of hypertext links in the document description

Primitive hypertext systems separate the description of what the text looks like from its hypertext behaviour'. Functional description allows the same method to indicate that something is, say, an emphasised word or a hypertext link point.

In practice

Just as an element of the text can be specified as, say, Heading Level 2, so any part of the text can be made into an active item. The same is true of a picture. An active item will typically be a hypertext link to another page (an anchor'), but might instead open an e-mail editing window or activate some other interaction.

Since the tagging of an element is bound to the element itself the tags are embedded in the text the function of the element will always be carried with it. This is one of the great merits of HTML over other systems which use position on the page to store the location of active areas. Without this binding of the element to its behaviour, there is a real danger that the interactive function will separate from the triggering element, typically as a result of the document having been edited.

This text has an emphasised word and a hypertext link in it. Each is specified in a similar way. The linking is bound to the link word in a way which withstands changes caused by editing. It is also easier to automate the process of making links, for example by using search and replace to turn all occurrences of a particular word into hypertext links.

<p>This text has an <em>emphasised</em> word and a <A HREF="name of document to link to">hypertext</A> link in it. Each is specified in a similar way. The linking is bound to the link word in a way which withstands changes caused by editing. It is also easier to automate the process of making links, for example by using search and replace to turn all occurrences of a particular word into hypertext links.</p>

Functional description

The upper text, as displayed to the user in a Web browser, was generated from the HTML markup in the text beneath it. Note that the form and use of the tags is the same, whether the behaviour' intended is that a text item should be visually emphasised or that it should be turned into a hypertext trigger leading to another text.

Contrast this with the method illustrated below, where hypertext links are specified by a completely different process from that used to specify the appearance.

Fixed formatting

While the outward appearance to the user might be the same, in this example the hypertext link point was specified using a graphical position on the page. This is a fragile method, since editing and the resultant reformatting of the text will cause the links to become separated from their words!

In addition, it is not possible to automate the process of turning given words into hypertext links, since it is not really the word which is linked but the position on the page where the word lies.

Separation of roles

Writers will usually be willing to concern themselves with the function of the elements of their work, but may lack the confidence or ability to deal with the visual appearance. Functional description allows the writer to tag the text in a semantic way, leaving aside the issue of how it will look. This can then be taken care of as a separate process independent of the content.

Even where author and designer are the same person, it is often useful to be able to separate the origination and the presentation of the content.

In practice

In authoring an HTML page, it often happens that once the page appears in the Web browser window writers does not like what they see, and may then change the functional description to cause a happier result to appear. For example, the writer decides that all the Heading Level 2 subheads in a document simply look too big and changes them all to Heading Level 3 in order to get a more acceptable appearance. This is not strictly within the spirit of functional description, but in practice does no harm.

Since the tags which dictate the appearance are themselves simply text, it is easy to search for every occurrence of a particular tag in the text editor and replace them with a new one. This is highly preferable to the simplest fixed format approach which would require every item to be changed individually by hand.

Automated layout

Though designers will always regard themselves as essential, there is scope in simple functional documents for ignoring their contribution altogether, relying on the design principles incorporated in Web browsers themselves. Particularly where large quantities of text are involved, any opportunity to automate the laying out of pages should be welcomed.

In practice

In creating documents for the Web, there is scope for partial automation by a variety of methods. Text is formatted by choosing appropriate functional descriptions for each element, and the browser does the rest. Where documents follow a regular pattern, templates can be prepared which contain all the necessary tags for the expected parts. If very large quantities of repetitive data are to be formatted, then it may be worth exporting it from a database with the appropriate tag automatically appended (for example by a script in a scriptable database). Taking this idea one step further, the data can be retrieved from a database on the fly and inserted into the page whenever the user chooses a particular option.

There are several ways of usefully automating the layout of Web pages.

Automation of layout for Web Pages

Relying on the browser

Use the layout principles built into Web browsers

Preparing templates

Use templates (frequently used tags are placed in a suitable order)

Exporting from databases (asa one-off authoring process)

Export data from a database and use a custom-made program to insert the appropriate markup tags
Export data from a database, using its scripting language to insert the appropriate markup tags

Exporting from databases (continuously on Web server)

Use a CGI to get data on demand from the database and put it into the Web page

This last will be the only solution where there are very large quantities of data in similar formats, especially if that data is regularly changing. For example, if course materials are delivered on-line, there will be a need for information about who the student is, which module they are currently taking, where in the module they have reached, their personal preferences, their previous records and many other related items to be taken into account in dictating what each user sees on the page. A very substantial amount of setting-up would be required for such a system.

Contents

Graphics Multimedia Virtual Environments Visualisation Contents