Ian 懶惰蟲筆記

Google Task 工作表 - 待辦事項管理服務

2011-07-09T22:16:00.006+08:00

以前曾介紹過『Remember The Milk』線上待辦事項管理工具，用來提醒你記得要去買牛奶。Gmail 裡的工作表『Google Task』擁有同樣的功能，只是比較陽春了點，關於待辦事項管理工具的精神與應用可參考『Remember The Milk - 線上待辦事項管理服務』。不過我後來還是改用『Google Task』，主要原因是它與 Gmail 及 Google 日曆整合在一起，對於我這個 Google 服務的高度使用者來說非常重要，而且已經夠我使用。唯一可惜的是 Google 官方並未幫『Google Task』開發智慧型手機 Android App，但還是有替代方法︰

一、使用另一個 Android App『Astrid 工作』，它可與『Google Task』同步，讓你直接透過手機管理『Google Task』上的待辦事項。

二、利用智慧型手機上的瀏覽器，瀏覽『Android 版』或是『iPhone 版』的頁面來使用。

最後特別介紹一個在智慧型手機上很有創意且簡潔易用的待辦事項管理工具『Do it (Tomorrow)』，如果你不想用『Remember The Milk』或『Google Task』這麼麻煩的工具可以選擇它。這個 App 只有『兩頁』，第一頁讓你記錄今天（Today）要完成的工作，翻到第二頁讓你拖延今天本應該完成的任務，或是預排明天（Tomorrow）將要完成的工作。就只有兩頁，『Do it (Tomorrow)』的用意在於練習『今日事，今日畢』。是要求自己去完成今天應該完成的任務，就只針對『今天』，而『明天』是緩衝也是拖延！在不斷輪替的今天、明天中，兩頁清單會變成惡性循環的夢靨？還是能夠健康優雅的消化著？

總之就是，『記下它 >> 去做它 >> 完成它』。現在，我又完成一件事情了『在 Blog 分享 - Google Task 應用與服務』，來去按下『打勾』完成。

相關閱讀︰
．Remember The Milk - 線上待辦事項管理服務
．使用 Google 工作表 - Gmail說明
．Gmail 新增功能完整的 Tasks 工作表，幫你簡單打點生活大小事 | 電腦玩物
．如何利用Gmail Tasks工作表規劃郵件分工處理流程？心得分享 | 電腦玩物
．Astrid - Android’s Simple Task Recording Dashboard
．Do it (Tomorrow) 兩頁的待辦事項筆記本，今天做？拖明天？ | 電腦玩物

兩腳四腳六腳行｜紀錄台灣｜中天電視-CtiTV.com

2011-07-09T17:55:00.004+08:00

一個生命的誕生，有時候是為了拯救另一個生命，是為了希望與愛，導盲犬陪著主人用六隻腳走一條路，兩腳四腳六腳行，一切就不孤單了！

● 遇見可魯！盲人的閃亮小天使

您還記得多年前，賺人熱淚的日本導盲犬電影「再見可魯」嗎？當年可魯可愛的模樣，不但創下票房佳績，更觀眾們在電影院裡哭得一把鼻涕一把眼淚。但出了電影院，大家都忘了可魯不是一隻貼心的「寵物狗」，牠是專業的「導盲犬」。牠是協助盲人朋友日常行進與生活安全的「工作犬」。即便如此，還是有盲人在帶著導盲犬進出公眾場所時遇到障礙：最常見的，就是被餐廳拒絕。

● 〈遇見，可魯〉充滿愛的相遇

上個星期「兩腳四腳六腳行」，我們說到了北海道的Chiko媽媽，去看很久不見的小狗Bella，事隔半年多，你猜猜看牠還記不記得牠的主人啊？有觀眾就問我們說「導盲犬是怎麼導盲的呢」，在這個星期的節目，我們要好好地為您解答這些問題。

● 牠是靈魂之「窗」　導盲犬日記

這一集「兩腳四腳六腳行」，我們要看專業導盲犬Hope如何在吵雜繁忙的捷運站裡，能夠辨認出盲人東發的聲音，還要聽懂東發的指令。

● 小小可魯誕生　導盲犬生力軍

話說上個星期狗媽媽Wendy懷孕了，這個星期，Wendy要生了，我們要帶您看小小導盲犬是怎麼出生的。還有，兩隻日本小黑拉拉被送來台灣，展開寄養家庭的生活。牠們怎麼習慣台灣的生活呢？一起來看看。

● 導盲犬日記　「走在身邊的天使」

真人連續劇「兩腳四腳六腳行」已經進入第五集。希望在這幾個星期以來，您一直跟著我們的鏡頭，對導盲犬有了更多的認識。話說上個星期狗媽媽Wendy順利生產之後，這星期小小導盲犬們的成長表現更令人驚訝。

● 導盲犬消暑去　「狗爬式」玩水

又到了「兩腳四腳六腳行」的時間。天氣很熱，如果你家有養狗，就知道牠們真的是熱壞了。導盲犬在高溫下工作，也是會中暑的。所以有時候導盲犬協會，會帶狗狗去游泳散熱。但真實的情況是：不是每隻狗都會游泳，有的狗還會怕水。這時候該怎麼瓣呢？另外，這個星期有一隻退休的老導盲犬，開始了幸福的退休生活。到底有多幸福呢？

● 導盲犬寄養家庭　培育「陪伴天使」

「兩腳四腳六腳行」故事已經進行到第七集，很感謝這七個星期來，一直跟著我們關心導盲犬的朋友們，讓我們跟著導盲犬一起長大，一起學習。這個星期，我們要來看看備受日本歐巴桑chiko太太疼愛的小狗Bella，在台灣的長大之後，到底有沒有辜負日本媽媽的期望，牠有沒有成為一隻優秀的導盲犬的條件呢？

● 魔鬼訓練結束　導盲犬畢業典禮

紀錄台灣從五月底推出的「兩腳四腳六腳行」真人實境連續劇，本週將是最後一集。有很多人問我們，導盲犬雖然有退休年限，但是一生都在工作，那會不會耽誤她們的終身大事呢？其實工作導盲犬都必須結紮，才能夠跟主人合作無間。過去這幾週，我們紀錄了導盲犬的出生、在寄養家庭的訓練、以及倍受寵愛的退休生活，她們一生都在呵護中長大，盲人朋友東發和淑君甚至希望，能夠陪他們的狗狗，走到最後一刻。人類與狗狗之間的愛，是一種一生一世的，堅定的承諾與信任。

以上內容轉載至『中天紀錄台灣』，相關版權為『中天紀錄台灣』所有。

IE6 請你安息吧...

2011-04-21T22:25:00.006+08:00

其實我內心真正的 OS 是，去死吧 IE6....

IE6 算是有史以來存活最有的瀏覽器版本有如蟑螂，不少網頁設計師都非常痛恨 IE6，包括我。很多大型網站的服務也早就開始漸漸不再支援 IE6，現在連微軟也自己做了一個 The Internet Explorer 6 Countdown 的網站來幫 IE6 倒數，希望使用者們可以下載新的 IE9，別再使用 IE6 了。

由於 Win XP 內建的就是 IE6 的關係，有不少人的電腦中還是在使用 IE6。根據網站的統計，截至目前為止全世界還有 11.6% 的瀏覽器是 IE6，台灣也佔了 8.79%，中國為最多數佔了 33.8%，而歐美國家 IE6 的使用率都在 5% 以下。

IE6 早已過於老舊，對很多新的網頁技術幾乎都無法支援，最該換掉 IE6 的原因是，它有嚴重的安全性的漏洞，是所有駭客的最愛。如果你的作業系統還是 Win XP，也還在使用內建的 IE6，請您把它移除，去下載 IE9 來使用。除了微軟的 IE 以外，其實您還有很多非常好的選擇 Chrome、Firefox、Safari、Opera。當您這麼做之後，將會發現原來瀏覽網頁是可以這麼愉快的。

更呼籲所有想要架設網站的企業老闆們，請別再向貴公司的網頁設計或者是外包廠商，提出『網站要能支援 IE6』這麼無知且無禮的要求，我們會非常謝謝您的！！

相關閱讀︰
．ZDNet Taiwan - 微軟力促IE 6用戶升級
．ZDNet Taiwan - 趕快停用IE 6吧
．ZDNet Taiwan - 芬蘭政府呼籲停用IE 6
．ZDNet Taiwan - 法、德政府警告民眾勿用IE
．udn數位資訊 - 與IE6絕交：Facebook(的聊天室功能)
．udn數位資訊 - 「駭」怕 Google宣布逐步減少支援IE6瀏覽器
．iThome online - 設計公司幫IE6舉行葬禮

高雄觀光產業論壇 -- 亞都麗緻總裁『嚴長壽』

2011-04-21T02:49:00.006+08:00

『嚴長壽』亞都麗緻飯店的總裁，也是著名的勵志作家，長年不遺餘力從事台灣觀光產業的推廣，這是他出席「高雄觀光產業論壇」所做的演講，談台灣觀光產業未來發展的契機。

後山獅子心｜紀錄台灣｜中天電視-CtiTV.com

2011-04-21T02:09:00.006+08:00

● 後山獅子心 part1

很多去過的人都說，台東好山好水。根據一項居住調查，台東是全台灣最適合居住的第八名而已。交通不便、人口外移，造成台東低度開發，不過也讓台東成為台灣最後一塊淨土，台灣的觀光教父嚴長壽，特別喜歡台東，這位全台灣身價最高的導遊，帶給大家台東，好吃、好玩、好故事，嚴長壽甚至帶著大家，躺在馬路上。

● 後山獅子心 part2

盡管不是每個「新台東人」都贊成嚴長壽的看法，但他們有個共同的目標，就是要想盡辦法，讓台東變得更美更好。嚴長壽說，台東沒有什麼名山大圳，卻多的是人生的「自在」，他在台東找到了人生下半場的起點，很多人跟嚴長壽一樣，把「台東」當成了再出發的起點。來看看這些留在台東，認真的把驛站當作新家，把自己變成「新台東人」，經營出非常奇特有趣的「後山生活」。

● 後山獅子心 part3

嚴長壽把幾十年的人脈，全部貢獻給了台東。雲門的創辦人林懷民、作家龍應台、陶傳正，都是「希望學堂」的志工。朱宗慶打擊樂團的何鴻棋，最近三天兩頭就往台東跑，他帶著一群原住民的小朋友打鼓，這群孩子根本沒學過五線譜，大師必須結合樂理，原住民傳唱的歌謠，才能抓住原住民的節奏，要幫這群後山的的孩子脫貧，這群隔代教養的孩子，走出生活劣勢。希望學堂，可能就是他們的希望…

● 後山獅子心 part4

「總裁獅子心」這本書，描寫的是他從外商小弟成為飯店總裁的過程，激勵了很多人。而他的這本新書「你可以不一樣」，嚴長壽想說的是，一個人不必很有錢、不必有很高的學歷，一樣可以為台灣的社會奉獻心力。

以上內容轉載至『中天紀錄台灣』，相關版權為『中天紀錄台灣』所有。

大我雲端市集

2011-04-19T05:00:00.003+08:00

《大我文創》的種種影像作品只是起點，不是終點。
它僅僅是一種媒介，旨在連結更多朋友，
以自己力所能及的方式來共同參與、共同推動一場互助運動。
《雲端市集》即是落實互助運動的平台。
《大我》將以志工身份連結各地基層人民的自助、互助組織，
協助這些組織以委員會的形式推動經驗交流、產品交流，
《大我》不涉入任何金流物流，也不收取任何中間費用，
主要提供他們的生產資訊予消費大眾，
為生產者與消費者搭起一個直接交流與交易的平台。
《大我雲端市集》是個長程的永續工程，正在建構當中，
你，也可以成為大我，成為互助運動的參與者、雲端市集的建構者！

．大我雲端市集

以上內容轉載至『大我文創』，相關版權為『大我文創』所有。

紀錄長片《相助之路》- 大我文創

2011-04-19T04:52:00.006+08:00

歴史真相，往往遭人隱瞞或遭人湮埋。
它有時是自覺的，有時是不自覺的。
歴史事件的當事者，偶爾會以自身的行動來對抗遺忘。
他們或以文字，或以照片，或以圖畫，
或以人們難以想像的各種方式，為歴史留下証據。
因而，歴史真相得以留存在某些物件當中。
2009年台灣的八八風災，
迄今才一年多，卻已遭人們逐漸淡忘，但災民自己不曾遺忘，
迄今仍不懈奮鬥，通過自助互助，謀求重生與重建。
同樣地，八八風災與2008年四川五一二大地震，
兩岸人民對彼此的支援、互助，
迄今已遭台灣淡忘，但災民自己卻拒絕遺忘。
《相助之路》長片，即是一個影像的物件，
把兩岸災民拒絕遺忘、對抗遺忘的行動紀錄下來，
因而，影像的物件本身，也是一場對抗遺忘的行動。
《相助之路》片長60分鐘，分為六段，每周一播出，
就請所有的朋友一起來加入這場行動，
這場對抗遺忘的行動！

．紀錄長片《相助之路》首映！相助之路，也是對抗遺忘之路
．紀錄長片《相助之路》PART2！相助之路，也是對抗遺忘之路
．紀錄長片《相助之路》PART3！相助之路，也是對抗遺忘之路
．紀錄長片《相助之路》PART4！相助之路，也是對抗遺忘之路
．紀錄長片《相助之路》PART5！相助之路，也是對抗遺忘之路
．紀錄長片《相助之路》PART6！相助之路，也是對抗遺忘之路

以上內容轉載至『大我文創』，相關版權為『大我文創』所有。

Google Maps API - 自定地圖類型

2009-11-26T17:09:00.005+08:00

之前在『新增地圖控制項、地圖類型』一篇中已介紹過關於地圖類型的設定，以及可以使用的地圖類型（G_NORMAL_MAP 地圖、G_SATELLITE_MAP 衛星、G_HYBRID_MAP 混合、G_PHYSICAL_MAP 地形）。在 Google Maps API 也可以定義自己的地圖類型，並開發全新的顯示樣式。

可以透過 GTileLayer 建構圖塊疊加層， GMapType 建構新的地圖類型，並使用 GMap2.addMapType() 方法將其添加到地圖。

//設定版權訊息 var myCopyright = new GCopyrightCollection("Lazy Worm's Island "); myCopyright.addCopyright(new GCopyright('Ian Jung', new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0,'©2009 Ian Jung')); //建構圖塊疊加層 var myTileLayer = new GTileLayer(myCopyright, 0, 2, { tileUrlTemplate: 'ij-map-{Z}-{X}-{Y}.png', isPng:true, opacity:1.0 }); //建構新的地圖類型 var IJ_LAZYWORM_ISLAND_MAP = new GMapType([myTileLayer], new GMercatorProjection(23), "Island", { shortName: "IJ_Island", alt: "顯示 Lazy Worm's Island" }); var myMap = new GMap2(document.getElementById("my_map")); myMap.setCenter(new GLatLng(0, 0), 1); myMap.getMapTypes().length = 0; myMap.addMapType( G_NORMAL_MAP ); myMap.addMapType( IJ_LAZYWORM_ISLAND_MAP ); myMap.setMapType( IJ_LAZYWORM_ISLAND_MAP ); myMap.addControl(new GLargeMapControl()); myMap.addControl(new GMapTypeControl());

看範例所呈現的結果

1. 設定版權訊息

地圖通常包含從一些外部機構購買、生成或許可的圖片。這些圖片通常需要顯示版權訊息，在某些情況下（例如衛星數據），地圖上不同位置的圖片可能來自不同的來源。為了在自定地圖類型上顯示動態版權訊息，Google Maps API 提供了大量對象來存放版權訊息，並提供了基於當前視窗和縮放級別對此版權訊息實現檢索的方法和接口。

GCopyrightCollection(prefix?:String)︰管理自定義地圖類型的地圖上顯示的版權訊息。
GCopyright(id:Number, bounds:GLatLngBounds, minZoom:Number, text:String)︰版權對象包含以下訊息：哪個版權訊息適用於指定縮放級別的矩形地圖地區。

設定版權訊息詳細說明

2. 建構地圖圖塊層

GTileLayer(copyrights:GCopyrightCollection, minResolution:Number, maxResolution:Number, options?:GTileLayerOptions)︰您可以實現此接口，以透過 GMapType 或 GTileLayerOverlay 提供自定的地圖圖塊層。此接口的實現應使用 GTileLayer 實例作為原型，因為這樣可以為您實現版權處理。

在 GTileLayerOptions 物件中的的 tileUrlTemplate 屬性，是指定圖塊網址模板，該模板可以針對每個圖塊請求而展開，以根據現有的圖塊坐標引用唯一的圖塊。將模板置於 GTileLayer 構造函數中可允許您使用此坐標系動態檢索圖塊，檢索方式類似於 Google 地圖檢索圖塊的方式。模板的格式應該為︰
http://host/ij-map-{Z}-{X}-{Y}.png
，其中 X 和 Y 分別指緯度和經度圖塊坐標，Z 指縮放級別，比如 http://host/ij-map-2-3-1.png。

圖塊坐標

Google 地圖坐標，圖塊製作詳細說明

3. 建構新的地圖類型

GMapType(layers:GTileLayer[], projection:GProjection, name:String, opts?:GMapTypeOptions)︰實現自己的自定地圖類型。要在地圖中顯示地圖類型，請使用 GMap2.addMapType() 方法。

參考︰
‧class GCopyrightCollection
‧class GCopyright
‧class GTileLayer
‧GTileLayerOptions
‧class GMapType
‧GMapTypeOptions

更多教學文件在此︰Google Maps API - 前言及目錄

Remember The Milk - 線上待辦事項管理服務

2009-08-24T03:15:00.005+08:00

Remember The Milk（記得牛奶），是一套介面簡潔、功能強大的線上待辦事項管理工具。主要紀錄重點是工作事項、到期日及完成與否，目的在提醒我們下一步要做什麼或是準備要做什麼，例如︰記得要去買牛奶。

以往我都是利用『Google 日曆』來記錄這些事情，但是總覺得有點怪，因為這些待辦事項通常都不需要很明確的開始或結束時間，甚至不需要是個連續時間區間。例如，在月底前要將房間整理乾淨，這件事情並沒有所謂的開始時間，在任何有空的時間都可以開始去做，也可以利用很多片段的時間來做，只要記得在月底前完成。或者例如，記得要去買牛奶，這件事情沒有所謂的時間，任何時間做都可以，就是記得要去買，沒有去買其實也沒關係，只是沒得喝。像這類事情用行事曆來記錄除了奇怪也沒有必要，Remember The Milk 就是以這樣的概念產生的。

那麼該如何區分什麼事情要記在『行事曆』，什麼事情要記在『待辦事項清單』呢？以我的使用經驗是，有很明確的開始及結束時間區間的約會行程就記在行事曆裡，例如︰與朋友的約會、工作會議、回南部或是出遊等。剩下沒有明確的時間區間或是只有到期日的工作事項就記在待辦事項清單裡。

Remember The Milk 除了可以紀錄工作事項、到期日及完成與否，還可利用『清單』組織不同任務，利用『標籤』與『地點』做分類查詢，利用『優先順序』區分重要程度。再利用簡單的『完成』與『延期』操作按鈕，彈性的管理自己要做的事，工作完成時就按下完成，工作必須延期時就延期，系統會記下你的拖延次數。你可以很快速的看到自己『今天』、『明天』和『逾期』的工作清單。並且可製作『智慧清單』，是依據搜尋條件所建立，在工作項目有異動時，會自動更新。操作上強調直覺和快速，聚焦在於工作處理本身。

Remember The Milk 還製作了『iGoogle 首頁小工具』，習慣將 iGoogle 作為首頁的我就相當方便。只要開啟 iGoogle 首頁就可以在同個頁面上，利用 Gmail 讀取信件、Google 日曆查看行程、Google 閱讀器閱讀文章，現在還可以直接查閱 Remember The Milk 上的待辦事項清單。

總之就是，記下它 >> 去做它 >> 完成它。現在，我又完成一件事情了『在 Blog 寫篇 Remember The Milk 的介紹』，來去按下『完成』鈕。

相關閱讀︰
電腦玩物 - Remember The Milk 線上待辦事項管理服務，隨時記住下一步行動（心得篇）

網頁畫面擷取工具

2009-08-17T15:44:00.007+08:00

每回需要擷取某網頁整頁畫面時，都需要大費周章的按『PrtSc SysRq』鍵將畫面一段一段擷取下來，然後再貼到影像處理軟體（如︰Photoshop）來做拼接，實在是很麻煩，以下介紹三種簡單好用的工具。

。Super Screenshot! - 線上網頁畫面擷取

Super Screenshot! 提供了線上網頁畫面擷取服務，不需要安裝任何軟體，只要將你想要擷取畫面的網址填入，接著按下『go』的按鈕，過沒多久該網頁的畫面就會被擷取下來。然後按下右下方的『View Screenshot』的按鈕，就可打開整張圖片，在圖片上按滑鼠右鍵選擇另存新檔即可。擷取的大小可以選擇完整大小、大、中、小、超小，檔案格式也可以選擇 JPEG 或者 PNG。

。ScreenGrab - FireFox 擴充套件

ScreenGrab 是一套擷取網頁畫面的 FireFox 擴充套件。安裝 ScreenGrab 以後，當你開啟任何網頁，只要按下滑鼠右鍵，就會出現 ScreenGrab 的選單。當中分為 Save 和 Copy，其中 Save 就是直接存成 png、jpg 檔，或是按下 Copy 複製到剪貼簿裡然後到小畫家等繪圖軟體進行編輯。

其中分為三個細項︰

1. Complete Page/Frame︰把網頁全部 Save or Copy 起來，不管畫面是不是超過螢幕。

2. Visible portion︰把網頁畫面能看到的部分 Save or Copy 起來，超過螢幕的部分就不管了。

3. Selection︰選取想要 Save or Copy 的部分。

4. Window︰把網頁畫面能看到的部分及 FireFox 視窗全部 Save or Copy 起來。

。SiteShoter - 網頁畫面擷取小軟體

SiteShoter 這套專門抓網頁的小軟體，可自動呼叫 IE 瀏覽器（背景執行）擷取指定網站的畫面，還有詳細的設定項目，如自動捲動抓圖能抓取超過一個畫面的網站、裁切網頁、停用 Javascript 跟 Flash 等。此外，SiteShoter 更可以使用命令列模式，配合排程軟體，幫你定時擷取網頁的內容。

