Aug 8, 2009

Acid Test

Acid Test 是一系列由 Web 标准组织编写的针对网页浏览器的测试页面(不是软件)。

浏览器开发者用这些测试页面来验证自己的产品是否能够精准的还原页面编写者的设计。他们看起来都很简单,但是背后的代码都异常复杂。

http://acid3.acidtests.org/ (支持CSS3,用分数来显示浏览器的排版情况)

http://acid2.acidtests.org/ (支持CSS2,用一个笑脸来显示,正常情况上方显示Hello World,当鼠标指向笑脸鼻子的时候鼻子会变成蓝色。)

http://acid1.acidtests.org/ (支持CSS1,最土鳖的检测方式,不好玩)

检测的结果,Google Chrome最彪悍,全都满分。Firefox其次,有些小瑕疵。IE7则惨不忍睹,我真服了微软的研发部门了,因为IE8虽然做这个测试还行,在其他方面兼容性太差……。
所以,浏览器还是选Chrome或者是Firefox吧。


Tags:     
Post by SUN @ 1:46 pm | 与时俱进 | Comment (0)
Mar 30, 2007

Greasemonkey Addons

关键词:Greasemonkey, Google, Reader, Gmail
Greasemonkey Addons --这是一个Top10级别的firefox插件,之所以称之为他,因为在firefox里,Greasemonkey的图标是一只非常可爱的胖猴子,和我有缘啊。

根据其网页上的介绍,Greasemonkey插件其实是提供了一个Javascript的运行平台,这样众多民间高手就可以定制诸多的 javascript代码,从而优化各种页面,比方说Google啦,Google Reader啦,Gmail啦。具体的代码大全见:http://userscripts.org 。

我这里要介绍的是我自己使用的几个Javascript代码。主要是为了帮助自己优化下Google的几个产品。要安装下列的代码,你必须先安装上面提到的Greasemonkey Addons,随后重启firefox。

  1. Gmail Saved Searches
    该代码的目的是在Gmail信箱中添加一个快速搜索条。Search Box
    针对用户:
    a) 使用Gmail (貌似是一句废话)
    b) 每天收到不少email
    c) 使用Label功能,但还觉得不够用的。
    比方说我对收到的信件都会做个分类,但是有时候还是会用到Gmail内置的搜索功能。
    例如要搜老板DY发给我的信,我必须在搜索框里面打入
    to:me AND label:inbox AND from:DY@hku.hk

    安装这个代码以后,我只需要点一下“Edit searches",然后把上面的代码写入到Query里面就可以了。
    不懂如何编辑的也不用怕,该代码的作者本就已经帮你设置了一些常用的搜索,你只需要依样画葫芦就可以了。
    此外,该代码还可以保存最近几次的搜索结果。
    其实这个代码其实就是google的工程师写的,所以我估计会在不久的将来直接嵌入到Gmail中。
    如果还需要更详细的介绍,请参见此文
  2. Gmail Macros
    该代码的目的是增加Gmail的快捷键,安装完毕后你可以按键盘上的h键看它所有的快捷键参数。
    如果你从未使用过Gmail的快捷键,我建议你不妨尝试一下。它会大大提高你使用Gmail的速度,尤其是对笔记本用户,熟练的使用键盘快捷键是一项可以节约时间的不错技能。
  3. Google Reader Custom Search (2)
    针对用户:
    Google Reader 订阅了大量rss的人。
    之所以叫做(2),自然是因为这个是改进版的代码啦。这个代码的安装稍微有点繁琐。

    1. 先是点击上面的链接,安装代码。
    2. 随后你需要去http://www.google.com/coop 定制一个自己的搜索引擎。其中Search engine name和Search engine description两项可以填“Reader Search”;Search engine keywords这项随便填一个单词(比如test);Sites to search这项也随便填一个(比方www.google.com)。后面的选项选“Search only these sites”,最后是否显示ad嘛就看个人喜好了。
    3. 填写完以后,你需要另开一个窗口,导出自己的Google Reader界面中的Settings->Import/Export选项中导出OPML文件。
    4. 回到你定制的GoogleCustom Search界面,选Advanced选项,导入刚才你到处的OPML文件。
    5. 用你定制完的搜索引擎搜索一个单词,浏览器的URl栏会显示一串长长的代码

      .../custom?cx=0114783%3Awtpemqyazpg&q=test&sa=Search&...

      将这串代码中的&q=test去掉后,复制到剪切板,内容如下:

      .../custom?cx=0114783%3Awtpemqyazpg&sa=Search&...

    6. 编辑步骤1)中刚才安装的代码,用步骤5)中复制的代码替换字符串REPLACE-THIS。
    7. 大功告成,现在可以在Google Reader里面搜索自己搜集的诸多blog站点中的内容了。
  4. Google Reader Integration
    这个插件是在Gmail里内嵌GoogleReader的feed内容,安装简单。
  5. GoogleTagCloudMaker
    这个代码是把google搜索栏右侧原本应该有的赞助商链接用Google Tag Cloud覆盖。我估计Google不太喜欢这个插件,不过我们喜欢。:)

