2009年5月9日星期六

未知选项的表单设计

发现许多的注册表单设计中,性别部分的设计大都这样:使用单选按钮(radio)并默认选中一个(大都为男性,某些女性频道为主的可能为女性)。例如网页申请QQ帐号和注册网易通行证等
网页申请QQ (qq.com)帐号

注册网易(163.com)通行证

雅虎(yahoo.com)的设计比较特立独行,使用选择框(select),并默认不选中任何一个。

而雅虎中国(yahoo.cn)的设计也是使用单选框(radio),但是不选中任何一个。

按常理来说,注册系统并不知道用户的性别是什么,默认选中任何一个都不合理。yummy有一篇文章《中文按1,For English, press 2》提到“如果用户必须做出选择,那就先给他做好一个选择。”,这个道理在某些情况很不错,但是用在这里不合适。

如果不足够了解用户,就不要替用户做选择。

2009年5月8日星期五

状态模式

现有的IM软件都有状态设置功能,常见的默认状态有:在线,忙碌,离开,隐身,离线,但是这些状态对应的选项是不可设置的,例如TM/QQ,选择在线或者忙碌,对应的通知铃声,接收消息方式都是指定、不可改变的,虽然这些默认设置在某些情景下可能很合理,但不总是这样。
TM/QQ 状态:可以使用默认状态作为模板附加消息来添加状态。

Gtalk 状态:可以直接在状态写状态信息,但是只有在线,离开和离线三种状态。
WangWang 状态:可以添加状态信息。
可以看出,基本上IM软件的状态信息只能向好友展示文本消息,告诉好友你当前的状态,有时候并不能真正帮助我们在某些需要的时候过滤某些信息,例如老板告诉秘书,帮我回绝所有约会和电话。
最近工作的时候发现,我希望工作的时候设置状态为在线,或者忙碌也可以,而且不想接收所有或某些群消息。例如上班工作的时候不想接受技术探讨群或娱 乐群的叽歪消息,但是要聆听部门或项目组的群消息,尤其要注意老板发来的消息,当然手工修改每个群的消息设置也可以做到,但是每次改都非常不方便,如果可 以保存为模式(如命名为“工作模式”,寂寞的时候想找人聊天可以设置一个“寂寞模式”),在模式之间切换就更实用了。
智能手机(如我的Smartphone)在这方面就做的不错,值得学习。Smartphone上有各种“情景模式”,如普通,静音,会议,室外,自 动,耳机,车载和免提,每一种模式的铃声类型,音量,包括模式名称等多项设置都可以根据用户自身情况改变(当然默认的情景模式设置也已经很合理了,但我也 有在一些特殊的时候,做一些适当的修改)。
下面使用Windows Mobile 2003的相关屏幕截屏

2009年5月2日星期六

标签模式

目前的标签有以下几种模式(形式):

1. 手动外联标签模式。
这种模式将标签和内容分离,用户需要为指定文档/内容贴上不同的标签。例如Gmail和新版Wordpress的标签。
优点:简单易用,可控性强。
缺点:需要为每个内容设置标签。


2. 手动内联标签模式。
这种模式将标签和内容融合,用户同样需要为文档/内容贴上不同的标签,并且这种模式因为没有明确的标签输入区(标签输入区和内容输入区在一起),容易导致忘记贴标签,对于及时性和不可修改性的应用不太理想。如Twitter就有这方面的第三方应用,参考hashtags
优点:内容被语义化;标签本身简单易用,可控性也很强。
缺点:需要辅助标记,内容被干扰;容易忘记使用标签。

3. 自动内联标签模式。
这种模式需要用户手动设置标签集合,系统根据内容自动匹配标签。目前还没有发现这种模式的实际应用,比较接近的有关键字替换对局部文本进行评论(忘记怎么称呼了,也没找到相关网址,请大家给提个醒)。关键字替换只是展示层的,用户可以根据内容发现(暂且称之为)标签,但无法通过标签找到匹配的内容(由此想到了搜索引擎)。
优点:标签自动化,用户无需操心内容和标签之间的关系。
缺点:要匹配到正确的标签并不容易,大概到真正的语义时代可以解决。

由此扩展另一种:

4. 内联标签兼容模式。
系统根据用户设置的标签集合管理标签与内容之间的关系,另外用户也可以手动管理标签。
优点:标签自动化;可控性强。
缺点:简单问题变复杂,包括系统实现复杂度和用户使用复杂度。

