無標題文檔

OpenSearch 初探

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

https://friable.rocks/_/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 根以外,其他的定义从字面上就可以理解:

  • InputEncoding 指定搜索的编码,根据网站的实际情况而定
  • ShortName 这个是搜索的短名称,比如「Google 搜索」
  • Description 针对这个搜索框的描述,比如「淘宝购物搜索 - 只有你想不到,没有你淘不到」
  • Image 类似网页的 favicon ,用于标识搜索
  • Url 这个是最重要的参数,指定搜索的链接。它有很多参数,一般使用 {searchTerms} 参数指定搜索词即可。参数 type="text/html" 注明返回的是页面(浏览器会跳转到这个页面),如果是其他格式就会使用相应默认程序打开(比如 type="application/rss+xml" 就会使用 RSS 阅读器打开)。

编写 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 中打开这个页面就可以看见相应的菜单了,如图所示

https://friable.rocks/_/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 */
    }
}

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

https://friable.rocks/_/2008_06_17/1213670034.png

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

--EOF--

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

使用 Google 工具栏追踪 Blog 留言

每个开 Blog 的兄弟都会时刻关注 Blog 上的留言,上次已经说道如何 使用 Gtalk 追踪网站的留言

在使用 Google 工具条时发现其实 Google 工具条本身也开放了 API 供用户调用。第一步要做的就是将用户留言做成 RSS 格式的输出(其实也就是 XML 格式,Wordpress 已经有这样的功能了)。

然后我们再写个针对 Google 工具条的 XML 文件即可。格式如下

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    <button>
       <site>在这里设置点击按钮以后进入的网址</site>
       <title>我是按钮的标题</title>
       <description>我是按钮的描述</description>
       <feed refresh-interval="1800">RSS 地址</feed>
       <icon mode="base64" type="image/x-icon">
           base64 以后的 ico 文件内容
       </icon>
    </button>
</custombuttons>

具体的例子可以 参看这里 ,其中 title 与 description 不言而喻,是标题以及描述,最为重要的是 feed 标签。feed 的值就是任何的 RSS 链接,针对本文就是其留言的 RSS 地址。refresh-interval 属性是刷新的间隔时间,单位是秒。

然后我们可以根据 Google 工具栏提供的链接将我们已经做好的 XML 格式的按钮添加到 Google 工具条中。格式为

http://toolbar.google.com/buttons/add?url=<XML 文件 URL 地址>

https://friable.rocks/_/2009_11_05/362615738b19.jpg

访问这个生成的链接就可以加入到 Google 工具条了,效果如图上所示。比如

点击这里将 Gracecode.com 的文章加入 Google 工具条

最后,有关多的信息,可以参看 Google 工具条的 中文 API 文档

跨域 Ajax 调用总结

上次提到过跨域 Ajax 的调用问题 ,这次做个总结。众所周知,Javascript 有「同源策略」的限制。但有时候偏偏又要碰到 Ajax 跨域调用的问题,这个时候就需要些「特殊」的方法使脚本正常使用。

总结下目前所能想到的一些策略,具体的可以查看 Yahoo 开发中心的 相关文档

使用 iframe

具体详情,可以 参看这里

实现的原理就是 iframe 与 父页面 进行 Javascript 通信。完全跨域操作没有测试过,但跨子域名是完全可行的。

优势(部分)

  • 全部使用 Javascript 搞定
  • 简单,不用学习其他语言

缺点(部分)

  • 破坏 HTML 结构
  • 客户端的资源占用比较大

服务器端脚本

https://friable.rocks/_/2008_04_07/1207562864.gif

架构可以先「盗用」 Yahoo 文中 的那张插图。大家也许想到变通的办法了,就是在服务器端编写类似网关的脚本。

比如获取另外个域下的 Json 输出,用 PHP 编写的部分代码如下

header('Content-type: text/javascript');
$url = 'http://x.other.net/json';
if ($content  = file_get_contents($url)) {
    echo $url;
}

很简单的代码,但对于服务器端而言,没有任何的限制。进一步的扩展,可以使用 CURL 库

优势(部分)

  • 使用没有任何限制
  • 对 Javascript 透明

缺点(部分)

  • 必须支持服务器端
  • Javascript 程序员必须了解服务器端语言
  • 服务器端脚本必须与页面在同个域内
  • 可能会加重服务器负载

由于相对比较熟悉 PHP 语言,加上后者对于客户端友好,所以在条件允许的情况下,个人还是比较偏向后者。

创建高性能的 Web 页面

