USING STANDARD MARK-UP IN THE DESIGN AND DEVELOPMENT ...

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

USING STANDARD MARK-UP IN THE DESIGN AND DEVELOPMENT OF WEB EDUCATIONAL SOFTWARE Baltasar Fernandez-Manjon, Antonio Navarro, Juan Cigarran, Alfredo Fernandez-Valmayor 1) Abstract In this work we address the problem of the design, development and maintenance of Web educational software. In our approach, the Web is conceived as a hypermedia system with “very long” links and the markup language as a tool that can capture the most essential features of an educational application. We think that beyond HTML, mark-up languages based on SGML can be used with a double purpose in the construction of educational software. First, to organize the content of educational applications in a standard machine readable form, and second to describe the structure of the application itself, including meta-information about educational decisions underlying the application. Main benefits from this approach include the formal description of “design documents” that can be easily created and modified by designers and clearly understood by programmers. Finally this paper describes how this approach has been applied to the construction of an educational application for teaching partial competence in a second language.

1. Introduction The Web can be conceived as a hypermedia system with “very long” links, i.e. links between documents dispersed over the world [11]. This hypermedia system is primarily written in HTML (Hypertext Markup Language) a markup language which is a specific application of SGML (Standard Generalized Markup Language) [2]. We consider that beyond HTML, SGML is a powerful tool that can be used not only to produce Web documents, but also to capture the most relevant characteristics of complex and highly interactive educational hypermedias in a way that will easy its design and maintenance. A discussion about Web educational uses and the changes that the use of markup languages can bring to educational software is out of the scope of this paper and can be found in [5]. Hypermedia systems can be characterized by the conjunction in the same system of multimedia and hypertext. We understand by multimedia the integration of video, sound and images along with standard text in the same document, and by hypertext the possibility to access to text that is not

1 Escuela Superior de Informatica, Universidad Complutense de Madrid, Avda. Complutense s/n, 28040, Madrid, Spain. e-mail: {balta, anavarro, juanci, alfredo}@sip.ucm.es

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

physically in the actual screen (using a link to some other text in the same application, in the same system or to another system through a network). The design, development and maintenance of a multimedia application can become more and more complex as we increase the educational component of the application. The design and implementation of pedagogical strategies, the adaptation of the application’s content to different kind of students and the planing of student’s interactions are complex and time-consuming activities. These difficulties become evident when defining a detailed design document that could be at the same time, clearly understood by programmers and easily created and maintained by designers. Thus, we need techniques to simplify the systematic description and production of educational hypermedias, specially in the areas of maintenance and designersprogrammers interaction. Current approaches to hypermedia design and production can be classified into two research directions: hypermedia models and hypermedia (markup) languages. Hypermedia models (e.g. Dexter hypertext model and Hypertext Design Model) address the specification of generic hypermedias providing a set of tools to support the design and construction of these applications [8, 6]. Most of these models conceive the structure of a hypermedia system as a network of link-related chunks of information that can be displayed in the computer screen. However, these models do not address the description of the internal structure of these chunks of information. Other approaches to hypermedia design and production are based on specialized markup languages. The most interesting, from our point of view, are based on SGML, such as HyTime or XML [10, 15]. They are build on top of SGML, the standard meta-language for formally defining markup languages, and provide deviceindependent, system-independent methods to represent hypermedia documents. These SGML-based languages provide different facilities to improve the production of hypermedia documents (e.g. enabling multimedia synchronization over the time), or to simplify the distribution of these documents over the Internet. Our aim is to advance, in both directions, one step further using SGML technology as a educational tool. In the first direction, we use SGML to organize and structure, from a pedagogical viewpoint, the content of educational applications making them suitable for interacting, presenting and adapting information to the learner in a platform independent way. In the second, we focus our attention on the design and on the maintenance of educational applications by capturing in the SGML formalism the design and pedagogical decisions underlying the whole educational application (e.g. identifying requirements for support tools based on this formalism). We use SGML to describe the basic features of a hypermedia application, but in contrast with the two approaches in the previous paragraph, our efforts are focused on describing the internal structure of the elements of an educational application. This description provides the structure of the hypermedia system according to contents, with independence of system link structure or dynamic behavior. In addition, this description of the application elements can be authored by designers using a simple text editor, following the success model of HTML.

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

