LaoZhuHome Beta

如何在ios桌面添加web站点图标

Sat, 18 Feb 2012 16:26:27 +0000

持有ios设备的童鞋应该都用过Safari，也许你会觉得他不如UC好用，但是你决不能忽略它的强大，在Wi-Fi下Safari确实十分给力。每一个web app的开发者更无法忽略这个浏览器，在Safari上可以实现好多令人兴奋的功能，那感觉，作为开发者的你一定懂得。

这里向大家介绍一下如何更方便的使用Safari浏览你喜欢的网站，前提是这个网站已经为ios制作了主屏幕图标哟~

也许你会发现你的同事在使在ios时点击桌面的一个图标就会全屏打开一个网站，就是下图这种主屏幕图标

这种图标看起来很像一个native的应用程序，实际上它只是一个网站的快捷入口，这也是我下面要说的如何让网站支持这种图标的添加。

下面是代码，很简单的一段：

ios会自己把图片裁切成圆弧状，并且添加弧形高亮的效果，所以你只需要给出一张普通的四方图片就可以，剩下的事情ios会帮你处理。

当第一次打开主屏幕添加的这个图标会全屏展示网站，如下图（如何制作for ios版本wordpress请看为你的博客打造iphone版本）

这样可以更好的展示你所添加的网站，也可以更精确的测试出满屏的第一屏的位置。

你可能会说这个功能可能会用很多人不知道，没问题，下面就来解决这个问题

引入这个css和js之后就会出现下图的提示，如果你要使用的话建议保存到自己的空间下引用，毕竟这个使用的国外的地址，速度上肯定不理想。

到这里就实现了网站for ios版本添加到主屏幕图标的问题，你也可以自己试一下，祝你好运哦。

/*生活之美*/

使用CSS3制作loading效果

Fri, 13 Jan 2012 05:48:26 +0000

这个效果提取自Sencha Touch框架，也是在sencha touch的项目中偶然发现loading效果竟然是用纯css3写的，于是提取了出来供各位童鞋一同研究.

使用了keyframes来使动画反复循环，在webkit内核浏览器下表现的很好，目前是webkit only，火狐也请绕道吧。

下面放主要代码和demo，一demo胜千言啊。

主要样式：

 .x-loading-spinner{font-size:250%;height:1em;width:1em;position:relative;-webkit-transform-origin:0.5em 0.5em}
 .x-loading-spinner > span,.x-loading-spinner > span:before,.x-loading-spinner > span:after{display:block;position:absolute;width:0.1em;height:0.25em;top:0;-webkit-transform-origin:0.05em 0.5em;-webkit-border-radius:0.05em;border-radius:0.05em;content:" "}
 .x-loading-spinner > span.x-loading-top{background-color:rgba(170, 170, 170, 0.99)}
 .x-loading-spinner > span.x-loading-top::after{background-color:rgba(170, 170, 170, 0.9)}
 .x-loading-spinner > span.x-loading-left::before{background-color:rgba(170, 170, 170, 0.8)}
 .x-loading-spinner > span.x-loading-left{background-color:rgba(170, 170, 170, 0.7)}
 .x-loading-spinner > span.x-loading-left::after{background-color:rgba(170, 170, 170, 0.6)}
 .x-loading-spinner > span.x-loading-bottom::before{background-color:rgba(170, 170, 170, 0.5)}
 .x-loading-spinner > span.x-loading-bottom{background-color:rgba(170, 170, 170, 0.4)}
 .x-loading-spinner > span.x-loading-bottom::after{background-color:rgba(170, 170, 170, 0.35)}
 .x-loading-spinner > span.x-loading-right::before{background-color:rgba(170, 170, 170, 0.3)}
 .x-loading-spinner > span.x-loading-right{background-color:rgba(170, 170, 170, 0.25)}
 .x-loading-spinner > span.x-loading-right::after{background-color:rgba(170, 170, 170, 0.2)}
 .x-loading-spinner > span.x-loading-top::before{background-color:rgba(170, 170, 170, 0.15)}
 .x-loading-spinner > span{left:50%;margin-left:-0.05em}
 .x-loading-spinner > span.x-loading-top{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
 .x-loading-spinner > span.x-loading-right{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}
 .x-loading-spinner > span.x-loading-bottom{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
 .x-loading-spinner > span.x-loading-left{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}
 .x-loading-spinner > span::before{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg)}
 .x-loading-spinner > span::after{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg)}
 .x-loading-spinner{-webkit-animation-name:x-loading-spinner-rotate;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
         @-webkit-keyframes x-loading-spinner-rotate{0%{-webkit-transform:rotate(0deg)}8.32%{-webkit-transform:rotate(0deg)}8.33%{-webkit-transform:rotate(30deg)}16.65%{-webkit-transform:rotate(30deg)}16.66%{-webkit-transform:rotate(60deg)}24.99%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.32%{-webkit-transform:rotate(90deg)}33.33%{-webkit-transform:rotate(120deg)}41.65%{-webkit-transform:rotate(120deg)}41.66%{-webkit-transform:rotate(150deg)}49.99%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.32%{-webkit-transform:rotate(180deg)}58.33%{-webkit-transform:rotate(210deg)}66.65%{-webkit-transform:rotate(210deg)}66.66%{-webkit-transform:rotate(240deg)}74.99%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.32%{-webkit-transform:rotate(270deg)}83.33%{-webkit-transform:rotate(300deg)}91.65%{-webkit-transform:rotate(300deg)}91.66%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(330deg)}}

HTML结构

  class="x-mask-loading" style="text-align:center;margin:1em">
    class="x-loading-spinner" style="margin:0 auto 7px;">
    class="x-loading-top">
    class="x-loading-right">
    class="x-loading-bottom">
    class="x-loading-left">
   

class="x-loading-msg">加载中…

请自觉用webkit内核浏览器查看，手机端完美支持~~

Demo

/*沉淀*/

用CSS3画一个iphone4

Wed, 21 Dec 2011 01:34:38 +0000

还是国外的蛋疼达人，不知花了多少个日夜画出了这部iphone4，我相信作者一定是个很细心的人，不然这么多的细节如果让一个浮躁的人来处理估计世界末日也难看到。

作者为什么要分享这部iphone4呢

有两个原因让我想分享这部iphone4:

1.它很酷并且棒极了！！！

2.完全使用CSS3来完成，没有任何图片哦

效果大概就是这样，关于这部iphone4作者有话要说

这部iphone4和它的图标仅仅是由css3展现的；

没有 images, 没有 base64, 没有 SVG, 没有 canvas仅仅使用了3395行css代码和335行js代码（使用了jquery）；

在最新的safari和chrome中展现最佳，最好是MacOS。

下面是demo地址

Demo

/*风真TM重*/

再见

Tue, 29 Nov 2011 07:56:25 +0000

我要和你说分手了，这是一件很悲伤的事，比悲伤还悲伤的事是什么，是友情。各位一起工作这么久的基友百合们，你们懂的。

屎意大发，我要改编一首小诗：

一别之后，两地相悬，不知何时再见；三分离别，四分挂念，不尽叹息连连；五月天，六月暖，七人各自天边，八里路，九连环，十里长亭再相见。

（改编自卓文君给司马相如写的小诗一首。）

人生得一群基友足以，斯世当以同怀屎之。

我在老基友汤师爷那里定制了一张油画，一般情况下艺术家都会有些神经，他不愿意在油画上使用一些卡通气息，于是就有了下面这张电子版，我就当它是油画了，在这里万分感谢汤师爷对我的大力支持，有时间到我家里吃饭，想吃啥咯咯咯一声就成。

有个认识的艺术家好，而且是个基友，这样真好，我想。

/*分手的感觉*/

屁熊猫

Fri, 25 Nov 2011 03:35:25 +0000

