GB2366498A

GB2366498A - Method of bookmarking a section of a web-page and storing said bookmarks

Info

Publication number: GB2366498A
Application number: GB0021078A
Authority: GB
Inventors: Geraint Edwards; Christopher Needham
Original assignee: COPYN Ltd
Current assignee: COPYN Ltd
Priority date: 2000-08-25
Filing date: 2000-08-25
Publication date: 2002-03-06
Also published as: GB0021078D0

Abstract

Portions of mark-up language pages may be stored in an on-line repository. The user selects a portion of a page for storage using a pointer device and an extension to a browser context menu. If the mark-up code for the selected portion corresponds to a predefined meaningful element, the DOM node to which it refers is identified and the node tree traversed to look for meaningful collections of elements, the raw HTML is then extracted and sent to a new window where it can be selected and stored in a remote database. The database is configured to enable a scrapbook like presentation of displayed elements with elements displayed as cards. Cards may be stored in a number of leaves and card parameters, and leaf configurations may be customised by a user. Access rights can be granted to allow elements in a given repository to be viewed by others.

Description

<Desc/Clms Page number 1> Capture, Storage and Retrieval of Markup Elements

This invention relates to the retrieval of content from the Internet , and particularly to the storage and retrieval of that content.

World wide Web bo-rowsers, such as Netscaoe Nav'.qator, hereafter referred to as NN, and Internet Explorer, hereafter re-"'e--red :io as IF, provide functionality to a 4 1 d the web browsing experience. The creators of web browsers recognise that users have particular pages that they wish to revisit, and so incorporate functionality to allow the user to add a page to their "favorite" (IE) or "bookmark" ,NN) 1 - list. --is t_4 #__ `s# t # -s stored - on t,e user' s comi3u:ier (or I network file sys-7-em) in a tree-like h--erarchy, enablina the user to create a simnle classifIcation of information. Each favorite or bookmark is represented by a text description (and in some circumstances a small icon). Users can customise the description of each favorite/bookmark, to a limited extent, with the default being the title of the page. In the latest Version of IF, vers--c- 5, the user car. chanae the --con associated w--th a favorl #:e, but this is somewhat cu-T.bersome; zhe default opt_-#)n is -:c ,.se an --con prov--ded by the we-'- publisher.

Although the bookmark and favorite options are useful, they suffer from a number of disadvantages. There is no mechanism for informing users when pages in the favorites/bock-narks list have become s##ale or theif conten,_ has changed sIgnificantly. However, there Js a func#_- 'o -- -L- 'n IF which allows the user to make a co-ov of a web page and store it off-line, in which case IE can inform the user if the content of the online version has changed from that of the stored copy. The context menut obtained by clicking the right mouse button over a specific item on a page in the MS Windows

operating system provided by Microsoft Corporation enables --he user to save the 'link associated with that individuall item. In NN, the user can bookmark the link associated with an image, and also save the image itself; however "he link and the image are stored as two separate entities. The context menu is launched by different methods in di-fferent operat-ing systems. Furthermore, there are no mechanisms to enable the easy access of bookmarks/favorites from different computers, or to share them with other people, or for a number of -different users to work collabora'#ively on them. However, to a limited extent, and in a cumbersome way, these things can be achieved 'in part by using the impor-#i and export functions for bookmarks/favorites. Recognising the limitations of the favorite/bookmark j-unct-- 'ona'ity _L of web browsers, a number of companies J_ have created alterna,:#ive services and products that attempt to improve on certain aspects of the browser functionality: Backflip, Blink and HotLinks, whose products are available at: www._ackf_ijp.co-r., www.blink.co.m, www.notlinks.com each provide an online implementation of the basic browser bookmark/favorite functionality, together with organisation and search capabilities. The main benefits are that users can access their bookmarks from any computer and, if they choose, share them with other people. The main way of activating the service is for the user to register online and down'-load a simple DHTML scriptlet, which adds the functionality to the user's browser, and adds "Backflip", "Blink" or "EctLinks" buttons to the personal tool bar (IE) or link bar (NN). The other way is for web publishers to opt-in to the service and disiDlay "Backflip", "Blink" or "HotLinks" button to the personal tool bar, IE, or the link bar, NN. The scriptlet does nothing more than

determine the URL of the page being read and send it to a server. The other way is for web pub!--shers to opt-in to the services and display ''Backflip'', ''Blink'' or ''Hczlinks'' icons on their web pages, which a user can click to save a given page to their online collection. Hotlinks can also tell users if pages have expired or are no longer available. .Although these services address some of the disadvantages of browsers discussed above, the user is limited to bookmarking whole pages or frames, rather than links or images within a page. Yahoo! Companion provided by Yahoo, Inc. and available at docs.companiccn.yahoo.com is a package of services, a feature --,f which is called Y!Bookmarks which, like Backflip, Biink or HotLinks, is an online implementation of the basic browser bookmark/favori##e functionality. The service --s activated by the user to registering online and downloading a plug-in, which adds the functional_`##y to zhe -ser's browser. The new fun=_,onality manifes-#is ii#self as a whole new too! bar which includes a Y!Bookmarks button, amongst others. While the implementation is more sophisticated than the other on-line services mentioned above, the benefits and limitations of Y!Bookmarks are --similar to those of Backflip, Blink or HotLinks. clicVu, which can be found at www.clicVu.com is a service which enables users to save banner adverts in an online collection of banner adverts. The main benefit of this service arises from the fact that, on any given web page, -the banner advert(s) are regularly refreshed, so ,.ookmarking the whole page does not save t#he particular adver-7- of in-##erest to the user. Another benefit of t#he service is that the bookmarked items are represented visually in the user's online collection using the original banner advert images. This service requires the

adverti-ser/pubilisher to opt-in and display a "clicVu" icon on their banner adverts, on which the user clicks. Un-1-ike Backf!iQ, Blink, HotL.Jnks and Y!Companion, the user does not have to register with clicVu (though only limited features of the service are available to users who do not register). The service has the disadvantage that it is limited to banner adverts, and only those where the relevant advertiser/publisher has opted in to the service. It allows users to save one specific type of element and --it does not save generic HTML (Hyper Text Mark Up Language) elements, requiring the -publisher/advertiser to opt in. What I's saved -in the user's collection is not ,,#r_der the control. of -#ihe user. lv` sual Bookmarks, available at www.visualbookmark.com is of a small number of bookmark services that associate images with bookmarks. In each case the image is a full or partial windows screen dump of the browser window - in other words it is a static bitmap representation of the page. Any web links associated with these static images will be set to the URL of the page. The above examples are all either browser or on-line services. In addition, the following systems, while not bookmarking technologies use related concepts. NaDster, available at www.naDster.com I's a service that a Ilows users to make their MP3 files available to other users online and to search for music fi-les in which they mav be interested. it is a combination of a searchable directory and a tool that users can download to make MP3 files on their hard disks available on the web (even if they are not running a web server on their machine). --Although not strictly a bookmarking service, by adding their entries to a public directory it could be considered to be a form of public 'bookmarking' for MP3 files.

The Windows type operating environment provides a wide number of WYSIWYG (What You See is What You Get) operatna env, -ronmen7-s for computer users, in-cluding M_Jcrosof'## Windows, MacOS, KDE (under X-windows). -hese allow the free positionina of 'windows' on the user's screen with an element of memory associated with them. Applications can 'remember' were sub-windows are when thev are closed and reopened. These systems, wir_hin constraints, allow users to cut and paste items from one application to another. This is not possible with the dvnamic contends of web-pages beyond a very limlzecd pastIng of URLs as HTML links. In some applications, for example, MS Word available from Microsoft Corp., it is possible to _i ## a nd paste indi iv4dua-' items -rO-T-. a web page, for example an image, but this creates a local copy and cannoi:i be free-positioned or manipulated. S#=_`ng traditional bookmark f--'Ies on a network --File system, (with appropriate user permissions set), allows a limited form of collaboration and some machine i-de-Dendence -or users. However, this will often not work well on networks employing more than one operating system such as Unix and Windows because of file permission d-4 IF 11 icu It _-'es . It will be seen from the above discussion that all existIng systems -for accessing frequently visited web siLes suffer from some or all of a number of disadvantages. Al! '##'-e p-rior art systems have the disadvantage that only a very limited number of items types can be "bookmarked". The only items that can be bookmarked by any combination of the products available at present are:

The location of a whole page or frame; A text based -link; or Banner advertisements. The latter is only possible with clicVu when -#ihe adverziser has opted in. Moreover, representation is always tabular or -hierarchical. Furthermore, representations of bookmark/favorites is generally text based, the only exceptions being cl-icVu which is limited to one specific type of -'image anci then only when the publisher/advertiser opts in, and Visual Bookmarks which uses a static bitmap of the user's screen to reQresent the link, The prior ar#: has the further disadvantage that the representation is stat--c, in that there is no way to resize or reposition bookmarked elements. The online services referred to have the further disadvantage that they can only capture full page URLs, --not even #:ext based links are possible. The browser based services have the further disadvantage that they do not store bookmarks online for easy access from many locations; There are no collaboration capabilities, apart from sharing a set of bookmarks over a network, and Bookmarked elements can become "stale" with no warnina or way of checking other than opening each bookmark in turn. The present -'invention, in its various aspects aims to overcome the above mentioned disadvantages and to provide improved storage of web page elements for retrieval by users. According to tne invention, there is provided a method of storing a portion of a mark-up language page comprising --the steps of: identifying and selecting the portion of the

mark-up language page to be stored; storing the identified portions in a repository, wherein a plurality of -identified portions are stored in a non-hierarchical form whereby a plurality of identified portions may be displayed for viewing simultaneously. The invention also provides apparatus for storing a portion of a mark-up language page comprising: means for .identifying and selecting the portion of nhe marK-up language page no be snored; and a reposi-nory for snoring the identified portions for viewing in a non-hierarchical form whereby a plurali:y of idennified pornicns may be displayed for view=g simultaneously. Embodiments of the invennion have the advantage that the elements can be v--ewed in a free-form non-hierarchical manner which presents a far more user-friendly view to the user. The user can see the visual representation of the actual elements stored and not simply a text. heading or the like. Preferably, the repository comprises a plurality of cards, each card comprising a visual representation on screen of a stored identified portion. Preferably, the cards are arranged into leaves, each leaf comprising at least one card. Preferably, the cards are moveable around the leaves. Preferab:y, each card may form a part of one or more leaves. Preferably, a plurality of leaves may be arranged into views, each view comprising a se## of identified web page portions and their attribu-:#es. Preferably, a given leaf may form a part of a plurality of views.

The preferred embodiments of the aspect of this invention permit the user a wide degree of flexibility including the ability to cross-reference, define their own categorisation options and their own display options. Preferably, access parame#ters may be defined whereby access to a user's stored web page portions may be limited -##o ne user, aval ilable to any -zhird party or partially restricred according -,o the access parameters. -This preferred embodiment has the advantage that the user has comolete flexibility over who can see his stored portions. I-Dreferab--v, the repository comprises a aa-#abase -for stor-Ina mark e-lemen--s chosen from a set of defined accept-able mark up eiements and represen#:_-'nq por--ions of a web page, -:-'re database comprising a pl',=lity of tables includinq an element data table for storing data about the mark-up elements; a card data table storing information about the display, formatting and positioning of the element data stored in the element data table; a leaf data table for storing data regarding cards which can be disD-Laveci in a common leaf; and a view data table -for storing data abou-# collections of leaves. The structure embodying the invention allows the complete flexibility in the display, categorisation and cross --referencing of stored web page portions referred to above. Embodiments of the invention will now be described, by way of example, and with reference to the accompanying drawings, in which: Figure I is a pictorial representation of the terminology used to describe embodiments of the invention, for ease of understanding;

Figure 2 4 s a portion of a sample web page having a context menu overlaid; Figure 3 is a view of a leaf hav_`ng a number of cards; 4 IS a view of a sub-leaf; Figure 5 is a view of a sample web page; Figure 6 is a view f the Document Object Model (DOM) of the web page of Figure 5; Figure 7 -4s a flow diagram illustrating a process for mea--icful -'emer-s frox. --h e D CM Figure 8 shows how the DOM tree --f Fiaure I mav be Eransversea-# when iden#_-_`fvinQ meaningful elemen-.s; F-,qure 9' is a flow diagram il-ustra##ing a process -,##or extracting HTML code for identified meaningfui elements; Figure 10 is a screen print showing how an element may be selected for saving; and 1"igure 11 -1-s a view of a repository/user interface a to a seco#,,d embcdi.ment of the inventic#-i. :n order #_o _,-ders7:and the Invention it: I's useful firs-# -#o .-evlew th- -_eChn_-1 cal f ramework _-nderpinning i--. When a ,iser of the Internet browses a we") page usinq one of t-ne available 'web browsers' such as Netscape Communicator (NN) or MS Internet Explorer (IE), the page they see on their screen is actually a rendition of a stream of data presented to the browser in HTML format. HTML (Hyper Text Markup Language), the language of the world wide web, consists of combinations of tags, attribuies, such as size, and data/text-, which are interpreted by the browser to create a potentially interactive display of information, that appears fairly

