A COMPUTER IMPLEMENTED METHOD FOR CHANGING A FIRST SITE S INTO A SECOND SITE S'

FIELD

[0001] The present invention provides a computer implemented method for changing a first Site S into a second Site S'. The present invention also provides a page image method to build a page image data structure for each Page of at least one Page of a Site S, wherein the page image data structure may be utilized in a graphic modification of the Site S.

DEFINITIONS

[0002] As used herein, the following terms are associated with the following meaning: [0003] "String" means a finite sequence of bytes.

[0004] "Web Server Application" and "Web Server" mean an application running on a server that, mainly but not exclusively, responds to a request from a browser program executed in a client by producing an output consisting of at least one software entity, at least one of which is a String that is intended to be interpreted as HTML by the browser. A Web server can, for example, interpret one or more portions of code, written in a Server Script Language (defined below) and stored in a recording medium, in order to process the requests from the browsers and produce the above-mentioned output.

[0005] "Server Script Language" means a programming language that may be used to control the Web Server. Some examples of script languages are PHP, PERL and ASP.

[0006] "Browser Script Language" ("BSL") means a programming language interpreted by the browsers in order to perform several functions and/or operations. Some examples of the above-mentioned functions and/or operations are: changing the HTML of a Web Page (defined below), alerting the users with a message and exchanging data to and from the Web Server. Some examples of Browser Script Languages are the Javascript and the VBScript. [0007] "Browser Script Code" ("BSC") means at least one portion of code written in a Browser Script Language.

[0008] "Web Resource" means a software entity that is intended to be visualized, rendered and/or interpreted by a browser. Some examples of the Web Resources are HTML Strings, BSC, CSS definitions and several types of Images, that usually the browser interprets to properly render a Web Page (defined below).

[0009] "Page Resource Set" means a collection of related Web Resources that a Web Server makes available to a browser in a client as a response to at least one request of a set of related requests (in this document said at least one request of a set of related requests is simply referred to as "request") of the browser.

[0010] "Web Page" and "Page" mean the one or more Web Resources in a Page Resource Set displayed, rendered and/or interpreted in a browser.

[0011] "Web Site" and "Site" mean a collection of related Web Pages, each of which has an address with a domain unique for all the Pages of the collection.

[0012] "Site Resource Set" means a collection of Web Resources each of which is included in at least one Page Resource Set of a Page of the Site.

[0013] "Site Server" means the server from which the Site is available to one or more clients.

[0014] "Site Code" means a collection of related software entities that are memorized in the Site Server and are intended to be interpreted, executed and/or simply transmitted to the client by a Web Server Application in order to make up the Site Resource Set. Some examples of software entities that may be included in the Site Code are a file with a PHP script, a PNG image and the content of a table in a MYSQL™ database. [0015] A "Framework" means a generic and wide-spread Site whose Site Code a Site Maintainer can customize to build a customized Site. Some examples of Frameworks are Joomla! ^® , Drupal™ and SugarCRM ^® .

[0016] "Appearance" means the layout, the organization, the visual appearance, the look and/or the manifestation of a Page and, by extension, of a Site.

[0017] "GUI" means a Graphical User Interface making available at least one

functionality disclosed in the present invention to a user in a browser.

[0018] "Site Maintainer" means a user who is authorized to create, modify and/or delete any part of the Site.

[0019] "Visitor" means a generic Site consumer that navigates the Site without utilizing the GUI.

[0020] A "change" (made to the Site and/or to a Page of the Site) means any action performed by the user, the action altering in any way at least one of the Appearance of the Site and the operation of the Site. Some examples of changes are: modifying a font style, a font size or any other property of a HTML element of a Page, moving a HTML element from side to side of a Page, adding a Page to the Site and adding HTML elements to a Page.

[0021] "To change (the Site S)", "to edit (the Site S)", "to modify (the Site S)" and "to make changes (to the Site S)" mean to change the Site S into a second Site S' by performing at least one change to the Site S.

[0022] "To publish (a change)" means to make the change available to any Visitor when the Visitor simply navigates the Site with no additional action performed.

[0023] "To patch (a file or a String)" and "to apply a patch (to a file or to a String)" mean to add at least one adding String after and/or before a specific position of the file or of the String and/or to replace a specific portion of the file or of the String with a replacing String. A "Patch" means the replacing String and/or the adding String.

[0024] A "Web Development Application" ("WDA") means an application to make changes to Sites, the application running locally on the computer of the user of the

application.

[0025] "Bookmarklet" means a link containing a Browser Script Code that is executed by the browser as soon as the user of the browser clicks the link. The Bookmarklets may, for example, be saved by the user in the browser's favorite list.

[0026] "CPU Usage", refers to one or more operations carried out by a computer. It is a generic measure of how much these operations keep busy the one or more CPUs of the computer. It is not used as an absolute measure, but compares the impact of different methods and/or operations on hardware.

[0027] "Current (time)" and "currently" (unless otherwise specified) refer to the instant at which the action in the context of the sentence in which these words are used in this document is actually performed.

BACKGROUND

[0028] In the prior art, Web Sites are usually modified by the Site Maintainers via a Web Development Application ("WDA") or via one or more tools provided by several Sites, wherein the one or more tools are accessible to the Site Maintainers from one or more restricted access areas of the Sites. In order to edit a Site S via a WDA, a Maintainer usually modifies a copy of the Site Code in its local computer. Once the Maintainer achieves the desired goal of changing the Site S into the Site S', it may synchronize the Site Code of the Site Server with its local copy of the Site Code so as to make the Site S' available to the Visitors. Usually the Maintainer changes, adds and/or deletes one or more files of the Site Code that are utilized by a Web Server to produce one or more Page Resource Sets related to one or more Pages of the Site S. Depending on the tools provided by the WDA and on the complexity of the functionalities of the Site, the Maintainer may be required to have various skills: for example, it may need to know more or less in depth one or more Server Script Languages utilized in the Site Server, one or more Browser Script Languages utilized in the Site S, one or more libraries of the above-mentioned programming languages that may be also utilized in the Site, the HTML and the CSS. Also, various graphic skills (for example, to retouch an image of the Site) and web graphic skills (for example, to add a border to the main body of a Page) may be required to the Maintainer. A Site, as any other software project of average complexity, is therefore usually developed and maintained in a sequence of modifications by one or more Maintainers, each of which may be specialized in one or more skills; for these reasons, the usage of a Version Control System (VCS) is often strongly recommended together with a WDA.

[0029] In the prior art, the one or more Maintainers may incur the problems described below. One problem is the many-to-many relationship between the one or more

modifications performed by the Maintainer to the Site Code and the one or more effects of such one or more modifications to the Appearance and/or operation of the Site. For example, a modification to a CSS definition in a file may affect multiple Pages that utilizes said CSS definition, and it may also affect multiple HTML elements in the same Page. On the other hand, a single change of the Appearance and/or operation of the Site might require multiple modifications to multiple files of the Site Code. Said many-to-many relationship may be difficult to manage by a Maintainer, and partial help comes from the usage of the VCS. For example, the Maintainer may commit multiple modifications on multiple files of the Site Code to a VCS repository so that they are grouped into one version of the Site in VCS. The Maintainer may identify the modifications of such a version as one change performed to the Site, for example, by means of a text that the Maintainer itself may enter before committing the modifications so as to describe the change. However, in spite of the VCS aid, the management problems related to the intrinsic non-linear correlation between the cause (the modifications to the files) and the effect (the changes to the Site) persist and frequently cause additional time spent in the Site maintenance (including development, deployment and testing phases) that is proportional to the complexity of the Site and of the changes. Reverting (or "undoing") a single change may also not be easy. For example, if a sequence of changes have been committed to a VCS repository as subsequent versions of a Site and the change C has been performed (and committed as a version) before the changes C and C", the changes C and C" must also be reverted so as to be able to revert the change C. The behavior described in the example above is not due to the VCS usage per se, but to said non-linear correlation between the modifications made to the files and the changes resulting in the Site, which requires the sequentiality of the changes to be preserved in order to avoid unpredictable mutual effects of each change to each other. An example of the tools provided by the Sites to the Maintainers to modify the Sites themselves is the Article Manager of the Joomla! ^® Framework, by means of which the Site Maintainers are allowed to edit various Pages of the Sites built with Joomla! ^® . The content of said Sites may be textually managed in Joomla! ^® , and several additional Joomla! ^® extensions are also available so as to manage the subsequent revisions of the Pages as in VCS. The management of the Site with Joomla! ^® , and more in general with a tool for Site modification, is therefore not exempt from the above-described problems as well as from the problems and/or limitations reported below.

[0030] Herein, a browser program (simply referred to as "browser") is an instance of a software application for retrieving, presenting, and traversing (such three actions can be summarized by the term "browsing") information resources made available by a Web Server, and the type of a browser (or "browser type") is a category including browsers having an analogous behavior. Examples of browser types are Chrome, Mozilla FireFox , Opera, Internet Explorer ^® 8 and Internet Explorer ^® 9. As well as the above-mentioned software applications and tools to manage a Site, the Maintainer may need additional software applications and/or tools, for example, to retouch the images of the Site or simply to retrieve the color in a certain point of the Page so as to use said color in a change. Generally speaking, in the prior art, various software applications and/or tools to automate and to partially-automate various actions commonly performed to change a Site are missing, insufficient or at best not integrated with the other software applications and tools. Some examples of said commonly-performed actions are, from the simplest to the most complex: moving or copying an element to another position, changing one or more colors of an element, changing the background of a Page, adding a gradient to the background of a Page, adding an animation to a Page and adding a pull-down menu to a Page. The Maintainer, after having performed a change to the Appearance and/or operation of a Site, furthermore usually needs to verify that said Appearance and/or operation remains the same if the Site is browsed using each of the most frequently used types of browsers. If one or more discrepancies are found with one or more of said browser types, one or more further development, deployment and/or testing phases may be needed so as to make the Site cross-browser compliant. An additional limitation of the prior art is due to the lack of an abstraction level of the changes performed to the Sites with respect to the modifications of the Site Codes. Because of this lack of abstraction, for example, the Maintainer must often manually apply one change to multiple elements of a Page and/or of different Pages. For example, the Maintainer may need to perform a modification to different parts of the Site Code so as to apply one change to multiple elements that it intends to modify, unless the modification involves i) one or more properties defined in a CSS definition of a class used in all the multiple elements, or ii) one or more parts of the Site Code that are utilized by the Web Server to generate all the multiple elements.

[0031] A user of the Site S may, for example, modify a Page P of the Site S as its own modified copy P' of the Page from its browser via one or more tools that may be embedded in the browsers, that may be installed in specific types of browser (for example the "Firebug" add-on of Mozilla Firefox) or that may be loaded on the Page from a third-party server (for example the "Firebug Lite" tool). Then the user may, for example, save locally the Page Resource Set of its modified copy P' of the Page by using the "Save Page As" command available in the most-commonly used browsers. Such a technique may be utilized, for example, to produce a scratch of the changes to perform to a Site, even if it has some of the disadvantages described above for the changing of the Site by the Maintainers. Said technique may be also utilized by a user to customize a Site for which it has no Maintainer right, so as to have, for example, one or more static copies of one or more Pages of the Site saved locally in its computer. Said one or more copies, being static, are generally not updated with the content of the Site S starting from the instant at which they are saved, so that their usefulness is limited.

SUMMARY

[0032] An aspect of the present invention is to provide the users of Sites with a method to modify the Sites that they visit and to record the modifications in a storing entity (defined later herein) so that the modifications that they perform may be subsequently applied to the Sites (either manually or automatically) when the Sites are browsed again, even though the users have no Maintainer right for the Sites. For example, the modifications performed to the Site S by a user U are available i) to be shared between users so that a user LP may utilize the modified version S' of the Site S and ii) to be applied to multiple Sites so that a user may apply said modifications to a Site T different from the Site S.

[0033] Another aspect of the present invention is to provide the users and the Maintainers of the Sites with a method to modify the Pages of the Sites directly as they are browsed, so as to solve the problems related to the above-mentioned many-to-many relationship between the modifications performed to the Site Code and the effects of such modifications on the Site and to the lack of an abstraction level of the changes to the Sites. Each of said modifications is thus also available, for example, i) to be stored in a storing entity, ii) to be retrieved and applied to the same Page P from which it was initially performed, iii) to be retrieved and applied to a different Page Q, and iv) to be published or unpublished so as to be visible to the Visitors of the Site (for the Maintainers only).

[0034] A further aspect of the present invention is to provide the users and the Maintainers of the Sites with a set of GUI tools and/or GUI functions so as to graphically modify the Site, wherein each modification is cross-browser applicable and where the user and the Maintainer are not required to have specific skills to perform advanced modifications.

[0035] In an embodiment, the present invention provides a computer implemented method for changing a first Site S into a second Site S'. The first Site S and the second Site S' are available to a user in a browser executed on a local client. The method includes making a GUI available to the user in the browser and making available to the user at least one of a GUI tool and a GUI function so as to perform at least one action of a set of actions. The set of actions includes performing at least one change to the Site S so as to convert the Site S into the Site S' in the browser. A set of modification data is recorded in at least one entity of a set of storing entities, the set of modification data being usable so as to change the Site S into the Site S' in the browser, and the set of storing entities comprising the local client, a Site Server and a third-party server. If said set of modification data is recorded in the Site Server, the user has a Site Maintainer right for the Site S. A recorded set of modification data is loaded via a loading method which includes retrieving the recorded set of modification data from the at least one entity of the set of storing entities, and using the recorded set of modification data to change the Site S into the Site S' in the browser. Each entity in the set of storing entities is a computer including one or more recording mediums in which data can be temporarily and/or permanently stored and retrieved.

BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The present invention is described in greater detail below on the basis of embodiments and of the drawings in which:

[0037] Fig. A-l shows a diagram of the interactions between the computers involved in a CVSE implementation;

[0038] Fig. A-2 shows a diagram of the interactions between the computers involved in a SVSE implementation;

[0039] Fig. B-l shows the interactions across time between the actors involved in a CVSE implementation with the Page Navigation technique;

[0040] Fig. B-2 shows the interactions across time between the actors involved in a CVSE implementation with the Frame Navigation technique;

[0041] Fig. B-3 shows the interactions across time between the actors involved in a SVSE implementation with the Page Navigation technique;

[0042] Fig. C-l shows a two graphs with the amount of data exchanged on average between the client and the servers respectively with the Page Navigation technique and with the Frame Navigation technique; [0043] Fig. D-l shows two screenshots taken during the Installation Process of a Jelliphy Advanced implementation;

[0044] Fig. D-2 shows a screenshot of a Sample Page created with the Drupal™

Framework;

[0045] Fig. D-3 shows two screenshots with the Appearance of the Sample Page where a Resizing tool was utilized to resize the First Image (top) and an example of usage of the Moving Tool with a Static element in Jelliphy Advanced (bottom), respectively;

[0046] Fig. D-4 shows two screenshots of the Sample Page with an example of quick-edit (top) and an example of usage of the Copy-And-Paste function in Jelliphy Advanced (bottom), respectively;

[0047] Fig. D-5 shows a screenshot of the Sample Page with an example of property modification from the Properties IM with Jelliphy Advanced;

[0048] Fig. D-6 shows a screenshot of the Sample Page with an example of selection of elements with the Selection Box in Jelliphy Advanced;

[0049] Fig. D-7 shows two screenshots of the Sample Page with an example of usage of the Eyedropper tool from the Color Picker Panel (top) and an example of usage of the Paint IM in Jelliphy Advanced (bottom), respectively;

[0050] Fig. D-8 shows a screenshot of the Sample Page with an example of usage of the Color Management IM in Jelliphy Advanced;

[0051] Fig. D-9 shows a screenshot of the Sample Page with an example of usage of the Background IM in Jelliphy Advanced;

[0052] Fig. D-10 shows a screenshot of the Sample Page with an example of usage of the Animations IM in Jelliphy Advanced; [0053] Fig. D-l 1 shows two screenshots of the Sample Page with an example of usage of the Add IM (top) and an example of history navigation in Jelliphy Advanced (bottom), respectively;

[0054] Fig. D-12 shows a screenshot of the Sample Page with an example of modification of an image with Jelliphy Advanced;

[0055] Fig. D-13 shows a screenshot of the Sample Page with an example of usage of the Drawing / Notes IM with Jelliphy Advanced;

[0056] Fig. D-14 shows a screenshot of the Sample Page with an example of usage of the publishing function in a SVSE Jelliphy Advanced implementation;

[0057] Fig. E-1 shows a flow chart that illustrates an example of the Eyedropper algorithm;

[0058] Fig. F-l shows an example of the rendering of a gradient and a drawing to explain the procedure of conversion from the gradient backgrounds to the gradient Canvases; and

[0059] Fig. F-2 shows two tables with the values assumed by four color distance measurements with a set of sample colors.

DETAILED DESCRIPTION

[0060] In this disclosure:

[0061] i. A generic system of applications implementing all or part of the methods and techniques disclosed in this document is hereinafter referred to as a "Visual Site Editor" ("VSE"). [0062] ii. A part of the above-mentioned methods and techniques are implemented via services and/or functionalities provided by a Web Server (hereinafter "VSE Services").

[0063] iii. "Jelliphy Advanced" is a set of examples of VSE implementations, each

example having the following characteristics:

[0064] a. The used BSL is Javascript; and

[0065] b. It utilizes all or part of the BSC of the jQuery library and of the jQuery UI library.

[0066] Several embodiments of the present invention are classified, solely for purposes of exposition rather than limitation, based on whether at least one VSE Service is provided to a VSE user (hereinafter simply referred to as "user") by the same Web Server that makes the Site available to the Site consumers (hereinafter "Site Web Server") or not. Accordingly, hereinafter i) a "Client Visual Site Editor" ("CVSE") is intended to mean a VSE

implementation in which no VSE Service is provided by the Site Web Server; and ii) a "Server Visual Site Editor" ("SVSE") is intended to mean a VSE implementation in which at least one VSE Service is provided by the Site Web Server and in which the user of the VSE is also a Site Maintainer of the Site S. If no restriction to a CVSE implementation and/or to a SVSE implementation is explicitly made in an embodiment, in an implementation or in an example of this disclosure, such embodiment, implementation or example is intended to be implementable both in CVSE and in SVSE. In CVSE, the browser of a user interacts with the Site Web Server exactly in the same form and by the same processes of the browser of a Visitor, and one or more VSE Services are provided by a third-party server. Hereinafter, the presence and the operation of the Web Server Applications may in some cases be implied so that, for example, the following expressions are associated with the following meaning: i) "a service is provided by a server" means "a service is provided by a Web Server Application running on a server", ii) "a software entity is saved to a server" means "a software entity is sent to a Web Server Application running on a server and then saved by the Web Server Application to a recording medium", and iii) "a software entity is retrieved from a server (by a client)" means "a software entity is sent to a client by a Web Server Application running on a server". An example of a third-party server providing VSE Services is the VSE Server (i.e., a central server programmed for providing VSE services to multiple VSE instances). When a user makes one or more changes to a Site S to convert it into the Site S' with a CVSE, the changes do not affect the way in which any Visitor perceives the Site S and its operation. Therefore, the Site S' may be available to a Visitor (not necessarily the author of the changes) only after that certain specific actions, described in details later herein, are performed in the visitor browser. For example, a user may utilize a CVSE implementation to change the Google home Page in its browser. The original Google main Page available from the Google servers is not affected by these changes, but the user may save the changes remotely to the VSE Server and subsequently (for example, in a Subsequent Working Session, defined later herein) the user may recall the changes from the VSE Server and apply them again to the Google home Page. Hereinafter, i) a "Viewport" means an tab of the graphic interface of a browser in which a Page may be displayed; and ii) a "Frame" means a portion of a Viewport in which a secondary Page is displayed, wherein a primary Page is displayed in the Viewport. The Frames may be rendered by the browsers, for example, via an "IFRAME" HTML element. The GUI may be provided to the user by means of several techniques, of which examples include:

[0067] i. The Page Navigation technique: the GUI is added to the Pages of the Site S that the user intends to change.

[0068] ii. The Frame Navigation technique: the GUI is made available to the user in a

Viewport of the browser, and at least one Page of the Site S is available to the user in at least one Frame of the Viewport.

[0069] In an embodiment, the Page Navigation technique can, for example, be

implemented. In an embodiment, the Frame Navigation technique can, for example, be implemented. In an embodiment, both the Page Navigation and the Frame Navigation techniques can, for example, be implemented as two visualization modes available to the user. [0070] The following is an example of usage by a user of a CVSE implementation with the Page Navigation technique. Figure A-l shows a diagram of the interactions between the computers involved in the implementation, and Figure B-l shows the interactions between the actors (i.e., the users and the applications and programs running in the computers involved, wherein each actor is positioned at the top of the diagram) across time (with the time course progressing from top to bottom). In Figure A-l, the user utilizes a browser program (A.5), running on its client (A. l), to connect to a Web Server Application (A.8) running in a Site Server (A.2) in order to browse (A.12) a Page (A.6) of the Site. This first action performed by the user is shown in the step B-l. l of Figure B-l in which: first the user (B.4) browses (B.8) the Page of the Site that it intends to change from the browser (B.5) in its client (B.l), for example, by entering the URL of the Page in the address bar of the browser or by clicking, in another Page, a link to the Page. As soon as the action B.8 is performed, the browser sends (B.9) the request of the Page to the Web Server (B.6) of the Site Server (B.2), the Site Web Server sends back (B.10) the Page Resource Set of the requested Page to the browser, and finally, the browser displays (B.11) the Page to the user. The next step (B.1-2) seeks to load (A.13) the GUI (A.7) in the Page from the Web Server (A.9) of the VSE Server (A.3). To perform this step, the user clicks (B.12) a Start Bookmarklet for starting this CVSE implementation, then the Browser Script Code ("BSC") of the Start Bookmarklet is executed by the browser in order to send (B.13) to the Web Server (B.7) of the VSE Server (B.3) a request to receive a collection of one or more related Web Resources (hereinafter "GUI Resources") that are intended to be interpreted, executed and/or rendered by the browser in order to make the GUI available to the user (hereinafter, a BSC with the above-described functionality is referred to as "Loading BSC"). In some alternative embodiments (described later herein) the execution of the Loading BSC may be started by the user via other means than calling a Bookmarklet. For example, it may be started via one or more tools and/or functions implemented in a plugin installed in the browser. The GUI Resources are sent (B.14) to the browser and, as soon as they are received, one or more portions of BSC, included in the GUI Resources, are executed by the browser so as to add (B.15) the GUI to the same Page of the Site that the user is navigating. As a result of the execution, the GUI is rendered by the browser and made available (B.16) to the user in the Page. In this disclosure, solely for purposes of exposition rather than limitation, the following assumptions are made: a "Working Session" means an interval of time starting from the moment at which an instance of the GUI is made available to a user and the interval including each instant at which the user utilizes said instance of the GUI. Accordingly, the "Current Working Session" is defined as the Working Session including the one or more instants at which the one or more actions described in the context in which the expression "Current Working Session" is used in this disclosure are performed. Lastly, a "Subsequent Working Session", with respect of a Current Working Session, is defined as an interval of time in which: i) the starting time is subsequent to each instant in the Current Working Session, ii) a second instance of the GUI is made available to the user at the instant of said starting time in a browser running in a client (not necessarily the same browser and/or the same client of the Current Working Session); and iii) the interval includes each instant at which the user utilizes the second instance of the GUI.

[0071] Alternative embodiments to load GUI in the Page may include one or more of the following adaptations to the above-described example of usage:

[0072] i. The GUI Resources are included in the Loading BSC or they are available in the local client, or part of the GUI Resources is included in the Loading BSC and the remaining part of the GUI Resources is available in the local client. In this embodiment (hereinafter "embodiment with Local Inclusion") the interactions B.13 and B.14 do not take place.

[0073] ii. The Loading BSC includes part of the GUI Resources.

[0074] In an embodiment, the GUI Resources loaded at the starting of the Working Session (hereinafter "GUI Starting Resources") do not include all the Web Resources needed by the browser to run the GUI. Accordingly, the browser, after received the GUI Starting Resources, makes further requests so as to receive the GUI Resources not included in the GUI Starting Resources. In an embodiment, since not all the GUI functions and GUI tools are needed as soon as the GUI is started, the browser loads at a later time in the Working Session one or more GUI Resources not included in the GUI Starting Resources. For example, said one or more GUI Resources may be loaded as soon as the user asks for accessing to the

functionalities of a GUI tool related to the one or more GUI Resources. A measure of the advantage of using an implementation including one or more of the above-described embodiments is in the response time of the GUI loading, which is defined as the length of the time interval between the request for loading the GUI performed by the user and the first instant at which the GUI is available to the user in the browser. A generic rule, for example, provides that the response time of the GUI loading decreases, other parameters being equal, as the size of the GUI Starting Resources reduces with respect to the size of the whole GUI Resources. In an embodiment, part of the GUI Resources (comprising, for example, several libraries written in BSL that are freely available online) may be loaded from one or more third-party servers. One of the advantages of using one or more wide-spread BSL libraries maintained by a third-part (such as, for example, the jQuery and the jQuery UI libraries) is, for example, that the updates for compatibility with the most-used types of browsers, with the last versions of such browsers and/or with the environments in various types of client computing medium are often included in the last-updated releases of these libraries. The advantages of storing all or part of the GUI Resources in the local client, either by means of the above-described adaptations or by means of the caching mechanism implemented in the most-used types of browsers, include, for example, the shorter response time of the GUI loading and an independence, limited or unlimited in time, of several VSE functionalities, provided to the user in the client, from the internet access to third-party servers. On the other hand, an advantage of loading the GUI Resources from a third-party server is, for example, that the user may have access to an up-to-date version of such GUI Resources. Additional alternative embodiments may include an access control layer to identify the user, for example, in order to grant to each user a secure access to a set of personal and/or customized resources (described later herein) in the VSE Server. The following are two adaptations of the above example of usage, the adaptations being adopted so as to build an example of implementation that controls the access of the user: i) the Loading BSC contains a personal secure String that uniquely identifies the user, and ii) the personal secure String (hereinafter "Secure Login String") is transmitted to the VSE Server in one or more requests of the step B-1.2.

[0075] The GUI can be added to the Page without interfering, as far as possible, with the Appearance and operation of the Page. The GUI, for example, may include a set of tools, comprising the Panels (defined below), that are overlapped to the Page. A Panel is a GUI tool where a graphic object encapsulates one or more other GUI tools and/or graphic elements so as to allow the user to access to the GUI functionalities. An example of Panel (for example the graphic object D.13 of the Figure D-3, part of a Jelliphy Advanced implementation described later in this disclosure) is a rectangular area that is displayed ahead of the HTML elements of the Page (hereinafter an HTML element of the Page may be referred to as an "HTML element" or simply as an "element") and that may be freely dragged (the "dragging" action is described in details later in this disclosure) by the user to any position of the

Viewport. A Panel may, for example, be implemented with a HTML block (for example, with a "DIV" tag) added to the Page as a child node of the Page's "BODY" element and having the "position" style property set to "fixed", so that it maintains a fixed position in the Viewport while the user scrolls the Page. A "Draggable" plugin of the jQuery UI library is, for example, included in the GUI Resources of a Jelliphy Advanced implementation and utilized so as to give the Panels a "draggable" feature. Accordingly, a user may, for example, drag a draggable Panel by a point of its internal area and reposition the Panel to a different position of the Viewport in order to discover the elements of the Page in the area occupied by the Panel in its original position. With the same purpose of discovering hidden areas of the Page and for a general improvement of the GUI usability, a "Resizable" plugin of the jQuery UI library is, for example, used in a Jelliphy Advanced implementation so as to allow user to change the dimensions of certain resizable Panels by dragging the borders and/or the corners of a resizable Panel until it reaches the desired dimensions.

[0076] In the next step B-1.3 the user interacts (B.17) with the browser via the GUI so as to change the Page P of the Site S into the Page P' of the Site S'. Then the user views (B.18) the results of the changes. It is noticed that no limitation is put, for example, on the content or on the type of the Page P. For example, the Page P may be an empty Page and the user may utilize the GUI to build the Page P' from the beginning by adding elements to it. The GUI tools and GUI functions available to the user so as to add elements to Pages and more generally to change the Pages are described later in this disclosure. It is assumed that the GUI converts each change performed by the user to the Site into at least one basic modification to the Appearance and/or to the operation of the Site, wherein each basic modification

(hereinafter "Modification") may be applied to the Site, for example, by the GUI, via various methods described later in this disclosure. Several Modifications are performed on one or more HTML elements of the Page. For this reason, in an embodiment, an Element Selector Syntax is used in VSE in order to uniquely identify at least one element of the Page through at least one data, wherein the at least one data (hereinafter "Element Selector") may, for example, be a data in a form readable and writable from a portion of code in BSL (hereinafter such a data is generically referred to as "BSL Data"). Moreover, in an embodiment, a Selector Retrieving Method is implemented in the GUI in order to retrieve at least one Element Selector for each element involved in a Modification (hereinafter "Modification Element"), wherein the retrieved at least one Element Selector uniquely identifies the

Modification Element among all the elements of the Page. The Element Selectors retrieved via the Selector Retrieving Method for the Modification Elements may be utilized by the VSE to make replicable the applying to the Page of the changes performed by the user. Thus, said Element Selectors may be used, for example, by the VSE for the following purposes:

[0077] i. To make available to the user one or more tools (hereinafter "History Tools") to undo at least one of the one or more changes performed by the user to the Page (i.e., so as to restore the original Appearance and operation of the Page before that the at least one of the one or more changes is performed) and to redo at least one of the one or more undone changes (i.e., so as to restore the Appearance and operation of the Page after that the at least one of the one or more undone changes is performed).

[0078] ii. To be included in the set of modification data usable so as to change the Page P into the Page P' and available to be recorded and retrieved to and from a storing entity.

[0079] For example, in an implementation of Jelliphy Advanced, the Element Selectors are implemented as Strings interpreted as j Query selectors and for each Modification Element an array of Javascript objects (hereinafter "Selector Objects") is calculated by means of the implementation of Selector Retrieving Method described below, wherein each Selector Object contains an Element Selector that may be used to retrieve, as a jQuery selector, the

Modification Element. Hereinafter, phrases like "an Element Selector selects an element" are intended to mean "an Element Selector may be used as a jQuery selector so as to retrieve an element". The following assumptions are made for this implementation: Several types of basic selectors (hereinafter "Selector Types") of the jQuery Element Selector Syntax and of selectors compounded of said basic selectors are utilized as Element Selectors. Some examples of basic selectors are the "ID" selector, consisting of a hash key ("#") followed by the value of the "ID" attribute of the element to select, and the class selector, consisting of a dot (".") followed by the value of a class the element to select. Some examples of Selector Types are set forth in Table 1.

A Complexity Constant is assigned to each Selector Type based empirically on the average time used by the browsers to retrieve one or more elements of a Page if a selector of that Selector Type is used as a jQuery selector (Table 1 shows an example of possible Complexity Constant values).

[0082] iii. It is assumed that a) the jQuery ":eq()" selector (a selector with an integer argument starting from 0 and used to select the element whose index, zero- based, is equal to the argument) is not included in the basic selectors, and b) the Complexity Parameter of an Element Selector in a Page is a float value proportional to the estimated average time used by the browsers to retrieve one or more elements, selected by the Element Selector, of the Page. Accordingly, the Complexity Parameter of an Element Selector made up of one basic selector is equal to the Complexity Constant of the Selector Type of that basic selector multiplied by the number of elements selected by that basic selector in the Page. For example, if an Element Selector is "[name=field]:eq(l)" and there are 4 elements in the Page selected by the selector "[name=field]" (i.e., having the "name" attribute equal to "field"), the Element Selector that selects the second element with "name" equal to "field" has a Complexity Parameter equal to 0.50 x 4 = 2.00 in the Page.

[0083] iv. More basic selectors may be compounded into an Element Selector following the jQuery Element Selector Syntax. Examples of compounded Element Selectors are the following: a. "#box .item:eq(2)", that selects the third descendant of an element whose "ID" attribute is "box", the descendant having "item" among its classes. b. "tablet tr:eq(l) > td:eq(0)", that selects the first cell (with tag "TD") that is a child of the second row (with tag "TR") that is a descendant of a

"TABLE" element having the class "t".

The Complexity Parameter of an Element Selector compounded of multiple basic selectors may be calculated in various alternative ways. Some examples of calculation techniques are: a. The Complexity Parameter is equal to the sum of the Complexity

Parameters of each compounding basic selector.

The Complexity Parameter is equal to the Complexity Constant of the compounded Selector Type multiplied by the number of elements selected in the Page by the compounded Element Selector with the last ":eq" selector removed. In the compounded example "#box .item:eq(2)", assuming that there are four descendants of the element with "ID" equal to "box", the descendants having an "item" class, the Complexity Parameter is equal to 1.00 x 4 = 4.00.

Table 1

Selector Type Description Complexity Constant

ID Selector Selects element by the "ID" attribute 0.01

Name Selector Selects element by the "NAME" attribute 0.50

Class Selector Selects element whose "CLASS" attribute 2.00

contains the given class

Compounded ID Selects element by the "ID" of an ancestor 1.00

Selector

