浆抱罗斯 - 飞鱼‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

3 Nov 2010

姐默默的陪你度过了整个学生时代~

2010年11月3日 23:20 pm - 生活琐碎

0 ~o~

看图不说话 ^____^ , 图为网络好图, 作者V5

12 Oct 2010

野谈交互 – 巴巴2011版 – 有点黄

2010年10月12日 23:24 pm - 又设又计 - 野谈交互 - 改版 - 阿里巴巴

9 feet

<img src="http://www.qilei.org/wp-content/uploads/2010/10/20101012.jpg" alt="" title="20101012" width="600" height="320" class="alignnone size-full wp-image-988" /> 
<a href="http://www.alibaba.cn">巴巴</a>每次改版都让我引起很大的兴趣。从页面的改动能看出 一个网站 发展的趋势，设计风格，以及交互特点等信息。 
哈~~ 感觉有点像品酒
PS： 最近开始接触 交互的一些东西，不知道算是进化，还是退化，新建了一个 野谈交互 类目 鼓励自己多接触 分享 交互的一些个人见解，也算是给新人一个指引。当然在大虾面前献丑了··· 就当打酱油好了···^_^
从上次 的 <a href="http://www.qilei.org/201001/new-design-about-alibaba-home-page-2010/">阿里巴巴2010新版首页</a> 看出 阿里巴巴 中文站 首页慢慢年轻化，这次的改版，因为 确定了用户群后，慢慢开始注重交互分享部分发展。听我 慢慢说来。
<h3>嗯，很黄，灰常黄~~</h3>
上次因为 需要年轻化，将整体色调改成了桔黄色，这次似乎微调了下颜色，也许是上一版太简洁了，我也是这么认为的。这次的配色，有那么点钱的味道，进入首页有一种金灿灿的感觉，冠冕堂皇的称之为 商人的味道。 感觉 这个定位还是ok 的，之前的定位有点太年轻了，商人气息 不足。
<h3>挤，很挤，真的有点挤~~</h3>
感觉有点回到2010 版以前那版的 拥挤感，第一屏 文字密度很大，我有点乱，因为 第一屏(1024*768) 就中间一推广banner，焦点全给占去了··· 周围的字 有点弱化，而且周围的模块都一样，层次显示的都一样。有点摸不着哪个是哪个，建议 加些可以 可以区分 模块的 idea。PS：发现原先快照的 那样标签 区块挺明显的，不知道为啥子改掉 <a href="http://qilei.org/201010/interaction-talk-about-the-home-page-v2011/#more-986" class="more-link">阅读全部>></a>

22 Sep 2010

偏激害死人 – 再谈 OOCSS – 对象式书写规则

2010年9月22日 13:25 pm - 代码浅谈 - css

12 feet

<img class="alignnone size-full wp-image-935" title="blog20101922" src="http://www.qilei.org/wp-content/uploads/2010/09/blog20101922.jpg" alt="" width="600" height="200" /> 
配图:最近 太宠 小3(mac book pro 374)了,大老婆抖去了, 闹脾气起不来了.
看这篇文章前可以先 去看下下面这篇文章. <a href="http://www.zhangxinxu.com/wordpress/?p=1098">精简高效的CSS命名准则/方法</a> 
当一个css 代码年龄超过 2年的淫都会想着怎样去偷懒,去节省那些重复的样式代码. 
于是就出现了很多流派. (以下名字都湿我YY, 哥只是 非专业的) 
比如 
直肠流: 写css 属性不换行. e.g.<code>.class{color:red; }</code> 
短线流: 写css 喜欢用短词用中横线链接 e.g. <code>.home-notice-tit{...}</code> 
and so on.. 
当然也有上面文章里的 大牛 使用分离 流 e.g. <code>.pl4{padding-left:4px }</code> 
因为这样的分离流, 咱们 <a href="http://h-yue.com">星罗 </a>发飙了, 发扬愤青应有的愤怒. 
的确, .pl4 .pl10 这样的做法 飞鱼我也是很鄙视的, 丫 跟内联样式 有啥区别, 
如评论所说的, 这样写无非是再写天书, 缺点毛多. 
就像星罗 说的一样,因为尝试过了,之后发现大的问题, 然后放弃了.
<h3>过分进行属性分离的后果</h3>
<ul>
<li>1.可读性: 1星, 还需要别人是很努力的记下你的缩写表.</li>
<li>2.可维护性: 1星, 曾经有个需求让哥去掉, 某tit(上左右1px border),的boder,然后给tit加 一个背景, 代码类似: bt1 bl1 br1 .丫的, 搜了一下有他娘的40哥文件上百处. </li>
<li>3.CSS Sprites:1星, 用CSS Sprites 的时候,会很囧rz ,用了就知道</li>
<li>4.不可压缩及分布式调用: 随着需求越来越复杂, 公用样式包会越来越大, 又不能切分, 对于多样化的页面将是噩梦,会遇到 只有丁点样式,而不得不调用庞大样式得尴尬情况</li>
<li>5. 还有好多…</li>
</ul>
以上只是过分 属性分离的后果. 
但是上文中张鑫旭的文章 中也有好的部分, 比如他的 oocss 对象式css 书写规则, 
这种对象式的书写方法也是我慢慢积累出来的一种方法. 
oocss 的 书写带来的效率及性能可以看这里: <a href="http://www.zhangxinxu.com/wordpress/?p=1045">翻译:同CSS技术及其CSS性能</a> 
也可以查看我之前写的 <a href="http://www.qilei.org/201008/addon-class-do-not-run-on-ie-6/">又见IE6吐槽~ 并行结构式class引起的bug</a>
好了回归主题, 说说我对 OOCSS 对象式css 书写的理解,还有心得. 
 <a href="http://qilei.org/201009/talking-about-the-oocss-for-web-site/#more-934" class="more-link">阅读全部>></a>

