Notes, Tech @ 28 November 2006, “7 Comments”

终于,Royal受不了流氓软件的非礼,重装系统了。昨晚下班后折腾了好一阵子。我在一旁看热闹的同时也记一下自己在Windows上常用的一些软件,将来要重装的话,也有个快速的参考。

Email: Thunderbird(我在linux上还是习惯用Evolution,因为Thunderbird上的Search folder还是不如evolution的灵活)。另:Outlook Express能不用就别用了,这东西上的安全漏洞多得就象瑞士奶酪。昨天Royal新装的系统很快又跳出广告窗口,估计就是用Outlook Express导入备份邮件后再次感染的。

浏览器: firefox,理由就不说了,Firefox上装的扩展是另外一个话题。IE7暂时先不装,因为网站开发中要测试在IE上的css和javascript,而大部分的用户现在还是在用IE6,所以先留着吧。

IM: Gaim,开源的IM软件客户端,支持多种协议(MSN, Yahoo, Jabber(GTalk), ICQ等),没有花里胡梢的广告条,几乎不存在在聊天时不小心中毒的问题,同时也有支持不会被轻易窃听的聊天内容加密插件。另外一个IM就是Skype,一个是音频和视频的聊天,另外就是聊天内容是加密的。

FTP客户端: FileZilla,开源,易用,支持FTP over SSH2。

下载工具: NetTransport(链接可能已经不存在了),多线程下载,通过flashgot扩展跟Firefox能有很好的集成。跟FlashGet很像,但是没有广告条。

Feed阅读器(桌面): SharpReader,虽然FeedDemo也很不错,但是SharpReader是免费的;

音乐播放器: foobar2000, good enough and less is more;

脑图工具:Freemind,类似MindManager,开源,虽然功能不如MindManager强大,不过足够用了。

清除间谍流氓恶意软件的工具: SpyBot-Search & Destroy: 消除流氓间谍恶意软件的工具。免费。

其他工具:

PowerMenu,能够把窗口最小化到系统托盘,不占用任务栏。这在窗口很多的时候很方便。

SysInternals的许多工具, ProcessExplorer和AutoRun很好用,Autorun能够发现和部分清除一些强制在开机登录时运行的程序。注:开发者已经加入微软,所以这个链接会转向到微软的地址。

PasswordSafe:密码保险箱,用来记录个人密码(网站,银行等)的工具,开源;

Daemon Tools:能将光盘的image文件模拟为关盘驱动器,安装软件时比较方便;

md5summer:计算md5值的工具,

explore2fs: 能够在双启动的机器上在windows里读取linux文件系统;

WordPad: 打印RFC时,Wordpad最好用 (也许是我的电脑和打印机的问题)。

其他:

XP上没有象W2K那样的锁屏幕的快捷方式,在XP上可以自己做一个: 创建一个快捷方式, 把目标设为:”%windir%\system32\rundll32.exe user32.dll, LockWorkStation” (不含括号),把该快捷方式命名为”Lock Workstation”。双击这个快捷方式,就可以锁屏幕了。

Web2.0, WebDev @ 21 November 2006, “10 Comments”

我一直认为网页标准的普及和支持是Web2.0发展中的非常重要的推动力量之一,一是CSS让网页设计和维护更容易,二是Javascript让用户互动更友好,这使得更简洁更友好的web 2.0界面更流行更受欢迎。

同时,越来越多的控制转移到了用户手中,比如Firefox的NoScript扩展让用户可以关闭或者开启所有或者某些网页上的Javascript。这就使得一些网站的页面在Javascript被关闭的时候,不能或者部分不能使用。例子:在豆瓣上对东西评价打分的界面在关闭Javascript后就失效了,似乎也没有其它手段可以做评价和打分。

这是不是有点吹毛求疵呢?那再看看Amazon上类似页面的处理,用户可以对一件商品做评价,和标记自己是否拥有,界面如下所示:

amazon page with javascript enabled

也是使用了Ajax,不需要重新载入页面;把Javascript关掉,刷新页面,由于Javascript被关闭,页面此处则显示一个“Rate this item”的链接,链接到的页面出现以下这个界面,一个简单的“web 1.0”的表单:

amazon page with javascript disabled

这就是“可降解的”(Degradable)Javascript的应用的例子,在浏览器不支持或者不完全支持Javascript的时候,仍然能够正常展现和提供页面所有功能。虽然用户体验不如Javascript开启的时候好,但用户仍然能够完成他想要做的事情。

需要关闭Javascript么?有些情况下,是的,比如出于速度和安全的考虑,比如使用不支持或者完全支持Javascript的浏览器(不,不只是Lynx,还有移动终端上)。更重要的是,不能因为用户选择关闭Javascript,就不让他们使用到某些功能。尊重用户的选择,这应该更是web2.0的精神和力量的所在吧。