Tag Selector Select element by the Tag name 10.00 [0089] An example of an implementation of a Selector Retrieving Method for retrieving the array of Selector Objects from an element (hereinafter "Processed Element") is described below. For each Selector Type (hereinafter "Scanned Selector Type") of the Selector Types utilized in the method, the following steps are performed:

[0090] i. A checking is performed so as to verify that one basic selector of the Scanned

Selector Type may be used as an Element Selector to select the Processed Element. For example:

[0091] a. If the Scanned Selector Type is "ID Selector", the checking performed is whether the Processed Element has the "ID" attribute or not; or

[0092] b. If the Scanned Selector Type is "Compounded ID Selector", the checking performed is whether the Processed Element has an ancestor having the "ID" attribute or not.

[0093] The next steps are performed only if the checking is successful.

[0094] ii. It is assumed that a partial Element Selector is an Element Selector that selects a set of one or more elements in the Page (hereinafter "Selector Element Set"), the set comprising the Processed Element. In this step, a partial Element Selector whose Selector Type is the Scanned Selector Type is retrieved.

[0095] iii. The Complexity Parameter of the partial Element Selector is calculated from the Complexity Constant and from the number of elements in the Selector Element Set.

[0096] iv. An Element Selector is obtained from the partial Element Selector by

appending an ":eq()" selector with the argument equal to the zero-based index of the Processed Element in the Selector Element Set. As per the definition of Complexity Parameter, the Complexity Parameter of the partial Element Selector is equal to the Complexity Parameter of the Element Selector. [0097] v. The Element Selector and the Complexity Parameter calculated in the steps above are stored in a Selector Object of the array of Selector Objects.

[0098] The following are several alternative Jelliphy Advanced implementations, each of which may be used in an alternative implementation of the Selector Retrieving Method and/or in an alternative implementation of the Element Selectors:

[0099] i. Instead of using a String interpreted as a jQuery selector, an array may be used as Element Selector, wherein each element of the array may be, for example, a Javascript data comprising one of the following data.

[00100] a. A number usable as argument of the ".eq()" jQuery API, that is analogous to the jQuery ":eq()" selector.

[00101] b. A String usable as jQuery selector as argument of the "jQuery" function if the String is the first String of the array, and otherwise usable as argument of the ".findO" and/or ".children()" jQuery APIs.

[00102] For example, it is shown how an Element Selector mentioned above, "table.t tr:eq(l) > td:eq(0)", is memorized with this implementation. The same Element Selector in this implementation is memorized as the array ["table.t tr", 1, ">", "td", 0] that may be used in the following Javascript code so as to retrieve the Processed Element:

[00103] jQuery ( "table .t tr ") . eq ( 1 ) . children ( "td" ) . eq ( 0 )

[00104] Among the advantages of this implementation, the usage of the ".eq()" jQuery API is affected by the performance improvement provided by the DOM "queryS elector All" method, natively implemented in several browser types.

[00105] ii. Instead of using a String interpreted as jQuery selector, a String interpreted as

BSC may be used as Element Selector. An example of a String interpreted as Javascript code is the code reported in the previous point "i". The Processed Element may be retrieved by passing the Strings as the argument of the "eval" Javascript command (hereinafter "Eval").

[00106] Once retrieved the array of Selector Objects, it may be utilized by the GUI, for example, i) to retrieve the Element Selector with the minimum value of the Complexity Parameter for a given element of the Page, and/or ii) to populate a selector of the GUI from which the user may select an Element Selector for a given element of the Page. The Element Selector retrieved or selected by the user may be utilized in a Modification Object as described below. In an embodiment, an object of the BSL is created by the GUI for each Modification (such an object is hereinafter referred to as "Modification Object"). The Modification Object may, for example, include all or part of the following information:

[00107] i. An identifier for the type of Modification (hereinafter "Modification Type").

Some examples of Modification Types are set forth in Table 2.

[00108] ii. An Element Selector for each element of the Page that is involved

Modification.

[00109] iii. Some additional parameters, objects and/or references to elements used in the

Modification. For example, all the information usable to undo the Modification can be stored as additional parameters. An example of such information is the following. Assuming that the Modification is the resizing of an element, a references to a copy the element with its original size before to be resized may be stored in the Modification Object as additional parameter.

[00110] iv. A BSL Data or a set of BSL Data that may be used by the VSE to perform the

Modification on the Page. An example of the above-mentioned BSL Data is a String (hereinafter "Modification Code") that, interpreted as a BSC in the Page, applies the Modification. Table 2

Modification Type Description of the Modification

'change-html' Changing the HTML in the element

'change-prop' Changing a property of at least one element

'change-attr' Changing the attribute of at least one element

'add-elem' Adding at least one element to the Page

'resize-elem' Resizing at least one element

'cut-elem' Cutting at least one element

'copy-elem' Copying at least one element

'remove-elem' Removing at least one element from the Page

'edit-css-rule' Editing a CSS Rule (defined later) of the Page

'edit-event' Editing an event (defined later) of the Page

'edit- animation' Editing an animation (defined later) of the Page

'image-pencil' Changing an image via the Pencil Tool (defined later) of the Image IM

(defined later)

'add-drawing' Adding a drawing object (defined later) to the Page

[00111] Accordingly, as soon as a change is performed by the user, a Modification Method, comprising the following steps, is applied by the VSE implementation.

[00112] i. A Modification Object of the Modification is appended to a vector of BSL

Data (hereinafter "Modification Stack").

[00113] ii. One or more operations may be performed by the GUI to the extent that they are required so as to make the Modifications effective in the Page. One or more Modifications may need to be applied to the Page in this step if they are not otherwise applied. The factors affecting whether a Modification is to be applied in this step or not may be at least one of the followings.

[00114] a. The type of Modification. For example, after a user graphically resizes an element, this action performed by the user may have as an effect the Modification of the resized element with no need of further operations in this step "ii". On the other hand, after the user, for example, changes a property of the style of an element from a tool of the GUI, the property of the element is changed via this step of the Modification Method.

[00115] b. The context in which this method is used. The Modification Method may be applied, for example, after a change performed by the user or after that a recorded set of modification data is retrieved from a storing entity in order to apply the modification data to the Page: in the last case the Modifications are always applied in this step "ii".

[00116] For example, a simple technique to apply the Modifications to the Page in this step "ii" is by executing the Modification Code as the argument of the Eval.

[00117] In an alternative embodiment, the step "ii" of the Modification Method may be moved before the step "i". Furthermore, in an alternative embodiment, the above-mentioned step "ii" may be modified, for example, with the variant that the Modifications are always applied in the step "ii". In an embodiment, a method to prevent unauthorized changes of an element such as, for example, copyright notices and logos that must not be removed by the user, may be implemented. For example, a checking of the Modification Elements may be performed before the step "ii" of the Modification Method. If the result of the checking is that the Modification Element contains elements whose modification is forbidden, the original appearance and functionalities, that the Modification Element had before the change, are restored (if required) and a warning message is displayed to the user.

[00118] In an embodiment, the user may, for example, use a History Panel to perform one or more of the following actions:

[00119] i. The user may view an ordered list (hereinafter "History List") with all the

Modifications in the Modification Stack.

[00120] ii. The user may select an item in the History List and then undo backward one or more Modifications starting from the most recent one. [00121] iii. Once one or more Modifications are undone, the user may redo all or part of the undone Modifications.

[00122] iv. The user may edit a Modification, for example, by changing its Modification

Code from an Editing tool described later herein.

[00123] The Modification Stack keeps tracks of the history of the Modifications that the user performs to the Site in the chronological order in which they are performed. Although the Modification Stack is utilized by the GUI for History management, the number of elements in the Modification Stack may generally differ from the number of Modification Objects in the set of modification data (hereinafter the Modifications Objects included in the set of modification data are referred to as "Modification List") used to convert the Page P into the Page P'. The following examples show two cases in which the number of elements in the Modification Stack and in the Modification List may differ.

[00124] i. The Modification Stack consists of three resizings of an image of a Page: the first resizing brings the image's dimensions to 30 x 45 pixels, the second to 50 x 60 pixels and the third to 40 x 50 pixels. The Modification List consists of one Modification Object that may be used to bring the image's dimensions to 40 x 50 pixels.

[00125] ii. The Modification Stack consists of the change of the "background-color"

property to green of a block element of the Page and the subsequent deletion of the block element. The Modification List consists of the sole Modification Object related to the deletion of the element from the Page.

[00126] In certain embodiments, various methods for the calculation of the Modification List can be implemented so as to reduce the number of Modifications used to convert the Page P into the Page P' with respect to the number of Modifications in the Modification Stack.

[00127] After step B-1.3, the Page P changes into the Page P'. The next steps after step B- 1.3 aims to preserve the performed changes so as to make them available to the user again in the Current Working Session and/or in one or more Subsequent Working Sessions. In an embodiment, the preserving of the performed changes is implemented by providing the user with a GUI tool (hereinafter "Saving Tool") and/or a GUI function so as to record in the VSE Server a set of modification data usable to convert the Page P into the Page P'. In an embodiment shown in step B-1.4, the user utilizes (B.19) a Saving Tool and/or a Saving function so as to record the set of modification data in a recording medium of the VSE Server, then the GUI sends (B.20 and A.15) the set of modification data that may include, for example, one or more of the following data:

[00128] i. A name allowing the user to uniquely identify a software entity (hereinafter

"Modification File") among other Modification Files, the software entity containing the data usable to change the Page P into the Page P'. The name for the Modification File may be assigned, for example, with one of the following processes: a) the user may enter a name from an input text field in the Saving Tool or in another Panel before or within the interaction B.19, b) the user may select the name of a previously-recorded Modification File from the Saving Tool (for example, the Saving Tool may display the name of the one or more previously-recorded Modification Files, if any, analogously to the Loading Tool, described later herein) before or within the interaction B.19, or c) the GUI may assign the name of the Modification File by default (for example, from the name of the last Modification File retrieved or recorded).

[00129] ii. The at least one Modification Object of a Modification List ML or a set of modification object data usable to re-create the same Modification Object and/or another at least one Modification Object of a Modification List ML', wherein ML and ML' can be alternatively utilized to change the Page P into Page P'. Some examples of data that may be included in said set of modification object data are the Modification Code and the Element Selectors.

[00130] iii. A set of parameters (hereinafter "Page Parameter Set") usable in one or more

VSE functions to uniquely-identify a Page and/or a set of related Pages. Some examples of parameters in the Page Parameter Set are the address of the Page and some relevant GET parameters of the URL of a Page. The Page Parameter Set may be used, for example, by the VSE Server to identify the Pages to which the Modifications of the Modification File may be applied (hereinafter this qualification of applicability is referred to by sentences such as "the Modification File is applicable to a Page").

[00131] iv. A set of options available to be set by the user: for example an "Apply to all pages" option allowing the user to apply the Modification File to any Page regardless of the matching with the Page Parameter Set.

[00132] After receiving the B.20 request, the Web Server of the VSE Server (hereinafter "VSE Web Server") creates and/or updates one or more software entities in a recording medium with a set of data comprising the data received in B.20, and then it sends (B.21) the result of the creating and/or updating operation to the client. Finally, the GUI displays (B.22) the result of the recording to the user, for example, by performing one of the following operations:

[00133] i. If the result is unsuccessful, GUI displays a warning message specifying, if available, some details of the error.

[00134] ii. If the result is successful, GUI follows a policy that may depend on different alternative embodiments and/or on different GUI configurations. Some examples of the above-mentioned policies are: a) displaying an information message in which it is confirmed that the Modification File is correctly recorded, b) displaying a graphical representation of the Modification File in an embodiment of the Saving Tool, and c) doing nothing.

[00135] According to the above-described loading method, the recorded Modifications may, for example, be retrieved (A.14) from the VSE Server and applied again to the Page in the Current Working Session once restored the Appearance and operation of the original Page P (for example, via a "restore" GUI function) or retrieved and applied in a Subsequent Working Session. So as to retrieve a recorded Modification File, the user may, for example, utilize a GUI Tool (hereinafter "Loading Tool") or a GUI function. In an embodiment, the Loading Tool provided to the user may be, for example, an Open Panel, in which the Modification Files are displayed via a graphic interface having a layout similar to the commonly-used file managers (hereinafter "File Manager Tool"). As soon as the Open Panel is activated by the user, the browser sends a request to the VSE Server with the Page Parameter Set of the Page (hereinafter "Current Page Parameter Set") in order to receive a Modification File List comprising, for each previously-recorded Modification File applicable to the Page currently displayed (i.e., for the Modification Files with a Page Parameter Set matching with the Current Page Parameter Set), several relevant data that are subsequently displayed as file data in a File Manager Tool of the Open Panel. Examples of the above-mentioned relevant data are the name assigned to the Modification File and the date and time of the last modification performed to the Modification File. The user may, for example, select a Modification File displayed in the File Manager Tool in order to retrieve the Modification List of the selected Modification File and apply the Modifications of the Modification List to the Page. Once the browser receives the Modification List of the selected Modification File, the GUI applies the Modification Method to each Modification Object of the Modification List so as to change the Page P into the Page P'. Several embodiments may, for example, include one or more of the following variants:

[00136] i. The user may assign and/or change the Page Parameter Set in a set of

modification data transmitted so as to be able to apply the recorded Modification File to one or more Pages other than to the currently-displayed Page (for example, to a set of related Pages with the Modification Elements in common).

[00137] ii. The recorded Modification Files are shown to the user from the Open Panel regardless of whether the Modification File is applicable to the currently- displayed Page or not. Additionally, the user may, for example, apply a Modification File to a Page regardless of whether the Modification File is applicable to the Page or not. [00138] iii. Only the Modification Files having at least one Modification Element that is also present in the Page (hereinafter "Modification Files compatible with the Page") are displayed in the Open Panel.

[00139] iv. The Modification Files compatible with the Page are marked in the File

Manager Tool so as to help the user to distinguish them from the other

Modification Files.

[00140] v. The user may apply to the Page only the Modification Files compatible with the Page.

[00141] vi. The Modification List used to build the set of modification data is equal to the

Modification Stack, so as to make all the Modifications performed by the user in chronological order available again to the user from the History panel after that the related Modification File is retrieved.

[00142] In an embodiment, the user is provided with one or more GUI tools to store and to retrieve the Modifications of the Page to and from the local client, as described in the following examples:

[00143] i. The user may be provided with a Saving Tool and a Loading Tool analogous to the above-described, but with the difference that the Modification Files and the Modification File List are stored and retrieved to and from the local client via the browser, for example, by means of at least one software entity used to keep some information memorized in a browser so that said information is available to be retrieved for a future use (hereinafter "Cookie").

[00144] ii. The user may be provided with one or more tools to export the Modification

Files to a file in a recording medium. Additionally, the user may be provided with one or more tools to import the Modification Files from a file in a recording medium, and, once the Modification Files are retrieved, to apply the Modifications therein stored to the Page by means of the Modification Method. [00145] More details and examples of implementation of this embodiment are described later in this disclosure. This embodiment may be used, for example, in conjunction with an embodiment with Local Inclusion, so as to obtain a VSE running in the browser of the local client with no need of connecting to the VSE Server during all or the most of the time of the Working Sessions.

[00146] The following is an example of usage of a CVSE implementation with the Frame Navigation technique. The reference figures are the Figure A-l (as the computers involved are the same of the Page Navigation technique) and the Figure B-2. The initial step B-2.1 is analogous to the step B-l. l as the user browses the Page P of the Site it intends to change. After step B-2.1, the Page P is displayed in a Viewport of the browser. In the second step, B- 2.2, the user initiates a Working Session by clicking (B.23) a Start Bookmarklet whose BSC starts the CVSE implementation with Frame Navigation, then the browser, through the execution of the BSC of the Start Bookmarklet, sends (B.24) to the VSE Web Server a request for the GUI Resources of this implementation so that the VSE Web Server sends (B.25) the GUI Resources to the browser. As soon as the browser receives the GUI Resources, one or more portions of the BSC of the GUI Resources are executed by the browser so as to replace (B.26) the content of the Page P in the Viewport with a set composed by the GUI and a Frame. Then the same Page P, visualized by the user in the step B-2.1, is loaded (with the interactions B.27 and B.28) in the Frame. Finally, the user visualizes (B.29) the GUI in the Viewport and the Page P in the Frame. In the next step, B-2.3, the user changes (B.30) the Page P to the Page P' in the Frame by means of GUI tools and/or GUI functions analogous to the ones used in the step B-1.3 of the Page Navigation example, but with the difference that the GUI tools (for example, the ones in the Panels) with the Frame Navigation technique are available in the Viewport and are separated from the Page (which is visualized in the Frame after the step B-2.2) so as to increase the GUI usability. The Frame may be, for example, included in a Window Panel so as to constitute a workspace graphically independent from the GUI; the Window Panel is available to, for example, be moved and resized by the user in the Viewport like other GUI Panels. After the user performs the changes, the Page P' of the Site S' is displayed (B.31) in the Frame. The next step, B-2.4, is analogous to step B-1.4: the user records in the VSE Server a set of modification data comprising the Modification List of the Modifications performed in the step B-2.3. One of the main advantages of the Frame

Navigation technique with respect to the Page Navigation is that the user may decide (B.32) whether to browse the Site S' in the Frame without having to reload the GUI, or to end the process. If the user, for example, decides to modify another Page Q of the Site S', it may, for example, navigate (B.33 of the step B.2-5) the Site S' in the Frame until it reaches the Page Q and/or it may enter the URL of the Page Q in a Frame Address Bar of the Window Panel, wherein the Frame Address Bar has the same function in the Frame that the browser address bar has in the browser. After the Page Q is loaded in the Frame, this Page is available to be changed via the GUI and the procedure starts again from the step B-2.3. The procedure described with the example above is implemented so as to overcome a limitation known as cross-domain limitation. The cross-domain limitation is a secure limitation that several browsers have enabled by default in order to block a direct update of the content of a Page with an external content from a web domain different from the domain of the address of the Page. The cross-domain limitation, for example, prevents that a function of a BSC of an Example Page 1 access to the content of an Example Page 2, wherein the content is loaded in an Example Frame of the same Example Page 1, if the domain of the address of the Example Page 2 is different from the domain of the address of the Example Page 1. To avoid that this limitation blocks the modification of the content of the Frame in the Frame Navigation technique that is performed, for example, in step B-2.3 of the above-described procedure, first the Page P is loaded in a Viewport (step B-2.1) and then the same Page P or a Page Q, having an address of the same domain of P (since they are both Pages of the same Site), is loaded (step B-2.2) in the Frame of the Viewport, which keeps the address of Page P initially loaded. In an embodiment, more Frames may be used simultaneously in the same Viewport, each Frame displaying a Page of the Site. In this embodiment, the user is allowed to keep open and manage more Pages of the same Site at the same time and it is also allowed, for example, to use the GUI so as to make a change involving multiple open Pages, as described later herein.

[00147] The Frame Navigation technique is hereafter compared to the Page Navigation technique. The advantages of Frame Navigation, as well as including the above-described separation of the GUI from the workspace that improves the usability of the GUI itself, increases with the number of modified Pages, both in terms of reduction of average CPU Usage and average amount of data exchanged between the client and the servers. The amount of data exchanged in each step, where greater than 0, of both the techniques is shown in Figure C-l. It is assumed in this comparison that the total size of the Web Resources in the Page Resource Set of each Page of the Site is 750 KByte, the total size of the GUI Resources is 900 KByte, the size of the set of modification data is 10 KByte and the size of all the other interactions (for example, the requests of a Page to the Site Server) is approximated to 0 KByte (such intersections are not included in the graphs). In the change of the first Page (C.2) of a series of Pages changed with the Page Navigation (shown in graph C. l), the exchanged amount of data refers to the data in download for the step B-l. l and B-1.2 (for a total amount of 1650 KByte) and it refers to the data in upload for the step B-1.4 (10 KByte). If the user further modifies Pages (C.3) after the first one, the steps above are repeated in the changes of such Pages and thus the exchanged amount of data in the subsequent changes is the same as the first change. Accordingly, the average downloaded data amount with the Page Navigation technique is 1650 KByte and the average uploaded amount is 10 KByte. The graph C.4 shows the exchanged amount of data with the Frame Navigation technique. In the change of the first Page (C.5), the Page is loaded an additional time (interaction B-28) compared to the Page Navigation, so the total exchanged amount in download is greater (2400 KByte). But in the subsequent Modifications (C.6), the GUI Resources do not need to be loaded again, and the downloaded amount of data is only 750 KByte. On the other hand, the uploaded amount of data is the same as with the Page Navigation technique. Therefore, for each changed Page the average uploaded data size is 10 KByte in both the Navigation techniques, whereas the average downloaded amount in Frame Navigation is equal to

1650 KByte

[00148] T DOWN (N) = 750 KByte +

N

[00149] in which N is the total number of Pages changed with this technique. The Frame Navigation is more convenient in terms of average data exchanged starting from the second Page changed, as T _DOWN (2) is equal to 1575 KByte against the 1650 KByte of the Page Navigation.

[00150] Analogously, comparing the step B-1.2 with the step B-2.2, the CPU Usage is greater in the latter since the operation B.26 is more CPU-consuming than the B.15, and the additional operation of loading the Page in the Frame (B.27 and B.28) is also present in the step B-2.2. But the analogous steps in the changes of further Pages are less CPU-consuming than with the Page Navigation as the adding of the GUI Resources (B.14) is not performed, thus the Frame Navigation is more convenient than the Page Navigation also in terms of CPU Usage as the number of modified Pages grows.

[00151] In an embodiment of the present invention, assuming that i) a Modification List M is used to convert the Page P into the Page P' and ii) a Page P" of any Site contains at least one element included in the Modification Elements of the Modification Object of the Modification List (hereinafter "Modification Elements of the Modification List") M, the Modification List M is available to be applied to the Page P" in order to convert it into the Page P'", and the elements of the Page P'" that are also Modification Elements of M are changed analogously to the same elements in the Page P'. Accordingly, the following Superposition Property may, for example, be applied to multiple Modification Lists: if it is assumed that i) a Modification List M is used to convert the Page P into the Page P', ii) a Modification List M' is used to convert the Page P into the Page P" and iii) the applying of M to the Page P does not affect the applying of M' to the same Page P and vice- versa (hereinafter two or more Modification Lists with this property are referred to as "Independent Modification Lists"), it follows that the Modification Lists M and M' may be applied to the Page P in any order so as to convert it into the Page P'", and the Page P'" includes both the Modifications of M and M'. Therefore, in this embodiment, the user may be allowed, for example, to perform at least one of the following operations:

[00152] i. Applying each Modification List of a set of multiple Independent Modification

Lists to the Page P so as to obtain the Page P' regardless of the chronological order in which the Modification Lists are applied;

[00153] ii. Applying the same Modification List to multiple Pages so as to modify the one or more Modification Elements in each of the multiple Pages; and

[00154] iii. Subdividing a Modification List, that is used to change the Page P into the

Page P', into more component Independent Modification Lists so that a) each component Independent Modification List may be applied separately to the Page P and b) if all the component Independent Modification Lists are applied to the Page P in any order, it changes into the Page P'.

[00155] In an embodiment of the present invention, the set of actions available to the user can, for example, include composing a Bookmarklet (hereinafter "Modification

Bookmarklet"), and providing at least one Visitor with a bookmarklet method. The bookmarklet method may be utilized to change the Site S into the Site S' with no need to utilize the GUI. The bookmarklet method includes navigating the Site S, and calling the Modification Bookmarklet. This method is aimed at various purposes comprising the ones listed below:

[00156] i. To provide the users with a method to quickly apply their Modifications to a

Page. For example, a user, after having composed the Modification

Bookmarklet for the Page P and added it to the favorite list of the browser, may subsequently follow the procedure below.

[00157] a. Browsing the Page as a Visitor.

[00158] b. Applying the Modifications by clicking the Bookmarklet from its

favorites.

[00159] ii. To allow the users to easily share their Modifications to a Page with any

Visitor of the Site, for example, by providing to the Visitor the Modification Bookmarklet so that it may follow the same procedure described in the previous point so as to view the changed Page P'.

[00160] In an embodiment, at least one GUI tool and/or GUI function may be provided to the user in order to compose a Modification Bookmarklet containing the Modifications that it performs in the Page. For example, the user may follow the procedure in Figure B-1 up to and including step B-1.3, and then it may use a Modification Bookmarklet function, by means of which the GUI composes a Modification Bookmarklet whose BSC, if executed by the browser on the Page P, changes the Page P into the Page P'. The Modification Bookmarklet may be used by any Visitor who, as such, does not utilize the GUI. The BSC of the

Modification Bookmarklet (hereinafter "Modification BSC") may, for example, include i) a Modification List to modify the Page P into P' and ii) the portions of BSC used to apply the Modifications to the Page, or alternatively it may load part of such portions of BSC from the VSE Server and/or from third-party servers (for example, in form of the above-mentioned libraries available online). Loading part of the BSC from an external source has the advantage of a reduced size of the Modification BSC that, accordingly, is more likely available to be used, for example, as a link, in many web applications and Sites (for example, it may be sent in an e-mail and/or virally spread in a social network).

[00161] In an embodiment, the Modification BSC does not include the Modification List. The Modification List is sent to be stored in the VSE Server before composing the

Modification Bookmarklet, and a BSC usable to retrieve the Modification List from the VSE Server is included in the Modification BSC. An example of interactions between the computers involved in the operations described in this embodiment is shown in Figure A- 1. A Visitor may, for example, navigate (A.17) the Site S from a browser (A.10) of its client (A.4), and, as soon as it reaches the Page (A.l 1) for which the Modification Bookmarklet is composed, it may call the Modification Bookmarklet so that the Modification List is loaded (A.16) from the VSE Server and the Modifications are applied to the Page. In this embodiment and in the one described below, the size of the Modification BSC is further reduced, and this reduction is more relevant especially for a large number of Modifications. In an embodiment, the user is provided with at least one GUI tool and/or GUI function in order to compose a Modification Bookmarklet using one or more Modification Files previously recorded in a storing entity. For example, the above-mentioned at least one GUI tool may include an Include Panel with a File Manager Tool analogous to the one in the Open panel, the File Manager Tool showing, for example, the Modification Files applicable to the Page, once retrieved the Modification File List from the VSE Server. Each Modification File of the File Manager Tool may have, for example, a graphic selector (for example, an

"Include" checkbox at its left) that the user may utilize to select which Modification Files to include in the Modification BSC. Once the selection of the Modification Files is completed, the user may click an "Include" button in the Include Panel so as to compose the Modification BSC containing, for example, a unique identifier for each Modification File selected by the user. Subsequently, a Visitor may, for example, visualize the Page and then call the BSC of the Modification Bookmarklet described above. As a result of the execution of the

Modification BSC, the Modification List of each Modification File included in the

Modification Bookmarklet is, for example, retrieved from the VSE Server, and then the Modification Method is applied to each Modification Object of the Modification List.

[00162] In an embodiment of the present invention, the Site S can, for example, be changed into the Site S' by at least one applying function implemented in at least one of a set of interpreting entities when at least one Visitor navigates the Site S in the browser. The set of interpreting entities includes the browser and at least one extension, add-on, plug-in or other component installed in the browser. An implementation of this embodiment may, for example, utilize an Add-on of Firefox that supports a set of Local Publishing functionalities, comprising the followings:

[00163] i. Interacting with the GUI so as to store and retrieve to and from the local client one or more Modification Files and one or more Page Parameter Sets, each of the one or more Page Parameter Sets being linked to one or more references to Modification Files.

[00164] ii. Testing if the Page displayed in the browser matches with at least one Page

Parameter Set stored in the local client by means of the functionality described in the previous point "i".

[00165] iii. If the testing of the previous point "ii" is successful, applying to the Page the

Modifications of the one or more Modification Files whose one or more references are linked to the at least one matching Page Parameter Set.

[00166] Furthermore, the example of Include Panel described above may be adapted in this implementation so that, for example, as soon as the user clicks a "Locally Publish" button in the Include Panel, the selected one or more Modification Files and the Current Page

Parameter Set are stored in the local client by means of the functionality of the point "i" of the set of Local Publishing functionalities. Accordingly, assuming that a) the user utilizes the "Locally Publish" button in the browser after selecting one or more Modification Files and b) the at least one Modification of each selected Modification File changes the Page P into the Page P', when a Visitor browses the Page P with the same browser, the changed Page P' is visualized instead, with no need by the Visitor to perform any other action.

[00167] In an embodiment of the present invention, the set of actions available to the user can include publishing the Site S' so that a published Site S' is available to at least one Visitor of the Site S in a visitor browser program executed on a visitor client. The process of modification of a Site with SVSE is similar to the modification process with CVSE, but SVSE has the fundamental extension that it allows the user, being a Maintainer of the Site, not only to modify the Appearance and/or the operation of the Site in a browser running on a client, but also to modify the Site from the side of the Site Server. In other words, a SVSE implementation acts as an application of web authoring, which provides to a set of

Maintainers (including non-programmers) one or more functionalities to make the Site S', modified by the Maintainers in their browsers, available to the Visitors when they normally navigate the Site. Furthermore, the above-described functionalities and services of the Web Server of the VSE Server (for example, the saving of Modification Files) may be also implemented as functionalities and services of a SVSE Plugin (hereafter defined) of the Site Server. Thus, the embodiments and examples of CVSE implementations heretofore reported in which a VSE Server and a VSE Web Server are mentioned may be extended to the equivalent embodiments and examples of SVSE implementation by making one or more adaptations, wherein the one or more adaptations includes replacing, in their descriptions, each reference to the VSE Server with a reference to the Site Server and each reference to the VSE Web Server with a reference to the Site Web Server.

[00168] Using a SVSE to change Sites, unlike using a WDA, requires no installation of any application in the client of the Maintainer. An implementation of SVSE may, for example, be installed as a plugin of a Site hosted in a Site Server by a Maintainer of the Site as described below. A Visual Site Editor Installation Package (hereinafter "VSEIP") is a collection of files (usually compressed in an archive) that may, for example, be used by the Maintainer to install a collection of related software entities (hereinafter "SVSE Code") that is intended to implement the services and functionalities of SVSE in a Site Web Server. Hereinafter, i) the collection of services and functionalities provided by the Site Web Server as a result of the interpretation, execution and/or data transmission of one or more portions of the SVSE Code is referred to as "SVSE Plugin", and ii) expressions such as "the SVSE Plugin perform an operation" are intended to mean "the Site Web Server performs an operation via the interpretation, execution and/or data transmission of one or more portions of the SVSE Code". The Maintainer may install a SVSE in the Site Server by following for example at least one method of the list below:

[00169] i. By a generic installer procedure: the files of a general-scope VSEIP (i.e., a

VSEIP usable in multiple Sites) are uncompressed and copied to the root directory of the Site Code. Then a launcher URL is entered in the browser address bar so as to start the Installation Process (described below).

[00170] ii. By a generic downloader procedure: files of a general-scope VSEIP are

uncompressed and copied to the root directory of the Site Code. Then a launcher URL is entered in the browser address bar to start the Download and Install Process (described below).

[00171] iii. By a Framework- specific procedure: an installer tool specific for the Site or for the Framework from which the Site is built (hereinafter "Site Framework") is used by the Maintainer to install a VSEIP specific for the Site or for the Site Framework (some examples of Frameworks supporting installations of third- party plugins are Joomla! ^® and SugarCRM ^® ).

[00172] An Installation Process guides the Maintainer through the various steps of the installation of the SVSE Code in the Site. An example of generic Installation Process may comprise the following steps:

[00173] i. Attempting to identify the Site Framework, if any, among a list of top used

Frameworks in order to select a list of files of the Site Code (hereinafter "Patch Site Files") to be patched with one or more portions of SVSE Code. If the Site Framework is not recognized or the Site is not built from a Framework, a manual selection of the Patch Site Files is performed by the Maintainer.

[00174] ii. Patching the Patch Site Files with one or more portions of SVSE Code and/or copying one or more files of SVSE Code to one or more directories of the Site Code.

[00175] A Download and Install Process guides the Site Maintainer through a process to automatically download the last-updated release of VSEIP and then to install the downloaded package. The following is an example of steps that may be included in a Download and Install Process:

[00176] i. Downloading of the last-updated release of VSEIP from the VSE Server.

[00177] ii. Uncompressing and copying the files of the downloaded VSEIP in the Site

Server.

[00178] iii. Following the steps of the above-described Installation Process example.

[00179] Assuming that the Server Script Languages of the SVSE Jelliphy Advanced implementations is PHP, an example of two screenshots taken during the Installation Process of a Jelliphy Advanced implementation is shown in Figure D- 1. In this example, the

Installation process is composed of seven steps and the Maintainer may forward in the Installation Process by clicking the "Next" button at the bottom right of each screenshot. The screenshot D.l shows the results of the "System Checking" step, in which several useful information were displayed to the Maintainer, including the result of the above-mentioned identifying of the Site Framework (that was SugarCRM ^® in the example). The screenshot D.2 was taken right after the "Installation" step and shows the results of the Patching of the Patch Site Files.

