两个字的域名

七月 19th, 2010

前阵子,经常想着弄个好点的域名,土豆、白菜、黄瓜之类的域名早就没了,总想着是不是还会剩下几个有意思的域名空着的呢?于是乎将新华字典的拼音索引目录来了个2个字组合,结果就是包括“tudou”,也包括很怪的,比如“biegui”,反正所以中文拼音可能出现的2个字的组合全了……一共是17万条记录,OMG……

拿着这17万条记录,写了个检测.com后缀是否注册的程序跑了2天,结果非常地糟糕,剩下近4万条结果中全是”zadei”、”yocui”、”cediu”这些毫无意义的词。拿到结果后不死心,想将所有的结果用google/baidu再跑一遍,让搜索引擎根据搜索关键字返回的搜索结果条数来告诉我哪些组合还稍微有点价值,哪知道这些哥们全不让我的程序跑,要不就是出验证码,要不就是直接出404.反正不会返回正常的搜索结果。。。

最后,我直接用Google拼音词库,导出一份2个字的词组组合,与之匹配,结果依然是凄惨的,匹配成功的也就是”太亏”、”别贵”之类的冷门玩意儿了。

失望了一把,后悔没早点干这件事呀,哈哈。

我的Google Nexus One黑屏了

七月 18th, 2010

自从我的Nexus One升级到2.2,插上耳机看视频听音乐不亦乐乎,没想到杯具降临了……
今天中午躺在床上边充电,边打开虾米网听歌。结果没过多久手机进入待机状态后开始卡了,音乐也变得断断续续地,按开机键无法唤醒。无奈之下,拔电池。
当我在装上电池时,杯具产生了:
1、能开机,但绝对的黑屏,啥也没有……
2、能充电,插上充电器,充电指示灯显示正常。
3、能接电话,用老婆手机打我的手机时,有震动但没铃声,轨迹球指示灯正常显示。凭记忆在触摸屏上滑屏接听,能正常通话。
可杯具的是,黑屏啥也干不了……

查了下HTC网站,Nexus one在香港的保修倒是服务周到,上门取货,送货上门,全部免费……可惜不支持大陆地区,发了封邮件给HTC,等待处理中,唉!

======Update20100720===========
HTC的售后服务还是不错的,在网站上用Email联系他们后,客户人员晚上给我打电话了,询问了情况后积极地在解决。包括:
1、只需要告诉他们手机的IMEI码,他们就能答复你该机器是否可以保修。
2、告知IMEI码后不需要其他任何凭据,只需要将裸机(不含手机卡、SD卡、电池等配件)送过去就行。
3、我的手机已经委托公司香港那边的同事抽空带回香港。

关于密码输入延迟屏蔽的UE细节

六月 25th, 2010

最近看到有一些网站开始启用一个类似Iphone、Google Andriod手机的密码输入体验,大致效果如下图,在用户输入密码的时候可以将用户的输入以明文的方式短时间延迟屏蔽。提高用户输入密码的正确率。有点意思,分享一下:

网易通行证的登录页面

目前我看到可用的体验地址有:网易通行证登录页面 网易邮箱注册页面,之前看到新浪邮箱也用了,现在找不到了。

实现原理

从上面两个例子的源代码中可以找到,网易登录页面的是使用的一个开源的项目,叫dpassword,而邮箱注册页面是自己写的javascript文件

Html代码部分

我们知道,原生态的密码输入框是做不到这种效果的,为了实现这种体验,其实是使用了“障眼法”的。在html中,放置了2个input控件,只是一个是用来显示效果的,一个是真正用于保存密码的,如:

<input type="hidden" id="pwd" value="" name="password">
<input type="text" value="" maxlength="16" class="inp ipt-normal" id="password">

将type=”hidden”的那个隐藏input控件来记录用户输入的密码,将type=”text”的这个拿出来做延迟效果。

Javascript部分

javascript需要实现的,无非就是做两件事:

  • 将用户在假的密码输入框中的输入记录到input type=”hidden”这个隐藏控件中去。
  • 在暴露出来的这个假的input type=”text”中去实现延迟屏蔽的动态效果。

为什么需要2个input控件才能完成这个任务,这也是“障眼法”的关键所在,传统密码输入框输入任何字符,都直接是以“圆点”类似的不可见的方式出现的,根本不可能实现先是明文,然后延迟变为“圆点”类的显示方式,此处输入的“圆点”,其实真的是通过javascript将用户输入的字符替换为一个“圆点”的特殊符号的。

