eScience Lectures Notes : Introduction to NewMedia

Slide 1 : 1/26 : From New Media to The Web (index.en.html)


Tools for New Media and the Web

--- or ---

Tools, Design and Management of

Maturing Hypermedia

From New Media to The Web

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Contents



Slide 2 : ToC : Introduction to NewMedia (tableOfContent.en.html)

Table of Contents (26 slides) for the presentation :

Introduction to NewMedia

Slide 3 : 3/26 : New Media and Web (intro.en.html)

In this session : From New Media to The Web


Tools for New Media and the Web

--- or ---

Tools, Design and Management of

Maturing Hypermedia


Slide 4 : 4/26 : NewMedia History : is it that new (1) ? (history1.en.html)

NewMedia History : is it that new (1) ?

Cro Magnon Caves : <15,000 B.C.>

Representation of animal figures

A magic theater of the senses

In the beginning, even before Wagner, life was created and it was multi-sensory

By 15,000 B.C. Cro Magnon had evolved with a brain capable of modern intelligence. With this new intelligence the first art was created deep in subterranean caves in the Dordogne region of Southern France, in caves such as Lascaux, where Cro Magnon marked the birth of the aesthetic with the representation of animal figures and coded shamanist scrawls.

He painted fantastic murals of reindeer, bison, and bulls in these resonant caverns that flickered with stone candles and smelled of the acrid aroma of animal fat where rituals were performed.
A magic theater of the senses

Source :

Slide 5 : 5/26 : NewMedia History : is it that new (2) ? (history2.en.html)

NewMedia History : is it that new (2) ?

Richard Wagner | Total Artwork <1849>

"The future of music, music theater, and all the arts, lay in an embrace of Gesamtkunstwerk or total artwork, a fusion of the arts that had not been attempted on this scale since the classic Greeks."

German opera composer Richard Wagner believed that the future of music, music theater, and all the arts, lay in an embrace of Gesamtkunstwerk or total artwork, a fusion of the arts that had not been attempted on this scale since the classic Greeks. In 1849, Wagner wrote the essay, The Art-work of the Future, defining the synthesis of the arts in which opera served as a vehicle for the unification of all the arts into a single medium of artistic expression.

The Festpielhaus (Festival House) Theater

  • darkening the house

  • surround-sound reverberance

  • amphitheatrical seating to focus audience attention on stage

The Festpielhaus (Festival House) Theater opened in 1876 in Bayreuth, Germany, where Wagner applied his theatrical innovations including: darkening the house, surround-sound reverberance, and the revitalization of the Greek amphitheatrical seating to focus audience attention on stage. This approach to opera foreshadowed the experience of virtual reality, immersing the audience in the imaginary world of the stage.

Source :

Slide 6 : 6/26 : NewMedia History : is it that new (3) ? (history3.en.html)

NewMedia History : is it that new (3) ?

Vannevar Bush | Memex <1945>

Chief scientific advisor to Franklin Roosevelt and director of the government's Office of Scientific Research and Development

Memex, the prototypical hypermedia machine

Essay: "As We May Think"

How information would be gathered, stored, and accessed in an increasingly information-saturated world

"He [mankind] has built a civilization so complex that he needs to mechanize his records more fully if he is to push his experiment to its logical conclusion and not merely become bogged down part way there by overtaxing his limited memory."

Vannevar Bush rose to prominence during World War II as chief scientific advisor to Franklin Roosevelt and director of the government's Office of Scientific Research and Development, where he supervised the research that led to the creation of the atomic bomb and other military technologies. His contribution to the evolution of the computer ranges far and wide: from the invention in 1930 of the Differential Analyzer, one of the first automatic electronic computers, to his concept of the Memex, the prototypical hypermedia machine.

In 1945 the Atlantic Monthly invited Bush to contribute an article on this theme, and the result was the landmark essay, As We May Think. He used this high profile forum to propose a solution to what he considered the paramount challenge of the day: how information would be gathered, stored, and accessed in an increasingly information-saturated world. This article had a profound influence on the scientists and theorists responsible for the evolution of the personal computer and the Internet.

