Jane's Blog

被動政府

2009-08-10T12:48:00.009+08:00

一直不太認同台灣電視媒體"名嘴治國"的特殊現象, 連"司法正義"也要透過電視媒體伸張. 這次的莫拉克颱風災害才了解產生這種現象的原因- 正常管道的機能失調, 大家只好另闢管道, 求助電視媒體.

8/8日接近中午的某電視新聞台有屏東災區民眾打電話請求協助連絡救災, 因為從凌晨發出的求救電話到中午都沒看見有人來救災, 他們家的水已經淹到二樓.

沒多久, 各家新聞台陸續變成災害通報中心, 防災中心要不就是電話不通, 要不就是打通了也苦候多時仍不見有人來救災, 最後災民發現打給防災中心不如打給新聞台有效.

大約中午過後, 在各媒體不斷傳送災區畫面後, 才看見國軍宣稱上午就已經出動的人員到災區救災.
下午, 就看見國防部與地方政府互相指責的口水戰......

我們的政府是個"被動政府", 要發生問題了才檢討, 要電視媒體講了才做, 無怪乎這些電視媒體要站出來治國.

CSS3 初體驗

2009-08-09T01:23:00.008+08:00

最近 Firefox 3.5 的推出讓 "只聞樓梯響, 不見人下來" 的 CSS 3 有了眉目. 因為 Firefox 3.5 支援不少 CSS 3 屬性, 這一點比 IE 8 強一些.

IE8 標榜支援 Web Standard 和通過 Acid2 檢測 (註1.), 完全支援 CSS2.1 版本. 算是 IE 的一大步, 所以我們會發現 IE8 的 CSS 寬高顯示都與Firefox一致, 這是喜的部份; 憂的是 IE 6, 7, 8 版的顯示差異就足以讓設計師們手忙腳亂好一陣.

要特別一提的是目前瀏覽器支援的 CSS3 屬性尚未成為 W3C 的推薦標準, 未來仍有被取消的可能性, 所以瀏覽器制定了各自的專有屬性, 要與標準屬性做區分. 這些專有屬性並無法通過 W3C 的 CSS 驗證, 不在意驗證的使用者可以當作實驗或學習先使用.

瀏覽器專有屬性置於 selector (選擇器) 之前, 例如: -moz-border-radius-topleft: 20px;

各瀏覽器的專有屬性標示法如下:

Safari: -webkit-
Firefox: -moz-
Konqueror: -khtml-
Opera: -o-
IE: -ms- ( IE 只有 IE8 支援 -ms- )

CSS3 新增很多 selector (選擇器) 和 property (屬性), 建議讀者先安裝好 Firefox 3.5 版瀏覽器, 其他 IE8, Opera, Safari 等視個人需求決定是否安裝. 接下來的 CSS 單元中將陸續介紹新版瀏覽器已經支援 CSS3 的部份, 敬請期待!

註1. Acid2 是檢驗瀏覽器對 Web Standard 的 HTML、CSS 2.0、PNG 圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Firefox 3 以上版本, Opera Mobile 行動裝置版, IE 8 和 Chrome) , 未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.

台灣的電視新聞台

2009-05-31T23:36:00.012+08:00

台灣地小人稠, 但是全天播報的有線電視新聞台相當多: 包括年代新聞,東森新聞, 中天新聞, 三立新聞, 民視新聞, TVBS, TVBS-N, ET today, 非凡新聞. 除了ET today與非凡新聞台以財經生活新聞為主題外, 其他新聞台的播報內容相似度很高, 所以, 觀眾常會看到相同的新聞在每個新聞頻道的每個小時不斷地重複播放.

如果有個受矚目和具爭議性的話題出現時, 各家新聞台便持續好幾天甚至好幾週播報. 不管哪個時段的哪個新聞台, 打開電視看到的畫面都一樣. 最近令大家印象深刻的是"紅杉軍倒扁事件"及"扁政府貪腐弊案追查事件", 除了持續的新聞報導之外. 播報完畢之後還邀請名嘴繼續評論分析. 但是最讓人難以理解的是有ㄧ段時間, 各家新聞台一直追著陳幸妤向全國觀眾播放她被記者們激怒的畫面. 陳幸妤何辜要讓人家這樣追著滿街跑? 觀眾何辜要被迫看這些畫面?

台灣媒體也普遍有"報壞不報好"的傾向, 偷搶拐騙殺人放火的負面消息播的多; 反之, 溫馨關懷教化人心的正面消息播的少, 似乎正面消息比較難獲得新聞媒體的青睞.

新聞人員的角色其實類似老師在幫學生上課, 學生無法指定老師們要用怎樣的方式教學, 大多數學生也分不清楚什麼是好的或者不好, 但令人害怕的是學生們囫圇吞棗的全盤接受這些扭曲現象. 多數民眾不是專業的新聞人員, 無法指出哪些應該播放或者不應該播放, 但是身為專業的新聞人員們應該知道, 就算一定要播, 也要知道"適可而止", 不能以收視率為最終的依據與標準.

台灣實在夠小, 沒太多新聞可追. 但是既然台灣小, 為何不多去報導世界各國的新聞? 要讓台灣觀眾的視野在大多數時間, 隨著這些記者盯著一塊土地上的芝麻綠豆大事件打轉?

但是也不能一竿子打翻一條船, 還是有特定時段的新聞相當用心的策劃專題, 例如每週六日晚上10點的"文茜世界週報", 除了摘錄各國重點新聞之外, 也有屬於政治經濟, 環保能源, 都市發展, 文化創意等新聞. 像近期的歐巴馬的政策, 克魯曼的評論, 替代能源議題, 中國的擴大內需與家電下鄉政策, 重慶與廣西西寧港口的都市發展策略, 佛朗明哥舞, 高雄世運主場館介紹, 苗栗桐花景點等發現台灣動人故事系列報導.

另外, 非凡新聞除了財經與美食新聞之外, 也在假日做台灣本土產業介紹, 例如有機農業, 農場民宿, 養殖漁業等. 也讓大家了解台灣有哪些角落其實也在綻放美麗的花朵. TVBS周日晚上的"101高峰會"也不錯, 每週會邀請一位知名人士做專訪, 了解他們的人生經驗與觀點, 也可以從一對一的互動當中看雙方如何發問與如何回答問題.

也許各新聞台還有不錯的專題報導是我不知道的, 但是像這樣可以擴展視野和教化人心的新聞是很值得鼓勵的, 也應該獲得更多播出的機會. 前陣子聽見不少人這樣抱怨: 每天打開電視新聞看見的都是阿扁, 簡直是疲勞轟炸, 台灣沒別的新聞了嗎? 希望我們的新聞人員能幫社會大眾審慎的過濾安排新聞內容, 以及調整適可而止的播放頻率, 好好將台灣電視新聞媒體的專業度展現出來.

倫敦聖保羅大教堂與南方之Brighton-下集

2009-04-26T23:38:00.016+08:00

<< 承接上集

