PageSourceSearch

http://codinginparadise.org/paperairplane/

html codinginparadise.org collected 2026-09-24 09:16:25 UTC 52,140 bytes, 946 lines download raw bytes

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4  <meta content="text/html; charset=ISO-8859-1"
5 http-equiv="content-type">
6  <title>Paper Airplane and The Two Way Web</title>
7</head>
8<body>
9<div style="text-align: center;">
10<div style="text-align: right;"><span style="font-size: 16pt;"><img
11 style="margin-top: 0.5em; width: 190px; height: 51px;" alt="Logo"
12 src="http://codinginparadise.org/paperairplane/images/logo.gif"></span></div>
13<font size="5" style="font-size: 20pt;"><b><br>
14Paper
15Airplane and The Two Way Web</b></font><span style="font-style: italic;"><span
16 style="font-weight: bold;"><br>
17<font size="5" style="font-size: 14pt;">A Collaborative and
18Decentralized World Wide Web</font></span></span><br>
19</div>
20<p align="center" style="margin-bottom: 0in;"><font size="3"><i><a
21 href="http://www.codinginparadise.org">Brad
22Neuberg</a>, [email protected]<br>
23<a href="http://lucaspapaya.com/">Hoang Dinh</a>, [email protected]<br>
24</i></font><span style="font-size: 16pt;"></span><br>
25</p>
26<p style="margin-bottom: 0in; text-align: center;"><font size="3"><i>The work in this paper was done from 2001 through 2004; the final paper was published in May 2005</i></font></p>
27<p style="margin-bottom: 0in; text-align: left;"><font size="5"
28 style="font-size: 20pt;"><b><a name="abstract">Abstract</a><br>
29</b></font><font size="3"><br>
30This paper describes a radical new vision of the World
31Wide Web and browsers that deeply embed collaboration and editing.</font><br>
32<br>
33</p>
34<div style="text-align: center;"></div>
35<div style="text-align: center;"></div>
36
37<p style="margin-bottom: 0in; text-align: left;"><font size="5"
38 style="font-size: 20pt;"><b><a name="toc">Table of Contents</a><br>
39</b></font>
40<ol>
41	<li><a href="#intro">Introduction</a></li>
42	<li><a href="#prior_work">Prior Work</a></li>
43	<li><a href="#overview">Paper Airplane & The Two Way Web</a></li>
44	<li><a href="#walkthrough">Walkthrough</a>
45		<ol>
46			<li><a href="#instant_site_creation">Instant Site Creation</a></li>
47			<li><a href="#editor">The Editor</a></li>
48			<li><a href="#p2p_mesh">P2P Mesh</a></li>
49			<li><a href="#instant_messaging">Instant Messaging</a></li>
50			<li><a href="#smart_browser">The Smart Browser</a></li>
51			<li><a href="#two_way_web_directory">The Two Way Web Directory</a></li>
52		</ol>
53	</li>	
54
55	<li><a href="#conclusion">Conclusion</a></li>
56</ol>
57
58<p style="margin-bottom: 0in; text-align: left;"><font size="5"
59 style="font-size: 20pt;"><b><a name="intro">Introduction</a></b></font></p>
60<p style="margin-bottom: 0in;"><span style=""><span
61 style="font-style: normal;"><font size="3">What
62if community and editing were a central and transparent part of the
63web and browsers</font></span></span>? </p>
64<p style="margin-bottom: 0in;"><span style=""><span
65 style="font-style: normal;"><font size="3">What
66if the web was extremely integrated for usability, with instant
67messaging, site creation, the web server, and more all integrated
68into one whole</font></span></span>? </p>
69<p style="margin-bottom: 0in; font-style: normal;">
70<font size="3">What would this web look like if despite being
71integrated it was massively decentralized on a peer-to-peer network,
72able to exist and run without businesses or governments?</font></p>
73<p style="margin-bottom: 0in;"><span style=""><span
74 style="font-style: normal;"><font size="3">The
75answer is a web where people, collaboration, and usability are first
76class citizens. This paper is a thought experiment launched from
77these questions, a vision of</font></span></span> how the web will be
78drastically different when it supports seamless community as a
79major component of the browser. The goal is to expand and consider
80ideas and technologies that push the boundary of what is technically
81possible. Engineering constraints and pragmatism are extremely
82important but can sometimes limit designers from imagining new ways of
83structuring software.&nbsp; Rather than focus on the technical <span
84 style="font-style: italic;">how</span> this paper focuses on the <span
85 style="font-style: italic;">what </span>in order to stimulate thought
86beyond
87current engineering capabilities, providing future possibilities that
88research and coding efforts can steer toward.&nbsp; <br>
89</p>
90<p style="margin-bottom: 0in;">This paper describes a new web browser,
91named Paper Airplane, and a new World Wide Web, called The Two Way
92Web. This new system has two components: native support for
93collaboration and massive decentralization of the new web's technical
94plumbing. </p>
95<p style="margin-bottom: 0in;">Paper Airplane and the Two Way Web are
96an extension of WikiWiki's, special web sites in which anyone can add
97and edit content within the browser. Paper Airplane generalizes
98Wikis across the entire web, bringing them into the browser and
99transforming what the web could be. Why can't the browser natively
100support powerful editing, collaboration, and messaging tools so that
101every web site can choose to be as transparent and grassroots as
102traditional Wikis are? Further, the browser itself becomes a
103platform for hosting this new web; every web browser is also a web
104server
105that collaborates with other browsers in a peer-to-peer network,
106creating a rich system of nodes that provides decentralized and
107transparent services such as storage, search, naming, and more.</p>
108<p style="margin-bottom: 0in;">Paper Airplane and the Two Way Web do
109not exist; they are a series of user-interface mockups and a vision
110for what a new version of the web could look like. This paper
111explains the vision by presenting the major portions of this new
112network and providing a UI walkthrough.<br>
113<br>
114</p>
115<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
116 size="5" style="font-size: 20pt;"><b><a name="prior_work">Prior
117Work</a></b></font></p>
118<p style="margin-bottom: 0in;">Unifying editing and community into the
119browser is not new; it is an integral piece of Tim Berners Lee's
120vision for the web. The first web browser, <span
121 style="font-style: normal;">WorldWideWeb
122for the NeXT machine, included an editor and annotation tools. Other
123prior work on editing and the web includes Ward Cunningham's
124WikiWiki;
124 the Netscape Communicator suite of tools, which included an
125editor, email client, news client, and browser; and Dave Winer's
126work with Edit this Page, Manila, and XML-RPC. The blogging
127community has also been exploring similar ideas in the context of
128blogging. </span>
129</p>
130<p style="margin-bottom: 0in;"><span style="font-style: normal;">Collaborative
131hypertext is also not new; Douglas Engelbart included it in his </span>NLS/Augment<span
132 style="font-style: normal;"><span style="font-style: italic;">
133</span>presentation and system, while Ted Nelson describes a vision for
134a
135collaborative web of documents and editing in his </span>Xanadu<span
136 style="font-style: normal;">
137vision. </span>
138</p>
139<p style="margin-bottom: 0in;">Work has also
140occurred on turning a P2P network of nodes into a decentralized
141storage system for ease of publishing; some example systems are
142MojoNation, MNet, and FreeNet. The history of
143unified collaboration tools is also long, including such software as
144Lotus Notes and
145Groove.<br>
146<br>
147</p>
148<p style="margin-bottom: 0in; text-align: left;"><font size="5"
149 style="font-size: 20pt;"><b><a name="overview">Paper
150Airplane &amp; The Two Way Web</a></b></font></p>
151<p style="margin-bottom: 0in;">The vision of Paper Airplane and the
152Two Way Web is composed of the following major pieces: Instant Site
153Creation, the P2P Mesh, the Editor, Instant Messaging, the Smart
154Browser, and the Two Way Web Directory. </p>
155<p style="margin-bottom: 0in;">First is a web browser that supports
156<b>Instant Site Creation</b> by including everything
157necessary to create and serve web sites; there is no separation 
158between browser and server. Every browser is automatically a server
159and can handle requests for web sites, and includes wizards for
160creating sites. The Instant Site Creation tools also support the
161full spectrum of public and private, allowing everything from
162completely private work groups to completely editable public sites.</p>
163<p style="margin-bottom: 0in;">Once the site is set up and users are
164viewing pages, they can use <span style="font-weight: bold;">The Editor</span>
165to create and edit pages.<b><span style="font-weight: bold;"> </span></b>The
166Editor<span style="">
167is a full-featured word processor built into the browser, an
168Internet-focused light office suite. Unlike existing packages such as
169Microsoft Word, this new editor is focused on
170web-based collaboration rather than printing pretty documents. Further,
171this Internet-centric editor has one click editing and
172saving; no more FTP or uploading files. Editing and saving documents
173is now similar to WikiWikis, but far more powerful and brought into
174the browser.</span></p>
175<p style="margin-bottom: 0in;"><b>Instant
176Messaging</b> is integrated into every web site, including the
177editor. Every web site now supports instant messaging, so that as
178you browse a site you can communicate with that site's members. You
179can edit documents in the editor while communicating with others who
180are also editing that document, collaboratively creating a page using
181synchronous edit tools.
182Further, instant messaging for a site hooks into how public or
183private you decide to make your web community during the Instant
184Site Creation process, empowering site creators to choose how they want
185instant messaging to work.<br>
186</p>
187<p style="margin-bottom: 0in;"><b>The Smart Browser</b><span style="">
188is a new concept for the browser's relationship with a site. The
189browser now includes many things that used to be on the server,
190standardizing and making many common tasks much simpler across the
191web. For example, the browser includes single sign-on, so that users
192can sign into the browser itself on startup and then authenticate
193against other sites automatically. The Smart Browser vision also
194includes many tools for working with and viewing web sites in much
195more sophisticated ways, including searching, tagging pages, viewing
196pages by tags, tracking site changes, automatic indexing, and more.</span></p>
197<p style="margin-bottom: 0in;"><b>The Two Way Web
198Directory</b><span style=""> is a Yahoo-like portal
199that is decentralized and which makes it easy for users to find and
200search the Two Way Web. During site creation using the Instant Site
201Creation tools inside the browser, users can choose up to three tags
202to describe their site, such as <i>Politics </i><span
203 style="font-style: normal;">and </span><i>Campaign Finance Reform</i><span
204 style="font-style: normal;">,
205for example. This information is stored in the P2P Mesh in such a
206way that a Yahoo-like index can be shown to end-users in the browser,
207generated from all of the tags.&nbsp; This directory also supports
208Google-style searching.&nbsp; No one company or entity controls this
209virtual Yahoo; it appears to the end-user as a centralized, easy to
210use website but is in fact a fantasy, a creation put together
211by the Paper Airplane browser while communicating in the P2P Mesh.</span></span></p>
212<p style="margin-bottom: 0in; font-style: normal;">The browser hooks
213into a
214peer-to-peer network of all other Paper Airplane browsers that are
215running named the <b>P2P Mesh</b>. The Two Way Web is actually a
216virtual illusion created from all running Paper Airplane browsers, a
217co-creation of many browsers autonomously creating a P2P Mesh. These
218browsers work cooperatively to do routing, distributed naming,
219automatic provisioning of storage and replication, etc. When a user
220wants to create or save a website using the Paper Airplane browser,
221they do
222not have to worry about storage or uploading files; Paper Airplane
223works with the cooperative P2P Mesh to
224automatically get the user started without having to know how to set
225up a web server, save files, or configure DNS.<br>
226<br>
227</p>
228<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
229 size="5" style="font-size: 20pt;"><b><a name="walkthrough">Walkthrough</a></b></font></p>
230<p style="margin-bottom: 0in; font-style: normal;">
231<font size="3">This walkthrough describes the five major pieces of
232Paper Airplane: Instant Site Creation, The Editor, Instant Messaging,
233The Smart Browser, and the Two Way Web Directory.</font></p>
234<p style="margin-bottom: 0in; font-style: normal;"><br>
235</p>
236<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
237 size="5"><b><a name="instant_site_creation">Instant
238Site Creation</a></b></font></p>
239<p style="margin-bottom: 0in; font-style: normal;">
240<font size="3">At first glance Paper Airplane looks like a normal
241browser, but with one extra piece, a special toolbar that is the
242jumping off point for accessing an extensive suite of tools for the
243creation of advanced online communities, collaboration, and editing:</font></p>
244<p style="margin-bottom: 0in; font-style: normal; text-align: center;">
245<font size="3"><img style="width: 1024px; height: 768px;"
246 alt="View Mode" src="http://codinginparadise.org/paperairplane/images/viewmode.png"><br>
247</font></p>
248<p style="margin-bottom: 0in; font-style: normal;">
249<font size="3">The first major step in empowering users to collaborate
250is to make it drop dead simple to create online web sites. To do
251this, users simply click on the New Site Button in the Edit toolbar:<br>
252</font></p>
253<p style="margin-bottom: 0in; font-style: normal; text-align: center;">
254<font size="3"><img style="width: 1015px; height: 44px;"
255 alt="View Mode - Edit Toolbar" src="http://codinginparadise.org/paperairplane/images/viewmode_edit_toolbar.png"><br>
256</font></p>
257<p style="margin-bottom: 0in; font-style: normal;">
258<font size="3">Clicking the New Site Button leads a user to the New
259Site Wizard. This wizard guides users through everything necessary
260to create advanced online collaborative web sites. In several simple
261steps a user can choose a domain name and ending from an expanded,
262new domain name system called DisDNS; enter tags that will be used to
263autocategorize their site later in the Two Way Web Directory; and
264choose how public or private they would like to make their site. </font>
265</p>
266<p style="font-style: normal;"><font size="3">You
267may be familiar with domain endings from the older World Wide Web,
268such as .com and .org. This system is fraught with problems: it is
269beauracratic; the endings that are available are tightly restricted;
270creating and registering domain names is expensive and
271time-consuming; and the system itself is controlled by an
272un-accountable international organization. <i>Paper Airplane</i>
273leaves this system in place for older web sites, but replaces it for
274the new Two Way Web.</font></p>
275<p>This new domain name system, known as the Distributed Domain Name
276System (DisDNS), brings a host of new, easy to use capabilities to
277users. First, it now includes hundreds of endings, such as .love,
278.environment, .politics, and more. For example, users can create Two
279Way Web Sites such as <i>www.nike.laborpolicy </i><span
280 style="font-style: normal;">and
281</span><span style="text-decoration: none;"><i>www.microsoft.antitrust</i><span
282 style="font-style: normal;">,
283or could s</span></span>hare their online poetry community with the
284world at <i>www.poetry.community. </i>Users can type these new
285domain endings right into the <span style="font-style: normal;">Paper
286Airplan</span>e<i> </i>browser to reach their Two Way Web Sites, just
287like normal sites. Users are guided in choosing a domain name and
288ending in the New Site Wizard:</p>
289<p style="margin-bottom: 0in; font-style: normal; text-align: center;">
290<font size="3"><img style="width: 608px; height: 475px;"
291 alt="New Site Wizard - Choose Name"
292 src="http://codinginparadise.org/paperairplane/images/new_site_wizard_choose_name.png"><br>
293</font></p>
294<p style="margin-bottom: 0in; font-style: normal;">
295<font size="3">This step of the wizard even makes it possible for users
296to create entirely new Top Level Domain endings!</font></p>
297<p style="margin-bottom: 0in; font-style: normal;">
298<font size="3">Once a domain name is chosen, a user then chooses
299several tags for categorizing their site. These tags are totally up
300to the user and will be used later to create a spontaneous folksonomy
301directory of new Two Way Web Sites that other individuals can use to
302find sites that match their interests:<br>
303<br>
304</font></p>
305<div style="text-align: center;">
306<font size="3"><span style="font-weight: bold;"><img
307 style="width: 608px; height: 475px;"
308 alt="New Site Wizard - Choose Tags"
309 src="http://codinginparadise.org/paperairplane/images/new_site_wizard_choose_tags.png"></span></font><br>
310<font size="3"><span style="font-weight: bold;"></span></font></div>
311<p style="margin-bottom: 0in; font-style: normal;"><font size="3">The
312New Site Wizard also allows a user to select how
313public or private they would like to make a web site. Collaboration
314should support many different modalities of public and private, from
315completly open and anarchistic Wiki-like sites to absolutely closed
316private Intranet-style sites. </font>
317</p>
318<p style="font-style: normal;"><font size="3">Paper
319Airplane achieves this by defining several simple roles that users
320can have and how users are given these roles. Two Way Web Sites
321have three roles: <i>Managers</i>, <i>Members</i>, and <i>Non-Members</i>.
322<i>Managers</i> can add and remove people, and can edit and delete
323pages, while <i>Members</i> can create and edit pages, but can not
324delete them or manage other members. What <i>Non-Members</i> can and
325can't do depend on how open or closed you decide to make your site.</font></p>
326<p style="font-style: normal;"><font size="3">The
327New Site Wizard allows site creators to define how members are given
328roles and how much power non-members have in the site:</font></p>
329<p style="font-style: normal; text-align: center;"><font size="3"><img
330 style="width: 608px; height: 475px;"
331 alt="New Site Wizard - Choose Policy"
332 src="http://codinginparadise.org/paperairplane/images/new_site_wizard_choose_policy.png"><br>
333</font></p>
334<p style="font-style: normal;"><font size="3">Four
335different kinds of sites are possible using this wizard:</font></p>
336<ul>
337  <li>
338    <p style="font-style: normal;"><font size="3"><b>Super Public</b>,
339which is basicly akin to a completely open, Wiki-like site where
340everyone is automatically a <i>Manager</i> and can therefore do
341anything they like to the site</font></p>
342  </li>
343  <li>
344    <p style="font-style: normal;"><font size="3"><b>Public Sites</b>,
345where anyone can become a <i>Manager</i> after registering; this is
346almost as open as Super Public but creates a small amount of friction.</font></p>
347  </li>
348  <li>
349    <p style="font-style: normal;"><font size="3"><b>Public Restricted</b>,
350where anyone can view the site but existing <i>Managers</i> must
351approve their joining in order for them to become <i>Managers</i> and <i>Members</i>
352themselves.</font></p>
353  </li>
354  <li>
355    <p style="font-style: normal;"><font size="3"><b>Private Sites</b>,
356in which no one can even view the site, much less edit it, unless they
357were pre-invited by existing <i>Managers</i>.</font></p>
358  </li>
359</ul>
360<p style="font-style: normal;"><font size="3">When
361a user is finished with this Wizard, the Paper Airplane browser
362creates the Two Way Web Site on the user's local machine and in the
363P2P Mesh and registers the new domain name in the DisDNS system. Users
364do not have to find a server provider, storage, or fish out
365their credit cards to pay and register a domain name, since the peer
366network itself resolves and finds domain names (more on this in the
367section titled P2P Mesh). </font>
368</p>
369<p style="font-style: normal;"><font size="3">Finally,
370the user is presented with the first, new, unedited page of their Two
371Way Web Site that provides getting started options:</font></p>
372<p style="font-style: normal; text-align: center;"><font size="3"><img
373 style="width: 1024px; height: 768px;" alt="Newly Created Site"
374 src="http://codinginparadise.org/paperairplane/images/newly_created_site.png"><br>
375</font></p>
376<p style="font-style: normal;"><font size="3">At
377this point, a user can now engage The Editor to start editing and
378creating their site.</font></p>
379<p style="font-style: normal;"><br>
380</p>
381<p style="font-style: normal; text-align: left;"><font size="5"><b><a name="editor">The
382Editor</a></b></font></p>
383<p style="font-style: normal;"><font size="3">Every
384web page you visit in a Two Way Web Site can be edited by pressing
385the <b>Edit Page</b> icon, if the site is public or if you are a
386member:</font></p>
387<p style="font-style: normal; text-align: center;"><font size="3"><img
388 style="width: 1015px; height: 44px;" alt="View Mode - Edit Toolbar"
389 src="http://codinginparadise.org/paperairplane/images/viewmode_edit_toolbar.png"><br>
390</font></p>
391<p style="font-style: normal;"><font size="3">Once
392pressed, the browser shifts into an editor, where this page can be
393edited in place without shifting into a different program or spawning
394a new window:</font></p>
395<p style="font-style: normal; text-align: center;"><font size="3"><img
396 style="width: 1024px; height: 768px;" alt="Edit Mode"
397 src="http://codinginparadise.org/paperairplane/images/editmode.png"><br>
398</font></p>
399<p style="font-style: normal;"><font size="3">This
400editor is a full featured office suite that is focused on creating
401collaborative web pages rather than printing pretty documents, as
402existing office suites like Microsoft Word are. First, the editor is
403WYSIWYG, so creating and editing pages is easy for mainstream users.
404Second, saving a page is as easy as pressing the Save Page button in
405the toolbar:</font></p>
406<p style="font-style: normal; text-align: center;"><font size="3"><img
407 style="width: 43px; height: 44px;" alt="Save Button"
408 src="http://codinginparadise.org/paperairplane/images/save_button.png"><br>
409</font></p>
410<p style="font-style: normal;"><font size="3">Pressing
411this button causes the page to transparently save into the remote web
412site; the user does not have to hassle with uploading any files, FTP,
413etc. The browser itself determines the best way to save the page,
414such as into the P2P Mesh.</font></p>
415<p style="font-style: normal;"><font size="3">Just
416as Macromedia Fireworks is a hybrid editor, which combines vector and
417bitmap editing in one application, the Paper Airplane Editor is a
418hybrid editor, merging together both standard "typewriter"
419editors such as Microsoft Word and page layout editors such as Adobe
420Layout. Users can access the toolbar at the top of the browser to drop
421text
422boxes, images, and tables into a document, and then manipulate them
423like a traditional word processing application such as Microsoft
424Word.&nbsp; They can also work with items in the page as objects using
425the Select button and move them around arbitrarily, like a page layout
426application:<br>
427</font></p>
428<p style="font-style: normal; text-align: center;"><font size="3"><img
429 style="width: 42px; height: 44px;" alt="Select Button"
430 src="http://codinginparadise.org/paperairplane/images/select_button.png"><br>
431</font></p>
432<p style="font-style: normal; text-align: left;"><font size="3">When
433the page is first displayed the cursor is placed at
434the upper left corner of the editing document, like a typewriter;
435beginning users can simply start typing and using the editor in more
436traditional ways. The power of this approach is that new users can
437get started quickly, while power users can quickly jump back and
438forth between the two modalities, using word processor and page
439layout semantics where each makes sense.</font></p>
440<p style="font-style: normal;"><font size="3">As a
441user adds items to their document, such as text blocks or images, the
442left-hand sidebar updates showing what can be changed to format this
443object,
444such as fonts, colors, borders, etc. This means that users no longer
445have to search through endless dialog boxes to figure out common
446formatting operations; everything is immediately accessible and
447changeable to the user, again much more like Macromedia Fireworks
448than traditional word processing applications. The UI becomes much
449more flat, with the tools and properties that are necessary to get
450any job done always present, leading to much faster productivity and
451usability:<br>
452</font></p>
453<p style="font-style: normal; text-align: center;"><font size="3"><img
454 style="width: 201px; height: 600px;" alt="Edit Mode - Sidebar"
455 src="http://codinginparadise.org/paperairplane/images/editmode_sidebar.png"><br>
456</font></p>
457<p style="font-style: normal;"><font size="3">Using
458the editing toolbar, users also have access to an extensive suite of
459tools. Notes can be dropped into a document; notes are like
460mini-forums, and can record specific questions about content in a web
461page.&nbsp; Notes can be edited and replied to without shifting into
462the full edit mode to support lighter weight collaboration than full
463page editing:<br>
464</font></p>
465<p style="font-style: normal; text-align: center;"><font size="3"><img
466 style="width: 1024px; height: 768px;" alt="Comment in View Mode"
467 src="http://codinginparadise.org/paperairplane/images/comment.png"><br>
468</font></p>
469<p style="font-style: normal;"><font size="3">Users
470can reply and jump through all of the notes in a page.</font></p>
471<p style="font-style: normal;"><font size="3">The
472Draw, Quickshapes, and Symbols buttons drop down to show common tools
473needed for
474diagramming and brainstorming, such as lines, diamonds, etc. so that
475these symbols can
476be placed into a document for discussion, ala Visio, but without having
477to leave the browser:<br>
478</font></p>
479<p style="font-style: normal; text-align: center;"><img
480 style="width: 174px; height: 43px;" alt="Diagram Buttons"
481 src="http://codinginparadise.org/paperairplane/images/diagram_buttons.png"><br>
482</p>
483<p style="font-style: normal;"><font size="3">The Signature button
484allows a user to
485select either the entire page or a portion of it to digitally sign
486it, drawing on the user's authentication information that is needed
487for single sign on, as described in the section The Smart Browser:<br>
488</font></p>
489<p style="font-style: normal; text-align: center;"><img
490 style="width: 58px; height: 44px;" alt="Signature Button"
491 src="http://codinginparadise.org/paperairplane/images/signature_button.png"><br>
492</p>
493<p style="font-style: normal;"><font size="3">This makes it possible
494for users to assert that particular portions
495of a document or the entire page was created by them. The selected
496portion is digitally signed and saved transparently with the page, and
497the browser displays whether the signature is valid
498automatically while others are viewing a page. <br>
499</font></p>
500<p style="font-style: normal;"><a name="smart_templates"></a><font size="3">The Editor also comes
501with common
502templates, such as ones for resumes, business letters, etc., but
503these templates are special: they are Smart Templates. These
504templates look just like common Microsoft Office templates, with
505fields to guide the user in entering common information such as their
506name, job position sought, etc. while editing and creating a
507document. However, when a page is edited with a Smart Template we
508record the semantic information of each field when we save the web
509page. For example, if we are dealing with a resume template, with
510fields for the person's name, work experience, etc. as the user fills
511this information out we are recording what <i>type</i> of information
512this is, which is then saved as a simple XML overlay with the HTML,
513similar
514to Microsoft's InfoPath application. The Two Way Web then becomes
515not only a collaborative and P2P web, but it is also a semantic one in
516that many of the pages will have enough bootstrap
517information to create custom search engines and aggregators to find
518specific kinds of
519content, such as resume search engines. The Editor also includes
520tools for users to create their own Smart Templates.&nbsp; <br>
521</font></p>
522<p style="font-style: normal;"><font size="3">A smart template for a
523purchase order.&nbsp; <br>
524</font></p>
525<p style="font-style: normal; text-align: center;"><font size="3"><img
526 style="width: 1024px; height: 768px;" alt="Smart Template"
527 src="http://codinginparadise.org/paperairplane/images/smart_template.png"><br>
528</font></p>
529<p style="font-style: normal;"><font size="3">Notice that this smart
530template includes two kinds of
531fields; the light blue fields are those that can be changed by the
532editing user and which record semantic information when saved, while
533the light gray fields are autocalculated by the smart template itself,
534such as a total price for this purchase order or a date field.</font></p>
535<p style="font-style: normal;"><font size="3">Just
536like a Wiki the editor also includes autolinking. Every page you
537create has a title:</font></p>
538<p style="font-style: normal; text-align: center;"><font size="3"><img
539 style="width: 803px; height: 28px;" alt="Cookie Trail"
540 src="http://codinginparadise.org/paperairplane/images/cookietrail.png"><br>
541</font></p>
542<p style="font-style: normal;"><font size="3">This
543title is unique to each page and can be changed during page editing.
544While editing a page, if you enter the special characters [[ around
545any title, followed by a page name, then ]] again, the editor will
546automatically hyperlink that text to a page with that name or add a
547"Create" button at the end if it does not exist yet.&nbsp; <br>
548</font></p>
549<p style="font-style: normal;"><font size="3">The Paper Airplane
550browser and editor also support tabs, similar to FireFox.&nbsp; The
551browser can have several tabs open showing different web sites and
552pages, with some of them being in edit mode.&nbsp; The user can jump
553between tabs to quickly compile information while editing, for example,
554or can be co-editing several pages at once either alone or with others
555(see the Instant Messaging section for details on real-time
556collaborative editing).&nbsp; Autolinking and the tabs work seamlessly
557together as well.&nbsp; As page names are autolinked in the editor
558while you are typing, the user can choose to open the auto-linked page
559into a new browser tab to browse this new page or begin editing it as
560well.&nbsp; This combination of tags and autolinking </font><font
561 size="3">make working in the editor feel very
562stream of consciousness and organic.<br>
563</font></p>
564<p style="font-style: normal;"><font size="3">The Editor also brings to
565Wikis something long missing: autosave. At
566regular intervals the editor saves the user's contents as drafts that
567can be later retrieved if the browser crashes or the user
568accidentally navigates away. Never lose your creative work again.</font></p>
569<p style="font-style: normal;"><font size="3">When
570a page is saved or created, it is stored into the P2P Mesh.</font></p>
571<p style="margin-bottom: 0in; font-style: normal;">
572<br>
573</p>
574<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
575 size="5" style="font-size: 20pt;"><b><a name="p2p_mesh">The
576P2P Mesh</a></b></font></p>
577<p style="margin-bottom: 0in; font-style: normal;">
578<font size="3">Paper Airplane uses a P2P Mesh to achieve much of its
579functionality in a transparent manner so end users do not have to
580struggle with common administrative tasks. Peer-to-peer means that
581ordinary end-users machines are used to co-create the network. Napster
582did this with sharing music files, while Skype does it with
583finding and routing Internet voice telephone calls using normal
584end-user machines. The upshot is that very affordable networks can be
585created in a decentralized, automatic manner.</font></p>
586<p style="margin-bottom: 0in; font-style: normal;">
587<font size="3">Paper Airplane uses a P2P Mesh to achieve the following
588functions: routing around network blockages, such as NATs and
589firewalls; a domain name system named DisDNS for storing DNS names
590and resolving them; a presence and communication fabric for instant
591messaging; and virtualized storage using available P2P nodes for
592saving and replicating web sites. The nodes in this P2P network are the
593Paper
594Airplane browsers themselves.</font></p>
595<p style="margin-bottom: 0in; font-style: normal;">
596<br>
597</p>
598<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
599 size="5" style="font-size: 20pt;"><b><a name="instant_messaging">Instant
600Messaging</a></b></font></p>
601<p style="margin-bottom: 0in; font-style: normal;">
602<font size="3">As users are browsing a site, they will see other users
603that are also members of this site in their sidebar.&nbsp; This IM
604client is a simple, AOL Instant Messenger type
605client where users can communicate one-on-one or form simple group
606conferences to communicate as they browse the site.&nbsp;&nbsp; </font><font
607 size="3">The IM sidebar respects the type of site it is attached to,
608such as whether it is Super-Public or Private.&nbsp; If a site is
609Super-Public then everyone on the site&nbsp; is shown, while a Private
610site reveals private members only.&nbsp; A Restricted Public site would
611only show those who have joined the site, reducing presence clutter in
612the sidebar and allowing members to focus on each other to work
613productively.<br>
614</font></p>
615<p style="margin-bottom: 0in; font-style: normal;">
616<font size="3">While editing a document, if another user would also
617like to edit this document a popup will appear saying that another
618user is requesting to edit this document. If you agree, the editor
619changes into a collaborative editor, with the IM client located in the
620sidebar along with
621the same formatting palletes that were discussed in the section The
622Editor. Every user is assigned a color, and as you edit, add, and
623remove content and objects the background color of these sections is
624different, similar to SubEthaEdit. Every user also gets a
625differently colored cursor so they can see what the other is editing.
626<br>
627</font></p>
628<p style="margin-bottom: 0in; font-style: normal;"><font size="3">The
629combination of shared editing with real time communication is
630extremely powerful, especially since the tools for single and
631collaborative editing are almost identical.&nbsp; The end result is
632that users can do private and communal editing without learning a new
633skill set.<br>
634</font></p>
635<p style="margin-bottom: 0in; font-style: normal;">
636<br>
637</p>
638<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
639 size="5" style="font-size: 20pt;"><b><a name="smart_browser">The
640Smart Browser</a></b></font></p>
641<p style="margin-bottom: 0in; font-style: normal;">
642<font size="3">Tools for navigation in browsers progressed rapidly in
643the early days of the web, until they finally froze at their current
644state in about 1995 and have remained relatively unchanged. This is sad
645as the brower could standardize and embed
646many tools for much more sophisticated ways of dealing with web
647site</font><font size="3">s</font><font size="3">, especially around
648collaboration.&nbsp; It's time for innovation.</font></p>
649<p style="margin-bottom: 0in; font-style: normal;">
650<font size="3">Paper Airplane takes this to the next level with the
651concept of the Smart Brower, where the browser embeds standard
652navigation controls across the Two Way Web Sites it creates. This
653section discusses how the Smart Browser makes end-user's lives easier.</font></p>
654<p style="margin-bottom: 0in; font-style: normal;">
655<font size="3">First, Paper Airplane embeds single signon. When a
656user first starts Paper Airplane they authenticate themselves against
657the browser, using a signon dialog to unlock a public/private
658keypair that is stored on the local machine. This public/private
659keypair is linked to a handle, similar to an AOL screen name, that is
660globally unique.&nbsp; It does not establish that they are a specific
661person but rather that they have a particular handle.&nbsp; Then, as
662they navigate
663to each Two Way Web Site, the browser authenticates them in the
664background using these keypairs against the remote site.</font></p>
665<p style="margin-bottom: 0in; font-style: normal;">
666<font size="3">Single signon goes hand in hand with a standard way to
667join and unjoin Two Way Web Sites. At any site, if the site creator
668made it open, a user can press the Join button to become a member of
669this site:</font></p>
670<p style="margin-bottom: 0in; font-style: normal; text-align: center;">
671<font size="3"><img style="width: 1015px; height: 44px;"
672 alt="View Mode - Edit Toolbar"
673 src="http://codinginparadise.org/paperairplane/images/viewmode_edit_toolbar.png"></font></p>
674<p style="margin-bottom: 0in; font-style: normal;">
675<font size="3">When this is pressed, in the background the browser
676sends the user's public key to the remote site to be used later for
677single sign on activities, editing, and site roles. </font>
678</p>
679<p style="margin-bottom: 0in; font-style: normal;">
680<font size="3">The next standardized interface in the smart browser is
681a standard way to track site changes, which is a panel that appears
682in the left-hand sidebar when selected:</font></p>
683<p style="margin-bottom: 0in; font-style: normal;">
684<font size="3"><img style="width: 1024px; height: 768px;"
685 alt="New Changes Sidebar" src="http://codinginparadise.org/paperairplane/images/new_changes.png"><br>
686<span style="font-weight: bold;"><br>
687</span>This panel is created by using an RSS stream from the
688remote site, and can track recent site edits using the Paper Airplane
689Editor, or if the remote site is a blog recent updates to a blog or
690corporate site, for example. When users go to a new site they won't
691have to wonder what has changed; the Recent Changes panel makes it
692easy for them.<br>
693</font></p>
694<p style="margin-bottom: 0in; font-style: normal;"><font size="3">Members
695of sites can also easily manage roles with the Members sidebar:<br>
696</font></p>
697<p style="margin-bottom: 0in; font-style: normal; text-align: center;"><font
698 size="3"><img style="width: 1024px; height: 768px;"
699 alt="Members Sidebar" src="http://codinginparadise.org/paperairplane/images/members.png"><br>
700</font></p>
701<p style="margin-bottom: 0in; font-style: normal;">
702<font size="3">Every page also has a control so that users can tag it
703with a given topic, such as "important", &#8220;todo", or
704&#8220;linux&#8221;, for example:<br>
705</font></p>
706<p style="margin-bottom: 0in; font-style: normal; text-align: center;"><font
707 size="3"><img style="width: 803px; height: 28px;" alt="Cookie Trail"
708 src="http://codinginparadise.org/paperairplane/images/cookietrail.png"><br>
709</font></p>
710<p style="margin-bottom: 0in; font-style: normal;"><font size="3">Then,
711by pressing the Navigator section in the
712sidebar they can view all of the pages in a web site sorted by
713Tag, by Name, and more. This Navigator makes it possible for users
714to quickly jump to new adhoc categories created by other users,
715sorted into bottom-up categories using the tagging control. The
716Navigator also includes other powerful ways to view a web site:
717Recently Edited, which shows recently edited pages; and My Recent
718Pages, which shows your own recently edited or viewed pages so that
719you can quickly jump back to them.&nbsp; The end result is that
720structure is brought to collaborative sites in a bottom-up, organic
721manner rather than through top-down controls that quickly become out of
722date. </font>
723</p>
724<p style="margin-bottom: 0in; font-style: normal;">
725<font size="3">The Navigator also exposes a sorting type called By
726Index, which takes a bit of explaining but which is very powerful. As
727pages are created and edited, an automatic index is created in the
728background. When a user views a site in the Navigator By Index, they
729will see an automatic index similar to the index in the back of a
730book or the one in Microsoft Help defining all the words, topics, and
731relations gleaned from the site itself. Most importantly, if your
732site members have used Smart Templates to create pages that have
733simple semantic information in them, then we now have higher-level
734metadata to hook our index on to. The index can be an extremely
735powerful way for users to look into "the back of the book"
736in a sense and jump right to the page and section they need to read or
737edit.
738Having an index to view a site is one of the payoffs for using Smart
739Templates when editing and creating your collaborative site.<br>
740<br>
741</font><br>
742</p>
743<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
744 size="5" style="font-size: 20pt;"><b><a name="two_way_web_directory">The
745Two Way Web Directory</a></b></font></p>
746<p style="margin-bottom: 0in; font-style: normal;">
747<font size="3">Creating a new decentralized, collaborative web is
748useless if users don't have an easy way to find and navigate to
749content that interests them. The challenge, however, is how to
750provide a centralized place for users to search and find content
751without creating a single point of failure or control in the network.
752The Two Way Web Directory solves this in several ways.</font></p>
753<p style="margin-bottom: 0in; font-style: normal;">
754<font size="3">The Two Way Web Directory is actually a virtual portal
755built into the browser which pulls its data from the P2P Mesh and the
756tagging metadata entered during site creation in the New Site Wizard.
757This site looks and feels something like a centralized Yahoo,
758but is in fact completely peer-to-peer. </font>
759</p>
760<p style="margin-bottom: 0in; font-style: normal;">
761<font size="3">The user-interface for the Two Way Web Directory has two
762major ways of allowing users to find and navigate to sites. The
763first is through search, so that users can enter terms into a
764Google-like search box and find sites that match their interests. The
765search engine actually initiates a search into the P2P Mesh,
766using the various kinds of metadata and content that were entered
767into Two Way Web Sites as described above, such as site tags, page
768tags, automatic indexation, etc. The automatic indexation plays a
769dual role of making it possible for every site to be quickly
770searched, since they are already all indexed.</font></p>
771<p style="margin-bottom: 0in; font-style: normal;">
772<font size="3">The other major user-interface is for an automatic
773Yahoo-like directory to be created using site tags, a folksonomy:<br>
774<br>
775</font></p>
776<div style="text-align: center;"><img
777 style="width: 1024px; height: 768px;" alt="The Two Way Web Directory"
778 src="http://codinginparadise.org/paperairplane/images/directory.png"><br>
779</div>
780<p style="margin-bottom: 0in; font-style: normal;"><font size="3">These
781site tags are organized alphabetically and by
782popularity, using a Flickr-like UI. The P2P Mesh itself also stores
783information so that Related Tags can be gleaned, allowing users to jump
784from one site tag to another to find other sites that match
785their interests.</font></p>
786<p style="margin-bottom: 0in; font-style: normal;">
787<br>
788</p>
789<p style="margin-bottom: 0in; font-style: normal; text-align: left;"><font
790 size="5" style="font-size: 20pt;"><b><a name="conclusion">Conclusion</a></b></font></p>
791<p style="margin-bottom: 0in; font-style: normal;">
792<font size="3">This paper began with a series of questions: What if
793transparent collaboration were a part of web browsers and the web
794itself? What would an extremely integrated network look like, with
795instant messaging, site creation, and more all integrated into one
796whole? Finally, what would this network look like if despite the
797integration it was extremely decentralized? </font>
798</p>
799<p style="margin-bottom: 0in; font-style: normal;">
800<font size="3">Paper Airplane and the Two Way Web are one answer to
801these questions, empowering end users with a powerful suite of
802collaboration technologies: Instant Site Creation provides one-click
803production of online sites; The Editor is a powerful tool to get work
804done with others and an answer to what an Internet-centric office
805suite could look like; the P2P Mesh makes it possible to
806transparently provide site creation, storage, naming, and saving with
807zero end-user hassle; the Instant Messaging sidebar allows real-time
808communication with site members while browsing and during
809co-operative editing; the Smart Browser technologies standardize
810navigation tools necessary to make these collaborative sites
811accessible and organized in a bottom-up, organic process; and
812finally, the Two Way Web Directory provides users with a virtual
813centralized location to search and find sites that match their
814interests.&nbsp; Even better, all these components work together to
815create a system that is more powerful than the sum of its parts.<br>
816</font></p>
817<p style="margin-bottom: 0in; font-style: normal;">
818<font size="3">Once a vision like Paper Airplane is enunciated,
819however, it is
820important to not try to build it. Instead, bits and pieces of it
821should be taken and drastically simplified, with a strong focus on
822pragmatism and integration into existing systems. Ted Nelson's
823Xanadu is a cautionary tale of what can happen when someone attempts
824to build a grand vision; grand visions are meant to stimulate
825thinking in new directions, not to be built. </font>
826</p>
827<p style="margin-bottom: 0in; font-style: normal;">
828<font size="3">Though this paper is focused on creating a vision that
829pushes our current technological capabilities, it is useful to ask
830whether the system could be built today as described. Significant
831engineering and social challenges exist in creating the full Paper
832Airplane and Two Way Web; peer-to-peer technology is
833certainly not up to the job of building the kind of P2P Mesh
834described, and fundamental reliability, security, and performance
835issues might prevent it from ever being created. The current web is
836also quite entrenched, and current trends are towards smaller and
837lighter web browsers that integrate less features rather than more
838monolithic, integrated ones. Some of the metadata features, such as
839site and page tagging and the Smart Templates, might be susceptible
840to spamming and gaming.</font></p>
841<p style="margin-bottom: 0in; font-style: normal;">
842<font size="3">However, a great deal of very pragmatic systems can fall
843out of Paper Airplane. This vision can be sliced and diced into more
844realistic forms in many different ways that are all quite
845interesting. Some possibilities:</font></p>
846<ul>
847  <li>
848    <p style="margin-bottom: 0in; font-style: normal;"> <font size="3">Instead
849of integrating these technologies into the browser, they can be brought
850into existing server-side Wiki systems using DHTML/Ajax technologies,
851with the P2P components dropped in favor of conventional client/server
852systems. For example, the Navigator and Instant Messenger sidebars can
853be
854created with advanced HTML and served-up along side a next-generation
855Wiki that has a much more powerful editor, similar to the advanced
856editor described in this paper.</font></p>
857  </li>
858  <li>
859    <p style="margin-bottom: 0in; font-style: normal;"> <font size="3">Portions
860of the Smart Browser can be broken into seperate, small FireFox plugins
861developed by different people, with simple server-side APIs and
862standards for how these browser-side Smart Browser widget work with
863the remote site. For example, if a Search Smart Browser component is
864integrated into the browser, remote web sites could implement a simple
865RESTian or XML-RPC API to be searched in a consistent way
866by this particular Smart Browser component. </font> </p>
867  </li>
868  <li>
869    <p style="margin-bottom: 0in; font-style: normal;"> <font size="3">The
870Paper Airplane Browser component could be maintained, but could be
871modified to work with centralized hosting services run by Google or
872Yahoo rather than P2P systems, for example. In this case users and
873businesses get a powerful collaboration-focused next-generation web
874browser, but all the functions that were handled by the P2P system
875instead happen in the centralized computing cluster maintained by a
876business. New APIs to link the browser to the server could be created,
877or could use WebDAV and Dynamic DNS for the New Site Wizard, automatic
878domain naming, and editing
879to maintain portability and fairness when moving between different
880storage providers.</font></p>
881  </li>
882  <li>
883    <p style="margin-bottom: 0in; font-style: normal;"> <font size="3">Paper
884Airplane and the Two Way Web can act as an end-user research goal for
885the pure P2P research that is occuring as part of projects like the
886IRIS
887(Infrastructure for Resilient Internet Systems) NSF program, a very
888strong end-user product to ground theoretical P2P ideas and provide an
889easy to understand, visible justification.</font></p>
890  </li>
891  <li>
892    <p style="margin-bottom: 0in; font-style: normal;"> <font size="3">Aspects
893of the P2P network could remain, but might simply augment and enhance
894the end-user's experience rather than work to replace the existing web.
895For example, if the browser has an Instant Messenger client it could
896use a spontaneous P2P network between all Paper Airplane Browsers for
897presence and routing, so that existing client/server web sites don't
898have to be changed to support a new standard. A P2P Mesh can also be an
899effective way to do DNS-like naming, for example, or act as a kind of
900secondary cache for automatically BitTorrenting files above a certain
901size on the existing web, for example.</font></p>
902  </li>
903</ul>
904<p style="margin-bottom: 0in; font-style: normal;">
905<font size="3">Simple prototypes of the Two Way Web peer network and
906the Paper Airplane browser have been created. An open source
907implementation of the Two Way Web has been created as a prototype
908framework named <a href="http://p2psockets.jxta.org">P2P Sockets</a>.
909P2P Sockets is also an experiment
910in creating a P2P network that exposes an API that is
911familiar to existing programmers, namely the BSD Socket interface. It
912also includes higher level ports of software such as web servers,
913the Java Servlet and JSP APIs, XML-RPC clients and servers, etc. to a
914P2P network, as well as a simple distributed implementation of the
915Domain Name System. </font>
916</p>
917<p style="margin-bottom: 0in;"><span style=""><span
918 style="font-style: normal;"><font size="3">A
919<a href="http://paperairplane.us">simple browser prototype</a> has also
920been created to mimic some of the
921functionality of the Paper Airplane browser. This prototype is a
922Mozilla plugin that allows people to easily create collaborative P2P
923web sites, without setting up servers or spending money. </font></span></span>It
924does this by integrating a web server into the browser itself,
925including tools to create collaborative online communities that are
926stored on the machine. The sites are stored locally on a user's
927machine, and a peer-to-peer network using the P2P Sockets framework is
928created between all of the
929Paper Airplane nodes that are running in order to resolve site names
930and reach normally unreachable peers due to firewalls or NAT devices.
931</p>
932<p style="margin-bottom: 0in; font-style: normal;">
933<font size="3">The Paper Airplane project is now finished, having
934produced a vision and prototypes. Hopefully it has inspired you to
935imagine what a new kind of web might look like.</font></p>
936
937<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
938</script>
938
939<script type="text/javascript">
940_uacct = "UA-998402-1";
941urchinTracker();
942</script>
942
943
944</body>
945
946</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.