[00180] An example of usage by a Maintainer of a SVSE implementation with the Page Navigation technique is described below. The interactions between the computers involved in this example are shown in the Figure A-2, whereas the Figure B-3 shows the interactions among all the actors involved across time. First, the Maintainer starts a Working Session in a Page P of the Site S that it intends to change. Since the access to the SVSE functions and services is forbidden to the unauthorized users who do not have the right of Site Maintainer, several examples of techniques to authenticate the users are described in this disclosure. In step B-3.1, an implementation of authentication with Secure Login String is shown. In said implementation, each Maintainer has its own Secure Login String to be appended to the URL of any Page of the Site so as to start a SVSE Working Session (hereinafter, expressions such as "to login into SVSE" may be used with the meaning of "to start a SVSE Working

Session"). The Secure Login Strings may be configured, for example, via an Administration Tool (defined below) and/or via the SVSE GUI itself. A "SVSE Administration tool" or simply "Administration tool" is a functionality included in the SVSE Plugin so as to make available, for example, one or more administration functions to a subset of Site Maintainers (the so called "Administrators" or "super users"). In order to login into SVSE, a Maintainer (B.34) may, for example, manually append its personal Secure Login String (preceded by a "?" or a "&" character to be passed as GET parameter) to the URL of the Page that it intends to change in the browser address bar and then it may submit (B.35) the request of the Page from its client (A.18). Then the browser forwards (B.36) the request to the Site Web Server (A.19). If the Maintainer is correctly authenticated via the Secure Login String, the SVSE Plugin (A.21) adds (B.37) the GUI Resources to the Page Resource Set of the requested Page (as described below) before that the Site Web Server sends (B.38) said Page Resource Set to the browser, otherwise if the authentication of the Maintainer fails, the Site Web Server sends the Page Resource Set without the GUI Resources as in the normal navigation. In case of authentication failure, the above-described policy of silent failure of authentication (avoiding sending an error message) may, for example, be adopted in order to hide the presence of SVSE, for example, to an exploiter who wants to use SVSE without authorization, so as to increase the security of this implementation. In another example of authentication with Secure Login String, the Maintainer may first visit the Page in the browser and then append the Secure Login String to the URL by clicking a Login Bookmarklet (previously added to the favorite list of the browser) whose BSC automatically appends the Secure Login String to the URL of the Page currently displayed. The adding by the SVSE plugin of the GUI Resources to the Page Resource Set may be performed, for example, by inserting portions of one or more GUI Resources in one or more points of the HTML String utilized by the browser to build the structure of the Page, that is included in the Page Resource Set (hereinafter such HTML String is referred to as "Page HTML"), by means of one or more of the following methods implemented in the SVSE Plugin:

[00181] i. One or more of the patches performed to the Site Code during the Installation

Process contain all or part of the GUI Resources and/or one or more portions of BSC that loads all or part of the GUI Resources (hereinafter said one or more portions of BSC are referred to as "Page Loading BSC"). Accordingly, the Site Web Server inserts the content of said patches in one or more specific points of the Page HTML each time that it builds said Page HTML to send it to a client as response to a request from a user (hereinafter this method is referred to as "Direct Patching Method").

[00182] ii. A Buffering Method, comprising the steps below, is followed.

[00183] a. If the Page HTML is not available in a String (hereinafter "Page HTML

String") before it is sent to the client, the Page HTML is made available in a Page HTML String.

[00184] b. All or part of the GUI Resources and/or the Page Loading BSC are added to one or more specific points of the Page HTML String.

[00185] c. The Page HTML String, modified as described in the previous point "b", is sent to the browser as Page HTML.

[00186] An example of implementation of the Buffering Method that makes use of the PHP functions comprises the following steps: one or more PHP output control functions are utilized to buffer the Page HTML and then to capture the buffered Page HTML into a Page HTML String, then the "preg_replace" function is used with the Page HTML String so as to add part of the GUI Resources and/or the Page Loading BSC after the "BODY" tag, if found, or else to append it to the end of the Page HTML String, and finally the Page HTML String is sent ("echoed" in PHP) to the browser of the client.

[00187] An advantage of the Direct Patching Method with respect to the Buffering Method is that the Direct Patching Method has a shorter response time of the GUI loading, whereas the advantage of the Buffering Method is that it is more generally and easily applicable to a wide range of Sites (either built from Frameworks or not).

[00188] In the example of the Figure B-3, as soon as the browser receives the Page

Resource Set with the GUI Resources, it displays the Page and starts (B.39) the GUI (A.20) so as to make it available to the Maintainer.

[00189] In an embodiment, an authentication with User name and Password may be implemented, for example, instead of the authentication with Secure Login String described in the Step B-3.1. The authentication with User name and Password may be implemented, for example, by a method comprising the following steps:

[00190] i. The Maintainer appends to the URL of the Page a Prompt Activation String and sends the request to the Site Server with a method similar to one of the methods described to add the Secure Login String.

[00191] ii. The SVSE Plugin, at the receiving of the request, sends to the browser the Page

Resource Set with one or more Web Resources for making available a Login Prompt Panel to the Maintainer.

[00192] iii. The Maintainer enters its personal User name and Password (manageable, for example, from an Administration tool) in two input text fields of the Login Prompt Panel displayed in the Page, and then it submits the entered data (for example, by clicking a "Login" button in the Panel) to the Site Server so as they are sent to the SVSE Plugin. [00193] iv. As the SVSE Plugin receives the data entered by the Maintainer, if said data are authenticated, the interactions B.38 and B.39 take place, otherwise a login error message is displayed to the Maintainer.

[00194] Continuing in the description of the example of the Figure B-3, in the step B.3-2, the Maintainer modifies the Page P into the Page P' analogously to what the user does in the step B-1.3. In the Step B-3.3, the Maintainer may publish (B.40) the Page P' to the Visitors by using, for example, a "Publish" GUI function. As a result of using the "Publish" function, the GUI sends (B.41) a set of modification data including the Modification List to the Site Web Server (hereinafter a set of modification data utilized for purposes of publishing is referred to as "set of publishing data"). As soon as the publishing request is transmitted to the SVSE Plugin, one or more methods are adopted so as to apply (B.42) the changes in the Modification List to the Page P so that each time that the Page P of the Site S is requested by a Visitor from a visitor browser in a visitor client (A.22) to the Site Web Server, the Page P' of the Site S' is displayed in the browser of the visitor client instead (i.e., the Page P' and the Site S' are published). The Site S' is published via at least one available method among a list of available methods. The list of available methods can include at least one of the following implementable methods:

[00195] i. Patching at least one portion of the Site Code. The method of Patching the Site

Code may be implemented, for example, by means of a Code Patching Method that publishes the modified version P' of the original Page P of the Site S by modifying the Site Code. Hereinafter, "to locate" a software entity in a recording medium of a computer means to retrieve one or more data usable to uniquely identify the software entity in the medium. Two examples of data usable to locate software entities are: a) the absolute path to a file may be used to locate the file in a recording medium, and b) a SQL query retrieving a row may be used to locate the row in a table of a database. The Code Patching Method includes the following steps:

[00196] a. Locating, for each element of a set of Modification Elements of the

Modification List, one or more parts of the Site Code that are utilized by the Web Server to generate the Web Resources of the Page Resource Set that the browser of the client utilizes to render the element while building the Page (hereinafter said one or more parts of the Site Code are referred to as "Generator Code" of an element).

[00197] b. Patching the Generator Code of at least one Modification Element of the

Modification List.

[00198] To implement the method, the techniques described below may, for example, be utilized. First, in order to be able to locate the Generator Code of the Modification Elements, an additional operation described hereafter is performed during the Installation Process. One or more occurrences of HTML tags (such occurrences, for example, may consist of a String composed of a "<" followed by a HTML tag of a set of HTML tags) are searched throughout the Site Code. For each occurrence found, a String containing an attribute (hereinafter "Tag Tracker"), with a String value uniquely-identifying the occurrence, is added to the software entity related to the Generator Code so that the element of the Page having said occurrence as Generator Code has the value of the Tag Tracker attribute equal to said unique-identifying value. Additionally, at least one Modification Object in the Modification List of the set of publishing data further includes a list of one or more values of Tag Trackers of the one or more Modification Elements of the related Modification. Lastly, as soon as the publishing request is received by the Site Web Server (B.42), the following operations are performed by the SVSE Plugin for each element of the one or more received Modification Elements with a received Tag Tracker value:

[00199] a. The Generator Code related to the element is located in the Site Server.

[00200] b. Once located, the Generator Code, the SVSE Plugin converts the data in the Modification Object into one or more Patching Data usable to patch the Generator Code.

[00201] c. The SVSE Plugin then patches the Generator Code using the one or more

Patching Data so that, at each request from the client, the Page Resource Set of Page P' (hereinafter "PRS' ") is sent to the client instead of the Page Resource Set of Page P (hereinafter "PRS") by the Site Web Server.

[00202] In an embodiment of the Code Patching Method, a Generator Code lookup table may be populated during the adding of the Tag Tracker in the Installation Process. The lookup table may contain, for each value of Tag Tracker, the information to locate, in a recording medium of the Site Server, the software entity of the Generator Code related to the value. The Generator Code lookup table may be utilized to find the Generator Code from a Tag Tracker in the step "a" of the Code Patching Method. In an embodiment of the Code Patching Method, assuming that the Superposition Property is applicable to a Modification List M, the Modification List M may be subdivided into the two Independent Modification Lists M _PAT C _H and MNO _PAT C _H - Assuming that M _PAT C _H may be applied to the Page P so as to change it into the Page P _PATCH , the Code Patching Method is applied only to the one or more Modification Objects included in the Modification List M _PATCH - Some examples of possible reasons for which a Modification may be excluded from M _PATCH are listed below:

[00203] a. The Tag Tracker value of a Modification Element of the Modification appears in more than one element of the Page P (this may occur, for example, if more cells of a table are added to the Page HTML by means of the following PHP Code: for ($i=0; $i < 5; $i++) echo

"<TD>$i</TD>" ; ). In this case, if the Code Patching Method is applied to an element having said Tag Tracker value, the result of the publishing is extended to all the elements of the Page having said Tag Tracker value, so that, for example, the published Page P" may differ from the Page P' modified by the Maintainer with the GUI in the step B.3-2.

[00204] b. In an embodiment, patching the Generator Code of one element may affect the Appearance and/or the operation of one or more Pages other than Page P. This may be an outcome undesired by the Maintainer, who for this reason may, for example, be provided with a Selectable Option of the GUI so as to disable the application of the Code Patching Method to one or more selected Modifications. [00205] ii. Changing a Site Resource Set of the Site S before at least one transmission of the Site Resource Set by the Site Server to the visitor client. The following is an example of implementation, in the SVSE Plugin, of a Resource Patching Method that changes the Page Resource Set of a Page of the Site S after that the request of the Page is received by the Site Web Server and before that the Page Resource Set is sent to the client. To apply this method, the following technique is applied when the Maintainer publishes the Site (B.42): as soon as the publishing request is received by the Site Web Server, the data of at least one Modification Object of the Modification List is converted into one or more data (hereinafter "Resource Patch Data") usable to patch at least one Web Resource of the PRS so as to change the PRS into the PRS'. The implementation of the Resource Patching Method described below is analogous to the Buffering Method, wherein the step "b" is replaced with the following step performed by the SVSE Plugin: the Page HTML String is patched with the Resource Patch Data before being sent to the client. Basing on the example of implementation of the Buffering Method reported above, the Resource Patch Data may, for example, include a couple of PHP arrays that are passed as "pattern" and "replacement" arguments to the "preg_replace" function utilized in the example of Buffering Method so as to patch the Page HTML String.

[00206] iii. Changing the Site S in the visitor client by adding at least one patching String to the Site Resource Set of the Site S before the at least one transmission of the Site Resource Set by the Site Server to the visitor client. The at least one patching String can include at least one portion of code (hereinafter "Patching Code") written in the Browser Script Language. The at least one portion of code is executed in the visitor browser so as to change the Site S. The following is an example of implementation, in the SVSE Plugin, of a Script Patching Method that changes the Page P into the Page P'. In order to apply said Script Patching Method, a Patching Code is built from the received Modification List at the publishing of the Modifications (B.42). This example of implementation of the Script Patching Method is analogous to the Buffering Method, wherein the step "b" is replaced with the following step: the Page HTML String of the Page HTML of the Page P is patched with the at least one patching String. In this example, the patching String may be added to the "BODY" of the Page HTML, and the Patching Code, that may be executed, for example, by the browser after rendered the Page P, may include the

Modification Code of each Modification Object in the Modification List received in the set of publishing data. Such one or more Modification Codes, once executed in the Page P, change it into the Page P'.

[00207] Each implementable method described above may have various advantages and disadvantages compared with the other implementable methods. It is assumed in this comparison that a Page P' changed with a Modification List M is published using from time to time each implementable method. It is noticed from this comparison that the Code Patching Method has the best performances in terms of CPU Usage of the Site Server and of the Client and in terms of response time of Page loading (i.e., the length of the time interval between the request of the Page performed by the browser and the first instant at which the Page is available to the user in the browser) when the published Site S' is navigated by a Visitor. The reason for these performances is that, with the Code Patching Method, the changes are embodied in the Site Code and the Site Web Server generates the Page Resource Set of the modified Page P' with approximately the same efficiency that it has when generating the Page Resource Set of a Page P" that is originally equal to the Page P' (i.e., the Page P" is equal to the Page P' without being modified with a VSE). On the other hand, the Site Server, applying the Resource Patching Method, has the additional overhead of patching the Page HTML with the Modifications before each sending to the client, so the Resource Patching Method has a higher CPU Usage and a slower response time of Page loading with respect to the Code Patching Method. Finally, the Script Patching Method has performances worse than the other two implementable method, since it has an overhead analogous to the process of patching the Page HTML that the Resource Patching Method has, and it has also the additional overhead of the execution time of the Patching Code in the browser of the Client. Another term of comparison of the implementable methods is the range of applicability of the Modifications. As explained in the description of the Code Patching Method, in one implementation of this method some Modifications may be excluded from the M _PATCH Modification List, for example, if there are multiple elements in the Page with the same Tag Tracker value of a Modification Element. On the other hand, the same excluded Modifications may be published, for example, by means of the Resource Patching Method or the Script Patching Method. Notably, each Modification performed to the Page may be published with the Script Patching Method due to the usage in this method of the same Modification Codes used by the GUI to modify the Page in the browser in the Step B-3.2.

[00208] In an embodiment, at least one implementable method is implemented. In an embodiment (in which the Superposition Property is assumed to be applicable to the

Modification Lists), the following methods and adaptations may, for example, be

implemented so as to find a better compromise between the advantages and disadvantages described above:

[00209] i. The Code Patching Method and the Resource Patching Method are

implemented.

[00210] ii. As soon as the publishing request for the Page P' is received by the Site Web

Server, the Code Patching Method is applied to each Modification Object included in the M _PATCH Modification List. Furthermore, if the M _NOPATCH Modification List is not empty, the Resource Patch Data is calculated with the Modification Objects in the M _NOPATCH Modification List.

[00211] iii. As soon as a request for visualizing the Page P is received by the Site Web

Server, and if the M _NOPATCH Modification List is not empty, the Resource Patching Method is applied with the Resource Patch Data calculated in the previous point "ii".

[00212] In an embodiment, one or more limitations may be added to the applying of the published Modification List to the Pages. For example, in an implementation, the following adaptations may be applied to the publishing methods and/or techniques heretofore described so that the SVSE Plugin applies the published Modifications only to the Page in which the Maintainer performs said Modifications with the GUI:

[00213] i. A Page Parameter Set (for example, the Page Parameter Set of the changed

Page P) is included in the set of publishing data sent by the GUI to the Site Web Server.

[00214] ii. The Page Parameter Set received from the GUI is recorded by the SVSE Plugin in a recording medium of the Site Server during the operation B.42.

[00215] iii. The one or more Modifications in the Modification List of the set of publishing data are applied to the Page Resource Set of a Page requested by a client only if the requested Page matches with the Page Parameter Set recorded in the point "i" of this list of adaptations.

[00216] In an embodiment, at least one tool and/or function may be provided to the

Maintainer so as to publish the Modifications recorded in one or more Modification Files. For example, the Maintainer may be provided with a Publish Panel, a tool similar to the above-described Include Panel, in which each Modification File (recorded in the Site Server analogously to how the Modification File are recorded in VSE Server as described above) displayed in the File Manager Tool may have, for example, a graphic selector (for example, a "Publish" checkbox at its left) that the Maintainer may utilize to select which Modification Files to Publish. The Modifications of each Modification File may be applied to the Page as soon as the Maintainer selects the Modification File with the graphic selector and they may be removed as soon as it deselects the Modification File, so as to show to the Maintainer a preview of the Appearance and operation that the Page would have if the selected one or more Modification Files were published. After that the Maintainer completes the selection of the Modification Files, it may click a "Publish" button in the Publish Panel so as to publish the Modifications of the selected Modification Files. For example, the publishing may be implemented by transmitting to the SVSE Plugin a list of identifiers of the selected

Modification Files and, as soon as the list is received by the SVSE Plugin, the Modification Lists of the selected Modification Files are retrieved from a recording medium of the Site Server and published via at least one implementable method.

[00217] Hereinafter, a Persistent Data is a data that Site Server keeps in memory while the Site Maintainer browses the Pages of a Site. Compared to CVSE, a SVSE implementation has the advantage that one or more Persistent Data utilized by SVSE (hereinafter "SVSE Persistent Data") may be stored along with the other Persistent Data utilized for the operation of the Site. SVSE may implement various methods to preserve one or more SVSE Persistent Data: one of the main objectives of these methods is to keep the Site Maintainer logged (authenticated) in SVSE during the navigation through different Pages of the Site. Some examples of SVSE Persistent Data are i) the information on whether the Site Maintainer has started a Working Session or not, ii) the authentication details of the Site Maintainer, and iii) one or more configurable options of the GUI.

[00218] The majority of Sites have their own Persistent Data management, by utilizing, for example, a session mechanism (for example, several Sites utilizing the PHP Server Script Language stores Persistent Data in a dedicated PHP vector of values named "$_SESSION"). If a Persistent Data management is natively built into the Site, the SVSE Plugin may, for example, use it so as to preserve the SVSE Persistent Data, otherwise the SVSE plugin may, for example, use its own methods for the Persistent Data management.

[00219] Continuing in the description of the example of the Figure B-3, the result of the publishing of the Page P' is sent (B.43) to the browser and then displayed (B.44) to the user. Then the Maintainer, after modifying a Page, may, for example, decide (B.45) to change another Page keeping logged in SVSE or to end the editing of the Site. If the Maintainer decides to continue, it may, for example, visit (B.46) another Page Q from the Page P. The step B-3.4, as for the interactions subsequent to B.46, is analogous to B-3.1, with the difference that when the SVSE Plugin processes the request (B.47), it does not explicitly authenticate the Maintainer, but it uses the session mechanism to retrieve the data of the Maintainer from one or more SVSE Persistent Data stored, for example, in step B-3.1.

[00220] An example of usage of a SVSE implementation with the Frame Navigation technique is analogous to the example of usage of a CVSE implementation with the Frame Navigation technique depicted in Figure B-2, wherein: i) the interactions with the VSE Server and the VSE Web Server of the Figure B-2 are performed in SVSE, respectively, with the Site Server and the Site Web Server, and ii) the steps B-2.1 and B-2.2 may, for example, be replaced in SVSE with the step B-3.1.

[00221] If the performances of the SVSE implementation with the Page Navigation technique are compared with the ones of the SVSE implementation with the Frame

Navigation technique, results analogous to the ones obtained from the comparison of the same CVSE implementations are found: the more the Pages modified, the more convenient the Frame Navigation is compared to the Page Navigation in terms of CPU Usage of client and Site Server and of average amount of data exchanged between the client and the Site Server.

[00222] In an embodiment, one or more policies to manage the access of multiple

Maintainers to the SVSE functionalities are implemented. A subset of said one or more policies is utilized for the detection of the concurrent access by more than one Site Maintainer to the same Page at the same time. The concept of access is defined below for a web applications and particularly for a SVSE. Since the SVSE access management is analogous to the one commonly utilized in the web applications, an implementation of access management suitable for web applications can be also applied to SVSE. It is assumed that i) the "access time window" of a Maintainer to a Page is the time window in which the Maintainer is allowed to make Modifications to the Page and ii) a Page is defined as "locked" by a

Maintainer in a certain instant if said instant is within the access time window of the

Maintainer to the Page, and it is otherwise defined as "unlocked". As for the modifications performed with a SVSE, it is noticed that on one side, the initial instant of an access time window is uniquely determined by the time at which a Maintainer loads the Page Resource Set of a Page, whereas on the other side the final instant cannot be defined with the same certainty. Generally speaking, even if a web application is provided with a logout function (either manual or automatically triggered when a Page is abandoned), it can be shown that a statistically significant percentage of users do not utilize such a function after they finish using the application. Therefore, the methods to set the final instant of an access time window, so as to determine whether a user is potentially changing a Page or not with a SVSE, cannot be based, for example, on the above-mentioned logout functions: an example of implementation, borrowed from the session expiration policies generally used in the web applications that utilize a session mechanism, is reported below. For example, usually the sessions of a web application are given an expire time that is set according to the estimated maximum period of time for which, on average, the users leave the web application idle before performing an action. It is assumed in this example that the one or more Page

Parameter Sets of the one or more Pages open in a GUI are stored as the session data (i.e., the Persistent Data stored with the session mechanism) of the Maintainer that started the GUI. This implementation utilizes the expire time parameter of the sessions: in this example a Page is considered "locked" by a Maintainer if a session of said Maintainer is alive (i.e., not yet expired) and the Page Parameter Set of the Page is included in the Page Parameter Sets of the one or more open Pages stored as session data.

[00223] Hereafter, the interactions between the clients and the servers reported in this disclosure are described in depth and several examples of implementations of data

transmission between the GUI and the storing entities are provided. Browsers often memorize the data in one or more objects of a BSL, therefore said one or more objects have to be converted into at least one String (hereinafter "Message String Set") before the GUI transmits them to a storing entity. The Message String Set also has to be converted back into the one or more BSL objects after it is retrieved from the storing entity. A Jelliphy Advanced implementation utilizes, for example, several JSON (JavaScript Object Notation) and XML conversion functions to convert one or more Javascript objects into a Message String Set and vice-versa. The followings are some examples of implementation of techniques to send, to receive, to store and to retrieve a Message String Set to and from the various storing entities referred to in this disclosure.

[00224] i. Storing and retrieving to and from the local client. The GUI may, for example, store and retrieve the Message String Set to and from the local client by means of one of the followings techniques.

[00225] a. By saving and loading the Message String Set in one or more Cookies in the browser. The Message String Set may be easily encapsulated in one or more Cookies recorded in the browser so that the data in the related BSL objects are preserved across the Subsequent Working Sessions and they are available to be retrieved in said Sessions, provided that the browser used in said Sessions is the same browser in which the one or more Cookies are recorded.

[00226] b. By downloading and uploading the Message String Set to and from a file in a recording medium. An example of implementation, that helps the user to download a XML String of the Message String Set (memorized in the variable "downloadString") and may be easily used in many browser types (for example Chrome and Mozilla FireFox), utilizes a download link, available in the GUI, in which the "HREF" attribute has a value calculated with the following Javascript code:

[00227] href = 'data: application/xml, ' + encodeURIComponent (downloadString)

[00228] An example of implementation (also compatible with Chrome and Mozilla FireFox) that provides the user a functionality to upload a String of the Message String Set from a file in a recording medium, utilizes a file input field, for example available in a GUI tool, with an "importFile" Javascript function bound to the "change" event of the field. An example of Javascript code for the "importFile" function is the following:

[00229] importFile = function ( ) {

[00230] var reader = new FileReader ( ) ;

[00231] reader . onload = function () {

[00232] var result = this . result ;

[00233]

[00234] } ;

[00235] reader . readAsText ( file ) ;

[00236] } ;

[00237] The "reader.onload" function in the code above stores in the variable "result" the String uploaded from the file so that it is available for further processing in the function. [00238] ii. Transmission to and from the Site Server. The transmission of a Message String Set from the browser to the Site Server and vice- versa may be implemented by means of several standard AJAX functions. Jelliphy

Advanced, for example, utilizes several jQuery AJAX APIs in the GUI so as to send and receive Strings to and from the SVSE Plugin.

[00239] iii. Transmission to and from a third-party server. Several implementations of the

GUI adopt various techniques to send and to receive data to and from a third- party server, for example, to and from the VSE Server. In order to implement a technique of transmission involving a third-party server, the above-described cross-domain limitation has to be overcome. In this case, the cross-domain limitation, for example, blocks any AJAX transmission to the domain of the VSE Server because such domain is generally different from the domain of the Site that the user is changing with VSE. For this reason, the sending of input data and the consequent receiving of output data to and from the VSE Server is, for example, performed in Jelliphy Advanced with a method comprising the following steps:

The GUI in the browser converts the input data into one or more GET parameters of a URL String having as address the address of a dynamically composed Javascript resource available in the VSE Server.

The GUI adds to the Page a "SCRIPT" element with said URL String as value of the "SRC" attribute. Accordingly, a request for the Javascript resource is sent to the VSE Server.

The VSE Web Server processes the request for the Javascript resource and, if required, it utilizes the input data sent as GET parameters. As a result of the operation above, the VSE Web Server produces a BSC.

[00243] d. The VSE Web Server sends said BSC as a response to the request of the

GUI. [00244] e. The browser executes the BSC as soon as it is received. The execution of the BSC may, for example, include the operation of assigning a set of returning values to a set of variables in which the GUI expects to receive the output data.

[00245] In an embodiment of the present invention, the set of actions available to the user can, for example, include setting at least one condition to the availability of the published Site S' to the at least one Visitor (the publishing of a Site S' with a condition is hereinafter referred to as "Conditional Publishing"). A result of setting the at least one condition is the retrieving of a set of condition data. The set of condition data can be used so as to determine if the published Site S' is to be visualized to the Visitor. The at least one Visitor visualizes the published Site S' if it is so determined by processing a set of data (hereinafter "Site Data Set"). The Site Data Set includes the set of condition data and it may additionally include, for example, the following data:

[00246] i. A set of client data that the browsers usually send to the servers automatically during the navigation. The set of client data may comprise, for example, information on the type of computing medium of the client and on the environment in which the browser program runs For example, it may comprise information on the Operating System, on the type of browser used and on the so called "localization", the latter including, for example, data such as the default language and the time zone set up in the client.

[00247] ii. A set of navigation data specific for each Site and collected by the Site Server during the navigation of the Site. An example of data included in the set of navigation data is the language selected by the Visitor for the text visualized in the Site (hereinafter "Selected Site Language"). Examples of languages are American English, French, Castilian Spanish, Mandarin Chinese and Japanese. [00248] The set of condition data may include, for example, at least one condition that at least one data in the Site Data Set can satisfy. An example of a condition is that the browser type utilized by the user to navigate the Site is Chrome.

[00249] In an example of implementation of the Conditional Publishing, the user may select a language (hereinafter "Selected Publishing Language") for the Site S' before publishing it, for example, by selecting a language String identifier in a language selector of the Publish Panel before that the set of publishing data is sent to the Site Web Server. The Selected Publishing Language is included to the set of publishing data sent by the GUI to the Site Web Server. The SVSE Plugin, after it received the set of publishing data, publishes the Site S' so that the Site S' is visualized to the Visitor if one of the following conditions is verified:

[00250] i. A Selected Site Language is selected by the Visitor for the text in the Site and the Selected Publishing Language is equal to the Selected Site Language.

[00251] ii. No Selected Site Language is selected by the Visitor and the Selected

Publishing Language is equal to a default language.

[00252] If the Site S does not provide a graphic tool (hereinafter "Site Language Selector") to allow the Visitor to select a Selected Site Language, an "Adding Language Selector" function may be, for example, provided to the user so as to publish a Site S", the Site S" including a Site Language Selector.

[00253] In an embodiment of the present invention, the client computing medium can be, for example, at least one of a laptop computer, a notebook computer, a desktop computer, a tablet computer, a smart phone, a personal digital assistant (PDA), a cellular telephone, a mobile computing device, a portable media player, a Wi-Fi mobile platform, a portable e- Reader, a portable game player, a game console, a television set, an Internet appliance or any other type of computing device capable of connecting to a server. The implementation solution of providing the VSE functionalities disclosed in this document to the users through a GUI basically allows the implementation of VSE systems working on different types of client computing mediums. Furthermore, an implementation of VSE may provide a GUI adaptive to various types of computing mediums. An example of implementation supporting an adaptive GUI is described below. It is assumed in this example that the information on the type of client computing medium is available to the SVSE Plugin in the set of client data. The SVSE Plugin selects which GUI Resources to send to the client based on the type of client computing medium in order to start in the client computing medium a GUI instance adapted to the medium. For example, an instance of the GUI, that is displayed in a type of smart phone with a known maximum size permitted for a Viewport of a browser, is designed so as to fit to the dimensions of the Viewport. Thus, the GUI Resources that are used to build the GUI are set accordingly by the SVSE Plugin. It is noticed that an example analogous to the above-described, but in a CVSE implementation, may be also conceived by replacing the SVSE Plugin with the VSE Web Server in the above description.

[00254] In an example of implementation of the Conditional Publishing, the user may select a type of client computing medium for the Site S' before publishing it, for example, by selecting one or more types of client computing medium in a medium type selector of the Publish Panel before that the set of publishing data is sent to the Site Web Server. The one or more selected types of client computing medium are included in the set of publishing data sent by the GUI to the Site Web Server. The SVSE Plugin, after receiving the set of publishing data, publishes the Site S' so that the Site S' is visualized to the Visitor if the type of computing medium of the visitor client, available to the SVSE Plugin in the set of client data, is equal to at least one of the one or more types of client computing medium selected by the user.

[00255] Several examples of GUI tools and GUI functions to change the Page and to edit one or more Web Resources of the Page Resource Set of the Page are described hereafter. The examples may be implemented both in SVSE and in CVSE unless otherwise specified. It is noticed that herein the distinction between GUI tools and GUI functions is made solely for purposes of exposition rather than limitation and each GUI tool may be implemented as GUI function and vice-versa. Hereinafter, the expression "Generic Server" is intended to refer to the Site Server if the action is performed in SVSE and to the VSE Server if the action is performed in CVSE. A Jelliphy Advanced implementation was utilized in a Page of a demo Site (herein "Sample Page") built with the Drupal™ Framework so as to show some examples of how the functionalities hereafter described may be applied in practice. The Figure D-2 shows a screenshot of the Sample Page without the modifications performed with Jelliphy Advanced. The following significant elements were in the Sample Page: the Header (D.3), the Logo (D.4), the Header Title (D.5), the First Tab Handler (D.6), the Last Tab Handler (D.7), the Page Title (D.8), the Page Background (D.9), the First Image (D.10) and the First Article (D. l l). The term "Interface Mode" (hereinafter "IM") refers in this disclosure to a mode of operation belonging to a set of mutually-exclusive modes of operation that the user may select via the GUI in order to temporarily restrict the set of the available actions and to facilitate the access to said available actions. The following assumptions are made solely for purposes of exposition rather than limitation.

[00256] i. From the instant at which the user switches to (or "activates") a first IM and until the user switches to a second IM or until the Current Working Session ends, said first IM is qualified as active.

[00257] ii. The actions that a user may perform via the GUI may be grouped in Global

Actions and Modal Actions with the following meanings. The Global Actions are the actions that a user is allowed to perform via the GUI during the Current Working Session. The Modal Actions are the actions related to one or more JJVls. A user is allowed to perform a Modal Action if one of the related IMs is active.

[00258] Herein, "color" means "web color", i.e., a color available to be utilized by a browser when rendering a Web Page. The screenshots of the Sample Page in the Figures from the D-3 to the D-14 show various examples of usage of GUI functions and GUI tools in several implementations of Jelliphy Advanced and each screenshot was taken after that a Working Session of Jelliphy Advanced was started. The screenshot D.12 of the Figure D-3 shows an example of how a Page appears when a Working Session is started in a Jelliphy Advanced implementation with the Page Navigation technique. It is noticed that several tools used in this example (such as the Foreground and Background Colors, the Color Selectors and the Color History sub-panel) are described later herein. In the Jelliphy Advanced

implementation depicted in the screenshot, the Main Panel (D.13), that was displayed at the beginning of a Working Session, might be utilized by the user to perform several actions, some examples of which are reported below.

[00259] i. Switching from an active IM to another IM by clicking one radio button of a set of radio buttons displayed in the Main Panel. An example of radio button is the "Handle" button (D.15) that might be used to activate a Handle IM, described later herein.

[00260] ii. Accessing to several GUI functions and/or GUI tools, for example, from the items of a pull-down menu (for example, the Main Menu D.14 in the screenshot).

[00261] iii. Changing a Foreground Color and a Background Color from a foreground

Color Selector and a background Color Selector respectively (D.16).

