Daniel Wang

Google与LBS

2011-01-21T21:04:00.002+13:00

今天在网上看到一篇文章：LBS就是Check-in,是不是街旁的软文暂且不说，我并不认同这个观点，微博上也有很多人一直在说LBS，今天正好写一写，为什么要忘记Google呢？
好吧每个认识我的人都知道我是铁杆的G粉，可以为了Chrome的发布等到凌晨三点，自然我对Google的产品有偏爱，比如Latitude, 你可以看到我Blog右上角有一个“行走”的页面，是一个Latitude的小widget，可以随时随地看到在哪儿，而这些都不需要我去check in，它是自动的，只是和check in一样的是：我每一秒的行踪都会被获取并被记录到数据库中，所以它会最终根据这些数据来分析出我的这些习惯（见图）。

说这个的原因是我在开始用Latitude的时候，还没有foursquare这回事（Google于2005年收购了dodgeball后就雪藏了它，dodgeball的一个创始人愤而离开后来又创建了foursquare），既然对于网站来说，我无需check in就可以获取数据，用户check in的动力在哪儿呢？foursquare开始火起来是由于它的勋章体系，但是！foursquare不会永远火下去，凡是依靠荣誉体系来满足用户的虚荣心的产品都不可能成为一种真正的商业模式，比如原创文学，比如字幕组，etc.
互联网发展到今天，LBS已经不是哪家网站的专属，技术的进步将会推动产品的进步，继而催生新的盈利模式（HTML5已经有了 geolocation，你可以使用chrome访问google maps体验），但这个模式绝不是check in，check in是毫无价值的，有价值的是check in背后的数据！
参照我以前的一篇文章，Google已经把这些数据与既有广告产品进行结合，从而使广告的投放更加精准，记得Google是靠什么起家的吗？没错是网络广告，100亿美元的年收入，为什么？可选择的精准投放、可计算的ROI。
仅仅是广告吗？每个产品都可以从位置数据中受益，提升用户体验与开发新的功能。
在以前，我们对于一个用户的访问地点的获取是通过IP地址，那么以后呢？就目前来说，Google通过四种方式可以获取用户的访问地点：1.GPS(即你的智能手机中的GPS模块); 2.你机器的IP地址；3.用html5的geolocation来收集你的MAC地址和你周围的WIFI网络（不需要靠街景小车再收集，你可以在这里体验是如何收集的<需要安装Gears>，如果数据不准你还可以在这里提交修改）; 4.以及已经发布尚未普及的Google WIFI（目前已经在国外很多机场提供，甚至是在飞机上）。
你所有脑袋中臆想的LBS应用场景都是在使用背后的数据，而对于Foursquare来说，开放这些数据给第三方使之能够开发新的产品是必然的（google已经开放了latitude的API），签到是一个很简单的产品功能，太容易模仿，梅姐在负责Google这方面还不至于连这玩意儿都弄不出(看看这个：google places)，据说Google是要给美国商户们发放800万台免费的移动设备来服务于使用他们的签到功能的客户，目前Latitude有300万活跃用户，而foursquare才100多万，鹿死谁手还很难说。
废话了半天，总结起来三句话：
1.位置数据的价值远远大于一个check in
2.满足于用户的check in的产品必死！
3.每家互联网公司都需要跟随LBS的浪潮，但决不仅仅是去做一个check in的产品，它无力承担这种变革

LBS概况

2011-01-21T21:03:00.000+13:00

LBS （Location Based Service，基于地理位置的服务），是通过电信运营商的无线网络或者外部定位方式（GPS）获取移动终端的位置信息，在GIS（Geographic Information System，地理信息系统）的支持下提供的一种增值业务

LBS现状

国内外百花齐放
LBS被认为是移动领域的杀手级业务，普遍被行业看好，也有众多公司试水这一领域。在国外，2009年3月成立的Foursquare 是LBS的鼻祖，仅用一年时间就有了100万的用户群，甚至传言要被雅虎以一亿美金收购

国内的LBS市场已经热的发烫，2010年初，拉手网、玩转四方、街旁等创业公司纷纷涌现，网易、腾讯、新浪等门户公司也纷纷投入到LBS的研发中，甚至中国移动等传统通信厂商也开始试水LBS。在投资方面，同众多模仿国外成功的产品一样，也能拿到可观的投资
技术成熟，商业模式尚不明确
LBS相对其他移动互联网产品，技术门槛相对较低，操作起来简单有效，现在一些智能手机利用GPS的定位已经可以达到10米内的精度，因此可以准确定位到某一处商家，某一栋大楼，这在靠基站定位的时代是不可想象的
由于本身不具有目的性和黏性，LBS一般都只作为一种工具出现在某种产品中。通过LBS，用户不需要搜索和查找就可以在地图上快速定位自己的位置，在这个位置上寻找自己感兴趣的内容
用户和商家在接受，LBS在广泛铺路
一个成熟的LBS产业链条，需要“用户-LBS提供商-商家”的完美契合。对比发达国家，国内的智能机比例还较低，尤其是LBS现在普遍需要的精确 GPS定位。现在玩LBS的，都是比较狂热的手机玩家或高端用户，而对于普通用户来说，LBS还只是个概念，听别人在说，自己从未看到；对于商家来说，团购是实实在在的给我带来了大量用户，而眼前这个小玩意能有用么？
( LBS模式分析部分引自 http://www.seo9go.com/post/LBS和GroupOn.html )

LBS模式分析

大概有四类：

一、休闲娱乐型
1. 签到（Check-In）模式：主要是以Foursquare为主，还有一些国外同类服务还有Gowalla、Whrrl等，而国内则有：玩转四方、街旁、开开、多乐趣、在哪等几十家。
该模式的基本特点如下：
1) 用户需要主动签到（Check-In）以记录自己所在的位置
2) 通过积分、勋章以及领主等荣誉激励用户 Check-In，满足用户的虚荣感
3) 通过与商家合作，对获得的特定积分或勋章的用户提供优惠或折扣的奖励，同时也是对商家品牌的营销
4) 过绑定用户的其它社会化工具，以同步分享用户的地理位置信息
5) 通过鼓励用户对地点（商店、餐厅等）进行评价以产生优质内容
该模式的最大挑战在于要培养用户每到一个地点就会签到（Check-In）的(Xi*2)惯。而它的商业模式也是比较明显，可以很好地为商户或品牌进行各种形式的营销与推广。而国内比较活跃的街旁网现阶段则更多地与各种音乐会、展览等文艺活动合作，慢慢向年轻人群推广与渗透，积累用户。
2. 大富翁游戏模式：国外的代表是Mytown，国内则是16Fun。主旨是游戏人生，可以让用户利用手机购买现实地理位置里的虚拟房产与道具，并进行消费与互动等将现实和虚拟真正进行融合的一种模式。这种模式的特点是更具趣味性，可玩性与互动性更强，比Check-In模式更具粘性，但是由于需要对现实中的房产等地点进行虚拟化设计，开发成本较高，并且由于地域性过强导致覆盖速度不可能很快。在商业模式方面，除了借鉴Check-In模式的联合商家营销外，还可提供增值服务，以及类似第二人生（Second Life）的植入广告等。

二、生活服务型
1. 周边生活服务的搜索：以点评网或者生活信息类网站与地理位置服务结合的模式，代表大众点评网、台湾的“折扣王”等。主要体验在于工具性的实用特质，问题在于信息量的积累和覆盖面需要比较广泛。
2. 与旅游的结合：旅游具有明显的移动特性和地理属性，LBS和旅游的结合是十分切合的。分享攻略和心得体现了一定的社交性质，代表是游玩网。
3. 会员卡与票务模式：实现一卡制，捆绑多种会员卡的信息，同时电子化的会员卡能记录消费(Xi*2)惯和信息，充分的使用户感受到简捷的形式和大量的优惠信息聚合。代表是国内的“Mokard（M卡）”、还有票务类型的Eventbee。这些移动互联网化的应用正在慢慢渗透到生活服务的方方面面，使我们的生活更加便利与时尚。
三、社交型
1. 地点交友，即时通讯：不同的用户因为在同一时间处于同一地理位置构建用户关键，代表是兜兜友。
2. 以地理位置为基础的小型社区：地理位置为基础的小型社区，代表是“区区小事”
四、商业型
1. LBS+团购：两者都有地域性特征，但是团购又有其差异性，如何结合？美国的GroupTabs给我们带来了新的想象： GroupTabs的用户到一些本地的签约商家，比如一间酒吧，到达后使用GroupTabs的手机应用进行Check In。当Check In的数量到达一定数量后，所有进行过Check In的用户就可以得到一定的折扣或优惠。
2. 优惠信息推送服务：Getyowza就为用户提供了基于地理位置的优惠信息推送服务,Getyowza的盈利模式是通过和线下商家的合作来实现利益的分成。
店内模式 : ShopKick将用户吸引到指定的商场里，完成指定的行为后便赠送其可兑换成商品或礼券的虚拟点数。
（引用完）

LBS的本质“S”

“中外的LBS用户行为有很大的区别，中国的商业化行为更多点。国外用户是真正会去做签到而签到，因为他们觉得这是我希望做的，我有这样奖牌，我觉得很好，而不是签到为了要什么东西。国内用户签到几次后，再往后签到就必须要得到什么。”——GyPSii全球副总裁兼亚太区总裁Jeff Lin。

经过一个短暂的高潮后，签到开始急速降(Wen*1)，LBS的前半段 LB虽然简单有效，却没有黏性，更多的人也意识到“我在哪”之类的消息没有实质的作用。现在，各家LBS都推出自己特色的“S”，主要有以下几种方式涉及LBS领域

LBS作为自身业务的辅助
这是一块很大的市场，而投入又很少，因此凡是有一定规模的公司都会尝试进入这个领域。而最保险的方法，就是依旧用自有业务做招牌，用LBS来更好的服务于自家产品，一个很典型的例子就是大众点评网
还有一类就是游戏型公司，将地理位置的定位融合在游戏中，增加了游戏的玩法，如下面这个将Google maps和吃豆子游戏结合起来的新玩法

从LBS创业
LBS本身技术和成本很低，所以创业难度也相对较低，有几种模式可以获得比较好的效果
1. 小游戏型。用游戏策略弥补了签到的黏性不足，并且手机游戏与LBS现有用户有较大的重合，游戏作为黏性的保障后，再继续发掘其他商业模式，签到奖励徽章等都是简单的游戏策略
2. 整合资源型。典型的应用是团购+LBS，由于团购网站的黏性不足，用户很容易接受从其他途径获取团购信息，和团购信息相同的还有打折信息、优惠券等
传统行业的解决方案
在网络上争的不可开交的领域，在传统行业上却往往异常冷清，而许多传统业务也刚好适合LBS发挥作用
1. 公交、出租管理。出租车上已经有GPS导航等，但现有条件还没有很好的运用，更别说公交了，许多地方仍然采用非常传统的方式进行管理，效率低，出错率高。在公交上利用LBS实现对车辆位置的监控，自动报站，编排与加车；在出租车上用LBS实现监控调度，意外报警，甚至和手机终端一起实现智能打车
2. 传统货运管理。除了对货车的监控，还可以根据线路拥堵情况进行调度，危险路段的提醒、报警等，还可以通过后台数据处理，找到最优时间与路线，提高货运效率
3. 广告业务。最有效率的广告莫过与精确投放的广告了，除了按内容投放，LBS还可以实现按地点投放，如果用户订阅了此类广告，此广告的效果就可以翻番
4. 物流业。现有物流业大部分还在用增加人力来实现“快递”，送件-公司-取件，在往返公司获取信息时浪费了很多的时间。如快递公司能推出一款APP，实现在APP上的取件预约，送件提醒，以及在送货员身上的智能终端，实现就近取件，效率无疑会提高很多
LBS的本土化创新
和国外相比，国内在智能机占有率，定位精度，主流人群和用户行为目的上均有差别，单纯照搬国外模式在国内会遇到瓶颈——聚众尝鲜后被冷落，国内有很大的市场潜力，如果妥善挖掘，将会带来不小的效益，如被广泛看好的LBS+SNS+Game模式

Android 携LBS走向平民
LBS相比其他产品，有一个智能机的门槛，而LBS要想有良好的精度甚至要GPS的支持，Android系统的智能手机无疑是LBS的最好载体。未来以智能机为前提条件的应用市场将由互联网巨头和终端硬件商来引领，和现有的硬件商或平台商寻求合作，不仅能占有“最合适”的用户，更能给自己带来良好发展
如何在LBS领域形成优势？
这个领域本身没有多少竞争，因为大家普遍都找不到合适的“S”，所以才会将一堆人挤在一起，看起来就像一堆人在争一块蛋糕。和团购网站类似，用户在团购网站的侧重点在产品和服务上，LBS初期的优势将集中在“S”上，有自身积累的企业在这方面有优势，能提前走出这块拥挤的区域，而其他创业型公司，只有靠自己的想法和长远目光，才能赢得发展
就像业界普遍不看好Facebook和Groupon入华一样，因为这些在国内已经有很多了，本身的技术优势又不明显，如果再没有资本优势，和土生土长的创业型公司没有什么分别
对商家这些潜在的客户来说，他们最关注的还是LBS能带来多少实际的效益，其次才会品牌和技术。有一点或许是很多人都忽略的——客户体验，团购网站虽然用户体验好，但客户体验并不好，如何帮商家等客户达成最优解，将是一个崭露头脚的好方法

CSS3 Please

2010-03-14T13:59:00.001+13:00

CSS3 Please一个在线生成跨浏览器的CSS3代码的网站，很直观，也很方便，现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。即将支持的还有其他的一些 css transform。

用法很简单，点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

即刻体验：http://css3please.com/

事实上，现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性，而是采用自己的私有属性，这显然增加了开发的复杂度，也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

What really happens when you navigate to a URL

2010-02-26T15:06:00.000+13:00

原作者：
来源What really happens when you navigate to a URL
译者litfresh

作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。
本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～

1. 首先嘛，你得在浏览器里输入要网址:

2. 浏览器查找域名的IP地址

导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

DNS递归查找如下图所示：

DNS有一点令人担忧，这就是像wikipedia.org 或者 facebook.com这样的整个域名看上去只是对应一个单独的IP地址。还好，有几种方法可以消除这个瓶颈：

循环 DNS 是DNS查找时返回多个IP时的解决方案。举例来说，Facebook.com实际上就对应了四个IP地址。
负载平衡器 是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能负载平衡器。
地理 DNS 根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
Anycast 是一个IP地址映射多个物理主机的路由技术。美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。

大多数DNS服务器使用Anycast来获得高效低延迟的DNS查找。

3. 浏览器给web服务器发送一个HTTP请求

因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从中读取。
所以，浏览器将把一下请求发送到Facebook所在的服务器：

GET http://facebook.com/ HTTP/1.1
 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
 Accept-Encoding: gzip, deflate
 Connection: Keep-Alive
 Host: facebook.com
 Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET 这个请求定义了要读取的URL： “http://facebook.com/”。浏览器自身定义 (User-Agent 头)，和它希望接受什么类型的相应 (Accept and Accept-Encoding 头). Connection头要求服务器为了后边的请求不要关闭TCP连接。
请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。

用来看原始HTTP请求及其相应的工具很多。作者比较喜欢使用fiddler，当然也有像FireBug这样其他的工具。这些软件在网站优化时会帮上很大忙。

