US20090199082A1 - System and method for annotation of web pages - Google Patents

Abstract

The invention relates generally shared annotation systems. More particularly, the invention provides a method for automatically navigating a document in a display, the method comprising: receiving an annotation related to the document, the annotation generated by a user at a first client; associating the annotation with a first indication in the document; receiving, from a user at a second client, an input to navigate a first portion of a display at the second client, the input causing the first indication to be displayed in the first portion of the display; and in response to the input, automatically displaying the annotation of the display at the second client.

Description

CROSS-REFERENCE TO RELATED APPLICATIONS
• This application is a continuation of U.S. application Ser. No. 12/388,210, filed Feb. 18, 2009, entitled SYSTEM AND METHOD FOR ANNOTATION OF WEB PAGES, which is a continuation of U.S. application Ser. No. 11/099,817, filed Apr. 6, 2005, entitled METHOD FOR CREATING CUSTOM ANNOTATED BOOKS, which is a continuation of U.S. application Ser. No. 10/936,788, filed Sep. 8, 2004, entitled SHARED ANNOTATION SYSTEM AND METHOD, which are incorporated herein by reference in their entireties.
COPYRIGHT NOTICE
• A portion of the disclosure of this patent document contains material which is subject to copyright protection. The copyright owner has no objection to the facsimile reproduction by anyone of the patent document or the patent disclosures, as it appears in the Patent and Trademark Office patent files or records, but otherwise reserves all copyright rights whatsoever.
BACKGROUND OF THE INVENTION
• The inventions disclosed herein relate generally to collaborative systems and more particularly to shared annotation systems.
• Users often wish to collaborate on shared documents in a network. For example, in a business environment, users at different companies may collaborate on a business agreement such as creating a contract or a license agreement.
• One issue associated with network collaboration is synchronicity. For example, users often collaborate by exchanging versions of documents via e-mail or other similar means. A first user edits or otherwise comments a document and then sends the revised version to a second user for further input. The second user makes or otherwise provides their input and then e-mails the new document back to the first user. While the first user is editing the document, however, the second user cannot provide input since they do not possess the current version of the document (currently being edited by the first user) and therefore do not know what changes the first user might be making. Similarly, the first user cannot provide further input while the document is being edited by the second user. It is thus desirable for users to be able to provide synchronous comments and edits without having to wait for other users.
• Another issue associated with network collaboration is application heterogeneity. In existing systems, users must have the same specialized collaboration software in order to collaborate and share information. For example, one current collaborative system by iMarkup Solutions of Vista, Calif. requires both users to download and install a specialized plug-in in order to extend collaborative functionality to the user systems. Many users find this technically challenging to configure or simply inconvenient. It is thus desirable for users to be able to collaborate using tools that are application agnostic and do not require additional specialized software.
• U.S. Pat. No. 6,438,564 discusses a system which allows users to associate discussions within documents. Discussions include comments, annotations, and notes and are associated with documents by associating the discussion with a document identifier. Discussions are stored separately from their related documents. When a particular document is requested by a user, any related discussions associated with the identifier for the document are also retrieved. The system discussed in the '564 application has a number of shortcomings. For example, in the '564 patent, only HTML text associated with a discussion is stored. If the discussion is linked to another item, for example a media item, such as a graphic, a video clip, an audio clip, etc., the media file is not stored in the system database containing the HTML text and other data associated with the discussion. Also, only a link to the media is stored. Thus, if a user desires to use a media item in a discussion, they must first upload the item to a separate web server or else the link in the '564 patent system database to the item will be invalid. This presents users with a significant inconvenience. Further, the system only parses HTML tag data such as paragraphs, lists, images, and tables, to determine a location for a discussion within a document. Discussions are thus limited to hanging off of paragraphs, lists, images, tables, etc. and a user is not, for example, able to link a discussion to an arbitrary word or phrase within the document. This lack of flexibility limits the user's ability to freely comment within a document and also presents a significant limitation with respect to the level of granularity at which a given document may be discussed. Using the '564 patent system, for example, a user could not comment on individual words in a poem which might be highly desirable given the importance of individual word choice in poetry.
• There is thus a need for systems and methods which are application agnostic and allow users to synchronously share annotations regarding a particular document. There is also a need for systems and methods which permit users to place annotations at any arbitrary location within a document.
SUMMARY OF THE INVENTION
• The present invention addresses, among other things, the problems discussed above with shared annotation systems. In accordance with some aspects of the present invention, computerized methods are provided for enabling a plurality of users to collaborate or otherwise provide annotations and other input and feedback related to shared documents and content in a computer network. Users are able to synchronously navigate content via multi-portion displays in which indicators related to the annotations are embedded in document content in a first portion of the display and the related annotations are synchronously presented in at least a second portion of the display. In some embodiments, the system also generates custom documents based on annotated content, provides commerce opportunities related to annotated content, persistently presents selected multimedia content while navigating a plurality of document pages, and accepts and indexes annotations related to visual content elements such as graphics and photographs.
• In one embodiment, the system enables a method for automatically navigating a document in a display having at least a first portion and a second portion, the method comprising: receiving an annotation related to the document, the annotation generated by a user at a first client; associating the annotation with a first indication in the document; receiving, from a user at a second client, an input to navigate a first portion of a display at the second client, the input causing the first indication to be displayed in the first portion of the display; and in response to the input, automatically displaying the annotation in a second portion of the display at the second client.
• In some embodiments, the display comprises a browser window, such as an Internet browser. In some embodiments, the document comprises an electronic book, a digital photo album containing one or more digital photos, a web page, a text document, or a multimedia document. In some embodiments, the annotation comprises a text annotation, such as a comment related to the document. In other embodiments, the annotation comprises a graphical annotation, such as a photograph. In other embodiments, the annotation comprises an audio annotation, a video annotation, a multimedia annotation, or a discussion group related to the document. In some embodiments, the input comprises an input to scroll the first portion of the display or an input to navigate to a portion of the document containing the first indication. In some embodiments, the first indication comprises a graphical indication, such as an icon. In some embodiments, receiving an annotation comprises receiving form data submitted by the user at the first client, such as receiving HTML form data.
• In some embodiments, associating the annotation with a first indication in the document comprises: identifying a portion of the document to which the annotation relates; and associating the first indication with the portion of the document to which the annotation relates. For example, in some embodiments, the annotation comprises a discussion group related to the portion of the document. In some embodiments, the annotation is added to a data structure stored in memory, the data structure comprising a list of annotations relating to portions of one or more documents. In some embodiments, the list of annotations comprises a list of bookmarks. In some embodiments, the system receives input selecting an annotation from the list of bookmarks and displays, in the first portion of the display, at least a portion of a document to which the annotation is related and displays at least the selected annotation in the second portion of the display.
• In some embodiments, associating the first indication comprises embedding the first indication in the portion of the document to which the annotation relates. In some embodiments, embedding the first indication comprises: receiving location data related to the portion of the document; processing the location data to determine a first location within the document relative to a location of the portion within the document; and generating a new version of the document, the new version of the document containing the first indication embedded at the first location. For example, in some embodiments, the location data comprises one or more from the group comprising: a document identifier, a section identifier, a chapter identifier, a bookmark identifier, a portion length, and a portion offset.
• In some embodiments, the invention also includes systems and methods for replacing a first version of the document stored in memory with the new version of the document, for example by overwriting a first version of the document with a new version of the document.
• In some embodiments, receiving an annotation comprises receiving an annotation related to an image contained in the document, for example receiving information identifying one or more subjects of the image. In some embodiments, the system also includes methods for associating the one or more subjects with the image, such as by updating a data structure stored in memory, the data structure storing associations between one or more images and one or more subjects of the one or more images.
• In some embodiments, the annotation comprises a commercial offer, such as an offer to purchase a product related to the document. In some embodiments, the system also includes methods for processing a request by a user at a client to purchase the product, such as methods for transmitting the product and the document to the user. In some embodiments, the system also includes methods for communicating, to a user at a client, an offer to purchase the document and a set of annotations related to the document, such as a set of annotations selected by the user. The system processes the user request to purchase the document and the set of annotations, for example by printing the document and the set of annotations. In some embodiments, for each annotation related to a portion of the document, the system prints the annotation and the related portion of the document on the same page. In some embodiments, processing the user request comprises transmitting the document and the set of annotations to the user.
• In some embodiments, the system also includes methods for authenticating the user at a first client and authorizing the user at the first client to provide the annotation; and authenticating the user at the second client and authorizing the user at the second client to navigate the document.
• In accordance with another aspect of the present inventions, the system includes methods to annotate content of a web page. An indication is inserted in and associated with content according to markup language describing offsets including a starting point and an endpoint for the indication, the starting point and endpoint offsets corresponding to a number of characters from a location within the content. In some embodiments, the system includes program code that captures user inputs identifying selections according to a paragraph identifier, a starting point value, and an ending point value. In some embodiments, the system enables a method for selecting an arbitrary string of characters on a web page and posting the selection, including related metadata, to an application server. In some embodiments, the related metadata includes positional metadata and content identifiers.
• In one embodiment, the system enables a method for creating a custom memory book including original content supplied by a first party, annotations provided by one or more users, and multimedia elements provided by other users. For example, in some embodiments, users create a memory book by customizing existing content provided by content creators. In some embodiments, the original article also generally contains indications and corresponding annotations input by various users responding to the original article. A user can then create any number of custom memory books from the original article by uploading additional multimedia elements and selecting specific annotations to include in their personal memory book. In some embodiments, a user uploads their own personal pictures to replace or supplement the pictures in the original article posted by the content provider. In some embodiments, a user also uses pictures posted as annotations by other users to replace or supplement pictures of the original article or they use additional pictures provided by the content provider or other content providers. In some embodiments, users also select custom annotations to include with the memory book by filtering or otherwise selecting annotations from the set of annotations posted by other users regarding the original article. In one embodiment, a user automatically selects annotation from a list of friends who post annotations. In other embodiments, users select annotations individually or based on criteria such as ratings from other users or annotation type. In some embodiments, the system enables a method for printing and binding the custom memory book, such as by using standard book publishing equipment and techniques.
BRIEF DESCRIPTION OF THE DRAWINGS
• The invention is illustrated in the figures of the accompanying drawings which are meant to be exemplary and not limiting, in which like references are intended to refer to like or corresponding parts, and in which:
• FIG. 1 is a block diagram of a shared annotation system according to an embodiment of the present invention;
• FIG. 2 is a block diagram of functional modules in a shared annotation system according to an embodiment of the present invention;
• FIG. 3 is a flow chart of a method to synchronously navigate shared annotations according to an embodiment of the present invention;
• FIG. 4ais a block diagram of an exemplary screen display of a shared annotation system according to an embodiment of the present invention;
• FIG. 4bis a block diagram of two exemplary screen displays of a shared annotation system according to an embodiment of the present invention;
• FIG. 5 is a flow chart of a method for processing an annotation according to an embodiment of the present invention;
• FIG. 5apresents an exemplary sample of code for an XHTML formatted page of content according to one embodiment of the invention;
• FIG. 5B presents an exemplary sample of code for an XHTML formatted page of content according to one embodiment of the invention;
• FIG. 6 is a flow chart of a method of annotating a visual element according to an embodiment of the present invention;
• FIG. 6A is a flow chart of a method of recreating a page of content according an embodiment of the invention;
• FIG. 6B is a flow chart of a method of processing an element during page creation according to an embodiment of the invention;
• FIG. 7 is a flow chart of a method of providing a customized document related to a shared annotation system according to an embodiment of the present invention;
• FIG. 8 is a block diagram of a sample page from a customized document related to a shared annotation system according to an embodiment of the present invention;
• FIG. 8A is a screenshot of an exemplary article page of a memory book according to an embodiment of the present invention;
• FIG. 8B is a screenshot of an exemplary comments page of a memory book according to an embodiment of the present invention;
• FIG. 8C is a screenshot of an exemplary dynamic print page according to an embodiment of the invention; and
• FIG. 9 is a flow chart of a method of presenting a selected multimedia element while navigating a document in shared annotation system according to an embodiment of the present invention.
DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENT
• Preferred embodiments of the invention are now described with reference to the drawings. As described further below, systems and methods are presented regarding a shared annotation system. A plurality of users collaborate or otherwise provide annotations and other input and feedback related to shared documents and content in a computer network. Users are able to synchronously navigate content via multi-portion displays in which indicators related to the annotations are embedded in document content in a first portion of the display and the related annotations are synchronously presented in at least a second portion of the display. In some embodiments, the system also generates custom documents based on annotated content, provides commerce opportunities related to annotated content, persistently presents selected multimedia content while navigating a plurality of document pages, and accepts and indexes annotations related to visual content elements such as graphics and photographs. Additional aspects and features of the system will also be appreciated by one skilled in the art as further described below.
• FIG. 1 presents a block diagram of a shared annotation system according to an embodiment of the present invention. As shown, the system includes one or more clients includingfirst client105, asecond client110, and annth client115, connected to anetwork120, acontent server125 including acontent processor130 communicatively coupled to adata store135, and one or more additional computers including amoderator computer140, anadministrator computer145, and asupport computer150.Clients105,110, and115, and other computers in the system, including personal computers and other computing devices known in the art including personal digital assistants (“PDAs”), tablet computers, cellular telephones, and other devices. The clients are communicatively coupled to thecontent server125 via acomputer network120, such as the Internet or a local area network (“LAN”). Users of the client's devices collaborate or otherwise provide annotations and other input and feedback related to shared documents and content in the network. The users collaborate or otherwise provide annotations regarding the content via one or more software modules including a display module. For example, in some embodiments users interact with content and provide annotations via a web browser, such as Microsoft Internet Explorer or Netscape Navigator.
• Thecontent server125 contains acontent processor130 and other modules directed to receiving and processing user requests regarding content. Requests include annotations regarding content, requests for new content, navigation inputs regarding content, and other user requests. Thecontent server125 is communicatively coupled to adata store135. Thedata store135 stores a variety of data including document content for delivery to users, user account and registration information, annotations and other information generated by users regarding content, and other related data. As used herein, annotations generally include content-related input provided by users including text input, graphical input, audio input, video input, and other types of input, associated in some way with a particular selected character sequence in a primary set of content. For example, a user may input a textual comment or a user may upload a picture related to content. A user may also provide a voice recording or other recording related to content or even a video clip as an annotation. Annotations may also include a discussion group or other similar forum or means to facilitate threaded discourse or other interaction between users regarding a particular portion of a document. For example, a user may find a particular paragraph of a document very important and create a location-specific discussion group regarding the paragraph as an annotation.
• Additional computers are also connected to thenetwork120 and interface withcontent server125 and client computers to provide additional functionality. For example,moderator computer140 may be used by a moderator to review and approve user comments and annotations. Anadministrator computer145 may manage other aspects of user interaction with the system such as user registration or security related issues. Support personnel may usesupport computer150 to interface with users and provide additional assistance or help regarding user concerns. Additional computers of remote clients may also be employed or used by role-based personnel such as a picture moderator, a comments moderator, a topic approver, a new edition creator, a discussion group moderator, etc.
• FIG. 2 presents a block diagram of functional modules in a shared annotation system according to an embodiment of the invention. The system is implemented using Model View Controller (“MVC”) architecture as known in the art. Four tiers are presented including aclient tier153, apresentation tier163, and anapplication tier167, as well as adata store135 or integration tier containing the data model. In some embodiments, modules are distributed among one ormore content servers125 andclients105,110,115. The system may also implement multiple tiers and distribute modules to distribute functionality in order to improve system efficiency or otherwise load balance processing operations.
• Theclient tier153 includes ahighlight module155, asynchronization module157, anannotation module159, and aview modes module161. The client tier includes code, such as JavaScript code, that executes on various pages, such as DHTML pages. Thehighlight module155 is generally directed to managing selection and highlighting of annotations and text in the original content. For example, if a user clicks on an image annotation, the highlight module manages highlighting the corresponding text in the first portion of the display as well as the image annotation in the second portion of the display. Conversely, if a user selects or otherwise interacts with an annotation in the second portion of the display, the corresponding text or other visual elements are highlighted in the first portion of the display by the highlight module.
• Thesynchronization module157 manages relationships between original content in the first portion of the display and corresponding annotations in the second portion of the display. In the second portion of the display, annotations are presented corresponding to content in the first portion of the display as the user scrolls the first portion of the display. Similarly, when the user scrolls the second portion of the display containing annotations, the first portion of the display also synchronously scrolls ensuring that original content in the first portion corresponding to the annotations in the second portion is consistently displayed. Thesynchronization module157 also prevents unnecessary scrolling which might cause flicker. For example, no scrolling is performed if an icon or other indication present in the first portion of the display corresponds to an annotation already visible in the second portion of the display. Thus, the second part of the display is scrolled to find the next annotation only when a navigation input changes the display such that an indication in the first portion of the display disappears and vice-versa.
• Theannotation module159 generally manages and processes annotations of images and other multimedia content. For example, when a user selects a photo for annotation, theannotation module159 presents a rectangular selection box over the photo that may be resized to precisely indicate the portion of the photo to which an annotation refers. Multiple selection rectangles or other selection shapes may be drawn over a photo each corresponding to individual annotations. Upon receipt of an appropriate input, for example when a save or post annotation(s) button is selected, the annotation module also handles communicating the selection input(s) and related annotation information to other modules of the system as further described herein.
• Theview modes module161 generally manages and controls presentation modes for content. For example, the view modes module switches between modes such as “embedded mode” in which indications or icons are presented inline with original content, “non-embedded mode” in which indications are presented to the left of the original content with one indication type per paragraph, and “memory book mode” in which indications are aggregated by type and presented inline at the end of individual paragraphs as opposed to directly in the text or to the left of the text.
• Thepresentation tier163 generally includes a number ofmodules165 running code within the web container. Thecode modules165 generally include a controller responsive to data and inputs received from theclient tier163 as well as thebusiness tier167.Exemplary code modules165 correspond to modules of thebusiness tier167 as further described herein and include a back office module, a book module, a bookmark module, a comment module, a conversion module, an ecommerce module, a print module, an image module, a media module, a profile module, a search module, and a user management module.Code modules165 provide a bridge between application logic provided by the business tier and client inputs or presentation outputs.
• Thebusiness tier167 generally includes a number modules including aback office module169, a book orcontent module171, abookmarks module173, auser management module175, a content serialization module (“CSE”)177, amedia module179, acomments module181, astatistics module183, aconversion module185, anecommerce module187, aprint module189, apersonalization module191, aprofile module193, asearch module195, apayment gateway module197, and aprint services module199. These various modules support a variety of internal administrative operations and actions, as well as process and respond to user actions in the presentation tier.
• Theuser management module175 is generally responsible for handling user-related operations such as registration, authentication, and membership rights and approvals (such as for administrators, regular members, etc.).
• The book orcontent module171 generally manages and directs content-related operations such as navigation to other pages and tracking user preferences. For example, thecontent module171 tracks preferred viewing modes and last pages visited for users. Generally, the content module is not directly responsible for serving content, however, since this is handled and resolved in the presentation tier by the corresponding book code module of the presentation tier and other code modules for the sake of improved performance.
• Thebookmarks module173 generally manages the user's private bookmarks list for content and annotations. For example, thebookmarks module173 maintains a data structure containing pointers to locations for content or annotations that a user may wish to revisit or otherwise mark as a favorite. When an input is received selecting a bookmark, the system automatically navigates to and presents the related content or annotation corresponding to the selected bookmark.
• Thecomments module181 is generally directed to processing operations associated with posing annotations. For example, thecomments module181 manages inputs posting or replying to annotations, applying automatic moderation to posted annotations, and notifying moderators when annotations trigger various notification filters. In some embodiments, thecomments module181 also notifies annotation authors when a reply or other corresponding annotation is posted regarding their authored annotation. Similarly,media module179 processes graphical annotations and other graphical information provided by users. For example, themedia module179 processes photo, video, and audio annotations processing posts and notifying moderators of certain posts, as well as managing user replies. In some embodiments, the media module also processes video annotations by capturing and presenting a particular frame (such as the first frame) as a thumbnail image representing the video in the annotations portion of the display.
• Thecontent serialization engine177 interfaces with thedatabase135 to lock content, update content, and otherwise process user annotations. TheCSE177 facilitates content delivery among multiple users. For example, when a first user provides an annotation regarding a particular page of content, in some embodiments,synchronization module165 locks that page and prevents access to the page by other users until the annotation process is complete. In some embodiments, theCSE177 maintains a queue of new annotations and processes annotations by creating new content pages and media pages containing the new annotations as further described herein.
• Thestatistics module183 generally tracks data related to posted annotations. For example, in some embodiments, thestatistics module183 tracks the number of annotations posted for each page in a given document and presents an indication of which page has the most number of new posts or a certain number of posts within a given period of time, such as in memory book mode as further described herein.
• Theprint module189 is generally directed to printing or otherwise outputting content according to user inputs and preferences. For example, theprint module189 creates PDF files or other document files for versions of content output such as dynamic print and memory book creation as further described herein.
• Theconversion module185 is generally responsible for processing and formatting raw original content for use by the system and for users to annotate. For example, the conversion module parses original content into paragraphs, formats the content for presentation, and creates bookmark IDs or other identifiers for each paragraph used by theCSE177 to create new pages when annotations are added as further described herein.
• Theecommerce module187 processes payments and generally handles monetary transactions associated with use of the system. For example, the ecommerce module manages shopping carts and other purchase vehicles, processes credit card payments and other payments, and also interfaces with other modules such as integration modules including thepayment gateway197 andexternal print services199.
• Thepersonalization module191 and theprofile module193 are generally responsible for processing inputs regarding user accounts. For example, theprofile module193 processes user administrative requests regarding password and address changes. Thepersonalization module191, sometimes in conjunction with theprofile module193, handles other inputs such as associating a personal photo or icon to present next to user postings or in a user's business card, as well as other general information about the user such as hobbies, favorite websites, etc.
• Thesearch module195 is generally responsible for indexing and processing search operations on both original text and on annotations. For example,search module195 allows users to search not only document content, but also annotations provided by other users and other information. Users can search for annotations provided by a particular user, for a particular text string contained in annotations, and input other search expressions to locate information.
• The system also includes various modules, such as apayment gateway module197 and aprint services module199, for integration with external or third-party systems. For example, in some embodiments thepayment gateway module197 provides an interface to process all or part of the payments using a third-party payment provider. In other embodiments, theprint services module199 provides an interface for printing special jobs, such as hardcover book binding or other types of book creation of content, using a third-party or other external print services provider.
• The business tier also includes acommons module201. The commons module generally includes a utility library of various APIs and other system calls used for interfacing with the operating system, hardware components, thedata store135, modules in the various other tiers, etc.
• FIG. 3 is a flow chart of a method to synchronously navigate shared annotations according to an embodiment of the invention. The system receives an annotation generated by a first user at a first client,step230. For example, the system receives a text comment related to a document or a picture related to the document. The annotation is associated with a first indication,step235. For example, the annotation may be associated with an icon or other indication embedded in the document. The system receives input from a second user at a second client to navigate a first portion of a display at the second client,step240. The navigation input causes the first indication to be displayed in the first portion of the display at the second client. In response to the input, the system automatically displays the annotation in the second portion of the display at the second client,step245.
• Conversely, the system also processes and navigation inputs navigating the second portion of the display. Thus, the system also can receive an input from a second user at a second computer to navigate a second portion of a display at the second client. The navigation input causes the annotation to be displayed in the second portion of the display at the second client and, in response to the input, the system automatically displays the first indication in the first portion of the display at the second client.
• In some embodiments, the system divides content into a plurality of pages. Thus, a book might be divided into chapters and each chapter formatted as a particular HTML or other similarly encoded page. The system loads an entire page of original content into the first portion of the display and also the entire page of related annotations for the page in the second portion of the display. In some embodiments, the system first loads only those annotations corresponding to indications immediately displayed upon loading the page into the first portion and then loads annotations corresponding to off-screen indications which achieves, among other benefits, a performance boost in terms of load times. As further described herein, code such as a JavaScript synchronization module monitors user navigation inputs and mouse inputs and states to determine whether and when to synchronously scroll or otherwise display indications and their related annotations in the first and second portions of the display.
• For example, a JavaScript event or other similar program code returns identifiers corresponding to indications that are visibly displayed in the first portion. In some embodiments, the system employs a naming convention correlating indications with annotations. Thus an indication labeled I1 would have its corresponding annotation labeled A1 and an indication with an identifier of I2 would have its corresponding annotation identified as A2, etc.
• When a navigation in put is received relating to the first portion of the display, the system determines, based on the JavaScript event data and indication identifiers, any indications visible in the first portion of the display and then automatically executes JavaScript code or other program code to display, in the second portion of the display, their corresponding annotations according to the naming convention. For example, if the system identifies indication II as visible in the first portion of the display, then it automatically executes code to display A1 in the second portion of the display. In some embodiments, when a number of indications are visible in the first portion of the display and there is insufficient screen space in the second portion of the display to display all of the corresponding annotations, the system, starting with the first indication displayed, displays as many corresponding annotations as possible in the second portion of the display.
• In some embodiments, when a navigation input is received related to the second portion of the display, the system determines, based on the JavaScript event data and annotation identifiers, any annotations visible in the second portion of the display. The system also determines any indications visible in the first portion of the display as previously described herein. If the first portion of the display already shows the indication corresponding to the first annotation appearing in the second portion of the display, then the system does not redraw the screen. If the corresponding indication in the first portion is not displayed, then the system executes JavaScript code or other program code to display, in the first portion of the display, the indication corresponding to the first annotation appearing in the second portion of the display according to the naming convention. For example, if the system identifies annotation A1 as visible in the second portion of the display, then it checks if indication II is visible in the first portion of the display. If the indication is not visible, the system automatically executes code to display II in the second portion of the display.
• Thus users at a plurality of clients are able to view content, as well as collaboratively annotate and view annotations provided by other users. For example, several users may negotiate a contract by sharing feedback and other annotations to produce a final version of the contract. The annotations would later serve as a record of positions regarding various clauses of the contract, how the document was created, who was in favor of various positions, etc. In some embodiments, the system also provides user authentication and secure access to content, allowing only a limited number of authorized users to access and/or annotate content. Thus, adverse parties are presented with a secure space in which they can collaboratively and synchronously annotate content. As another example, a school might post a number of photographs containing unidentified subjects. The system would provide a means for registered alumni or other parties to identify the subjects for the school archives, etc.
• FIG. 4A presents a block diagram of an exemplary screen display of a shared annotation system according to an embodiment of the invention. Adisplay250, such as a browser display or other software application display, is divided into a first portion of252 and asecond portion254. Thefirst portion252 contains information content provided by a server and thesecond portion254 contains annotations related to the content in the first portion.
• A user requests content from the content server and the content is delivered via the network to the user at a client and presented in the first portion of thedisplay252. Content may include, for example, the text of a book, graphical content such as a picture album or photo album, a proposed legal document or business agreement, multimedia content, or other types of content. For example, the text of a book appears in thefirst portion252 of thedisplay250. Indications associated with user annotations are embedded within the content of the first portion of the display. Thus,indication256 corresponding touser annotation262 and indication258 corresponding touser annotation264 are embedded in the content of thefirst portion252. Theactual annotations262 and264 are presented in the second portion of thedisplay254.
• In some embodiments thedisplay250 also includes athird portion260 including additional references to indications contained in thefirst portion252. For example, as shown,additional indications266, and268 corresponding toindications256 and258 are presented in a third portion of thedisplay260. Users can scan the third portion of thedisplay260 to quickly determine whether indications exist in the content presented in the first portion of thedisplay252.
• The system also presents navigation interfaces such asscroll bars272 and274, as well as amenu bar276 at the bottom of thedisplay250 which provides users with an interface to navigate a document divided into chapters/sections or jump to additional pages, etc. The system also presents standard interface elements such as final, edit, view, favorites, tools and helpmenus278 as known in the art and common in Internet browsers.
• In addition, the system presents a plurality oficons280 designed to provide an interface for common operations that users might want to perform when viewing content such as a document, a photo album, or a book. Icons presented allow users to zoom in, zoom out, add a comment or annotation at a specific location within the content, highlight a specified region within the content, annotate a picture for a specified location, annotate video for a specified location, annotate audio for a specified location, create or interact with a discussion group related to the content at a specified location, perform a search, or resize the portions of the display.
• FIG. 4B presents a block diagram of two exemplary screen displays of a shared annotation system according to one embodiment of the invention. The twoscreen displays282 and300 show versions of the same display at two different points in time. The display is divided into afirst portion284 and asecond portion286. The first portion contains content as well asindications288 and290 associated withuser annotations292 and294 respectively. Navigation means, such asscroll bars296 and298, are also provided.
• As previously described, a user navigating thedisplay282, for example, by usingslider296, would cause thedisplay282 to change as shown in asecond screen display300 of the same display at a later point in time after the system processes the navigation input. The user scrolls the content in thefirst portion284 such thatindication288 disappears from thefirst portion284 andindication302 appears. Similarly,annotation292 associated withindication288 automatically disappears in thesecond portion286 of thedisplay300 andannotation304 corresponding toindication302 automatically appears in thesecond portion286. As previously discussed, the system also conversely scrolls content in thefirst portion284 of thedisplay282 when a user navigates content in thesecond portion286 of thedisplay282. For example, the system automatically scrolls content in thefirst portion284 of thedisplay282 according to a user input, such as ascroll bar slider298 or other similar means, to navigate annotations in thesecond portion286 of thedisplay282. Thus, anindication288 corresponding to anannotation292 in thesecond portion286 of thedisplay282 would automatically appear or disappear in thefirst portion284 of thedisplay282 when thecorresponding annotation292 appears or disappears in thesecond portion286 of thedisplay282 according to a user navigation input.
• FIG. 5 presents a flow chart of a method for processing an annotation according to an embodiment of the present invention. A user selects content via a selection tool or other means,step330. For example, a user might employ a text tool to highlight and select several words in the text of a document which the user wishes to annotate with a textual comment, an uploaded picture, a video, a sound recording, etc. JavaScript event code or other program code related to mouse inputs and other user inputs captures various metadata regarding the user selection. For example, the event code captures and returns a unique paragraph identifier tag, a starting point value or offset (in characters from the start of the identified paragraph, pixels, or other metrics known in the art), and ending point value or offset.
• While the example discussed herein with respect toFIG. 5 relates to processing a text selection, those skilled in the art will recognize that the process could similarly apply to selecting other forms of multimedia content including pictures, video, etc. For example, in one embodiment a user can crop one or more areas of a picture the user desires to annotate. For example, a user could crop a single area of a picture for an annotation or a user could crop several different (or overlapping) areas of the same picture for several different annotations. The user selects the area using a rectangular cropping tool. The system captures the x,y coordinates of the corners of the rectangle to create a mapping or overlay representing the selection of the original image. Once the image area is selected the user may also assign additional attributes to the selection (such as a person name, a product identifier, a price, a location, a theme, a date, etc.). In some embodiments, users may also indicate a frame or other location in a video using similar selection means for individual frames of a video.
• The system expands the selection to an appropriate level of granularity,step335. A user might select several letters of a word and the system might expand the selection by highlighting the entire word. In some embodiments, for example to preserve system resources or to limit annotations from cluttering a screen or for other design-related considerations or specified goals, the system imposes a pre-set limit on the ability of a user to annotate text to a certain level of granularity. Thus a user may only be able to annotate whole words or only words at the end of a sentence. For example, if a user were able to annotate every individual letter of words in a text, a single word such a “Kennedy” might have as many as seven distinct indications (corresponding to the total number of letters in the word) presented with the word. This would likely render display of content in the first portion of the display extremely cumbersome and severely limit the ability of the system to efficiently present information to users.
• Similarly, the system may also limit the number of indications presented related to particular sections of text or other content. Indications may be consolidated or combined in the interest of making content more readable, visually comprehensive, or otherwise accessible. For example, annotations provided by four different users might be associated with a single indication embedded in the content and displayed in the first portion of the display rather than with four separate indications in the first portion. In the second portion, however, each individual annotation provided would automatically be displayed when its corresponding indication is presented in the first portion of the display.
• After the user selects the desired content, the user indicates its desire to post an annotation related to the selected content,step340. For example, a user may select a section of text and then click a “post” button or icon. The system presents a form or other similar input mechanism,step345, which allows the user to input and submit/upload the desired annotation to the content server,step350. For example, a form window may open allowing the user to input a text annotation or a tree-view directory structure may be presented allowing the user to select a file (such as a picture, a video, an audio clip, etc.) to upload as an annotation.
• The annotation input by the user and any related metadata are then uploaded via the network to the content server and stored in the data store for further processing,step355. The system generally communicates metadata indicating, among other things, the desired position of the annotation within the content of the first portion, the user's identity, the type of annotation, etc. For example, in one embodiment, JavaScript code captures the events of a mouse click indicating the beginning of a selection, mouse drag changing the x,y coordinates for the selection, and a mouse up or un-click ending the selection. This data is saved into an HTML form attribute and transmitted to the server when the form is submitted. In some embodiments, as further described herein, the system also indicates the position of a desired annotation by providing metadata indicating an offset from a particular starting point within the document content and a selection length corresponding to the user selection ofsteps330 and335. For example, if a user selects text several sentences into a paragraph or other arbitrary section of a document, the system may communicate metadata indicating, from the start of the paragraph or other section, an offset corresponding to the number of characters at which the annotation begins and a length corresponding to the number of characters selected for the annotation.
• In some embodiments, the system uses a content serialization engine (“CSE”) or other similar means to lock the page of the document to which the annotation relates,step360. In some embodiments, this prevents multiple CSEs from accessing and updating the page at the same time. For example, in a parallel processing environment or other environment supporting multiple CSEs in the same system, each CSE locks an individual page prior to updating the page to prevent other CSEs from accessing and simultaneously updating the page which would create problems such as content synchronization, etc. In some embodiments, the CSE lock also prevents other users from requesting the page from the content server while the system is processing the user's submitted annotation and embedding a related indication in the page of the document.
• As discussed, the system parses the metadata associated with the annotation,step365. Using the length, offset, and other data provided with the metadata, the system determines a location in the document content at which to embed an indication corresponding to the annotation. The system then recreates the original page (including any additional pages created by the annotation) to embed an indication corresponding to the annotation,step370, and updates the database with the new page,step371. In some embodiments, the system replaces the old page stored in the database with the new page. In other embodiments, the old page is retained in order to track document versions and related annotations. The CSE lock is removed,step372 and users at other clients are then able to request, retrieve, and view the new page containing the new indication corresponding to the new annotation.
• FIG. 5A presents an exemplary sample of code for an XHTML formatted page of content containing an indication corresponding to an annotation which would be presented in the first portion of a display according to one embodiment of the invention.
• The code sample uses various XHTML elements such as Div elements, Span elements, Highlight elements, and Content elements to present the content and corresponding indication.
• Divelement class shrdbk_main373 is a div element that wraps the whole book text. In some embodiments, this element is used in a non-embedded mode to separate the indications or book items icons from the page text/content. Thus, a user would be able to toggle presentation of content both with and without indications being displayed.
• The system also uses a number of different types of Span elements. Span elements are tags generally used to group inline elements in a document.Span element shrdbk_start_element374 is span element that is used as an indicator for the start location of the related text of the book item. The id attribute contains the type of the book item or indication (‘C.’ for comment, ‘I’ for image, ‘A’ for audio and ‘V’ for video), an identifier for the indication, and a starting location of this element in a numerical representation corresponding to a number of characters or other metric (e.g. .sub.—554). The indication identifier is used in varying embodiments to distinguish between indications and also to assist in content navigation, for example if a user wishes to jump to the next indication, etc.
• Span element shrdbk_end_element375 is a span element that is used as an indicator for the end location of the related text of the book item or indicator. The id attribute contains the type of the book item, the book item id, and a location or offset of this element in a numerical representation (e.g._—681).
• Span element shrdbk_icons376 is a span element that contains the image of the icon or indication to be embedded. For each location in the content, such as the book text, a different type of indication icon is used to represent each different type of annotation (e.g.—text annotation, multimedia annotation, etc.). The image element that is included for the indication represents the type of the items and the index number of the first item at this location, according to its appearance order within the book text.
• Highlights Div elements idYellow, idFirstLine, andidLastLine377 are a set of div elements that are used for highlighting the related text corresponding to the annotation. For example, when a book item is selected, by clicking on its title, the text range that represents the related text is located according to the start and end span elements. Text rectangles are created from the given text range and these div elements positions are set according to the text rectangles.
• For each shrdbk_icons span element there is also a corresponding div element,Content Div378, which includes a representation of each of the item(s) that the span element contains for the specific location. This div element is generally displayed when the mouse cursor is over the image icon. The div element contains links for the related text of each of the book items and when clicking on those links the related text is highlighted. In some embodiments, another role of those links is to synchronize the media area/first portion with the current viewed item. Thus, when the user clicks on one of the links except from the highlighting of the related text, the media area automatically scrolls to the appropriate item in the second portion of the screen. In some embodiments, if the current displayed items have a different type from the item that was clicked, the type of the viewed media is changed to the equivalent type according to clicked link.
• FIG. 5B presents an exemplary sample of code for an XHTML formatted page of content containing an indication corresponding to an annotation which would be presented in the first portion of a display according to one embodiment of the invention.
• The code sample also uses various XHTML elements such as Div elements, Span elements, Highlight elements, and Content elements to present the content and corresponding indication. More specifically, the code sample provides exemplary span elements for presenting content in embedded and non-embedded modes.
• For example, spanelements379 are used for displaying icons and other content in non-embedded mode. The element at the beginning of the paragraph is used as an anchor for the book item icon. The content element is placed in the bottom of the HTML document and includes the book item title as well as any relevant functionality.
• Spanelements380 are used for displaying icons and other content in embedded mode. Here, the element within the paragraph is used as an anchor for the book item icon. The content element is similarly placed in the bottom of the HTML document and includes the book item title as well as any relevant functionality.
• In addition,Span elements381 present exemplary uses of span elements as start and end anchors for highlighting selected or annotated content.
• FIG. 6 presents a flow chart of a method of annotating a visual element according to an embodiment of the present invention. In some embodiments, users may wish to provide annotations corresponding to visual elements such as pictures or video clips. Thus, the user views a visual element, such as a picture,step385, and selects a picture element to annotate,step387. As discussed, in some embodiments, the user might use a selection tool to crop or otherwise select picture elements, for example, by drawing a box around or otherwise selecting a person in a photo.
• The system then presents an annotation form or other input means, step389, and the user inputs and submits the annotation,step391. In some embodiments, the system allows the user to submit multiple annotations for a single picture. Thus, in these embodiments, control may return to step387 for the user to select additional picture elements. For example, the user may select a first element and input an annotation for the first element and then select a second element and input a second annotation for the second element, etc. The annotation(s) are then uploaded via the network to a content server and stored in a data store where they are associated with the visual element(s),step393. In some embodiments, the system also maintains and updates an index of annotations corresponding to visual elements,step395. For example, users may provide annotations identifying subjects in visual elements and the system maintains an index of identified subjects cross-referenced with their corresponding visual elements. Using search means known in the art, users could access such an index to locate all visual elements in a content document, such as a photo album, a book, etc., in which a particular subject appears. The content serialization engine then locks the page, embeds any required indications in the original content as previously described herein, and updates the original page in the data store as previously described herein,step397.
• FIG. 6A presents a flow chart of a method of recreating a page of content according an embodiment of the invention. Once the content serialization engine locks the page, the system retrieves the existing page from the data store and a list of all related annotation to content and indications of the page,step399. The system determines if any elements of the page remain to be processed,step401. For example, content generally comprises various XML tag elements corresponding to user selections and other content related to annotations. In one embodiment, the CSE organizes elements into a list corresponding to their location on the page. If no further elements remain to be processed, control proceeds to step408 and the routine ends.
• Otherwise, the system determines whether the next element in the list is associated with a content identifier,step403. For example, in one embodiment, the system determines whether the element has a sharedbk XML tag identifier. If the element does not have an identifier, then it is generally not associated with an annotation and recreation of the element is generally not required and thus control passes to step407 and the system proceeds to process the next element in the list.
• Otherwise, the system checks for annotations related to the element,step405, and recreates the element, step406 as further described herein. For example, in some embodiments, elements associated with annotations are associated with unique content identifiers. Thus, an element and all its related annotations might share the same or related content identifiers according to embodiments of the invention. After the system determines which annotations relate to the current element, the system recreates the element,step406, inserting any necessary indications, rollovers, or other items as further described herein.
• FIG. 6B presents a flow chart of a method of processing an element during page creation according to an embodiment of the invention. After the system determines that an element should be recreated (or in some embodiments originally created), the system orders all annotations associated with the element into a list according to their location,step409. Thus, for a particular sentence, paragraph, page, etc. the system creates an ordered list of all annotations using the offsets and location metadata stored with the annotations. If no further annotations remain to be processed, control passes to step417 and the routine exits. Otherwise, the system processes the location metadata associated with the annotation to determine the location in the first portion of the display to place an indication or icon corresponding to the annotation in the second portion of the display,step411.
• The system processes the annotations in the list to determine whether there are multiple annotations associated with the same location,step412. If there are multiple annotations, then the CSE creates the XHTML code or other code, inserting a multiple annotation indication or icon,step413. If there are not multiple annotations, then the CSE creates the XHTML code or other code, inserting a single annotation indication or icon,step414. For example, in some embodiments, certain indications indicate that they correspond only to a single annotation. An image indication corresponds to an image annotation, an audio indication corresponds to an audio annotation, etc. In other embodiments, if multiple annotations are made at the same location in the original content in the first portion of the display, the system embeds or otherwise places a multiple annotation indication which indicates that more than one annotation has been made at a particular place in the original content.
• In some embodiments, the CSE also creates XHTML code or other code, generating a rollover action associated with the indication,step415. For example, the CSE engine retrieves metadata associated with the annotation(s) for a particular location and indication which lists a title for the annotation, the annotation's author(s), etc. The system then proceeds to process the next element,step416 and control returns to step410.
• FIG. 7 presents a flow chart of a method of providing a customized document related to a shared annotation system according to an embodiment of the present invention. A user may view a book on home repair in which the main document content of the book provides chapters on framing, wiring, plumbing, etc. Within each chapter, other users may have provided annotations related to various tasks described, etc. One user might indicate a particular brand of pipe that they found useful in completing a certain project or a particular type of light fixture well-suited to applications. Another user might provide additional photographs of their project with additional text comments, etc. to supplement the information of the original book. Thus, users may wish to view and wish to purchase or otherwise obtain customized documents, including these related annotations and other items such as tools required to complete certain projects, etc.
• For example, as shown inFIG. 8, a block diagram of asample page455 from a customized document according to an embodiment of the present invention is presented. Thesample page455 includes thedocument content460 corresponding to the content of the document presented in the first portion of the display. In some embodiments, thepage455 also includes annotations and other comments related to thedocument content460 such astextual annotations465,picture annotations466, audio orvideo annotations467, annotations related todiscussion group content468,advertisements469, links torelated merchandise470, and other information. Those skilled in the art will appreciate that this information could be presented in a variety of manners or layouts. For example, as shown inFIG. 8, thedocument content460 is centrally displayed and surrounded by related annotations including callouts to indications contained in thecontent460 and other visual cues.
• Thus, returning toFIG. 7, the user selects a particular book edition,step420. A user may select among a number of different books or documents containing content related to a desired subject or a user may only select certain chapters within a book. For example, a user may consult a home repair manual, but only be interested in the chapter on plumbing or on wiring and not wish to be provided with the entire book.
• The user also determines and selects annotations they wish provided with their customized document/book,step425. A user may wish to be provided with all annotations related to the desired content, only annotations authored by an arbitrary/particular user, only a specific annotation containing certain information the user finds useful, such as supplemental photos, video, other types of annotations, etc. In some embodiments, the system also offers the user a promotion or other offer associated with the content and the user determines whether or not to accept the promotion,step430. Thus, a user purchasing a home repair manual chapter related to dry walling might also be presented with the option to purchase items and merchandise related to the project such as hammers, nails, screws, plaster, tape, drywall, or even other books or information related to the project. For example, the system may also offer a video of how to complete a sample project for an additional premium.
• If the user accepts the promotion or offer, the user selects the related merchandise or otherwise complies with responding to and accepting the offer,step435. Otherwise, control passes directly to step440 and the user selects a particular format for the customized document.
• For example, a user may wish a hardcopy paper version of a customized document or they may prefer to receive the document electronically or some combination thereof. As necessary, the user also selects a delivery method, such as via mail, express mail, download, etc.,step445. The user also inputs any necessary payment information, personal information, registration information, license information, or other information required to complete and process the transaction,step450.
• FIG. 8A resents a screenshot of an exemplary article page of a memory book according to an embodiment of the present invention. A memory book generally comprises a customized printout of content and related annotations. In some embodiments, memory books are compiled and bound according to user preferences.
• For example, in some embodiments, users create a memory book by customizing existing content provided by content creators. Thus, for example, a content provider might use the system to post an original article to the Web containing text, photos, and other multimedia elements recounting or otherwise related to an event such as a Harley Davidson rally or a Britney Spears concert. The original article also generally contains indications and corresponding annotations input by various users responding to the original article. A user can then create any number of custom memory books from the original article by uploading additional multimedia elements and selecting specific annotations to include in their personal memory book. For example, a user attending the Harley Davidson rally can create a memory book containing photos, annotations, and other elements related to that user's own personal experience at the Harley Davidson rally. As another example, a user attending the Britney Spears concert creates a memory book related to their own personal concert experience with their own photos from before the show, after the show, photos from during the show, related annotations, the user's own textual inputs, etc.
• For example, a user who went to the Harley Davidson rally uploads their own pictures taken at the rally to replace or supplement the pictures in the original article posted by the content provider. In some embodiments, a user also uses pictures posted as annotations by other users to replace or supplement pictures of the original article or they use additional pictures provided by the content provider or other content providers.
• Users also select custom annotations to include with the memory book by filtering or otherwise selecting annotations from the set of annotations posted by other users regarding the original article. In one embodiment, a user automatically selects annotation from a list of friends who post annotations. In other embodiments, users select annotations individually or based on criteria such as ratings from other users, annotation type, etc.
• Thus, a user creates their own personal memory book from the original article. The personal memory book generally contains the text and other content of the original article including additional pictures, text, videos, and related annotations selected or otherwise input by the user. As further described herein, the user then has the option to print out the memory book and have it bound or otherwise preserved, for example as a souvenir.
• An article page of a memory book generally includes article text of the original content along with embedded photos with captions, embedded indications, and other items as further described herein. Generally, the presentation of the article page is formatted as closely as possible to the view a user would be presented with online. In some embodiments, however, the pagination is different since the content is now being produced on a printed page as opposed to on a display. Indications and other content elements, however, are generally presented in the same location within the content as they are presented in a display, thus enabling users to quickly reference between online and printed versions.
• The article page includes one or more of the following: aheader471, embedded images472,image captions473, embedded icons orindications474, and afooter475. Theheader471 generally remains consistent across pages throughout a memory book, thus unifying content presentation, etc. In some embodiments, the header includes a graphic, such as a logo, and heading text which may be used by the system to create a table of contents, an index, etc. Embedded images472 include images originally presented in the original content as well as images selected by a user for inclusion in the memory book. For example, a user creating a memory book of a trip might select only particular photos from a set of photos for inclusion within the memory book. In some embodiments, images472 also contain animage caption473 which may include the poster's username, the date the photo was posted, a title for the image472, etc. Embedded icons orindications474 generally appear in the same location of the content as they do when presented in a display. In some embodiments, however,icons474 are renumbered for each individual page (e.g.—starting from 1 for thefirst indication474 on each page) and thus the numbering scheme forindications474 may differ from the online version of the book. In some embodiments, the article page also contains afooter475 containing the book's title, page number, publisher information, etc.
• FIG. 8B presents a screenshot of an exemplary comments page of a memory book according to an embodiment of the present invention. The comments page of a memory book generally includes comments and other annotations input by users online and generally is included on one or more separate pages falling after the article page as opposed to on the same page as the article text itself. The article comments page includes one or more of the following: a header476, a sub-header477, a comment orreply icon478, acomment title479, a username and date ofpost480, a comment text orother annotation content481, one ormore replies482, and comments by various types of members483.
• The header476 of the article comments page is generally a graphic and corresponds to the header of the article page of the memory book.Sub-headers477 indicate the printed page in the memory book which contains the article to which the annotations are related. Comments or replyicons478 are generally graphics indicating a type of comment. For example, a text comment might have a balloon with text in it as anicon478 and an audio comment might have a musical note as anicon478.Comment titles479 indicate any heading a user inputs to associate with their comment. In some embodiments, comment titles are printed in different colors according to the type of user. For example, comments by regular members might be printed in black, comments bymoderators482 in red, etc. In some embodiments,comment text481 is also displayed in varying colors according to user types. In some embodiments, a username and date ofpost480 are also displayed for each annotation.Replies482 associated with comments may also be presented.
• FIG. 8C presents a screenshot of an exemplary dynamic print page according to an embodiment of the invention. Dynamic print pages are generally formatted to include comments and other annotations just below the text to which they refer. As shown, the page includes theoriginal text484 including inline indications corresponding to the first portion of the display. The page also includes annotations such as text comments, images, etc. as would be presented online in the second portion of the display.
• FIG. 9 shows a method of presenting a selected multimedia element while navigating a document in shared annotation system according to an embodiment of the present invention. When viewing a multi-page document or viewing several documents, users may wish to visually retain presentation of a multimedia element, such as a chart, a table, a picture, etc. from one page while viewing content on another different page. For example, a user viewing several pages of a document related to a particular company's financial outlook might find it useful to retain a chart of the stock price or a table of pro forma income projections from one page while viewing information on a second page. In some embodiments, the system achieves the goal by allowing users to select a multimedia element and then floating the selected element on top of or integrating the selected element with subsequent pages that are viewed.
• Thus, the user selects a multimedia element in a first page, such as a picture, using various input means previously described herein,step495. The selected element is identified in the content database,step500, and floated or otherwise displayed in the browser window,step505. For example, the user client communicates the selected element identifier to the content server which retrieves another instance of the element and floats the element in the browser window containing the original content or displays the selected element in a new window or frame. In some embodiments, the system recreates the first page, removing the selected element and floats or otherwise displays the selected element over the location in the content where the selected element previously resided. In other embodiments, the system does not immediately float or otherwise display the selected element, but instead only identifies the selected element and only floats the selected element when the system receives input to navigate to a second page,step510. In some embodiments, the system retrieves the original version of the second page stored in the database,step515, and creates a new second page to display by modifying the second page and embedding the selected element from the first page,step520. The modified second page is then presented with the original second page content now including the selected element,step525.
• Systems and modules described herein may comprise software, firmware, hardware, or any combination(s) of software, firmware, or hardware suitable for the purposes described herein. Software and other modules may reside on servers, workstations, personal computers, computerized tablets, PDAs, and other devices suitable for the purposes described herein. Software and other modules may be accessible via local memory, via a network, via a browser or other application in an ASP context, or via other means suitable for the purposes described herein. Data structures described herein may comprise computer files, variables, programming arrays, programming structures, or any electronic information storage schemes or methods, or any combinations thereof, suitable for the purposes described herein. User interface elements described herein may comprise elements from graphical user interfaces, command line interfaces, and other interfaces suitable for the purposes described herein. Screenshots presented and described herein can be displayed differently as known in the art to input, access, change, manipulate, modify, alter, and work with information.
• While the invention has been described and illustrated in connection with preferred embodiments, many variations and modifications as will be evident to those skilled in this art may be made without departing from the spirit and scope of the invention, and the invention is thus not to be limited to the precise details of methodology or construction set forth above as such variations and modifications are intended to be included within the scope of the invention.