[00262] A Color History sub-panel might be accessed by the user by hovering with a cursor pointer (hereinafter "Pointer") the ellipsis under the Color Selectors depicted in D.16. The usefulness of the Modal Actions can be seen in the following scenario: the user intends to select the color of a pixel in a certain point of the Page (hereinafter such an action may be referred to as "to pick" a color) so as to use said color to color the background of another element. To achieve this result, the user may, for example, follow the procedure below, in which it is assumed, solely for purposes of exposition rather than limitation, that a mouse is available as a pointing device in the client computing medium (hereinafter "Mouse

Supporting Medium") and it is implied that the Eyedropper IM, the Color Selectors and the Paint EVI are described in details later herein.

[00263] i. Switching to an Eyedropper IM.

[00264] ii. Moving a Pointer over the Page until the Pointer hovers over a point with the desired color.

[00265] iii. Clicking the left button of the mouse so as to store the desired color in a

foreground Color Selector. [00266] iv. Switching to a Paint IM.

[00267] v. Moving the Pointer over the Page until the Pointer hovers over the element whose background the user intends to color.

[00268] vi. Clicking the left button of the mouse so as to color the background of the

element.

[00269] Several examples of IM implementations that may be included in VSE are described hereafter. It is noticed that each example of Modal Action, of GUI tool and of GUI function described hereafter is assigned to an IM solely for purposes of exposition rather than limitation and said example may be implemented in any other context of operation of the GUI: it may, for example, be assigned to another IM or be implemented as a Global Action.

[00270] In an embodiment, a Navigate IM is available to be activated by the user. The Navigate IM allows the user to browse different Pages of the Site with no need to manually re- start the GUI each time that the Page viewed in the browser changes. The user may utilize this IM in order to open one or more Pages of the Site that it intends to subsequently change in one or more of the other IMs. In an implementation, as soon as the user activates the Navigate IM, the GUI allows the user to utilize the navigating functionalities of the Page (for example, the one or more links, buttons and menus of the Page are fully working and accessible to the user). Several implementations of this IM may be adopted: the followings are two examples.

[00271] i. Adopting the Page Navigation technique with a SVSE implementation. Each time that the user, for example, a) clicks a link, b) submits a form in the Page, or c) opens a Page of the Site in a new tab of the browser, in the Site Server the GUI Resources are added to the Page Resources of the new Page as explained above in the example of a SVSE implementation with the Page Navigation technique. [00272] ii. Adopting the Frame Navigation technique. The one or more Pages of the Site are loaded in one or more Frames as described in the examples of implementation of the Frame Navigation technique. The user may, for example, browse the Site from the Frames during the Current Working Session without having to interrupt the operation of the GUI because the GUI is loaded in the Viewport, and the content of the Viewport is not reloaded while the Site is browsed from the Frames.

[00273] In an embodiment of the present invention, the set of actions available to the user can, for example, include a set of available Selecting Actions. The set of available Selecting Actions includes selecting at least one element of at least one Page of the Site S by performing at least one direct Selecting Action on each of the at least one element. When a Handle IM is active, the user can visually handle one or more elements in the Page as described below. As soon as the user switches to this EVI, the GUI may change its behavior so that, for example, the user may perform one or more Selecting Actions so as to select one or more elements that it intends to utilize in one or more changes to the Page. The user may, for example, perform the following steps when the Handle EVI is active.

[00274] i. The user moves the Pointer in the Page until it hovers over an element that the user intends to change. It is assumed herein that the term "finger" refers to any tool and body part that may be utilized to touch, to swipe, and/or to tap a touch screen device (hereinafter "touch screen"). The moving of the Pointer by the user may be achieved, for example, by moving the mouse in a Mouse

Supporting Medium and, if a touch screen is utilized in the client computing medium (hereinafter "Touch Screen Supporting Medium"), by swiping the finger on the touch screen. For example, while the user moves the Pointer in the Page in the Handle IM, the element under the Pointer is highlighted (as defined below) by the GUI in order to show the user which element is available to be selected. Hereinafter, "to highlight" an element means to alter the Appearance of the Page so as to help the user to distinguish the highlighted element from the other elements in the Page and possibly to select the highlighted element. In order to highlight an element, the GUI may, for example, overlap the element with a Highlighted Area (i.e., a HTML element consisting, for example, of a shaded area). It is assumed herein, solely for purposes of exposition rather than limitation, that the opacity of an element is a float number in the range of 0 and 1 that may be set, for example, a) in the "opacity" style property of an element, b) in the "opacity" value of the "alpha" filter style property of an element (in the last case the opacity is obtained by dividing the value of alpha by 100), or c) in the "opacity" style property of an ancestor of the element. The Highlighted Area may, for example, be a semi- transparent (i.e., with an opacity greater than 0 and less than 1 ) oblique-banded screening area or an area whose inner color may vary to be in contrast with the other elements in background. If more than one element underlies the Pointer, several policies may be utilized in order to reduce to only one element the set of elements to be highlighted, wherein the probability that said one element is the one that the user intends to highlight is as high as possible. The methods and the policies adopted to implement the functions described in this point involve key concepts of this invention and are extensively discussed later herein.

[00275] ii. As soon as the user, for example, highlights an element which it intends to change, it can perform, for example, one or more of the following actions.

[00276] a. In a Mouse Supporting Medium, the user can press the left button of the mouse (hereinafter "mouse button") when the Pointer is hovering over the highlighted element in order to select the highlighted element (hereinafter such an action is also referred to as "to left-click" or "to click" the element). So as to select the highlighted element in a Touch Screen Supporting Medium the user may, for example, quickly perform the following actions: 1) removing from the touch screen the finger that it is using to move the Pointer and 2) tapping the touch screen in a position corresponding to the highlighted element (the element remains highlighted for a short interval of time after that the user removes the finger so as to allow the tapping). Hereinafter, "to tap" an item (for example a Page element or a pixel) in a touch screen means "to tap the touch screen in a position corresponding to" the item. Analogously, "to touch" an item in a touch screen means hereinafter "to touch the touch screen in a position corresponding to" the item. As soon as the user selects an element the GUI may, for example, replace the Highlighted Area of that element with a shaded area (hereinafter "Selected Area") that differs from the Highlighted Area (for example in color) in order to help the user to distinguish the Selected Area from the other elements in the Page and from other

Highlighted Areas. Also, the GUI may, for example, add to the Selected Area some icons to access to several Selected Element Tools and

Functions (hereinafter "SETF") that help the user to graphically change the one or more selected elements.

The user may select multiple elements, for example, by keeping pressed a key (for example "Shift") of a keyboard (hereinafter, "keyboard" may refer both to a physical keyboard device and to a virtual keyboard used, for example, in a Touch Screen Supporting Medium) while clicking each of the elements that it intends to select, or by properly changing the GUI configuration before to click each of said elements.

In a Mouse Supporting Medium, the user can press the right button of the mouse (hereinafter "right-click" the element) in order to make a contextual menu (containing a list of actions available to be performed on the element) appear.

The user can press a key (for example "I") on the keyboard (hereinafter simply "to press a key") so that the GUI displays several additional information about the element in a Quick View Panel next to the element (examples of such additional information are the element's tag name and the value of the most relevant attributes of the element). [00280] Herein, "to click" a HTML element of the Page or an element of the GUI means to perform a clicking action on the element. For example, in a Mouse Supporting Medium the user may click an element if it moves the Pointer until it hovers over the element and then it presses the left button of the mouse, whereas in a Touch Screen Supporting Medium the user may click an element by simply touching or tapping it on the touch screen with a finger. Furthermore, herein "to drag-and-drop" (or simply "to drag") a HTML element of the Page or an element of the GUI means a compound action having the user as subject and aiming to move the element from its current position of the Page to another position. To perform the dragging action in a Mouse Supporting Medium the user may, for example, i) move the Pointer over the element, ii) press the left button of the mouse, iii) keep the mouse button pressed and move the Pointer until it reaches the point of the Page in which it intends to move the element to, and iv) release the button (hereinafter, the last action may be also referred to as "the user drops the element"). In a Touch Screen Supporting Medium the user may for example i) touch the element with a finger, ii) move the finger without detaching it from the touch screen until the desired position is reached, and iii) remove the finger (so as to drop the element).

[00281] In an embodiment of the present invention, the set of actions available to the user can, for example, include resizing the at least one element selected by dragging at least one of a border and a corner of the at least one element selected. Accordingly, the Resizing tool is an example of SETF that allows the user to visually change the width and the height of one or more elements of the Page at one time. Once that element is selected, its Selected Area may, for example, be provided with some resizing handles (for example, some strips on the bottom border, on the right border and/or on the bottom-right corner) that are available to be drag- and-dropped by the user in order to enlarge or reduce the vertical and/or the horizontal size of the element. If multiple elements are selected to be resized, all the selected elements may, for example, be resized while a resizing handle of one selected element is dragged. The screenshot D.12 of the Figure D-3 shows the Appearance of the Sample Page while the user was utilizing a Resizing tool implemented in Jelliphy Advanced so as to resize the First Image. Before that this screenshot was taken, the user switched to the Handle EVI by clicking the radio button D.15, then it selected the First Image. Once selected, the GUI covered the Image with a Selected Area (D.17). Additionally, a container with several icons to access to several SETF (D.18) was positioned by the GUI at the bottom right of the Selected Area. The icons displayed in the container were the followings (from the left to the right): a button to paint the selected element (as described in the Paint EVI section), a button to quick-edit the element (described below), a handle to move the element (although the element might be also dragged by any point of the Selected Area as described below, a dragging handle was shown in the container so as to help the beginner users to discover the Moving functionality, described below) and a handle to resize the element (hereinafter "resize handle"). The user was drag-and-dropping the resize handle to another position (D.20) so as to resize the First Image and the GUI was showing a preview (D.19) of the resized First Image while the screenshot D.12 was taken.

[00282] In an embodiment of the present invention, the set of actions available to the user can, for example, include repositioning the at least one element selected by dragging the at least one element selected. The user can move the one or more selected elements from their current position to another position simply by drag-and-dropping their Selected Area by means of the Moving tool, a further SETF disclosed below. So as to describe the Moving tool, two examples of methods adopted by the GUI to move the elements, wherein the choice of the method to apply depends on the value of the "position" style property of the moving element (hereinafter "Position Property" of an element), are discussed below.

[00283] i. The absolutely-positioned elements (i.e., the elements whose Position Property is "absolute" or "fixed") have no position constraints and they are basically laid out in the Page independently from the position of the other elements, therefore they can be freely drag-and-dropped by the user to any position of the Page.

[00284] ii. A method different from the one utilized for the absolutely-positioned elements may be implemented for the Static elements (i.e., for the elements whose Position Property is "static" or "relative"). Herein, if terms such as, for example, "next to", "after", "before", "inside", "parent", "child", "ancestor" and "descendant" are referred to a HTML element, they are intended to refer to the position of the element as a node of the DOM tree so that, for example, an element Y after an element X is the HTML element that is adjacent on the right to the element in the X in the DOM tree. For example, a Static element (referred to in this example as "Repositioning Element") can be repositioned in the Page so that its new position is next to (before or after) or inside another Static element of the Page (referred to in this example as "Pivot Element"). The user can configure an option (referred to in this example as "Insert Option") to select if the Repositioning Element is positioned before, after or inside the Pivot Element. Several elements of the Page may be qualified as "droppable" for a Repositioning Element with the following meaning: the user is allowed to drop the Repositioning Element only next to or inside (depending on the Insert Option) an element that is droppable for the Repositioning Element. In an implementation of the Moving tool, not all the Static elements are droppable for all the Repositioning Elements: for example, a "TD" element may only be positioned inside a "TR". Additionally, the above rule to attribute the droppable property may be further restricted, for example, by defining "droppable" only the elements similar (as defined below) to the Repositioning Element.

[00285] For example, two elements may be defined "similar" if they satisfy at least two of the following conditions: i) they have the same tag, ii) they have the same number of ancestor elements (hereinafter such a number is referred to as "Element Depth"), iii) they have at least one class in common, and/or iv) they have a similar parent element. If multiple elements are selected to be moved, all the selected elements may be, for example, repositioned next to the position in which the user drops the element that it is dragging.

[00286] The screenshot D.21 of Figure D-3 shows an example of usage of the Moving Tool with a Static element in Jelliphy Advanced. Before that the screenshot was taken, the user switched to the Handle IM and then selected the First Tab Handler in the Page. The screenshot was taken while the user was dragging the First Tab Handler from its original position (D.22) to a position closed to the Pointer (D.23), after another tab element (D.25). A copy of the First Tab Handler (D.26), that was following the Pointer, turned green so as to inform the user that the Pointer was hovering a droppable element and that the user was allowed to drop the First Tab Handler so at to reposition it. The element D.24 shows a preview of the Appearance of the Page if the First Tab Handler were dropped at the instant at which the screenshot was taken.

[00287] In an embodiment, one or more Editing tools can be used to manually edit the selected element and/or its content (as text and/or as HTML). These tools may have various implementations, including the followings.

[00288] i. A contextual Panel opening just under the element for a quick edit of the text of the one or more text nodes that are children of the element (hereinafter such text is referred to as "Element Node Text"). Hereinafter, expressions such as "pop-ups" or "is popped-up", referred to an absolutely-positioned element (for example a Panel), means that the element is displayed ahead of the HTML elements of a Page. An example of how this tool may be implemented and utilized by the user is the following: once an element is selected, a "quick-edit" icon (like, for example, the one in the container D.18) may be, for example, displayed at the bottom-right of the Selected Area. If the user clicks the icon, a Quick Edit Panel pop-ups with a text area containing the Element Node Text of the selected element. The user may change the text from the text area and click a "Save" icon on the top-right of the Quick Edit Panel in order to apply the changes to the Element Node Text of the element. The screenshot D.27 of Figure D-4 is an example of quick-edit in Jelliphy Advanced. It is assumed that before the screenshot was taken, the user a) switched to the Handle IM, then b) selected the Page Title, and finally c) clicked the quick-edit icon. The screenshot shows how the text of the Page Title (D.29) might be changed by the user from the Quick Edit Panel (D.28). The Save button (D.30) might be clicked to apply the changes to the Page Title.

[00289] ii. An textual edit tool to edit the HTML of the elements. The Editing tool is an advanced edit area similar to the Quick Edit Panel but with additional controls and additional functionalities provided to the user. The Editing tool may support, for example, functionalities such as the HTML syntax highlight, the HTML syntax checking, the Auto-completion of HTML tags when typing the first character of a tag, the finding and the replacing of String sequences, a Panel to visually select and insert HTML symbols.

[00290] iii. A HTML Page DOM Tree Navigator. The elements, their HTML and their children elements can be displayed either in a expanded and in a collapsed form and can be edited one by one.

[00291] In an embodiment of the present invention, the set of actions available to the user can, for example, include adding to at least one Page of the Site S at least one clone of at least one element of the at least one Page or at least one second Page of the Site S. In this embodiment, one or more Edit functions may be provided to the user so as, for example, to cut, to copy, to paste and to delete one or more elements of the Page. Below are some examples of implementations of Edit functions.

[00292] i. The Cut-And-Paste function. The effects of utilizing this function are similar to the Moving tool. A Cut-And-Paste procedure is provided to the user for better control of the involved elements. The following is an example of Cut- And-Paste procedure that may be performed by the user to cut and paste an element.

[00293] a. Selecting an element in the Page (referred to as "First Element" in this embodiment).

[00294] b. Cutting the First Element (for example by clicking a "Cut" menu item of the Main Menu). The GUI may give a visual feedback of this action, for example, by overlapping First Element with a semi-transparent shaded area with a dashed border (hereinafter "Copying Area").

[00295] c. Selecting a second element in the Page (the "Second Element" in this embodiment). [00296] d. Pasting the First Element (for example by clicking a "Paste" menu item in the Main Menu). As the user pastes the First Element, the First Element is detached (as defined below) by the GUI from its position and attached (defined below) next to Second Element. Herein, an element is "detached" (from a Page) if it is removed from the Page and one or more element data are stored in the browser memory, the one or more element data being usable to restore (or "to attach") the element to the Page with its original appearance, properties (excluding the parent element and the properties related to the position of the element) and functionalities.

[00297] The result of the performing of the Cut-And-Paste procedure by the user is analogous to the one that would achieved if the First Element were moved next to the Second Element by means of the Moving tool.

[00298] ii. The Copy-And-Paste function. This function is analogous to the Cut-And- Paste, except for the difference that the First Element is copied instead of being cut (for example, the user may click a "Copy" menu item instead of the "Cut" menu item in the Main Menu, with the same visual feedback described in the step "b" of the Cut-And-Paste procedure). Accordingly, the operation performed by the GUI in the last step "d" of the Cut-And-Paste procedure may be replaced with the following: a clone (defined below) of the First Element is created by the GUI and then it is attached next to the Second Element. An element is "cloned" (or either "a clone of an element is created") if the above- mentioned one or more element data of the element are stored in the browser memory without removing the element from the Page, so that, for example, the one or more element data may be utilized to attach a copy of the element to the Page (or to "duplicate" the element). The screenshot D.31 of Figure D-4 was taken after that the user performed the following steps (when in Handle IM) in a Jelliphy Advanced implementation.

[00299] a. Selecting the Logo. [00300] b. Clicking a Copy button (D.37) in a Quickbar Panel (D.36) so as to perform the same function of the "Copy" menu item, wherein the Quickbar Panel is a Panel containing various buttons to access to the most used VSE functions. As a graphic result, the GUI replaced the Selected Area overlapping the Logo with a Copying Area (D.32).

[00301] c. Selecting the Page Title (D.33).

[00302] d. Clicking the "Paste Before" button (D.38) of the Quickbar Panel for three times. As result, the GUI added three copies of the Logo (D.35) after the Page Title.

[00303] iii. The Delete function. After selecting one or more elements, the user can

remove the one or more elements from the Page via the Delete function, for example, by pressing the "Del" key or by clicking a "Del" button in the Quickbar Panel.

[00304] If, for example, multiple elements are selected to be copied instead of the First Element in the procedure described for the Copy-And-Paste function, each of the selected elements is copied next to the Second Element. In an implementation with the Frame Navigation technique, the user may, for example, copy an element from a first Page P of the Site to a second Page Q, for example by following a procedure analogous to the one described for the Copy-And-Paste function with the adaptation below. Assuming that the two Pages P and Q are available to the user respectively in the Frame F and in the Frame F', the user selects the First Element in the Frame F and subsequently it selects the Second Element in the Frame F'.

[00305] In an embodiment of the present invention, the set of actions available to the user can, for example, include uploading at least one image to the at least one entity of the set of storing entities, and utilizing at least one uploaded image in the at least one change of the Site S. In a CVSE implementation, the user may, for example, be provided with a GUI function to upload one or more images to a directory (hereinafter "resource directory") of a recording medium of the VSE Server or to a sub-directory of said resource directory. Analogously, in a SVSE implementation, a GUI function may, for example, help the user to upload one or more images to a resource directory of a recording medium of the Site Server or to a sub-directory of the resource directory. The resource directory of a user may be utilized to preserve the above-mentioned personal and/or customized resources of the user. The followings are some examples of resources, each of which is described later herein: i) the images files of the library used for the image sources in the Properties EVI, ii) the images of the Borders/Shadow Mosaic utilized in the Background IM, iii) the data related to the gradients stored in the "Gradient Palette" of the Background IM, and iv) the images changed in the Images IM. The uploaded images may, for example, be i) image files that the user uploads from a recording medium of the client and ii) images that are memorized in the browser memory and then uploaded by the user to the Generic Server.

[00306] In an embodiment of the present invention, a Properties IM can, for example, be available to be activated by the user. A functionality of the Properties IM is to make available to the user at least one of a GUI tool and a GUI function so as to edit the attributes and the style properties of the elements. If utilized in the context of the Properties IM, the term "properties" means a subset of style properties, the subset comprising the most commonly used style properties of the elements. The operation of the Properties IM is very easy and intuitive and it is detailed in the following steps:

[00307] i. As the user switches to the Properties IM, the GUI behavior changes so that the element under the Pointer is highlighted analogously to what occurs in the Handle IM. Additionally, a Properties Panel (described in details below) with all the most relevant information on the element currently highlighted is shown.

[00308] ii. The user selects one or more elements as it does in the Handle IM.

[00309] iii. Some relevant information on the one or more selected elements, such as the values of the properties and attributes of the one or more elements, are displayed in the Properties Panel and they are available to be visually or textually modified by the user as described below.

[00310] If one element is selected, the Properties Panel may show, for example, the element's tag name, the first part Element Node Text of the element and the values of the element attributes and properties. If more elements are selected, for example, the Selected Area of the last- selected element may be marked differently from the other Selected Areas (for example, with a different color and/or texture) and the information of the Properties Panel refers only to the last-selected element. The element attributes and properties can be displayed and made available to be changed by the user with several methods. The followings are some examples of such methods:

[00311] i. All the values of the attributes and properties are textual, thus they can be

displayed as plain text: for example, the name of each property followed by its value may be shown in a list displayed in the Properties Panel. To change one value, the user may simply click a property from the list. As soon as it clicks the property, the GUI converts its textual value displayed in the list into an input text field containing the value, and then the user may enter a new property value in the field. A selection of the most common values for each property may, for example, be suggested to the user by means of an auto- completion function. The auto-completion is a function that pop-ups a suggestion menu under, above or next to an input text field (hereinafter "auto- completed field") while the user, for example, is starting to type the first letters in the field. The suggestion menu contains a list of suggested choices for the value, the choices depending on the letters that user is typing, or alternatively it may be forced to show all the possible choices (for example, with a double click by the user on the field). The user may enter the new value for the property and/or select it from the suggested choices, then it may click a proper "Save" icon at the right of the text field so as to submit the change and assign the entered value to the property of the element. [00312] ii. The VSE GUI is targeted to any type of user, and non-programmers may find difficult to use the above-described textual modification of properties, that implies the knowledge of the meaning and of the effects of the property values. For this reason, several visual objects specific for each property may be implemented in order to make the Properties Panel more user-friendly. Below are reported some examples of visual implementations of several properties.

[00313] a. The text alignment ("text-align") property. The four most common values of this property ("Left", "Right", "Center" and "Justify") can be viewed and switched by clicking one of the four radio buttons used in various popular applications. An example of visual implementation of the text alignment property is depicted in the screenshot D.41 described below.

[00314] b. The Color Style Properties (i.e., all the properties involving colors:

examples of Color Style Properties are the color of the text and of the background). Several Color Style Properties may be visually rendered and modified by means of GUI control objects for the color (hereinafter such control objects are referred to as "Color Selectors") each of which is composed of a rectangle filled with the color of the related property value, wherein the property value may be changed from a Color Picker Panel. Hereinafter, "color gradient", or simply "gradient", means a range of position-dependent colors that may be used to fill an area, and "gradient area" means an area filled with a gradient. The Color Picker Panel (an example of which is depicted in the screenshot D.58 described later herein), that pop-ups as soon as the user clicks the rectangle of a Color Selector and helps the user to select a color, may include, for example, one or more of the following tools and function:

[00315] 1. a gradient area in which the user is allowed to drag a marker in order to modify the selecting color in two dimensions (for example, a rectangle to select the red and the green components of the color in the x and y axis, respectively), [00316] 2. a slider to modify the selecting color in one dimension (for example, to select the blue component of the color),

[00317] 3. some radio buttons to switch among different dimensions of the

controls of the previous points "1" and "2" (for example, they may be used to change the dimensions of the gradient area from red and green to cyan and yellow),

[00318] 4. some input fields to enter the values of several color components (for example the red, the green and the blue components) as text,

[00319] 5. a palette with the most commonly-used colors to select (for example, the red, the yellow, the brown and the orange),

[00320] 6. the eyedropper function (defined below) by means of which the user can pick one or more colors of one or more pixels of the Page as it moves the Pointer outside the Color Picker Panel.

The images related to the element (for example, the images whose link is in the value of the "SRC" attribute of an element with an "IMG" tag or is included in the value of a "background-image" style property) may be displayed, for example, in a preview area. If no image is related to the element, the preview area may, for example, show a blank image. If the user clicks the preview area a File Loader Panel pop-ups and allows the user to manage a library of one or more image files stored in the Generic Server. The File Loader Panel may allow the user, for example, 1) to upload an image file to the library, 2) to browse the images of the library, 3) to preview the images of the library, 4) to delete an image from the library, and 5) to select an image so as to utilize it in the property and/or in the attribute. If the user, for example, selects an image for the

"background-image" style property (hereinafter "Background Image Property") in the File Loader Panel, the Background Image Property is changed so that a link to the selected image is used in the property value and, accordingly, the selected image is displayed as the background image of the element. For example, the user, once an element in the Page is selected, may 1) click the preview area of the Background Image Property in the Properties Panel, 2) upload an image from its local client, and 3) select the uploaded image so as to use it as the element's background.

The opacity of an element may be viewed and changed, for example, in the range of 0 (hereinafter an element with an opacity equal to 0 is qualified as "transparent") to 1 (hereinafter an element with such an opacity is qualified as "opaque") by means of a slider and/or from an input text field for numeric values with two buttons on the right to increase or decrease the value (hereinafter such a control object is referred to as "Spinner Text Field").

[00323] Moreover, one or more of the following variants of implementations may be, for example, adopted:

[00324] i. If multiple elements are selected, the one or more changes performed in the

Properties Panel apply to the selected elements.

[00325] ii. In order to ease the access to the properties, whose number can be up to several tens, such properties can be listed in groups (they may be grouped for example, by similarity) and/or ordered by name. The user may expand or collapse each group and move it up and down in the Properties Panel so as to improve the accessibility to the properties.

[00326] iii. One or more properties may be managed both as text and as visual objects and the GUI may, for example, provide the user a control object so as to switch from a text to a visual management and vice-versa. [00327] It is noticed that herein terms such as "top", "bottom", "right", "left", "below" and "under", if referred to one or more items in a screenshot of the Sample Page, are relative to the correct orientation of the Sample Page (with the Header at the top) rather than to the orientation of the screenshot in the related Figure. The Figure D-5 shows an example of property modification via the Properties IM with Jelliphy Advanced. The screenshot D.41 was taken after the user performed the following steps:

[00328] i. Switching to the Properties IM by clicking the button D.39. As a result, the

Properties Panel (D.42) was displayed by the GUI. The Properties Panel was implemented in this example with the following sub-panels (from top to bottom):

A sub-panel (D.43) with the tag name of the selected element (at the right of the caption "Current element") and a "delete" icon at its right that may be utilized so as to remove the selected element from the Page.

A sub-panel (D.44) with the first part of the Element Node Text of the selected element (below the caption "Content") and an "edit" icon at its right to quick-edit the Element Node Text.

A sub-panel to allow the user to change the properties and attributes of the selected one or more elements. Properties were grouped in groups and, for example, in the screenshot the following groups are fully visible: Text (D.45), Background (D.47) and Box Model (D.49). Each group might be expanded or collapsed by the user and/or drag-and-dropped so as to change its position with respects to the other groups. Some groups might also be shown in an Advanced Mode, that is, an implementation of the above-described method for textual visualization and modification. The user might switch to the Advanced Mode by clicking the "Advanced" button at the top right of several groups. [00332] ii. Selecting the Page Title. As result, the GUI covered the Page Title with a Selected Area (D.48) and displayed the information of the Page Title in the Properties Panel.

[00333] iii. Performing the following changes to the properties of the selected element from the Properties Panel:

Changing the font family to "Georgia" by the drop-down selector at the top left of Text group.

Clicking the "B" and "I" buttons of the Text group so as to set the text weight to "Bold" and the text style to "Italic".

[00336] c. Assigning a green color to the Color Selector of the text color (D.46) by means of the Color Picker Panel.

Assigning a pink color to the Color Selector of the "background-color" property in the Background group (positioned at the right of the "Color:' caption) by means of the Color Picker Panel.

Assigning "7" to the border width, by properly clicking the arrows of one of the Spinner Text Fields in the "border" area of the Box Model group.

Selecting the "dashed" border style in the border-style selector (D.40).

Changing the border color to green from the border Color Selector positioned at the right of the border-style selector.

[00341] The screenshot was taken while the user was hovering over the border-style selector with the Pointer, and consequentially the GUI was showing a sub-panel with a list of border styles among which the user might select a border style to be assigned to the selected element with a click. [00342] In an embodiment of the present invention, the method used by the GUI to retrieve the information of the Page elements and to update the Properties Panel with such information while the user is highlighting the Page elements may be enhanced in terms of shorter response time in order to, for example, avoid that the smoothness of the transitions results are compromised while the user quickly highlights many elements with the Pointer. One or more of the following enhancements may, for example, be adopted.

[00343] i. A policy of restrictions of the set of properties to update in the Properties Panel may be followed. Part of the computation time of the browser may be saved, for example, by updating only the properties in textual form (with no update of visual objects) and/or by updating only the properties that are shown in expanded groups (with no update for the collapsed groups).

[00344] ii. The Properties Panel may be updated only at regular intervals. For example, if the user happens to perform 10 transitions (i.e., it changes the highlighted element 10 times) in 1 second and the update interval is set to 0.5 seconds, the Properties Panel is updated only twice with this technique instead of the 10 times it would be updated without.

[00345] iii. The batch method described in this point provides that the properties of the visible elements in the Page are stored in the browser memory as soon as the user switches to the Properties IM. With this method it may, for example, be assumed that the visible elements (hereinafter an element is qualified as "visible" if it is displayed in the Page with a width and a height greater than 0, including its borders) are the only elements that the user is allowed to highlight. Thus, each time that a visible element is highlighted, the related stored property values only have to be retrieved from the browser memory and utilized by the GUI to fill the values of the properties displayed in the

Properties Panel so as to save browser computation time during the updating of the Properties Panel. [00346] iv. The property values may be stored in the browser memory each time that an element is highlighted and may subsequently be retrieved when the element is highlighted again (hereinafter these operations are referred to as, respectively, "to store in cache", whose alias is "to cache", and "to retrieve from cache") during a Working Session. This method, alternative to the batch method, has the advantage of not needing to store property values of the visible elements each time the user switches to the Properties IM so as to save the computation time of this operation. The main disadvantage of this caching method with respect to the batch method is that it has no time saving effect the first time that the user highlights an element since the switching to the Properties IM.

[00347] In an embodiment of the present invention, the functionality of defining custom styles is provided to the user so as to easily apply a set of property definitions to multiple elements. This functionality is explained through the following example of procedure of creation and modification of a custom style.

[00348] i. The user clicks a "Styles" menu item in the Main Menu and then a Panel for the management of styles (hereinafter "Style Panel") pop-ups.

[00349] ii. The user clicks a "New Style" button in the Style Panel and then it enters the name of a new custom style that it intends to create or, alternatively, the user may select the name of a custom style (defined below) to change from a list of names of the available custom styles (displayed in the Style Panel) and then it may click an appropriate "Edit Style" button. A custom style comprises a name to uniquely identify the style and a list of one or more properties (i.e., a subset of the properties displayed in Properties Panel), each of which with a related value. The list of the available custom styles is retrieved from the Generic Server (a collection of commonly-used custom styles may also be provided in VSE by default). Once a custom style is selected, its properties are displayed in the Properties Panel analogously to as it occurs if an element is selected. The main difference between the displaying of the properties of a custom style and the displaying of the properties of a selected element is that, in a custom style, each property may have an assigned value or not. For example, as soon as a new style is created, all the properties displayed in the Properties Panel are initially not assigned. The "assigned" status may be visualized to the user, for example, with an additional control object (for example a checkbox) that is placed next to each property of the Properties Panel at the click of the "New Style" button and of the "Edit Style" button. Therefore, said control object (hereinafter "not-empty switch") indicates whether the property value is assigned or not and may also be utilized by the user so as to change the "assigned" status as described below.

[00350] iii. The user edits the custom style by performing one or more of the following actions: a) selecting which properties to include in the custom style by means of the not-empty switch, b) changing the property values as described above, and/or c) selecting an element whose style it intends to utilize as a starting point to build the custom style. Once the element is selected, the property values of the element are displayed in Properties Panel as described above and they are available to be edited by the user.

[00351] iv. Once the desired result in customizing the style is achieved, the user may save the changes to the Generic Server with a "Save Style" button of the Style Panel.

[00352] The user may, for example, utilize the custom styles in the Current Working Session or in a Subsequent Working Sessions by selecting one or more elements to apply the custom style to and then clicking the custom style from the Style Panel.

[00353] In an embodiment of the present invention, the set of available Selecting Actions includes selecting at least one element by enclosing the at least one element in a rectangular selection box (hereinafter "Selection Box") via a selection box technique utilizing at least one of a first and a second technique to retrieve at least one element reference. The first technique is utilized to retrieve at least one element reference to an included element, when given a rectangular box in the Page, wherein each of the at least one included element is fully included in the rectangular box. The second technique is utilized to retrieve the at least one element reference to an intersected element, when given the rectangular box of the Page, wherein each of the at least one intersected element has a not-null intersection with the area of the rectangular box (hereinafter "box area"). It is assumed in the following example of implementation of a selection box technique that a Selection Box EVI, that allows the user to select one or more elements by drawing a box around them, is active. As the user switches to this IM, the GUI may, for example, build a Page Image of the Page and place a Cover Layer ahead of the Page as described later herein. The user may, for example, follow the steps listed below.

[00354] i. Drawing a box on the Page (i.e., on the Cover Layer ahead of the Page).

Several graphic methods may be implemented to allow the user to draw a box (or "drag a box"). For example, in a Mouse Supporting Medium, the user may a) place the first corner of the box in a certain position by pressing the left button of the mouse when the Pointer is in the position and then b) drag the opposite corner without releasing the button so as to draw a box. In a Touch Screen Supporting Medium, the user may, for example, position the first corner and the opposite corner of the box a) by touching the two points of the touch screen corresponding to said two corners with two fingers and/or b) by swiping two fingers on the touch screen until they reach the two points of the touch screen. While the user is drawing the box, the GUI highlights the Page elements currently enclosed (with the meaning explained below) in the box.