離開 PaPa House, 我們搭倫敦地鐵到聖保羅大教堂 (St.Paul's Cathedral), 這教堂位在泰晤士河邊, 是僅次於羅馬聖彼得大教堂的大圓頂教堂. 最早建立於西元七世紀, 後來經歷多次的毀壞與重建，目前的教堂是 17 世紀一場大火之後, 由英國著名建築師雷恩爵士 (Sir Christopher Wren) 花 45 年的時間重新設計完成的.

整座教堂的造型莊重, 氣勢宏偉, 正門是 6 對圓形石柱排列組成的走廊, 圓柱上方是聖保羅雕像. 內部有寬廣挑高的中殿, 四周是華麗的彩繪玻璃與壁畫, 站在中殿仰望圓頂, 可隱約看見在圓頂上方行走環繞的人. 那是聖保羅教堂的耳語廊 (Whispering Gallery), 聽說在耳語廊說話能產生回音效果, 從教堂側邊爬數百層階梯後可到達圓頂上方.

這一天的主要行程就是這座教堂, 時間還早, 我們決定挑戰這些階梯, 到圓頂上方參觀. 從一樓到圓頂的階梯分成好幾段, 先是像一般樓梯間一樣寬的階梯, 後來變成較窄的階梯, 漸漸到上層就變成只容一人行走的迴旋階梯. 忘了到底爬多久, 中途就已經汗流浹背, 腳步也越來越沉重. 但是我們並沒有休息, 只是放慢腳步繼續往上爬, 最後終於到達耳語廊. 這是圓頂的底部, 順著周圍牆壁繞一圈的空中走廊. 靠牆的一側有木製椅子讓遊客坐下來休息, 幾位僧侶也坐在這兒低語. 另一側是欄杆, 往下眺望是一樓中殿, 有人在那兒走動, 如同我們方才也在那兒仰望一般. 在這說話的回音很大, 必須輕聲. 一旁有個通往圓頂頂端的小門, 我們歇息夠了就繼續往上走.

往頂樓的階梯更窄小, 每隔一段距離有個方形小窗, 從這小窗往外可以看見遠方的倫敦市景. 感覺到這階梯是貼著圓頂的牆面不斷向上環繞, 最後來到一座幾乎垂直的鐵製螺旋形階梯, 這階梯有幾層樓高, 爬得越高, 站在階梯上往下看的感覺更恐怖, 越爬就越害怕, 一度後悔為何來爬這個階梯. 眼前是沒法往後退的, 只能不斷向上爬. 現在如果要我再去爬一次, 我肯定是不願意的.

儘管充滿恐懼, 腳步還是沒停止過, 終於還是度過最艱難的一段, 到達圓頂頂端. 頂端外面有一圈以水泥圍著的護欄, 很像高樓的陽台, 順著圓頂繞一圈正好可以看見 360 度的倫敦市景, 相信這裡是眺望倫敦的最佳位置, 風景最好的是正對泰晤士河那一面的風景, 可以看見在上遊的倫敦眼, 下游的倫敦塔, 以及在河面上行走的船隻. 上回我們搭輪船從倫敦眼到倫敦塔大約 30 分鐘時間, 兩點有段距離. 但站在這高處看兩地的距離, 似乎只有咫尺. 我們在這兒拍幾張照片, 也停留好一會兒, 等汗水與疲累都讓微風吹走了才決定離開.

離開教堂時已是中午時分, 我們打算到中國城去吃好久沒吃到的叉燒包, 再順便到附近中國商店帶些中式食材回去. 教堂旁邊有個地鐵站, 搭地鐵穿梭於倫敦市區是最方便省錢也最不會迷路的方式. 倫敦地鐵有好幾十年歷史了, 車廂多半老舊, 車窗是可以打開讓狂風竄進來吹亂頭髮的那種, 如果有人開窗, 車子行進的聲音也會很吵雜. 地鐵的班次很密集, 約 3 分鐘ㄧ班, 我們很快就上車前往中國城, 途中大概要經過 2 個站. 這班次的人很多, 已經沒有座位, 我們 3 人就在車廂後方找個空間扶著鐵桿站立著.

就在抵達中國城的前一站, 車子開始有 "框啷框啷" 的機器怪聲, 很快的車廂搖晃然後上下跳動越來越劇烈, 我們就站在後方的車門附近, 眼見車窗玻璃碎裂, 門也掀開和外面隧道牆壁摩擦, 不久門就離開車體飛走了. 車內開始煙霧瀰漫, 旅客們早已驚叫連連, 天哪! 一時間很難反應這是什麼情況, 我們三人立即蹲下不敢置信的看著這一切發生, 但我知道應該有事故發生了, 我本能的一手抓緊鐵桿, 一手護著頭心中開始納喊我的 "觀世音菩薩", 但沒呼叫幾聲, 車子就慢慢停下來, 可能大家都嚇傻了, 一時間變得安靜了, 突然有個男士大喊 "Calm down!" , 大家就靜靜停在原地不動, 用驚恐的眼神彼此對望.

但如果要動也是不可能的, 因為這地鐵隧道非常窄小, 根本只能容下車廂行進的空間, 旅客不可能走到車廂外面. 這列車有十幾節, 每個車廂前後都有門, 但需要站務人員拿鑰匙才能開啟, 所以我們真的只能靜靜等待. 可是煙霧越來越多, 雖然還不至於嗆, 也很害怕是哪邊起火燃燒, 而我們又逃脫無門那可真慘了. 我們先找到面紙和衣物捂住口鼻, 等了大約 3~5 分鐘, 看見有人來開門要我們依序往前面車廂走過去, 大夥兒這時才真的鬆了一口氣.

走道四處都是玻璃碎片, 車窗很多是扭曲的, 車門也都不見了. 前面一節車廂的燈是不亮的, 那應該會感覺更恐怖吧, 至少我們那一節車廂從頭到尾, 燈都還亮著. 穿越幾節車廂後, 前方就看見大片的光亮, 才發現這車子其實已經到站, 只有後面幾節還在隧道內, 我們快步的走出月台, 但我能明顯感覺到兩條腿還在不停顫抖著, 真的是嚇到腿軟, 心裡的高度恐懼還沒消除. 有幾位女士可能太驚恐了, 必須有人攙扶著走, 而且邊走邊哭, 但是大多數人都是非常冷靜的快步離開. 地鐵站外面早已站滿了警察和消防車, 地鐵也已經迅速封鎖.

我們並未受傷, 只是滿臉的污煙和沾了一層灰的衣服不知該如何處理, 大家很敏感的猜測是否為恐怖攻擊, 路邊有人寫著 TERROR 的牌子, 我們也直覺認為應該是恐怖攻擊. 但不管什麼原因, 我們不想再停留原地, 只隨著人群順著大馬路走著, 先遠離地鐵站再說. 後來我們看見一家麥當勞, 就趕緊進去洗手間洗個臉, 對著鏡子時才發現那煙霧真的很濃厚, 我們的頭髮都變一條條快梳不開了, 衣服還好穿的是深色的, 髒污不是很明顯, 清理好一陣子, 才走出麥當勞.

經過一番折騰, 肚子還是餓的, 我們決定繼續前往中國城尋找叉燒包. 是的! 還是要填飽肚子才有力氣走下去. 這兒距離中國城已經不遠, 地鐵沒了我們就用走的過去. 我們在中國城沒有停留太久, 吃完包子就轉往火車站, 還是選擇搭另一線的地鐵到火車站, Burberry工廠也取消不去了, 大家只想趕快回去梳洗一番.

我也覺得不可思議, 地鐵班次那樣密集, 偏偏會遇到這個班次. 晚上到 BBC 網站看新聞報導, 才確定那不是恐怖攻擊, 而是機器故障導致後面三節車廂出軌 (我們就坐在倒數第二節), 那些煙霧其實是車廂摩擦隧道牆壁和月台水泥產生的, 難怪有那麼厚重的石灰塵, 但也有人因為吸入過多灰塵而送醫的. 那一天 (2003年1月25日) 的 BBC 新聞報導還找得到 Thirty hurt after Tube crash.

隔幾天上課, 已經有很多人知道我們三人搭上那班事故列車的事, 雖然歷經一番驚恐, 但總算人都平安. 我的另二位同伴當晚就打電話回去大說特說, 但我ㄧ直沒告訴家裡的人這件事情, 是怕我媽太緊張, 她是很容易緊張的人, 既然沒事就不要製造緊張了. 有朋友問我經歷這件事有什麼感想? 我說繼續尋找叉燒包阿! 既然都沒事, 當然可以很快回復原來的生活, 走原來的路. 但如果有事呢? 那我一定會覺得很對不起我爸媽, 當初要到英國求學他們是持反對意見的, 因為一個女孩子要到那麼遙遠又人生地不熟的地方是很令他們放不下心的, 是我ㄧ直堅持才讓我來的.

學業結束後, 也就是要回台灣的前一週 (8月底), 為了看知名的舞台劇 "歌劇魅影", 我和另一位台灣同學又到倫敦一趟, 那是周末下午的檔期, 我們當天來回. 那次要再搭地鐵心裡就很毛, 尤其又聽見地鐵車窗 "框啷框啷" 的聲響, 驚恐就開始了, 從腳底麻到了心底. 果真這地鐵是在回應我的恐懼嗎? 車子離站不久竟然漸漸停在半路不動, 然後列車長從前門進來說是機械故障, 於是我們又從前面車廂走到後面車廂回到原來月台下車. 我同學說可能是我 "帶賽" , 不然怎會都讓我遇到? 還好這次是車子啟動沒多久就停了, 少了恐怖的過程. 但我也很無奈好嗎? 為何都讓我給碰上! 不過我反正也要回台灣了, 從此要和恐怖的倫敦地鐵說 Byebye!

倫敦聖保羅大教堂與南方之Brighton-上集

2009-03-29T22:25:00.004+08:00

這一趟到倫敦大約是元月底, 學校第一學期結束第二學期尚未開始的空檔. 英國冬天相當濕冷, 平均氣溫攝氏 3~5 度, 白天日照時間又短, 早上8點才天亮, 下午4點太陽就下山. 所以人們不太喜歡在這個時間出去遊玩. 不過要學生乖乖待在校區, 哪兒都不去也不太可能.

我們有3個人決定找個地方走一走, 在歷次的旅遊中, 這是人數最少的一次, 因為很多學生已經回台灣過農曆年. 這兒四處天寒地凍的, 只能選擇往更南方去. 我們規劃二天一夜行程, 倫敦的重要景點都已經去過, 剩下聖保羅大教堂 (St.Paul's Cathedral) 是可以參觀的地方. 但還需要在附近尋找其他景點, 最後我們找到 Brighton 這地方, 是英國南方的港口城市, 這裡有座東方味十足的宮殿-The Royal Pavilion, 從倫敦坐火車過去約1小時, 於是決定到這個地方看看.

第一天中午以前我們就到達 Brighton, 這是個小城市, 從市中心到宮殿或者到港口碼頭的距離都不是很遠, 我們先去參觀宮殿. 這宮殿和我們以前看過的城堡風格迴異. 裡面有花園造景, 但因為是冬天, 花草多半呈乾枯狀, 想像在夏天應該是很美的. 但宮殿裡面可就不分季節, 一樣的色彩鮮豔, 富麗堂皇. 從宮殿的名稱 The Royal Pavilion 可以知道是皇家宴會廳. 18世紀英王喬治四世興建用來舉辦豪華宴會的場所, 這宮殿外觀有著印度風格的尖型圓頂, 裡面卻融合印度與中國元素, 例如宴會廳的天花板有龍造型的立體裝飾, 角落有中國式的陶瓷藝術, 窗簾地毯則又是印度的色彩紋路.

剛到學校上課, 老師拿一張圖案設計照片問我們是那一國的圖樣? 中國學生一眼就能分辨是日本和服上的裝飾紋路, 老師好奇問我們是如何分辨的, 因為他覺得中國和日本的圖紋是差不多的, 很難區分. 所以, 對西方人來說, 如果這宮殿融合各 "東方" 國的元素也是可以理解的, 不是純粹中國式, 也不是純粹的印度風.

國王舉辦大型宴會, 除了興建豪華氣派的宴會廳, 展覽畫作的藝廊和幾間小型會客室外, 當然還需要一個超大型廚房不停的供應美味大餐. 這宮殿的廚房裝飾簡單, 但是空間十分寬廣, 中央是一張長方形工作台, 周圍的爐子和廚具還完整保留著. 由於宮殿內禁止攝影, 它的富麗堂皇很難用言語形容, 有興趣的人可以到 The Royal Pavilion 官方網站參觀便知這宮殿不簡單, 其中最特別的也是大型廚房 360度虛擬實境介紹.

從宮殿出來, 我們就朝海邊的方向走去, 那裡有個碼頭-Brighton Pier, 據說夏天附近沙灘上總擠滿曬日光浴的人潮. 碼頭對面有個水族館-Sea Life Centre, 也是我們要參觀的地方. 前往的途中經過一個稱為巷道區 (The Lans) 的市集, 在縱橫交錯的巷弄內販賣各種器皿, 飾品, 手工香皂和飲食的商店, 我們邊走邊逛, 也順便在這裡吃午餐. 雖說是寒冷的冬季, 這市集也聚集了不少人.

水族館展示各種海洋生物, 例如水母, 珊瑚, 海星, 鯊魚, 烏龜和各種不知名的大小魚類. 其中比較令我們好奇的是海馬, 這海馬體型很小, 是黑色的, 和我們所認知的較大型白色海馬不同. 但是這水族館並沒有太多吸引我們的地方, 覺得它應該比較適合小學生的戶外教學, 若要和墾丁的海洋館相比, 恐怕遜色多了. 離開水族館我們就往碼頭的方向走去.

Brighton Pier 是一個由沙灘向海中央延伸的木造碼頭, 上面有隔成一間間的遊樂場和賣熱狗咖啡的速食商店, 這時節的遊樂場和商店都停止營業, 倒是有ㄧ家速食店還開著門等待稀少的遊客上門. 攝氏 5 度以下的碼頭是沒法停留太久的, 但是既然來了我們就上去繞一圈, 然後趕緊下來. 因為天色漸暗, 空氣也越來越冷冽. 英國的冬天真的不適合到戶外遊玩.

我們匆匆結束 Brighton 的行程, 搭火車趕回倫敦一家民宿過夜. 回到倫敦時天色已晚, 我們經過大笨鐘附近看到夜色中的倫敦眼 (London Eye), 幾次來倫敦都是白天, 夜晚燈火通明的倫敦市區街景還是第一次看見. 也忍不住多駐足一會兒.

我們住在ㄧ家名為 PaPa House 的 B&B, 是一位七十幾歲在義大利出生的老爺爺 PaPa 經營的. 他年輕時就來到英國, 身邊並無其他親人, 這房子是他唯一的財產, 平日靠出租幾個房間給遊客維生. 這房子位置偏僻, 沒有明顯招牌, 但收費比一般民宿少一半 (含早餐每人每晚才收12英鎊). 來這兒住宿的多半是透過中港台三地的學生口耳相傳介紹來的.

PaPa 雖然是個子瘦小的老爺爺, 但身體還算硬朗, 晚上他喜歡待在廚房和房客們邊看電視邊聊天, 房客要藉用廚房煮宵夜的話都可以自由使用, 他也會提醒房客浴室的洗髮精, 沐浴乳, 甚至隱形眼鏡藥水都可以盡量使用, 因為那些都是學生們留下來的. 果真浴室一堆瓶瓶罐罐很多是台灣常見的牌子.

冬天的房客不多, 只有我們三位喜歡煮泡麵的台灣學生和他在廚房聊天, 他說夏天住宿的學生多時, 他還會讓出自己住的房間給學生, 跑去住樓梯間的儲藏室. 我們好奇的到和廁所一樣小的儲藏室看了看, 很懷疑他是怎麼睡進去的. 我們和 PaPa 聊的相當愉快, 隔天早上要離開時他還少收我們每個人一英鎊, 他說很喜歡我們幾個學生, 所以少收一點.

這一天上午的行程是聖保羅大教堂, 然後預計到中國城去尋找我們很想念的叉燒包. 如果時間充裕, 會再到 Burberry 工廠看看, 聽說是在倫敦某處, 我們其中一位同學已打聽到位置, 會視剩餘的時間決定是否過去看.

接下集 >>

談系統介面設計

2009-02-08T23:49:00.011+08:00

Window Vista 的使用性與支援性不佳, 上市後願意升級使用的人不如預期. 系統使用性的好與壞牽涉到使用意願, 學習成本和訓練成本.

如果只考慮設計面, 做出具有美感的網頁是設計師最愉快的事情, 但是要考慮與功能搭配, 清楚傳遞訊息和符合產品形象的話, 就需要花心思做功課. 以系統介面設計來看: 要先了解使用的對象是誰, 知道建置的目的與功能架構, 才能設計與系統特性吻合的介面.

在分工比較細的公司裡, 系統開發人員包含系統規劃, 使用性測試, 視覺設計和程式設計. 工作流程應該是一個循環: 系統需求-系統雛形-使用性測試-圖形介面設計-使用性測試-程式設計-使用性測試. 而這循環也有順序, 先按照系統需求做雛形UI (User Interface), 再針對雛型的流程頁面做使用性測試 (Usability Test), 如果發現問題就回去修改雛形, 修改完整之後交付視覺設計做圖形介面GUI (Graphic User Interface), 然後再做一次使用性測試, 確認圖形介面設計完善, 最後再交工程師套程式完成系統, 然後再做一次使用性測試, 確認完成的系統設計無誤. 這個流程顛倒的話將造成必須從最後面回到最前面, 難度更高也更耗費時間的修改成本.

使用性人員的角色是尷尬的, 它可以是一個專門的角色, 也可以由系統分析師或視覺設計師兼任, 當缺乏專門的角色時, 系統分析師和視覺設計師都有責任扮演這個角色. 系統分析師主導的是屬於功能層面, 要將功能需求轉化成系統雛形; 而視覺設計師負責視覺層面, 將系統雛形轉化成更容易被使用者接受的圖形介面; 二者要能向下和向上延伸, 共同完成使用性的需求.

一般來說, 使用性原則只對通則做規範, 例如: 易懂易學的介面, 適度的容錯性, 適時的訊息提示…等原則, 很難具體指出哪個頁面一定有哪些功能, 哪些欄位應該配置怎樣的順序和訊息. 系統的需求不同, 功能架構和動線流程就不同, 無法期待在不同的系統都套用同一種規則設計. 這就好比廚師做菜, 無法只用一種食譜做出各式各樣色香味俱全的菜色.

怎樣的設計是好的使用性設計? 符合使用者需求的設計就是好的設計, 但是了解使用者需求不會是坐在辦公室裡冥想出來的, 需要實際調查與測試才能得到答案. 知道設計通則和擁有豐富經驗還不夠, 因為每個系統各有不同的建置需求和使用目的, 開發團隊在ㄧ開始就應該探討使用的需求和目的, 過程中不斷地做測試改善, 才能設計出符合需求的系統.

做使用性測試可先從內部尋找幾個非開發人員對系統雛型做測試, 在ㄧ旁觀察他們的使用情況及遇到的問題, 針對這些狀況做記錄並改善系統設計, 當然, 能夠直接找到真正的目標使用者做測試是最好不過, 但是初期先由內部找幾個人測試也往往能發現很多問題. 這種在每個流程中不斷修正的方式, 應當可以避免很多系統上線後才發現的問題, 也不會因為修改成本太高, 無法做過多調整, 導致難以挽救的情況.

淡水‧漁人碼頭

2008-12-21T23:08:00.013+08:00

趁著年假, 到淡水漁人碼頭走走. 去看我一直無緣見到的淡水夕陽.

很久以前, 有段時間往來於淡水與台北之間, 那是高中畢業第一年, 我考上淡江大學夜間部國貿系. 原本對念夜間部就沒有意願, 希望重考. 但是我的表姐說時間寶貴, 勸我不要浪費一年時間, 既然考上了就去讀看看. 十八歲的我很多事情似懂非懂, 也不清楚怎麼做才是對的, 所以就聽從建議先去"看看".

但那真的不是我期待的大學生活, 可能小說看太多, 主觀的認為大學生活應該像"未央歌"的情景: 可以和一群志同道合的同學白天上課, 其餘時間就去參加社團活動和談天說夢. 可是夜間部的學生都是白天工作, 晚上上課, 來去匆匆, 根本不是我想像的樣子.

那一週我暫住在台北姑媽家, 白天無所事事, 傍晚4點就出門坐1小時公車到淡水 (那時候還沒有捷運), 這才有機會遇見"我的同學", 晚上10點整下課, 回到姑媽家是11:30, 洗個澡就準備睡了. 這樣無聊的過了一週, 沒有機會到淡水河邊觀賞日落, 只有偶而從淡大的斜坡或階梯上回頭遠望紅通通的夕陽. 那個週末, 我回家告訴爸媽我不想唸了, 決定重考. 試讀一週的結果是更堅定我要重考的決心.

我在想: 快一年或慢一年又怎麼樣? 需要為了節省一年時間放棄美好的大學夢想嗎? 也不明白為什麼要趕著畢業, 趕著到社會上工作? 後來我大概明白表姐的想法, 她從小家境清苦, 半工半讀的唸完夜間部, 認為應該趕緊畢業找工作賺錢. 我很敬佩她這麼早就靠自己的力量一邊工作一邊唸書. 但是我並沒有這樣的動機需要趕緊工作. 我很感謝我的父母不用我擔心家裡的經濟和學費, 雖然不富裕, 也還能讓我去追求想要過的大學生活, 這可能是不同的成長環境造就出來不同的思維.

我也曾想如果當時繼續留在淡江唸書, 不知道會是怎樣的人生? 這就是我年輕時與淡水淺薄的淵源.

後來再去淡水幾次, 很不巧每次天氣都不太好, 明明是晴朗的好日子, 到傍晚雲層就變厚了, 遮住太陽, 一直無緣見到太陽從海平面落下的景色. 之後有很長一段時間沒再去淡水, 只有在報紙上看見淡水河整治成功和新建漁人碼頭的消息.

聽說漁人碼頭的景色很美, 常在網路上看見情人橋夜景的照片, 所以ㄧ直計劃著要再去看看, 但最重要的是要挑一個好天氣, 而且是沒有人潮的平常日去. 我不喜歡在人擠人的假日到風景遊樂區, 會讓我的興致因為擠滿的人潮消失殆盡.

這天下午艷陽高照, 雖然是冬天, 氣溫卻很暖和, 我搭捷運到淡水再轉紅26的公車到漁人碼頭, 終於如願以償的看見沒有雲層遮住的淡水夕陽. 再過幾天是冬至, 太陽下山時間大約是下午5:00, 我4:40到, 太陽離海平面還有ㄧ段距離, 我先四處拍照, 然後坐在碼頭邊靜靜等待太陽由紅變淡, 然後西沉, 最後消失在海平面. 整個過程只有短短10分鐘, 我邊欣賞邊拿起相機拍照.

雖然是平常日, 在這裡看夕陽的人仍舊不少, 想必假日應該是人山人海了. 太陽下山後, 四周的燈火開始亮起來, 整個碼頭可以說是越夜越美麗, 但是氣溫也同時間迅速下降, 開始有了涼意, 原來的和風也變成陣陣寒風. 慢慢地人潮散去了, 碼頭邊的露天咖啡座空無一人. 想像如果是夏天, 應該有很多人會留下來繼續喝酒聊天到深夜吧!

我刻意留下來看這裡的夜景, 等著天色暗下來, 情人橋上的燈光亮起, 再拿起相機拍照. 過幾天就是耶誕節, 很多商店門口裝飾應景的耶誕樹和氣球, 其中有個發亮的紅底藍色大氣球, 裡面是耶穌在馬廄誕生的故事情景, 除了裝飾美麗的燈光,氣球上方還飄著紛飛的雪花, 很特別的耶誕氣球. 在其他的店門口, 還有拉雪橇的聖誕老公公和騎摩拖車的聖誕老公公大氣球, 長相造型都很可愛.

天色暗的很快, 我在碼頭拍完照, 從橋的這一頭回到另一頭, 天空就由昏暗變成黑暗. 時間才5:40分, 也好, 這樣我回到家裡還很早! 如果是夏天恐怕要等到6:00以後才能看到夕陽.

回程的捷運上, 我欣賞著所拍的照片, 很心滿意足終於看到一直想看的夕陽. 漁人碼頭真是不錯的地方, 如果不是寒風陣陣的話, 會想留下來喝杯咖啡. 建議大家找個晴朗好天氣去走一走, 當然, 非假日會更好!

倫敦西敏寺, 白金漢宮與海德公園

2008-12-20T01:58:00.040+08:00

西敏寺 (Westminster Abbey) 位於倫敦市中心, 從大笨鐘繞過國會大廈就能看見，是一座哥德式建築的教堂，也是英國歷代君王加冕儀式與婚喪喜慶舉行的地點。很多王室成員長眠在此, 還有幾位歷史人物的墓碑也設立在教堂內。例如我們比較熟知的喬叟, 達爾文, 狄更斯, 牛頓等. 但威廉. 莎士比亞只是紀念塑像, 實際上他是安葬在家鄉 -莎士比亞故居. 繞過中殿, 後方是隔出很多開放小空間, 停放歷代君主棺槨的區域, 牆上分別寫著西元幾年哪一世的國王或女王, 這些雕工細緻的棺槨就這麼停放了好幾世紀.

在英國參觀過不少大教堂, 除了西敏寺, 還有約克大教堂 (去愛丁堡的回程特地繞過去參觀, 在英國中部地區York), 愛丁堡城堡裡的教堂, 巴斯大教堂, 劍橋的國王禮拜堂及倫敦的聖保羅大教堂. 每座教堂各有特色, 也都相當華美, 但西敏寺與英國皇室的淵源較深, 比其他教堂相對知名.

第一次到西敏寺因為時程趕, 只在門口繞一下, 第二次才進去參觀. 這是一座長十字形狀的教堂，正門兩邊是高聳對稱的方形塔柱, 外牆是人物及動物造型的立體浮雕. 走進裡面中央正殿, 可以發現天花板比一般教堂高, 陽光從四周大片彩繪玻璃窗穿透進來, 予人一種神聖光明的感覺。更前方是英王的加冕寶座, 上次伊莉莎白女王登基就是坐在這張椅子上, 時間是1953年. 可以想像住在白金漢宮這位受英國人民愛戴的老奶奶, 在半世紀之前曾經是位年輕女子, 身穿錦衣, 頭戴皇冠, 手拿權仗, 在這裡舉行加冕儀式登基為王.

大家還有印象的話, 1997年全球民眾看電視轉播黛安娜王妃的喪禮也是在這裡舉行的. 記得當時的新聞報導, 王室一度討論是否要以王妃的名義為黛安娜舉辦喪禮, 因為她和查爾斯王子之前已經離婚. 但是在英國人民的心目中, 黛安娜是他們永遠的王妃, 王室最終還是顧慮了民眾的期待.

人們對英國皇室成員的生活總是充滿好奇, 當年查爾斯王子與黛安娜王妃的那場世紀婚禮曾吸引全球民眾的目光, 她戲劇性的一生也留給後人諸多的猜測與惋惜!

白金漢宮我也去了二次, 第一次是和幾位同學去, 我們在飾有皇室徽章的鐵門前徘徊, 據說如果宮殿上方懸掛皇室的旗幟, 就表示女王正在宮中；如果懸掛英國國旗, 就表示女王不在宮中, 這一天看起來是在宮中的. 禁衛軍交接儀式也是很多觀光客注目的焦點, 不過我們錯過了儀式時間, 只能往門內瞧一瞧衛兵的裝扮與英姿.

門外是維多利亞女王鍍金雕像和噴水池, 我們坐在池邊階梯看著熙來攘往的路人與遊客. 宮庭正前方是連接到特拉法加廣場 (Trafalgar Square) 的林蔭大道 (The Mall), 道路兩旁種滿蒼鬱的林木, 穿插紅藍相間的英國國旗直到盡頭, 顯示皇家的氣派威儀. 印象中女王乘坐馬車向民眾揮手致意的大道應該就是這一條. 大道左側是 Green Park, 裡面是平整的草皮, 高大的樹林與長椅, 市民可以在長椅或草坪上休息閒逛.

進到白金漢宮參觀是開學後學校舉辦的新生訓練活動, 所有新生都可以免費報名參加. 我們一早搭乘巴士從學校出發, 到倫敦大約是中午時分, 車子停在海德公園外側, 我們要穿越公園走到白金漢宮. 因為參加的人數眾多 (有好幾輛巴士), 怕集合時間有延誤, 所以下午4點就要回到車上. 時程有些緊迫, 我們行走的速度相當快, 但也花了整整30分鐘才越過這座廣大的公園. 由於這回是跟著團體走, 沒有事先研究路線方向, 所以我們在這偌大的公園來回穿梭, 最後竟也弄不清楚到底是從哪一邊進來, 哪一邊出去的.

Green Park 是林蔭大道旁一座比較小的公園, 海德公園則是在白金漢宮西側, 順著前方的 Green Park 綿延到更後方的肯辛頓公園, 三座公園加起來的面積廣大, 如果要環繞一圈恐怕需要一整天時間. 猜測我們穿越海德公園的路線大概是從公園的北側往南走. 途中所見除了林木與草皮, 也有像凱旋門的拱門, 小橋流水以及露天樂隊表演. 從橋上隔著水面向對岸望去, 是一座白色尖塔圓柱型美麗宮殿, 很像童話故事中城堡的造型, 我們只能這麼遠遠望著, 沒法過去參觀. 它並非白金漢宮, 回來查了許久, 猜應該是稱為 Whitehall 的古建築. 之後又繞到白金漢宮後方, 也是隔著湖泊眺望, 景色十分美麗.

白金漢宮開放部分區域給民眾參觀, 例如宴會廳, 會客室, 展覽室, 長廊階梯等, 這部分區域也相當廣, 據說皇室是為了籌措重建溫莎城堡的資金而開放參觀 (溫莎城堡在1992年因為一場大火燒毀, 現在已經修整完畢, 重新開放參觀). 白金漢宮是1703年由白金漢公爵建造, 經過多次擴建才成為現在的規模, 外觀是石灰石建造的長方形白色建築. 裡頭的裝潢以大理石為主, 大片的落地窗裝飾以豔麗的窗簾, 地毯, 畫像與家具, 相當華貴. 有很多城堡雖然也裝飾華麗, 但窗簾或椅子經常是退了色的灰白狀.

參觀完畢距離集合的時間還早, 我們就到出口處的紀念品區, 裡頭賣的是印有女王頭像或英國國旗的器皿, 衣飾, 文具和食品, 部分杯盤組的質地和設計相當精緻, 是晶透細薄的骨瓷, 看了非常喜愛, 但是價格也相對昂貴. 最後我買了一對刻有英國國旗及皇室徽章的銀色湯匙, 一直擺在我的櫥櫃中, 沒拿出來使用過.

雖說儘量克制自己不要亂買東西, 也知道最後都是擺放在櫥櫃中的多, 鮮少拿出來玩賞, 但還是有忍不住的時候. 我買的紀念品多半以實用為主, 純觀賞的是少數, 偶而整理櫃子時翻看一下, 也總能真實想起當時的情景. 一趟旅行下來有好幾天, 但是之後能夠回想起來的部份一直呈現逐年遞減狀態, 除了照片, 這些小東西也能喚起記憶, 當然最有效的方式還是用文字寫下當時的心情. 這是我要撰寫這個單元的主因, 這些人生中美好的記憶, 要趁遺忘之前一一記錄下來.

高鐵出槌記

2008-11-23T23:48:00.019+08:00

本月6日這天搭高鐵上班, 坐隔壁的先生問我要搭到台北還是板橋? 我正在奇怪他的問題, 他說他從台中站上車, 車站的人告訴他今天台北高鐵站有狀況, 只能行駛到板橋. 我回答 "我是要搭到台北站, 也沒聽說這回事". 我想他心裡應該有點悶, 台中站的人在 "誆" 他嗎?

車子接近板橋站時, 突然廣播 "因為某些因素, 本車只能行駛到板橋, 到台北站的旅客請在板橋站轉乘其他交通工具, 造成不便…", 聽完廣播換我很悶了, 台中站上車的人都知道情況, 桃園站為什麼都沒說呢? 還讓我買了桃園到台北的來回票. 雖然單趟價差只有25元. 我不趕時間, 決定在出口處排隊等候退票.

依照過去搭台鐵的經驗, 退換票的速度很快, 一分鐘就可以辦理很多人, 何況我排在前面10個, 應該更快. 但事情並不如我的預期, 板橋站出口處只有一個站務人員, 這個人似乎沒遇見這麼多旅客要辦理退票的情況, 速度非常緩慢, 如果有人需要開立購票證明就更慢了. 我足足等了10分鐘才辦好退票, 很多排在後面的人因為趕著上班, 等不及先走了. 有人問改天再來辦退票可以嗎? 這名站務人員也許忙翻了沒聽見, 沒有回答!

對這樣的情況我感到很不高興, 如果桃園站可以事先告知乘客這樣的訊息就能減少很多人耗費時間在這兒排隊. 還有第一線工作的人員是不是應該訓練有素? 不然也要有人協助, 看這名站務人員低頭緩慢計算退票金額的樣子, 不知道是應該同情還是生氣, 這讓我想起台鐵退票窗口的 "阿伯", 一隻手按收據金額, 另一隻手找錢, 票價數字似乎早就烙印在他的腦子裡, 不管從哪個車站? 搭哪個車種? 補退多少錢? 找多少錢都是立即反應, 毫不遲疑. 就算排著長長的人龍, 只消十幾分鐘一個人就能全部搞定. 而且我相信台鐵的車站數目和車種票價比高鐵複雜多了, 高鐵站的慢實在沒理由.

高鐵工作人員多半是面帶微笑的年輕人, 平時覺得他們很有禮貌服務很好；不過在這種時刻, 有沒有笑容已經不重要, 我更希望他可以像台鐵那些面無表情的 "阿伯" 一樣, 趕快把退票辦理好. 高鐵和台鐵人員面對突發狀況的處理經驗的差別在這裡展現的很清楚.

但是沒想到高鐵這個 "狀況" 會持續這麼久 (後來新聞報導因為維修工程車擠軌, 造成高鐵台北到板橋站全天停駛). 下班時到台北站準備進月台, 赫然發現看版的燈號全部不亮, 工作人員說要轉搭其他交通工具到板橋站搭車, 但是我買的車票還有10分鐘就開車, 怎會來得及? 工作人員立即拿出一張台鐵車票給我, 讓我到旁邊月台搭火車先趕過去看看. 哦! 這個立即拿出一張免費車票不用再排隊買票的動作確實讓我錯愕的心情稍為緩解, 至少高鐵有採取實際的措施做補救.

但不管搭哪個車種, 台北到板橋大約10分鐘, 當然是趕不上. 我的高鐵車票是對號座的, 所以我想錯過這班車是不是要去換票才能搭下一班列車? 但是我又想這是高鐵的突發狀況, 也許會有變通的處理方式. 於是我去問服務台: 我買的對號座班車趕不上, 是否需要換車票 (其實我更想知道能不能不換車票就可以搭車) ? 服務人員說換票要到旁邊的購票櫃檯排隊等候辦理.

下個班次是30分鐘後, 排隊的人很多, 我選了一個隊伍排隊. 我焦躁的等了15分鐘, 但是這隊伍好像沒什麼在動, 櫃台換票的動作比早上的還慢, 連旁邊自動售票機也在大排長龍. 這天並非周末假日, 怎麼會這樣?

整個高鐵的售票和換票作業流程只有ㄧ個字形容: 慢! 不但人工作業慢, 連自動售票機也慢. 怎麼說慢呢? 以同樣現金購票不畫座位的自由座來比較, 台鐵的自動售票機是按鍵式的機器, 買一張票 (含投幣) 10秒鐘之內可以完成, 但是高鐵的液晶觸控螢幕從上一個步驟到下一個步驟, 似乎需要時間思考般反應遲緩, 買一張票要將近一分鐘. 人工售票的速度看起來更糟糕. 平常時間乘客不多, 沒有太深刻的感觸和差異, 但是遇到像這樣大排長龍的隊伍就差別很大了! 這代表如果你前面排了60個人, 你就得等60分鐘"以上". 我前面排的人數絕對超過60個. 非常質疑整個高鐵售票軟硬體系統的優點在哪裡? 除了外觀看起來比較新穎.

我想如果再排下去連下一班甚至下下一班都趕不上, 這種情況下為何還要求乘客換票呢? 於是我問在ㄧ旁走動的工作人員: 我趕不及錯過了上一班車, 我ㄧ定要換票才能搭下一班車嗎? 這位工作人員說如果您不介意沒有座位的話可以不用換票, 只需向站務人員說一聲從側邊閘門進入即可. 哈! 我當然不介意, 我只是要到桃園, 10分鐘就到了, 就算要站到台中也比站在這兒排隊好阿!

我不知道所有排隊的乘客是否都是要換票的? 也不知道他們是不是都希望有座位? 但是在當時也要廣播或宣傳一下: 不想換票不用座位的人可以直接去搭車? 尤其服務台的人員 (也許要怪我問得不夠明白), 我需要的不是隨便一個答案, 我要的是最佳解決方式, 至少應該先了解乘客的需求和目的再提出你認為最好的建議和回答吧! 天哪! 相信那一天對很多人來說是場災難. 回到桃園站, 不等乘客開口問, 站務人員在第一時間就說如果要退票, 一年內都可以辦理, 也就是說大家可以不用擠在這一天的這個時候排隊退票了!

高鐵是目前台灣新建的最快速的陸上運輸系統, 除了標榜運輸速度最快, 也期盼他們的人工和自動售票系統可以和運輸速度一樣是最快的; 服務人員和站務人員面對突發狀況, 處理問題的能力也要再做加強. 尤其回答問題應該先弄清楚乘客的目的再提出最好的建議, 不要隨便給一個很可能會浪費乘客時間的答案.

當幸福來敲門

2008-10-19T23:08:00.029+08:00

有一天, 我用遙控器搜尋電視節目, 正好看見某台播出外國牧師在佈道大會上鼓勵教友們要像 "當幸福來敲門" 這部影片裡, 父親和兒子說的話那樣, 對人生抱持著信心, 抱持著希望, 更重要的是別輕易讓人動搖你的信念, 扼殺你的夢想. 雖然我不是信奉基督教的人, 但是對牧師良好的口才和說話的內容留下深刻的印象.

最近HBO正在播出這部影片, 是真人真事改編的故事, 我看了2遍. 由威爾史密斯（Will Smith）和他的兒子一起演出. 故事的感人之處在於: 即使處於極度困難的生活壓力下, 也沒有改變一位父親對孩子的愛與保護之情. 故事的細節不多做描述, 但是牧師所引述的情節是: 一天清晨, 父子二人在住所的頂樓一起玩投籃遊戲, 父親知道兒子非常喜歡打籃球, 但卻告訴兒子籃球是不切實際的夢想. 聽見父親這麼說, 兒子收起籃球露出難過和失望的表情, 看在父親眼裡也覺得不忍. 然後父親又告訴兒子: 別讓別人告訴你你做不到, 即使是我也不行, 你有夢想就要去保護它, 別人因為自己做不到也告訴你你做不到. 你想追求什麼就去追求. (Don't let somebody tell you "you can't do some". That even me. You got a dream. You got to protect it. People can't do some themselves. They want to tell you "you can't do it". You want some. Go get it! )

父親用自己的能力和經驗衡量兒子的夢想, 所以告訴兒子他的夢想是無法實踐的. 正如同影片開始時, 這位父親告訴他的妻子想參加為期半年沒有薪水也不保證錄取的股票經紀人實習課程時, 他的妻子對他表示極度失望的態度一樣. 後來妻子受不了強大的經濟壓力離開他們父子. 但父親仍抱著希望和信念參加實習課程. 只是本來就艱困的生活要熬過這半年實在不容易, 包括讓房東趕出門去睡公車站, 睡地鐵站的公廁和流民庇護所等地方. 故事最後, 這父親終於完成實習也通過測驗成為一家銀行的正式職員 - 股票經紀人, 實現了他的妻子認為不可能的夢想.

人們或許出於善意以過來人的經驗勸告不要做不切實際的夢想, 但如同影片中的父親說的: "別人因為自己做不到, 也告訴你你做不到". 所以, 別讓這些負面的言論扼殺夢想, 知道困難而不放棄信念, 仍然穩步建構計畫和時間的人, 才有機會讓夢想真正實現. 在遇見困難時要想的是如何解決困難, 而不是讓困難阻擋通往夢想之路.

"當幸福來敲門" 是值得觀賞的好片, 告訴你追求夢想的路很艱辛, 但機會是留給不曾放棄夢想的人!

幫舊版IE升級到IE7或IE8的方式

2008-10-12T23:52:00.011+08:00

最近瀏覽器的爭戰越來越激烈, 6月有 Firefox 3 和 Opera 9.5 版的發佈, 9月有 Google Chrome Beta 版發佈, IE8 正式版要在11月發佈, 中文正式版大約晚2個月, 預計明年初發佈.

Netscape 在不久前才表示不再發佈更新版本的瀏覽器, 等於宣告Netscape 將走入歷史, 但是又出現一個全新的 Google Chrome. 以 Google 的用戶數來看, 也是不容忽視的瀏覽器. 想必 Goolge 要藉由開發自家瀏覽器做更多Web應用和服務.

網頁設計師過去一直為不同的瀏覽器修改畫面呈現的問題(因為各家瀏覽器的開發缺乏標準), 瀏覽器版本越多就越麻煩. 但是拜 W3C 之賜, 這幾年強力推行 Web Standard, 原來只有 Firefox 遵行, 現在 IE8 也標榜支援 Web Standard 和通過 Acid2 檢測. Acid2 是檢驗瀏覽器對 Web Standard 的HTML、CSS 2.0、PNG圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Opera Mobile 行動裝置版, Firefox 3, IE 8 和 Chrome , 所以未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.

但是如果還要顧慮 IE5 和 IE5.5 甚至 IE6 不怎麼完整的 CSS2 支援性, Dean Edwards 的 IE7.js Version 就很好用了, 藉由在 <head> 連結一支 js 檔將舊版 IE 轉變成 IE7 或 IE8 所支援的CSS2 selectors 的方法.

例如要將 IE5~6 升級到 IE7, 可在 <head> 加上以下的 code:
<!--[if lt IE 7] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-- >

例如要將 IE5~7 升級到 IE8, 可在加上以下的 code:
<!--[if lt IE 8] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-- >

也可將這支 js 下載回來使用 http://ie7-js.googlecode.com/svn/version/2.0(beta3)/

但是這支 js 檔到底為 IE5~6 加入哪些新東西呢? 以下CSS2的用法將會通通支援:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()

再加上支援 Doctype 標準模式 (Standard Mode) 和相容模式 (Quirks Mode) 的切換, 支援 fixed positioning (固定位置設定), min/max-width/height ( 最大最小寬度高度設定), 支援 PNG 透明圖檔等.

更完整支援內容請參考以下網址:
http://dean.edwards.name/IE7/
http://ie7-js.googlecode.com/svn/test/index.html

要幫 IE5, IE5.5 和 IE6 升級到 IE7 或 IE8 版本, 這方法一定要試一試!

倫敦中國城, Coven Garden和大英博物館

2008-10-12T21:57:00.012+08:00

倫敦的中國城在 Leicester Square 附近, 很多來自不同地方的中國人聚集在此. 從街道口的牌樓, 到擠滿中國人的料理食材商店及一家一家的中式港式餐館來看, 應該是中國味十足的, 但是以我這台灣人的角度看, 這是大陸和香港人的中國城, 並非台灣人所熟悉的. 這裡的醬料和食材幾乎都是中國大陸和香港來的, 不是我們在台灣看見的, 和我們擦身而過的人也都操著香港或大陸口音, 明顯感覺到來自不同地方中國人的口味和口音的差異. 來中國城主要目的是買 "Saver" 電話卡, 面額 20 英磅只賣 13 英磅, 只有這裡才有的價格, 聽說是從英國打回台灣費率最划算的一種電話卡.

另一個目的是要嚐嚐這兒的叉燒包, 有甜的和鹹的各種餡料的叉燒包, 是在英國其他地方看不到的. 英國傳統的主食是馬鈴薯, 香腸和麵包, 沒有特別有名的料理, 常聽人說法國菜, 西班牙菜, 義大利麵, 但是有人聽說過英國菜嗎? 所以除了漢堡披薩這類速食店, 印度料理和中國餐館在英國也是頗受歡迎和相對便宜的. 像炒麵燴飯, 港式燒臘, 合菜餐廳在各地方都很容易找到.

見識了中國城, 買了電話卡, 也吃了叉燒包, 我們就到只有ㄧ個地鐵站距離的 Coven Garden. 聽說從前這裡是果菜市場, 但是現在市場已經遷移到別處. 市場中央是一棟二層建築的 Central Market (依然維持舊名稱"中央市場"), 有地面層和地下層, 建築裡頭以前是批發市集, 現在改建為一間一間的小商店, 咖啡館和小吃攤販. 中庭廣場是街頭藝人的表演場地. 當天是三位提琴手拉著大提琴和小提琴, 悠揚的樂曲在廣闊的中庭廣場迴繞, 我們就依靠在樓梯扶手欄杆欣賞音樂.

Central Market 周圍的人行步道滿是人潮, 這街道的商店很多賣的是特色商品, 如精油, 香皂, 茶葉, 鞋子, 手錶, T恤, 背包, 新潮玩具等. 有家迪士尼專賣店, 賣的是我們從小到大熟知的卡通人物造型商品, 例如布偶, 文具, 餐具, 衣服, 飾品等. 在台灣曾看過 Hello Kitty 專賣店, 但是沒看見過迪士尼的, 所以感到非常興奮, 但是後來在學校市區的 Shopping Mall 也發現ㄧ家迪士尼商品專賣店, 忍不住買了二個 500 C.C. 的馬克杯, 一個是跳跳虎圖案的立體浮雕杯, 一個是小矮人圖案的立體浮雕杯, 用來泡奶茶和喝咖啡, 一次一杯剛剛好.

英國有個知名品牌 Crabtree & Evelyn, 是賣各種系列天然花香味道的精油, 香皂, 和乳液等美體美膚商品, 類似 Body Shop, 但是這品牌在英國當地似乎更受歡迎, 台灣某些百貨公司和博客來書店也有賣. 我比較喜歡的是 Lavande (薰衣草)和 Rosewater (玫瑰水) 系列的乳液和香皂, 非常質純自然的味道. 要回台灣時我就買了很多這品牌的香皂送給之前為我餞行的好友們. 我第一次認識這商品就是在 Coven Garden.

大英博物館 (British Museum) 離 Coven Garden 也是只有ㄧ個地鐵站距離, 所以我們就順著街道邊逛邊走過去. 第一眼看見大英博物館是從別條街轉進另一條街看見的, 博物館坐落在倫敦市區, 四周是一般的街道商店, 不像羅浮宮有偌大的廣場和凱旋門, 遠遠的就能看見.

大英博物館是世界上規模最大最著名的博物館之一, 中庭是改建完不久的螺旋狀白色圓頂廣場, 就從入口處順著螺旋方向入內參觀. 我們在入口處拿了一份導覽地圖, 這博物館真的很大, 就算是用一整天時間也無法逛完, 何況我們只剩半天的時間可以參觀, 於是決定挑重點先去參觀東方館和埃及館, 其他的館視剩下的時間而定.

東方館展的主要的是中國文物, 在前一個世紀英國稱為日不落國, 到世界各地掠奪搜刮, 中國就有超過20,000件古代文物收藏在此並且分批展出. 時間從遠古到近代, 種類從甲骨文, 錢幣, 雕塑, 壁畫, 陶瓷, 漆器, 玉器, 鼻煙壺等都有, 文物保存的很完好, 好像不輸給台北故宮, 這東方館很寬敞, 逛完一圈腳都痠了.

埃及館據說是大英博物館的經典館藏 (埃及也是前一個世紀的主要受害國), 這裡存放著數不清的木乃伊, 有平放的有直立的, 還有貓的木乃伊, 恐怕在埃及也不見得能看到比這裡多的木乃伊. 一個個巨大的棺郭原本就很佔空間, 再加上參觀的人潮多, 所以移動速度緩慢, 空間很擁擠. 我對木乃伊興致不是太高, 也不想和同學一樣對著棺木拍照, 所以只是看看就好.

走出埃及館還有點時間, 我們又參觀了硬幣館, 展示東西方古代錢幣, 但是還沒逛完就有同學累癱在地走不動了. 也罷! 一群人席地而坐休息一會兒, 然後看時間差不多就決定離開. 離開前大家都想去洗手間一下, 但是女廁正大排長龍, 看起來至少要等半小時才能排到的樣子. 有男同學說男廁沒有人, 是不是要偽裝一下到男廁去比較快. 聽起來是不錯的主意, 而且我們的穿著也很中性, 應該分辨不出來. 於是我和另二位女同學三人分別借一頂鴨舌帽, 刻意拉低帽沿, 快速走進男廁又快速走出, 三個人都很迅速的上完廁所離開大英博物館.

這應該是所謂的群眾心理, 當只有一個人時可能不會做的事, 但是有幾個人在慫恿陪伴時, 膽子就變大了. 不過出去玩就是要有幾個同伴製造些意料之外的事情才能讓旅遊更有趣. 不管認同或不認同其他成員的想法, 能共同分享和共同分擔是一群人可以一起旅遊, 快樂相處的基本原則, 如果過於堅持只有自己想做的事情, 不顧其他人的感受, 會很容易破壞整體的心情和氣氛. 我們這幾個人在英國期間, 能愉快出遊這麼多次也是大家都很有默契的維持這個分際的緣故.

倫敦首行與泰晤士河畔

2008-08-31T21:26:00.021+08:00

在英國留學期間進出倫敦總共4次, 這次數對留學生來說算少, 很多同學每到假日都要前往倫敦"朝聖" - 去Harrod’s (哈洛德百貨公司) 附近看尖端的流行時尚, 去Tate Gallery (泰德藝廊)看展覽, 去China Town買電話卡和中式料理食材等. 我第一次踏上倫敦是從香港轉英國航空(BA)到Heathrow機場, 學校的International Student Office派一輛計程車將我從機場直接載到學校門口, 約2小時車程, 本以為國際學生都有這種福利, 後來從其他學生口中得知只有我獲得這項福利, 他們都是自己扛著行李廂從機場轉搭巴士到學校.

原來我出發前先以E-mail詢問學校的地址和聯絡電話, 還說萬一迷路可以打電話詢問, Office的人可能怕我真的迷路, 決定派一輛車去機場載我, 車資由學校支付, 羨煞其他的外籍學生. 其實"在英國有些福利是要去問去爭取才能享有, 不是等著自動送上門, 如果讓自己的福利或權利睡著了那也是你的事", 一位資深的博士班留學生後來這樣提點. 不過也因為這樣, 第一次到倫敦並沒有留下什麼印象, 只能算是"路過".

到學校大約一個月後才和幾位台灣學生利用週末安排二天一夜的行程到倫敦遊玩. 第一次到倫敦當然要從最知名的地方開始, 包括大笨鐘(Big Ben), 倫敦塔橋 (Tower Bridge), 西敏寺 (Westminster Abbey), 白金漢宮 (Buckingham Palace), 大英博物館 (British Museum) 及同學推薦的Coven Garden (俗稱蘇活區). 二天要到這麼多地方是很緊湊的, 像西敏寺和白金漢宮就只有在大門四周拍拍照, 不過後來再次去倫敦時有進去仔細參觀, 所以這兩個地方就留到後面的文章再做介紹.

從學校坐火車到倫敦是在King's Cross Station下車, 倫敦有三個火車站, 端看要前往的地方決定在哪個車站上下車. 我從不知道一個城市裡面可以有這麼多火車站, 算是開了眼界認識所謂國際大城, 後來去的中部伯明罕城 (Birmingham) 也有三個火車站. King's Cross 是哈利波特中"九又四分之三"月台的場景, 我也不知道這故事的橋段, 是一位影迷同學硬是要找到這個月台才看見某個月台牆上真的有個不是很明顯的圖示"9 3/4".

在倫敦市區不管到哪裡, 搭地鐵是最方便的, 四面八方任你穿梭其中. 他們的地鐵以是以同心圓向外擴張分區, 從中央的Zone 1開始到Zone 2, Zone 3… 越往外圍就離市中心越遠. 著名景點多半在Zone 1 和Zone 2 裡面. 各地鐵站都有免費的車站地圖提供遊客參考. 如果停留的時間內需多次搭乘地鐵的話, 也有ㄧ日遊或三日遊這類的卡可以購買, 買這種卡會划算很多.

倫敦不管吃住或交通費都比其他城市高, 以麥當勞速食店來說, 同一種餐的價格就比其他城市高一些 (台灣是全省統一價格). B&B 也是, 已經到Zone 4 很郊區的地方, 房間和走道還很狹小的房間, 每人每晚也要25英鎊. 有同學的同學在倫敦唸書, 說小小一間房間每週房租要90~100英磅, 我們中部地區平均每人每週50英磅就能合租到不錯的House (英國學生房租以週為計價單位), 如果想省點生活費或過的悠哉一點的人不建議選在倫敦唸書.

我們先到白金漢宮參觀, 門前寬廣筆直的林蔭大道非常壯闊, 節慶時女王會坐著馬車從這條大道出去, 我們在大門前和旁邊的公園停留一會兒就往英國最著名的地標: 大笨鐘 (Big Ben) 和國會大廈 (Houses of Parliament)走去. 大笨鐘是國會大廈旁邊的鐘樓, 同屬一個建築物, 仰望這座金色的高牆和尖塔: 嚮往已久的倫敦, 我終於站在這裡了! 當天的光線很強, 站在底下仰著頭很難看見鐘樓的樣貌, 我們就走到對面較遠的街道上看. 之後又繞到國會大廈的另一側, 這邊是西敏寺 (Westminster Abbey), 一座宏偉的教堂, 一直是英國皇室舉行重要典禮的地方, 黛安娜王妃的喪禮也是在這兒舉行的. 我們在教堂外圍繞一下就又回到大笨鐘底下.

國會大廈的後方是泰晤士河 (River Thames), 英格蘭最長的河流, 從大笨鐘底下可以通到河邊, 對岸就是為千禧年而建的London Eye(倫敦眼), 聽說是新地標, 一座當時完工不久的摩天輪. London Eye這名字起的很好, 看起來就像泰晤士河上的一隻眼睛 - 倫敦之眼. 這裡有座橋 Westminster Bridge連接到對岸, 橋附近有個碼頭Westminster Pier 停靠幾艘汽船, 遊客可以在這裡搭船遊泰晤士河, 欣賞美麗的河岸風光.

船行約30分鐘, 離開碼頭就能慢慢的看見大笨鐘和國會大廈的全貌, 原來這船的甲舨上才是欣賞這座建築的最佳位置. 船從大笨鐘底下開始, 沿途經過幾座橋, 河面有其他的小遊艇及大輪船行駛. 太陽漸漸西下, 徐風迎面吹來 , 這時候沒有刺眼的陽光, 是最適合遊船的時間. 終點站是倫敦另一個知名的地標 Tower Bridge (倫敦塔橋), 也是我們要參觀的重要景點.

Tower Bridge同樣連接泰晤士河的兩岸, 不同的是這橋的造型很奇特. 橋分上下二層, 下層路面寬廣, 供行人和車子行走, 上層則是遊客爬上去觀景的地方. 每當有超過橋面高度的大輪船要由經過時, 橋面會暫時封閉不讓人車行走, 然後橋就從中間呈八字型向兩側開啟, 等橋下的輪船通行後再恢復通車. 但是會從底下經過的大輪船不多, 要看到橋面打開需要等待些許時間才能看見. 有ㄧ首兒歌"倫敦鐵橋垮下來"可能說的就是這座橋吧!

塔橋附近有個 Tower of London (倫敦塔) 的地方, 在古代是一座堡壘及囚禁罪犯的監獄和刑場, 現在是放置女王皇冠和權杖的地方, 因為已經錯過開放時間無法進入參觀, 只有從外面觀望.

離開倫敦塔時天色已晚, 於是從附近的地鐵站搭地鐵回B&B, 隔天的行程是中國城, Coven Garden 和大英博物館. 一位同學說滿清時期英國人從中國圓明園掠奪無數的寶藏, 非得去瞧一瞧他們到底拿走些什麼不可?

2007到2008網頁設計風格走向

2008-07-23T18:16:00.004+08:00

水晶玻璃和所謂Web 2.0的網頁設計風格走紅了2~3年, 最近已經慢慢消退, 取而代之的是花草紋路, 插畫塗鴉, 材質拼貼和復古風 (Vintage) 照片等多樣化的網頁設計. 設計者使用的素材不再以圖庫照片為單一表現, 從當前的素材網站提供的筆刷和材質圖片可以看出這些改變.

網頁設計潮流每隔幾年就會有變化, 最初是以Photoshop切割大圖的方式拼湊整張首頁, 網頁色彩傾向灰暗色調, 如灰藍, 灰綠等, 選單喜歡加上半立體效果; 後來改為部份切割圖片, 搭配table的背景圖或frame做網頁延伸; 最近幾年則模擬水晶, 木質, 鐵質, 水彩, 潑墨, 塗鴉等更豐富的材質設計. 當然這些改變也和顯示器支援的色彩品質及網頁下載速度越來越好有關.

設計的趨勢潮流不應該忽視, 反觀原始的網站設計, 從現在的角度看就過於灰暗單調, 屬於老舊的設計方式. 所以設計師應該關心和留意目前的網頁設計走向, 更新表現手法.

但網頁設計也不應該一昧的跟隨潮流, 最主要還是從網站的訴求和目標使用者的特性做考慮, 避免做出與網站使用目的差異太大的風格, 盡量在網站訴求與趨勢潮流之間取得平衡.

有幾篇探討當前網站設計風格的文章做了分類和擷圖, 提供這些文章的網址給讀者參考. 另外也介紹幾個不錯的免費素材網站, 除了觀察素材應用的變化, 也可以下載回來使用.

網站風格分類:
2008 Design Trends
Vintage Web Design
2007: More Web Design Trends & Cliches
Best of CSS Design 2007

免費素材下載網站:
Squidfingers/Patterns
200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup
400+ Swirls, Curls, and Fleurons
300+ Vintage Style Textures and Photoshop Brushes

舉例說明 2008 Design Trends 這篇文章區分出11種表現方式:

1. Vintage / Retro Styles 復古風格圖片
2. Handwritten Notes and Paper Clips 便利貼(或迴紋針)方式
3. Grungy 雜亂方式
4. Splatter Ink 潑墨方式
5. Watercolor 水彩方式
6. Collage 拼貼方式
7. Sketches and Handwritten Fonts 手寫和手繪方式
8. Big Fonts 大字體方式
9. Script Fonts 手寫字體(指英文書寫體)方式
10. Wood Pattern 木紋材質方式
11. Zig Zag Pattern 水波漣漪方式

其他文章也有分成卡通類, 插畫類和其他紋路背景等, 分法大同小異, 沒有誰分的才是正確的, 但整體的風格走向總共有這些表現方式, 怎麼分類就讓大家自由心證, 各自表述.

40歲的盤點

2008-06-29T02:35:00.009+08:00

假設醫學發達, 平均年齡80歲, 那麼一路走來也到了人生的中間點40歲, 古人說40歲而不惑, 意思是到這個年紀應該對自己的人生有清楚的想法, 知道該做什麼和不該做什麼! 和30歲時比起來, 對事物的觀察感覺有更清楚的輪廓, 能見度高一些. 也知道除了表象之外, 應該了解背後的因素與動機. 行為上可以盡量控制住不好的情緒, 說該說的話, 做該做的事! 從前的我是比較內向不善於言辭的, 漸漸的經由多和別人接觸的機會, 已經能適時表達自己的想法.

我的40歲雖然比較清楚輪廓, 但輪廓裡面仍然模糊, 最近大前研一的新書"後五十歲的選擇"說: 50歲是看清全盤人生並開始倒數計時的時候. 所以人是要到50歲才能看清楚來和去的路. 老天是在開玩笑嗎? 能看清楚全盤人生的時間竟然是要開始倒數計時的時候, 50知天命是這個意思嘛!

忘了那本書提到過: 年輕時看不清楚方向, 總是浪費時間在四處亂闖, 等老了能看清楚方向時, 卻已經沒有精神和體力去闖. 弔詭也很悲情的人生! 大前研一也勸人"想做的事現在就去做, 不要等將來. 因為有些事現在不做就永遠不會做了". 在當下的時空與周圍的人會覺得做某件事情是有意義的, 如果時空轉換到許久之後的未來, 恐怕已經不再具有意義, 徒留"景物依舊, 人事已非"的感嘆.

大學時有幾個同學計畫考研究所或出國, 那時候雖然很羨慕, 卻不曾有過繼續深造的想法, 留學是我ㄧ直放在心裡不曾實際行動的夢想. 有一次的工作瓶頸讓不知道做什麼好的我決定辭掉工作專心考托福到英國求學. 當時我也學到一課, 永遠要讓自己保持"可移動"的能力, 找ㄧ項可以深耕的專業技術, 把它做到最好, 不再讓工作瓶頸這件事情困住我. 所以往後的工作就一直努力培養自己的專業知識和技術能力, 不敢懈怠.

留學是ㄧ個珍貴的經歷, 大學時沒有好好唸書, 所以很想再去認真的唸一次, 我也真的非常努力把握機會, 在第二學期拿到 Negotiated Project 全班最高的評分. 以我當時32歲的年紀去唸碩士已經是全班第二大的, 最老那位是個媽媽, 她的二個小孩要在英國唸中學, 在還沒拿到公民證前, 為了可以長期留下來陪孩子, 她從大學一路唸到碩士, 畢業時還差1年, 所以我們畢業後, 她要再選一個碩士學位唸. 但她也不是來混日子的, 成績也是不錯的, 真偉大的媽媽! 其實每個人為自己看重的目標努力過日子也不枉此生.

但是有出國唸書對將來的工作更好嗎? 這不是必然的答案, 也不是思考的重點, 人生是ㄧ個過程的累積, 任何可以讓過程感覺更美好的事情就值得做. 但這也需要付出代價, 我花掉先前工作所有的積蓄, 還向家人借30萬才完成我的夢想, 回來時只剩一紙碩士文憑和滿滿的回憶, 然後一切重新開始! 現在回過頭想, 遇到瓶頸很可能是通往另一扇門的契機, 也是考驗如何做選擇的智慧. 往後再面對類似的經驗就知道應該怎麼做.

我的前半生沒做什麼規劃, 也沒有特別的想法, 一直順著命運安排, 到目前為止只能給自己"還可以"的評語. 不過人到這個年紀就會開始思考人生的課題, 既然輪廓已經出現, 也想知道50歲在做什麼? 或者希望我的50歲會做什麼? 然後決定現在應該要做什麼?

50歲我很可能還在工作, 因為整體社會退休年齡往後挪, 但是工作上應該不會有太多新意, 改以培養提攜後進為主(大前研一的建議), 也要向外多元發展興趣和從事公益活動; 體力上應該大不如前, 所以保持身體健康很重要, 還要永遠要比實際年齡年輕至少十歲; 維繫友情親情也很重要, 希望有很多老朋友可以陪我ㄧ起話當年, 免得成為老孤單; 還有很重要的, 為了老年物質生活無虞, 要好好賺錢理財.

這些希望不會在50歲自動到位, 所以是40歲開始往後10年要努力的目標, 40歲是人生的高峰期, 過去有很多時間放在學習和磨練, 除了為50歲的人生做準備, 希望可以開始承擔責任, 盡自己的力量讓周圍的事情變得更美好, 不管什麼事情, 都要用這種心情去完成, 這是我對未來10年的期許!

前面40年有點糊裡糊塗的過掉, 往後40年如果也能糊裡糊塗過掉還不算壞, 怕的是清醒時也是無力再做改變的年紀就很悲哀了. 很多人對金錢的追求很執著, 我對這方面的追求保持在夠用就好 , 但是在高物價的時代夠用也要很努力賺才夠用. 在建立專業, 保持健康, 維繫友情親情, 夠用的金錢都能平衡發展的狀態是我認為可以覺得滿意的後半段人生.

英國-巴斯(Bath)- 下集

2008-06-04T06:50:00.008+08:00

>> 承接 [上集]

這一天我們起個大早吃完B&B準備的豐盛早餐就前往Bath Abbey廣場集合, 9:00出發. 這是ㄧ台15人坐的小巴士, 配一個司機和導遊, 小團人數不多, 可以減少集合的時間. 通常導遊會在行車途中介紹下一個景點, 下車後告訴團員可行動區域或參觀地點, 然後各自散開在幾點鐘以前回到原地上車. 參加tour的好處是不須打理交通問題, 尤其是城外交通不便的地區. 缺點是意猶未盡就必須趕回來集合.

今天第一個行程是Stonehenge (史前巨石群), 它在一個小丘陵上, 入口處門牌寫著: 已經有5000年歷史的巨石群, 是英國最重要也是當今世上獨特的史前文化遺跡. 據說石頭排列的位置與太陽日照陰影有關, 其中一個石塊會在夏至這天與太陽陰影排成一直線. 推測那個時代應該運用很多人力以木材逐層堆疊搭建起石群. 石塊很大, 尤其在二塊高聳的石頭上方, 還要橫放一塊堆成ㄇ字型更是不容易. 能歷經幾千年而不倒, 這樣的擺放技術顯示出古人高超的智慧.

石群矗立在廣闊的山丘上, 四周除了草原, 還可以看見遠處的羊群. 從入口處到巨石群沿路拉起一條繩索, 遊客依照動線環繞和拍照, 無法進到石群中央近觀觸摸. 曾有人猜測巨石群是古人為某種宗教儀式建造; 也有人猜是外星人到此一遊留下的印記; 最近報紙報導最新的研究: 推測是當時村民為紀念先人建立的墓碑, 因為附近發現了遠古時代上百位村民埋葬的遺跡.

離開史前巨石群我們前往下一個景點Avebury, 途中經過Silbure Hill, 曾在書中看到關於這個土丘的介紹, 大約西元前4800年由人工建造的土石小山, 建造的目的和作用至今仍是個謎, 因為四周都是平坦的農地, 這半圓形的隆起顯得格外醒目. 我們的巴士並沒有在這裡停留, 只能從透過車窗在快速行進中暼見這座小土丘.

不久又經過Cherhill White Horse的白馬地景, 據說是約300年前, 村民用類似粉筆的粉末在平坦的綠色山腰繪製的地景藝術, 沿途經過的不只這座白馬, 還看見其他體型纖瘦飛奔形狀的白馬, 也有人物造型的圖樣, 想必這裡的村民擁有很強的創作意念吧! 利用地形製作特殊的鄉村景觀.

Avebury這個小村莊外圍也環繞著巨石群稱為Avebury Stone Circles, 因為較少被媒體披露, 名氣不似Stonehenge的大. 但這裡的巨石建造歷史說是比Stonehenge早了1000年, 而且分佈範圍廣闊, 整個村莊外圍都是, 石塊沒有繩索圍繞, 可以靠近觸摸. 村裡面有英國傳統的農舍建築 Cottage, 長的像香菇傘的黑灰色屋頂及鑲著木條的乳白色外牆, 外型很討喜, 在莎士比亞故居也有相同的農舍. 繞過巨石, 我們爬上外圍山丘從遠處欣賞這些石群和村莊.

中午我們在ㄧ棟由石塊砌成的小旅館吃飯, 這旅館門外排放了幾張桌子和長條板凳, 外牆和台階裝飾著盛開的盆景花卉, 這兒應該是遊客晚上出來喝酒聊天的場地! 裡頭的裝潢也別具風味, 中間是長桌板凳, 牆壁四周吊掛飾品和布簾. 因為是三合院, 餐桌依照空間安排成一間一間的, 不禁好奇的穿越每一間的走廊參觀一下.

吃過中飯, 我們到一個名為Lacock的小鎮, 這小鎮是13~18世紀建造, 至今仍保持完好的原貌沒有太大改變, 所以來這裡會有走進中世紀英國的感覺, 這兒也是BBC電視節目 "傲慢與偏見" 和電影 "哈利波特" 的場景. 我們沿著街道散歩參觀這古樸風味的老鎮, 路上看見幾位白髮老人坐在門外的長椅吃冰淇淋, 讓我們也忍不住去買來吃.

最後ㄧ站是Castle Combe, 也是充滿古樸風味的小村莊, 說是英國最美麗的村莊之ㄧ, 經常有人來拍照取景. 整條街道望過去都是石塊建造的小屋, 利用自由活動時間, 我們到村莊裡面參觀, 這村莊清一色的古建築, 當我們走到最後一條彎路上看見一棟名為 Manor House Hotel 的旅館時非常驚訝, 這是一座擁有廣大庭院和小橋流水的美麗旅館. 主體建築和村莊的石塊牆面類似, 若大的庭院有種詩意盎然的氣氛, 其實比較像私人渡假別墅, 景緻比外面街道更優美, 如果不是時間有限, 真想走近去瞧瞧. 後來才知道這地名Castle是因曾經有個城堡建在這兒, 現在已經不存在, 但原來的城堡被重建成今日的Hotel.

結束這一天的行程回到Bath, 隔天預計搭中午的火車回去, 所以有ㄧ整個早上的時間再去逛Bath街道, 我終於買下看了很多次的蘇格蘭毛毯, 是咖啡和深藍色相間格子尼雙人被大小的毛毯, 後來就仰仗這條毯子渡過寒冷的冬夜.

這趟的tour團看到幾個雖然不是那麼響譽國際但是很具特色的景觀, 奇怪的是時代變遷似乎沒有對這些地方帶來什麼改變, 他們依然用原來的方式自在的生活著, 也不會因此被貼上落後或貧窮的標籤, 反而成為珍貴的文化資產. 也反映出村民對自身生活的自信, 不想為改變而改變, 整個村莊沒有人拆掉舊屋改建新樓房, 這樣的街景在台灣不知道哪裡能看得到?

簡易的CSS彈性圓角邊框設定

2008-05-31T23:35:00.006+08:00

彈性圓角邊框的傳統製作方式是利用 table 的 4 個角落各放一張圓角小圖, 再利用背景圖做上下左右 4 邊線條的伸縮效果, 在想避免使用 table 排版, 精簡原始碼的人眼中, 這種方式很多餘, 但又ㄧ直沒有更好的替代方式.

"101個您一定會遇到的問題與解答" 書中曾介紹 3 種製作彈性圓角的方式, 但都不十分理想:

第一種方式是用Firefox專用語法 –moz-border-radius 設定圓角邊框, 只有在 Firefox 瀏覽器可以看見圓角效果, IE 無效.

第二種方式是利用很多僅 1px 邊界設定差異的 <div> 包覆內容, 書中範例在內文上方用 9 個 <div>, 下方也用 9 個 <div> 才完成一個圓角邊框設定, 步驟繁複不說, 顯示的鋸齒效果也不太好.

第三種方式是先切好 4 張小圓角圖, 二張放 html 上, 二張放 css 背景裡面, 再用 class 設定圓角與邊線位置, 這不純是用 css 作成的, 比較像是傳統 table 方式的變身. 對還需要放 2 張圖在 html 上的做法不是很欣賞.

有ㄧ篇 Simple Rounded Corner CSS Boxes 是目前看起來最好的用法, 只用 4 個 class 和一張背景圖就完成圓角邊框設定, 而這張背景圖也允許有立體陰影等效果. 原文是做固定寬度 335px , 這邊我改為彈性寬度, 所以將 width: 335px 刪除, 也對內文與標題間距做點調整.

首先要設計一張夠大的圓角框背景圖 (寬 3200px, 應該沒有比這更寬的螢幕了, 高度也視需求製作), 如果要有陰影立體也直接畫好, 圖雖然大張, 但色階不多的話, 存成 jpg 或 png 也只有幾十 K 大小, 不必擔心檔案過大. 如果標題很長或可能有好幾行字, 可將標題區域高度做大一些, 讓文字有向下伸展空間. 然後再用 4 個 class 對同一張圖做標題及上下左右圓角顯示位置和間距的設定. 這方式不管是html或css設定都很簡潔, 效果可視需求做多元的變化.

Html範例如下:

<div class="cssbox">
<div class="cssbox_head"><h2>This is a header</h2></div>
<div class="cssbox_body">
<p>This is for your content. ... This is for your content.</p>
</div>
</div>

CSS設定如下:

/* 設定右下角圓角圖 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(box.jpg) no-repeat bottom right;
}

/* 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.cssbox {
padding-right: 15px; /* 底圖右邊緣間距 */
margin: 20px auto; /* 地圖上下左右邊界 */
}

/* 設定右上角圓角圖 */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* 右上角底圖向上拉高 15px */
padding-right: 40px; /* 右邊間距 = 圖片間隙 + 內側間距 */
}

/* 設定左上角圓角圖 */
.cssbox_head h2 {
font-size: 120%;
background-position: top left;
margin: 0; /* 邊界設定為 0*/
border: 0; /* 框線設定為 0 */
padding: 5px 0 5px 40px; /* 左側間距 = 圖片間隙 + 內側間距 */
height: auto !important;
height: 1%; /* IE Holly Hack 修正 */
}

/* 設定左下角圓角圖 */
.cssbox_body {
background-position: bottom left;
margin-right: 25px; /* 右邊間距 */
padding: 15px 0 15px 40px; /* 間距設定, 左側 40px 要與 .cssbox_head 相同 */
}

/* 內文與標題間距修改 */
.cssbox_body p {
margin-top: 0 ;
}

這是利用 cssbox 和 cssbox_body 做右下和左下圓角, .cssbox_head 和 .cssbox_head h2 做右上和左上圓角, 並針同一張圖的背景 (background-position) 做置左置右或靠上靠下設定. 所以 4 邊的 margin 和 padding 必需互相對稱搭配, 才能做出無縫隙, 上下左右均衡的圓角邊框.

好用的 "CSS彈性圓角邊框設定" 推薦給各位!

英國-巴斯(Bath)-上集

2008-04-30T23:18:00.004+08:00

正式開學前一週我們選擇去Bath (巴斯), 那時候已經去過不少地方, 較遠的北邊不說, 如倫敦, 劍橋, 愛丁堡, 莎士比亞故居, 諾丁罕, 伯明罕都去過, 所以這一次的地點選擇著實考慮很久. 同學Joe翻著從台灣帶去的旅遊書籍, 找到一個大家都覺得不錯的地方 - 史前巨石群 (Stonehenge).

我們有幾天的空檔, 不會只是看巨石, 附近的景點都包含到這次的行程中, 例如Bath Spa (羅馬浴池), Bath Abbey (巴斯修道院) 及周邊的鄉村地景風光. 看巨石群要從Bath開始, 因為巨石矗立在Bath郊外很空曠的地方, 火車沒有直接到達, 所以我們要先坐火車到Bath, 在當地停留一天才去看巨石群. Bath 在倫敦西邊約1.5小時的火車車程, 但我們是從中部下去的, 需要轉火車, 來回耗費不少交通時間.

Bath是很有休閒度假風味的城鎮, 第一眼看有點像愛丁堡, 街道都是米黃色的建築, 但坡度沒愛丁堡那麼陡, 牆壁也沒那麼厚實 (愛丁堡是銅牆鐵壁的軍事堡壘). 這一天天氣很好, 下火車找到住宿的B&B, 放好行李就出去閒逛. 因為我們到達的時間是下午3多點鐘, 回到市區已經是5點鐘, 很多商店都打烊了, 我們只好沿著街道看著大門深鎖的櫥窗走著..., 然後停在ㄧ間印度料理餐館前看著他們的Menu.

向來我們出外旅遊對吃都很儉省, 像是買麵包, 吃麥當勞, 披薩或泡麵等, 但是這一天ㄧ位同學突發奇想, 認為我們來英國二個多月也沒吃過比較像樣的餐廳, 今天就慰勞自己一次走進去瞧個明白. 印度曾是英國的殖民地, 在英國到處都看得到皮膚比較黝黑個子比較小的印度人和印度餐館. 現在英國看到的印度人多半是第二代或第三代的.

進去是金金亮亮鋪著印度紋理地毯的寬敞餐廳, 有個穿印度服裝的waiter親切的走過來招呼, 門口的Menu有看沒懂, 他詢問我們的人數和預算之後就給我們一張Menu, Menu上沒有標示價格, 但他向我們表示應該不會超過預算太多, 可以放心點! 我們就看著類別各點一, 二樣, 因為不知道是怎樣的印度菜, 只知道應該都加上咖哩, 黏黏糊糊的, 就隨便點了幾樣. 果不其然! 雖然刻意挑了不同類別, 但每一樣看起來就差不多是黃黃的, 稠稠的, 但吃起來味道是有差異的. 印度菜使用的香料種類有像咖哩那類粉末狀的, 也有像胡椒般顆粒狀的, 還有迷迭香這種乾燥香藥草類, 林林總總有20~30種之多, 我是從印度室友的廚房櫃子看到的, 一小罐一小罐的排滿整個儲櫃, 真不是蓋的, 印度料理使用的香料數量絕對遠超過中國料理. 但是他們的煮法卻都很類似, 用好幾種香料混著食材 (米飯, 雞肉等) 不停的攪伴煮到十分爛.

這是我們到英國二個多月來最奢華的一餐, 所以邊吃邊拍照, 味道還可以, 中國菜講究色香味具全, 印度菜在 "色" 這一項就很弱了. ㄧ直擔心帳單會不會讓我們大吃一驚, 結果還好, 每個人約13英磅 (當時台幣大約七百多塊). 於是滿意的走出餐廳回B&B結束這第一天的行程.

第二天從B&B老板口中打聽到要參觀巨石群可以參加一天來回的tour行程, 除了巨石群還會繞一下周圍很特殊的鄉村景觀, 我們欣然接受老板建議決定參加這個團. 於是報名了隔天出發的團. 這一天就先到市區參觀Bath Spa, 羅馬時期建造的天然溫泉浴池, 中央是面積最大的露天大浴池,後面有幾個比較小的個人池, 四周還有ㄧ間ㄧ間的沖澡室, 這浴池是西元一世紀建造, 後來埋藏地底直到19世紀才被發現挖掘出來, 整體建築結構仍保持相當完整, 目前只提供遊客觀光.

Bath Abbey位在羅馬浴池旁, 是外觀保持很潔白的教堂, 很多市區的教堂外觀可能歷經戰火, 也可能是汽車油煙等因素, 外牆總有塗上一層煙灰的感覺, 但是Bath Abbey仍是明亮的乳黃色, 正面兩邊有個像天梯造型的雕刻, 幾個小天使在攀爬天梯, 小天使的動作各不相同, 有努力向上爬的, 有往下看的, 也有倒掛快掉下來的, 很有趣也很特殊的雕刻, 多數教堂牆面的雕刻是比較嚴肅的聖彼得和聖保羅雕像, 或者是當時的國王雕像.

教堂理面的彩繪玻璃及屋頂雕刻和其他教堂差異不大, 只是這教堂的地板都是一塊塊刻著人名和時間的墓碑, 它只是拿墓碑當地磚還是人也埋在底下? 其實可能是後者. 西方沒聽說有揀骨的, 埋了就一直長眠下去, 有幾片牆面也是墓碑造型. 以前參觀過羅馬的聖彼德大教堂, 裡面也有一面牆封存歷代地位較高的教宗或主教的遺體, 倫敦西敏寺也停放不少英國歷代國王及王后棺槨, 當然不是每個教堂都這樣, 但是從外觀很難分辨.

教堂和浴池前有個廣場, 廣場有幾排長椅供路人坐下來休憩, 這樣的地方當然可以欣賞到悠揚的小提琴聲, 廣場四周是賣藝品的商店, 少不了要一間一間進去看. 這是最熱鬧的市區中心, 又看見我在愛丁堡很喜歡但是沒買的蘇格蘭毛毯 - 雙人被大小的格子尼毛毯, 很猶豫啊! 當然不能現在買然後拎著到處走, 等回程再來看吧!

中午我們經過一家現烤肉餅店, 鬆餅皮裡面包碎肉或薯泥, 蔬菜等, 外型像個大水餃, 有各種口味的烤餅, 很好吃的樣子, 一個才1~2英磅, 我們每個人都買一個當午餐吃, 原以為只有Bath這地方有這種東西, 後來回學校在市場附近也發現一家這種餅店, 經常去買來吃.

下午我們從教堂前廣場沿著街道去參觀The Royal Crescent, 這是18世紀建造約30間房子圍成半圓形狀的排樓, 現在是一般人家的住所, 只能從外面看這棟建築設計, 排樓前是草皮廣場. 在前往的路上一直有很不錯的商店可以進去看, 例如設計簡約的北歐風格廚房用品, 有趣的西洋棋盤組, 陶瓷, 水晶玻璃等藝品店.

途中經過一個百花盛開的公園, 有幾棵長著不知名鮮紅果子的樹, 英國常見到這類長著小果子的樹或灌木, 像藍苺, 蔓越莓等都是. 春天時我們學校附近的人行道上滿是從櫻花樹上掉下來的綠色小櫻桃, 據說這種櫻桃品種酸澀, 沒有人會去採, 只好任由它掉落. 春末夏初英國盛產櫻桃(一磅重約1.5英鎊), 幾乎每次去市場都會買, 櫻桃不好保存, 在台灣買太貴, 在英國索性吃個夠.

這一天的時間就在很自由輕鬆的閒逛中度過, 隔天要看神秘巨石群了.

[ 下集 ] 待續 >

免費icon圖示介紹

2008-03-09T23:20:00.006+08:00

介紹幾個屬於公共版權 (Copyleft, 相對於 Copyright 的一種公共分享方式, 允許所有的人自由複製, 散佈, 修改的權利, 相關授權說明請參考自由軟體網站 ) 的免費 icon 圖片下載網站.

第一個是 Iconfinder, 用查詢方式輸入關鍵字 (例如 arrow, folder, search, book, user等), 或到內頁用標籤雲 (Tag Cloud) 點選標籤文字查詢. 在查詢結果頁的右上角可設定icon圖示大小, 共有12x12, 16x16, 22x22, 32x32, 48x48, 64x64, 128x128 7種規格和背景色設定. 下載圖檔為 png 格式, 每張圖片按照原作者提供的授權方式有 GPL, LGPL 和 Creative Commons 等 (都屬於公共版權授權條款的一種).

第二個是 Freeicon, 總共提供 15,000 個免費 icon 圖示做為非商業目的使用, 商業目的使用者仍須取得授權. 這網站將 icon 圖示按照主題分類, 有 png 和 gif 二種類別, 可找到相同風格的一系列圖示, 下載時建議點選右下角的 "Download" 下載, 圖片的解析度比較高.

第三個是 Wikimedia, 這網站提供 300 個免費 icon 圖示, 點選 icon 圖可看到每張圖的說明和大圖(128x128)

做網頁如果為了幾張 icon 圖示傷神的話, 這三個網站可以先去找找!

最大寬度與最小寬度網頁設定- Part II

2008-02-10T01:15:00.000+08:00

曾介紹過 "最大寬度與最小寬度網頁設定" 方式, 文中提到最大或最小可擇一使用, 但最近有人問到可否合併使用? 因為直接用原來方式將最大與最小寬度寫在一起會讓 broswer 當掉.

要合併使用的寫法如以下所示(最大寬度不大於950px, 最小寬度不小於780px):

div {
min-width: 780px;
max-width: 950px;
width:expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 950? "950px" : "auto");
}

