存档

‘Web UI’ 分类的存档

[转]AJAX开发之通讯模式介绍

2009年9月16日
579 views 1 条评论

HTTP是无连接的,HTTP通讯过程基本就是:客户端发送请求给服务器,服务器接收请求给出响应信息,客户端接收响应信息显示在用户的显示器上,客户端断开连接。由此可知,要实现即时聊天中的”即时”,我们有两个办法:服务器抓住连接不断开和客户端不断的向服务器发起请求实现伪即时。当然用 Flash XMLSocket可以实现真正的即时通讯,但这样已经不是使用HTTP协议了,HTTP天生的优势(无需另外开端口、自动穿越防火墙)也就无法体现。

1.短轮询(polling):核心思想是客户端定时去服务器取消息。为了实现即时效果,轮询的间隔必须设计得足够短,另外为了操作的流畅,需要使用 Ajax来发送请求。本人的QGYWebIM就是采用的此方案。这种方案的优点是:后端程序编写比较容易,发送完响应信息马上断开连接,不会占用太多服务器资源。缺点是一般情况下,频繁的请求中有大半是无用,这些冗余请求无形中浪费了带宽和服务器资源。我们可以通过判断用户的活跃程度来决策请求服务器的间隔,我在51的一个帖子提到过这种方法,但是间隔一旦长了,消息的传送就有延时,违背了即时聊天的初衷了。

2.长轮询(long-polling):基本原理是客户端向服务器发送请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,连接被断开期间用户的新信息会被服务器缓存起来。客户端处理完响应信息后再向服务器发送新的请求。这种做法的优势是如果用户一直没新消息,客户端不会频繁的轮询去服务器取消息,节省了流量,但是服务器维持长连接是很消耗资源的。具体实现起来,前端这边基本不需要什么改动,依然是用Ajax轮询取信息,后端需要在没有新消息时处理一下。

3.长连接(streaming):其实很早以前就有人使用这种技术来实现聊天室的通讯。以前在页面中嵌入一个iframe,iframe里放一个使用长连接页面,服务器有新消息就会及时的在iframe里反映出来,再依靠客户端的脚本解析出来就OK了。这样做一个比较严重的问题是:使用 iframe请求长连接时,无论是IE还是firefox都会认为页面没有加载完而显示进度条,很难看。不过这个问题是可以解决的。firefox支持了 Streaming Ajax,在readyState为3的时候就能接受数据,所以问题不大;IE则只能在readyState为4,即连接断开时才能得到返回值。但是伟大的Google工程师使用了一个hack成功的解决了这个问题:使用一个被称为“htmlfile”的ActiveX,把iframe放在这个 ActiveX里就OK了。

// we were served from child.example.com but
// have already set document.domain to example.com
var currentDomain = “http://exmaple.com/”;
var dataStreamUrl = currentDomain+”path/to/server.cgi”;
var transferDoc = new ActiveXObject(“htmlfile”); // !?!
// make sure it’s really scriptable
transferDoc.open();
transferDoc.write(“”);
transferDoc.write(““);
transferDoc.write(“”);
transferDoc.close();
// set the iframe up to call the server for data
var ifrDiv = transferDoc.createElement(“div”);
transferDoc.appendChild(ifrDiv);
// start communicating
ifrDiv.innerHTML = “”;

复制代码
无疑,使用长连接对于用户来说是最好的方案,用户体验最好(消息能及时的到达)、占用用户带宽最少(不会发送无用的请求),但是会增加服务器的开销;长轮询是折中方案,Facebook IM 就是采用这种方案,不过做了一点改动:客户端发起的每个连接服务器都hold10S,这10S中新消息会源源不断的返回给客户端,10s后连接关闭,客户端发起下一个连接。这样做是因为Facebook的用户会不断的打开、关闭新页面,如果每个页面都建立一个永久的长连接,会阻塞浏览器其他请求,服务器也会吃不消的;短轮询因为实现起来简单,适用于小型应用。

转自:

http://www.qgy18.com/2008/08/webim-design-transport/

Web UI

在线配色器

2009年5月27日
1,299 views 没有评论

一直都在从事内部系统的开发工作,一直以来只对性能比较重视.对软件的UI一直都是能看得过眼就可以了.直到最近一些软件公司来公司推销他们做的商业软件.凡事都要有对比,不比不知道,一比真的发现我们做的软件UI方面的确太差了.虽然我们公司也有四个美工,但他们都负责公司对外的网站设计,对自己的软件根本抽不出这么多时间来.最多也只是帮我设计好大的版面,小的细节方面还是需要我们自己调整的而网站的配色是给用户的第一印象.今天就这里开始了解起.

