新的广告交换、51.la统计和web标准

标题又有点风牛马不相及，不过还是有那么一点点关联的，再说了，一篇文章的内容相对广泛，不仅有利于SEO，而且还会给胡乱转载者以困惑，同时还不会干扰正常转载、引用的朋友，嘿嘿。

首先说今天我第一次见到的网站广告交换–[BlogUpp](http://www.blogupp.com/)，感觉很新颖，很方便，就顺手也弄了一个，放在右边的广告下面，感觉特点如下：

1. 不用注册，直接输入网址，就得到一段代码，扔网站页面上就行了。
2. 交换广告是竖向排列的两个，固定的大小和布局，至少目前没得选择，不过适合blog这种右边大条空白的情况。
3. 加载的时候，先显示文字，然后加载图片，当然文字和图片都是从每个网站上攫取出来的，中文支持良好。
4. 正常显示广告的情况下，一般是显示图片，鼠标滑过的时候，切换为文字内容，既用图片吸引了眼球，又能让读者根据文字内容来了解是否真的需要打开浏览，应该说这一点我觉得是它设计最好的地方。
5. 提供两种形式的代码，一种是iframe另外一种是style+div，我鸡蛋里挑点骨头：第二种里面的target="_blank"这种用法是不符合w3c标准的。

之所以对w3c标准如此敏感，是因为下午刚刚为51.la统计代码无法通过w3c验证而头疼（验证的不是本blog的页面，选用dtd是XHTML 1.0 Strict）。先来看一下这段代码吧：

<script type="text/javascript" src="http://js.users.51.la/272422.js"></script>
<noscript><a href="http://www.51.la/?272422" target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/272422.asp" style="border:none" /></a></noscript>

用[w3c的validator](http://validator.w3.org/)一检查，错误就出来了，主要有两处，一处比较简单：

document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag . 

就是说a不应该出现在这里，它属于inline元素，应该被包含在block元素中云云，img也是一样，解决方法是用p或者div元素来包含他们就可以了。

而第二个不兼容就比较棘手了：

there is no attribute "target" . 

也就是`target=”_blank”这种用法是标准不允许的，这个问题着实难解决了点。

有朋友说了，你不会用js来实现么？的确，网上有解决方式是先赋予a链接rel=xxx属性，然后用js判断属性再脚本运行时添加`target=”_blank”属性，或者直接用js打开脚本的也算一种方法。

可是各位，你们没有发现，这个链接是在<noscript>标签中么？这个标签中的代码只有在浏览器不支持js的时候才会显示，试问，在不支持js的浏览器中，刚才的js解决方案还能用么？

最终，我也没有更合适的解决方案，只有把`target=”_blank”去掉，然后在旁边注上一行字：

<noscript>
    <div>
        <a href="http://www.51.la/?272422">
            <img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;"
                src="http://img.users.51.la/272422.asp" style="border:none" />
            Tips: 在新窗口中打开链接，浏览更方便（点鼠标右键）。
        </a>
    </div>
</noscript>

我想，目前也只能用这种方式解决了吧，好在不支持js的浏览器、又是人在用的（非机器人），应该不多。

其实，51.la代码的兼容性之所以被发现，之所以不得不改，也不是我吹毛求疵，而是用了eclipse之后，它的语法检查给发现的（够强大的），实在是不习惯看到一对error和warning在下面待着，“被迫”修改代码使它们更加“标准”，我想这也是eclipse的一个优点吧。

PS: 在[BlogUpp](http://www.blogupp.com/)缩图中我网站的首页太难看了，一个图片也没有，hmm…，有没有好一点的wordpress两栏布局模板，突出文章内容的？偶也换换？

参考

• [BlogUpp的效率](http://webabie.com/blogupp-efficiency/)

Update @ 2008-05-12

看到[妖精](http://blog.newchen.com/)把[BlogUpp](http://www.blogupp.com/)的上下布局给横过来了，猜测是自己手工改的，官网上好像没这个功能啊。。。