sl-'Lilar across all opefa-#i--'ng systems (s,-,ch as MS W-'ndows, MacOS or Unix) and different browsers. The whole of a web page need not come from the same server. HTML tags allow the publisher of a web page to merge elements from different sources. In one of its most complicated manifestations, a web portal (such as my.yahoo.com), may bring in elements from many thirdparties - news stories from one ccm-Danv, stock -orices from another and weather forecasts from veE another. T-ev -nay also be sell-ling -oar-of tl-elr paae to an advert-'sIng server r-ha,# constantly changes #he banner adver-- the user sees. O-fzen, all --f this information is retrieved directly by the user's machine without passing through the publisher's server. -In other words, the web publisher can merely point the user to the locations of the various elements of the page and allow the user's machine to obtain the information directly. The source of a paae being viewed by -##he user is usually --dvnam.ic in its content - for exam-cle, zhe front oaae of a newspaper's web si.-e will be constant--v cha-ginq. Occasionally pages ci-ange so frequently that some items seen on a page (such as a banner advertisement) may never be seen again by the user if they do not respond to them before the page is refreshed or changed; and even a summary of news articles on a web portal will be changing such that an interesting news story may be difficult to retrieve if it is not read at once. HTMT 6.01 is an SGML (St#andard General--sed Mark Up Language) application conforming to International Standard --1SO 8879 - Standard Generalized Markup Language. The full specification is available from the World Wide Web Consortium (W3C) and the detailed HTML 4.01 Specification Recommendation at is to be found at http://www.w3.org/TR/`html4Ol.

Within -,his specification of HTML 4.01 is the Document Type Definition ("DTID") that defines the markup language within the SGML framework. This document will be used to -determine some of the rules followed by the embodiments to be described. ECMAScri,ot (I-t--ernational ST--andard ISO/IEC' 16262, I's a standardised# scripting -'anguage based -in 'Large part on Javascript (Netscape) and Jscript (Microsoft). A detailed description of the language is published by ECMA in the ECMS-262 Ed. 3 standard at //www. eci-ia.. ch/ecma I /stan d/ecma-262.htm. CSS-2 #,or Cas--a-d.-na S-v'e Sheets, leve_-_')# descrbes a stv-'e sheen: language w-ich a!lows aut---rs and users #o attacs#_v e' soac-n-, -'acement, s-:'_ze e--c.) to structured documents, including HTML documents and XML (Extensible Mark Up Language) applications. The latest W3C (World Wide Web Consortium) recommendation for CSS2, may be found at 1-it-',,--I:#://www.w3.crci/TR/RF-C#-,.f,S2. document_ Cb4 ect Mode I DOM --eve _' 2 Spec I f I' ca t i cief-ines a platform- and ianguage-neutra# inzer-race t#-.at and sc-r-'pts to dynarr.1call-y access and a_!#ws pro-,update the cont#ent_ structure and style of documents. The [DOM Level 2 is made of a set of core interfaces to create and maniculate the structure and content of a document, and a set of optional modules containing specialised ,nferfaces dedIcated to XML, HTML , traversina the d -_-, c --r-I e 7: 7# e t #-e# DCM Level 2 SpecificatIon is believe--' t-o be close to a recommendation stage and the latest version is published at ,#ttp://www.w3.org/TR/DOM-Level-2. The relationship between the DOM and the underlying HTML w - ''l be described in the document.

The Extensible Markup !,anguage IXEL# Is a subsez- of S-MT that is completely described in the W3C recommendation of February 1998. The recommendation can be found at http://www.w3.orqZTR/1998/P,EC-xmi-19980210. XML is supplemented by a raft of other specifications about how the markup language is interpreted visually and how it can be manipulated by scripting languages for example. Note tha,#- eac- XML documen#i will be accompanied by a DTD 'since HTML 4.01- is as a s,,)ec-ific case of XML it has its own D--D as was mentioned ea---'---'ier). To implement embodiments of this invention familiarity is required also with SQL/relational databases, Web server, and CGI/Perl or another interactive web server scripting or programming interface. The following description relates to an embodiment developed to run on Microsoft's Internet Explorer browser --E (,version 5', and Netscape's browser NN (release 6). 7t uses the ability of browsers to be customised by an application developer. Implementa-'on 'n other browsers (such as Opera) requires a different user interface but the core mechanics of the underlying invention is the same. Such browsers need to be compliant with the standards described earlier. This description relates to the latest major released vers-'--n of the Microsofz's Internet Explorer web browser Version 5 (T ES) and the preview release of Netscape NavIgator 6 NN6. These browsers have many subtle diffe--ences in --heir implementation of the standards described often using slightly different names for variables or functions. The embodiments to be described can be implemented in either browser; minor differences in

functionality exist that allow differing enhancements to ..be applied in each environment. M- - Lcrosoft'S Tnterne,#i Explorer browser (version 4 onwards' al'ows de-,JeloiDers to add custom -Lzems to the con-ziext menu; a co#D-,.:p menu that appears on the user's screen when '-e clicks the right mouse button. The context mouse button Is accessed slightly differently in the MacOs System. A det.ailed explanation of the customisation of the context menu is now available from the Microsoft Corporation at their web site http://msdn.,microsoft.com/workshop/browser/`ext/tutorials/-c ontext.a_= Netscaoe avloar-or 6 crovIdes a lot more flexlbilit%l -#c --he developef to custom--se t',e browser the process -'s a 'tittle more i.nvolved. Almost any part of the NN6 interface can be customised by adding or modifying XUL (XML based user interface language) overlay file and providing or modifying an associated script to the app"cations "chrome". A chrome in mozilla, the open source browser development project. of Netscape Corp, is a compiete front. end, including all aspects of graphics, and f,._,nc!iional-'tv. --'he are exnla-ne--# a,# h E tp: /.me z i 11 a.. o.r a, /xpfe /xp'# oo i # i t / ove r 1 a Vs . h #:r.-. I a nr-' _7 I -! la-_._ --, fq /xr) fe /xntc ##, -.'.c i z / p-_-i_)uiDs . h #im_' An embodIment of the inventlon will now he described. Peflerring now to Figure I., some terminology will first be described. An Elemen- of a web page is defined as an HTML tag, or a meaningful collection of HTML tags, which can be saved. An eleme-## is likely to include the URL of an I'Lem of invest# -.o a user, rather --han a copy of the item itself. Examples of Elements include:

A banner advert; a link; an image, with or without an aczsoclated link; a- MPEG video; an YP3 sound _'_#le,- and a tajD-'e of imaaes, w--4c- -is an example of a mean-Ina-fu-' col-eci#ilon of elements being classed as an Element. A Repository is defined as an online database in which bookmarked Elements are stored. Each user can have one or more reocsltories. A Card in the repository is defined as the visual representation on screen of a bookmarked element. It is custom-'sable, but typically it looks like the original element from the original web page, surrounded by a re-_:#angular border. A Leaf in the repository is defined as the visual representation on screen of a set of cards. It looks like a page from a scrapbook with an index tab attached. --A View Is defined as one way of cateacrising a set of some, or all, of the bookmarked elements in the Copyn repository together with their attributes such as position on screen, size, background colour etc. and the attributes of the leaves on which they are displayed. For any given se:# of Elements, that -is a Repository, -there can be many different Views. Views are made up of a collection of Leaves. In the following description and claims, no distinction is maae between the visual representation on screen of cards and leaves and the underlying mark-up data or its DOM representation. This is because the visual representation is the direct result of a web browser, or other such computer program, interpreting the mark-up data representation, or its DOM equivalent, of the card or leaf

and generating the resultant visual image and behaviour on screen. Hence when it is stated that a card is movable on screen, it means that the underlying mark-up language or DOM equivalent is modified such that the web-browser, or other orogram, displays the card in another position. in add-'.`,#iion it means that, a user interface I's provided, via the browser or the 141 ke, such t-hat the u1r-.der1v_`:-.g mazrk-,#-), or DOM eaulivalent can be mani#Dulated. F --cure 1, a browser window is s-ow- cieneral-y- ;4- 1-0. Within the browser window 10 is shown a leaf 12 which contains cards. one such card is shown at 14 although typically a leaf would contain several cards. The card contains an element 16 which comprises a meaningful HTML element as described above. The card also includes a space 18 -for inclusion of a user defined comment and domain name .and other text. The leaf is one of a number of leaves in the reL)ositorv and each leaf can be accessed by clicki-na on a ' eaf7 irdex tab 23. --r. the example shown, #he!:e are 7'-i-ee 4ndex ##abs 2C, labelled "Defa,-ilt,", "News It-ems" and .._te1s"_ The leaf show- Is the "News --tems" leaf an_-# 1-`e "News Ttems" Index 'lab 11 -.s shown hig'-_'i-#hted. At t-ie 7-or r_:a,h,: of tl-e s.-_-reen is a waste'--in Icon .12 whic'-. al.-Cws user to remove a leaf and sent it to the wastebin. There now foliows a description of the interface whereby L-lie, web user can save a pdLt or the whole of a web paqe. --e interface allows "he web user to save an element of a web page, or a link to the whole web page, L(, the repository; to follow the element's link immediately; E'-rr.ail the elemen'# to someone else; and/or open #ihe repos--tory.

Different set-ups can be configured for different situations. The interface allows the followinQ oolions for sav-.no ar# element: The element may be stored in a specified part of the repository such as personal, private-shared, pooled or public; The element mav be categorised in one or more customised c-assifica-.#_`3ns as opposed to -.-e defaul-L Classification; and The element mav be described using one or more different types of identification such as customised name, text of `Jnk, title of page, visual representation (including the image portion of the element). Thus, the client interface nermits elements -:#o be saved accordingly to a def'ined -degree of access, according to a defined categorisat--cn and according to a defined description. -Different types of client interface can be used for different situations and it is likely that more than one may #De availa--e to t-e user in a given slzuarion. Some interfaces are only avai-vable to the user if the web publisher has enabled them on their site, while other interfaces are always available to the web user by vi_rtue --of the fact that they are registered system users. The following description refers to the implementation of an --nterface which does not require the web-publisher to activate --he service, that is easy to use, but is 'Limited to the newest web-browsers. This interface uses extensions to the context menu of the user's browser, accessed in Microsoft Windows by clicking the right mouse button when the mouse is over the relevant element or page background. In the example to be described it is assumed that the user has previously downloaded and -;'_ncorporated the extension into their browser. Turning now to Figure 2, an example of the context menu is shown. The user has previously registered with the service and has incorporated the

relevant proprietary extensions to her browser. Whenever she wants to save an element of a page (or indeed the frame or page itself), she simply opens up the context menu by using the right mouse button and then selects the appropriate service option. n Figure 2, the user has opened the homepage 30 of their Tnternet Service Provider. The context menu 32 is shown overlying the homepage. The context menu includes two extensions, add to Conyn 34 which adds an element to the repos --t-- f#', ana la---r.c'-. Ccpyn 36, w'-.-' -h opens t-.e "se-I rencsitcr--, . -.t-,er ontlons mav be added and cust-omised 7#he user' S In the examole shown _-- Fic'-,re :ihe conr_ex#: menu -as teen. opened w--'--'- -_#e mouse ,:=--ter o-,:e_-' vln# ato'--_ Euro 200C #:ickets. I#:. Is to _-nderstanc if #'--e use-r selec--S t-e d zc onv- #4 ex#:ension .`#i w_#1_1 be this _-ITMI. elerr.,,e-t 3- -cl---t,on. c# e-!emen-##s wh-'cl-- w-'! be st-re-#:i 'n. -he r e ro s - t o :#he e- e nom.epaae of ##he home,.#aae '-'P. L -c a-#d ##he elemen- `4 ,,J-.en #in- user _--,-_#_Ses e-,--ner -.-e the chec_'K# -3 c n# o z## r I a t e c k i e -_ h a 7 w o o r o,, e s e L-, s e n am e- a - p s s w o r d T" Ene cook-e d-s n#-t ex' `en P u s e r I s a s k e 6 t o __ o q - n t o -7-'- e s e I --- e , o r t c e g s t e as# a -ew user ,#:oo#,ie-- is tl-en saved on the user' s a I n e t --a - w I - . ___ - I - -er the - - nexT- I - "mie - s-e I . a--ecse# __ - - Lhe service. In both cases the Element is saved in t-he appropriate location in the repository, assuming i## has not already been saved, and, if the user had selected the 'Launch Copyn' option 36 her default repository is opened in a new browser window. Using a single user account with cookies means that it is very easy for the user to set up Copyn for multiple browsers and machines, Thereby enabling the sharing of the service between the office and home, etc.

The Repository interface will now be described. T',-e user can c'-cose between a num#_er of different c,-1stomlsabIle web-based interfaces, via which the saved elements can be viewed and manipulated. The two preferred interfaces are: A free-fo--rn. "scrapbook"-like representation shown -in F--'qures 3 and 4, and a hierarchical tabular representa#:io.s'-owr in Flc#ufe I I and wh i ch w--' 11 '_oe refer-red to I ater . -The user can toggle from one representation to another and the simple, hierarchical tabular representation of Figure ll is alwavs available, for sprina-cleaning purposes, for a quick cverv-e,,i of the contents of -heir rer)o S4 #OrV' or fcr any other reason. Referring now to Figures 3 and 4, the repository interface provides the user with a wide range of functionality, including categorisation on screen display, a variety of services and means -for sharina and connec--ina wit-, o'#A-er users. Figures 3 and 4 are screen shots of the repository interface as it is seen by a user. In this case the user is displaying the interface in the Microsoft Internet Explorer browser. The interface includes a default categorisation 40 and a series of custom categorisa-Jons 42 which are defined by the user. In this case the user --has defined four categories entitled, News Items, Basingstoke, Jenny Photos and Humour. The default category may be viewed as an in-tray for new elements saved. The user of the system, may be provided with a number of default categories which can be changed, by renaming, --deletion or addition of fresh categories. Categories are hierarchical, that is, Cards can be placed in categories, sub-categories, sub-sub-categories, etc. a

_single Card can be placed in many different categories or sub-categories at the same time. A given categorisation of a given set of stored elements together with their attributes, such as position, size etc. referred to as a "view" of those Cards. Each category is represented by a 'Leaf'. For example, imagine a set of "bookmarks" about individual restaurants, in which each bookmark has been categorised by the 'Location, type of cuisine and price range of the associated restaurant. Then three views of the bookmarks can be set-up: a "location" view, a "type of cuisine" view and a "price range" view. The On-screen display of the illustrative "scrapbook" interface represents any category (or sub-category) of elements on screen by the relevant set of cards displayed on the appropriate leaf. The lay-out of cards on a leaf is similar to the lay-out of items on a page in a scrapbook, and the cards may be moved around by the user within a leaf, like loose cuttings, using "drag-and-drop". The cards 'remember' their new positions. The user can move a card from one leaf to another (thus re-categorising i,-), or to a "rubbish-bin" (thus deleting it), using "drag-anddrop". The user can 'resize' any card, with the card's contents being scaled or wrapped, accordingly, inside the card's border. Within the border of any card, the user can place theIr own comments, and/or other information whic"i they select from a standard list of fields, such as dat-e bookmarked, source page, etc. The user can toggle between different views of a given set of cards. A number of services can also be provided. The user can upload and merge existing "bookmark/favorite" collections from their browser(s) into the repository at any time. particularly useful when a user first registers for the service. The bookmarks stored in the repository

c a 7, '-- e c - I c k e -d z-. r ou a !-# .41 -_1 s :# a s - . -'-ev wo,,.ild be on ##he or_-_-_-na' referring page. one current exceptio- is where .c -,.--k--'ng the link would execu--.e a #a-vascrip7# program. I i;e user Is kept informed about bookmarked elements that have expired/gone stale, or whose content has changed. Management information is available to the user, for example: listing those bookmarks which have not been clIcked through for longer than a given length of time; or listing these bookmarks which are most often accessed. --'-e ---ser can se##_-# ;-:,nv one or more #-#f the 4 book-.arked eleme-r-s, e_`.ther incill"d', # _#allv or as a cc''ect'on, anyone else w-c has -_-terne#: aCcess. --'-is can be by ema-l or as a T.essace the svste-m. --he sender can then cat-egorise --hose particular bookmarks as hav-'ng been em ed z#_# tna,# part-cular rec' ipienz; and -1 cozn senaer ano reci#Dient have the option of whether the sent bookmarks are `nked or copied. Various sharing and collaboration facilities are -available. A user can create a "public" repository which, at the owner's option, any other registered user can read from or add to. This facility allows users to create dif7feren# types of repository ranging from a "free-forall" bulietln board to a "read-only" informatior site such as restaurant g,,-:.'de with 1--nks to -restaurant web sites -ogetner wi--h -Lhe repository owner I s comments. ,z# user can au--horise other, for example specially invited users, to have full access and use of a "pooled" repository. This service is particularly useful to clubs, societies, and the like where members share a common -interest. 1# user such as a school, university or corporation, can create a "private-shared" repository, for example running on their own web/database server, which enables students and/or staff to use the functionality of the system to

collaborate on web-based research activities. A variety of options are available giving different individual users different privileges such as read, write, modify, etc. In the Figure 3 example, the leaf 40 is the default leaf which is shown highlighted. The leaf contains seven cards 44, 46, 48, 50, 52, 54 and 56 and the waste bin 46. The cards shown are selected to show examples of some of the different types of meaningful HTML elements which can be saved. Element 44 is an HTML DIV containing a link element, a DIV element divides a page into a number of logical sections. Here, an image has a brief description of the story and clicking on the image or the link will take the user to the linked web site as if they have clicked on the original web page. Element 46 is a simple texE link. Element 48 is a 2x2 table of advertisements. The bottom left and top righL 58, 60 of which have links, identified by their bold borders. Element 50 comprises text extracted from a linked news headline; the user chose to keep the text but drop the link. Element 52 is a banner advertisement in which an imaqe is embedded in a link element. Elemen-L, 54 combines an image map and an Image. The ful'i map functionality is retained, for example, _J,1 the user c--licks on the "Lawn and Patio" tab 62 they wii-I be taken to that section of the amazon.com web site. Element A is also a JTV element comprising a link and some text, butwhich has been resized; the content has automatical1v obtained scrollbars to allow all of the content. to be seen. 'The user can move these seven cards around the screen and resize them. The cards remember their size and location, so that when the user next returns to the

repos--tory, the lay-out of the view is preserved -from the previous visit. Figure 4 shows a leaf from the News Item Category of g-re 3. -- can be seen tna-#i the New Iter7l Ca--eao-v comprises seven sub callego--ies 64, identif7lied as Asia, Amer--ca, A_#rlca, Europe, Sport, 7!,ngus Deaytoi-i and "o-'al. Here the Europe sub-category 66 has been selected to display a leaf containing five cards 68. A waste bin 40 is a'-so displayed in the leaf. The manner in whi & i the embodiments described operated W, ne aescrioec. An _-na#ers-_a-dinc# of --e -e---a#,on#'-c '-e-wee- the H-M- anits DOM representation within the browser, and hence its avallability to the browser scripting language, is essential to comprehend the manner of operation and will be described with reference to a simple example. --',,ere are many sub-##le, and some s`qpifican-:#, differences in the way t'-az IE and NN turn the raw HTYL of a web page o0jects wn-1cri can !De accessed and moalfiec by scripts, the DOM. However, the embodiments discussed rely almost exclusively on functionality common to both browsers, only deviating from this when a particular aspect of one browser or another offers significant -moiementation efficiencv. Fiaure 5 s#,ows a s--mp-"'e web page comprised of some I'mages and text. It -Ls similar to the Card 40 shown in Figure 3. The first line ('This is my Table:') appears in a slightly larger font and although not visible in the drawing, in red. Below this text is a 2x2 table. The first column comprises 2 cells showing images, the second column includes images and text. Further subtleties can be seen that the first row entries are aligned at the top of

the table cells and the bottom row entries are aligned along the bottom. The raw HTML used by the browser to construct t..is Page is as follows: < HTML> < HEAD> < -,---L7->An 14--M-.IIDOV !--!us,#ra--icn < ,-'TI-,TiI-7> < /HEAD> < BODY bgcolor="beige"> < 70N- color="--#arkred" s--'ze="-L"'>--'-is is my tab-!e: < /FONT> < BR> < BP,> < TABLE border="2" cellpadding="2" bordercoior="darkb-',ue"> < TP, valiqr="'#op"> < -D> < IMG SRC="/images/USWEST.gif" > < A href="/test.html"> < IMG SP,C=" /images /et f ront4 0 " > Apric-ot,s are --as##y < /A> D > -/TP> < T'P. val--'gn="bottom"> < 7D> < A href="/experiment.html"> < IMG SRC="/images/St-range"> < /A> < /!--D> < --D>

Bananas -are be:iterl < T',ISRC="/images/USWEST.gif"> < /TD> < /-#R> < /7 AKE> < /BODY> < /-# T.ML > DIM reo-esentaton, o# the --al,re 6 is a summarv cf the page. The picture only shows a small subset of the information avaiiabie in the DOM about the content of t# , rl.e pace. i#_- on1v shows the "nodeType" N___1 21 7M#N_, i - = - 3=NODE# -EX-,, "ta-.Name", n-_-mber c' "childNodes", the non-default "attributes" of each node and the "nodeValue" of any text nodes. -an be seen. t'.-.at the DOM rep-resentation nirrors #i'-.e h--era--chv of --he raw .---!--ML t-at was used ##o create the page. Each node has one parentNode and each element node can have zero, one or more childNodes. The DOF represen,#a-__`on of ##he page can be interrogated dynamically and, within constraints, --an be modified without editing the underlying HTML. For example the position of elements on the screen can be changed by M 3 rd I f y ng some of the--'r attributes, or the value of ##ex strInas c-)anged. :n --Le above example, if we changed the value of dol-u,-,-ien',#.getE'.ement.,#13yTagName("A") [0] childNodesfl] nodeValue to "Oranaes are tasty" our web-page would be modified onscreen such that it no longer told us that "Apricots are tasty" but that "Oranges are tasty". Pages can be created on the fly, by a script manipulating the DOM directly without_ the need for any raw HTML, other

than the code of the script itself, being read by the browser. There now follows a description of manner by which the user saves elements to the repository. The operation of a user saving elements to the repository may be broken down into three main steps: setup and installation; finding the meaningful elements; and extracting the HTML for the meaningful elements found and returning it to the server. The set up and installation requires customisation of the browser context menu and installation on a user machine. The fInding of the meaningful elements can be subdivided into the steps of: using the context menu as an int,.erface with the users mouse over a node of interest; #dent,,Jlyinq a node supplied by the context menu; traversinq the tree to look for collections of meaningful elements; finding related nodes if a given node requires a related node; and creating meaning where there is none. The HTML, extraction and return to the server can be subdivided into the steps of extracting the raw-HTML oi: DOM sub-tree from selected nodes; passing HTML data to a new window; selection by a user; and storage by the server. Thes(#, three main steps wi-1.1 now be described in t#urn. SET UP AND INSTALLATION IT, o enable the customisation of the browser context menu, #:he following operations are necessary: In Internet Explorer the user adds a new key in the w1ndows registry under

H K E Y - CJ R R E N T _'_7 S-' E, I R \ S c, f -:#,w a r e \ Y i c 2: ) s o f t n t,-, e r 7, ExP1orer1\Men,#Exz.\1"Mv Menu TexE" Where "My Menu Text" is the text required for the new context menu entry, The default value of the key is set to the URL of #ihe page -onta-ninc t-he s-r-Dt the deveo-,er w-s-es :1o exec-,#7e --he user selec##s t-,_-S menu entry. -_'#e men-_: #-_an be res-#r,-ed on' V tic acDe ar :n --e-" circumstances, for example only if the mouse is over an image. This is achieved by creating a binary value called Contexts under the key and setting its value accordingly. In NN6, a new XUL overlay file, for example, navigatorCopynOverlay.xul is created which defines a new menu Lter. as iD;#rt of -the ccn--ext popup menu wh-'ch can be referenced bv settna 7#he --d of the < popup> element a-O-,)ropri-a7_-e-Ly, namely < popup id="contex-1">. An 'oncom-mand' -za--Je is at#:acred to 7:he menu item with the name o-f scrIpt fut=icn to be ca#Lled and the appl`#_catilon is -7#old --where it can find the script via a < html:script> tag. Finally, the new overlay file is included in the global overlay file, in this case navigatorOverlay.xul, bv adding the following line < ?xul-overlay nre'L="chrome:i,--a--hl/nav-'-ga#-orCopynOver'#ay.xul?> Optionally, submenu items can be added to the NN6 context menu and their appearance made conditional on the type of node which the mouse pointer was over when the context -.-menu was activated.

Installation is relatively simple. In order to extend the IE browser a small registry file is created which the user opens from the system web site. Doing so, having given the appropriate permission, will add the key to the users registry. To Install the extensions in NN6 requires the user to be presented with a signed script. A signed script is a normal scr-Lo: tha t has a ta I s 'Lgnat-ure that cor - i rms the authe5,#icity of" the script. A signed script ca,. request special privileges, not usually available to a browser script, such as the ab_J_1_#tv to modify the browse-or access files on the user's system. 1 --4: th e .,. s e f c[ e s the script the appropriate permission, the modifications described above can be installed. The step of finding the mean-Lngful elements, an-- --he various sub-steps will be described with reference #.o F.-qure -7. To select an element to be added to the repositories, the user moves her mouse to that element and then activates #ne con!_-ex#i menu over the item of interest. Th_- _s, a#i step 1 1, 'C". Thus, the context menu -s -used as an interface with the user's mouse over the node of intore.st. _e Can =w seiect the- add elemer.-_ cpt_:Lo#'. #34 i_-: #o add an element ---o #:he repository. At st,(,-r, "I handle to the Node is returned to the script from the DOM over which the mouse was when the context menti 1E t",1.1's Node car. be accessed from 'pareriLwin.event.srcElement' and in NN6 from 'document.popupNode'. These are both the same type in t.1-1e DIOM, an -4TML Node. This Node wil_' be referred :#o as 'myNode' for the purposes of the following. #den-Jf#cation of Node supplied by Context Menu

At step 1.04, the script identifies the type of myNode (via myNode.nodeType). The options of interest. in the HTML -r.,o' em s enta'#. ion are ypica types I and 3. 7vce I - a r. --at t' e node received -s an '-#-M.T ELEMENT-NOD7 whic'- means T_ , # n - _L - 7lemen--, a-_# 7ype whic- -s a -EX- NODE. Text nodes hold all the text data outside the HTML' < ' and '>' tag brackets. Often text nodes are nothing more than the carriage returns between two lines in an HTML file but more InterestIngly thIs Is where the text shown on the screen can be ob,:alned from the DOM. In #ihe DOM reDresen--ation of Figure 6 a large number of TEXT NODES- 3f --afrLaae re-_ufns and whi,:#e soace were omitted for simp-1-icity. Element nodes can be further distinguished by their tagNames, as can be seen from Figure 6. Different useful -_-#a:#a can '---e from each ##ag t%,pe. F-cr examcle source of an imaQe -file can be obtained frcrr. tne 'SRC' #-##tribute of ar < 1_%`G> 7aa or the -ow and column -#a#a the childNodes of a < TABLE> tag. At step 106, myNode is examined to determine whether it is a meaningful element according to the defined rules. !I it is, at step 108 the element is added to the liS-: of meani-aful elements. The script now traverses up and down the Node tree, looking for meaningful collections of elements by looking for meaningful ancestors and descendants. For example from a 'Link ( < A>) the script looks at all the chiidNades, and the--r ChildNodes and so on --o searc1n for text nodes or imaae taas that form part of the link. The scrint then - -ooks up at the parentNode, and its parentNode etc. until it reaches the document < BODY> which is the highest level node that could be of interest in this context, noting on the way if the link is part of a < TABLE>, < FORM>, < DIV>,

< SPAN> node etc., each of which could represent the com-mon ances-#= of a meaningful collection of elements. :n Figure 7, at step 110 the process -first looks for childNodes. ---' there are, the '-andle of eacr- c--J-1dNode -'s in turn passed to the script at step 112 and steps '02 to 110 are repeated for each ch.,ldNode in turn. The process at. steo -14 then looks to see whe'#-her t-e Qarent7leme-t =4-# ,:#he curren-- element is #he BODY element. Tf j7: #.S no-, at_ s,##ep 11,E, -#he hand-'e of ::he parent element is passed to the script and steps 102 to 114 are repeated. If the -.answer at step 114 is yes, the process asks whether It is policy to capture BODY elements at step 118. TF yes, the BODY element is added to the list of meaningful elements at step 120. In any event, the script is now ended at sT-ep 122. Looking at this process in more detail, and referring to Figure 8, consider the example HTML page and the DOM at Figure 6. if the user activates the context menul over the image or text in the top right hand cell of the table, mvNode will! refer to the Node second from the left in Lhe penultimate row of the diagram shade node 130. Tl-iis -IS ar, Element Node representing an. anchor tag ( ' < A>' I -ind lt-,, descendants rerresen## a meaninafull #hls node mus:# be noted. Node #iree is now *-r--,ve-.--r-; lock-'a f-r meaningf,-;-' descendants and ancestors. Irst, 7:,-- c-11dHodes of mvNode are located a*- an-i 132, 334 are ob-#:aine-#, snow- s"aded in F--'gure -odes are ---'Iemen#: Node 132 "#or an < IM->, anot-er mean-=ifu- e-ement to be noted, and a TexL Noae 1-#' -:---at 'Apr--cots are tas--y' which Is another mean-nofu- e--ement, despite -:ihe fact that t-ec-nicall -1y Node is not an element. The manner is which this type of Node is dealt with will be discussed later. Again, this

element. is notied. Three meaningfuI elements are now caFttured. The search is then reversed and the parentNode 136 of mvNode looked at. This is an Element Node for a Table Data (' < TD>') tag representinq a single cell in our -Lable. For -##'-e time be-no this is considered not to be a mea-inafull element as will be d1scusserd. This Node' s paren-##No_-e 138 -Ls zhen examinea . -o cctain an Element Node 138 for a Table Row (1 < TR>') tag. Again this is not considered to be a meaningful element. The next parentNode 140 is examined to obtain an Elemen-. Node -for the Table (' < TABLE>') tag that represents the -eprese- col -ec--ion of eiemen7#s, whole table, an-_# Is noted. The parentNo-_#e of the TABLE Is the BODY 142 of -he whole d=_:me--_ #w.-L'c' a-ca-'r represents a mea-Ingful e'ements and also a stopping point for our Node traversal. the body of the page as represented by the BODY element is different to bookmarking the location of the page. For example, the first paqe of a newspaper will nange from #:iav to cay ana so a user w n- wisnes -##c --.r,e fronr cage on, a Special occaslon will ac--ua'L-'v need capture body of the document as opposed --o -##he UIRL of the page. In practice this Element and its descendants may not be captured as the amount of data involved may be quite large. If it is decided to capture it then it cannot be saved 'as-is' and its content must be put inzc a < DIV> Element which can be stored and retrieved from the database and disolayed within t_-he confines of anot-Aer document. The manner in which a node is '-andled will again be discussed later. DIV and SPAN elements can be used to create freely positional "sub-pages". The content in a DIV or SPAN element can be set to move with its parent

Element, hidden or made visible and even occasionallv resized in proportion to the DIV or SPAN element. A rule set is used to determine and identify 'meaningful' Nodes, the decisions used for when to stop sea-rc--'n-- ul:) or down and special treatment of Nodes, such as for the Body Element above. Th-Ls rule set is based an the DTD for HTML with as little overruling as possible - this means that keeping the system up to date is more straightforward as the specification of HTML changes, and also provides an aoproac'- to aeneralising the technique described v_-1 or-her markup languages that come with theIr own DTDs. For some types of nodes the script must also find -associated or related nodes or data. A second set of ru_les is used to fac-4.11tate this. For examcle ill: a _#se_activates the context menu over an image map (' < M,##P>'' #_he script mus-: find the image that uses the map; #he collection of images in the document can be obtained from the array of image Nodes held in 'document.images' within the DOM. MAP elements can also be applied to 013JEICT and' I N PJ T e I e m e n r- s . -_ !-. e s e m u s ## a 1. s c b e s e a r ch e d -_ Cc anrroQria-_e element 7#c be matched the !#AP. s e n a sim#)le matter to scan through these to find the 1-macTes, oh4ects and inputs using an image map and in particular the one using the image map on which the mouse was placed. Tn anot!-#,e r s-,,-ua t ion style sheets Ist, 1 e def in j #,: o!##; ma, y nee,_-#ed in,#erp-e## #he ciass at-_r, - Lbutes of nodes. malv 'Ce -J(7##re, -) --I'ne C_ ##WO ways: the scriz'_ col-r# and load the appropriate style sheets and cssFuies or the scr"pt could record the non-default style settings of the node itself. It is preferred to extract the style _nforma#: lon of each node _'ndepender-##_!y bu-# thIs is essen#:ial. Alternatively, global style settings can be captured by a straightforward DOM function call.

in some cases, non-meaningful elements need special zreatment to make them meaningfui. Earlier it was stated that ' < TD>' and ' < TR>' tags did not represent meaningful collections of elements. In s a o - rey do nor- - wi##f-:ou-_ a ' < TABT---->' --aa - represen7: we 4--med HTML. To t-ie '_,ser, -owever, _'t --s appealing to select rows from tables or groups of adjacenL cells. it is made cossIb-le to select combinations of nodes which share a common ancestor node type. -,Or example, table data or table rows can be lifted from the table. in this situation the script would creare a new a=es--cr --f --'-e ap,.#_-opria#Le ziype, cossib-I y us=" L_-e M al I i C uT-es of tne act',_#a_' --a"--e from, w, nic., - n e,,,, ! are being selectively extracted. A third set of rules --'Is used to fa, -ilitate this which will be referred to later. .7# list of the meaningful Elements and contmon ancestors of meaningful. collections of Elements has now been obtained. _'ne S-:#ace of -7#'-e proCess -is to extract --he fcl these meaningful Elements and ReLurning it to t ne server. Having _-#_rawn up a list of meaningful Elements, or collections of Elements, the scrior now extracts -_'ne required data from the DOM for each of them in turn- This data will then be passed to a new window before being sent -#ic -,-.-e Szerver. This process is I'llustra--ed in Figure 9. There is a choice between extracting the raw-HTML, or the DOM sub-tree from Selected Nodes. The HTML -represented by the Elements and their descendants can be recreated or copies of the relevant sub-trees of the DOM itself copied. The choice in practice depends on -,he performance of the different browsers at the ex--raction of the data or copying the DOM subtrees.

If the implied raw HTML is created, a number of techniques may be used. It must be noted that this HTML may have been created by a script on the publishers web site and may not represent the actual HTML passed from the web site's server. Alternative approaches will be described later. Referring back to Figure 8 and commencing at nocie 130 which relates to a link containing an image and :ihe text 'Apricots are zasty'. The whole of the process must #De repeated for each meaningful Element in the list. Referring to Figure 9, a blank string ''myETML'' is created at step 150. At step 152 a check is made whether the element is of the type ELEMENT-NODE. If not, a check is made at step 154 to determine whether the element is of the type TEXT-NODE. If, at the step 152 the element is --determined to be an ELEMENT_NODE, at step 156 the opening tag ('' < A '', in the example being considered) from the taqXame of the Node (.myNode) is added and a !is,- cf _#ie attributes checked for the Elemen:# fron. 1myNode.a:trib-,_:-:es' and for any that have 7,on-b-.ank vcalues add them to the myHTML string. In the example, my.L#TYII_ -.cjw reads '' < A href='/test.htm_'''. The same exercise is repeated for any style settings that have non-:iefaj_# values by scanning through the 'myNode.style' array. Irl the example there are no style settings so myHTML .#_s unchanged. The opening tag (myHTML='' < A href='/test.htmi'>") is then closed. Thus, in Fi-gure 1# step 156 is executed in the order of the opening HTML ,and name tag, non-blank attributes, non-blank style settings and finally the closing angle bracket>. In IE the list of attributes is very long and goes well beyond the list -#f attri'ojtes specified in DOM2. The list is --hus restr=#ed tc the list of attributes applicable to each Element type this car. be obtained from the DTD. For the sake of efficiency the search through the style setting may be

restricted t-c) --he core values relat-ing to size, posi,t#acn and colours. We now recursively repeat the exercise for each childNode, and in turn for each of their childNodes - including nonmeaningful- Elements - and their ch-4-ldNcdes etc. This is shown at step 158 in Figure 9 at which it is determined whether there are any childNodes. If there are, at step 160, the handle of each childNode is passed in turn to the script and the process is repeated recursively for each childNode. The result is then appended to my HTML. Referring to the Figure 8 example, the first node encount-ered is the !MG elemen,_ Repeating the above exercise of extracting attributes and styles, myHTML=" < TMC-, src='/image/etfront'>" is created. This node has no childNodes and so a check is made to see 'if a end-tag I's appropriate for this type of Element. In this case it is not, as, according to the DTD for HTML, < IMG> elements do not have end-tags so the local myHTML is returned back zo the parent node. For the link node, myHTML now reads =" < A href#'/test.htm_`> < IMG src='/image/etfront'>". In Figure 9, the step of looking for an end tag is shown at szec 162. 1-f present, the end tag is applied to myHTML at step 164. if not present, or after application of the endtag, the finished script is returned to myHTML at step 166. The next childNode of the link is a text Node from which is extracted the nodeValue which is returned to the parentNode. For the example link node, myHTML now reads =" < A href='/test.html'> < IMG src='/image/etfront'>Aoricots are tasty". There are no more childNodes so an end-tag is added to myHTML, if appropriate for this type of Element, to get the final result of myHTML=" < A href='/test.html'> < IMG --src='/image/etfront'>Apricots are tasty < /A>"

The process is summarised by the following pseudo code. Function extractHTM:,(mvNode)f create empty string myHTML="" if (myNode is an Element Node (i.e. myNode.nodeType==l)) do # m.vHTML = mvHTML+" < "+m.yNcde.ragNa-Pe for eac'-. member of myNode.attribu,-!:es do If specific attribute is non-default myHTML myHTML + " [attribute namej=[attribute value]" or (attribute name] for boolean attributes. (anv member of rrvNode.slyle Is myHTML myHTiML + "STYLF7,=' " for each member of myNode.style do If specific style is non-default myHTMT. myHTML r ,style namej : L'style value.' if many member of myNode.style is nrDn-defau_'_# myHTML = myHTML + myHTLML = myHTML+">" if (number of childNodes (i.e. mvNode.c'-_-1dNodes.lengt'-; > 0', do!. for ea--h member of r-.y'1,c,de.ch,_-_'dNodes A7 myHTM1, # myHTML + extractHTML(childtjode of myNodc,) 7he tacl#ame cl requires myHTML # myHTML+ - < /"+myNode.tagNarie+">" else if (myNode is Text Node (i.e. myN_-de.node-_ype==1)) do ,,,_,-.TML = 7,.yHTML ,yNode.rodeValue return myHTML;

1-il ## i s r eo - -c.cz e:-# -# e d 'o y F I CT # U r e ThIs description has glossed ever one essential task the script must perform on the extracted HTML (or DOM subtree) ,before it is passed to the new window. Many websiEes reference images and links etc. relative to a base UR!, often the domain of the page being viewed. In the example the images SRC attribute looks like the following SRC='/imaqe/#.--_,1ename)' - t-his reference is relative t-_ ----e dom-a-n of the pu'--lisher's server. the user a tem-) -t e d4 sr-' av ---'-s imaae f--cm the reQos-,--orv s-,e -e would see t#'-e ma a e a s ## h e r e o o s 1' t o f y w a,., e --ZDV 0 7:`_,e lmaae e. a e s c r In t t` e r e f c e e s W-.-" reQ-a--e /_-ma#ae/,',f_,_'#ename', SRI.-='I-,ttp://#domain-name)//image/#f#-lename,l'. This Is easily done as the DOM subtree is traversed. Each t1me an attribute is found that may need changing, such as 'SRC' for < IMG>, 'HPEF' for < A>, a few string o-oerations are performed that convert the relative URI to an absolute UP,!. A full list of at-tributes whose values are URI's can be obtained from the DTD. The process that must be e Y, e e d #_ c n v e r r e I a t I' v e # c a b s c. e UR I ' s mu s sa.:IsfV Lci-Owina Request -for Comjnen#_ _,fc- 1808 w'r_,___n can be foun--# a7 base In this example was 'www.cioma"-n.com' the --':--ral _iTMIL -_0 -,-e wculd then read myHTML= " < A href=lhttp://www.domain.com/test.html'> < IMG src=http://'www.domain.com/image/etfront'>Apricots are tasty < /A>" Instead of myHTML=" < A href='/r_est.htm11> < IMG src='/image/etfront'>Apricots are -_asty < /A>"

There is now a list of meaningful elements or the common ancestor that makes a colleCt4,on of Elements meaninaful, together with the HTML that represents each of them (and their descendents) in the DOM. Capturing the Javascript associated with an "HREF" or "event" is theoretically possible but may cause uncredictable behaviour. The scripts in a page can be obtained from an array of script elements from the DOM. This arrav could be recrea-##ed in the #ITML bbeln::# saved, :hereby ensuring that #ihe script attached ##o the or lleven,:#- is available when tl-e repos_,!io_-y d1sclavs --e saved elemen#i. Variable and func-.-ion names i- #_hese scripts may ----as- w_-:h names from. o#Lner sites and ma-y- we_#'. refer to elements on the original web site that are no longer available once the element has been saved ou'# oif context. The ability to save the scripts associa#ea wi*,- I n element attributes (including mouse and keyboard events) may therefore be disabled. The HT_ML data is then cassed to a new window (or a new laver c:-# the same cage) . --le script, havIng AOdes represenE-na the common ancestor of each o# element's, or having created a vlr-,_#,da# ancestor whe--e sAc- a anode does net exIst, ##akees HT#,.-_. repre.senzed by each Node and its descendants and pas#ses -L# as an array of data to a new window it creates. The H-MI, passed to the new window is writ-ten into a series nf .layers, or ' < DIV>' elements ali of which are hidder, from view apart from the default option, which is the HTML corresponding to the actual element over which the cont.ex-. menu was activated. In -L-7-s simplest manifesta#:`Ion the layers are crea-ea by --he fol--owing type of script (in pseudo code): -or (i=-_ to number of' meaningful elements) do

the " < DIV 7D#'myLayer# i,) STYLE=' visihility:hidden' > mvHTMLArrayLl#_' < /DIV>" If our default option was element no. 2 (for example) we wou',d then modify the style as follows: do cume.-#. QetElemen,:#BvT,4 '-y- aye r2' szvle.-,,-' s"b" ty=, The User Then Makes His Selection. On this new window a .!#-- - -1 1, 1% 1 - a 3`_,dow- menu cf oL#ions, a < SEL -E C-_> ##aq, corre-s--cn,dinc t_- eac- of -,-'-e mea-Ina-`_#1 co_-l1ec-._i-_- o-f_ elements oassed from the main window. As the user chooses different options from the menu the corresponding laver Is made ara tne _-t ners h--dden. _#nis IS aone I o y s w I t c- I - a -#i h e- s -## y _' e s I b i y s e t z I n g 0 7)T-,117 -:# 0 'visible' and 'hidden' accordingly. This is illustrated ir. Figure 10 which snows a screen sl-ict of a Window 2-_0 In whic- the selected area to be save_--# is dispiayed. The user selects from a drop down menu 204 what he or she wants to save, for example "he entire table, an image or a link and clicks the "add to Copyn" outton 206 :-o save ##'-,e selec--on to the fepostorv. A rese-1 but---on 209 is provided to enable a selection to be cance.1led. Wher. the user has flnalised '#-Is choice #'in our example between #i`e text-,'Apricots are tasty', the image 'Love a Book', the link, which includes the text, the image and a target for the link, and the whole 2x2 table) he clicks on a bu--ton to 'Post' the results from the form to a web server rrogram (for example a cgi script written in Perl) running on the repository server. Posting is one of the methods of returning data to the server from an HTML form.

Until now there has been no interaction with the server. Only the selected HTML is passed, together with other useful pieces of information such as the URL of the page from which it was obtained, the size of any image files (only possible in IE at present) etc. The exact choice of data to be returned will depend on customer demand but this data is generally obtained by a limited number of me#ihods _#nclud_`na the followina: ExtractinQ !#TYIL for selected elements or, the [:)age; the He4aht and Widt_-- of the element as c,,.irrent-ly rend-e-red r#" #i'ne browser (1L'r-_-s is obtained froir. the offsetHe_---,A'-.I offsetWidth fields) which is useful for determining the size of the element for display on the repository; Obtaining browser or system data from data made available from the DOM (e.g. type of browser or operating system); information about the web site and domain (such as the URL of the page); and Date and Time data. -:'-e server then stores ##he as fo-ows. --he server sc-- 1'. rst chec.-,s f or a 'username c k, I does no-,- f-'nd one 1#he user is lnv# t e t o c)7,-.i- -ecister. -..e use-- de#:aL].s are co,7#firmed w_-#.h, a da-#abase o- the ser-,-e-. This use .or icientif,,,.,.-_# users and va-idatilon oLl passwords common practice online and will no-, be described any further. Once the user has been validated, the server script Lakes the data provided by the form and adds It to the user's repository. An SQL query may be made to ensure that thr# data is not a repeat of content already in the users -enos-tory. V-e data is s#:ored I'In the 'default' ca--egory de-#erm_`ned by t.-e user's predefined preferences.

Once alI th-s has been done, the content-. of the 'new window' -Ls reciaced w]#]- a messaae from #'-,e server. con-firmazi-on Tiessaae, srcwIng w`a:# nas been, saved, Is displayed in the new window. After a short preset period of time, for example 5 seconds, the new window closes itself. 7'r- HTML ren-resent ira t#,e user' s selected aeneric El em=: '-as , 1 now been passed to is reposl__.]# -or s,,#n s e qu e n. retrieval. Daiiabase Representation _;7# ow-o re#o_-esenzat-.= of :'-c database a--` _;-,ss.cc_-_;#T,-.ed --ables atr,# da-a al'-ws the 4nve-74cn r# '-e recreated but may not necessarily the most efficient implementation which could be developed. Suff4cient information about the requirements is, however, provided 0 ow a more 0 ID'r, -.isticatea database to ;oe -#-velooe-# The Information set out below relates only to the implementation of the invention and riot to other data and services that may be useful from a commercial point of V#ew- For example, 4n a comxr.ercial `mpiernentation we may .-seek further user data beyond the Name and Password ;e.cf. e-mail address e--c. ) . Implementatlon of su-_'- additionalfeatures is straightforward for one of ordinary skill in -..he art. I..e core data wi.'I be spli-## Into 9 data tables (niofe -tables may be added later depending on business requirements). Taking each data table in turn, the purpose of each table and the primary fields required is as follows: User Data Table

This captures information about each user and basic preference data such as their default group and default -repository.

T., - - ir - I ser Name Name by which use- identifies hiself sef Password Password user selects to con:rol access --0 account Defaul-- Group = Groups Default collaborative Group to which user Data !Unique Id.) belongs (may be blank) Default Repository Default repository of saved elements - each nepesitcry Data ilUnique user has one or more reposi#=ies. -d. Fsystem generated ident-1fier for ")Ise-,-. User Data Table

