2012年度最佳 Web 前端開發工具和框架——《上篇》

時間 2021-01-02

標籤 css html 前端 css3 git github web 瀏覽器安全前端框架欄目 HTML 简体版

原文原文鏈接

　　2012年，Web 開發領域繼續在快速的發展，HTML5 仍然在展現其跨平臺的優越性，CSS3 被人們更多的應用到實際項目中，響應式設計（Responsive Design）技巧也被人愈來愈多的人熟知和使用。css

您可能感興趣的相關文章

　　技術的快速發展讓不少人學習起來無所適從，幸運的是，不少優秀的 Web 開發人員和設計人員在努力尋找各類有特點的解決方案。所以，咱們有了不少優秀的小工具和庫，每個都是用來解決特定的問題或維護一組特定的項目。html

　　這篇文章收集了2012年度新發布的最具備表明性 Web 前端開發工具和框架，這是一個很是值得收藏的工具列表，從功能全面的 IDE 到美觀、充滿異國情調的小框架，小工具等等。他們可以幫助你下降 Web 開發過程當中的複雜度，節省時間和精力。前端

01. Foundation 3

　　響應式設計（Responsive Design）彷佛瞬間就發展起來了，各個網頁設計的論壇或者社區都會討論這個話題，你們都想知道如何實現響應式設計，有什麼框架或好的解決方案。css3

　　Foundation 3，由 ZURB 公司開發，號稱世界上最早進的響應式前端框架。利用靈活的網格系統能夠快速設計出頁面佈局。更妙的是，網格能夠是你所須要的任何尺寸，它很容易適應各類尺寸的屏幕。git

02. Proto.io

　　Proto.io 是一個新的界面原型設計工具，專門針對移動應用程序。基於 Web 的在線環境，可讓你製做流行的 iPhone，iPad，Android 手機或平板電腦，以及任何帶有屏幕界面的設備的原型項目。github

　　在設計了一些界面後，你一般會指望可以把頁面交互性的連接起來，Proto.io 作到了這一點。它也支持全部你可能想到的觸摸手勢，以及幻燈片、翻轉和淡入淡出動畫，使用簡單，並且能夠無償使用。web

03. Fontello

　　爲何這麼難找到一組涵蓋全部的基礎功能的外觀一致的圖標？瀏覽器

　　不用再困惑了，Fontello 不只擁有全部你須要的圖標，並且你能夠挑選並選擇你所須要的字形，並編譯成本身須要的一套。固然，您也能夠從 GitHub 下載整個的圖標集。該項目是開源的，糕富帥們捐幾刀吧，不勝感激。安全

04. Bugherd

　　與廣泛的見解相反，推出一個新的網站對於開發團隊來講工做還遠遠沒有結束。前端框架

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

05. Sencha Touch 2

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

　　Sencha Touch 是一個基於 HTML5 的移動應用開發框架，致力於吸引 HTML5 開發者使用 Sencha Touch 構建在 iPhone、Android 和 BlackBerry 等設備上運行的移動 Web 應用，這些應用效果看起來如同本地應用。改進的 API，完善的文檔和教程資料以及可靠的本地集成讓 Sencha Touch 2 成爲強有力的移動框架競爭者。

06. Dreamweaver CS6

　　Dreamweaver 是經典的網頁製做軟件，最新發布的 Dreamweaver CS6 新增了 HTML5 和 CSS3 編碼支持；jQuery 移動和 Adobe PhoneGap 框架的擴展支持可協助您爲各類屏幕、手機和平板電腦創建項目；集成了 Adobe Business Catalyst、FTPS、FTPeS 支持、Adobe Creative Suite、Adobe BrowserLab等衆多功能。

07. Cloud9 IDE

　　Cloud 9 是基於 NodeJS 構建的在線集成開發環境，語法高亮支持 C#, C++, Python, Perl, Ruby, Scala 等等衆多經常使用開發語言。

　　內置的 Vim 模式很是好用，支持流行的版本控制系統，像 Git, Mercurial 和 SVN，另外它還有很是強大的插件系統，能夠拓展其功能，例如藉助 CSSLint 和 JSBeautify，Cloud9 就能夠變成一款很是實用的代碼美化工具。

08. Adobe Edge Inspect

　　Edge Inspect 是一款對移動開發者很是有用的工具，其前身是 Adobe Shadow，用於幫助設計師和開發者同時在多個移動設備上預覽應用設計，發現和解決跨平臺問題。

　　只須要把你的設備（Android 和 iOS）和你的電腦鏈接起來，這時候你的網站就會在各個設備上同步顯示，讓檢查和調試變得更有效，並可讓設計師同時看到每一個版本在全部目標設備上的顯示狀況。

09. Adobe Brackets

　　你可能會以爲如今代碼編輯器已是琳琅滿目了，並且這些編輯器都很類似，沒有什麼可創新的了。Brackets 讓咱們知道，其實在編輯器領域仍是有不少功能能夠去探索的。Brackets 是 Adobe 的開源 HTML、CSS 和 JavaScript 集成開發環境。Brackets 提供 Windows 和 OS X 平臺支持。

　　Brackets 的核心目標是減小在開發過程當中那些效率低下的重複性工做，例如瀏覽器刷新，修改元素的樣式，搜索功能等等，Brackets 值得你試試。

10. Modernizr 2.6

　　Modernizr 是一個開源的 JavaScript 庫，用於檢測用戶瀏覽器的 HTML5 和 CSS3 特性。它使得那些基於用戶瀏覽器的不一樣（指對新標準支持性的差別）而開發不一樣級別體驗的設計師的工做變得更爲簡單，讓 Web 開發人員能夠在現代瀏覽器中充分利用 HTML5 和 CSS3 的那些先進的特性進行開發，同時又不會犧牲其它不支持這些新技術的瀏覽器的控制。