ABoxLife.com記錄每一個環保紙箱的旅行軌跡，成功促使三分之二客戶改用回收箱

凡走過必留下痕跡，如果環保紙箱也是這樣呢？
知名運動衣服廠商Columbia，大約在六個星期前，推出了一個相當有趣的新網站。這個網站顯然是開來「搭配」Columbia在同時間新開的線上商店的，當Columbia開始在線上賣東西，它也同步開設這一個網站，幫它的線上商店「護航」。

這個專門護航的網站，是要幹嘛的？怎麼「護航」法？
這個網站叫「A Box Life.com」，中文翻成「一個紙箱的生命」，原來，這是一個讓Columbia將這些球衣、運動商品運到客戶端的時候，可以鼓勵客戶多多使用「回收紙箱」的網站。六周來，成績相當驚人，它用這種方式，竟已經成功的讓66%的線上客戶，改為選用「使用回收紙箱」來運送。這些紙箱一般人認為髒兮兮的，沒想到，竟有三分之二的客戶，願意用這些髒兮兮的紙箱來裝他們花錢買來的寶貝新衣！
網站這麼神奇？

「A Box Life.com」有點像兩年前推出的「WhereIsGeorge」，可以追蹤每個紙箱的坎坷旅行軌跡。當你收到一個箱子，你收到的不只是一個箱子，還可以依照這箱子上面的序號，來到這個「A Box Life.com」網站，敲進去，就可以從Google地圖上，看到這個髒兮兮、破爛爛、臭摸摸的紙箱，曾經到過哪幾個城市？除了序號，箱上還有一個二維條碼QR-Code，掃一下也就馬上可以知道。當然，在你知道以前，它懂得先要求你也要輸入自己目前的郵遞區號，告訴它你怎麼拿到這個箱子的？你的這一段記錄，也會被記到網站裡，成為此紙箱的一段歷程。除了地圖，它也使用Flickr的Group功能，只要上傳到Flickr相簿網站，設定了A Box Life的Group，你的照片就會被集結過來這個網站，給其他人分享你收到紙箱的快樂。另外，也可以在微網誌上面寫，只要在Twitter裡提到「#ABOXLIFE」，就會被匯整到網站過來。

這個網站真的很妙，完全抓住了消費者的兩點心理，讓他們願意做環保──首先，你自己在使用過這個箱子後，絕對願意「再回收」。因為，當你收到這個箱子，看到已經去過這麼多地方，肯定不忍心將它大卸八塊！你肯定會將它好端端的送還到指定的地點，可能是Columbia的相關廠商，也有可能是原先那間大賣場，讓Columbia可以再回收，讓這趟「旅行」繼續下去，誰想當「劊子手」呢！換句話說，因為「A Box Life.com」的存在，你從一個懶得動的環保懶蟲，變成一個非常勤勞的環保尖兵，願意「護送」這個紙箱繼續完成它的使命。這招真的厲害。

另外，這個「A Box Life.com」讓我的「好奇心」開始工作。平常的時候，你說你要運東西過來給我，要我接受我花錢購買運過來的新商品是裝在一個別人裝過其他東西的「回收紙箱」內？我會想，那麼你乾脆先用新紙箱寄給我，之後我自己會回收那個紙箱，或是將舊紙箱寄給你，請Columbia你不要這麼雞婆熱心幫忙好嗎？但，這次不同了，我買到一件球衣，當我收到這件期待已久的球衣，嘩，打開來馬上穿上！另外，旁邊孤伶伶的紙箱，又打開了另一個故事……。
這是史上第一個真的有傳染能力的「回收計畫」，不，應該說是「回收遊戲」。其他廠商也都在做各式各樣的回收活動，但和這個「A Box Life.com」比起來，真的就有點「費力」的感覺。如這篇所說，今年初可口可樂在開設了第一間瓶子回收工廠後，也動過這個腦筋，而它的方法果然很「可口可樂風」，跑去和行銷公司合作，將那些用過的塑膠瓶做成1300件高爾夫衫，可以讓高爾夫公開賽的那些志工們穿著；這種衫依然可以有50%純棉成份，一方面作環保，一方面又得到極大宣傳的效果，它也順便在現場理所當然放了200個回收垃圾桶，上面肯定是秀出可口可樂的標誌。但大家知道這東西其實的新意都在「回收技術」、「宣傳效果」上，在訴求人人的環保方面，只是非常老舊的要求大家「回收、再製」的手法。另外那篇報導也另提到一家廠商Icebreaker、 Give Something Back、Terracycle，都有類似的計畫，不過這些計畫感覺上都沒什麼了不起。

一個小小的網站，竟然可以奇妙的改變許多以前做不到的事情。以前的時候我們談RFID，我們總認為，最棒的事情是讓客戶知道「這個箱子在何處」，現在UPS、Fedex的確都有做到這一點，不過，我們倒沒有想過，「這個箱子曾經去過何處」竟然也有「梗」，可以讓消費者買下來。因為Columbia的物流廠商本來就是以同樣的序號來控制，因此這個箱子去過哪些地方，真的都有被記錄下來！

從「A Box Life.com」我們可以發現，做網站的我們一定要不斷的思考，做這件事情，有沒有更簡單的做法？有沒有更快的方法？一樣的「環保」，每家廠商的做法都不同，大多只是「花拳繡腿」。再怎麼難推廣的任務，網路的力量絕對都有潛力做到「硬拳硬腿」，它最強大就在於「一傳十、十傳百」，做網站的人，如果看到推出一個東西，沒有這樣的效果，那寧可收起來不做，重新想一個真的可以傳染出去的玩意，譬如「A Box Life.com」這樣。

更值得注意的是，看看「A Box Life.com」目前數字，儘管有高達66%的客戶，選了使用回收紙箱，但真的將紙箱的序號再log回來的，大約只有284位而已，感覺上並不是很多；再到相簿看看，真正上傳相片的，也不是很多，這是什麼意思？這是網站常有的現象，「A Box Life.com」要做的，其實並不是要讓每個人都會拿到箱子都記錄下來，畢竟這動作以前從來沒有過，要改變人類的做法並不容易。「A Box Life.com」主要是讓這三分之二的消費者，踏出「第一步」，第一次的使用回收紙箱。

一般消費者，都是在「第一次」的時候，需要一股「衝動」，才會做下去。第二次或許也是，但之後第三次、第四次、第五次，只要前兩次所帶來的經驗，以及第兩次多多少少不知不覺培養出來的新的「習慣」，就足夠這些人繼續做下去。如果要讓消費者踏出第一步，照你的要求做第一次、第二次，「好奇心」是一個不錯的方法。難就難在好奇心要怎麼獨一無二，一件事要產生好奇，一定是那件事對該消費者來說是相當「獨特」，這個獨特的成份，對一般廠商就算是可口可樂都非常困難，但經過巧妙的設計，「A Box Life」利用了消費者自己的動作，每一個動作加起來，為每一個紙箱說出不一樣的故事，一個消費者就會帶來另一個。
所以，創業家還可以想一下，還有哪些點子可以運用「好奇心」呢？尤其在公益、環保這一塊，可參考一下「A Box Life.com」的做法。

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

「Brands in Public」開站，示範利用Web 2.0賣給大企業而不耗一隻業務兵

知名網路創業家Seth Godin於上周推出新作，叫做「Brands in Public」，中文可翻譯成「品牌大公開」。
公開什麼呢？

原來，這個網站收集了某一個品牌在網路上吸引網友的所有留言，譬如，知名家具用品大賣場「Home Depot」的頁面就在這裡，一個頁面，列盡了從Twitter、Google News、Yahoo ! News所收集來的所有關於「Home Depot」這間公司的網友發言，「我今天去Home Depot買東西…。」「我超愛Home Depot裡面賣的盆栽…。」這類型的發言，通通被集結在這一頁裡了。
這個「品牌大公開」並不是獨立網站，而是依附在Squidoo之下。Squidoo是這位創業家創辦的另一個網站，讓網友免費製造一些公開的頁面，目前已靠40萬名會員製造了大約100萬頁各式各樣的題目，競爭者是之前寫過的Mahalo以及Hubpages、Helium；像這種網站的模式就是做多了公開頁面，裡面什麼奇怪題目的頁面都有了，整體提升了這個網站的排序排名，什麼頁面都很容易被搜尋引擎搜到，以上三個網站，據TechCrunch引用Compete圖表，都有一個月440萬名不重覆使用者的水準，是一個很會賺搜尋引擎流量的錢的網站。
不過，目前Squidoo不見得收錢收得很順，所以創業家再開了這個「Brands in Public」，改為大品牌做這些頁面，然後就可以巧妙收費了！

怎麼收費？這有點像去年Yammer所做的事情，不過做得更狠、更賤一點。「Brands in Public」竟然要求網友們幫忙將這個網頁，寄給所有他們所知道的大品牌。這頁裡頭講了一句話──
「我們和Google不一樣。」他說，「你可以管理這些我們幫你收集來的網路上網友的碎碎言語，只要你願意付會員費的話。」

「人們都在講你了，你願意露面了嗎？」Seth Godin這樣和企業喊話！
如果客戶付會員費的話，它可以修改的地方包括一開始標頭的簡介。你可以在這邊指出下面有哪些留言你特別喜歡的，還可以在這個頁面中連回去你的部落格、影片、微網誌、官網……等等。最重要的是，你可以將這些網友的正評負評收集以後，將正評擴大、負評縮小。
至於會員費多少錢？嗯，它的會員費，開價一個月400美元（台幣1.3萬），這對Fortune 500來說應該是很簡單的事情，假設有1000家客戶好了，一年的營收就是480萬美元，合台幣1.6億。如果真的達到一萬家客戶，那就是16億台幣的年營收！

