Idea Grapes http://blog.yam.com/yoren Think Different zh-tw blog.yam.com All Rights Reserved 測試：張貼帶有Note的Flickr相片 <script language="Javascript" src="http://webdev.yuan.cc/flickr/flickrnotes.php?photoid=86341824"></script><noscript><a href="http://www.flickr.com/photos/yoren/86341824/"><img src="http://static.flickr.com/42/86341824_549b297669.jpg" /></a></noscript>來自<a href="http://webdev.yuan.cc/scriptlet.html">Yuan.CC Flickr Experiments</a>的這支Script - <a href="http://webdev.yuan.cc/flickr/flickr_notes.html">Display Flickr Photo with Notes</a>，可以讓使用者把Flickr上面的照片，連同note（滑鼠經過時會顯示的註解）一起貼到網頁裡面。 <a href="http://blog.yam.com/yoren/article/5669406">(觀看全文...)</a> 來自Yuan.CC Flickr Experiments的這支Script - Display Flickr Photo with Notes，可以讓使用者把Flickr上面的照片，連同note（滑鼠經過時會顯示的註解）一起貼到網頁裡面。 (觀看全文...) ]]> http://blog.yam.com/yoren/article/5669406 blog plus Sat, 04 Feb 2006 15:49:57 +0800 Feed圖示，續篇 昨天在<a href="http://blog.yoren.info/2005/12/23/284/">Feed圖示</a>這篇裡面提到的Matt Brett，他致力於推動以這個圖示<img src="http://blog.yoren.info/wp-content/feedicon12x12.gif" alt="Feed Icon" />來表示網站的同步內容（syndicated content），也就是將所謂的feed、rss或是xml，一律以該圖示表示。<br /> <br /> 因此，他建立了<a href="http://www.feedicons.com/">Feed Icons網站</a>來推廣這個新的標準圖示。除了昨天所提到的AI與PSD兩種格式以外，還添加了常用的GIF、JPG與PNG版本，讓使用者可以直接在自己的網站上面套用。<br /> <br /> Matt將在1月6日開放使用者上傳自己客製化後的圖示，讓更多人可以互相交流分享。想要持續收到相關訊息的話，也可以在網站上面訂閱電子信。 Feed圖示這篇裡面提到的Matt Brett，他致力於推動以這個圖示Feed Icon來表示網站的同步內容（syndicated content），也就是將所謂的feed、rss或是xml，一律以該圖示表示。

因此，他建立了Feed Icons網站來推廣這個新的標準圖示。除了昨天所提到的AI與PSD兩種格式以外，還添加了常用的GIF、JPG與PNG版本，讓使用者可以直接在自己的網站上面套用。

Matt將在1月6日開放使用者上傳自己客製化後的圖示，讓更多人可以互相交流分享。想要持續收到相關訊息的話，也可以在網站上面訂閱電子信。 ]]> http://blog.yam.com/yoren/article/5542257 blog plus Sat, 24 Dec 2005 12:10:09 +0800 Feed圖示 <img src="http://www.mattbrett.com/images/feed-icon-comparison.jpg" alt="RSS Icons" align="left" style="margin:3px" class="flickr-photo"/>微軟的RSS團隊12/14<a href="http://blogs.msdn.com/rssteam/archive/2005/12/14/503778.aspx">在blog上面宣佈</a>，他們將在IE 7裡，採用與Firefox相同的Feed圖示，此舉也得到Mozilla的同意。<br /> <br /> 設計師Matt Brett對於這個決定感到很高興。於是他利用微軟blog上面公佈的32×32圖示，將其重製為向量的版本，讓使用者可以自由調整其大小。整個壓縮檔內包括14個PSD檔案（尺寸從16×16到128×128）、4個AI檔案，分裝在原始的橘色與灰階兩個資料夾內，並附上一個PDF檔案，說明如何利用Photoshop修改圖示顏色。<br /> <br /> 這套Feed圖示檔案請進入<a href="http://www.mattbrett.com/archives/2005/12/the-new-standard-feed-icon/">Matt Brett的blog下載</a>，不過當然你要有Photoshop或Illustrator才能使用。<br /> <br /> 如果你在自己的網站上面使用了這個圖示，別忘了<a href="http://www.mattbrett.com/archives/2005/12/the-new-standard-feed-icon/">留言</a>告訴Matt，感謝他的分享。[via <a href="http://www.paulstamatiou.com/2005/12/22/rss-icons/">PaulStamatiou.com</a>] 微軟的RSS團隊12/14在blog上面宣佈，他們將在IE 7裡，採用與Firefox相同的Feed圖示，此舉也得到Mozilla的同意。

