::run, tempo, run::

難道這就是傳說中的繁體中文版 google adsense 嗎?
官方網頁還沒得選, 不過日子應該近了吧..

tags: google adsense

Nov 01 2006, 03:01:47 PM CST Permalink Comments [24]

ok ... 因為做 HappyWeb 這個 widget 吃了點苦頭, 另外也響應 ingram 的實質化運動, 所以記下我的心得供也有興趣做 widget 的人做參考..



一開始我的目標是擺在做出像是 flickr badge 般的 widget, 但是可以供大家瀏覽與參加 HappyWeb 網聚, 主要的功能有:

1. 一定要有 "動" 的感覺, 也就是希望使用者可以有那種咻咻畫面跑來跑去的感覺, 然後能 "哇~~" 一下..
2. 可以讓使用者把 widget 搬回家 (blog) 安裝使用..
3. 除了資料展現, 可以有更多與使用者互動的功能. 如報名, 填寫資料. 基本上是希望使用者可以在上面直接操作了, 不需要再多開網頁..
4. 可以記住使用者的登入資訊, 也就是說, 一個登入過的使用者可以到其他人的網頁, 看到其他 event widget, 不需再登入即可直接在上面操作報名..
5. 整合已有的 web 環境, 也就是說在網站裡登入了, 同時 widget 也會記住登入資訊..
6. 可以提供以後其他的 event 報名使用, 也就是要為未來成為一個系統做準備..

主要 framework 我是選用 java + spring + hibernate(orm) + webwork(web) + acegi(authentication) + dwr(rpc), client 端 javascript library 則用了 prototype, scriptaculous(移動的效果), niftycube(圓角效果), fat(背景淡出效果)..

沒辦法, 還是 java 為主, 雖然上星期在 coscup 又聽了 rubyonrails 都大約只要 20 分鐘, 幾小時, 幾天這樣的開發時間就能做出東東的演講. 但我還是覺得 nothing comes for free 囉..

後台整合的部份我就不說了, 要讓 acegi 與 dwr 合作, 我也花了點時間客製了幾個部份, 才能順暢的將 dwr 揭示的物件權限交由 acegi 統一管理..

這裡的重點就直接進入 widget 製作, 在把後台整理好之後, 我立刻面臨要選用哪種方式做 widget 的難題, 我參考了 widgetbox與 google gadgets, 一般有三個方法:

1. 直接將 widget 塞到網頁中: 建立一個新的 <div>, 然後把所有資料就塞進去..
2. 將 widget 放到 <iframe> 再放到網頁上: 建立一個 <iframe>, 然後把所有資料放進去, 主網頁與 widget 網頁不相關..
3. 用 flash: 我不會, 所以跳過..

我的製作過程, 大概就一直在方法 1 與方法 2 擺盪, 因為實在很難取捨. 兩種方法的優缺點如下:

方法 1 優點:

1. widget 可以被環境影響或是去影響畫面上的其他部分. 也就是說, 當你 resize 你的 widget, 畫面上其他部分也會跟著被重新定位, 看起來感覺很好, 我們也不需要去預先設定 widget 的長寬.
2. 可以控制整個頁面, 所以做得到效果如 tooltip, lightbox, ...

方法 1 缺點:

1. script & css including

開發 ajax 難免要使用 javascript library, 但卻不能保證不會有 javascript library 衝突..
我使用了一堆 script library, 但是卻不知道使用者是否也有使用了同個版本的 script.
我們唯一能做的, 大概也只有多檢查 (可以參考 scriptaculous 的 loading 方式)..

2. cross site scripting

因為要讓使用者在自己的 blog 也能安裝, 所以要能跨網域是非做不可..
有兩種方法達到這個目標:


3. 可能造成的網頁干擾

我不確定干擾的狀況, 但是若作為一個 framework 的一般性規則, 還是需要考慮一下這個事情很有可能會發生的..

方法 2 就像是方法 1 的鏡子..

方法 2 優點:

跟原本網頁不會干擾, 也沒有 cross site scripting 的問題. 也就是針對方法 1 而來的解藥.

方法 2 缺點:

沒有辦法與主網頁互動, 也就是沒有 resize, tooltip, lightbox..

最後, 在一連串的 xx 聲中, 我還是選擇了方法 2, 放棄了幾個已經做好的特效.
widget 大家可以看左方, 有興趣也請試用看看..
對 HappyWeb 有興趣, 也請快快報名參加喔..

大概現在能想到的心得就這樣, 若有想到我就再補充吧~~
還有幾個功能想要再做上, 如其他人報名了, 可以動態更新大家最新的報名人數..
有機會的話, 也想再做做其他功能的 widget..

tags: java dwr ajax

Nov 01 2006, 03:55:59 AM CST Permalink Comments [75]

HappyWeb 網聚是 cjin 跟我都很想辦的聚會, 現在終於敲定了..
感謝葛力, 閃恩與 asker 願意在我們第一次的聚會跟我們分享 hemidemi 與 Symposium ITxpo 2006 的心得..

我特別為這個活動做了一個 widget 在下方 (看不到請點這裡), 所以地點與時間請參考下面..
只要您是對網站有興趣, 都歡迎您來跟我們聚聚喔~~
有興趣的人請快快報名~~座位滿了就沒辦法了~~
(做這個 widget 真是吃盡苦頭, 改天我再貼上我的心路歷程吧~~ )



另外也謝謝資策會, 這次活動每位參加者僅需出 100 元, 其他都是由資策會贊助~~
本來場地費會更高的..

若您有興趣也在你的網站上放上這個 widget 幫我們宣傳, 請將下面 script 加入你的網站中 (請自己接上):

<script type="text/javascript" src="
 http://happyweb.tw/eventWidget/eventWidgetInc.djs?
 eventId=1&width=180&height=580&type=side&color=CCFF33&backgroundColor=FFFFFF">
</script>

width: widget 寬度..
height: widget 高度..
type: [side|normal] 選擇 side 的話, 會看到小的 logo 與較短的說明 (像左邊). 選 normal 的話則是大 logo 與正式說明..
color: 邊框的顏色
backgroundColor: 背景色 (邊框的四個小角, 可以跟你的佈景搭配)

若是您發現這個 widget 有任何問題, 也麻煩您在留言跟我說一下..
就我們現在看到, 似乎是有時候 widget 會跑不見然後變成 flickr badge...
還要再研究研究..

接下來, 還要再做貼紙, 加油加油~~

tags: happyweb

Nov 01 2006, 01:18:25 AM CST Permalink Comments [56]