ShyWiki-A Spatial Hypertext Wiki Carlos Solís
Nour Ali
Departamento de Sistemas Informáticos y Computación Universidad Politécnica de Valencia Camino de Vera s/n 46022 Valencia, Spain
Dipartamento di Elettronica e Informazione Politecnico di Milano Piazza L. da Vinci 32, I-20133 Milano, Italy
[email protected] ABSTRACT This paper presents ShyWiki, a Spatial Hypertext Wiki. ShyWiki has the flexibility and advantages of spatial hypertext. ShyWiki hypertext documents are composed of notes and maps that can be arranged by users. Users can change the spatial attributes of the elements in a hypertext document such as their position, order, color, size, etc. Furthermore, users can move, delete or aggregate notes as well as maps. ShyWiki allows users to perform a collaborative spatial hypertext design due to the fact that the community of users decide the final structure of a wiki page.
Categories and Subject Descriptors H.5.4 [Hypertext/Hypermedia]: Architectures ; H.5.3 [Group and Organization Interfaces]: Collaborative computing, Web-based interaction.
General Terms hypertext
Keywords wiki, spatial hypertext
1.
INTRODUCTION
The first WikiWeb was created by Ward Cunningham, who invented the concept and gave its name Wiki (from the Hawaiian wiki wiki ”fast”) [16]. Since their inception, Wikis are characterized by providing simple editing mechanisms that allow the rapid evolution of their content. The success of the wiki concept is well represented by Wikipedia [3], currently, the largest wiki that exists. A Wiki is a collaborative hypertext system or a social web site, where users are involved in editing and creating new content. Hypertext allows the readers to freely break the linearity of reading [15]. In this way, wikis increase the freedom of their users due to the fact that users can be coauthors
[email protected] of the content. Wikis permit their content, which represents part of their users’ knowledge, to be written collaboratively. The content of a wiki page is defined by using a special wiki notation, which allows formatting the content, or creating links, etc. A wiki notation is easier to use than HTML for defining the content of a document. Users do not have to be technical experts in the edition and design of hypertext content. In this way, the technicalities do not represent a barrier for the wiki users. Wiki users can define the relations between different hypertext documents through hyperlinks. A richer way for representing the relationships between hypertext documents is using spatial hypertext. The spatial hypertext is based on the use of maps as well as the visual characteristics of the hypertext elements for defining the relations among them. Recently, new types of wikis have emerged, such as: qwikWeb [11] that easily integrates wikis with mailing lists; SmallWiki [9] which is a wiki enriched with metadata; SweetWiki [8] is a wiki enabled for semantic web technologies; DistriWiki [20] is a distributed and peer to peer wiki; or AniAniWeb [22] a personal page wiki; among others. However, none of the mentioned wikis takes advantage of spatial hypertext. In this paper, a Spatial Hypertext Wiki called ShyWiki is presented. In ShyWiki, the users can define the relations between documents and elements of a document using their spatial properties. ShyWiki allows a simple way of establishing spatial relations. Users can reorganize the information contained in a wiki page and easily create spatial relations through an interactive interface. The final structure of a wiki page is the result of the reorganization of the information performed by the wiki users. As a result, the users of the wiki perform a collaborative spatial hypertext design. This paper is structured as follows: Section 2 gives an overview of the features and advantages of spatial hypertext. Section 3 explains the characteristics that have been taken into account for designing spatial hypertext documents. Section 4 explains the characteristics of spatial hypertext wikis. Section 5 presents the ShyWiki prototype. Finally, section 6 presents the conclusions and further work.
2. SPATIAL HYPERTEXT Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. WikiSym ’08, September 8-10, Porto, Portugal. Copyright 2008 ACM 978-1-60558-128-3/08/09 ...$5.00.
The content of most hypertext documents can be divided into logical sections of information. Each of these sections can contain elements of formatted text, images or other types of media. The Web is a hypertext system where navigation is based on hyperlinks in documents. HyperDoc [10] is the first work which introduced such kind of navigation. However, navigation in hypermedia systems can create con-
fusion to the user [6]. A way for solving this problem is by presenting navigational maps. Examples are NoteCards [14] and StorySpace [4]. Navigational maps permit the relationships among hyperytext documents to be represented using a graph with nodes and links. In spatial hypertext, the relations among the elements in a hypertext document can be represented using navigational maps or relating properties of the elements such as their: location, proximity, shape, color, etc. When the visual and spatial properties are used to relate elements, the links are implicit [18]. In this way, spatial hypertext systems allow users to interpret and assimilate information quickly through properties. Using these properties the spatial hypertext takes advantage of visual capabilities of people [13]. Spatial hypertext systems have special requirements in their user interface [19]. These requirements have been concluded and observed through practice. Among these requirements are the ability to handle and move elements in a hypertext document. VIKI [17], WARP [12] or TinderBox [5] are spatial hypertext systems that provide interfaces which allow the information triage to their users. VIKI is one of the first researches that has focused on spatial hypertext and the emergent structure of the documents. WARP is a Webbased dynamic spatial hypertext system. Warp is based on applets and javascript and has a very interactive interface. However, it has a limited wiki behavior. TinderBox can generate HTML documents for the Web. However, generated HTML documents are static and cannot be modified using the wiki way. In addition, an interactive interface to modify them is not provided. There are standalone programs to make notes such as OneNote [2] and MakeNotes [1], etc. The notes in these programs can not be managed collaboratively, and they lack of hyperlinks.
3.
DESIGNING SPATIAL HYPERTEXT
Marshall and Shipman mention in [19] that spatial hypertext has special features that should be considered during the design of a spatial hypermedia system. The characteristics that have been taken into account during the design of ShyWiki are the following: Visual characteristics. They define the shape, color, border, and font style properties for each of the elements within the hypermedia document. In this way, users can identify the elements of the same type because these elements share a common definition of some of these properties. The combination of these characteristics may also indicate a specific state of an item. Agreggating elements. It defines what elements are containers of others, and indicates whether internal elements can enter or leave containers. Also, it specifies whether users can define their own container elements. Movement. It specifies whether an item can move in the document or it has a fixed position. It also defines whether a type of document elements can move outside or inside other container elements. Size. It defines the size of each element. The same element can have different sizes, for example, expanded or reduced. It is also possible to define whether users can change the size of elements or not. It should be taken
into account that the size of an object contained in another affects the size of the container. For example, when an object is expanded, its container also is expaned. Position. It defines the starting position of elements shown in the interface. New interface elements are shown as a result of navigation. As a result, each element defines where new elements originated from it have to be positioned. For example, a new element can appear as a new window replacing the previous one or can appear on the right hand side of the originated element. Links. A link allows users to navigate to another element and present it in the hypermedia document. The relation between the new element and its origin can be described in various ways. For example, a link can be drawn to make explicit the relation, or another visual property common to both elements can indicate a link between them. When the links are displayed explicitly (as arrows), labelling them is required in order to indicate their meaning. Deleting elements. A hypertext document can display navigational objects, access structures and information. However, if the user finds that an element is irrelevant, the user can remove it from the document. For any kind of element, it should be defined in the hypertext document, whether it can be deleted by users or not. Maps. An important part of the spatial hypertext is the representation of maps of hypertext documents [23]. A spatial hypertext document may display a navigation map showing explicitly the links between the documents in the system. Usually, a map node works as a link for navigating to a document, and the links inside the represented documents are drawn in the map as arrows connecting the map nodes. Transclusion. Another feature of hypertext systems is the transclusion [21], which is the inclusion by reference and without duplication of elements defined in other documents. In spatial hypertext, the transcluded content has the spatial properties defined in relation to the document where it is included. For instance, an element that is not enabled to be moved, when it is transcluded, it can become to be movable because its container allows it.
4. SPATIAL HYPERTEXT WIKI The main difference between a spatial hypertext document and a spatial hypertext wiki is that in the wiki: the users can be coauthors and codesigners of the content and the visual and spatial properties of the elements of a wiki page. In this way, the wiki pages can be updated incrementally and collaboratively by its users. In a spatial hypertext wiki page, each element is similar to an adhesive note, i.e., a spatial hypertext document can be seen as a set of notes. A note has a unique identifier which is used to transclude notes. A kind of note which is encountered in a spatial hypertext wiki is called map node, it contains a link to another wiki document, and is used to represent hypertext maps.
Users can change the properties of notes in order to relate and group notes. The user can perform the following actions to a spatial wiki page: Add notes. The user can add notes and their content to the wiki page. Remove notes. The user can easily delete a note without having to edit the contents of a note. Move notes. The user can move the notes and change their position in the document. The final position can be stored and can represent a change to the content of the wiki page. Change the visual characteristics of a note. Colors and borders of notes are used to classify and distinguish among them. A note may also have other types of adorns around it. The user can select the color and border of notes as part of the edition of a note content. The user can chose the shape of a note (rectangle, oval, etc.) as well as its size in order to denote a kind of special information.
Figure 1: ShyWiki initial page When a wiki link is navigated for the first time, a new document in ShyWiki is created. The user has to click the note link in order to create a new note. The content of the notes is defined using a normal wiki notation. Figure 2 shows a document that already contains some notes, including a composed one (bottom right side). Figure 2 shows that a note is being edited, and that the user can select its color from a palette (the selected note has a small square in left up corner).
Group notes. The user can group the notes to create aggregations. In this way, a note can be dropped inside another note, and the note becomes an internal part of an external one. Once notes are grouped, a user can manipulate a set of notes. Transclude notes. The users can transclude a note inside another document. The user has to indicate the source document and the note identifier. The spatial properties of the transcluded note can be changed using the wiki edition facilities. The note content can only be modified, if the original wiki page is edited. Create maps. The user can create or update a map by adding or removing map nodes. When a map node is added and the document pointed by the map node has a link to another document, which is represented by other map node, then a link is drawn in the map.
5.
SHYWIKI-SPATIAL HYPERTEXT WIKI
In older versions of web browsers, the only way for achieving interactive spatial hypertext representations was using java applets. However, the interaction between applets and the hypertext documents in the browsers was hard to program. As a result, a solution was to develop the applets as a whole application. Currently, browsers have been improved by including new HTML elements (HTML versions 4 and 5), and also facilitate the manipulation of the content of the document through the Document Object Model (DOM) interface in JavaScript. Using these improvements, the requirements of the spatial hypertext systems can be fullfiled by web browsers. Our prototype called ShyWiki (Spatial Hypertext Wiki) allows users to be coauthors of the content by providing the actions explained in section 4. In ShyWiki, a document consists of notes and map nodes. Figure 1 shows the initial screen of ShyWiki. It can be observed that on the left side is the name of the page, and then links for allowing the user to create new or edit content, and for updating the position of notes.
Figure 2: Editing a note In ShyWiki, the notes can be moved freely in the interface using the mouse. In this way, the user can accommodate the information as she/he thinks is more convenient. Also, the user can change the size of the notes as well as eliminate them at any moment. The grouping of notes can also be done directly in the interface. The user only has to drag and drop a note inside another one. The reorganization and elimination of notes does not update the document. An update only happens if the user clicks the link named Position (Figure 1). After it is clicked, a message asking for confirming whether the new positions and/or deleted notes have to be updated or cancelled. Figure 3 shows the same notes of figure 2 but in a new order. A map note is a fixed size note, with a link pointing to
5.1 ShyWiki Architecture ShyWiki has been implemented using java and javascript languages. ShyWiki satisfies most of the spatial hypertext requirements, but it is not designed to be a big wiki. The architecture and components of ShiWiki are shown in figure 5. In the server side the main component is the ShyWiki servlet. It provides to browsers the html content that is read from the persistence component.
Figure 5: ShyWiki architecture
Figure 3: After moving the notes of Figure 2 another wiki document. When a map node is added to the document, the name of the pointed wiki page is requested. If the wiki page has two map nodes, and the documents that they represent have a relation through a link, then this link is added to the wiki page with an arrow between the nodes. It is not mandatory that a document represented by a map node should already exist in the wiki. The wiki notation for links in ShyWiki is [[Wiki Document | link text | map text]]. The third argument (map text) is used to label the arrows in the maps. If the map text is not provided, then the link text is used as label, otherwise the link is not labeled. Figure 4 shows a map with two map nodes. A map node in ShyWiki contains a link, and has a yellow background and red border. This map represents a link between the wiki page WikiPage and the wiki page Note, and the link has the label composed by. The label is defined in a link inside a note in the WikiPage document.
The persistence component builds the html files read by the ShyWiki servlet. The html files are built from the data of the notes stored in an Eclipse Modeling Framework (EMF) model [7]. EMF is a reflective java framework which generates java classes from a UML model, and provides the persistence of the objects in XML files. The model we used to represent the ShyWiki structure is shown in figure 6. A wiki (wiki class) consists of wiki pages (wikiPage class). The components of a wiki page are composed notes (ComposedNote class) and map nodes (MapNode class). Both classes inherit the spatial properties from the AbstractNote class. The AbstractNote class cannot be instantiated. A composed note can be integrated by other notes (the children composition). A note (Note class) has hypertext content, whereas a transcluded note (TranscludedNote class) obtains its content from other note objects. A note can have links to WikiPages. The links are obtained parsing the notes’ content defined in the wiki notation. A map note is associated to the WikiPage that it represents. The client side is composed of a javascript program that has two main responsibilities: the mobility of the elements in the interface, and updating the server data. The mobility of the notes is programmed using floating div html elements and dynamic HTML windows. When the users update the visual or content data of a wiki page, the javascript program interacts with the browser using the DOM interface. If the server data has to be updated, the program invokes a set of Asynchronous JavaScript and XML (Ajax) services which uses the JavaScript Object Notation (JSON) as data interchange format.
6. CONCLUSIONS AND FURTHER WORK
Figure 4: Map example
Spatial hypertext permits to group the information using features such as: color, shape, proximity, aggregation, maps, etc. As a result, spatial hypertext allows users to visualize the relationships between information in a richer way than only using links. The visual relationships as well as the capability of grouping and moving information in the spatial hypertext, facilitates the information triage. In a spatial wiki, the wiki users define these characteristics in a
Figure 6: ShyWiki structural model collaborative way. This work has presented the characteristics of spatial hypertext wikis, and how the spatial hypertext properties affect the behavior of a wiki. Our prototype, ShyWiki, has some of the spatial hypertext wiki features. In ShyWiki a spatial hypertext document is seen as a collection of mobile adhesive notes and maps. In this way, the spatial properties are defined around them. The user can change some of the visual characteristics of the properties, or can reorganize the information in a wiki page. The future work is: study the usability and user satisfaction of a spatial hypertext wiki and compare it with a hypertext wiki; define a versioning and locking strategy; and how to transform a wiki in a shywiki.
6.1 Acknowledgments This work is funded by the CICYT (Spain) under META project TIN2006-15175-C05-01, and the CONACYT (M´exico) by the scholarship 178867/193415.
7.
REFERENCES
[1] Makenotes. http://www.makenotes.com/. [2] Onenote. http://office.microsoft.com/onenote. [3] Wikipedia, the free encyclopedia. http://www.wikipedia.org. [4] M. Bernstein. Storyspace 1. In HYPERTEXT ’02: Proceedings of the thirteenth ACM conference on Hypertext and hypermedia, pages 172–181, 2002. [5] M. Bernstein. Collage, composites, construction. In HYPERTEXT ’03: Proceedings of the fourteenth ACM conference on Hypertext and hypermedia, pages 122–123, 2003. [6] M. Bernstein, P. J. Brown, M. Frisse, R. Glushko, P. Zellweger, and G. Landow. Structure, navigation, and hypertext: the status of the navigation problem. In HYPERTEXT ’91: Proceedings of the third annual ACM conference on Hypertext, pages 363–366, 1991.
[7] F. Budinsky, S. Brodsky, and E. Merks. Eclipse Modeling Framework. Pearson Education, 2003. [8] M. Buffa and F. Gandon. Sweetwiki: semantic web enabled technologies in wiki. In WikiSym ’06: Proceedings of the 2006 international symposium on Wikis, pages 69–78. ACM, 2006. [9] S. Ducasse, L. Renggli, and R. Wuyts. SmallWiki: a meta-described collaborative content management system. In WikiSym ’05: Proceedings of the 2005 international symposium on Wikis, pages 75–82. ACM, 2005. [10] D. C. Engelbart. Authorship provisions in augment (reprint). pages 107–126, 1988. [11] K. Eto, S. Takabayashi, and T. Masui. qwikWeb: integrating mailing list and wikiwikiweb for group communication. In WikiSym ’05: Proceedings of the 2005 international symposium on Wikis, pages 17–23. ACM, 2005. [12] L. Francisco-Revilla and F. M. Shipman. Warp: a web-based dynamic spatial hypertext. In HYPERTEXT ’04: Proceedings of the fifteenth ACM conference on Hypertext and hypermedia, pages 235–236, 2004. [13] C. C. M. Frank M. Shipman. Spatial hypertext: an alternative to navigational and semantic links. ACM Comput. Surv., page 14. [14] F. G. Halasz, T. P. Moran, and R. H. Trigg. Notecards in a nutshell. SIGCHI Bull., 17(SI):45–52, 1987. [15] G. Landow. Hypertext: the convergence of contemporary critical theory and technology. Johns Hopkins University Press, Baltimore, MD, USA, 1992. [16] B. Leuf and W. Cunningham. The Wiki way: quick collaboration on the Web. Addison-Wesley Longman, Boston, USA, 2001. [17] C. C. Marshall and J. H. C. Frank M. Shipman. Viki: spatial hypertext supporting emergent structure. In ECHT ’94: Proceedings of the 1994 ACM European conference on Hypermedia technology, pages 13–23, 1994. [18] C. C. Marshall and F. M. Shipman. Searching for the missing link: Discovering implicit structure in spatial hypertext. In Hypertext’93 Proceedings, pages 217–230. ACM, 1993. [19] C. C. Marshall and F. M. Shipman. Spatial hypertext: designing for change. Commun. ACM, 38(8):88–97, 1995. [20] J. C. Morris. DistriWiki: a distributed peer-to-peer wiki network. In WikiSym ’07: Proceedings of the 2007 international symposium on Wikis, pages 69–74. ACM, 2007. [21] T. H. Nelson. The heart of connection: hypermedia unified by transclusion. Commun. ACM, 38(8):31–33, 1995. [22] J. Rick. AniAniWeb: a wiki approach to personal home pages. In WikiSym ’07: Proceedings of the 2007 international symposium on Wikis, pages 99–118. ACM, 2007. [23] H. J. Strauss. HyperMaps: telling your users where to go. In SIGUCCS ’90: Proceedings of the 18th ACM conference on User services, pages 377–390, 1990.
