时间不安排就会浪费很多，事情不安排就不能最有效的解决问题。虽然现在有很多的工具，但是最重要的仍旧是时间安排和项目管理的意识，这个才是根本，事事时时都要考虑如何把效率最大化，用最短的时间和成本解决掉问题。
跳出率与退出率
2011年6月22日
{ 没有评论 }
跳出率指：某个时间段内，只浏览了一页即离开网站的访问次数占总访问次数的比例。
对于某页面的跳出率算法：从这个页面进入网站没有再点击其他页即离开的次数/所有进入这个页面的次数
对于整个网站跳出率的算法：只浏览一个页面即离开的访问次数/进入网站的总次数
跳出率高说明网站的延续性不够，用户来到你这个页面不知道或者不感兴趣点击其他相关的页面
什么是退出率？
退出率指：某个时间段内，离开网页的次数占该网页总浏览次数的比例。
从本页退出网站的次数/本页的综合浏览量
退出率高说明用户来到这页面的体验未找到与自己的预期，退出率重点在于说明用户通过什么途径来到网站的转化情况
简单理解如下：
跳出率高，说明很多新用户来了，看了一页就离开。（好像有种被骗的感觉）
退出率低，说明新老用户来了都点击很多页才离开。（说明网站内容深受欢迎）
Web交互设计优化的简易check list
2011年5月24日
{ 没有评论 }
“优化已有产品的体验”，这是用户体验相关岗位职责中常见的描述。我们的产品常常是在快速的迭代过程中不断完善的，就像孩子生下来需要养育才能长大一样，优化已有功能/产品，和设计新功能/产品同样重要，不可偏废。
但是，相比实现新功能，已有功能的优化总是显得没有那么紧迫而且很零散，导致了迭代优化的计划总是被归入“重要不紧急”甚至是“不重要不紧急”的象 限，变成了东一棒子西一榔锤的买卖。我们可以通过可用性测试来发现问题，但是测试往往受到时间、用户邀约、场地和设备等条件的限制，可能无法进行。更多时 候，设计师需要根据一定的原则（例如可用性准则）进行走查，以快速地发现并解决问题。
这篇小文章关心的问题是：如果想对非娱乐导向产品已有的交互设计进行优化，我们
- 需要从哪些方面考虑
- 遵从什么样的原则
- 如何开始检查现有的设计
- 如何确定优化的优先级
而不涉及：
- 新功能/产品的交互设计过程
- 娱乐导向产品的设计优化
- 产品概念、功能层次的优化
- 适合每一类型产品的tips
- 具体的优化方法
一、需要优化什么 (Considerations)
“设计原则的主要目的之一就是优化用户的产品体验。对于生产工具和其他非娱乐导向的产品而言，这意味着将工作负荷降至最低。”——《交互设计精髓》
行为和界面层面的设计原则告诉我们，应该为降低用户的工作负荷而设计。但是我们常常不够贴心，不知不觉就对用户设下了种种考验，让他们抓狂：
1.视觉负担 visual work
- 需要分解布局
- 需要区分内容层次
- 需要区分视觉元素
- 需要努力定位目标信息
- 需要识别阅读起点
- 需要经常变换视线
- 视觉流被干扰、打断
2.认知负担 cognitive work
- 需要理解不熟悉的概念和模式
- 需要理解冗长、生涩的文本内容
- 需要理解混乱的结构和布局
- 需要理解模棱两可的操作
- 需要猜测系统状态、行为、结果
3.记忆负担 memory work
- 需要记住对象的各种属性（名字、位置、大小、颜色）
- 需要记住对象的关联
- 需要记住操作的命令、步骤、结果
- 需要记住以往的操作
4.物理负担 physical work
- 需要长距离移动鼠标
- 需要进行（多次）点击
- 需要执行不同的鼠标手势
- 需要多种操作组合
- 需要切换输入模式
- 需要进出不同的页面/区域
- 需要长时间等待
二、优化目标 (Goal)
仔细检查已有的设计，或多或少总是能发现问题。在解决问题之前，我们应该清楚要往什么方向进行优化：
1.基于可用性的目标
- 易于识别/定位/阅读
- 易于理解/学习/记忆
- 易于操作
优化的最重要的目的，是让产品更好用，使设计符合Jakob Nielsen的十条可用性准则：
- 通过有效的反馈信息提供显著的系统状态
- 符合用户的真实世界
- 用户自由控制权
- 一致性和标准性
- 预防出错
- 识别而不是回忆
- 灵活、便捷的使用
- 美观，精简的设计
- 协助用户认识，分析和改正错误
- 帮助和说明
2.基于产品的目标
需要根据不同产品进行定义。例如，对于快速注册流程的优化，目的是让用户用最方便完成注册进入目标页面，优化目标可能是最小化输入、最短等待时间等。
三、快速检查清单 (Check list)
为了达到优化的目标，整理了一个简易的checklist（pdf版本下载链接请见文末），方便在走查时对架构、布局、内容、行为四个方面对照检查：
1.架构和导航Architecture and navigation
¨ 是否采用了用户熟悉或容易理解的结构？
¨ 是否能识别当前在网站中的位置？
¨ 是否能清晰表达页面之间的结构？
¨ 是否能快速回到首页/主要页面？
¨ 链接名称与页面名称是否相对应？
¨ 当前页面的结构和布局是否清晰？
2.布局和设计Layout and design
¨ 是否采用了用户熟悉的界面元素和控件？
¨ 界面元素和控件的文字、位置、布局、分组、大小、颜色、形状等是否合理、容易识别、一致？
¨ 界面元素/控件之间的关系是否表达正确？
¨ 主要操作/阅读区域的视线是否流畅？
¨ 其他文本（称谓、提示语、提供反馈）是否一致？
3.内容和可读性Content and readability
¨ 文字内容的交流对象是用户吗？
¨ 语言是否简洁、易懂、礼貌？
¨ 内容表达的含义是否一致？
¨ 重要内容是否处于显著位置？
¨ 是否在需要时提供必要的信息？
¨ 是否有干扰视线和注意力的元素？
4.行为和互动Behavior and interaction
¨ 是否告知、引导用户可以做什么？
¨ 是否告知需要进行哪些步骤？
¨ 是否告知需要多少时间完成？
¨ 是否告知第一步做什么？
¨ 是否告知输入/操作限制？
¨ 是否有必要的系统/用户行为反馈？
¨ 是否允许必要的撤销操作？
¨ 是否页面上所有操作都必须由用户完成？
¨ 是否已将操作步骤、点击次数减至最少？
¨ 是否所有跳转都是必须的（无法在当前页面呈现）？
以上只是一个不完全的清单，同学们可以根据自己的实践经验修改，也可以参考更全面、权威的可用性测试检查表，如普渡大学可用性测试检查列表。
四、确定优先级 (Priority)
当我们通过checklist将需要优化的问题筛选出来以后，可以根据问题的严重性和解决的问题的成本（时间、人力等）来综合考虑问题的优先级，例如，问题严重性得分高而且优化成本低的问题，应该优先解决。
五、小结
Considerations：为降低用户的视觉负担、认知负担、记忆负担以及物理负担而优化设计
Goal：使设计易于识别/定位/阅读，易于理解/学习/记忆，易于操作，符合可用性原则和产品目标
Check list：交互设计快速检查清单v1 PDF版本 Download
Priority：根据问题的严重性和成本综合考虑，优先解决严重且成本低的问题。
Reference
- 《About Face3：交互设计精髓》
- 《人机交互：以用户为中心的设计和评估》
- Ten Usability Heuristics
- Purdue Usability Testing Questionnaire
Python HTML 解析器性能评测
2011年3月11日
{ 没有评论 }
原文：http://blog.ianbicking.org/2008/03/30/python-html-parser-performance/
作者：Ian Bicking
译者：Yaker Gong
本文链接：http://www.yakergong.com/blog/?p=487 转载请保留出处
在准备我的 PyCon上关于HTML的演讲 的时候我觉得我应该对现有的一些解析器和文档模型做个性能对比。
实际上，情况有点复杂，因为处理HTML需要几个步骤：
- 解析这个 HTML
- 把它解析为一个对象(比如一个文档对象)
- 把它序列化
有些解析器只处理第一步，有些只处理第二步，有些能处理所有的三个步骤…。例如，ElementSoup 使用 ElementTree 来表示文档，却使用 BeautifulSoup 作为实际的解析器。而 BeautifulSoup 内部也拥有一个文档对象。 HTMLParser 仅仅做解析（不解析出任何对象），然而 html5lib 却能够生成几种不同的文档树（DOM树）。序列化也分为XML和HTML两种方式。
所以我选取了下面这些解析器的库做基准性能测试：
- lxml:包含一个解析器，能够产生文档对象，支持HTML序列化。它也可以不适用内置的解析器而使用 BeautifulSoup 或者 html5lib 进行解析。
- BeautifulSoup:nbsp;包含一个解析器，能够产生文档对象，支持HTML序列化。
- html5lib:有解析器。它也有一个序列化器，但是我没有使用它。它也有一个内置的文档对象（即simpletree），只是…除了自我测试我也不知道这东西还能做什么。
- ElementTree:这个包里有一个XML序列化器，ElementTree能够产生文档对象，它也是python内置的XML解析模块。（我觉得下个版本会带一个HTML序列化器，不过我也没测试这个XML序列化器）。它也有一个解析器，测试的时候我用html5lib当做解析器来测试ElementTree的。
- cElementTree:这是一个使用C语言扩展实现的python模块，实现了ElementTree。
- HTMLParser:包含一个解析器。但是其实它不能解析出文档对象，很多正常网页都不能正常处理（包含Table或者Script），有语法错误的网页就更处理不了了。它只是使用解析器遍历文档。
- htmlfill:它使用了HTMLParser作为解析器，相对HTMLParser，它在解析过程中对Element做了更多处理。
- Genshi[1]:包含一个解析器，能够产生文档对象，支持HTML序列化。
- xml.dom.minidom:python标准库里的内置文档模型，html5lib 能够解析出这种文档对象。（我并不推荐使用minidom — 这篇文章里写了一些理由，还有很多理由我没写出来）
我预想 lxml 的性能会比较好，因为它基于 libxml2这个C库。但是实际上它的性能比我预计的还要好，超过其它所有的同类库。所以，除非考虑到一些难以解决的安装问题（尤其是在Mac上），我都推荐你用lxml 来进行HTML解析的工作。
我的测试代码在这里，你可以自己下载下来运行测试程序。里面包含了所有的样例数据，用来生成图表的命令在这里。这些测试数据来自于从 python.org 随机选取的一些页面（总共355个）。
解析
第一个测试运行这些解析器解析文档。需要注意的是：lxml 比 HTMLParser快6倍，尽管 HTMLParser
不生成任何文档对象（lxml在内存中建立了一个文档树)。这里也没有包含 html5lib 所能生成的全部种类的树，因为每一种花费的时间都差不多。之所以包含了使用 xml.dom.minidom 作为输出结果的 html5lib 测试结果是为了说明 minidom 有多慢。Genshi确实很快，只是它也是最不稳定的，相比之下，html5lib , lxml 以及 BeautifulSoup 都要健壮的多。html5lib 的好处是，总是能够正确的解析HTML（至少在理论上如此）。
lxml在解析过程中会释放 GIL ，但是我觉得应该影响不大。
序列化
所有这些库执行序列化都很快，可是 lxml 又一次遥遥领先。ElementTree 和 minidom 只做XML序列化，但是没有理由说HTML序列化更快。还有就是，Genshi居然比minidom要慢，实话说任何比minidom要慢的东西都挺让人震惊的。
内存占用
最后一项测试是内存。我并不是特别确信我做这个测试的方法很科学，但是数据总能说明一些问题。这项测试会解析所有的文档并把解析出来的DOM树保存在内存中，利用 ps 命令结果的RSS（resident set size）段来表示进程占用的内存。计算基准内存占用之后所有的库已经被import，所以只有解析HTML和生成文档对象会导致内存使用量上升。
我才用 HTMLParser 作为基准线，因为它把文档保存在内存中，只产生一些中间字符串。这些中间字符串最终也不回占用多少内存，因为内存占用基本上等同于这些html问价大小之和。
测量过程中有个棘手的问题就是python的内存分配器并不会释放它请求的内存，所以，如果一个解析器创建了很多中间对象（字符串等等）然后又释放了它们，进程仍然会持有这些内存。为了检测是否有这种情况，我试着分配一些新的字符串知道进程占用的内存增长（检测已经分配但是没有被使用的内存），但是实际上没检测到什么，只有 BeautifulSoup 解析器，在序列化到一个 lxml 树的时候，显示出使用了额外的内存。
只有在内存测试中，html5lib 使用 cElementTree 来表示文档对象同使用 ElementTree 能表现出明显的不同。我倒不是很惊讶，我猜因为我没有找到一个C语言编写的序列化工具，我猜使用 cElementTree 构建文档树的话，只有在用本地代码调用它的时候比较快（就像本地的libxml，并且不需要把数据结构传递到python中）。
lxml比较节省内存很可能是因为它使用了本地的libxml2的数据结构，并且只有在需要的时候才创建Python对象。
总结
在进行基准测试之前我就知道lxml会比较快，但是我自己也没料到会这么快。
所以呢，总结一下：lxml太牛逼了[2]。你可以用很多种方式使用它，你可以对一个HTML进行解析，序列化，解析，再序列化，在机器卡机之前你能重复这些操作很多次。很多操作都是通过本地接口实现的，python只做了一层很浅的封装。例如，如果你做一次XPath查询，查询字符串会被编译为本地代码，然后遍历本地的libxml2对象，只在返回查询结果的时候才会产生一个python对象。 另外，测试中lxml内存占用比较小使我更有理由相信lxml在高负载的情况下仍然会很可靠。
我觉得，文档树相对按字符流解析（不生成树，只扫描一次文档并针对特定的标签做处理）更有优势。表面看起来按字符流解析更好：你不把整个文档放在内存里，处理的时间之和文档大小线性相关。HTMLParser就是这样一种解析器，遇到各种符号（标签开始和关闭，变迁中间的文字等等）。Genshi 也是用的这个模型，因为使用了一些更高级的特性（比如 filters
）所以使用起来更自然一些。其实字符流模型本身就不是一种特别自然的处理XML文档的方式，从某种程度上说，它只是用来处理一些本来就可以当做字符串处理的文档的一种笨拙的方法（regex可以实现同样的功能）。只有你需要处理上G的XML文件的时候按字符流解析才有意义（不过lxml和 ElementTree针对这种情况都有额外的参数支持）。HTML文件不会有这么大，这些测试也有理由让我们相信lxml可以很好的处理大的HTML文件，所以一个大文档也不会导致一个为小文档优化过的系统崩溃。
Ian Bicking on Sunday, March30th, 2008
[1]. Genshi是EdgewallSoftware的产品，它的其他产品还包括大名鼎鼎的Trac。
[2]. 本文的作者Ian Bicking是lxml.html(lxml的一个模块)的开发者和维护者（这里修正一下）。
P.S. 译者记：这里还有一个解析器没有提到就是python标准库里的SGMLParser，它也可以产生ElementTree，但是性能很差，本机测试解析 600k的html文档（ddd的单页html文档）需要480秒，不推荐应用在性能要求比较高的场合。本文作者也是lxml的作者，对自己的作品大力推荐也是正常的，我实测过lxml性能确实很好。
Web开发人员应当知道的15个开源项目
2011年2月25日
{ 没有评论 }
如今，构建网站和开发Web应用程序已经不仅要求开发人员是一名优秀的程序员，更需要聪明的程序员。这也就是说，在可能的情况下，重复使用已有的代 码和应用程序，而不是自己重头开始。开源由来已久，并且很多网站的构建也使用了开源。开发人员都知道Linux、Apache、MySQL及 PHP （LAMP）。
但是除那些之外的其他开源项目呢？作为一名Web开发人员，你可以借助诸多可用的项目，以节省开发时间，或提高程序性能。
下面让我们看一下哪些开源项目可供大家免费使用。
可供使用的新型数据库
传统上讲，你可能习惯使用MySQL。尽管MySQL是一个非常棒的数据库，但诸多试图解决MySQL存在的问题的新型数据库已经问世。
1. MongoDB
MongoDB就是的“非关系型”数据库之一。它扩展性强、性能高。
2. Apache Cassandra
与MongoDB相似，Apache Cassandra也是一种“非关系型”数据库，它亦扩展性强、性能高。并且能够很好地处理庞大而活跃的数据集。（编注：Facebook用Cassandra来做邮箱搜索。）
更多
根据需要，你还有更多的选择。请参阅维基百科的这个列表。
缓存数据
因为需要频繁使用一些数据，所以相比每次去数据库中查询，把这些数据存放在内存中更加合理。这能够大大提高Web应用程序的运行速度。
3. Memcached
Memcached是一种在内存中缓存小型数据块的简单但强大的解决方法。（编注： Facebook运行着成千上万的Memcached服务器，借以及时处理TB级的缓存数据。）
4. Redis
Redis的作用与Memcached相同，但包含更多的特性。例如，它也可以存储本应当永久性保存在磁盘上的数据。
加快网络请求的速度
大多数网站使用Apache的网络服务器来提供服务。它能够很好地服务于大多数网站，但是一旦网站的访问量增大，就需要做进一步优化。
5. Nginx
Nginx是一种与Apache非常相像的网络服务器，但它的速度相当快。作为负载平衡器，它常用于处理静态内容，如图像文件。
6. Varnish
Varnish是位于常规网络服务器之前的高速缓存器。它将所有热门内容放入内存，直接对其处理，无须将所有内容都传给网络服务器。（编注： Facebook用Varnish 处理图片和用户照片，每天都要处理十亿级的请求。Facebook所用到的其他开源项目，请参阅《揭秘Facebook背后的那些软件》一文。）
轻松管理内容
如果你在构建一个允许用户添加及编辑内容的网站，那么你可能需要一个内容管理系统（CMS）。CMS能够帮助开发人员轻松地管理博客及网站，并且提供大量的能够扩展网站功能的插件。
7. WordPress
虽然WordPress是个博客平台，但它也能用于管理大大小小的网站。
8. Drupal
Drupal是一个可用于构建强扩展性、高灵活性网站的完整平台。
更多
还有很多可用的内容管理系统。请参阅维基百科的这个大型列表。
交互式的网络UI
如今，你可以使用JavaScript和AJAX技术，开发一个类似桌面应用程序那样的以多种方式运行的网络应用。使用JavaScript框架，能够轻松地开发大型的网络应用程序。
9. JQuery
JQuery是一个带插件的框架，这些插件有主构建包含AJAX交互及动画的动态网站。
10. MooTools
MooTools就和jQuery一样，是一个使用JavaScript构建强大网络应用程序的框架。
更多
如果你想尝试一下其他选择，请参考维基百科的这个列表。
其他比较炫的资源
当你开始开发一个复杂的网络应用程序时，很多软件、库及模型能够帮你解决难题，如果不参考这些资源，你可能会花费大量的时间。以下是两个入门的例子。
11. Node.js
Node.js是一个事件驱动的输入/输出框架，支持用JavaScript编写应用程序，并在V8 JavaScript引擎上运行。这是一种开发快速、可扩展网络程序的很棒的方式。
12. RabbitMQ
RabbitMQ是一种可靠的、可扩展的信息传送系统，它能够处理高吞吐量。如果需要在系统之间或应用程序之间交换数据，比起传统的解决方案或直接将数据存储在数据库中，信息传送系统的更能胜任这一工作。
使用框架来加快开发进程
不管你是使用PHP还是其他的编程语言，有很多不同的可用框架能够帮助你加速开发进程，并能够更加轻松地管理代码。
13. Symfony
Symfony是一个PHP框架，它包含很多能够加速开发复杂网络应用程序的组件及工具。同时它包含社区提供的1000多个插件。
14. Ruby on Rails
对Ruby语言而言，Ruby on Rails是最流行的可用框架。
15. Django
Django是一个Python网络框架，它用来帮助快速开发高性能、优秀的网络应用程序。
更多
维基百科上有一份更完整的列表，这个列表包含不同语言的可用网络应用框架。
后话 – 合理利用时间
开发人员有必要花费时间不断了解哪些新软件是可用的，这样对轻松地解决复杂的任务大有裨益。
而且在项目开发之初，花费一些时间做计划和调查也是非常有必要的，因为这样可以明确即将面临的问题，并确定其最佳解决方案。
自己编程来解决每个问题的时代已经结束，如今更多的是灵活使用现有技术来解决问题。
不知正在看本文的Web开发人员，在上述这些开源项目中，你用到了哪些？欢迎你在评论中分享你的使用经验和心得。
27 个超级给力的css框架
2011年2月21日
{ 没有评论 }
If you are a busy web designer or developer, using a CSS framework could speed up your work dramatically and make your task far easier. The CSS frameworks facilitate rapid development, could be used as a foundation in many design projects, and take care of some of most repetitive tasks. Here is a comprehensive list of CSS frameworks, which will give you a head start in your design work – some of them are well known and well documented, while others are used by few, but have their strong points and unique features:
1. 960gs
A clean and extensible CSS framework that is HTML5 ready and well documented. It is relatively easy to use, comes with adjustable margins, and 12, 16, and 24 column layouts.
2. YUI 2: Grids CSS
A customizable and flexible CSS framework, which comes with four page widths (750px, 950px, 974px, and fluid-width), and more than 1000 layout options. It offers A-grade browser support, self-clearing footer, source-order independent columns, and is easy to use and well documented.
3. Blueprint
Comes with form styles, print styles, plug-ins, typographic baseline, and easy to customize grid. It also has style sheet for printing and browser CSS reset.
4. BlueTrip
Originally developed by combining the best features of other popular CSS frameworks, has clean form styles, cool buttons, print stylesheet, 24-column grid, and adequate typography styles.
5. Elastic CSS
Allows for unlimited nesting, fixed width or elastic columns, any number of columns, column overloading, full height blocks, and same height columns. It is simple and compatible with most of the popular web browsers.
6. Easy
This one has many great features such as predefined and structure CSS styles for print and screen, HTML content blocks, solid file organization, and interactive functions.
7. EZ-CSS
A cross-browser, very small, and flexible CSS framework that allows users to create multiple columns with any width.
8. Tripoli
A framework that is cross-browser compatible, simple, and easy to use and install. It allows the designers to reset and rebuild the browser defaults, disable deprecated HTML tags, and build neat HTML code.
9. CleverCSS
An indentation based markup language, which could be used to build structured style sheets.
10. SenCSS
This one does not come with preset grids, but includes fonts, margins, paddings, baseline, list, headers, and blockquotes.
11. Emastic
A lightweight CSS framework, which offers fluid or fixed columns, flexible page width, and grid topography.
12. Typogridphy
Based on the 960-grid system and by utilizing the ‘vertical rhythm’ typographical method allows the users to create versatile layouts.
13. Less Framework 3
An excellent framework, which permits creating new layouts by using old layouts and inline media queries, where the new layouts inherit the styles from the old ones.
14. Elements
A free, lightweight, easy to use, and comes with number of preset classes, mass reset, and included lightbox.
15. Boilerplate
A light framework, which comes with no grids component, but provides all essentials CSS elements.
16. Malo
A super small, very flexible, easy to use, and allows for personalized page width.
17. The 1kb CSS Grid
Loosely based on the 960 grid system and is very simple and lightweight. It has 12 columns spread out over 960 pixels in its basic configuration.
18. Fluid Grid System
A free, open source, flexible, and accessible framework. Its main strength is the fact that it facilitates designs, which looks great on large and small screens.
19. Content with Style
Offers layouts in six groups, with six common building blocks: main content, sub content, header, footer, main nav, and local nav.
20. WYMstyle
Comes with tested and reliable CSS modules and facilitates easy development, modularity, and easy maintenance.
21. The Golden Grid
The Golden Grid is lightweight (less than 1kg when compressed), easy to learn, and uses 6/12 grid system and 970 pixels for the main width.
22. Yet Another Multicolumn Layout (YAML)
Robust, slim, and flexible, and comes with design patterns for micro formats, forms, and typography.
23. Compass
Relies on the CSS-generating language SASS and is a set of applications that help designers maintain their CSS.
24. Schema Web Design Framework
Includes set of CSS and HTML settings that allow users to build easily and quickly almost any design.
25. Sparkl
Comes with grid layout, advanced layout, tabs, vertical tabs, typography, tables, images, code, IE only, and links modules. It offers one, two, or three column layouts, folder structure, commented code, and instant tabbed navigation.
26. The jQuery UI CSS Framework
A CSS framework, which makes building jQuery widgets easy. It comes with many framework classes such as layout helpers, interaction states, widget containers, interaction cues, icons, overlays, and shadows.
27. 52framework
Offers CSS reset, grid system, box shadow, text shadow, rounded corners, and HTML5 compatibility.
So what do you prefer? One of these frameworks, a different solution, or one you have created yourself? Please share with us in the comments.