不过回头想想,标签本身很简单,有必要把它变复杂吗?自动化就是不想手动控制,如果需要手动控制还要自动化干嘛?

2009年4月19日星期日

关于面包屑导航

一直都很喜欢千鸟志的标题面包屑导航方式,我准备在自己的博客主题中使用这种导航。
不过,千鸟志的导航部分和标题有重复(另外我比较倾向于使用标签而不是分类)。下面将导航和标题融合,去除标题部分。
这里使用了语义化的标签,并且在字体和颜色上突出当前的状态,与标题融合的也算恰当。不过当标签较多时会将标题挤到很靠后。
另外想到有一些Unix论坛使用的树形导航也不错,稍加改进如下:
标签应用比上面稍合理,而且css裸奔情况下表现也略如人意(话说“差强人意”这个词的“差”是“甚,殊”的意思)。对于导航层级不太深的应用,还是不错的。

2009年4月17日星期五

改进的菜单按钮

一直想写关于菜单按钮的设计,但是太懒惰的原因,老是拖着不做。
当然今天也没勤快到哪里去,下面第二个改进图是用Pencil画的,并没有用脚本实现,哎,懒啊。
先看QQ/TM的设计,无论选项是什么,按钮上都没有体现出来。
我觉得其实不论是文本,还是图标,都可以把当前选中状态体现在按钮上的,便于用户确认按钮当前的状态。下面是改进后的菜单按钮(以QQ/TM为例)。
一般来说,菜单按钮都应该做用户“最后一次”使用选择的动作。
例如早期QQ的视频、语音菜单按钮,MSN的菜单按钮,还有旺旺的菜单按钮,都应该如此。

2009年4月14日星期二

如何削铅笔

看了JunChen翻译的Adaptive Path:我们最爱的草图工具,我很受启发。之前也有让公司买彩色铅笔用,但现在已经离开用不着了。而且一直都很想买个GTD记事本以及其他文具,今天抽空就把装备给差不多备齐了。
回来削铅笔的时候,想起自己以前的经历:小时候用过转笔刀和小刀,都会把笔尖削的很尖锐,跟书本上的引导、同学的同化、以及思维定势都有关,而且也 基本适合那时候的使用场景。后来高考使用2B铅笔,也受一些美术专业朋友的影响,学会了把笔尖削得平板愚钝一点(有点返璞归真,大智若愚的感觉),这种削 法也一直 使用到现在。
这里要讲的就是这种削法。
削表面木头时,先不要削炭芯,倾斜度建议平滑一点,大概15°,也就是圆锥体切面角度大概为30°。大概完成的时候,被削的表皮为2cm长,露出的笔芯部分0.5cm。
然后是削笔芯,先在圆柱体的两边削出平行(渐进微斜)的两个平面,尖端厚度大概为0.15cm (1.5mm)。
再把笔尖顶端的一侧削(刮)出一点弧度,以便于书写和素描。
最后在稿纸上试笔,顺便打磨一下笔尖两侧,使之更便于使用就可以了。笔尖平时一般不用削,用的时候就可以把笔尖磨成舒适的形状,直到笔尖变短。

p.s. 1. 不知道白色笔芯的铅笔用来华什么,一般都用白纸,而且她也不能遮盖掉其他颜色,不然用做橡皮功能也不错。
p.s. 2. 文具店的阿姨也在讲求用户体验呢,正准备装修外面的广告招牌,对店里放笔的盒子的设计细节也有研究。

2009年4月8日星期三

Facebook 国家代码:86 年中国

RT(如题,如图):

电梯按钮设计

  1. 外面选择“上”或“下”的按钮换成“开门”,这样外面也可以中断自动关闭的电梯门,并增加选择楼层按钮。这样电梯系统可以预知各个起始楼层和目标情况,可以结合历史数据合理调整运转过程,对用户来说,也不必都挤在电梯里忙着(或忘记)选择目标层;
  2. 选择“上”、“下”以及楼层的按钮可以取消选中。建议如下:当前被选中,则按一下取消选中,否则选中。目前有一些稍人性化的电梯可以取消操作,但是要按N下,而一般用户又不知道N等于几?其实按一下就够了,不过避免误操作,连续按两、三下取消也可以,并在旁边给出提示;
  3. 里面保留选择上、下和楼层按钮(用户可以中途改变目标),但是选择楼层的按钮应该放到开、关门按钮的下面,方便儿童和残障人士使用(开、关门是自动的,影响不大)。

