2010年11月23日星期二

John Resig 见面会视频

上个星期 John Resig 来到了中国,谋智网络跟 CSDN 组织了一场 John Resig 见面会。 John Resig 在大会上介绍了 jQuery 的两个新特性(暂时还是插件): Data Link 以及 Templates 。引入这两个插件后,前端的数据呈现及交互将变得更简单,开发数据驱动型 Web 应用的成本也会随之而降低,估计将来我们能够见到更多基于 jQuery 的数据交互型 Web 应用。

此外, John Resig 还花了半个小时讲解 jQuery Mobile 。其中一项核心概念就是,基于 jQuery Mobile 开发的 Web 应用能够优雅地降级,自动适应功能比较弱的浏览器,同时又保证了在一流浏览器上的最佳体验。具体的做法与 YUI 的浏览器分级方法一样,将浏览器分为 A 级、 C 级和 X 级。确保 A 级的到最好支持,同时保证 C 级得到最低支持,此外假设 X 级能够获得一定支持。最后, jQuery 不会专门为了 jQuery Mobile 而多增加一个分支。无论你针对什么浏览器进行开发,都只会有一个版本的 jQuery 。如果有必要,你可以自己到 jQuery 的 github 获取具体子模块的代码并自行组合。


YouTube 高清Youku 高清

如果你对这一类的活动视频感兴趣,欢迎到 Twitter 上 follow 我: @CatChen 。将来有同类信息我将会首先发布到 Twitter 上。

2010年11月16日星期二

如何让你的网站支持 IE9 Pinned Site (Part 2 - 实战)

该如何展示 IE9 Pinned Site 呢?我可以写一个新的应用,完全是为了展示 Pinned Site 的特性,但这样就像是为了实现这些特性而利用这些特性。所以我想还是升级一个现有的网站好了,这样更能说明 Pinned Site 是如何起到优化用户体验的作用的。

我选择了 hack 现在的百度地图。由于 IE9 正式版还没有发布,所以我 hack 的代码暂时也不能发布到线上,只能私下玩玩。在这里,我选择使用 Fiddler 来替换百度地图首页代码,从而实现 hack 的效果。

添加静态信息

添加静态信息是最容易的,只要写几个 meta 标签就可以了。那么我们就把百度地图的相关信息填充上去吧。“任务”里面放什么链接呢?考虑到用户使用地图,通常就是搜索几类信息:地点、公交、驾车、周边,我们就把这几类搜索的快速入口链接放上去吧。不过,由于百度地图本身没有实现这几个快速入口的地址,所以我们需要在 JavaScript 里面实现一些小 trick 。

<meta name="application-name"
      content="百度地图" />
<meta name="msapplication-tooltip"
      content="使用百度地图浏览地图、搜索地点、查询公交驾车线路" />
<meta name="msapplication-window"
      content="width=1024;height=768" />
<meta name="msapplication-task"
      content='name=搜索;
               action-uri=./#json={"type":"poi"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=公交;
               action-uri=./#json={"type":"bus"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=驾车;
               action-uri=./#json={"type":"drive"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=附近;
               action-uri=./#json={"type":"circle"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-navbutton-color"
      content="#2319DC" />
<meta name="msapplication-starturl"
      content="./" />

我选择的 trick 时,在百度地图首页地址后面加上一个锚点,锚点内含一个 JSON ,用里面的信息表明使用哪个分类搜索。在文章的后面会说明如何用利用 JavaScript 识别 JSON 然后做相应的处理,在这里我就不做解释了。

加入了上述信息后,当我们把百度地图固定到任务栏上,就能看到对应的图标和 Jump List 。

Baidu Map Jump List

添加动态信息

接下来我们要添加动态信息。百度地图适合添加什么样的动态信息呢?考虑到用户可能经常需要搜索相同或相似的路线,我们可以把用户的搜索记录保存下来,并放到 Jump List 的一个名为“历史记录”的分类里面。

要实现这样一个分类,首先要记录用户点击“百度一下”进行搜索时文本框内的信息,然后再把这些信息写到 Jump List 里面去。先看看如何捕获用户点击“百度一下”按钮的事件吧。