設計師Matt Brett對於這個決定感到很高興。於是他利用微軟blog上面公佈的32×32圖示，將其重製為向量的版本，讓使用者可以自由調整其大小。整個壓縮檔內包括14個PSD檔案（尺寸從16×16到128×128）、4個AI檔案，分裝在原始的橘色與灰階兩個資料夾內，並附上一個PDF檔案，說明如何利用Photoshop修改圖示顏色。

這套Feed圖示檔案請進入Matt Brett的blog下載，不過當然你要有Photoshop或Illustrator才能使用。

如果你在自己的網站上面使用了這個圖示，別忘了留言告訴Matt，感謝他的分享。[via PaulStamatiou.com] ]]> http://blog.yam.com/yoren/article/5539105 blog plus Fri, 23 Dec 2005 09:41:48 +0800 Google Reader：相簿網站的特殊顯示模式 <a href="http://www.google.com/reader/">Google Reader</a>現在針對五家網路相簿，<a href="http://googlereader.blogspot.com/2005/12/why-should-text-have-all-fun_15.html">提供特殊的顯示模式</a>，其列表與範例如下：<ul><li><a href="http://www.buzznet.com/">Buzznet</a> - <a href="http://www.google.com/reader/preview/*/feed/http://tony.buzznet.com/user/atom/atom03.xml?type=synd" class="preview">sample feed</a></li><li><a href="http://www.flickr.com/">Flickr</a> - <a href="http://www.google.com/reader/preview/*/feed/http://www.flickr.com/services/feeds/photos_public.gne?tags=orange&format=rss_200" class="preview">sample feed</a></li><li><a href="http://www.fotki.com/">Fotki</a> - <a href="http://www.google.com/reader/preview/*/feed/http://feeds.fotki.com/jhrosier/whatsnew_nktzmgmfngulf.rss" class="preview">sample feed</a><br /></li><li><a href="http://www.smugmug.com/">smugmug</a> - <a href="http://www.google.com/reader/preview/*/feed/http://macrophile.smugmug.com/hack/feed.mg?Type=nickname&Data=macrophile&format=atom03" class="preview">sample feed</a></li><li><a href="http://www.textamerica.com/">Textamerica.com</a> - <a href="http://www.google.com/reader/preview/*/feed/http://shotoftheday.textamerica.com/rss.aspx" class="preview">sample feed</a></li></ul> <a href="http://blog.yam.com/yoren/article/5525149">(觀看全文...)</a> Google Reader現在針對五家網路相簿，提供特殊的顯示模式，其列表與範例如下： (觀看全文...) ]]> http://blog.yam.com/yoren/article/5525149 blog plus Mon, 19 Dec 2005 13:45:33 +0800 假裝你是搖滾巨星 最近兩個IdeaGrapes都被spam了。blog.yoren.info因為是採用WordPress架設，可以審核留言和引用，所以訪客們不會看到那些spam；不過養樂多這邊比較麻煩，只能事後手動刪除。<br /> <br /> 當然這些spam的數量還不致於大到讓流量破表，發生像<a href="http://www.oui-blog.com/">Oui-Blog</a>那種暫時倒站的情況。不過老是看到假裝對這個blog很有興趣，或者是故作慷慨大方，奉送free mp3、free porn的留言，總還是有點刺眼。<br /> <br /> 話說回來，最近在<a href="http://successful-blog.com/">Successful Blog</a>上面看到的這句話，倒是阿Q得還不賴。ME Strauss在這篇<a href="http://successful-blog.com/1/ignore-stinky-backlinks/">Ignore Stinky Backlinks</a>的結尾說，面對這些討厭的spam，blogger們不妨：「假裝你是個不能挑選粉絲的搖滾巨星，儘管朝著你的豪華轎車走去就是了。」（Pretend you’re a rock star, who can’t pick your fans. Keep walking to your limo.）<br /> <br /> 唔，那我先上車啦，大家慢走。
當然這些spam的數量還不致於大到讓流量破表，發生像Oui-Blog那種暫時倒站的情況。不過老是看到假裝對這個blog很有興趣，或者是故作慷慨大方，奉送free mp3、free porn的留言，總還是有點刺眼。

話說回來，最近在Successful Blog上面看到的這句話，倒是阿Q得還不賴。ME Strauss在這篇Ignore Stinky Backlinks的結尾說，面對這些討厭的spam，blogger們不妨：「假裝你是個不能挑選粉絲的搖滾巨星，儘管朝著你的豪華轎車走去就是了。」（Pretend you’re a rock star, who can’t pick your fans. Keep walking to your limo.）