这个改造成本不知道算不算大,每一层都需要增加选择楼层的按钮,不过这对用户和系统都是有利的,为电梯系统设计的合理也做了准备。我觉得这是未来电梯的最低配置。

2009年4月4日星期六

Google Page-Rank 更新了

从Twitter上看到有人推才知道Google Page Rank更新的消息。

很多人都说他们的PR值下降了,或者只是持平,但是我的每个有效域的PR值都涨了,这跟我原来的PR值本身就不高有关,下面简单描述一下最近做的“SEO”工作和各子域PR值升值的情况。

www : 只有2个页面(一张门面和一张简历),前段时间改了下,较符合web标准,PR值从0升到了1;

glog : 用的Blogger.com,之前没有对搜索引擎开放,也从0升到了1。其实我一般是先在Blogger发日志,然后粘贴到blog域的,不过我评论时都留的blog域,“人气”稍好一点;

blog : 最近升级到了wp2.7,简单做了个毛坯主题,服务器从新加坡换到了美国,PR值也从1升到了2。

因为平时访问的人也不多,我也不是特在乎,这个值也合乎情理,我满足了。

2009年3月31日星期二

Firefox 上的超级 icon

Firefox浏览器,页签上的icon,有时候会出现红色的叉和黄色的感叹号,不知道代表的什么意思,有什么功能。很可能是跟Tab Mix Plus有关。
关闭Firefox是提醒:
右键标签发现有“保护标签页”和“锁定标签页”的选项菜单,原来是这两个家伙,不知道是不小心做了什么导致保护或锁定的(没有使用右键菜单)。

2009年3月26日星期四

笔试后双方最好能当面讨论题解

最近有好几次进阿里集团的笔试经验,有一个小体会:笔试后招聘方和应聘方最好能一起交流讨论题解(记得学校考试的时候,对题目有疑问时可以举手提问,老师也有出错题的时候,但是考场上发现后会立即处理。不过由于笔试时间短,出现意外再改的话时间会很仓促,所以建议在笔试后讨论,题可以先按照“常理”解答)。

前两次分别在淘宝UED阿里妈妈的笔试题里,有一道很相似的题:给数值对象(Number)扩展一个原型方法,将数值格式化为指定长度的字符串(另外还有一个条件,淘宝UED给的是“能指定格式最好”,阿里妈妈则是“能指定进制最好”)。

淘宝UED:
想到数值可能是小数,但题目没有知道小数保留长度等条件,这里只考虑整数位。
Number.prototype.format = function(len, format){
  var a=this.toString().split("."), l=a[0].length;
  if(l>=len) return a.join(".");
  return new Array(len-l+1).join("0")+a[0] + (a[1]?"."+a[1]:"");
};

阿里妈妈:
同样有小数问题,而且小数转进制的话也有特殊的地方,这里忽略小数。
Number.prototype.format = function(len, dem){
  var s = this.toString(dem), l=s.length;
  if(l>=len) return s;
  return new Array(l-len+1).join("0") + s;
};

好在两个部门笔试后都有相关讨论,对这一问题做了及时的初步探讨。

今天又去参加了阿里巴巴的笔试,这次的题没有重复的,但是也有一个问题压轴题。

大意是用CSS控制3个DIV,布局如下图(图是随手画的,不计较大小比例):
当时解答的时候,在我看来,似乎是只给3个兄弟关系的div,没有辅助标记,让写css控制布局。

css虽不是我所最擅长,但是这个布局还是可以做出来的,但是难点只在于不使用辅助标记,哪怕是div。
当时我的解法如下(这里是调试后正确的代码,当时思想相同,但代码没有写完整,也没有经过调试验证):
#box0{border:1px solid #f00;width:200px;height:400px;margin-bottom:10px;}
#box1{border:1px solid #0f0;width:200px;height:250px;}
#box2{border:1px solid #00f;width:600px;height:650px;position:relative;top:-664px;left:210px;}

<div id="box0"></div>
 <div id="box1"></div>
 <div id="box2"></div>

虽然效果基本相同,而且没有使用辅助标签,但总觉得有点ugly,因为这里的区域尺寸都是固定像素的,所以较好控制,当遇到未知高度时,#box2的top就不知道要设置为多少了,还是加一个辅助标签简单灵活。

如果可以使用辅助标记,我的题解如下:
#box{float:left;width:200px;border:0px solid #000;}
#space0{width:200px;height:400px;border:1px solid #f00;margin-bottom:10px;}
#space1{width:200px;height:250px;border:1px solid #0f0;}
#space2{width:600px;height:650px;float:left;border:1px solid #00f;margin-left:10px;}
<div id="box">
  <div id="space0"></div>
  <div id="space1"></div>
</div>
<div id="space2"></div>

还有一个问题是,因为有边框和间隔的关系,左右两个区域是无法上下对齐的。另外实际应用中还要考虑到清除浮动,父级元素等情况。

当时有想过打破(可能是自己臆想的)规则,用辅助div实现,但是由于尝试在规则之中实现,结果用了过多的时间,还答的一塌糊涂。

由于这次有多人一同笔试,而且时间很晚(预约18:30分),无法安排讨论,我对这道题也耿耿于怀,回来请教我那牛逼的朋友,第一选择也是使用辅助div。不知道阿里巴巴这道题的作者是怎么想的,难道是故意的?

2009年3月19日星期四

来自口碑的垃圾

这封来自口碑的垃圾邮件称“您的登录名是dingding875”,简直胡说八道,我从来都没有注册过口碑,更不可能用这么个帐号名。

不知道口碑从哪里偷来我的邮箱地址,做这么没有口碑的事情。

2009年3月18日星期三

白宫在新加坡

第一次打开白宫网站(whitehouse.gov),不小心看到其服务器在新加坡。


p.s. 嘿嘿,标题党。

2009年3月15日星期日

由邮件排序想到的

目前的电子邮件系统,均是使用倒序列出邮件列表,最新的邮件总是在第一封。这样做也并没有什么不好,不过这是最好的排列方式吗?

新邮件很容易将较早的邮件挤到下面甚至是后面的页面中,导致最先收到的邮件反而最后被看到,这就出现了公平性问题,当然并不是先到的邮件就一定要先看,甚至邮件被直接无视也有可能。而另一个问题是,同一个人连续发了多封相关邮件,这就出现了错误阅读顺序的问题,如果是最后一封修正前面错误的,而最后一封又有全文引用的话,看这最后一封就可以了,但如果没有引用呢,不看前面的邮件确实会摸不着头脑(Gmail的会话功能对这一问题处理较好)。

一般来说,有效率的人不会在收件箱保留过多未读邮件,所以收件箱邮件被分页的情况会比较少见(受欢迎的收件人例外),所以按顺序排序是个不错的选择。

另外如果收件箱或者存档箱中确实需要分页该如何排序?我的想法是“总倒序,分顺序”,即总体数据是按倒序排列的,而被分页的页面则使用顺序排列显示。效果:第一页就是最后一页,而显示页每一封邮件则按顺序排列。

后来在VeryCD看到一个更好的方案:所有数据按顺序排列,但是默认(首次)显示的是最后一页。细节上可以有一个更好的改进:默认页将尽可能多的显示内容。例如默认每页显示50条评论,当总共有60条评论时,默认显示第2页,而第2页按顺序排列显示50条,第一页显示10条。