其他还有很多代码,如我上面所说,有兴趣研究的,可以去 userscripts.org 去淘宝去~

Tags:   
Post by SUN @ 1:48 am | 与时俱进 | Comment (0)
Mar 21, 2007

架构符合XHTML标准的博客

费了点时间让自己的网页上都贴上了Valid XHTML的标签,于是顺便扯几句。

XHTML,其实就是一个标准,至于来历,看我后面的扯谈。架构一个符合XHTML标准的网站并不难,可世界上的网站,真能符合w3C颁布标准的还真不多。因为养成的习惯要改并不是那么容易的,而且浏览器也都支持那些旧的标准,这也是不少网站对浏览器兼容不好的问题所在。如果要验证自己的网站是否符合这一标准,只要去 validator.w3.org/ 输入自己的网址就可以了。

如果你的网站不符合XHTML,这不代表它有什么太多的劣势(google的网页没一个符合的),而是你的网页有潜在的兼容性问题,结构上的问题可能让你耗费更多的时间来调整网页代码,使其在不同浏览器中看起来一致。我之前就一直不知道<li>必须嵌置在<ol>或者<ul>中,结果不得不花费时间来调整css代码。

而要架设一个符合XHTML的博客。

  • 最简单的开始就是先掌握XHTML相对于之前HTML的区别。http://www.w3schools.com/ 上给出了详细的说明,还可以做一下上面的Quiz。
  • 其次就是找一个比较好的平台。wordpress,blogspot,都是不错的平台,用他们编置出来的网页,错误相当的少(一般不会超过100)。
  • 尽可能的使用css来控制你网页上元素的性质(颜色,长宽,空白,一切的一切)。将这些元素从XHTML中剥离出来,也是他们的一个目标之一。
  • 随后就是利用上面的http://validator.w3.org/去验证你的网站,它对错误都会给出详细的说明,调试起来很方便。
  • 安装Firefox,使用它的插件的Web Developer进行各种调试纠错,会大大缩短你用的时间。

当你完成所有的纠错以后,就只剩下最后一件事情了。 :) ,在你的网页中插入如下的代码:

<a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML</a>

【注】
说XHTML,就不可避免的从HTML说开去,自然,也就要提到Berners Lee这位互联网的鼻祖。
话说我刚上小学那会儿,还是个向往当天文学家的主,全因为有一年哈勃上了天;但当时的我却不知道(嗯,绝大多数人都不知道)―正是在那一年Berners Lee在欧洲的粒子实验室倒腾出了万维网。时至今日,你还能看到当年网站的屏幕截图
也正是Berners Lee,领导建立了现如今互联网的标准语言,其中就包括了大名鼎鼎的HTML,全称就是HyperText Markup Language。因为技术的障碍,之前的HTML不得不相对的松散,也就产生了诸多兼容性的问题,人们用不同的浏览器得到的效果经常会不同;而且,随着发展,website在跨平台信息交流中的作用也日益显现。所以Berners Lee们自然而然的就想到了将其标准化。而XHTML,也就是HTML4.01版,就是标准化过程中的一个里程碑。

Tags:       
Post by SUN @ 11:46 pm | 与时俱进 | Comment (0)