最差勁的是，「Brands in Public」並不打算等這些大品牌、大廠商「自己開頁」，它目前已經直接幫一百多家最大家的廠商開頁，自動已經開始收集哪裡在講麥當勞什麼，哪裡在講星巴克什麼，哪裡在講Nike什麼，哪裡在講波音公司什麼……。此舉讓「Brands in Public」引發網路的激烈討論！像這篇文章直指這位創業家是在「Brandjacking」，也就是「品牌劫機」，是一種變相的威脅，和恐怖份子沒有兩樣！它說，「Brands in Public」的搜尋程度一點都不強（都是用現有的API），品牌可以去買Radian6可以得到更多的網路上碎碎念（當然沒有公開），也可以買Trackur只要18美元月費，什麼400美元月費，有沒有搞錯？

有趣的是，它並不是第一個做這件事的廠商，之前知名的「Get Satisfaction」也做過。當「Brands in Public」這樣一做，它不需要任何的業務團隊，網路就是它最好的業務大軍，一兵一卒不必用，就可以告訴企業高層，買吧！

我覺得更值得網路創業家思考的是，「Brands in Public」可能抓到了一些企業大品牌對網路輿論的邏輯的漏洞。昨天看到Gmail上面有寫到一條紅色的、關於聯絡人的事？每次Gmail發生這種事，我們都以為是自己的問題，後來經過一些文章才知道這是Google自己當機了！這是Google，它不會care這樣的事情發生。但，其他品牌就不一樣了──
大家知道嗎？一般的「非網路品牌」，對於網友的碎碎念，其實是非常非常敏感的，動它一毛，它會整個跳到天空去！他們的「忍耐度」是非常非常的低。如果他們開一個帳號，結果裡面開始引發一些負面的聲浪，如滾雪球愈滾愈大，他們寧可把這個帳號整個關掉，也不要惹事生非。不，不需要任何負面聲浪，只要進來的人，感覺上不是他們要的族群，為了維護他們花了不知多少店頭廣告、戶外看板、全球灑血廣告錢所打造出來的所謂「品牌形象」，他們快刀斬亂麻，直接把這個頁面砍掉，也不要惹事生非了。「Brands in Public」看似一個簡單的服務，讓一個品牌的東西全部集結在下面，其實，這種服務，在一個這麼大的品牌的水準來看，是沒有使用者會想看的（你會想看關於可口可樂的所有事？關於Burger King的所有事？），它的主要重度關心者將會是這些大品牌，而主要目的是要他們掏錢出來！

這讓我們想起一個「庶民新概念」。以往我們希望開一個推舉吃東西的網站，附近哪一家餐館好吃，然後收這些中小餐廳的錢。但，這樣的網站的缺點是，大餐廳通常是最後一個買單的，真正的大餐廳說不定寧可不要在你上面，以免被和那些小餐廳「相提並論」。但這個Brand in Public」的策略「恰恰相反」，它直接讓大家去推「最大家的餐廳」，這家餐廳反而想要控制這一切，而付錢解決。

所以，我們如果開庶民的Web 2.0網站，或許應該從「最大的廠商」視為目標收費人。庶民的評論是無法管的，其實，一間大餐廳，他們會評論得更猛烈，這時候，收費模式也非常的清楚。只是這做法是否會造成商家大反彈，就要看時間證明了。

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

國外30個華美的Flash網站設計

原文：國外30個華美的Flash網站設計

譯自：30 gorgeous websites designed in Flash

請尊重版權，轉載請註明引用來源，多謝！

本文收集了國外30個非常非常漂亮的使用Flash製作的網站，強烈推薦動畫設計師前去圍觀。一直敬佩能做出如此出色的動畫網站的達人，他們不僅有很好的技術，更有獨特的創意。如果你有將很酷的中文動畫網站設計，歡迎提交給我們。1. Cubic
2. Miki Mottes
3. Soft
4. I Am Always Hungry
5. WaterLife
6. Kenjiro Harigai
7. Smart Grid
8. Switch Mediaworks
9. BubbleWood
10. Matthias Dittrich
11. JLern Design
12. Parasol Island
13. Quicksilver
14. Monoface
15. Packland
16. Maven Interactive
17. BeBop Jeans
18. Sour Sally
19. The Seen
20. Wawa Coffee
21. Tangled Decals
22. Milky Tea
23. UFC 100
24. Got Milk?
25. We Should Do It All
26. Daffy’s
27. Creaktif!
28. Cheese & Burger Society
29. Annick Tremblay
30. Drawing Art

文章來自baystars design網頁設計公司

國外25個最佳樂隊和歌星網站

原文：國外25個最佳樂隊和歌星網站

譯自：25 of the Best Websites of Bands and Musicians

國外請尊重版權，轉載請註明引用來源，多謝！
通常，各種類型的娛樂行業相關的網站可以用來啟發你的設計靈感。樂隊和歌星需要有一個能夠吸引訪問者並為其粉絲提供他們所有必需信息的網站。本文我們將為大家推薦國外的25個設計非常棒的樂隊和歌星網站。
這些網站看起來都很潮，它們使用了當前比較流行的一些設計元素，比如：大字體設計、大背景圖、手繪元素、塗鴉背景等。
當然，國內的和港台的一些明星的網站設計的也是非常棒，我們最近也將收集一些設計最好的中文樂隊和明星的官方網站，以給大家提供參考。

文章來自baystars design網頁設計公司

網頁設計中的手繪元素

原文：網頁設計中的手繪元素

譯自：Great Examples of Hand Drawn Elements in Web Design

版權所有，轉載請註明出處，多謝！

手繪元素通常是用在紙上的，但是最近它們被越來越多的用在網站設計上面。手繪風格已經變得很流行了。這些速寫元素令到網站極具個性並能為訪問者提供有趣的體驗。這裡是一些在網站設計中使用手繪風格的網站最佳實例，希望能給你某些參考。
PS：事實上，手繪風格和塗鴉很像，很多地方就直接將兩者放到一起來說了，如果非要分的很輕的話，，我們一般可以認為手繪比較優雅一些，而塗鴉則更誇張……
Yellow Bird Project

Mark Forrester

camellie

Tech Adventure

Merge

Red Velvet Art

Odosketch

Unlimited Creativity

We Are Not Freelancers

Jesús Rodríguez Velasco

The Idiotic Adventures of Philippe and Pierre

Kutztown University

Matt

Boompa

Web Designer Wall

Biola Undergrad

Esteban Muñoz

Mutt Ink

Sushi & Robots

Hull Digital Live 09

Tyler Gaw

Washtenaw Community College

J.A. Mathius

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

12個對網頁設計師非常有用的圖片優化工具

原文：12個對網頁設計師非常有用的圖片優化工具

譯自：12 Really Useful Image Optimization Tools For Web Designers

請尊重文章的版權，轉載請註明出處，多謝！

圖片非常重要，它們可以讓你的頁面更好看，更引人注目。但是，高質量和漂亮的圖片常常會很大,它們會讓頁面加載變慢並消耗更多帶寬。所以我們，這些設計師應該優化圖片以使其體積更小但質量更高！
事實上有很多有用的圖片優化工具，它們可以幫助我們優化並減小圖片的文件尺寸。這些有用的應用包括web應用和桌面應用。
基於web的圖片優化工具1. Smush.it
Smush.it是一個很流行的圖片優化工具，它可以既減小圖形文件的大小又能保持其質量，也就是我們稱之為“無損(lossless)”圖片壓縮！你可以通過網站來運行Smush.it (一次最多5張圖片)或者通過Firefox的YSlow擴展。
2. Dynamic Drive在線圖片優化器
該在線圖片優化器允許你優化不同的文件格式，比如GIF、JPG和PNG。你既可以從本機上傳圖片，也可以像Smush.it那樣粘貼圖片的URL。該工具可以優化並轉換你的圖片為不同的文件類型。該工具的限制是每次一張圖片，每張圖片不大於200K。
3. PunyPNG
PunyPNG使用多個優化技術。它將先檢測你的圖片，然後判斷哪種技術是最適合的。 PunyPNG支持大部分流行圖片格式，並自動為你測定轉換的圖片格式。
4. SiteReportCard圖片優化工具
SiteReportCard圖片優化工具支持GIF、JPG和PNG格式。你可以粘貼圖片URL或者從你的電腦上傳。該工具將會壓縮和優化圖片為適當的大小和質量。

桌面圖片優化工具1. Shrink O’Matic
Shrink O'Matic是一款基於AIR的應用，它可以通過拖拽來即時的處理圖片。你可以選擇一些選項，比如輸出格式、輸出名字或者輸出大小。
2. OptiPNG
OptiPNG是一款高級PNG優化器，可以將多種文件格式的圖片轉化為優化過的PNG圖片。 Windows用戶可以通過OptiPNG Windows Shell Integration項目將OptiPNG整合到Shell，或者使用OptiPNG作為Paint.NET插件。使用Mac OS X的用戶可以通過PNGCrusher應用享用OptiPNG。
3. ImageOptim
ImageOptim是一個前端工具，它是開源的，不過貌似只有Mac OS版本，使用來自於AdvanceCOMP的AdvPNG、OptiPNG、PngCrush、JpegOptim、來自於libjpeg的jpegtran、Gifsicle以及可選的PNGOUT。
4. PNGOUT
PNGOUT是一個命令行應用，它有很多的不同選項。支持PNG、GIF、BMP、JPG、TGA和PCX格式。
5. PNGGauntlet
PNGGauntlet是一個使用PNGOUT來優化PNG文件的.NET應用。它可以將JPG、GIF、TGA、PCX和BMP等文件轉換為PNG。如果你不是很熟悉Windows命令行，可以試一下PNGGauntlet。
6. JPG & PNG Stripper
這個應用可以從圖片文件中移除不必要的元數據。它支持JPG、JFIF和PNG文件格式。
7. TweakPNG
TweakPNG是一個用於優化PNG文件的低級別的工具。那麼為了使用這個工具，你需要熟悉PNG文件格式。你可以從這個網站了解更多的關於PNG文件的信息。
8. RIOT – Radical Image Optimization Tool
RIOT可以通過幻數讀取並優化不同的圖片格式。隨意它也能優化不常見的圖片擴展，這讓它與其它優化工具相比比較獨特。 RIOT將會並排顯示元素圖片和輸出圖片，這樣你就可以簡單的對比它們的質量。

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

