HTML5 Rocks

RBEN GONALVES

HTML was not created to target the vague subject commonly

referred to as Web Applications. The W3C1 states that, HTML
(Hypertext Markup Language) was primarily designed as a
language for semantically describing scientific documents,
although its general design and adaptations over the years
have enabled it to be used to describe a number of other types
of documents.
However, with the release of the fifth major version of HTML
(aka HTML5) new features that mainly target Web Applications
have been introduced, ranging from CSS3 (related technology)
to GeoLocation and WebStorage. HTML5 is not one big thing
but a collection of individual features, meaning:
HTML5 support cant be detected and instead developers
must detect if the specific feature used is supported by
the browser (feature detection).
HTML5 specification is not closed and more and more
features are being included in the W3C
recommendation.
The image on the side gives a small idea of what might be
added in the near future.
From this list of potential features, there are a few that
developers should try to incorporate into their applications
without hesitation.

1 http://www.w3.org/html/wg/drafts/html/master/introduction.html#introduction

UX SERVICES AT OUTSYSTEMS

Is HTML5 introducing new tags? Not necessarily. Developers need to stop thinking of HTML as
only tags and angle brackets. For example, HTML5 doesnt just define the <video> tag, but also
the corresponding API. With this API, it is possible to detect support for video format, stop, play,
pause, and even knowing how much of a video has been downloaded.

Developers might think, I build enterprise applications, so those features

dont matter. That couldnt be further from the truth. In our fast-paced world,
not being available in mobile is almost like not existing. When adapting or
creating web applications, we must consider that users might not be where
we think they are (e.g. office desk).
With this in mind, developers can create better applications by adding features
to the application that will further help the user performing the tasks.
So, what are the Top 5 features of HTML5 that developers should be using now?

Camera access

HTML5 provides the ability to access media devices present on mobile

devices: camera (picture/video), microphone, etc.

Canvas

The canvas element is part of HTML5 and allows for dynamic, scriptable
rendering of 2D shapes and bitmap images. How is the Canvas element
helpful? Well, to allow the following sort of things:

GeoLocation

This feature obtains the geographical position of a device. Imagine:

Showing information based on a users location.
Mapping the days route for salespeople.
Giving delivery drivers specific directions based on their location (A):

Yes, its possible using the canvas to collect user signatures on tablets,
smartphones, etc.

Web Storage

With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, web storage is more secure
and faster.
Persistent local storage is one area where native client applications have held
an advantage over web applications. For native applications, the operating
system typically provides an abstraction layer for storing and retrieving
application-specific data like preferences or runtime state.

Simply put, web storage is a way for web pages to store named key/value pairs
locally within the client web browser. Like cookies, this data persists even after
a user navigates away from the web site, closes a browser tab, or exits a
browser. Unlike cookies, this data is never transmitted to the remote web
server (unless sent manually). This approach succeeds where prior attempts at
providing persistent local storage failed. It is implemented natively in web
browsers, so it is available even when third-party browser plugins are not.
This is one of those features that is still very volatile, be sure to read the specs
and the check if your target browsers support it.
Read more at http://diveintohtml5.info/storage.html

App cache

The cache manifest in HTML5 is a software storage feature which provides

the ability to access a web application even without a network
connection.
As it is well described in Dive Into HTML5:
At its simplest, an offline web application is a list of URLs HTML, CSS,
JavaScript, images, or any other kind of resource. The home page of the
offline web application points to this list, called a manifest file, which is just
a text file located elsewhere on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically
keep the local copies up to date as they change. When the time comes that
you try to access the web application without a network connection, your
web browser will automatically switch over to the local copies instead.

This means the pages are stored statically in the browser (submit buttons
wont work) and forms will have to be handled manually using Web Storage
for example.

HTML5 is here to stay.

Here is what the W3C had to say about the future of web standards in July
2009:
Today the Director announces that when the XHTML 2 Working Group
charter expires as scheduled at the end of 2009, the charter will not be
renewed. By doing so, and by increasing resources in the HTML Working
Group, W3C hopes to accelerate the progress of HTML5 and clarify W3Cs
position regarding the future of HTML.
While developers would love to trash all of the old browsers, unfortunately,
they cant. To know which features work in which browser visit these sites:
www.caniuse.com or http://html5please.com/.
References:
http://diveintohtml5.info/
http://www.html5rocks.com/en/
http://www.w3.org/

About the author

Living on the edge is his personal motto, Rben is always eager to learn
and explore all those alpha features that are popping up in the IT world.
He's been focusing more and more on mobile web applications, while
exploring the specifics of UX for mobile.

To see how OutSystems Platform makes working

with HTML5 easy visit us on the web.

www.outsystems.com
Share this paper on: