Shared Places on the Web: XML for Web-based collaboration and Distance Education http://www.gca.org/conf/xmldev99/ http://www.npac.syr.edu/users/gcf/montrealxmlaug99 XML Developers Conference Montreal August 19-20 1999

1
Shared Places on the Web XML for Web-based
collaboration and Distance Educationhttp//www.gc
a.org/conf/xmldev99/ http//www.npac.syr.edu/user
s/gcf/montrealxmlaug99 XML Developers
ConferenceMontreal August 19-20 1999
Lukasz Beca Geoffrey Fox Marek Podgorny Syracuse
University

• NPAC
• 111 College Place
• Syracuse NY 13244 4100
• Phone [phone]

2
Abstract of XML and Collaboration

• We describe the essentials of shared event
  collaboration and how it is naturally integrated
  with the Web for both replicated client and
  server side shared objects.
• We describe TangoInteractive and its applications
• One use of XML is to define Shared Web Pages
  which implement both asynchronous (portal) and
  synchronous collaboration
• Another use of XML is to support universal access
  and to link diverse display devices in
  collaborative sessions
• We define the resultant event based architecture
  to be used in a new implementation of
  TangoInteractive

3
What is Web-based Collaboration?

• Collaboration means sharing objects
• Web-based Collaboration implies use of Web to
  share distributed objects accessible through the
  Web
• Shared Web Pages Resources accessed through Web
  Servers or Brokers Client-side applications with
  programmatic interfaces

Web Site
Specify Page
Receive Identical Page
4
Simplest Shared Object is Client Side Java Applet

• Web Pages are an example where there is a single
  copy of an object perhaps simpler is the
  replicated object model used in chat-rooms and
  more generally shared applets where sharing is
  maintaining consistent state of replicas

ServerSharesEvents
Java Chat Rooms (applications or applets). Share
text typed by users
5
Architecture of Tango Distance Education
Share URLs Audio Video ConferencingChat Rooms
White Boards etc.
JSU WebServer
NPAC WebServer
Students View ofCurriculum Page
Teachers View ofCurriculum Page
Java TangoServer
HTTP
Address at JSU ofCurriculum Page
.
Java Sockets
.
Java Control Clients
Teacher/Lecturer at NPAC
Participants at JSU
All Curricula placed on the Web
6
So putting these ideas together for Distance
Education

• We have curricula authored in some fashion and
  placed on the Web -- it is shared by sharing
  specification of current Web Page
• At simplest this is URL but also supported using
  JavaScript API and Shared Web Page Events are
• Shared Scrolling position
• Shared Pointer as DHTML layer
• We have shared client side C object -- the
  digital audio-video conferencing subsystem
• We have several shared Java applets
• One or more Chat rooms
• Whiteboard
• Raised Hand / Quiz applets for specialized
  teacher-student interactions

7
Applications of Web-based Collaboration

• Multi Player Games Use Chat Rooms and digital
  VTC to establish context
• Share Java, JavaScript, VRML etc. games
• Tango has Card Games, Othello, Chess, Snakes and
  Ladders
• Crisis Management Again use general tools
  (including whiteboard) and add shared maps and
  multimedia situation reports
• Command and Control Military, Test and
  Evaluation -- any real time control of complex
  system
• support distributed experts who can be on call
  remotely and shared object is visualization of
  test results
• Collaborative Computing and Engineering Here
  specialized shared objects are CAD, simulation
  and planning tools
• Socializing ..

8
More General Shared server side Objects

• Web Page Sharing is a special case of sharing
  server side objects -- CGI Scripts, Databases,
  Object Repositories etc.
• This can be done by sharing the Web specification
  of these objects which can be done client side
  without ANY change to basic object
• This is sharing of client side interface (proxy)
  to server side object

Collaboration ServerShares ObjectSpecification
Fetch Identical Objects
Specify Object
Receive Identical Specification
9
Sharing Server Side Objects II

• We have used the shared proxy notion to implement
• Shared Browser
• Shared Form to access Server side computation
  (NCSA Biology Workbench -- bunch of CGI scripts)
• Shared access to Web-linked database