但要強調的是這方式是針對IE6以下的IE瀏覽器使用, IE7和Firefox等較新的瀏覽器已經支援 min-width 和 max-width 的 CSS 語法, 不需要用這種方式設定.

IE8 Beta 1 版本將在2008上半年公佈

2008-01-01T23:03:00.000+08:00

根據PC World 12月19日的新聞, IE8 Beta 1 的版本將在2008上半年公佈, 這次IE8的最重要目標除了要相容於既有版本的網站呈現, 更要朝web標準方向發展, 提供user更好的使用經驗.

web標準意味著與所有瀏覽器有ㄧ致的呈現與反應, 開發人員不需為了各家瀏覽器做不同版本設計. 但是這需要幾年時間轉化, 因為IE6, IE7的使用者仍會存在好一段時間.

至於IE8 final 版的時程則視各方對beta版的使用回饋意見而定. 詳細新聞請參看PC World:
Microsoft to Release IE 8 Beta 1 in First Half of 2008

談SEO

2007-10-15T00:49:00.000+08:00

網際網路的世界有成千上萬的網站, 而且還在持續的增加當中. 記得在初始的網路發展階段會需要記得某些網站的網址, 現在則用搜尋的方式找了. 只要Keywords下的準確的話, Google通常能在最前面幾筆資料就出現要找的網頁. 這種精凖除了技術之外還包括他們對搜尋品質的堅持 - "致力於讓網際網路內容能公平正確的呈現", 所以Google拒絕任何造成網頁排名不公的方式.

很多搜尋引擎採用收費方式讓某些網站在搜尋結果的排名變高 - 錢付越多排名越高, 所以使用者最先找到的會是付很多錢的網站, 不是真正想找的網頁. 因為Google準確的搜尋結果聚集更多的使用者, 也因此決定很多網站的流量和曝光率, 讓 "要如何提升在Google的搜尋結果排名" 變成是一件很重要的事. 所以標榜SEO網站建置的公司開始出現了!

SEO (Search Engine Optimization 搜尋引擎最佳化) 是一種利用搜尋引擎的搜索規則提高網站在搜尋引擎的排名的方式, Google有自己一套複雜的演算法去擷取和比對資料, 真實的排名基準Google不願公開, 但是在Google Webmaster "網站管理員指南" 中所說的 "設計、內容和技術指南" 和 "品質指南" 要請牢記, 尤其違反 "品質指南" 8項中的任何一項, Google會讓該網站從索引中移除, 也就是你的網站不會在Google出現了, 不管下任何Keyword, 不管到幾萬筆資料之後. 這8項分別是: 隱藏的文字或連結, 偽裝的重新導向功能, 寄自動查詢給Google, 載入不相關關鍵字網頁, 建立大量相同內容網頁或網域, 植入病毒或惡意程式網頁, 使用專為搜尋引擎建立的入口網, 極少或無原始內容網頁.

有誰的網站曾被除名過? Wikipedia SEO 一文的垃圾索引 (Spamdexing) 段落中提到: 在2006 年2月, Google拿掉BMW 德國站和Ricoh 德國站, 因為他們用垃圾索引的方法企圖影響排名. 被除名的一定不只這2個站, 只是這2家公司比較知名, 特別被提出來舉例.

怎麼知道你的網站還存在於Google否? 檢查的方式是在Google的搜尋欄位鍵入 "Site: 你的網址" , 例如: Site: jane-wu.blogspot.com (這不是上面所指的自動查詢)
查詢結果的第一筆就出現這個部落格, 所以這部落格還在. 但是萬一很不幸找不到怎麼辦? 這表示你的網站可能不小心觸犯某些規則, 必須先將違規的地方改善然後提交審查通過, 你的網站才得以重生. 這些規則細目和審查網址可以在 "網站管理員指南" 中找到.

Google不喜歡網站為了提升排名, 以欺騙或隱藏等負面方式降低他們網頁搜尋結果的品質, 但是他們鼓勵適當使用關鍵字和建立優質的網頁內容讓他們網頁搜尋結果的品質提高. 要做SEO搜尋引擎最佳化網站並不難, 最重要是朝正面效果的方向走並儘量避免負面效果的因素. Google的 "設計、內容和技術指南" 雖然列出幾項建議, 但是說的還不十分完整, 本文另外參考幾篇關於SEO製作的文章, 將重點整理歸納如下.

影響SEO的因素區分為二種類型: On page 和 Off page

‧On page指在單一網頁上能產生影響的因素, 包括keyword的關連性與密集度, 重點在title和meta的描述, H1, H2, … H6, strong, em tag的運用等, 以及所有可以放在頁面上對內對外的連結, 網頁內容的豐富性與品質等.
‧Off page指從其他頁面連到某單一網頁的連結(由本站其他頁面或由其他網站連過來的都算), 網站流量越高, 站齡越久, 規模越大, 經常更新等項目的評估都是影響排名的因素.

On Page的部份:

1. Keywords(關鍵字)的應用
如何下正確的Keyword? 以商務網站來說, 必需先知道自己最重要的產品與服務有那些? 如果是自己要購買和搜尋這些產品與服務會用那些Keywords搜尋? 找出這些Keywords之後, 再用這些Keywords做搜尋, 檢查下的對不對? 如果搜尋結果最上方幾筆資料出現的產品與服務正好與你的類似, 就表示下對了. 將來別人使用這些Keywords搜尋時, 你的網頁才能對準目標使用者適時出現. 相反的, 如果下錯Keywords, 只在非目標使用者眼前出現, 爭取再高的曝光率和排名也沒用. Google Adwords suggestion tool是協助找出Keywords的建議工具, 可以參考看看!

Keyword應用的層面很廣, 包括

a. URL: 在網址列上包含keyword可讓排名提升, 如: http://www.books.com/abc.htm 或 http://www.books.com/english/abc.htm 能讓某書店網站的英文書籍中的ABC這本書網頁排名更高. Keywords可以是books, english和abc. Google認為以Keyword為網址名稱意味著他的重要性也很高. 如果是動態網頁, 網址包含了 " ? " 等字元的話, Google 網站管理員指南提到應該讓參數儘量簡短, 因為並非所有自動尋檢程式都能檢索到這樣的網頁. Dynamic URL Rewriting Done Right 文中建議將冗長的動態網址改寫成以數字序號顯示, 例如: 可以將
http://www.books.com/post-edit.g?bookID=29982455&postID=7022406442842187241#
改成
http://www.books.com/104596.htm

直接以產品,服務名稱或文章標題的Keyword為網頁命名會比用參數或不相關的名稱為佳.

b. Domain Name: 和URL一樣, 如books就是很好的Keyword應用到Domain Name上的範例. 但請使用最上層網域, 例如使用 http://www.example.de 會比 http://www.example.com/de 或 http://de.example.com 的辨識度好 - 更容易辨識是德國網站.

c. Title: 和URL一樣, 在網頁title名稱顯示Keywords對排名也很有幫助, 例如 xxx 網路書店-中外書籍雜誌, 生活百貨, 3C家電, 線上優惠訂購 ! 搜尋結果頁出現的就是這行title標題, 要善加運用讓使用者可以一目掃過. 如果只寫 xxx 網路書店未免可惜, 寫太多又模糊焦點! (使用者一目掃不完的就會放棄)

d. Meta Tag: Meta Name 的description (描述)儘量維持在255字元以下, 使用的Keyword也應該和該網頁內容直接相關; Meta Name的keywords 只有少數搜尋引擎在用, Google已經不對此做檢索, 因為太多人濫用這項功能, 填塞關聯性很低的Keywords.

e. Head標題: 將Keywords放到網頁文章標題中, 並以等級最高的H1為tag標籤, 如果需要的話可搭配H2做為次標題, H4, H5, H6的重要性就很低了, 希望排名高的話不建議經常使用.

f. 內文: 文章內容中如果出現Keywords, 最好能用strong 或em強調, 讓它的重要性提高. 網頁中Keywords出現頻率越多次, 密集度越高, 排名也會越高. 但是如果過度濫用, 甚至Keywords與網頁內容無關也會引起Google不悅, 後果堪慮!

g. 替代文字Alt: 替代文字Alt可以使用到keyword也很好, 重點是只要是圖形文字一定要有Alt描述, 因為搜尋引擎無法檢索圖形文字.

h. 錨點連結: 善用錨點連結增加Keywords的密集度, 例如在頁面上方條列內文標題(最好包含keyword), 將這些條例項目用錨點方式連結到該段落, 也是讓增加Keyword重要性的方式之一.

2. 連結的應用

a. PageRank的定義: Google的PageRank有一部份是用連結數量計算, 例如:有A網頁連到B網頁, 就表示A網頁投了一票給B網頁, 如果有其它C,D,E等網頁也都連到B, 就表示B的總票數比較高, 排名會提升. 當中如果A網站是數於專家級或重量級網站, 則A那一票的權重又比C,D,E的高. 所以讓更多有份量, 優質的大型網站連到你的網頁對排名有很大的幫助.

b. 增加站內連結: 增加站內連結也是A網頁投給B網頁的一種, PageRank是以網頁對網頁計算, 不是站對站計算. 所以在網站中先分組建立條列項目, 再連進單一內容頁是增加票數的一種方式. 又在內容頁建立 "上一頁", "下一頁" 可再為其他二頁各投一票. 有沒有發現Google Blogger也善用這樣的機制, 在內容頁下方有 "較舊的文章" 連結, 左邊除了文章分類連結之外, 左下角還有個Archives按月份再分類連結一次. 所以Google Blogger的SEO也做的很讚的! 如果後來的文章有提到之前的文章時, 也記得要連過去再投舊文章一票!

c. 不管連內或連外, 連結的形式最好以Keywords方式呈現, 例如: 用 ABC Book 連到該網頁會比直接用 http://www.books.com/english/abc.htm 網址連結好.

d. 連結最好固定, 不要經常更動, 否則會被評估為網站穩定性不佳.

3. 網頁內容品質
網站內容越豐富, 提供越多實用或獨特的資訊, 自然吸引更多訪客. Google也建議要善用Keywords和標題讓使用者更容易找到你的網頁.

4. 其他On Page 項目
a. 檢查html的正確性, 可參照W3C建議.
b. Google建議單一頁面的總連結數量應該少於100, 如果多出來, 最好分頁放置.
c. 單一網頁檔案大小最好少於100K.
d. 避免過度優化, 如過度使用Keywords, H1, Meta tag等.
e. 避免無效連結.
f. 避免過多的相互交叉連結.
g. 避免連到惡鄰居, Google認為各網站有責任管理好自己的網站, 要定期檢查是否連結到 "品質指南" 所提到的惡意網站, 如果有也會影響網站的評分. (如果有惡意網站連到你的網站呢? Google認為這非自己可以控制的, 所以排除這項評估因素.)
h. 最好以文字顯示重要的文字, 連結或內容, Google檢索器無法辨識圖片中的文字.
i. 以JavaScript, Frame, Dhtml, Flash製作網站內容, 則檢索器在檢索網站時可能會有問題.

Off Page的部份:

1. 網站年齡, 成立的歷史越悠久越好.
2. 內容年齡, 建立的歷史越悠久越好.
3. 流量越高越好.
4. 越多人將網頁加入我的最愛越好.
5. 越多其它網站連結到你的網頁越好, 如果是重量級優質網站則權重更高.
6. 越常新增網站內容越好.
7. 避免任何為了提高排名的偽裝技巧和不實網頁.
8. 避免 "大量" 重複內容網頁或網域, 如果有, Google會保留先建立的網站, 後建立的則除名. 這也提醒最好不要原封不動複製別人的網頁內容到你的網站上.
9. 在網頁伺服器使用robots.txt檔案, 協助搜尋引擎有效率的檢索網站, 目前已經成為 Yahoo!, Microsoft 和 Google 等搜尋引擎的共同協定, 相關作法請參考 Sitemaps.org

以上是製作SEO網站應該注意的重點事項, 諸多項目不全屬於網頁設計領域, 但大部份是. 即使不敢就這麼自稱是SEO建置專家, 但是能做到這些已經非常足夠. 是否可以因為這些讓網站建置增加附加價值多收點費用就看網站的規劃/設計和客戶的良心了!

本文使用的原始參考資料如下, 如需參考更詳細內容, 請到這些網站:
Google Webmaster 網站管理員指南(有中文繁體版)
Google Adwords
Google Ranking Factors - SEO Checklist
SEO Guy's Free Seo Tutorial
Wikipedia - Search engine optimization (有中文簡體版)
Dynamic Website SEO Terror Level Downgraded to Yellow
Dynamic URL Rewriting Done Right
Google Dropped My Website! What Should I do?

IE6/IE7 bug 蒐集

2007-09-22T01:15:00.000+08:00

