2007年10月31日星期三

阿爸這應該是同一間釣蝦場 Go Fishing

使用 funp 服務的時間並非很長,本來對 iframe 也沒有太多感覺,不過 LinkXD 總要測來測去,上面那一條 30px 橫桿就越來越刺眼,因為它會讓使用者不知不覺一路跟著連結下去,於是整個網站,不管你是登入登出,修改個人密碼資料,專家才知道查看原始檔,密密麻麻的 HTML 中找到 iframe 開的網頁在哪裡,於是一路下來,中間佈幾個複製的假網頁,隨便一拉,滿場的泰國蝦狂咬

[更新] 本來有張圖展示這種 iframe 會導致類似釣魚手法的 Gmail 登入畫面,雖有提醒的效果,不過考量到這類示範並不好,為了避免有所爭議,已經移除。

想像一下A網站、B網站、C網站 ... X網站都這樣做的話,一層層包下來,十家這樣做,那就變成 300px,大概網頁遮去一半,核心的連結頁面卻變成要下拉才看到,如果這是某種 Web2.0,那我很懷念以前的時光。



使用者友善的做法是否只是反穿皮衣而已,書籤與書之間,皮之不存,毛將焉附 ?

這件事很多資料,例如陽光派報: 已經罵過了的推推王如何避免你的網站被「蓋台」?(破解被Frame內嵌的網站)【重灌狂人】Blog.XDite.net » 淺入淺出 iframe (1),這裡不討論法律層面或是 iframe 的好壞,那個太複雜,單純只是在「網」路上被堵到,打算如何做而已。

做個功能在 LinkXD 裡,利用 Firefox 的擴充功能,把不小心按啊按的,不知不覺多出來的部份恢復原狀,並解決這過程中剪連結會遇到的問題。這種作法應該不在Mark's Place | 推推王真的對使用者尊重嗎?提的兩種方法之一,可以算是第三種。

時代不同了,自己用的瀏覽器自己改比較順手,最近應該會隨新版本一起釋出。

[更新] 對這個問題還是有點模糊的朋友,可以觀賞 我推普魯斯特 | 貓尾巴-la queue d'un chat 一文,非常有創意,應該會更有感覺。

去部落格曬曬陽光

2007年10月29日星期一

你有多少黃金 ? LinkXD 0.4.2 Gold Release

最近聽到朋友說要買一些黃金 Gold ,不禁想要算一下黃金與新台幣對照的價格等資料,然後寫在部落格中當紀錄。寫的過程中發現這件事太繁瑣,有點非人道,只不過是想要瞄一眼的東西,並不要求有多即時或是精確,但是第一次還是花了約半小時,如果一年寫個 16 次,每次都重演一次,那大約等於一個沒有加班的工作天,如果你比較勤勞,想多寫個幾次,那就變成責任制的工作天了,這個通常是沒有加班費的。

為了避免將生命浪費在不美好的事務上,就將金價連結文功能加到LinkXD中,按個鍵,就可以很方便地寫出這組金價相關資料的連結文,然後繼續書寫你的文章或是日誌,那個才是你的主要目的,這個繁瑣的查資料寫連結的小事,就交給LinkXD去做。

有興趣的人可以到樂連 LinkXD Download這裡下載。

當你按下採黃金資訊的按鍵或是功能時,需要你保持在上網狀態,不然會出現錯誤訊息,LinkXD是利用所謂AJAX, (Asynchronous JavaScript and XML) 的作法,由瀏覽器去取得匯率資料,再去抓金價油價,共需要發出四次查詢,然後取回資料後換算並產出連結到剪貼簿或是工作區,接下來就是你的事了。



LinkXD該功能的資料來源主要是 Yahoo! Finance,產出的連結都會轉到那裡去方便確認,雖說是英文頁面,反正就是頁面中黑黑的那個數字就是了。不使用國內的資料源是比較不好找,很多是 HTML 網頁,這種資料源是給人類看的,要拿來給機器用會比較麻煩,Yahoo! Finance可以輸出 csv 的文字檔,用逗點分開,比起來好處理很多。