[00355] ii. Once the user has all the desired elements highlighted, it may, for example, release the mouse button in a Mouse Supporting Medium or remove the fingers from the touch screen in a Touch Screen Supporting Medium, so that all the highlighted elements are converted by the GUI into selected elements.

[00356] Depending i) on the one or more methods supported in the VSE implementation and/or ii) on the configured behavior of the GUI while the user is drawing the box, an element may be defined as "enclosed" in a box, for example, if one of the following box enclosing conditions is met: [00357] i. four corners of the element are inside the box, [00358] ii. at least one corner of the element is inside the box, or

[00359] iii. the intersection between the box area and the area occupied by the element in the Page (hereinafter "element area" or "area of the element") is not null.

[00360] It is noticed that, for example, an implementation of the box enclosing condition at the point "i" may utilize the first technique to retrieve the at least one element reference, whereas the second technique to retrieve may be utilized in an implementation of the box enclosing condition at the point "iii" (the above-mentioned techniques are described in details later herein). An additional functionality may provide, for example, that the user, once some elements E are selected, can add one or more elements E' to the selected elements E by drawing a box around the one or more elements E', for example, while keeping a key (for example "Ctrl") pressed or after changed properly the GUI configuration. Also, if the user, for example, draws a box around some selected elements while keeping a key pressed or after the GUI configuration is properly changed, the elements are deselected. After the user selects the desired one or more elements, it can, for example, do one of the followings actions: i) using an Edit function analogous to the ones described in the Handle IM so as to duplicate the selected elements, ii) deleting the elements as described in Handle IM, or iii) switching to the Handle IM or the Properties EVI. If the user switches to the Handle IM or the Properties IM, the selection of elements is preserved by the GUI after the switching and the user can perform any action on the selected elements in the just- selected IM.

[00361] An example of selection of elements with the Selection Box in Jelliphy Advanced is shown in Figure D-6. It is assumed in this example, solely for purposes of exposition rather than limitation, that a Mouse Supporting Medium is utilized by the user and that the box enclosing condition of not-null intersection between the box area and the element area is utilized. The screenshot D.50 was taken after i) the user switched to the Selection Box EVI with the radio button D.51, ii) then it pressed the left button of the mouse at the point D.54 of the Page, and iii) finally it moved the Pointer (whose type was changed by the GUI into the "crosshair" when the user switched to the Selection Box IM) to the point D.52 keeping the button pressed. The screenshot was taken while the user was moving the Pointer and, accordingly, the GUI was drawing a Selection Box having the points D.54 and D.52 as opposite corners and was covering each element, whose area intersected the box area, with a Highlighted Area (for example, the element D.53). If the user released the mouse button at the instant of the screenshot, all the highlighted elements in D.50 would be converted into selected elements by the GUI.

[00362] In an embodiment of the present invention, the user is provided with an additional functionality to select one or more elements with a box (hereinafter "Box Selection") that may, for example, be included in the Handle IM and in the Properties IM as described in the following example. Assuming, for example, that the Handle IM or the Properties IM are active, while the user keeps a Box Selection Key (for example "Alt") pressed or after changed properly the GUI configuration, the element highlighting of the active IM is disabled and a procedure analogous to the one followed when the user switches to the Selection Box IM is applied. Finally, once that the user selects one or more elements with a Selection Box, it can release the Box Selection Key or change properly the GUI configuration so as to restore the default functions of the active IM while preserving the selected one or more elements. The selected one or more elements are so available to be utilized by the user in the active IM.

[00363] In an embodiment of the present invention, the set of available Selecting Actions includes selecting a set of elements E' by using a set of selected elements E as a starting basis for the selecting of the set of elements E' by means of one or more GUI functions (hereinafter "Select Functions"). The Select Functions may be provided to the user in order to utilize one or more previously-selected elements (included in the set E) as a starting point to select one or more newly-selected elements (included in the set E'). For example, the user may utilize one or more Select Functions so as to select, for each element in the set E, i) the next element, ii) the previous element, iii) the sibling elements, iv) the children elements, v) the parent element, and vi) the similar elements (defined above).

[00364] In an embodiment of the present invention, the set of available Selecting Actions includes selecting at least one element via at least one searching action of a set of searching actions. The set of searching actions includes entering at least one search String value in at least one input field of at least one searching GUI tool. An example of a searching GUI tool is a Search Panel that may provide the user with several search fields and options to perform a search of the elements in the Page. Once a search is successfully performed (i.e., at least one element is retrieved), the GUI selects the one or more elements matching the search conditions and the selected elements are available to the user, for example, to be modified with one of the above-described GUI tools. The user may, for example, enter the search String in a text input field of the Search Panel and then click a "Search" button of the same Panel so as to start the search. The following types of search may, for example, be performed (the user may select a type of search among different type of searches, for example, from a drop-down menu of the Search Panel):

[00365] i. Searching at least one element whose Element Node Text contains the search

String. This type of search may, for example, have the following boolean options (wherein the options may be enabled and disabled by the user with a checkbox): "case sensitive" (self-explanatory), "whole word" and "regular expression". The "whole word" option, if checked, changes the search criterion so that only the one or more elements with an Element Node Text containing the search String as a word separated from the rest of the Element Node Text are retrieved in the search. If the "regular expression" option is checked, the search String is interpreted as a regular expression and the regular expression rules of the BSL are applied to check whether the Element Node Text of the one or more elements matches with the regular expression or not.

[00366] ii. Searching at least one element by the "ID" attribute, by the tag name and/or by the "CLASS" attribute. The user may, for example, enter one or more search values for each of the above-mentioned search attributes in one or more text input fields.

[00367] iii. Searching at least one element using a supported Element Selector syntax. For example, in a Jelliphy Advanced implementation, the search String may be utilized in the searching as an Element Selector of the j Query Element Selector Syntax.

[00368] In an embodiment of the present invention, the at least one of a GUI tool and a GUI function can, for example, include at least one Eyedropper GUI tool which allows the user to view at least one web color of each at least one pixel of at least one Page of the Site S, via an Eyedropper technique. The Eyedropper technique utilizes a third technique to retrieve, when given an Input Point of a Page, at least one element reference to an element visible in the Input Point. Each of the at least one element visible in the Input Point has a not-null component in composing a web color of a pixel of the Input Point. An Eyedropper is a tool that the user can utilize on the HTML Page to view the color of the pixel underlying the Pointer. The color may be displayed in the Eyedropper tool, for example, in a magnified view (for example, by a rectangle filled with the color) and/or in a textual form (for example, displaying the HTML code if the color). Also, the user can, for example, store one or more colors of pixels in the Color Selectors of the Main Panel in order to utilize said colors in subsequent actions. For example, once hovered with the Pointer over a pixel having the desired color, the user may perform one of the following actions: i) in a Mouse Supporting Medium, the pixel color may be stored in the foreground Color Selector of the Main Panel with a left-click on the pixel by the user and/or it may be stored in a background Color Selector with a right-click, or ii) in a Touch Screen Supporting Medium, the user may store the pixel color in the foreground Color Selector by quickly removing the finger from the touch screen and tapping the touch screen (analogously to how it selects an element on a touch screen in the Handle IM). The selected colors may also be recorded, for example, in a history sub-panel (hereinafter "Color History", accessible, for example, from the Main Panel) in which the colors that are selected in the Current Working Session are stored and displayed in one or more history Color Selectors so as to be subsequently recalled and utilized again by the user. For example, a history Color Selector can be clicked to be loaded in the foreground Color Selector and right-clicked to be loaded in the background Color Selector. The usefulness of the Foreground and Background Colors is noticeable, for example, in the Paint IM, in the Image IM and in the Drawing / Notes IM, described later herein. The Eyedropper tool, as well as being available to the user when the Eyedropper IM is active, may be also utilized when the user is selecting a color with the Color Picker Panel and it moves the Pointer outside the Color Picker Panel and on the Page, as explained above. The screenshot D.58 in Figure D-7 shows an example of usage of the Eyedropper tool from the Color Picker Panel (D.57) in Jelliphy Advanced. In the example depicted in the screenshot, as soon as the user hovered over the Page with the Pointer while the Color Picker Panel was open, the default Pointer was converted by the GUI into an "Eyedropper" Pointer (D.55) and the Eyedropper Panel (D.56) was displayed next to the Pointer with a magnified view of the color underlying the Pointer and the HTML code of said color. The screenshot was taken after the user opened the Color Picker Panel by clicking the foreground Color Selector from the Main Panel, and while the user was hovering with the Pointer over a point of the Logo.

[00369] The key point of the Eyedropper tool operation is in implementing an Eyedropper technique so as to retrieve the color of the pixel underlying the Pointer with a response time short enough to keep the transitions smooth and fluid while the user moves the Pointer over the Page. Herein, several methods to implement an Eyedropper technique in BSL (hereinafter "Eyedropper Script Methods") are disclosed. The prior art implementing an Eyedropper tool and an Eyedropper technique for Web Pages utilize, for example, one or more ad-hoc extensions to be installed into browsers for which the extensions are built. An example is provided by the "Eye Dropper for Chrome" extension that implements the following method: i) a screenshot of the entire Page is taken using one or more extension functions, and ii) the value of the color of pixel underlying the Pointer is retrieved from the image of above- mentioned screenshot using one or more Javascript functions (described later herein).

Compared to the prior art, the Eyedropper Script Methods have the following advantages:

[00370] i. They are compliant with all the most popular browsers with no installation of other components needed in the browsers.

[00371] ii. They are integrated in the SVE GUI: once picked with the Eyedropper, colors are available for further uses in the GUI.

[00372] iii. They are web specific: in several prior art cases, the colors picked do not give results commonly desired for a Web Page. For example, if the user wants to pick the color of some text of the Page, it often retrieves an unexpected (and undesired) color with the "Eye Dropper for Chrome" extension because the characters are rendered by the browser with an anti-aliasing function that alters the original text color in the pixels next to the border of the characters composing the text. These altered colors (that may also differ considerably from the original text color) are "photographed" in the screenshot of the entire Page and then retrieved by the extension instead of the original text color, that is most likely the color expected by the user. On the other hand, using the Eyedropper Script Methods, the original text color is retrieved each time the Pointer is moved in proximity to an element containing a text.

[00373] iv. They are less memory-consuming: the amount of the browser memory

consumed by the Eye Dropper extension grows much more rapidly than Eyedropper Script Methods as the size of the Page increases. This is due to the larger average size of a screenshot image compared for example to the size of the DOM vector used as Page Image (as described later herein) for the same Page. Therefore, the deterioration of performances of the Eyedropper on larger HTML Pages is more probable using the Eye Dropper extension than using the Eyedropper Script Methods.

[00374] In an embodiment of the present invention, the color of at least one Color Selector C of the GUI is available to be drag-and-dropped by the user to any other Color Selector C of the GUI in order to replace the color selected in C with the color selected in C. This color drag-and-dropping function helps the user to swiftly utilize a color in a context different from the starting one. As a practical example of usage of this function, the user may perform the following actions: i) switching to the Eyedropper IM, ii) using the Eyedropper tool to store a color from the Page to the foreground Color Selector, iii) switching to the Properties IM, iv) selecting an element, and v) drag-and-dropping the color from the foreground Color Selector to the "background-color" property selector of the Properties Panel so as to color the background of selected element with the Foreground Color.

[00375] In an embodiment of the present invention, a Paint EVI is available to be switched to by the user. When this IM is active, at least one color of at least one element can be easily changed by clicking the at least one element. The functionality of this IM is better described with the following working example:

[00376] i. As the user switches to the Paint IM, an element highlighting functionality analogous to the one described for the Handle IM and for the Properties IM is activated.

[00377] ii. If the user clicks a highlighted element, the following two operations may be, for example, performed by the GUI so as to "paint" the highlighted element: a) the text color of the element and of its descendants is changed to the

Foreground Color, and b) the background color of the element is changed to the Background Color selected by the user.

[00378] The Paint EVI may be implemented, for example, with one or more of the following enhancements:

[00379] i. The user can change the GUI configuration so as to enable or disable the

painting of text color or of the background color.

[00380] ii. The user may assign other visual properties (selected from Properties Panel that is popped-up in this alternative implementation) in addition to the above- mentioned colors to be applied to the highlighted elements with a click. For example, values of Background Image Property and/or opacity may be assigned to the related style properties. In an embodiment supporting the custom styles, the user is allowed, for example, to select one or more custom styles from the Style Panel (that pop-ups as soon as the user switches to Paint IM in this embodiment) so as to apply the selected one or more custom styles to the one or more elements that it clicks in this EVI.

[00381] iii. While the user, for example, keeps a certain key (for example "Alt") pressed or after that it properly changes the GUI configuration, the element highlighting is disabled and the elements are available to be painted by drawing a box around them, similarly as it occurs in the Selection Box IM for selecting the elements.

[00382] The Screenshot D.63 of Figure D-7 shows an example of functionality of the Paint IM in Jelliphy Advanced: after that the user switched to the Paint EVI it could hover over any visible element of the Page (for example D.59) with the Pointer (that was converted into a "Paint" Pointer D.61) in order to paint one or more elements with the colors of the foreground and background Color Selectors (D.60) by clicking each element to be painted. In the screenshot, several elements were painted with a combination of red (the selected Foreground Color) and yellow (the selected Background Color), among which is the element D.62.

[00383] Many key functionalities of VSE GUI involve visual interactions between the user and the elements in the Page. Some practical examples of these interactions are the highlighting of the elements in the Handle, the Properties, the Selection Box and the Paint IMs, and the display of the color of the pixel under the Pointer in the Eyedropper IM. The starting step of each of these interactions is at least one action performed by the user on the Page in order to have a visual feedback by the GUI that depends on the at least one action and on the elements in the Page involved in the interaction. In the above-mentioned examples said at least one action may be performed, for example, via a mouse or via a touch screen, and the feedback depends on the exact position of the Pointer and on the one or more elements underlying the Pointer itself. In order to manage the above-mentioned interactions one or more of the following functions may be, for example, utilized by the GUI.

[00384] i. Retrieving the one or more elements under the Pointer (i.e., the one or more elements whose area includes the point pointed/indicated by the Pointer). This function may, for example, be utilized in an implementation of the Eyedropper technique as described later herein.

[00385] ii. Retrieving the element ahead of all the others (hereinafter "top-most element") under the Pointer. This function may, for example, be utilized so as to highlight the element visible under the Pointer in the Handle IM, the Properties IM, the Paint IM and generally in the IMs in which the element highlighting is utilized (hereinafter "Selection IMs").

[00386] iii. Retrieving the one or more elements whose area has a not-null intersection with the area of the Selection Box. This function may, for example, be utilized in an implementation of the selection box technique so as to retrieve the elements to highlight while the elements are enclosed in a Selection Box (with the box enclosing condition of not-null intersection between the box area and the area of the element).

[00387] The above functions may, for example, be implemented via at least one of the following Selecting Methods:

[00388] i. Using a BSL function. This method may, for example, be utilized by the GUI to highlight the elements in the Selection IMs. It exploits a function

(hereinafter "PointToElement" function), natively supported in some BSL and in some browsers that returns the top-most element among the one or more elements whose areas contain a certain point having the given "absolute coordinates" (i.e., the coordinates of the point relative to the top-left vertex of the Page), wherein said coordinates are passed to the function as parameters. For example, the Javascript language supports the

"document.elementFromPoint" method function as PointToElement function in the most popular browser types. Accordingly, a Selecting Method for highlighting elements may, for example, comprise the following steps:

[00389] a. As soon as the user switches to an IM in which this Selecting Method is implemented, a transparent element occupying the entire Viewport (herein referred to as "Cover Layer") is placed ahead of the one or more elements of the Page by the GUI. The Cover Layer is utilized 1) to temporary deactivate the functionalities of the Page elements so as to avoid, for example, that they interfere with the element highlighting, and 2) to bind a highlight function to one or more event types of the Cover Layer, wherein the highlight function is triggered by the passage of the Pointer (the

concepts of binding and triggering are described in details later herein).

Each time that the Pointer hovers over the Cover Layer, the highlight function is executed. The operations performed by the highlight function include the following:

[00391] 1. The "display" style property of the Cover Layer is set to "none" so that said Cover Layer is ignored in the rendering of the Page by the browser (hereinafter an element with such a "display" style property value is qualified as "hidden"). This step is performed in order to avoid that the PointToElement function returns the Cover Layer itself as the returning element instead of the element underlying the Pointer.

[00392] 2. The PointToElement function is called with the absolute coordinates of the Pointer position as parameters.

[00393] The element retrieved by PointToElement is highlighted. [00394] The "display" property of the Cover Layer is set to "block" so as to restore the state before the current execution of the highlight function.

[00395] ii. By means of an Event-driven method (a detailed description on how the events are managed by the browsers is reported later herein). This Selecting Method may, for example, be utilized so as to highlight the elements in Selection IMs as an alternative to the Selecting Method using a PointToElement function. The Event-driven method comprises binding several functions written in BSL (hereinafter "selecting handler functions") to certain event types of each Page element. The main purpose of each of the selecting handler functions is to highlight and/or to unhighlight the element (hereinafter "to unhighlight" means to remove the Highlighted Area of the element) in which an event of a certain type, that the function is bound to, occurs (or "is triggered"). This Event- driven method can be implemented, for example, with the following technique: as the user switches to an IM in which this Selecting Method is implemented, the above-mentioned binding of several selecting handler functions is performed for each visible element, so that the GUI subsequently performs the following operations.

[00396] a. When the Pointer enters the area of an element, such an element is

highlighted by means of the Highlighted Area.

[00397] b. When the Pointer leaves the area of an element, such element is

unhighlighted.

[00398] c. When the Pointer moves inside the area of a highlighted element, a fine detection method may, for example, be used for a fine detection of the one or more elements that may be, for example, partially overlapped to the highlighted element. Accordingly, the Highlighted Area may be, for example, temporarily removed from the highlighted element and the PointToElement function may be utilized with a procedure analogous to the one followed in the above-described highlight function.

[00399] iii. By means of the Page Image method, described below.

[00400] The present invention also provides a Page Image method to build a page image data structure (hereinafter "Page Image") for each Page of at least one Page of a Site S, wherein the page image data structure is readable and writable from at least one portion of BSC. The Page Image method includes retrieving at least one element reference to at least one element of the at least one Page by traversing a DOM tree of the Page (hereinafter "Page DOM Tree"), and adding to the Page Image at least one object element. Each of the at least one object element includes at least one element data related to one element of the Page. The Page Image method may, for example, be utilized to highlight one or more elements in the Selection EVIs as an alternative to the above-described methods. Additionally, it may be used, for example, in an implementation of the selection box technique and of the Eyedropper technique. With the implementation of Page Image method described below, the GUI builds the Page Image of the Page in the browser memory, the Page Image representing the Page elements as they are effectively rendered in the Page. In said Page Image implementation, each node of the Page DOM Tree related to a visible element is represented by a BSL object that may be utilized by the GUI for a quick access to various features and properties of the visible element. In order to build the Page Image, the nodes of the Page DOM Tree may be visited, for example, in the "preorder" traversal sequence, so that the information about each ancestor element is available when each descendant element of the ancestor is visited and part of said information may be stored in the BSL object representing the descendant element. The following is an example of Javascript code utilized in an implementation of the Page Image method in Jelliphy Advanced so as to build, from the Page DOM Tree, a Javascript vector of Javascript objects (herein "DOM vector"), wherein said vector of objects is an implementation of Page Image.

[00401] MGP.Area = new function () {

[00402] var that = this,

[00403] DOMVector,

[00404] excludedSelectableTags = ['script', 'link', ' br ' ] ,

[00405] excludedVisibility = ['hidden', 'collapse'],

[00406] propertiesNeeded = ['visibility', 'z-index', ' overflow-x ' , 'overflow- y', 'position', 'display', 'clip'],

[00407] ...

[00408] that . updateElemsAreaCoor = function () {

[00409] var parents, cp, zlnd, ov, startEl, i, s, $el,

[00410] setClipping = function (ov, o, clip) {

[00411]

[00412] } ,

[00413] recurse = function (el, parents, zlndex, overBound, closedPP) {

[00414] var o = { } ,

[00415] ovb = jQuery . extend ({} , overBound),

[00416] box = el . getBoundingClientRect ( ) ,

[00417] p = {},

[00418] props, nextld, i, s, $cur, noChildren; [00419] $el = jQuery(el);

[00420] props = $el . getMultiCss (propertiesNeeded) ;

[00421] if (props . display == 'none' | | (noChildren = ! el . children . length) box. top == box. bottom && box. left == box. right | |

jQuery . inArray (props . visibility, excludedVisibility ) != -1) return true;

[00422] o = that . getAbsoluteCoor ( box) ;

[00423] if (props [' clip ' ] && props [' clip ' ] != 'auto') {

[00424] setClipping (ovb, o, props [' clip ']) ;

[00425] }

[00426] if (ovb. left) {

[00427] if (o.left < ovb. left) o.left = ovb. left;

[00428] if (o. right > ovb. right) o. right = ovb. right;

[00429] if (o.left >= o. right && noChildren) {

[00430] return true;

[00431]

[00432]

[00433] if (ovb. top) {

[00434] if (o.top < ovb. top) o . top = ovb. top;

[00435] if (o. bottom > ovb. bottom) o. bottom = ovb. bottom;

[00436] if (o.top >= o. bottom && noChildren) {

[00437] return true;

[00438]

[00439]

[00440] if (props [' overflow-x ' ] != 'visible') {

[00441] ovb. left = o.left;

[00442] ovb. right = o. right ;

[00443] }

[00444] if (props [' overflow-y ' ] != 'visible') {

[00445] ovb. top = o.top;

[00446] ovb. bottom = o. bottom;

[00447] }

[00448] nextld = DOMVector . length;

[00449] if ( ! isNaN (props [' z-index ']) ) zlndex = parselnt (props [' z-index '

[00450] DOMVector .push ( {

[00451] o : o [00452] id: nextld,

[00453] el: $el,

[00454] par : parents ,

[00455] pos : props [ 'position '] ,

[00456] ov: (ovb.top 1 | ovb.left) ? ovb : null,

[00457] cp: closedPP,

[00458] z: zlndex

[00459] }) ;

[00460] if (props [ ¹ position ' ] != 'static') (

[00461] closedPP = nextld;

[00462] }

[00463] if (el . childNodes . length) {

[00464] for (i = 0; s = el . childllodes [ i ] ; i++)

[00465] if (s.nodeType ! == 3 && s.nodeType !=

jQuery . inArray ( s . nodeName .toLowerCase () , excludedSe lectableTags ) == -1) {

[00466] p [nextld] = DOMVector . length;

[00467] recurse(s, jQuery . extend ({} , p, parents), zlndex, ovb, closedPP) ;

[00468] }

[00469] }

[00470] }

[00471] } ;

[00472] DOMVector = [ { } ] ;

[00473] startEl = document . body ;

[00474] zlnd = 0;

[00475] cp = 0;

[00476] ov = { } ;

[00477] for (i = 0 ; s = startEl . childllodes [ i ] ; i++ ) {

[00478] if (s.nodeType !== 3 && s.nodeType ! == 8 && ! ( s . className &&

s . className . indexOf ( ' mg- ' ) != -1)) {

[00479] parents = {body : DOMVector . length } ;

[00480] recurse (s, parents, zlnd, ov, cp) ;

[00481] }

[00482] }

[00483] } ; [00484] In the code above, the method function "updateElemsAreaCoor" of the "MGP.Area" object may be called in order to populate the DOM vector (the "DOMVector" array in the code above) with the references to the visible elements of the Page. The

"recurse" is a function, internal to "updateElemsAreaCoor", that is recursively executed over the elements of the Page DOM Tree that are candidates to be displayed in the Page. For example, the function is not executed over the DOM elements with a "text" node type (corresponding to the code "3") and over the elements of the GUI (whose "CLASS" attribute contains the String " mg-") and their descendants. In each execution of the function, one Page element is processed (hereinafter "processed element") through a reference to the Page element (memorized in the "el" parameter passed to the function) and a reference to a jQuery object of the Page element (memorized in the "$el" variable). Some of the most relevant steps implemented in the "recurse" function are described below.

[00485] i. The "getBoundingClientRect" is a method function natively supported by

Javascript in the most popular browsers. The method function is utilized to retrieve a Javascript object with the y-coordinates of the top and bottom edges of the processed element and the x-coordinates of the left and right edges of the element (hereinafter "Edge Coordinates"). The coordinates, relative to the top- left vertex of the Viewport, are stored in the local object "box".

[00486] ii. The "getMultiCss" is a jQuery plugin API (whose code is not reported for brevity) that is utilized to retrieve multiple style properties (whose names are passed in an array as a plugin parameter, that is "propertiesNeeded" in the example) of the processed element in only one call. The plugin, included in Jelliphy Advanced, is an enhancement (in terms of saved computation time of the browser) of the ".css()" jQuery API that retrieves the element style properties one by one.

[00487] iii. If at least one of the following conditions is verified for the processed element, the processed element is excluded from the DOMVector and the current execution of the "recurse" function stops: a) the element is not visible, b) the tag name of the element matches with a value in the "excludedSelectableTags" array, and/or c) the "visibility" style property of the element matches with a value in the "excluded Visibility" array.

[00488] iv. The "getAbsoluteCoor" method function (whose code is not reported) is called to convert the coordinates of the "box" object into absolute and to store them in the local object "o".

[00489] v. The "setClippling" function (whose code is not reported) and a following

portion of code (from the point in which the function is called to the assignment of the "nextld" variable) are utilized so as to calculate the element visual constraints (stored in the "ovb" local object and described below) of the processed element from a set of input data comprising, for example, a) the "clip" and the "overflow" style properties of the processed element, and b) the element visual constraints of the parent element of the processed element (the constraints of the parent element being memorized in the "overBound" parameter of "recurse"). The element visual constraints take into account the reduction of the visible portion of the elements in the Page due, for example, to the presence of a parent element with a size smaller than the children element. The "ovb" object is also utilized so as to calculate the reduced visible portion of the processed element stored in the "o" object. If, as a result of the calculated reduction of the visible portion of the processed element, the processed element is fully covered in the Page, said processed element is excluded from the DOMVector and the current execution of the "recurse" function stops.

[00490] vi. A set of properties related to the processed element is stored in a DOMVector object of the DOMVector array. The description of each property of the DOMVector object is reported in Table 3. Table 3

[00491] It is noticed that herein the shape of the area of the non-rectangular HTML elements may be approximated to rectangular, for example, by using the

getBoundingClientRect function or by means of one or more additional BSC, so that the scope of the invention is not limited to this respect. The Page Image is available to be used in a set of available techniques, the set of available techniques includes at least one retrieving technique of a set of retrieving techniques. The set of retrieving techniques consists of a first, second and third technique to retrieve at least one element reference to at least one element of the at least one Page. The first technique is utilized to retrieve the at least one element reference to an included element, when given a rectangular box in the Page, wherein each of the at least one included element is fully included in the rectangular box. The second technique is utilized to retrieve the at least one element reference to an intersected element, when given the rectangular box of the Page, wherein each of the at least one intersected element has a not-null intersection with the area of the rectangular box. Hereafter, an example of implementation of a method to highlight one or more elements enclosed in a box utilized in the selection box technique is described. In the example, implemented in Jelliphy Advanced, the second technique to retrieve at least one element reference is shown in detail. In the implementation of the second technique, the "updateElemsAreaCoor" method function may, for example, be called by the GUI as the user switches to the Selection Box IM. Then, a "run" function, defined below, may be called as soon as the user starts to draw the box and each time that the box dimensions change. The objective of the "run" function is to highlight the one or more intersected elements whose area intersects the box area, if at least one of said one or more elements exists, by populating an "elFound" array with the Indexes of the DOMVector objects related to the one or more elements. The following portion of code is focused on the function "creamOff ' that is called from the function "run" so as to decide whether the area of an element intersects the box area or not.

[00492] highlightArea = new function () {

[00493] var elFound,

[00494] creamOff = function (o, s, i) {

[00495] if (s.o. bottom >= o.top && o. bottom >= s . o . top && s.o. right >= o.left && o. right >= s.o. left) {

[00496] elFound .push ( i) ;

[00497] }

[00498] } ,

[00499]

[00500] run = function () {

[00501] var $selHelp = jQuery ( ' . ui-selectable-helper ' ) ,

[00502] o = {},

[00503] box, i, s;

[00504] if ( ! $selHelp . length) return;

[00505] elFound = [ 1 ;

[00506] box = $selHelp . get ( 0 ) . getBoundingClientRect ( ) ;

[00507] o = that . getAbsoluteCoor ( box) ;

[00508] for (i = 1; s = DOMVector [ i ] ; i++) {

[00509] creamOff (o, s, i);

[00510] }

[00511]

[00512]

[00513] ...

[00514] [00515] The followings are relevant notes on the code above:

[00516] i. The "ui- selectable-helper" is a class uniquely-matching the HTML element used by the GUI to render the box while the user is drawing it. A j Query reference to the element of the box, stored in the "$selHelp" variable, is utilized to calculate the absolute Edge Coordinates of the box and store them in the "o" local variable by means of the "getBoundingClientRect" and the "getAbsoluteCoor" method functions analogously as in the "recurse" function.

[00517] ii. The "creamOff ' is a function utilized to decide whether the areas of two

elements, whose Edge Coordinates are passed as parameters in the objects "s" and "o", have a not-null intersection. The main condition in the "if statement of the function checks the following intersection condition in both the x and y dimensions of the Edge Coordinates of the two elements: two continuous intervals [S _le n, S _r i _gh t] ^an d [Oi _eft , O _r i _ght ] of a numeric axis have a not-null intersection if S _r i ht >= 0 _le ft and O _r i _g ht >= S _le ft, wherein ">=" means "greater than or equal to". If the condition is verified in both the dimensions, the Index of the DOMVector element currently scanned (with the meaning explained below) in the "for" loop of the "run" function is added to the "elFound" array. Herein, "To scan" a list, a stack, a vector or any other collection of ordered items means to implement a loop in a programming language over the items of the collection so as to retrieve the items one by one (unless the loop is interrupted) with the order that they have in the collection.

[00518] iii. After storing in the "elFound" array the Index of the one or more intersected elements enclosed in the box, if any of such elements exists, the "run" function highlights said one or more elements (the related code is omitted for brevity).

[00519] The third technique of the set of retrieving techniques is utilized to retrieve at least one element reference to an element visible in an Input Point of the Page, when given the Input Point, wherein each of the at least one element visible in the Input Point has a not-null component in composing a web color of a pixel of the Input Point. Hereafter, an implementation of an Eyedropper Script Method with the third technique is described. The Eyedropper Script Method may include, for example, the following steps performed by the GUI each time that the Pointer moves to a point (herein an "Input Point") of the Page:

[00520] i. Retrieving an element stack for the Input Point, i.e., a vector of references to the Page elements whose area contains the Input Point. The elements of the vector are ordered with the visualization order of the related Page elements: from the top-most Page element to the element behind all the others

(hereinafter "bottom-most element"). The bottom-most element is usually the "BODY" element (hereinafter simply referred to as the "Body").

[00521] ii. Scanning the element stack from the reference to the top-most Page element and calculating whether and to what extent each Page element contributes to the composition of the color of the pixel of the Page in the Input Point (hereinafter "Page Pixel Color").

[00522] iii. Once calculated the Page Pixel Color, it may be shown, for example, by the

GUI in the Eyedropper Panel.

[00523] The following is an example of Eyedropper Script Method implementation in a Jelliphy Advanced implementation in which the Page Image method is assumed to be implemented. Accordingly, as soon as the users switches to the Eyedropper IM the

"DOMVector" array is populated, for example, by calling the "updateElemsAreaCoor" method function of the "MGP.Area" object. Then, so as to implement the point "i" of the Eyedropper Script Method described above, the following "getElementsUnder" method function (also included in the "MGP.Area" object) may be called.

[00524] that . getElementsUnder = function (x, y) {

[00525] var i, s, m = [ ] ,

[00526] calcPrecedence = function (a, b) {

[00527] ...

[00528] } ; [00529] for (i = 1; s = DOMVector [i] ; i++) {

[00530] if (s.o.top <= y && s.o. bottom >= y && s.o.left <= x && s.o. right >= x) {

[00531] m . push ( s ) ;

[00532]

[00533]

[00534] if ( ! m) return

[00535] m = m . sort ( function (a, b) {

[00536] return b.par[a.id] ? -1 a.par[b.id] ? 1 calcPrecedence ( a, b) ;

[00537] } ) ;

[00538] return m;

[00539] } ;

[00540] The most relevant steps performed by the "getElementsUnder" method function above are the followings:

[00541] i. The DOMVector objects related to the Page elements whose area contains the

Input Point, having coordinates "x" and "y" (passed as parameters to the function), are stored in the array "m" in the "for" loop.

[00542] ii. If "m" is not empty, its elements are sorted using the criteria described below.

So as to sort an array, a sequence of comparisons is performed by the

Javascript "sort" method function between two different elements of an array, wherein said elements are passed as parameters (in the variables "a" and "b" of the example above) to a sorting function and the sorting function is passed as parameter to the "sort" method function. In the code above, each comparison between two elements of "m" is performed as a compound operation including the following steps, in which it is reminded that the two elements are two DOMVector objects.

[00543] a. The element "a" is moved before the element "b" if the Index of "a" is included in the one or more ancestors of "b" (stored in the "par" property of "b"). [00544] b. The element "b" is moved before the element "a" if the Index of "b" is included in the one or more ancestors of "a" (stored in the "par" property of "a").

[00545] c. If none of the conditions above is met, the function "calcPrecedence"

(whose code is not reported for brevity) is called. This function is utilized to select 1) if to move the element "b" before the element "a", 2) if to move the element "a" before the element "b", or 3) if to leave the position of the elements unchanged. So as to perform the selecting, one or more of the following properties of the "a" and "b" elements may be, for example, utilized: 1) the Position Property stored in "a.pos" and "b.pos", 2) the Z Position stored "a.z" and "b.z", 3) the object properties of the DOMVector element related to the closest common ancestor (wherein the definition of "closest" element is given above) of the "a" and "b" element, and 4) the object properties of the DOMVector elements related to two children of said closest common ancestor, the two children being also the ancestors of "a" or "b" respectively.