由于一些需要，会用到一些图片素材，于是自己做了一个很简单的主题，弄了屁熊猫这个网站，说实在的能保持每天更新网站的热情确实不是一件容易的事，很佩服那些手里有很多网站的童鞋，他们付出的时间肯定比陪基友的时间多哇。

图片类的网站对于小站都有一个问题，那就是流量，所以我一直在找一个好的图床，有米有童鞋提供一个，网上信息太多太杂，每一个都试用不太靠谱，有木有童鞋有正在使用的免费图床给推荐一个，感激不尽哇。

由于近期需要更新屁熊猫，所以这个博客的更新频率会变得比较低，一有时间我就会回来的~~

/*睡觉是为了踏实地工作，工作是为了踏实地睡觉*/

偶尔玩玩

Wed, 23 Nov 2011 02:39:43 +0000

偶尔玩玩，有个游戏消遣总是好的

/*愿一切顺利*/

IT人也经常读错的词

Sun, 13 Nov 2011 08:58:05 +0000

=====公司/产品名=====
Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙，我念【油土鳖】
Skype [ˈskaɪp] 念 死盖破 不念 死盖屁
Adobe [əˈdəʊbi] 念 阿兜笔 不念 阿斗伯
Chrome [krəʊm] 念 克肉姆，我念【吃肉么】
C# (C Sharp) 念 C煞破
GNU [(g)nuː] 念哥怒
GUI [ˈɡui] 念故意
JAVA [ˈdʒɑːvə] 念扎蛙不念夹蛙
AJAX [ˈeɪdʒæks] 念 诶(ei)贾克斯 不念 阿贾克斯
Ubuntu [uˈbuntuː] 念 巫不恩兔 不念 友邦兔，我念【有奔头】
Debian [ˈdɛbiən] 念 得(dei)变，我念【大便】