今年二月寫過一篇IE7的bug, 根據IEblog的官方說法: 在 positioniseverything.net 中所提到的 IE5/6的bug, 唯一延續到IE7的是" Escaping Float Bug".

有個網頁專門蒐集各瀏覽器的bug: Browser bugs section, 裡面匯整出 Mozilla有1個bug , Opera 9有33個bug , IE6有75個bug(positioniseverything.net 說的沒這麼多) , IE7有70個bug, 每個bug還有圖示範例. 感謝有這等閒工夫的人的貢獻, 但是當中獨缺Firefox的bug. 不敢相信Firefox都沒有bug, 到Google搜尋一下還是有的 - 懷疑這些bug是不是Firefox蒐集的.

IE6, IE7的bug加起來真是多啊, 一時間很難消化, 實做上也不認為都遇得到. 但不管怎樣, 列的非常詳盡, 遇到莫名難解的情況時, 可以到這個網頁追查是不是bug問題了!

諾丁罕 - Nottingham

2007-09-16T23:25:00.000+08:00

諾丁罕(Nottingham)是英國中部靠近東邊的小城鎮, 離我們學校很近, 往北坐半小時的火車就可以到達, 是我在英國第一個開始旅遊的城市. 這個城鎮除了一座城堡Nottingham Castle, 還有一位傳奇人物羅賓漢(Robin Hood)曾住在這裡而聞名. 羅賓漢是英國12世紀傳說中的劍客, 在Nottingham一處森林裡出沒, 和他的夥伴一起劫富濟貧. 凱文科斯納曾經演過片名"俠盜王子羅賓漢", 就是這個故事改編的.

去諾丁罕是到英國上Precession Course時, 班上一位女同學的提議, 她已經去過一次, 自告奮勇要帶我們幾個"沒出過遠門"的人去一趟. 這是來英國之後第一次的外地旅遊, 也是第一次搭這裡的火車, 所以不管好不好玩, 對我們來說都很新鮮. 六個台灣學生約一約, 利用週末假期就出發了.

Nottingham是可以當天來回的行程, 目標只有Nottingham Castle. 下火車往前方小山的方向走約20分鐘就可以看見前門兩側圓鼓鼓的城堡大門. 沿途有看起來造型不錯的房子和酒吧, 都覺得有趣. 當然後來這些房子看多了也還好而已. 這個城堡和羅賓漢沒有直接關係, 只是17世紀一位爵士在當地小山上建造的城堡. 目前是Nottingham的市立美術館, 裡面收藏和展示為數不少的銀器, 玻璃, 陶器, 瓷器和畫作.

我們從裡面逛起, 比較傳統的是藍底白色浮雕的器皿, 還有壁面很薄的骨瓷餐具, 聽說是加入動物的骨粉讓瓷器產生半透明感, 給人輕巧但是易碎的感覺. 其他是人物造型的瓷器雕塑. 一家歷史悠久知名的Wedgwood工廠還有在生產這些陶瓷藝品(Wedgwood工廠離這裡很近). 參觀完所有館藏, 出口處有個空間很大的咖啡廳賣飲料甜點. 我們在裡面各叫了一份下午茶當午餐吃, 是很一般的紅茶, 鬆餅和三明治, 份量不多就要好幾英磅, 當下認為這樣的餐點以後自備就好, 錢要花在可以到更多地方的旅遊. 坐著休息一會兒才出去外面的庭院走走.

外面是很大面積的草皮和修剪過造型的花草樹木, 有幾個小孩在騎單車, 大人就坐在草皮上享受日光浴. 院子有一座羅賓漢的銅像, 大家都擠過去和它拍照. 從周圍的矮牆上可以俯瞰整個市區. 我們也在這庭院中小坐一下就離開城堡往市區方向走. 途中經過一家羅賓漢玩具專賣店, 有衣帽, 弓箭, 玩偶等. 這城鎮比我們那個小鎮大了些, 因為時間還早, 就留下來閒逛殺時間. 從這之後到正式開學大約一個半月時間, 每週都會討論週末要到那裡玩. 因為大家都知道開學後的功課很緊, 此時不玩更待何時?

附錄: 初到英國

剛到英國人生地不熟的, 記得第一天下飛機坐車到學校宿舍之後, 先簡單整理好行李就覺得很累, 整棟宿舍因為暑假, 大白天也出奇的安靜, 有點擔心這麼大一棟宿舍只有我一個人住! 我7月初就先來上二個月的Precession Course, 主要是語文和論文寫作的課, 週一開始上課我週六就到了, 想多二天可以打理生活起居用品, 但是我連市區在那個方向都搞不清楚. 一切都在混沌之中, 又經歷從台灣到英國倫敦再到中部這個學校的舟車勞頓, 想先睡個午覺精神好點再說. 不知睡了多久, 昏昏沉沉的聽見有人輕聲敲門, 我想這裡又沒人認識我, 可能是敲隔壁的, 正好睡, 不太想理. 但是外面的人實在敲很久, 確定是在敲我的門, 只好起來看看到底是誰? 一開門對方就說Sorry! 敲錯門了. 是個台灣男孩(聽口音就知道了)! 他轉身再到隔壁門去敲. 我關上門就聽見隔壁對話的聲音, 一男一女, 看來已經有其他人住進來. 但是我還是很想睡, 又回去繼續睡, 晚上就仰賴我帶來的餅乾裹腹.

隔天一早起來實在太無聊, 雖然我帶了一台Notebook, 但是這宿舍並沒有網路. 悶了整整一天, 決定要出門尋找附近可以買到生活用品的"市區", 一路用我當時的"菜英文"詢問"City Center"的方向, 穿越若大的校區, 一個公園和好幾條馬路才找到市區. 先買了吹風機, 臉盆, 衣架, 麵包, 果醬等比較急用的東西回來, 還有一本"本市地圖". 看地圖才知道今天走的是遠路, 可以從學校另一個方向走比較近, 也大略知道整個城鎮的行走路線. 但回來的時候就看見有個大眼睛的女生搬進來, 東方臉孔, 我問她是台灣人嗎? 她說是的, 剛到. 不久又有另一個女孩來. 於是這個宿舍開始熱鬧起來, 當天中午和晚上我們都在廚房一起分享食物和準備吃的, 包括那個敲錯門的男孩和他的女朋友, 他們一起來英國唸書, 出去忘了記房號才會敲錯門. 有人貢獻出康寶濃湯, 這時才明白這東西好用又不占空間, 為什麼沒想到過要帶來? 還有人從行李中取出一台大同電鍋, 肉鬆, 香菇, 八角, 雞湯塊等, 真是厲害, 我只想到要帶一組碗筷來吃泡麵說! 晚上吃飽飯就開始串門子, 看看大家還帶了什麼神奇寶貝過來, 無聊的日子一天就結束.

之後陸陸續續來了幾個台灣學生一起上課, 這些人就是後來每逢假日一起出遊的遊伴. 但是我們並不是都住在同一棟宿舍, 後來才知道我們最先住的那棟是離學校警衛室最近的一棟, 週六週日各宿舍管理員都休假, 我們幾個週末到的學生就暫時被領到同一棟去, 隔沒兩天就通知要搬到各自"暑期"的宿舍. 我們學校的宿舍是一人一間臥室, 但是衛浴和廚房共用, 暑期住的是比較新設備比較好的宿舍. 但是9月正式開學還要重新電腦抽籤再搬一次. 這是學校的政策, 為了公平起見. 不幸的是我開學抽到的那棟離學校很遠, 走路要20幾分鐘, 設備簡陋隔音又差, 尤其不能忍受的是公共浴室只有浴缸沒有蓮蓬頭. 只住了一個星期就決定另外找房子.

後來找到一棟離學校很近, 圖書館就在對面的私人學生宿舍, 這棟宿舍只有本校學生身份的人才可以租, 只差在是校外人士經營, 不用抽籤, 還有電話撥接網路(當時我們學校的宿舍都沒有網路, 之後聽說有了), 設備不錯, 只是貴了些, 但我認為值得. 開學之後就經常泡在圖書館, 對我後來的優秀成績有很重要的影響. 短短二個月暑假就搬了4次宿舍, 隨著東西越買越多就搬的越累, 最後二次搬家乾脆叫來一台計程車給點小費幫忙搬, 塞了一車滿滿快塞不下去. 搬家很累, 之後到回台灣前就沒再搬過了.

我們的課從每天早上10點上到下午4:30, 市區的商店都只營業到5:30或6點就關門. 所以最初幾個假日大家都忙著上街採購食品, 衣物, 寢具, 餐具, 廚房和衛浴用品. 還要忙著開銀行戶頭, 買手機門號, 電話卡的事情. 這期間大家都會提供資訊互通有無, 例如那裡賣的便宜, 那些東西好吃(超市很多東西不知道怎麼吃? 好不好吃?) 開戶要準備那些證件, 買手機門號大家都買Vodaphone, 就不要去買別家門號, 因為英國的通話費貴, 網內互打比較便宜, 網外的就沒人要打給你,… 在這人生地不熟的地方, 消息靈通些可以少走很多冤枉路. 為了這些生活瑣事忙了快一個月, 等到第二個月把一切搞定比較不忙的時候, 才開始我們各地的旅遊計劃.

劍橋- Cambridge

2007-09-02T22:58:00.000+08:00

劍橋是英國東南邊ㄧ座小城, 因為最高學府劍橋大學(Cambridge University)在此而聞名. 有條小河Cam River穿越此城鎮, 中國人對這個地方熟悉可能是因為徐志摩一首"再別康橋"(他把Cambridge翻譯成康橋). "輕的我走了正如我輕輕的來我輕輕的招手作別西天的雲彩…".

2000年台灣公視有一部非常感人細膩的影集"人間四月天", 由黃磊, 周迅飾演徐志摩和林徽音, 就在國王學院後院的康河邊譜出一生難忘的愛情故事. 劍橋大學是擁有悠久歷史的學校, 百年前的景象和現在應該相差無幾. 來這裡除了感受最高學府的風氣, 也可以依照影片中的故事情節追尋一代文豪與才女的足跡.

依照往例, 我們搭火車前來, 一共6個人. 記得搭的是Midland Mainline, 這一趟火車發生一件有趣的事. 火車上的洗手間可能考慮有障礙人士的使用, 門做的很大, 呈半圓型以3個按鈕開啟/關閉/鎖上自動門 (英國火車有很多家, 不確定是否每一家都一樣), 同行的同學由於不太了解門鈕開關, 上到一半突然感覺屁股一陣涼, 原來她沒按上鎖, 外面有人要進來, 一按門鈕門就完全打開, 一覽無遺, 同學說那個人(還是位男士)也愣住了, 然後一直道歉I’m sorry! I’m sorry! 我的同學趕快穿好衣服就衝出來, 回座位後描述當時情景, 我們都快笑翻了, 只好安慰她反正這裡也沒人認識她, 說不定那個人的驚嚇程度比她還大! 當然, 之後我們去的都會先確定門已經鎖好了.

下火車順著馬路的方向往劍橋走, 碰巧遇見有對新人在教堂前拍照, 幾位伴娘與花童穿著水藍色禮服在門口準備唱詩歌迎接新人的樣子, 他們的婚禮看起來是很簡單隆重的.

劍橋大學自13世紀創校, 總共有31所學院, 最知名的應該是國王學院(King’s College)和皇后學院(Queens’ College). 有幾個學院緊鄰康河而建, 每個依河而建的學院都有一座小橋連接對岸. 河上不時有遊客經過, 大多數的船是狹長型的木舟由船夫撐著長篙緩緩來回穿梭. 我們來的時間正值暑假, 沒有什麼學生, 遊客倒是很多, 學院一樓的中庭, 後院, 走廊都會開放參觀, 但是每所學院都要買門票才能進去.

首先參觀的是皇后學院. 這座學院是15世紀亨利六世皇后和愛德華四世皇后前後二位皇后所捐贈建造的, 牆面是用木條和水泥夾雜而建, 和莎士比亞故居看見的很像,中庭上方有”日晷”, 是按照天文與數學計算方式用影格指示月日時和夏至春秋分. 是這個學院的特色之一. 第二個特色是學院後方橫跨康河的"數學橋", 據說是首座不用螺絲釘建造的橋樑, 以一根根木樁交錯搭建的, 但是現在看到的是仿造原來樣子重建過的. 走進學院裡面會經過一個漆著淡黃色有拱形門窗的長廊, 牆壁和地板映照著從窗外透進來的光影, 有一種簡約的層次美感, 中庭內外也種植不少玫瑰和各種草花植物.

皇后學院隔壁就是國王學院, 是國王亨利六世指示名匠建造, 從正門進去右手邊是"國王禮拜堂(King's College Chapel)", 外牆的尖塔圓柱雕工細緻, 裡面的天花板則是金黃色扇形的條狀紋路交錯而成, 兩邊一長排的窗戶用大片彩繪玻璃做裝飾, 地板是幾何形狀的黑色白色大理石材質, 從裡到外名副其實的呈現出"國王"的氣派. 但是裡頭是不准拍照的, 想留念的可以在出口處購買導覽手冊. 國王學院外頭轉角處也有日晷, 但是只單純顯示時間. 學院中庭是ㄧ塊四方形草坪, 正中央是亨利六世的雕像,除了中庭草坪, 國王學院後方還有ㄧ個面積廣大的方形後院, 在這後院可以看見康河上手持長篙的船夫載客穿梭. 這就是"人間四月天"的場景了. 我們幾個人在這草坪留連片刻後繼續往可以乘船的碼頭前進.

街道上有好幾家手工藝品店賣可愛絨毛玩具, 陶磁藝品和瓷器餐盤等. 英國是很重視餐具使用的地方, 有很多設計精美價位從高到低都有的餐具組(高低是相對值, 英國除了從大陸東南亞進來的日常用品便宜外, 在當地生產製造的產品都不會便宜), 當地知名的品牌是Wedgwood, 工廠設在英國中部, 離我們學校不太遠, 一位女同學參訪之後狠心刷卡買下一組幾萬元的餐具, 說是將來結婚之後要用的. 回國時我們幾位台灣學生的行李採集體托運方式運回台灣, 她的餐具組就只能留下來用手小心的捧上飛機. 有時候會很佩服她勇於追求夢想的決心. 後來聽說她在台灣結婚, 不久移居美國, 應該已經實現她的夢想了!

走走逛逛的來到碼頭, 我們搭了一艘有船夫撐著長篙的小船, 在英國這種船只有在劍橋看到, 其他地方都是大型輪船居多, 河面窄淺也許是原因之一. 河的兩側都是學院, 路上會經過幾個橋, 比如和威尼斯同名的嘆息橋(Bridge of Sights)), 威尼斯的嘆息橋是犯人從法庭往監獄時的嘆息, 這裡的嘆息橋是學生前往考場的嘆息. 另外還有廚房橋(Kitchen Bridge), 數學橋(Mathematical Bridge))和幾個不知名的橋. 當天下午天氣晴朗, 兩岸綠蔭垂柳, 水面波光粼粼, 是難得的片刻悠閒. 有時候前方的船會打在ㄧ起, 因為有遊客自己撐篙, 技術不太好.

下了船, 回程經過一座小巧可愛的圓頂教堂, 由於我們要搭的火車時間快到了, 沒什麼時間進去看, 只有在外頭拍個照, 後來才知道這種圓教堂是劍橋當地保留的古蹟之ㄧ. 但是我們最後幾乎是連走帶跑的趕到火車站. 通常這種一天來回的行程都很趕, 英國的火車可不是每個地方都像倫敦或伯明罕這種大城市有很密集的班次, 平均約2小時才有一班, 時間一定要先查清楚. 不然回去很可能是晚上11, 12點了.

英國治安雖然普遍比其它西歐國家好, 但是深夜走在路上被騷擾, 搶錢的情況也常聽見. 我們住的地方不是人口密集的城鎮, 還是有一段偏僻的路要走. 如果真的回來晚了, 都會從下火車的車站叫計程車回去, 英國的計程車牌照都經過嚴格審核, 包括司機的品性和過去的紀錄等, 牌照得來不易, 所以英國的計程車是可以比較放心的坐, 很貴就是. 不過這種錢就不能省了, 安全第一.

註:
英國的火車車廂高度與月台同高, 當火車停好車門打開, 與月台的接縫是很緊密的, 比較像台北市捷運, 旅客可以很方便的推大行李箱, 腳踏車或輪椅進出. 月台間的地下道也像地下停車場那樣是平坦無階梯式的. 我因為搭火車上下班, 發覺台灣的火車不管自強, 莒光或復興號, 車廂與月台間總有半步的高度和寬度差距, 車門窄小外, 還做了二, 三階的階梯, 對行動遲緩的老人和小孩上下車時造成極大不便, 更別提有障礙人士. 不知道誰能回答台鐵的車廂爲什麼不能和月台等高, 車廂內爲什麼還需要階梯?

還有, 大多數火車站也只提供階梯式的天橋或地下道穿越月台, 直到去年才看見新竹火車站裝起電梯. 曾在電車(現在稱區間車, 門比較大)遇見有位坐輪椅的人要經由站務人員協助, 用厚木板在月台和車廂間搭起斜斜的木橋推輪椅上車, 下車再用相同方式推下來, 但他們是怎麼從第一月台跨到第二月台就很納悶了! 只能搖頭, 台灣有障礙人士的障礙真的很大! 應該請所有鐵路局的人推著大行李或輪椅搭一趟火車實際體驗一下狀況.

訪故宮有感

2007-08-06T01:12:00.000+08:00

上一次去故宮是國中的時候, 只在門口照照相, 沒有走進去看. 去年看見”Old is New 時尚故宮”的活動及最近博客來故宮授權商品販售, 引起我的注意, 所以趁休假期間實地造訪一趟故宮. 故宮周圍景觀和國中時的印象差不多, 只是正對大門那三棟高聳的住宅大樓很煞風景, 不知道是什麼時候蓋的, 不然這裡也算好山好水, 適合不論從哪裡來的人有個美好的文化之旅!

據說故宮的館藏是全世界排名前幾名的, 只是知名度一直不高, 外國觀光客也不多, 連台灣本地的訪客都少, 在非假日期間恐怕只淪為小學生的戶外教學場所. 畢竟會只爲了參觀故宮來台的遊客不多, 這需要比較成熟的觀光環境做配套.

故宮的主要展覽區在1~3F, B1是紀念品區和候車區(公車和遊覽車等候區), 我從3樓開始逛. 3樓是玉器, 青銅器和多媒體介紹區, 從樓梯走上去會先看見多媒體介紹區, 基於職業因素, 這一區想當然耳要仔細的瞧一瞧.

為了燈光和液晶螢幕的展示效果, 整個房間是暗的. 配合著音樂, 這個展區充滿了遠古時代神秘緩慢的節奏. 門口一台觸控式螢幕的介紹也以黑色為基調做透光效果的動態文字, 與整個空間的氣氛是可以互相融合的. 很多知名建築設計也講求將空間納入整體設計中, 以不著痕跡的手法將設計融入自然環境, 或者也可以說是將自然環境融入設計之中.

配合展區主題, 另外幾台螢幕是介紹青銅器製作方法的動畫. 在英國唸書期間有去大英博物館, 好像沒有類似的設施, 當時因為時間因素, 只參觀埃及館和中國館(想看看他們火燒圓明園時搶走那些東西), 不是很肯定其他館有沒有. 這樣的設施是可以肯定的, 透過這些多媒體輔助介紹, 能幫助參觀者了解更多時空背景, 歷史典故和製作方法, 因為這些資訊光看文物是看不出來的.

以歷史來說, 青銅器展區的文物是最悠久也最陌生的, 以前唸的歷史書只記得有鼎這一項. 而這些奇怪形狀大大小小的"鼎"不知道是什麼用途, 各有我認不出也唸不出的名稱寫在一張小小的牌子上, 短短幾個字的說明又很文言, 一般民眾的文學造詣應該沒這麼好吧! 文字中也沒提到是那一項器具, 做什麼用的? 門口牆上是有酒, 食, 樂, 兵, 量器的說明表, 但這是要考驗我的記憶力進來做對照嗎? 幾位外國觀光客頭上戴著語音導覽器, 不知道是不是有更詳細的說明, 我自以為不是外國人就沒借, 要在一樓入口處借, 我又很懶得再走下去! 以網頁設計語言來看, 這個導覽做的不好, 我不知道現在看的是什麼東西, 說明既不易讀也不易懂, 這一點需要改進! (職業病做祟)

接著參觀玉器, 這一間展區人最多, 都是為了"翠玉白菜"吧! 但是實際看這棵白菜有點失望, 印象中是晶瑩剔透的大白菜, 但真實的卻是很小棵的青江菜, 質地也不是那麼透亮, 所以看照片是不準的. 也可能其實是不錯的, 只是我既存的印象對它期望太高. 我反而喜歡放在後面的"白玉錦荔枝", 是二個苦瓜疊在一起的白玉, 非常精巧細緻, 稱錦荔枝是因為苦瓜之名不雅而另外起名的. 另一個"肉形石"也很巧奪天工, 是玉雕的一塊控肉, 肉皮雕的真是唯妙唯肖, 連毛細孔都做出來了.

2F是從隋唐至宋元明清的陶器瓷器和彫刻工藝展, 這些文物比那些"鼎"好辨認, 茶壺, 花瓶, 碗盤, 筆筒硯臺, 玉器飾品等, 和現代人所用的器皿差異不大, 沒有清楚交代用途的說明文字也無坊, 只標示年代, 材質(陶, 瓷, 玉, 石)和名稱也可以理解. 我喜歡 "明宣德時期　祭紅霽青刻花蓮瓣滷壺一對"是一對深藍與略為深紅的茶壺, 祭紅霽青是二種顏色的形容詞, 古人對器皿和形容詞的命名也很講究, 如果能用這樣的茶壺喝茶會不會更有文化一些?

有一隻宋元時期的"墨玉貓"我也很喜愛, 身體還蜷縮著, 剛抬起頭, 睡眼惺忪的黑色小貓, 模樣很可愛, 如果可以把它複製成公仔收藏有多好呀! 還有幾個像糖果盒大小的"剔紅漆盒". 在這個展區多數是陶器瓷器, 像這樣的大紅漆盒就顯得特別醒目, 故宮網站首頁的紅色雕花圖片就是這種漆盒. 其他還有金彫葫蘆, 象牙彫刻, 橄欖彫刻等做工很細的彫刻, 櫥窗內也有一只放大鏡讓人可以看清楚細部.

這裡看見的是每個時代最精湛的工藝作品, 可以看到它的材質, 色彩和審美觀的演變, 再來是創作者的巧思與手藝, 這些作品如果拿到IF 或 Red Dot這類世界級產品設計獎評比也絲毫不遜色吧! (2F有個咖啡廳可以進去喝茶或喝咖啡, 歇歇腳, 走完2, 3樓腿已經很痠了. 非假日期間很清靜, 沒幾個人, 在這裡看書也很適合.)

1F 是家具書籍繪畫展, 除非對中國書畫有些研究, 不然很難談得上喜不喜愛. "清明上河圖"是最耳熟能詳的, 有個長型觸控螢幕的"清明上河圖"放在1樓中間, 圖中有三個點可以觸發牆上的投影片, 播放圖中人物從碼頭開船, 在街道行走和開啟城門進城的動畫, 畫中人物的生活起居就在眼前活了起來! 這樣的互動效果很能加深訪客的印象, 也是多媒體應用到博物館很好的方式.

"舊"要好好保存, 但是"舊"要用何種方式和"新"接軌, 讓更多新世代的人重新認識"舊"是值得思考的. 很贊同故宮這1, 2年的改變, “Old is New 時尚故宮”相信是可以走向另外一條不同路的新希望. 故宮網站有故宮出版與圖像授權等授權規章出來, 要用祭紅霽青茶壺喝茶的機會很高了, 當然還有那隻"墨玉貓"公仔.

B1紀念品區已經有不少複製品, 但很多是重新設計或材質不佳, 重新設計沒有不好, 但是把"翠玉白菜"設計成像卡通造型的"菜頭"我就沒有很喜歡, 也許我不夠年輕, 無法將卡通菜頭和翠玉白菜聯想在一起. 要列為可以收藏有文化品味的藝術品, 質地做工一定要講究, 和買一堆粗製濫造的紀念品的意義不同. 我在紀念品區逛了好一會兒, 買一個沒有手把的茶杯(它的圖樣類似古時候的衣飾紋路, 也有做成手提袋, 錢包化妝包, 手機袋等物品)和仿"嬰戲圖"的立體文鎮.

有一本" 新美學商機", 范子凡著, 談的是藝術授權(可複製藝術作品的權利). 書中提到在國外不論是卡通造型授權, 時尚授權, 運動授權, 娛樂授權, 商標授權還是藝術授權, 都已經行之有年, 所衍生的產品附加價值很可觀. 例如一組白色沒有圖樣的咖啡杯賣399元, 另一組印上名畫圖樣的咖啡杯賣799元, 這就是附加價值的產生, 賣的是美學和藝術生活的市場. 藝術授權是一種文化產業和文化輸出, 會著重於商業價值而非曲高和寡的藝術性. 書中還提到: 目前的高科技產業硬體發展已經飽和趨緩, 紛紛訴求提供更精緻豐富的軟體內容, 如手機要加值服務, 電腦要下載內容, 電視要頻道供應. 所以, 以內容和服務為其他產業提供附加價值的"內容創意產業"的需求會逐漸增加.

"當功能發展到極至時, 就是美學取勝"這說法可以在PC, NB或手機產品得到印證, 各家廠牌的硬體技術都達到差不多的高點時還能比什麼? 市面上的PC, NB要應付一般的上網, 遊戲和文書處理需求早已綽綽有餘, 能比的當然是設計, Apple就是最好的例子. 本土的華碩(ASUS)近年表現也不錯, 不斷追求不同造型和材質的突破(皮革, 法拉力跑車NB), 也不斷得獎. 對照曾風光一時的宏碁(Acer)是不是就能感覺出差異? 去年我也買一台ASUS W7 白色的NB, 評比幾款價格功能差不多的廠牌和機型後, 最後決定的關鍵因素是: 我喜歡W7的設計.

我的職業病又犯了! 又要轉回網頁設計的角度看. 網頁設計的工作也應該以創造附加價值看待, 除了為網站設計易讀易懂, 有清楚導覽機制的網頁外, 也要能合宜表現出網站的意涵與外觀, 增加客戶滿意度, 減少企畫網站和程式coding的時間等, 都是提升網頁設計附加價值的方式, 而不是用按件計酬(時)的方法計算(雖然這是目前普遍的情況). 網頁設計師價值的建立是在創造附加價值, 不在加工. 所以, 要以"設計師"自許的話, 請以此自勉吧!

新的Web 標準- Html5

2007-07-29T01:50:00.000+08:00

27日參加一場由資策會創新應用服務研究所舉辦的"W3C網頁標準-推廣與應用研討會", 會中提及W3C新的推薦web標準已經從Xhtml1.0改成Html5了. (Html復活了! 太久沒上W3C網站, 連標準也改了.)

之前因為Html的語法不夠嚴謹, 希望以Xhtml1.0做為銜接Xml的橋樑, 況且Xhtml2.0還在草案階段中. 顯然使用Xhtml也有它的問題存在: 如實際上並未真正扮演橋樑的角色, 與Html無太大差異; 另外就是瀏覽器開發者的支援問題- Apple，Opera及Mozilla已經表態支持以Html5做為新的推薦web標準(Proposal to Adopt HTML5).

從W3C最近公佈的"Html5與Html4的差異性" (HTML 5 differences from HTML 4)文件可以看見Html5新增很多element(元素)和attribute(屬性), 尤其是關於表單的部份(稱Web Form2.0). 而header, footer, nav, article, section, vedio等慣用的css名稱也將直接定義在Html的element裡面. 再來, 喜歡用frame做系統平台或網頁的要注意了: frame, frameset, noframes 因為違反使用性的原因將不存在於Html5中, 但是建議改由css呈現frame的類似外觀.

Html5預計2010年要完成制定, 詳細時程如下 (Schedule of Deliverables) :

2007 Mar: convene the HTML Working Group
2007 Aug: First Working Draft
2008 Q2: Last Call Working Draft
2008 Q3: Candidate Recommendation
2010 Q2 Proposed Recommendation
2010 Q3 Recommendation

但是要落實到各家瀏覽器廠商都支援的階段恐怕還有一段路要走, 所以還可以觀察一陣子!

列印出網頁背景圖的方式

2007-07-08T02:10:00.000+08:00

有沒有遇見過客戶要求將網頁背景用印表機印出來的? 一般網製作都會盡量將背景圖, 背景色或icon裝飾圖片用css或table放到背景裡當網頁底圖, 只有文字和新聞照片才會放在html. 無法列印背景是瀏覽器的特性, 目的應該是不想干擾文字的呈現.

曾經有二個客戶提到這個問題: 一個比較好解決, 他的目的是希望可以將背景圖印出來做成報告呈給長官看, 但是缺少背景圖的網頁印出來只有文字和線條, 做不成漂亮的報告. 我提議用"螢幕列印"方式拼出頁面圖檔給他印, 但是他希望可以自己想印的時候印, 所以不喜歡這種方法 . 後來是我們的PM告訴他可以調整瀏覽器的設定才解決這個問題.

瀏覽器的設定可以到瀏覽器的"工具 / 網際網路選項 / 進階" 將 "列印色彩的背景及影像" 這選項打勾, 之後再到預覽列印就可以看到背景的顏色和圖片都顯示出來. 於是這位客戶的問題就解決了!

另一個比較麻煩, 我竟然也連做了二期, 和他照面二次. 第一期他希望將頁面中的選單, 標題和條例項目的icon圖都印出來, 可以清楚呈現這些用css做在背景的icon圖示, 例如箭頭, 圓點等. 但是我們知道css只有條列項目(list-style-image)的icon圖可以被印出來, 其他的不行. 所以當他看見用< li >寫的條列項目的圓點圖示可以印出來, 其他用< h >寫的圖示印不出來時, 就很堅持一定要想辦法達成全部印出來的要求. 第一次遇到這麼"盧"的客戶, 和他解釋瀏覽器的特性也沒用, 所以只好將所有icon圖都從背景拿出來放到html才解決這個問題. 這是很笨的方法, 但是笨方法可以解決問題的話也只好用了.

第二期我們又照面了, 一開始他沒提這種要求, 我也決定不再理會他, 直接將圖示都改放到背景. 在轉移舊資料時就發現第一期放在html的icon圖也跟著轉進來, 這是笨方法的下場, 於是上稿的人要比較辛苦的拿掉這些icon圖. 只是果不其然, 最後快要驗收時他又再次提出相同的問題, 但是這次他沒這麼堅持了, 也就得以維持原狀交差. 但是我還是想知道究竟有沒有人有列印背景圖的方法, 於是開始又搜尋Google.

搜尋的結果發現竟然有很多人在討論區問相同的問題, 大多數也都是遇到這種"盧"的客戶在求助的. 在這當中有個天才Andreas提供一個"偏方", 就是運用list-style-image 的特性印出背景圖, 他的example頁面是 Printing CSS background image . 說明頁在Web-Graphics.

他在h1下一個名為id="title"的style, 這組id如下:

#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}

上面的寫法依序說明如下:

1. 將h1的display設為list-item, 以條例項目型態顯示
2. 將list-style-image設為範例網頁中的banner.jpg
3. 這是考慮firefox的設定, 將圖示呈現方式改為"內縮"
4. 讓html上面h1的文字消失, 於是將letter-spacing設為-1000em
5. 但是4. 讓文字消失的方法在Opera沒有作用, 所以再將字級設成1pt並且和背景色同為白色, 這樣在Opera也看不清這些字了.
6. 在title名字加斜線"/" . 因為這方法在IE5和5.5無效, 所以用加斜線方式讓IE5和5.5因為無法辨識這種名稱寫法而不影響樣式呈現. (也就是讓IE5, 5.5以原來無背景圖, 只呈現標題文字的方式顯示)

這種方式只有在IE6, Firefox 1.0 and 1.5 and Opera 8.5有效, 但是這篇文章是在2005年12月25日發表, 所以只測試這些版本的瀏覽器, 但是我在IE7, Firefox2和Netscape8看也是OK的.

多虧這位Andreas想得出這種方法, 我會稱這種方法為"偏方"是因為< h >本來是標題的意思, 在css中改以條例項目型態顯示(list-item)有名不正言不順的嫌疑, 但是真的遇到這種"盧"的客戶也只好用了.

好用的方法介紹給大家參考!

網頁設計思考之一

2007-07-04T23:52:00.000+08:00

一直在思考一個問題: 怎樣的設計算好的設計? 是否有規則可循? 應該注意什麼?

一個很漂亮的網頁模板應用到不同案子往往呈現出不同的效果. 例如: 韓國網頁設計模版的顏色和圖形配置都很漂亮,但是要套用到我們的專案時總有不對勁的地方, 經常從上百個模版來來回回找不到一個合適的.可能我龜毛, 但這不是主要的原因. 原因是網站的主題不同, 區塊數量不同, 擺放位置也不同, 如果要置換掉圖片, 畫面整體色調和風格就差很多, 如果要新增或刪除某些資料區塊, 原來很平衡的版面配置和結構就破壞了, 所以最後還是選擇自己重新設計.

當然認為省時省力用的很高興的人也大有人在, 可能神經敏感度比較弱吧! 顏色亮一點暗一點, 位置左一點右一點, 字大一點小一點, 都是影響畫面的因素之一. 如果分辨不出這些細微差異也不用期待有什麼好作品產生. 從事設計的人得把"眼光"和"敏銳度"調高一點才有可能做出好作品, 才有進步的空間.

我是不喜歡讓規則綁死的人, 但是規則沒有原則應該有的, 可能一直依照某些原則做. 只是長年累月下來已經內化成為直覺, 如果要再外化成語言文字形容出來就需要仔細回想和整理. 這就好比回答穿衣服是先穿左手還是右手, 先穿左腳還是右腳一樣, 需要模擬一下才有答案是吧!

按照設計流程歸納出應該注意的幾點:

1. 清楚網站需求和規劃

好的設計除了自我的主觀認知外, 應該要符合客戶, 使用者和企劃的期待, 在操作介面, 使用功能, 資訊結構和視覺感受上都能滿足需求. 所以漂亮不是好的設計唯一追求的目標. 在開始設計時要清楚整個專案的需求和規劃的方向才好做整體思考, 並預留近期內(2~3年)可能新增資料的擴充性. 漏了其中一二項要再找空隙補進來都很容易破壞畫面, 需要重新調整版面. 時程掌控和團隊成員也很重要, 總是有機會遇到老在狀況外或傳遞錯誤訊息的天兵, 沒法殺了他就只能自立自強一點另外找人問清楚. 因為事情最後沒做好要再去責怪誰都無濟於事.

