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/