当然最好的情况是综合类似Gmail会话功能的方式,将相同主题归为同一个会话中,这类似于Wordpress的一个评论插件(效果参看aw's blog,新版Wordpress好像已经内置该功能了)。

个人意见综述:
  • 收件箱邮件列表完全使用顺序排列。先到先被看,这样我就不会因为希望得到重视,在周日写好的邮件,却等到周一才发出去了;处理较早有邮件也合乎常理。
  • 评论、留言、邮件存档箱使用顺序排序,默认显示最后一页。这样的话,像Wordpress这样使用英文语言,放在底部左侧的Older Posts也不会觉得别扭了。


p.s. 另外发现draft.blogger.com的自动保存还是很人性化的,不是使用定时自动保存,在用户输入过程中不会瞎保存影响用户,而是在输入停顿时才自动保存。这有点类似我的节奏感知器上运用的思想。

2009年3月13日星期五

尊严

看了Twitter上有推李普曼的《没有感到的尊严》一文,想起自己也有类似的经历。

高中时在外面读书,和一个在我看来很赖皮很讨厌的同学关系不合,一天他挑衅被我回击,晚上他叫了一个人过来跟我“讲道理”,寝室恰巧没电,没看清对方的面容,但是身体不比我弱。当他们把我逼到墙角时,我借助墙壁的力量将对方踢了出去,不知道对方是不是本身就没什么底气,叫了一声“不要这么嚣张”之后就再也没有回来。如果对方狠一点,我可能就要吃亏,但是如果当时我软一点,我在这个讨厌鬼面前就永远都抬不起头。

当然我并不总是那么“英勇”,学校当地有一个死胖子同学老挑衅我,我就回敬了一句,并且不礼貌的骂了对方。死胖子好像抓到把柄了一样,老要我道歉,在寝室里我们还打了一架,当时我被打的很惨,不过没有道歉,上课的时候他总坐到我旁边捣乱影响我学习。终于有一节课上我再也容受不了,向他低了头。到现在我还对这事耿耿于怀,想当时如果不低头会怎么样?

为什么老是想到打架呢?当对方无理取闹时,暴力确实是直接有效的解决办法呢,如果能比对方更暴力的话。

2009年3月10日星期二

淘宝应聘后记

前段时间在北京做项目,期间看到一篇关于"如何做好一份前端工程师的简历?",又在blueidea看到一些感兴趣的招聘帖,就参照着简要写了一份简历,并随手投了一些。

口碑UED因为已经招好了人,就帮我转投给了淘宝UED(其实好像我本身也有投)。

后来就接到淘宝UED部门的面试电话,由于身在外地,以及一些特殊原因,我不能立即赶回杭州面试,结果一直拖着,好在最后有hr玄渡给我留了联系电话,让我可以回杭州后直接联系。

昨日(3/9)打电话给玄渡,约好今天(3/10)10点左右去面试,他还特地发来邮件邀请函。结果我却十分遗憾的迟到了10多分钟(按10点整计算)。

前台给了一份简历表让填,这是我没想到的,因为之前包括网上的网页简历和电子档附件给小马的电子简历都有事先发过来,我想淘宝应该有打印件,不过这也在情理之中,是我太山寨了。

我虽然也算是久经沙场,但是现在竟拿不稳笔杆。。

忐忑不安的填好简历,过了有一段时间,圆心才送来一份笔试题,3页总共7题30分钟时间。

这次的笔杆跳得更厉害,我甚至怀疑过几天我自己是否能看懂。

好在题不是很难,用了不到一半的时间就做完了。为了缓解压力,就走到大厅的电子屏前看中国地图上闪烁的圆点。

面试我的有三个人,小马,圆心和正淳,算是技术调查,主要是探讨简历和笔试内容。不过我的准备真的很不足(其实也没有专门做准备,都是平时的积累),结果有不少问题我答不上来,比如说标签语义化,em是做什么用的,这些特殊的标签我还真是用的少,而且我回来查了一下XHTML和标签语义化的资料,发现我掌握的实在太少,还有js和框架的内容,我也答的支支吾吾,虽然我并不是不知道,但老是思维中断,连数组的push, pop都没想起来。

还有让我给自己的js,css,x/html程度打分,我很恬不知耻的给自己掌握的js和x/html打95分,在我看来,越往上,要加分越难,所以这相差的5分也是一个难以逾越的高度。但是事后想起来,自己真实的分数差不多应该是js 80分,x/html 70分。css则打75分也有点偏高,应该大概是65分,。其实在回答这样的问题前,要先问清楚标准,给出几个“标杆”,如60分和100分各是什么程度?对方能给出其自身的打分最好。如果按自己的单方面标准或者根本不经过大脑,则很容易高估自己。

说到我的性格,应该是内外各半,或者稍向内偏一点(在我看来这是缺点,我也有努力)。缺点的话,有朋友说我心思太细密,有敏感的嫌疑,也有说我太实在,直性子,冲动。优点则说我总体上是好的,待人诚恳,热情,有上进心,勤劳,是个好人。我自己则觉得偏内向了点。

最后我也象征性的回问了几个问题,因为还不是淘宝员工,也不好问太内部的问题。现在想想,是应该事先想好几个有质量一点的问题。例如:
1. 对我的简历有什么看法;
2. 对我的笔试有什么见解,给打个分;
3. 自己给对方的印象如何;
4. 让对方介绍一下工作的情况,对方对现在的工作有什么看法。

已经12点半,hr已经去吃饭,便约我下午1点半复试(主要是和hr谈)。

随便扒了几口饭,提前来到淘宝大厅。

玄渡人不错,从电话里都能感觉出来,很热情,说话也字正腔圆。

大概因为经过上午的历练,也和玄渡个人有关,一对一的谈话中我再也没有感到紧张,但是却把实话一句不漏的说了出来,被玄渡的笔记了个正着。

说是一周内给答复,不知道是不是委婉的拒绝,听天由命吧,自己准备的也不算太好。但是如果错过这次,我就再也没有这样的机会了吧。

--
闲耘 (xianyun.org)
如果自以为了不起,那一定是高估了自己,或者是给自己定的标准过低。
Sent from: Hangzhou 33 China.

遭遇鬼手

今天在火车站转车,没零钱恰巧又渴了,到一家兼卖手机卡和零食饮料的小店要了瓶绿茶,居然要4块,不过物价局不管事也没办法,给了一张10块的让她找零。眼尖的MM拿着一大叠10块的说让我跟她换100块的整钱,没想那么多就同意了。

MM找回我9张10块的和6张1块的,我数了两遍说少了10块,之前绿茶的给了10块呢。MM不信,说要数一遍,是少了1张10块的,从旁边的mm那里拿了一张放在找回的钱上,递给我。这次我没有警觉,装进钱包赶公交车去了。MM还很热心的说不急,这里公交车10分钟一趟呢。

坐上公交车,我想去以前看过网友发过的帖,掏出钱包一数,果然少了2张10块的。

虽然以前看过别人的提醒帖,但是自己没有经历便少了许多警觉。记得当时MM数钱的手法,是把钱折向自己的(跟我折向前方不同),但是没注意(也没想过注意)她是怎么把钱卷走的。

好像以前在安阳火车站也有过类似的经历,但是当时并不知道鬼手,不知道钱是怎么没了的。

下午回来时经过火车站,赖在店里提醒其他顾客小心,终于把钱要了回来。p.s. 讨要的时候一定要注意他们的大汉,不要被他们围住了,尤其是人少的时候。

2009年3月9日星期一

哎,这样的一个怪梦

凌晨梦见高中同学(六子)在学校里持枪挟持人质,我从屋里出去的的时候,不知哪里也随手弄了一支旧式长枪,提着去和六子谈判。六子不听劝,我便回了,到做校长的大爸家要手枪,说是救人质,不想一借就中。

装在裤兜里便走,后来不放心,问路人甲怎么拉上保险,居然是枪屁股逆时针旋转90度,这也太不保险啦。

换装在上衣口袋,想试试拉上保险是否会走火,砰的一声,上衣破了,摸摸从破洞里探出来的枪口,发现弹头还没离开弹壳,塞在枪口上。。。

这是个什么鬼梦。

2009年2月12日星期四

Gmail labs:Multiple inboxes


Gmail有了一个很棒的设计,多收件箱(Multiple inboxes),允许用户在收件箱里显示多个窗口,如标星邮件箱,草稿箱等,可以在选项中自行设置每个inbox的过滤条件,也可以选择不同的布局。

常用的条件有:
is:starred 标星邮件
is:unread 未读邮件
is:chat 聊天记录
is:draft 草稿邮件

另外可以使用标签过滤,如:
label:AD

发、收件地址
from:e@mail.address
to:e@mail.address

同样可以使用包含的关键字过滤:
%KEY_WORD%

总之,你可以使用Gmail的所有高级语法 。

2009年1月11日星期日

去除MSN 9的广告

今天发现msn 9可以用在Windows Server 2008上了,像我这么喜新厌旧的家伙,怎么会放过她,立马上。

客观的说,msn 9做的还是很棒的,已经能够支持群聊,界面也大有改善,不过它那个超级大而又吸引眼球的广告仍是那么讨厌,搜了一下,发现1个2个...方法,各有优缺点,而又都没有去除干净:第1个只去除了主窗口(好友列表)下的大家伙,聊天窗口的广告没有被去除,而第2个方法功能比较饱满,但是不知道什么原因(可能是之前使用了第1中方法),开始的时候主窗口的广告反选第一个去广告选项可以去掉,后来无论正选反选都不行了,解决办法是先使用第2种方法,再使用第1种方法。

由于第2种方法的版本和最新的(14.0.8050.1202)有点不同,这里贴图如下:
这里有两个(第2个和第9个)去除广告的选项(Remove Advertisement),分别去除的是主窗口和聊天窗口的广告。点击左侧的选项,可以在右侧预览。


2009年1月6日星期二

Javascript无块级作用域

最近在做一系列Javascript压缩工具,语法压缩,语义压缩,字符串压缩均有涉及(p.s.有趣的是,压缩变量名之类的“有损压缩”不影响代码执行,但是字符串压缩这样的“无损压缩”却总是需要解压消耗)。

在实现压缩局部变量名时,最初的实现是将 if/else, for/in, do/while, switch/case/default, try/catch/finally, with和Object实例对象(后面统称为“块级作用域”)与function一样,都作为独立的作用域,但是测试发现在Javascript中并不是这么回事。

尝试着在块级作用域里声明定义变量:
if(true){
var bool=true;
}
document.write(bool); // output:true
会发现输出true,而且不论嵌套多深,也不论使用任何块级作用域进行嵌套,最后变量依然如同在调用处之前,而且同级的作用域中定义的一样;值为在此之前,在块级作用域中所做改变的结果。注意:如果块级作用域未被执行,则其中声明定义的变量会被声明(var name),但不被定义(即未被初始化,此时name为undefined,引用name时不抛异常)。
if(false){var bool=true;}
document.write(bool); // output:undefined
之前虽知道,IE里for(var i=0;...)里定义的i,在for之外也是可以使用的,但是现在才知道这种情况更为猖獗,大出我的意料之外,而更意外的是,IE 7(IE6?), Firefox 3(FF1,FF2?), Opera 9, Chrome 1, Safari 3表现均丝毫不差。

虽然与某些编程规范不同,但是js就是这样了,唉。早知道这样,压缩变量名这部分也就不用那么费劲了,只得重写了。

另外还有一些Javascript作用域方面的文章:
Javascript中的作用域,好像是realazy翻译的,文章很好,虽然有点文不对题(主要阐述this的作用域链问题)。
js变量作用域及可访问性的探讨,详细介绍了各种变量的作用域及其可访问性问题,有部分不准确/正确的,出处未知,遍地都是转载。

附A 测试代码:
// Global Scope
if (true){
var v10 = true;
}else {
var v00 = false;
}
document.write("v10 : "+v10+"<br />");
document.write("v00 : "+v00+"<br />");
document.write("<hr />");

// Function Scope
function functionScopes(){
if (true){
// 以下均执行
var v11 = true;

do{
var v12 = true;
}while (false);

while (true){
var v13 = true;
break;
}

switch (1){
case 1:
var v14 = true;
default:
var v15 = true;
}

try{
var v16 = true;
throw new Error("");
}catch(e){
var v17 = true;
}finally{
var v18 = true;
}

for (var v19=0; v19<1; v19++){
var v1a=true;
}

with(v11){
var v1b = true;
}

function inn1(){
var inn11 = false;
}
}else {
// 以下均未执行
var v01 = false;

do{
var v02 = false;
}while (false);

while (false){
var v03 = false;
}

try{
var v06 = true;
throw new Error("");
}catch(e){
var v07 = true;
}finally{
var v08 = true;
}

switch (1){
case 1:
var v04 = true;
default:
var v05 = false;
}

for (var v09=0; v09<1; v09++){
var v0a=true;
}

with(v01){
var v0b = true;
}

function inn0(){
var inn01 = false;
}
}
document.write("v11 : "+v11+"<br />");
document.write("v12 : "+v12+"<br />");
document.write("v13 : "+v13+"<br />");
document.write("v14 : "+v14+"<br />");
document.write("v15 : "+v15+"<br />");
document.write("v16 : "+v16+"<br />");
document.write("v17 : "+v17+"<br />");
document.write("v18 : "+v18+"<br />");
document.write("v19 : "+v19+"<br />");
document.write("v1a : "+v1a+"<br />");
document.write("v1b : "+v1b+"<br />");
document.write("<hr />");
document.write("v01 : "+v01+"<br />");
document.write("v02 : "+v02+"<br />");
document.write("v03 : "+v03+"<br />");
document.write("v04 : "+v04+"<br />");
document.write("v05 : "+v05+"<br />");
document.write("v06 : "+v06+"<br />");
document.write("v07 : "+v07+"<br />");
document.write("v08 : "+v08+"<br />");
document.write("v09 : "+v09+"<br />");
document.write("v0a : "+v0a+"<br />");
document.write("v0b : "+v0b+"<br />");

document.write("<hr />");
try{alert(inn11);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(inn01);}catch(e){document.write((e.message||e)+"<br />");}
}
functionScopes();

document.write("<hr />");
try{alert(v11);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v12);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v13);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v14);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v15);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v16);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v17);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v18);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v19);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v1a);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v1b);}catch(e){document.write((e.message||e)+"<br />");}

