Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets

- An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

The World of Widgets - An Important Step towards a Personalised Learning Environment

Behnam Taraghi, Martin Ebner, Thomas Altmann Department Social Learning, Graz University of Technology, Austria {b.taraghi, martin.ebner, thomas.altmann }@tugraz.at Abstract The learning environment of the future must be more individualised and personalised - for years this is one of the international demands in the field of Technology Enhanced Learning (TEL) and teaching. Since fall 2010 Graz University of Technology provides a Personal Learning Environment (PLE) based on mashup of widgets connecting various web applications. The publication aims to give a first demonstration of the way these PLE widgets can be converted to run on all common desktop Operating Systems (OS) to increase the range for individualisation of learning activities. After a short introduction we present an overview about the possibilities of the PLE-converter, discuss the working prototype and conclude with an answer to the question of an online framework for the widgets as well as desktop variants for usual operating systems. Keywords: PLE, widgets, e-learning, TEL, personalisation 1. Introduction The buzz words Web 2.0 (OReilly 2005) and e-learning (Downes 2005) dominated the field of TEL in the last few years. Through the use of wikis, podcasts, weblogs and even social networks like Twitter or Facebook, the end user (the learner) is put into the centre of activity. New opportunities for collaboration are developed and user generated content becomes an integral part of teaching. When these developments are viewed on a meta-level, it becomes clear that the hyper web as we know it (the connection of webpages over hyperlinks) moves towards a semantic web. For the end user this means especially one thing: Individualisation. The amount of digital learning content and available web applications increases continually. The demand for a personalised learning environment emerges, where the user has web-based assistance customised to his or her needs (Attwell, 2007; Green, Pearson and Stockton 2006; Schaffert and Hilzensauer 2008). Graz University of Technology (TU Graz) has developed a PLE1 that has been launched in October 2010 (Taraghi, Ebner and Schaffert 2009). The underlying concept is not to offer another static platform, but to offer an aggregation of various web services, university specific services and learning objects (Taraghi, Ebner, et al. 2009). This is realised with a mashup of widgets (Wild, Mdritscher and Sigurdarson 2008) that can be selected and arranged individually. This framework is available for all students and staff members of TU Graz (Taraghi, Mhlburger, et al. 2009). PLE is browser-based, so there are some restrictions to the ubiquity of the learning environment. Therefore, the aim is to remove these restrictions by making the 1 TUGraz Personal Learning Environment: http://ple.tugraz.at (last visited: 2011-0601)

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

widgets applicable everywhere. Microsoft Windows 7 and Apple Mac OS X both have their own widget engines and are used by 75% of users according to the last PLE statistics. The first step is an automatically porting of the PLE widgets to these platforms to be compatible to the specific devices of the users. This paper raises and answers the questions how a widget following W3C specifications can be converted for Windows 7 and Mac OS X, in case this process can be automatized; what challenges and complications emerge from this process. 2. PLE widgets The W3C Widgets Family of Specifications (2011) includes a set of specifications, which together standardise a widget as a whole. PLE widgets at TU Graz implement a part of these specifications. Widgets Packaging and Configuration and Widgets interface are two necessary specifications to run a widget on PLE. In order to realise an automatic conversion of W3C browser based widgets to desktop widgets these two specifications are taken into consideration. The described specifications correspond to the actual version of the PLE widget engine. 2.1 Widgets Packaging and Configuration The Widgets Packaging and Configuration specification (2011) standardises a .zip packaging format, which includes some obligatory and non-obligatory elements. It describes also how internationalisation and localisation must be applied within the packaging format. The widget folder (.zip file) must contain two files at its root: A start file i.e. index.html and a manifest file called config.xml which is an Extensible Markup Language (XML) file that contains all the metadata needed to initialise and run the widget on the PLE. The widget folder may contain non-required files for JavaScript, Cascading Style Sheets (CSS) or images. 2.2 Widgets Interface The Widgets Interface specification (2011) defines an Application Programming Interface (API) for the widgets functionality. It describes the access to the metadata defined in a widgets configuration document, as well as persistently storing data and to receive events related to changes in the view state of a widget. Other parts of this specification are how to induce a widget to open a Uniform Resource Locator (URL) on the systems default browser and how to request the users attention in a device independent manner. The widget API is accessible in JavaScript through the widget object in PLE. The widget object is inserted into the Document Object Model (DOM) of the widget index file as soon as the widget is completely loaded in the browser to include the functionality into the widget. Once the widget is fully loaded, the PLE calls the onLoad() function, which is to be defined in the widget body to start the widget logic. The most used methods that are used from widgets API are XMLHttpRequests (XHR) to retrieve data from local and remote resources, accessing user preferences (read and write) and accessing the default settings in the manifest file. A widget can read the users preferences with widget.preferenceForKey(), and write with widget.setPreferenceForKey(). The written data is stored permanently on the PLE server. Because of the same origin policy of browsers, widgets have no access to resources on remote domains through XHRs. The PLE provides the widgets with a web-based proxy to bypass this restriction. The widget API provides

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

