qingqi wang: relevant content on this site

HTML5 Case Study 5: The HTML5-Based e-Lecture Framework

Administrator — Mon, 16 Jul 2012 13:43:39 +0000

Author: Qingqi Wang

HTML5 Case Study 5: The HTML5-Based e-Lecture Framework

1. About This Case Study

HTML5 case study on “The HTML5-Based e-Lecture Framework” by Qingqi Wang

The HTML5-based e-Lecture Framework is a part of the HTML5 Case Studies funded by JISC and managed by UKOLN. This case study focuses on providing a solution to allow e-lecture creators to convert their Microsoft PowerPoint presentations into online lectures in a simple and quick fashion. The resulting e-lecture can be easily deployed on an existing Web server and delivered to both desktop and mobile platforms.

Target Audience

This case study has been produced for lecturers and supporting staff who plan to deliver courses to the Web via series of e-lectures. The e-Lecture Framework is designed to provide a solution to convert PowerPoint presentations to an e-lecture format, which can be directly published on Web. The obvious benefits of this framework are its compatibility, flexibility, ease of use and zero-cost. The framework is free and open. No additional software is needed. No additional configuration is needed for the existing servers. No additional techniques are required for e-lecture providers to learn. The HTML5-based e-Lecture Framework can easily port the existing PowerPoint slides to mobile devices. The latter capability is of significant, as it will enable students to access learning in their preferred device format, thereby assuring they do not fall behind. This will in turn assure student retention and attract tuition in the first year and beyond. The ease of being able to watch and listen to an e-lecture on a bus or in a cafe using their handsets is something students have come to expect. Institutions which do not make this provision risk falling behind in the competition to offer students a high level of service.

What Is Covered

The topics covered in the case study include:

Development of an HTML5-based auto-adaptive e-lecture interface
Providing a framework for course providers to convert PowerPoint slides to e-lectures
Setting up a standard format of e-lecture content
Providing solutions/utilities that can help course providers to generate well-formed e-lecture content
Providing technical details of the framework for further development

What Is Not Covered

Topics the case study will not cover are:

Providing a binary application that can generate e-lectures directly from PowerPoint files based on the framework – the case study is aimed at setting up a framework that can be reused for further development. But the case study itself will not provide this kind of application.
All related third-party utilities within the framework the framework only provides a recommended list of the third-party utilities that are suitable for preparing course content.

2. Use Case

For many teachers and lecturers, migrating their teaching material to e-learning is a stony path to follow, however desirable. In order to deliver courses over the Internet, a great deal of original course content has to be reproduced to meet the requirements of online publication. One of the significant challenges they often encounter is moving non-Web-oriented lecture presentations on to the Web. To date, a common but effort-intensive solution has been for teachers to regenerate online content from their original presentations and render them suitable for access on a Web server. But the existing solutions all suffer from various limitations and failings: for example, the limited compatibility of the final e-lecture products among different browsers and devices.

In our case, we developed a new e-Lecture Framework at the request of the Brewing Science section [FN1] of the Division of Food Sciences at the University of Nottingham. The Brewing Science section has been delivering an e-learning-based MSc course since September 2006. E-lectures represent a very important component of the course's online learning modules. Staff have tried some commercial software like Microsoft Producer and Adobe Captivate to convert their PowerPoint slides to Web-based e-lectures, but they have discovered these tools cannot meet all their requirements. For example, when using Microsoft Producer, the software can link slides with a teaching video and broadcast it via the Web, but the video transfer speed is very slow when a large video file meets a narrowband network environment. This is frustrating for students and teachers alike. In addition, those same students and teachers are currently obliged to use the Internet Explorer browser to access the final e-lectures, a hurdle which may occasion some, e.g., Linux and Mac users, a degree of inconvenience to the point of refusal.

