webwireframes user guide.amir/webwireframes_user_guide.pdfwebwireframes user guide. this guide...

WebWireframes User Guide. This guide explains how to install the WebWireframes software and how to use it to quickly model a web application. As part of Study Guide 3 you will be asked to use it to model a web application for an Estate Agents’s web site. However for the purpose of this guide I would like you to consider a simple web site that came about from a conversation with a friend. We were discussing the delights of and places of local interest in and around Milton Keynes and ways in which we could represent and display these locations.

We then considered the information we wished to convey about the locations. Apart from the obvious name and geographical location we considered adding a photograph, brief history, and related interesting trivia.

A brief discussion of the requirements produced the following tree structure for the web application.

InterestingPlace 3

InterestingPlace 2

InterestingPlace 1

Home Page

Terms &ConditionsContacts

InterestingPlace 5 History of

InterestingPlace 6

InterestingPlace 4

InterestingPlace 6

PrivacyMenu

Fig 1 Part of a hierarchical chart representing Interesting Places in my Local Area

Wireframing offers two crucial benefits at this stage of design. First, it provides a model of the application that the client can use (or click through) to verify the business processes as they work through the the application. Second, it is very quick, so much so that some developers create a wireframe during their initial meeting with their Client.

Installing WebWireframes In order to use the application it must first be installed.

