maxbbn http://www.maxbbn.com 前端/用户体验/Web Fri, 16 Dec 2011 09:19:42 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 别用Express.Less.Compile http://www.maxbbn.com/archives/87 http://www.maxbbn.com/archives/87#comments Fri, 16 Dec 2011 05:57:10 +0000 maxbbn http://www.maxbbn.com/?p=87 创建项目的时候，传入 -c less

$ express -c less sampleproject

在app.js里面， configure  里面会多出来一行，

app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));

用这个Middleware模块, 可以自动解析less了。

当你请求 abc.css文件时，会自动找到同目录下的 abc.less， 编译成CSS传给浏览器。

 

没这么简单。。。

目前已知的问题有：

1. import 路径

@import 时的路径相对于应用根路径。所以，导入Less时候必须 这样子

@import "/public/css/file.less";
2. rebuild
由于less 自动打包是根据目标文件的最后修改时间来判断是否重新打包的。
当被import的文件修改的时候而主文件没有修改， 不会自动重新编译。
又一个硬伤啊！
3。无法时候另一个文件里面的less变量。。。。。
结论：
所以说，目前 LESS compile 几乎无法使用。
]]> http://www.maxbbn.com/archives/87/feed 0 Chrome浏览器下淘宝网吊顶不显示用户名解决方案 http://www.maxbbn.com/archives/86 http://www.maxbbn.com/archives/86#comments Wed, 07 Sep 2011 03:24:28 +0000 maxbbn http://www.maxbbn.com/?p=86 这个原因是由于Chrome浏览器的一个诡异bug

  1. 打开Chrome选项
  2. 切换到高级选项，在隐私设置里面打开“内容设置”
  3. 点击”所有Cookie和网站数据” 按钮， 打开后在右上角的搜索框里面输入taobao.com
  4. 再点击”全部删除”
]]> http://www.maxbbn.com/archives/86/feed 0 网站设计：来自细节的关怀 http://www.maxbbn.com/archives/79 http://www.maxbbn.com/archives/79#comments Sun, 06 Mar 2011 16:11:20 +0000 maxbbn http://www.maxbbn.com/?p=79 Dropbox官网下载页面试图下载时

看到页面如下显示

 

 

这时我发现，下载指引里面的截图就是我Chrome的下载管理。然道是Dropbox是用Chrome做为默认的浏览器 ？好奇的我打开FireFox验证, 果然：

 

我们发现，文案与图片都发生了变化。

其他浏览器我就不一一验证了。我想，这就是好的设计， 简单的让人感动， 却体现了对用户的细致的关怀。这些一点一滴的简简单单的人性设计，也许就是Dropbox如此成功的原因。

 

]]> http://www.maxbbn.com/archives/79/feed 0 添加延迟，提高输入框选中的准确率 http://www.maxbbn.com/archives/66 http://www.maxbbn.com/archives/66#comments Thu, 08 Jul 2010 09:17:46 +0000 maxbbn http://www.maxbbn.cn/?p=66 应用场景：

有个输入框，里面是一段文本。但用户点击输入框时，使框内文本选中，方便复制。

脚本：

demo.htm

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<input id="textinput" type="text" value="test test test" />
	<script src="demo.js"></script>
</body>
</html>

demo.js

var el = document.getElementsById("textinput");
textinput.onClick = function(){
	this.select();
}

问题：

很多时候，输入框很快从选中状况闪回非选中状况。

解决：

添加一个延迟，就可以把输入的波动去除了。

demo2.js:

vartextinput = document.getElementsById("textinput");
textinput.onclick = function(){
	setTimeout(function(){
		textinput.select();
	}, 200);
}
]]> http://www.maxbbn.com/archives/66/feed 0 低碳的 Notepad++ http://www.maxbbn.com/archives/70 http://www.maxbbn.com/archives/70#comments Wed, 07 Jul 2010 14:41:30 +0000 maxbbn http://www.maxbbn.com/?p=70

藉由加強與優化許多函數及演算法，Notepad++ 致力於減少世界二氧化碳的排放。

—— Notepad++  官方网站

我对 Notepad++ ( 以下称 NPP ) 一见钟情已经快1年，在这1年中了，发现随着了解的深入，对NPP越来越有爱了，对我来说 notepad++ 吸引点如下

  • 平易近人，容易上手， 而且上手后可挖掘程度也很高
  • 时时会发现令人惊喜的插件
  • 做的多吃的少，打开大文件时效率高
  • 有插件 可扩展

缺点：

  • Windows Only
  • 可以设置自定义快捷键来满足个性化。 不过快捷键设置界面比较让人蛋疼

一些好用的插件