多數設計人員會本能的以視覺為優先考量, 一旦要求顧慮其他功能需求總會有顧此失彼的情況. 例如無障礙化或web標準化的要求下, 很多動態呈現效果必須放棄, 限制了畫面的可變化性. 當功能為必需時, 設計之前一定要先將這些因素考慮進來.

2. 區分網站型態和主題

以資訊為主的網站本身資料多, 設計時以能夠協助讀者區隔和辨識資料並流暢的引導閱讀內容為主要目的. 很忌諱加太多背景圖和琳琅滿目的icon, 造成畫面擁擠, 找不到喘息的空間. 企業網站的話, 視覺感受可以強一些, 表現希望傳達的印象和公司理念, 重點資訊應該擺在主推的產品介紹, 其他的是其次, 不需佔用太大面積. 而資料少的網站就要仰賴技巧性的留白, 色塊或者裝飾圖片撐版面, 避免看起來空洞. 但是資料太多也不是好事, George Miller有項心理學法則(1956年): "魔術數字7加減2" 指出人一次能處理或記憶的資訊數量大概只有7項, 多了也記不住, 反而模糊了焦點. 網站首頁設計也一樣, 只需把希望人家知道的重點依序強調出來就可以.

主題清楚的網站很好選擇插圖和背景, 例如介紹農產品的知識網站, 是鳳梨的就擺上鳳梨照片, 是水蜜桃就擺水蜜桃照片, 絲毫不含糊. 但是像範圍涵蓋台灣風土民情, 資訊科技, 生活體育, 衛生保健等主題廣泛的網站就很難只選擇其中一二項圖片作表現. 如果只放科技圖片會被誤以為是科普網站, 只放風景照片也容易被誤認為是旅遊景點介紹, 侷限了這個網站的主題. 如果要用合成方式縮小照片同時放很多張的, 又容易看不清楚照片內容, 造成圖片雜亂混合在一起不好看的情況. 所以經常有人為了要選哪一張主題圖片和客戶糾纏不清.

比較好的解決方式有三種: 一個是採用多張照片輪播(Flash或程式控制), 可一次清楚呈現多個主題; 一個是允許客戶自己依照當時的焦點內容更換主題圖片, 但是這一點必須視客戶的製圖能力而定, 避免讓他"上窮碧落下黃泉去找一張圖"的困擾(一位客戶就是這樣形容他的痛楚); 另一個是乾脆不要放主題圖片, 將網站的Logo和Title名稱修好看一點, 取代主題圖片成為視覺焦點. 很多所謂web2.0 的網站是這麼做的, 可以減少像這樣的爭議問題.

3. 構思網站版面和層級

了解需求和主題型態之後就依據資料結構做版面配置和風格設計. 先從重要性分配資料區塊的面積和位置, 再設定合適的風格繪製主題icon圖像. 基本的要求是文字排列要工整(注意中英文版文字表現的差異), 段落與邊界的距離留白適當, 色彩的選用搭配協調等. 以資訊網站來說, 做到這幾點就成功一半了. 不需要堅持一定得放多少圖片才對得起客戶. 和歐美的網站比較起來, 台灣的網站設計花俏繁複了點.

網頁一致性原則也很重要, 內容文字的連結應該統一一種顏色表示, 使用者才容易辨認出這是可點選的連結. 除了選單按鈕之外, 應該避免上面區塊的連結一種顏色, 下面區塊連結又一種顏色, 到另一個頁面又有各自不同的顏色. 標題也是, 相同層級的標題應該用相同的圖示或大小粗細相同的字級表示. 這觀念和書籍排版一樣, 每本書都有目錄, 對照目錄的層級在內頁看到的大標小標都有一致的樣式呈現, 才能辨認目前這段文字在整本書中屬於哪個層級. 但是很多網站設計沒有這種觀念, 每個頁面使用各自不同的標題設計.

4. 與客戶溝通

客戶的意見需要尊重, 但是發現有疑慮時應該提出來討論, 另找一個合適的解決方法. 設計師的專業就表現在可以預先知道可行和不可行的情況. 一味遵照客戶意見做容易有才改了一個問題又衍生另一個問題的情況, 拉長修改的時間. 但是要設計師像拼圖一樣拼湊出客戶腦袋中的想法是頗高難度的. 有一種客戶無法清楚描述想像中的畫面, 但是又很堅持一定要做出他要的樣子, 所以就藉用你的手不停的修改. 遇上這種客戶是設計師最無奈的事!

也有一種很害怕被貼標籤的人, 明明不喜歡藍色想改成綠色, 又不方便明說, 於是"指鹿為馬"改這改那的, 看你什麼時候可以猜到他要的顏色. 如果不識相的直接問喜歡什麼顏色? 只會得到"依照施政方針"這類模糊的答案. 有時候客戶說出來的不見得是他真正的想法, 設計師可能要像"決斷2秒間"這本書提到的: 做準確的"薄片擷取", 找出真正關鍵的點才能對症下藥. 所以做設計不是太難, 要面對這些難搞的客戶比較難.

上述整理的多半是實務上容易遇見需要注意的地方, 不著重在畫面的細節, 因為設計的基本功夫參考網頁設計或平面設計這類書籍就可以, 像之前介紹的幾本書都不錯, 不需要談相同的東西, 我也不會寫的比這些書好.

正常來說, 每一段時期應該有不同的想法出來, 表示有進步. 用"看山是山; 看山不是山"來比喻設計應該是很貼切的. 隨著認知了解程度的不同, 看法也會不同. 希望以後我還有另外不同的想法出來, 寫成思考之二, 之三... .

愛丁堡 (Edinburgh) - 下集

2007-06-20T00:37:00.000+08:00

>> 承接 [上集]

愛丁堡城堡大門前的這條斜坡路名為Royal Mile, 幾乎所有的街頭藝術表演都集中在這條路上, 這些藝人聽說來自世界各地, 有的表演舞蹈, 有的彈奏樂曲, 有的雜耍特技, 有的打扮成石膏像或銅像定住原地不動, 從全身上下的裝扮看不出有破綻, 除了那雙久久還是要眨一下的眼睛. 當然也有只是穿著奇裝異服完全看不懂在表演什麼的藝人. 路上任何感興趣的表演都可以停下來觀賞, 只是最後不能免俗的要給幾個銅板表示鼓舞和讚賞.

在這些表演當中最令人興奮的莫過於穿著蘇格蘭裙吹著蘇格蘭樂曲的風笛演奏, 小時候電視有一部”小甜甜”卡通, 每次”山坡上的王子”都是以這種裝扮吹著風笛出現在小甜甜面前, 從那時候我就知道英國的蘇格蘭有這種傳統服裝和音樂, 只不過是在幾十年後親眼目睹了真人的表演. 前陣子有些懷舊卡通重播, 但就是等不到”小甜甜”這部, 市面上也找不到. 我們那年代有好多溫馨感人的經典卡通值得一看再看.

在藝術節期間除了街頭表演, 還有很多是室內的影劇或電影欣賞, 市中心有統一的售票中心, 比較熱門的表演要先預訂. 我們幾個人是為看表演而看, 也就隨便挑一齣戲劇看, 當時就沒有留下什麼印象, 現在更是想不起來劇中表演什麼? 一幕都想不起來! 這也是我要在部落格寫這些旅遊經驗的原因, 人的記憶會隨年齡減少衰退, 希望趁我還有印象時趕緊寫下來, 不然總有一天我可能連去過的地名都想不起來. 其實很多人都是抱著同樣的心情寫紀錄或回憶. 詹宏志有ㄧ本"人生一瞬", 前半部寫他小時候的回憶, 後半部是他在世界各地的遊記(我比較喜歡前半部). 這本書說的不錯, 很多存在記憶中的印象是破碎的, 要重建這些記憶需要些許想像串接, 留存的印象也許與事實有差距, 但總比完全想不起來要好些. 我的遊記還好有這些照片, 回憶起來會容易一點.

從城堡順著Royal Mile往下走有個St. Giles Cathedral, 是愛丁堡城的大教堂(具規模的大教堂都稱Cathedral), 屋頂的尖塔很像皇冠形狀. 這一路有不少古建築和小型博物館可以入內參觀, 不過我們幾個人走的多半是街道巷弄, 公園綠地等戶外路線. 和Royal Mile平行的是Princes Street, 對照Royal Mile的舊城, 這條街是所謂的新城, 比較現代的商店速食店都在這裡. 這條街附近有個公園, 我們買了午餐就到這裡休息, 很多鴿子和綠頭鴨也跑來和我們一起分享午餐.

幾個同學說晚上要去城堡前一家"幽靈餐廳"吃飯, 餐廳之內伸手不見五指, 但是可以感受到與幽靈共進晚餐的氣氛. 對這種事我就沒太大興趣(敬而遠之), 他們回來之後問真的有看到幽靈嗎? 答案當然是沒有, 但是別人可能有! 對這種答案不知道該慶幸還是失望.

有其中一天我們坐火車要去愛丁堡北邊的Dundee看Glamis Castle, 一個有很多圓形尖塔, 像童話故事般粉紅色的美麗城堡, 我是在愛丁堡的一張DM介紹中看見的, 就決定要去看一看, 我們有5個人一塊兒去, 但是去程光坐火車就花了2個多小時, 到Dundee時已經中午一點多鐘, 從火車站到這個城堡還要再坐約1小時車程, 算算時間真的很緊, 就算趕到了也得立即趕回來, 因為我們的火車票是買來回票, 不能延誤(英國的單程和來回票價差很多). 這就是一時興起欠缺規劃的後果了, 所以只得放棄去城堡的念頭, 留在這個城市逛. 於是我們就到遊客中心尋問市區有什麼好看的, 結果就是一艘停在港口邊一百多年前建造的軍艦開放遊客觀光, 可以上船看看那時候軍艦上的砲火設施以及船員生活起居的船艙. 下了船就順著市區街道隨處走走逛逛, 然後就搭火車回愛丁堡. 挺無趣也挺失望的一天, 不過Dundee後來卻成為我們在英國所去過最北邊的地方. 英國最北邊是Highland(高地), 也相當有名, 冬季嚴寒, 有很多特殊自然景觀, 傳說中有水怪的尼斯湖就是在Highland這一區. 不過要從我們學校到這裡真的太遠了, 一直到畢業回台灣為止都沒有再往更北邊走過了.

另一項臨時起義的就是參加tour團去繞Stirling古堡和Loch Lomond湖. Stirling在愛丁堡往西到Loch Lomond湖的中間點, 這城堡和愛丁堡一樣位在懸崖之上, 同樣是可以從城堡中俯看整個城鎮全貌的軍事要塞, 城堡中有好幾台大砲, 瑪莉女王也曾待在這裡接受保護. 但不同的是這城堡規模比較小, 四周看下去多半是田園不是城市, 城堡內展示當時的房間和廳堂, 並有幾尊臘像穿著當時的衣服佇立在幾個房間中. 這城堡的周圍是古代的戰場. 英國和日本一樣是島國, 在境內很少有外敵入侵, 但是他們自身南北的爭戰在幾世紀之前是很頻繁的.

Loch Lomond是英國最大的淡水湖, 我對這個湖的印象來自一張由 Moira Kerr (莫拉可兒)演唱英國BBC節目"Eagles Eye View"的CD : MacIain Of Glencoe ( 線上試聽 ). 其中有一首歌名就叫Loch Lomond, 是這張CD中最令人屏息的歌曲. 這是朋友推薦的, 整張CD大部份是英國蘇格蘭民謠, 由Moira Kerr以高亢優美的歌聲重新詮釋. 所以到英國之前我就知道有這麼個湖, 只是沒想到後來真的來到這個地方. 我們來的這一天天氣灰濛濛的下著小雨, 視野不是很好, 據說天氣晴朗時風景優美, 湖的四周也有很多知名的景點, 很適合用健行或騎腳踏車的方式遊覽. 當然我們參加的是tour團, 只能跟著導遊短暫停留. 跟隨著團我們到一處莊園前面停留休息, 這莊園有養牛和羊, 這裡的牛是褐色的, 長著長長毛髮遮住眼睛, 和台灣短毛的水牛黃牛很不一樣, 大概是這裡的冬天寒冷, 才會有這種長毛的牛, 我還伸手去摸牠的頭, 很溫馴可愛的牛.

這一路雖然有預定要去但是錯過的, 也有非預期中但曾經響往的, 意料之外的好的和不好的都有. 但這也是我在英國唯一一次比較沒有規劃的隨興的旅遊. 有了這次的經驗, 之後的行程都會先做比較完整的規劃. 在英國期間的旅遊幾乎都是交給我上網找資料規劃行程. 同行的同學多半沒有意見. 其實他們是懶得找, 只要有人可以幫他們找到好玩的地方就很高興了, 去那兒都沒意見. 所以我想到那兒就到那兒囉!

愛丁堡 (Edinburgh) - 上集

2007-06-04T00:43:00.000+08:00

愛丁堡之行是在Precession Course結束, 正式開學之前的空檔, 約八月下旬的時間.我們的 Precession Course 除了念語文, 也教學生如何寫Essay (短篇論文). 英語的論述文體習慣在文章起始處列出要闡述的項目, 要探討什麼? 各章節段落之前也要交代本章重點, 中間就按照前面所列的項目將蒐集的正反意見一一論述, 最後再做總結和提出個人的看法. 所以他們只需看第一段就知道這篇文章要說的重點, 看最後ㄧ段會知道文章的結論, 中間則是按照第一段提的項目到做出結論的過程. 英國老師常說教過很多國家的學生, 總覺得很難理解東方學生寫的文章, 往往要花很大的耐心看了好幾段描述, 最後才知道他們要說什麼. 這就是文化的差異了, 從小我們就被教導文章要有”起承轉合”, 喜歡”柳暗花明又一村”的驚奇感受, 所以很多學生會用相同的方式寫英文, 難怪這些外國人摸不著頭緒.

這是題外話, 我是7月初先到英國唸2個月的Precession Course, 所以在9月中旬開學前的這2個多月時間就利用假日走訪很多地方, 例如: 倫敦, 劍橋, 莎士比亞故居, 巴斯, 諾丁罕, 愛丁堡等. 到正式開學後就沒什麼時間玩了, 一年的課程是很緊湊的, 除耶誕到新年期間和復活節各放10天左右的假之外, 並沒有寒暑假. 整年課程分三學期, 每學期結束會放1~2星期的假. 當初選擇英國留學的主要原因是只需一年時間和嚮往他們豐富的文化遺產, 但是當我畢業要回台灣時就發覺一年時間太短了, 還有好多地方沒去呢! 為了趕赴一年一度的8月藝術節盛會, 這一趟愛丁堡之行幾乎所有唸Precession Course的台灣學生都參加了(約12 人). 我們雖然搭同一班火車, 住同一個地方, 但白天就3或4人各自散開走自己想走的地方, 但經常走著走著又會在路上碰在一起.

剛到愛丁堡就發現這個火車站很特別, 它是一面高一面低, 低的是我們進站的地方, 高的是另一面要走上1~2層樓高的階梯, 出口就是愛丁堡的主要街道North Bridge. 站在街道上極目所望的都是中古世紀的建築，在以往的旅遊經驗中, 還不曾看見如此大規模完整保留的街道和建築. 這城市的街道並不平坦, 即使主要幹道也因為地形關係高高低低的坡度相當大. 遠遠就望見愛丁堡城堡矗立在這個城市的最高處. 這城堡自古以來就是英格蘭和蘇格蘭征戰中的重要場景.

愛丁堡位在英國北部蘇格蘭地區, 有個愛丁堡城堡(Edinburgh Castle)在此而名, 自古是蘇格蘭的文化和行政中心. 城堡建在一座小山上，它的三面是懸崖, 只有前門是唯一可進城堡大門的斜坡道路稱Royal Mile. 站在城堡中可以俯瞰整個市區, 這個城堡因為優越的地理位置曾經是皇宮和軍事要塞, 現在則是蘇格蘭的戰爭博物館. 在城堡內還能看到整齊排放的古時候的巨炮, 戰車和各種兵器戰袍. 城堡有一區是以前的王宮, 這王宮最著名的就是關於瑪麗女王的事跡, 並且展示蘇格蘭王冠、權杖和寶劍等王位繼承的信物。

這裡先簡述一下瑪麗女王的故事: 自古以來, 在南方的英格蘭就想擴張王權統禦北方的蘇格蘭, 而蘇格蘭也一直想擺脫被統治的命運. 從13世紀末開始, 南北的爭戰就持續了百年之久. 在14世紀之後, 英格蘭就掌握優勢. 到16世紀, 瑪麗的弟弟繼任王位, 不久因獨立的戰爭兵敗身亡. 之後瑪麗繼任王位, 卻因為宗教等因素失去王位, 先被囚禁了20年才又被伊莉莎白一世以判國罪名處死. 在英國的歷史中, 瑪麗是很令人同情的一位女王.

在每年的藝術節期間, 城堡裡面都要舉行著名的軍樂隊表演"Edinburgh Tattoo", 這表演從1952 年到現在已經有 58年的歷史. 是藝術節期間的重頭戲. 不過很可惜, 我並沒能親自參與這場盛會, 是聽同學回來口述及看他們用數位相機拍回來的斷斷續續的"短片".

每年Tattoo的門票在正式開演前幾個月前就預售一空, 不過有ㄧ種票是曾經有人預定, 但後來因各種原因無法參加的"退票", 這種票每天的數量不定, 由負責銷售門票的Box Office於每日一早代售前一天的退票, 這種票不提供預定, 必須親自排隊購買, 好壞位置和票價高低無法選擇, 你不買還很多人等著買呢? 我同學聽說一個人可以買2張, 於是我們猜拳派出6人一大早出去買票, 我和剩下的人則繼續好夢. 這幾個人也算起的夠早, 真的有買到票, 但是只有6張, 原因是政策改變了, 一個人只能買一張. 好啦! 我們又得猜拳一次, 不過也有自動棄權的, 我就是其中之一, 原因是並沒有非看不可, 不如把機會讓給不看就會”遺憾終生”的人. 但是當我看他們拍回來的照片時發現: 還真是不錯的表演! 所以後來只要有人說8月要去愛丁堡藝術節的, 都會推薦他們去看看Tattoo. (這些照片當然也是同學們拍的, 大家share 來share去, 當時也沒想到要標注, 想認領加注的請告訴我)

這些軍樂隊是由各國派隊參加, 藝術節期間每天晚上在愛丁堡城堡前廣場約90分鐘的表演, 表演時城堡會妝點上五彩燈光做為舞臺背景, 有表演傳統軍樂的(如打鼓吹號角), 也有表演特技或搞笑的. 節目表/代表隊伍國家/表演項目都會公佈在網站上Visit the Edinburgh Military Tattoo website , 票價因位置不同從13~40英磅都有. 根據這網站的資料: 2007年的票已經賣完了, 2008年的票在今年12月初就會開放預訂.

在城堡門口有一家威士忌(Whisky) 工廠開放遊客參觀製作流程和買酒, 大家都知到蘇格蘭的Whisky很有名, 在城堡周圍幾條街內成天都聞得到一種發酵味, 不太容易形容, 不是酒的味道, 是這種酒的製作過程中的味道, 做過饅頭麵包的人可能可以體會那種類似的酵母菌發酵味. 天氣晴朗無風的狀態下, 味道更濃厚.

城堡門口還有一家蘇格蘭格子呢製造工廠, 也是開放遊客參觀製作流程, 這裡的蘇格蘭格子呢是比較傳統也比較平價那種羊毛, 依等級價位有高有低, 從毛衣, 手套, 毛毯, 帽子, 圍巾和蘇格蘭裙都有. 毛料好不好用手摸就能感覺出來, 差的摸起來觸感粗糙厚重, 好的摸起來就很輕柔細緻. 其實在英國各地都有賣格子呢的商店, 在愛丁堡就更不用說了, 是大本營. 一向少買東西的我也忍不住買一件毛衣, 一條圍巾和一雙手套. 有件毛毯考慮很久最後沒買, 因為真的買太多, 怕帶不回去. 不過這毛毯在後來去"巴斯"這地方時終於給買下來, 在英國的寒冷冬天就成為我唸書寫報告時很好的禦寒衣物.

在這家格子呢製造工廠前面, 我們碰到有招攬繞愛丁堡周邊景點的Tour團, 一天二天三天行程都有, 我們幾個人想參加一天團去參觀Stirling古堡和Loch Lomond湖 (英國最大的湖泊), 這團視參加人數要10人以上才出團的小巴士, 有導遊解說陪伴. 這不成問題, 馬上手機聯絡不在場的人確定都要去後, 隔天就給它出團. 當時我們每人都有像易付卡這種當地買的門號和手機, 出門不怕走失或找不到人.

>> 請接 [下集]

CSS 命名規則

2007-05-13T23:52:00.000+08:00

最近在工作上討論到CSS命名規則, 目的是希望大家能對相同的資料區塊使用同一種名稱, 方便設計師彼此或工程師coding時辨認, 例如: 頁首就用<div class=”header”>.

開始用CSS做網頁設計以來, 所使用的命名規則並非一直固定著, 有時因為版型/佈局不同, 有時因為資料區塊不同, 有時因為網頁結構的寫法不同, 有時是因為想法不同, 認為先前的做法不好所做的改進.

其中又以"網頁結構寫法不同"而更改的原因比較多. 幾年前還是生手時, 做標題總是用: <div class=”title>網頁標題</div> 的方式寫, 所以CSS裡面會有一組: .title {…….}. 現在知道要用結構化的語法寫就改用 <h3>網頁標題</h3>, 當然CSS裡面也要跟著改成 h3 {…….}. (結構化語意請參考支援各種平台的網站製作方式和談Web標準 )

其次是佈局, 我喜歡簡潔的設計(不確定是否一直如此), 傾向極簡風格一派, 希望畫面看起來乾淨舒適又可以表達意涵. 所以比較容易以網頁結構本身的tag (如h, p, ul, li) 命名做設計, 頂多在資料區塊外加一組<div>, 例如:

<div class=”news”>
<h4>即時新聞標題</h4>
<p>即時新聞內文……</p>
<ul>
<li>相關新聞條列1. </li>
<li>相關新聞條列2. </li>
</ul>
</div>

CSS可以寫成:

.news {……}
.news h4 {……}
.news p {……}
.news ul {……}
.news li {……}

這種寫法可以省很多 <div>和<class>, 達到網頁結構簡潔的目的. 但多數設計師是喜歡屬於華麗風格的(也許害怕客戶抱怨沒認真在幫他們做設計), 通常會在資料區塊外圍加上有底圖的圓角邊框包起來, 或者在四周再加上插圖等裝飾圖片. 這樣設計的網頁結構自然也要複雜起來, html寫法可能會變成:

<div class=”news”>
<div class=”header”> </div> -- 這裡放圓角邊框上方底圖

<div class=”body”> --這裡放圓角邊框中間底圖
<h4 class=”title” >即時新聞標題</h4>
<p class=”text”>即時新聞內文……</p>
<ul>
<li class=”list_1”>相關新聞條列1. </li>
<li class=”list_2”>相關新聞條列2. </li>
</ul>
</div>

<div class=”footer”> </div> -- 這裡放圓角邊框下方底圖
</div>

<div class=”pic><img src…… /></div> -- 整個資料區塊下方再補個插圖

CSS可能寫成:

.news {……}
.news .header {……}
.news h4 {……}
.news .body {……}
.news p {……}
.news .title {……}
.news .text {……}
.news .list_1 {……}
.news .list_2 {……}
.news .footer {……}
.news .pic {……}

從上面例子可以看出, 比較難辨認的是Html的語法結構, CSS只要命名不是和內容完全沾不上邊的, 都還好辨認. 工程師coding時的困擾也應該是Html結構層面, 不全是CSS名稱的緣故. 如果頁面上類似的資料區塊多達3~5個的話, 這結構和CSS就真的複雜的可以了! 我經常看見有設計師即使是沒插圖的簡單資料區塊, 也要保留空的<div> tag (header, body, footer), 只為了將來也許會修改的可能性. 這種可能性其實微乎其微, 真的運氣不好也頂多到工程那兒請他加個tag, 幾分鐘就完成了. 如果工程師知道為了這些沒用到的tag讓他困惑許久的話, 也會希望不要保留比較好.

真的要訂規則的話, 應該要用比較客觀的方式命名, 並且考慮"網頁結構"和"版型佈局". 簡單設計和需要放很多插圖的網頁結構必定不同, 簡單設計可以只用少許<div>完成設計. 但是很多插圖的網頁就需要藉由一層又一層的<div>做為放置插圖的區塊. 例如兒童版的網頁就少不了要多放些可愛造型的風景或人物圖片, header. body, footer這些div會是需要存在的. 但如果統一以兒童版的結構訂定一組極大化標準規則的話, 對很多只需要簡單結構的網頁來說會太肥大, 頁面充滿不需要用到的tag. 如果以簡單結構的網頁訂定標準規則的話, 對兒童版的網頁來說又不夠用, 必需再行擴充. 所以不管怎麼訂都是"有欠周全", 而那一類型的網頁適用這樣的規則也應該是思考方向之一.

一位英國資深網頁設計師Andy Clarke做過相同的研究, 發表What's in a name (上) 和 What's in a name (pt2) (下) 二篇文章探討CSS命名規則. 他找了40位當今知名的CSS網頁設計師的網站, 分析他們對外框, 上, 下, 左, 中, 右欄位和導覽列的命名, 並歸納出最常被使用的名稱. 這份分析表請參考Naming Conventions Table.

從分析表可以看到有些欄位是空的, 因為不是每個欄位都有被使用到, 例如有的版型是二欄靠左, 就不會有右邊欄位; 最外框container則視版面的製作方式, 不一定要存在; 導覽列有的獨立在頁面上方, 有的和相關資訊一起放在左邊或右邊欄位.

Andy Clarke 第一篇文章What's in a name從分析表歸納出最常被使用的名稱如下:

‧外框: container (8/40)
‧頁首: header (18/40)
‧主導覽列: nav (4/40) 但是nav相關名稱(navigation, navber, topnav, navcontainer)也佔多數
‧左邊或右邊欄位: sidebar (7/40)
‧內容: content (16/40)
‧頁尾: footer (24/40)

以上的名稱相信也是很多人習慣使用的命名方式, 可以完全同意(雖然我習慣將導覽列命名為menu). 文中也提到命名應該描述區塊本身的意義而非外觀或位置, 因為外觀(顏色)位置(左右)是經常會變動修改的. 他也另外列出幾個常用名稱, 但不在這份分析表中, 所以僅供參考:

‧次導覽列: sub-nav
‧網站搜尋: search
‧搜尋結果: search-results
‧版權資訊: copyright

Andy Clarke 第二篇文章What's in a name (pt2) 又對比較細項的內容區塊命名, 但這些細項就缺少像第一篇那樣客觀的分析, 他也說了: 這些純粹是他個人的想法和建議. 這些建議和我看過優秀的CSS設計網頁的命名有很大差異(例如中間有"-"符號). 由於客觀性不足, 不具說服力, 在此並不推薦第二篇文章所寫的命名方式.

當Andy Clarke發表第一篇文章時就受到Eric Meyer (知名的Web標準和CSS大師級人物)的批評: 認為CSS命名規則是非必要之事, 它應該留給設計師做比較彈性的運用空間. Eric Meyer的看法請參考Elemental Nomenclature. (Eric Meyer也在那40人的名單當中) 但是Andy Clarke的第二篇文章隨即反駁Eric Meyer說法, 並且做出更細項的命名規則結論. Andy Clarke認為他是站在coding和公司的角度看這件事就有其必要性.

從設計師的角度看, 我贊同Eric Meyer 的看法, 因為從事設計或創意工作的人喜歡可以自由發揮創意的空間, 多少都會對"制式"的東西感到反感. 但如果非要制定規則的話, 也以資料區塊為命名單位, 制定符合意義並容易辨認的名稱, 例如: headline, newslist, bulletin, epaper, relatednews等 , 更細項的項目則保留彈性不需訂定. 因為不管做多細都會有如前面所說的"有欠周全"的地方.

附註:
有件事Andy Clarke並未探討, 那就是使用id或class? id通常在頁面中扮演定位或辨識的角色,例如: <div id=”header”>在同一個頁面允許使用一個, 不能出現第二次, class可以重複出現(請參考 id和class的差異一文), 所以像header, content, footer是常見的以id定位成大區塊框架的做法, 但是都用class定位的也大有人在. 就看製作網頁時的功能設定為何? 有的id是要保留給程式下參數用的. 但是和程式配合得當的話, 也可以不用考慮這些. 因為寫程式的人也會自動避開已經被使用的名稱.

談網頁"設計"標準

2007-05-06T02:20:00.000+08:00

多了"設計"二個字就不是"Web標準", 這裡要談的是Jakob所說的網頁設計標準, 非W3C的Web標準.

Jakob也談標準, 但是他談的是網頁元素的配置, 屬於視覺呈現和使用者行為分析的部份. 以下是重點翻譯, 詳細內容請參看原文 The Need for Web Design Standards .

Jacob認為所有網際網路中的網站會形成一個整體, 使用者瀏覽眾多網站之後會產生一個整體印象, 之後再使用時就會有預期心理, 開始猜測現在正在瀏覽的頁面和先前造訪過的網站應該有相同的呈現方式. 所以, 脫離使用者預期的設計就是很難使用的設計了.

Jakob先定義三種標準化設計的層級, 再用兩種統計分析來比較網頁介面設計標準, 一個是他自己的研究—55個企業網站首頁上的24個元素, 一個是華盛頓大學碩士研究—75個商務網站上的33個元素. 以下列出二個研究統計的平均結果:

一. 標準用法的元素: 有80%或者更多的網站使用相同的表現方式. 當使用者瀏覽未曾造訪的網站時會篤定的預期某些元素是以特定方式呈現. 這些標準元素是
1. logo在頁面左上方
2. 首頁中有網站搜尋輸入區
3. 沒有跳出視窗的設計
4. 如果有路徑顯示, 以水平方向列示 (例如首頁 > 路徑1 > 路徑2)

二. 習慣用法的元素: 有50-79%或者更多的網站使用相同的表現方式. 當使用者瀏覽一個未曾造訪的網站時會習慣性的預期某些元素的呈現方式. 這些習慣性元素是
1. 使用"sitemap"名稱表示網站導覽
2. 造訪過的連結要用不同顏色區別
3. 將購物車放到網頁右上方
4. 將類似的連結群組起來放到左邊欄位

三. 不特定用法的元素: 這些元素並沒有單一的呈現方式, 即使是比較受歡迎的也只有49%的網站使用, 所以當使用者瀏覽一個未曾造訪的網站時是無法對這些元素做預期的. 這些不特定元素呈現的方式有很多種, 包括
1. 導覽列的呈現有放置左手邊的, 橫跨上方的, 或像Yahoo一樣在中間等等
2. 網站搜尋的呈現有右上方的, 左上方的, 中間的和其他地方的
3. 網站登入的程序
4. Help的位置

以第一眼來說, 大約只有1/4的設計元素是不特定的, 對大部份的網頁設計決策而言, 標準或習慣性的建立意味著人們可以沿襲這些標準和習慣知道如何使用這個網站. 不確定的設計元素是使用者瀏覽網站時, 要熟悉應用這個網站比較大的挑戰, 因為每一頁都需要單獨再理解. 例如不確定導覽列會怎麼顯示, 網站搜尋不確定, 登入不確定, 甚至Help也不確定-這個最後可以求助的地方的使用性也很低.

為何標準的設計對使用者有幫助? 標準可確保使用者:

1. 可預期到頁面上會有什麼元素
2. 知道這些元素在介面上看起來會是怎樣
3. 知道在網站或頁面上, 那裡可以找到這些元素
4. 知道如何操作這些元素及達到目的
5. 不必思考某些未知元素的用義
6. 不會在快速瀏覽元素時錯過一些重要的東西
7. 某些事進行的不如預期時也不會得到令人討厭的驚奇

這些好處可以增加user應用網站的熟悉度, 增加達成目的的能力, 和提昇使用經驗的滿意度. 但為何應該和網頁設計標準趨於一致? 一個簡單的理由:

Jakob's Law of the Internet User Experience: users spend most of their time on other websites.
Jakob的"網際網路使用者經驗定律": 使用者花大部份的時間在別人的網站上.
(反喻使用者只用很少比例的時間在你的網站)

當瀏覽其他網站時, 人們習慣了普遍流行的習慣性設計, 因此當使用者造訪你的網站時, 他們也會假設你的站應該和別人的站一樣以相同方式操作.

Jakob 2004年的網站研究, 使用者在平均1分49秒後離開一個網站, 這也包括了不能完成他們需求的網站. 要在這麼短的時間內說服使用者你的站對他們具有價值的話, 就不應該讓他們浪費一丁點時間在你不好使用的介面上面掙扎.

但比起公眾網站, Intranet 設計標準的狀況會更好, 主要是Intranet擁有唯一的負責單位, 這個負責Intranet的團隊能夠定義標準並將之推廣到整個企業, 確保設計的一致性.

不管是Intranet或是Internet, 有件事情很清楚: 和習慣性設計越趨一致並提供使用者想要的, 網站就越成功. 區隔內容, 服務和產品當然重要, 但是在這兩者的介面上, 最好的策略是去遵循其他人的用法.

--------------------------------------------------------------------------------------------

以上是Jakob對網頁設計標準的定義和做法, 我們的”政府無障礙網頁設計”也有極為類似的網頁元素配置建議, 對象主要是政府機關或學校教育單位, 相關規定可參考無障礙網路空間服務網的規範和文件.

Jakob的論點是以使用性為出發點, 希望網站的設計符合使用者習慣, 要易學易用. 但是放眼網際網路的眾多網站, 製作炫麗特效的網站比比皆是, 如果這種網站真的這麼不堪使用, 有怎會有那麼多諸如此類的設計存在?

以製作經驗來看, 可能有兩種原因: 第ㄧ種是網站管理者的個人喜好, 他喜歡這種動態效果的設計, 認為只要加上炫麗的效果就能吸引更多人來看他們的網站. 我也經常收到友人轉寄的Flash特效網頁, 真的羨慕有人可以用Actionscript把Flash做的這麼好, 但也純粹是為了特效去看一兩次, 而這到底是什麼網站, 寫些什麼內容卻沒有太多工夫研究.

