2008年7月23日 星期三

[故事館01] 生活絮語

.

曾經的年少時光, 許多記憶早已不再復清晰, 但留下的文字記錄卻還是那麼令人回味, ...

另一方面, 也因為現在的我, 已經寫不出那種揉著『輕愁、灑脫、青澀、單純,以為失去的愛情就是唯一』的矛盾的青春吧 !!

好啦, 故事開始了,


在傾盆大雨之中,我常有最晴朗的感覺;那麼在狂歡之後呢?

more ...


(...繼續閱讀.../...CONTINUE...)

2008年7月22日 星期二

Firebug ---- 部落客『玩網頁』的『神器』---- ( CSS 篇 )

getfirebug.com 

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

( Firebug 讓你可以『即時』編輯, 除錯, 觀察 任何網頁的 CSS, HTML, JavaScript。)

.

可別小看這麼一句話, 實際用過之後, 你就會發現 Firebug 是部落客『玩網頁』的『神器』。不只是 Firefox, 既使在非 Firefox 的其他瀏覽器, 都還有 Firebug Lite 可以用。

.

如果不排斥英文網頁, 建議到 http://getfirebug.com/ 官網『看圖說故事』, 相信一定不會空手而回

.

  • Firebug 修改版面的成果

先來看看最近利用 Firebug 修改版面的成果, 和之前不斷的『修改 => 存檔 => 更新頁面 => 試誤 => 修改 => 存檔 => 更新頁面 => 再試誤 =>  ... 』, 比起來, 真的『快了不只十倍速』

修改前 修改後

2008-07-22_182223

2008-07-22_182519

  • 加上綠豆豆, 文章標題就不再打架囉

#ArchiveList ul.posts li {background: transparent url(http://www.blogblog.com/tictac/tictac_green.gif) no-repeat scroll 0pt 5px; padding-left:2.5em; text-indent:0px; margin-left:-1.2em;}

.

修改前 修改後

2008-07-22_182208-1

2008-07-22_182540

  • 標籤雲按鈕底下加了分隔線
  • 文章列表左右間距對稱

#headerBlock {margin:0 0 5px 0;padding:0 0 5px 0;border-bottom:1px dotted;}
#Label1 #postsList ul li {margin-left:-0.8em;}

.

  • Firebug 簡單上手

2008-07-22_200258 

  • 安裝好 Firebug, 會在 [1] 的位置看到一隻『Firebug』, 點一下就可以打開 Firebug 的視窗。 (如果網頁有錯誤, 則這個位置會變成紅字, 但還是可以點一下/或兩下)
  • 到 [2] 的位置選『觀察』,
  • 游標在畫面上移動時, 會有藍色框框標示出 HTML tag 的範圍 (如: [3])
  • [4] 的位置自動顯示對應的 HTML 原始碼區段
  • [5] 的位置則是 CSS / style 的資料 (越上面越優先)

.

  • => 選定後, 在 [3] 的位置點一下
  • 再到 [5] 的位置修改屬性, 例如: -1.2em 變成 -0.8em
    ( 按 enter 就好, 不要加上分號『;』, 否則會語法錯誤 )
  • 另外, 按一下左邊那個image禁止符號, 變成紅色之後, 那個屬性會暫時失效, 以方便觀察該屬性的作用為何
image  image
image  image

.

  • 輸入 或 刪除 特性
image

按右鍵, 選『新特性』
image
還有『自動完成』, 輸入 mar 會提示 margin, 而 margin-r 會提示 margin-right

按冒號『:』再輸入值, 例如: -5em
( 按 enter 就好, 不要加上分號『;』)
image


或者, 按右鍵, 刪除 ...

.

『簡單上手』, 大概就是這樣, 其餘請看底下參考資料, 有更詳細的介紹。

.   

觀察/修改 CSS, HTML

Firebug 具有的強大 HTML 及 CSS 即時檢視和編輯功能,很適合在修改網頁樣式時使用,即使對 HTML 或是 CSS 不熟的人也很能快的了解其架構並加以修改。

... 通常都會做許多的嘗試和組合 ...,每次修改完至少都需要重新整理一次才能看到成果,在這一來一往中無形就浪費了不少時間和精力。

Firebug 能讓開發者在修改網站任何一個元素時,能立即看到成果(有所見即得的味道),加上它會很貼心的幫你檢查錯誤,著實替開發者省了不少氣力。當然它也提供 HTML 結構化顯示和 Tidy CSS 的功能,沒有它我的眼睛應該瞎了吧 :P。

如果你以為這麼好用的工具只能在 FireFox 上用,你就真的是大錯特錯呀!在官方網站上有提供在 IE, Opera, or Safari 使用 Firebug 的方法,有興趣想使用的人就快去嘗試一下這個好用的工具吧。

... 通常都是用 trial-by-error 的方法來做,所以不太有效率,FireBug 包含了一個輕型的 javascript debugger,可以很方便的 set breakpoint 及檢查 variable 的 value 來測試什麼地方出現問題,還可以 inspect Ajax Request 及檢視 Source、style、layout、events 及 DOM,除此以外,還有 javascript command line 等等的功能,

.

測試頁面速度, 網頁檔案大小

.

其他

.


(...繼續閱讀.../...CONTINUE...)

2008年7月21日 星期一

Advanced Label Cloud - 內建『標籤雲』的『標籤文章選台器』

2008-07-21_132103一時興起, 把 LVCHEN 的『標籤文章選台器』改寫成內建『標籤雲』的功能, 底下就來介紹怎麼使用。

 

適用對象 : 使用 LVCHEN 的『標籤文章選台器』, 但不清楚如何加上『標籤雲』功能的人。

因為沿用 LVCHEN 的架構, 所以請參考下面的文章, 先安裝 LVCHEN 的『標籤文章選台器』。

完成之後, 再稍作修改, 就能變成內建『標籤雲』的功能。

.

  • 第一步, 在 模版 或 側邊欄 加入底下的 style

<style>
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 1px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 0 0 -2px;padding:0 0 0 0;}
#labelCloud a img{border:0;margin:0 0 0 0;padding:0 0 0 0;}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
</style>

這邊的 style 設定是從『黑輪的版本』修改來的, 紅色的部份看起來是必要的, 不過, 我沒有仔細研究。或者, 也可以直接使用原始的『黑輪的版本』style。

.

  • 第二步, 修改基本設定

找到安裝程式碼的地方, 將 LVCHEN 的 JavaScript 替換成 內建『標籤雲』功能的版本, 再修改設定,

LVCHEN 的 JavaScript

<script src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Advanced_Label/adv_Label1.2/adv_label_v1.2_pack.js" type="text/javascript"></script>

.

替換成 內建『標籤雲』功能的 JavaScript

<script src=
"http://eucaly61-java.googlecode.com/svn/trunk/alc_12_pack.js" type="text/javascript"></script>

修改設定,

tagListSetting.dropDown = false;    /* 下拉式功能表 和 標籤雲 只能擇一使用 */
tagListSetting.tagsShow = true;    /* 其實 false 也可以, 但就要按『選擇標籤』才會看到標籤雲 */

=> 順利的話, 就會出現『標籤雲』囉 !!

2008-07-21_091118

如果對顯示效果不滿意, 再調整下面的設定

.


  • 第三步, 『標籤雲』的進階設定

