My studying notebook

2008/12/13

Blogger in Draft New feature: Geotagging Test II

12/13/2008 12:48:00 PM Posted by Kai-Chu Chung , 2 comments
http://bloggerindraft.blogspot.com - announce a new feature about goetagging. You can add a location to descirbe your post. The geotags give your reader a way to understand what are you want to say exactly. It's easy to use this new feature.
  1. login into http://draft.blogger.com
  2. click the add location link below the main text field. You can use editor to search, drap ect.
This is the simple step and there has more detail explain how to use new feature. When you add location in post. That's mean you can get some geo information in post.


Layouts Data Tags Type Value
data:top.showLocation bool true or false
data:post.location bool true or false
data:post.location.mapsUrl text google map url
data:post.location.name text display name

There's new four blogger Layouts Data Tags in upon image and list. Then, we can modify our template to add a url of the Google map site links. You can add this url link in one of three of post footer.

<p class='post-footer-line post-footer-line-1'>here</p>
<p class='post-footer-line post-footer-line-2'>here</p>
<p class='post-footer-line post-footer-line-3'>or here</p>

Then, modify template code like that

<div class='post-footer-line post-footer-line-1'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>

Now, you have done in post footer to add google map url link.

http://bloggerindraft.blogspot.com announce another Gedget(http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml) that will display your posts on a map by javascript parsing blog feed. So, there is a few known issuse descript by Blogger in Draft.

one of upon know issue is the geotag cannot be removed from a post once it has been saved. If you need to remove a geotag, please copy your post content into a new post and delete the geotagged post. I think that everybody will think it isn't very friendly. It's more to suit people who like the travel blogger. i don't use this new feature every time i write new post. Sometime, i will add extra information to help reader to understand the post by use Google Static Maps API. It's a easy way to display what i say.
So, i modify the blogger template again to add a image by Google Static Maps API in post footer.

<p class='post-footer-line post-footer-line-1'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<div class='post-labels'>
<data:postLocationLabel/>
</div>
<div id='post-geo'>
<script src='http://cage.chung.googlepages.com/Geotagging1.0.js' type='text/javascript'/>
<script type='text/javascript'>
var mapurl = &#39;<data:post.location.mapsUrl/>&#39;;
var size = &quot;450x220&quot;;
var maptype = &quot;roadmap&quot;; // roadmap(Default),mobile,satellite,terrain,hybrid
var markerColor = &quot;green&quot;; //black, brown, green, purple, yellow, blue, gray, orange, red, white
var markerChar = &#39;m&#39; //[a-z, 0-9]
var Key = MAPS_API_KEY;
var sensor = false;

BuildStaticMap(mapurl, size, maptype, markerColor, markerChar, Key, sensor);
</script>
</div>
</b:if>
</b:if>
</p>


This way is right to work. but, i don't know how to get the geo point data directly. now ,i must parse the to get the latitude, longitude and zoom value. When i parse the location map url. The zoom value always equal to 10. In fact, there are few method to solve this problem. I can use Google Maps API instead of Google Statics Maps API. It's making thing more complicate probably.

2008/12/11

2008/12/09

Gmail Labs New feature: Tasks

12/09/2008 11:15:00 PM Posted by Kai-Chu Chung , No comments
Now, Gmail has new experimental feature called Tasks. It's a way to help you can keep track events or something what you need to do. You can add new tasks in tasks panel directly or choose email item what you want by click "Add to Tasks" top of email lists.


In tasks panel(It has a default panel and you can add panle by new list). You can build your tree view by indent(Tab) and Un-indent(Shift-Tab) and you can drape and drop items where you want to display too.

Then, you can edit detail for every item.  There's support user custom Due Date and Note item. Due Date just let user select day time (i hope that it can support select date time like google calendar)


Summary
It's using a lightway let you can keep track what you need to do.  But, i hope this tasks can improve more features. for example: due date support date time. Those feature we talk about are similar The Remember The Milk for Gamil Tasks. It's need to install FireFox extension for Remember The Milk for Gmail if you want to use it. So, i hope Gmail Tasks can keep improve and make it more friendly.


