用 iPhone4/4s 看原本的圖會糊掉，很醜，所以要為 Retina Display 另外寫一些規則。

假設原本是

div{
　width:  30px;
　height:  30px;
　background: url(../images/bg.png) no-repeat 0 0 ;
}

給 Retina Display 吃的樣式要這樣寫：

@media screen and (-webkit-min-device-pixel-ratio: 2) {
　div{
　　background: url(../images/bg@2x.png) no-repeat 0 0 ;
　　background-size: 30px 30px;
　}
}

其中 bg.png 要做成兩倍大，存成 bg@2x.png (也就是後綴@2x)，上面這個例子是 30px*30px, 也就是要存成 60px*60px,  background-size: 30px 30px 就是指定要顯示的尺寸，沒有加的話圖片一樣是顯示成60px*60px, 總之就是把圖片變成雙倍大，再用 background-size 把它縮小，這樣顯示出來的就會是雙倍的像素。

不過已經寫了 @media screen and (-webkit-min-device-pixel-ratio: 2) 為什麼還要加上後綴@2x 這我不太理解，可能是方便寫程式去自動取代之類的 ex. http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/ 。等之後有空再來研究一下。

寫一下以免忘記 XD

@media all and (max-width:500px) { /*Styles*/ }
@media (max-width:500px) { /*Styles*/ }
這兩行的意思都是表示，CSS會在裝置寬度最多為 500px 時應用，也就是 500px 以下應用的 Styles

相對的：
@media all and (min-width:500px) { /*Styles*/ }
@media (min-width:500px) { /*Styles*/ }
則表示裝置在寬度為 500px 以上時應用。

如果是一個範圍，譬如說寬度 320px 以上 ~ 640px 使用一樣的 Styles , 則是這樣寫：
@media screen and (min-width: 320px) and (max-width: 640px) { /*Styles*/}

iPhone 4 我不太確定，因為 Retina 顯示器的關係，它寬度是 960px ,
但實際上好像是吃 max-width: 480px  , 保守一點也可以這樣寫：
@media screen and (-webkit-min-device-pixel-ratio: 2) { /*Styles*/ }

如果是兩個解析度共用(不是一個範圍)的寫法則是：
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) { /*Styles*/ }

以下這兩個則是 直立/水平 的寫法：
@media screen and (orientation:portrait) { /*Styles*/ }
@media screen and (orientation:landscape) { /Styles*/ }

另外 meta 似乎要加下列這行在 iPhone 裡才會生效：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

更多: iPhone 4 and iOS 4 Safari detection & behavior , W3C

今天因緣際會看到某個部落格，格主列了他性向測驗的結果，感覺是個深入淺出的測驗，於是我也找到題目和解答，測驗結果還蠻噗嗤的：

Continue reading →

話說我讀完這本書才發現書名很奇怪，應該叫《網路行為關鍵報告》，《網路行為的關鍵報告》好累贅…

博客來AP連結：網路行為的關鍵報告

個人評等：★★☆☆☆

這本書的作者Bill Tancer 是 Hitwise 全球研究部的總經理，Hitwise 號稱有數千萬筆搜尋關鍵字及上千萬位使用者網路行為的資料庫，該公司的服務為提供企業的關鍵字諮詢、量化報表、網站訪客分析…等等 (如：Hitwise 的網站與搜尋引擎TOP 20)。

《網路行為關鍵報告》閱讀起來蠻輕鬆的，數據也都有圖表輔佐，不過我覺得這本書寫的太淺了，感覺一點也不"關鍵" 啊! 就好比原文書名 "Why million of people are doing online and why it matters"  , 書裡的只有寫到 "Why million of people are doing online"  , 但沒有寫到"why it matters"  , 而 why it matters 才是最重要的。我期盼此書有像《超爆蘋果橘子經濟學》的深入與抽絲剝繭，但此書只有寫到搜尋行為的表像，沒有再深入探討搜尋行為，譬如其中舉的一個例子：「畢業舞會服裝的搜尋」，美國畢業舞會在5月份舉行，一般認知3、4月會是搜尋的最高峰，但作者的數據卻顯示1月是搜尋的最高峰，作者不解並開始尋求原因，他比較使用者的社經地位、搜尋傾向之後，結論是"因為流行雜誌1月份就會有畢業舞會服裝的流行趨勢報導，所以1月份的搜尋量才會爆增"，這樣的結論令人有點傻眼，似乎有太多因素沒有考量在內，而「閱讀雜誌」→「上網搜尋」這之間的行為模式也沒有納入考量，一般實體季節性商品也有提早上架/宣傳的傳統，如春裝、夏季飲品等，如果探討商品屬性與宣傳時效性會更有趣。又如「 Facebook 的興起造成色情網站的衰落」這樣有趣的議題，也沒有完整的數據來佐證，或是更深入的探討其行為(從此處可以看出作者應該沒有學術研究的背景…)。

