老怪的挨踢日誌: Google

顯示具有 Google 標籤的文章。顯示所有文章

9.02.2009

【Firefox 插件】關於自訂 GMail 的簽名檔

使用 GMail 來處理公司郵件已經有一段時間了，雖然 GMail 本身也可以設定簽名檔，但是似乎只能使用純文字。

GMail 提供的簽名檔設定是在【設定】-->【一般】那一頁面，如下圖：

純文字的模式，少了字型變化和顏色設定，總覺得不夠美觀和個性化。

其實，如果能像 OutLook Express 或是 MS Outlook 那樣的自訂簽名檔，我想，大概也應該能夠滿足大部分使用者的需求了吧。尤其像我這種懶的花時間玩美工，又不希望簽名檔太過單調的。(這樣會不會要求太多阿)

基於這樣的想法，所以開始找資料和測試。

方法一：使用 Firefox 插件

Firefox 有二個不錯的簽名檔插件：WiseStamp 和 Blank Canvas Gmail Signatures。

WiseStamp ：

安裝方式：可參考用WiseStamp設計簽名檔，此篇文章有完整的安裝和使用介紹。

優點：所編即所得，也可以轉成HTML格式作細部調整。

缺點：可惜使用 WiseStamp 會出現廣告 (~.~) 如下圖：

Blank Canvas Gmail Signatures：

安裝方式：可參考 [FF] 在 Gmail 中使用 HTML 格式簽名檔 – Blank Canvas Gmail Signatures 這篇文章。

優點：沒有廣告。可針對不同帳號設定不同簽名檔。

缺點：需會使用HTML語法。

自訂簽名檔的方式：

【撰寫新郵件】或是【回覆】時，在【收件者】的右邊，點選【選項】，如下圖：
出現類似下圖時，再點擊【編輯簽名】。
出現如下視窗後，就可以開始編輯你的簽名檔了。

方法二：應用 Google 研究室的 Canned Response (罐頭回應)

想法來自於如何設計自己的郵件簽名這篇文章，此篇有提到可應用 Google Labs 的 Canned Response (罐頭回應)功能，將其活用在簽名檔方面。可惜沒有提到實際作法。所以，自己測試了一下。

設定方式：

Canned Response (罐頭回應) 設定是在【設定】-->【研究室】那一頁面，找到之後，選擇【啟用】。如下圖：

但是，不管我怎麼玩，卻只能有一行文字作為回應。(=.=)

想拿來作簽名檔？……真的是隨便講講！

關於 Canned Response (罐頭回應) 大部分的介紹，都是用來配合 Filter 以及回應垃圾郵件用途。

參考文章：

目前結論，使用 Blank Canvas Gmail Signatures 比較能符合我個人的需求。

7.31.2009

使用 Gmail 來處理公司郵件

當 E-Mail 變成工作來源的比重越來越高時，每天花在郵件軟體 (如 Microsoft Outlook) 上的處理時間也越來越多了。

而且公司的郵件是不能隨便刪除的。有時候，現在收到的 Mail 跟你無關或者只是通知，但是過沒幾封信，卻又突然扯到你身上。就算都有留下來，或者想找到以前的回信內容，在搜尋、比對和參照上，總是一件麻煩事。尤其是你回信之後，別人的回信中卻忽略掉你之前回信的內容時。

我一直很希望 Microsoft Outlook 能有 Gmail 的一些優點，也曾試過一些 Outlook 的外掛軟體，例如：Taglocity、Xobni。但是最後都放棄了。

現在，我選擇使用 Gmail 來當作我處理公司郵件的平台，配合 Google 行事曆和 Outlook 行事曆同步，在處理郵件和工作上，比以前快多了。再配合手機收發 GMail，那就更方便了。至於 Microsoft Outlook，目前並沒有設棄不用，而是把它當作是所有郵件的備份，總是有備無患阿。

其實，Microsoft Outlook 功能很多，在許多方面也比其他軟體強。尤其能和 Office 軟體互通和搭配，這更是其他軟體比不上的。若是能再和 Exchange Server 、 SharePoint Server 搭配的話，應用上更是相當適合公司環境的。只是這些相關的基礎建設，實在是所費不貲，而且在整合和維護的技術上，MIS 所需花費的心力和時間也是相當高。

使用 Outlook 的問題：