Element -_a#a Table This --s --'-;e core da-_a Sza-ved by tir-te interface described. It holds the HTML, domain details etc. butnoth-ing about how this data is to -be displayed on the repository int-erface. P a T L -'TML ex,#_racted and save-# by Client inze-#-ce Source Domain Name Domain name of site from which the raw HTML was taken Source Paae URL URL of the web site from which the raw HTMT was taken Date/'l'Ime C_#ea##el_# the e-emen-7- was saved /T-' las7 Date --mle the eei_emen,# was _as## cl.ckea# o.- I f a link) Owner Repository Repository within which the element is saved. Repository Data #.Un_'que Elements can exist within more than one View id.1, for the same reocsi#:-_r,_ C o,,:# v ## f V e e m., e n t D a --a Loca---'on cf' a cocv o_` the elemen- 4crea-,:e-_# "in-cue -d. miser sends copy of part of repository 7io another user for example). This copy of the Element may need updating if the underlying element chanqes. ThIs copy can have cc-p-i.es of e t c 7 au e T a Svstem genera-##ed --dent' "er for 71emert#. S Wri Element Data Table

Card Data Tab" e -_!-#e information in -,his table captures #nforma,#_4cn. abcut zhe d-'splay, formatting and position of the Elemen,# Da##a. The card has information about which leaf it is displayed on. Any given Element can be associated with several different Cards. s S c, I a, i e c i em e n Loca7#ion of ele-nent to be disQlave,# Elemen## Data (Unique id.) card Position/Size etc. Examples of customisation options specifi-c -L-() each card such as location on screer (within the leaf) 5ackaround, etc. Examples of cus,#o.misatlcn opt-ions -'an ;Ii#, common :#c many car-cis - these can '.e overwritten bv, or 4.nher' tea' frcm, 3-,,-er ',eal Cornment/Description Text Examples of text fields the user can add, cr etc. modify to describe or comment on the card/element. Owner Leaf Leaf Data Identifier for the Leaf of which '_his c-ard is In I a,,# e --,d . a QarzP.a-e/-Ime ias-#: vlslted Date/-4,me the el ement was last #:'-e-; a 11 ink c5pec-L #_F- c #o #-_ Is carci . Ur,#,ju## Id. system generated identifier for Card. Card Data Table

