致虚极 守静笃
在网页设计过程中经常会有一些容易被我们忽略的细节，大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性，但是并不是任何场景下我们都需要这些特性，比如对于电子邮件地址的输入，我们就不需要自动更正、自动大写、拼写检查等特性，而对于用户登录表单，为安全考虑则不希望自动完成的特性存在，今天要介绍的就是这些特性以及如何禁止这些特性的存在。
1. 自动完成（autocomplete）
大部分浏览器为了便于你下一次填写表单可能会有记忆功能或者又称为“自动完成”，形如下面的图示：
邮箱里垃圾邮件一直有很多，这让我不得不重新审视，发布在网页上的电子邮箱地址，为了避免垃圾邮件，我刻意将@更换成#，也许这在十年前是个不错的办法，但是随着神经网络和机器学习新算法的发展，这一类小手段也面临失效的风险，因为大部分都是通过修改电子邮箱地址的“@”符号，通过正则表达式筛选和特征值匹配，比如hotmail.com、gmail.com、163.com这一类疑似电子邮箱地址的特征，还是可以抓取到电子邮箱地址，所以在将Email发布到HTML网页之前我们要对其进行加密和混淆。
下面我以[email protected]为例，介绍几种加密和混淆的反垃圾邮件手段。
1. 生成图片
利用传统的图灵测试CAPTCHA，将防止采集的电子邮箱地址生成图片，利用机器不能识别的特性，来区别人和机器，生成图片的方式有很多，除了高大上的Photoshop外，甚至可以使用系统自带的绘图工具来完成，另外希望偷懒的话，还有一些在线工具可以帮助到你，比如《Top 10 Websites to Turn Your Email Address into An Image》。
我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码，当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容，后来的实际应用证明这种做法是不符合用户体验的，而且破解的方法也有很多，比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法。
由此可见，限制右键及复制是不明智的做法，但是今天我仍然要谈谈关于禁止网页复制、右键菜单的事儿，因为随着网页APP技术的发展，网页应用和桌面应用之间的界限越来越模糊，有一些桌面程序实际上是由网页配合JavaScript实现的，另外一些手机应用也可以是由HTML5+JavaScript实现的，在这种情形下，限制右键就是有必要的了，因为作为APP来说，网页的右键选择文字及弹出菜单在大多数情况下显得没有必要了。
项目中设计经常要用到配色，尤其是字体颜色、边框和背景配色，当然对于Web 2.0时代来说，配色首先要让人看上去舒服，不刺眼。因为平常工作需要我收集了一些现成的配色方案供大家参考，部分配色来自于《Web 2.0 Colour Palette》，还有部分配色原始出处已经找不到了，如果有童鞋知道请告知一下，当然如果大家还有一些比较好的配色方案也可以分享一下哦。
今天浏览oschina.net的《网站出bug了？？还是被人黑了啊？？》发现的这个问题，发表评论采用了Ajax技术，但是直接提交Ajax没有起作用，导致返回了原本由JavaScript处理的JSON结果，出现这种情况多数是因为页面JavaScript加载失败或者用户禁用了脚本所致，回想到我以前的设计，有个小技巧可以解决这个问题，现与大家分享下：
基本思路就是在Ajax提交前加入自定义的HTTP请求header，然后结果处理页判断是否有这个header，如果有就说明对方是通过Ajax提交的数据，显示JSON结果；如果没有则说明Ajax没有起作用，然后就直接输出用户友好的标准结果页。
现在的软件我已经无力吐槽了，今天有客户的电脑装了某软件，然后被附带的下载了N多不需要的重复功能的软件，蚕食了用户电脑的资源，导致电脑越来越慢，即使熟悉计算机的老手不仔细看，一个眼花，也会中招。
我还记得3721那个时代，很多插件喜欢耍流氓，嵌入到用户需要的软件中，然后在这些软件的安装过程中偷偷安装自身，然后抢占用户电脑，再搞个无法卸载，然后就有了各种各样的反流氓软件程序、各种各样的联盟、行业自律协会，后来扳倒了3721这个流氓的头头，于是后来流氓软件们安静了，大家也不再担心被偷偷安装软件了。
事情到这里似乎很完美了，但是一切为了利益，有些软件开始偷偷的使用“被选择”的方式来诱导用户安装所不需要的软件，比如安装某个步骤中默认勾选附带软件，然后大家又稀里糊涂的装上了一堆软件，当然也不能说这些软件是流氓软件，至少他们是可以正常卸载的，不过这种安装方式有些流氓了。至于安不安装应该交由用户选择，而不是默认勾选为安装，好吧，有人要说了，我们做软件的不容易那，特别是免费软件，也要获利那，用户那种下一步下一步到底的安装模式哪里会注意这些捆绑的软件呢，用户注不注意是一回事，也不能利用用户的一步到底的安装习惯来绑架用户安装一堆软件吧。
由于不能忍受先前的在官方Twenty Eleven主题基础上定制的自用主题Blaue的种种Bug，所以决定重新定制一个新的主题自用，实在想不出什么好的名字，姑且就叫做Blaue V2吧，Blaue这个词是由于之前主题的主色调是Black & Blue，所以造出了这么个词，现实中貌似还真有这么个词，不过好像是德文，好了，扯多了，下面谈谈这次主题改造的细节吧。
这次主题改的母版是toolbox主题，但是改动比较大，特别是将Blaue的部分构架融合过来了，而之前的Blaue是基于Twenty Eleven主题的，算是混血儿，所以这次Blaue V2只算是在Blaue基础上做的改进。
1. 放弃了响应式自适应的流布局，采用固定布局模式，固定布局容易操作些，不容易错位，也能很好兼容大多数浏览器。
2. 采用JQuery库，原先我一直很抵触背这么大个JS库的，之前使用的纯JavaScript代码来实现相关功能，后来采用Sizzle选择器（也是JQuery内置的选择器），现在想想干脆直接用JQuery得了，省得为兼容问题而纠结。
3. 采用Google Web Font优化部分英文字体显示。
4. 菜单挪到了顶部，采用当前比较流行的设计样式，本来想把字体大小那段也弄到顶部的，但是感觉有点奇怪，所以作罢。
5. 评论这块采取了NeoEase的做法，将网友讨论和Trackbacks(Pingbacks)用选项卡进行分离，避免阅读评论的干扰，评论发布采用了Ajax技术，但是感觉发布成功这块处理得不是很好的。
6. 404找不到页面和搜索页面单独进行了优化，搜索页面除了显示本站结果外还将用选项卡分割显示Google自定义搜索的结果。
主流现代浏览器默认都不会禁用js脚本的，但是也有例外，除了用户主动禁用脚本外，还有就是维护模式下的安全浏览，这样会禁用页面上的js脚本。
禁用了脚本会发生什么？哦，JQuery无法使用？准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效，比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会，严重一点可能感觉像是过着盲人的生活，呵呵，不过有一点可以肯定的是未开启脚本的这部分用户少之又少，我们可以抛弃他们。你说什么？抛弃我们的客户？这怎么可以？别急，下面我要介绍的就是针对这部分用户的判断，以便于我们能够优雅的降级页面渲染来优化用户体验。
1. 使用noscript标签
这个标签貌似很久就有了，我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用，见得最多的例子是用在统计代码上面，比如有下面的代码：
<script src="http://example.com/stat.js"></script> <noscript> <img src="http://example.com/stat_pic.gif" border="0" height="0" width="0" /> </noscript> |
HTML的label标签大家应该不会陌生，什么？没用过？那可以好好看下aoao的这篇《各位大大行行好，给checkbox配个老婆（label）吧》文章。一般在表单中使用，给类似的checkbox或者radio框配上label，明显有助于改善用户体验。
这里借用一下aoao的测试示例：
点啊点啊点这里也没用
上面测试示例的代码如下：
1 2 3 | <input type="checkbox" name="testtest" id="testtest" /> <label for="testtest">点啊点啊点这里</label><br /> <input type="checkbox" name="testtest" />点啊点啊点这里也没用 |
好了，明显感觉的出点文字就能勾选的舒坦吧，当然要使这个label生效，我们只需要给input配一个唯一的id号，然后label标签使用for属性写上这个id号就可以了，当然不希望使用id号的话可以通过下面这种方式使用label功能：
1 2 3 4 | <label> <input type="checkbox" name="testtest" /> 点啊点啊点这里 </label> |
其实就是把input放到label里。好了，说了这么多，其实主要为接下来的正文铺垫一下。
设为首页和加入收藏一直是很多网站提供的小功能，今天特别研究了一下，传统的设为首页的代码如下：
<a href="#setHomePage" onclick="this.style.behavior='url(#default#homepage)';this.setHomePag('http://wangye.org/');return false;">设为首页</a>
似乎很长的一段时间上面这段代码一直工作得很好，但是随着其他非IE内核的浏览器异军突起，比如FF（FireFox），很多童鞋发现这样的代码已经失去了原有的作用，所以兼容的代码就显得非常的重要了。
对于FireFox来说，安全设置成为阻碍设为首页代码的关键因素，不过我们不得不承认这些安全设置为我们安全浏览进行保驾护航，不过如果要在FF上设为首页，那么我们需要开启UniversalXPConnect权限，当然在启用这个权限的同时浏览器会提示安全消息要求用户授权，若用户不予以授权的话，下面的代码将会因为权限问题而得不到执行。（远程调试时如果不做相关设置将不会出现授权对话框，直接默认是拒绝授权）相关要求授权的对话框如下：
所以如果检测到用户没有授权，应该给出相关提示，详细的代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | if (window.sidebar) { if (window.netscape) { try { netscape.security.PrivilegeManager .enablePrivilege("UniversalXPConnect"); } catch(e) { // this action was aviod by your browser, // if you want to enable，please enter // about:config in your address line, // and change the value of // signed.applets.codebase_principal_support to true alert("抱歉！您的浏览器不支持直接设为首页。" + "请在浏览器地址栏输入“about:config”并回车" + "然后将[signed.applets.codebase_principal_support]" + "设置为“true”，点击“加入收藏”后忽略安全提示，即可设置成功。"); } } var prefs = Components.classes['@mozilla.org/preferences-service;1'] .getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage',url); } |
if (window.sidebar)是判断FF的一种方法，就像判断IE用if (document.all)一样，结合一下，兼容IE和FF的设为首页的代码如下：