A systematic approach for the development of the WWW pages is introduced. The presented approach decomposes the development process into planning, realization, controlling and modifying, and specifies the steps of each development phase. The proposed methodology uses the concepts of multiple-file WWW pages, abstract pages, electronic pages and data objects, what makes possible the easy description of the development process. The paper presents examples for the application of the proposed steps.
The importance of the Internet increased spectacularly in the last years, and is expected that this trend will continue in the coming years. The most attractive feature of the Internet is the World Wide Web system. It is constructed by millions of WWW pages inter-linked amongst them, and constitutes a huge, worldwide hypermedia system ([4],[5]).
The WWW pages are organized in sub-networks focused on specific themes. The main features of the WWW pages, the existence of multimedia components and the inter-linking, makes them very complex systems ([1],[5],[7]). This results that a systemic approach is needed for the efficient development of such page systems.
Such an approach is presented in this paper. The presented methodology is based on the classical techniques of solving complex problems, and is adapted to the needs of the WWW hypermedia systems. Each proposed step is exemplified through concrete examples.
The first question is what a WWW page is considered to be. The most simple answer is that a file written in HTML language ([5]). The problem with this answer is that using this definition is quite difficult to handle the system of the WWW pages.
A better approach is if we consider as a WWW page a whole system of HTML and non-HTML (audio, video, picture, JAVA applet) files inter-linked amongst them and with links to other similar file systems around the world. The limits of a such multiple-file WWW page can be find as the logical bounds of the local system . So, the logically close files will form the multiple-file WWW page. Using this approach we can consider the Internet WWW system as a web of worldwide spread multiple- page WWW pages, each one representing a logically coherent and integer unit, with an internal structure. This approach permits the definition of a systematic development procedure of the WWW pages.
The previously defined WWW page can be represented as very complex directed graphs. The nodes of the graphs represents text, program, image, audio or video data components. The graph represents a structured organization of the data components. This specifically structured data aggregate is constructed so, that it generates a special cognitive sensation process in the user ([1]).
The WWW pages have two basic characteristics, their content and their view effects . This two components should be closely linked not only electronically but logically too. The interaction of this characteristics generates the cognitive sensation processes. In order to achieve the expected results (the expected reactions or feelings of the users), the content and view components (they can overlap) should be synchronized and should be organized in a convenient hypermedia network.
As in the case of any other sufficiently complex system, the design and development of the WWW pages needs a systemic approach. By this approach it is possible the decomposition of the creation and development process into smaller sub-processes, what can be designed and controlled more efficiently. The systematic approach permits the gradual covering of the future technologies, like animation with JAVA applets ([3],[6]) or virtual reality elements ([2]).
The main phases of the development of the WWW pages, as in the case of other complex systems are ([opun93]):
a. the planning;
b. the realization;
c. the testing and correcting;
d. the using and modifying.
The planning phase contains in this case the planning of the content and of the view effects, together with the internal and external links between the files of the WWW page and to other WWW pages.
The realization means the effective construction and linking of the data objects and component files of the WWW page.
In the testing and correcting phase the realized WWW page should be tested by potential users, and should be corrected based on their suggestions.
In the final phase the created system is used by its users and is modified according to their needs, the general developments related to the content of the page, or to the general technological advances.
In the next subchapters we will discuss in detail each phase based on examples. The example is a literary analysis educational WWW page.
The planning phase
The planning phase is composed by:
a. the goal setting;
b. the setting of the expected results and effects;
c. the planning of the abstract pages (A-pages);
d. the planning of the electronic pages (E-pages);
e. the optimization of the planned structures.
The goal setting is very important, on this depends all of the next steps, and of course the success of the development process. The developer should consult to with his/her clients, who ordered the WWW page, in order to establish their exact goals related to the WWW page. If the goals are very general or too complex, than it should be decomposed into a sub-goals, what could lead to the conclusion, that there is a need not only for one, but many WWW pages with distinct goals.
In our example the goal of the WWW page is to teach the student a poem and its literary analysis.
The next step is to set the expected results, what could serve in the future as control parameters. The expected results should be sufficiently concrete and necessarily measurable. For each expected result we should state how to measure it, otherwise we can fall in a situation, when we cannot compare the actual results to the expected ones.
In the example we can set the following expected results:
a. the average student should be able to complete correctly the included tests after 30 minutes of browsing; the testing should be done with at least 20 students;
b. the average student should reach all of the HTML files in 20 minutes; the testing should be done with at least 20 students;
c. the average user should characterize the WWW page as exciting and useful; the testing should be done with at least 20 students, the testers should fill the Effect Evaluation Form;.
For the next step we need a basic concept of the proposed WWW page development method. This is the abstract page or A-page. We consider the abstract page as a logical sub-unit of the WWW page, what is consistent and forms an integer logical component. A WWW-page can be decomposed in abstract pages, corresponding to the necessary logical sub-units of the WWW-page. The abstract pages can be defined based on the goals of the WWW-page. According to the previously set goal we can determine what main logical components are needed to build up the WWW page.
In our example we can state that we need the following logical components:
a. the poem;
b. the analysis of the poem;
c. the biography of the poet;
d. the general evaluation of the poet;
e. the historical background;
f. related tests.
Each of these components is considered as an abstract page. For each abstract page we should define its content and the desired view effects. The inter-linking scheme of the abstract pages should be build up. The results of this sub-step will be the list of the abstract pages, with their content and desired view effects, and the inter-linking scheme of the abstract pages.
Abstract page: General evaluation of the poet
Content: opinion of well-known literary critics about the poet, comparison with other poets, idols of the poet, followers of the poet, summary of the evaluation, related questions
View effects: The background image should suggest the era of the poet, appears the portrait of the poet, and are accessible some scanned images of the original critiques appeared in literary reviews.
The developer should decide if the WWW page will have a start page or a final page or not. If there is a start page, than it is considered an abstract page, what introduces the user to the theme of the WWW page, and the other pages are accessible only going through this first page. In the case of the integration of a final page, every complete path through the WWW page should lead to that page. This page could contain some additional information about the WWW page, its maintainer or its author, or it could contain some final questions or tests related to the WWW page.
The next is the evaluation of the needs of each abstract page. This means, that based on the content and desired view effects of the page, the developer makes a list of needed text, audio, video, image or program components. As a result the descriptions of the A-pages will be completed with the list of the needed data objects.
In our example we will have:
Abstract page: General evaluation of the poet
Content: opinion of well-known literary critics about the poet, …
View effects: The background image should suggest the era of …
List of necessary data objects: a scanned image of an engraving about Paris in the last decade of the 19th century, a scanned image of the poet, scanned pages of the main literary critiques of that time (in French, German and English), the text of the literary critiques of that time, the text of newer literary critiques and evaluations, a general text about the comparison of the poet with other poets, the list of the followers, the list of the idols of the poet, the text of a summary evaluation, the text of the questions about the evaluation of the poet and the possible answers to the questions, the program what evaluates the answers of the users and produces a user evaluation output for the teacher/supervisor.
The result will be the complete description of all A-pages.
The next step is the conversion of the A-pages into electronic pages or E-pages. The electronic pages are file groups what appear simultaneously on the screen (eventually the screen should be scrolled). The core of an electronic page is a file containing HTML text. This HTML file contains the links to the other image, audio, video or JAVA applet files what appears simultaneously or can be played simultaneously with the main content (in most of the cases text or sensitive image) of the electronic page. Generally the an A-page is converted into a few E-pages. The developer should build up the graph of each E-page and should identify the links between the E-pages. The links between the E-pages could be simple links, what points to the start of the pointed E-page, or could be links with bookmarks, what points to a specific position within the pointed E-page. There could be special links to audio or video files, or links to other A-pages. These two special link types should be marked distinctly from the other links.
In the following example the links within an E-page are continuous lines, the to audio or video files are represented by filled rectangles, the links to other E-pages are pointed arrows, and the links to other A- pages are pointed double arrows.
The final step of the planning phase is the analysis and optimization of the planned structures. In this step the lists of the necessary objects are analyzed and compared, the common objects are marked. Another type of optimization could occur if there are E-pages in different A-pages with common or nearly common structure. In these cases the developer could form a separate A-page containing the common E- page(s), adding small modifications in order to satisfy all of the A-pages what will be linked to the new A- page.
The realization phase
The realization phase is composed by:
a. the collecting of the needed data objects;
b. the primary editing of the E-pages;
c. the refining of the E-pages;
d. the filling and primary controlling of the links.
The first step is the collecting of the necessary data objects. This means that the data objects should be created, borrowed or bought. Special attention should be paid for the copyright problems what could arise in relation with the unauthorized use of images, audio or video files, or literary texts. To avoid these problems the developer should check if there is any possible source of such problems, and if there are, then should obtain all the necessary authorizations.
In our example we can get the images and the sounds from the Microsoft Encarta Encyclopedia, what permits their use with easily accomplishable restrictions regarding the copyright. Is more difficult to get the video data, we can organize to film an actor, and to transform a short segment into an acceptable video format (what can be inserted into the HTML file).
The primary editing of the E-pages means that each E-page is constructed using the specified data objects in a primary format. At this stage the E-pages contain their content and their view effect components, but these are not synchronized and arranged properly in order to generate the expected view effects. The links to other E-pages or A-pages are filled with dumb links to a general E-link file or A-link file.
The result of this step in the case of an E-page from our example is:
<HTML>
<HEAD> <TITLE>The poem - Primary version</TITLE> </HEAD>
<BODY>
<H1>The poem</H1>
<P> <IMG SRC="Poet.gif" ALT="The poet"> <P>
The poet<BR>
Verses <BR>
<A HREF="music.wav"><IMG HREF="music.wav"
SRC="Music.gif" ALT="music"></A><BR>
<A HREF="perform.avi" >Performance of the actor</A><BR>
<A HREF="E_link.htm" >Other poems</A><BR>
<A HREF="A_link.htm" >Biography</A><BR>
<A HREF="A_link.htm" >Analysis</A><BR>
</BODY>
</HTML>
The next step is the refinement of the E-pages. In this step the developer refines cyclically the structure of the E-page until obtains the expected view effect. This stage could take a lot of time because of the limited capabilities of the editor programs and of the browser programs.
In the case of the previously presented HTML file the final result, after refinement could be:
<HTML>
<HEAD> <TITLE>The poem</TITLE> </HEAD>
<BODY BGPROPERTIES="FIXED" BACKGROUND="Back.gif">
<H1><CENTER>The poem<BR> </CENTER></H1>
<H2><CENTER>Subtitle<BR></CENTER></H2>
<P>
<TABLE >
<TR><TD WIDTH=196><IMG SRC="Poet.gif" ALT="The poet "></TD><TD WIDTH=131></TD><TD COLSPAN=2 WIDTH=68></TD>
<TD COLSPAN=2 WIDTH=52>
</TD><TD COLSPAN=2 WIDTH=52></TD><TD COLSPAN=2
WIDTH=68></TD><TD WIDTH=131><A HREF="Music.wav">
<IMG HREF="Music.wav" SRC="Music.gif"
ALT="music"></A></TD></TR>
. . .
</TABLE>
<P>
<TABLE >
<TR><TD WIDTH=325> Verse 1. </TD><TD COLSPAN=2
WIDTH=31></TD><TD COLSPAN=2 WIDTH=53></TD>
<TD WIDTH=135></TD></TR>
. . .
<TR><TD WIDTH=325>Verse 8. <A HREF="Perform.avi">
Performance of anactor</A>
</TD><TD COLSPAN=2 WIDTH=53></TD><TD COLSPAN=2
WIDTH=31></TD> <TD COLSPAN=3 WIDTH=69></TD><TD COLSPAN=2 WIDTH=31></TD><TD COLSPAN=2 WIDTH=53></TD>
<TD WIDTH=135></TD></TR>
. . .
</TABLE>
<P>
<A HREF="E_link.htm" >Other poems</A><BR>
<A HREF="A_link.htm">Biography</A><BR>
<A HREF="A_link.htm">Analysis</A><BR>
</BODY>
</HTML>
The final step of the realization phase is the filling of the links and the primary testing of them. In this step we complete with the true file names the links between the HTML files, and we test if the filling is done well, in other words if the links lead to their proper goal file.
In our example we will have:
<HTML>
. . .
<BODY>
. . .
<A HREF="Other poems.htm" >Other poems</A><BR>
<A HREF="Biography.htm">Biography</A><BR>
<A HREF="Poem analysis.htm">Analysis</A><BR>
</BODY>
</HTML>
The controlling and correcting phase
The controlling and correcting phase contains:
a. the general testing;
b. the revision based on the test results;
c. the assent for usability.
The general testing should be done by a group of potential customers, or at least by a group of people who are different from the developers. The testers should watch the contents and the view effects of the system. The testers will fill-in evaluation forms, to permit the statistical evaluation of the test results. The main points of testing are:
a. is consistent the contents of the system;
b. is it relevant from its domain-specific viewpoint;
c. is it correct, is it containing any error from the point of view of the contents;
d. is it understandable;
e. is it containing fuzzy, misleading parts in its contents;
f. are the view effects pleasant;
g. are the view effects relevant to the contents;
h. are the view effects consistent with the contents;
i. is it containing any erratic or low quality picture, sound or video object;
j. is the system efficient and useful;
k. is the general effect pleasant.
Conclusions are formed based on the test results. The conclusions can lead to partial re-planning or to the collecting or creating of new data components, or to the restructuring of some HTML files. The revision step should lead to a system with higher performance. If the number of errors and negative evaluations is high, then it is recommended to repeat the first two steps of this phase, until the errors and negative evaluations disappear or at least reduce their frequency.
The assent step is a final step before full using. To give the assent is the responsibility of the main developer. The assent should be given only if the general evaluation of the system is sufficiently high.
The using and modifying phase
The WWW pages can be used in many ways. These can be arranged into three classes. These are:
a. use with browsing;
b. interactive use with asking and answering;
c. interactive use with the possibility of external additions.
The first one is the most simple and most common case. If a WWW system is used only through this way it could be modified because of two reasons. The first one is the necessity for the contents renewal. This happens if new data, facts or new approaches appear in relation with the contents of the WWW pages. The second case is the technological renewal. This should be done periodically. Nowadays the technological advances are very fast, so it could be suggested that the technological renewal to be done in each six month or at least yearly.
In the second case the developers or the maintainers should modify periodically the WWW page system according to the needs, tastes, characteristics of the users. This modifications could be done based on the questions asked by the customers or on the answers given by them. This modifications could mean the change of the dominant colors, or the change of the order of the presentation of the ideas, or any other structural, contents or view change. In addition in this case too, the contents and technological renewal should be done as in the previous case.
Finally in the third case the situation is more difficult. In this case we have to face legal, ethical and moral problems. The first one what we can is to advice the user about what kind of additions are welcome, and what are not (like drog or gun advertisement, obscene or racist texts, images, etc.). The next is to setup some kind of filtering mechanism, what can filter out the non-welcomed pages. This could work with an artificial intelligence engine what analyzes the incoming pages. Another aspect is that according to the added pages, the system should be updated in order to correspond to the tastes of the users.
A systematic approach of the WWW page development was presented in this paper. The proposed method adapts the classical method of building complex systems to the specific needs of WWW hypermedia pages. The method decomposes the development process into planning, realization, controlling and modifying, and specifies for each of them the steps of the phase.
The method uses the concepts of the multiple-file WWW page, the abstract page, the electronic page, and data objects what makes easily describable the development process of WWW pages. The presented method makes controllable and correctable this process.
The method could be supplemented in order to cover the integration of new technologies, like animation with JAVA applets, or the technologies from the world of the virtual reality. To do this each phase should be supplemented with additional steps proper to this new technologies.
[1] Balasubramanian, V.: State of the Art Review on Hypermedia Issues and Applications, Rutgers University, Newark, NJ, 1994.
[2] Gradecki, J.: The Virtual Reality, John Wiley & Sons, New York, NY, 1994.
[3] Jamsa, K.: JAVA, Kossuth Kiadó, Budapest, 1996.
[4] Krol, E.: The Whole Internet, O'Reilly & Associates, Sebastopol, CA, 1994.
[5] Radoiu, D.: HTML. Publicatii Web, Computer Press Agora, Tg. Mures, 1996.
[6] Rotariu, E.: Limbajul JAVA, Computer Press Agora, Tg. Mures, 1996.
[7] Steinmetz, R.: Multimédia. Bevezetés és alapok, Springer Kiadó, Budapest, 1995.
ANDRAS Peter Department of Mathematics and Computer Science Babes-Bolyai University e-mail:peter@civitas.org.soroscj.ro