Microsoft Outlook 用久了之後，隨著信件地累積，開啟的速度越來越慢。
萬一 .PST 掛掉了，信件的復原可是一件讓人相當討厭的事情。
電腦重灌時，郵件的備份和複製，變成必要的工作步驟之一。
收到信時，想找到以前同一主旨的信件，總是得花費一些時間。
常常收到一些信件，卻不知道應該放置到哪個資料夾來歸類，因為有好幾種合適的選擇，放錯了又擔心以後不好找。如果暫時放在收件夾，信件又會越積越多。

選擇Gmail 的理由：

跟工作無關的信件，該刪的就刪，留在收件夾的信件，都只是未完成的事項，反正有 Outlook 作所有郵件的備份。(封存後的郵件，能在[所有郵件]或[標籤]中找到。)
同一封信件，可以使用不同的標籤來分類和整理。
信件太多時，不用一再地刪除郵件，來節省空間和開啟的速度。Gmail 的空間在理論上是無限大。
同一主旨的信件往來，可以在同一封信件就能看到，而且之前設定好的標籤會自動延用。
可利用手機接收 GMail，幾乎不花成本。
可根據收到的 Gmail 內容建立待辦事項，再配合 Google 行事曆發簡訊。
( 上述二種，是可以採用微軟的 Solution 來達到相同的功能，但是建置的成本和技術...值得考慮。)

其他參考文章：12個轉用Gmail的理由。

有興趣的，再往下看看設定吧。在設定上是以重灌狂人的如何使用Gmail平台收發、管理其他Email帳號的郵件？操作為主，我只是簡略的補上不同之處。

下列操作主要分為四段：

一、設定Gmail 接收公司郵件：

二、設定預設的寄件者 E-Mail：

三、設定安全性：

四、匯入聯絡人清單：

一、設定Gmail 接收公司郵件：

目的：

即使人在外地，也接收公司郵件 (Exchange Server)。
保留伺服器上的郵件備份，在定期使用 MS Outlook 收取信件儲存和備份。

設定之前，先要知道幾個訊息：你在公司郵件伺服器的 E-Mail 地址、使用者帳號 / 密碼、POP 伺服器。

操作步驟請參考：

注意事項：

和重灌狂人介紹上稍有不同的是：其第三步驟要打勾【在伺服器上保留以擷取郵件副本。】

(原圖片來自重灌狂人。藍色框框和字體是為了說明而加上去的。)

二、設定預設的寄件者 E-Mail：

目的：

當使用 Gmail 回信時，希望在對方收到的信件中，收件者的地址內容是顯示公司的 E-Mail 位址。

注意事項：

如果當初在設定時，有選擇類似｛是的，我想用 test@abc.com 來傳送郵件｝的話。請記得檢查一下，在【設定】-->【帳戶】的頁面下，在｛以這個地址寄送郵件：｝的右邊，要把公司的郵件位址設定為預設。
- 若依照重灌狂人的操作介紹，就是在第四步驟選擇【是】，如下圖： (圖片來自重灌狂人。)
如果當初選擇【否】，可以自己手動新增公司的郵件帳號，並且將之設為預設。
- 手動增加 [寄件者] 詳細操作步驟請參考：
- 其他注意事項：
  - 如果公司有防垃圾郵件機制，請記得要設定放行。用 Gmail 寄一封測試信件看看。因為雖然在寄件者的名稱和郵件位址都和公司一樣，但是實際上的寄送IP和 E-Mail Address 還是 GMail，有些機制會把它當作垃圾郵件而擋住。

三、設定安全性：

在【設定】-->【一般】的頁面下，最底下的瀏覽器連線: ，請選擇永遠使用 https。如下圖：

四、匯入聯絡人清單：

請依照台灣微軟Office Online--在 Outlook 和 Google Gmail 之間傳送聯絡人來操作吧。

現在可以開始享用 Gmail 收取公司郵件後，所帶來的方便了!!

其他 Gmail 相關參考文章：

工作清單相關：

Gmail 新增待辦事項(Tasks)工作列表功能
詳細的圖文說明: 重灌狂人--Gmail 新增功能完整的 Tasks 工作表，幫你簡單打點生活大小事
Gmail Tasks 的快速鍵：Tasks Frequently Asked Questions

標籤應用相關：

7.29.2009

使用Google行事曆：和Outlook行事曆的同步、匯出、匯入

最近用 Gmail 取代 MS Outlook 作為收發公司郵件的工具之後，我嘗試著把 Outlook 行事曆轉移到 Google 行事曆上。

目前我在 Outlook 有二個行事曆，一個作為目前工作用的行事曆，用於隨時新增工作、會議...等等；另一個是資訊部行事曆，紀錄著資訊部門每年定期會發生的事件，像是維護合約，定期活動...等。

以下分為三段來說明行事曆的同步、匯出、匯入。

同步問題：

免費的Google Calendar Sync小工具，可以滿足 Google 和 Outlook 行事曆同步的需求。

安裝和操作：

請直接參考文章：重灌狂人--Google Calendar Sync v0.9.3.5 讓Google日曆與Outlook行事曆同步更新！

Outlook 行事曆匯出：

首先點開 Microsoft Outlook 行事曆。
選擇右上功能表【檔案(F)】-->【匯入及匯出(T)】。
選擇｛匯出到檔案｝。
選擇｛逗點分隔值(Windows)｝。
在選擇你要匯出的行事曆。如圖，我選擇｢資訊部行事曆｣，至於平時工作上使用的行事曆，就交給Google Calendar Sync自動去同步吧。
再選擇｛存放的位置｝和｛檔案名稱｝。假設把檔案存放在桌面上。
｛下一步｝存檔完成。

Google 行事曆匯入：

打開 Google 行事曆。
點選左邊的｛我的日曆｝下方的【設定】。
右邊出現｛日曆設定｝之後，選擇【匯入日曆】。
當出現｛新增其他日曆｝頁面後，步驟一：匯入剛剛 Outlook 匯出的 (.cvs) 即可。步驟二：當然是選擇｢資訊部行事曆｣。
步驟三：按【匯入】之後，完成。

現在可以打開 Google 行事曆看看結果囉。

備註：

Google Calendar Sync 啟動之後，是常駐在工具列中，定時執行同步作業。
如果希望立即同步，可以點選工具列右下方的小圖示，選擇「Sync」，系統就會執行同步作業。
目前Google Calendar Sync 只能同步一個行事曆。預設就是 GMail 帳號的那個行事曆，所以我用它作為主要的工作行事曆。
如果有其他行事曆，也想匯入的話，請使用(*.cvs)格式匯出和匯入。
不同的行事曆可以有不同的顏色顯示，方便我們辨識。這點其實 Google 和 Outlook 都能做到，只是表示的方式不同而已。
Google行事曆雖然也能匯入 Outlook 的行事曆(.ics)，但是主旨會變成空白。

其他參考文章：

12.15.2008

[WLW] 使用 Windows Live Writer ＋ SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)

本篇介紹如何運用 Windows Live Writer 和 SyntaxHighlighter (高亮度彩色程式碼關鍵字)的整合，一起來編輯文章中的程式碼，讓你文章中的程式碼更容易觀看，就如同現在經常看到的程式編輯器一樣，會將你的程式碼中的指令、關鍵字...等，用不同的顏色來顯示。

備註：寫著寫著沒想到此篇文章卻變的很長，不容易觀看，也想不到一篇文章居然修修改改了一星期，因此稍微編排一下段落，文章分為以下幾個段落：

一、前言 (通常前言=廢話，可跳過)

二、軟體需求

三、安裝及設定步驟

四、在 Windows Live Writter 插入程式碼的操作

五、在 Blogger 的配合設定 (更新于 2008-12-17)

六、優缺點

七、參考文章

一、前言：

每次在文章中想要秀出程式碼，總是覺得不方便，早期是採用 <code>...</code> (可參考之前的文章: 將程式碼顯示在Blogger上) 的方式，但是每次都得要作好幾道步驟：轉碼、切換HTML編碼、用 code 標籤包起來、貼上程式碼、每一行最後加上 br 換行、切換網頁檢視、挑關鍵字、改顏色...，才能在文章中秀出比較可看的程式碼，實在是非常的不便和麻煩。

雖然很早就知道有 SyntaxHighlighter 這個好工具，但是有幾個原因讓我一直沒有更換：