7 Sep 2010

神经特长 – lazy hover 延迟激活jquery 插件

2010年9月7日 19:58 pm - 代码浅谈 - jquery

12 feet

<img class="alignnone size-full wp-image-915" title="20100907" src="http://www.qilei.org/wp-content/uploads/2010/09/20100907.jpg" alt="" width="600" height="200" /> 
<a href="http://www.flickr.com/photos/dgkingdom/4910886550/in/pool-1142552@N25/">原图地址</a>：淘宝tms里发现，偷过来用用，喜欢就去看看咩~~~
做导航菜单的时候，有的时候希望，鼠标移到菜单上去过会儿才激活二级菜单，鼠标移出去之后过会儿才消失。jquery自带的 hover 事件是立马响应的。google了下网上好像没lazyhover的插件。于是 就华丽丽的诞生了这个lazyhover 的插件^__^。
闲话少说，先上代码：
<pre><code>$(function(){
 $.fn.lazyhover = function(fuc_on, fuc_out, de_on, de_out) {
 var self = $(this);
 var flag = 1;
 var h;
 var handle = function(elm){
 clearTimeout(h);
 if(!flag) self.removeData('timer');
 return flag ? fuc_on.apply(elm) : fuc_out.apply(elm);
 };
 var time_on = de_on || 0;
 var time_out = de_out || 500;
 var timer = function(elm){
 h && clearTimeout(h);
 h = setTimeout(function() { handle(elm); }, flag ? time_on : time_out);
 self.data('timer', h);
 }
 self.hover(
 function(){
 flag = 1 ;
 timer(this);
 },
 function(){
 flag = 0 ;
 timer(this);
 }
 );
 }
});
</code></pre>
插件使用方法我就不说了，直接贴带代码前就可以，当然jquery.js是必要的(丫不用jquery就当看A-V =，=)。 
 <a href="http://qilei.org/201009/jquery-plugin-of-lazyhover/#more-907" class="more-link">阅读全部>></a>

6 Sep 2010

我去~ 我不是果粉！我就是买了只MBP，^__^

2010年9月6日 23:33 pm - 生活琐碎

7 feet

Page 5 of 36« First «...3 456 7...»Last »

Who am I ?

飞鱼，男，浙江人士。
非专业前端、交互设计师。
目前在企鹅村通宵打酱油

成年往事

那些朋友

大猫不是猫，是妖怪
葉子家园小MM
小峰家园
小豪家园滴前端
引子歌词写得很棒
落落印钱的
丁丁淘宝
辉辉即将毕业滴网工
布拉格 Evance | 花花
笨笨开过淘宝店的前端哥哥
毛毛研究生大姐头~
余果 ISUX | 给力切图仔
陆续增加中...^_^

竟然忘了我？提醒一下

那些牛×的人

白鸦喜欢他的想法
Rokey 喜欢他的设计质感
跑调麦霸喜欢他的设计风格
韩寒喜欢他的职业

相信六度定理，有朝一日能认识他们。

飞鱼 ^_^ 浆抱罗斯‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

姐默默的陪你度过了整个学生时代~

野谈交互 – 巴巴2011版 – 有点黄

偏激害死人 – 再谈 OOCSS – 对象式书写规则

神经特长 – lazy hover 延迟激活jquery 插件

我去~ 我不是果粉！我就是买了只MBP，^__^

Who am I ?

分类

最新在啃

成年往事

最新评论

那些朋友

那些牛×的人

飞鱼 ^_^ 浆抱罗斯‘s blog

欢迎光临：飞鱼的东西有点糟糕，希望你慢慢享用，且有所收获 ^_^

姐默默的陪你度过了整个学生时代~

野谈交互 – 巴巴2011版 – 有点黄

偏激害死人 – 再谈 OOCSS – 对象式书写规则

神经特长 – lazy hover 延迟激活jquery 插件

我去~ 我不是果粉！ 我就是买了只MBP，^__^

Who am I ?

分类

最新在啃

成年往事

最新评论

那些朋友

那些牛×的人

我去~ 我不是果粉！我就是买了只MBP，^__^