6 HTML5 authoring tools

As HTML5 get drafted and modern browsers add support, some authoring tools are already available to make your HTML5/CSS3 web development easy. We find a lot of our users coming here looking for HTML5/CSS3 authoring tools. Today, we list down some of the important ones here for your reference, so that you can start using them right away.

Please note these tools support different features of HTML5/CSS3, so you might need to use them in combination. If you know of some other tools that you use, please let us know in the comments.

1. Google Web Toolkit/Eclipse

Google Web Toolkit Incubator project supports some features of HTML5 through classes likeGWTCanvas. Google provides a GWT plugin for Eclipse making Web application development as simple as creating any desktop application with all debugging facilities available. Development mode plugins are available for Chrome and Firefox to test the applications before compiling the GWT code.

One advantage here is GWTCanvas provides canvas support for HTML5 for Internet Explorer through images. Code developed using GWTCanvas works even on Internet Explorer.

Try out this demo application in different browsers.

2. Adobe Dreamweaver CS5

Adobe has promised best tools for HTML5 authoring, and why shouldn’t they? Dreamweaver CS5 has added support for HTML5 tags and CSS3 authoring. Look at the video below for a demo on CSS3 Media Queries:

Combined with Smart Paste functionality, you could convert an Illustrator drawing into a HTML5 Canvas drawing. See demo below:

Follow the latest developments on adobe blog here.

Update: Adobe just released an HTML5 pack for Dreamweaver CS5.

This extension enhances Dreamweaver CS5 in the following ways:

• Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
• Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
• Updates code hinting for new attributes and values in existing HTML tags.
• Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
• Updates Live View to support <video> and <audio>. (Requires Quicktime installation.)
• Improved rendering for CSS3 in Live View.
• Adds HTML5 starter layouts to the New Document Dialog box.
• Offers better rendering for new tags in Design View.

3. Adobe Flash CS5

Adobe has provided a utility to export Flash movies directly to be rendered on HTML5 canvas. With its “Copy Motion as XML” feature, a motion tween can be converted into XML and in conjunction with Smart Paste function of Dreamweaver (see above) the animation can be rendered as HTML5 canvas. (We have reported this earlier). See the video below at 3:31

4. Netbeans IDE 6.9 beta

The next release of Netbeans IDE shall include support for HTML5 and CSS3. The release is currently available in beta (6.9).

5. CSS3 Generator WebApps

I will list different webapps, which provide CSS3 syntax for various styles:

• CSS3Generator: Supports features like Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline
• CSS3 Gradient Generator: Supports Gradients
• CSS3 Transforms: Supports Transforms

6. Font Dragr

This is an application to test custom fonts. The webapp can be available here.

So get on with HTML5 application development and let us know, we will be happy to report!

Source: http://www.html5trends.com/best-of/6-html5-authoring-tools/