methods to resize the widgets during runtime, as well as setters- and gettersmethods for metadata of widgets (such as title). There are three widget authentication mechanisms built in the PLE in case the widget needs to be authorised by a third party service. The simplest one deals with normal Hypertext Transfer Protocol (HTTP) authentication, followed by Secret Shared Service Key (S3K) and Randomly Generated Token (RGT). The PLE provides the widget with an event based Inter-Widget Communication (IWC). Widgets can add listeners to events or fire events to notify others. Unicast, multicast and broadcast communications are supported. 3. Windows gadgets To export PLE widgets to other platforms the two W3C specifications mentioned above have to be considered initially. The packaging and configuration of the widget and the widget interface API have to be adapted to the target platform. 3.1 Adapting packaging and configuration The comparable unit to a PLE widget is a Windows gadget for Windows 7 (and Windows Vista). The structure of a Windows gadget is similar to W3C widgets, but there are some differences that require a restructuring of the widget. The manifest is called gadget.xml2. The title and other meta-information about the widget such as author and icon are parsed from the manifest of the PLE widget (config.xml) and converted into the corresponding fields of the Windows gadget manifest. A CSS file called gadget.css is created. It defines the sizes of the widget and the user settings dialogue. Only the height of the widget is transferred from config.xml; the other size parameters are preset. A file called gadget.js is created. It sets settings.html as the Hypertext Markup Language (HTML) file for the settings dialogue of the widget. Furthermore it sets the events that must be triggered after closing the settings dialogue and after the gadget loads completely. The latter two code elements point to the "onLoad"-function. This is the function that starts the PLE widgets, so the changes remain minimal. Additionally, this file defines the widget object used for the widget interface API described in the next section. This file must be present in the start file of each widget to provide the required API in windows gadgets. A file called "settings.html" is created. It contains the User Interface (UI) of the settings dialogue of a Windows gadget. These settings are transferred dynamically from the XML manifest of the PLE widget. The standard values for the user settings are extracted from config.xml and set in this file. Additionally, the file contains a few lines of JavaScript code that manage the loading of existing settings when opening the dialogue and the saving of changed settings when closing it. The structure of "settings.html" looks like a typical HTML form. It contains checkboxes, text fields or menus, depending on what is required by the settings choices. After creating these new files, they have to be included into the start file index.html. This is done by referencing gadget.css and gadget.js. 3.2 Adapting widget interface The widget object defined in gadget.js has to provide the same methods like a W3C widget can access to in the PLE.

2 Gadgets for Windows Sidebar Manifest: http://msdn.microsoft.com/enus/library/ff486356%28v=VS.85%29.aspx (last visited: 2011-06-01)

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

Remote XHRs are possible without a web-based proxy. Local resources within widget package cannot be accessed through XHRs. The Windows Scripting Object can be used to access the file system and read the file contents within the widget package instead. The user preferences can be read with "System.Gadget.Settings.read("setting_id")" and saved with the corresponding "write"-method. There are some restrictions regarding reading and writing widget settings. It is not possible to set height and title of the widget for Windows gadgets. The title is only used in the gadget selector, and it is not possible to resize the widget dynamically during runtime (two fixed sizes can be defined, but which is not used in the conversion). Title and height can be read, but for the mentioned reasons getDefaultTitle() and getDefaultHeight() would return the same values as getTitle() and getHeight(). 4. Mac dashboard widgets A minimal dashboard widget on Mac OS platforms requires four files within the widget package: an icon (Icon.png), a background image (Default.png), the manifest file (info.plist) and a HTML based start file3. The manifest file contains different metadata about the widget. The HTML UI related to the user settings dialogue (the backside of the widget) must be created in a separate div element in the body of the start file. 4.1 Adapting packaging and configuration The manifest file is called info.plist and is an information property list document. The metadata and settings defined in config.xml are parsed and converted into the plist file. The HMTL structure of the user settings dialogue is generated dynamically with JavaScript and appended to the DOM of the start file while loading the widget. For this purpose the body of the start file is divided in to two div elements, one for the front side and the second for the backside (setting dialogue) of the widget. The required JavaScript functionality for this goal is implemented in widget.js, which must be included into the start file of each widget similarly to the conversion mechanism, described for Windows gadgets. The required events for opening and closing the back side of the widget as well as calling the onLoad() function within the widget are also defined in widget.js. Opening the backside, fires an event that reads and sets the user preferences in UI of the setting dialogue. The event related to the closing action will save the edited user preferences correspondingly. Furthermore a widget.css file is needed to position the Mac specific buttons and style the front side and back side of widgets according to the Mac style user guide. 4.2 Adapting widget interface The user preferences can be accessed with widget.preferenceForKey() and widget.setPreferenceForKey() respectively. Local resources within the widget package can be accessed by XHR methods, as it is the case in the web-based PLE widgets. Remote XHRs are also possible without the need of any web-based proxy. Similarly to Windows gadgets, it is not possible to resize the widgets or change the title on Mac OS dashboard widgets during the runtime. 3 Dashboard Programming Topics Widgets Basics: http://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual /Dashboard_ProgTopics/Articles/WidgetBasics.html#//apple_ref/doc/uid/TP4000811 7-DontLinkElementID_54 (last visited: 2011-06-01)

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