所以在网易邮箱注册的那段javascript文件中,可以看到这样的代码片段:

var replacement = unescape('%u25CF');
//定义一个用于替换的“圆点”的字符,% u25CF
function getpass(passin,passstore)//passin为假的密码输入框的ID;passstore为隐藏控件的ID
{
	var passwd=document.getElementById(passstore);
	var strin=passin.value;
	var strcache=passwd.value;
	var password="";
	var strout="";
	for(i=0;i<strin.length;i++)
	{
		switch(strin.charAt(i))
		{
			case replacement:
				password+=strcache.charAt(i)==""?strin.charAt(i):strcache.charAt(i);
				break;
			default:
				password+=strin.charAt(i);
				break;
		}
		strout+=replacement;//将用户输入的变为了“圆点”
	}
	passwd.value=password;
	passin.value=strout;//将假的输入框中的字符替换为“圆点”
}

我的理解

我不确定这种体验是否是源于Iphone,但目前我知道的应该就是Iphone、Google Andriod手机上是这样的。这种良好的手机输入体验,一定是因为触摸屏的高出错率(相对我们的PC键盘输入)驱动的。所以在网站上应用这种细节,它的价值一定是比应用在触摸屏手机上要小的多的……对于稍微熟悉电脑的用户,盲打输入密码还是没有问题的,这种出错率远比误打开caps lock键出现的次数要小的多。

当然,此举也引起了部分不明真相的网民的恐慌,呵呵。

HTML5的表单验证

四月 5th, 2010
  • 输入框自动获取焦点

    在网页加载完成是,光标自动聚焦在用户需要输入的地方,比如邮箱登陆页面的输入用户名,之前我们需要在网页onload的时候来用javascript代码指定某个输入框获取焦点的做法,现在html 5直接支持在输入框中加入autofocus属性。

    <input type="text" id="username" name="username" autofocus />
    
  • 文本框的输入提示

    之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息,现在只需要增加一个placeholder属性。

    <input type="email" id="uemail" name="uemail" placeholder="example@domain.com" required />
    
  • 强大的表单验证功能

    判断必填项

    判断数据格式

  • 有趣的input type=”range”

    可以直接拖动,可以设置最小值、最大值、以及每拖动一格的步长。

    <input type="range" min="1" max="100" step="10" name="s" />
    
  • input type=”number”

    可以通过点击右侧的上下箭头,直接进行加减操作。

  • 输入框下拉提示

    可以用作现在很流行的ajax输入提示,也可以当作是一个可编辑的下拉菜单。即可自行输入,也可以直接下拉选择。

    <input id="search" type="url" list="searchlist" required />
    <datalist id="searchlist">
    	<option value="http://www.google.com" label="Google" />
    	<option value="http://www.yahoo.com" label="Yahoo" />
    	<option value="http://www.bing.com" label="Bing" />
    	<option value="http://www.baidu.com" label="Baidu" />
    </datalist>
    
  • 还有默认的日期选择

    <input type="date" name="birthday" />
    

完整的DEMO:http://www.oneflash.net/demo/html5-form-demo.html,请使用最新版本的Chrome+Oprea一起浏览,才能看到全部效果……

HTML5的写法

四月 5th, 2010

对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西。

  • 文档声明更简单了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--在HTML5中,这样写:-->
    <!DOCTYPE html>
    
  • html标签上不需要声明命名空间。

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <!--在HTML5中,这样写:-->
    <html  lang="zh-CN">
    
  • 字符集编码声明也简单了

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--在HTML5中,这样写:-->
    <meta charset="UTF-8" />
    
  • 可以不用给css及javascript代码写type属性了

    <script type="text/javascript"></script>
    <style type="text/css"></style>
    <!--在HTML5中,可以直接写:-->
    <script></script>
    <style></style>
    
  • 没有XHTML代码规范的要求

    所有的标记都必须要有一个相应的结束标记;
    所有标签的元素和属性的名字都必须使用小写;
    所有的XML标记都必须合理嵌套;
    所有的属性必须用引号”"括起来;

    <div class=test></div>
    <br>
    <INPUT TYPE="TEXT" />
    <!--这些都不做严格要求-->
    

分享:用纯CSS绘制的网站图标

三月 24th, 2010


