Web Page Reuse Techniques: A Dynamic Referential Navigational Guide

Eng Huat Ng E-Commerce Group,

AIG-Software International JV Sdn Bhd, G- 1, Incubator 2, Technology Park Malaysia,

Bukit Jalil, 57000 Kuala Lumpur Malaysia.

E-mail: enghuat.ng@aigsi.com

Stu Wade, Claude Ghaoui School of Computing and Mathematical Sciences,

Liverpool John Moores University, Liverpool, UK.

e-mail: { s.wade, c.ghaoui} @livjm.ac.uk

Abstract In the jield of Software Engineering it is generally recognised that the reuse of existing components can lead to greater productivity and cost-effectiveness, together with a more reliable and easier to maintain software product of high quality. In short, software reusability is an essential attribute of a high, quality, reliable software component. However, most Web pages are currently constructed for a particular system or Web-site rather than being built with reuse in mind. Any reuse of these pages is based on ad hoc reuse rather than systematic reuse. This article presents a new approach for Web-page reuse called a Dynamic Referential Navigational Guide (DReNG). Based on the page-component instead of the predetermined link concept, a more structured design is proposed. Generic Web pages are built as reusable components and viewed as black boxes. A master page is used for each system developed, as a reference guide, to store the navigational links and the navigational mechanisms between these pages. It is based on a "triple linked list" structure, where "Back", "Forward", and "Homepage" pointers are maintained and potentially can be extended to unlimited pointers wherever an "n-tuple linked list" might be needed. Two further problems associated with the development of Web-based systems: the tracing and the maintenance of the same page across different systems or even across different servers have also been tackled.

1089-6503/00 $10.00 0 2000 IEEE 72

1. Introduction

Software reusability is a vital attribute of a high quality software component. Software reusability means that ideas and code are developed once, and then used to solve many software problems, thus enhancing productivity, reliability and quality. Reuse applies not only to source-code fragments, but to all the intermediate work products generated during software development, including requirements' documents, system specifications, design structures, and any information the developer needs to create software [ 1, 21. Documentation reuse is becoming increasingly significant. Hypertext and Hypermedia, particularly in the World Wide Web, offer a. wide scope for reusing documents. It is common, particularly in an educational domain, to reuse documents or pages to illustrate a term or a concept.

2. Why --- The Problems

The use of subroutines is common in traditional functional programming. With subroutines, a sub-program can be written as a separate unit and then used at will in a program. Once a subroutine has been written, it can be regarded as a 'black box'. The power of the subroutine lies in its ability to return to the place from whence it was called [3]. On the other hand, a goto instruction merely instructs the computer to resume execution at a specified statement [4]. The use of subroutines leads to a more