5. Converter prototype The prototype shows that conversion is possible in principle. However, additional tests are necessary to guarantee the flawless conversion of all existing and future PLE widgets. The converter converts a PLE widget to a Windows gadget and a Mac OS dashboard widget using the approaches described in preceding sections. The widget authentication mechanism S3K and RGT does not work for desktop widgets as these two mechanisms require authorised access to PLE API with a valid loggedin session. On the other hand the HTTP authentication is applicable also for desktop widgets. The event based IWC mechanism fails for desktop widgets and cannot be supported. A unified Graphical UI (GUI) framework to achieve a similar look and feel on all platforms is recommended. The converter consists of following three main parts to realise a minimal functioning widget conversion for either Windows desktop or Mac OS dashboard as widget containers: Parsing and adapting the manifest file for each container according to the containers specification. Creation of a HTML based dialogue for editing the user preferences by the user for each container. Handling and adapting the XHR calls according to the specifications of each container. Table 5.1 shows the important differences between PLE widgets, Windows 7 gadgets and Mac OS widgets that are relevant for the converter. PLE Manifest Start file Settings Widget API Icon XHRs (local) XHRs (remote) config.xml Any name In manifest widget.xxx Any name jQuery jQuery (via Proxy) Windows 7 Desktop gadgets.xml Any name In settings.html System.Gadget.xxx Any name No Mac OS Dashboard info.plist Any name In start file widget.xxx Icon.png Default.png

Background image No

ActiveXObject jQuery (Scripting.FileSystemObject) jQuery jQuery

Table 5.1 Important differences between three widget containers Figure 5.1 shows the Hangman widget in PLE (links) and the corresponding converted widgets for Windows 7 desktop (middle) and Mac OS dashboard (right). Hangman widget represents the well-known Hangman game that is used in the context of game based learning.

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

Figure 5.1

Hangman as PLE widget, Windows 7 gadget and Mac OS widget

6. Evaluation As a first step of the evaluation of PLE and each individual widget, a statistics module was developed to track the users behaviour and their activities (Taraghi, Stickel and Ebner 2011). The aim is to collect statistics information on the usage frequency of each widget and PLE in general. Based on the collected data and following the evolutional model of developing PLE (survival of the fittest), each individual widget and its functional entities are analysed, improved or rejected, in further iterations of the development cycle. Furthermore some usability tests have been carried out based on common approaches in the field of Human-Computer Interaction (HCI) such as questionnaires, interviews, think-aloud tests and heuristic evaluations. The test users have been selected from student groups within various fields of studies (Informatics, non-Informatics but technical fields and non-technical fields) to cover broad potential PLE users and analyse the first impression of PLE in different user groups. While for informatics students who are well familiar with different web-based information systems, the UI is still seen as unpleasant and negative for a good User Experience (UX), the test users from non-technical fields are highly impressed with the concept. It must be pointed out that the concept of PLE is unknown to the majority of students and they have not used/experienced such environments for learning and teaching so far. As a result a number of users have no idea what they can do when they login to PLE for the first time. This seems to be a hindrance that does not give a favourable impression at the beginning. Therefor providing some introductions and tutorials in form of popup windows or videos are recommended. More personalisation is desired in PLE UI for a better UX. Most of users wish to be able to arrange their PLE similar as they can do on their desktop of their personal computers. To convey the impression that the PLE is theirs, their personal learning environment, they should have also the full control over the UI. It is planned to extend the converter so that the statistics module can be integrated in desktop widgets too, hence it would be possible to monitor how PLE is used personally. Currently no evaluation is possible concerning the converter and desktop widgets. To be able to evaluate the PLE concept in general concerning the learning outcomes, it is required that the quality of UI and a satisfying UX is guaranteed. A low percentage of active users may be rather due to the problems in the field of HCI than the probable failed PLE concept. On the other hand PLE should provide sufficient variety of useful widgets to meet the needs of the majority of potential users regarding their learning activities, otherwise they do not use the PLE actively.

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