$('#form1').submit(function () {
  var historyItem = {
    'type': 'poi',
    'word': $('#PoiSearch').val()
  };
  addHistoryItem(historyItem);
  updateJumpList();
});

我们监听表单的提交事件,然后把搜索类型和文本框内的信息保存到一个 JSON 里,然后把 JSON 存到 localStorage ,最后更新 Jump List 。如何把 JSON 保存到 localStorage ,以及在将来从 localStorage 中取回 JSON ,这些都不属于本文的话题,大家可以看看资源下载一节的源代码,这里就不展开讨论了。我们关注的是如何将 JSON 中的数据添加到 Jump List 中去。

var updateJumpList = function () {
  var history = loadHistory();

  try { /* try is for IE9 beta only and RTM will change */
    if (window.external.msIsSiteMode()) {
      window.external.msSiteModeClearJumpList();
      if (history.length > 0) {
        window.external.msSiteModeCreateJumpList('历史记录');
      }
      for (var i = 0; i < history.length; i++) {
        var historyItem = history[i];
        switch (historyItem.type) {
          case 'poi':
            window.external.msSiteModeAddJumpListItem(
              '搜索' + historyItem.word,
              'http://map.baidu.com/#json=' +
                JSON.stringify(historyItem),
              'http://map.baidu.com/favicon.ico');
            break;
        }
      }
      window.external.msSiteModeShowJumpList();
    } else {
      /* it’s not in side mode */
    }
  } catch (e) { console.dir(e); }
};

我们把历史记录读取出来,然后检查现在是否在 IE9 中,再检查现在是否在 Site Mode 中(也就是用户已经把站点固定到任务栏了)。由于 IE9 Beta 的缺陷,无法通过特性检查来得知浏览器是否支持 Site Mode ,所以需要使用 try catch 模式,这将在正式版中修复。

接下来,我们遍历历史记录,根据类型信息组合 Jump List 项目的文本信息和地址,然后把项目添加到 Jump List 上。地址的做法同样是使用锚点加 JSON ,到底这个 JSON 在页面打开时是如何解释的,请大家看资源下载一节的源代码吧,我就不浪费篇幅解释了。

Baidu Map Jump List

这就是完成后 Jump List 的样子。

资源

代码

完整代码示例下载

视频

这是我在北京 PDC Party 做的演讲,里面的内容与文章的内容相当,大家把这当作补充材料。当天去参加了活动的人,也可以在我文章中直接获取到代码。

Youtube 高清
Youku 高清

小结

希望通过这两篇文章让大家了解到,要实现 IE9 Pinned Site 其实并不难,但它可以帮助你提升网站的用户体验,让用户更方便快捷地使用你的网站功能。接下来,我会分享更多关于 IE9 和 HTML5 的内容,欢迎订阅本博客

如何让你的网站支持 IE9 Pinned Site (Part 1 - 理论)

Windows 7 任务栏有何不同

自从 Windows 95 开始,任务栏就一直没什么变化,都是一个个长条表示正在运行的应用程序,直到 Windows 7 。 Windows 7 的任务栏发生了巨大的变化,这个变化其实就是更像 Mac OS X 的 Dock 了。无论是否在运行的应用程序,都可以在任务栏上占一个位置,并且这个位置可以固定下来,让用户可以更方便的操作这个应用程序。从此,任务栏由单向地提供应用程序运行状态信息,变成了双向——用户也能随时随地地操作某一个应用程序。这就弱化了系统托盘的角色,过去要通过系统托盘做的各种交互,现在直接坐到任务栏上就可以了。

我们以最新版的 Windows Live Messenger 2011 来看看, Windows 7 的任务栏都能干什么:

Taskbar

我们可以看到,在 Windows Live Messenger 的图标上,叠加了一个绿色的小图标,表示用户当前在线。过往,这个信息只能显示系统托盘里,现在可以直接在任务栏上显示了。

Live Messenger Jump List

右键点击 Windows Live Messenger 的图标,会出现 Windows 7 特有的 Jump List 。它跟过往上下文菜单的区别在于,开发者能够灵活定制里面的内容。例如说, Windows Live Messenger 就在此处显示“常用联系人”(我已经把我的联系人列表隐藏掉),同时显示若干“任务”。在过往的 Windows 版本中,开发者往往需要定制应用程序图标的上下文菜单,或者定制系统托盘图标的上下文菜单,来达到同样的效果。