唔，那我先上車啦，大家慢走。 ]]> http://blog.yam.com/yoren/article/5505868 blog plus Mon, 12 Dec 2005 23:04:29 +0800 測試：嵌入Flickr幻燈片 <iframe align=center src=http://www.flickr.com/slideShow/index.gne?user_id=55941397@N00&tags=tokyotower frameBorder=0 width=485 scrolling=no height=485></iframe><br /> <br /> 在網頁裡嵌入Flickr相簿裡的照片，以幻燈片模式播放，基本上是靠下面這段程式碼：<blockquote>&lt;iframe align=center src=http://www.flickr.com/slideShow/index.gne?user_id=自己的id&#038;tags=標籤名稱 frameBorder=0 width=500 scrolling=no height=500&gt;&lt;/iframe&gt;</blockquote>其中比較重要的是關於user_id的取得，需要透過「<a href="http://eightface.com/code/idgettr/">The Flickr idGettr</a>」這類的程式，才能知道自己的username轉換成的id為何。 <a href="http://blog.yam.com/yoren/article/5500054">(觀看全文...)</a>

在網頁裡嵌入Flickr相簿裡的照片，以幻燈片模式播放，基本上是靠下面這段程式碼：
<iframe align=center src=http://www.flickr.com/slideShow/index.gne?user_id=自己的id&tags=標籤名稱 frameBorder=0 width=500 scrolling=no height=500></iframe>
其中比較重要的是關於user_id的取得，需要透過「The Flickr idGettr」這類的程式，才能知道自己的username轉換成的id為何。 (觀看全文...) ]]> http://blog.yam.com/yoren/article/5500054 blog plus Sun, 11 Dec 2005 01:09:31 +0800 FeedBurner對瀏覽器更友善了 <a href="http://blog.yoren.info/wp-content/new_style_zoom.gif"><img src="http://blog.yoren.info/wp-content/new_style_zoom.gif" alt="FeedBurner Browser Friendly" width="450" class="flickr-photo"/></a><br /> <br /> 網誌的feed大多是未包含樣式資訊的xml檔案，因此以瀏覽器閱讀時，只會看見單調的純文字內容，很容易嚇跑一般訪客。<br /> <br /> 而<a href="http://www.feedburner.com/">FeedBurner</a>的「Browser Friendly」功能，可以將feed優化，亦即套用樣式資訊，使feed在瀏覽器裡面看起來，與一般網頁無異。 <a href="http://blog.yam.com/yoren/article/5494157">(觀看全文...)</a> FeedBurner Browser Friendly

網誌的feed大多是未包含樣式資訊的xml檔案，因此以瀏覽器閱讀時，只會看見單調的純文字內容，很容易嚇跑一般訪客。

而FeedBurner的「Browser Friendly」功能，可以將feed優化，亦即套用樣式資訊，使feed在瀏覽器裡面看起來，與一般網頁無異。 (觀看全文...) ]]> http://blog.yam.com/yoren/article/5494157 blog plus Thu, 08 Dec 2005 23:05:48 +0800 BubbleShare：Add Album to My Blog <a href="http://webleon.net/">WebLeOn</a>曾在11月份介紹<a href="http://www.bubbleshare.com">BubbleShare</a>這個<a href="http://webleon.net/2005/11/bubbleshare.html">新概念網絡相冊</a>，用過之後，個人感覺它是繼<a href="http://www.flickr.com">Flickr</a>之後，少數還能令我驚豔的網路服務。<br /> <br /> 這幾天BubbleShare針對網頁介面做了一些<a href="http://weblog.bubbleshare.com/articles/2005/12/05/its-alive">修改</a>，並且增加了一個「<a href="http://flickr.com/photo_zoom.gne?id=70891759&size=o">Add Album to My Blog</a>」功能，使用者只要複製網站上面提供的程式碼，就可以將上傳的相簿以幻燈片的方式，在自己的blog上面播放，美觀又方便。<br /> <br /> 下面的範例是我去台南新營糖廠，體驗五分車之旅的照片。<br /> <br /> <iframe scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="http://www.bubbleshare.com/album/4677.c5608e826c2/mini" style="width:283px;height:235px;"></iframe> WebLeOn曾在11月份介紹BubbleShare這個新概念網絡相冊，用過之後，個人感覺它是繼Flickr之後，少數還能令我驚豔的網路服務。

這幾天BubbleShare針對網頁介面做了一些修改，並且增加了一個「Add Album to My Blog」功能，使用者只要複製網站上面提供的程式碼，就可以將上傳的相簿以幻燈片的方式，在自己的blog上面播放，美觀又方便。

