宅學習 - Social Learning Space 社交學習空間@FJU CSIE

在SLS的討論組群裡很多同學都對Microsoft Popfly做了很詳盡的介紹

Mashuo的確是可以讓網頁充滿許多變化，也可讓使用者充分發揮創意

在這裡我要來介紹一個超級簡單到不行的應用，讓不熟popfly的人也可以試著玩玩看

我要做的是一個用mashup技術來展式flickr上照片的應用

完成結果如下: (結果無法顯示，所以我用圖片代替)

他可以貼在你的blog上面，也可分享語法給別人，很方便的

那下面我就一一來講解製作的方法

1.進入網址http://www.popfly.com/然後登入帳號，MSN的帳號就可以了

2.開始創立我們的Mashup吧，點下Create下面的Mashup

 2. 進入建立Mashup的頁面，點下左手邊Images&Video下面的flickr，右手邊白色頁面上就會出現紅色的方塊了

3.接著我們要到flickr去申請API KEY， 點我來去申請，然後點下紅色方塊旁的工具圖示

4. 將Operaction改成getUserPhotos意思就是取得的資訊是使用者的圖片，然後下面User的地方就是flickr帳號，第三個則是要印出幾張照片，設定好之後按下OK

5.接著按下左手邊Display找尋下面的PhotoTiles，之後右邊一樣會出現一個紅色方塊

6.點一下flickr紅色方塊旁邊的藍色點點，然後拉到PhotoTiles的藍色點點在點一下，它們兩個就會連結了

7.點下PhotoTiles的工具圖示，下面的Properties是可以讓你設定外觀格示

8.設定好了之後點下左上角大大的綠色RUN的箭頭圖示，就可以測試了

9.測試OK就按下右上角的save輸入檔案名稱之後就可以把此Mashup儲存起來了

10.接著點下右上角的share然後點一下右邊的Embed就可以複製程式碼囉!

11.接著快把程式碼丟到自己想分享的頁面上吧!

簡單的Mashup應用就可以讓頁面顯得生動許多，Display下面還有很多呈現的方式可以讓各位玩玩看

有哪邊教學有錯誤可以提醒一下唷!感謝大家觀賞!

大家都知道popfly是一個非常方便的Mashup工具，它提供許多元件(Block)，只要動

動滑鼠，不需要高深的寫程式功力，也不需要像畢卡索一樣的藝術天分，透過這樣的方式

，可以很容易的將Facebook、flickr、youtube、RSS等混搭在同一頁面上，製作出

自己想要的混搭風格，而silverlight的支援也使得其界面變得非常美觀。

而popfly還有一個非常有趣的功能，就是自己能夠寫遊戲 ─ popfly game creator

它其實跟我們用flash寫小遊戲一樣，可以自己設定場景，利用簡單的圖像工具以及內建豐

富的圖庫，可以用拖拉的方式設計出一個遊戲，popfly目前有內建一些些它們寫好的遊戲

我們可以上傳我們想要的圖片將它修改，或者自己設計一套game function，控制遊戲中的

動作，我覺得比起flash它的操作較容易上手，不會像flash的介面這麼繁瑣，而silverlight

的特效也讓我對它加分不少，當你設計好你的遊戲之後，就可以像其他Mashups一樣，將它

嵌入你的網站。

以下是一個還不錯的football game

http://www.popfly.com/users/Bundy197/Football

有興趣的話也可以按下Create your own game 來玩玩

之前因為作業的關係試用了一下microsoft的popfly

發現popfly與yahoo pipe和google mashup editor還蠻類似的

一開始覺得popfly的介面看起來比較豐富和花俏

但是使用後覺得實用性不輸給其他mashup工具

而且重點是,popfly真得很好上手

即使是叫一個沒有mashup的人來使用也能很快速的上手

這也是microsoft popfly的一大優勢

只要安裝了silverlight就可以開始用了

雖然目前還是beta版本

但是已經有不少人在使用了

相信popfly以後應該會越來越多人使用

第一次接觸popfly時

覺得這個網頁很有趣也很方便

因為就算不懂網頁程式的人

現在也可以很輕鬆的編輯屬於自己的網頁了

因為只要利用滑鼠把自己想要的東西拖曳進去頁面

全部拉好後就可以開始連連看

把所有關聯性拉好後，按下RUN就可以出現自己想要的功能性網頁

真的很神奇!

微軟推出的這項mashup程式，讓想撰寫網頁的人們不再天天對著電腦coding

而只要一點指上功夫就可以完成，而且很快速。

而每個拖曳進去的圖像上面都有一個小扳手的按鈕

點進去可以修改此工具的參數，該如何傳遞、怎麼流動等等

若是有點程式基礎的人還可以點選advanced選項

自己修改裡面的程式碼來達到自己想要的效果

注意:

Popfly是以Silverlight技術所開發的程式，因此一定要安裝Silverlight才能使用Popfly提供的mashup功能

