My Program

新增HEMiDEMi文章加入書籤功能

今天才發現 HEMiDEMi 有個將網頁加入HEMiDEMi書籤的功能, (其實是從這個網頁發現的: http://blog.yam.com/syshen/archives/1410294.html), 於是就著手加自己的文章, 利用 HEMiDEMi來加點人氣, 並方便用戶收藏.

連上HEMiDEMi選右上角的[工具], 再選[小貼紙產生器]後, 即可進行小貼紙的產生, 由於它沒有直接 support TT 的 blog 語法, 所以就選其他囉, 不過奇怪的是其他的 href link 最後是 void((URL))這樣的語法, 想說是不是什麼新東東, 自行先測試發現並不會發生連結的結果, 於是就先手動改一下, 並改為用 onmousedown方式(不用onclick原因如後), 產生放在 TT 上用的 HEMiDEMi 的語法, 如下:

<a href=# target=_blank  onmousedown="desc='';via='';if(document.referrer)via=document.referrer;
if(typeof(_ref)!='undefined')via=_ref;
if(window.getSelection)desc=window.getSelection();
if(document.getSelection)desc=document.getSelection();
if(document.selection)desc=document.selection.createRange().text;
this.href='http://www.hemidemi.com/user_bookmark/new?
title='+encodeURIComponent('[ ##_article_rep_title_## ]')+'&url='+
encodeURIComponent('https://diary.tw[ ##_article_rep_link_## ]')+
'&description=
'+encodeURIComponent(desc)+'&via='+encodeURIComponent(via);
return true;" ><img src="http://www.hemidemi.com/sticker/clipcolor_8015.gif" border="0"></a>

(以上的 onmousedown 的 javascript 皆無斷行, 因排版需要有略做調整, 另外TT為避免衝碼, 也將 [ ] 和 ## 間加上了空白, 另外 onclick 會有 selection focus 消失問題(在 IE 下不會), 而取不到 desc, 因為原來設計的引述功能只要反白就會自動帶出哦, 所以改用onmousedown來取得, 方便在產生 HEMiDEMi 標籤時, 帶出使用者反白的引述, 可參閱文章: http://www.quirksmode.org/js/selected.html)

其實重點在於最後的 http://www.hemidemi.com/user_bookmark/new 後面要帶一些東東, title, url, description, via, 分別是加入書籤的[標題](必填), [網址](必填), [引述](非必填), [referer](未出現在畫面上, 應是要做某種分析用), 上面的 javascript 對於 desc 及 via 兩個變數用了相當多的語法來產生, 尤其是 desc, 因為用 desc 所以code會比較大一些, 相對於client side也有一些code的下載負載.

另外採用 anchor + target=_blank 的語法就可以避開 browser 因 window.open 造成的阻擋.

標籤 Bookmark, HEMiDEMi, 書籤

系統技術

404 HANDLER

文章作者作者: tim
文章發佈日期 2006-08-18
在〈404 HANDLER〉中尚無留言

瀏覽器遇到web server回應的status code 404相信大家都不陌生, 無論是IIS或是APACHE都一樣, 只要是找不到這個檔案, 就是回應 404 給client囉.

如何handle web的回應, 除了是要有更 friendly 的回應外, 對於網站管理員來說, 更希望獲得哪些檔案是 user 要, 但是 web 上沒有的. 還記得之前有篇網路轉寄的內容, 有個 web server 的404回應網頁很有趣, 自怨自艾半天, 讓人會心一笑, 這就是友善回應的一種應用. 但能將 404用程式做某種方式記錄或是通知方便管理員處理, 相信也是在某些應用下的重要功能(當然要依實際狀況來用, 因為實務上發生404的機會並不低).

閱讀全文

標籤 404, ErrorDocument, handler, status

Javascript

javascript的除錯小幫手

在 javascript 除錯時, 雖然有好用的 firefox 配合 plugin – firebug 來進行 step by step 的除錯, 也可以即時看到變數內容, 也很容易進行除錯, 但在長篇大論的 javascript 裡除錯, 總是希望能更快地獲得變數的值, 方便在偵測這些變數, 尤其是只有 IE 或沒有 firebug 在手邊時, 怎麼辦呢?

我們常常就直接用 alert 來進行變數的顯示, 但又要一直點一直點, 也是有點累(其實是自己懶), 但變數多時, 就更顯得麻煩, 於是用一種容易一點的方法, 就是配合 DHTML直接做頁面輸出就好了, 雖然談不上什麼技術, 但也算是一種小技巧, 給各位參考:

1. 先放一個 div 進來, 如下:
<div id=output></div>

閱讀全文

標籤 debug

Javascript

模糊化你的javascript – Javascript Obfuscator

文章作者作者: tim
文章發佈日期 2006-08-13
在〈模糊化你的javascript – Javascript Obfuscator〉中尚無留言

寫程式的過程中, 若不希望自己的程式碼給別人看, 最好的方法就是只提供編譯好的binary code, 而不提供原始碼(source code). 但 javascript 這種要給client side browser看的程式碼, 似乎沒有辦法將原始碼不提供出去. 但如此一來便會有程式碼外露的問題.

模糊化javascript並非是近期的技術, 早在沒有browser時, 單純的script也都希望被保護或難一眼望穿, 於是將程式碼加密或是混亂化(模糊化)就是這篇文章要探討的主題了.

隨著要讓 web 應用程式有更好的使用者經驗, RIA(Rich Internet Application)會是新一代web應用程式的主流應用技術, 無論是ajax或是單純的javascript, 都會隨著這類應用而使程式碼愈來愈多功能外露至client(再強調一下, 無論在client side做多少檢查, 在server side都要再做一次檢查, 以避免有安全性漏洞, server side的程式是最後把關的地方-當然, db端也能做不少防範事項), 於是無論是就安全性考量, 就程式碼保全考量, (還有另一個考量就是將程式碼壓縮以增進效能), 都應該要將 javascript 做某種程度的模糊化, 由於在模糊化的過程中, 通常會伴隨著體積縮小的效應, 所以 obfuscate 及 shrink 的作用是同時發生的. 基於這樣的好處, 適當地將 javascript 做模糊化是很有幫助的.

閱讀全文

標籤 Obfuscator, shrink, 模糊化

TatterTools

新增TT訪問來源(RefererStatistics 0.6)

TT內有個很方便的統計訪問來源的後台介面, 相信這個資訊對交換連結或希望知道網站訪問來源的站長來說, 是很重要的. 一方面可以參考用戶從哪裡來的, 另一方面又可以連回去看看是什麼網站我的網址加入.

本plug-in功能是利用原來內建在TT內的RefererStatistics table內的資料依次數的前五筆排序, 列出在TT的介面上, 下載本plug-in後, 解開放在plugins目錄下, 並在skin上放置標籤後, 即可順利使用, 即使不到五筆, 也有檢查機制, 不會有任何問題, 建議使用區塊方式如下:

     <!-- RefererStatistics-->
     <div class="listbox">
       <h3>訪問來源</h3>
[ ##_RefererStatistics_## ]
     </div>

(注意, 上方的[ ##與## ]之間在skin上不能有空白, 這裡是為了不衝碼留空白方便顯示)
如此一來便能很方便地將訪問來源顯示給來訪的訪客看囉. 參考畫面如下:

希望能對大家在使用TT上能有幫助, 若有任何問題或建議, 也歡迎提出, 謝謝!

下載點:
RefererStatistics-0.6.zip

標籤 referer, RefererStatistics, statistics

網站服務的下一步

文章作者作者: tim
文章發佈日期 2006-08-09
在〈網站服務的下一步〉中尚無留言

現在的網站服務要提供什麼功能呢? 寫文章 / 相簿 / 影音 / 交友 / 拍賣 / 購物這些之後, 重要的是可以做互動討論及易於搜尋.

怎麼說呢? 一個單純的網站, 提供了上述服務之後, 要能適時的更新維護, 最重要的是要能讓網站看起來像是活著(alive), 所以訪客留言版就這樣出現了, 但訪客留言版也就只是一個留言版, 沒有和內容(content)有直接的連繫的感覺, 所以出現了上面是內容(如文章, 相片, 影音), 下面是評論(comment)或也可以說是留言的頁面也就因應而生了.

這種分內容/使用者評論的架構存在很久了, 從以往的實體: 讀者投書來看, 這種行為已是人類生活上一種基本的互動行為, 所以無論是在實體上或是網路這種虛擬世界上, 非同步式互動儼然已是最重要的功能設計. 有了良好的互動功能後, 接下來的內容就會自動自發的一直產出, 小到芝蔴蒜皮的小事, 大到世界政經的大事, 什麼都有, 方便的功能讓大家更能分享, 更能表現, 這應該是這一代網站服務的重點.

問題來了, 如何有效的管理內容, 或簡單來說, 如何有效找到內容, 相信是在資料過多過雜的內容提供者所需要思考的問題. 關於這個部分可以參考這篇文章:
網誌內容收集應用

利用良好的分類, 良好的摘要, 良好的關鍵字, 良好的標籤(tag), 良好的搜尋引擎, 方便更多人來使用, 查找, 另外像是以文找文, 以相關文章方式, 或是see also的方式引薦, 會是讓使用者停留更久時間的方式.

標籤 content, tag, website

.net

ASP.NET的Callback實作

文章作者作者: tim
文章發佈日期 2006-08-04
在〈ASP.NET的Callback實作〉中尚無留言

在ASP.NET 2.0內支援了最令人感興趣的內容, Callback功能, 雖然實務上, 可以利用多種自訂的 server side 程式實作 AJAX 功能, 但是在 ASP.NET 2.0內建的 Callback 功能還是令人激賞, 接下來我們看看如何在 ASP.NET 2.0 下實作這個 Callback 的功能. (本篇文章以 c# 為範例語言)

要實作 Callback 功能, 首先要先了解 ICallbackEventHandler 這個 interface, 該 interface 有兩個方法:

string GetCallbackResult ()
void RaiseCallbackEvent (string EventArgument)

所以要達成 callback 的物件必需繼承 ICallbackEventHandler 這個 interface 並且實作這兩個方法, 一般是寫在 Page 下, 以下為一個範例:

閱讀全文

標籤 AJAX, callback

程式技術

Fiddler-HTTP Debugger

文章作者作者: tim
文章發佈日期 2006-08-03
在〈Fiddler-HTTP Debugger〉中尚無留言

在寫 web 程式時, 常常需要除錯 http header 的時候, 或是要得到 browser 如何和 web server 溝通的過程時, 尤其是在寫 AJAX Code 的時候, 我們對於 packet level 的資訊會十分感興趣. 當然我們可以使用像是 sniffer 或是我常用的 ethereal 來進行封包的監聽, 再接著對這些監聽下來的封包分析. ethereal 可以利用一些 filter 或是關鍵字來進行封包的搜尋, 以方便在茫茫封包海中找到我們感興趣的資料.

有個方便的工具, 而且還是掛 microsoft 的工具, 是放在 Wininet 這個地方的監聽工具, Fiddler, 程式很小, 也很容易使用, 但因為是在 Wininet 這層, 所以只支援 IE, 像是 firefox 就是自行透過 socket 層實作 web request 就不支援, 另外像是 sleipnir 這種是用 IE 核心(其實也就是利用 Wininet 這組 api 進行 web reqeust) 的也支援, 簡單地說, 有用 Wininet 的 api 的應該都能用 Fiddler 來進行封包的監聽. (不過不包含 ftp, 僅有 wininet 的 http 部分)

閱讀全文

標籤 debug, fiddler, http, packet

Javascript

有趣的JSON技術

文章作者作者: tim
文章發佈日期 2006-07-30
在〈有趣的JSON技術〉中尚無留言

寫 javascript 對一般的網頁程式設計人員來說, 應該是家常便飯, 舉凡一些需要在 client side 完成的事, 大多會利用 javascript 來操作, 例如滑鼠經過換色, 或是檢查 form (表單)在送出前的一些資料正確性檢查(ps. 一定要記得在 server side 也要再次檢查, 以確保資料的正確性)或方便使用者輸入的自動更正等功能.

javascript 的功能強大, 又加上高階, 物件化等特性, 使得撰寫 javascript 的程式設計人員十分愛用, 也方便許多在 client side 就可以先完成的一些動作, 再加上最近的 Ajax 風行, javascript 無疑變成十分熱門的語言.

JSON (Javascript Object Notation)相信很多人有聽過, 但也有很多人不知道這個東西, 他是附屬在 javascript 下的一組物件描述方法, 這個網站介紹十分詳細: http://www.json.org/, 有很容易了解的圖示幫助使用者了解 JSON 物件的描述方式.

JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 “” 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};

閱讀全文

標籤 AJAX, JSON, XML

.net

ASP.NET Cache物件使用方式及應用

在使用 asp.net 對於效能有相當幫助的 Cache 功能我特別感興趣, 這篇文章將針對 Cache 的用法做個介紹. (使用 c# 做範例程式語言)

Cache 是在 Page 中取得的一個屬性, 本身是一個在 System.Web.Caching.Cache 型態, 基本上可以想成一個共用的全域變數(很類似之前設在 Application 的變數), 然而, 其功能可以搭配許多相依性參數進行設置, 以期能達到網頁效能的提昇.

我們先來看一下 Cache 的基本使用方式:
(範例1)

protected void Page_Load(object sender, EventArgs e)
{
    String strC1 = (String) Cache["c1"];
    if (strC1 == null)        {
        strC1 = DateTime.Now.ToString("yyyy/MM/dd hh:mm:ss");
        Cache.Insert("c1", strC1);
    }
    Response.Write(strC1);
}

閱讀全文

標籤 ASP.NET, Cache, CacheDependency, 效能

日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31