In PLE at TU Graz 34 widgets are provided currently that is still far too few to cover all major needs at a university level. 7. Conclusion This paper shows that the conversion of PLE widgets according to W3C specifications to desktop widgets for the widely used operating systems Windows 7 and Mac OS X is possible. In the future, learners can decide on their own which widgets they use on which platform in order to support their daily learning activities. Making the widgets platform independent supports the required flexibility that is often desired by the users. Students of Informatics who have the required know-how on development of web-based information systems can participate in the widget development for PLE. The widgets are maintained and improved by the university to guarantee the efficient usage by learners. Many students are impressed with the concept of PLE in general and wish to have more useful widgets in PLE. They are not considered only as consumers but also as developers for their own PLE. This is an incentive for a higher participation in the development process. Some efforts have been done to evaluate the UI and UX of PLE. Next to the improvement of the converter, the next step planned is the adaptation of PLE widgets to mobile devices and smart phones to further increase personalisation. Furthermore it is also planned to provide the widgets as bookmarklets within browsers. The personal learning environment of the future is independent from devices, operating systems and technologies. It is simply available everywhere. The personalisation is not only a process within an environment; it allows an independent use of learning and teaching on any device. 8. References Attwell, G. 2007. E-Portfolios the DNA of the Personal Learning Environment?. Journal of e-Learning and Knowledge Society, Vol. 3, Nr. 2: 33-61. Downes, S. 2005. e-Learning 2.0, eLearn Magazine. Available at http://www.elearnmag.org/subpage.cfm?section=articles&article=29-1 Green, S., Pearson, E. and Stockton, C. 2006. Personal Learning Environments: Accessibility and Adaptability in the Design of an Inclusive Learning Management System. In: E. Pearson & P. Bohman (Eds.), Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications: 2934-2941. OReilly, T. 2005. What is Web 2.0 Design Pattern and Business Models for the next Generation of Software. Available at http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html Schaffert, S. and Hilzensauer, W. 2008. On the way towards Personal Learning Environments: Seven crucial aspects. eLearning Papers, n.9: 1-10. Taraghi, B., Ebner, M. and Schaffert, S. 2009. Personal Learning Environments for Higher Education: A Mashup Based Widget Concept. In Proceedings of the Second Workshop on Mashup Personal Learning Environments (MUPPLE09). In conjunction with the 4th European Conference on Technology-Enhanced Learning (Nice, France): V. 506, 1-8. Taraghi, B., Ebner, M., Till, G. and Mhlburger, H. 2009. Personal Learning Environment A Conceptual Study. In Proceedings of International Conference on Interactive Computer Aided Learning (Villach, Austria): 1-10

Originally published at: Taraghi, Behnam and Ebner, Martin and Altmann, Thomas (2011) The World of Widgets - An Important Step towards a Personalised Learning Environment. pp. 1-8. In: Proceedings of the The PLE Conference 2011, 12-14 July, University of Southampton. http://journal.webscience.org/650/

Taraghi, B., Mhlburger, H., Ebner, M. and Nagler, W. 2009. Will Personal Learning Environments Become Ubiquitous through the Use of Widgets?. In Proceedings of International Conference on Knowledge Management and Knowledge Technologies (Graz, Austria): 329335 Taraghi, B., Stickel, C. and Ebner, M. 2011. Survival of the Fittest Utilization of Natural Selection Mechanisms for Improving PLE. In Proceedings of the first Workshop on Exploring the Fitness and Evolvability of Personal Learning Environments (in print). Wild, F., Mdritscher, F. and Sigurdarson, S. 2008. Designing for Change: Mash-Up Personal Learning Environments. eLearning Papers, n. 9: 1-15 W3C Widgets Family of Specifications. 2011. Available at http://www.w3.org/2008/webapps/wiki/WidgetSpecs W3C Widgets Interface Specifications. 2011. Available at http://dev.w3.org/2006/waf/widgets-api/ W3C Widgets Packaging and Configuration Specification. 2011. Available at http://www.w3.org/TR/widgets/