Claims (20)

1. A method for allowing users of web browsers to annotate a web page, the method comprising:

displaying with one or more computer processors, a web page comprising content, annotation indicators and annotations, wherein the web page comprises a first display portion and a second display portion;

displaying in the first display portion of the web page the content along with the annotation indications wherein the annotation indicators are embedded directly into a portion of the content to identify the portion of the content associated with the annotation indicators such that the annotation indicators continue to be displayed in association with the selected content when a user varies the size of the web page, adds to the content, or zooms in on portions of the content;

displaying in the second display portion, the annotations;

displaying the web page to a first user;

receiving from the first user an indication of a first selected portion of content and a first annotation, updating the first display portion of the web page to display a first annotation indicator associated with the selected portion of content and updating the second display portion of the web page to display the first annotation;

displaying the web page to a second user while the web page continues to be displayed to the first user;

receiving from the second user an indication of a second selected portion of content and a second annotation, while the web page continues to be displayed to the first user, updating the first display portion of the web page to display a second annotation indicator associated with the selected portion of content and updating the second display portion of the web page to display the second annotation; and

displaying the web page to a third user;

receiving from the third user, an input to navigate to the second annotation in the second display portion, and in response to the input, automatically scrolling the content in the first display portion of the web page displayed to the third user, so as to display the second annotation indicator in the first display portion that is associated with the second annotation.