Source :

Slide 7 : 7/26 : NewMedia History : is it that new (4) ? (history4.en.html)

NewMedia History : is it that new (4) ?

oNLine System (NLS) demonstration at the 1968 Fall Joint Computer Conference

Engelbart and team working with networked NLS computers

Douglas Engelbart | Augmentation <1968>

"Our goal of augmenting the human intellect will exhibit more of what can be called intelligence than an unaided human could by organizing his intellectual capabilities into higher levels of synergistic structuring."

Invented mouse, windows, e-mail, and the word processor.

Led one of the most important projects funded by ARPA in the 1960s: a networked environment designed to support collaborative interaction between people using computers => NLS

Douglas Engelbart is one of the most influential thinkers in the history of personal computing. He is best known as the groundbreaking engineer who invented such mainstays of the personal computer as the mouse, windows, e-mail, and the word processor. Engelbart led one of the most important projects funded by ARPA (Advanced Research Projects Agency) in the 1960s: a networked environment designed to support collaborative interaction between people using computers. It was dubbed the NLS (oNLine System). This historic prototype, developed at the Stanford Research Institute, and unveiled in 1968 at the Fall Joint Computer Conference in San Francisco, influenced the development of the first personal computer and the graphical user interface at Xerox PARC in the early 1970s.

Engelbart reasoned that networked computing would not only make individuals more intellectually effective; it would enable a collaborative method of sharing knowledge. The linking of people and computers using this approach to interactivity would result in the use of computers to "solve the world's problems" by augmenting the capacities of the mind's intellectual faculties.

Douglas Engelbart expanded on Bush's premise. His quest to "augment human intelligence," as he aptly phrased it, was based on the insight that the open flow of ideas and information between collaborators was as important to creativity as private free association. The personal computer, as he envisioned it, would not only allow for the arrangement of data in idiosyncratic, non-linear formats. By connecting workstations to a data-sharing network and turning them into communications devices, Engelbart's oNLine System allowed for a qualitative leap in the collaboration between individuals -- almost as if colleagues could peer into one another's minds as part of the creative process. In the early 1960s, experiments with networked personal computing promised the non-linear organization of information on a grand scale.

Source :

Slide 8 : 8/26 : NewMedia History : Ted Nelson (5) (history5.en.html)

NewMedia History : is it that new (5) ?

Hypertext diagram from Ted Nelson's Literary Machines

Ted Nelson | Hypertext <1963>

Samuel Taylor Coleridge's poem Xanadu, "a magic place of literary memory,"

1963 : the words "hyperlink", "hypertext" and "hypermedia"

Xanadu : a system of non-sequential writing

"the structures of ideas are not sequential."

NB. Is it such a good idea ?

As a graduate student in philosophy in the late1950s and early 1960s, Ted Nelson had two critical intellectual encounters that led him to become one of the most influential figures in computing. One was with Vannevar Bush's article As We May Think, which convinced him that emerging information technologies could extend the power of human memory. The second was with Samuel Taylor Coleridge's poem Xanadu, "a magic place of literary memory," in Nelson's words, that provided him with the image of a vast storehouse of memories, and which served as the inspiration for his life's work. From these influences, Nelson began his quest to build creative tools that would transform the way we read and write, and in 1963 he coined the words "hypertext" and "hypermedia" to describe the new paradigms that these tools would make possible.

Nelson was particularly concerned with the complex nature of the creative impulse, and he saw the computer as the tool that would make explicit the interdependence of ideas, drawing out connections between literature, art, music and science, since, as he put it, everything is "deeply intertwingled."

Nelson's critical breakthrough was to call for a system of non-sequential writing that would allow the reader to aggregate meaning in snippets, in the order of his or her choosing, rather than according to a pre-established structure fixed by the author.

