The Mapping Problem: From Data to XML and Back		Table of contents		Indexes		A new metaphor for editing structured documents

Using XML in a Teleeducational Tool

Liliana Patricia Santacruz Valencia

PhD. Student

Universidad Carlos III de Madrid Avenida de la Universidad 30
Madrid Leganés Spain 28911
Phone: 34-91-6249959
Fax: 34-91.6249430
Email: liliana@it.uc3m.es Web: www.it.uc3m.es/~liliana

Biographical notice:

Fernández Panadero, Mª Carmen

Universidad Carlos III de Madrid

Liliana Patricia Santacruz Valencia is an Electronic and Telecommunications Engineer from the Universidad del Cauca in Colombia, actually she is a PhD. Student in the Universidad Carlos III de Madrid in the Communication Technologies program. Her research interest is the application of the Information technology and telecommunications in the educational process, specially Teleeducation

Mª Carmen Fernández Panadero

Universidad Carlos III de Madrid Área Ingeniería Telemática, Dept. Tecnologías de las Comunicaciones Avda de la Universidad, 30
Leganés Madrid Spain E-28911
Email: mcfp@it.uc3m.es Web: www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas

Biographical notice:

Torres Barberis, Liliana

Universidad Carlos III de Madrid

Liliana Torres Barberis

Universidad Carlos III de Madrid Área Ingeniería Telemática, Dept. Tecnologías de las Comunicaciones Avda de la Universidad, 30
Leganés Madrid Spain E-28911
Email: ltorres@it.uc3m.es Web: www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas

Biographical notice:

Delgado Kloos, Carlos

Universidad Carlos III de Madrid

Carlos Delgado Kloos

Universidad Carlos III de Madrid Área Ingeniería Telemática, Dept. Tecnologías de las Comunicaciones Avda de la Universidad, 30
Leganés Madrid Spain E-28911
Email: cdk@it.uc3m.es Web: www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas

Biographical notice:

Carlos Delgado Kloos is Full Professor of Telematics Enginering at the Carlos III University of Madrid. His present interests include among others electronic publishing, tele-education and e-commerce. He has been and is presently involved in many projects with European (Esprit), national (Spanish Ministry) and bilateral (Spanish-German and Spanish-French) funding. He has published over 50 articles in national and international conferences and journals. He has further written a book and co-edited three.

García Rubio, Carlos

Universidad Carlos III de Madrid