Live Messenger Thumbnail

此外,当你把鼠标悬停在 Windows Live Messenger 图标之上时,除了显示预览外,还会看到预览下方的几个快捷按钮。用户可以在不调出 Windows Live Messenger 的前提下更改在线状态。

Internet Explorer 9 如何用上新特性

不要以为上面所提到的交互方式,只有 Windows 本地应用程序能够使用。在 IE9 里面,通过简单的 meta 标签声明,也能定制网站的任务栏图标交互方式。当然这是有前提的,就是用户要把网站固定到任务栏上,也就是所谓的 Pinned Site 。

要让站点变成 Pinned Site 很简单,让用户按着本页的标签或者图标拖到任务栏上就可以了。然后站点就会从普通的浏览器窗口里面脱离出来,成为一个独立的浏览器窗口,并且有自己对应的任务栏图标。

这时候的任务栏图标跟普通的 IE9 没有什么区别,只是图标变成了站点的 favicon (假如有的话)。需要加上新功能的话,就需要额外加一些代码。

使用 meta 标签

首先,我们可以加入如下一组 meta 标签:

<meta name="application-name"
      content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip"
      content="Start the page in Site Mode"/>
<meta name="msapplication-starturl"
      content="http://example.com/start.html"/>
<meta name="msapplication-window"
      content="width=800;height=600"/>
<meta name="msapplication-navbutton-color"
      content="red"/>

他们制定了站点的名称、提示信息、启动地址、窗口大小、导航按钮颜色。

然后,我们可以再加上一组 meta 信息,使得 Jump List 出现“任务”一栏,用于显示用户常用的固定链接。

<meta name="msapplication-task"
      content="name=Task 1;
               action-uri=http://host/Page1.html;
               icon-uri=http://host/icon1.ico"/>
<meta name="msapplication-task"
      content="name=Task 2;
               action-uri=http://microsoft.com/Page2.html;
               icon-uri=http://host/icon2.ico"/>

这使得 Jump List 中出现两个任务,分别拥有对应的图标和描述文字,指向对应的地址。

添加 JavaScript

接下来我们可以添加一些动态内容。这些内容根据当前用户的登录状态,或者用户的浏览历史记录生成,因为无法使用固定的 meta 标签来声明,只能使用 JavaScript 来动态生成。

Jump List 除了固定有一个“任务”栏目外,我们还可以增加一个自定义栏目,里面放进若干个链接(具体数目由用户的 Windows 任务栏选项决定)。

window.external.msSiteModeCreateJumplist('List1');
window.external.msSiteModeAddJumpListItem(
  'Item 1',
  'http://host/Item1.html',
  'http://host/images/item1.ico');
window.external.msSiteModeShowJumplist();

在站点的 favicon 之上,可以叠加一个图标表示状态。可以好像 Live Messenger 那样表示在线状态,也可以用于表示有新消息。

window.external.msSiteModeSetIconOverlay(
  'http://host/images/overlay1.ico',
  'Overlay 1');

此外,缩略图下方的按钮也可以定制,最多放下 7 个按钮。在创建按钮时你能获取到一个 id ,类似 setTimeout 返回的 id ,你要将它保存下来以标识这个按钮。随后,无论是哪个按钮被点击都,都会触发同一个时间,你就需要上述 id 来判别到底是哪个按钮被点击了。

var botton1 =
  window.external.msSiteModeAddThumbBarButton(
    'http://host/images/button1.ico',
    'button 1');
document.addEventListener('msthumbnailclick', function(e) {
  if (e.buttonID == button1) {
  }
}, false);
window.external.msSiteModeShowThumbBar();

最后一个就是,你可以让任务栏图标闪烁以引起用户的注意。

window.external.msSiteModeActivate();

小结

加入上述简单代码,你就能够让自己的站点把 IE9 Pinned Site 的新特性充分利用起来,为你的站点用户带来更好的体验。如果关注接下来的实战部分,欢迎订阅本博客

2010年11月12日星期五

使用 Wacom Bamboo Special Edition 写博客

