Tuesday, October 28, 2008

向微软 Live Search 提交 Sitemap

作为 Webmaster,您一定知道 sitemap;您应该也知道使用 Google 的网站管理员工具来提交 sitemap 让 Google 收录您的网页;您或许还知道 Yahoo! 具有同样的站长工具(及其英文版)。

最近发现微软还在 beta 测试中的 Live Search 也推出了这样方便站长的工具 Webmaster Center


和 Google 及 Yahoo! 的类似,以上 Webmaster Center 工具会让您提供网站的入口地址和 sitemap 地址,然后 Live Search 会提示您下载一个 LiveSearchSiteAuth.xml (文件名真是个微软特色十足啊)文件,其中含有和网站对应的校验码。上传至您网站的根目录,使其能够用
http://www.mysite.com/LiveSearchSiteAuth.xml
这样的形式访问到即可。过一段时间 Webmaster Center 就会自动处理您提交的 sitemap 了。

对于已经录入过的网站,可以在 Site List 页面上的站点列表中点击网站地址的链接进入每个网站查看具体信息,包括摘要、属性、抓取问题、反向链接、链出链接、关键字和网站地图等信息。当网站地图发生改变时,可以通过 Ping 地址
http://webmaster.live.com/webmaster/ping.aspx?siteMap=[your sitemap web address]
来主动通知 MSNBot。

相信有了这个工具后,我们的网站就更容易被 MSN 和 Live Search 收录了。如果您的网站有 sitemap 而还没有提交给 MSN,不妨试一下这个办法。

Friday, October 24, 2008

挑战 XHTML 的 Strict 标准

我的 Blog 网页在 Doctype 声明上一直使用的是 XHTML 的 Strict 标准,当初在模板制作完成时是校验过的,可是随着后来无数次的修改、内容添加,现在已经不能通过 W3C 的语法校验了,加上 Google Blogger 在发布页面的时候似乎也并没有考虑目标模板的 Doctype 标准,也部分导致校验的失败。

经过一个下午的努力,终于基本上解决了所有 XHTML 的语法问题,总结如下。
<a> 标签没有 target 属性
在 Strict DTD 里面,超链接 <a> 标签 没有 target 属性,因此不能利用 target="_blank" 这样的代码来达到新开页面打开链接的目的。为了实现同样的功能,通常的办法是用 rel="external" 来替代 target="_blank",然后用如下 JavaScript 代码来处理链接:
function externalLinks() {
var linkArray = document.getElementsByTagName('a');
for (var i = 0; i < linkArray.length; i++) {
var link = linkArray[i];
if (link.getAttribute('rel') == 'external') {
link.target = '_blank';
}
}
}
然后将该 externalLinks() 函数添加到页面的 onLoad 事件中。如:
<body onload="externalLinks();">
<img> 标签必须添加 alt 属性
对于 <img> 标签来讲,alt 属性是必须的。给图片添加 alt,一方面当图片因为各种原因无法显示的时候,能给访问者以提示;另一方面也便于搜索引擎判断图片的内容,以及更准确的建立索引。
<img> 标签没有 border 属性
<img> 标签是没有 border 这个属性的。我们通常会加上 border="0",主要是因为把图片放在链接标签 <a> 里时,浏览器会加上一个链接默认颜色的边框,而这通常是多余的。在 Strict 标准中,不能用 border 属性来去掉边框,而只能使用 CSS 控制。同样 align 属性也是不存在的,要实现 absmiddle 这样的目的,也只能用 CSS 代替。
<blockquote> 标签内必须使用 block 级别的标签
<blockquote> 标签用来在页面上表示引用的内容,例如,最常见的,引用代码。我通常习惯将代码的内容放在 <code> 标签中,而这个标签是 inline 级的,不符合 Strict DTD 的要求。<strong>、<b> 等同样会导致问题。符合要求的 block 级标签包括:<address>, <blockquote>, <del>, <div>, <dl>, <fieldset>, <form>, <h>, <h2>, <h4>, <h5>, <h6>, <hr>, <ins>, <noscript>, <ol>, <p>, <pre>, <script>, <table>, <ul>。
不能使用 <embed> 标签
这个问题最容易出现在引用外部媒体文件时,例如 MP3 音乐、视频等。很多资料推荐同时使用 <object> 和 <embed> 来增强媒体引用元素的浏览器兼容性,但是很不幸的,Strict DTD 并未定义 <embed>。其实我们完全可以不使用 <embed> 一样能够兼容浏览器。例如 Youtube 给的代码一般是这样的:
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/uhsjNTEJD3c"
type="application/x-shockwave-flash"
allowfullscreen="true"
width="425" height="344"></embed>
</object>
这样无法通过校验。我们可以改成:
<object type="application/x-shockwave-flash"
width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"/>
<param name="allowFullScreen" value="true"/>
</object>
实体用法问题
在 XML 中,实体的写法是 &entity;,以一个 & 符号开头,一个分号结束。因此,Strict 标准的 XHTML 里面不允许出现任何单独的 & 符号,即使是在 URL 中用来分隔查询参数。需要用到这个符号的时候,要用 &amp; 来表示。通常一个实体用法的错误会同时导致 5 个校验时的错误,当解决以后,这 5 个错误会同时消失。由于 Blogger 在发布页面时 URL 直接使用了 & 符号,因此会直接导致 Strict 标准的 XHTML 校验失败。
重复的 id 值
对于 XHTML 标签来讲,id 属性的值必须唯一,如果一个文档中出项重复的 id 就会导致问题。出现这种问题,通常是把 id 属性放在了 Blogger 模板会循环输出的部分。
另外,Blogger 提供的模板中,backlinks 那一部分会导致 4 个不同类别的问题。凭心而论,Blogger 模板在 backlinks 这一块的代码实在写的很烂,用了三个不同的 js 文件,用 JavaScript 输出 CSS,不但使得不同模板之间难以更改这一部分显示的样式,也导致了很多 XHTML 的语法校验问题。例如 Blogger 自己的 Buzz,打开任一个文章的独立页面的源代码,Doctype 声明赫然是 XHTML 1.0 Strict,然而 backlink 那一块的代码不用校验也能看出漏洞百出。