JetBlue「飛到飽」所沿生的一堆熱情網路行銷

美國廉價航空公司JetBlue於一個多星期前的星期二，也就是9月8日開始一個叫「all-you-can-fly」的特別計畫，只要你付$599美元（台幣近2萬元），就可以在那個月搭著JetBlue飛機「飛到飽」，商學院又多了一個最佳教材。雖然JetBlue至今未透露到底多少人買了這個套票，但報導說，至少「幾百張」是沒問題的。賣出幾百張，這樣對航空公司是否划算？還值得觀察。
不過，更有趣的是，昨天看到的一個網站。原來JetBlue的「飛到飽」的商業模式，也發展出一些其他周邊「活動」了，這個網站叫「30-day Flight」，他先寫了一封公開信給JetBlue的總裁，告訴他，他們已經訂好了近90張機票，打算飛遍所有JetBlue飛得到的43個城市！由於他們就只有30天而已，加上城與城之間也不是都有連結，因此他們幾乎每天都忙著飛來飛去，才「來得及」完成一個月43個城市的旅行！
你說，他們做這個是要幹嘛？

根據當事人說，這兩位網站工程師除了想出名外，另一個原因是想試試看自創一份線上的「30日月刊」，連續三十天都寫文章，三十天後就是可以出一本月刊。不過這位設計師說，他認為他這份月刊的每一天都要是不一樣的設計，而且，雖然這份「月刊」顯然一個月後就會「停刊」，他仍然希望可以做出一個獨立功能的網站，換句話說，就和上次看到那一位部落客一樣，這三十頁並不是三十個獨立的檔案，而是為自己設計了一套類似部落格的後台，「每一頁都不一樣」。這傢伙對這個網站真的很瘋狂，它甚至打算做一個動態的「進度表」，點下去，可以看到他目前搭哪班飛機、已經飛了百分之幾。

這個消息，一直沒有再下一步發展。現在已經過了12天，這位瘋狂的旅行家唯一做到的，只有將每一天的行程PO上去，標題的圖片讓它一點點不一樣。他在第四天才終於寫了一篇文章，主要只是報告行程出了一點問題，然後讀者又一直等到他們飛到「第十天」，才終於出了另一篇稍微更像樣的文章：「How Mr. Q Manufactured Emotion」：
這篇文章，馬上被網路人轉寄出去！因為，它實在寫得太好了！一趟飛機，真的可以碰到這麼棒的一篇故事！這個人叫「Mr.Q」，他從1968年開始就擔任迪士尼樂園的「音響工程師」，那時候，迪士尼樂園是全世界第一個在戶外播放音樂的樂園，小朋友走在樂園內的路上，隨時隨處都可以聽到快樂的音樂，所以迪士尼樂園可以帶來很歡欣的感覺。不過，迪士尼好還要更好，它的一草一木都是經過精心設計，確保每一張照片裡都是完美的模樣。有一點，「Mr.Q」一直放在心裡，無法完美，那就是這些音響，當你走靠近一點某隻喇叭，它就會比較「大聲」，走到某一處，又會變得比較小聲。

這個問題一直困擾著「Mr.Q」，但他忙著安裝那1萬5千個喇叭，也一直沒有找到解答，一直到二十年後，也就是90年代，迪士尼才終於想辦法解決這個問題，那時候他們找遍了各形各類的學者研究，沒找到這個問題的解答，他們只好自己想辦法，後來，設計了一套新的演算法，計算出每個喇叭之間的距離、擺設的地點；他們甚至讓每個喇叭播放的音樂有一點點不一樣，讓遊客從第一區到第二區，可以從輕鬆的笛子歌曲，變成刺激緊張的交響樂！有趣的是，以上一切的改變，從70年代起，從來沒有遊客讚美過這套戶外音響，也從來沒有遊客抱怨過聲音大小聲，甚至到後來90年代修改過後，也沒有遊客感覺到。但，「Mr.Q」說，當你是要做「製造人們的情緒」(manufacturing emotion)，別人沒有察覺，你就知道，你已經做對了這件事情。

隔天（第11天），這傢伙又寫了另外一篇文章，這一篇是在講，他又在JetBlue班機上遇到另一位奇人，這位奇人名叫Mark Kandarski，這位仁兄一上飛機就一臉緊張的模樣，手心不斷揉搓，臉部漲紅，顯然是患了嚴重的「恐機症」。和他聊天以後，才發現，天啊，這個傢伙竟然是在紐約華爾街工作的一位成功的基金經理人，他平常開跑車、周末攀岩，怎麼看都是一個可以承受「高風險、高報酬」的玩家，沒想到，竟然栽在飛機上，這麼怕坐飛機！這位仁兄甚至還透露，他搭廉價航空JetBlue而不搭其他航空公司的頭等艙，是因為他「喜歡坐機尾」，萬一有空難，機尾的生還率高過機首的頭等艙，所以他會想辦法去等那些機尾的位子，就算開會遲到也在所不惜！這一段，也被Curtis詳細的記錄下來。
有趣的是，你一定會問，這位Curtis真的是獨立行動的一個網路人嗎？
還是……有人「贊助」他去飛這麼多天？

我不是很確定。不過，若有人贊助，甚至有人幫忙代刀寫作，那Curtis不會拖了十天才寫兩篇，然後最近兩天又不寫了？不過，我想JetBlue的確是從這兩篇被網路轉載頗多的文章，獲益良多！因為，這兩篇頗有深意的文章，提到兩名JetBlue乘客，一名是迪士尼的音響工程師，一名是華爾街的基金經理人，都是成功人士，成功人士也會搭JetBlue！JetBlue一洗廉價航空公司都是中下階層人士搭的形象！

這個部落格也是有道理的，因為一個人在飛機上，無論他是某公司的大總裁，還是某位了不起的電視主播，他一定是整個人「完全放鬆」，假設他也坐經濟艙的話，那一般人就有了和他們聊天的機會，如同這位Curtis和Mr.Q一樣，然後就可以寫出一些驚人的故事。

除此之外， JetBlue這個計畫其實還吸引了一些其它人，如這篇文章所提到的，包括一位Dominic Cattadoris的25歲年輕人、一位叫Brian Van Nieuwenhoven的30歲男子，他們都高興的說，拿了這張「飛到飽」機票，「世界就是我的家了。」他們打算花一個月的時間就這樣飛來飛去。另外，Clark Dever以及Joe DiNardo兩位甚至為了做這些事，辭掉他們的工作了。另一位叫Greg Krause的，則想變成「人體看板」，為Zambia一家學校籌款……。

注意，這些人都是「網路人」，他們隨時準備上傳Flickr、YouTube，隨手有Twitter，還不忘開一個Facebook粉絲專頁隨時給他們加油，這是報導所要講的。雖然這些人可能都會睡在機場，會讓美國機場開始變成地下鐵那樣嗎？但這些人所到之處，其他人都會投以注目，他們寫的文章，其他人都會閱讀，任何與他們沾上的「商家」，尤其是JetBlue，所獲得的「網路行銷」效果該有多大！

看完這些案例，我有一個感想。前陣子在台灣，很流行「零元環島」的創舉，一兩樁案例出來以後，許多年輕人就躍躍欲試。其實是很痛苦的，但是血氣方剛的年輕人很願意，無論是為了公益，為了出名，為了表達意見，還是為了自己高興……總之他們是可以很痛苦的來做一點事情的。這時候，如果「整件事」就是有一間商家在後面支持呢？就如同JetBlue推出一個活動，讓這些人都跳出來；如果當時某一家廠商看到這個「零元環島」潛力，就真的推出一個「零元環島」的促銷方案呢？

甚至自創潮流，商家可以自己推出「吃到飽」，吸引網友在上面玩一些新花樣。不過，畢竟「無聊的網友」還是很有限，人數不多，JetBlue這次帶來這麼多網路人願辭掉工作、改變生活、甚至克服飛行的心理恐懼，整個月都搬到飛機上去住，這一點，可能是行銷學上可以好好參考的「網路行銷」案例了。還有怎樣的「飛到飽」、「吃到飽」，可能造成這麼厲害的網友幫忙潮？

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

網站設計趨勢: iPhones

原文：網站設計趨勢: iPhones譯自：Web Design Trends: iPhones版權所有，轉載請註明來源，多謝！
眾所周知當前(甚至接下來的幾年)最酷的東西是iPhone。不僅僅是因為iPhone看起來不錯，它們在網站方面也很不錯。而且，更重要的是，很多公司和團隊為iPhone開發了很多很有用或有趣的App，當然iPhone的用戶也會對他們的網站很感興趣。事實上，針對iPhone的網站設計已經成為了另外一個趨勢，雖然它的針對性不是那麼廣泛……
iPhone GUI PSD
首先給大家推荐一下Teehan+Lax的iPhone GUI PSD文件，它包含了iPhone以及你製作你的iPhone界面時所需的所有元素。非常方便，PSD格式。
使用iPhone的網站設計展示
Tea Round App