在Google Reader上看到网友分享的一个链接,真的发现自己已经out了。上面的这张图,是纯CSS实现的,没有背景图、没有Javascript代码,更让我惊讶的是,它的html代码居然是如此的漂亮,没有一丝丝的代码冗余:

<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

作者的原文在这里,作者的Demo在这里,完整的CSS文件在这里,为了能看到如图所示的效果,请使用Firefox或Google Chrome等支持css3的浏览器。
Read more »

惠普笔记本Windows 7声卡驱动安装成功

十一月 8th, 2009

我用的是一台不算很古老的惠普笔记本Compaq Presario V3148笔记本,很早就安装Windows 7来玩,但由于声卡一直不能顺利驱动换回过xp,这几天又整回Windows 7了。分享一下惠普笔记本安装windows 7关于声卡无法正常安装的问题。

主要症状:

  • 安装Windows 7后基本无法使用语音聊天了,因为对方基本上听不到我在说话。
  • 更神奇的是,怕吵到我丫头,想插上耳机,居然耳机和外方喇叭都在响。
  • 安装HP官方提供的Windows Vista下的声卡驱动一直无法正常安装。

解决办法:强行安装

其实,用HP官方的Windows Vista下的Conexant High Definition Audio声卡驱动是可以搞定的,关键是windows 7默认的驱动程序要是以为它自带的驱动比vista下的Conexant High Definition Audio驱动更好,所以导致安装vista下的驱动不成功。那我们就来狠招:
Read more »

阿里巴巴集团研发院招聘会

十月 14th, 2009

阿里巴巴集团研发院招聘会

本周末(17、18号2天)我会在深圳的现场招聘会,对交互设计师前端开发工程师视觉设计师PHP开发工程师产品经理等职位感兴趣的朋友,欢迎你带上简历来找我。

现场招聘会地址:深圳-马哥孛罗好日子酒店

Bing高级用法之根据IP查看网站列表

十月 6th, 2009

bing-ip-lookup

搜索引擎都有一些通用高级用法,比如常见的filetypesite、info、intitle、inurl等。
最近发现Bing.com支持一个新的用法,就是按照IP地址查询该IP上的网站。用法很简单,比如:”ip:114.80.208.81″就可以查询到114.80.208.81这个IP的服务器上托管的所有网站列表。
这个功能不错,最起码买虚拟主机的时候我们可以做到心里有数,知道自己的空间有多少个站点。domaintools.com也提供这样的功能,不过是收费的,呵呵。

IP Address lookup
Bing can lookup any IP address using an advanced parameter and display a list of domains that are hosted on that IP address. The parameter to do that is the following:IP:[IP Address]Substitute [IP Address] with a valid IP. The query IP:207.46.104.147 would for example display a list of domains hosted on that IP address.

如何通过网页发送会议请求

十月 1st, 2009

之前为公司设计了一套内部使用招聘系统,目的就是将招聘过程中的简历筛选、初试、复试、终试等繁琐的线下操作全部无纸化操作,其中有一个功能就是安排面试,简历经过筛选后HR可以在系统中选择面试官、面试时间、面试地点来安排面试,当然我希望的是邮件能直接以Outlook Meeting的方式直接推送到面试官的日程安排中去,而不是以一份普通的通知邮件来告知面试官。如下图:
发送会议请求

点击接受了之后,就直接出现在他的日历中,并且会提前提醒。

发送会议请求

结果开发的同事做出来果然是简单的邮件通知,我猜想可能是需要基于Microsoft Office做一些额外的开发,但Outlook的会议请求是可以直接发给Gmail的。而且Goole日历与Outlook两者之间是互通的,那就基本上与Office无关了。

剩下的只能是格式了,Google了半天找到iCalendar格式的相关资料,普通邮件的格式是text/html,而会议请求、Google日历中的活动都是text/calendar的格式。但自己打开vs2008搞了个demo,捣腾了半天也发不出来,结果证明,我开发能力太菜了……

目前的解决方案倒是有一个,可惜是收费的。

www.aspnetemail.com网站上提供完整的解决方案[Samples],下载了他的代码下来看了看,实现方法基本和我说的一样,只是他封装了dll,还搞了license,着实麻烦……说了这么多,其实我想说的是,哪位大哥帮忙写一下代码吧?这个需求应该还是比较普遍的,非常好用!希望有朋友能Share一下代码。

===========无奈的分割线=========

好长的假呀,买不到火车票的人好惨呀……