AU2002100469A4 - A thin-client web authoring system, web authoring method - Google Patents

Description

AUSTRALIA

Patents Act 1990 COMALTECH LIMITED COMPLETE SPECIFICATION INNOVATION PATENT Invention Title: Thin-client web authoring system, web authoring method The following statement is a full description of this invention including the best method of performing it known to us:- Title A Thin-Client Web Authoring System, Web Authoring Method Technical Field Thin-client/server computing separates the user interface from the place a software application executes. The bulk of the application is processed entirely on the server, while a user's PC, or thin-client terminal, displays only the graphical results of using the application. The software and hardware requirements on the user side are minimal and therefore considered a "thin" client.

Web authoring refers to the use of browsers to drive composition software to create or edit documents, such as the pages of an Internet site (web pages).

Background to the Invention 'Point and Click' or 'Drag and Drop' is a popular function in today's composition software, for instance in Microsoft Word, Microsoft Publisher and Lotus Notes all employ it to move and change items displayed on the user's monitor. However, to date such functionality has only been available in software where a specific local client of application has been installed. For instance, a number of Internet site creation tools require a thick client to be downloaded, such as Microsoft Frontpage and Net Objects Fusion. This allows higher functionality than browser-based tools, but the Internet site development tools become machine specific. An alternative approach requires large applets to be downloaded, which slow the applications down.

Summary of the Invention The invention is a thin-client web authoring system for composing the pages of an Internet site, the system comprising: A computer on which a browser is installed to view a web page comprising objects defined by parameters. The web page is stored on a server-side database, and passed to the browser for rendering, in the form of JavaScript and Dynamic Hypertext Mark-Up Language (DHTML) elements, when requested. When the computer is operated by a user to adjust the displayed object, the browser automatically interacts with the JavaScript and DHTML to update the position parameters in the DHTML.

3 The system extends 'Drag and Drop' functionality to composition software which is driven via a web browser. It may provide a fully webenabled set of web authoring, WAP authoring and e-commerce modules where information is held in a series of integrated Lotus Domino databases and where this information can be manipulated remotely via a web browser.

The system may provide an integrated rich text editor to allow changing of text types. The system may also provide an integrated colour palette to allow rapid design of a web page by providing choice of colours for components on the page.

The system may also provide integrated menus such as a Comaltech ActiveMap for a more effective and consistent navigational experience for a user.

The system may further provide a centralised image library to save time and disk space.

In another aspect the invention is a method of authoring a web page, including one or more visual objects specified by parameters, and stored on a server-side database, the method comprising the steps of: Passing a web page definition to the browser for rendering, in the form of JavaScript and DHTML elements.

Rendering the web page, including the objects, on the computer.

Operating the computer to adjust a displayed object.

Automatically interacting the browser with the JavaScript and DHTML to update the parameters in the DHTML.

Once the object is moved or adjusted to the users satisfaction, the new parameters are saved, for instance by clicking on a 'Freeze positions' button to cause them to be posted back to the server-side database.

In a further aspect the invention is a web page definition, for rendering a web page including one or more visual objects specified by parameters, and stored in a server-side database. The definition comprising JavaScript and DHTNL which automatically interact with the browser when the displayed object is adjusted to update the parameters in the DHTML.

The DHTNIL uses <DIV> </DIV> element to define the objects style and to capture user input events. The style of each object is contained in the <DIV>element using attributes such as width, text-align and height. The keyboard and mouse event capturing aspect of each object is contained in the <DIV> element using events such as onkeydown, onfocus and ondragend.

The objects may include HotSpots, such as interactive, clickable images or text that hierarchical menus can attach to. ContentBlocks, such as areas of rich text that can also contain images. Images, such as .gifs, .jpeg and other Web image types. And Tickers, which mostly contain clickable news headlines.

Brief Description of Drawings An example of the invention will now be described with reference to the accompanying drawings, in which:- Fig. 1 is a block diagram of the web page authoring system.

Fig. 2 is a screenshot of the main screen of the web page authoring system.

Fig. 3 is a screenshot of a page preference edit screen.

Fig. 4 is a screenshot of an object edit screen.

Fig. 5 is a screenshot of an object edit screen.

Fig. 6 is a screenshot of an object edit screen.