Adobe Captivate works better and it can deliver voice-overs with slides using Flash technology. This increases the transfer speed of the online content, but when they wanted to deliver the e-lectures to mobile platforms, staff found the Flash Player for mobile systems performed poorly compared with the desktop version. As is well known, mobile platforms such as the iPhone and iPad do not support Flash. In addition, the high cost and the complexity of the commercial software can also represent an obstacle. Often lecturers and teachers have little time to learn to use new software; they simply want a tool they can use with minimal training.

This situation prompted us to develop a new lightweight and easy-to-use e-lecture framework for them. The target system was designed to be an HTML5-based open framework, which integrates presentation slides, voice-overs and transcripts. For course providers, the framework encourages them to use familiar tools, such as Microsoft PowerPoint, Notepad, Sound Recorder, etc., to prepare e-lecture content. So, for example, a lecturer may wish to combine for students a series of diagrams demonstrating how a process gradually progresses, for instance soil erosion by flowing water. She has supplemented the series of diagrams with a voice-over commentary for each stage, for which she has also produced a transcript. In addition, she has created a summary of the different stages in a series of bullet points of short text, each badged with a small symbol to identify each distinct stage. She can prepare all this content using the software with which she is familiar, as she has been used to do; and then finally she can generate the e-lecture by placing the different types of content (slides images, voice-over audios and transcript texts) into the framework according to the straight-forward instructions. For remote learners, the framework provides a clear and user-friendly interface with intuitive navigation. It also allows learners to access the e-lecture content from different platforms. For e-learning system administrators, the e-lecture framework is a lightweight component that can easily be added to an existing Web-based virtual learning environment (VLE).

The members of the Brewing Science e-learning team have tried this newly developed framework to deliver several e-lectures. They are very interested in this framework as it simplifies the previous e-lecture production process quite considerably. Moreover, it represents in their view a very low-cost and efficient solution. Lecturers and course providers can continue to use the tools familiar to them to generate e-lecture content that meets the requirements of the framework. As a result, they do not need to spend too much time on learning new software skills. The quality of the resulting e-lectures is very good, even when delivered over different network conditions, such as Wifi and 3G networks. It is also easy for them to integrate the e-lectures into their existing online learning modules under the WebCT environment. The Brewing Science team members were very satisfied with the e-Lecture Framework and decided to re-convert all their e-lectures using this new e-Lecture Framework.

3. Solution

The e-Lecture Framework was developed mainly through the use of HTML5 technologies. The old Flash technology was also used in environments which do not support HTML5. This hybrid solution makes the e-Lecture Framework compatible with almost all current popular platforms and browser environments, including Internet Explorer, version 6 and above, Firefox, version 6 and above, Chrome, version 11 and above, Safari, version 4 and above, Opera, version 10 and above, and Mobile Safari on iPhone and iPad. The structure of the Framework was designed to contain two layers: the Core Data layer and the User Interface layer (see Figure 1).

Figure 1. The draft structure of the e-Lecture Framework

In the Core Data layer, there are three types of lecture content: slides, voice-overs and transcripts are stored in the related folders. An XML file is used to store all the slide information. In the User Interface layer, an auto-adaptive technology will be used to present the e-lecture content to different platforms. The client-end Web page will be able to detect the connecting platforms/browsers automatically, and switch to an HTML5 user interface for browsers that support HTML5 features or provide a Flash player-based user interface for browsers that do not support HTML5.

In accordance with the above Framework design, the final e-Lecture Framework provides all required content as shown in Figure 2. The detailed table of content is shown in Appendix 2.

Figure 2. Content provided in the e-Lecture Framework

In order to meet the requirements of the Brewing Science e-learning team, the e-Lecture Framework was designed with following functions:

The framework provides an auto-adaptive user interface to present the e-lecture content, which means the final e-lecture products based on this framework can provide the HTML5-based user interface for browsers which support HTML5, or switch to a traditional Flash player-based user interface for those that do not.
The e-Lecture Framework also provides specific user interfaces for iOS platforms using HTML5-based technologies. The iOS user interface will adapt to both orientations and provide native app-like touch experiences. In iOS4 and previous versions, scrolling elements on a Web page cannot be scrolled by a single finger swipe. This is because the whole Web page will scroll through the browser window when a user swipes on it. So we had to use CSS3 and JavaScript technology to fix the Web page frame, and set the scrolling elements to respond to the swipe gesture and so mimic a scrolling effect manually, e.g., the scrolling function of slides thumbnails panel and transcripts panel. This will bring users a native app-like touch scroll experience. We have noticed that in the recently released iOS5, Apple added the single finger-swipe gesture to the scrolling elements on Web pages. But for the purposes of maintaining compatibility, we kept the original JavaScript code as it works fine on iOS5, too. The iPad user interface will provide the same functionality as that available on a desktop interface, while the transcripts view function will be removed from the iPhone and iPod touch user interfaces because of their limited screen size.
The e-Lecture Framework provides two different slides navigation methods. The linear method allow users to play all slides from the first to the last automatically, while the non-linear method enables users to navigate between slides manually by selecting a slide from the list of the slides' titles or from the slides thumbnails bar.
The framework is completely based on client-end technologies, so the final e-lecture product is server-independent and can be deployed on any type of Web server, whether an Apache Server on Linux/Unix or IIS (Internet Information Services) on a Windows Server. So, for example, to achieve the greatest degree of flexibility when I designed the e-Lecture framework, we avoided using any server-side scripts to ensure the final e-lecture could be deployed on Apache servers or IIS without difficulty.

During the development process, the Adobe CS4 software suite was used to develop the HTML5- and Flash-based interface. It was also used for JavaScript and ActionScript coding. In order to meet the requirements of HTML5 audio formats among different browsers, the AAC- and Vorbis-encoded audio formats were chosen to be the standard formats of voice-over files. The e-lecture slides files were set as a series of JPEG images that can be converted from the original PowerPoint presentations. The pure text format was chosen for the transcripts format. We choose JPEG and pure text formats as these formats are very common on different operating systems and there are lots of existing tools for users to manipulate their files with these two formats.

Several client-end technologies were used in the development including HTML5 audio DOM objects, touch DOM object, AJAX, CSS3.0, etc. The details of technologies applied are listed in Appendix 1.

It should be noted that the HTML5-based e-Lecture Framework does not provide a new editing environment for course providers to prepare e-lecture content. This is mainly because most of the content preparation tasks can be easily completed with software already familiar to most teachers, such as Microsoft PowerPoint, Notepad, Sound Recorder, QuickTime Player, etc., as shown in Figure 3.

The e-Lecture Framework serves as a template to generate new e-lectures. After preparing the e-lecture content, users just need to put it into the related folders, and the e-lecture will be ready to publish. This will obviously save money and time that would be spent on purchasing and learning new software. The final products are lightweight and independent Web folders. They can be easily deployed on existing Web servers.

Figure 3. Preparing content in the e-Lecture Framework.

4. Impact of this Work

PowerPoint slides are widely used in the traditional teaching and learning environment. The HTML5-based e-Lecture Framework provides an easy method to convert PowerPoint files to a Web version that can be directly published on existing Web servers. This solution will encourage more lecturers and teachers to carry out their plans to use existing teaching material in an e-learning form.

The HTML5-based e-Lecture Framework also provides a free solution for institutions to deploy low-cost e-learning materials quickly, with minimal training. Developers can use this open framework to create their own e-learning-authorising utilities or develop new plug-ins to enhance their e-lecture framework, such as integrating videos and animations into the e-lecture framework.

In our case study, the Brewing Science section at theUniversityofNottinghamhas used the framework to produce its e-lectures in a real teaching environment. Lecturers are happy to record the voice-overs and type transcripts for themselves. The e-learning providers then place all their teaching content into the framework and publish the final e-lectures directly into the WebCT modules. Students can then view the e-lectures directly along with other e-learning content in the WebCT environment (screenshots are shown in Figure 4). Staff are very satisfied with this solution and have declared themselves willing to introduce the e-Lecture Framework to other colleagues in the University.