tagListSetting.cloudConv = 將 Blogger 的標籤元素轉為『標籤雲』, 預設 true
=> 如果改成 false, 功能會回到 LVCHEN 的原始版本
tagListSetting.cloudFontSize = 標籤雲 [最小字型,最大字型,文章數最小字型,文章數最大字型], 分別控制『標籤字體』和『文章數字體』大小, 預設 [10,20,10,15]
tagListSetting.cloudShowNum = 標籤雲『文章數』是否顯示, 預設 false
因為游標停在上面, 會提示『標籤』和『文章數』, 所以預設不顯示文章數, 好讓標籤雲更清爽
tagListSetting.cloudRGB = 標籤雲顏色, P 須從 100 遞減到 0, 組數不限,
預設 [ {P:100, R:208, G:0, B:0}, {P:50, R:255, G:204, B:0}, {P:0, R:0, G:64, B:128} ], 或者也可以使用我目前的設定
[ {P:100, R:208, G:0, B: 0}, {P:60, R:192, G:192, B: 0}, {P:30, R:0, G:128, B:0}, {P:0, R:0, G:64, B:128} ]
tagListSetting.lineHeight = 設定標籤雲字間的高度,免得字大的時候疊在一起

.

  • 已知的問題

  • 要新增『一大串 STYLE』 , 如果有更好的建議, 還請告訴我
  • 無法設定不顯示小於某個文章數目的標籤 ---- 黑輪的版本有這個功能,
  • 沒有無腦安裝 ---- 因為我不會寫
  • Firefox 3 和 IE7 行距不同

Firefox 3

IE7

2008-07-21_103750 2008-07-21_130911
.
  • 參考資料

LVCHEN 的『標籤文章選台器』。

黑輪的版本, 使用『修改模版』及『一大串程式』產生『標籤雲』

.

對原始程式有興趣的, 請見 alc_12_src.js 
(http://code.google.com/p/eucaly61-java/source/browse/trunk/alc_12_src.js)

.


(...繼續閱讀.../...CONTINUE...)

2008年7月20日 星期日

To jQuery or Not To, 『非 jQuery 習作』- 隨機文章跑馬燈

暫且不討論用 jQuery 來寫程式到底好不好, 因為我大概也沒有足夠的 JavaScript 資歷來討論這件事。不過, 倒是把前一陣子的『 jQuery 習作 - 隨機文章跑馬燈』改寫成不用 jQuery 的方式, 以下和大家分享。

.

最近, 自己寫的『相關文章點播台』外掛和其他功能暫告一段落, 轉而開始注意我的 Blogger 部落格的載入速度, 除了將大部分 JavaScript 加了 defer="defer" 屬性 (IE7似乎有問題), 也拿掉一些少用的 外部 JavaScript, 詳情可以參考以下的說明 :

.

再來, 把前一陣子的『 jQuery 習作 - 隨機文章跑馬燈』改寫成不用 jQuery 的方式。雖然原先 jQuery 的方式沒什麼問題, 但有了 LVCHEN 的提醒, 總是多一分準備會好一些。

...試著不用 jQuery 寫,其實對於學習 js 的幫助也不小,而且 jQuery 其實也有些 bug,太過依賴反而不好,碰到 bug 反而會花上更多時間。

=> LVCHEN 回應 『 jQuery 習作 - 隨機文章跑馬燈 』

.

模版修改方式、其他說明 以及 限制, 請見『 jQuery 習作 - 隨機文章跑馬燈』, 下面只列出 放在 HTML/JavaScript 網頁元素裡的 JavaScript

變數類別 :

  • DOM 物件 : eArch
  • DOM 物件陣列 : aPost, aHref, aTemp
  • 字串 : sTemp

其他注意事項 :

  • 紅色部分, 要搭配模版的架構, 還有 跑馬燈 的命名
  • 藍色部分 : i<20 可以改成其他的文章篇數,
  • 藍色部分 : /*/> */ 是因為輸入 HTML/JavaScript 網頁元素時, < > 必需成對, 用 &lt; 又無效, 所以只好用 JavaScript 註解的方式補成 i<20; /*/> */
  • 整段程式也可以放在模版, 但是 藍色部分 要改成
    for (var i=0; i &lt; 20; i++)

jQuery 的方式

不使用 jQuery 的方式

(IE7 不適用, 最後面有另一版本)

<!-- 記得先載入 jQuery -->

<script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var p_lnk = $('#BlogArchive1').find('.posts').find('a');
var ll = p_lnk.length;
var j = Math.floor((ll) * Math.random());
$('#U002').html('').append('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % p_lnk.length;
var d0=p_lnk.eq(j).attr("href");
d0 = d0.match(/\d{4}\/\d{2}/);
$('#U002').append(d0+shortspc);
p_lnk.eq(j).clone().appendTo('#U002');
$('#U002').append(longspc);
};
}

$(document).ready(function(e){
myScroller()
});
</script>

<script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var eArch = document.getElementById('BlogArchive1');
var aPost = eArch.getElementsByClassName('posts');
var aHref = [];
var aTemp = [];
var sTemp = '';
var i,j;
for (i=0; i</*/>*/ aPost.length; i++) {
aTemp = aPost[i].getElementsByTagName('a');
for (j=0; j</*/>*/ aTemp.length; j++) {
aHref.push(aTemp[j]);
}}
var ll = aHref.length;
j = Math.floor((ll) * Math.random());
sTemp = sTemp.concat('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % ll;
var d0=aHref[j].href;
d0 = d0.match(/\d{4}\/\d{2}/);
sTemp = sTemp.concat(d0+shortspc);
sTemp = sTemp.concat(aHref[j].parentNode.innerHTML+longspc);
};
document.getElementById('U002').innerHTML=sTemp;
}
myScroller();
</script>

.

IE7 不適用 getElementsByClassName 改寫如下 (綠色部份) :

<script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var eArch = document.getElementById('BlogArchive1');
var aTemp = eArch.getElementsByTagName('a');
var aHref = [];
var sTemp = '';
var i,j;
for (i=0; i</*>*/ aTemp.length; i++) {
if (aTemp[i].href.match(/\d{4}\/\d{2}/))
if (!aTemp[i].href.match(/Id=BlogArchive1/i))
{ aHref.push(aTemp[i]); }
}

var ll = aHref.length;
var j = Math.floor((ll) * Math.random());
sTemp = sTemp.concat('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % ll;
var d0=aHref[j].href;
d0 = d0.match(/\d{4}\/\d{2}/);
sTemp = sTemp.concat(d0+shortspc);
sTemp = sTemp.concat(aHref[j].parentNode.innerHTML+longspc);
};
document.getElementById('U002').innerHTML=sTemp;
}
myScroller();
</script>


(...繼續閱讀.../...CONTINUE...)

2008年7月19日 星期六

我的 Firefox 3.0 Addons List

隨著時間推移, 以及 Firefox 3.0 的發佈, 我的擴充套件也有了改變, 有些是「無法升級」到Firefox 3.0 而找來的「替代品」, 有些則是隨著需求而增加或減少的。

.

  • 繼續沿用的擴充套件

(相較於 2008-01-10, 火狐上場主投 -- 我的 Firefox Addons List)

- Extension List Dumper 1.14.1
http://sogame.awardspace.com/
顯示一個擴充套件列表清單

- Google Toolbar for Firefox 3.1.20080605W
http://www.google.com/
讓 Google 的強大功能伴您遨遊網路世界!

- IE Tab 1.5.20080618
http://ietab.mozdev.org/
讓 Firefox 也能內嵌 IE 用雙核心!!!

- Personal Menu 4.1pre
https://addons.mozilla.org/firefox/3895/
取代一成不變的選單, 美化您的 Firefox!

- Secure Login 0.9.2.6
https://blueimp.net/mozilla/
一個提供與 Opera 的 Wand 登錄相類似功能的擴充套件。

- SwitchProxy Tool 1.4.1
http://mozmonkey.com/
A tool that allows you to manage and switch between multiple proxy configurations quickly and easily.

.

  • 新增的 擴充套件

