Figure 1. Comparison of basic site markup in XHTML and HTML 5.
Research in Learning Technology
Supplement: ALT-C 2012 Conference Proceedings
Lee Griffiths*, Rick Ogden and Rob Aspin
Department of Computer Science, University of Salford, Salford Manchester, UK
(Received 14 March 2012; final version received 29 May 2012; Published: 30 August 2012)
Abstract
HTML 5 is the most significant update of HTML in the last 10 years since XHTML was introduced. It promises a vastly improved user experience, increased browser features, cross compatibility and the ability to provide semantic content. In this paper we discuss the near future position for Higher Education in terms of technological transform, the proposed capabilities of HTML 5, and how they may change and how virtual learning environments are implemented in the future. We offer a set of education-based scenarios and how the emerging standard could benefit them. Finally we conclude with possible implementation timescales.
Keywords: tags HTML 5; system wide improvements; mobile devices; learning platforms; handheld devices
*Corresponding author. Email: l.s.griffiths@saford.ac.uk, r.ogden@salford.ac.uk, r.aspin@salford.ac.uk
ISBN 978-91-977071-4-5 (print), 978-91-977071-5-2 (online)
2012 Association for Learning Technology. © L. Griffiths et al. This is an Open Access article distributed under the terms of the Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license (http://creativecommons.org/licenses/by-sa/3.0/) permitting all non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited.
http://dx.doi.org/10.3402/rlt.v20i0.19199
Higher Education (HE) across the world is undergoing fundamental change, driven primarily by the volume of students entering HE and financial constraints imposed by funding bodies. Reports by governmental and non-governmental organisations in the US, UK and Australia (A Test of leadership: charting the future of U.S. higher education 2006; Blass, Jasman, and Shelley 2010; Comrie 2011; Review of Australian higher education 2008; The future of higher education: How technology will shape learning 2008) all cite the necessity for inclusion and accessibility to educational material to be key in improving quality and effectiveness of the educational service provided by HE in the future.
It is recognised that institutions need to overhaul their processes (Willets 2010) and become edgeless (Comrie 2011) in order to improve their accessibility and overcome factors such as time available for study and financial support. If done well, this will undoubtedly drive student success (Griffiths 2011), in an environment where there is already, or will soon be, no government funding (Blass, Jasman, and Shelley 2010). Predictions suggest that in the UK at least the student population will remain constant for the next 15–20 years (The future size and shape of the higher education sector in the UK 2009) and thus demand for the service is expected to remain fairly constant.
Most, if not all institutions deliver material on- and off-campus using a Virtual Learning Environment (VLE) to provide extended support for traditional teaching or distance learning. The predominant VLE technologies are Blackboard and Moodle and in their most typical form are used more to manage course delivery than to offer a wider range of learning experience to students. Both systems (and other off the shelf VLEs) utilise server-side delivery of content wrapped in a XHTML presentation layer thereby acting more as dry and non-interactive document repositories protected by institutional security than creative learning experiences.
These tools need to change in order to deliver rich user experience (UX) wherever they are used and on whatever platform they are accessed through as we see on social media platforms such as facebook and twitter. Currently XHTML-based systems provide interaction using plug-in adaptations such as Java or Adobe Flash based tools, but these do not always provide a consistent or acceptable experience across different configurations of operating systems (OS) and browser platform. If VLEs are a way to smooth the edges (Comrie 2011) of an institution for the future then they need to be technically adapted to ensure inclusion and collaboration: HTML 5 promises these possibilities. This is exemplified by the most prominent providers of cloud-based services and devices (Google, Microsoft and Apple), who are already embracing the anticipated capabilities of HTML 5 in the user interfaces of their products.
HTML 5 is the next version of the HTML specification which includes new elements and capabilities which will greatly enhance the UX and add new functionality to browsers without the need for plug-in technology such as Adobe Flash. This means that compatibility and access issues will all but disappear, and access to powerful application-like online learning should be consistent regardless of user platform and device. Educators should be able to deliver the same rich experience to students without having to worry about the technology with which it is consumed.
Following its inception in 1992, HTML was extended by adding more elements for layout, styling and interaction as it became more popular and led by user requirements and demands. In addition, server side languages grew to provide dynamic, data-driven content. By 1997 HTML 4 was initially released; however, documents were becoming increasingly inconsistently authored across the web, so a more structured technical approach was called for. The W3C (World Wide Web Consortium) started developing XML in 1996 and created a far more structured markup language.
While the W3C were working on XHTML 2.0, in 2004 the Web Hypertext Application Technology Working Group (WHATWG) started working on HTML 5. HTML 5 started to adopt some extra elements for a more semantic approach to web content. In 2009 the W3C stopped working on XHTML 2.0 and joined the WHATWG in development and standardisation of HTML 5 and worked towards completion of the standard by July 2012.
It must be understood that HTML 5 is not just a new version of HTML document markup but also a significant improvement to the language's UX capabilities. It will offer markup and functionality for the construction of complex web applications including video, audio, geolocation and natively rendered scalable vector and 3D graphics. This means that websites will quickly become powerful web applications comparable in capability and performance as a natively installed application but without platform dependencies. This concept is not new and Java was developed to provide many of these capabilities during the mid-1990s, offering a rich UX in the browser. However, performance was a problem in the early days and developers wanting an improved UX opted for Macromedia's Flash tool which was optimised for the platform it was running on.
Websites are quickly overtaking native application technology as the way to deliver an “installed” application UX. Whilst XHTML-based websites have often been used to present dynamic content, delivered from databases, they require significant development to make the UX interactive. HTML 5 provides a standard Application Programming Interface (API) to access device features (such as accelerometers and touch events). Using this, developers can now create websites which act, and react, in a similar manner to traditional desktop applications. Prior to HTML 5 it was not possible to achieve this, fully, due to lack of interactive ability and standardisation.
HTML 5 promises a fundamental restructuring of information on the Internet by allowing websites to internally mark their content areas explicitly with elements such as <header>, <section> and <article>. Figure 1 shows a comparison between content markup for XHTML and HTML 5, and demonstrates how information meaning can be more clearly identified at the markup level using HTML 5. Whilst the XHTML version is structured as a document into sections, the sections represented by <div> elements are literally meaningless.
Figure 1.
Comparison of basic site markup in XHTML and HTML 5.
This is an important change to the way that information on websites will be found by search engines, as authors can now define the content more clearly.
Adoption of HTML 5 elements should result in an emerging semantic web as HTML 5 markup practices are adopted by developers and users should more easily find the content they are looking for. For academic information management this should significantly improve the effectiveness of the research process for students. A VLE whose content is created with HTML 5 markup should be much easier for its embedded search engine to index and if open access, global search engines to probe and rank.
In this section we review how the most important new features of HTML 5 are currently supported by VLEs, how they are intended to work via an API and how they might be used in future learning scenarios.
The communications protocol used by web sites is HTTP which operates a Request and Response mechanism. The client web browser requests data from a web server and the web server responds with data. The client must typically wait until all the data are sent before it will get a response from the server and this creates a poor UX. A recent improvement to this issue was to use a request in the background (asynchronously) using a technique called Ajax (Asynchronous JavaScript and XML). When adopted it transformed the way that websites could be used as it enabled data to be sent to, and received from the server without refreshing the entire page. The most commonly used versions of Blackboard, the predominant VLE, do not make significant use of Ajax and are known to deliver a poor UX to students and staff as a result. Whilst improving some aspects of the UX, one of the problems with using Ajax in a web page is that it makes simple browser navigation awkward, as navigation activities tend to traverse between whole page content. HTML 5 now has a history API which allows the web application to use the history features within the browser, meaning that the users can now use browser implemented back and forward buttons to sensibly control sub-elements of a page modified using Ajax. A further significant problem with Ajax previously was that it did not support file upload well, however the associated functions as specified by HTML 5 now support multiple file uploads and progress monitoring. Thus it is now possible to create a cross platform drag-and-drop file upload facility, ideal for gesture-based interfaces such as tablet devices. Overall it will offer the opportunity to create a more effective and interactive VLE; it will enable easier navigation through pages and content and therefore allow quicker creation of content by academics and submission of work by students.
Many applications deliver information to users, which is both important and time-sensitive. Traditionally notifications from web applications are delivered as a result of refreshing page or element content and are therefore only near real-time or not at all. The new notifications API in HTML 5 allows a web site to deliver timely notifications to the client using the underlying OS notification methods (Web Notifications 2011). These are not modal alert boxes as seen in the traditional sense, but instead can appear without disrupting the UX. For example while a user is active on a VLE, the system could be performing Ajax requests in the background to have notification messages appear, even if the web browser is running in the background of the desktop. In practice the notifications API could be used for real-time reminder alerts so that students are aware of upcoming events such as deadlines or lectures. It can also be used for real-time peer-to-peer communication. This communication could be a broadcast from the tutor to all students who are enrolled on their module and active online, or it could allow students to have real-time communication with each other without third party plug-in technologies or software. Notifications can be interactive, as the W3C has specified events which can trigger when the user interacts with the notification such as clicking on it or closing it.
Prior to the HTML 5 specification there was no standard way of distributing media online, so Adobe Flash has typically been used to provide an acceptable cross platform solution. However Flash has its limitations: (1) it has accessibility issues, as content cannot easily be read by screen readers; (2) it requires a third party plugin and (3) it is known to be resource intensive for providing relatively simple functionality. The latter is an important issue with the shift towards mobile computing, causing vendors such as Apple and Microsoft to declare that they will not support it on their mobile platforms (Jobs 2011; Metro style browsing and plug-in free HTML 5 2011). This has since meant that Adobe have officially withdrawn its Flash support for all mobile devices as of late 2011. Accessing media from a non-mobile ready VLE is virtually impossible. However interactive learning tools created using Flash are abundant and the migration away from it will be long and slow towards HTML 5-based content. See the Graphics processing section later.
HTML 5 has new elements specifically for media delivery, the <audio> and <video> elements (4.8.6 The video element HTML 5 2011). Multiple source files can be used within the media elements to allow the browser to play one which encoding it supports. Most mobile devices now support these elements allowing media to be played on the widest range of platforms. These elements also have events which allow for accessible, external and automatic control of the media and will be used for delivery of course media content across many more platforms than previously ensuring wider inclusion to learning material.
Geolocation (the ability to identify geographical position) is not widely supported by current VLE implementations yet, although easily extensible and open systems such as Moodle and Elgg make including this feature relatively easy.
The Geolocation API in HTML 5 allows websites and web applications to geographically locate where the client is. Whilst this has been cited, but perhaps misrepresented as a possible security issue by the media (Wakefield 2011), the benefits to the user are significant. The potential for security issues is well understood and ultimately the responsibility of the browser implementation (De Ryck et al. 2011). The Geolocation implementation is not guaranteed to return accurate or correct information due to its reliance on the client software providing the location-specific data.
There are two ways of obtaining this data, either through a single look-up which will return an immediate location or by “watching” the location. The location “watch” feature has the advantage in that it allows the tracking of the client (such as when it moves) and also allows for refinement of the accuracy of the coordinates returned.
From an educational perspective there are many examples of the use of Geolocation in art, science and professional education (Herrington et al. 2010) with social media services like YouTube being mashed with GoogleMaps and VLE content. There is also a strong prediction that it will be an important part of emerging educational paradigms (Johnson et al. 2011) particularly when used in augmented reality scenarios (Pemberton and Winter 2009) or field trips. On an administrative level, an embedded Geolocation feature of a Managed Learning Environment (MLE) could offer searches for location sensitive content such as class timetables or physical proximity to learning resources.
On mobile platforms data connections can be unreliable, particularly when on the move. This can cause problems for web applications which continually carry out background requests to keep the current user's actions synchronised with the server. With HTML 5 offline caching, the client can be sent a “manifest” file which contains references to all the files needed for a particular web application to work offline. While offline, complex data may need to be stored ready to be sent back to the server. This can be stored in a client-side database and accessed through JavaScript. This allows semi-permanent storage of data which can either be used entirely offline or synchronised to the server when the client goes online. For users this will create the benefit of seemingly unhindered access to content if they are on a mobile data network such as may be experienced on a field trip.
Current VLE systems have little native support for advanced, interactive graphics. This is disappointing, but confirms the primary issue with the way many VLEs are used, as document repositories, rather than compelling learning experiences. This is counter to most pedagogues, such as Visual Auditory Kinesthetic (VAK), where learning is seen as requiring many differing modalities of communication, with visual and kin-aesthetic seen as particularly important for establishing comprehension of knowledge. As with any web page construct, additional functionality can be incorporated with the use of third party plug-in tools, such as Adobe Flash and Microsoft Silverlight. These tools are commonly used to create interactive learning environments, typically in the form of simple 2D “platform” games, such as key stage 1 counting trainers. However, complex concepts can also benefit from visual communication, where as part of an interactive “game” students can be confronted with virtual worlds that present either impossible scenarios or new perspectives. This approach can be highly pedagogical and cost effective (Kapp and O'Driscoll 2010); however, the limitations of plug-ins, limited API and inability to exploit available graphics hardware (neither Flash or Silverlight provide hardware acceleration of 3D graphics) mean that such approaches cannot be performed within a web-based learning environment with the same level of fidelity as can be achieved within a native application. This coupled with the incompatibility of these tools with some browser platforms (e.g. Flash is unavailable on iPhone/iPad) means that these plug-ins are neither adequate for complex visual learning environments, nor widely available enough for edgeless, anytime-anywhere learning to take place. A subtle, but perhaps pertinent, point is that accessibility for a person with physical or cognitive disability may be better provided for as graphics capability improves or can be tailored to an individual's needs (Zielke, Roome, and Krueger 2009).
HTML 5 formally introduces a Canvas support for 2D and 3D graphics, in which advanced graphics programming is enacted within a subset of the HTML document language: webGL. Furthermore, because this is part of the standard for HTML 5, it is available on any browser supporting the standard no matter what the OS or platform, thereby ensuring that embedded graphics will operate effectively on all devices, be they desktop, net-book, tablet or phone.
As with all emerging technologies, there are issues with backwards compatibility. Older web browsers will not support the features of HTML 5 and so developers must make sure they implement graceful degradation so that users do not experience errors and non-working features. HTML 5 has only recently been finalised meaning that even the most advanced browser such as Chrome, Firefox 12, Safari 5.1 and IE 9 & 10 may not fully implement all the features. This is a problem that can linger for many years and so to ensure inclusion, organisations delivering HTML 5-based software must make the minimum requirements clear to students accessing off campus. Equally large organisations often take several years to update their standard browser offerings for staff and students so a committed strategic plan needs to be in place now to ensure sensible migration timescales.
An organisation using a well-built, interactive, HTML 5-based system could experience higher traffic to their web servers, because it is likely that students would use it more than traditional “document repository” VLE solutions because of the increased efficacy. Organisation may need to consider server performance and bandwidth to allow for HTML 5 web applications to work to their full potential as a result. Any publicly facing server is vulnerable to attack and this is not limited to an HTML 5 application, but the features it provides means that there is likely to be more data that needs securing than a current XHTML-based VLE.
A HTML 5-based VLE would not necessarily require a wholesale upgrade of all learning content within an existing VLE, but would require a fundamental change to way the underlying technology delivers its content. This would mean a new version of the organisation's VLE or shift to an alternative VLE would be required. License fees for systems such as Blackboard vary, they are not small, and are often based on numbers of users. The cost and logistics of upgrading would be very significant and mostly consumed in staff and student training as has been seen when institutions change Blackboard versions or switch from one product to another.
Tools in a VLE built using technology that could be superseded with HTML 5, predominately Flash-based simulations or Java applications, would benefit from being rebuilt in HTML 5. However the knowledge-base of Flash and Java currently far outweighs the availability of tools capable of developing sophisticated HTML 5 applications. The HTML 5 development process is currently very labour intensive, although Adobe have released a preview of their Flash-like animation tool cable of HTML 5 output – Adobe Edge and Microsoft Visual Studio 11 will create applications based on HTML 5 and JavaScript so this problem will lessen over the next few years.
There is no doubt in the commercial software and web industry that HTML 5 is a move in the right direction with most digital agencies now developing for HTML 5 instead of XHTML and this is evidenced by the sectors’ current recruitment drive.
The HTML 5 specification was due for completion in mid-2012, and new technologies become fashionable quickly these days. Historically new versions of the most popular browsers tend to be adopted over a 2–3 year period from introduction but this rate of adoption appears to be accelerating given the increasing global saturation of Internet usage and drive to improve the UX.
HTML 5 can easily support the scenarios described but will only do so if it is adopted properly. As the majority of websites and web applications are currently coded in XHTML, the migration to HTML 5 will take time but all indications are that the HTML 5 is strongly supported by the web industry. Developers creating new websites and web applications should be encouraged to use the emerging standard and adopt a genuinely semantic and standardised approach to their solutions. The truly semantic web will only work when everyone adopts the concept and technology and there is no going back. Until then it will require early adopters such as Google and Apple to lead the way as they are, showcasing examples of what can be achieved using HTML 5 and CSS 3 and their latest browsers.
In education we need to help drive this change by promoting the values of a single standard and to demand that those who provide our technological solutions (e.g. internal IT services) devise strategies to adopt HTML 5 versions of the applications they manage. HTML 5 provides the technological tools to help HE shape itself and migrate towards the edgeless future predicted by academics, Governments and other organisations. HTML 5 is not a fad and is usable now so organisations need to be making strategic decisions about its adoption if they are to maintain an edge in the fragile HE market.
We envisage the first apparent advantages to users to be developments in the UX and device compatibility but the long-term gains will be general accessibility, information retrieval and application sophistication. This will help HE adopt the recommended extensions to delivery to implicitly enable distance learning modes in order to improve learning in the modern society.
4.8.6 The video element HTML 5. (2011) ‘W3C working draft’, World Wide Web consortium, [online] Available at: http://www.w3.org/TR/HTML5/video.html
A Test of leadership: charting the future of U.S. higher education. (2006) A report of the Commission Appointed by Secretary of Education Margaret Spellings, US Department of Education, Washington, DC.
Blass, E., Jasman, A. & Shelley, A. (2010) ‘Visioning 2035: the future of the higher education sector in the UK’, Futures, vol. 42, no. 5, pp. 445–453. [Crossref]
Comrie, A. (2011) ‘Future models of higher education in Scotland: can collaborative, technology-enhanced learning offer solutions?’, Campus-Wide Information Systems, vol. 28, no. 4, pp. 250–257. [Crossref]
De Ryck, P., et al. (2011) ‘A security analysis of next generation web standards’. Technical report, in European Network and Information Security Agency (ENISA), July 2011, eds G. Hogben & M. Dekker. Available at: www.enisa.europa.eu/activities/application-security/web-security/webstandards?searchterm=a+security+analysis .
Griffiths, L. (2011) ‘Flexible learning in an inflexible society’, In Proceedings of the 11th IEEE International Conference on Advanced Learning Technologies (ICALT), IEEE Computer Society, Athens, USA, pp. 274–276.
Herrington, J., et al. (2010) ‘New technologies, new pedagogies: mobile technologies and new ways of teaching and learning’, The faculty of education, University of Wollongong [online] Available at: http://ro.uow.edu.au/newtech
Jobs, S. (2011) ‘Thoughts on flash’ Apple, [online] Available at: http://www.apple.com/hotnews/thoughts-on-flash/
Johnson, L. et al. (2011) The 2011 horizon report, The New Media Consortium, Austin, TX.
Kapp, K. M. & O'Driscoll, T. (2010) Learning in 3D, Adding a new dimension to enterprise learning and collaboration, Pfeiffer, San Francisco, CA.
Metro style browsing and plug-in free HTML 5. (2011) ‘MSDN’, [online] Available at: http://blogs.msdn.com/b/b8/archive/2011/09/14/metro-style-browsing-and-plug-in-free-HTML5.aspx
Pemberton, L. & Winter, M. (2009) ‘Collaborative augmented reality in schools’, In Proceedings of the 8th International Conference on Computer Supported Collaborative Learning (CSCL2009), Rhodes, Greece, pp. 109–111.
Department of Education, Employment and Workplace Relations. (2008) Review of Australian higher education: final report. Department of Education, Employment and Workplace Relations, Canberra.
The future of higher education: How technology will shape learning. (2008) Economist intelligence unit, The New Media Consortium. Available at: www.nmc.org/pdf/future-of-higher-ed-(NMC).pdf
The future size and shape of the higher education sector in the UK: threats and opportunities. (2009) Universities London, UK.
Wakefield, J. (2011) ‘HTML 5 new target for cybercriminals’, BBC news report 2 December 2011, [online] Available at: http://www.bbc.co.uk/news/technology-16005053
Web Notifications. (2011) ‘W3C Working Draft’, World Wide Web consortium, [online] Available at: http://www.w3.org/TR/notifications/
Willets, D. (2010) ‘Universities need radical overhaul, says David Willetts – minister of state for universities and science’, BBC news report 10 June 2010, [online] Available at: http://www.bbc.co.uk/news/10278662
Zielke, M. A., Roome, T. C. & Krueger, A. B. (2009) ‘A composite adult learning model for virtual world residents with disabilities: a case study of the virtual ability second life Island®’, Journal of Virtual Worlds Research, vol. 2, no. 1, pp. 1–21.