Figure 4. Screenshots of final e-lectures in the WebCT environment.

5. Challenges

Some difficulties were encountered during the development. The first was choosing a suitable audio format for Web delivery. According to some HTML5 technology rresources such as HTML5 test Web site [FN2] and ScriptJunkie Web site [FN3], support for HTML5 audio formats varies considerably across browsers [FN4]. Currently, there is no common audio format that is supported by all HTML5-enabled browsers. We chose AAC- and Vorbis-encoded audio formats in that the AAC audio is supported by Chrome, Safari and Internet Explorer 9, while OGG audio is supported by Firefox and Opera. Using these two audio formats can satisfy the great majority of current popular HTML5-enabled browsers. Another possible audio format to choose is MP3. We chose not to use MP3 format as the AAC format demonstrates greater sound quality and transparency than MP3 for files coded at the same bit rate [FN5].

The HTML5 audio DOM object performed differently across various browsers, too. In our development, we found that in Safari the audio object fires the "ended" event only once, although in Mobile Safari and Chrome the audio object can fire the "ended" event every time it finishes an audio play session. Therefore, we have to detect the "timeupdate" event to provide the play-slides-continuously function.

During the development, we also found some potential bugs in newly released browsers, such as Firefox 6 and 7. In our case, Firefox 6 and 7 for Windows cannot get a proper audio.duration value that can be triggered by the audio “loadeddata” event (the value is alwaysNaN) when audios are encoded in a VBR (variable bitrate) configuration. However, in Firefox 6 and 7 for Mac OS X, the code audio.duration works fine for VBR-encoded OGG audio files. So we have to restrict the OGG audio encoding method to the CBR (constant bitrate) setting only, in order to achieve greater compatibility.

6. Lessons Learnt

During the development process we set up a standard to produce e-lectures. The framework is easy to use, even for less experienced e-learning providers wishing to create e-lectures from original PowerPoint presentations. But for those who have never produced e-learning materials before, the Framework is still difficult to use. Consequently, only providing a framework is not enough. A user-friendly e-learning tool based on this framework is more important for less technically experienced content producers. Therefore, in the next stage of our work, we will develop an application based on the e-Lecture Framework. We hope the application can prompt more and more inexperienced teachers and lecturers to deliver their lectures over the Web.

7. Conclusions

This case study represents a trial of using cutting-edge Web technologies in the Higher Education sector. In our case we developed the HTML5-based e-Lecture Framework, which was applied in a real e-lecture production situation by the Brewing Science section at the University of Nottingham. The final result confirms that the HTML5 and related open technologies are ready to be widely used in the current e-learning environment. In some cases, such as delivering e-learning materials to mobile platforms, HTML5 will most likely prove the best choice at the moment. The HTML5-related technologies offer developers more opportunities and also bring greater flexibility to e-learning clients.

On the other hand, HTML5 is still a developing technology. A cross-browser standard for HTML5 remains to be established. Meanwhile, some older browsers like Internet Explorer 6, 7 and 8 still retain considerable market share. This situation makes Web development more complex. We have to balance the use of new technologies against compatibility with older systems during the development period.

Appendix 1: HTML5 Technologies Used

The following HTML5 and related technologies were used in the example in this case study:

HTML5 audio DOM object will be used to load, play and control voice-overs
AJAX technology will be used to load slides information and transcripts
Client-end user agent strings will be used to create the auto-adaptive user interface
The HTML5 touch DOM object will be used to create the user interface for iOS platforms
HTML5 device orientation events will be used in designing the user interface for iOS platforms
CSS3 technology will be used to design the HTML5 user interface

Appendix 2: Notes on Content

The e-Lecture resources are available at http://www.nottingham.ac.uk/~sbzqw/electure/ and described below. A demonstration is available at http://www.nottingham.ac.uk/~sbzqw/electure/demo

Details of the content of these resources is given below:

Content of e-Lecture Framework
index.html, html5.css, html5.js	An HTML5 interface for desktop platform
index_iPad.html, ios.css, ipad.js	An HTML5 interface for iPad platform
index_iPhone.html, ios.css, iphone.js	An HTML5 interface for iPhone platform
index_fl.html, index.swf, AC_RunActiveContent.js	A Flash interface for HTML5 unsupported environments
Shared resources such as touchScroll.js, btn_playPause.png, btn_slides.png, etc.	Including image assets, SWF player skin file and shared JavaScript files
Slides folder	An empty folder to store slides files
Audio folder	An empty folder to store voice-overs files
Text folder	An empty folder to store transcripts files
Content of supporting documents and utilities (in the "_help and tools" folder)
User Guide (UserGuide.html)	An HTML format of user guide including the framework overview, a step-by-step workflow that helps users to prepare e-lecture content, technical details and content standard list, etc.
XML Code Maker (getXMLCode.html)	An HTML/JavaScript-based tool that helps users to generate the XML data of all slides information
Slides Exporting Tool (exportJPG.bas)	A VBA macro that helps users to convert PowerPoint presentations to slides images in a proper size and format

Footnotes

[1] Brewing Science section of the Division of Food Sciences, http://www.nottingham.ac.uk/biosciences/divisions/food/research/groupsandteams/brewingscience.aspx

[2] The HTML5 test – How well does your browser support HTML5?, http://html5test.com/

[3] Script Junkie, http://msdn.microsoft.com/en-us/scriptjunkie

[4] Native Audio with HTML5, Script Junkie, http://msdn.microsoft.com/en-us/scriptjunkie/hh527168

[5] Wikipedia, Advanced Audio Coding term, http://en.wikipedia.org/wiki/Advanced_Audio_Coding and Apple Support article, http://support.apple.com/kb/HT2947?viewlocale=en_US

HTML5 Case Studies: Introduction

Administrator — Mon, 16 Jul 2012 11:59:11 +0000

Case studies illustrating development approaches to use of HTML5 and related Open Web Platform standards in the UK Higher Education sector.

Author: Brian Kelly

1. About This Document

This document provides an introduction to a series of HTML5 case studies which were commissioned by the JISC. The document gives an introduction to HTML5 and related standards developed by the W3C and explains why these developments represent a significant development to Web standards, which is of more significance than previous incremental developments to HTML and CSS.

2. About HTML5

As described in Wikipedia [1] HTML5 is a markup language for structuring and presenting content on the Web. HTML5 is the fifth version of the HTML language which was created in 1990. Since then the language has evolved from HTML 1, HTML 2, HTML 3.2, HTML 4 and XHTML 1.

The core aims of HTML5 are to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.

HTML5 has been developed as a response to the observation that the HTML and XHTML standards in common use on the Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents

It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.

For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets.

In particular, HTML5 adds many new syntactical features. These include the new,andelements, as well as the integration of Scalable Vector Graphics (SVG) content that replaces the uses of generic tags and MathML for mathematical formulae.

As illustrated in Figure 2 HTML5 is built on a series of related technologies, which are at different stages of standardisation (see [2]). These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as,,and, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as , and

have been changed, redefined or standardised. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.

3. The Open Web Platform

The Open Web Platform (OWP) is the name given to a collection of Web standards which have been developed by the W3C [3]. The Open Web Platform has been defined as “a platform for innovation, consolidation and cost efficiencies” [4].

The Open Web Platform covers Web standards such as HTML5, CSS 2.1, CSS3 (including the Selectors, Media Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns modules), CSS Namespaces, SVG 1.1, MathML 3, WAI-ARIA 1.0, ECMAScript 5, 2D Context, WebGL, Web Storage, Indexed Database API, Web Workers, WebSockets Protocol/API, Geolocation API, Server-Sent Events, Element Traversal, DOM Level 3 Events, Media Fragments, XMLHttpRequest, Selectors API, CSSOM View Module, Cross-Origin Resource Sharing, File API, RDFa, Microdata and WOFF.