First & 20

Classics

June Cloud

Zumobi

Graphik

dBelement

Firetask

Tweetie

Bottle Rocket Apps

Snow Reports

Wordpress

Paraply

Voxtopia

Mock Draft

Cellar

Satisfaction Remote

Bird Feed

Tapbots

Pokeseo

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

80多個絕對漂亮的雙屏壁紙

原文：80多個絕對漂亮的雙屏壁紙Translate From：80+ Absolutely Beautiful Dual Screen Wallpapers版權所有，轉載請註明出處，多謝！
雙屏顯示器在設計師、工程師和圖形設計師中貌似越來越流行了。這可能是因為LCD顯示器價格下降了，但是我想最重要的原因是雙屏顯示真的可以提高我們的工作效率！
使用雙顯示器，我們可以同時處理不同的項目或者高效地整理我們的工作和任務。但是對於那些喜歡常常更換他們的桌面壁紙的童鞋，找到雙屏壁紙不是件很容易的事情。這就是我們決定收集和分享這些80多個漂亮的雙屏桌面壁紙的原因，這些壁紙包括自然風光、宇宙、空間、夢幻、抽象和遊戲等等各種風格。
至於為什麼大家喜歡用雙顯示器，可以圍觀一下口碑UED的一篇文章《雙屏顯示提升前端開發10%工作效率》——神飛注
1. Ue Expanded
2. Rtx Wallpaper Wide
3. Dual Wall 2D
4. Fireworks
5. Massive Momentum
6. Dual Neuron
7. Flux
8. Green Simplicity
9. Azure Eye
10. Hammerhead Shark
11. Golden Bridge
12. Foggy Mist
13. A Dreamy World Windows Vista
14. Battle Ending Many Lives
15. A Dreamy World Untamed Horse
16. Fog River Bank
17. City Disaster
18. Fields Of Root Vegetables
19. Yunas Crew
20. Wonderest Mountain
21. Tidus And Yuna Sad Reunion
22. Stretches Miles Away As Far As Can See
23. Road To Enclosed Bridge
24. Snow Plains
25. Nightime Freeway
26. Moss On Tree Trunks
27. Majestic Sunset Horizon
28. Mansion
29. Lake Pond
30. World Panoramas Scenery
31. Scenic001
32. Grassy
33. Grazing Galaxies
34. Denver on the Green
35. Water Drop Splash
36. forest2
37. Ue Supernova 2003
38. Not One Of Us
39. Ataridual
40. Bleach Collab Special
41. Sunset Dual
42. Lake Dillon East Sunset Panorama
43. Broom – Ginestra
44. Grizzly River
45. Life In Technicolor
46. Sunshine
47. The Salt Desert Salar The Uyun In Bolivia
48. Flow
49. Placid
50. Horsehead Nebula
51. The Orion Nebula
52. Golden State Poppies
53. Prairie Sunset
54. Summer Vines
55. Darkness Rising
56. Blue Tiles
57. Elementary
58. Blue Sunrise
59. Fireworks!
60. Like These Flowers
61. Cheetah Beauty
62. Send Me A Sign
63. Sugar Lake Rainbow
64. The Opal Lake
65. Solanum
66. Paper Planes
67. Melancholic Rodeo
68. Turquoise Reflections
69. Perros-guirec
70. IPod Nano
71. Firefox
72. Overemphasized
73. Apple
74. Apple 2
75. Advance Tree House
76. Dreamy World 18th
77. Dreamy World 16th
78. Oxygen
79. Golden Times
80. Face It
81. The Window

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

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網頁設計公司

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網頁設計公司

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標記可能是這樣的：

Blogroll

假如有一個200乘75的圖片，上面有更好看的字體，就可以用如下方式來替換文本：
h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
}
簡單的圓點
無需列表中的圓點看起來很難看。不用再處理所有不同的list-style屬性，只需要簡單地把他們隱藏並用背景圖代替就可以了。因為圖片可以隨意選擇，這些圓點就可以看起來更漂亮。
下面，我們把一個無需列表改造成有圓滑圓點的：
ul {
list-style: none; /* Removes default bullets. */
}

ul li {
padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}
CSS3中的背景
CSS3中的背景有較多改進。最顯著的是多背景圖片的選項，同時也增加了4個新屬性。
多背景
CSS3中，可以對一個元素應用一個或多個圖片作為背景。代碼和css2中的一樣，只需要用逗號來區別各個圖片。第一個聲明的圖片定位在元素頂部，其它的圖片按序在其下排列，例如：
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
新屬性：背景修剪(background-clip)
這又把我們帶回了文章開始討論的那個關於邊框內圖片顯示的話題。它被描述為“背景描繪區”。
background-clip屬性用來增強背景顯示位置的控制能力。可能的值為：
* background-clip: border-box;背景顯示在邊框內。* background-clip: padding-box;背景顯示在內補白(padding)內，而不是邊框內。* background-clip: content-box;只在內容內顯示背景，而不是內補白(padding)和邊框內。* background-clip: no-clip;默認值，和border-box一樣。
新屬性：背景原點(background-origin)
這個屬性和background-position結合起來使用。可以從邊框，內補白或者內容盒子開始計算background-position (類似於background-clip)。
* background-origin: border-box;以邊框為原點開始計算background-position.* background-origin: padding-box;以內補白為原點開始計算background-position* background-origin: content-box;以內容盒子為原點開始計算background-position對於background-clip和background-origin不同的一個解釋參看 CSS3.info
新屬性：背景尺寸(background-size)
background-size用來調整背景圖的大小。有好幾個可能值：
* background-size: contain;縮小圖片來適應元素的尺寸(保持像素的長寬比)* background-size: cover;擴展圖片來填滿元素(保持像素的長寬比)* background-size: 100px 100px;調整圖片到指定大小* background-size: 50% 100%;調整圖片到指定大小。百分比是相對於包含元素的尺寸的。
可以看一下 CSS3規則 網站上的幾個例子。
新屬性：(background-break)
CSS3中，元素可以被分成幾個獨立的盒子(例如使內聯元素span跨越多行)。 background-break屬性用來控制背景怎樣在這些不同的盒子中顯示。
可能值為：
* Background-break: continuous;默認值。忽略盒之間的距離(也就是像元素沒有分成多個盒子，依然是一個整體一樣)* Background-break: bounding-box;把盒之間的距離計算在內* Background-break: each-box;為每個盒子單獨重繪背景
背景色(background-color)的改進
background-color在css3中有了稍許改進。除了設置背景顏色之外，如果元素底層的背景圖不可用，還可以設置一個“回退色”。
通過在回退色之前增加一個斜杠(/)來實現，例如：
background-color: green / blue;
此例中，背景色應該是綠色(green)。然而，如果底層背景圖不能使用的話，背景色就是藍色而不是綠色。如果在斜杠前不指定顏色，默認為透明(transparent)。
背景平鋪(background-repeat)的改進
CSS2中當圖片平舖時，會被元素在末端截斷。 CSS3引入了兩個屬性來修正這個問題:
* space:應用同等數量的空白到圖片之間，直到填滿整個元素* round:縮小圖片直到正好平鋪滿元素關於background-repeat: space;的一個例子，可以在 CSS3規則網站看到。
背景附著(background-attachment)的改進
background-attachment屬性增加了一個新值：local。這是用來配合可以滾動的元素的(設置為overflow: scroll;的元素)。當background-attachment設置為滾動(scroll)時，背景圖不會隨元素內容的滾動而滾動。
設置為background-attachment :local;時，背景圖會隨內容的滾動而滾動。
總結
總結一下，css中關於背景有許多需要知道的知識。但是一旦把這些知識融會貫通了，這些技術和命名約定就變得非常有意義而且很快就會成為潛意識行為了。
如果剛接觸css，主要不斷聯繫就可以較快地掌握背景的要點了。如果是老手，我希望你可以和我一樣期待css3 。
關於作者
Michael Martin的文章大多涉及網頁設計，WordPress並為 Pro Blog Design 工作。可以查看更多關於博客設計的文章或者在 twitter 上關注他。
糖伴西紅柿：一看到這麼長篇大論的也頭暈，花了好幾天的時間折騰這篇文章。全是基礎的只是，沒有什麼花哨的，但是我覺得最基礎的也是最重要的。
鑑於好多網站都會轉載別人的文章，當然了，好的文章我們也會轉載，不過有些人直接把別人辛辛苦苦的勞動付出拿來當自己的東西。
這些人真的很無恥，這個大環境也真的很悲哀，沒人願意踏踏實實地做事。這就是為什麼我們總是翻譯國外的文章，而不是把咱們的文章翻譯成外語讓外國人看的根本所在。
可悲啊。

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

征服高級CSS選擇器

原文：征服高級CSS選擇器譯自：Taming Advanced CSS Selectors版權所有，轉載請註明出處，多謝！ ！

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網頁設計公司

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網頁設計公司

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網頁設計公司

CSS3系列教程:寬度/列數

使用CSS3可以為你的網站設計多列，而不用為每列制定特定的層或段落。
與多背景圖片一樣，CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法，請在下面的評論中提交你的連結，我很高興能確認這種方法能用於很多中佈局中。

跨瀏覽器相容性：
比較好的支援CSS3多列的瀏覽器有Firefox、Safari、Google Chrome，這樣我們就需要使用-moz和-webkit首碼了。

CSS3多列(寬度)
使用下面的CSS3樣式的效果：
#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}

瀏覽器支持：
Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 )
Opera(9.6+…)
Safari(3.2.1+ windows…)
CSS3多列(列數)