一、 NPPEXEC

能运行外部的脚本，执行命令，还有一个控制台，可以方便的在NotePad内部去执行外部的命令。 用好这个插件，几乎能做到任何你能想的到的事情。

我用的最多的几个脚本，如 脚本压缩， jslint检查, svn操作等。还可以用nppexec 配合 [ruby....]等脚本语言,做文件同步，等等。 真是一切皆有可能。

二、Zen-Coding

Zen-Coding是写HTML&CSS的利器。 大家也许不陌生。 起码用了之后，能大大减少前端编码量。有效缓解脖酸背疼。而且写的快了，就可以按时下班，少用电脑几小时，可谓低碳。

安装好插件后。输入

html:5

Ctrl+E展开成：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
|
</body>
</html>

输入

div#page>div.logo+ul#navigation>li.o-$*5>a

展开成

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li class="o-1"><a href=""></a></li>
		<li class="o-2"><a href=""></a></li>
		<li class="o-3"><a href=""></a></li>
		<li class="o-4"><a href=""></a></li>
		<li class="o-5"><a href=""></a></li>
	</ul>
</div>

啊呜~~ 很爽。

如何安装

到  http://code.google.com/p/zen-coding/ 下载插件NPP插件。下载后将zip 文件解压到安装目录下的plugin文件价里，重启NPP 就可以生效了。

一个小问题：目前我发现的 如果采用ANSI编码的文件，只要输入中文，在中文后面Zencoding插件 就会失效。所以，在编码阶段，最好把文件编码改成UTF-8的。

]]> http://www.maxbbn.com/archives/70/feed 0 《构建可扩展性的Web站点》阅读笔记 http://www.maxbbn.com/archives/61 http://www.maxbbn.com/archives/61#comments Sun, 28 Mar 2010 11:56:08 +0000 maxbbn http://www.maxbbn.cn/?p=61 作者Cal Henderson，最知名的2.0照片分享社区 Flickr 的合伙人之一和首席软件架构师，在构建一个大型网站方面，自然会有很多有价值的经验。此书第一版出版于2006，对于发展迅速的互联网来说，书中很多环境，技术已经发生了改变。但是在某些方面还是更新了我的许多模糊，肤浅认识。现在，就以下几点，记录下我的收获。

定义Web应用程序

Web应用程序不是桌面应用程序、也不是Web站点，而是介于两者之间，同时涵盖双方的特点。与Web站点相比，Web应用程序最关心的不是页面的集合，而是应用的分层。作者说：

Web应用程序是具备一个核心数据集合的系统，这个数据集合可以用Web页面方式访问及修改，也可以使用接口，通过其他途径进行访问与修改。

分层的Web应用程序

上面说到，Web应用程序最关心是应用的分层。作者用蛋糕做一个比喻。从Web应用程序的持久化存储层（数据），业务逻辑层，到交互逻辑和页面逻辑层再到展现层。良好的分层最大的好处是有助于工程师的分工，工程师只需关心自己对应的分层和对上下层的接口。比如，前端工程师无需考虑如何将数据从数据库中取出来，或者，完成一次搜索完整细节。而只需关心，如何用优雅或不优雅的标记将数据展现给我们Web用户。

构建你的开发环境

这里作者特地提到的三大规则

使用源码控制；使用单步创建；跟踪程序缺陷。

源码控制的好处想必不用说了，说说单步创建吧。单步构建说白了就是自动化。好处是自动化一些繁琐的过程。将一些需要多次操作的冗余过程简化到只需一个按钮，或者是完全的自动化定时执行。这样你就有更多的时间去做那些更有价值的工作。而且避免很多不必要的误操作。可以通过命令行脚本，批处理文件，开发工具的自动化插件等，尽可能减少开发时的冗余环节。所以，得好好想想怎么做一个懒人啦。 关于bug和测试，做好bug 的分级，bug分S1/High, S2/Medium, S3/Low。再依据bug等级来对bug进行修复，上周一次小型分享上小虎提到的当同时有很多bug时，先解决容易解决的，控制bug 数量对于团队合作（安稳开发情绪）其实也很重要。做下扩展，当有很多S1优先级的Bug时，先解决其中比较简单的，在去解决比较难的，当没有S1级别的Bug时，才去考虑解决S2级别的。

国际化、本地化

i18n,L10n 分别是国际化和本地化。这两个概念以前一直有混淆。这里记录一下

国际化指为应用程序添加输入、处理、输出国际文本的能力。 本地化是指为特定地区，提供定制的应用程序的过程

国际化是一种能力，而本地化是一个过程。很有趣，以前没有注意过。

电子邮件作为Web应用程序的接口