Use of the term Open Web Platform can be helpful in describing developments which make use of standards which complement HTML5.

The list of Web standards covered by the term provides an indication of the significant developments which are currently taking place which aim to provide much greater and more robust support for use of the Web across a variety of platforms and for a variety of uses.

4. Importance to Higher Education

The Web became of strategic importance to higher education in the mid 1990s primarily in its role as an informational resource. As the potential of Web became better understood new types of services were developed and the Web is now used to support the key areas of significance to higher educational institutions: teaching and learning and research.

However although innovative uses of the Web have been seen in these areas, the limitations of Web standards made it difficult and costly to develop highly-interactive cross-platform applications. Such difficulties meant that significant developments in use of the Web to provide applications (as opposed to access to information) was being led to large global companies, with Google's range of services such as Google Docs providing an example of a widely used Web-based application.

The experiences gained in developing such Web-based applications led to the evolution of Web standards to support such development work. In addition the growth in popularity of mobile devices led to the development of standards which could be used across multiple types of devices, in addition to the cross-platform independence which allowed Web services to be accessed across desktop PCs running MS Windows, Apple Macintosh or Linux operating systems.

Developments to the HTML5 standard enable multimedia resources to be embedded in HTML resources as a native resources. In addition developments to related standards, such as SVG (Scalable Vector Graphics) and MathML (the Mathematics Markup Language) together with developments to standards which support programmatic manipulation of objects defined in these markup languages will provide a rich environment for the development of new types of tools and services which will be value to support a range of institutional requirements.

In addition the support for mobile devices will enable access to this new generation of applications to be provided across a range of mobile devices, including iPhones and iPads, Android devices and smart phones and tablet computers which may use operating systems provided by other vendors.

In brief the development of HTML5 and the Open Web Platform can provide the following benefits across higher education:

A rich environment for the development of applications which can run in a Web browser.
A rich environment for the development of applications which can run across a range of platforms and suit the particular requirements of mobile devices.
A rich environment for defining the structure of scholarly resources, such as research papers, to support more effective processing of the resources.
A neutral and open environment based on use of open standards which can provide a level playing field for application development.

5. About the HTML5 Case Studies

The HTML5 case studies have been commissioned in order to demonstrate development approaches taking place across the higher education sector by early adopters in order to support a variety of use cases which are particularly relevant in a higher education context.

The case studies are aimed primarily at developers and technical managers who wish to gain a better understanding of ways in which development approaches based on use of HTML5 and Open Web Platform can be used.

Whilst the examples described in the case studies are being used across a number of higher educational institutions we appreciate that not all institutions will wish to make use of the approaches described in the case studies - in particular we recognise that institutions may not have the development and support expertise to emulate the approaches described in the following documents. However increasingly we are seeing commercial vendors making use of HTML5 in new versions of their products. This suggests vendor support for HTML5 may be a relevant factor that in the procurement of new applications.

6. Summary of the HTML5 Case Studies

The HTML5 case studies included in this work are summarised below:

Case Study 1: Semantics and Metadata: Machine-Understandable Documents by Sam Adams
Case Study 2: CWD: The Common Web Design by Alex Bilbie:
Case Study 3: Re-Implementation of the Maavis Assistive Technology Using HTML5 by Steve Lee
Case Study 4: Visualising Embedded Metadata by Mark MacGillivray
Case Study 5: The HTML5-Based e-Lecture Framework by Qingqi Wang
Case Study 6: 3Dactyl: Using WebGL to Represent Human Movement in 3D by Stephen Gray
Case Study 7: Challenging the Tyranny of Citation Formats: Automated Citation Formatting by Peter Sefton
Case Study 8: Conventions and Guidelines for Scholarly HTML5 Documents by Peter Sefton
Case Study 9: WordDown: A Word-to-HTML5 Conversion Tool by Peter Sefton