Server does not need to know about detail
of collaboration. It is more efficient if it
caches information for re-use. Thus use custom
data-base caching or general proxy server
10
Shared Event Model of Collaboration?

• So if all clients want exactly same view at all
  times, then the shared event model is a waste.
• Might as well, just share the display produced on
  originating client (cf. Microsoft NetMeeting)
• In fact, shared event typically enables each
  client to get the same view but instead one
  shares the object but has different presentation
  layers on each client
• For instance, share a single XML document but
  apply different style sheets on each client
• Again in command and control, basic application
  is a 3D map (Geographical Information System) but
  not so interested clients can present a simple 2D
  view

11
So what do we have now--TangoInteractive

• http//www.npac.syr.edu/tango
• Largely Java system enabling collaboration
  between general client side objects
• If client side object is a Server proxy, then
  this ruse enables sharing of server side objects
• Has API for Java applet/application, C,
  JavaScript
• API Enables sharing of events in applications
• This is just a fancy way of saying it forwards
  messages
• API Enables applications to find out about
  participants
• Currently ONLY deployed for Netscape version 4.5
  as uses LiveConnect to connect JavaScript to Java
• Internet Explorer version not fully debuggd

12
Next Generation TangoInteractive

• So let us imagine that we can redo all of this
  and assume that
• The proxy ruse is correct and one does only need
  to share client side Web Pages
• There are plenty of conventional web pages but
  full support for XML and W3C DOM in browsers
• XML can be used for control pages and specialized
  pages such as those produced by web-linked
  databases and education portals
• Collaboration implies sharing of electronic
  objects and is needed in Asynchronous and
  Synchronous modes
• Asynchronous mode is MOST important (in all
  applications including distance education) and
  will be supported by run of the mill object web
  infrastructure
• shared web pages and documents
• electronic mail
• Synchronous mode has important applications and
  not done fully by giants ...

13
Shared Places on the Web I

• Each Shared Place on the Web or SPW is a set of
  XML and HTML documents
• An XML document defines the collaboration
  Structure -- who is allowed in Shared Place
  what objects can be there where they are stored
• This replaces the suite of undocumented rigid
  policies in TangoInteractive as well as scattered
  configuration files
• There is one such XML document for each type of
  SPW e.g. there would be distedtojacksonstate.xml
  or xmldevelopersconf.xml etc.
• We have developed SPDL (Shared Place Definition
  Language) which is currently quite simple and is
  used in the SPW structure definition

14
Shared Place Example Introduction

• In this example we define a simple shared place
  where the results of some scientific computations
  are available.
• The place can be used also for discussion among
  collaborating scientists. The discussion is
  supported by two shared objects chat and data
  viewer.
• The chat can be used for the text based
  discussion about presented results.
• The data viewer can be used for the graphical
  presentation of the results. The authors of the
  results (creators) have access to the advanced
  functionality of the data viewer. (e.g. support
  of particular XML dialects) They can use this
  functionality to present their findings visually
  to the observers.
• The shared place is defined by two documents. The
  presentation layer is described by the HTML
  document and the collaboration functionality is
  defined by the SPDL XML/XSL document.

15
Overview of Typical SPDL Document

• The SPDL document defines several collaboration
  aspects of the shared place.
• The header defines the communication protocol
  used for contact with collaboration server.
  (could be CORBA or what have you)
• Next, all the shared objects embedded in the
  shared place are enumerated.
• The following fragments define the user groups
  that have access to the shared place, specific
  user roles, and types of the collaborative
  sessions that are established in the shared
  place.
• Other fragments describe how the data visible by
  different users are synchronized and specify the
  sources of the content presented by the shared
  objects.
• Note how some Shared Place properties (e.g. users
  and files) are useful in non-collaborative page
  mode and others support both synchronous and
  asynchronous collaboration

16
SPDL Document Header

• lt?xml version1.0?gt
• ltplacedefgt
• ltheadgt
• lttitlegtResult Presentationlt/titlegt
• ltprotocol typeplaingt
• ltservergtkopernik.npac.syr.edult/servergt
• ltportgt5555lt/portgt
• lt/protocolgt
• lt/headgt
• The Header contains the title of the place.
• It also declares how the shared place
  communicates with the collaboration framework.
  (I.e. server in Tango language)