程式碼之間可用 Textarea or Pre 標籤如下格式包起來。（詳細作法請參考文章中1~4項的介紹。）這種作法和我之前採用的 code 標籤方式類似 (可參考之前的文章: 將程式碼顯示在Blogger上) ，都必須將程式碼的前後用標籤包起來，而 code 標籤算是最簡單的方式，沒有分辨程式語法及彩色關鍵字功能，一切得完全靠自己手動。下圖的顯示就是用 code 標籤的處理結果：(2008-12-17更新)
```
<textarea name='code' class='程式碼的語法名稱'>
...程式碼...
</textarea>

or

<pre name='code' class='程式碼的語法名稱'>
...程式碼...
</pre>
```
需要將 Javascript 放置在自己的網頁空間，但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫，我又懶的申請其他空間。
使用 Windows Live Writer 編輯文章時，還是得切換檢視方式。（在[版面配置]及[HTML編碼]二邊切換＋編輯）

後來雖然有安裝測試 InsertCode，但是整體上操作還是感覺有些不方便。

直到看到 LiveWriter SyntaxHighlighter Plugin--點部落的介紹，才決定測試及改成SyntaxHighlighter 的方式。（目前使用 SyntaxHighlighter 1.5.1）

二、軟體需求：

三、安裝及設定步驟如下：

安裝 SyntaxHighlighter for Windows Live Writer ，打開網頁後，在下圖中的位置下載安裝檔案，然後再執行安裝即可。(安裝後為英文版 2.00，另外該軟體似乎為日本人寫的，有興趣朋友可以下載Source Code研究。)

打開 Blogger 的[版面配置]--[修改HTML]，將下列CSS語法放在 ]]></b:skin> 前面。或是先行下載http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css 再將內容貼上。（測試過採用link方式直接連結Google的CSS檔案，卻不能正確顯示）（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）