[00546] iii. The ordered array "m" is returned as the result of the method function.

[00547] It is assumed hereinafter, solely for purposes of exposition rather than limitation, that i) the opacity of a pixel is a float number in the range of 0 and 1, ii) the terms

"transparent", "semi-transparent" and "opaque", that are referred to the pixel opacity (or to the pixel color), have the same meaning that they have in the element opacity, and iii) the opacity of a pixel of an element may, for example, be calculated from the opacity of the element and/or from the "alpha" value of the color of the pixel. In order to implement the point "ii" of the Eyedropper Script Method described above, the Eyedropper algorithm depicted in the flow chart of Figure E-l may, for example, be used. The Eyedropper algorithm basically scans the element stack (for example, the array "m" in the code above) starting from the reference to the top-most Page element and composes the Page Pixel Color based on the color that the Page elements referenced by the scanned vector elements have in the Input Point. Hereinafter, a "Page element" (of the element stack) means a "Page element referenced by a vector element of the element stack". If, for example, only transparent and opaque elements are present in the HTML Page, the algorithm ends as soon as an opaque Page element is found in the element stack, and the color that this opaque Page element has in the Input Point is returned as the Page Pixel Color. The reason of said implementation is that the color of the opaque element, as such, completely covers the colors of the elements more behind in the Page (if any) so that there is no need to analyze the next Page elements of the element stack. A more complex calculation may be performed if semi-transparent elements are also present in the HTML Page. If, for example, a semi-transparent Page element is encountered by the algorithm while scanning the element stack, a partial-result color is calculated as the composition (described below) of the color of the semi-transparent Page element in the Input Point and the color of the Page elements ahead in the Page (calculated by the algorithm for the previous Page elements in the element stack). The partial-result color obtained from the composition above is stored in a variable and is available to be composed in turn with the color of the next Page elements of the element stack in the Input Point. An analogous procedure is adopted to calculate the partial results of the pixel opacity: each time that a semi-transparent Page element is scanned, its opacity is composed with a partial-result opacity obtained from the previous Page elements of the element stack and the result of the composition is stored again in the variable itself. The above-mentioned operations of color composition and opacity composition may be achieved, for example, by applying the equations of convex combination obtained from the equations of digital images composition disclosed by Porter and Duff, wherein the opacity may be referred to as "alpha". The algorithm ends after the last element of the stack is scanned and/or as soon as the partial-result opacity reaches a value approximated to 1 : at this point of the Eyedropper algorithm the partial-result color is returned as the Page Pixel Color and the partial-result opacity is returned as the opacity of the pixel of the Page in the Input Point. Since the bottom-most element is commonly the Body and the Body is usually opaque, in a variant of the Eyedropper algorithm only the partial-result color is returned. Additionally, it is assumed that each HTML element involved in the Eyedropper algorithm, and having one or more descendant text nodes containing text, is word wrapped (as described below) before the retrieving of the element stack (i.e., before the point "i" of the Eyedropper Script Method). An element is word wrapped if each word of the text of the descendant text nodes is wrapped with a HTML element, wherein the wrapping of said HTML element (hereinafter "text wrapper element" or "text wrapper") is performed by the GUI so that the word is replaced with the text wrapper element having a copy of the word as a text node child and the operation and the Appearance of the Page are not affected. For example, assuming that wrapping an element with the tag "TAG" has no effect on the operation and on the Appearance of the Page, the text "The sun is yellow" of an element may be converted into the following HTML: "<TAG>The</TAG> <TAG>sun</TAG> <TAG>is</TAG> <TAG>yellow</TAG>". The goal of the word wrapping is to add to the Page one or more HTML elements that are as close as possible to each word of the text, so that each time that the Input Point hovers over said one or more HTML elements the Eyedropper algorithm returns the color of the text of the text wrapper element (that inherits the color of the text from the parent HTML element), even if the Input Point is not exactly over a pixel of a character of the text. Below is a detailed description of the steps of the example of Eyedropper algorithm depicted in the Figure E-l.

[00548] i. The element stack (stored, for example, in the array "elStack") and the

coordinates of the Input Point are available at the starting block of the algorithm (block E. l).

[00549] ii. The variables for the partial-result opacity (stored in the variable

"currentOpacity") and the partial-result color (in the variable "currentColor") are initialized in the block E.2. These two variables are utilized by the algorithm to store the partial values of the color (for example, as a vector of red, green and blue numeric values) and of the opacity (for example, as a float value from 0 to 1). The initial values of "currentOpacity" and "currentColor" may, for example, be set to 0 and to an empty vector, respectively. It is assumed in this example that the result of the color composition between an empty color vector E and a color vector C is C.

[00550] iii. The scanning loop of "elStack" starts, in the block E.3, with the reference to the top-most Page element. The Page element referenced by the element of "elStack" currently scanned is hereinafter referred to as "Scanned Element". [00551] iv. The first check performed by the Eyedropper algorithm is on the borders of the Scanned Element (block E.4). If the Scanned Element has one or more visible borders (also taking into account the curvatures that the corners of the Scanned Element may have due to the "border-radius" and similar properties) and the Input Point is exactly over a border, the border color in the Input Point is composed with "currentColor" (block E.5) and the result of the composition is stored in "currentColor" itself. Analogously, an overall opacity of the pixel of the border (that may, for example, be calculated multiplying the alpha value of the border color by the Scanned Element opacity) is composed with

"currentOpacity" and the result of the composition is stored in "currentOpacity" (hereinafter the mentions of the operations of storing the results of the color composition in "currentColor" and in "currentOpacity" are implied). Finally, if the condition in the block E.4 is verified, the flow control of the algorithm passes to the block E.15 after the block E.5, otherwise the flow control passes to the block E.6.

[00552] v. If the Scanned Element is a text wrapper (block E.6), the text color of the

Scanned Element is composed with the "currentColor" and an overall opacity of the text (that may, for example, be calculated multiplying the alpha value of the text color by the Scanned Element opacity) is composed with the

"currentOpacity" (block E.7). If the condition of the block E.6 is met, the flow control passes to the block E.15 after the block E.7, otherwise the flow control passes to the block E.8. This implementation allows an identification of the color of the pixels in proximity to an element containing a text as explained at the point "iii" of the list of advantages of the Eyedropper Script Methods compared to the prior arts.

[00553] vi. If the Scanned Element (block E.8) is an image-like element (for example, its tag is "IMG" or "INPUT" having the "TYPE" attribute equal to "IMAGE"), the image in the Scanned Element is converted into a Canvas (defined below) loaded in the browser memory. Hereinafter, a "Canvas" is a HTML element that may be utilized so as to manage a HTML image. For example, a) a HTML image may be converted into a Canvas of said HTML image and vice- versa, b) a Canvas may be loaded in the browser memory and/or it may displayed directly in a Web Page (i.e., its image is displayed in the Page), and c) the color and the opacity of each pixel of the Canvas is made available to be read and written in BSL by means of one or more appropriate BSL functions. For example, a "CANVAS" element implementing the functionalities described above is part of the HTML5 specification and it is supported in the most popular browsers. Once the color of the pixel of the image and the opacity of the pixel of the image in the Input Point are retrieved from the Canvas

(hereinafter such a color and an opacity are referred to as respectively "image pixel color" and "image pixel opacity"), the image pixel color is composed with "currentColor" and an overall opacity of the pixel of the image (that may, for example, be obtained multiplying the image pixel opacity by the Scanned Element opacity) is composed with "currentOpacity" (block E.9). Then, if the image pixel opacity is approximated to 1 (block E.10) the flow control passes to the block E.15, otherwise it passes to the block E.11 (the same as if the condition of block E.8 is not met). If the Scanned Element has a background image (block E.11), the image is loaded into a Canvas analogously as in the previous step. If the Scanned Element has a gradient in its background (for example, with a function like "- webkit-linear-gradient" in the Background Image Property value), a gradient Canvas is created with the same gradient (as explained later herein). The color of the pixel of the background image and the opacity of the pixel of the background image in the Input Point are calculated from the Canvas

(hereinafter such a color and an opacity are referred to as "background pixel color" and "background pixel opacity", respectively) taking in account of the value of several style properties of the Scanned Element, comprising the background displacement (in the "backround-position" style property) and the background repetition (in the "backround-repeat" style property). Then, the background pixel color is composed with "currentColor" and an overall opacity of the pixel of the background image (that may, for example, be calculated multiplying the background pixel opacity by the Scanned Element opacity) is composed with "currentOpacity" (block E.12). Finally, if the background color of Scanned Element is transparent (block E.13), the flow control passes to block E.15, otherwise it continues to E.14 (the same as if the condition of block E.11 is not met).

[00555] viii. The background color of the Scanned Element is composed with

"currentColor" and an overall background opacity (that may, for example, be calculated by multiplying the "alpha" value of the background color by the Scanned Element opacity) is composed with "currentOpacity" (block E.14).

[00556] ix. If the value of "currentOpacity" is approximated to 1 or no more elements are left to scan in "elStack" (block E.15), the content of "currentColor" and "currentOpacity" are returned by the algorithm (block E.16), otherwise the flow control passes to block E.3 and another cycle of the loop is performed.

[00557] For better performance in terms of response time of the Eyedropper tool, one or more of the following techniques may, for example, be adopted:

[00558] i. Updating the Eyedropper Panel only at regular intervals, analogous to the

improvement described for the element highlighting of Properties IM.

[00559] ii. The Canvases may be cached in browser memory so as to avoid storing them in memory each time that the Pointer hovers over a pixel of the same image and/or of the same background image.

[00560] iii. The element properties utilized in the Eyedropper algorithm may also be

cached so as to avoid retrieving them from the Page DOM Tree each time the Pointer hovers over the same element in a Working Session.

[00561] The Eyedropper algorithm described in the example above may be enhanced, for example, so as to take into account of, for the calculation of the Page Pixel Color, other properties that may affect the visualization of the element (such as the "text-shadow" property) and/or of other types of HTML elements in the Page (for example, the "CANVAS" and the "SVG" elements).

[00562] The Selecting Methods described above may be implemented in one or more Jelliphy Advanced implementations and the results of the usage of said methods in terms of performance may vary depending, for example, on the function in which the method is utilized and on the type of browser. The best results empirically obtained in terms of shortest response time are the followings:

[00563] i. The Event-driven method has the best response time with the Selection IMs in all the most popular browsers excepted Internet Explorer ^® 9, in which, for example, a method using a PointToElement function gives a more stable result.

[00564] ii. The Page Image method gives the best results with the implementations of the selection box technique and the Eyedropper technique.

[00565] In an embodiment of the present invention, the method can, for example, include making available to the user at least one color data of a set of color data obtained from at least one web color of each of the at least one pixel of at least one Page Entity of a set of Page Entities. The set of Page Entities includes at least one of at least one Page of the Site S, at least one region of the at least one Page, and at least one element of the at least one Page.

[00566] In an embodiment of the present invention, the set of actions available to the user can, for example, include performing at least one coloring action so as to replace at least one web color of at least one pixel of at least one Page Entity of the set of Page Entities with at least one replacing web color.

[00567] In an embodiment of the present invention, a Color Management IM, that helps the user to manage the colors of one or more Page Entities, is available to the user. Example of Page Entities are: i) the entire HTML Page, ii) one or more Page elements, and iii) a rectangular area in the Page. It is assumed in the examples below that if the user does not select a Page Entity (for example, by properly configuring the GUI or by performing a specific action reported below), the Page Entity selected (hereinafter the selected Page Entity is referred to as "Target Entity") by default is the entire HTML Page. Accordingly, hereinafter one or more statistic color data are calculated on the entire HTML Page and the actions in this IM are performed on the entire HTML Page unless a different Target Entity is specified. A Color Management Panel, that may pop-up as the user switches to the Color Management IM, may include, for example, one or more of the following tools so as i) to allow the user to perform a set of actions and ii) to display the one or more statistic color data to the user, wherein the set of actions includes one or more coloring actions.

[00568] i. The above-described foreground and background Color Selectors.

[00569] ii. One or more Color Adjustment tools. The Color Management Panel may

contain, for example, a hue, saturation and lightness slider, each of which with a handle initially positioned in the middle (with the integer value of 0). The hue slider has a range from -180 to +180 (since the hue is commonly expressed in degrees), whereas the saturation and the lightness are normalized in the range from -100 to +100. If, for example, the user changes one or more sliders and then clicks an "Apply" button in the Color Management Panel when the Target Entity is the entire HTML Page, the GUI checks the visible elements of the Page and each time it finds an element that may be affected by the color changes performed by the user in the Panel (as described later herein) it applies the modifications to the element.

[00570] iii. A set of Color Statistics. One or more 2-D Color Histograms may, for example, be displayed in the Color Management Panel so as to represent the distribution, in the colors of the Target Entity, of a) the red channel, b) the green channel, c) the blue channel, d) the hue, e) the saturation, and f) the lightness.

[00571] iv. A Color Replacer tool. The top most used colors in the Target Entity are listed

(displayed for example both as filled rectangles and in as HTML codes, ordered from the most to the less used) in the first column of a Color Replace table. For each of the most used colors (hereinafter "Source Color") in the first column, the user may select a color (hereinafter "Destination Color") from a Color Selector displayed in the second column. Each Destination Color is equal to the corresponding Source Color of the first column as soon as the Color Management IM is activated. If, for example, the user changes a Destination Color from one or more of the above-mentioned Color Selectors and clicks the "Apply" button of the Color Management Panel when the Target Entity is the entire HTML Page, each occurrence of the Source Color in the Page is changed to the Destination Color as described in details later herein.

[00572] One or more additional functionalities may, for example, be implemented in this IM, comprising the followings.

[00573] i. The user may select one or more Page elements as the Target Entity. For

example, if the user clicks an appropriate "Select Target Element" button in the Color Management Panel, the Page elements are highlighted if hovered with the Pointer analogously to what occurs in the Handle IM. Then, the user may select one or more elements as the new Target Entity. In an alternative implementation, the element highlighting is activated as soon as the user switches to the Color Management IM so as to allow the user to select one or more elements as the Target Entity without clicking the "Select Target Element" button.

[00574] ii. The user may set the Target Entity to an area of the Page: for example, if the user clicks an appropriate "Select Target Area" button in the Color Management Panel, it is allowed to select a box in the Page, analogously to what it does in the Selection Box EVI. As soon as the user selects the box, the Target Entity is set to the area bounded by the box. In an alternative implementation, the element highlighting is activated as soon as the user switches to the Color Management IM and while it is keeping a key (for example "Alt") pressed, so as to allow the user to select a box as the Target Entity without clicking the "Select Target Area" button. [00575] iii. The user may configure the number of top most used colors shown in the Color Replace table from a proper option.

[00576] iv. After the user performs one or more changes from the Color Management

Panel and before clicking the "Apply" button of said Panel, a preview of these one or more changes may be shown "live" on the Page itself.

[00577] v. The Color Replacer tool may also be utilized to replace one or more colors of the Page that are similar to one or more Source Colors (the concept of similarity in colors is explained later herein and the value of the tolerance utilized for the similarity may be taken from, for example, a "Tolerance" slider of the Color Management Panel or from a proper option configured by the user).

[00578] Some examples of implementations of the above-described tools are reported later herein. The screenshot D.65 of Figure D-8 shows an example of usage of the Color

Management IM in Jelliphy Advanced. The following steps were performed by the user before the screenshot was taken.

[00579] i. Switching to the Color Management IM. As soon as the user switched to this

IM, the Color Management Panel (D.64) popped-up and the element highlighting was activated. The Color Management Panel was mainly composed of the following sub-panels: a) the "Statistics" sub-panel (D.66) that reported the Color Statistics of the entire Page as soon as the Panel popped-up, b) the "Color Adjustment" sub-panel (D.68) with the Color Adjustment tools, and c) the "Color Replacer" sub-panel (D.69) that showed the top most used colors of the entire Page as soon as the Panel popped-up.

[00580] ii. Selecting the First Image (D.70) as the Target Entity. As a result, the GUI updated the Statistics with the Color Statistics of the First Image and the Color Replacer with the top most used colors in the First Image. [00581] iii. Checking the "Enable" checkbox of the second row of the Color Replacer sub- panel and changing to pink the color of the corresponding Color Selector in the "Destination" column.

[00582] iv. Moving the handles of the Saturation and Lightness sliders from their initial value of "0" in the Color Adjustment sub-panel.

[00583] Finally, the user moved the Pointer so as to hover the "Apply" button (D.67).

[00584] In an embodiment of the present invention, a Background IM is available to the user so as to easily manage the background of the Target Entity. As the user switches to the Background IM, a Background Panel pop-ups, for example, with all or part of the controls described below that allow the user to perform a set of actions including one or more coloring actions. In the following examples of controls, solely for purposes of exposition rather than limitation, the Target Entity is assumed to be the entire Page, and, accordingly, the element involved by the background changes is the Body.

[00585] i. A Color Selector for the background base color: the user can change the

"background-color" style property of the Body from the Color Picker Panel that pop-ups with a click on the Color Selector.

[00586] ii. A selector for the background pattern, similar to the preview area utilized for the images related to the elements in the Properties IM. The File Loader Panel that pop-ups with a click on the selector may, for example, show a preview of one or more patterns retrieved from Generic Server. The patterns, being usually small images, may be uploaded and managed analogously to the image sources in the Properties IM, and a collection of the most commonly-used patterns may be provided by default in the VSE applications. As the user selects a pattern, the GUI includes its link in the value of the Background Image Property of the Body and assigns the value "repeat" to its "backgound- repeat" style property, so that the pattern is applied to the background of the Body.

[00587] iii. A selector for the background image, similar to the selector for the background pattern of the previous point. The only difference with the selector for the background pattern is that the "backgound-repeat" style property of the Body is set to "no-repeat" by the GUI as an image is selected.

[00588] iv. A selector for the border and the shadows, similar to the selector for the

background pattern. A useful premise to support the usefulness of this tool is the following: very often the border styles available by default for the "border- style" style property do not allow designing a Page layout commonly considered "attractive" and, moreover, some border styles are not completely cross-browser. For these reasons, usually the borders of some relevant items of the Web Pages (especially of the Body) are built through images. One of the most-used technique to build image borders utilizes, for example, 8 images (one for each border and corner of a rectangular element) positioned inside the element to add the borders to. This group of 8 images juxtaposed (hereinafter "Image Mosaic") makes up a continuous border around the element. The above statements about the borders may also be extended to the shadows: since the "box-shadow" style property is not completely cross-browser and in many cases the shadows rendered by means of this style property do not give satisfactory results, the technique similar to the Image Mosaic may be utilized to add a shadow to an element (for example, the technique may have the variant for the shadows that the Image Mosaic may be composed of a number of images less than 8 ). A Border/Shadow Manager Panel is a tool intended to partially automate the management of the borders and the shadows and to provide the user with a library comprising the most commonly-used Image Mosaics each of which may be utilized to render the borders and/or the shadows (hereinafter "Borders/Shadow Mosaic"). For example, the above- mentioned selector for border and shadows in the Background Panel may show a preview of the Borders/Shadow Mosaic currently selected (if any) for the Body. If this selector is clicked by the user the Border/Shadow Manager Panel, analogous to the File Loader Panel, pop-ups. The Panel includes, for example as previews, the Borders/Shadow Mosaics stored in the Generic Server. If the user selects a Borders/Shadow Mosaic from the Border/Shadow Manager Panel and then clicks an "Apply" button in the Panel, 8 children elements are added to the Body, each of which has the Position Property set to "absolute" and has an appropriate image of the mosaic (rendered, for example, with the

Background Image Property) in order to add a border and/or a shadow to the Body. One or more custom Borders/Shadow Mosaics may also be created by the user. For example, the user may create a new custom Borders/Shadow Mosaic by a) clicking a "New" button in the Border/Shadow Manager Panel, b) then uploading 8 images for the new mosaic from a "New Border/Shadow" Panel that consequently pop-ups, c) giving the mosaic a uniquely identifying name, and d) finally saving the new mosaic to the Generic Server. An analogous procedure may be followed to modify a Borders/Shadow Mosaic stored in the library. The user, for example, may a) select the Borders/Shadow Mosaic to change, b) then click an "Edit" button in the Border/Shadow

Manager Panel so that an "Edit Border/Shadow" Panel pop-ups, c) upload the new version of all or part of the images of the mosaic, and d) finally save the changes to the Generic Server. A selector for the gradient. If a gradient is applied to the area of the Body the gradient may, for example, be shown in preview in a rectangular selector (hereinafter "gradient selector") of the Background Panel, wherein the gradient selector is similar to the selectors described in the previous points. If no gradient is applied, the gradient selector may, for example, show a blank image. If the gradient selector is clicked by the user, a Gradient Management Panel, for example, pop-ups. The Gradient Management Panel may contain, for example, one or more tools to help the user to manage a gradient, comprising the followings. The user may, for example, manage the colors of the gradient from a gradient slider by selecting one or more colors and/or one or more opacity values that the user wants the gradient to assume in one or more positions (each of which is marked with a stopper) of a generic area filled with the gradient. The gradient slider is a horizontal bar available to preview the gradient in a linear form (not taking into account of the orientation and the radial option described below) and to help the user to change the position and arrangement of one or more color stoppers and one or more opacity stoppers in the gradient. For example, the one or more opacity stoppers may be managed as small handles at the top of the gradient slider whereas the one or more color stoppers may be managed as small handles (filled, for example, with the color assigned to the related color stoppers) positioned at the bottom. The user can, for example, perform at least one of the following actions: 1) drag-and-dropping the handles to the left or the right within the slider range, 2) adding a handle (and, accordingly, the related color stopper or opacity stopper) by clicking the position in which the user intends to place it, and/or 3) selecting a handle by clicking it. Once a handle is selected, the user can, for example, delete it by clicking an appropriate "Delete" button in the Gradient Management Panel or finely set its horizontal position from a "Position" Spinner Text Field. Therefore, the opacity value of the selected opacity handle may be changed from a slider similar to the one utilized to set the opacity in the Properties IM, and the color of the selected color handle may be changed from a Color Selector.

The orientation angle of the gradient may be entered by the user, for example, from a Spinner Text Field and/or from an angle selector (the angle selector comprising, for example, a circle with an arrow, displayed in the center of the circle, that points to the circumference of the circle and can be drag-and-dropped so as to change the angle between the selector and a horizontal line through the center). [00592] c. A checkbox to select a radial gradient. If checked, the gradient in the linear form of the point "a" is applied radially.

[00593] d. A checkbox to reverse the gradient. If checked, the gradient in the linear form of the point "a" is applied from right to left.

[00594] e. A palette with a collection of gradients retrieved from the Generic Server

(hereinafter "Gradient Palette"). A library of commonly-used gradients with several combinations of different colors, opacity, orientation, stopper arrangements and stopper positions may be available by default in VSE. The user may, for example, select a gradient from the palette with a click in order to load its parameters in the controls described above and then it may make some adjustments from the same controls before using the gradient. The user may also save a custom gradient to the Generic Server by clicking a "Save" button of the Gradient Management Panel and, as required, by entering a name for the gradient.

[00595] If a gradient is applied to the area of the Body when the Gradient Management Panel pop-ups, the data of said gradient are displayed in the above-described one or more tools and they are available to be changed by the user, otherwise the one or more tools of the Gradient Management Panel are set to a default status. For example, the default status may include the following settings: a) two color stoppers (with respectively the black and the white colors) at the two ends of the gradient slider, b) two opacity stoppers (respectively opaque and transparent) at the two ends of the gradient slider, and c) the orientation angle set to 0 degrees.

[00596] Once the desired actions are performed in one or more of the tools above, the user may, for example, apply the changes to the background of the Target Entity by clicking an "Apply" button in the Gradient Management Panel. Below are several examples of additional functionalities of the Background IM. [00597] i. The user may change the Target Entity from the entire Page to another Page Entity, analogous to the same additional functionalities described in the Color Management IM.

[00598] ii. The gradients, the patterns and background images are added to the Body (or to a HTML element related to a Target Entity different from the entire Page) by means of the Background Image Property. For this reason, the usage of the gradient tools, of the pattern tools and of the background- image tools is mutually-exclusive if the implementation described above is utilized: that means that, for example, if the user selects a pattern and then it selects a gradient, the pattern selection is lost. In order to allow the user to maintain a selection of a gradient, a pattern and a background image at the same time, the following operations may, for example, be performed by the GUI to prevent said overwriting of the Background Image Property when the user selects a gradient, a pattern or a background image: a) the content of the Target Entity (for example, the set of the children of the Body or of an element selected as Target Entity) is wrapped (as described below) with a new element with the same area of the Target Entity (the new element is referred to in this example as "wrapping element"), and b) instead of changing the Background Image Property of the Target Entity, the changes are made to the Background Image Property of the wrapping element. It is noticed that, analogously to the text nodes, "to wrap" the content of a first element with a second element means to modify the Page DOM Tree so as to obtain the first element with the second element as the unique child, and if the first element has one or more children before the wrapping, the one or more children becomes the children of the second element after the wrapping.

[00599] iii. After the user performs one or more changes from the Background Panel and before it clicks the "Apply" button of the Gradient Management Panel, a preview of these one or more changes may be shown "live" on the Page itself. [00600] Several relevant technical aspects about the implementation of the gradient selector are described later herein. Some of the functionalities of the Background IM implemented in Jelliphy Advanced are shown in the screenshot D.71 of Figure D-9. The user performed the following steps before the screenshot was taken:

[00601] i. Switching to the Background JJVl. As result, the Background Panel (D.80) was popped-up by the GUI with the selectors (each of which is at the right of its caption) described above. The selectors were (from top to bottom): "Color", "Pattern", "Image", "Borders/Shadow" and "Gradient".

[00602] ii. Utilizing the Pattern tool to select a hexagonal pattern. As result, the selected hexagonal pattern was applied to the Page Background.

[00603] iii. Selecting the Gradient tool. As soon as the user selected the tool, the Gradient

Management Panel (D.72) popped-up. The Gradient Management Panel was mainly composed of the following sub-panels (from top to bottom):

[00604] a. The Gradient Palette sub-panel (D.73).

The "Gradient Stoppers" sub-panel (D.76), for the management of the opacity and color stoppers, with the following sub-sections (from top to bottom):

[00606] 1. The "Opacity Stoppers" sub-section, containing the tools for the user to manage an opacity stopper (an example of opacity stopper is D.79) once the user selected said opacity stopper in the "Gradient Slider" sub-section (described below).

[00607] 2. The "Gradient Slider" sub-section (having the title "Stopper

Positions") with the opacity stoppers at its top, the gradient slider (D.75) in the middle, and the color stoppers (among which is D.78) at its bottom. [00608] 3. The "Color Stoppers" sub-section, containing the tools to manage a color stopper once that the user selected it in the "Gradient Slider". Before that the screenshot was taken, the Color Stopper D.78 was selected by the user, therefore the value of the position and the color in the "Color Stoppers" sub-section refers to such Color Stopper.

[00609] c. The "Gradient Parameters" sub-panel (D.74) with the controls to select the gradient orientation, to select a radial gradient and to revert the position of the opacity and color stoppers.

[00610] iv. Utilizing the tools of the Gradient Slider until it reached the appearance shown in the screenshot.

[00611] v. Moving the arrow (D.77) of the angle selector so as to give the gradient an orientation of -30 degrees.

[00612] As result of the actions of the points "iv" and "v" above, the selected gradient was applied to the Page Background as a preview before the user clicked the "Apply" button at the bottom of the Gradient Management Panel.

[00613] The way in which the browsers manage the events is described below as a premise of the description of several GUI tools and GUI functions available to the user for the event management. The browsers automatically detect when several specific events occur on HTML elements. Different types of events are managed by the browsers, for example:

"click" (that occurs, or "is triggered", when the user clicks an element), "change" (triggered, for example, when the user changes an input field) and "mouseover" (triggered when the Pointer hovers over an element). For example, a user-defined function (hereinafter "event handler"), written in BSL, may be bound to an event type of a HTML element so that the browser executes the function as soon as an event of that type occurs in the element. [00614] In an embodiment of the present invention, the set of actions available to the user can, for example, include binding the at least one change performed to the Site S to at least one event type. The following is an example of implementation of a set of tools that help the user to manage the events of a Page. As the user switches to an Events IM, an Events Management Panel pop-ups and the Page elements can be highlighted and then selected by the user analogously to as it does in the Handle IM. The Events Management Panel may, for example, contain a list (hereinafter "event list"), each item of which (hereinafter "event item") represents one event type that may be associated to a HTML element. At the right of each event item, the event handler bound to the event type represented by the event item

(hereinafter "an event handler bound to an event item" means "an event handler bound to the event type represented by an event item") may be displayed in a concise form (hereinafter "handler item"), if such an event handler exists. For example, the first 30 character of the BSC of an event handler may be displayed as the handler item. Therefore, as soon as a Page element is selected, the GUI performs the following operations: i) the event items related to the event types compatible with the selected element become selectable (hereinafter "enabled event items"), and ii) each event handler of the element is displayed in an handler item at the right of the event item that the event handler is bound to. Each event handler may be edited as text from an Editing tool similar to the one described in the Handle IM. Assuming that the BSL is, for example, Javascript, a Javascript Editing tool may be implemented to allow the user to view, to edit, to create and/or to delete one or more event handlers. The user may, for example, select one of the enabled event items: once an item is selected, an "Edit Code" button from the Events Management Panel becomes clickable by the user. If the user clicks the button, a Panel with the Editing tool pop-ups. If an event handler is bound the selected event item, the BSC of the event handler is available to be visualized and edited by the user from the Editing tool. The user may enter a new BSC and/or change the existing BSC from the Editing tool and then click a "Save" button in the tool so as to save the BSC as the event handler bound to the selected event item. Additionally, the Events IM may provide, for example, the user with a macro recording tool in order to convert a sequence of actions graphically performed by user with the GUI into an event handler. The macro recording may be implemented, for example, as described below. Once the user selects an event item, a "Record" button from the Events Management Panel becomes clickable: if the user clicks it, the GUI starts to record all the changes to the Page that the user performs (hereinafter "macro recording") from that moment and until the user stops the recording. The user may stop the macro recording by clicking a "Stop" button at the right of the "Record" button. As soon as the macro recording is stopped, the recorded changes are converted into a BSC and the BSC is assigned to an event handler bound to the selected event item. The event handlers created with the macro recording are available to be modified from the Editing tool like the event handlers created by clicking the "Edit Code" button. An example of procedure that the user may follow to utilize the macro recording is:

[00615] i. Switching to the Events IM so that the Events Management Panel pop-ups and the element highlighting is activated,

[00616] ii. Selecting an element from the HTML Page to add an event handler to,

[00617] iii. Selecting the "click" event item from the event list,

[00618] iv. Clicking the "Record" button from the Events Management Panel,

[00619] v. Switching to the Add IM (defined later herein) and adding a new HTML block containing the writing "clicked" to the right of the previously-selected element, and

[00620] vi. Clicking the "Stop" button from the Events Management Panel.

[00621] After followed the procedure above, the user may test the event handler, for example, by switching to the Navigate IM and then clicking the element to which it added the event handler. As it clicks the element, the block with the writing "clicked" appears at its right. One or more of the following additional functionalities may, for example, be provided to the user:

[00622] i. While the GUI is recording a macro, the user may want to record other

additional actions besides the ones that can be graphically performed with the GUI. To allow the user to record the above-mentioned additional actions, several buttons may, for example, become clickable in the Events Management Panel during the macro recording. If, for example, one of the buttons of additional actions is clicked, the corresponding action is recorded so as to be converted into BSC when the user clicks the "Stop" button. An example of additional action is the "alert" Javascript function which is utilized to pop-up an alert warning with a user-defined message.

[00623] ii. The global event types are event types that are not bound to a specific element of the Page, but to the entire Page (for example, a "Ready" event type that is triggered as soon as a Page and its functionalities are available to the user). One or more of these event types may be, for example, available to the user as event items (hereinafter "global event items") at the top of the event list. The global event items are enabled regardless of whether an element is selected or not.

[00624] iii. The Events Management Panel may be provided with a "Trigger" button so as to help the user to simulate the triggering of the selected element and to observe a preview of the execution of the event handler that the selected event item is bound to.