- Aging Tabs 0.7
http://en.design-noir.de/mozilla/aging-tabs/
未使用的分頁隨時間褪色且高亮度選擇的分頁

image

讓您的分頁隨著時間的增加,而慢慢變暗喔!

=> Aging Tabs ~ 分頁會隨時間褪色 (海芋小站, 2008-06-27)


- AideRSS Google Reader Integration 2.0
http://gr.aiderss.com/

如果你同時是「Firefox」「Google Reader」的用戶,...,沒有足夠時間消化龐大的訂閱資訊,...,想要按下〔Mark all as read〕卻又不捨錯過好文章,那麼你更應該試用看看「AideRSS + Google Reader」的資訊評鑑與過濾模組

=> AideRSS + GoogleReader 2.0全面開放,有效率閱讀好資訊 (電腦玩物, 2008-07-13)

- All-in-One Sidebar 0.7.6
http://firefox.exxile.net/aios/
受獲獎肯定的側邊欄擴充套件!

把套件,佈景主題,下載,書籤,JavaScript Console,Sage,ScrapBook 都合到 Sidebar 裡頭,還可以簡化及排序套件跟佈景主題,可以少安裝幾個套件

- CoLT 2.4.1
http://www.borngeek.com/firefox/colt/
在瀏覽器的快顯功能表中,新增一個「複製鏈結名稱」項目。

用各種你需要的格式複製超連結 把超連結用HTML等不同格式複製下來,以我自己來說,對於寫部落格文章要張貼超連結時非常的方便實用。

=> Firefox 3 可用和推薦的擴充套件列表,歡迎補完! (電腦玩物, 2008-06-29)

- Greasemonkey 0.8.20080609.0
http://www.greasespot.net/
Firefox的使用者腳本管理器,讓您的網頁利用變的更方便

只要裝上Greased Lightbox就可以直接在頁面開啟圖片 縮小也很簡單,只要按下...「-」(減號)... 放大當然就是按「+」(加號)囉 按下最左邊看起來像「旋轉」的按鈕,則是可以自動播放照片 左右方向鍵可以切換下一張或是上一張 在Flickr裡面也是很好用的,

=> [GMScript] 方便看圖的Greased Lightbox (Meet See, 2008-07-14)

  • 目前只裝了 Greased Lightbox (v0.17)
    不過, 在 Blogger 線上編輯時, 切換『修改HTML』和『撰寫』, 有時似乎會因為 Greased Lightbox 而有問題

- Locationbar² 1.0.3
http://en.design-noir.de/mozilla/locationbar2/
Formats and linkifies addresses in your Location bar.

image

讓使用者可以依自己喜好自訂網址列的顯示方式。

=> 值得一提的火狐套件更新:NoScript、Locationbar (電腦玩物, 2007-03-02)

- McAfee SiteAdvisor 26.6
http://www.siteadvisor.com/
可提供安全搜尋與瀏覽的 McAfee SiteAdvisor Firefox Extension

- Nightly Tester Tools 2.0.2
http://www.oxymoronical.com/web/firefox/nightly
Useful tools for the nightly tester.

  • => 不相容 Firefox 3 的套件, 靠 Nightly Tester Tools 擋著...

- Password Exporter 1.1
http://passwordexporter.fligtar.com
匯出及匯入您已儲存的密碼。

- Pmog 0.418
http://pmog.com/
Interface for the online game PMOG.

現實網路尋寶冒險,Firefox上的被動式多人線上遊戲 一個可以讓你在Firefox上玩的線上遊戲,事實上你也沒有真的在玩,因為上網的任何一個動作,就等於是參與這個遊戲。

=> 現實網路尋寶冒險,Firefox上的被動式多人線上遊戲:PMOG (電腦玩物, 2008-03-01)

- Tab Scope 0.2.2.8
http://www.xuldev.org/tabscope/
Preview and navigate tab contents through popup.

當滑鼠移到 tab 上面的時候會以快顯小視窗的方式顯示網頁的預覽縮圖。不僅如此,在這個小小的預覽視窗上還能操作上一頁、下一頁、重新整理及停止載入等動作。

=> [Firefox Add-ons] tab 的預覽小視窗功能 - Tab Scope (0 與 1 的邂逅 @joaoko, 2007-05-09)

.

  • 「無法升級」到Firefox 3.0, 或其他原因 而找來的「替代品」

之前的 addons (2008-01-10) 現在的 addons (2008-07-19)
- DOM Inspector 1.8.1.11
http://www.mozilla.org/projects/inspector/
Inspects the structure and properties of a window and its contents

- Firebug 1.2.0b6
http://www.getfirebug.com/
Web Development Evolved.

- Drag de Go 0.2.5
http://forums.mozillazine.org/viewtopic.php?t=440259
允許您使用拖曳手勢來執行幾個常用命令

- Easy DragToGo 1.1.2.1
http://addons.sociz.com/firefox/700/

輕鬆使用拖動手勢打開分頁

- Tab Mix Plus 0.3.6
http://tmp.garyr.net/
強化瀏覽器的分頁瀏覽功能

- Tab Mix Lite CE 3.0
http://addons.sociz.com/firefox/54/
輕巧方便的分頁擴充套件


- Session Manager 0.6.1.13
http://sessionmanager.mozdev.org/
儲存及還原所有瀏覽視窗的狀態。

- Firebug 1.2.0b6
http://www.getfirebug.com/
Web Development Evolved.

Firebug,它是網頁設計師的好幫手,不但可以測速度、顯示CSS標籤、框架與各種網頁程式碼的內容,更可幫我們測試網頁下載速度與、除錯等,...,真的相當好用唷。

=> Firebug 幫網頁稱重量、測速度,抓出拖慢網站的元兇! (重灌狂人, 2008-06-16)

.
  • 既使裝了 Nightly Tester Tools 也還是被停用的

- CLEO 3.3.1
http://customsoftwareconsult.com/extensions
Create multi-addon install package (Cleopack)

- FEBE 5.3.1
http://customsoftwareconsult.com/extensions
Backup your Firefox data

- Free Download Manager plugin 1.3
http://freedownloadmanager.org/
Free Download Manager integration with Firefox browser.

- 新同文堂 (New Tong Wen Tang) 0.3.8.9
http://rt.openfoundry.org/Foundry/Project/?Queue=333
中文繁簡轉換 (Chinese Simplified<->Traditional switcher)

.

  • 停用或少用的

停用或少用的 原因 或 功能重複 的
- Net Snippets Toolbar 1.0.5
http://www.netsnippets.com/
Internet Research Software for Mozilla Firefox
用 NepSnippets Desktop Bar (外部程式) 替代, 把『鏈結』 或『選取範圍』拖放到 Desktop Bar, 就可以收錄 捷徑 或網頁內容到 NetSnippets,
- PlainOldFavorites 1.0
http://www.iosart.com/firefox/plainoldfavorites/
Use Internet Explorer Favorites directly from Firefox
用 NepSnippets Desktop Bar (外部程式) 替代,
- ScrapBook 1.3.2.5
http://amb.vis.ne.jp/mozilla/scrapbook/
協助您收藏網路各項資料,簡單方便!
用 NepSnippets Desktop Bar (外部程式) 替代,

- Zotero 1.0.6
http://www.zotero.org

暫無需求

- Download Statusbar 0.9.6.3
http://downloadstatusbar.mozdev.org/View and manage downloads from a tidy statusbar

- All-in-One Sidebar 0.7.6
http://firefox.exxile.net/aios/
把 下載 合到 Sidebar 裡頭,

- Gmail Manager 0.5.5
http://www.longfocus.com/firefox/gmanager/
Gmail accounts management and new mail notifications.

有時會自動被登出 Google Reader ...

