WO2002103552A1

WO2002103552A1 - User interface for constructing web pages to build a website

Info

Publication number: WO2002103552A1
Application number: PCT/AU2002/000795
Authority: WO
Inventors: Martin Andrew Crampton
Original assignee: Newbrain Technologies Pty Ltd
Priority date: 2001-06-19
Filing date: 2002-06-18
Publication date: 2002-12-27
Also published as: AUPR580801A0

Abstract

A user interface for constructing web pages to build a website, including: a construction window, the construction window being a window that provides a user with an interface to create a web page and/or modify an existing web page; and a preview window, the preview window being a window which shows a view of the web page as it will be seen when placed on the Internet; wherein the preview window and the construction window can be viewed simultaneously from the user interface so that as the user makes alterations to the web page through the construction window the altered web page is immediately presented in the preview window thereby providing instantaneous feedback on the results of any alterations.

Description

USER INTERFACE FOR CONSTRUCTING WEB PAGES TO BUILD A WEBSITE

Field of the Invention

The invention relates to the construction of web pages. The invention relates particularly but not exclusively to a user interface and corresponding method of using the interface, the user interface allowing the user to construct web pages to build a website.

Background of the Invention

The number of web pages on the Internet has increased exponentially in recent years. There are now billions of pages on the Internet, with the number steadily growing. The desire to write new pages together with an increasing need to update the look of sites already on the Internet has created a demand for web design tools that are user friendly.

During the initial years of the Internet the programming of web pages was confined to those who were familiar with HMTL or other similar programming languages. As the capability of the programming languages increased to provide better functionality, the programming aspects became more complex. This complexity, reflected to some extent by complicated strings of code such as cookies and Java applets, made it even harder for those with no or a basic knowledge of web based programming languages to author web pages.

Web pages have also become more elaborate, with graphic designers and other visual artists becoming involved to improve their aesthetic appeal. These people were seldom fluent in computer languages; hence many have had to learn the appropriate code so that they could put their visual ideas into effect.

To assist people with limited or no knowledge of web-based computer programming code, a variety of web construction tools have been developed. These are typically sold as software packages, the software allowing a user to construct a web page by adding features such as icons to a base template. When the user has added the desired icons and written their text they may then save their customised page as an HTML file for later uploading onto the Internet. Although the user may see what icons they are adding and where these icons are being added it is difficult for them to have an overall concept of how the web page or web site will appear to other users when posted on the Internet. The exact positioning of features such as pictures and icons can be difficult to estimate and often a user may find that once uploaded onto the Internet the site looks different from what they had envisaged. Some of these differences may be subtle in relation to colour schemes, icon positioning or the wrapping around of text. However, with the number of web pages on the Internet it is now more important than ever for web page authors to get the exact "look" they desire to artistically differentiate their page from others.

The object of the present invention is to overcome or alleviate one or more problems present in the prior art.

Summary of Invention

In a first aspect the present invention provides a user interface for constructing web pages to build a website, including: a construction window, the construction window being a window that provides a user with an interface to create a web page and/or modify an existing web page; and a preview window, the preview window being a window which shows a view of the web page as it will be seen when placed on the Internet; wherein the preview window and the construction window can be viewed simultaneously from the user interface so that as the user makes alterations to the web page through the construction window the altered web page is immediately presented in the preview window thereby providing instantaneous feedback on the results of any alterations.

An advantage of the simultaneous provision of both the construction window and preview window is that the user is constantly able to see how the web page they are constructing will look. This allows exact placement of icons, text and any other information onto the page in the precise position required by the user.

The construction window may assist the user to build a web page using any suitable method. A particularly suitable method is by having the construction window prompt the user to construct the web page on a step-by-step basis. Another particularly suitable method is by allowing the user to enter HTML code to build the web page.

Preferably, the user interface is provided as a website allowing users to build a web page online, the web page being saved directly onto the Internet. This allows for immediate publication of the web page or any changes. The user interface may also be provided as software to be loaded or downloaded onto the user's computer.

To assist in creating a web site the user interface may, through the construction window, create hyperlinks between two or more of the web pages created to form the website. This creation of hyperlinks may be done in any suitable manner. In one particularly preferred form of the invention the creation of hyperlinks between pages is done automatically, the creation being dependant on a pre-determined hierarchy established by the user.