Working outside of the academic and commercial establishments, following his own strongly held convictions, Nelson devised an elaborate system for the sharing of information across computer networks. Called Xanadu, this system would maximize a computer's creative potential. Central to Nelson's approach was the "hyperlink," a term he coined in 1963, inspired by Bush's notion of the Memex's associative trails. Hyperlinks, he proposed, could connect discrete texts in non-linear sequences. Using hyperlinks, Nelson realized, writers could create "hypertexts," which he described as "non-sequential writing" that let the reader make decisions about how the text could be read in other than linear fashion. As he observed in his landmark book from 1974, Computer Lib/Dream Machines, "the structures of ideas are not sequential." With hypertext, and its multimedia counterpart, "hypermedia," writers and artists could create works that encouraged the user to leap from one idea to the next in a series of provocative juxtapositions that presented alternatives to conventional hierarchies.

Source :

Slide 9 : 9/26 : NewMedia History : Bill Atkinson (6) (history6.en.html)

NewMedia History : is it that new (6) ?

A screen shot of a HyperCard stack in development

Bill Atkinson : HyperCard <1987>

The first accessible hypermedia system

Freely available on all Macs

A huge success (learning material, game, inventory systems etc)

Lighting system for the Petronas Towers in Kuala Lumpur, Malaysia !

Usual Apple mistake : proprietary

Hypercard = B&W Web, with Javascript, XML, XLST but no URL

HyperCard was created by Bill Atkinson and initially released in 1987, with the understanding that Atkinson would give HyperCard to Apple only if they promised to release it for free on all Macs (an agreement that, according to Atkinson, ran out when the largely-rewritten HyperCard 2.0 hit the shelves).

HyperCard is one of the first products that made use of and popularized the hypertext concept to a large popular base of users. Hypercard saw a loss in popularity with the growth of the World Wide Web, since the web could handle and deliver data in much the same way as HyperCard without being limited to files on your hard disk. Interestingly, HyperCard had a significant impact on the web as it inspired the creation of both HTTP itself and JavaScript.

Because it can be used to create custom applications in minutes, HyperCard is still used by many academic researchers and small businesses. Some companies run HyperCard applications -- that were written years ago on a Mac Plus -- on the latest dual-processor G4 PowerMacs.
Renault, the French auto giant, reportedly uses HyperCard for its inventory system. The software runs part of the lighting system for the tallest buildings in the world, the Petronas Towers in Kuala Lumpur, Malaysia.
HyperCard is used widely in schools to teach programming concepts and for creating interactive learning materials or class reports.

Source : Wired :,2125,54365,00.html

HyperCard is based on the concept of a "stack" of virtual "cards". Each card includes fields that store data, and the pattern for each card (its layout, as opposed to the data in the layout) is known as the "background". Backgrounds could include pictures (its original purpose, "background picture"), picture fields, buttons, text, text fields (editors) and other common GUI elements, which would then be copied onto new cards.
Users can construct databases by opening the Background editor and drawing items onto it to hold the various pieces of data. For instance, an address book could be easily built up by adding a few text fields to hold the name and address. Once completed, the user simply adds a new card (by typing command-n) and types into the fields. The background could be modified at any time, allowing changes to be made with ease – something traditional systems are very bad at. Basic operations such as search, add and delete were built into the HyperCard environment, allowing simple databases to be set up and used by anyone able to use the Apple Macintosh computer.
Scripting in the HyperTalk language allowed the system to be easily modified and extended. Unlike most programming languages, even those that claim to be easy to use, HyperTalk really was easy to use. Allowable syntax included all sorts of versions of the same statement, all in readable English, to avoid forcing the user to write their programs in a particular format.

Source :

Slide 10 : 10/26 : NewMedia History : Tim Berners (7) (history7.en.html)

NewMedia History : is it that new (7) ?

CERN laboratory, Geneva, Switzerland

Tim Berners-Lee | World Wide Web <1989>

"An important part is the integration of a hypertext system with existing data, so as to provide a universal system, and to achieve
critical usefulness"

1980 : Enquire : storing, retrieval, and hyperlinking of documents through CERN's computer network

World Wide Web : a hypertext system that would work in conjunction with the Internet.

1991 distribution of a first Web browser and server software

Use of open format for the data and its addressing