通过使用这种已经成熟的技术，为用户提供一个接入网站的，比如近期更新、最新交互、通知等各种站点信息。比如twitter的被follow的通知邮件，时光网的时光周刊等。同时电子邮件也是一种很强大的输入接口。比如通过邮件发布照片，更新博客，自动化处理邮件（通过邮件系统来处理用户命令，并自动通过邮件系统反馈）。

]]> http://www.maxbbn.com/archives/61/feed 1 开始时间管理 http://www.maxbbn.com/archives/45 http://www.maxbbn.com/archives/45#comments Sun, 10 Jan 2010 06:51:07 +0000 maxbbn http://www.maxbbn.cn/?p=45 我承认我不是一个生活很有条理的人，比如，剪头发我从来不做安排，总是头发长到不行了才想到去理发店；事情不多的时间效率还行，当一下子来很多事情时就会乱了阵脚，更谈不上效率了。

自从进了公司，同时要处理很多事情的情况很多：正在改进一个程序的功能，这时候开发抛了个bug要你处理下，刚要看看bug，一个同事要我准备后天交流会的材料。就在这时候，上次合作过的运营来找，说有个功能出现问题了，很紧急，马上给她处理下。

先停下手头工作，把bug解决掉吧。 开始动手解决Bug，一边处理bug一点在想那个运营提到的问题，那个功能当时好好的，怎么这么久了才发现这个问题呢？ 究竟哪里出现问题？ 还有交流会的材料，该怎么找呢。。。。。。接下来就杯具了 ，这一天什么事情都没做好。 人没有三头六臂 ，不是多核的，不可能同时处理很多事情，又全部处理好。至少我觉得我不行。

开始关注时间管理时在网上找到篇文章，看到一句话，当时觉得很有感触：

把关注点放在结果上，而不是变得更忙。 Concentrate on results, not on being busy （来源）

在管理自己时间上，目的明确很重要，否则你的忙碌很可能就是瞎忙活。时间管理出发点是做事，结束点出是做事。以下是我总结的四点原则：

  • 明确自己的目标，做什么及成功标准
  • 了解自己的目前的状况
  • 一个时间内只关注一件需要关注的事
  • 形成经验

其于以上原则，我发现，最简单，最行之有次的工具是：笔记本+笔。

具体操作：有新的任务发生时，马上在纸上，用列表形式记录下来（如下）。 看看列表，今天写博客的优先级比较高，我在开始写的时候设定了起止时间，修改字体的可以先放着。 当我一心一意写好博客的时候，我就把这条目勾上。或者加一个真实完成时间。

2010-01-10

  • 写本博客 15：00 – 16：00 （16：10）√
  • 去图书馆续借
  • 修改我的博客的字体

这样，我就可能通过列表来掌握我现在有哪些待办事项，可能很清楚看出当前处理的任务，并把关注点放在上面。另外，开始预计结束时间的设定，可以让我处理时更加专心，更有效率， 当然 时间可能会有出入，所以完成时，我需要把真实完成时间也记录上去，以便发现自己预估与真实情况的误差，使以后的预估更加精确。 打上勾。  然后可以起身去倒杯水，然后看看下一步要做什么。

以上只是举例，实际上，我用这个方法第一天就尝到了甜头，是的，完全改变了我工作时的节奏，我开始慢慢控制这个节奏了。这仅仅只是一个工具，最重要的是上面的四点原则。时间管理我还刚上路，这是一个新的天地。。。。。

有几个工具推荐一下

GTD ：Getting Things Done缩写, 一种时间管理的方法

http://doit.im 基于GTD的时间管理软件。air版本

]]> http://www.maxbbn.com/archives/45/feed 0 阅读笔记《创建高可用性的Web内容》 http://www.maxbbn.com/archives/31 http://www.maxbbn.com/archives/31#comments Sat, 09 Jan 2010 07:54:56 +0000 maxbbn http://www.maxbbn.cn/?p=31

Web可用性的10条原则

  1. 避免对用户的物理、精神和感知能力做任何假设。
  2. 用户只有发送和接受文本的技术，这是你要做的所有假设
  3. 用户的资源属于用户（时间或者能力），不属于我们。不要试图支配用户的资源
  4. 为非文本内容提供文本
  5. 使用使用最广泛的技术
  6. 清晰的语言
  7. 易用、可搜索、可导航
  8. 基于语义设计
  9. 如果需要使用新的特性来改进内容，那么请同时允许那些不愿使用这些特性的人轻松地切换使用老特性
  10. 对于新的Web技术，同样使用这些原则使他具有高可用性

