七种有前景的Web技术

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

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版本会在几个月后发布。你可以参考一下萨沙格莱夫写的这篇介绍文章，作者只用了四十五分钟就搞定了基于Meteor的软件开发。

Tumult Hype 2.0: 再见了，Flash

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

这几周我一直在陆陆续续使用Hype 2.0，尽管和Flash Professional比起来的确少了一些特性，但是用来为网站创建具有专业外观的交互式内容是完全够用的。不妨来看看这些用Hype制作的游戏和信息图表 。

Hype 2.0还有一些新特性，比如Hype Reflect，一款免费的iOS应用，可以用来在iPhone或者iPad上即时预览你的作品。其他特性还有：更出色的移动端内容支持，更强大的音频支持以及对曲线形运动路径的支持。Macworld对这些新特性做了不错的总结，值得看看。

Bohemian Sketch: 网页设计师的梦幻工具

虽然不少网页设计师选择Photoshop，还有许多人在寻找更精简，更便宜同时更适合网页设计的替代品。

Bohemian Coding出品的Sketch由此应运而生。和Hype相仿，Sketch也是Mac软件，也经历了从相对简单的设计工具到针对网页交互设计进行强化的全功能软件的进化。Sketch的独特特性包括：

• 基于矢量的精确、非破坏性编辑操作和与分辨率无关的结果

• 内置网格支持

• 在单个Sketch文档中使用多个页面和画板

• 简单的切片操作自动图像裁切

• 使用图层样式轻松添加各种效果，比如填充，边框和阴影

我们网站的西蒙这几天的网页设计的工作基本上都是用Sketch完成的。看看这篇今年早些时候他写的关于Sketch的文章。

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编辑器。最终的付费版据称会马上到来，届时会支持更多的编辑器。

Bootstrap 3：对移动端友好的现代化前端框架

Bootstrap是一个最近广受关注的Web前端框架。Bootstrap最初由Twitter开发，现在是一个发展迅速的开源项目。

今年发布的第3版带来了一系列非常可爱的新特性，主要有：

• 移动端优先：你现在可以先为移动端设计网站，随后再将内容放大从而适配桌面端更大的屏幕。框架是完全响应化设计的，所以网站可以自动适配各种大小的屏幕。

• 超赞的网格系统：网格非常易于使用，而且对手机、平板电脑、桌面显示器以及超大桌面显示器都有相应的断点系统。

• 可爱的可选主题：默认情况下Bootstrap搭建出来的网站外观都不怎么样，现在你可以在一些超美的主题的基础上开发网页了。看看这些赏心悦目的色彩！

• 全新的自定义程序：使用自定义程序来调整Bootstrap的方方面面。现在可以根据自己的品味来构建自定义版本了。这一切都在浏览器中即时编译，可以直接下载到本地计算机让部署网站变得更简单。

我爱Bootstrap！现在让我从头搭建一个网站的话，它一定是我的第一选择。要进一步了解Bootstrap都能做些什么，不妨看看这些例子 。

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可以自动生成一个风格指南页面，可以充分展示你的设计中使用的字体、颜色、网格和类。非常赞！

Macaw目前尚未发布，不妨先看看这个视频。值得一看！

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的主要使用场景。想想我们在iOS7上看到的那些有趣的、有触控交互动画的应用程序接口吧。下面这个视频（使用iPad）充分展示了这项技术的可能性。

https://www./watch?v=NdAvOE3SyrU

我已经迫不及待地期待开发者利用这项技术开发出流畅性可以和原生应用相媲美的web软件了。多么激动人心呀！

有什么让你惊喜的新技术吗？

有什么让你感到惊喜的新技术、新框架或者软件吗？或许本文介绍的一些技术你已经在用了？

欢迎点开阅读原文，查看具体相关信息。