<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>雨中人</title>
	<link>http://www.rainboys.cn</link>
	<description>夫君子之行，静以修身,俭以养德……</description>
	<lastBuildDate>Mon, 06 Sep 2010 03:18:50 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	<!-- generator="WordPress/3.0.1" -->

	<item>
		<title>区别中英文截取字符(二)</title>
		<description><![CDATA[是为了对上一篇“区别中英文截取字符”做个补充纠正，其中有一点，我是概念上混淆了，一个UTF-8中文字确实是占了3个字节，但是字符宽度还是2个字符宽度，所以造成了UTF-8下，截取相同数量的字符，但是宽度却不相同,更正后的代码还是有一定的局限性，就是要用等宽字体“如宋体,sans-serif”，但是如果你定义成了非等宽字体就不适用了如“Arial”,举个最简单的例子“a”,&#8221;w&#8221;这两个字母定义成“Arial”的时候，它们的宽度是不相等的。希望大家能提供更好的思路来解决这个问题，fixtext插件代码如下： [javascript] (function(){ $.fn.fixtext=function(options){ var defaults={ ellipsis:true, maxLen:&#8221;15&#8243; } var options = $.extend(defaults, options); this.each(function(){ var fixobj=$(this); var currentStr=&#8221;"; var text=$(fixobj).html(); var textlen=text.length; //判断是否保留省略号 options.maxLen=(options.ellipsis)?options.maxLen-4:options.maxLen; for(var i=0,len=textlen;i&#60;len; i++){ currentStr+=text.charAt(i); if(getCharLength(currentStr)&#62;options.maxLen){ //不保留里省略号的文字内容 text2=text.substr(0,i); //保留里省略号的文字内容 if(options.ellipsis){text2=text2+&#8221;……&#8221;} $(fixobj).html(text2); return; } else{ $(fixobj).html(currentStr); } } //计算截取字符的长度 function getCharLength(str){ var charLen=0; for (var i=0,len=str.length; i&#60;len; i++){ if(str.charCodeAt(i)&#62;255){ charLen+=2; } else{ [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/942</link>
			</item>
	<item>
		<title>区别中英文截取字符</title>
		<description><![CDATA[最近很忙，博客很久没有更新了，今天抽出了一点闲暇时间，动手写了这个“区别中英文截取固定字符”的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:&#8221;15&#8243; } 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()==&#8221;GB2312&#8243;)?2:3; var currentStr=&#8221;"; 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&#60;len; i++){ currentStr+=text.charAt(i); if(getCharLength(currentStr,incre)&#62;options.maxLen){ //不保留里省略号的文字内容 text2=text.substr(0,i); //保留里省略号的文字内容 [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/933</link>
			</item>
	<item>
		<title>解决IE6背景图片不缓存的问题</title>
		<description><![CDATA[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(&#8220;BackgroundImageCache&#8221;,false,true); 关于这段脚本的放置方式有两种： 1.使用CSS，在CSS中加入如下代码 html {}{ filter: expression(document.execCommand(&#8220;BackgroundImageCache&#8221;, false, true)); } 2.使用JS： document.execCommand(&#8220;BackgroundImageCache&#8221;,false,true); 相关文章2009-01-19 -- IE6真的要离开我们，你会怀念它吗？ (0)2008-04-10 -- IE6 中 a:hover 的bug (0)]]></description>
		<link>http://www.rainboys.cn/index.php/archives/928</link>
			</item>
	<item>
		<title>【转】白鸦&#8221;我心目中的”产品中心”</title>
		<description><![CDATA[自从说了“不应该有“用户体验设计”这个说法之后”（链接），又看到不少人在讨论产品经理、交互设计、用户体验这些分工之 间的协作问题。刚好，前些天帮某中小型公司提了个“产品中心”的配备方案。晒出来，且作为我对 于产品、设计、体验之间的看法。欢迎讨论，不欢迎挑刺。 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不是谁都能去做 的。谁 [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/925</link>
			</item>
	<item>
		<title>让页面变得更快一点</title>
		<description><![CDATA[Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。 简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的： 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 浏览器开始载入html代码，发现&#60;head&#62;标签内有一个&#60;link&#62;标签引用外部CSS文件； 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 浏览器继续载入html中&#60;body&#62;部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了； 浏览器在代码中发现一个&#60;img&#62;标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 浏览器发现了一个包含一行Javascript代码的&#60;script&#62;标签，赶快运行它； Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个&#60;div&#62;（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码； 终于等到了&#60;/html&#62;的到来，浏览器泪流满面…… 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下&#60;link&#62;标签的CSS路径； 浏览器召集了在座的各位&#60;div&#62;&#60;span&#62;&#60;ul&#62;&#60;li&#62;们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。  浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。 说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。 reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。 reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的&#60;img&#62;图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。 另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于reflow（在IE下需要换一下说法，reflow要比repaint更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。 原文出处：http://www.userkon.com/ 随机日志2010-03-16 -- 基督教婚姻誓言中英文版 (1)2009-06-25 -- 《杜拉拉升职记2》看完了 (5)2007-09-03 -- 3pxbug问题 (0)2008-09-10 -- FA2008上线了 (0)2007-06-15 -- 无题 (0)2009-11-12 -- 【转】李开复：给创新工场求职者的一封信 (0)]]></description>
		<link>http://www.rainboys.cn/index.php/archives/918</link>
			</item>
	<item>
		<title>无题</title>
		<description><![CDATA[或许吧，能感受她的幸福，就是我最大的的快乐，只希望每次电话的那头都能够听到鬼灵的笑声，这就是对我奖励的，会让我觉得满足，能让我感觉到幸福，不喜欢争吵，只想多做一些，只想每天都看她会心的微笑！ 随机日志2008-03-06 -- 又认识了几个朋友 (0)2008-07-25 -- 《奋斗》剧情4 (0)2007-08-04 -- 佛家经典语录 (0)2008-05-18 -- 雏菊 (1)2007-07-12 -- 教我如何不想他 (0)2009-03-23 -- 转载&#8212;&#8211;再见,Google (2)]]></description>
		<link>http://www.rainboys.cn/index.php/archives/910</link>
			</item>
	<item>
		<title>招聘前端</title>
		<description><![CDATA[Frontend Web Engineer (UED) Responsibility: Design, Implement and Maintain the web products focus on frontend user experience by HTML/CSS/JS/Flex and frontend application logic. Requirement: 1. BS/MS in Computer Science or Engineering related. 2. BS 2+ years in web frontend development &#38; enterprise application development experience 3. Experience in frontend web development experience (HTML, CSS, DOM, [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/895</link>
			</item>
	<item>
		<title>宝贝你听到了吗</title>
		<description><![CDATA[宝贝你听到了吗 我在轻轻对你说话 看到你露出的笑脸 是我看到最美的图画 宝贝你听到了吗 我在轻轻等你回答 你眼里透出的快乐 是我一生最大的满足 牵着你的手陪你慢慢走 我有多爱你多想你知道 希望有一天你站在我肩上 挥动着翅膀把梦想打量 …… 随机日志2008-09-24 -- jQuery的选择器汇总 (0)2008-03-29 -- 网站终于又恢复了 (6)2009-01-30 -- 50个令人叹为观止的JavaScript应用站点 (0)2010-04-27 -- 【转】jQuery类对象数组操作 (4)2009-11-08 -- css布局小结 (0)2007-11-27 -- [转载]Yahoo!的项目工作流程 (0)]]></description>
		<link>http://www.rainboys.cn/index.php/archives/889</link>
			</item>
	<item>
		<title>招聘UI设计师</title>
		<description><![CDATA[职位描述: 1. 负责网站及网络产品的设计和创意; 2. 与软件开发人员及网页后台程序员进行沟通和配合，分析客户需求，能独立完成网站界面设计; 职位要求： 1. 在互联网公司从事网站UI设计工作1年以上； 2. 精通photoshop、Illustrator等制图软件； 3. 理解UED，了解 界面Usability 易用性，熟练掌握界面设计中的色彩运用 4. 熟悉XHTML/CSS等网页技术优先考虑； 5. 积极、乐观、愿意沟通。 *薪资面议 *请投递简历时，说明您的： 博客 作品 联系人：Weston Mobile: +86-13472466606 &#124; Phone: +86-21-39556264 Skype ID: gxbsst &#124; MSN: gxbsst@gmail.com &#124; Twitter: @Weixuhong Email: weixuhong@gmail.com OR weston.wei@tohkin.com Website: www.tohkin.com 随机日志2007-06-15 -- 10种水果女人的果味爱情！ (0)2007-10-08 -- 杭州西湖游玩记 (4)2008-02-27 -- 我来过,我很乖(感动……) (0)2008-08-18 -- 于SliverLight 1.0 Beta 和 最新发布的RC两个版本之间的差别 (0)2008-08-06 -- Silverlight创建引导层动画 (2)2008-02-21 -- 无欲无求 [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/725</link>
			</item>
	<item>
		<title>【转】jQuery类对象数组操作</title>
		<description><![CDATA[我们都知道jQUery对象中有一个类数组的元素包装集，该集合类似js中的数组一 样拥有length属性，因此我们称此为类数组，下面我们就来总结下这个jQuery对象中的类数组时如何进行操作的，看看我们的jQuery为我们都提 供了哪些可用的方法： size()：很明显，它应该是返回包装集中的元素个数，如$(&#8216;a&#8217;).size()表示链接元素的个数； get(index)：当没指定index时就默认取包装集中所有元素，并以js中的数组形式返回，如果指定了index，则返回下标为 index对应的元素，如$(&#8216;img[title]&#8216;).get(0)返回包含属性title的第一个img元素，其也等效 于$(&#8216;img[title]&#8216;)[0]； index(elem)：在包装集中返回元素elem所在的下标，如果没找到该元素则返回-1； add(String&#124;elem&#124;Array)：把参数中的元素添加到包装集中，如果参数是jQuery选择器，那么将把所有匹配的对象都添 加到集合中，如果是html元素那就通过clean方法得到的元素数组添加到集合中，如果是dom元素或dom元素数组，那就直接添加到集合了；注意返回 的是添加后的包装集；如$(&#8216;img[alt]&#8216;,&#8217;img[title]&#8216;)等效于$(&#8216;img[alt]&#8216;).add(&#8216;img[title]&#8216;)即 返回包含了alt属性的img元素或包含了title属性的img元素； not(String&#124;elem&#124;Array)：把包装集中满足参数条件的元素删除，注意参数只能是筛选表达式，即以&#8221;["或者":"开头的 表达式，如$('img[title]&#8216;).not(&#8216;title*=puy&#8217;)即返回包含title属性的img元素，并且这些元素的title属性中 包含有puy文本；返回的是筛选之后的包装集； filter(String&#124;function)：如果传入的参数是String类型的话，那么该表达式必须也是筛选表达式，用于从包装集里 删除所有与选择器不匹配的元素；如果传入的是一个函数的话，那么包装集中的每个元素都调用这个函数，若这个函数返回false则把这个元素从包装集中删 除，而在函数中可以通过this关键字来调用当时包装集中调用方法的元素；如$(&#8216;td&#8217;).filter(function(){return this.innerHTML.match(/^&#8221;d+$/)})返回td中的内容为数字的所有td元素； slice(begin,end)：创建并返回新的包装集，该包装集是原来包装集的连续的一部分，且新包装集的第一个元素是原包装集中的 begin位置的元素，而最后一个元素是end位置元素的前一元素，当然end可以不指定，那么将延伸到原始包装集的末尾； 如$(&#8216;*&#8217;).slice(2,3)这个语句选择页面上的所有元素，然后生存包含原始包装集的第三个元素的新包装集，注意这 个$(&#8216;*&#8217;).get(2)不同，这个返回的是元素，而slice方法返回的是包装集，从而拥有包装集的操作； childen()：返回原始包装集元素的所有不同子元素所组成的新包装集(不包含文本节点)，如$(&#8216;div&#8217;).children()返 回所有div元素下的子元素所组成的新包装集；如果指定了参数，那么该参数也是筛选表达式； contents()：返回原始包装集元素的内容新包装集(可以包含文本节点)；注意此方法不能接受参数进行过滤； next()：返回原始包装集元素的所有唯一的下一个兄弟元素所组成的新包装集；如果指定了参数，那么该参数也是筛选表达式； 如$(&#8216;div#someDiv&#8217;).next()返回包含id为someDiv的div元素的下一个兄弟元素的包装集；如果指定了参数，那么该参数也是 筛选表达式； nextAll()：返回包含原始包装集元素的所有后续兄弟的新包装集；如$(&#8216;div#someDiv&#8217;).nextAll()返回包含 id为someDiv的div元素的后面兄弟元素的新包装集；如果指定了参数，那么该参数也是筛选表达式； parent()：返回原始包装集所有元素的唯一直接父元素的新包装集；如果指定了参数，那么该参数也是筛选表达式； parents()：返回原始包装集所有元素的祖先元素的新包装集；如果指定了参数，那么该参数也是筛选表达式； prev()：返回原始包装集元素的所有唯一的上一个兄弟元素组成的新包装集；如果指定了参数，那么该参数也是筛选表达式； prevAll()：返回包含原始包装集元素的所有前面兄弟元素的新包装集；如果指定了参数，那么该参数也是筛选表达式； siblings()：返回包含原始包装集元素中的所有唯一兄弟元素所组成的新包装集；如果指定了参数，那么该参数也是筛选表达式； find(String)：返回包含原始包装集里与传入的选择器表达式相匹配的所有元素的新包装集，并且原始包装集中的元素的后代也会被传入 新的包装集； contains(text)：返回包含text参数所传入的文本字符串的元素所组成的新包装集； is(String)：如果包装集中含有String匹配的元素，那么返回true，否则返回false； clone(copyHandle)：如果传入的参数为true，那么会连带事件一起拷贝，否则不拷贝事件，形成一个新的包装集； end()：在jQuery命令链内调用，以便返回退到前一个包装集； andSelf()：合并命令链内最近产生的两个包装集； 相关文章2010-03-19 -- Jquery语法总结和注意事项 (0)2009-11-03 -- jQuery对象与dom对象 (0)2009-03-16 -- 240多个超实用的jQuery插件推荐 (0)2008-09-24 -- jQuery的选择器汇总 [...]]]></description>
		<link>http://www.rainboys.cn/index.php/archives/723</link>
			</item>
</channel>
</rss>