2. The method ofclaim 1 further comprising allowing the first user to select and deselect via a web browser, annotations in a first group of annotations to create a first list of preferred annotations.

3. The method ofclaim 1, further comprising selectively filtering the annotations based on user input to create a list of preferred annotations.

4. The method ofclaim 3, wherein selectively filtering the annotations is based upon at least one of the group consisting of a list of user friends, individual user selection, ratings from other users, and annotation type.

5. The method ofclaim 1, wherein the selection of the portion of content comprises selection of a paragraph represented in the web page by a paragraph identifier tag.

6. The method ofclaim 1, wherein the selection of the portion of content comprises selection of a portion of an image embedded in the web page.

7. The method ofclaim 1, wherein selecting the selection of the portion of the content comprises the selection of an arbitrary string of characters from the content in the web page, and further comprises expanding the location data to include whole words in which characters from at least one of the whole words are included in the selected string of characters.

8. The method ofclaim 1, further comprising capturing a paragraph identifier tag for a paragraph within the web page in which the selected portion of content is located.

9. The method ofclaim 1, further comprising storing a list of annotations on a server.

10. The method ofclaim 9, wherein the list of annotations comprises a list of bookmarks.

11. The method ofclaim 10, wherein selecting an annotation from the list of bookmarks displays, in the first display portion, at least a portion of the content to which the annotation is related and displays at least the selected annotation in the second display portion.