安裝方式︰下載 siteshoter.zip，解壓縮後即可執行。如要中文界面，可下載中文語系檔 siteshoter_taiwanese.zip，解壓縮後的 SiteShoter_lng.ini 檔放在同一資料夾下即可。

阿榮福利味 AZO Freeware - 優質免費軟體/可攜式軟體收集 Blog

2009-07-05T18:26:00.003+08:00

每當我們需要一些工具軟體，怎麼找都是需要付費的。雖說使用者付費，但是一般個人用戶那有那麼多錢去買那些軟體。如果去找破解版，基本上除了不尊重著作權以外，也都是非法使用。

現在不同了，有很多以往需要付費的工具軟體，都有其他免費軟體可以替代，這可要感謝那些心地善良程式開發者。

在這介紹一個很棒的 Blog『阿榮福利味』，裡面介紹了很多好用的工具軟體。所介紹的軟體都是免費的，更多是免安裝可攜式的綠色版。而且格主很用心，除了常常更新最新資訊也提供最新版本的下載點。

阿榮福利味
AZO Freeware - 優質免費軟體/可攜式軟體．提倡軟體自由．中文用戶取向

利用 MySQL 指令將資料庫匯出及匯入

2009-07-05T13:47:00.006+08:00

我們曾經在『Windows 的 MySQL 資料庫熱備份 / 使用 BigDump 匯入大於 2MB 以上的 .sql』這篇文中介紹過，在 Windows 環境下是如何處理的。

其實 MySQL 本身就有兩個很好用的指令，不論在 Windows 或是 Linux 的環境下，都可以很順利的將某個資料庫內容作匯出及匯入。以下範例假設 MySQL 資料庫的帳號為 root，密碼為 123，要處理的資料庫為 phpbb。

‧資料匯出 mysqldump

/mysql/bin/mysqldump --opt -uroot -p123 phpbb > phpbb_backup.sql

‧資料匯入 mysql

/mysql/bin/mysql -uroot -p123 phpbb < phpbb_backup.sql

我目前測試過最大的資料庫為 500MB，匯出及匯入都沒有什麼問題。

心智圖 Mind Map

2009-05-14T10:41:00.002+08:00

心智圖，又稱腦圖、思維導圖、靈感觸發圖、概念地圖或思維地圖，是一種圖像式思維的工具與及一種利用圖像式思考輔助工具來表達思維的工具。

心智圖是由英國的托尼•博贊（托尼·布詹）於 1970 年代提出的一種輔助思考工具。心智圖通過在平面上的一個主題出發畫出相關聯的對象，像一個心臟及其周邊的血管圖，故稱為「心智圖」。由於這種表現方式和人思考時的空間想像比單純的文本更加接近，已經越來越為大家用於創造性思維過程中。

早期心智圖都是手繪的，現在當然有許多心智圖軟體可以使用，專業軟體如 Mindje Mind Manager 與 NovaMind，功能都非常強大好用，但是對個人使用者來說他們的價格並不便宜。所以，這裡介紹兩款免費好用的心智圖軟體。

。MindMeister

MindMeister 是使用 Ajax 技術所開發的線上使用工具。不需要安裝任何軟體，只要註冊一個帳號，或是透過 OpenID 的機制就可以立即使用。而且支援多種格式檔案輸出 MindManager（.mmap）、FreeMind格式（.mm）、RTF、PDF、圖檔。

。XMind

XMind 是 Open Source 心智圖軟體，介面比 FreeMind 漂亮很多，支援 MindManager（.mmap）、FreeMind格式（.mm）格式，除了心智圖外，還可以畫魚骨圖、組織圖、邏輯圖。重點是它有繁體中文版，不需要看教學就能輕鬆上手。

Google Maps API - 標註管理器

2009-05-09T23:30:00.004+08:00

在 Google Maps 添加大量標註可能會降低顯示地圖的速度，也會產生太多視覺混亂，尤其是在處於某些縮放級別時。標註管理器 GMarkerManager 提供了一個解決這些問題的方案，允許在同一個地圖上高效顯示數百個標記，並能夠在不同的縮放級別指定所要顯示的標註。

下面這個範例我們創建了台灣縣市的鄉鎮市區行政區位置標註地圖。在縮放級別 7 到 10，僅顯示縣市。然後對於縮放級別 11 到 14，將所有鄉鎮市區顯示出來。

看範例所呈現的結果

var myMgr = new GMarkerManager(myMap); 建立一個標註管理器物件，其中 myMap 就是要控制的指定地圖。

GMarkerManager.addMarkers(markers, minZoom, maxZoom?) 向此標記管理器添加一批標註。直到調用 refresh() 方法時，才會向地圖添加這批標註。將標註置於地圖中後，如果這些標註都在地圖的當前視窗範圍內並且地圖的縮放級別高於或等於指定的 minZoom，則顯示標註。如果設定了 maxZoom，則在地圖的縮放級別高於或等於指定級別時自動刪除標註。

GMarkerManager.refresh(); 強制管理器更新地圖上顯示的標註。如果是使用 addMarkers 方法添加的標註，則必須調用此方法。

GMarkerManager.addMarker(marker, minZoom, maxZoom?) 向此管理器控制的標記集合添加單個標註。如果標註的位置在地圖的當前視窗範圍內，並且地圖的縮放級別屬於指定的縮放級別範圍，則立即向地圖添加標註。與 addMarkers 方法類似，minZoom 和可選的 maxZoom 參數指定顯示標註的縮放級別範圍。

參考︰
‧class GMarkerManager︰addMarkers(markers, minZoom, maxZoom?)、refresh()、GMarkerManager.addMarker(marker, minZoom, maxZoom?)

更多教學文件在此︰Google Maps API - 前言及目錄

Access To MySQL - 將 Access 轉 MySQL 工具

2009-03-27T11:45:00.001+08:00

Access To MySQL 是一個 Microsoft Access 資料庫轉換到 MySQL 的小工具，可以直接將資料匯入至 MySQL 資料庫，或者建立 SQL 檔案，最重要它是免費軟件。

Access To MySQL

Content Type 大全

2009-03-27T11:26:00.000+08:00