In this paper we present an overview of the most relevant hypermedia models and hypermedia languages. Then we introduce SGML and an example of how we are applying it in the development of the Galatea Project. Finally we conclude with a discussion of our results and future work.

2. Hypermedia Models and Hypermedia Markup Languages The need to simplify the description and production of hypermedia systems have promoted the development of hypermedia models and hypermedia markup languages. In the last decade several methodologies for systematic and abstract hypermedia modeling have been developed. The Dexter Hypertext Model divides a hypertext system in three layers: the storage layer, the within-component layer and the run-time layer [8]. In the storage layer the system is understood as a set of components, these components can be either, chunks of information or the links between them. In the withincomponent layer these components are considered as having an inner structure and content, but the model only describe these structure and content as far as it is needed to specify link’s anchors (link’s source and target). Finally, the run time layer specifies the on-screen presentation of contents and links. The Amsterdam Hypermedia Model (AHM) extends the Dexter Model providing synchronization structures that support time relations between components of the hypermedia system and introduces context as a way to show the presentation structure [9]. The Hypertext Abstract Machine on the other hand is a storage model that conceives the hypertext system as a set of nodes that can be visited, one every time [3]. The key idea underlying this methodology is the modelization of the hypermedia system links via a directed graph. The Hypergraph Hypermedia Model describes the hypermedia systems as a set of nodes that can be visited simultaneously introducing the idea of concurrent access to the contents [14]. In contrast, in the Hypertext Design Model , hypermedias are modeled as a database system, with entity types and their instances: the entities [6]. In this model the relations between entities are intended as navigation links and outlines are introduced as a way to provide structure to this unstructured view of a hypermedia. All these models focus on the navigational information space of the hypermedia providing a high-level description of the application. However, they do not consider the structure of a hypermedia system beyond the structure supplied by the links between the chunks of information and the on-screen presentation. Thus, these approaches do not capture the hypermedia contents structure independently of the navigation or the final rendering, which difficult reuse, maintenance and authoring. Other approaches to hypermedia design and production are based on specialized markup languages. From our view point, the most interesting languages are those based on SGML, such as the Hypermedia/Time-based Structuring Language (HyTime) or the Extensible Markup Language (XML). HyTime and XML are SGML specializations oriented to build markup languages for specific

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

tasks. HyTime is a standardized hypermedia structuring language for describing virtually any kind of connected (i.e. hypertext links) or temporal information (including synchronization) [10]. XML is a subset of SGML created with the goal of enabling generic SGML to be served, received, and processed on the Web in the way that is now possible with HTML [15]. Both of them produces specific markup languages to create hypermedia documents (i.e. documents containing marked data). These marked documents can be interpreted by a (specialized) browser that produces the on-screen presentation of the hypermedia information (i.e. the hypermedia application). Benefits of the markup language approach are a platform-independent description of the hypermedia at the content level, and that the application can be authored using only a simple text editor. The main drawbacks are the construction of specialized browsers to get the final rendering of the information, and the inclusion of the detailed data about presentational aspects that complicates the designers tasks. In our approach, we use SGML mainly as a tool to address the problem of design, authoring and maintenance of hypermedias. SGML is a simple but powerful tool to produce formal definitions of design documents understandable by designers and programmers, and to describe hypermedia contents. Presently, our final application is produced, from a detailed design document, using an author language (i.e. AuthorWare) which provides powerful and robust multimedia capabilities. We combine this language with specialized routines that get the on-screen information and its rendering data directly from SGML documents prepared by designers (e.g. the contextual dictionary). We apply these routines precisely to those documents containing the hypermedia information that designers find more difficult to create and to maintain. These documents contain basic information, such as questions and hints that designers want to offer students in helping them through the application; usually these informations will change multiple times during the processes of design and formative evaluation of the application. In addition, as a long term goal, we do not discard to use hypermedia languages to obtain more self-contained applications.

