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

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

首先说今天我第一次见到的网站广告交换–BlogUpp,感觉很新颖,很方便,就顺手也弄了一个,放在右边的广告下面,感觉特点如下:

  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一检查,错误就出来了,主要有两处,一处比较简单:

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缩图中我网站的首页太难看了,一个图片也没有,hmm…,有没有好一点的wordpress两栏布局模板,突出文章内容的?偶也换换?

参考

Update @ 2008-05-12

看到妖精BlogUpp的上下布局给横过来了,猜测是自己手工改的,官网上好像没这个功能啊。。。