OpenSearch 初探June 17, 2008

很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示

http://files.gracecode.com/2008_06_17/1213670001.png

其实这是 OpenSearch 的一个应用,只要编写相应的微格式的 xml 文件,就可以制定相应的搜索框。

参考 OpenSearch 的定义文档 ,可以基本获得基本的 xml 格式。比如某个典型的的搜索 xml 文件可以这样指定。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <InputEncoding>utf-8</InputEncoding>
    <ShortName>ShortName</ShortName>
    <Description>Description</Description>
    <Image type="image/vnd.microsoft.icon">favicon</Image>
    <Url type="text/html" template="http://who.am.i/search?word={searchTerms}"/>  
</OpenSearchDescription>

上面的 xml 文件很容易理解,除了固定的 xml 根以外,其他的定义从字面上就可以理解:

编写 OpenSearch 的 xml 格式就完成了,详细信息可以参阅其 OpenSearch 定义文档

下面要在页面中加入这个搜索,基本上可以分为两种方式。分别是页面的在 head 中加入 link 标记(类似 RSS),以及使用 Javascript 方式添加(比如定义某个按钮触发)。

加入 link 标记非常简单,格式如下

<link rel="search" type="application/opensearchdescription+xml" 
            href="http://who.am.i/search.xml" title="ShortName" />