.* = application/octet-stream
.001 = application/x-001
.301 = application/x-301
.323 = text/h323
.906 = application/x-906
.907 = drawing/907
.a11 = application/x-a11
.acp = audio/x-mei-aac
.ai = application/postscript
.aif = audio/aiff
.aifc = audio/aiff
.aiff = audio/aiff
.anv = application/x-anv
.asa = text/asa
.asf = video/x-ms-asf
.asp = text/asp
.asx = video/x-ms-asf
.au = audio/basic
.avi = video/avi
.awf = application/vnd.adobe.workflow
.biz = text/xml
.bmp = application/x-bmp
.bot = application/x-bot
.c4t = application/x-c4t
.c90 = application/x-c90
.cal = application/x-cals
.cat = application/vnd.ms-pki.seccat
.cdf = application/x-netcdf
.cdr = application/x-cdr
.cel = application/x-cel
.cer = application/x-x509-ca-cert
.cg4 = application/x-g4
.cgm = application/x-cgm
.cit = application/x-cit
.class = java/*
.cml = text/xml
.cmp = application/x-cmp
.cmx = application/x-cmx
.cot = application/x-cot
.crl = application/pkix-crl
.crt = application/x-x509-ca-cert
.csi = application/x-csi
.css = text/css
.cut = application/x-cut
.dbf = application/x-dbf
.dbm = application/x-dbm
.dbx = application/x-dbx
.dcd = text/xml
.dcx = application/x-dcx
.der = application/x-x509-ca-cert
.dgn = application/x-dgn
.dib = application/x-dib
.dll = application/x-msdownload
.doc = application/msword
.dot = application/msword
.drw = application/x-drw
.dtd = text/xml
.dwf = Model/vnd.dwf
.dwf = application/x-dwf
.dwg = application/x-dwg
.dxb = application/x-dxb
.dxf = application/x-dxf
.edn = application/vnd.adobe.edn
.emf = application/x-emf
.eml = message/rfc822
.ent = text/xml
.epi = application/x-epi
.eps = application/x-ps
.eps = application/postscript
.etd = application/x-ebx
.exe = application/x-msdownload
.fax = image/fax
.fdf = application/vnd.fdf
.fif = application/fractals
.fo = text/xml
.frm = application/x-frm
.g4 = application/x-g4
.gbr = application/x-gbr
.gcd = application/x-gcd
.gif = image/gif
.gl2 = application/x-gl2
.gp4 = application/x-gp4
.hgl = application/x-hgl
.hmr = application/x-hmr
.hpg = application/x-hpgl
.hpl = application/x-hpl
.hqx = application/mac-binhex40
.hrf = application/x-hrf
.hta = application/hta
.htc = text/x-component
.htm = text/html
.html = text/html
.htt = text/webviewhtml
.htx = text/html
.icb = application/x-icb
.ico = image/x-icon
.ico = application/x-ico
.iff = application/x-iff
.ig4 = application/x-g4
.igs = application/x-igs
.iii = application/x-iphone
.img = application/x-img
.ins = application/x-internet-signup
.isp = application/x-internet-signup
.IVF = video/x-ivf
.java = java/*
.jfif = image/jpeg
.jpe = image/jpeg
.jpe = application/x-jpe
.jpeg = image/jpeg
.jpg = image/jpeg
.jpg = application/x-jpg
.js = application/x-javascript
.jsp = text/html
.la1 = audio/x-liquid-file
.lar = application/x-laplayer-reg
.latex = application/x-latex
.lavs = audio/x-liquid-secure
.lbm = application/x-lbm
.lmsff = audio/x-la-lms
.ls = application/x-javascript
.ltr = application/x-ltr
.m1v = video/x-mpeg
.m2v = video/x-mpeg
.m3u = audio/mpegurl
.m4e = video/mpeg4
.mac = application/x-mac
.man = application/x-troff-man
.math = text/xml
.mdb = application/msaccess
.mdb = application/x-mdb
.mfp = application/x-shockwave-flash
.mht = message/rfc822
.mhtml = message/rfc822
.mi = application/x-mi
.mid = audio/mid
.midi = audio/mid
.mil = application/x-mil
.mml = text/xml
.mnd = audio/x-musicnet-download
.mns = audio/x-musicnet-stream
.mocha = application/x-javascript
.movie = video/x-sgi-movie
.mp1 = audio/mp1
.mp2 = audio/mp2
.mp2v = video/mpeg
.mp3 = audio/mp3
.mp4 = video/mpeg4
.mpa = video/x-mpg
.mpd = application/vnd.ms-project
.mpe = video/x-mpeg
.mpeg = video/mpg
.mpg = video/mpg
.mpga = audio/rn-mpeg
.mpp = application/vnd.ms-project
.mps = video/x-mpeg
.mpt = application/vnd.ms-project
.mpv = video/mpg
.mpv2 = video/mpeg
.mpw = application/vnd.ms-project
.mpx = application/vnd.ms-project
.mtx = text/xml
.mxp = application/x-mmxp
.net = image/pnetvue
.nrf = application/x-nrf
.nws = message/rfc822
.odc = text/x-ms-odc
.out = application/x-out
.p10 = application/pkcs10
.p12 = application/x-pkcs12
.p7b = application/x-pkcs7-certificates
.p7c = application/pkcs7-mime
.p7m = application/pkcs7-mime
.p7r = application/x-pkcs7-certreqresp
.p7s = application/pkcs7-signature
.pc5 = application/x-pc5
.pci = application/x-pci
.pcl = application/x-pcl
.pcx = application/x-pcx
.pdf = application/pdf
.pdf = application/pdf
.pdx = application/vnd.adobe.pdx
.pfx = application/x-pkcs12
.pgl = application/x-pgl
.pic = application/x-pic
.pko = application/vnd.ms-pki.pko
.pl = application/x-perl
.plg = text/html
.pls = audio/scpls
.plt = application/x-plt
.png = image/png
.png = application/x-png
.pot = application/vnd.ms-powerpoint
.ppa = application/vnd.ms-powerpoint
.ppm = application/x-ppm
.pps = application/vnd.ms-powerpoint
.ppt = application/vnd.ms-powerpoint
.ppt = application/x-ppt
.pr = application/x-pr
.prf = application/pics-rules
.prn = application/x-prn
.prt = application/x-prt
.ps = application/x-ps
.ps = application/postscript
.ptn = application/x-ptn
.pwz = application/vnd.ms-powerpoint
.r3t = text/vnd.rn-realtext3d
.ra = audio/vnd.rn-realaudio
.ram = audio/x-pn-realaudio
.ras = application/x-ras
.rat = application/rat-file
.rdf = text/xml
.rec = application/vnd.rn-recording
.red = application/x-red
.rgb = application/x-rgb
.rjs = application/vnd.rn-realsystem-rjs
.rjt = application/vnd.rn-realsystem-rjt
.rlc = application/x-rlc
.rle = application/x-rle
.rm = application/vnd.rn-realmedia
.rmf = application/vnd.adobe.rmf
.rmi = audio/mid
.rmj = application/vnd.rn-realsystem-rmj
.rmm = audio/x-pn-realaudio
.rmp = application/vnd.rn-rn_music_package
.rms = application/vnd.rn-realmedia-secure
.rmvb = application/vnd.rn-realmedia-vbr
.rmx = application/vnd.rn-realsystem-rmx
.rnx = application/vnd.rn-realplayer
.rp = image/vnd.rn-realpix
.rpm = audio/x-pn-realaudio-plugin
.rsml = application/vnd.rn-rsml
.rt = text/vnd.rn-realtext
.rtf = application/msword
.rtf = application/x-rtf
.rv = video/vnd.rn-realvideo
.sam = application/x-sam
.sat = application/x-sat
.sdp = application/sdp
.sdw = application/x-sdw
.sit = application/x-stuffit
.slb = application/x-slb
.sld = application/x-sld
.slk = drawing/x-slk
.smi = application/smil
.smil = application/smil
.smk = application/x-smk
.snd = audio/basic
.sol = text/plain
.sor = text/plain
.spc = application/x-pkcs7-certificates
.spl = application/futuresplash
.spp = text/xml
.ssm = application/streamingmedia
.sst = application/vnd.ms-pki.certstore
.stl = application/vnd.ms-pki.stl
.stm = text/html
.sty = application/x-sty
.svg = text/xml
.swf = application/x-shockwave-flash
.tdf = application/x-tdf
.tg4 = application/x-tg4
.tga = application/x-tga
.tif = image/tiff
.tif = application/x-tif
.tiff = image/tiff
.tld = text/xml
.top = drawing/x-top
.torrent = application/x-bittorrent
.tsd = text/xml
.txt = text/plain
.uin = application/x-icq
.uls = text/iuls
.vcf = text/x-vcard
.vda = application/x-vda
.vdx = application/vnd.visio
.vml = text/xml
.vpg = application/x-vpeg005
.vsd = application/vnd.visio
.vsd = application/x-vsd
.vss = application/vnd.visio
.vst = application/vnd.visio
.vst = application/x-vst
.vsw = application/vnd.visio
.vsx = application/vnd.visio
.vtx = application/vnd.visio
.vxml = text/xml
.wav = audio/wav
.wax = audio/x-ms-wax
.wb1 = application/x-wb1
.wb2 = application/x-wb2
.wb3 = application/x-wb3
.wbmp = image/vnd.wap.wbmp
.wiz = application/msword
.wk3 = application/x-wk3
.wk4 = application/x-wk4
.wkq = application/x-wkq
.wks = application/x-wks
.wm = video/x-ms-wm
.wma = audio/x-ms-wma
.wmd = application/x-ms-wmd
.wmf = application/x-wmf
.wml = text/vnd.wap.wml
.wmv = video/x-ms-wmv
.wmx = video/x-ms-wmx
.wmz = application/x-ms-wmz
.wp6 = application/x-wp6
.wpd = application/x-wpd
.wpg = application/x-wpg
.wpl = application/vnd.ms-wpl
.wq1 = application/x-wq1
.wr1 = application/x-wr1
.wri = application/x-wri
.wrk = application/x-wrk
.ws = application/x-ws
.ws2 = application/x-ws
.wsc = text/scriptlet
.wsdl = text/xml
.wvx = video/x-ms-wvx
.xdp = application/vnd.adobe.xdp
.xdr = text/xml
.xfd = application/vnd.adobe.xfd
.xfdf = application/vnd.adobe.xfdf
.xhtml = text/html
.xls = application/vnd.ms-excel
.xls = application/x-xls
.xlw = application/x-xlw
.xml = text/xml
.xpl = audio/scpls
.xq = text/xml
.xql = text/xml
.xquery = text/xml
.xsd = text/xml
.xsl = text/xml
.xslt = text/xml
.xwd = application/x-xwd
.x_b = application/x-x_b
.x_t = application/x-x_t

Google 工具列 API - 在 Google 工具列上建立您自己的按鈕

2009-02-11T18:40:00.003+08:00

將『Ian 懶惰蟲筆記』加入 Google 工具列

Google 工具列 API 可以讓網站管理員使用 XML 為 Google 工具列 (第 4 版以上) 建立自訂按鈕。這些按鈕可以瀏覽及搜尋網站、在選單中顯示 RSS 資訊提供，以及適時變更其圖示。使用者只要按一下您網站上的連結，或是 Google 的按鈕集，就可以將您的自訂按鈕加到他們的工具列中。

深入閱讀︰
Google 工具列 API 首頁
Google 工具列 API 說明文件

MySQL、MS SQL 與 Oracle 的自動編號使用方法

2009-02-08T14:30:00.001+08:00

MySQL、MS SQL 的自動編號比較方便，只要將在欄位設定 AUTO_INCREMENT 或 IDENTITY，但在 Oracle 就要先增加一個 Sequence 物件，然後利用這個 Sequence 來產生編號。以下為使用範例︰

MySQL︰

MS SQL︰

Oracle︰

深入閱讀︰
GTN Network Solution - [Oracle] Oracle 產生自動編號方式

PHP - ADODB $ADODB_FETCH_MODE 決定資料集以那種方式將資料傳給陣列

2009-02-07T14:48:00.003+08:00

$ADODB_FETCH_MODE 這個全域變數決定了資料集以那種方式將資料傳給陣列，資料集在被建立時（如 Execute() 或 SelectLimit() ）會把本變數 $ADODB_FETCH_MODE 的值保存下來，而隨後本變數 $ADODB_FETCH_MODE 的任何改變都不會影響到現存的資料集，只有在以後資料集被建立起來時才會改變。

以下為為已定義的常數：

define('ADODB_FETCH_DEFAULT',0);
define('ADODB_FETCH_NUM',1);
define('ADODB_FETCH_ASSOC',2);
define('ADODB_FETCH_BOTH',3);

以下為一個使用的例子：

在本範例中，如你所見兩個資料集在被 Execute() 建立時，會依據 $ADODB_FERCH_MODE 的值來決定儲存及使用的存取模式。

如果沒有任何的模式被定義，預設值則是 ADODB_FETCH_DEFAULT。呈現的預設模式則依據資料庫驅動程式而有所不同，所以不要依賴 ADODB_FETCH_DEFAULT。為了可攜性，我們建議你固定為 ADODB_FETCH_NUM 及 ADODB_FETCH_ASSOC，因為有許多驅動程式並不支援 ADODB_FETCH_BOTH。

假如你有多個連結物件，並且想要有不同的 fetch 模式給每個連結，那麼就使用 SetFetchMode() 函數，一旦連結的物件呼叫這個函數，那麼連結物件會忽略全域變數 $ADODB_FETCH_MODE 並且自己會使用內部的 fetchMode 屬性。

要取得之前的 fetch 模式，你可以使用檢查 $db->fetchMode 屬性，或使用 SetFetchMode() 的傳回值。

PHP - Filter Functions 過濾器

2009-02-07T14:24:00.001+08:00

在以往要檢查 E-mail 格式是否正確，我們通常都是透過寫正規表示式來做判斷，如下︰

但在 PHP5 之後，可以直接透過 Filter 函數，有更方便的作法，如下︰

深入閱讀︰
PHP Manual - Filter Functions
w3school 在线教程 - PHP Filter 函数

Google Analytics 流量統計名詞解釋

2008-12-26T18:28:00.002+08:00

訪客 Vistors

‧PageView 網頁檢視

PageView，又可簡稱為「PV」。PV 代表站內網頁被檢索查看的總次數。當一個訪客來到你的網站後，看了首頁與兩篇文章，總共檢視了三個網頁，那麼你的部落格PV便會加上 3。

‧Visit 造訪次數

「造訪次數」一般被認為是查看網站行銷效果與熱門度的基本指標，對於其他統合參數來說，「Visit」也常是必要的參考值，這是因為這項數據更具體的代表了「每一次實質的到訪行為」。例如有一個訪客來到你的網站看了兩三個網頁，然後離開網站，或者在短時間內（Google Analytics 預設為 30 分鐘）重複進出你的網站，那麼這整個瀏覽過程中這位訪客只會被計算為一次的 Visit。但是只要超過時限，「造訪次數」就不會管訪客之間是否為同一個人，都會被計算為新的一次實質造訪行為。

‧Absolute Unique Visitor 絕對特定訪客

這是 Google Analytics 比較特殊的一項設計，Absolute Unique Visitor（絕對特定訪客）是比 Visit 更嚴格的計算法。它的計算方式是，在一段特定時間內（這段時間依據你在 Google Analytics 上方圖表拉出的時間長度而定），不管到訪網站幾次，只要是同一個訪客，都只會被計算為一位絕對特定訪客，也就是不重複的瀏覽者數量。

‧Vistor 訪客

當我們在 Google Analytics 中使用圖表上方的下拉選單，想要改變圖表的數據項目時，你會看到一個「Vistors 訪客」的項目，這個項目顯示的數值會比「Visit 造訪次數」稍低，為什麼呢？因為這裡的「Vistors 訪客」指得就是「每天的絕對特定訪客」，亦即「每日不重複訪客」數目。一般來說，Google Analytics 預設會在它的圖表中優先顯示這個項目的數據。

‧New Visitor 新訪客

「在某段時間內只造訪你部落格一次」的訪客數量。

‧Returning Visitor 舊訪客

如果訪客曾經來過你的網站，那麼統計就會將其計算為「Returning Vistors」。

‧Average Pageview 平均網頁檢視

平均網頁檢視就是「網頁檢視數」除以「造訪次數」，就可以得到在每次部落格上的實質訪問行為裡，平均會被瀏覽多少個網頁。

‧Time on Site 網站停留時間

每一位訪客平均停留在你網站的時間。統計服務會記錄每一次「Visit 造訪」的時間長度，，然後除以「總造訪次數」，就可以得到這個平均值。

‧Bounce Rate 退回率

訪客只造訪一個網頁就離開網站的比率。基本的算法是「只看一個網頁的造訪次數」除以「總造訪次數」。

‧Visitor Loyalty 忠誠度

在訪客忠誠度裡，會依據不同的重複造訪次數，來顯示每個區段在總體造訪次數中所佔的比例，也就是說你可以看到有多少訪問是忠誠的不斷到訪，又有多少訪問是隨機的臨時拜訪。

‧Visitor Recency 新近度

訪客新近度意即，訪客上一次來看你的網站是多久以前？（也可以說是訪客們都隔多久來看一次你的網站）你可以看到從 0 天、1 天到 365 天等不同時間點所擁有的訪客比率。有些訪客可能已經一年都沒有再回到你的網站，這其實也表示他們可能對你網站不感興趣。另外因為「0 天前」這個項目也包含了新訪客的數目在裡面，所以判讀上需要考慮這個額外因素。

‧Length of Visit 造訪時間長度

在造訪時間長度中顯示，總造訪次數在不同的「停留時間區段」裡的分佈情形。

‧Depth of Visit 造訪閱讀量

在造訪閱讀量中顯示，總造訪次數在不同的「閱讀頁數區段」裡的分佈情形。

流量來源 Traffic Sources

‧Direct Traffic 直接流量

些訪客並非透過任何網站轉到你的網站，他們可能是透過已經存在瀏覽器中的書籤、或直接在網址列輸入網址而來，這些都被稱為 Direct Traffic。擁有直接流量對於一個網站來說，這表示已經有讀者把你的網站視為「他們想看的目標」，所以他們才會儲存你的網址，才會想到要看時，直接連進你的網站。

‧Referring Site 推薦連結網站

這項服務告訴你，訪客都是透過哪些網站的推薦而來到這裡（實際的計算情形是，你的網址連結出現在別的網站，其他人透過點擊這些連結而進入你的網站的數目）。

‧Search Engines 搜索引擎

這個數據就是告訴你，訪客都是透過哪些搜索引擎來找到你的網站。

‧Keyword 關鍵字

這項數據的意義是說，你的訪客都是透過在搜索引擎搜索哪些關鍵字而來到你的網站。

內容 Content

‧Top Content 主要內容

這個項目會列出你的網站中最常被瀏覽的網頁網址，點擊特定網址後可以看到該網頁的獨立統計數據，例如專屬這個網頁的停留時間、退回率，和長時間的流量變化。

‧Content by Title 標題內容

標題內容其實有點像文字化的主要內容，「主要內容」列表顯示的是每個獨立的網址的瀏覽量，而「標題內容」裡面顯示的是以網頁標題為主的瀏覽量。有時候，訪客可能用不同的網址在瀏覽你同一個標題下的網頁，它們其實是同一個網頁，會這樣的原因之一，是有些人可能是透過網頁代理來瀏覽你的網站，因此統計時看到的是不同的網址，這時候透過「同一個標題」，就可以把這些相關網址都集合在一起統計。

‧Content Drilldown 內容深入

這個項目是把你網站裡的網址分層檢索，然後讓你層層深入的去查看每一層級網址的流量。

‧Top Landing Pages 主要到達網頁

這個資料可以告訴你訪客通常都從網站中的哪幾個網頁進入你的網站。

‧Top Exits 主要離開網頁

這個資料可以告訴你訪客通常都從網站中的哪幾個網頁離開你的網站。

深入閱讀︰
電腦玩物 - Google Analytics 各種流量統計數據對部落格有什麼意義？

免費的自動檔案同步軟體 Allway Sync

2008-12-13T13:50:00.001+08:00

Allway Sync 是一個非常容易使用的 Windows 檔案同步軟體。

它可以在幾個資料夾之間進行檔案同步。同步方式有源資料夾同步和各向同步兩種方式：

一、源資料夾同步方式將以一個資料夾為基準，刪除或覆蓋其餘資料夾與源檔案相比較不相同的檔案。

二、各向同步方式則自動將更新的檔案覆蓋幾個同步資料夾中的舊檔案。軟體帶有一個小型資料庫，監視每次更新後的檔案狀態。如果再一次同步之後，你刪除了同步資料夾中某些檔案，它在同步的時候將其它的幾個資料夾的副本也刪除，而不會將不需要的未刪除檔案重復拷貝到已更新的資料夾。由於軟體自己會對檔案進行刪除和覆蓋，它提供了使用回收站進行檔案備份的措施，使用者可以在不慎執行錯誤的同步動作之後，從回收站將錯誤刪除或覆蓋的檔案找回來（預設並沒有開啟該功能，需要自行設定）。

此外，該軟體還具有自動同步功能，可以在指定的條件下自動執行同步任務。還可以指定檔案篩選列表，過濾一些不希望同步的檔案或資料夾。最重要的是可以透過連線網路磁碟機或 FTP 連˙線的方式同步兩台不同主機的資料夾檔案。

如果您要同步的檔案大小和數量不是很多，這個軟體是免費的，你可以一直使用下去。如果您要同步的檔案和數量太多，而且經常需要進行同步，那麼可能就會超過它的使用許可，那應該購買它的專業版使用許可，才能進行頻繁的大量檔案同步操作。

相關資料︰
官方網站下載位址
電腦玩物 - 免費的自動檔案同步軟體：Allway Sync 5.5.8（中文版）實作教學

當 MySQL 出現 Host 'host_name' is blocked 錯誤時

2008-12-13T13:18:00.002+08:00

當你 MySQL 出現上面這個錯誤訊息，這意味著，mysqld 已經得到超過 max_connect_errors 次的錯誤連線請求。mysqld 會認定這個錯誤可能是來自駭客的攻擊，並進一步阻止該主機繼續連線。可以透過執行下面指令來解除這個限制，重新允許該主機的連線。

範例假設 MySQL 資料庫的帳號為 root，密碼為 123。

你可以透過下面的 SQL 列出 MySQL 系統變數值，得知目前 max_connect_errors 的設定值。

參考資料︰
MySQL :: MySQL 5.0 Reference Manual :: B.1.2.6 Host 'host_name' is blocked

Windows 的 MySQL 資料庫熱備份 / 使用 BigDump 匯入大於 2MB 以上的 .sql

2008-10-23T16:44:00.005+08:00

這裡介紹在 Windows 下 MySQL 資料庫熱備份的一個很簡單方法︰

1. 寫一個 .bat 批次檔，內容如下︰

phpbb_db_backup.bat

範例假設 MySQL 資料庫的帳號為 root，密碼為 123，要匯出的資料庫為 phpbb。

2. 手動或使用 Windows 排程執行 phpbb_db_backup.bat，執行完畢就會將資料產生一個 .sql 文件存在所指定的目錄。

完成備份後在將來需要時，直接拿備份的 .sql 文件匯入 MySQL 資料庫就可以了。

在 MySQL 中匯入資料庫的方式有很多種，最常用的方式就是使用 phpMyAdmin 管理程式的匯入介面來上傳、匯入。不過如果 .sql 文件太大的話，則很容易遇到伺服器的執行時間或檔案大小的限制，結果就是無法順利上傳、匯入資料。

以下介紹一個相當實用的 PHP 小程式『BigDump』，它可以幫我們將超大的 .sql 文件直接匯入 MySQL 資料庫中。

首先將下載回來的 bigdump.php 用文字編輯器開啟，修改部份設定參數，如下︰

修改完成後將 bigdump.php 上傳到Server上，並將 .sql 文件放在同個目錄下，瀏覽 bigdump.php，就可以選擇要匯入的檔案，輕輕一點沒多久就可以將資料完整的回存到資料庫裡了。

善用 Google 文件 - 讓您的文件、試算表、簡報作更有效的分享，並利用表單作問卷調查

2008-10-04T23:58:00.012+08:00

相信很多人跟我ㄧ樣長久習慣了使用微軟所提供的應用軟體，也就習慣了使用 Microsoft Office 來製作許多的文件資料。所以大家手邊都有不少的 Word(.doc)、Excel(.xls)、PowerPoint(.ppt) 格式的文件檔案，也都習慣了使用這些格式的文件檔案互相提供資訊，尤其是在許多政府官方的網站上。

當沒有注意到那個鏈結的背後是直接指向 Word(.doc)、Excel(.xls)、PowerPoint(.ppt) 的文件檔案時，這時候就會發現瀏覽器停在那邊，等著這個文件檔案下載後，系統自動開啟 Microsoft Office 來讀取。如果電腦差一點或是系統使用久了不穩定時，還有可能造成瀏覽器當掉的情況，尤其如果您是使用 IE 瀏覽器。其實我們要在網路上發佈分享這些文件資料，有其他更好的選擇。

Google 文件是 Google 網路應用程式服務的其中之一，不需要另外安裝任何軟體程式，透過瀏覽器就可以直接使用。除了擁有基本該有的製作編輯功能，還有發佈分享、共同編輯、版本控制，等更強大的功能。

在 Google 文件所有文件檔案都可以直接發佈成網頁，並且擁有獨立的瀏覽網址，這有幾個好處︰

一、我們不再需要將 Word(.doc)、Excel(.xls)、PowerPoint(.ppt) 的檔案上傳至伺服器，也就是說當使用者檢視這些資料時並不會吃我們伺服器的頻寬。

二、由於已經發佈成網頁格式，所以使用者不需要先下載，或是系統需開啟 Microsoft Office 來讀取，瀏覽速度上也就快很多，重點是使用者的電腦不需一定要安裝 Microsoft Office。

三、我們隨時可以至 Google 文件修改重新發佈，或停止發佈。

四、可以使用 Google Analytics (分析) 來追蹤瀏覽您已發佈文件的訪客數。

Google 文件發佈範例︰帶頭升級 Office 2007？別當害群之馬

Google 試算表發佈範例︰臺北市按性別分類之主要統計指標

除了發佈成網頁之外，簡報檔發佈還提供程式碼可以複製並貼到任何網站或網誌的 HTML，甚至可以做線上簡報。

範例如下︰

Google 文件線上簡報範例︰嚴長壽-我所看見的未來

Google 文件還提供了另外一種文件檔案『表單』，利用這種文件檔案您可以製作成表單讓使用者填寫，例如作問卷調查。當使用者填寫這份表單資料送出後，Google 文件會將資料以試算表形式儲存在這份文件檔案中，您可以透過插入小工具分析這些資料，當然您也可以發佈這份文件檔案與大家分享這些資料。

Google 文件表格範例︰Ian 懶惰蟲筆記訪客卷問

載入中...

相關閱讀︰
Google 文件說明中心
帶頭升級 Office 2007？別當害群之馬 - Chao-Kuei's Notes | 資訊.人.權.貴隨便記

Google Chrome - Google 自行開發的瀏覽器

2008-09-03T17:00:00.003+08:00

瀏覽器我早已習慣使用 Firefox。雖然 Microsoft Windows 本身就有 Internet Explorer，但是長久以來對於 IE 的使用經驗實在不太好。最常遇到的經驗就是系統使用久了 IE 整個掛點完全不能開啟使用，不然就是無緣無故的當掉。微軟 IE 還有一向遭到大家詬病「不鳥 W3C，只搞自己的標準」，在寫 CSS 或 JavaScript 時常常為了 IE 還需多做許多設定及判斷。微軟在 2008/03/05 放出 IE 8 的 Beta 1 測試版，雖然 IE 8 號稱「與標準更相容」，但是看到國外的「Anomalous Anomaly」部落格「Acid 3 is out! IE 5.5 beats IE 7?」中看到 Acid 3 測試 IE 5.5 擊敗 IE 7，IE 8 相容性卻只比 IE 7 多 6 分，從12 分進步到了 18 分，對 IE 再次心寒。（Acid 3 是一項針對 W3C 制定 XHTML、HTML、CSS 等最新網頁標準的綜合測試。）

Google Chrome 是 Google 自行開發的瀏覽器。對於瀏覽器，Google 秉持著如首頁般簡潔、快速的設計理念，對於大多數人來說，瀏覽器只是一個能夠開啟網頁、瀏覽網頁的程式，將它打造的更輕巧、更有效率就是 Google 想實踐的目標。Google Chrome 在分頁標籤上做了一個新的設計，讓每個網頁分頁都是獨立運行互不引響，進而減少遭受惡意網站攻擊而導致整個瀏覽器停擺的窘境。只要將停擺或是有問題的分頁關閉，其他分頁依然會正常運行，不會因為一個分頁導致其他分頁的工作或資料尚失，例如可能這時另外的分頁正在使用網路 ATM。

目前 Google Chrome 正在起步，依照 Google 一貫的精神，相信這是可以期待的。使用者可以透過勾選『自動傳送使用統計資料及當機報告給 Google，就能助我們一臂之力，讓 Google 瀏覽器更臻完美』選項，便可以幫助 Google 改善瀏覽器。

Google 瀏覽器背後的故事

相關資料︰
Google Chrome 的理念與功能展示介紹漫畫
Anomalous Anomaly - Acid 3 is out! IE 5.5 beats IE 7?
免費資源網路社群 - Google Chrome - Google自行開發的瀏覽器將顛覆網際網路！

mailto 應用 subject 參數中文編碼問題

2008-08-08T20:29:00.003+08:00

有時候我們會使用 mailto:，讓使用者直接點連結開啟像 Outlook 這一類的軟體發信與我們連絡。甚至可以利用一些參數預設開啟時的一些資料，範例如下。

subject︰主旨。
body︰內文。
cc︰副本。
bcc︰密件副本。

但是當你的頁面是使用 utf-8 編碼時，在繁體中文 Outlook 中文的部份會出現亂碼，原因就是繁體中文 Outlook 是 big5 編碼，而你傳送的參數值是 utf-8 編碼。

在這情況下我們必須將 big5 的文字做 URL 編碼，在 PHP 可以利用 rawurlencode() 這個函式。要注意的是在做 URL 編碼時，必須確定是針對 big5 的文字所做的編碼，以上面的範例更改成如下。

Google Maps API - 設定地圖控制項位置及自訂地圖控制項

2008-08-02T14:16:00.003+08:00

‧地圖控制項位置設定

之前已經介紹過如何透過 GMap2.addControl(control) 添加地圖控制項。addControl 方法有一個非必填的第二參數 GControlPosition(anchor, offset) 可以指定該控制項在地圖上的位置。

anchor 為一常數分別代表地圖的四個角落。
G_ANCHOR_TOP_RIGHT 地圖的右上角
G_ANCHOR_TOP_LEFT 地圖的左上角
G_ANCHOR_BOTTOM_RIGHT 地圖的右下角
G_ANCHOR_BOTTOM_LEFT 地圖的左下角。

offset 為 GSize(width, height) 物件來表示控制項距離地圖邊緣多少像素。

看範例所呈現的結果

‧自訂地圖控制項

Google Maps API 還允許透過創建 GControl 的子類自訂地圖控制項。從技術角度上講，不是使用 JavaScript 建立對象的 subclass，而是將 prototype 對象分配給 GControl 對象的實例。

自訂可用的地圖控制項，至少為該類定義以下兩個方法︰

initialize() 方法必須返回 DOM 元素，並透過 GMap2.getContainer() 取得包含地圖的 DOM 元素添加到地圖中。

getDefaultPosition() 方法必須返回類型為 GControlPosition，向地圖返回預設情況下控制項在地圖中出現的位置。

//ImgZoomControl 是顯示「放大」和「縮小」按鈕的 GControl，先定義函數。 function ImgZoomControl() { } //要建立 GControl 的子類，我們將 prototype 對象設置為 GControl 對象的一個實例。 ImgZoomControl.prototype = new GControl(); //為每個按鈕創建一個 DIV，並將其放在容器 DIV 中，然後返回容器 DIV 作為我們的控件元素。 //將該控件添加到地圖容器中，並將其返回，以便地圖類能正確地放置它。 ImgZoomControl.prototype.initialize = function(map) { var container = document.createElement("div"); var zoomInDiv = document.createElement("div"); zoomInDiv.innerHTML = ''; GEvent.addDomListener(zoomInDiv, "click", function() { map.zoomIn(); }); container.appendChild(zoomInDiv); var zoomOutDiv = document.createElement("div"); zoomOutDiv.innerHTML = ''; GEvent.addDomListener(zoomOutDiv, "click", function() { map.zoomOut(); }); container.appendChild(zoomOutDiv); map.getContainer().appendChild(container); return container; } //預設情況下，該控制項將在地圖的左上角顯示，邊距為 7 像素。 ImgZoomControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); } function load() { if (GBrowserIsCompatible()) { var myMap = new GMap2(document.getElementById("my_map")); myMap.setCenter(new GLatLng(25.08532, 121.561498), 11); myMap.addControl(new ImgZoomControl()); } }

看範例所呈現的結果

參考︰
‧class GMap2︰addControl(control, position?)，getContainer()
‧class GControlPosition
‧class GSize
‧enum GControlAnchor
‧interface GControl

更多教學文件在此︰Google Maps API - 前言及目錄

PHP - usort、uasort 陣列自訂排序

2008-07-06T06:44:00.002+08:00

此範例相當於 SQL 的 order by no, type。

原本的陣列︰

usort 排序後的陣列︰

將 usort 改成 uasort 排序後的陣列︰

Google Maps API - 地圖座標定位

2008-07-01T22:39:00.003+08:00

在程式的應用上可以利用 Google Maps API 取得經緯度座標，這裡介紹兩種取得經緯度座標的方法。

方法一︰透過單擊地圖取得經緯度座標

看範例所呈現的結果

在上個單元『在地圖上新增標註』中，已大致介紹過 GEvent。在這同樣透過 GEvent.addListener(source, event, handler) 針對 GMap2 註冊一個事件處理程序 click，當滑鼠單擊地圖時會回傳兩個參數 overlay 及 point。如果單擊了某個標記，則該標記將通過 overlay 參數傳遞給事件處理程序，並且還在標記上觸發 click 事件。否則，被單擊點的地理坐標 GLatLng 將在 point 參數中傳遞。

所以在這個例子中，當單擊地圖某個點時使用 GMarker.setLatLng(point) 重新設定標註座標，並將所取得的座標值填入表單中的 inLatLng 欄位。

方法二︰透過地址輸入取得經緯度座標

var myMap; var myMarker function load() { if (GBrowserIsCompatible()) { myMap = new GMap2(document.getElementById("my_map")); var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646); myMap.setCenter(myLatLng, 15); myMap.addControl(new GLargeMapControl()); document.getElementById('inLatLng').value = myLatLng.toString(); myMarker = new GMarker( myLatLng ); myMap.addOverlay( myMarker ); } } function addressGps() { var myGeocoder = new GClientGeocoder(); var address = document.getElementById('address').value; myGeocoder.getLatLng(address, function getRequest( point ){ if(!point){ alert('這個地址 Google 說不知道！'); }else{ //移動地圖中心點 myMap.panTo( point ); //設定標註座標 myMarker.setLatLng(point); document.getElementById('inLatLng').value = point.toString(); } }); }

看範例所呈現的結果

這裡要介紹一個新的物件 GClientGeocoder 地址解析器，現在已經支援台灣大部分的地址解析，但目前中國地圖地址解析只支援市/縣/區級別的地址。可以透過 GClientGeocoder.getLatLng(address, callback) 的方法對指定的地址進行地址解析，並將結果以 GLatLng 回傳。

在這例子中還使用了 GMap2.panTo(center) 移動地圖中心點。避免當所查詢的地址位置在地圖可見範圍之外，造成使用者找不到的情況。

補充︰透過經緯度座標取得地址 (2009/01/02)

使用方法與透過地址輸入取得經緯度座標很像，只是改用 GClientGeocoder 的 getLocations(GLatLng, callback) 方法。

var myMap; var myMarker function load() { if (GBrowserIsCompatible()) { myMap = new GMap2(document.getElementById("my_map")); var myLatLng = new GLatLng(25.04763902653048, 121.51715755462646); myMap.setCenter(myLatLng, 15); myMap.addControl(new GLargeMapControl()); myMarker = new GMarker( myLatLng ); myMap.addOverlay( myMarker ); } } function getAddress() { var strLatLng = document.getElementById('latlng').value; strLatLng = strLatLng.replace("(", "["); strLatLng = strLatLng.replace(")", "]"); var arrLatLng = eval(strLatLng); var myLatLng = new GLatLng(arrLatLng[0], arrLatLng[1]); //移動地圖中心點 myMap.panTo( myLatLng ); //設定標註座標 myMarker.setLatLng( myLatLng ); var myGeocoder = new GClientGeocoder(); myGeocoder.getLocations(myLatLng, function(addresses) { if(addresses.Status.code != 200) { alert("此座標沒有找到對應的地址 " + myLatLng.toUrlValue()); } else { var result = addresses.Placemark[0]; myMarker.openInfoWindowHtml( result.address ); document.getElementById('address').value = result.address; } }); }

看範例所呈現的結果

不過所查詢出來的地址還是有點出入，例如︰我們透過地址（臺北市信義區市府路1號）所查出來的經緯度座標為（25.037525, 121.563782），但是用經緯度座標（25.037525, 121.563782）反查地址卻是（110台灣台北市信義區仁愛路四段）。

參考︰
‧class GMap2︰事件 click、panTo(center)
‧class GEvent︰addListener(source, event, handler)
‧class GMarker︰setLatLng(point)
‧class GClientGeocoder︰getLatLng(address, callback)、getLocations(GLatLng, callback)

更多教學文件在此︰Google Maps API - 前言及目錄

Firefox 3 - 創造「單日最多人下載軟體」的金氏世界紀錄！

2008-06-19T10:57:00.002+08:00

感謝永遠都這麼出色的 Mozilla 社區的支持，我們在 24 小時之內達到了超過 8 百萬的下載次數。這是我們這麼久以來單日下載最多的一次──真是太棒了！

請耐心等待來自吉尼斯的好心審查員審查我們的記錄要求。這將會花費幾天的時間，所以請隨時在這裡查看進一步的消息。再次深深的感謝您的支持！

以上是 Firefox Download Day 2008，在臺灣時間 2008/06/18 AM1:00 開始 24 小時後，官方所發布的消息。Firefox 3 改良超過 15000 個項目，你還沒去下載更新嗎？

查看世界各地下載人數

SharedCopy - 再也不怕網頁消失！保存、標記註解或分享網頁快照！

2008-06-17T14:18:00.002+08:00

有時候在瀏覽網頁時，看到自己有興趣或是必須保存下來的資料，通常一般使用者第一個想到的就是加入我的最愛，或是儲存到如 Google Bookmarks 的網路書籤。但往往在原始網站內容被移除後，就無法在檢索網站內容。有些聰明點的使用者可能會想到 Google 頁庫存檔的功能，但若是網頁未被索引或存檔怎麼辦呢？沒關係，現在透過 SharedCopy，無須安裝任何軟體，使用者就能將網頁完整保存下來！

SharedCopy 的概念與 Social Bookmarks 類似，不太一樣的是 SharedCopy 是以將網站完整保存下來為優先考量，使用者更可以在該頁面加上註解(Comments)、高亮(Highlight)、劃線、畫圓、加上文字等等。儲存完成後將會產生獨立網址，使用者可直接複製該段網址來分享頁面。

對於網路應用程式設計及網頁設計，更好的應用在於可直接透過 SharedCopy 作為設計上的相互溝通，直接將意見標註在頁面上儲存，並把所產生的產生獨立網址 mail 給對方。這比利用螢幕快拍在小畫家上編輯，儲存為圖片檔再 mail 給對方來的方便很多。

SharedCopy

更詳細的使用介紹︰
免費資源網路社群 - SharedCopy - 再也不怕網頁消失！保存、標記註解或分享網頁快照！

Google Maps API - 在地圖上新增標註

2008-06-07T20:30:00.004+08:00

在 Google Maps 如果想要加上標記及視窗說明，這可以使用 GMarker 物件來加以實現。

看範例所呈現的結果

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) ); 建立一個 GMarker 物件，設定位置在經度 25.08532，緯度 121.561498 的位置上。

GMap2.addOverlay(overlay) 將加疊層加入地圖中，這裡我們將新建立的 GMarker 加入地圖中。

GMarker.openInfoWindowHtml(content, opts?) 在標記圖示之上打開地圖訊息視窗。如果要關閉已打開的訊息視窗可以使用 GMarker.closeInfoWindow()。

在上面的範例中是否覺得陽春了點，再來看看下面這個範例，我們將針對加在地圖上的標記做些改變，並加入動作事件處理程序。

看範例所呈現的結果

這裡介紹一個改變地圖上標記呈現相當重要的物件 GIcon，這可以讓我們建立屬於自己的圖示，使用在 GMarker 上。針對 GIcon 有許多屬性可加以設定，必須要注意 image、iconAnchor、infoWindowAnchor 這三個是必要屬性，如果省略將會照成執行上的錯誤。

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} ); 在這範例中，建立 GMarker 物件多加了一個參數設定 GMarkerOptions，此為一個物件我們設定了兩個屬性。icon 指定所使用的圖示 GIcon；draggable 使用者是否可拖拽此標記，true 為可拖曳，默認值為 false。

GEvent 在 Google Maps API 中所有事件都是透過此來加以定義，包含地圖本身的事件處理，至於有那些事件可以使用必須參考每個物件中事件部分的說明。所以這範例我們透過 GEvent.addListener(source, event, handler)，針對 GMarker 註冊了三個事件處理程序，分別為 click、dragstart、dragend。

在之前的所有範例中可以發現經常出現的兩個物件，GLatLng 是以緯度和經度表示的地理座標點。GPoint 是以像素座標表示的地圖上的一點。這兩個物件為 Google Maps API 中定義地圖上座標的主要物件，在往後的教學範例中還會經常看見它們。

參考︰
‧class GMap2︰addOverlay(overlay)
‧class GMarker︰openInfoWindowHtml(content, opts?)、closeInfoWindow()
‧class GMarkerOptions
‧class GIcon
‧class GEvent︰addListener(source, event, handler)
‧class GLatLng
‧class GPoint

更多教學文件在此︰Google Maps API - 前言及目錄

樸克牌有 54 張，樸克牌用 ♠、♥、♣、♦ 當作花色，Why？

2008-05-22T16:06:00.006+08:00

樸克牌從小玩到大還真的都不知道，為什麼樸克牌有 54 張？為什麼樸克牌要用 ♠、♥、♣、♦ 當作花色？

樸克 54 張，兩張大小王（兩張鬼牌 JOKER 一大一小）是日月，其餘 52 張是全年 52 個星期。黑桃 ♠、紅心 ♥、梅花 ♣、方塊 ♦ 代表春、夏、秋、冬四季。每個花色 13 張，代表一季 13 星期。每種圖案 13 張點數（1 ~ 13）加起來是 91 點，而每季也是 91 天，四季相加，加小王是 365 天，是一年正常天數，而再加大王是 366，代表閏年。此外，全牌只兩色，紅色代表白天，黑色代表夜晚。

撲克牌分為四種花色：黑桃 ♠、紅心 ♥、梅花 ♣、方塊 ♦。各國人民都以本國民族文化對四種花色給予不同的文化闡述。法國人將四種花色理解為矛、紅心、丁香葉、方形；德國人把四種花色理解為樹葉、紅心、橡樹果、鈴鐺；義大利人將四種花色理解為寶劍、酒杯、拐杖、硬幣；瑞士人將四種花色理解為橡樹果、盾牌、花朵、鈴鐺；英國人則將四種花色理解為鏟子、紅心、三葉草、鑽石。

為什麼要以這四種花色，歷來說法很多。比較集中的說法有以下兩種：一說是這四種花色代表當時社會的四種主要行業，其中黑桃 ♠ 代表長矛，象徵軍人；紅桃 ♥ 代表紅心，象徵牧師；梅花 ♣ 代表三葉草，象徵農業；方塊 ♦ 代表工匠使用的磚瓦。另一說是這四種花色來源於歐洲古代占卜所用器物的圖樣，其中黑桃 ♠ 代表橄欖葉，象徵和平；紅桃 ♥ 為紅心型，象徵智慧和愛情；梅花 ♣ 為三葉草，意味著幸運；方塊 ♦ 呈鑽石形狀，象徵財富。

撲克牌中的 K、Q、J 是英文中國王（King）、王后（Queen）、侍從（Jack）的縮寫，12 張人頭牌分別代表歷史上某個人物︰

♠ K︰大衛，是西元前 10 世紀以色列聯合王國的第三任國王，他善用豎琴演奏，並在聖經上寫了許多讚美詩，所以 ♠ K 畫面上經常有豎琴圖樣。
♥ K︰查理大帝，是法蘭克王國加洛林王朝國王，四張國王牌中唯一不留鬍鬚的國王。
♣ K︰亞歷山大大帝，是最早征服世界的馬其頓帝國國王，他的衣服上總是佩戴著配有十字架的球寶。
♦ K︰凱撒，是羅馬帝國的國王、名將和政治家，四張國王牌中唯一一張側面像。

♠ Q︰帕拉斯·雅典娜，是希臘的智慧和戰爭女神，四張皇后牌中唯一手持武器的一位皇后。
♥ Q︰朱迪思皇后。
♣ Q︰阿金尼，由女王（Regina）一詞而來，她手持薔薇花，表示英國以紅色薔薇花為標誌的蘭開斯特王族和以白色薔薇花為標誌的約克王族經過薔薇戰爭後終於和解，將雙方的薔薇花結在一起。
♦ Q︰雷切爾皇后。

♠ J︰霍吉爾。
♥ J︰拉海爾。
♣ J︰蘭斯洛特，是在亞瑟王傳說中圓桌騎士團的成員。
♦ J︰赫克托，他是特洛伊第一勇士，被稱為「特洛伊的城牆」。

相關資料︰
Wikipedia - 撲克牌

SQL 隨機取出資料表格內容

2008-05-21T20:09:00.001+08:00

MySQL︰

PostgreSQL︰

Microsoft SQL Server︰

Oracle︰

IBM DB2︰

資料來源︰
SQL to Select a random row from a database table

MySQL - SHOW 句法（取得資料表、欄位的訊息）

2008-05-21T19:49:00.003+08:00

SHOW DATABASES︰列出 MySQL Server 上的資料庫。

SHOW TABLES [FROM db_name]︰列出資料庫的資料表。

SHOW TABLE STATUS [FROM db_name]︰列出資料庫的資料表，提供比較詳細的訊息。

SHOW COLUMNS FROM tbl_name [FROM db_name]︰列出資料表的欄位，同 SHOW FIELDS FROM tbl_name [FROM db_name]，DESCRIBE tbl_name [col_name]。

SHOW FULL COLUMNS FROM tbl_name [FROM db_name]︰列出資料表的欄位，提供比較詳細的訊息，同 SHOW FULL FIELDS FROM tbl_name [FROM db_name]。

SHOW INDEX FROM tbl_name [FROM db_name]︰列出資料表的索引訊息。

SHOW STATUS︰列出 Server 的狀態訊息。

SHOW VARIABLES︰列出 MySQL 系統變數的值。

SHOW PROCESSLIST︰顯示哪個執行緒正在運行。

SHOW GRANTS FOR user︰列出對一個用戶必須發出以重複授權的授權命令。

參考資料︰
MySQL 官方網站
MySQL 5.1 中文參考手冊
MySQL 3.23 中文參考手冊

我所看見的未來 - 嚴長壽︰獻給每一個關心台灣這片土地的人

2008-05-18T08:59:00.004+08:00

嚴長壽《亞都麗緻飯店總裁》、《觀光協會名譽會長》，相信很多人跟我一樣，都是從嚴總裁於 1997 年所出版的《總裁獅子心》開始認識他的。今年（2008）3 月嚴總裁又有了一本新的著作《我所看見的未來》。

《我所看見的未來》內容簡介︰

被稱為「飯店教父」的嚴長壽，長期關心台灣的發展，也參與多次國家的重要規劃、國際觀光事務，是台灣觀光旅遊的領航人。

正值台灣面臨國際勢力劇轉的時候、休閒產業即將引領經濟的時候，嚴長壽以自己幾十年來在國際上所學的、在專業上所領悟的、在地方上所看見的，做了條理分明又激勵人心的剖析：我們的優勢在哪裡，台灣的國際級規劃，未來的努力方向。

在即將告別觀光旅遊這領域之前出版這版書，對嚴長壽來說，是他在這一行的畢業報告，對台灣來說，卻是一個美而富的未來。

相關資料︰
我所看見的未來 - 嚴長壽︰獻給每一個關心台灣這片土地的人
博客來 - 我所看見的未來
博客來 - 做自己與別人生命中的天使
博客來 - 總裁獅子心
博客來 - 御風而上：嚴長壽談視野與溝通

Google 推出 Google Maps API for Flash

2008-05-18T05:20:00.005+08:00

Google 日前推出了 Google Maps API for Flash，採用的是 Actionscript 3.0，可將 Google Maps 加入 Flash 與 Flex 應用程式內。相信 Google Maps API 在 Flash 上將會有更有趣及更好的應用。

Google Maps API for Flash

相關資料︰
Google Maps API for Flash Demo
Official Google Maps API Blog - Introducing the Google Maps API for Flash

Google Maps API - 新增地圖控制項、地圖類型

2008-05-18T04:31:00.011+08:00

‧地圖控制項

在使用 Google Map 時會有地圖縮放及地圖類型切換等控制項，這裡可以使用 GMap2 物件的方法 addControl(control) 來新增地圖控制項。

看範例所呈現的結果

如果要將已經存在地圖上的控制項移除，可以使用 GMap2.removeControl(control)。

可使用的控制項如下︰

GLargeMapControl() 帶有可在四個方向平移、放大、縮小的按鈕，以及縮放滑塊的控制項。
GSmallMapControl() 帶有可在四個方向平移、放大和縮小的按鈕的控制項。
GSmallZoomControl() 帶有放大和縮小按鈕的控制項。
GScaleControl() 顯示地圖比例尺的控制項。
GOverviewMapControl() 可摺疊的迷你地圖控制項。
GMapTypeControl() 帶有切換地圖類型的按鈕的控制項。
GMenuMapTypeControl() 帶有切換地圖類型的下拉式的控制項。

‧地圖類型

在地圖類型切換控制項會出現那些地圖類型，是依據此地圖中註冊了那些地圖類型，預設已註冊 G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP 等三個地圖類型，地圖類型顯示預設為 G_NORMAL_MAP，這裡可以透過幾個方法來做更改。

看範例所呈現的結果

在這個範例中更改了地圖類型註冊為 G_NORMAL_MAP、G_PHYSICAL_MAP，並將地圖類型顯示更改為 G_PHYSICAL_MAP。

GMap2.getMapTypes() 取得地圖中註冊的地圖類型陣列，這裡我用了偷雞的方法直接用 myMap.getMapTypes().length = 0; 將這個陣列長度設為 0，先將預設已註冊的三個地圖類型清除。

GMap2.addMapType( type ) 新增地圖類型，type 必須為已知的地圖類型 GMapType。

GMap2.setMapType( type ) 設定顯示的地圖類型，type 必須為已知的地圖類型 GMapType。

如果要將已註冊的地圖類型移除可以使用 GMap2.removeMapType( type ) ，所以上個範例也可以這樣做，如下。

可使用的地圖類型如下︰

G_NORMAL_MAP 地圖
G_SATELLITE_MAP 衛星
G_HYBRID_MAP 混合
G_PHYSICAL_MAP 地形

除了 Google Maps 所提供的四種地圖類型之外，Google Maps API 也允許使用者建立自己的地圖類型，這部份在往後會再做詳盡的說明。

參考︰
‧class GMap2︰addControl(control, position?)，removeControl(control)
‧class GControl
‧class GMap2︰getMapTypes()，setMapType(type)，addMapType(type)，removeMapType(type)
‧class GMapType

更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 第一個範例在網頁嵌入 Google Map

2008-05-18T03:29:00.019+08:00

在生成 Google Maps API Key 的頁面會看到 Google Maps API 的第一個範例，如下︰

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Google Maps JavaScript API Example</title>
 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 
 function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 }
 }
 
 //]]>
 </script>
 </head>
 <body onload="load()" onunload="GUnload()">
 <div id="map" style="width: 500px; height: 300px"></div>
 </body>
 </html>

看範例所呈現的結果

http://maps.google.com/maps?file=api&v=2&key=XXXXXX 其中 key= 後面就是你所取得的 Google Maps API Key。

<div id="map" style="width: 500px; height: 300px"></div> 用來擺置 Google Map，其中 style="width: 300px; height:300px" 則是指定地圖區塊大小。

GBrowserIsCompatible() 判斷 Google Maps API 是否可用於當前的瀏覽器中，如當前瀏覽器支援 Google Maps API 則回傳 true。

var map = new GMap2(document.getElementById("map")); 宣告一個 GMap 物件，其中 "map" 就是先前用來擺置 Google Map 所宣告 div 標籤的 id。

map.setCenter(new GLatLng(37.4419, -122.1419), 13); 將地圖的中心點設定在經度 37.4419 和緯度 -122.1419，而 Zoom Level 在這範例中設成 13（1 為最大，數字越大 Zoom Level 越小）。在這或許會有個疑問，要怎麼知道某個地點的經緯度？可以利用 Google Map 找到要的地點固定在中間，然後按下『連結至此網頁』 URL 上就有該點的經緯度了，例如 http://maps.google.com/maps?ie=UTF8&ll=25.08532,121.561498&spn=0.291039,0.6427&z=11 紅字部分就是該點的經緯度。在往後的教學中會再介紹如何運用 Google Maps API 取得經緯度。

<body onload="load()" onunload="GUnload()"> 釋放 Google Maps API，在這要注意的是應在頁面的 unload 事件處理程序中使用此函數，不可在 Google Maps API 執行中使用。

參考︰
‧class GMap2︰setCenter(center, zoom?, type?)
‧function GBrowserIsCompatible
‧function GUnload

更多教學文件在此︰Google Maps API - 前言及目錄

Google Maps API - 前言及目錄

2008-05-18T02:38:00.014+08:00

Google Maps API 發佈了好一段時間，目前已經發展到 2.0 的版本，讓我最開心的是 Google Maps API 提供了中文說明文件，雖然是簡體中文但是這已經足夠我們更容易閱讀使用了。

在這將陸續對 Google Maps API 的使用做一些經驗教學，你會發現這是多麼簡單的一件事情，而各篇教學也將會在這篇文中統一建立目錄以方便閱讀。

Goole Maps API 使用上有些法律上的限制要注意：

你的 Google Maps 服務必須免費開放給一般使用者。

如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量，請主動聯絡 Google。

Google 會不定期更新 API，你有責任跟著更新你的網頁中的 API。

你不能更改或隱藏 Google 的 logo。

Google 有權力以後在地圖上放廣告，而你不能更改或破壞這些廣告。

有些地圖應用是 Google 不希望看到的，例如指明哪些地方可以購買到毒品或是任何違法行為。

這些限制我想一般簡單的應用都不太會觸及，目前為止，Google 也尚未在地圖上擺放廣告。

首先我們必須申請 Google Maps API Key，申請一個 API key。

當您閱讀完 Google Maps API 的一些說明及使用條款後，勾選『我已閱讀並同意這些條款和條件』，並在『我的網址：』輸入你要使用 Google Maps API 的位址。如果要在 http://www.domainname.com/mysxite/xxx.htm 應該要輸入 http://www.domainname.com/mysxite/，那麼所取得的 Key 只對 http://www.domainname.com/mysxite/ 之下的頁面有效，也可以針對 http://www.domainname.com/ 來申請，如此在 http://www.domainname.com/ 之下的所有頁面都可以使用這個 Key，當然包含 http://www.domainname.com/mysxite/ 之下的頁面。最後按下『生成 API 密鑰』，將會在下個頁面取得 Google Maps API Key。

目錄︰

。第一個範例在網頁嵌入 Google Map
。新增地圖控制項、地圖類型
。在地圖上新增標註
。地圖座標定位
。設定地圖控制項位置及自訂地圖控制項
。標註管理器
。自定地圖類型

更多教學將在以後持續新增。

相關資料︰

Google Maps API 參考文件
Google Maps API 使用條款
Google Maps API 範例

Google App Engine - 讓 Google 幫你 Hosting

2008-05-18T00:52:00.004+08:00

Google 於美國時間 2008/4/7 推出 Google App Engine 服務，讓開發人員可以在 Google 架構上撰寫應用程式，而且可使用與 Google 應用程式中一樣的建置模組。

這意謂著開發人員透過 Google App Engine 所開發的網路應用程式將由 Google 代管，而開發人員也不用擔心系統使用量擴充或是系統維護的問題，因為 Google 都一手包辦了，等於是 Google 在幫你 Hosting。

你可以使用 Google App Engine 更提供的 SDK 來開發 Web Application，目前提供的 SDK 僅有 Python 的版本，未來應該會提供其他更多的語言版本。

目前 Google App Engine 仍為測試階段，開放 1 萬名開發人員申請測試，在我申請的時候名額已經沒了出現以下訊息。

Thanks for checking in! When space in the Google App Engine preview release becomes available, we'll notify you by emailing xxxxxxx@gmail.com .
Don't worry--you don't have to wait to start building applications! You can get started now by downloading our SDK and reading through our documentation.

相關資料︰
Google App Engine SDK
Google App Engine Documentation
iThome Online - Google 測試 App Engine 應用程式代管服務
Wikipedia - Python
Python 教學文件

Google 網頁記錄

2008-05-17T23:49:00.005+08:00

使用 Google 這麼多的服務，我的感想是 Google 服務就等於是個 Data 的服務，您不得不佩服 Google 的資料系統整合有多完善，以下為 Google 網頁記錄官方簡介。

Google 網頁記錄

有了 [網頁記錄] 功能，您將能夠：

檢視和管理您的網頁活動。
您曾在網路上看到一個很棒的網站，但現在卻找不到了？從現在開始，您可以輕鬆找到瀏覽過的網站。有了 [網頁記錄]，您就可以檢視並搜尋您所造訪網頁的全文，包括 Google 搜尋、網頁、圖片、影片和新聞報導。您也可以隨時管理您的網頁活動並將項目從網頁記錄中移除。

取得與您最相關的搜尋結果。
[網頁記錄] 可根據您在 Google 上搜尋的內容以及您曾造訪的網站，來協助提供更多個人化搜尋結果。一開始您也許無法發覺到這對您的搜尋結果有什麼重大影響，但是在您使用 [網頁記錄] 一段時間後，您的搜尋結果就會不斷改進。

追蹤您網頁活動中有趣的趨勢。
您經常造訪哪些網站？您在早上 10 點到下午 2 點之間進行了幾次搜尋？ [網頁記錄] 可以提供您這些問題的答案，以及您網頁活動上的有趣趨勢。

512 四川大地震

2008-05-16T01:30:00.003+08:00

這我想就不必多說了，希望大家有力的出力、有錢的出錢。

Google Map 整合了一些訊息，由 Google 中國的員工維護，可以大略了解目前災區的狀況和規模。

查看大图

PHP - 產生 RSS/ATOM pubDate/created 所需格式

2008-05-07T07:53:00.002+08:00

在 RSS 2.0 的規格，中提到 pubDate 內容發佈日期，日期時間的規格遵循 RFC 822 的標準。那麼在 PHP 是該如何產生這樣的日期格式 (RSS => pubDate, ATOM => created)。

PHP 有提供這些需要的日期格式相關全域變數可以使用（PHP 5.1.1 以後開始支援這些全域變數）。

如果是 MySQL timestamp/datetime format 可以直接使用如下︰

目前支援的日期格式全域變數如下︰

DATE_ATOM : Atom Atom ( 2008-05-06T23:51:08+00:00 )
DATE_COOKIE : HTTP Cookies ( Tue, 06 May 2008 23:51:08 UTC )
DATE_ISO8601 : ISO-8601 ( 2008-05-06T23:51:08+0000 )
DATE_RFC822 : RFC 822 ( Tue, 06 May 2008 23:51:08 UTC )
DATE_RFC850 : RFC 850 ( Tuesday, 06-May-08 23:51:08 UTC )
DATE_RFC1036 : RFC 1036 ( Tuesday, 06-May-08 23:51:08 UTC )
DATE_RFC1123 : RFC 1123 ( Tue, 06 May 2008 23:51:08 UTC )
DATE_RFC2822 : RFC 2822 ( Tue, 06 May 2008 23:51:08 +0000 )
DATE_RFC3339 : Same as DATE_ATOM ( 2008-05-06T23:51:08+00:00 )
DATE_RSS : RSS ( Tue, 06 May 2008 23:51:08 UTC )
DATE_W3C : World Wide Web Consortium ( 2008-05-06T23:51:08+00:00 )

PHP - 判斷潤年

2008-05-07T07:13:00.001+08:00

有三種判斷方法，自己挑一個喜歡的吧。

function：

PHP - 字串空白處理

2008-05-07T06:30:00.000+08:00

function：

測試：

輸出結果：

CSS 連結屬性 - LoVe, HAte

2008-05-07T04:56:00.000+08:00

以往設定連結的 CSS，總是納悶為什麼某些屬性不會有作用，後來才發現原來要依照 a:link, a:visited, a:hover, a:active 的順序寫，不然某些屬性就不會有作用。

這個順序不好記嗎，您只要記得『愛』與『恨』﹙LoVe and HAte﹚，看出端倪了嗎。

說明︰

L : link 未瀏覽的連結

V : visited 已瀏覽過的連結

H : hover 滑鼠移到連結上

A : active 在連結上按下滑鼠

寫法︰

a:link, a:visited, a:hover, a:active { }

a:link { }

a:visited { }

a:visited:hover { }

a:hover { }

a:active { }

1024 人應援團 - 圖片產生器

2008-04-26T06:20:00.001+08:00

日本很酷的網站，只要選擇電腦裡的圖片後，點選『応援してもらう!』，稍待片刻就有由 1024 人拿著牌子拼出你的圖片喔！

還分平日是制服應援團，土日（週六）是私服應援團，支援 GIF, JPEG, PNG 三種類型，500KB 以下的圖片。

此外還提供了產生 PDF 檔，可列印出來製作成 3D 立體 1024 人應援團紙卡喔！

1024 人應援團 3D

偽基百科，連名字也是「惡搞」的！

2008-04-26T04:55:00.002+08:00

偽基百科欣然宣佈，作為偽客觀、偽公正、偽持平、偽學術、專事挖苦的惡搞百科全書，由 2006 年 5 月 20 日至今，我們的蟲子條目數量已達到 4,301 條了！我們的雞吃的太飽了！

別懷疑是『偽基百科』，不是『維基百科』，首頁標頭就這麼惡搞了，今天是 2008 年 4 月 26 日，我實在是太晚發現這麼好玩的地方了。

小孩 - 偽基百科

重點並非介紹這篇名為『小孩』的惡搞文，讓我覺得最有趣的是在最上方的那兩個區塊，不愧是『偽基百科』。

注意：糟糕物
這個主題因為大量「奶油犬」攻擊而充滿了十八禁的內容，繼而吸引大量「奶油狼」入侵。
在瀏覽本主題時，請注意周圍人士的手上是否拿著可以當凶器的物品，以免遭遇不測。
P.S.：未滿十八歲者請由邪惡的大人陪同瀏覽本主題，謝謝合作。

為了照顧那些幽默感退化的人們，維基百科有一個主題關於︰兒童。

到台灣找我玩，同志！ - 到台灣玩不帶走一張發票

2008-04-26T04:17:00.002+08:00

是個針對大陸同胞交流和推廣台灣旅遊的網站，其中值得一提的是，該網站發起『到台灣玩不帶走一張發票，倡導大陸赴台遊客捐發票公益串聯活動』。

您只要將下方 HTML 碼複製後，貼在自己的 blog 頁面上，即可讓逛到您 blog 的訪客看到活動貼紙，並鏈接到活動倡議網頁，讓更多網民分享到台灣隨手行善的喜樂。

之前還有個『兩岸俗語通 MSN 表情文化會館』，很有趣的單元，收集了許多兩岸網友的俗語會話，有漢語拼音、說明、典故及例句，並製作成 MSN 表情圖案，讓你平常就能夠看圖學習兩岸語言。

台湾俗语简体馆 - 林老师 Lin Lao Shi / [淨化的後宣洩语]

含蓄地表示不满之情绪
典故︰台湾素有较为粗俗的宣泄用语，以指称「您母亲比较良好」的方式来怒骂对方。近代以来有人改以指称「您老师比较良好」的方式，并略带开玩笑的情绪，来代替先前以「母亲」为主题的不雅用词。却又因为台语的「您」与普通话的「林」谐音，渐渐地又有人以更含蓄且简化的方式，改以「林老师」来宣泄不满之情绪。

內地俗語繁體館 - 好使 Hao Shi / [形容詞]

形容物或人用起來令人覺得好用、起勁、得心應手。
例句 A︰快告訴我啥牌子的減肥藥好使？
例句 B︰唉！我老囉！腦子不好使。
例句 C︰他這人聰明又有熱誠，挺好使的！

很有意思吧，不過已經在 2007/10/22 停止繼續維護，該單元沒有關閉有興趣的人可以去看看。

官方首页︰

RSS 2.0 的規格

2008-04-17T21:45:00.013+08:00

RSS 是一種網頁內容聚合格式，為 Really Simple Syndication 的縮寫，是一種消息來源格式規範，用以發佈經常更新資料的網站，例如部落格文章、新聞、音訊或視訊的網摘。RSS 文件包含了全文或是節錄的文字，加上發行者的相關資訊及版權宣告等。訂閱者只要透過 RSS 閱讀器（如 Google 閱讀器），就可看到即時更新的內容。

所有的 RSS 文件都必須符合 XML 1.0 的規範。在最外層是一個 <rss> 並定義所順應的規格版本，往下由單一個 <channel> 以及多個 <item> 元素所組成。

RSS 的結構應該大致長得像這樣：

以下簡短說明 RSS 2.0 的規格：

必須的 channel 元素

title：此「channel」的名稱，供人識別你提供的資料，通常設成網站的標題即可。

link：你的網站 URL。

description：網站或此 RSS 服務的簡介。

選擇性的 channel 元素

language：語系，如「en-us」、「zh-tw」等，參考或 W3C 的定義。

managingEditor：RSS 內容負責人的 E-Mail。

webMaster：技術負責人的 E-Mail。

pubDate：內容發佈日期，比如日報的發佈應該會每天更新一次。日期時間的規格遵循 RFC 822 的標準。例：「Sat, 07 Sep 2002 00:00:01 GMT」。

lastBuildDate：本 RSS 內容的最後更新時間，如：「Sat, 07 Sep 2002 09:42:31 GMT」。

category：指出一或多個本 RSS 的性質分類，供 RSS 目錄系統使用，語法和 item 之中 category 的一樣，參考。

generator：產生此 RSS 的程式名稱。

docs：敘述此 RSS 之格式的文件網址，也可將其指向 http://blogs.law.harvard.edu/tech/rss。

cloud：註冊以得到更新訊息的方式，如：「<cloud domain="rpc.sys.com" port="80" path="/RPC2" registerProcedure="pingMe" protocol="soap"/>」，參考。

ttl：本 RSS 內容的有效期限，即 RSS 閱讀器可以將此 RSS 快取住多久的時間，單位為分鐘，參考。

image：提供一個 GIF, JPEG 或 PNG 檔來代表此 RSS，參考。

rating：內容分級制度評分，請參考 PICS。

textInput：呈現一個可輸入文字的欄位，參考。

skipHours：告訴訂閱程式哪些小時可以跳過，參考。

skipDays：告訴訂閱程式哪些日期可以跳過，參考。

item 元素

title：此 item 的標題。

link：此 item 的網址。

description：此 item 的概述。

author：此 item 作者的 E-Mail，參考。

category：此 item 的分類，參考。

comments：與此 item 相關評論的網址，參考。

enclosure：此 item 內載的多媒體內容，參考。

guid：此 item 的索引（唯一識別碼），通常也是網址，參考。

pubDate：此 item 的發佈日期，參考。

source：此 item 最新內容的 XML 網址，參考。

W3C - Language codes，ISO 639 語言代碼，ISO 3166 標準國家代碼，ISO 4217 貨幣代碼

2008-04-17T19:29:00.005+08:00

現在有許多網站都有提供多國語系的版本，例如 iGoogle 首頁（http://www.google.com/ig?hl=zh-tw），其中（zh-tw）便是在 Google 繁體中文的代碼。但各家網站所使用的語系代碼都不太相同，例如有些網站就把繁體中文代碼直接簡化成（tw）。其實這些都沒有錯，只要本身系統區分的出來就好。

但是我的想法偏向比較標準的定義，在全球資訊網聯盟（World Wide Web Consortium，簡稱︰W3C）有了相關定義，在 8.1.1 Language codes 中定義了表示法如下︰

language-code = primary-code ( "-" subcode )*
primary-code︰為 ISO 639 兩個字母的語言縮寫。
subcode︰為 ISO 3166 國家代碼

在國際標準化組織（英文：International Organization for Standardization，簡稱︰ISO） ISO 639 為各語言所訂定的語言代碼，在 ISO 639-1 中定義了中文、漢語的語言代碼為（zh）。但是中文又區分為繁體中文及簡體中文，這部份通常是在後面加上使用該語言的國家和地區代碼來作為區分。例如︰繁體中文為中華民國、台灣（tw）在使用，那麼繁體中文的語言代碼就可以定義為（zh-tw）；簡體中文為中華人民共和國（cn）在使用，所以簡體中文的語言代碼定義為（zh-cn）。

至於國家和地區代碼就必須參考 ISO 3166 中 ISO 3166-1 所定義的標準國家代碼，其中包含有二位字母、三位字母、數字代碼，在語言區分通常是使用二位字母代碼。我們更可以利用 ISO 3166-1 中所定義的數字代碼作為系統其他資料國家記錄所使用的代碼，例如︰紀錄會員資料的國家別。

另外還有 ISO 4217 為貨幣及基金代碼，這些我們都可以用來作為資料紀錄的標準。

相關資料︰
W3C 全球資訊網聯盟
Wikipedia - 全球資訊網聯盟
W3C - 8.1.1 Language codes

ISO 國際標準化組織的官方網站
Wikipedia - 國際標準化組織
Wikipedia - ISO 639
Wikipedia - ISO 639-1
Wikipedia - ISO 3166
Wikipedia - ISO 3166-1
Wikipedia - ISO 4217

CDATA 區段 - XML 標準

2008-04-01T00:31:00.003+08:00

XML 對於許多人都不陌生，但還是有些地方大家不知道該如何使用，例如現在所要介紹的 CDATA 區段。

在某些時候內容中含有 HTML 標籤或者是一些特殊字元﹙如﹕<、>、&﹚，當這些字元出現在內容裡，通常都會出現 XML 分析錯誤的情況，這時候就必須將這些字元作些轉換的工作（如︰< / <、> / >、& / &）。

其實並不需要如此，CDATA 區段提供了一種通知剖析器的方法，說明 CDATA 區段所包含的字元沒有標記。

當 XML 剖析器遇到開頭的『<![CDATA[』，會將接下來的內容報告成字元，而不會嘗試將其解譯成項目或實體標籤。字元參考不能在 CDATA 區段內運作。當它遇到結尾的『]]>』時，剖析器會停止報告並回到正常的剖析，這也能使用在 HTML 文件中。使用方法為︰

以下面商品資料文件 PDI0120080331195202.xml 為範例，其中 PDI01DOC.DocContent.Item.ProductUrl 為商品頁面的網址，內容包含了 & 字元；PDI01DOC.DocContent.Item.ProductDesc 為商品說明，內容包含了大量 HTML 標籤。所以這兩個內容我們都用使用了 CDATA 區段包起來，如此 XML 剖析器就能正常剖析了。

PDI0120080331195202.xml

<?xml version="1.0" encoding="utf-8"?>
 <PDI01DOC>
 	<DocHead>
 		<DocNo>PDI0120080331195202</DocNo>
 		<ItemCounts>2</ItemCounts>
 	</DocHead>
 	<DocContent>
 		<Item>
 			<ProductId>DGAD0I-A16867929-000</ProductId>
 			<ProductName>SONY Cyber-Shot T2 (公司貨)</ProductName>
 			<ProductUrl><![CDATA[http://shopping.pchome.com.tw/?mod=item&func=exhibit&IT_NO=ABAL1S-A17289270]]></ProductUrl>
 			<ProductPrice>11980</ProductPrice>
 			<ProductDesc><![CDATA[■ 810萬高品質畫素 ■ 2.7吋觸控式LCD寬螢幕 ■ 3倍光學變焦 ■ 4GB 內置記憶體 ■ 超強1cm微距近拍 ■ 先進的臉部偵測技術 ■ ISO 3200 高感光能力 ■ 雙重防手震技術 ■ 創新的微笑快門功能 ■ 原廠公司貨 原廠18個月保固 ■本商品為精裝包組合：內含Sony 原廠時尚相機包（LCS-TWE/P）及觸控筆掛飾各乙個 ㊣獨家送您貼心好禮：USB空氣清靜機]]></ProductDesc>
 		</Item>
 		<Item>
 			<ProductId>ABAL1Z-A17679297</ProductId>
 			<ProductName>Panasonic DMC-FX33(公司貨)</ProductName>
 			<ProductUrl><![CDATA[http://shopping.pchome.com.tw/?mod=item&func=exhibit&IT_NO=ABAL1Z-A17679297]]></ProductUrl>
 			<ProductPrice>9990</ProductPrice>
 			<ProductDesc><![CDATA[■810萬畫素 ■3.6倍光學變焦 ■德國徠卡鏡頭 ■光學防手震 ■ISO 6400高感光 ■2.5吋大螢幕 ■28mm廣角鏡頭 ■iA 智能自動模式 ■整合雙重防震 ■臉部對焦及自動場景選擇功能 ■送4G記憶卡+專用鋰電池+讀卡機+清潔組+保護貼+原廠皮套]]></ProductDesc>
 		</Item>
 	</DocContent>
 </PDI01DOC>

[Firefox Add-ons] ViewSourceWith - 自訂文字編輯器來檢視頁面原始碼

2008-03-29T13:02:00.000+08:00

之前有介紹過 JSView 可以用來檢視網頁外連的 CSS 及 JavaScript 檔案，最近又發現一個更好用的擴充元件 ViewSourceWith。

ViewSourceWith 除了與 JSView 有著檢視網頁外連的 CSS 及 JavaScript 檔案功能外，還可以使用自訂的文字編輯器來檢視原始碼，也支援快捷鍵的設定，是不是比 JSView 用 Firefox 本身的檢視原始碼工具開啟來的更方便使用。

ViewSourceWith

HTTP_HOST 及 SERVER_NAME 的區別

2008-03-26T12:55:00.000+08:00

當每次請求 HTTP_HOST 及 SERVER_NAME 的值總是一樣的，有沒有想過這兩個變數有什麼區別呢？

無意間在 Microsoft 針對 Microsoft Windows Server 2003 的一篇技術文件上提到了相關說明，以下為該說明概要︰

在您安裝此 Service Pack 或套用此 Hotfix，必須在網站上設定 UseHostName 屬性或 SetHostName 屬性您是否要傳送之要求一個替代主機名稱。依預設值，與 HTTP_HOST 變數相同的值是傳送 SERVER_NAME 變數中。

注意︰如果您啟用一項下列設定值， IIS 通常會先將為 SERVER_NAME 變數的替代名稱。

為 UseHostName 屬性資料型別是布林值。將 UseHostName 屬性指示 IIS 設定為永遠以完整電腦名稱取代 SERVER_NAME 變數。

您可以選擇性地，設定 SetHostName 屬性。為 SetHostName 屬性資料型別是字串。如果您必須指定主機名稱與電腦名稱 (而不是使用 SetHostName 屬性。 SetHostName 屬性會假設您要此替代主機名稱。 SetHostName 屬性會導致 IIS 設定成忽略 UseHostName 設定。您沒有以設定 UseHostName 屬性如果 SetHostName 屬性是存在。

Web 伺服器管理員可能會使用 Adsutil . vbs 工具來修改 UseHostName Metabase 屬性和 SetHostName Metabase 屬性。

資料來源︰Microsoft 技術資源服務：IP 位址會顯露在 IIS 6.0 中的 TCP 標頭中的 Content - 位置欄位

是不是覺得這段說明很艱深難懂，沒關係，因為您可能跟我一樣只是個應用程式設計者，而非 Server 管理者。其實只要注意幾個關鍵字不難理解，HTTP_HOST 及 SERVER_NAME 在某些情況下值是不相同的。

在 Microsoft Windows Server 2003 當 UseHostName 為 true，或者 SetHostName 設定了主機名稱，那麼 SERVER_NAME 的值將會是完整電腦名稱。

然而 HTTP_HOST 可以請求出非 80 port 的 SERVER_PORT，簡單來說在一般的情況下 HTTP_HOST 等於『SERVER_NAME:SERVER_PORT』。

以下在 ColdFusion 測試的結果，測試環境 ColdFusion 安裝在預設的 8500 port，請求的網址為 http://127.0.0.1:8500/。CGI 結構變數 Dump 出來結果如下︰

HTTP_HOST = 127.0.0.1:8500
SERVER_NAME = 127.0.0.1
SERVER_PORT = 8500

在 ColdFusion 的 CGI 結構變數相當於 PHP 的 $_SERVER 變數。

Google Notebook 筆記

2008-03-25T10:48:00.005+08:00

當您在茫茫網海中，好不容易發現到一篇好文章，或是一篇很有用的資訊，這時您會做什麼動作呢？沒錯，就是加入瀏覽器的書籤。時間久了問題也來了，書籤怎麼越來越多也越來越亂，更糟糕的是有些鏈結不知什麼時候己經失效了，辛苦蒐集來的成果就這樣沒了。

還是您要辛苦一點自已用 Word 或是記事本整理起來呢？這除了很辛苦之外，如果您要隨時翻閱筆記，那麼請準備一個隨身碟，需要的時候再從一推檔案中慢慢翻吧！

Google 筆記是以上問題的很好解決方案，您可以將網路上想要保存下來的資訊整理在 Google 筆記內，針對不同主題建立多個筆記本或是將單一筆記本分為數個區段（章節），讓所有筆記保持井然有序的狀態。並且可以保留來源網址、原始內容，也可以自己加入註解說明。當您需要翻閱時，除了透過井然有序的筆記本及章節翻閱之外，更可以透過『搜尋我的筆記本』做關鍵字搜尋。

Google 這項服務也秉持著資源共享的原則，可以邀請您的朋友在筆記本上一起合作。或是將您的筆記本設為公開筆記本，Google 會為您發佈的筆記本指定一個唯一的網址，就可以和網路上的任何人分享筆記本。

Google 筆記本還提供了擴充套件，支援 Firefox、Internet Explorer，您可以使用『迷你 Google 筆記本』，存取 Google 筆記本及其所有功能，而不需離開目前所在的網頁，將您需要的內容反白顯示並按一下迷你 Google 筆記本上的『擷取』按鈕，快速將網頁內容、影像、文字和連結，剪輯內容直接加入筆記本中。

下載安裝 Google 筆記本擴充套件

取消 Windows 的快取縮圖 (Thumb.db)

2008-03-25T09:37:00.002+08:00

相信大家對於「Thumbs.db」這個檔案一定十分困擾，這是在 Windows 作業系統，當你在檔案總管下，選「檢視」功能表下的「縮圖」功能瀏覽圖片時，Windows 會在目前所在的圖片資料夾下，自動產生「Thumbs.db」這個檔案（預設為開啟）。這個檔案是由系統產生，原意是將圖片縮圖做成索引快取，以加速在這個資料夾裡的圖片讀取速度，讓下一次瀏覽時直接可以看到檔案的縮圖。

但是當你的資料越大這個檔案也相對增大而佔用硬碟空間。如果直接把它刪了，下次再用「縮圖」功能時，Windows 還是會自動再產生一個新的「Thumbs.db」檔案。有一定發展秀圖軟體 (例如 ACDSee)，大多已經不使用這個由系統產生的檔案，而是自行在其他特定的目錄建立專屬格式的資料庫檔案，而不會在每個資料夾下面再另行產生「Thumbs.db」這個檔案。現在讓我們調整 Windows 的設定來禁止在所有的圖片資料夾中自動生成「Thumbs.db」檔案。

1. 開啟「Windows 檔案總管」視窗，依序按下「工具」/「資料夾選項」，準備設定資料夾的組態。

2. 出現「資料夾選項」對話視窗，先切換到「檢視」活頁標籤，把「檔案和資料夾」選項內之「不要快取縮圖」打勾，最後按下「確定」。

經過上面的設定，以後所有的文件夾將不會自動生成「Thumbs.db」檔案了，但原來已經生成的許多「Thumbs.db」檔案不會自動消失，必須手工將其刪除。~~顯然，一個一個地刪除非常麻煩，所以建議大家可以利用 Windows 的搜尋功能將它們一網打盡~~。

利用 DOS 命令刪除所有 Thumbs.db︰

del C:\Thumbs.db /f /s /q /a

強制刪除 C 磁碟下所有目錄內（包括 C 磁碟本身）的 Thumbs.db 檔並且不提示是否刪除。

參數含義：

/f 強制刪除唯讀檔案。
/q 不提示確認刪除。
/s 從當前目錄及其所有子目錄中刪除指定檔。顯示正在被刪除的檔案名。
/a 按照屬性來刪除。

資料來源︰網路報馬仔

微軟網路硬碟 Windows Live SkyDrive 每帳號 25GB

2008-03-20T08:36:00.002+08:00

微軟日前在全球 38 個地區推出 Windows Live SkyDrive 網路硬碟的新服務，每個帳號都有 ~~5GB~~ 25GB 大容量，每次傳輸可接受最高 50MB 的檔案。如果您有 MSN 帳號就可以直接登入使用不需要再重新申請，以後有檔案資料想與好朋友分享就不會不知道該怎麼辦了。

這服務提供三種不同模式，「個人模式」受 Windows Live 密碼保護，只有自己可以使用；「分享模式」可提供特定對象分享檔案或資料夾內容；「共享模式」則是公開在網路上供人自由存取。

Windows Live SkyDrive

PHP - JSON Functions

2008-03-17T19:48:00.002+08:00

之前曾介紹過 JSON 文件資料，以往在 PHP4 的時候我們必須去 JSON 下載 Class 來使用。不過在 PHP5 已經將 JSON Functions 包含在裡面了。

分別為 json_encode 及 json_decode 兩個函式，用法如下。

json_encode：

上例將輸出：

json_decode：

上例將輸出：

PHP - file_put_contents

2008-03-17T19:17:00.000+08:00

file_get_contents 大家應該不會陌生，這是在 PHP4 就有的函式，用來讀取文件檔案的內容。

file_put_contents 剛好相反，是將一段內容寫入檔案裡，但要注意這是 PHP5 才有的函式，之前的版本無法使用，以下是個小範例︰

其實上面的寫法就相當於︰

上線前請先壓縮並優化你的 JavaScript 檔案

2008-03-17T18:54:00.001+08:00

為了讓網站更符合使用者介面，AJAX 技術使得 javascript 被大量使用，但載入大量的 javascript 外部檔案（.js 文件檔）對於頁面顯示的速度影響甚多，上線前壓縮並優化 JavaScript 檔案，將可以改善這樣的情況，以下幾個做法提供給大家參考。

1. 合併 .js 文件檔

主要目的在於減少使用 <script> 標籤數量，當瀏覽器遇到一個這個標籤，就要啟動 javascript 分析引擎。這是一個很大的開銷，理想情況下是一個頁面只進行一次分析，所以儘可能合併 .js 文件檔，來改善這個情形。

2. 縮小及模糊化 .js 文件檔

縮小的意思就是刪除不必要的任何東西，如註解等；模糊化是更進一步的做法，主要是重新命名，重新安排功能和變數，以便它們的名字更短，模糊化不但可以使檔案更小，更是通常用來將 javascript 原始碼保密的一種方式。

JSMin 是一個對 javascript 縮小化非常好的工具，另外一個模糊化的工具就是 Packer，這兩個都是免費且很好用的工具。個人建議是先用 JSMin 將所有 .js 文件檔縮小合併，在使用 Packer 做模糊化的工作。以下有兩個範例供參考︰

jsMin.php︰

jsPacker.php︰

以上兩段程式的動作，就是將 script_1.js、script_2.js、script_3.js，先透過 JSMin 縮小合併產生 scriptMin.js，再用 Packer 模糊化產生 scriptPacker.js 這就是我們最終要的檔案。要注意的是在寫 js 程式時必須養成習慣，每個 function 結束後一定要有分號『;』，每個語句後面如果不是大括號括起來的，也一定要有分號。否則經過 Packer 模糊化後將無法正常執行。

在之前的一個專案中，所有 .js 文件檔共有 13 個檔案 126KB，經過 JSMin 縮小合併後成為 1 個檔案 75KB，最後 Packer 所產生的檔案只有 45KB，如此 .js 文件檔縮小為原本的 36% 可見有多驚人。

3. 將 .js 文件檔放在頁面的底部

由於 .js 文件檔的性質可以改變頁面的任何東西，當瀏覽器遇到一個 <script> 標籤時，它會妨礙整個下載。知道一個 script 要下載分析了，便會優先下載 .js 文件檔進行分析完才會開始顯示網頁，在這之前使用者就只會看到白白的一片畫面。所以盡可能將 <script> 標籤擺在頁面的最底部 </body> 之前，如此便可讓使用者先看到部分畫面，而非一片空白等待著。

ColdFusion 取得指定日期當週的週日 ~ 週六

2008-03-14T02:17:00.001+08:00

執行結果︰

ColdFusion 真實 List 字串內容

2008-03-14T02:00:00.002+08:00

字串清單組合情況會有
1. : a,b,c,,,d
2. : ,a,b,c,,,d
3. : a,b,c,,,d,
4. : ,a,b,c,,,d,

以下這個自定函數都可以解決，會將空的內容以 NULL 字串取代來得到真實的清單長度
1. : a,b,c,,,d ==> a,b,c,NULL,NULL,d
2. : ,a,b,c,,,d ==> NULL,a,b,c,NULL,NULL,d
3. : a,b,c,,,d, ==> a,b,c,NULL,NULL,d,NULL
4. : ,a,b,c,,,d, ==> NULL,a,b,c,NULL,NULL,d,NULL

<cffunction name="listWithNullsTolist" access="remote" displayname="真實 List 字串內容" hint="回傳 List 字串"> <cfargument name="sourceList" required="true" displayname="原始 List 字串"> <cfargument name="null_var" default="NULL" displayname="元素空值取代字串"> <cfargument name="delim" default="," displayname="原始 List 字串的分隔符號"> <cfset delim_len = Len(delim)> <cfif Left(sourceList,delim_len) EQ delim> <cfset sourceList = null_var & sourceList> </cfif> <cfif Right(sourceList,delim_len) EQ delim> <cfset sourceList = sourceList & null_var> </cfif> <cfloop condition="Find(delim & delim,sourceList) NEQ 0"> <cfset sourceList = Replace(sourceList,delim & delim,delim & null_var & delim)> </cfloop> <cfreturn sourceList> </cffunction> <cfoutput> 1. : a,b,c,,,d == > #listWithNullsTolist("a,b,c,,,d")# 2. : ,a,b,c,,,d == > #listWithNullsTolist(",a,b,c,,,d")# 3. : a,b,c,,,d, == > #listWithNullsTolist("a,b,c,,,d,")# 4. : ,a,b,c,,,d, == > #listWithNullsTolist(",a,b,c,,,d,")# </cfoutput>

執行結果︰

ColdFusion 連結 MySQL 解決方案

2008-03-14T01:05:00.003+08:00

MySQL 目前已出道 5.x 版本，但在 ColdFusion MX 7 使用的 DB Driver 還是 MySQL(3.x) 所以對 MySQL 連線上都會出現問題，好久沒用 ColdFusion 不知道現在的 ColdFusion MX 8 有沒有支援到 MySQL 5.x。如果您 ColdFusion 的 DB Driver 還是 MySQL(3.x)，以下有個解決方案。

自 ColdFusion MX 它的底層就是 JAVA，所以我們可以透過 JDBC 來與 MySQL 做連結，方法如下︰

1. 首先裝好 MySQL，建議使用 4.1 版以上。

2. 加一個新的使用者帳號，不要使用 root。

3. 下載 MySQL 最新版的 JDBC Driver，目前版本為 5.1。

4. 解開壓縮檔將 jar 檔放到 C:/CFusionMX7/wwwroot/WEB-INF/lib/，可能需要重新啟動 ColdFusion。

4. 在 ColdFusion Administrator 新增 Data Sources，Driver 選擇 other，內容設定如下。

JDBC URL︰jdbc:mysql://localhost:3306/(MySQL Data Base Nane)

Driver Class︰com.mysql.jdbc.Driver

Driver Name︰com.mysql.jdbc.Driver

Username︰MySQL 帳號

Password︰MySQL 密碼

以上資料感謝好友 Willy 大師提供

ColdFusion + Image MagicK 製作圖片驗證碼

2008-03-13T18:14:00.001+08:00

在很多網站加入會員或登入會員時，都會要求依圖片顯示輸入驗證碼的動作，以防止被機器人惡意攻擊。

以下提供一個 ColdFusion 利用 Image MagicK 製作圖片驗證的範例。

authimg.cfm︰產生驗證碼圖片

<cfscript>
 /**
 * Generates a password the length you specify.
 *
 * @param numberOfCharacters Lengh for the generated password.
 * @return Returns a string.
 * @author Tony Blackmon (fluid@sc.rr.com)
 * @version 1, April 25, 2002
 */
 function generatePassword(numberofCharacters) {
 var placeCharacter = "";
 var currentPlace=0;
 var group=0;
 var subGroup=0;
 
 for(currentPlace=1; currentPlace lte numberofCharacters; currentPlace = currentPlace+1) {
 group = randRange(1,4);
 switch(group) {
 case "1":
 subGroup = rand();
 switch(subGroup) {
 case "0":
 placeCharacter = placeCharacter & chr(randRange(33,46));
 break;
 case "1":
 placeCharacter = placeCharacter & chr(randRange(58,64));
 break;
 }
 case "2":
 placeCharacter = placeCharacter & chr(randRange(97,122));
 break;
 case "3":
 placeCharacter = placeCharacter & chr(randRange(65,90));
 break;
 case "4":
 placeCharacter = placeCharacter & chr(randRange(48,57));
 break;
 }
 }
 return placeCharacter;
 }
 </cfscript>
 
 
 <cfset img_file = "D:/authimg.gif">
 
 
 <cfset __auth_xyz_123__ = generatePassword(5)>
 <cfcookie name="__auth_xyz_123__" value="#__auth_xyz_123__#" expires="1">
 
 <cfexecute name = 'C:/ImageMagick/convert' 
 			arguments = '-background lightblue -fill blue -pointsize 25 -font Utopia-Italic label:"#__auth_xyz_123__#" #img_file#' 
 			timeout = '200'>
 </cfexecute>
 <cfcontent type='image/gif' file="#img_file#" deletefile="yes">