The user interface may allow the user, through the construction window, to create hyperlinks between one or more web pages created and another web site on the Internet. Hyperlinks may also be created between one or more web pages created and a database associated with the user wherein attributes of the database are tailored via the interface. This creation of hyperlinks may be done automatically, the creation being dependant on a pre-determined hierarchy established by the user via this tool.

In an alternative or additional form of the invention the user interface provides for the web site under construction to be saved directly onto the Internet wherein the preview window gives a simultaneous view of the page from its saved location. This has the advantage of making the web site under construction immediately accessible to its intended public (or other audience) via the Internet.

In another preferred form the construction window allows the user to upload graphics and/or fonts for use on the web page. Additionally or alternatively, the construction window may allow the user to import content for placement on the web page.

In a second aspect, the present invention provides a method of constructing a web page to build a website, the method including the steps : providing a construction window, the construction window being a window that provides an interface to create a web page and/or modify an existing web page; and simultaneously providing a preview window, the preview window being a window which shows a view of the web page as it will be seen when placed on the internet whereby any alterations made to the web page by the user are immediately presented in the preview window thereby providing instantaneous feedback on the results of any alterations.

The construction window may assist the user to build the web page in any suitable manner. The construction window may prompt the user to construct the web page on a step-by-step basis. Additionally or alternatively, the construction window may allow the user to enter HTML code to build the website or make additions (or alterations) to the website and/or one or more of the web pages.

Preferably, the web page is built online, the web page being saved directly onto the Internet. This has the advantage of making the web page immediately accessible by its intended public (or other audience) via the Internet. The method may involve the user, through the construction window, creating hyperlinks between one or more of the web pages created to form the website. The creation of hyperlinks may be done in any suitable manner. In one form of the invention the creation of hyperlinks between web pages is done automatically, the creation being dependant on a pre-determined hierarchy established by the user via this tool. Hyperlinks may also be created between one or more databases nominated by the user. In one preferred form of the invention, construction window can be used to modify/create one or more databases.

The method of the invention may also allow the user to upload graphics and/or fonts for use on the web page. Additionally or alternatively, the construction window may allow the user to import content for placement on the web page.

Additionally or alternatively the method may allow the user to create hyperlinks between one or more web pages created and another web site on the Internet. This creation can be done automatically according to a pre-determined hierarchy established by the user via this tool.

The method may also provide for the web site under construction to be saved directly onto the Internet with the preview window giving a simultaneous view of the page from its saved location. This makes the web site immediately accessible by its intended public (or other audience) via the Internet.

Brief Description of Drawings

The invention will hereinafter be described in greater detail by reference to the attached drawings, which illustrate example forms of the invention. It is to be understood that the particularity of the drawings do not supersede the generality of the preceding description of the invention. In the drawings :

Figure 1 - A screen capture showing a login page for an embodiment of the present invention.

Figure 2 - A screen capture of a menu screen giving access to the user interface of the present invention.

Figure 3 - A screen capture of the user interface and the preview window of the present invention. Figure 4 - A screen capture of a part of the user interface where the user can change their web page layout.

Figure 5 - A screen capture of a part of the user interface where the user can add logos and headers to the web page under construction.

Figure 6 - A screen capture of a view of the user interface where the user can put their name and address onto the website under construction.

Figure 7 - A screen capture showing a menu where the user can choose the shape of any buttons placed on the web page.

Figure 8 - A screen capture showing an interface that allows the user to allocate a name to each button.

Figure 9 - A screen capture showing an interface that allows for movement of buttons around the web page being constructed..

Figure 10 - A sample template that provides for the addition of web page content.

Figure 11 - A screen capture of an interface that allows the user to transfer their settings to other web sites and/or pages.

Detailed Description

The present invention provides a "wizard"-led construction tool which provides the user with a user interface including a preview window, this preview window provides the user with instantaneous feedback on the results of any alterations which are made to the web page under construction.

In one embodiment of the invention both the preview and the construction window are provided as browser windows. Having the two browser windows open simultaneously provides a simultaneous view of both construction window and the preview window. When the construction window is placed in only part of the viewing screen this allows the user to view the construction process as it actually occurs on the Internet. Each addition or modification to the web page is an immediate action allowing the change to been seen instantaneously by the user. This provides the user with a view of their web page in real time as it is built.

In one form of the invention, the web page or web site is saved directly onto the Internet (without addition or modification). This enables the live Website to be viewed immediately by its intended audience via the Internet.

