css心得之善用 position:relative

日期 : 2011年6月12日 1:35 am 标签 : - 代码浅谈 - css 评论 : 20 feet 日历 : 12 Jun 2011

发现最近可以吐槽的东西越来越少 =，= 大概是工作有些忙了~ blog 都杂草丛生了 = =

技术文，看不懂可以提问哇，实在看不懂就挑好玩的看^__^ 很湿~
此文章堆在后台好久了，一直都没找到配图，思路也没理清楚，于是都快臭了~

好吧进入正文~~
=========================华丽的吐槽线======================
可能是个人习惯吧，我个人在写css 样式的时候 position:relative 都很少用。不到逼不得已不用，因为这东西在面对IE大叔的时候总是会各种被推到，比如多个positon 嵌套的的时候会产生类似 z-index 优先级的失控，不知道其他coder们碰到过这个问题没？反正我是碰到不下1次了。

举个栗子如下：html 代码 节略写法，你懂的 阅读全部>>

闭包式 js架构前端书写心得(上)

日期 : 2011年5月24日 23:30 pm 标签 : - 代码浅谈 - javascript - jquery - 交流会 评论 : 6 feet 日历 : 24 May 2011

<img src="http://qilei.org/wp-content/uploads/2011/05/201105-bb.jpg" alt="" title="201105-bb" width="600" height="240" class="alignnone size-full wp-image-1245" />
<h3>5月份的杭州区w3c标准化交流会</h3>
带着感冒 去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》 
顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。
以下是我最近在做新系统的时候用到的一种 闭包式js架构 书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。
<h3>1. 说说闭包</h3>
因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。 
分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。<a href="http://baike.baidu.com/view/648413.htm" target="_blank" rel="help">百科</a> 
分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。
回来又抽空查了下 《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(有空朋友可以翻阅一下：p56)。 最简单的闭包 就是全局变量。
<h3>2. 利用匿名函数解决$冲突</h3>
很多朋友应该会碰到过 一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。 
记得jquery 有个方法是把$让出来。 
这里给出一个比较好用的匿名函数 来形成 封闭作用域来实现。 很多jquery 插件就是这样来书写的
<pre><code>(function($){

/***
 * make $ in Closed Scope
*/
$(function(){
    //do something on dom ready
});

})(jQuery);
</code></pre>
利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。
<h3>3. 怎样不污染命名空间</h3>
 <a href="http://qilei.org/201105/the-closure-alike-javascript-platform/#more-1238" class="more-link">阅读全部>></a>

满月狼吼 — 入手iphone 娘一月记

日期 : 2011年4月20日 22:30 pm 标签 : - 生活琐碎 - iphone 评论 : 16 feet 日历 : 20 Apr 2011

