彙整

Posts Tagged ‘Google’

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

2009 年 09 月 02 日 發表留言

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

GMail 提供的簽名檔設定是在 【設定】–>【一般】那一頁面,如下圖:

image

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

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

基於這樣的想法,所以開始找資料和測試。 閱讀更多…

分類:軟體 標籤:, ,

使用 Gmail 來處理公司郵件

2009 年 07 月 31 日 發表留言

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

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

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

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

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

閱讀更多…

分類:辦公應用 標籤:, ,

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

2009 年 07 月 29 日 1 則迴響

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

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

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

分類:軟體, 辦公應用 標籤:,

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

2008 年 12 月 15 日 發表留言

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

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

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

二、軟體需求

三、安裝及設定步驟

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

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

六、優缺點

七、參考文章

一、前言:

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

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

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

    or

    <pre name='code' class='程式碼的語法名稱'>
    ...程式碼...
    </pre>

  2. 需要將 Javascript 放置在自己的網頁空間,但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫,我又懶的申請其他空間。
  3. 使用 Windows Live Writer 編輯文章時,還是得切換檢視方式。(在[版面配置]及[HTML編碼]二邊切換+編輯)

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

直到看到 LiveWriter SyntaxHighlighter Plugin–點部落 的介紹,才決定測試及改成SyntaxHighlighter 的方式。(目前使用 SyntaxHighlighter 1.5.1)

 

二、軟體需求:

  1. Microsoft .NET Framework (2.0 以上)
  2. Windows Live Writer (2008 中文版)
  3. SyntaxHighlighter for Windows Live Writer (2.0 英文版)

 

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

  1. 安裝 SyntaxHighlighter for Windows Live Writer ,打開網頁後,在下圖中的位置下載安裝檔案,然後再執行安裝即可。(安裝後為英文版 2.00,另外該軟體似乎為日本人寫的,有興趣朋友可以下載Source Code研究。)image
  2. 打開 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; 
    }
    

  3. 再把下列語法放在 </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 插入程式碼的操作如下:

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

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

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

image

六、優缺點:

優點:

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

缺點:

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

七、參考文章:

  1. 如何在Google Blog中用SyntaxHighlighter–成長來自學習
  2. 在 Google Blogger 中使用 SyntaxHighlighter–彭嘉宏的學習筆記
  3. SyntaxHighlighter 語法高亮標記–lan 懶惰蟲筆記
  4. 用SyntaxHighlighter在Blog做程式語法教學說明–喬伊的天空
  5. plugin_syntaxhighlight–blogger-ext2
  6. plugin_syntaxhighlighter–Thinking More…
  7. LiveWriter SyntaxHighlighter Plugin–點部落
  8. SyntaxHighlighter for Windows Live Writer
  9. Blogger dp.SyntaxHighlighter斷行問題解決方法–YEHYEH
  10. ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉) (簡體) (2008-12-17 add)

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

2008 年 12 月 08 日 發表留言

不知道為什麼,今天的網站突然開不出來,每次開到底下狀態列顯示[完成],畫面就突然消失了,變成一片空白。即使進入 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)" 即可。

分類:Blogger Hack 標籤:,

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

2008 年 12 月 03 日 發表留言

原本按照 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>

分類:Blogger Hack 標籤:, ,

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

2008 年 10 月 31 日 發表留言

參考文章:

剛剛參考了上面的相關內容,並簡單製作了"站內的搜尋引擎",當然還有其他進階延伸的功能,先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 模式再貼上。)

分類:Blogger Hack 標籤:,
%d 位部落客按了讚: