web前端之html5開發中常用的開發工具

正所謂“工欲善其事，必先利其器”，對Web開發人員來說，好工具的使用總會給人帶來事半功倍的效果。正准備學習HTML5或者已經進行了一段時間的HTML5開發的童鞋，都有必要了解下，HTML5都有哪些開發工具，哪款開發工具更適合我?下面就一一盤點下：

　　一、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 進行前瞻性的編碼，同時提供代碼提示和設計視圖渲染支持。

　　二、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瀏覽器。

　　三、MUGEDA-HTML5下的雲動畫平台

　　MUGEDA是一個基於HTML5技術的雲動畫平台，不用任何下載安裝，打開支持HTML5的瀏覽器就可以創建動畫，有各種造型工具，有圖層、逐幀/補間動畫、鏡頭切換、蒙版、路徑編輯等豐富的動畫功能，生成的動畫可以插入網頁，也可導出成各種格式，MUGEDA解決了目前HTML5缺乏動畫工具的現狀，可廣泛應用於網頁開發、游戲、電子出版等領域。體驗MUGEDA很簡單，登錄http://www.mugeda.com，注冊一個免費賬號，就可以開始生成HTML5動畫。

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

　　四、HTML5全棧開發工具:Make Games with Construct 2

　　最簡單、最容易的基本游戲開發工具，它有一個可視化編輯器，讓你不寫一行代碼創建HTML5游戲，這要歸功於它的事件編輯器，而且對於初學者和高級用戶都非常容易。該工具最近添加了WebGL加速。

　　100個事件以下的版本是免費的，其中包括拖放物理引擎。

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

　　五、HTML5游戲開發工具：GameMaker 8.X

　　最老牌、最強大的一款工具。最近添加了對HTML5的支持(GameMaker:HTML5)。借助此工具的可視化開發界面，開發者無需寫代碼即可創建簡單的游戲。

　　對於復雜游戲，GameMaker可以根據用戶創建的界面生成游戲腳本代碼，代碼基於GameMaker語言(GameMaker Language，簡稱GML，這是GameMaker的最大優勢)，你可以手動編輯它們。

　　該工具的精簡版(lite)是免費的。

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

　　六、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/