另一種原因是這網站屬於遊戲娛樂型的網站, 它的使用者本來就是上來打發時間的, 有足夠的精神和耐心來看這裡會有什麼新鮮事發生. 所以這種網站如果做的不夠炫, 還真不足以吸引這些人的目光.

所以, 該製作怎樣的網站就要歸結到網站製作的目的. 為什麼建立這個網站? 打算提供什麼服務(提供資訊內容或遊戲娛樂)? 目標使用者是誰(來找資料的或來打發時間的)?

以資訊服務為主的網站的使用者可能是上班族, 學生或是研究人員, 他們的時間有限, 網站的設計以能夠幫助他們迅速準確的找到資料為目的, 就請不要浪費他們的時間在你的網站重複看一遍又一遍的動畫, 非得要放不可的話請提供Skip功能.

娛樂型網站就無所謂了, 請儘量的炫吧! 不管是驚奇的還是神秘的, 它的使用者有的是時間去發掘和探險. 而Jakob的論點在這裡恐怕難以派上用場.

所以, 請考慮清楚網站建置目的, 不要浪費金錢和時間做不該做的, 放不該放的東西在上面.

英國-湖區(Derwent Water & Ullswater) -下集

2007-05-01T23:50:00.000+08:00

>> 承接 [上集]

在Ullswater北邊有個城鎮Penrith, 是進出湖區北部的主要出入口, 由於我們是從南邊的Windermere進湖區的, 結束湖區之旅後才會從這裡搭火車回去. 所以離開Keswick之後, 我們就到這個城鎮尋找住宿的B&B.

這次找到的B&B位在市中心, 從遠處就看到後方有個教堂, 這家B&B比我以往住過的要大得多, 樓梯很寬敞, 二, 三樓有好幾間房間, 進去時正在打掃中, 最前面靠馬路的那間剛好打掃完畢, 就先讓我們住進去. 這間房很大, 有二張雙人床, 照理說是四人房, 可能前一天是假日, 很多房客剛離開, 而我們又是那天早上第一個住進去的, 算是撿到的吧!

以一般的B&B來說, 這房間的佈置挺講究的, 門外樓梯轉角也有主人用心佈置的小桌子鏡子和花瓶等裝飾品. 由於沒有其他房客, 沒人住的房間並未關門, 我們就趁沒人的時候溜到我們那一層其他房間看看. 每間房的牆壁都有不同的顏色, 我們那間是鵝黃色的, 最後面那間單人房是綠色, 中間那兩間則是橘色和紫色的, 但是櫥櫃床單和窗簾都是差不多的樣子. 中間那間房我們就溜進去拍照, 然後到窗邊看看窗外的景色, 這間房緊靠著後面的教堂, 天哪! 這教堂的周圍竟然有上百座的墓碑矗立著, 一直延伸到這棟房子的牆角, 原來這每一間房間的窗外都緊鄰墓園, 只有我們靠前面馬路這間看不到. 外國教堂有墓園並不奇怪, 但是要靠這麼近睡就心理發毛了. 還好我們那間看不到, 那就… 只好... 眼不見為淨吧!

Ullswater是狹長型的湖, 南北約7公里, 北邊從Pooley Bridge可以搭船到南邊的Glenridding, 坐船單趟約1小時, 我們打算搭船南下, 再搭公車途經Aira Force瀑布回Penrith. Pooley Bridge是上船的碼頭, 沒有太多可以逛的景點. 這個湖人煙稀少, 四周的房子也不多, 很有世外桃源的靜謐感. 雖然同是位在湖區北邊, 這裡的山就都是綠色的, 不像Derwent Water一樣有三種顏色.

下了船就是Glenridding, 這兒是個小村莊, 沒幾條街道, 遊客是所繞過幾個湖中最少的, 所以就更顯出這裡的幽靜. 這是湖的尾端, 對岸是山, 我們沿著湖邊的草皮綠地散步, 這天的天氣陰涼, 很適合這樣緩慢的走著. 不久湖面出現幾餿藍色和粉紅色的小帆船, 他們看來像在排練隊形, 有時候會聚在一起圍成一個小圓, 有時後又散開排成一條直線, 這幾餿船挺有意思的, 我們就坐在湖邊的長椅欣賞他們的表演. 這些天除了搭船, 大部時間都是一直在不停的走路, 能像這樣坐下來欣賞湖景的機會不多.

停留好一會兒我們才離開, 然後搭公車前往一個名為Aira Force的瀑布. 這瀑布在Ullswater湖的左岸, 是Glenridding往Pooley Bridge方向的中段地帶, 要看到瀑布得在下車後爬上一段山路和階梯才能看見瀑布, 那幾天的天氣不錯, 所以只有潺潺水流. 從瀑布下可以望見上方有個橋, 為了爬上這座橋, 我們又費了不少勁兒攀爬這裡蜿蜒的石路走到瀑布頂端, 這裡能看見的就是山, 湖知道是在山的另一面, 只是看不見而已. 曾經有幾次在歐洲安排自助旅行, 每當走的很累時都會安慰自己幸好還年輕才能有這樣的玩法, 不然等年紀大時大概只能跟著人家上車下車, 或待在豪華飯店享受飯店設施.

離開瀑布, 我們又再搭車回Penrith, 沒想到半途巧遇一大群牛要從前方道路不遠處右手邊的牛舍遷移到我們停車位置旁左手邊的牛舍, 這好幾十頭牛緩緩從前方走來, 約一百多公尺遠的路, 這些牛的牛步走了將近半小時, 所有的車必須停下來等待, 看起來大家都很有耐心, 沒聽見有人亂按喇叭或出來責罵, 而這些牛對我們的公車也很好奇的樣子, 想不到途中可以遇見這樣有趣的景況.

回我們的B&B後發現隔壁二間房有其他人住進來了, 是可以比較放心睡了. 也希望他們住的安好.

隔天早上下去一樓吃早餐, 發覺這家的早餐很豐盛, 一般會有的是培根, 荷包蛋, Sausage (一種臘腸, 有各種口味), Bean (罐頭裝的黃豆子), 麵包果醬和咖啡牛奶果汁等飲料, 這家店還多了烤蕃茄, 米血和優格. 難得的早餐, 所以要拍照留念!

吃完早餐就到市區逛了, Penrith在古代是湖區的首府, 靠近火車站的附近有個古城堡的遺址, 由於幾經戰亂, 現在只能看到斷垣殘壁, 但是古堡的花園還在, 顯然已經成為休閒的公園綠地, 裡面還栽種許多不同顏色和品種的玫瑰花. 在花園待一會兒我們就走回市區. 市區有個Mall, 逛完了我們就在裡面喝咖啡聊天, 這是最後一天行程, 只安排繞市區, 所以每家店每個街道都可以很仔細的看仔細的走, 像手工藝店, 畫廊, 陶瓷玻璃, 服飾店等. 但是我們並沒有買什麼東西, 唯一在每個景點都會買的只有風景名信片. 頭幾回出國旅遊喜歡買些小玩藝兒, 但回來後都存放在櫥櫃中, 很少拿出來看, 之後就會比較自我克制, 少亂買東西了!

逛了四個湖, 可以發現每個湖各有不同的風貌. Celia有個同學說來湖區參加Tour團, 一天之中就搭巴士繞完好幾個湖, 然後告訴她每個湖都長的差不多, 可以不用繞太多個. 我相信他說的是真的, 像這樣的繞法應該看不出什麼差異, 他可能沒去搭船, 沒有從山上眺望湖面, 沒有走一走森林步道, 沒嘗試從不同的角度觀賞這些湖, 難怪體驗不出有什麼不同. 在我看, Windermere熙來攘往, 水陸交通便利, 適合喜歡熱鬧的人; Grassmere的美藏在山谷之中, 需勇於發掘和探險; Derwent Water的山有變幻莫測的艷麗感, Ullswater則是安靜的世外桃源. 各有各的美法和特色, 差就差在你是用那一種方法在看了!

英國-湖區(Derwent Water & Ullswater) -上集

2007-04-30T01:06:00.000+08:00

在寫完論文回台灣的前二週, 時間大約是8月中旬, 我又到湖區一趟, 寫論文的期間是很苦悶的, 所以很多學生為了犒賞自己, 都會安排一個旅遊行程, 之後再回家. 這一趟湖區是和我的大學同學Celia去的, 那一年我們分別在不同城市不同學校唸書, 但是她們交論文時間比我們晚幾週, 所以她是先出來玩幾天再回去完成論文. 真是好樣的! 只有我們二人, 氣氛上是比上次的五個人稍微冷清. 我們決定到Windermerere, Derwent Water和 Ullswater三個湖. Celia 沒去過Windermere, 所以我得和她再去一趟, 免得她有所遺憾. Windermere湖就不再複述. Derwent Water和 Ullswater二個湖在Windermere北邊, 我們從Windermere搭公車就可以到Derwent Water的主要城市Keswick.

在往北的途中有個驚人的發現, 這湖區北邊的山竟然有三種顏色, 下方是綠色, 中間是紫紅色, 最上層是土黃色, 因為氣候與溫度的關係, 讓每座山依高度生長不同的草皮, 才造成這樣的特殊景觀. 對當地的人來說是很正常的現象, 但是對我來說這山的顏色真的太神奇了.

抵達Keswick城鎮當然要先找到Information Center (遊客中心), 這個Information Center在一棟名為Moot Hall的鐘樓底下, 上午這附近是很熱鬧的市集. 這一天是週六, 又值暑假期間, 查了好久終於找到距離市中心稍遠的一家B&B, 我們先搭計程車過去, 這間B&B和以往在市區中心的不太一樣, 是ㄧ間獨棟的平房, 有視野寬廣的前院及後院, 房東是ㄧ位和藹可親的老太太, 平日只有她和她的狗(很大隻的黃金獵犬)住在這裡, 這間房子有二層樓, 樓下是客廳和廚房,樓上才是房間, 我們的房間是ㄧ間閣樓, 有窗戶可以看到後院以及後方的遠山. 房東太太特別交代(她是很和氣的說) 不要在房間裡面吃東西, 她怕有些味道很重的食物會久久無法散去. 建議我們可以到一樓後院有張舒適的桌椅吃, 風景也很好的. I see. 我知道她是指泡麵, 台灣學生的最愛, 我們真的有準備, 既然她這樣說, 我們就乖乖的端到後院吃, 風景真的是不錯! 生意做久了, 哪裡來的人有哪些習性都很了解.

從這間房子要走到市區真的有點遠, 房東太太還是建議我們走路就可以了, 因位公車班次不多, 不好等, 她老人家平日也是來回走路到市區買東西的, 一路上風景都很好, 會經過一個還不錯的公園, 可以穿越公園走到市區. 好吧! 既然她這樣說, 我們又只好乖乖的走, 這公園還不小, 記憶中大概是走了40幾分鐘, 不知道是英國人真的很能走路還是台灣人太懶了, 幾十分鐘路也要搭車….

Keswick在Derwent Water湖的北邊, 從湖邊碼頭可以選擇坐船繞湖一周, 也可以選擇湖邊的小徑在樹林中散步, 還有另一個選項是登山, 這湖附近有個叫Catbells的登山步道很有名, 但是用眼睛看就知道這個山比Grassmere高許多, 當時太陽大天氣又熱, 登山就直接跳過去了. 我們在Keswick待二天, 一天坐船繞湖, 一天在湖邊散步. 這個湖在岸邊散步的遊客比較多, 在湖面坐船的反而少, 坐在船上仰望四周的山, 還可以看見一個個小小的人影在山頂上行走, 偶而山上的人會向船上的人揮揮手, 我們船上的人自然也要向他們揮一揮囉.

繞湖的船中間有幾個點可以下船上岸去走走, 然後再回來等下一班船繼續繞, 船票是算繞湖一周, 可以自由選擇要搭那一個班次, 大約一小時會有一班. 我們選擇在Ashness Bridge這個點下船, 這是知名的拍照景點, 位在一座山的半山腰, 所以下船後要爬十幾分鐘的山路到這個橋的位置. 這個橋是5,000年前古堡的石塊砌成的, 之所以知名是因為從這橋面可以看到二個湖, 一個是旁邊的Derwent Water, 另一個是更北邊的Bassenthwaite Lake.

繞湖的小徑有時候是一片森林, 有時後會走到湖邊, 有時候會經過放牛的畜牧區, 可以看見一群一群的乳牛低頭吃草, 有時候又是人家養羊的羊舍, 這湖區的步道沿途都有牌子清楚標示方向和公哩數, 不用擔心會迷路. 我想住這裡的人應該都很幸福吧! 沒有空氣污染也沒有噪音, 可能可以活久一點!
Keswick市區的人很多, 也可能是暑假期間, 中午想找個地方吃飯都要等很久. 但是這地方也有些不錯的可以逛一逛的商店, 例如有陶瓷藝品店賣的造型奇特的茶壺, 有像鋼琴的, 縫紉機的, 還有像汽車的各式各樣的茶壺, 上面還裝飾著小小的杯盤. 這些茶壺應該不會真的拿來泡茶吧! 當成藝品擺設比較有可能. Keswick以前曾經是著名的木材和鉛礦銅礦生產地, 所以這裡也是生產鉛筆的地方, 在市區有個Pencil Museum (鉛筆博物館), 展示和販賣各種普通的或彩色的鉛筆. 這城鎮也有很多賣登山設備的商店, 比較有名的是George Fisher的牌子.

我們在Keswick待了二天, 之後就搭車前往另一個湖: Ullswater了!

>>請接 [下集]

W3C Xhtml 驗證問題經驗分享

2007-04-22T01:16:00.000+08:00

近日將公司執行的一個專案網頁送W3C的Xhtml檢測工具做驗證, 並將顯示的錯誤一一修正, 直到全部通過檢測為止. 修改的錯誤包括:

1. <form>標籤應該有action值, 例如: <form action=”searchresult.htm”>.
2. 如果在表單使用<legend>, 外圍就應該有相對應的<fieldset>包覆.
3. <option selected>下拉選項</option>應該改成<option selected=”selected”>下拉選項</option>
4. <form>要在<table>外面, 不能包在<table>裡面.
5. <span> 裡面不應該包覆<div>, <span>通常只用來改變字型/顏色/大小/靠左靠右等細微外觀, 不能像<div>一樣當成區塊使用.
6. 多媒體檔案(如swf, mov, wmv) 的code無法通過驗證.

1~4 修改的多半是tag標籤順序以及一定要有屬性值設定的細節問題, 在Dreamweaver 8版本按照次序由程式自動產生的文件多半是正確的, 只要注意順序即可, 但如果像我ㄧ樣習慣手動加tag就容易產生這類的錯誤.

5 的錯誤一開始誤認為是不應該用<div>包覆連結文字, 應該加上如<p>或<li>等tag, 後來發現只要將<div>拉出<span>外面就可以了. 用<div>包覆文字雖然無法辨識語義(不知道這段文字屬於標題<h>, 段落<p>, 還是<li>條列項目), 卻是Xhtml驗證工具允許的.

至於6 的錯誤就很麻煩了, Dreamweaver產生的多媒體物件(如swf, mov, wmv) 的code通通無法通過驗證. 在W3C的標準定義中, 影音檔或Flash檔等物件應該都用<object>這個tag, 但是Dreamweaver用的卻是不在標準中的<embed>; 而Flash的swf檔雖然是<object>, 但是裡面的classid值和<embed>仍然無法通過驗證, 於是在Google找尋解答.

A List Apart有ㄧ篇 Bye Bye Embed 介紹如何通過W3C驗證的解法, 分別詳列如下: (原文是用絕對路徑寫, 這裏改用相對路徑, <p>的說明文字則是政府無障礙網頁規範的要求 )

MediaPlayer的wmv檔


<object type="video/x-ms-wmv" data="images/test.wmv" width="172" height="160">
<param name="src" value="images/test.wmv" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
<param name="qtsrcdontusebrowser" value="true" />
<param name="enablejavascript" value="true" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

FlashPlayer的swf檔


<object type="application/x-shockwave-flash" data="images/title.swf" width="172" height="160" id="VideoPlayback">
<param name="movie" value="images/title.swf? docId=8755581808731033658" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="172" height="160">
<param name="src" value="images/sample.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />

<object type="video/quicktime" data="images/sample.mov" width="172" height="160">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
</object>

<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔寫法比較特殊, 上方有classid的寫法IE不支援, 所以下方用IE特有的”條件式註解( [if !IE] )” 再寫ㄧ組給IE瀏覽器專用.

* 以上的寬度高度最好以原尺寸顯示, 否則在Firefox會有無法顯示或者裁切的情況發生.

原以為仰賴Dreamweaver通過W3C驗證不會太難, 但還是有死角存在, 這過錯不全是Deamweaver, 有很大原因是IE或其他瀏覽器的支援程度仍然不足的關係.

在The Web Standards Project 看過一篇 Dreamweaver Task Force 文章, 在2001年 Web Standards Project這組織就成立" The WaSP Dreamweaver Task Force"小組, 任務是協助Dreamweaver朝Web Standard目標改善他們的應用軟體, 讓程式產生的文件符合標準需求, 也讓大部分的預設項目改用符合標準和使用性 (Accessibility) 的選項. 可以感覺出MX版本開始朝這個方向走, 但還不夠完整; Dreamweaver 8的版本看起來除了影音檔, 都支援了; 不知道最近剛出來的CS3版是否解決這個問題. (ps. 來自Amos測試結果是CS3版和8的版本相同, 並未解決這個驗證問題 )

除了Adobe, 這個組織也有ㄧ個Microsoft Task Force小組在Micorsoft要完成相同的任務, 所以The Web Standards Project是很積極在推動Web標準, 不是嘴上說說而已. 這組織最近還很無情的批評Adobe’s Spry Framework for AJAX (還在Beta版階段, 這裡曾經介紹過 Adobe Max 2006 課程範例 -- 如何以Spry與Dreamweaver開發AJAX )是違反Web標準的應用程式, 呼籲大家要勇於指正Adobe的錯誤.

Adobe和Microsoft這兩家公司會這樣”備受重視”大概是怕他們有可能成為製造網頁”亂象”的根源, 必須儘早介入導正才行!

談Web標準 (Web Standard)

2007-04-09T01:10:00.000+08:00

Web標準是W3C和一些團體組織共同制定的製作網頁的技術, 目的是讓網頁內容在不同的瀏覽器和不同的平台都能閱讀, 這樣的目的就仰賴建立”結構化的文件”和”能自文件中抽離的網頁呈現”方式.

早期的瀏覽器多半是支援標準不一致的瀏覽器, 造成網頁設計或開發人員必需爲各家瀏覽器製作不同版本的網頁, 很耗費成本和資源. 但是從2000年開始, 各家瀏覽器開始向web標準靠攏, 支援所謂標準的文件結構和樣式呈現(使用Html /Xhtml與CSS建構網頁). 現在大部份瀏覽器已經支援web標準, 但仍有很多設計和開發人員繼續使用過去的方法做出不合語法, 難以使用的網頁, 例如結構上沒有意義的標記、肥大的影像地圖(image map)、過度使用巢狀表格等都是.

這裡要介紹一下W3C. W3C成立於1994年, 由美國的麻省理工學院, 歐洲的INRIA, 和日本的 Keio大學三個公共調查協會組成. 成員包括Microsoft, AOL(Netscape), Apple, Adobe, Sun, 其他軟體硬體公司, 研究所和電信公司. 這個由協會成員和專家組成的工作小組制定的規範會提交給W3C的公司成員並一同參與製作支援標準的網路應用軟體.

使用web標準建立的網頁有哪些好處:

1. 結構化的網頁能讓別人更容易理解所編寫的文件, 更容易新增或修改, 讓網頁的開發維護更簡易.
2. 使用web標準的網頁就表示能與未來的瀏覽器相容, 不需擔心將來可能不相容的問題.
3. 去除不合語法和難用的網頁結構之後將讓網頁下載讀取速度更快, 可節省頻寬; 網頁的使用性將提升, 也會有更高的造訪率.
4. 語義化/結構化的標記會提升網頁在搜索引擎中的排名.
5. 語義化/結構化的網頁可以適用在列印或其他設備(像PDA, 手機, 數位電視, 投影機等), 而這些只是透過連接不同的CSS檔案就可以完成, 不需要另外製作不同的版本.

目前被廣泛使用的網頁標準技術為Html, Xhtml和CSS. 而Html 4.01是最後final版本,以後不會再有新版本的發展. 由於Html語言格式不嚴謹以及爲了走向Xml的過渡時期, 建議的標準網頁語言為Xhtml 1.0 Transitional.

Xhtml技術的實行包括下列幾項:

1. 聲明正確的文件類型(Doctype)
2. 聲明文件類型定義(DTD, Transitional過渡的, Strict嚴格的, Frameset框架的)
3. 用meta 聲明使用的編碼, 例如utf-8或big5
4. 所有屬性值均爲英文小寫字
5. 所有屬性值都要加引號, 屬性值之間以空格分開
6. 關閉所有的標籤, 例如 p, li
7. 空標籤(例如 br, hr, img) 要在標籤尾部使用”/”關閉(<br />, <hr />, <img />)

如果用的是Dreamweaver 8的版本, 開啟Html新檔的話, 上述所說的項目都會由程式正確產生出來(Dreamweaver 8 已經支援web標準), DTD預設為Transitional. 如果用的是8以下版本(如MX), 設計人員就要自己注意. 也或者使用轉換功能選項(Convert)將Html轉換成Xhtml語言格式.

以上是關於Xhtml的使用技術, 至於建立結構化標記的文件請參考先前已經談過的”支援各種平台的網站製作方式”一文, 這裡想再加強說明的是關於CSS的應用. 大家熟知的”避免使用巢狀表格排版”有很多網站提供應用範例, 利用Google查詢"CSS Layout"可以找到很多, 就不多做說明. 要說的是“能自文件中抽離的網頁呈現”方式.

CSS (Cascading Style Sheets)是網頁外觀呈現的樣式. 目前的瀏覽器多半支援CSS2.1所定義的樣式. 將來的CSS3在W3C網站也已經有草案公佈, 但尚未定案, 目前的瀏覽器也不支援. “能自文件中抽離的網頁呈現”表示CSS的使用必須是採”外部連結”的方式加入網頁結構中, 例如:

在 < head> 中加上
< link rel="stylesheet" type="text/css" href="styles.css" />

所以, 將CSS樣式寫在標籤中或< head>中的方式應該盡量避免，因為這種方式會把結構和外觀呈現混在一起, 無法分開. 這二種方式舉例如下:

寫在標籤中
< h5 style="font-weight:normal;" > Test< /h5>

寫在< head>中
< style type="text/css">
h5 { font-weight: normal;}
< /style>

運用CSS時很容易犯的錯誤就是: 使用多餘的div和class(或id), 這雖然不違反標準, 卻悖離希望維持網頁”簡潔”的原則. 例如:

< div id="content">
< div class="headline>
< p class="text"> CSS測試網頁< /p>
< /div>
< /div>

可以簡化成

< div id="content">
< div>
< p> CSS測試網頁< /p>
< /div>
< /div>

也或者第二個div是不必要的, 可以去除.

CSS可以寫成

#content {……}
#content div {……}
#content p {……}

當然我們也可以反過來看, 如果是用web標準技術建立的網頁, 表示該網頁包括以下的特性:

1. 用符合標準的Xhtml語言所建構

2. 用可抽離的CSS樣式來佈局(非表格)及呈現外觀

3. 使用結構化的標記建立網頁文件

4. 能在任何瀏覽器或平台正常顯示

Web標準的技術除了Xhtml和CSS, 在Web Standard Project還介紹了DOM (Document Object Model) and ECMAScript (standard Javascript), 這兩部份屬於網頁行為, 非我可以理解的範圍, 有興趣的人可連結到該網站閱讀.

最後是驗證的部份. 使用web標準技術建構網頁, 對沒有經驗的人來說, 很難確認寫的是對或錯, 所以有html和CSS驗證工具可以參考使用, 通過驗證的話還可以在你的網頁中掛上該項驗證的標章. 關於網頁驗證在”IE Developer Toolbar”有談到一部份, 以後會再詳細介紹各項驗證工具.

後記: 爲了寫這篇介紹, 閱讀一些相關文章, 再用比較簡要的方式說明, 參考的網址如下:

英國-莎士比亞故居(Stratford-upon-Avon)

2007-04-07T01:25:00.000+08:00