这篇文章真的是写出来的,我已经很久没用笔写过那么多字了。能让我如此流畅写那么多字,也就只有 Windows 7 能做到了, Mac 完全不行。

星期一下午,我的购物欲爆发了,很想买一个 Magic Trackpad ,于是就去 Apple Store HK 下单买了一个。在不知道 Trackpad 什么时候能送到的情况下,我无无聊聊地在看幻灯片写作的书,突然想起我确实需要一个能把手绘导入电脑的工具。现在做幻灯片的最大障碍在于缺乏好的素材。有些人选择抱一个 DSLR 出门去拍素材,有些人选择上网买别人拍好的素材,我选择一个比较省钱(至少看起来如此)的方案,也就是自己画素材。我不会做很复杂的东西,所以自己画画是足够的。

MIX 09 的时候有一个 Dan Roam 的 session ,叫做 The Way of the Whiteboard ,它让我见识到幻灯片是完全可以画出来的。不需要在编辑模式下写任何的内容,直接创建一堆空白页然后进入播放模式,在上面画满东西,结束放影时保存下来就行了。尽管我已经很久没有画过东西了,更别说接受数字化创作的专业训练,但我还是觉得画画比打字要更加 expressive ,所以我想要尝试一下。

星期一晚上,我跑到 Wacom 的网站上看最新的选择都有哪些。原来现在入门级的 Bamboo 系列都有 1024 级压感了(尽管我不知道这跟 512 级的区别有多大,但我总是觉得 512 级不够用),而且还引入了多点触击的支持。最新发布的一款 Bamboo 产品是 Bamboo Special Edition ,支持 4 点触击,那不就是一块超大的 Trackpad 吗?于是我决定买一块回来当超大 Trackpad 用。

Wacon Bamboo Special Edition 中文名叫做“限量版”,其实根本不限量。官方价格是 ¥1580 ,京东卖 ¥1520 ,不过淘宝上同样的价钱还送一堆东西。我问 @linzheming ,看他中关村的朋友能否以更低价出货,最终我在中关村买了。由于 @linzheming 的朋友一开始搞错了,所以给我发过来一块 Bamboo Fun ,我发现不对就退回去了。在对方把正确的板子发过来之前,我又问了一下他有没有 Buffalo 高功率无线路由器。他说有,于是我又要了一个。总价 ¥1880 ,感觉非常划算。

Unboxing Bamboo Special Edition

最终板子和路由是星期四下午到的,我先把路由配置好,中途还插了个面试,面了个女工程师,然后再回来拆箱板子。箱子是 Special Edition 的主色调,也就是黑色(而 Fun 对应的是橙色)。里面有一个包包、一捆 USB 捆绑线、一块板子、一支笔,还有一盒说明书和光盘。

Unboxing Bamboo Special EditionUnboxing Bamboo Special EditionUnboxing Bamboo Special EditionUnboxing Bamboo Special EditionUnboxing Bamboo Special Edition

把板子接上 MacBook ,然后自动就能识别其基本功能。把驱动装上后,它就是一块超大 Trackpad 了。跟 Trackpad 不一样的是, jitouch 和 BTT 都不支持它,所以无法自定义更多手势。看来 Trackpad 还是有它的优势的,等我明年换一部 MacBook Pro ,那样我也有 Trackpad 了。

Unboxing Bamboo Special Edition

在使用专业绘图软件之前,数位板在 Mac 上面毫无用处。英文手写是可以开启了,但识别率实在是不行,根本无法流畅书写。YouTube 上有 Mac 和 Windows 手写对比的视频, Mac 基本处于不可用状态。此外, Mac 不支持中文手写,所以本文是用 Windows 上的 Windows Live Writer 写成。幻灯片的手绘,也只有 PowerPoint 支持, Keynote 无此功能。 Mac 下面的 PowerPoint 呢?结束放影后不能保存之前手绘的内容,所以 Windows 成了唯一选择。

如果使用专业绘图软件呢?我正在边写这篇文章边安装 Adobe Creative Suite 5 呢!我要装完以后试用过了才知道,而且学习成本还不低。

最后送上 Bamboo Fun 的开箱照。这就是发错了的那块板子。

Unboxing Bamboo FunUnboxing Bamboo FunUnboxing Bamboo FunUnboxing Bamboo Fun