以下是收集的一些网站:
Scheme Generator, 它能够让你直接在网页上调配适合的颜色,并且为你寻找相关的色系。
Color Scheme Generator 工具其实是具有相关专业性,除了看得到的颜色外,它还能设定例如网页安全色(Safe Color)、深浅粉色系、对比色或是灰白色系,可以选择的设定相当的多。若你想将你选择到的颜色告诉朋友时,可以复制网页内的 address of this plot 连结,它就能够在网址内储存你选择的颜色。
http://colorschemedesigner.com/

216个网页安全色
http://www.visibone.com/colorlab/big.html

分析图片颜色的工具,只需要输入图片的网站,就可以帮你把图片中主要用到的颜色取出来.非常智能化的一个软件.
http://www.freegroup.org/category/free-webmaster-tools/color/

跟上面分析图片的类似,这一个是用来分析网站的,你只需要输入网页的地址,就可以帮你把css中使用到的颜色都分析出来.
http://redalt.com/Tools/I+Like+Your+Colors

Web UI, 网站应用

强大的Web画图JavaScript库 – mxgraph

2009年5月24日
1,814 views 没有评论

非常强大的一款在线画图类图.对于我们这些做内部系统的人来说,拿它来画Workflow图非常不错.

发件人 ExtJs_Blog

主页:http://www.mxgraph.com/

下载地址:http://www.mxgraph.com/downloads/mxgraph/eval/

演示地址:http://www.mxgraph.com/demo.html

Web UI ,

收到清华大学出版寄来的新书《JavaScript凌厉开发–Ext详解与实践》

2009年3月11日
716 views 没有评论

    今天深圳的天气开始回暖了,人感觉也舒服多了.早上一到公司,还没有吃完早餐就接到前台的电话说我有一个快递.
    拿到快递包,哇,不是一般的重(如果全是钞票我就发了).拆开一看,居然是清华出版社寄过来的新书 《JavaScript凌厉开发–Ext详解与实践》.这本书的其中一个作者Frank相信大家都认识,早期的ExtJs相关的中文资料都是由他翻译的.

本书详细介绍及章节预览:
http://extjs.org.cn/node/304

Web UI, 生活乐事 , ,

收到机械工业出版寄来的新书《ExtJS Web应用程序开发指南》

2009年1月22日
474 views 没有评论

就快过年了,大家都没有什么心思工作,想着回家了.突然前台告诉我有一个印刷品回执要我去拿.又是一些软件公司的宣传资料?拿到手一看,居然是出版社寄过来的书.突然想起前几天出版社的小杜说给我寄一本《ExtJS Web应用程序开发指南》过来,没想到速度还真快!
下了班,就到对面的邮局领了这一本书,领回来一看,上面居然写着由于公司的信息放不下,所以退回.看来下次买房子的时候,信息要买个开口大一点的.
还没有来得及看这本书,打算过来回来后再认认真真看一遍.

关于该书的详细介绍见:
http://extjs.org.cn/node/293

Web UI, 生活乐事 , ,

Web软件易用性测试的几种方法

2008年11月21日
566 views 没有评论

有效挖掘软件的用户体验,并且找到任何遗留的基于实现模型的问题的最佳方式就是做测试.
缺失浏览器测试
从自身网站上迅速得到反馈的一个很正确的方式就是缺失浏览器测试(browserless self-test).也就是脱离浏览器上的若干功能进行测试.你只需要去掉浏览器中的前进和后退按钮,地址栏,刷新按钮,收藏夹等.该方法通过浏览器自 测来强迫你检验网站的组织来帮助支持用户的心智模型.如果你的网站不达标,那就说明其组织结构存在问题.

5秒钟测试
列出需要清晰和简明的页面或者应用,可以在浏览器中全部预先打开或者全部打印出来.给用户看不同的界面,每次一张,持续5秒钟,并让他们记下所看到的一切内容.

访谈测试
单独约见用户,指定他们完成你指定的各类任务,聆听用户对该软件的满意度,大致能清楚用户的理解程度,当然还会碰到许多你意想不到的事情.

招募测试者

实境可用性测试
和访谈测试有点类似,不过这一个是偷偷进行的,用户并不知道你正在记录这一切.

使用你自己的产品(Eat your own dog food.)
意思就是像客户那样忠诚地用用自己的产品,这是一个很简单的道理.也是最有效的软件测试方法.
推荐大家多使用这一个方法.

摘自:《一目了然》Web显性设计之路

Web UI , ,