下面是LinkXD產出的兩筆金價連結文,前後間隔約八小時,注意一下,即使是同一天剪出連結文,金油價都有明顯的變化,更別說下星期或是下個月再來看一次了,不過有個地方要注意一下,產出的每個連結按下去都會轉到目前的價格,並非當時作者剪貼時的價格,這一來是寫程式方便,一來是方便加以對照。

根據"10/29/2007"的資料,目前的金價一盎司 US793.70油價一桶 US92.36,手上拿著台幣千元鈔10張可換到黃金11.01公克石油3.34桶歐元214.26美元308.35,十年後剩下9.03張。

根據"10/29/2007"的即時資料,目前的金價一盎司788.90美元油價一桶93.41美元,手上拿著台幣千元鈔10張可換到黃金11.08公克石油3.30桶213.76歐元308.27美元,十年後剩下9.03張。

雖然可以實做跳出視窗直接問你有多少台幣,幫你換好,不過為了避免個人不小心,可能導致財務隱私上網曝露,所以暫時不考慮做這個功能,只提供千元10張,有其他需求,心理默算一下就好。

書寫是一種方便的記憶方式,面對資產不斷縮水的時代,有空應該要書寫一下即時的相關金融訊息,在心裡面稍微估算一下你有多少黃金 Gold ,下次看到當初的部落格或是日誌,應該會對大環境變化更有感覺。

黃金被稱為是誠實的貨幣,而LinkXD中這個功能想要幫你跟黃金價格連結起來,讓它幫忙你下載最新報價,然後算一下新台幣一萬元可換多少黃金,看看你的資產可以換到多少這個星球上的購買力,當然也順便對照一下石油、歐元等資訊,最後轉成 HTML 連結文字,直接貼到你的部落格,拿掉不要的部份,就可以很快做出一個即時金價等資訊的文字段落。

如果你持續有這類需要,LinkXD一年可以讓你多放假一天,大約可以換到一公克以上的黃金,如果沒有的話,還是可以參考看看。如果你有想做的格式,也可以留下意見,也許有機會做看看。

[更新嚇一跳]

根據"11/6/2007"的即時資料,目前的金價一盎司820.00美元油價一桶95.56美元,手上拿著台幣千元鈔10張可換到黃金10.68公克石油3.23桶212.72歐元308.92美元,十年後剩下9.03張。

根據"11/9/2007"的即時資料,目前的金價一盎司834.90美元油價一桶96.55美元,手上拿著台幣千元鈔10張可換到黃金10.54公克石油3.21桶211.54歐元310.30美元,十年後剩下9.03張。

去部落格曬曬陽光

2007年10月28日星期日

LinkXD webapp 0.0.1 release 釋出

Prism 是一種新的瀏覽器應用嘗試,要體驗這種應用,需要先安裝 Prism這個軟體,然後再設定預計要使用的網站,一個網站可以設定為一個程式,Prism 本身以 Firefox 3 為核心,將單一多功能網站包成一種類桌面應用程式,方便使用。

要舉例類比的話,Firefox 秀的對象是 HTML,而 Prism 秀的對象則是一個互動豐富的網站(ajax/web2.0...)。

一開始從Mozilla Links 正體中文版: WebRunner一文看到消息,知道 Prism 的測試版本已經出來,這個版本是由原來的 WebRunner 0.7 改版而成,直接變成 Prism 0.8 版,看完後覺得這種應用的模式好像很有趣,對於一些只是要用某種服務的人來說,算是 「夠用就好」。

後來又看到Prism - Mozilla 推出的超精簡瀏覽器 @ Nelson 的遊樂場一文的詳細介紹,還有這篇Web2Desk: 从Mozilla发布Prism谈新桌面之争提到 AIR 的應用,看起來蠻熱鬧的,於是想說做幾個簡化版的LinkXD webapp 來玩看看。

要開始作前,建議先到Mozilla Labs Blog » Blog Archive » Prism 這裡看看資料,不過因為之前它的名稱是WebRunner,所以 wiki 這方面的資料會比較多,例如要查WebRunner:Bundle或是WebRunner:Scripting都有資料參考,雖然資料有點舊,不過架構基本上差不多。