.dp-highlighter {
 font-family: "Consolas","Courier New",Courier,mono,serif;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; 
 /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span {
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover {
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar { padding-left: 45px; }
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar { padding-left: 0px; }

.dp-highlighter ol {
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; 
 /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li {
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div {
 list-style: decimal-leading-zero;
 /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div { border: 0; }

.dp-highlighter .columns {
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div { padding-bottom: 5px; }
.dp-highlighter ol li.alt {
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span {
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol { margin: 0px; }
.dp-highlighter.collapsed ol li { display: none; }

/* Additional modifications when in print-view */

.dp-highlighter.printing { border: none; }

.dp-highlighter.printing .tools {display: none !important;}
.dp-highlighter.printing li {display: list-item !important;}

/* Styles for the tools */

.dp-highlighter .tools {
 padding: 3px 8px 3px 10px;
 font: 9px Verdana,Geneva,Arial,Helvetica,sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools { border-left: 0; }
.dp-highlighter.collapsed .tools { border-bottom: 0; }

.dp-highlighter .tools a {
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover {
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { 
 background-color: #fff;
 color: #333;
 margin: 0px;
 padding: 0px;
}
.dp-about table {
 width: 100%;
 height: 100%;
 font-size: 11px;
 font-family: Tahoma,Verdana,Arial,sans-serif !important;
}
.dp-about td {
 padding: 10px;
 vertical-align: top; 
}
.dp-about .copy {
 border-bottom: 1px solid #ACA899;
 height: 95%; 
}
.dp-about .title {
 color: red;
 background-color: inherit;
 font-weight: bold; 
}
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer {
 background-color: #ECEADB;
 color: #333;
 border-top: 1px solid #fff;
 text-align: right; 
}
.dp-about .close {
 font-size: 11px;
 font-family: Tahoma,Verdana,Arial,sans-serif !important;
 background-color: #ECEADB;
 color: #333;
 width: 60px;
 height: 22px; 
}

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments {
 color: #008200;
 background-color: inherit; 
}
.dp-highlighter .string {
 color: blue;
 background-color: inherit; 
}
.dp-highlighter .keyword {
 color: #069;
 font-weight: bold;
 background-color: inherit; 
}

.dp-highlighter .preprocessor {
 color: gray;
 background-color: inherit; 
}

再把下列語法放在 </head> 前面。（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）

<!-- syntaxhighlighter 1.5.1 -->
//<!-- 此連結CSS的方式，不知道為何不能正確顯示，但是位址是正確的
//<link href='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
//-->
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/shBrushCpp.js' type='text/javascript'/> 

//<!--
//window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成
//後，才進行執行。但若是您先前也有程式使用 window.onload 的話
//，這將是會把前一個 window.onload 的動作給覆蓋。
//此段說明內容來自:德瑞克(Derrick)  網址: http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html
//-->
<SCRIPT type='text/javascript'>
//<![CDATA[
window.onload = function ()  {  
dp.SyntaxHighlighter.ClipboardSwf='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/clipboard.swf';  
dp.SyntaxHighlighter.BloggerMode();  
dp.SyntaxHighlighter.HighlightAll('code');  
}
//]]>
</SCRIPT>

四、在 Windows Live Writter 插入程式碼的操作如下：

點選 WLW 功能表上的[插入]--[Code]，或是右側邊的［插入 Code］。如下二圖：
當出現下圖的視窗後，就可以貼上程式碼及調整設定了，操作如下圖說明：
按OK之後，會把剛剛貼上的程式碼當成一個［物件區塊］，放在WLW編輯的文章中，而程式碼的周圍會出現一個虛線框，如下圖:
當你點選在編輯文章中的程式碼區塊時，就會如上圖出現一個虛線框，而在 WLW 的右側邊欄，則會出現一些可調整顯示的相關功能設定，如下圖：
以上就是設定 Blog 文章中的程式碼方式。

五、在 Blogger 的配合設定：(更新于 2008-12-17)

在 [設定］--［格式］檢查一下如下畫面的設定：轉換分行符號 請選（否），不然會在 </p>、<ol>、</ol>...的後面自動再多加一個 <br /> 換行符號。調整過後，幾乎就能和WLW看到的一樣了。（讓我奇怪的是，以前都不會如此，當然以前我也沒見過轉換分行符號的效果，現在終於看到了。　=.=）

六、優缺點：

優點：

不用在WLW切換檢視，再手動加入或修改語法。（幾乎是所見即所得）
不用另找空間存放 Javascript 然後再做呼叫了。（直接套用 Google 的程式。）
不用再手動調整一些語法顏色。（如果相關註解寫的夠清楚，也是很容易閱讀的。）

缺點：

無法針對程式碼中的一些Code 標上特別的顏色。例如：想特別用顏色註明增加/修改的部份。這時候可以多花點心思在程式碼的註解上了，這不也正是一個程式設計師的好習慣之ㄧ嗎。
程式區塊上方的功能表不是中文。畢竟是直接套用 Google 上的 Javascript，有興趣的朋友可以到SyntaxHighlighter下載完整的程式回來研究，在功能表顯示的部份是在 shCore.js 這個檔案內，可以參考 YEHYEH 網站上提供的 shCore中文化下載，不過該網站上的版本似乎是 1.5，而該作者也有作一些修正，建議不要直接和1.5.1版本混合套用。
過長的程式碼，須手動調整一下，才會比較美觀。在IE6中，超過頁面的程式碼會自動折行顯示；但是在 Firefox 卻是會不會自動折行顯示，而是在程式碼區塊最底下顯示一條滾動條。（在ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉)有提到可以調整 Textarea 和 Pre 標籤的CSS樣式來解決此問題，另找時間測試。而該文雖是轉來的，但是因為原文卻已經找不到了，只好僅放上該連結。）--2008-12-17 更新

七、參考文章：

12.08.2008

處理 IE6 不能顯示 PNG 透明背景的問題 (及 Google Sites 問題)

不知道為什麼，今天的網站突然開不出來，每次開到底下狀態列顯示［完成］，畫面就突然消失了，變成一片空白。即使進入 Blogger 的網頁元素，狀況也一樣，網頁元素全部看不見。

後來嘗試著把一些元件(Widget)，圖片及Javascript連結一樣一樣測試去除，最後才發現，原來是之前放在 Google Site 的 Javascript 檔案的問題，移除之後一切就正常能開啟了。(真是，忙了一個上午)

其實 Google Sites 並不允許直接放置 Javascript 檔案(.js)上去，我是將副檔名改成 .txt 放上去的，然後在網站程式碼裡，宣告為 Javascript 呼叫引用。

知道問題之後，只好嘗試著直接將 Javascript 程式碼寫在 Head 區域裡。

我想原因可能是：Google Sites 不再允許你把放上去的檔案，當作 Javascript 呼叫了。

以下為一段處理 PNG 檔案的 Javascript，目的是為了解決在IE6無法顯示 .png 的透明背景。之前的文章在 MenuBar 上的圖片處理問題有做介紹。

程式碼如下：(此段程式碼放在 </Head> 前面，紅色字必須記得加上去)

<SCRIPT type='text/javascript'>
//<![CDATA[
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage) 
{
　if ((version >= 5.5) && (version < 7) &&
　　　(document.body.filters)) 
　{
　　var imgID = (myImage.id) ? "id='" + myImage.id + "'":""
　　var imgClass = (myImage.className) ? 
　　　　"class='" + myImage.className + "'":""
　　var imgTitle = (myImage.title) ? 
　　　　"title='" + myImage.title +"'":"title='" + myImage.alt + "'"
　　var imgStyle = "display:inline-block;" + myImage.style.cssText
　　var strNewHTML = "<span " + imgID + imgClass + imgTitle
　　　　+ " style=\"" "width:" + myImage.width 
　　　　+ "px; height:" + myImage.height 
　　　　+ "px;" + imgStyle + ";"　　　　　　　　　　+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
　　　　+ "(src=\'" + myImage.src
　　　　+ "\',sizingMethod='scale');\"></span>"
　　myImage.outerHTML = strNewHTML 
　}
}
//]]>
</SCRIPT>

使用時，在 <img 標籤裡面加上 onload="fixPNG(this)" 即可。

12.03.2008

[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕

原本按照 Google 自訂搜尋的語法，［搜尋］的按鈕實在很醜，如下圖：

不管怎麼調整，常常都會是破壞畫面的兇手。

現在想將該醜醜的按鈕，換成圖片方式來顯示，方法很簡單，如下：

將原本的搜尋指令，如下：

<input value="搜尋" name="sa" type="submit"/>

置換成：

<input type="image" src="你的圖片位址" onClick="document.formname.submit()">

即可。

另外，我是採用CSS定義整個搜尋區塊的顯示，再用 DIV 配合使用。這樣比較方便處理文字與圖形的對齊問題，CSS定義如下：

<style type="text/CSS">
#searchbar{
display:block;
float:left;
position: relative;
top: 4px;
left: 120px;
width:300px;
margin:0 1px;
color:#ffffff;
border: 0px;
vertical-align:middle; /*to firefox 讓圖片文字垂直居中*/
}
</style>

而原本的 Google 自訂搜尋 Code，前後用 DIV 包起來，如下：

<div id="searchbar">
...[Google 自訂搜尋引擎]程式碼...
</div>

10.31.2008

利用Google自訂搜尋引擎--搜尋站內文章內容

參考文章：

剛剛參考了上面的相關內容，並簡單製作了"站內的搜尋引擎"，當然還有其他進階延伸的功能，先MEMO下來，以後有需要再研究吧。

如果要自動搜索最近一年的文章可以在搜尋引擎的程式碼(Script)中插入下列程式碼：

<input value="y" name="as_qdr" type="hidden"/>

上面是透過 Postable網頁轉出來的，顯示應該如下。

＜input value="y" name="as_qdr" type="hidden"/＞

其他條件請自行參考 Google 進階搜尋的程式碼，或是參考搜尋結果上的網址列，URL上每個"＆"之間就是一種條件，條件的格式大約如下：

｛name｝＝｛value｝。

然後再套用在上面的程式碼即可。

例如：as_qdr 這個 name ==代表日期(時間)的進階搜尋條件，而其 value = y 代表 "最近一年內"。

PS. Postable網頁轉出來的程式碼，似乎不能用 Code 這個 Script 框起來，結果如上。

2008-11-03 原來多了 amp 這一串字，刪除之後就OK了。

2008-11-06 Windows Live Writer 如果在本文貼上，在切換到 Html 畫面時，會自動多出 amp 字串。( 注意：爾後貼上轉換過後的程式碼時，要先切換到 Html 模式再貼上。)

Google Sites 協作平台相關介紹連結

文章來源：0 與 1 謎詭世界

有點期待是否能達到部門協同作業的功能，先把連結MARK，再找時間好好測試。

10.07.2008

Google日曆和Outlook行事曆同步的工具

文章來源 http://ithelp.ithome.com.tw/question/10000900

Google Calendar Sync 這個就可以用了，以下是下載網址
http://dl.google.com/googlecalendarsync/GoogleCalendarSync_Installer.exe

相關搜尋連結：

Google Calendar Sync 讓Google日曆與Outlook行事曆同步更新！【重灌狂人】

阿榮福利味: Google Calendar Sync 0.9.3.3

Google Calendar Sync « GD’s blog

9.30.2008

Google 搜尋相關參數

文章來源：Google和百度网页搜索的查询参数解释僅擷取和 Google 有關的內容如下： ---------------------------------- Google網頁搜索的查詢參數 q (Query)：查詢的關鍵詞 hl (Interface Language)：Google搜索的界面語言　hl=zh-CN 簡體中文語言界面，我們用的Google中文就是這個參數。　hl=zh-TW 繁體中文語言界面，港台地區常使用　hl=en 英文語言界面 start：顯示搜索結果的起始端，如果start=1，則從第2個搜索結果開始顯示；如果你想直接看第搜索結果第21頁，讓start=200即可，由於Google只顯示1000條搜索結果記錄，start理論取值範圍在0--999之間。 lr (Language Restrict)：搜索內容的語言限定限定只搜索某種語言的網頁。如果lr參數為空，則為搜索所有網頁。常用的有：　lr=lang_zh-CN 只搜索簡體中文網頁　lr=lang_zh-TW 只搜索繁體中文網頁　lr=lang_zh-CN|lang_zh-TW 搜索所有中文網頁　lr=lang_en 只搜索英文網頁 ie (Input Encoding)：查詢關鍵詞的編碼，缺省設置為utf-8，也就是說請求Google搜索時參數q的值是一段utf-8編碼的文字 oe (Output Encoding)：搜索結果頁面的網頁編碼，缺省設置oe=utf-8 num (Number)：搜索結果顯示條數，取值範圍在10--100條之間，缺省設置num=10 newwindow：是否開啟新窗口以顯示查詢結果，缺省設置newwindow=1，在新窗口打開搜索結果而面 aq (Ascending Query)：判斷搜索用戶是否是第一次查詢，如果用戶第一次進行查詢，則aq=f(First)；如若進行過多次查詢，則　aq=-1，這個的主要作用應該是統計和放置作弊 as_q(Ascending Search Query)：上一次查詢關鍵詞

9.24.2008

Google 搜尋+時間排序

在 PCuSER電腦人看到一篇文章 [密技]人工改變Google搜尋排序，剔除「不新鮮」資訊學會了一招好用的搜尋祕技，以下節錄自該文章：

在瀏覽器的網址列最後面加上「&as_qdr=d」，你就可以看到Google搜索改頭換面，多出了一個「時間選單」，每個結果後面也會附上檢索收錄的最新時間。

另外為了使用方便，可以先將 Google 的搜尋結果加入我的最愛，下次要使用時，直接在搜尋列KEYIN 新的關鍵字，一樣可以使用，範例可以參考上面 PCuSER電腦人 文章連結的介紹。

AideRSS + GoogleReader 試用

今天在電腦玩家看到一篇文章 AideRSS + GoogleReader 2.0全面開放，有效率閱讀好資訊安裝試用後，發覺還蠻有意思的。

另外在使用 Google Reader 的時候，Firefox 比 IE 快多了。

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

試用了二天發覺往下翻頁要看舊文章時，會因為要計算評分而稍微卡住，想了想，還是把它停用算了，畢竟對我來說，評分不是很重要

-------------------------------------------2008.09.26

9.23.2008

用Google Docs製作「網路問卷調查表」

在 PCuSER電腦人(http://pcuser.pixnet.net/blog/)看到一篇文章太神了！用Google Docs製作「網路問卷調查表」似乎不錯用, 不知道在公司內應用方不方便另外, 在編輯時, 只是想COPY PCuSER電腦人上文章的連結, 發覺在IE上操作不好COPY, 反而在 Firefox 上輕易完成. -------------------------------- 測試之後, 可以寄到公司的信箱, 但是卻是使用連結的方式, 預設要用 Windows Live Mail 開啟, 而且還是簡體中文..............

PS. 1.第一次上傳圖片結果圖片都模糊了 2.第二次把上傳的格式調整成 "大", 才比較清晰, 但是圖片還是很小改天有時間, 再測試吧!!

訂閱：文章 (Atom)