怪怪國日報

2009年9月17日星期四

Facebook創造三億史上最大會員數並達成損益兩平，各個細節之間如何的環環相扣？

前天最大消息是Facebook宣布已經突破全球3億使用者，雖然「CheckFacebook」顯示只有2.77億，但已經夠靠近了啦。目前「台灣」依然是全球成長速度最快的，上周又瘋狂成長了30萬人，台灣這邊加入Facebook總會員數已經達到293萬人，目前台灣最大的網站會員數有多少？原本預估農曆年前超過，現在恐怕秋天結束前，Facebook就會榮登全台灣最大的會員網站，意思是說，全台灣最大的「朋友關係地圖」，掌握在美國人的手上，酷吧！（悲）

不過，「三億會員」這句話並不是最吸引華爾街注意的一句話。Facebook其實還順便透露，這間公司已經默默達成了「單月損益兩平」。這句話讓許多人認為Facebook已經在鋪股票上市的道路，包括Motley Fool甚至直接喊話，Facebook別囉嗦了，趕快就上市吧！
你說，拜託，一家公司達到單月損平，是這麼困難的事嗎？是什麼原因讓Facebook如此驕傲的高調宣布他們已達單月損益兩平？

就這樣講好了，一間大型的社群網站，瀏覽頁次已比一般網站高，Facebook的設計又需要大量的及時互動（大量AJAX運用），加上它也有影片、相簿等設計，在這樣的情況下，就算他們的人事成本不再增加，外面不再做行銷宣傳，這個Facebook網站單單要應付每周增加的幾千萬、幾千萬的使用者（每周都多一個超大型網站要照顧），單單主機、頻寬的部份可能正在耗著非常高、非常高的成本。這樣的情況下，Facebook的營收竟然可以比它爆衝成長速度還快，達到單月的損平，這一點，真的，足以，堪稱是，網路界的……奇蹟了！
真的厲害！

不過，這個奇蹟的另一個原因是：大家還不太清楚，哇塞你Facebook到底是怎麼賺錢的？Facebook於2007年營收1.5億美元，2008年來到3.5億，今年則預計5億美元營收，到底這5億美元是怎麼來的？為何原本要到明年年中才會損益兩平，卻趕在今年不知何時，就默默的達成了？Facebook主要收入依然是靠「廣告」， Facebook廣告分成幾種，其一是大廠如「微軟」特別包下的廣告，估計就有一年1.5億美元的水準，單單這點就和Google與MySpace當初的五年9億比絲毫不遜色！另外Facebook還有包給各地方媒體代理商讓他們去幫忙賣廣告，譬如台灣這邊似乎由iHub Media所代理。不過，其實「長尾」廣告才是Facebook收入爆漲的主要原因，中小企業可以直接向Facebook買廣告，而Facebook廣告之所以可和關鍵字廣告「分庭抗禮」，是因為它雖然無法針對關鍵字，但可以針對某一個精準的年齡範圍、姓別、學校、地區方面來下廣告（惟在台灣目前地區尚未精準到縣市），一間廠商開50個廣告，對不一樣的族群講不一樣的話，可能不輸50個關鍵字的效益喔！

可怕的是Facebook的廣告營收，竟還有更大的「潛力」在後面！我們看到愈來愈多的Facebooko廣告是「站內廣告」，也就是拉到站內的某個地點（通常是粉絲專頁），這類的廣告它可以先告訴網友，他/她的哪幾個朋友已經是你的粉絲，請加入吧！這時候，Facebook的這類「社群廣告」，給了它一個真正贏過關鍵字廣告的大優勢，因為這種「社群廣告」會隨著目前這三億網友繼續增加、繼續再加入其他社團與粉絲專頁而愈來愈有成效，最後讓所有的商家都要在Facebook站內設點，用Facebook的社群廣告來拉抬人氣，更充份利用朋友之間的WoM傳播力，而且廠商不必先去徵求這些朋友的同意。除了社群廣告這部份，大家目前甚至都還深深認為，Facebook玩廣告的手法實在「不夠積極」，該打屁股！看，目前Facebook的所有資料，其實已經皆以列表顯示，這造成一個極大的「排序廣告」的商機，最後商家不只在右手邊的廣告欄排前後，每一頁的某個格子，許許多多的資料排序都可以「搶排名」，Facebook的單單靠這些排序廣告將會真正的「賺翻了」，它真的已經不需要下一個商業模式了。

現在我們講了賺錢，接下來亦再講一下，為何Facebook可以達到這麼多人的程度？
簡單的說，Facebook讓兩個力量滾出了大雪球，第一是「朋友的力量」，這個力量沒有我們想像的這麼普通，我覺得Facebook正在將朋友之間所有朋友的力量用到最極致，它已經不再像傳統社群網站只是「人傳人」，而已經進化到「人拉人」。你會發現它不斷的在慫恿你，嘿，推薦這位「王大頭」先生給你做朋友，你和他有七個共同朋友哦！於是你就一直加，好像強迫症一樣，直到看到張大少只有一個共同朋友，才想到，或許不應該將這麼多人加為好友。每次你加一個朋友，Facebook亦馬上就會問你要不要建議這位也去認識其他你的朋友。在Facebook的每一個頁面，只要提到「人名列表」的，它都會懂得將「朋友優先顯示」，譬如我們來到可口可樂的粉絲專頁，380萬名粉絲，它給我們看皆以你的朋友優先排序；許多的頁面，Facebook都在想盡辦法用「你的朋友」來「拉」住你，而你隨便做一個動作，它又利用你的動作來「拉」住其他的朋友，它玩這個已經玩到幾乎科學的地步。

第二個雪球力量則是「自己開店經營朋友的力量」，會寫程式的就絞盡腦汁幫寫出「開心農場」、「餐城」、「魚農」、「寵物社會」、「綁匪之王」等小遊戲，再去利用剛剛說的那些力量來幫Facebook拉朋友，去偷菜、去除草、去交換食材，來讓這個朋友之間更是欲罷不能。然後，其他不寫程式但原本就有固定粉絲、會員的商家或藝人，就自己開粉絲專頁、社團，讓Facebook可以利用你這個「品牌」發展出去（偏偏它又很賤，它用你品牌，卻不讓你隨便用它Facebook的品牌）。這些程式自己收錢，像Zynga目前年收入1億美元，粉絲專頁更讓商家多引來不知多少錢。如果Facebook嫌廣告錢不夠多，這部份亦是Facebook再賺錢的，可以再更強化這個平台，讓大家更賺錢，譬如讓其他也想賺錢的如線上即時遊戲也能直接用Facebook平台做即時的遊戲……。

你問，Facebook真的不是熱潮而已嗎？它現在真的很強，但為何它保證可以繼續熱下去呢？我對此有一個看法，曾經，我在伯朗咖啡館非常仔細觀察四處都在玩Facebook的使用者，我們發現他們玩了一陣子，肯定要回到Facebook的「主要功能區」，它會退回到首頁，看看其他朋友都在玩什麼；它會去逛逛其他的討論區，看看其他攻略，或再加其他陌生人的email，可以和他們換食材…。這一點，就造成Facebook不會「斷炊」，即使大家透過「開心農場」才認識Facebook，Facebook有充裕的時間再介紹其他遊戲給大家；以遊戲平台來比較，Facebook肯定比任天堂、Playstation都容易「繼續活下去」。還有，可怕的是，只要這些「Facebook主要功能」還繼續被網友使用著，Facebook還有機會再推出其他的「主流工具」，就如同Google當年一樣──Google一開始只是搜尋引擎，後來開始展開成為人人都在用的網路工具提供者，全部都是免費，也奠定它成為所有個人、企業網路使用的正中心。Facebook比Google多了一點優勢就是「朋友」，這個月初就傳出澳洲有兩個10歲小女孩被排水溝卡住，動彈不得，竟不打119，而直接用手機上Facebook和所有朋友留言，請他們代為報警，果然馬上就有消防車來了，可見Facebook未來若要獨立出來做行事曆、電郵、即時通，都有比別人還大、還奇特的某種潛力。

