28.06.2013 Views

Papers in PDF format

Papers in PDF format

Papers in PDF format

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Zippers: A Focus+Context Display of Web Pages<br />

Marc H. Brown<br />

DEC Systems Research Center<br />

130 Lytton Ave.<br />

Palo Alto, CA 94301<br />

mhb@pa.dec.com<br />

William E. Weihl<br />

DEC Systems Research Center<br />

130 Lytton Ave.<br />

Palo Alto, CA 94301<br />

weihl@pa.dec.com<br />

Abstract<br />

This report describes zippers, an application of outl<strong>in</strong>e-processor technology to the display of Web pages. Zippers allow<br />

users to expand and contract selected sections of a document, thereby display<strong>in</strong>g simultaneously the contents of<br />

<strong>in</strong>dividual sections of a document as well as its overall structure. Zippers can be implemented either directly <strong>in</strong> a Web<br />

browser or by a proxy (and consequently used by any off-the-shelf Web browser); <strong>in</strong> either case, no changes to HTML<br />

source files are required.<br />

Overview<br />

As people rush to put <strong>in</strong><strong>format</strong>ion onto the World Wide Web, more and more structured documents are appear<strong>in</strong>g.<br />

These documents <strong>in</strong>clude home pages with lots of hierarchically organized l<strong>in</strong>ks, papers with many sections and<br />

subsections, and other lengthy documents such as books and manuals.<br />

All Web browsers that we know of display each page as a cont<strong>in</strong>uous scroll. Unfortunately, it is easy to lose context<br />

when view<strong>in</strong>g a snippet of the whole, and it is hard to jump to arbitrary places <strong>in</strong> the page. These problems become<br />

more severe with longer pages.<br />

Outl<strong>in</strong>e processors provide one well known technique for address<strong>in</strong>g these problems. Outl<strong>in</strong>e processors allow a user to<br />

expand and contract selected sections and subsections of a document, thus reta<strong>in</strong><strong>in</strong>g the high-level structure of the<br />

document while also display<strong>in</strong>g <strong>in</strong>dividual sections. In addition, outl<strong>in</strong>e processors allow the user to rapidly jump with<strong>in</strong><br />

the document. This report describes the application of outl<strong>in</strong>e processor technology to the display of Web pages.<br />

Zippers<br />

Our display of Web pages <strong>in</strong>fers an outl<strong>in</strong>e structure from the head<strong>in</strong>g tags (i.e., H1, H2, ..., H6) <strong>in</strong> the HTML source.<br />

We mark each head<strong>in</strong>g with an icon called a zipper. Click<strong>in</strong>g on the zipper causes the section <strong>in</strong>troduced by the head<strong>in</strong>g<br />

to expand and contract. Re-expand<strong>in</strong>g a section causes the state of all subsections to reappear as they were before the<br />

section was contracted. However, shift-click<strong>in</strong>g on a zipper icon causes the section and all of its subsections to expand<br />

or to contract.<br />

The two sets of screen dumps below shows a Web page us<strong>in</strong>g Netscape (top) and us<strong>in</strong>g zippers (bottom). The zipper<br />

display is with<strong>in</strong> the WebCard browser, an <strong>in</strong>tegrated system for handl<strong>in</strong>g e-mail messages, bboard articles, and Web<br />

pages [3].<br />

The screen dumps below show the SRC home page. The page conta<strong>in</strong>s a level-1 head<strong>in</strong>g (a graphic with the letters SRC<br />

followed by "Systems Research Center"), some text, and then four level-2 head<strong>in</strong>gs. The bottom-left screen dump is the<br />

default display with zippers: The s<strong>in</strong>gle level-1 head<strong>in</strong>g is automatically expanded, thereby caus<strong>in</strong>g the text it conta<strong>in</strong>s<br />

and any subheaders to be displayed. By default, subheaders are displayed contracted. In the bottom-right screen dump,<br />

we've expanded the second and third subheaders.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!