看这图长的是不是很像Path呢？湖畔，淘宝无线出品。2011年5月份就开始内测了[内测图片]，第一次用它，给我的感觉就是看起来又像Facebook、又像Tumblr、又像Google+。

当Path 2.0重装上阵时，似乎湖畔也找到了自己学习的榜样。不过我有点没太看懂这个新Logo是什么寓意……

有兴趣的可以去下载一个玩玩。

我的用后感：

• 设计风格不喜欢，从Logo到整理的圆角外框。
• 把Path主界面的左右滑动抄过来了，但缺乏操作提示，不知道滑动的人估计要玩很久才知道怎么进入设置、好友管理界面。
• 好友机制让人混乱，给人的感觉即不像QQ好友要相互验证、也不像Flickr基于内容访问权限的单向授权与相互授权、也不像微博的关注与粉丝。它叫“好友”和“加我的人”，而且“好友”里还包括对方没加我好友的……有点晕。

新版本的Path来了，给了我们很多的惊喜：

• 私密好友上限从50上升到150了

  Path从一开始就是打着“反社交”的旗号来的，口号就是：“share life with the ones you love.”为什么是150人，Path是这样回答的。

• 从图片分享彻底突围了

  新版的Path可以与好友分享图片或视频（一段不超过45秒的）、好友、地理位置、音乐、文字信息，更创新地增加了”Sleep”、”Awake”状态，将QQ时代的“在线”、“离线”的状态演变为移动互联网时代的“睡了”、“醒了”。

• 内容隐私设置

  用户分享的内容，可以设置为“仅自己可见”、同时也可同步内容到Facebook,Twitter,Foursquare和Tumblr。这样一来，Path既可以当作自己的私密日记、也可以和私密好友小范围分享、还可以同步到Facebook等社交网站。

• 聚焦移动设备，网站端功能弱化。

  在新的Path网站中，除了下载App以及帮助说明，几乎找不到其他的功能，而之前的用户登录、设置、网站版Time Line几乎都移除了。

• 增加了应用内收费图片滤镜

  这个反正我是不会去付费了，哈哈。

最后感叹一下，还是老外厉害，出了Instagram，然后就是Path、Color、Pinterest。总能找到产品差异化进行突破。

相关阅读：

• Path上演“华丽”转身
• 社交网络已是红海，Path2向深海潜进

接近23点，旅客第二次登机，顺利起飞。飞行过程中空姐挨个发补偿金，每人400元，机上大约200名乘客，估算一下海南航空为此次航班延误至少支付了近10万元的赔偿金。

============华丽的分割线==============
1、延误6小时，值班经理不及时安抚旅客，躲起来是非常无耻的。
2、消费者权益，还真得靠自己去争取。感谢今天带领大家维权的兄弟，全部旅客表现得非常团结！
3、飞机上的快餐傍晚18点已经分给大家吃了，海航没有及时补充给养，导致半夜饿得我前胸贴后背呀，不厚道！

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

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

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

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

======Update20100720===========
HTC的售后服务还是不错的，在网站上用Email联系他们后，客户人员晚上给我打电话了，询问了情况后积极地在解决。包括：
1、只需要告诉他们手机的IMEI码，他们就能答复你该机器是否可以保修。
2、告知IMEI码后不需要其他任何凭据，只需要将裸机（不含手机卡、SD卡、电池等配件）送过去就行。
3、我的手机已经委托公司香港那边的同事抽空带回香港。
======Update20100827============
在同事的帮助下，历时1个月，机器从香港顺利回来了。其实HTC香港维修中心只用了4天，包括免费取货和送还。其他时间都耽误在人肉物流上了。还是非常感谢阿里巴巴的同事。

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

实现原理

从上面两个例子的源代码中可以找到，网易登录页面的是使用的一个开源的项目，叫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键出现的次数要小的多。

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

<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一起浏览，才能看到全部效果……

• 文档声明更简单了。

  <!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" />
  <!--这些都不做严格要求-->
  

<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的浏览器。

让我们来重现一下他的制作过程：

基本框架的实现。

每个图标大小width:64px;height:64px;间距20px;将a标签设置为display:block;在加上css3的圆角、文字阴影属性，详细css如下：

