雨中人

区别中英文截取字符(二)

rain — Thu, 29 Jul 2010 15:42:14 +0000

是为了对上一篇“区别中英文截取字符”做个补充纠正，其中有一点，我是概念上混淆了，一个UTF-8中文字确实是占了3个字节，但是字符宽度还是2个字符宽度，所以造成了UTF-8下，截取相同数量的字符，但是宽度却不相同,更正后的代码还是有一定的局限性，就是要用等宽字体“如宋体,sans-serif”，但是如果你定义成了非等宽字体就不适用了如“Arial”,举个最简单的例子“a”,”w”这两个字母定义成“Arial”的时候，它们的宽度是不相等的。希望大家能提供更好的思路来解决这个问题，fixtext插件代码如下：
[javascript]
(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:”15″
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
var currentStr=”";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-4:options.maxLen;
for(var i=0,len=textlen;i currentStr+=text.charAt(i);
if(getCharLength(currentStr)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+”……”}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str){
var charLen=0;
for (var i=0,len=str.length; i if(str.charCodeAt(i)>255){
charLen+=2;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)
[/javascript]

Demo : http://www.rainboys.cn/demo/fixtext.html

插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js

随机日志

2009-09-10 -- 想念北方的秋天了 (0)
2009-06-08 -- 【转】Twitter真有那么拽？ (0)
2007-05-23 -- 一对恋人分手时的请单 (0)
2008-07-20 -- 《奋斗2》剧情1 (1)
2008-01-16 -- 缘分解读 (0)
2009-04-07 -- 如果生命可以重来 (0)

区别中英文截取字符

rain — Mon, 26 Jul 2010 09:24:10 +0000

最近很忙，博客很久没有更新了，今天抽出了一点闲暇时间，动手写了这个“区别中英文截取固定字符”的jQuery插件，暂且命名为fixtext吧，相信前端的兄弟们，这种情况会经常遇到，但是一直找不到太完美的解决办法，通常下用css截取，但是css有弊端，最令人不满意的是，限定宽度后有可能会截掉不完整的字符，相当的不雅，后台截取当然最好，但是多数情况下PD不一定愿意干这个活。今天特意写了这个插件，基本能满足大家的工作需要了，包括中英文混排的文字，并且可以区分UTF-8,和GB2312，这样大家应该清楚，中文的编码不一样占的字符也是不一样的，UTF-8占了三个字符，而GB2312占了两个字符，另外还包括一个非常实用的功能——是否保留省略号，用起来还算方便吧。
fixtext插件源码：
[javascript]
/*
* fixtext 0.1
* Copyright (c) 2010 Rainboy http://www.rainboys.cn/
* Date: 2010-07-26
* 区别中英文截取字符
*/
(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:”15″
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
//判断网页的编码方式,如果是UTF-8那么一个汉字就占3个字符，如果GB2312一个汉字占2个字符
var webcode;
webcode=(document.characterSet)?document.characterSet:document.charset;
incre=(webcode.toUpperCase()==”GB2312″)?2:3;
var currentStr=”";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-2*incre:options.maxLen;
for(var i=0,len=textlen;i currentStr+=text.charAt(i);
if(getCharLength(currentStr,incre)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+”……”}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str,incre){
var charLen=0;
for (var i=0,len=str.length; i if(str.charCodeAt(i)>255){
charLen+=incre;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)
[/javascript]
引用脚本
[javascript]
$(要截取的对象).fixtext({ellipsis:false,maxLen:”20″});
[/javascript]
这里面包括了两个参数ellipsis和maxLen,顾名思义，ellipsis它就是决定是否保留省略号的，当他的参数是“true”的时候，就保留省略号，“false”时就不保留省略号，maxLen就是截取的字符长度，有一点提醒一下大家，maxLen包括省略号的长度，比如要截取20个字符，并且保留省略号，如果页面编码是GB2312,那么截取的字符就是16个。插件的源代码就不解释了，注释已经很详细了。童鞋们使用过程中遇到了问题的话，请给我留言！欢迎大家来交流！

Demo : http://www.rainboys.cn/demo/fixtext.html

插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js

随机日志

2009-01-30 -- 50个令人叹为观止的JavaScript应用站点 (0)
2007-10-18 -- 转载解放日报：“爱国病毒”与“谢谢中国”哪个更可怕 (0)
2008-01-09 -- 让幸运来敲门 (0)
2010-03-19 -- javascript 闭包(Closure)初探 (0)
2008-07-21 -- 《奋斗》剧情2 (3)
2009-05-25 -- 沉醉在雨季 (0)

解决IE6背景图片不缓存的问题

rain — Wed, 14 Jul 2010 08:05:17 +0000

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。示例： a{ background:url(normal.gif); } a:hover { background:url(hover.gif); } 如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片. 解决方法具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand(“BackgroundImageCache”,false,true); 关于这段脚本的放置方式有两种：

1.使用CSS，在CSS中加入如下代码 html {}{ filter: expression(document.execCommand(“BackgroundImageCache”, false, true)); }

2.使用JS： document.execCommand(“BackgroundImageCache”,false,true);

2009-01-19 -- IE6真的要离开我们，你会怀念它吗？ (0)
2008-04-10 -- IE6 中 a:hover 的bug (0)

【转】白鸦”我心目中的”产品中心”

rain — Thu, 24 Jun 2010 03:58:14 +0000

自从说了“不应该有“用户体验设计”这个说法之后”（链接），又看到不少人在讨论产品经理、交互设计、用户体验这些分工之间的协作问题。刚好，前些天帮某中小型公司提了个“产品中心”的配备方案。晒出来，且作为我对于产品、设计、体验之间的看法。欢迎讨论，不欢迎挑刺。

HI，all

对于这个“产品中心”，我的这个想法有几个基础前提如下：

0、以下观点仅针对我所看到的“大部分”企业，是否适用尚未可知。
1、不应有专门的“UED”部门，设计和产品要放到一起。
2、我心目中的PM是“产品市场经理”，除了产品还应该考虑产品运营和产品体验。项目经理应该定义成PM在某个阶段的助手。
3、PM的定位和能力，根据企业和产品的模式不同，应该有所偏重。比如，百度是偏体验的、淘宝是偏运营的、阿里B2B是偏销售的，Google是偏协调的。
4、PM应该决策该产品的所有事宜，因为他要承担产品的所有责任。但不是自己亲手做所有事情。当然，更应该充分尊重其他角色领域的专业意见。
5、交互设计和产品设计根本撤不清，所以就别指望撤清，我们往往说“多沟通”就能解决，其实是在避重就轻的扯蛋。
6、类似文案设计的工作不应该列专门的部门，而是谁做的产品谁负责，谁写的文字谁负责。但，需要有角色去倡导、协调、管理所有文案的统一气质和质量。
7、必须要有一个“架构师”，来负责协调所有产品之间的关系，和统一风格。
…………………………..

岗位和职责

1、产品架构师/首席产品设计师：负责整体产品的架构设计和管理、通用规则管理。
1.1，架构设计和管理是一个很见功底的活，需要有耐心培养，更需要赋予足够大的权利和义务。
1.2，对于偏“体验”的产品，通用的呈现层规则必须文档化管理起来。所谓的“通用规则”，主要指：信息架构、页面结构、交互规则、文案规则、视觉规则。原则上，并不是要他来整理或者设计这些通用的东西，而是需要归档到他这里来管理，原则性的变更必须经过其同意。（当然，其实也可以把视觉、交互、文案交给这些角色中的“组长”或者“首席”。）
1.3，另，产品架构师最好只有一个，同时设一个助理。一来事情多，二来需要有后续的架构师储备。当架构师流失的时候，对企业会是灾难性的事情。

2、 用户研究组：协助PM和产品设计师做需求调研、竞争分析、可用性测试、用户行为数据分析，整理相关用户体验反馈并出具报告。
2.1，这应该是一个中立的“第三方”研究组，对于产品体验质量的评判需要靠他们，产品决策和设计的来源也得靠他们。这个组不能参与到具体业务太深，更不能脱离业务。
2.2，这个组的各种研究，仅提供给具体业务角色作为参考，具体决策甚至更深入的研究还得靠业务角色自己来完成。
2.3，这个角色的产出物最好只是好、不好，同时一定要有“为什么”。可以给具体产品建议，但一定要是来自用户的建议，而不是经过自己“揣测”或者“设计”的“设计方案”。

3、 产品市场经理：所负责产品的用户和需求分析、产品发展规划、市场和运营规划、架构设计、资源调配、通用规则管理。
3.1，所负责产品的所有责任和决策权都应该是他的，但不是所有事情都他来做，同事他还要充分尊重其他角色的专业意见。
3.2，什么情况下做了什么决策，为什么这样决策，后续计划是什么，必须要有文档。
3.3，除了必须从用户需求出发，也必须要有成本观念，任何一个计划都需要有对于成本和收益的考虑。

4、产品设计师：所负责产品的功能设计、业务流程设计、使用流程设计、系统(研发)需求分析
4.1，功能设计一定要基于产品经理的需求分析而出，不能无中生有。
4.2，业务流程设计和使用流程设计是两回事，都需要有。需要清楚给用户呈现的是什么，也需要清楚背后的业务逻辑是什么。
4.3，系统需求分析是个体力活，也是保证产品设计被最终实施的必须步骤。

5、界面设计师：界面的视觉设计和互动设计
5.1，界面设计师先考虑的不是“好看”，要是“用什么样的视觉逻辑更清晰的呈现给用户界面内容”，然后才是用视觉来影响用户的情感。如之前在微博上讨论过的一样：视觉设计是用视觉手段解释界面元素的逻辑关系，并达到情感化的影响。
5.2，单页面的互动问题应该交给视觉设计去做。产品设计应该去做交互，但不应该过多考虑“互动效果”。
…………………………..

人员配备

1、理想状态下，我会按照产品的关系，分成几个产品组。如：xxx、xxx、xxx
2、产品架构师只有“一个”，设计助理一名作为后备。直接向产品中心负责人汇报。
3、用户研究组是独立部门，直接像产品中心负责人汇报。视需求而定人员数量。但不能超过产品设计师的一半。
4、根据需求每个产品组，1个PM，2到5个产品设计师，1到3个界面设计师。
…………………………..

补充说明：

1、要根据项目和产品发展阶段设定人员工作。PM必要的时候可以去做产品设计师，界面设计师必要的时候也可以去做产品设计师，但PM不是谁都能去做的。谁都能去参与产品市场的讨论，但决策不能随便交出去。
2、在中小型团队中，往往我更喜欢“因人设岗”，我认为这对于互联网产品更实际更管用。
3、必要的时候再增加“产品运营”的职位。BD应该成立独立部门，运营不需要。
4、再次强调：产品和设计不要分开，产品中心的人员角色不要搞太多，职责也不要太清晰。

原文出处：http://uicom.net/blog/?p=878

随机日志

2008-11-01 -- 心里的那点悸动 (1)
2008-07-21 -- 《奋斗》剧情2 (3)
2007-07-17 -- 奈何 (0)
2009-03-23 -- 转载—–再见,Google (2)
2008-02-18 -- 心态——决定环境和命运 (0)
2008-03-06 -- IE8beat1可以下载了 (0)

让页面变得更快一点

rain — Thu, 10 Jun 2010 14:33:47 +0000

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。

简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；

浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

浏览器发现了一个包含一行Javascript代码的

雨中人

区别中英文截取字符(二)

随机日志

区别中英文截取字符

随机日志

解决IE6背景图片不缓存的问题

相关文章

【转】白鸦”我心目中的”产品中心”

随机日志

让页面变得更快一点