Polar Mobile bets on HTML5 with new $6M funding round

Toronto-based Polar Mobile, which provides a digital media distribution platform powering the apps of some of the biggest media properties in the world, including Conde Nast, Sports Illustrated and The Wall Street Journal, announced a new $6 million funding round on Monday. The funding will be used to help Polar launch its MediaEverywhere product, an HTML5-based solution aimed at delivering content to an even wider range of devices.

Polar Mobile already covers a wide range of mobile devices. Its SMART platform provides turnkey solutions for launching native apps on iPhone, iPad, Android, BlackBerry OS, PlayBook, Windows Phone and Nokia devices. It’s definitely a leader in terms of white-label native-app solution providers, but the new funding, led by Toronto-based Georgian Partners, will help it extend its reach further still.

Polar Mobile CEO Kunal Gupta told me the planned HTML5 integration of MediaEverywhere will help Polar Mobile’s clients access not only mobile platforms like those listed above, but also the new wave of connected devices, including gaming consoles, cars, TVs and household appliances, as well as social networks like Facebook. At the same time, it will also offer media companies more opportunities to “leverage audience intelligence (data and analytics) to enable higher engagement and monetization,” Gupta said. He thinks this will help companies improve delivery of personalized recommendations, leading to more profitable business models.

The beauty of MediaEverywhere is that it doesn’t force content providers to choose between apps and web-based offerings; it can work with both app- and browser-based media delivery, depending on what solutions Polar’s media company customers choose to target. When it comes to the debate about whether native apps trump cross-platform mobile websites or vice versa, Gupta isn’t taking sides. He says while “apps include richer advertising experiences, distribution channels and homescreen icon presence,” browser-based distribution offers “discovery and referrals from social networks and search engines, which for many media companies now accounts for over half of their incoming web traffic.”

Polar Mobile’s success is based on the recognition that users want their media accessible anywhere, on any device they happen to be using. The launch of MediaEverywhere will help the company extend the reach of its clients’ products further still, in a connected future where people will seek out the things they love on whatever happens to be in reach, via both the web and native apps.

(more…)

Developing in HTML5 with the New Structure Elements: The Basics

In the early days of web development the restrictions on how a page could be laid out were extremely limiting. Over time the limitations shrank as developers moved from simple flowing text pages to using table elements to define designs to using div elements in cooperation with CSS definitions to create modern day layouts.

With HTML5, the trend shifts a bit from removing restrictions to adding structure to HTML elements that are related to content layout. In this article we’ll explore the basics of an HTML 5 page structure with four new elements: header, nav, section and footer.

Simple Page Layout by Example

Since we are covering the basics of the HTML5 page structure we are going to keep our example simple. We’ll be using a header with a navigation bar below the header and a main content area below the navigation followed by the footer. We’ll break down each element as we go and provide the markup so that when you get to the end you can copy and paste all of the examples into a page and see how it looks altogether.

Note: In order to keep the examples as simple as possible we’ll be defining all of our style definitions within the elements themselves instead of placing the definitions in a CSS file. Just keep in mind that when you apply these examples in real life we suggest you make your website development more manageable by using a CSS file and the class attribute for your style definitions.

Defining the Page

Below is just the basic HTML we need to create our page. There’s nothing special about it except the fact we are using the style attribute to define styles instead of the class attribute and CSS (Cascading Style Sheet). If you are not familiar with CSS we suggest that you review the multitude of CSS articles on HTMLGoodies.com.

< ! -- The div below centers the layout in the browser window -- >

The developer’s guide to the HTML5 APIs

Rich Clark, one of the HTML5 Doctors, gets under the hood of the APIs that form the bulk of the HTML5 spec and tells us about their purpose and progress

Whilst we see, read and hear a lot about the new semantic elements in HTML5 we arguably hear far less about the application programming interfaces (APIs) that make up a large part of the specification itself.

As I’m sure you’re aware that there are two versions of the HTML5 specification, one published by the W3C and another by the WHATWG. The living HTML specification maintained by the WHATWG contains additional APIs to those in the W3C HTML5 spec (although generally they are also maintained by the W3C but in separate specifications).

Alongside those in the specification are a number of related APIs that form part of the standards stack and are often grouped under the “HTML5″ umbrella term. In some cases the APIs have been around and implemented for a while, but they’ve never been documented; something which HTML5 has set out to change.

In this article we’re not going to look at code but instead we’ll focus on describing the APIs, their purpose and progress. We’ll then point you in the right direction to find out more.

APIs in the HTML5 specification

We’ll start by looking at the APIs in the W3C HTML5 spec.