那么,既要支持javascript被关闭的情况,又要有Ajax,会不会增加开发的难度呢?Jeremy Keith, DOM Scripting的作者,不这么认为,在他的书里也提到Progressive enhancement(渐进增强)的开发过程和Hijax的手段,简单地说,就是

  1. 首先以传统的或者说web1.0的方式设计和实现网页;
  2. 在1的基础上,添加Javascript实现Ajax,优化用户互动;

因为即使使用Ajax,所有处理还是在服务器端完成的。更多关于progressive enhancement和Degradable Javascript可参考:

WebDesign @ 01 November 2006, “3 Comments”

提到雅虎通Pingme服务的那篇里,我说到网页上的文案内容不该用图片来显示,但是没说为什么,只是加了个链接到W3C的相关规范。现在做个小结,说说把文案放在图片里显示的缺点和应该采用的办法,也算是补记一下笔记。对这方面很熟悉的读者可以不必看了。

  • 图片比文字占用带宽大得多,因为用户在使用带宽质量不好的时候或者在流量计费的情况下会特意关掉图片,但是不应该因此在使用网页上受到影响;
  • 图片不能缩放,视力不好或者显示器分辨率高的用户看起来就很吃力,再说浏览器上对文字放大缩小的功能已经存在很久了;
  • 为了自己工作省力省心,如果文字需要修改或者调整,那么每次修改(包括标点符号),负责文案的都得找你协调,你要重新再做一次,这还不包括不同语言和繁体简体的处理;
  • 除非搜索引擎做了对图片进行OCR或者其他分辨识别功能,否则搜索引擎爬虫是看不到图片里的文字的;

我当时说在IMG的ALT里添加图片上的文案内容其实只是一个勉强和粗糙的办法,最好的办法是用一个HTML元素,比如DIV,将图片的URL放在CSS该元素里的background-image属性里,文字内容就放在HTML里,直接写或者从数据库或者CMS系统提取,这么做基本上弥补了上面讲到的把文案放在图片里显示的缺点,一个例子就是雅虎自己的雅虎收藏+的首页Banner。

当然这种办法也有一些难度,主要有两个:

  1. 需要一定的CSS技巧(比如如何保证放大缩小时外框不会“破”掉,以及保证在跨平台跨浏览器上显示的统一),在此推荐一本好书:Bulletproof Web Design,里面有很多精彩的灵活使用HTML/CSS的方法和技巧。
  2. 不像用图片,使用CSS需要在不同的操作系统下和不同的浏览器里进行测试,这是比较麻烦,但也不是没有办法解决,这里提供一个在线测试页面在不同平台和浏览器下显示的服务:browsershots.org,另一个办法就是使用虚拟机,比如Virtual PC等。

再推荐个我刚刚发现的一个网页设计的专业Blog:淘宝UI团队的Blog,专业、专注,并乐于分享。我自己还没开始用淘宝,不过已经从几个地方听说淘宝的网页设计很专业,很高兴能看到他们也在使用blog这个工具。希望明年的网志年会能有一个专门的技术track,并且有个用户界面和网页标准方面的研讨会,让这样的团队blog跟大家见面和交流。

Reading, WebDesign @ 26 October 2006, “4 Comments”

 点石成金:访客至上的网页设计秘笈

认识Windy有段时间了,一开始是一起参与SocialBrain.org组织的《Free Culture》和《We The Media》中文翻译项目,后来才知道她是专门从事用户互动和界面设计,为不少网站提供咨询。最近Windy告诉我她翻译的Steve Krug的《Don’t Make Me Think》的中文版:《点石成金:访客至上的网页设计秘笈》,已经发行了。《Don’t Make Me Think》是一本非常非常好的书(原书的第一和第二版我都买了,据说第三版快要出来),现在出了中文版,当然要买一本收藏,再给公司买了一本,推荐给同事们,并要求程序员都看至少一遍。

在书店里翻这本书时,第一个发现就是它非常忠实原著(中文版是基于英文第二版),包括从的Look -and-Feel。原书使用了大量的网站截图和示意图,都在中文版基本上得到忠实重现,甚至包括小标题的颜色也是跟原书一样。这对其他类型的书没有太大的必要,但作为一本关于设计和用户体验的书,这就很重要了。相信Windy和出版社为此做出了不小的努力,可能也是因此造成了成本比较高,使得很多人嫌它太贵(平均几乎4页1块钱)。

《Don’t Make Me Think》讲的是网站设计如何提高网站的可用性(Usability),其核心思想就是从用户的角度说的一句话:“Don’t make me think”(简称和标签:DMMT),在原书里作者对这句话做了个解释:

It means that as far as humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.

就是中文版中说的“不言而喻、一目了然、自我解释的”。这是地球人,至少是从事网页设计的都明白的道理,但是真的明白为什么,和怎么在实践中做到,并不是件容易的事情。这本书可以起到很大的帮助,因为它

  1. 传递了它要说的东西(什么是DMMT, 为什么要DMMT, 和怎么做到网页设计能够DMMT);
  2. 简单,直接,清晰、有效地做到了1;
  3. 以一本很薄,读起来很轻松的书,做到了1和2;

