A FIRST LOOK AT HTML5 Dustin Marx, Raytheon Company A First ...

resonanttwangInternet and Web Development

Jun 21, 2012 (5 years and 2 months ago)

439 views

A

F
IRST
L
OOK AT
HTML5
Dustin Marx, Raytheon Company
A First Look at HTML5: Presentation Abstract
HTML5 is the forthcoming standard in hypertext markup for the modern web. Although work on HTML5 has been ongoing
for several years, interest and support for HTML5 has increased rapidly in recent months. An example of this is the JavaOne
2010 announcement that JavaFX 2.0 will provide HTML5 support. This short presentation will describe some of the most
exciting features of HTML5. The presentation also covers the reasons that HTML5 is important and describes some of its
limitations and obstacles to adoption. Finally, HTML5 features already supported in four popular modern web browsers
(Microsoft Internet Explorer, Firefox, Google Chrome, and Safari) will be demonstrated.
What is HTML5?
HTML5 is a World Wide Web Consortium (W3C) specification that represents the latest version of both HTML and
XHTML. The specification abstract defines itself as “the 5th major revision of the core language of the World Wide Web: the
Hypertext Markup Language (HTML).” HTML5 not only consolidates HTML and XHTML into a single specification, but it
also brings greater standardization to web browser support for modern features.
Although there is an HTML5 specification, the term “HTML5” is often used to discuss a wider set of technologies that
include but are not limited to the HTML5 specification. For example, the Geolocation API and Web Storage have their own
distinctive specifications, but we often refer to them as part of HTML5. In this paper and the associated presentation, I will
cover many of these modern web technologies as part of “HTML5” in the broader sense, but also point out what features are
covered and not covered by the HTML5 specification itself.
Major Features of HTML5
HTML5 offers a standardized approach to many modern web browser features. Some of HTML5’s most significant
standardized features are:
 Audio Support
 Video Support
 Drawing / Canvas
 Geolocation API*
 Client-side Web Storage*
 Offline Functionality Support
 Improved Built-in Form Support
