学习笔记 – 做一个高效的切图仔

日期 : 2011年11月25日 19:57 pm 标签 : - 生活琐碎 - 效率 评论 : 19 feet 日历 : 25 Nov 2011

来深圳已经工作4个月多了，不管是身心上肉体上都经受着硕大的磨练。深圳的快节奏的生活，我想也只有亲身体验才能了解。
其中收获颇多，技术上的，项目合作上的，新认识的朋友，同事等等。印象最深刻的是那些逼着你去搅动脑汁的工作方法，即如何提高日常工作效率的一些小细节。
废话比较多 ^__^ hold住，下面就开始我的一些提高工作效率的小技巧

google日历

日历是个好东西，不具体解释了，日历的好处有很多，可以共享，可以同步到手机。
将工作的每一个关键桢都记录下来，你懂的，有好处没坏处。

每天的todo list

iphone 给我带来的几个方便，其中有一个就是就是可以记录并同步todo list ，时刻提醒自己。
每天把接下来一天需要做的事情，特别是必须要做的事情记录下来。
务必要做好优先级。因为当事情多了之后就需要安排优先级。
另外下班的时候记录一下第二天要做的事情避免忘记。
比如：我经常会在会议的时候，突然接到一个电话，然后记录下一些关键的需求到手机或者日历，避免最近忘记
阅读全部>>

乱翻乱教 – iOS5 通知栏背景制作

日期 : 2011年10月16日 16:23 pm 标签 : - 乱翻乱教 - iOS5 - photoshop 评论 : 13 feet 日历 : 16 Oct 2011

vertical-align 图片文字水平对齐分析

日期 : 2011年9月7日 1:26 am 标签 : - 代码浅谈 - css 评论 : 11 feet 日历 : 7 Sep 2011

<p><img src="http://qilei.org/wp-content/uploads/2011/09/0905.jpg" alt="" title="vertical-align" width="600" height="240" class="alignnone size-full wp-image-1300" /></p>
<p>最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=<br />
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例<br />
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~</p>
<p>demo 传送门： <a href="http://qilei.org/demo/vertical-align/" target="_blank">vertical-align 各属性分析</a> <em>有错误欢迎回复纠正哦 ^__^</em></p>
<p>一些心得体会：</p>
<h3>vertical-align 定义</h3>
<p>最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~  <strong>我理解错了</strong><br />
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。</p>
<h3>vertical-align:baseline 基线对齐</h3>
<p>分析所得，发现baseline不是在<strong>中文字</strong>的可见部分最下方，而是在<strong>英文字</strong>的可见部分最下方。<br />
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。<em>一直觉得为啥图片下方会有4像素的空白，现在明白了</em></p>
<h3>不同字体会有不同效果</h3>
<p>我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。</p>
<h3>vertical-align 最好不要混用</h3>
<p>从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。</p>
<h3>vertical-align: px 定位最稳定</h3>
<p>这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。<br />
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。<br />
在研究中发现使用相对定位兼容性最好，<em>只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计</em>。<br />
不过这种方法也不是万能的，<br />
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。<br />
另外图片大小不一样大相应的负值也不相同，<em>详细见demo</em>。</p>
<h3>高潮：vertical-align 最佳兼容方案</h3>
<p>前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：<br />
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。<br />
2. 针对 内部需要调整位置的 图片等 进行 px 定位。<br />
优点：保证外围的vertical-align 是默认值，不产生混用现象。<br />
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。</p>
<p>下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？</p>

那些新增的标签 — html5 学习笔记

日期 : 2011年8月14日 12:27 pm 标签 : - 代码浅谈 - html5 - 学习笔记 评论 : 7 feet 日历 : 14 Aug 2011