這幾天不斷接受採訪談Facebook三億會員的事，昨天中廣新聞就問，有人說部落格已漸沒落，Facebook是否步上後塵？我說，部落格經不起考驗，Facebook經得起考驗，因為，「朋友」經得起考驗。部落格是新的媒體、新的做法，而Facebook其實是「舊時代產物的進化版」，就如同MSN取代了電話，email取代了傳統郵件……Facebook是在全面取代我們與朋友之間的關係，尤其是那些半生不熟的朋友的關係。更可怕的是，剛剛一路講下來，從朋友、到持續、到營收、到它的開放平台API，全部都是環環相扣的，開放帶來朋友，朋友增強了廣告，廣告帶來營收，營收又帶來更多的功能，功能又帶來更多的朋友……而這其中不只Facebook在賺錢，還有其他已經在賺錢的APP商、搭著它起飛的中小企業，這些更構成了一個龐大的生物鏈，不，真的可說是一個「國家」。

以上隨筆，沒什麼架構的，談談Facebook的現狀。還想知道Facebook更多嗎？我們談Facebook，可以談一個下午停不下來。兩星期前喊出來，目前已經跑了近十間公司、組織，我們提供我們所知道的，也請益企業目前網路行銷的操作方式，進度比預期快，等我們跑了五十間應該有機會明確提出更好的網路行銷package。我們面對的是史上最大的網站、三億人口的新國家，裡面誰都可以做龍頭，若您想知道更多，請參加這個免費到貴公司交流網路行銷的計畫吧！

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年9月15日星期二

HOTorNOT美女大戰，簡單好玩又不太色的兩人小遊戲

一陣子沒有寫iPhone，我的iPhone 3G一直用得超級順暢，它讓我這個一直不習慣用上網手機的人，真正開始用手機上網了，它的的確確的從今年起徹底的改變了我的生活（雖說這篇也是與中華電信的合作文章），也改變了我和身邊人的生活；我們在聊天的時候可以直接拿出來討論一個網站，我和小孩面面相對可以拿出小遊戲逗他玩，他也會搶著玩。

這星期有一個我認為是重大的新iPhone應用小遊戲上場，這個小遊戲真的值得一寫，不是因為它「好玩」而已，是因為它為其他在做網路創業、Facebook創業者帶來有趣的啟示！

這個小遊戲來自知名網站「HOTorNOT」，我在文章和NET-MBA課程裡都對HOTorNOT推崇有加，它實在是Web 2.0的最佳範本──其他美女/帥哥相片網站，都是網友去挖、去貼、去侵犯宵像權所得來的，但在HOTorNOT，全部都是原汁原味；人人上傳自己的相片，都是自己最帥、最美、最辣、最性感的，然後讓其他人為你打分數，你也為其他人打分數，HOTorNOT也靠接下來的一些交友配對，讓這個網站公司不必靠廣告、只靠幾個人的公司編制，便年入台幣上億元，從來都不愁吃、不愁穿。而今年初，HOTorNOT其實已經先出了一款「HOTorNOT 手機版」，可以讓你拍下自己「倩影」，和其他異性交流，但這星期，HOTorNOT竟又推出另一款iPhone小遊戲──
這一個小遊戲叫「HOTorNOT War」（HOTorNOT大戰有iPhone的可直接點此連結去看看），它的特色是：又更簡單了！

這遊戲點子乃源自一個樸克牌遊戲「War」（我沒聽過）。你有五張牌，我有五張牌，我翻一張我的，你也翻一張你的，比比看誰比較大；誰大，誰就得一分。
而這個「HOTorNOT大戰」，將這個傳統樸克牌遊戲做了一個小修改－－它巧妙的把這五張牌，換成五位美女的照片（當然都是他們站內一般素人自拍的照片），你有五位，我也有五位，而這些美女，都已經在HOTorNOT上面被人評分過，問題是，她們到底被眼尖又嘴挑的網友們，評了幾分呢？

我不知道，我只能靠自己的「判斷」，看看哪一個比較辣、比較美，然後我猜，她應該分數很高，我就「出」這張美女的牌；對方也是選一張他那邊五張牌之中可能最高分的牌，我們比比看，看誰的分數比較高？
趣味就來了。有時候，我猜這個美眉很美，歐天，怎麼才7.2分？
你猜那個看起來不怎樣的，黑白照片，照得不清不楚，什麼？高達9.5分？
你可以設定你要看女的，還是要看男的；年齡的範圍也可以設定一下。HOTorNOT裡頭的素人照片一大堆，你設定得再嚴苛，應該都可以調得出照片。不過，原版的樸克牌遊戲還包括平手就要加牌、輸的人就要拿來所有牌……這些規則則就沒有被這個「HOTorNOT大戰」採用了。

重要的是，這個iPhone小遊戲有兩種玩法。你可以一個人玩，對面就是「電腦」出牌，也可以兩個人玩，但，這個遊戲並不是連線遊戲，所以所謂「兩個人玩」，只是我和你兩人坐在一起，拿著同一支iPhone輪流玩。
你說，這樣不好玩吧？
不，我自己和老婆玩過，才發現，這…才是這個遊戲最好玩的一刻！因為我們兩人都不知道自己的五張牌，到底哪個比較美，所以真的有「比賽」的味道！
我們在比賽，誰比較會「鑑賞」美女！

這點很有趣。我們可以看到，這個小遊戲和之前此網站自己製作HOTorNOT正統玩法來看，相較之下「容易製作」許多。這款小遊戲還花了一些時間要我申請會員、登入認證，這一點實在沒有必要（大概只是想收集名單），若不要這麼麻煩，其實這個小遊戲是可以設計成幾乎是「一進去、設定要男要女，就可以馬上開始玩了！」製作便宜，操作也容易，又好玩。
此遊戲教創業家三個機會，這三個機會個個都可以是新的創業點子，而且不一定要在iPhone上，做在一般網站、做在Facebook都可以！

機會一，美女遊戲的新機會，除了「搜美女」還有其他玩法呢！美女網站是許多創業家不敗之術，這小遊戲提醒我們，我們做的美女網站大多注重在「蒐集」、「分享」，無論是美女分享自己，還是男生去分享美女的連結、照片，「分享」是很實際、很有用的功能，但，不這麼好玩，而且往往不能大家一起玩。像HOTorNOT大戰這樣，讓人家「猜猜看多少分」的美女網站，是一種頗為嶄新的做法，讓人想到，歐，原來美女網站也可以這樣正經又好玩的玩。

機會二，二個朋友一起玩的遊戲，懸疑由「第三方」製造可以變得超好玩！我們看現代已經不同，許多遊戲是自己一人，連到浩瀚的網路裡，和網路裡許多其他人對打；但，還記得以前紅白機時代任天堂的遊戲，最好玩的遊戲，應該是幾個朋友坐在一起，看著同一個螢幕操作。現在你玩遊戲機(game console)仍有一些這種遊戲，都是以動作類居多，現在，這種遊戲已經很少跑到iPhone裡來了。許多譬如原本是兩人玩的樸克牌遊戲，拿到iPhone玩就「不好玩」了；但「HOTorNOT大戰」卻創造另一種「二人遊戲」的方法，那就是，二人面對的都是「未知」，那個懸疑，由「第三方」製造（也就是HOTorNOT製造），二人可以藉這個遊戲鬥鬥智，也多了一個又一個的聊天話題。

機會三，和「網友平均值」作比較的樂趣：這個遊戲玩的是已存在的資料，這些資料已經「考」過網友一遍了，現在要倒過來考考你，你認為它是幾分？和網友比起來，你的判斷是比較高還是比較低？這種玩法，讓我們想到其他一些點子，畢竟網路上已經有的資訊非常多，別人家的網站可以爬一爬，做出一些小遊戲來考考使用者，譬如：猜猜這篇推文有多少個推？這篇多還是那篇多？你猜對了嗎？這種「考一考使用者」的小遊戲，雖然沒有什麼用處，但是是一個很有用處的網站旁邊增添一些小樂趣。使用者也樂於接受這個「考試」，大家不想知道牛頓的定律是什麼，但大家想知道自己想的和其他人想的一樣不一樣！

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

2009年9月14日星期一

CSS背景全攻略

原文鏈接：Backgrounds In CSS: Everything You Need To Know
譯文鏈接：css背景全攻略
轉載請保留版權以及鏈接
——————————————————————————————
背景(background)是css中一個重要的的部分，也是需要知道的css的基礎知識之一。這篇文章將會涉及css背景(background)的基本用法，包括諸如background-attachment等的屬性，也會介紹一些有關背景(background)的常用技巧，以及css3中的背景(background)(包含4個新的背景(background)屬性)。
css2中的背景(background)
概述
CSS2中有5個主要的背景(background)屬性，它們是：
* background-color:指定填充背景的顏色。
* background-image:引用圖片作為背景。
* background-position:指定元素背景圖片的位置。
* background-repeat:決定是否重複背景圖片。
* background-attachment:決定背景圖是否隨頁面滾動。
這些屬性可以全部合併為一個縮寫屬性: background。需要注意的一個要點是背景佔據元素的所有內容區域，包括padding和border，但是不包括元素的margin。它在Firefox, Safari ,Opera以及IE8中工作正常，但是IE6和IE7中，background沒把border計算在內。
基本屬性
背景色(background-color)
background-color屬性用純色來填充背景。有許多方式指定這個顏色，以下方式都得到相同的結果。
background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;
background-color也可被設置為透明（transparent），這會使得其下的元素可見。
背景圖(background-image)
background-image屬性允許指定一個圖片展示在背景中。可以和background-color連用，因此如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。代碼很簡單，只需要記住，路徑是相對於樣式表的，因此以下的代碼中，圖片和样式表是在同一個目錄中的。
background-image: url(image.jpg);
但是如果圖片在一個名為images的子目錄中，就應該是：
background-image: url(images/image.jpg);
糖伴西紅柿：使用../表示上一級目錄，比如background-image: url(../images/image.jpg);表示圖片位於樣式表的上級目錄中的images子目錄中。有點繞，不過這個大家應該都知道了，我就不詳說了。前端觀察版權所有，轉載請保留鏈接。
背景平鋪(background-repeat)
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。這也許是你需要的，但是有時會希望圖片只出現一次，或者只在一個方向平鋪。以下為可能的設置值和結果：
background-repeat: repeat; /*默認值，在水平和垂直方向平鋪*/
background-repeat: no-repeat; /*不平鋪。圖片只展示一次。 */
background-repeat: repeat-x; /*水平方向平鋪(沿x軸) */
background-repeat: repeat-y; /*垂直方向平鋪(沿y軸) */
background-repeat: inherit; /*繼承父元素的background-repeat屬性*/
背景定位(background-position)
background-position屬性用來控制背景圖片在元素中的位置。技巧是，實際上指定的是圖片左上角相對於元素左上角的位置。下面的例子中，設置了一個背景圖片並且用background-position屬性來控制它的位置，同時也設置了background-repeat為no-repeat。計量單位是像素。第一個數字表示x軸(水平)位置，第二個是y軸(垂直)位置。
/*例1:默認值*/
background-position: 0 0; /*元素的左上角*/

/*例2:把圖片向右移動*/
background-position: 75px 0;

/*例3:把圖片向左移動*/
background-position: -75px 0;