在課程當中 要使用mushup tool 的應用  第一次接觸了popfly
一開始對於如何使用感到煩腦 還好有提供了一些範例
從範例中就大概可以了如何使用  而且界面上的使用也很不錯

利用拖拉方式 就可進行關連 真的是很方便

如此一來  即使 不會很深的code 也可以mashup出自已想要的東西
真的是很方便

所使用TOOLS:4個

YAHOO PIPES:

http://pipes.yahoo.com/pipes/person.info?eyuid=S.RTXlglq2asqbcK8w7k7Q--

GOOGLE:

http://sammo.googlemashups.com/

popfly‏:

http://www.popfly.com/users/czoo00/cz

IBM LOTUS MASHUP:

一開始在做IBM時就遇到很多問題，當我進入MASHUP的環境後

所有的下拉式選單、工具都是亂碼：不論哪一台電腦都有這個問題.............

於是我嘗試其他方法，先到MASHUP HUB先產生一個自己的FEED，而他的操作環境很類似於YAHOO PIPES

只是他會挑瀏覽器、連線速度很慢  就是考驗操作者的耐心

於是我將我時常瀏覽的幾個資訊網站FEED：https://greenhouse.lotus.com/mashuphub/client/plugin/generate/entryid/3163/pluginid/10

之後再將他匯入MASHUP 裡面  結果就大概像這樣：

弄出來的東西並沒有很完美，因為全都敗在我看不懂？？？？？？是什麼東西....

吳則漢 dragonjohn 494512217

孫于婷 b4d1022  494512059 

張逸豪 frankchang0125 494512102

何威達 weidaho 494512528

http://lab2.googlemashups.com/

使用四種技術 Yahoo Pipe/Google Mashup Editor/Microsoft Popfly/IBM Lotus Mashups

利用Yahoo pipe篩選Feed、IBM LotusGreenhouse篩選Feed以及用Popfly製作gadget一起結合到Google Mashup editor裡面

DEMO時間；10/29下午15:40

心得:

本次專題分功為一人學一種mashup tools

之後把3個mashup出來的Feed和Gadget一起裝到google mashup editor裡面

Yahoo!pipes 比較偏向於蒐集feed然後去做分析結合等

圖形化介面也容易讓沒有資訊背景的人下手

 Google mashup editor提供寫作程式的介面

裡用gdata的型式

可以嵌入xml語法和iframe格式

對於資工背景的人有很大的彈性

 Microsoft Popfly的UI介面相當的華麗

左手邊有許多工具可以自行結合

也可撰寫html語法

可以像網頁般顯示

此外還可以把他輸出成gadget方便使用者嵌入到自己的網站

IBM Lotus Greenhouse則有兩個比較好用的系統

 mashupHub與mashup center

mashuHub像Yahoo!pipes一樣可以塞選、過濾自己要的Feeds

mashup center則可以拉出想要的小工具做混搭

可惜速度很慢

 很常讓人失去耐心

 Google mashuo editor與 IBM Lotus Greenhouse都需要申請等通知

可是效率似乎沒有很快

所以滿多人在教做頁前1.2天才去申請

卻直到DEMO期限後才收到認證信

Yahoo! Pipes & Microsoft PopFly

Yahoo! Pipes:

http://pipes.yahoo.com/pipes/pipe.info?_id=kG2UWNSd3RGXBYjSbbsjiw

Microsoft Popfly:

http://www.popfly.com/users/linnrobin/user%20input%20image%20slide

Yahoo! Pipes is more like a feed for news; it’s more like a search engine with some simple coding technique. The interface of Yahoo! Pipes is something that ordinary person wouldn’t understand if they don’t have any basic in computing. Like string tokenizer, feed CSV, etc.

Microsoft Popfly is simpler in terms of interface and user friendliness. It approaches the regular person’s point of view, especially with the display option. It’s not just a coding, but it’s a program builder. But you can’t do too much with it. I guess if you want to start something great, you should know the basics. Not just using some other’s application.

Yahoo! Pipes is fun in its own way, but ‘m more interested in Microsoft Popfly.

By林坤建

Google Mashup

Google Mashup 基本上是直接用程式碼編輯的，大致上和HTML編輯差不多，能很快就上手，但它是用<gm>開頭和</gm>結尾的，這應該是Google自己要跟別人不一樣用的吧。編輯時他分三部份:Editor、Feed Browser、sandbox；Editor:是編輯程式碼、Feed Browser:不太了解用途、sandbox:是預覽編輯的程式。

一開始申請無法直接使用，而是要等幾天認證之後才能使用，這真是有點麻煩~，我覺得這個並沒有比Google site好用，雖然它旁邊有範例程式可以參考，但是還是覺得很難設計，反而是用一般的網頁設計比較好用。

Google Mashup:

http://googlemashups.com/b900282002

By蕭英凱

Project made by:

資工三甲

Name:               Student ID              SLS ID

蕭英凱              495511595            onepeace

林坤建              495511648           libon

李哲宇              495511569           tzef

劉權德              495511052           ie955105

For the class of: WEB 2.0 at FJU university of Computer Science department