使用下面的CSS3樣式的效果：
#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}

瀏覽器支持：
Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 )
Opera(9.6+…)
Safari(3.2.1+ windows…)

特別聲明，本文章譯自：Zen Elements, 也謝謝ALEX

Special Staterment: this series posts were translate from Zen Elements

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

CSS選擇器的瀏覽器支持

我很久以前就開始計畫著整理一下CSS選擇器的瀏覽器支持，因為CSS3增加了很多非常有用的選擇器。之前我也寫過一篇《使用CSS選擇器創建個性化連結樣式 》，作為對CSS選擇器的初步研究。

kimblim網站整理了一份很全面的CSS選擇器支援情況，我將其翻譯過來並進行進一步的整理，將其盡可能的簡化。同時結合evotech網站整理的CSS選擇器支持列表，以及我自己平時總結的一些tips。

熟悉jQuery的人可能都知道，jQuery的靈魂就是它的選擇器，同樣我認為選擇器是css最強大的功能之一，在不久的將來也會得到重視。jQuery的選擇器功能得益於CSS3選擇器提供的靈感，卻是目前相容性和易用性最好的選擇器，而CSS的選擇器不能普及，就是因為某些流覽器在拖後腿。


現在就查看《CSS選擇器的瀏覽器支持》吧！
綜合測試結果，可以得出以下結論：
webkit內核流覽器和Opera瀏覽器對CSS選擇器的支持最好，Chrome所有版本的瀏覽器均完全支持，Safari3.2版本以上瀏覽器也完全支持，Opera9.6+瀏覽器也完全支持CSS選擇器；
Safari3.0以下瀏覽器、Firefox 2.0以下瀏覽器、IE8基本支持CSS2.1選擇器，基本上不支持CSS3選擇器。可喜的是IE8瀏覽器有了里程碑的進步，基本很完全的支持了CSS2.1選擇器，但是依然不完全支援偽元素；
IE6是最落後的瀏覽器，它竟然連CSS1的選擇器都不能完全支持！

很多IE6的粉絲朋友常常問我，你為什麼那麼討厭IE6，然後我就要費盡口舌的回答他們，現在好了，有了這個表，我們可以理直氣壯的BS IE6了！
這個列表還不是最完整的，還有些CSS3的偽元素等沒有被列入，我會在適當的時候加進來。同時如果你發現這裡有某些錯誤或者不妥之處，煩請告訴我，我會儘快的更正它，多謝先！

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

老爸碎唸、顧客醜態，兩齣「素人連續劇」皆一月內憑幾發子彈便創造驚人流量！

周末我在我的Facebook的專頁貼出一篇小文，提到一位史上最「省力」又最「紅」的微網誌寫手！這位網友今年28歲，他的Twitter帳號目前只寫了28則短訊，每天只寫一則，一個月後，竟就得到了高達25萬人的粉絲！

還有誰能每天只發140字一篇，能在一個月後得到25萬人粉絲？
他發的是什麼內容？怎能如此離奇的高效率？
這傢伙的帳號叫「Shit My Dad Says」，作者剛搬回去跟老爸住，老爸已經73歲，很愛碎碎念，每天都在唸，於是，兒子就每日截取老爸名言乙句，隔天PO到Twitter上，就靠這一招，28天後，竟然就達到了25萬名粉絲數！我在小文中笑談，誰說，每天一定要推噗八～十則才叫「經營微網誌」！只要是出自老人口中的原汁原味、正統正宗之碎碎念，你也有機會一個月內……贏得25萬名粉絲！

嚴肅來看，這樣的內容行銷模式，可以將它看成「連續劇」，而且是「素人連續劇」。誰說內容行銷很困難？這位28歲年輕人，可是很輕鬆的憑每天140字一小則就弄出了爆紅的「素人連續劇」！

還有什麼其他的案例呢？
另外一個案例其實也是發生在上星期，由幾位20幾歲的年輕人所搞出來的，同樣在短短一個月內，沒花多少功夫，就靠「素人連續劇」得到了爆多的流量，還成功以星星之火發起撩原之火！
這個案例是由三位年輕人發起的，他們才23~25歲，其中兩位是兄弟，周末跑到美國最大賣場沃爾瑪(Wal-Mart)，偷偷的拍人，照片上傳到他們開的一個叫「People of Walmart」的部落格，這個部落格基本上收集了好多好多怪人的相片，還有好多好多旁白，特別的是：這些相片都是在當事人不知情的情況下所拍攝的－－大家都有這樣經驗，上大賣場常常是輕鬆的場合，可能在周末，隨便套一件衣服就出門了，渾然不覺自己的褲子可能有「透視」的效果，冷不防被拍了下來，裡面的花內褲，就這樣登上網路給全世界看了！有的人則是褲子沒洗乾淨，屁股的部位還有「黃黃的」，不確定是泥土還是什麼，另外就是服裝，一些美國青少年穿著奇型怪狀，有些穿著特紅特綠的鞋子、頂著像鸚鵡般的怪髮，或穿著上面公然寫著髒話的Ｔ恤，有的還秀出納粹圖樣，這些都被「People of Walmart」照了下來！這些都是他們最佳的拍攝對象！各位可以上網去看一看。原本我是帶著不以為然的心情來看這個「People of Wal-Mart」網站的，沒想到自己上去看，卻一張接一張看得欲罷不能。

重要的是，這三位年輕人，輕輕鬆鬆就完成這些事情。到目前為止，他每天只需要上傳5~8張照片，再加上一個標題，我想，每天只要半小時就完成了。或許他可以一次出去，照個四十、五十張，再慢慢的上！

這一個簡簡單單的部落格剛開站時，還沒有人去注意，於是他們一開始主動先在推文網站Digg，和最近蠻流行的網站「Funny or Die」宣傳，兩星期後，很快就變成了50萬PV一天的流量，而且因為它是「連續劇」，天天都有新照片，每天都會有人回來再看看又有哪些可憐人「被照了」，網友一直回訪、一直回訪，到了上周三，流量終於達到一天高達120萬頁PV，沒過幾小時，整個主機垮掉了！

修復後，這個網站再被主流媒體CNN、Examiner報導了一輪，到了周末，已經成為Google搜尋關鍵字排行榜第一名！

當然，你說沃爾瑪一定不怎麼開心的！沒錯，這個網站簡直讓沃爾瑪(Wal-Mart)公關部門更雪上加霜，照片所照到的人，衣衫不整、奇型怪狀，等於是在暗示這間大賣場都是一些中下階層人士來購物的（雖然這是大家都知道的事實）。先前亦已經有一位媽媽帶著一位哭個不停的二歲小孩正在Wal-Mart排隊，前方一名60歲男子警告母親，再不叫小孩閉嘴，他就會「幫她閉嘴」，沒多久這名男子就出手呼了小孩巴掌，而且連呼四個，被警察逮捕下來。

先撇開道德觀不說，可怕的是，我發現，「People of Walmart」這個網站會將這個「拍照癮」，「傳染」給讀者！每多看那個網站的一張相片，你就更進一步的被「教育」被洗腦，什麼樣的相片很好笑。然後，你幾乎可以想像，接下來當我自己上大賣場，除了要小心自己被拍外，自己看到了一個有趣的人，很像適合這個網站刊登，我自己也會拿起自己的手機相機喀喳拍下，回過頭來上傳給這個網站！果然，到了今天，許多「People of Walmart」的照片已經不是三位年輕人自己照的了，而是網友在全美國的4,200家的某一家Wal-Mart拍的、寄給他們投稿！這樣一來你要Wal-mart怎麼抓？這效果就如同「ICHC集團」的那些網站一樣，最後慢慢的，這位作者已經不必自己拍照了，全民都是他的攝影師。之前「全民八卦相片網站」曾經成為一些年輕創業團隊的點子，或許，最快的方式就是像這個方法。

「People of Walmart」並不是普通人，其中一位是網路公司的網頁設計師，他們受訪時提到，他們收到很多讀者來信，讀者一邊稱讚他們，一邊惱火的說：「我怎麼沒有想到這麼簡單的點子？」原來，三位年輕人是在南卡州家鄉的一間Wal-Mart大賣場裡逛街時，突然想到這個點子，那也不過是兩個月前的事而已，他們說做就做了。

點子就是這樣，最後看回來，它們永遠都是很簡單的點子！不是嗎？但再簡單的點子，也需要說服自己它會成功，自己才會願意一做，做的事很簡單，但這個「說服」卻百般困難。「素人連續劇」誰都能拍，但最後繼續拍一個月的沒幾個。

如果能找到效率最高的「素人連續劇」，我們更容易說服自己做下去，馬上起而行之。除了家中老人的碎碎念、大賣場的顧客照片……還有哪些每天只要出一點點內容就能吸引大量又忠實的讀者的「素人連續劇」呢？

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

SpaceOut讓你出租三種「釘子空間」，怎樣情況下小空間也能積沙成塔？

之前我在一篇文章曾經寫過，西元2000年以來投資在網路上最大筆的創投資金，由一個叫「HomeAway」的網站獲得，它一口氣成功增資了驚人的2.5億美元（80億台幣）。一般的想法是HomeAway不過就是一個「民宿訂位網」，但其實HomeAway的「心很大」，它是想成為所有「非正式飯店」的住宿訂位網，稱「民宿」太沉重，說不定，你只是要回鄉兩星期，宿舍沒人住，就可以透過HomeAway出租！說不定你最近缺錢，乾脆把床啊、電腦啊、櫥櫃啊通通搬到客廳，留一個房間出來出租給某個旅者！

