大伟的博客 » Web技术

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

David — Thu, 24 Jun 2010 17:29:12 +0000

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

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

实现原理

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

Html代码部分

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

将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
我的理解
我不确定这种体验是否是源于Iphone，但目前我知道的应该就是Iphone、Google Andriod手机上是这样的。这种良好的手机输入体验，一定是因为触摸屏的高出错率（相对我们的PC键盘输入）驱动的。所以在网站上应用这种细节，它的价值一定是比应用在触摸屏手机上要小的多的……对于稍微熟悉电脑的用户，盲打输入密码还是没有问题的，这种出错率远比误打开caps lock键出现的次数要小的多。
当然，此举也引起了部分不明真相的网民的恐慌，呵呵。

HTML5的表单验证

David — Mon, 05 Apr 2010 10:47:25 +0000

输入框自动获取焦点

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

之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息，现在只需要增加一个placeholder属性。
强大的表单验证功能

判断必填项

判断数据格式
有趣的input type=”range”

可以直接拖动，可以设置最小值、最大值、以及每拖动一格的步长。
input type=”number”

可以通过点击右侧的上下箭头，直接进行加减操作。
输入框下拉提示

可以用作现在很流行的ajax输入提示，也可以当作是一个可编辑的下拉菜单。即可自行输入，也可以直接下拉选择。
```
	
```
还有默认的日期选择

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

HTML5的写法

David — Mon, 05 Apr 2010 05:19:28 +0000

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

文档声明更简单了。
html标签上不需要声明命名空间。
字符集编码声明也简单了
可以不用给css及javascript代码写type属性了
没有XHTML代码规范的要求

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

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

David — Wed, 24 Mar 2010 15:49:58 +0000

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


   Facebook
   Twitter
   RSS
   Flickr
   Delicious
   LinkedIn
   Google
   Orkut
   Technorati
   NetVibes

作者的原文在这里，作者的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就画出了一个小圆，加上背景颜色的线性过渡，两个小圆就出来了。此时的效果在这里。

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

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

David — Wed, 30 Sep 2009 17:43:20 +0000

之前为公司设计了一套内部使用招聘系统，目的就是将招聘过程中的简历筛选、初试、复试、终试等繁琐的线下操作全部无纸化操作，其中有一个功能就是安排面试，简历经过筛选后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一下代码。

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

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

记录我的301转向

David — Fri, 28 Aug 2009 17:40:02 +0000

博客换域名1周了，分享一下经验，并记录一下现在的结果。

准备工作

保留老域名iwcn.net的程序运行。
PJblog转换WordPress
修改Pjblog的default.asp及article.asp代码做301转向（永久迁移），[方法]。
新博客生成sitemap.xml提交Google Webmaster、Bing Webmaster、Yahoo Site Explorer。

目前结果

Google在老域名设置301转向的第二天，将PR4转移到了新域名。
目前搜索引擎收录情况：Google 82、Yahoo 18、Bing 14、搜狗 63、有道 4（3个过期）、百度 1。
Alexa从1周前的1,900,000左右上升到1,116,746。

体会&分享

百度是无视301转向的，或者说他对301的反应是高级迟钝。
301转向一定要做首页内页全部做，这个工作量还是比较大的。
Google对301的反应是最快速的。
做301转向的老域名及网页保留180天。
Google网站管理员关于301转向的文章

最后感谢及时更新我的友情链接地址的朋友！

也谈网页圆角的背景图法

David — Sat, 14 Mar 2009 00:00:00 +0000

网页的圆角处理，其实最开始的九宫格的表格处理是挺方便的，只是现在都不用表格布局了，自然就被非法取缔了。呵呵。

微软的有VML画圆角，由于只是它自家的特产，大家也都不用了，再有就是Javascript的处理方法，很多都会影响页面性能，大家也都不爱用了。

剩下来的，就只能是老老实实地用背景图了。常用的方法有：

1、固定高度的情况下，我们通常把背景图的宽度拉到足够大，做一个大图，如下：

2、同样，固定宽度的话，我们就拉长高度，如下：

原理都是一样的，就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长，我们一般会将它分为3块来实现，即头部、中间(1px背景垂直拉伸)、和底边。

3、以上是一般网站局部使用圆角的常见处理方法，但如果是整站的UI都很圆的话，显然上面2个常见的方法就不是很好用了，到处都是圆角，高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。

同样是基于这种“九宫格”处理的思想，在代码实现上各个网站也有各自的招。

1、头、尾各用3个标签(div or span)来实现圆角，中间直接用border-left、border-right属性来补2边。

2、用一个很大很大的圆角图片，然后来个若干层div嵌套实现，道理和最上面说的拉长高度和拉长宽度是一样的，它这个是双向无限拉长，比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。

3、图太大了，总难免是有点舍不得用的，那就用小图，看淘宝网首页的，实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后，再额外地向4个角加上一张小图片去补圆，它这个做法，除了图片是小的之外，在网页加载背景图之前，也是有一个比较好的视觉呈现的。示意图如下：

具体代码请看例子。

百度越来越像站内搜索引擎了

David — Fri, 06 Feb 2009 00:00:00 +0000

百度图片第一位！

百度视频第一位！

百度贴吧第一位！

百度百科第一位！

百度mp3第一位！

最近又出狠招，把百度“有啊”也搬上来了，现在还比较低调，搜手机、笔记本、服装、相机等热门关键词的时候还只是出现在第4位之后，不过看上面的图恐怕用不了多久它也到第一位了！开网店的朋友赶紧抓住机会哦，等哪天百度被狠狠地反垄断了一把就没的玩了！

唉，不厚道！

搜索引擎优化基础知识PPT

David — Thu, 03 Jul 2008 00:00:00 +0000

这几天整理了一份《搜索引擎优化》的PPT，同事交流之用。主要内容有：

SEO常用术语解释
如何让搜索引擎收录网站
SEO的目的
站点自身内部的优化
影响排名的外部因素
常见的黑盒SEO手法

内容大多都是前辈们的东西，整理了一下而已，适合对SEO感兴趣但不熟悉的网页设计和开发人员阅读。

有兴趣的朋友可以在这里下载：《搜索引擎优化基础》

hover伪类的使用

David — Fri, 23 May 2008 00:00:00 +0000

前段时间在论坛上有人问到一个淘宝网上的hover伪类实现的效果如果兼容ie6。
帖子：http://bbs.blueidea.com/thread-2854899-1-1.html
淘宝效果预览：http://list.mall.taobao.com/1343/g-s—–40-0–1343.htm

其实，问题很简单，就是hover伪类在IE6中得不到很好的支持，因为IE6只支持css1，而在css1中hover伪类只能针对a标签来起作用，看了一下淘宝的代码，他们的解决方法是：
首先，按照ie7/FF都支持的css2的写法来写。其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。

这段javascript的原理是这样的：

根据某些特征找到需要添加hover效果的标签
对此标签添加onmouseover和onmouseout事件
在onmouseover事件中给对象赋予新的css class属性，同样，在onmouseout时移除该css class即可模拟成hover伪类的效果了。

这里有一个简单的示例，供大家参考！

大伟的博客 » Web技术

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

实现原理

Html代码部分

Javascript部分

我的理解

HTML5的表单验证

输入框自动获取焦点

文本框的输入提示

强大的表单验证功能

有趣的input type=”range”

input type=”number”

输入框下拉提示

还有默认的日期选择