Semantics and Metadata: Machine-Understandable Documents: Case study 1 describes how embedding machine-understandable metadata into researchers' Web sites can help to enhance researchers' reputation by making their research outputs more visible, easier to discover and increasing their use.

CWD: The Common Web Design: Case study 2 describes the Common Web Design (CWD): the interface for the University of Lincoln’s online services. Developed with HTML5 and CSS3 technologies, the University of Lincoln's Common Web Design enables rapid development of attractive, interactive and modern Web sites.

Re-Implementation of the Maavis Assistive Technology Using HTML5: Case study 3 is aimed at those interested in applications that provide alternative or innovative user experiences using HTML5 Web applications. The focus is on assistive technology which is designed to enable wider access to media, apps and other online technology. This access may be for users who have varying access requirements, such as older users or those with physical or cognitive impairment. Alternatively it may be for use in environments that require alternative interaction styles, for example in bright light or with restricted access to a mobile device.

Visualising Embedded Metadata: Case study 4 addresses ways of enhancing the dissemination and discoverability of research outputs. Having achieved success in making bibliographic metadata available on a large scale there is now a need to demonstrate ways for individuals and small groups to interact easily and usefully with the data, in order to show the benefit of open bibliography and open publishing in general. This case study describes how HTML5 and related Open Web Platform standards such as JavaScript, DOM and SVG can be used to provide visualisations of embedded metadata.

The HTML5-Based e-Lecture Framework: Case study 5 focuses on providing a solution to allow e-lecture creators to convert their Microsoft PowerPoint presentations into online lectures in a simple and quick fashion. The resulting e-lecture can be easily deployed on an existing Web server and delivered to both desktop and mobile platforms.

3Dactyl: Using WebGL to Represent Human Movement in 3D: Case study 6 covers the development of 3Dactyl, a hardware and software configuration, which is intended to record and represent the physical movements of an individual online in three dimensions, for scholarly research purposes. Resulting 3D scenes (as an XML document) are embeddable within a standard Web page or VLE. Examples of such 3D footage might be various forms of performance art, e.g. dance, drama or even sport where the performance of play strokes can be carefully analysed. Within the same constraints of space, surgical or therapeutic procedures would be another feasible use. When such scenes are viewed on future versions of browsers, they will not, typically, require special plug-ins to use the 3D footage interactively

Challenging the Tyranny of Citation Formats: Automated Citation Formatting: Case study 7 looks at how citations and reference lists can be represented in HTML5 in two ways; firstly with reference information supplied in-page and secondly using URIs that point to trusted bibliographic data stores. The end goal is to automate as much of the citation and reference management experience as possible at all stages of the academic workflow, from research to authoring, to publishing to citation analysis, generation of metrics and machine processing of data.

Conventions and Guidelines for Scholarly HTML5 Documents: Case study 8 looks at the fundamentals of using HTML5 for scholarly documents of all kinds, particularly theses and courseware documents (with application to journal articles as well), but with an eye on a much broader spectrum of resources, including those which are the subject of other case studies in this project such as slide presentations. It will aim to establish the basic structural and semantic building blocks for how resources should be marked up for the Web, to increase their utility for people and machines, as well as help to ensure they can be preserved effectively.

WordDown: A Word-to-HTML5 Conversion Tool: Case study 9 examines ways that academic authors working with word processors such as Microsoft Word, the OpenOffice.org family and Google Docs would be able to produce compliant Scholarly HTML5.

References

[1] HTML5, Wikipedia, <http://en.wikipedia.org/wiki/HTML5>

[2] Sergey’s HTML5 & CSS3 Quick Reference. 2nd Edition, Sergey Mavrody, ISBN 978-0-9833867-2-8

[3] Open Web Platform, Wikipedia, <http://en.wikipedia.org/wiki/Open_Web_Platform>

[4] Jeffe Jappe, W3C CEO quoted in <http://www.w3.org/2001/tag/doc/IAB_Prague_2011_slides.html>