首先,感谢 圆心 和 小马 主持这次的技术交流会。此次关注的是 客户端的效率问题 ,根据 Yahoo 的总结,可以总结下面 14 条「军规」。

  1. 尽可能的减少 HTTP 的请求数 [content]
  2. 使用 CDN(Content Delivery Network) [server]
  3. 添加 Expires 头(或者 Cache-control) [server]
  4. Gzip 组件 [server]
  5. 将 CSS 样式放在页面的上方 [css]
  6. 将脚本移动到底部(包括内联的)[javascript]
  7. 避免使用 CSS 中的 Expressions [css]
  8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
  9. 减少 DNS 查询 [content]
  10. 压缩 JavaScript 和 CSS (包括内联的)[javascript] [css]
  11. 避免重定向 [server]
  12. 移除重复的脚本 [javascript]
  13. 配置实体标签(ETags)[css]
  14. 使 Ajax 缓存 [content]

根据,PPT 的内容所示,我使用 Yslow 检查了下本人的主页,才得了个「F 47」(坦白说,与我本人估计的非常有出入)。

https://friable.rocks/_/2009_11_05/1971454c2cf7.jpg

主要的问题就是没有开启 Gzip 压缩,以及没有设置 HTTP 头缓存。看来折腾了那么久,除了服务器端的性能,客户端的缓存还是不能忽视的。

想想看,如果淘宝首页没有缓存,即便是多了 1KB 的页面容量,乘以每天上亿的 PV,这个数字将是多么的庞大。

最后, 提供本次的交流会的 PPT 下载 ,再次感谢他们。

有关更多的信息,可以访问 圆心 同志的 Blog ,他上面有更详实的内容。

正确上传文件

网站有很多地方需要交互,比方说有时候就需要用户上传文件。大部分的时候我都没有在乎这一点,我个人一向认为正确上传文件是常识。但当我整理某台服务器的时候,我发现有很多不合理的地方,于是写下来说说我的看法。这篇文件仅适合独立开 Blog,和打算珍惜服务器的每 1KB 资源的人阅读。

用户的角度上说,上传正确的文件应是自律为主。上传文件应该遵守两个原则,首先就是确定这个文件一定会使用到才会上传,其次就是是尽量的小。下面,我举例说明一下。

比如用户上传图片,jpg、gif 和 png 图片格式所能展现的效果和内容是不同的,但不建议采用上述格式以外的其他图片格式作为上传文件。 这里,有一个连接详细解释这些内容

个人 Blog 的照片如果需要插图,可以考虑使用 如 Yupoo 等图片共享网站 ,当然前提是内容符合他们的要求。这样你本身就可以每个月就可以减轻一些存储空间,并且更有利于管理。文章插图容量应该控制在 500KB 以内,大小应该控制在 800px 一下(以最宽一边计算)。根据本人的经验,这样最适合阅读。

相同的道理,如果是自己的服务器,如果没有必要,尽量不要上传视频等文件,因为这些文件将会迅速耗费你的空间。你可以将一些公共的视频放到 Youtube 等网站,这样也可以起到分流的作用。

永远不要怀疑蜘蛛的力量,文件一旦上传到服务器上,即便是没有做任何的连接,都有可能被访问到(愚蠢的服务器)。所以千万不要将你的个人资料等上传到服务器上。否则,除了会浪费服务器空间以外,还会引起不必要的麻烦。

上传的文件应该尽量避免空格、中文、全角标点符号等字符,因为服务器不一定能正确处理这些文件(虽然有点小题大作)。最好的做法是建议采用英文、数字和下划线组合而成的便于理解的文件名。

随后,下面是作为一名开发者的一些开发经验。

永远不要怀疑脚本的破坏能力, 小小的脚本可能就会毁了整台服务器 。所以避免 PHP、ASP、JSP 等这些服务器脚本上传,Windows 主机特别要注意避免用户上传可执行文件。*ix 服务器应上传操作以后立即将权限标记为 644 (目录权限为 755)。这个是第一条,而且是最总要的一条。

如果用户不是非常的在意,我们应该帮助他们重新生成上传文件的文件名。文件名应该包含文件上传日期等有规律的名称,这样在便于区分的同时也便于按照特征备份。重命名的文件明建议采用小写(这个是我的个人习惯)。

最后,建议应该适当的放松上传验证的机制。请不要误解我上句话的意思。比如上面我所说的上传的图片格式,在「逃避」了客户端的校验以后,发现用户还是上传了张 BMP 的图片,这个时候应该在适当允许的范围内,可以考虑将其转换成指定的适当格式存储,而不是「迂腐」地报错。

就是这些了,应该还有其他的一些更有用的经验,为了避免以偏概全,欢迎大家一起探讨。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章