在 IE 10上的Pulse脉冲- 现代网络的现代应用 !

分享于 

13分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

每天网络变得更丰富和沉浸,我们意识到,对于我们的业务,移动应用程序是至关重要的。 虽然我们的应用将继续提供一个很好的设备体验,打开我们的令人惊奇的新闻平台。

创建应用程序的许多公司一样,我们理解了在web上扩展应用程序的机会。 当我们开始这个项目时,我们不认为在web上提供这样丰富的经验是不可以能的。 到目前为止,web上的触摸体验已经远远远远超过了基本的刷新命令,并受到应用开发模型的限制。

在研究我们的选择时,我们快速实现了 IE 10真正是最好的选择。 我们不确定这是否真正工作,而且实际上我们是一个有点怀疑的。 但是在 IE 和开发人员团队和像素实验室的开发团队之后,我们被IE10吹到了 table。

网络的未来确实是应用加上网络,我们对未来的第一步感到自豪。 因这里,在推向前进的情况下,我们非常兴奋不仅仅是我们的故事,而是一些helfpul的代码。

随处阅读

响应

脉冲任务让你的新闻在任何地方都可用。 对于网络来说,这意味着在任何设备和屏幕上都有很好的体验,这是非常不同的屏幕。 幸运的是,HTML5和CSS3中出现的特性使得这个大胆的目标成为可能。 我们希望单个"响应"代码能够适应它所使用的位置,但是,我们很惊讶这是多么容易。

是什么让这个过程如此流畅? 毫无疑问,这主要是现代web的印象深刻,社区驱动最佳实践和浏览器的快速创新。 另一方面,有一些智能选择是不同的。 下面是一些关于我们前面做什么以及如何使用最少的工作来响应一个响应的站点的注释:

媒体查询

媒体查询是使响应性网络工作正常工作的魔力。 有很多精彩的概述,因此我们将把它放在一行中: 媒体查询允许你在满足某些条件时编写仅"激活"的CSS。 对于 Pulse,我们基本上只需要一个单一的媒体查询规则。 它看起来像这样:





@media screen and (max-width: 640px) {


 /* our small-screen rules go here */


}



我们受益于每个访问者提供相同的基本功能,所以站点的完整版本和移动版本主要相关。 使这个过程变得简单。 一旦我们有了媒体查询,我们就简单地添加了定义这些变化的补充 CSS。 实际上,你可以在任何桌面浏览器中看到这一点,方法是将浏览器调整到 LESS,而不是 640px ( 或者鼠标在图像 below 上进行预览)。

响应的Javascript

媒体查询做了 95%个工作,但还有一些新的代码驱动交互,我们只希望在更小的屏幕上启用。 其中一个例子是一个新的交互,用来显示或者隐藏左边的源菜单。 在完整版本中,菜单总是存在的。 在移动版中,你只能在点击 header的任何地方后看到它。 我们需要一点Javascript来实现这一点。

很不幸,媒体查询是一个CSS概念,在脚本中没有直接等价的。 我们必须发明自己的。 我们首先考虑了一些库,它允许你在 Javascript (。ensuire.js 是最受欢迎的) 中构建媒体查询,但最终我们实现了需要。





$(window).resize(function () { 


 isMobile = ( $(window).width() <= 640 );


});



Ems

Ems似乎与开发人员一样,对于每年的开发人员来说都是一样的。 如果这是你的新术语,下面是快速版本: "em"是像像素或者英寸一样的度量单位。 关于ems的有趣之处在于,对于本地文本大小,它们总是 relative。 实际上,"em"被调用,因为传统上它是由大写M的宽度定义的。 幸运的是在实践中它更容易预测。 在CSS中,一个 em 相当于当前点的大小。 因此,16点字体的" 1em"将是 16点。

Ems可能有些混乱,它们的"层叠"性质会使它们难以使用。 因此,大多数时候我们用像素值来定义字体大小,边距和距离。 那是 true 脉冲但有一个大的例外: 文章查看器当你读取脉冲时,你查看纯式磁驱动的版本。 视图中的所有类型。页边距和其他距离都定义为 relative em 值。

我们最初是为了轻松管理用户大小偏好设置,但这是我们的响应站点的重要动作。 对于移动设备和 Xbox,我们需要调整文本的relative 大小。 手机上,人们习惯于关闭观看,通常在屏幕上需要更多的像素。 在Xbox上正好相反。 em 单元通过调整单个值。上下或者下降,根据用户的环境提供这些修改的灵活性。 高 DPI

创建响应性站点的easy-to-forget方面是处理高分辨率和高像素密度显示。 有许多策略,它们解决的问题同样不同,但是我们使用的两种步骤方法如下:

步骤 1: 声明坐标系( Viewport )

当现代显示变成"像素稠密"时,你不能再计算设备上的像素和代码中指定的像素的1: 1 相关。 这过去只是一个移动的考虑,但是最新的桌面和平板电脑浏览器也变成了"高 dpi"了。