- Leak Monitor 0.4.2
http://dbaron.org/mozilla/leak-monitor/
This extension pops up an alert dialog to warn chrome and extension developers about one particular type of leak. It warns when windows close but leave other code pointing at their JavaScript objects.

一直出現訊息, 不知 leak 的真假

- PicLens 1.7.0.3458
http://www.piclens.com/
Discover More

少用

- QuickDrag 1.0.5
http://mozilla.ktechcomputing.com/quickdrag/
Extends the function of the drag-and-drop mouse gesture so that it can be used to load URLs, do a web search of selected text on a page, or save an image on a page.

- Easy DragToGo 1.1.2.1
http://addons.sociz.com/firefox/700/
輕鬆使用拖動手勢打開分頁

- QuickProxy 2008.05.30
Quickproxy creates a statusbar button to quickly turn the proxy on and off.

- SwitchProxy Tool 1.4.1
http://mozmonkey.com/

.


(...繼續閱讀.../...CONTINUE...)

2008年7月18日 星期五

JavaScript 壓縮 與 除錯版本維護

不但找到合用的 JavaScript 壓縮服務 (Javascript Compressor), 同時還發現它的『特異功能』解決了我的另一個煩惱 ---- 維護『除錯版本』和『上線版本』的一致性。

於是, 壓縮的時候 會順便從『除錯版本』裡『自動拿掉除錯指令』變成『上線版本』, 而不用分成兩個檔案。

.

先簡單介紹 JavaScript 壓縮 ---- (底下借用各家的說明)

... 先「壓縮」,經過「瘦身」以後放上網路,這樣檔案會變小,使用者下載讀取的速度也會變快。... JSMin,... Packer,以及很多 Javascript Library 愛用的 Javascript Compressor,這些都可以讓你自己外掛或自行撰寫的 Javascript 達到壓縮的效果(減少不必要的字元),檔案變小、程式碼變少自然載入就會變快,這樣也是一種優化的好辦法。

http://javascriptcompressor.com/,它把原本的程式碼轉換成跟天書一樣,而且還可以測試還原回來的效果。
在javascript的壓縮,會把註解和突排刪除,甚至把程式全部變為一行。但是,將程式全部變成一行,這個問題就大了。因為如果在程式中,沒有每個敘述很嚴謹的用分號(;)來結束的話,從多行變成一行之後,程式會出錯。

Javascript Compressor 壓縮, 某些情況下,壓縮率可以接近 zip 壓縮

不過使用上需要注意 JavaScript 的語法格式, 最常遇到問題就是斷行與分號

JSLint 幫你檢查未定義的變數、函數、陳述式結尾有沒有加分號(;)、變數使用之前要先用 var 宣告、使用非數字的變數要用 === 或 !== 讓比對的時候不要自動進行轉型(Casting)、盡量不要使用 eval 函數、... 好多好多,驗證完之後會立即出一份完整的報告給你。

.

再來, 是 Javascript Compressor 的『特異功能』, 只要在行首開頭加上三個分號 (;;;), 那一整行就會在壓縮時被當做註解一樣移除,

和註解不同的是, 這些指令在『除錯版本』會被執行, 但不會出現在『上線版本』, 於是壓縮的時候 會順便從『除錯版本』裡『自動拿掉除錯指令』變成『上線版本』, 而不用分成兩個檔案。

就像底下這樣, 兩個除錯函式 debugWrite, debugWriteIf, 和呼叫它們的部份都不會出現在壓縮過的『上線版本』裡

;;; rpsFunc.debugWrite = function(a) {
;;; rps$.msg.append('<li>' + a + '</li>');
;;; };

;;; rpsFunc.debugWriteIf = function(cond, a) {
;;; if (rpsDebug.mode.search(cond)>=0) {
;;; rps$.msg.append('<li>' + a + '</li>');
;;; }
;;; };

rpsFunc.redrawBoard = function () {
myHeadmsg = DispReplace(rpsDisp.ListHead);
;;; rps$.Board.find('#headmsg').text('').append(myQQ + myHeadmsg + '</span>'); // for debug
rps$.Board.find('#headmsg').text('').append(myHeadmsg); // for debug
rps$.Board.find('#progress').text('');
rps$.mainList.html('<ul>'); // mainList renew
...

.

至於『除錯版本』不執行, 但『上線版本』要執行的指令則可以這樣處理 :

  • if 搭配一個變數控制『除錯版本』要不要執行, 但 if 及對應的 { } 則不會出現在『上線版本』, 中間的指令就會被執行

  • 『除錯版本』的指令被夾在註解裡, 但『上線版本』則會執行這些指令

;;; if (!rpsDebug.jsonLocal) {
rpsFunc.readOK();
;;; }

...

;;; /*
rps$.Board.append('<br />');
;;; */

.


(...繼續閱讀.../...CONTINUE...)

2008年7月17日 星期四

相關文章點播台 -- RPS 1.0 beta 測試

前一陣子開始改良『依相關度排序的相關文章』, 現在已經進入beta 測試。

目前取的名字叫『相關文章點播台』-- RPS 1.0 (Related Posts Surf), 相較於 之前從 Abin's Tech Note 那邊修改過來的版本, 主要的不同為 :

  • 以外掛的形式執行, 完全不用改模版, 只要一行就可以安裝
  • 增加換頁功能
  • 增加自訂設定

.

  • 安裝

真的只要一行, 就像底下這樣, 只要在載入 jQuery 之後再執行就可以。程式會找到預設的位置顯示相關文章

<script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-mini.js" type="text/javascript"/>

然後, 如果一切順利的話, 就會看到類似底下的畫面

 2008-07-17_214909

.

  • 基本設定

如果沒有順利顯示, 或是位置不如預期, 可以加入以下的參數 :

<script type="text/javascript">

rpsOpt.LocateBoard = ['append', '.post-footer'];
rpsOpt.LocateLabels = ['.post-footer', '.post-labels', 'a'];

</script>

如果你的部落格網址太特別, 或是你想『顯示另一個 Blogger 部落格的相關文章』 , 或是調整每一頁的文章篇數:

<script type="text/javascript">

rpsOpt.blogRoot = 'http://eucaly61.blogspot.com/';
rpsOpt.Lines = 10;

</script>

.

其中 'append', '.post-footer' 表示『顯示位置』的 CSS 設定,

  • 'append', 也可以改成 'prepend''after''before', ---- 和 '.post-footer' 的關係如下所示,
  • 第一個參數如果不是上述四個, 則會視為 CSS 位置表示語法, 並預設為 'append'
  • 再來是 CSS (Cascading Style Sheets) 位置表示語法, 簡單的說, 『.』句號代表 class, 『#』井號代表 id, 開頭都沒加代表 html tag,
  • 可以設定多個 CSS 位置表示語法, 會讓定位更精準, 記得都要加上引號
  • 目前預設『必須剛好』找到一個位置, 才會顯示, 這是為了區別『單篇文章』,『首頁』和『瀏覽日期/標籤』。

如果改為 rpsOpt.LocateBoard = ['.post-footer', '.post-footer-line-1']; 則會顯示在 [B] 的位置。

[before]
<div class='post-footer'>
[prepend]
<p class='post-footer-line post-footer-line-1'>
... 張貼者: XXXX 位於 ... </p> [B]
<p class='post-footer-line post-footer-line-2'> ... 標籤:... </p>
<p class='post-footer-line post-footer-line-3'>
... 這裡不一定每個人都有內容 ... </p>
[append]
</div>
[after]

.

如果上面對了, 至少會顯示『載入中』

2008-07-17_215300

再來是定位標籤資料, rpsOpt.LocateLabels = ['.post-footer', '.post-labels', 'a']; 如果你的模版和下面不一樣, 請自行修改

  • 如果你的『標籤名稱』不是用 <a href="..."> 超連結包住,
    .... 目前暫時無解, 請期待 下一版
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
... 張貼者: XXXX 位於 ... </p> <p class='post-footer-line post-footer-line-2'>
<span class="post-labels">標籤:
<a href="..." rel="tag">標籤名稱1</a>,... </p>
<a href="..." rel="tag">標籤名稱2</a>,... </p>
</span>

.

  • 進階設定

<script type="text/javascript">

rpsDisp.Loading = '相關文章載入中 ...';
rpsDisp.ListHead = '約有 %PostNum% 篇相關文章,以下是第 %PostNumFrom% 至 %PostNumTo% 篇';
rpsDisp.ListLine = '%PostRank% %PostTitle% - %PostDate%';

</script>

可以任意調換順序, 或者如果不想看到日期或相關度, 也可將 %PostRank% %PostDate% 等 拿掉。

<style>
#rpsBoard {
background: #F0F0F0;
border:2px dotted #ccc;
padding: 0px 5px 5px 15px;        /*上 右 下 左*/
margin: 10px 10px 5px 0px;        /*上 右 下 左*/
}
</style>

