1. Fluid Annotations in an Open World Polle T. Zellweger Niels Olof Bouvin Jock D. Mackinlay Henning Jehøj Aarhus University, Denmark

2. 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

3. 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

4. interlinemargin overlaymulti-way and nested glosses

5. 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

6. 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

7. 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 popup: some anchor text anno

8. 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

9. 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

10. 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

11. Arakne Environment Internet Explorer Doc Obj Model Arakne Environment Hypermedia View COM Construct HM servers Construct Hyperstores Browser Original Hypermedia View Browser  Browser class communicates with IE’s DOM to insert links & simple annos  at page load  when reader adds new item  IE handles link traversal & popup annos itself, as usual OHP

12. Arakne Environment Hypermedia View Arakne Environment Internet Explorer Doc Obj Model Browser COM Construct HM servers Construct Hyperstores Browser Original modifications events Render Engine Gloss Model Animation Engine Fluid OHP

13. Internet Explorer Doc Obj Model Render Engine Gloss Model Animation Engine  When reader adds gloss s/he specifies gloss content s/he specifies behavior and gloss, anchor appearance Construct HM servers Construct Hyperstores COM modifications  At page load or add item RE inserts links, glosses by changing DOM RE places behavior in Gloss Model events  At open, close gloss event AE animates gloss as specified RE sets gloss state in Gloss Model Arakne Environment Fluid modifications events Arakne Environment Hypermedia View OHP

14. 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

15. Specifying appearance & behavior  All OHSWG objects have PSpecs set of properties  Open Fluid PSpecs are richer: presentation of anchor text presentation of gloss content 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 warning color: #FFFFFF; background: #CC0000; font-size: 0.8em; border: 2px dotted ; pushdown revealed inline Shift&MouseEnter Shift&MouseLeave closed } via CSS

16. 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

17. 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  Solution: new “revealed” animation grows line by line easily readable during animation Open Fluid anchor gloss line 1 gloss line 2 gloss line 3 Fluid anchor gloss line 1 gloss line 2 gloss line 3

18. 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

21. 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

22. Open Fluid will be shown at the demo session tomorrow afternoon. Come by and see how readers add glosses and more examples.