为什么需要可用性

  • 2000年 美国1/8 的人有严重残障，web对于他们更具吸引力。 （中国的数据是多少？）
  • 老人对高可用性网站的需求
  • 对于正常人来说也有不太明显的易用性问题
  • 法律，社会等原因
  • 可以提升设计者与开发者的能力。。

有哪几种残障：

  • 视觉障碍：
    • 失明（VA<20/200,）和弱视(VA < 20/70)，工具一般是屏幕阅读器 或 屏幕放大镜。
    • 颜色和对比度缺陷
    • 感光症癫痫：有些人暴露在特定的重复图案或闪烁下时，会引发感光症癫痫。
  • 听觉障碍：（主要是为依赖声音的地方提供视觉信息，如字幕，文本）
    • 失聪
    • 听觉困难
  • 行动障碍
  • 认知障碍
    • 感知紊乱
    • 处理紊乱
  • 多重障碍

Web可用性的开发

开发过程中各个角色都有对应的可用性需求，并承担相应的可用性责任。包括

  • 项目干系人（产品经理）
  • 内容作者（运营）
  • 用户界面设计师（交互设计师）
  • 视觉特性设计师（视觉设计师）
  • 基础结构开发者（前端开发，后台开发）
  • 可用性协调员：确保环境的所有方面，不论物理的，程序上的还是虚拟的，都能被残障人士使用。

网站的的可用性不仅仅是设计师的问题，要提高网站的可用性，规划，内容，设计，开发的所有角色都要有可用性意识，并承担可用性职责

可用性途径

做好可用性计划，从一开始就做好可用性的规划，可以降低开发成本

多种访问途径

指导方针

W3C 发起的WAI（Web Accessibility Initiative, Web 可用性倡议）

WAI 发布的 WCAG（Web Content Accessibility Guidelines 1.0, Web 内容可用性指导方针1.0）

美国胡康复法案(Rehabilitation Act of 1973)的第508节，Section 508

其他 W3C编制的 政策链接列表 http://www.w3.org/WAI/Policy/

可用性测试

提到的一些工具

页面结构

创建有意义的结构，如阅读顺序，从故事板板开始设计，使用微格式

简单就是美：可读性，术语，成语，缩写

语义化的标签

新技术与可用性

CSS3中的语音模块 （Speech Module）可以定义屏幕阅读器的“样式”如：

a {
voice-family:female;
cue:url(linksound.aiff);
}

可以以将链接之前播放  linksound.aiff 声音，并用女声来阅读。

还还一些如

voice-channel:left
voice-volume:soft
voice-stress:moderate
voice-pitch:high
voice-rate:slow

等等，会提升屏幕阅读器用户的体验。 受益的可能不仅仅是视障用户了

]]> http://www.maxbbn.com/archives/31/feed 2 关于IE的 window.event http://www.maxbbn.com/archives/25 http://www.maxbbn.com/archives/25#comments Fri, 08 Jan 2010 13:31:23 +0000 maxbbn http://www.maxbbn.cn/?p=25 如下代码在IE下面运行

<html>
<head>
</head>
<body>
<button onclick="fn()">btn</button>
<script>
var fn = function(){
var o = window.event;
var b = window.event;
alert(o === b);
alert(o === window.event);
alert(window.event === window.event);
}
</script>
</body>
</html>

请问代码中3个alert 分别是什么；

window.event === window .event 这是假的

o === window.event 这也是假的

o === b 这个呢？ 也是假的

这是为什么呢~？

在回调函数中 window.event 不是一个对象。。。 更确切的说 window.event 是一个get函数。是的没错，他是一个函数。

window.event 等价于 function(){ return new Event()  }();

每次调用它都返回一个新的Event对象。 所以，即使在同一个时间里面 window.event 返回两个不同的对象 。 所以当然 window.event != window.event;

下面两条就好解释了， o 指向一个Event对象，而window.event 返回一个新的对象，自然不同。

o===b 为什么为假 不需要解释了吧？

仅仅是猜测，是不是真的 有待验证。

]]> http://www.maxbbn.com/archives/25/feed 0 页面跳转提示，防止用户误操作丢失编辑数据 http://www.maxbbn.com/archives/24 http://www.maxbbn.com/archives/24#comments Wed, 06 Jan 2010 08:36:10 +0000 maxbbn http://www.maxbbn.cn/?p=24 用window.onunload 只能侦测到unload 事件，但这是已经晚了，不能在阻止页面的跳转。

window.onbeforeunload = function(){
return “你要走吗？”
}
可以很方便完成这个任务。可以设置
window.onbeforeunload = null
来清除这个事件侦听

]]> http://www.maxbbn.com/archives/24/feed 0