2008/12/05

The Google funtions of Google Docs Spreadsheets

12/05/2008 09:23:00 PM Posted by Kai-Chu Chung , No comments



Yesterday, i found a vidoe called Google Docs for feed that talk about google document load feed in Youtube-GoogleDocsCommunity. That's Goolge functions of Google Doc Spreadsheet function list

Function

Syntax

Google Finance information

GoogleFinance(symbol, attribute)

Google Lookup information

GoogleLookup(entity, attribute)

Import data from external source

ImportData(URL)

Import data from external source

ImportFeed(URL, query, headers, numItems)

Import data from external source

ImportHtml(URL, query, index)

Cross-workbook reference

ImportRange(spreadsheet_key, [sheet!]range)

Import data from external source

ImportXML(URL, query)


Google function support functions given above and you can get those function detail explain in Google Docs help center. Then fllowing is my live demo of import feed from picasa web album

2008/11/26

Silverlight Streaming Error!!

11/26/2008 07:46:00 PM Posted by Kai-Chu Chung No comments

http://silverlight.live.com/ - Now, 7:48 pm. My blogs have embed Silverlight that are occur time out error. So, i login silverlight streaming to check silverlight application. It's every operation too slowly on silverligth streaming. When i click launch application test page. It's occur timeout error, but others are seem to be all right. I don't know what is wrong?? 

2008/11/22

Flash vs Silverlight Gallery

11/22/2008 07:31:00 PM Posted by Kai-Chu Chung , No comments
http://www.shinedraw.com - I found a nice site called Shine Draw in this week. It has a Flash vs Silverlight Gallery that you can see few articles implement by Flash and Silverlight. I found some my interested articles and i don't know how to do before. For example, i make my new banner by Silverlight.  It helps me to make banner more flexibility and easily. The best great news is Shine Draw's Flash vs Silverlight Gallery support whole source code , so users can download to study how to do that. Enjoying in!!

Continue reading at Shine Draw

2008/11/03

jQuery intellisense in VS2008

11/03/2008 10:21:00 PM Posted by Kai-Chu Chung , No comments
It is old news. Scott Guthrie announce that Microsoft will be shipping jQuery with Visual Studio going forward. It's a good news for developer of ASP.NET. We can use lightweight open source javascript library to do more rich interative application in the client side. It's a important feature that Visual Studio 2008 support full javascript support. And few days ago, microsoft had release a hotfix for a number of issuse in Visual Studio 2008. You can make Visual Studio's javascript intelliense work better with jQuery.

scenario
  1. download visual studio hotfox(KB946581) and install
  2. download jquery intellisense file
    Untile now, I search few atrical about jQury intellisense in VS2008. In order to use jQury intellisense. We must download another javascript(jQuery intellisense file). i donwload the intellisense file from(this) before i find jQuery web site support documentation(jquery-1.2.6-vsdoc.js) in Visual studio


  3. Add both file(jQuery, intellisense) to your web page


Ps. About web page import javscript, usually we direct asign script block src attribute. Another method, we can use Google AJAX Libraries API load jquery file. It's more convenience to load jquey library by Google AJAX Libraries API. For example: you can change jquery library version by modify aip parameter.
//using 1.2.3 version jquery
google.load("jquery", "1.2.3");
// useing 1.2.6 version jquery
google.load("jquery", "1.2.6");

OH! sure. you still can add other js file by Google AJAX API. ex: jqueryui

2008/10/08

Tech‧Ed 2008 powerpoint online

10/08/2008 10:41:00 PM Posted by Kai-Chu Chung No comments
Tech‧Ed 2008 was few days ago from 9/23 to 9/25. Now Tech.Ed 2008 powerpoint online release. If you were take part in Tech.Ed 2008. You can login your account and password of Tech.Ed 2008 session singin.

ps. Tech.Ed 2008 (link)

2008/10/03

Tip: Notepad++ Add ASP.NET syntax highlight