The construction window may provide the user with step-by-step prompts that allow construction of the web page. This allows users without knowledge of HTML to use the invention even more powerfully. Where the step-by-step prompts are used the user may start at any step in the construction process which is suitable to their needs. If the user is sufficiently advanced, they may choose to proceed directly to an advance step in the building process.

A further aspect of the invention is the ability of the user interface to provide content creation and management functions. The user interface may be utilised to link web pages and transfer selected content from one web page and/or database to one or a number of other selected web pages. This provides for distribution of content such as news, people and products to associate or "child" websites or search engines. The user interface can be used to link multiple websites, with a hierarchy being established such that one site ("the parent") can transfer its parameters ("user preferences") to selected ("child") sites. This avoids the need for constructing each web site from a blank. A common template can be developed such that each child site has the same parameters as its parent or alternatively it can have a slight variation of its parent with some common features. Each 'child' site then has the capability of utilising the invention to proceed in developing its own website via modifications and additions. Multiple icons or logos can be uploaded by the user interface and placed in selected areas on the web page under construction. This allows a user to provide associative branding within the website. Users may also be given the option of loading their own graphic button styles and font types. Users may also be able to add their own menu button names allowing information on the web site to be categorised according to one of the menu buttons.

The invention may additionally provide member registration and management features. The user interface may provide for user registration before access is granted to all the features of the interface. There may also be provision for registration of a group of members, each member of that group gaining access to the user interface.

The invention may be further described with reference to a further specific embodiment of the invention guiding the user through some of the interactive features of the invention.

This invention allows the user to see a website being built before their very eyes. In this embodiment the invention is a website generator/designer which takes a user through simple step-by-step procedures without the need for specialist computer skills.

The user can be enabled to change colours and fonts and add pictures and logos to match their own unique style. Along with these features, the user can choose from Website "menu buttons" that can linkto innumerable information categories such as news, services, profile and property lists. Additionally, the user also has the capability to create "buttons" that include links to database functionality. The list of categories is endless with the user being able to create as many categories as desired.

The invention provides a user with control over the website construction process with the freedom and flexibility to change the overall design or features (the 'look and feel') at anytime you like. This allows a user to construct a website in their own style with a professional finish. The following steps illustrate how a user may be guided through an embodiment of the invention to construct a web site.

To get started the user should follow the preceding steps which take them to a screen having the preview window. A screen capture of the login entry is shown in Figure 1 , this shows a screen which a user will see prior to accessing the interface of the present invention.

• Log on to interface and click on "Member Services". Enter the username and password.

• Scroll down the page of Member Services to "Create Your Website" section.

Press "GO". • Press "Start Wizard" on the interface menu.

• Minimize the Wizard interface window as desired. The user is then able to view and make changes to the website as desired.

In one form of the invention the user is required to register to use the interface. This can be achieved by clicking on an icon "Register as a new member" in the login menu of "Member Services", this member's services screen is shown in Figure 2.

Figure 3 illustrates a starting screen for the interface. Another screen that allows a user to move various parts of the web page under construction around the page is shown in figure 4

A screen capture of a screen that allows for the addition and position of a logo is shown in Figure 5. The logo should ideally be pre-located in a specific file. Clicking on the "Browse" key enables you to select the file corresponding to the logo which the user wishes to use on the website.

If the user wishes to view all logos/images in a file they may click on the "View Menu" button at the top of the file screen and then choose a "Thumbnails" option and select the file. This "Thumbnails" feature is possible with Microsoft Windows 98 and later versions.

When the user has chosen the image they wish to use on the site the following procedure can be used -

• Once you click on the file name, it will automatically be transferred into the "locate and add your logo" box.

• Click "Add Logo". • The logo can then be viewed by clicking "View" next to the "Add Logo" button.

• Click "Delete current logo" next to the "Add Logo" button to delete the logo you have selected and choose an alternative logo.

The user may also change the size of the logo if desired. The user can use the preview window to assess whether or not the logo has the right look for the page being created. Background images can also be uploaded in a similar manner behind the various parts of the screen.

Users may also locate and add their logos to sub-websites using the logo as an association logo: This feature can be used by one appropriately authorized site to propagate a logo to associated sites. The beauty of this feature is that the association's logo can appear, for example, at the bottom of the page, whilst the subordinate or member office can have their logo appear at the top of the page.

