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

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

01.Foundation 3

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

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

02.Proto.io

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

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

03.Fontello

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

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

04.Bugherd

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

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

05.Sencha Touch 2

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

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

06.Dreamweaver CS6

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

07. Cloud9 IDE

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

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

08.Adobe Edge Inspect

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

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

09.Adobe Brackets

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

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

10.Modernizr 2.6

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

11.Sublime Text 2

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

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

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

12.PhoneGap 2.0

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

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

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

13.Emmet

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

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

• 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)大的工具、庫和工作流，可以幫助開發(fā)人員快速構(gòu)建出漂亮的、引人注目的Web應(yīng)用。Yeoman的主要特色：

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

?

15.TypeCast

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

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

16.Gridset

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

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

17.Microsoft WebMatrix 2

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

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

18.Trello

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

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

19.Firefox 18

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

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

20.Photon

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

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

來自： 夢想天空的博客

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