原本我是為了和美國的親戚聯絡而註冊facebook的，不過沒想到在我註冊不久後，facebook在台灣也紅了起來。對於facebook能紅起來我是蠻高興的，希望能趕快把無名小站這個爛站打倒啊！ 好像扯遠了，今天主要是要分享一下我的農場的照片的。我玩的農場不是國內比較多人玩的開心農場，而是FarmVille。FarmVille最大的特點就是佈置很自由，而且45度的視角讓你很容易看到農場全貌，佈置好後非常好看。所以有非常多的創意佈置照片非常有趣，像是用彩色稻草堆排成超級瑪莉的…。 而我的照片主題是「休閒農場」，經過精心設計和多次打掉重建後，終於打造出這個非常可愛的休閒農場。賣點是那四個粉紅色的可愛小木屋。有餐桌，烤肉架，每一個木屋還分配一塊美麗的花田，可以讓你在週末時來渡假。 因為實在是重來太多次了，我也了解到景觀設計實在不容易呀。很多朋友玩這個遊戲只是把空地用田蓋滿賺錢而已，我覺得非常可惜，大家也都一起來佈置一下田地吧！
從OS9開始升級Mac OS到現在，沒有一次升級這麼艱辛的…我跑了蘋果店5次，從星期一到星期五，每天都去1次。最後終於在今天（五）升級成功了…沒有人像我一樣這麼辛苦的吧。除了這5趟以外，其實在上星期六（9/29）時，我就因為蘋果宣佈Snow Leopard提早推出，就跑到蘋果店問問看了，不過我心裡其實是知道不可能這麼早來台灣的，所以這一趟就不算在內。 由於在上星期六時，蘋果店都告訴我下星期一會到，所以星期一下班後，我馬上就到離公司比較近的蘋果店問問看。結果跑了三家都沒有，這時其實還蠻失望的，不過還在設想的可能範圍內。但是當看到推友都開始發一些10.6心得時，還是覺得非常羨慕。 星期二的時候，我特地提早了一點下班，因為正常來說今天應該都要到貨了。當我問的第一家跟我說沒貨的時候，我還呆了一下，還好在走一段路到第二家時，就有貨了。我就很高興的買了，當我聽到店員問我有沒有預定時，我還擔心是不是要預定才有呢。說誇張一點，我回程時的心情，好像用飛的一樣。 沒想到當我開始安裝後，才是天堂掉到地獄的開始。我的小黑麥在安裝到第二十分鐘時，就重開機，把光碟吐出來了。我本來還以為升級這麼迅速呢，當然…沒有升級成功。連續試兩次都這樣。難道我遇到傳說中的壞掉光碟嗎？ 於是隔天，星期三，我就到蘋果店去換光碟了，店家沒有問太多，就拿了另一片換給我。我拆開來檢查一下光碟序號，跟我原本那片一樣，也就是跟網路上有文章指出壓壞的光碟的序號一樣。我想再換一片，不過店家希望我先裝看看，不成功再去換。於是我只好回家再裝裝看，果然，又失敗了。唉。 星期四，於是，我又來到蘋果店了。這次我帶著我的小黑麥去，想在店裡裝到好再走人了。店家又拆了一片給我，這次序號不一樣了，於是我就請店家在店裡幫我安裝，我心裡是預計會安裝成功的，所以我就很愉快的在旁邊玩iPod touch的遊戲等待。沒想到二十分鐘後，我的小黑麥又…重開機退出光碟了……。這時我不知道要說什麼了，店家認為說可能光碟機有問題，不能在換光碟了，他們請我明天再帶來，用硬碟幫我升級。 於是今天，星期五，我再跑了一趟，這次終於讓店家用外接硬碟幫我升級成10.6了。經過五天終於升級成功…大概就是「終於」的感覺吧…真是一場折磨啊…。
就是愛便當是利用空閒時間幫我公司內部寫的一個小網站，功用就是方便同事做定便當的工作而已。這個網站也是Codeigniter有多簡單好用的見證。在這之前我沒有寫過任何php的程式，最多，有關的就是改WordPress和Drupal的版型，常常看到<?php ?>而已。 某一天，我看了nettus+的CodeIgniter From Scratch系列教學影片，剛好聽到公司同事在抱怨定便當很麻煩，突然就想到影片的教學，覺得有CodeIgniter好像就寫得出來了，於是就嘗試看看，網站就這樣出來了。 除了定便當，我後來還增加了對帳的功能。只要點今日便當的清單上的價錢，就會打勾表示這個人有付便當錢了，我對於這個UI設計還蠻得意的XD 附帶一提，因為自己人使用的，終於可以用一些CSS3效果了，爽。連結過去的網站是副本，不是我公司在用的，可以試訂玩玩看。 類別：訂單系統 站名：就是愛便當 網址：http://lunch.minipai.idv.tw/
1839當代藝廊是一個專業攝影藝廊，展出水準極高，均為當代著名攝影家，目前已經展出佐藤時啓(Sato Tokihiro)、杉本博司(Hiroshi Sugimoto)、港千尋(Chihiro Minato)的作品。同時藝廊也代理國內外攝影家的原作、複製作品、著作等等，是國內攝影界相當重要的藝廊。 網站以黑白照片為設計原形，以「當代」為主題，使用當下最先進的網站排版方式，在簡潔的設計風格上給使用者最佳的瀏覽體驗。這個網站設計也是我個人風格的典型。 類別：藝術 站名：1839當代藝廊 網址：http://www.1839cg.com 展覽資訊 網站首頁
因為技術上的限制，網頁設計在字型的使用上受限極大，不，嚴格來說，應該是幾乎沒有使用的空間。在西歐語系至少還有9種安全字型可以選擇，西方的網頁設計師已經抱怨連連，而中文世界的網頁設計師更是可憐，只有一種：新細明體（以Windows的佔有率來說）。 其實這算是眾所周知的事情，不過最近接連看到網頁相關訊息，所以突然覺得很想寫XD。 首先是幾天前@i-design推：「設計師與字型的關係好比女人之於衣服。」我的反應是「網頁設計師不就裸體…」。是啊，網頁設計師不能使用字型，就好像沒衣服可穿一樣淒慘。後來@i-design又回：「網頁設計師設計Logo時總嫌少個字型與平日收集字型的習慣，相當於女人與衣服之間的關係 XD」。以我來說，因為要設計Logo的狀況非常少，多數情況客戶都已經有Logo了，所以更沒有收集字型的習慣了，所以有需要設計Logo時，更會嫌少了…。 接下來是，我看到又有一個新的網路字型解決方案，Type Select。我們已經有SIFR, FLIR, Typeface.js, Cufon…老實說我已經搞不清楚他們之間的差異，也沒有好好研究過。因為不管哪一種方案，運作基礎都是西方字型不到100k的大小，才能讓使用者下載然後顯示。但是中文字型太大了，是以10mb以上來計算。當然也有人實驗只載入部分字集，像是這篇Load Cufón font dynamically，不過看來還只在實驗階段…。 所以，前幾天我就看到一個令我為之嘆息的作品。 TinTint點點印，網頁的設計風格，我非常喜歡。顏色非常柔和優雅，要傳達的資訊（產品介紹）也非常清晰明瞭，甚至html碼也不差，沒有討厭的table layout。但是最可惜之處，就是主要內容為了美觀，用了大量的文字圖片，而沒有文字啊…。如果這是英文網頁，只要字型指定Helvetica就可以解決了，不必用那麼多圖片呢。 亂沒章法的講這麼多，總歸一句就是，「我不想一直做圖片取代啊！」
如題。 簡單說就是，你可以用.class_a.class_b（重點：中間不能有空白）這個寫法來讓樣式只套用在同時有class_a、class_b兩個類別的html元件上，例如<div class=”class_a class_b”>。 但是IE6看不懂.class.class這個寫法，所以IE6會把.class_a.class_b 的樣式套用到<div class=”class_b”>這個html元件上。 這個IE6的問題讓我苦惱了一陣子，因為之前沒有用過.class_a.class_b這樣比較進階的寫法，不知道IE6有這個「bug」，結果找出問題的地方找了好幾天。知道原因後，只好去改php，讓html裡面再製造一個「class_a-class_b」這樣的class。 其實這個IE6不支援的css選擇器還算是影響比較小的一個，不過實在是有整到我，所以在這邊記錄一下。
Posted in CSS, IE Sucks！ |
花旗坊是迪化街上老字號的中藥行。花旗坊在城隍廟正對面，店面似乎是迪化街最大的，店面所在的巴洛克風格建築我也相當喜歡。 網站本身是很普通的官方網站，設計重點是以店面的建築為主題，利用材質營造一點巴洛克的風格。 類別：店家官網 站名：花旗坊 網址：http://www.hq70.com.tw
一直以來，至少這幾年IE6是網頁設計師的「問題」，也因此網頁設計師們想了許多辦法來「對付」IE6，希望IE6能從這個世界上消失，像是ie6-upgrade-warning，會出現要你升級的畫面，並阻擋你繼續瀏覽網站，最暴力的方式應該是之前我介紹過的「把IE6炸掉」，直接讓IE6當機了。 也有設計師提出其他的方案，像是Universal Internet Explorer 6 CSS讓所有網站遇到IE6都使用這個樣式表，這樣你就不必花許多時間在做處理IE6問題上。 不過這些方案在商業（設計案）上都有實用上的問題。客戶不會接受IE6的畫面和其他瀏覽器完全不一樣，也不會接受一個阻止使用者瀏覽網站的升級視窗。雖然我自己的網站很大膽的用了ie6-upgrade-warning，但是幫客戶做的網站，這些方案完全沒有使用的可能。 但是，戰爭還沒有結束！設計師的創意是永無止境的。最新推出的IE6 Update解決了以上方案都有的「客戶不接受」問題。因為IE6 Update是模仿IE6的訊息介面，提醒使用者該升級了！客戶只會以為那是IE自己的訊息，不會發現你多加上了什麼怪東西。 或許不會有多少使用者看到訊息就把IE6升級了，不過，多裝上這個IE6 Update，還真有出一口氣的感覺。
CSS是一種語法簡單，但是發揮空間卻很大的工具，有創意的設計師能在利用CSS簡單的語法創造出令人讚嘆的效果。現在CSS設計師的挑戰在於要把符合語意的HTML標籤用CSS加上視覺設計。不過這往往只有同為CSS設計師，了解html/css設計上的限制才能了解其中的奧妙之處。 SlickMap CSS 下面經過CSS美化後的畫面，非常的優美。 畫面底下的HTML也是非常漂亮的多層次清單，完全沒有為了排版添加多餘的標籤： <div> <ul id=”utilityNav”> <li><a href=”/register”>Register</a></li> <li><a href=”/login”>Log In</a></li> <li><a href=”/smap”>Site Map</a></li> </ul> <ul id=”primaryNav”> <li id=”home”><a href=”http://astuteo.com”>Home</a></li> <li><a href=”/about”>About Us</a> <ul> <li><a href=”/history”>Our History</a></li> <li><a href=”/mission”>Mission Statement</a></li> <li><a href=”/principals”>Principals</a></li> </ul> </li> <li><a href=”/services”>Services</a> <ul> <li><a href=”/services/design”>Graphic Design</a></li> <li><a href=”/services/development”>Web Development</a></li> <li><a href=”/services/marketing”>Internet Marketing</a> <ul> <li><a href=”/social-media”>Social Media</a></li> <li><a href=”/optimization”>Search Optimization</a></li> [...]
Styling a Poem with Advanced CSS Selectors 教你如何用CSS3來設計一首詩的排版。有時侯會覺得CSS3那麼多種虛擬選擇器，用處似乎很少，但是:before、:after、:first-letter、:first-line、:last-child在這首詩的CSS裡卻全用上了。 就像一首詩文字雖然不多，卻總是蘊含了無限的意境一樣，這篇CSS教學在設計一首詩的呈現時濃縮了CSS3的精華。難以想像只有<h1>、<h2>、<p>、<br />的一段文字可以設計得這麼漂亮吧。 教學網址：Styling a Poem with Advanced CSS Selectors。