如果你不挑剔,浏览器会为你做一些决定。 下面的示例演示如何在桌面浏览器中使用浏览器,使站点在桌面浏览器上工作,然后将它的放到桌面大小,然后将它的放到设备像素。 这意味着你调用" 1px"的内容叫做 480/1024 或者 0.46. 不清楚在这种情况下你不需要。 你可以假装你的网站是以桌面大小呈现的,浏览器做了剩下的事情。

更常见的( 这当然是脉冲的情况) 需要更大的尺寸控制。 许多移动浏览器提供了这样做,你可以使用viewport标签指定你的站点首选项。 例如,例如,你打算始终呈现网站的内容,如同它的320px 宽一样。 你可以使用这样的标签:


<meta name="viewport" content="width=320">



这就像我们先前描述的默认行为,但不是使用默认大小 1024px,我们指示浏览器在 320中呈现内容。 另一个常见做法是让浏览器只使用设备像素的实际值。 为此,你将使用这样的标记:


<meta name="viewport"



    content="width=device-width">



这指示浏览器以设备本身的本地分辨率呈现内容。 换句话说,使用实际像素 ! 实际上,大多数设备都解释这意味着使用"自然"像素。 高密度屏幕上的像素可能比传统像素小得多。 通过使用"width=device-width",你说让 1px 感觉像 1px 应该是( 即使这个 1px 是由更多的)。

这就是我们为脉冲做的。 这是一个不错的方法,因为 1px 在每个设备上都达到了 1px。 这需要很多猜测工作。

步骤 2: 使用高dpi图像

找到viewport后,下一步是使用高DPI资产。 在高分辨率屏幕上,传统分辨率图像可能出现pixellated或者模糊。

有几种处理这个问题的策略,总的来说,它仍然是一个非常新的问题( 但随着新设备和操作系统开始采用高 DPI,越来越重要)。 我们用脉冲输出。 由于它的简单的外观和感觉,应用程序中的大多数UI图像都是单色图标的形式。 虽然我们可以为每个( 以及它们的所有状态) 创建高分辨率图像,但我们选择采用一种不同的方法: icon 字体 !

icon 字体就是: 包含图标而不是字母的字体。 我们喜欢这种方法,因为它是超级 compact,有很多优点,从很多浏览器精细的文本呈现。 毕竟,从浏览器的角度来看,它只是文本。 最后,我们有一个 icon 字体,带有从箭头和社会图标到徽标的所有符号。 向上扩展

同时我们准备更小屏幕的脉冲,我们也有机会预览 IE 上的网站。 这个网站已经工作了事实上,它工作得很好。 经过一些关闭评估,我们发现了一些小的调整,但即使这些都是精细的: 我们对电视显示器做了一些颜色调整,我们稍微增加了一些文本,从而更容易阅读。 但是就是这样,否则,这个网站就是 !

前卫布局

为网站建立脉冲带来了很多技术和设计挑战,但其中最有趣的是主页上的布局。 we'内容优先'approach我们一直在使用方法,把它放到网站上,用内容填充屏幕,用大图片和edge-to-edge内容创建浏览体验。

在任何地方,这可能是一个令人生畏的设计挑战,但在网络上却特别棘手。 我们意识到我们需要一个布局引擎,可以智能地处理大量的设备和屏幕大小: 从移动设备上的4-inch 屏幕到 30-inch 监视器上的全屏幕浏览器的所有内容。

除这里之外,对于我们的布局挑战,还有另外一个维度,我们希望脉冲主屏保持智能和规划。 我们想在决定如何将内容放在屏幕上的决定中保持一个'人类元素'。

Tiles.js

这些需求的十字路口变成了 Tiles.js. 它是一个基于模板驱动的布局引擎,我们只是为了脉冲而构建。 我们使用模板来控制布局的细节,然后由布局引擎精细调整大小并确保我们填充屏幕 edge-to-edge。

定义模板

Tiles.js 是非常容易使用的( 有趣的是)。 我们所需要的第一件事是定义布局的简单方法。 我们浏览了几个选项。 我们的初始尝试很容易解析,但很难编辑和阅读,我们很快意识到模板可以通过可以视化方式更有用。

我们最终得到了一些事情,( 我们只在) 不太远于一个CSS网格建议的语法。 它看起来像这样:

下面是它的工作原理:模板是一个字符串的array,它的中每个字符串表示网格中的一行。 我们解析 array 并在发现相邻单元格中的重复字符时形成'平铺'。

所以,在左边的例子中,一个 2 tile的形状,b x2 tile tile和c tile的形式 tile tile。 你可以使用任何你想要的字符,但我们倾向于使用大写字母作为约定。

句点是特殊的。它们保留为始终表示单个单元格。 所有空白都被忽略( 如果你把字符放在一起的话,看起来很容易阅读)。

HTML5视频资源