ScrollScapes & conTopics
deep documentation of references and ways to share them
in the tradition of the florelegia and commonplace books of the pre-digital era.
A project as part of the Orbis Pictus ~ Theatrum Mundi conference initiated by the Theatre Studies Institute of the University of Amsterdam
Kati Röttger and Erik Lint for the UvA & Tjebbe van Tijen/Imaginary Museum Projects

Since the Middle Ages onward systems have been developed to gather knowledge in the form of classified quotations:
topoi, loci, loci comunis, handwritten books with collections of commonplaces: common place books.
We are proposing a revival of the principles of such personal and sharing knowledge systems adding to them the posibilities of interactive visualization offered by our electronic media, still finding our inspiration mainly in a reappraisal of past media.

The spoken word maried the written ~ over time written text took over completely ~ today media reunite speech and text
Information systems seem to have changed a lot but somehow hand gestures blackboard and note taking by hand remains
People often prefer hand note making as in this old 'commonplace book' ~ in comparison computers offer poor mnemonics
Obsolete paper information retrieval systems can be seen in a new light: recognizing their tactile and spatial qualities
Taditional scribal documents with their visual cross reference systems may show us new ways for our digital interfaces
After the scribal came the printing machines ~ in European culture this meant often a seperation of text and image ~ one example where instead a new method of integrating text and image was found was the 'tableau' system of Comenius
Orbis sensualium pictus ~ the world explained in pictures ~ uses a system based on the emblemeta culture of the 16th and 17th century with its three main elements: title/nomenclatura; pictura/picture; descriptio/description and their complex relations (these elements we find back in our time in methods for advertisment and the like)
Small numbers in the tableau-picture pointed to small numbers in the text ~ this was hypertext avant-la-lettre ~ the pages of the book were not primarely meant for linear reading but invited the eye to wander around from picture to text and vice versa ~ the tableau pictures seemed to depict 'the real world' but this collection of landscapes, still lifes and diagrams presented information at another more abstract level, still using 'verisimilitude' to engage the viewer ...
Here we can jump from interactive visualization on a double book-page to similar ideas centuries later in the computer age
Pioneer of 'hyper text' Ted Nelson conceptualized almost four decades ago this sytem of interactive transposing windows
Documents are intrinsically parallel ~ a document is an arbitrary collection of versions having the same name
Keep these ideas and images before your inner eye when looking at the following proposal and examples ...
a layered presentation, documentation and navigation system by Tjebbe van Tijen/Imaginary Museum Projects (2007-2009)
1) Horizontal scrolls for overview - Vertical scrolls for details: continuity of view 1 window with 3 basic layers
1 ScrollScapes consists of an 'inside' (1-5) and an 'outside' (6) world: five layers inside one window (1-5) and all external links open in a new window (6). Four of the five layera are scrolls with two distinctive functions: - presentation (1, 4); - documentation (3, 5). On the presentation level the user can slide through a horizontal or a vertical scroll and when the mouse over the user passes over a distinctive part a semi-transparent layer (2) will come up with a short textual and/or visual explanation. This 'overlay' can also have one or more 'buttons' that can be clicked to go one 'information level' deeper to the documentation layer, either horizontal or vertical (3,5). All scrolling layers can have any length. On opening ScrollScapes the window is automatically resized to 1000 x 725 pixels. An introductory screen may be shwon in which it is explained that the window will be set to the size of 1000 x 725 pixels and extra bars, like book marks can be switches off to give the maxi,um amount of space to the visual materials, as many people use web browsers on a screen of 1024 x 768 pixels with multiple navigation bars that take away many pixels on the smallest vertical side of the brwoser window. The exernal link windows could keep the default settings of each user...

2) Fixed window size with sliders: knowing where you came from and where you are heading to
2 Navigation through any of the horizontal or vertical layers is done by sliders that drag the layers through the (fixed size) window on the computer screen. The 'sliders' moving on their 'rails' are indicating the relative position within a scroll. Specific overlays come up when the mouse os moved over (roll-over). At any time at the most two layer elements are visible: - horizontal presentation (purple) + horizontal documentation (blue); or vertical presentation (green) + vertical documentation (blue); - horizontal or vertical presentation (purple or green) + mouse-over overlay (yellow). The sliders are not the standard sliders, but generated by the special script that controls the appearance of ScrollScapes.

3) Principle of sliding through a presentation scroll with sliders indicating relative position within a scroll
4) Information objects lay on the scrolls and overlays pop-up with 'mouse-over'
4 Mouse-over on a presentation scroll (4) that triggers a first-level information overlay (2); this overlay may have one or more selection buttons that trigger documentary scrolls (either horizontal or vertical).

5) Mouse-over clicks can trigger jumps from a position in a horizontal scroll to a position in a vertical scroll
5 Example of trajectory from vertical presentation scroll to horizontal scroll: 1) overlay (yellow) pops up as mouse hoovers over verstical presentation scroll; 2) three choices are presented on overlay, the one that links to a horizonatl scroll is selected; 3) the user can drag the horizontal scroll by using the slider at the bottom ...

6) Positions of information objects on the layered scrolls are fixed - users can step from one layer to another
6 Another situation whereby the user selects a button on the overlay (yellow) to go to a specific point in documentary layer information related to a specific position in the vertical presentation scroll. The user can (if wanted) continue other documentary information elements in the vertcal documentation scroll, or click on the pane of the vertical presentation scroll (green) to go back to the same position last visited (the vertcal documentation scroll goes out of view) ...

