Is HTML5 Really the Future of the Web?

As the internet takes to center-stage, browsers and the user-experience they deliver are becoming increasingly important. This scenario has HTML 5 being hailed as the future of the web, whether for the desktop or on mobile platforms.

But in an interview with SiliconIndia at its India Software Developer Conference, Aditya Bansod, Senior Director of Product Management at Sencha (a web-app and Mobile HTML5 developer framework) noted that the two areas that HTML 5 is seen lacking as of now, are the areas of gaming, and enterprise IT and security.

So although HTML5 framework and mobile app developing companies have created tools that could be used with CSS3 (and other platforms) to alternate Flash for gaming, “Today still, there’s no better platform for gaming than Flash is,” Bansod noted.

“HTML 5 as a gaming platform is not like Flash. It can be used with a number of other technologies like Silverlight, Web GL, CSS3 transition, CSS3 animation, and many others, but it’s still in the process of getting built and it’s not where Flash is,” he said. “Browsers, moreover, currently aren’t very good at letting the core technologies (Web GL and such) be used for gaming.”

But according to a blog post by AppMobi (another HTML5 development ecosystem), HTML 5 represents an ideal unifying technology that could be used to develop games and apps for a number of platforms (mobile included,) and all at the same time.

Bansod agreed with this viewpoint, saying that for the desktop web, Flash is one of the best tools one could use, especially for gaming, but for mobile, it doesn’t seem to be making any progress. “It’s not as good as it is for the desktop.” This scenario brings about the need for alternatives– in the case of a Flash video replacement (for example) H264 video and AAC audio are used along with the HTML video tag for YouTube on your phone. This replaces a lot of the flash elements. “But for gaming, there’s still no good answer,” noted Banod.

“Another area that I see HTML5 having room to grow is that of Enterprise level security, Enterprise management, Encrypted Data and such,” said Bansod. He noted that a lot of ways to implement applications for these areas were given by Java, and some were supplemented by Flash, and Silverlight, but Bansod said that HTML 5 isn’t there yet.

These two areas are where, according to Bansod, standards are moving ahead of the implementation. He said “I think we need the major players like Google and Microsoft to build on the platform layer, and make Web GL become a really powerful tool, and then we’ll start seeing it, especially in mobile. I think the big next step lies in getting all of that to mobile.”

Mozilla Building an Extreme Alternative to Android and iOS

For people who want to run all the applications under one roof- the web, Mozilla is building a new platform, exclusively based on the industry standard HTML5.

Mozilla will release the first open web device in association with Telefonica, the third largest carrier in the world.

The product will be based on Mozilla’s Boot to Gecko project, which focuses on making HTML5 as the standard platform for mobile devices.

“In a joint press conference, Telefonica revealed their intention to work with us to deliver the very first open Web devices in 2012. These devices, architected entirely on the Web and built based on an HTML5 stack with powerful Web APIs will mean significant advances in speed and cost reduction for mobile devices in the future,” Mozilla said in a post.

Many other companies including Deutsche Telekom, Adobe and Qualcomm are supporting Mozilla in building the open web platform. The company will also preview the open web apps and Mozilla marketplace this week, which will enable the creation and distribution of applications powered by HTML5, JavaScript and CSS, the open web standards.

Google is currently the leading developer of open source mobile operating system, the Android. HP also recently announced its plans on releasing WebOS as an open source platform. But with it’s completely web based platform for mobile, Mozilla is planning to do something bigger than what it did to computer with its Firefox.

Ruby on Rails 3.2: Easy Web App Development

The world of web-application development framework has a new arrival: Ruby on Rails 3.2, which is said to be quicker and more convenient for web-application developers.

The first version of the Rails framework was released in 2004 as an open-source framework that would help in the quick assembly of web pages, based on the Ruby programming language, and the framework last saw a major release in August, with the 3.1 version.

The latest version of the Rails framework has a number of improvements on the previous version the most important of which is a faster development mode as it only re-loads altered classes instead of the whole library of classes used, making a larger applications a lot faster to load.  It also has a ‘tagged logger’ feature which makes it convenient for a multi-user environment—developers can now filter the log of applications based on who run them. Database queries are tagged and explained, making debugging an activity that can be performed with ease. The new routing engine implemented by the framework, called “Journey”, moreover is a breeze to use especially since it makes linking much faster and noticeable which would be of great help especially in cases that involve numbers like a hundred different links on each page.

While JavaScript has been used by a number of websites as a result of its HTML-5 compatibility, around 226,000 websites use Ruby on Rails. Aaron Batalion, chief technology officer and cofounder of LivingSocial, which uses the framework ardently, said “We wanted to focus on the actual products we were building and less on the engineering”. “Ruby on Rails is interesting because it gets out of your way”.

Now websites can track your IP address

A new online tracking system will allow websites to pinpoint your location to within a few hundred meters, without your permission.

Internet sites will be able to work out where users are within an average of 690 meters, using information about their internet connection.

At the moment they can only track users’ locations to within a radius of about 200 km, but the new technique will narrow this down to as little as 100 meters, the Daily Mail reports.

The development comes as privacy concerns were also raised about iPhone users having their locations and movements secretly tracked and stored.

Researchers discovered that the Apple devices save the user’s latitude and longitude along with a time and date stamp that can be easily accessed.