Blogger 目前版本的网站出自著名设计师 Douglas Bowman 之手,其本人对 XHTML 以及 CSS 有着非常深刻的研究。在设计之初,Blogger 还没有 Backlinks 的功能,显然这个蹩脚的 Backlinks 是后来由其他人加上去的。不知道 Bowman 先生在看到这一幕后会做何感想。

Google 黑板报用的是同样的 backlink 代码,不过比 Buzz 知趣的是它的模板干脆去掉了 Doctype 声明。只不过作为 Google 旗下的网站,页面连 Doctype 声明都没有,也是一件汗颜的事情。

言归正传,以下列出 backlink 这部分代码导致的问题以及解决方法。
<div> 和 <dl> 之间的嵌套问题
在 Blogger 给出的默认模板代码中,是用 <dl> 来实现反向链接列表的;可问题在于,他们将 <BlogItemBacklinks> 放在了 <dl> 之内,而在生成页面时,会将 <BlogItemBacklinks> 这一对模板标签替换成一对 <div> 标签,从而导致 <div> 被嵌套在 <dl> 内。在 Strict DTD 里,<dl> 标签内只允许出现 <dt> 和 <dd> 两个子标签。解决办法是把 <BlogItemBacklinks> 放到 <dl> 外面,当然这样虽然让 XHTML 语法通过校验,但实际的运行结果,会导致每个反向链接条目会占用一个 <dl> 块,而不是预期的放在循环的若干个 <dt> 和 <dd> 中。通过 CSS 可以解决条目之间间距的问题。如果要完美解决这个问题的话,就只有自己重写 Blogger 提供的 JavaScript 函数来改变这一行为了。
<script> 标签的 defer 属性
在 Blogger 用模板生成页面时,除了将 <BlogItemBacklinks> 替换成一对 <div> 以外,还会在开标签的 <div> 之前加上一个 <script;> 用来引入相关的 JavaScript,同时给出了一个 defer="true" 属性,然而,根据 Strict DTD,defer 属性只能有一个值,只能是 defer="defer"。
<noscript> 内只能用 block 级别标签
在生成以上 <script> 标签的同时,Blogger 给出了一个 <noscript>,用来当浏览器不支持脚本的时候显示一个 Blog Search 的链接。可是 <noscript> 标签内只能用 block 级别的标签,直接用 <a> 这样的 inline 标签是不行的。
模板占位符问题
在模板中这段关于 backlink 的代码中,Blogger 用了一些模板标签作为占位符。通常模板标签会在生成具体网页时替换掉,但这里的占位符不会,它们要在实际生成 backlink 条目时被 JavaScript 程序换掉。但是在做 XHTML 语法校验时,这些占位符以 HTML 标签的形式存在于代码中,而又显然不属于 XHTML 定义的范围,从而导致校验失败。解决办法是将它们的尖括号转移,写成诸如 &lt;$BlogBacklinkTitle$&gt; 的形式,这样既能够被 JavaScript 成功识别,保证功能正常,又能通过 Strict 语法校验。要特别注意,其中 <$BlogBacklinkDeleteIcon$> 不要转义,这个模板标签是在页面生成时被替换的,而不是 JavaScript 的数据占位符。
最后,Google 黑板报最近也发布了一篇关于互联网标准性的文章,这篇文章也提供了很多关于改进网站 HTML 代码的参考信息。

