【IT168 厂商稿】写在前面的话
首先你肯定会产生疑问，什么是固定网功能?
总体来讲呢，我们的固定网功能着眼于改变网站应用的访问方式——从任务栏启动。这种令用户耳目一新的启动方式将会给予用户这样的体验：这些网站应用是本地的，实实在在的存在于我的电脑上。这样的感觉将会使得网站应用取代以往的浏览器成为用户体验的中心，继而，会带来用户粘性和网站品牌标识度的提升。
IE固定网站模式总共包括五项功能
v 基础功能
· 高清图标
· 静态跳转列表
v 高级功能
· 动态跳转列表
· 自定义图标覆盖
· 智能缩略图
整体效果图
Figure 1整体效果图
- Figure 2智能缩略图(豆瓣)
每个锁定到任务栏上的网站都有跳转列表。有些还有缩略图预览控件(如播放或暂停视频)，它们位于缩略图预览下面。 有些锁定的网站有图标提示，提供有关网站状态的信息，如收件箱中的新消息数。
而对于用户来讲，完成固定功能也非常简单，只需要将网站的选项卡拖动至任务栏。
也许你会问这么好的效果是不是非常难以实现呢?
不，仅仅需要几行HTML和JavaScript代码, 你就可以看到这种神奇的效果。下面我将会展示如何完成这五种功能，还有一些其他的功能实用方法的创意示例，以供参考。
这次咱们先来看一下基础功能如何实现。
功能实现
创建高清图标
一旦用户固定了你的网站，他们就成为了你最忠实的用户。 高清图标作为网站的最直观入口，承担着建立网站第一用户印象的责任。
区别于一般的 16x16 图标，使用32x32或者64x64的图标更显美观大方，带来更加良好的用户体验。
Favicon:
http://en.wikipedia.org/wiki/Favicon
Figure 3基础图标和高清图标效果对比图
高清图标HTML实现
<!-- Make sure the href of the link tag points to the icon you created -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-starturl" content="http://buildmypinnedsite.com" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />
代码使用方法
1. 上传图标
2. 使用 tag (line 4) 将链接指向图标。
3. 使用 标签定义当用户使用固定功能时候网站的操作。
· application-name (line 5): 位于状态栏上，将会直接呈献给用户的名称。
· msapplication-starturl (line 6): 网站起始访问位置(类似主页)
· msapplication-navbutton-color (line 7): 选择跟图标相匹配的颜色使得浏览器风格更贴近于你的站点.
· msapplication-window (line 8): 如果你需要，可以定义网页窗口默认大小.
· msapplication-tooltip (line 9): 直接展示在Windows Start 菜单或者桌面上.
将上面的代码粘入网站的 HTML 内
5. 更多细节访问 Declaring Site Metadata on MSDN以及 http://buildmypinnedsite.com/zh-hans?WT.mc_id=aff-n-cn-dca-IE9Oct-IT168#step_1
Figure 4 游戏类网站 静态跳转列表示例
添加静态跳转列表
静态跳转列表可以用来推荐用户到网站热门常见位置，可以显著提升这些链接的点击率。
推荐放置链接
· 网站版块导航
· 个性化推荐
所有的静态列表都可以通过储存在网站文件内的URL静态地址进行直接访问，所以静态列表并不需要时常变换。但是，我们可以通过更新meta标签来实现静态列表的更新，而这些更新将会在下一次打开固定网站时生效。
静态跳转列表HTML实现
Tasks list on our pinned site's Jump List menu -->
<meta name="msapplication-task"
content="name=Develop for Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/startdeveloping;
icon-uri=/favicon.ico" />
<meta name="msapplication-task"
content="name=Attend a Web Camp;
action-uri=http://www.beautyoftheweb.com/#/camps;
icon-uri=/favicon.ico" />
<meta name="msapplication-task"
content="name=Download Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/download;
icon-uri=/favicon.ico" />
HTML代码使用步骤：
1. 上传网站图标 (.ico)
2. 为每一个静态跳转链接创建一个 标签项
3. 对于每一个都有一个 name属性用来设置 msapplication-task以及 content 属性 包含以下内容
· name (line 05): 实际出现在静态列表内的链接名称.
· action-uri (line 06):点击时的跳转地址(全地址或者相对地址)
· icon-uri (line 07): 图标 (.ico). (全地址或者相对地址)
4. 将上面的代码粘入网站的 HTML 内
5. 更多细节访问 Declaring Site Metadata on MSDN.
Figure 1 游戏类网站 动态跳转列表实例
添加动态跳转列表
动态跳转列表一般用来引导用户跳转到个性化板块链接或者即时性消息链接。
图中(Figure 5)以游戏类网站为例，一些即时的游戏信息可以通过动态跳转列表来通知用户。
动态跳转列表的JavaScript实现
// In the example below, we're going to generate a list of Pinning Steps to display
// in our Dynamic Jump List based on an HTML list of Pinning Steps here on buildmypinnedsite.com
// Since not every browser supports site pinning, we’re wrapping our code in a
// try/catch statement to keep it from causing errors in other browsers.
// This is something you'll want to do anytime you use window.external methods
try {
// First, we need to check if the browser is in already Site Mode
if (window.external.msIsSiteMode()) {
// Here we clear the Jump List to remove any existing items (optional)
window.external.msSiteModeClearJumpList();
// Next we're creating a Custom Jump List Category to hold our Dynamic Jump List items
window.external.msSiteModeCreateJumpList("Build My Pinned Site");
// Here we're grabbing the list of Pinning Steps from an unordered list on this site
// and placing them in an array
var steps = document.getElementById("steps")
var stepsArray = steps.getElementsByTagName("a");
// Here we're looping through our array of steps in reverse.
// Dynamic Jump List items are added at the top of the list,
// in the reverse order from how they appear in the script.
for (var i = stepsArray.length - 1; i >= 0; i--){
var title = stepsArray[i].innerHTML;
var href = stepsArray[i].href;
// msSiteModeAddJumpListItem adds the actual Dynamic Jump List item
// Here we're passing it a title, destination URL, icon path and an optional parameter
// that tells the Jump List to open the destination URL in
// a new window or the current window
window.external.msSiteModeAddJumpListItem(title, href, "/favicon.ico", "self");
};
}
} catch (ex) {
// Fail silently.
}</script>
HTML代码使用步骤
1. 上传网站图标 (.ico)
2. 因为并非所有的浏览器都支持固定网功能，所以我们在JavaScript try/catch内部调用window.external对象(line 8)
3. 调用msIsSiteMode(line 11)来检查一个网站是否被固定以及动态跳转列表是否可以被添加。
4. 通过 msSiteModeCreateJumpList (line 15) 创建一个动态跳转列表. 这项名称将会出现在你添加动态列表项目之后出现在其顶端。.
5. 通过msSiteModeAddJumpListItem (line 34) 添加一个动态列表项目，需要以下参数
· name : 跳转项名称.
· action-uri : 跳转地址.(全地址或者相对地址)
· icon-uri :图标地址. (全地址或者相对地址)
6. 动态列表的排序与在代码中出现的顺序相反.
7. 复制粘贴上述代码到HTML代码的 部分之前.
8. 更多细节访问 Declaring Site Metadata on MSDN.
总结
通过以上简单的几步，我们已经完成了IE9固定网的基础功能——高清图标和静态跳转列表，以及高级功能中的动态跳转列表。短短几行代码就能实现立竿见影的功能，何乐而不为呢?马上行动起来吧!
在接下来，我还将会介绍IE9固定网高级功能的实现方法，敬请大家关注。
更多细节请访问：http://buildmypinnedsite.com/zh-hans?WT.mc_id=aff-n-cn-dca-IE9Oct-IT168