書中的一大亮點是對於「早期採用者」跟「超級連結者」的論點，不過大多是引述其它書籍論點(如：《引爆趨勢》) 所舉的 Arctic Monkeys 竄起跟 Myspace 紅星 Tila Tequila 例子也十分過時、老調重彈，甚至還提到 Orkut 這個被 Facebook 打得落花流水的網站，說 Orkut 會因早期採用者而興起。原書的出版時間是2008，應該已經是 Myspace 跟 Orkut 開始衰落的時間了 ( Orkut 甚至一直沒有大紅)，令我懷疑成書的日期是2006之類的…。個人覺得「早期採用者」跟「超級連結者」以「明星品牌效應」來解釋更洽當，Nicole Kidman 擦 Chanel no.5 跟 Ashton Kutcher 使用 Twitter 在本質上沒有什麼不同。而網路會造成許多素人明星，像許多使用者會經由名部落客的推薦去購買商品，而不是追隨「早期採用者」，好比在"微博"這一環，台灣的「早期採用者」、「創興者」選擇了 Twitter , 但很明顯的大部分的使用者選擇  Plurk。(也許是台灣的網路市場是很多"小眾"網站沒辦法出頭天的網路環境，因此「早期採用者」的影響有限吧!)

不知道有沒有「早期推薦者」這回事，這本書 Anobii 上目前只有兩個兩顆星的評等(其中一個是我 XD)，雖然樣本數很少，但似乎很容易影響購書意願。又譬如我們上網搜尋A餐廳跟B餐廳的評價，如果一樣找到10筆評價，A是前6筆好評，後4筆壞評，B是前4筆壞評，後6筆好評，應該會讓人對A的好感大於B，也就是網站排序真的會形成"朝三暮四"的現象，像書評這回事，如果有前5筆是5顆星的好評，原本要打3顆的可能會拔升到4顆，前5筆如果是2顆星的壞評，也許會從原本的4顆星降到3顆，研究這類的從眾效應也挺有趣的。

其實我今天很忙，但是老習慣依舊，越忙越想打部落格文 XD Continue reading →

這禮拜讀了10本書，記錄短心得如下。

1. 日安憂鬱
以現在的語言去形容書中女主角，大概就是「惡女」吧。一邊閱讀我一邊覺得好像，回憶起自己小時候的「為賦新詞強說愁，全世界都欠我」，書末急轉直下的悲劇結果，讀完覺得非常唏噓，跟讀完與之相提的麥田捕手的爽勁不同啊…。

2. 家傳大煎鍋
一口氣讀完這本書，跟<一的力量>一樣，彷彿經歷了一段不可思議的旅程，剛讀完就馬上想再重讀一遍! 書中的每段故事都很精彩，情節曲折仿若神話， 也如同一篇篇寓言，即使真實性令人存疑，但從另一個角度來看，也是寫實描繪了大時代動盪下的悲劇。

3. 三毛貓推理
我的第一本赤川清郎，從三毛貓系列入手，推理其次，搞笑才是最大的目的吧，讀來輕鬆愉快，三毛貓讓我這個貓控非常喜愛，我想我會為了這隻三毛貓，再多看幾本赤川清郎!

4. Design = Social
作者旁徵博引許多現代設計作品，這些作品可能會被學術論述的設計史所忽略，尤其20世紀以降的各國設計路線、特色，經過作者的整理都各展現出一套脈絡。與 其說"設計=社會"，不如說是"設計=民生"，從各個時代的民生用品去看設計的發展與演變，十分有趣。除了做為設計史的輔佐，創作者亦可從中列舉的經典作 品，獲得新的啟發。

5. 魅麗的網頁設計
內容有點少，很多主題談的不夠深入， 不過書中某些作法對我來說還是蠻有幫助的。

姊姊傳來消息，說台北的貓咪走失了…說是4/18那天參加中和放生寺的結紮活動，過程中不小心讓她跑了，因為怕我難過，一直到今天姊姊才告知我。我現在人在台中，加上禮拜四還要去複診胃的毛病，不然真想馬上衝上去台北找…只能盡快把工作完成，也祈禱早點找到小牛。