10/03/2008 10:02:00 PM Posted by Kai-Chu Chung , No comments
Notepad++ is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL Licence. Syntax Highlighting and Syntax Folding is one feature of Notepad++ and it make you read the code easy. It supported many language for example: C#, javascript, XML, HTML etc. If you are a ASP.NET developer and you would find Notepad++ isn't support ASP.NET syntax (aspx, config ect.) But, it is easy to add asp.net syntax highlight by few step.

1. Notepad++ menu bar, click "settings" / "Styler Configurator".
2. In Setting dialog, Under "Language", select "XML" item.
3. Add user defined extension textbox, type in "aspx config master .." (ASP.NET support file extension and base XML well form).
4.Click "Save & Close".
5.Try it.


Ps. Notepad++(link)

2008/09/15

Tip: Visual Studio 2005 Server Explorer Crash

9/15/2008 08:29:00 PM Posted by Kai-Chu Chung , No comments

Today. When I decide to use Visual Studio 2005. I find that I cannot open Server Explorer and View the Data Base in Visual Studio 2005 Toolbar View\Server Explorer. And it doesn’t fix the error in Toolbar Window\Reset Window Layout.


And What can i do? After my research, i use the Devenv Command Line Switches to solve this problem and run “devenv /setup” in Visual Studio 2005 Command Prompt.

偽‧蝦米

9/15/2008 08:03:00 PM Posted by Kai-Chu Chung No comments


喜愛偽蝦米的朋友
在3.9b的版本釋出快1年多的時候
終於又有新的版本了(Dev0914)

我各人最期待的是有關於
終於可以輕鬆的在Vista上使用偽蝦米了

偽蝦米萬歲~~~~

2008/09/05

Tip:How append different master page by browser

9/05/2008 08:03:00 PM Posted by Kai-Chu Chung , No comments
We know that we can use master page to reate a consistent layout for the pages in your application. When you assign a master page to the cotent page, you can modify page directive to append different browser.

Usually we assing one master page to cotent page. Now we assign two master page to same content page. And modify MasterPageFile directive

For example:
<%@ Page Language="C#" Mozilla:MasterPageFile="~/FFMasterPage.master"
ie:MasterPageFile="~/IEMasterPage.master" AutoEventWireup="true"
CodeFile="DefaultContent.aspx.cs" Inherits="DefaultContent" %>

2008/08/27

Tip: How To Get Exception Stack in MOSS

8/27/2008 08:38:00 PM Posted by Kai-Chu Chung , No comments
Sometime we might get error message when we run moss pages or webparts of we add.
How could we to get more debug messages. We can modify config setting to enable this feature.





Step
  1. Open the Web Application Web.config file
    C:\Inetpub\wwwroot\wss\VirtualDirectories\{Web:Port}
  2. Find the SafeMode section and modify CallStack="ture"
  3. Find the customErrors section and modify mode="Off"
  4. IISReset
We can get Exception Stack when moss page occur error next time.

2008/08/22

Add Star Ratings to your Blogger Blog

8/22/2008 10:15:00 PM Posted by Kai-Chu Chung No comments
Blogger in draft support new Star Ratings feature, blog readers can hit rate easily of your post. To enable star ratings, login to
http://draft.blogger.com/ dashboard and go to blog layout page. Click "Edit" botton at Page Elements and selected the "Show Star Ratings".

Modify Blog Template

After enable new Star Rating feature, we must add few code to show star rating where you want.

1.decide a place to show star ratings. For example, to show star ratings in every post footer. Choice one of three paragraph
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'></p>
<p class='post-footer-line post-footer-line-2'></p>
<p class='post-footer-line post-footer-line-3'></p>
</div>

2.Add following section of codes
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Add above code, show star rating at single post view, if you don't.
delete it and don't forget </b> tag -->
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'
/>
</b:if>
</span>
</b>

3.Find this line in your template and add following section of code just after this line
<b:include name='nextprev' />
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript' />
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>


4.you done! Now, after save template and try it.

2008/08/18

ASP.NET 2.0 Content page add Css