.cssicon {width:500px;overflow:hidden;margin:0 auto;margin-top:100px;}
.cssicon ul{list-style:none;padding:0;margin:0;font:0.875em/1 Arial, sans-serif;}
.cssicon li{float:left;overflow:hidden;margin:20px 20px 0 0;}
.cssicon ul li a {display:block;width:64px;height:64px;overflow:hidden;border:1px solid silver;line-height:64px;text-decoration:none;
/* css3 */
text-shadow:0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

此时的效果在这里。

巧用文字效果

我们看facebook图标的实现。代码如下：

.cssicon ul li a {display:block;width:64px;height:64px;overflow:hidden;border:1px solid transparent;line-height:64px;text-decoration:none;
/*将上面li a定义中的border属性修改为border:1px solid transparent*/
.cssicon ul li a:hover,.cssicon ul li a:focus,.cssicon ul li a:active {	opacity:0.8;border-color:#000;}
/*增加hover效果*/
.facebook a {
	border-color:#3c5a98;text-transform:lowercase;text-indent:34px;letter-spacing:10px;	font-weight:bold;	font-size:64px;line-height:66px;color:#fff;background:#3c5a98;	/* css3 */	-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 4px rgba(0,0,0,0.4);
}

首先用font-size调整到一个合适的字体大小，然后巧妙地应用text-indent属性，将首字母f摆到了合适的位置，最后用letter-spacing属性拉开了第二个字母与首字母之间的距离，由于父级设置了overflow:hidden属性，超出的字母就消失了。后面的twitter、google、LinkedIn都是同样的手法，只是增加了css3中关于背景颜色的线性渐变属性linear-gradient。
此时的效果在这里。

巧妙应用:after和:before伪类补充图标内容

比如Flickr的图标，两个圆圈就是使用:before和:after伪类加进去的。代码如下：

.cssicon .flickr a {
	position:relative;border-color:#d2d2d2;text-indent:-9000px;font-size:108px;font-weight:bold;	color:#fff;background:#fff;
	/* css3 */
	/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
	-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);	box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
	background:-moz-linear-gradient(top, #fff, #d2d2d2);
	background:linear-gradient(top, #fff, #d2d2d2); /* standards version last */
}

/* create blue circle */
.cssicon .flickr a:before {
	content:"\00a0";position:absolute;top:50%;left:30%;	width:20px;	height:20px;margin:-10px 0 0 -10px;background:#085ec5;border:1px solid #003c84;
	/* css3 */
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; /* standards version last */
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));
	background:-moz-linear-gradient(top, #005cc6, #003d83);
	background:linear-gradient(top, #005cc6, #003d83); /* standards version last */
}

/* create pink circle */
.cssicon .flickr a:after {	content:"\00a0";position:absolute;top:50%;right:30%;width:20px;height:20px;	margin:-10px -10px 0 0;border:1px solid #ba0060;background:#fd1e93;
	/* css3 */
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px; /* standards version last */
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));
	background:-moz-linear-gradient(top, #fd1e93, #cb026c);
	background:linear-gradient(top, #fd1e93, #cb026c); /* standards version last */
}

首先，为了配合:before和:after增加的内容的定位，a标签增加了position:relative属性，a:after和a:before都增加了position:absolute属性。因为是纯图像型的，此时的文字已经没有用处了，所以直接使用text-indent:-9000px将文本内容扔到了九霄云外。最后:before和:after中的content属性的值”\00a0″其实就是个空格，没啥意义的。使用width:20px;height:20px;再配合border-radius：20px就画出了一个小圆，加上背景颜色的线性过渡，两个小圆就出来了。此时的效果在这里。

=============感叹的分割线=======
太久没写过代码了，快不会了……

主要症状：

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

解决办法：强行安装

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

• 删除系统自带的High Definition Audio声卡驱动

  High Definition Audio声卡系统自带的驱动程序存放的路径是：

  C:\Windows\System32\DriverStore\FileRepository\hdaudio.inf_x86_neutral_bbdc874bd732926d

  只有把这个删除掉了，我们才能强行安装我们想要的驱动。正常情况下，你是无法删除的，此时你需要使用Administrator帐号，Windows 7下默认是不能使用Administrator帐号登录的，启用Administrator帐号的方法是：“开始菜单”-“计算机”-右键“管理”-“本地用户和组”-“用户”，找到Administrator，右键点击选择“属性”，将“帐户已禁用”勾选取消掉。然后注销，点击“Administrator”登录系统。

  然后进行声卡驱动目录，用“剪切”将FileRepository目录下的hdaudio.inf_…文件夹备份到另外一个地方去。以防万一你失败了，还可以恢复过来。

• 在“设备管理器”中卸载声卡设备

  由于将系统自带的驱动文件移动了位置，所以你删除掉声卡驱动之后，再执行“扫描硬件改动”的时候，就不会自动安装上系统的驱动了。这时会在“设备管理器”中出现黄色感叹号的声卡设备。

• 下载HP提供的Vista下的声卡驱动

  下载HP官方提供的Windows Vista下的Conexant High Definition Audio驱动，建议大家去hp英文站寻找，我的V3148驱动是在这里找到的：Conexant High Definition Audio Driver For Windows Vista

  下载完成后，解压自动安装，一般情况下，你会安装失败， -_-!

• 手动安装Conexant High Definition Audio驱动

  到了关键了，准备工作完成后。打开“设备管理器”中的黄色感叹号的“声卡设备”，右键点击“更新驱动程序软件”，选择“浏览计算机选择驱动程序软件”，在出现的对话窗口中，选择下面的“从计算机的设备驱动软件列表中选择”，然后选择“声音，视频和游戏控制器”，如果没有出现这个选择，就直接下一步：选择右下方的“从磁盘安装”，然后将目录指向刚才自动安装失败的驱动程序，默认的位置是“C:\swsetup\SP35682\wis30B2a.inf”。点击“确定”，出现提示准备安装“Conexant High Definition Audio”的驱动，下一步下一步…安装成功。

我是之前找了一个老的Conexant High Definition Audio驱动hp 34386，然后发现声音非常小，就再找到了Conexant High Definition Audio Driver For Windows Vista这个驱动。直接运行更新成功。

记住：所有以上操作，都是在用Administrator帐号。用完以后为安全起见，继续将Administrator帐号禁用掉吧。
远景上也有一个惠普笔记本声卡安装相关的帖子，也可以参考一下，可能是型号不对，对我的机器不管用。