微点交流论坛 - 灌水区 - IE10让你的网站更多曝光

最后温柔
新手上路

积分 5
发帖 5
注册 2010-6-26

#1 IE10让你的网站更多曝光

Windows 8允许开发者将自己的网站与系统紧密整合在一起，比如，如果用户喜欢你的网站，他可以将网站固定到自己的“开始”屏幕中，你的网站就成为一个磁贴随时向他推送信息，用户点击这个磁贴就会直接通过 Internet Explorer 10 打开你的网站，大大提升了用户对你网站的关注度，为你创造更多的曝光和商业机会。

一、在Windows 8 中固定网站

Windows 8“开始”屏幕是查找和保持连接所有喜欢的应用和内容的最佳位置。应用的磁贴是随着活动实时更新的，显示了最新的和定制的内容，让您可以了解与你相关的最新动态。我们撰写了一篇介绍Windows 8 的 Internet Explorer 10 Metro 风格的浏览体验的博客文章（http://blogs.msdn.com/b/b8/archi ... view-with-ie10.aspx）。这篇文章详细描述了 Internet Explorer 10 的网站固定及其在 Windows 8“开始”屏幕上的使用，以及以网站为中心的视图并通过锁屏提醒通知来提醒您有新内容可用。我们还从Web 开发人员的角度详细介绍了如何支持网站固定。

1. 固定网站比收藏夹更好用

Windows 用户花费大量时间上网冲浪，我们通过 Windows 用户访问跟踪测试（参见官网：http://www.microsoft.com/products/ceip/EN-US/default.mspx）知道，用户经常会反复访问相同的一些网站。Windows 8 的固定网站功能使可以更快、更轻松地返回喜欢的网站。利用锁屏提醒通知，网站磁贴可以实时更新最新的信息，让用户知道有新内容可用。

开发人员可以利用固定网站来加强网站与用户之间的联系，直接在Windows“开始”屏幕上固定网站还有助于提升网站的品牌知名度。我们发现在Windows 7 的 Internet Explorer 9 中，使用此功能的网站的访问量提高15%－50%。在Windows 8 中，网站磁贴更新为用户提供了更好的体验，用户甚至不必在浏览器中打开网站。

以下两幅屏幕截图显示了网站固定磁贴和锁屏提醒通知：

2. 以网站为中心的网站固定磁贴

作为网站开发人员，您可以提供一个网站图标（favicon），Internet Explorer 10 将在浏览器中使用该图标表示您的站点，在地址栏、新的标签页和“开始”屏幕上均使用该图标。当将网站固定到“开始”屏幕上时，Internet Explorer 10 使用网站的大图标（32 x 32 像素）来标识网站，这与Internet Explorer 9 用来固定任务栏的方式是相同的。

将一个网站固定到Metro 风格的IE10 中，显示了网站磁贴的预览Internet Explorer 10 从图标中提取主色并自动使用该颜色作为“开始”屏幕上磁贴的背景颜色。一种用于创建图标的工具是x-icon editor。使用该工具可以为您的网站创建32x32 像素的图标。它还可以将图像转换为图标文件格式（.ico）。然后可以使用传统的favicon 标记来关联 .ico 文件。<link href="testdrive.ico"rel="shortcut icon"/>



3. 可以在后台更新锁屏提醒通知

Windows 8 可以在“开始”屏幕的磁贴上动态显示内容。这非常适合于显示有更新内容的通知。例如来自其他用户的新消息（电子邮件和社交网络）、购物网站的最新打折信息、新闻网站的新文章，等等。

利用Internet Explorer 10 和Windows 8，您可以直接在网站固定磁贴上提供锁屏提醒通知。这意味着用户可以无需在浏览器中打开网站即可获取网站的更新。例如使用Windows 8消费者预览版的Internet Explorer 10 来固定Fresh Tweets demo（http://ietestdrive2.com/pinnedsites/）。网站固定磁贴将定期更新，并通知用户何时有新的微博发布。