3. Galatea Project: Teaching Partial Competence in a Second Language Presently, our group is working on an EU project, called Galatea, aimed at developing educational applications for teaching partial competence in a second language. The goal of Galatea is to produce a set of multimedia/hypermedia tutorials for improving the written and oral comprehension of the Romance languages (see Figure 1). Complementary information about Galatea can be found in [5]. The pedagogical scenario of the tutorials we are producing is based on the selection of 10 different documents written in French and in a number of sequences of exercises that students can do on each of these documents to improve their comprehension level of the written text. The main goal of the tutorial is to promote students’ skills to understand a document even if some words or paragraphs are initially incomprehensible for them [12]. The tutorials also include general-purpose tools that students

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

can freely use: a dictionary, a contextual dictionary, a contextual grammar and a sound tool to listen how to read the texts with the special purpose of improving comprehension. The general learning strategy is to make easy for students to relate the properties and/or the syntactic and semantic features of each text with students' previous knowledge [1] and to transfer what they learn practicing with one text to the others. For instance, an exercise can ask the learner questions aimed at the correct classification of texts based on features easy to recognize (e.g. a journalistic, an advertising or a fiction text). Other exercises ask the students to identify the set of keywords that better identify the main topic of the text. Other exercises take into account the sets of iso-topic words or expressions in the text, that is the words or expressions belonging to the same semantic group (e.g. expressions related to time, or words about family relations). Students are also asked to recognize the temporal script of the narrative, that is the prototypical sequence of events implied by the main topic of the document, (e.g. the sequence of events in a fire).

Figure 1. Screenshot of the Galatea application for teaching partial competence in French.

3.1. SGML: content, structure and design The SGML standard definition describes in addition to other topics the capabilities of SGML as a metalanguage for creating mark-up languages for marking documents with structural, presentational, and semantic information alongside content [4, 7]. Thus, SGML provides not a set of standardized codes but a complete language that can be used to define precisely all he elements to which a particular kind of document must conform. This definition starts by an SGML declaration, which states mandatory and optional features, used in the rest of the definition. This declaration is followed by a prolog section where the capability of SGML as a metalanguage are used to create the document type declaration (DTD) which is the formal collection of element, attribute and entity declarations that describe what mark-up to expect in this kind of documents and optionally a link process definition

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

(LPD) to associate processing-oriented attributes with structural elements defined in the DTD without compromising DTD generality. Finally there is the document instance, that is the document itself with the actual mark-up. The real benefit of this flow is that a computer program, a SGML parsertranslator, can process the declaration and learn its rules, then process the prolog and learn the rules of the mark-up, and then process the document and determine if the document meets the rules and take the prescribed actions based on the processing-oriented attributes (but the semantics of these attributes are strictly left to the application). This way an SGML document can be processed by different programs on different platforms and with different purposes; each program can apply different processing instructions to those parts of the document instance, which are considered relevant.

Figure 2. Exercise to improve comprehension by the translation of the set of words related to the circus. After the evaluation of user’s answers the user can access the dictionary to look up the meaning of the words.

We use SGML in Galatea to produce two types of documents: a design document and a set of documents embodying Galatea actual contents. In the design document we use the markup as tool to describe with detail the actual application contents and its underlying philosophy. This is a document produced by designers and used as specification by programmers that must understand it in every detail. Programmers can include comments in the design document about the interpretation they have done about any ambiguous or unclear aspect. The second type of documents are the set of content documents. Designers provides the structure, content and processing-oriented attributes of these documents that are later processed by the specialized routines. During the process of building the hypermedia, designers can modify the content of these documents (conforming to the SGML specification) and the change is automatically updated in the application without any programming. This approach simplifies the sharing of documents and even the collaborative construction of repositories to be used for similar applications. The crucial point is that SGML techniques are standard techniques not only restricted to define the mark-up that captures the structure and content of

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