我們稱單一的、佔空間的叫「釘子戶」，那麼，HomeAway希望整合的，就是所有的「釘子住房」，聽起來不錯吧？

還有一個更酷的。
昨天看到一篇更有趣的報導，提到一個澳洲網站，硬就是比HomeAway的「釘子化」更進一步。這個網站叫「SpaceOut」，它不只是出租「住宿」的地方，在這個澳洲網站中，你可以出租「任何空間」，做「任何事情」。
什麼意思？

這個SpaceOut一口氣打三種空間，已經涵蓋了一般人可以出租的所有種類：
第一種是「辦公空間」，你的辦公室還有一個小cube沒人坐？或是原本的櫃台因為要省錢就沒有櫃台小姐了，空在那邊沒人用？可以將你的辦公空間提供出來。
第二種是「停車空間」，你家樓下有個空位？你的車庫後方還可以停一台自行車？可將您的空間提供出來。
最後，第三種是「儲存空間」，這部份的範圍更廣，任何一個沒在使用的空間，都可以列出來，看看誰要租來使用。

SpaceOut的訴求非常清楚－－它的目標客群在初期並不是那些「需要空間的人」，它並不是要讓一般人租到更便宜的地方！它的目標竟然是「需要錢的人」。SpaceOut的廣告上理直氣壯的寫著：「您需要錢嗎？今天開始，您可以從空氣中賺到錢！」
真的！因為，每個人多多少少都擁有一些「空間」。如它的廣告寫著，這是一個讓一般人都可以「出租」他們的地方來換成現金！

SpaceOut試圖提醒你，別以為你家已經住滿了，辦公室已經塞滿東西。你永遠找得出「釘子空間」來出租的。努力想吧，努力提供吧！院子裡有一間小儲藏室，破破爛爛的？別怕，拿來出租吧！辦公室裡面有兩個沒用的cube，短期內不會徵才，那也拿來出租吧！真的很缺錢，樓梯下方的空間空在那邊，趕快拿來出租吧！

公司有給你一個兩層的小儲藏櫃，加鎖，公司又有保全人員，那就出租吧，可以讓人放一些有點重要有不是這麼重要的文件。辦公桌的抽屜最下層是空的，那也可以出租吧，說不定某些人過期雜誌沒地方擺，可以擺在你那邊！
你家樓下那個小小的地方，平常不像是「車位」，但也丟上去出租吧，誰知道說不定有人有一量舊的SMART車，可以停進去呢！或是行動不方便人士可停靠電動代步車呢！

據報導，這個努力收集各處「釘子空間」的網站，已經得到初步成功，至少已經吸引了幾百則的「空間廣告」貼出來了。報導還號稱，這個網站有機會成為澳洲今明年網路上最成功的故事之一。這點不能保證，但整個網站的概念還挺有意思──
首先，做「空間生意」是正確的，現代的每個人對於空間的需求，超過我們所想像，第一點是「量」，有太多太多人在各式各樣的時間點需要一個空間可以放東西。第二點是「變化」，每個人需要的儲藏空間、儲藏時間，完完全全的彼此不一樣。在美國久的就發現，有些東西，你真的很想暫時放在什麼地方，但因為沒地方放，所有的地方都太貴了，或太大了，或太小了，只好能拿的拿走，剩下的全部都留下。美國有專業的儲藏工廠，你可以租一間儲藏室，但有的儲藏空間不一定是符合的、或在自己家附近的。

SpaceOut是一個散落在各地的「小需求」、「小供給」的結合。如果每個人都有「空間」，每個人又都有需求去放東西，那我們可以憑自己的地利之便，互相幫忙。包括「白天送進來、傍晚拿出來」的生意都可以做，譬如，將腳踏車放在捷運地鐵站旁邊大廈八樓的某個地方，下班再來拿？厲害的人，自家或辦公室就在「百貨公司」附近的，或許剛剛買的大型的東西可以先寄放在某處？或者，說不定鎖定一下「高鐵站」、「機場」附近，有些旅客可以寄放行李，比寄放在旅館還方便！如果辦公室就在KTV或夜店樓上，有個空間可以借放包包的？
不過，大家會擔心，SpaceOut目前所有的刊登都是「免費」，它怎麼賺錢？

想想也是，這些需求如此微小，空間這麼細又這麼散，恐怕也無法靠上架費賺錢！它目前只能讓所有人自由的張貼、自由的私下交易，但它的企圖也相當清楚──
看，為何SpaceOut要這麼直接，喊出「大家快來貢獻你的釘子空間」？到最後，SpaceOut可以先成為所有「釘子空間」的大列表。一間企業只要和SpaceOut談，就可以一次取得一個地方附近所有的小停車位、小辦公位、小儲藏室。一個釘子戶沒什麼用處，但一個地區裡有1000個釘子空間，整合起來力量就大了。SpaceOut似乎打算先吸引這些空間，藉由整合這些釘子空間來化為更大的資源。

每天回家，看到電梯旁的「大樓告示版」，我就有一股衝動，覺得這個版位實在太重要，不用太可惜！「分眾傳媒」是看不上這種住宅大樓的告示版的，但，附近一間補習班、安親班的廣告，或是一個附近里長辦公室的中秋烤肉，貼在這個大樓告示版的效果簡直是「超級好」！
有沒有誰能做一個「釘子告示版」的SpaceOut？這是唯一整合這些散落在各處的「小空間」的好辦法，喊得對，經過一些宣傳，釘子也能積沙成塔了。
另外，還有哪一種釘子空間可以出租，可以整合積沙成塔？創業家可以想一想。

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

美國《Elle》雜誌給灰姑娘部落客150美元月薪，是剝削，是提拔？

這個月，美國部落格界傳出一個「灰姑娘美夢成真」的故事，這報導由美聯社轟轟烈烈洋洋灑灑的報導出來──
有一位叫Brianna Karp的24歲女孩，母親有精神問題且再婚，她住不習慣就離家出走，在父親也自殺後，什麼沒留給她，只留了一輛破破舊舊的「露營車」(RV)。今年才24歲的她，原本有一份秘書的工作，但不幸被裁員了，她又無力付每月1500美元的房租，只好搬到那輛露營車，吃、喝、拉、睡都在車上，車子停在大賣場的停車場，有人來趕她就必須再另覓停泊處。

但，今年二月期間她做了一件正確的事：
她在網路上，開了一個個人部落格，取名作「girlsguidetohomelessness.com」，幽默的輕鬆的將她的辛苦的「無殼生活」全部都記錄在部落格裡。在網路上，這個部落格有它的意義在，因為它扭轉了大家對於這些露宿街頭的人的印象！大眾認為，那些露宿街頭的一定是沒用的人，但Brianna證明了給大家看，首先，住在街頭也有電腦，而且也有寫作能力；她懂得每個月都購買五美元的上網卡，每天都到附近的Starbucks上網寫部落格、還有不知哪裡來的相機拍照並上傳！
不過，這生活依然很辛苦，Brianna每天寄出40封履歷表，一直都沒有結果，只能靠打零工維生，吃東西還得想辦法拼拼湊湊。她能夠活下來，完全是因為她的「精神食糧」，也就是她的部落格，讓她與真正的世界保持聯繫，而她的部落格的讀者，也包括一些無家可歸的人，他們在文章後面留言，為她打氣。

一直到了今年四月，Brianna的命運改變了──她有一個機會，到電視裡的Reality Show當演員，但在試鏡的時候，她實在太緊張，就整個爛掉了。當時她實在很傷心，寫了一封信問知名的Elle專欄作家Jean，當一個人去面試卻沒有搞好，要如何再有一次機會？
這封信在四月寄出，但一直到八月，Jean才「回覆」。有趣的是，這位大專欄作家就像薇薇夫人信箱那樣，將這封信貼到她自己的部落格以及《Elle》八月號裡，她回信道：
「無家可歸的人您好，親愛的，機會不會再一次給你，但你可以去得到它！」

這是什麼意思呢？沒錯，就在文章中，這位專欄作家「當場」就給了Brianna一份四個月的工讀生工作！原因是「這位小姐的勇氣與精神真的讓我折服」，而且還更鼓勵她，如果過了四個月後妳依然沒有工作、沒地方住，那「我」就會變成你的工讀生（幫她處理更多狀況）。Brianna原先只是隨便丟信，自然也沒有想到，大專欄作家Jean竟然會回信並給工作，所以竟也都沒發現此事，直到大約一個月後，Brianna才主動再聯絡女作家，怯怯的問：「這份工作還有嗎？」
答案是：「還有！」

這份工作的「月薪」，是僅僅150美元（台幣5000元）。這份工作很簡單，只要幫她回讀者的信，以及整理一下目前她在Facebook上面所做的大學生調查。當然，Brianna也接到邀請，希望能直接到《Elle》的官方部落格裡面去寫文章。這部份，文章僅淺淺提到「會另計價」，但究竟有沒有計價，大家也不知道，不過Brianna可能也不管了，因為她已經開始寫了，她的第一篇文章是「The New Face of Homelessness」。

現在，第二波的故事來了──
這件「灰姑娘美夢成真」的故事，這麼美麗，這麼感人，但是，卻被美國另一位大部落格ReadWriteWeb不以為然的抨擊了！這篇文章被同步貼在《紐約時報》網站上──
他們說，看，《Elle》雜誌聘用一個「無家可歸的女孩」，竟然……只給她一個月150美元，她要怎麼活啊？雖說，她的工作只要花一天一小時，但這樣算下來，Brianna的時薪已經比加州法定的8美元還要低了。
重點是，這篇文章大哉問：請問，這是媒體巨獸在剝削一個無家可歸的人，還是真的是給一個年輕女性「站起來」的機會？