与 RSS 相似,rel 和 type 是固定的,我们主要指定 href (上述 xml 的 url 路径,保险起见使用绝对路径,即 http:// 开头)以及 title (也就是搜索的短标题)即可。

就这样,在 Explorer 以及 Firefox 中打开这个页面就可以看见相应的菜单了,如图所示

http://files.gracecode.com/2008_06_17/1213670018.png

使用 Javascript 添加比较麻烦(或许现在的情况会很好多)。我们主要会使用浏览器的扩展功能,在 Explorer 有个 window.external.AddSearchProvider 参数( 详细文档 )。

典型的调用方法如下

window.external.AddSearchProvider('http://who.am.i/search.xml');

参数中的链接就是上述 link 中的内容。在 Firefox 下可以使用

window.sidebar.addSearchEngine(
    "http://who.am.i/search.xml",  /* engine URL */
    "favicon.ico",  /* icon URL */
    "ShortName", /* engine name */
    "Description" );            /* category name */

参数和例子如示例代码中所述( 官方文档 )。值得注意的是在 Firefox2 版本以后已经「兼容」 Explorer 的 window.external.AddSearchProvider 调用方法( 详细信息 )。

那么我们对应的 Javascript 代码就可以这样编写(为了兼容 Firefox2 之前的版本,加入 else if 判断)

function addEngine()
{
    if (window.external || window.external.AddSearchProvider) {
        window.external.AddSearchProvider('http://who.am.i/search.xml');
    } else if (window.sidebar && window.sidebar.addSearchEngine) {
                window.sidebar.addSearchEngine(
                    "http://who.am.i/search.xml",
                    "favicon.ico",  /* icon URL */
                    "ShortName", /* engine name */
                    "Description" ); /* category name */
    }
}

这样,就可以将这个函数注册到某个链接或者按钮的点击事件中,就会跳出个确认框,如图

http://files.gracecode.com/2008_06_17/1213670034.png

用户点击确认以后,就加入到浏览器搜索框中了。

--EOF--

Firefox3 即将发布支付宝 的兄弟们正在完善对于 Firefox 的支持,在这里表示关注和支持。

Twitter 的前端浅析June 16, 2008

前段时间(似乎目前也有)Twitter 的网站不是非常的稳定,虽然是 服务器方面的问题 ,而本人职业倾向,于是就看了下 Twitter 的前端代码,下面我说下我的个人观点。

按照期前所说的 评定标准 ,我们来对比下 Twitter 做得如何。

减少 HTTP 请求数,以及使用 CDN、加 Expires 头等

http://files.gracecode.com/2009_11_05/058855b87c6a.jpg

这是本人的 Twitter 主页的请求数统计( 大图 ),看得出在页面不大(150K)的情况下,请求数竟然达到了 60 个居多。

其中,大部分的请求数是图片等,主要的内容是用户的头像。其中,大部分的图像资源来自 s3.amazonaws.com 这个站点,而同时多达 60 多的并发请求数,还是让人对效率方面堪忧。

http://files.gracecode.com/2009_11_05/648315b87e99.jpg

上图是 Twitter 返回的 HTTP 头信息,看得出虽然设置了 Expires 头等信息,但是似乎缓存并没有发挥实际的功效(谁能告诉我原因?)。

Javascript 和 CSS 方面

Twitter 的 CSS 文件仅为一个,并且在页面的头部就已经载入。在这里我无法理解的就是为什么它们没有把样式给压缩,甚至连注释都存在。

http://files.gracecode.com/2009_11_05/345865b87c66.jpg

特别是针对 Twitter 这样突发流量非常大的站点,相信压缩过以后效率会更理想些。

http://files.gracecode.com/2009_11_05/024525b87c64.jpg

Javascript 方面的问题除了说了上述的 CSS 一样未被压缩过以外,它们还分别载入了两套不同的 Javascript 框架,分别是 Prototype 和 jQuery

相信 Javascript 运行开销会比较大的还有 urchin.js 这个文件,它是 Google 的统计埋点(Twitter 没有自己的统计系统?)。

Twitter 的页面虽然简单,但是如此安排前端脚本,在庞大的流量基数面前,个人认为不应该抱乐观的态度。

其他

Twitter 的 HTML 结构发现,有很多的结构都是被简化了的(可能这是处于针对移动设备的考虑)。

http://files.gracecode.com/2009_11_05/939665b87c68.jpg

有趣的一点就是他们会将很多事情交给 Javascript 去做,比如是否出现「On a mobile phone」的提示。

个人认为针对「无障碍」的 HTML 结构而言,固然是可以这样做(给用户更多的提示信息)。

但对于桌面用户而言,毕竟这是属于多余的结构,所以此类的提示信息应该放在服务器上面判断。当然,反驳本热观点的最好理由就是:其一,坚持「无障碍」的 HTML(结构);其二,减少服务器的运行开支。

--Split--

本人的水平有限,此文希望能起到抛砖引玉的效果。PS:大家想听我发牢骚,可以 去我的页面看看

iBook G4 和 Nokia n72 被盗June 15, 2008

我现在很郁闷,但是不是因为被盗的本身,或者说我失去了多少物品而郁闷,下面请允许我详细的说来。

先说下事情的经过,在我出去吃晚饭的这段时间。有小偷从我住的地方二楼,将防盗窗剪开入室,拿走本人的 苹果 iBook G4 以及 正在充电的 Nokia n72 、现金以及 小妮子 的身份证等物品。

从我出去吃饭,到小偷作案,直到本人回来发现,仅仅历时一个小时的时间。

我马上叫来了房东,以及小区的保安,同时我拨打 110 报警。保安说这事我们不能处理,所以我只能将希望寄托于,即将到来的保安这里。房东对于发生这样的事情表示非常的抱歉。

而本人打 110 电话报警以后,随后分别接到三个电话:第一个,「确认你家里的确失窃了」?第二个,询问具体的地点以及被偷的情况;第三个,「你还是来趟我们局里报案吧」。

此时杭州刚好下着雨,冒雨到小区的公安局里,说明了情况。首先填了张单子,然后将正在看欧洲杯的警察叫起来,再然后才驱车到案发现场(历时一个小时)。

在坐警车回到到案发现场的路上,驾驶座上的警察才记起来通知取证的技术人员,于是等他们到齐又花了半小时

他们取证的流程到是非常的简单,拍了几张照片、以及印了几个指纹以后就走人。然后我得跟着他们到局里做笔录。

笔录的内容,就是把我先前说的内容再次重复了一遍并打印出来。按了几个红指印以后,警察说你可以走了,有消息我会通知你的。

这番折腾以后,我到是不希望我能够拿回属于我的东西(iBook G4 和 Nokia n72)。我现在只是希望里面的数据不要被泄露出去,包括我个人的数据以及公司的代码(虽然有备份)。

总而言之,今晚的事情,本人现在非常没有安全感,他们对于我的打击远远大于小偷本身对于我的影响。我真的不知道我每个月纳的税,是给什么样的人给用了。

--EOF--

我暂时现在不能在床上看电影同时 coding 了,同时可能在手机卡补回来以后会接到很多的「匿名电话」。还有以后万一出现什么「门」的,事先声明与本人完全无关。

本人现在没钱,欢迎大家提供兼职的机会 :^)

--Split--

小妮子语录(貌似是 罗斯福大人说的 ):

第一,幸好被偷的只有笔记本等,老公没有被偷
第二,幸好当时我在外面,否则就怕贼狗急跳墙
第三,幸好做贼的是他,而不是我
Yahoo 统计