Transcript Fluid Annotations in an Open World

Fluid Annotations
in an Open World
Polle T. Zellweger
Niels Olof Bouvin
Jock D. Mackinlay
Henning Jehøj
Aarhus University, Denmark
Fluid Documents
 Fluid Documents use animated typographical changes
to show annotations in context
 Previous applications:
hypertext, spreadsheets, eBooks, avant-garde fiction, reading
instruction
 Fluid Links use fluid annotations to smooth the
hypertext browsing experience
glosses = annotations on links
help readers choose among links
 Previous prototypes focused on viewing experience
supported author-created glosses (stored in document) and
automatically-generated glosses (fetched/derived from dest)
no reader-created glosses
Demo: Fluid Links
 Opening & closing glosses
mouse rollover triggers animation
gloss text grows gradually to readable size
can also freeze gloss in view
 3 graphical techniques
Interline: moves text apart,
compresses interline spacing to make room
Margin: gloss grows in nearest margin,
connected by animated line
Overlay: grays following text to allow gloss text
to be readable over top
 Improved hypertext navigation
multi-way glosses contain links
nested glosses contain glosses
interline
overlay
margin
multi-way and nested glosses
Value of Fluid Documents
 Allow readers to shift their attention smoothly and
quickly from the primary material to glosses and
back again
 Allow readers to view glosses with maximal context
generally no occlusion
 Animation helps readers easily process the page
alterations required to display the gloss
 Fluid links glosses blur the boundary between source
and destination
Open hypermedia
 Extend existing apps so users can create links and other
hypermedia structures between e.g. word-processing
docs and spreadsheets
Microcosm, HyperDisco, Devise HM, Chimera, HOSS
 Hypermedia structures stored outside documents
 Create hypermedia structures on existing Web pages
proxy modifies Web pages en route to the browser
DLS, DHMProxy
Web browser controlled to modify pages inside browser
Webvise, Arakne Environment
Arakne Environment
 Allows users to add & share hypermedia structures on
existing WWW pages
 Provides a general OHM architecture that supports
various structures
links, annotations, guided tours, ...
 Supports simple annotations
original: some anchor text
prefix: some anno anchor text
postfix: some anchor anno text
replace: some anno text
anno text
popup: some anchor
Goals of Open Fluid
 Combine capabilities of Fluid Documents and
Arakne Environment:
Support fluid glosses on existing WWW pages
Explore flexibility of current open hypermedia models
and architectures to handle dynamic gloss behavior
Allow readers to add their own fluid glosses
Some challenges for Open Fluid
1.
Animated gloss behavior in Web pages
2. Anchor and gloss salience in Web pages
3. Finding space for glosses in Web pages
4. Opening and closing glosses in Web pages
1. Animated gloss behavior
 Problem:
animated typographical changes require a closer
relationship between the OHM environment and
the browser than previously tried
 Solution:
new IE plug-in architecture for Arakne Environment
Original Arakne Environment
Arakne Environment
Hypermedia
HypermediaView
View
Browser
 Browser class communicates
with IE’s DOM to insert
links & simple annos
at page load
when reader adds new item
OHP
Construct
HM servers
Internet Explorer
COM
Construct
Hyperstores
Doc Obj Model
 IE handles link traversal &
popup annos itself, as usual
Fluid Arakne Environment
Original
Arakne Environment
Hypermedia
HypermediaView
View
Browser
OHP
Browser
Construct
HM servers
Browser
Internet Explorer
COM
Browser
Render
Engine
Animation Engine
Construct
Hyperstores
Gloss Model
modifications
events
Doc Obj Model
Fluid Arakne Environment
Arakne Environment
 When reader adds gloss
Hypermedia
HypermediaView
View
s/he specifies gloss content
s/he specifies behavior and
gloss, anchor appearance
OHP
 At page load or add item
Construct
HM servers
Internet Explorer
COM
Render Engine
Animation Engine
Construct
Hyperstores
Gloss Model
modifications
events
Doc Obj Model
RE inserts links, glosses
by changing DOM
RE places behavior in Gloss Model
 At open, close gloss event
AE animates gloss as specified
RE sets gloss state in Gloss Model
2. Anchor and gloss salience
 Problem:
Web pages have widely varying appearances
need to be able to show and distinguish among the
presence of original link anchors, OHM link
anchors, gloss anchors, gloss content
may want anchors, glosses to be distinct or blend in
 Solution:
provide wide control of anchor and gloss appearance
use Cascading Style Sheets to compose easily with
the original page
Specifying appearance & behavior
<PSPEC id="daimi.5.979147242"
type="PSPEC">
 All OHSWG objects have PSpecs
set of properties
 Open Fluid PSpecs are richer:
presentation of anchor text
presentation of gloss content } via CSS
placement of gloss
activating gloss
animating gloss opening/closing
 Also…
Open Fluid PSpecs cascade
Can now address glosses and contents
allows nested glosses & links in glosses
<PROPERTIES>
<PROPERTY name="name">
<VALUESET> <VALUE>warning</VALUE>
</VALUESET>
</PROPERTY>
<PROPERTY name="anchor style"
type="css">
<VALUESET>
<VALUE>color: #FFFFFF; background:
#CC0000;</VALUE>
</VALUESET>
</PROPERTY>
<PROPERTY name="gloss style" type="css">
<VALUESET>
<VALUE>font-size: 0.8em; border: 2px
dotted;</VALUE>
</VALUESET>
</PROPERTY>
<PROPERTY name="animation">
<VALUESET>
<VALUE name=”primary”>pushdown</VALUE>
<VALUE name=”gloss”>revealed</VALUE>
</VALUESET>
</PROPERTY>
<PROPERTY name="placement">
<VALUESET> <VALUE>inline</VALUE>
</VALUESET>
</PROPERTY>
<PROPERTY name="actuate">
<VALUESET>
<VALUE
name=”open”>Shift&MouseEnter</VALUE>
3. Finding space for glosses
 Problem:
HTML provides broad & complex layout
control to authors
scrolling and window resizing are common
makes prior Fluid techniques (interline,
overlay, callout) harder to implement
 Solution:
use simpler “push down” graphical technique
easily understood, improves on popup
tool tips
does not occlude, can freeze and interact with
4. Opening and closing glosses
 Problem:
Fluid “font zoom” animation
increases font size of gloss
gradually to desired size
interacts poorly with auto-line wrap
in HTML
Fluid anchor
gloss line 1
gloss line 2
gloss line 3
 Solution:
new “revealed” animation grows
line by line
easily readable during animation
Open Fluid anchor
gloss line 1
gloss line 2
gloss line 3
Demo: Open Fluid
 Glosses as a personal information portal
CNN: glosses on existing TOC links contain links to personal
pages of interest, in & out of CNN site
 Glosses as typed annotations
W3C standards document
glosses have distinct anchor styles: example, note, warning
 Other uses
glosses as an adjunct to open hypermedia links
explain rationale or context for reader-added links
glosses in the foreground
auto-open glosses with larger/bolder fonts or colors
Conclusions
 Open Fluid provides fluid glosses on existing Web pages
implementation can handle complex HTML pages
gloss animations are responsive and smooth
new placement, opening styles to match Web context
 OHM models can support dynamic gloss behavior
uses Arakne OHM Environment
new Render Engine handles animation, markup, state
PSpecs extended to describe appearance, behavior
 Readers can add their own glosses to existing Web pages
varied anchor and gloss appearance via CSS
Open Fluid will be shown at
the demo session tomorrow
afternoon.
Come by and see how readers
add glosses and more examples.