Linux [ˈlɪnəks] [ˈlɪnʊks] 两种发音 丽娜克斯和 李扭克斯 都可以
LaTeX [ˈleɪtɛk] [ˈleɪtɛx] [ˈlɑːtɛx] [ˈlɑːtɛk] 雷泰克，拉泰克 都可以（根据Knuth的建议，雷泰克斯和拉泰克斯不正确。而且LaTeX的重音是放在雷或拉上。感谢@Rio讨论。另外感谢发音大牛@梁海刚刚指出， [ˈlɑːtɛx] 注音符号里的x发的不是克斯的音，而是接近“巴赫”的那个赫。）
GNOME [ɡˈnoʊm] [noʊm] 两种发音 格弄姆 弄姆都可以
App [ˈæp] 念阿破（与爱破也比较像，参见音标），不能把三个字母拆开念成A P P。
=====一般英语=====
null [nʌl] 念闹
jpg [ˈdʒeɪpɛɡ] 念 zhei派个 不念 勾屁记
WiFi [ˈwaɪfaɪ] 念 歪fai
mobile [moˈbil] [ˈmoˌbil] [ˈməubail] 膜拜哦 和 牟bou 都可以
integer [ˈɪntɪdʒə] 念 音剃摺儿 不念 阴太阁儿
cache [kæʃ] 念喀什不念卡尺
@ 念 at
Tumblr (Tumbler) 念 贪不勒
nginx (Engine X)念 恩静爱克斯（@Lawrence Li有不同意见）
Apache [əˈpætʃiː] 念 阿趴气
Lucene [ˈluːsin] 念鲁信
MySQL [maɪ ˌɛskjuːˈɛl] [maɪ ˈsiːkwəl] 念 买S奎儿 或 买吸扣 都可以
Exposé [ɛksˈpəʊzeɪ] 念 埃克斯剖Z （重音在Z上）
RFID 【本条争议颇大】：有人念af rid, ri fid，但是RFID官方念法依然是四个字母分开读R F I D
JSON (jason) 念 zhei森
Processing [ˈprəʊsesɪŋ] 重音在Pro上
avatar [ˌævə'tɑr] 念 艾瓦塌儿

/*我故意念错的啊，魂淡！*/

PR值再次更新

Wed, 09 Nov 2011 03:18:20 +0000

听说这两天google又更新了pr值，所以自己也手贱去查了一下，到3了，作为一个很不经常更新的博客也算知足了，各位基友的博客也相继更新pr，总体上是增多降少，虽然google一直在强调不要将过多的精力放在提高网站的PR值上面，但是目前看来还没有其他算法可以更好的代替现有的pr值，所以在pr值退出google之前还是一个比较正规的衡量一个网站质量的标准。

我有一个同事是设计师，旗下网站众多，虽然能数过来但是作为一个独立博主这么多网站我想如果全部照顾过来的话肯定要崩溃，真佩服这位基同事的毅力哇。

我手上也就那几个网站，自己还分了几个二级域名用来搞搞不同的小站，而事实上根本没有那么多时间去照顾两个站点，更何况是三个以上了，也想做一个娱乐站，但是走这种路线的人也太多了，一直在找一种比较创新的小网站模式，对于新鲜的网络事物很多人还是乐意尝试的。

关于个人的独立网站目前也只能靠一些广告来勉强维持一些必要的硬件开支，至于盈利的话个人认为你所付出的时间和所盈利的那些钱不太成正比，有那些时间我宁愿花在求知的路上，道之所在，虽千万人，吾往矣。

/*做一个正确的决定比什么都重要*/

标签语义化-书之解释

Fri, 04 Nov 2011 03:34:41 +0000

每一个从事前端开发的童鞋估计都知道结构（Structure）、表现（Presentation）和行为（Behavior）这三个词语意味着什么，这里我先只针对结构这一块拿出来说说。

结构（Structure），顾名思义就是网页的框架，一个良好的框架可以很方便的创造出一个优美的网页，那么何为良好的框架，这就是下面要提到的语义化（Semantic），我会以一本书的例子来比喻，这样或许会更加容易理解一些。

我们假设一个网页就是一本书，抱着最终用户优先的原则我们来着手制作网页这本书。

首先需要确定的是这本书的大小，只有确定了书的大小才能在保证不同的印刷厂（浏览器）也能准确的印刷出我们想要的效果，这一步就是DTD的确定。

所谓DTD，可能很多人都不了解，有很大一部分人都是直接用DW默认的DTD，也就是下面要介绍的过渡型（DW4为例），你大可不必背出来DTD每个DTD的声明，但是你需要知道的是每一个DTD所代表的含义，对于那种把所有DTD背下来的人我一直保持膜拜的态度。

（这里只介绍XHTML有关的DTD，HTML4的不建议使用所以这里不予介绍，手机版的DTD和框架版的DTD由于很少用到，所以这里也不介绍，避免内容多了容易混淆）

下面这个是过渡型，意思就是可以容许一定的不标准的差异存在，建议新手用这种DTD。

下面就是我所推荐的严格型的DTD，建议有一定经验的前端开发人员统一换成这种DTD。特殊情况特殊对待，比如公用度很高的头尾页面我还是先处理成transitional，以免对子集页面造成不良影响，当然针对不同的项目和具体情况可以自由定义DTD，建议使用严格型的。

下面这个就是所谓的HTML5 DTD声明，很简短，无需复制，完全可以牢记，但是如果你对标准理解不是很深入的话不推荐使用，而且现在的网络环境也不允许大规模使用。

现在这本书的大小已经确定，可以告诉印刷厂我将有这种类型的一本书要出版，印刷厂也做好了相应准备来正确的印刷这本书。

然后就是写一个书名，正常的一本书是不会没有书名的，所以我在里写上了这本书的名字，语义化-书之网页说，好，也许你会说这样封面就已经做好了，抛去那些视觉的修饰这样真的算是完成了吗？我觉得不是，你需要在封面添加的是这本书的简单说明，作者，简介，出版社，或者关键词，你不加当然也可以，但是如果一本书上连一个简单的介绍都没有你会去买吗？

这就是

1、 //书的语言

2、 //书的作者

3、 //出版社

4、 //书的简单描述

5、这本书的关键词，比如科幻小说，文艺小说，或者爱情小说“ /> //关键词

现在这本书的封面已经确定好了，接下来就开始内容的制作。

然后就是一个大的标题，再次告诉读者你没有买错，这本书不是换个封面但是内容不一样的一本盗版书。

语义化-书之网页说

这样就给读者一个反馈再次这本书的大概内容，而且这个标题是唯一的，接下来就是目录的制作

我们会在书的开头就放上一段目录，同样我们会在网站的顶部放上整个网站的导航，让读者可以清楚的明白整本书的结构，让读者再次确认这本书是不是想要找的那本书，

导航列表我建议用

来表示，因为这样才像一个目录列表的样子。

当读者看完了目录自然就跳到内容部分，每个章节都会用一个标题说明下面的内容

目录章节一

目录章节二

目录章节三

关于每个章节的内容我们可以用

章节一内容

来实现。

书里经常会用到一些术语解释，我们可以使用

需要解释的词语: 这个词语的解释内容

来实现。

书中有时候我们会引用别人的一段话来证明自己的观点，那么可以使用

引用的话

甚至其他一些情况我们都能找到对应的XHTML解决方案：

//强调某个词语

//列出某人地址

/ //解释某个缩写短语

//一段代码

这里列出的是一些一本书可能会出现的表现方式，在XHTML里我们都可以找到语义化的解决方案。

这个时候也许你会惊奇的发现为什么没有提到div呢，那么我想问一下，你所说的div是什么形式的div呢？

div在我看来本身没有任何语义，只是用作布局以及样式化或脚本的钩子（hook），所以在有了更好的标签代替(如HTML5里新增的article，section，nav，header…)就会自然减少div的数量，但是现在我们还必须使用div来包裹住不同的块，比如图书的目录导航是一个完整的块，需要div包裹，每个目录对应的内容区域也是一个完整的块，也可以用div包裹，div可以合理使用，但不能滥用，因为在没有更好的标签代替的时候使用div确实是最好的解决方案。如果每个文章段落你不使用p标签而使用了div那是不被看好的。

现在跳出书这个比喻物来具体说说语义化在网页中的真实作用。

语义化说起来简单，但是做起来也不是那么容易，网页上的每块元素在现实中我们都可以给予其定义，浏览器的开发者们把这种人为给予的定义赋予了浏览器，然后浏览器就根据不同的标签来分辨这一块应该是什么内容，作为人类的我们可以用生活来分辨出这一块是什么内容，但是作为浏览器只能根据开发者使用的标签来解释这一块的含义，所以一个好的开发者制作出来的网页应该是不但终端用户可以很好的理解每块的含义，甚至浏览器也能很好的解释出每块的现实含义并良好的展示出来。

开发者们，书写一个语义化的网页不是什么高深的内容，而是作为一个前端开发者应有的基本功吧，你需要挑战的不仅是人类，还有机器，人类的吹毛求疵你很难满足，但是你能用语义化的代码搞定死板的浏览器也是一件让人兴奋的事。你或许会说不管怎么做我可以准确的还原设计稿就行，这么想我没有意见，但是作为一个前端开发工作人员这是你的工作，我们会看你的XTHML代码，是否专业，是否对标准化有深入的了解一看便知，为了作为一个专业的前端开发人员，我还是建议有些童鞋可以试着改变一下，或许你的一点点改变会影响到你的新员工，甚至老同事，这样或许能间接推动国内的前端开发行业变得越来越和国际接轨，再小的力量，也是一种支持啊亲。

如果你真正的做到了标签语义化，拿到一个网页效果图学会站在浏览器和浏览者的角度思考，那么现在你就是一个不折不扣的页面重构师了，作为一个伪高科技人才，你就偷着乐吧。

最后来张图总结一下。

/*忘食忘忧，不知岁月*/

visited的妙用

Mon, 31 Oct 2011 09:06:08 +0000

相信很多人在写样式的时候已经懒得把a:visited这个样式加进去了吧，一是为了避免L-O-V-E顺序带来的不便，另外一个可能就是因为觉得visited没有太大的作用，这两个原因都有自己的道理，但是如果合理运用visited在一些特定的页面或许会带来不一样的用户体验，我一直坚信一个好的用户体验设计师一定是一个较专业的前端开发工程师，只有这样才能站在更高的角度去看一些问题，不然可能会因为一些局限性而导致一个项目的维护成本增加，当然这些就是些题外话了。

也许你不懂我在说什么，没问题，我们来看几张图片你就明白了

第一张，京东的搜索结果页，你可以分辨哪些商品我已经浏览过了么，事实是我点了其中几个，其实即使是我本人过了几小时我也有可能会忘记我曾经浏览了哪些商品

第二张，苏宁易购的搜索结果页，还是同样的问题，我也点开了几个商品，但是事隔几小时我再搜索，那么笨的我可能无法想起我曾经点了哪些产品。

第三张，淘宝的搜索页，一样的问题，这时候你可能会问那两个颜色变化的是不是我曾经浏览过的商品呢，你的怀疑没错，我确实浏览过那两个商品。

通过对比我们可以明显的看出问题所在，淘宝网可以明确的分辨出我曾经浏览了哪些商品，因为其在链接后加了一个:visited样式，虽然只是增加了几十个字节的代码，但是得到的效果却是非常的好，对于我这种小苦逼青年类型的总是无法记住曾经浏览过的商品，当我再次搜索同一类商品的时候我会很弱智的把之前看过的商品重新点开一遍，无形之中浪费了我不太宝贵的时间，如果这个页面有这种已访问颜色提示，我的眼睛会先告诉我的大脑这个商品我曾经浏览过，然后我的大脑会控制我的手不要再手贱点开已经点开的页面，对于我这种小苦逼是太实用了。

也许你会说那我把所有的页面都用上visited，如果你这样想那么你可能也是一个小苦逼，无需那么执着，一般visited我们会加在经常会点开的链接上，比如搜索结果页产品链接、论坛帖子链接、新闻链接、文章链接等,这样在实现了代码精简的前提下又增强了特定页面的用户体验，何乐而不为呢？

作为一个前端开发小苦逼，我所做的事是配合视觉、交互、用户体验和后台来完善一个页面，但是如果视觉懂一些前端开发，交互懂一些前端开发，用户体验懂一些前端开发，后台懂一些前端开发，那样这个世界该多美好啊，小苦逼的帽子可能也能拿掉了，所以我要做一名前端交互工程师，前端里交互做的好，交互里前端做的牛逼，哟~~~

/*涨价、房奴，都让我们碰上了。别担心，未来才刚刚开始，苦逼的我们一直在奋斗。不管有没有人看到，也要默默的绽放。做心底的那个自己，相信自己，相信身边的人，我是N，我为自己代言*/

苏宁易购开始屏蔽一淘网

Sat, 29 Oct 2011 02:38:46 +0000

这两天在关注京东屏蔽一淘的事件，我也是觉得一淘抓取京东的评论有些不对，要知道一个网站用户肯在你的网站评论，如果前期你不投入大量的资金来建立起这种吸引力绝对不会有多少人愿意评论，那些评论送积分，晒单送积分的活动也需要大量的人力物力去执行，但是现在一淘网在没有征求京东的前提下私自抓取京东的用户评论数据，换做是谁，估计也会生气。就像是有人抓取我网站的文章数据或者评论数据我心里肯定不爽，或许我会同意，但是你要提前告诉我一声，然后加个“原文在这里”这种标示，这样在感情上我也没啥说的，但是这种随意抓取的行为和迅雷那种吸血鬼行为有区别么，如果我见到你妹一直盯着你妹的胸部看，顺便还想拍个照，然后对你说这是公共透明信息，我只是想让更多的人看到这个信息而已，你妹的你说气不气人！

紧接着苏宁易购也跟着屏蔽一淘网，截止今天依然可以看到

http://www.suning.com/robots.txt

10月27号的版本，顺便还加了几句很personal的话，今天已经删除鸟

不知道苏宁易购出于什么立场屏蔽的一淘，也许是因为它独特的网站数据造成的，也许是因为独特的企业文化造成的，这就不好猜测了，但是既然这么做了就说明苏宁易购确实很生气哇。

苏宁易购总经理李斌表示，屏蔽一淘网确实是苏宁官方作出的行为，但是注释文字是个别员工所为，与官方无关，现在已经在内部调查为什么会出现这段文字。

我还发现一个问题，就是屏蔽一淘的这两家电商价格都是使用的图片格式，这是一个巧合还是？至于苏宁易购使用图片有一个内部官方的解释，但是我觉得不只是这么简单。

其实现在的网站数据基本上都是你抓我我抓你，当我需要一些产品数据的时候，如果供应商不能提供准确完整的数据、数据在网站上线之前不能准时到位、或者一些其他原因导致数据不能按时准确的跟网站同步上线，甚至我需要对比竞争网站价格，这个时候就会使用抓取相关网站的数据来实现，抓取呢只需要付出时间的代价，虽然不一定准确，但是一定可行。

不知道苏宁易购屏蔽了一淘以后会如何继续健康有序的发展，这个月底苏宁易购的图书馆就要上线了，到时候估计又得掀起一场新闻论战，师母已呆，师母已呆哇。

/*继续走，但不失去*/

谷歌字体API使用小记

Tue, 25 Oct 2011 07:45:34 +0000

也许你已经注意到小站的logo换成了一种不常见的字体，总会有一些手贱的基友会去选择一下看看到底是图片还是字体，觉得是图片的基友可能要失望了，因为那仅仅是一种字体而已，使用的是Google Web Fonts服务，Google推出这个服务已经有一年多了，以前一直没有找到用得到的地方，这两天越看logo越觉得太平淡了，于是使用了Google Web Fonts里的一个字体代替，恩，现在看着舒服多鸟。

使用Google Web Fonts服务有什么好处呢？

1.可继续使用HTML文本

与使用图片或CSS背景图片不同，使用@font-face方案来美化web排版对搜索引擎更加友好。

此外，它属于不冒犯性的解决方案，意味着说你不需要对现有的任何内容进行修改，只需要更新 CSS样式即可。
2.可通过互联网访问

由于你使用 HTML文本而不是一个图片或CSS背景，因此并不影响通过屏幕阅读的用户。

3.减轻你的服务器负担

使用@font-face字体，你可将服务器负担转到谷歌安全可靠的CDN设备中，减轻了你自己服务器的工作量，而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。

坏处呢就是增加了一个HTTP请求，我试了一下，如果把这段使用@font-face方案的字体样式合并到你的样式里，其最终将不被解释执行，所以在这一点上还是有些取舍的。

如何使用（以本博客为例）：

访问Google Web Fonts

选择一个你喜欢的字体（Add to collection），然后使用这个字体（Use），Google Web Fonts服务会自动生成一段类似
http://fonts.googleapis.com/css?family=Orbitron:900‘ rel=’stylesheet’ type=’text/css’>的代码

?后面的参数就是你选择的字体名字，这段代码你只要直接复制，然后正确引用到你的网站中即可，字体已经引入然后就是如何使用它，很简单,给你需要控制的字体加上这行样式

font-family: ‘Orbitron’, serif;

不出现意外的话你就可以在你的网站中看到你所应用的个性字体了~~

当然这个服务仅适用于英文字体，如果你经常做一些英文站的话这个服务非常适合你，这个服务也是跨浏览器，跨平台的一种展示方式吧。

/*开始倒计时*/

十一国庆logo动画

Thu, 29 Sep 2011 08:19:12 +0000

每当遇到一些节日这边都会出一版logo动画，这重担自然落到了敬爱的汤师爷肩上，至于汤师爷是多么的油菜我已经不想多说了，现在我要做的事就是把他这个动画变成jquery版本。

在没有开始做之前我就跟汤师爷提过这个建议，我估计这小子是故意的，因为当我拿到flash源文件的时候我惊奇的发现竟然有700帧！我不得不把这700帧分成了7张图片顺序载入才完成了这个动画效果，由于帧数色彩太丰富，压缩后单张图片竟然高达4M左右，于是又不得不强行压缩成8位色彩，最后的结果已经失去了flash版的光华，但是我仍然放出来给大家看一下，至少在帧数较少的情况下完全可以用js来实现这个效果，像谷歌logo动画一样，你也可以。

Demo

代码不多，可以到demo里详细查看。

/*奋战到天明*/

写给麻花腾

Wed, 28 Sep 2011 08:14:59 +0000

半个月前你告诉我说你要结婚了，你还是像以前那样总是突然告诉我一些关于你的事情，你告诉我的时候语调很平淡，但我仍然可你猜到你内心满脸坏笑的样子。

回城卷是九月三十号下午五点三十的，大概晚上十一点之前双脚才可以落地，然后我会窝在家里等待，等待你这场纪念的婚礼。

我还是忍不住想说一下我跟你的故事，虽然我知道这个时候写这些有些不太合适，但是大度的她一定可以原谅我珊珊可爱的挂念。

十几年前的时候我们就好上了，对这件事我很少跟人提起，当时我们是经过父母双方官方认证的，所以我们根本不必担心这样做带来的影响。

这么多年过来了我还是忍不住想说那个时候你就是一个傻逼，傻逼到让我现在想起来都无地自容，那些年有许多人都问过我为什么就喜欢你这个傻逼呢，我说那是因为其实我也是个傻逼，“我想我会一直傻逼，这一辈子都这么傻逼，我想我会一直傻逼，这样傻逼一辈子”，这是我喜欢唱的歌，而你也跟着我喜欢了起来，就这样我们一起和谐的相处了那么多美好的时光。然后我们慢慢长大，一年又一年认识了相似的人，经历了相似的事，我们的青春插在了牛粪上，你为了尽情绽放变成了让老师头疼父母心碎的坏孩子，每当你想不通这是为什么你会来找我，那时的我以学业为重渐渐疏远了你，这件事是我永远的伤，你卖力的恨我，疯狂的训斥我，歇斯底里的坚强成长。我猜现在的你一定会在某个夜晚感谢我，因为我隐约感觉到你很怀念那段肆无忌惮的时光，哎，时光。

后来我们就这样不知不觉的分手了，从此没有了过多的联系，我在学校里安安静静的读书，你却一次次的努力寻找一些你一直想寻找到东西，高考结束我离开了家来到了这个城市求学，而你选择了只写一篇作文来结束你的高考，后来你告诉我其实那篇作文你只写了一个标题。第二年或许你觉得上学还不错于是重新选择了一门新的学科来当做你高考的科目，你说只要这一门科目可以拿到一个好成绩你就知足了，你又无耻的做到了，而无耻的结局是你也来到了这个城市，你主动联系了我，你发信息告诉我说你还会想我，但是是很纯真的想念，如春风轻抚，如暖阳懒照。我没有回你，因为我知道那种感情，从青春两个字蹦出来的情感是无穷无尽的，那是永远回不去的记忆，直到现在我还在想念，想念那些阳光灿烂的日子。

现在的你就要进入婚姻的殿堂了，虽然对我来说这有些突然，不过我还是希望看到你幸福的样子。

你想念过去，更憧憬未来，少年时你说过很多傻逼的话，做过很多傻逼的事，现在你已经幡然醒悟了吧，其实有一些人很想念你，如今你还是当时的模样，没有被岁月刮伤，没有在时光里中暑，一想到那一天你会牵着你另一半的小手到我面前炫耀，你心里一定乐疯了吧，好吧，我祝你们幸福。

至于我跟你之间发生的具体故事我还是不能写，因为在我们分手之后那些故事就永远只属于我一个人，你最好不要来触摸它，不然有你好看。

之前你带她见过我，很奇怪的是她竟然可以让我也毫不知情的喜欢上她，就这一点我就挺羡慕你小子的，一个大闷骚竟然找了一个小太阳，想必你那些闷骚的想法也会在这个小太阳里融化吧。送你一段歌词吧，你会喜欢的。

“我不好也不坏，不特别出众，我只是敢不同，我的人生就是一错再错，错完了再重头，也许放弃掉一些，活得更轻松，我却不再是我，我不愿一生，晒太阳吹风，咸鱼也要有梦”

鸣金，收尾。

赠送图一张

李艳红

2011.09.27

相关文章推荐：写给李大胖胖自问自答

/*时间是把杀猪刀*/

CSS3苏宁易购logo

Tue, 06 Sep 2011 09:27:08 +0000

记得去年这个时候已经接触了CSS3一段时间，也写过有关css3的文章（css3动画之我见），那个时候有关css3的中文资料并不是太多，学习起来有些不顺畅，再看看现在有关CSS3的资料充斥着整个网络，这也为现在开始接触这些的同学提供了很好的学习资源，虽然CSS3还不能完全用于商业化，但是各位喜欢折腾的盆友们可以自娱自乐撒。

其实很多博友都使用了一些的CSS3元素，所以现在大家看到一些CSS3效果都觉得很普遍，就像之前有人用chrome浏览器发现我在小站藏着的一些小效果都在那里说来道去，现在大家都习惯了用一些俏皮可爱的小效果，并且这小小效果确实让那些可爱的博友们感到很有意思，这就够了，这就够了哇。

虽然大家心里也都明白CSS3离成熟还有很长一段时间，但是仍然在可以使用的情况下尽量使用，虽然我们没有太大的号召力，但是我们一直在做着这件事，并且很理所当然的做了下去，默默的推动着网络的发展，感觉确实很开心哇。

废话不说了，放demo，建议使用1440的屏幕查看demo，不然你可能会看不到全部场景

Demo

具体的实现大家查看源代码，其他实例大家可以看文章开头的链接，里面有我写的另外几个例子。

赠送一张图，不解释

/*幸福果然可以感觉的到*/

data:URI scheme

Wed, 31 Aug 2011 09:04:04 +0000

我使用这个功能有一段时间了，这个功能可以翻译为内联图像，估计很多人都在期待所有浏览器都可以支持这个功能，至少目前还不靠谱，但是聪明的人类总会想出一些方法来解决出现的问题，所谓技术大多都是逼出来的。

先放一个链接吧，这里面清楚的介绍了这个功能的原理，The “data” URL scheme，文章不算长，你可以随便看一看。其实你也可以不必理解其为什么，因为下面我会告诉大家如何有效的使用内联图像。

大多数人使用内联图像只有一个目的：减少http请求。

当你使用了内联图像作为展示图片或者是背景图片的时候，高级的浏览器会把这张“图片”以代码的方式解释并以图片的方式展现，也就是说浏览者看到的是一张图片，但是浏览器却认为这张图片只是一段代码而已，从而避免了此次http请求。

好的，看到这里你可能会变得兴奋起来，因为也许你曾经像一个执着的苦逼一样优化再优化，有时候仅仅是为了减少一个http请求而调动了那么多的资源，现在你一定在想是不是所有浏览器都支持这个功能呢，一秒钟后你大脑里或许会不自然的蹦出一个“小草”一样的语气助词，是的，IE8–不支持此功能，不过我们可以使用MHTML来解决这个问题。啥也不说，放个例子吧。

Demo

你可以用firebug的网络面板来检阅有没有http请求，ie可以使用HttpWatch来查看，甚至你可以看一下源代码,至于是如何支持IE6可以在源码种找到。

建议：

1.在一些商业性的网站上不建议使用，毕竟我们必须保证网站不会出现任何错误。

2.只支持小于4100字符的图片，如loading图片。

3.如果你是一个优化控，可以在自己的博客上耍一耍。

4.Data URI的好处是减少HTTP请求，坏处是浏览器对于URI的长度有限制以及增大了文档的大小。

最后给俩个生成Data URI的网址：

http://www.sveinbjorn.org/dataurlmaker

http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

/*咸鱼也要有梦*/

苏宁易购发展趋势分析二

Tue, 30 Aug 2011 02:49:30 +0000

上次写过一篇苏宁易购发展趋势分析，由于当时刚启用suning.com域名不久，所以不能较准确的看出suning.com的趋势，于是再写一篇来看一下苏宁易购现在的大概趋势。

不知道经常上网的童鞋注意到了没，苏宁易购的广告可谓是无处不在，这一块还是那么坚挺，后台硬就是好啊。

我这个月刚在苏宁易购买了一台洗衣机，一个豆浆机，也算是给苏宁易购创收了，在家用电器方面苏宁易购的价格确实比较划算，我估计苏宁易购80%的收入都集中在20%的家用电器销售上，因为除了家用电器以外，其他商品价格没有太大的挑战力。

上图是苏宁易购和其他网上商城的流量对比，这张图可能看的不是太明显，因为有庞大的淘宝商城占据着大部分市场流量，远远超过了另外四个对比站点，其实这张图上苏宁易购的流量还是偏低。

上面这张图就可以清晰的看出苏宁易购流量的具体走势了，在没有活动的时候访问量会急剧下滑，这也是新兴电子商务网站的一个通病，需要用时间和优秀来治疗。

上图是第一张图对应地区的访问量，那个长长的自然是淘宝商城，依然是广东网上购物欲最强，江苏次之。

上图是“苏宁易购”关键词的搜索量对比，可以看出搜索量是最少的，这个在情理之中，网站规模差距不大的情况下四个字的搜索量肯定不如两个字的搜索量多，但是这里有一个问题，如果搜索者搜索的是“苏宁”二字，那么苏宁易购就排到了下面，如果搜索者搜索的是“易购”，那么易购这个网站又排到了第一，所以这个关键词起的很无奈，就像赶集网做的那个赶驴的广告，不太懂网络的普通老百姓说不定就回去搜索“赶驴网”这种词，可惜的是这个赶驴网已经被别人注册了，这种不小心为他人做嫁衣裳的事情确实很无奈。

这张图可以比较明显的看出除了淘宝商城以外京东牢固的抓住了劳动人民的脑细胞，高高在上的气势挡也挡不住，按13.5这个指数来看，还是超过了其他网上商城，国美库巴还在默默努力哇。

最后一张依然是“苏宁易购”关键词的搜索趋势，依然很平稳。

整体可以看出在疯狂广告和实体店信用的影响下苏宁易购正在逐渐升起，但是由于其电器观念的局限性，所以在一段时间里还只能靠电器类产品来维持增长趋势，现在的苏宁易购应该只是苏宁电器网上商城，并未真正达到其一站式购物平台的目的，我看到的广告虽然也有一站式购物平台这种，但是大多还是以电器为主打，作为一个对网络比较熟悉的消费者我买东西的前提还是对比，在各大靠谱的网上商城对比过以后才选择最便宜的一家购买，所以除了网站性能，用户体验以外，价格是永远无法撼动的因素，我想很多人也会因为10块钱的差价愿意多等待5秒吧？当然前端优化工程师们会尽量的去减少这种等待，让你在少花10元的基础上获得更佳的浏览体验。

/*又长了一岁，时间再次扑面而来*/

乔布斯2005哈佛演讲

Sat, 27 Aug 2011 07:22:51 +0000

很早就看到过这篇文章，如果你也看过希望你当一个故事再看一遍。

I am honored to be with you today at your commencement from one of the finest universities in the world. I never graduated from college. Truth be told, this is the closest I’ve ever gotten to a college graduation. Today I want to tell you three stories from my life. That’s it. No big deal. Just three stories.

很荣幸和大家一道参加这所世界上最好的一座大学的毕业典礼。我大学没毕业，说实话，这是我第一次离大学毕业典礼这么近。今天我想给大家讲三个我自己的故事，不讲别的，也不讲大道理，就讲三个故事。

The first story is about connecting the dots.
I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for another 18 months or so before I really quit. So why did I drop out?

第一个故事，是关于人生中的点点滴滴怎么串连在一起。我在里德学院（Reed College）只读了六个月就退学了，此后便在学校里旁听，又过了大约一年半，我彻底离开。那么，我为什么退学呢？

It started before I was born. My biological mother was a young, unwed college graduate student, and she decided to put me up for adoption. She felt very strongly that I should be adopted by college graduates, so everything was all set for me to be adopted at birth by a lawyer and his wife. Except that when I popped out they decided at the last minute that they really wanted a girl. So my parents, who were on a waiting list, got a call in the middle of the night asking: “We have an unexpected baby boy; do you want him?” They said: “Of course.” My biological mother later found out that my mother had never graduated from college and that my father had never graduated from high school. She refused to sign the final adoption papers. She only relented a few months later when my parents promised that I would someday go to college.

这得从我出生前讲起。我的生母是一名年轻的未婚在校研究生，她决定将我送给别人收养。她非常希望收养我的是有大学学历的人，所以把一切都安排好了，我一出生就交给一对律师夫妇收养。没想到我落地的霎那间，那对夫妇却决定收养一名女孩。就这样，我的养父母——当时他们还在登记册上排队等著呢——半夜三更接到一个电话: “我们这儿有一个没人要的男婴，你们要么？”“当然要”他们回答。但是，我的生母后来发现我的养母不是大学毕业生，我的养父甚至连中学都没有毕业，所以她拒绝在最后的收养文件上签字。不过，没过几个月她就心软了，因为我的养父母许诺日后一定送我上大学。

And 17 years later I did go to college. But I naively chose a college that was almost as expensive as Stanford, and all of my working-class parents’ savings were being spent on my college tuition. After six months, I couldn’t see the value in it. I had no idea what I wanted to do with my life and no idea how college was going to help me figure it out. And here I was spending all of the money my parents had saved their entire life. So I decided to drop out and trust that it would all work out OK. It was pretty scary at the time, but looking back it was one of the best decisions I ever made. The minute I dropped out I could stop taking the required classes that didn’t interest me, and begin dropping in on the ones that looked interesting.

17年后，我真的进了大学。当时我很天真，选了一所学费几乎和斯坦福大学一样昂贵的学校，当工人的养父母倾其所有的积蓄为我支付了大学学费。读了六个月后，我却看不出上学有什么意义。我既不知道自己这一生想干什么，也不知道大学是否能够帮我弄明白自己想干什么。这时，我就要花光父母一辈子节省下来的钱了。所以，我决定退学，并且坚信日后会证明我这样做是对的。当年做出这个决定时心里直打鼓，但现在回想起来，这还真是我有生以来做出的最好的决定之一。从退学那一刻起，我就可以不再选那些我毫无兴趣的必修课，开始旁听一些看上去有意思的课。

It wasn’t all romantic. I didn’t have a dorm room, so I slept on the floor in friends’ rooms, I returned coke bottles for the 5 deposits to buy food with, and I would walk the 7 miles across town every Sunday night to get one good meal a week at the Hare Krishna temple. I loved it. And much of what I stumbled into by following my curiosity and intuition turned out to be priceless later on. Let me give you one example:

那些日子一点儿都不浪漫。我没有宿舍，只能睡在朋友房间的地板上。我去退还可乐瓶，用那五分钱的押金来买吃的。每个星期天晚上我都要走七英里，到城那头的黑尔科里施纳礼拜堂去，吃每周才能享用一次的美餐。我喜欢这样。我凭借好奇心和直觉所干的这些事情，有许多后来都证明是无价之宝。我给大家举个例子:

Reed College at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.

当时，里德学院的书法课大概是全国最好的。校园里所有的公告栏和每个抽屉标签上的字都写得非常漂亮。当时我已经退学，不用正常上课，所以我决定选一门书法课，学学怎么写好字。我学习写带短截线和不带短截线的印刷字体，根据不同字母组合调整其间距，以及怎样把版式调整得好上加好。这门课太棒了，既有历史价值，又有艺术造诣，这一点科学就做不到，而我觉得它妙不可言。

None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, its likely that no personal computer would have them. If I had never dropped out, I would have never dropped in on this calligraphy class, and personal computers might not have the wonderful typography that they do. Of course it was impossible to connect the dots looking forward when I was in college. But it was very, very clear looking backwards ten years later.

当时我并不指望书法在以后的生活中能有什么实用价值。但是，十年之后，我们在设计第一台 Macintosh 计算机时，它一下子浮现在我眼前。于是，我们把这些东西全都设计进了计算机中。这是第一台有这么漂亮的文字版式的计算机。要不是我当初在大学里偶然选了这么一门课，Macintosh 计算机绝不会有那么多种印刷字体或间距安排合理的字号。要不是 Windows 照搬了 Macintosh，个人电脑可能不会有这些字体和字号。要不是退了学，我决不会碰巧选了这门书法课，个人电脑也可能不会有现在这些漂亮的版式了。当然，我在大学里不可能从这一点上看到它与将来的关系。十年之后再回头看，两者之间的关系就非常、非常清楚了。

Again, you can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.

你们同样不可能从现在这个点上看到将来；只有回头看时，才会发现它们之间的关系。所以，要相信这些点迟早会连接到一起。你们必须信赖某些东西——直觉、归宿、生命，还有业力，等等。这样做从来没有让我的希望落空过，而且还彻底改变了我的生活。

My second story is about love and loss.

I was lucky — I found what I loved to do early in life. Woz and I started Apple in my parents garage when I was 20. We worked hard, and in 10 years Apple had grown from just the two of us in a garage into a $2 billion company with over 4000 employees. We had just released our finest creation — the Macintosh — a year earlier, and I had just turned 30. And then I got fired. How can you get fired from a company you started? Well, as Apple grew we hired someone who I thought was very talented to run the company with me, and for the first year or so things went well. But then our visions of the future began to diverge and eventually we had a falling out. When we did, our Board of Directors sided with him. So at 30 I was out. And very publicly out. What had been the focus of my entire adult life was gone, and it was devastating.

我的第二个故事是关于好恶与得失。幸运的是，我在很小的时候就发现自己喜欢做什么。我在 20 岁时和沃兹（Woz，苹果公司创始人之一 Wozon 的昵称——译注）在我父母的车库里办起了苹果公司。我们干得很卖力，十年后，苹果公司就从车库里我们两个人发展成为一个拥有 20 亿元资产、4000 名员工的大企业。那时，我们刚刚推出了我们最好的产品——Macintosh 电脑——那是在第 9 年，我刚满 30 岁。可后来，我被解雇了。你怎么会被自己办的公司解雇呢？是这样，随著苹果公司越做越大，我们聘了一位我认为非常有才华的人与我一道管理公司。在开始的一年多里，一切都很顺利。可是，随后我俩对公司前景的看法开始出现分歧，最后我俩反目了。这时，董事会站在了他那一边，所以在 30 岁那年，我离开了公司，而且这件事闹得满城风雨。我成年后的整个生活重心都没有了，这使我心力交瘁。

I really didn’t know what to do for a few months. I felt that I had let the previous generation of entrepreneurs down – that I had dropped the baton as it was being passed to me. I met with David Packard and Bob Noyce and tried to apologize for screwing up so badly. I was a very public failure, and I even thought about running away from the valley. But something slowly began to dawn on me — I still loved what I did. The turn of events at Apple had not changed that one bit. I had been rejected, but I was still in love. And so I decided to start over.

一连几个月，我真的不知道应该怎么办。我感到自己给老一代的创业者丢了脸——因为我扔掉了交到自己手里的接力棒。我去见了戴维帕卡德（David Packard，惠普公司创始人之一—译注）和鲍勃诺伊斯（Bob Noyce，英特尔公司创建者之一—译注），想为把事情搞得这么糟糕说声道歉。这次失败弄得沸沸扬扬的，我甚至想过逃离硅谷。但是，渐渐地，我开始有了一个想法——我仍然热爱我过去做的一切。在苹果公司发生的这些风波丝毫没有改变这一点。我虽然被拒之门外，但我仍然深爱我的事业。于是，我决定从头开始。

I didn’t see it then, but it turned out that getting fired from Apple was the best thing that could have ever happened to me. The heaviness of being successful was replaced by the lightness of being a beginner again, less sure about everything. It freed me to enter one of the most creative periods of my life.

During the next five years, I started a company named NeXT, another company named Pixar, and fell in love with an amazing woman who would become my wife. Pixar went on to create the worlds first computer animated feature film, Toy Story, and is now the most successful animation studio in the world. In a remarkable turn of events, Apple bought NeXT, I retuned to Apple, and the technology we developed at NeXT is at the heart of Apple’s current renaissance. And Laurene and I have a wonderful family together.

虽然当时我并没有意识到，但事实证明，被苹果公司炒鱿鱼是我一生中碰到的最好的事情。尽管前景未卜，但从头开始的轻松感取代了保持成功的沉重感。这使我进入了一生中最富有创造力的时期之一。在此后的五年里，我开了一家名叫 NeXT 的公司和一家叫皮克斯的公司，我还爱上一位了不起的女人，后来娶了她。皮克斯公司推出了世界上第一部用电脑制作的动画片《玩具总动员》（Toy Story），它现在是全球最成功的动画制作室。世道轮回，苹果公司买下 NeXT 后，我又回到了苹果公司，我们在 NeXT 公司开发的技术成了苹果公司这次重新崛起的核心。我和劳伦娜（Laurene）也建立了美满的家庭。

I’m pretty sure none of this would have happened if I hadn’t been fired from Apple. It was awful tasting medicine, but I guess the patient needed it. Sometimes life hits you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that kept me going was that I loved what I did. You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

我确信，如果不是被苹果公司解雇，这一切决不可能发生。这是一剂苦药，可我认为苦药利于病。有时生活会当头给你一棒，但不要灰心。我坚信让我一往无前的唯一力量就是我热爱我所做的一切。所以，一定得知道自己喜欢什么，选择爱人时如此，选择工作时同样如此。工作将是生活中的一大部分，让自己真正满意的唯一办法，是做自己认为是有意义的工作；做有意义的工作的唯一办法，是热爱自己的工作。你们如果还没有发现自己喜欢什么，那就不断地去寻找，不要急于做出决定。就像一切要凭著感觉去做的事情一样，一旦找到了自己喜欢的事，感觉就会告诉你。就像任何一种美妙的东西，历久弥新。所以说，要不断地寻找，直到找到自己喜欢的东西。不要半途而废。

My third story is about death.

When I was 17, I read a quote that went something like: “If you live each day as if it was your last, someday you’ll most certainly be right.” It made an impression on me, and since then, for the past 33 years, I have looked in the mirror every morning and asked myself: “If today were the last day of my life, would I want to do what I am about to do today?” And whenever the answer has been “No” for too many days in a row, I know I need to change something.

我的第三个故事与死亡有关。17岁那年，我读到过这样一段话，大意是：“如果把每一天都当作生命的最后一天，总有一天你会如愿以偿。”我记住了这句话，从那时起，33 年过去了，我每天早晨都对著镜子自问：“假如今天是生命的最后一天，我还会去做今天要做的事吗？”如果一连许多天我的回答都是“不”，我知道自己应该有所改变了。

Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life. Because almost everything — all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.

让我能够做出人生重大抉择的最主要办法是，记住生命随时都有可能结束。因为几乎所有的东西——所有对自身之外的希求、所有的尊严、所有对困窘和失败的恐惧——在死亡来临时都将不复存在，只剩下真正重要的东西。记住自己随时都会死去，这是我所知道的防止患得患失的最好方法。你已经一无所有了，还有什么理由不跟著自己的感觉走呢？

About a year ago I was diagnosed with cancer. I had a scan at 7:30 in the morning, and it clearly showed a tumor on my pancreas. I didn’t even know what a pancreas was. The doctors told me this was almost certainly a type of cancer that is incurable, and that I should expect to live no longer than three to six months. My doctor advised me to go home and get my affairs in order, which is doctor’s code for “prepare to die.” It means to try and tell your kids everything you thought you’d have the next 10 years to tell them in just a few months. It means to make sure everything is buttoned up so that it will be as easy as possible for your family. It means to say your goodbyes.

I lived with that diagnosis all day. Later that evening I had a biopsy, where they stuck an endoscope down my throat, through my stomach into my intestines, put a needle into my pancreas and got a few cells from the tumor. I was sedated, but my wife, who was there, told me that when they viewed the cells under a microscope the doctors started crying because it turned out to be a very rare form of pancreatic cancer that is curable with surgery. I had the surgery and, thankfully, I’m fine now.

一年前，我被诊断出癌症。我在早上七点半作断层扫描，在胰脏清楚出现一个肿瘤，我连胰脏是什么都不知道。医生告诉我，那几乎可以确定是一种不治之症，我大概活不到三到六个月了。医生建议我回家，好好跟亲人们聚一聚，这是医生对临终病人的标准建议。那代表你得试着在几个月内把你将来十年想跟小孩讲的话讲完。那代表你得把每件事情搞定，家人才会尽量轻松。那代表你得跟人说再见了。
我整天想着那个诊断结果，那天晚上做了一次切片，从喉咙伸入一个内视镜，从胃进肠子，插了根针进胰脏，取了一些肿瘤细胞出来。我打了镇静剂，不醒人事，但是我老婆在场。她后来跟我说，当医生们用显微镜看过那些细胞后，他们都哭了，因为那是非常少见的一种胰脏癌，可以用手术治好。所以我接受了手术，康复了。

This was the closest I’ve been to facing death, and I hope it’s the closest I get for a few more decades. Having lived through it, I can now say this to you with a bit more certainty than when death was a useful but purely intellectual concept: No one wants to die. Even people who want to go to heaven don’t want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention of Life. It’s Life’s change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it’s quite true.

这是我最接近死亡的时候，我希望那会继续是未来几十年内最接近的一次。经历此事后，我可以比之前死亡只是抽象概念时要更肯定告诉你们下面这些：

没有人想死。即使那些想上天堂的人，也想活着上天堂。但是死亡是我们共有的目的地，没有人逃得过。这是注定的，因为死亡简直就是生命中最棒的发明，是生命变化的媒介，送走老人们，给新生代留下空间。现在你们是新生代，但是不久的将来，你们也会逐渐变老，被送出人生的舞台。抱歉讲得这么戏剧化，但是这是真的。

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

你们的时间有限，所以不要浪费时间活在别人的生活里。不要被信条所惑——盲从信条就是活在别人思考的结果里。不要让别人的意见淹没了你内在的心声。最重要的，拥有跟随内心与直觉的勇气，你的内心与直觉多少已经知道你真正想要成为什么样的人。任何其它事物都是次要的。

When I was young, there was an amazing publication called The Whole Earth Catalog, which was one of the “bibles” of my generation. It was created by a fellow named Stewart Brand not far from here in Menlo Park, and he brought it to life with his poetic touch. This was in the late 60s, before personal computers and desktop publishing, so it was all made with typewriters, scissors, and Polaroid cameras. It was sort of like Google in paperback form, 35 years before Google came along. It was idealistic, overflowing with neat tools and great notions.

在我年轻时，有本神奇的杂志叫做《Whole Earth Catalog》，当年我们很迷这本杂志。那是一位住在离这不远的Menlo Park的Stewart Brand发行的，他把杂志办得很有诗意。那是1960年代末期，个人计算机跟桌上出版还没发明，所有内容都是打字机、剪刀跟拍立得相机做出来的。杂志内容有点像印在纸上的Google，在Google出现之前35年就有了：理想化，充满新奇工具与神奇的注记。

Stewart and his team put out several issues of The Whole Earth Catalog, and then when it had run its course, they put out a final issue. It was the mid-1970s, and I was your age. On the back cover of their final issue was a photograph of an early morning country road, the kind you might find yourself hitchhiking on if you were so adventurous. Beneath it were the words: “Stay Hungry. Stay Foolish.” It was their farewell message as they signed off. Stay Hungry. Stay Foolish. And I’ve always wished that for myself. And now, as you graduate to begin anew, I wish that for you.

Stay Hungry. Stay Foolish.

Thank you all very much.

Stewart跟他的出版团队出了好几期《Whole Earth Catalog》，然后出了停刊号。当时是1970年代中期，我正是你们现在这个年龄的时候。在停刊号的封底，有张早晨乡间小路的照片，那种你去爬山时会经过的乡间小路。在照片下有行小字：求知若饥，虚心若愚。那是他们亲笔写下的告别讯息，我总是以此自许。当你们毕业，展开新生活，我也以此期许你们。

求知若饥，虚心若愚。

非常谢谢大家。

/*年轻TMD就是好*/

为你的博客打造iphone版本

Fri, 26 Aug 2011 03:03:13 +0000

一直在用一个插件-MobilePress，这个插件的功能是让你的博客在手持设备上显示出更适合手机浏览的版本，MobilePress会在网站的根目录下生成一个wap的文件夹，里面包含了手机版的所有内容，如果你想在电脑端查看的话只需要在你博客地址后面加/wap就可以看到手持设备上的版本，即使你把插件停用仍然可以正常访问。我本来打算在robots.txt屏蔽掉wap这个文件夹，后来想了一下索性就先留着，当一个抓取的测试案例也不错哈。

现在我撤掉了MobilePress这个插件，换上了WPtouch，这个插件的介绍说可以让你的博客在iphone、Android甚至其他平台的手机上显示出一个优雅的版本，我初步测试了一下只有iphone可以完美显示，虽然我添加了其他浏览器的user-agent，但是任然无法达到效果，这不能阻止我像苹果靠拢，即使小乔已经不干了。

你只需要在插件安装后台搜索WPtouch就可以顺利的找到这个插件，当你安装完毕你会发现这个插件是英文版的，是的，暂时还没有中文版，你的人生又一次面临了挑战，善用梯子爬Wall的你一定已经习惯了这种英文，你只需要花费不到十分钟的时间就会学会使用这个插件，当学会了以后你会发现这个过程是一件多么美妙的事情。

插件可以让你自行控制导航的输出，简单的样式调整，还有可爱的google adsense添加，让你的广告无处不在，如果你有需求你甚至可以直接去修改它的主题，就像你修改web版的主题一样，更多功能还等你自己去发现，下面来看看在你的苹果设备上会出现什么样的画面吧。

下面这张图是MobilePress显示的样子，仅作对比。

我只是在pc端模拟的ios环境，并不是真的iphone啦，不过在iphone上的效果比pc端要优雅的多哇，不知你心动了没？

/*每一天都是心的开始*/

GTD软件推荐

Fri, 19 Aug 2011 03:20:11 +0000

你是不是觉得每天生活的很没有方向，总是想做一些事情却又不知道从哪里开始，如果你是这种状态建议赶快去接触一下GTD吧，或许这样你的生活就会变得更加美好起来。

一个好的GTD规划可以让你事半功倍，一个好的GTD软件可以让工作效率再次提速却不会出现事故，最方便的GTD物理工具就是一支笔、一个纸质笔记本和一个小小的台历，这也是曾经的父辈祖辈们乐于采取的方式。作为每天都会坐在电脑前的苦逼it人员，我们必须找到一些数字利器来记录大脑里的暗潮涌动。

1.Evernote，这是一款很强大的软件，Evernote 能帮你记住你想到的，看到的和体验到的一切。你可以用它记录一条文字信息，保存一个网页，保存一张照片，截取你的屏幕。Evernote 能安全的保存这一切。虽然免费版在上传大小上有限制，但是每月60M也足够满足你脑海的需求了，除非你是一个图片控，那么建议你找个同步网盘辅助吧，我装了却因为负载而没有使用，所以不放图了。

还有一点也是很重要的一点Evernote支持Mac系统，这对于那些有意向转向Mac的童鞋可是很好的哇。

缺点个人认为就是软件太大了，还要注册，功能多自然带来的操作负载，~~重要的一点是在别人的电脑上你还得把Evernote下载下来才能看到你的笔记，这个很纠结~~。

2.BooguNote，这是我一直在用的一款GTD和思想记录软件，也是我见过最小的一款，总共才不到700K，上手度很强，操作超简单，一学就会，支持快捷键，让你的思想飞起来~~

不过它不支持Mac，这是一个遗憾,Win系统强烈推荐，弄个同步网盘哪里都能用。

3.Doit.im，这是一个线上的GTD程序，很多人都在使用，包括我，完美解决了跨平台问题，当然这只是一个GTD程序，保存图片神马的还是弄个网盘自己逍遥去吧。用来记录想法和笔记也不错。

4.GeeTeeDee,这是一个界面很清新的软件，虽然是英文版，但是聪明的你在一分钟之内一定能够顺利的操作这个软件，这才是一个好软件应该做到的，软件解压完毕是12M，对我来说刚刚好，但是有一点不好，如果你数据很多，那么就会生成一个很大的xml文件，我没有试过文件很大载入速度会不会增加，但是一个文件很大确实是很难接受的。

5.麦库，还没有发布正式版，盛大的一个仿evernote软件，因为是仿的所以也不多说什么了，安装文件现在是很小，不知道以后会不会大。

应该还有其他诸如google calendar此类的GTD工具，其实都大同小异，只要找到自己适合的就行。

/*让你的生活飞起来吧*/

LaoZhuHome Beta

如何在ios桌面添加web站点图标

相关日志-小站地图为你展开

使用CSS3制作loading效果

相关日志-小站地图为你展开

用CSS3画一个iphone4

相关日志-小站地图为你展开

再见

相关日志-小站地图为你展开

屁熊猫

相关日志-小站地图为你展开

偶尔玩玩

相关日志-小站地图为你展开

IT人也经常读错的词

相关日志-小站地图为你展开

PR值再次更新

相关日志-小站地图为你展开

标签语义化-书之解释

语义化-书之网页说

目录章节一

目录章节二

目录章节三

相关日志-小站地图为你展开

visited的妙用

相关日志-小站地图为你展开

苏宁易购开始屏蔽一淘网

相关日志-小站地图为你展开

谷歌字体API使用小记

相关日志-小站地图为你展开

十一国庆logo动画

相关日志-小站地图为你展开

写给麻花腾

相关日志-小站地图为你展开

CSS3苏宁易购logo

相关日志-小站地图为你展开

data:URI scheme

相关日志-小站地图为你展开

苏宁易购发展趋势分析二

相关日志-小站地图为你展开

乔布斯2005哈佛演讲

相关日志-小站地图为你展开

为你的博客打造iphone版本

相关日志-小站地图为你展开

GTD软件推荐

相关日志-小站地图为你展开