家儒的筆記 http://ka-yue.com/blog 網頁設計、開發、SEO 優化 Fri, 27 Aug 2010 06:22:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 在奇摩Yahoo!的日子 http://ka-yue.com/blog/the-days-in-yahoo-kimo http://ka-yue.com/blog/the-days-in-yahoo-kimo#comments Fri, 27 Aug 2010 06:22:10 +0000 kayue http://ka-yue.com/blog/?p=691 在 twitter 上發現這麼一系列文章－《我在奇摩Yahoo!的日子》，2007 年寫成的，四年前的舊文。作者曾於 Yahoo!奇摩 當企劃／製作人，負責過家族、交友、知識+ 等產品。更於 2005 年因知識+ 榮膺雅虎全球企業員工獎「Yahoo！Superstar」（雅虎之星）。

其實本人喜歡 Yahoo! 更甚於 Google，製作上有誠意得多（Google 的設計實在太工程師了…）。現在有機會讀到 Yahoo!奇摩 員工的自白，實在難得。我讀到了當中的苦與樂，讀到了那種認真，以及有資源可以大干一場的痛快。當中這麼一段令我印像最深：

『…無名小站會紅，是相簿在紅， 然後延燒到 blog 書寫平台。流量大？以前的Yahoo!奇摩家族的流量更大；美女多？以前的Yahoo!奇摩交友的美女更多；照片清涼？以前的Yahoo!奇摩相簿更…。 諸多的「以前」，反映出不是無名小站強，而是Yahoo!奇摩一直在棄守，加上沒有嗅到市場環境的轉變，被無名小站給蠶食掉市場。』

市場環境的轉變，其實指的是甚麼轉變了呢？習慣？需求？

－－－－－－－完－－－－－－－－－－

好忙啊…………哪有時間思考……

]]> http://ka-yue.com/blog/the-days-in-yahoo-kimo/feed 0 IE 也支援的 Inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block#comments Sun, 15 Aug 2010 08:13:34 +0000 kayue http://ka-yue.com/blog/?p=686 Continue reading →]]> .inline-block { display: inline-block; zoom: 1; *display: inline; }

CSS 中最常用的 display properties 一般有 block、inline、none。而 Inlin-block 是另一個極好用的屬性，卻因為 IE 不太支援，所以常常被忽略掉。而只要用上面這段 css snippet ，就能令 IE 也支援 inline-blcok 了。

如果不知道 inline block 有甚麼特點的話，很簡單 － inline-block 在 inline 之餘，還有 block 的屬性 － 可以設定 height 和 margin-top、 margin-bottom。

]]> http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block/feed 0 HTML5 預設模版頁 http://ka-yue.com/blog/html5%ef%bc%8dboilerplate http://ka-yue.com/blog/html5%ef%bc%8dboilerplate#comments Wed, 11 Aug 2010 05:39:40 +0000 kayue http://ka-yue.com/blog/?p=681 Continue reading →]]> A rock-solid default for HTML5 awesome.

自從沒有再用 Dreamweaver 以後，每開始一個新頁面我就煩惱 doctype 該要寫甚麼，jQuery 的 Google CDN 網址又是甚麼……以往這些都包括在 Dreamweaver 的預設 HTML 網頁模版裡。

現在可方便了，有人整理了一整套 HTML5 空白模版，內容包山包海，甚麼都有 － 從 HTML 基本模版、CSS Reset、jQuery CDN 這些最基本的就不用提了，連 .htaccess 也準備妥當，實在很好很強大。嗯，web developer 最注重的一點，IE 向後支援，也沒有問題，連 PNG fix 也準備好，簡直完美啊，捨我其誰呢？

如果用不上全部功能，大可意把用不上的地方 delete 掉，因為官方聲稱 delete-key friendly，沒有 dependency 的問題。即使用不上，光讀一次 source code 也能學到不少 best practices。畢竟人家花了很長時間整理，source code 裡也都附上詳細註解與出處。

唯一的小不滿就是 CSS Reset 部份，不過這就涉及個人喜好了，非戰之罪也。

]]> http://ka-yue.com/blog/html5%ef%bc%8dboilerplate/feed 0 重新設計登機證 http://ka-yue.com/blog/redesigning-boarding-pass http://ka-yue.com/blog/redesigning-boarding-pass#comments Tue, 27 Jul 2010 17:28:57 +0000 kayue http://ka-yue.com/blog/?p=672

雖然已經乘坐過不少次飛機，但是每次依然會有一點點緊張。行李、證件一堆有的沒的已經令人神經緊繃，最後航空公司還要再給你一張收據似的東西－登機證。

