五种有前景的Web技术

网站开发领域飞速发展。仿佛每一天都有新的框架或者设计工具问世。本文会概括介绍网页设计和开发领域的七种新兴技术。借助这些技术就可以轻松方便地搭建一个美观、实用的网站和web程序。让我们开始吧！

1.Meteor: 处处都在用JavaScript

Meteor是个相当不错的编写和部署Web程序的新平台。据称会成为未来几十年内构建应用程序的主要平台！相当大胆的说法，说不定成真了呢。

回顾历史，网站工作原理大都是“在服务器上处理东西，然后把HTML发送给呆萌的浏览器”。Meteor开发小组质疑这种技术已经过时。现代浏览器能做的远不止自行运行程序，比如从服务器或者随便什么地方的Web服务获取数据。固守”所有的东西都交给服务器处理“的旧模式完全不合情理。让浏览器自行请求所需数据，甚至是通过多个来源获取数据，然后构建自己的标记语言来显示应用程序接口的新模式显然更有意义。

编写Meteor应用只会用到HTML，CSS和JavaScript。Meteor的一大特点是，JavaScript既可以运行在服务器上（用Meteor服务器和Node.js）也可跑在浏览器里。服务器端的Meteor负责打包客户端JavaScript和其他资源，然后把它们当作一个缩小的捆绑包发送到浏览器。

Meteor采用响应式编程，也就是只要更新数据，网页元素就会自动更新。这意味着程序员的工作量大大减轻，同时用户界面会更加强大。

Meteor还有需要不错的特性，包括多种模板引擎支持，跨服务器和浏览器的数据库拷贝带来的超高速数据库访问。部署应用程序也非常方便，既可以用自己的服务器也可以用meteor.com免费提供的服务器。

用Meteor可以优雅地打造现代Web应用。我迫不及待想亲自尝试一下。该平台还处在“早期预览”阶段，1.0版本会在几个月后发布。

2.Tumult Hype 2.0: 再见了，Flash

Tumult Hype 的Mac软件已经出来了好几年了，但是直到最新的2.0版本才真正显示出自己的价值。Hype让你能够用绘图工具和时间线来设计并构建交互式Web内容和关键帧动画。然后只需轻点几次鼠标，就可以把工作成果导出为符合标准的HTML5，CSS，JavaScript和图像，而且可以同时在桌面端和移动端上运行。这就像是用Adobe公司的Flash Professional制作HTML5，费用却少了不少。

3.Macaw：真正理解代码的图像编辑器

虽然网页设计师都应该对HTML和CSS略知一二，还有很多人更倾向于纯设计，而不是敲代码。如果设计工具可以利用设计师给的设计稿生成相应的HTML和CSS的话，生活会多美好啊。

诸如Firewords的众多图像编辑器已经可以直接输出HTML和CSS了，但是实际结果往往比较糟糕，HTML代码写得繁琐差劲，CSS类也没有语义可言。

用一下Macaw 吧。这是一款懂代码的设计软件，宣称可以在语义层面理解设计元素，其生成的HTML和CSS代码简洁易懂，非常接近前端程序员亲自编写的效果。

Macaw的杀手级特性包括：

全局类 ：将常用的风格保存成一个全局类。这样做的好处是只需要修改这个全局类，就可以轻松修改使用这个类的所有元素的风格。

整合：Macaw的Alchemy引擎能够用最简洁、最高效的方式组织CSS选择器，从而生成精美、易于阅读的CSS代码。

绝对定位转换为静态定位 ：使用Macaw设计网页的布局就像使用绝对定位一样。Macaw通过合理使用margin, padding和float，自动将元素的定位方式转换为浏览器中的标准静态定位

流式网格和响应式布局 ：Macaw使用支持流式网格的可调整画布，可以设置响应式断点并据此调整CSS属性以适应不同的视见区宽度。

输出风格指南 ：Macaw可以自动生成一个风格指南页面，可以充分展示你的设计中使用的字体、颜色、网格和类。非常赞！

4.Famo.us：顺滑的Web界面得以成真

我们最后要介绍的工具同样非常重要。Famo.us是一个出色的JavaScript渲染引擎，有望彻底改变web应用程序及其用户界面。从原理上讲，Famo.us绕过了浏览器渲染3D动画的传统方式，而是直接使用GPU，从而带来了超流畅、硬件加速的3D图像。

这样做真正的好处在于，这一切都是用JavaScript实现的。也就是说，JavaScript，CSS和DOM的强大功能触手可及。而这些对开发者完全是免费的（Famo.us公司主要通过和硬件厂商的合作来盈利）。Famo.us可以在众多浏览器上流畅运行，从现代台式电脑到iPhone 3GS无不如此，这一点令人印象深刻。

我觉得对于Famo.us的实际使用场景大家还有很多误解。从他们的演示来看，Famo.us好像是专门为创建3D图形（尽管是超光滑图形）而设计的，用来可以取代Flash。实际上它同样适用于2D界面，而我认为短期内这都会是Famo.us的主要使用场景。

5.LiveStyle：实时双向CSS编辑

Emmet LiveStyle是一个近乎神奇的全新浏览器插件，可以实现CSS实时编辑。

你可能听说过诸如LiveReload的插件，可以监控本地的CSS文件的更改。只要修改并保存了CSS文件，插件就会自动刷新浏览器，这样就可以直观展示修改的效果。

LiveStyle在此基础上更进了一步。启用LiveStyle之后，甚至不需要保存CSS文件！只要用文本编辑器对CSS文件做出修改，修改的结果立即会在浏览器上呈现，甚至都不需要重新载入页面。编辑操作甚至可以是反方向的，也就是说：在浏览器上通过元素审查来编辑页面CSS的时候，LiveStyle就会自动更新文本编辑器中的CSS文件。

你可以用这种方法编辑任何页面的CSS，哪怕没有CSS文件的本地拷贝，甚至CSS被压缩也可以！这里有个演示视频展示了如何使用LiveStyle来实时编辑Facebook和Google的首页。

这一切之所以能够实现是因为LiveStyle能够在结构层面分析CSS的变化，从而在浏览器和文本编辑器之间双向传递那些真正发生变化的部分。真的非常赞。该插件还处在公测阶段，而且暂时只支持Sublime Text编辑器。最终的付费版据称会马上到来，届时会支持更多的编辑器。