The features marked with * are covered by their own specifications, but are commonly referenced as part of HTML5.
Audio Support
HTML5 offers a new
<audio>
tag that can be used to incorporate audio support in web applications without need of a
specific plug-in. Until this tag is better supported, most applications will need to include fallback to Flash for audio support.
Video Support
Although the intent of HTML5 is for a simple
<video>
tag to make it easy to incorporate video into a web page without a
special plug-in, this support is not quite ready yet. Instead, developers usually must build in failover checks to “fallback” to
some other non-HTML5 approach such as use of the special plug-in (Flash Player for example).
Drawing / Canvas
This is arguably the most popular and well advertised feature of HTML5. This is not too surprising given that HTML5’s
drawing support via the
<canvas>
tag enables glitzy and flashy web applications. This is the third feature (along with audio
and video support) that many deem necessary for HTML5 to compete with Flex/Flash and Silverlight. The canvas support
allows dynamic images (animation) to be included in web applications without requiring a special plug-in.
www.rmoug.org RMOUG Training Days 2011
A First Look at HTML5 Marx
Geolocation API
The Geolocation API specification is a distinct specification that is separate from the HTML5 specification. The Geolocation
API provides a standardized approach for web sites and web applications to provide additional functionality to users based on
the location from which they are accessing the site or application. The Geolocation API specifically mandates that compliant
web browsers must allow users to opt out of this to address privacy concerns. In addition, unless users choose to turn it off,
web browsers are required to ask whether geolocation data should be shared with a web provider whenever it is requested.
Client-Side Web Storage
Like Geolocation API, the Web Storage specification is a standalone specification that is separate and distinct from the
HTML specification. Web Storage (also known as HTML5 Local Storage or HTML Storage) is often described as somewhat
similar to HTTP cookies. However, Web Storage has significant advantages when compared to cookies, including the ability
to store significantly more information local storage than can be stored in a cookie. The availability of web storage for web
applications narrows the gap between web applications and desktop applications. Desktop applications have long enjoyed the
advantage of state between sessions, but Web Storage makes this available to modern web applications as well.
Offline Functionality Support
When we talk about web applications, we usually assume applications that are accessed online. HTML5 promises hooks and
tools to allow web developers to build “web applications” that can continue to run in some form even when there is no
connectivity. For example, a developer could detect that the server side portion of the application is not available and save the
user’s state to the client-side Web Storage for later use. Basic functionality might be supported such as allowing the user to
continue making changes and additions in the web browser and saving those changes to the local storage. When the user is
able to reconnect, the application could synchronize the local storage with the server side. As with the local storage, the
advent of standardized support for offline functionality blurs the distinction between browser-based applications and desktop-
based applications.
Improved Built-in Form Support
Forms have been around as long as HTML. Although ubiquitous, forms have not seen many advancements in recent years.
HTML5 aims to change that. HTML5 adds support for numerous new form types such as sliders for numeric ranges, specific
e-mail field type, specific telephone number field type, and so on. HTML5 form fields also support “placeholder text,”
which is text that is present in the form field until the user types text in its place. The new form support is particularly useful
to mobile devices because the ability to specify exactly what type of field is focused on allows the mobile device browser to
optimize for that type of input. For example, the iPhone can optimize the touch screen keyboard for e-mail addresses and
only list the characters typically used in e-mail addresses.
Browser Support for HTML5
One of the most significant challenges in web development has always been the lack of standardization across web browsers.
Different implementations of the same specifications (HTML, DOM, JavaScript, Cascading Style Sheets) often have differed
enough to make it difficult to develop web applications that work across all the browsers. HTML5 is no different. Although
there is an HTML5 specification, implementations of it differ in degree of compliance across the major web browsers.
The most popular web browser, Internet Explorer, supports very few HTML5 features in Internet Explorer 8, but is expected
to be much more HTML5 compliant in Internet Explorer 9. The second most popular web browser, Firefox, begins to offer
significant HTML5 features in Firefox 3.5 and even more HTML5 support in Firefox 4. Chrome 8 and Safari 5 are both
WebKit-based web browsers that offer many HTML5 features. Opera may be the most HTML5 compliant of all these
browsers. Browsers for mobile devices such as the iPhone and Android devices are some of the biggest beneficiaries of
HTML5 and support it relatively well.
Although the major web browsers are becoming increasingly more HTML5 compliant, they still lack some HTML5 features
and still lack consistency when compared to each other. Some features of “HTML5” are more supported than others. Modern
web browsers tend to support local storage and geolocation API very well, but are not as compliant or standardized in video
support, audio support, and new form features. The promise of HTML5 when all browsers are mostly or fully compliant is
great, but that promise has not yet been realized.
www
.rmoug.org RMOUG Training Days 2011
A First Look at HTML5 Marx
www.rmoug.org RMOUG Training Days 2011
Is HTML5 Ready for Production?
HTML5 holds great promise and it is easy to get caught up in the excitement of what it’s bringing to web development.
However, when caught up in this enthusiasm, it can be easy to not realize the downsides to HTML5 as it is implemented
today. None of the major browsers fully support HTML5 in production versions (beta versions such as Internet Explorer 9
and Firefox 4 are doing much better). In addition, even when they do, older versions of these web browsers will still be in use
for some time.
Use of HTML5 features is most likely to be successful in controlled environments where users of a web application are
known to be using HTML5 compliant browsers. In addition, web developers can developer applications that use HTML5
when available and “failover” to other approaches when not available.
Philippe Le Hegaret of the World Wide Web Consortium (W3C, sponsor of HTML5 and related specifications) stated about
HTML5 (October 2010): “I don't think it's ready for production yet. The real problem is can we make [HTML5] work across
browsers and at the moment, that is not the case.” (InfoWorld, “W3C: Hold off on deploying HTML5 in websites”).
HTML5 will more likely appeal to a wider base when the promising beta versions of HTML5-compliant web browsers are
released as production versions and are widely adopted by customers.
HTML5: Hype or Reality?
HTML5 has significant promise, but currently falls somewhere between hype and reality. There are significant portions of
HTML5 specification and related specifications that are supported fairly well by browsers, but there are also some important
portions of HTML5 with very spotty or no support. HTML5 has created intense enthusiasm among its advocates, but there
are still many issues to consider when deciding whether to adopt it and which features to apply first.
HTML5: The Future
HTML5’s future appears bright. The beta versions of the two most popular web browsers (Internet Explorer 9 and Firefox 4)
show significant advancements in HTML5 compliance. Other web browsers are showing similar rapid addition of HTML5
support. The trick for now is to separate promise from current reality and to use HTML5 support that is available when it
makes sense.
Additional Resources
 HTML5 Tag Reference – http://www.w3schools.com/html5/html5_reference.asp

 Dive into HTML5 – http://diveintohtml5.org/

 Apple’s HTML5 Page – http://www.apple.com/html5/

 HTML5 Demos and Examples – http://html5demos.com/

 The State of HTML5 Audio – http://www.contrast.ie/blog/the-state-of-html-5-audio-support/

 HTML5 Video – http://www.w3schools.com/html5/html5_video.asp

 How to Draw with HTML5 Canvas – http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

 Fun with HTML5 Forms – http://thinkvitamin.com/code/fun-with-html5-forms/

 Geolocation API Specification – http://www.w3.org/TR/geolocation-API/

 HTML5 Geolocation API: Your Browser Knows Where You Are –
http://marxsoftware.blogspot.com/2011/01/html5-geolocation-api-your-browser.html

 Web Storage Specification – http://dev.w3.org/html5/webstorage/

 HTML5 Local Storage: Web Storage – http://marxsoftware.blogspot.com/2011/01/html5-local-storage-web-
storage.html

 W3C: Hold off on deploying HTML5 in websites – http://www.infoworld.com/d/developer-world/w3c-hold-html5-
in-websites-041