Download the file “WireframesALL.zip” from the TT282 desktop web site (http://desktop.open.ac.uk/tt282/) and extract the three files to a temporary location.

Run the SETUP.EXE program to start the installation process. When you see the Welcome window, Figure 2, click the OK button.

Figure 2 WebWireframes installation – welcome window

The next window to appear, Figure 3, asks for confirmation of the location to install the program. The default location will be in the Program Files directory of your default disk drive. Accept this unless you have a specific reason not too. (Click the “Change Directory” button to choose another location.)

Make sure to keep a note of where you install the program so that you can find various files that are saved by the program.

Figure 3 WebWireframes installation – change directory window

The Choose Program Group window, Figure 4, allows you to select the Start menu location for the program. The default group is the one created for the other programs associated with the Web Applications Development Certificate. Select the group and click the Continue button.

Figure 4 WebWireframes installation – choose program group window

The program includes a number of Microsoft components to display the help files. These files have been updated for Windows 2000 and Windows XP. If you see the Version Conflict window, Figure 5, make sure you click the YES button to keep your existing versions. This window may pop-up several times during installation. Always select the YES button.

Figure 5 WebWireframes installation – version conflict window

The final window, Figure 6, will confirm that the program has been successfully installed.

Figure 6 WebWireframes installation – setup complete window

Help Files The program is provided with on-line help, accessible from the HELP menu of the program.

Starting the program You can start the program from the Windows START menu. Select the Programs option and then look for the Web Application Development group. If you haven’t re-sorted your menu options it should be at the bottom of the options. Highlight this option with your cursor and the WebWireframes option should appear at the right. Click the option to start the program when, after the splash screen, you should see the following:

Figure 7 WebWireframes Main Window on Start up

As well as the usual application menu bar there are 4 distinct areas or panes within the WebWireframes Window. These are:

Wireframe Pages: Contains a list, as a tree view, of all the defined Pages. The name at the top of the list is that of the application.

A page in a Wireframe represents a single screen of output for a web application. The content may be static (derived from a file) or dynamic (created by a server-side script). Each page carries a description of its function (or responsibilities) within the application, together with a list of all the Exit-Points from the page.

Page Description: Contains a description of the function of the selected page

Page Exits: Contains a list of all Exit-Points (hyperlinks or form buttons) from the selected page

selected page.

An Exit-Point is the means by which a user traverses from one page to another within a web application. Exit-Points are typically created by means of hyperlinks to other pages, or as buttons associated with a form, but may also represent actions initiated within a script, such as a redirect to another page or script.

Nested Pages: Contains a list of all Nested Pages.

A nested page is the means by which all the Exit-Points of one page can be associated with another page. Suppose an application required that every screen display the same navigation menu. This menu could be created as a separate page named "navigation", with all the hyperlinks of the navigation menu defined as Exit-Points. The page "navigation" would then be added as a Nested Page to every other page of the Wireframe.

Constructing a Wireframe Having installed the WebWireframes tool let’s now use it to construct a Wireframe based upon the Milton Keynes places of interest web site.

Firstly to create a new Wireframe choose File then New from the Menu Bar.

Figure 8 File, New Menu

This will provide a dialog box in which you can enter the project name: in my case I am using Interesting_Places

Figure 9 Entering the Project Name

Creating a new Wireframe automatically creates the first page. On completing this Dialog you will be asked to provide the name of your Home Page: the default is home and for our purposes this will be acceptable.

Figure 10 Default Home Page Name

The newly created page appears as entry in Wireframes Pages Tree-view; you may have to double click on the project name or + next to the project name to expand the tree. A default entry for home in the Page Description Pane is also given. For the moment I will accept the default Page Description associated with the home page.

Figure 11 The home page of the wireframe

You should also see that further menu options, which were greyed out when the application started, are now available.

The Window Caption bar shows that the Window is untitled.

Please note, that the WebWireframes tool does not have an auto save facility so I recommend saving your work, via the File, Save or Save As option, on a regular basis.

Figure 12 File, Save option

I have saved the Wireframe with the filename Interesting_Places. On saving the Wireframe the Window Caption will indicate the name of the Wireframe as WebWireframes - Interesting_Places.wir

If you look at Fig 1 the original plan for my web site you can see there various links to the Home Page. There are links to Places of Interest and to a menu. We therefore need to add some exit points to our home page.

From the Menu choose the Exit-Points Option.

Figure 12 Exit-Points Menu option

This gives us the option to add either Exit-Points or Nested Pages. If we choose Add New Exit Point we will be presented with the following warning message:

Figure 13 Exit-Points Warning message

On choosing the Nested Page option a similar warning is obtained.

Figure 14 Nested Page Warning message

To continue the development of our Wireframe we must therefore add one or more pages. This is done using the Add New Page Option under the Menu, Pages selection.

Figure 14 Add New Page Option

When Selected this displays a dialog box in which you should enter the Page Name and description.

Figure 14 Add New Page Dialog

We can now edit the “home page” to include an Exit Point or link to “Location_1”. This is done by highlighting the page to be modified, in this case home and using the Menu, Exit-Points, Add New Exit-Point. On selecting this option a dialog box is displayed in which the destination page, Exit Point, can be defined from a drop down list.

Figure 15 Add New Exit Point drop down list

A caption or useful name to define this link should also be defined.

Figure 16 Add New Exit Point Dialog

On accepting the Exit Point by pressing Add Exit Point the Exit point is displayed in the appropriate pane.

Figure 17 home page with New Exit Point

If we try to add an Exit Point that refers to the same source and destination i.e. a self referencing Exit Point we get a warning message.

Figure 18 Self referencing Exit Point description.

Figure 19 Self referencing Exit Point warning message..

Sometimes it would be appropriate to say Yes. For example many pages have links to them selves. The course resources page for this course being one of them.

Having created a link from the Home Page to the page showing information about “Location_1” we must supply a return path. From Fig 1 there is only one Exit Point from “Location_1” and that returns to the Home Page. This can be done in the same way as the previous example making sure that the page representing “Location_1” is highlighted first.

Figure 20 “Location_1” Exit Point

We can now proceed to add the remaining pages for Interesting Places 2 to 6. For simplicity I have used the same page description for each page.

Since each of these pages is linked to the Home page we have to update the Exit Points on the Home Page to provide a link to each of the Location pages.

Figure 21 Updated Exit Points for the Home Page

As for “Location_1” there must be a return to the Home Page for the other pages, so I’ll add them now.

Any attempt to create multiple exit points with the same name displays a warning and asks for confirmation.

Figure 22 Duplicate Exit Point Warning

At each stage of this process I am regularly saving my work. You can either use Save from the File Menu and overwrite the existing file or use Save As giving the file a new name. In the latter case the file available for editing is the new one, the original file being saved and closed. In this respect the application works in the same way as many other applications like Word and Excel. If you wish to work on the original file you will have to reload it into the application using the File, Open option.

When updating a long list of pages it is easy to overlook some. A quick method of checking is to do an Integrity check using the Menu, Pages, Integrity Check option. This will check the Wireframe for any pages which do not have any links.

Figure 23 Integrity Check Menu Option

The results of the Integrity check show that I have forgotten to update “Location_3” with an Exit Point.

Figure 24 Results of Integrity check

I will correct that omission now.

I f you decide that you have no requirement for a page you have included you can delete it using the Pages, Delete Selected Page Option.

Figure 25 Delete Selected Page Menu Option

I will delete the page “Location_5”. You should note that when deleting a page references to that page become undefined as can be seen in the Exit Points for the Home Page.

Figure 26 Undefined Exit Point for “home page”

I will Add a new Location_5 page and run the Integrity Checker again.

Figure 27 Integrity Check after replacing deleted page.

The Addition of the page “Location_5” has not re-created the Exit point Link from the Home Page or re-established the Exit Point Link from “Location_5” to the home Page. The deletion and addition/recreation of pages can lead to unreferenced Exit Points and I would urge you to use the integrity checking option on a regular basis especially when deleting pages.

Fig 1 shows a link to “Location_6” indicating the availability of further information. I do not know whether I will include this in the final Website so using a previously saved version of the Wireframe I will add an exit point from “Location_6”, as a marker, which I will leave as undefined for the moment.

We can now view the first stage of the design and see if the links work as expected. We can view the structure in two ways either as a map or a series of pages. Both options are available from the Views option on the menu. The most useful to show a client is the page view details of the map view are covered in the appendix.

The starting or default page is the highlighted page; so highlight home and select Views, Page View from the Menu.

Figure 28 The “home page” seen in Page View mode.

By clicking on the Exit-Points you can display the contents of the linked pages. By testing the links in this way you can establish whether you have created an exit from each page.

Fig 1 also shows a three items, Privacy, Contacts and Terms and Conditions which are common on to all the pages. We can implement this by using nested pages. To remind you a nested page is the means by which all the Exit-Points of one page can be associated with another page.

Creating nested pages To create the nested page we need to create individual pages for each of the common items and a page that provides exit points to these pages. I will now add four more pages; Information, which will contain the common Exit-Points, and pages for Privacy, Contacts and Terms and Conditions.

While adding the Privacy page I used the page name “Privacy Policy”.

Figure 29 Adding Privacy Policy Page.

On adding the page a warning message about the restrictions imposed on page names is displayed.

Figure 30 Page name restrictions warning message.

On accepting the page the name becomes “Privacy_Policy”. As a result of these restrictions the page for Terms and Conditions becomes “Terms_Conditions”.

To make the Information Page the nested page we have to add Exit-points to the common links. When I come to add these I find I have made a typing error in both the name and description of the page.

Figure 31 Spelling errors in “Information” page

The Page name and spelling errors can be corrected using the Pages, Edit Selected Page Menu option.

Figure 32 Edit Selected Page menu option.

This will display a dialog box, similar to that displayed when adding a page.

Figure 33 Page Edit Dialog

The contents of the Name and description boxes can be edited and on selecting Save Page the page name will be updated after asking for confirmation.

Figure 34 Confirmation of Name Change.

If the page description has been edited this will also be updated.

Let’s now add the Exit Points to the “Information” page. Highlight the Information Page and, as before add the Exit Points via the, Pages, Add Exit-Point menu option for the “home page” and the common pages.

Figure 35 Nested Page Exit Points.

To add the “Information” Page to the “home page” as a Nested Page we highlight the “home page” and use the Exit-Points, Add Nested Page menu option.

Figure 36 Add Nested Page menu option.

This will display a dialog asking you to define the Nested Page from a drop down list: in our case it is the “Information” page.

Figure 37 Add Nested Page Dialog.

On accepting the destination page by Adding the Nested Page the location appears in the Nested page pane on the Main Window.

Figure 38 “home page” Nested Page.

If we re-examine the Page View for the “home page” we can see that the Nested page, “Information” has been included in the lower panel showing the links to the common pages.

Figure 39 “home page” in Page View mode showing Nested Page.

To complete this stage of the Wireframe model the nested page Information must be added to all the other pages.

When you have done this you can again check the Map or Page View to see if links for the nested pages work.

You now have enough information to allow you to do the tasks in the Study Guide the following appendix contains more information on WebWireframes relating in particular to the editing features of the software.

Appendix

Updating WebWireframes The current version of the WebWireframes program is numbered 2.0.6. If you downloaded and installed a previous version you have the option to update to the latest version.

Go to the TT282 desktop web site (http://desktop.open.ac.uk/tt282/) and download the file “WebWireframesEXE.zip”, which contains the single exe file “WebWireframes.exe”. Extract this file and copy it to wherever you installed the WebWireframes program, overwriting the previous version.

Map view

Figure 40 Views Menu

Firstly let’s look at a map view.

Figure 41 Interesting_Places Wireframe in Map View mode.

The window shows a map of the pages with the page name and description on the left and the Exits and Destinations on the right. Clicking on the destination will jump to that page.

Changing the case of page names There are a couple of options under the Pages menu that need clarifying.

http://desktop.open.ac.uk/tt282/

Figure 42 Additional Pages menu options.

The options to convert Page Names to either Upper or Lower Case convert all the Page Names to the selected Case.

Editing a Wireframe Suppose I have run the Integrity checker and got the following result.

Figure 43 Integrity Check after addition of Nested Pages.

As you can see I have forgotten to provide an Exit Point from the Contacts, Terms and Conditions and Privacy pages. This can be remedied by adding the nested information page to each.

This still leaves the undefined Exit Point on page “location_6”. I previously included it since I had not made up my mind whether to include an additional page containing a more detailed history relating to “Interesting Place 6”.

I have decided to add the additional page which I shall call history_6. As before we can create Exit Points from “history_6” using the Exit-Points, Add New Exit Point option. I will reference an Exit Point to “location_6” and include the nested page “information”.

It only now remains to change the undefined Exit Point for “location_6” to reference “history_6”.

There are two ways of approaching this problem. Firstly with “history_6” highlighted display a Page View and right-click the mouse on the undefined Exit-Point.

Figure 44 Exit Point edit options in Page View mode..

This gives the option of editing or deleting an Exit Point. Choosing Edit Exit Point displays a Dialog that allows you to define the destination and Caption for the Exit Point.

Figure 45 Exit Point editing dialog in Page View mode.

Saving the Changes updates the Exit Points for both the Page View and the page “location_6” in the main window. It does not remove the existing undefined Exit Point.

To remove the undefined Exit Point right click on it with the mouse in Page View and choose Delete Exit Point. You will be asked to confirm the deletion and on closing the Page View the undefined Exit Point is removed.

Figure 46 Exit Point deletion confirmation dialog.

This is probably the safest way to modify Exit Points since using this method you are always asked to provide both a link and caption and you can not insert undefined Exit Points.

Figure 47 Exit Point error message in Page View mode.

Advanced edit option The alternative method is to use the Advanced Edit option available under the Pages Menu.

Figure 48 Advanced Edit menu option

Selecting this option starts the Advanced Edit Feature. It can be toggled On or Off by selecting it via the Pages Menu. An indication of the state of the Advanced Edit is the colour of the text; the text being slightly darker when the Edit feature is On.

This feature is extremely powerful and should be used with the greatest of care since it allows you to directly edit the contents of the Page Description, Page Exits and Nested pages panes in the Main Window.

We can now edit the undefined Exit Point directly by giving it a caption and changing the undefined link to a page reference. When you have edited the link you should click on the update button in the top right hand corner of the window to accept the changes. In the event that the linked page does not exist a warning message will be displayed.

Figure 49 Exit Point Update Error message.

In the event you use the Advanced Edit I suggest that you turn it On, perform the edit and turn it Off again otherwise you may make changes you had not foreseen.

Saving the Wireframe as a HTML file This is done using the File, Save Wireframe as HTML option.

Figure 50 Save Wireframe as HTML menu option.

The HTML files are saved to the directory "x:/Program Files/VB_Wireframes/htmlpages/", where x is the disk drive specified when the Wireframes program was installed. The file the extension can be set to any preferred type.

A warning message is displayed to confirm that you want to delete any existing HTML pages before creating a new set.

Figure 51 Deletion of existing HTML pages warning message.

Once the HTML pages have been created they can be viewed using the Views, Browse HTML option.

Figure 53 Browse HTML menu option.

Note: Before the current Wireframe can be viewed using the Browse HTML option, it must first be saved as a set of HTML pages.

The Browse HTML displays an HTML version of every single page in the Wireframe. The window is divided into three parts, which correspond to the three panels of the Page View window. The top of the window displays the name and description of the page. The middle of the window displays the captions and destination pages of all the Exit-Points. The bottom of the window displays each Nested Pages and its associated Exit Points.

After clicking the Browse HTML option you must select an existing file to display. The default is to look for the file 'home.html' in the 'WebWireframes/HTMLPages folder. However, any other location can be selected. This gives the option of creating multiple Wireframe versions so as to track progress of the design.

Figure 54 Interesting_Places Wireframe in Html Browser mode.

By clicking the links within the pages the viewer acts as a Web Browser allowing you to visualise the final structure of the Website.

With the structure complete and hopefully working the page content must be provided. Each of the HTML pages produced has some coding already inserted so that it can be displayed in the Browser.

Figure 55 Part of the HTML code generated when the Wireframe pages are Saved as HTML.

webwireframes user guide.amir/webwireframes_user_guide.pdfwebwireframes user guide. this guide...

Documents