5/2 補充，後來我在4/22時殺上台北，經歷過誘捕籠抓到5隻貓，來回放生寺7~8次，附近巷弄地毯式搜尋，終於在4/25那天在放生寺的廚房裡發現小牛的身影，花了一整個晚上終於抓到她!(誘補過程又是另外一個故事 XD)。 整隻貓咪瘦了一大圈，背上的脊椎骨立現…估計是結紮活動當天就跑進去了，也就是關了一整整個禮拜，總之，可以找到真是太好了!!

Continue reading →

這個月因為工作較忙，只讀了9本書，紀錄短心得如後。

1.  真希望我20歲就懂的事
讀完這本有點小失望，因為我在意的點是「20歲以前該懂的事」是什麼，不過書中比較側重創意的發想與鼓勵創業，主要是提點一些「想法」，比較少著墨在創業實戰，但這本書還是推薦給年輕人，或是創意工作剛入門者，比較能感受到「震撼教育」，但資深創意工作者，或本科系的學生，可能就會覺得不夠深入。

2.  暗黑童話
乙一難得一見的長篇作品，與其短篇作品相較，一點也不遜色。待日後有空再來補篇完整心得。

3. 治療
果然是一翻開就停不下來! 這本書的劇情跟近期上映的某部電影非常雷同，因為雷很大就不說是哪部電影了。雖然劇情不是「絕對猜不到」，峰迴路轉也夠折煞人了，我喜歡書中對兇手犯罪動機的描述，但我認為最末的安排有點刻意，要不是覺得那段有點突兀，我的評價還會更高。

4. 強風吹拂
很青春的一本書，推薦喜歡BL的人看 (註：我不喜歡BL…)

5. 遊戲
<治療>作者的第二本書，相較起來我比較喜歡<治療>，但這本書也是毫無冷場，如果你喜歡好萊塢電影，也會喜歡這本書。
(BTW遊戲跟治療的封面設計都是王志弘，我很喜歡，衝著封面也會想收藏)

6. 聖女的救贖
東野的作品向來不是推測兇手是誰，而是背後的動機，及動機背後的人性體現。這本書不是東野最好的詭計，也不是最出色的動機描寫，但跟<嫌疑犯X的獻身>兩相映照，對於奉獻愛情的定義各有一番詮釋。(這兩本書的兇手乾脆在一起算了 XD)

7. 終末的愚者
這本是伊坂目前的作品中，我最後看完的一本，這本跟<孩子們>比較相近，短篇的寫法、共通的人物，及開放式的結局，與伊坂以往的緊湊、非本格推理的主要風格不同，是個溫馨、不帶太多批判的作品，雖然少了些力道，但一脈的交錯式寫法仍是引人入勝。

8. Everything You Know About CSS Is Wrong
這個月唯一讀的工具書，本書介紹了CSS Table的應用，讀前兩三章時很興奮，但後面幾章面對瀏覽器的現實又澆了我冷水，不過多接觸一些新技術總是好的，深入介紹CSS Table的設計概念，在某些情況下仍然蠻實用的。

9. 動物怪譚
個人喜歡其中長頸鹿那篇，很幽默。這本書有點偏向獵奇，文字冷冽慘忍，我很痛苦的把這本書看完，看完不想看第二遍，對我來說口味太重，相較起來，我還比 較可以接受乙一的暗黑童話，至少殘酷中帶有人性的溫暖，這本動物怪譚，則是用動物血淋淋的反映出人性殘酷的一面。

其實我覺得自己談設計有點沒立場，我工作的領域為網頁設計為主，身為末端的外包，嚴格說起來跟業主大多也不是直接接觸，我更不會說自己是個"設計師"，不過看前陣子被批的很慘的建國100年的識別設計，還是有一些淺見想要抒發。

這個標誌被罵到翻，大多數的人都覺得設計的很差，一方面造型太簡單，一方面也沒有什麼創意。就識別標誌設計的原則來說，這個Logo也相當失敗。首先，Logo的意涵之一為"以金色為主體，象徵一百年的輝煌燦爛、厚重沈穩"，而優良的Logo設計，會考慮到除去顏色的影響之後，這個Logo仍有相同說服力，來看看除掉顏色之後的設計，你可以體會到 "以金色為主體，象徵一百年的輝煌燦爛、厚重沈穩" 這個設計理念嗎?

再者，一個好Logo，必須要在縮小時仍保有相當的識別度。

文字就別談了，"100″ 這3個數字，不覺得有點糊成一塊了嗎?
(也許會有人覺得縮的太小，不過印刷品上常會運用到比上圖還小的尺寸…)