Fig. 7 is a screenshot of an object edit screen.

Fig. 8 is a screenshot of the preview screen of the web page authoring system.

Fig. 9 is a screenshot of an object being edited.

Detailed Description of the Drawings Referring to Fig. 1, a computer 1 has installed on it the Microsoft Internet Explorer web browser 2, and has a link 3 to the Internet 4. Access to an Enterprise JavaBeans web server 5 via the Internet usually involves password authentication to validate connecting users. A Lotus domino database 6 is connected to the web server 5 to store web pages. The web pages are stored as a series of objects in a non-machine specific form. They are displayed on the browser 2 when requested. To do this the web server passes page information in the form of JavaScript and DHTVML elements.

The browser window 21, shown in Fig. 2, is modified from the standard browser window, to include a toolbar 22 which provides the user with the buttons Add 23, Change 24, Preview 25, My Favourites 26, Help 27 and Jump To 28. Buttons on the toolbar are provided with hierarchical popout menus.

A user can preview the published web page by clicking the Preview button 25. A preview screen is shown in Fig. 8.

The My Favourites button 26 lists pages that have been designated by the user for quick referencing.

The Help button 27 provides online help on how to use the system.

The Jump To button 28 allows the user to switch to other web pages which they have access to for editing.

The user can select to edit an existing web page or to create a new one.

If an existing web page 29 is selected, a query is sent to the database 6 to retrieve the JavaScript code and DHTML. This provides the user with a What You See Is What You Get (WYSIWYG) environment. The WYSIWYG environment is important from a user's perspective because it provides an exact representation on how the web page will be presented to other people when it is published. Otherwise, a blank screen is presented and the user can start to add objects to the web page 29.

Object characteristics include their positioning on the web page 29, size and data content. The position of the object on the web page is determined by an offset from the top left corner of the web browser window 21.

Objects can be created by clicking the Add button 23 and completing a web form that appears from the click. The web forms are depicted in Figs. 3 to 7. Once an object has been successfully constructed, the parameters of the form are saved on the database 6.

The system includes objects already built such as HotSpots, ContentBlocks, Images and Tickers. HotSpots include interactive, clickable images or text that allow a hierarchical menu to attach to it. ContentBlocks include areas of rich text that can also contain images. Images include GIF, JPEG and other image formats. Tickers include scrolling headlines which allow for an individual headline to be clickable for linking to the full document.

In Fig. 2, the HotSpot objects are the News_header object 30, the Main_image object 36, the Welcome to fv object 37 and the Login object An Image object on the page is the 4circles object 32. ContentBlock objects included are the Special_Promotion object 33 and the Welcome object 34. A Ticker object on the page is the Homepage news_ticker object 31.

When editing the web page 29, all objects are indicated by a dotted rectangular boundary and have an associated handle, located on the bottom right of each object as a diagonal line with arrow heads at each end. Handles provide the object with the ability to be re-sized. This requires the user to click on the handle and drag their mouse until a suitable size is decided. As the user is dragging the handle, the object dynamically scales if it is an Image or HotSpot object, and if it is a ContentBlock or Ticker object, the text is automatically wrapped.

When the user wants to re-position an object on the web page, placing the mouse pointer over the object (not the handle) changes the mouse pointer to a cross with arrow aheads at each end. The user can then click and drag the object to an appropriate position on the web page 29.

When a user is satisfied with the adjustments they have made to the web page, data is transmitted back to the web server by clicking on Freeze position 37. A user may also want to undo changes they have made since their last save and this is done by clicking on Cancel position changes 38.

A user can change the characteristics of the web page as a whole. This is done by clicking on the Change button 24, which will produce a drop down menu and the item Page Preferences is listed. Once the user clicks on Page Preferences, a window such as Fig. 3 is produced.

A user can edit the characteristics of a HotSpot object either by double clicking the object on the web page itself such as the Newsheader object or by clicking on the Change button 24 and selecting the object from the HotSpot sub-menu, such as that shown in Fig. 4. A toolbar is provided with the buttons Save 50, Copy 51, Cancel 52 and Delete 53. Clicking on the Save button 50 returns the user to the screen in Fig. 2 with the changes made to the object. Clicking on the Copy button 51, creates a duplicate of the selected object. Clicking on the Cancel button 52, returns the user to the screen in Fig.

