"HTML5 is not a technical achievement, its a social movement"
Doug Schepers
What is the significance of this article about HTML5 in eclipse community? Because... Web is getting 'richer' clients. HTML5 provides all of the rich client powers to a browser. HTML5 is not just another markup language, its an open 'platform' for building rich web applications.
Are you a fan of the first person shooter game 'Doom' of 1990s? Then check the game 'Gifter' in your favourite browser (oops, not IE). Its not coded using C or developed using a gaming engine. Its completely written in HTML 5.
HTML 5 will stretch the browsers to its limits. To be precise, the war will not be between just browsers, but between the engines that power the rendering of the browers. A rendering engine is a hidden piece of software that takes marked up content (eg. HTML) and formatting information (eg. CSS) and displays the formatted content on the screen. Believe it or not, today I opened an HTML5 powered site in my IE8, and guess what happened. The site killed my internet explorer.
Some of the popular rendering engines are,
- Gecko - Used in Mozilla Firefox
- Webkit - Used in Chrome & Safari
- KHTML - Used in Konquerer
- Trident - Used in Internet Explorer
- Presto - Used in Opera
HTML 4.01 was around for a decade. The new HTML 5 working draft was released at the start of 2009.
Even though HTML5 gives you a lot of features, I will be discussing only those features the rich client developers are interested in.
Some of those exciting features are,
- Canvas element
- Drag and Drop support
- Interactive Elements
- Offline Web Applications
- Web Database Storage
- Video element
- Audio element
But don't limit your knowledge. You can find the rest of the features at HTML 5 Draft. Lets find out more information about each of the above features.
Canvas Element
HTML 5 gives you a canvas element for drawing purpose. Most of the major browsers like Firefox, Safari, Opera, Chrome etc support the 2D canvas context.
What about 3D? An experimental build of Opera supports 3D canvas.
Can SWT be extended to support browser widgets? We have RAP!!! GWT is out there within a hands reach.
You want to try out a sample code? Copy the below code and save it to a file 'canvas.htm' and open it in canvas tag supported browser (eg: chorme, firefox, ...).
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">I do not support canvas tag</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00AA00';
ctx.fillRect(0,0,100,100);
</script>
</body>
</html>
Drag and Drop
Check the drag and drop demo application.
HTML5 provides an event based drag and drop support. You have events like 'dragstart', 'drag', 'dragenter', 'drop', 'dragend' etc. There is a good tutorial which explains more about drag and drop.
Interactive Elements
Whats the limit of interactivity on a browser? The answer is that its 'limitless'. HTML5 provides the following interactivity elements.
- datagrid - For grid control. This is similar to the 'grid layout' in swt.
- menu - You can create menus.
- command - This is a command the user can invoke. Similar to the 'commands' in eclipse.
- details - This is an additional information the user can obtain on demand.
There is an interesting article on ibm developerworks which explains more about the interactive components of html5.
Offline Web Applications
Gmail users might have noticed by now that you can use the inbox even if you are not connected to net. See the offline web demo app at html5demos.
This is achieved by using a caching mechanism. Using a manifest file, you convey to the browser to cache the required files. The browser will download the files at the client side. A simple, but powerful mechanism, which will change the way web apps are used.
Web Database Storage
This allows you to embed an sql based database in your web app. You can find a demo of web database here.
Who will gain from the offline apps and web db storage? This will definitely be a boon for the web operating systems. How about rich client apps? What if you need to run rich client features in your browser? Definitely, you need to download all those rich UI code to the client's machine and web db storage comes handy.
Video and Audio
Like the <image> tag, now you can embed videos with the <video> tag and audio with <audio> tag.
A few interesting apps based on HTML 5 from Mozilla Labs and Google Labs are listed below.
- Mozilla Bespin is an extensible web code editor based on HTML 5.
- Mozilla Prism lets users split web applications out of their browser and run them directly on their desktop.
- Google Wave is an online tool for real time communication and collaboration.
- Google Gears is a plug-in that extends your browser to create a richer platform for web applications. Webmasters can use Gears on their websites to let users access information offline or provide you with content based on your geographical location.
- Google Docs is a free, Web-based word processor, spreadsheet, presentation, and form application offered by Google.
The way we interface the world is about to change. Its happening around us. This is the best time to create the next killer app based on new web standards.
What is the strategy at Eclipse to compete against the web technologies? We do not compete, we synergize with the web technologies to give the best value to the end user. e4 is the outcome. e4 is still under development. You can customize the look and feel of an e4 based app using css. You can modify the user interface using xml. Eclipse is adapting the open standards to create tomorrow's technologies and next generation rapid application development tools.
madhu