try{alert(v01);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v02);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v03);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v04);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v05);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v06);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v07);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v08);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v09);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v0a);}catch(e){document.write((e.message||e)+"<br />");}
try{alert(v0b);}catch(e){document.write((e.message||e)+"<br />");}

附B 测试结果(IE 7, FF 3, Opera 9, Safari 3, Chorme 1均同):
v10 : true
v00 : undefined

v11 : true
v12 : true
v13 : true
v14 : true
v15 : true
v16 : true
v17 : true
v18 : true
v19 : 1
v1a : true
v1b : true

v01 : undefined
v02 : undefined
v03 : undefined
v04 : undefined
v05 : undefined
v06 : undefined
v07 : undefined
v08 : undefined
v09 : undefined
v0a : undefined
v0b : undefined

'inn11' 未定义
'inn01' 未定义

'v11' 未定义
'v12' 未定义
'v13' 未定义
'v14' 未定义
'v15' 未定义
'v16' 未定义
'v17' 未定义
'v18' 未定义
'v19' 未定义
'v1a' 未定义
'v1b' 未定义
'v01' 未定义
'v02' 未定义
'v03' 未定义
'v04' 未定义
'v05' 未定义
'v06' 未定义
'v07' 未定义
'v08' 未定义
'v09' 未定义
'v0a' 未定义
'v0b' 未定义