Stratford-upon-Avon 是個擁有豐富歷史人文的小城鎮, 因著名的劇作家莎士比亞(人稱莎翁)在此出生而聞名, 所以這裡也叫”莎士比亞出生地(Shakespeare's Birthplace)”. 從伯明罕(Birmingham)搭火車約50分鐘可以到這附近的火車站. 下車後要再走一段不算太遠的路到這個地方.

整個城鎮範圍不是很大, 外圍有ㄧ條河(Avon River)環繞, 古時候是運河, 現在成為划船休閒的地方. 到處都是中世紀時代留下來黑白相間的維多利亞式建築, 要認真走的話一天可以走完, 但我們是從其他城市轉搭火車到這裡, 耗費不少時間在往返的交通上, 又因為只安排一天行程, 很多地方沒逛到. 所以, 如果是從別地方轉來這裡的, 二天一夜的行程應該會比較充裕. 這裡也有很多建築上別具特色的小旅館或B&B, 晚上還可以去看一場劇院的戲. 也聽說很多人喜歡到這裡結婚, 因為這裡是一個充滿文藝氣息又浪漫的地方.

先簡略介紹莎翁的生平. 莎翁(William Shakespeare)出生於西元1564年, 從小在這裡生長求學, 父親是經營手套的商人(John Shakespeare), 母親是佃農的女兒. 18歲和大他7歲的妻子Anne Hathaway結婚, 之後到倫敦發展, 起先是一位演員, 後來成為知名的劇作家. 晚年又回到他的故鄉, 並在他出生住所附近購置一間新屋名為New Place (後來又稱Nash’s House, 因為隔壁一個叫Tomas Nash的年輕人娶了莎翁的孫女), 之後就居住在此直到1616年去世, 享年52歲. 他有位女兒女婿也住在不遠處叫Hall’s Croft的屋子. 現在這些房屋都開放民眾參觀.

走進這城鎮首先看見的是復古風味的街道, 會讓人誤以為穿越時光隧道走進莎翁年代的地方, 這裡的房子和街道保存的很完好, 遊客也相當多. 我們首先參觀的是莎翁出生的那間屋子. 面對這棟房子的左邊是莎翁一家人生活起居的地方, 裡面展示莎翁小時候居住的房間, 牆壁家具等物品據說還是維持當時的樣子; 右邊是莎翁父親製作和賣手套的工作室以及店面; 房子後面是一個頗大的庭院, 種植樹木和草皮.

離開莎翁出生的房子往High Street方向走到Chapel Street可以看見New Place/Nash’s House, 再直走到Church Street可以看見莎翁小時候就讀的文法壆校King Edward VI School, 這個黑白相間二層樓高的建物佔據這整條街道很長一段距離, 是非常醒目的景點. 對街也有ㄧ棟類似的建築, 但這是一家餐廳和旅館. 這條街道上還有很多賣紀念品的商店和Coffee Shop, 也是適合閒逛的地方.

最後我們終於走到這條河Avon River, 河面不是很寬, 河的沿岸都是綠地, 很多人在划槳搖船, 或坐或躺在岸邊觀賞風景. 河的一頭是莎士比亞劇院(The Royal Shakespeare Theatre), 另一頭是莎翁長眠的三一教堂(Holy Trinity Church), 據說景色都很好. 還有位於城鎮外不遠處的莎翁母親的生長地Mary Ardens House, 以及莎翁妻子的生長地Anne Hathaway's Cottage(這是一間很具代表性的中世紀農舍). 可惜沒時間再逛下去, 只能開始往回程的路出發. 之後曾想再找機會來一次也一直懸著, 對這些沒逛到的地方存著些許的遺憾!

IE Developer Toolbar 介紹

2007-04-06T00:46:00.000+08:00

Beta 3 免費下載網址:
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

微軟有個好用的開發工具” Internet Explorer Developer Toolbar”, 目前是Beta 3版提供免費下載(565KB). 這Toolbar下載安裝之後, 會掛在IE瀏覽器工具列中(如下圖所示). 系統需求為Windows 2000; Windows Server 2003; Windows Vista; Windows XP, 和IE6以上版本. 安裝過舊版本的要先移除舊版再安裝新版.

這個Developer Toolbar的主要功能是幫助開發人員快速檢視Html網頁結構; 顯示表格, 圖檔, Tag名稱; 顯示Div / Id / Class / 快速鍵 / Tab鍵設定名稱及位置; 顯示有效無效連結的路徑; 尋找特定元素; 關閉Script, Css和圖檔的功能選項; 設定800/1024/1280的螢幕寬度檢視(大螢幕才有作用); 還有提供該頁面的Html, Css和國外版無障礙檢測連結服務.

以往當設計師拿別人製作的網頁修改時, 因為習慣不同, 網頁的寫法和設定也會不同, 通常會藉由Dreamweaver檢視Html結構及Css設定的Div或Cass/Id名稱, 但功能仍然有限. 對程式人員來說, 如果設計師的Css寫的很複雜, 註解又標示不清楚時, 要辨識就更困難了. 這工具就提供一個方便之門, 不需Dreamweaver就能直接在IE上面檢視所有的網頁設定.

以下是幾個應用的範例說明:

這是選擇特定元素, 勾選這個項目之後, 在網頁上點選的任何元素的結構, 連結路徑和Css屬性質都能顯示出來.

這是選擇顯示網頁上所有Class和Id設定名稱和位置.

這是連到W3C提供的Xtml驗證服務, 這項驗證會根據網頁宣告的種類 (如Html 4.01或Xhtml 1.0等) 驗證網頁結構的寫法是否符合標準. 驗證頁面上方會顯示驗證是否有誤, 檔名, 編碼和宣告種類, 如果有誤, 會一一條列在網頁下方. 這個範例表示有4個錯誤, 分別是3個連結項目的Tag包覆錯誤 (Span裡面不能包覆Div); 另一個是Form應該要有Action設定.

這是連到W3C提供的Css驗證服務, 是驗證Css寫法是否正確, 數值設定是否有效, 字體顏色和背景色設定反差是否夠大, 容易辨識等. 這項服務如果是中文網頁, 會有簡體中文顯示驗證結果.

這是外國版的無障礙檢測. WAI (Web Accessibility Initiative)是W3C的檢測標準, 分3級, 台灣版的政府無障礙檢測應該是源自於這裡; Section 508是美國聯邦政府的檢測標準, 不管選WAI或Section 508, 都會連到同一個網頁作檢測, 然後在該網頁選擇想要檢測的項目.

但是這些檢測項目是有必要的嗎? 是否必要是政策問題 (政府的政策或公司的政策), 不過, 身為網頁設計人員是應該了解有這些檢測項目, 並且能試著使用看看, 或者試著開始從Web標準 (Web Standard) 的方向設計網頁. Web標準是W3C一直在推動的, 目的是希望透過標準制定, 讓所有除了電腦的平台都能正常瀏覽網頁, 例如: 數位電視, PDA, 手機等. 坊間有Css書籍會標示Web標準設計, 其實Web標準不單是Css, 而是標準的網頁結構(如Xhtml)加上可以從結構中抽離的Css設定. 關於Web標準會在往後的文章再詳細介紹. 今天就先將這個好用的工具介紹給大家!

英國-湖區 (Windermere & Grassmere) -下集

2007-04-01T23:50:00.000+08:00

>> 承接 [上集]

結束南邊Bowness和Lakeside的行程之後, 隔天開始往北邊的Ambleside和Grassmere走. 一樣從Windermere走半小時的路到Bowness搭輪船到Ambleside. 沿途的風景很美, 岸邊有不少造型小巧的房子, 也有比較大的別墅和旅館, 湖面上不時可以看見天鵝和成群的鴨子游來游去, 這湖除了我們坐的這種大型輪船, 還有更多是1或2人搭乘的小型風帆, 有的在湖面上馳騁, 有的停靠在岸邊休憩. 下船的地方是個碼頭, 要再走半小時路到Ambleside市區.

走半小時路對英國人來說是件稀鬆平常的事. 記得剛到學校, 想找一條離市中心最近的路. 一位英國人指了個方向說: 過了這個地下道左轉再直走就可以看見, 要走多久? 他說很快, “半小時”就到了, 於是我就這樣走了一年多. 英國的大眾交通工具比台灣要貴很多. 以公車來說, 走路半小時的距離大約要80便士(台幣約50元), 經常搭的話是很傷的, 所以不管到哪裡, 走路半小時的距離, 我們通常會選擇用走的, 除非走不動了.

Amblesid是戶外活動的聚集地, 也是遊客中心, 這裡有很多賣登山裝的店, 展示繪畫和陶瓷玻璃的藝品店, 賣手工餅乾糖果的店, 以及建築造型特別的Pub. 英國的Pub可分成兩種: 一種是晚上放著吵死人音樂給年輕人跳舞的Pub; 一種是白天晚上都有營業, 提供飲料點心, 播放輕音樂或電視足球賽的老人Pub, 多半是年紀大一點的人去喝酒, 聊天, 打牌消磨時間的地方, 通常這種Pub的外觀和裝潢會依主人的喜好有比較特殊的風格呈現. 整個城鎮可以感受到的是濃厚的休閒和藝術氣息, 這一天我們就停留在這個市區逛了一家又一家的店.

市區有個歷史悠久的建築物叫 Bridge House, 顧名思義就是座落在橋邊的房子, 這河很小, 水量也不多, 還有樹蔭, 正是可以坐下來休息吃午餐的好地方. 午餐經常會因為行程的關係只買個麵包三明治之類的東西打發. 英國的餐館是很貴的, 便宜一點的都要8~10磅(5~6百台幣)左右, 平日都是自己買菜煮來吃, 外出旅遊就以速食店和中國餐館的食物為主, 頂多晚上加一頓台灣學生最愛的宵夜-泡麵(我們有自備碗筷和泡麵). 英國的食衣住行樣樣都貴, 家境不夠富裕的學生自有ㄧ套省錢的生活和玩樂方式. (英國也有比台灣便宜的東西, 有機會再介紹在當地的生活經驗).

Ambleside再往北走可到Grassmere(搭公車), Grassmere是ㄧ個美麗小湖的名稱, 也是ㄧ個小城鎮的名稱, 公車終點站旁邊有個小教堂和一家可愛的藝品店, 專賣手工藝品陶瓷和明信片之類的物品, 比起Windermere, Bowness和Ambleside, 這裡比較像是可愛悠靜的小村莊. 所有的景色看起來都是那麼小巧精緻.

這一天我們是要走上一座小山, 但是必須在5點半以前回到這個小教堂搭最後ㄧ班公車. Grassmere周圍都是山環繞著, 所以上山的路有很多條, 我們選了一條比較不遠可以在時間內趕回來的路線. 但是走上山才漸漸明白這是ㄧ條艱辛的路, 這裡的山可不像Windermere一樣平緩.

我們先沿著大馬路走了30~40分鐘才找到上山的入口, 上山不久就可以回頭望見視野越來越廣闊的Grassmere湖, 這是個恬靜的小湖, 湖上沒有吵雜的船隻行走, 加上這一天的天氣很好, 山很蒼翠, 清澈的水面倒映著遠山和樹影, 我們都讓眼前的景色給迷惑了, 只能用沉醉來形容. 大家的相機在這邊此起彼落拍個沒完, 停留了好一陣子才又不捨的往前走.

從地圖上看, 山的最高點也是整個路線的中間點有一個小池塘, 上山走大約1個多小時以後就開始期盼池塘的出現, 因為已經覺得很累很喘了, 這座山的路是頗為陡峭的石子路, 很努力又走了幾十分鐘才終於看見池塘, 這池塘很淺, 中間還長草, 樣子很像下雨過後的積水. 不具有可看性, 所以趕緊趕路下山, 偏偏下山的路更陡更不好走, 原來就精疲力盡了再走這段路只能說完全是靠意志力支撐過來的.

Grassmere這個湖如果不上山是看不到它的美的, 回頭想想我們走了約4小時的路去看這個湖的風景是很值得的. 因為這一趟的湖區之旅最美印象最深刻的就屬這個爬的最辛苦的Grassmere湖. 所以也就埋下第二次再度造訪湖區的因子了!

違反網頁設計原則的前十大要項

2007-03-31T23:33:00.000+08:00

http://www.useit.com/alertbox/20031110.html

Jakob在2003年11月useit.com發表這篇文章, 雖然經過3年多, 仍然認為是很值得推薦給網站設計人員的文章, 以下只有選擇性的做重點翻譯, 如果方便的話, 還是希望到他的網站看更詳細的說明.

Jakob針對一些已知的使用性原則, 提出設計人員最常違反的前十項. (從文意來看, Jakob認為大部份的網站使用性設計專家都應該讀過他的書, 但是錯誤還是照樣出現, 所以他有必要一一指出來改善. )

1. 強調你的網站為使用者提供什麼價值? 你的服務和主要競爭者有什麼區別?

這是首頁設計最重要但也是最少人遵循的. 網站很糟糕的一點是沒有明確的說出要提供給使用者什麼, 導致顧客對網站只留下一點點印象而已. 而這些說明也應該要寫在搜尋引擎可以找到的地方, 例如title和metadata.

2. 使用彈性寬度讓使用者可以自行調整首頁大小

不需要為那一種固定寬度爭辯, 不能假設每個人的螢幕寬度都是800像素: 那對某些使用者來說太大, 對其他的使用者來說又太小. (這一點可以參看”最大寬度與最小寬度網頁設定”一文, 最大寬度設定仍然保留某種程度的彈性寬度: 1024寬度以下為彈性寬度, 但不超出1024寬度)

3. 用顏色區分已點選及未點選的連結

知道”你到過哪裡”是所有導覽設計中, 三個基本要求的一個. (另外二個是”我現在在哪裡?”和”我能夠去哪裡?”) 請讓已點選及未點選的連結用不同顏色顯示, 違反這一條原則對年長的使用者特別不利.

4. 用圖像展現真實內容, 而不是只為了裝飾首頁

不相關的圖像會將使用者的注意力從重要內容中分散出去. 使用者不會因為首頁有個正在微笑的女士就認為你的產品可以讓他們感到愉快. 展示真正的產品照片會比較好.

5. 用一句話明確簡述這個網站或公司是做什麼的

我們最近研究人們如何使用網站上”關於我們” 的資訊, 但是大部份的人還是無法從中發掘這個網站成立的目的是什麼. 建議將slogan(口號)用圖形方式顯示在logo旁邊 – 這是一個可能被忽略的地方. 然後在人們容易看見的內容區域再加一段文字格式的說明.

6. 將最新議題放在容易被接觸的首頁

通常使用者會記住在首頁看過的有趣的內容, 但是卻永遠不會記得他們在次頁看過的. 建議首頁的最新議題應該有ㄧ個歷史檔案連結, 方便使用者找尋曾經讀過的文章.

7. 在視窗標題加上簡短的網站說明

這一點在搜尋引擎的能見度上很重要, 對網路行銷來說, 何不善用這項不花什麼錢的優勢?

8. 不需用標題標示出搜尋區塊; 用文字輸入區右邊的”搜尋”按鈕代替

如果已經有個叫”搜尋”的按鈕在右邊的話, 就沒理由再去標示這個搜尋區塊. 互動設計”少即是多”的原則告訴我們, 多餘的元素會分散使用者對重點的注意力和降低對介面的理解能力. 換句話說, 需要思考的越少, 人們就越容易了解那是什麼. (無障礙網頁設計要求應該標示label, 這是為有障礙人士考慮的使用性)

9. 在股票行情中, 標示出變動百分比, 而不只是標示利得或損失

這項原則只適用於提供股票行情或投資訊息網站. 一般是幫助使用者了解相關的重大改變及其重要性. (類似的原則適用於其他統計資料的變化) 股價增加$0.75對起始價格是$8(巨幅攀升9%)和起始價格是$60(緩增1%)的意義不同.

10. 首頁裡面不要再有一個連到首頁的連結

這種連結導致3 種問題:
1. 如果按了它並連到目前網頁是很浪費使用者的時間.
2. 這樣的連結會讓使用者質疑他們現在是在那個位置.
3. 如果使用者跟隨著這沒作用的連結, 他們會對新的位址感到混淆, 特別是這個頁面只是捲回頁面上方.

首頁有個回首頁的連結是起因於導覽列中包含了”回首頁”的選項. 這很好, 但是應該取消這個目前所在頁面的連結狀態並且用一種方式強調出目前所在的位置.
(對用程式產生的網站來說, 會希望首頁和內頁的GUI設計都採用同一個版式, 如果要達到這點要求就要讓首頁和其他內頁的版式分開, 也就是讓首頁的”回首頁”選項不顯示或者取消連結狀態, 程式工程師一般不太喜歡這種多工的建議)

Jakob 有一本書”Homepage Usability: 50 Websites Deconstructed”, 書中詳列113條首頁使用性設計的指導原則, 2001年出版, 台灣曾出過中文版, 現在似乎找不到了, 但是博客來網站有英文版可以購買.

這本書在英國唸書時曾在學校圖書館借來看, 是寫網頁設計論文的學生必參考的書, 書裡面有50個企業或商務網站的範例解析(這部份so so), 那113條指導原則就條列在書本最前面幾頁, 還有ㄧ部分是網頁UI配置調查分析, 這兩部分是最有可看性的, 即使已經出版很多年, 那些原則還是適用在目前的網站, 有興趣的人可以問問上奇出版社還有沒有庫存?

英國-湖區 (Windermere & Grassmere) -上集

2007-03-25T23:48:00.000+08:00

在英國唸書期間去了湖區兩次, 第一次是在第二個semester結束後(6月初), 目的地是Windermere和Grassmere兩個湖. 第二次是在第三個semester結束論文交出去之後(8月初), 目的地是Ullswater這個湖-英國的master program為期ㄧ年, 分3個semester, 每個semester結束會休息1~2個星期, 沒有寒暑假, 是很緊湊的學制.

先從第一次去的Windermere和Grassmere兩個湖介紹起. 整個行程為5天4夜.

成員(在英國認識的台灣學生): Eagle & Sandy (couple): Marketing, Joe: Product Design, Sara and Jane: Multimedia Design

湖區位於英國中部, 有大大小小的湖和1000公尺左右的山(丘陵)密佈在這個地區. Windermere湖是英國最大最狹長的湖, 從北到南約17公里長, 是湖區裡面最熱門的景點. 坐火車的話要在Windermere這個城市下車. 每次到達一個景點第一件事就是先到Information Center找好可以放行李以及晚上睡覺的地方, 歐洲地區的車站附近都會有這樣的旅遊諮詢中心(地區大的話還不只一個), 專門提供旅客查詢景點, 訂門票和訂旅館的服務.

B&B (Bread and Breakfast)是英國民宿的通稱, 提供早餐和住宿, 每人每晚約22~25英鎊, 價格比旅館便宜許多. B&B也有評等, 評等越好的會有越多A的牌子掛在門口(如AAA), 但是價格也會越高, 通常只要有A就還算乾淨舒適, 沒有A的就要碰運氣了. 大一點的民宿會有單人房, 雙人房, 3人房, 4人房, 甚至5人房的房間, 其中二天住進5人房, 3張單人床加1張雙人床, 我們一行剛好5個人,可以擠在同一間看電視吃泡麵和聊天聊到睡著. 這樣的機率可不高, 像中樂透一樣高興.

Windermere這城市位在Windermere湖中段地帶的東邊, 不直接靠湖岸, 但是有小徑穿過樹林通往西邊的湖岸, 往東邊的小山丘走同樣要穿越樹林, 從山上欣賞windermere的夜景, 這個時節的日落大約是晚上9點多, 所以晚餐之後還可以出去散散步, 湖岸邊和山上的夜景我們分在兩個晚上走過. 湖區的治安是不錯的, 晚上也看得到三三兩兩的遊客和我們ㄧ樣穿越樹林閒逛, 更何況我們有5個人, 人多好辦事就像這樣子. 湖區建築物的特色是用石板堆砌的房子或圍牆, 這樣的房子是倫敦或其他大城市看不到的.

往南走1.5公里是名為Bowness-on-Windermere(簡稱Bowness)的碼頭, 從這個碼頭坐輪船(Steamer) 往北可以到Ambleside再轉往Grassmere, 我們先往南到Lakeside, 從Lakeside轉搭蒸氣火車到Haverthwaite, 單趟約半小時車程. Haverthwaite這地方沒什麼特殊景點, 只是蒸氣火車的終點站, 重點是搭蒸汽火車. 所以吃個午餐稍做停留之後, 就搭下一班火車循原路回Bowness.

在Bowness除了坐輪船欣賞湖面風光, 碼頭對面也有彎延的步道可以走上山從高處欣賞湖景. 約1小時路程就能走到山頂, 這裡的山(應該說丘陵)都很平緩, ㄧ路上會經過當地居民門前精心佈置的庭院, 這樣的山爬起來很輕鬆悠閒. 遠處有羊群吃草, 這一大片山平整的草皮是這些羊的功勞嗎? 山上長滿一種名叫Butter Flower(奶油花)的花, 在英國很多地方都看得到. 這乾淨的花草皮是可以隨處坐下來, 從山上往下眺望windermere更廣更遠的湖面.

聽過彼得兔童話故事嗎? 湖區是彼得兔的故鄉, 作者Beatrix Potter就是在湖區寫下這個童話故事的. 所以Bowness有ㄧ個Beatrix Potter展覽館是ㄧ定要參觀的, 裡頭展的是童話中的人物和場景. 在湖區很多商店都能看見印有彼得兔的茶具組, 盤子, 服飾, 文具和書籍等商品, 價格都不便宜, 所以看看就好. 展覽館出口是可以喝茶的shop, 這個shop掛滿了彼得兔的杯盤, 是商品也是擺飾, 走累了就坐下來喝杯英式下午茶聊聊天吧!

>> 請接 [下集]

Web Designer：網頁設計關鍵Idea

2007-03-24T23:55:00.000+08:00

http://www.books.com.tw/exep/prod/booksfile.php?item=0010350272

這本書的作者是梁景紅, 大陸人, 英文名字Relen, 在平面設計, 網頁設計及設計寫作三方面都有很優異的表現. 本書由「目的、資訊、設計、創意」四個面向探討網頁設計, 專業性很強, 涵蓋層面也很廣, 是值得推薦的網頁設計書籍.

這本書是少見的將”設計的目的”和”內容資訊結構”納入網頁設計議題探討的一本書, 台灣目前常見的網頁設計書籍多半是軟體操作(如Dreamweaver, Flash, Photoshop等)或者類似”Web Design Index”--搜集網路上不錯的首頁畫面, 再按照色彩或產業類型分類, 印刷成精美的冊子, 書中沒有關於設計的說明或分析. 這樣的書在設計師缺乏靈感的時候, 提供一個迅速又方便的構想來源, 但是要提升設計功力, 治本的方式應該從技巧與思維兩方面進行.

熟悉軟體操作和網頁語言工具是必備的條件, 但是有了基本條件不代表可以做出好作品, 好的作品和設計的思維有關, 包括對設計標的物的觀察理解, 設計的想法和表達的方式等. 所以多看看書, 多看看好的設計作品, 多聽聽別人的想法, 多涉略各領域的知識是不錯的方式.

對設計來說天分也很重要, 大部分做設計的人都是喜歡設計或對設計有興趣, 但是喜歡不代表就有這方面的天分. 有天分加上後天努力一定會有很不錯的作品表現. 但如果只是想做喜歡的事, 並不求有什麼作品表現的話, 有沒有天分就不是那麼重要, 就看設計師對自我的期許到哪?

天极Yesky網站去年有ㄧ篇”蛻變與成長訪問圖形圖像設計師-梁景紅Relen” 的專訪(繁體版), 分三篇談梁景紅的商業設計, 個人創作和書籍寫作, 還有幾篇很完整的試讀文章連結, 就不多做本書的介紹.

《設計師談網頁設計思維》圖書簡介
《設計師談網頁設計思維》引言：從哪裏開始
《設計師談網頁設計思維》節選：視覺疲勞？
《設計師談網頁設計思維》節選：衝破傳統
《設計師談網頁設計思維》節選:固定與變化
《設計師談網頁設計思維》節選：互動問答

專訪中有很多梁景紅個人的插畫和logo設計作品, 可以看出她的色彩運用很豐富也很大膽, 想更進ㄧ步了解她的色彩運用, 可以參看另一篇不在本書範圍的文章連結 “電腦美術設計中的色彩表現” . 事實上, 梁景紅2006年3月還有ㄧ本在台灣出版的書 “專業網站設計與配色實例解析”, 算是”網頁設計關鍵Idea”的前身, 很多設計範例和說明是相同的, 但沒有這麼詳盡.

近來經常上大陸網站看設計網站, 有的是翻譯文章, 也有軟體教學範例, 還有設計作品介紹等, 資料豐富的程度是台灣網站看不到的, 目前大概只有”黑秀網–台灣設計師入口網”有這樣的雛型, 但還有很遠的路要走, 也許和法令規範有關係, 大陸的規範比較寬鬆, 比較沒有顧忌, 對網頁內容豐富性有相當程度的助力.

剛開始看簡體字有點辛苦, 但是看多了辨識率自然會增加, 我就是個例子, 目前可以辨識的程度約80%, 對文章理解程度已經足夠, 剩下的就用猜的, 再不然就轉貼到Office 2003版的word有繁簡字轉換功能. 看英語網站也是條路, 但是對有語文障礙的人來說, 克服簡體文要比克服英文容易多了. 建議設計師們多到大陸的設計網站看看, 可以先從藍色理想網站開始, 從這個站可以連到更多其他的相關網站, 不妨試試!

最大寬度與最小寬度網頁設定

2007-03-18T22:55:00.000+08:00

W3C雖然制定了最大寬度(max-width)與最小寬度(min-width)的CSS, 但是IE先前的版本並不支援, 直到最近的IE7才開始支援這兩個屬性, 所以很少人使用這項功能, 其實Firefox, Netscape, Opera瀏覽器早已支援.

根據useit .com 2006年7月調查, 1024螢幕寬度是目前最多人使用的, 約佔60%, 800螢幕寬度的使用者約17%, 其餘的是1280(含)以上的大螢幕顯示器, 目前最佳螢幕解析為1024 x 768.

運用這兩項屬性有什麼好處呢? 先從各種螢幕寬度的使用探討:

1. 如果設定為1024寬度, 那麼800寬度的螢幕會出現橫向捲軸, 造成17%使用者的閱讀性不佳.
2. 如果設定為800寬度, 資料多的網頁無法將最重要的內容在不拉捲軸情況下完整顯示出來.
3. 如果設定為彈性寬度(內容隨螢幕大小延展), 當螢幕過寬時(如1280以上), 對以文字為主的網頁會有閱讀上的困難.

一般的網頁內容都是由左排到右, 當我們瀏覽網頁時, 眼球會隨文章寬度從左邊慢慢移到右邊, 折行時再將眼球移回左邊第一個字, 這時如果寬度拉太長, 容易發生找不到承接剛才那一行字的情況, 螢幕越寬問題越嚴重, 這也是為什麼實體的報章雜誌排版都會採用分欄排版的原因: 為了讓讀者的眼睛可以保持一個角度從上閱讀到下, 眼球不用左邊右邊轉來轉去.

可是限制寬度是否會讓買寬螢幕的人無法發揮寬螢幕的作用? 買大螢幕可能是看影音圖檔, 玩遊戲或者專業繪圖等原因的需求, 不是拿來讀會讓眼球轉來轉去的文章, 如果是這種情況, 恐怕讀不了幾行就會放棄, 不然就要手動將瀏覽器寬度拉窄一些.

所以最大寬度設定就派上用場了, 做法如下:

IE7和其他瀏覽器可以直接使用max-width與min-width, 但是顧慮還有多數人使用舊版的IE瀏覽器, 所以要在width再加上一行script語法 (或可到http://www.svendtofte.com/code/max_width_in_ie/ 參看說明)

針對IE6, 除了加script語法, 還需讓它的顯示模式轉為相容模式(請參考瀏覽器的顯示模式一文), 做法有4種 (svendtofte.com採用第4種作法, 我再加上第1, 2, 3種作法):

1. 網頁Doctype宣告上方已經有xml宣告 <?xml version="1.0" encoding="big5" ?>
2. 網頁不需要有xml宣告的可以加上一行註解, 如 
3. 使用不加網址的宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. 不加任何宣告(非web標準做法, 不建議採用)

最大寬度設定

以下範例將最大寬度設為950px/置中, 當螢幕大於950px的會以這個寬度顯示, 小於950的則以實際螢幕寬度顯示, 例如750寬度的內容自動以750寬度顯示, 不會出現橫向捲軸. 瀏灠器的畫面如下:

1280寬度螢幕(兩邊空白)

750寬度螢幕(不會產生橫向捲軸)

Css寫法如下:

<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
max-width: 950px;
width: expression(document.body.clientWidth > 950? "950px": "auto" );
}
</style>

html寫法如下:

<div>
<p>最大寬度測試網頁, 最大寬度測試網頁, …….</p>
</div>

最小寬度設定 (寫法與最大寬度相近)

以下範例將最小寬度設為780px/置中, 螢幕大於780px的話, 內容會隨螢幕寬度延展為滿版, 小於780的則以780寬度顯示, 並出現橫向捲軸, 瀏灠器的畫面如下:

1280寬度螢幕(滿版)

650寬度螢幕(產生橫向捲軸)

Css寫法如下:

<style>
body {
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
div {
margin: 20px auto;
border: red 2px solid;
min-width: 780px;
width: expression(document.body.clientWidth < 780? "780px": "auto" );
}
</style>

html寫法如下:

<div>
<p>最小寬度測試網頁, 最小寬度測試網頁, …….</p>
</div>

最小寬度應用的時機可能是為了維持某些排版或內容呈現的完整性, 不希望隨螢幕縮小產生變動, ㄧ般來說, 最大寬度設定的需求會比較廣些.

如何成為頂尖設計師

2007-03-11T23:35:00.000+08:00

http://www.books.com.tw/exep/prod/booksfile.php?item=0010343502

這本書不只談設計, 也談所有關於設計師的事, 包括設計師的特質, 如何找工作, 如何接案, 成立工作室, 面對客戶, 自我宣傳等, 最後ㄧ章是和幾位知名設計師的專訪. (本書所談的設計是指平面設計, 但其他領域的設計也同樣適用), 在這裡想討論的是所有設計師共通的問題: 設計師的特質和面對客戶, 以下是這二部份的重點摘要和個人的看法.

特質的部份:

設計師通常需要在作品中注入一些具備力量且可以獲得共鳴的要素, 所以必須留意週遭事物, 將觸角伸到設計以外的領域, 包括政治, 娛樂, 商業, 科技, 藝術, 體育活動等, 作者統稱這些為文化敏感度, 同時認為文化敏感度比軟體技巧和學歷重要, 他舉自己的公司為例: ㄧ個不懂中文的西方世界公司, 如果沒有學習了解香港在地文化, 又怎能做出富有意涵的作品?

除了文化敏感度與對各種事物的了解, 設計師還需要圓熟的溝通技巧, 不是口若懸河發表評論, 而是以客觀具說服力的方式, 有條理的解說自己的設計. 仔細聆聽客戶的觀點, 挖掘隱藏的線索和未言明的訊息, 然後再提出構想, 商討出共識. 此外也要避免將自己的想法強加在客戶身上, 設計師總會忍不住將個人品味和想法放入作品, 因為喜歡才這麼做本身並沒有什麼錯, 但若跟客戶這麼說就錯了, 必須以切實的理由明確解釋為何如此設計, 別讓客戶感覺你是用客戶的錢在做自己喜歡的東西.

面對客戶的部份:

「該怎麼做才能讓客戶不再修改我的作品?」不是容易回答的問題, 如果作品有瑕疵, 構思不周全, 執行有缺失, 客戶要求修改是必然的. 避免客戶干預好的設計作品, 唯一的辦法是在ㄧ開始就建立合宜的配合模式—在配合的關係中, 傾聽吸收客戶的觀點, 而態度表現上, 也能使客戶願意容許你有自己的看法. 作者引用Ian Anderson的觀點: 「客戶提供給我們的就像打散的拼圖, 客戶在創意方面如果無法給太多建議, 我們會覺得比較愉快, 因為如果他們的意見太多, 就有點像玩填字遊戲時, 有人站在背後幫你做答一樣. 我們希望客戶可以交給我們一個艱難的任務, 然後我們可以像藝術家一樣將作品展示出來, 並聽見他們的讚嘆: 「太好了! 比我們原本想像的還棒」. 當然也有客戶只想掌控ㄧ切, 這時候只有兩種選擇: 照做拿錢, 或放棄這個案子.

設計師也必須擁有虛心求教和自我批判的能力, 才能知道自己何時犯錯, 才能避免犯了過度自信和高傲的毛病. 沒有比自認為永遠是對的, 更能代表二流設計師的特質.

時間也是ㄧ個基本要素, 提案時, 應該給客戶時間整理他的觀感, 不要要求對方一看到作品就立即回應. 客戶此刻並沒有以真正客觀的眼光看待作品, 而是在臆測他們設定的訴求對象看到提案後會有什麼反應, 因此保留一段時間, 比較能得出客觀的意見.

我的看法:

比較想提出來的是「客戶提供的意見」, 我贊同Ian Anderson的看法, 客戶提供太多想法雖然會有比較明確的設計方向, 但是對設計創意的表現也會有相對的限制和阻礙, 理想的狀況是客戶提供希望達成的目標和呈現的感覺, 例如表現活潑愉快的氣氛或者是表現嚴謹的專業形象等, 至於版面寬度, 色彩, 位置分配等則希望留給設計師做整體構思, 可以發揮的空間比較大. 當然這有某種程度的風險. 面對客戶時, 需要”觀察或感覺”客戶的類型, 再決定應該問到什麼程度. 基本上會先看客戶理解的程度? 懂得多的客戶可以談深入些, 甚至構思初步的想法做討論, 懂得少的客戶就別問太多, 我遇過800 或 1024螢幕寬度都弄不清楚的 (通常是主管級), 對畫面也沒什麼想法或概念, 其實我喜歡這種客戶, 都交給我就OK了!

當然客戶類型有很多種, 不是這麼容易區分, 需要以當時狀況判斷, 能問清楚問詳細是最保險的做法, 不過發揮的空間也會相對縮小.

第21頁

2007-03-10T23:11:00.000+08:00

http://www.books.com.tw/exep/prod/booksfile.php?item=0010321736

這是李家同2006年的作品, 去年ㄧ位朋友推薦我看. 書的內容淺顯易懂, 用充滿關懷與親切自然的文字, 訴說許多溫暖發人深省的故事, 適合各年齡層的人閱讀.

書名「第21頁」出自書中第一篇故事: 一位教授在臨終前, 仍然記掛多年前育幼院的學生. 身旁的人動用所有關係, 終於將學生帶到教授病床前, 教授要他打開保存已久的課本, 翻到第二十一頁, 那是學生蹺課前教授為他上的最後一頁. 這位學生, 將這一課唸完之後, 教授即安詳離去.

本書分上下卷, 上卷是12篇散文, 有李家同對人的關懷很深的情感. 下卷是他對當今社會幾個現象的看法與讀書心得: 例如台灣的孩子ㄧ直生活在無憂無慮的環境裡, 不能想像世界為什麼會有悲慘的事情發生. 也因為不能體會人間悲苦, 所以造就了雖然沒有製造仇恨, 但卻冷漠的一群. 他引用德雷莎修女的話: 「愛的反面不是仇恨, 而是漠不關心」, ...... 如果我們做了壞事, 當然應該懺悔, 如果我們沒有做壞事, 但也沒有做什麼好事, 我們也應該懺悔.

這本書的序寫的很好, 博客來網站有完整張貼, 轉貼如下, 不想看他書的, 至少, 這序一定要看完.

看完序之後, 很難不自我檢討: 不管有多麼優秀, 都應該謙虛待人, 如果優秀也是上天的恩賜, 不全然是自己的努力, 要感恩也要珍惜. 看完他的書, 也要檢討好事做的太少, 因為不是不知道世界有很多貧苦的人, 很多時候是不願意或假裝不知道......, 需要檢討!

-------------------------------------- 轉貼序文 ----------------------------------

羞愧與感恩（代序）　　李家同

我從小就沒有自以為了不起的想法，這是因為我曾經看過很多厲害的人物，功課比我好的多的是，體育比我好的更是一把抓。我不但不會驕傲，反而總覺得自己不如人家。也因為如此，我一直沒有什麼自以為幸福的感覺。

這種不覺得自己有多少幸福的時代，最後終於結束了當我到達了印度加爾各達的垂死之家，看見了那麼多赤貧如洗的人，我的想法完全改變了，我從此以後會一再地提醒自己有多麼幸福。我永遠忘不了的是一位十來歲的年輕乞丐，他常握住我的手不放，每次我離開垂死之家，都會回頭看他一眼，他也會揮手和我道別。我因此開始有了羞愧之情，因為我知道我會回到我舒適的家去，而他呢？他如能活著離開垂死之家，也只能回到他當初求乞的地點。我雖然年紀不小，但我仍有事業和前途可談。而他呢？他只有十幾歲，他已命中注定沒有前途了。

自從這次經驗以後，我開始有了完全不同的想法，我發現我之所以能夠在社會上稍有成就，完全是運氣好的緣故。如果我生長在非洲，或者印度非常貧困的家庭裡，我會有今天嗎？如果我生下來就是乞丐，不要說唸書了，我連吃飯都會有問題，極有可能的是我現在早已不在人世了。

自從去了一次垂死之家，回台灣以後，才發現台灣也有不少不幸的人。首先令我感到吃驚的是我國的失功能家庭非常之多，有的是父親不見了，有的是母親不見了，有的是爸爸長年被關在監獄裡，當然有更多的是爸爸酗酒，或者父親一直失業，以致於情緒很不穩定。在這種家庭生長的孩子，能有什麼前途呢？

我的父母一直給我一個溫暖的家，使我有一個可以唸書的環境，也使我遠離世界上很多的罪惡，可是我一直不覺得這些有什麼了不起，等到我看到了這麼多不幸的小孩子，我才恍然大悟，知道自己多麼地幸福。

在我們的社會裡，也有不少家庭並非是不好的家庭，但是非常窮困，在我們競爭如此激烈的情況之下，貧困的小孩子是很可憐的，他們如果功課有不懂的地方，回家往往無人可問，他們的父母不能送他們去補習，不能替他們請家教，他們的功課怎麼能好起來呢？這些窮困的小孩子往往沒有錢買書看，和其他同學比起來，他們的文化刺激少得可憐。

我最近常常慶幸自己不是生長在如此惡劣的環境之中，因為我知道如果我有如此惡劣的生長環境，我絕對不可能有今天的成就的。

也就是因為我自己知道有多麼的幸福，我最近常有羞愧之心。我總覺得我生活得如此之好，實在不是因為我很努力，而是因為我得天獨厚，家庭好，夠聰明，從小就不知道真正貧困的滋味，有這麼多好條件，當然可以在社會上立足了。

羞愧之情使我常有「這可能是我」的想法，夜深人靜，我常想起在加爾各達垂死之家的那位年輕乞丐，而且也會想「我也可能是乞丐的」，看到在戰爭中喪生的無辜人民，每次看到窮困的小孩子，我也會想到「他就是我」，我就是這種心情之下，寫出「我的故事」的。「我的故事」裡的主角，經常提醒自己可能是一個不幸的人，這種不斷的提醒使他比較有慈悲心。大多數毫無慈悲心的人往往是對於周遭不幸的人毫不知情。有時我們不能責怪他們，在建中唸書的孩子，什麼題目都難不倒他們，他們又如何能想像有人不會解一元一次方程式呢？在正常家庭中長大的孩子們，也不可能知道有些孩子等於沒有爸爸媽媽，因為爸爸經常被關在監獄裡面，媽媽又已經離家出走了，收入豐富的電子工程師們當然也不知道有人經常找不到工作，既使找不到工作，收入也少的可憐。

　　我是學電腦科技的人，我們常講「虛擬實境」，有一部叫做「駭客任務」的電影，甚至形容人可以生活在一個虛擬的情境之中而毫不知覺，我當然知道這是不可能的，如果可能的話，我們實在應該使我們知道何謂貧困，何謂無家可歸，何謂在戰亂中顛沛流離。雖然這不容易，我們卻應該努力地想像貧困，無家可歸等等人類的苦難，唯有如此，我們才會有悲天憫人的情懷。

　　羞愧之情也使我越來越有感恩之情，不是嗎？我何德何能，能在社會上立足？如果不是社會給了我一個好的生長環境，我一定一事無成的。

　　每天早上起床，就可以看到報紙，我當然應該感謝送報紙的人，他們必須好早就起床，才能使我們這些大爺們能夠在六點鐘時刻看到報紙。到了學校，發現大樓走廊裡地磚一塵不染，我知道這是因為一大早，有一位中年婦人每天將地磚拖洗一遍，她看到我一定會熱切地和我打招呼，有時，廁所裡沒有擦手紙或者洗手的乳液用完了，她一面補充，一面還表示歉意。我真的對她心存感激，因為我可以感受到她帶給我的溫暖。作為一位教授，我常常想，還好有麼多已經作古的人做了那麼多的研究，才使我們這些後知後覺者有精彩的書可教，如果我有一些研究的成果，應該感謝同事們的切磋和研究生的努力，我能不感謝他們嗎？

　　我最近偶然間看到一篇愛因斯坦寫的短文，文章中，愛因斯坦說他一直心懷愧疚，因為他的一生，得到別人的幫助實在太多，所謂別人，他特別強調包含已經死去的人，他又說，他覺得他向社會借了很多的債，因此他說他必須提醒自己，要為別人而活，這篇文章的題目就是「人人都應該為別人而活。」。

　　愛因斯坦在學術上的成就，幾乎到了前無古人，後無來者的地步，但是他仍然強調他應該感謝別人，因為他的成就也是建築在別人的努力之上。愛因斯坦這樣偉大的科學家，都一再地強調他欠社會太多，我這種人當然更應該有同樣想法了。愛因斯坦說他要努力回饋社會，我更該回饋社會了。

　　但是如何回饋呢？我有我的作法，我抓一些德蘭中心的小鬼，來做為學生，教他們英文和作文，這些小鬼雖然老大不願意，但是因為我實在教得太好了，他們也就「勉於接受」了我的教導。我們常常聽說弱勢團體的小孩子功課不好，其實都是因為他們沒有人做他們家教而已，一旦有人做家教，成天做習題，背英文單字，數學和英文就不會太差。我也是運氣好，有一位富翁肯捐錢成立博幼基金會，專門幫助弱勢孩子，現在聯電已經開始同樣工作了，而且鴻海也要在近日內開始。這些事情是我寫「大庇天下阿強俱歡顏」靈感的來源。

　　可是教弱勢孩子也絕對是一條單行道，我從不覺得我是在做一件偉大的事，反過來我一直覺得這些調皮小鬼們的確帶給了我好多好多的歡樂和心靈上的平安。每次去教書，我就精神百倍，心情極好。（我的那批學生當時心情一定非常沮喪）因為我覺得我自己在做一件很有意義的事，也是使我極有成就感。我常想，我應該感謝他們，是他們使我的人生過得很有意義，「是我應該謝謝你」，就是這樣寫出來的。

　　講到人生，我有一個奇怪的經驗，我有時被人請去演講，都有聽眾問我一些大問題，比方說：「人生的目標是什麼？」，「人生的意義是什麼？」，我又不是哲學家，學的是電機，如何能回答這個問題？可是我常常問，誰的人生最有意義？每次想到這個問題，我就立刻想到德蘭中心那些修女們，她們的一生，都貢獻給了需要照顧的孩子身上，當她們去世的時候，她們一定可以豪無畏懼的去見天主，對我來講，這種人生是最有意義的。

　　有一次，我在看小朋友表演舞蹈，一位年青的修女也和她們一起跳舞，而且跳得非常好。當時我在想，這位修女可以像一般人一樣地工作，結婚，有一個溫暖幸福的家庭，但是她沒有走這條路，她將她的一生貢獻給了需要幫助的小孩子。哪一個人生比較有意義呢？我想任何一個人都會說她選擇的人生比一般人的人生有意義。因此我得了一個結論，一個人成天研究人生的意義是不可能得到什麼答案的，重要的是，你要過有意義的生活，這就是「瑪利修女」的來源。

　　我們基督徒常唱的一首聖歌是：「我有平安如江河」，我們也成天講心靈上的平安，天主教彌撒中更是一再強調平安的重要性，神父最後的祝福也是「主的平安與你同在」，可是奇怪的很，真正有心靈上的平安的人並不多的。我常去德蘭中心，我發現那些好心的修女們永遠有心靈上的平安。我想起德蕾莎修女的故事，有一位富有的牙醫來找德蕾莎修女，他說他什麼都有，就是沒有心靈上的平安，但他感覺到德蕾莎修女有，他說他願意學習她，因為他有的是錢，他說他想隨時跟著修女，如果修女搭乘飛機，他也會買一張機票同行，用這種辦法，他相信他可以領悟到如何能夠得到心靈上的平安。德蕾莎修女聽了他的想法以後，告訴他，既然他有買飛機票的錢，就不妨將錢捐給窮人，既然有時間坐飛機，也就不妨抽空去幫助不幸的人，這樣做，她保證那位富有的牙醫會得到平安的。

　　我因此寫了「窮人的遺囑」，窮人怎麼會寫遺囑呢？故事裡的窮人，還像煞有介事地在遺囑中註明他將所有的遺產送給某人。幾十年後，我們才知道，他的財產是心靈上的平安，但是心靈上的平安並非白白得到的，你必須去幫助別人，才能得到這種平安。也只有經由幫助別人，我們才能得到平安。

　　我們做老師的，常會照顧一些清寒的的特殊學生，其實那些非常富有的學生，也是特殊學生，我寫的「特殊學生」，就是大富翁的孩子，他也有他的煩惱，他甚至不敢邀請同學到他家玩。

　　對於我所有的學生，我永遠告誡他們要有一技隨身，「麵包大師傅」就是這種樣寫出來的，我的意思是說，有的人也許可以走學術路線，唸大學，唸碩士班，唸博士班，但並非人人必須如此，如果你會做麵包，一樣可以在社會上立足。這篇文章一出來，不知道有多少人在問那家麵包店在哪裡。

　　有一次，我在路上遇到一位老太太，她認出了我，她說她們在幫助一批弱勢的孩子，自從看了我的文章以後，她們就和台北的大飯店聯絡，給幾位孩子做學徒的機會，這些孩子學得很好，也常常送麵包給她們吃。

　　我的確有一位會做麵包的學生，也常送我麵包吃，「你不要趕我走」，幾乎是真實的故事，有一位普渡大學念電機的學生告訴我一個故事；我的一位高足，楊昌彪教授又告訴我另一個故事，我拼拼湊湊，寫出了「你不要趕我走」，人類的貧困真是人類的羞恥。有時看到旅遊頻道，發現一些奢侈豪華的旅館有給狗吃的菜單。在聖誕夜，BBC新聞卻報導一則新聞，聯合國被迫將他們在非洲桑比亞的難民救助計畫減半，因為他們沒有錢了，他們只需要八百萬美元，世人真的無法湊到這筆錢嗎？美國人一年在寵物上所花的錢多達35億美元，在這個世界上，做一條富人養的狗，真的比很多窮人要幸福的多。

　　我如何會想寫「阿傑的姑媽」？故事裡的阿傑，應該是我的寫照，我從小就糊塗到極點，我在美國認識了我的太太，談婚嫁以後，必須寫信給未來的岳父大人，我鼓足了勇氣，寫了一封信回台灣，竟然將岳父大人的姓寫錯了。幸好岳父大人認為糊塗的人大概不會是壞人，也就批准了我的求婚。我當然不肯承認自己的糊塗，好在我有一位糊塗的研究生，我就完全賴到他的頭上，他好像無所謂，因為文章中說糊塗的人是有福的。

　　糊塗的人是否真的有福？我至少知道人不該太精明，有的人事事算計得一清二楚，反而常常發現自己吃了虧，糊塗的人反正不太在乎得失，而且比較慷慨，他們反而往往是快樂的人。

　　我已快到七十歲了，回顧我的一生，最快樂的事仍是因為我是一位老師，我知道很多老師大嘆現代師生關係的冷淡，可是我從來就沒有這種感覺，我一直覺得我的學生好得不得了，我因此寫了「再給我三十年」，以表達我對我學生的感激之情。我這個人好為人師，那個學生做了我的學生，我就鬧他一輩子，很多學生早已畢業，卻仍被我壓迫每週要做英文作文，而且還要讓我知道他增加了多少生字。這些同學聽說我還想再做三十年的老師，無不暗暗心中叫苦，有一位甚至告訴別人，他後悔當年選了我作為指導教授。

　　我當然一直有一些令我擔心的學生，當年他們在小學的時候，我曾經教過他們，後來就失去聯絡了，我只知道他們都是中輟生，也沒有什麼競爭力，「第二十一頁」就是在這種心情下寫出來的。

　　人老了，就會「其言也善」，我真的覺得我是一個幸運的人，而且我越來越知道那些世界上多的是不幸的人，我有吃有穿，就應該幫助那些衣食成問題的人。我當年唸書沒有問題，就應該幫助那些讀書不好的孩子。我自己沒有生病，就應該去探訪長期住院的病患，我自己有一個溫暖的家庭，就應該去看望那些孤獨的老人。

　　大概只有像我這種老頭子，會有羞愧與感恩之情，年輕人房貸無著落，汽車買不起，小寶寶的奶粉錢和尿布錢又貴得驚人，不會和我有同樣心情的，但我仍希望大家不要老是只想到了自己，既使年輕人，也不妨想想看，自己是不是一個幸運的人。讀我書的人，如果你願意張大眼睛看一下的話，一定會發現自己絕對是一個幸運的人，世界上比你不幸的人，比比皆是也。

設計中的設計 ESIGN OF DESIGN

2007-03-05T00:37:00.000+08:00

http://www.books.com.tw/exep/prod/booksfile.php?item=0010295569

本書是日本國際級的平面設計師－原言哉2005年新作, 探討何謂「設計」？

「設計是透過製作或溝通, 將我們生存的世界做一個真實的詮釋」，也就是對設計對象重新認識, 重新界定分界線, 然後做更深層的思考, 有更優越的認識與發現。「不是只有創造出新奇的東西才有創造性, 將習以為常的物品視為未知物, 作為能夠再發現的一種感受, 同樣也是種創造性」.

「相對於著重個人意志表達, 可以有相當多詮釋的藝術而言, 設計並沒有自我表現的動機, 他的起源是出於社會ㄧ方, 人們發現共有的問題, 這解決問題的過程即包含設計的本質. 過程中會產生人類能夠共同感受到的價值觀或精神, 在共有中發生的感動, 就是設計的魅力所在」. 以上是作者對設計的解釋, 簡單的說, 就是對事物做更深層的認識與重新詮釋的方式.

本書舉很多例子解說這樣的設計過程, 從日常生活用品, 印刷品, 商標, 建築到萬國博覽會等都有. 其中是ㄧ位建築家坂茂重新設計的捲筒衛生紙: ㄧ般捲筒衛生紙中心的蕊是圓的, 但是坂茂將它設計成方的, 然後這捲好的衛生紙會變成圓角的四方形狀, 在拉出來使用的時候, 會因為阻力產生「喀噠, 喀噠」聲, 於是提醒使用者不要浪費紙張這種「節省能源」的機能即刻產生; 如果是圓的, 只要輕輕ㄧ拉, 紙就很順的滑下來ㄧ大段。這是坂茂的設計思考方向，但是我相信應該有人不喜歡這樣的設計, 使用起來不方便. 這就要看使用者是從節省能源或者便利性的角度考慮了.

另外有二個有趣的設計: ㄧ個是深澤直人的「茶包」設計, 他將吊牌設計成十字狀, 茶包設計成人偶形狀. 吊牌的十字二端各拉ㄧ條線到人偶的二隻手, 當拉起茶包時就產生像在操作木偶ㄧ樣不可思議的感覺; 另ㄧ個是面出薰的「火柴」設計, 他將木條設計成樹枝的樣子, 點火時很像遠古時代的人所用的火把. 這是從趣味和懷舊的角度給物品一個重新認識和詮釋很好的例子。

還有ㄧ個例子是原言哉的「長野奧林匹克開幕式手冊」設計, ㄧ開始的想法就希望將冊子營造出「冬天的奧林匹克」的記憶, 讓來賓留下永難忘懷的深刻印象, 這個構想就由紙的素材實現: 一種能與冬天祭典相呼應的「雪與冰」的紙. 目的是要喚起一種在清晨踩著棉花般新雪的記憶. 作法是在像雪一樣柔軟的紙上做凹陷進去並呈現半透明效果的文字, 於是委託紙公司開發研製這種「雪與冰紙」, 再將文字的模型加熱後加壓在紙上, 紙纖維就會融解變成半透明. 當然還有燙金, 文字內容鋪陳等細節工作. 原言哉說「企畫這些事務的所有過程就是設計」.

本書藉由一個個的案例, 從設計的發想階段, 中間實踐的方法, 到最後所呈現結果的整個過程, 讓讀者了解設計應該抱持ㄧ種不斷追求完美的堅持與不容許有瑕疵的嚴謹態度. 這是設計對「質」的追求的最高境界. 相對於「質」的是「量」, 本書並未提到量的問題, 也許他們的案子不怎麼需要考慮這個問題. 但是對大部分公司來說, 來自成本壓力, 會希望盡量縮短時程, 追求的標準就落在客戶是否接受? 但是客戶接受的是否就是好的, 客戶應該比設計師清楚好或不好?

其實大部分的客戶知道的真的不多(不管他們承不承認), 這中間需要透過溝通, 誠懇的解釋為什麼他們喜歡的不合適(例如可能讓系統無法發揮應有的功能等原因), 並立即分析幾個更好的選擇方案, 這個「立即」是很重要的. 舉個例子: 如果客戶的想法不合適或者不可行, 當下可以立即解釋並提出建議的話, 通常接受度會比較高, 如果客戶是前天提的想法, 經過2,3天才去翻案的, 情緒可能就不太好. 但還是會遇到把自己定位成「傳聲筒」的一線人員, 只把客戶的訊息完整的傳回公司, 再把公司的訊息完整的傳給客戶, 無法立即做正確的回應. 錯失良機的後果就是不斷的修改. 客戶總是要看到畫面時才知道當初的想法不盡理想, 所以又提了一個, 但還是不理想……再改, 這種漫無目的修改過程很容易讓設計師沮喪.

漸漸體認到: 設計師的職責應該是儘量做出在「質」上讓客戶滿意的作品, 「量」則是希望控制在成本之下為原則, 沒有必要刻意追求速度, 速度往往是犧牲品質做到的. 好的設計需要一段時間了解和思考, 也需要時間製作完成. 經常遇見時程很趕的案子, 也不知道是客戶趕還是前面的人delay, 總之大概只剩下製作完成的時間, 了解和思考的時間就省了. 也或者大家都誤解設計的工作是一種制式的流程: 只要把圖放上去, 文字放上去, 然後排ㄧ排, 再切一切, 就可以完成一個網站設計. 這叫「加工」, 不叫「設計」. 遇到這種趕的專案, 通常會希望爭取比較合理的時間做出客戶滿意的東西, 否則就只能保證有東西看, 不保證客戶滿意. 這是ㄧ種妥協, 是身為設計師非常不願意的妥協!

情感設計

2007-02-28T23:33:00.000+08:00

http://www.books.com.tw/exep/prod/booksfile.php?item=0010316433#shipping

這本書的封面是名為「外星人」的柳丁榨汁器, 第一次看見這台榨汁器是在2002年英國西南方Bath 這個城市一家商店的櫥窗, 當時不像書的封面ㄧ樣擺上柳丁和杯子, 所以佇足在櫥窗邊和同學討論這個造型奇特的東西是什麼?

從頂端的長相不難明白是榨柳丁或檸檬用的, 但是那三支像ET的腳為什麼要做這麼高?...... 因為在這些腳中間放一個500CC玻璃杯承接順著上面凹槽流下來的果汁剛剛好. 三支腳的高度有功能上的考量, 不純粹因為奇特或好看. 我們的討論也如同這台榨汁器的設計者史塔克(Starck)所說, 他的榨汁器是用來打開話匣子, 引起一個話題的.

任何事務的設計不ㄧ定要遵循既定的規則, 可以著重於功能的, 也可以是情感的, 不管是屬於哪一種, 在設計者心中需要明白的是為何而設計? 進而掌握使用者的認知與反應.

圖說: 用 Mindjet 的 Mind Manager 軟體 (試用版) 繪製的流程圖

(試著用"圖像式思考"方式解說, 但是對讀書心得這單元來說是挺無聊的舉動)

作者將設計分成三種層次: 本能層次(外觀上), 行為層次(功能上), 反思層次(情感上), 是這本書的精華之處. 作者舉很多例子解釋各種層次扮演的角色. 例如:

只關注於外觀的設計容易淪為沒有營養價值的糖果一般膚淺空洞,但是只講求外觀設計的需求還是存在的, 購買沒用但是擺著好看的手工藝品的人比比皆是, ㄧ般人對設計的反應會先停留在外觀上;

在功能層次上, 擁有過多功能但是仍然無法滿足使用者需求的產品經常可以看見, 主要原因是沒有仔細探討使用者的需求和產品如何被使用的緣故. 通常觀察使用者的行為會比詢問有用, 因為大多數人對事物的理解與認知是有差距的, 在言語表達上也是ㄧ樣;

反思的設計則超越外觀與功能層次, 著重在文化, 感受和所代表的意義上面. 同樣一件設計, 會因為個人學習成長經驗不同而產生不ㄧ樣的認知, 有些事物(例如追求時尚名牌)對某人很有意義, 對另一個人來說很可能微不足道.

本書也談到一個有趣的議題: 由團體成員設計 v.s. 由單一個人設計.

作者認為行為層次的設計可以透過團體設計達成目標, 但是本能和反思層次的偉大設計通常是由個人設計的. 以需要多人參與、過程複雜的電影製作為例: 透過團體成員的妥協與共識設計出來的作品是安全有效的, 不過也總是無趣的. 最好的設計是能與主題緊密結合並具有明確的視覺重點, 通常這樣的設計是由個人的想像力驅動的. 如果你想要一個偉大的、可以改變世界的產品, 那就讓擁有清晰洞察力的某人驅動.

這個例子讓我產生一個聯想: 假設集合多位曾經得過奧斯卡金像獎的導演合作一部電影能不能產生一部空前的創作出來? 除非他們的想法完全ㄧ致, 不然就表示有人需要妥協. 但這是不太可能的假設, 任何一位優異的導演都不會讓別人左右他的思路或更改他的精心創作. 除非他放棄製做偉大作品的目標了. 設計師也是, 但前提是要夠優秀, 而且是讓人可以信任的.

Yahoo YUI 介紹

2007-02-28T21:58:00.000+08:00

在2006年12/30日一場「超越Web 2.0在企業之應用」研討會上, "小正正"介紹了Yahoo UI Library (簡稱YUI) 函數庫的應用, 網址為 http://developer.yahoo.com/yui/ , 可選擇"Download YUI" button下載完整的範例. 想做各瀏覽器都正常顯示的css網頁設計可以參考其作法.

函數庫相當於網頁設計的模組(含html/css/javascript), 這些模組分成三大部分:

1. Utilities --> DTML + AJAX 的web應用模組
2. Controls --> 互動式元件模組, 如月曆, 選單, 標籤頁, 樹狀圖等
3. CSS Resources --> 符合各瀏覽器的css 模組設定

第1. 2項比較適合企劃或程式人員在不需製作無障礙網頁的網站或後端操作平台參考

第3項CSS模組值得網頁設計人員研究參考, 這部份再細分成三項:
1. Grid --> 版型設定
2. Font --> 字型/字級/字距設定
3. Reset --> 修改Broswer預設值為0, 使各瀏覽器畫面呈現一致

CSS模組應用有以下幾個步驟: --> 參考網址: http://developer.yahoo.com/yui/grids/

1. Html/Xhtml宣告改為strict, 目的是使所有瀏覽器都用"標準模式"顯示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 連結3個css, 目的是重設各瀏覽器預設設定
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="grids.css">

或改用3者合併式的css
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

3. HTML區塊(CSS)設定

doc為版面寬度設定, 有750px, 950px, 100%三種
hd為Header(頁首), bd為Body(主要內容), ft為Footer(頁尾)
最外層主結構寫法如下:

<body>
<div id="doc">
<div id="hd"></div>
<div id="bd"></div>
<div id="ft"></div>
</div>
</body>

bd內容區塊則視資料結構有所不同(bd裡面的body內容), 以下範例是上中下/二欄式的寫法

<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>

欄位寬度/左右設定寫在doc這一行, 比較完整寫法如下

<div id="doc" class="yui-t4"> 
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>

主要變化在 bd 區塊, 可以從參考網址 http://developer.yahoo.com/yui/examples/grids/
選擇需要的layout 改變bd內容寫法

本範例demo 請參考 http://developer.yahoo.com/yui/examples/grids/example_g.html

Yahoo YUI 函數庫提供企劃, 設計和程式人員直接應用的模組參考, 網站開發流程是從上到下, 從前端到後端, 需要採用那些模組從最初的網站企劃就需要思考了

id 和 class 的差異

2007-02-28T20:10:00.000+08:00

原文刊載於Sitepoint : http://www.sitepoint.com/article/html-37-steps-perfect-markup/2
第 34. 項 id 和 class 有何差異?

id 是HTML 文件中某個特定元素的單一識別。好比社會安全號碼一樣為這個特定元素提供唯一可辨識的方式。如同二個人不可能擁有同一個社會安全號碼，任二個元素在文件也不可能擁有同樣的id. Ids在頁面中一定是獨特的。

class認定為某個元素有些特性可以與其他元素共享。一個元素可能同時屬於一個或多個以上class。用比較貼切的比喻：一個人可能同時是木匠和護士，而社會上有許多的木匠和許多的護士。 (他們全都有獨特的社會安全號碼)

id和class主要被使用於CSS和JavaScript。在CSS， id 比class有更高的獨特性，使它容易為一個特定元素訂定特殊的規則。以JavaScript來說，我們可以用id查找元素

我們指定 id在頁面中至多只能出現一次，例如導覽menu、footer、sidebar等。我們也可以指定 id在整個網站只出現一次，例如我們想要一個特定圖像擁有特定的CSS規則，或者想以JavaScript操作。

我們指定class到具有共同特徵的元素中，通常透過CSS規則顯示其屬性。

id和class名稱應該儘可能符合「語義」。它應該描述本身是什麼而不是描述外觀像什麼。因此用 id= "menu" 會比 id=”left” 好，因為萬一menu移動到右邊的話，left就不合適了。id和class名稱容易因為不同專案而變動，html也是。即便如此，我們也不應讓它隨著不同專案變動。

框格模型技法

2007-02-28T18:12:00.000+08:00

這技法起源於IE5/5.5與IE6對css區塊寬度的解譯不同, 目前的IE6, Netscape和Firefox對區塊寬度有相同的解譯模式稱為"標準模式"(standard model).

如果不考慮IE5/5.5的話, 是可以不必理會這種差異, 但是拜Microsoft之賜, 當IE6在Doctype上方加上任何宣告或字眼時, IE6對區塊寬度解譯就會變成IE5/5.5的"相容模式"(quirks model).

這就是為什麼網頁套上程式後, 區塊寬度經常會跑掉的原因, 因為工程師在Doctype上方加上
<?xml version="1.0" encoding="big5" ?>

IE5/5.5與IE6對區塊寬度的解譯到底有什麼不同?

舉一個200px寬度加上10px間距和1px框線的區塊為例:
width="200px", padding="10px", border="1px"

IE6, Netscape和Firefox會對這區塊顯示出 200+10*2(左右間距)+1*2(左右框線)共222px的區塊寬度 --> 間距與框線寬度外加
IE5/5.5則會對這區塊顯示出padding+border共200px的區塊寬度 --> 間距與框線寬度內含

所以當IE6在Doctype上方加上xml宣告或任何字眼的區塊寬度會比原設定少(從"標準模式"變成"相容模式")

如果不在Dectype上方加宣告, 程式仍然可以正常運作, xml宣告也可以寫在<head>裡面.

"框格模型技法"是顧全新舊版IE, Netscape和Firefox的技巧, 雖然在css寬度設定時會比較麻煩, 但是如果要製作各版broswer都相同的網頁就要熟悉這項技法 .

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc;}
#box { width: 250px; voice-family: "\"}\""; voice-family: inherit; width: 200px;}
html > body #box { width: 200px;}

#box將寬度寫進另一個同名id,
第一行寬度250px是寫給IE5/5.5看的(所以寬度較大).
第二行寬度200px是寫給IE6看的, 因為IE5/5.5讀到 voice-family: voice-family: "\"}\""; voice-family: inherit; 後就不再往下看, 而IE6會以第二個寬度為準

html > body #box 是寫給Netscape和Firefox看的, 因為IE5/5.5/6不支援這種css寫法
(但是IE7已經支援這種寫法, 如果要再專寫一組給IE7看的可以用*+html > body #box)

在Doctype上面加上xml宣告的網站做法還可以再簡化, 所以在設計網頁時就先加好這行宣告, 讓broswer直接以IE5/5.5模式反應寬度.

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc; width: 250px;}
html > body #box { width: 200px;}

以上是不以IE6的版本做考慮, 因為IE6已經不存在, 就算user的broswer是IE6也會變成以相容模式呈現, 但是html > body #box還是要加上, 用來解決Netscape和Firefox的寬度問題.

瀏覽器的顯示模式

2007-02-28T17:37:00.001+08:00

DDOCTYPE 有很多種, 除了識別html / xhtml版本, 也告訴瀏覽器該以哪一種模式顯示網頁
W3C (http://www.w3.org/TR/html401/struct/global.html#version-info) 公佈HTML 4.01的三種寫法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD 就是「文件類型定義」（document type definition）的縮寫。Strict對html採嚴格定義, 禁止使用過時語法; Transitional採比較寬容定義, 允許使用部份即將過時語法; Frameset是frame網頁使用

瀏覽器顯示可以簡單歸結成二種: 標準模式(standard mode)和相容模式(quirks mode)

加網址的顯示為"標準模式", 不加網址的顯示為"相容模式", 不加宣告的則反應為 "相容模式"

目前常用的html宣告為 (標準模式) --> 有加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

還有一種html宣告為 (相容模式) --> 沒加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

老舊版本的瀏覽器多半是相容模式, 新的標準的瀏覽器則是標準模式
有支援切換宣告模式的瀏覽器為IE6以上, Netscape6以上, Firefox1以上版本

二種模式的差異為: 標準模式 CSS padding寬度外加, 相容模式 CSS padding寬度內含 (所以造成寬度顯示不同)

舉例: IE5, IE5.5, IE6 + 第一行xml宣告 --> 會顯示為相容模式
IE6, IE7, Firefox1.0, Netscape6.0 --> 會顯示為標準模式

(但是IE6 + 第一行xml宣告顯示為相容模式 (IE6 bug 之一), 在IE7和firefox不管有沒有 + 第一行xml宣告都會顯示為標準模式)

為了畫面正常而拿掉宣告不是很好的解決方式, 採用不加網址的宣告則不確定是否符合無障礙規範, 設計時仔細檢查調整css各區塊padding的設定應該都能解決

IE7 的bug

2007-02-28T16:46:00.000+08:00

在 positioniseverything.net 中所提到IE5/6的bug, 在IE7都已經修正, 唯一還延續著的是 "Escaping Float Bug"
(原文刊載於 IEblog: http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx )

範例: 一個設定黑色外框及邊界的div內, 包覆幾個float left的小正方形div,
正常流覽器顯示的畫面如下:

但是IE的畫面中, 框線會內縮, 無法正常撐開

提供的修正方法是在設定外框這組div加上以下一段css (或者避免做這種外框或底色的設定)

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */

這個範例完整的css寫法如下

(外框設定)
.floatholder {
border: 2px solid #000;
margin: 0 40% 20px 10%;
}

(小正方形設定)
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background: #bb7;
color: #ffd;
text-align: center;
}

(修正的css)
/* hide from IE-mac \*/
* html .hollyhack {height: 1%;}
/* end hide */
(第一行讓IE-mac版隱藏, 第二行設定* html . hollyhack 高度為1%, 第三行為純註解)

範例的html寫法如下:
(參考網址: http://www.positioniseverything.net/explorer/escape-floats.html )

- - > 請注意 ”floatholder” 和 “hollyhack”為二組並存的class, 中間要空一格

<div class="floatholder hollyhack">

<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
……………………………………..
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>

<div style="clear: both;">
</div>

p.s. IE7修正 positioniseverything.net 上所說的bug如下, 可以點進去看範例, 唯一沒修正的就是上面說的"escaping floats", 計畫將來會修正

All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)

Peekaboo Bug
Internet Explorer and Expanding Box Problem
Quirky Percentages
Line-height bug
Border Chaos
Disappearing List-Background bug
Guillotine Bug
Unscrollable Content bug
Duplicate Characters Bug
IE and Italics
Doubled Float-Margin bug
Duplicate Indent bug
Three pixel text jog
Creeping Text bug
Missing First letter bug
Phantom box bug

支援各種平台的網站製作方式

2007-02-28T15:47:00.000+08:00

W3C已經將手持裝置(Handheld, PDA和Mobile等行動裝置), TV(數位電視), projection(投影機)列入css的支援項目. 相信不久之後, 就可以在同一個頁面設計不同平台需要呈現的樣式, 不用一一開發PDA版, 手機版, 或iTV版的網頁, 只要在<head>連結不同版本的css就可以了. 但是支援的目標只是讓使用者都能存取網站內容資訊, 如文字, 影像, 多媒體物件等, 不代表所有平台都呈現相同畫面.

連結不同平台css只要在media指定支援的媒體形式即可, 寫法如下:
全部: <link rel="stylesheet" type="text/css" href="css/link_all.css" media="all" />
電腦螢幕: <link rel="stylesheet" type="text/css" href="css/link_screen.css" media="screen" />
印表機: <link rel="stylesheet" type="text/css" href="css/link_print.css" media="print" />
手持裝置: <link rel="stylesheet" type="text/css" href="css/link_handheld.css" media="handheld" />
投影機: <link rel="stylesheet" type="text/css" href="css/link_projection.css" media="projection" />
數位電視: <link rel="stylesheet" type="text/css" href="css/link_tv.css" media="tv" />

各平台瀏覽器的css支援情況如以下網址: (目前大多已經支援all, screen和print項目)
http://w3development.de/css/assigning_external_css/link.html

為了製作支援各種平台的網站, 是有必要開始改變一下製作網站的方式, 這是可預見未來2~3年的事, 提早準備應該可以免除很多將來改版時的困擾, 而且小修改就可以做到

1. 使用xhtml標記語言取代html

xhtml已經取代html4.01為目前網頁標記語言的標準, 主要原因是html標記不夠嚴謹, 允許標記沒有開始或結束的寫法(p,br,li等), 造成其他平台可能無法顯示的狀況. 再者是為了和xml銜接. 目前建議使用的標準版本為XHTML 1.0 Transitional.

2. 建立結構化的格式

文字資料的格式由結構化的標記建立, 標記語言結構化是指"根據文意建立文件結構". 有利於上述平台broswer解譯文件內容, 所以使用標記時必須考量標記所代表的意義. 例如標題為<H>, 段落為<P>, 項目條例為<li>或<dt><dd>等. 如果以<br>斷行取代項目條例或是使用<div>取代標記將會導致內容無法結構化, 在不支援css的平台上容易造成閱讀困難, 例如文字閱讀器. 結構化文件範例如下:

<h1>建立結構化標記</h1>

<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>

<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>

沒有css情況下, 以結構化標記製作的網頁螢幕顯示為:

建立結構化標記

結構

Html項目
　　Html 說明文字, html標記應用缺點
Xhtml項目
　　Xhtml 說明文字, xhtml標記應用優點

格式

以css取代老式的html表格配置, .......

上述方式可以很容易讀出那一句是標題, 那一句是項目條列, 那一句是段落. 相對的, 沒有css情況下, 不結構化的網頁就無法讀出文件格式, 螢幕顯示可能為

建立結構化標記

結構

Html項目Html
說明文字, html標記應用缺點

Xhtml項目Xhtml
說明文字, xhtml標記應用優點

格式
以css取代老式的html表格配置, .......

3. 建立結構與格式各自獨立的css

以css取代html的表格配置, 開發人員可以隨意變更xhtml而不用擔心破壞版面配置, 在建立不同平台的css時也會比較容易轉換. 比較簡潔的寫法是儘量避免為標記加上class, 例如 <h1 class="head">, <h2 class="sub_head">, <dt class="data">, <p class="text1">...... 尤其要避免將slye寫在標記裡面, 例如 <h1 style=" background:background-......">, 這種方式比較浪費客戶端的頻寬

參考範例如下:

<div id="content">

<h1>建立結構化標記</h1>

<div class="news1">
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
</div>

<div class="news2">
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
</div>

</div>

css寫法為:
#content {........}

h1 {........}
h2 {........}

.news1 {........}
.news1 dl {........}
.news1 dt {........}
.news1 dd {........}
.news1 dd a {........}
.news1 dd a hover {........}

.news2 {........}
.news2 p {........}
.news2 p a {........}
.news2 p a:hover {........}

運用上述方式編寫網頁, 將來需開始支援其他平台時, 應該可以避免很多資料轉換這種疲累的狀況了

YouGov報告: 網頁設計不良損害健康

2007-02-28T15:05:00.000+08:00

以下是國外ㄧ篇很有趣的調查報告, 做網頁的人要有良心啊!

原文刊載於: Poor website design may have negative effects on users' nervous system
http://www.publictechnology.net/modules.php?op=modload&name=News&file=article&sid=7223

以前有消息說，如果你擁有一個大螢幕顯示器，卻使用較低的解析度（800*600或更低），可能會讓你患上腦瘤。現在最近的一份報告表明，長期流覽設計不良的網頁也會損害你的健康。

這份報告綜合了YouGov對2500位使用者的調查，這些人被要求在不同的網站尋找需要的資訊，然後檢測他們的物理和生理反應，例如腦波、心率、肌肉緊張程度和皮膚傳導現象。檢測結果表明，設計不良的網頁會導致壓力和精神暴躁等，並可能導致“滑鼠狂躁綜合症”。

最讓人鬱悶的原因前五名分別是“慢”、“導航混亂”、“彈出窗口過多”、“不必要的廣告”和“打不開”。大家的期望是希望所有的網頁都能高速、功能全面和準確，就像Google那樣。

“滑鼠狂躁綜合症”的初期症狀包括心率加快、出汗、亂點滑鼠、詛咒系統、摔打滑鼠等。各位想一下，平時是不是會有這樣的情況呢？如果經常發生，那你就要注意平和一下自己的心態了。

在頁面上更換css style

2007-02-28T14:30:00.000+08:00

原文刊載於 http://www.alistapart.com/stories/alternate/

做法如下:

步驟1. -->
自上述網址下載 styleswitcher.js 檔案放入目錄資料夾, 並在<head>加上
<script type="text/javascript" src="styleswitcher.js"></script>

步驟2. -->
將欲加入的css style 依次列進<head>
第一行stylesheet 為預設的style, 其他alternate stylesheet 為選項style, 然後自定title 名稱(如以下藍字)

<link rel="stylesheet" type="text/css" href="css/index01.css" title="green"><link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow"><link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">

步驟3. -->
內容html選項的寫法如下, 以下的紅字部分需逐一對應步驟2的藍字才能趨動所命名的style

<p> 更換頁面風格 : 【 <a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">綠色</a> 】
【 <a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a> 】
【 <a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a> 】 </p>

雖然有預設的style, 但因為js檔中有 Cookie 寫法, 下次再開啟時會以上次最後設定的style為style

各瀏覽器最新版本下載網址

2007-02-28T13:51:00.000+08:00

Firefox 2
http://www.mozilla.com/en-US/firefox/

Opera 9
http://www.opera.com/

Netscape 8
http://browser.netscape.com/ns8/

IE 7 (for XP)
http://www.microsoft.com/taiwan/windows/ie/default.mspx

使用者介面設計權威 - Jakob Nielsen

2007-02-28T13:38:00.000+08:00

Jakob Nielsen 是網站使用者介面設計的權威, useit com中有很多他的文章和書籍介紹
useit.com: Jakob Nielsen's Website:
http://www.useit.com/alertbox/
Taiwan.CNET:
http://taiwan.cnet.com/builder/authoring/story/0,2000020511,20009862-5,00.htm

Jakob的研究採用所謂 "使用者測試(Usibility Testing)"
就是找幾個目標使用者(通常是6~7個就夠了)做些任務型測試.
例如到網站中找一筆資料, 然後仔細觀察紀錄這些人花多少時間完成任務?
中間曾遇到哪些問題? 需要提供什麼提示? 如果找不到又是為什麼?
最後再歸結出問題點做改善.

他根據多次測試歸納出所謂"好用的網站"應該遵循的設計原則(和無障礙設計有些區別),
當然也指出了一些誤導的或不好用的設計, 他說使用者平均只花1分49秒逛一個站, 雖然有點驚訝, 但是想想自己, 似乎就是這麼回事.

網頁設計不是只有漂亮而已, 客戶花一筆錢做網頁更重要的是可以達到的功能和目的為何? 或說希望向他們的目標使用者傳遞什麼訊息或留下什麼印象, Jakob的文章和書籍絕對值得網頁設計人員研讀

Adobe Max 2006 課程範例 -- 如何以Spry與Dreamweaver開發AJAX

2007-02-28T11:05:00.000+08:00

Adobe Max 2006 有一堂課 "如何以Spry與Dreamweaver開發AJAX" 的範例介紹, 可到以下網址直接看範例效果或下載完整範例

Spry Demos:
http://labs.adobe.com/technologies/spry/demos/

下載完整範例後解壓縮, 可以在demo/index.htm看到範例首頁, sample/index.htm 是關於資料排序的範例檔案, Articles/ 是這所有套件的英文說明文件(用IE7的人如果無法看到正常畫面的話可以改用其他瀏覽器), 雖說是專為設計人員寫的, 但是要懂這些script也不是那麼容易

Spry是Adobe為設計人員開發的JavaScript library(open source), 以html為主再結合 css 和JavaScript的Ajax, 這個套件還在開發當中.

這樣的效果在關閉JavaScript時無法顯示, 並不適用於必須符合無障礙規範的網站但是其他不用考慮無障礙規範的網站能運用這種效果應該可以為網站設計加好幾顆星!