authimg_check.cfm︰驗證碼使用測試

Dot More 內文式廣告技術

2008-02-29T22:26:00.001+08:00

Google AdSense 及 Yahoo!奇摩關鍵字廣告大家應該不陌生，最近無意中發現了新的網路廣告行銷的形式，由傑思媒體(JS-media) 所開發的 Dot More 內文式廣告技術，能將您的產品關鍵文字，透過內文比對在文章中搜尋關鍵字，並形成綠色標記連結，當瀏覽者對文字區塊產生興趣時，即可透過指標與廣告互動，全方位支援多媒體影音、圖文格式，完整呈現您的廣告商品。

目前與許多入口網站、新聞網等大型網站合作，或許大家在這些網站瀏覽文章時可以看到他們的廣告。未來不知道會不會如同 Google AdSense，開放讓個人直接線上申請，在自己的網站或 Blog，加上 Dot More 內文式廣告來賺取廣告費。

Din. Ben. Don! 訂便當管理系統

2008-02-29T22:00:00.003+08:00

你們部門、夥伴是不是天天都要訂便當、訂下午茶，每天在那裡 msn 來 msn 去，算錢繳錢找錢、東記一塊西記一塊，然後搞得一踏糊塗？天啊！整天就毀在這些啊哩啊咂的瑣事上，有了這個訂便管理系統，以後可以輕輕鬆鬆完成這個麻煩事囉！