上圖是美國 Delta Airline 的證機證，很像一張能張能夠隨手丟棄的收據吧？我有坐過 Delta Airline 的航班，不用提那亂來的排版和 spacing 了，光是它的大小已經很奇怪 － 無論長寬都超過我銀包的大小，害我都不知把它放哪裡好了。所以大家的登機証都是摺痕處處，因為不對摺的話跟哪裡都放不進。在找閘口的時候經常需要用到登機證，所以放進銀包是最合理的。可是它的大小卻只能夾在 passport 裡頭，除非你不介意把這破紙對摺兩次。

有設計師受夠了這種設計，自行重新設計了新的登機證，有多種不同概念，請到 http://passfail.squarespace.com/ 欣賞。

]]> http://ka-yue.com/blog/redesigning-boarding-pass/feed 0 CSS3 PIE – 讓 IE 支持 CSS3 http://ka-yue.com/blog/css3-progressive-internet-explorer http://ka-yue.com/blog/css3-progressive-internet-explorer#comments Tue, 13 Jul 2010 18:17:35 +0000 kayue http://ka-yue.com/blog/?p=668 又是老話題。CSS3 PIE 又是另一個目的在令 IE6 – 8 支援圓角、陰影及漸變的 .htc hack。這三個大概是最常用的 css3 屬性了。特別的是 CSS3 PIE 是連 code generator 的，十分方便。

在 VMWare 裡試了試 IE6 下的效果，完美的 rendering ，但好像會把機器拖得很慢似的……有機會再在原生機器上試試。

網址：http://css3pie.com/

]]> http://ka-yue.com/blog/css3-progressive-internet-explorer/feed 0 常用 CSS Hack 再整理 http://ka-yue.com/blog/common-css-hack http://ka-yue.com/blog/common-css-hack#comments Sat, 26 Jun 2010 19:11:11 +0000 kayue http://ka-yue.com/blog/?p=659 Continue reading →]]>

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。

CSS Hack

IE hacks

雖然 IE 對 CSS 的支援不堪入目，可是卻有方便的屬性 hacks！把下列 hacks 記下來即可輕鬆應付各版本的 IE！

.selector {
    padding: 10px;
    padding: 9px\9; /* all ie */
    padding: 8px\0; /* ie8-9 */
   *padding: 5px;   /* ie6-7 */
   +padding: 7px;   /* ie7 */
   _padding: 6px;   /* ie6 */
}

Firefox hacks

/* Target Firefox 2 and older */
body:empty .selector {
    color: red; 
}
/* Target FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default {
    color: red;
}

來源：CSS Hacks for Different Versions of Firefox

WebKit hacks

針對 Chrome 和 Safari 的 hack

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector { padding:11px; }
}

Javascript

Javascript 的解決方案都不外乎先在 Javascript 做版本檢測，之後在 html 或 body 上加上相應的 class。這樣做的好處是不用在 css 裡加入各種奇形怪狀的 hack，也不用處理日後 css hack 的相容性問題。缺點是它要依賴 Javascript，反應也可能比較慢…

jQuery

這一段 code 可以自動在 body tag 上加入 IE6 class

if( jQuery.browser.msie && parseInt(jQuery.browser.version) === 6 ) {
    $("body").addClass("ie6");
}

請各位自行舉一反三，詳情請閱 http://api.jquery.com/jQuery.browser/

Modernizr

如果你常常在網站上用到 CSS3 的話，又同時要支援舊瀏覽器，Modernizr 可能對你有用。Modernizr 會就瀏覽器支援的 css3 屬性在 <html> 加入相應的 class。

例如我想用多背景圖的話：

.multiplebgs div p {
    /* properties for browsers that support multiple backgrounds */
}
.no-multiplebgs div p {
    /* optional fallback properties for browsers that don't */
}

更多例子請見 http://www.modernizr.com/docs/。雖然我覺得這樣做有點多餘啦，如果要完美支援舊時代瀏覽器的話不如直接放棄 CSS3 好了。

HTML Conditional Comments

最近我還學到了這種不用 Javascript 而又可以在 <body> 加 class 的寫法：

<!--[if IE6]--><body  class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

很好很強大，長得醜一點就是了。

]]> http://ka-yue.com/blog/common-css-hack/feed 3 UD.com – 你的商號被用了嗎？ http://ka-yue.com/blog/check-availability-of-social-usernames-domain-names-and-trademarks http://ka-yue.com/blog/check-availability-of-social-usernames-domain-names-and-trademarks#comments Fri, 25 Jun 2010 20:44:52 +0000 kayue http://ka-yue.com/blog/?p=639

