Support and Web Trends - a focus on technology and design, plus our support portal
Embracing HTML5 By David Dutt
 

Nov 7, 2011 - Is HTML5 better than Adobe Flash or Microsoft Silverlight? Not necessarily, but the latest trend in computing has created a change in a marketplace once dominated by Adobe Flash.

Whether you love Flash and its consistency in the web environment or you are a corporate Microsoft powerhouse taking the ironclad Silverlight path, you cannot ignore HTML5.

 

An Open Source Life

We love open-source. It is the heart of the Internet, where freedoms still ride wild and collaboration is open. But to enter the mainstream, someone must adopt it and implement it into a technology that becomes desirable. In 2004, members of Apple Computer, Mozilla Foundation and Opera Software founded an organization called WHATWG (Web Hypertext Application Technology Working Group) to address some limitations in HTML/XML technologies.

In 2007, the WHATWG delivered a proposal for HTML5 to the World Wide Web Consortium. It has been under development and review, ever since. Apple has since implemented the specification into their Safari browser and Google with their Android Browser app, both available on mobile devices that do not support Adobe Flash or Microsoft Silverlight.

HTML5 Features

HTML5 adds a wealth of features that were often provided as add-ons or plug-ins with HTML 4. Now, these capabilities can come from the web server, which simplifies the use of browsers especially in mobile environments.

Key Features in HTML5
2D/3D Graphics Language & API
 
Object Movement/Drag & Drop
 
New Fonts and Effects
 
Beyond Cookies, Offline Storage
 
Audio/Video Without Plugins
 

Why Pick HTML5 for Your Web Site?

There is no easy answer. Silverlight and Flash are very powerful. Flash is compatible with most installed browsers in the world and the consistency across computer platforms does not compare to its competitors. Silverlight is making inroads within the corporate world and is arguably one of the easiest set of development tools. However, this decision often comes down one thing – the customer and their needs.

Mobile devices are the fastest growing computer category and they are seeing the one of the greatest rate of progression of technology at the moment. Gartner predicts that Smartphones will outsell personal computers with a 3 to 1 margin by 2015. The surge is so powerful and so ubiquitous, that it drums up memories of 1995 when browser technology was also developing at a fast rate. And many years later, it would be hard to imagine life without an Internet browser nearby.

If you want multimedia features on your web sites and you need to be compatible with Mobile browsers, there is only one choice – HTML5.

Why Pick HTML5 for Your Web Site?

The greatest challenge for HTML5 is the acceptance of features that are not fully approved in the standard. If you review the W3C “Working Draft”, there are various issues and improvements being discussed. Not all browsers have implemented all features and browser developers may make skillful decisions on features that could change later. The W3C, however, does provide HTML5 validaters to assist with the process.

Many developers will forego these potential compatibility issues to cash in on the mobile revolution. Mobile technologies are riding a big, long wave, which means their technologies will progress as long as the wave goes. Even corporations are beginning to embrace mobile technologies internally. Pressure to approve the standard will help to accelerate the process.

 

Checking for HTML5

How do you check for HTML5? You can test features on an HTML5 browser like Chrome or Safari, but how would you know if you are using HTML 4 or HTML5 code. I will save “why would you care” for another article.

This is not easy for the uninitiated. HTML 4 and HTML5 code may be embedded into the same HTML document to allow support for different browsers and environments. HTML 4 browsers will ignore the unknown elements from HTML5 and HTML5 code offers a high level of compatibility with HTML 4. Also, there are many different features to convert and some developers may be selective in the features written using HTML 4 vs HTML5 within the same document for browser compatibility.

While it is best to check with a professional programmer, you can look for some basic things in the source code. From any browser, go to the web page. Select the option to view source and look for the following:

1. <!DOCTYPE html> - HTML5 has shortened this tag within HTML documents. This enables a very basic level of HTML5 function. HTML 4 documents may have a long string similar to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

2. New HTML5 Elements – The W3C has a document called “HTML5 differences from HTML4”, which provides a complete list.  Here are some new elements or tags:

Structural Elements - <section>, <header>, <footer>
Multimedia Elements - <audio>, <video>

3. Attributes Changes on Elements. As an example, the Meta Element attribute for charset can be reduced in size:

HTML4 Version - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5 Version - <meta charset="UTF-8">

4. Flash – A developer may wish to keep Flash for non-mobile devices and just use HTML5 for mobile. However, if you expected a full Flash conversion, you can check for some of the methods for incorporating Flash into a web page:

HTML Object/Embed Method - <object>  - used by Internet explorer.  <embed> - used by Mozilla.  Example:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,29,0″ width=”700″
height=”322″>
<param name=”movie” value=”intro.htm”>
<param name=”quality” value=”high”>
<embed src=”intro.htm” quality=”high”
pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”700″
height=”322″></embed>
</object>


JavaScript Method – look for a file name ending in .swf

<script type="text/javascript">
var params = { wmode:'window', allowscriptaccess:'always', swLiveConnect:'true' };

swfobject.embedSWF('Test.swf', 'fullPage', '100%', '100%', '8.0.0', false, {}, params, {});
</script>

 

The Future for Adobe Flash and Microsoft Silverlight

Since many technologies are switching from client (browser) to web server, who could best provide a server equivalent of Flash and Silverlight and also have the resources to bring about new standards? …Adobe and Microsoft. They already provide some HTML5 tools, but expect much more including non plug-in media players. Google, Apple and many others have development tools available as well, but watch out for the next start-up with a fresh new approach.

Comments (0)
No Comments! Add your Comment
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>