這是由一個網路工程師自行開發的系統，功能強大而且考慮的非常周全。

17Saving - Excel 電子家庭記帳簿

2008-02-29T19:53:00.006+08:00

這是一個 Excel 電子家庭記帳簿，由廖聖哲(雙胞胎拔拔)(AntonyLiaw) 用 Excel 所開發，功能非常強大而且持續改版及專屬討論區，有記帳習慣卻沒有適合工具的人可以下載使用看看，目前版本為 v2.20I。

17Saving - 一起省

用對記帳工具　小夫妻年省25萬

記帳的威力有多大？有對夫妻靠記帳1年省下25萬元，他們怎麼做到的？一起從記帳達人廖聖哲身上找答案。

雖然記帳為理財成功的第一步，但多數人提起它，卻總是搖頭，「記帳真麻煩，食衣住行樣樣要記，哪裡回想得了那麼多瑣事？」「天天記帳，支出卻愈來愈多，根本省不了錢！」任職於出版業的林美心，也曾經如此。

但去年，她在朋友的推薦下，到「17Saving‧一起省」（http://www.17saving.idv.tw/）網站下載了「2007電子記帳本」軟體，重新啟動記帳習慣。

「哇！這套軟體有夠Smart，簡直就是你的私人會計師。只要輸入消費金額，它就會自動幫你分類到不同的消費細項中，錢花到哪裡去？一目了然。你還可以設定各種消費類別的預算上限，只要你的消費金額快到警戒線，它還會自動跳出警示標記！」