你會覺得，應該是後者吧！沒有Elle，那Brianna也不會有這麼好的機會，但是問題來了：《Elle》並不是投資Brianna的未來，如果是「試用」這個Brianna，那低薪尚有道理，問題是，這位Brianna所帶來的「現在價值」已經極大，無論是幫《Elle》炒新聞，還是幫《Elle》提升「讓灰姑娘美夢成真」的品牌形象，難道，這些不必反映在這位「灰姑娘」的時薪上嗎？以《Elle》的網站流量這麼大，廣告主這麼多，她透過Brianna寫的那篇部落格文章所賣出的廣告版位，恐怕就已經遠遠超過她們給Brianna的月薪。表面上看起來，Brianna是在取得她工作時數該有的薪酬，但實際上是，連Brianna也不知道，她自己的價值早已不是「以時計費」了。

你說，一張手掌打不響，Brianna沒有《Elle》也不會有什麼搞頭，但，這也是現代聘用制度的盲點所在。我們看過許許多多的合作，不都是有了對方，才有價值嗎？但，為何部落客的價值被認定的這麼低？因為，他們一開始是「沒有收入、沒有價值」的。就如同，現在許多私人企業是如何決定一個員工值多少薪水？不是靠等級，而是靠「前一份工作的月薪」來判定。這也是為什麼，我曾讀過專家建議拿到月20萬元高薪的秘訣？第一步就是學會在鏡子前不慌不忙、大剌剌的編出「我上一份月薪是20萬元」的謊言。

但，這份謊言，Brianna編不出來，因為明眼人看出來，Brianna自己住在破爛屋裡，每天都到Starbucks寫部落格。她沒有工作，也找不到工作，所以價碼就是從「零」開始。如果今天換作是另一位部落客，同樣的讀者量、同樣的噱頭，但這位已經是紐約時報專欄作家的話，那《Elle》就不會出這樣的offer了──
這是什麼意思？換句話說，你如果從部落格開始你的生涯，或許是錯誤的第一步！接下來所有合作的廠商，都會覺得「我給你一份工作」就是一個「favor」，因為已經比你「在那邊寫免費的」還好了！他們也斗膽付你遠低於市價的水準，因為覺得原本你什麼都沒有，至少現在「給你一些」。

不只是部落客，所有藉由網路興起的網路人，有時候反而受到這樣的限制。網路是窮人的原子彈，窮人可以讓全世界看得到，但也讓全世界都看到「他是窮人」。因為這樣，他不見得可以馬上「翻盤」！
這件事，其中是否有商機在裡面？隱隱中似乎有。說「網友經紀」太過威權，如果可以用更科學的方式判斷一個網路資產（譬無一個部落格）的價值，甚至多出很多「認證」來證明一些價值，不但讓世界真正看到網路人的力量，也讓世界更能放心去相信、去付錢給網路人，去展現他們的力量。

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

簡單又好賺的需求：FindToto幫你call找遺失的寵物收費2200元

網站的賺錢妙方又添一項。這周看到一篇美國當地小鎮的報導，有一個網站叫做「FindToto」，這個網站……可以幫你找到遺失的寵物！
怎麼找？

他們想到了一個最棒的方法：用電腦軟體直接大量打電話給你的鄰居們。
報導說，在八月二十三日當天，有一隻老狗叫Tango，已經12歲，跑到花園裡就失蹤不見了！主人很擔心，因為那是他老婆的精神支柱，而老婆現在人正在醫院躺著，他心急如焚，漫無目的的開著他的車子繞著社區，繞啊繞，繞了一整個晚上，到了太陽出來還是找不到。這時候，男主人打了電話給住在加州的女兒。
住在加州，比較會上網。女兒上網查了一下，發現了這個FindToto網站，她發現，這個網站真神奇，竟可以幫你自動打電話給你所有的鄰居，跟他們播放一則尋狗啟事，只要付70美元，它就可以打給至少250位鄰居。

結果，狗狗真的就被找到了！找到狗的人，本身其實並沒有接到電話，但，他們的鄰居收到了，可能是鄰居也通知他周圍的鄰居一起來找，於是就找到了。這FindToto網站是號稱，如果你在兩日內申請，就有85%的命中率，可以幫你打給高達一萬位鄰居。
你說，技術上，FindToto是怎麼做到的呢？它顯然可以全美國都打，我猜，有可能是利用「地址相近、電話號碼就相近」的特性，一支一支的打。這是有可能的，如果要從0000打到9999，得打1萬支號碼，如果是自動撥打，或許有機會打得完。讓人有點擔心，FindToto收70美元，不知道是否可以平攤電話費？

從這個「FindToTo」，我們學到了一個蠻簡單的道理──賣新創服務的最好方法，或許，就是賣給真的「需要」的人。
賣給「真的需要的人」，錢就很好賺，這可不是發災難財、趁火打劫喔，從另角度來看，我們是準備一個服務，讓真的需要的人需要的時候可以得到紓解，幫助他們解決了一個很急迫、很重要的需求，因此向他們收費也是應該的。

FindToto收70美元（台幣2300元），顯然是太便宜了一點。如果它真的神通廣大能觸及85%的鄰居，真的能在第一時間通知鄰居找狗，那，它收到3萬台幣我想或許都可以接受。
看，FindToto是不是很容易賺錢呢？
一個網站不必怎麼了不起，就可以賺錢了。從這邊，我想談一個最近自己感受很深的事，前陣子和資深創業家請益，他的一段話一直縈迴在我腦海──我們都很有想法、很有看法，卻不知道「需求」在哪裡。

這很可惜，因為「需求」其實遠比「趨勢」還簡單。趨勢是沒有答案的，所以創業家要去「猜」，猜對了才賺得到錢；而「需求」根本不必猜，只要張嘴去問，就會有人告訴你答案。我們可以說，趨勢是下注在「未來的需求」，甚至下注在「自己創造的未來的需求」。這方面網路人很在行，一方面在裡面玩，一方面一直在看、一直在想，提出了好多好多種新做法，但，有時候，生意不應該這麼難做，生意應該只是做一個東西出來滿足某個需求，錢就來了。
這一點，又可看到另一位資深創業家很久以前告諫我的，一般網站處理「廣告主」與「使用者」的前後順序的錯誤。大部份網站，其實依然是靠廣告維生的，但，網站們卻只關心去挖掘、研究、試驗使用者的習性。這也當然，因為網路就是在彙集平常網友的力量，這股力量是網站之所以可以打破現有體制而「冒出頭」的關鍵，但，這些使用者並不是網站的「老闆」，他們的「需求」即使被網站猜對而滿足了，也不一定是商業的需求，於是，大家都很辛苦。
一個網站真正的「需求」，並不是在使用者，而是在廣告主。

真正的「需求」，已經在那邊了。就算是在台灣，以2008年大約一千多億台幣的廣告總量來看，靠廣告維生應該也有機會可以活得很好！偏偏，我們對於這些「需求」接觸得不夠多、不夠廣。我們抱錯了大腿，主要火力放錯了地方；我們的團隊中，往往沒有一個認識廣告主，或者業務團隊在公司的編制中過於弱小（可能只有小貓幾隻）。我們往往一邊罵Yahoo!奇摩吃掉所有流量，但沒想到，世上沒有Y!，廣告主難道就會來找下一個網站嗎

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

星國《海峽時報》只靠加入「Breaking News」，流量一年翻三倍？

新加坡的《海峽時報》這周有一篇自家寫的報導，傳出一則在2009年的媒體界極不可思議的成績單！一年前《海峽時報》的網站曾經改版過，現在，這個成績已經出爐了──
他們說，一年下來，《海峽時報》的不重覆拜訪者從50萬人成長到150萬人，足足三倍！而月PV則從1000萬頁跳了兩倍多到2420萬頁，每個月都在破記錄。
他們怎麼做到的？

原來，去年改版的時候，他們就改在第一頁加了叫「Breaking News」的區塊。不，它不是一個區塊，仔細看，它的整個「大首頁」，都變成了「Breaking News」！既然可以叫做「即時新聞」，播出來的肯定就是即時新聞，你可以想像，至少每十五分鐘來看一次，應該都會有一些變動。《海峽時報》自己認為，「即時新聞」讓他們的讀者更信任他們的新聞素質，而他們之所以能提供即時新聞，也是因為他們是一間已經有164年歷史的報社！

除了即時新聞外，《海峽時報》也很自豪他們的收費模式，他們的收費模式不像一些美國報紙開始主張有些內容直接收費，不給看。海峽時報的收費模式似乎是給讀者另一份和印出來的報紙質量相當的「完整線上版」，而且有三種載體，一種是HTML網頁版，透過網路可以看；另一種是掃描版，整份報紙同樣的排版，放在電腦螢幕上給你看，或者還有一種方法是直接下載他們免費提供的e-reader軟體來閱讀。若想要這個「完整版」，原實體訂戶一年只要60元，非實體訂戶一年則要120元。他們也出了iPhone App，以及Android等其他版本，現在他們要想辦法從這些內容中，讓使用者輕輕一點就可以付費購買較貴的內容……。
但綜合以上，重點還是它所提到的「三倍流量」。

線上媒體已經有十年以上的歷史，放眼望去所有的新聞網站，大概只聽過經營不善、被「腰斬三倍」的記錄。我們從沒看過，從去年到今年可以出現「成長三倍」的記錄！這也再次告訴我們「Breaking News」的厲害──
But Why？注意，並不是只有海峽時報有提供Breaking News，哪家線上報紙沒有即時新聞？哪個入口網站沒有即時新聞？但，應該很少報紙將即時新聞放在大首頁，然後就擺明了「我這邊的新聞都是即時新聞」，整頁給你圖文並茂的看即時新聞。像台灣的龍頭網站聯合新聞網，是在進大首頁後的左邊欄位第一個位子有一個「即時」的連結，就可以看到即時新聞，並沒有放在大首頁，或許，這樣已經很ok了，也有可能或許這感覺仍和放在大首頁、有圖有排版的感覺有些不同？搞不好放在大首頁會有不同效果？

