Research in Learning Technology
Supplement: ALT-C 2012 Conference Proceedings
0305
A profile of the future: what could HTML 5 do for HE by 2015?
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)
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
Higher Education in the near future
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 1520 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
*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
49
L. Griffiths et al.
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.
HTML and HTML 5
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
50
ALT-C 2012 Conference Proceedings
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.
Web applications
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.
Semantic web content
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 Bheader, Bsection and Barticle . 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 Bdiv elements are literally meaningless.
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.
<div>
<h1>This is an XHTML page</h1>
</div>
<div>
<div>
<h2>article 1 title</h2>
<p>article 1 content</p>
</div>
<div>
<h2>article 2 title</h2>
<p>article 2 content</p>
</div>
</div>
<div>
<p>Copyright © UoS</p>
Figure 1.
<header>
<h1>This is an HTML5 page</h1>
</header>
<section>
<article>
<h1>article 1 title</h1>
<p>article 1 content</p>
</article>
<article>
<h1>article 2 title</h1>
<p>article 2 content</p>
</article>
</section>
<footer>
<p>Copyright © UoS</p>
</footer>
Comparison of basic site markup in XHTML and HTML 5.
51
L. Griffiths et al.
Future VLE scenarios based on HTML 5
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.
Dynamic applications
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.
Notifications
Many applications deliver information to users which is both important and timesensitive. 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
52
ALT-C 2012 Conference Proceedings
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.
Media
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 plugin 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 nonmobile 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 Baudio and
Bvideo 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
Geolocation (the ability to identify a geographic 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
53
L. Griffiths et al.
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.
Offline abilities
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.
Graphics processing
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
54
ALT-C 2012 Conference Proceedings
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.
Issues with HTML 5 adoption
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. Organisations 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.
An 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.
55
L. Griffiths et al.
Conclusions
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 23 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.
References
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. 445453.
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. 250257.
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/applicationsecurity/web-security/web-standards?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. 274276.
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
56
ALT-C 2012 Conference Proceedings
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. 109111.
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-ofhigher-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. 121.
57