另外，為了運用方便，現今Logo的設計多採用向量格式，以無損放大或縮小，建國100的Logo，則明顯用了點陣格式的材質，為了做到點陣圖放大不失真，只好把原圖做的超級大，這是考慮不周全的做法，這種把點陣圖運用在識別標誌上，只有在20年以前比較常見。(因為電腦不普及，必須用手繪等方式設計) 下圖為建國100的局部放大圖，可知運用上被放大之後，可能產生的質感問題。

再看一下這個所謂官方版的設計。把國旗直接放在上面，這樣叫"設計"嗎?

英文版的同樣很"政治正確"，只寫了100周年紀念。

寫到這邊我已經覺得討論這個Logo很浪費時間了…

說實在台灣的設計環境並不完美，但我看到很多年輕設計師都在努力、自我充實，為了做出好的設計、真正有用的設計，不一昧迎合客戶的要求，拼命地在客戶的苛求跟自己的專業之間找到平衡點。 (有一說做設計的通常不超過40歲前就會轉行，因為太辛苦、太傷身體、報酬太低…)

這個建國100年的設計…看說明是所謂的專家跟學者討論出來的，這些專家跟學者們，你們對的起這些真正在辛苦做設計的人嗎? 如果你們真的覺得這是好的設計，也許你們該去檢視自己的專業了。

最近某位虐貓人被判刑一年半，我個人非常樂見這種結果，算是台灣動保法的一大進步，這個審判也在網路上引發熱烈討論，有人覺得判太重，有人覺得不夠重，也有一派人覺得，那打蟑螂打蚊子的，怎麼不判刑之類的，相對於他們冠人愛貓/愛狗人士，我稱這群人為愛蟑人士。

每次看到這些愛蟑人士的論調我都覺得可笑，的確，現行動保法只有保障幾個特定物種的動物，依法而言，打蟑螂蚊子當然不構成違法；以情理而言，害蟲也沒人為他們發聲，撇開這些不談，我想這些愛蟑人士也未免太不理性、太笨了。 (對，不理性的並不是愛貓狗人士)

罪犯殺了一個無辜的小嬰兒，或是殺了一個曾強姦他的人，法律會因為人人生而平等，判同樣的罪嗎? 不會，法官仍會斟酌情事裁定刑罰。也可以這麼說，法律原本就是在大部分的人的共識下建立的，這個共識的基礎可能是基於道德情感和集體的利益，所謂的公平本來就是一個"均數"。同樣的，動保法保障特定物種的規定，也是一個多數決的判斷。這並不難理解，但愛蟑人士總是不斷跳針，或是說吃雞鴨鵝牛豬也很殘忍等等…。再說明白一點，今天台灣大多數的人都有同樣的看法，動保法當然會納入這些物種。就如有的國家不吃牛肉或豬肉，法律因地制宜，慣例因民俗而異，這些很難理解嗎?  (所以我才會說愛蟑人士笨)

再說到扣上"偽善"這個大帽子，以我個人而言，養貓純粹是因為喜歡貓、覺得貓可愛，從來不覺得自己是在"行善"，說是自私也行，人類哪些行為不是自私的? 但說是偽善也徹底不對，"偽善"的背後一定有其他的目的，否則善怎麼"偽"? 若要說什麼目的，的確可以說是自我感覺良好，這些我也不會否認，但究其"善"本身，"自我感覺良好"不就是唯一的出發點嗎? 　(延伸閱讀：德性起源)

這些愛蟑人士，我想正是因為他們自己本身無法辨別貓跟蟑螂之於人的情感的不同之處，所以他們才會有這種言論，也無法理解為何他人會覺得不同，自行解讀的結果是這些人"偽善"，這種想法讓他們有安全感，不用承認是自己社會化不足、或欠缺某些情感功能。他們若是不能在情感上理解大多數人的看法，可以試著用同理心去想像，若仍無法想像，也可以從社會整體觀感去調整自己的言行。 (所以我說愛蟑人士不理性)

甚而有無聊人士牽扯到溫室效應，覺得你們這些愛貓狗人士還不是都不環保，說一套做一套等等…。這也是可笑的論調，每個人關心的事物不同，努力的程度也不同，難道愛貓狗人士會去環保論壇大放厥詞，跟環保人士說，你們只關心溫室效應，都不關心流浪貓狗? 大部分的貓、狗中途就是默默的帶流浪貓狗去結紮、花錢帶他們去看病、送養，至少他們在為自己關心的事付出。那些指責的人呢? 自己又為關心的事付出了什麼?

聽過救海星的故事嗎? 就是有人會站在一旁，說再怎麼做都於事無補，或是笑人偽善，如果你不加入丟海星的行列，就站遠一點吧，沒必要為了你個人的不安，去影響到真正有在做事的人。