• The plain client/server protocol is chosen here
  with the collaboration server running on the
  machine kopernik.npac.syr.edu on the port 5555.
• Other protocols such as IIOP can be used as well.

Initialize shared place definition
17
Declare the Shared Objects

• ltsharedobject nameviewer/gtltlocationgthttp//www
  .npac.syr.edu/experiments/apps/viewer.jar
• lt/locationgt
• ltwidthgt300lt/widthgt
• ltheightgt300lt/heightgt
• lt/shared_objectgt
• ltsharedobject namechatgtlt/sharedobjectgt
• This fragment describes shared objects that are
  used in the shared place.
• Two shared objects are declared.
• Other objects which are not declared here, will
  not be supported by the Shared Place Framework in
  the Result Presentation place (HTML Page).

18
What does SPDL Document Define

• Collaboration functionality
• Session management Defines how the Shared
  Objects initiate or join collaborative sessions
• Synchronization Describes mechanisms for
  assuring the consistence of data observed by
  collaborating users
• Control mechanisms Defines how the behavior of
  Shared Objects can be controlled and how the
  state of the collaboration session can be
  accessed
• Shared Object data
• Initial state Defines how the Shared Object are
  initialized when they start running
• Persistence Describes whether and how the
  content of the collaborative session is stored
• Content Describes the data to be processed by
  Shared Objects during collaboration session

19
What SPDL Document Defines- continued

• Users
• Grouping Defines user groups with possibility of
  assigning roles
• User identity based configuration It is possible
  to define different behavior of Shared Object
  depending on the user, user group or user role
• Referencing Shared Objects
• Shared Object ID SPDL uses Shared Object ID to
  define properties for specific Shared Object
• Granularity It is possible to define different
  behavior for individual Shared Objects, classes
  of Shared Objects or for the whole Shared Place

20
Definition of Groups of Users

• ltgroupsgt
• ltgroup namesyracusegt
• ltusergtmorganlt/usergt
• ltusergtchenglt/usergt
• lt/groupgt
• ltgroup namebostongt
• ltusergtsmithlt/usergt
• ltusergtjohnsonlt/usergt
• lt/groupgt
• ltgroup namewashingtongt
• ltusergtandersonlt/usergt
• ltusergtbrownlt/usergt
• lt/groupgt
• lt/groupsgt
• This fragment of the SPDL document defines user
  groups. Those groups are used in further sections
  of the SPDL document to define other properties
  of the shared place. Three user groups, each with
  two users, are defined syracuse, boston and
  washington.

21
Shared Places on the Web II

• There are HTML documents defining shared places
  themselves they instantiate particular objects
  and form presentation layer
• There is an associated XSL style sheet which
  invokes necessary programmatic capabilities and
  interprets XML islands in HTML document. These
  islands are defined in SPDL
• There can be many SPWs presentation layers with
  a given SPDL structure
• This (HTML Style sheet) combination replaces
  the current TangoInteractive Control Applet
• We will re-use some existing client side Java as
  SP agent and control objects invoked from style
  sheets
• The TangoInteractive Server can also be largely
  re-used

22
A Collection of Shared Place Components
SPDL document
Web browser
ltplacedefgt . . . lt/placedefgt
Web page
Regular content
Shared objects
So Web Page is defined as a set of Nodes -- You
choose which nodes (and their children) that you
wish to share and then events are
exchanged maintaining state consistency
23
Web Page with 2 Shared Objects

• ltHTMLgt
• ltheadgtlttitlegtPage with the computation
  resultslt/titlegtlt/headgt
• ltbodygt
• ltxml id"placeDocument" src"results.xml"gtlt/xmlgt
  
• ltxml id"chatDef"gt
• ltembedobject name"chat"gt
• ltlocationgthttp//www.npac.syr.edu/experiments/apps
  /chat.jar
• lt/location gtlt/embedobjectgtlt/xmlgt
• ltxml id"viewerDef"gt
• ltembedobject name"viewer"gt
• ltlocationgthttp//www.npac.syr.edu/experiments/apps
  /viewer.jar
