2012年，Web 開發(fā)領(lǐng)域繼續(xù)在快速的發(fā)展，HTML5 仍然在展示其跨平臺(tái)的優(yōu)越性，CSS3 被人們更多的應(yīng)用到實(shí)際項(xiàng)目中，響應(yīng)式設(shè)計(jì)（Responsive Design）技巧也被人越來(lái)越多的人熟知和使用。

這篇文章收集了2012年度新發(fā)布的最具有代表性 Web 前端開發(fā)工具和框架，這是一個(gè)非常值得收藏的工具列表，從功能全面的 IDE 到美觀、充滿異國(guó)情調(diào)的小框架，小工具等等。他們能夠幫助你降低 Web 開發(fā)過程中的復(fù)雜度，節(jié)省時(shí)間和精力。

01.Foundation 3

響應(yīng)式設(shè)計(jì)（Responsive Design）似乎瞬間就發(fā)展起來(lái)了，各個(gè)網(wǎng)頁(yè)設(shè)計(jì)的論壇或者社區(qū)都會(huì)討論這個(gè)話題，大家都想知道如何實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，有什么框架或好的解決方案。

Foundation 3 ，由 ZURB 公司開發(fā)，號(hào)稱世界上最先進(jìn)的響應(yīng)式前端框架。利用靈活的網(wǎng)格系統(tǒng)可以快速設(shè)計(jì)出頁(yè)面布局。更妙的是，網(wǎng)格可以是你所需要的任何尺寸，它很容易適應(yīng)各種尺寸的屏幕。

02.Proto.io

Proto.io 是一個(gè)新的界面原型設(shè)計(jì)工具，專門針對(duì)移動(dòng)應(yīng)用程序。基于 Web 的在線環(huán)境，可以讓你制作流行的 iPhone，iPad，Android 手機(jī)或平板電腦，以及任何帶有屏幕界面的設(shè)備的原型項(xiàng)目。

在設(shè)計(jì)了一些界面后，你通常會(huì)期望能夠把頁(yè)面交互性的鏈接起來(lái)，Proto.io 做到了這一點(diǎn)。它也支持所有你可能想到的觸摸手勢(shì)，以及幻燈片、翻轉(zhuǎn)和淡入淡出動(dòng)畫，使用簡(jiǎn)單，而且可以免費(fèi)使用。

03.Fontello

為什么這么難找到一組涵蓋所有的基礎(chǔ)功能的外觀一致的圖標(biāo)？

不用再困惑了， Fontello 不僅擁有所有你需要的圖標(biāo)，而且你可以挑選并選擇你所需要的字形，并編譯成自己需要的一套。 當(dāng)然，您也可以從 GitHub 下載整個(gè)的圖標(biāo)集。該項(xiàng)目是開源的，糕富帥們捐幾刀吧，不勝感激。

04.Bugherd

與普遍的看法相反，推出一個(gè)新的網(wǎng)站對(duì)于開發(fā)團(tuán)隊(duì)來(lái)說(shuō)工作還遠(yuǎn)遠(yuǎn)沒有結(jié)束。

BugHerd 提供了一個(gè)整潔，組織良好的方式來(lái)處理反饋，Bug 修復(fù)和功能要求。不需要繁雜的電子郵件反饋方式，只需要在網(wǎng)站中包含一個(gè)簡(jiǎn)單的 JavaScript 文件，該網(wǎng)站的訪問者就可以通過反饋按鈕提交意見和建議。BugHerd 提供了一個(gè)友好，直觀的界面來(lái)管理整個(gè)事情。

05.Sencha Touch 2

毫無(wú)疑問，移動(dòng)觸屏設(shè)備的流行給Web開發(fā)帶來(lái)了巨大的影響。

Sencha Touch 是一個(gè)基于 HTML5 的移動(dòng)應(yīng)用開發(fā)框架，致力于吸引HTML5開發(fā)者使用Sencha Touch構(gòu)建在iPhone、Android和BlackBerry等設(shè)備上運(yùn)行的移動(dòng)Web應(yīng)用，這些應(yīng)用效果看起來(lái)如同本地應(yīng)用。改進(jìn)的API，完善的文檔和教程資料以及可靠的本地集成讓 Sencha Touch 2成為強(qiáng)有力的移動(dòng)框架競(jìng)爭(zhēng)者。

06.Dreamweaver CS6

Dreamweaver 是經(jīng)典的網(wǎng)頁(yè)制作軟件，最新發(fā)布的Dreamweaver CS6新增了HTML5和CSS3編碼支持；jQuery移動(dòng)和Adobe PhoneGap框架的擴(kuò)展支持可協(xié)助您為各種屏幕、手機(jī)和平板電腦建立項(xiàng)目；集成了Adobe Business Catalyst、FTPS、FTPeS 支持、Adobe Creative Suite、Adobe BrowserLab等眾多功能。

07. Cloud9 IDE

Cloud 9 是基于NodeJS構(gòu)建的在線集成開發(fā)環(huán)境，語(yǔ)法高亮支持 C#, C++, Python, Perl, Ruby, Scala 等等眾多常用開發(fā)語(yǔ)言。

內(nèi)置的Vim模式非常好用，支持流行的版本控制系統(tǒng)，像Git，Mercurial和SVN，另外它還有非常強(qiáng)大的插件系統(tǒng)，可以拓展其功能，例如借助CSSLint和JSBeautify，Cloud9就可以變成一款非常實(shí)用的代碼美化工具。

08.Adobe Edge Inspect

Edge Inspect 是一款對(duì)移動(dòng)開發(fā)者非常有用的工具，其前身是Adobe Shadow，用于幫助設(shè)計(jì)師和開發(fā)者同時(shí)在多個(gè)移動(dòng)設(shè)備上預(yù)覽應(yīng)用設(shè)計(jì)，發(fā)現(xiàn)和解決跨平臺(tái)問題。

只需要把你的設(shè)備（Android和iOS）和你的電腦連接起來(lái)，這時(shí)候你的網(wǎng)站就會(huì)在各個(gè)設(shè)備上同步顯示，讓檢查和調(diào)試變得更有效，并可以讓設(shè)計(jì)師同時(shí)看到每個(gè)版本在所有目標(biāo)設(shè)備上的顯示情況。

09.Adobe Brackets

你可能會(huì)覺得現(xiàn)在代碼編輯器已經(jīng)是琳瑯滿目了，而且這些編輯器都很相似，沒有什么可創(chuàng)新的了。 Brackets 讓我們知道，其實(shí)在編輯器領(lǐng)域還是有很多功能可以去探索的。Brackets是Adobe的開源HTML、CSS和JavaScript集成開發(fā)環(huán)境。Brackets提供Windows和OS X平臺(tái)支持。

Brackets的核心目標(biāo)是減少在開發(fā)過程中那些效率低下的重復(fù)性工作，例如瀏覽器刷新，修改元素的樣式，搜索功能等等，Brackets值得你試試。

10.Modernizr 2.6

Modernizr 是一個(gè)開源的JavaScript庫(kù)，用于檢測(cè)用戶瀏覽器的HTML5和CSS3特性。它使得那些基于用戶瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單，讓W(xué)eb開發(fā)人員可以在現(xiàn)代瀏覽器中充分利用HTML5和CSS3的那些先進(jìn)的特性進(jìn)行開發(fā)，同時(shí)又不會(huì)犧牲其它不支持這些新技術(shù)的瀏覽器的控制。

11.Sublime Text 2

如果你想體驗(yàn)流暢編寫代碼的快感，趕緊試試Sublime Text 2 吧！

Sublime Text 具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，多重選擇，快捷命令等。還可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。

Sublime Text是一款跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。Sublime Text 2是收費(fèi)軟件，但目前可以無(wú)限期試用。?

12.PhoneGap 2.0

PhoneGap 是一個(gè)免費(fèi)開源的開發(fā)框架，讓W(xué)eb開發(fā)人員能夠使用熟悉的HTML，CSS和JavaScript構(gòu)建跨平臺(tái)的移動(dòng)本地應(yīng)用。

通過PhoneGap框架提供的JavaScript API能夠以非常簡(jiǎn)單的方式調(diào)用移動(dòng)設(shè)備的核心功能，包括地理位置，攝像頭，加速器，通訊錄，多媒體，文件和網(wǎng)絡(luò)等功能。

借助PhoneGap，你完全可以使用熟悉的Web開發(fā)技術(shù)寫出移動(dòng)Native App，并發(fā)布到Apple Store，Google Play等各平臺(tái)應(yīng)用商店中。編寫好的代碼可以上傳到云端服務(wù)器，使用云端編譯功能編譯成各種平臺(tái)下的應(yīng)用，支持iOS，Android，Palm WebOS，Symbian，Blackberry，Windows Phone和Bada七大平臺(tái)。

13.Emmet

Emmet 項(xiàng)目的前身是前端開發(fā)人員熟知的Zen Coding，一種提供快速編寫HTML/CSS代碼的方法。和一般的編輯器中使用的“代碼片段”概念不同，Emmet使用動(dòng)態(tài)的類似CSS表達(dá)式的語(yǔ)法來(lái)生成代碼，這意味著你不需要自己去編輯并創(chuàng)建固定的代碼片段，大大的提高了代碼編寫效率。

Emmet結(jié)合優(yōu)秀的編輯器使用，可以讓你代碼飛起來(lái)！支持的編輯器包括：

• Sublime Text 2
• Eclipse/Aptana
• TextMate 1.x
• Coda 1.6 and 2.x
• Espresso
• Chocolat
• Komodo Edit/IDE
• Notepad++
• PSPad
• <textarea>
• CodeMirror2/3
• Brackets

14.Yeoman

Yeoman 提供了一套強(qiáng)大的工具、庫(kù)和工作流，可以幫助開發(fā)人員快速構(gòu)建出漂亮的、引人注目的Web應(yīng)用。Yeoman的主要特色：

• 閃電般搭建出框架（使用能夠自定義的模板（例如：HTML5 Boilerplate、Twitter Bootstrap 等）、AMD（通過 RequireJS）以及其他工具輕松地創(chuàng)建新項(xiàng)目的框架。）；
• 自動(dòng)編譯 CoffeeScrip & Compass——在代碼改動(dòng)的時(shí)候，Yeoman 的 LiveReload 監(jiān)視進(jìn)程會(huì)自動(dòng)編譯源文件并刷新瀏覽器，而不需要你手動(dòng)執(zhí)行；
• 自動(dòng)校驗(yàn)?zāi)_本——腳本會(huì)自動(dòng)運(yùn)行 jshint 校驗(yàn)，以確保他們遵循語(yǔ)言的最佳實(shí)踐；
• 內(nèi)建預(yù)覽服務(wù)器——不需要啟動(dòng)自己的 HTTP 服務(wù)器，內(nèi)置的服務(wù)器用一條命令就可以啟動(dòng)；
• 高效的圖像優(yōu)化——Yeoman 使用 OptPNG 和 JPEGTran 對(duì)所有圖像做了優(yōu)化，提供頁(yè)面加載速度；
• 生成 AppCache 清單——Yeoman 會(huì)為你生成應(yīng)用程序緩存的清單，你只需要構(gòu)建項(xiàng)目就好；
• 殺手級(jí)的構(gòu)建過程——Yeoman 為你自動(dòng)化完成了大部分的工作，幫助你節(jié)省大量時(shí)間和精力；
• 集成包管理——你可以通過命令行輕松地查找新的包，安裝并保持更新，而不需要你打開瀏覽器；
• 支持ES6模塊語(yǔ)法——可以使用最新的ECMAScript 6模塊語(yǔ)法來(lái)編寫模塊，不過還是一種實(shí)驗(yàn)性的特性，它會(huì)被轉(zhuǎn)換成ES5；
• PhantomJS單元測(cè)試——使用PhantomJS輕松運(yùn)行單元測(cè)試。創(chuàng)建新的應(yīng)用程序的時(shí)候，它還會(huì)為你自動(dòng)創(chuàng)建測(cè)試框架；

?

15.TypeCast

TypeCast 讓你可以從Fonts.com、TypeKit、FontDeck和Google這些字體供應(yīng)和商選擇字體，而且能非常方便的比較這些字體使用效果。如果你想獲得用戶對(duì)這些字體效果的反饋，只需要發(fā)布一個(gè)URL就可以了。這樣，無(wú)需實(shí)際購(gòu)買的字體，直到你已經(jīng)決定在最終的解決方案。

由于網(wǎng)頁(yè)字體的巨大飛躍，排版正在成為網(wǎng)頁(yè)設(shè)計(jì)師工作中一項(xiàng)越來(lái)越重要的內(nèi)容。但是，實(shí)際的情況是數(shù)以千計(jì)的字體讓設(shè)計(jì)師需要花大量的時(shí)間和精力去選擇，而 TypeCast 正是為了解決這個(gè)問題的。

16.Gridset

Gridset 讓你可以非常輕松的添加列，定義比例和設(shè)置間隔，而不用考慮背后的數(shù)學(xué)計(jì)算。

網(wǎng)格系統(tǒng)正逐漸成為網(wǎng)頁(yè)設(shè)計(jì)的焦點(diǎn)，和印刷排版有點(diǎn)類似，但是要復(fù)雜很多。網(wǎng)頁(yè)的網(wǎng)格系統(tǒng)需要更加靈活，更加響應(yīng)性。但是網(wǎng)格系統(tǒng)的計(jì)劃和規(guī)劃是件困難的事情， Gridset 可以讓你輕松的使用網(wǎng)格系統(tǒng)。

17.Microsoft WebMatrix 2

WebMatrix 是一個(gè)全新的Web開發(fā)平臺(tái)，區(qū)別于現(xiàn)有的開發(fā)平臺(tái)，WebMatrix的特點(diǎn)是一站式和簡(jiǎn)化的開發(fā)過程，提供一種簡(jiǎn)單、一體化的建站方案。

它提供了網(wǎng)站所需的所有工具：Web Server、數(shù)據(jù)庫(kù)、Web框架和開發(fā)環(huán)境。其主要組件包括了輕量級(jí)Web serve IIS Developer Express；輕量級(jí)基于文件的數(shù)據(jù)庫(kù)SQL Server Compact Edition；輕量級(jí)開發(fā)環(huán)境ASP.NET “Razor”。

18.Trello

Trello 是由著名的軟件工程師Joel Spolsky開發(fā)的一個(gè)團(tuán)隊(duì)協(xié)作平臺(tái)，在今年的TechCrunch Disrupt大會(huì)上正式發(fā)布。運(yùn)行和管理一家公司，最困難的事情莫過于追蹤大家的工作狀況，因此他開發(fā)了Trello 來(lái)解決這個(gè)難題。任何行業(yè)中的任何人都可以使用Trello團(tuán)隊(duì)工作系統(tǒng)。

其他的項(xiàng)目管理系統(tǒng)都是以開發(fā)者為中心的，過于復(fù)雜，對(duì)普通用戶缺乏吸引力，Trello則為各種流程設(shè)計(jì)，既可以當(dāng)做公司的協(xié)作工具，也可以當(dāng)做個(gè)人的列表管理工具。

19.Firefox 18

Firefox 擁有眾多強(qiáng)大的開發(fā)工具插件，成為Web開發(fā)人員必備可少的調(diào)試工具，從Firefox 18開始，Mozilla將正式開啟開發(fā)長(zhǎng)達(dá)1年之久的的新一代JavaScript引擎——IonMonkey，不僅能大幅提高Firefox的JavaScript性能，還能提高瀏覽器的安全性及其他性能。

最新版本增加對(duì)于OSX 10.7+ 超高分屏和和WebRTC的支持；使用了新的HTML拉伸算法，提高了圖片質(zhì)量；實(shí)現(xiàn)了CSS3 Flexbox；實(shí)現(xiàn) W3C 標(biāo)準(zhǔn)的觸摸實(shí)現(xiàn)，替代了MozTouch實(shí)現(xiàn)；實(shí)現(xiàn)新的DOM屬性Window.devicePixelRatio；通過智能化處理簽名擴(kuò)展的認(rèn)證來(lái)提高啟動(dòng)速度。

20.Photon

Photon 是一個(gè)非常有趣的項(xiàng)目，為立體空間中的DOM元素添加光照效果的JavaScript庫(kù)，結(jié)和CSS3變換（Transform）實(shí)現(xiàn)。

作者Tom Giannattasio提供了三個(gè)例子，包括一個(gè)非常好的紙鶴的效果展示，你可以移動(dòng)鼠標(biāo)進(jìn)行旋轉(zhuǎn)，下面提供的Photon效果切換按鈕可以讓你體驗(yàn)兩種狀態(tài)下的差異。

來(lái)自： 夢(mèng)想天空的博客

2012年度最佳Web前端開發(fā)工具和框架