[00625] In an embodiment of the present invention, multiple event handlers may be bound to one event item. The implementation of the event management described above may be adapted accordingly, for example, by displaying in each event item one handler item for each event handler bound to the event item. Additionally, for example, i) the user may be provided with a "New" button of the Events Management Panel so as to add an event handler to the selected event item, and ii) each handler item may be clickable so as to allow the user to select the corresponding event handler and then to perform the actions of viewing, editing and/or deleting as described above.

[00626] In an embodiment of the present invention, the set of actions available to the user can, for example, include composing at least one animation in the Page, and binding the at least one animation to at least one event type. The definition of animation utilized in the example of implementation below is the following: an animation is a set of changes each of which is gradually applied to one or more visible elements from a certain instant and over a certain period of time. An example of animation is the following: a rectangular HTML element may smoothly appear in a certain position of the Page over 10 seconds, then it may be gradually transformed into a square over the subsequent 10 seconds. Each animation has a lifetime, that means the time period between its beginning (hereinafter "animation

beginning") and its end (in the example above the lifetime is 20 seconds). Each animation includes one or more passages each of which is characterized by one modification (hereinafter "passage modification") smoothly applied to one or more HTML elements (hereinafter "passage elements") with a given visual effect (hereinafter "passage effect"). Each passage starts at a certain instant (hereinafter "passage beginning") and ends at a subsequent instant (hereinafter "passage end"). The animation of the example above is composed by exactly two passages. The modification of the first passage consists of the addition of a rectangular element in a certain position of the Page. The first passage begins coincidentally with the animation beginning and ends after 10 seconds (hereinafter the measurements of time of the passages are expressed in seconds from the animation beginning). The modification of the second passage consists in resizing the rectangular element into a square, and the passage begins at 10 seconds and ends at 20 seconds. The passage effect is another feature used to characterize animations: the effect of a passage determines how the transition is rendered by the browser from the passage beginning to the passage end. In the example above, the way in which the element smoothly appears starting from the beginning of the animation depends on the effect chosen for the passage: for example, the "fade" effect, that smoothly increases the opacity of the rectangular element so as to change it from transparent to opaque, may be chosen. A relationship of a certain type may subsist, for example, between two different passages: the types of relationship between two passages may comprise at least one of the following types.

[00627] i. They may have a parallel execution: the passage beginnings of the two

passages coincide. [00628] ii. They may have a partially parallel execution: the passage beginning of one of the two passages is between the passage beginning and the passage end of the other one.

[00629] iii. They may have a consequential relationship: one passage begins as soon as the other ends.

[00630] Each animation, characterized by a set of passages, may be "executed" by a browser starting from a certain instant, in which the animation beginning is set, so that the modification of each passage of the animation starts to be smoothly applied to the Page after a time interval equal to the passage beginning and stops after a time interval equal to the passage end. Each animation may, for example, be bound to an event type so that it is executed as soon as an event of that type occurs, analogously to an event handler. An Animations IM provides a graphic interface so as to help the user to create and manage the animations in a Page. An example of implementation of animation management is reported below. As the user switches to the Animations EVl, an Animation Management Panel (analogous to the Events Management Panel) pop-ups and the element highlighting is activated, as in the Handle IM. The Animation Management Panel may include, for example, a list (hereinafter "animation list"), each item of which (hereinafter "animation item") is related to one different event type compatible with a HTML element. Additionally, the animation list may include the one or more animation items related to one or more of the global event types defined above. At the right of each animation item, the animation bound to the event type that the animation item is related to (hereinafter "an animation bound to an animation item" means "an animation bound to the event type that an animation item is related to") may be displayed as an icon, if such an animation exists. Said icon, for example, may show a reduced copy of the one or more passage elements of the first passage of the animation. To begin with, the user may, for example, select an animation item related to a global event type (enabled by default as in the Events IM) or it may select an element in the Page and then select one of the enabled animation items (i.e., the animation items related to event types compatible with the selected element). If the user selects an animation item with no animation bound to it, a "New" button becomes clickable in the Animation Management Panel in order to allow the user to create a new animation for the selected animation item. If the user clicks the "New" button, an Edit Animation Panel pop-ups with an animation graph that allows the user to create, view and/or edit the course of the animation. The animation graph may have, for example, a horizontal time axis at its bottom, starting from 0 and having a unit of 0.1 seconds. Below the time axis, the one or more animation passages may, for example, be displayed by means of a stack of passage tracks each of which represents one passage and has a slider with the same length of the time axis. Each of the above-mentioned sliders may, for example, have two handles: one handle indicating the instant of the passage beginning (hereinafter "beginning handle") and the other indicating the instant of passage end (hereinafter "end handle"). Both the handles may be drag-and-dropped by the user in order to set the time of the passage beginning and the passage end. In this implementation, the passage modification of each passage may, for example, be assigned by the user by performing a graphic modification with the GUI. Some examples of said graphic

modification that may be utilized in an animation are the followings: i) resizing and moving an element in the Handle EVI, ii) adding a new element in the Add IM, defined later herein, and iii) changing an element property (for example the text color, the background color or the opacity) in the Properties EVI. The user may select a passage by clicking its track below the time axis. Once a passage track is selected, the user may, for example, perform one or more of the following actions:

[00631] i. The user may click an "Edit Modification" button in the Edit Animation Panel in order to assign a modification to the passage (either assigning a new modification or replacing an existing one with a new one). Once the button is clicked, the user may perform a graphic modification with the GUI. After the graphic modification is performed, the GUI assigns it to the passage and shows it as a preview of the passage in the Animation Graph, above the stack of sliders. The preview of the passage modification may, for example, consist of a copy, placed above the beginning handle, of the one or more passage elements (properly resized to fit the dimensions of the graph) before that the passage modification is performed on them, and another copy, above the end handle, of the one or more passage elements after applied the passage modification. [00632] ii. Once the user assigns a passage modification to the passage as described in the previous point "i", it may select an effect for the passage from an "effect" drop-down menu in the Edit Animation Panel. As soon as the user assigns a modification to the passage, the options of the "effect" drop-down menu change according to the type of modification performed. For example, if the passage modification is the addition of a new element, some of the available effect options may be: a) the "fade" effect, described above; b) the "top-down" effect, that reveals the new element from top to bottom; and c) the "zoom" effect, that expands the new element from a point to its actual size.

[00633] iii. The user may add a new passage after the selected one by clicking an "Add

Passage" button of the Edit Animation Panel. As soon as the button is clicked, a new passage track is created under the selected one.

[00634] iv. The user may click an "Add Consequential Passage" button of the Edit

Animation Panel. At the click of this button, a new passage track is created under the selected one, the new passage having a consequential relationship with the selected passage so that the new passage starts as soon as the selected passage ends. The consequential relationship between the handles may be visually displayed, for example, with an arrow from the end handle of the selected track to the beginning handle of the new track. For example, if one of the handles linked by the arrow is shifted by the user the other handle is automatically shifted by the GUI.

[00635] v. The user may delete the selected passage track by clicking an appropriate

"Delete Passage" button in the Edit Animation Panel.

[00636] After the user creates, modifies and/or deletes one or more passages so as to obtain the desired result, it may click an "Apply" button in the Edit Animation Panel in order to bind the animation characterized by said one or more passages to the selected animation item. Once an animation is bound to an animation item, the animation may be displayed as an icon at the right of the item in order to help the user to identify it. If the user selects an animation item with an animation already bound, an "Edit" button, a "Run" button and a "Delete Animation" button may, for example, become clickable in the Animation Management Panel instead of the above-mentioned "New" button. If the user clicks the "Edit" button, the Edit Animation Panel pop-ups and the animation passages of the bound animation are displayed in the animation graph so that they are available to be edited by the user, analogously as described above for creating a new animation. If the user clicks the "Run" button, the selected animation is executed in the HTML Page as a preview. The "Delete Animation" button may be utilized so as to remove the animation from the selected animation item.

Additionally, each animation may, for example, be "cyclic". Each animation item may have, for example, a "Cyclic" checkbox at its right: if the user checks the "Cyclic" checkbox, the animation related to the animation item is re-executed from the beginning each time that its execution ends.

[00637] In an embodiment of the present invention, one or more instant passages (i.e., passages having the beginning time equal to the end time) are also allowed. For example, the user may move the beginning and the end handles to the same position in order to set an instant passage. An instant passage is rendered, during the execution of the animation, by simply applying the passage modification to the Page at the passage beginning. In an embodiment of the present invention, analogous to the embodiment in which multiple event handlers are supported, multiple animations may be bound to one animation item. The implementation of the animation management in this embodiment may be adapted accordingly, for example, by displaying at the right of each animation item one animation icon for each animation bound to the animation item. Additionally, for example, i) the function of the "New" button of the Animation Management Panel may be adapted so as to add an animation to the selected animation item, and ii) each animation icon may be clickable so as to allow the user to select the animation by clicking the related animation icon. Once an animation is selected, the user may, for example, click the "Edit" button so as to edit the selected animation, the "Run" button so as to preview the selected animation, and/or the "Delete Animation" button so as to remove the selected animation. [00638] The screenshot D.81 of Figure D-10 shows an example of usage of the Animations IM in Jelliphy Advanced. The screenshot was taken after that the user performed the following steps:

[00639] i. Switching to the Animations EVI. As soon as the user switched to this IM, the

Animation Management Panel (D.87) popped-up. The Panel was composed of the following sub-panels:

[00640] a. The "Actions" sub-panel (D.88) with a button for each action that may be performed by the user once that an animation item is selected. The displayed buttons were (from left to right): "New", "Edit", "Run" and

Delete Animation".

[00641] b The animation list sub-panel (D.89) with the animation items.

[00642] ii. Clicking the "Ready" animation item so as to select it.

[00643] iii. Clicking the "New" button (D.90). As soon as the user clicked the button, the

Edit Animation Panel (D.82) popped-up with the following sub-sections and sub-panel:

[00644] a. The Animation Graph sub- section (D.84) with the animation graph, that was empty as soon as the Edit Animation Panel popped-up.

[00645] b. The sub-section with the stack of passage tracks (D.86).

[00646] The Actions sub-panel (D.85), with (from left to right) the "Add Passage" button, the "Add Consequential Passage" button, the "Delete Passage" button and the "Cyclic" checkbox.

[00647] iv. Utilizing the tools of the Animation Management Panel to create an animation for the First Image so that it is smoothly resized starting from 5 seconds and for the subsequent 5 seconds, and then it fades out within the subsequent 7 seconds.

[00648] v. Moving the Pointer to the "Apply" button (D.83).

[00649] An implementation of the animation management in Jelliphy Advanced may, for example, utilize the animation-related APIs of j Query and/or the effects methods of j Query UI.

[00650] In an embodiment of the present invention, one or more of the following deleting actions are included in the set of actions available to the user:

[00651] i. Deleting one or more Page elements,

[00652] ii. Removing the background of one or more Page elements, and

[00653] iii. Removing the text displayed in one or more Page elements.

[00654] An example of implementation of an Erase IM, implementing the deleting actions, is the following. As soon as the user switches to the Erase IM, the element highlighting is enabled as in the Handle IM. As the user clicks a highlighted element, one or more of the following operations are performed by the GUI, depending, for example, on the value of a configured GUI option: i) the highlighted element is removed from the Page, ii) the

"background-color" style property of the highlighted element is set to "transparent" and the Background Image Property is set to "none", and/or iii) the one or more descendant text nodes of the highlighted element are removed.

[00655] In an embodiment of the present invention, the set of actions available to the user can, for example, include adding at least one element to at least one Page of the Site S. One or more HTML elements may be added to the Page by the user while an Add EVI is active. This functionality may be implemented, for example, as described below. As the user switches to the Add IM, an Add Element Panel pop-ups. The Add Element Panel may contain an element palette including the most-commonly used HTML elements. For example, the user may perform the following actions: i) selecting one element in the element palette, ii) then optionally making some modifications on the element before adding it to the Page, and iii) finally adding the element to the Page by positioning it in the desired position. In order to allow the user to change the element selected in the palette before adding it to the Page, the Properties Panel may be popped-up as well as the Add Element Panel when the user switches to the Add IM. Before that the user adds the selected element to the Page, the content, the properties and the attributes of the selected element are available to be changed from the Properties Panel via some GUI tools and GUI functions analogous to the ones utilized by the user in the Properties IM so as to modify the same features of a selected element. The following is a practical example showing how the user, after having switched to this IM, may perform several actions so as to add a HTML block with some text to the Page:

[00656] i. Selecting a "Block" element from the element palette. As the user selects an element in the element palette, the GUI shows the features of the selected element in the Properties Panel analogously to what occurs when the user selects one element in the Page with the Properties EVI activated.

[00657] ii. Changing the Position Property of the "Block" element to "absolute" from the

Properties Panel.

[00658] iii. Clicking a "quick-edit" button in the Add Element Panel in order to change the text of the element (initially containing a default value, such as, for example, "Block Text") from the Quick Edit Panel.

[00659] iv. Adding the new element to the Page by placing it in the desired position of the

Page. This action may be performed, for example, by drag-and-dropping the element from the palette to the desired position. The way in which the user places the new element into the Page depends on the value of the Position Property, analogously to what occurs for the Moving Tool of the Handle IM. In this example, the value of the Position Property is set to "absolute" by the user, therefore the block element may be positioned anywhere in the Page with no constraint from the existing Page elements.

[00660] One or more of the additional functionalities reported below may also be implemented.

[00661] i. The elements in the palette may be grouped, for example, by similarity, in order to help the user to easily access all of them. For example, all the input elements (such as the input text fields, the radio buttons, the checkboxes, the drop-down menus and the text areas) may be included in an "input" group. Only one element for each group (hereinafter "group selected element") is displayed in the palette with a "More" button at its right. As soon as the user clicks the "More" button, a Panel pop-ups showing all the elements of the related group (hereinafter such a Panel is referred to as "Add Group Panel"). If the user selects an element from the Add Group Panel, the group selected element of the related group is replaced with the element selected from the Add Group Panel.

[00662] ii. A preview of the element that the user can add to the Page may be available in the Add Element Panel. The preview shows the element selected in the palette with the modifications that the user subsequently performs on it.

[00663] iii. As soon as an element is added to the Page, it may be covered with a shaded area containing several buttons to perform some quick actions, for example, the "Handle Switch" and the "Property Switch". For example, if the user adds an element and then clicks the "Handle Switch" button, the following steps are automatically performed by the GUI: a) switching to the Handle IM, and b) selecting the element, that is then ready to be further modified by the user in the Handle IM.

[00664] iv. The element Palette may also include one or more compound elements

comprising, for example, one or more commonly-used tools to be utilized in the Page. The followings are some examples of said compound elements, each of which may be present in the element Palette in multiple versions, wherein each version may have a functionality and/or an appearance different from the other versions: a top bar menu, a pull-down menu, a login area (with, for example, a username and a password entry fields and two "Register" and "Login" buttons), a Site Language Selector, a header, a footer, a left hand bar, an AJAX scrolling news area, and an AJAX data grid.

[00665] The screenshot D.91 of Figure D-11 shows an example of usage of the Add EVl in Jelliphy Advanced. The screenshot was taken after that the user performed the following steps:

[00666] i. Switching to the Add IM. As soon as the user switched, the Add Element

Panel (D.95) and the Properties Panel (D.96) popped-up. The Add Element Panel was composed of the following sub-panels.

[00667] a. An Element Palette sub-panel (D.94) with the element palette.

[00668] An "Edit Element" sub-panel (D.98) with several buttons to help the user to perform the most frequently used actions to edit the element selected in the Element Palette. The buttons were (from left to right): the quick-edit, the advanced edit, the table edit (that might be utilized to edit the tables) and a radio button to switch the value of the Position Property to and from "absolute".

[00669] c. A "Preview" sub-panel (D.99), showing a preview of the element selected in the element palette.

[00670] ii. Clicking the "Image" element (D.97) in the element palette.

[00671] iii. Starting to drag the "Image" element to the position of the HTML Page in which the user intended to add the image. [00672] While the screenshot was taken, the user was dragging the image to the position D.93, and the GUI was showing the preview (D.92) of the Appearance that the Page would have if the image were dropped in the instant of the screenshot, analogously to what occurred with the example of usage of the Moving Tool.

[00673] The screenshot D.100 of the Figure D- 11 shows an example of history navigation in Jelliphy Advanced. The user performed the following steps before the screenshot was taken:

[00674] i. Clicking a "Show History" radio button in the Quickbar Panel. As result, the

History Panel (D.102) popped-up.

[00675] ii. Performing three modifications with Jelliphy Advanced. For each

modification, a row was added to the History Panel by the GUI.

[00676] iii. Undoing the last modification performed. Accordingly, the text of the last row was set to semi-transparent by the GUI so as to mark the undone modification.

[00677] iv. Moving the Pointer to the first row of the History (D.103), corresponding to the first of the three modifications. As the user entered the row (hereinafter "highlighted row") with the Pointer, the GUI highlighted the Page Title (D.104), that is the modification element of the modification in the highlighted row.

[00678] While the screenshot was taken, the user was moving the Pointer to the position D.105 so that the GUI was showing an "Undo Until" button (D. lOl), that, if clicked, allowed the user to undo all the modifications that were performed after the one related to the highlighted row.

[00679] In an embodiment of the present invention, the set of actions available to the user can, for example, include performing at least one image editing action. A result of at least one of the at least one image editing action includes replacing at least one web color of at least one pixel of at least one image utilized in the Site S with at least one replacing web color. An Images IM allows the user to modify one or more images of a Page by means of various tools analogous to the ones commonly used in the painting and image-retouching programs. The Images IM may be implemented, for example, as described below. As the user switches to the Images IM, one or more image elements of the Page (for example, the "IMG" elements and the elements with a link to an image in the value of the Background Image Property) are highlighted with a shaded area in order to help the user to distinguish them from the other HTML elements of the Page. If the user clicks an image element, the related image

(hereinafter "Original Image") is selected (i.e., the image element is covered with a Selected Area analogously to what occurs in the Handle IM) and an Edit Image Panel pop-ups with an area (hereinafter "Editing Area") showing a visualization of the selected image (hereinafter the visualization of an image in the Editing Area is referred to as "Image Visualization"). The Image Visualization is available to be altered by the user by performing one or more image editing actions. After the user obtains the desired Image Visualization, it may, for example, modify the Original Image so that it reflects the Image Visualization (hereinafter such a modifying of the Original Image is referred to as "updating"). It is noticed that the above- mentioned result of at least one image editing action, in this implementation, is referred to the result obtained in the Original Image after that i) said at least one image editing action is performed by the user to the Image Visualization and ii) the Original Image is updated. The user may, for example, perform one or more image editing actions by means of one or more tools of the Edit Image Panel, several examples of which are reported below. Additionally, the Color Management Panel, with the Color Histograms initially showing the Color Statistics of the Original Image and the Color Replacer tool initially showing the one or more top most used colors in the Original Image, may, for example, pop-up together with the Edit Image Panel. The image editing may be implemented, for example, with a layered model (described below) so as to help the user to perform one or more of said image editing actions with the well-known advantages of managing different parts of the image separately. It is assumed in the implementation of layered model described below that:

[00680] i. A Layer is a Canvas displayed in the Editing Area and available to be modified by the user in the Editing Area. [00681] ii. Each Layer is related to an integer value (hereinafter "Order" of the Layer) that may be utilized to determine the order of visualization of multiple Layers as explained in the point "iv" of this list of assumptions. The Order of each Layer is different from the Order of the other Layers.

[00682] iii. If exactly one Layer is in the Editing Area, the Image Visualization is the

visualization of the Layer.

[00683] iv. If multiple Layers are in the Editing Area, said Layers are overlapped so as to obtain the Image Visualization. The Layers are overlapped from the bottommost (i.e., the Layer with the minimum Order) to the top-most (i.e., the Layer with the maximum Order) so that each Layer L with an Order X overlaps each Layer L' with an Order less than X.

[00684] As soon as the user selects an image in the Images EVI, for example, the image is converted into a Layer in the Editing Area with an Order equal to 0 (hereinafter "Basic Layer"). The user may, for example, perform one or more layer actions on the one or more Layers from a Layer Management Panel, that pop-ups as the user switches to the Images IM. The one or more Layers may be visually represented in the Layer Management Panel as a Layer Stack of blocks (each block of which, hereinafter referred to as "Layer Block", is related to a Layer and has the Order of the related Layer displayed inside). Said layer actions may, for example, include one or more of the following actions available to the user.

[00685] i. Adding a Layer. The user may, for example, add an empty Layer with an

incrementally increasing Order and the same dimensions of the Basic Layer. So as to add an empty Layer (i.e., a Layer having the opacity of each pixel set to 0 ) the user may click an "Add" button in the Layer Management Panel: accordingly, the GUI adds a) the empty Layer to the Editing Area ahead of the other Layers, wherein the Order of the empty Layer is equal to the Order of the top-most Layer plus 1, and b) a Layer Block, related to the empty Layer, to the top of the Layer Stack. [00686] ii. Loading a Layer from an image. For example, the user may select an image in the Page and/or upload an image from a client computing medium. The selected image and/or the uploaded image are converted into a new Layer, and the new Layer is then managed analogously to as described in the previous point "i" for an empty Layer.

[00687] iii. Changing the Order of one or more Layers, for example, by drag-and-dropping a Layer Block, related to one of the one or more Layers, to a new position of the Layer Stack.

[00688] iv. Selecting a Layer Block so that it becomes the Active Layer Block and the related Layer becomes the Active Layer (whose functionality is described below).

[00689] The layer actions may, for example, include also one or more of the following additional layer actions that the user may perform if an Active Layer is selected.

[00690] i. Clicking a "Delete" button in the Layer Management Panel so as to remove the

Active Layer Block from the Layer Stack and the Active Layer from the Editing Area. It is assumed herein, solely for purposes of exposition rather than limitation, that the Basic Layer cannot be deleted.

[00691] ii. Clicking a "Hide/Show" button in the Layer Management Panel so as to obtain an Image Visualization without the contribution of the Active Layer

(hereinafter, such an action is referred to as "to hide" a Layer). Once the Active Layer is hidden, the user may click the "Hide/Show" button again so as to obtain an Image Visualization with the contribution of the Active Layer (or "to show" the Layer).

[00692] iii. Clicking a "Merge Down" button in the Layer Management Panel so as to merge the Active Layer with the Layer immediately behind (i.e., with the Layer whose Order is less than the Order of the Active Layer and having the maximum Order).

[00693] Hereinafter, the expression "(the user) clicks a pixel" may, for example, refer to one or more of the following actions:

[00694] i. In a Mouse Supporting Medium, the user presses a mouse button while the

Pointer hovers over the pixel.

[00695] ii. In a Mouse Supporting Medium, the user holds a mouse button down while the

Pointer hovers over the pixel.

[00696] iii. In a Touch Screen Supporting Medium the user touches the pixel with a finger in the touch screen.

[00697] iv. In a Touch Screen Supporting Medium the user swipes the finger on the touch screen until it reaches the point of the touch screen corresponding to the pixel.

[00698] In order to perform the one or more image editing actions, the user may, for example, select one of the modal image editing tools (described below) so as to activate it (for example, by clicking a radio button, related to an image editing tool, in the Edit Image Panel) and then utilize it. A modal image editing tool is a tool for image editing that is qualified as "active" (or "activated" by the user) from the instant of the selecting of the tool by the user and until one of the following conditions is met: i) a different modal image editing tool is selected, ii) the user switches to another IM, or iii) the Current Working Session ends. The followings are several examples of implementations of various modal image editing tools:

[00699] i. A Pencil tool. If the user clicks one or more pixels of the Active Layer when this tool is activated, the color of each clicked pixel of the Active Layer changes to the Foreground Color. If the user right-clicks one or more pixels in a Mouse Supporting Medium, the color of each clicked pixel of the Active Layer changes to the Background Color. [00700] ii. A Brush tool. If the user clicks one or more pixels of the Active Layer with this tool activated, a brush pattern (defined below), colored with the

Foreground Color, is copied to the Active Layer around each clicked pixel. A Brush Pattern may, for example, be a monochromatic image (hereinafter "shape") that the user may choose, for example, by selecting it from a palette of commonly-used Brush Patterns, wherein the color of each pixel of the monochromatic image has a) the value of each RGB component equal to the value of the corresponding RGB component of each pixel of the image and/or b) the "alpha" value equal to 0. Hereinafter, a Brush Pattern is colored with a color C if the RGB components of the color of each pixel of the Brush Pattern are changed to the corresponding RGB components of the color C. As soon as the user clicks the pixel, the pixel is utilized by the GUI as the center point to draw in the Active Layer a copy of the selected Brush Pattern, the copy being colored with the Foreground Color and reduced (or enlarged) so as to have a radius (i.e., the maximum distance of the pixels of the copy from the center point) equal to, for example, the value (changeable by the user) of a "Brush Radius" Spinner Text Field of the Edit Image Panel.

[00701] iii. A Selector tool. While this tool is activated, the user may drag a box in the

Editing Area in order to select an area of the box, analogously to what it does in the Selection Box IM. The content of the selected area (i.e., the one or more pixels of the Active Layer within the selected area) may be available, for example, to be a) erased so as to replace the color of the one or more pixels of the content with the Background Color, and/or b) copied and subsequently pasted into another position of the Active Layer or of another Layer subsequently selected by the user as the Active Layer. The user may select a shape (for selecting the area) different from a rectangular box, for example, by changing the selection of a "Selection Method" drop-down menu in the Edit Image Panel. [00702] iv. A Color Replacer Brush tool. A brush color replacement (defined below) is performed by the GUI if a) the user clicks one or more pixels of the Active Layer with the Color Replacer Brush tool activated and b) at least one pixel of the Active Layer, within a Brush Clicked Area (defined below) centered in a clicked pixel, has a color equal to a Source Color selected by the user in the Color Replace table of the Color Management Panel. The Brush Clicked Area may, for example, be a circle centered in a clicked pixel and with a radius equal to the value entered by the user in the "Brush Radius" Spinner Text Field. So as to perform the brush color replacement, each Source Color of the one or more pixels of the Active Layer within the one or more Brush Clicked Areas is replaced by the GUI with the Destination Color related to the Source Color (analogously to as occurs in the Color Management IM). The Color Replacer Brush tool may be also utilized to replace, in the one or more Brush Clicked Areas, one or more colors that are similar to the Source Colors as explained in the point "v" of the additional functionalities of the Color

Management IM and as described in details later herein.

[00703] v. A Crop tool. If the user selects this tool, it may, for example, select a box in the Editing Area, analogously as in the Selector tool. After selecting the box, the user may, for example, click a "Crop" button in the Edit Image Panel in order to remove the one or more parts outside the box from the one or more Layers in the Editing Area and to set the dimensions of the one or more Layers to the same dimensions of the selected box.

[00704] vi. A Line tool. This tool may be utilized by the user to draw one or more lines in the Active Layer. If the Line tool is activated and the client computing medium is a Mouse Supporting Medium, the user may, for example, click a point of the Active Layer to select the start point of the line and keep the mouse button pressed until it reaches the end point with the Pointer, then it may release the button. As it releases the mouse button, a line is drawn in the Active Layer from the start point to the end one. The same result may be achieved by the user, for example, in a Touch Screen Supporting Medium by touching and/or swiping the start point and the end point of the line in the touch screen with two fingers: in this case the line is drawn when the user removes the fingers from the touch screen. The line may have, for example, a color equal to the Foreground Color and a thickness (expressed, for example, in pixels) equal to the value (changeable by the user) of a "Line Thickness" Spinner Text Field in the Edit Image Panel. Hereinafter, independently from the type of client computing medium, the instant at which a multi-point action (i.e., an action in which the user selects more than one point of a Layer) is completed by the user (for example, when the user releases the mouse button in a Mouse Supporting Medium and when it removes the fingers in a Touch Screen Supporting Medium) is referred to as "Multi-Point Selecting Instant".

[00705] vii. A Rectangle tool. When this tool is active, the user may draw one or more rectangles in the Active Layer. For example, in order to draw a rectangle, the user may drag a box in the Active Layer analogous to the Selector tool, the box having the same position and dimensions of the rectangle that it intends to draw. At the Multi-Point Selecting Instant, the dragged box is replaced by the GUI with a rectangle. For example, a) the rectangle border may have a color equal to the Foreground Color and the thickness entered in the "Line

Thickness" spinner field, and b) the rectangle may be filled with the

Background Color.

[00706] viii. An Ellipse tool. This tool is analogous to the Rectangle tool with the

difference that at the Multi-Point Selecting Instant an ellipse is drawn in the dragged box instead of a rectangle. The ellipse has the same center of the dragged box, the horizontal diameter length equal to the width of the box and the vertical diameter length equal to its height. The ellipse may have, for example, the border color, the border thickness and the fill color assigned as in the Rectangle tool.

[00707] ix. An Erase tool. The user may replace the color of one or more pixels of the

Active Layer with a transparent color while this tool is active. If the user, for example, clicks one or more pixels in the Active Layer, the GUI may have a different behavior depending on whether a "Continuous Erase" checkbox of the Edit Image Panel is checked or not. If the "Continuous Erase" checkbox is unchecked, the one or more colors of the one or more pixels of the Active Layer within the one or more Brush Clicked Areas are set to transparent, otherwise, the following-listed one or more pixels of the Active Layer are set to transparent: a) the clicked pixel, and b) one or more pixels continuous in color (with the meaning defined below) to the clicked pixel, if at least one of said one or more pixels continuous in color exists. It is noticed that the concept of similarity of colors, utilized below in the definition of pixels "continuous in color", is explained later herein and it is assumed that the value of the tolerance utilized for the similarity may be taken, for example, from a "Tolerance" slider of the Edit Image Panel, the tolerance value being changeable by the user from the slider. Two pixels J and K of a Layer are defined "continuous in color" (and, accordingly, the pixel J is defined "continuous in color" to the pixel K and vice-versa) if the colors of J and K are similar and one of the following conditions is verified: a) J and K are close together, or b) A continuous path of pixels can be traced in the Layer from one pixel of J and K to the other pixel of J and K so that the color of each pixel of the path is similar to the color of at least one pixel of J and K. An Eyedropper tool. The operation of this tool is analogous to the operation of the Eyedropper IM: if the Eyedropper tool is active and the user, for example, moves the Pointer to a point of the Editing Area, the color that is perceived by the user in said point (hereinafter such a color is referred to as "Perceived Color") is displayed in the Eyedropper Panel. If, for example, the user clicks the point the Perceived Color is stored in the foreground Color Selector of the Color Management Panel, and if it right-clicks the point in a Mouse Supporting Medium, its Perceived Color is stored in the background Color Selector instead. It is noticed that a) if exactly one Layer is in the Editing Area the Perceived Color is the color of the pixel of the Basic Layer in the point, and b) in case of multiple Layers in the Editing Area the Perceived Color is the result of the composition of the colors and the opacities of the pixels of the Layers in the point of the Editing Area, and the Perceived Color may be calculated, for example, using the equations of convex combination analogously to as described in the Eyedropper algorithm.

[00709] xi. A Paint tool. This tool allows the user to paint one or more pixels of the Active

Layer so as to change the color of the one or more pixels. If this tool is active and the user, for example, clicks a pixel of the Active Layer, the GUI changes to the Foreground Color the one or more colors of a) the clicked pixel and b) one or more pixels of the Active Layer that are continuous in color to the clicked pixel, if at least one of said one or more pixels exists.

[00710] xii. A Gradient tool. This tools allows the user to fill the Active Layer with a

gradient (analogous to the gradients managed in the Background EVI) and/or to add one or more gradient areas to the Active Layer. Some examples of methods available to the user so as to perform the above-described actions when this tool is active are reported below.

[00711] a. The user may add a "quick gradient" to the Active Layer by performing a multi-point action analogous to the one described to draw a line: at the Multi-Point Selecting Instant, the area of the Active Layer is filled with a gradient having the following characteristics. The Gradient Flow (defined later herein) of the gradient has the initial and terminal points respectively in the start point and in the end points of the line described in the Line tool, and the starting color and the ending color are set respectively to the Foreground Color and to the Background Color.

[00712] b. The user may click an "Advanced Gradient" button in the Edit Image

Panel. After the clicking, the Gradient Panel described in the Background IM pop-ups and the user may utilize the same functionalities utilized in the selector for the gradient of the Background IM in order to fill the Active Layer with a gradient. [00713] c. The user may select an area in the Active Layer (for example, with a

technique analogous to the one utilized in the Selector tool) and then utilize one of the methods described in the previous points "a" and "b" so as to fill it with a gradient.

[00714] xiii. A Blur tool. If this tool is active, the user may click one or more pixels of the

Active Layer in order to blur the one or more colors of one or more blurring pixels within the one or more Brush Clicked Areas. The user may, for example, select the intensity of the blurring from a "Blur Intensity" slider of the Edit Image Panel.

[00715] xiv. A Smudge tool. While this tool is active, the user may smudge the one or more colors of one or more pixels of the Active Layer. So as to perform the smudging, for example, in a Mouse Supporting Medium the user may click a pixel of the Active Layer and keep the mouse button pressed while it moves the Pointer on the Layer, whereas in a Touch Screen Supporting Medium it may simply move the Pointer on the Active Layer by swiping the finger on the touch screen. While the user is performing a smudging action, the pixels with a distance from the Pointer less or equal to the value of the "Brush Radius" field are shifted (as defined below) toward the direction in which the user is moving the Pointer. "To shift a pixel X toward a direction" means to assign the color of the pixel X to a pixel Y that is positioned along the direction.

