| Date post: | 20-Dec-2015 |
| Category: |
Documents |
| View: | 214 times |
| Download: | 0 times |
A Metro Map Metaphor for Guided Tours on the Web: the Webvise Guided Tour System
Elmer S. Sandvad, Lennert Sloth,and Jørgen Lindskov Knudsen
Hypergenic A/SHelsingforsgade 27
DK-8200 Århus N, Denmarkwww.hygergenic.com
Kaj Grønbæk Department of Computer Science,
University of Aarhus,Åbogade 34,
DK-8200 Århus N, Denmark. [email protected]
Plan
• Guided tours on the Web• The Webvise system• The Webvise Guided tour extension
• User interface• The metro map metaphor
• Architecture and XML format• Related systems• Conclusion & Status
Guided tours on the Web• Navigating a specific topic on the Web is difficult
• collected, categorized and annotated pages in portals, digests, directories, and guided tours may help
• Guided tours have become quite common on the Web • "guided tour" gave more than 450.000 hits on Google • Many of these hits represent sites that present a certain topic in a
sequence of web pages and commented links • Only few of the existing guided tours are made by a
dedicated guided tour system. • They are created manually in plain HTML with some 'next' and
'previous' links at the top or the bottom of the page. • Mixed content and structure - hard to maintain
Need for guided tours
• Many application domains call for new ways to present procedures or collections of information in coherent ways. • Teachers, librarians, Web journalists, portal editors, publishers,
governmental administration etc.
• Systems explicitly supporting guided tours for the Web are: • Pooh's Guided Tours Service• Footsteps• Walden's Paths• Ariadne (Aarhus University – presented at WWW7, Brisbane)
Link object
I medfør af § 93, stk. 2 i bekendtgørelse nr. 1053 af 18. december 1995 om levnedsmiddelhygiejne og egenkontrol m.v. og § 20, stk. 2 i bekendtgørelse nr. 931 af 6. december 1995 om materialer og genstande bestemt til at komme i berøring med levnedsmidler fastsættes:
Ændringsbekendtgørelse nr. 1053 af 18. juli 1997 om .....
Webvise open hypermedia system– papers at WWW8 and WWW9• Portfolios with links and notes are
stored in separate XML files• One or more portfolios on top of the
same Web documents• Create links between Web-pages,
MS Word and Excel-documents, PDF documents etc.
• The created notes and links are shown on top of existing material (incl. third party documents )
• Recently extended to support guided tours
• The note is anchored in the page and edited in a Note editor
• The note marker is shown in optional color e.g. red on the page
• The note either appears in the page or pops up as a tooltip
• Links are added via the Explorer context menu
User Interface: Webvise Notes & Links
Webvise Guided Tour Extension
Editor and HTML/PNG generator
Guided tour editor - Map creation
Adding a page to a guided tour
• Context menu supports addition
• Addition may also be done by Drag & Drop
The route editor – editing the appearance of a single route
Webvise Guided Tour HTML-generator
• Generates browser-independent HTML and PNG files, which enables publication of guided tours to users without Webvise
• The guided tours are shown as a metro map where you may follow specific routes
• Applying a variety of graphical metaphors• Metro maps explored in this work• Mind maps, topic maps etc. being explored
A Webvise generated Metro map
Generated route map
The Metro Map Metaphor• Simplified map of a complex world• Familiar to many users• Key characteristics of the physical metro
• The metro map makes it easy to find the route that leads to your destination(overview and navigation)
• Horizontal route map inside the metro train assure that you easily can findout where you are on the route (orientation)
• Organizing web pages in subject routes using the metro map methaphor can benefit from the same advantages as the physical metro.
Inspired by the Chalmers Library guide (http://educate2.lib.chalmers.se/demopath.html)
Growing set of applications
Architecture of the System
DDE
Generated code for Metro map<HTML><BODY>…<BODY BGCOLOR="#ffffff"><IMG SRC="default.png" ALT="" BORDER=0 USEMAP="#hhamap"><MAP NAME="hhamap">…<AREA HREF="http://www.hba.dk/metro/StrategiFrame.html" onMouseOver="window.status='Strategi';return true" ALT="" SHAPE=CIRCLE COORDS="358,173,11">
<AREA HREF="http://www.hba.dk/metro/SgeprofilFrame.html" onMouseOver="window.status='Søgeprofil';return true" ALT="" SHAPE=CIRCLE COORDS="330,162,11">
<AREA HREF="http://www.hba.dk/metro/MerkurFrame.html" onMouseOver="window.status='Merkur';return true" ALT="" SHAPE=CIRCLE COORDS="302,151,11">…</MAP></BODY></HTML>
OHIF encoding of guided tours(DTD:http://www.daimi.au.dk/~les/ohif/ohif.dtd)
The Guided Tour <GUIDEDTOUR id="daimi.2.988815834" type="GUIDEDTOUR"
name="Metro" creator="Kaj Gronbak" lastEditor="Kaj Gronbak" created="988815834" modified="988815886" >
<PROPERTIES><PROPERTY name="backgroundColor" type="UserDefined"
flags="0"><VALUESET><VALUE>54272,53248,51200</VALUE></VALUESET></PROPERTY><PROPERTY name="penSize" type="UserDefined" flags="0"><VALUESET><VALUE>4</VALUE></VALUESET></PROPERTY><PROPERTY name="connectorThickness" type="UserDefined"
flags="0"><VALUESET><VALUE>4</VALUE></VALUESET></PROPERTY></PROPERTIES><COMPREFIDSET></COMPREFIDSET></GUIDEDTOUR>
A Station<COMPOSITEREFSPEC>....<CONTENTSPEC>
<VERSION>v1.0</version><URL>http://www.hba.dk/metro/informationssøgning/merkur.htm</URL><ATTRIBUTES> <NAME>baseUrl</NAME> <VALUE>[url]http://www.hba.dk/metro/informationssøgning/merkur.htm[/url] [frameName][/frameName] </VALUE> ...</ATTRIBUTES>
</CONTENTSPEC><LOCSPEC>
...</LOCSPEC> <ATTRIBUTES>
<NAME>label</NAME><VALUE>Merkur</VALUE> <NAME>position</NAME><VALUE>421,163</VALUE>...
</ATTRIBUTES></COMPOSITEREFSPEC>
Related systems(1)
• Pre-processing systems:• Pooh's Guided Tours Service,Walden's Paths and Footsteps • They compile navigation button code into the HTML code of content
pages• Weaknesses
• Increased Internet traffic • Limits the browser's navigational options: Bookmarks, Home, Open
Location etc. will terminate the traversing of the tour. • Pre-processing is difficult, e.g. JavaScript, forms, and frames.• Lacking overview of tours• Only linear tours are supported.
Related systems(2)
• Applet/Helper Application systems:• Ariadne and the Opasia Portal version of Ariadne are based on a
Java applet that maintains the graphical representation of the guided tour
• Ariadne solves many of the pre-processing system problems, e.g. no need to insert code in the content pages
• Weaknesses of the Ariadne system as well:• It is not possible to bookmark a page in a tour and return to this page
within the context of the tour later. • Ariadne occupies more screen space for presenting the guided tours.
• Webpath is a customized Internet Explorer based browser - hard to spread and maintain
ConclusionWebvise can be used to
• improve the overview and quality of an Internet/Intranet/Extranet site• present an analysis of your own and others material on the web, together
with your own links and notes• develop teaching, training, and guiding sequences on web-based material
The main advantages of the system are: • a browser independent format in terms of HTML and PNG based image
maps for reading the guided tours; • overview maps and route maps with indication of which stations of a tour
have been visited; and finally • support for arbitrary web pages as stations on tours.• support for a variety metaphors, the familiar metro map was a starting
point
Status
• Webvise is marketed by Hypergenic under the name WebNize 1000• Guided tour support for both MSIE and Netscape Navigator
browsers• New metaphors for mapping topics on the Web will be
explored• An applet-based sister product based on the Ariadne
prototype is marketed under the name WebNize 100• The two products share the same XML-based OHIF
format
User Interface: WebNize 100WebNize 100 Viewer Internet Explorer
See http://www.hypergenic.com
![[WUC 2015] Lennert de Rijk, Managing Director Benelux & Germany, Internet Advantage | Web Analytics in the Travel Industry](https://static.documents.pub/doc/80x56/55c4a8b2bb61eb581f8b4801/wuc-2015-lennert-de-rijk-managing-director-benelux-germany-internet-advantage.jpg)