林美心這才發現，「不是記帳麻煩，是沒找對工具」。她拋棄了傳統紙本、更跟EXCEL軟體說拜拜，到處跟人推薦這套軟體。「原來過去自己都在記流水帳，沒法把支出分類，當然省不了錢」。像她這樣的人，去年底以來已經有30萬人，她們搶著下載這套「2008電子記帳本」軟體，這還不含網友之間互相流傳的數量。

發明這套軟體的「記帳達人」廖聖哲，原本只想把自己設計的軟體放到網路上，交流記帳心得，沒想到卻廣受歡迎。而他自己也因為聰明的記帳法，年省25萬元，讓家庭財務撲滿年年長大，更將在3年內買下第2棟房子。

引用︰Smart智富月刊-封面故事-用對記帳工具　小夫妻年省25萬
更多報導︰Smart智富月刊-第114期-用對記帳工具　小夫妻年省25萬
相關版權為 Smart 智富網站所有

Image Magick - 強大的圖像處理工具包

2008-02-28T00:34:00.005+08:00

Image Magick 是一個強大的圖像處理工具包。它提供了幾個非常方便的命令行命令︰display、animate、import、montage、mogrify、identify 等，可以進行圖像的顯示、縮放、旋轉、調色、加框、加注釋等，還能製作GIF動畫，圖像索引，能自動生成圖像。

Image MagicK

安裝後您可以利用，附屬應用程式 >> 命令提示字元直接以指令的方式呼叫執行。如下︰

縮圖
C:/ImageMagick/convert -geometry 100x100 D:/input.jpg D:/output.jpg

取得圖片寬
C:/ImageMagick/identify -format "%w" D:/input.jpg

取得圖片高
C:/ImageMagick/identify -format "%h" D:/input.jpg

我們更可以利用網路應用程式如 PHP、ColdFusion 等呼叫使用。

PHP 範例︰

ColdFusion 範例︰

更多 Image Magick 使用方法
http://www.ibm.com/developerworks/library/l-graf/
http://www.ibm.com/developerworks/library/l-graf2/

點新春蚵仔麵線

2008-01-30T15:07:00.004+08:00

這是我從小吃到大的一家麵線，在南港算是一家老店了。店裡賣的東西很單純只有兩種，蚵仔麵線大碗 50 元、蚵仔麵線小碗 35 元。味道很棒而且裡面的蚵仔跟大腸料很多，喜歡吃蚵仔麵線的人一定特地來南港吃這家的麵線，強力推薦。

地址︰台北市南港區興華路 92 號

營業時間：
平日 7:00 ~ 11:30，15:00 ~ 18:30
週六及假日 7:30 ~ 11:30

店家位置﹙Google Map﹚

哲生的童年回憶 - 80 年代卡通主題曲

2008-01-11T10:43:00.000+08:00

飛呀! 飛呀! 小飛俠
在那天空邊緣拼命的飛翔
..........
無敵鐵金鋼無敵鐵金鋼無敵鐵金鋼
鐵金鋼鐵金鋼無敵鐵金鋼
..........
有一個孩子名字叫湯姆
他是一個聰明勇敢的孩子
..........
有一個女孩叫甜甜從小生長在孤兒院
還有許多小朋友相親相愛又相憐
..........
有一個小蜜蜂飛到西又飛到東
嗡嗡嗡嗡嗡嗡嗡嗡
..........
我們是恐龍救生隊架著萬能號飛啊飛
我們有新式的裝備還有勇氣和智慧
..........
喬琪姑娘心地最善良
快快樂樂徜徉青青草原上
..........
有一位堅強好兒童　他的名字叫龍龍
有一條聰明的小狗　牠的名字叫阿忠
..........
霹靂星球爆炸了
霹靂貓乘太空船逃出來逃出來
..........
我做了一個夢我去遊歷
經歷多麼危險又有趣小獅王和機器人和稻草人
..........
小英趕著一輛車穿過森林渡過小河
小英帶著一隻狗走過大街越過村落
..........
勇敢的孩子乘風破浪去找夢裡的金銀島
在那夢裡的世界充滿希望
..........

各位六年級生的朋友是否對以上的歌詞還有映象，在這個網站裡收入了這些一直存在你記憶深處的卡通歌曲，不但有完整歌詞，還可以線上收聽，更有高品質的 wma 檔案可以下載，使用 Nero 燒錄軟體，便能將 wma 格式的歌曲燒錄成音樂 CD。

哲生的童年回憶 Jason's Childhood Memory

六年級生的回憶 - 北海小英雄

2008-01-11T10:15:00.000+08:00

北海小英雄故事背景為布蘭村的水手們，船長為黑龍船長，他有一個兒子叫做小威，有一次小威偷偷的跟出海，因而展開一連串的冒險旅行，布蘭村的選手都是有勇無謀，而小威卻是聰明過人，常常運用智慧幫助水手們渡過難關，小威最怕黃鼠狼，故事的結局是結合特洛伊戰爭的木馬屠城記。

台視第 1 次首播：民國 67 年 05 月 16 日 ~ 民國 67 年 08 月 08 日

台視第 2 次首播：民國 71 年 01 月 27 日 ~ 民國 71 年 07 月 23 日每星期五

台視第 3 次重播：民國 79 年 05 月 25 日 ~ 民國 80 年 05 月 24 日每週五下午五點 (重新編定主題曲)

TVBS有重播過

還記得小威的經典動作嗎，摸摸鼻子彈個手指，沒幾下就以萬花筒千變萬化之姿驚現好點子。

主題曲︰『北海小英雄』
詞︰鄧鎮湘
曲︰汪石泉

我愛北海小英雄
四海逞威風
他不怕那風和浪
航海樂無窮
他敢冒險不畏苦和難
他有正義信心最強
他勇敢向前勇敢向前
要把理想來實現
我愛北海小英雄
北極稱英雄
他不怕那風和浪
航海樂無窮！
勇往向前走

Get this widget

Track details

eSnips Social DNA

延伸閱讀︰
北海小英雄 - 人物篇
北海小英雄 - 維京船篇
連結夢與現實的哲生原力 - 從「北海小英雄」看維京文化
Blog Jas9 - 我愛北海小英雄

六年級生的回憶 - 藍色小精靈 Smurf

2008-01-11T09:23:00.000+08:00

還記得『藍色小精靈』及『賈不妙』嗎？這個民國 73 年至 75 年間在華視播出的卡通，為無數的六年級生寫下一段可愛的回憶。

作者 Peyo (?~1992)，他讓小精靈 Smurf 在 1958 年，第一次呈現在大家面前，其成為家喻戶曉的大明星。

主題曲︰『藍色小精靈』
詞/曲︰鄧鎮湘

小精靈小精靈
小小的世界上美麗的小村莊
住一群可愛藍色小精靈
戴一頂小白帽臉上發藍光
天真活潑快樂安祥
愛好和平聰明機警不怕苦和難
團結合作戰勝敵人個個都勇敢
小精靈小精靈
自由自在幸福安康
快樂的歌聲傳播四方
啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦
啦拉啦啦啦啦啦啦拉搭啦啦啦啦拉搭啦拉

Get this widget

Track details

eSnips Social DNA

還記得那些可愛的主要角色嗎？

鬍子老爹（Papa Smurf）

你可以從他的白鬍子與身上穿的紅褲子、頭上戴的紅帽子，輕易地分辨出這位村長老爹。老爹的年紀不少於 542 歲，卻也不會超過這個數字，因為小精靈是不會變老的。他常運用智慧去提醒別人而非直接命令別人該做什麼；此外，他也會挺身援救那些身陷險境的年輕小精靈們。對了，他同時也是一位相當厲害的煉丹術士喔！

小美人（Smurfette）

小美人是邪惡的巫師賈不妙（Gargamel）用法術所創造出來的藍色小精靈，她最初的任務是臥底在小精靈的村莊裡，挑撥離間、製造麻煩。後來，村長老爹對她施了魔法，將她變成了一位人見人愛的嫵媚小精靈，而她也成為小村莊裡罕見的女精靈。

小聰明（Brainy）

他是一位用嚴肅的態度看待所有事的藍色小精靈。小聰明自認是一位醒世者，他認為老爹所說的每件事都必須謹慎遵守，結果弄得每個小精靈都得忍耐著他的囉唆。表面上，他致力於解決麻煩，但事實上，聰明反被聰明誤，他才是那個不斷引起麻煩的人。

小搗蛋（Jokey）

小搗蛋隨時隨地都在想著如何惡整別人，譬如，他常把會爆炸的禮盒送給其他的小精靈，而他的快樂總是建築在別人的痛苦上。由於小搗蛋的惡作劇點子有如湧泉般源源不絕，因此經常搞得大家忍不住發脾氣，不過有時候他也會不小心反整到自己。

小牢騷（Grouchy）

不管別人說些什麼，小牢騷總是滿腹的不滿意。他總是喃喃自語地抱怨著每件事，而且充滿了消極的人生觀。其實小牢騷並不壞，他只是因為生性軟弱，所以只好用不斷的牢騷來掩飾內心的脆弱。他暗戀著小美人，不過他非常討厭別人發現這件事。

小廚師（Cook Smurf）

你絕不會認錯他，因為他穿戴著獨一無二的廚師高帽和圍裙。他住的地方總會飄出令人食指大動的香味，只要走進他家，滿桌的熱湯、鬆餅、餡餅和甜點，保證會讓你想大快朵頤。他是一個美食主義者，也是個名符其實的天才小廚師。

小貪吃（Greedy）

吃，吃，吃！對小貪吃來說，不管是沙士、熱湯、乳酪，還是水果，每樣東西都是可口的。不過他真正喜歡吃的，還是他時常從小廚師家裡偷來的美味甜點。小貪吃的座右銘是：「我們應該要為了吃而活著，而不是為了活著而吃。（One should live to smurf, and not smurf to live.）」

小樂師（Harmony）

小樂師擁有偉大音樂家的靈魂，但是缺乏天分。他在小精靈交響樂團裡吹奏小號，但是從他的小號所傳出的卻總是五音不全的樂音。所以想要打個盹的藍色小精靈，必須要自備一副耳塞才有辦法入睡。

小詩人（Poet Smurf）

一手持著一隻鵝毛筆，另一手拿著一張羊皮紙，是小詩人的標準形象，他幾乎把所有的時間都花在寫詩上面。小詩人生性浪漫，超喜歡做白日夢，所以經常會身陷危機而不自覺。

小自戀（Vanity Smurf）

手上拿著鏡子，帽子上插著一朵花，小自戀只崇拜他自己。他認為自己是村莊裡最漂亮、最聰明、最有人緣的藍色小精靈。小自戀最愛跟小美人談論流行與時尚。我想，若是沒有小美人的出現，村莊裡的女性角色應該就非小自戀莫屬了，只可惜這部卡通誕生於保守的年代裡，所以身處在這個性向正常的純男性社群中，小自戀就只有顧影自憐的份了。

