Separating presentation from content, or the markup languages GML and SGML

The beginnings of the effort to abstract textual content from a particular visual representation can be found in the traditional world of book publishing. Jeffrey Veen[1] points out that the communication between editors and graphic designers, or typesetters, about how the final printed matter would look was based on agreed codes. These codes contained typographic information on how a particular part of the text was to be set. While these codes mostly contained only a specific instruction on typeface and size, Veen writes that most publishing houses had standardised, frequently used page layouts and looks, and so it was enough for editors to add, e.g., “HEADING3” to the text. Every typesetter in such a publishing house had a style sheet at their disposal, that is, a list of all the codes in use, generalised, together with the corresponding look, with the help of which they set the final form of the document.

The use of generic marking of parts of texts in electronic documents is attributed to William Tunnicliffe, then chairman of the Graphic Communications Association (GCA), who presented the idea at a conference in 1967.[2] But it was only Charles Goldfarb, a lawyer by training — who was invited to IBM in 1969 to try to design an information system and document management for lawyers —, who gave material form to the concept of separating content from form.

At IBM, Goldfarb leads a project that eventually results in the Generalized Markup Language (GML). For this language he introduces the term “markup language”, by which he describes “a unique combination of document tagging, data modelling and metalanguage”[3]. GML is first used for IBM’s internal purposes, but later spreads beyond IBM’s buildings and de facto becomes the standard for creating electronic documents. However, the various implementations of the original GML design require Goldfarb, in 1974, to contribute to the development of SGML, which in 1986 becomes the ISO 8879 standard.

SGML was based on GML; even though it brought many improvements — it made it possible, for example, to assign interactive functionality to certain tags — it was not, according to Veen, a format that could catch on for personal use, as it was too complicated.

Aspen Movie Map

Among the big projects, an inconspicuous yet revolutionary project from 1978, developed in the USA at the Massachusetts Institute of Technology (MIT) Architecture Machine Group, easily gets lost. The Aspen Movie Map is recognised as “the first publicly presented interactive virtual navigable space and also the first hypermedia[4] program”[5].

The Aspen Movie Map captures the town of Aspen, Colorado, by means of a camera mounted on the roof of a car, which photographed the town every three metres. The photographs obtained were arranged so as to create an uninterrupted, immersive virtual form of the town of Aspen. To walk, or rather drive, through the town, the user used a joystick, but the project displayed elements of a graphical user interface directly on the analogue monitor screen. In many ways, then, it is a precursor of Google Maps Street View.

Apple HyperCard

HyperCard was a popular implementation of hypertext by Apple in the 1980s. Instead of the usual window metaphor, however, it used its own metaphor of cards. Within the window of the HyperCard application, cards were displayed on top of one another, creating a kind of stack. HyperCard, created by the designer Bill Atkinson, can be considered the first application to present the concept of hypertext and hypermedia to the wider public.

The application was not only a viewer of the available “stacks of cards”, but contained tools for designing and programming one’s own projects. Here lies the reason why this Apple project was relatively popular with the public; for creating, HyperCard offered a complete drag&drop interface: it contained an “alphabet” of elements that the user arranged on the surface of the cards, and the object-oriented programming of interactive elements did not differ much from entering commands in natural language[6]. An analogy suggests itself with better-known integrated development platforms such as the Flash IDE, or one of the newest for the drag&drop design and coding of web pages — Macaw[7].

Or HyperCard can be compared to traditional graphics editors such as Photoshop. Each card contained several layers: a graphic background, a text layer and a layer of interactive elements. Müller-Prove mentions a problem that this layering brought: “The button layer is the top foreground layer. […] Whenever the text [in the second layer] is moved, the buttons that covered the text have to be moved too. The link and the button are not connected.”[8].

The HyperCard platform was so general in its focus that not only various work and leisure applications were created for it, but also games. A legend is Myst by Cyan, which made full use of HyperCard’s hypermedia capacities when it integrated video sequences in the QuickTime format into Myst.

A black-and-white HyperCard screen with a card containing text, drawings and buttons, with the classic Mac OS menu at the top. Source: CreativeApplications.net

An example of a “card” designed in the HyperCard application
Source: The HyperCard Legacy, CreativeApplications.net

A Brief History of the Web — a five-part series:

  1. VEEN, The art & science of Web design, p. 4 ↑
  2. GOLDFARB and RUBINSKY, The SGML handbook, p. 567 ↑
  3. Biography: Dr. Charles F. Goldfarb ↑
  4. Author’s emphasis ↑
  5. MANOVICH, The language of new media, p. 224 ↑
  6. The commands were in English ↑
  7. Macaw was discontinued in 2016; see https://web.archive.org/web/2016/http://macaw.co/ ↑
  8. MÜLLER-PROVE, Vision and Reality of Hypertext and Graphical User Interfaces, p. 28 ↑