Friday, October 17, 2008

Blogger 的相关文章和热门文章

看到很多别人的 Blog 在文章页面下方都有“相关文章”和“热门文章”的列表,无疑能够增加访问者继续阅读文章的兴趣。可是 Google 的 Blogger 没有这样的功能,于是自己想办法也添加了一个。

由于 Blogger 并没有提供相关的模板标签(Tags)来支持这样的功能,因此自己只好用 PHP 和 MySQL 建立了一个简单的数据维护和查询系统,然后用 AJAX 的方式在页面上显示出来。具体来讲有以下内容:
  • 利用 Google Blogger 的 Feed 接口将文章的 ID、标题、标签、URL、发布及修改时间等内容用程序导入到数据库。
  • Google Analytics 的页面浏览数统计(统计报告 » 内容 » 最常见内容)数据导出成文本文件,再通过程序导入到数据库。
  • 用 PHP 建立一个“相关文章”的查询接口。输入参数为文章的 ID,输出为指定数量的相关文章列表。具体算法上,先用 ID 查出基准文章的标签,然后在数据库中文章中比对标签匹配的数量,按照标签匹配数量从多到少找出相关的文章。
  • 对于热门文章,有两种计算方法。一种是按有史以来所有文章的浏览量来排序,但是用这种方法得到的结果,基本上都是 2005 年很老的文章,而很多有意义的新文章却很难出现。于是我采用了另一种算法,即按照每日平均浏览量来排序,这样比较新的浏览量比较大的文章也能出现了。

修改好模板以后,将整个 Blog 重新发布,现在这些功能已经调试好并上线了。顺便抱怨一下,对于用 FTP 发布的 Blogger 来讲,帖子多了以后,整站重新发布,真是一个漫长的过程啊。

在修改模板的同时,也顺便改了一下首页上提示阅读全文的方式,将原来的“点击这里阅读全文”的文字链接改成了图标,希望这样看起来更醒目一些,在我另一个非技术的 Blog 上可以看到效果。

另外,最初做的模板的 PSD 文件找不到了,也忘了当时在标题部分用的哪种字体。这给后面添加新的标题带来很多麻烦。于是趁这次修改模板,一并将标题的图片都修改了。找了很多字体,也研究了很久,挑了 10 种非衬线(Sans Serif)字体出来,最后选中的竟然是 Windows XP 自带的 Lucida Sans Unicode。

Friday, October 10, 2008

MIDlet 在索爱手机上安装失败

最近在工作中,发现一部分索爱 (SonyEricsson) 手机,在安装 MIDlet 时发生“Downloading failed”错误。具体情况发生在手机通过 OTA 安装 MIDlet,Jar 文件下载完毕并开始安装后,系统询问是否允许应用程序自动启动,以及是否允许应用程序收发短信,接下来就出现“Downloading failed”。