小鐵匠（Handy）

只要有任何東西需要有人修理，小鐵匠一定是最佳的人選。他不僅是個優秀的維修師傅，同時也是一個創意十足的發明家；靈感湧現的時候，他就會立刻拿起夾在耳後的鉛筆畫起藍圖來。小鐵匠製造過的東西無奇不有，包括了機器人、小火車，甚至是造雨的機器。

小農夫（Farmer Smurf）

小農夫是個務實的藍色小精靈，他與生性浪漫的小詩人，恰巧形成強烈的對比。小農夫在生活上總是難以得到滿足，舉例來說，當他需要一點雨來幫助他所種植的蔬菜可以順利生長時，卻總是碰到豔陽高照的好天氣，反之亦然。另外，他雖不善於言辭，卻是個施肥高手，生產美味的蔬菜和水果是他的專長。

小懶蟲（Lazy Smurf）

無論任何時候，小懶蟲總是想要睡覺；當他早上痛苦地醒來時，他已經開始期待著晚上可以上床睡覺的那一刻，因此，枕頭是他的最愛。雖然他並非遊手好閒之徒，但是無論多簡單的工作都會讓他覺得很累。不過，小懶蟲的懶惰個性並不會干擾到其他的小精靈，除了小聰明以外。小聰明常會跟在小懶蟲的後面，以便在他打瞌睡的時候把他叫醒。

小力士（Hefty）

小力士手臂上的心型刺青是個讓人容易辨識的標記，他隨時隨地都在鍛鍊自己的體魄，是村莊裡最強壯的藍色小精靈。小力士不僅是個運動健將，還是小精靈奧林匹克協會的成員之一。每當村子裡有困難的事情需要解決時，總都會找他出面幫忙；因此，即使他是一個大老粗，卻仍然得到大家的喜愛。

賈不妙（Gargamel）

賈不妙是一個令人討厭的男巫，居住在森林邊緣的一座破爛房屋裡，他既邪惡又狡猾，而且還是個剛愎自用的巫師。他十分討厭藍色小精靈而且想盡辦法要抓到他們，但是小精靈們總是能夠以智慧取勝而順利脫逃。每次遇到挫折後，賈不妙總會大聲發誓要一雪前恥，但卻從沒實現過。

大笨貓（Azrael）

這隻齷齪的壞貓是賈不妙飼養的寵物，牠跟隨著賈不妙，希望有一天主人可以抓到一隻美味的藍色小精靈讓牠好好飽餐一頓，但卻總是白忙一場、希望落空。大笨貓是一隻又壞又笨的動物，真是有其主必有其貓呀！

以上資料及圖片來源︰
The Smurfs
瑞典 ♡ 巧克力的瑞典天空♡
哲生的童年回憶 Jason's Childhood Memory

XML/SWF Charts - Flash 繪製圖表

2008-01-11T06:30:00.003+08:00

在網頁上常常需要顯示圖表資訊，例如投票結果，如果只用數字來呈現那就遜斃了。這裡提供了一個好用且免費的組件來繪製 Flash 圖表，並且可以產生不同類型的圖表，例如；柱狀圖、圓餅圖、曲線圖等等。

XML/SWF Charts

XML/SWF Charts 是一個由 SWF (Flash) 在 Client 端繪圖的組件。Server 只要準備 XML 格式的資料，圖的部份由 Flash 幫你在 Client 端繪畫起來。省了 Server 的 Loading，也沒有暫存檔的產生，而且是 Flash 做的，還可以有動畫特效，簡單、好用又美觀！

這裡還提供了支援 PHP 的組件，但是個人認為 XML 比較實用，所以對 PHP/SWF Charts 沒有做太多的研究。

PHP/SWF Charts

使用上很簡單，首先下載 XML/SWF Charts 的 library，解開後有一個 charts.swf 和 charts_library 的資料夾。把它們放到 web 可以 access 得到的地方。在 html 或是動態網頁檔加入以下的 flash object︰

其中 src 指向 charts.swf 的所在位置，library_path=charts_library 為 charts_library 資料夾的位置，xml_source=sample.xml 為 XML 資料路徑，由一個固定的 XML 格式表示圖表的原始資料。以下列的圖表為列：

	2001	2002	2003	2004
Region A	5	10	30	63
Region B	100	20	65	55
Region C	56	21	5	90

那麼 XML 如下：

就可以產生出下面的圖表︰

其中 <chart_type>column</chart_type> 標籤決定繪出圖表的類型，請參閱 <chart_type>。

至於如果要呈現中文字請加上下面這兩個標籤，主要目的是將字型改為 system，預設字行為 Arial。

其他還有很多控制的標籤及參數請參閱 Tutorial 及 Reference。

以下是我自己測試的兩個範例圖表︰

XML_SWF_Charts.html

<table border="1" cellspacing="2" cellpadding="0" align="center"> <tr> <td> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="550" height="450" id="charts" ALIGN=""> <PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample_1.xml"> <PARAM NAME=quality VALUE="high"> <PARAM NAME=bgcolor VALUE="#4C5E6F"> quality=high bgcolor="#4C5E6F" WIDTH="550" HEIGHT="450" NAME="charts" ALIGN="" swLiveConnect="true" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> </td> </tr> <tr> <td> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="550" height="450" id="charts" ALIGN=""> <PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample_2.xml"> <PARAM NAME=quality VALUE="high"> <PARAM NAME=bgcolor VALUE="#6666AA"> quality=high bgcolor="#6666AA" WIDTH="550" HEIGHT="450" NAME="charts" ALIGN="" swLiveConnect="true" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> </td> </tr> </table>

sample_1.xml

<?xml version="1.0" encoding="utf-8"?> <chart> <chart_type>bar</chart_type> <legend_label font='system' size='14' /> <legend_rect x='10' y='10' width='530' height='0' margin='5' fill_color='FFFFFF' fill_alpha='30' line_color='000000' line_alpha='0' line_thickness='1' /> <legend_transition type='slide_left' delay='1' duration='1' /> <axis_category font='system' size='14' /> <chart_transition type='scale' delay='1' duration='1' order='series' /> <chart_value prefix='' suffix='' decimals='0' decimal_char='.' separator='' position='center' hide_zero='false' as_percentage='false' font='arial' bold='true' size='15' color='FFFFFF' alpha='65' /> <series_color> <color>790000</color> <color>7B2D00</color> <color>7D4800</color> <color>827A00</color> </series_color> <series_switch>true</series_switch> <draw> <text color='FFFFFF' alpha='80' font='arial' rotation='0' bold='true' size='40' x='0' y='400' width='550' height='200' h_align='right' v_align='top'>Ballot : 153 </text> <text color='000000' alpha='10' font='arial' rotation='0' bold='true' size='50' x='0' y='-8' width='550' height='200' h_align='center' v_align='top'>|||||||||||||||||||||||||||||||||||||||</text> <text color='000000' alpha='10' font='arial' rotation='0' bold='true' size='50' x='0' y='390' width='550' height='200' h_align='center' v_align='top'>|||||||||||||||||||||||||||||||||||||||</text> </draw> <chart_data> <row> <null/> <string>數學</string> <string>自然科學</string> <string>英文</string> <string>國語</string> </row> <row> <string>票擇你最喜歡的科目？</string> <number>50</number> <number>10</number> <number>30</number> <number>63</number> </row> </chart_data> </chart>

sample_2.xml

<?xml version="1.0" encoding="utf-8"?> <chart> <chart_type>pie</chart_type> <legend_label font='system' size='14' /> <legend_rect x='10' y='60' width='0' height='330' margin='5' fill_color='FFFFFF' fill_alpha='30' line_color='000000' line_alpha='0' line_thickness='1' /> <legend_transition type='slide_down' delay='1' duration='1' /> <axis_category font='system' size='14' /> <chart_transition type='spin' delay='0.5' duration='0.75' order='category' /> <chart_value color='FFFFFF' alpha='65' font='arial' bold='true' size='15' position='inside' prefix='' suffix='' decimals='0' separator='' as_percentage='true' /> <series_color> <color>790000</color> <color>7B2D00</color> <color>7D4800</color> <color>827A00</color> </series_color> <draw> <text color='FFFFFF' alpha='80' font='arial' rotation='0' bold='true' size='40' x='0' y='400' width='550' height='200' h_align='right' v_align='top'>Percentage </text> <text color='000000' alpha='10' font='arial' rotation='0' bold='true' size='50' x='0' y='-8' width='550' height='200' h_align='center' v_align='top'>|||||||||||||||||||||||||||||||||||||||</text> <text color='000000' alpha='10' font='arial' rotation='0' bold='true' size='50' x='0' y='390' width='550' height='200' h_align='center' v_align='top'>|||||||||||||||||||||||||||||||||||||||</text> </draw> <chart_data> <row> <null/> <string>數學</string> <string>自然科學</string> <string>英文</string> <string>國語</string> </row> <row> <string>票擇你最喜歡的科目？</string> <number>50</number> <number>10</number> <number>30</number> <number>63</number> </row> </chart_data> </chart>

Google 圖書搜尋

2008-01-11T06:08:00.000+08:00

這是 Google 針對圖書所做的搜尋系統，比較值得一提的是其中提供了『線上瀏覽書籍』，不過大多是僅提供『有限的預覽』無法查看整本書，除非該書籍 Google 取得完整的授權，某些情況下則可以查看整本書，關於 Google 圖書搜尋中還提到『如果書籍屬於公共網域，您將可以免費下載 PDF 副本』。

當然如同 Google 的很多服務，可以利用你的 Google 帳戶將喜歡的書籍加入『我的圖書館』保存方便以後查閱，並且對該書籍撰寫評論。如果想要購買該本書也提供了相關網路書店的鏈結例如 Amazon。

在繁體書籍方面 Google 已與博客來網路書店和城邦集團合作，但是目前可搜尋到的繁體書籍還是太少了。

電子書的發明以及為了地球上的樹木著想，圖書的數位化在未來是可以被期待的，但是這將會衝擊到很多產業，其實這是很值得討論的議題。

Google 圖書搜尋

相關閱讀︰
關於 Google 圖書搜尋
梁董的吧台後 - Google Books 中文版上線了
ZDNet Taiwan 相關報導

FCKeditor - HTML 所見即所得線上編輯器

2007-12-26T08:09:00.001+08:00

FCKeditor 是一個專門使用在網頁上屬於開放原始碼的 HTML 所見即所得線上編輯器，它可和 ASP.Net、ASP、ColdFusion、PHP、Java、Active-FoxPro、Lasso、Perl、Python 等不同的程式語言相結合。

FCKeditor 更相容於絕大部分的網頁瀏覽器 Internet Explorer 5.5+、Mozilla Firefox 1.5+、Netscape 7.1+、Opera 9.50+、Safari 3.0+、Camino 1.0+。

FCKeditor 程式編碼為 UTF-8，內建了各種語言的語系檔，其中當然也包含了繁體中文。

「FCKeditor」名稱中的「FCK」是這個編輯器的作者的名字 Frederico Caldeira Knabben 的縮寫。

官方網站︰http://www.fckeditor.net/

一人一筷抗暖救地球

2007-12-25T08:20:00.000+08:00

原來，人類比熊貓更會『吃』竹子！
光是台灣人，每年消耗的免洗筷，就超過 50 億雙！
這相當於 3 千多座足球場面積的竹林，
遭到吞噬 ...

向聯合國於2008年廢止繁體中文說「不」

2007-12-25T07:48:00.000+08:00

向聯合國於2008年廢止繁體中文說「不」
Say NO to United Nations' abolishment of Traditional Chinese in 2008

請支持反廢除繁體中文，幫繁體中文投個票，聯合國決定於 2008 廢除繁體中文，若成了那每個台灣人幾乎都得學簡體字，想想我們老祖先千年留給我們的姓名也將因簡體而變形、中華文化遺產的摧毀不僅發生在中國也行將全世界，可能以後讀繁體字只能在日本，這多諷刺呀！

想了就可怕，下面網站是為了反對這項決定，大家去投票吧。

http://www.gopetition.com/region/237/8314.html

投票步驟︰

1. 滑動轉軸到下方一點的地方，點『 Sign the petition』。

2. 填寫資料

3. 送出即成

當我投票的時候，我是第 408521 個投票的，大家加油！！

向陽房 ( 地瓜燒 ) - SOGO復興館專櫃

2007-12-21T08:39:00.005+08:00

在台中頗有名的烘培屋，她們家的招牌產品地瓜燒很好吃，有招牌、芋頭、黑糖三種口味（NT 25 元 / 百克）。

民國91年研發出地瓜燒是向陽房領先開發，最具指名度的招牌產品。地瓜燒除具有天然地瓜的外型及原物，更有濃純的地瓜香味及細緻順滑的口感。熱熱吃香醇濃郁，冰涼食用爽口具冰淇淋口感。外縣市可宅配用送唷！

地址︰台北市忠孝東路三段300號B3 ( SOGO復興館專櫃 )
TEL︰0800-432-160
http://www.shinehouse.com.tw/

店家位置﹙Google Map﹚

東湖霸味薑母鴨

2007-12-21T08:26:00.004+08:00

在東湖很有名的薑母鴨，每回經過店家門口總會看見大排長龍，如果你是過了下午五點想要過去吃那就必須要有排隊等候的心理準備，可想而知這家薑母鴨好吃的程度了。

店家有推出外帶超值組合 500 元，包含薑母鴨一鍋，以及高麗菜、金針菇、鴨血、脆腸、凍豆腐、豆皮等配料。也可單買薑母鴨一鍋價錢為 250 元，喜歡吃什麼配料再自行至市場採購。

如果可以的話比較建議下午五點前去外帶，而且外帶薑母鴨的湯店家會給很多，一般湯鍋可以裝上兩鍋沒問題，用不完的湯我通常都另外裝好存放於冷藏，之後拿來煮麵吃，他們家的湯頭除了香濃之外也很清澈，冷藏後拿出來絕對不會有一層凝固的浮油在上頭。

地址︰台北市內湖區民權東路六段288號

店家位置﹙Google Map﹚

Yahoo!奇摩迷你筆

2007-12-07T04:44:00.000+08:00

只要一隻迷你小筆，就可以讓您輕鬆查單字！各式文件上的英文單字都可以讓您輕鬆查、隨時查！還有真人發音和段落翻譯喔！重點是免費！！

系統需求：Windows 2000/2003/XP/Vista與IE 6.0/7.0
檔案大小：1.8MB

Google 翻譯 - 讓你的網站馬上擁有多國語系

2007-11-28T05:34:00.001+08:00

利用 Google 翻譯不但可以幫您翻譯所瀏覽的網站，還提供了一個免費小工具，只要選擇網站的語言就可以取得 HTML 程式碼，然後貼到您的網頁上，如此您的網站馬上就擁有多國語言了喔！

Google 翻譯

Google 翻譯 - 工具
~~目前繁體中文的翻譯小工具只有支援英文及簡體中文。~~

2008/05/12 增修︰

Google 翻譯在日前悄悄的改版，讓各語言間的翻譯有更多的支援，這也表示 Google 翻譯的能力更為強大，而且開放使用者提出翻譯建議，以改善翻譯品質。

有趣的 Google 搜尋

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

直接輸入關鍵字利用 Google 搜尋，來搜尋網站或資料大家一定不陌生，不過 Google 搜尋還有更多功能喔！

˙匯率兌換
1 GBP =? USD
1人民幣 -> 台幣
1美元換成台幣

˙計算機
5+2*2
2^20
1英里=?公里
光速乘以二秒等於多少公里

˙中英文字典
fy apple
翻譯蘋果

˙農曆陽曆轉換
2008年春節
陽曆 1974/8/7
農曆 1974/6/20

ClockLink.com - Flash 世界時鐘

2007-11-22T05:32:00.000+08:00

這是一個有趣的網站，提供了非常多樣式的 Flash 時鐘連北京 2008 奧運倒數的樣式都有喔，重點是免費而且不需要申請，只要選好想要的時鐘樣式，做幾個設定就可以取得 HTML 的程式碼放入你的網站或是 Blog。

ClockLink.com

Google Picasa 網路相簿

2007-11-21T03:02:00.001+08:00

最近因為公司網站系統的需求要提供網路相簿的功能，所以我找上了 Picasa。

仿間雖然有許多提供免費的網路相簿，但是我唯讀鍾愛 Picasa，原因在於 Picasa 擁有 Google 強大的支援。

1. 提供了 Picasa Google 相片管理程式免費下載使用，除了可以管理自己電腦上的相片，更可以直接將相片上傳至 Picasa。

2. Picasa 結合了 Google Map，可以更有效的讓瀏覽者了解相片拍攝地點。

Picasa Web Albums Map

3. Google 的 gData 提供了完整的 Picasa Web Albums Data API，更可以完整結合應用在自己的網路系統裡。

Picasa Web Albums Data API

有了如此強大的網路相簿，我們又何苦為難自己去架設網路相簿系統呢！

提到 Picasa Web Albums Data API 這裡簡易的說明，在可以不申請 gData 認證之下如何取得 Picasa 的相簿資料， Picasa API 提供了完整的 RSS 文件讓使用者加以運用，只要知道如何取得 RSS 文件，剩下的就不困難了，這裡以 Picasa 所提供的範例相本做為範例說明。

相簿網址︰http://picasaweb.google.com/picasateam

我們首先要知道的是你在 Picasa 的使用者 userID，以這個範例的使用者 userID 其實就是最後面的 picasateam，有了這個 userID 之後我們就可以取得這個 userID 下所有公開相簿的 RSS 文件。

picasateam 公開相簿的 RSS︰
http://picasaweb.google.com/data/feed/api/user/picasateam

在這份 RSS 文件中會列出所有公開相簿的資料，從這些資料當中可以取得每本相簿的 albumName 及 albumID，同樣的道理我們就可以取得該本相簿的所有相片資料的 RSS 文件。例如 picasateam 裡其中一本相簿名稱為 CambridgeUK 的 albumName 為 CambridgeUK，albumID 為 5114585224189980161。這裡有兩種方法取得 RSS 文件。

RSS By album name︰
http://picasaweb.google.com/data/feed/api/user/picasateam
/album/CambridgeUK

RSS By album ID︰
http://picasaweb.google.com/data/feed/api/user/picasateam
/albumid/5114585224189980161

在相簿 RSS 文件中又可以取得該本相簿裡所有相片的資料，同樣也可以取得每張相片的 photoID，透過 photoID 又可以取得該相片的 RSS 文件，例如相簿 CambridgeUK 有張相片的 photoID 為 5114585232779914770。

Photo RSS︰
http://picasaweb.google.com/data/feed/api/user/picasateam
/albumid/5114585224189980161
/photoid/5114585232779914770

如此你將取得在 Picasa 所有公開相簿相片的資料，便可以加以運用。

Plugoo - 提供免費即時通訊功能

2007-11-18T23:28:00.000+08:00

Plugoo 是個提供免費即時通訊功能的網站，申請後能在自己的網站增加即時通訊的功能。網友就算沒有 MSN、Yahoo Messenger、Gtalk、AIM、ICQ 等等，都能夠在您的網站上與您的即時通訊軟體對話，非常方便。

Plugoo

相關教學︰pen2's Revival - Plugoo教學

為何使用表格排版是不明智的？

2007-11-18T03:43:00.000+08:00

這是一篇很有趣的簡報，告訴你「為何使用表格排版是不明智的？」而應該用 CSS 和有結構性的 HTML 來編排網頁。這個簡報有多國語言的翻譯，而且插畫很有趣！雖然我自己對 CSS 還不是很熟，但是用 <table> 來排版的確已經是不好的作法了，有興趣的人可以看看這篇簡報。

http://www.7dspace.com/seybold/index.html

Ajax 不可不知的核心物件 XMLHttpRequest

2007-11-01T07:49:00.001+08:00

Ajax (Asynchronous JavaScript and XML) 由 HTML、JavaScript 技術、DHTML 和 DOM 組成，JavaScript 是在 Client 端所執行的程式，並無法直些與 Server 端的資料庫溝通。但是 Ajax 的主要精神就是在頁面不 Reload，或者跳頁的情況下對 Server 端的資料庫進行溝通。這時候我們就必須用到 JavaScript 的一個物件 XMLHttpRequest。

XMLHttpRequest 是 Ajax 應用程式的核心，透過 XMLHttpRequest 物件 JavaScript 便可以與伺服器進行對話。這個物件對剛要開始碰觸 Ajax 的人應該有些陌生，如果你會寫 PHP、ColdFusion 那麼應該對 curl、cfhttp 很熟悉，其實 XMLHttpRequest 的功能與其是差不多的。

這樣來說好了 XMLHttpRequest 就是在幫助 JavaScript 模擬一個隱形的瀏覽器，透過 HTTP 的方式去拜訪 Server 端的程式，所以我們需要給它所要拜訪程式的網址，同樣的我們也可以傳送 GET、POST 的參數給 Server 端的程式。當 Server 端的程式執行完成後便會回傳頁面呈現結果給 XMLHttpRequest。

但是 PHP、ColdFusion 是 Server 端執行的程式，其 AP Server 會負責確定所請求的服務不管執行結果是如何，回應完成了沒有。然而 JavaScript 卻是在 Client 端所執行的程式，所以並不會有人幫你確定這點，這部份就必須要我們自己來做了。

當我們運用 XMLHttpRequest 對 Server 端請求服務的時便進入一個迴圈，會不段回傳 HTTP 就緒狀態，其狀態如下︰

0 : 請求未初始化。
1 : 請求已經建立，但是還沒有發送。
2 : 請求已發送，正在處理中。
3 : 請求在處理，但是伺服器還沒完成回應。
4 : 回應已完成。

每種瀏覽器會有些差異，但這可以不必過於擔心，我們只需要最後回傳 HTTP 就緒狀態為 4﹙回應已完成﹚的結果，這部份在各瀏覽器是一致的。

接下來我們還需要注意的是在不同瀏覽器 JavaScript 程式的用法有很大的部份是不同的，說穿了其實就是只有微軟的 IE 跟人家不同，這裡也會遇到同樣的問題。在 Firefox 與其它瀏覽器我們是用 XMLHttpRequest 這個物件沒有錯，而 IE 並沒有這個物件存在而是用一個叫做 ActiveXObject 的物件，後續用法其實是一樣的。