2009年1月2日星期五

开放篮球场地.地标工程

作为业余篮球爱好者,作为他乡游子,每到一个陌生的地方,都想尽快找到一个能施展球技、或者仅是活动一下筋骨的场地。就地解决当然也可以,但是如果有自由开放的美好世界,为什么不加入进去呢?

一般来说,大多数开放的篮球场地都在学校里(大学最多,中小学一般不对外开放),有一些公益场所也有简易的设施,所以希望能有一些学生朋友能给予帮助,我将尽力争取得到帮助。



基于这样的想法,我展开了一个“开放篮球场地.地标工程”的想法,为广大篮球爱好者服务。首先做好了几个我所知道的地标:http://labs.xianyun.org/OpenBasketballField/landmark/OpenBasketballField.All.in.One.kmz

将地址复制粘贴到Google Maps谷歌地图)搜索栏,回车即可;或是下载到本地,使用Google Earth打开。


全国现有完整地标(All in One):
http://labs.xianyun.org/OpenBasketballField/landmark/OpenBasketballField.All.in.One.kmz

杭州:
http://labs.xianyun.org/OpenBasketballField/landmark/HangZhou.kmz

北京:
http://labs.xianyun.org/OpenBasketballField/landmark/BeiJing.kmz


另有在线地标,直接Google Maps上编辑即可(所有登录了Google账户的网友都可以编辑)
--
主要定位开放的篮球运动场地,默认为室外,尤其是免费的场地,室内或收费场地另附说明。

标题格式:地名[.开放封闭未知][.室外室内][.免费收费]

使用默认图标(期待志同之士提供更形象的图标)
红色不带圆点:
蓝色不带圆点:
紫色不带圆点:开放程度未知
红色带圆点:开放,人气旺
蓝色带圆点:开放,人气一般
紫色带圆点:
黄色不带圆点:封闭

以卫星地图为准。所有地标和文字描述仅作参考,欢迎修正(所有登录了Google帐号的朋友都可以进行修订)。

在线地标列表:
http://maps.google.com/maps/user?uid=108314985261981078822&hl=en

北京:
http://maps.google.com/maps/ms?hl=en&ie=UTF8&lr=lang_zh-CNlang_zh-TW&oe=UTF8&msa=0&msid=108623690175354072173.00045480d1fa17e9056ac

杭州:
http://maps.google.com/maps/ms?hl=en&ie=UTF8&lr=lang_zh-CNlang_zh-TW&oe=UTF8&msa=0&msid=108623690175354072173.00045f6778d694e0d3cc3