后台通知需要网站提供的组件包括：(1) 锁屏提醒通知XML，这是一个XML 响应，它描述了 Windows 的锁屏提醒通知；(2) 网站固定元标签，这是网页标记，它指向 Windows 动态显示通知的位置和动态显示的频率。

1) 锁屏提醒通知 XML

Windows 将处理动态显示和锁屏提醒通知的绘制。Windows 动态显示锁屏提醒通知XML，这个XML 描述了网站固定磁贴的视图。badge XML schema（http://msdn.microsoft.com/en-us/ ... /apps/br212849.aspx）定义了这个简单的XML 响应。例如，为了用数字“3”来更新磁贴，我们发送以下XML：

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

锁屏提醒可以是数字或图像字符，例如“警告”和“新消息”提示。有关锁屏提醒可以显示的内容的完整列表，请参见MSDN 上的Choosing a badge image（http://msdn.microsoft.com/en-us/ ... /apps/hh761458.aspx）。



2) 网站固定元标签

下一步是将锁屏提醒通知XML 关联到网页。Internet Explorer 10 使用元标签“application-name”来确定网页是否支持网站固定功能（例如通知和跳转列表）。为了支持锁屏提醒通知，需要在标记中包含一个特定的(msapplication-badge)的元标签，并指定锁屏提醒通知XML 的URL 和Windows 对其更新的频率。IE 在固定时将检查页面上是否存在“msApplication-badge”元标签，之后从网站固定磁贴启动网站时也会进行这项检查。

<meta name="msapplication-badge" value="frequency=360;pollinguri=

http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360"/>

值参数有两个部分：polling-uri（必需）和frequency（可选）polling-uri 是绝对URL，Windows 将从它请求上面定义的简单XML 文档。Frequency 是可选的，它表示两次更新之间的分钟数，必须使用以下值：

　　　  30（Windows 将每隔30 分钟变换一次URI）

　　　  60（1 小时）

　　　  360（6 小时）

　　　  720（12 小时）

　　　  1440（1 天，这是默认值）

　　　如果省略frequency，或者未使用上面列出的值，则将默认每天更新一次（1440分钟）。

3) 用于更新锁屏提醒通知的开发人员 API

您还可以直接从网页清除和更新网站的锁屏提醒磁贴，以确保网站磁贴是最新的。当用户从“开始”屏幕启动网站固定磁贴时，网站将运行其自己的一个名为“SiteMode”的会话，并且可以使用以下JavaScript 函数来更新锁屏提醒：window.external.msSiteModeClearBadge()将清除磁贴上的锁屏提醒通知。在Fresh Tweets demo（http://ietestdrive2.com/pinnedsites/）中，当用户收到一个通知并点击磁贴来启动浏览器时，网页使用msSiteModeClearBadge()来清除磁贴上的通知。下次磁贴获取锁屏提醒更新而变亮时，用户就会知道有新内容可用。window.external.msSiteModeRefreshBadge()调用Windows 来使用变换URI更新网站的锁屏提醒。例如，用户看到网站固定磁贴显示有3 条未读消息，单击磁贴返回网站。如果用户只读了第一条更新，您可以触发一次更新，以便锁屏提醒反映出正确的已读/未读的消息数（2 条未读）。

在Windows 8 消费者预览版中，这两个API 函数仅能用于运行在本地局域网或受信任的网站区域中的网站。这一问题将在下一个预览版中解决。要在您自己的网站上测试消费者预览版中的这些API，请使“Internet 属性”对话框中的“安全”选项卡将网站的域名添加到受信任的网站列表中。



4) 桌面任务栏通知

Windows 8 和 Internet Explorer 10 仍然可以在桌面任务栏上使用以图标覆盖形式出现的通知来进行站点的固定。这种形式的通知不适用于Windows 8“开始”屏幕上的网站固定。Windows 8 将以一种省电模式处理“开始”屏幕上的所有磁贴通知。

5) 使用跳转列表在网站中快速导航

很多顶级网站，例如NYTimes.com、CNN.com 和Amazon.com，都支持Internet Explorer 9 的网站固定功能，例如通过跳转列表（http://windows.microsoft.com/en- ... atures/pinned-sites）