[00716] xv. A Red-Eye tool. If this tool is active, the user may correct the red-eye effect in the Active Layer (for example, if the Original Image is taken from a photo). If, for example, the user clicks the center of an eye with the red-eye effect in the image, the red-eye effect is corrected in the one or more pixels of the Active Layer within the Brush Clicked Area. [00717] xvi. Global Effects tool. When the user activates this tool, an Image Effects Panel pop-ups with several global effect actions available to the user. Some examples of global effect actions are reported below.

A Blur action. The user may select the intensity of the blur action from a "Blur Intensity" slider of the Image Effects Panel. As the user clicks a "Blur" button in the Image Effects Panel, the one or more Layers are blurred with the selected intensity.

A Sharpen action. As the user clicks a "Sharpen" button in the Image Effects Panel, the one or more Layers are sharpened with the intensity selected by the user from a "Sharpen Intensity" slider of the Image Effects Panel.

[00720] c. An Add Noise action. The user may add noise to the one or more the one or more Layers with an intensity selected from a "Noise Intensity" slider by clicking an "Add Noise" button in the Image Effects Panel.

[00721] In addition to the modal image editing tools, the following examples of global image editing tools and image editing functions do not need to be activated and may be available to the user as long as the Images IM is active.

[00722] i. A New Image function. The user may add one or more new images to the Page by means of this function. When the user utilizes the New Image function, an empty image (i.e., an image with the color of each pixel equal, for example, to "white" or to the Background Color) is created in the Page with a default width and a default height, and then the empty image is shown in the Image

Visualization. The user may modify the default values of width and/or height for the empty image before it is created, for example, by changing properly the GUI configuration. [00723] ii. The Color Adjustment and the Color Replacer tools (described in the Color

Management IM). If the user utilizes one or both of the two above-mentioned tools from the Images IM and then it clicks the "Apply" button of the Color Management Panel, the one or more changes C performed by the user in the Color Management Panel are applied to each pixel of the Active Layer. In an implementation, at the clicking of the "Apply" button of the Color Management Panel one or more changes C are applied to each pixel of the one or more Layers so that the one or more changes C performed by the user from the Color Management Panel are applied to the Perceived Color in each point of the Image Visualization.

[00724] iii. A Zoom tool. The user may increase and decrease the magnification of the

Image Visualization by moving the handle of a Zoom slider. As it sets the Zoom slider to a certain value (hereinafter "Zoom Level", that is expressed, for example, in percentage of magnification), the Image Visualization has a magnification equal to said value. This tool is utilized by the user as an aid for the other image editing actions and its usage does not affect, for example, the updating of the Original Image.

[00725] iv. A Resize function. The user may resize each Layer to a certain size, for

example, by entering the desired width and height in pixels. As soon as the user clicks a proper "Resize" button, the dimensions of the one or more Layers are scaled to fit the entered width and height .

[00726] It is noticed that i) the distinction between the modal image editing tools and the global image editing tools is made solely for purposes of exposition rather than limitation and each image editing tools may be implemented as modal and as global, and ii) the distinction between image editing tools and image editing functions is also made solely for purposes of exposition rather than limitation and each image editing tool may be implemented as image editing function and vice- versa. [00727] After that the user gives to the Image Visualization the desired appearance by means of the above-described tools, it may, for example, update the Original Image of the HTML Page, so as to apply to the Original Image the changes performed altering the Image Visualization, by clicking an "Apply" button in the Edit Image Panel. As the user clicks "Apply", if multiple Layers are in the Editing Area, the Layers are merged into the Basic Layer. Then, for example, i) the Basic Layer may be converted into an image, ii) said image may be saved to the Generic Server as a new version of the Original Image, and iii) finally the Original Image may be replaced in the HTML Page with the new version of the Original Image saved in the Generic Server. In an implementation, the GUI may, for example, save each Layer (for example, after converting it into an image) to the Generic Server as well as the new version of the Original Image in order to retrieve each Layer in a Subsequent Working Session and to be able to modify each single Layer in said Working Session. In an implementation, when the user utilizes the New Image function, an empty image is shown in the Image Visualization without creating a new image in the Page, and when the user clicks the "Apply" button of the Edit Image Panel, all the above-described operations are performed except the replacing of the Original Image in the Page. In an embodiment, after that the user clicks the "Apply" button of the Edit Image Panel and after the multiple Layers, if any, are merged into the Basic Layer, the Basic Layer is converted into an image that is utilized to replace the Original Image without saving it to the Generic Server. In an embodiment, the user may select one or more Layers. In such an embodiment, the additional layer actions described above involve all the selected one or more Layers: for example, the user may click i) the "Delete" button to remove the one or more selected Layers and the related one or more Layer Blocks, ii) the "Hide/Show" button to hide and/or show the one or more selected Layers, and iii) the "Merge Down" button, if multiple Layers are selected, in order to merge the selected Layers in one Layer. In an embodiment, instead of using the layered model a direct image model is adopted in the implementation of the Image IM. With the direct image model, for example, i) as soon as the user selects an image, the selected image is converted into an Image Canvas and displayed in the Editing Area, ii) the Layer Management Panel is not implemented, and iii) the user may perform the image editing actions described above directly on the Image Canvas instead of performing it on the one or more Layers. [00728] The screenshot D.106 of Figure D-12 shows an example of modification of an image with Jelliphy Advanced. Before the screenshot was taken, the user performed the following actions:

[00729] i. Switching to the Image IM. As soon as the user switched, each image in the

Page was highlighted with a shaded area.

[00730] ii. Clicking the First Image. As result, the GUI overlapped the First Image with a

Selected Area and the Edit Image Panel (D.107) as well as the Layer

Management Panel (D.l 12) popped-up. The Edit Image Panel included the following sub-panels.

The "Image" sub-panel (D. l 10) with the Editing Area (D.l 11) and the Zoom tool (D.109) that was initially set to "100%". The First Image was also displayed in the Editing Area as soon as the Panel popped-up.

The "Tools" sub-panel (D.108) with several buttons, each of which was related to an image editing tool and might be clicked by the user so as to activate the related image editing tool. The buttons displayed in the sub- panel were the followings (from left to right and top to bottom): Pencil, Brush, Selector, Crop, Color Replacer Brush, Eraser, Line, Rectangle, Ellipse, Polygon (a tool similar to the Line tool, that could be used to draw polygons), Eyedropper, Paint, Gradient, Blur, Smudge, Red-Eye, Lighten (a tool similar to the Blur tool, that could be used to lighten one or more pixels of the Active Layer), Global Effects and Color Management (a button that could be clicked by the user so that the Color Management Panel, with the Color Adjustment and Color Replacer tools, popped-up and could be utilized by the user to modify the image).

[00733] The Layer Management Panel included the following sub-panels. [00734] a. The "Actions" sub-panel (D.l 13), with the following buttons (from left to right): "Add", "Hide/Show", "Merge Down" and "Delete".

[00735] b. The "Layers" sub-panel (D.114), that, as soon as it popped-up, included exactly one Layer Block related to the Basic Layer.

[00736] iii. Moving the Zoom slider until it reached the "200%" value of Zoom Level.

Then, the user moved the scroll-bar at the right of the Editing Area until it reached the position shown in the screenshot. As soon as the user set the Zoom Level to "200%", the GUI modified the magnification of the Image

Visualization in the Editing Area accordingly.

[00737] iv. Clicking the "Add" button of the "Actions" sub-panel. As result, a Layer

Block (with the caption "Layer 1") was added to the top of the Layer Stack and an empty Layer, related to the Layer Block, was added ahead of the Basic Layer.

[00738] v. Clicking the Layer Block "Layer 1" in order to select it.

[00739] vi. Utilizing the Pencil, the Ellipse and the Gradient tools so as to draw in the

"Layer 1" as shown in the screenshot.

[00740] vii. Moving the Pointer to the "Apply" button.

[00741] The gradient background referred to in the point "vii" of the description of the Eyedropper algorithm is a graphic effect that may be obtained with several gradient functions (for example "-webkit-linear-gradient" and "-webkit-radial-gradient") used in the value of the Background Image Property. Generally speaking, the gradients may also be rendered by means of images, that may be created or modified, for example, starting from the Canvases by means of several Canvas functions. The gradient background functionality is not completely cross-browser (i.e., whether and to what extent a gradient is rendered as expected by the user depends on the browser utilized) whereas the gradient images are cross-browser, but on the other hand, the gradient background has the advantage that the browser response time in rendering a gradient background is significantly lower than the response time in filling a Canvas with the same gradient and in converting the Canvas to an image. For this reason, the gradient backgrounds may be used, for example, in order to implement a preview feature (that may, for example, automatically be disabled in browsers that do not fully support this functionality) for the gradient selector of the Background IM: for example, while the user is changing any parameter of the Gradient Management Panel, these changes may be

temporarily applied "live" to the Body so as to give a feedback of the effects of the changes to the user. Therefore, a procedure to convert the gradient backgrounds into gradient images by means of Canvas functions may be implemented, for example, in order to provide the following functionalities:

[00742] i. Obtaining the correct result of the color underlying the Pointer while the

Pointer hovers over an element with a gradient background in the Eyedropper EVl. If an element having a gradient background is encountered in the block E. l l of the Eyedropper algorithm in Figure E-l, the correct value of the color in that point may, for example, be retrieved from a Canvas that is built in the browser memory, the Canvas being filled with the same gradient of the element.

[00743] ii. Providing a cross-browser gradient for the Gradient tool of the Background IM.

If the above-mentioned preview feature is implemented, this may be easily achieved, for example, by converting the preview in a gradient image and using this image as Background Image Property of the Body (or of any other Target Entity).

[00744] The conversion of a gradient background into a gradient Canvas may be achieved, for example, by parsing the parameters of the above-mentioned gradient functions as Strings (taking into account the different versions of these function in each browser type) and then using the parsed data so as to reproduce the same gradient in a new Canvas having the same dimensions of the element to which the gradient background is applied. To describe the conversion procedure, it is considered the following practical example (in which it is assumed that the BSL utilized is the Javascript): a linear gradient that starts with the "blue" color, turns to "red" in the middle and ends with "white" while its opacity fades from opaque to transparent. Assuming that this gradient has an inclination of 60 degrees and it fills an element (hereinafter "gradient bar") whose dimensions are 800 x 200 pixels (these integer values are stored respectively in the variables "w" and "h"), it may be rendered, for example, in the Chrome browser by means of the following Background Image Property (an example of the rendering of the gradient is shown in the screenshot F. l of Figure F-l):

[00745] background-image: -webkit-linear-gradient (-60deg, rgba ( 0, 0, 255, 1 ) 0%,

rgba (255, 0, 0, 0.5) 50%, rgba ( 255 , 255 , 255 , 0 ) 100%)

[00746] The drawing F.8 of Figure F-l is utilized to explain the procedure of conversion. The gradient bar is schematically drawn in F.7 and the Gradient Flow (defined as the vector whose initial point is the point in which the gradient starts to be applied to the area of the element and whose terminal point is the point in which the gradient stops to be applied) is shown by the arrow F.5. In order to convert the Background Image Property value above into a gradient Canvas, the method below may, for example, be followed. After some

trigonometric calculations performed by the GUI, the distance between the gradient starting point (point F.2) and the center of the gradient bar (point F.4) is found equal approximately to 286,60 pixels (it is implied that all the sizes hereafter are expressed in pixels unless otherwise specified). Therefore the top-left point (F.2) and bottom-right point (F.3) of the gradient area (whose coordinates are relative to the top-left corner F.6 of the element) may be calculated trigonometrically, approximated and then stored in the following Javascript objects:

[00747] F2 = (x: 256.70, y: -148.20)

[00748] F3 = (x: 543.30, y: 348.21) .

[00749] Accordingly, the following Javascript code may, for example, be used to fill a Canvas (stored in the "canvas" variable) with the linear gradient above:

[00750] canvas . setAttribute ( ' width ' , w) ;

[00751] canvas . setAttribute ( ' height ' , h) ;

[00752] context = canvas . getContext (' 2d ') ; [00753] grad = context . createLinearGradient (F2. x, F2.y, F3.x, F3.y);

[00754] grad.addColorStop(0, 'rgb(0, 0, 255) ');

[00755] grad. addColorStop (0.5, 'rgba(255, 0, 0, 0.5) ');

[00756] grad . addColorStop ( 1 , ' transparent ' ) ;

[00757] context . fillStyle = grad;

[00758] context .fillRect (0, 0, w, h) ;

[00759] The procedure adopted in this practical example may be utilized as a basis for a general algorithm to convert the gradient backgrounds into Canvases filled with the same gradient of the gradient backgrounds. Such Canvases may be then converted into gradient images.

[00760] So as to implement the functionalities of the Color Adjustment tool, of the Color Replacer tool and of the Color Replacer Brush tool, utilized in the Color Management IM and in the Images IM, the following methods may, for example, be applied. Assuming that the Page Image method is implemented as described above, as soon as the user switches to the Color Management IM the following operations may, for example, be performed by the GUI:

[00761] i. A Page Image similar to the one described above is calculated by the GUI. In addition to the data stored in the Page Image for each visible element, the values of the following style properties and attributes may, for example, be added to the DOMVector object elements:

[00762] a. The "Border-color" style property if the visible element has the width of one or more borders (set in the "border-width" style property) greater than

0,

[00763] b The "Color" style property if the visible element has at least one not-empty text node as child,

[00764] c The Background Image Property if the value of this property includes a link to an image, [00765] d. The "Background-color" style property if different from "transparent", and

[00766] e. The "Src" attribute if the visible element is an image or an "INPUT'

element with type "IMAGE".

[00767] The color values of the properties above may, for example, be stored both in the HSL (Hue, Saturation and Lightness) format and in the RGB (Red, Green and Blue) format.

[00768] ii. The images linked by the "Src" attribute and by the Background Image

Property of the previous point are loaded into Canvases in the browser memory analogously to what occurs in the Eyedropper algorithm.

[00769] It is assumed hereafter that a color modification is a change to the color of any entity that may be visualized in a HTML Page: examples of color modifications are i) the color adjustments, that change a color C into a color C, wherein C is calculated as a function of C, and ii) the color replacements, that substitute a color C with another color C. It is noticed that a color modification may have no effect in changing the color: in this case the color C is equal to the color C. Also, the distinction between color adjustments and color replacements is not sharp and it has been made solely for purposes of exposition rather than limitation: for example, the color replacement with tolerance (described below) may be implemented so that the replacing color also depends on the replaced color (as in a color adjustment). In the description of the Color Management IM, three examples of tools for the color adjustments are reported: the hue, the saturation and the lightness sliders. If the user changes any value from the Color Adjustment tool and/or from the Color Replacer tool of the Color Management IM and then it clicks the "Apply" button of the Color Management Panel, the DOMVector is scanned by the GUI in order to apply at least one color modification to the one or more elements of the Page. If the currently-scanned DOMVector object has the Background Image Property and/or it has the "src" attribute, the at least one color

modification is applied to each pixel of the Canvas loaded in the browser memory from the image of the HTML element related to the currently- scanned DOMVector element

(hereinafter such a HTML element is referred to as "Related HTML Element"). After applying the color modification to each pixel of the Canvas, the Canvas may, for example, be converted into an image and utilized in the Related HTML Element instead of the image utilized before of the color changing by the user. The above-described technique of modifying each pixel of the Canvas loaded in the browser memory may also be applied, for example, to one or more Layers when the Color Replacer tool and/or the Color Adjustment tool are utilized in the Images IM. If the currently-scanned element has, for example, one or more values set in one or more Color Style Properties, the at least one color modification is applied to said one or more values of the currently-scanned element, and then each of the modified values is assigned to the corresponding style property of the Related HTML

Element. For example, so as to implement a hue, saturation and/or lightness color adjustment for the Color Style Properties, the method below may be followed for each color to be modified.

[00770] i. If it is known a priori that the adjustment has no effect on a color (for example, if the color is gray and a modification to the hue value is applied) the calculations in the next points are skipped.

[00771] ii. The color adjustment is applied to the HSL format of the color.

[00772] iii. The result of the adjustment is converted into RGB format.

[00773] iv. The RGB-formatted result is assigned to the style property corresponding to the Color Style Property of the Related HTML Element.

[00774] Hereinafter, the entities to which a color modification may be applied, such as the Color Style Properties and the pixels of the Canvases, are referred to as "Colorable Items". The color replacements (utilized for example in the Color Replacer tool and in the Color Replacer Brush tool when the Color Management IM or the Images IM are active) may be implemented, for example, as an exact color replacement and/or as a color replacement with a tolerance (defined below). If an exact color replacement is being executed, each time that a Colorable Item with a color equal to the Source Color is found, the color is replaced with the Destination Color related to the Source Color. [00775] In order to implement the replacement with tolerance, several definitions of distance between two colors (hereinafter "color distance") may be utilized. Two kinds of color distances may, for example, be defined solely for purposes of exposition rather than limitation: the shade distances, that grow as the shade (or tonality) of the two colors is different, and the lightness distances, that grow as the lightness of one of the two colors color differs from the lightness of the other one. An example of shade distance is the HS (hue and saturation) distance. The HS distance may be defined as the euclidean distance between two points representing two colors in a 2-D graph with the hue in X axis and the saturation in Y. The calculation of the HS distance between two colors takes into account that the hue is periodic, therefore, assuming that i) the hue is normalized to 1, ii) dn is the absolute value of the difference between the hue of the two colors, and iii) ds is the difference between the saturation of the two colors, the HS distance between these colors may be calculated as the following

[00777] Another example of shade distance is the differential distance between the color channels (for example, the red, green and blue components or the cyan, yellow and magenta components of the colors). It is assumed that a "D" vector may be calculated for each color as the following: each component of the "D" vector is calculated as the difference between two color channels of the colors raised to a constant power. For example, assuming that the color channels utilized are the red, the green and the blue components (hereinafter "RGB

components") and a color is identified by the vector (R, G, B), the components of the "D" vector of the color are (DG _R , D _B G, D _RB ), wherein

[00778] DGR = sgn(G - R) x (G - R) ^p

[00779] D _BG = sgn(B - G) x (B - G) ^p

[00780] DRB = sgn(R - B) x (R - B) ^p [00781] In the components above, "sgn" is the "sign" function (returning -1 if the argument is negative and 1 otherwise), the "x" is the number multiplication operator, and "p" is a constant that influences the course of the differential distance function (in the "Diff. Dist." columns of the tables of Figure F-2, "p" has, for example, the value of 1/2). The differential distance between a first color having the "D" vector equal to (D _GR I, D _BG I, D _RB I), and a second color having the "D" vector equal to (D _GR2 , D _BG2 , D _RB2 ), is defined as

[00782] [ (D _GR1 -D _GR2 ) ² + {DBGI -D _BG2 ) ² + (PRBI -D _RB2 ) ² ] ^Q

[00783] wherein "q" is a constant (in the tables of Figure F-2 it is, for example, equal to 1 ).

[00784] A lightness distance may be implemented, for example, as the Euclidean distance between the two colors represented in a 3-D graph in which the coordinates are the RGB components of the colors. Another example of implementation of lightness distance is the absolute value of the difference between the "value" (defined below) of each color

(hereinafter this distance is referred to as "color value distance"). The "value" of a color is defined as the maximum value of its RGB components. Two tables the values assumed by the four color distances defined above with a set of sample colors are reported in Figure F-2. The first four columns of each table shows two colors ("Color #1" and "Color #2") and their respective HTML codes. On the right of these columns, the "Diff. Dist." column shows the differential distance, the "HS Dist." shows the HS distance, the "Eu. Dist." shows the

Euclidean color distance and the "V Dist." shows the color value distance. All the distances in the tables are normalized to 100.

[00785] In order to implement the color replacement with a tolerance, a shade and a lightness distances may, for example, be simultaneously used. As shown in the tables of Figure F-2, the lightness distances are not accurate enough to detect the similarity of two colors; neither the sole shade distances may be used (for example, both the shade distances between "black", with a HTML code equal to "000000", and "white", with a HTML code equal to "FFFFFF", are 0). Therefore, an algorithm implementing the differential distance and the Euclidean color distance may, for example, be used to determine the similarity between the one or more colors of a Colorable Item (hereinafter such one or more colors are referred to as "Target Colors") and the Source Color. For example, the user may assign one numeric value (for example from 0 to 100) for the tolerances of both the differential and Euclidean color distances, or it may assign a value T to the tolerance of the differential color distance and a value T" to the Euclidean color distance. The tolerance values of each color distance are the thresholds below which two colors are considered equals in the color distance definition. For example, each time that both the shade and the lightness distances between a Target Color and a Source Color are less than or equal to, respectively, the shade and the lightness thresholds (hereinafter this condition is referred to as "Color Replacement

Condition"), the Target Color is replaced with the Destination Color related to the Source Color. The following variants to the above-described color replacement technique may, for example, be implemented in the Color Replacer tool and in the Color Replacer Brush tool when the Color Management EVl or the Images IM are active.

[00786] i. In an embodiment of the present invention, each time that the Color

Replacement Condition is met, the Target Color is replaced with a color that has the same hue and the same saturation of the Destination Color and has the same lightness of the Target Color.

[00787] ii. In an embodiment of the present invention, each time that the Color

Replacement Condition is met, the Target Color is replaced with a color having each RGB component of the Destination Color shifted by the difference between the corresponding component of the Source Color and of the Target Color. For example, assuming that the Target, the Source and the Destination colors has respectively the following RGB components (R _TAR G, G _TAR G, B _TAR G), (RSRC, GsRc, BSRC) and (R _D EST, G _DE ST, B _dest ), the RGB components (RREPL, G _REPL , B _REPL ) of the color used to replace the Target Color are

[00788] RREPL = min(R _DE sT + RTARG - RSRC , 255)

[00789] GREPL - tnin(GDEST + GTARG - GSRC , 255)

[00790] BREPL = min BoEST + BTARG - BSRC , 255) [00791] The variants described above may be utilized, for example, to colorize an image, i.e., to replace a color of an area of the image maintaining the nuances of the color in the area.

[00792] In an embodiment of the present invention, the set of actions available to the user can, for example, include performing at least one drawing action on at least one Page so as to add to the at least one Page at least one drawing object of a set of drawing objects, the set of drawing objects comprising at least one of: i) at least one pixel, ii) at least one line, iii) at least one arrow, and iv) at least one shape. In an embodiment of the present invention, a Drawing / Notes IM may, for example, be available to the user so as to add one or more drawing objects and/or notes ahead of the elements of the Page, wherein a note is a visual item that the user may add to the Page, for example, so as to remember an improvement to be made to the Page layout. The following is an example of implementation of the Drawing / Notes IM. As soon as the user switches to this EVI, a Drawing / Notes Management Panel pop-ups. Some examples of the tools that may be activated by the user (the definition of activated tool is analogous to the one given for the modal image editing tools of the Images IM) from the Drawing / Notes Management Panel are the following:

[00793] i. A tool for sticky-like notes. A sticky- like note is a Panel anchored to a certain position of the Page (i.e., the anchored Panel has the Position Property set to "absolute" so as, for example, to follow the Page as the user scrolls it) and containing an editable text. The user may add a sticky-like note Panel

(hereinafter "Note Panel") to any position of the Page while this tool is active. To achieve this, the user may, for example, click the position of the Page to which it intends to add the note, so that a Note Panel is displayed at the clicked position. The user may add a text to a text area in the Note Panel and then click a "Save" button in the same Panel in order to have the entered text displayed in the Note Panel as a note text. Each sticky-like note may, for example, be collapsed by clicking a "Collapse" button in the Note Panel itself so that it is reduced to a note icon. Once collapsed, the Note Panel may be expanded again by the user by clicking the note icon. So as to change the text of the note, the user may click an "Edit" button in the Note Panel, so that a text area with the text of the note is displayed instead of the note text. Finally, the user may click the "Save" button in the Note Panel to update the note text with the changed text. Additionally, the user may, for example, check a "Fixed" checkbox of the Note panel so as to have the note displayed in a fixed position of the Viewport (i.e. the Position Property of the Note panel is changed from "absolute" to "fixed" by the GUI) regardless of the Page scrolling.

[00794] ii. A tool to highlight text. When this tool is selected, the user may highlight one or more texts in the Page by selecting the one or more texts with the Pointer. For example, as soon as the user select a text (hereinafter "original text"), it is changed from non-highlighted to highlighted (as defined below) and vice- versa. A highlighted text may, for example, be a text with both the following characteristics: a) background color that stands out from the background color of the original text and b) a color equal to the background color of the original text.

[00795] iii. A Draw Brush Tool. The user may draw freehand on the Page with the Pointer if the Draw Brush Tool is active. This tool may be implemented, for example, analogously to the Brush tool described in the Images IM: if the user clicks a pixel of the HTML Page with the Draw Brush Tool activated, a Brush Pattern colored the Foreground Color is copied around the clicked pixel of the Page. The user may select the Brush Pattern from a palette of commonly-used Brush Patterns. As the user clicks a pixel, this pixel is utilized by the GUI as the center point to add to the Page a copy of the selected Brush Pattern colored with the scratch color and reduced (or enlarged) so as to have a radius (i.e., the maximum distance of the pixels of the copy from the center point) equal to the value of a "Brush Width" Spinner Text Field (changeable by the user) in the Drawing / Notes Management Panel. The Draw Brush Tool may be utilized, for example, to draw freehand a scratch of a change on the Page.

[00796] One or more additional functionalities may, for example, be implemented in the Drawing / Notes IM, comprising the following. [00797] i. The user may hide or show all the notes added with the tools above by checking or unchecking a "Hide Notes" checkbox in the Drawing / Notes Management Panel.

[00798] ii. One or more additional tools may be implemented in the Drawing / Notes IM, each of which may be implemented analogously to an image editing tool of the Image IM. For example, a Draw Pencil Tool, a Draw Line Tool, a Draw Rectangle Tool, a Draw Ellipse Tool and a Draw Erase Tool may be implemented, for example, analogously to the corresponding image editing tools (i.e., in order, the Pencil Tool, the Line Tool, the Rectangle Tool, the Ellipse Tool and the Erase Tool) with the following adaptations: a) the user performs each action, mentioned in the description of the corresponding image editing tool, on the Page instead of on the Active Layer, and b) the Edit Image Panel, mentioned in the description of the corresponding image editing tool, is replaced with the Drawing / Notes Management Panel.

[00799] iii. When the Draw Line Tool described in the previous point "ii" is active, the user may, for example, select an arrow type (for example, from an "Arrow" drop-down menu of the Drawing / Notes Management Panel) so that the one or more lines drawn from the instant of the selection have a) no arrows, b) an arrow in the start point, c) an arrow in the end point or d) two arrows in both the start and the end points.

[00800] iv. An additional Draw Curved Line Tool may be implemented. When this tool is active, the user may, for example, move the Pointer to a point of the Page and then click the left button of the mouse (in a Mouse Supporting Medium) or tap the touch screen (in a Touch Screen Supporting Medium) so as to record the point as the first point of a curved line. After the first point is recorded, the user may perform the analogous action one or more times so as to record one or more additional points of the curved line. Finally, the user may click an "Add Line" button in the Drawing / Notes Management Panel so as to draw a smooth curved line that passes through the recorded points.

[00801] An example of usage of the Drawing / Notes IM is shown in the screenshot D.115 of Figure D-13. Before the screenshot was taken, the user performed the following steps:

[00802] i. Switching to the Drawing / Notes IM. As soon as it switched, the Drawing /

Notes Management Panel (D.117) popped-up with the following buttons (from left to right and top to bottom): a button to select the Tool for sticky- like notes (hereinafter "Sticky Notes Button"), a button to select the Tool to highlight text (hereinafter "Highlight Button"), a button to select the Draw Brush Tool (hereinafter "Draw Brush Button") , a button to select the Draw Line Tool, a button to select the Draw Rectangle Tool, a button to select the Draw Ellipse Tool, a button to select the Draw Erase Tool, a radio button to show and hide all the notes (analogous to the "Hide Notes" checkbox), and the "Brush Width" Spinner Text Field.

[00803] ii. Clicking the Highlight Button.

[00804] iii. Selecting the text D.118 with the Pointer. While the user was selecting the text, the GUI was converting its background color to purple as shown in the screenshot.

[00805] iv. Clicking the Draw Brush Button.

[00806] v. Changing the Foreground Color to black and the "Brush Width" value to 10.

[00807] vi. Drawing the circle D.121.

[00808] vii. Clicking the Sticky Notes Button.

[00809] viii. Selecting the First Image (analogously as the user does in the Handle IM). [00810] ix. Utilizing the tool for sticky- like notes to write the note D.120.

[00811] x. Selecting the highlighted text D.l 18.

[00812] xi. Using the tool for sticky-like notes to enter the text of the note D.119

[00813] xii. Moving the Pointer to the position D.116 in order to overlap the "Save" button.

[00814] In an embodiment of the present invention, an Objects IM may be implemented. When the user activates this EVI, it may manage non-HTML elements of the Page such as, for example, Videos, Sounds, Flash animations and Java embedded objects. The user may utilize at least one of a GUI tool and a GUI function so as to manage each specific type of non- HTML element.

[00815] In an embodiment of the present invention, a 3D IM may be implemented. In this IM, the GUI provides the user with at least one of a GUI tool and a GUI function so as to manage one or more three-dimensional (hereinafter "3D") objects in the Page. For example, a 3D object may be managed in a Canvas as shown in http ://www . spider l . or / .

[00816] In an embodiment of the present invention, one or more third-party IMs may be implemented. A third-party IM is an IM wherein all or part of the Web Resources, utilized to provide the user with at least one of a GUI tool and a GUI function of the IM, is loaded from a third-party server.

[00817] The screenshot D.122 of Figure D-14 is an example of usage of the publishing function in a SVSE Jelliphy Advanced implementation. It is assumed that before the screenshot was taken, the user performed the following steps:

[00818] i. Making the following modifications to the Page via at least one of a GUI tool and a GUI function: [00819] 1. Changing the color of the gradient of the Header to orange (D.133)

[00820] 2. Changing the text of the Header Title (D.129).

[00821] 3. Changing the font family, style and size of the Header Title and adding a shadow to it.

[00822] 4. Adding an image (D.128) after the Header Title.

[00823] 5. Changing the color, the background color and adding the borders with rounded corners to the Page Title (D.131).

[00824] 6. Resizing the First Image and changing its opacity (D.126).

[00825] 7. Changing the font family, the font style and the font weight of the First

Article.

[00826] 8. Changing the Position Property of the First Article to "absolute".

[00827] 9. Moving the First Article until it overlapped the First Image and resizing it so as to reach the dimensions in the screenshot (D.132).

[00828] 10. Adding the borders and the box shadow to the caption D.130.

[00829] 11. Adding the table D.124 and changing the properties of the table and its descendants so as to give it the appearance in the screenshot.

[00830] ii. Saving the modifications in the Modification File "final2.m9p".

[00831] iii. Restoring the original Appearance that the Page had before that the

modifications of the point "i" above was performed. [00832] iv. Opening the Publish Panel (D.125).

[00833] v. Checking the "Publish" checkbox (D.127) of the second row corresponding to the Modification File "final2.m9p". As checked the checkbox, the GUI applied the modifications of the point "i" to the Page as a preview of the publication.

[00834] After that the steps were performed, the user could click the "Publish / Unpublish" button (D.123) in order to make the changes visible to the Visitors.

[00835] In an embodiment of the present invention, the set of actions available to the user can, for example, further include adding at least one Page to the Site S. The user may, for example, add an empty Page to the Site in a SVSE implementation by means of an "Add Page" GUI function. For example, as soon as the user clicks an "Add Page" button of the Quickbar Panel, an empty Page (for example, with an empty "HEAD" element and an empty Body children of a "HTML" element) is displayed and the user may, for example, add one or more new elements to the Page by activating the Add EVI. As soon as the user reaches the desired result, it may, for example, click a "Save Page" button in the Quickbar Panel so as to send the Web Resources of the Page to the Site Web Server. As soon as the Site Web Server receives the Web Resources it may, for example, record said Web Resources in the resource directory of the user so that they are available to be recalled and displayed by the browser. A "Save As Duplicate Page" function may be also available to the user. The user may, for example, click a "Save As Duplicate Page" button in any Page of the Site (for example, after having modified the Page with the GUI) so as to send the Web Resources of the Page to the Site Web Server. The Web Resources of the Page are recorded in the resource directory of the user by the Site Web Server and they are accessible (for example, they are available to be utilized by a browser to display the duplicated Page) as the Web Resources of a new Page. In an embodiment, two functions analogous to the above-described "Add Page" and "Save As Duplicate Page" are implemented in a CVSE. In this embodiment, the Web Resources of the Page are sent by the user to the VSE Web Server instead of to the Site Web Server (to be stored, for example, in the resource directory of the user by the VSE Web Server), so that they are available to be recalled (for example, in order to display the Page in a browser) from the VSE Web Server. [00836] The present invention is not limited to embodiments described herein; reference should be had to the appended claims.