/*例4:把圖片向下移動*/
background-position: 0 100px;
background-position屬性可以用其它數值，關鍵詞和百分比來指定，這比較有用，尤其是在元素尺寸不是用像素設置時。
關鍵詞是不用解釋的。 x軸上：
* left
* center
* right
y軸上:
* top
* center
* bottom
順序方面和使用像素值時的順序幾乎一樣，首先是x軸，其次是y軸，像這樣：
background-position: top right;
使用百分數時也類似。需要主要的是，使用百分數時，瀏覽器是以元素的百分比數值來設置圖片的位置的。看例子就好理解了。假設設定如下：
background-position: 100% 50%;
This goes 100% of the way across the image (ie the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.
糖伴西紅柿：這一段沒想到合適的翻譯，保留原文，意譯。前端觀察版權所有，轉載請保留鏈接。
update: 感謝天涯的指教，這段搞明白了。使用百分數定位時，其實是將背景圖片的百分比指定的位置和元素的百分比位置對齊。也就是說，百分數定位是改變了背景圖和元素的對齊基點。不再像使用像素和關鍵詞定位時，使用背景圖和元素的左上角為對齊基點。例如上例的background-position: 100% 50%;就是將背景圖片的100%(right) 50%(center)這個點，和元素的100%(right) 50%(center)這個點對齊。
這再一次說明了，我們一直認為已經掌握的簡單的東西，其實還有我們有限的認知之外的知識。
注意原點總是左上角，最終的效果是笑臉圖片被定位在元素的最右邊，離元素頂部是元素的一半，效果和background-position: right center;一樣。
背景附著
background-attachment屬性決定用戶滾動頁面時圖片的狀態。三個可用屬性為scroll(滾動)，fixed(固定)和inherit(繼承)。 inherit單純地指定元素繼承他的父元素的background-attachment屬性。
為了正確地理解background-attachment，首先需要明白頁面(page)和視口(view port)是如何協作地。視口(view port)是瀏覽器顯示網頁的部分(就是去掉工具欄的瀏覽器)。視口(view port)的位置固定，不變動。
當向下滾動網頁時，視口(view port)是不動的，而頁面的內容向上滾動。看起來貌似視口(view port)向頁面下方滾動了。如果設置background-attachment: scroll，就設置了當元素滾動時，元素背景也必需隨著滾動。簡而言之，背景是緊貼元素的。這是background-attachment默認值。
用一個例子來更清楚地描述下：
background-image: url(test-image.jpg);

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
當向下滾動頁面時，背景向上滾動直至消失。
但是當設置background-attachment為fixed時，當頁面向下滾動時，背景要待在它原來的位置(相對於瀏覽器來說)。也就是不隨元素滾動。
用另一個例子描述下：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
頁面已經向下滾動了，但是圖像仍然保持可見。
需要重視的一點是背景圖只能出現在它父元素能達到的區域。即使圖片是相對於視口(view port)定位地，如果它的父元素不可見，圖片就會消失。參見下面的例子。此例中，圖片位於視口(view port)的左下方，但是只有元素內的圖片部分是可見的。
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
因為圖片開始在元素之外，一部分圖片被切除了。
背景的簡寫屬性
可以把背景的各個屬性合為一行，而不用每次都單獨把他們寫出來。格式如下：
background: <color> <image> <position> <attachment> <repeat>
例如，下面的聲明
background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;
可以合為單獨一行：
background: transparent url(image.jpg) 50% 0 scroll repeat-y;
而且不需要指定每一個值。如果省略值地話，就使用屬性地默認值。例如，上面那行和下面這個效果一樣：
background: url(image.jpg) 50% 0 repeat-y;
背景的一般用法
除了可以用來使元素更加優雅這類顯然的用法之外，背景也可以用於其它的目的。
仿欄
當使用css的float屬性來定位佈局元素時，要確保兩欄或多欄有相同的長度是比較困難的。如果長度不同，其中一欄的背景會比另外的短，這會破壞整個設計。
仿欄是個非常簡單的背景技巧，這個技巧最早發表在A List Apart 。思路很簡單：不再給每列單獨設置背景，而是給各列的父元素設置一個背景圖。所有欄的設計都包含在這張圖片之中。
文本替換
在網頁上，對於字體的選擇是相當有限的。可以使用sIFR之類的工具來定製字體，但是這需要用戶啟用JavaScript 。一個適用於任意瀏覽器的簡單方法是，用想用的字體來做一張文本圖片，並用這張圖片作為背景。這樣，文本依然出現在文檔標記中以供搜索引擎檢索和屏幕瀏覽器識別，但是在瀏覽器中就會顯示首選的字體。
例如，HTML標記可能是這樣的：

征服高級CSS選擇器

CSS是對網頁設計師可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的界面，而不用改變頁面的標籤。但是儘管事實上，我們每個人也都意識到了它是有用的，CSS選擇器遠未發揮它們的潛力，有的時候我們還趨向於使用過多的和無用的class、id、div、span等把我們的HTML搞的很凌亂。
避免讓這些“瘟疫”在你的標籤中傳播並保持其簡潔和語義化的最佳方式，就是使用更複雜的CSS選擇器，它們可以定位於指定的元素而不用使用額外的class或id，而且通過這種方式也可以讓我們的代碼和样式更加靈活。
CSS的優先級
在深入研究高級CSS選擇器領域之前，理解CSS優先級是如何工作的是很重要的，這樣我們就知道如何適當的使用我們的選擇器並避免浪費大量的時間來調試一些只要我們注意到優先級的話就很容易被搞定的問題
當我們寫CSS的時候我們必須注意有些選擇器在級聯(cascade)上會高於其它選擇器，我們寫在最後面的選擇器將不一定會覆蓋前面我們寫在同一個元素的樣式。
那麼你如何計算指定選擇器的優先級？如果你考慮到將優先級表示為用逗號隔開的四個數字就會相當簡單，比如：1, 1, 1, 1或0, 2, 0, 1
第一個數字(a)通常就是0，除非在標籤上使用style屬性；
第二個數字(b)是該選擇器上的id的數量的總和；
第三個數字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這裡包括class (.example)和屬性選擇器(比如li[id=red])；
第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等)；
通用選擇器(*)是0優先級；
如果兩個選擇器有同樣的優先級，在樣式表中後面的那個起作用。
讓我們看幾個例子，這樣或許比較容易理解些：
#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2
在下面的例子中，第一個將會起作用，因為它比第二個優先級高：
#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
至少基本理解優先級是如何工作的是很重要的，但是一些工具比如Firebug，在我們審查指定元素的時候，按照選擇器的優先級列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的。
讓你非常容易的看到那個選擇器作用於一個元素上了。
有用的文章:
CSS Specificity: Things You Should Know
Link Specificity¯MeyerWeb
CSS: Specificity Wars
Assigning property values, Cascading, and Inheritance—W3C
1.屬性選擇器
屬性選擇器(Attribute selector)讓你可以基於屬性來定位一個元素。你可以只指定該元素的某個屬性，這樣所有使用該屬性——而不管它的值——的這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素 ——這就是屬性選擇器展示它們的威力的地方。
有6個不同類型的屬性選擇器：
[att=value]該屬性有指定的確切的值。
[att~=value]該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。
[att=value]屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。 (比如lang=”zh-cn”)
[att^=value]該屬性的值以指定值開始。
[att$=value]該屬性的值包含指定的值(而無論其位置)。
[att*=value]該屬性的值以指定的值結束
比如，如果你想要改變你的博客上的日誌部分元素的背景顏色，你可以使用一個指定每一個class屬性值以“post-”開始的div的屬性選擇器：
div[class="post"] {
background-color: #333;
}
該語句將匹配所有class屬性包含”post”並帶”-”字符的div元素。 (注：此處英文原文有些上下文不對應，我已經更正——譯者，神飛)
屬性選擇器的另一個很有用的用處是定位不同類型的input元素。比如，如果你想讓你的文本輸入框使用一個特定的寬度，你可以使用下面的屬性選擇器：
input[type="text"] {
width: 200px;
}
這將匹配所有type屬性值等於“text”的input元素。
現在我們可能像為網站上不同的文件類型的鏈接添加不同的圖標，這樣你的網站的訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現：
a[href*=".jpg"] {
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}

a[href*=".pdf"] {
background: url(pdf.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}

a[href*=".doc"] {
background: url(word.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
在此例中，我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結束(*)的屬性選擇器。詳細可查看前端觀察之前的一篇文章《使用CSS選擇器創建個性化鏈接樣式》
瀏覽器支持
除了Internet Explorer 6，所有的主流瀏覽器都支持屬性選擇器。這意味著，如果你在你的網站上使用了屬性選擇器，你應該確保IE6用戶將仍能獲得一個可用的網站。比如我們的第三個例子，為鏈接添加圖標可以給你的網站帶來另一個級別的可用性，但是如果這些鏈接不顯示任何圖標，該網站仍然還是可用的。
2.子選擇器
子選擇器用符號“>”表示。它允許你定位某個元素的第一級子元素。
比如，如果你想匹配所有的作為你的網站側欄的div的子元素的h2元素，而不是可能是在div元素內的所有h2元素，也不是div的孫元素(或者更低級別的)，你就可以使用下面的選擇器：
div#sidebar > h2 {
font-size: 20px;
}
你當然也可以同時使用子元素和後代元素。比如，如果你想定位只有在body元素的子級div元素內的blockquote元素(比如你想匹配主要的div內的blockquotes，而不是其它部分的：
body > div > div blockquote {
margin-left: 30px;
}
瀏覽器支持
和屬性選擇器一樣，子選擇器不被IE6支持。如果你通過這種方式要實現的效果和網站的可用性或總體設計息息相關，你可以考慮使用一個class，或者使用只針對IE6的樣式，但是這將有悖使用子選擇器的目的。
3.兄弟組合
有兩類兄弟組合：臨近兄弟組合和普通兄弟組合
臨近兄弟組合
該選擇器使用加號“+”來鏈接前後兩個選擇器。選擇器中的元素有同一個父親，而且第二個必須緊緊的跟著第一個。
臨近兄弟組合可以灰常有用，比如，在處理文字的時候。比如我們想對段落後面的h2標題添加一個頂間距“margin-top”(當然或許你無需為h1標籤後面的h2添加，或者它可能是頁面的第一個元素)：
p + h2 {
margin-top: 10px;
}
你甚至可以更加具體，你想定位某個特定的div後面的h2：
div.post p + h2 {
margin-top: 10px;
}
或者你可以搞得更加複雜：頁面的第一個段落的第一行字母顯示為小寫字母。
.post h1 + p:first-line {
font-variant: small-caps;
}
因為可能大部分日誌/文章的第一個段落都會緊緊的在H1標籤的後面。你可以在你的選擇器中藉助於h1標籤。
普通兄弟組合
普通兄弟組合和臨近兄弟組合的工作原理很像，不同的是第二個選擇其無需緊緊跟隨第一個。
如果你需要定位所有的某個特定的div裡面並且跟在h1標籤後面的p標籤的話(你可能想要這些p標籤比擬的日誌的標題前面的文字大些)，你就可以使用這個選擇器：
.post h1 ~ p {
font-size: 13px;
}
注：這兩個選擇器太像了，所有不是很好理解，可以試一試下面的這個例子：
CSS:
p + h2{color:red;
}
p ~ h2{font-weight:700;
}
HTML:

咳咳，內容。

標題1

標題2

看看第二個h2的顏色就可以理解了吧？臨近兄弟組合只能匹配第一個選擇器後面的第一個兄弟選擇其，普通兄弟組合則能匹配所有。注：該部分英文原文沒有，是神飛翻譯時自己添加。
瀏覽器支持
Internet Explorer 6依然不能理解兄弟選擇器，但是，另一種情況，如果你的用戶中只有一小部分是IE6用戶，而且網站的結構不會被破壞或者受到嚴重影響，這是實現很多很酷的效果而無需在你的HTML代碼中添加無用的class或id。
4.偽類
動態偽類
之所以被稱為動態偽類是因為它們並不存在於HTML中——而是只有當用戶和網站交互的時候才會呈現。
有兩類動態偽類：鏈接和用戶行為。鏈接就是:link和:visited，而用戶行為包括:hover、:active和:focus。
在本文中提到的css選擇器中，這幾個應該是最常用到的。
:link偽類用於鏈接尚未被用戶訪問的時候，而:visited 偽類用於用戶訪問過的鏈接，也就是說它們是相反的。
:hover偽類用於用戶移動他們的鼠標在元素上，而尚未觸發或點擊它的時候。:active偽類應用於用戶點擊元素的情況。最後，:focus偽類用於元素成為焦點的時候——最常用於表單元素。
你可以在你的樣式表中使用多種用戶行為動態偽類，這樣你就可以，比如，根據用戶的鼠標只是滑過或懸停的時候，為一個輸入框定義不同的背景色:
input:focus {
background: #D2D2D2;
border: 1px solid #5E5E5E;
}
input:focus:hover {
background: #C7C7C7;
}
瀏覽器兼容性
動態偽類被所有的現代瀏覽器支持，甚至IE6，但是請注意，對於IE系列瀏覽器來說，IE6只允許:hover偽類應用於鏈接元素(a標籤)而且只有IE8接受:active狀態。
:first-child
:first-child偽類允許你定位某個元素第一個子元素。比如，如果你想給你的無須列表的第一個li添加一個margin-top，你就可以這樣寫：
ul > li:first-child {
margin-top: 10px;
}
讓我們來看一看另一個例子:比如你想讓你的博客的側欄的H2標籤都有個頂部邊距，以將標題和它們前面的內容區分開來，但是第一個h2不需要，你就可以使用下面的代碼：
#sidebar > h2 {
margin-top: 10px;
}

#sidebar > h2:first-child {
margin-top: 0;
}
瀏覽器兼容性
IE6不支持:first-child偽類。根據偽類應用到的設計的不同，它或許不會成為關注的主要問題。比如，如果你使用:first-child選擇器來移除標題或段落上的頭部或底部的間距，你的佈局在IE6中不會壞掉，它只會看起來有些不同。但是如果你使用:first-child選擇器從一個，比如浮動元素，移除左邊距或右邊距，將會讓你的設計亂掉。
語言偽類
語言偽類:lang()，允許你匹配一個基於它的語言的元素。
你如，你想讓你的網站的某個特定的鏈接根據頁面的語言有不同的背景顏色：
:lang(en) > a#flag {
background-image: url(english.gif);
}