ea# . Da a Ta' The User's screen, in a given view, is split into a number of Leaves navigable by tabs, similar to a spreadsheet in MS Excel and other products. Each Leaf holds informatIon a_'-c-_-t_- its owi-i d1solav as wel I as defau_'t vallues for any Ca.-ds ----aced -.n it, essence -eaves can --e use_--# -C categorise and classify Cards and hence Elements. ,.,wner View View Data The View of which this Leaf is a cart. Id. ---.,e Th-s a d;escrIi-,,T:_4ve t#t'e used _#c- - t- - 'aL#_'. - - Reference ZO View V-eW in order to accommodate sub-Leaves a iea: can D,#iLa (#Jnique ID/i include a pointer to a View - this View and its Leaves will appear within this Leaf (see Fia,u_-e 4 for 5_;# nd - co Icur , '-ex'- Cus--o-m-'sat-l'on, opti. ons for ##he leaf --'- a -.- d r I v e fo--., Do-rder type etc-. its display. Some settings may be inherited from default values at View level, Background colour, text Default settings for customisation settings border :,,pe I et--. _c for ca #rdls tl7iat ao-cear within System generated ide-Ei.`71'er #`cr Leaf Leaf Data Table

View Data Table A View is made up of a collection of Leaves and hence cards and in turn Elements. Overall View settings can easily be copied from one Repository to another. V_#.ew Name -(descriptive) This a descriptive title used by '##he User ':ic identify the view (we may also have a sh=7 form title for use on menu options) Owner Repository This is the Repository to which this view Repository Data #Unique applies. _- d . '#' Overa#! cu-stomisaticn Some customisa##ior. da#:a exists a## --eve-' da##a e.g. page size, this includes location of waste-bin, pc)s_#_= type of waste-bin etc.) of leaf tabs, default values for Leaf s ttings. 'JInique Id. system generated identifier for V2.ew View Da##a Table Repository Data Table Each user or collaborative Group of Users has one or irinre reposit:ories of data. The identification and admAistrative data is held in ::his taicle toge#._ner w----,-. nhe defaAt View asscciaied wiin the Peposi-_ory. Owner #,,ser/Group- User Each Repository has an owner/adm.inis#-rat-or Data Mnique Id.), Group responsible for it. This can be a single or a Group. V_ew View Data Each Repository '.-,as F, def-au_''# V_-ew. _1110clue 1d. Unioue Id. system generated identifier for Pepo.siL_ory Repository Data Table

