【年度盛宴】2012年度最佳 Web 前端开发工具和框架——《上篇》

刺骨的言语ヽ痛彻心扉 2022-01-15 14:39 206阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

2012年，Web 开发领域继续在快速的发展， [**HTML5**][HTML5] 仍然在展示其跨平台的优越性， [**CSS3**][CSS3] 被人们更多的应用到实际项目中，响应式设计（Responsive Design）技巧也被人越来越多的人熟知和使用。

技术的快速发展让很多人学习起来无所适从，幸运的是，很多优秀的 [**Web**][Web] 开发人员和设计人员在努力寻找各种有特色的解决方案。 因此，我们有了很多优秀的小工具和库，每一个都是用来解决特定的问题或维护一组特定的项目。

这篇文章收集了2012年度新发布的最具有代表性 [**Web**][Web] 前端开发工具和框架，这是一个非常值得收藏的工具列表，从功能全面的 IDE 到美观、充满异国情调的小框架，小工具等等。他们能够帮助你降低 Web 开发过程中的复杂度，节省时间和精力。

### 01. Foundation 3 ###

响应式设计（Responsive Design）似乎瞬间就发展起来了，各个网页设计的论坛或者社区都会讨论这个话题，大家都想知道如何实现响应式设计，有什么框架或好的解决方案。

[**Foundation 3**][Foundation 3]，由 ZURB 公司开发，号称世界上最先进的响应式前端框架。利用灵活的网格系统可以快速设计出页面布局。更妙的是，网格可以是你所需要的任何尺寸，它很容易适应各种尺寸的屏幕。

![Foundation 3 makes great claims and even lives up to some of them][]

### 02. Proto.io ###

[**Proto.io**][Proto.io] 是一个新的界面原型设计工具，专门针对移动应用程序。基于 [**Web**][Web] 的在线环境，可以让你制作流行的 iPhone，iPad，Android 手机或平板电脑，以及任何带有屏幕界面的设备的原型项目。

在设计了一些界面后，你通常会期望能够把页面交互性的链接起来，[**Proto.io**][Proto.io 1] 做到了这一点。它也支持所有你可能想到的触摸手势，以及幻灯片、翻转和淡入淡出动画，使用简单，而且可以免费使用。

![Thanks to Proto.io that game is going to be a smash, probably][Thanks to Proto.io that game is going to be a smash_ probably]

### 03. Fontello ###

为什么这么难找到一组涵盖所有的基础功能的外观一致的图标？

不用再困惑了，[**Fontello**][Fontello] 不仅拥有所有你需要的图标，而且你可以挑选并选择你所需要的字形，并编译成自己需要的一套。 当然，您也可以从 [**GitHub**][GitHub] 下载整个的图标集。该项目是开源的，糕富帅们捐几刀吧，不胜感激。

![Fontello allows you to pick and choose your icon sets from its collections][]

### 04. Bugherd ###

与普遍的看法相反，推出一个新的网站对于开发团队来说工作还远远没有结束。

[**BugHerd**][BugHerd] 提供了一个整洁，组织良好的方式来处理反馈，Bug 修复和功能要求。不需要繁杂的电子邮件反馈方式，只需要在网站中包含一个简单的 [**JavaScript**][JavaScript] 文件，该网站的访问者就可以通过反馈按钮提交意见和建议。BugHerd 提供了一个友好，直观的界面来管理整个事情。

![Adding tasks is super-easy with BugHerd][]

### 05. Sencha Touch 2 ###

毫无疑问，移动触屏设备的流行给 [**Web**][Web] 开发带来了巨大的影响。

[**Sencha Touch**][Sencha Touch] 是一个基于 [**HTML5**][HTML5] 的移动应用开发框架，致力于吸引 [**HTML5**][HTML5] 开发者使用 Sencha Touch 构建在 iPhone、Android 和 BlackBerry 等设备上运行的移动 Web 应用，这些应用效果看起来如同本地应用。改进的 API，完善的文档和教程资料以及可靠的本地集成让 Sencha Touch 2 成为强有力的移动框架竞争者。

![02204259_3i3x.jpg][]

### 06. Dreamweaver CS6 ###

**　　[Dreamweaver][]** 是经典的网页制作软件，最新发布的 Dreamweaver CS6 新增了 [**HTML5**][HTML5] 和 [**CSS3**][CSS3] 编码支持；[**jQuery**][JavaScript] 移动和 Adobe PhoneGap 框架的扩展支持可协助您为各种屏幕、手机和平板电脑建立项目；集成了 Adobe Business Catalyst、FTPS、FTPeS 支持、Adobe Creative Suite、Adobe BrowserLab等众多功能。

![Even with all the bells and whistles Dreamweaver CS6 has a certain poise][]

### 07. Cloud9 IDE ###

[**Cloud 9**][Cloud 9] 是基于 NodeJS 构建的在线集成开发环境，语法高亮支持 C\#, C++, Python, Perl, Ruby, Scala 等等众多常用开发语言。

