Development tools commonly used in HTML5 development of Web front end

The so-called "工欲善其事, its prerequisite", for Web developers, the use of good tools will always bring a multiplier effect. is preparing to learn HTML5 or has been carried out for a period of time HTML5 development of children's shoes, it is necessary to understand the HTML5 have what development tools, which development tools more suitable for me? Under one by one inventory:

First, HTML5 full stack development tools Adobe Dreamweaver

The first is the famous Adobe dreamweaver,adobe Dreamweaver software that enables designers and developers to confidently build standards-based Web sites. Thanks to the integration with the new Adobe CS live online service adobe Browserlab, you can design visually or directly in your code, use a content management system to develop pages, and achieve accurate browser compatibility testing.

Adobe Dreamweaver CS5 Edition is an extension of Adobe HTML5 pack that makes it easier for users to create and optimize their work. The Adobe HTML5 Development Kit Pack includes new code that identifies HTML5 and CSS3 features, making it easy for Dreamweaver users to use HTML5 tags. The HTML5 Development Tools extension pack also updates and improves the WebKit engine to support video and audio in Dreamweaver CS5 live view. Users can more easily design multi-screen web pages with CSS3 new features, and preview the process of rendering across multiple browsers and devices.

The new feature of the latest version of Adobe Dreamweaver CS5.5 is that it provides direct support for HTML5:

Style is set through the CSS panel, which is updated to support the new CSS3 rule. Design view now supports media queries, and you can apply different styles while you resize the screen. Use HTML5 for forward-looking coding, while providing code hinting and Design view rendering support.

Second, HTML5 full stack development and development tools of Adobe Edge Preview

Adobe considers that when HTML5 becomes a standard Web page, developers will still be developing on Adobe's software. So a new web development tool edge is introduced to help developers create more complex animations and interactive effects on HTML5 Web pages.

Devin Fernandez, a product manager at Adobe Network Expert Group, says that with the growing richness of HTML applications and development, the work that has been done through Flash is now easy to Fernand with Adobe Edge. Edge supports event bursts operations, support and elements, supports svg/png/gif/jpg images, supports rounded rectangles and more shapes, supports elements with 2D graphical interfaces, supports SVG animations.

For now, the edge seems to be running on a similar interface with Flash. The Edge's timeline and other tools are located in the same location as the current version of Flash. But the edge is very different behind the interface. It is a substitute for Adobe Action script, and animation effects are created based on JSON encoding, so instead of action scripts, animated effects are encoded on HTML and JavaScript, and run on all modern desktop browsers and all mobile device browsers, such as the Safari browser.

Third, the Cloud animation platform under the MUGEDA-HTML5

Mugeda is a cloud animation platform based on HTML5 technology, without any download installation, open support HTML5 browser can create animation, there are various styling tools, there are layers, frame-by-page animation, lens switching, masks, path editing and other rich animation features, generated animation can be inserted into the Web page, can also be exported into various formats, Mugeda solves the current situation of HTML5 lack of animation tools, can be widely used in web development, games, electronic publishing and other fields. Experience Mugeda is simple, login http://www.mugeda.com, register a free account, you can start to generate HTML5 animation.

Online Use Address: http://www.mugeda.com

Iv. HTML5 Full Stack development tool: Make games with Construct 2

The simplest and easiest basic game development tool, which has a visual editor that lets you create HTML5 games without writing a single line of code, thanks to its event editor, and is easy for beginners and advanced users. The tool has recently added WebGL acceleration.

The following versions of 100 events are free, including drag-and-drop physics engines.

: http://www.scirra.com/construct2/releases/r74

Five, HTML5 Game development tool: Gamemaker 8.X

The most established and powerful tool. Support for HTML5 has recently been added (GAMEMAKER:HTML5). With this tool's visual development interface, developers can create simple games without writing code.

For complex games, Gamemaker can generate game scripting code based on the user-created interface, which is the Gamemaker language (Gamemaker Language, or GML, which is the biggest advantage of Gamemaker), and you can edit them manually.

The Lite version of the tool (Lite) is free.

Tool: Http://www.yoyogames.com/make

Vi. HTML5 Full Stack Development editor: JavaScript IDE webstorm

Webstorm is a commercial JavaScript development tool, although Webstorm JS hint is far less powerful than Aptana (input letter D does not prompt document), but as the IntelliJ idea of JS shrinking version, Other features are also more anticipated.

Specifically, the following are:

1. The file does not have to be saved, after knocking directly to see the demo (FF also has a similar plug-in, the Louvre ABCD has recommended).

2. With SVN, if not the server version of SVN, the local itself with a version of the management. Very convenient.

3. The editor on the right side of the browser to browse shortcuts, it is faster and faster.

Official: http://www.jetbrains.com/webstorm/download/

Development tools commonly used in HTML5 development of Web front end