在想公司名字的時候，domain name check 已經是大家必做的動作，網上亦已經有一堆工具可供使用。可是在這個人人都在談論 social network 的年代，Facebook、Twitter 等社交網站的帳戶名同樣重要。

UD.com 就是這麼一個一站式的商號檢查工具，除了網址外，還可以查到各個社交網站的帳戶名是否被註冊掉。支援 Facebook 、Twtitter、MySpace、LinkedIn、eBay 等等。

啊，對了，連幾大 trademarks 組織的資料庫也可以查到……不過大家比較關心 Facebook 帳號吧？

]]> http://ka-yue.com/blog/check-availability-of-social-usernames-domain-names-and-trademarks/feed 2 Bounce – 輕鬆在網頁上加注釋 http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b#comments Thu, 24 Jun 2010 21:40:03 +0000 kayue http://ka-yue.com/blog/?p=644

網頁設計師都知道，跟客戶用 email 溝通時，客戶常常會在 email 中用文字描寫列出一堆需要修改的地方，又或者截圖後在 powerpoint 裡發揮他的小宇宙。最糟是自從用 Mac 後，遇上亂作一團的 ppt 作圖，我都不知道是 Mac 版的 Office 相容性問題，還是客戶的美術天份低。

Bounce 是一個優雅而免費的解決辦法。輸入網址後，Bounce 會先把網頁截圖，然後用戶可以隨意框出所需的地方，再加上注釋。完成後按右上方的 Save 鍵即可取得相應網址。十分方便。

短點的話，它的網頁截圖可能會有 rending bug，例如背景圖片消失不見等等。另外也不能像小畫家般畫畫。除此之外尚算好用。

網址：http://www.bounceapp.com/

]]> http://ka-yue.com/blog/bounce-%e8%bc%95%e9%ac%86%e5%9c%a8%e7%b6%b2%e9%a0%81%e4%b8%8a%e5%8a%a0%e6%b3%a8%e9%87%8b/feed 1 960 Grid Actions for Photoshop http://ka-yue.com/blog/960-grid-actions-for-photoshop http://ka-yue.com/blog/960-grid-actions-for-photoshop#comments Wed, 23 Jun 2010 18:08:44 +0000 kayue http://ka-yue.com/blog/?p=635 Continue reading →]]>

如果你也有用 960 Grid System 的話，這幾個 Photoshop Actions 一定對你有用。

960 Grid System 是個網頁設計法則和 css 框架，它主張一個網頁的寬度應為 960 px，並將之分成 4 至 24 等份（Grid 是也），欄與欄之間再有若干空間（Gutter）。網頁的元素應在這些 column 以內，以達至視覺平衡的目的。

例如我要實作一個兩欄式設計的網頁，頁面分成 4 欄，每欄 220px，gutter 為 20px；sidebar 佔去一欄（220px），內容佔去餘下三欄（220*3 + 20*2 = 700px）。用了 960 Grid System，我們便不用自己動手做算術，直接在 sidebar 和內容的元素上加上 class=”grid_1″ 和 class=”grid_3″ 即可，極為方便。

只是寫 HTML 方便了，但在 Photoshop 裡不可以用 CSS，結果還是需要自己動手計算每欄的寬度。所以今天要介紹這個 960 Grid Actions，它能夠建立一個已經把 grid system 設定好新 Photoshop 檔案。

安裝方法很簡單，解壓後打開 Photoshop ，點 j9s-960-columns.atn 兩下即可。要使用的時後在 Actions panel 上選擇你要的動作，按下 Play 鍵即可。如上圖示。

下載網址：http://www.johnnynines.com/2010/06/960-grid-actions/

]]> http://ka-yue.com/blog/960-grid-actions-for-photoshop/feed 1 莫斯科地鐵圖改良過程 http://ka-yue.com/blog/moscow_metro_map http://ka-yue.com/blog/moscow_metro_map#comments Wed, 23 Jun 2010 17:27:21 +0000 kayue http://ka-yue.com/blog/?p=631

莫斯科地鐵系統是世上最複雜的地鐵系統之上，在使用率上僅次日本東京地鐵。

有人找到了其地鐵圖的設計改良過程，請到原文欣賞：http://www.ruanyifeng.com/blog/2010/06/moscow_metro_map.html

]]> http://ka-yue.com/blog/moscow_metro_map/feed 0