web前端之html5开发中经常使用的开发工具

正所谓“工欲善其事，必先利其器”，对Web开发人员来讲，好工具的使用总会给人带来事半功倍的效果。正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋，都有必要了解下，HTML5都有哪些开发工具，哪款开发工具更适合我?下面就一一盘点下：

　　1、HTML5全栈开发工具之Adobe Dreamweaver

　　首先是大名鼎鼎的Adobe Dreamweaver，Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站。因为同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成，您能以可视方式或直接在代码中进行设计，使用内容管理系统开发页面并实现精确的浏览器兼容性测试。

　　Adobe Dreamweaver CS5版本经过Adobe HTML5 Pack这一扩展，用户能够更轻松地建立和优化其做品。 Adobe HTML5开发工具Pack包括标识HTML5 和 CSS3 功能的新代码，从而使Dreamweaver 用户可以方便地使用HTML5标记。HTML5开发工具扩展包还更新和改进了WebKit引擎以支持Dreamweaver CS5 实时视图中的视频和音频。用户利用CSS3新功能可以更方便地设计多屏网页，而且能够预览在多种浏览器和设备之间进行渲染的过程。

　　而最新版本的Adobe Dreamweaver CS5.5的突出新特色就是直接提供了对HTML5的支持：

　　经过 CSS 面板设置样式，该面板通过更新可支持新的 CSS3 规则。设计视图如今支持媒体查询，在您调整屏幕尺寸的同时可应用不一样的样式。使用 HTML5 进行前瞻性的编码，同时提供代码提示和设计视图渲染支持。

　　2、HTML5全栈开发开发工具之Adobe Edge Preview

　　Adobe公司考虑到，当HTML5成为标准网页的时候，开发者们仍然将会在Adobe的软件上进行开发。因此推出一种新型的网页开发工具Edge，以帮助开发者在HTML5网页上创造更复杂的动画和互动效果。

　　Adobe网络专家组产品经理德汶·费南德(Devin Fernandez)称，随着HTML应用与开发愈来愈丰富，曾经经过Flash才能实现的工做，如今可经过Adobe Edge轻松完成。Edge支持事件连发操做，支持和元素，支持svg/png/gif/jpg图片，支持圆角矩形以及更多形状，支持元素与2D图形界面，支持SVG动画。

　　目前来看，Edge彷佛和Flash运行在一个类似的界面上。Edge的时间轴和其余工具都位于和目前版本Flash的相同位置。可是界面背后，Edge是很是不一样的。它是代替Adobe动做脚本形式的，动画效果创造基于JSON编码，因此代替动做脚本，动画效果是编码在html和javascript上，并运行在全部现代桌面浏览器和全部移动设备浏览器上，好比Safari浏览器。

　　3、MUGEDA-HTML5下的云动画平台

　　MUGEDA是一个基于HTML5技术的云动画平台，不用任何下载安装，打开支持HTML5的浏览器就能够建立动画，有各类造型工具，有图层、逐帧/补间动画、镜头切换、蒙版、路径编辑等丰富的动画功能，生成的动画能够插入网页，也可导出成各类格式，MUGEDA解决了目前HTML5缺少动画工具的现状，可普遍应用于网页开发、游戏、电子出版等领域。体验MUGEDA很简单，登陆http://www.mugeda.com，注册一个免费帐号，就能够开始生成HTML5动画。

　　在线使用地址：http://www.mugeda.com

　　4、HTML5全栈开发工具:Make Games with Construct 2

　　最简单、最容易的基本游戏开发工具，它有一个可视化编辑器，让你不写一行代码建立HTML5游戏，这要归功于它的事件编辑器，并且对于初学者和高级用户都很是容易。该工具最近添加了WebGL加速。

　　100个事件如下的版本是免费的，其中包括拖放物理引擎。

　　下载地址：http://www.scirra.com/construct2/releases/r74

　　5、HTML5游戏开发工具：GameMaker 8.X

　　最老牌、最强大的一款工具。最近添加了对HTML5的支持(GameMaker:HTML5)。借助此工具的可视化开发界面，开发者无需写代码便可建立简单的游戏。

　　对于复杂游戏，GameMaker能够根据用户建立的界面生成游戏脚本代码，代码基于GameMaker语言(GameMaker Language，简称GML，这是GameMaker的最大优点)，你能够手动编辑它们。

　　该工具的精简版(lite)是免费的。

　　工具下载地址：http://www.yoyogames.com/make

　　6、HTML5全栈开发编辑器：JavaScript IDE WebStorm

　　webStorm 是一款商业的 JavaScript 开发工具，虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document)，可是作为 IntelliJ IDEA 的js缩水版，其它功能也是比较期待的。

　　具体的有：

　　1. 文件不用保存，敲完直接看演示(ff也有相似的一款插件，罗浮宫abcd曾推荐过)。

　　2. 自带有svn，若是不用服务器版的svn的话，本地自身带一个版本管理的。很是方便。

　　3. 编辑右侧有各浏览器浏览快捷方式，更是快中快。

　　官方下载地址：http://www.jetbrains.com/webstorm/download/