<img src="http://qilei.org/wp-content/uploads/2011/04/P1020232.jpg" alt="" title="P1020232" width="600" height="271" class="alignnone size-full wp-image-1231" /> 
说起来惭愧,原本计划是 5月份才想入手iphone 娘的,因为年初才买GF2, 总不能这么败家吧. 
不过,还是挡不住同事的诱惑呀, 赤果果的入手了联通版的iphone4. ^__^
<h3>一周月 使用心得</h3>
跟大部分入手给iphone娘的主人一样. iphone娘妖娆的身材,以及 几近魅惑的容貌, 一般人都挡不住几下诱惑. 
1. 手感: 4.9分, 
当然赤果果的拿着未免觉得会有些危险, 一个不小心跟大地轻吻一下, 心都能碎掉, 所以必须配个手感还不错的壳才能弥补. (入手一个月 哥已经破了一个壳. 上图音量键边上就断掉了,=,=)
2. 电量: 4 分, 
比起八妹 以及 持久的黑白机( nokia 2100 待机一周 ), 爱疯娘 还是经不起折腾, 基本上每天睡前要插上屁屁, 一天一插. 外出的话,就要另外购个 外置电池了.
3. 速度 5.0 分, 
这个没得说,目前觉得她是满分的, 因为真得感觉不到很卡,有点小卡也是在 理想等待范围内.
4. 应用: 4.9分, 
刚入手第二天就果断越狱男淫, 不为别的, 就为越狱, 起初会很好奇的装N多 应用, N多破解, 但是慢慢沉淀下来的也就那么几个. 有人会说,都买iphone4 了还差那么几个收费的软件么? 呵呵, 是真米钱~~ ^___^ , 
当然什么时候app store 上也有自己的应用的时候, 估计就会慢慢去改过来吧.毕竟 要尊重作者的劳动成果. 
app store 上应用很多,但是真正好的, 自己想用的也就这些, 而且感觉还是有些没有满足自己的需求, 比如 “记账的应用” , “随手记” 用不习惯, 感觉怪怪的. 
5. 相机: 5分, 
又一个满分, 目前手机相机觉得最流畅的一款了吧, 虽然我用的相机不多, 但是已经满足我的拍照需求了, 无论相机打开速度(这个很重要,很多时候, 抓拍一定要这个. 不然等你半天打开,最好的感觉就没了.心情也没了), 拍照速度.
6. 上网: 4.5分 
上周还被同事鄙视说 都iphone4了, 还用ucweb 上网, 额, 说实话我还是不习惯 用手机 safari 上网, 因为一个流量大, 还有一个我还得放大, 如果说用wifi 上还是ok 的, 但是如果是户外的话. 我还是比较倾向于uc, 不过慢慢的发现用ucweb 的机会也越来越少,因为针对各个上网需求都有对应的app应用了. 唯一麻烦的是你得关关开开,时不时捏一下 iphone娘的肚肚. 
7. 信号: 4分 
联通版的iphone 有一点好就是流量大, 还3G 上网速度很快. 但是联通信号不给力啊, 反正一到比较底层的商场内部,KTV 包厢 , 神嘛的 信号就没了, 只剩下移动信号. 很杯具的. 这个很纠结的. 虽然在其他地方上网速度很快, 而且进这样的地方也少, 但是要是去地铁这样的地方要是没信号不久蛋疼死啦~~ 等车啊大哥, 显得蛋疼啊大哥~~!!! 好吧收敛点
好吧, 一个月的使用心得就这样啦. 
就这样跟咱们家八妹告别了, 不过我还是会疼你的. 一个月一次, ^__^ 
不过最近听到iphone4 猛掉价 囧啊 囧啊~~ 
无所谓啦无所谓啦~~
今天就到这里了. 好久没更新了,最近还是挺忙的, 后台堆了好多文章的题目, 挤了几行字. 
好吧少玩游戏少加班 多写文章 灭哈哈`~~ ^__^

乱翻乱教 – 制作可爱的小鸟勃起图标

日期 : 2011年3月9日 23:06 pm 标签 : - 乱翻乱教 - photoshop - PSDTUTS 评论 : 22 feet 日历 : 9 Mar 2011

<img class="janblus-preview" title="bird-sml" src="http://qilei.org/wp-content/uploads/2011/03/bird_sml.jpg" alt="" width="100" height="100" />
<h2>Photoshop 超级可爱的勃起小鸟图标</h2>
制作工具：Adobe Photoshop cs3 
原文地址：<a title="Super Cute Easter Wallpaper Illustration Tutorial" href="http://psd.tutsplus.com/tutorials/icon-design/create-a-cute-twitter-bird-icon-in-photoshop/" target="_blank">猛击此链接</a> 
飞鱼:这只小鸟教程好久前就想做了, 但是发现篇幅太长, 每次看到我都 无语的叹了口气哈. 
这个个教程原文描述的难度是初学者, 但是有些小细节还是比较难的. 
不过这个教程精髓就是在 <del datetime="2011-03-10T02:44:46+00:00">成</del>充分利用ps 里的 图层混合选项 这个东东, 
做完之后可以发现仅仅用 混合选项 调出来的颜色 也是非常有质感的.
<h3>最终效果</h3>
<img class="alignnone size-full wp-image-1164" title="20110309-bird" src="http://qilei.org/wp-content/uploads/2011/03/20110309-bird.jpg" alt="" width="600" height="240" /> 
步骤很多, 但是每步都比较简单, 
只要按照步骤一下一下来一定能做出好东西^__^
 <a href="http://qilei.org/201103/create-a-cute-bird-icon-in-photoshop/#more-1163" class="more-link">阅读全部>></a>

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

日期 : 2011年3月1日 13:10 pm 标签 : - 代码浅谈 - 生活琐碎 - html5 - web 评论 : 12 feet 日历 : 1 Mar 2011

<img class="alignnone size-full wp-image-1154" title="20110228" src="http://qilei.org/wp-content/uploads/2011/03/20110228.jpg" alt="" width="600" height="240" /> 
飞鱼：等交流会洗照片中………^__^ 
掐指一算 发现又有一个多月没更新blog 了，我勒个去~~ = = 
已经是第三次参加 web标准化交流会了，每次都还是有点收获的，更何况每次都是在不同公司感受不同的氛围。
本次交流会在 杭州东软的思科会议室里举行，依然由 蕃茄 主持会议，这家伙每次闲话都很多嘎嘎，是一个对web 情有独钟的淫啊。
闲话少说：大概 跟大伙回报一下 这次交流会的内容以及心得吧。
<h3>一、div section article 傻傻分不清楚 – by 蕃茄</h3>
蕃茄大概介绍了一下html5 的一些标签，引导大伙去讨论。分享了下自己对新增标签的理解。 
不过似乎是思科太高档了，（会议室里大大的会议桌，水果···）大家显得比较拘谨，可能是杭州人都比较含蓄。也可能是 前端淫类 都比较 闷骚~~~ Orz
说到对标签的理解，正如我在交流会上说的 
html5 新增的标签 如 header footer nav aside article section 等。新增的标签让原先赤裸裸的div 变得更加语义化。 
那么更加语义化对web 有什么好处呢。 
我自己总结了一下几点： 
1. 页面结构更加清晰 。从标签的语义就可以看出 section 的中文意思是 地区，章节。让用户的体验是，预览网页更像是在看一本书(<a rel="bookmark" href="http://diveintohtml5.org/">国外的例子</a> 页面看起来就像一本书)，一本书有页眉页脚(header footer) ， 目录(nav) ，旁注(aside) ，章节(section)，正文(article)，区块(section) (article 是特殊的section) 蕃茄写的文章里有说明(<a href="http://www.qianduan.net/html5-differences-in-the-div-section-article.html">HTML5 中 div section article 的区别</a>)。
2. 让爬虫更懂你要传递的内容 。在搜索引擎如此发达的未来，语义化web 能让web 说要传递的信息更加 清晰。比如爬虫可以有选择性的 抓取 正文以外的内容。让爬虫(在你的网站上)多飞一会儿，那么呈现给用户的就越多越快。
3. 让前端代码更加对象化，模块化 。这个思想也是最近在接触很多后端语言，接触手持设备开发语言(android and iOS) 越发期待的。就是期待未来的web 页面制作应该像 xcode 那样制作前端界面的时候 根本不需要敲任何html5代码，(虽然类似Dreamweaver 也能做到，但不是最优化)。那么假如web标准化 慢慢成熟之后 是否直接可以 建立一套类似 那样的界面。 
那么我们前端的工作就不再是：
<ul>
<li>a. 觉得 section 标签比 div 长 (交流会上有人提出这样的疑惑，这个不是问题，因为有自动补全工具); </li>
<li>b. article 标签里是否可以嵌套 section (这个是我突然对这两个标签是否可以交叉嵌套的疑惑).</li>
<li>c. 检查标签是否闭合，(前端的很多bug 都是标签 误删没有闭合造成的, 当然html5 你可以不闭合，但必须遵循它的标准)。</li>
</ul>
以上就是我对前端工作的未来的设想。 
当然前端的工作还有 javascript 部分，这块东西就像玉伯说的，水很深，我们还在河沿。
<h3>二、canvas 应用开发, 真3d引擎 – by 周杰 hehe123 思科网讯</h3>
第二部分有些高端，因为涉及到图形算法。听得好多在场的前端大大们 一愣一愣，因为之前做过flash 对空间算法 还是有点接触，所以听起来不是非常累。 
之前我也写过一篇关于 javascript 3d 的介绍 –<a href="http://qilei.org/200902/javascrip-for-3d-program/">强悍的javascript — 3D效果</a>。 
canvas 是个怨念物。想掌握这个东西，还需要有一定的 图形算法能力。 
周杰给我介绍了下 web中的真3d 开发。我一直以为web上只能做做伪3d呢，不过就目前来讲，真3d 在性能上 跟伪3d 还有有挺大差距的，真3d相当耗资源。可能是研究得还不够深入吧。也许未来的 web 版山口山离我们不远了。 
具体 还是 不深入讨论了，这方面真的好深。有空自己做点 canvas 的真3d 出来 show 一下。
顺便放一个 canvas 的帅气应用 <a href="http://weavesilk.com/">http://weavesilk.com/</a>非常帅气，用cavas绘制类似极光一样的图，算法帝啊·~~ 膜拜
<h3>三、感慨： 我们走得还不够快</h3>
发现不同的公司对web开发的理念就是不一样，像商业为主的 网站 大多都是以 业务为导向，注重实用。觉得思科网讯这一点挺好，它们有个专门针对web的研发机制。以追求领先技术为导向，有点labs的感觉。
相对于这点，不禁 膜拜 来自日本的那些前端大牛。就像 周杰说的当我们还在讨论 html5标准的时候，才开始学习html5的时候，他们就已经开始在研究canvas 的3d 引擎了。这样导致的后果是，我们永远都会在技术研发上落后于他们。 
我就感叹一下~~~~ ^__^