当前位置: 首页 > news >正文

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

在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的讨论,看看我的过滤会话列表吧。

相关文章:

  • 微软云服务获政府认证 云服务或将迎来黄金期
  • SAE 搭建 WordPress
  • 自定义 WordPress 样式
  • 比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架
  • (poj1.2.1)1970(筛选法模拟)
  • 关于nmap的几个技巧
  • Erlang几种判断语句:if、case等
  • (pojstep1.3.1)1017(构造法模拟)
  • 新视野OJ 2190 [SDOI2008]仪仗队 (数论-gcd)
  • WinForm_2一个简单实用的小应用——桌面时钟
  • 数据分析工程师笔试题:计算平均数的指标及其优缺点
  • 新视野OJ 2005 [Noi2010]能量采集 (数论-gcd)
  • Python 入门教程 17 ---- Introduction to Classes
  • HDU 4288 Coder 【线段树+离线处理+离散化】
  • 近期刷题的c语言总结。
  • 【Amaple教程】5. 插件
  • Java IO学习笔记一
  • jdbc就是这么简单
  • k8s如何管理Pod
  • Mac转Windows的拯救指南
  • Mybatis初体验
  • MySQL用户中的%到底包不包括localhost?
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • scala基础语法(二)
  • Vue2.x学习三:事件处理生命周期钩子
  • 仿天猫超市收藏抛物线动画工具库
  • 构造函数(constructor)与原型链(prototype)关系
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 和 || 运算
  • 精益 React 学习指南 (Lean React)- 1.5 React 与 DOM
  • 跨域
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 怎么把视频里的音乐提取出来
  • 阿里云重庆大学大数据训练营落地分享
  • # C++之functional库用法整理
  • (06)Hive——正则表达式
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (二)正点原子I.MX6ULL u-boot移植
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .NET 设计模式—适配器模式(Adapter Pattern)
  • .NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • @data注解_一枚 架构师 也不会用的Lombok注解,相见恨晚
  • [ Linux ] Linux信号概述 信号的产生
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)
  • [Android]Android P(9) WIFI学习笔记 - 扫描 (1)
  • [Android]创建TabBar
  • [ARC066F]Contest with Drinks Hard
  • [BZOJ]4817: [Sdoi2017]树点涂色
  • [c]统计数字
  • [CQOI 2010]扑克牌
  • [hdu 1711] Number Sequence [kmp]