The logo can be placed anywhere on the website. The user has the choice of placing your logo on the top right, left or centre of your home page. To do this the user can simply select the logo from the pull-down menu at right. The user can then move the logo around, pressing the apply key allows positioning as desired. The user may also change the colour of various parts of the web page under construction. A screen allowing the user to change the colour of various text elements as well as allowing the insertion of name and address on the site under construction is shown in Figure 6. Where the user adds their name and address together with fonts and colors.they are presented with various font styles and sizes allowing selection of the appropriate look to meet the needs of the user. Background colors for the web site or web page can also be selected in a similar manner.

To change the page color the user can point and click on a color on the swatch headed "Page Color", this will automatically change the background color of the web site or a particular web page. The Website "Banner" colors and the color around a selected button can also be changed in a similar manner.

The user can also use a similar method to position buttons on the web page they are constructing. A screen capture of an embodiment of the interface where the user can add buttons to the website is shown in Figure 7. The user can choose to have a button displayed on a particular web page in various ways: By using the scroll bar on the right hand edge the user can select the positioning and see a range of selections, when apply is chosen the button is then applied to the web page under construction. A view of the interface that allows a user to allocate text to each button is shown in Figure 8. A user may also utilize the interface in Figure 9 to move the buttons about the web page under construction. The user can simultaneously view the preview window giving an instantaneous view of the web page under construction.

A user may then select the button style they wish to adopt. The buttons can also be used to link to other pages such as "About Us" and "Contact Us". The user may further select their button colour. The user can click on the appropriate button colour to make the appropriate change.

A user may utilise the interface to divide their web page into a number of content areas. This can automatically link a chosen web page to other web pages or web sites. Alternatively, the present invention can allocate links to specific database information/content areas. There is an almost infinite number of content areas available, the following providing a sample - Home - This is your home page where your logo and company is displayed along with buttons linking users to the following pages you can choose from.

About Us - Create a page informing the public about what you company does and achieves.

Profile - List the profile of your company.

Network - Keep up-to-date information on other companies within your network.

People - Inform the public about your employers and employees.

Services - List your products and services for all to see on the Internet!

Properties - Search for a property for sale or lease.

Livestock - List all livestock for current sale.

Clearing Sales - Inform the public on all clearing sale items.

Recommended Services - Promote others by recommending their services!

Garage Sales - Looking to promote garage sales? Here's how!

Property List - List all current properties for sale or lease.

Inspection Times - Inform the public about upcoming property inspection times.

News - Anything the public or your staff should know or might be interested in?

Events - List upcoming events.

Testimonials - Inform the public on what others have said about your company. Training - Inform staff of training times and details.

Contact Us - Provide your business hours, address and telephone details and email addresses for your staff and the public.

Where the content areas have been predefined the user can merely click the relevant content area they wish the page to be associated with. For example the web site can be divided into the content areas "About us", "properties", "garage sales", "news" and "events".

The web site can also be created using templates with the information entered into the template being used to create a number of pages which have uniform characteristics. A sample template is shown in Figure 10, in this figure:

• "Heading" refers to the title of your page

• "Sub Heading" refers to the sub title of your page

• "Abstract" is a brief summary of your page

• "Author" is the person publishing the page

• "Display Date" refers to the date you would like your page to be displayed on the Internet

• "End Display Date" refers to the date you would like your page taken off the Internet

• "Paragraph Text" is where you place what you want to be said on the page • Image filename(s) 1, 2, & 3 allows you to place up to 3 images on the page. Just click on the "Browse" key to download your image file(s)

Each category may also provide additional associated features. For example if the user has included "Property search" on the website then properties can be found either by using the "Quick Property Search" or the "Advanced Search". "Quick Property Search" allows a user to find a greater range of properties, whereas, "Advanced Search" provides for narrowing down of the search by helping you find a property that meets with specific requirements. Just click "GO" after filling in the selected criteria. The "E-Updates" feature allows customers to ask for property updates following a search.

Where the user has selected the livestock category then this may also have additional search options associated with it. For example, to search for livestock simply select the criteria at the appropriate point and click "GO". The search can be narrowed to by filling in the categories of the second part of the first box on the screen. The "E-Updates" feature allows customers to ask for livestock updates following a search.

A further function of the interface allows an appropriately authorised party to determine the amount of commonality between their website and subordinate websites. The degree of commonality can be selected by nominating which features the user wishes to remain common between the sites. A sample of the screen display is shown in Figure 11 , here the user can select which features will be common to subordinate sites.