:lang(fr) > a#flag {
background-image: url(french.gif);
}
這個選擇器將會匹配相關的鏈接——如果頁面的語言等於“en”或“fr”，或者以“en”或“fr”開頭並在後面帶個連字符“-”的話。
瀏覽器兼容性
不幸的是，只有IE瀏覽器中只有IE8支持該選擇器，其它的主要瀏覽器都支持該偽類選擇器。
5. CSS 3偽類
:target
當你使用錨點(片段標識符fragment identifier)的時候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，這“#comments ”就是一個片段標識符，你就可以使用:target偽類來控制目標的樣式。
舉個例子，比如你有一個很長的使用了很多文字和h2標題的頁面，然後在頁面的頭部有一個對這些標題的索引。如果在點擊索引內的某個鏈接時，相應的標題以某種方式高亮，然後滾動到相應的位置，對讀者就會很有用。很簡單。
h2:target {
background: #F2EBD6;
}
瀏覽器兼容性
這一次，IE瀏覽器完全不支持:target偽類，另一個小問題就是Opera在使用“前進”和後退按鈕時不支持該選擇器。但是其它的各個主流瀏覽器都支持該選擇器。
UI元素狀態偽類
有些HTML元素有enable或disabled狀態(比如，文本輸入框)和checked或unchecked狀態(單選按鈕和復選框)。這些狀態就可以使用:enabled、:disabled 或:checked 偽類來分別定位。
那麼你就會想，如果任意一個禁用的(disabled)文本框應該使用淺灰色的背景和虛線邊框：
input:disabled {
border:1px dotted #999;
background:#F2F2F2;
}
你也可能會想讓所有選中的複選框有個左邊距(這樣就可以在眾多的複選框中很容易認出來)：
input[type=”checkbox”]:checked {
margin-left: 15px;
}
瀏覽器兼容性
所有的主流瀏覽器，除了我們常常不報希望的IE系列瀏覽器，都支持UI元素狀態偽類。如果你考慮只是添加附加級別的細節和增強網站的可用性，這個仍然是可以採用的。
6. CSS 3結構偽類
:nth-child
:nth-child()偽類允許你定位某個父級元素的一個或多個特定的子元素.
你可以通過定義它的值為一個整數來定位某個單個子元素：
ul li:nth-child(3) {
color: red;
}
這將會讓ul元素的第三個li元素的文字變成紅色。注意如果在ul裡面有個其它類型的元素(不是li)，它也會算作其子元素。
你可以使用表達式來定位子元素。比如，下面的表達式將從第四個開始匹配每第三個元素。
ul li:nth-child(3n+4) {
color: yellow;
}
在上面的這個例子中，第一個黃色的li元素將會是第四個。如果也想從第一個開始匹配，你可以使用一個簡單的表達式：
ul li:nth-child(3n) {
color: yellow;
}
這樣的話，第一個黃色的li元素將會是第三個子元素，然後是它後面的每隔第三個。現在想像一下如果你只想匹配列表中的前四個子元素：
ul li:nth-child(-n+4) {
color: green;
}
:nth-child的值同樣也可以被定義為“even”或“odd”，和“2n” (第偶數個)或“2n+1” (第奇數個)的效果是一樣的。
:nth-last-child
:nth-last-child偽類基本上和:nth-child偽類的作用相同，但是它從最後一個元素開始算。
使用上面的一個例子來看看：
ul li:nth-child(-n+4) {
color: green;
}
不是匹配最前面的四個li元素，該選擇器匹配最後面的四個元素。
你同樣可以使用“even”或“odd”只，同樣與nth-child不同的是，這是從最後面的元素開始算的：
ul li:nth-last-child(odd) {
color: grey;
}
:nth-of-type
:nth-of-type偽類和:nth-child也很像，不同的是它只計算選擇器中指定的那個元素。
這對定位元素中包含大量不同的元素的情況會很有用。比如，我們想控制一個文本塊中的每隔一個段落，但是我們又想要無視其它元素比如圖片和引用塊：
p:nth-of-type(even) {
color: blue;
}
你也可以使用一些值，就像在:nth-child中使用的一樣。
:nth-last-of-type
你能猜到它吧？！ :nth-last-of-type偽類可以像前面提到的:nth-last-child一樣使用，但是這次，它將之匹配你在選擇器中指定的元素類型：
ul li:nth-last-of-type(-n+4) {
color: green;
}
我們可以更加的聰明一些，在一個大的塊級選擇器中結合多種這樣的偽類。比如我們想讓文章中的所有的圖片左浮動，除了第一個和最後一個(我們可以假設他們是滿寬的，無須浮動)：
.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
float: left;
}
所以在這個選擇器的第一部分，我們從第二個圖片開始定位每一個圖片。在第二部分中，我們定位所有的圖片，除了最後一個。因為這兩個選擇器並非互斥的，我們可以同時使用它們，這樣就可以一下子排除第一個和最後一個元素！
:last-child
:last-child偽類的作用類似於:first-child偽類，但是會定位父級元素的最後一個子元素。
讓我們假設你不想讓你的日誌的div的最後一個段落也有一個底部邊距：
.post > p:last-child {
margin-bottom: 0;
}
該選擇器將定位class為”post”的元素的最後一個直接子級段落。
:first-of-type和:last-of-type
:first-of-type偽類用於定位一個父級元素下的第一個同類子元素。
比如，你可以定位某個特定的div的第一個子級段落(p)，並讓其第一行字母大寫:
.post > p:first-of-type:first-line {
font-variant: small-caps;
}
在這個選擇器中，你可以確定你是在只定位class為”post”的元素的直接子級p元素，而且還是匹配第一個子級p元素。
:last-of-type偽類與此類似，只是匹配最後一個子元素。
:only-child
:only-child偽類表示一個元素是它的父級元素的唯一一個子元素。
比如說，你有一些盒子(“news”)，裡面有一些文字段落，當你有多於一個段落的時候，你想讓文字比只有一個段落的時候小一些：
div.news > p {
font-size: 1.2em;
}

