OutSystemsDev Zone

HTML5 Rocks

What kind of title is “HTML5 Rocks” for a blog post? Hopefully by the end of this post you’ll both understand and feel it as well!

First, a little history. The W3C 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.

This actually means that HTML was not created to target the vague subject commonly referred to as Web Applications.

The 5th major version of HTML (aka HTML5) introduces new features, ranging from CSS3 (related technology) to GeoLocation and WebStorage that mainly target Web Applications. HTML5 is not one big thing but a collection of individual features. This actually means two things:

  1. HTML5 support can’t be detected and instead we must detect if the specific feature that we want to use is supported by the browser (feature detection).
  2. HTML5 specification is not closed. More and more features are being included in the W3C recommendation.

The image below gives a small idea of what might be added in the near future.

html5-pic1

But from all these cool, and perhaps cryptic, features, there are a couple that we should try to incorporate into our applications without hesitation.

So, is HTML5 introducing new tags? Not entirely true. If you still think of HTML as only tags and angle brackets, you’re missing an important part. For example, HTML5 doesn’t just define the <video> tag, but also the corresponding API. With this API, it’s possible to detect support for video format, stop, play, pause or even to know how much of the video has been downloaded.

You might be thinking, “I build enterprise applications, so those features don’t really fit in!” Well, that couldn’t be further from the truth. In our fast-paced world, not being available in mobile is almost like not existing. So, 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, we can create better applications (see Solving the Pitfalls and Inherent Complexity of Responsive Design) 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 we should be using now?

1. GeoLocation

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

  • Showing information based on the user’s location.
  • Mapping the day’s route for your salespeople.
  • Giving delivery drivers specific directions based on their location (A):

map

All of this is possible if the location of the user is known. However, because this information can compromise user privacy, the position is only available if the user approves it – this permission is requested at a domain level:

pic2

If the device being used doesn’t have GPS, the system will try to provide a location based on the IP address. This, as one might imagine, will decrease it’s accuracy.

Now the techie stuff!

To use this feature, the following method should be called:

pic3

This method can receive three parameters:

I. Success: This is a callback function that will be called as soon as the position is obtained. This parameter is mandatory.

pic4

This callback function receives a JSON object containing the information obtained:

  • Timestamp
  • Speed
  • Heading
  • Altitude
  • Altitude Accuracy
  • Latitude
  • Longitude
  • Accuracy

II. Error: This is a callback function that will be called if an error is received when obtaining the position.

pic5

If the user refused to shared their location, this method will be called stating.

III. Options: This parameter receives a JSON object with the possible configurations that the API may receive:

  • enableHighAccuracy:
  • timeout
  • maximumAge

To learn more about this API, please see the W3C specification.

 

2. Camera access

The HTML5 provides the ability to access the media devices presented on the mobile devices: camera (picture/video), microphone, etc.

To use this feature it’s only required to add some attributes to the upload file tag:

pic6

In order to use this feature in the OutSystems Platform, just use the upload file widget and add the above tags to the extended properties:

pic7

 

3. Canvas

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. This means that to do something like this:

pic8

The following HTML tag is added first:

pic9

Then using JavaScript, elements can be drawn in it:

pic10

But how could the Canvas element be helpful anyhow? Well, to allow the following sort of things:

IMG_22012014_103950

Yes, it’s possible using the canvas to collect the user’s signature! (Tablet, Smartphone, etc.)

 

4. 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, it’s 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, etc. Unlike cookies, this data is never transmitted to the remote web server (unless sent manually). Unlike all previous attempts at providing persistent local storage, 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 then check if your target browsers support it.

Read more at http://diveintohtml5.info/storage.html

 

5. 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 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 won’t work) and forms will have to be handled manually using Web Storage, for example.

In order to use this feature, one has to add a tag manifest to the HTML element:

pic12

This means that the browser will understand that there is cache manifest file that needs to be downloaded. The browser now knows that the following page, plus others, might need to be cached.

Then the cache manifest file contains several sections:

  • Cache: This section will indicate which files (images, css, JS, web pages) should be stored locally.
  • Network: This section indicates the resources that require the user to be online.
  • Fallback: This section indicates which resources should be served to the user if trying to access them while offline.

So, typically the cache manifest looks as follows:

pic13

If using the web storage feature or the cache manifest, first try looking into the following OutSystems Forge component, which will help achieve both:

http://www.outsystems.com/forge/component/479/html5offline/

Finally, remember that 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 W3C’s position regarding the future of HTML.”

Although we (developers) would love to trash all of the old browsers, unfortunately, we can’t. So, if you want to know that a specific feature can be used in a specific browser look at 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

Rúben Gonçalves

‘Living on the edge’ is his personal motto. Rúben 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 the UX for mobile.

Comments

Very interesting article! Awesome OS insight details.

Thank you for sharing your knowledge.

Tiago Simões

Very cool article, thanks for sharing!

João Batista

Cool article, very enlightening of the features available with HTML5.

Jaime Vasconcelos

Great article!
Thanks for sharing it with us!
Cheers!

Leave Your Comment