The preview window provides the user with overall control over the process of developing a web site. The size of the preview and Wizard interface window can be changed by clicking and dragging the corners of their window browsers. The interface window can also be "dragged" around and out of the way of the user.

It is to be understood that various alterations, additions and/or modifications may be made to the parts previously described without departing from the ambit of the invention.

Claims

Claims :

1. A user interface for constructing web pages to build a website, including: (a) a construction window, the construction window being a window that provides a user with an interface to create a web page and/or modify an existing web page; and

(b) a preview window, the preview window being a window which shows a view of the web page as it will be seen when placed on the Internet; wherein the preview window and the construction window can be viewed simultaneously from the user interface so that as the user makes alterations to the web page through the construction window the altered web page is immediately presented in the preview window thereby providing instantaneous feedback on the results of any alterations.

2. A user interface according to claim 1 wherein the construction window prompts the user to construct the web page on a step-by-step basis.

3. A user interface according to claim 1 wherein the construction window allows the user to enter HTML code to build the web page.

4. A user interface according to any one of the preceding claims wherein the user interface is provided as a website allowing users to build a web page online, the web page being saved directly onto the Internet to allow for immediate publication of any changes.

5. A user interface according to any one of the preceding claims wherein the user may, through the construction window, create hyperlinks between two or more of the web pages created to form the website.

6. A user interface according to claim 5 wherein the creation of hyperlinks between pages is done automatically, the creation being dependant on a predetermined hierarchy established by the user.

7. A user interface according any one of the preceding claims wherein the user may, through the construction window, create hyperlinks between one or more web pages created and one or more of :

(a) another web site on the Internet; and (b) a database associated with the user wherein attributes of the database are tailored via the interface.

8. A user interface according to claim 7 wherein the creation of hyperlinks is done automatically, the creation being dependant on a pre-determined hierarchy established by the user.

9. A user interface according to any preceding claim wherein the web site under construction is saved directly onto the Internet wherein the preview window gives a simultaneous view of the page from its saved location.

10. A user interface according to any one of the preceding claims wherein the construction window allows the user to upload graphics and/or fonts for use on the web page.

11. A user interface according to any one of the preceding claims wherein the construction window allows the user to import content for placement on the web page.

12. A method of constructing a web page to build a website, the method including the steps of:

(a) providing a construction window, the construction window being a window that provides an interface to create a web page and/or modify an existing web page; and

(b) simultaneously providing a preview window, the preview window being a window which shows a view of the web page as it will be seen when placed on the Internet whereby any alterations made to the web page by the user are immediately presented in the preview window thereby providing instantaneous feedback on the results of any alterations.

13. A method of constructing a web page according to claim 12 wherein the construction window prompts the user to construct the web page on a step-by- step basis.

14. A method of constructing a web page according to claim 12 wherein the construction window allows the user to enter HTML code to build or make additions to the website and/or one or more of the web pages.

15. A method of constructing a web page according to any one of claims 12 to 14 wherein the website is built online, the website being saved directly onto the Internet.

16. A method of constructing a web page according to any one of claims 12 to 15 wherein the user may, through the construction window, create hyperlinks between one or more of the web pages created to form the website.

17. A method of constructing a web page according to any one of claims 12 to 16 wherein the creation of hyperlinks between web pages is done automatically, the creation being dependant on a pre-determined hierarchy established by the user.

18. A method of constructing a web page according to any one of claims 12 to 17 wherein the user may, through the construction window, create hyperlinks to one or more databases.

19. A method of constructing a web page according to any one of claims 12 to 18 wherein the construction window allows the user to upload graphics and/or fonts for use on the web page.

20. A method of constructing a web page according to any one of claims 12 to 19 wherein the construction window allows the user to import content for placement on the web page.

21. A method of constructing a web page according any one of claims 12 to 20 wherein the user may, through the construction window, create hyperlinks between one or more web pages created and another web site on the Internet.

22. A method of constructing a web page according to claim 21 wherein the creation of hyperlinks is done automatically, the creation being dependant on a pre-determined hierarchy established by the user.

23. A method of constructing a web page according to any one of claims 12 to 22 wherein the web site under construction is saved directly onto the Internet wherein the preview window gives a simultaneous view of the page from its saved location.