<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>葵中剑&#039;s Blog - SwordAir.com</title>
	<atom:link href="http://www.swordair.com/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://www.swordair.com/blog</link>
	<description>Embracing the dream I keep going forward, despite of a glorious death.</description>
	<lastBuildDate>Mon, 30 Jan 2012 02:05:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>重装的K701和重生的MX500</title>
		<link>http://www.swordair.com/blog/2012/01/780</link>
		<comments>http://www.swordair.com/blog/2012/01/780#comments</comments>
		<pubDate>Sun, 29 Jan 2012 06:57:07 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[cable convertor]]></category>
		<category><![CDATA[K701]]></category>
		<category><![CDATA[MX500]]></category>
		<category><![CDATA[teflon]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=780</guid>
		<description><![CDATA[如果说这个新年我做了什么，应该只有“清理了多余的teflon银线”这一件事。之前在 <a href="http://www.swordair.com/blog/2011/12/739">浴火重生的MX500</a> 一文中已经用过的多余的银线以及热缩管，在大过年的被我像翻垃圾一样的翻出来，赶紧用掉不然往家里哪里一塞又要忘记了:)

<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_6.jpg" alt="mx500_rebirth_6" title="" width="640" height="480" class="aligncenter size-full wp-image-786" />
</div>

这次的目标是做一根6.35到3.5口的转换线(这是给K701的装备)，加上修好断线的我的另一副MX500。]]></description>
			<content:encoded><![CDATA[<p>如果说这个新年我做了什么，应该只有“清理了多余的teflon银线”这一件事。之前在 <a href="http://www.swordair.com/blog/2011/12/739">浴火重生的MX500</a> 一文中已经用过的多余的银线以及热缩管，在大过年的被我像翻垃圾一样的翻出来，赶紧用掉不然往家里哪里一塞又要忘记了:)</p>
<p>这次的目标是做一根6.35到3.5口的转换线(这是给K701的装备)，加上修好断线的我的另一副MX500。</p>
<p>说起转换线，淘宝居然完全找不到，而只有6.35到3.5的转换接口。那种转换接口插上6.35的耳机，接口处的长度实在太长了，那重量和力臂直接威胁到了mp3和电脑上的3.5的母座，几年前自己的第一部mp3就是毁在这种转换接口上的。所以我需要一根转换线，好让我的K701不至于接口端太笨重。</p>
<p>转换线用到的材料是6.35的母头、3.5的公头，以及银线。3.5的公头比较好找，百威、甬声等等选择面很广而且价格也分很很多等，但是6.35的母头就比较难寻了，找了半天只找到甬声的，所以最后公头也用甬声配套。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_1.jpg" alt="mx500_rebirth_1" title="" width="640" height="480" class="aligncenter size-full wp-image-781" />
</div>
<p>因为插头很大，需要线径也不小，所以我把银线分成16段，8份用作地线，其它等分用作左右声道。特氟龙的银线很细，剥线时额外需要小心。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_2.jpg" alt="mx500_rebirth_2" title="" width="640" height="480" class="aligncenter size-full wp-image-782" />
</div>
<p>剥好的银线很亮，把它们按组排列起来，然后扭在一起。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_3.jpg" alt="mx500_rebirth_3" title="" width="640" height="480" class="aligncenter size-full wp-image-783" />
</div>
<p>分好组的银线，16股放在一起看起来就已经非常粗了。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_4.jpg" alt="mx500_rebirth_4" title="" width="640" height="480" class="aligncenter size-full wp-image-784" />
</div>
<p>最后按照引脚规则焊接好，包上热缩管就完成了~看起来还不错，不过其实挺花时间。因为线确实比较多，从下午一直搞到傍晚，所以后来的焊接步骤都没有记录下来。这样的一根转换线给K701用实在是太合适了，关键是成本比较低廉，只需要20RMB就能搞定。网上只有一种品牌的转换线就是歌德的，售价高达150RMB，我擦，就这么根短线这么贵，即使是装在K701身上也还是太过奢侈了&#8230;&#8230;</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_5.jpg" alt="mx500_rebirth_5" title="" width="640" height="480" class="aligncenter size-full wp-image-785" />
</div>
<p>然后是要修复另一根断线的MX500。</p>
<p>这根MX500是弯头老版，质量牛逼的很，不过这么多次被我拖机箱拉来拉去终于还是挂了。这次一样换上银线，插头换上纽曲克弯头，区区一个插头25RMB还是非常昂贵，不过决定是弯头的话选择余地就太小了，纽曲克几乎是唯一的选择。罢了，毕竟是陪了我这么多年的MX500，难得奢侈一把吧！</p>
<p>插头的焊接几乎是瞬间完成的，比起之前焊接16路线，这次只需要焊4根实在是太容易。插头的结构很合理，安装完后效果妥妥的~</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_6.jpg" alt="mx500_rebirth_6" title="" width="640" height="480" class="aligncenter size-full wp-image-786" />
</div>
<p>到了这里MX500已经活的差不多了。在上次修复MX500的时候我已经体验过把地线和左右声道焊反的结果了——整个就像是在水里挺音乐一样。所以这次焊接的很顺利，整个过程也就半小时左右，我心爱的MX500就又回来了。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/mx500_rebirth_7.jpg" alt="mx500_rebirth_7" title="" width="640" height="480" class="aligncenter size-full wp-image-787" />
</div>
<p>算算成本吧，包括上次的修复：银线30RMB，百威插头10RMB，甬声插头13RMB，纽曲克插头25RMB，总和78RMB。为此我少买了一根天龙C700，一根歌德转换线，节约了600+RMB——然而我花掉了几乎大半天时间，值不值呢？当然！</p>
<p>自己不也乐在其中，不是嘛？~~自己动手，丰衣足食。</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2010/12/522" title="SONY D50 M10 &#038; AKG K701">SONY D50 M10 &#038; AKG K701</a><span class="related-post-date">(2010/12/11)</span></li><li><a href="http://www.swordair.com/blog/2011/12/739" title="浴火重生的MX500">浴火重生的MX500</a><span class="related-post-date">(2011/12/20)</span></li><li><a href="http://www.swordair.com/blog/2011/07/666" title="Sony D50 &amp; Hifiman 801 &amp; AKG K701 &amp; Sennheise IE8">Sony D50 &amp; Hifiman 801 &amp; AKG K701 &amp; Sennheise IE8</a><span class="related-post-date">(2011/07/18)</span></li><li><a href="http://www.swordair.com/blog/2010/03/203" title="纵情歌唱的K701">纵情歌唱的K701</a><span class="related-post-date">(2010/03/13)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/780/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>滚动 VS 点击</title>
		<link>http://www.swordair.com/blog/2012/01/788</link>
		<comments>http://www.swordair.com/blog/2012/01/788#comments</comments>
		<pubDate>Sun, 29 Jan 2012 05:40:53 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Translation]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[clicking]]></category>
		<category><![CDATA[scrolling]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=788</guid>
		<description><![CDATA[<strong>译自</strong> <a href="http://uxmovement.com/navigation/why-scrolling-is-the-new-click/">Why Scrolling is the New Click</a> by anthony

点击和滚动，哪一个对用户更友好？这是一个设计师在设计页面浏览过程时必须考虑的问题。使用点击，给用户一堆链接并把他们带到新的页面；使用滚动，则把所有内容按区块展示在一个单一的页面上。

许多年前，这个问题最简单的回答就是使用点击。通常的考虑是，如果你使得你的你的页面过长，那么用户只会去看去读上半部分而可能只是扫一眼、甚至是忽略下半部分。而今，这有了一些变化，许多用户可以毫无问题的从头滚到尾。相比点击滚动现在变得越来越自然。因为用户的行为一直在变化着，设计师需要在他们的设计里考虑到这些问题。
]]></description>
			<content:encoded><![CDATA[<p><strong>译自</strong> <a href="http://uxmovement.com/navigation/why-scrolling-is-the-new-click/">Why Scrolling is the New Click</a> by anthony</p>
<p>点击和滚动，哪一个对用户更友好？这是一个设计师在设计页面浏览过程时必须考虑的问题。使用点击，给用户一堆链接并把他们带到新的页面；使用滚动，则把所有内容按区块展示在一个单一的页面上。</p>
<p>许多年前，这个问题最简单的回答就是使用点击。通常的考虑是，如果你使得你的你的页面过长，那么用户只会去看去读上半部分而可能只是扫一眼、甚至是忽略下半部分。而今，这有了一些变化，许多用户可以毫无问题的从头滚到尾。相比点击滚动现在变得越来越自然。因为用户的行为一直在变化着，设计师需要在他们的设计里考虑到这些问题。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/scrolling_vs_clicking.png" alt="scrolling_vs_clicking" title="" width="468" height="393" class="aligncenter size-full wp-image-789" />
</div>
<p>无论是滚动还是点击，都有其优缺点。然而，对于滚动来说，优点多于缺点。对于用户而言，滚动更快。随着鼠标滚轮的滚动以及触摸板滑动，用户可以仅仅通过一根手指的挥动滚过所有的内容，相比之下，点击需要用户找到链接、识别链接、鼠标移动到链接、点击链接然后等待页面加载。</p>
<p>滚动模式里，用户循序获取内容，并能一眼瞥知全貌。点击模式里，用户可以跳过某个链接到达下一页，而避免浏览他们跳过的页面。</p>
<p>滚动保持了用户阅读的连贯性。他们滚动然后继续阅读直到读到了页面的底部。而点击打断了用户的阅读流程，因为他们必须停下来，点击链接到下一个页面。在滚动过程中，用户也不需要等待新页面的加载(页面加载更加严重的打算了阅读)。他们只需要单一滚动到下一个区域并继续阅读。</p>
<p>点击在速度和易用性上毫无优势，但它也有自己的优势。点击允许我们跟踪用户的点击行为来做分析，而在滚动里无法做到这一点，你只能跟踪到顶层页面而不是子区域。</p>
<p>每个页面都有一个与他人分享的链接，这个链接也同时被搜索引擎收录。但在滚动模式里，页面只能被收录1页。</p>
<p>在点击和滚动里需要一个权衡。看起来滚动的可使用性更加。但是点击模式更适合数据分析以及搜索引擎。作为一个设计师，你的工作就是权衡哪个更加重要。了解它们的优势可以帮助你做出明智的选择。然而，如果你始终跟随用户体验，那么滚动模式就是答案。</p>
<h3>译后语</h3>
<p>原来的标题应该是：“为什么滚动是一种新的点击”，不过看起来不够直接。这篇通篇废话比较多，但是光看结论：其作者认为滚动相比点击更具优势。并认为这是一种新的趋势。</p>
<p>随着类iPad设备的流行，滚动操作，或者说滑动操作的习惯，已经被广泛地分发到终端使用者身上。使用习惯会在多个系统中传染，加之用户已经开始习惯无限滚动等交互方式，滚动操作已经在可用性的很多方面占据优势。</p>
<p>举一个个人的例子：太平洋和泡泡网是我常上的IT类网站，但是我可能更喜欢看PCPOP的评测，因为PCPOP有一个“在本页阅读全文”的功能，使得单页滚动代替了分页，让我可以不用总是点下一页看完整个评测过程——作为一篇完整的顺序性很强的文章，打断阅读连续性其实非常非常糟糕——而“分页”，这个我们看似理所当然的过程，未必是必须的。</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li>No Related Post</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/788/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>龙年龙腾虎跃</title>
		<link>http://www.swordair.com/blog/2012/01/778</link>
		<comments>http://www.swordair.com/blog/2012/01/778#comments</comments>
		<pubDate>Mon, 23 Jan 2012 16:42:39 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[dragon]]></category>
		<category><![CDATA[new year]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=778</guid>
		<description><![CDATA[龙年如期而至。虽然很久都没有刻东西了，不过发觉以前刻的那方龙腾虎跃现在拿出来仿佛挺合适的。这方印是我大学时候刻的，那时对篆刻还是非常着迷的时候，一天能刻好多印，不过现在不行啦，老啦，一年也未必出得了一方印——以至于我还欠下了答应好友要刻的印章却直到现在，还是处于设计修改的阶段，惭愧啊。
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2010/03/Indian_Stone_Record_002.jpg" alt="" title="Indian_Stone_Record_002" width="600" height="450" class="aligncenter size-full wp-image-215" />
</div>]]></description>
			<content:encoded><![CDATA[<p>龙年如期而至。虽然很久都没有刻东西了，不过发觉以前刻的那方龙腾虎跃现在拿出来仿佛挺合适的。这方印是我大学时候刻的，那时对篆刻还是非常着迷的时候，一天能刻好多印，不过现在不行啦，老啦，一年也未必出得了一方印——以至于我还欠下了答应好友要刻的印章却直到现在，还是处于设计修改的阶段，惭愧啊。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2010/03/Indian_Stone_Record_002.jpg" alt="" title="Indian_Stone_Record_002" width="600" height="450" class="aligncenter size-full wp-image-215" />
</div>
<p>影印出来放大数倍后，看起来虽然有些奇怪，但这样也挺有味道。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/dragon_tiger.png" alt="" title="dragon_tiger" width="494" height="497" class="aligncenter size-full wp-image-779" />
</div>
<p>封刀很久，现在只能卖卖旧货，不禁有些悲凉。一般这种时候，不都是写写什么年终总结或者是新年展望嘛，总结实在有些羞愧，好在展望总是可以无限地意淫一下：发财！发财！发财！</p>
<p>呵呵，恭喜发财！大家新年快乐！！！</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li>No Related Post</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/778/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>为什么圆角更易识别</title>
		<link>http://www.swordair.com/blog/2012/01/773</link>
		<comments>http://www.swordair.com/blog/2012/01/773#comments</comments>
		<pubDate>Sat, 21 Jan 2012 02:39:48 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Translation]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[Rounded Corners]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=773</guid>
		<description><![CDATA[<strong>译自</strong> <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/">Why Rounded Corners are Easier on the Eyes</a> by anthony

如今，设计师大量使用圆角以至于这看起来像是工业标准而非什么设计趋势。圆角不仅被应用在软件用户界面上，也同时被应用到硬件产品的设计上。那么是圆角的什么方面使得它们如此流行？确实，它们看起来很吸引人，但原因远不仅如此。]]></description>
			<content:encoded><![CDATA[<p><strong>译自</strong> <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/">Why Rounded Corners are Easier on the Eyes</a> by anthony</p>
<p>如今，设计师大量使用圆角以至于这看起来像是工业标准而非什么设计趋势。圆角不仅被应用在软件用户界面上，也同时被应用到硬件产品的设计上。那么是圆角的什么方面使得它们如此流行？确实，它们看起来很吸引人，但原因远不仅如此。</p>
<h3>人眼处理圆角更容易</h3>
<p>任何人都能意识到圆角艺术上的美感，但不是每个人都能准确的解释这种美感从何而来。这个问题的答案其实就在于你的眼睛。</p>
<p>一些专家说，眼睛更容易接受圆角矩形而不是直角矩形，因为圆角矩形在视觉过程中更易认知。中央凹(fovea centralis，是视网膜中视觉最敏锐的区域)在处理圆形时最快，处理边缘则需要涉及更多的大脑中的“神经影像工具”<sup>[1]</sup>。于是，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。</p>
<p>巴罗(Barrow)神经学研究所完成的关于“角(corners)”的科学研究发现，“角的突显性感知与角的度数的线性变化，锐角比钝角产生更强的虚幻的突显性”<sup>[2]</sup>。换句话说，角越锐利，看起来就越显而易见。而角出现的越凸显，就越多对视觉过程产生影响。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/sharp-edges.png" alt="sharp-edges" title="" width="270" height="131" class="aligncenter size-full wp-image-776" /></p>
<p>哪个看起来更容易？</p>
</div>
<h3>我们更适于圆角</h3>
<p>另一个关于为什么我们的眼睛更适合圆角，这与我们如何使用在物理世界中的日常物品更为相关<sup>[3]</sup>。圆角无处不在。当还是孩子的时候，我们就很快学到尖锐的东西有危险，而圆润的东西才比较安全。那也是为什么当一个小孩在玩一个球的时候，大多数家长不会惊慌。但是如果小孩在玩一个叉子，父母会因为担心孩子伤到自己而把叉子拿走。这激起了对于锐利的边缘的神经科学所谓的“回避反应” 。因此，我们倾向于“避免锋利的边缘，因为在自然界中，它们可以构成威胁”<sup>[4]</sup>。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/sharp-fork-rounded-beachball.png" alt="sharp-fork-rounded-beachball" title="" width="279" height="143" class="aligncenter size-full wp-image-777" /></p>
<p>你相信哪个可以拿给你的孩子？</p>
</div>
<h3>圆角使得信息更易于处理</h3>
<p>圆角对于地图和图表更有效果，因为它们使得我们的眼睛更容易跟随着线条，它更好地适合了头部和眼睛的自然运动<sup>[5]</sup>。锐角将你的视线从线径上移开使得你在线径改变方向时仿佛经历一种突然的暂停。但是圆角，则引导你的视线平滑地连续地在边角上过渡。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/rounded-diagram-edges.gif" alt="rounded-diagram-edges" title="" width="351" height="154" class="aligncenter size-full wp-image-775" /></p>
<p>对你来说哪个更舒服？</p>
</div>
<p>圆角在内容容器上也很有作用。这是因为圆角向内指向矩形的中心。这会突显矩形内的内容。这也使得当两个矩形并排时，我们更容易分清哪一条边属于哪一个矩形。尖角指向矩形的外部所以对内部的内容突出相对更少。尖角也同时使得两个矩形并排时区分它们的边界变得相对困难。因为每个矩形都是完全相似的直线条。而圆角矩形的临近边都不相同因为这些线只曲向其所属的矩形。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/rounded-corners.png" alt="rounded-corners" title="" width="276" height="279" class="aligncenter size-full wp-image-774" />
</div>
<h3>结论</h3>
<p>关于圆角更适合眼睛还有更多可以说。我们的眼睛处理圆角不仅更容易，圆角也同时使得信息更易被处理。毫无疑问圆角很吸引人，但上述这些使得使用圆角更加有理由。现在当你与客户谈论圆角的时候，你可以告诉他更多，而不仅仅是因为“圆角看起来很漂亮”。</p>
<h4>参考资料</h4>
<ol style="list-style:none;">
<li>[1] <a href="http://www.uiandus.com/blog/2009/7/26/realizations-of-rounded-rectangles.html">圆角矩形的实现</a></li>
<li>[2] <a href="http://macknik.neuralcorrelate.com/pdf/articles/troncoso_et_al_Art_and_Perception_chapter.pdf">闪烁增强对比度时角的凸显性与角度的线性变化</a></li>
<li>[3] <a href="http://www.basement.org/2005/11/why_do_we_love_rounded_corners.html">为什么我们喜爱圆角</a></li>
<li>[4] <a href="http://neurofocus.com/pdfs/BrainGap_Release_NF.pdf">NeuroFocus研究揭示Gap的新Logo哪里错了</a></li>
<li>[5] <a href="http://www.fmc-modeling.org/visualization_guidelines">FMC的可视化指南</a></li>
</ol>
<h3>译后语</h3>
<p>第一次翻译这类文章，感觉难度比起前端技术类要高，因为出现了很多其他领域的专业术语，而这些术语我并不熟悉，需要重新查阅资料。UX的文章很大程度上有一种共同的特点，就是看完之后似乎并无所获，很多都是显而易见的。然而并不是每个人都清楚地知道为什么，并且在可能出现的下一个项目里怎么做。</p>
<p>本文中提到了圆角的诸多优势，但即使其再有优势，任何一样东西都不应该被滥用。从形状上说，直角和圆角相辅相成。很多交互设计里，圆角都专门被用在按钮、tab，特别是按钮。将按钮从各种直线分割的内容块里快速地用独特的形状表现出来很有必要，而圆角，将用户的视线聚集在按钮的本身内容上，并暗示按钮的“安全性”，这对吸引用户点击的注册按钮、促销Landing上的分流链接等额外重要。这也是为什么，有些设计里按钮明显突兀，和整体设计不合。</p>
<p>作为前端，我向来讨厌圆角，尽管CSS3只需要一句代码。但不可否认，直角的严谨性和专业性可能适合大部分Programmer。</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li>No Related Post</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/773/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UX是Web的灵魂</title>
		<link>http://www.swordair.com/blog/2012/01/772</link>
		<comments>http://www.swordair.com/blog/2012/01/772#comments</comments>
		<pubDate>Fri, 20 Jan 2012 08:22:25 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=772</guid>
		<description><![CDATA[一直以来我作为一名前端攻城师，把大部分的精力都放在了代码上，伴随着轻微的代码洁癖以及偶尔的吹毛求疵敲着键盘与世无争。但这种状态显然已经悄然改变，Web开发者所需要的知识面远不止几行代码那么简单——UX，用户体验，才是Web的灵魂。]]></description>
			<content:encoded><![CDATA[<p>一直以来我作为一名前端攻城师，把大部分的精力都放在了代码上，伴随着轻微的代码洁癖以及偶尔的吹毛求疵敲着键盘与世无争。但这种状态显然已经悄然改变，Web开发者所需要的知识面远不止几行代码那么简单——UX，用户体验，才是Web的灵魂。</p>
<p>但UX难以衡量，可能只是一个idea，但也可以是一个庞大的范式性的知识集合约束出来的页面细节。就如同交互在UED中的作用一样，虽然很多团队甚至没有专人负责交互，但交互却无处不在。交互差直接导致易用性差，这对功能性页面几乎就是致命的。很多团队，交互总是最为缺乏的一类人，其工作内容被或平均或不平均地分散到产品、设计、前端的各个环节。也正因为此，产品的可用性直接和这些被分散的非专业交互设计挂钩，虽然不是绝对，但常常因此留下了隐患。</p>
<p>前几天我打算写几篇关于UX的文章，但两篇草稿都在写了400字刚过的时候断了思路，这才发觉，虽然很想表达自己这些年对于交互对于UX的理解，但往往写之前觉得很有用，写完之后甚觉鸡肋——可能是自己一直以来看轻UX的本质的劣根性在作祟。于是我删除了自己词不达意的草稿，转而开始翻译现有的国外的文章。</p>
<p>这过程中，发觉自己毕竟不是做交互的，所以写出来的和UX相关的东西的细腻度非常匮乏，最终要的是，<strong>缺乏支持某些现象的根本证据</strong>。而这点上，国外的优秀作品就做的非常好，不仅说明现象，还会引述各种文献资料(很多都是生物学、人体工程学、心理学的著作)论证本质。面对如此专业的UX研究和总结，我只能是望尘莫及。所以我这个半吊子还是先边译边学，今后我的博客也会开始翻译UX相关文章(我对自己的翻译质量还是很有信心)，并且已经有几篇提上进程，到时欢迎讨论。</p>
<p>这2年博客已经存在19个分类，自己的关注点也越来越多，虽然注意力分散通常不是什么好事，但我已经成了自由的佣兵，身上必将积蓄更多的旁骛——反过来想，注意力分散，也算是生活更加丰富多彩不是么？UX作为我博客的第20个分类，龙年一定给力。</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2012/01/745" title="Hello, 2012">Hello, 2012</a><span class="related-post-date">(2012/01/04)</span></li><li><a href="http://www.swordair.com/blog/2011/10/676" title="博客的复活">博客的复活</a><span class="related-post-date">(2011/10/11)</span></li><li><a href="http://www.swordair.com/blog/2011/05/615" title="博客放弃兼容IE6以及IE7">博客放弃兼容IE6以及IE7</a><span class="related-post-date">(2011/05/29)</span></li><li><a href="http://www.swordair.com/blog/2011/01/544" title="写给过去的2010">写给过去的2010</a><span class="related-post-date">(2011/01/01)</span></li><li><a href="http://www.swordair.com/blog/2010/07/393" title="博客，互联网的家">博客，互联网的家</a><span class="related-post-date">(2010/07/01)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/772/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery plugin &#8211; Scroll to Top</title>
		<link>http://www.swordair.com/blog/2012/01/743</link>
		<comments>http://www.swordair.com/blog/2012/01/743#comments</comments>
		<pubDate>Wed, 18 Jan 2012 08:03:21 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery plugin]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[SOPA]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=743</guid>
		<description><![CDATA[“返回顶部”的应用相当广泛，在典型的超长页面里，它几乎是必须的。比如新浪微博里，页面的长度因数据的加载而长达数千像素，它的“返回顶部”并没有太多特别之处，唯一有趣的是那个向上箭头是有两个字符组合而成而并非图片。正是这种细微之处，体现了前端的创想力以及对页面性能的进益求精。

虽然我的题目是插件，但其实内容多半和插件没半毛钱关系...]]></description>
			<content:encoded><![CDATA[<p>“返回顶部”的应用相当广泛，在典型的超长页面里，它几乎是必须的。比如新浪微博里，页面的长度因数据的加载而长达数千像素，它的“返回顶部”并没有太多特别之处，唯一有趣的是那个向上箭头是有两个字符组合而成而并非图片:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;a href=&quot;javascript:;&quot; id=&quot;base_scrollToTop&quot; class=&quot;W_gotop&quot; style=&quot;visibility:hidden;&quot;&gt;
	&lt;span&gt;
		&lt;em class=&quot;sj&quot;&gt;♦&lt;/em&gt;
		&lt;em class=&quot;fk&quot;&gt;▐&lt;/em&gt;
		返回顶部
	&lt;/span&gt;
&lt;/a&gt;</pre></td></tr></table></div>

<p>正是这种细微之处，体现了前端的创想力以及对页面性能的进益求精。</p>
<p>对于像渣浪微博这样的网站动画滚动是不合适的，因为页面太长，长到动画滚动显得太过僵硬，而且对于这类网站性能才是第一位的，动画用在这种地方显然很多余。不过对于个人网站或者展示类网站，页面长度只是稍稍偏长，用动画过渡就显得不那么突兀了。</p>
<p>一个典型的动画滚动到顶部的代码片段可能和下面这个极为神似：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> scrollToTop<span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> f<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	a <span style="color: #339933;">=</span> a <span style="color: #339933;">||</span> <span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
	f <span style="color: #339933;">=</span> f <span style="color: #339933;">||</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> d_x <span style="color: #339933;">=</span> b_x <span style="color: #339933;">=</span> w_x <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
		d_y <span style="color: #339933;">=</span> b_y <span style="color: #339933;">=</span> w_y <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">documentElement</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		d_x <span style="color: #339933;">=</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">scrollLeft</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		d_y <span style="color: #339933;">=</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">scrollTop</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		b_x <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">scrollLeft</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		b_y <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">scrollTop</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #003366; font-weight: bold;">var</span> w_x <span style="color: #339933;">=</span> window.<span style="color: #660066;">scrollX</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
		w_y <span style="color: #339933;">=</span> window.<span style="color: #660066;">scrollY</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">&#40;</span>w_x<span style="color: #339933;">,</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">&#40;</span>b_x<span style="color: #339933;">,</span> d_x<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		y <span style="color: #339933;">=</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">&#40;</span>w_y<span style="color: #339933;">,</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">&#40;</span>b_y<span style="color: #339933;">,</span> d_y<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">+</span> a<span style="color: #339933;">;</span>
	window.<span style="color: #660066;">scrollTo</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>x <span style="color: #009966; font-style: italic;">/ speed), Math.floor(y /</span> speed<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>x <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> y <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		setTimeout<span style="color: #009900;">&#40;</span>scrollToTop<span style="color: #339933;">,</span>f<span style="color: #339933;">,</span>a<span style="color: #339933;">,</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>基本上也都是如此，可能参数上稍有不同。如果使用jQuery，滚回到顶部也许是最为常用的代码片段，简单到只有一句：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body,html'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>scrollTop<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">300</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>之所以同时动画 <code>body</code> 和 <code>html</code> 元素，是因为各浏览器对于 <code>scrollTop</code> 这个属性的解释并不相同：</p>
<ul>
<li>Firefox和IE的标准模式下，只有设置 <code>html</code> 的 <code>scrollTop</code> 是有效的，对 <code>body</code> 的设置会被忽略。</li>
<li>Firefox和IE的怪异模式、以及Safari和Chrome(任意模式)，只有设置 <code>body</code> 的 <code>scrollTop</code> 是有效的，对 <code>html</code> 的设置会被忽略。</li>
</ul>
<p>因而，我们必须同时设置 <code>html</code> 和 <code>body</code>，但另一个问题也随之而来：Opera会重复设置这两个值从而使得动画变成了“破画”一般，尤其是在长页面里。好在新的Opera似乎已经修复了这个问题，至少我测试的时候没有发现。尽管不完全，因为Opera至今关于 <code>scrollTop</code> 的bug仍然偏多，比如设置 <code>textarea</code> 的 <code>scrollTop</code> 没有作用(Opera 11.06)。</p>
<p>关于Opera的这个重复设置 <code>scrollTop</code> 的bug，网上有一些解决办法，比如最为直接的就是嗅探Opera并单独只动画 <code>html</code>。但这样并不可取，原因是未来Opera必会慢慢修复这些bug，基于浏览器嗅探的代码会变得过时。<a rel="external" href="http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html">jQuery smooth scroll bugs</a> 中有一段关于 <code>scrollTop</code> 的兼容代码，其思想是尝试移动1px来测试浏览器是否完好支持 <code>scrollTop</code>。写到这里，巧合是当我今天去访问这个参考网址的时候页面跳出了最近风风火火的“抵制SOPA”的抗议(这几天cb上不是一直在刷SOPA的信息嘛~)：</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/stop_sopa.png" alt="" title="stop_sopa" width="640" height="400" class="aligncenter size-full wp-image-770" />
</div>
<p>打开页面的时候，我真心被国外站长对于争取自身权利的那份热诚深深感染到了:)</p>
<p>最后放上自己的一个jQuery插件Scroll to Top的DEMO，不得不说，这类插件真是满地都是——虽然我的题目是插件，但其实内容多半和插件没半毛钱关系&#8230;~hhhe</p>
<div class="demo">
<a href="http://www.swordair.com/demos/jquery-plugin-scroll-to-top/">DEMO</a>
</div>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2011/10/714" title="function与感叹号">function与感叹号</a><span class="related-post-date">(2011/10/25)</span></li><li><a href="http://www.swordair.com/blog/2011/02/561" title="Image Lazy Loading">Image Lazy Loading</a><span class="related-post-date">(2011/02/05)</span></li><li><a href="http://www.swordair.com/blog/2010/10/496" title="JavaScript字符串连接性能">JavaScript字符串连接性能</a><span class="related-post-date">(2010/10/06)</span></li><li><a href="http://www.swordair.com/blog/2010/08/429" title="IE9，Opacity 和 Alpha">IE9，Opacity 和 Alpha</a><span class="related-post-date">(2010/08/18)</span></li><li><a href="http://www.swordair.com/blog/2010/07/396" title="Web书评">Web书评</a><span class="related-post-date">(2010/07/02)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/743/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firebug 1.9 的新特性</title>
		<link>http://www.swordair.com/blog/2012/01/751</link>
		<comments>http://www.swordair.com/blog/2012/01/751#comments</comments>
		<pubDate>Mon, 09 Jan 2012 03:14:35 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Translation]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[FireFox]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=751</guid>
		<description><![CDATA[<div class="wp-caption alignright" style="width:303px;">
<img style="background:#fff;" src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-logo.png" alt="Firebug 1.9" title="Firebug 1.9" width="293" height="89" class="alignnone" /><p class="wp-caption-text">Firebug 1.9</p></div>

Firebug 1.9于1月6日发布，新版本带来了诸多新的实用功能，为此我翻译了这篇关于新特性的文章：<a rel="external" href="http://hacks.mozilla.org/2012/01/firebug-1-9-new-features/">Firebug 1.9 New Features</a>

/* ----------- translation begins ----------- */

<a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug 1.9</a> 已经发布，和往常一样我又有了这样一个机会，来介绍一些被引入的新特性。

首先来看看下面的兼容性列表：
<ul>
	<li><strong>Firebug 1.7.3</strong> 适用于 <strong>Firefox 4.0</strong></li>
	<li><strong>Firebug 1.9</strong> 适用于 <strong>Firefox 5.0 – 11.0</strong></li>
	<li><strong>Firebug 1.10</strong> 适用于 <strong>Firefox 12.0</strong> (nightly)</li>
</ul>
Firebug 1.10 alpha 1 下周面世，你也可以同时在Firefox最新版上使用 Firebug 1.9b6。]]></description>
			<content:encoded><![CDATA[<p>Firebug 1.9于1月6日发布，新版本带来了诸多新的实用功能，为此我翻译了这篇关于新特性的文章：<a rel="external" href="http://hacks.mozilla.org/2012/01/firebug-1-9-new-features/">Firebug 1.9 New Features</a></p>
<p>/* &#8212;&#8212;&#8212;&#8211; translation begins &#8212;&#8212;&#8212;&#8211; */</p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug 1.9</a> 已经发布，和往常一样我又有了这样一个机会，来介绍一些被引入的新特性。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-logo.png" alt="" title="firebug-logo" width="293" height="89" class="aligncenter size-full wp-image-766" />
</div>
<p>首先来看看下面的兼容性列表：</p>
<ul>
<li><strong>Firebug 1.7.3</strong> 适用于 <strong>Firefox 4.0</strong></li>
<li><strong>Firebug 1.9</strong> 适用于 <strong>Firefox 5.0 – 11.0</strong></li>
<li><strong>Firebug 1.10</strong> 适用于 <strong>Firefox 12.0</strong> (nightly)</li>
</ul>
<p>Firebug 1.10 alpha 1 下周面世，你也可以同时在Firefox最新版上使用 Firebug 1.9b6。</p>
<p>这是一个所有新特性的纲要：</p>
<ul>
<li><a href="#feature-1">Firebug UI 停靠</a></li>
<li><a href="#feature-2">复制JSON相应到剪切板</a></li>
<li><a href="#feature-3">显示语法错误的位置</a></li>
<li><a href="#feature-4">网络面板的新的列：协议</a></li>
<li><a href="#feature-5">快速从页面中移除元素</a></li>
<li><a href="#feature-6">函数对象：displayName属性</a></li>
<li><a href="#feature-7">每个控制台日志都有了源信息</a></li>
<li><a href="#feature-8">重新发送HTTP请求</a></li>
<li><a href="#feature-9">条件断点的工具提示</a></li>
<li><a href="#feature-10">在DOM面板里添加监控</a></li>
<li><a href="#feature-11">来自游览器缓存的响应头</a></li>
<li><a href="#feature-12">字体查看器(Font Viewer)</a></li>
<li><a href="#feature-13">字体工具提示</a></li>
<li><a href="#feature-14">数组项的工具提示</a></li>
</ul>
<h3 id="feature-1">Firebug UI 停靠</h3>
<p>Firebug UI 可以停靠在浏览器窗口的所有4个边缘。打开<em>开始按钮(start button)</em>的弹出菜单，选择<em>Firebug UI 位置(Firebug UI Location)</em> 子菜单并且最后选择你最喜欢的停靠位置。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-1.png" alt="Firebug UI 停靠" title="" width="500" height="220" class="aligncenter size-full wp-image-752" /></div>
<h3 id="feature-2">复制JSON相应到剪切板</h3>
<p>你是否在处理 AJAX 以及 JSON？Firebug允许你监视JSON相应并拷贝JSON树的部分到剪切板。展开HTTP请求(在控制台或网络面板里)，选择JSON选项卡右键JSON树打开上下文菜单。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-2.png" alt="复制JSON相应到剪切板" title="" width="500" height="214" class="aligncenter size-full wp-image-753" /></div>
<h3 id="feature-3">显示语法错误的位置</h3>
<p>控制台面板里显示一个箭头，指向语法错误的准确位置。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-3.png" alt="显示语法错误的位置" title="" width="500" height="127" class="aligncenter size-full wp-image-754" /></div>
<h3 id="feature-4">网络面板的新的列：协议</h3>
<p>网络面板提供了一个新的协议列，用来显示每个HTTP请求的协议。你可以使用这列通过协议来排序所有的请求，或者只列出<em>https</em>请求。这一列默认不显示，你需要在列标题上右键定制需要的列。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-4.png" alt="网络面板的新的列：协议" title="" width="500" height="191" class="aligncenter size-full wp-image-755" /></div>
<h3 id="feature-5">快速从页面中移除元素</h3>
<p>众所周知的“查看元素(Inspector )”特性允许快速移除页面中选中的元素。只要查看该元素并按下<b>Delete</b>键，就能移除当前页面高亮的元素。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-5.png" alt="快速从页面中移除元素" title="" width="500" height="97" class="aligncenter size-full wp-image-756" /></div>
<h3 id="feature-6">函数对象：displayName属性</h3>
<p>Firebug也支持 <em>displayName</em> 函数对象属性。你可以使用这个属性来为匿名函数指定自定义的名称。Firebug将会使用此属性来显示堆栈跟踪(stack traces)。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-6.png" alt="displayName属性" title="" width="500" height="205" class="aligncenter size-full wp-image-757" /></div>
<h3 id="feature-7">每个控制台日志都有了源信息</h3>
<p>这只是一个简单的新功能。每个在控制台里显示的日志都有其源(文件URL和行号)。当然，Firebug会在你点击这些源链接的时候显示源。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-7.png" alt="每个控制台日志都有了源信息" title="" width="500" height="143" class="aligncenter size-full wp-image-758" /></div>
<h3 id="feature-8">重新发送HTTP请求</h3>
<p>网络面板允许重新发送一个已经存在的HTTP请求。只需右键它并在弹出的上下文菜单里选择<em>重新发送(Resend)</em>。好用又简单。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-8.png" alt="重新发送HTTP请求" title="" width="500" height="223" class="aligncenter size-full wp-image-759" /></div>
<h3 id="feature-9">条件断点的工具提示</h3>
<p>脚本面板为条件断点显示工具提示，你不再需要为了查看当前断点的条件而特意打开条件编辑器。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-9.png" alt="条件断点的工具提示" title="" width="500" height="114" class="aligncenter size-full wp-image-760" /></div>
<h3 id="feature-10">在DOM面板里添加监控</h3>
<p>DOM面板里引入了一个新的<em>添加监控(Add Watch)</em>命令。这允许开发者找到特定的对象和域(可能深达结构的数层)并将其直接放到脚本面板的“监控”窗口，这样可以进一步检查和监视它。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-10.png" alt="在DOM面板里添加监控" title="" width="500" height="211" class="aligncenter size-full wp-image-761" /></div>
<h3 id="feature-11">来自游览器缓存的响应头</h3>
<p>网络面板现在甚至显示来自游览器缓存的响应头。只需展开HTTP请求并检查<em>Header</em>页，在底部有个新的区域(如果响应来自缓存的话)</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-11.png" alt="来自游览器缓存的响应头" title="" width="500" height="201" class="aligncenter size-full wp-image-762" /></div>
<h3 id="feature-12">字体查看器(Font Viewer)</h3>
<p>Firebug引入了字体查看器(主要是应对 *.woff 文件)，并集成在网络面板。如果你的页面加载了这些文件，你可以展开对于的请求，并查看所有下载字体的元信息。这非常酷！</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-12.png" alt="字体查看器(Font Viewer)" title="" width="500" height="127" class="aligncenter size-full wp-image-763" /></div>
<h3 id="feature-13">字体工具提示</h3>
<p>还有一个为设计者的贴心支持，如果你将鼠标移动到CSS面板的字体的上(或在样式边栏)，你将会看到一个字体预览的提示信息。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-13.png" alt="字体工具提示" title="" width="500" height="134" class="aligncenter size-full wp-image-764" /></div>
<h3 id="feature-14">数组项的工具提示</h3>
<p>另一个精巧的改进有关于调试和监控一个数组值时使用提示。如果移动鼠标到一个数组括号，你能看到实际的值，看下面的截屏。</p>
<div class="img-border"><img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/firebug-new-features-14.png" alt="数组项的工具提示" title="" width="500" height="95" class="aligncenter size-full wp-image-765" /></div>
<p>/* &#8212;&#8212;&#8212;&#8211; translation ends &#8212;&#8212;&#8212;&#8211; */</p>
<p>可见，Firebug 1.9的改进非常之多，而且很多都是非常实用的功能。在我之前写的 <a href="http://www.swordair.com/blog/2011/07/617">WOFF和Google Font API</a> 里我曾抱怨Firebug不支持woff格式的字体预览，这个问题也在新版的Firebug里解决了。希望未来的 Firebug 愈发犀利，让苦憋的前端攻城师人人有口饭吃&#8230;</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2011/10/718" title="Tilt: Firefox的3D化插件">Tilt: Firefox的3D化插件</a><span class="related-post-date">(2011/10/28)</span></li><li><a href="http://www.swordair.com/blog/2010/12/510" title="CSS3 box-shadow 详解(2)">CSS3 box-shadow 详解(2)</a><span class="related-post-date">(2010/12/29)</span></li><li><a href="http://www.swordair.com/blog/2010/11/492" title="CSS3 box-shadow 详解(1)">CSS3 box-shadow 详解(1)</a><span class="related-post-date">(2010/11/04)</span></li><li><a href="http://www.swordair.com/blog/2010/07/398" title="漫谈font-size">漫谈font-size</a><span class="related-post-date">(2010/07/07)</span></li><li><a href="http://www.swordair.com/blog/2010/05/347" title="跨浏览器边框探索">跨浏览器边框探索</a><span class="related-post-date">(2010/05/13)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/751/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>纯CSS圆角Tab</title>
		<link>http://www.swordair.com/blog/2012/01/747</link>
		<comments>http://www.swordair.com/blog/2012/01/747#comments</comments>
		<pubDate>Thu, 05 Jan 2012 06:17:42 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[border-radius]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[rounded tab]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=747</guid>
		<description><![CDATA[Tab能算的上是网页里最为常见的组件，不论是作为内容切换，还是直接作为导航，形形色色的Tab扮演着各种交互角色。既然是重要的交互角色，那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的，在视觉上把Tab和其他分隔元素区别开来是必要的，就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入，但却是必须的，因为交互元素的凸显比整个设计浑然一体更为重要。

在IE67日渐边缘的如今，2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了，对于它们，能看看内容就已经不错了，管它美不美观错不错位，时代在进步，往前看才不至于失业......

今天琢磨了会写了下面这样一个CSS圆角Tab，和网上流行的圆角Tab不同之处在于：<strong>Tab底部也使用圆角过渡</strong>。
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/pure_css_rounded_tab_navigation.png" alt="Pure CSS Rounded Tab Navigation" title="" width="640" height="140" class="aligncenter size-full wp-image-748" />
</div>]]></description>
			<content:encoded><![CDATA[<p>Tab能算的上是网页里最为常见的组件，不论是作为内容切换，还是直接作为导航，形形色色的Tab扮演着各种交互角色。既然是重要的交互角色，那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的，在视觉上把Tab和其他分隔元素区别开来是必要的，就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入，但却是必须的，因为交互元素的凸显比整个设计浑然一体更为重要。</p>
<p>在IE67日渐边缘的如今，2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了，对于它们，能看看内容就已经不错了，管它美不美观错不错位，时代在进步，往前看才不至于失业&#8230;&#8230;</p>
<p>今天琢磨了会写了下面这样一个CSS圆角Tab，和网上流行的圆角Tab不同之处在于：<strong>Tab底部也使用圆角过渡</strong>。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/pure_css_rounded_tab_navigation.png" alt="Pure CSS Rounded Tab Navigation" title="" width="640" height="140" class="aligncenter size-full wp-image-748" />
</div>
<p>我简单制作了一个DEMO，列出了HTML结构和CSS：</p>
<div class="demo">
<a href="http://www.swordair.com/demos/pure-css-rounded-tab-navigation/">Demo</a>
</div>
<p>为达到底部使用圆角过渡的目的，关键就是下面两点：</p>
<ol>
<li><code>border-radius</code> 的使用时显而易见的，这个属性在所有现代浏览器中工作良好，并且在无论是Firefox还是Chrome的更新里，都不再需要前缀。</li>
<li>由于Tab下沿的圆角无法填补，需要用 <code>li</code> 的伪元素来定位填补，同时还需要 <code>a</code> 的伪元素来定位覆盖隐藏Tab下沿的边线。</li>
</ol>
<p>具体结构我绘制了一张框图，感觉上这种圆角的参数很微妙&#8230;</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/rounded_tab_html_construction_diagram.png" alt="rounded tab html construction diagram" title="" width="640" height="320" class="aligncenter size-full wp-image-749" />
</div>
<p>代码里面值得一提的可能只有一条：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.top-nav</span> li<span style="color: #6666ff;">.current</span><span style="color: #3333ff;">:after</span><span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span><span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\2</span>00B&quot;</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">-5px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>那就是 <code>content:"\200B";</code>。其实之前的 <a href="http://www.swordair.com/blog/2011/10/716">再谈清除浮动</a> 里也已经提到，这个 <code>U+200B</code> 字符是一个“零宽度空白”，其本身就不可见，所以也就不需要在使用 <code>visibility:hidden;</code> 来隐藏内容。</p>
<p><strong>2012/01/10更新</strong>：非常巧合的，css-tricks的Chris Coyier在几天后也发了一篇关于圆角tab的文章 <a href="http://css-tricks.com/better-tabs-with-round-out-borders/">(Better) Tabs with Round Out Borders</a>。对于Chris Coyier大神的圆角我只能说，“用阴影而不是伪元素来盖住直角多余的部分”这真太有创意了！他的实现使用了2个伪元素和box-shadow，而我用了3个伪元素，但没有使用box-shadow。讽刺的是，在IE67下轻微错位的我实现方式，可能更适应国情&#8230;</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2011/10/716" title="再谈清除浮动">再谈清除浮动</a><span class="related-post-date">(2011/10/28)</span></li><li><a href="http://www.swordair.com/blog/2011/10/592" title="再谈inline-block">再谈inline-block</a><span class="related-post-date">(2011/10/19)</span></li><li><a href="http://www.swordair.com/blog/2011/08/675" title="开发过程中的调试样式">开发过程中的调试样式</a><span class="related-post-date">(2011/08/27)</span></li><li><a href="http://www.swordair.com/blog/2010/08/442" title="新的wordpress主题">新的wordpress主题</a><span class="related-post-date">(2010/08/30)</span></li><li><a href="http://www.swordair.com/blog/2010/08/431" title="CSS3 Media Queries 详解">CSS3 Media Queries 详解</a><span class="related-post-date">(2010/08/23)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/747/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Hello, 2012</title>
		<link>http://www.swordair.com/blog/2012/01/745</link>
		<comments>http://www.swordair.com/blog/2012/01/745#comments</comments>
		<pubDate>Wed, 04 Jan 2012 07:31:31 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[2012]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=745</guid>
		<description><![CDATA[送走2011， 迎来传说中的世界末日2012，新的一年，新的吐槽，新的感叹也一如既往。

下面这张照片是在2011年最后几天在家拍摄的——虽然卖萌可耻，不过我也打算偶尔可耻一回——Hello，2012， 我是葵中剑，我就在这里迎接你的到来~

<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/sunflower_face_for_2012.jpg" alt="" title="my sunflower face" width="640" height="480" class="aligncenter size-full wp-image-746" />
</div>

我也希望，看到这张众所周知的“植物大战僵尸”里的向日葵笑脸的人，也能在新的一年里，笑的如此灿烂。]]></description>
			<content:encoded><![CDATA[<p>送走2011，迎来传说中的世界末日2012，新的一年，新的吐槽，新的感叹也一如既往。</p>
<p>下面这张照片是在2011年最后几天在家拍摄的——虽然卖萌可耻，不过我也打算偶尔可耻一回——Hello，2012，我是葵中剑，我就在这里迎接你的到来~</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2012/01/sunflower_face_for_2012.jpg" alt="" title="my sunflower face" width="640" height="480" class="aligncenter size-full wp-image-746" />
</div>
<p>我也希望，看到这张众所周知的“植物大战僵尸”里的向日葵笑脸的人，也能在新的一年里，笑的如此灿烂。</p>
<p>看看过去的2011，似乎还是发生了很多事。然则对于Web而言，也绝对是值得回味的一年，IE6、IE7逐渐趋向边缘的同时我们仍然必须对国内的各种悲剧唏嘘不已——我们看到了微软宣布了IE的自动更新，看到了facebook诸多新应用对IE7的抛弃，也看到了全世界各种各样日新月异的技术百花齐放，但回头看看微软自己的<a href="http://www.ie6countdown.com/">The Internet Explorer 6 Countdown</a>网站，一只鲜红的公鸡依旧鲜明挺立在世界地图的中央，除了感叹还能有什么其他想法&#8230;</p>
<p>各种网站接连倒了下去——我的域名年龄区区2年，但这段时间里，曾经和我同时开博的半数朋友们的网站都已挂掉，当然也还有很大部分无限期的休眠了。也许写累了，也许迫于生活的压力，也许兴致已去，2年时间对于一个网站来说可能转瞬即逝，但对于一个博客而言，却已经算的上是漫长。不过每天仍然还是很多新的博客冒出来，大都充满充满朝气，有的略显浮躁，偶然还会遇见几个特别惊艳的——无一不凸显出横在我眼前的沙滩是如此狰狞&#8230;</p>
<p>过去的一年里我总共写了50篇文章（包括服务器故障遗失的2篇），产量和质量都马马虎虎:)。感谢为数不多的各位读者和看官在过去的一年中，在日渐稀薄的技术文章里依旧给予我的小小的关注。<strong>谢谢大家</strong>！！！</p>
<p>2012，希望能长胖些吧，希望能更犀利的吐槽，也希望能继续卯足劲为Web的发展贡献绵力。2012，加油！给力！</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2012/01/772" title="UX是Web的灵魂">UX是Web的灵魂</a><span class="related-post-date">(2012/01/20)</span></li><li><a href="http://www.swordair.com/blog/2011/10/676" title="博客的复活">博客的复活</a><span class="related-post-date">(2011/10/11)</span></li><li><a href="http://www.swordair.com/blog/2011/05/615" title="博客放弃兼容IE6以及IE7">博客放弃兼容IE6以及IE7</a><span class="related-post-date">(2011/05/29)</span></li><li><a href="http://www.swordair.com/blog/2011/01/544" title="写给过去的2010">写给过去的2010</a><span class="related-post-date">(2011/01/01)</span></li><li><a href="http://www.swordair.com/blog/2010/07/393" title="博客，互联网的家">博客，互联网的家</a><span class="related-post-date">(2010/07/01)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2012/01/745/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>浴火重生的MX500</title>
		<link>http://www.swordair.com/blog/2011/12/739</link>
		<comments>http://www.swordair.com/blog/2011/12/739#comments</comments>
		<pubDate>Tue, 20 Dec 2011 06:11:31 +0000</pubDate>
		<dc:creator>葵中剑</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[MX500]]></category>
		<category><![CDATA[Sennheiser]]></category>

		<guid isPermaLink="false">http://www.swordair.com/blog/?p=739</guid>
		<description><![CDATA[说起MX500，喜欢耳机的朋友一定不会陌生。当年一度叱咤风云的这条细细的耳塞线，如今也早已经昨日黄花——虽然只是低端里的高端型号，但MX500显然用它不错的性价比使得它的风头一度成为一种传说一般。当然在如今耳塞界各种百花齐放之下，昔日霸主被渐渐遗忘也是难以避免。

我有两副Mx500，弯头的老版以及之后的RC-L。很多年前还有很多人争执这老版和新版之间的高低，但其实在我看来基本没什么所谓的差距，耳机界向来喜旧厌新，把旧版捧到天上去也不足为奇。同样是森海塞尔的相同定位的东西，又能相差到哪里去呢？相对而言只是新版的声色更为亮丽，也许太亮也会有很多人不习惯吧:)

然而就是这么两副陪着我6、7年之久的耳塞，居然都挂掉了。倒也不能说森海的质量太差，只好怪自己使用的太过暴力。然而数年来已经适应Mx500的耳朵，对各种新潮的其它同价位耳塞实在没什么兴趣，囧啊。不过突然想起来之前曾经帮同事修理过他的CKM55，为什么我不修理一下自己的耳塞呢？两副耳机一副断线一副插头损坏，还是可以抢救一下的。断线换线，断头换头——就抽空淘宝找了几个插头、银线、热缩管，开始着手DIY换线。

<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2011/12/mx500_with_silver_wire_1.jpg" alt="mx500_with_silver_wire_1" width="600" height="450" class="aligncenter size-full wp-image-740" />
</div>]]></description>
			<content:encoded><![CDATA[<p>说起MX500，喜欢耳机的朋友一定不会陌生。当年一度叱咤风云的这条细细的耳塞线，如今也早已经昨日黄花——虽然只是低端里的高端型号，但MX500显然用它不错的性价比使得它的风头一度成为一种传说一般。当然在如今耳塞界各种百花齐放之下，昔日霸主被渐渐遗忘也是难以避免。</p>
<p>我有两副Mx500，弯头的老版以及之后的RC-L。很多年前还有很多人争执这老版和新版之间的高低，但其实在我看来基本没什么所谓的差距，耳机界向来喜旧厌新，把旧版捧到天上去也不足为奇。同样是森海塞尔的相同定位的东西，又能相差到哪里去呢？相对而言只是新版的声色更为亮丽，也许太亮也会有很多人不习惯吧:)</p>
<p>然而就是这么两副陪着我6、7年之久的耳塞，居然都挂掉了。倒也不能说森海的质量太差，只好怪自己使用的太过暴力。然而数年来已经适应Mx500的耳朵，对各种新潮的其它同价位耳塞实在没什么兴趣，囧啊。不过突然想起来之前曾经帮同事修理过他的CKM55，为什么我不修理一下自己的耳塞呢？两副耳机一副断线一副插头损坏，还是可以抢救一下的。断线换线，断头换头——就抽空淘宝找了几个插头、银线、热缩管，开始着手DIY换线。</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2011/12/mx500_with_silver_wire_1.jpg" alt="mx500_with_silver_wire_1" width="600" height="450" class="aligncenter size-full wp-image-740" />
</div>
<p>过程略&#8230;&#8230;插曲是第一次左右声道焊反了，不过最后顺利整好。银线+百威插头的组合，比起官方原配自然看起来要牛X很多~ Mx500的声音原本就是万金油般的平衡，换上银线后声色没有明显变化，稍稍变的更为透澈一些。以前我一直觉得换根线能有多大变化？现在稍稍改观一些，换线很多时候都能直接对声音产生影响——当然影响不总是好的，原配线往往是成本和协调的综合结果，随便乱改线材还是属于折腾一类。好在Mx500本身不敏感，无论是换银线还是无氧铜线，都换不出啥大问题~</p>
<div class="img-border">
<img src="http://www.swordair.com/blog/wp-content/uploads/2011/12/mx500_with_silver_wire_2.jpg" alt="mx500_with_silver_wire_2" width="600" height="450" class="aligncenter size-full wp-image-741" />
</div>
<p>Mx500是我的第一副真正意义上的耳机，当初还在淘宝上淘所谓的工包，但实际上最后还是乖乖花钱买了行货。长期的关注加上对比，那年还写了一篇《MX500(RC)真假鉴别》，只不过那时自己还只是个学生、还不是一个前端工程师、还没开始写博客，又有谁能想到呢，多年之后，或许Mx500仍然陪伴着我，但我却无法想象自己在做什么。</p>
<p>这么多年来，从Mx500开始，一直到买入K701，蹭听各种旗舰，从低烧到高烧到退烧，仿佛人生般起起伏伏。但愿这一开始就陪我一起走来的Mx500还能继续陪我走下去，并带给我更多迷の感动~</p>
<p>BGM @ 天門 &#8211; 神々が恋した幻想郷</p>
<h3  class="related_post_title">Related Post:</h3><ul class="related_post"><li><a href="http://www.swordair.com/blog/2012/01/780" title="重装的K701和重生的MX500">重装的K701和重生的MX500</a><span class="related-post-date">(2012/01/29)</span></li><li><a href="http://www.swordair.com/blog/2010/12/522" title="SONY D50 M10 &#038; AKG K701">SONY D50 M10 &#038; AKG K701</a><span class="related-post-date">(2010/12/11)</span></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.swordair.com/blog/2011/12/739/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