8/18/2008 09:51:00 PM Posted by Kai-Chu Chung No comments
One of .NET framework 2.0 new important features. Master page, it allow you to create a consistent layout for the pages in your application. You can include Cascading Style Sheets link in master page for you all pages to use the same Cascading Style Sheets easily. But sometimes, you don't want content page to use Cascading Style Sheets inclued of Master page or you want add Cascading Style Sheets to a special page. How can we to do?

We can't add link Cascading Style Sheets syntax in ContentPlaceHolder of content page. So, we can use Htmllink control to add new attribuate.

protected void DynamicAddCss(string csspath) {
// Define an HtmlLink control.
HtmlLink myHtmlLink = new HtmlLink();
myHtmlLink.Href = csspath;
myHtmlLink.Attributes.Add("rel", "stylesheet");
myHtmlLink.Attributes.Add("type", "text/css");

// Add the HtmlLink to the Head section of the page.
Page.Header.Controls.Add(myHtmlLink);
}

// add Cascading Styles Sheet
DynamicAddCss("http://jquery.com/files/social/jquery.tabs-ie.css")

2008/08/15

Your HTML either contains unsafe tags

8/15/2008 10:18:00 PM Posted by Kai-Chu Chung , No comments
上一篇文章提到Google即將停止Page Create的服務。而以Google Sites來取代其功能。

因此想說就試一下Google Sites有沒有比較彈性的功能。在頁面編輯的時候加了一最簡單的Javascript語法,如果成功的話,就可以在Google Sites中試一些Google API來玩玩。

document.alert('alert popup message');


不過卻得到以下的訊息


又回去把Google announce的文章看一篇. !!!! 居然沒有看到..

I'm not sure if Google Sites is a good replacement for Page Creator, since the interface is more complicated and there are many limitations: you can't add JavaScript code, embedded objects or iframes, it's more difficult to upload files and to setup a simple site.

URI: Google Page Creator to Be Closed(Google).

Google Page Creator to Be Closed

8/15/2008 09:57:00 PM Posted by Kai-Chu Chung No comments
2008/8/9

在Google Reader中收到一個新的消息。繼Browser Sync, Hello, Send to SMS and Send to Phone extension之後,又有一個Google 所提供的服務要停止了→ Page Create

真是一個壞消息啊 ~~~ Bad Bad Bad.
因為在我擁有的2個Blogger中,尚有些Javascript的程式碼是放在上面。真不知道要把上面的Javascript搬到那去比較好。

具說明的理由是另一個Google提供的服務Google Sites中的功能已可包含Page Create中的功能,因為就會Page Create不再提供服務。喜愛Google服務的我當然在Google Sites一推出的時候就馬上先註冊一下自己的網域了,今天又上去東點點西點點,試試有沒有什麼新的功能。

看來是時候該把Google Sites摸熟一點了!!

2008/08/05

惱人的Google Map Api

8/05/2008 10:39:00 PM Posted by Kai-Chu Chung No comments
有使用過Google Map Api的人都知道,想在自己的網頁中嵌入Google Map必須先申請Google Map API Key,在申請的過程中除了要有Google帳號之外,還得輸入欲使用Google Map的網址。完成之後會產出是一組長達86個字元的Key。

上一篇文章(Google AJAX Feed API - AJAX Slide Show Rolling)提及利用Picasa Web Albums Data API 與 jQurey JSON的操作,即可完成Picasa Web Albums的輪播;其它有做用jQuery中 $.getJSON() 的函數來存取逺端的Picasa Web Albums Data。後來又修改了一下程式碼,直接使用javascript中 script.setAttribute 中的方法來指定url及callback function,並加入Google Map來表示地理位置,如下圖。



無奈不知道什麼時候使用過同樣的Google Map API Key,導至出現API已使用的訊息!!


真害!!!
想不出來在那用過了~~~~~~~~殘念!!

ps.此篇純屬mermer,等問題待解決之後,會把作法說明一下!!!
ps.第一個版本請見竹誌picasa Feed區塊

2008/07/02

Google AJAX Feed API - AJAX Slide Show Rolling