7) Overview of information objects like a 'tableau de troupe' of a balet on stage - mouse-over gives focus
7 Example of a vertical presentation scroll with information objects (can bebooks, paintings, or any other object) when the mouse goes over a specific object an half transparent overlay pops up (yellow) which gives a short explanation in text and/or image and also some options for more detailed information. When one of the three further information (yellow) buttons is clicked either a horizontal or a vertical layer appears (purple or blue) ...

7.1) example of Tableau de Troupe system of information objects (books) ordered by publishing year (De Verbeelding)
8) From 'tableau de troupe' objects directly detailed views of that object, or via an 'ouverture' page
8 ... when - for instance - a choice is made to browse through a photo-book a horizontal overlay appears, starting with the book cover, followed by some textual information and in some cases external links to libraries, archives, bookshops and contextual information on a book or its author ...

8.1) example Ouverture page with several opened books ordered by author name
8.2) example of full size horizontal scroll showing a selection of visual pages of a chosen book
9) Documentation layer (vertical scroll) over layer with information objects - with new windows for external links
9 Another example where a documentation layer in the form of a vertical screen appears over a vertical presentation scroll. This documentation layer is in a format with the following functions: 1) book cover; 2) bibliographical information; 3) links to libraries that have a copy of a book or other information object; 4) quotations that are summarized in short headings (monades that represent the core element of a longer quotation); 4) a link to a horizontal documentary layer with visual quotations from a publication. All the monades (quotation headers) are in a list at the top of this bibliographic format. The user can click a specific line and jump down to a specific quotation further down, and vice versa jump up again to the list of monades.

10) web site Orbis Pictus ~ Theatrum Mundi conference with first example of ConTopics (deep documentation references)

10.1) Each source has a link to the mega library catalogue: the best bibnliographic source in the world
Cite this item gives standarize formats for making references, this can be scripted into our Contopics system

10.2) We propose extensive quotations and ask also to give a header to each quotation expressing the core idea (from the perspective of the person who has selected a quotation); these headers we call 'monade' (after Leibniz) the part or partys of the quotation from which such a 'monade' has been taken will be marked in red. A clickable icon will put the full quotation and its sources +_ the conetxt from which it has been taken into the clipboard of the end-user's computer.
10.3) A short line on the content can be added, if longer this text will open upon click as a harmonica.
10.4) The quotations show up as a single line (the monade), when clicked they open up like a harmonica; there can be several quotations with one source.
11) For the OPTM conference an experimental management system has been made with several people having online access to the sets of databases; the databse system was Filemaker pro and ist Instant Web Serving option; security was done by only allowing users from specific ip-addresses.
11.1) some related databses that wer part of the system, including the Contopics parts
11.2) Bibliographic and quotation database element
11.3) Contextual links can be added to each reference, this is the screen to add such contextual web-links
12) A content Management System (CMS) has been made for the OPTM conference and the Contopics references as appeared with the call for papers; the integration of the Filemaker databases and CMS system could only partly be realized.
12.1) screenshot from the reference module of the CMS system
12.2) screenshot from the importing of the main body of a reference text; the precoding was done with a routine processed in the off-line Filemaker database
13) A visualization of ideas for visualization of reserach papers with high tech and low tech techniques during a academic conference, allowing for inetrvention with barcoded 'flashcards' and mobile devices ...
13.1) details of the idea of 'flashcards' belonging to papers/abstracts delivered at a conference; such cards - once produced - would be made available in card stands (like in a tourist kiosque) ... interventiosn during dsicussions could be done by announcing a speaker or topic by scanning a card (like going to a discusion microphone)
13.2) exmaples of possible papers/abstrfacts and visual representations used on a standard flashcard (can also be send around like a post card)
13.3) barcodes could be use for interaction but also dotmatrix codes (these codes can be recognized by certain mobile telephones) these codes are very popular in Japan and are used mainly for commercial interest, we propose a cultural usage
13.4) laptops in a local or open network during a conference can access templates for the participants to construct their visualization by using image content from the internet
13.5) examples of templates for visualizing, these can be java or javascript based online routines
13.6) public sharing of image forums like Flickr can be a good source for making visualization; here is shown a web site Flickrleech that had a very good concept of 'interactive vsiualization' using the API of Flickr; sadly this service has disappeared but similar ones will come up...
14) the principle of horizontal scrolls can be combined with making one or more documentation overlays; here a proposed system skecth (a working version of such a system exists as a museum installation by Tjebbe van Tijen: "ideas fo Visual Language", too larhe to be projected with a standard 1024 x 768 beamer.
14.1) Example of a horizontal presentation layer with a browsable vertical documentation layer (Bibliomania) ....

15) Designs fort a virtual bookshelve by Tjebbe van Tijen/Imaginary Museum projects book cover pictures a deformed acoording to their relative size and the number of pages, giving the impression of a book backs/spines on a shelve
15.1) mouse-over will trigger a overlay of the full book cover + bibliographical notes; the cover can be clicked to go to further details (quotations or other) on/from the book
15.2) Horizontal scroll mentioned before "ideas of Visual Language" whcih can be clicked everywhere and produces documented overlays
15.3) Skecth for the principle of having related books on a virtual bookshelve appearing over a visualized argument