替相關文章區塊上色 ...., 或 padding, margin 請依版面自行調整。

.

  • 除錯

有問題的話, 可以試試以下的版本, 會有除錯訊息
[+/-] show/hide debug message

<script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-debug.js" type="text/javascript"/>

<script type="text/javascript">

rpsDebug.mode = '%blog%label%jsOK%jsOK-full%';

</script>

.

  • To Do

可能的問題, 或預計增加的功能

  • 不同模版的相容性
  • 不同瀏覽器的相容性 (FF3, IE6, IE7, ...)
  • 載成更多 json Feed, 目前每個標籤只載入 20 篇
  • 調整 相關度計算方式
  • 顯示/隱藏文章摘要

想到但不一定會做的

  • 抓取同一網頁的其他資料, e.g. feedjit "Visitors to this page also liked"
  • 顯示每篇文章的標籤
  • 選擇哪些標籤的優先權較高

.


(...繼續閱讀.../...CONTINUE...)

2008年7月15日 星期二

黃金葛

080713-IMG_8648

『黃金葛』的正確英文是 Devil's lvy, 學名:Epipremnum aureum,


080414-IMG_8079

三月左右買的兩小盆黃金葛, 如今已經分株衍生了另外三盆, 先介紹放在辦公室的

四月初, 剪了一些放在辦公室
080605-IMG_8371

第一次抽的芽沒有長得很好, 不過 0605 再抽第二次芽, 就長得不錯
080613-IMG_8442

到 0613, 新長出的葉子已經長大許多
080613-IMG_8443

0613, 根系

.

在網路上號稱『養不死』的『黃金葛』, 還是被我在分株/水耕的過程中養死過一次。經過檢討, 分株之後, 先放在陽光較充足的窗邊 (不一定要直接日照), 待長出新根之後, 再移到室內。這樣, 就沒再發生意外。

080613-IMG_0001

最早買的兩盆, 目前在陽台,
080621-IMG_8535

看到2~3公分的氣根, 從氣根下方的莖剪下, 暫放在陽光較充足的窗邊, 水耕

待長出新根之後, 再移到室內。

.

080615-IMG_8458
0615 放在 浴室的 其中一盆
080713-IMG_8649
0713

.

080615-IMG_8456
0615 放在 浴室的 另一盆
080713-IMG_8648
0713

.

這些都是從陽台那邊剪下來分株的, $39x2, 真的很划算。色差的關係是因為其中有間浴室採光較差 (色調偏黃的那間), 所以隔一到兩星期, 就把它們對調。

.


(...繼續閱讀.../...CONTINUE...)

2008年7月11日 星期五

用 jQuery 動態載入 json-in-script 的作法

在準備改版『依相關度排序的相關文章』的過程之中, 幾乎可以確定要用 jQuery 來寫, 不過其中有一個問題, 就是如何 動態載入 不同類別標籤 的 JSON, ....

好啦, 沒有打算要用 jQuery 來寫 json-in-script 的人, 請再忍耐一下, 看完下面這一句再轉台,

json-in-script 要當作 JavaScript 來載入, 所以用 jQuery 動態載入 json-in-script, 也就是要用 jQuery 動態載入 JavaScript 的意思。

今天終於讓我試出來了, 簡單的說, 要使用 jQuery 的 $.getScript() 或 $.ajax();

.

2008-07-17 : 請見意見的最新訊息, 或看底下是否有新的『相關文章』

原本, 靜態呼叫 json-in-script 的方式, 像底下這樣, 其中 VB 是類別標籤的名字, 問號 ( ? ) 後面的 alt=json-in-script&callback= ... , 則是設定回傳格式為 json-in-script, 以及指定 callback function

<script src="http://eucaly61.blogspot.com/feeds/posts/default/-/VB?alt=json-in-script&callback=RelatedLabels" type="text/javascript"/>

再來, 要注意的是 json-in-script 和 JSON 的差別,

  • JSON 指的是『資料格式』, 詳見 JSON Feeds (Beautiful Beta),
    也就是底下紅色的部分,
  • json-in-script 則是將 JSON 資料 回傳給 callback function,
    將 JSON 塞在括號內, 再呼叫 RelatedLabels()

不信的話, 點選上面 script src= 的 http:// 連結, 就會看到如下的內容,

RelatedLabels({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","id":{"$t":"tag:blogger.com,1999:blog-8685080495061991394"},"updated":{"$t":"2008-07-10T22:12:07.563+08:00"},"title":{"type":"text","$t":"Beyond Alternative"},"link":[{"rel":"alternate","type":"text/html","href":http://eucaly61.blogspot.com/search/label/VB},
...
openSearch$totalResults":{"$t":"3"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-8685080495061991394.post-6282815987510613229"},"published":{"$t":"2008-06-27T23:23:00.001+08:00"},"updated":{"$t":"2008-06-28T00:29:03.151+08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"程式設計"},{"scheme":"http://www.blogger.com/atom/ns#","term":"VB"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Excel"}],"title":{"type":"text","$t":"[Excel 巨集] Address 函數 -- 傳回『範圍參照』"},"content":{"type":"html","$t":"\u003cp\u003e自從 2008-02 提出
... });

.

下面列出 jQuery 載入 JavaScript 的語法,
要記得, json-in-script 要當作 JavaScript 來載入

http://docs.jquery.com/Ajax

.

jQuery.getJSON( url, data, callback ) Returns: XMLHttpRequest

Load JSON data using an HTTP GET request.

jQuery.getScript( url, callback ) Returns: XMLHttpRequest

Loads, and executes, a local JavaScript file using an HTTP GET request.

.

下面是測試成功的程式,

function jsOK(a){
$('#msg').append('<p> END callback : ' + a + ' / ' + relatedPostsNum + '</p>');
for (var j=0; j < relatedPostsNum; j++) {
$('#msg').append('<p>' + relatedDates[j] + ' / ' + relatedTitles[j] + ' [' + relatedUrls[j] + '] </p>');
}
}

$(document).ready(function(){
$('body').prepend('<div id="msg"></div>');
$('#msg').append('<p> ready BEGIN </p>');
var feedUrl = "http://eucaly61.blogspot.com/feeds/posts/default/-/VB?alt=json-in-script&callback=RelatedLabels";

$.getScript(feedUrl, jsOK);
$('#msg').append('<p> ready END </p>');
});

其中

  • RelatedLabels 將 JSON 讀到陣列 (請參考上一篇),
    -- 根據實驗結果, 在這個函式中就算使用 jQuery, 也無法改變頁面內容

  • jsOK 則是在 json-in-script 執行成功之後 由 jQuery 呼叫,
    -- 根據實驗結果, 在這個函式中可以成功使用 jQuery 改變頁面內容

