9 Programming Tools for Maximizing HTML5

HTML5 is gaining steam. Here are nine development tools for tapping into the best the standard has to offer.

HTML5 development tools on the rise

HTML5 development tools on the rise

HTML5 has been billed as a means for developers to create modern Web applications, complete with support for multimedia functionality like video and Canvas 2D. Its emergence has led to questions about the future of proprietary multimedia plug-ins for browsers, such as Adobe Flash and Microsoft's Silverlight, as HTML5 aims to provide a standards-based way of performing the same functions.

Given developers' increasing interest in HTML5, it's no surprise that tool builders have begun to accommodate it, though HTML5 is still in development. Following is a slate of tools for application developers to incorporate HTML5 into their programs.

Adobe Edge

Adobe Edge

Currently in preview, Adobe Edge is a design tool for building animated, interactive content using HTML5, CSS, and JavaScript. Content can run on mobile devices and desktops. The product features a WebKit-based stage, intended to give compositions fidelity across modern browsers. It will integrate with font services like TypeKit.

Motion and graphics can be added to HTML elements, and applications can be extended via Edge's own code snippet library or via JavaScript code. Nested animations with independent timelines and interactive capabilities can be built. Symbols are reusable and can be controlled via APIs and code snippets. Content is designed to work on iOS and Android devices and on such browsers as Firefox, Chrome, Safari, and Internet Explorer 9.

Adobe Dreamweaver CS6

Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 serves as Web design software, providing a visual interface for editing HTML websites and mobile applications. A Fluid Grid Layout system, leveraging CSS, offers cross-platform compatibility to build adaptive layouts. Developers, Adobe says, can visually construct complex Web designs and page layouts without getting buried in code.

Also, users can review designs via Live View and Multiscreen Preview capabilities. The MultiScreen Preview panel enables developers to check rendering of HTML5 content. Live View uses the WebKit rendering engine to support HTML5. Mobile applications can be built via support for the jQuery Mobile and PhoneGap frameworks.

Adobe ColdFusion 10

Adobe ColdFusion 10

This server-side technology for building enterprise Web applications leverages HTML5 integration to build rich user experiences using WebSockets, interactive charting, video, and geo-tagging. Developers using Adobe ColdFusion 10 can access a repository of interactive client-side HTML5 charts. They can publish data to multiple clients or execute a point-to-point data push with a real-time server response, according to Adobe.

ColdFusion uses Java EE (Enterprise Edition) and integrates with the Apache Tomcat servlet container.

Sencha Architect 2

Sencha Architect 2

Aimed at building mobile and desktop applications, Sencha Architect 2 has been billed as an HTML5 visual app builder. Teams can design, develop, and deploy apps from a single, integrated environment. Developers can build Sencha Touch 2 and Ext JS 4 JavaScript apps and preview them live.

Mobile support enables native packaging for deployment on iOS or Android devices, and designers can visually build an app from lists, buttons, forms, grids, and controls, and hand the resulting build off to a developer. Designers also can prototype interactions and app configuration, while developers can use visual tools and prebuilt UI controls to build app concepts, then use a built-in code editor to build out the app using Model View Controller.

Sencha Touch 2

Sencha Touch 2

Sencha Touch 2 is a mobile application framework that's been billed as the cornerstone of Sencha's HTML5 platform. Developers can build applications to work on iOS, Android, BlackBerry, Kindle Fire, and other devices. The product expands access to native device APIs, allowing HTML5 developers to leverage hardware features.

A native packager is included for application distribution to the Apple App Store and Google Play application stores. Version 2 offers an easier-to-use API, enhanced Model View Controller capabilities, and richer documentation, according to Sencha. Sencha has also added fluid animations and smooth scrolling to Version 2, as well as a layout engine that leverages HTML5 to build complex applications.

Dojo Foundation Maqetta

Dojo Foundation Maqetta

Derived from an IBM initiative, Dojo Foundation's Maqetta is an open source tool for building HTML5 applications on desktop and mobile platforms. Visual authoring of HTML5 interfaces is enabled in a browser. User experience designers can assemble live UI mockups via drag-and-drop. UIs built by Maqetta are Web apps that can be handed off from designers to developers.

Maqetta is designed to preserve visual assets across the development lifecycle, and users can plug in arbitrary widget libraries and CSS themes. Maqetta source code can be downloaded and installed on a user's own server. Code can be customized, and contributions to the project itself can be submitted. Maqetta is currently in a preview phase, with a 1.0 release eyed for the coming months.

Microsoft Visual Studio 2010 Service Pack 1

Microsoft Visual Studio 2010 Service Pack 1

Although initially released without HTML5 support, Microsoft Visual Studio 2010 added some capabilities with SP1, released in March 2011 and updated three months later. With IntelliSense, elements specific to HTML5 have been added; IntelliSense is intended to make language references easily accessible by recognizing commands. HTML5 validation is supported as well, to make sure code works and conforms to standards.

After installing the service pack, developers must tell Visual Studio to start using the HTML5 schema. SP1 makes it easier to build HTML5 and CSS3 Web applications on top of ASP.Net, according to Microsoft.

JetBrains WebStorm 4.0

JetBrains WebStorm 4.0

Billed as a JavaScript IDE with an HTML editor, WebStorm 4.0 features an HTML5 boilerplate template for building Web applications. Developers can create an HTML document to enable HTML5 support for a file. If developers, for example, want to use a canvas element, the IDE will recognize the developers' intention while typing <ca and suggest adding <canvas>. Should a developer press the space bar, the IDE will suggest attributes supported by this HTML5 element.

Developers can get a live preview of HTML in the Chrome browser. The WebGL shader language is supported by the IDE, as are NodeJS code editing and JavaScript debugging.

Google Web Toolkit

Google Web Toolkit

This development toolkit for building browser applications features a number of HTML5 capabilities in the Google Web Toolkit library. Included is backing for client-side storage or Web storage. The HTML5 (Web) storage specification offers a standardized way of providing larger amounts of client-side storage and partitioning of session storage and locally persistent storage, according to Google.

Other HTML5 capabilities supported include Canvas visualizations and audio and video widgets.