到這裡我一直沒有提到 XMLHttpRequest 真正實際的用法，如果你還有興趣了解更多，請參閱相關閱讀內的資料。

相關閱讀︰
。developerWorks 中国: 掌握 Ajax 系列
。developerWorks 中国: Ajax 資源中心

Google 商家登錄中心

2007-10-31T09:46:00.001+08:00

之前我們提到過 Google 地圖可以透過關鍵字查詢地圖上的店家，例如餐廳、小吃店。有人會疑問 Google 怎麼會知道那些店家的，答案當然不會是 Google 派人來調查。

Google 的商家登錄中心提供了這項服務，你可以將商家的地址、電話、照片、介紹等資訊上傳至 Google 的資料庫裡，如此在 Google 就可以搜尋的到。趕快去將你的商家資料作登入的動作吧，讓使用 Google 的人可以找的到你，這相對也是個無形的廣告喔！

Google 商家登錄中心

Musicovery : interactive webRadio

2007-10-31T07:47:00.000+08:00

要從市面上琳琅滿目的唱片中找到真正想聽的音樂有時候不算太容易，Musicovery 這個網站讓這件事便簡單了。使用者只要先選擇要搜尋的歌曲年代、類型，再從心情或舞蹈的象限裡設定你要找的音樂曲風是慷慨激昂或是平靜抒情的，接下來的動作就交給 Musicovery，它會列出最符合條件的歌曲開始播放，周邊還會出現其他曲風類似的歌曲，方便使用者試聽。收聽後如果覺得不錯的話，旁邊就有購物網站的連結可以直接購買。而我呢通常是工作的時候拿來聽音樂用的。

Musicovery

PHP 數字補零小技巧

2007-10-30T12:53:00.000+08:00

雖然只是個微不足道的小技巧，不過就當做 PHP 標籤類別的第一篇文章吧。

有時常常需要用程式產生號碼，例如學號、貨號等等，通常這類的號碼長度必須要固定，也有可能在前面加上固定的編碼例如︰B020102000001。

"B" 可能是固定的代碼表示為書籍，"020102" 為大中小分類的編號，那麼 "000001" 就是流水號了，但是必須要求貨號總長必須要有 13 碼，這時候問題就出現在後面的流水號了，如何有效的補 0 使它有 6 碼，我以前還笨笨的自己寫迴圈來補 0，其實只要下面這一段就可以解決了。

Ajaxload - Ajax loading gif generator

2007-10-27T13:28:00.002+08:00

運用 AJAX 技術 User 常常需要等待後端程式處理的時間，是不是希望有個美美的 Loading 的圖片告訴 User 呢，來這自己訂製一個吧。

Ajaxload.info

另外 AJAX Activity Indicators 這裡也有一些現成的喔。

irt.org Home Page

2007-10-27T10:12:00.000+08:00

自己看了就知道。

irt.org

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

2007-10-27T08:33:00.002+08:00

Pulling It All Together

　　最後我們擁有了所有的 drag/drop 的腳本片斷！下一個事情是我們將創建一個 DOM 處理。如果你不是很熟悉，請先閱讀我的 JavaScript Primer on DOM Manipulation。

　　下面的代碼將創建 container(容器)，而且使任何一個需要 drag/dro p的 item 變成一個容器的 item。代碼在這個文章第二個 demo 的後面，它可以用戶記錄一個 list(清單)，定為一個導航窗口在左邊或者右邊，或者更多的函數你可以想到的。

　　下一步我們將透過 "假代碼" 讓 reader 看到真代碼，下面為推薦︰

　　1、當document第一次載入時，創建 dragHelper DIV.dragHelper 將給移動的 item 加陰影。真實的 item 沒有被 dragged，只是用了 insertBefor 和 appendChild 來移動了，我們隱藏了 dragHelper。

　　2、有了 mouseDown 與 mouseUp 函數。所有的操作會對應到當到 iMouseDown 的狀態中，只有當 mouse 左鍵為按下時 iMouseDown 才為真，否則為假。

　　3、我們創建了全局變量 DragDrops 與全局函數 CreateDragContainer.DragDrops 包含了一系列相對彼此的容器。任何參數 (containers) 將透過 CreatedcragContainer 進行重組與序列化，這樣可以自由的移動。CreateDragContainer 函數也將 item 進行綁定與設定屬性。

　　4、現在我們的代碼知道每個 item 的加入，當我們移動處 mouseMove，mouseMove 函數首先會設定變量 target，滑鼠移動在上面的 item，如果這個 item 在容器中 (checked with getAttribute)︰

　* 運行一小段代碼來改變目標的樣式。創造 rollover 效果。
　* 檢查滑鼠是否沒有放開，如果沒有︰
　　o 設定 curTarget 代表目前 item。
　　o 記錄 item 的目前位置，如果需要的話，我們可以將它返回。
　　o 克隆目前的 item 到 dragHelper 中，我們可以移動帶陰影效果的 item。
　　o item 拷貝到 dragHelper 後，原有的 item 還在滑鼠指針下，我們必須刪除掉 dragObj，這樣腳本起作用，dragObj 被包含在一個容器中。
　　o 抓取容器中所有的 item 目前坐標，高度/寬度，這樣隻需要記錄一次，當 item 被 drag 時，每隨 mouse 移動，每移鐘就會記錄成千上萬次。
　* 如果沒有，不需要做任何事，因為這不是一個需要移動的 item。

　　5、檢查 curTarget，它應該包含一個被移動的 item，如果存在，進行下面操作：

　* 開始移動帶有陰影的 item，這個 item 就是前文所創建的。
　* 檢查每個目前容器中的container，是否滑鼠已經移動到這些範圍內了。
　　o 我們檢查看一下正在拖曳的 item 是屬於哪個 container。
　　o 放置 item 在一個 container 的某一個 item 之前，或者整個 container 之後。
　　o 確認 item 是可見的。
　* 如果滑鼠不在 container 中，確認 item 是不可見了。

　　6、剩下的事就是捕捉 mouseUp 的事件了。

實現一個拖曳的全代碼：

// iMouseDown represents the current mouse button state: up or down /* lMouseState represents the previous mouse button state so that we can check for button clicks and button releases: if(iMouseDown && !lMouseState) // button just clicked! if(!iMouseDown && lMouseState) // button just released! */ var mouseOffset = null; var iMouseDown = false; var lMouseState = false; var dragObject = null; // Demo 0 variables var DragDrops = []; var curTarget = null; var lastTarget = null; var dragHelper = null; var tempDiv = null; var rootParent = null; var rootSibling = null; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} function CreateDragContainer(){ /* Create a new "Container Instance" so that items from one "Set" can not be dragged into items from another "Set" */ var cDrag = DragDrops.length; DragDrops[cDrag] = []; /* Each item passed to this function should be a "container". Store each of these items in our current container */ for(var i=0; i<arguments.length; i++){ var cObj = arguments[i]; DragDrops[cDrag].push(cObj); cObj.setAttribute('DropObj', cDrag); /* Every top level item in these containers should be draggable. Do this by setting the DragObj attribute on each item and then later checking this attribute in the mouseMove function */ for(var j=0; j<cObj.childNodes.length; j++){ // Firefox puts in lots of #text nodes...skip these if(cObj.childNodes[j].nodeName=='#text') continue; cObj.childNodes[j].setAttribute('DragObj', cDrag); } } } function mouseMove(ev){ ev = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); // mouseOut event - fires if the item the mouse is on has changed if(lastTarget && (target!==lastTarget)){ // reset the classname for the target element var origClass = lastTarget.getAttribute('origClass'); if(origClass) lastTarget.className = origClass; } /* dragObj is the grouping our item is in (set from the createDragContainer function). if the item is not in a grouping we ignore it since it can't be dragged with this script. */ var dragObj = target.getAttribute('DragObj'); // if the mouse was moved over an element that is draggable if(dragObj!=null){ // mouseOver event - Change the item's class if necessary if(target!=lastTarget){ var oClass = target.getAttribute('overClass'); if(oClass){ target.setAttribute('origClass', target.className); target.className = oClass; } } // if the user is just starting to drag the element if(iMouseDown && !lMouseState){ // mouseDown target curTarget = target; // Record the mouse x and y offset for the element rootParent = curTarget.parentNode; rootSibling = curTarget.nextSibling; mouseOffset = getMouseOffset(target, ev); // We remove anything that is in our dragHelper DIV so we can put a new item in it. for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]); // Make a copy of the current item and put it in our drag helper. dragHelper.appendChild(curTarget.cloneNode(true)); dragHelper.style.display = 'block'; // set the class on our helper DIV if necessary var dragClass = curTarget.getAttribute('dragClass'); if(dragClass){ dragHelper.firstChild.className = dragClass; } // disable dragging from our helper DIV (it's already being dragged) dragHelper.firstChild.removeAttribute('DragObj'); /* Record the current position of all drag/drop targets related to the element. We do this here so that we do not have to do it on the general mouse move event which fires when the mouse moves even 1 pixel. If we don't do this here the script would run much slower. */ var dragConts = DragDrops[dragObj]; /* first record the width/height of our drag item. Then hide it since it is going to (potentially) be moved out of its parent. */ curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth)); curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight)); curTarget.style.display = 'none'; // loop through each possible drop container for(var i=0; i<dragConts.length; i++){ with(dragConts[i]){ var pos = getPosition(dragConts[i]); /* save the width, height and position of each container. Even though we are saving the width and height of each container back to the container this is much faster because we are saving the number and do not have to run through any calculations again. Also, offsetHeight and offsetWidth are both fairly slow. You would never normally notice any performance hit from these two functions but our code is going to be running hundreds of times each second so every little bit helps! Note that the biggest performance gain here, by far, comes from not having to run through the getPosition function hundreds of times. */ setAttribute('startWidth', parseInt(offsetWidth)); setAttribute('startHeight', parseInt(offsetHeight)); setAttribute('startLeft', pos.x); setAttribute('startTop', pos.y); } // loop through each child element of each container for(var j=0; j<dragConts[i].childNodes.length; j++){ with(dragConts[i].childNodes[j]){ if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue; var pos = getPosition(dragConts[i].childNodes[j]); // save the width, height and position of each element setAttribute('startWidth', parseInt(offsetWidth)); setAttribute('startHeight', parseInt(offsetHeight)); setAttribute('startLeft', pos.x); setAttribute('startTop', pos.y); } } } } } // If we get in here we are dragging something if(curTarget){ // move our helper div to wherever the mouse is (adjusted by mouseOffset) dragHelper.style.top = mousePos.y - mouseOffset.y; dragHelper.style.left = mousePos.x - mouseOffset.x; var dragConts = DragDrops[curTarget.getAttribute('DragObj')]; var activeCont = null; var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2); var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2); // check each drop container to see if our target object is "inside" the container for(var i=0; i<dragConts.length; i++){ with(dragConts[i]){ if(((getAttribute('startLeft')) < xPos) && ((getAttribute('startTop')) < yPos) && ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) && ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){ /* our target is inside of our container so save the container into the activeCont variable and then exit the loop since we no longer need to check the rest of the containers */ activeCont = dragConts[i]; // exit the for loop break; } } } // Our target object is in one of our containers. Check to see where our div belongs if(activeCont){ // beforeNode will hold the first node AFTER where our div belongs var beforeNode = null; // loop through each child node (skipping text nodes). for(var i=activeCont.childNodes.length-1; i>=0; i--){ with(activeCont.childNodes[i]){ if(nodeName=='#text') continue; // if the current item is "After" the item being dragged if( curTarget != activeCont.childNodes[i] && ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) && ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){ beforeNode = activeCont.childNodes[i]; } } } // the item being dragged belongs before another item if(beforeNode){ if(beforeNode!=curTarget.nextSibling){ activeCont.insertBefore(curTarget, beforeNode); } // the item being dragged belongs at the end of the current container } else { if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){ activeCont.appendChild(curTarget); } } // make our drag item visible if(curTarget.style.display!=''){ curTarget.style.display = ''; } } else { // our drag item is not in a container, so hide it. if(curTarget.style.display!='none'){ curTarget.style.display = 'none'; } } } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // mouseMove target lastTarget = target; // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this helps prevent items on the page from being highlighted while dragging return false; } function mouseUp(ev){ if(curTarget){ // hide our helper object - it is no longer needed dragHelper.style.display = 'none'; // if the drag item is invisible put it back where it was before moving it if(curTarget.style.display == 'none'){ if(rootSibling){ rootParent.insertBefore(curTarget, rootSibling); } else { rootParent.appendChild(curTarget); } } // make sure the drag item is visible curTarget.style.display = ''; } curTarget = null; iMouseDown = false; } function mouseDown(){ iMouseDown = true; if(lastTarget){ return false; } } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function(){ // Create our helper object that will show the item while dragging dragHelper = document.createElement('DIV'); dragHelper.style.cssText = 'position:absolute;display:none;'; CreateDragContainer( document.getElementById('DragContainer1'), document.getElementById('DragContainer2'), document.getElementById('DragContainer3') ); document.body.appendChild(dragHelper); }  <div class="DragContainer" id="DragContainer1"> <div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div> <div class="DragBox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox">Item #2</div> <div class="DragBox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox">Item #3</div> <div class="DragBox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox">Item #4</div> </div> <div class="DragContainer" id="DragContainer2"> <div class="DragBox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox">Item #5</div> <div class="DragBox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox">Item #6</div> <div class="DragBox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox">Item #7</div> <div class="DragBox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox">Item #8</div> </div> <div class="DragContainer" id="DragContainer3"> <div class="DragBox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox">Item #9</div> <div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div> <div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div> <div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div> </div>

　　你現在擁有了拖拽的所有東西。

　　下面的三個 demo 是記錄事件歷史。當你的滑鼠在 item 上移動，將記錄所生的事件，如果你不明白可以嘗試一下滑鼠的劃過或者拖曳，看有什麼發生。

　　觀看範例

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰
原文︰How to Drag and Drop in JavaScript
作者︰Mark Kahn
譯者︰雪山老人
所有本文及範例檔案相關版權為以上作者所有。

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚

2007-10-27T08:33:00.001+08:00

你會注意到這個代碼幾乎是前面的全集，將前面的合在一起就實現了拖拽效果了。

　　當我們點擊一個 item 時，我們就穫取了很多變量，如滑鼠位置，滑鼠位置自然就包含了那個 item 的坐標資訊了。如果我們點擊了一個 20*20px 圖像的正中間，那麼滑鼠的相對坐標為 {x:10,y:10}。當我們點擊這個圖像的左上角那麼滑鼠的相對坐標為 {x:0,y:0}。當我們點擊時，我們用這個方法取得一些滑鼠與圖片校對的資訊。如果我們不能加載頁面 item，那麼資訊將是 document 資訊，會忽略了點擊的 item 資訊。

　　mouseOffset 函數使用了另一個函數 getPosition.getPosition 的作用是返回 item 相對頁面左上角的坐標，如果我們嘗試穫取 item.offsetLeft 或者 item.style.left，那麼我們將取得 item 相對與父級的位置，不是整個 document﹒所有的腳本我們都是相對整個 document，這樣會更好一些。

　　為了完成 getPosition 任務，必須循環取得 item 的父級，我們將加載內容到 item 的左／上的位置﹒我們需要管理想要的 top 與 left 清單。

　　自從定義了 mousemove 這個函數，mouseMove 就會一直運行。第一我們確定 item 的 style.position 為 absolute，第二我們移動 item 到前面定義好的位置。當 mouse 點擊被釋放，dragObject 被設定為 null，mouseMove 將不在做任何事。

Dropping an Item
　　前面的例子目的很簡單，就是拖拽 item 到我們希望到的地方。我們經常還有其他目的如刪除 item，比如我們可以將 item 拖到垃圾桶裏，或者其他頁面定義的位置。

　　很不幸，我們有一個很大的難題，當我們拖拽，item 會在滑鼠之下，比如 mouseove,mousedown,mouseup 或者其他 mouse action。如果我們拖拽一個 item 到垃圾桶上，滑鼠資訊還在 item 上，不在垃圾桶上。

　　怎麼解決這個問題呢？有幾個方法可以來解決。第一，這是以前比較推薦的，我們在移動滑鼠時 item 會跟隨滑鼠，並佔用了 mouseover/mousemove 等滑鼠事件，我們不這樣做，只是讓 item 跟隨著滑鼠，並不佔用 mouseover 等滑鼠事件，這樣會解決問題，但是這樣並不好看，我們還是希望 item 能直接跟在 mouse 下。

　　另一個選擇是不做 item 的拖拽。你可以改變滑鼠指針來顯示需要拖拽的 item，然後放在滑鼠釋放的位置。個解決方案，也是因為美學原因不予接受。

　　最後的解決方案是，我們並不去除拖拽效果。這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標的清單，當滑鼠釋放時，手工去檢查釋放的位置是否是在目標清單位置上，如果在，說明是釋放在目標位置上了。

　　觀看範例

　　滑鼠釋放時會去取是否有 drop 屬性，如果存在，同時滑鼠指針還在 drop 的範圍內，執行 drop 操作。我們檢查滑鼠指針位置是否在目標範圍是用 (mousePos.x>targetPos.x)，而且還要符合條件 (mousePos.x<(targPos.x + targWidth))。如果所有的條件符合，說明指針確實在範圍內，可以執行 drop 指令了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚

2007-10-27T08:32:00.000+08:00

捕捉滑鼠點擊

　　下次我們將知道滑鼠何時點擊與何時放開。如果我們跳過這一步，我們在做拖拽時將永遠不知道滑鼠移動上面時的動作，這將是惱人的與違反直覺的。

　　這裡有兩個函數幫助我們︰onmousedown 與 onmouseup 我們預先設定函數來接收 document.onmousemove，這樣看起來很象我們會穫取 document.onmousedown 與 document.onmouseup。但是當我們穫取 document.onmousedown 時，我們同時穫取了任何對象的點擊屬性如︰text、images、tables 等等。我們只想穫取那些需要拖拽的屬性，所以我們設定函數來穫取我們需要移動的對象。

　　觀看範例

移動一個元素

　　我們知道了怎麼捕捉滑鼠移動與點擊。剩下的就是移動元素了。首先，要確定一個明確的頁面位置，css 樣式錶要用'absolute'。設定元素絕對位置意味著我們可以用樣式錶的 .top 和 .left 來定位，可以用相對位置來定位了。我們將滑鼠的移動全部相對頁面 top-left，基於這點，我們可以進行下一步了。

　　當我們定義 item.style.position='absolute'，所有的操作都是改變 left 坐標與 top 坐標，然後它移動了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚

2007-10-27T07:56:00.000+08:00

JavaScript 的特點是 dom 的處理與網頁效果，大多數情況我們隻用到了這個語言的最簡單的功能，比如制作圖片輪播/網頁的 tab 等等，這篇文章將向你展示如何在自己的網頁上制作拖拽。

　　有很多理由讓你的網站加入拖拽功能，最簡單的一個是數據重組。例如：你有一個序列的內容讓用戶排序，用戶需要給每個條目進行輸入或者用 select 選擇，替代前面這個方法的就是拖拽。或許你的網站也需要一個用戶可以拖曳的導航窗口！那麼這些效果都是很簡單：因為你可以很容易的實現！

　　網頁上實現拖拽其實也不是很複雜。第一你需要知道滑鼠坐標，第二你需要知道用戶滑鼠點擊一個網頁元素並實現拖拽，最後我們要實現移動這個元素。

　　觀看範例

穫取滑鼠移動資訊

　　第一我們需要穫取滑鼠的坐標。我們加一個用戶函數到 document.onmousemove 就可以了︰

　　觀看範例

　　你首先要聲明一個 evnet 對象。不論何時你移動滑鼠／點擊／按鍵等等，會對應一個 event 的事件。在 Internet Explorer 裏 event 是全局變量，會被存儲在 window.event 裏。在firefox中，或者其他瀏覽器，event 事件會被相應的自定義函數穫取﹒當我們將 mouseMove 函數賦值於 document.onmousemove，mouseMove 會穫取滑鼠移動事件。

　　(ev = ev || window.event) 這樣讓 ev 在所有瀏覽器下穫取了 event 事件，在 Firefox 下 "||window.event" 將不起作用，因為 ev 已經有了賦值。在 MSIE 下 ev 是空的，所以 ev 將設定為 window.event。

　　因為我們在這篇文章中需要多次穫取滑鼠坐標，所以我們設計了 mouseCoords 這個函數，它隻包含了一個參數，就是 the event。

　　我們需要運行在 MSIE 與 Firefox 為首的其他瀏覽器下。Firefox 以 event.pageX 和 event.pageY 來代表滑鼠相應於文檔左上角的位置。如果你有一個 500*500 的窗口，而且你的滑鼠在正中間，那麼 paegX 和 pageY 將是 250，當你將頁面往下卷動 500px，那麼 pageY 將是 750。此時 pageX 不變，還是 250。

　　MSIE 和這個相反，MSIE 將 event.clientX 與 event.clientY 來代表滑鼠與 ie 窗口的位置，並不是文檔。當我們有一個 500*500 的窗口，滑鼠在正中間，那麼 clientX 與 clientY也是 250，如果你垂直卷動窗口到任何位置，clientY 仍然是 250，因為相對 ie 窗口並沒有變化。想得到正確的結果，我們必須加入 scrollLeft 與 scrollTop 這兩個相對於文檔滑鼠位置的屬性。最後，由於 MSIE 並沒有 0,0 的文檔起始位置，因為通常會設定 2px 的邊框在周圍，邊框的寬度包含在 document.body.clientLeft 與 clientTop 這兩個屬性中，我們再加入這些到滑鼠的位置中。

　　很幸運，這樣 mouseCoords 函數就完成了，我們不再為坐標的事操心了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

Snap Shots - 預覽頁面上的超連結

2007-10-23T20:12:00.001+08:00

現在常常看到很多人的網站或是 Blog，當滑鼠移到有鏈結文字或圖片就會出現該網站的預覽，這是 Snap Shots 所提供的免費服務，只要去申請取得一段 JavaScript 程式碼，把它加在你的網站裡就可以了喔。

Snap Shots

Jackbin 的 Firefox 資源網

2007-10-23T00:43:00.000+08:00

豐富的詳細介紹 Firefox 及相關教學，也包含了許多擴充套件的介紹喔。

Jackbin 的 Firefox 資源網