12. A method for allowing users of web browsers to annotate a web page, the method comprising:

displaying with one or more computer processors, a web page comprising content, annotation indicators and annotations, wherein the web page comprises a first display portion and a second display portion;

displaying in the first display portion of the web page the content along with the annotation indications wherein the annotation indicators are embedded directly into a portion of the content to identify the portion of the content associated with the annotation indicators such that the annotation indicators continue to be displayed in association with the selected content when a user varies the size of the web page, adds to the content, or zooms in on portions of the content;

displaying in the second display portion, the annotations;

displaying the web page to a first user;

receiving from the first user an indication of a first selected portion of content and a first annotation, updating the first display portion of the web page to display a first annotation indicator associated with the selected portion of content and updating the second display portion of the web page to display the first annotation;

displaying the web page to a second user while the web page continues to be displayed to the first user;

receiving from the second user an indication of a second selected portion of content and a second annotation, while the web page continues to be displayed to the first user, updating the first display portion of the web page to display a second annotation indicator associated with the selected portion of content and updating the second display portion of the web page to display the second annotation; and

displaying the web page to a third user;

receiving from the third user, an input to navigate to the second annotation indicator in the first display portion, and in response to the input, automatically scrolling the annotations in the second display portion of the web page displayed to the third user, so as to display the second annotation in the second display portion that is associated with the second annotation indicator.

13. The method ofclaim 12 further comprising allowing the first user to select and deselect via a web browser, annotations in a first group of annotations to create a first list of preferred annotations.

14. The method ofclaim 12, further comprising selectively filtering the annotations based on user input to create a list of preferred annotations.

15. The method ofclaim 14, wherein selectively filtering the annotations is based upon at least one of the group consisting of a list of user friends, individual user selection, ratings from other users, and annotation type.

16. The method ofclaim 12, wherein the selection of the portion of content comprises selection of a paragraph represented in the web page by a paragraph identifier tag.

17. The method ofclaim 12, wherein the selection of the portion of content comprises selection of a portion of an image embedded in the web page.

18. The method ofclaim 12, wherein selecting the selection of the portion of the content comprises the selection of an arbitrary string of characters from the content in the web page, and further comprises expanding the location data to include whole words in which characters from at least one of the whole words are included in the selected string of characters.

19. The method ofclaim 12, further comprising capturing a paragraph identifier tag for a paragraph within the web page in which the selected portion of content is located.

20. The method ofclaim 12, further comprising a separately stored list of annotations and selecting an annotation from the list displays, in the first display portion, at least a portion of the content to which the annotation is related and displays at least the selected annotation in the second display portion.

Images