'#'r fz# T aUsers can belona to collaborati.ve Groups that can access .shared repositories - this captures information lde-nt -i f:V:LnC :ne Groun and --" 7#s default Recos -i-,--rv --niversal a-'- -ow users to - make Repos-4tories/Views available to everyone, e.g. for public read access. ','ame ;,Qescrip'#Ive. Descri--#-Ive ----t-le for the Crouo als,-) i-.a,,-shorter version for menu labels) Owner User User Data Administrator/owner for the Group this User is resconsible for Reocs#t'-Inries Views etc.) owned L-1, the Group. r Re-cos---ory for -.,.-Ie Group Reocs1torv-Data Unique I Cf L" 4E- a . Sv s t e m. a e n e r a t e d -'a4 -#i I f --" e r f c r S r c Groups Data Table UserGrouc Data Table T h is t a b'L e m a p s 'U's e r S t o G r o u Q s - I t I s ul s e o d e t e rrr,. I rE_ e whic"', 'Users are mem I bers of w . hic I n Groups. Usef = ',,'ser Data IUnilque Name of User belongIng to Group Grc'--o (:;roups Data Groun iden:ii-lier #Unique ld.# Unique Td. System generated identifier for UserGroup linkage UserGroup Data Table

Permissions Data Table This table is used to restrict and manage access privilege to various data in other tables. For example it can be used to limit access to a Repository or view. Associated Data (Unique Unique Id. From any of the following above id.# data tables : Element, Card, Leaf, View, Repository, or Group. Associated Table Table Name of data table to the which the above Name/Data Type identifier refers. Recipient User/Group User or Group to which this permisslon -relates fUnique Id.1 Grantor = fUnique Id.) User or Group that owns this permisslon. Type of Permission Whether the permission relates to abllit-,y read, modify, create, delete, administ-er etc. Un.-Que id. I System generated identifier for Perm_iss#or, Permissions Data Table The Permissions data table is very important. The data car). be used as follows: A Group owner may grant the right to administer 'Group membership to another User. In this case the G'roti-,) owi#er is the Permission Grantor, the second member is t-r-ie Recipient User, the Type of Permission is administration, the AssocJated Data Table is the Group data tahle and Associated Dat.a is the Group to which the second user heincl qiven the permission. A U ser may grant- universal read access to a specif-dc View of a specific Repository. In this case the Permission is set for the View - the Grantor is the User, the Type of Permission is read access, the Recipient Group is the Universal Group and the Associated Data is the View. A Permission of the Repository is created with the same settings. The repository cannot be 'looked' at other than

via a View and so grant-ing Llni.s Repo.si-.ory Permission does n c t a o w _a c c e S s 7 C c #Ih e r e wSz A --roup choose to organ-'se itself wi #'- each 'Jser havinq fuii access to one Leaf each and read access to all the other Leaves. This can easily be achieved by sel,-.ting the appropriate permissions on each Leaf. -'re da:ia'--ase a' so s-#=es a =py of ##-e -,arjo s Ds 1, s e Q to deflne -.he syntax of HTML markup cons-,_ructs. These will be the first of many DTDs to be captured in the database and will form the dataset from which the ru-ieset_s, -reauired to capture and display broader XM7 e'emen--s, ca,:# be develooed and .-ecor'aea. The Iatabase used may be a standard S##L database or other type of relational database, which the web-server accesses via Per-'/CGT, or another i-terface mechanism between the web server and the database. -I"--Ls da:il# se## c'--.T-- above a_'_-Cws arcuos, -,,-Lews, 'eaves, cards, permissions etc. to be customised. The user Interface will now be de SCr4 bed -n greater #_ietail. here are aspects to the ':--eposi#_ory #Jlsef -Lnterface, ("RUI") the representation of the data in a relational --database as described and the Free-form visual user interface, which is one implementation described. Before describ_,ng tne mecnan--,cs of how the vis'-ia-I n-lerface works it -s useful to a#ve a brief descrip# of how the database structure ties in to the practical use of the system:

-."Users" can belong any number of collaborative "(Grcups" (Including none) . The administrator of a group manages the repository access privilege of group members and the administrator can also allow universal read access to a repository. .,se-rs ana Groucs can have one or more Re-Dositor-les. Reoos_-Io_-_-es can have more than one View. The user can sw" tcl# vie-,#s at any time by choosing the desired #:iew fro:-## a drop down menu. Views are constructed of a customisable set of Leaves. The of Leaves can vary, as well as their layout or. t.he s---reen, n the defaul:: layout, the Leaves overlap eacoz'-er w-4-.h non-overlapping --abs at ##he top to a'-low -.,'-e user to swit-'L- from leaf #o leaf. leaves can '-,ave different background colours or images. Leaves provide default customisation parameters to the Cards displayed on them. A Leaf tab can point to a View to be displayed completely within the Leaf to form a type of sub-Leaf. 'his allows the type of multi-level leaf structure `Iustrated in F.-gure 4. eaves d#isclav a of customisabie Cards. _Ea.-_'can he customised or can inherit it-s settings from th#defauit vaiues stored at Leaf level. Customisation includes background colour, including transparent-- ,.r e,,,,en a background image, border type, whether a comment be dls-.#Iayed efl-.c. Eac) card disolavs one E--'em.eranr#, ca.--. #,,ave co-=,e-ts/descrirtions attac-ed, w]-_c1r. c##n !-i-perl_'nks added by the user. Cards ca- --SP-L,-.,! information abouz the page from which the Eiement wa.,; stored, date of last access etc. The card can be repositioned on the screen and resized by dragging the mouse. The card can be moved (or copied) to another Leaf by dragging it onto the new leaf tab. The card can be removed from the view entirely by dropping it on,#_o the

waste bln ic-7"r- cl-#anc#es in custom_-iatlon are re-.urnerj t_- tne server so -Ina-_ the V--ew Is kep7# up -X-; -_# _# 7: e . Each Element represents the ancestor Node of a meaningful collection of Elements stored from a web-s4te via the 21--ent Interface described ear''er. --his is fendere--# -1-v 1,e users w eb-browser t-# appear the card ,,j- -##he custom-'sation set as required by the user. --he previous description described the data structure underlyang the inventlon in some detail. This secl#iion sets how i#]-Is -s tied --in w_`_h --'-e user inteffaCe- P a e n -J e c# -_ f i'#- I' e I r# #: e r fa c e S e ou e - -# L a - _y', a S ,,; a s Q c:-: e for the Client Interface, zhis section will describe how all the key functionality is achieved. C v e .- a I r r e o f -_ h e R e r- o s -. E o r v -_ n -7. e r f a c- e . Open#4 n -..e user accesses a rep-_s_--,=%7 by g #:Jre:'_r 1-c-me-page on the server. This site can also be launched by usinq an extens'on to the browser context menu, as described earli-er. -,.e da#:a Sent = --l-e us-e-r' s web browser -fro-, -:ne respository server consists of 3 main groups: 1. Javascript Code (browser side script) P# fairly s'--bs#:a.-t-Lai plece o'f javascript will be -le-1-ve--ed -,#o the -web browser. 7his would tV_4Cally cached automatically by the user's machine and so there will be very limited performance overhead. Much of the customisation data specific to the Repository/View combination being viewed will be passed to the scrIpt as parameters which the script uses to build the page being viewed, customised for the situation.

The way that the script works and how it obtains, processes and updates the customisation data will described in some depth later. _b CGI/Per! _a#iabase dependent: HTML generated '-, a scri-ct !server side scrIpt). It is preferred to implement the web-server scr_-p-.__'ng and database access using CGI/Per-I b,,.i-: this is not the on'y choice available. -he wav that 7:his code works for the signiffican7: pa_r-:#s of the process wIll be described some detall later. T-e -Irocess wil 1 be sln,,Ilar reaardlesF of !an-_,_,a:,ae --'-o--'ce o- the server. 3, Static HTML. VerV little of "he RUI is static HTML. Most of it is customised for the specific user/repository/view - either by the web-server or by JavascrilDt. Obtained Data. User Details The repository site reads a cookie, containing a username ,and encrypted password combination, specific to the repository server's domain when the user first requests access to the repository. Thids is checked against th## values stored in the User data table, using a simp-le (71, # I C #' V T f -s no coo.,#ie stored of -he user#-ia-.e/i##as#sword coT.'_-,_-nat-.on Is the user Is re.-_p1es*,_e,.-, -,_o '_ry againt of to reqis#ier :I--; t-he s w I :-iole rnec-nan-,sr. is commonpiace on ##ne Tn' not be described 'In more detaill. Default Settlncs Once *#'-e user ',as been validated a--ce-Qs can be had to ail t-e-'-r i:#refe_rerice da#ia -from the User data table. T'i-, i s, includes their default Repository and Group - this data is

-i se d to de -Le rmi ne t- he in, I t la JL d at. a a v thev se- cn R'ji #1.e. :their reposirc)ry home page). The default Repository is looked up in -,-he Repository data --able . ni s then prov--des the se rver based s---- w I th t1ne d e -f a #_ I #,J i e w , w s c,-i s t c ra 4. s a z I -o - d a t a . TI"I i s I n tu r n. i S --used to find all the Leaves included in this View, wir-h their customisation data. These in turn give the cards S m,sa'#3- data and finally --'Ie Elerien-_s T'#_-s data Is obtalne0l bv a -umber of database queries. A sL,'#nifican#i block of HTML data; customisation settings c e r #_ a i n 1' n t c e --- s e r s d e f a u I t R e o o S I o r,.," a n a L t s set-__-nas have -ow bee-, extra_-'#ed from z I -e database. There now follows a description of how the data from the da-#abase _- S de _' I'vered --c browse -- scr ip#_ . There are a number of ways in which this can be achieved but, they involve the same basic principal. The followina de s c r Ibe s a S pe - on u, 1: i n1r, I !#e 1 FRAM E, element, ##he. ',;TML code element for creatina floa--Ina -frames. The browser side script creates a hidden IFFAME element or -ne page, -4,7: is hidden C'17 set'7_ing Its: style pa-rameter accc_-dj_n-_,' Y, whIch. receives -,:,)e data -from the server script by setting the IFRAME's SRC attribute to call a server side script. The following type of co.Tmand would achieve this: document.writeln(" < IFRAME NAME=Ihdnll SRC='/perl/myData.cgi' S--#vLE='visib-'-,!-#-t--y:hiddenl> < /IFRAME>");

During the construction phase of the web page this allows the server-side script 'myData.cgi' to be executed. This server side script in turn creates a new browser side script, within the hidden IFRAME, containing the customisation data we require. This is done by making the database queries mentioned in the previous section, and w-riting the results out into a series of arrays. These arrays allow the data to reflect the hierarchy of items to be displayed. Each piece of element data is stored within a card data array, together with customisation data. The data for a group of cards Is he!(,. in a leaf data array, the leaf data is held within a view array. Once the script (myData.cgi in this case) has finished executing and the results fully loaded into the T FRAME, this data is available to the main browser script. -..ha-,. is controlling the creation of the page. The content of the .IFRAME can be accessed via : document.frames.hciril..arrayvariablename etc. Using the ci)stomisat.ion data from the dalabase. The overall stri#cture of the page .-.I.s determined, r,#ther FITML received from the server or by the script. Th#.S process is very commonplace and will not be described he r(,. At this stage there is a fairly content f ree, perhaps displaying a logo, copyright and terms and conditions statement etc. )nce -he customisation data has been loaded from the server the controlling script proceeds to create the remainder of the web-page. The overall customisat-lon data _s used to add a little more detail to the page for example the choice of wastebin image and by changing the

default colour scheme. This is done by modifying the s#y# , '-e settings of items that already exist- within the DOM and inserting new items, such as the wastebin (the wastebin is added in much the same way as Leaves and Cards which are described below). The required number of Leaves is added, the visibility setting of the default Leaf being set to 'visible' and the others to 'hidden'. On. each Leaf the Cards are draw,-. Leaf construction and manipulation Leaves will be added and deleted by the user after the page has fii-#`.shed loading. Therefore, when first inserting the leaves into #:he document, the same mechanism can be used. The DOM2 provides a standard way for doing t#his, and the two browsers (IE54- and NN6+) provide a convenient, but non-standard, mechanism for inserting it into -.he documen:i. These methods themselves do not form part of the DOM2 specifications but are more efficient than tihe DOM2 met#hodoiogy. In both cases a blank string (myHTML, say) is created. The script loops over the number of Leaves, incrementaily adding HTML as text to myHTML. For each Leaf we do something like the following: ,nyHTM-,,=myHTML+'' < DIV ID='Leafn' STYLE='leafstylen'> < /DIV>" Where Leafn is an identifier for Leaf number 'n' and leafstylen incorporates the customised display settings for the Leaf, making sure that the Leaf Style takes note of which Leaf is to be displayed initially. For NN6 now take myHTML and create a DocumentFragment (a free standing DOM subtree) from it using the createContextualFragment method of the Range Element and

insert it as a new child of the BODY element usina the a-o#)endCl-iild me--'hod. Note that the same result could be ac'rieved by creatina the Element and its attrib-ites one a-a time by using DOM2 compliant methods. Whilst th-Is is a purer approach it is far less efficient. For IE5 take myHTML and use the insertAdjacentHTML method of the Body Element to insert the H1L7ML before the end of the Element. Small 'tabs' are created to appear at the top of each .laver. These are created us# -nQ the same laver tecinc-OC11%, as 7ihe Leaves 'Eh-emselves w_`.,#h iihe DIV elements to . oe an-pronriatelv dimensloned and c-'aced bust ab-11e Leaves themselves. On each C!'J ele-nent is Dlaced a -exT based i-ink. The text of --l-e link is ##"-e -eaf T_4##_'e, the Cus7#=isation data, and #_he HREF at#=-bute is se-,# run a simple javascript function that switches t#he being displayed to the one corresponding to the bei-na clicked on by the mouse. It is possible to use a mouse evens to trigger the leaf switch in place of the H]1.*_-'V approach for more refined handling. The script merely switches the visibility style flag on each Leaf IH#Yei achieve this. Additional I v when a user selects a ta#, backqround colour is changed (usinq its style se, t_inq ,-aqain) to highlight the active Leaf Litle. eaves ca-, be created wltnin the 'laver repre--- b - --ie #ea` , wi`- tabs anrec,#r-g _n a- -ne -o #D o f _=ej-#atelv below the tia",)S for t_'-e maln Leaves -'-is -.s ac'nieved by using a Leaf -ab as a pcinl_er -o another View which is then created within the Leaf #as ooposed to within the BODY of the document). In the above description of creating a Leaf the appendChild (or _,._nsertAdjacentHTML) method is applied to the Leafn element instead of the BODY element.

At any poin,.- t-he user can insert a new Lea'L by running a script function, which can be attached to a button, a main menu item, or the context menu, This script creates a new empty leaf using the same technique as described for creating the other Leaves. In this case there is no data to be obtained from the database so the new leaf settings are set to t-e default levels for the View uniiii they are overwritten by the user. The overall page structure is now set up and the Leaves are displayed. But they have no content. Card construction. Cards are constructed in a similar way to the T eaves. --l this case, however, the card is a more comQlex item to construct. A card has a few core parts: The containing layer, which is the containina outer -boundary of the card; the element layer, a sub layer of the containing layer that contains the Element stored lin the database; the comment layer, a sub layer of the containing layer that contains any comments and additional text fields related to the Element stored in the database; and the resizing layer, a sub layer of the containing -layer that provides a box that the mouse pointer can click on to resize the containing layer and with it the element and comment sub-layers. These layers are called cardLayern, cardSubLayern, cardCmtLayern, cardRszLayern in the following description, where n refers to the card number and is unique within the View. In other words the numbering system does not restart with each Leaf. The customisation settings, passed from the database via the IFRAME element, are captured as STYLE settings associated with each layer that makes up the card

(cardLayerStylen=cardLayern.style, cardSubLayerStylen, cardCmtLayerStylen, cardRszLayerStylen). For each card, a piece of HTML (say 'myHTML') is constructed along the following lines: myHTML=myHTML + " < DIV ID='cardLayern' STYLE='cardLayerStylen'> + 1\ < DIV !D='cardSubLayern' STYLE='cardSubLayerStylen\>"+myElementData+" < /D!V>" + 11 < DIV !D='cardCmtLayern' STYLE='card CMtT ayerStylenl>"+myCo=entData+" < /DIV>" < DIV ID='cardRsvLayern' STYL7-='cardRszLayerStylen\> < /DTV>" -" < /DIV>" Where myElementData is the raw HTML captured by the user and obtained from the database and mycommentData contaIns the comments and descriptors that the user has opted to display. This piece of HTML is then inserted into the approprla*-e Leaf Laver (as opposed to the BODY Element), Since the c-reat-ion o# the cards will cause their associated Elements to be loaded from their reievant t#xir#i party servers (as determined by the SRC attributes oLl images etc.) the order in which they are loaded needs 1,-c# be cont-rolled. The script staggers the creation o-' cards on all but the default leaf, in order to allow t1me torthe cards on the default leaf to be loaded. This delay Jis overruled if the user switches the display to another Leaf. This extra sophistication is built into the leaf switching script attached to each tab (as described in the previous section). A flag is checked to see if the cards on the new Leaf had been created, if not, then the cards are created immediately.

e a( - s o i-# e s e I n q of eac- ] aver is 7_1 and r_'-en ##c _-#e f in-- ##ne =.ens ions as percentages of the containing 'ayer (cardLayern). This means that the layers will all move and resize together. of --a--d --onten-- ##t##red eleme-s and ri-.ean-naful ccilectIons cf elements are being displayed out of the context in which they were created and they may not be displayed the intended way. Some elemen--s provide their dimensions as a maz-##er of 2ourse, as ' s ##he case i#or most. J_mages for example o_- where t-he or-Lginal web publisher required -for a specifi-C layou-.. Tn addition, -he actual height and width of the #1#:-aer#7 a#, `--##-_aved -n the scree- was can#:ured when -he ;_#se_# save-' #_'-e eieme= or--alinalIv. -This information is used to determine the size and shape of the element, as it should appear in its card, and clip --r- i-eg= -,#, ensure :he elemen:s -c not-- sDill 0- =C_ #--e C# C lavers Thfs can be dcne sett-ing the c1ip style setting lor the cardSubLayer. For some Elements, in particular imaQes - with or without assOC 4 az#ed link, the dimensions of the Elemen-:i can be se,# L-_ -resize w--'--"- -_'ane dimens--ons of the cardSub-,Layer. TnIS done by setting their position style to 'absolute' and fixina -.!-heir width and height to fixed percentages of the c a r d S,,_# tl, av e r T'#_-S has the effect of CauSina the lmaae --c change shape as the user changes the shape of its container. This will be possible for other select Elements. For other Elements if the cardSubLayer gets too small to contain the Element then the content will be clipped or scroll bars will appear (depending on the Element --vpe). The scro'.1 bars appear if the overflow style setting of the cardSubLayer is set to 'auto'.

Moving and Resizing Cards, moving cards to another Leaf or dronn,l'na In the Wastebin. With bot- -_E.1- and NN6 browsers mouse even-:s can be attached --o various elements, including the DIV elements from which the card is built. The mo,-se even--s of Interest are : onm.cusedown; onmousemove; and onmouseup. M --es cave been written abouz mol.,ina -ems on web .an,.., ew I" s I a v s u s I' n c e m ou, s e a nd s o a b r o a -_# o - one way of doing this Is given Further information may be found at d e e I -_ r. e n e t- s c a p e . c o m e w S o'u f c e /Oo o dn., a - a m a r- d r a a . onmousedown Once the cards have been created tihe =mousedown eac'- cardiave--n is assigned --c ('engageLayer'). This function now 'listens' for event being triggered by the user's mouse interac-1._,,.ng wltr, this element = tle Sc_#een. T#_* -..-s function wil-' 'n- w-e- --ne #_-ser c--esseS down a =-use bul#it_-n on _'ne of the laver not covered by other items and riot if the mouse butt-or,. is riot pressed down. When it- is called tl-.is alobal variable !'selectedLaver') t#-e e-lement _-e-_,u_-ne-_J by !--'-e even-#i (11,'#,],#=f#-,Tt-.-7ar-qe-, _,E-window.event.srcElement), records the (x,y) ordinates of the mouse when is was pressed dowri and sets the on-mousemove method of the document equa! #o a script #unc-__-L= ;. 'T.c%7e!,ave_-' onmousemove The first thina the scrirt does is test to see if 'selec-#ied-Lave_-' has been set - assuminq has, it now resets the location parameters for the cardLayern by

a cid 4L nu I n --.'n e c- a n a e in u- e x , y o r a n a e s c; f- t h e mouse s-nce --.-le mo,-:se --ast- moved (c--. was _#irs-# pressed own' 'inal Iv x, v : -_--oral lna-:#es of -1 he mouse are uoda-7#ed. -I-e browser causes t"- -Ls methlod to !:#e 1#r4ggered discretely !:#,ut this happens frequently enough that t-he movement of the Card on the screen appears smooth t#o the user. cnmouseup onmouseup method of the document is set to a script function ('disengage') from the moment the layer is fIrst. created. The first 1.Ihing the script does when called is LesL t..o see _-.f 'selectedLaver' has beer. set - assuminrl it has ---- now sets se_-e_-tea-_ayer --c and -_-sets #_ne c-.o,,:semove ol#: the -_-#ocumen-_. --'-.--s g-'ves -..-e ,:Ser --.-e impfess_-o7i -#:hat --he card '-as been '--e*-- go' To imp_-cve ##he user' s experlence w---,- -,---,,--ng cards on 7-e 3creen t-e following S_ -ecs are pe`o-me-#: The background coiour of the cardLayer changes when it Is lengaged'. The whole cardLayer can also be made for transport for movingThe background colour changes back when is ilt 'disengaged'. The z-index, which represents ranking of card images above each other, set to a high value when the Card is engaged. This means -that the Cara appears above the other Cards on the screen. 7his mav be clone by trackinc zine ..ignest, a-located z-index value an-d using a z---'ndex vaiue one areater tI-a- the highes:# used to da-le and update max z-index variable each time --his new high-level is set. --When the user -_brags the Card off the edge of zhe screen there Is a risk tha-_ --he onmouseup method wi';l be missed by the script and the Card continue to move around even though the mouse has been lifted. This is countered by

tracking the edges of the browser window and forc-ing r-ne 'disengace' function to be cal-led eacn time the mouse crosses the edge of the window. Re-sizing is done using the same principals as moving Cards on the screen. in #:hls case however -it is t.-e cardRsz---ave--n '7-hat listens for the onmousedown and the onmousemove events and the attached script funct-lon causes the cardLayern to be resized as opposed to moved. Again the same types of subtle improvements can be added ,chanainc backqrOund colour eT_- c . DroppIng items on a tab or wastebin is accomp-1-is . nea ey checking the mouse co-ordinates when the mouse but,= is released to see if it is within the boundaries of- --he wastebin or one of the Leaf Tabs. if it-- is over t_'Irle wastebin, it Is de"eted and If is over a Leaf #iab _`. i.s :P---,!ed to t-he a-.)rro-oriate 1,eaf. Updating/Modifying. Changes may be submitted to the database incrementai-1,/ (a-, cards are -move-A, droppe 4 n :#he wastebr, or mo-veci a ni -_-# #h e r - e a ' e -- c . r a #'-e e-j of a sesslor. user is asked if they wish #o save #helr new set t i ngs. The mechandcs are the same in either case. A f-hird approach combi.nes t.hose two and allows the updat-es to #jc, ser7- _'M-_'remen-,_a_'__y bjL nr)#i be comm.i#_*-ed to #,re '_#s(-.r conflrms them. data Is sent to the server incrementally, the user dc)es not need -((-) wait for a response from the server before =t1nu--na, this processing goes on --'- the backgrouna. In elther slt',_iazlon it Is irp-portant to ensure that all 7#*'-Ie updated dara has been returned to the server before the main window is closed otherwise some changes will be lost. This can be guarded against by setting the onunload method

for t1_!-ie BODY ElemenT_ of the RUI main window 1.-o g1ve the ose t .:,--e-- -.;-e c.c7#-= ##c delay',- ##he c- ##he -a a has al- rece-'-.Te## .-v L-e server. w,,:, a -a v 'crccesse# w# now be described --'-at can t e r be used -_C i:)a s s ##he 'undates ba--'.K ro --'-e server disruptive messaaes on the user's screen). #;Q no r-:T-T hype metinod On a 'id-der 1FRAYE element. T7 - ij# S e 1wc met#hrjds of _-eturninj dat--a to wet-servers, T.,.e e a C'- W a s -a s e d ea r I I e r b e- C e n Interface to oass the data to be saved to the server, and the 'aet' me --'- oci, Tniq latter method is used here. When used on a form the get method passes the parameters ,T may to be returned to the server as part of the UP ock some-hing , _Lke: ht#r-n: www. -rvdoma in. com/ ca i-bin /do-vour- '.#,cacc -'es=2 T s is callina the script "do-your-stuf"' and passing t_--e x=21- and app'es=210. 7his type of URL does nor have to be created by a form. _-idd#en I,#'RAME element is created and Its SzP.-_ attribute set equal to the URL of the server side script W'th the required parameters tagged onto the end following a '?', the server can read the narameters. Having used the cookie to confirm the identity of the user, the server side script can update their database entries accordingly.

2. Using Cookies to pass data back to the server. Short lived cookies can pass data back to the server. These are created with an expiry time of only a few seconds which is long enough to pass the data back to the server. This is achieved by calling the server script via a hidden !FRAME. Longer lived cookies can be used to hold data being transferred back to the server thereby reducing the risk of the user session being closed abruptly before the data has all been transferred. Each domain only has a limited number of cookies available and so longer Lived cookies would need very careful management. Cards dropped in the wastebin or moving Cards to another T eaf. When a Card I's dropped in the wastebin a messaqe -,-s sento the server (either immediately or at the end of 1-he session depending on how the system is configu--ed" teliing database to delete this Card from the User' S T -eaf (and hence View). If the Element, contained the Card belr#r,# deleted, is not associated with any other Card it is a'lso deleted from the database. When a Card is moved to another Leaf, the databrase is updated to change the Card's Owner Leaf. Next. tim(, -.#,,al View is 'loaded, the Card will appear in the new Ler#f. The script keeps its own record of which Leaf each ca,(" he_'.ong,# to, based or. when the data was first loaded anal Lhe changes the user has executed subsequently and so t-In-, data does not need to be refetched from the database wh(,,r) a new Leaf is displayed. Jpioading data from a user's browser based favorl'tes/bookmark collection: In IE5 making a call, in a script, to 'window.external.ImportExportFavorites' allows the repository server to obtain a copy of the user's collection. Microsoft choose to format this data

in the format c)f Netscape's Bookmark fi1e. In Netscape a signed script can easily be given the permission to obt-a,,.n a copy the user's bookmark file. -n case w-a,,- Is received a-, ##he server Is a se7: of k m a rk s I-. Ne7iscape b okmark e #-rmal- This e s -no a n i,#' T 'e se--_*_#ng cu## 7:he bookmarks #n a HT M d e n 1 -11 on I I s --his Is a well struc#-_,red file consisting largely of < A> type links with text descriptors, that can be easily parsed and uploaded into a .basic set of text based elements and cards in a repository emiDodyinq invention. #-iav= aes--finea --ne con s-- _-on ana -=era#:_-o- of -c--efer-fe--# ernto_#_imer.-._s of #:'Ie inven#_`o- some -Coln--s be --rea-er detal--. The deflnition, of mean Ingfu I collection of elements Is specific to HTML and in particular HTML as it is currently defined. Different -ules would be used for a differer.#_ Mar#_,,r Lancuace and also new rules or modifications to tne add o'#,i g, m a, ce necessarv T .n3d--' icns are made to --he spec, cations of -;T I- r.. 'i e r S t _- #Q - ::ha- t -ne presen t `-vention is -ot limited to HTML or to any particular mark-up language. The rules, whilst hard-coded in the current implementation, could be derived from the HTML DTD referred to below. This type of approach would allow aopl-'ca-#l'or #:o c--'-er visual XXL/SGML --ype applilca:#J_ons. .,n some cases, the is used as a shortcut toidentify the Element e.g. ' < BODY>' instead of an 'Element -Node with a tagName = "BODY"'. In doing so it should be noted that the tag need not always appear in the raw HTML file for the associated Element to exist within the DOM.

1. Skeletal Elements - Used to Stop Node Traversal These are the tags that- are used to stop the travers--na up t'-rouo'- the DOM Node tree. In broad zerms thev orovicie the skeleton c-"' the document. If the sCrIpt encounters elther of the -fc1lcw_i-a of these it stons searc-)_-'n,:T fcr a further parentNode: < BODY> < IFRAME> 2. Base Nodes of Meaningful Collections The Str_i=# Documen: -yce De.11-1tion of elements know as En-_lties ldentifia!Dle as t'-at come under the fo 1 low- na def in it I ons fo--rr. Co=oancestofs --o meaninafu_- collections of ele.menz.s. V t_h.a# one or two elements are over-ruled in the 1--t-St excluded elements below: fontstyle #phrase sp e -cial 9-block 1 n a d d i t- I' fojjC-)Wjnq Eemen!:s are cor.s#dered .mea##J r7#t.!.

< > ase see e P ONT > E:'#: i c t I y spea#i-q t h s s h o u I d; lb e n 0 r P bu#: _-:i ls In very In practice, however, one or two of these may he exc,!#,)Je_.-t as they are not very meaningful. For example < BR> (wit'r.11-i specia-1 is mef (W4#hn a forced line break or < HP,> b SiDe2lal Cases Some elements recelve siDecial ##rea#_-ment In order tc -capture the appropr-ate informatlon. Specifically:

< MAP>, whic"-, is -Mcluded within %special has no meaning without ar. associated < IMG>, < OBJECT> or < INPUT> - the script therefor searches for the appropriate 'partner' element. < BODY> . The content of a BODY Element will be displayed within a DIV Element in the repository so the content is placed within a new < DIV> element instead. -ext Nodes are not elements but a parent Element is created for them that allow them to be added to the repos-,tory. I 4. Non-Meaningful Elements The following Elements are not considered meaningful and -are passed over during all Node traversals, bur they will be included (where possible) within the DOM subtree saved. < DEL>, < '--NS> - these are used to track changes in documen#:s. Deprecated Eiements such as < APPLET>, < CENTER>, < D!R>, < -STNDEX>, < MENU>, < S>, < STRIKE>, < U>, E-'ements that oniy ex1sr w1th the HEAD element such as < META>, < STYLE>. < NOFRAMES>, < NOSCRIPT>. Technically these are meaningful elements but by their very nature will not be saved by the script in the latest browsers. The reason is that IE5 & NN6 support both FRAMES and SCRIPTS and so these alternate tags '-ave no meaning in this context. < HTML>, < HEAD>, < FRAMESET>, < FRAME> cannot be reached by the scr--ot. Elements that exist exclusively within < TABLE>, < FORM>, < OBJECT> where not specifically allowed by other rules - this would include for example < TD>, < TBODY> or < SELECT>.

5. Excluded Elements It is cll-,osen to exclude < SCRIPT> elements as their content can have unforeseen effects on the behaviour o--F the repository. Rules for Treatment of Special Cases For scme types of nodes zhe script, must find assoclatej nodes o-- -data. For example, if a user activates the context menu ove-,- an image map (' < MAP>') the Node returned by the context mer.,_, a=-_ially -he Node 011: --he Map. The Map may ce ,,.se.Q ##v a- MG, -_'7E_-_ECT or INPUT elemen#is to #:lrigoer dlffe-renl# actions, such as moving to different. parts of the paqe o-,- -opening specific new pages. It. is therefore necessary search these other Nodes to find the appropriate e-'ement _s matched tc --he MAP. For example, the collectIon of images in the document, Call be obtained from the array of image Nodes held in 'document.images' within the DOM. It is then a simple. #at#e- #ca- t',--ou-#` 7#`ese to #Find #-_'.-e ima(#fe# -7,a,qe mar. n iDart -7,,#_ar the one #_'s J e -- mar i #, r# which the mouse was placed. OBJECT and INPUT iodes, -_,Dn i;#, searched by examining the NodeList returned by a getElemen#:sByTagName("OBJECT") or a## ##_ne docume-t -'ev-_'. -n anot , ner situation style sheets/sLyie definitions may needed to interpret the class attributes of nodes but t--he presently preferred embodiment extracts the style -n-formarlon cL` each node indeoendent,ly so this is no# necessary. if it, is chosen to capture globa_' style settla_ngs then these can be obtained by a straightforward DOM function call.

-:# , ' c r 7 r _#7 -s fc, _`#Inale --'o b a, i- s o o n Meanlnc#ful Nodes T#: Was s-_a:#eai #il-iat ' < -D>' a-cl ' < TR>l --a(,-s d1d not represen-,. -neanlnc#f,,_#__' collectio-s or e_Lexenlis. _n solation they dc not, without a ' < TABLE>' tag, represent well formed HTML. To the user, however, it is appealing to select rows from tables or groups of adjacent cells. It is therefore made possible to select combinations of nodes which share a common ancestor node type. For examr)1e, table data or table rows could be lifted from the table. in this situation the script would create a new ancestor of --he appropriate type possibly #is_Jna the a-_-:ributes of aCtua-" -#an_e ::--om w-icl-i -#ne#1,7 are bei-c SeleclEively extrac--ed. _F##r example, one or m----e < -D> nodes be su_rrc,_-1ea a < TP.> =_#e. Cne or more < TR> nodes wou_--_# Le bv a < TABLE> node cr a su-'Eable comb-4-ar-ion of < CO-->, < ROW>, < TBC--.'1'> and < TABLE> nodes. lc) u-ndertake z"-Ie #.a,7er approach will require an analysis of the elements of the TABLE and ident1fication of which rows and columns are affected and Picking out the required formatt, . ng information. If complete rows or columns are selected then row and column heading could be picked up also. It- was stated, stri-ctly speaking, that TEXT Nodes do not'. represent meaningful elements. Some of the time Text --)e c-iid.Node of a text fLor.-r,,a7_7_-_-'na Flerr..e##z. #=s ca se n e c c. --lection 3f E-ements are cap-.urea a-.-- #_ne fcrma"##tiina Elemen# level. .-#.owever i:# is qui-#_e common for -ext Code,- to appear independently of forma-!#ting e.ements, 4-o-- example within a Link (or < A>) Node. The embodilme-t m,--st therefore transfo--,r, this -7-ype off Node into an Element in order to save and subsequently display the text. This is done by embedding the text within suitable

neutral formatting element such as a Paragraph ( < '_P>) element. Additionally the < BODY> element can not be saved as is within a < DIV> element. This situation is handled by extracting its childNodes and givinq them a new parent Node of ##ype < DI.V>. ;-aci_'.-#a,7_-'na, In this way, the ccmb_-'#at-;-n, or recharacterisaticn, of 'independent non-meaninqful' elements into one, or more, meaningful collections opens up a vast array of possibilities. rac,#, :-.,q _'-ITY#-, from tl-ie DOM At least 3 differen,## techniques could be emoloved _f7cl- extracting --he pertinent: data f7rorr. !:he D.OM. The first approach described above, scans the Node subTree extracting tagName, attributes, style settings and .nodeValues. The two main alternatives are to clone the Node, and its descendants, or use a non-DOM method imniemen-_ed in _-E land it is be-'ieved in NN6 whelreleased Cloning or. Tiripor#_ing the subTree The actual DOM subTree of an element can be copled, therebv eliminating the need to recreate the HTML, oii_#-`, *cnav- -1.ne crowser parse it tDa--K i-c as a The ano content of the Node and a-'-! -:1--s cescendants can be copied by us"na a cicneNode or inportNade method of the Node in question. Using the deepCione option forces a copy of ail the descendant Node data. This is not a pointer to the original subTree but, with the deepCione option set, a full copy of all its

content. This allows #.he Node data to --ransferred T#o r he new WinaDw. The data MusD_ then be transferred to the database on the repository server. Since there is not a means of transferring t#,.is data to the server in its nata.ve DOM forro, -.t Is necessarv to 'rransai:#e' the data #ntc its -molle raw #_T,'_ crder --c transfer -#'-e data as --ex". If a method is developed to transmit the native DOM aata to the server this approach may offer significant ease of programmt- ng and effciency benefits over the approach '#:-e ocay ci: 1:,e aes-=-Internet Explorer provides access to its own version of t-he im-,lied raw HTML of a Node and its descendants in #he for7t -.f the Because of develo-cer pressure N'Q# ##C' a_50 In-clude thiS lie-c wh-en Is re_ease-#,. T h I _s da t- a i s n o -,- within the DOM specifIcation and shou 1.d not be used If DOM compl-lance Is considered important. 07-her DOM compilant browsers may not offer this field and hence #.he_r '-'sers '--e barred from '_isin# this -1.1'ethod! da-#:a f-e-d was used. There. are efficiency benefits in using this data as iteliminates the need to extract recursively the childNode, at7-ribute, styie and nodeValue data, buL it has si#-,nl fican#: drawbacks. As was descrIbed earl--'.er 'SR(--' 'EREF" ai-#d o-.-her `#'R! '##ype attributes m',= often be modified to ensure that the full path is captured in the database. If the innerHTML data field was used it would be necessary to search it for instances for 'SRC' and 'HREF' and make the suitable amendments. Ensuring that on'Y the instances where 'SRC' and 'HREF' are used as Node

attributes would require involved logic and may well end up being less efficient than recursively extracting the information from the tree. If a suitable - robust and efficient - method was found, then it would be possible to consider the use of innerHTML in a commercial environment. In the description of the repository user interface it was mentioned that a Hierarchical Tabular Representation with Views could be adopted. An example of such a representation is shown in Figure 11. Here, the user has previously saved five elements and has opened the -repository choosing to use a simple tabular interface. Three table headings are shown, although by configuring the site, the user can add as many as she wishes.

The individual images and their links can be re- categorised by selecting the table headings from the drop- down menus to the left of each element. Sub-categories are also available, allowing a hierarchical representation of the bookmarked elements, similar in functionality to the browsers and other online bookmark services, albeit with a visual (as opposed to text-based) representation of the bookmarked elements.

This interface to the repository can be used with the same database structure as was described earlier, but uses --fewer of the customisation settings.

As has been mentioned, the invention is not limited to HTML, but is applicable to any SGML based system including visually representable XML. Many systems developers are storing 'documents' in XML format, to allow easier cross --platform development, conversion from one application to

another and even embedding different types of documents -within each other.

In the near future, sophisticated word processing documents and spreadsheets will become part of a web-page, and vice-versa. The distinction between web-pages written in HTML and other types of documents, now stored in XML, -will become increasingly blurred.

Thus, it is therefore important to recognise that the various aspects of the invention are applicable to all types of XML as long as there is an application, such as the web browsers used or an advanced word processor, that can parse and display this information, and that there is suitable access to the DOM.

The latest versions of the main web-browsers and the specification for the DOM and CSS are anticipating the inclusion of a broader set of markup tags and data into --the web-browsing context. By setting out the rules for defining meaningful elements and collections of elements, as defined by their ancestor, exclusively in terms of the DTD for the XMT being parsed, the various aspects of the invention can be applied to all forms of browser parseable XML.

As long as the browser is able to parse and display the XML then it is possible to capture and store most meaningful elements.

The interface would remain the same as would most of the --underlying code. However, there are some methods specified in the DOM specifically for dealing with XML that would need to be used in place of their HTML equivalents. Implementation of this would be well within the capabilities of those skilled in the art.

The Repository User Interface would be suitable to store, display and organise visually parseable XML, if provided with suitable style sheets.

-some of the special treatment of specific HTML elements, such as the resizing of elements, would not work 'out of the box' and some customisation of the application may be required for specific instances or to take advantage of some of the functionality of specific situations, such as a musical notation implementation that has sound -incorporated.

Various other modifications and enhancements within the scope of the invention will occur to those skilled in the art. The invention is limited only by the scope of the claims appended hereto.

Claims

CLAIMS 1 A method of storing a portion of a mark-up language page comprising the steps of: identifying and selecting the portion of the mark-up language page to be stored; storing the identified portions in a repository, wherein a plurality of identified portions are stored in a non- hierarchical form whereby a plurality of identified portions may be displayed for viewing simultaneously. 2. A method according to claim 1, wherein the repository comprises a plurality of cards, each card comprising a visual representation on screen of a stored identified portion. 3. A method according to claim 2, wherein the cards are arranged into leaves, each leaf comprising at least one card. ---4. A method according to claim 3, wherein each leaf has an index tab. 5. A method according to claim 3 or 4, wherein the cards are moveable around the leaves. 6. A method according to claims 3, 4 or 5, wherein each card may form a part of one or more leaves. 7. A method according to any of claims 4 to 6, comprising arranging a plurality of leaves into views, each view comprising a set of identified mark-up language page portions and their attributes.

<Desc/Clms Page number 75>

8. A method according to claim 7, wherein a given leaf may form a part of a plurality of views. 9. A method according to any of claims 2 to 8, wherein each card comprises a containing layer containing an outer boundary and a first sub layer containing the identified mark-up language page portion. 10. A method according to claim 9, wherein each card further comprises a second sublayer containing text fields associated with the elements to be displayed in each card. __11. A method according to any of claims 2 to 10, wherein the size of the cards is variable by a user. 12. A method according to claim 11, wherein each card further comprises a resizing layer, wherein the size of the card displayed to a user may be varied by the user. 13. A method according to any of claims 3 to 12, wherein the leaves may be customised by a user, whereby the user defines one or more leaves and the cards comprising each leaf. 14. A method according to any of claims 3 to 12 wherein each leaf comprises one or more layers. 15. A method according to any of claims 7 to 14, wherein the views may be customised by a user, whereby the user defines one or more views and the leaves comprising each view.

<Desc/Clms Page number 76>

16. A method according to any of claims 1 to 15, comprising customising the display presented to a user by modifying style settings. .17. A method according to any of claims 1 to 16, wherein the repository is held at a remote server remote from a user and a user can view stored mark-up language page portions by accessing the remote server on-line and displaying the stored portions within a web browser. 18. A method according to claim 17, comprising a plurality of repositories, each repository bing associated with one or more users, the method comprising defining access parameters whereby access to a given user' s stored markup language page portions may be limited to the user, available to any third party or partially restricted according to the access parameters. 19. A method according to any of claims 1 to 18, wherein the cards, leaves and stored mark-up language page portions are stored as customisable mark-up code layers. 20. A method according to claim 19, wherein the customisable mark-up code layers are HTML < DIV> or < SPAN> elements. 21. A method according to claim 19, wherein the customisable mark-up code layers are XML code layers. 22. A method according to any of claims 1 to 21, wherein the selectable mark-up language page portions are mark-up code elements corresponding to one or more of a predetermined set of meaningful elements.

<Desc/Clms Page number 77>

23. A computer program comprising program code means for performing all the steps of any one of claims 1 to 22 when the program is run on a computer. 24 - A computer program product comprising program code means stored on a computer readable medium for performing the method of any one of claims 1 to 22 when the program is run on a computer. 25. A method of storing a portion of a mark-up language page comprising at a user terminal connected to the Internet and running an Internet Browser, identifying and selecting the portion of the mark-up language page displayed in the browser to be stored; and at a remote server, storing the identified portions in a repository, wherein a plurality of identified portions are stored in a non-hierarchical form whereby a plurality of identified portions may be displayed for viewing simultaneously. 26. Apparatus for storing a portion of a mark-up language page comprising: means for identifying and selecting the portion of the mark-up language page to be stored; and a repository for storing the identified portions for viewing in a non-hierarchical form whereby a plurality of identified portions may be displayed for viewing simultaneously. 27. Apparatus according to claim 26, wherein the repository comprises a plurality of cards, each card comprising a visual representation on screen of a stored identified portion.

<Desc/Clms Page number 78>

28. Apparatus according to claim 27, wherein the cards are arranged into leaves, each leaf comprising at least one card. 29. Apparatus according to claim 28, wherein each leaf has an index tab. 30. Apparatus according to claim 28 or 29, wherein the cards are moveable around the leaves. 31. Apparatus according to claims 27, 28 or 29, wherein each card may form a part of one or more leaves. 32. Apparatus according to any of claims 27 to 31, wherein the repository comprises at least one view, each view comprising one or more leaves. 33. Apparatus according to claim 32, wherein a given leaf may form a part of a plurality of views. 34. Apparatus according to any of claims 26 to 33, wherein each card comprises a containing layer containing an outer boundary and a first sub layer containing the identified mark-up language page portion. 35. Apparatus according to claim 34, wherein each card further comprises a second sub layer containing text fields associated with the elements to be displayed in each card.. 36. Apparatus according to any of claims 26-to 35, wherein the size of the cards is variable by a user.

<Desc/Clms Page number 79>

37. Apparatus according to claim 36, wherein each card further comprises a resizing layer, wherein the size of the card displayed to a user may be varied by the user. 38. Apparatus according to any of claims 28 to 37, wherein the leaves may be custcmised by a user, whereby the user defines one or more leaves and the cards comprising each leaf. 39. Apparatus according to any of claims 28 to 38, wherein each leaf comprises one or more layers. 40. Apparatus according to any of claims 32 to 39, wherein the views may be customised by a user, whereby the user can define one or more views and can define the leaves comprising each view. 41. Apparatus according to any of claims 26 to 40, comprising means for customising the display presented to a user by modifying style settings. 42. Apparatus according to any of claims 26 to 41, comprising a plurality of repositories, each repository ha V4 ng an assigned user or group of users. 43. Apparatus according to any of claims 26 to 42, wherein the repository is held at a server remote from a user and a user can view stored mark-up language page portions by accessing the remote server on-line and displaying the stored portions within a web browser. 44. Apparatus according to claim 43, comprising means for defining access parameters whereby access to a user's stored mark-up language page portions may be limited to

<Desc/Clms Page number 80>

the user, available to any third party or partially restricted according to the access parameters, 45. Apparatus according to any of claims 26 to 44, wherein the cards, leaves and stored mark-up language page portions are stored as customisable mark-up code layers. 46. Apparatus according to claim 44, wherein the customisable mark-up code layers are HTML < DIV> elements. 47. Apparatus according to claim 45, wherein the customisable mark-up code layers are XML code layers. 48. Apparatus according to any of claims 26 to 47, wherein the selectable mark-up language page portions are mark- up code elements corresponding to one or more of a predetermined set of meaningful elements. 49. Apparatus for storing a portion of a mark-up language page comprising, at a user terminal connectable to the Internet and running an Internet Browser, means for identifying and selecting the portion of the mark-up language page displayed in the browser to be stored; and at a remote server, a repository for storing the identified portions , wherein a plurality of identified portions are stored in a non-hierarchical form whereby a plurality of identified portions may be displayed for viewing in the user's browser simultaneously. 50. Apparatus for storing a portion of a mark-up language page comprising, at a user terminal connectable to the Internet and running an Internet Browser, means for identifying and selecting the portion of the mark-up

<Desc/Clms Page number 81>

language page displayed in the browser to be stored; and at a remote server, a repository for storing the identified portions, the identified portions being stored for display as sizable cards arranged in one or more leaves, the leaves being arranged in one or more views, each view comprising one or more leaves, whereby a plurality of identified portions may be displayed for viewing in the user's browser simultaneously. 51. Apparatus according to any of claims 26 to 50, wherein the repository comprises a database comprising a plurality of tables including an element data table for storing data about the mark-up elements; a card data table storing information about the display, formatting and positioning of the element data stored in the element data table; a leaf data table for storing data regarding cards which can be displayed in a common leaf; and a view data table for storing data about collections of leaves. A database according to claim 51, comprising a repository data table for storing data regarding individual user repositories. 53. A database according to claim 51 or 52, comprising a groups data table for storing data about groups of users. 54. A database according to claim 51, 52 or 53, comprising a user data table for storing details of authorised system users. 55. A database according to claims 53 and 54, comprising a user group data table for storing a mapping of users to groups.

<Desc/Clms Page number 82>

56. A database according to any of claims 51 to 55, comprising a permissions data table for storing details of access rights of individual users or groups to data stored in other tables. 5#. A database according to claim 56, wherein access rights stored in the permissions table include the extent and nature of the access users or groups have to the data to which they are granted access. A database according to any of claims 51 to 5-7, wherein the element data table stores extracted mark-up code, and address information regarding the mark-up elements. 59. A database according to claim 58, wherein the elements data table further stores information regarding the time of creation of an entry in the elements data table and the time it was last viewed by a user. 60. A database according to any of claims 51 to 59, wherein the card data table stores the location of elements to be displayed each cards together with the display parameters. 61. A database according to claim 60, wherein the display parameters include the size of the card and its position on a display. 62. A database according to claim 59 or 60, wherein the card data table further stores text fields associated with the elements to be displayed in each card. 63. A database according to any of claims 51 to 62, wherein the leaf data table stores a leaf title for display as

<Desc/Clms Page number 83>

a tab, and stores data regarding cards to be placed in each leaf. 64. A database according to any of claims 51 to 62, wherein the permission data table stores data associating permissions granted with one of the element table, the card table, the view table, the group table or a repository table, the user to which a permission relates, the owner of the permission and the nature of the permission. 65. A database according to claim 64, wherein the nature of the permission is selected from the group comprising an ability to read, modify, create, delete and administer data in a given table. 66. A method according to any of claims 1 to 25, wherein the steps of storing the mark-up elements comprises the steps of defining an element data table for storing data about the mark-up elements; defining a card data table for storing information about the display, formatting and positioning of the element data stored in the element data table, defining a leaf data table for storing data regarding cards which can be displayed in a common leaf; and defining a view data table for storing data about collections of leaves. 67. A method according to claim 66, comprising defining a repository data table for storing data regarding individual user repositories. 68. A method according to claim 66 or 67, comprising defining a groups data table for storing data about groups of users.

<Desc/Clms Page number 84>

69. A method according to claim 66, 67 or 68, comprising defining a user data table for storing details of authorised system users. 70. A method according to claims 68 and 69, comprising defining a user group data table for storing a mapping of users to groups. 71. A method according to any of claims 66 to 69, comprising defining a permissions data table for storing details of access rights of individual users or groups to data stored in other tables. A method according to claim 71, wherein access rights stored in the permissions table include the extent and nature of the access users or groups have to the data to which they are granted access. 73. A method according to any of claims 66 to 72, wherein the element data table stores extracted mark-up code, and address information regarding the mark-up elements. 74 . A method according to claim 73, wherein the elements data table further stores information regarding the time of creation of an entry in the elements data table and the time it was last viewed by a user. 75. A method according to any of claims 66 to 74, wherein the card data table stores the display location of elements to be displayed each cards together with the display parameters.

<Desc/Clms Page number 85>

76. A method according to claim 75, wherein the display parameters include the size of the card and its position on a display. 77. A method according to claim 75 or 76, wherein the card data table further stores text fields associated with the elements to be displayed in each card. 78. A method according to any of claims 66 to 77, wherein the leaf data table stores a leaf title for display as a tab, and stores data regarding cards to be placed in each leaf. 79. A method according to any of claims 66 to 78, wherein the permission data table stores data associating permissions granted with one of the element table, the card table, the view table, the group table or a repository table, the user to which a permission relates, the owner of the permission and the nature of the permission. ---80. A method according to claim 79, wherein the nature of the permission is selected from the group comprising an ability to read, modify, create, delete and administer data in a given table.