Generation of Website Templates Based on UML Modeling Wesley Harris, Department of English Bogdan D. Czejdo, Department of Mathematics and Computer Science Loyola University New Orleans, LA, 70118 Abstract Typically, the Unified Modeling Language (UML) is used for visualizing, specifying, constructing, and documenting the artifacts of software-intensive systems. However, there have been many projects showing the usefulness of UML modeling of systems in other areas. In this paper we discuss how to model English composition in UML and how to convert its models into well-structured educational websites. First, we examine the kinds of UML models that can be built for the presentation subject of English composition. Once the UML models are built, they can be converted into website templates. We demonstrate this conversion with the example of English composition. Keywords: Unified Modeling Language (UML), When software developers begin to plan their system, they think about an overall structure long before they ask questions about programming style, much as painters begin with broad strokes or as builders with the skeleton of a building. Website design, because of the multimedial and interactive nature of the Web and the need for frequent updates, makes new demands on authors trying to create and maintain some structure in their products. Not only is there text content to be planned, there is the link structure, which may include links to other websites, other pages within the same site, and to graphics. Maintaining some structure in website design will only become more difficult as Java, Flash, and cgi scripts increase the level of interactivity on the web. Just as having blueprints of a building is highly useful for future maintenance of that building, webmasters will find that working from some kind of model will both improve a site's design and make it easier to revise that site in the future. Those web designers might take their example from designers of software systems, who use the Unified Modeling Language to help design, implement, and maintain some of these systems. Typically, the Unified Modeling Language (UML) is used for visualizing, specifying, constructing, and documenting the artifacts of software-intensive systems (Booch 1999, Reference Manual 1999). However, there have been many attempts to show the usefulness of UML modeling of systems not necessarily involving software. For example, James Rumbaugh, one of the authors of the UML, showed examples of how to model the American Constitution ("Constitution" 1993). In this paper we will discuss how to model English composition and how to convert its models into well-structured educational Website pages. First, we will examine the kinds of UML models that can be built for the presentation subject of English composition. Once the UML models are built for the presentation subject, they can be converted to website templates, which will be filled later with specific content. We will demonstrate this conversion with the example of English composition. 1. UML MODELING AND WEBSITES The UML, though created and used for software design, is not specific to software design. This kind of modeling is object oriented, meaning that whatever system is being modeled, its components become abstract objects that have some properties and behaviors. We identify three types of UML diagrams that can be useful for websites modeling: class diagrams, object diagrams, and state diagrams. The class diagrams contain classes and relationships. Classes can be described by their name, properties, and functions, and they are graphically represented as boxes. Lines or arrows are then drawn between classes to describe their relationships, the most common of which are generalization, association, and aggregation. These different relationships are indicated by different kinds of symbols. The class diagram is especially useful for website modeling, because it allows the designer to organize concepts and specify relationships between them. Object diagrams model the instances of things contained in class diagram. They use similar graphical symbols as class diagrams and even can be merged together. They also can be especially useful for website modeling, but since all their transformations are very similar to class diagrams we will not include them in our discussion in this paper. If the system being modeled is active or is some kind of process, it can be described by its state or collection of states, which might correspond, for example, to different phases in the process. For most websites, this type of modeling is usually not required. However, there are some situations when the state diagram can be useful. First, it is often needed when the site content describes some kind of process that has explicit states, like the process of writing an English composition, a process which corresponds to many states. Next, for some educational websites, where we want to deliver some educational material in a structured way, we might want to model different states of students' preparation. 2. EXAMPLE OF A CLASS MODEL FOR ENGLISH COMPOSITION In our effort to design a structured website for the presentation subject of English composition we used two models: a class diagram and a state diagram. Let us first describe the class diagram. The essay, the paragraph, and the sentence are important components of English composition. Therefore the corresponding classes were created as shown in Fig. 1. Additional components are argumentative essay, expository essay, narrative essay, and introductory, body, and concluding paragraphs (Keene 1999, Rosa 1999). The classes are represented by rectangles and contain information about each object in three areas: the class name, properties, and functions. For example, the essay is named (ESSAY), its attributes given (complete, coherent, structured, appropriate), as is its function (to communicate information on a subject). The same is done for the paragraph and the sentence. The diamond and a solid line are used to show that the essay consists of paragraphs and paragraphs consist of sentences. Likewise, the sentence consists of clauses. Subclasses are represented by arrows; e.g. those for ESSAY are as follows: an argumentative essay, an Figure 1: Class Diagram for English Composition expository essay, and a narrative essay. Similarly, introductory paragraphs, body paragraphs, and concluding paragraphs are subclasses of the paragraph, and for CLAUSE we can identify dependent and independent clauses. An argumentative essay, a subclass of the essay, has the same properties of the essay. Similarly, an argumentative essay has the same functions, but some more specific functions such as "prove a thesis" can be also included. This feature is called inheritance and is one of the most powerful features of object-oriented programming. It can be also useful to more concisely model components of the subject area of a website. Generally, each subclass inherits attributes and functions from all superclasses. 3. EXAMPLE OF A STATE DIAGRAM FOR ENGLISH COMPOSITION A state diagram model (Figure 2) was also created, describing the actual writing process. Here there are three primary states, or phases of the writing process: prewriting, composing, and revising (Keene 1999, Rosa 1999). In the prewriting state, gathering ideas and structuring become states themselves. The choice of method in gathering ideas is optional-free writing, brainstorming, or researching-and the label on the arrow (completeness and scope) between these two states tells us that completeness and appropriate scope are the requirements for moving from the idea-gathering state to the outline state. The arrows between main states indicate that they occur sequentially. Actions that occur within the primary phases can be denoted by arrows that return to that state. For example, transitions labeled "Body," "Intro/Conclusion," and "Title," for the composing state and "Sentence," "Paragraph," and "Entire" for the revision state indicate the sequence in which these phases are carried out. At the end of the sequence there are three possibilities identified by three different tests, "Thesis defended," "Language improvements needed," and "Information or organization not sufficient." The model essentially takes the process back to the prewriting or composing states if modifications are needed in these areas. The final test is the completion test "thesis defended," which if passed indicates that the process is finished. 4. CREATING A WEBSITE BASED ON A CLASS MODEL We have experimented with many different transformation methods of UML diagrams into website structure. Let us first discuss the possible transformations of a class model into a website. Generally, there are three cases depending on the intended scope of information for each concept: 1) A class corresponds to exactly one website page. 2) A class can be described by several website pages. 3) Several classes can be described by one website page. Figure 2: State Diagram for English Composition The first case is the most straightforward. Each class can be converted into one website page and each relationship can be converted into one website link. For subclasses of one class or components of one class the links between these subclasses (components) are also included. There is still an interesting question about the need for additional links. Links to a home page are usually required as well as links to other major components of the presentation. It is often very hard to determine these major components automatically. In our case, the essay, paragraph, and sentence were identified manually as major components, always requiring additional links to these pages. In the second case there is an intention to describe a class by several website pages. We discovered by our experiments that it practically means that we can modify the class model by including additional subclasses or components or other related concepts so that one to one mapping can be achieved. For example, in our case, the separate pages for the class "sentence" that included description of phrases and other mechanical units could be described by two additional components of the sentence: "phrases" and "other mechanical units." In the third case, there is not enough material to create a separate page for several concepts and therefore they are combined in one web page. In this case, either some classes are removed from the model or a sub-model (Embley 1992) is created by drawing a rectangular box around selected for compression classes. In our case, the subclasses of clauses-independent and dependent-could be incorporated into one "clause" page, so that they could be removed from the model. If we want to combine the subclasses of a clause into web page independent from the "clause" page, then we can use sub-model to reflect it. Using the sub-model can be very useful, even if we could simply drop the classes from the diagram, when we anticipate changing or improving the website in the future. By including these classes in the sub-model, we can provide some classification that can be used in the future. An index page should be added to each site both to state the purpose of the site and to offer links to major components. In our case the index page contains links to essay, paragraph, and sentence pages so that they could be browsed independently of one another. This independent browsing illustrates the usefulness of the class model in our case. The hierarchical ordering of information on the website, reflective of the class model, makes for easy browsing and gives general to specific information. Each site can, in fact, be browsed in many ways. However, we can include a suggestion(s) on how to browse it. That corresponds to a suggestion on how to browse the class diagram. In our case of English composition, the suggestion is to begin on the essay level, with a link to that page. Beginning with this page, the three primary pages (essay, paragraph, and sentence) are linked in such a way that there is a continuity between each, which leads the user from the essay to the paragraph to the sentence level. This order reflects the most common tutorial method for helping student writers-begin working with the essay as a whole, then on the paragraph level, then on the sentence level. The essay page is linked to three definitions (subclasses on the model): argumentative essay, expository essay, and narrative essay. These are linked in the section on compositional structure to further define the type of structures used in the essay. At the end of the essay page, there is a transition and link into the paragraph page, as the essay consists of paragraphs. The paragraph page describes good paragraphing and is also linked to three definitions (subclasses): introductory paragraph, body paragraph, and concluding paragraph. Because these paragraphs make slightly different requirements of the writer, it is important for the browser to understand them. Again, at the end of this page is a transition, stating that to fine tune the paragraph, good sentences are required because the paragraph consists of sentences. This, of course, is linked to the sentence page. Finally, the sentence page explains in general the demands made on the writer by the sentence. This page is linked to an explanation of clauses, the building blocks of the sentence. 5. CREATING A WEBSITE BASED ON THE STATE DIAGRAM Let us now discuss the possible transformations of a state model. Similarly, as for the class model, there are three cases depending on the intended scope of information for each state: 1) A state corresponds to exactly one website page. 2) A state can be described by several website pages. 3) Several states can be described by one website page. As in the class diagram, the first case is the most straightforward. Each state is to be converted into one web page and each transition can be converted into one website link. Here, an interesting question arises about the how strongly we should enforce the transition condition. For example, in educational sites we might include an additional testing page for each transition to guide students better through the material. However, the choice should be given to the student to terminate the lesson or go to different states. This choice would result in additional links. In the second case there is an intention to describe a state with several web pages. To do this, we can modify the state model by including sub-states as shown in Figure 1. In the third case, there is not enough material to create a separate page for each state, and therefore they are combined in one website page. In this case, a super-state is created by drawing a rectangular box with rounded corners around selected for compression states as shown in (Embley 1992). Since sub-states can also appear in the initial diagram and can be implemented differently, we need to clearly identify the suppressed states. The resulting amended model maintains the structural integrity of the first state diagram while making it manageable to transform into a fairly simple website. The tests seen on our model made their way into a website as "backtracking" links, where if users have not successfully completed part of the composing process, they are linked back to a previous page to try and remedy their problem. This backtracking created some difficulty in maintaining the links, because any page might have had to be linked to previous pages as well as the following page. This is where having the state model, a visual representation of this very process, became especially useful. This website is slightly more interactive than that one based on the class model, because this site not only describes the activity of composing, it takes the viewer, in this case the tutee, through the process. This higher level of interactivity makes for a more complicated link structure, but allows for less freedom in browsing. The complicated link structure demands of the viewer a certain path, though it could be different each time. In fact, if users are unable to pass the "tests," or the criteria for moving on to the next stage of writing, they could theoretically be stuck in a loop forever. Because this website is focused on the writing process, it does not offer users an index page for independent browsing of the individual web pages; rather, they are taken through the process from beginning to end, but with the ability to backtrack if one step is not carried out properly. The tutorial begins with the prewriting page. It contains a description of some prewriting methods: brainstorming, webbing, free writing, and researching. This page is linked to the planning page. The planning page discusses organizing a composition and follows the prewriting page because this is the next step in the writing process. It gives an example outline and a brief treatment of ordering techniques for different kinds of essays. This page contains a good example of the backtracking that the site uses to test the completion of each phase when at the end, it asks if there is sufficient information for an essay. If there is not, the user is to follow the link back to the prewriting page. Likewise, if outlining has not provided a logical progression of ideas for the essay, the viewer is to follow a link back to a flag at the top of the planning page in order to rethink the ordering of the composition. Finally, there is a link to the composing page if those two tests are passed. The composing page describes the order in which paragraphs are actually drafted, beginning with the body paragraphs and on to the introduction and conclusion. It contains links to the prewriting and planning pages as solutions to why the drafting process might go slowly, and at the end is a link to the next step, revising. This page describes the order in which one usually revises a composition: first at the essay level, then the paragraph, and finally the sentence. It, like the last two pages, is linked to the prewriting and planning phases to be followed if the essay is lacking in information or structure. Because this is the final phase, there is link congratulation (final) page. 6. MERGED WEBSITE Each of the websites created from independent class diagram and state diagram show only one aspect of the presentation subject. In our case, the second website described an activity, but it could have benefited from the kind of static information provided by the first site. Likewise, the first site gave no advice as to how to enact the information it provided in writing an essay, but rather just described the components of a composition. The models need to be merged to completely represent the presentation subject. The state model usually becomes the real basis for the merging for two reasons. First, it is more attractive as a tutorial because it is more interactive. And second, it is much more natural and easily adaptable, because to make it fit the needs of the class model site, it would demand major revision. In our website, for example, it would have to be revised to treat essay level, paragraph level, and sentence level composition processes separately. The merging of these two models needs to be done carefully by including additional relationships between states and relevant classes. The merged model can be transformed into website templates using the same rules as those described above. In our case, prewriting page was linked to the essay page, because the essay page contained information about selecting a topic, part of the prewriting phase. It was also linked to the argument, exposition, and narration pages, previously linked only to the essay page. This was done because the method of prewriting depends on the type of essay being written. For a similar reason, the planning page was linked to the essay page. The essay page not only gave another sample outline, an item described in the planning page, but it also gave information on which type of order to use for different types of essays. The planning page was not linked directly to the argument, exposition, and narration pages because they were already linked to the essay page. Here, they could not be taken out of the context of the essay as they could for the prewriting page, because the user first needed the treatment of structure located on the essay page. The drafting page was also linked to pages originally in the class model site, specifically the introductory, body, and concluding paragraph pages. These three definitions clarified the drafting phase, because the order in which one writes these paragraphs is important. The drafting page was not linked directly to the paragraph page, because the criteria of a good paragraph will really only become important in the revising phase. At this point, we are encouraging the tutee to just write and then come back later to make sure the paragraphs are unified and well structured. For the same reason, the drafting page was linked to neither the sentence page nor the essay page. However, all three of these pages-the essay, paragraph, and sentence pages-are linked in the revising page. Because these three pages contain the criteria one is looking for when revising a paper, it is appropriate that these pages occur here. None of the smaller pages are linked to the revising page because they are important only by way of their "umbrella" page. Actually, while some pages might not be linked in the body text, all of the main pages are linked at the bottom of every page in the site. This inclusion was to allow the user some freedom in browsing if not interested in going through the tutorial. In this way, the merged site retains the ease of browsing characteristic of the first website. In fact, the index page was revised to include the main pages from the process site as well, so the site can still be easily browsed much as the first site could be. Furthermore, the essay page retained its link to the paragraph page, and the paragraph page to the sentence page, so if the viewer were interested in browsing the first site much as it first appeared, this is still possible by beginning at the essay page. The website resulting from the merger of this site with the process site is valuable because it provides both a tutorial and general information for browsing, the strength of this first site. 7. EDUCATIONAL WEBSITES This example of how diagrams become educational Websites is meant to illustrate the first advantage of the UML in education-the creation of such Websites. Because the UML makes the process of creating a site more manageable, it allows educators to more easily create tutorials. It also makes the complex link structure of a more interactive tutorial, like the composition process tutorial described above, accessible to amateur designers. For example, the current trend in online writing help is the Online Writing Lab, or the OWL. While providing valuable information and powerful search tools, these OWLs are seldom more than a collection of articles. The tutorial site created in this project, however, is much more interactive. The student is not forced to read lengthy articles off of a computer screen. Rather, students are part of the tutorial process, making choices as to where to go next depending on their advancement in the process. While there is an implied freedom to "surf" here, beginning with a state diagram produces a Website that, as we have demonstrated here, encourages the student to follow a predetermined direction. But because it does not force students, they are allowed to follow at a pace more suitable to them. 8. APPLICATION OF THE UML AS A LEARNING TOOL The UML is also valuable in itself as a learning tool. In addition to educational pages being created more effectively using the UML, it can be used to teach site authoring as well. Hypertext, if not the new model for both reading and writing, certainly will become and is becoming an important facet of literacy. Creating a simple Website, for example, is no longer an assignment reserved for beginning computing courses. It is now included in beginning writing courses as well. Website design, however, demands of authors an attention to details they previously would not have encountered, not simply in the technology involved, but in a new kind of organizational strategy. A website combines media and can be interactive, including complex link structures. Outlining, the favorite technique of writing teachers explained above, no longer suffices in maintaining this complex structure, literally a web. Understandably, students, particularly those with little computer experience, may become overwhelmed by this assignment. But this modeling approach, intended specifically for the website assignment in a beginning computer course, allows students to visualize their sites before they ever sit down at the computer. In this faculty, the UML functions much as the writing teacher's outline. By building a model on the subject of the website, students are given a preliminary idea of what major sections that website might entail. By revising this model into a template, the structure of the site is determined so students can concentrate on the textual and visual features of the pages. Future revisions of the site will be more efficient, as the model will show where links need to be changed, deleted, or added. Just as the outline makes the material collected for a paper manageable, the model makes a seemingly unwieldy new tool-the Web-approachable even for the student. The results will be less anxiety on the part of the student and better quality, more sophisticated Websites for the teacher to evaluate. 9. SUMMARY The UML, though created and used for software design, is not specific to that area; e.g. it can be used for website design, as we have shown in this paper. The process of website design, because of the multimedial and interactive nature of the web and the need for frequent updates, makes new demands on authors trying to create and maintain some structure in their products. Using UML can both improve a site's design and make it easier to revise that site in the future. We identified three types of UML diagrams that can be useful for Websites modeling: class diagrams, object diagrams, and state diagrams. These diagrams can be the good basis for Website template construction. We have shown rules for converting them into Website templates and demonstrated this conversion with the example of English composition. Using an English composition tutorial as an example is not a random choice. While the UML can be used to create teaching tools and is particularly useful in creating a tutorial Website, its real value is in its application as a teaching tool. As educators embrace new modes of writing that include hypertext and assign students from all disciplines the creation of Websites, we must develop methods of bringing this technology to the student. Because the Website is a kind of composition, it would seem to come under the domain of the writing teacher, but it in fact requires the cooperation of computer teachers and perhaps even graphic design teachers. The application of the UML in Website design is one such collaborative effort. 10. REFERENCES Booch, Grady, James Rumbaugh and Ivar Jacobson, 1999, The Unified Modeling Language User Guide. Addison Wesley, Glenview, Illinois. Embley, David, Barry Kurtz and Scott Woodfield, 1992, Object-Oriented System Analysis-a Model-Driven Approach .Yourdon Press, Upper Saddle River, New Jersey. Keene, Michael C. and Katherine H. Adams, 1999, Easy Access: the Reference Handbook for Writers. 2nd edition. Mayfield, Mountain View, California. Rosa, Alfred and Paul Escholz, 1999, The Writer's Brief Handbook. 3rd edition. Allyn and Bacon, Boston. Rumbaugh, James, "Objects in the Constitution: enterprise modeling." Journal of Object Oriented Programming. January 1993. Rumbaugh, James, Ivar Jacobson and Grady Booch, 1999, The Unified Modeling Language Reference Manual. Addison Wesley, Glenview, Illinois.