Try the HTML5 playground

One of the best ways to learn a new programming language or technique is to study working program code created by others, especially those that are leading in a particular technology. If you’re just starting to get your feet wet in HTML5, the HTML5 Playground Beta from Intel can help you to get to grips with the basics quickly.

It’s an experimental environment that runs in your browser, and which enables you to create HTML5 code in one window, and see it in action in another window. As you edit the code, the live view of it is refreshed automatically, so you can see the effect your changes are having.

The HTML5 Playground includes a library of code snippets you can explore to see HTML5 in action. They include some basic getting-started examples, such as the use of the HTML5 Doctype and the audio tag (which nevertheless is a good demo of the playback features in a compatible browser). There’s an interactive form, including HTML5 elements such as range and date inputs and automated validation for email addresses and websites.

One of the aspects of HTML5 that has attracted most attention, certainly among games developers, is the canvas tag that enables you to use text commands to draw lines and shapes in the web page. The HTML5 Playground has a simple demonstration of a drawing using the canvas, but also some sophisticated demonstrations of how you can use Javascript and the canvas together to create game-like effects. There is a physics demonstration which simulates gravity and buoyancy, with an object dropping from the sky into the sea, and then bobbing back up again. You can control the object with the keys, so you can see how smoothly it appears to interact with the environment.

There is also a demonstration that shows a vector-like drawing on the canvas rotating as it tumbles down the screen, and a more sophisticated demonstration that enhances this with a mouse-click based firing control.

To get acquainted with the animations, transformations and formatting options in CSS3, there are three demonstrations you can tinker with. The CSS3 animations in particular can be good for enhancing the visual feedback that you give to people as they interact with your app.

When you’ve created something you like, or if you want to export the demonstrations to use in your preferred developer environment, you can click the button to download the code. There are also social features built-in, so you can share anything you create on your social networks using a permalink within the HTML5 Playground.

The HTML5 Playground is still in beta, and the team plans to add more snippets and better navigation for them, better social integration, support for mobile devices and better offline application support.

What happens next with your application is up to you. If you’re publishing your application online, compatibility will depend on the browsers that users have, and you’ll need to have a HTML5-compatible browser to use the HTML5 Playground in the first place. While you could mandate that users have a particular browser, it’s best to only do this where it’s strictly essential to the purpose of your app. Otherwise, you can use HTML5 features to offer progressive enhancement, which makes the experience richer for those with HTML5-compatible browsers, but still delivers the basic functionality to everyone. The appeal of web apps is that they circumvent app stores and enable you to have a direct relationship with customers.

There is still a place for app stores, though, which remain the best way to distribute and promote most new apps. Writing your base code in HTML5 makes it easy to port your app across different devices, platforms and app stores.

However you plan to use HTML5, the HTML5 Playground provides you with a tool and snippets to get you started, and helps you to explore some of the wonderful things HTML5 has to offer.

• This blog post is written by Softtalkblog, and is sponsored by the Intel Developer Zone, which helps you to develop, market and sell software and apps for prominent platforms and emerging technologies powered by Intel Architecture