The tracking method will allow online advertisers to target web browsers with tailored messages, but it has raised concerns about privacy.

Similar techniques of mapping the internet protocol (IP) address that every computer has are already in use, but are far less accurate.

The new system, which has been designed by American and Chinese researchers, compares the time it takes to send data to computers to the time it takes to send to computers it knows the location of using Google Maps.

Using a rough estimation of how far away the computer connection is, the system locates nearby landmarks, such as universities and schools, and compares their location to narrow down the computer’s whereabouts.

On an average, the method gets to within 690 metres of the target, but it can be as close as 100 metres, good enough to identify the location of the computer to within a few streets.

To locate computers to this accuracy has previously required people to agree to share location, but the new system does not need any particular software on the computer to work or even the user’s permission.

Yong Wang, one of the researchers who designed the method, said: “This is a client-independent method. The client does not need to approve anything.”

The tracking system will be particularly valuable to advertisers who will be able to target browsers with advertisements for shops and service just down the street.

HTML5 and Examples

What’s HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”.

Current layout with  HTML:

Layout with HTML 5:

There are a few other interesting additions too. For example, the dialog element will allow better representation of conversations in HTML. For example, a WP Twitter plugin could output code like this:

<dialog id="Twittering">
<dt> <time>14:22</time> richardbaxter
<dd> Has anyone seen the latest Battlestar?
<dt> <time>14:23</time> ZakaZaka
<dd> @richardbaxter Get on with your job!
</dialog>

Why HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”. In plain English, this means a few things:

• HTML5 will allow for better cross browser compatibility between mobile, desktop, netbook, pda, Ereader and whatever else can display a web page
• HTML5 gives web developers new functionality to make for a more dynamic, improved user experience
• The language should allow for some performance improvements in page load as the need for additional code in web pages is thinned down a little

All in all, HTML5 sounds like a good thing and there has been much more mainstream coverage of the language’s development of late. Wondering what’s under the bonnet of a HTML5 page? I found some live HTML5 examples for you to take a look at:

“Embedded” Video

HTML5 allows for embedded video content inside the <video> tag. Interestingly there’s some debate as to which codec should be used as standard, read more on that here. In the meantime, here’s an example of a HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image:

Note the <article> and <footer> elements in the source – we’ll get back to those later.

Youtube have built a HTML5 demo version of their site and use much the same markup to embed a video file in MP4:

Another awesome example of HTML5 video players is the new Sublime HTML5 video player which, I believe is still in beta but demos nicely in Google Chrome: http://jilion.com/sublime/video

Document structure

HTML5 gives us a more disciplined framework to define basic web page layout. We mentioned the <article> and <footer> elements earlier. Here’s how the specification intends a HTML5 page to be structured:

To show you just what a HTML5 web page looks like, what better example could we choose than a HTML5 WordPress theme?

In this screenshot, we see the <header> element opened and closed, rather than something like my site, which would uses <div id="header"> to do the same thing:

You can see the <article> element begins slightly below the <nav> element, all new elements introduced by HTML5. It’s worth noting at this point that a large scale implementation of these HTML5 elements would greatly reduce the typical inconsistency between different front end web developments, allowing for (potentially) better block analysis by the search engines, a different approach to on-page SEO and easier HTML / web page scraping with XPath.

Here’s a <footer> element out in the wild which, again is new to HTML5. You’ll also notice the rel=”tag” attribute:

Rel=”tag” is a Microformat that you could read more about on Microformatique, John Allsop’s blog. John is author of Microformats: Empowering Your Markup for Web 2.0 – worthwhile reading if you’re looking to max out your Microformats knowledge!

Editable content

Enjoy playing with this example of HTML5 driven editable content. On a HTML5 editable page,  the content contributor can add and edit text on the web page, without having to use an editor. Typically, a Wiki or Web page editing tool today would force the user to a new “edit” page, while often demanding basic knowledge of WikiMarkup or basic HTML. In this example, a visitor is able to edit text live on the page. This could have some impressive implications for public, collaborative web page editing:

RGraph / HTML5 Canvas Graphs

Using a combination of the HTML5 CANVAS tag and some clever JavaScript, RGraph allows the web developer to construct graphs on the fly inside the browser. Typically, this would have been carried out by the web server or an image would have to be embedded in the document. As RGraph constructs its graph in the browser, page load time is significantly improved and the charts can be interactive!

From the RGraph website:

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

Here’s an example, but I recommend you check out their site to examine the interactivity of the charts:

Browser GEO Location

HTML5 makes use of the Geo Location API allowing “scripted access to geographical location information associated with the hosting device”. Here’s a live example of just that:

Try visiting FindMebyIp.com’s “IP Address” details page with your Firefox 3.5 browser. You’ll see the page grab your IP address, GEOLocation and Map location thanks to Browser GEO location.

If you’re interested in more HTML5 examples, I recommend you take a look at these sites – have fun!

5 Clever uses of the CANVAS tag – CSS Ninja

HTML5 Canvas Examples – PHPguru

HTML5 Boilerplates – HTML5 Doctor

Coding A HTML 5 Layout From Scratch – Smashingmagazine.com

HTML5 and the Future of the Web – Smashingmagazine.com

How HTML5 Will Change the Way You Use the Web – Lifehacker

Source : SEO Gadget