div.news > p:only-child {
font-size: 1.5em;
}
第一個選擇器中，我們定義”news”div的所有子級p元素的字體大小。在第二個中，我們覆蓋之前的字體大小，如果該p元素是“news” div的唯一子元素的時候，它的字體大小會比較大一些。
:only-of-type
:only-of-type偽類表示一個元素是它的父級元素的唯一一個相同類型的子元素。
這有用什麼用？假設你有一些日誌，每一篇都有個class為”post”的div，他們中的一些有多於一張圖片，但是有些可能就只有一張圖片。你想讓後者中的圖片水平居中，而在其它的有多於一張圖片的日誌中，就將它左浮動。這個需求用這個選擇器就很容易實現：
.post > img {
float: left;
}

.post > img:only-of-type {
float: none;
margin: auto;
}
:empty
:empty偽類表示一個元素裡面沒有任何內容。
這個選擇器可以用很多種用途。比如，你在你的“sidebar”中有若干個盒子，但是不想讓空盒子顯示出來：
#sidebar .box:empty {
display: none;
}
注意，就算”box”div裡面只有一個空格，它也不會被css當作空標籤的，這樣就不能匹配該選擇器了。
瀏覽器支持
Internet Explorer (直到8.0版本)都不支持結構偽類。 Firefox、Safari和Opera在其最新版本的瀏覽器中指出這些選擇器。這意味著，使用這些選擇器對網站的可用性和可訪問性是很有用的，或者如果網站的用戶中的大部分是使用IE而且你不想在某些細節上無視他們，最好還是保持使用通用的class和簡單的選擇器來迎合這些選擇器。否則你會被搞瘋的！
7.否定選擇器
否定選擇器:not()，可以讓你定位不匹配該選擇器的元素
比如，如果你需要定義表單元素中的input元素，但是又不想包括submit類型的input的時候會灰常有用——你想它們有不同的樣式，以看起來像按鈕：
input:not([type="submit"]) {
width: 200px;
padding: 3px;
border: 1px solid #000000;
}
另一個例子，你想你的日誌的div中的所有段落(p)有比較大的字體，除了表示時間和日期的段落：
.post p:not(.date) {
font-size: 13px;
}
你可以想像這個選擇器能帶給你的潛力了吧，你能夠從你的CSS文件中剝離(剔除)的無用的大量選擇器也被它廣泛支持嗎？
瀏覽器支持
Internet Explorer在這裡常常是讓我們感到掃興的東西：一點都不支持，甚至在IE8中。這大概意味著這些選擇器將仍不得不等到一些開發者開始不再顧慮將它添加到他們的樣式表中才會普及。
8.偽元素
偽元素允許你操作HTML中不是真實存在的元素，比如一個文本塊的第一行或者第一個字母。
偽元素在CSS 2.1中就已經存在，但是CSS 3說明書表示他們應該使用雙冒號“::”，以與偽類區分開來。在CSS 2.1中，他們也是使用單個冒號“:”的。瀏覽器會將能夠接受兩種格式，除非這些偽元素只存在於CSS3中。
::first-line
::first-line偽元素將匹配block、inline-block、table-caption、table-cell等等級別元素的第一行
這對在你的文字塊上添加一些微妙的排版細節相當有用，比如，將一片文章的第一行文字改成小寫字母：
h1 + p::first-line {
font-variant: small-caps;
}
如果你專心的閱讀了我們前面的內容，你將會了解到上面的語法意味著，緊緊的跟在H1標籤之後(+)的段落會將其第一行文字顯示為小寫字母。
你也可以針對相關的div的第一行，而不用針對實際的段落標籤(p):
div.post p::first-line { font-variant: small-caps; }
或者更進一步，定位某個特低的div的第一個段落的第一行：
div.post > p:first-child::first-line {
font-variant: small-caps;
}
這裡，“>”符號表示你指定的是post div的直接子級元素，這樣如果段落被包括在第二級div中，它就不會匹配這個選擇器。
::first-letter
::first-letter偽元素將會匹配一個文本塊的第一個字母，除非在同一行里麵包含一些其它元素，比如圖片。
和::first-line偽類一樣，::first-letter通常用於給文本元素添加排版細節，比如下沉字母或首字母。
這裡是如何使用::first-letter偽元素創建首字下沉的例子:
p {
font-size: 12px;
}

p::first-letter {
font-size: 24px;
float: left;
}
注意如果你在某些元素中同時使用::first-line和::first-letter ，::first-letter屬性將覆蓋從::first-line中繼承下來的某些屬性。
如果你不知道W3C規則的話，這個元素有時會產生意想不到的結果：它事實上是使用最長的規則的選擇器！所以如果你計劃使用它的話最好仔細的閱讀一下 (其它選擇器也一樣)。
::before和::after
::before和::after偽元素用於在一個元素的前面或後面插入內容，純CSS方法。
這些元素將繼承它們將附加的元素的大部分屬性。
假設你想在你的頁面中的圖標的描述前面添加文字“Graphic number x:”。你將無需寫文字“Graphic number”，或者自己手動添加數字：
.post {
counter-reset: image;
}

p.description::before {
content: "Figure number " counter(image) ": ";
counter-increment: image;
}
那麼這會產生什麼？
首先，我們告訴HTML來創建“image”計數器。比如我們可以添加該屬性到頁面的body。同樣我們也可以給該計數器起任何一個名字，只要你想，只要我們常常使用同樣的名字引用它：自己試試吧！
那麼我們想在class為”description”的每一個段落之前添加這一塊內容: “Figure number ” —注意只有我們在引號裡面寫的內容才會被創建到頁面中，所以我們也要添加一個空格！
然後，我們就有了counter(image):這將用到我們之前在.post選擇器中定義的屬性。它默認會從數字1開始。
下一個屬性在那裡表示計數器知道對於每一個p.description，它需要將image計數器增加1 (counter-increment: image)。
它並不像看起來的那麼複雜，而且還會灰常的有用。
::before和::after偽元素常常只使用content屬性，來添加一些短語或排版元素，但是這裡我們展示了我們如果以一種更加強大的結合counter-reset和counter-increment屬性的方式來使用它們。
有趣的是: ::first-line和::first-letter偽元素可以匹配使用::before偽元素生成的內容，如果存在的話。
瀏覽器支持
如果使用單個冒號的話(比如, :first-letter,而不是::first-letter)，這些偽元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流瀏覽器都支持這些選擇器。
結語
乏味的講述終於結束了，現在該你來領悟本文的要義並自己嘗試了:開始通過創建實驗性的頁面並測試所有的這些選擇器，在有疑問的時候返回這裡並確保總是遵循W3C的規則，但是請不要只是坐在那裡想這些選擇器尚未被完全支持你就無視它們。
如果你敢於冒險，或者你不害怕放棄之前的遍地無用和非語義化的class和id，為什麼不嘗試一兩個這些強大的CSS選擇器到你的下一個項目中呢？我們保證你不會回頭的！
參考
CSS 2 Selectors — W3C
CSS 3 Selectors Level 3 — W3C
Comparison of layout engines (Cascading Style Sheets) — Wikipedia
Generated content, automatic numbering, and lists — W3C
擴展資源
Keeping Your Elements' Kids in Line with Offspring — A List Apart
Selectutorial – CSS selectors
A Look at Some of the New Selectors Introduced in CSS3
CSS 2.1 selectors, Part 1 and Part 2
CSS 3 selectors explained
CSS selectors and pseudo selectors browser compatibility
10 Useful CSS Properties Not Supported By Internet Explorer
Styling a Poem with Advanced CSS Selectors