a document, but these techniques can be also used to define the mark-up of elements that are relevant to the learning strategies planned by designers. For example, in our application we can mark-up different kinds of information on each of the documents such as the set of text's keywords and various sets of semantically related words that designers think the student must be able to relate in order to get the meaning of the text (see Figure 2). These different elements and, till some extent, their planned role in the strategy designed to teach text comprehension are described in the DTD and LPD common to all the texts. 3.2. Example of SGML mark-up in the Galatea Project To illustrate some of the possibilities offered by SGML we give, in this section, a simplified DTD that represents the Galatea contextual dictionary type document (one of the content documents used in our application), along with one fragment of an instance of contextual dictionary. In our application, students once they have chosen a particular text to work with, they can freely get access to its associated dictionary. The DTD's dictionary provides the application with all the specific information related to our pedagogical strategy, the general idea is that the application must provide the student with an easy interaction with the text that helps her to understand the meaning of each word in context. A full discussion of other SGML features is out of this paper scope and can be obtained elsewhere [4, 7]. Generally, in a document we distinguish structure, content and format. The structure is the document logical organization. Content is the actual data in a document and format consists of how the elements are visually presented and distinguished one form another within the document. In the following discussion we will concentrate on the description of the logical structure of the document. To obtain the outline of the structure, it is necessary to identify which are the important parts (called elements) that made up our context oriented dictionary. In our case the root element is the dictionary itself and we conceived it as composed of the actual text and one or more entries each of then containing a sentence and a set of information elements about the sentence. The sentence information is composed by the sentence words, the morpho-sintax information, the definition of the words and optionally sociocultural information related to the words. Using SGML we can define our concept of educational dictionary with the following simplified DTD.

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

We can understand a DTD as a set of grammar rules to whom a document must conform. The structure defines how the document is laid out, which elements can be required or optional, if an element is repeatable or not, which subelements are contained in a specific element and in what order the elements are assembled. In the DTD we define the tags used to mark the elements of the real document. By default, the boundaries of an element will be given by the star-tag (written ) and end-tag (written ). For example, a sentence is enclosed between the tags and . #PCDATA means that an element contains characters and EMPTY that may be left unfilled. SGML also includes facilities, called attributes, to further describe the content of the elements and to establish cross-reference mechanisms (these structural- attributes are conceptually different from process-oriented attributes). The only pedagogical decisions reflected in this simplified DTD is our idea that a dictionary is a text and a set of entries that must be considered at the same time (and for that reason the student can see both at the same time in the screen), and that the entries of the dictionary are the sentences of the text, not the words, and that each sentence is associated with a set of pieces of information (see Figure 3). In a more elaborated DTD we would also express, using SGML element's attributes, which are the elements the student can actually interact. Each particular dictionary is represented via a document instance or marked document. In the marked document we employ the DTD tags to sign the document parts. We use tags that are as self explanatory as possible, this way is easy for programmers and designers agree over the structure of the dictionary. For example, in the contextual dictionary, the mark-up would look as follows (some elements are shown on separate lines and indented with the content in bold face for ease of reading, but it is not necessary):

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

The DTD and the document instance capture the information necessary to implement our educational strategy with independence of the presentation media. Thus, the remaining step is to decide about the final possible renderings of this information to the students and express then in the associated. The first benefit we have obtained from the approach outlined above has been in the designimplementation-test cycle.