<p><img src="http://qilei.org/wp-content/uploads/2011/08/20110814-html5.jpg" alt="" title="html5" width="600" height="240" class="alignnone size-full wp-image-1291" /><br />
html5已经出来有一段时间了，虽然万恶的IE面对其赤果果的色诱也硬不起来，但还是有很多优秀的网站开始应用了，毕竟大势所趋嘎嘎。<br />
最近在啃<a href="http://book.douban.com/subject/4143105/" title="英文版" target="_blank">html5动物书</a>，虽然动物书讲的好多东西，在网络上的一些杂文里都看到过，不过毕竟是动物书，会有一些小细节是值得去翻阅的。</p>
<p>好了 切入主题，讲讲心得：</p>
<h3>section 是有语义的div </h3>
<p>很多人很费解 为什么html5 放着div 那么短小精干的东西不用，非要用section呢？<br />
我的理解是div 依然有用，只是它可以代表无语义的东西。section像是一个沙盒子，将不同的部分，区块，模块，区分开。</p>
<h3>header 不是一定要唯一</h3>
<p>首先要说的就是这个header标签，之前看了好多关于html5的杂文，给人的感觉就像是 header 标签是 网站头部进化过来的，其实不然，就像以前很多人认为 h1只允许有一个一样。<br />
因为 <strong>header 可以包含在 article 里作为 文章的头部标签</strong>。见(49页)</p>
<h3>hgroup 在header 标签中充当目录指引作用</h3>
<p>原先一直很不明白hgroup 的作用，因为w3cschool 上表现的例子中hgroup中都是些h* 标签集合，这种东西在实际应用中的应用场景非常狭隘。但当发现 article 里可以丢header 标签后 这个问题就解决了。<br />
其实个人觉得这个标签的重心在目录指引，在内容为王的时代，hgroup标签会给seo带来一定贡献。</p>
<h3>有了沙箱后，网站结构变得不是那么虎头蛇尾 </h3>
<p>很多人认为 一个web 中 只能用一个h1 不能用太多 h2，以及少量h3， 甚至都找不到 h4的踪迹。<br />
事实告诉我们，我们甚至可以在 nav 标签中使用h1。<br />
那么这样写不但不会混淆seo 抓重点。而且能让web 看着更加婀娜多姿，凹凸有致。</p>
<p><em>顺便普及一下html5 标志中的一些寓意以及新特性</em>：<a href="http://www.elviscai.com/view/html5-logo-released/" target="_blank">HTML5标志</a></p>

灵巧而不失华丽 mac coda 1.7 使用心得

日期 : 2011年7月11日 8:36 am 标签 : - 生活琐碎 - coda - notepad++ 评论 : 33 feet 日历 : 11 Jul 2011

<p><img class="alignnone size-full wp-image-1272" title="Coda" src="http://qilei.org/wp-content/uploads/2011/07/P20110710.jpg" alt="" width="600" height="260" /><br />
去年9月份入手了MAC，就一直在找一款各方面都跟notepad++ 相似的编辑器，之间用了很多编辑器如 Textmate，Vim ，还有现在一直在用的Coda。</p>
<p><em>总的来说Coda的一些特性符合我在windows 下notepad++ 的习惯。</em></p>
<h3>1. 站点应用</h3>
<p>这个功能，在一些大型IDE里都有，之前都没有去使用这个功能，最近因为经常切换站点，所以这个功能还是挺好用的。<br />
<em>切换的时候还能保留上次打开的文件，细节做得很好。</em><br />
<img class="alignnone size-full wp-image-1273" title="P20110710-1" src="http://qilei.org/wp-content/uploads/2011/07/P20110710-1.jpg" alt="" width="600" height="323" /></p>
<h3>2. 侧边栏关键帧 列表</h3>
<p>喜欢Coda的一个很好的点是侧边栏，有对当前编辑页面中的关键点列出，比如：html 页面中的id，h1 等关键的位置索引。编辑javascript 的时候 侧边栏会列出当前文档中 所有的function，找代码找方法的时候非常方便。</p>
<h3>3. 实时预览</h3>
<p>Coda 的preview 模式 还是挺好的 可以省去你切换窗口刷新的操作，有的时候很大一部分调试时间是消耗在切换预览效果的过程上了。</p>
<h3>4. 多窗口并显</h3>
<p>这个功能原先纠结了好久。因为一开始用的时候发现多窗口并显的时候，不知道怎么实现左边 html，右边css的效果。<br />
<em>我目前在npp(notepad++)下写代码就是这样来写的，左边html 右边css 可以提高很大效率。</em><br />
因为当你在点多窗口的时候发现只是复制了一份。后来给coda官方写来份英文邮件求助，他们很快给我回复了方法。<br />
真是大大加深了我对coda的喜爱。^___^<br />
<strong>方法如下：</strong><br />
打开html页面，点击多窗口panel，然后从左侧目录中将css文件拖动到右侧panel就可以实现了。效果还是很棒的，如果你有2显示屏，那么你只要另外拖一个html页面出来(新窗口打开)，放到副显示器上就可以显示了，这个甚至刷新都不用非常赞。<br />
<img class="alignnone size-full wp-image-1274" title="P20110710-2" src="http://qilei.org/wp-content/uploads/2011/07/P20110710-2.jpg" alt="" width="600" height="335" /></p>
<h3>5. 快捷又帅气的Clips</h3>
<p> <a href="http://qilei.org/201107/my-using-of-mac-coda-1-7/#more-1268" class="more-link">阅读全部>></a></p>