關於作者
Inayaili de León 是一個葡萄牙網頁設計師。她對網頁設計和前端編碼有特別的愛好，而且喜歡漂亮和間接的網站。她居住在倫敦。你可以在Web Designer Notebook看到她的更多文章並follow her on Twitter。

文章來自前端觀察
文章提供BAYSTAR DESIGN網頁設計公司

2009年9月13日星期日

26歲年輕人用部落格宣傳「放空水餃股」專長，現靠周邊商品就月收台幣140萬

上周看到有篇文章簡短的介紹了一位我從來不知道的人，這傢伙叫做「Timothy Sykes」，1981年生，今年26歲。五年前剛從大學畢業，但他現在已經是華爾街頗有成就的投資高手，有趣的是，他打下江山的方式卻和其他人不同。
應該說，他「刻意」和其他人不同！

就像一些華爾街傳奇人物，Tim在大學時代唸的是哲學系，卻對股票投資特有興趣。1999年他還在念大一，就從長輩那邊得到一筆1.2萬美元的禮物，他二話不說，全數投資在股市，三年後，竟已經賺到165萬美元（台幣5300萬元），成為一個百萬身價的學生，然後自己開了一間避險基金(hedge fund)公司，後來這間公司也被Barclays指名為第一名的避險基金，連續三年，他本人也在2006年榮獲「Top 30 under 30」的殊榮，和其他29名三十歲以下的投資新星一起獲獎。
不過，股市並沒有常勝軍，每一個投資人都經歷過大起與大落，不幸的，Tim在2007年底投資失利，資產損失了三分之一。

有趣的是，大部份的投資人，下一步會做什麼？這時候應該是「站起來、記取以往教訓、東山再起」。的確，Tim是站起來了，但他竟然整個的換了方向。他開始看「網路」。
當時是2007年10月，什麼叫看網路呢？不，不是投資網路股啦。他開了一個「部落格」，用自己的名字，而且努力的寫著他投資的經驗。

不過，世界上的金融部落格之多，教人家怎麼投資理財做股票玩基金的部落格大大小小滿網路都是，在2007年開一個部落格已經太晚、太晚了。你說，Tim是年輕有為呢！但投資圈無奇不有，像Tim這樣少年賺錢的奇蹟小朋友，絕對不乏他一位，那，Tim要怎麼闖出名號呢？

Tim做了一件事，很厲害的是：他改為專門炒一種「特別的股票」：
這種股票，就是所謂的「水餃股」，美國叫「Penny Stock」。這種「水餃股投資」其實也不是只有Tim在做，查搜尋引擎，也有好幾家在做。不過Tim的特色是，他專門「放空」水餃股（Shorting penny stocks）－－自2007年起，Tim繼續投入股市，不斷的放空水餃股，也不斷的寫部落格，分享他如何的放空這些不爭氣的水餃股。他甚至在部落格上解釋，為何他獨鍾這項「專長」？他認為，他在教大家繞過所有金融界那些教你怎麼賺錢、怎麼理財的業務員，要你直接操作自己的財富；他要教大家華爾街是怎麼「腐敗」的地方，你可以靠「看壞它」來賺錢！你可以靠揭穿那些水餃股來賺錢！他在網路上喊著這些事情，喊得很積極，因為Tim認為，在他的領域裡，「網路」這個東西的玩法還在「一局下半」，還有八局可以走！

Tim也真的很厲害，從2007年到2009年，不到二年時間，他靠這樣「放空水餃股」，就讓自己的財產再膨脹了4.95倍。這段期間，整個股市下跌了40%，他卻逆勢反漲（他看空嘛）。於是，Tim証明給他的讀者看，他絕對是最強的，很快的Tim就變成第一名的投資人！

問題是，網路上誰都喊第一名，Tim怎麼證明他是第一名？原來，這部份有一個很重要的關鍵點。Tim使用了一個叫「Covester.com」的系統，可以監測他的每一次買進、每一次賣出，因此他在他的部落格說他的表現有多好，每一次，都是有證明的，Covestor已經用數字活生生的證明了Tim的表現，在近兩年內，竟然是3萬名投資人之中的第一名，於是這個Tim就和他的「放空水餃股」一起得到全球的注意了！

有趣的是，Tim成功發展了這個前所未見的「專門放空水餃股」的專長，透過這個部落格，他也可以開始賣其他「周邊商品」。他先寫了一篇文章：「我的部落格在上個月賣了4萬5千美元（台幣140萬元）」，這次不是驚動了金融界，而是驚動了「網路界」，因為，這筆錢並不是他從股市得來的，而是從「周邊商品」得來的！
什麼意思？

這招就和我在NET-MBA課程中提及的「油畫」賺錢術一樣，要讓使用者付錢，流量可以超級爛，無所謂，只要你的產品真正棒，來訪客人正是目標族群的話，就可以創造超高的轉換率。Tim的「周邊商品」有兩種，首先，他自己開了間出版公司「BullShip Press」，專門就出版「放空水餃股」的教學DVD，這是第一個收入來源，而第二個收入來源來自一個叫「TIM alerts」的服務，這就好像股友會，老師說要賣什麼、要買什麼，你付了錢，就可以隨時被通知，網友只要照著買就好了。Tim透露，以上兩項目前為他挹注了同等多的營收，通常網友都會先買DVD，看完後很有興趣，希望再繼續跟著Tim殺進殺出股市，於是再買了TIM Alert。

Tim對網路真的很有想法，除了上述兩項產品，他還大膽自創一些新的機制，譬如他推出「TIM Bucks」，部落客自己的虛擬貨幣，別想太多，這不是讓網友可以儲值的。「TIM Bucks」只像小學老師給的小貼紙，讓他可以贈給網友，作為虛擬的獎勵，網友也很喜歡這玩意。Tim也大剌剌的和網路人「喊話」。他認為，雖然他不是網路人，但他直覺那些利用廣告來賺錢的部落客是走錯了方向！他認為錢應從讀者來，而非從廣告主，現在他打算將部落格「升級」為一個股票專門的「媒體」，在「PennyStocking.com」，以後還會請寫手一起來寫，收費的模式應該也不是靠廣告，而是靠周邊商品，而更大筆的收入或許應該是背後其他人委由他的代操投資。
最後，Tim雖然是個26歲的年輕人，卻對自己充滿信心，他信心的原因，似乎不是因為他聰明絕頂。他說：「沒人比我工作還認真的！」
「我一天工作16~18個小時，」Tim堅定的說：「所以，其他人很難超越我的成就。」
令人感動。我更有一個感想：幾十年來，Tim這樣的成功故事，其實耳熟能詳，比網路人成功故事聽得還多，頗有親切感。

成功的故事，幾十年來不會變；這些既有的方法，再加上巧妙運用網路，會發生什麼事？Tim如果沒有專攻「放空水餃股」，開這麼一個部落格，或許他就只是一個一般的投資人，不可能像現在創造這麼高的成就。還有什麼新的「專業」可以從實體拿到網路上來發揮一下？

文章來自mr6
文章提供 BAYSTARS DESIGN網頁設計公司

2009年9月9日星期三

20個使用水彩效果的網頁設計

