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. 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. <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 & 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. This directory also supports 208Google-style searching. 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. 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. 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. <br> 521</font></p> 522<p style="font-style: normal;"><font size="3">A smart template for a 523purchase order. <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. <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. The 551browser can have several tabs open showing different web sites and 552pages, with some of them being in edit mode. 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). Autolinking and the tabs work seamlessly 557together as well. 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. 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. 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. </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. If a site is 609Super-Public then everyone on the site is shown, while a Private 610site reveals private members only. 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. 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. 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. It does not establish that they are a specific 661person but rather that they have a particular handle. 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", “todo", or 704“linux”, 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. 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. 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.