Ravikumar Vadde

HTML5 – an Awesome Option for Cross-Platform App Development


HTML5 and cross-platform web and mobile developmentI recently had the opportunity to implement an app for a client using HTML5.  Since I first began working with HTML5 I was impressed with its rich functionality. One of the aspects I like best about HTML5 development is that I can use the platform to produce a completely familiar reading experience and thus deliver excellent user experience for the app user and great results for the client.

While there are many reasons why internet marketers need to know about HTML5, I am going to focus for the rest of this article on discussing the features that I – as a developer – find most useful in the HTML5 platform. These are the innovative ways of handling processes and information that could make HTML5 development the big winner over other front-end technologies.

The <Video> Tag 
Embedding videos on a website is now much easier in HTML5 than it was in previous versions of HTML. You don’t need to depend any more on 3rd party plugins like Flash or Sliverlight to embed video or audio files. Now all you have to do is use HTML5′s built in coding to embed your media of choice, which is great because it circumvents all kinds of compatibility issues that come with 3rd party players.

You can customize the default image shown in the video player screen by including poster parameters inside the video tag that point to the image URL.

Customize Video Player with HTML5

Using the p[oster tag to customize HTML5 video

It’s not just the look of the player you can adjust; Customizing your HTML5 video player functionality is done through a number of DOM methods, properties and events which are available, that allow developers to control the video player using javascript or the javascript framework. Since each browser provides its own different look and feel for the player, we'll have to create our own controls using custom HTML and the DOM methods, properties and events mentioned above If we want to have tighter controls over the user experience and integrate our own design across all browsers.

Currently, there are 3 supported video formats for the <video> element in HTML5: MP4, WebM, and Ogg:

  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

Note: Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element. Internet Explorer 8 and earlier versions do not support the <video> element.

The <Canvas> Tag
We can use a <canvas> element as a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. This allows web developers to easily create animation, rich interfaces and games.

The canvas tag supplies a space where a rich toolkit of drawing operations can occur – a functionality that may very well revolutionize the Web. If you want to see the canvas tag in action, check out the facebook developers section where a number of HTML5 games have been created that use the canvas tag (with JavaScript support).

Note: The canvas tag is supported by nearly all current browsers. The latest versions of Chrome, Safari, Opera, Firefox, and Internet Explorer (IE) 9. (IE8 and earlier don't support canvas.)

Semantic Structure
You no longer have to worry about the element ID’s to produce Semantic structure to the pages. HTML5 elements were created to help better explain the semantic structure of the content in an HTML document.  In HTML5 there is a great selection of new block level elements that help you to create a semantic structure quickly and of course your code becomes more readable and maintainable as a result.

With these new tags you can begin to forget about <div id=”header”> and <div id=”footer”> and start using the <header> and <footer> tags. These new tags will work the same as “div” tags, the difference being that there is less writing, and easier-to-read, more “semantic” code.

HTML5 comes with a few other new elements that are worth note. Tags such as <nav> <aside> <section> <article> <hgroup> <figure> and <figcaption>.

  • The <nav> tag specifies the navigation links of our page replacing <div id=”navigation”>.
  • The <aside> tag refers to a section of the page that is separated from the main content. It is mostly used for sidebars and some secondary information.
  • The <section> tag is used to create different sections within the page and the <article> tag can contain a blog post, news post, comment etc.  A <section> can contain many <article> elements and an <article> element can contain many <section> elements.
  • We also have a new container for the headings <h1> to <h6> which is the <hgroup>
  • The <figure> and <figcaption> tags allow designers to associate images and other units of content with the main flow of content while keeping them separate

Note: All these tags are supported by nearly all current browsers. The latest versions of Chrome, Safari, Opera, Firefox, and Internet Explorer (IE) 9. (IE8 and earlier don't support these tags by default. HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9)

Another notable features introduced in the HTML5 framework is the GeoLocation API which will capture the user’s location and allow developers to use the information  in different services like mapping.

There are updates in the form elements in HTML5 such as new form input types <input type="search"> and <input type="date"> and client-side form validation.  We don’t need to depend on the javascript for the simple validation like required fields. We just need to add an attribute “required” to the input fields and for the default value also we just add an attribute called “placeholder”

<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

We can use regular expressions also to control form field entries.
<input type="text" id="inputid" name="inputname" pattern="[A-Za-z0-9]{6}"
   title="field consist of 6 alphanumeric characters.">

This overview could go on and on. Suffice it to say there are hundreds of features in HTML5 that, when combined with CSS3 and Javascript/Javascript frameworks make this a powerful improvement over previous versions. Over all HTML5 is looking to be very promising and with constant development of ideas, will continue to provide developers with new ways to build the fastest and most robust applications.

Get Videos from The SMAC Stack - Social, Mobile, analytics and cloud