内置的 Vim 模式非常好用，支持流行的版本控制系统，像 Git, Mercurial 和 SVN，另外它还有非常强大的插件系统，可以拓展其功能，例如借助 CSSLint 和 JSBeautify，Cloud9 就可以变成一款非常实用的代码美化工具。

![Cloud9 gives you and your cohorts with a unified, code anywhere environment][Cloud9 gives you and your cohorts with a unified_ code anywhere environment]

### 08. Adobe Edge Inspect ###

**　　[Edge Inspect][]**是一款对移动开发者非常有用的工具，其前身是 [Adobe Shadow][Edge Inspect]，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。

只需要把你的设备（Android 和 iOS）和你的电脑连接起来，这时候你的网站就会在各个设备上同步显示，让检查和调试变得更有效，并可以让设计师同时看到每个版本在所有目标设备上的显示情况。

![Edge Inspect just takes a couple of clicks to set up once you have all the downloads - browser, desktop and mobile][Edge Inspect just takes a couple of clicks to set up once you have all the downloads - browser_ desktop and mobile]

### 09. Adobe Brackets ###

你可能会觉得现在代码编辑器已经是琳琅满目了，而且这些编辑器都很相似，没有什么可创新的了。[**Brackets**][Brackets] 让我们知道，其实在编辑器领域还是有很多功能可以去探索的。Brackets 是 Adobe 的开源 [**HTML**][HTML5]、[**CSS**][CSS3] 和 [**JavaScript**][JavaScript] 集成开发环境。Brackets 提供 Windows 和 OS X 平台支持。

Brackets 的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等，[**Brackets**][Brackets] 值得你试试。

![HTML/CSS/JS Brackets makes them feel newly detailed and responsive][HTML_CSS_JS Brackets makes them feel newly detailed and responsive]

### 10. Modernizr 2.6 ###

[**Modernizr**][Modernizr] 是一个开源的 [**JavaScript**][JavaScript] 库，用于检测用户浏览器的 [**HTML5**][HTML5] 和 [**CSS3**][CSS3] 特性。它使得那些基于用户浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单，让 Web 开发人员可以在现代浏览器中充分利用 [**HTML5**][HTML5] 和 [**CSS3**][CSS3] 的那些先进的特性进行开发，同时又不会牺牲其它不支持这些新技术的浏览器的控制。

![Front end development tool with a serious pedigree][]

未完待续，2012年度最佳 Web 前端开发工具和框架《下篇》即将推出，敬请期待 :)

转载于:https://my.oschina.net/mousai/blog/99592

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/7d39a90a59ae4e36b666d2f85c2c35be.png
[HTML5]: http://www.cnblogs.com/lhb25/category/146076.html
[CSS3]: http://www.cnblogs.com/lhb25/category/146075.html
[Web]: http://www.cnblogs.com/lhb25/category/279316.html
[Foundation 3]: http://foundation.zurb.com/
[Foundation 3 makes great claims and even lives up to some of them]: /images/20220115/6539d356fbad459fb44d2e0238c5b138.png
[Proto.io]: http://proto.io/
[Proto.io 1]: http://www.cnblogs.com/lhb25/archive/2012/12/17/20-best-new-tools-web-design-and-development-2012.html
[Thanks to Proto.io that game is going to be a smash_ probably]: /images/20220115/5bf957861455403a80f96863b63463b4.png
[Fontello]: http://fontello.com/
[GitHub]: https://github.com/fontello/fontello
[Fontello allows you to pick and choose your icon sets from its collections]: /images/20220115/93c354a18f2c405787c879d590533ae9.png
[BugHerd]: http://www.bugherd.com/
[JavaScript]: http://www.cnblogs.com/lhb25/category/146074.html
[Adding tasks is super-easy with BugHerd]: /images/20220115/3424d6bb3e9f47c5ab70967a41bf8359.png
[Sencha Touch]: http://www.sencha.com/
[02204259_3i3x.jpg]: /images/20220115/599de2aab51c4035b7f2d7a415c0e20a.png
[Dreamweaver]: http://www.adobe.com/products/dreamweaver/
[Even with all the bells and whistles Dreamweaver CS6 has a certain poise]: /images/20220115/74287686a2114b0faf9d1a6ef3bb8392.png
[Cloud 9]: http://c9.io/
[Cloud9 gives you and your cohorts with a unified_ code anywhere environment]: /images/20220115/cef9a8a96b6644ebaa03b77128717e9d.png
[Edge Inspect]: http://html.adobe.com/edge/inspect/
[Edge Inspect just takes a couple of clicks to set up once you have all the downloads - browser_ desktop and mobile]: /images/20220115/9688cfa3db5c46f99eb6bb354c1fe40b.png
[Brackets]: http://github.com/adobe/brackets/
[HTML_CSS_JS Brackets makes them feel newly detailed and responsive]: /images/20220115/17eff01460e444b1a115d91edd0788d5.png
[Modernizr]: http://modernizr.com/
[Front end development tool with a serious pedigree]: /images/20220115/9be04f86afa14f3687af8c3267eb3ebb.png