在出现此问题时,使用的是 Orange France 的 SIM 卡,考虑到 GPRS 漫游可能会带来的问题,我们改用中国移动的 SIM 卡,则安装正常。看来和 SIM 卡有关系。但同时,在索爱手机上无法安装的 Orange France 的 SIM 卡,在其它一些索爱手机以及所有 NOKIA 手机上都能正确安装,所以并不是由 SIM 卡本身 GPRS 漫游引起的。

几个星期以来,一直被这个问题困扰,百思不得其解。今天修改一个关于 PushRegistry 的 bug,突然想起来可能和 PushRegistry 有关,又重新 Google 了一番,发现了索爱官方论坛上的这个帖子:

https://developer.sonyericsson.com/thread/17306

帖子的作者遇到和我们完全一致的问题,而最终的解决办法,由索爱的技术人员给出了答案。

这个无法安装的错误,确实和 PushRegistry 有关系。如果把 JAD 中“MIDlet-Push-*”的属性去掉,则可以正常安装。但导致出问题的最终原因,是手机短信选项设置中存在没有值得空选项,如“Service center”、“Message type”、“Validity period”。SIM 卡通常都会为这些选项自动设置,但如果某一个选项没有设置,成为空值,则会导致上述情况。

我仔细查看了我们有问题的手机,所有手机上的“Validity period”都为空。设置成“Network maximum”后,MIDlet 安装和 PushRegistry 注册就完全正常了。

另外,我们发现有问题的手机包括 K700、K500、W800、S700、K600 等,多为 JP-3、JP-5 平台的手机。

Thursday, October 09, 2008

用微软正黑代替新明细

之前说到过在 Windows XP 系统下使用 Vista 的新中文字体“微软雅黑”,而对应繁体中文,Vista 同样有一款字体——“微软正黑”。(点击这里下载

繁体中文 Google 下使用“微软正黑”的截图
繁体中文 Google 下使用“微软正黑”的截图

可能是由于繁体中文汉字笔划相对较多,这款“微软正黑”和雅黑比起来要淡一些。除此之外其它的使用方法都类似:需要打开 ClearType,粗细浅淡的使用习惯也可以通过 ClearType Tuner 的 Windows XP PowerToy 来调节。总体来说,和雅黑还是有着同样的水准,和以前的“新明细”体比起来,也更遵行当前平面设计审美需求的潮流吧。

另外,据说 Windows Vista 下日文和韩文也有类似的字体,有需要的朋友也可以找一下,同样可以用在 XP 下。

Thursday, October 02, 2008

宋体-PUA

最近发现系统里多了个新的字体——宋体-PUA,Google 了一番,才知道是随着 Windows XP SP3 更新新增的字体。

仔细研究了一下,和通常宋体最大的区别在于,这个“宋体-PUA”在西文部分(半角 ASC-II 字符)使用了和 Times New Roman 一样的字体,而不再是以往难看凌乱的样子。以下列出了四种字体的对照图:

宋体-PUA 与相关字体比较

可以看出,在将字体设置成“宋体-PUA”时,显示出来的效果和“Times New Roman”一致。“Times New Roman”是西文字体,显然不会带有汉字的字体,这是因为系统默认的汉字字体是“宋体”。

我以前有文章提到过以前的宋体自带西文字体很难看,字体比较小时,粗体的字母 M 会缩成一团,而大篇幅排版时,整个版面显得非常凌乱,因此我会在任何场合都避免使用宋体的默认西文字体。

而现在微软终于意识到了这个问题,将其默认字体换成了西文系统(至少是英文系统)中衬线字体的默认字体“Times New Roman”,和同是衬线字体的宋体搭配起来,可谓相得益彰。

第四行相信大家都不陌生了,是 Windows Vista 系统默认的“微软雅黑”字体(看另文介绍),与宋体不同的是,微软雅黑是黑体的一种,属于非衬线字体。

通常来讲,大篇幅的正文部分排版应该用衬线字体,如宋体,Times New Roman 等,然而中文较英文来说笔划较多,在字体比较小的时候,显示起来有很大的困难,如果再加上衬线部分,可能会更难。而非衬线的字体在这种情况下,反而显得清晰整洁,可能这也是为什么在追求界面视觉效果的今天,微软的 Vista 和 Macs 系统都选择的黑体的原因吧。