2 without modifying the object. Clicking the Delete button 53 removes the object from the web page.

A user can edit the characteristics of an Image object such as the 4circles object 32 similarly to the HotSpot objects. In this case the user is presented with a screen, see Fig. 5, that is able to display a thumbnail preview 60 of the image to be added to the web page. The image is selected by choosing an image in the drop down box 61. The drop down box 61 lists images that are stored in an image repository stored on the web server. The image repository permits users to upload new images when adding 23 a new Image object.

A user can edit the characteristics of a ContentBlock object such as the SpecialPromotion object 33, see Fig. 6, or a Ticker object, see Fig. 7, such as the Homepage_news_ticker object 31 in a manner similar to the way the HotSpot objects of Fig. 4 are edited.

The following is an extract of the DHTML and JavaScript used to construct a preview of the page shown in Fig. 8, containing all the objects that make up that page.

First, the JavaScript: <SCRIPT LANGUAGE= "JavaScript" var prevX; var prevY; var sizeX; var sizeY; var resize false; function setOffset( prevX window.event.offsetX; prevY window.event.offsetY; return false; function drag(div) if (resize) return; div.style.left div.style.pixelLeft window.event.offsetX prevX; if (div.style.pixelLeft 0) div.style.left 0; div.style.top div.style.pixelTop window.event.offsetY prevY; if (div.style.pixelTop 97) div.style.top 97; window.status "Left div.style.left Top (parseInt(replaceSubstring(div.style.top)) 97); function startSize(s) resize true; div docurnentall(s); sizeX div. style. pixelLeft; sizeY =div.style pixelTop;window.status "'Left div.style.left Top (pars elnt(re place Subs tring(div. style. top)) 97) "1 Width div. style. width Height div. style. height;

I

function resizeDiv(s){ resize true; div =document.all var width =window.event~x sizeX 7; var height =window.event.y sizeY 7; div. style. pixelWidth =width; div. style. pixelHeight =height; winidow.status "Left div.style.left Top (parselnt(div.style. top) 97) Width div.style.width Height= (parselnt(div. style. height) sizeY); function setPosition(div){ var hidden documnent. all ("UNID divid); hiddenvalue div.style.left div.style.top div.style.width div. style. height; 1 function setDivPosition(s){ var div document all(s); var hidden docurnent.all(UUMD div.id); hiddenvalue div.style.left div.style.top div.style.width div. style. height; resize false; j function key(div){ if (window, event. keycode= 100){ div.style.left div. style. pixelLeft 1; 351 else if (window. event. keycode n104){ div.style.top div.style.pixelTop 1; else if (window.event.keyCode= =102){ div.style.left div.style.pixelLeft 1; else if (window.event.keyCode= =98){ div.style.top div.style.pixelTop 1; if (div.style.pixelLeft 0) div.style.left 0; if (div.style.pixelTop 97) div.style.top 97; window.status "Left div.style.left Top (parseInt(replaceSubstring(div.style.top)) 97); setPosition(div); return false; function replaceSubstring(r, s, t) var i -1; var j 0; var str var k 0; while (true) k r.indexOf(s, i+1); if (k str r.substring(((i 0) 0 r.length); break; else str r.substring[i, k) t; i k+ 1; return str; Next, the DHTML element. This represents the ContentBlock 90 in Fig.

9. Note the style attributes denoting the position (eg width:300;) and the i forwarding on of mouse and keyboard event capturing (eg <DIV STYLE "width: 300;text-aligii:justify;height: 15 ;zindex: 1;cursor:mnovelleft:200 ;position:absolute;top: 197;padding:2;" 1500' 1"

CLASS

'Left this.style.left Top (parselnt(replaceSubstring(this.style.top)) 97) Width this.style.width Height this.style. height;" ID"GBAEGAF77A298C78GA256A6A0043DA77" ondragstart "setOffset(this)" ondragend ''setPosition(this) ;this.style.zIndex 1" onbiur "window. status ='Drag Drop"' Yv/de signer. nsf/ContentBlock?openAgent&unid CBAE6AF 7 7A2 98G 78CA2 56A6A0043DA77"' is an example of a ContentBlock. The text can contain rich text such as <STRONG> boldc/STRONG> or underline The ContentBlock has an absolute position on the page. In this case 200 pixels from the left, 100 pixels from the top and is 300 pixels wide and 150 pixels high. IMG STYLE "width: 10O0;height: 100 ;left:;position:absolute;top:0;" SRC "/images/null.gif' SUPPRESS> <INMG STYLE ="width: 15 ;z-index: 101;Height: 15 ;left: 100%;position:absolute;top: 100%;"

SRC

'Vimages/i/handle.gif' ID= "HANDLECBAE6AF77A298C 78CA25 6A6A0043DA77"

SUPPRESS

6A6A0043DA77')" >

NAME

"HANDLECBAE6AF77A298C78CA256A6A0043DA 7 7" ondrag "resizefiv ('CBAE6AF77A298C 78CA256A6A0043DA77')">

</DIV>

All of this DHTML is sent from the server-side database to the browser to render the page shown in Fig. 9. It allows the objects in the web page to listen and respond to user input such as from a mouse or keyboard without the need to communicate with the web server.

The user may use the mouse to grab the handle 91 and change the size of the object 90. As soon as the mouse stops moving the browser interacts with the JavaScript and DHTML to update the size information in the

DHTML.

If the user is satisfied with the change and wishes to save the new size, a message containing the following new size information is sent back from the browser to the server-side database: <INPUT VALUE="443,479,198,-9" TYPE= "hidden" NAME="UNID E8DCFD663193243CCA256A2300010009" This HTML contains the new position and size information which is to be input and the name which identifies the document in the database that contains the definition information for ContentBlock 90. The element is part of a form that is submitted to the database 6 via the web server 3 using the POST method which reads the data from the DHTML context, parses it and writes it to the appropriate document in the database. The form is submitted when the user freezes 37 the web page. This ensures that the data about the web page remains correct and current. Since the system is centralised, a user can edit the web page knowing they are editing the correct version of it. The 'top' offset is itself offset by a distance equal to the navigation images at the top of the form. This additional offset is removed by the post software.

It will be appreciated by persons skilled in the art that numerous variations and/or modifications may be made to the invention as shown in the specific embodiments without departing from the spirit or scope of the invention as broadly described. The present embodiments are, therefore, to be considered in all respects as illustrative and not restrictive.

Claims (4)

1. A thin-client web authoring system for composing a web page, the system comprising: a computer on which a browser is installed to render the web page; a server(-side database) on which the web page is stored and transmitted, in the form of JavaScript and Dynamic Hypertext Mark-Up Language (DHTML) elements, to the browser to be rendered; where the rendered web page includes at least one object, that once adjusted as required, automatically interacts with the JavaScript and DHTML to update the object's parameters in the DHTML and then transmitted to the server(-side database) for updated storage.

2. A system according to claim 1, where the system further comprises a fully web-enabled set of web authoring, WAP authoring and e-commerce modules that are held in a series of integrated Lotus Domino databases and can be manipulated remotely via a web browser.

3. A method of authoring a web page having one or more visual objects defined by parameters and stored on a server(-side database), the method comprising the steps of: transmitting the web page definition in the form of JavaScript and Dynamic Hypertext Mark-Up Language (DHTML) elements; rendering the web page on a web browser installed on a computer; operating the computer to adjust an object; once adjusted as required, automatically interacting the browser with the JavaScript and DHTML to update the object's parameters in the DHTML; storing the adjusted object's updated parameters by transmitting the parameters to the server(-side database).

4. A web page definition, for rendering a web page including one or more visual objects specified by parameters, and stored in a server(-side database), where the definition comprises JavaScript and Dynamic Hypertext Mark-Up Language (DHTML) which automatically interacts with the browser when the displayed object is adjusted to update the object's parameters on the DHTML. A web page definition according to claim 4, where the DHTML uses <DIV> </DIV> element to specify the objects style using attributes such as width, text-align and height contained in the <DIV> element, and to capture 13 user mouse and keyboard input events using events such as onkeydown, onfocus and ondragend contained in the <DIV> element. Dated this seventh day of June 2002 Comaltech Limited Patent Attorneys for the Applicant: F B RICE CO