• lt/location gtlt/embedobjectgtlt/xmlgt
• ltxml id"style" src"spdl.xsl"gtlt/xmlgt

SPDL Definitions Page
Shared Objects
Style Sheet
24
Collaboration Framework I

• Objects register and then define their state via
  a stream of events
• Need to share (federate) events between domains
  (your PC and mine) whose event services are
  normally isolated

Tango Server
Clients which receive events which are either
queued (asynchronous) or processed synchronously
25
Each Collaborating Client Receives Events

• Event Stream becomes set of time stamped XML
  messages
• Control Messages e.g. New Participant Joined
• Shared Object Definition/Update Messages (e.g.
  Page Scrolled by such and such amount done as XML
  serialization of JavaScript Event object)

One or MoreShared Places
One or MoreShared Places
.
26
SPW and Portals

• There is a lot of interest in portals these days
• We build Web-based computing environments which
  are portals to Supercomputers and Web-based
  education or portals to a virtual university
• Merrill Lynch predicts that Enterprise
  Information portal market will be 15B by 2002
• Portals are built (by us) as a customizableset
  of XML components ( e.g. Run a Particular Program
  or display thumbnail of the next web-page in
  lecture)
• SPWs can be thought of as customizable
  collaborative portals which define both
  synchronous and asynchronous shared components

27
SPW as Shared Portal on the Web

• Electronic Mail and News Updates are just
  events which can be handed to viewer objects in
  an SPW
• In synchronous collaboration, events are
  typically generated on a client and immediately
  shared with other clients
• Asynchronous events typically are generated by a
  server (which offers persistent store) and
  transmitted to client
• Integration of Synchronous and Asynchronous
  Events is essential in Next Generation
  TangoInteractive
• Customization is available as you can choose
  which objects are in your SPW and you can define
  customization parameters such as area for which
  you want weather and which sports results should
  be displayed
• Such customized portals are commonplace but SPDL
  has the advantage that it specifies both
  synchronous and asynchronous portal components.

28
Two Uses of XML in Collaboration?

• We have introduced XML used to define the nature
  of collaboration in terms of objects, clients,
  policies
• We have discussed user customization in terms of
  portals
• Consider the JavaScript Shared Browser (JSSB) in
  TangoInteractive
• It is an example of collaborative content built
  around sharing events defined in Web Page
• Difficulties with version 4 DOM as bugs and
  inconsistent or incomplete implementations
• However it can be made to work very effectively
• Here we discuss content Web pages and not the
  Collaboration Definition Web pages we discussed
  already
• Remember that shared event Collaborative
  systems share the object and not its particular
  presentation layer on each client

29
JSSB Currently Shares Existing Web DOM in
Netscape 4.5

• Clicks on form/link in layers or frames
• Clicks on layers
• mouseover and mouseout ...
• Can veto default action on clicks or other events
  on nonmaster side
• Dont know how to veto changes on nonmaster in
  Netscape4
• Save Form Contents at any time
• can reload any dump at any time
• Resizing so all clients have same scaling
• Scrolling
• Sharing can be customized from dialog window
• Download times to monitor bad networks at
  application level
• JSSB does monitor client page to detect unwanted
  page changes (One can capture clicks on Page
  links but not on back button )

30
JavaScript Shared Browser with Dynamic HTML --
Shared Pointer

• Shared Pointer added to Internet Assistant
  PowerPoint on the Web
• Illustrates sharing of Web Object Modelinternal
  to document

31
Shared Form Illustrated by Shared Access to NCSA
Biology Workbench showing how general server
objects can be shared from web interface
Shared Multiple List Shared Buttons Shared Text
field Shared Checkbox
32
User and System Events

• One can either share raw system message (click
  event occurred) or higher level user event
  generated by JavaScript invoked by event
• Note Netscape 4.5 does NOT allow you to generate
  a general event in a page
• You can invoke click events on form elements
  but not so events associated with layers
• You can parse JavaScript invoked by event and
  transmit but this is unreliable
• So User events are convenient and sometimes
  required