比如在第2章“我们实际上是如何使用Web的”里,短短几页就说清楚他发现用户在使用页面上的三点“事实”:

  1. 我们不是阅读,而是扫描
  2. 我们不作最佳选择,而是满意即可
  3. 我们不是追根究底,而是勉强应付

也许这三条说出来之后,不少人都会说,切,废话嘛,就应该是这样的。但是在作者直接清楚地总结出来之前,我不知道有多少网站规划和设计者不仅真正意识到这些,并且在实践中有针对地进行网站和网页设计。在第一次读到这章的时候,这三点已经值回一半的价钱了。

还有,这本书在解释和分析的时候,用了生活中日常的体验和网站设计相互参照,比如页面标记和高速路牌,网站的导航和在大超市里购物的类比,让读者能产生共鸣,更容易理解和接受。

但这也导致了它不是一本很容易翻译好的书,因为字面上直接的翻译未必能让有不同生活文化背景的中文读者产生和美国读者能得到的同样有效的反应。那么是直接译好还是从中文里找个对应的通俗说法翻译好?我猜这也许曾经给了windy一些小麻烦。阅读的时候,大家不妨注意一下这方面,并把这当作体会从文化差异在用户使用设计上造成需要面对的一个难题,a bonus point,算是英文读者不能得到的额外收获 ;-)

在这也挑几个骨头:原书名是Don’t Make Me Think, 不知道为什么中文版的题目是“点石成金”,而这句话在书里被直接翻译成了“别让我思考”。“思考”这词在这显得似乎过于严肃了点,如果翻译回英文,恐怕contemplate, ponder, 和reflect似乎更合适。觉得翻译成“别让我动脑子”比较好些,也适合原书行文的口气和风格。另外,这本书的副标题是“访客至上的网页设计秘笈”,“网站设计”更恰当些。

最后,如果要推荐一本网站设计(非具体技术实现类)的书,我就推荐这本。

Security, Tech, Web @ 12 October 2006, “3 Comments”

几天前,车东提到了雅虎中国发布的Y!pingme服务

什么是Pingme呢?原本想抄一下它们首页的文本,结果发现介绍文字居然是一大块GIF图片,*?^%$#@?!,disable掉图片,居然没有ALT的描述(建议网站开发人员参考W3C的Web Content Accessibility Guildinestext-equivalent一节)。那就抄车东写的解释吧(让我们赞美一下“代码重用”:p):

什么是PingMe呢? 就是一个web界面的雅虎通留言簿,没有注册过雅虎帐号的用户只要点击网站上的PingMe图标call me via Yahoo! Messenger就可以直接与你聊天了。过几天,你的雅虎通上忽然跳出一个:webchat####用户,那就是来自网站的用户留言了。

恩,就酱紫,简单明了。

让我感到好奇的是那个Pingme的图标和链接在网页上的代码,于是view source了一下车东的页面,最主要的代码是这样的:

< a xhref="http://cn.pingme.messenger.yahoo.com/webchat/ajax_webchat.php ?yid=[雅虎通ID]&sig=[40位ASCII字符]"

就是说pingme的URL带两个参数,一个是yid,就是用户的yahoo ID,一个是sig,长度为40的ascii字符串,估计是sha1哈希值。

咳,不知道是因为做过两年电信的SP呢,还是因为这方面比较paranoid一点,看到这段HTML,我立刻就想到:假设有个网页爬虫,爬一遍陶宝和雅虎中国的社区站点页面,就能收集到一大堆yahoo ID和pingme的URL,而且能够知道这些用户是

  1. 是雅虎通的活跃用户;
  2. 有自己的网站/网页 ;
  3. 使用pingme服务;
  4. 多半是淘宝店主(这可以根据页面URL和页面内相关链接或者关键字发现吧);
  5. 如果是淘宝店主,稍微分析一下页面,应该能发现她/他卖的是什么产品吧(谁实证一下是否可以?;));

就可以对他们进行非常有针对性的SPAM营销了。

稍等一下,做到这点的前提条件之一是相对于yid的那个sig必需是固定不变的,恩,也许这个URL是动态生成的?看输出到浏览器的页面代码是不行的,那就自己申请一个Pingme服务看看 …… 哈,还真是固定的,申请页面的第二步就直接给出了HTML代码,跟上面的一样(除了是我自己的yid和一个不同的sig值)。那么,上述的SPAM计划应该是可行的了。

给Pingme团队一个建议:提供用户javascript代码,Javascript在页面装载后到服务器获取一个有时效的sig值,再返回这段HTML代码,这样,就算网页爬虫拿到了今天的yid和sig组合,但是过一天或者过半小时就失效了。

当然,这么做可能会引起比较大的改动和其他问题,比如对服务器压力会增加,怎么处理这些链接在web cache上的更新,怎么处理Pingme主人正在进行的聊天,保证合理合法的聊天不会被中断等等。

当然的当然,我这是站着说话不腰疼……

说到最后,这是我的Y!Pingme :-)

发送雅虎通信息给我吧