In the early 1980s, the British engineer Tim Berners-Lee began to develop a networked system for the electronic publishing of scientific reports at CERN, the particle physics laboratory in Geneva, Switzerland. This system, named Enquire, was to have enabled the storing, retrieval, and hyperlinking of documents through CERN's computer network. It was never completed, but – influenced by Ted Nelson's experiments with hypertext, digital publishing, and open networking – Berners-Lee expanded on its underlying concepts to explore how a hypertext system might work in conjunction with the Internet.

Working under his own initiative, in the fall of 1990 Berners-Lee completed the first Web browser and server software. In 1991, he began to distribute his software, now named the World Wide Web, to scientists over the Internet. Berners-Lee's Web is a software system that unites research, documents, programs, laboratories and scientists in a fluid, open, hypermedia environment. It is inherently dynamic, capable of expanding at an explosive rate; this was a significant departure from the hierarchical data systems that had previously been the standard. Berners-Lee was well aware of his system's potential to link documents across the globe, and to transform our information culture. While his original focus was on hypertext, from the start he saw the Web's eventual embrace of multimedia, which could well prove to be its enduring legacy.

In 1989 Tim Berners-Lee, a young British engineer working at CERN, the particle physics laboratory in Geneva, Switzerland, circulated a proposal for an in-house on-line document sharing system which he described modestly as "a 'web' of notes with links." After getting a grudging go-ahead from his superiors, Berners-Lee dubbed this system the World Wide Web. The Web, as he designed it, combined the communications language of the Internet with Nelson's hypertext and hypermedia, enabling links between files to extend across a global network. It became possible to link every document, sound file or graphic on the Web in an infinite variety of non-linear paths through the network. And instead of being created by a single author, links could be written by anyone participating in the system. Not only did the open nature of the Web lend itself to a wide array of interactive, multimedia experiences, but by hewing to a non-hierarchical structure and open protocols, Berners-Lee's invention became enormously popular, and led to an explosion in the creation of multimedia. By 1993 the Web had truly become an international phenomenon.

Source :

Slide 11 : 11/26 : NewMedia History : is it that new ? (historySummary.en.html)

NewMedia History : is it that new ?

To learn more about the past

A far more general and openminded Timeline : on the web site and

Great Moments In Multimedia History

The History and development of Multimedia: a story of invenion, ingenuity and Vision

So, what is NewMedia again ?

Slide 12 : 12/26 : Hypertext (hypertexte.en.html)


  • Set of text document

  • Links (or Hyperlinks)

  • Similar to Book Index

  • Ted Nelson | Hypertext <1963>

  • Non sequential organisation ?

  • The ability to click on a word in a piece of text and have the focus immediately shifted to another page dealing with that word (Vanevaar Bush 40s)


A hypertext document is one that includes links (connections) to other documents. In concept this is similar to including footnotes in a printed document. However, in a hypertext document you can switch to the connected item by clicking on a "hot spot," usually indicated by a different color from the surrounding text. In the World Wide Web links can lead to other documents on the same data server, or might take you to other servers.

A collection of documents (or nodes) containing cross-references or links which, with the aid of an interactive browser program, let the reader move easily from one document to another.

Slide 13 : 13/26 : HyperMedia (hypermedia.en.html)


  • Hypertext + other media

  • Hypertext + Multimedia
    (Apple Quicktime 1991 / Hypercard 1987)

  • Image, Video, Sound, 3D

  • Included or not within the text

  • CR-Rom

Hypermedia, a term derived from hypertext, extends the notion of the hypertext link to include links among any set of multimedia objects, including sound, motion video, and virtual reality.

An extension of hypertext that includes graphics, sound, video and other kinds of data.

Growing out of hypertext, this is much the same thing, but in a multimedia environment, whereby the links may also be in the form of pictures or even of animation or video. The Web is, increasingly, becoming a hypermedia environment rather than merely hypertext.

BTW... What is a media ? ... lots of things ! Try define: media on google :