原文：20個使用水彩效果的網站設計

整理自：Naldzgraphics

一些網站在設計中使用漂亮的水彩效果，這些水彩效果可以讓網站向使用者展示頗優雅的視覺體驗，體現網站的獨特的有藝術性。
這裡收集了一批新的使用水彩效果的網站設計，更多相關設計請查看《最佳實例：網頁設計中的水彩效果》，當然可能並非所有的都很美，但是至少可以給我們提供一些參考。希望大家能夠喜歡。
如果你需要水彩風格的PS筆刷，請查看300多個出色的PS筆刷

Erguvanplatin

Josh Tilton

Happy Cog

Lebloe

bcandullo

Ebugogo

x3studios

Toucouleur

Weberica

Casioexilimlab

Critical Web Design

CSS Addict

5pts-interactive

Squawk Design

Super Motard Galicia

Football Made in Africa

James Lai Creative

Tylor Jreimer

Csharp Design

Magouya

文章來自Naldzgraphics
文章提供BAYSTARS DESIGN網頁設計公司

天底下沒有「專家才能做」的事

這次在H1N1新流感的死亡病例中，有好幾例都是醫師誤診、拖延了投藥時間。也有幾個成功打敗病魔的案例都是在醫師誤診後，病患自己覺得不太妥當，堅持要醫師再確認一次！甚至不惜換一家醫院再試一次！才發現，果然是新流感，救了自己一命。

讓人一嘆：醫師不是應該救人的嗎？或許醫師真的救了99%的人，但剩下的1%，是不是真的無法救？還是因為醫師自己的疏忽，甚至是誤判，讓病患歡喜的、放心的回家，結果三天後，病患卻白白喪失了寶貴的生命？

這些誤診、誤判，都會過去的。因為，即使病患喪失了生命，但他也就只是一個小小的百分比，對醫院而言不痛不癢，對醫師自己的治療成功率亦是不痛不癢，但，對病患家屬而言是永遠的痛，對病患本人更是「Total Loss」，直接被送到另一個世界，什麼也沒有了。
我們發現：專家也會犯錯。

當這個錯誤，專家可以接受，社會也可以接受，「你」不能接受，怎麼辦？
ZDNet這周刊出一篇相當感人的故事，關於一位叫Robert Goldman的科技人，他原本是軟體工程師，不幸他摯愛的妹妹得了癌症，他很難過。就像許多癌患家屬一樣，在治療的期間，他一邊聽醫師的話，但一邊也會去尋求有沒有更好的「偏方」。他會去瞭解這些癌症的各項治療方式，愈來愈瞭解後，會去查詢各地的資料，他來到「Medline」，上面一大堆臨床實驗的報告，他一邊在網路上翻箱倒櫃，一邊驚訝的發現，許多臨床報告已經研究過了，甚至都已經成功了，卻都沒有運用在真實的病患上。

當時是近了西元2000年，他找到了一篇二十幾年前、寫在1987年的義大利研究報告，指出他們曾經成功的將化療直接用導管注入癌細胞中。他看到這個報告後，竟然有了一個「點子」。
天啊，這又不是在做網站，科技人竟然敢幫醫療界出「點子」？這位創業家想到，如果癌細胞都會自己生出一根管子為自己補充血液，那如果我們能做出一個「超細」的導管，是否能置入血管內，直接通到癌細胞的血管，先把血液堵住，然後再伸出另一根導管，直接透過那細細的血管對癌細胞直接施以化療，這樣可行嗎？
當時，他跑去找了史丹佛醫學院的教授，教授說，如果你真的能做出「這麼細的管子」，那，這件事是可能發生的！

這句「可能發生」，讓他大受鼓舞，二話不說，就開始籌資了，也順利的創辦了「Vascular Designs」公司。創業家事後笑著回想這一段，當時他其實「根本不知道他自己在幹什麼」。
不知道自己在幹什麼，卻異常的固執！創業家說，開辦後，很多人跑來跟他說，他絕對不會成功的！就算成功了，也很難通過政府的法規！一般人聽到這些「提醒」，心就會軟了一半，乾脆來看足球賽吧，不要想太多了；乾脆去皈依信教吧，不要想這麼多了。不過，這位創業家依然沒放棄，他反問這些人：那，你們有看過研究報告嗎？他們看過什麼東西？這些人都說：「他們什麼都沒看過，但笨蛋都知道這是行不通的。」「這些付出，絕對不合你投注的時間與成本！」他們說，你是「當局者迷」，他們局外人，看得比較清楚啦！
這位創業家繼續，也因為當時「只有這條路」可以走，因為，這是很著急的事，為了他摯愛的、垂死的妹妹，就算這台機器只能幫助他妹妹一點點，也是好的！

在創業家堅持的帶領下，第一次實驗，他們其實失敗了，導管做得還不夠細，所以要重新開始。每一次，他們都花了兩年的時間才能從設計做到實驗，不行就得重來！就這樣做了幾次，他們……終於成功了！接下來面對政府這一關，他們也想辦法引用另一個已被批准的設備，說服政府他們這個新設備相當相似，也成功的縮短了政府流程。經過了八年的奮鬥，今天，他們已經進入最後的準備期，只要再等兩個月就可以將此器材賣給醫院了！

有趣的是，通常這種醫療器材的新創公司都很耗資本，第一輪就必須募2500萬美元（台幣8億）以上的資金。但，他全心在將這個產品做出來，沒有想太多，因此最後總結算，其實只燒了180萬元的資金來開發這項產品，只花了第一輪所募資金的不到10%，非常高效率。他也是到最後才有時間結算出這一點，在研究的期間，他由於一心只想將東西做出來，救他妹妹，完全沒有想到任何花錢或什麼策略之類的事！現在，這個器材即將為這間公司與這間公司的投資人，帶來超過幾十億美元的獲利，這位創業家也再次創業成功，得到億萬的家產。

不過，八年啊，整整的八年，他妹妹早已經等不及，不幸來不及「先走一步」了，據創業家說中間的過程非常痛苦。現在，這位創業家唯一的希望就是看到第一位使用的病患，以及他們的家屬，看到他們的笑容──那笑容，讓他彷彿可看到了，他自己和他妹妹的笑容。

而美國政府的批准文件，這星期也終於下來了，新聞稿寫著：「極大潛力的癌症治療系統已經推出，可以直接對癌細胞進行化療」。事後，大家看這個新聞稿，會覺得「這點子很容易理解嘛！」問題是，誰會知道，這個機器的後面，是一位離「專家」還很遠的病患家屬所發明的？
如果沒有他，等專家要等到什麼時候？
我們不「做」專家，因為，天底下絕對沒有只有專家才能做的事。我們只「做」。

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

訂閱：文章 (Atom)

2009年9月17日星期四

Facebook創造三億史上最大會員數並達成損益兩平，各個細節之間如何的環環相扣？

2009年9月15日星期二

HOTorNOT美女大戰，簡單好玩又不太色的兩人小遊戲

2009年9月14日星期一

CSS背景全攻略

Blogroll

征服高級CSS選擇器

標題1

標題2

2009年9月13日星期日

26歲年輕人用部落格宣傳「放空水餃股」專長，現靠周邊商品就月收台幣140萬

2009年9月9日星期三

20個使用水彩效果的網頁設計

天底下沒有「專家才能做」的事

怪怪國日報

關於我自己

追蹤者

網誌存檔

我的網誌清單

標籤

Plurk

2009年9月17日 星期四

2009年9月15日 星期二

2009年9月14日 星期一

Blogroll

標題1

標題2

2009年9月13日 星期日

2009年9月9日 星期三

關於我自己

追蹤者

網誌存檔

我的網誌清單

標籤

Plurk

2009年9月17日星期四

2009年9月15日星期二

2009年9月14日星期一

2009年9月13日星期日

2009年9月9日星期三