下面的範例是我去台南新營糖廠，體驗五分車之旅的照片。

]]> http://blog.yam.com/yoren/article/5488759 blog plus Wed, 07 Dec 2005 00:59:23 +0800 [推薦]薄荷：Del.icio.us Play Tagger 的應用 <a href="http://del.icio.us/help/playtagger">Del.icio.us Play Tagger</a>真的很好用，貼心的blogger如我，馬上就把它加到自己的兩個網誌裡，讓網頁上的.mp3連結都能加上一個線上播放器。<br /> <br /> 後來我逛到<a href="http://blog.yam.com/laiho">鬥鬧熱</a>和<a href="http://www.3hive.com/">3hive</a>這兩個有mp3可以試聽的網站，不免就想，如果可以直接線上試聽就更方便了，不用非得等到整首歌下載完。<br /> <br /> 薄荷寫的「<a href="http://blog.yuan.cc/ck/archives/2005/11/delicious_play_tagger.html">Del.icio.us Play Tagger 的應用</a>」解決了這個問題。他寫了一段<a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> script，引入Play Tagger script，這樣便可以在任意網頁的.mp3連結前頭，都加上迷你線上播放器。他舉的應用實例很妙，請參考這張<a href="http://www.flickr.com/photos/ckyuan/65840824/">百度的截圖</a>。 <a href="http://blog.yam.com/yoren/article/5457187">(觀看全文...)</a> Del.icio.us Play Tagger真的很好用，貼心的blogger如我，馬上就把它加到自己的兩個網誌裡，讓網頁上的.mp3連結都能加上一個線上播放器。

後來我逛到鬥鬧熱和3hive這兩個有mp3可以試聽的網站，不免就想，如果可以直接線上試聽就更方便了，不用非得等到整首歌下載完。

薄荷寫的「Del.icio.us Play Tagger 的應用」解決了這個問題。他寫了一段Greasemonkey script，引入Play Tagger script，這樣便可以在任意網頁的.mp3連結前頭，都加上迷你線上播放器。他舉的應用實例很妙，請參考這張百度的截圖。 (觀看全文...) ]]> http://blog.yam.com/yoren/article/5457187 blog plus Fri, 25 Nov 2005 23:36:50 +0800 Play Tagger：Del.icio.us的線上mp3播放器 自從Del.icio.us在「<a href="http://del.icio.us/popular/system:filetype:mp3">system:filetype:mp3</a>」頁面，展示了一個簡便的線上mp3播放器後，便引來多方關注，詢問是否能將此功能運用到使用者的網站或blog上。<br /> <br /> 今天Del.icio.us終於對外開放這個命名為<a href="http://del.icio.us/help/playtagger">Play Tagger</a>的javascript，使用者只要將底下這段語法貼在網頁的&lt;head&gt;標籤之間（養樂多這邊，可以貼在「Blog基本設定」的「說明」裡），網頁上的mp3檔案連結之前就會出現一個簡易的播放器按鈕，讓訪客可以直接在線上播放這段音樂。<blockquote>&lt;script type="text/javascript" src="http://del.icio.us/js/playtagger">&lt;/script&gt;</blockquote>除此之外，這個播放器還會內建一個「tag this」連結，讓訪客可以直接將mp3檔案的連結加到Del.icio.us書籤。<br /> <br /> Del.icio.us還說，其實這支javascript早在2週以前便完成了，但是要為它命名卻是一件頭痛的事，除了最後定案的Play Tagger之外，其他候選的名稱還有：playDots、medialicious、mmmmMp3、del.icio.us mp3 player、ClickNipples......。<br /> <br /> 以下便是我的範例：<a href="http://yoren.castpost.com/Debussy - Clair De Lune.mp3">德布西：月光</a> system:filetype:mp3」頁面，展示了一個簡便的線上mp3播放器後，便引來多方關注，詢問是否能將此功能運用到使用者的網站或blog上。

今天Del.icio.us終於對外開放這個命名為Play Tagger的javascript，使用者只要將底下這段語法貼在網頁的<head>標籤之間（養樂多這邊，可以貼在「Blog基本設定」的「說明」裡），網頁上的mp3檔案連結之前就會出現一個簡易的播放器按鈕，讓訪客可以直接在線上播放這段音樂。
<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>
除此之外，這個播放器還會內建一個「tag this」連結，讓訪客可以直接將mp3檔案的連結加到Del.icio.us書籤。

Del.icio.us還說，其實這支javascript早在2週以前便完成了，但是要為它命名卻是一件頭痛的事，除了最後定案的Play Tagger之外，其他候選的名稱還有：playDots、medialicious、mmmmMp3、del.icio.us mp3 player、ClickNipples......。

以下便是我的範例：德布西：月光 ]]> http://blog.yam.com/yoren/article/5446220 blog plus Tue, 22 Nov 2005 19:17:37 +0800