Media, plural of "medium"; a means (a container or a vehicle) of carrying or communicating information.
Messages that are distributed through the technologies, principally text in books, study guides and computer networks; sound in audio-tapes and broadcast: pictures in video-tapes and broadcast; text, sound and/or pictures in a teleconference.
Films, tapes and other audio-visual materials that require the use of special listening or viewing equipment.
materials such as VHS, DVDs, films, audiotapes and CDs, that require special equipment to be used.
The plural form of MEDIUM.
Material that information is written to and stored on. Digital photography storage media includes CompactFlash cards and CDs.
Forms of mass communication. Newspapers, magazines, direct mail, billboards, bus signs, radio, television and internet are some important media that carry advertising.
Methods of communication. In computers, it refers to the material or device used to store or transmit data.
Specific environments -- air, water, soil -- which are the subject of regulatory concern and activities.
Generic term for elements such as movies, sounds, and pictures.
The forms of publication. Traditional advertising media include newspapers, magazines, billboards, radio and television. Digital interactive advertising media started with the Internet, accessed at an indoor computer, but is quickly spreading to television, cellular devices and outdoor locations. Up
Recordable media - blank CD-R or CD-RW discs. Mixed-Mode Disc A compact disc including both computer data and CD-DA tracks. The data is all contained in Track 1, and the audio in one or more following tracks. Contrast with CD Extra. MMC A standard command set used by some CD recorders. Many newer recorders follow this standard, though many of them also interpret it differently (so there are still differences in how software must address these recorders, in spite of the standard).
The materials to be printed, such as watercolor papers, canvas, copper, wood veneer, cotton, plastic.
The material in the trickling filter on which slime accumulates and organisms grow. As settled wastewater trickles over the media, organisms in the slime remove certain types of wastes thereby partially treating the wastewater. Also the material in a rotating biological contactor (RBC) or in a gravity or pressure filter.
The documentation of monetary transactions (ie, sales drafts, credit slips, computer printouts, etc.).
The material that performs the separation of solids from liquids.
plural of medium
Generalised term for all types of printing material onto which images are printed including roll, tag stock, continuous, die-cut, and fanfold.
containing nutritive growth substances enabling cells to survive in an artificial environment.
Materials or items that are in a variety of formats other than in print, ie. film, video, audio cassette, slides, etc. Also called Audio Visuals. Microfiche
Any format for information storage that requires special listening or viewing equipment: ie, microfilm, microfiche, videotape, CD-ROMs.
the substance in which an organism, tissue, or organ exists.
The means by which information is distributed such as print, broadcast, CD-ROM, World Wide Web, and so forth.
Content files such as movie cIips, still images, music tracks, or sounds.
In the manual, media refers to members of both the print (newspapers and magazines) and the electronic (radio and television) media.

Slide 14 : 14/26 : NewMedia (newMedia.en.html)


Hypermedia + ?


A Multimedia / NewMedia system is a system that is interactive and uses more than one medium in an integrated way. The media are rich media and are stored media


Slide 15 : 15/26 : Interactive (interactive.en.html)


Change with time

Because of the action of the user, or irregardless

Really always as a result of an user action


The user can interact with the system and through that interaction influence the behavior of the system

Slide 16 : 16/26 : Integration (integration.en.html)


Mosaic ! or any of its descendants

(any web browser, or Hypercard, or the stuff produce by shockwave)

Everything is digital

Sensorama (is not NewMedia)

N.B.: "A multimedia PC"

Morton Heilig | Sensorama <1962>

In the 1950's it occurred to cinematographer Morton Heilig that all the sensory splendor of life could be simulated with "reality machines." He proposed that an artist's expressive powers would be enhanced by a scientific understanding of the senses and perception. His premise was simple but striking for its time: if an artist controlled the multi-sensory stimulation of the audience, he could provide them with the illusion and sensation of first-person experience, of actually "being there."
Inspired by short-lived curiosities such as Cinerama and 3D movies, it occurred to Heilig that a logical extension of cinema would be to immerse the audience in a fabricated world that engaged all the senses. He believed that by expanding cinema to involve not only sight and sound, but also taste, touch, and smell, the traditional fourth wall of film and theater would dissolve, transporting the audience into a habitable, virtual world. He called this cinema of the future "experience theater," constructing a quirky, nickelodeon-style arcade machine in 1962 he aptly dubbed Sensorama, that catapulted viewers into multi-sensory excursions through the streets of Brooklyn, as well as other adventures in surrogate travel.