除了获取请求，还有一种是发送请求，它常在提交表单用到。发送请求通过URL传递其参数(e.g.: http://robozzle.com/puzzle.aspx?id=85)。发送请求在请求正文头之后发送其参数。

像“http://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“http: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。

4. facebook服务的永久重定向响应

图中所示为Facebook服务器发回给浏览器的响应：

HTTP/1.1 301 Moved Permanently
 Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
 pre-check=0
 Expires: Sat, 01 Jan 2000 00:00:00 GMT
 Location: http://www.facebook.com/
 P3P: CP="DSP LAW"
 Pragma: no-cache
 Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
 path=/; domain=.facebook.com; httponly
 Content-Type: text/html; charset=utf-8
 X-Cnection: close
 Date: Fri, 12 Feb 2010 05:09:51 GMT
 Content-Length: 0

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.facebook.com/” 而非“http://facebook.com/”。

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。
其中一个原因跟搜索引擎排名有关。你看，如果一个页面有两个地址，就像http://www.igoro.com/ 和http://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。
还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。

5. 浏览器跟踪重定向地址

现在，浏览器知道了“http://www.facebook.com/”才是要访问的正确地址，所以它会发送另一个获取请求：

GET http://www.facebook.com/ HTTP/1.1
 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
 Accept-Language: en-US
 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
 Accept-Encoding: gzip, deflate
 Connection: Keep-Alive
 Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
 Host: www.facebook.com

头信息以之前请求中的意义相同。

6. 服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。
这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西- 就像作者博客这样简单的网站，何况像facebook那样访问量大的网站呢！

Web 服务器软件
web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY...）。举个最简单的例子，需求处理可以以映射网站地址结构的文件层次存储。像http://example.com/folder1/page1.aspx这个地址会映射/httpdocs/folder1/page1.aspx这个文件。web服务器软件可以设置成为地址人工的对应请求处理，这样 page1.aspx的发布地址就可以是http://example.com/folder1/page1。
请求处理
请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。

所有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会有一个SQL数据库来存储数据，存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案有：sharding （基于主键值讲数据表分散到多个数据库中），复制，利用弱语义一致性的简化数据库。

委托工作给批处理是一个廉价保持数据更新的技术。举例来讲，Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新（作者猜测是这样的，改功能如何完善不得而知）。批处理作业更新会导致一些不太重要的数据陈旧，但能使数据更新耕作更快更简洁。

7. 服务器发回一个HTML响应

图中为服务器生成并返回的响应：

HTTP/1.1 200 OK
 Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
 pre-check=0
 Expires: Sat, 01 Jan 2000 00:00:00 GMT
 P3P: CP="DSP LAW"
 Pragma: no-cache
 Content-Encoding: gzip
 Content-Type: text/html; charset=utf-8
 X-Cnection: close
 Transfer-Encoding: chunked
 Date: Fri, 12 Feb 2010 09:05:55 GMT
 
 2b3��������T�n�@����[...]

整个响应大小为35kB，其中大部分在整理后以blob类型传输。
内容编码头告诉浏览器整个响应体用gzip算法进行压缩。解压blob块后，你可以看到如下期望的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" id="facebook" class=" no_js">
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-language" content="en" />
 ...

关于压缩，头信息说明了是否缓存这个页面，如果缓存的话如何去做，有什么cookies要去设置（前面这个响应里没有这点）和隐私信息等等。

请注意报头中把Content-type设置为“text/html”。报头让浏览器将该响应内容以HTML形式呈现，而不是以文件形式下载它。浏览器会根据报头信息决定如何解释该响应，不过同时也会考虑像URL扩展内容等其他因素。

8. 浏览器开始显示HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了：

9. 浏览器发送获取嵌入在HTML中的对象

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
下面是几个我们访问facebook.com时需要重获取的几个URL：

图片
http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
…
CSS 式样表
http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
…
JavaScript 文件
http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
…

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...
但不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取。服务器的响应中包含了静态文件保存的期限信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应都可能包含像版本号一样工作的ETag头（被请求变量的实体值），如果浏览器观察到文件的版本 ETag信息已经存在，就马上停止这个文件的传输。

试着猜猜看“fbcdn.net”在地址中代表什么？聪明的答案是"Facebook内容分发网络"。Facebook利用内容分发网络（CDN）分发像图片，CSS表和JavaScript文件这些静态文件。所以，这些文件会在全球很多CDN的数据中心中留下备份。
静态内容往往代表站点的带宽大小，也能通过CDN轻松的复制。通常网站会使用第三方的CDN。例如，Facebook的静态文件由最大的CDN提供商Akamai来托管。
举例来讲，当你试着ping static.ak.fbcdn.net的时候，可能会从某个akamai.net服务器上获得响应。有意思的是，当你同样再ping一次的时候，响应的服务器可能就不一样，这说明幕后的负载平衡开始起作用了。

10. 浏览器发送异步（AJAX）请求

在Web 2.0伟大精神的指引下，页面显示完成后客户端仍与服务器端保持着联系。
以 Facebook聊天功能为例，它会持续与服务器保持联系来及时更新你那些亮亮灰灰的好友状态。为了更新这些头像亮着的好友状态，在浏览器中执行的 JavaScript代码会给服务器发送异步请求。这个异步请求发送给特定的地址，它是一个按照程式构造的获取或发送请求。还是在Facebook这个例子中，客户端发送给http://www.facebook.com/ajax/chat/buddy_list.php一个发布请求来获取你好友里哪个在线的状态信息。
提起这个模式，就必须要讲讲"AJAX"-- “异步JavaScript 和 XML”，虽然服务器为什么用XML格式来进行响应也没有个一清二白的原因。再举个例子吧，对于异步请求，Facebook会返回一些JavaScript的代码片段。

除了其他，fiddler这个工具能够让你看到浏览器发送的异步请求。事实上，你不仅可以被动的做为这些请求的看客，还能主动出击修改和重新发送它们。AJAX请求这么容易被蒙，可着实让那些计分的在线游戏开发者们郁闷的了。（当然，可别那样骗人家~）

Facebook聊天功能提供了关于AJAX一个有意思的问题案例：把数据从服务器端推送到客户端。因为HTTP是一个请求-响应协议，所以聊天服务器不能把新消息发给客户。取而代之的是客户端不得不隔几秒就轮询下服务器端看自己有没有新消息。
这些情况发生时长轮询是个减轻服务器负载挺有趣的技术。如果当被轮询时服务器没有新消息，它就不理这个客户端。而当尚未超时的情况下收到了该客户的新消息，服务器就会找到未完成的请求，把新消息做为响应返回给客户端。

总结一下

希望看了本文，你能明白不同的网络模块是如何协同工作的

Happy Chinese New Year 庚寅年，过年了！

2010-02-17T16:31:00.002+13:00

回家过年的感觉就是过瘾，看Google的中国年doodle也是过年中的一件美事。

Google 的这个中国农历年过得真是中国风俗味十足呀，把过年的几个重要的日子都囊括了，这是 Google 扬言退出中国后的第一个过年。随着 Google 放开 Doodle 的设计，由各国自己捉刀，Google Doodle 的数量大大增加了，有些图标你真不明白什么意思了。但中国的，我们还是明白的，我们还是欢迎的。

腊八节（Laba Rice Porridge Festival）　0122　官方链接

腊月二十八贴窗花（Paper Cut）　0211　官方链接

大年三十辞旧迎新（Chinese New Year's Eve）　0213　官方链接

春节（Chinese New Year）　0214　官方链接

回国第一课 - 翻墙术

2010-02-13T15:43:00.001+13:00

回国一个星期了，facebook, twitter,blogger, picasa 等我日常上的网站全部无法登陆。这就意味着：翻墙越来越重要了，不得不学了。Google一下，马上就有发现，以下为正文。

--------------------------------翻墙五步走--------------------------------

Step 1.下载安装Easy Tor

Easy Tor这是一个软件套装，集成了Vidalia、Tor及Privoxy。
下载链接：Easy Tor
安装、打开Easy Tor后，以上三个软件自动启动。Vidalia界面为英文，没关系,双击托盘vidalia图标打开控制面板，在Settings—— Appearance——Language中，把系统文字改为简体中文。重启Vidalia后界面即变为中文。

Step 2.安装Autoproxy

Autoproxy这是一个Firefox扩展，所以你的浏览器必须为Firefox。比起TorButton，Autoproxy的优点是可以根据网站自动判断是否需要使用代理，所以使用起来非常方便。安装完毕后重启Firefox，会出现一个“添加Autoproxy规则订阅”的窗口，选定它，选择“订阅"。

Step 3.打开Firefox，启动Easy Tor

直接能够成功自然非常好，但如果发现过程中断，在connecting to a relay directory处停滞不前并最终失败。这说明我们有关部门已经针对Tor做了一些处理。道高一尺魔高一丈，我们当然还有办法。因为即使所有已知的 Tor 中继都被屏蔽，也不可能屏蔽所有的网桥。

Step4.获得中继网桥地址

此时请确定你有一个gmail邮箱。用Gmail邮箱写信给bridges@torproject.org，信件内容为：get bridges，主题随意。马上你会收到回信，打开，上面写的IP和端口就是你要的桥。

在Vidalia中Stop Tor。在“设定”——“网络”中选择“我的ISP阻挡了我到Tor的链接”，将邮件中的桥依次添加到下面的框中。

Step 5.重新启动Tor，翻墙成功！

求职

2010-01-29T14:55:00.000+13:00

本人长期工作生活在国外，现因妻子生产，将于下个月回西安定居。渴望在西安继续发展我的职业生涯。

本人2002年毕业于西安电子科技大学通信工程专业，之后留学新西兰，在新西兰惠灵顿维多利亚大学（Victoria University of Wellington）深造就读计算机科学与技术专业。毕业后从业与互联网行业，从事网站开发及产品设计4年。

工作经历

• ProjectX Limited 创新型strarup公司, www.zoomin.co.nz. 网站开发，数据库开发。
• Fairfax Media Limited (澳洲最大的媒体公司)，www.stuff.co.nz, www.nzx.com 策划及互交设计，前端开发。

评价：

• 四年web开发工作经验，熟悉大型互联网网站开发相应技术；
• 丰富UI 和 UX设计经验、有创新能力和较高审美能力；
• 熟悉互联网行业以及新兴技术发展趋势；
• 精通网站优化SEO SMO；
• 出色的英文交流能力，三年英文学习以及四年英文工作环境经验；
• 具备良好心理素质，性格开朗，思路开阔，头脑清晰，手法灵活，有很强团队合作能力；

更多关于我
作品选集
LinkedIn profile
PDF简历

如果对我有兴趣，请发email到daniel@danielwang.cn，我很愿意进一步跟您交流。谢谢！

走人

2010-01-16T12:35:00.003+13:00

Google中国要解散了，十有八九，这两天我非常注意国内外对此事件的评论，以后可能回国以后就用不了google产品了，这对我这个Google重度用户的影响相当之大 .

我目前所用的产品有：reader, map, earth, iGoogle, site, page, blogger, gmail, latitude, doc, translate, adsense, adword, wave, gtalk, picasa, youtube, alert, calendar, feedburner, webmaster, analytics, code, chrome, group...还有很多打算用但是没有用的东西，粗体字的都是我日常天天必须要用的。

图片转载 from blog图党

stuff.co.nz Logo by HTML+CSS

2010-01-15T16:47:00.003+13:00

It's Friday afternoon, I am feeling bored, so spent half hour to built stuff.co.nz logo by pure html+css. It was heaps of fun. Here is the preview and my code, guess left one or right one? From you memory, don't look at stuff.co.nz!

HTML

<div id="logo">
 <span id="text">stuff<span class="dot first">.</span><span class="domain">co</span><span class="dot">.</span><span class="domain">nz</span></span>
 <ul><li id="r"></li><li id="y"></li><li id="g"></li><li id="b"></li><li id="p"></li></ul>
 </div>

CSS

#logo{font-family:tahoma;font-weight:bold; width:235px;}
 #text{font-size:62px;}
 .dot{font-family:Georgia; font-size:36px; letter-spacing:-2px;}
 .first{margin-left:-7px;}
 .domain{font-size:32px; letter-spacing:-1px;}
 ul{margin: -6px 0 0; list-style:none; padding:0}
 li{float:left; width:45px; height:10px;}
 #r{background-color:#C7221F}
 #y{background-color:#F59900}
 #g{background-color:#007C47}
 #b{background-color:#007DCD}
 #p{background-color:#9C1A87}

解读Google中国四大发明logo

2010-01-15T13:56:00.001+13:00

昨天，Google中国主页的logo换成四大发明doodle，很让人费解。

众所周知，Google logo都是在节日或纪念日的时候才会更换的，而中国四大发明既非节日更非什么纪念日，在Google宣布退出中国市场之后放上这个logo，很容易人产生联想。

对于这个logo，不同的人肯定有着不同的解读，我的观点如下：

1、隐喻我们还在为古代四大发明而沾沾自喜不思开放，抑或仿佛退回到四大发明的古代？
2、logo里只留下一个“o”和“g”两个字母，正好是“go”，而且是反过来的“go“，预示着Google真的要go了？有趣的是，杨锦麟在昨天的《有报天天读》里的最后点题之字也是“go”。
3、单独看四大发明图案那几个字母，分别是“go”和“le”，谐音读起来就是“go了”或者“够了”。
4、留待大家补充……

宁与玉碎, 不为瓦全

2010-01-13T14:28:00.009+13:00

Google在自己的博客发表声明，他们在去年12月中期发现有很多来自中国大陆的有针对性的攻击，导致知识产权被盗。

首先，攻击并不是只针对Google，至少还有另外20家来自各行各业的公司都受到了攻击，包括互联网、金融、科技、媒体和化工等等行业，Google也提醒了这些公司，并与美国当局进行合作。

其次，Google有足够的证据证明这些攻击者的目标是人（要和谐）权活动者的Gmail帐户，根据Google的调查攻击者最后还是没有获得他们想要的东西。只有两个Gmail帐户被攻陷，但只取得了有限的数据（比如帐户创建日期）和邮件的主题，而邮件内容都没有泄露。

第三，作为这次调查的一部分，Google发现大量在中国致力于人（还是要和谐）权事业的美国、中国和欧洲的Gmail用户都经常受到攻击，在Google的保护下都完好无损，但也许有用户在收到钓鱼邮件和恶意邮件后电脑会中毒。

Google再次提到自己在2006年发布google.cn是为了让更多中国人民可以享受到Google的服务，Google也可以容忍一定程度的审查。2006年Google曾经提到说他们会仔细监视中国大陆的情况，包括新的法律和对Google服务的限制，如果Google认为无法达到他们认为的底线，那么会重新考虑进入中国的问题。

关键的来了：Google今天决定不想再继续审查google.cn的搜索结果，接下来几周里他们将与中国政府讨论在法律框架下做一个不过滤不审查的搜索引擎！如果不能做到这一点的话，Google认为这就意味着他们要关闭google.cn和在中国大陆的办公室。

这个决定确实很难下，但Google认为这样做的潜在意义非常重大，这完全是美国总部的考虑，而跟中国大陆的谷歌中国员工没有任何关系，他们已经非常努力的在做好足够成功的google.cn了。

我的个人看法：

之前Google总部已经对google.cn颇有微词，但由于李开复极力主张阉割地存在，Google保留了google.cn。他曾经说过

“我们压抑着做更酷、更炫的产品的欲望，努力耕耘最佳中文搜索。”

自从李开复走了，Google China 彻彻底底变成了 Google in China, 谷歌中国没有一个人能说服总部，所以，Google就打算撤离了。

就上面的粗体字部分来看，我几乎可以确认，商谈不会有任何结果，这是政治。很有可能几周后Google就会离开中国了，如果Google真是退出中国，这将是他们做出的历史上最蠢的决定，放弃中国等于放弃半个未来世界！

Nicholas C. Zakas如何面试前端工程师

2010-01-08T16:53:00.002+13:00

Original Post：Interviewing the front-end engineer
Nicholas C. Zakas，2010年1月5日

面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。
有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试（Surviving an interview with me）以及优秀的前面工程师应该具备什么样的素质（What makes a good front end engineer?），而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。

基本知识

我们生活在互联网时代，你想知道的任何事情几乎都能在15分钟内找到相关信息。可是，能找到信息并不等于你会使用它。我认为所有前端工程师至少都应该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜索解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。

少量提问

我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说：

现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。

这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。

解决问题

做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。
考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。

有激情

要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情？实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣？”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。当然，我会让他们详细解释自己提到的技术，以保证他们不是随口说了几个时髦的新词汇。

最后一点

计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几乎没有经验大学毕业生，同样也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。
对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行：你想以后跟这个人在一起共事吗？如果不管为什么，回答是不，那就是不。

免责声明：本文的任何观点与意见都只跟Nicholas C. Zakas有关，与Yahoo!公司、Wrox出版公司、O’Reilly出版公司乃至其他任何人无关。我在这里说的话，仅代表我自己，不代表上述公司。
你可以在这里留言，也可以在你自己的站点上发送一个引用通告。

Creating Triangles in CSS

2010-01-08T15:57:00.002+13:00

Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 40px. To demonstrate here is a div with all sides colored.

HTML

<div class="css-arrow-multicolor">
</div>

CSS

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

CSS

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.

`border-style:dotted;`	`border-style:dashed;`	`border-style:outset;`	`border-style:inset;`
`border-style:ridge;`	`border-style:groove;`	`border-style:double;`

Never thought about doing this with CSS!? Amazing isn't it!

2009 Stuff.co.nz Stats In Review

2010-01-05T15:21:00.002+13:00

Today is my first day back to work, it’s an interesting time to look back on how www.stuff.co.nz has progressed, I’ve continued this by listing some similar stats for comparison during the last 12 months:

Compare with 2008, Visits +31.18%, Pageviews +24.89%, Avg Time on Site +3.6%, Page/Visit - 4.79%, %New Visits -10.66%

Top 5 traffic Source direct traffic 39.58% google organic 35.44% trademe.co.nz 3.39% facebook 1.89% yahoo oranic 1.50%	Top 5 countries New Zealand 78% Australia 6.71% USA 5.5% UK 3.16% Canada 1.09%	Top 5 domestic cities Auckland 42% Wellington 24% Christchurch 15% Palmerston North 2.8% Hamilton 2.46%
Top 5 web browser Internet Explorer 66.83% Firefox 22.09% Safari 6.85% Chrome 3.13% Opera 0.64%	Top 5 Screen Resolution 1024x768 28.42% 1280x800 20.12% 1280x1024 17.87% 1680x1050 8.31% 1440x900 7.55%	Top 5 Section sport rugby national the press dominion post

Twitter Followers 7481
Facebook Fans 10,354
Alexa Ranking #3126 globally #11 in NZ
Digg 1,921 articles
Delicious 719 bookmarks

Top stories users clicked released before the Christmas, you can view them here. Also we released several doodled logos since launched redesign of the site in early March.

There’s a few interesting results in there, the Facebook and Twitter count improvements are definitely good to see! More importantly we’ve had a very successful year from a business perspective, achieving amazing results for our readers and some excellent awards. Plus we’ve grown and developed our great team and can look forward to an exciting 2010 ahead!

Stuff.co.nz T-shirt

2010-01-03T21:33:00.001+13:00

We got the newly designed stuff.co.nz T shirt before the Christmas. It comes with two colors, white and black!

Here we go, staff at stuff.co.nz in stuff T shirts!

Happy New Year 2010!

2010-01-01T22:08:00.001+13:00

Google is awesome！昨夜在Google.com首页点击“I’m Feeling Lucky”按钮的2010年倒计时终于走到了终点，现在点击“I’m Feeling Lucky”按钮则可以看到绚丽的烟花。

我喜欢像Google这样的公司，总是给它用户意想不到的惊喜，创意是这个公司的生命线。Google之所以有这样的成功，就是因为他公司内部创新活力的精神，同时Google平台上能够把创新的想法转化成实实在在有利的产品。互联网是一个靠技术创新驱动的产业，在这个产业中，有Google存在，是一件好事，它以自己不断的创新，推动了整个互联网创新的步伐。因此在竞争激烈的IT界，只有抓住时机、不断创新才可能立于不败之地。

2010年，对我个人事业来讲是一个重要的转折点，无疑，Google算是在新年的第一天给我打了一针兴奋剂。祝我好运吧！

Farewell to Wellington 别了，惠灵顿

2009-12-31T22:13:00.079+13:00

选择在2009年的最后一天写这篇博客，不是刻意想和过去说再见，而是想将一个充满着对未来职业生涯向往的崭新的我展现在2010年新年的第一天。

Yes, 我最终做出了回国的决定，2010年春节前将终于圆了自己的梦回唐朝。其实我与本月月初正式向 Fairfax Media 递交了辞职信，在18号team Secret Santa 的时候我当着所有的colleague面宣布了自己离开的消息，1月22号会是我最后一天上班。

身边有很多人质疑，人数远远多于鼓励和理解的人。在很长的一段时间里我反问过自己很多遍：到底是活在人们的一种传统观念中？还是真正为自己活着？国外的工作生活是不是舒适？我自己的心是否平静？其实我坚信往往就是问过自己这些问题的人，能抓住机会，掌握自己的命运。

毕竟，我们每个人都没有聪明到可以计算到未来的每一步起伏变化，那么，你未来在面对那些重大而艰难的决策时，帮你做出决定的除了你个人的才智、经验，还有你的世界观。

经历了旅居海外七载的学习和工作之后；亲身感触了并周游传统的欧洲列强之后；在看过60年国庆期间多方面的品论，报道，数据之后；让我再一次坚定自己的思想深处的想法以及正视中国的发展，现实就是很多领域里中国已经处于世界领先，把很多发达国家都远远的甩在后面。不说远的航空航天，能源，军事，高速列车，单说与老百姓生活密不可分的传媒，通信以及我热爱的互联网业。

近期，和西安高新产业开发区的一些创业型互联网公司联络了，其中有几家公司的老板对我很感兴趣，希望我加盟。值得高兴的是这些有闯劲而且年轻的创业者都跟我有着或多或少的共同点，比如：西安电子科技大学的师兄，海外留学的背景。

没妄想过李彦宏，张朝阳的神话会复制到自己身上，但他们身上闪烁的一些美好元素，却是可以复制到每一个普通人的身上。比如：理想，果敢，坚持，专注，勤奋等等。

最后，我借用李开复离开Google时说的一句话来给自己开脱 "follow my heart"！

谢谢

王大禹
2009年12月31日

中国互联网行业的2009年

2009-12-30T00:12:00.002+13:00

2009年即将成为历史，2010年近在眼前。对中国互联网行业来说，过去一年是悲喜交加的一年。70后、80后这群大多已不再年轻的年轻人撑起了中国互联网行业的绝大部分天空，他们是思想活跃的一代，他们是激情的一代。

尽管这一年来，中国互联网行业历经磨难，经历了监管、整顿、口水战、并购、合作……，尽管这一年来，阴霾一直如影随形，尽管这一年来，我们都倍感疲倦，但希望永不泯灭，光明的火焰一直在地平线上闪烁。

2009年，老牌互联网企业在加紧圈地，在全力做平台，打通产业链，建设生态圈，在并购，在拆分业务……

2009年，电子商务的魅力深入人心，其中B2C领域开始出现井喷现象，传统零售及制造企业都尝试进入，同时也成为很多年轻人创业的热点领域。

2009年，随着3G业务的发展，移动互联网的生态初步成形，移动娱乐与移动商务齐头并进。

2009年，社交网站延续去年的强劲势头，开心网与新浪微博等分别代表了SNS与微博客领域的魅力。

2009年，互联网在证明自身无限商机与强大舆论影响力的同时，因为所谓“色情”与“侵权”的原罪，也招致被批判、被整顿、被监管、被关闭。

2009年，注定是中国广大个人站长噩梦的一年，一大批个人网站在一刀切的长官行政命令下死去，数十万个人站长多年的心血付之东流——这一年留给那些立志互联网创业的年轻人是灰色的回忆。

2009年，国有资本复制其“嗜血”的本性，“国家队”全面进入互联网，中国网络电视台只是个开始，整个行业的洗牌的大幕已经拉开。

2009年，中国互联网行业依旧混乱，却又似乎走在有序的路上。

2009年，这是最差的时代，也是最好的时代。

2009年要走了，2010年要来了，今岁的寒冬挡不住明年春天的到来。

Team Secret Santa

2009-12-24T21:57:00.000+13:00

Secret Santa came on 18th Dec at stuff.co.nz HQ. I got Tommee Tippee orthodontic teat for my future coming baby, thanks Santa!

Thanks for Ms Hayley Collins, who took these awesome photos of our team.

Merry Christmas and Happy New Year

2009-12-24T10:15:00.004+13:00

Merry Christmas and Happy New Year to all of my subscribed readers and visitors. I’m taking a little Christmas break to enjoy the holidays with family and friends, but I’ll be back after the first of New Year 2010.

I enjoyed this song "Oh Come, Oh Come, Emmanuel" on last Sunday's Carol Service in church, I embed it here, wish you enjoyed it too.

Oh Come, Oh Come, Emmanuel

by The Franz Family // Canon 5D Mark II from ColdWater Media on Vimeo.

Stuff.co.nz Christmas Logo 2009

2009-12-24T09:55:00.001+13:00

Congratulations to Thomas Flinn, the winner of the Stuff Christmas logo competition! Really fantastic doodle, nice job, I love your work! Your logo will be displayed on stuff.co.nz homepage from Christmas Eve until Boxing Day.

We were overwhelmed with the quality of all the entries and 15 finalists got displayed on stuff.co.nz for each day since 9th Dec. We would like to thank everyone who participated.

See the 15 finalists in the slides below if you have missed any:

Most Viewed on Stuff.co.nz in 2009

2009-12-23T15:43:00.009+13:00

Today, stuff.co.nz has released its most viewed news list in 2009 to readers. Unlike many American websites collapsed when Michael Jackson dead, none of breaking news could take Stuff server down, but it did reach a record of traffic on Michael Jackson's death.

Looking through the list, to me, there are not many "real news" stories appearing on that list, I am pretty sure that at least some events are more important than porn star, sex, topless teacher, toddler buys digger, such as Obama inauguration, Swine flu, economic recession, All Whites, climate change...

Stuff.co.nz is #2 news website in NZ, it gets average 650k visits a day. The Stuff readers behaviors can represent about half people in this country. It proves me that kiwis don't know what is really going on in the world.
Top 30 most popular stories:

1. Napier siege: Gunman found dead
2. More than 110 dead in tsunami-hit Samoa
3. $190,000 withdrawn in $20 bills
4. No dating, thanks, just sex
5. Police officer shot dead in Napier
6. Michael Jackson dead
7. New Zealand authorities prepare for tsunami
8. Series of earthquakes off Vanuatu
9. Body found in hunt for Aisling
10. Topless teacher on Penthouse website
11. Geriatric porn star an inspiration for the old
12. 2009 Super 14 Standings
13. Te Papa boss Seddon Bennington found dead
14. Tree grows inside man's lung
15. Toddler buys $20,000 digger on TradeMe
16. Tua knocks out Cameron
17. Bain loses bid to keep 111 tape secret
18. Officer wrote kitchen bitch on traffic notice
19. Couple missing after $10m bank bungle
20. Woman's extreme Red Bull diet
21. Women as keen as men for group sex
22. Susan Boyle is a YouTube hit
23. Dad accused of using dog shock collar on his kids
24. Kiwi star unveiled in nude ad
25. Lisa Lewis ejected for racy outfit
26. Swine flu jokes pigs might fly
27. Scary washing machine fetches over $5000
28. Body in car as gunman flees
29. Pitt agreed to movie while drunk
30. Michael Hills invisible houses get go ahead

也谈短网址

2009-12-23T10:23:00.002+13:00

今天，YouTube.com 启用了自己的短网址 YouTu.be （这个网址真牛叉啊）。这又为短网址家族带来了新的活力。

一个网站，尤其是大型商业网站的域名一般都非常短小，但是其包含的页面网址（URL）往往是字母加数字，复杂冗长，不仅非常难看而且也不容易记住。在这种情况下，“短网址” 就在网络上应运而生了。

仔细一想，短网址实在是个非常有意思的事儿，也不知是哪个家伙想出来的 “鬼”主意！

目前，世界上比较知名的一些大型网站先后也都拥有了自己专属的短网址。比如以下几个：

（1）Goo.gl 是伟大的 Google 短域名，面向其工具栏和 Feedburner 的用户开放。（.gl 是格陵兰域名后缀）

（2）Fb.me 是 Facebook 的短域名。（.me 是欧洲南部国家黑山的域名后缀）

（3）YouTu.be 当然是世界第一视频 YouTube 的了。不能不赞叹这个短域名真是天设地早，专为 YouTube 所设！（.be 是比利时国家域名后缀）

以上这些都是人家网站的 “私货”，仅供自己使用。而面向公众使用的短网址也是雨后春笋，遍地开花。比如：

Bit.ly 当属最知名的了（利比亚国家域名后缀）。它成名于 Twitter 的官方短链接地址服务商，显得非常专业。它的专业测试版向网站、博客写手和新闻组织提供自定义容易记住的短域名服务。所以，它深受个人以及商家的青睐。

其他向公众免费提供短网址服务的一些知名网站还有：TinyURL.com、ShortURL.com、Tr.im（马恩岛域名后缀）、is.gd（格林纳达国家域名后缀） ……

一般来说，那些知名网站的短网址服务的域名都是它们在自己的网站域名上打主意，最好的是利用以往比较偏僻的域名后缀，类似的这些域名后缀往往都是一些比较小的国家。这些国家真是长了不少脸面啊。

相比较来说，国内还没有任何一家网站自己推出自己的短网址呢！难道是没有兴趣还是缺乏胆识和魄力？我想，至少号称天朝第一社交网站的 QQ 似乎就应该有自己的短网址吧。

短网址，因为短小，所以有力！

A Report of Social Media in China

2009-12-18T12:46:00.001+13:00

A nice introductory presentation on Social Media in China by Mindy Zhang, a junior at Wharton school. Her blog is here

Cool slides and worth sharing with who are interested in Chinese market.

Social Media in China

View more presentations from Mindy Zhang.

Air New Zealand Staff Have Nothing To Hide

2009-12-17T21:00:00.000+13:00

YouTube has announced its official Most Watched lists globally, here is the top five New Zealand-created videos:

1. Smashproof (featuring Gin Wigmore) - Brother
2. J Williams – Ghetto Flower
3. Pulp Sport (ft P Diggs) - I’m On A Goat
4. Air New Zealand staff have nothing to hide
5. Bare essentials of safety from Air New Zealand

According to a poll being run on stuff.co.nz, looks like many of New Zealanders really liked the Air New Zealand videos, I love this one too, pretty creative and funny.

So here's one to enjoy again!

Google's Christmas Gift For Web Designers

2009-12-17T15:36:00.003+13:00

Ever wondered what parts of your site can't be viewed without scrolling? Browser Size shows you what portion of users can see a give spot on the screen. This is not screen resolution but the area available to the browser – as gathered from www.google.com users

Percentages are percentage of users who will see the areas of the website without scrolling.

For example innermost line says 99% that means for 99% the user areas under that line will be visible without horizontal or vertical scrolling.

I’ve tested for stuff.co.nz homepage, section landing and story page, you can see from below screenshots. Percentages are percentage of users who will see the areas of the website without scrolling.

As we can find out from this tool:

30% of our readers can not see Latest News Headlines, Editor’s Picks and Most popular box on homepage
50% of readers can not see More Headlines and Special Offers

Web designers can benefit from this visualization tool to tweak their designs for some purposes or improve user experience.

Big thanks for Google, I consider this as my Christmas gift for web developers!

Web设计中的中国传统色彩

2009-12-14T09:39:00.005+13:00

诗词中有：“名花韵在年晴初，雨沁胭脂脸更敷。”，你知道胭脂是什么颜色么？“回眸一笑百媚生，六宫粉黛无颜色。”中的这个“黛”又是指什么颜色呢？“漆黑一片”里漆黑真的就是完全的黑色吗？在下面这个Web设计中的中国传统色彩速查表，你可以得到准确的答案。

原文作者：青女 附注及色样添加：Quester 转自css9.net

████ 粉红(#ffb3a7)，即浅红色。别称：妃色杨妃色湘妃色妃红色
████ 妃色妃红色(#ed5736)：古同“绯”，粉红色。杨妃色湘妃色粉红皆同义。
████ 品红(#f00056)：比大红浅的红色（quester注：这里的“品红”估计是指的“一品红”，是基于大红色系的，和现在我们印刷用色的“品红M100”不是一个概念）

████ 桃红(#f47983)，桃花的颜色，比粉红略鲜润的颜色。（quester注：不大于M70的色彩，有时可加入适量黄色）
████ 海棠红(#db5a6b)，淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。
████ 石榴红(#f20c00)：石榴花的颜色，高色度和纯度的红色。
████ 樱桃色(#c93756)：鲜红色

████ 银红(#f05654)：银朱和粉红色颜料配成的颜色。多用来形容有光泽的各种红色，尤指有光泽浅红。
████ 大红(#ff2121)：正红色，三原色中的红，传统的中国红，又称绛色（quester注：RGB 色中的 R255 系列明度）
████ 绛紫(#8c4356)：紫中略带红的颜色
████ 绯红(#c83c23)：艳丽的深红

████ 胭脂(#9d2933)：1，女子装扮时用的胭脂的颜色。2，国画暗红色颜料
████ 朱红(#ff4c00)：朱砂的颜色，比大红活泼，也称铅朱朱色丹色（quester注：在YM对等的情况下，适量减少红色的成分就是该色的色彩系列感觉）
████ 丹(#ff4e20)：丹砂的鲜艳红色
████ 彤(#f35336)：赤色

████ 茜色(#cb3a56)：茜草染的色彩，呈深红色
████ 火红(#ff2d51)：火焰的红色，赤色
████ 赫赤(#c91f37)：深红，火红。泛指赤色、火红色。
████ 嫣红(#ef7a82)：鲜艳的红色
████ 洋红：色橘红(#ff0097) （quester注：这个色彩方向不太对，通常洋红指的是倾向于M100系列的红色，应该削弱黄色成分。）

████ 炎(#ff3300)：引申为红色。
████ 赤(#c3272b)：本义火的颜色，即红色
████ 绾(#a98175)：绛色；浅绛色。
████ 枣红(#c32136)：即深红（quester注：色相不变，是深浅变化）

████ 檀(#b36d61)：浅红色，浅绛色。
████ 殷红(#be002f)：发黑的红色。
████ 酡红(#dc3023)：像饮酒后脸上泛现的红色，泛指脸红
████ 酡颜(#f9906f)：饮酒脸红的样子。亦泛指脸红色

████ 鹅黄(#fff143)：淡黄色（quester注：鹅嘴的颜色，高明度微偏红黄色）
████ 鸭黄(#faff72)：小鸭毛的黄色
████ 樱草色(#eaff56)：淡黄色
████ 杏黄(#ffa631)：成熟杏子的黄色（quester注：Y100 M20~30 感觉的色彩，比较常用且有浓郁中国味道）

████ 杏红(#ff8c31)：成熟杏子偏红色的一种颜色
████ 橘黄(#ff8936)：柑橘的黄色。
████ 橙黄(#ffa400)：同上。（quester注：Y100 M50 感觉的色彩，现代感比较强。广告上用得较多）
████ 橘红(#ff7500)：柑橘皮所呈现的红色。

████ 姜黄(#ffc773)：中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正,呈黄白色
████ 缃色(#f0c239)：浅黄色。
████ 橙色(#fa8c35)：界于红色和黄色之间的混合色。
████ 茶色(#b35c44)：一种比栗色稍红的棕橙色至浅棕色
████ 驼色(#a88462)：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色

████ 昏黄(#c89b40)：形容天色、灯光等呈幽暗的黄色
████ 栗色(#60281e)：栗壳的颜色。即紫黑色
████ 棕色：棕毛的颜色,即褐色。1，在红色和黄色之间的任何一种颜色2，适中的暗淡和适度的浅黑。
████ 棕绿(#827100)：绿中泛棕色的一种颜色。
████ 棕黑(#7c4b00)：深棕色。

████ 棕红(#9b4400)：红褐色。
████ 棕黄(#ae7000)：浅褐色。
████ 赭(#9c5333)：赤红如赭土的颜料,古人用以饰面
████ 赭色(#955539)：红色、赤红色。
████ 琥珀(#ca6924)：

████ 褐色(#6e511e)：黄黑色
████ 枯黄(#d3b17d)：干枯焦黄
████ 黄栌(#e29c45)：一种落叶灌木，花黄绿色,叶子秋天变成红色。木材黄色可做染料。
████ 秋色(#896c39)：1，中常橄榄棕色,它比一般橄榄棕色稍暗,且稍稍绿些。2，古以秋为金,其色白,故代指白色。
████ 秋香色(#d9b611)：浅橄榄色浅黄绿色。（quester注：直接在Y中掺入k10~30可得到不同浓淡的该类色彩）

████ 嫩绿(#bddd22)：像刚长出的嫩叶的浅绿色
████ 柳黄(#c9dd22)：像柳树芽那样的浅黄色
████ 柳绿(#afdd22)：柳叶的青绿色
████ 竹青(#789262)：竹子的绿色

████ 葱黄(#a3d900)：黄绿色，嫩黄色
████ 葱绿(#9ed900)：1，浅绿又略显微黄的颜色2，草木青翠的样子
████ 葱青(#0eb83a)：淡淡的青绿色
████ 葱倩(#0eb83a)：青绿色
████ 青葱(#0aa344)：翠绿色,形容植物浓绿

████ 油绿(#00bc12)：光润而浓绿的颜色。以上几种绿色都是明亮可爱的色彩。
████ 绿沈(#0c8918)（沉）：深绿
████ 碧色(#1bd1a5)：1，青绿色。2，青白色,浅蓝色。
████ 碧绿(#2add9c)：鲜艳的青绿色

████ 青碧(#48c0a3)：鲜艳的青蓝色
████ 翡翠色(#3de1ad)：1，翡翠鸟羽毛的青绿色。2，翡翠宝石的颜色。（quester注：C-Y≥30 的系列色彩，多与白色配合以体现清新明丽感觉，与黑色配合效果不好：该色个性柔弱，会被黑色牵制）
████ 草绿(#40de5a)：绿而略黄的颜色。
████ 青色(#00e09e)：1，一类带绿的蓝色,中等深浅,高度饱和。3，本义是蓝色。4，一般指深绿色。5，也指黑色。6，四色印刷中的一色。2，特指三补色中的一色。

████ 青翠(#00e079)：鲜绿

████ 青白(#c0ebd7)：白而发青,尤指脸没有血色
████ 鸭卵青(#e0eee8)：淡青灰色，极淡的青绿色
████ 蟹壳青(#bbcdc5)：深灰绿色

████ 鸦青(#424c50)：鸦羽的颜色。即黑而带有紫绿光的颜色。
████ 绿色(#00e500)：1，在光谱中介于蓝与黄之间的那种颜色。2，本义：青中带黄的颜色。3，引申为黑色，如绿鬓：乌黑而光亮的鬓发。代指为青春年少的容颜。（quester注：现代色彩研究中，把绿色提高到了一个重要的位置，和其它红黄兰三原色并列研究，称做“心理原色”之一）
████ 豆绿(#9ed048)：浅黄绿色
████ 豆青(#96ce54)：浅青绿色

████ 石青(#7bcfa6)：淡灰绿色
████ 玉色(#2edfa3):玉的颜色，高雅的淡绿、淡青色
████ 缥(#7fecad)：绿色而微白
████ 艾绿(#a4e2c6)：艾草的颜色。偏苍白的绿色。
████ 松柏绿(#21a675)：经冬松柏叶的深绿

████ 松花绿(#057748)：亦作“松花”、“松绿”。偏黑的深绿色,墨绿。
████ 松花色(#bce672)：浅黄绿色。（松树花粉的颜色）《红楼梦》中提及松花配桃红为娇艳 ████

████ 蓝(#44cef6)：三原色的一种。像晴天天空的颜色（quester注：这里的蓝色指的不是RGB色彩中的B，而是CMY色彩中的C）

████ 靛青(#177cb0)：也叫“蓝靛”。用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。呈深蓝绿色（quester注：靛，发音dian四声，有些地方将蓝墨水称为“靛水”或者“兰靛水”）
████ 靛蓝(#065279)：由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料
████ 碧蓝(#3eede7)：青蓝色
████ 蔚蓝(#70f3ff)：类似晴朗天空的颜色的一种蓝色

████ 宝蓝(#4b5cc4)：鲜艳明亮的蓝色（quester注：英文中为 RoyalBlue 即皇家蓝色，是皇室选用的色彩，多和小面积纯黄色（金色）配合使用。）
████ 蓝灰色(#a1afc9)：一种近于灰略带蓝的深灰色
████ 藏青(#2e4e7e)：蓝而近黑
████ 藏蓝(#3b2e7e)：蓝里略透红色

████ 黛(#4a4266)：青黑色的颜料。古代女子用以画眉。
████ 黛螺(#4a4266)：绘画或画眉所使用的青黑色颜料，代指女子眉妩。
████ 黛色(#4a4266)：青黑色。
████ 黛绿(#426666)：墨绿。
████ 黛蓝(#425066)：深蓝色

████ 黛紫(#574266)：深紫色
████ 紫色(#8d4bbb)：蓝和红组成的颜色。古人以紫为祥瑞的颜色。代指与帝王、皇宫有关的事物。
████ 紫酱(#815463)：浑浊的紫色
████ 酱紫(#815476)：紫中略带红的颜色
████ 紫檀(#4c221b)：檀木的颜色，也称乌檀色乌木色

████ 绀青绀紫(#003371)：纯度较低的深紫色
████ 紫棠(#56004f)：黑红色
████ 青莲(#801dae)：偏蓝的紫色
████ 群青(#4c8dae)：深蓝色
████ 雪青(#b0a4e3)：浅蓝紫色

████ 丁香色(#cca4e3)：紫丁香的颜色，浅浅的紫色，很娇柔淡雅的色彩
████ 藕色(#edd1d8)：浅灰而略带红的颜色
████ 藕荷色(#e4c6d0)：浅紫而略带红的颜色

████ 苍色(#75878a)：即各种颜色掺入黑色后的颜色，如苍翠(#519a73)████ 苍黄(#a29b7c)████ 苍青(#7397ab)████ 苍黑(#395260)████ 苍白(#d1d9e0)████ （quester注：准确的说是掺入不同灰度级别的灰色）

████ 水色(#88ada6)：水红(#f3d3e7)████ 水绿(#d4f2e7)████ 水蓝(#d2f0f4)████ 淡青(#d3e0f3)████ 湖蓝(#30dff3)████ 湖绿(#25f8cb)████皆是浅色。

████ 深色淡色(#ffffff)：颜色深的或浅的，不再一一列出。

████ 精白(#ffffff)：纯白，洁白，净白，粉白。
████ 象牙白(#fffbf0)：乳白色
████ 雪白(#f0fcff)：如雪般洁白

████ 月白(#d6ecf0)：淡蓝色
████ 缟(#f2ecde)：白色
████ 素(#e0f0e9)：白色，无色
████ 荼白(#f3f9f1)：如荼之白色
████ 霜色(#e9f1f6)：白霜的颜色。

▓▓▓▓ 花白(#c2ccd0)：白色和黑色混杂的。斑白的夹杂有灰色的白
████ 鱼肚白(#fcefe8)：似鱼腹部的颜色，多指黎明时东方的天色颜色（quester注：M5 Y5）
████ 莹白(#e3f9fd)：晶莹洁白
████ 灰色(#808080)：黑色和白色混和成的一种颜色

████ 牙色(#eedeb0)：与象牙相似的淡黄色（quester注：暖白）
████ 铅白(#f0f0f4)：铅粉的白色。铅粉，国画颜料，日久易氧化“返铅”变黑。铅粉在古时用以搽脸的化妆品。（quester注：冷白）

████ 玄色(#622a1d)：赤黑色，黑中带红的颜色，又泛指黑色
████ 玄青(#3d3b4f)：深黑色

████ 乌色(#725e82)：暗而呈黑的颜色
████ 乌黑(#392f41)：深黑；漆黑
████ 漆黑(#161823)：非常黑的
████ 墨色(#50616d)：即黑色
████ 墨灰(#758a99)：即黑灰

████ 黑色(#000000)：亮度最低的非彩色的或消色差的物体的颜色；最暗的灰色；与白色截然不同的消色差的颜色；被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。
████ 缁色(#493131)：帛黑色
████ 煤黑象牙黑(#312520)：都是黑，不过有冷暖之分。
████ 黧(#5d513c)：黑中带黄的颜色
████ 黎(#75664d)：黑中带黄似黎草色

████ 黝(#6b6882)：本义为淡黑色或微青黑色。
████ 黝黑(#665757)：（皮肤暴露在太阳光下而晒成的）青黑色
████ 黯(#41555d)：深黑色、泛指黑色
████ 赤金(#f2be45)：足金的颜色

████ 金色(#eacd76)：平均为深黄色带光泽的颜色
████ 银白(#e9e7ef)：带银光的白色
████ 铜绿(#549688) ████乌金(#a78e44) ████老银(#bacac6)：金属氧化后的色彩

附带：

国画用色

████ 银朱(#bf242a)：呈暗粉色。
████ 胭脂(#9d2933)：色暗红。用红蓝花、茜草、紫梗三种植物制成的颜料，年代久则有褪色的现象。
████ 朱砂(#ff461f)：色朱红。用以画花卉、禽鸟羽毛。（quester注：黄色成分微高于红色成分，色艳丽，需注意与背景色调和，多数情况下不大面积使用。）

████ 朱膘(#f36838)：色橘红。明度比朱砂高，彩度比朱砂低。用以画花卉。
████ 赭石(#845a33)：色红褐。用以画山石、树干、老枝叶。
████ 石青(#1685a9)：色青，依深浅分为－头青、二青、三青。用以画叶或山石。
████ 石绿(#16a951)：依深浅分为－头绿、二绿、三绿。用以画山石、树干、叶、点苔等。
████ 白粉(#fff2df)：亦称胡粉，色白，有蛤粉和铅粉两种。用以画白花、鸟，或调配其他颜料使用。

████ 花青(#003472)：色藏青。用以画枝叶、山石、水波等。用蓼蓝或大蓝的叶子制成蓝靛，再提炼出来的青色颜料，蓝绿色或藏蓝色。用途相当广，可调藤黄成草绿或嫩绿色。广花，颜料。即广东产的花青。（quester注：微含红色成分，故与黄色调和后生成的绿色较为沉着）
████ 藤黄(#ffb61e)：色明黄。用以画花卉、枝叶。藤黄：明黄色。南方热带林中的海藤树，常绿乔木，茎高达二十米，从其树皮凿孔，流出黄色树脂，以竹筒承接，干透可作国画颜料。（quester注：亦含微量红色成分，有毒。和黑色配合时甚为醒目，多为危险警示色彩）
████ 赭石色(#845a33)：暗棕色矿物，用做颜料
████ 雌黄(#ffc64b)：矿物名。成分是三硫化二砷(As2S3)橙黄色,半透明,可用来制颜料。古人用雌黄来涂改文字，因此称乱改文字、乱发议论为“妄下雌黄”，称不顾事实、随口乱说为“信口雌黄”。

████ 雄黄(#e9bb1d)：中药名。为含硫化砷的矿石。别名石黄、黄石。
████ 石黄(#e9bb1d)：国画颜料，即雄黄。
████ 洋红(#ff4777)：色橘红。用以画花卉。

古典文学常见词

鎏金：中国传统的一种镀金方法，把溶解在水银里的金子涂刷在银胎或铜胎器物上。

飞金泥金洒金：用金粉或金属粉制成的金色涂料，用来装饰笺纸或调和在油漆中涂饰器物。洒金一说是指带斑点的图案。
描金：为使器物美观而在其上用金银粉勾图、描绘作为装饰。

花黄：古代妇女的面饰。用金黄色纸剪成星月花鸟等形贴在额上,或在额上涂点黄色。
撒花：织物上的碎花图案。
云斑：在颜色比较淡的或半透明的材料上的暗黑的或无光泽的条纹或斑点(如在大理石上)。
云母纹：像云母断面及砂子闪烁光泽的纹理。

你多久没看报纸了？互联网时代的报业危机

2009-12-10T10:46:00.001+13:00

以下内容（节选）转自网易专题——互联网时代的传统媒体高峰论坛，在社会化媒体（social media）盛行的时代，不仅对传统媒体造成了很大冲击，甚至对一些传统门户网站，尤其是依托地方传统媒体的门户网站也造成一定影响，以下的专题内容对于想让自己变得更“社会化”的网站有一定的启示。

一、互联网改变阅读习惯——“发现” VS “搜索”

互联网催生了SNS、IM、博客（微型博客）和门户等多种新型的信息载体，这些载体由此颠覆了读者的传统阅读习惯。Web 2.0时代，读者阅读的行为由“搜索”变成了“发现”：通过报纸或者杂志，读者的阅读行为几乎完全基于个人检索——无论是自主抑或被动的，只有抱着足够明确的目标，才能有效获得资讯。资讯能通过一个“News Feed”、一封转帖、一篇被推荐到门户首页的博客等各种分享信息被随机推送到我们面前，阅读于是演变为充满惊喜的“发现”过程。
1.利用SNS，新闻网站创造了更多的点击量
2.通过互联网，更多人分享到朋友推荐的信息

二、互联网改变阅读体验——多维阅读时代的到来

互联网的出现，丰富了读者的阅读体验，文字和读图时代不禁显得有点“怀旧”。从内容的制作到内容的呈现，互联网让读者以全方位、多角度、多渠道地接受到信息。从内容制作者来看，无论是个人还是媒体专业人员都被授予了发布内容的权力；从信息的内容上看，个人用各种无线终端上传的视频、图片甚至一行文字都构成了可阅读的内容。Youtube、Flickr等在线分享网站的兴起，完全颠覆了媒体从业者对信息权威性的垄断。

1.“旧窗口”面临瓦解，“新窗口”正在建立
2.网络“自媒体”对传统媒体构成挑战

三、互联网改变传播路径——“点对点”时代的结束

读者通过传统媒体获得的体验，无论是直接购买、借阅一份报纸或杂志，大部分传播路径都局限在点对点的：读者通过个人购买了报纸或杂志获得资讯，或者在获得资讯之后分享给有限的个人。新媒体的出现，则彻底颠覆了这种效率低而范围狭窄的传播路径，同样是SNS上的“News Feed”、转帖或者微博上的短消息，让所有在这个平台上的受众同时接受了这一资讯——并且，作为消息的发布者，你可能永远不知道有多少人接受了这一信息。

1.数字时代传播路径中的“合与分”
2.网报融合后，我们的读者到底有多少？

四、互联网改变内容供应方式——内容组织的非结构化

翻开一张报纸或是一本杂志，编辑的思维几乎就决定了读者的思维。目录、索引、栏目还有页码等诸多元素，为读者的阅读设定了条条框框，无论你想不想看，你实际上都得一页一页地翻。但新媒体时代，信息就彻底地被打散了：没有目录，没有索引，没有栏目也没有页码，SNS和IM的用户根本无法预知何时何地会接收到新的信息，同时，无需再为那些他们不感兴趣的内容付费和投入精力。

1.谷歌:我们扮演的角色是“虚拟报亭”
2.“微内容”挑战传统新闻组织形式

五、互联网改变广告营销理念——广告应该如何投放？

互联网的出现极其所带来的变化，让平面媒体不得不因为广告市场份额的萎缩重新规划商业模式——广告商似乎越来越倾向于数字媒体。微软总裁鲍尔默也表示，“不少人认为现有的广告模式并没有带来盈利，然而谷歌搜索已经赚到了钱。”数字广告是所有人下一部需要考虑的问题，鲍尔默还宣称，平媒商业模式要成功转型，就必须把网络环境和实用性正确相结合，为消费者创建一个有吸引力的网络站点。

1.广告仍然是新闻业未来的“曙光”
2.点击量不是网络广告的“上帝”

How to use HTML Label Tag

2009-12-08T12:37:00.003+13:00

One of our readers who enjoys the stuff.co.nz "Opinion Polls", pointing out there's one thing that he find inconsistent - the HTML we are using to provide the poll options does not use the LABEL tag. This is a useful tag that allows a user to click on the text associated with a radio button, with the same effect as if they had clicked on the actual button itself.

First of all, I should say thank you to this user, he is awesome.

It's a usability issue, I actually noticed this issue the other day. But I thought like 99% users would click on the radio button or check box rather than the text, so I didn't bring up this issue. This is something minor but we should do to keep Stuff.co.nz a cutting edge website impression for our users.

Now, I want to detail the mystery of label tag

the label tag does not actually help with the layout or structure of a web page - it helps with usability. For instance, do you notice any difference between the two examples below:

Check Me!!

Check Me Too!!

The first example there is using the label tag, and the second example does not. If you paid attention when you checked/unchecked the checkboxes, you may have noticed the difference. In the first example, you can click the text, and the checkbox reacts! That's right, the label tag allows you to create a "label" for an input element. Take a look at the code for the example:

<input type="checkbox" id="example1" />
<label for="example1"> Check Me!!</label>
<br/>
<input type="checkbox" id="example2" />
<span> Check Me Too!!</span>

Using the <label> tag works for most types of input element, as you can see below:

A Button

A Checkbox

A Radio Button

A Text Box

A Password Box

<input type="button" id="example3" value="Button" />
<label for="example3"> A Button</label>
<br/>
<input type="checkbox" id="example4" />
<label for="example4"> A Checkbox</label>
<br/>
<input type="radio" id="example5" />
<label for="example5"> A Radio Button</label>
<br/>
<input type="text" id="example6" />
<label for="example6"> A Text Box</label>
<br/>
<input type="password" id="example7" />
<label for="example7"> A Password Box</label>

You would be surprised how much more usable the <label> tag can make your forms. The checkbox is a really easy example - pull open any Windows or Mac application - the label for a checkbox will almost always trigger the checkbox as well. This is because the checkbox is generally a small hit target - it is easy for the user to miss clicking it. With Windows/Mac apps, developers get that behavior for free - on web pages, we have to remember to code it in. So next time you are building a web form, remember to use the <label> tag!

Web Trends to Watch in 2010

2009-12-04T10:51:00.001+13:00

上图是Google 在过去12个月内对 Tumblr, Digg 和StumbleUpon在全球范围内的检测数据图表，也是是Seoptimise 的Tad Chef 对2010年的网站设计趋势所做的30个预测的部分依据，本文从包括Social Media（社会化媒体）, Business（商务）, Mobile（移动）, Marketing（市场营销）, Search（搜索）, SEO（搜索引擎优化）, Web Design Development（网站设计开发）, Blogging（博客）, Software（软件） 9 个方面预测了2010年Web设计和Web应用方面的发展趋势。

Social Media（社会化媒体）
与Twitter的相关的集成与应用在2009年大行其道，2010年这种潮流还将继续。
Tumblr在Twitter的的影子下继续成长，当Twitter的失宠，Tumblr或将终成气候。最终，社会媒体将只剩下几个大玩家，Twitter，Facebook等。
社会新闻网络（Digg，Reddit），书签网络（Delicious）将过时，事实上，它们已经输给了Twitter。
社会浏览网络（StumbleUpon）已经死掉，2008年，这类网络有10多家，现在基本已衰亡，这个趋势会继续。

Business（商务）
众多用户规模没有达到一定程度的创业公司在烧完他们的钱之后死掉。
当风险投资越来越稀罕的时候，越来越多的公司需要靠收费免费结合的模式生存。
为了活下去，公司和品牌必须在2010年制定出社会媒体战略。
2010年，随着商业帐号以及数据访问方面的收费，Twitter的将开始盈利。

Mobile（移动）
某些智能手机系统因市场不够大而死掉。
苹果将丢失市场份额，虽然iPhone将辉煌依旧，但他们不能只靠一样东西永远辉煌。
感谢Google，我们将可能看到免费手机和免费通话，Google准备在真实的手机上实现Google Voice 以及 VOIP以实现真正的免费电话。

Marketing （市场营销）
在线广告领域将更加实际，随着网络的成熟，人们越来越不容易被骗。
网站上的广告将被内容营销替代。

Search（搜索）
实时搜索将变得很普遍。
为了在搜索广告市场上保持领先，Google 和 Bing将相互模仿。
搜索定制将实现完全个人化搜索。

SEO（搜索引擎优化）
搜索引擎优化将无处不在，BBC也不例外。
很多SEO专家将转为地下。
不管喜欢与否，我们会看到越来越多的jQuery的弹窗。

Web Design & Development（网站设计开发）
随着移动应用继续繁荣，为移动设备优化页面将变得很普遍。
HTML5和CSS3会为网络设计师提供更多功能，但仍会向前兼容。
对YouTube上的审查将引发一些开源视频嵌入技术与运动。

Blogging（博客）
博客越来越被接受，并成为网站的老牌媒体。
短小而清新的迷你博客（Tumblr，Posterous等）将在Twitter的一类的微博客与传统博客之间开花。
随着宽带的增长，视频将获得更大程度的重视。

Software（软件）
云计算与基于Web的软件将成气候，得到更好的发展。
Google Docs将吸引更多微软Office用户。
Google Chrome OS将至少在上网本上同微软竞争。

via: 30 Web Trends to Watch in 2010 and Web Trend

How to install Facebook Connect on your site

2009-11-27T14:12:00.006+13:00

It’s been almost one year since Facebook opened Facebook Connect to all developers. Facebook Connect was not difficult to implement for us since Facebook made it super easy to put it on your sitein Sept 2009.
We, Stuff team has been considering to integrate Facebook connect with stuff.co.nz. So I had a deep look at the benefits and implementation. Here I would like to briefly summarize my investigation.

What benefits Facebook Connect delivers to us?

1.Traffic

Enable over 300 million Facebook users to share your content with their friends on Facebook. Let users publish a story, invite their friends, or send an event. Their friends then click back to your site.

2. Engagement

Users can immediately find their friends and engage. More friends leads to more activity and more pageviews. Connected users create 15-60% more content than users who have not connected with Facebook Connect.

3.Registration

Every website wants registration to be easy. We have 300 million users, simple registration, and robust data. By increasing traffic, user engagement, and registrations, you can grow your revenue and increase monetization opportunities.

Authentication Flow Overview

http://wiki.developers.facebook.com/index.php/How_Connect_Authentication_Works

How to install?

Detail http://developers.facebook.com/connect.php

Simple steps http://developers.facebook.com/setup.php

Playground http://developers.facebook.com/tools.php?connect_wizard

How it works?

What Facebook Connect throws to your site?

Before login

File Type	Size	URL
CSS	14.8	http://static.ak.connect.facebook.com/.../connect-css
JS	222.0K	http://static.ak.connect.facebook.com/connect.php/en_US/js/Api/CanvasUtil/Connect/XFBML
JS	16.4K	http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
JS	16.4K	http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US
Image	2.0K	http://b.static.ak.fbcdn.net/rsrc.php/z16CL/hash/bv27ws94.gif
iframe	1.5K	http://www.facebook.com/extern/login_status.php?...
iframe	0.6k	http://api.facebook.com/static/v0.4/client_restserver.php?...

273.7Kb 7 http requests in total.

After Login

Average 1.6k per thumbnail

Conclusion

As you know, Facebook's insanely popular, so if someone is leaving a comment on your site and shares that with their friends, it can't be a bad thing for that purpose. The question is, will this somehow lead to you overweight sized webpages. Think it again before action.

Keep Track of Your iGoogle Gadget

2009-11-23T13:33:00.004+13:00

Google launched iGoogle gadget dashboard where developers can manage their gadgets and see detailed analytics about their gadgets' usage. Right now dashboard allows you to see user numbers over time, number of gadget loads in home and canvas view, as well a geographic break down of users.

On this page, you can add gadget of yours by URL – for some, you may need to click on a link in a verification mail – and then see weekly stats, your gadget ratings and more.

Below is a screenshot of the gadget I built for Stuff.co.nz, you probably notice that the number of users has been dramatically increased in last three days, because the gadget is amazingly ranking number 1 now if you search for “stuff.co.nz” in iGoogle gadget directory

Note though that the stats only show you how often a gadget is loaded, but that doesn’t mean the gadget is used, too... because it just happens to be loaded when the iGoogle page loads, which may be because the user just wants to perform a search, or make use of a gadget not yours. In that case, when Google calls this “page view” we need not be misled to think of it as a “normal” page view like one that would happen on actual website.

Win your logo on Stuff on Christmas Day

2009-11-21T17:09:00.004+13:00

We are offering you the opportunity to show off your skills and design a logo which will be displayed on New Zealand's number one news website Stuff.co.nz on Christmas Day.

Here at Stuff, we highly value our readers and would love to see your creative contribution to the site. Show us what is important to you about Christmas, whether it be holidays, family, Santa or presents and explore your imagination. With a little bit of Christmas magic, you and the rest of New Zealand might see your design up on Stuff.co.nz, and one lucky winner will have their logo displayed on Christmas Day!

Here are some tips from our design team:

Make sure your design complements the Stuff logo.
Don't over-complicate it - simpler images often have the most impact. Keep in mind how your logo will look on Stuff.co.nz.
Avoid commercial or copyrighted images.
Feel free to use the space behind and in front of the Stuff letters, but try to maintain your design's overall balance.
Be original and have fun!!
Your design can be created using computer drawing or design software, or in pencil, crayons, felt tip or paint.

You can download the template here, and save your final copy as a .jpeg or .png or .gif, max file size 2MB.

How to enter:

To enter the competition, Email your submission to competitions@stuff.co.nz with your name, address, age (only provide if 15 and under) and daytime phone number before 5pm on 7/12/09.

Get ideas what previous Stuff doodle logos look like? check them out at here. and Good Luck!

网站COO应该掌握什么技能？

2009-11-16T20:31:00.001+13:00

伴随着网络的飞速发展，各行各业都经历着从传统营销向网络营销的巨大转变。然而能够掌握运营技术，可以帮助网站取得效益的网站运营经理实在是凤毛麟角。即便在运营良好的网站当中，真正系统学习和研究网站运营技术的人才也为数不多，他们更多的是靠摸索积累经验，对网站的认识缺乏系统性，缺乏理论指导。在如此众多的网站应运而生的情况下，一定会对网站运营经理产生巨大的需求。

网站运营经理这个岗位究竟是个什么样的?　该了解些什么?　选择一个好的网站运营经理的标准是什么?　请看下面的图解，如果有什么要添加的，请告知我，谢谢！

Google Closure Compiler VS YUI Compressor

2009-11-16T17:27:00.002+13:00

In terms of Javascript Compression, the YUI Compressor is designed to be 100% safe and yield a higher compression ratio than the other tools listed above. That’s why most of the JavaScript Frameworks use YUI Compressor to minimize their Javascript code.

On November 5th, Google announced Closure Compiler for Javascript compression. The strongest part of the Closure Compiler is that it does not only remove whitespace but also it rewrites Javascript Code to make it smaller. It also optimizes your Javascript code to perform better.

I found a simple slides which compared the compression performance of YUI Compressor and Google Closer Compiler. It's worth taking a look at it.

Closure Compiler vs YUI Compressor

If you ask which one should you use? "Whichever you find best for you" I think is the general answer at the moment - YUI has been available longer so undoubtedly will be the one which currently being the best tool.

How to use HTML dl, dt, dd tags

2009-11-13T14:06:00.001+13:00

Many web developers would love to create web design using table tags. In fact, by using HTML dl, dt, dd tags, you will save on writing more codes and add more semantic value to the content. Whereas table are best use for tabular data, and should not be use in listing data, web form or web layout.

If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.

It may both look identical, but look closely behind the codes.

Table List Data

A typical listing data using table can be as follow. First we have a tr table row to hold the title and the data td table cell. Then when we need to style the title element, we will need to give a class to that td table cell.

<table>
 <tr>
  <td class="title">Name: </td>
  <td class="text">John Don</td>
 </tr>
 <tr>
  <td class="title">Age: </td>
  <td class="text">23</td>
 </tr>
 <tr>
  <td class="title">Gender: </td>
  <td class="text">Male</td>
 </tr>
 <tr>
  <td class="title">Day of Birth:</td>
  <td class="text">12th May 1986</td>
 </tr>
</table>

So over here in the CSS, we style the title class that we had declare in the HTML.

/*TABLE LIST DATA*/
table {
 margin-bottom:50px;
}
 
table tr .title {
 background:#5f9be3;
 color:#fff;
 font-weight:bold;
 padding:5px;
 width:100px;
}
 
table tr .text {
 padding-left:10px;
}

From here you can see that if you want to change the design or format for the title in the CSS, you will need to give each td for the title a class. If you want to style the data as well, you will need to give a class to it as well, so you are actually writing a lot of codes. More codes mean larger file size to download, more chances for bugs and harder for you to maintain.

DL, DT, DD List Data

Now, let's look at using HTML dl, dt, dd tags for listing the data. First we have the dl (definition list) tag to hold the whole set of data, next we have dt (defines the item in the list) tag and dd (describes the item in the list) tag to hold the title and the data.

<dl>
 <dt>Name: </dt>
 <dd>John Don</dd>
 
 <dt>Age: </dt>
 <dd>23</dd>
 
 <dt>Gender: </dt>
 <dd>Male</dd>
 
 <dt>Day of Birth:</dt>
 <dd>12th May 1986</dd>
</dl>

Over at CSS, we will need to float the dt tag, so that the title for the list data will align to the left. The rest of the styling is up to you.

/*DL, DT, DD TAGS LIST DATA*/
dl {
 margin-bottom:50px;
}
 
dl dt {
 background:#5f9be3;
 color:#fff;
 float:left;
 font-weight:bold;
 margin-right:10px;
 padding:5px;
 width:100px;
}
 
dl dd {
 margin:2px 0;
 padding:5px 0;
}

From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.

So if you are still using table to consolidate or list your data on the web form and web layout, it's really time now to make the switch. It's definitely going to make your life a lot more easier.

李开复博士《给创新工场求职者的一封信》

2009-11-12T11:34:00.003+13:00

李开复博士的新一篇博文《给创新工场求职者的一封信》看了文章，很受启发，同时也对自己的选择更加做出了坚定的信念。高薪并不一定等于合适，选择工作的时候更应该选择一份合适自己能力和性格发展的工作。我从中摘取两句话，值得回味一下：

你的第一份工作还是能给你带来很多震撼教育：它会潜移默化影响你究竟想过上怎样的一种人生。毕竟，我们每个人都没有聪明到可以计算到未来的每一步起伏变化，那么，你未来在面对那些重大而艰难的决策时，帮你做出决定的除了你个人的才智、经验，还有你的世界观。

我希望活得深刻，并汲取生命中所有的精华。然后从中学习，以免让我在生命终结时，却发现自己从来没有活过。

下面是文章全文转载：

创办创新工场的两个月里，我每天都在不同场合感受到国内创业者及有志于创业的大学生的热情与朝气。我们发出了大约三十封邀请，大多数也决定加入创新工场。这多多少少证明了我当初的想法：中国有着足够多的和我们志同道合的、人品好、有创业精神、扎实的计算机基础和团队合作精神的青年人。

不过，在我和很多青年朋友交谈时，我也看到很多人的疑惑——特别是那些尚未毕业但怀揣梦想的大学生。一些非常聪明的学生朋友也会有一些极为朴素的好奇：如果我可以加入一家已经成功的公司，直接过上很舒适的生活，为什么要创业？大学毕业后，是不是只有大公司才能帮助我成为一个卓越的技术人员？如果创业失败了，而我在这几年里又做出了很大的个人收入及私人时间的牺牲，是不是很亏？

其实，我一直这样告诉青年朋友们：毕业后第一份工作最重要的是你是否能够学习到最多，而不是其他。虽然很多人在学校里已经非常优秀，但你的第一份工作还是能给你带来很多震撼教育：它会潜移默化影响你究竟想过上怎样的一种人生。毕竟，我们每个人都没有聪明到可以计算到未来的每一步起伏变化，那么，你未来在面对那些重大而艰难的决策时，帮你做出决定的除了你个人的才智、经验，还有你的世界观。这些观念除了从小养成的部分，还有很大部分来自于你刚刚进入社会那几年受到的身边人的影响、遇到的工作挑战。那么，如果你希望成为一个优秀、健康的人，你应该让自己在毕业时就能置身于一个由正直而聪明的人组成的、有挑战的环境中去。这正是我在创新工场所希望营造的。

很多年轻人愿意加入一些成熟的公司。无论中国过去三十年成长起来的优秀公司，还是外国那些财富500强，都很有吸引力：不错的薪酬、良好的福利、健全的体系，以及大众熟悉的品牌……我当然知道这些东西都很好，但它并非适用于每一个人。有一些人，他们是天生的“创业者”，天生的“特殊的人”。

看看你自己是否属于这些“特殊的人”：你相信可以通过自己的努力来让这个世界变得更好；遇到各种现实生活中的问题与困难时，你更多思考的是解决问题的方法、积极地去让现状变好，而不是抱怨与忍耐；你更愿意将工作视为一次激动人心的旅途，而非日复一日的庸常无聊的糊口方式；你愿意用自己的方式去尝试、探索这个世界，而不是人云亦云，遵循常规……

如果你认为自己符合以上这些标准，那么进入一家成熟公司对于你很可能将成为漫长的消磨。毕竟，无论多么伟大的公司，当它的体系已经形成，初出茅庐的年轻人是不可能参与到最核心的创新工作中的，也更难突破既有的规范。就像你不能想象比尔·盖茨在IBM里开发出Windows，如果拉里和谢尔盖从斯坦福毕业之后加入了雅虎，他们也就不可能创造出Google。

还有一些人可能会问，开复你自己也曾经在苹果、微软、Google这些大公司工作，为什么今天反过来说它们并不适合一些人？我非常乐于承认，我在这些了不起的公司学到了很多东西，但就像我加盟微软是开创其中国研究院，加盟Google是为了创建Google中国，这种经历已经很像创业，可并非每个人都能获得类似的机会。而且，我以前的太多同事已经证明：创业者就是创业者。我在每一家公司都有很多极为优秀的同事最终告别了令人羡慕的生活，去从零开始创建属于自己的天地。比如我在苹果的同事Andy Rubin后来去创办了Danger手机公司最后成为Android，我在SGI的同事Mike Ramsay创立了Tivo，我在微软的同事Rob Glaser创立了RealNetworks，而今年热门的创业公司FourSquare和RedBeacon都是前Google员工创建的，还有谷歌中国的员工也创立了Babytree、Light-in-the-box、浪淘金、欧酷、Papaya Mobile等公司。那些不安于室的人总会去接受使命的召唤，只是早晚问题。

有些人认为，大公司能让他们专心于技术开发，能够获得更多的培训机会。但他们没有意识到，工作并非读书，毕业后最好的学习不是来自课堂式的“培训”，而是来自“learning by doing”的实践。工科的同学，毕业后最好的学习就是投入一个有用户价值，有商业模式的产品的研发。在这样的环境中所学的技术是真本领，不是纸上谈兵，解决的是真问题，而不是toy problems。那些真正有意义的产品是能最大程度上影响最多人的生活的，它们绝不仅仅因为技术先进，还因为它们是人们最需要、最在意的。想想那些真正的“颠覆式创新”，个人电脑刚刚诞生时，效率远远不如大型机，而YouTube的视频效果也大大不如电视，但它们契合了大众所需，并彻底的改变了世界。如果你想创造最好的技术，你一定要被推到用户面前，理解他们所想所需，尽你所能满足他们。

对于那些感叹“为什么创业公司为什么没有五星大厨和龙虾鲍鱼？”，我希望你们看得更远一点。创业公司拿着得代表投资者信任的资本，花每一块钱时必须问问自己：“如果是我自己的钱，我会这么花？”，因为作为公司股东和主人翁，这个公司确实是自己的。在创新工场，我们没有五星大厨和美食，但是我能够承诺的是我会和你们一起住二星酒店，吃十元的饭盒。我也会把你们当我的家人，带来公司我回台湾买的美食，或者我自己做的烧饼或牛肉面。

对那些感叹“为什么创业公司薪水不如最高的跨国企业？”，我也希望你们看得更远一点。选择创新工场，你走的是盖茨、拉里和谢尔盖的路，而他们是这世界最富有的人。我从来不建议人们为发财而创业，但不妨反过来想，钱本身就是一个由市场机制做出的评判：你创造的价值越大越稀缺，人们就越愿意为之付费。因此，我们只给员工合理的薪水，却相当慷慨的给他们相当多的干股和股权，这才是未来价值最大的部分。虽然这种回报并不确定，但我真心相信每名工程师都可能成为创业者和企业的主人，也可能为自己创造巨大的财富。

当然，商业世界并非充斥着光辉灿烂的成功者，还有很多失败者。即使最乐观的说法，就算创新工场帮助你提升成功概率，缩短产品周期，失败的概率依然远远大于成功。真的应该用自己人生最宝贵的几年时光参与到一次前途未卜的创业旅途中吗？

这是一个你必须自己回答的问题。有些人只用几秒钟就可以得出答案，有的人则会思索一生也无法说服自己。但当你确信自己真的愿意走上这样的旅程，并以正确的、正规的方式创业，无论你最终取得了何种程度的商业成功，相信你一定能够学到非常多的东西。当你全心投入创业，每天你都要解决大大小小的种种问题，这会帮助一个富有才智的年轻人迅速成长。

退一万步说，即使失败了，会怎么样呢？别忘了，即使今天被全球商界视为偶像的乔布斯，在他30岁到45岁期间，也有过被苹果驱逐、创建NeXT失败，经营Pixar动画公司被好莱坞无情打击的连续的挫败经历，但他扪心自问，自己依然热爱科技业，依然愿意以创建公司的方式改变这个世界，并坚持前行，他才成为日后那个创造iPod和iPhone的乔布斯。

乔布斯的一生，就和梭罗说的一样：“我希望活得深刻，并汲取生命中所有的精华。然后从中学习，以免让我在生命终结时，却发现自己从来没有活过。”

也可以反过来说，如果你希望过上一个安稳的生活，如果你每天考虑的都是如何还上房贷和车贷，如果你安于现状，如果你畏惧失败，那即使你既聪明又有商业头脑，可能你也不应该接受那些创业公司的邀请。这样你可以得到安稳的一生，但是也放弃了让自己人生更丰富多彩的一种可能性。

最近的两个月，我自己也在寻找走上一条与以往不同的道路的方法。我和我的同事们每星期工作70个小时，去优化创业公司的每一个环节（比如和很多一般创业公司只能仰视的大公司谈成合作），致力于减少影响创业者的外力（比如招聘、工商注册、税务、法务甚至房屋租赁……），去挖掘每一个人才（数次我写信给毕业生的父母），从而让创业者可以最大程度的专注。而我由此获得的，是和许许多多拥有一流想法的人进行深入而有趣的探讨，一起探索让这个世界与以往不同的可能性。所以，如果你符合我在前面说的标准，又愿意得到和我一样的头脑上与精神上的丰富收获，那么，你应该重新做一道算术题：“知名大公司+优厚的薪水+安稳的工作+舒适的生活”，和“属于你的公司+丰厚的股票+快乐的打拼+改变世界的机会”，究竟孰轻孰重？

YUI CSS Framework Tutorial

2009-11-06T15:50:00.004+13:00

Accidentally, I discovered iGoogle is using YUI CSS framework, being curiosity I've been digging around it, found that YUI CSS framework is very powerful, It's a very useful because has a lot of possibilities of grids and it also has a online grid generator to help fast start.

The CSS Frameworks are not for CSS starters (newbies)! They are for people who know CSS but want more organized approach.

Positive/negative aspects of the CSS frameworks
Positive:

- They usually have multi - browser support.
- If the CSS Frameworks are public and have community support a lot of bugs and problems are fixed. Also you have a lot of code examples.
- They usually have 80% of all the CSS code that you will ever need.
- You can learn a lot from the CSS Frameworks .

Negative:

- There will be some CSS code from the framework that you will never use.
- You need time to learn how the CSS framework works.
- Bug fixing is not always simple (first you have to learn how the framework works)
- It’s not so “semantic” (class=”menu-left” – semantic v.s class=”div-xyz” not so semantic)

Here I'd like to introduce this tutorial to you. Done by Mike Sweeney, who is a web developer from Las Vegas, in the following tutorial, Mike shows us how to utilize the YUI CSS Framework to cut down on the time and stress it takes to produce a good layout.

What is YUI?

The Yahoo User Interface library is comprised mostly of Javascript utilities and controls to help front-end developers create a rich user interface. It also comes with a great CSS framework to make developing websites a lot faster. This CSS framework is what we’ll be focusing on today. It’s lightweight (less than 6KB when minified), easy to use, and most importantly, it works with all major A-grade browsers.

Why use it?

Any good UX designer will tell you that one of the keys to making your website easy to use is consistency. Your goal should be to not make users use more than the necessary brain power it takes to understand the point you’re trying to get across. People are used to seeing sites designed in certain ways and the YUI CSS Framework covers these basic design patterns without having to make you think too hard as well. Everybody wins.

This doesn’t mean that Yahoo is trying to make everyone design the way they say, however. They leave plenty of room for customization for the “wild at heart” amongst us that want to dish out the newest interesting custom design pattern. More on this in a bit.

Getting Started.

The first step is to get the YUI CSS Framework. I gave you the direct link for it here, but I would also recommend taking a look at the YUI Developer Site. If you head to that page, on the left menu there’s a navigation header labeled “YUI Components”. Most of those are the YUI JS utilities but if you scroll down, you’ll see that the last four sub links are for CSS. There’s a lot of great information there for you to check out including a 42 minute video that explains probably more than you’ll want to know about how the CSS Framework works (well maybe not more).

You may have noticed when you clicked the link that the name of the file is “reset-fonts-grids.css”. This is actually a combination of the three main components that make this all work all combined into one minified CSS file for your convenience. If you find yourself asking whether or not you can download them separately, the answer is yes…however they are a bit dependent upon each other, so use caution. If you’re using another reset file such as the famous Eric Meyer’s Reset CSS, you can (most likely) safely use that instead of Yahoo’s version, but why try and fix what isn’t broken? Now when it comes to the other two components, fonts and grids, grids relies on the fonts css to declare the proper width for an “em”, which grids uses for just about everything.

Reset

If you’re not already using a reset css file, I definitely recommend you seriously look into using one – even if you don’t want to use YUI. Each browser has it own set of defaults when it comes to margins, line-heights, padding, etc. that can make life tough when trying to code out your layout. What reset does is simple, yet extremely useful. It takes away all of the browser defaults and sets them to all use the same stuff. The days of using “*{margin: 0; padding: 0;}” are over. It’s time to get with the program.

Fonts

As described above, the fonts portion defines the width of the “em” for which everything is based on. It also, however, takes away all of the browser font defaults and sets every relevant html tag to use a font size of 13px, a line-height of 16px, and all but the pre and code tags to use the Arial font (pre and code use the monospace font family). What does this mean for you? It means you’re going to need to define the font sizes and/or families you’re going to want on your website yourself. Don’t look at that as a bad thing though, you’re most likely doing this already (or you should be). This, like reset, takes away the differences in the default styling of the browsers for a consistent look and feel. Yahoo provides a recommended way to define your font sizes using the percentages defined on their fonts page.

Grids

Now this is where things start to get fun. YUI makes it very easy to layout everything on your site without having to use those cumbersome tables. Let’s take a look.

Setting up the page.

YUI breaks up a page in a very familiar way to most designers. You’ve got your wrapper div, which also determines the width of your site. And within that you’ve got your header, body and footer. Pretty easy right? Here’s how it looks.

<!DOCTYPE html>
<html>
 <head>
  <title>My first YUI Layout</title>
  <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css" />
 </head>
 <body>
  <div id="doc2"><!--Wrapper div -> doc, doc2, doc3, doc4, or doc-custom-->
   <!--These three are not required to use if you prefer something else, but they're pre-defined for you-->
   <div id="hd"></div>
   <div id="bd"></div>
   <div id="ft"></div>
  </div>
 </body>
</html>

We’ll start by focusing on the wrapper div. YUI offers you four different standard widths:

doc – 750px
doc2 – 950px
doc3 – Fluid
doc4 – 974px

And for all you “rebels” out there, you can create a custom width in your own stylesheet using the doc-custom wrapper. It’s a good thing to keep these widths in mind when designing your site. It will make your life much easier. The rest of the document is pretty self-explanatory.

Templates.

Now that we’ve got the basic layout of the page, we’re going to add content using yahoo’s predefined template classes. The concept behind the templates is extremely easy. You’ve got two main blocks of content that you want to position within your body (bd). You’re going to put all of your content within one of these two blocks. You define a block simply by giving the div a class of “yui-b”. Once you’ve done that, you need to tell YUI which block is the main block for content (i.e. the wider block) by wrapping it in a div with an id of “yui-main”. The reason you need to do this is some browsers don’t support the pseudo class of “:first-child”. And by some, of course, I mean IE.

...
<div id="bd">
 <div id="yui-main">
  <div class="yui-b">
   ...some content here...
  </div>
 </div>
 <div class="yui-b">
  ...some content here...
 </div>
</div>
...

This tells YUI which block of content is the main focus of the site. Regardless of whether the main content block is to the left or to the right of the sidebar, you can always put it above the less important code (the sidebar). This way you can keep your best content at the top of the source (helps with SEO).

Now that we have defined the blocks of content, we need to tell YUI where to display it. That’s as simple as adding a template class to the wrapper div (the doc). Yahoo has provided six different pre-defined layouts for use:

.yui-t1 – Two columns, narrow on left, 160px
.yui-t2 – Two columns, narrow on left, 180px
.yui-t3 – Two columns, narrow on left, 300px
.yui-t4 – Two columns, narrow on right, 180px
.yui-t5 – Two columns, narrow on right, 240px
.yui-t6 – Two columns, narrow on right, 300px

Yahoo has chosen these layouts as one of the most common things found in sidebars are ads and most ad networks have a consistent set of sizes for the ads they serve. Wouldn’t you know it? Most of the them match up to the template sizes YUI provides.

Let’s continue by adding the template class of “yui-t6″ to our document wrapper as it’s a fairly common layout.

<div id="doc2" class="yui-t6">

Now add some dummy text in there and look for yourself. Voila! You have a layout.

Special Grids.

Now what if you don’t want to use any of the pre-made templates? Say your design calls for 3 columns instead of two. Or maybe you want to add something with the template you created that needs to be broken up into sections? Not a problem. YUI has a grid layout system that pretty much covers any custom block layout you want without the need to use tables.

The Grid system works very similar to the templates shown above. You have your outer div (the grid), and your inner divs (called units) which work very much the same as blocks (remember .yui-b?). Let’s take a look at how to set one up.

<div class="yui-g">
 <div class="yui-u first">
  ...some content here...
 </div>
 <div class="yui-u">
  ...some content here...
 </div>
</div>

This will create a grid with two equal width blocks that will fill whatever container they are inside. The only real thing to take note of here is that whichever div you want to appear first (on the left), make sure to give that div a class of “first” along with the unit class.

Similar to templates, there are six different types of grids you can use:

.yui-g – Standard grid, 1/2 – 1/2
.yui-gb – Special grid, 1/3 – 1/3 – 1/3
.yui-gc – Special grid, 2/3 – 1/3
.yui-gd – Special grid, 1/3 – 2/3
.yui-ge – Special grid, 3/4 – 1/4
.yui-gf – Special grid, 1/4 – 3/4

Now the thing that makes this great is that you can also nest grids as much as you’d like. Want a grid that displays in quarters as opposed to halfs? Let’s check out how to do that.

<div class="yui-g">
 <div class="yui-g first">
  <div class="yui-u first">
   ...some content here...
  </div>
  <div class="yui-u">
   ...some content here...
  </div>
 </div>
 <div class="yui-g">
  <div class="yui-u first">
   ...some content here...
  </div>
  <div class="yui-u">
   ...some content here...
  </div>
 </div>
</div>

The thing to keep in mind here is that when you nest a grid within another grid, that grid also acts as a unit for it’s parent grid. There’s no need to nest it within a div with a unit class attached to it.

Conclusion

This framework really helps with cutting down on development time and making sure that the more important content is displayed before the rest within the source (great for SEO). If you keep this in mind the next time you design a website, you’ll notice a huge gain on time and quite possibly a relief of the stress of making your website look the way you want without hacking away at it.

Once again I’d like to stress taking a look at Yahoo’s site for YUI CSS, as it’s got great references on how to use this including videos, examples and a nice little cheat sheet so you don’t have to remember everything off the top of your head.

Demo Site
Demo Download

Stuff.co.nz logo -- Guy Fawkes Night

2009-11-05T17:22:00.005+13:00

Stuff logo today reminds you today is Guy Fawkes night! Enjoy the fireworks tonight everyone!

Guy Fawkes Night is an annual celebration on the evening of 5 November. It marks the downfall of the Gunpowder Plot of 5 November 1605, in which a number of Catholic conspirators, including Guy Fawkes, attempted to destroy the Houses of Parliament, in London, capital of England.

It is primarily marked in the United Kingdom where, by an Act of Parliament called the Thanksgiving Act, it was compulsory until 1859, to celebrate the deliverance of the King of England, Scotland, and Ireland; but it is also celebrated in former British colonies including New Zealand, Newfoundland, South Africa, and parts of the Caribbean. Bonfire Night was celebrated in Australia until the mid- to late 1970s, when sale and public use of fireworks was made illegal and the celebration was effectively abolished. It is also celebrated in the British Overseas Territory of Bermuda. Festivities are centred on the use of fireworks and the lighting of bonfires.

Description from wikipedia

CSS Font Size Conversion Chart

2009-11-04T11:24:00.003+13:00

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Here is a chart that will help you find the conversion of pt,px,ems and %. The chart is good for an approximation, font size can change based on font, and operating system.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

For those of you who are still using pixels, it’s about time you made the switch to ems or points. Why should you use em for font sizing?

The simple answer is scalability. If you have a have a site that you want accessible to multiple audiences then use em’s. By multiple audiences, I mean those using mobile devices, like a Blackberry or iPhone. Also, this means that those users of the later generation….alright, older people, with bad vision…can see your website in the exact proportions you intend. What I mean by this is, if you hold CTRL and use your mouse wheel, or go to “view > text size” in Internet Explorer, your font size will be fully controlled by the user and not by you, ruining your design! Using ems will make all your sizes become proportional to the original settings! This will help retain your font-sizes despite what a browse or user decides to do to it!

Here is a little trick that will help you so you don’t have to remember the chart above.

body { font-size: 62.5% }

This will make 1.0 em the same as 10px. So if you wanted 12 px. would be 1.2em, nice and easy. Hopefully this will help you out.

stuff.co.nz Halloween logo

2009-10-31T17:14:00.010+13:00

Halloween (also spelled Hallowe'en) is an annual holiday celebrated on October 31. It has roots in the Celtic festival of Samhain and the Christian holy day of All Saints, but is today largely a secular celebration.

Halloween activities include trick-or-treating, wearing costumes and attending costume parties, carving jack-o'-lanterns, ghost tours, bonfires, visiting haunted attractions, pranks, telling scary stories, and watching horror films.

Description from wikipedia.

CSS Nuggets

2009-10-29T15:55:00.002+13:00

一个PPT文档，由Anna Debenham上传至slideshare。幻灯片的标题叫做《CSS nuggets》，嗯，很好的名字。

但是对于网站前端开发人员来说，这个幻灯片绝对值得一看，它主要讲解了一些CSS3的新属性，包括伪类/伪元素和一些新增的属性，比如transform，shadow 等。实例和配图很棒，相信对CSS3还有些疑惑的朋友，看了这个之后会很好的理解CSS3的吧。

我曾经post过一篇文章 9 CSS3 Properties You Can Use Now, 其中提到了几种用法没有囊括在下面的slide里，有兴趣的话可以去看看，也不妨试试。

CSS Nuggets

View more presentations from Anna Debenham.

功能强大的CSS3，的确有时候让前端开发的工程师流口水，但是用时却望而却步，就是因为该死的IE

西安小吃，口水都流出来了

2009-10-29T15:36:00.002+13:00

一般关于互联网之外的内容都不会上我的博客，但今天就破个例吧。看到有个西安乡党在网上贴的西安小吃大全，看着看着谗地口水就不由自主的出来。有食欲！

转贴给朋友们也饱饱眼福。

荷叶饼夹笼笼肉~

蜂蜜凉粽子

牵人麻辣粉

卤汁凉粉~

炸酱面

洋芋擦擦

杨凌蘸水面

羊血冒饸饹

羊肉烧卖

羊肉泡馍经典套餐

酸汤水饺

酸菜鱼鱼

水盆羊肉

涮牛肚

石子馍

砂锅米线

肉丸胡辣汤

肉夹馍

秦镇米皮

乾县锅盔

乾州豆腐脑

岐山哨子面

泡泡油糕

玫瑰镜糕

金线油塔

搅团

贾三灌汤包

黄桂柿子饼

葫芦头

锅贴

八宝粥

八宝饭

重阳节百度老年搜索推出web手写输入汉字功能

2009-10-26T20:28:00.003+13:00

今天是中国传统节日重阳节，百度携手汉王为全国中老年用户送去一份最温馨的节日祝福 -web手写输入功能，用户可以直接通过鼠标移动来输入汉字，这将为不习惯键盘打字的用户使用搜索引擎带来更大便利。我不得不说，这产品对老年人来说真不错！

百度老年搜索的核心要旨是：让中老年用户最便捷地获取信息，找到所求。它主要为中老年用户提供以下三大类的服务：
1、提供字体更加符合中老年用户体验的主页界面以及搜索结果；
2、整理和开发出了让中老年用户能够需要和使用的实用性网站；
3、在数百万网站中遴选出适合中老年用户的常用网站，并进行了分类收录和及时更新。

在“老年搜索”的首页，我们看到了类似百度盲道的排版方式：搜索+导航，在字体的大小上由普通版百度的16号字体变为24号字体，便于老年人看清，并且通过老年搜索得到的搜索结果页面的字体也是24号，在字体的选择上有大中小三种选择。在“老年搜索”的帮助页面我们看到，为了帮助老年人上网，还增加了电脑常识、网络常识、常见问题等等，满足老年人的信息需求，非常人性化。

百度这一点做的没话说，我个人很认可，百度想到了，Google和taobao就没有。这就是创意。很多事情谁都可以做到，但就看谁是第一个想到的，谁又能第一个做到。

A letter from Google Adsense

2009-10-23T22:43:00.002+13:00

想必很多个人站长都对Google AdSense美元付款的政策有些不爽，设定限额100美元不说，来回的手续繁琐和漫长等待也是让人难熬。想想为了获得100美元的付款，苦苦等待了好久，再加上漫长的账单，确实是折腾得苦不堪言。对于个人用户，谷歌将从付款中预先扣除税金，企业帐户则需要在收款前提交发票

其实个人站长玩玩AdSense，蛮有乐趣的。今天收到了Google Adsense的信件，是发自Google总部 Mountain View。原以为 New Zealand 应该属于 Google Australia 管辖范围，应该从Sydney发给我的。看来各个国家分布只管研发和技术，财政方面还是由 Google 总部直接处理。

下面是信件的封皮，给朋友们看看：

Wave是什么Google的新玩意儿

2009-10-22T11:36:00.002+13:00

花了一早上的时间研究到底Google Wave 能做什么。也找到了不少相关的文章还有视频，筛选了一下，推荐给Google Wave fans 下面这段视频和这篇文章。视频有些长（1小时20分），但是很值得一看，很多小细节的描述它的功能。其中还有很多功能在我的preview版本还暂且不能应用。期待它早日完善和大家见面。

文章转载来源：第一财经周刊

每过一段时间，这家以创新和不羁著称的公司都要捣腾些新玩意儿，好让技术尝鲜者们兴奋，让普通人困惑，让媒体们追捧。Wave显然也是这样一个新玩意儿—在今年5月29日Google的I/O开发者大会上，Google Wave 的演示做了足足有80分钟之久，演示结束后，台下的掌声和尖叫不断。

9月30日，Google放出了10万个测试邀请来让开发者们尝鲜，结果其中一些被好事者放到eBay上拍卖，拍出了上千美元的高价。
需要80分钟演示的产品实在无法三言两语解释清楚。Wave被称为是如果电子邮件现在才发明出来它将呈现的样子(第一份电子邮件出现在1971年)，它整合了邮件、即时通讯(IM)、在线合作、社交、维基等功能。

它看上去像一个邮件系统，界面分为三栏。左侧和中间一栏像极了带上头像标识的Gmail邮箱。右侧的一栏是邮件显示的空间，正是这个部分让这个“现代邮件系统”有了更多新意—当你沟通对象在线时，你们可以直接聊天；你还可以随时随地将第三者或更多的人加到对话中来，像是群聊；聊天过程中你可以随时回到上面的对话中挑出你要回复的任何一句进行回复，看起来就像是在Word文章中加了一个标签，只不过人家可以针对你的“标签”再次回复。

“Jens(Rasmussen)对Email很不满，毕竟Email出现得比互联网还早。我们希望能够体现出Mail的重点，并且配合上现在流行的电脑和网络的工作方式。” Lars Rasmussen说。他和Jens是一对来自丹麦的兄弟，是Google Wave的开发者。2003年他们创建了Where 2，2004年这一产品被Google收购之后演变为Google Maps，两兄弟也成为了Google中的一员。之后两兄弟把对Email的改造作为自己的下一步工作重点。

Jens和Lars最开始准备解决的问题是如何将IM直接整合到网页邮件的界面中。事实上这一点Google已经做到了：Google talk和Gmail已经很好地结合在了一起。但兄弟俩觉得这仍然不够。他们搭建起一个平台，让邮件的内容和即时通讯的内容看起来连接得更加无缝，也更容易在线协作。不论对话者是否在线，对话和邮件内容都可以在同一栏中显示。在需要共同协作的时候，在线者可以对同一内容进行同时编辑，这一点很像Google Document的在线协作功能。

Google基于云计算的技术使得这种实时交流和协作非常顺畅。无论是同时在线修改还是共享文件，都不会太慢而显得有时滞。

作为平台的Wave也开放了免费API(Application Programming Interface，应用程序编程接口)，可以兼容许多扩展和插件。通过这个平台上的插件，对话双方可以共享图片或者地图；也可以通过一个Wave来接收Twitter上的所有tweets，并且通过Wave来回复tweets；可以直接通过Wave发布博客，并且在Wave中可以直接看到他人在你博客中的回复；一些插件还允许人们通过发起一个对话来直接在线玩游戏，现在Google提供的类似游戏有数独和国际象棋。这使得Wave具有了一些社交网站的性质。

这成为了吸引网络开发者的亮点之一，也使得Wave将不仅仅是个“邮件+IM”的系统，就像火狐浏览器开放API并且有许多扩展之后，它就不仅仅是个浏览器，还可以是个音乐播放器、FTP客户端、博客发布客户端……许多开发者已经跃跃欲试，试图在这个平台上开发出其他有用的插件系统。许多现在在iGoogle和Gmail中受人欢迎的插件也许也会出现在Wave中。

所有这些让Wave会在不同人手中变成不同的平台。在互联网简单使用者手中，它可能只是“邮件+IM”；在一些项目合作者手中，它会是个不错的在线协作平台，用于讨论以及方案共享及修改；在社交网站重度爱好者手中，它会是个社交网站的汇总平台，利用Wave收取来自Twitter、Facebook、博客等各种网站的最新动态。

“我们这是在尝试重新定义互联网上的沟通与交流。”Lars说。“现在最大的不确定是人们会如何用这个系统。”

Google期待Wave能将那些黏在Facebook和Twitter上的人吸引到这上来。毕竟，如果有个平台能够收取所有社交网站的动态，同时也可以轻松向那些社交网站上发布新消息，那为什么还要去分别登录那些网站呢？

“我想Google会成为最主要的社交网站，并且成为能将人们宽松联系到一起的地方。” Dan Olds，加百利咨询集团(Gabriel Consulting Group)的分析师说。在此之前，Google效仿Facebook的社交网站Orkut只在巴西获得成功，它的另一个社交网站开放式平台OpenSocial也没有取得预想的成果。

另一种可能性是，Wave也许能帮助Google赢得更多的商业客户。因为在以往的办公软件中，不论是IBM的Lotus还是微软的Groove，都需要借助多个不同的工具才能实现实时在线协作，而且操作繁琐。现在这些商业客户很可能会转而尝试Wave，看看是否会带来效率的提高。在此之前，Google一直试图让中小企业客户能尝试Google Apps，而不是微软的Office软件。

预见到这一点，一些企业，而不仅仅是软件独立开发者，已经参与到Google Wave的App开发中来。例如全球最大的企业管理和协同商务解决方案供应商SAP，利用云计算提供客户关系管理的Salesforce.com，都已经尝试将Wave整合到自己的服务中去。Salesforce将Wave用于客服，它给出的演示视频显示它可以让一个机器人来负责接待用户在Wave中发出的询问，并且所有这些Wave中的交流都会记录下来，并发送到用户所在salesforce的账户中，以备将来查看。

Google在其官方博客上说，已经在考虑建立一个“Wave 扩展商店”，通过这个商店，这些第三方开发者所开发的Wave运用可以销售。Google和开发者会进行分？?成。Google对Wave的期望不止这些。Wave不仅仅是个开源的平台，而且Google准备将它设置一个开源的协议。就像多年前的电子邮件协议一样，虽然用户用的是没有提供商的服务，但是彼此之间依然可以投递邮？?件。

为了做到这一点，参与Wave的开发人员有50人之多，几乎Google在悉尼的所有开发人员都参与了进来。要知道Google的项目开发团队一般只有3到5人。

“我们希望以后有多家Wave提供商，有些也许会和我们一样提供基于云的Wave，数据都在他们的掌握中。我们也计划协助企业或学校提供他们自己的Wave服务。”Lars说。就像企业可以架设一个服务器来专门建立公司邮箱一样，Google会支持企业设立自己的Wave，使得基于其上的通讯数据可以得到加密。Google已经开始着手Wave协议草案的编写，并且还专门设立了一个网站，来让人们了解“Wave协议草案”和“Wave架构的白皮书”。如果一旦这一协议被广泛接受，可以预见Wave将会像Email那样流行。而Google是这一领域的规则制定？?者。

而当诸多参与者都加入到Wave生态圈中，Wave可能产生的影响会是我们现在无法尽数的。Google的开发者就没有想到Wave测试才不过几天，新闻从业者已经在考虑Wave是否会对新闻业界产生影响。《洛杉矶时报》的记者Mark Millan就写了一篇叫做《Google Wave会如何改变新闻业》(How Google Wave could transform journalism)的文章，并将之放到了公开的Google Wave上，好看看会发生些什么。结果很多有趣的讨论随之展开，而且这些讨论有些会穿插在正文之中，看上去就像WIKI那样创造出了更多新的内容。

但是否会有如此效果，这需要看用户是否能接受这种新的形式。微软首席软件架构师雷·奥兹(Ray Ozzie)在接受Techcrunch采访时提到，人们很可能因为需要学习新的使用方法而不愿意去使用。

这的确会成为Wave成功的潜在威胁之一。10月以来，许多得到试用邀请的技术爱好者们已经在博客中抱怨Wave的一些不足。他们中的一些人往往无法适应对话呈现不是“线性”的这一特点。由于可以针对之前回话中任何部分进行回复，因此当对话已经进行了很长时间之后，针对之前内容的回复往往会不被对话者所察觉。而对于之后参与到回话过程中来的人而言，要看这么多回复穿插的对话会很麻烦。抱怨者们认为这使得Wave甚至没有电子邮件来得有效率。

“这相当没有效率，会浪费大量时间，并且很难把我需要的内容组织起来。”Robert Scoble在博客中说，他在微软这样的大公司工作过，也自己创办过小公司，在工作中他追求有效率的协作。

最新回复在正文的任何一个部分，这样的安排也挑战着人们的邮箱使用习惯。在往常的邮箱中，新邮件总在邮箱的最顶端，因此可以快速打开并且查看；但Wave允许人们针对任何一个部分进行回复，因此如果你离线之后再登录查收新消息，你也许会遗漏掉那些在非开头和结尾部分的回复。你当然可以用重放按钮，按照时间顺序依次查看回复，但是这就像要在一盘录像中找出你所需要的部分一样，所耗费的时间会让人不耐烦。

“我并不是说Wave没有价值，我只是觉得人们可能需要一些时间去让他们的大脑适应Google Wave，并且发现使用它的最好方式。”Adam Turner，一个澳大利亚的技术开发者在博客中这样说。如果是这样，Wave对企业的吸引力也会下降。

“对于独立开发者和企业而言，它的用途还需要进一步提高。”Redmonk的分析师Stephen O'Grady说，“Google需要和很多潜在的合作伙伴进行合作，把那些不必要的复杂的东西给去掉，开发更多那些必须具备的商业方面的功能。”

“现在Wave还没有完全完善。”Lars说，这个Wave的开发者期望能在今年年底之前将很多Wave的bug给修复。

How to tweet from Google Wave

2009-10-21T20:57:00.001+13:00

Finally, received Google Wave invitation today. I was testing around, but not many friends on Google Wave so far, so wondering if it is possible to tweet from it.

OK, Let me show you how you can tweet from your shiny Google Wave account.

Step 1: Add a new contact called tweety-wave@appspot.com as shown below.You will see a new contact with display name Tweety the Twitbot.

Step 2: Create a new wave with this new contact and It will ask for authentication using a popup window. Make sure popups are not blocked or will have to allow them explicitly so that Twitter’s authentication window can authenticate your Google wave account to update your status on twitter. Here is how the popup and your new wave look like.

After authenticating all your twitter updates are shown in that wave and you can even update your status from then & there – Sweet ?

Hope you like this and enjoy tweeting from Googlewave.

Create Cascading Dropdown Lists By Using JQuery

2009-10-21T16:19:00.007+13:00

When I was building the Travelbug widget for Stuff.co.nz, I have been using jQuery as the standard JavaScript library for most of web projects for Stuff. Such as "Most Popular Box", "Pointers Slider" ...

Today, Let me guide you through on how to create cascading dropdown lists by using JQuery.

Here is a simple demo. Please look at the "Deal" section down the right hand side column.
.

1. Include jqury.js. You can get JQuery from here.

<script language=”javascript” src=”jquery.js”></script>

2. Write this simple function in a javascript block in head.

function makeSublist(parent,child,isSubselectOptional,childVal)
{
 $("body").append("<select style='display:none' id='" parent child "'></select>");
 $('#' parent child).html($("#" child " option"));
 
  var parentValue = $('#' parent).attr('value'); 
  $('#' child).html($("#" parent child " .sub_" parentValue).clone());
 
 childVal = (typeof childVal == "undefined")? "" : childVal ;
 $("#" child ' option[@value="'  childVal  '"]').attr('selected','selected');
 
 $('#' parent).change( 
  function()
  {
   var parentValue = $('#' parent).attr('value'); 
   $('#' child).html($("#" parent child " .sub_" parentValue).clone());
   if(isSubselectOptional) $('#' child).prepend("<option value='none'> -- Select District -- </option>");
   $('#' child).trigger("change");
                        $('#' child).focus();
  }
 );
}

This function takes 4 arguments: the parent select input’s id, the child select input’s id, and a boolean value to indicate whether to select an item from child list by default.

For example: makeSublist(’Regions’,'Districts’,false, 1);

This function will make the options of ‘Districts’ list depending on the selection of ‘Regions’. And user have to select
a location from ‘Districts’.
Here ‘Regions’ and ‘Districts’ are the IDs of parent and child select input respectively.

3. Add a class to the ‘<option>’s of the child list box. The class name will be the value of it’s parent ‘<option>’ in parent Districtsox with a ’sub_’ prefix.
Suppose, in parent Districtsox there is an item “Auckland”. Its value is ‘akl’:

<option value="akl">Auckland</option>

When the item "Auckland" will be selected, the sub-items should be visible in child Districtsox. These items should hold the class name ’sub_akl’:

<option class="sub_akl" value="Auckland City">Auckland City</option>
<option class="sub_akl" value="Rodney">Rodney</option>
<option class="sub_akl" value="North Shore">North Shore</option>

4. Now you are ready. On ‘$(document).ready’ event of Jquery, run the function to associate your list boxes.

$(document).ready(function()
{
makeSublist(’parentID’,'childID’, false, 1);
});

5. Testing out! and Questions??

IE Favicon Not Showing Bug Fix

2009-10-13T16:39:00.000+13:00

The first time a user visits your site, browsers automatically searches for this [favicon.ico] file in the root directory. Otherwise, when the favicon.ico does not exist, the error.log shows favicon.ico as "404 file not found". If your favicon.ico file is not located in the root directory, you probably have to specify the path way to favico.ico file.

All the other web browsers can load GIF or PNG format as favicon, but crappy IE. I browsed around (about 10 websites), got following result and rules from their source code.

If there exists a favicon.icon in the root directory, non-IE browsers automatically pick up it without having to specify the link tag inside the head tag.

To make sure IEs pick up your favicon

Create a favicon.icon file, then locate favicon.ico file on your server (prefer in the root directory, but you don't have to)
Define this line inside head tag <link rel="shortcut icon" href="/favicon.ico" /> .

15 Years of Yahoo! Logo 1994-2009

2009-10-09T22:34:00.000+13:00

我们曾回顾了雅虎主页15年变迁之路，今天我们再来回顾下，作为公司重要标志的 Yahoo! Logo 的变化历程（1994－2009）。

1994，没有标志。一开始雅虎并没有标志，事实上，那时也还不叫雅虎，大卫和杨致远将他们创造的网站目录，称之为”杰里网站指南”。直到那年末，雅虎才成为公司的正式名称。

1995，跳跃的”Y”形象。和许多公司一样，当人们需要用东西来装饰办公室的门和公司的T恤衫时，催生了这个跳跃的”Y”型拟人化形象。标志由 David Shen 设计，蓝色的圆圈代表世界，Y 代表雅虎，寓意跨越世界。如果幸运的话，现在你还能会从一些雅虎老员工的名片上看到这个标志。
这年晚些时候，Shen 与广告代理公司 Organic Online 合作，在原图上加上雅虎公司名称，并添加了个感叹号”!”。最后他们确定使用 Able 字体和紫色

1995，在网络上走红。前面设计的公司标志，还只用在日常办公中。雅虎觉得应该在网站的网页上加上个标志，于是创作了这个如今看来有点丑陋的 Logo 。为什么采用明亮的红色呢？这不只是一个审美的选择。选择它，还因为红色会更可靠地显示在不同的监视器和电脑上。在当时，其他颜色的显示总有些问题。另外，雅虎也很喜欢红色的勇气。

1996，新的一年，新的标志。经过多次调整和改进，雅虎在1996年1月1日，在所有网站推出了红色 Yahoo! 标志。

1996，内部使用紫色。虽然红色已经成为面向用户的雅虎形象，但公司内部，还是重新设计了标志。他们将跳跃的”Y”型形象去掉，精简徽标为我们现在看到的经典的紫色版本。从那之后，这个标志就出现在各类海报上代表雅虎。

1997－2004，椭圆形的紫色 Y 。这是雅虎的缩写标志， Y + 感叹号。1997年，它最初设计是用在雅虎工具栏上的一个按钮，链接到雅虎招牌页面。因为完整的雅虎标志太宽了，不适合。2004年，雅虎与广告代理公司 Ogilvy 合作重新设计了”Y !”，确定了一个白色的”Y”在一个紫色的椭圆中和一个紫色”!”的版本，作为雅虎官方的缩写标志。

2009，统一的紫色。雅虎推出了具有新的紫色 Logo 的新主页。并将此标志应用到网络的每个页面、公司通信和所有的合作伙伴关系，使雅虎用户、广告客户和雇员，形成统一的紫色标志体验。雅虎已斥资1亿美元进行全球营销活动，来加强雅虎品牌的宣传推广。

4 online image optimization tools

2009-10-08T10:14:00.000+13:00

在如今的Web设计中，图片的应用是必不可少的，为了更好地设计网站效果，大体积的图片被越来越多地应用到Web设计中来，所以，更好地优化图片文件，减少图片文件的体积就变的非常重要，这里为大家介绍的几款图片压缩工具，都是在线应用，无需在本地安装，你要做的就是记住网址就够了。

1. Smush.it

Smush.it被称之为图像“压榨机”，是雅虎的Yahoo Exceptional Performance Team开发出的一个网络应用，旨在帮助网站优化图片，提高站点速度。是非常流行的无损压缩工具。
官方网站：http://www.smushit.com/

2. PunyPNG

punypng是一个免费的图片压缩工具，更适合设计师和前端开发人员，它可以大大的减小图像文件的大小（支持JPG, GIF ，8/24 bit PNGs），将其转换成高压缩的图像。如果你的网站有大量的图片，使用它可以大大减少网页加载的时间。
官方网站：http://gracepointafterfive.com/punypng

3. SiteReportCard

同样是一款优秀的图片在线压缩工具，支持URL网络图片和本地上传图片。支持文件格式有GIF、JPG、PNG。
官方网站：http://sitereportcard.com/imagereducer.php

4. Dynamic Drive

dynamicDrive也是一个免费的在线图片优化压缩工具网站，支持GIF、JPG、PNG。等格式的图片。除了优化的功能，也提供简单的格式转换，上传图片的大小限制300K之内。

共和国60年国庆网站大阅兵

2009-10-01T21:28:00.002+13:00

今天是10月1日，是中华人民共和国成立六十周年（1949-2009）纪念日，盛世中华，普天同庆。今天在北京天安门举行的盛大国庆阅兵式和群众游行，更是展示了新中国经过六十年的发展，巍然屹立在世界的东方，所拥有的强大和辉煌。

各大门户为国庆专题争得你死我活，多个网站特别策划了建国六十周年的专题，如搜狐的《追寻现代中国》，新浪网的《国⁃家》，腾讯网的《中国传奇》等。

胡锦涛主席在天安门阅兵，我也在电脑前来一个前无古人的中国网站大阅兵，以下方队顺序是依照alexa.com的中国网站排名

百度，QQ，新浪网，淘宝网，网易，搜狐，忧酷，酷6，雅虎中国，凤凰网，电脑在线，土豆网，搜搜，搜狗，猫扑网，Tom，CCTV，中国人

几个大的门户的专题网页死长死长的，截图的时候RAM都不够用，所以我就删掉了所有的广告和绝大部分的flash。

这里值得一提的就是ChinaRen，没见过用新闻文字组成“方队”庆祝十一的网站首页吗？这个名字和中国密不可分的品牌巧妙地通过对首页新闻文字的排列来庆祝国之盛事，红彤彤的文字颜色呈现出一派喜庆气氛。

Web 易用性大师 Jakob Nielsen 访谈录

2009-09-30T17:16:00.000+13:00

地址：http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K849.aspx
本文来源：http://www.webdesignerdepot.com/2009/09/interview-with-web-usability-guru-jakob-nielsen/

他被纽约时报称为“Web 易用性大师”，被 Internet Magazine 称为 “易用之王”，1995年以来，他通过自己的Alertbox 邮件列表以及 useit.com 网站，向成千上万的 Web 设计师传授 Web 易用性方面的知识，尽管他的一些观点可能带来争议，至少在 Web 设计师眼中，他是 Web 易用性领域的顶尖领袖，他的名字叫 Jakob Nielsen，本文是 WDD 网站对他做的专访。

能否谈一下你自己，你是如何进入这个领域的？

我1983年就进入易用性这个领域了，我的第一个项目是大型机上的基于字符的界面。后来则主要研究图形用户界面，比如我和我的学生做了很多 Mac 软件的研究，那时的 Mac 软件还不够好用。我早期的经历对以后的研究很有帮助，因为早期的 Web 界面和 IBM3270 大型机程序差不多。
总的来说，对于一个这方面的专业人士来说，在各个时代的计算机系统上的经历是很有用的，因为你可以在宏观的人类行为的发展趋势中看问题。
我技术生涯的前十年主要解决两个问题，怎样让那些易用性方法更广泛地应用；适应那些那些大打折扣的易用性以及如何改善在线信息的易用性。鉴于此，我后来在1989年写了自己的第一本关于超文本的书（1990年出版），以及一本在软件项目中被广泛采用的易用性工程教材。
1994年，我开始研究 Web 易用性，刚好将这两种兴趣融合在了一起，早期的 Web 易用性很有趣，人们评批它，说这不能用在 Web 上，因为这是给软件程序用的。
相反，近年来，那些易用性的对立者们开始声称这些研究只能用于 Web，无法推诸程序以及 AJAX 这些，于是人们总是想着法子忽略他们的用户。当然，现实是，易用性对任何拥有用户界面的东西都适用，不管是网站，程序，手机，DV 还是其它的什么。具体的规则可能不同，但总的原则都源自人类10000 多年来形成的思维方式。

近年来宽带发展迅猛，我们是否还需要关注页面尺寸和加载速度？

是的，但已经不象 28.8K 拨号上网时代那样苛刻了。
不过反应时延原则什么时代都是一样的，因为互联网连接的是人，那些哪怕是二战时期的研究仍然是成立的。一个主要的原则是，人们点击下一页的时候，时延不应该超过1秒钟，否则就会觉得卡，在宽带时代，美国的接入用户1秒钟可以下载大约1MB的数据（那些亚洲国家还要快，但不包括中国 - 译者），因此，现在的问题并不是出在网速上，而是处在服务器端，人们在网页中塞入了太多饰件和动态对象。
记住，1秒钟，否则用户会觉得卡，这还是就整个页面而言，那些页面内部嵌套的 AJAX 控件要求更高，是01.秒，否则会觉得卡。

在你看来，测试网站易用性的最好方式是什么？

遵循三个基本原则，找一个值得信赖的客户，让他们实际访问你的站点，然后，闭上嘴让他们说给你听。你只需要5个用户就能发现足够多的易用性问题并让你忙活几个月。尽管只有这三个简单的原则，很多研究发现人们仍不能完全遵守。
比如，你不能让朋友或同事去测试，你应当找那些对你的项目一无所知的外部用户，他们还不能敷衍了事，必须实际去用，同时，你不能对他们施加影响，不能暗示他们该如何操作。这就是闭嘴原则如此重要的原因，最好的方式是找那些富有经验的大型测试团队去做，当然，小团队仍然可以做好，这样很经济，如果能遵守基本原则的话，开发者自己也可以很好地进行易用性测试。

人们应当如何在移动设备上测试网站易用性？

本原理都是一样的，现在就来了第4条规则，就是在一个代表设备上测试。对桌面而言，有 Mac 和 PC，但这无所谓，关键是什么屏幕尺寸，最近几年，我们主要在 1024 x 768 尺寸上测试，但我们现在使用一个屏幕做所有测试。
对移动设备，很难使用一个代表设备，因为手机之间的差异比电脑大得多。在我们的移动研究中，我们测试了3大门类手机，低端手机，智能手机，触摸屏手机。
我们招募了一些用户，他们带着自己的手机前来测试，我们需要测试很多用户，因为不同门类的手机之间差别太大了。理想状态下，我建议站点设计者为这三类设备设计三个版本的站点，因为它们之间差异太大，但只有那些特别有钱的站点才可以，因此我希望他们至少单独为移动设备设计一个独立站点，那些为桌面电脑用户设计的网站对移动用户来说太难用了。
Web 最初的使命原本是强调跨平台设计的，以便在任何地方都能访问，但从可用性角度，这不可行，即使技术上能够实现，要么对桌面用户来说太简陋，要么对移动用来说太复杂，这两种情形差别太大了，需要不同的设计。

假如我们要做一个能负担得起的网站易用性测试，最好的方式是什么？

唯一不能省的是招募测试代表用户，因为如果你找错了人，要么是那些并不用这个网站人参与测试，要么是那些对背景太了解会主动绕过易用性问题的人，这两种类型的测试者都不是理想的测试者。
其它的都可以商量，可以省。我说过，你可以自己测试，那样就不用花钱，除了费点时间，要完成5个测试者的测试工作量只要几个小时。你不需要什么设备，不需要分析软件，甚至都不需要电脑，假如你是在纸面原型上进行测试的话，如果不是，一台笔记本或普通电脑就够了，这样的测试在小会议室或普通办公室就能进行。
当然你需要关上门，避免被打断。

就导航而言，面包屑导航条是否已死？

没有，我们在测试中经常看到用户使用面包屑导航，要么用来确认他当前的位置，要么退回上级菜单。因此，面包屑导航绝对有用，但同样重要的是，不要影响到那些不用面包屑的用户，测试发现有人是不用这个的。
但这没问题，因为面包性不会给这些用户带来任何麻烦，而且它们是很简单的东西，因此应当包含。

对 Web 设计师而言，如果他们设计的是艺术类或作品展示类站点，是否可以打破 Web 易用性规则？

是的。首先艺术的定义原本就是你可以任意发挥，艺术不是给普通人看到，即使确实是商业用地，比如作品展示，也不必拘泥，有两个原因：
第一，这类站点的受众一般用于比较高级的 Web 技术（设计师，Internet 经理等等），第二，人们访问这类站点的时候一般除了充满敬意地欣赏也不做什么事。因此，它不必象那些民用站点那样易用，对于民用站点，比如网上银行，如果不好用，转错了账将是灾难性的。

Amazon.com 被视为最成功的电子商务站点，是什么让他们这样成功，你是否从他们的站点中发现过易用性方面的错误？

Amazon 是一个站内站外拥有不同用户体验的很好的例子。他们的成功要归功于站外功夫，包括非常丰富的产品，非常详细的确认邮件，非常稳固的订单执行能力，他们的价格也很好，尽管不是最低的。
他们的站内体验也不错，包括丰富的产品信息，客户评论，Amazon 是第一家愿意接受用户负面评价的公司，这位 Amazon 增强了信用，如果用户不看好某个产品，可以买其它的。
然而 Amazon 的模式并不适合其它站点，它的页面太拥挤，功能太多，新用户往往无所适从，Amazon 的用户都是那些熟悉电子商务的老用户，他们经常在上面买东西，因此，他们可以越过这些不便，但新用户还是会觉得有些难用。因为大多数别的电子商务站点并没有 Amazon 这么大的规模，他们更需要简单的设计。
Amazon 的产品区也很难用，因为他们是一个综合性网店，它的前身是个网上书店，对书籍来说，信息要简单得多。Amazon 能很好地向用户展示单个产品，但在展示全部产品目录方面很不理想。而对那些专门的某类产品网店来说是个很好的机会。

易用性规则是否对所有网站一视同仁，还是要针对不同目标用户使用不同的规则（比如技术类站点或新闻站点）？

易用性总是涉及两件事，谁是用户，以及他们想借助这个 UI 实现什么？
因此我们不可能做一个普适的设计，比如，如果人们只是要看数量有限的内容，你可以全部列给他们，如果要展示的内容是海量的，你就需要一些功能让用户选择，排序等等。
如果是一家只有三家分店的酒店，这样做就有些过了，但如果是麦当劳，你就需要一个分店查询工具，甚至需要语言选项以区别不同国家和地区。
同样，对那些在某个领域很精通的用户，相对于普通用户，我们需要提供不同的设计，最好的例子是，比如医疗信息，对医生和对病人需要提供不同的东西。

如今，多数站点都在页面上塞入了大量内容，如新闻摘要，Twitter 或 RSS 订阅，这些拥有大量内容的页面仍人是易用的吗？

是的。但，你往页面中塞入的东西越多越难保证易用性。
简洁始终是更好的选择，但如果你的用户确实需要那么多内容，你需要不断进行易用性测试，对于这些问题，你需要付出更多努力，如果要推出未经用户测试的东西，复杂的比简单的包含更多风险。

IE6 1px gap on absolute elements

2009-09-27T20:45:00.005+13:00

IE6- 有一个非常讨厌的 bug，当绝对定位元素的父元素高或宽为奇数时，bottom 和 right 会获取错误。
HTML

<div class="outer height199">
<p>This container has a height of 199px and width of 199px</p>
<div class="inner">img</div>
<div class="inner2">img</div>
</div>
<div class="outer height200">
<p>This container has a height of 200px and width of 200px</p>
<div class="inner">img</div>
<div class="inner2">img</div>
</div>

CSS

.outer{
width:200px;
background:red;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}

.inner,.inner2{
width:30px;
height:30px;
position:absolute;
background:blue;
}
.inner{
bottom:0;
left:0;
}
.inner2{
top:0;
right:0;

}
p{clear:both;margin:0 40px 1em 5px}

可以看出在奇数容器下出现了1px 间距，而在偶数容器下正常。
不完美的解决方法：改变结构并使用浮动
HTML

<div class="fix">
<div class="outer height199">
<div class="inner2">img</div>
<p>This container has a height of 199px</p>
</div>
<div class="inner">img</div>
</div>
<div class="fix">
<div class="outer height200">
<div class="inner2">img</div>
<p>This container has a height of 200px</p>
</div>
<div class="inner">img</div>
</div>

CSS

.fix {
width:200px;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
clear:both;
margin-top:-30px;
position:relative;
float:left;
}
.fix .inner2{float:right;position:static}

Flickr User Model

2009-09-21T14:59:00.001+12:00

Very Great work. It helped me to know the whole strategy of flickr. I suggest that maybe someone would draw another map of youtube. Anyway, there are many things alike between these two websites.

Larger image can be viewed here!

Use a CSS Reset Before Start

2009-09-17T17:01:00.004+12:00

CSS resets: to use or not to use; that is the question. If I were to offer my own personal advice, I'd 100% recommend that you create your own reset file. Begin by downloading a popular one, like Eric Meyer's, and then slowly, as you learn more, begin to modify it into your own. If you don't do this, you won't truly understand why your list items are receiving that extra bit of padding when you didn't specify it anywhere in your CSS file. Save yourself the anger and reset everything! This one should get you started.

html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
margin: 0;  
padding: 0;  
border: 0;  
outline: 0;  
font-size: 100%;  
vertical-align: baselinebaseline;  
background: transparent;  
}  
body {  
line-height: 1;  
}  
ol, ul {  
list-style: none;  
}  
blockquote, q {  
quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
content: '';  
content: none;  
}  

table {  
border-collapse: collapse;  
border-spacing: 0;  
}

9 CSS3 Properties You Can Use Now

2009-09-17T10:37:00.003+12:00

If you’ve looked at any of the stuff to be included in CSS3, you were no doubt bouncing off the walls in excitement until you remembered how long it tends to take some browsers to support that kind of stuff.
But some good news: Quite a bit of this CSS3 awesomeness can be used right now to spice up your designs. Some (most) of it will not render in all browsers equally (generally those of the IE variety), but websites don’t need to look the same in every browser–nor should they. Just because IE6 users can’t see some fancy effect doesn’t mean everybody shouldn’t. Similar to how those watching TV on a standard television will not be able to see HD, users on older browsers need not get the same experience as those on newer browsers as long as they see nothing wrong with the site.
But enough ranting and onto the good part. CSS3 properties you can use now and how to use them:

1. Text-shadow

The text-shadow property is probably one of the most commonly used aspects of CSS3, likely because of it’s extremely easy setup (it’s almost too easy…).
For a text-shadow, the property is used as follows:

text-shadow: 2px 2px 5px #000;

The first and second values represent the shadow offset, the third the blur radius, and the last value the color of the shadow.
For tips on effectively using shadows in your designs, check out one of my previous articles, The Shadow World: CSS3 Text-Shadow and Reality.
Browser support for text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

2. Box-shadow

The box-shadow property is used in a way very similar to text-shadow, but it adds shadows to the elements as a whole rather than to the text inside them:

box-shadow: 5px 5px 10px 10px #000;

The first two values are the offset of the shadow, the third the blur radius, and the fourth value the spread radius. The last value is, of course, the shadow color.
Browser support for box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+

3. Box-sizing

The box-sizing property is one of the most under-appreciated yet widely-supported properties in the CSS3 spec.
The box-sizing property is quite simple, and it accepts three possible values: content-box, border-box, or inherit. This declares how an element’s size is to be rendered:

box-sizing: content-box | border-box | inherit;

In properly-behaving browsers, all elements are displayed as content-box by default — padding and borders are rendered outside the specified width and height, so an element with a width of 20px with a 1px border and 5px of padding will actually be rendered as 32px wide (20 + 1 + 1 + 5 + 5).
However, by declaring the box-sizing property to border-box, the padding and borders are rendered inside the element. So, our example from earlier would be 20px wide total, with 10px of that element taken up by borders and another 2px taken by padding. This can be extremely useful when using percentage-based widths in your layouts.
Browser support for box-sizing: IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+

4. Columns

The columns property is also fairly easy to setup and makes for great magazine-style layouts. Both Mozilla and Webkit browsers require prefixes before the property, so setting an element to render its content in multiple columns works as follows:

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */

-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

This tells the element that you want the content displayed in 2 columns, each 250px wide. Either of these values can also be set to auto, which allows it to be determined based on what best fits with the other value.
But what if you want custom gutter sizes and dividers? No problem, as we have column-gap and column-rule coming to the rescue:

column-gap: 25px;
column-rule: 1px solid #000;

-moz-column-gap: 25px;
-moz-column-rule: 1px solid #000;

-webkit-column-gap: 25px;
-webkit-column-rule: 1px solid #000;

This will place a 25px gap between our columns with a 1px solid black line running down the middle of the gap. There’s even more you can do with CSS3 columns, and I’d recommend that those interested checking out this article for more goodness.
Browser support for columns: Safari 3.1+, FireFox 3.5, Chrome 1.0+

5. Border-radius (rounded corners)

Because everybody likes rounded corners, the CSS3 spec contains the popular border-radius. Mozilla and Webkit browsers require their standard prefixes, so to add rounded corners with a 10px radius to an element, use the following:

-moz-border-radius: 10px; /* For FireFox */
-moz-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

For slightly more advanced usage (using on only select corners), check out this excellent article.
Browser support for border-radius: Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)

6. Border-image

The border-image property is not used nearly as much as border-radius (probably because the syntax is somewhat hard to understand). However, it can be used for some awesome effects and John Resig provides a fairly good explanation of how it can be used through the following example:

-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

Basically, the property declares an image to be used before telling the browser how to clip and stretch different sections of it. Check out his full article for more examples and details.
Browser support for border-image: Safari 3.1+, FireFox 3.5, Chrome 1.0+

7. @font-face (web font embedding)

While not technically a property, the CSS3 @font-face declaration has been receiving quite the attention as of late. Håkon Wium Lie, the original proposer of CSS, wrote a must-read article for A List Apart all about @font-face. Essentially, this allows developers to embed fonts in their pages that can be called by the simple font-family property.
To embed a font, simply add an @font-face declaration as follows:

@font-face {
font-family: "My Awesome Font";
src: url(MyAwesomeFont.otf) format("opentype");
}

This tells the browser that whenever the font “My Awesome Font” is used, pull it from “MyAwesomeFont.otf.” Simple and brilliant, really. So then to use our font, we just declare like we would any other font:

h1 { font-family: "My Awesome Font", sans-serif; }

There are a couple things to note, however. Firstly, and most importantly, make sure the font you are using has a license that allows font embedding. There’s a fairly decent list of legal fonts over here, and Typekit will be another solution that looks promising.
The other thing to note: Fallbacks. Cufón and typeface.js are both good options for when @font-face isn’t supported. Kilian Valkhof has a great article on combining Cufón and @font-face.
Browser support for @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (sort of)

8. RGBA color

While actually a value and not a property, rgba() is also worth mentioning (and using!). While generally colors have been declared using hex values (e.g., #000000 for black) or RGB values (rgb(0,0,0) for black), CSS3 has now added a new option: RGBA.
This works identically to RGB color with the addition of a fourth parameter declaring opacity. So, if you want to create a black background with 50% opacity, simply do the following:

background: rgba(0, 0, 0, 0.5)

While this (of course) will not work in IE, there’s a great (though slightly complicated) article on creating bulletproof, cross-browser RGBA backgrounds using some filters and PNGs.
Browser support for rgba() (without filters): Safari 3.1+, FireFox 2.0+, Chrome 1.0+

9. Transitions

Ever wished you could do transition effects with CSS? Well, now you can using the CSS3 transition property. Webkit browsers (mainly Safari and Chrome) currently support it and do so with the -webkit- prefix:

#element {
opacity: .7;
-webkit-transition: opacity 1s linear;
}
#element:hover {
opacity: 1;
}

The transition property is actually shorthand for transition-property, transition-duration, and transition-timing-function. Our example code above thus tells the browser that when #element’s opacity changes, do a 1-second linear transition.
These transitions can be applied to any property (and even multiple ones at the same time!), such as padding and background, for instance:

#element {
background: #000;
padding: 5px;
-webkit-transition: background 1s linear;
-webkit-transition: padding 1s linear;
}
#element:hover {
background: #FFF;
padding: 20px;
}

For more advanced usage, check out the Webkit blog.

Go and use the future!

CSS3 brings some awesome stuff to the table, and now is the time to start using it. As the web development community gets more and more excited about CSS3, Mozilla and Webkit browsers are quickly adding more and more support for new properties, declarations, and selectors. So take advantage of it!

中国互联网十五年的22个创新模式

2009-09-16T20:11:00.001+12:00

今天，看网上有人推荐《沸腾十五年》，讲中国互联网从发源到现今。

有人有如此梳理，自己本来也想梳理一下中国互联网这么多年，到底是哪些公司出来了，为什么会是他们出来了。他们的出来代表着什么趋势，他们一串串的连接闪现不同类型的公司有不同的潮流，到底暗示着什么趋势。下一个趋势是什么？当时他们出现的历史环境是什么？以后会不会再出现那样的环境？抱着这么多问题，开始阅读。并梳理了一个总结。

你跳不开论坛。这是中国互联网的发源。交互，多人交互，集市。不管是邮件、IM、博客、twitter、QQ群、贴吧、圈子、同学录均是如此变种。现在论坛，能想起的只有天涯。感叹天下社会芸芸众生的悠悠草根生活，生活自嘲与智慧跃然帖子。想足不出户了解中国老百姓的心理和现状，天涯不能不去。

第二个就是新闻。搜狐对应白领，网易对应华南，QQ对应90后，新浪对应老百姓。就是一个电子媒体，有内容看内容，有人气卖广告。

第三个是QQ。很多人上网，学会上网和打字，引发安装宽带的需求，就是因为QQ。

第四个就是SP，彩铃、短信。没有SP，中国互联网第一批弄潮儿估计会成为先烈。FLASH连带彩图火了好一阵，但也没赚到什么钱，有热闹有观众，没钱。

第五个就是51JOB。在2002年还有人讨论招聘会和线上收简历的优缺点。2003年就根本没有人讨论这个问题了，因为大家都网上收发简历了。

第六个就是搜索。各种垂直搜索都各项争霸，如今谁惨淡，谁崛起呢？好似没看见崛起的。还是百度谷歌。虽然搜狐、网易、腾讯、阿里都要自己开发搜索引擎。但没崛起。不知道

第七个就是迅雷。迅雷的多点下载思路很创新。网络蚂蚁被flashget干掉，快车又被迅雷干掉。中间还夹杂电驴电骡之类。

第八个就是3721。不要打啊。企业现在都缺推广。百度是推广，新浪是推广，阿里是推广。返现，阿里妈妈、太极链。都要推广。当然，还藏着一个discuz，也是推广。大家也能联想到挂马、盗号、肉鸡，流氓插件、绿色软件。争做浏览器抢占用户窗口，争着占领用户电脑右下角。输入法也是这个意思。
第九个和3721也很有关联，就是导航站。hao123，265。大家也能想到域名买卖、虚拟主机、流量统计、SEO、推广、邮件群发、黄页、连锁加盟黄页网、阿里巴巴、做网站公司、五洲在线、6688。

第十个不能不提google邮箱，启动快速、无限量、搜索准确、邮件反复回复关联强。尤其推荐口碑营销邀请加入，够创新。

第十一个是游戏。这就不说了。征途的虚拟装备和地推和逢年过节的随机掉宝新任务、QQ的虚拟装备和Q币、盛大的计时计费和点卡渠道。高。创新的非常好。

第十二个是好耶。当然也关联着分众，以及N多各个细分行业的分众们。但好耶和分众还不太一样。分众是自己在新的地皮上开辟新疆土，而好耶不仅做互联网窄告这一创新模式，好耶还是大代理商，如同携程。

第十三个是携程。这是个好模式。携程属于票务，但和演出票还不一样没有过期作废性，而且消费群体更大。携程的地推模式、呼叫中心模式、现在在机场深度拉人模式，都值得学习。

第十四个是当当。当当、卓越、京东、红孩子、麦网等等，从网站、呼叫中心、目录邮购、仓储、配送，都在低调受苦受累的做。他们是一类。

第十五个是淘宝、阿里。太独，太份额大，所以很难找到类比。他们不进货不压货不卖货，只搭建平台。

第十六个是支付宝。没有它，电子商务的接受规模可能远远小于现在。推动中国电子商务行当做大，它功不可没。

第十七个是黄页、加盟网、阿里巴巴。这是B2B的主要模式。你对比对比，你就知道B2B该怎么走了，为什么只能这么走，这么走还有哪些缺陷，如何更小成本更容易的解决这些缺陷，你有创新性的思维吗？

第十八是视频网。过去很多年前想收藏的《义不容情》《雍正皇帝》《八月桂花香》《大长今》《商道》都能随时看了。但就是不知道怎么赚钱，而烧钱却非常快。GOOGLE收了youtube，也没辙。流量很高，但收入怎么来？

第十九个是社区、SNS、WEB2.0，也包括同学录。从这里还能引申想到社会化商务、点评、豆瓣，还能想到flash小游戏、摩尔庄园、4399等等。哦，还有盒子。

第二十个是和生活相关的。从分类信息和点评引发，最后出来爱帮、地图，也和垂直搜索、电子商务有些关联。谁还能记起分类网站？各种拼车网站？大别针换房子？

第二十一个是口碑营销引发。有个专门的人肉搜索、刷流量、刷信用、刷评论等等专业小公司。有本书叫众包。就是这个意思。这是一种新模式。我还想起威客网，大家现在谁记得？盈利模式哪里不对劲？在什么环境下可以成功？

第二十二个是移动互联网。移动QQ流量最大，然后是看新闻、看电子小说、查地图、搜索。决斗聊天、搜索、浏览器、导航、新闻、地图、生活搜索。

每一个都是独特的，每一个都是鲜活的。每一个都是创新的。下一个，是谁加谁，谁联合谁然后变种成了什么？移动+生活+地图+IM+支付+电子商务（淘宝、vancl、携程、当当）（网站、呼叫中心、短信、邮件、目录邮购、仓储、配送、地推）+社区（点评、贴吧、QQ群、微博）？还得是人气+广告、人气+卖实物东西、好玩+虚拟装备、收集数据清洗数据保鲜数据卖数据统计数据分析数据+付费，你看呢？

Google UFO 系列 doodle 谜底渐渐清晰——纪念 H.G.Wells

2009-09-15T22:02:00.003+12:00

Google的这个外星人系列可谓是今年最具悬念的doodle了，每幅doodle都配备了一个相应的谜题，并引领你走向最终的答案。9月5日第一个doodle的谜底是"All your o are belong to us"，结合图像暗示了谜底和外星人有关。而今天的麦田圈doodle的谜面也不难：51.327629, -0.5616088。

这个谜面其实是一个Google Maps坐标——指向英国萨里郡（Surrey, England）的Horsell Woking。在H.G Wells 1898年的科幻小说作品The War of the Worlds（世界大战）中，英国被来自火星的外星人入侵，而UFO降落的第一个地点就是Wells家附近的Horsell Common。

从wikipedia我们可以得知，H.G.Wells生于1866年9月21日，今天距离他143周年诞辰还有6天，我们有充足的理由相信这一系列doodle正是为了纪念他而精心设计的。

How to Fix the IE6 Select Box z-index Bug

2009-09-14T16:24:00.002+12:00

This is my first time experienced the IE6 z-index bug where a simple select box will always take priority over any predefined z-indices and always show up on top. see the screenshot:

I did search around and luckily discovered that there is a fix -JQuery plugin which by using an iframe and expanding it over the select box area, the iframe will take precendence over the select box. This JQuery plugin will automatically create the iframe for you. The plugin is simply called bgiframe and using it is quick and easy. Just include the script and attach the bgiframe() method to all of your floating layers. Here is a short and quick example:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#floating_div').bgiframe();
}
</script>
</head>
<body>
<select>
<option>Test</option>
</select>
<div id="floating_div">I'm over this select box</div>
</body>

Now those nasty z-index bugs won’t ever trouble you ever again.

Google has a bigger search box now

2009-09-10T12:20:00.004+12:00

整整一个月前，谷歌中国扩大了搜索框优化了用户体验，Google总部显然注意到了这个问题。

今天谷歌搜索产品和用户体验副总裁 Marissa Mayer 官方博客中宣布，从本周开始，谷歌英文主页将加大其搜索框的显示尺寸，使用户在使用谷歌搜索时，能够更容易看清所键入的关键词！这并不是一个普遍现象，只有部分访问者会随机遇到，显然这是Google在对搜索页面的变化做测试，效果好的话他们会逐渐加大测试人群，直至最后确定下来。

除了加宽加高，搜索按钮也由原来默认的系统按钮样式，变成用CSS定义的统一样式，打消各个操作系统下搜索页面的不同。

Images via TechCrunch

User Experience Tip for Visited Link Colors

2009-09-09T18:36:00.002+12:00

I have been messing around with some visited link colors for Stuff.co.nz today, as someone has tweeted this:

Generally, paying attention to the a:visited property is good. In some cases, styling the visited link is detrimental to the user experience. The point of the visited link style is to show you what pages you've been to on a site. It could be a link you want to avoid, or a link you'd like to get back to. When the link blends in, it tells the user that there is no link there.

Jacob Nielson Says…
http://www.useit.com/alertbox/20040503.html

People get lost and move in circles when websites use the same link color for visited and new destinations. To reduce navigational confusion, select different colors for the two types of links.

Some cases go along with the idea that a visited link is "faded" out because you already went there. Anything that is now secondary should be displayed as such from a visual perspective. But in some cases are not, example:

Take stuff.co.nz's brother website www.smh.com.au for example, the second and third headlines look like sub titles of the first headline for me when they faded out with very much different colors, which is confusing.

So my tips are:

The two colors should be variants or shades of the same color, so that they’re clearly related.
The color for unvisited links should be more vivid, bright, and saturated than the color for visited links.

Great Google street view ad at bus stop

2009-09-09T15:50:00.000+12:00

Via MSDN Blog

Facebook如何做设计

2009-09-09T14:36:00.001+12:00

Facebook的设计团队分享了他们的设计理念，以及他们是如何为2.5亿用户设计产品的。特别的是，他们强调了以下几点：

自己动手，亲历亲为（get your hands dirty）
尽早且频繁地分享设计（share early & often）
设计过程要从项目开始延续到结束（be there from start to finish）
不要爱上你的设计（don’t fall in love）

尤其重要的是确保设计师有足够的技术能力来写很多代码。
其他一些信息：

Facebook设计团队的工作包括产品设计、市场营销、UI模式、品牌和前端开发。整个团队由15个产品设计师、5个UI工程师、5个用户体验研究员、4个交互设计师和1个内容架构师。在这个约有1000个员工的公司中，设计团队总共有25人。

通过撰写从前端到后端代码全部代码，将设计和技术融合进整个公司的文化。

1）设计师需要参与整个过程：从战略到发布。这不同于其他公司。

Facebook花费了很多时间和精力来保证设计师能参与到整个产品开发流程。
例如：3月的主页改版发布，精简信息架构和提高页面信息的流动速度。这样的改变需要同时涉及数据结构和视觉结构。
在确定视觉风格后，开始写代码来制作原型。设计师通过写代码来了解真实的数据如何在页面布局中工作。
不断地平衡取舍，通过不断地迭代交互设计和视觉设计来做很多尝试。
给管理层和其他团队展示静态的产品原型并做交互演示。
让设计师写代码能发现细节问题并快速执行修改。

2）尽早且频繁地分享想法。了解用户能帮助实现更好的设计。

在Facebook没有创意总监，取而代之的是自下而上的设计团队组织架构。这对于团队能分享他们的创意至关重要。
开发相应工具来实现高效地分享。其中一个工具叫Pixelcloud，类似于一个带评论功能的在线图库。自从在3月发布了这个工具后，大约每天有15张创意图片通过这个网站得到分享。
整个工作组涵盖视觉设计和前端开发，这确保了Facebook的设计保持一贯的风格。所有的工作组都有固定的时间来给设计师提供反馈。
例如：隐私向导的设计。在项目立项阶段（kickoff phase），召集12个用户并向他们展示30个原型，以此来决定产品的开发方向。在产品开发阶段，再次召集相对较少的用户，向他们展示7个原型来决定具体的设计。
反馈是有效的。尽可能多的和早的获取反馈，这有助于节约项目时间。

3）勤动手，最重要的是理解代码是如何运行的。所有的设计师都要写一些HTML，CSS，甚至PHP。

模糊设计和技术的区别。设计师也能调试代码和创建快速原型。
设计师往往错在设计过于简洁，而工程师则错在提供过多功能。
理解你所为之工作的媒介类型，然后不断反思你的设计。
快速行动。Facebook在许多领域有很多竞争对手，而用户使用网络的习惯也在持续改变，所以快速地迭代更新产品很重要。
最核心的是，Facebook相信最有效的方式是快速发布产品，然后看看用户是如何使用的。
原型在说谎。它们通常缺乏内容和上下文联系。因此需要使用真实的内容和页面设计来理解具体的设计是如何工作的。
为了快速反应，我们需要快速地制作原型。例如：评论的UI首先在内部测试并修改，然后才发布给用户。新的设计打破了原有的信息流里的视觉线路。
设计师一般每周大约会提交40个版本的代码。

4）不要爱上你的设计。软件的生命是短暂的，它总是在变化，你需要接受这个事实。

你的目的是确保设计工作正常并能持续改进。
不要怀念今天的成就，要永远向前看。作为一个设计师，你需要预测并思考在下一年事情将发生怎样的变化。
在Facebook，设计存在时间最长的是首页，从2004年发布，历时18个月。
例如：全局导航的改版。在数月里尝试了无数的想法。甚至在昨天网站的头部又变了。
相比以往任何时候，我们的工作都远没有完成。
对大多数功能都做A/B测试。清晰地定义度量效果的标准并进行测量，但切忌不要让度量标准来驱动设计。

再见，李开复

2009-09-04T23:15:00.001+12:00

毫无疑问，李开复离开谷歌将是今天互联网最炸弹的新闻。在加盟谷歌4年里，李开复成功地将谷歌在华市场份额从2006年的16.1%攀升至目前的31%。

李开复在其博客上发表了题为《再见，谷歌》的文章，回顾了自己在谷歌四年的工作经历，并公开表示，自己之所以离开谷歌是为实现自己的创业梦想。通读李博士的离职感言之后，我觉得这两句话要记住…

“我们压抑着做更酷、更炫的产品的欲望，努力耕耘最佳中文搜索。”

“以前离开微软是follow my heart，现在离开Google也是follow my heart.”

以下为博客全文：

再见，谷歌

时光荏苒，时光匆匆走过了一个四年，回望过去四年我在谷歌的职业生涯，所有的快乐、成就以及曾经面对的困难与挫折，所有的这一切如同一部电影在我的脑海里不断地闪过。在这离别之际，我不禁百感交集。在这四年时光里，谷歌中国从一个很小的雏形一直慢慢发展壮大，一直到今天，它成为了一家平稳，成熟，走上轨道的公司。
在整整四年的时光里，我努力地把Google“平等、创新、快乐、无畏”的精神带到中国。这个过程并非一帆风顺，但是我们坚持着自己的信念与价值观，保持着超强的耐心精耕细作。
我们压抑着做更酷、更炫的产品的欲望，努力耕耘最佳中文搜索。今天，谷歌中国的搜索质量已堪称最精确、最完整、最即时。优化中文搜索后，我们又开启了数十个产品，让谷歌中国的版图渐渐清晰。其中谷歌地图、谷歌手机地图、谷歌手机搜索、谷歌翻译都已经达到中国第一。另外，音乐搜索的推出，可以让网民首次享受到正版免费的音乐，创立了全球音乐下载的崭新模式。
特别令我难忘的是我们热爱中国的员工面临雪灾、地震、风灾做出的及时产品和贡献，证实了谷歌中国人爱谷歌也爱中国，证实了谷歌中国人既能创新又有爱心。
当我随意走进咖啡馆，看到年轻人在用谷歌的整合搜索查询信息，用地图查看实时交通流量，在iGoogle上挑选自己喜欢的“皮肤”（计算机界面），或者在用谷歌音乐听正版歌曲时，我都会露出发自内心的微笑。
谷歌是一个伟大又可爱的公司，我非常感谢有这么一个千载难逢的机会，来从无到有地打造谷歌中国。在谷歌，我学到太多太多，无论是互联网技术、创新模式、价值观。
对于谷歌，我现在已经没有遗憾，但我的人生还有一个缺憾没有实现，我想去弥补它。在过去的20年，我有幸在乔布斯、盖茨、施密特等身边学习成长，我有幸在PC时代历经苹果微软，我有幸在互联网时代历经谷歌，我有幸看到三个世界一流的公司的成长成功，我有幸在美国硅谷和中国的中关村崛起时，在这两个地方做过最有创意的工作。我拥有更多的是在科技领域的知识，更了解是企业成功的秘笈。这些职业经验才是我最有价值的资产，我非常希望能够把这些资产传授给中国青年。
我的下一步就是和中国青年人一起打造新奇的技术奇迹，我想用自己的主动性做一个掌控全局的工作。我已经到了这个人生阶段，再不去做，我真的很怕来不及了。
所以，尽管加州的山景城再次向我伸出了橄榄枝，希望我再续约四年，但是我却在此刻做出了发自内心的选择，我希望帮助年轻人圆梦的同时也圆自己的创业梦想。
这个周末，我终于能够从业务发展、战略策划、离职宣布、工作交接中松一口气。这个周末，我会把我的思路理顺。下周，我会和大家分享的我的“从心选择”计划。
每当我想到我将迈出的一步，我就会想起苹果创始人乔布斯的名言：
“最重要的，拥有跟随内心与直觉的勇气，你的内心与直觉多少已经知道你真正想要成为什么样的人。任何其它事物都是次要的。”

Front End Developer Knowledge Map

2009-08-31T15:08:00.000+12:00

If you are a front-end developer, come back and look at this skills map weekly, to see what skills you have already, and what skills you are missing.