来获取特定任务或网站的部分内容。在Internet Explorer 10 中，跳转列表作为导航栏的一部分提供，以一种“友好触摸”的方式提供了网站的导航。当用户从“开始”屏幕打开网站时，固定按钮将显示此站点有跳转列表可用。

跳转列表的显示方式与Internet Explorer 9 在Windows 7 任务栏上的显示方式是相同的。您可以通过网页标记将静态任务添加到网站的跳转列表中，也可以根据用户交互动态添加。Windows 8 锁屏提醒和跳转列表都是以网站为中心的功能。每个完全限定域名有且仅有一组变换数据和跳转列表数据。

二、链接预览

链接预览功能扩展了Windows8 的分享体验。当用户从超级按钮栏（Charm Bar）中选择“分享”时，Internet Explorer 会生成一个链接预览——这是一个分享的数据对象，里面包含当前网页的强化信息。除了页面的URL，链接预览还包含网页的标题、描述、缩略图。为了生成这个链接预览，Internet Explorer10 会寻找特定的HTML 标签。要想利用这个功能，可以在网站的HTML 中包含以下支持链接预览的标签。

1. 标题标签

标题内容的长度限定在160 个字符以内，更长的标题在链接预览中会被截断。

<meta name="title" content="My Title Text" />

<title>My Title Text</title>

2. 描述标签

描述内容的长度限定在160 个字符以内，更长的描述在链接预览中会被截断。

<meta name="description" content="My description text." />

3. 缩略图标签

图片URL 的长度限定在2048 个字符以内。

<link rel="image_src" href="my_image_link.jpg" />

<meta name="image" content="my_image_link.jpg" />

<meta name="thumbail" content="my_image_link.jpg" />

<meta property="og:image" content="my_image_link.jpg" />

以上这些标签可以任意组合，但我们推荐每类至少使用一个，以创建尽可能好的链接预览。如果使用了同一类的多个标签，则链接预览使用网站HTML 中列出的第一个标签。

IE9增加了可以将网站固定到Win7任务栏的特性，而IE10更是可以将网站固定到Win8的开始屏幕，并且同样可以动态更新，提升网站的体验。同时这些功能可以有效的帮助网站留住用户，成为忠实用户，赶快动手让你的网站支持这些新特性吧，更多的内容可以参阅IE10兼容性白皮书，相信你会得到更多帮助，下载地址：http://vdisk.weibo.com/s/bKgeq

※ ※ ※ 本文纯属【最后温柔】个人意见，与【微点交流论坛】立场无关※ ※ ※

2012-11-13 14:51

动人歌声
新手上路

积分 2
发帖 2
注册 2012-11-13

#2

现在的水平太落后了都追不上时代潮流了

※ ※ ※ 本文纯属【动人歌声】个人意见，与【微点交流论坛】立场无关※ ※ ※

2012-11-13 22:37

你笑天
新手上路

积分 5
发帖 5
注册 2010-4-2

#3

嗯，也想用用IE10，好好的感觉下

※ ※ ※ 本文纯属【你笑天】个人意见，与【微点交流论坛】立场无关※ ※ ※

2012-11-14 09:17

清凉果
新手上路

积分 5
发帖 5
注册 2010-8-2

#4

WIN8最吸引我的地方还是他的界面。

※ ※ ※ 本文纯属【清凉果】个人意见，与【微点交流论坛】立场无关※ ※ ※

2012-11-15 08:48

雨滴儿
新手上路

积分 14
发帖 14
注册 2010-6-14

#5

没网站的人悄悄的路过一下喽

※ ※ ※ 本文纯属【雨滴儿】个人意见，与【微点交流论坛】立场无关※ ※ ※

2012-11-16 16:45

论坛跳转:

可打印版本 | 推荐 | 订阅 | 收藏

[ 联系我们 - 东方微点 ] 北京东方微点信息技术有限责任公司福建东方微点信息安全有限责任公司闽ICP备05030815号