要測試前,請先下載安裝Prismfor Windows後,再去下載 LinkXD webapp 檔(在很下面),按兩下應該就可以執行。執行時可以選右下角將之安裝在桌面,下次按兩下就會開啟這個程式,目前這個只是嘗鮮版,功能就是滑鼠右鍵,剪個連結轉成 HTML 到剪貼簿而已,可以選字或是不選字來決定連結出現的文字。下載的 webapp 只是個 zip 檔案,解壓縮後可以看到程式碼。



可以分別下載 linkxd-0.0.1.webapp、 funp-0.0.1.webapp、 hemidemi-0.0.1.webapp 試看看,其實都差不多,只是改幾個字而已,這些 webapp 單純只是測試用途,讓你體驗一下這類程式的應用。

練習的過程中,覺得比較明顯的部份是右下角的提示功能,類似 msn/skype 的使用者登入的那種提示畫面,這點 gmail.webapp 的範例有示範,他會定時去讀取 HTML 的 title 來分析是否有新的信進來,然後彈出一個提示讓你知道。

gmail.webapp 這類應用會不會有機會取代桌面用的 email 程式還很難說,只是隨著 Gmail 不斷地延伸其支援的範圍,離線可能支援的程度越來越大,網站應用程式與桌面程式的界線越來越模糊,接下來的發展應該會很有趣。

例如在書籤網站的 webapp,可能會跳出有人剛推薦或是收藏的這類即時訊息,這些由書籤網站提供的 webapp 放在桌面上,讓使用者點兩下一開就上,並提供即時的資訊,對一般使用者來說,就是使用書籤或是社交服務,至於是放本機還是網路,通常不是一般使用者關心的重點。

讓使用者去開瀏覽器到某個網站頁面的這件事,改為點兩下開一個網站應用程式來使用,聽起來好像只是開瀏覽器與否的差異,但是對於很多弄不清楚瀏覽器為何物的使用者來說,這樣「夠用就好」,不夠再說。

說一百句不如你練一次,應該會對這種模式有更多的體會。如果你要改,直接找到安裝 Prism 的 profile 目錄下,這篇讓開啟網路應用程式跟本地端程式一樣方便 - Prism | joaoko’s blog有提到相關的資訊,直接用記事本改改網址或是 js 檔,就可以邊改邊玩。

接下來的變化會讓這個工具更簡單使用,將可以從 Firefox 的工具表單產出一個 webapp,參閱 Alex Faaborg - » Prism可以得知其中的細節,這時一個網站的Favicon就變得很重要,因為它需要將這個小圖變成桌面的比較大的圖,又不希望模糊掉。

再補一篇 Prism, Mozilla’s take on desktop web apps : Mozilla Links

Adobe AIR 或是 Microsoft Silverlight都試圖佔據這塊 online/offline 中間(onffline?)模糊的地帶,使用者通常不會太在乎這塊地方是誰的,好用又免費就好,不過有機會的話,請開發者將開放平台(open platform)這點也放入你採用一個技術的選項考量之中。

online + offline = onffline ?


引用 Mozilla Labs Blog » Blog Archive » Prism:
we're not building a proprietary platform to replace the web.
We think the web is a powerful and open platform for this sort of innovation,
so our goal is to identify and facilitate the development of enhancements
that bring the advantages of desktop apps to the web platform.

去部落格曬曬陽光

LinkXD

2007年10月26日星期五

LinkXD 0.4.1 Release 釋出

LinkXD 0.4.1 Release 釋出

這一版增加了去部落格曬曬陽光的小貼紙,關於設計的細節可以參閱 Gimp 2.4 的應用的說明。

另外提供 HTML 碼編輯模式,方便貼入臨時的剪文,關於所見所得編輯器與 HTML 編輯的問題可以參閱 樂連 LinkXD FAQ



再推一下:

陽光部落格-當我們同在一起 - yam天空部落
「陽光娃娃到你家」來票選囉!
陽光部落格-當我們同在一起:陽光娃娃身上的壓力衣 - yam天空部落

2007年10月24日星期三

Gimp 2.4 的應用

GIMP - The GNU Image Manipulation Program 從 2.2 走到 2.4 花了好幾年,這裡用來紀錄應用在 LinkXD 的過程。官方網站很多資料,需要更多資料可以參考這個社群網站gimpusers.com,其中有很多功能指導。

一開始是看到「陽光娃娃到你家」來票選囉!,想說設計一個笑臉小貼紙來推下面部落格的連結。

陽光部落格-當我們同在一起 - yam天空部落
遇見陽光 看見希望 - Yahoo!奇摩部落格
陽光基金會-無名部落格



剛好GIMP 2.4 Release Notes加上Red Hat Magazine | GIMP 2.4 preview的說明,看起來 2.4 版不錯用,就拿來練習一下。

該圖主要是利用Perspective Clone來做視覺的延伸效果,另外特別的是光線的特效,打光之下,上半部的壓力衣顏色被消去了,在陽光下我只看見一臉的笑。



另一個 3D 練習來自這個 Creating 3D icons - GIMP tutorial/howto - gimpusers.com 連結的教學。



練習 Neon Glow - GIMP tutorial/howto - gimpusers.com 的黑暗笑臉。



練習 結冰字的冷笑臉。




使用 Xtns - Logos - Gradient Bevel 特效的練習。




使用 Xtns - Logos - Alien Glow 特效的練習。




其他好地方:

Gimp範例教學
Gimp影像處理錄影教學

本 著作 係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.

LinkXD 0.4.0 Release 釋出

人的懶惰真的是軟體發達的原因,繼LinkXD 0.3 Release 釋出之後,又做了個大修改,這次試圖整合既有的所見所得編輯器Rich Text Editor in LinkXD進去,遇到一些問題,所以捨棄 0.3 編號,向 0.4 前進,過去的請把它忘記。

最後挑來用的是Yahoo! UI Library: Rich Text Editor,一來是 BSD 授權整合比較方便,關於授權部份請參閱Yahoo! UI Library: License,只有拿來用,並沒有任何修改,用起來很方便,推薦使用。

細節請參考 樂連 Download LinkXD,下為使用前需要注意的步驟,以及使用快捷鍵的圖說。






合:結束全文
不要來亂 ..

版權填一填啦!
Creative Commons License
本 著作 係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.

2007年10月22日星期一

Rich Text Editor in LinkXD

考慮加上 Rich Text Editor 方便編輯短文,下面為收集的資料。

Yahoo! UI Library: Rich Text Editor

LinkXD 剪下後已經轉成 HTML,但是 YUI-RTE 預設介面是讓你寫入格式化文字,並無法直接貼 a 的 tag,於是要考慮切換成正常 textarea 模式來貼,這個作法可以參考
Plain Text Switcher。要不然就是換用按鈕來貼文,這樣應該可以避過 textarea 的限制,就像是Flickr Image Search的作法一樣,旁邊的小視窗可以按下後將 HTML 直接放到 Editor 去。

既然要整合 YUI 這類函式庫,會遇到一個問題就是必須將給 Firefox 執行的 js (XPCOM) 可以在 YUI 之中呼叫與執行,這點要注意 js 放進去的順序與位置很重要,不然就是參考Using addModule to Add Custom (Non-YUI) Content with YUILoader,像 YUI Library 這種功能豐富的工具,通常有自己的載入方式,這點要注意。

還有一個問題是載入資源 css/js 的問題,利用 chrome URL 的作法如 chrome://linkxd/content/foo.xhtml ,這樣輸出的 YUI editor 部份動作會有問題,像是 createlink/insertimage 就不相容,會出現跳出頁面空白的現象,於是必須改為非 jar 佈署方式,就是不用 chrome:// 而用 file:// 去讀取該 html ,才可以正常運作 createlink/insertimage。