Slide 17 : 17/26 : Rich Media (richMedia.en.html)

Rich Media



This is a black & white text

This is a colour text with different fonts

<IMG src="image/passing1_logo.gif" width="240" height="200">

 1995 / 4.7 MB / 28 ' 240x180

<IMG src="image/passing1_logo.gif" width="640" height="366">

2004 / 24 MB / 1min 640x346



Slide 18 : 18/26 : Stored Media (storedMedia.en.html)

Stored Media

Available on demand

A medium holds a fixed representation of something

In New Media, this fixed representation can be stored locally or on the other side of the planet and then played back and reviewed when required

Slide 19 : 19/26 : Interaction Design (interactionDesign.en.html)

Interaction Design

The design of those aspects of a system that the user perceives and communicates with.

Hypothesis : in new media the system is interactive
How to make the interaction efficient ?


The usability of an interface is the measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment with that interface

Sometimes really easy to measure : "How much time do you need to program your VCR ?"

video cassette recorder



Slide 20 : 20/26 : Some examples (usabilityExamples.en.html)

Some examples

French vs Australian Switches

How do you turn off a windows machine ?

You click on the "Start" button !

How did you eject a disk under MacOS9 ?

You drag and drop it in the trash


Slide 21 : 21/26 : Ergonomics (ergonomics.en.html)


How do we take decisions when designing ?

Physical Ergonomics, matching the body

Design of the physical aspects of a system to fit with the physical parameters of the human body

Example height of the working space to allow both men and women to wash the dishes

Mental ergonomics, matching the mind

Design of the interactive aspects of a system to fit with the mental parameters of the human mind

What people expect, how they organise their work

Spiritual Ergonomics, matching the heart

Design of all aspects of a system to fit with the spiritual parameters of the human mind

How to deal with the mood, the colour of the background etc

The Airplane emergency procedure

The size, the way to find it, the way to not think about it

Or why children's web sites don't use black backgrounds

Culture dependant

Slide 22 : 22/26 : Some element of Design for NewMedia (design4NewMedia.en.html)

Some element of Design for NewMedia

How the Information is organized / presented (user side and internal organisation)

What buttons and functions are available to the user and when they are available to be used

What the underlying behaviour of the system is

What information and controls are available to other users, such as the admin. staff, super-users, supervisors, executive overview, editorial correspondant etc

The content and layout of standard printouts available from the system

The printed material accompanying the system (e.g. : CD cover)



Slide 23 : 23/26 : Why bother (1) (whyBother.en.html)

Why bother

Because common sense is not always shared - and because it saves money

in Production

It is good to know your client to satisfy their need

(NB.! 2 clients ! )

Detailed Requirement Specification phase : you know what you have to do

Adaptation to future development

in Marketing

Quicker Adoption by the user (e.g. : Shareware)

Source of differentiation from the competitors

Slide 24 : 24/26 : Why bother (2) (whyBother2.en.html)

Why bother (2)

in Use

Less support (Courses, Help Desks, etc)

N.B. : some companies make money from support / Real cost of a system

More efficiency

Fewer errors or undo-able interaction (FIFO of Trashes)

Improved Safety (submitting mail, booking plane)

Make them return

Sticky web sites : users stay longer and return more frequently (!)


Slide 25 : 25/26 : NewMedia Design - its past (interacDesignPast.en.html)

NewMedia Design - From its past to today

50's Ergonomics : First studies : the shape of object

Industrial Design : how to use it

more and more tiny screen

Graphic design

from paper to digital : which font is best on a screen ?

Computer Human Interaction

Balloon Help

Multimedia : CDRom, educational titles, user manual

Different constraints than the web !

Pure Software Interfaces

Advanced Hardware Interfaces

Phone, Palm, iPod etc

and of course the Web !


Slide 26 : ToC : Introduction to NewMedia (tableOfContent.en.html)

Table of Contents (26 slides) for the presentation :

Introduction to NewMedia