由此, 建議 callback 的 RelatedLabels 只要專心處理 json-in-script 的資料即可。至於頁面的資料顯示或其他需要 jQuery 的處理程序, 則留待 jsOK 再來處理

由執行結果得知, json-in-script (含 callback) 和 jsOK 會在背景執行 (非同步)。因為有遠端處理和回傳的延遲, 通常會到最後才出現結果, 而不會 夾在 "ready BEGIN" 和 "ready END" 之間。

ready BEGIN

ready END

END callback : undefined / 3

2008-06-27 / [Excel 巨集] Address 函數 -- 傳回『範圍參照』 [http://eucaly61.blogspot.com/2008/06/excel-vba-address-function.html]

2008-06-04 / 我的 Excel 日記 [http://eucaly61.blogspot.com/2008/06/my-excel-diary.html]

2008-02-20 / [程式設計構想] 使用 EXCEL 巨集合併/比對/更新多種格式的通訊錄 [http://eucaly61.blogspot.com/2008/02/excel-vb-to-managecombine-contact.html]

.

也可以使用比較低階的 $.ajax(), 它有 更多設定, 包括同步 (async: false), 非同步 (async: true) 等 ..., 不過目前試過 同步 (async: false) 並沒有看到預期的結果就是了。

$.ajax({
async: false,
type: "GET",
url: feedUrl,
dataType: "script",
success: jsOK
});

.

再來, 很奇怪的一件事, 如果使用下面這一行, 雖然成功傳值 'A' 給 jsOK, 但 json-in-script 卻沒有正確執行 (項目數為 0)

$.getScript(feedUrl, jsOK('A'));

ready BEGIN

END callback : A / 0

ready END

.

最後, 如果不想使用 jQuery, 那就用老方法, 例如 :

document.write, 但必需在 『網頁載入完畢之前』執行

document.write('<script src="..." type="text/javascript"/>');

或者

var s = document.createElement('script');
s.type = "text/javascript";
s.src = path;
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(s);

.


(...繼續閱讀.../...CONTINUE...)

2008年7月10日 星期四

jQuery 習作 - 隨機文章跑馬燈

請看視窗底下的『隨機文章跑馬燈』, 這個算是我自己的 jQuery 習作, 不過也成功取代了載入速度不穩定的 ai-Ticker-J

.

  • 文章資料來源 (1)

一般的作法都是以 RSS Feed 提供『文章資料』, 寫在程式裡則以 JSON Feed 較方便。不過, 我要用不一樣的方法, 因為『文章資料』其實很多人的頁面都有 (就在某個網頁元素/widget 裡), 可以省去抓 Feed 的時間 (估計 0.5 ~ 2 秒)。

答案在更後面, 請耐心看下去。

.

  • 跑馬燈語法

跑馬燈語法 Scrolling Text - Marquee HTML Code (英文), 簡單的說, 就是包在 <marquee> ... </marquee> 裡面, 再加上 滑鼠移到上面時會暫停。其他的設定 (速度, 方向, ...) 該處也有說明。

<marquee onmouseover="this.stop()" onmouseout="this.start()">
要顯示的跑馬燈文字 </marquee>

.

  • 固定在視窗底下的語法

固定在視窗底下的語法, 沒有專文介紹, 但是在『挖哩勒~胡說八道』那裡, 找『頁面原始碼』的 #finalfooter2 就知道囉 -- (或者看後面, 我的程式碼 <span style=... 那一長串)

這是另外一個Hack喔,跟這個無關
因為有點複雜,所以我沒有寫
(最新文章跑馬燈, 挖哩勒~胡說八道)

.

  • jQuery 概念

可以先看 jQuery 教學 - 基礎篇 (wmh, jsGears)

我是 jQuery 新手, 所以只簡單列出曾在 LVCHEN 那裡看過的問題

... jQuery 必須先被執行,所以不管你放在哪裡一定要放在 jQuery 之後執行 ... (標籤文章選台器 1.2 版介紹與安裝, LVCHEN)

... 阿土伯的外掛是使用 jQuery 1.1.4,問題就發生在 jQuery 1.1.4 與 1.2 版以上是部份不相容的,如果同時安裝會導致留言開關不正常,... (最新回應 2.0 來囉!, LVCHEN)

... 記得jQuery 不要裝兩次 (加強型最新回應 for blogger ..., LVCHEN)

.

  • 文章資料來源 (2)

你答對了嗎?

.

2008-07-09_225128 

就是這個, 只要使用『階層式』的『網誌存檔 / BlogArchive', 文章資料就是現成的, ....


『階層式』『網誌存檔』的 HTML 原始碼  摘錄如下,
紅色部分 就是 jQuery 抓取資料的 HTML 標記, 還有我們需要的文章資料,
<div class="widget BlogArchive" id="BlogArchive1">
...
<a class="post-count-link" href="http://eucaly61.blogspot.com/2008_07_01_archive.html">七月</a>
<span class="post-count" dir="ltr">(2)</span>
<ul class="posts">
<li><a href="http://eucaly61.blogspot.com/2008/07/blog-post.html">[轉貼] 送愛心到泰北</a></li>
<li><a href="http://eucaly61.blogspot.com/2008/07/related-posts-with-correlation.html">依相關度排序 ---- 更有看頭的『相關文章』功能</a></li>
</ul>
...

不過, 雖然省掉了 JSON callback, 但還是有限制

  • 要使用『階層式』網誌存檔 / BlogArchive'
  • 只有『年, 月』, 而沒有『日』, 無法顯示文章的完整日期
  • 只會先載入較新的文章資訊 (約50篇), 除非 手動 或 自動 點開 摺疊的資料

.

當然, jQuery 也有自己的 方式來執行 JSON callback, 這部份留待日後再來嘗試, 有興趣的人可以參考 :

http://docs.jquery.com/Ajax

jQuery.getJSON( url, data, callback )    Returns: XMLHttpRequest

Load JSON data using an HTTP GET request.

jQuery.getScript( url, callback )    Returns: XMLHttpRequest

Loads, and executes, a local JavaScript file using an HTTP GET request.

.

  • 程式碼

先將底下的 HTML 加到 模版, 這麼做可以先『佔位置』, 讓 瀏覽器 讀入頁面時, 能正確排版。 至於位置其實沒那麼重要, 只要在 <body>...</body> 裡面即可, 例如 content-wrapper 之前。還有, 藍色部份的顏色, 請自行調整。

...
</div>
加在這裡
<div id='content-wrapper'>
...

<span style="position:fixed; border-top:1px solid #F0FFF0; border-bottom:1px solid #A8CEA8; background-color:#C0FFC0; width:100%; left:0; text-align:left; color:#000; font-size:12px; z-index:10000; opacity:0.8px; filter:alpha(opacity: 80); _position:absolute; bottom:0; _top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight); padding-top:2px; padding-left:10px; padding-bottom:0; vertical-align:bottom; line-height:1.0; margin:0;">
<marquee id="U002" onmouseover="this.stop()" onmouseout="this.start()">
跑馬燈載入中 ... / Loading Marquee ...
</marquee> </span>

.

再將底下的 JavaScript 放到 HTML/JavaScript 網頁元素裡,

  • $() 是 jQuery() 的別名,
  • $(document).ready, 會在整個文章載入之後才執行, 所以網頁元素位置不是那麼重要, 只要在載入 jQuery 之後,
  • 紅色部分, 要搭配模版的架構, 還有 跑馬燈 的命名
  • 藍色部分 : i<20 可以改成其他的文章篇數,
  • 藍色部分 : /*/> */ 是因為輸入 HTML/JavaScript 網頁元素時, < > 必需成對, 用 &lt; 又無效, 所以只好用 JavaScript 註解的方式補成 i<20; /*/> */
  • 整段程式也可以放在模版, 但是 藍色部分 要改成
    for (var i=0; i &lt; 20; i++)

<!-- 記得先載入 jQuery -->

<script type="text/javascript">
function myScroller() {
  var shortspc = ' ';
  var longspc = ' ';
  var p_lnk = $('#BlogArchive1').find('.posts').find('a');
  var ll = p_lnk.length;
  var j = Math.floor((ll) * Math.random());
  $('#U002').html('').append('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
    j = j+1;
    j = j % p_lnk.length;
    var d0=p_lnk.eq(j).attr("href");
    d0 = d0.match(/\d{4}\/\d{2}/);
    $('#U002').append(d0+shortspc);
    p_lnk.eq(j).clone().appendTo('#U002');
    $('#U002').append(longspc);
  };
}

$(document).ready(function(e){
  myScroller()
});
</script>

.

其實也試過不修改模版, 而是將 綠色部分 也加在 程式中, 再用 $('body').prepend 的方式加上去, 但是只有 Firefox 可以正確顯示, IE7 則不行。

...
function myScroller() {
  var shortspc = ' ';
  var longspc = ' ';
  $('body')
  .prepend('<span style="..."><marquee id="U002" onmouseover="this.stop()" onmouseout="this.start()">
跑馬燈載入中 ... / Loading Marquee ... </marquee> </span>');
  var p_lnk = $('#BlogArchive1').find('.posts').find('a');
...

.

小結 -- 我的收穫

  • 寫了第一個 jQuery 程式
  • 不用再呼叫 ai-Ticker-J
  • 知道在 模版 和 網頁元素 要用不同方式處理 < >

.


(...繼續閱讀.../...CONTINUE...)

2008年7月9日 星期三

Blogger, JavaScript, JSON, jQuery 說明 及 教學 彙整

以下列出最近研究中的 Blogger, JavaScript, JSON, jQuery ... 的 說明 及 教學文件, 有需求的人可以從中參考。

.

Blogger 官方說明文件

Blogger Help > 自訂您的網誌 > 版面配置 > 瞭解更多資訊
Blogger Help > Customize Your Blog > Classic Templates > Advanced Use

.

Blogger 自訂/改造 教學

每一個出處都有許多 Blogger 自訂/改造 的相關文章, 以下僅列出『較具代表性』的, 其他造訪各站連結。

BLOGGER HACK (Abin's Tech Note)
經典的說明都從 Abin Tech Note 開始 ...

Blogger改造之旅 (白花花)
有人開路在先, 你也可以跟著改造你的 Blogger

部落格工具箱 (iPlay99)

Blogger (挖哩勒~胡說八道, 或使用該站右側欄的『文章選台器』)

.

JavaScript 教學

Java, JavaScript 說明文件

.

JSON Feed 說明文件

  • JSON Feeds (Beautiful Beta)
    ... 原來 JSON feeds 裡頭有每篇文章的標籤 ...
    json.feed.entry[i].category[j].term

.

jQuery 教學

jQuery 說明文件


http://docs.jquery.com/Core

- jQurey 說明文件
2008-07-09_093658

http://visualjquery.com/1.1.2.html
- jQuery 指令語法及範例 (階層式查詢)

2008-07-09_091550

.


(...繼續閱讀.../...CONTINUE...)

2008年7月7日 星期一

[轉貼] 送愛心到泰北

送愛心到泰北 (http://www.wretch.cc/blog/jlcamry/14107368)

捐贈方式(1) 家裡若是有不穿 不用的衣物或是鞋子 只要不是太過時髦 都可以寄送到以下的地址... (沙鹿)

捐贈方式(2)

直接寄到泰國 ..... (詳見原文)


只要鞋子不是高跟的話 都可以捐贈 看看以下的連結.... 可以感受到自己是很幸福的..... 04/25~28 94vup 愛心體驗營活動 04/25 日記 04/26 日記 04/27 日記 04/28 日記 有新鞋可穿真好,... (更多圖片請看以上原網頁)
以下是去年剪貼的舊文,
  • 送愛心到泰北
  • 拿到網拍上,做慈善捐贈
  • 家扶中心二手商品義賣

送愛心到泰北

恩~送愛心到泰北如何? 不是開玩笑喔 網址如下 http://www.rakthai.idv.tw/phpbb2/viewtopic.php?t=16307 -------------原Post引言----------- 捐助物資... 請直接郵寄至以下地址 Room 603, 111/99 Moo. 1 T. Nongpakrang A. muang Chiangmai, Thailand. postcode: 50000 收件人: Mr. Chung Wen-Neng Tel: 081-6715159 086-6738067 愛心提示: 郵寄物資, 請至郵局以 "海路" (最慢的那種) 郵寄即可, 20 公斤以內儘量以 "一個" 箱子包裝, 這樣最省錢, 超過 20 公斤, 請注意 "分裝" 的問題, 以節省您的郵資, 因為 "每一箱" (無論多重) 都有一個 "基本起步價" ~ 感恩~ --------引言結束------------------

拿到網拍上,做慈善捐贈

小弟的建議是, 拿到網拍上,做慈善捐贈, 例如用10月份的育幼院.孤兒院.或是安養院.創世基金會的收據, 300元以上可任選一雙,先捐贈先選, 請他轉帳郵資給你, 然後你寄給她, ..之類的,

家扶中心二手商品義賣

我這2年把家裡不要用的東西捐給台中家扶中心,東西有用過的或根本沒用過的新品,其中也包含鞋子啦,家扶中心到年底都會有二手商品義賣,9月份有辦過一次了,接下來會不會有我就不知道,你要不要問問看台北家扶... Go to source: Mobile01 [請問]那裡可回收或捐贈大量舊鞋呢?

(...繼續閱讀.../...CONTINUE...)

2008年7月2日 星期三

依相關度排序 ---- 更有看頭的『相關文章』功能

.

Correlation 前幾天, 成功實作出『Grazr格中格』的『相關文章』功能, 原本還要繼續嚐試 Google Ajax Search API 或 Google Ajax Feed API ...。不過, 最後還是決定回到『json 加 java script』, 再加上『依相關度排序』---- 希望可以就這麼定案 ----。

不過我猜, 說不定還得請大家投票來決定。

.

下面將介紹 :

  • 遺珠的『相關文章』功能
  • 原始版本的『相關文章』功能 -- Abin's Tech Note
  • 依相關度排序---- 讓『相關文章』更有看頭
  • 補充 ----『隨機文章』

另外寫了一個『不用寫程式, 不用改模版的方法』, 要先掛 jQuery, 再依文章所述安裝。目前的設計, 是要單篇文章才會顯示相關文章。對程式不熟的人, 建議使用 相關文章點播台 -- RPS 1.0 beta

有興趣『寫程式/改模版』的人, 再看下文。

.

  • 遺珠的『相關文章』功能

之所以沒使用下面這些, 來呈現『相關文章』, 有幾個原因 :

  • 無法呈現文章的相關性, 也無法處理重複文章
  • Google Ajax Search API 處理的是『關鍵字』, 而非『標籤』
  • 另外兩個某種程度上比較像『標籤文章選台器』, 而不是『相關文章』

.

不過, 還是列出它們的效果, 說不定你用得上。

Grazr-Related

『Grazr格中格』的『相關文章』功能

2008-07-01_140908
Google Ajax Feed API (Meme -- 教學與反省,
.阿欣部落.)

.

Ajax-Search
Google Ajax Search API

.

建議大家先看一下原始版本的『相關文章』做法 (加入相關文章功能, Abin's Tech Note 2007-03-05), 或者是 替Blogger加入相關文章功能(二)(挖哩勒~胡說八道, 2008-06-30)

裡面, 詳細介紹了『相關文章』的做法, 還有程式碼要安裝在模版的什麼地方。

簡單的說, ABIN 的做法如下 :

  • 集合A = 目前文章的標籤 * (每個標籤取出10 篇最新的文章, 並且不包含目前文章)
  • 集合B = 集合A 的 不重複文章
  • 相關文章 = 從 集合B 隨機取出 5 篇文章

.

  • 依相關度排序 ---- 讓『相關文章』更有看頭

再來看看我的做法, 不同之處以紅色標示 :

  • 集合A = 目前文章的標籤 * (每個標籤取出10 篇最新的文章, 並且不包含目前文章), 並記錄目前的文章有幾個標籤 (labelNum)
  • 集合B = 集合A 的 不重複文章, 並順便統計 每篇文章 在 集合A 出現的次數 (relatedStar),
  • 集合C = 將 集合B 依 文章次數 排序
  • 相關文章 = 集合C 依 文章次數, 由多到少列出, 相關度以 relatedStar / labelNum 表示

.

另外, 我還朝減少記憶體 (陣列) 使用量, 和減少迴圈次數的方向改寫, 所以直接就產生 集合B, 而且 集合C 也只是一個『索引』而已。這樣,『理論上』會跑快一點, 只是不知如何測試。

假設你已經安裝完成原始版本的『相關文章』([1][2]), 只要將 </head> 之前的程式碼整個換成我的版本, 就會有『依相關度排序』的效果。

.

其中的 optionRGB, 請改成適合的顏色設定

var optionRGB = [ {P: 100, R :208, G: 0, B: 0}, {P: 50, R: 255, G: 204, B: 0}, {P: 0, R: 0, G: 64, B: 128} ];

P = 百分比, (R, G, B) = 該百分比的顏色設定。如果介於兩個百分比之間, 則會使用中間色。也可以 增加 或 減少 顏色的組別, 但要維持 P (百分比) 由大到小排列, 還有注意語法即可。

P

R

G

B

100

208

0

0

50

255

204

0

0

0

64

128

.

如果不想使用顏色, 則將以下紅色部分刪去, 並注意 myRBG (內含 <span>) 和 </span> 是成對的。

myRBG = spanRGB(myP, optionRGB);
document.write('<h4>' + myRBG);
document.write('相關度 ' + myStars + ' ' + myP + '% 的文章 :</span></h4> <ul>' );

.

如果想用『分數』(例: 3/5 ) 來表示, 可以將灰色部份與前一行替換,

// document.write('相關度 ' + myStars + ' (' + relatedStar[r] + '/' + labelNum + ') 的文章 :</span> </h4> <ul>' );

.

再來是列出的文章總數, 目前是 20 則, 如藍色部分, 可以自行修改

for (var j=0; j<u_IdxNum && j<20 ; j++)

.

尚待努力之處

  • 看能不能再增進執行效率
  • 將程式主體搬到側邊欄, 縮短文章載入的時間, 之後再插入相關文章的結果

.

</head> 之前的程式碼如下 :

<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var labelNum = 0;
var maxStar = 1;
var relatedStar = new Array();
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();
var u_Idx = new Array();
var u_IdxNum = 0;

function RelatedLabels(json) {
var regex1=/</g, regex2=/>/g;
var entryURL = "";
labelNum += 1;
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
entryURL = "";
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
entryURL = entry.link[j].href;
break;
}
}
if (entryURL != "") {
for (var j = 0; j <= relatedPostsNum; j++) {
if (relatedUrls[j] == entryURL) {
relatedStar[j]++;
if (relatedStar[j]>maxStar)
maxStar=relatedStar[j];
entryURL = "";
break;
}
}
}
if (entryURL != "") {
relatedPostsNum++;
relatedTitles[relatedPostsNum] = (entry.title.$t.replace(regex1, '&lt;')).replace(regex2, '&gt;');
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
relatedUrls[relatedPostsNum] = entryURL;
relatedStar[relatedPostsNum] = 1;
}
}
}

function SortRelatedPosts(PostUrl) {
for (var j = maxStar; j > 0 ; j--) {
for(var i = 0; i < relatedUrls.length; i++) {
if (relatedStar[i]==j && PostUrl != relatedUrls[i]) {
u_Idx[u_IdxNum] = i;
u_IdxNum++;
}
}
}
}

function spanRGB(myP, PRGB) {
var myR, myG, myB;
for (var i=0; i< PRGB.length; i++) {
if (myP >= PRGB[i].P) {
if (i==0) {
myR = PRGB[i].R;
myG = PRGB[i].G;
myB = PRGB[i].B;
} else {
var P0 = myP - PRGB[i].P;
var P1 = PRGB[i-1].P - myP;
var deltaP = PRGB[i-1].P - PRGB[i].P;
myR = Math.floor( (PRGB[i-1].R*P0 + PRGB[i].R*P1) / deltaP );
myG = Math.floor( (PRGB[i-1].G*P0 + PRGB[i].G*P1) / deltaP );
myB = Math.floor( (PRGB[i-1].B*P0 + PRGB[i].B*P1) / deltaP );
}
return('<span >');
break;
}
}
return('<span>');
}

function ShowRelatedPosts(PostUrl) {

var r = 0;
var i = 0;
var currStar = 0;
var myStars = "";
var myRBG;
var optionRGB = [ {P: 100, R :208, G: 0, B: 0}, {P: 50, R: 255, G: 204, B: 0}, {P: 0, R: 0, G: 64, B: 128} ];

SortRelatedPosts(PostUrl);
if (relatedTitles.length > 0) {
for (var j=0; j<u_IdxNum && j<20 ; j++) {
r = u_Idx[j];
if (currStar!=relatedStar[r]){
if (currStar != 0)
document.write('</ul>');
currStar = relatedStar[r];
myStars = "";
for (i=0; i<currStar; i++)
myStars = myStars + '★';
var myP = Math.floor(100*relatedStar[r]/labelNum);
myRBG = spanRGB(myP, optionRGB);
document.write('<h4>' + myRBG);
document.write('相關度 ' + myStars + ' ' + myP + '% 的文章 :</span></h4> <ul>' );
// document.write('相關度 ' + myStars + ' (' + relatedStar[r] + '/' + labelNum + ') 的文章 :</span> </h4> <ul>' );
}
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
}
if (currStar != 0)
document.write('</ul>');
document.write('== 以上 ' + j + ' 則 ==, <a href="http://eucaly61.blogspot.com/2008/07/related-posts-with-correlation.html" target="_blank">相關文章及相關度說明</a>');
}
}
//]]>
</script>

.

另外寫了一個『不用寫程式, 不用改模版的方法』, 要先掛 jQuery, 再依文章所述安裝。對程式不熟的人, 建議使用 相關文章點播台 -- RPS 1.0 beta

.

  • 補充 ----『隨機文章』

至於『隨機文章』, 可以參考底下的做法, 將它的精神改寫到 ABIN 的程式裡面。

Blogger Feeling Lucky Widget (Random Post)

  • 按鈕呼叫 feelingLucky()
  • feelingLucky()

/feeds/posts/summary?max-results=0&alt=json-in-script 傳給 readLucky()

  • readLucky()

取得 文章總數, parseInt(feed.openSearch$totalResults.$t,10)
產生 亂數
將 亂數 傳給 fetchLuck()

  • fetchLuck()

/feeds/posts/summary?start-index=+亂數+&max-results=1&alt=json-in-script 傳給 showLucky()

  • showLucky

秀出文章

.


(...繼續閱讀.../...CONTINUE...)