7/02/2008 07:00:00 PM Posted by Kai-Chu Chung , , , , , 3 comments
AJAX Slide Show 為利用Google AJAX Feed API作出來簡單的應用。允許使用者把 PhotoBucketFlickrPicasa Web Albums的網路相簿以幻燈片的方式嵌在自己的Blog、網站等中。在Slide Show 中Picasa Web Album Feed URL無法動態更改,利用Picasa Web Albums Data API 與 jQurey JSON的操作,即可完成Picasa Web Albums的輪播。


Live Demo
| Download


AJAX Slide Show
<script type="text/javascript">
function load() {
var samples = "http://dlc0421.googlepages.com/gfss.rss";
var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget: google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

var samples 為載入相關的Rss,在Picasa Web Album中都可以訂閱任何一個相簿的Feed。例如訂閱第七屆拼圖馬拉松的Feed(http://picasaweb.google.com/data/feed/base/user/cage.chung/albumid
/5217479087123706369?kind=photo&alt=rss&hl=en_US
)即可將此相簿以Slide Show的方式展示在網頁中。


AJAX Slide Show Advance

scenario
上述的方式,Side Show相簿的Feed為固定的,如果想要展示不同的相簿就必需更改程式碼,這是一件滿煩麻的事情。即然Google公開了Picasa Web Albums Data API,所以我們應該可以使用API搜尋特定user的相簿,以亂數組出Slide Show所需的Feed,達到相簿輪播的效果。

待解決的問題:
  • 選擇Ablum Feed Url
  • 決定Picasa Web Albums Data API回傳資料的格式及接收方式
  • Parser回傳的資料,找出組出Feed最主的資料(Picase Web Album ID)
  • 將亂數選出的Ablum ID帶入AJAX Slide Show

Step1
我們可以要求幾種來自Picase Web Ablum的不同的Feed。依照我們的需求,是搜尋特定user所有公開的相簿,在Picasa Web Albums 搜尋的參數[1]中會使用到kind與access2種參數
  • Kinds指特定類別的參數(ablum、photo、comment、tag、user)在此使用, user
  • Access指定相簿屬性(all、public、private)在此指定user所有公開的相簿, publick
因此,我們Ablum Feed Url則為http://picasaweb.google.com/data/feed/api/user/userID?kind=kinds&Access=publick

Step2
由於 AJAX 程式中的 XMLHttpRequest 只能呼叫同一個 domain 下的 URL,所以呼叫遠端並回傳XML資料型態的資料會以安全性考量被拒絕存取。又因為Picasa Web Albums資料格式提供另一種輕量級的資料交換格式(JSON),只有在Feed Url中指定alt=json即可將XML資料格式轉換成JSON格式並回傳。

選定遠端資料回傳格式為JSON,剩下的就是本機端該如何接收JSON型態資料。在此使用了一個新形態的 JavaScript程式庫(jQuery),程式庫中可以直接使用 jQuery.getJSON( url, [data], [callback][2] 操作JSON並進行AJAX回呼。此時的Ablum Feed Url更改為http://picasaweb.google.com/data/feed/api/user/cage.chung?kind=album&access=public
&alt=json&callback=?


Step3
剩下的部份就是Parser回傳的JSON資料
var numentries = json.feed.entry.length; //每一個相簿都是單獨的entry,numentries則為相簿的數量
var rNum = Math.floor(Math.random() * numentries); //以Random選擇相簿
var item = json.feed.entry[rNum];

var title = item.title.$t; //相簿的標題
var summary = item.summary.$t; //相簿的說明
var id = item.gphoto$id.$t; //最主要的相簿ID


Step4
將亂數選出的Ablum ID帶入AJAX Slide Show var samples 字串中即可




整合之後的Script 如下
<script type="text/javascript">
function load() {
$.getJSON("http://picasaweb.google.com/data/feed/api/user/<span style="
font - weight: bold;
">USERID</span>?kind=album&access=public&alt=json&callback=?", function(json) {

var numentries = json.feed.entry.length;
var rNum = Math.floor(Math.random() * numentries);
var item = json.feed.entry[rNum];

var title = item.title.$t;
var summary = item.summary.$t;
var id = item.gphoto$id.$t;

if (summary.length > 0) $("#msg").html("<h4>" + title + "</h4><p>" + summary + "</p>");
else $("#msg").html("<h4>" + title + "</h4>");

var samples = "http://picasaweb.google.com/data/feed/api/user/<span style="
font - weight: bold;
">USERID</span>/albumid/" + id + "?kind=photo&alt=rss&hl=en_US";

var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget: google.feeds.LINK_TARGET_BLANK,
scaleImages: true
};
new GFslideShow(samples, "slideshow", options);
});
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>




Reference
  1. Interacting with Picasa Web Albums
  2. you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request.
  3. Projection values: Feed URL "api" 與 "base"的差別,api參數提供了gphoto相關元素(包括我們需要的album id)
base
api

2008/06/27

Blogger Draft Announce inline comment system

6/27/2008 08:58:00 PM Posted by Kai-Chu Chung No 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 No 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 No 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 , , 1 comment

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 , No 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 No 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 , , , , No 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 No 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 No 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 , , No 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

2008/05/29

Embedding Google Earth in Your Web Page

5/29/2008 09:16:00 PM Posted by Kai-Chu Chung , , No comments
Google Earth 於5/28 釋出 Google Earth Browser Plugin
所以現在想要使用Google Earth多了一種選擇
不一定要下載Google Earth

donwloading plugin

並於幾個小時之後也公開了Google Earth plug API
讓使用者可以把Google Earth直接嵌入到自己的網頁中


<html>
<head>
<title>Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YourGoogleMapKey" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=YourGoogleMapKey"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99"); // For JS geocoder

var ge = null;
var geocoder;

function init() {
geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", initCB, failureCB);
}

function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
}

function failureCB(object) {
alert('load failed');
}

function submitLocation() {
var address = document.getElementById('address').value;
geocoder.getLatLng(
address,
function(point) {
if (point && ge != null) {
var la = ge.createLookAt('');
la.set(point.y, point.x, 100, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 4000);
ge.getView().setAbstractView(la);
}
}
);
}

</script>
</head>
<body onload='init()' id='body'>
<div id='map3d_container' style='border: 1px solid silver; height: 500px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
</body>
</html>


Live Demo簡單展示把Google Earth 嵌入到自己的網頁中

參考資料:

2008/05/20

Showing Hyperlink Cues

5/20/2008 07:16:00 PM Posted by Kai-Chu Chung , No comments
HyperLink讓我們可以將視窗導到我們指定的頁面
包含打開特定格式之檔案、Send mail。
例如:

Google 首頁
mailto: me
View Holidays

我們都可以在HyperLink中完成這些動作

而上述3種的連結樣式若無特別指定
則會套用瀏覽器的預設值

除此之外
我們亦可以利用Css or Javascript為這些特別的連結
加上容易辦別的圖示
例如:
  • 外部連結檔案圖示
  • mailto: link 圖示

Cues With Css

利用Css為hyperlink加上小圖示
必需使用到Attribute選擇器(for IE 7, Firefox 2, Opera 9。browser-support#css)
由於IE6並不支援Attribute選擇器,所以就由Javascript來實作

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
  1. a:Element 選擇器
  2. href:Attribute選擇器
  3. $:href 屬性以pdf結束

Cues With Javascript

由於在IE6並不支援Attribute Selector
所以就使用Javascript的語法來實作


function fileLinks() {
var fileLink;
if (document.getElementsByTagName('a')) {
for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
if (fileLink.href.indexOf('http:') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'externalLink';
}
if (fileLink.href.indexOf('pdf') != -1){
fileLink.className = 'pdflink';
}
}
}
}
window.onload = function() {
fileLinks();
}


.externalLink {
padding-right: 14px;
background: url(App_Themes/MyTheme/Images/hyperlink.png) right center no-repeat;
}
.pdflink {
padding-right: 18px;
background: transparent url(App_Themes/MyTheme/Images/icon_ttf.gif) no-repeat center right;
}