Media API

The media API is part of the media element which includes two of HTML5′s poster children, the video and audio elements. The elements themselves are simple to implement but what’s less well known are the JavaScript methods available within the associated API. There are a number of methods including play() and pause() as well as load() and canPlayType(). Many of the methods are shared between both media types with a subset of additional properties (eg poster) specifically related to the video element. Combined with additional events and attributes the API allows us to, amongst other things, create custom controls.

To find out more, take a look at the following articles.

Media Elements, W3C
Everything you need to know about HTML5 video and audio, dev.opera, Simon Pieters
HTML5 audio and video: what you must know, NetTuts (a chapter from Introducing HTML5), Bruce Lawson and Remy Sharp

Text Track API

The text track API leads on nicely from the media API. It is designed to allow us to interact with text tracks (subtitles or captions for example) for the audio and video elements.

You can return the number of text tracks and their length associated with a media element, the kind of text track (subtitles, captions, descriptions, chapters and metadata), language, readyState, mode and label.

This API will have far more support when browsers begin to implement native subtitling, using WebVTT for example. In the meantime, to get up to speed, look at these resources:

Text Track API, W3C
Web Media Text Tracks Community Group
Media Multiple Text Tracks API Wiki, W3C
The YouTube Caption API, Speech Recognition, and WebVTT Captions for HTML5, Google I/O 2011, Naomi Black, Cynthia Boedihardjo, and Jeffrey Posnick
Captionator.js Polyfill
WebVTT and video subtitles, Ian Devlin
Video subtitling and WebVTT, HTML5 Doctor, Tom Leadbetter

Drag and Drop

The drag and drop API has been the topic of much debate. Originally created by Microsoft in version 5 of Internet Explorer, it is now supported by Firefox, Safari and Chrome. So what does it do?

Well, as the name suggests, it brings native drag and drop support to the browser. By adding a draggable attribute set to true, the user has the ability to move any element. You then add some event handlers on a target drop zone to tell the browser where the element can be dropped.

The API’s real muscles are flexed when you start to think outside of the browser. Using drag and drop, a user could drag an image from the desktop into the browser or you could create an icon that gets loaded with content when dragged out of the browser by the user to a new application target.

Drag and Drop is covered in depth in the below articles.

Drag and drop API, W3C
Native, Drag and Drop, HTML5 Doctor, Remy Sharp
Drag and Drop, MDN
The drag and drop API, HTML5 Laboratory, Ian Devlin
Offline Web Applications/Application Cache

With the blurring of native apps (mobile and desktop) and web apps comes the inevitable task of wanting to take our applications offline. The Offline Web Applications specification details how to do just that using application caching.

Application caching is carried out by creating a simple manifest file which lists the files that are required for the application to work offline. Authors can then ensure their sites function offline. The manifest causes the user’s browser to keep a copy of the files for use offline later. When a user views the document/application without network access, the browser switches to use the local copies instead. So in theory, you should be able to finish writing that important email or playing the web version of Angry Birds while you’re on the underground/subway.

With relatively strong browser support, particularly in the mobile arena (Firefox, Safari, Chrome, Opera, iPhone, and Android), it’s something you can start using right now. For further reading, I suggest:

Offline Web Applications, W3C

Let’s take this offline, Dive into HTML5, Mark Pilgrim
Running your web applications offline with HTML5 AppCache, dev.opera, Shwetank Dixit
Go offline with application cache, HTML5 Doctor, Mike Robinson
Offline Browsing in HTML5 with ApplicationCache, Sitepoint, Malcolm Sheridan
Get off(line), Web Directions, John Allsopp

User Interaction

Like offline, user interaction is part of the primary HTML5 specification. It’s worth mentioning here because some of its features, such as the contenteditable attribute, are extremely useful when you’re creating web applications. contenteditable has been around in internet Explorer since version 5.5 and works in all five major browsers. Setting the attribute to true indicates that the element is editable. Authors could then, for example, combine this with local storage to track changes to documents.

For more information, take a look at the current spec but note that some sections have been moved to the HTML Editing APIs work in progress.

History

A browser’s back button is the most heavily used piece of its chrome. Ajax-y web applications break it at their peril. Using HTML5′s History API, developers have a lot more control over the history state of a user’s browser session.

The pre-HTML5 History API allowed us to send users forward or back, and check the length of the history. What HTML5 brings to the party are ways to add and remove entries in the user’s history, hold data to restore a page state and update the URL without refreshing the page. The scripting is fairly straightforward and will help us build complex applications that don’t refresh the page from which we can continue to share URLs as we’ve always done.

(more…)