对于Visual Studio 2013中 Blend的HTML开发人员来说什么是新的

  • Article

[原文发表地址] What's new for HTML Developers in Blend for Visual Studio 2013

[原文发表时间] 3 Sep 2013 9:30 AM

        在6月Windows的Build 研讨会上，我们向世界介绍了Visual Studio和Blend 2013 Preview版。随着这次的发布，我们极大地扩展了Visual Studio对于用JavaScript、HTML、CSS创建Window Store Apps的支持，除了在Visual Studio中发现的客户端诊断和调试工具外，Blend同时还提供了主机功能，旨在通过打破那折磨人的“编辑-刷新”周期来提高效率。

        在本文中，我们将深度剖析一下Blend中三个改善 HTML/CSS开发最多的的部分，包括创作CSS Animations新的工作流程（1）、嵌入自定义字体（2）和数据绑定属性（3）。

CSS 动画

         W3C CSS ANIMATIONS 规则描述了一个极其强大的句法，但是该句法还是比较复杂的，难以单独通过代码来使其呈现出来，并且不容易调试。幸运的是，创作动画有行之有效的模式。在这个版本中，Blend采用了最熟悉的模式之一：基于时间轴的创作。

        通过动画时间线，开发人员可以擦除至任意时间点，添加keyframes,拖放关键规则，修改迭代次数，设置填充模式等。简而言之，你可以编辑任何一个或者每个W3W规则描述的CSS动画。

Edit CSS animation

        大多其他的动画创作工具需要一个JavaScript的依赖，但是Blend时间轴却是众多中独一无二的一个，因为它创建了一个单纯的并且无需JavaScript或其他框架的CSS动画。一切都百分之百的符合CSS标准。这就意味着开发人员可以打开编辑任何网络中发现的CSS动画。

Edit CSS animation

        我们同样注意到大多数的动画工具只允许编辑工作程序以外的范围。不幸的是，这种隔离是有代价的：开发者无法看到DOM中的动画是如何与其他元素交互的。使用Blend，在工作程序范围内开发者能直接删除并且编辑动画。这就意味着如果你设置动画一个元素的宽度，例如，你就能看到它如何影响相邻元素的布局。

        虽然动画应该谨慎使用在任何程序中，但正是谚语中的“锦上添花”促使我们做最好的应用，使得它们看起来灵敏、完美、现代化。我们认为动画时间轴编辑器将会向那些期望往组合里面添加一些动作的UI开发人员证明这是无法估价的。

嵌入自定义字体

        对于所有影响品牌视觉形象的设计元素来说，没有什么比排版更重要了。文字的格式必须清晰，能在任何一个尺寸呈现出来，并且留下一个唯一的印象。为了达到这些目标，图形设计师经常利用一些不是Windows自带的字体系列。以往，UI开发人员通过图片、Flash、或者SVG文本把这些相同的自定义字体加入到网站或者应用程序、。不幸的是，文本替换一个长的字符串（例如一个段落）几乎是不可能实现的，并且增加了文件的大小以及载入时间。

        为了克服这些弊端，开发团体最近估算了CSS3潜在的功能，就像字体外表。高分辨率时代同样恢复了对自定义图标字体的兴趣，将它作为创造性地提供可扩展图形的一种方式。

        按照这种趋势发展，Blend现如今通过字体外表规则提供一些了便于向应用程序中添加自定义字体的加速器，支持字体的文件可以被加到既定的项目中，并且通过简单地选择右键菜单中的“字体外表规则”来创建属于它的规则。

Custom font embedding

 

        字体外表规则一旦被添加到相应的CSS或HTML文件中，字体系列可以新的字体系列CSS属性编辑器中可以被选中了。Trident对字体外表和字体系列全部范围的支持在编辑器中是可用的，这使得它能够使用的环境达到最大化。

        最终结果就是自定义的字体现在能被更快地添加到到一个项目中，并且通过手动引用它们，很少会出现错误。

数据绑定

        通常，Windows Store Apps会避免出现硬代码，而是从数据源使用动态的内容。事实上，WinJS框架可以充分利用模板，单向的绑定数据来填充标题文本、图像URL和正文复制。在这个Blend的版本中，我们添加了几个对话框来使得它更有效的和数据工作。

        举个例子来说，作者可以通过选择Windows App Control属性下面的“创建模板”来快速的创建一个模板。由此产生的对话框将会询问作者来确定模板的名字，和选择插入哪个数据字段。最终，Blend会创建一个空的项目模板，高质量的待编辑HTML标记。

Data Binding

其他一些改进的点

在预览版里发现了许多其他的改进点，在他们中你会发现：

1. JavaScript 行为：向一个没有代码的元素中添加一个JavaScript eventListeners，选择默认的eventHandlers或者你自己创建。

2. 规则和参考： 你主页上的精确测量和位置元素都将有规则和参考帮助在美工板上。

3. 紧贴：绝对整齐，元素之间相对的或固定的位置将使用磁性美工板排列。

4. 边界半径： 每个元素将使用easy-to-manipulate来创使用建圆角和椭圆

5. 搜索和设置CSS属性：从搜索框里快速地设置CSS属性值。

6. 用CSS句法来查询元素：筛选Live DOM来显示匹配CSS 选择器的元素。例如， 你可以通过查询div。foobar来先试用foobar类下的<div>元素。

7. 高保真设计图面： 在所有的缩放级别下都能看到清晰的边界，并且Blend的设计界面有60帧/秒性能改进。

       给出这些功能的评论，通过评论、回帖或者在UserVoice上分享建议让我们知道你的想法。同样的，如果你想看到一些其他的精彩的有关HTML5的讨论，看看我的过滤会话列表吧。