Liliana P. Santacruz
Valencia,
Mª
Carmen Fernández Panadero, Liliana
Torres Barberis,
Carlos Delgado
Kloos, Carlos
Garcia Rubio, Jose
Luis Carrasco Sanz.
Área de Ingeniería Telemática. Dpto. Tecnologías
de las Comunicaciones, Universidad Carlos III de Madrid
http://www.it.uc3m.es/~sebas
Introduction
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. Both traditional
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.
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, interactive 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
A key driver
of the design is to provide flexibility in the following areas:
-
To provide access to the application from any type of workstation that
allows Internet access.
-
To provide not only a simple XML and SMIL editor but to allow the user
to select another commercial editor depending on his preferences.
-
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.
-
To support different formats, different levels of difficulty, reusability
of contents, etc.
-
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, the Software Architecture and the System Architecture.
Within the Application 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 the 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.
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.
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).
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 displayXML
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.
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 items (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 tool
it will be possible to change among different floors that 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 an 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 different
subjects. The teacher could add such many buildings as he needs for a specific
course . 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 or
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 on the distributed matter, a
notebook to allow the student taking notes during the lecture and a shared
blackboard.
In every room 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 different 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 or MHEG 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, synchronization
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 application 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
Prototipe"/>
<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 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 allows a great flexibility in the interface design).
-
To vary physical selectionable area location to fit it to the background
image.
-
To modify environmental sound (piped 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 allow 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 that 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):
-
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.
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 scenaries
in which to take advantage of the structure of our tool to re-utilize the
existing resources.
Scenary 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 shelve of access related
resources, a videotape library and the opportunity to
communicate with the teacher by audio, videoconference or e-mail.
Scenary II: workshops, summer courses
Another education scenary in which the new technologies can be employed
is in workshops, conferences and so on. In this scenary, 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.
The work reported in this paper has been
partially funded by the project 07T/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 the Universidad
Carlos III de Madrid.
Bibliography
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
James Clark, Stephen Deach, Extensible Stylesheet Language (XSL), W3C
Working Draft, 16-Dic-1998,
http://www.w3.org/TR/WD-xsl
MHEG Centre. http://www.mhegcentre.com
I. Ali and J.L. Ganuza, Internet en la Educación, Anaya Multimedia
(1997)
C.Bastos, El Collage Multimedia, Actas IV Jornadas Informáticas(1998)
A. García-Valcarcel, F.J. Tejedor, J.L. Rodríguez (Coord.),
Perspectivas de las nuevas tecnologías en la educación (1996)
R. Peña, La educación en Internet: guía para su
aplicación práctica en la enseñanza (1997)
R. Steinmetz, k. Nahrstedt, Multimedia: Computing, Communications and
Applications (1995)
The Style Manual Yale University http://info.med.yale.edu/caim/manual/contents.html
Ir a la página anterior