不過，《海峽時報》的意外成績，給我們一些感想。最近收發email，有時在看Facebook Page，我發現，網友的「反應速度」已經快得很誇張了。現在已經不是「以小時計」，而是「以分鐘計」了！我們可能寄了一封email出去，過了幾分鐘，回信就過來了；我再回一次，過了一分鐘又回來了，當下有錯覺以為自己在MSN上面傳即時訊息，當下竟然也會不好意思萬一我現在要離開座位沒辦法和對方再繼續一分鐘寄一封信怎麼辦！

你說，這是因為現在上班族太無聊？不，這是因為，我們的工作習慣已有點改變。我們現在都有一個「十分鐘名單」，在這名單中的網站，我們都會為它們好好開一個視
窗，有時候那些視窗甚至是自動會變動的，如同Gmail有信會自己跳出來，那一行白花花的「新信件」你不可能不看到。現在大家都已經習慣，當它變動時，先去「Interrupt」自己正在進行的工作，先去處理一下。現代每個人都像一顆CPU一樣，可以「多工運算」，可以隨時被「Interrupt」，有的更厲害的還會看看哪個優先做、哪個隨後做。
注意，如果一個網站不會一直變動，我們就不會將視窗一直開在那邊。也就是說，這個網站就不會被列入我們的「十分鐘名單」。

此外，一個網站就算沒有被上班族一直開在那邊，也有可能會被他/她列入「一小時名單」，也就是每過大約一小時，就會固定檢查一次。譬如我每個整點都會看一次CNN、Techmeme、Yahoo!奇摩新聞……輪了一次後，一小時後，再是同樣的網站輪一次。如果這個網站我們知道不可能一小時更新一次，那麼，我們也就不可能列入我們的「一小時名單」。

換句話說，如果一個網站無法進入我們的「十分鐘名單」或「一小時名單」，那，它不只少了很多PV而已，它甚至就少了很多使用者，使用者會忘記你這個網站，轉而求你的競爭者，將它放在「十分鐘名單」或「一小時名單」中，你就永遠的失去這些使用者了。

《海峽時報》的成功，告訴我們「即時」是可以拉來新的使用者的，大家都認為，有些新聞不需要每十分鐘看！但一個可以十分鐘看一次的網站就可以進入「十分鐘名單」，一個可以一小時看一次的網站就可以進入「一小時名單」，《海峽時報》做到了這一點，於是，它就成功的吸引了三倍的新使用者了！

所以，一個網站提供「即時區」絕對會帶來新成績，只要能潛入上班族的「十分鐘名單」或「一小時名單」，那就太有意思了。有什麼點子，是可以潛入這兩個名單呢？大家可以想一想。

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

Wal-Mart加開「C2C」市集，人氣網站改當房東賣地段賣形象？

昨晚在投資部落格SeekingAlpha看到一則有趣的網路分析（新聞可見此），這是一位B2C與C2C廠商的投資人所寫的，應該有幾分參考價值。他的主題是：昨天美國龍頭大賣場沃爾瑪(Wal-Mart)開了一個新的網路服務叫做「Wal-Mart Marketplace」，簡稱為「WMMP」，中文可叫「沃爾瑪線上市集」。

這個WMMP顧名思義，就是一個讓第三方賣家可以直接上架、賣東西的線上商城，也就是說，原本Wal-Mart做再大，也是「B2C」的範疇，他們無論先進貨還是先不進貨，由他們來接客戶的單，再從自家的廠商出貨。你說，一家這麼大的大賣場突然推出「C2C」，只是大巨人的一個小嘗試，有什麼了不起？

尤其，Wal-mart在線上還這麼「小」，在2008年，Wal-Mart在美國只排行第14名，但比較營收卻少了近10倍（Amazon年營收200億美元，Wal-Mart只有17億），這個小嘗試也無法撼動整個電子商務市場啊？

不，這篇文章的作者提到一點，很有意思。作者分析，這件事絕對不是憑空而來，這是一個趨勢的開始。他認為，Wal-Mart此舉經過精打細算，衝著「Amazon」而來（包括長相都和Amazon很像），這不是隨便加的一個新功能，而是經過歷史經驗的一個新方向；這種「加市集到自己網站」的做法，有可能像野火般燃燒整個網路，不只是所有商店都跟著做，跟著拉一些更小間的廠商「一起賣」，而且甚至其他任何有「流量」的網站，尤其是流量大、會員資料充足卻無法賺錢的「社群網站」們，都有可能開始加入「C2C」的市集概念！

何以見得？原來，從2006年底開始，大家就開始懷疑，C2C可能是任何一個購物網站一直忽略的一塊重要拼圖。因為自2006年起，Amazon就莫名其妙的年年成長，而且它成長的速度竟然比整個電子商務市場的速度還快了足足20%。我們一般人會覺得理所當然，Amazon這麼大，大者就恆大，大家被吃得死死的都是應該的！但，業界卻覺得不可思議，所以，每一家大廠都在默默偷偷研究到底Amazon是怎麼辦到的？到底它的「秘密武器」是什麼？他們從來沒找到答案，但他們也觀察到，剛好是同一時期，Amazon開始他們的一些「C2C」的嘗試。大約從這時候起，早在Wal-Mart這次大動作之前，就有一些中大型B2C購物網站如Overstock.com、Buy.com，以及歐洲的Pixmania、Play.com開始加入C2C「市集」的元素。現在，終於輪到Wal-Mart！

這篇文章指出幾點，一間大網站（尤其是大型B2C購物網站）本來就應該添加C2C的五點理由：
一、你已經花這麼多錢來建立自己的B2C線上品牌，現在大家都會來你這個網站，並記得你就是這個方面的權威賣家！
二、這些客戶雖然知道你是權威賣家，但他們也需要很多很多選擇。
三、對客戶來說，最差的經驗就是，當你的選項不夠多，他們竟「買不到他們想買的東西」。他們一旦走掉，還在其他地方找到他們要的東西，你就有損失客戶的危險。
四、即使你是一間再厲害的B2C廠商，你能談的供應商就是「這麼多」而已，你能賣的也就是這麼多，永遠不比「夜市」還厲害。

五、如果你想當B2C版本的「夜市」，那會花你非常多錢，卻沒有這麼大的效果。
這位作者說，綜合以上，最簡單的解決方案就是加一個「C2C」的線上市集。有趣的是，Wal-Mart做這件事，無意開新事業，顯然真的只是「幫助本業」而已。看，Wal-Mart雖然推出這個所謂「線上市集」，但它並不是一個獨立的網站，它甚至連一個相樣的獨立的「頁面」都沒有！一進Wal-Mart，它會以Banner的形式，出現在正中心，上面寫著「More for less」的宣傳文字，那個「More」字寫得斗大，你在上面點了產品類別、項目，它就整頁替換，但也不會專門給線上市集。可能是因為這樣，有趣的是，WMMP也似乎打算先從幾家大廠開始，而不是開放給所有小廠都加入，所以，目前只有eBags.com、CSN Stores、Pro Team幾家外部廠商在上面上架賣自己的東西，這點和現在的Amazon很不一樣，和eBay當然差得更遠。這也透露了現在B2C「添味」C2C可能的方式。

作者的「大網站開始添加C2C」的想法，我覺得蠻值得延伸思考，這可以和之前和某位前輩討教時，他所提到的「網站流量即房地產」論──
這位前輩提到，到最後，或許不是網站去找商家來做C2C，而是商家主動找上門。因為，線上商店愈來愈多，所謂「繞過middleman」的夢想也會慢慢的變成空想、理想，慢慢的消失掉，那些小商家一開始的確享受到不必開店就能賣東西的樂趣，賣個100萬營收頗為容易，但，接下來要突破小型商店變成中型商店、到500萬夜績呢？就不容易了！每家商家都會用網路行銷，整個市場變得非常擁擠。這狀況就如同實體開店一樣，這時候，「地段」的「優勢」就出來了！
一家普普通通的店，它就是開在一個「好地段」，業績就容易好。
問題來了，網路上，什麼叫「好地段」？

所謂好地段，這位前輩認為，就是有「流量」，尤其是每天固定進來的固定流量的網站。這時候，說不定我們會看到一些有點流量的網站，尤其是現在賺不到錢的社群網站，通通都跑出來做這個。他們會發現，喔，原來他們現在是在東區鬧區開一間不符一般大眾喜愛的高爾夫用品店，難怪賺不到錢，乾脆不要自己開了，做個職業房東吧！「趕快把店面租出去賺錢賺才快！」接下來，也會發生「併購」事件，創投投資一般流量網站的錢，花在購買電子商務小商家上，為自己的流量網站，帶來穩定且長久的營收。

當然，一開始大家都會抨擊，叫一間「圖書館」來當「書店」，簡直是四不像！但後來大家會發現，只要來網站的人口和該商品的潛在購買人口吻合，那麼，一間「圖書館」反而已經先有了它的品牌形象，轉作當書店反而「瞬間加分」，在「好地段」之上還有「好形象」。這個趨勢如果早點去把握，這就有如一條東區鬧區大道，先開出百貨公司的，就搶先設定「我這裡是中心」，其他的跟著圍繞，現在所謂的「中心」還不是這麼確定，就看哪一個網站先衝出來插旗。

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