Hardworking Strawberry

html5 touch event on android/ipad

2012-01-12T12:12:00.000+08:00

最近系上的收發件要電子化，既然要做，當然就連無紙化也要一起做啊！參考了ups 之類都有一個電子的收發，所以我就弄了html5 的簽名板。

但是常用的mouse down, mouse move, mouse up event 在android 上卻不能跑QQ
查了一下才發現有專門給這類觸控的event: touchstart, touchmove, touchend

但是在ipad 上跑都ok，android 系列卻一直都有問題。google 以後
後來改完以後，大致上包括下面幾個

preventDefault() ，(參考網頁)
在android的browser上，touchstart touchmove 都有default的，如果沒有prevent的話，touchmove只會fire一次！
$('#canvas').bind('touchstart', function(e) {
e.preventDefault();
draw = true;
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
draw( touch.pageX - this.offsetLeft , touch.pageY - this.offsetTop) ;
}
$('#canvas').bind('touchmove', function(e) {
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
draw( touch.pageX - this.offsetLeft , touch.pageY - this.offsetTop) ;
}
touchevent 的 location （參考網頁）
在 iphone/ipad 上可以直接用
e.touch.pageX/Y
來取得touch的位置，但是在android 上，pageX 跟pageY要用
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
來取得才會對！(jquery 的event 有重新包過，所以要拿originalevent

至於繪圖的部份我是參考 Create a Drawing App with HTML5 Canvas and JavaScript (javascript)的code，不過他每次move都會重新畫圖(我不確定為什麼要這麼做，有一點沒效率)，等等改完code 測試OK 再放上來好了！

還有關於mouse position，我一開始canvas的size是用 style='width:100px;height:200px' 這樣的方法做的，但是這樣它做的事情卻是"縮放"canvas 來達到設定size的效果，try 了很久換成用

SSL 購買注意事項

2011-10-27T14:14:00.000+08:00

最近系上打算要開始買ssl 憑證，老師說要知道各家的差異，所以我很認命的查了一些資料，整理如下

主要差異：

Single Root V.S. Chained Root

Single: 大部分數位憑證都擁有自己的憑證發放機構 (CA)以及自己的根憑證，這些公司的SSL 憑證都已經加入瀏覽器的安全憑證機構的名單內。
Chained: 有些憑證機構並沒有一個被瀏覽器信任，或者並沒有自己的根憑證，這些公司就使用一種所謂『連鎖』根憑證來取得瀏覽器的信賴。有人說chained比較不安全，但是google 也是用chained (不過聽說安裝比較麻煩！)

Domain Validation V.S. Organization Validation V.S. Extended Validation:

Domain Validation: 只有Domain 的資料
Organization Validation: Cert 包含organization的資料
Exteneded Validation (EV): Green bar (像google 在網址列上有自己的公司名字)

Single Domain V.S. Multiple Domain V.S. Wildcard SSL:

Single Domain: 只支援一個domain
Multiple Domain: 可驗證多個domain (不需要是同一個subdomain)
Wildcard: 可用regular Expression驗證domain (例如：*.csie.ntu.edu.tw ，表示所有csie的subdomin 都可以使用)

Security:

Warranty: 投保金額 (我覺得好像還好xDD)
Validation: Organization 的資料驗證(會影響憑證發放的時間，還有顧客信任度，但說實話，就網頁瀏覽我們系上的狀況應該沒差xDD)
SGC : 強制讓早期的瀏覽器使用128-bit encryption (早期通常是 40-bit，不過通常我們可以不考慮早期的瀏覽器吧xD)

支援度：

跟CA有關，現在幾乎各個瀏覽器都已經支援主要的CA
Fully support : Verisign , Thawte
不支援 IE 5.X , Netscape: Entrust, Baltimore, InstantSSL
Opera支援度低(Opera 7↑) : GeoTrust

Misc:

Customer Service: 買國外的客服要講英文，買國內的不見得有24/7 的支援
Entrust 發過憑證給中國亂發憑證的，事件弄得很大(google 搜尋cnnic)
verify Domain 的價格大約一年3~4000元， verify Organization的通常一年都要上萬元！

參考資料：

Link to my Web server in NAT via SSH tunnel

2011-09-21T00:50:00.003+08:00

Home PC ---- School PC(SSH Server) --- SSH Tuneel ----VM

School PC:

Since it is windows, I used CopSSH
Note: Execute Initial Setup with (Run as admin)
Modify C:/Program files/ICW/etc/sshd_config , addGatewayPorts yes

Build SSH Tunnel:
@VM $ autossh -o "ServerAliveInterval 60" -o "ServerAliveCountMax 3" -R :10023:localhost:22 user@SchoolPC

HomePC(Pietty)
Access VM ssh:
ssh SchoolPC:10023

Access VM Web Server:
(In Pietty:) Tunnel → source port: 10005 and Destination: localhost:80
browse web through localhost:10005!!!!!

Dropbox PHP API

2011-03-25T18:59:00.000+08:00

因為某 Xntel-Xtu Lab 的網站說想要可以讀dropbox 上的檔案，要可以上傳檔案，可以下載檔案
所以我用了這支 http://code.google.com/p/dropbox-php/

但是它裡面問題還滿多的，主要有兩點

file name 或是 folder name中間有空白，就會掛掉

putfile 不能用PHP OAuth extension ，要用 PEAR's HTTP_OAUTH package

第一個問題主要是原來的code在呼叫dropbox api時，沒有用urlencode包起來，
因為我目前只有用到 getMetaData putFile getFile move ，所以這幾個function 已經修好了(我是懶人)
附上改好的api 檔：link (取代原來API.php的位置，我的話是在 /usr/share/php/Dropbox/API.php)

第二個問題只要改成用
$oauth = new Dropbox_OAuth_PEAR($consumerKey, $consumerSecret);
就可以了

附帶提一下，安裝oAuth-Pear 時會跳出alert 說alpha版不行唷，加個-f強制一下就好了
pear install -f HTTP_OAuth

ldap sync with Google apps for education

2011-03-12T20:21:00.000+08:00

說明文件：http://www.google.com/support/a/bin/answer.py?answer=106368
pdf: http://www.postini.com/webdocs/gads/admin/gads_admin.pdf

流程：

利用configuration manager 建立configuration file(xml)

利用sync-cmd 指令讀取剛剛建立好的檔案 (sync-cmd -a 才會套用，不然只會當作模擬)

設定crontab 定期執行sync

Note:

sync是單向的( 只會改google apps的資料，並不會改動ldap上的data)

configuration manger 就是上面網址的windows版本

linux的sync-cmd指令要下載上面連結的linux

遇到的問題：

unsolved:

轉過去以後有些user無法建立帳號： InvalidHashDigestLength(1405) - InvalidHashDigestLength(1405)
http://www.google.com/support/forum/p/Google%20Apps/thread?tid=5dbcecd8358da574&hl=en

solved:

configuration manager 在win7好像要用system administrater 執行，不然會完全沒反應

google api 出現 "Domain cannot use API"：去control panel 的group ，要把"Enable provisioning API"打開

ldap server上每個帳號一定要有mail的資訊，否則會被skip掉

default 新建的user好像都會變成suspended 還在研究要怎麼處理: 用configuration manager建的xml 裡面<suspended >被寫成True了，要把它改為False

pending:

csie有設tls加密，configuration沒辦法設定，所以連不上server
TESTING: http://www.google.com/support/forum/p/Google+Apps/thread?tid=0b9d3f130628f63b&hl=en
(結果太麻煩，我決定用ldap就好，然後限制可以連port 389的機器 ~~~ xDDD)

javascript failed in IE

2011-03-12T12:48:00.000+08:00

我決定要留一篇集合文，以免老是不小心踩到雷=.=

trim:
string.trim() will fail in IE, you have to use trim(string)

event.target:
use event.srcElement instead of event.target

Mail Server: dovecot with sieve support

2011-02-16T23:26:00.000+08:00

http://www.howtoforge.com/dovecot_mail_server_sieve_virtual_users

Install from source: dovecot and sieve .
dovecot: CPPFLAGS=-I/usr/include/openssl LDFLAGS=-L/usr/lib/ ./configure --with-pam --with-ldap --with-nss --with-ssl=openssl
sieve(pigeonhole): ./configure --with-dovecot=../dovecot-2.0.9/
make
make install

cp ms dovecot.conf

edit dovecot.conf
mail_location=maildir:~/Maildir

problem encountered

g++ not installed

cannot find make: build-essential not installed

libpam-dev libldap-dev libnss-dev libssl-dev install required

Hero 升級2.1

2010-05-04T02:35:00.000+08:00

因為被htc放鳥很生氣，所以最後我還是決定用其他非官方版了 XD

從 mobile01 的討論串中研究了一下，目前是2.1版的rom大致上有：

Villan Rom

BeHero -> 中文支援度不佳，因此分版出BeAsia

Legend

Flzyup

我把全部的討論串看完了，前三個大致上都有中文化支援度不佳的困擾，因此我選了FLZYUP@INNOVATIVE_ROM_v2.3
不過目前最新版的Flzyup還有兩個已知但還未解決的問題，所以請確定你可以接受再安裝(我就直接Quote原文了)：

自動背光不正常

視頻可以拍攝但是播放無圖像 (呃，我不知道這樣到底是拍影片有問題還是播影片有問題)

如果你從來沒有嘗試過換Rom，取root …等會跟原廠保固說bye-bye的動作的話，請先走下面步驟

1. 請宣誓："不管我的手機變磚頭都跟lydian沒有關係，這純粹是我的人品不好，本人絕對不會要求lydian付起任何責任" (是的，你的手機很有可能變磚頭，而變磚頭請找論壇求救不要找我，我還是小菜鳥)

2. 下載 flash rec.apk (android market上也有)
Amon Ra's hero recovery image
flzyup@innovative rom (md5: f2caba5c8051c8052d1ce10aa6a062b9)

3. 把這三個檔案傳到你的手機上

4. 用任何app installer 安裝 flash rec.apk

5. 安裝完後開啟flashrec，按下”Backup Recovery Image” 的按鈕

6. 等待backup完成後，在文字框輸入

/sdcard/recovery-RA-hero-v1.5.2.img

然後按下”Flash custom recovery image”的按鈕

7. 完成後關機

如果你換過ROM，或者是在Backup Recovery Image步驟時出現”Backup FAILED: could not run command.”訊息，那麼請從下面步驟開始

1. 下載flzyup@innovative rom (md5: f2caba5c8051c8052d1ce10aa6a062b9)，丟到手機sd卡中(前面步驟抓過的請忽略)

2. 手機關機

3. 同時按下 "Home" 及 "power"鍵，直到出現文字畫面的訊息 (不是HTC的logo唷，是要有文字的畫面)，這邊要按很久才會出來，所以請耐心等待

4. 進入後先選擇"backup" -> "Nand + ext backup" 這邊要花一點時間，記得要按下 "home"鍵確認執行

5. 備份完成後回到主目錄執行 "wipe" -> "wipe data/factory reset" 及 "wipe" -> "Dalvik-cache"，兩個動作也是都要按下"home"鍵才會開始執行唷

6. 移除完後回到主目錄選擇 "Flash zip from sdcard" ，然後之前下載的 flzyup 會出現在你的選項中，選擇它之後就會開始跑了！！！

7. 等待它說完成以後，回到主目錄選擇 "Reboot system now" 就ok了 (P.S. 第一次的開機總是會特別漫長，我等了10分鐘↑ 才開機，所以請保持微笑耐心祈禱 )

8. 開機以後，照著設定精靈跑就大致上ok了，不過輸入法預設似乎是大陸的拼音，所以請到"設定"裡面改成"手寫"或"注音"，基本上到這裡大致就完成了

最後炫耀一下XD

一邊在螢幕輸出，一邊同時記log的方法

2010-04-21T22:45:00.000+08:00

終於問到了

1. stdout + file
COMMAND | tee LOG_FILE_NAME

2. stderr + file
COMMAND 2>&1 | tee LOG_FILE_NAME

2>&1 是 stderr -> stdout，然後再用 tee 同時存到檔案中

COMMAND是指令，
LOG_FILE_NAME是要記的log檔名

flash builder 更新後的差異

2010-04-03T00:24:00.000+08:00

今天把之前的案子重新compile一次，遇到compile不過的地方，把解決方案列出來供大家參考吧，陸續補完中！

namespace change: mx 現在要用mx1才行，如果不想換的話，也可以選擇改namesapce 的宣告區域，把mx的換成 xmlns:mx=”library://ns.adobe.com/flex/mx”

Border改名為BorderContainer

Border property: backgroundImageResizeMode 改成 backgroundImageFillMode，用法看起來更彈性了，細節可以參考這裡

BorderContainer的default background是白色的，舊的Border是透明的

另外，新版builder似乎非常喜歡refresh workspace(囧！)
如果覺得很吵的話，可以從preference -> general -> Workspace，把 Refresh Automatically 取消掉就好
之後每次要手動更新的話，直接重新整理context menu就好了:)

flash 4 builder release 了

2010-04-01T13:34:00.000+08:00

不知道該高興還是難過
經歷過beta beta2以後，正式版終於登場了！
不知道新版會不會把beta時期莫名其妙亂砍import的問題修掉呢？ (怨念！！)
但是目前已經發現跟beta2版不同的地方了！
namespace mx都已經改成mx1了(這個bug 讓我de了20分鐘才注意到T.T)

不過我的beta2版序號又不能用了，但是目前還找不到像beta 升beta2時序號更新連結的地方~"~
如果有人找到了，還請不吝告知呀！謝謝了！

========================== 下面補充目前的試用心得======================================================

我一定要complain一下，
Adobe真是太機車了
新版builder一直在refresh workspace ，開發時候動不動就要等它refresh...速度慢超多的！
還有，新舊版除了之前提到的namespace以外，我現在又遇到了graphics的問題
一直拿到" 不合法覆寫 com.degrafa.paint.SolidFill 中的 SolidFill。"這樣的錯誤訊息(舊版是ok的) --->目前還在研究要怎麼改才會work！！！
而且我一定要研究出來才行，因為beta2現在已經不能打開了，所以我沒辦法用beta2這個至少可以跑的版本先run一些結果！！！！(暴走！！！)
Adobe 這樣真的很機車！！！！

blog 數學模式啟用 ^^

2010-03-31T03:33:00.000+08:00

耶，現在這邊也可以用latex了，請見：

$latex e^{i pi} + 1 = 0$

不過跟原始latex 不大一樣的是，latex是夾在 $...$裡面，
這邊第一個$後面還要加上latex！

p.s. 我裝的是wplatex 這支plugin

jsmath plugin: dokuwiki

2010-03-30T07:25:00.000+08:00

因為在整理reference的關係，想要加上筆記(為了方便隨時更改，我把筆記寫在wiki上)
可是卻發現我常常要在筆記裡寫一堆數學式，如果能用latex格式來寫那該有多好！
上網搜尋了一下，發現doku wiki裡果然有: jsmath plugin！！

安裝方式：

下載jsmath lib，解壓縮在網路空間裡
(p.s. 因為javascript 安全性限制的關係，要放在跟doku wiki同一個domain才行唷)

跟安裝dokuwiki 一樣的方式安裝jsmath plugin (直接複製連結到doku wiki plugin安裝頁面的text bar就ok了)

進入doku wiki的config頁面，在Plugin Settings >> Jsmath Plugin Settings，在"The full URL to your jsMath or MathJax installation"那欄填上剛剛解壓縮的資料夾"完整URL"

Done!!!!

使用方式：
跟latex一樣，分成inline跟block兩種，
inline包在$$裡面，block包在 [ ]

結果：看我的wiki吧xD

p.s. reference我是直接存成一份bib檔，方便寫thesis 時可以直接copy
平常要閱讀用 bibtex browser 來看
為了美觀，我懶得調原來的css檔，所以就另外抓了一個html template，然後內頁用ajax的方式抓原來那支php的內容(寫ajax好像也花了不少時間齁xD)
偷偷炫耀一下

我喜歡這種整理方式 :P

flex 筆記 creation complete event

2010-02-11T18:27:00.000+08:00

這次接的案子使用者回報有時候會忽然間空白一下，等到有畫面的時候，就會直接顯示答案！
我一開始以為是visible的屬性設的時間點不對，從頭檢查卻發現都沒有問題！

然後忽然間想到，不會是我在flash還沒把圖畫出來的時候就開始跑我的function了吧
這次的直覺果然沒錯！
所以把我的function加到creation_complete的event listener以後就正常了！
(講得講簡單，我在找要用哪一個event listener還花了不少時間XD)

總之，以後寫flex一定要記得注意畫圖是asynchronize的，bug太多都是這樣生出來的呀！

[Chrome Extension] GY Dictionary

2010-02-07T11:22:00.000+08:00

最近實在不大想乖乖趕進度，所以玩了一下chrome的extension
發現其實還滿好寫的，都是javascript 堆出來的

所以我寫了一支查字典的extension ，尤其最近要寫論文了，常常會需要查字典
Google dictionary 跟 Yahoo dictionary是兩個我最常用的，能夠同時查兩個是最好了
(google dict主要用來查字義還有例句，yahoo dict則是可以拿來查同義字跟反義字！！)

連結

本來只有做查Google 跟 Yahoo的功能
然後因為培堯大大的話，所以最近又加上了自訂網站的功能:p

看著安裝數已經衝過100了，坦白說還滿開心的 :p
接下來想加的功能是快速鍵開啟查詢畫面 ^^

另外還在找要怎麼樣才能開啟外部程式！！如果有人知道的話還請告訴我唷！

Flex 4 滑鼠按住不放

2009-10-15T04:02:00.000+08:00

今天為了找滑鼠按住時可以持續作用的function 試了好久，終於找到了！

原來Button有一個autoRepeat的屬性，只要設為true 就可以在滑鼠左鍵按住不放時自動重複ButtonDown的事件範例如下：

Hero 取 root

2009-10-12T19:02:00.000+08:00

先把建議寫在前面好了，如果要保留中文輸入，我覺得現在不是很好的時間！

昨天主要試2個不同的方法：

直接在原廠的partition加上su指令

換成客製的ROM

第一個方法原則上可以保留中文輸入，但是在我很開心的試了整晚，很挫折的卡在某個步驟，然後才搜到一篇論壇文章說現在拿到的Hero全部都有鎖，解鎖方法超複雜，還要焊接…小的實在無熊為力~"~
http://forum.xda-developers.com/showpost.php?p=4257045&postcount=38

第二個方法基本上可以work，Hero上我找到的都是Modaco的Rom，他update超快，昨天看到已經是2.5.1版了，

通常Modaco出來會分二個版本，Core、Chinese Core，

2.5.1目前core已經出來了(還有Enhanced版)，但是Chinese版還沒好，據網站說很快就會release了

昨天嘗試了modaco，作法很簡單，不過因為不是中文版，雖然語系可以調成中文沒錯，不過我怎麼試都不能把輸入模試換成中輸~"~

作法我先放出來好了，等中文版release就可以來試試看了！操作方式推荐可以看theunlockr.com 的影片教學！大致分兩個步驟：

http://theunlockr.com/2009/08/27/how-to-root-your-htc-hero-in-one-click/

http://theunlockr.com/2009/08/27/how-to-load-a-custom-rom-on-your-htc-hero/

第一步應該主要是讓手機可以進到Recovery Mode (一般的手機會進不去)，所以要做的事情有：

下載需要用到的東西們
flashRec.apk
cm-hero-recovery.img (網站上提到可以使用新AR版我進到Recovery Mode要繼續時，找不到他說的Green Button，雖然功能加了不少，還是先用舊版的吧)
Modaco's Custom Rom Core
Modaco's Custom Rom Enhanced (不一定要抓，只是多了plurk跟名片辨識功能而已)

把抓下來的兩個檔案存到手機sdcard的根目錄

在Android Market上找到app Installer並安裝

打開app Installer找到剛剛copy到sd卡裡的flashRec.apk 安裝！

在程式清單中找到Recovery Flasher進入

按下"Backup Recovery Image"按鈕

在文字框輸入"/sdcard/cm-hero-recovery.img "，然後按下"Flash Custom Recovery Image"按鈕

選擇關機

同時按下"Home"跟"power"鍵，直到畫面出現Recovery的圖案(要按有點久，我覺得！)

利用軌跡球移動到下面的"backup" 選項，按一下軌跡球開始備份

畫面上出現complete訊息後，選擇wipe data

操作完成後，選擇第三項，接下來會跳出你想要update的zip檔列表，選擇 core的zip 檔

如果不想裝enhaced版的，可以等畫面顯示完成後，直接選第一項重新開機就ok了。想裝enhaced版的再按一下第三個選項，選擇enhanced的zip檔，同樣等畫面好了之後重新開機

重新開機(要等很久)之後會跳到語言切換的畫面，先選擇English(United Kindom)，設定完成以後再進到程式列表中找到More locale，進去之後最下面就有中文的選項可以選了！

不過就算換成了中文，我還是沒有辦法把輸入法也切過來，鍵盤上怎麼樣都沒有中文輸入，去"設定"裡面也沒有用，要是有人知道該怎麼辦請再跟我說吧！感謝！

Hero上發文

2009-10-08T20:39:00.000+08:00

這昰用Wptogo這個在Hero上的App來發文的,好用的話就可以開始慢慢加上Android好App推荐系列文了:P

Google 路線規劃

2009-09-22T05:58:00.000+08:00

欠了一堆該整理出來的東西沒有完成時，我發現了google一個超棒的功能！這個功能棒到讓我覺得如果不立刻把這件事情紀錄下來真是太可惜了！

到底是什麼功能呢？看了我的標題可能會以為我怎麼會為了一個很常見的功能而大驚小怪！但是，我必須要說的是，我們都把Google 想簡單了！！！

事情的開始是這樣的，這學期我修了一門行動電話程式設計，我們的第一門作業是要尋找一個你想要解決的問題，還要幾張自己的照片或圖片！這個作業題目對我來說一點也不難，因為我修這門課本來就是為了要讓我跟Brian能更緊密啊>////<

因此，我要放的第一張圖片理所當然該是展示我們兩個之間的距離圖。距離圖當然要用Google Map啦！於是我用了路線規劃，起點設Brian的所在地：Davis, CA，終點當然就是台大了！接下來，Google就幫我跑路線規劃了！！

天哪！！跨洲也能規劃！
是的，請見下圖，真的可以規劃唷！這次google幫我排的行程中間還會短暫的在太平洋上某個小島休息！！！Google 有沒有這麼貼心呀！
P.S. 也有過境日本耶(撒花花)

接下來，我很好奇Google究竟會怎麼規劃它的整個路程…，所以我仔細看了旁邊的指南！

沒錯，你沒看錯，真的是搭獨木舟！！！XDD
但是這樣就結束了嗎？不，我們再繼續把畫面往下拉！

哇！連水上摩托車都出來了… Google 果真是讓人想不透啊！！
最後，我們還是來總結一下這個路程吧！

嗯，總共需要37天…原來我跟Brian的距離不是只有16個小時啊…T.T

Google 你真是太酷了！！！

Interaction Cost

2009-08-19T10:50:00.000+08:00

最近念了一篇Infovis Symposium 2008的paper

題目是：A Framework of Interaction Costs in Information Visualization(link)
作者是Heidi Lam，現在在google工作

這篇文章review了434篇paper，然後參考了Norman's model，將所有user在Interaction的cost分成了七項，並且分別舉例，方便大家理解。(這裡的cost不妨當作機會成本來理解)

Norman's model是Donald A. Norman 提出來的HCI model，大致是將Interaction分成兩個stage, 7個細項：

Execution: 指user的想法到傳遞給computer的過程
(1) establish the goal: user：在腦中決定想要做的事
(2) forming the interaction：組織系統操作的過程
(3) specifying the action sequence：確定行為流程
(4) execution the sequence：執行行為

Evaluation:指computer的feed back傳遞到user理解的過程(1) perceiving the system state
(2) interpreting the system state
(3) evaluating the system state

不過在這篇paper它修改了原始的架構，改成3個stage，將原來establish the goal 獨立為一個階段，因為這個階段與系統本身的互動並沒有太大關係，所以獨立出來。而原來兩個stage仍繼續保留。新版的stage如下：

然後他根據這七個階段，分別定義出七種不同的cost：

HTML CSS 基本教學

2009-08-18T18:38:00.000+08:00

投影片下載

基本架構

注意事項

<xxx></xxx>是一組標籤，標籤通常是相對的，有開始標籤<xxx>，也有結束標籤</xxx>，有的標籤只有一個，這種標籤要寫成這樣<xxx 屬性/>

標籤大小寫不拘

常見的HTML Tag

超連結

Yahoo

href=“連接的網址”

target=“開啟方式”，常用的有“_self”(在自己這頁打開超連結)及“_blank”(開新視窗)
測試語法：
```
開新視窗
開在本頁
```
測試效果：
```
開新視窗
開在本頁
```

寄信
```
寄信給我
```
測試效果：
```
寄信給我
```

錨點：
定位
```
xxxxxxx  
xxxxxx
xxxxxx
```
第一行的寫法是早期的，新的規範是像第二行用id來定位，最保險的作法是兩個都寫囉
移到錨點
```
移到hello處
```

插入圖片

單寫寬度或高度可等比例調整圖片大小

px 也可以換成百分比表示

title屬性表示滑鼠移過去時要顯示的說明文字

alt屬性表示圖片無法讀取時所顯示的文字

8/20 MA Memo

2009-08-18T00:30:00.000+08:00

Recommender Systems Research:A Connection-Centric Survey (link)

Simplexml

2009-07-25T05:47:00.003+08:00

讀檔:

$xml = simplexml_load_file("iv04dataset.xml");

if(!$xml) echo "fail";

找element(利用xpath找):

$t = $xml->xpath("/articles/article[@id='acm721078']");

讀value:

echo $t[0]->title;

讀attribute:

$attr = $t[0]->attributes();

echo $attr["id"];

HCI 6/23 Talk 筆記

2009-06-23T14:54:00.004+08:00

人處理information的process!!!

social networking

傳統研究：
cluster怎麼組成
information flow
transition property
Zipf'law and email-world networks
→ 把人看成node

comment: It's not enough

multi-level approach
人跟機器的處理應該是不同的
可以對人的behavior做比較好的預測

"social-level": 把人當成一個flow
"cognitive-process": 解釋跟限制node的interaction
"perceptron-level"

一個人是如何處理大量的information?

→Information need

→Goal?

如何從Search去學習 Information? model mental Integration!!!

Information foraging:

SNIF-ACT

reenforce leraning:人跟動物怎麼看到東西

Information Scent

Action Selection

對簡單的page有list of link

再計算每個link跟goal的match有多高？

總體的evaluation放到action selection

對不同的query會有不同的profile

看到跟決定有沒有用不見得是同時的事，可能會參考別的result的結果！

(大概看到第4個link時去click第1個link的機率最高)

law of surfing

Aggregation

從congitive的角度出發，跟直接觀察發現畫出來的pattern是一模一樣的！

Chin,. Fu，Kannampallil, 2009

ill-defined task : elder做比較好

well-defined task: younger做比較好

不同的cognitive abilite(Aggreate)→Search Strategy→Search Performance

Different Information task structures／

information goal 是ambiguous

但是在search 過程中會不斷改變

exploratory searching ←→ Social

human search怎麼影響到search performance

folksonomies

open vocabulary problem→不同的人有不同的indexing的話，會不會不好做

experiment on exploratory search:

1. tag的確是有效的

2. 除了可以找到需要的資料的話，可以把裡面的資料很好的categorize→對topic的了解比較深入

semantic limitation Model

Conclusion

multi-level 可以有不同的explanation

可以多跟心理系合作xD

Technical Writing 05 - Body

2009-05-25T10:49:00.003+08:00

這星期進到內容的部份啦(原來剩下三週課程就結束了！！！)

Body雖然會因為內容而異，但是還是有一些基本的準則可以參考的。
首先，一段應該只有 one idea!!!

它的結構跟一篇文章的結構很像，大致可以分成：

Beginning (Topic Setence) :　這段的idea，大概用1~2句話描述
Middle (Supporting Idea): 證明topic sentence的evidence.
Again, 3 is the magic number!!! 通常外國人習慣接受是三個理由，或是三個例子(這是最剛好的數量)
End (Concluding Sentence): 用一句話總結整個句子，簡單的summary，可以用第一個句子換句話說XD
Transitional Sentence: 這是optional的，一般作文有的話可以讓段落間的flow很流暢，但是在paper中，因為段落之間差異太大，通常不會加！

另外，在段落或Supporting Idea的發展時，常用的有

從大題目到specific的小題目(寫introduction時也常用這方式)
空間順序(由遠而近或由近而遠)
時間順序(順敘法或倒敘法)
流程：這是paper裡面最常用到的作法。

另外因為我上星期詢問是否可以找一篇外國人寫的Introduction，讓我們看看什麼才是好的introduction，所以David找了一篇外國學生寫的文章讓大家參考，雖然不是conference paper

看起來只是一篇學生的作業，不過David說這篇寫的非常的簡潔易懂，是個很好的sample！

還有，David另外還給了一份reference檔，分別講寫各個不同的部份時可以用的句子，句型。

這星期紙本資料很多，所以投影片看起來少少的:p

Technical Writing 05 - Body

View more OpenOffice presentations from Tingyen Lee.

Technical Writing 04 - Introduction

2009-05-25T07:52:00.004+08:00

所謂萬事起頭難，Intorduction真的是每次都讓我最頭大的一部份！

一開始，David便回應第一堂課我的問題：Abstract跟Introduction的差異

(奇怪，怎麼又是我的問題，我果然是問題寶寶~~哈哈)

先講相同點：

兩個都要把目的、動機寫出來
兩個都要提到概略方法、主要結果還有結論

那不同在哪呢？

Intorduction雖然最好不要太長，不過通常我們不會有字數限制(Review: Abstract建議字數大約是200字左右)
Introduction的主要目的是提起動機和背景，因此通常都會從比較general的地方開始，再慢慢導入到specific的問題，也就是這篇paper想解決的問題，提方法跟結果的目的只是讓讀者知道要怎麼繼續讀下去。
Abstract則是對整篇paper做一個簡短的summary，所以paper的結論相對而言比introduction還要重要，而且abstract也不需要(也沒有空間)做像introduction的導讀。

David先提了一般在寫Introduction常見的開頭法，不過他最推荐的還是top-down approach(General topic->Specific topic)：

Quotation : 一般作文常見，不過不要拿來用在寫research paper上
Question: 類似中文作文的疑問句法囉(不會的去問國小作文老師= =)
Opposite Opinion:
interesting fact:
paradox: mystery推理小說似的寫法
Analogy: 跟現有東西的比較

不管用哪一種開頭，一定要銘記在心的是寫Introduction的兩個功用：

Define: 定義要解決問題
Divide: 把問題分成小部份，讓之後的段落可以各個擊破！

一個好的introduction可以讓你上天堂，也可以讓你住套房(我在講什麼啊XD)

因為introduction才是讀者看到的第一段話(並不是Abstract)，所以在Introduction要做到的事情有：先吸引讀者的注意力，告訴他們這篇paper的背景知識，讓他們對你提出的問題產生興趣，最後再引導他們到你的thesis statement！

接下來提到我們常常會犯，而且會搞砸一篇paper的錯誤：

時態：可能是我們的語言沒有時態，所以這是超容易犯的錯誤。不過之前我以為這個錯誤還好，反正外國人也知道我在講什麼嘛~~沒想到David說這會是他最頭大的地方，因為他念到不同的時態，會自己感覺到時間，但是當描述的時間跟動詞的時間不一致時，就會讓他覺得整篇文章念起來很不通順!!! 我沒想過文化不同
簡單的說，除非是well-known fact，不然只要是我們自己paper的result，一定要用過去式，因為你一定要做完了才能submit你的結果啊，所以只能用過去式！！
不要在paper裡面提到你們的author裡面誰做了什麼事，這一點也不重要。
不要用主觀的語氣描述事情(ex. I feel, I think, I believe...)
不要用太情緒化或誇張的字眼(ex. huge, wonderful, etc.)，這類詞語很不精確，用在paper上或弱化paper的力量。
為每一個重點寫下你的解釋或證據證明這一點是對的。不要只是一直換句話說。

這次的sample 是交大的paper(link)

"Because tremendous commerical potential"一開始就很明確的告訴人家牛肉：money!!!!

然後給了一個這個領域的overview。在第二段接著講可以用的scenario帶出問題，還有他們打算怎麼解決。

David非常讚賞這篇，因為他說連他這個不是cs領域的人看了introduction都能知道他們想做的是什麼。

Technical Writing 04

View more OpenOffice presentations from Tingyen Lee.

flex DragManager

2009-05-13T13:59:00.004+08:00

在flex 裡面要做drag，除了幾個原來就有implement drag的controller以外，

還可以利用DragManager來處理

假設物件A要拖到容器B裡面，用Drag Manager的話，最基本的用法就是：

B listen DRAG_ENTER 事件
B listen DRAG_DROP 事件
A listen MOUSE_MOVE 事件

我在網路上找到了一個很好sample code: flex 2 Drag and Drop 練習

然而實作的時候卻發現一個大問題

假設我的容器B長這樣：

<mx:Canvas id="playground" width="300" height="300"></mx:Canva>

測試時發現, DRAG_ENTER完全沒有被觸發！！！不死心繼續找，終於在某次發現是background，是background啊！！

只要在attribute裡面設定了backgroundColor或backgroundImage，就可以讀得到了！！！

如果不設background只設border，那只有在經過border(有畫出來的時候)才會觸發DRAG_ENTER event!!!!

所以這時候就出現一個問題了，如果我就是不要background怎麼辦，

目前我只能用繞道的方式解決，也就是除了設定background以外，另外再加上：

backgroundAlpha="0"

呼！！

Technical Writing 03 - Active Voice

2009-05-05T23:58:00.004+08:00

這星期一開始先複習了上次abstract的重點，

這次拿了另一篇paper來講(怎麼都挑CYY的啊XD)

David說這一篇的abstract就寫得不錯，不過我們在討論這篇abstract的時候

對於哪部份是purpose有小小的爭論了一下！

我覺得後面的furthermore那句應該也要算，David則覺得它的寫法不能算，

因為purpose還有一點motivation 的意思，它的寫法只算大略提到future work。

討論完abstract之後就進入上一次上課最後提到的問題：Active Voice!!!

一般句子大約分成三種型式：主動、被動、以上皆非(Linking Verb)：

主動式指的是句子的主詞是執行動作者，這類句子給人的感覺比較積極，寫自己的work時最好要用這種方式來寫。
被動式指的是句子的主詞是接受動作者，通常語氣比較委婉，適合用來描述別人的work使用
以上皆非指的是非主動也非被動，也就是單純描述一個狀態，例如：The weather is awful.通常句子裡面用be動詞的就是這種類型的句子。

然後就是一些練習啦，其實主被動在國中(或國小)早就是考到快爛掉的東西了，不過對於語氣給人的感覺沒有David提，我還真的沒注意到這種差異呢！！！

下星期就要進入Introduction了！！

Technical Writing 03 - Active Vs. Passive Voice

View more presentations from Tingyen Lee.

Technical Writing 02 - Abstract

2009-04-28T23:10:00.005+08:00

注意事項

必須是stand alone
可以視為paper的小reference
★ paper內容沒有的，abstract一定不可以有
★paper重要的內容，abstract一定要有，而且出現的order要跟paper一樣
　ex. 如果正文裡先討論了property A，再討論property B，那在abstract裡面也要先寫A 再寫B
不能過長(通常是200字左右)

元素

purpose: 通常不超過2句
method: paper所使用的方法，包括evaluation
result: 你的main findings
conclusion
implication

技巧

善用technical term!!
但是除非是這個領域的人常見的縮寫，否則儘量避免使用(要省字數應該要省在更重要的地方)
儘量使用主動式取代被動式，這對於增強文章的力度很有幫助(關於主被動式的描述在下一節課會討論)

Technical Writing 02

View more presentations from Tingyen Lee.

這次上課討論的兩篇paper的abstract，第一篇是photo navigator, 這篇因為寫法的關係，主要的method居然讓David以為是result，反而是後面比較minor的地方被誤以為是

主要method！！

原句為：The proposed system is characterized by two main features. First, ...

這個寫法讓David覺得像是買東西時會寫在產品包裝的文宣，而不像是在寫真正的idea。經過跟大家的討論之後，David終於發現這其實是系統的主要contribution，所以他建議換一個寫法

We look at the system in following way.

或是

These are the most important element what we are concern at

這樣換掉比容易讓人感覺它真的是這個project 提出來的想法，而不是只是在闡述它的impact

除此以外，還可以把原來的被動式換成主動式，句子寫起來

更有自信

David 另外挑的一篇wedding video的在下次上課才要討論:p

Technical Writing 01 - Introduction

2009-04-28T23:08:00.005+08:00

第一堂課並沒有立刻focus在technical writing，先講了一般作文的基本知識

★ Thesis Statement:

這是每篇文章的主旨
通常在第一段的最後一句
必須是一個完整的句子
要specific, narrow down to the topic

★架構：

Introduction：
包含Thesis statement，最常見也最容易寫得好的方法是top down approach，也就是先從一個比較general 的idea出發，再慢慢zoom in 到Thesis Statement
Body:
寫出支持thesis statement的理由，3 is the Magic Number!!!!
通常的寫法是 Topic sentence 1 → Supporting detail 1 →...
最後可以加個paragraph summary. (不加也可以)
Conclusion:
solid end，最好是一段短短但讓人印象深刻的文字(要夠有power)
很重要的一點是不能有new information

寫作習慣

中國人(跟台灣人) 的寫作習慣是"藏"，會把中心思想放到文章的最後才寫，中間的段落只提供線索，所有的東西要留到最後一段才會"合"

西方人的習慣是一開始就寫明主旨，然後在各段一直重複提到主旨，讓人對主旨印象更深刻

有人是這樣形容這種作法的，我覺得很貼切的描述了這個作法：

Tell your audience what you are going to tell thme!
Then tell them.
Then tell them what you told them.

Technical Writing 01

View more presentations from Tingyen Lee.

最後討論的時候提到了technical writing 跟一般作文應該還是有些分別，David答應要回去好好看看paper再跟我們分析。

另外，還有人(好啦，就是我XD)問到Introduction跟abstract的分別，David說會在後面的課程幫我們分析:p

Note on Implement Force-Directed Layout

2009-03-12T13:45:00.004+08:00

1. Resistance: use G1G2/r^2

　However, Since r may be too small, we'd better add a limitation on the final return force

2. Attraction: use K△X

3. Gravity: Use mg

4. On calculating the component of the force:

use θ = arctan(△Y / △X ) F_x = Fcosθ , F_y = Fsinθ

remember to deal with △X = 0

Algorithm: follow wikipedia

Bib Browser

2009-03-05T17:01:00.003+08:00

之前滿苦惱要怎麼管理我的bib檔，本來有找到一個JabRef，

這是一個滿強大的管理工具，不過只能local執行

但問題是我的bib檔都是放在工作站上的，找了很久

終於找到這支php browser: bibtexbrowser

他的特色是超級小，而且只有一個檔案XD

所以現在我可以很簡單的在線上瀏覽我的bib檔了

(唯一的缺點是不能直接管理，不過幾乎已經符合我的需求了！)

這是我的ReadingList

Prototype!!!!

2009-02-24T09:47:00.002+08:00

I just finished my prototype last night

(I shall finished it earlier, but I am just too lazy~"~)

try this online

http://daisy.csie.org/~lydian/query/webQuery.html

the data set is the abstract of the vis week papers during 1990 to 2008.

Sankey Diagram

2009-02-10T09:56:00.003+08:00

在我苦思好久怎麼解決表現relationship問題的時候

偉大的Chris提出了一個超棒的想法：Sankey Diagram

剛好可以解決我的問題！！！

然後他說我的東西結合Sankey Diagram大概就像Theme River結合Sankey Diagram

應該還滿有價值的(撒花花~~)

但是我最好不要讓它變得太application

朝這兩個圖的概念結合起來應該是比較可行的方向！！(筆記)

fetch related tags in different days of del.icio.us

2009-02-07T11:33:00.005+08:00

For my study, I just write a small PHP program, which shows the relation of a specific tag in different days.

the php file could be download from here

The return format is as follow
<data name="Queried Tag" >
   <date time="YYYYMMDD" total="number of tag at that date">
      <tag name="related tag" count="number of co-occurence"/>
   </date>
</data>

Actually it directly parse the info on the del.icio.us page.
To avoid being banned by del.icio.us, the program would sleep 1 second for each 10 pages.

I would also think of adding the count of the related tag of a specific day. However, instead of really go through all pages until find the day, I have no good idea of fetching those information.

If any of you have a better solution, please help me, Thanks!!!!

Thanks for the HTML parser written by S.C.Chen.
For more detailed info, please visited the SourceForge
Also, there's a simple chinese tutorial over here

Difference between InfoVis and HCI

2009-02-03T09:10:00.003+08:00

HCI focus on "New interaction skill"

Infovis uses tranditional interaction, but what may be more important is "New Layout"

User study is really important for HCI, and it also helps a lot on InfoVis.
(But I think they're not as important as that in HCI)

VoiceThread 分享故事

2008-12-29T20:27:00.003+08:00

連結

用slides說故事，每個人可以下comment，有聲音，也可以針對圖片的某個部份做說明

一邊說故事一邊下comment，也可以看別人怎麼描述這個圖片的，我覺得是個很有趣的idea:)

Google Distance

2008-12-23T13:08:00.005+08:00

paper: link

My presentation slides: link

(p.s. 紅色部份是我還是非常不了解的地方)

這篇paper讓我覺得很有趣的地方是它用了資訊理論的encoding概念去計算出term 的semantic 關係。往常在semantic組討論到的大致上不外乎是based on "ontology are us "的方法，藉由tag 跟tag 的co-occurence關係推論出tag跟tag間的relation。

在開始提什麼是google distance之前，要先複習一下一些編碼基礎，因為我沒有修過計算理論(汗顏) 所以我只能先就我了解的部份還有與這篇paper相關的部份大概說明一下。

第一個要提到的概念是entropy，在information theory 中，亂度越大，表示需要用越多byte去描述它。

而我們的目標是要想辦法找出一個編碼方式，用盡可能短的資料量來描述我們的data。在此，有一個名詞叫Kolmogorov complexity(詳細說明請見wikipedia 中文英文)，它表示了對一個字所需的資料量。我們需要注意的是為了達到盡可能少的資料量，越常出現的東西，就應該用盡量短的編碼來描述它。另外，在編碼時我們還需要計算不同term之間的distance，也就是Information Distance , E(x,y)。它被定義成：

E(x,y) = K(x,y)-min(K(x),K(y))

p.s. 這邊我暫時查不到為什麼要算編碼，剛剛請教學姊的結果，學姊也只說印象中似乎是encoding跟decoding的過程中要用到

另外我還可以Normalized distance，使得E界於0~1之間：

Normalized Information Distance = [K(x,y)-min(K(x),K(y))] / max(K(x),K(y))

(p.s. 這邊的距離指的是編碼後兩個term距root的距離，理論上相關的字會被放在附近)

但是因為Kolmogorov complexity需要global的data，在實際情況下無法直接計算，所以我們可以用某個可以計算的Compressor, C來取代。在這裡可以想像我們是用了抽樣的方式來間接的取得K(x)的值。

抽樣的方法有很多，這篇paper提出的方式就是把整個WWW當作一個超大的database，然後利用google來做抽樣的工作。所以把C換成google之後，對一個term, x 它出現的mass probablity function , L(x) = |x|/M， (M = |Omega| , Omega = Univeral. )

接下來我們可以去算2個term, x & y共同出現的機率。

定義Google Code(why they defined the form??)

G(x) = G(x,x) , G(x,y) = log 1/g(x,y)

g(x) = g(x,x), g(x,y) = L(x and y) M /N = |x and y|/M

就可以得到

Normalized Google Distance = [G(x,y)-min(G(x),G(y))]/max(G(x),G(y))

但是算出這個要怎麼知道(確定)這個距離跟semantic意思有關呢？在paper 裡面並沒有直接提到，不過它們將這個距離與WordNet比較，發現有87%的相似度！！！比較的方法如下：

先從wordnet裡面挑部份字跟category出來，計算它們的similarity後用SVM train model，train好了以後再另外丟新的字下去分類，再看看是否分得正確。

The problem should always asked...

2008-11-24T18:46:00.003+08:00

what is infovis

what is the difference between infovis and visualization

how visualization can help us

Filtering

2008-10-08T16:28:00.003+08:00

隨著餵進去的資料越來越多

我發現force-directed的limitation已經出現了

丟了900個點，跑起來超級慢T.T

因為900個點畫出來也很亂，所以好的作法是node進來要先作簡單的filtering

把node的個數filter到適合畫面呈現的node數

不過現在對filtering還沒有想法，還是要乖乖再去survey一下！

Perceptron Learning Rule

2008-09-29T20:51:00.003+08:00

來記幾個本來不懂的地方。

1. For "linear splitable” data

2. why expand matrix ?

since the target function is: g^t (X) = w^t (x) - θ^t

to simplify the computing, extend X = {-1, x_1, x_2, ... , X_d} and W = {θ, w_1, w_2, ..., w_d}, so X‧W = Σ_{i=1}^d {w_i * x_i } - θ = w‧x - θ

3. update function?

the origin function is

if X ε P , and W_{t-1} ‧X <= 0 , W_t = W_{t-1} + X

else if X ε N, and W_{t-1}‧X >0, W_t = W_{t-1} - X

else W_t = W_{t-1}

we can simplify the first two function by

if y= 1 , and W_{t-1} ‧X <= 0 , W_t = W_{t-1} + X = W_{t-1} + y‧X

else if y = -1, and W_{t-1}‧X >0, W_t = W_{t-1} - X = W_{t-1} + y‧X

→ if (sign(W‧X) != y ) W_t = W_{t-1} + y‧X

User Study

2008-09-29T20:27:00.005+08:00

補記一下上次去Hao meeting的重點，這次主要是投CHI的經驗分享，尤其是在最後做user study的時候，有不少寶貴的經驗可以讓我們參考。

1. User study is Expensive

　I think most problems dicussed are all around this. Since it is too expensive, we have to make sure everything is done before the study. In another word, there are something we should bare in mind before the test.

(a) Never Debugging Via User Study.

(b) Run an complete Test Before The User Study

(d) Clearly Define the Test Rule, and Make Sure All The Participants Understand.

2. Log

(a) Try to record any information in the study.

(b) Record them in a proper form.

For logging, there are some related issue we've discussed in the meeting:

Server-based: be careful of the internet problem.

Client-based: how to merge data from different client.

好像還有一些其他的，不過我有點忘記了T.T

attribute to be displayed

2008-09-24T12:05:00.002+08:00

1. weight

2. degree

3. relation(belongs to, relates to)

改版demo

2008-09-24T04:14:00.004+08:00

Demo link

覺得還是flash做出來的效果比java好，所以就把程式改成flash版了

不過初版還少很多東西

1. clustering algorithm →不知道用哪一個clustering比較好，目前implement的很沒有效率，點多很容易就炸，但我又要限制在3組內儘可能大…所以實在不知道要用哪一個演算法比較好

2. group issue → 想要有階層架構，如果單就一個人的tag的資料來呈現，hierarchy的效果不是那麼明顯，但如果使用group的階層又怕會有一字多義造成階層錯誤的情況。

3. remove overlap: 參考[Using Spring Algorithms to Remove Node Overlapping] 的作法來移除重疊的點。這篇主要的原理是以變動的k來調整edge的長度

4. 另一大目標：標示出"使用者自訂字"，例如我自己會把課程網站都加上一個標籤叫course，把研究相關的都加上一個research，要怎麼從tag裡面找到這種對使用者有特別意義的詞呢？

result - for more tags

2008-09-19T06:17:00.008+08:00

寫好了界接delicious的版本

暫時不會再有sample量太小的問題，但卻出現了更大的問題T.T

只有86個點，看起來還ok

100個點看起來也還可以接受

209個點畫面就已經爆掉了

所以接下來要調整的目標應該是把部份tag再做clustering
目前有兩個方向：
一是直接對data作處理！這邊應該要往semantic來做：

二是對graph作處理，上次剛好有找到一篇相關的paper:
A Framework of Filtering, Clustering and Dynamic Layout Graphs for Visualization

semantic的話應該要結合conceptNet跟之前學姊們parse下來的delicious data

graph的話就要先念完paper才知道可不可行了，雖然它在introduction裡有提到他們寫好一個demo的framework，但google卻沒有相關的resource可以先測試效果好不好。

不過目前最想先做的是把現在的版本重新implement成flex版，然後一些之前偷懶用人家已經implement好的資料再tune過，之後要繼續發展才會更迅速。

Brief Summary of What I am goint to do

2008-09-18T14:04:00.006+08:00

I would like to focus my study on "Tag querry visualization". In fact, most tag querry system such as word cloud doesn't really match human's need. When the number of tag increases, the more difficult to find out the exact document via tag.

Therefore, I wish the query system must be based on "The strategy of Human Tag".

So, it's more about psychology, and I'm going to take the couse this semester.

Moreover, i would like to display tags with their relation. The relation may be based on semantic meaning. Therefore, machine learning is also important class to take for me.

Finally, to render the view, I'll need to learn more about graph drawing.

These are three main task for me in this semester.

懷舊小遊戲 - zebra

2008-09-18T04:10:00.004+08:00

今天上完ai課時忽然想到高中時候玩的黑白棋遊戲 zebra

從前一直覺得黑白棋超簡單的，這是我第一次發現電腦可以強大到這種地步！！印象中，我好像在某一級就只贏了一場！之後就再也沒有贏過。剛剛google了一下，發現這後續還有好多變異版，也許有空應該來挑戰一下看看我究竟退化了多少xD

Webpages as Graphs

2008-09-16T20:44:00.004+08:00

WebPages as Graphs 是一個把網站上的DOM轉成用圖片表示的，上面是我的blog首頁所畫出來的圖片！說實話，很有趣但不是很實用！

Try it:

http://www.aharef.info/static/htmlgraph/

知覺心理學9/16 上課筆記

2008-09-16T11:31:00.010+08:00

前面第一節課先介紹課程大網，然後是introduction的部份。

1. Mind = Brain ??

2. Flow: Sensation → Perception → Action

3. three kinds of view:

　(1) Objective客觀：Perception 的正為了真實反映世界 (被Kanizsa triangle推翻：不完全單純反映)

　(2) Subjective主觀：我們理解到的世界是腦中所創造出來的世界

　(3) Synthetic 綜合：因為nerve system本身的限制(ex. 眼睛只能接受某些頻率的光)，但為了正確而快速的反映真實世界，所以結合subject的方式來呈現。

Kanizsa Triangle: 中央的三角形事實上沒有被任何東西defined，但我們仍然可以感知這個浮出的三角形。

4. Helmholtz：Unconscious inference

5. What is reality?

Physical Reality → Model →　Psychological Reality

☆However, All Model is not perfect, but the problem is, how can we make our conclusion with these unperfect models.

p.s. 中文課本導讀

https://ceiba.ntu.edu.tw/course/a6b70d

MA Reading Memo 7/30

2008-07-30T15:23:00.004+08:00

Intelligent Techniques for Web Personalization(link)
使用者不用明確說出他們的需求，就可以提供使用者所需的資訊

The Personalization Process

數學符號代表：
Assume
n Items, each can be described as a s dimensional vector, i(j) : { b(j,1), b(j,2), ..., b(j,s) }
m Users,each can be described as a t dimensional vector, u(k): {a(k,1), a(k,2),..., a(k,t) }
I(u,k) : 沒有被User u(k) rated過的item集合
I(r,k) : 已經被User u(k) rate 過的item集合
The goal is to suggest Item i(j) belongs to I(u,k) and would interest User u(k).

Step:

Collect Data:
‧data 必須是attributable
‧web上收集的資料往往包含許多需要被去除的noise
‧在IBM的分析中，發現user往往會願意多填一些資料，來提高系統的準確性。
Build user-centric data model : 有很多方法可以表示data model，ex. vector, ontology, aggregate usage profile, ...
Evaluation: 常用converage, mean absolute error及ROC sensitvity。
Deployment: 常見有scalability的issue，希望可以real-time產生recommendation。
all steps need to be monitored

通常推荐的方式可以分成兩大類：
Prediction Task:預測其他未被user rate過的item的rate值
Selection Task: 選擇N個最相關且未被rate過的item給user

Classifications of Approaches to Personalization
Individual Vs Collaborative

Individual : 使用content-based filtering systems，用item的內容及user自己的rate來推荐。
優點：可以建構在client side，因此比較不會有privacy issue
缺點：完全based on使用者自己之前的推荐，不會有"意外"發現其他interest的可能，而且必須確保推荐過的item本身可以access到。
Collaborative: collaborative(Social) filtering，不使用item的內容，而使用user及其neighborhood的rate來決定是否推荐一篇article
缺點：new item and new user rating problem
優點：參考individual的缺點XD

Reactive Vs Proactive

Reactive:需要user提供feedback，例如：rate所推荐的東西是不是符合需求。
Proactive: user的feedback並不是影響推荐item的主因，它用其他"學"到的information來做推荐，如amazon。

User Vs. Item Information

Item Related Information: 包含item descriptions 及 product/ domain ontology，通常用來處理unstructured data與item 的關聯。ex. 用keyword來描述document.
User Related Information: 包含rating record, past user behaviour，少部份會採用demographic data(不易收集，且較item-based及user behavior不精確。)
Hybrid: 因為兩個各有優缺點，所以有些system兩種方式都同時採用。

Memory Based Vs. Model Based

Memory Based(lazy learning): 在query 進來當下才generalize(online)
ex. 傳統CF及content based filtering
缺點：scalability
優點：可以反映user interest的變化
Model Based(eager learning):在query進來之前已經建好model(offline)
ex. item-based CF

Client Side Vs Server Side

Client side: 資料儲存在client端
缺點：只適用Individual model
優點：可以在不同web site access data(但也要先知道怎麼拿client side的資料才行啊！)
Server side: 資料儲存在server端
優點：適用 Individual model及Collaborative Model，而且拿自己存的資料比較容易

Data

Explicit data: 因為是user自己提供的，有時user會考量到privacy issue而提供較不精確的資料。
Implicit data: 比較容易觀察到positive的Info，但negative observation往往很有用
(ex. last.fm上次討論到的一首歌才聽了一下就換下一首歌，不過last.fm沒有紀錄下來)

Personalization Techniques

Content-Based Filtering:依據content本身的關聯性及user過去rate的資料來決定rate
缺點：推荐的東西會非常類似過去的資料
Traditional Collaborative Filtering :依據相似user(與user 推荐過的history 找出有相似rate的其他user)的rate來決定
Model Based Techniques: 根據data先train出一個model，之後的query就會根據train出來的mdoel來決定rate。train的方式大概分成以下3種：
‧Item-based: 建出item的similarity table(根據user rating的結果決定item的相似度)
　缺點：O(n^2) ，改善方法是用K組similar items取代n個items。K表示model size，K越大，coverage會越小。(→這邊有點不大直覺，推測可能的想法是：在K越大，表示各個item視為相似的狀況越小，因此越難利用similarity去predict，而導致coverage會變小)
　優點：可以比user-based有更好的predict
‧Clustering Based：將user或item分群，根據所屬群組的data來predict rate
‧Association and Sequence Rule: 利用一系列的Associate rule來predict rate。
　Sequence及Association的差異在於Sequence是有序的，而Association不考慮條件本身的order
‧Markov Train Model: 3-tuple
　A: set of items, S: k-tuple item visited , T: Transition Probability Matrix
‧Graph Theoretic Approach:將rating data轉成directed Graph，node:Actor, edge: 對user的predictability。所以predict User U(k) 對item i 的rate，就是計算有predict Item i的user 們到U(k)的shortest path。
Hybrid Techniques ：combind some of the techniques.

Issues
(一些比較trivial的我就直接略過了)

The Cold Start and Latency Problem

New user problem: 新進使用者沒有history資料
Cold Start problem:在collaborative system initial時，所有的user都沒有history
New item (Latency) problem: 新的item缺乏rating資料

解決方法是利用Hybrid來取得一些額外的information

Data Sparseness
Item的數量會稀釋了user history data 佔總量的百分比造成難以尋找similar user
解決方法：Item partitioning (domain specific)、Item clustering、Gauge set of items(指定某些必須要rate的item) ，簡單的說就是使用替代資料(domain, cluster)取代item。

Scalability:
user及item的數量太大，而使得memory based system無法負荷

Privacy

Recommendation List Diversity:
研究顯示diversification有positive effect(accuracy不高也沒關係)，所以該如何在diversity與accuracy之間取得平衡？

Adapting to User Context:
無法將user與系統的previous interactions視為context也無法explicitly measure context,

Using Domain Knowledge
Managing the Dynamics in User Interests
Robustness
Trust

Evaluation of Personalization Systems

User Satisfaction: ex.

RFM: Recency- When was the last order? , Frequency - How many orders have they placed with us? Monetary Value - What is the value of their orders?
life-time value
recommendation uptake

Accuracy: ex.

MAE: Mean Absolute Error

ROC curve: Receiver operating characteristic →參看wiki的圖
Precision: 被推荐出來的item對的機率
Recall: 對的item被推荐出來的機率

Coverage: 推荐系統可以推荐出的universe 的百分比
Utility: ex. novelty
Explainability:
Robustness: prediction stability, power of an attack
Performance and Scalability: response time

OntoVis

2008-07-30T09:08:00.006+08:00

website: link

paper: link

這是馬匡六教授在2006年IEEE Transactions on Visualization and Computer Graphics中發表的一套系統。

以social network為例，傳統的social network圖中，往往使用Node表示actor，edge表示relationship，node上或edge上的attribute則是運用色彩、大小…各種屬性來比較。這種方法在分析attribute上的種類數量少時，非常的清楚(如圖1)，然而一旦種類多了，就會讓畫面看來顯得凌亂，而且容易混淆！

圖1：利用顏色呈現各node的群組關係(圖片為我之前做tag cloud的測試設計圖)

而馬教授提出的以虛擬點呈現attribute的作法卻可以解決這個問題。對Ontovis(馬教授開發的系統)而言，attribute的value可以是一個"virtual node"。舉例而言，假定我們有4個組織的資訊，當我們想要看出有幾個組織位於希臘，那可以把"希臘"這個所在地的value設為一個virtual node，而得到圖2，從圖2可以看出來，4個組織都與Greece的node相連，可見這4個組織都位在Greece。

圖2: Greece與4個組織相連。

這種作法同時結合了filtering，還可以同時清楚的了解屬性間的異同，例如同上面的例子，我想要知道在Greece中的組織，有哪些分別是屬於anti-globalization及Leftist，我可以分別將這兩個attribute及Greece加入virtual node中，然後透過edge的關聯找出我想要的資訊。(p.s.這個例子跟paper中提及的figure 1(c)有些微不同，paper中例子的目的是要找出相異的attribute，而這個例子則是要找出有A屬性的Node們，在B屬性的分佈狀況)

此外，在Social Network中，常常會有兩個node間有多條Path可達，為了方便分析，圖3將一些不相關的node filter掉，僅保留相關的node們的資訊

圖3 將多餘的info 移除前後比較

OntoVis另外一個特色是利用Node的大小表現"Connectivity"，因為這也是Social network中很常用來判斷一個節點的importance。因為OntoVis的Layout採用FDL，然而FDL並未考慮到Node size，所以他有使用一些refinement來處理tag的overlapping

What is Visualization??

2008-07-26T01:48:00.004+08:00

坦白說，去完這次的CGW之後，一度讓我有點疑惑到底什麼才是visualization，感覺起來會中很多東西都不是我之前認為是屬於visualization的東西卻被投到visualization的session中。但是究竟什麼是我心中以為的visualization呢？可能是我研究得還不夠透徹，總覺得心中似乎有個答案，但一直不知道怎麼表達我腦中所理解的visualization。沒想到我回來以後，卻在我的Reader上看到一個來自於EagerEyes.org 很棒的說明(原文連結)。因為太開心了，我決定嘗試將我所理解的重點寫下來，也順便驗證一下我的理解究竟有什麼不夠完備的地方！

在大多數人的認知，感覺真的要說起來，似乎什麼事情都可以說成跟visualization有關，然而作者覺得，Visualization至少應該要具備以下三項條件(當然，visualization要做的應該更多，不過這邊提到的是三個基本要素)：

建構於(非visual的)資料之上。因為visualization的目的就是為了連接資料。換而言之，資料本身可能是來自於抽象的或是無法立刻被人了解的。因此，攝影(photography)及影像處理( image processing)都不能算是visualization。visualization是把invisible的轉換成visible。
產出影像。雖然似乎聽起來直覺上就是這樣，但這說法好像還不夠。產出的visual必須是想表達的主軸。輔以其他形式的呈現只能是為了傳達一些額外的資訊。因此，如果產出的圖像儘是work的一小部份過程，那這也不能算是visualization
結果必須是可讀及可理解的。visualization最重要的一個目的就是提供一個方法讓人們了解資料。雖然在將non-trival 的資料轉成可讀性高的圖表時，或多或少都會遺失一些其他的資訊，但至少必須呈現出資料的某些面向。

---

暫時先這樣好了，明天再來補上後面的例子跟重新順一下我的語法XD

CGW Memo

2008-07-24T11:38:00.010+08:00

Session: Animation
→這個session的領域我很不熟，就記有興趣的好了

以運動擷取資料程序式動畫品質
如果直接用程式產生動作(ex. 走路)的動畫，看起來會很不自然，
他們提出的方法是藉由motion capture的方式來修正auto generation的結果
motion capture只需要動作相同，即使角色不同都可以用同樣的動作來修正。

Animating Characters in Pictures
將picture中的角色產生3D model再做動畫
Model fitting->skin fitting -> skeleton -> Thickness adjustment

Session : VisualizationⅠ

應用於帕金森氏病人復健與治療計畫之虛擬環境場開發
使用Virtual Reality的方法建構帕金森氏病患的復健環境
(搭配偵測手套及立體視覺影像)

MizDesigner: a Visualization of Designer's Relationship in Ideastorming
用tag的co-occurence來找tag 的關聯性(只考慮co-occurence)
(They claim that there's nobody adopt the same way... but I don't think so)

使用叢集式電腦建構高互動平行顯示陣列
聽得不是很懂…略

以社會傳播模型模擬人群之集體社會行為
模擬人群傳播的特性，設定了人類內心的4種狀態，加入了被影響的門檻值來建立人類活動會受其他群眾影響的模型，(好像還沒有打算要設計實驗要驗證)

Keynote: Information Theory and Visualization
沈漢威教授提出了將data視為Random Variable，然後由entropy來處理volum visualization的idea，Infovis應該是要儘可能的呈現多元資訊，所以在View的Selection可以考慮選擇entropy較大的來呈現。同時，因為可以用來呈現資料的資源有限，所以在高解析度時應該以"important"的來顯示，而如果解析度的高低呈現結果差不多時，用低解析度就可以了。QA時間時，有人提到independent跟dependent variable的問題，這好像也是另一個值得探討的issue。然後，歐陽明教授也提及了"美學"與人類的認知的問題，教授提到了朝"visual intelligence"發展也許是不錯的方向。

Session: Visualization Ⅱ

以立體視覺為基礎之多物件軌跡記錄系統
以3D方式紀錄多物件的軌跡取代傳統只紀錄2維座標的方式。

A Hierachical Streamline Construction Method
利用流線(有箭號)的方式取代傳統的色調強化圖表現颱風動向，可以更明顯的看出風向。

電腦斷層攝影於植牙時對金屬假影的處理
解決某些人有金屬假牙時在照射電腦斷層攝影中會有干擾的情況
(太多物理的器材我聽不懂了啦~"~)

刀具掃開體積的容積素化之快速計算法
模擬手術刀的使用，提供給醫生在手術前模擬手術情況評估
(關於數學部份我實在無法了解…)

Integrating the PSONN and Boltzmann Function for Feature Selection and Classification of Lymph Node in Ultrasoinc Images
完全在講作法…

補充1：晚上跟大家一起住汽車旅館時在床上看到的

補充2: 對於Visualization的解釋似乎是太新的領域以致於很多看起來應該是很偏VR、Vision的題目也全部被投到這個Session來了，讓我還滿疑惑的！不過也許是我看過的visualization的東西太少了吧…

補充3: 7/25下午的VisualizationⅡ的present很多都是只有講解他們怎麼作，而沒有說明為什麼要這樣做，讓在底下聽的我們很容易lost！

MA Reading Memo 7/23

2008-07-24T01:10:00.001+08:00

Tag-based Social Interest Discovery (paper)
->證明user-generated tag比keyword 好用

目前在social network中 discover interests的方法:
　(1) user-centric: 從user的relation上找到common的object，如：facebook
　(2) object-centric: 從global的network中找到所有有common object，如：del.icio.us
　在object-centric中，relation的關係可能很弱或不明顯

資料來源：del.icio.us，430萬筆tag，20萬個user，140萬筆URL(過濾掉非英語及非HTML file的object)
分析發現：
1. [figure 1]大部份的url只會被少數人bookmark，只有少部份的URL比較popular
2. [figure 2]大部份的user很不主動(一般人僅有少於30個的bookmark)
3. [figure 3]user會選擇的tag有高度集中性(i.e.有Popular Tag)
4. [figure 4, 5] Tag 在過濾掉一些noise(ex. idf 太高的值)之後，可以的cover大部份的keyword
5. [figure 6] tag數量雖然會隨著bookmark此URL數量的增加而增加，但過一定數字後就會趨向一個穩定的數字
6. [figure 7] tag 可以cover document的比率，40%的網頁內容可以被tag完全cover(顯示大部份user還是傾向於從文章中取出相關字來做tag)
7. ISID(Internet social interest discovery) clustering:
對所有Post，找出裡面含有同樣topic(tag set)的user set 跟url set
8. [figure 9,10] 分別用tag 及keyword 來跑ISID clustering後的結果發現，用數量比較少的tag仍然可以有接近keyword的效果，所以顯示用tag來代替keyword search應該是make sense的！

Some Questions Dicussed Today
1. for figure 1,2,3 : the definition of the x-axis and y-axis is confused.
2. the definition of support in this paper is wrong. correct definition list belowed(referenced: wiki)

Association rule learning (link on wiki)
ex. 去超市買東西時：買了{洋蔥,馬鈴薯}→也會買{牛肉}

基本名詞定義：
Definition: X => Y , where X,Y包含於I and X∩Y = Φ
(Assume I = collection of n items, D = collection of m transactions)

SUPP(X) = X/m ，在m次transaction中，出現X狀況的機率
Conf(X=>Y) = SUPP(X∪Y)/SUPP(X) : Confidence, 在 X發生時，發生X∪Y的機率
lift(X=>Y) = SUPP(X∪Y) / [SUPP(X) * SUPP(Y)]
Conv(X=>Y) = [1-SUPP(Y)]/ [1-Conf(X=>Y)]

[flex] 設定LinkBar跟ToggleBar中中label的字型

2008-07-24T00:45:00.001+08:00

參考網址: (link)

在flex 2中，設定linkbar的字型只需要使用如下的CSS：
LinkBar {
　　fontWeight: normal;
}

但是同樣方法在flex 3中一直不work，找了好久才在adobe的bug report中找到
新版flex 設定方式如下：
LinkBar {
　　linkButtonStyleName: regularFontWeight;
}
.regularFontWeight {
　　fontWeight: normal;
}

也就是說多加一層的連結方式，在bar底下設定button對應的CSS style name，
大概是希望讓Bar跟Button的工作分得更清楚吧（不過我比較喜歡flex2的作法就是了:P)

MODBus Protocol

2008-07-23T18:18:00.001+08:00

(1)OSI - 3 layer
(2)Master-slave protocol , not event-driven
(3)Advantage: Flexibility capability

Transmission Mode:
(1) Remote Terminal Unit(RTU): binary 表示
(2) ASCII: 將RTU模式中4位數字結合起來以ASCII儲存

ASCII的優點是可以接受大於1秒的delay(RTU不行)，

但同樣的data在ASCII mode下整個message的長度會是RTU模式的2倍

Function code : 04 - read input register

List

2008-07-20T22:23:00.001+08:00

Vizster, UCINet, JUNG, GUESS, Prefuse, Pajek

Social Network Engine Comparison
http://en.wikipedia.org/wiki/Comparison_of_social_networking_software

Vizster

2008-07-20T18:19:00.001+08:00

WebSite http://jheer.org/vizster/
Paper http://jheer.org/publications/2005-Vizster-InfoVis.pdf

Vizster是一套專門用來呈現Social Network 的Visualization tool，其特色如下：
1. 用2D的Force Directed Layout 來表現Social Network，
2. 可以觀測egocentric的SN
3. 提供即時的群組分析(可以指定群組的大小)，群組演算法 - Newman’s community identification algorithm
4. 提供搜尋功能，可以尋找特定Node或attribute
5. X-Ray Mode：呈現不同屬性的比較
6. Accessibilty:
(1) 標示出有相連的節點
(2) 找出任兩個節點相通的中繼點

Egocentric View

X- Ray Mode: 用節點的顏色呈現各節點同一屬性值的比較

Cluster - 自動分群，將同一群組以同色背景呈現

顯示任兩節點間的中繼點

Demo 影片：http://www.cs.berkeley.edu/~jheer/vizster/vizster.wmv

★My Comments

1. 一次只針對同一個attribute的比較
2. Cluster雖然可以動態的決定群組大小，但是一般user很難明確知道自己想要分的群組範圍，所　　　
　以必須把各個size都試過後才能決定
3. FDL沒有解決節點重疊的問題
4. 呈上，因為FDL位置的重疊與群組用底色呈現，導致有些節點在視覺上被誤判群組
5. 沒有解決 multi-group的問題

flex 學習筆記(一) - MXML

2008-07-17T10:27:00.001+08:00

MXML架構：
與XML大致相同 -
1. 由一個root node開始：
2. 需要有完結的註記，如：或是

NameSpace：
跟C++、Java的name space 一樣，不過MXML 將使用的Name Space定義在
<NameSpace: ComponentName></NameSpace: ComponentName>
如果不寫的話表示使用預設的Name Space，也就是mx

Component:
幾乎都包含id這個attribute ，以達到data binding或用ActionScript控制目的，id的命名原則與一般變數命名原則相同

Event Handler：
inline event handler ，如：<mx:button id="sampleButton" Click="處理的事件"/>

Data Binding：
用{id_Name.attributeName}將某欄位的值與另一個component的值Bind住，
如：
<mx:Application>
<mx:TextInput id="input"/>
<mx:Text id="output" text="{input.text}"/>
</mx:Application>

Watching Your Work

2008-07-14T09:39:00.001+08:00

從 Social Media Research Blog 看到的
http://www.typepad.com/t/trackback/2871784/31192558

總是覺得自己的時間不知道為什麼就不見了嗎？試試用這支script看看平常的自己到底都在幹什麼吧！我猜我自己的一定就是在日劇跟笨版間不見的~>.<~

P.S. 它是用python寫的唷

Flex免費學生版

2008-07-11T15:24:00.001+08:00

消息來源：http://www.pcheadline.com/?p=1503

昨天在survey flex的資源的時候，赫然發現它居然提供"免費"教育版，幸好我還沒去辦離校手續，趕快把學生證照下來送過去試試！本來看網頁上的說明，還以為要等兩個星期才會有消息，沒想到剛剛居然收到通過信了！！！

而且我超訝異的，因為台大學生證上的註冊章記年是民國啊！我本來一直擔心上面的96會被它解讀成1996(OS:這樣也敢來騙序號？) ，而且台灣的學制，今年上半年的還算是去年的下學期，就算他知道96要再+1911才會換成2007，那還要知道"下"代表的是年份再加1啊！

所以要不是其實adobe檢查得很鬆散，要不然就是adobe真的很強大！
總之，大家趕快來申請吧，我覺得Flex真的很好玩呢！

註冊網址：http://www.flexregistration.com/

Many eyes

2008-07-09T12:03:00.001+08:00

http://services.alphaworks.ibm.com/manyeyes/app

Manyeyes提供了不同的visualization views, 讓使用者可以上傳檔案(檔案格式)，建立自己的Visualizations。雖然現在網路上有很多類似的visualization tools，但是目前survey到的很少有整合這麼多visualizations。

這個網站是IBM實驗室的產物，所以他們也根據使用者上傳的資料型態，選擇的visualization tools…等做了個分析，投稿在2007 IEEE Infovis上[Many Eyes: A Site for Visualization at Internet Scale]。

Social Network

2008-07-06T01:24:00.002+08:00

最近幾天很努力的試了各家的Social Network
Social BookMarking: del.icio.us - lydianly
MicroBlog: Twitter - lydianly , Jaiku - lydian
Music: last.fm - lydianly
Others: FaceBook - Lydian Li, FriendFeed - Lydian

如果不去嘗試又怎麼能理解或明白自己想做的研究呢？
上面這句話是學長說的

自己試一試真的有這種感覺 :p

Anyway, If anyone who visited the blog have the same feeling, please add me as your friend ,Thanks!!

Memo of Social Network

2008-07-02T21:54:00.001+08:00

KeyTerms

CF
http://en.wikipedia.org/wiki/Collaborative_filtering

TFIDF
http://en.wikipedia.org/wiki/TFIDF

Brief Memo of MA Reading 07/02

2008-07-02T03:02:00.001+08:00

1. Baumann, S., Bassoli, A., Jung, B., & Wisniowski, M. (2007). BluetunA: Let Your Neighbour Know What Music You Like. Conference on Human Factors in Computing Systems (CHI '07) (pp. 1941-1946). San Jose, CA, USA: ACM.

Exchange music info via bluetooth
Instead of exchange music file, such as mp3, wma...
BlutetunA exchange Only playlist, favorite song list
"People may be glad to share those info to find someone near by to talk"
"less Private Issue" - No ID info.

→ I think that making a face-to-face talk is more offened @"@

ISOM Layout VS. Force Directed Layout

2008-05-16T11:31:00.003+08:00

同色的為同一組，ISOM出來的效果在不畫出edge時，就已經很可以表現cluster的感覺

Interesting WebSite about WordCloud

2008-03-26T09:32:00.002+08:00

http://www.wk.com/

Unit 5

2007-12-12T01:34:00.001+08:00

一、動詞
吃食たべる
喝，吃(藥) 飲のむ
照相撮とる
買買かう
做，製作作つくる
閱讀読よむ
做する
切，割，砍，剪切きる
聽，詢問聞きく
看，觀看見みる
彈奏弾ひく
查尋；調查，檢查調しらべる
打(電話) かける
寫書かく
畫(圖) かく
治好，痊癒治なおる
使用使つかう
見面，會面，遇見会あう

二、名詞
飯ご飯はん
早飯朝あさご飯はん
午飯昼ひるご飯はん
晚飯晩ばんご飯はん
蔬菜野や菜さい
牛排ステーキ
便當弁べん当とう
牛奶牛ぎゅう乳にゅう
葡萄ぶどう
蛋卵たまご
水果果くだ物もの
三明治サンドイッチ
魚魚さかな
糕點，點心お菓か子し
壽司すし
生魚片刺さし身み
飲食，用餐食しょく事じ

碟子お皿さら
筷子はし
杯子コップ
吸管ストロー
餐刀ナイフ
叉子フォーク
湯匙スプーン

圖，畫絵え個人電腦パソコン
電話電でん話わ
剪刀はさみ
句子；文章文ぶん
報告レポート
作業宿しゅく題だい
資料資し料りょう

手手て
紙紙かみ
信手て紙がみ
相片写しゃ真しん
釘書機ホッチキス
樹，樹木木き
土，土壤土つち

網球テニス
高爾夫球ゴルフ
滑雪スキー

票チケット
領帶ネクタイ
感冒風か邪ゼ
恐怖ホラー
錄影帶ビデオ

美術館美び術じゅつ館かん
便利商店コンビニ
市場市いち場ば
蔬果店；蔬果商八や百お屋や
預售票販賣處プレエガイド
公園口公こう園えん口ぐち
~店，賣~的人 ~屋や

三、其他
一天，整天一いち日にち
已經もう
尚未まだ

什麼何なにか
如何，怎麼樣呢どうですか

嗯，是ええ
好呀いいですね
太好了よかったですね
一會兒；一點點ちょっと

然後それから
然後，而且そして

沒關係，不要緊大だい丈じょう夫ぶ(だ)
一起，共同一いっ緒しょに

Tag Visualization(2)

2007-12-11T14:16:00.001+08:00

Force

2007-12-04T07:51:00.001+08:00

1.GravitationalForce
　0:GravitationalConstant:-1.0 (正值表引力，負值表斥力)
　1:Distance:-1.0
　2:BarnesHutTheta:0.9

2. DragForce (穩定)
　0:DragCoefficient:0.01

3. SpringForce
　0:SpringCoefficient:1.0E-4
　1:DefaultSpringLength:50.0 (edge長短)

Prefuse Tips

2007-11-26T01:29:00.001+08:00

1. Set Label Size
　Iterator iter = vis.items("graph.nodes");
　while ( iter.hasNext() ) {
　　　VisualItem item = (VisualItem)iter.next();
　　　item.setSize(4)
　}

2. Read Data
　Iterator iter = vis.items("graph.nodes");
　while ( iter.hasNext() ) {
　　　VisualItem item = (VisualItem)iter.next();
　　　double tw = item.getDouble("weight");
　}

Tag Visualization

2007-11-25T22:51:00.001+08:00

這是用prefuse的example先套出來的圖

沒有大小沒有顏色，所有字幾乎都黏在一起了，完全抓不到重點啊！
所以現在幫字依權重加上背景顏色的深淺，於是可以得到下圖
看出來flash最重要了耶！！

with size Effect

Java XML parse

2007-11-23T23:03:00.002+08:00

1. import
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.*
import org.w3c.dom.Document;
import org.w3c.dom.NamedNodeMap;

2. generate
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document doc = builder.parse() //overloaded:
　parse(File f);
　parse(InputSource is);
　parse(InputStream is);
　parse(InputStream is, String systemId);
　parse(String uri);

3.get Element
　(1). Element getElementById(String elementId)
　(2). NodeList getElementsByTagName(String tagname)
　(3). NodeList getElementsByTagNameNS(String namespaceURI, String localName)

4. get Attribute
NamedNodeMap nnm = node.getAttributes();

5.get attribute name
nnm.item(i).getNodeName();

6.get attribute value
nnm.item(i).getNodeValue();

First Love

2007-11-23T20:50:00.003+08:00

最後のキスは
さいご kiss
最後的吻

タバコの flavor がした
tobako
有香煙的味道

ニガくてせつない香り
既苦澀又難過的香味

明日の今頃には
あしたいまごろ
明天的大概這個時候

あなたはどこにいるんだろう
你應該會在某處

誰を想ってるんだろう
だれ
想著誰吧

You are always gonna be my love

いつか誰かとまた恋に墜ちても
だれこい
即使那一天再和某人談戀愛

I'll remember to love
You taught me how
You are always gonna be the one

今はまだ悲しいlove song
いまかな
現在仍是悲傷的情歌

新しい歌うたえるまで
あたらうた
一直到會唱新歌為止

立ち止まる時間
がたどじかん
停止轉動的時間

動き出そうとして
るうごだ
好像又開始動起來

忘れたくないことぱかりわす
只因我不想忘懷

明日の今頃に　は
あしたいまごろ
明天的大概這個時候

わたしはきっと泣　いている
な
我一定在哭泣

あなたを想ってるんだろう
想著你吧

You will always be inside my heart

いつもあなただけの場所があるから
無論何時都為你保留一個位置

I hope that I have a place in your heart too
Now and forever you are still the one

今はまだ悲しい love song
いまかな
現在仍是悲傷的情歌

新しい歌　うたえるまで
あたら
現在仍是悲傷的情歌

You are always gonna be my love

いつか誰かとまた恋に墜ちても
だれ
即使那一天再和某人談戀愛

I'll remember to love
You taught me how
You are always gonna be the one

今はまだ悲しい love song
いまかな
現在仍是悲傷的情歌

Unit 4 Memo

2007-11-21T22:34:00.002+08:00

句型：
1. N は日期です
問句： N はなんガつなんにち/ いつですか

2. N は (時間) (人と) (交通工具で) 場所へ行きます/ 来ます/ 帰ります

單字
1. 時間
月份：數字+がつ
日期：數字+にち
例外-
1日ついたち　　　2日ふつか　　　　3日みっか　　4日よっか　　　5日いつか
6日むいか　　　　7日なのか　　　　8日ようか　　 9日ここのか　 10日とおか
14日じゅよっか　24日にじゅよっか　 20日はつか

先週せんしゅう　　先月せんがつ　　
今週こん　　　　今月こん　　　　今年こんとし
来週らい　　　　来月らい　　　　来年らいねん
毎週まい　　　　毎月まいつき　　毎年まいとし
　　　　　　　　　　　　　　　　　さ来年さらいねん

2. 人
自己的 - 父ちち　　　　母はは　　　　　兄あに　　　姉あね　　　
別人的 - 父おとうさん　　母おかあさん　　兄おにいさん　姉おねえさん　
自己的 - 弟おとうと　　妹いもうと
別人的 - 弟おとうとさん　妹いもうとさん
友だち- ともだち
一個人ひとりで

3. 交通工具
飛行機ひこうき　　船ふね　　　　　　新幹線しんかんせん
地下鐵ちかてつ　電車でんしゃ　　　　公車バス　　　
車くるま　　　　　自転車じてんしゃ　　 taxi タクシー　　　
步行あるいて　　　ferryフェリー

4動詞
去:行きます
　い
來: 来ます
　き
回家: 帰ります

5句子
我回來了ただいま
歡迎你回來おかえりなさい
我走了いったきます
　　　行
請慢走いってらっしゃい
　　　行

Hardworking Strawberry

html5 touch event on android/ipad

SSL 購買注意事項

Link to my Web server in NAT via SSH tunnel

Dropbox PHP API

ldap sync with Google apps for education

javascript failed in IE

Mail Server: dovecot with sieve support

Hero 升級2.1

一邊在螢幕輸出，一邊同時記log的方法

flash builder 更新後的差異

flash 4 builder release 了

blog 數學模式啟用 ^^

jsmath plugin: dokuwiki

flex 筆記 creation complete event

[Chrome Extension] GY Dictionary

Flex 4 滑鼠按住不放

Hero 取 root

Hero上發文

Google 路線規劃

Interaction Cost

HTML CSS 基本教學

基本架構

常見的HTML Tag

超連結

插入圖片

8/20 MA Memo

Simplexml

HCI 6/23 Talk 筆記

Technical Writing 05 - Body

Technical Writing 04 - Introduction

flex DragManager

Technical Writing 03 - Active Voice

Technical Writing 02 - Abstract

Technical Writing 01 - Introduction

Note on Implement Force-Directed Layout

Bib Browser

Prototype!!!!

Sankey Diagram

fetch related tags in different days of del.icio.us

Difference between InfoVis and HCI

VoiceThread 分享故事

Google Distance

The problem should always asked...

Filtering

Perceptron Learning Rule

User Study

attribute to be displayed

改版demo

result - for more tags

Brief Summary of What I am goint to do

懷舊小遊戲 - zebra

Webpages as Graphs

知覺心理學9/16 上課筆記

MA Reading Memo 7/30

OntoVis

What is Visualization??

CGW Memo

MA Reading Memo 7/23

[flex] 設定LinkBar跟ToggleBar中中label的字型

MODBus Protocol

List

Vizster

flex 學習筆記(一) - MXML

Watching Your Work

Flex免費學生版

Many eyes

Tag Cloud

Social Network

Memo of Social Network

Brief Memo of MA Reading 07/02

ISOM Layout VS. Force Directed Layout

Interesting WebSite about WordCloud

Unit 5

Tag Visualization(2)

Force

Prefuse Tips

Tag Visualization

Java XML parse

First Love