structured programming style and facilitates the application of reuse. In software engineering most commentators agree that the reuse of existing subroutines or components will lead to greater productivity of more cost-effective, more reliable, easier to maintain and higher quality software products [5][61[71.

However, the current development of most Web pages is targeted purposely for a particular system or Web site rather than being built with reuse in mind. The links on these Web pages are path specified (See Figure 1). That is to say that the buttons on most Web pages are similar in functionality to goto statements in functional programming. They have been assigned to a certain fixed address that has been specified in the code. This results in the page becoming almost impossible to utilise by other Web pages without compromising the navigational paradigm of those pages. This problem is analogous to those problems in programming caused by the goto statement.

......... ......... ......... ......... ......... .........

based systems as part of a pre-specified path without any changes to its navigational links. All these links will be referenced dynamically and appropriately as the user navigates around these systems. This technique not only can solve the “Forward” button problem mentioned above but also the “Home” button for different systems as well as the navigation problem of “Back” button. Of course, the same concept can be applied to other links on the Web pages.

Using this technique allows individual domain experts to develop and maintain their own generic distributed components on the Web. However, it also allows others to reuse these remote components directly without any modification to develop different guided-tours (or path- sets) in different systems on their own Web site.

4. Where --- The Application Areas

This technique can be applied to the development of Web-based business training systems, interdisciplinary education & distance learning, on-line assessment, tutorials, Q&A, on-line document management systems, virtual tourism systems, on-line news announcements and any systems that use guided-tours (path-sets) or have a pre- define link betweedamong pages. These include on-line legal information systems where various cases can be linked to different rules dynamically and appropriately. I I I 5. Who --- The Developers

.... ‘ 1 1 :::...... I ......... ...... ......

Consequent to this problem, the tracing and the maintenance of the same page across different systems or different servers also needs to be tackled.

This paper proposes a novel technique, called Dynamic Referential Navigational Guide (DReNG) to tackle the problems stated above.

3. What --- The Dynamic Referential Navigational Guide Technique

The DReNG technique is based on the concepts of reusable component development analogous to the use of subroutines rather than the goto statement. The DReNG Technique can be defined as a technique that allows the user to reuse a particular Web page on different Web-

Who may benefit from this technique? Since the technique improves the reusability, maintainability, readability and expandability of the development of hypermedia systems, as well as facilitating co-operation between system developers, all those involved in the development of hypermedia systems may benefit from it. For example system analysts, system designers, system testers, system maintainers, Webmasters, system re- engineers and even the educators who like to build their own learning system. Other domain experts may also be able to benefit from this technique if they would like to build their own Web-based systems.

6. How --- The method

Instead of using the goto approach, the Dynamic Referential Navigational Guide technique is based on a page-component approach to build up systems. Generic Web-pages are built as reusable components and viewed as “black-boxes”. A “master” page is built for each DReNG- enabled or DReNG-ed system developed, as a reference guide, to store the navigational links and the navigational mechanisms among these pages. It is based on a “triple- linked-list’’ structure, where “Back”, “Forward”, and

73

“Homepage” pointers are maintained and potentially can be extended to unlimited pointers wherever an “n-tuple- linked-list” might be needed. A typical example for the “triple-linked-list” structure is the chapter pages in a Web- based learning system. On each of these chapter pages, there are at least three buttons: a “Back” button which connects to the previous chapter; a “Forward” button which links to the next chapter; and the “Home” button which links to the homepage of the learning system. Two difficulties in the development of this technique: the trace and the maintenance of these pointers across Web-pages have been tackled. The architecture of the DReNG-ed systems is shown in Figure 2.

The steps Involved in developing DReNG-ed applications are shown in Figure 3:

1. Identify Reusable Components: This step aims at identifying the potential reusable

components or nodes (or pages in the WWW). Those developers familiar with object-oriented methods should focus on each object found in the “object structure

diagram”. Each object and associative relationship appearing in the diagram are analysed. All pages or nodes, such as object types/classes and their instances, are the potential reusable components in this step.

For those who are not familiar with object oriented techniques, it is helpful to think of all potential nodes. In terms of the Web pages, some typical potential reusable pages are search pages, news pages, and chapter pages, etc. All these pages can be stored in different databases on different servers.

Transform Reusable Components into Generic Form:

This step focuses on transforming the links on these pages into generic form. In the traditional approach, the navigational paths on these pages are path-specified Web addresses. However, using DReNG, the navigational paths on these pages are being transformed into generic functions rather than Web addresses. For ease of description, the “triple-linked-list” DReNG-ed application is used as an example in this paper. In this case, the function assigned to the “Back” button can be called - back() while the “Home” button and “Forward” button can be identified as -home() and -forward() respectively. For the sake of the friendliness of the system, it is highly recommended that the interface for all these: pages should be consistent.

3. Group Generic Reusable Components Into Guided Tour

All potential guided tours and their pages are identified in this step and the logical order of all these pages has to be defined. The reasons this step is carried out at this stage are, firstly, for ease of design and management at later stage and secondly, for maximising the possibility of reuse. Some common guided tour instances are orientations, news-announcement, learning systems guided tours including from 1st chapter to last chapter guided tours, tutorial-solutions, quiz-answers, assessment, etc.

2.

4. Build DReNG-ed master page In this step, all possible functions employed on

those pages described in Step 2 have to be defined in this master page in order to served as a reference guide where all navigational links and the navigational mechanisms among these pages are stored. Besides, the order of all these pages has also to be defined physically and dynamically. In the case of “triple-linked-list” DReNG-ed applications, a certain page has to be accessed when the Forward button or Back button on a particular page is clicked. Furthermore, the problem of pointers shared by several pages has to be solved by defining them in each related function on this page.

5 . Design the user interface This step concentrates on designing the user

interface for the whole system rather than each page (the interface for each page should be defined in Step 2). In other words, whether the system adopts a two-frame user

74

interface or a three-frame user interface or even other layouts is decided in this stage.

6 . Test the system This step should produce a testing plan as well as

conduct the testing. The testing of all links on the system should be carried out systematically. A test plan for DReNG-ed systems should normally include at least the following components: 1. Testing of individual hyperlinks on every component or page identified in Step 1; Testing of every guided tour in terms of their order and completeness; Testing of subsystems if any; Testing of system features; Testing the system on different platforms. Testing the first version with users.

7. Case study

Two learning systems were designed using this approach and have proved to be successful. The first one is a 12-credit, first-year, first-degree subject called “Information Systems” while the second one is also a 12- credit subject called “Information Systems in Business”. Both modules are taught in The School of Computing and Mathematical Sciences at Liverpool John Moores University. The target audience for both were first year undergraduate students who came from a variety of backgrounds and fields. The first course were designed for the more technically-oriented, such as Computer Studies students, Mathematics, Statistics & Computing students and Applied Statistics & Computing students, etc. The “Information Systems in Business” module was designed to target those students with a business-related background, such as Business Mathematics, Information Systems Management and Technology Management, etc. Basically, they are quite similar to each other. The study modes of students include sandwich, full-time and part- time. The target system is a web-based interactive learning system that is built, not as an on-line handout or text-book, but as a multi-dimension hypertext book (or online resource).

It can be seen from the navigational graphs shown in Figure 4 and Figure 5, that most of the chapters, initially develop for the “Information Systems” module, have been reused to form a new learning system to support the “Information Systems in Business” module. However, problems arise if the traditional approach is used. It is impossible to reuse Chapter 1, Chapter 2 and Chapter 4 from the first learning system for the development of the second one without any modification. One may argue that it is quite simple in this case: all that we have to do is change all of the links (Back button, Forward button and Home Button) on these pages. In this case, another

problem arise, the maintenance of the contents of these pages might be quite difficult because of the duplicate of similar pages in physically different locations. It could be even worse if these pages are reused to build more learning systems or all these pages are stored across different servers. It is almost impossible for a domain expert to trace and maintain all these pages on the Net.

However, by using this technique, all pages were black- box reused. In other words, all pages have been reused without any modification. What the domain expert has to do is simply to maintain the pages he is responsible for on a single location. It therefore minimises the domain expert’s workload as well as improves the reusability of these on-line learning materials and the quality of the overall system.

8. Conclusion

Most Web-pages are built purposely for a particular system or Web site rather than built with reuse in mind. The links on these Web pages are path specified. The problem is, without any modification, the reuse of these pages is almost impossible. The tracing and the maintenance of such pages across different systems or even across different servers and their links to other Web pages also present a problem.

This paper proposes a novel technique, called Dynamic Referential Navigational .Guide (DReNG) to tackle the problems stated above. The DReNG technique is based on the concept of a reusable component development approach. It allows the user to reuse a particular Web page on different Web-based systems as part of a pre-specified guided-tour without any changes to its navigational links. All these links will be referenced dynamically and appropriately as the user navigates around these systems. This technique can be generalized from the triple-linked- list of ‘Home’, ‘Forward’ & ‘Back’ to any desired number of links across a set of Web pages.

This technique therefore allows individual domain experts develop and maintain their own generic distributed teaching components on the Web. Furthermore, it allows others to reuse these remote components directly without any modification to develop different guided-tours (or path-sets) in different systems on their own Web site. By using this technique, theoretically, most pages can be black-box reused. In other words, all these pages can be reused without any modification. What the domain expert has to do is just to maintain the pages he is responsible for on a single location while the overall productivity, reusability and quality of the system are improved.

75

Main Keys:

NG%IS NG%ISB: another Navigational Graph called 'ISB". G%IS#l: Guided Tour called "IS" Page 1

BlO >! Chapter 10 for IS H:A2. >:A2. V:NG% ISBclO.

H: Home page I: Index page >: go to or link to <: back to V: for details, see.. .

Chapter

V:NG% ISCl.

V:NG%

Information Systems Information Systems

V:NG%ISB.

Figure 1:A Hierarchical Navigational Graph for the "Information Systems" Learning System (NG%IS).

Main Keys: NGBIS: another Navigational Graph called "IS", G%IS#l: Guided Tour called "IS" Page 1 H: Home page I: Index page >: go to or link to <: back to V: for details. see . . .

0 Reusable Components

Library (Chapters, etc.)

I o Virtual Lecture I I> : Al. AZ. I

NG%ISB

H:O. V:NG%IS. > : 81-815

I I I

I I I I I 1 Bll 1

I I V:NG% I I V:NG% I I V:NG%Exam. 1 1 11 V:NG% I Uguide. Bboard. Mlead .

chapter 1 for IS

n:m. >:B2. w V:NG%

Chapter 2 for ISB

V:NG%

2 for IS

V:NG%

1-, Chapter Chapter 5 for 1s

+, Chaster +, Chaster

H:A2. t2J >:BE.

Chapter 8 for IS

H:A2. >:B9. V:NG%

Chapter 9 for IS

>:B10. V:NG%

Figure 5: A Navigational Graph for the "Information Systems in Business" learning system (NG%ISB).

76

References

[ 11 P. Freeman, “Reusable Software Engineering: Concepts and Research Directions,” presented at Workshop on Reusability in Programming, Newport, 1983.

[2] E. H. Ng and S. Wade, “Designing interactive multimedia Learning Systems on the Web using A New Graphical Navigational Design Technique”, presented at EUROMICRO 98, Vasteras, Sweden, August, 1998.

[3] D. M. Munro, Basic BASIC 2nd edition. London: Edward Amold, 1985.

[4] D. Cooper, Condensed Pascal. New York: Norton, 1987.

[SI Max Muhlhauser, Ralf Hauber, Theodorich Kopetzky, Typing Concepts for the Web as a Basis for Re-use. Presented at The Seventh International World Wide Web Conference, Brisbane, Australia, April 1998.

[6] Even-Andre Karlsson, Software Reuse: A Holistic Approach. John Wiley & Sons, 1995.

[7] Wayne C. Lim, Managing Software Reuse : A Comprehensive Guide to Strategically Reengineering the Organization for Reusable Components. Prentice Hall, July 1998.

77