My studying notebook

2008/06/27

Blogger Draft Announce inline comment system

6/27/2008 08:58:00 PM Posted by Kai-Chu Chung 3 comments
2008/6/27 Blogger Draft 宣佈了新的意見系統,這也是Blogger最令人詬病的部分,文章的回覆的方法只有2種方式(Pop-up視窗與整頁模式)[1]。而這次更新終讓Blogger用戶可以將意見回覆直接嵌在文章的最下方。Step1
設定意見表單位置表示方式。先登入Blogger Draft,設定 > 意見 > 意見表單位置,此方式是使用iframe顯示回覆文章內容和名單及身份驗證選項。Step2
修改Blogger Template。版面配置 > 修改HTML > 點選展開小裝置範本(修改前記得先備份) ,尋找到<p class='comment-footer'>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
修改為
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form' />
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>
Step3
Enjoying!!

Ps.1在Blogger在還未宣佈此新功能之前(inline comment system),許多網友嘗試的找出將見意回覆系統嵌入單篇文章的下面。下面有幾則相關的文章,有興趣的人可以點進去看看

2008/06/24

My aNobii Books

6/24/2008 11:09:00 PM Posted by Kai-Chu Chung 3 comments
今天收到第一次從Amazon買的書,C# in DepthLINQ in ActionLearning Python, Third Edition。自從發現aNobii之後,每當買書或是想要買的書就會在上面建立屬於自己的書櫃,今天收到的3本書當然也不例外,在我輸入每本書相關的資訊時,出現了一個訊息。C# in Depth這本書我居然是第一個放到自己書櫃人。滿驚訝的!!



aNobii 是什麼?

aNobii 幫助您發掘您可能喜歡的書籍,並將您的藏書分門別類。在這裡您可以:

* 探索並訂閱別人的書櫃
* 輕鬆地建立並分享您的書櫃
* 訂定您自己的欲購書單
* 比較不同 Amazon 網站的價差
* ... 以及更多

URI: aNobii

[Microsoft] Virtual Lab

6/24/2008 08:40:00 PM Posted by Kai-Chu Chung 3 comments
在最近一期的MSDN Flash 程式開發人員快訊中的內容提到了一段話。


在 2008 年 6 月號的 MSDN Magazine 中,我們為讀者們推出了令人興奮的新功能:虛擬實驗室。在虛擬實驗室中,您可以在閱讀相關文章的同時,立即實際體驗我們的範例程式碼。這些實驗室已經預先設定了 Windows Vista、Visual Studio 2008 以及其他必須的應用程式,方便您立即體驗文章中的概念。

首先推出的兩個實驗室主題分別是 MSDN Magazine 5 月號中由 Ethan Wilansky、Paul Olszewski 及 Rick Sneddon 所發表的 MOSS部署以及 Charles Petzold 在 MSDN Magazine 6 月號中討論點陣圖及像素位元的基礎架構專欄。

我們同時新增了一個虛擬實驗室頁面,您可以從這裡存取任何目前已推出的 MSDN Magazine 虛擬實驗室。


看到這個消息之後,卻發現目前只有英文版的MSDN有Virtual Lab的新功能。以上述文章提及之MOSS部署為例:


MSDN(Tw)

MSDN(En-us)

MSDN Virtual Lab

Requirements

使用Virtual Lab必需注意幾點。其中Browser的部份只能使用IE(Firefox 中使用IE Tabs Extension亦可),還必需安裝ActiveX Control("Virtual Machine Remote Control" Active X control )。Microsoft提供這項新功能讓MSDN的閱讀者可以在Virtual Lab的環境中很容易的一邊閱讀文章一邊進行操作而毋須再煩惱作業環境安裝與設定的問題。使用上是滿方便的,不過交效果如何就得實際操作過後才知道。待使用之後在跟大家報告 (To be done!!)。

2008/06/23

[Javascript & Css] CountDown

6/23/2008 09:30:00 PM Posted by Kai-Chu Chung , , 4 comments

google code jam 2008的首頁中,有一個斗大的CountDown,正在一秒一秒的倒數著報名截止的時間(07/16/2008 23:00:00 UTC)。看到這一個Counter就想起讀研究所的時候,幫老師帶大學部的助教,在作業上傳的頁面也作了一個CountDown,倒數著學生上傳最後的期限(每一次Reload時間才會改變),不過看起來的品質就沒有這一個的好,所以想說就試著分析一下。

最主要的部份為 Javascript + Css + DHTML 構成,主要由Javascript帶入DOM元素計算,並更新DOM元素CSS屬性來顯示不同時間。


Live Demo | Download

HTML
<span id="day0" class="num_0">0</span>
<span id="day1" class="num_0">0</span>
<!-- day -->
<span class="hp_counter_divider">:</span>
<span id="hour0" class="num_0">0</span>
<span id="hour1" class="num_0">0</span>
<!-- hour -->
<span class="hp_counter_divider">:</span>
<span id="min0" class="num_0">0</span>
<span id="min1" class="num_0">0</span>
<!-- minute -->
<span class="hp_counter_divider">:</span>
<span id="sec0" class="num_0">0</span>
<span id="sec1" class="num_0">0</span>
<!-- second -->

Javascript

<script type="text/javascript">
// create the countdown
new Countdown({
toDate: new Date(Date.parse("07/04/2008 23:00:00 UTC")),
dayElements: [el("day0"), el("day1")],
hourElements: [el("hour0"), el("hour1")],
minuteElements: [el("min0"), el("min1")],
secondElements: [el("sec0"), el("sec1")]
});
</script>

Countdown是在Javascript中使用了OO中封裝的技巧,在Countdown Function中定義了屬性(toDate, dayElement, hourElements, minuteElements, secondElements),上由el(var el = function(n) { return document.getElementById(n); })直接帶入DOM元素中相對應的值進行計算與更新CSS屬性

counter.js

function Countdown(config) {
this.toDate = config.toDate;
this.dayElements = config.dayElements;
this.hourElements = config.hourElements;
this.minuteElements = config.minuteElements;
this.secondElements = config.secondElements;
this.timer = undefined;

/**
* Updates the countdown display.
*/
this.update = function () {
var elapsed = (this.toDate.getTime() - (new Date()).getTime()) / 1000;
this.setDisplay(
this.age(elapsed, Countdown.DAY), this.age(elapsed, Countdown.HOUR), this.age(elapsed, Countdown.MINUTE), this.age(elapsed, Countdown.SECOND));
};

/**
* returns the age
*/
this.age = function (seconds, t) {
if (seconds <= 0) {
return[0, 0];
}
var s = ((Math.floor(seconds / t.unit)) % t.length).toString();
return (s.length < 2) ? ["0", s] : [s.substring(0, 1), s.substring(1, 2)];
};

/**
* Starts the countdown timer
*/
this.setDisplay = function (day, hour, minute, second) {
this.display(day, this.dayElements);
this.display(hour, this.hourElements);
this.display(minute, this.minuteElements);
this.display(second, this.secondElements);
};

/**
* Does the display
*/
this.display = function (num, els) {
els[0].innerHTML = num[0];
els[1].innerHTML = num[1];
els[0].className = "num_" + num[0];
els[1].className = "num_" + num[1];
};

// start timer
var that = this;
this.timer = setInterval(function () {
that.update()
},
250);
return;
}

/**
* some constants
*/
Countdown.DAY = {
unit: 86400,
length: 100000
};
Countdown.HOUR = {
unit: 3600,
length: 24
};
Countdown.MINUTE = {
unit: 60,
length: 60
};
Countdown.SECOND = {
unit: 1,
length: 60
};


counter.js中,一樣利用this.property封裝屬性、function()表示Method,計算出與截止時間的時間差,換算成 DD,HH,MM,SS 格式。在this.display中動態改變DOM元素值與CSS屬性


CSS

google code jam 2008的首頁CountDown中,Days,Hours,Mins,Secs皆是利用CSS background-position 屬性來顯示,在CSS中預先定義好0-9每個數字的background-position,在DOM元素改變CSS屬性時,即可套用CSS不同數字的背景圖

/* Number "0" */
#CounterCount span.num_0 {
background - position: 0px 4px;
}
/* Number "1" */
#CounterCount span.num_1 {
background - position: 0px - 21px;
}
/* Number "2" */
#CounterCount span.num_2 {
background - position: 0px - 46px;
}



ps. OOPS implementation in JavaScript可以參考Exploring OOPS - JavaScript Style serials by mastergaurav (code project)
ps. 07/16/2008 23:00:00 UTC, UTC(Coordinated Universal Time), 台灣為東8區,所以時間為UTC+8即可

2008/06/18

Search Read Items in Google Reader

6/18/2008 07:41:00 PM Posted by Kai-Chu Chung , 3 comments
最近剛剛把Rss的閱讀器由FeedReader3換成了Google Reader。之前覺得Google Reader不怎麼好用,所以找了滿多的Rss 閱讀器,那時候就選擇了ReedReader3,介面還算不是錯,不過在預覽的時候沒有辦法顯示中文,其中我覺得很不錯的一個地方SmartFeeds,它可以讓使用在閱讀器中眾多Fees中篩選出特定條件的文章


這個功能是挺方便的,由其是在為數不少的內容中,可以找到自己有興趣的項目來閱讀也是很重要的事。不過Feedreader3現在使用的是本機的資料庫,所以使用者如果有2台電腦以上的話,就無法進行自動更新及同步的動作,也因此後來我還是決定把Rss閱讀器換回到Google Reaer。

Google Reader現在可以讓使用訂閱自己在Google Reader中所讀過的文章,給尋找時間太久的內容提供了一個方便的選擇。作法如下:

1.找出自己的User ID。在網止列輸入下列Javascript,會彈跳出一個窗視,1連串的數字即為UserID
javascript:prompt("User ID", _USER_ID);void(0);
2.在Google Reader中訂閱自己閱讀過的文章
http://www.google.com/reader/atom/user/USERID/state/com.google/read

完成之後,會出現一個新的選項(cage's read items)。打完收工!!!

2008/06/11

[備忘錄] Web.config httpruntime

6/11/2008 10:11:00 AM Posted by Kai-Chu Chung 3 comments
今天早上就接到了電話,使用者反應網頁沒有辦法上傳Doc檔,自己實際測試了一下,發現使用者上傳的檔案大小大於4M。在Web.config中,如果沒有特別指定上傳案大小時,預設的小大為4096KB(4M),只要在Web.config 區段加上httpRuntime設定

<configuration>
<system.web>
<httpruntime maxrequestlength="10280">
useFullyQualifiedRedirectUrl="true"
executionTimeout="60"/>
</httpruntime>
</system.web>
</configuration>

把maxRequestLength由預設值改為10280(10M),解決!!打完收工

2008/06/10

Dynamic Feed Control Wizard - Put feeds on Your Web Page

6/10/2008 10:09:00 AM Posted by Kai-Chu Chung , , , , 3 comments

Google 現在推出了讓使用者可以在自己的網頁中加上 dynamic RSS AJAX feeds。在Blogger Draft中新增了可以嵌入Feeds的小裝置,但是一次只能載入一個Feed。而在Dynamic Rss AJAX Feeds中可讓使用者一次載入多個Feeds而達到連播的效果,並提供3種樣式選擇(Vertical、Vertical Stacked、Horizontal):


再輸入完Feeds Expression(Feeds搜尋的條件),可以搜尋多筆,中間以","相隔開,按下Preview之後便會產生Dynamic Feed,Dynamic Feed 左側顯示為搜尋的關鍵字(可在產出的代碼中修改)


最後一個動作,Generate Code。


//Skip...
function LoadDynamicFeedControl() {
var feeds = [{
title: '竹誌',
url: 'http://cage1016.blogspot.com/feeds/posts/default'
},
{
title: 'bamboobig',
// 在此可自訂顯示的Feed
url: 'http://bamboobig.blogspot.com/feeds/posts/default'
}];
var options = {
stacked: true,
horizontal: false,
title: "Hollywood News"
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
//Skip...

LiveDemo (Event News)

2008/06/09

[備忘錄] C# Datetime 處理小技巧

6/09/2008 07:30:00 PM Posted by Kai-Chu Chung 3 comments
在撰寫程式的時候難免會遇到處理時間的時候,且有時候因應特殊需求還得進行較為複雜的日期計算。不過只要把握一點點的小技巧其實就可以完成日期的選定。

System.DateTime dt = System.DateTime.Now;
System.DateTime ThisMonBeginDay = new System.DateTime(dt.Year, dt.Month, 1);
System.DateTime UltMonEndDay = ThisMonBeginDay.AddDays(-1);
System.DateTime ThisMonEndDay = ThisMonBeginDay.AddMonths(1).AddDays(-1);

利用System.DateTime Contructor找出本月月初的日期。上月月底 = 本月月初 - 1天;本月月底 = 本月月初 + 1個月 - 1天。如此利用簡單的概念即可算出日期。

另外System.Globalization命名空間中提供了2個類別:TaiwanCalendarTaiwanLunisolarCalendar

System.DateTime dt = System.DateTime.Now;
TaiwanCalendar tc = new TaiwanCalendar();
int Year = tc.GetYear(dt);
// 97
int Mon = tc.GetMonth(dt);
// 6
int day = tc.GetDayOfMonth(dt);
// 9

TaiwanLunisolarCalendar tlc = new TaiwanLunisolarCalendar();
int LuniYear = tlc.GetYear(dt);
// 97
int LuniMon = tlc.GetMonth(dt);
// 5
int Luniday = tlc.GetDayOfMonth(dt);
// 6

綜合上述可以得到以下這張圖

2008/06/03

Google Talk To Me

6/03/2008 10:26:00 PM Posted by Kai-Chu Chung 3 comments
Google Talk 提供了新的功能,有Google帳號的使用者可以允許訪客在瀏覽網頁時進行對談,Create a Google Talk chatback badge,網頁中以簡單的程式碼產生器產生代碼,並提供了5種不同樣式的Google Talk to me 介面。







Badge Style

Standard

One Line Basic

Two Line Basic

Hyperlink and status icon (no frame)

Hyperlink only (no frame)

挑好了樣式,點選"Upadate badge"之後,將產生之代碼貼到自己的網頁中!! 搞定

Css-Switcher

6/03/2008 09:46:00 PM Posted by Kai-Chu Chung , , 3 comments
利用Css可以快速改變HTML的風格樣式。在網頁中載入Css的方法則可以使用3種


<link rel="stylesheet" href="css/Clean.css" type="text/css">
<!--Method2: Embed Style-->
<style type="text/css">/*Css Code*/</style>
<!--Method3: Inline Sytle-->
<p style="color: red;">this is paragraph</p>


除了使用設計好的Css樣式之外,Javascript還可以讓我們動態的改變目前網頁中使用的樣式

<link rel="stylesheet" href="css/Clean.css" type="text/css">
<link rel="alternate stylesheet" href="css/Digg.css" type="text/css" title="Digg">
<link rel="alternate stylesheet" href="css/Flickr.css" type="text/css" title="Flickr">

Clean.css為預設網頁使用樣式,Digg.css & Flickr.css則為Javascript動態載入之樣式

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < c =" ca[i];" c =" c.substring(1,c.length);" onload =" function(e)" cookie =" readCookie(" title =" cookie" onunload =" function(e)" title =" getActiveStyleSheet();" cookie =" readCookie(" title =" cookie">

在頁面中簡單的使用Hyperlink,將Css link中Title的參數指向Javascript中的setActiveStyleSheet Function

<a href="#" onclick="setActiveStyleSheet(''); return false;">預設載入的樣式</a>
<a href="#" onclick="setActiveStyleSheet('Digg'); return false;">動態載入Digg樣式</a>
<a href="#" onclick="setActiveStyleSheet('Flickr'); return false;">動態載入Flickr樣式</a>


Live Demo