其實用線上方式來整合會方便許多,但是內嵌卻可以提供離線操作這個好處,這算是決定採用內嵌方式的主要原因,不過一個缺點是包起來的東西變得太大,即使有壓縮,還是要將近 800Kb。

安裝後會有另一個 file:// 的問題會出現,使用 XPCOM 的權限問題,因為 file:// 開啟的網頁基本上是不能取用 XPCOM 的服務,使用下面的作法可以讓 YUI 的 js 取用 XPCOM,不過每次都會問一次會讓人覺得麻煩,除非使用「記住」的選項,這樣也會讓人感到困擾。

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

解脫權限問題可以採用 JavaScript Security: Signed Scripts ,不過看起來更複雜。

其他

Some Notes on the YUI Rich Text Editor

5 Open Source Rich Text Editors

TinyMCE Javascript Content Editor by Moxiecode Systems AB

FCKeditor - The text editor for Internet

Google Web Toolkit - RichTextArea

心路社會福利基金會

快樂是我們連結的理由

LinkXD Loud Link 主題式連結

這裡紀錄主題式連結的開發想法。

原始發想來自Eclipse Mylyn Open Source Project,這個重量級的更新讓 Eclipse 開發流程變得更快,更透明。

簡單說就是保存走過的連結或是參考連結,然後整份傳給其他合作的人。也就是提供一個種子,其中有預先設定好的主題與連結,供使用者下載後,再處理。之前貼入 a 與 img 標籤,現在改為 p 標籤,將資訊納入這個小方塊中。

例如中華白海豚的相關新聞,作成一個主題會比較方便引用。

參考連結

媽祖魚保育聯盟 -

引用 國際海豚年 搶救白海豚 - PeoPo 公民新聞:
中華白海豚原名為「印度太平洋駝背豚」,別名「媽祖魚」
中華白海豚 - Google 圖片搜尋

中華白海豚 - 香港海豚保育學會

中華鯨豚協會 - 首頁

SEDAC - Environmental Sustainability

快樂是我們連結的理由

SVG in LinkXD

紀錄 SVG 測試的過程。

一個連結的通常可以用一行字解決,為何需要用 SVG 這個格式,很多瀏覽器並不支援這種格式,這樣對其他使用者並不友善。另外一個問題是很多網頁應用不會讓你嵌入下列的程式碼。

http://www.croczilla.com/svg/samples/arcs1/arcs1.svg

可以預覽,但是無法張貼。

object data="http://www.croczilla.com/svg/samples/arcs1/arcs1.svg"
type="image/svg+xml" height="300" width="300"


好處是可以嵌入即時的修改,當這行連結字被貼入某個 URL 之後,你不去這個 URL 是無法更改這行字的,所以如果你要改的這行連結有幾十個地方,那就很麻煩了。用 img src 是最方便,不過那需要產出圖片。

samples

所以兩個都擺,img + svg 這樣至少會出現 img,svg 就要 firefox 等有支援的才會出現。

SVG and HTML - Svg wiki提到四種方式,inline SVG 等於把圖貼上去,這點適合離線使用,不適合即時更新的簽名使用。

SVG: object or embed?

有點類似Inversion of control
或是Dependency injection

快樂是我們連結的理由

2007年10月21日星期日

LinkXD 0.3 Release 釋出

細節參照 《樂連》 - Link and XD

主要是增加熱鍵功能,並改了一下資料庫的表格。

LinkXD Keyboard Shortcuts 快捷鍵


不知道要貼什麼(Alt+/)樂亂連功能


天使太用力@陽光

快樂是我們連結的理由

2007年10月20日星期六

LinkXD Development Environment 開發環境

紀錄使用的開發環境。目前在尋找可以 Code refactoring 的 JavaScript 編輯器,一是自由軟體,一是至少要可以 rename,因為接下來可能需要寫一些如何改裝 LinkXD 的東西。

1. Eclipse.org home主要開發平台。

2. Subversive - SVN Team Client用來連接 Google Code 的 SVN 服務。

3. Adobe Labs - JSEclipse補字功能不錯,用起來很順,免費但不能自由散佈。

4. Firebug - Web Development Evolved查 Firefox 的問題與調整 CSS 格式。

5. Console² :: Firefox Add-ons除錯使用,可以輸出 chrome 的錯誤。

6. SQLite Database Browser
用來管理與測試 linkxd.sqlite 資料庫檔案。

7. GIMP - The GNU Image Manipulation Program 用來編輯圖片。

8.KompoZer - Easy web authoring 用來編寫網頁。

最新活動@聯合勸募協會

快樂是我們連結的理由

2007年10月19日星期五

LinkXD 的 Popular Queries 熱門關鍵字連結

想要再貼文的時候,可以順便貼一下熱門關鍵字相關的連結。

Google 可以查 Zeitgeist By Country This Month

Yahoo!奇摩搜尋榜

LinkXD

2007年10月18日星期四

LinkXD 網站的樣板 CSS Template

《樂連》 - Link and XD現在有點簡單,
這裡紀錄使用 CSS 的紀錄。

Download free CSS templates - Free CSS Templates這裡找一個,它的授權是使用 CC 標示,所以用起來沒有問題。

LinkXD

LinkXD 與 Social bookmarking 書籤網站

狀態:未完成

根據List of social software這份資料,選幾家註冊提供服務。

del.icio.us

Digg

HEMiDEMi - 黑米共享書籤

funp 推推王

社群網站往往需要大頭照,所以需要設計一個。



快樂是我們連結的理由

版權宣告 Copyright

程式碼部分採用Apache 2.0

《樂連》 - Link and XD 網頁與圖片部分採用CC 姓名標示-非商業性-相同方式分享 2.5 台灣

LinkXD

2007年10月17日星期三

LinkXD Keyboard Shortcuts 快捷鍵

這裡提供《樂連》LinkXD快捷鍵的設定作法。

支援版本:未釋出

目前快捷鍵:

Alt+, (Alt+逗點) 會產出連結Lnk。

Alt+. (Alt+句點) 會產出引用Quote。

人畢竟是懶,剪個連結都想要類似Ctrl+C 的作法,來處理最常用的 HTML link 。雖然可以按右鍵,進去選 HTML Link,但是總是麻煩一點,何況這件事如果會做數萬次的話。

另一個問題是快捷鍵需要可以切換成 wiki 模式或是 BBCode 模式,這個動作不可能由改程式來做,所以需要加一個功能列放在右下角的LinkXD上來做。



XUL Tutorial:Keyboard Shortcuts - MDC
Creating a Firefox sidebar - MDC

快樂是我們連結的理由

2007年10月16日星期二

Google Analytics 裝在 LinkXD 的紀錄

這裡會持續紀錄使用的過程。

要知道有多少人看過網頁,於是裝上Google Analytics來看看《樂連》 - Link and XD的流量等統計資料。

EeePC Firefox 支援 LinkXD 的程度

目前手上沒有機器,這裡是留起來當作日後更新的紀錄使用。

ASUS Eee PC的Firefox不清楚是那一版,有機會想看看是否可以跑 《樂連》 - Link and XD,不知道這類小螢幕的設計有哪些要注意的地方。

已經有An Unofficial ASUS EeePC Eee PC 701 Community非官方的使用者網站提供很多消息,關於 OS 的部份。引用 unicap and UCView on the Asus EeePC:
The installed Xandros version is based on Debian Etch.

根據Debian資料,Etch 4.0版是今年才出現的版本。至於xandros比較少聽到消息。

沒有現成可以測,倒是可以先考慮測一下 Ubuntu ,根據2007 Desktop Linux Survey results revealed說法,Ubuntu 蠻多人在用,過幾天 7.10 就要正式釋出,參考Ubuntu 7.10 Release Candidate

http://yurinfore.blogspot.com/search/label/eee-pc

快樂是我們連結的理由

如何設定 Firefox Profile

有圖有真相 《樂連》 - Link and XD

LinkXD 樂連開格首貼

這個格子用來支援 《樂連》 - Link and XD 的日誌紀錄,有意見也可以貼這裡LinkXD