He holds or has held various posts in national and international bodies such as: vice-president of IFIP TC 10, secretary of IFIP WG 10.5, editor of the Springer journal `Formal Aspects of Computing', subdirector of Telecommunication Engineering at his University and manager of the National Programme for Information and Communication Technologies at the Spanish Ministry. He has been programme committee member or chair at more than 30 conferences and workshops, among other vice-chair of the IFIP'92 World Computer Congress.

Carlos García Rubio

Universidad Carlos III de Madrid Área Ingeniería Telemática, Dept. Tecnologías de las Comunicaciones Avda de la Universidad, 30
Leganés Madrid Spain E-28911
Email: cgr@it.uc3m.es Web: www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas

Biographical notice:

Carrasco Sanz, Jose Luis

Universidad Carlos III de Madrid

Jose Luis Carrasco Sanz

Universidad Carlos III de Madrid Área Ingeniería Telemática, Dept. Tecnologías de las Comunicaciones Avda de la Universidad, 30
Leganés Madrid Spain E-28911
Email: jlc@it.uc3m.es Web: www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas">www.it.uc3m.es/~sebas

Biographical notice:

Introduction

HTML, Hypertext Markup Language

Web technologies were, as soon as they came out, immediately adopted for education purposes. Hypertext technologies had already been used before in learning systems, and the Internet facilitated the overcoming of distance. Bothtraditional and open Universities have then rushed to move their contents or develop new ones in HTML.

Everything was coded into a continuously changing HTML directly or in form of comments, when XML came as a fresh brise of air opening new possibilities and freeing authors from the rigid structure and limitations of HTML.

In this paper, we present how we have used XML and related technologies for the development of a Web-based teachning and learning system. The following section presents the possibilities enabled by XML in educational environments. Then, the overall architecture of our system SEBASTIAN is presented together with the metaphor we have used for the navigation of the student through the learning material. Following that, we briefly sketch the tool defined for the teacher and the one devoted to the student. Finally, we show how new technologies like this one can be succesively incorporated into the educational process in a gradual manner.

XML posibilities in educational enviroments

Since Internet has become an increasingly popular media, educational intitutions are interested in using it as a delivery platform for teaching and learning materials.

Advances in web technology are changing the learning paradigms. Higher education is undergoing structural changes in terms of composition of student populations, learning paradigms and curricula.

distance
education>

As distance education is becoming an integral part of secundary institutions, student bodies are expanding to include more non-traditional students and the contents are becoming richer than before and incorporate more interactivity. Instructional methods in academia are shifting from a teacher-centered paradigm to a student-centered paradigm. In this new paradigm students are more involved in class, thus collaboration becomes a more important component in the learning process.

With the advantages in computer networking and digital media technology, there is an effective framework to support active learning. The student interacts with others using a desktop computer. The same computer supports the active learning paradigm through its modeling capabilities. All these changes have brought new ways of representing the information (for example: animations, simulation, hypertextual navigation and so on). In particular, the introduction of multimedia contents in the web, althought with some difficulties, derived from the wide spectrum of data formats existing on the Web.

XML (Extensible Markup Language) plays an important role in the exchange of wide variety of data on the Web. It enables internationalized media-independent publishing, so companies can define platform-indepent protocols for data exchange and this information can be displayed in the way each individual prefers. XML underspins a number of Web mark-up languages and applications.

But, what is happening in the educational enviroment? XML offers many posibilities in this field, for example, using SMIL in multimedia contents synchronization process can enrich the educational material. Some enterprises have developed languages oriented toward the creation of interactive speech application.

Navigation through documents or in a single document requires a proper management in agreement with an addressing scheme, making it easy to move across the course lessons. It is posible to combine other languages, for example XLL, XSL, inside educational applications because XML separate document content of the presentation itself, which generates new presentation possibilities for a single content and enable contents labeling based on logic structure, interactivy level, learning difficulty, resources, etc.

The use of XML open a wide spectrum of posibilities for design and presentation of high quality materials for a particular educational or training purpose.

Architecture

key driver of the design is to provide flexibility in the following areas:

Development platform. To provide access to the application from any type of workstation that allows Internet access.
Development tools. To provide not only a simple XML and SMIL editor but to allow the user to select another commercial editor depending on his preferences.

Style of interface. To allow different skilled teachers delivering applications to different groups of students according to their knowledge level and pedagogical objectives. The result would be a single application that would provide multiple ways of viewing information.

Content. To support different formats, different levels of difficulty, reusability of contents, etc.
Integration. To allow integration of the applications with existing utilities of printing, video-conference, etc.
In order to maximize this flexibility, the proposed system has a modular design consisting of three main layers:The Application Design , theSoftware Architecture and theSystem Architecture .

Within theApplication Design we must separate the "content" from the "personality" of the application. The content will be formed for all multimedia files,HTML pages, etc used during the course (audio, video, animations, java applets for simulations, etc.) as well as the SMIL files that allows to assemble and synchronize these multimedia content. XML files storing information about all the data related to he course (content tagged with difficulty levels, etc). The personality of the application resides in the metaphors that define the type of interaction with the user, the mechanisms of navigation through the application and all the files that store information about configurable issues for different scene (selectable areas, associated events, type of interaction with the user, etc.), for exercise customization or for applet simulation.

Technical Architecture. This layer provides multimediasupport for the presentation of the application (files responsible on multimedia delivery as well as navigation management (JavaScript files which control the transition between scenes), objects responsible of the integrity of the system (security issues, error-handling, users services to support video-conference or specific telephony or IP protocols, etc.

System Architecture. This layer refers to all the aspect related to the hardware, network support,, user terminal, peripheral (screen, printer, camera, microphone, etc.)

The content will be expressed using XML to store information about different courses and administrative information. The personality of the application will be expressed using XML to describe different scenes and using Java and JavaScript to control transitions between them. While XML will describe the logical structure of data in the course (content, administrative, etc.), we will use XSL to display information in XML browsers or to convert XML to other languages in order to use different display devices or to provide different information depending on the information spaces (printed material, on-line presentation over LAN connection, on-line presentation over Internet, off-line courses, etc.) (See Fig.1).

System Architecture

XSL ((Extensible Stylesheet Language)) is a language for expressing stylesheets and it consists of two parts:

A language for transforming XML documents and a
XML vocabulary for specifying formating semantics.

Our application will use the formating vocabulary only to display XML documents in an XML browser, but the application take advantage of the transformation step in two ways:

Transforming XML document modifying its structure in order to provide different versions of the document depending on their future use (printed version, on-line presentation, etc.)

Transforming XML document in other languages to make them available in different devices for example transforming to well-formed HTML to see it in a simple browser or converting in MHEG format to view it in a TV-set via a Set-Top box.

In this document we explain only the aspects related to Application Design which will be the only accessible layer for the teacher in the first prototype.

Description of the Metaphor

The metaphors throw which the student will navigate around the application are one of the key-aspects in our system. In the first prototype we'll provide a real life metaphor like a trip, but we are studying to use another metaphors like a space-travel, sea depth, etc.

In the trip metaphor we provide a global vision in which each course will be represented by a country, and each subject by a city. The subjects will be grouped in different ways : regions (or departments) , independent communities (or specialities), etc. Within each city(course) we will find different buildings (subjects) or urbanisations (groups of buildings) to represent intimately related topics(thematic areas). Inside a building(specific subject) we will be able to find different rooms that would be equivalent to the section within a (subject) in a book. From each room it will be possible to change among different floors thar will correspond with different difficulty levels of the(subject) .

Within the specified levels of granularity we will only make three-dimensional representation for city, building and room, that will be the different scenes that we are going make accessible in the first prototype. Each one of these scenes will have help-mechanism that allow the system to guide the student thorough the application. For instance a help mechanism in the application will be a animation character who will appear always accessible for the corner of the screen and that will provide information depending on the context where we are.

In the first prototype all the scenes consist of some common elements (tittle, background image, background sound, sensible zones, help-character, multimedia files and bookmarks).

The city scene consists of several buildings representing differentsubjects . The teacher could add such many buildings as he needs for a specificcourse . All the towns will content some special buildings :

Tourism Information : In this building the system recommend different tours according to the knowledge level of the student. The student provides this information filling forms.
Cafe . In this building students meet to talk using chat applications.
Library provides some books, tutorials online, bibliographical references, etc.

In the first version only a thematic building and the tourism-information will be accessible.

As all the buildings of the city are not accessible in a general view. The system will provide another navigation mechanism such as a map with a mark specifying where the student is situated. Clicking in a zone of the map will provide a more detailed view of this area, and when the user click on a building the system provides direct access to it.

The room-scene is the most complex. The scene is similar to an office and contains the following elements:

A screen for the visualisation of the multimedia presentations SMIL-files) or HTML documentation provided for the teacher for this item.

A bookcase for library. Clicking with the mouse on the different books in the bookcase we have links to bibliographic information (Amazon references, author's personal web-page, sites where the student could buy the book, etc.), on-line tutorials, links to related rooms , access to catalogues in different universities, and access for the virtual library of the system.

A bookcase for videotape library with videos related to the items mentioned in the room. When the student select a video in the bookcase could see it full screen.

A teacher behind a table. The teacher is the person who explains content in this room. Student could click on it and view his personal page or in the future to establish a video-conference with him.

On the table we have several objects the user could click:a mail box (to send a mail to the teacher), a telephone (to see the telephone number o establish an audio-conference in the future), an address-book with the e-mail or URLs of other students who follow the course, professors, and related work groups. A dictionary of terms and key concepts(glossary), a notebook to allow the student taking notes during the lecture and a shared blackboard.

In every room it will be possible to access other levels in the same room and to go to the laboratories and exercises. In the next versions of the prototype will be possible to include new help-mechanism like guided tour with promotional videos of the different countries (courses) that show most interest places (lectures), emblematic buildings (concept, etc.)

Course Curriculum

Every course could have only one coordinator and several instructors. The coordinator could specify the course structure in two ways:

Using an XML editor and tags to specify diferent aspects in a course (objetives,author,course sequencing, evaluation method, bibliography, etc.)

Using the teacher tool that allows change configuration parameters with a mouse click over diferent scenes in our methaphor (for example, a click on the help-character allow to change the character image, his voice, the way he move over the screen, etc).

In the same way the instructors could design his lesson or lectures:

Editing SMIL orMHEG files
Using the teacher tool that provides several templates for exercises, presentations, etc. Every template is written in XML teacher could:

Create new templates

Select a template (for example a slide-show) and click over each region to configure different parameters (size and position of different regions, different images for the slides, duration for each image, syncrhonization points, etc.)

This is an example of a SMIL file used to sinchronize a video of the teacher speaking with some slides showing concept-diagrams, and the transcription of the lecture in a HTML file. The aplication include some JavaScript sentences in the HTML file to automatically scroll the page to synchronize the text displayed in the window with the instructor talk.



<smil>
<head>
<meta name="title" content="First Prototype"/>
<layout>
<root-layout id "Presenter" title="First
Prototipe" height="400" width="600"/>
<region id="Video" left="5%" top="5%" height="36%"
width="21%"/>
<region id="Slides" left="40%" top="5%"
height="90%" width="62%"/>
<region id="HTML" left="5%" top="50%" height="45%"
width="21%"/>
</layout>
</head>
<body>
<par>
<video id="avi1" region="Video" src="clip001.avi"/>
<text id="text1" region="HTML" src="scroll.html"/>
<seq>
<img id="img001" region="Slides" src="img001.gif"
dur="9s" />
<img id="img002" region="Slides" src="img002.gif"
dur="9s" />
<img id="img003" region="Slides" src="img003.gif"
dur="17s"/>
<img id="img004" region="Slides" src="img004.gif"
dur="58s"/>
<img id="img005" region="Slides" src="img005.gif"
dur="23s"/>
<img id="img006" region="Slides" src="img006.gif"
dur="41s"/>
<img id="img007" region="Slides" src="img007.gif"
dur="7s" />
</seq>
</par>
</body>
</smil>

In the next section we specify in more detail the configurable parameters in the teacher tool.

Teacher's Tool

It is necessary to distinguish the tool for the creation of courses from tools for the creation of content. The teacher's tool makes reference only to the creation of courses although it will allow to call to external content editing tools. The first prototype version only provided access mechanisms to the first layer of architecture (Application Design). It only allows:

To modify the different background city images, inside buildings and inside rooms (this alows a great flexibility in the interface design).
To vary physical selectionable area location to fit it to the background image.
To modify environmental sound and the animations that approach us to the buildings.
To create SMIL files for the central presentation or modification of one of the predetermined template.
To personalize the simulation templates provided for simulations and exercises.
To locate the different resources in a virtual city: bibliography, related groups addresses, tutor's URL, etc.

We have divided the process of creation in several phases:

Selection of contents. The teacher has new communication forms to present the different concepts from his students. The first phase consists of compiling didactic materials (multimedia files, information on the matter to impart, processing or compilation of simulations and exercises related to the subject, bibliographical material, etc.)

Identification of the target group. The teacher has multipe students with different knowledge levels and different educative necessities. He must define different levels of difficulty about the content and the accessibility of each user type to the material. All this is reduced to a labeled process of the different contents, by means of the own EML labels being transparent to the teacher.

Each one of the didactic resources is comteplated in one of the scenes of the general metaphor (bibliographical resources in the bookcase of the scene room, simulations in the laboratory, etc.) But the main resource for teaching is the central screen of the scene room where there are assemblies multimedia processed by the teacher. That is to say, the presentation.

The presentation process requires the creation of a SMIL file. Therefore, it is necessary the preparation of a script in which is specified the region where each element appears, its duration and position in the time line. More frequently basic templates used will be provided (synchronized audio and slide sheets, synchronized video and text items, etc). In this phase also is necessary to establish the hyperlinks that alow to jump in run time to different points of the presentation.

The simulation elements (generally java applets) can be included directly and basic templates for the exercises will be provided (multiple selection test with or without images, exercises tha allow to drag a graphical element to an adapted site, etc.). Each one of these examples will come accompanied from the information necessary to personalize the actions to make in case of right or correct wrong.

Student's tool

The student's tool is the application used by the students to attend a course. Its navigation system is flexible enough to support attending the course in different ways: right from the beginning, resuming the course at the point he/she left it last time, or as a reference book (just to consult a topic).

The student's tool can show the information of a course with different layouts (see figure 2):

Navigation

Sequential layout, with the contents of the course displayed one after another, following a time or a logical order, as in a guided tour.

Squared layout, suitable for highly structured information, with all the subjects divided the same way (with the same sections and subsections). For example, a course on a certain kind of diseases, all with the same structure: description, symptoms, diagnosis, treatment, etc. With an squared layout, students can choose to follow the course vertically (studying each disease independently) or horizontally (comparing the symptoms of several diseases).

Hierarchical layout, suitable for courses with concepts of different levels of complexity. In this layout, a table of contents helps to navigate through the course, and to have a clear view of the organization of the whole course.

Relational layout, with lots of links connecting related concepts, as is the Web. With this layout, you find the information you search very quickly, following different paths, and jumping to other related information.

scenary
transition

Transition Scenary

In order to take advantage in an efficient way of the didactic resources that offers this new technology, a new conception about teaching is required. The teacher's role changes and that needs a continuous training both in technical and pedagogical aspects. An evolution, in this sense, requires a long time and a cross disciplinary cooperation for the production of the new materials. This change must be gradual and so we offer several transition scenarios in which to take advantage of the structure of our tool to re-utilize the existing resources.

Scenario I : Usual class with slides

One capacity of our tool could be the possibility to attend asynchronously a session with slides.

Present situation

There are many presentation tools which synchronize video, audio, text and slides.

Future situation

This functionality could be extended with our metaphor in the following way. Each one of the classes will be in one of the rooms. In the central screen we could see the slides and we could synchronize them with audio and video.

The advantage will lie in the integration of this class with others about the same theme (in the same building), of the same subject (in the same town) and the same career (in the same country).The class could be seen as something isolated as a part of a more general whole.

Also, we could attend classes at different levels (differents plants in the same building) given by the same or different specialists.

In the more advanced version of the tool, when we develop the personalization, the pupil could choose between several teachers who teach the class with the same set of slides.

One of the main advantages would be the use of SMIL as the synchronizing language of the multimedia contents which would allow us to have this new paradigm available in the web.

In the basic scheme of a room we could include a bookcase to access related resources, a bookcase for videotape and the opportunity to communicate with the teacher by audio, videoconference or e-mail.

Scenario II: workshops, summer courses

Another education scenario in which the new technologies can be employed is in workshops, conferences and so on. In this scenario, the process is synchronous, although the conferences could be recorded and seen asynchronously.

Present situation

Nowadays, this method is used to link two or more lecture halls. In each of them, there are several speakers and one screen to see the other.

The speaker can be in any of the rooms and all the participants have access to the same information (in the same room or through the video screen).

Future situation

One of the advantages of our application is the integration into a context to give the user a general view.

Each one of these virtual classrooms which develop a same theme could become one of the rooms. But in the forums case, which develops simultaneous conferences about several themes, we could think in an integration environment where the application shows the different rooms of the building and what's going on in each one.

Conclusion

With the incredibly fast changing technologies evolving around the web, no system solution can be said to be definitive. New and no doubt better language and infrastructure technologies will appear even before the previous ones are tested. But this is no excuse for remaining passive. We nevertheless think that XML offers -in its present or any future form- defines a paradigm with an incredible amount of freedom and power for the design of web-based systems.

Acknowledgments

The work reported in this paper has been partially funded by the project07T/0015/1997 of the Spanish CAM . We wish to acknowledge fruitful discussions with our colleagues Vicente Luque Centeno, Peter T.Breuer, Natividad Martínez,Luis Sánchez and Salvador López M. of theUniversidad Carlos III de Madrid .

Bibliography

Bib1: Tim Bray, Jean Paoli, and C. M. Sperberg-McQueen (eds): XML: Extensible Markup Language (XML) 1.0, W3C Recommendation, 10-Feb-1998, http://www.w3.org/TR/REC-xml
Bib1: James Clark, Stephen Deach, Extensible Stylesheet Language (XSL), W3C Working Draft, 16-Dic-1998, http://www.w3.org/TR/WD-xsl
Bib6: MHEG Centre. http://www.mhegcentre.com
Bib2: I. Ali and J.L. Ganuza, Internet en la Educacion, Anaya Multimedia(1997)
Bib2: C.Bastos, El Collage Multimedia, Actas IV Jornadas Informáticas(1998)
Bib2: A. García-Valcarcel, F.J. Tejedor, J.L. Rodríguez (Coord.), Perspectivas de las nuevas tecnologías en la educación (1996)
Bib2: R. Peña, La educación en Internet: guí para su aplicació práctica en la enseñanza (1997)
Bib2: R. Steinmetz, k. Nahrstedt, Multimedia: Computing, Communications and Applications (1995)
Bib3: The Style Manual Yale University http://info.med.yale.edu/caim/manual/contents.html


The Mapping Problem: From Data to XML and Back		Table of contents		Indexes		A new metaphor for editing structured documents