4. Conclusions and future work A powerful communication resource like Internet can provide unprecedented opportunities for innovation in the field of education. In our approach we have conceived a WWW educational application as a hypermedia system. Using this approach we have found that traditional hypermedia models do not address conveniently the abstraction needed by educational applications, and that available markup languages (such as HyTime or XML) are primarily concerned with processing and presentation problems. In this paper we have proposed to use SGML as the basic tool to capture the most essential features of an educational application. We have found that main benefits from this approach concern to the design and maintenance process of educational applications. At present, we are working on the final completion of the (local) multimedia educational modules for partial competence in second language. The next steps on this research will be to produce a complete DTD for the design document and support tools for editing and adapting design and content documents. A long term objective of our project is to set up a prototype of a specialized educational Web browser able of interpret all the mark-up needed for an educational application as complex as our modules for teaching French text comprehension.

TEXTDICTIONARY

Text

Sentence Word Morpho-Sintax info Definition

Sociocultural info

Figure 3. Screen of the application contextual dictionary. The labels identify the different elements of the dictionary that appear in the DTD and the text fragment previously presented.

Davies, G. Wibe, J. (eds) Proceedings of Teleteaching 98, Book series of the Austrian Computer Society. 5th IFIP World Computer Congress, 31 Agosto - 4 Septiembre 1998, Vienna y Budapest.

5. Acknowledgements The EU project Galatea (TM-LD-1995-1-FR89) and the Spanish Committee of Science and Technology (TIC96-2486CE) have supported this work.

6. References [1] AUSUBEL D.P., The Psychology of Meaningful Verbal Learning, Grune and Stratton, New York 1963. [2] BERNERS-LEE, T., CAILLIAU, R., LUOTONEN, A., NIELSEN, H.F. AND SECRET, A., The World Wide Web, in: Communications of the ACM, 37(8), 76-82 (1994). [3] CAMPBELL, B. AND GOODMAN, J.M., HAM: A general purpose hypertext abstract machine, in: Communications of the ACM, 31(7), 856-861 (1988). [4] COLBY, M. AND JACKSON D., Special Edition Using SGML, QUE Publisher, 1996. [5] FERNANDEZ-MANJON, B. AND FERNANDEZ-VALMAYOR, A., Improving World Wide Web educational uses promoting hypertext and standard general markup language content-based features, in: Educationa and Information Technologies, 2(3), 163-206 (1997). [6] GARZOTTO, F., PAOLINI, P. AND SCHWABE, D., HDM: A Model-Based Approach to Hypertext Application Design, in: ACM Transactions on Information Systems, 11(1), 1-26 (1993). [7] GOLDFARB, C.F., The SGML Handbook, Oxford University Press 1990. [8] HALASZ, F. AND MAYER, S., The Dexter Hypertext Reference Model, in Communications of the ACM, 37(2), 30-39 (1994). [9] HARDMAN, L., BULTERMAN, D.C.A. AND VAN ROSSUM, G., The Amsterdam Hypermedia Model: Adding Time and Context to the Dexter Model, in: Communications of the ACM 37(2), 50-62 (1994). [10] HYTIME, The Hypermedia Time-based Structuring Language (HyTime), ISO/IEC 10774 (1992). [11] LENON, J.A., Hypermedia Systems and Applications: World Wide Web and beyond, Springer-Verlag Berlin Heidelberg 1997. [12] LOPEZ ALONSO, C., Comprehension et texte: role des cadres de connaisances et du prototype, in: Langages. Theorie et applications en F.L.E., 157-174 (1994). [13] SPERBERG-MCQUEEN, C. M. AND GOLDSTEIN, R. F., HTML to the Max: A Manifesto for Adding SGML Intelligence to the World Wide Web, in: Proceedings of the Second World Wide Web Conference '94: Mosaic and the Web, Chicago, IL 1994. [14] TOMPA, F., A Data Model for Flexible Hypertext Database Systems, in: ACM Transactions of Information Systems 7(1), 85-100 (1989). [15] XML, Extensible Markup Language (XML) 1.0, W3C Recommendation, 1998 [WWW document, URL: http://www.w3.org/TR/REC-xml]