Function process() Invoke Tango JS
Interface with user defined meaning
Capture Click and Invoke Tango JS Interface with
meaning that click occurred
Or
Click on Button which happens to invoke some
User JavaScript Code
33
JSSB and Shared Card Games
Cards are 56 DHTML Layers
All of this implies XML Framework for Card
Games and InternetGambling
Dialog BoxInvokes SharedUser Events
34
Sharing XML Content Pages

• So new version of JSSB for SPW should
  implement
• Share XML content of a document
• Allow each collaborating client to generate
  personalized presentation layer using customized
  stylesheet or equivalent
• Note TangoInteractive can map object
  specification on each client and so customization
  can be performed either before or after web page
  generated
• Currently we map URLs before submission so each
  client accesses optimal mirror site (if available)

35
XML JSSB Architecture
Content Server
Nonmaster
Master
Shared by SPW
Events Trapped byXML JSSB
36
Applications of Shared XML Content Pages

• Support of Collaboration between PC client,
  Palmtop and high graphics devices such as CAVEs
• So in education, can support a mix of wireless
  palmtops and laptops in the class, with distance
  PCs
• Laptops and PCs get all the information
  including shared PowerPoint/Web Curricula pages
  etc.
• Palmtops just get quizzes, chatrooms, whiteboard
  etc.
• Linkage of geographically distributed researchers
  is necessary to support collaborative
  computational science
• One researcher may be in a 3D virtual environment
• Others will be looking at traditional scientific
  visualization on workstations
• A common XML specification of visualization is
  mapped according to display capabilities of
  client device

37
XML and Universal Access I

• It is essential that collaborative technologies
  support all users independent of their hardware
  and physical capabilities
• Hardware issues are essentially illustrated by
  palmtop to CAVE example on previous foil
• Suppose we wish to teach a class where some
  students and/or teachers have impaired sight and
  hearing.
• Then we need to share same object content but
  render it differently on each client.
• Possibly want to render a given object in
  multiple ways on a given machine
• Essential to share content (as in XML JSSB) and
  this enables you to choose right presentation for
  given client
• Typical HTML layout aimed at fully capable users
  and needs to be redone for physically impaired
  users
• Concepts of XML JSSB for universal access
  developed with Al Gilman from Trace Center

38
XML and Universal Access II

• Assume that all education will be web-based
• Assume that we need to provide web resources of
  equal quality for all citizens
• This will not work if one has to translate each
  course from material for regular user to that
  for user for different access capabilities
• Thus only chance is to define curriculum in XML
  and produce customized presentation layers
• One will need a powerful indexing/abstracting
  scheme to be able design appropriate navigation
  schemes for all users and clients
• Natural framework is XML based Education Portals
  with SPW implementing collaboration (a.k.a.
  teaching)

39
Some Technical and System Comments

• There is a lot of Tango Software lying around to
  implement collaboration and so natural to
  implement customization in Java or JavaScript as
  an alternative to XSL
• 15,000 lines JavaScript and a lot more Java
• Note JavaScript very fast but phenomenological
• Undefined thread behaviour etc. makes for
  experimental programming
• However there is usually way of getting things
  to work
• Note that on detects events at presentation
  layer but must share at object layer -- only
  works if this connection well defined

SharedObject
XMLContent Pages
Converted byBrowser etc.
Events Trapped by XML JSSB define object state
40
Conclusions

• We have analyzed a successful Web-based
  collaboration system TangoInteractive and in
  particular its JavaScript interface enabling
  shared interactive web pages
• We have noted that it is very helpful to
• use XML and new W3C DOM
• Link Asynchronous and Synchronous events
• Link Portal and Collaboration technology
• XML can be used in defining portal/shared
  collaboration space
• XML can support universal access to
  collaborative environments to those with
  disabilities -- hence giving them access to
  education
• XML can support collaboration between clients
  from palmtops, to PCs and high-end virtual
  environments
• TangoInteractive is available now at
  http//www.npac.syr.edu/tango
• Prototypes involving SPDL and Collaborative
  PCs/palmtops will be available in Jan 00
• This talk is http//www.npac.syr.edu/users/gcf/mo
  ntrealxmlaug99