Recent Research Developments in Learning Technologies (2005)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
1
A graphical annotation platform for Web-based e-learning D. Giordano*,1, and S. Mineo1 1
Dipartimento di Ingegneria Informatica e Telecomunicazioni, Università di Catania, Viale A. Doria 6, 95125 Catania, Italy
A graphical annotation system for a distributed e-learning architecture is proposed. It is based on three components: 1) a database server that stores and retrieves annotations; 2) a client that allows users to create and search annotations; and 3) a PHP-based portal that processes the client annotations’ requests. The role of annotations for e-learning is discussed and technologies for web annotation are reviewed. The advantages of the proposed architecture and implementation for the annotation system are pointed out; these are especially relevant in the light of current developments of mobile learning, where contents are accessed through PDAs or hand-held devices which naturally afford pen-based interaction. Keywords Graphical annotation; Java; e-learning; mobile learning
1. Introduction Annotation, sketching and taking notes are commonplace activities that help the students to personalize the information they need to acquire, facilitate the assimilation of contents and support discussion with the instructor. The benefits of note-taking activites on cognitive processing and meta-cognitive strategies are well documented (e.g, [1]); recent studies on note-taking in collaborative computer environments, vs. traditional and computer-based media [2] suggest that any technology which can enhance and promote note-taking behaviors in on-line environments is likely to have significant benefits for learning. Most digital annotation systems proposed so far cater for textual annotation, whereas graphical annotation, which is often more appropriate in the case of visual contents and respectful of individual annotation and representational practices, is either not supported or available by means of rudimentary capabilities, poorly integrated with other applications. In this paper we present a graphical annotation system for a distributed e-learning architecture, based on three components: 1) a database server that stores and retrieves annotations; 2) a client that allows users to create and search annotations; and 3) a PHP-based portal that processes the client annotations’ requests. In the paper we first discuss the role of annotations for e-learning and review work on building annotation systems for web content. Then we describe the architecture of our annotation system and finally we report on its implementation and deployment.
2. From annotation to graphical annotation 2.1 The role of annotations To provide a sound basis for the functionalities to be offered by an annotation system it is important to understand first why and how annotations are used. Research on annotation practices [3] has shown that annotating text is an important activity used for manifold purposes, such as: bookmarking important sections, making interpretive remarks, and fine-grain highlighting to aid memory. Also, annotations are used to help understand text, and to make the text useful for future tasks. Interestingly, annotations are helpful for other readers even if they were not made with others in mind. Studies quoted in [4] have pointed out that each person sets up his own annotation system, by implicitly defining a semantic system *
Corresponding author: e-mail:
[email protected], Phone: +39 0957382371
© FORMATEX 2005
2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
A. Méndez-Vilas et al.: Manuscript preparation guidelines for authors of m-ICTE2005
between annotation objectives, visual forms, and content. When attempting to support these practices in the electronic medium, many factors influence usage patterns. One study of students taking notes during lectures on their laptops [5] points out that students acknowledge problems with drawings; in particular, of the many students declaring to rely on arrows and links to create structure in their notes, none was able to reproduce a similar strategy on their laptops. A study of people using the textual annotation capabilities of a commercial software to carry out collaborative software design over the Web [3] identified the factors influencing annotation. These included the orphaning problem, i.e., losing the annotation anchor which identifies, by means of a unique signature, the Web page paragraph the annotation refers to, thus resulting in an annotation visualized out of the context where it makes sense; also, above all, users said that they did not make annotations if they had a high level comment that was relatively difficult to express in text. Since plain text is relatively limiting in expressiveness, to provide a richer communication medium, two approaches can be followed: either to use voice annotation, as proposed in [3], or resort to Web graphical interaction, which is the approach of this paper. Graphical annotation can be underscoring, highlighting, circling text areas or parts of pictures of Web pages, or, if pen-based interaction is allowed, marking the text by pen. This solution is particularly attractive in the e-learning context. In fact, it is often difficult to abandon “conventional” ways to study, based on paper documents, notes and annotations on lecture notes: in spite of the fact that digital documents have better characteristics concerning ease of modification, distribution and search, paper still affords the advantage of easy, natural and quick annotation. If an annotation mechanism is available, is easy to use and does not distract the user from his or her the context, graphical annotations can be used both as a personal learning resource or they can be shared in e-learning environments, by stimulating discussions among students attending a given course and facilitating communication between student and instructor. Student/teacher and student/student interaction can become particularly fast and effective because graphical annotations, by visually and spatially referencing the document, facilitate understanding the note’s semantics. Thus the aim of this work is to recreate the graphical annotation functionality in the Web-learning context, favoring, at the same time, information exchange between users. The ideas of personalization and cooperation are at the basis of this work and have influenced greatly its implementation, given the available technologies (which are surveyed in the next section). By personalization we mean document enrichment with personal notes; by cooperation we mean the opportunity to exchange annotations and information on specific documents available in a shared space. Last but not least, the system must be robust enough to prevent annotation orphanage, flexible and easy to integrate with existing learning platforms and content management systems. 2.2 Web annotation technologies An annotation, in its general form, is a document that is attached to another one, in a specific position; a formal model of annotation is given in [4]. An annotation consists of an anchor (to the place in the document it refers to), a visual form (e.g., text, signs, colour), a context (who, when, where, for whom, why the annotation was done), the value (i.e. the content) and the access (public, private, group based). Although annotation is supported in many commercial products for document processing, these are not good for collaboration over the net, because files must be exchanged between users. Some commercial client-server systems to annotate any web page exist (e.g., ThirdVoice, http://www.thirdvoice.com). These allow the users to attach to the Web page sticky notes containing text, and these notes are visible to people with the same plug-ins. However, these products are not meant for collaboration within members of an organization or of a learning community, and may generate a proliferation of graffiti, i.e. undesired annotations on major web sites [3]. In the WWW scenario, to annotate a document and keep its integrity, the annotation must be saved in an “annotation server”. By specifying the server URL, when a user needs to access his/her annotations the browser visualizes the original document where some markers indicate that a note exists; by clicking on the marker the annotation will be visible and/or modifiable according to the permissions that the user has on the annotation server. Among the W3C projects on annotation, the most relevant are Annotea
© FORMATEX 2005
m-ICTE2005 http://www.formatex.org/micte2005
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
3
(http://www.w3.org/2001/Annotea), which is the reference standard of W3C for annotation and OntoMat (http://annotation.semanticweb.org/ tools/ontomat). These projects rely on technologies for the semantic Web, i.e., XML and RDF (Resource Description Framework) to represent information. Both Annotea and Ontomat use the RDF standard to describe annotations, and, albeit differently, resort to the notion of ontology, which is important to facilitate retrieval on the Web and to share information. In Annotea, annotations are stored in the server as metadata; on the client-side, the browser must be capable of implementing the Annotea specifications, in particular, it must allow the user to navigate as usual, to save the annotation locally, or to save it, if requested, in an annotation server (with which it communicates by using HTTP) the annotation in a RDF format; the only requirement is to know the address of an annotation server. Among the collaboration functionalities, Annotea offers the possibility of replying to annotations. Ontomat is able to classify pages according to specific ontologies, and to generate annotations by highlighting relevant parts of the Web page and creating a new instance on a drag and drop basis; however it does not offer collaboration functionalities. These approaches support the exchange of textual data to be attached to Web pages, but do not allow the treatment of graphical elements. This is a shortcoming in the e-learning scenario, and in general, in any context where collaboration needs exchanges of visual information.
3. Architecture of the graphical annotation platform The proposed graphical annotation system has the architecture shown in Fig.1. On the client side there is the Web Annotator Plug-In, that is an application developed as a plug-in for Internet Explorer enabling the user to create and save, by using a tool panel, graphical annotations on screenshots of Web pages. Once annotated, the image can be sent by e-mail to other users, or to the Graphic Annotation Server, where it is stored and indexed. Overall, the Graphical annotation service is organized as shown in Fig. 1. The Graphic Annotation Server comprises a WEB Server, a Web application to manage annotations and a database to store them.
Fig. 1 Architecture of the developed graphical annotation platform.
The database stores and manages information about the users (username, password, courses, rights) and about the annotations: (e.g., courses, URLs of the page being annotated, text content). The Web application is written in a Server-side language (i.e., PHP) and interacts with the database to generate dynamic web pages. PHP has been chosen because it is portable and well supported, and, in general, a LINUX/APACHE/PHP/MYSQL solution is more economic than other proprietary systems; however, IIS (which also supports PHP, provided that an additional module is installed) was the Web server chosen to better ensure compatibility with e-learning platforms, since most of them require IIS.
© FORMATEX 2005
4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
A. Méndez-Vilas et al.: Manuscript preparation guidelines for authors of m-ICTE2005
The Web application in the Annotation server has the following functions: users’ login and authentication; accept page visualization requests from the users; check whether on these pages there are annotations that can be visualized based on the user’s rights; search annotations; insert annotations; read annotations. The e-learning platform hosts the learning materials and closely interacts with the Graphic annotation server, for example by taking care of the user authentication process. The Web Annotator Plug-in, on the client side, has been implemented with Explore Toolbar Maker (Text Reader) and adds a new toolbar to those already available in Internet Explorer 5.0 (Fig. 2). The buttons allow the user to: 1) create a new annotation, 2) read his or her personal annotations, 3) check whether the current page has been annotated; 4) user login and logout; 5) search by keywords the annotations archive; 6) visualize the user profile; 6) register a new user.
Fig. 2 Web Annotator toolbar.
After authentication, the user can browse any Internet page, also external to the e-learning portal. When he/she needs to annotate the page (for example to request a clarification to the instructor), by pressing the “New annotation” button, the Java Web Annotator is launched. The Web Annotator is the software at the core of the Plug-in, and has been written in Java because this language offers powerful classes to manage URLs, e-mail protocols, and network functions to retrieve and send information to the annotation server. In particular, Web Annotator exploits a Java micro-browser with a light version of HTML that is able to visualize a web page written in HTML, PHP, ASP or TXT, but that at the current stage does not support Flash, CSS, Applet Java and Javascript. Once the Annotator is launched, a portion of the Web page can be grabbed and the annotation tools panel became available (Fig. 3). These tools include standard graphic functionalities, i.e., hand drawing, line size and colour choice, predefined graphic elements (squares, circles), inserting a textual Post-it anywhere in the image, plus deleting, undo and saving functions. The annotation can be a JPEG, GIF, or PNG file, and can be saved locally, or sent to the Annotation server, or e-mailed to the specified mail addresses, that can conveniently be selected from a list.
Fig. 3 Graphical annotation of a Web page snapshot.
© FORMATEX 2005
m-ICTE2005 http://www.formatex.org/micte2005
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
5
When sending the annotation to the server, the user is requested to insert some fields necessary for cataloguing the annotation (see Fig. 3). The programme will automatically send the other data needed for searching in the server (Author, Annotation date, Source document, Graphic annotations). Since the user authentication functionality has been developed by using the session variables of Learning Space, which is the e-learning platform used in our Faculty, users do not need to login twice, and users of Learning Space can utilize the annotation tools without authentication. Another interesting functionality that has been implemented is the capability of the annotation system to map the database of any learning platform; this not only affords the authentication advantage but also it facilitates automatic cataloguing of the annotations based on information about how courses are organized within the e-learning platform. The Graphic annotation server can be considered as the natural evolution of a widely known tool, i.e. the forum. All the annotations, or the annotations filtered by a user search, are visualized in the Web Annotator Forum. In the forum for each annotation it is possible to reply and generate a discussion. The search functionality allows searching the annotation server by a phrase contained in the annotation, by author, by course, by topic, and by URL. The system has been tested on the e-learning platform Learning Space, and different formats of documents have been annotated: html, Acrobat, Power Point and Word. Currently we are using the graphical annotation platform to support student/teacher collaboration during thesis development, and on a pilot course on Management Information Systems.
4. Concluding remarks Future version of the system will be able to annotate multimedia documents (i.e. audio, video and animation, by extending the plug-in functionalities. This can also be improved to allow a better local management of the personal annotations. The other aspect on which we are working is to include an ontology based cataloguing of the annotations. The main advantage of the architecture proposed in the paper is to provide an integrated environment where graphical annotations can be seamlessly created and treated and are not affected by potential orphaning problems (because the page context is always included in the grabbed snapshot); this type of environments are particularly important in the light of current developments of mobile learning (e.g., [6]), where contents are accessed through PDA or hand-held devices which naturally afford pen-based interaction. The difficulty of inputting text on PDAs has been often remarked, to the point that specific mechanisms have been devised (e.g., quick ways to do words cut and paste, since text entry methods such as Graffiti are hard to learn and slow for text entry). Thus, on a final note, we must remark that to gain a full understanding of the real impact of graphical annotation on the learning processes the trade-off between graphical input and textual input of the specific devices used must be taken into account. To this aim a thorough user study of the annotation practices of two groups of students (one from the engineering and one from the medical field) using Tablet Pcs, which allow pen input and have a fair screen estate, is planned.
References [1] V. Slotte and K. Lonka, Review and process effects of spontaneous note-taking on text comprehension, Contemporary Educational Psychology 24, 1 (1999) pp.1-20. [2] C. Crook, Deferring to resources: Collaborations around traditional vs computer-based notes. Journal of Computer Assisted Learning 18, 1 (2002) pp. 64-76. [3] J. Cadiz, A. Gupta, J. Grudin, Using Web Annotations for Asynchronous Collaboration Around Documents. Proc. ACM Conference on Computer Supported Cooperative Work, December 2-6 (2000) Philadelphia, PA. [4] C. Desmoulins and D. Mille. Pattern-Based Annotations on E-books: From Personal to Shared Didactic Content. Proceedings of the Workshop on Wireless and Mobile Technologies in Education. IEEE (2002). [5] G. Singh, L. Denoue, A. Das, Collaborative Note Taking. In Proceedings of Workshop on Wireless and Mobile Technologies in Education IEEE (2004). [6] M. Milrad, J.Perez, U. Hoppe, C-Notes: Designing a Mobile and Wireless Application to Support Collaborative Knowledge Building. Proc. of Workshop on Wireless and Mobile Technologies in Education IEEE (2002).
© FORMATEX 2005
